/* ========================================================================== FAHRSCHULE HARTMANN — Fahrschule im Familienbetrieb Basis-Stufe (29 EUR). Standbilder, ein Einblende-Effekt pro Abschnitt, Hover und Fokus. Kein Parallax, kein Pinning, kein Scrub, kein Zaehler, kein `background-attachment: fixed`, kein GSAP. Herkunft -------- Uebersetzt aus dem Claude-Design-Entwurf "Fahrschule Hartmann.dc.html" (Projekt 3483ae45-809f-49c0-a956-70a87a237e1d) nach `docs/regeln/vorlagen.md`. Der Entwurf laedt Montserrat und Open Sans von `fonts.googleapis.com` und vierzehn Fotos von `images.unsplash.com`; dazu `style-hover` an 24 Knoten, vier ``-Schleifen (Klassen, Preise, Team, Fragen), drei ``-Bedingungen (Antwort offen, Formular gesendet, Cookie-Hinweis offen), `{{ }}`-Platzhalter an 30 Stellen und eine `DCLogic`-Klasse mit eigenem Zustand — nichts davon laeuft in einem Browser ohne die Claude-Design-Umgebung (V1). Gebaut wird nach Benedikts Entscheidung vom 20.08.2026 nur die Starter-Fassung. Der Entwurf sah von sich aus KEINE scroll-gebundene Bewegung vor (`docs/vorlagen/sichtung-31-entwuerfe.md` fuehrt ihn als einzigen seines Satzes schon als `basis`). Es faellt hier also nichts weg, was er gehabt haette — anders als bei `zahnarzt-vogl`, wo ein `background-attachment: fixed` weichen musste. Der heikle Teil dieser Branche ------------------------------ Eine Fahrschule verkauft eine Ausbildung, deren Rahmen im Gesetz steht: Fahrerlaubnisverordnung, Fahrschueler-Ausbildungsordnung, Fahrlehrergesetz. Jede Zahl daraus — Mindestalter, Gewichtsgrenze, Hoechstgeschwindigkeit, vorgeschriebene Stundenzahl — veraltet mit der naechsten Novelle. Eine Vorlage, die dreissig Kundenseiten traegt, wird nicht nachgepflegt. Deshalb nennt diese Uebernahme durchgehend den MECHANISMUS und nicht die Zahl. Drei Dinge kommen hier nirgends vor: eine Erfolgsquote, eine Zusage auf ein Ergebnis und ein Geldbetrag. Abweichungen vom Entwurf, jede mit Grund ---------------------------------------- 1. Die Schriften sind dieselben wie im Entwurf (Montserrat, Open Sans), aber selbst gehostet aus `_shared/fahrschule/fonts/` (V3, V4). Keine Ersetzung noetig — die Ersetzungstabelle aus Schritt 4 der Uebernahme-Anleitung greift nur bei Schriften, die wir nicht haben. 2. Der Entwurf deklariert die Schnitte 400, 600, 700 und 800. Die Montserrat-Datei im Bestand ist variabel und steht standardmaessig auf 100 (Thin) — nachgesehen in `fvar`, `OS/2` und `name`, nicht vermutet. Deklariert ist deshalb der Bereich `400 700`, und 800 kommt nicht vor: ein Gewicht ausserhalb des deklarierten Bereichs wird vom Browser kuenstlich gefettet. Wo der Entwurf 800 wollte, steht hier 700. 3. Kursiv ist gestrichen. Keine der beiden Dateien fuehrt einen kursiven Schnitt (`fsSelection` sagt in beiden "nicht kursiv", `fvar` fuehrt nur die Achse `wght`); `font-style: italic` erzeugt darauf eine schraeg gescherte Faelschung. Der Entwurf setzte die Fahrschuelerstimme kursiv — sie traegt jetzt die typografischen Anfuehrungszeichen im Text. 4. Der Entwurf bringt UEBERHAUPT KEINE Symbole mit. Seine sechs Klassenkarten unterscheiden sich nur durch je ein Foto — sechs Bilder mit demselben Motiv. Die Karten tragen jetzt gezeichnete Strichsymbole aus `_shared/fahrschule/icons.svg.html` (V3, inline, kein Abruf): B car-side (Nr. 1) B197 licence-card (Nr. 12) — was am Ende herauskommt, ist der unbeschraenkte Fuehrerschein; genau das ist der Unterschied dieser Klasse BF17 users (`_shared/pflege` Nr. 6) — Fahrer UND Begleitperson, das Zeichen sagt die Sache A/A2 motorcycle (Nr. 2) BE trailer (Nr. 3) AM motorcycle (Nr. 2) `motorcycle` steht damit ZWEIMAL. Das ist Absicht und kein Versehen: Roller und Motorrad sind beides Zweiraeder, und ein falsches Zeichen waere schlechter als ein wiederholtes richtiges. Unterschieden werden die Karten ueber das Klassenschild (B, B197, BF17, A/A2, BE, AM), nicht ueber das Zeichen — die Zeichen tragen bewusst keine Buchstaben. ABSICHTLICH NICHT benutzt: `inspection-badge` aus `_shared/kfz`. Eine Plakette neben einer Fahrschule liest sich als Pruefzeichen (V11). 5. Der Cookie-Hinweis ist ersatzlos weg (V12). Seine beiden Knoepfe ("Nur notwendige", "Alle akzeptieren") riefen dieselbe Funktion auf und schlossen nur das Fenster; die Seite laedt ohnehin nichts von Dritten. Der echte kommt aus dem Zusatz `cookie-pro`. 6. Das gelbe Hero-Schild "Ausbildung mit Fuehrerschein-Garantie" ist weg. Eine Garantie auf eine bestandene Pruefung kann niemand geben; als Werbeaussage ist sie ausserdem unzulaessig (V11). An seiner Stelle steht eine Tatsache aus dem Betrieb: "Familienbetrieb in dritter Generation". 7. WEG, weil erfundene Zahl (V11): "96 % bestehen bei uns die Theoriepruefung" als gelbes Abzeichen am Bild, "Ueber 12.400 Fahrschueler haben bei uns ihren Fuehrerschein gemacht" im Hero. Das Abzeichen bleibt als Form erhalten und traegt jetzt "seit 1987" — ein Gruendungsjahr altert nicht, eine Erfolgsquote ist erfunden. 8. WEG, weil Geldbetrag: die sieben Positionen der Preistabelle (290,00 EUR bis 4,00 EUR), ausdruecklich datiert auf "Stand Januar 2022", und die Spanne "2.400 EUR - 3.100 EUR" im blauen Kasten. Die TABELLE BLEIBT — sie ist der Grund, warum ein Kunde diesen Abschnitt liest. Statt der Betraege steht in der zweiten Spalte, WIE abgerechnet wird: einmalig bei der Anmeldung, je Fahrstunde, je Vorstellung. Der Betrag steht dort, wo er hingehoert und wo er gepflegt wird: im Preisaushang im Buero. 9. WEG, weil Rechtsstand mit Zahl (V11): "14 Theoriestunden", "zwoelf gesetzlich vorgeschriebene Sonderfahrten", "mindestens zehn Stunden auf einem Schaltwagen", "Anmeldung ab 16 1/2 Jahren", "A1 ab 16 · A2 ab 18 · A ab 24 Jahren", "bis 3,5 t", "Roller bis 45 km/h", "Mofa ab 15 Jahren", "Der Durchschnitt in Nordrhein-Westfalen liegt bei etwa 30 Uebungsstunden", "Im Schnitt braucht ein Fahrschueler 28 bis 35 Fahrstunden". Die KLASSENBEZEICHNUNGEN (B, B197, BF17, A, A2, A1, BE, AM) BLEIBEN. Sie sind der Name der Sache, nach der ein Kunde sucht; ohne sie waere der Abschnitt nutzlos. Weg sind die ZAHLEN daran — Alter, Gewicht, Geschwindigkeit, Stundenzahl. Genannt ist jeweils, wer es ausrechnet: "klaeren wir im Anmeldegespraech", "sagt Ihnen der Fahrlehrer". Nebenwirkung: das Zeichen "1/2" (U+00BD), das im Kopf von `_shared/fahrschule/README.md` eigens gegen die cmap-Tabelle beider Schriften geprueft wurde, kommt jetzt nicht mehr vor. Die Pruefung war trotzdem richtig — sie hat gezeigt, dass es getragen WUERDE. 10. WEG, weil Marke oder Behoerde beim Namen genannt (V11): "Pruefgebuehren von TUEV/DEKRA" ist "die Gebuehr der amtlich anerkannten Pruefungsorganisation" geworden, "Antragsgebuehren der Stadt Guetersloh" ist "der Antrag bei der zustaendigen Fuehrerscheinstelle" geworden, "mit einem Golf II" ist "mit einem gebrauchten Kleinwagen" geworden (Gattung statt Modell). 11. WEG, weil behauptete Mitgliedschaft (V11): "Mitglied im Fahrlehrerverband Westfalen-Lippe e. V." in der Fusszeile — den Verband gibt es wirklich. Ersatzlos gestrichen, keine Ersatzangabe. 12. WEG, weil Qualifikationsbehauptung (V11): "Spezialisiert auf Fahrschueler mit Pruefungsangst" in der Rollenzeile. Daraus ist eine Beschreibung geworden: "Nimmt sich besonders viel Zeit fuer Fahrschueler, die vor der Pruefung nervoes werden." 13. Die Fahrschuelerstimme BLEIBT — ausdrueckliche Entscheidung von Benedikt vom 20.08.2026. Aus der Unterschrift "Lena K., 24 - Klasse B, Pruefung Maerz 2022" ist "Nadine, Fahrschuelerin aus Musterstadt" geworden: ohne Alter, ohne Klassenbezeichnung, ohne Datum — beides altert und beides ist erfunden. "in 34 Stunden" ist aus dem Zitat weg (Punkt 9). Das Portrait wird erzeugt, nie das Foto eines echten Menschen unter falschem Namen; im Markup steht dahinter ``. Dasselbe steht an den vier Team-Karten: der Entwurf gab dort vier fremde Unsplash-Portraits als Belegschaft aus. 14. Anschrift, Telefon und E-Mail sind erkennbar erfunden (V10, Benedikts Vorgabe vom 20.08.2026): Musterstrasse 148, 12345 Musterstadt, 0123 456789, `…@fahrschule-hartmann.example`. Der Entwurf nannte eine echte Anschrift in Guetersloh, eine Rufnummer mit der richtigen Guetersloher Vorwahl und eine erreichbare Domain. Guetersloh, Rheda-Wiedenbrueck und Verl sind durchgaengig Musterstadt und "die Nachbarorte". 15. Die Jahreszahl im Fuss war 2022 und ist 2026; die Rechtsform "GmbH" ist weg. "seit 1987", "seit 2004", "seit 2016" bleiben stehen: ein Gruendungs- oder Eintrittsjahr altert nicht, eine Jahres-Differenz ("seit 35 Jahren") schon. 16. Die vorgetaeuschte Karte ist weg (V12). Der Entwurf legte ein entfaerbtes Foto mit dem Alternativtext "Stadtplan-Ansicht Guetersloh" unter ein aufgesetztes Adress-Schild — das sieht aus wie ein echter Kartenausschnitt und ist keiner. An seiner Stelle steht die gezeichnete Umgebungskarte nach dem Muster aus `lindenhof`: keine Kacheln, keine Koordinaten, kein Dritter, der die Adresse des Besuchers sieht. Anfahrt und Parken stehen zusaetzlich als Text daneben — die Zeichnung ist keine Informationsquelle. 17. Das Formular hat kein `action` und einen `type="button"`, im Markup steht der Grund (V12). Der Entwurf haengte am Knopf ein `onClick="{{ absenden }}"`, das nur einen gruenen Dankeskasten in den Zustand schrieb; verschickt wurde nichts. Der Dankeskasten ist weg, an seiner Stelle steht ein Satz, der sagt, was auf der ausgelieferten Kundenwebsite passiert. 18. Impressum, Datenschutz und AGB zeigten im Entwurf auf `#impressum`, `#datenschutz` und `#agb` — drei Sprungziele, die es auf der Seite nicht gab (V17). Sie zeigen jetzt auf den Abschnitt `#rechtliches` am Seitenende. Der vierte Verweis "Cookie-Einstellungen" ist weg: er gehoerte zum geloeschten Cookie-Hinweis. 19. `style-hover` an 24 Knoten ist echtes `:hover` und `:focus-visible` in dieser Datei; die Inline-`style` an jedem einzelnen Knoten sind Klassen und Tokens in `:root` (V6). Die vier ``-Schleifen sind ausgeschriebenes Markup, die drei `` sind aufgeloest: die Antworten der Frageliste sind immer im Markup (in `
`), der Dankeskasten und der Cookie-Hinweis sind ganz weg. 20. NEU hinzugefuegt: eine Leiste am unteren Bildrand (Anrufen, Anmelden) fuer Handybreiten und ein Sprunglink zum Inhalt. Der Entwurf ist auf feste Breite gezeichnet — `repeat(3, 1fr)`, `repeat(4, 1fr)` und `1fr 1fr` ohne jede Bedingung — und laesst Handybesucher mit vier Team-Karten nebeneinander und ohne Anrufknopf stehen (V5). 21. NEU hinzugefuegt: ein Fahrzeug-Streifen unter den Klassenkarten. Er ist die Zusammenlegung der sechs Klassen-Fotos des Entwurfs zu EINEM Bild (siehe `docs/vorlagen/bild-prompts-fahrschule-hartmann.md`). 22. Uebertragbarkeit: Der Aufbau ist absichtlich der einer allgemeinen Geschaeftsseite — Infoleiste, Kopf, Hero, drei Kacheln, Betrieb, Leistungskarten, Preise, Team, Kundenstimme, Fragen, Anfrage, Kontakt, Fuss. Wer die Vorlage auf eine andere Branche zieht, tauscht Texte, Zeichen und Bilder; kein Abschnitt haengt an der Fahrschule. Farblogik --------- Der Entwurf hat ein dunkles Marineblau (#14315c), ein kraeftiges Gelb (#f5c518), ein Ocker fuer Kleinzeilen (#c8961a), ein Blaugrau fuer den Fliesstext (#3b4652) und zwei hellere Graustufen (#6b7787, #8d99a8). Der Grund ist Weiss, ruhige Abschnitte liegen auf #f4f6f8. Marineblau und Gelb sind stark und bleiben unveraendert: Weiss auf #14315c sind 12,93:1, #14315c auf #f5c518 sind 7,93:1. Beides besteht deutlich. Durchgefallen sind die drei GRAUEN und das OCKER: #c8961a auf Weiss 2,68:1 Entwurf: JEDE Kleinzeile ueber jeder Ueberschrift (7 Stueck), die Rollenzeile der vier Team-Karten, das Plus der Frageliste, der Datenschutz-Verweis im Formular #8d99a8 auf Weiss 2,89:1 Entwurf: Zeile unter dem Namen im Kopf, Meta-Zeile der sechs Klassenkarten #6b7787 auf #f4f6f8 4,20:1 Entwurf: jeder Vorspann in einem grauen Abschnitt #8496ac auf #14315c 4,27:1 Entwurf: die Zeile ganz unten im Fuss Das Gelb bleibt vollstaendig erhalten; es ist das Kennzeichen der Seite. Das Ocker ist auf #8a6110 abgedunkelt — dieselbe Farbfamilie, 5,53:1 auf Weiss. Die zwei Graustufen sind zu EINER zusammengelegt (#58636f): zwei Grautoene, die sich um 2,89:1 gegen 4,55:1 unterscheiden, sind fuer den Leser ohnehin dieselbe Farbe. Was jede Farbe darf: --navy #14315c Ueberschriften auf hell UND Flaeche mit weissem Text (Kopfleiste, Fuss, Preiskasten, Ziffernkreise). --navy-dk #0e2444 Hover zu Flaechen in --navy. --yellow #f5c518 nur FLAECHE. Text darauf ist immer --navy (7,93:1). NIE weisser Text darauf (1,63:1). --yellow-lt #fdf3d0 Flaeche der drei Kachel-Kreise. Text darin --navy. --gold #c8961a nur STRICH und FLAECHE, nie Text: Balken vor Kleinzeilen, Rahmen. Auf Weiss 2,68:1. --gold-dk #8a6110 TEXT in Gold-Anmutung auf hellem Grund (Kleinzeilen, Rollenzeile, Verweise). --ink #3b4652 Fliesstext auf hell. --muted #58636f Kleintext auf hell. Ersetzt #6b7787 UND #8d99a8. --on-dark #dbe3ec Lesetext auf allen dunklen Flaechen. --on-dark-soft #b6c2d2 Kleintext auf dunkel. Ersetzt #a8b5c6 und #8496ac. Gemessene Kontraste (relative Luminanz nach WCAG 2.1, gerechnet) ---------------------------------------------------------------- --ink #3b4652 auf --paper #ffffff 9,62:1 --ink #3b4652 auf --wash #f4f6f8 8,88:1 --ink #3b4652 auf --field #fbfcfd 9,36:1 (Formularfeld) --ink #3b4652 auf --yellow-lt #fdf3d0 8,66:1 --ink #3b4652 auf --ph-bg #dfe4ea 7,52:1 (Platzhalter) --muted #58636f auf --paper 6,12:1 --muted #58636f auf --wash 5,65:1 --muted #58636f auf --field 5,96:1 --muted #58636f auf --line-2 #eef1f4 5,40:1 --muted #58636f auf --ph-bg 4,79:1 --gold-dk #8a6110 auf --paper 5,53:1 --gold-dk #8a6110 auf --wash 5,10:1 --gold-dk #8a6110 auf --yellow-lt 4,98:1 --navy #14315c auf --paper 12,93:1 --navy #14315c auf --wash 11,94:1 --navy #14315c auf --yellow #f5c518 7,93:1 --navy #14315c auf --yellow-lt 11,65:1 --navy #14315c auf --map-area #f7f2df 11,53:1 #ffffff auf --navy 12,93:1 #ffffff auf --navy-dk #0e2444 15,50:1 --on-dark #dbe3ec auf --navy 9,98:1 --on-dark #dbe3ec auf --navy-dk 11,97:1 --on-dark-soft #b6c2d2 auf --navy 7,17:1 --yellow #f5c518 auf --navy 7,93:1 --map-ink #4b5666 auf --map-bg #eef2f6 6,61:1 --map-ink #4b5666 auf --map-area #f7f2df 6,63:1 --map-ink #4b5666 auf --map-block #e0e6ec 5,92:1 Die Beschriftungen "Bus 4", "Musterpassage", "Uebungsplatz" und das "P" liegen auf einem Hausblock, nicht auf dem Kartengrund. --map-ink #4b5666 auf --map-road #ffffff 7,44:1 "Musterstrasse" und "Musterring" liegen auf dem weissen Strassenband. --map-ink #4b5666 auf #edf1f5 6,56:1 Nordpfeil und Massstab liegen auf einem Schild aus --map-bg mit 90 % Deckung ueber --map-block. Durchscheinend, aber NICHT unbestimmt: darunter liegt eine feste SVG-Flaeche, kein Foto. Der Wert steht damit fest. --on-dark #dbe3ec auf #274169 7,92:1 Das Hinweisfeld im Preiskasten liegt mit rgba(255,255,255,.08) auf --navy. Auch das ist durchscheinend und trotzdem bestimmt: der Grund darunter ist immer --navy. Die zwei Fotobaender (Hero, Fahrschuelerstimme) — GARANTIE STATT SCHAETZUNG -------------------------------------------------------------------------- Die Rechnung stammt aus der Zeit, als die Fotos noch fehlten, und bleibt absichtlich stehen: Sie gilt fuer JEDES Bild, das hier je liegt — auch fuer ein spaeter ausgetauschtes. Gerechnet ist der SCHLECHTESTE FALL: Ein Schleier mit Deckung a ueber einem beliebigen Bild kann hoechstens so hell werden wie derselbe Schleier ueber REINWEISS. Was gegen diesen Wert besteht, besteht ueber jedem denkbaren Foto — auch ueber einer ueberstrahlten Windschutzscheibe. Schleierfarbe ist --navy #14315c, die Farbe des Entwurfs. HERO (`img/hero.jpg`, Schleier 88 %, GLEICHMAESSIG) hellstmoeglicher Grund #304a70: #ffffff (h1, Knopfbeschriftung) 8,98:1 --on-dark #dbe3ec (Vorspann) 6,93:1 --yellow #f5c518 (Schild ueber der Zeile) 5,51:1 Der Entwurf legte hier einen WAAGERECHTEN Verlauf von 88 % auf 25 % Deckung. Am hellen Ende ergibt das ueber Reinweiss #cfd5df: Weiss kaeme dort auf 1,52:1. Auf dem Handy laeuft der Textblock ueber die ganze Breite und damit auch ueber dieses Ende. Deshalb deckt der Schleier hier ueberall gleich. Zusaetzlich lag im Entwurf das Bild mit `opacity: .42` ueber der Flaeche — ein Bild transparent zu schalten hellt es auf und macht den Schleier unberechenbar; hier deckt der Schleier das Bild ab, das Bild selbst ist voll deckend. FAHRSCHUELERSTIMME (`img/zitat.jpg`, Schleier 90 %, gleichmaessig) hellstmoeglicher Grund #2b466c: #ffffff (Zitat) 9,57:1 --on-dark #dbe3ec (Unterschrift) 7,38:1 --yellow #f5c518 (Kleinzeile) 5,87:1 `img/hero.jpg` und `img/zitat.jpg` liegen seit dem 22.08.2026 im Ordner und decken das gestreifte Raster ab. Das Raster BLEIBT als unterste Ebene stehen: Wenn ein Kunde spaeter ein eigenes Foto einsetzt und dabei der Pfad nicht stimmt, sieht die Flaeche nach einer Stelle aus, die noch gefuellt wird (V13) — und nicht nach einem vergessenen Marineblau. Geprueft -------- 360 px, 768 px und 1280 px (V5). Alle Media Queries sind `min-width`; die schmale Ansicht ist der Ausgangszustand. ========================================================================== */ /* ── Schriften ──────────────────────────────────────────────────────────── */ /* Beide Dateien sind variabel. Deklariert wird der Bereich, der auch benutzt wird — NICHT der volle Achsenbereich (Montserrat 100–900, Open Sans 300–800). Ein Gewicht ausserhalb des deklarierten Bereichs wird vom Browser kuenstlich gefettet, und das sieht schlecht aus (V4). `font-weight` DARF HIER NICHT FEHLEN: die Standard-Instanz der Montserrat-Datei ist 100 (Thin) — nachgesehen in `fvar`, `OS/2` und `name`. Ohne den Descriptor laeuft die ganze Seite auf einem Haarstrich. Kein kursiver Schnitt in beiden Dateien, deshalb auch kein `@font-face` dafuer und nirgends `font-style: italic`. */ @font-face { font-family: "Montserrat"; src: url("../vendor/fonts/montserrat-var.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; } @font-face { font-family: "Open Sans"; src: url("../vendor/fonts/open-sans-var.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; } /* ── Tokens ─────────────────────────────────────────────────────────────── */ :root { --font-title: "Montserrat", "Segoe UI", system-ui, -apple-system, Arial, sans-serif; --font-text: "Open Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif; --navy: #14315c; --navy-dk: #0e2444; --yellow: #f5c518; --yellow-lt: #fdf3d0; --gold: #c8961a; --gold-dk: #8a6110; --ink: #3b4652; --muted: #58636f; --paper: #ffffff; --wash: #f4f6f8; --field: #fbfcfd; --line: #e4e8ed; --line-2: #eef1f4; --line-3: #d6dce3; --on-dark: #dbe3ec; --on-dark-soft: #b6c2d2; --ph-bg: #dfe4ea; --ph-stripe: rgba(20, 49, 92, .10); --map-bg: #eef2f6; --map-block: #e0e6ec; --map-road: #ffffff; --map-ink: #4b5666; --map-area: #f7f2df; --map-frame: #cfd8e0; --map-accent: #14315c; /* Nadel und Beschriftung der Standortflaeche */ --focus: #8a6110; --focus-halo: rgba(245, 197, 24, .45); --wrap: 1170px; --radius: 3px; --shadow: 0 12px 30px rgba(20, 49, 92, .12); --shadow-lg: 0 18px 44px rgba(20, 49, 92, .18); --notice: 26px; /* Hoehe der Demo-Hinweisleiste, fix im Markup */ --quickbar: 58px; /* Hoehe der Handy-Leiste am unteren Bildrand */ } /* Auf dunklem Grund braucht der Fokusring die umgekehrte Aufteilung, sonst verschwindet er im Marineblau. */ .is-dark { --focus: #f5c518; --focus-halo: rgba(20, 49, 92, .9); } /* ── Grundlagen ─────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; /* Basis-Stufe erlaubt das */ scroll-padding-top: calc(var(--notice) + 5rem); -webkit-text-size-adjust: 100%; } body { margin: 0; padding-top: var(--notice); padding-bottom: var(--quickbar); font-family: var(--font-text); font-weight: 400; font-size: 1rem; line-height: 1.75; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } h1, h2, h3, h4 { font-family: var(--font-title); font-weight: 700; /* NICHT weglassen — Datei startet auf 100 */ color: var(--navy); margin: 0; line-height: 1.2; text-wrap: pretty; } p { margin: 0 0 1rem; } p:last-child { margin-bottom: 0; } a { color: var(--navy); text-decoration: none; } a:hover { color: var(--gold-dk); text-decoration: underline; } ul { margin: 0; padding: 0; list-style: none; } .wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 1.25rem); } .icon { width: 1.25rem; height: 1.25rem; flex: none; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .skip { position: absolute; left: 50%; top: calc(var(--notice) + .5rem); transform: translate(-50%, -250%); z-index: 200; background: var(--navy); color: #fff; padding: .7rem 1.2rem; border-radius: var(--radius); font-family: var(--font-title); font-weight: 700; /* NICHT weglassen */ font-size: .9rem; } .skip:focus { transform: translate(-50%, 0); color: #fff; text-decoration: none; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 6px var(--focus-halo); border-radius: 2px; } /* ── Einblenden: genau ein Effekt pro Abschnitt ─────────────────────────── */ /* Der Ausgangszustand haengt an .has-reveal, und die Klasse setzt erst `js/reveal.js`. Ohne Javascript ist also nie etwas verborgen. */ .has-reveal [data-reveal] { opacity: 0; transform: translateY(12px); } .has-reveal [data-reveal].is-in { opacity: 1; transform: none; transition: opacity 400ms ease-out, transform 400ms ease-out; } /* ── Kleinzeile ueber jeder Ueberschrift ────────────────────────────────── */ /* Der Entwurf setzte sie auf #c8961a — 2,68:1 auf Weiss. Hier auf --gold-dk (5,53:1); der helle Ocker bleibt als Balken davor sichtbar. */ .eyebrow { display: flex; align-items: center; gap: .6rem; font-family: var(--font-title); font-weight: 700; /* NICHT weglassen */ font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-dk); margin: 0 0 .9rem; } .eyebrow::before { content: ""; width: 1.75rem; height: 3px; background: var(--gold); flex: none; } .eyebrow--center { justify-content: center; } .is-dark .eyebrow { color: var(--yellow); } .is-dark .eyebrow::before { background: var(--yellow); } /* ── Knoepfe ────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; font-family: var(--font-title); font-weight: 700; /* NICHT weglassen */ font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; padding: 1rem 1.9rem; border: 2px solid transparent; border-radius: var(--radius); cursor: pointer; text-align: center; transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease; } .btn:hover { text-decoration: none; } .btn--yellow { background: var(--yellow); color: var(--navy); } .btn--yellow:hover { background: var(--navy); color: #fff; } .btn--navy { background: var(--navy); color: #fff; } .btn--navy:hover { background: var(--navy-dk); color: #fff; } .btn--ghost { border-color: rgba(255, 255, 255, .7); color: #fff; } .btn--ghost:hover { background: #fff; color: var(--navy); border-color: #fff; } .btn--white { background: #fff; color: var(--navy); } .btn--white:hover { background: var(--yellow); color: var(--navy); } .btn--block { display: flex; width: 100%; } /* ── Infoleiste oben ────────────────────────────────────────────────────── */ .topbar { background: var(--navy); color: var(--on-dark); font-size: .8rem; } .topbar__inner { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.5rem; padding-block: .6rem; } .topbar__item { display: inline-flex; align-items: center; gap: .45rem; } .topbar__item .icon { width: 1rem; height: 1rem; } .topbar a { color: var(--yellow); } .topbar a:hover { color: #fff; } .topbar__addr { margin-left: auto; color: var(--on-dark-soft); } /* Auf dem Handy bleiben Telefon und Bueroezeit; die Anschrift steht ohnehin dreimal weiter unten. */ .topbar__hide { display: none; } /* ── Kopfbereich ────────────────────────────────────────────────────────── */ .header { position: sticky; top: var(--notice); z-index: 50; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 2px 8px rgba(20, 49, 92, .06); } .header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.25rem; } .brand { display: flex; align-items: center; gap: .75rem; padding-block: .6rem; } .brand:hover { text-decoration: none; } .brand__mark { width: 2.6rem; height: 2.6rem; flex: none; border-radius: 50%; background: var(--yellow); border: 3px solid var(--navy); display: grid; place-content: center; font-family: var(--font-title); font-weight: 700; /* NICHT weglassen */ font-size: 1.15rem; color: var(--navy); } .brand__name { display: block; font-family: var(--font-title); font-weight: 700; /* NICHT weglassen */ font-size: 1.1rem; line-height: 1.15; color: var(--navy); letter-spacing: -.01em; } /* Der Entwurf setzt diese Zeile auf #8d99a8 — 2,89:1 auf Weiss. */ .brand__sub { display: block; font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-top: .15rem; } .nav { display: none; } .header__cta { display: none; } /* ── Hero ───────────────────────────────────────────────────────────────── */ /* Drei Ebenen, von oben nach unten: 1. der Schleier, gleichmaessig 88 % --navy (Rechnung im Kopf) 2. das Foto (voll deckend, NICHT `opacity`) 3. das gestreifte Raster, solange das Foto fehlt Die `background-color` traegt die Flaeche, bis irgendetwas geladen ist. */ .hero { position: relative; background-color: var(--navy); background-image: linear-gradient(rgba(20, 49, 92, .88), rgba(20, 49, 92, .88)), var(--ew-kopfbild, url("../img/hero.jpg")), repeating-linear-gradient(135deg, rgba(255, 255, 255, .07) 0 12px, transparent 12px 24px); background-size: auto, cover, auto; background-position: center, center, center; background-repeat: repeat, no-repeat, repeat; } .hero__inner { padding-block: clamp(3.5rem, 11vw, 7.25rem); } .hero__badge { display: inline-block; background: var(--yellow); color: var(--navy); font-family: var(--font-title); font-weight: 700; /* NICHT weglassen */ font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; padding: .5rem .9rem; border-radius: 2px; } /* Das LCP-Element. Traegt bewusst KEIN [data-reveal] und keine Animation. */ .hero h1 { color: #fff; font-size: clamp(1.8rem, 5.4vw, 3.25rem); line-height: 1.14; max-width: 18ch; margin: 1.15rem 0 1rem; } .hero__sub { color: var(--on-dark); font-size: clamp(1rem, 2.4vw, 1.18rem); max-width: 46ch; margin-bottom: 1.9rem; } .hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; } /* ── Drei Infokacheln ───────────────────────────────────────────────────── */ .facts { border-bottom: 1px solid var(--line); background: var(--paper); } .facts__grid { display: grid; gap: 0; } .facts__item { display: flex; gap: 1.1rem; align-items: flex-start; padding-block: 1.75rem; border-bottom: 1px solid var(--line); } .facts__item:last-child { border-bottom: 0; } .facts__mark { flex: none; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--yellow-lt); color: var(--navy); display: grid; place-content: center; } .facts__mark .icon { width: 1.5rem; height: 1.5rem; } .facts__item h3 { font-size: 1.05rem; margin-bottom: .3rem; } .facts__item p { font-size: .94rem; color: var(--muted); } /* ── Abschnitte ─────────────────────────────────────────────────────────── */ .section { padding-block: clamp(3rem, 8vw, 5.5rem); } .section--wash { background: var(--wash); } .section__head { max-width: 42rem; margin-bottom: clamp(2rem, 5vw, 3rem); } .section__head--center { margin-inline: auto; text-align: center; } .section__head h2 { font-size: clamp(1.5rem, 4vw, 2.25rem); margin-bottom: .8rem; } .section__head p { color: var(--muted); margin-bottom: 0; } /* ── Platzhalter fuer fehlende Fotos (V13) ──────────────────────────────── */ /* Ein graues Rechteck sieht aus wie ein Fehler; das hier sieht aus wie eine Stelle, die noch gefuellt wird. */ .ph { position: relative; display: grid; place-content: center; justify-items: center; gap: .5rem; margin: 0; padding: 1rem; aspect-ratio: 4 / 3; /* `min-width: 0` ist hier KEINE Kosmetik. Als Rasterfeld haette der Platzhalter sonst `min-width: auto`, und zusammen mit `aspect-ratio` rechnet der Browser die Mindestbreite aus der Inhaltshoehe hoch: die schmalere der beiden Kacheln im Abschnitt "Ueber uns" wuchs damit auf dieselbe Breite wie die breite und schob sich bei 768 px und 1280 px ueber die Textspalte. Gemessen, nicht vermutet: 318 px statt 205 px. */ min-width: 0; color: var(--muted); background-color: var(--ph-bg); background-image: repeating-linear-gradient(135deg, var(--ph-stripe) 0 10px, transparent 10px 20px); border: 1px solid var(--line-3); text-align: center; } .ph .icon { width: 2rem; height: 2rem; opacity: .85; } .ph__txt { font-family: var(--font-text); font-size: .64rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; line-height: 1.6; } .ph--wide { aspect-ratio: 16 / 9; } .ph--portrait { aspect-ratio: 3 / 4; } /* ── Betrieb ("Ueber uns") ──────────────────────────────────────────────── */ .about { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; } .about__media { position: relative; } .about__pair { display: grid; gap: .9rem; grid-template-columns: 1fr; } /* Das Abzeichen des Entwurfs trug "96 %". Die Form bleibt, der Inhalt ist ein Gruendungsjahr — das altert nicht (V11). */ .about__badge { display: inline-flex; margin-bottom: 0; flex-direction: column; align-items: center; background: var(--yellow); color: var(--navy); padding: .9rem 1.4rem; border-radius: var(--radius); box-shadow: var(--shadow); margin-top: -1.5rem; margin-left: 1rem; position: relative; z-index: 1; } .about__badge b { font-family: var(--font-title); font-weight: 700; /* NICHT weglassen */ font-size: 1.7rem; line-height: 1; } .about__badge span { font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-align: center; margin-top: .25rem; } .about h2 { font-size: clamp(1.5rem, 4vw, 2.25rem); margin-bottom: 1rem; } .about__list { display: grid; gap: .7rem 1.5rem; margin-top: 1.6rem; } .about__list li { display: flex; gap: .6rem; align-items: center; font-weight: 700; color: var(--navy); font-size: .95rem; } .about__list .icon { color: var(--gold-dk); } /* ── Klassenkarten ──────────────────────────────────────────────────────── */ .classes { display: grid; gap: 1.35rem; } .class { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; padding: 1.6rem 1.5rem 1.5rem; transition: box-shadow 180ms ease, transform 180ms ease, border-color 180ms ease; } /* Der Entwurf hatte hier `style-hover` mit Schatten und -3 px Versatz (V6). */ .class:hover { box-shadow: var(--shadow); transform: translateY(-3px); border-color: var(--line-3); } .class__top { display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem; } .class__mark { flex: none; width: 3.1rem; height: 3.1rem; border-radius: 50%; border: 2px solid var(--gold); background: var(--yellow-lt); color: var(--navy); display: grid; place-content: center; } .class__mark .icon { width: 1.6rem; height: 1.6rem; } .class__code { font-family: var(--font-title); font-weight: 700; /* NICHT weglassen */ font-size: 1.1rem; letter-spacing: .02em; background: var(--navy); color: var(--yellow); padding: .3rem .75rem; border-radius: 2px; } .class h3 { font-size: 1.1rem; margin-bottom: .5rem; } .class p { font-size: .94rem; color: var(--muted); flex: 1; } /* Der Entwurf setzte diese Zeile auf #8d99a8 — 2,89:1 auf Weiss. */ .class__meta { border-top: 1px solid var(--line-2); margin-top: 1rem; padding-top: .85rem; font-size: .8rem; color: var(--muted); font-weight: 700; line-height: 1.5; } /* ── Fahrzeug-Streifen ──────────────────────────────────────────────────── */ /* Neu gegenueber dem Entwurf: die Zusammenlegung seiner sechs Klassen-Fotos zu einem Bild. Begruendung in `docs/vorlagen/bild-prompts-fahrschule-hartmann.md`. */ .fleet { margin-top: clamp(2rem, 5vw, 3rem); } .fleet__frame { border: 1px solid var(--line); background: var(--paper); padding: .5rem; border-radius: var(--radius); } .fleet__cap { display: block; margin-top: .85rem; font-size: .88rem; color: var(--muted); text-align: center; } /* ── Preise ─────────────────────────────────────────────────────────────── */ .prices { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; } /* Der Entwurf hatte hier sieben Betraege, datiert auf "Stand Januar 2022". Die Tabelle bleibt, die zweite Spalte nennt jetzt die Abrechnungsart. */ .ptable { width: 100%; border-collapse: collapse; text-align: left; } .ptable th { font-family: var(--font-title); font-weight: 700; /* NICHT weglassen */ font-size: .74rem; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); padding: 0 0 .7rem; border-bottom: 2px solid var(--navy); } .ptable th:last-child { text-align: right; } .ptable td { padding: .85rem 0; border-bottom: 1px solid var(--line-2); font-size: .96rem; vertical-align: top; } /* `white-space: nowrap` steht ABSICHTLICH NICHT hier, sondern erst ab 48rem (siehe unten). Auf 360 px schob "einmalig bei der Anmeldung" die Spalte sonst ueber den rechten Bildrand hinaus. */ .ptable td:last-child { text-align: right; font-family: var(--font-title); font-weight: 700; /* NICHT weglassen */ font-size: .82rem; line-height: 1.45; color: var(--navy); padding-left: .75rem; } .prices__note { font-size: .85rem; color: var(--muted); margin-top: 1.1rem; } .pbox { background: var(--navy); color: var(--on-dark); border-radius: var(--radius); padding: clamp(1.5rem, 4vw, 2.25rem); } .pbox h3 { color: #fff; font-size: 1.3rem; margin-bottom: .9rem; } .pbox p { font-size: .96rem; } .pbox__hint { display: flex; gap: .8rem; align-items: flex-start; background: rgba(255, 255, 255, .08); border-left: 3px solid var(--yellow); padding: .9rem 1rem; margin: 1.25rem 0; font-size: .92rem; } .pbox__hint .icon { color: var(--yellow); margin-top: .15rem; } .pbox__cta { margin: 1.4rem 0 0; } /* ── Team ───────────────────────────────────────────────────────────────── */ .team { display: grid; gap: 1.35rem; } .person { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-align: center; } /* Die Trennlinie zwischen Bild und Text gehoert zur Karte, nicht zum Platzhalter — deshalb steht sie auch beim fertigen Foto. */ .person .ph { border: 0; border-bottom: 1px solid var(--line); } .person img { border-bottom: 1px solid var(--line); } .person__body { padding: 1.25rem 1.1rem 1.5rem; } .person h3 { font-size: 1.05rem; margin-bottom: .2rem; } /* Der Entwurf setzte die Rollenzeile auf #c8961a — 2,68:1 auf Weiss. */ .person__role { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-dk); margin-bottom: .6rem; } .person p { font-size: .9rem; color: var(--muted); } /* ── Fahrschuelerstimme ─────────────────────────────────────────────────── */ /* Standbild, kein `background-attachment: fixed`, kein Parallax (V7). Aufbau wie beim Hero: Schleier 90 %, darunter Foto, darunter Raster. */ .quote { background-color: var(--navy); background-image: linear-gradient(rgba(20, 49, 92, .90), rgba(20, 49, 92, .90)), url("../img/zitat.jpg"), repeating-linear-gradient(135deg, rgba(255, 255, 255, .07) 0 12px, transparent 12px 24px); background-size: auto, cover, auto; background-position: center, center, center; background-repeat: repeat, no-repeat, repeat; color: var(--on-dark); } .quote__inner { padding-block: clamp(3rem, 8vw, 4.75rem); max-width: 54rem; margin-inline: auto; text-align: center; } .quote figure { margin: 0; } .quote__portrait { width: 5.5rem; margin-inline: auto; margin-bottom: 1.25rem; } .quote__portrait .ph { aspect-ratio: 1 / 1; border-radius: 50%; border-color: rgba(255, 255, 255, .35); background-color: rgba(255, 255, 255, .12); color: var(--on-dark); padding: .5rem; } .quote__portrait .ph .icon { width: 1.5rem; height: 1.5rem; } .quote__portrait .ph__txt { font-size: .5rem; letter-spacing: .08em; } .quote__portrait img { border-radius: 50%; aspect-ratio: 1 / 1; object-fit: cover; } /* Der Entwurf setzte das Zitat kursiv. Zu keiner der beiden Schriften liegt ein kursiver Schnitt vor; die typografischen Anfuehrungszeichen tragen es. */ .quote blockquote { margin: 0; } .quote blockquote p { color: #fff; font-size: clamp(1.1rem, 2.9vw, 1.45rem); line-height: 1.6; margin-bottom: 1.1rem; } .quote figcaption { font-family: var(--font-title); font-weight: 700; /* NICHT weglassen */ font-size: .92rem; color: var(--on-dark); } /* ── Frageliste ─────────────────────────────────────────────────────────── */ /* Der Entwurf hielt genau eine Antwort offen und drehte ein "+" zum "×". Hier
/ (V8): bedienbar ohne Skript, mit der Tastatur, und die Browsersuche findet auch geschlossene Antworten. */ .faq { max-width: 52rem; margin-inline: auto; border-top: 1px solid var(--line); } .faq details { border-bottom: 1px solid var(--line); } .faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding: 1.15rem 0; cursor: pointer; list-style: none; font-family: var(--font-title); font-weight: 700; /* NICHT weglassen */ font-size: 1.02rem; color: var(--navy); } .faq summary::-webkit-details-marker { display: none; } .faq summary:hover { color: var(--gold-dk); } .faq summary .icon { color: var(--gold-dk); transition: transform 200ms ease; } .faq details[open] summary .icon { transform: rotate(180deg); } .faq p { color: var(--muted); padding: 0 2.75rem 1.35rem 0; margin: -.25rem 0 0; font-size: .96rem; } /* ── Anmeldung ──────────────────────────────────────────────────────────── */ .signup { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; } .signup__media { margin-top: 1.75rem; } .steps { display: flex; flex-direction: column; gap: 1.4rem; margin-top: 1.75rem; } .step { display: flex; gap: 1.1rem; align-items: flex-start; } .step__no { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--navy); color: var(--yellow); display: grid; place-content: center; font-family: var(--font-title); font-weight: 700; /* NICHT weglassen */ } .step h3 { font-size: 1.02rem; margin-bottom: .2rem; } .step p { font-size: .94rem; color: var(--muted); } .form { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.4rem, 4vw, 2.1rem); } .form h3 { font-size: 1.3rem; margin-bottom: 1.2rem; } .form__grid { display: grid; gap: 1rem; } .form__row { display: grid; gap: 1rem; } .form label > span { display: block; font-size: .8rem; font-weight: 700; color: var(--navy); margin-bottom: .35rem; } .form input, .form select, .form textarea { width: 100%; padding: .75rem .8rem; border: 1px solid var(--line-3); border-radius: var(--radius); font-family: var(--font-text); font-size: .95rem; color: var(--ink); background: var(--field); } .form textarea { resize: vertical; min-height: 6.5rem; } .form__check { display: flex; gap: .65rem; align-items: flex-start; font-size: .82rem; color: var(--muted); line-height: 1.6; } .form__check input { width: auto; margin-top: .3rem; flex: none; } .form__check a { color: var(--gold-dk); text-decoration: underline; } .form__note { font-size: .8rem; color: var(--muted); margin-top: .9rem; } /* ── Kontakt ────────────────────────────────────────────────────────────── */ .contact { display: grid; gap: clamp(2rem, 5vw, 3rem); align-items: start; } .map { width: 100%; height: auto; display: block; border-radius: var(--radius); } .map__note { font-size: .78rem; color: var(--muted); margin-top: .7rem; } .contact__list { display: grid; gap: 1.2rem; } .contact__list h3 { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .2rem; } .contact__row { display: flex; gap: .8rem; align-items: flex-start; } .contact__row .icon { color: var(--gold-dk); margin-top: .35rem; } .contact__row p { font-size: .96rem; } /* ── Fuss ───────────────────────────────────────────────────────────────── */ .footer { background: var(--navy); color: var(--on-dark); padding-top: clamp(2.5rem, 6vw, 3.75rem); } .footer__grid { display: grid; gap: 2rem; } .footer h2 { color: #fff; font-size: 1rem; letter-spacing: .04em; margin-bottom: .9rem; } .footer__brand { display: flex; align-items: center; gap: .75rem; margin-bottom: .9rem; } .footer__brand span:first-child { width: 2.4rem; height: 2.4rem; flex: none; border-radius: 50%; background: var(--yellow); color: var(--navy); display: grid; place-content: center; font-family: var(--font-title); font-weight: 700; /* NICHT weglassen */ font-size: 1.05rem; } .footer__name { font-family: var(--font-title); font-weight: 700; /* NICHT weglassen */ font-size: 1.1rem; color: #fff; } .footer p { font-size: .94rem; max-width: 34ch; } .footer a { color: var(--on-dark); } .footer a:hover { color: var(--yellow); } .footer__list { display: flex; flex-direction: column; gap: .5rem; font-size: .94rem; } .footer__legal { border-top: 1px solid rgba(255, 255, 255, .14); margin-top: 2.5rem; } .footer__legalinner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 1.5rem; padding-block: 1.1rem; font-size: .8rem; color: var(--on-dark-soft); } .footer__links { display: flex; gap: 1.1rem; flex-wrap: wrap; } .footer__links a { color: var(--on-dark-soft); } /* ── Handy-Leiste und "nach oben" ───────────────────────────────────────── */ /* Beide neu gegenueber dem Entwurf (V5): der ist auf feste Breite gezeichnet und laesst Handybesucher ohne Anrufknopf stehen. */ .quickbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; height: var(--quickbar); display: grid; grid-template-columns: 1fr 1fr; background: var(--navy); border-top: 3px solid var(--yellow); } .quickbar a { display: flex; align-items: center; justify-content: center; gap: .5rem; color: #fff; font-family: var(--font-title); font-weight: 700; /* NICHT weglassen */ font-size: .84rem; letter-spacing: .04em; text-transform: uppercase; } .quickbar a:hover { color: var(--yellow); text-decoration: none; } .quickbar a + a { border-left: 1px solid rgba(255, 255, 255, .18); } /* Im Entwurf gab es keinen. Er traegt bewusst KEIN Schriftzeichen: U+2191 fuehrt Open Sans nicht (gegen die cmap-Tabelle der Datei geprueft), und der Knopf laeuft in der Fliesstextschrift. */ .totop { position: fixed; right: 1rem; bottom: calc(var(--quickbar) + 1rem); z-index: 55; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--yellow); color: var(--navy); display: grid; place-content: center; box-shadow: var(--shadow); } .totop:hover { background: var(--navy); color: #fff; } /* ── Rechtlicher Hinweis am Seitenende ──────────────────────────────────── */ .legalnote { max-width: var(--wrap); margin-inline: auto; padding: 1.75rem clamp(1rem, 4vw, 1.25rem) 2.5rem; font-size: .85rem; line-height: 1.75; color: var(--muted); background: var(--paper); } .legalnote h2 { font-size: 1rem; letter-spacing: .04em; margin: 0 0 .35rem; } .legalnote p { margin: 0 0 .6rem; max-width: 62ch; } .legalnote p:last-child { margin-bottom: 0; } /* ========================================================================== AB HIER BREITER — alle Media Queries sind `min-width`, die schmale Ansicht oben ist der Ausgangszustand (V5). Geprueft bei 360, 768, 1280 px. ========================================================================== */ @media (min-width: 34rem) { /* 544 px */ .topbar__hide { display: inline-flex; } .about__pair { grid-template-columns: 1.55fr 1fr; } .about__list { grid-template-columns: 1fr 1fr; } .form__row { grid-template-columns: 1fr 1fr; } .classes { grid-template-columns: repeat(2, 1fr); } .team { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 48rem) { /* 768 px */ /* Erst ab hier ist Platz genug, dass die Abrechnungsart auf einer Zeile steht, ohne die erste Spalte zu erdruecken. */ .ptable td:last-child { white-space: nowrap; padding-left: 1rem; } .about { grid-template-columns: 1fr 1fr; } .prices { grid-template-columns: 1.25fr 1fr; } .signup { grid-template-columns: 1fr 1fr; } .contact { grid-template-columns: 1fr 1fr; } .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } .quote__portrait { width: 6.5rem; } } @media (min-width: 56rem) { /* 896 px */ /* Erst hier nebeneinander, nicht schon bei 768 px: dort waeren es drei Spalten von je rund 230 px, und die Kachel-Ueberschrift braeche auf drei Zeilen um. Der Entwurf hatte `repeat(3, 1fr)` ohne jede Bedingung (V5). */ .facts__grid { grid-template-columns: repeat(3, 1fr); } .facts__item { border-bottom: 0; border-right: 1px solid var(--line); padding-inline: 1.75rem; } .facts__item:first-child { padding-left: 0; } .facts__item:last-child { border-right: 0; padding-right: 0; } } @media (min-width: 64rem) { /* 1024 px */ .classes { grid-template-columns: repeat(3, 1fr); } .team { grid-template-columns: repeat(4, 1fr); } .nav { display: flex; gap: 1.35rem; font-family: var(--font-title); font-weight: 700; /* NICHT weglassen */ font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; } .nav a { color: var(--navy); padding-block: 1.5rem; border-bottom: 3px solid transparent; } /* Im Entwurf: style-hover="border-bottom-color:#f5c518" (V6). */ .nav a:hover { border-bottom-color: var(--yellow); color: var(--navy); text-decoration: none; } .header__cta { display: inline-flex; padding: .8rem 1.35rem; font-size: .78rem; } .header__right { display: flex; align-items: center; gap: 1.5rem; } /* Die Handy-Leiste wird auf breiten Fenstern nicht gebraucht: Telefon steht in der Infoleiste, "Jetzt anmelden" im Kopf. */ .quickbar { display: none; } body { padding-bottom: 0; } .totop { bottom: 1.25rem; } } @media (min-width: 75rem) { /* 1200 px */ .about__badge { position: absolute; right: -1.25rem; bottom: -1.25rem; margin: 0; } } /* ── Bewegung abschalten ────────────────────────────────────────────────── */ /* Bewegung wird ABGESCHALTET, nicht verkuerzt (Qualitaetsuntergrenze in `docs/VORLAGEN-STUFEN.md`). `js/reveal.js` steigt bei dieser Einstellung ohnehin schon aus, bevor es .has-reveal setzt; das hier ist die zweite Sicherung. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .has-reveal [data-reveal], .has-reveal [data-reveal].is-in { opacity: 1; transform: none; } .class:hover { transform: none; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ── Druck ──────────────────────────────────────────────────────────────── */ @media print { #ew-demo-notice, .quickbar, .totop, .header, .topbar, .hero__actions { display: none; } body { padding: 0; color: #000; background: #fff; } .hero, .quote, .footer, .pbox { background: none; color: #000; } .hero h1, .hero__sub, .quote blockquote p, .quote figcaption { color: #000; } .footer h2, .footer__name, .footer a, .pbox h3 { color: #000; } /* Diese beiden erben das Schwarz von oben NICHT: sie tragen eine eigene Farbe, und eine eigene Farbe schlaegt eine geerbte immer. Auf Papier stehen sie deshalb hell auf Weiss — die Zeile ganz unten im Fuss (--on-dark-soft, 1,80:1) und die Kleinzeile ueber dem Zitat (--yellow, 1,63:1). Beide Flaechen sind hier oben ausdruecklich auf `none` gesetzt, der Grund ist also in jedem Fall weiss. */ .footer__legalinner, .quote .eyebrow { color: #000; } /* Auf Papier stehen alle Antworten offen — ein zugeklappter Aufklapper laesst sich auf einem Blatt Papier nicht aufklappen. */ .faq details > *:not(summary) { display: block; } .faq summary .icon { display: none; } }