/* Veranda Manufaktur – Gestaltung der Website (BRIEF.md, Version 2: Abendlicht unter Glas, „Abend als Rahmen“).
   Takt der Flächen (K65): dunkel am Anfang, in der Mitte und am Schluss, Sand und Weiß zum Lesen dazwischen.
   Anthrazit führt (Text, Profile, Flächen), Teal nur als Akzent: Hauptknopf, Dachlinie, Montage-Punkt.
   Teal auf Weiß hat 2,4 : 1 und ist deshalb nie Text- oder Fokusfarbe (K24). Nur hell, keine externen
   Ressourcen; Schriftpfade setzt tools/build_site.py ein. Schriftgrößen in rem, damit Text-Zoom wirkt (K25). */

@font-face { font-family: "Be Vietnam Pro"; src: url(/assets/bevietnampro-400.cc616772.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Be Vietnam Pro"; src: url(/assets/bevietnampro-500.b761127f.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Be Vietnam Pro"; src: url(/assets/bevietnampro-600.a29be4f1.woff2) format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --ink: #323637;        /* Text, Profile; 12,5 : 1 auf Weiß */
  --leise: #596164;      /* Nebentext; 6,5 : 1 auf Weiß, 5,4 : 1 auf --grund */
  --teal: #3FB5C1;       /* nur Flächen und Akzente; Anthrazit darauf 5,0 : 1 */
  --teal-hell: #5EC3CD;  /* Knopf beim Überfahren; Anthrazit darauf 5,9 : 1 */
  --weiss: #FFFFFF;
  --grund: #F1ECE4;      /* Sand: Ablauf, Über uns; Anthrazit 10,4 : 1, --leise 5,4 : 1, Teal nur Schmuck (2,1 : 1) */
  --linie: #DDE3E4;      /* Trennlinien, nur Schmuck */
  --rahmen: #6B7072;     /* Feld- und Wahlränder; 5,0 : 1 auf Weiß (K24: mindestens 3 : 1) */
  --nacht: #24282A;      /* dunkle Flächen: Band, Fuß, Symbolknöpfe, Beschriftung der Bilder */
  --nacht-text: #F1F4F4; /* 14,6 : 1 auf --nacht */
  --nacht-leise: #B9C1C3;/* 8,0 : 1 auf --nacht */
  --nacht-linie: #3A3F41;/* Trennlinien auf --nacht, nur Schmuck */
  --breite: 84rem;
  --rand: clamp(1.25rem, 5vw, 4.5rem);  /* gedeckelt, sonst wird die Textspalte bei breiten Fenstern schmaler */
  --schnell: 3.25rem;    /* Höhe der Knopfgruppe rechts unten */
  --schnell-abstand: 1rem; /* ihr Abstand zum rechten und unteren Rand */
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--weiss);
  color: var(--ink);
  font-family: "Be Vietnam Pro", system-ui, sans-serif;
  font-size: 100%;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body { margin: 0; font-size: 1.125rem; overflow-wrap: break-word; }

h1, h2, h3, h4 { font-weight: 400; line-height: 1.15; margin: 0; text-wrap: balance; letter-spacing: -0.015em; }
h1 { font-size: clamp(2.25rem, 1.3rem + 2.6vw, 3.4rem); line-height: 1.08; letter-spacing: -0.02em; }
h2 { font-size: clamp(2rem, 1.2rem + 2.4vw, 3.5rem); line-height: 1.05; letter-spacing: -0.025em; }
h3 { font-size: clamp(1.625rem, 1.3rem + 0.8vw, 2rem); }
p, ul, ol, address { margin: 0; }
address { font-style: normal; }
figure { margin: 0; }
img { max-width: 100%; }

a { color: inherit; text-decoration-thickness: .08em; text-underline-offset: .2em; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
/* print-color-adjust: Dunkle Flächen drucken ihren Grund mit, sonst stünde heller Text auf weißem Papier (K36) */
.dunkel { background: var(--nacht); color: var(--nacht-text); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.dunkel :focus-visible { outline-color: var(--nacht-text); }
/* Nebentext und Randknöpfe auf dunklen Flächen */
.dunkel .zeile, .dunkel .einleitung, .dunkel .kopf-zeit, .dunkel .versprechen, .dunkel .wann,
.dunkel .kontaktweg-art, .dunkel .kontaktweg-zeit { color: var(--nacht-leise); }
.dunkel .knopf.rand { color: var(--nacht-text); border-color: var(--nacht-text); }
.dunkel .knopf.rand:hover { background: #2F3436; }

.breite { max-width: var(--breite); margin: 0 auto; padding-left: var(--rand); padding-right: var(--rand); }
.text > * { max-width: 50rem; }  /* Textabschnitte bleiben links bündig mit den anderen */
.einleitung { color: var(--leise); max-width: 36em; }
.zeile { font-size: 1rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--leise); }

/* Sprunglink: erst sichtbar, wenn er den Fokus hat */
.sprunglink {
  position: absolute; left: var(--rand); top: -6rem; z-index: 20;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem;
  background: var(--weiss); color: var(--ink); font-weight: 600;
}
.sprunglink:focus { top: .5rem; }
.sprunglink:focus-visible { outline-color: var(--nacht-text); }  /* er liegt über dem dunklen Kopf */

/* Kopf: Logo, Navigation, Telefon mit Zeiten, WhatsApp, Hauptknopf */
.kopf { border-bottom: 1px solid var(--nacht-linie); }
.kopfzeile { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.75rem; padding-top: .75rem; padding-bottom: .75rem; }
.logo { display: inline-flex; align-items: center; min-height: 44px; }
.logo img { display: block; width: auto; height: 2.5rem; }
.hauptnav { order: 3; flex-basis: 100%; }
.nav { display: flex; flex-wrap: wrap; gap: 0 1rem; list-style: none; margin: 0; padding: 0; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 1rem; font-weight: 500; text-decoration: none; }
.nav a:hover { text-decoration: underline; }
.kopf-kontakt { display: none; align-items: center; gap: 0 .75rem; font-size: 1rem; white-space: nowrap; }
.kopf-kontakt a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; text-decoration: none; }
.kopf-kontakt a:hover { text-decoration: underline; }
.kopf-zeit { color: var(--leise); }
.kopfzeile .knopf { display: none; }

/* Unter 45rem stehen Anrufen und WhatsApp in der Leiste unten, ab 45rem im Kopf; die Navigation hat bis 75rem
   eine eigene Zeile, damit Telefon und WhatsApp auch auf Tablets ohne Scrollen sichtbar sind (K42) */
@media (min-width: 40rem) {
  .kopfzeile .knopf { display: inline-flex; margin-left: auto; }
}
@media (min-width: 45rem) {
  .kopf-kontakt { display: inline-flex; margin-left: auto; }
  .kopf-zeit { display: none; }
  .kopfzeile .knopf { margin-left: 0; }
}
@media (min-width: 60rem) {
  .logo img { height: 3rem; }
}
@media (min-width: 75rem) {
  .hauptnav { order: 0; flex-basis: auto; margin-left: auto; }
  .nav { gap: 0 1.6rem; }
  .kopf-kontakt { margin-left: 0; }
  .kopf-zeit { display: inline; }
}

/* Knöpfe: Rand transparent, damit er im Kontrastmodus sichtbar wird */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .5rem 1.4rem;
  border: 2px solid transparent; border-radius: 3px; background: var(--teal); color: var(--ink);
  font: inherit; font-size: 1rem; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer;
}
.knopf:hover { background: var(--teal-hell); }
.knopf.rand { background: transparent; border-color: var(--ink); }
.knopf.rand:hover { background: var(--grund); }
.knoepfe { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Abschnitte */
section { padding: 4rem 0; }
.flaeche { background: var(--grund); }
.abschnitt-kopf { display: grid; gap: .75rem; margin-bottom: 2.5rem; }
/* Spalten dieser Raster dürfen schmaler werden als das längste Wort, sonst scrollt die Seite bei großer Schrift (K25) */
.abschnitt-kopf, .szene-text, .ueber-uns .text, .band .text, .kontakt-wege, .feld { grid-template-columns: minmax(0, 1fr); }

/* Bilder: Beschriftung „Visualisierung“ mit eigenem deckenden Grund (K55) */
.bild { position: relative; }
.bild img { display: block; width: 100%; height: auto; }
.bild figcaption {
  position: absolute; left: 1rem; bottom: 1rem; z-index: 1;  /* über dem Verlauf im Einstieg */
  -webkit-print-color-adjust: exact; print-color-adjust: exact;  /* auch im Druck auf eigenem Grund */
  padding: .3rem .75rem; border-radius: 3px; background: var(--nacht); color: var(--nacht-text);
  font-size: 1rem; line-height: 1.4;
}

/* Einstieg: am Handy Bild oben, ab 60rem Text links und Bild rechts bis an den Rand */
.einstieg { display: grid; padding: 0; }
.einstieg-bild { order: -1; aspect-ratio: 4 / 3.2; overflow: hidden; }
.einstieg-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.einstieg-text {
  position: relative; min-width: 0; display: flex; flex-direction: column; gap: 1.25rem;
  padding: 3.25rem var(--rand) 3rem;
}
/* Dachlinie aus dem Logo: eine feine Linie mit kurzem Abschluss, am Desktop auf der Höhe der Pfette im Bild */
.dachlinie { position: absolute; left: var(--rand); right: var(--rand); top: 1.5rem; height: 2px; background: var(--teal); }
.dachlinie::before { content: ""; position: absolute; left: 0; top: 0; width: 2px; height: 1rem; background: var(--teal); }
.einstieg h1 { font-size: clamp(1.625rem, .9rem + 4vw, 2.5rem); }
.einstieg h1 .z { display: block; }  /* Zeilen aus inhalt.toml; die Größe folgt der Spalte, damit jede Zeile passt */
.einstieg .zeile { letter-spacing: .05em; }
.einstieg .einleitung { color: inherit; font-size: 1.1875rem; max-width: 32em; }
.einstieg .knoepfe { margin-top: .25rem; }
.versprechen {
  display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; list-style: none; padding: 1.1rem 0 0; margin-top: .5rem;
  border-top: 1px solid var(--nacht-linie); font-size: 1rem;
}

@media (max-width: 39.99rem) {
  .einstieg .knoepfe .knopf { flex: 1 1 100%; }
}
@media (min-width: 60rem) {
  .einstieg { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 34rem; }
  /* kleinere Überschrift bei niedrigen Fenstern, damit die Knöpfe auch am Laptop im ersten Blick stehen (K70) */
  .einstieg h1 { font-size: clamp(2.25rem, min(3.6vw, 6.5svh), 3.4rem); }
  .einstieg-bild { order: 0; aspect-ratio: auto; position: relative; }
  .einstieg-bild picture { position: absolute; inset: 0; }
  /* Die Dachlinie steht fest bei 9.5rem. Das Bild wird so hoch gesetzt und verschoben, dass die Unterkante der Pfette
     (22,4 % der Bildhöhe) genau dort liegt, egal wie hoch der Einstieg wird (K43, K70):
     Höhe mindestens 9.5rem / 0,224 (Bild beginnt nicht unter der Kante) und groß genug, um unten den Einstieg zu füllen. */
  .einstieg-bild img { position: absolute; left: 0; width: 100%;
    height: max(42.5rem, calc((100% - 9.5rem) / .776));
    top: calc(9.5rem - .224 * max(42.5rem, calc((100% - 9.5rem) / .776))); }
  /* weicher Übergang vom dunklen Text in das Bild */
  .einstieg-bild::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 14%;
    background: linear-gradient(90deg, var(--nacht), rgba(36, 40, 42, 0)); }
  .einstieg-text {
    justify-content: flex-start;
    padding: 11.5rem 3.5rem 4rem max(var(--rand), calc((100vw - var(--breite)) / 2 + var(--rand)));
  }
  /* fest über der Zeile (11.5rem), mit Abschluss 1rem und Luft; das Bild richtet sich danach */
  .dachlinie { top: 9.5rem; left: max(var(--rand), calc((100vw - var(--breite)) / 2 + var(--rand))); right: 0; }
}

/* Ablauf als Zeitstrahl: Wartezeit gestrichelt, Montage als türkiser Punkt, Garantie läuft aus */
.strahl { display: grid; list-style: none; margin: 0; padding: 0; }
.schritt { position: relative; min-width: 0; padding: 0 0 2rem 2.5rem; }
.schritt::before { content: ""; position: absolute; left: .4375rem; top: 0; bottom: 0; width: 2px; background: var(--ink); }
.schritt::after {
  content: ""; position: absolute; left: 0; top: .3rem; width: 1rem; height: 1rem; border-radius: 50%;
  background: var(--weiss); border: 2px solid var(--ink);
}
.schritt-wartezeit::before { background: repeating-linear-gradient(180deg, var(--ink) 0 .6rem, transparent .6rem 1rem); }
.schritt-wartezeit::after { display: none; }
.schritt-montage::after { background: var(--teal); border-color: var(--teal); }
.schritt-garantie::before { background: linear-gradient(180deg, var(--ink), rgba(50, 54, 55, 0)); }
.schritt .wann { display: block; font-size: 1rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--leise); }
.schritt .gross { display: block; margin: .25rem 0 .5rem; font-size: 1.75rem; font-weight: 500; line-height: 1.15; font-variant-numeric: tabular-nums; }
.schritt .was { display: block; font-size: 1rem; line-height: 1.55; max-width: 18em; }

