/* =========================== Schriften =========================== */ @font-face { font-family: 'Ubuntu'; src: url(../fonts/ubuntu-v15-latin-300.woff2); font-display: swap; } @font-face { font-family: 'PT_Sans'; src: url(../fonts/pt-sans-narrow-v12-latin-regular.woff2); font-display: swap; } body{ font-family: Ubuntu !important; } h1, h2, h3, h4, h5{ font-family: PT_Sans !important; } /* =========================== Typografie / Buttons =========================== */ @media (min-width: 0px) { p{ text-align: justify; /* Blocksatz */ hyphens: auto; /* Silbentrennung */ } .btn{ display: block !important; text-align: center; } } @media (min-width: 768px) { p{ text-align: left; hyphens: none; } .btn{ display: inline-block !important; text-align: center; } } /* =========================== Globale Variablen / Scroll =========================== */ /* Eine Quelle der Wahrheit für die fixe Navbar-Höhe. Dein JS aktualisiert diesen Wert bei Load/Resize. */ :root{ --fixed-nav-h: 68px; } section[id], [role="region"][id]{ /* verhindert, dass Ankerziele unter die Topbar rutschen */ scroll-margin-top: calc(var(--fixed-nav-h) + 8px); } /* weiches Scrollen (wird vom JS übersteuert, stört aber nicht) */ html{ scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } } /* Seitliches Scrollen wegen AOS deaktiviert */ html, body { overflow-x: hidden; } /* AOS fallback: Inhalte sichtbar lassen, wenn Animationen nicht aktiviert werden */ html:not(.aos-enhanced) [data-aos]{ opacity: 1 !important; transform: none !important; visibility: visible !important; } /* =========================== Menü / Navbar =========================== */ .carousel-inner > .item > a > img, .carousel-inner > .item > img, .img-responsive, .thumbnail a > img, .thumbnail > img{ display: inline-block; margin-bottom: 2vw; } /* Backgroundcolor collapse Navbar */ .collapse:not(.show).navbar-collapse{ border-radius: 0; margin-top: 0; margin-bottom: 0; background-color: #212529; } .collapse.navbar-collapse{ border-radius: .25rem; margin-top: .5rem; margin-bottom: .5rem; } .navbar-collapse .navbar-nav{ padding-left: 10px; } .divider{ border: 1px solid #fff; } .navbar-dark .navbar-nav .nav-link{ color: #fff !important; } .navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover{ color: rgba(255,255,255,.5) !important; } .navbar-dark .navbar-nav .nav-link.active{ color: #fff !important; font-weight: bold; } .dropdown-item.active{ background-color: rgba(255,255,255,.15) !important; } .dropdown-item-ueberschrift{ color: #bb2d3b !important; } .dropdown-item-ueberschrift.active{ color:#dee2e6 !important; background-color: #bb2d3b !important; } .brand-text{ color:#fff; height:100%; } .brand-text p{ display: table-cell; vertical-align: middle; } .hotline{ text-decoration: none !important; } /* Inhaltsverzeichnis (falls verwendet) */ @media (min-width: 768px) { #inhaltsverzeichnis { display: block; height: auto !important; visibility: visible; } } /* =========================== Haupt-Content-Abstände =========================== */ .main { padding-top: 60px; padding-bottom: 100px; } .main_top { padding-top: 60px; padding-bottom: 30px; } .main_center { padding-top: 15px; padding-bottom: 15px; } .main_buttom { padding-top: 15px; padding-bottom: 30px; margin-bottom: 100px; } .main img, .main_top img, .main_center img, .main_buttom img { max-width: 94vw; } /* =========================== Farben / Utilities =========================== */ .grey{ background-color:#f8f8f8; } .opacity{ background: rgba(0,0,0,.3); position: relative; } .img_grey{ filter: grayscale(100%); } /* Orange eckige Aufzählungspunkte */ .orange-bullets-square{ list-style-type: square; } .orange-bullets-square li::marker{ color: var(--bs-orange); } /* Index-Schriftgröße auf sehr großen Screens */ @media (min-width: 1400px){ .index_p{ font-size: larger; } } .inline{ display:none; } /* =========================== Hero-Bilder mit Overlay-Text =========================== */ .image-container{ position: relative; width: 100%; height: 80vh; overflow: hidden; } .image-container img{ width: 100%; height: 100%; object-fit: cover; } .overlay-text{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; width: 100%; } .overlay-text h1, .overlay-text h2{ color: #fff; text-shadow: 0 0 5px #fff, 0 0 10px #979797, 0 0 15px #979797, 0 0 20px #979797, 0 0 30px #979797, 0 0 40px #979797; text-align: center; } @media (min-width: 1px){ .overlay-text h1{ font-size: 11vw; } .overlay-text h2{ font-size: 8vw; } } @media (min-width: 2000px){ .overlay-text h1{ font-size: 11em; } .overlay-text h2{ font-size: 10em; } } /* Step badge helper */ .step-badge{ width: 1.9rem; height: 1.9rem; } /* Bootstrap orange helper */ .bg-orange{ background-color: var(--bs-orange) !important; color: #fff !important; } /* 5) AOS glatter */ @media (prefers-reduced-motion: no-preference){ [data-aos]{ will-change: transform, opacity; } } /* =========================== Offcanvas / Hamburger-Menü =========================== */ .offcanvas-nav{ --bs-offcanvas-width: min(92vw, 340px); box-shadow: -6px 0 24px rgba(0,0,0,.35); backdrop-filter: blur(2px); } .offcanvas-nav .nav-link{ padding: .5rem 0; font-size: 1.05rem; } .offcanvas-nav .nav-link:hover{ opacity:.85; } /* iOS: Safe-Area unten füllen, damit kein Spalt sichtbar ist */ :root { --safe-bottom: env(safe-area-inset-bottom, 0px); } /* Feste Bottom-Navi (mobil) */ .navbar.fixed-bottom { /* Fallback für alte iOS-Versionen */ padding-bottom: constant(safe-area-inset-bottom); /* Moderne iOS-Versionen */ padding-bottom: var(--safe-bottom); background-clip: padding-box; /* sorgt dafür, dass die Fläche farbig bleibt */ } /* Mobiler Footer (euer