/* ============================================================================
   SPREEHAUS HAUSVERWALTUNG — Hausverwaltung in Berlin Mitte
   Basis-Stufe (Starter). Standbilder, ein Einblende-Effekt je Abschnitt, dazu
   Hover und Fokus. Kein Parallax, kein Pinning, kein Scrub, kein Zaehler,
   kein Bildwechsel, kein `background-attachment: fixed`.

   HERKUNFT
   --------
   1:1 uebertragen aus dem Claude-Design-Entwurf "Spreehaus
   Hausverwaltung.dc.html" (Projekt 4f6ae890-632e-4824-b183-e3fdc8ab05ad),
   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 und Bildzuschnitte wie im Entwurf;
   Schriften 1:1; Kontaktdaten wie im Entwurf; Logo als Bild; Bewegung ruhig.

   Der Entwurf laedt Gilda Display und Jost von Google Fonts und die Laufzeit
   `support.js`. Er traegt Hover-Angaben der Claude-Design-Umgebung an acht
   Knoten (vier Menuepunkte, Kopf-Knopf, Hero-Knopf, "Leistungen ansehen",
   Formular-Knopf), acht Bedingungsbloecke sc-if (Menuezeile, Menue-Knopf,
   Handy-Menue, drei Fehlermeldungen, Statusmeldung, Anrufleiste), keine
   Schleife sc-for und eine `DCLogic`-Klasse mit Scroll-, Menue- und
   Breitenzustand und einer Formularpruefung, die das Mailprogramm oeffnet.
   Nichts davon laeuft ohne die Claude-Design-Umgebung (V1).

   Alle Masse sind die des Entwurfs, auch sein Kastenmodell: Er setzt KEIN
   globales `box-sizing: border-box`. Die Rahmen (max-width 1360 px plus
   Innenabstand) rechnen deshalb content-box; border-box rechnen nur der
   Hero-Inhalt und die Eingabefelder, wie dort angegeben, und der Menue-Knopf,
   der im Entwurf ein <button> ist (siehe Abweichung 7). Darum steht der
   Hero-Text ab 1360 px weiter innen als die Abschnitte darunter — wie im
   Entwurf.

   Was der Entwurf je nach Fensterbreite per Skript umschaltet, steht hier in
   Media Queries an denselben Grenzen, nur min-width (V5):
     760 px    Bildausschnitt und Schleier im Hero
     1080 px   Menuezeile statt Menue-Knopf, Anrufleiste weg, Hero unten
               90 statt 130 px, Fuss unten 40 statt 96 px
     1280 px   Bildausschnitt und Schleier im Hero
   Die Raster laufen wie im Entwurf ohne Media Query ueber
   `repeat(auto-fit, minmax(min(100%, X), 1fr))`; das Fussraster hat dort
   kein min() und braucht deshalb Abweichung 9.

   ABWEICHUNGEN VOM ENTWURF, JEDE MIT GRUND
   ----------------------------------------
    1. LAUFZEIT ENTFERNT (V1, V6). Die Elemente x-dc und helmet, die
       Bedingungsbloecke, die Platzhalter in doppelten geschweiften Klammern,
       die Hover-Angaben, `onClick`/`onChange`/`onSubmit`, `DCLogic`,
       `support.js` und das Werkzeug-Skript von Claude Design sind weg.
       Inline-Stile sind Klassen mit den Werten aus `:root`, die
       Hover-Angaben sind `:hover`. Die globale Regel
       `a:hover { color: #3B5A78 }` des Entwurfs fehlt: Jeder Textverweis
       setzt dort seine Farbe inline, die Regel wirkte also nirgends. Als
       Klassen-CSS faerbte sie ploetzlich Fuss-, Kontakt- und Telefonlinks
       um. Hover gibt es genau dort, wo der Entwurf eine Hover-Angabe traegt.
    2. SCHRIFTEN SELBST AUSGELIEFERT (V3, V4, Entscheidung 2). Genau die
       Familien und Schnitte des Entwurfs: Gilda Display 400 (statisch,
       20 204 B) und Jost (variable Datei, Achse 100-900, freigegeben 400-600
       wie im Entwurf bestellt, 26 576 B), latin-Teilmenge mit demselben
       `unicode-range` wie bei Google. Zusammen 46 780 B, Budget 120 KB. Kein
       preconnect, kein Stylesheet von Google. Das Plus in den Fragen steht im
       Entwurf auf `font-weight: 300`; geladen ist dort wie hier nur 400-600,
       der Browser nimmt also 400. Die Angabe bleibt stehen, ein 300er-Schnitt
       wird bewusst NICHT freigegeben (saehe anders aus als der Entwurf).
    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 110 statt 84 px Abstand, und
       #start und <main> halten 26 px, damit Logo-Verweis und Sprungverweis
       wie im Entwurf ganz oben landen. Der Reiter-Titel steht woertlich wie
       im Entwurf ("Spreehaus | ..."); er beginnt nicht mit dem markierten
       Firmennamen, die Umbrandung laesst ihn deshalb stehen.
    4. SPERRHINWEIS (V14). `noindex, nofollow`; Seitenbeschreibung und
       og:description enden auf "Fiktives Beispielprojekt."
    5. BILDER LOKAL (V3, Entscheidung 6). Dieselben Dateien unter img/ statt
       hausverwaltung/. Das Titelbild ist von 2400 x 1018 auf 1920 x 814 px
       verkleinert (164 108 B, Budget 250 KB); `width`/`height` im Markup
       nennen die echten Masse. Genau ein Bild vorgeladen, das Titelbild
       (V18); og:image zeigt auf img/hero.webp.
    6. KOPFLEISTE HINTERLEGT AB DEM ERSTEN PIXEL STATT AB 40 PX (V9, V8,
       Entscheidung 5). Wie im Entwurf am Seitenanfang durchsichtig und beim
       Scrollen hinterlegt mit rgba(244,242,238,.97) und der Linie
       0 1px 0 #DAD6CE, Uebergang `background .25s, box-shadow .25s`. Der
       Entwurf wechselt erst nach 40 px. Am Seitenanfang besteht die Schrift
       auch durchsichtig (siehe KONTRASTE), aber zwischen 1 und 40 px wandert
       das dunkle Dach des Eckhauses unter die Telefonnummer: bei 40 px
       gemessen bis hinunter auf 1,03 : 1 (47 von 80 Fenstergroessen ab
       1080 px unter 4,5), "Fragen" im Hover auf 2,96 : 1. Hier wechselt die
       Leiste deshalb schon beim ersten gescrollten Pixel; zu sehen sind
       dieselben zwei Zustaende wie im Entwurf, nur der Umschaltpunkt ist
       frueher. Den Zustand setzt js/seite.js: Ein unsichtbarer, 1 px hoher
       Waechter ganz oben meldet ueber einen IntersectionObserver, ob er noch
       im Bild ist; die Scroll-Position wird nicht gelesen. Ohne Javascript
       (oder ohne IntersectionObserver) steht die Leiste von Anfang an
       hinterlegt (<noscript> im Kopf von index.html, nach dem Stylesheet),
       sonst laege sie beim Weiterlesen durchsichtig ueber dem Text. Bei
       offenem Handy-Menue hinterlegt `:has()` die Leiste ohne Linie, wie der
       Entwurf.
    7. HANDY-MENUE OHNE SKRIPT (V8). Statt Knopf plus Zustand ein
       <details>/<summary>; "aufgeklappt" meldet der Browser selbst. Der
       Knopf rechnet border-box wie der <button> des Entwurfs, sonst waere er
       50 statt 48 px gross. Die Liste liegt absolut unter der Leiste, an
       derselben Stelle wie im Entwurf, mit festem Innenabstand 20 px wie
       dort; im gescrollten Zustand zieht sie die Linie unter sich, die dort
       die Kopfleiste unter dem ganzen 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.
    8. FORMULAR SENDET NICHTS (V12). Pruefung, Fehlermeldungen,
       Statusmeldung 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. Hinter dem Knopf stand im
       Entwurf die leere Statuszeile; den Abstand davor (gap 22 px) haelt
       jetzt ein Rand unter dem Knopf, damit der weisse Kasten gleich hoch
       bleibt. Vorgewaehlt ist der Ausgangszustand des Entwurfs: "6 bis 20"
       Einheiten, das Kaestchen leer.
    9. FUSS AUF DEM HANDY (V5). Das Fussraster ist im Entwurf das einzige
       ohne `min(100%, ...)`: `repeat(auto-fit, minmax(200px, 1fr))` in
       einem Flex-Element mit max-width 760 px. Der Browser haelt es deshalb
       mindestens drei Spalten breit (3 x 200 + 2 x 32 = 664 px). Unter
       738 px Fensterbreite ragt es ueber den Rand, und der Seitenrahmen
       (overflow-x: hidden) schneidet es ab: Bei 360 bis 414 px endet die
       Mail-Adresse bei 447 px, Impressum und Datenschutzerklaerung stehen
       bei 484-684 px, also ausserhalb des Bildes. Ein
       `min-width: min(100%, 664px)` laesst das Raster dort auf die
       Zeilenbreite schrumpfen (eine Spalte bis 479 px, darueber zwei). Ab
       738 px ist alles wie im Entwurf.
   10. "EIGENTUEMERGEMEINSCHAFTEN" (V5). Das Wort (Gilda 32 px) ist breiter
       als seine Karte: bei 360-414 px ragt es ueber den Bildschirmrand und
       wird abgeschnitten, bei 768 und 1280 px laeuft es in den Titel der
       Nachbarkarte. Im Markup steht deshalb ein weiches Trennzeichen
       ("Eigentuemer&shy;gemeinschaften"). Es trennt nur, wo das Wort nicht
       passt; bei 1024, 1080, 1440 und 1920 px bleibt alles wie im Entwurf.
   11. HOVER VON "LEISTUNGEN ANSEHEN" (V9). Der Entwurf faerbt Schrift und
       Linie beim Darueberfahren #3B5A78. Ueber dem Titelbild faellt das unter
       4,5 : 1: gemessen an 512 Fenstergroessen (siehe KONTRASTE) bis
       hinunter auf 3,63 : 1 (760 x 1000), bei 249 Groessen unter 4,5. Hier
       #2F4A65, dasselbe Blau etwas tiefer: schlechtester Fall 4,64 : 1
       (760 x 1000), nirgends unter 4,5; auf reinem --grund 8,21 : 1. Der
       Wechsel bleibt sichtbar (gegen die Ruhefarbe #1F2E3D 1,51 : 1, dazu
       die Linie in derselben Farbe).
   12. FOKUSRING AUF DUNKLEM GRUND (V9, Nicht-Text). Der Ring des Entwurfs
       (#3B5A78) ist im Fuss zu schwach (2,24 : 1); dort ist er #F4F2EE
       (14,40 : 1). In der Anrufleiste liegt er innen: aussen laege er links
       und unten ausserhalb des Fensters und zwischen den Knoepfen auf Navy
       (1,93 : 1). Innen: #3B5A78 auf #F4F2EE 6,43, #F4F2EE auf #1F2E3D
       12,39 : 1.
   13. PLATZHALTER IN DEN FELDERN (V9). Der Entwurf setzt keine Farbe; die
       Browser zeigen ihn hellgrau, je nach Browser bis hinunter auf
       2,35 : 1. Hier #5E6872, deckend, die Farbe der kleinen Bezeichnungen
       des Entwurfs: 5,68 : 1 auf #FFFFFF.
   14. EINBLENDEN ERGAENZT (V7, Entscheidung 5). Der Entwurf blendet nichts
       ein. Die sechs Abschnitte unter dem Hero tragen [data-reveal] und
       erscheinen einmal (400 ms, 12 px). Der Hero nicht: das LCP-Element
       steht im ersten Frame. Ohne Skript und bei "Bewegung reduzieren" ist
       alles sofort da.
   15. ABSCHNITT #rechtliches AM ENDE (V17, wie in jeder Vorlage). Unter
       1080 px haelt er unten 56 px mehr Abstand, sonst laege die Anrufleiste
       ueber seinem letzten Satz. Impressum und Datenschutzerklaerung im Fuss
       und im Formular zeigen wie im Entwurf auf eineuroweb.de (Entscheidung
       7) und fuehren damit nicht ins Leere.
   16. KONTAKTDATEN WIE IM ENTWURF (Entscheidung 3, bewusst abweichend von
       V10): Hausstrasse 112, 10117 Berlin, 030 123456789,
       hausverwaltung@eineuroweb.de und die Buerozeiten. Benedikt hat sie
       geprueft.
   17. ZUSAETZLICH AUS DEM MUSTER salon-kammrath: <html lang="de">, der
       Sprungverweis "Zum Inhalt springen" mit `id="main"` an <main>, und
       `decoding="async"` an beiden Logos.
   18. SYMBOL IM REITER. Der Entwurf hat keins; ohne fragt der Browser
       /favicon.ico an der Wurzel ab, und die App liefert dort nichts. Wie in
       jeder anderen Vorlage steht es als data:-Adresse im Kopf (V3): eine
       Flaeche in --navy, ohne Buchstaben, damit die Umbrandung nichts
       Fremdes stehen laesst.

   KONTRASTE — GERECHNET, NICHT GESCHAETZT (V9)
   --------------------------------------------
   WCAG-2.1-Relativluminanz, sRGB. Halbtransparente Flaechen sind vorher im
   sRGB-Raum verrechnet, so wie der Browser es tut.

     --navy #1F2E3D       auf --grund #F4F2EE ......... 12,39 : 1   OK
     --navy               auf --weiss #FFFFFF ......... 13,85 : 1   OK
     --navy               auf --hero-grund #DDE5EC .... 10,88 : 1   OK
     --blau #3B5A78       auf --grund (Vorzeilen) .....  6,43 : 1   OK
     --blau               auf --weiss (Datenschutz) ...  7,19 : 1   OK
     --blau               auf --hero-grund ............  5,65 : 1   OK
     --vorspann #33424F   auf --grund .................  9,24 : 1   OK
     --vorspann           auf --weiss (Listen) ........ 10,33 : 1   OK
     --text #525C65       auf --grund .................  6,10 : 1   OK
     --text               auf --weiss .................  6,82 : 1   OK
     --leise #5E6872      auf --grund (Bezeichnungen) .  5,08 : 1   OK
     --leise              auf --weiss (Platzhalter) ...  5,68 : 1   OK
     --grund              auf --navy (Knoepfe) ........ 12,39 : 1   OK
     --grund              auf --blau (Knoepfe, Hover) .  6,43 : 1   OK
   TEAM, Grund --navy #1F2E3D:
     --t-zeile #BFCEDC (Vorzeile, Rollen, Unterschrift)  8,62 : 1   OK
     --t-text #DCE3EA (Absaetze) .......................  10,70 : 1   OK
     --grund #F4F2EE (Titel, Namen) .................... 12,39 : 1   OK
   FUSS, Grund --fuss #17222E:
     --t-text #DCE3EA (Text, Verweise) ................. 12,43 : 1   OK
     --weiss (Impressum, Datenschutzerklaerung) ........ 16,10 : 1   OK
     --fuss-copy #AEBBC8 ...............................  8,23 : 1   OK

   KOPFLEISTE HINTERLEGT. rgba(244,242,238,.97) laesst 3 % durch. Gerechnet
   gegen das Dunkelste, was darunter durchlaeuft: ueber #1F2E3D wird sie
   #EEECE9 (--navy 11,74), ueber #17222E #EDECE8 (11,71), ueber Schwarz
   #EDEBE7 (11,60); --blau im Hover 6,08-6,10 — OK.
   SO GEMESSEN (Titelbild und durchsichtige Kopfleiste): im Browser am
   fertigen Bau, die Schrift unsichtbar geschaltet, dann jeder Bildpunkt unter
   jeder Textzeile gegen die Schriftfarbe gerechnet. 197 Fenstergroessen von
   360 x 640 bis 2560 x 1440 (Handy, Tablet, Laptop, grosse Schirme). Genannt
   ist je Text der schlechteste Fall: der dunkelste Bildpunkt, dazu der
   1-%-Wert (99 % der Punkte liegen darueber). Der hellste Punkt unter der
   Schrift ist der Schleier selbst (#F4F2EE fast deckend) und liegt nahe den
   Werten auf --grund.

   KOPFLEISTE DURCHSICHTIG, am Seitenanfang wie im Entwurf:
     Menuepunkte --navy (ab 1080 px) ...........  9,70 : 1   OK
     Telefon --navy (ab 1080 px) ...............  6,61 : 1 (1080 x 600)   OK
     Menuepunkte im Hover --blau ...............  5,04 : 1   OK
     Menue-Knopf, Rand und Striche (unter 1080 px, Nicht-Text, Ziel 3 : 1)
                                                 10,78 : 1   OK
   Dieselben Werte bei 1 px Scrollen, dem letzten durchsichtigen Stand dieser
   Seite (96 Fenstergroessen ab 1024 px nachgemessen). Nach 40 px Scrollen,
   wo der Entwurf noch durchsichtig ist: Telefon 1,03 : 1, "Fragen" im Hover
   2,96 : 1 — ZU WENIG. > Folge: Abweichung 6.
   "Angebot anfordern" steht auf seinem eigenen Navy-Grund (12,39).

   TITELBILD. Dunkle Schrift auf hellem Schleier ueber dem Foto. Der
   unguenstigste denkbare Fall ist ein schwarzer Bildpunkt unter dem Schleier:
     Deckung 0,95 -> #E8E6E2: --navy 11,10, --vorspann 8,28, --blau 5,76
     Deckung 0,94 -> #E5E3E0: --navy 10,85, --vorspann 8,10, --blau 5,64
     Deckung 0,90 -> #DCDAD6: --navy  9,90, --vorspann 7,38, --blau 5,14
     Deckung 0,86 -> #D2D0CD: --navy  9,00, --vorspann 6,71, --blau 4,67
     Deckung 0,70 -> #ABA9A7: --navy  5,93, --vorspann 4,42, --blau 3,08
   Ab 760 px laeuft der Schleier nach rechts aus (0,45 / 0,30 / 0), und auch
   unter 760 px reicht der schwarze Fall bei 0,70 nicht; es gilt der Messwert
   am echten Foto:
     Vorzeile --blau ...........................  4,96 : 1 (700 x 1366)   OK
     Vorspann --vorspann .......................  4,68 : 1 (760 x 768)    OK
     "Leistungen ansehen" --navy ...............  7,07 : 1 (768 x 1024)   OK
     "Leistungen ansehen" im Hover, Entwurf #3B5A78
                                                  3,67 : 1 (768 x 1024)   ZU WENIG
       (bei 66 der 197 Groessen unter 4,5). Dazu dicht nachgemessen im
       schlechtesten Bereich, 315 Groessen 760-800 x 700-1400 px: 3,63 : 1
       (760 x 1000), 183 davon unter 4,5. > Folge: Abweichung 11.
       Mit #2F4A65 .............................  4,64 : 1 (760 x 1000)   OK
     h1 --navy: 1-%-Wert mindestens 6,29 : 1 — OK. Der dunkelste Einzelpunkt
       faellt bei 31 Groessen unter 4,5, am tiefsten auf 3,42 : 1 (900 x 768):
       vereinzelte dunkle Bildpunkte am Zeilenende, nicht die Flaeche unter
       der Schrift. Die h1 ist grosse Schrift (ab 44 px), fuer die WCAG
       3 : 1 verlangt; das haelt auch der dunkelste Punkt. Ohne
       `text-wrap: balance` (gierig umbrochen) blieb es bei der Messung des
       Unterstuetzers ebenso, ein Rueckfall wie bei kiosk-wolff ist nicht
       noetig.
   "Angebot anfordern" steht auf seinem eigenen Navy-Grund (12,39).

   NICHT-TEXT (Ziel 3 : 1). Fokusring --blau auf --grund 6,43, auf --weiss
   7,19, ueber dem Titelbild mindestens 3,67 (gemessen unter "Leistungen
   ansehen", siehe oben); im Fuss und in der Anrufleiste siehe Abweichung 12. Rahmen der Eingabefelder #B8B3A9 auf #FFFFFF
   2,09 : 1 — unter den 3 : 1 fuer Bedienelemente; Entwurf so gelassen
   (V9 gilt fuer Text), die Beschriftung steht ueber jedem Feld. Die Linien
   #DAD6CE, #4A6074 und #33475A sind Zierde.
   ========================================================================= */


