/* ========================================================================== Weblandschaften — geteilte Shop-Navigation (Kopf + Fuß). Selbst-enthalten (eigene Farben/Fonts), funktioniert auf jeder Shop-Seite. Aktiver Link über . ========================================================================== */ /* ========================================================================== TEXTSICHERE FARBEN (WCAG 1.4.3, Stufe AA) ========================================================================== Diese Datei liegt auf ALLEN 197 oeffentlichen Seiten. Die uebrigen Farben stehen dagegen je Seite inline im :root. Neue Namen, die es dort nicht gibt, wirken deshalb von hier aus ueberall. Genau dafuer sind die beiden da. WARUM ZWEI NEUE NAMEN STATT DIE ALTEN ZU AENDERN --faint (#8A9AB0) dient 513-mal als Textfarbe und 175-mal als Rahmen oder Flaeche. Als Text sind das 2,87:1, also zu hell. Wuerde man den Wert selbst abdunkeln, wuerden alle Rahmen mit dunkler und das Design verschoebe sich. Dasselbe gilt fuer --green (#19C37D): als Text 2,30:1, als Flaeche und Symbolfarbe auf Dunkel aber genau richtig. Also: die alten Namen bleiben fuer Deko, die neuen sind fuer Text. NICHT AUFHELLEN. Die Werte sind gemessen, nicht geschaetzt: --faint-ink #5F6B7E auf #FFFFFF = 5,40:1 --green-text #0A7F4F auf #FFFFFF = 5,05:1 Beide gelten auch auf den hellen Flaechen #F5F8FC und #F1FAF5. */ :root{ --faint-ink:#5F6B7E; --green-text:#0A7F4F; } /* Dauerhaft leuchtender grüner Balken ganz oben */ .snav-glowbar{position:fixed;top:0;left:0;right:0;height:3px;z-index:200;pointer-events:none;background:linear-gradient(90deg,#0FA968,#19C37D,#6FE9AE,#19C37D,#0FA968);background-size:200% 100%;animation:snav-glow-shine 3.5s linear infinite,snav-glow-pulse 2.4s ease-in-out infinite} @keyframes snav-glow-shine{to{background-position:-200% 0}} @keyframes snav-glow-pulse{0%,100%{box-shadow:0 0 6px rgba(25,195,125,.55),0 0 14px rgba(25,195,125,.28)}50%{box-shadow:0 0 12px rgba(25,195,125,.95),0 0 26px rgba(25,195,125,.5)}} @media(prefers-reduced-motion:reduce){.snav-glowbar{animation:none;box-shadow:0 0 10px rgba(25,195,125,.7)}} /* Farbige Scrollleiste im Markenton */ html{scrollbar-width:thin;scrollbar-color:#19C37D #F5F8FC} html::-webkit-scrollbar{width:12px} html::-webkit-scrollbar-track{background:#F5F8FC} html::-webkit-scrollbar-thumb{border-radius:999px;border:3px solid #F5F8FC;background:linear-gradient(180deg,#19C37D,#0FA968)} html::-webkit-scrollbar-thumb:hover{border-width:2px} html.is-scrolling::-webkit-scrollbar-thumb{border-width:2px;background:linear-gradient(180deg,#14C57F,#0B8B54)} .snav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid #E8ECF3;font-family:"Inter",system-ui,sans-serif} .snav-in{max-width:1180px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:16px;height:70px} .snav-brand{display:flex;align-items:center;gap:10px;text-decoration:none} .snav-brand img{width:36px;height:36px;border-radius:10px;display:block} .snav-brand b{font-family:"Sora",system-ui,sans-serif;font-weight:700;font-size:1.1rem;color:#0E1B2E} .snav-links{display:flex;align-items:center;gap:2px;margin-left:8px;flex:1} .snav-links>a,.snav-item>a{color:#56657B;font-weight:500;font-size:.94rem;padding:9px 12px;border-radius:9px;text-decoration:none} .snav-links>a:hover,.snav-item>a:hover{color:#0E1B2E;background:#F5F8FC} .snav-links>a.cur,.snav-item>a.cur{color:#0E1B2E;background:#F5F8FC} /* Branchen-Dropdown */ .snav-item{position:relative;display:inline-flex} .snav-has-menu>a{display:inline-flex;align-items:center;gap:4px} .snav-chev{width:14px;height:14px;opacity:.65;transition:transform .2s ease} .snav-has-menu:hover .snav-chev,.snav-has-menu:focus-within .snav-chev{transform:rotate(180deg);opacity:1} .snav-menu{position:absolute;top:calc(100% + 8px);left:0;z-index:70;width:min(600px,86vw);background:#fff;border:1px solid #E8ECF3;border-top:2px solid #19C37D;border-radius:16px;box-shadow:0 24px 50px -20px rgba(16,30,54,.22);padding:12px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s ease,transform .18s ease,visibility .18s} .snav-menu::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px} .snav-has-menu:hover .snav-menu,.snav-has-menu:focus-within .snav-menu{opacity:1;visibility:visible;transform:translateY(0)} .snav-menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px} .snav-menu-grid a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;color:#56657B;font-weight:500;font-size:.9rem;text-decoration:none;transition:background .14s,color .14s} .snav-mi-ic{width:32px;height:32px;flex-shrink:0;border-radius:9px;background:#F1FAF5;display:grid;place-items:center;color:#19C37D;border:1px solid #DCF2E7;transition:background .14s,color .14s,border-color .14s} .snav-mi-ic svg{width:20px;height:20px} .snav-mi-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .snav-menu-grid a:hover{background:#F5F8FC;color:#0E1B2E} .snav-menu-grid a:hover .snav-mi-ic{background:#19C37D;border-color:#19C37D;color:#fff} .snav-menu-all{display:flex;align-items:center;gap:6px;margin-top:6px;padding:11px 12px;border-top:1px solid #E8ECF3;color:#0A7F4F;font-weight:600;font-size:.88rem;text-decoration:none;border-radius:0 0 9px 9px;transition:background .14s,color .14s} .snav-menu-all:hover{background:#F1FAF5;color:#0B8B54} /* Listen-Klappmenue (Leistungen, Wissen, Partner). Anders als das Branchen-Menue ohne Symbole, dafuer mit einer Erklaerzeile: bei Begriffen wie "GEO" oder "White-Label" ist der Name allein nicht selbsterklaerend. */ .snav-menu-list{width:min(400px,90vw)} .snav-menu-col{display:flex;flex-direction:column;gap:1px} .snav-menu-col a{display:block;padding:9px 11px;border-radius:10px;text-decoration:none;transition:background .14s} .snav-menu-col a:hover,.snav-menu-col a:focus-visible{background:#F1FAF5;outline:none} .snav-li-t{display:block;color:#0E1B2E;font-weight:600;font-size:.92rem;line-height:1.3} .snav-li-d{display:block;color:#5F6B7E;font-size:.79rem;line-height:1.35;margin-top:1px} .snav-menu-col a:hover .snav-li-t{color:#0B8B54} .snav-menu-col a:focus-visible{box-shadow:0 0 0 2px #19C37D inset} .snav-sp{flex:1} .snav-phone{display:inline-flex;align-items:center;gap:7px;color:#0E1B2E;font-weight:600;font-size:.9rem;white-space:nowrap;text-decoration:none} .snav-phone svg{width:16px;height:16px;color:#19C37D} .snav-actions{display:flex;align-items:center;gap:10px;margin-left:auto} .snav-cta{display:inline-flex;align-items:center;gap:8px;background:#19C37D;color:#06301F;font-weight:600;font-size:.92rem;padding:11px 20px;border-radius:12px;text-decoration:none;box-shadow:0 10px 24px -10px #19C37D;transition:.16s;border:0;cursor:pointer;white-space:nowrap} .snav-cta:hover{filter:brightness(1.05);transform:translateY(-2px)} .snav-login{display:inline-flex;align-items:center;gap:7px;background:#fff;color:#0E1B2E;font-weight:600;font-size:.92rem;padding:10px 17px;border-radius:12px;text-decoration:none;border:1.5px solid #E8ECF3;transition:background .16s,border-color .16s,color .16s,box-shadow .16s;white-space:nowrap} .snav-login svg{width:17px;height:17px;color:#19C37D;transition:color .16s} .snav-login:hover{background:#F1FAF5;color:#0B8B54;border-color:#19C37D;box-shadow:0 6px 18px -10px rgba(25,195,125,.55)} .snav-login:hover svg{color:#0B8B54} .snav-login:focus-visible{outline:2px solid #19C37D;outline-offset:2px} .snav-toggle{display:none;background:#fff;border:1px solid #E8ECF3;border-radius:10px;padding:7px;cursor:pointer;color:#0E1B2E} .snav-toggle svg{width:22px;height:22px;display:block} @media(max-width:1024px){ .snav-links{position:absolute;top:70px;left:0;right:0;flex-direction:column;gap:2px;background:#fff;border-bottom:1px solid #E8ECF3;box-shadow:0 16px 40px -16px rgba(16,30,54,.22);padding:10px;margin:0;display:none;z-index:60} .snav-links[data-open]{display:flex} .snav-links>a,.snav-item>a{padding:13px;font-size:1.02rem;border-radius:11px} .snav-phone{display:none} .snav-toggle{display:inline-flex;margin-left:auto} /* Aktionen (Kunden-Login + Termin buchen) ins Dropdown, gestapelt */ .snav-actions{display:flex;flex-direction:column;gap:8px;margin:8px 0 2px;padding-top:10px;border-top:1px solid #E8ECF3} .snav-actions .snav-login,.snav-actions .snav-cta{width:100%;justify-content:center} /* Branchen als Akkordeon im Mobilmenü (Standard: eingeklappt) */ .snav-item{display:block;width:100%} .snav-has-menu>a{justify-content:space-between} .snav-chev{transform:rotate(0);transition:transform .2s ease} .snav-has-menu.snav-open .snav-chev{transform:rotate(180deg)} .snav-menu{position:static;width:auto;min-width:0;opacity:1;visibility:visible;transform:none;background:transparent;border:0;box-shadow:none;padding:2px 0 6px 8px;display:none} .snav-has-menu.snav-open .snav-menu{display:block} .snav-menu::before{display:none} .snav-menu-grid{grid-template-columns:1fr 1fr} .snav-menu-grid a{padding:10px;font-size:.95rem} .snav-menu-all{padding:12px} } @media(max-width:560px){ .snav-in{padding:0 16px;gap:10px;height:62px} .snav-links{top:62px} .snav-brand img{width:30px;height:30px} .snav-brand b{font-size:1rem} } /* Footer */ .sfoot{position:relative;background:#0E1B2E;color:#9FB2C8;padding:0 0 18px;font-family:"Inter",system-ui,sans-serif} .sfoot::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#0FA968,#19C37D,#6FE9AE,#19C37D,#0FA968)} .sfoot-in{max-width:1180px;margin:0 auto;padding:0 24px} /* CTA-Band */ .sfoot-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:24px 0;border-bottom:1px solid rgba(255,255,255,.1)} .sfoot-cta b{font-family:"Sora",system-ui,sans-serif;color:#fff;font-size:clamp(1.2rem,2.4vw,1.5rem);display:block;letter-spacing:-.01em} .sfoot-cta p{color:#9FB2C8;font-size:.95rem;margin:6px 0 0} .sfoot-cta-btns{display:flex;gap:12px;flex-wrap:wrap} .sfoot-btn-p,.sfoot-btn-l{display:inline-flex;align-items:center;gap:7px;padding:12px 22px;border-radius:12px;font-weight:600;font-size:.94rem;white-space:nowrap;text-decoration:none;transition:.16s} .sfoot-btn-p{background:#19C37D;color:#06301F;font-weight:700;box-shadow:0 12px 26px -12px #19C37D} .sfoot-btn-p:hover{filter:brightness(1.06);transform:translateY(-2px)} .sfoot-btn-l{color:#fff;border:1.5px solid rgba(255,255,255,.22)} .sfoot-btn-l:hover{border-color:#19C37D} /* Spalten */ /* FUENF Bloecke: Marke + vier Linklisten. Stand hier vorher auf vier Spalten, dadurch fiel "Unternehmen" in eine zweite Reihe und riss ein Loch unter die Marke. */ .sfoot-top{display:grid;grid-template-columns:1.55fr 1fr 1fr 1fr 1fr;gap:20px;padding:28px 0 20px;border-bottom:1px solid rgba(255,255,255,.1)} .sfoot-brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none} .sfoot-brand img{width:34px;height:34px;border-radius:10px;display:block} .sfoot-brand b{font-family:"Sora",system-ui,sans-serif;color:#fff;font-size:1.05rem} .sfoot-ab{margin:11px 0 0;font-size:.87rem;max-width:34ch;color:#9FB2C8;line-height:1.55} .sfoot-nap{font-style:normal;margin-top:13px;display:flex;flex-direction:column;gap:7px;font-size:.84rem} .sfoot-nap span,.sfoot-nap a{display:inline-flex;align-items:flex-start;gap:9px;color:#8DA0B8;text-decoration:none;transition:color .15s} .sfoot-nap a{color:#9FB2C8}.sfoot-nap a:hover{color:#fff} .sfoot-nap svg{width:16px;height:16px;flex-shrink:0;margin-top:2px;color:#19C37D} .sfoot h2.sfoot-h{color:#fff;font-size:.78rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;margin-bottom:10px} .sfoot ul{list-style:none;display:flex;flex-direction:column;gap:6px;padding:0;margin:0} .sfoot ul a{color:#9FB2C8;font-size:.86rem;text-decoration:none;display:inline-block;transition:color .15s,transform .15s} .sfoot ul a:hover{color:#fff;transform:translateX(3px)} /* Bottom */ .sfoot-bot{padding-top:15px;font-size:.79rem;color:#7E92AC;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px} .sfoot-legal a{white-space:nowrap;color:#9FB2C8;text-decoration:none;transition:color .15s} .sfoot-legal a:hover{color:#fff} /* Zwischenstufe: fuenf Spalten werden unter 1024px zu eng fuer Woerter wie "Google-Unternehmensprofil". Marke nimmt dann die volle Breite, darunter vier Listen. */ @media(max-width:1024px){ .sfoot-top{grid-template-columns:repeat(4,1fr);gap:22px 18px} .sfoot-top > div:first-child{grid-column:1 / -1;margin-bottom:4px} .sfoot-ab{max-width:60ch} .sfoot-nap{flex-direction:row;flex-wrap:wrap;gap:6px 18px} } @media(max-width:760px){.sfoot-top{grid-template-columns:1fr 1fr}.sfoot-cta{flex-direction:column;align-items:flex-start}.sfoot-cta-btns{width:100%}.sfoot-btn-p,.sfoot-btn-l{flex:1;justify-content:center}} /* Fuss auf dem Handy: frueher stapelten sich alle vier Spalten untereinander, der Fuss wurde dadurch laenger als manche Seite. Zwei Spalten halbieren die Hoehe, ohne dass ein Link verschwindet. */ @media(max-width:480px){ .sfoot{padding-bottom:18px} .sfoot-top{grid-template-columns:1fr 1fr;gap:22px 18px;padding:26px 0 20px} .sfoot-in{padding:0 18px} .sfoot-cta{padding:22px 0;gap:14px} .sfoot-cta p{font-size:.88rem;margin-top:4px} .sfoot-top > div:first-child{grid-column:1 / -1} /* Markenblock ueber die volle Breite */ .sfoot-ab{font-size:.85rem;margin-top:10px;max-width:none} .sfoot-nap{margin-top:12px;gap:7px;font-size:.83rem} .sfoot h2.sfoot-h{font-size:.74rem;margin-bottom:9px;letter-spacing:.06em} .sfoot ul{gap:7px} .sfoot ul a{font-size:.86rem} .sfoot-bot{flex-direction:column;align-items:flex-start;gap:7px;padding-top:16px;font-size:.78rem} .sfoot-legal{display:flex;flex-wrap:wrap;gap:4px 10px} } /* ============================================================ MOBILE TYPOGRAFIE (zentral, gilt fuer alle oeffentlichen Seiten) Gemessen bei 375px Breite ergab sich ein doppelter Fehler: Ueberschriften ZU GROSS h1 bis 38,4px, h2 bis 28,8px Fliesstext ZU KLEIN p teils nur 13,9px Alles gleichmaessig zu verkleinern waere also falsch gewesen. Ueberschriften gehen runter, Fliesstext geht hoch auf mindestens 16px. 16px ist auf dem Handy die untere Grenze fuer bequemes Lesen; darunter zoomt iOS Safari ausserdem beim Antippen von Eingabefeldern. WARUM !important: Jede Seite bringt ihren eigenen