@media (min-width: 48rem) {
  .strahl { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2.75rem; }
  .schritt { padding: 2.25rem 1.5rem 0 0; }
  .schritt::before { left: 0; right: 0; top: .5625rem; bottom: auto; width: auto; height: 2px; }
  .schritt::after { top: .1875rem; }
  .schritt-wartezeit::before { background: repeating-linear-gradient(90deg, var(--ink) 0 .6rem, transparent .6rem 1rem); }
  .schritt-garantie::before { background: linear-gradient(90deg, var(--ink), rgba(50, 54, 55, 0)); }
  .ablauf .knoepfe { margin-top: 2.5rem; }  /* am Handy hält der letzte Schritt den Abstand (K75) */
}
@media (min-width: 75rem) {
  .strahl { grid-template-columns: 1fr 1.1fr 1.15fr 1.5fr 1.15fr 1.4fr; }
  .schritt .wann { white-space: nowrap; }
}

/* Bewertungen (erst mit Bewertungen) */
.bewertungen { display: grid; gap: 1.25rem; list-style: none; padding: 0; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.bewertung { margin: 0; padding: 1.25rem; border-left: 2px solid var(--teal); background: var(--weiss); }
.bewertung blockquote { margin: 0 0 .75rem; }
#bewertungen .breite > p { margin-top: 1.5rem; }

/* Dacharten als Szenen: Bild und Text wechseln am Desktop die Seite */
.dacharten { background: var(--weiss); }
.szene { display: grid; gap: 1.25rem; }
/* Szene „An kühlen Abenden“ als dunkles Kapitel über die volle Breite: border-image mit seitlichem Überstand malt die
   Fläche in einem Zug (keine Kante wie bei box-shadow) und erzeugt wie jeder Überstand kein waagrechtes Scrollen */
.szene.dunkel { border-image: linear-gradient(var(--nacht) 0 0) fill 0 / / 0 100vmax; padding-block: 3rem; }
.szene + .szene.dunkel { margin-top: 4rem; }
.szene.dunkel + .carport { border-top: 0; margin-top: 5rem; }
.szene + .szene { margin-top: 3.5rem; }
.szene-bild img { border-radius: 2px; }
.szene h3 { font-weight: 500; }
.szene-text { display: grid; gap: .75rem; align-content: center; min-width: 0; max-width: 32em; }
.carport { margin-top: 3rem; padding-top: 1.75rem; border-top: 1px solid var(--linie); font-size: 1.25rem; }

@media (min-width: 60rem) {
  .szene { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3.5rem; align-items: center; }
  .szene + .szene { margin-top: 5.5rem; }
  .szene.bild-rechts { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .szene.bild-rechts .szene-bild { order: 2; }
  .carport { margin-top: 4.5rem; }
}

/* Über uns */
.ueber-uns .text { display: grid; gap: 1rem; }
.ueber-uns h2 { margin-bottom: .5rem; }
.zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 1.75rem 2rem;
  margin: 1.5rem 0 0; }
.text > .zahlen { max-width: none; }
.zahlen div { border-top: 2px solid var(--ink); padding-top: .9rem; }
.zahlen dt { font-size: clamp(2.25rem, 1.5rem + 2vw, 3.25rem); font-weight: 500; line-height: 1.05; font-variant-numeric: tabular-nums; }
.zahlen dd { margin: .35rem 0 0; color: var(--leise); }

/* Fragen zum Aufklappen, daneben der Kasten zum Anrufen */
.fragen { background: var(--weiss); }
.fragen-raster { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); }
.fragen-kopf { display: grid; gap: 1.5rem; align-content: start; }
.frage-kontakt { display: grid; gap: .25rem; justify-items: start; padding: 1.25rem; border-radius: 4px; background: var(--grund); }
.frage-tel { display: inline-flex; align-items: center; min-height: 44px; font-size: 1.375rem; font-weight: 500;
  font-variant-numeric: tabular-nums; text-decoration: none; }