/* ── Schriften · selbst ausgeliefert, kein Abruf zu einem fremden Server ── */

@font-face {
  font-family: "Gilda Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../vendor/fonts/gilda-display-400-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: "Jost";
  font-style: normal;
  font-weight: 400 600;          /* Datei traegt wght 100-900, freigegeben 400-600 */
  font-display: swap;
  src: url("../vendor/fonts/jost-400-600-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: #F4F2EE;        /* Seitengrund, Handy-Menue, Anrufleiste, Schleier, Knopftext */
  --weiss: #FFFFFF;        /* Leistungen, Formular, Felder; Rechtsverweise im Fuss */
  --hero-grund: #DDE5EC;   /* Grund des Hero unter dem Bild */
  --bild-grund: #E5E1D9;   /* Grund unter den Bildern der Leistungen */
  --team-bild: #2C3E50;    /* Grund unter dem Teamfoto */
  --linie: #DAD6CE;        /* Linien und Rahmen */
  --feld: #B8B3A9;         /* Rahmen der Eingabefelder */
  --navy: #1F2E3D;         /* Text, Ueberschriften, Verweise, Knoepfe, Team */
  --blau: #3B5A78;         /* Vorzeilen, Ziffern, Striche, Plus, Hover, Fokusring */
  --blau-tief: #2F4A65;    /* Hover von "Leistungen ansehen" (Abweichung 11) */
  --vorspann: #33424F;     /* Vorspann im Hero, Listen der Leistungen */
  --text: #525C65;         /* Fliesstext */
  --leise: #5E6872;        /* kleine Bezeichnungen im Kontakt, Platzhalter */
  --t-zeile: #BFCEDC;      /* Team: Vorzeile, Rollen, Bildunterschrift */
  --t-text: #DCE3EA;       /* Team: Absaetze; Fuss: Text und Verweise */
  --t-linie: #4A6074;      /* Team: Linie ueber jeder Person */
  --fuss: #17222E;         /* Grund der Fusszeile */
  --fuss-copy: #AEBBC8;    /* Copyright-Zeile */
  --fuss-linie: #33475A;   /* Linie ueber der Copyright-Zeile */
  --kopf-grund: rgba(244, 242, 238, 0.97);

  --schrift: Jost, "Helvetica Neue", Arial, sans-serif;
  --titelschrift: "Gilda Display", Georgia, serif;

  --breite: 1360px;
  --rand: clamp(20px, 5vw, 64px);
  --notice: 26px;          /* feste Hinweisleiste aus A17 */
  --kopf: 84px;            /* Kopfleiste: 12 + 60 + 12 */
  --leiste: 56px;          /* Anrufleiste unter 1080 px */
}


/* ── Grundlage · die globalen Regeln des Entwurfs ────────────────────────── */

html { scroll-behavior: smooth; }

body {
  margin: 0;
  padding-top: var(--notice);
  background: var(--grund);
  color: var(--navy);
  font-family: var(--schrift);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--navy); }

