/* ============================================================================ PHYSIO ALSTERDORF — Physiotherapie in Hamburg-Alsterdorf Basis-Stufe (Starter). Standbilder, ein Einblende-Effekt je Abschnitt, dazu Hover und Fokus. Kein Parallax, kein Scrub, kein Zaehler, kein Bildwechsel, kein `background-attachment: fixed`. HERKUNFT -------- 1:1 uebertragen aus dem Claude-Design-Entwurf "Physio Alsterdorf.dc.html" (Projekt 56efe3ae-3452-4740-aaa5-59a10de2b391), Uebernahme am 30.10.2026 nach `docs/regeln/vorlagen.md` und den Entscheidungen von Benedikt vom 30.10.2026: Aufbau, Reihenfolge, Texte, Farben, Schriften, Groessen, Abstaende, Rundungen und Bildzuschnitte wie im Entwurf; Schriften 1:1; Kontaktdaten wie im Entwurf; Logo als Bild; Bewegung ruhig. Der Entwurf laedt Manrope und Newsreader von Google Fonts und die Laufzeit `support.js`. Er traegt Hover-Angaben der Claude-Design-Umgebung an vierzehn Knoten (vier Menuepunkte, drei Pillen-Knoepfe, Formular-Knopf, "Leistungen ansehen", Telefon im Hero, Telefon und E-Mail im Kontakt, zwei Verweise im Fuss), sechs Bedingungsbloecke sc-if (Menuezeile, Menue-Knopf, Handy-Menue, drei Fehlermeldungen), vier Schleifen sc-for (Leistungen, Team, Schritte, Fragen) und eine `DCLogic`-Klasse mit Fensterbreite, Menue-Zustand und einer Formularpruefung, die das Mailprogramm oeffnet. Nichts davon laeuft ohne die Claude-Design-Umgebung (V1). Was der Entwurf je nach Fensterbreite per Skript umschaltet (`wide = innerWidth >= 920`), steht hier in einer Media Query an derselben Grenze, nur min-width (V5): 920 px Menuezeile statt Menue-Knopf; Hero mindestens clamp(620px, 86svh, 920px) hoch statt automatisch, Bild hinter dem Text (absolut, volle Hoehe) statt darueber (52svh), Ausschnitt 60% 50% statt 82% 60% (bis 1118 px 55% 50%, Abweichung 15), Schleier sichtbar; linke Spalte der Leistungen klebt (sticky); Fragen zweispaltig (1fr / 1.7fr). 1119 px nur fuer Abweichung 15: wieder der Ausschnitt des Entwurfs. Alle uebrigen Umbrueche kommen wie im Entwurf ohne Media Query aus den Rastern `repeat(auto-fit, minmax(min(100%, X), 1fr))`. ABWEICHUNGEN VOM ENTWURF, JEDE MIT GRUND ---------------------------------------- 1. LAUFZEIT ENTFERNT (V1, V6). Die Elemente x-dc und helmet, die Bedingungsbloecke und Schleifen, die Platzhalter in doppelten geschweiften Klammern, die Hover-Angaben, `onClick`/`onChange`/ `onSubmit`, `DCLogic`, `support.js` und das eingespritzte Werkzeug-Skript von Claude Design sind weg. Inline-Stile sind Klassen mit den Werten aus `:root`, die Hover-Angaben sind `:hover`, Leistungen, Team, Schritte und Fragen sind ausgeschrieben. Beim Umzug in Klassen kippt eine Rangfolge: Im Entwurf schlagen die Inline-Stile die globale Regel `a:hover { color: #1E2B29 }`, Klassen tun das nicht. Jeder Verweis mit eigener Farbe haelt sie deshalb im Hover ausdruecklich fest — die Pillen ihr Weiss (auch die Pille im Handy-Menue, die im Entwurf keinen eigenen Hover hat), sonst stuende dort dunkle Schrift auf Petrol (1,49 : 1). Ebenso steht der globale Fokus-Block VOR den Bausteinen: Seine Rundung von 2 px wirkt im Entwurf nur dort, wo kein Inline-Stil eine eigene setzt; hier gewinnt deshalb jede spaetere Klasse mit eigener Rundung, und die runden Knoepfe bleiben beim Fokus rund. 2. SCHRIFTEN SELBST AUSGELIEFERT (V3, V4, Entscheidung 2). Genau die Familien und Schnitte, die der Entwurf bei Google bestellt: Manrope 400-700 (variable Datei, Achse wght 200-800, 24 532 B) und Newsreader opsz 6-72 x wght 400-500 (variable Datei, Achsen wght 200-800 und opsz 6-72, 132 000 B), latin-Teilmenge mit demselben `unicode-range` wie bei Google. Die Achse opsz laeuft wie dort von selbst mit der Schriftgroesse (`font-optical-sizing: auto`). Kein preconnect, kein Stylesheet von Google. Zusammen 156 532 B = 152,9 KB und damit UEBER dem Budget der Basis-Stufe von 120 KB (V4): Google liefert fuer "400 und 500" die ganze Gewichtsachse mit. Entscheidung 2 geht der aelteren Budgetregel vor; benutzt werden nur Manrope 400/500/600 und Newsreader 400. Eine Newsreader-Datei nur mit Gewicht 400 (57 268 B, zusammen 79,9 KB) rendert alle Newsreader-Texte des Entwurfs pixelgleich; der Tausch ist eine offene Entscheidung. 3. VERMERK-LEISTE UND UMBRANDUNG (A17, V14, V19). Die feste Leiste ist 26 px hoch (--notice). Deshalb beginnen Seitengrund und Kopfleiste 26 px tiefer, die Sprungziele halten 114 statt 88 px Abstand, und die klebende Spalte der Leistungen haelt 142 statt 116 px. 4. SPERRHINWEIS (V14). `noindex, nofollow`; Seitenbeschreibung und og:description enden auf "Fiktives Beispielprojekt." 5. BILDER LOKAL (V3, Entscheidung 6). Dieselben Dateien unter img/ statt images/, byte-gleich (keins ist breiter als 1920 px). `width`/`height`, `loading="lazy"` und `fetchpriority="high"` wie im Entwurf, dazu `decoding="async"` an allen Bildern ausser dem Titelbild. Genau ein Bild vorgeladen, das Titelbild (V18), wie im Entwurf; og:image zeigt auf img/hero.webp. Das ganze Logo (images/logo.png) benutzt der Entwurf nirgends; es liegt deshalb nicht im Ordner. 6. HANDY-MENUE OHNE SKRIPT (V8). Statt Knopf plus Zustand ein
/; "aufgeklappt" meldet der Browser selbst, die Aufschrift wechselt ueber [open] von "Menue" zu "Schliessen". Die Liste liegt absolut unter der Kopfleiste, an derselben Stelle wie im Entwurf, und zieht unten die Linie, die dort die Kopfleiste unter dem offenen Menue zieht. Nach einem Sprung klappt js/seite.js das Menue zu (closeMenu im Entwurf); ohne Skript bleibt es offen, bis man den Knopf noch einmal drueckt. 7. FORMULAR SENDET NICHTS (V12). Pruefung, Fehlermeldungen, Statustexte und der Aufbau der Mail sind weg, ebenso `aria-invalid` und `aria-describedby`, die auf diese Meldungen zeigten. Der Knopf ist type="button", das Formular hat kein action. Die leere Statuszeile steht wie im Entwurf am Ende; sie haelt den Abstand von 20 px unter dem Knopf, damit der weisse Kasten gleich hoch bleibt. 8. PLATZHALTER IM NACHRICHTENFELD (V9). Der Entwurf setzt keine Farbe; Chrome zeigt ihn in #757575, auf --feld #FBFAF7 nur 4,41 : 1, andere Browser noch heller. Hier --leise #5A6562, deckend: 5,79 : 1. 9. FOKUSRING IM KONTAKT (Nicht-Text, WCAG 2.4.7). Der Ring des Entwurfs (#2F5D57) liegt neben Telefon und E-Mail auf dem Petrol des Abschnitts und ist dort unsichtbar (1,00 : 1). Dort ist er --weiss: 7,44 : 1. Im weissen Formular bleibt er #2F5D57 (7,44 : 1). 10. EINBLENDEN ERGAENZT (V7, Entscheidung 5). Der Entwurf blendet nichts ein. Die sieben Abschnitte unter dem Hero tragen [data-reveal] und erscheinen einmal (400 ms, 12 px). Der Hero nicht: das LCP-Element steht im ersten Frame. Das Attribut sitzt am inneren Rahmen, nie an einem Abschnitt mit eigener Farbe (sonst blitzt das Farbband) und nie am Sprungziel selbst (sonst landet ein Sprung 12 px daneben). Ohne Skript und bei "Bewegung reduzieren" ist alles sofort da. 11. ABSCHNITT #rechtliches AM ENDE (V17, wie in jeder Vorlage). Impressum und Datenschutzerklaerung im Fuss und im Formular zeigen wie im Entwurf auf eineuroweb.de (Entscheidung 7) und fuehren damit nicht ins Leere. 12. KONTAKTDATEN WIE IM ENTWURF (Entscheidung 3, bewusst abweichend von V10): Alsterdorfer Strasse 112, 22297 Hamburg, 040 123456789, physio@eineuroweb.de und die Sprechzeiten. Benedikt hat sie geprueft. 13. ZUSAETZLICH AUS DEM MUSTER salon-kammrath: (dem Entwurf fehlt die Sprache; WCAG 3.1.1) und der Sprungverweis "Zum Inhalt springen" auf #top, die Kennung von
im Entwurf. Erst mit `lang` greift das `hyphens: auto` der Leistungs-Titel. Nachgemessen an jeder Breite von 300 bis 1920 px: Es trennt nirgends anders als der Entwurf. Sichtbar aendert `lang` nur die Kantenglaettung des Textes im Auswahlfeld "Anliegen" an einzelnen Bildpunkten. 14. SYMBOL IM REITER. Der Entwurf hat keins; ohne fragt der Browser /favicon.ico an der Wurzel ab, und die App liefert dort nichts (404). Wie in den anderen Vorlagen steht es als data:-Adresse im Kopf (V3): eine Flaeche in --petrol, ohne Buchstaben, damit die Umbrandung nichts Fremdes stehen laesst. 15. BILDAUSSCHNITT IM HERO VON 920 BIS 1118 PX (V9). Dort laeuft die Ueberschrift dreizeilig, und ihr Ende ("Plan.") liegt mit dem Ausschnitt des Entwurfs (60 % 50 %) auf dem Regal mit den gerollten Matten; bei 920 x 1080 streift auch der Vorspann ("Uebungen,") dessen Kante. Je hoeher das Fenster, desto groesser das Bild und desto weiter links das Regal. Dunkelster Punkt unter der Schrift im Entwurf: H1 1,89 : 1, Vorspann 2,67 : 1 (Messung siehe KONTRASTE). Hier steht der Ausschnitt in diesem Band auf 55 % 50 %: Das Foto rueckt um 5 % seines Ueberstands nach rechts (bei 1024 x 1080 um 31 px), das Regal bleibt rechts neben der Schrift. Dazu ist der Bildrahmen dort fensterbreit (100vw) statt abschnittsbreit: Unter Windows nimmt die feste Bildlaufleiste 17 px Breite weg, die Schrift aber nicht; das Foto rueckte sonst um rund 9 px nach links und mit ihm das Regal an den Punkt von "Plan." (bis 1,78 : 1 bei 1070-1118 px und Fenstern bis rund 900 px Hoehe). So liegt das Foto mit und ohne Leiste gleich; die 17 px unter der Leiste schneidet `overflow: hidden` ab. Ohne feste Leiste (Handy, Tablet, Mac) sind beide Breiten gleich. Ab 1119 px laeuft die Ueberschrift vierzeilig, endet vor dem Regal, und es gelten wieder Rahmen und Ausschnitt des Entwurfs. 16. FORMULARFELDER BLEIBEN IN DER KARTE (V5). Im Entwurf haben Formular und Feldgruppen eine automatische Spalte. Die laengste Auswahl im Feld "Anliegen" ("Termin als Privatpatient:in oder Selbstzahler:in") macht sie mindestens 389 px breit, auch wo die Karte innen schmaler ist. Nachgemessen, jede Breite: 300-432 px Felder ragen aus der Karte und ueber den Bildschirmrand, die Seite laesst sich seitwaerts schieben (360 px: 73 px) 433-452 px Felder ragen rechts bis 20 px aus der weissen Karte 453-476 px Felder laufen in den rechten Innenabstand der Karte 931-996 px (zweispaltig) Felder ragen bis 26 px in das Petrol 997-1108 px Felder laufen in den rechten Innenabstand Hier ist die Spalte `minmax(0, 1fr)`: Die Felder enden am Innenrand der Karte, links und rechts gleich weit vom Rand, wie der Innenabstand des Entwurfs es vorgibt. In den genannten Bereichen sind sie deshalb schmaler als im Entwurf, und die Einwilligung bricht dort teils ein Wort frueher um. Von 477 bis 930 und ab 1109 px rechnen beide Spalten gleich, das Formular ist dort unveraendert. Der Pfeil des Auswahlfelds ist jetzt auch auf dem Handy zu sehen (im Entwurf lag er jenseits des Bildschirmrands); unter 375 px schneidet das Feld dafuer das Ende des vorgewaehlten Textes ab (360 px: "...Verordnu", 320 px: "...Vero"), die Liste beim Antippen zeigt alles. 17. INHABER-KARTE AUF DEM HANDY (V5). Im Entwurf ist die Textspalte neben dem Portraet `minmax(0, 1fr)`. Unter 392 px wird sie schmaler als "Maximilian" in 30 px (144 px): Bei 360 px ragt der Name 12 px ueber den Bildschirmrand, bei 320 px 52 px. Hier ist sie `minmax(min-content, 1fr)`: Unter 392 px gibt das Portraet Breite ab (bei 360 px 148 statt 180 px, bei 320 px 108 px), der Name bleibt im Bild. Ab 392 px rechnet das genau wie im Entwurf. Nachgemessen von 300 bis 919 px, jede Breite: Mit 16 und 17 laeuft die Seite nirgends mehr seitlich ueber; der Entwurf tut es von 300 bis 432 px. 18. KLEBENDE SPALTE NUR NEBEN DER LISTE (Leistungen). Im Entwurf klebt ab 920 px die Rasterzelle selbst. Zweispaltig steht das Raster aber erst ab 977 px (mit fester Bildlaufleiste ab rund 997 px); darunter liegt die Liste UNTER der Spalte, und beim Scrollen schiebt sie sich hinter das klebende Bild: Die Leistungen 01 bis 04 sind verdeckt (gemessen bei 960, 976 und 990 px). Hier reicht die Zelle ueber die ganze Rasterzeile, und eine innere Huelle klebt. Zweispaltig ist die Zeile so hoch wie die Liste: Die Huelle klebt genau die Strecke des Entwurfs (Oberkante je 100 px Scrollweg nachgemessen bei 977, 1024, 1280, 1440 und 1920 px: gleich). Einspaltig ist die Zelle so hoch wie die Huelle selbst, sie hat keinen Platz zum Kleben und scrollt wie auf dem Handy. WIE IM ENTWURF GELASSEN, OBWOHL EINE AELTERE REGEL ANDERES SAGT ---------------------------------------------------------------- a. KLEBENDE SPALTE DER LEISTUNGEN. `docs/VORLAGEN-STUFEN.md` schliesst fuer die Basis-Stufe "gepinnte Abschnitte, die beim Scrollen stehen bleiben" aus. Der Entwurf haelt ab 920 px die linke Spalte (Vorzeile, Titel, Bild) mit `position: sticky` fest, waehrend die Liste daneben vorbeilaeuft. Das ist reines CSS ohne Skript, ohne Animation und ohne Inhaltswechsel, der Abschnitt selbst scrollt normal; Entscheidung 5 nennt `position: sticky` ausdruecklich. Wo das Raster noch einspaltig steht, klebt nichts (Abweichung 18). b. WORTMARKE ALS TEXT. "PHYSIO ALSTERDORF" in Kopf und Fuss ist im Entwurf getippter Text neben dem Emblem, kein Bild. Nach der Vorgabe traegt sie keine Kurzform-Markierung; beim Umbranden bleibt sie deshalb stehen. Ebenso bleiben der Name im `aria-label` der Marke und die Zeile "(c) 2026 Physio Alsterdorf · Dr. Maximilian Preem" (der Inhaber steht darin, Vier Regeln beim Markieren). Im Reiter tauscht die Umbrandung den Namen vorn; der Inhaber hinten ("| Dr. Maximilian Preem", wortgleich aus dem Entwurf) bleibt. Offene Entscheidung. KONTRASTE — GERECHNET, NICHT GESCHAETZT (V9) -------------------------------------------- WCAG-2.1-Relativluminanz, sRGB. Halbtransparente Flaechen sind vorher im sRGB-Raum verrechnet, so wie der Browser es tut. Alle Farben sind die des Entwurfs; geaendert ist nur der Platzhalter (Abweichung 8). --tinte #1E2B29 auf --grund #F6F3EE ......... 13,24 : 1 OK --tinte auf --weiss #FFFFFF ......... 14,66 : 1 OK --tinte auf --sand #ECE5DA .......... 11,72 : 1 OK --tinte auf --hero #EFEBE4 .......... 12,34 : 1 OK --tinte auf --feld #FBFAF7 .......... 14,04 : 1 OK --vorspann #33403D auf --grund ................. 9,77 : 1 OK --vorspann auf --weiss ................. 10,82 : 1 OK --vorspann auf --sand .................. 8,65 : 1 OK --vorspann auf --hero .................. 9,10 : 1 OK --leise #5A6562 auf --grund ................. 5,46 : 1 OK --leise auf --weiss ................. 6,05 : 1 OK --leise auf --feld (Platzhalter) .... 5,79 : 1 OK --petrol #2F5D57 auf --grund ................. 6,72 : 1 OK --petrol auf --weiss ................. 7,44 : 1 OK --petrol auf --sand .................. 5,94 : 1 OK --petrol auf --hero .................. 6,26 : 1 OK --weiss auf --petrol (Knoepfe) ...... 7,44 : 1 OK --weiss auf --petrol-tief #244A45 ... 9,81 : 1 OK KONTAKT, Grund --petrol #2F5D57: --weiss (Titel, Telefon, E-Mail, Angaben) ......... 7,44 : 1 OK --k-hell #CFE0DC (Vorzeile, Bezeichnungen, Hover) 5,43 : 1 OK --k-text #E3ECEA (Absatz) ......................... 6,18 : 1 OK KOPFLEISTE. rgba(246,243,238,.92) laesst 8 % durch, dazu blur(10px). Gerechnet gegen den unguenstigsten Fall, Schwarz darunter (#E2E0DB): --tinte 11,11, --petrol 5,64, --leise (Logo-Unterzeile, 11,5 px) 4,58 : 1 — OK. Ueber dem Petrol des Kontakts (#E6E7E2): --leise 4,86. TITELBILD, unter 920 px. Das Bild steht ueber dem Text; der Text liegt auf --hero #EFEBE4 (Werte oben). TITELBILD, ab 920 px. Dunkle Schrift auf hellem Schleier ueber dem Foto; der Schleier laeuft nach rechts aus (0,72 / 0,35 / 0 bei 0 / 38 / 60 %). Es gilt deshalb nur der Messwert am echten Foto. Gemessen im Browser auf dieser Seite: die Schrift einmal unsichtbar, einmal magenta geschaltet, dann jeder Bildpunkt UNTER den Buchstaben gegen die Schriftfarbe gerechnet; je Fenster der dunkelste Punkt. Gemessen von 920 bis 1118 px an jeder zweiten Breite, darueber an 13 Breiten bis 1920 px, je bei 640 bis 1080 px Fensterhoehe, im Band auch bei 1200 und 1366 px (die Hoehe bestimmt, wie gross das Bild wird), einmal ohne und einmal mit fester Bildlaufleiste (17 px, nachgestellt). Schlechtester Wert je Text: Breite Vorzeile H1 Vorspann Verweis Adresse Telefon 920-1118 px 5,01 5,59 5,24 7,41 5,61 4,91 OK 1119-1920 px 4,95 9,81 7,45 8,16 5,43 5,14 OK mit Leiste dieselben Werte, ab 1119 px Vorspann 7,47, Verweis 8,46, Adresse 5,46 ..................... OK Mit Rahmen und Ausschnitt des Entwurfs im Band 920-1118 px: H1 1,89 : 1 (1110 x 1080), Vorspann 2,67 : 1 (920 x 1080) .. FAELLT DURCH Nur mit dem Ausschnitt 55 %, ohne fensterbreiten Rahmen, mit Leiste: H1 1,78 : 1 (1070-1118 px, Fensterhoehe bis rund 900 px) ... FAELLT DURCH > Folge: Abweichung 15, Ausschnitt UND fensterbreiter Rahmen. ========================================================================= */ /* ── Schriften · selbst ausgeliefert, kein Abruf zu einem fremden Server ── */ @font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 700; /* Datei traegt wght 200-800, bestellt 400-700 wie im Entwurf */ font-display: swap; src: url("../vendor/fonts/manrope-400-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400 500; /* Datei traegt wght 200-800 und opsz 6-72, bestellt 400-500 wie im Entwurf */ font-display: swap; src: url("../vendor/fonts/newsreader-400-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ── Tokens · jeder Wert aus dem Entwurf ─────────────────────────────────── */ :root { --grund: #F6F3EE; /* Seitengrund, Fuss, Handy-Menue */ --kopf-grund: rgba(246, 243, 238, 0.92); --hero: #EFEBE4; /* Grund des Hero, unter dem Text auf dem Handy */ --weiss: #FFFFFF; /* Leistungen, Fragen, Formular, Knopftext, Kontakt-Text */ --sand: #ECE5DA; /* Grund Teamhund */ --feld: #FBFAF7; /* Grund der Eingabefelder */ --tinte: #1E2B29; /* Text, Ueberschriften, Menuepunkte; Hover aller Verweise ohne eigene Farbe */ --vorspann: #33403D; /* Vorspann, Adresse und Telefon im Hero, Teamhund, Einwilligung */ --leise: #5A6562; /* gedaempfter Text, Logo-Unterzeile, Hinweise, Fuss, Platzhalter */ --petrol: #2F5D57; /* Hauptfarbe: Vorzeilen, Nummern, Knoepfe, Kontakt, Wortmarke, Verweise, Fokus */ --petrol-tief: #244A45; /* Knopf beim Darueberfahren */ --linie-kopf: #E4DDD1; /* Kopf-Unterkante, Linien im Handy-Menue, Fuss-Oberkante */ --linie-karte: #CFC6B7; /* Oberlinie der Nutzen-Karten, Menue-Knopf, Kreis um "+", Feldraender */ --linie: #DCD4C7; /* Trennlinien Leistungen, Team, Fragen */ --unterstrich: #9DB2AD; /* Unterstreichung "Leistungen ansehen" */ --k-hell: #CFE0DC; /* Kontakt: Vorzeile, Bezeichnungen, Hover */ --k-text: #E3ECEA; /* Kontakt: Absatz */ --schrift: Manrope, "Helvetica Neue", Arial, sans-serif; --titelschrift: Newsreader, Georgia, serif; --rand: clamp(20px, 4vw, 56px); --abstand: clamp(80px, 10vw, 140px); --notice: 26px; /* feste Hinweisleiste aus A17 */ } /* ── Grundlage · die globalen Regeln des Entwurfs ────────────────────────── */ /* Der Fokus-Block steht absichtlich VOR allen Bausteinen (Abweichung 1). */ html { scroll-behavior: smooth; scroll-padding-top: calc(88px + var(--notice)); } body { margin: 0; padding-top: var(--notice); background: var(--grund); color: var(--tinte); font-family: var(--schrift); -webkit-font-smoothing: antialiased; } *, *::before, *::after { box-sizing: border-box; } a { color: var(--petrol); } a:hover { color: var(--tinte); } :focus-visible { outline: 2px solid var(--petrol); outline-offset: 3px; border-radius: 2px; } summary::-webkit-details-marker { display: none; } .skip { position: absolute; top: calc(var(--notice) + 8px); left: 50%; z-index: 60; transform: translate(-50%, -400%); padding: 14px 24px; border-radius: 999px; background: var(--petrol); color: var(--weiss); font-size: 14.5px; font-weight: 600; text-decoration: none; } .skip:hover { color: var(--weiss); } .skip:focus { transform: translate(-50%, 0); } /* ── Kopfleiste ──────────────────────────────────────────────────────────── */ .kopf { position: fixed; top: var(--notice); left: 0; right: 0; z-index: 50; background: var(--kopf-grund); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--linie-kopf); } .kopf__innen { max-width: 1320px; margin: 0 auto; height: 76px; padding: 0 var(--rand); display: flex; align-items: center; justify-content: space-between; gap: 24px; } .marke { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--tinte); } .marke__emblem { width: 36px; height: 36px; display: block; } .marke__text { display: flex; flex-direction: column; line-height: 1.1; } .marke__wort { font-size: 15px; font-weight: 600; letter-spacing: 0.16em; color: var(--petrol); } .marke__zeile { font-size: 11.5px; letter-spacing: 0.04em; color: var(--leise); } /* Menuezeile ab 920 px. */ .nav { display: none; align-items: center; gap: 32px; } .nav__link { font-size: 14.5px; font-weight: 500; color: var(--tinte); text-decoration: none; } .nav__link:hover { color: var(--petrol); } .kopf__termin { font-size: 14.5px; font-weight: 600; color: var(--weiss); background: var(--petrol); text-decoration: none; padding: 12px 22px; border-radius: 999px; transition: background .2s; } .kopf__termin:hover { background: var(--petrol-tief); color: var(--weiss); } /* Handy-Menue:
statt Knopf mit Zustand (Abweichung 6). Der Knopf traegt die Werte des