.frage-tel:hover { text-decoration: underline; }
@media (min-width: 60rem) {
  .fragen-raster { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 2rem 4rem; }
}
.fragen-liste { border-top: 1px solid var(--rahmen); }
.fragen details { border-bottom: 1px solid var(--rahmen); }
.fragen summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.25rem;
  min-height: 44px; padding: 1.25rem 0; font-size: 1.1875rem; font-weight: 500; line-height: 1.35;
}
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after {
  content: ""; flex: none; width: .75rem; height: .75rem; margin-right: .25rem;
  border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg) translateY(-.25rem);
}
.fragen details[open] summary::after { transform: rotate(-135deg) translateX(-.125rem); }
.fragen .antwort { padding: 0 0 1.5rem; max-width: 40em; }

/* Band für Wohnanlagen und Neubauten, danach Kontakt und Fuß als ein dunkler Schluss */
.band { padding: 3.5rem 0; border-bottom: 1px solid var(--nacht-linie); }
.band .text { display: grid; gap: 1rem; }
.band h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.band p { color: var(--nacht-leise); max-width: 40em; }
.band a { color: var(--nacht-text); font-weight: 500; white-space: nowrap; }

/* Kontakt */
.kontakt-raster { display: grid; gap: 2.5rem; align-items: start; }
.kontakt-wege { display: grid; gap: .75rem; min-width: 0; }
.kontaktwege { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: .75rem; }
/* als Kacheln, damit sie antippbar aussehen; der Rand ist Schmuck, die Klickfläche ist der Link */
.kontaktwege li { display: grid; border: 1px solid var(--rahmen); border-radius: 4px; }
.dunkel .kontaktwege li { border-color: var(--nacht-leise); }
.kontaktweg { display: grid; align-content: center; min-height: 44px; padding: .75rem 1.1rem; text-decoration: none; }
.kontaktweg:hover .kontaktweg-wert { text-decoration: underline; }
.kontaktweg-art { font-size: 1rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--leise); }
.kontaktweg-wert { font-size: 1.375rem; font-weight: 500; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kontaktweg-zeit { font-size: 1rem; color: var(--leise); }

@media (min-width: 60rem) {
  .kontakt-raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; }
}