:focus-visible { outline: 2px solid var(--blau); outline-offset: 3px; }

summary::-webkit-details-marker { display: none; }

details[open] .faq-plus { transform: rotate(45deg); }

.seite {
  min-height: 100vh;
  background: var(--grund);
  overflow-x: hidden;
}

.rahmen {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0 var(--rand);
}

/* Vorzeile und Abschnittstitel. Stehen vor Kopf und Hero, damit die
   Abwandlungen weiter unten (Hero, Team, Wechsel) gewinnen. */
.vorzeile {
  margin: 0 0 22px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--blau);
}

.vorzeile--hell { color: var(--t-zeile); }

.titel {
  margin: 0;
  font-family: var(--titelschrift);
  font-weight: 400;
  font-size: clamp(36px, 4vw, 58px);
  line-height: 1.08;
  color: var(--navy);
  text-wrap: balance;
}

main { scroll-margin-top: var(--notice); }

.skip {
  position: absolute;
  top: calc(var(--notice) + 8px);
  left: 50%;
  z-index: 60;
  transform: translate(-50%, -400%);
  padding: 14px 24px;
  background: var(--navy);
  color: var(--grund);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}

.skip:focus { transform: translate(-50%, 0); }

/* Abweichung 6: ganz oben auf der Seite, 1 px hoch (Entwurf: 40 px), unsichtbar. */
.kopf-waechter {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}


