/* ============================================================================ modern.css — Design-Schicht ueber style.css ---------------------------------------------------------------------------- Additiv: laedt NACH style.css und ueberschreibt nur Optik, nie Struktur. Das Markup der Seiten bleibt unveraendert, damit Portal und Admin (die dieselbe style.css nutzen) nicht mitgezogen werden. Zum Abschalten reicht es, das aus dem zu nehmen. ========================================================================= */ :root { --brand: #1d6e80; --brand-600: #175c6d; --brand-700: #13505d; --brand-300: #5cc8d8; --brand-100: #e3f1f3; --ink: #0d1b24; --ink-soft: #4a5c68; --deep: #0f2433; --deep-2: #1a3d4f; --surface: #ffffff; --surface-alt: #f5f9fb; --line: #e4ebf0; --radius: 16px; --radius-lg: 22px; /* Weiche, gestaffelte Schatten statt einer harten Kante */ --shadow-sm: 0 1px 2px rgba(13,27,36,.05), 0 2px 6px rgba(13,27,36,.04); --shadow-md: 0 2px 4px rgba(13,27,36,.04), 0 12px 28px rgba(13,27,36,.08); --shadow-lg: 0 4px 8px rgba(13,27,36,.05), 0 24px 56px rgba(13,27,36,.13); --shadow-brand: 0 18px 46px rgba(29,110,128,.28); --ease: cubic-bezier(.22,.68,.36,1); } html { scroll-behavior: smooth; } /* -------------------------------------------------- Uebergang beim Wechsel Der Browser blendet den Seitenwechsel weich, statt hart umzuschalten. Greift nur bei eigenen Seiten und nur, wenn der Browser es kann - kann er es nicht, wird wie immer einfach navigiert. Nichts haengt daran. Braucht diese Regel in *beiden* Seiten, der alten und der neuen; darum steht sie hier in modern.css, die auf allen oeffentlichen Seiten liegt, und nicht in einer einzelnen Seite. */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation-duration: .28s; } ::view-transition-new(root) { animation-duration: .28s; } /* Das Bild und die Ueberschrift des Produkts wandern von der Karte im Shop an ihren Platz auf der Produktseite, statt zu verschwinden und neu aufzutauchen. Die Namen vergibt js/shop-motion.js beim Klick - nur auf der angeklickten Karte, weil ein Name im Dokument eindeutig sein muss. */ ::view-transition-group(pd-bild), ::view-transition-group(pd-titel) { animation-duration: .38s; animation-timing-function: cubic-bezier(.22,.68,.36,1); } body { color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--brand-300); color: var(--deep); } /* Sichtbarer, markenkonformer Fokusring — ersetzt den entfernten Default */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px; } /* ---------------------------------------------------------------- Navbar -- Glas statt Volltonflaeche. Beim Scrollen schrumpft die Leiste, damit der Inhalt in den Vordergrund rueckt (.scrolled setzt das bestehende JS). */ .navbar { background: rgba(15, 36, 51, .82); -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px); border-bottom: 1px solid rgba(255,255,255,.08); transition: background .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); } /* Sobald gescrollt wird, deckt die Leiste ohnehin fast voll ab - dann faellt die Weichzeichnung weg. Das ist kein Sparen am Aussehen, sondern der Kern des Scroll-Problems: backdrop-filter auf einem position:fixed-Element zwingt den Browser, bei *jedem* Scrollbild den Bereich hinter der Leiste ueber die ganze Breite neu weichzuzeichnen. Genau dort entstand das Stocken. Ganz oben, wo die Leiste noch durchscheint, bleibt das Glas. */ .navbar.scrolled { background: rgba(12, 29, 41, .97); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 10px 34px rgba(6,18,26,.32); border-bottom-color: rgba(92,200,216,.22); } .nav-inner { height: 132px; transition: height .35s var(--ease); } .navbar.scrolled .nav-inner { height: 92px; } .logo-img { height: 150px; transition: height .35s var(--ease), filter .35s var(--ease); } .navbar.scrolled .logo-img { height: 104px; } /* Unterstrich, der aus der Mitte herauswaechst */ .nav-links > li > a:not(.btn-nav), .nav-drop-btn { position: relative; padding-bottom: 3px; } .nav-links > li > a:not(.btn-nav)::after, .nav-drop-btn::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--brand-300), #a8e6f0); transform: translateX(-50%); transition: width .28s var(--ease); } .nav-links > li > a:not(.btn-nav):hover::after, .nav-links > li > a.active-link::after, .nav-drop-btn:hover::after, .nav-drop.open .nav-drop-btn::after, .nav-drop-btn.active-link::after { width: 100%; } .nav-drop-menu { border: 1px solid rgba(13,27,36,.07); border-radius: 14px; box-shadow: var(--shadow-lg); /* Aufklappen mit leichter Bewegung statt hartem display-Sprung */ display: block; opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(-8px) scale(.98); transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s; } .nav-drop.open .nav-drop-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0) scale(1); } .nav-drop-menu a { transition: background .18s var(--ease), transform .18s var(--ease); } .nav-drop-menu a:hover { transform: translateX(3px); } .btn-nav { background: linear-gradient(135deg, var(--brand) 0%, #2a8fa4 100%); box-shadow: 0 6px 18px rgba(29,110,128,.42); transition: transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease) !important; } .btn-nav:hover { background: linear-gradient(135deg, var(--brand) 0%, #2a8fa4 100%) !important; filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(29,110,128,.5); } /* ------------------------------------------------------------------ Hero -- Zwei langsam driftende Farbwolken plus feines Raster. Beides liegt in ::before/::after, es braucht also kein zusaetzliches Markup. */ .hero { position: relative; overflow: hidden; padding: 210px 0 100px; background: linear-gradient(168deg, #eef7f9 0%, #ffffff 55%, #f4fafb 100%); isolation: isolate; } .hero::before { content: ""; position: absolute; z-index: -2; top: -28%; right: -12%; width: 780px; height: 780px; background: radial-gradient(circle at 30% 30%, rgba(92,200,216,.42), transparent 62%), radial-gradient(circle at 70% 70%, rgba(29,110,128,.30), transparent 60%); filter: blur(30px); border-radius: 50%; animation: drift 22s var(--ease) infinite alternate; } .hero::after { content: ""; position: absolute; z-index: -2; bottom: -34%; left: -14%; width: 620px; height: 620px; background: radial-gradient(circle, rgba(168,230,240,.40), transparent 65%); filter: blur(36px); border-radius: 50%; animation: drift 27s var(--ease) infinite alternate-reverse; } @keyframes drift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-70px, 54px, 0) scale(1.14); } } /* Lebendes Netz im Hero. Die Punkte und Linien zeichnet js/motion.js in ein Canvas — das ist das Erkennungszeichen der Seite: ein Netzwerk- techniker zeigt sein Netz, statt ein beliebiges Farbverlaufsbild. */ .hero-net { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 1.2s var(--ease); } .hero-net.ready { opacity: 1; } /* Raster, das nach aussen ausblendet */ .hero .container::before { content: ""; position: absolute; z-index: -1; inset: -200px 0 0; background-image: linear-gradient(rgba(29,110,128,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(29,110,128,.055) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 75% 62% at 32% 42%, #000 12%, transparent 76%); mask-image: radial-gradient(ellipse 75% 62% at 32% 42%, #000 12%, transparent 76%); pointer-events: none; } .hero-inner { position: relative; } .hero-badge { background: rgba(255,255,255,.78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(29,110,128,.22); box-shadow: var(--shadow-sm); position: relative; overflow: hidden; } /* Lichtreflex, der einmal pro Runde ueber das Badge laeuft */ .hero-badge::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.85) 50%, transparent 62%); transform: translateX(-120%); animation: sheen 5.5s var(--ease) infinite; } @keyframes sheen { 0%, 62% { transform: translateX(-120%); } 100% { transform: translateX(120%); } } .hero-badge .ti { color: var(--brand); } h1 { letter-spacing: -.025em; } .accent { background: linear-gradient(115deg, #1d6e80 0%, #2f9fb6 45%, #5cc8d8 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-sub { color: var(--ink-soft); font-size: 1.18rem; } /* Statistiken als Glaskarten statt loser Zahlen */ .hero-stats { gap: 1rem; } .stat { flex: 1 1 150px; background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(29,110,128,.14); border-radius: 14px; padding: 1rem .75rem; box-shadow: var(--shadow-sm); transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease); } .stat:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(29,110,128,.34); } .stat-num { font-size: 1.7rem; letter-spacing: -.02em; } .stat-label { color: var(--ink-soft); } .stat-divider { display: none; } /* --------------------------------------------------------------- Buttons -- Der Glanz laeuft beim Hover einmal quer ueber die Flaeche. */ .btn-primary { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--brand) 0%, #2a8fa4 100%); box-shadow: var(--shadow-brand); transition: transform .22s var(--ease), box-shadow .22s var(--ease), filter .22s var(--ease); } .btn-primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.42) 50%, transparent 65%); transform: translateX(-130%); transition: transform .65s var(--ease); } .btn-primary:hover { background: linear-gradient(135deg, var(--brand) 0%, #2a8fa4 100%); filter: brightness(1.07); transform: translateY(-3px); box-shadow: 0 22px 54px rgba(29,110,128,.36); } .btn-primary:hover::after { transform: translateX(130%); } .btn-primary:active { transform: translateY(-1px) scale(.985); } .btn-primary .ti { transition: transform .22s var(--ease); } .btn-primary:hover .ti { transform: translateX(2px); } .btn-secondary { background: rgba(255,255,255,.86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: var(--shadow-sm); transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease); } .btn-secondary:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); background: #fff; } .btn-secondary:active { transform: translateY(-1px) scale(.985); } /* -------------------------------------------------------------- Sections */ .section { padding: 104px 0; position: relative; } .bg-light { background: linear-gradient(180deg, var(--surface-alt) 0%, #eef4f8 100%); } h2 { letter-spacing: -.02em; } .section-header p { color: var(--ink-soft); max-width: 560px; } .section-tag { background: linear-gradient(135deg, rgba(29,110,128,.12), rgba(92,200,216,.18)); border: 1px solid rgba(29,110,128,.2); color: var(--brand-600); } /* ----------------------------------------------------------------- Karten -- Gemeinsames Verhalten fuer alle Kartentypen: Haarlinie aus Farbverlauf oben, Anheben beim Hover, und ein Lichtkegel, der dem Mauszeiger folgt. Die Koordinaten --mx/--my setzt motion.js. */ .service-card, .review-card, .feature-item, .pricing-card, .contact-card, .about-card { position: relative; overflow: hidden; background: var(--surface); border-color: var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: transform .34s var(--ease), box-shadow .34s var(--ease), border-color .34s var(--ease); } .service-card::before, .review-card::before, .feature-item::before, .pricing-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--brand), var(--brand-300), transparent); opacity: 0; transform: scaleX(.35); transform-origin: left; transition: opacity .34s var(--ease), transform .34s var(--ease); } .service-card:hover::before, .review-card:hover::before, .feature-item:hover::before, .pricing-card:hover::before { opacity: 1; transform: scaleX(1); } .service-card::after, .feature-item::after, .pricing-card::after { content: ""; position: absolute; inset: 0; background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), rgba(29,110,128,.09), transparent 68%); opacity: 0; transition: opacity .34s var(--ease); pointer-events: none; } .service-card:hover::after, .feature-item:hover::after, .pricing-card:hover::after { opacity: 1; } .service-card:hover, .review-card:hover, .feature-item:hover, .pricing-card:hover, .contact-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(29,110,128,.28); } .service-card > *, .feature-item > *, .pricing-card > * { position: relative; z-index: 1; } .service-icon, .feature-icon { border-radius: 13px; box-shadow: inset 0 0 0 1px rgba(13,27,36,.05); transition: transform .34s var(--ease), box-shadow .34s var(--ease); } .service-card:hover .service-icon, .feature-item:hover .feature-icon { transform: translateY(-2px) scale(1.07) rotate(-3deg); box-shadow: 0 10px 22px rgba(29,110,128,.22); } .service-card > p, .feature-item p { color: var(--ink-soft); } .service-list li { transition: transform .2s var(--ease); } .service-card:hover .service-list li { transform: translateX(2px); } /* --------------------------------------------------------------- Pricing */ .pricing-card { border-radius: var(--radius-lg); } .pricing-card.pricing-featured { border-color: rgba(29,110,128,.55); box-shadow: var(--shadow-brand); transform: translateY(-6px); } .pricing-card.pricing-featured:hover { transform: translateY(-12px); } .pricing-badge { background: linear-gradient(135deg, var(--brand), #2f9fb6); box-shadow: 0 6px 16px rgba(29,110,128,.4); z-index: 2; } .price { background: linear-gradient(115deg, #1d6e80, #2f9fb6); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -.03em; } /* -------------------------------------------------------------- Ubiquiti */ .ubiquiti-section { position: relative; overflow: hidden; /* Eigener Stapelkontext, damit das Netz-Canvas mit z-index:-1 ueber dem Hintergrund der Sektion liegt und nicht dahinter verschwindet. */ isolation: isolate; background: radial-gradient(900px 460px at 82% 12%, rgba(29,110,128,.42), transparent 62%), linear-gradient(140deg, #0b1c28 0%, #133245 55%, #1a3d4f 100%); } .ubiquiti-section::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000, transparent 75%); mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000, transparent 75%); pointer-events: none; } .ubiquiti-inner { position: relative; } .ubiquiti-product { background: rgba(255,255,255,.05); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: transform .28s var(--ease), background .28s var(--ease), border-color .28s var(--ease); } .ubiquiti-product:hover { transform: translateY(-3px); background: rgba(92,200,216,.13); border-color: rgba(92,200,216,.4); } .unifi-card { background: rgba(255,255,255,.055); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 22px 60px rgba(0,0,0,.34); } /* Der Status-Punkt pulst, damit "online" auch optisch lebt */ .unifi-dot-green { box-shadow: 0 0 0 0 rgba(34,197,94,.65); animation: pulse-dot 2.4s var(--ease) infinite; } @keyframes pulse-dot { 70% { box-shadow: 0 0 0 9px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } } /* --------------------------------------------------------------- Reviews */ .review-card > p { color: var(--ink-soft); font-style: normal; } .stars { filter: drop-shadow(0 2px 5px rgba(245,158,11,.32)); } /* ------------------------------------------------------------------ Form */ .form-group input, .form-group select, .form-group textarea { background: var(--surface-alt); border-color: var(--line); transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { background: #fff; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(29,110,128,.13); outline: none; } .form-group label { color: var(--ink); } .emergency-box { background: linear-gradient(135deg, #fef6e7, #fdedd5); box-shadow: var(--shadow-sm); } /* -------------------------------------------------------------------- CTA */ .cta-section { position: relative; overflow: hidden; background: linear-gradient(135deg, #e9f5f7 0%, #d5edf1 60%, #e6f6f8 100%); } .cta-section::before { content: ""; position: absolute; top: -46%; left: 50%; width: 900px; height: 900px; margin-left: -450px; background: radial-gradient(circle, rgba(92,200,216,.34), transparent 62%); filter: blur(28px); animation: drift 24s var(--ease) infinite alternate; pointer-events: none; } .cta-inner { position: relative; } /* ----------------------------------------------------------------- Footer */ .footer { background: radial-gradient(700px 300px at 12% 0%, rgba(29,110,128,.24), transparent 62%), linear-gradient(180deg, #0c1720 0%, #080f16 100%); border-top: 1px solid rgba(92,200,216,.16); padding: 2.6rem 0; } .footer-links a { position: relative; } .footer-links a::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 0; height: 1px; background: var(--brand-300); transition: width .24s var(--ease); } .footer-links a:hover::after { width: 100%; } /* -------------------------------------------------------------- WhatsApp */ .whatsapp-float { background: linear-gradient(135deg, #25d366, #12a850); box-shadow: 0 10px 30px rgba(37,211,102,.42); } .whatsapp-float::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid rgba(37,211,102,.5); animation: ring 2.8s var(--ease) infinite; pointer-events: none; } @keyframes ring { 0% { transform: scale(1); opacity: .8; } 70% { transform: scale(1.34); opacity: 0; } 100% { transform: scale(1.34); opacity: 0; } } .whatsapp-float { position: fixed; } /* ------------------------------------------------------- Scroll-Animation .reveal setzt motion.js auf jedes Element, das animiert werden soll; .is-visible kommt, sobald es im Viewport steht. Ohne JS bleibt alles sichtbar, weil die Klasse dann nie gesetzt wird (siehe .no-js unten). */ /* will-change steht bewusst nur am noch nicht eingeblendeten Zustand, und motion.js raeumt es nach der Blende ganz ab. Stand es dauerhaft auf jeder Karte, hielt jede eine eigene Compositor-Ebene - auf einer Seite mit dreissig Karten macht sich das beim Scrollen deutlich bemerkbar. */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--reveal-delay, 0ms); } .reveal:not(.is-visible) { will-change: opacity, transform; } .reveal.is-visible { opacity: 1; transform: none; } /* Fortschrittsbalken am oberen Rand */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--brand), var(--brand-300), #a8e6f0); z-index: 200; pointer-events: none; } /* Zurueck-nach-oben */ .to-top { position: fixed; right: 28px; bottom: 100px; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(29,110,128,.22); border-radius: 50%; background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--brand); font-size: 20px; cursor: pointer; box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s; z-index: 998; } .to-top.show { opacity: 1; visibility: visible; transform: none; } .to-top:hover { color: #fff; background: var(--brand); border-color: var(--brand); } /* =========================================================== Handschrift Was die Seite von einer Baukasten-Website unterscheiden soll: das Netzwerk-Motiv zieht sich durch, statt nur im Hero zu stehen. */ /* Naht zwischen Abschnitten: eine Punktreihe wie ein Patchfeld. Bewusst ::after — ::before ist bei .ubiquiti-section (Raster) und .cta-section (Lichtschein) bereits vergeben und wuerde ueberschrieben. */ .section + .section::after, .hero + .section::after { content: ""; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); width: 132px; height: 5px; background-image: radial-gradient(circle, var(--brand) 1.6px, transparent 1.8px); background-size: 15px 5px; opacity: .28; } /* Ziffern in Kennzahlen und Preisen laufen nicht mehr in der Breite, wenn motion.js sie hochzaehlt. */ .stat-num, .price { font-variant-numeric: tabular-nums; } /* Karten neigen sich leicht zum Zeiger. --rx/--ry setzt motion.js. perspective liegt auf dem Gitter, damit die Neigung raeumlich wirkt. */ .services-grid, .features-grid, .pricing-grid { perspective: 1200px; } .service-card, .feature-item, .pricing-card { transform-style: preserve-3d; } .service-card.tilt:hover, .feature-item.tilt:hover, .pricing-card.tilt:hover { transform: translateY(-6px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); } .pricing-card.pricing-featured.tilt:hover { transform: translateY(-12px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); } /* Der Knopf zieht den Zeiger leicht an. --tx/--ty kommen aus motion.js. */ .btn-primary.magnet { transform: translate(var(--tx, 0px), var(--ty, 0px)); } .btn-primary.magnet:hover { transform: translate(var(--tx, 0px), calc(var(--ty, 0px) - 3px)); } /* Verbindungslinie neben dem Abschnittstitel — greift das Netz-Motiv auf. */ .section-tag { position: relative; } .section-header .section-tag::before, .section-header .section-tag::after { content: ""; position: absolute; top: 50%; width: 34px; height: 1px; background: linear-gradient(90deg, transparent, rgba(29,110,128,.45)); } .section-header .section-tag::before { right: 100%; margin-right: 12px; } .section-header .section-tag::after { left: 100%; margin-left: 12px; background: linear-gradient(90deg, rgba(29,110,128,.45), transparent); } /* ------------------------------------------------------------ Responsive */ @media (max-width: 768px) { /* Auf dem Handy muss das Logo IN die Leiste passen: haengt es wie am Desktop unten heraus, stimmt jeder feste Menue-Offset nicht mehr. */ .nav-inner { height: 88px; } .navbar.scrolled .nav-inner { height: 72px; } .logo-img { height: 72px; } .navbar.scrolled .logo-img { height: 58px; } .nav-links { /* An der Leiste verankert statt fester Pixelwert — so rutscht das Menue beim Schrumpfen der Leiste automatisch mit. */ top: 100%; background: rgba(12,29,41,.97); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } .nav-drop-menu { opacity: 1; visibility: visible; transform: none; display: none; } .nav-drop.open .nav-drop-menu { display: block; transform: none; } .hero { padding: 150px 0 72px; } .section { padding: 72px 0; } .stat { flex: 1 1 130px; } .to-top { right: 16px; bottom: 84px; } } /* --------------------------------------------------- Bewegung reduzieren Wer im Betriebssystem "reduzierte Bewegung" gesetzt hat, bekommt die Endzustaende sofort — keine Drift, kein Glanz, kein Einblenden. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } /* Kein Wandern und kein Blenden beim Seitenwechsel. */ @view-transition { navigation: none; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .reveal { opacity: 1; transform: none; } } /* ------------------------------------------------- Weniger Glas auf Handys Auf schmalen Geraeten kostet backdrop-filter unverhaeltnismaessig viel: die GPU zeichnet die Flaeche hinter jedem Glaselement neu, und weil Navi- leiste und Zurueck-nach-oben-Knopf mitscrollen, passiert das bei jedem Scrollbild. Die Flaechen bekommen dafuer etwas mehr Deckkraft - optisch praktisch dasselbe, aber ohne die Rechnung. Nicht ueber @supports geloest: die Browser koennen es ja, es ist auf kleinen Geraeten nur zu teuer. Am Ende der Datei, damit es die frueheren Regeln ueberschreibt, ohne dort ueberall Ausnahmen einzustreuen. */ @media (max-width: 700px) { .navbar, .nav-links, .hero-badge, .stat, .btn-secondary, .to-top, .ubiquiti-product, .unifi-card { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .navbar { background: rgba(15,36,51,.96); } .hero-badge { background: rgba(255,255,255,.95); } .stat { background: rgba(255,255,255,.94); } .btn-secondary { background: rgba(255,255,255,.97); } .to-top { background: rgba(255,255,255,.97); } /* Die grossen weichgezeichneten Farbflaechen im Hero sind auf einem Handybildschirm ohnehin kaum zu sehen, kosten aber eine Flaeche von 780x780 Punkten in Dauerbewegung. */ .hero::before, .hero::after, .cta-section::before { display: none; } }