/* ============================================================================
   REPARATURSERVICE MUELLER — Reparaturen rund um Ihr Zuhause in Hamburg
   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 "Mueller Website.dc.html"
   (Projekt 575df468-3212-4c27-a30d-e0c486465a21), Uebernahme am 30.10.2026
   nach `docs/regeln/vorlagen.md` und den Entscheidungen von Benedikt vom
   30.10.2026: Aufbau, Reihenfolge, Texte, Farben, Schriften, Groessen,
   Abstaende, Rundungen und Bildzuschnitte wie im Entwurf; Schriften 1:1;
   Kontaktdaten wie im Entwurf; Logo als Bild; Bewegung ruhig. Die Sicherung
   liegt Base64-verschluesselt vor; gelesen wurde die entschluesselte Fassung,
   byte-gleich gegengeprueft.

   Der Entwurf laedt Source Sans 3 (400, 600, 700) von Google Fonts und die
   Laufzeit `support.js`. Er traegt Hover-Angaben der Claude-Design-Umgebung
   an elf Knoten und eine Fokus-Angabe am Sprungverweis, zwanzig
   Bedingungsbloecke sc-if, neun Schleifen sc-for, siebzehn `onClick`, dazu
   `onSubmit`, `onChange` und `ref` und eine `DCLogic`-Klasse mit
   Seitenzustand (fuenf Seitenarten, zwoelf Ansichten), Breitenmessung
   (`w < 1000`), Menue- und Formularzustand. Nichts davon laeuft ohne die
   Claude-Design-Umgebung (V1).

   So ist uebersetzt: Die globalen Regeln des Entwurfs (helmet-Stil) stehen
   unten unter "Grundlage" fast woertlich. Im Entwurf gewinnt immer der
   Inline-Stil; zwei Stellen brauchen deshalb Sorgfalt:
     - `a:hover` faerbt nur Verweise ohne eigene Farbe. Wo der Entwurf eine
       Farbe inline setzt und keine Hover-Angabe hat (Sprungverweis, Telefon
       im Kopf, Anrufknopf und Menue auf dem Handy) oder beim Darueberfahren
       nur den Grund aendert, haelt hier ein eigenes `:hover` die Farbe.
     - Die runde Ecke 4 px aus `:focus-visible` traf im Entwurf nur Elemente
       ohne eigene Rundung. Die Regel steht deshalb in `:where()`, damit jede
       Rundung eines Bausteins (8 px) gewinnt wie dort der Inline-Stil.
   Die beiden Rahmen-Elemente des Entwurfs (#E9ECE8 aussen, Breite aus dem
   Vorschau-Schalter innen) gehoeren zur Vorschau von Claude Design. Bei der
   Einstellung "auto" ist der innere Rahmen 100 % breit und das Grau nie zu
   sehen; Schrift, Farbe und `overflow-x` des inneren Rahmens stehen an body.
   Die Raster brechen wie im Entwurf ohne Media Query ueber
   `repeat(auto-fit | auto-fill, minmax(min(100%, X), 1fr))` um.

   ABWEICHUNGEN VOM ENTWURF, JEDE MIT GRUND
   ----------------------------------------
    1. LAUFZEIT ENTFERNT (V1, V6). x-dc, helmet, die Bedingungsbloecke, die
       Platzhalter in doppelten geschweiften Klammern, die Hover- und
       Fokus-Angaben, `onClick`/`onChange`/`onSubmit`/`ref`, `DCLogic`,
       `support.js` und das Werkzeug-Skript von Claude Design sind weg. Die
       Schleifen sind ausgeschrieben (Menue zweimal, acht Leistungen auf der
       Startseite, in der Uebersicht, auf acht eigenen Seiten und im Fuss),
       Inline-Stile sind Klassen mit den Werten aus `:root`, die
       Hover-Angaben sind `:hover`, die Fokus-Angabe ist `:focus`.
    2. ANSICHTEN UEBER SPRUNGMARKEN STATT SEITENZUSTAND (V8). Alle zwoelf
       Ansichten stehen in index.html, sichtbar ist genau eine. Zwoelf leere
       Marken ganz oben im body (die Sprungziele des Entwurfs, etwa #kontakt)
       schalten ueber `:target` und Geschwister-Selektoren die Ansicht, den
       Balken unter dem Menuepunkt (eine einzelne Leistung zaehlt wie im
       Entwurf zu "Leistungen") und den Abschlussblock (nicht unter
       Kontakt). Weil die Marken bei y = 0 stehen, springt der Browser beim
       Wechsel an den Seitenanfang wie der Entwurf. Zurueck-Taste und tiefe
       Verweise funktionieren, mit und ohne Skript. Ohne Skript fuehrt
       "Zum Inhalt springen" auf einer Unterseite zur Startseite.
    3. KLEINES SKRIPT FUER DAS, WAS CSS NICHT KANN (V8). js/seite.js setzt
       den Reitertitel je Ansicht (TITLES des Entwurfs, auch mit
       umgebrandetem Namen), `aria-current` an beiden Menues ("page" /
       "false" wie im Entwurf), den Fokus auf die Ueberschrift der neuen
       Ansicht (afterNav) bzw. auf "Wobei kann ich Ihnen helfen?"
       (goLeistungenAnchor), haelt beim Sprungverweis die Ansicht, klappt das
       Handy-Menue nach einem Sprung zu und gibt "Menue schliessen" frei.
       Es liest keine Scroll-Position und faengt kein Absenden ab.
       Zusammen mit js/reveal.js 3,4 von 8 KB gzip.
    4. EIN KOPF STATT ZWEI, HANDY-MENUE ALS <details> (V8, V12). Der Entwurf
       rendert je nach Breite einen von zwei Koepfen; hier ist es einer mit
       einem Logo, die Teile schaltet die Media Query bei 1000 px. Das
       Handy-Menue ist <details>/<summary>; "aufgeklappt" meldet der Browser
       selbst, "Menue"/"Schliessen" tauschen zwei span. Der Knopf sitzt
       absolut an der Stelle des Entwurfs (oben rechts, Zeile 52 px). Der
       Anrufknopf steht im Markup hinter dem Menue und rueckt mit `order`
       dazwischen: geschlossen bleibt die Tab-Reihenfolge Logo, Menue,
       Anrufen wie im Entwurf; geoeffnet folgen die Menuepunkte direkt auf
       den Knopf und kommen vor "Anrufen" (im Entwurf danach), weil der
       Inhalt eines <details> im Markup hinter seinem Knopf stehen muss.
       So schiebt das offene Menue den Inhalt nach unten wie im Entwurf.
       "Menue schliessen" gibt es nur mit Skript; ohne taete der Knopf
       nichts (V12), zugeklappt wird dann ueber den Knopf oben.
    5. UMBRUCH BEI 1000 px ALS MEDIA QUERY (Entscheidung 1, V5). Der Entwurf
       misst die Breite ohne Rollbalken. Mit klassischem Rollbalken
       (Windows, 15-17 px) schaltet er erst bei 1015-1017 px Fensterbreite,
       die Media Query bei 1000 px. Ohne Rollbalken (Handy, macOS)
       identisch. Andere Grenzen schaltet der Entwurf nicht.
    6. SCHRIFT SELBST AUSGELIEFERT (V3, V4, Entscheidung 2). Genau die
       Familie und die Schnitte des Entwurfs: Source Sans 3 400, 600 und 700
       als eine variable latin-Datei (Achse 200-900, freigegeben 400-700),
       28 872 B, Budget 120 KB, mit demselben `unicode-range` wie bei Google.
       Kein preconnect, kein Stylesheet von Google. Keine Kursive im Entwurf.
       Die Pfeile → und ← (U+2192, U+2190) liegen in keiner Google-Teilmenge
       der Schrift; der Browser nimmt sie im Entwurf wie hier aus
       `system-ui`. Sie bleiben deshalb Zeichen, wie im Entwurf.
    7. VERMERK-LEISTE UND UMBRANDUNG (A17, V14, V19). Die feste Leiste ist
       26 px hoch (--notice). Seitengrund und Kopf beginnen 26 px tiefer,
       der Sprungverweis steht bei 26 + 8 statt 8 px, und #leistungen,
       #inhalt und #rechtliches halten 26 px Abstand nach oben, damit ihr
       Anfang nicht unter der Leiste liegt.
    8. SPERRHINWEIS (V14). `noindex, nofollow`; Seitenbeschreibung und
       og:description enden auf "Fiktives Beispielprojekt."
    9. OG-ANGABEN UND SYMBOL IM REITER ERGAENZT. Der Entwurf hat keine
       og-Angaben; sie sind woertlich aus Titel und Beschreibung gebildet,
       og:image zeigt auf das lokale Titelbild. Ohne Symbol fragt der
       Browser /favicon.ico an der Wurzel ab, und die App liefert dort
       nichts (404 auf dem Entwicklungsserver). Es steht deshalb wie in den
       anderen Vorlagen als data:-Adresse im Kopf (V3): eine Flaeche in
       --gruen ohne Buchstaben, damit die Umbrandung nichts Fremdes stehen
       laesst.
   10. BILDER (V3, V18, Entscheidung 6). Dieselben Dateien unter img/ statt
       assets/img/ und assets/, unveraendert (keins breiter als 1920 px).
       Genau ein Bild vorgeladen, das Titelbild; es steht ohne
       `loading="lazy"` (im Entwurf mit) und mit `fetchpriority="high"`. Alle
       anderen Inhaltsbilder lazy und `decoding="async"`, das Logo im Fuss
       ebenso; das Logo im Kopf nur async, es steht ueber der Falz.
   11. FORMULAR SENDET NICHTS (V12). Pruefung, die fuenf Fehlermeldungen
       und der Statuskasten ("Dies ist eine Vorschau. Ihre Nachricht wurde
       nicht versendet.") sind weg, ebenso `aria-invalid` und
       `aria-describedby`, die auf diese Meldungen zeigten, und der rote
       Feldrand #A3261E. Der Knopf ist type="button", das Formular hat kein
       Ziel, nichts faengt ein Absenden ab.
   12. FOKUSRING IM ABSCHLUSSBLOCK (V9, Nicht-Text). Der Ring des Entwurfs
       (#234C42) liegt dort auf #234C42 und ist unsichtbar (1,00 : 1).
       Im Abschlussblock ist er --grund #FAFAF7: 9,20 : 1.
   13. PLATZHALTER IN DEN FELDERN (V9). Der Entwurf setzt keine Farbe; die
       Browser zeigen ihn hellgrau, Safari #A9A9A9 mit 2,35 : 1, Firefox
       etwa #898B8A mit 3,43 : 1. Hier --feld #6B7570, deckend, die Farbe
       des Feldrands aus dem Entwurf: 4,77 : 1 auf #FFFFFF (in Chrome kaum
       vom Standard #757575 zu unterscheiden).
   14. EINDEUTIGE IDS AUF DEN LEISTUNGSSEITEN. Der Entwurf hat immer nur eine
       Leistungsseite im Dokument (h-detail, h-anliegen, h-umfang,
       h-grenzen). Hier stehen acht nebeneinander; jede id traegt die
       Kennung der Leistung dahinter (h-detail-fenster ...).
   15. EINBLENDEN ERGAENZT (V7, Entscheidung 5). Der Entwurf blendet nichts
       ein. Einmal (400 ms, 12 px) erscheinen auf der Startseite das
       Leistungsband, "Ihr Ansprechpartner" und "So besprechen wir ...", auf
       den Leistungsseiten der untere Block, im Kontakt das Formular und der
       Abschlussblock. Nie der erste Abschnitt einer Ansicht: das
       LCP-Element steht im ersten Frame. Ohne Skript und bei "Bewegung
       reduzieren" ist alles sofort da. Uebergaenge gibt es sonst keine,
       auch keine weiche Bildlauf-Bewegung, wie im Entwurf.
   16. "LEISTUNGEN ANSEHEN" SPRINGT SELBST. Der Entwurf verhinderte den
       Sprung und scrollte per Skript zum Abschnitt. Hier springt der
       Browser nach #leistungen (26 px unter der Leiste, siehe 7), die
       Startseite bleibt stehen, und die Adresse traegt #leistungen; die
       Zurueck-Taste fuehrt an den Seitenanfang.
   17. ABSCHNITT #rechtliches AM ENDE (V17, wie in jeder Vorlage). Impressum
       und Datenschutz im Fuss und im Formular zeigen wie im Entwurf auf
       eineuroweb.de (Entscheidung 7) und fuehren damit nicht ins Leere;
       die Impressum-Adresse mit Schraegstrich am Ende wie im Entwurf.
   18. KONTAKTDATEN WIE IM ENTWURF (Entscheidung 3, bewusst abweichend von
       V10): Eppendorfer Weg 412, 20259 Hamburg, 040 123456789,
       reparatur-mueller@eineuroweb.de. Benedikt hat sie geprueft.
       Oeffnungszeiten oder eine Anzeige "geoeffnet" hat der Entwurf nicht.
   19. ZUSAETZLICH AUS DEM MUSTER salon-kammrath: <html lang="de"> (der
       Entwurf hat kein lang) und die Regel fuer [hidden].

   KONTRASTE — GERECHNET, NICHT GESCHAETZT (V9)
   --------------------------------------------
   WCAG-2.1-Relativluminanz, sRGB. Alle Textfarben des Entwurfs bestehen.

     --tinte #242827      auf --grund #FAFAF7 ......... 14,26 : 1   OK
     --tinte              auf --hell #EDF2EE .......... 13,17 : 1   OK
     --tinte              auf --weiss #FFFFFF ......... 14,92 : 1   OK
     --gruen #234C42      auf --grund .................  9,20 : 1   OK
     --gruen              auf --hell ..................  8,49 : 1   OK
     --gruen              auf --weiss .................  9,62 : 1   OK
     --gruen-tief #16332B auf --grund ................. 13,02 : 1   OK
     --gruen-tief         auf --hell .................. 12,02 : 1   OK
     --leise #4A524F      auf --grund .................  7,69 : 1   OK
     --leise              auf --hell ..................  7,10 : 1   OK
     --weiss              auf --gruen .................  9,62 : 1   OK
     --weiss              auf --gruen-tief ............ 13,61 : 1   OK
     --feld #6B7570       auf --weiss (Platzhalter) ...  4,77 : 1   OK
   > Wo was steht: --tinte ist Text, Ueberschrift, Menue, Eingabe; --gruen
   > Verweis, Vorzeile, Nummer, Telefon im Kopf, Rand-Knopf, Mail-Kasten,
   > Abschluss-Telefonknopf (auf --grund); --gruen-tief jeder Verweis beim
   > Darueberfahren und der Abschluss-Telefonknopf beim Darueberfahren (auf
   > --hell); --leise gedaempfter Text auf --grund und im Leistungsband bzw.
   > im Anschrift-Kasten auf --hell; --weiss alle vollen Knoepfe, der
   > Telefon-Kasten, der Abschlussblock, die Ziffern 1-3 und der
   > Sprungverweis, auf --gruen und beim Darueberfahren auf --gruen-tief.

   BILDER. Kein Text liegt auf einem Foto: Jedes Bild steht in einem eigenen
   Kasten neben oder ueber dem Text, es gibt keinen Schleier und keine
   Schrift im Bild. Das Logo ist ein Bild mit fast weissem, deckendem Grund;
   `mix-blend-mode: multiply` (wie im Entwurf) laesst diesen Grund auf
   --grund verschwinden. Sein Name steht im alt-Text.

   NICHT-TEXT. Fokusring --gruen auf --grund 9,20, auf --hell 8,49, im
   Abschlussblock --grund auf --gruen 9,20 (Abweichung 12). Feldrand --feld
   auf --weiss 4,77, gegen --grund 4,56; Rand des Menue-Knopfs --tinte
   14,26; Menuebalken --gruen 9,20 — alles ueber 3 : 1. Die Linien
   --linie #D4DDD6 (1,33) und --linie-liste #B9C6BC (1,56) sind Schmuck,
   keine Bedienelemente.
   ========================================================================= */


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

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 700;          /* Datei traegt wght 200-900, freigegeben 400-700 */
  font-display: swap;
  src: url("../vendor/fonts/source-sans-3-400-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ── Tokens · jeder Wert aus dem Entwurf ─────────────────────────────────── */

:root {
  --grund: #FAFAF7;        /* Seitengrund, Kopf, Fuss, Menue-Knopf, Abschluss-Telefonknopf */
  --hell: #EDF2EE;         /* Leistungsband, Bildkaesten, Anschrift, "Gut zu wissen", Hover-Grund */
  --tinte: #242827;        /* Text, Ueberschriften, Menue, Eingaben */
  --leise: #4A524F;        /* gedaempfter Text */
  --gruen: #234C42;        /* Verweise, Vorzeilen, Knoepfe, Nummern, Fokusring, Abschluss */
  --gruen-tief: #16332B;   /* Darueberfahren */
  --weiss: #FFFFFF;        /* Text auf Gruen, Grund der Eingabefelder */
  --linie: #D4DDD6;        /* Linien und Rahmen */
  --linie-liste: #B9C6BC;  /* Linie ueber jedem Eintrag der Leistungsliste */
  --feld: #6B7570;         /* Rand der Eingabefelder, Platzhalter */

  --schrift: "Source Sans 3", system-ui, sans-serif;

  --breite: 1200px;
  --rand: clamp(16px, 4vw, 32px);
  --abschnitt: clamp(48px, 6vw, 88px);
  --h1: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  --h2: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  --notice: 26px;          /* feste Hinweisleiste aus A17 */
}


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

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding-top: var(--notice);
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: 1.1875rem;
  line-height: 1.6;
  overflow-x: hidden;
}