/* ── Kopfleiste ──────────────────────────────────────────────────────────── */

/* Durchsichtig wie im Entwurf am Seitenanfang; hinterlegt, sobald
   js/seite.js `is-gescrollt` setzt oder das Handy-Menue offen ist
   (Abweichung 6). */
.kopf {
  position: fixed;
  top: var(--notice);
  left: 0;
  right: 0;
  z-index: 50;
  background: transparent;
  box-shadow: none;
  transition: background .25s, box-shadow .25s;
}

.kopf.is-gescrollt {
  background: var(--kopf-grund);
  box-shadow: 0 1px 0 var(--linie);
}

.kopf:has(details[open]) { background: var(--kopf-grund); }

.kopf__innen {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 12px var(--rand);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.kopf__marke {
  display: flex;
  align-items: center;
}

.kopf__logo {
  height: 60px;
  width: auto;
  display: block;
}

.kopf__nav {
  display: none;
  align-items: center;
  gap: 36px;
}

.kopf__link {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--navy);
  text-decoration: none;
}

.kopf__link:hover { color: var(--blau); }

.kopf__tel {
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
}

/* Knoepfe: gross im Hero und im Formular, klein in der Kopfleiste. */
.knopf {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grund);
  background: var(--navy);
  text-decoration: none;
  padding: 19px 32px;
}

