/* GradeGrid Website V4.12 - Kopfzeile. Bis V4.11 hatte jede Seite ihre eigene Kopfzeile: Startseite, Preise und Studio trugen die V3-Leiste aus v3.css, Support und die vier Rechtsseiten die aeltere Leiste aus stil.css. Daraus wurden acht Varianten mit unterschiedlichen Punkten, unterschiedlichen Namen fuer dieselbe Seite ("Modelle" neben "Preise") und aria-current nur auf einer davon. Diese Datei ist jetzt die EINZIGE Quelle fuer die Kopfzeile. Sie wird auf allen acht Seiten als LETZTES Stylesheet geladen und gewinnt damit gegen stil.css und v3.css. Die entsprechenden Regeln wurden aus v3.css entfernt, damit es keine zweite Fassung gibt, die spaeter auseinanderlaeuft. */ /* ---------- 1. Eine Farbwelt fuer alle Seiten ---------- v3.css legt Grund und Schrift auf helle Festwerte, ohne Dunkel-Variante. stil.css dreht dieselben Werte im Dunkelmodus um. Ergebnis bis V4.11: Wer sein Geraet dunkel gestellt hatte, sah Start, Preise und Studio hell und Support samt Rechtsseiten dunkel - inklusive Kopfzeile. Die Seite hat nur eine gestaltete Fassung, und das ist die helle. Also gilt sie ueberall. */ :root { color-scheme: light; } @media (prefers-color-scheme: dark) { :root { --grund: #ffffff; --flaeche: #f5f6f7; --text: #1a1c1e; --gedaempft: #5a6169; --linie: #dfe3e6; --marke: #0f6f7a; --marke-hell: #14929f; --auf-marke: #ffffff; --warnung-grund: #fff6e5; --warnung-linie: #e0a800; --warnung-text: #6b4d00; } } /* Eigene Namen: --v3-* gibt es nur auf drei der acht Seiten. */ :root { --kopf-ink: #102327; --kopf-teal: #087782; --kopf-teal-dark: #063b43; --kopf-paper: 247, 245, 239; --kopf-line: rgba(16, 35, 39, .13); --kopf-hoehe: 4.55rem; } html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; } /* ---------- 2. Die Leiste ---------- */ .site-head { position: fixed; inset: 0 0 auto; z-index: 100; border: 0; background: rgba(var(--kopf-paper), .83); -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%); transition: box-shadow .2s ease, background .2s ease; } .site-head.scrolled { box-shadow: 0 1px 0 var(--kopf-line), 0 10px 35px rgba(4, 29, 34, .06); } /* Die Leiste ist auf allen Seiten gleich breit. .rahmen.weit steht in v3.css und fehlt damit auf Support und den Rechtsseiten. */ .site-head .rahmen { max-width: 80rem; height: var(--kopf-hoehe); min-height: var(--kopf-hoehe); padding-block: .375rem; padding-inline: clamp(1.2rem, 4vw, 3.5rem); gap: 1rem; flex-wrap: nowrap; align-items: center; } /* Die Leiste schwebt. Startseite und Unterseiten rechnen die Hoehe in ihren dunklen Kopfbereich ein; Support und die Rechtsseiten beginnen direkt mit Text und brauchen den Platz hier. */ body:not(.home):not(.subpage) { padding-top: var(--kopf-hoehe); } /* Startseite und Unterseiten haben unter der Leiste einen dunklen Kopfbereich; dort trennt der Kontrast. Support und die Rechtsseiten beginnen weiss - ohne Linie schoebe sich der Text beim Scrollen unsichtbar unter die Leiste. */ body:not(.home):not(.subpage) .site-head { border-bottom: 1px solid var(--kopf-line); } .wortmarke { color: var(--kopf-ink); font-size: 1.75rem; letter-spacing: -.03em; line-height: 1; gap: .65rem; margin-block: 0; padding-block: 0; flex-shrink: 0; } .wortmarke svg { color: var(--kopf-teal); width: 2.75rem; height: 2.75rem; display: block; } .wortmarke span { color: var(--kopf-teal); } .menue-knopf { color: var(--kopf-ink); } .site-head nav { gap: .2rem; align-items: center; } .site-head nav a { color: #415256; min-height: 44px; padding: .55rem .72rem; margin: 0; border-radius: 999px; font-size: .89rem; font-weight: 650; text-decoration: none; } .site-head nav a:hover, .site-head nav a:focus-visible { color: var(--kopf-teal-dark); background: rgba(8, 119, 130, .09); text-decoration: none; } /* Wo man gerade ist. Bis V4.11 stand aria-current nur auf drei Seiten und war nirgends sichtbar - der Wert war fuer Vorlesesoftware da und fuer sonst niemanden. Der Punkt bekommt jetzt Gewicht und eine ruhige Flaeche. */ .site-head nav a[aria-current="page"] { color: var(--kopf-teal-dark); background: rgba(8, 119, 130, .10); font-weight: 800; } .site-head nav .region-switch a[aria-current="page"] { font-weight: 800; } .site-head nav .nav-cta { color: white; background: var(--kopf-teal); padding-inline: 1rem; margin-left: .3rem; } .site-head nav .nav-cta:hover, .site-head nav .nav-cta:focus-visible { color: white; background: var(--kopf-teal-dark); } .site-head nav .nav-cta[aria-current="page"] { color: white; background: var(--kopf-teal); } /* Laenderschalter: eine Ortsangabe, keine zweite Handlung neben "Laden". */ .site-head nav .region-switch { margin-left: 1.25rem; padding: .12rem; border-color: var(--kopf-line); background: transparent; } .site-head nav .region-switch a { width: 2.5rem; font-size: .68rem; } .site-head nav .region-switch a[aria-current="page"] { color: var(--kopf-teal-dark); background: rgba(8, 119, 130, .10); box-shadow: none; } .site-head nav .region-switch a[aria-current="page"]:hover, .site-head nav .region-switch a[aria-current="page"]:focus-visible { color: var(--kopf-teal-dark); background: rgba(8, 119, 130, .18); } /* ---------- 3. Schmale Geraete ---------- Ab hier klappt das Menue zusammen. 66rem sind 1056 Pixel; darunter wird es mit Wortmarke, fünf Punkten, App-Status und Laenderschalter eng. Die abdunkelnde Flaeche steht im HTML VOR dem