* { box-sizing: border-box; }

a {
  color: var(--gruen);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

a:hover { color: var(--gruen-tief); }

:where(:focus-visible) {
  outline: 3px solid var(--gruen);
  outline-offset: 3px;
  border-radius: 4px;
}

input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--gruen);
  outline-offset: 2px;
}

h1, h2, h3 { text-wrap: balance; }

p, li { text-wrap: pretty; }

[hidden] { display: none !important; }

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


/* ── Ansichten · umgeschaltet ueber die Sprungmarken (Abweichung 2) ──────── */

.anker {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.ansicht { display: none; }

.ansicht[data-ansicht="start"] { display: block; }

.anker:not(#start):target ~ main .ansicht[data-ansicht="start"] { display: none; }

#alle-leistungen:target ~ main [data-ansicht="alle-leistungen"],
#fenster-tuerreparatur:target ~ main [data-ansicht="fenster-tuerreparatur"],
#silikonfugen:target ~ main [data-ansicht="silikonfugen"],
#verlegen-von-klickboeden:target ~ main [data-ansicht="verlegen-von-klickboeden"],
#innentueren-montage:target ~ main [data-ansicht="innentueren-montage"],
#insektenschutz-systeme:target ~ main [data-ansicht="insektenschutz-systeme"],
#fenstersichtschutz:target ~ main [data-ansicht="fenstersichtschutz"],
#mechanischer-einbruchschutz:target ~ main [data-ansicht="mechanischer-einbruchschutz"],
#holz-glasmoebelreparatur:target ~ main [data-ansicht="holz-glasmoebelreparatur"],
#ueber-mich:target ~ main [data-ansicht="ueber-mich"],
#kontakt:target ~ main [data-ansicht="kontakt"] { display: block; }

/* Kein Abschlussblock unter Kontakt (showCta im Entwurf). */
#kontakt:target ~ main .cta { display: none; }


/* ── Sprungverweis ───────────────────────────────────────────────────────── */

.skip {
  position: absolute;
  top: calc(var(--notice) + 8px);
  left: -9999px;
  z-index: 10;
  padding: 12px 20px;
  border-radius: 8px;
  background: var(--gruen);
  color: var(--weiss);
  font-weight: 600;
}

.skip:hover { color: var(--weiss); }

.skip:focus { left: 8px; }


/* ── Kopf · Handy ist der Ausgangszustand, ab 1000 px siehe unten ───────── */

.kopf {
  border-bottom: 1px solid var(--linie);
  background: var(--grund);
}

.kopf__innen {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 14px 16px 16px;
}

/* Die Zeile mit Logo und Menue-Knopf ist im Entwurf 52 px hoch, das Logo
   44 px und senkrecht mittig: 4 px Rand oben und unten. */
.kopf__logo {
  display: flex;
  align-self: flex-start;
  margin: 4px 0;
  text-decoration: none;
}

.kopf__logo img,
.fuss__logo {
  display: block;
  width: auto;
  height: 44px;
  mix-blend-mode: multiply;
}

.kopf__nav,
.kopf__tel { display: none; }

.kopf__nav ul {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kopf__nav a {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0 16px;
  border-bottom: 3px solid transparent;
  color: var(--tinte);
  font-size: 1.1875rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.kopf__nav a:hover { color: var(--gruen); }

/* Balken unter dem Menuepunkt der Ansicht; eine einzelne Leistung zaehlt zu
   "Leistungen" (navActive im Entwurf). */
.kopf__nav a[href="#start"] { border-bottom-color: var(--gruen); }

.anker:not(#start):target ~ header .kopf__nav a[href="#start"] { border-bottom-color: transparent; }

#alle-leistungen:target ~ header .kopf__nav a[href="#alle-leistungen"],
#fenster-tuerreparatur:target ~ header .kopf__nav a[href="#alle-leistungen"],
#silikonfugen:target ~ header .kopf__nav a[href="#alle-leistungen"],
#verlegen-von-klickboeden:target ~ header .kopf__nav a[href="#alle-leistungen"],
#innentueren-montage:target ~ header .kopf__nav a[href="#alle-leistungen"],
#insektenschutz-systeme:target ~ header .kopf__nav a[href="#alle-leistungen"],
#fenstersichtschutz:target ~ header .kopf__nav a[href="#alle-leistungen"],
#mechanischer-einbruchschutz:target ~ header .kopf__nav a[href="#alle-leistungen"],
#holz-glasmoebelreparatur:target ~ header .kopf__nav a[href="#alle-leistungen"],
#ueber-mich:target ~ header .kopf__nav a[href="#ueber-mich"],
#kontakt:target ~ header .kopf__nav a[href="#kontakt"] { border-bottom-color: var(--gruen); }

.kopf__tel,
.kopf__tel:hover { color: var(--tinte); }

.kopf__tel-hinweis {
  color: var(--leise);
  font-size: 1rem;
}

.kopf__tel-nummer {
  color: var(--gruen);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* Steht im Markup hinter dem Menue, sitzt aber wie im Entwurf darueber
   (Abweichung 4). */
.kopf__anrufen {
  order: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  margin-top: 14px;
  padding: 0 20px;
  border-radius: 8px;
  background: var(--gruen);
  color: var(--weiss);
  font-size: 1.1875rem;
  font-weight: 700;
  text-decoration: none;
}

.kopf__anrufen:hover { color: var(--weiss); }

.menue { order: 3; }

.menue__knopf {
  position: absolute;
  top: 14px;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  min-height: 52px;
  padding: 0 18px;
  border: 2px solid var(--tinte);
  border-radius: 8px;
  background: var(--grund);
  color: var(--tinte);
  font-size: 1.125rem;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.menue__knopf::-webkit-details-marker { display: none; }

.menue__auf { display: none; }

.menue[open] .menue__zu { display: none; }

.menue[open] .menue__auf { display: inline; }

.menue__nav {
  margin-top: 14px;
  padding-top: 8px;
  border-top: 1px solid var(--linie);
}

.menue__nav ul {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menue__nav li { border-bottom: 1px solid var(--linie); }

.menue__nav a,
.menue__nav a:hover {
  display: flex;
  align-items: center;
  min-height: 60px;
  padding: 0 4px;
  color: var(--tinte);
  font-size: 1.3125rem;
  font-weight: 600;
  text-decoration: none;
}

.menue__schliessen {
  width: 100%;
  min-height: 52px;
  margin-top: 16px;
  border: 2px solid var(--tinte);
  border-radius: 8px;
  background: var(--grund);
  color: var(--tinte);
  font: inherit;
  font-size: 1.125rem;
  font-weight: 600;
  cursor: pointer;
}


/* ── Bausteine ───────────────────────────────────────────────────────────── */

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

.titel-1 {
  margin: 0;
  font-size: var(--h1);
  line-height: 1.1;
}

.titel-2 {
  margin: 0;
  font-size: var(--h2);
  line-height: 1.15;
}

.bildkasten {
  position: relative;
  display: block;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--linie);
  border-radius: 8px;
  background: var(--hell);
}

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

.bildkasten--hoch { aspect-ratio: 4 / 5; }

.bildkasten .bildkasten__oben { object-position: 50% 20%; }

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  text-decoration: none;
}

.knopf--voll {
  background: var(--gruen);
  color: var(--weiss);
  font-weight: 700;
}

.knopf--voll:hover {
  background: var(--gruen-tief);
  color: var(--weiss);
}

.knopf--rand {
  border: 2px solid var(--gruen);
  color: var(--gruen);
  font-weight: 600;
}

.knopf--rand:hover {
  background: var(--hell);
  color: var(--gruen);
}

/* Verweise ohne eigene Farbe: Unterstrich und Farbe aus `a`, beim
   Darueberfahren --gruen-tief wie im Entwurf. */
.textlink {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-weight: 600;
}


/* ── Startseite · Kopfbereich ────────────────────────────────────────────── */

.start {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  padding-top: clamp(32px, 6vw, 80px);
  padding-bottom: var(--abschnitt);
}

.start__text {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 600px;
}

.start__zeile {
  margin: 0;
  color: var(--gruen);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.start__titel {
  font-weight: 700;
  letter-spacing: -0.01em;
}

.start__vorspann {
  max-width: 34em;
  margin: 0;
  font-size: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
  line-height: 1.55;
}

.start__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 8px;
}

.start__knoepfe .knopf {
  min-height: 60px;
  padding: 0 28px;
  font-size: 1.25rem;
}

.start__knoepfe .knopf--voll {
  flex: 1 1 auto;
  max-width: 100%;
}

.start__knoepfe .knopf--rand { flex: 0 1 auto; }

.start__hinweis {
  margin: 0;
  color: var(--leise);
  font-size: 1.125rem;
}


/* ── Startseite · Wobei kann ich Ihnen helfen? ───────────────────────────── */

.leistungen {
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  background: var(--hell);
  scroll-margin-top: var(--notice);
}

.leistungen__innen { padding-block: var(--abschnitt); }

.leistungen__kopf {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px 32px;
  margin-bottom: clamp(28px, 4vw, 44px);
}

.leistungen__einleitung { max-width: 640px; }

.leistungen__titel { margin-bottom: 12px; }

.leistungen__unterzeile {
  margin: 0;
  color: var(--leise);
}

.leistungen__alle { font-size: 1.1875rem; }

.liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  column-gap: clamp(32px, 5vw, 64px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.liste__eintrag {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 18px;
  padding: 24px 0 28px;
  border-top: 1px solid var(--linie-liste);
}

.liste__nr {
  min-width: 1.6em;
  padding-top: 2px;
  color: var(--gruen);
  font-size: 1.125rem;
  font-weight: 700;
}

.liste__text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.liste__frage {
  margin: 0;
  color: var(--leise);
  font-size: 1.125rem;
}

.liste__titel {
  margin: 0;
  font-size: 1.4375rem;
  line-height: 1.25;
}

.liste__kurz {
  max-width: 34em;
  margin: 0;
}

.liste__link {
  align-self: flex-start;
  margin-top: 6px;
}


/* ── Startseite · Ihr Ansprechpartner ────────────────────────────────────── */

.person {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding-block: clamp(48px, 6vw, 96px);
}

.person__text {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 600px;
}

.person__text p { margin: 0; }

.person__link { align-self: flex-start; }


/* ── Startseite · So besprechen wir Ihre Reparatur ───────────────────────── */

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

.ablauf__innen { padding-block: var(--abschnitt); }

.ablauf__titel { margin-bottom: clamp(28px, 4vw, 44px); }

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

.ablauf__schritt {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.ablauf__zahl {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--gruen);
  color: var(--weiss);
  font-size: 1.375rem;
  font-weight: 700;
}

.ablauf__satz {
  margin: 10px 0 0;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
}


/* ── Alle Leistungen im Ueberblick ───────────────────────────────────────── */

.uebersicht {
  padding-top: clamp(32px, 5vw, 72px);
  padding-bottom: var(--abschnitt);
}

.uebersicht__titel { margin-bottom: 16px; }

.uebersicht__vorspann {
  max-width: 38em;
  margin: 0 0 clamp(32px, 4vw, 48px);
  font-size: 1.25rem;
}

.uebersicht__tel {
  font-weight: 700;
  white-space: nowrap;
}

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

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

.karte__text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.karte__frage {
  margin: 0;
  color: var(--leise);
  font-size: 1.0625rem;
}

.karte__titel {
  margin: 0;
  font-size: 1.4375rem;
  line-height: 1.25;
}

.karte__kurz { margin: 0; }

.karte__link { align-self: flex-start; }


/* ── Eine Leistung ───────────────────────────────────────────────────────── */

.detail {
  padding-top: clamp(24px, 4vw, 48px);
  padding-bottom: var(--abschnitt);
}

.detail__zurueck { margin-bottom: clamp(16px, 3vw, 32px); }

.detail__oben {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

.detail__text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 620px;
}

.detail__frage {
  margin: 0;
  color: var(--gruen);
  font-size: 1.1875rem;
  font-weight: 600;
}

.detail__einleitung {
  margin: 0;
  font-size: 1.25rem;
}

.detail__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 4px;
}

.detail__knoepfe .knopf {
  min-height: 56px;
  padding: 0 24px;
  font-size: 1.1875rem;
}

.detail__unten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(32px, 4vw, 56px);
  margin-top: clamp(40px, 5vw, 72px);
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--linie);
}

.detail__h2 {
  margin: 0 0 16px;
  font-size: 1.625rem;
  line-height: 1.2;
}

.anliegen {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.anliegen li {
  display: flex;
  gap: 12px;
  align-items: baseline;
}

.anliegen__punkt {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--gruen);
  transform: translateY(-3px);
}

.umfang {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
}

.umfang dt { font-weight: 700; }

.umfang dd { margin: 2px 0 0; }

.grenzen {
  align-self: start;
  padding: 24px;
  border-radius: 8px;
  background: var(--hell);
}

.grenzen__titel {
  margin: 0 0 12px;
  font-size: 1.625rem;
  line-height: 1.2;
}

.grenzen__liste {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding-left: 1.1em;
}


/* ── Ueber mich ──────────────────────────────────────────────────────────── */

.ueber {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  padding-top: clamp(32px, 5vw, 72px);
  padding-bottom: var(--abschnitt);
}

.ueber__text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 620px;
}

.ueber__text p { margin: 0; }

.ueber__vorspann { font-size: 1.3125rem; }

.ueber__h2 {
  margin: 12px 0 0;
  font-size: 1.625rem;
  line-height: 1.2;
}

.ueber__gruss { font-weight: 600; }


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

.kontakt {
  padding-top: clamp(32px, 5vw, 72px);
  padding-bottom: var(--abschnitt);
}

.kontakt__titel { margin-bottom: 16px; }

.kontakt__vorspann {
  max-width: 36em;
  margin: 0 0 32px;
  font-size: 1.3125rem;
}

.kontakt__kaesten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 16px;
}

.kasten {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 24px;
  border-radius: 8px;
  text-decoration: none;
}

.kasten--tel {
  background: var(--gruen);
  color: var(--weiss);
}

.kasten--tel:hover {
  background: var(--gruen-tief);
  color: var(--weiss);
}

.kasten--mail {
  border: 2px solid var(--gruen);
  color: var(--gruen);
  overflow-wrap: anywhere;
}

.kasten--mail:hover {
  background: var(--hell);
  color: var(--gruen);
}

.kasten--anschrift { background: var(--hell); }

.kasten__name { font-size: 1.125rem; }

.kasten__name--tinte { color: var(--tinte); }

.kasten__name--leise { color: var(--leise); }

.kasten__nummer {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
  font-weight: 700;
}

.kasten__mail {
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  font-weight: 700;
}

.kasten__aktion {
  font-size: 1.125rem;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.kasten__anschrift { font-weight: 600; }

.formular {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 24px clamp(32px, 5vw, 72px);
  margin-top: clamp(48px, 6vw, 80px);
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--linie);
}

.formular__text { max-width: 440px; }

.formular__titel {
  margin: 0 0 12px;
  font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.125rem);
  line-height: 1.2;
}

.formular__bitte { margin: 0 0 12px; }

.formular__hinweis {
  margin: 0;
  color: var(--leise);
  font-size: 1.0625rem;
}

.nachricht {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 600px;
}

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

.feld__name { font-weight: 600; }

.feld__name--fett {
  font-size: 1.1875rem;
  font-weight: 700;
}

.feld__eingabe,
.feld__text {
  width: 100%;
  padding: 0 16px;
  border: 2px solid var(--feld);
  border-radius: 8px;
  background: var(--weiss);
  color: var(--tinte);
  font: inherit;
  font-size: 1.1875rem;
}

.feld__eingabe { min-height: 56px; }

.feld__text {
  min-height: 160px;
  padding: 14px 16px;
  line-height: 1.5;
  resize: vertical;
}

/* Abweichung 13: deckend und gerechnet statt Browser-Grau. */
.feld__eingabe::placeholder,
.feld__text::placeholder {
  color: var(--feld);
  opacity: 1;
}

.erreichbar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  border: 0;
}