.knopf--klein { padding: 14px 24px; }

.knopf:hover {
  background: var(--blau);
  color: var(--grund);
}

/* Handy-Menue: <details> statt Knopf mit Zustand (Abweichung 7). */
.menue__knopf {
  box-sizing: border-box;
  width: 48px;
  height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: transparent;
  border: 1px solid var(--navy);
  cursor: pointer;
  list-style: none;
}

.menue__knopf span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--navy);
}

/* Bezugsrahmen ist die feste Kopfleiste, nicht <details>: So liegt die Liste
   ueber die volle Breite direkt unter der Leiste, wie im Entwurf. */
.menue__liste {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  padding: 12px 20px 28px;
  background: var(--grund);
  border-top: 1px solid var(--linie);
}

.kopf.is-gescrollt .menue__liste { box-shadow: 0 1px 0 var(--linie); }

.menue__link {
  font-family: var(--titelschrift);
  font-size: 28px;
  color: var(--navy);
  text-decoration: none;
  padding: 12px 0;
  border-bottom: 1px solid var(--linie);
}

.menue__angebot {
  margin-top: 20px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grund);
  background: var(--navy);
  text-decoration: none;
  padding: 16px 22px;
  text-align: center;
}


/* ── Hero ────────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: 92svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--hero-grund);
  scroll-margin-top: var(--notice);
}

/* Ausschnitt und Schleier wechseln wie im Entwurf bei 760 und 1280 px. */
.hero__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 88% 50%;
}