/* Formular */
.formular { display: grid; gap: 1.5rem; padding: 1.25rem; border: 1px solid var(--linie); border-radius: 4px; background: var(--weiss);
  color: var(--ink); }
/* im dunklen Kontakt: weiße Karte mit dunklem Fokusrahmen */
.dunkel .formular { border: 0; }
.dunkel .formular :focus-visible { outline-color: var(--ink); }
.feld { display: grid; gap: .375rem; min-width: 0; }
label, legend { font-size: 1rem; font-weight: 500; }
.pflicht { font-weight: 400; color: var(--leise); }
fieldset { display: grid; gap: .75rem; min-width: 0; margin: 0; padding: 0; border: 0; }
legend { padding: 0; margin-bottom: .5rem; }
input[type="text"], input[type="tel"], input[type="email"], textarea {
  width: 100%; min-height: 48px; padding: .5rem .75rem; border: 2px solid var(--rahmen); border-radius: 3px;
  background: var(--weiss); color: var(--ink); font: inherit; font-size: 1.0625rem;
}
textarea { min-height: 8rem; resize: vertical; }
.zwei-felder { display: grid; gap: 1.25rem; }
.plz-ort { grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); }
.wahlen { display: flex; flex-wrap: wrap; gap: .5rem; }
.wahl {
  display: inline-flex; align-items: center; gap: .625rem; min-height: 48px; padding: .375rem .875rem;
  border: 2px solid var(--rahmen); border-radius: 3px; font-weight: 400; line-height: 1.3; cursor: pointer;
}
.wahl:has(input:checked) { border-color: var(--ink); background: var(--grund); box-shadow: inset 0 0 0 1px var(--ink); }
.wahl input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--ink); }
.hinweis { font-size: 1rem; color: var(--leise); }
.absenden { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; }
/* Sprung aus der Fehlerliste: Label und Meldung über dem Feld bleiben im Bild */
input, textarea { scroll-margin-top: 10rem; }
.gruppe input { scroll-margin-top: 16rem; }  /* legend und Meldung stehen über der ersten Wahl */
[aria-invalid="true"] { border: 3px solid var(--ink); }
/* Markierung nur ohne Fokus, damit der Fokusrahmen sichtbar anders bleibt (WCAG 2.4.7) */
input[type="checkbox"][aria-invalid="true"]:not(:focus-visible),
input[type="radio"][aria-invalid="true"]:not(:focus-visible) { outline: 2px solid var(--ink); outline-offset: 1px; }
.feldfehler { margin: 0; font-weight: 600; }
.fehlerliste { margin: 0 0 2rem; padding: 1rem 1.25rem; border: 3px solid var(--ink); border-left: .75rem solid var(--teal); }
.fehlerliste h2 { font-size: 1.25rem; margin-bottom: .5rem; }
.fehlerliste ul { margin: 0; padding-left: 1.25rem; }
.fehlerliste a { display: inline-flex; align-items: center; min-height: 44px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (min-width: 40rem) {
  .formular { padding: 2rem; }
  .rueckweg .zwei-felder { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Textseiten: Impressum, Datenschutz, Danke, 404, Fehlerseite des Formulars */
.seite { padding-top: 3rem; padding-bottom: 3rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.seite h1 { margin-bottom: .5rem; }
.seite h2 { margin-top: 1.5rem; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.2; letter-spacing: -0.01em; }
.seite .knoepfe { margin-top: 1rem; }
.seite .kontaktwege { margin-top: 0; }

/* Fuß */
.fuss { padding: 2.5rem 0; font-size: 1rem; border-top: 1px solid var(--nacht-linie); }
.fuss-raster { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.fuss-marke img { display: block; width: auto; height: 3rem; }
.fuss-kontakt { display: flex; flex-direction: column; align-items: flex-start; }
.fuss-kontakt span { padding: .5rem 0; }
.fuss a { display: inline-flex; align-items: center; min-height: 44px; }
.fuss-links { list-style: none; margin: 0; padding: 0; }

/* Knopfgruppe rechts unten: WhatsApp und Anrufen als runde Symbolknöpfe, „Anfragen“ als Pille in Teal (K49, K72).
   Sie verdeckt nichts: Der Fuß hat unten Platz für sie, fokussierte Elemente halten beim Scrollen ihre Höhe Abstand
   (K50). Beim Tippen ins Formular und beim Bedienen mit der Tastatur verschwindet sie. Bei großer Schrift bricht
   „Anfragen“ unter die Symbole um, statt aus dem Fenster zu ragen. */
html { scroll-padding-bottom: calc(var(--schnell) + var(--schnell-abstand) + 1rem + env(safe-area-inset-bottom, 0px)); }
.fuss { padding-bottom: calc(2.5rem + var(--schnell) + var(--schnell-abstand) + env(safe-area-inset-bottom, 0px)); }
.schnell {
  position: fixed; z-index: 10; right: calc(var(--schnell-abstand) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--schnell-abstand) + env(safe-area-inset-bottom, 0px)); max-width: calc(100vw - 2 * var(--schnell-abstand));
}
.schnell ul { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.schnell a {
  display: flex; align-items: center; justify-content: center; gap: .5rem; height: var(--schnell);
  border-radius: calc(var(--schnell) / 2); font-weight: 600; text-decoration: none;
  box-shadow: 0 0 0 1px rgba(241, 244, 244, .3), 0 .5rem 1.5rem rgba(20, 24, 25, .3);
}
.schnell svg { flex: none; width: 1.5rem; height: 1.5rem; }
.schnell .rund { width: var(--schnell); background: var(--nacht); color: var(--nacht-text); }
.schnell .rund:hover { background: #2F3436; }
.schnell .pille { padding: 0 1.25rem 0 1rem; background: var(--teal); color: var(--ink); font-size: 1.0625rem; }
.schnell .pille:hover { background: var(--teal-hell); }
.schnell .pille svg { width: 1.375rem; height: 1.375rem; }
/* Fokusring innen im Knopf, damit er auf jeder Fläche darunter zu sehen ist */
.schnell .rund:focus-visible { outline-color: var(--nacht-text); outline-offset: -6px; }
.schnell .pille:focus-visible { outline-color: var(--ink); outline-offset: -6px; }
body:has(.formular :focus) .schnell, body:has(:focus-visible:not(.schnell *)) .schnell { display: none; }
@media (max-width: 22.5rem) {
  :root { --schnell: 2.75rem; --schnell-abstand: .75rem; }
  .schnell .pille { padding: 0 1rem; font-size: 1rem; }
  .schnell .pille svg { display: none; }
}
@media (min-width: 60rem) {
  :root { --schnell: 3.5rem; --schnell-abstand: 2rem; }
  .schnell ul { gap: .625rem; }
}
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .knopf, .wahl, .schnell a { transition: background-color .15s ease-out, border-color .15s ease-out; }
  .fragen summary::after { transition: transform .2s ease-out; }
}

@media print {
  .schnell, .sprunglink { display: none; }
}