.erreichbar__frage {
  margin-bottom: 4px;
  padding: 0;
  font-size: 1.1875rem;
  font-weight: 700;
}

.erreichbar__zusatz { font-weight: 400; }

.nachricht__knopf {
  align-self: flex-start;
  min-height: 58px;
  padding: 0 32px;
  border: 0;
  border-radius: 8px;
  background: var(--gruen);
  color: var(--weiss);
  font: inherit;
  font-size: 1.25rem;
  font-weight: 700;
  cursor: pointer;
}

.nachricht__knopf:hover { background: var(--gruen-tief); }


/* ── Abschluss · Was darf ich fuer Sie reparieren? ───────────────────────── */

.cta {
  background: var(--gruen);
  color: var(--weiss);
}

.cta__innen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 32px clamp(32px, 5vw, 72px);
  align-items: start;
  padding-block: var(--abschnitt);
}

.cta__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cta__titel {
  margin: 0;
  font-size: clamp(1.875rem, 1.4rem + 1.8vw, 2.75rem);
  line-height: 1.12;
}

.cta__satz {
  margin: 0;
  font-size: 1.25rem;
}

.cta__adresse {
  margin: 8px 0 0;
  font-size: 1.125rem;
}

.cta__wege {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cta__weg {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  border-radius: 8px;
  font-size: 1.1875rem;
  font-weight: 600;
  text-decoration: none;
}

.cta__weg--tel {
  min-height: 64px;
  padding: 0 24px;
  background: var(--grund);
  color: var(--gruen);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  font-weight: 700;
  text-align: center;
}

.cta__weg--tel:hover {
  background: var(--hell);
  color: var(--gruen-tief);
}

.cta__weg--mail {
  padding: 8px 20px;
  border: 2px solid var(--grund);
  color: var(--weiss);
  text-align: center;
  overflow-wrap: anywhere;
}

.cta__weg--nachricht {
  padding: 0 20px;
  border: 2px solid var(--grund);
  color: var(--weiss);
}

.cta__weg--mail:hover,
.cta__weg--nachricht:hover {
  background: var(--gruen-tief);
  color: var(--weiss);
}

/* Abweichung 12: Der Ring des Entwurfs laege hier Gruen auf Gruen. */
.cta :focus-visible { outline-color: var(--grund); }


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

.fuss {
  border-top: 1px solid var(--linie);
  background: var(--grund);
}

.fuss__oben {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 32px 48px;
  padding-top: clamp(40px, 5vw, 64px);
  padding-bottom: 32px;
}

.fuss__marke {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fuss__logo { align-self: flex-start; }

.fuss__adresse {
  margin: 0;
  font-size: 1.0625rem;
}

.fuss__titel {
  margin: 0 0 10px;
  font-size: 1.1875rem;
}

.fuss__liste {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  font-size: 1.0625rem;
  list-style: none;
}

.fuss__liste--kontakt { gap: 2px; }

.fuss__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.fuss__link--leistung { min-height: 40px; }

.fuss__link--mail { overflow-wrap: anywhere; }

.fuss__unten {
  padding-top: 16px;
  padding-bottom: 32px;
  border-top: 1px solid var(--linie);
  color: var(--leise);
  font-size: 1rem;
}


/* ── Rechtlicher Hinweis am Seitenende (Abweichung 17) ───────────────────── */

.rechtliches {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 24px var(--rand) 40px;
  border-top: 1px solid var(--linie);
  color: var(--leise);
  font-size: 1rem;
  scroll-margin-top: var(--notice);
}

.rechtliches h2 {
  margin: 0 0 6px;
  color: var(--tinte);
  font-size: 1.0625rem;
}

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


/* ── Breite · die eine Grenze aus dem Skript des Entwurfs (Abweichung 5) ── */

@media (min-width: 1000px) {
  .kopf__innen {
    flex-direction: row;
    align-items: center;
    gap: 24px;
    max-width: var(--breite);
    margin: 0 auto;
    padding: 18px 32px;
  }

  .kopf__logo {
    flex-shrink: 0;
    align-self: auto;
    margin: 0;
  }

  .kopf__logo img { height: 54px; }

  .kopf__nav {
    display: flex;
    flex: 1;
    justify-content: center;
  }

  .kopf__tel {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    align-items: flex-end;
    padding: 6px 0;
    line-height: 1.25;
    text-decoration: none;
  }

  .kopf__anrufen,
  .menue { display: none; }
}


/* ── Einblenden: genau ein Effekt je Abschnitt (Abweichung 15) ───────────── */
/* 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 erste Regel steht so im Entwurf. */

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    scroll-behavior: auto !important;
  }

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