.hero__schleier {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(244, 242, 238, 0.9) 0%, rgba(244, 242, 238, 0.86) 70%, rgba(244, 242, 238, 0.7) 100%);
}

.hero__inhalt {
  position: relative;
  width: 100%;
  max-width: var(--breite);
  margin: 0 auto;
  padding: 140px var(--rand) 130px;
  box-sizing: border-box;
}

.hero__vorzeile { margin: 0 0 26px; }

.hero__titel {
  margin: 0;
  max-width: 660px;
  font-family: var(--titelschrift);
  font-weight: 400;
  font-size: clamp(44px, 5.8vw, 84px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--navy);
  text-wrap: balance;
}

.hero__vorspann {
  margin: 28px 0 0;
  max-width: 480px;
  font-size: clamp(17px, 1.35vw, 19px);
  line-height: 1.65;
  color: var(--vorspann);
  text-wrap: pretty;
}

.hero__knoepfe {
  margin-top: 42px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
}

.hero__link {
  font-size: 16px;
  font-weight: 500;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid var(--navy);
  padding-bottom: 4px;
}

/* Abweichung 11: #2F4A65 statt #3B5A78, sonst ueber dem Foto unter 4,5 : 1. */
.hero__link:hover {
  color: var(--blau-tief);
  border-color: var(--blau-tief);
}


/* ── Abschnitte ──────────────────────────────────────────────────────────── */

.abschnitt {
  padding: clamp(90px, 10vw, 140px) 0;
  scroll-margin-top: calc(var(--notice) + var(--kopf));
}

.abschnitt--versprechen { padding: clamp(90px, 10vw, 150px) 0; }

.abschnitt--weiss { background: var(--weiss); }

/* Kopfzeile der Leistungen und des Teams: Titel links, Satz rechts. */
.abschnitt__kopf {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 56px;
}

.abschnitt__kopf--team { margin-bottom: 48px; }

/* Kleine Titel und Saetze in Versprechen und Verwalterwechsel. */
.punkt__titel {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 600;
}

.punkt__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
}


/* ── Versprechen ─────────────────────────────────────────────────────────── */

.versprechen__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

.versprechen__titel {
  margin: 0;
  font-family: var(--titelschrift);
  font-weight: 400;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.1;
  color: var(--navy);
  text-wrap: balance;
}

.versprechen__liste {
  display: flex;
  flex-direction: column;
}

.versprechen__zeile {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 16px;
  padding: 28px 0;
  border-top: 1px solid var(--linie);
}

/* Die dritte Zeile zieht im Entwurf zusaetzlich die Linie unter sich. */
.versprechen__zeile:last-child { border-bottom: 1px solid var(--linie); }

.versprechen__ziffer {
  font-family: var(--titelschrift);
  font-size: 28px;
  color: var(--blau);
}


/* ── Leistungen ──────────────────────────────────────────────────────────── */

.leistungen__titel { max-width: 720px; }

.leistungen__intro {
  margin: 0;
  max-width: 400px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
}

.leistungen__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(28px, 3vw, 48px);
}

.karte {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.bildkasten {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bild-grund);
}

.bildkasten img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.karte__titel {
  margin: 0 0 12px;
  font-family: var(--titelschrift);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.1;
}

.karte__text {
  margin: 0 0 16px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
}

.karte__liste {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 15px;
  color: var(--vorspann);
}

.karte__liste li {
  padding-left: 18px;
  position: relative;
}

/* Der kurze Strich vor jedem Punkt. */
.karte__liste span {
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 1px;
  background: var(--blau);
}


/* ── Verwalterwechsel ────────────────────────────────────────────────────── */

.wechsel__titel {
  margin: 0 0 56px;
  max-width: 760px;
}

.wechsel__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(24px, 3vw, 40px);
}

.wechsel__liste li {
  border-top: 1px solid var(--navy);
  padding-top: 24px;
}

.wechsel__ziffer {
  margin: 0 0 14px;
  font-family: var(--titelschrift);
  font-size: 40px;
  line-height: 1;
  color: var(--blau);
}


/* ── Team ────────────────────────────────────────────────────────────────── */

.team {
  background: var(--navy);
  color: var(--grund);
}

.team__titel {
  max-width: 720px;
  color: var(--grund);
}

.team__intro {
  margin: 0;
  max-width: 380px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--t-text);
}

.team__bild { margin: 0; }

.team__bild img {
  width: 100%;
  height: auto;
  aspect-ratio: 1400 / 939;
  object-fit: cover;
  display: block;
  background: var(--team-bild);
}

.team__unterschrift {
  margin-top: 14px;
  font-size: 14px;
  color: var(--t-zeile);
}

.team__raster {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(32px, 4vw, 64px);
}

.person {
  border-top: 1px solid var(--t-linie);
  padding-top: 24px;
}

.person__name {
  margin: 0 0 4px;
  font-family: var(--titelschrift);
  font-weight: 400;
  font-size: 30px;
  color: var(--grund);
}

.person__rolle {
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--t-zeile);
}

.person__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--t-text);
}


/* ── Haeufige Fragen ─────────────────────────────────────────────────────── */

/* Unten ohne Innenabstand, wie im Entwurf: der Kontakt schliesst an. */
.fragen {
  padding: clamp(90px, 10vw, 140px) 0 0;
  scroll-margin-top: calc(var(--notice) + var(--kopf));
}

.fragen__rahmen {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 var(--rand);
}

.fragen__titel {
  margin: 0 0 32px;
  font-family: var(--titelschrift);
  font-weight: 400;
  font-size: clamp(32px, 3.4vw, 48px);
  line-height: 1.1;
}

.frage { border-top: 1px solid var(--linie); }

.frage:last-of-type { border-bottom: 1px solid var(--linie); }

.frage__kopf {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 24px 0;
  font-size: 18px;
  font-weight: 500;
}

/* 300 steht so im Entwurf und rendert als 400 (Abweichung 2). */
.faq-plus {
  font-size: 26px;
  font-weight: 300;
  color: var(--blau);
  transition: transform .2s;
}

.frage__antwort {
  margin: 0 0 26px;
  max-width: 720px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
}


/* ── Kontakt ─────────────────────────────────────────────────────────────── */

.kontakt__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: clamp(48px, 6vw, 96px);
  align-items: start;
}

.kontakt__intro {
  margin: 24px 0 40px;
  max-width: 440px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
}

.kontakt__adresse {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.kontakt__bezeichnung {
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--leise);
}

.kontakt__link {
  font-family: var(--titelschrift);
  font-size: 30px;
  color: var(--navy);
  text-decoration: none;
}

.kontakt__link--mail {
  font-size: clamp(22px, 2.2vw, 30px);
  word-break: break-word;
}

.kontakt__text {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
}

.formular {
  background: var(--weiss);
  border: 1px solid var(--linie);
  padding: clamp(24px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.feld {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.feld-reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 22px;
}

.feld__name {
  font-size: 14px;
  font-weight: 600;
}

/* Wie im Entwurf: die Auswahlfelder ohne eigenes box-sizing (der Browser
   rechnet sie ohnehin border-box), Eingaben und Textfeld ausdruecklich. */
.feld__wahl,
.feld__eingabe,
.feld__text {
  font-family: inherit;
  font-size: 16px;
  padding: 14px 12px;
  border: 1px solid var(--feld);
  border-radius: 0;
  background: var(--weiss);
  color: var(--navy);
}

.feld__wahl,
.feld__eingabe { min-height: 50px; }

.feld__eingabe,
.feld__text { box-sizing: border-box; }

.feld__text {
  line-height: 1.5;
  resize: vertical;
}

/* Abweichung 13. */
.feld__eingabe::placeholder,
.feld__text::placeholder {
  color: var(--leise);
  opacity: 1;
}

.einwilligung {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  cursor: pointer;
}

.einwilligung input {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--navy);
}

.einwilligung a {
  color: var(--blau);
  font-weight: 600;
}

/* Abweichung 8: margin-bottom steht fuer den Abstand vor der Statuszeile,
   die im Entwurf leer hinter dem Knopf stand. */
.formular__knopf {
  align-self: flex-start;
  font-family: inherit;
  border: none;
  min-height: 56px;
  margin-bottom: 22px;
  cursor: pointer;
}


/* ── Fuss ────────────────────────────────────────────────────────────────── */

.fuss {
  background: var(--fuss);
  color: var(--t-text);
  padding: 64px 0 calc(40px + var(--leiste));
}

.fuss__innen {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.fuss__oben {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
}

.fuss__logo {
  height: 90px;
  width: auto;
  display: block;
}

/* Abweichung 9: min-width. Der Browser rechnet dieses Raster mindestens drei
   Spalten breit (3 x 200 px + 2 x 32 px = 664 px); schmaler als die Zeile
   darf es damit nicht werden. Ab 738 px Fensterbreite aendert das nichts. */
.fuss__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px;
  flex: 1;
  max-width: 760px;
  min-width: min(100%, 664px);
}

.fuss__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
}

.fuss__text a { color: var(--t-text); }

.fuss__mail { word-break: break-word; }

.fuss__recht {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 15px;
}

.fuss__recht a {
  color: var(--weiss);
  font-weight: 600;
}

.fuss__copy {
  margin: 0;
  padding-top: 28px;
  border-top: 1px solid var(--fuss-linie);
  font-size: 13px;
  color: var(--fuss-copy);
}

/* Abweichung 12: auf #17222E waere der Ring zu schwach. */
.fuss :focus-visible { outline-color: var(--grund); }


/* ── Anrufleiste · unter 1080 px fest am unteren Rand ────────────────────── */

.anrufleiste {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--grund);
  border-top: 1px solid var(--linie);
}

.anruf {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
}

.anruf--angebot {
  color: var(--grund);
  background: var(--navy);
}

/* Abweichung 12: der Ring liegt hier innen. */
.anruf:focus-visible { outline-offset: -4px; }
.anruf--angebot:focus-visible { outline-color: var(--grund); }


/* ── Rechtlicher Hinweis am Seitenende (V17) ─────────────────────────────── */

.rechtliches {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 28px var(--rand) calc(40px + var(--leiste));
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
  scroll-margin-top: calc(var(--notice) + var(--kopf));
}

.rechtliches h2 {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
}

.rechtliches p {
  margin: 0;
  max-width: 64ch;
}


/* ── Breiten · dieselben Grenzen wie im Skript des Entwurfs ──────────────── */

@media (min-width: 760px) {
  .hero__bild { object-position: 100% 50%; }

  .hero__schleier {
    background: linear-gradient(90deg, rgba(244, 242, 238, 0.95) 0%, rgba(244, 242, 238, 0.9) 52%, rgba(244, 242, 238, 0.45) 72%, rgba(244, 242, 238, 0) 88%);
  }
}

@media (min-width: 1080px) {
  .kopf__nav { display: flex; }
  .menue { display: none; }

  .hero__inhalt { padding-bottom: 90px; }
  .fuss { padding-bottom: 40px; }
  .anrufleiste { display: none; }
  .rechtliches { padding-bottom: 40px; }
}

@media (min-width: 1280px) {
  .hero__bild { object-position: 75% 50%; }

  .hero__schleier {
    background: linear-gradient(90deg, rgba(244, 242, 238, 0.94) 0%, rgba(244, 242, 238, 0.86) 38%, rgba(244, 242, 238, 0.3) 58%, rgba(244, 242, 238, 0) 72%);
  }
}


/* ── Einblenden: genau ein Effekt je Abschnitt (Abweichung 14) ───────────── */
/* Der Ausgangszustand haengt an `.has-reveal`, und die Klasse setzt allein
   `js/reveal.js`. Ohne Javascript ist deshalb nichts versteckt. */

.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;
}


/* ── Weniger Bewegung: abschalten, nicht verkuerzen ─────────────────────── */
/* Die ersten beiden Regeln stehen so im Entwurf. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  * { transition: none !important; }

  .has-reveal [data-reveal],
  .has-reveal [data-reveal].is-in {
    opacity: 1;
    transform: none;
  }
}