/* =========================================================================
   FRA Fenster GmbH - fragroup.ch
   Ein Stylesheet fuer alle Seiten der Mockup-Reihe v1.
   Farben und Schriften nach /root/fragroup.ch/brand/tokens.md.
   ========================================================================= */

/* ---------- 1. Tokens ---------------------------------------------------- */

:root{
  /* Marke */
  --oliv:        #252601;   /* Text auf hell, dunkle Flaechen, Kopf und Fuss */
  --limette:     #CDDC28;   /* Signalfarbe: eine Flaeche, Marken, Fokus auf dunkel */
  --offwhite:    #E9E9E5;   /* Papier der Seite, Text auf dunkel */

  /* Abstufungen, aus den drei Markenfarben abgeleitet */
  --oliv-stufe:  #3A3B18;   /* eine Stufe ueber Oliv: Flaechen, nie Text */
  --oliv-leise:  #5A5B3A;   /* zurueckgenommener Text auf hellem Grund (5,8:1) */
  --hell-leise:  #C3C4B4;   /* zurueckgenommener Text auf dunklem Grund (8,8:1) */
  --linie-hell:  #CFD0C8;   /* Haarlinie auf hellem Grund */
  --linie-dunkel:#474828;   /* Haarlinie auf dunklem Grund */

  /* Schrift */
  --schrift-display: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --schrift-text:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Raster und Rhythmus */
  --inhalt-max: 1360px;
  --rand:       clamp(16px, 4vw, 48px);
  --luecke:     clamp(10px, 1.2vw, 16px);
  --abschnitt:  clamp(56px, 7.5vw, 104px);

  /* Typoskala */
  --t-display:  clamp(2.05rem, 5.1vw, 4rem);
  --t-h1:       clamp(1.9rem, 4.6vw, 3.25rem);
  --t-h2:       clamp(1.6rem, 3.2vw, 2.6rem);
  --t-h3:       clamp(1.15rem, 1.8vw, 1.4rem);
  --t-kachel:   clamp(1.3rem, 2.1vw, 1.75rem);
  --t-kachel-gross: clamp(1.7rem, 3.4vw, 2.6rem);
  --t-text:     1.0625rem;
  --t-klein:    0.8125rem;
}

/* ---------- 2. Grundlagen ------------------------------------------------ */

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

html{
  hyphens:auto;
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--offwhite);
  color:var(--oliv);
  font-family:var(--schrift-text);
  font-size:var(--t-text);
  line-height:1.65;
  font-synthesis-weight:none;
}

img,svg,video{max-width:100%;display:block}
img{height:auto}

h1,h2,h3,h4{
  font-family:var(--schrift-display);
  font-weight:300;
  margin:0;
  text-wrap:balance;
}

p{margin:0 0 1em}
p:last-child{margin-bottom:0}

a{color:inherit}

:focus-visible{
  outline:3px solid var(--oliv);
  outline-offset:3px;
}
.auf-dunkel :focus-visible,
.kopf :focus-visible,
.fuss :focus-visible,
.kachel:focus-visible,
.hero :focus-visible{
  outline-color:var(--limette);
}
.auf-limette :focus-visible{outline-color:var(--oliv)}

.sprung{
  position:absolute;left:-9999px;top:0;z-index:50;
  background:var(--limette);color:var(--oliv);
  padding:.7em 1.1em;font-weight:600;
}
.sprung:focus{left:0}

/* ---------- 3. Bausteine ------------------------------------------------- */

.inhalt{
  width:100%;
  max-width:var(--inhalt-max);
  margin-inline:auto;
  padding-inline:var(--rand);
}
.inhalt--breit{max-width:1480px}

.mass{max-width:62ch}
.mass--eng{max-width:46ch}

.abschnitt{padding-block:var(--abschnitt)}
.abschnitt--dunkel{background:var(--oliv);color:var(--offwhite)}
.abschnitt--limette{background:var(--limette);color:var(--oliv)}
.abschnitt--schmal{padding-block:calc(var(--abschnitt) * .6)}

.klein{                       /* die einzige Kleinschrift-Behandlung der Seite */
  font-family:var(--schrift-text);
  font-size:var(--t-klein);
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.lead{
  font-size:clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height:1.55;
}

.h1{font-size:var(--t-h1);line-height:1.05;letter-spacing:.005em}
.h2{font-size:var(--t-h2);line-height:1.1;letter-spacing:.005em}
.h3{font-size:var(--t-h3);line-height:1.25;font-family:var(--schrift-text);font-weight:600;letter-spacing:0}

.versal{text-transform:uppercase;letter-spacing:.02em}

.textlink{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:.22em;
  text-decoration-thickness:1px;
}
.textlink:hover{text-decoration-color:var(--limette);text-decoration-thickness:2px}
.abschnitt--limette .textlink:hover,
body:not(.x) .abschnitt:not(.abschnitt--dunkel) .textlink:hover{text-decoration-color:var(--oliv)}

.taste{                      /* Schaltflaeche: Limette auf Oliv, Oliv auf hell */
  display:inline-block;
  font-family:var(--schrift-text);
  font-size:var(--t-klein);
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-decoration:none;
  padding:1.05em 1.8em;
  border:1px solid var(--oliv);
  background:var(--oliv);
  color:var(--offwhite);
  cursor:pointer;
}
.taste:hover{background:var(--oliv-stufe);border-color:var(--oliv-stufe)}
.taste--offen{background:transparent;color:var(--oliv)}
.taste--offen:hover{background:var(--oliv);color:var(--offwhite)}
.abschnitt--dunkel .taste{background:var(--limette);border-color:var(--limette);color:var(--oliv)}
.abschnitt--dunkel .taste:hover{background:var(--offwhite);border-color:var(--offwhite)}

/* Hinweisziffer: nur Typografie, kein Kasten, 24 px Tippflaeche */
sup.hinweis{
  font-size:.62em;
  line-height:0;
  vertical-align:super;
  font-feature-settings:"sups" 0;
}
sup.hinweis a{
  color:inherit;
  text-decoration:none;
  padding:10px 4px;
  margin:-10px -4px;
}
sup.hinweis a:hover{text-decoration:underline}

/* ---------- 4. Kopf ------------------------------------------------------ */

.kopf{background:var(--oliv);color:var(--offwhite);position:relative;z-index:45}

.kopf__innen{
  max-width:var(--inhalt-max);
  margin-inline:auto;
  padding:18px var(--rand);
  display:flex;
  align-items:center;
  gap:clamp(16px,3vw,40px);
}

.kopf__logo{display:block;flex:0 0 auto;color:var(--offwhite)}
.kopf__logo svg{height:30px;width:auto}

.kopf__nav{margin-left:auto}
.kopf__nav ul{
  list-style:none;margin:0;padding:0;
  display:flex;gap:clamp(14px,2vw,28px);
}
.kopf__nav a{
  text-decoration:none;
  font-size:.875rem;
  font-weight:500;
  letter-spacing:.01em;
  padding-block:6px;
  border-bottom:2px solid transparent;
  display:block;
  white-space:nowrap;
}
.kopf__nav a:hover{border-bottom-color:var(--limette)}
.kopf__nav a[aria-current="page"]{border-bottom-color:var(--limette)}

.kopf__nav .menue-tel{display:none}

.kopf__tel{
  font-family:var(--schrift-display);
  font-size:1rem;
  font-weight:400;
  text-decoration:none;
  white-space:nowrap;
  border-bottom:2px solid var(--limette);
  padding-bottom:3px;
}
.kopf__tel:hover{border-bottom-width:4px}

.menue-taste{
  display:none;
  margin-left:auto;
  align-items:center;
  gap:.6em;
  background:none;
  border:1px solid var(--linie-dunkel);
  color:var(--offwhite);
  font-family:var(--schrift-text);
  font-size:var(--t-klein);
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:.7em 1em;
  cursor:pointer;
}
.menue-taste:hover{border-color:var(--limette)}
.menue-taste__strich{display:block;width:18px;height:1px;background:currentColor;position:relative}
.menue-taste__strich::before,
.menue-taste__strich::after{content:"";position:absolute;left:0;width:18px;height:1px;background:currentColor}
.menue-taste__strich::before{top:-5px}
.menue-taste__strich::after{top:5px}
.menue-taste[aria-expanded="true"] .menue-taste__strich{background:transparent}
.menue-taste[aria-expanded="true"] .menue-taste__strich::before{top:0;transform:rotate(45deg)}
.menue-taste[aria-expanded="true"] .menue-taste__strich::after{top:0;transform:rotate(-45deg)}

@media (max-width:900px){
  .kopf__logo,
  .menue-taste{position:relative;z-index:50}
  .kopf__logo svg{height:26px}
  .menue-taste{display:inline-flex}
  .kopf__tel{display:none}
  .kopf__nav{
    display:none;
    position:fixed;
    inset:0;
    margin:0;
    background:var(--oliv);
    padding:88px var(--rand) var(--rand);
    overflow-y:auto;
    z-index:40;
  }
  .kopf__nav.offen{display:block}
  .kopf__nav ul{flex-direction:column;gap:0}
  .kopf__nav a{
    font-size:1.5rem;
    font-family:var(--schrift-display);
    font-weight:300;
    text-transform:uppercase;
    letter-spacing:.02em;
    padding-block:.7em;
    border-bottom:1px solid var(--linie-dunkel);
    white-space:normal;
  }
  .kopf__nav a:hover,
  .kopf__nav a[aria-current="page"]{color:var(--limette);border-bottom-color:var(--linie-dunkel)}
  .kopf__nav .menue-tel{
    display:block;
    border-bottom:0;
    margin-top:28px;
    font-family:var(--schrift-display);
    font-size:1.5rem;
    text-decoration:none;
    color:var(--limette);
  }
}

/* ---------- 5. Hero (Startseite) und Seitenkopf (Unterseiten) ------------ */

.hero{
  position:relative;
  height:clamp(480px, 52vw, 720px);
  overflow:hidden;
  background:var(--oliv);
  color:var(--offwhite);
  display:flex;
  align-items:flex-end;
}
.hero__bild{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:50% 52%;
}
.hero::after{                 /* ein Verlauf, am Bild gemessen: siehe design-plan.md */
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,
      rgba(37,38,1,0)   0%,
      rgba(37,38,1,.06) 34%,
      rgba(37,38,1,.70) 57%,
      rgba(37,38,1,.82) 100%);
}
.hero__inhalt{
  position:relative;z-index:1;
  width:100%;
  max-width:var(--inhalt-max);
  margin-inline:auto;
  padding:0 var(--rand) clamp(32px,4.5vw,64px);
}
.hero__titel{
  font-size:var(--t-display);
  line-height:.96;
  letter-spacing:.015em;
  text-transform:uppercase;
  margin:0 0 .45em;
  max-width:22ch;
}
.hero__text{
  max-width:44ch;
  font-size:clamp(1rem,1.35vw,1.1875rem);
  line-height:1.5;
  margin:0;
}

.seitenkopf{                  /* Kopf der Unterseiten: kein Foto noetig */
  background:var(--oliv);
  color:var(--offwhite);
  padding-block:clamp(48px,6vw,92px);
}
.seitenkopf__titel{
  font-size:var(--t-h1);
  line-height:1.02;
  letter-spacing:.02em;
  text-transform:uppercase;
  margin:0 0 .5em;
}
.seitenkopf__text{max-width:56ch;color:var(--hell-leise);margin:0}

.seitenkopf--bild{position:relative;overflow:hidden;display:flex;align-items:flex-end;min-height:clamp(320px,34vw,460px);padding-block:0}
.seitenkopf--bild .seitenkopf__bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.seitenkopf--bild::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(37,38,1,.25) 0%,rgba(37,38,1,.20) 40%,rgba(37,38,1,.78) 100%)}
.seitenkopf--bild > .inhalt{position:relative;z-index:1;padding-bottom:clamp(28px,3.5vw,52px);width:100%}
.seitenkopf--bild .seitenkopf__text{color:var(--offwhite)}

/* Brotkrume */
.brotkrume{font-size:var(--t-klein);color:var(--hell-leise);margin:0 0 1.4em}
.brotkrume a{text-decoration:none}
.brotkrume a:hover{text-decoration:underline}

/* ---------- 6. Kachelfeld ------------------------------------------------ */

.kachelfeld{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--luecke);
}

.kachel{
  position:relative;
  display:block;
  overflow:hidden;
  aspect-ratio:5/4;
  background:var(--oliv);
  color:var(--offwhite);
  isolation:isolate;
  --kachel-rand:clamp(16px,2vw,28px);
  --marke-hoehe:62%;   /* Hoehe des Verlaufs, je Kachelgroesse gesetzt */
  --marke-oben:62%;    /* Oberkante der Beschriftung: genau dort, wo der Verlauf 0,70 erreicht */
}
.kachel--gross{
  grid-column:span 2;grid-row:span 2;aspect-ratio:auto;
  --marke-hoehe:48%;
  --marke-oben:71%;
}

.kachel__bild{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  z-index:-2;
}
.kachel::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;height:var(--marke-hoehe);
  z-index:-1;
  background:linear-gradient(180deg, rgba(37,38,1,0) 0%, rgba(37,38,1,.18) 22%, rgba(37,38,1,.70) 40%, rgba(37,38,1,.86) 100%);
}
.kachel:hover::after{background:linear-gradient(180deg, rgba(37,38,1,0) 0%, rgba(37,38,1,.26) 22%, rgba(37,38,1,.78) 40%, rgba(37,38,1,.92) 100%)}

/* Die ganze Kachel ist die Verknuepfung; die Beschriftung liegt darueber. */
.kachel__flaeche{position:absolute;inset:0;z-index:1}
.kachel__flaeche:focus-visible{outline:3px solid var(--limette);outline-offset:-4px}

.kachel__text{
  position:absolute;
  left:var(--kachel-rand);
  right:var(--kachel-rand);
  top:var(--marke-oben);
  z-index:2;
  pointer-events:none;
}
.kachel__text sup.hinweis a{pointer-events:auto}
.kachel__titel{
  display:block;
  font-family:var(--schrift-display);
  font-weight:300;
  font-size:var(--t-kachel);
  line-height:1.05;
  letter-spacing:.02em;
  text-transform:uppercase;
  margin:0;
  overflow-wrap:anywhere;
}
.kachel--gross .kachel__titel{font-size:var(--t-kachel-gross)}
.kachel__zeile{
  display:block;
  margin:.55em 0 0;
  font-size:.9375rem;
  line-height:1.4;
  color:var(--offwhite);
  max-width:34ch;
}

/* Kachel ohne Foto: ruhiger Markengrund, nie heller als die Nachbarn */
.kachel--ohne-bild{background:var(--oliv)}
.kachel--ohne-bild::after{display:none}
.kachel__marke{
  position:absolute;
  right:-6%;
  top:8%;
  width:52%;
  color:var(--oliv-stufe);
  z-index:0;
}
.kachel--ohne-bild .kachel__text{z-index:1}

@media (max-width:1040px){
  .kachelfeld{grid-template-columns:repeat(2,1fr)}
  .kachel--gross{grid-column:span 2;grid-row:span 1;aspect-ratio:16/10}
}
@media (max-width:640px){
  .kachelfeld{grid-template-columns:1fr}
  .kachel{aspect-ratio:4/3;--marke-hoehe:76%;--marke-oben:53%}
  .kachel--gross{grid-column:span 1;aspect-ratio:4/3;--marke-hoehe:76%;--marke-oben:53%}
  .kachel::after{background:linear-gradient(180deg, rgba(37,38,1,0) 0%, rgba(37,38,1,.22) 20%, rgba(37,38,1,.80) 40%, rgba(37,38,1,.90) 100%)}
  .kachel:hover::after{background:linear-gradient(180deg, rgba(37,38,1,0) 0%, rgba(37,38,1,.30) 20%, rgba(37,38,1,.88) 40%, rgba(37,38,1,.96) 100%)}
  .kachel__marke{width:62%}
}

/* ---------- 7. Abschnittskopf und Listen --------------------------------- */

.kopfzeile{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(12px,2vw,28px);
  margin-bottom:clamp(28px,3.5vw,48px);
}
@media (min-width:860px){
  .kopfzeile{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:end}
}

.leistungen{
  list-style:none;margin:0;padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap:0 clamp(24px,4vw,64px);
}
.leistungen li{
  padding-block:clamp(16px,1.6vw,22px);
  border-top:1px solid var(--linie-dunkel);
}
.abschnitt:not(.abschnitt--dunkel) .leistungen li{border-top-color:var(--linie-hell)}
.leistungen b{
  display:block;
  font-family:var(--schrift-display);
  font-weight:400;
  font-size:1.0625rem;
  letter-spacing:.02em;
  text-transform:uppercase;
  margin-bottom:.25em;
}
.leistungen p{margin:0;font-size:.9375rem;line-height:1.5;color:var(--hell-leise)}
.abschnitt:not(.abschnitt--dunkel) .leistungen p{color:var(--oliv-leise)}

/* ---------- 8. Produktuebersicht (fenster.html, tueren.html, ...) -------- */

.produkte{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap:clamp(20px,2.6vw,36px);
}
.produkt{
  display:flex;
  flex-direction:column;
  text-decoration:none;
  color:inherit;
}
.produkt__bild{
  aspect-ratio:4/3;
  width:100%;
  object-fit:cover;
  background:var(--oliv-stufe);
}
.produkt__titel{
  font-family:var(--schrift-display);
  font-weight:300;
  font-size:clamp(1.25rem,1.9vw,1.6rem);
  letter-spacing:.02em;
  text-transform:uppercase;
  margin:.9em 0 .3em;
}
.produkt__zeile{margin:0;color:var(--oliv-leise);font-size:.9375rem;line-height:1.5}
.produkt__werte{
  margin:.9em 0 0;padding:0;list-style:none;
  display:flex;flex-wrap:wrap;gap:.4em 1.4em;
  font-size:var(--t-klein);
  color:var(--oliv-leise);
  font-variant-numeric:tabular-nums;
}
.produkt:hover .produkt__titel{text-decoration:underline;text-underline-offset:.16em}
.abschnitt--dunkel .produkt__zeile,
.abschnitt--dunkel .produkt__werte{color:var(--hell-leise)}

/* Bestseller zuerst: ein breiter Eintrag */
.produkte--erste{grid-template-columns:minmax(0,1fr)}
@media (min-width:860px){
  .produkt--breit{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(20px,3vw,44px);align-items:center}
  .produkt--breit .produkt__bild{aspect-ratio:16/10}
  .produkt--breit .produkt__titel{margin-top:0}
}

/* ---------- 9. Produktseite ---------------------------------------------- */

.zusammenfassung{
  display:grid;
  gap:clamp(20px,3vw,48px);
}
@media (min-width:860px){
  .zusammenfassung{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
}
.zusammenfassung__liste{margin:0;padding:0;list-style:none}
.zusammenfassung__liste li{
  padding-block:.8em;
  border-top:1px solid var(--linie-hell);
  font-size:.9375rem;
  line-height:1.5;
}

.kennwerte{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.kennwerte caption{text-align:left;padding-bottom:.9em;color:var(--oliv-leise);font-size:var(--t-klein)}
.kennwerte th,.kennwerte td{
  text-align:left;
  padding:.85em 1em .85em 0;
  border-bottom:1px solid var(--linie-hell);
  font-size:.9375rem;
  vertical-align:top;
}
.kennwerte thead th{
  font-family:var(--schrift-display);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.04em;
  border-bottom:1px solid var(--oliv);
}
.kennwerte tbody th{font-weight:500;color:var(--oliv-leise)}
.tabelle-rollen{overflow-x:auto}

/* "Erhaeltlich in": Auswahlmarken, keine Hinweismarken */
.optionen{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:8px;
}
.optionen li{
  border:1px solid var(--linie-hell);
  padding:.55em 1em;
  font-size:var(--t-klein);
  letter-spacing:.02em;
  color:var(--oliv-leise);
}
.optionen li[data-farbe]{display:flex;align-items:center;gap:.6em}
.optionen li[data-farbe]::before{
  content:"";width:14px;height:14px;background:var(--marke,var(--oliv-leise));display:block;
}

.galerie{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:var(--luecke);
}
.galerie img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--oliv-stufe)}
.galerie figure{margin:0}
.galerie figcaption{font-size:var(--t-klein);color:var(--oliv-leise);padding-top:.6em}

.dokumente{list-style:none;margin:0;padding:0;max-width:60ch}
.dokumente li{border-top:1px solid var(--linie-hell)}
.dokumente li:last-child{border-bottom:1px solid var(--linie-hell)}
.dokumente a{
  display:flex;justify-content:space-between;gap:1.5em;align-items:baseline;
  padding:1em 0;text-decoration:none;
}
.dokumente a:hover{text-decoration:underline;text-underline-offset:.2em}
.dokumente span{font-size:var(--t-klein);color:var(--oliv-leise);white-space:nowrap}

/* ---------- 10. Referenzen und Vorher/Nachher ---------------------------- */

.referenzen{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap:clamp(20px,2.6vw,36px);
}
.referenz{margin:0}
.referenz__titel{
  font-family:var(--schrift-display);
  font-weight:300;font-size:1.3rem;
  text-transform:uppercase;letter-spacing:.02em;
  margin:.85em 0 .25em;
}
.referenz__zeile{margin:0;color:var(--oliv-leise);font-size:.9375rem}

.vergleich{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2px;
  background:var(--linie-hell);
}
.vergleich__seite{position:relative;margin:0;overflow:hidden;background:var(--oliv-stufe)}
.vergleich__seite img{width:100%;aspect-ratio:4/3;object-fit:cover}
.vergleich__leer{
  aspect-ratio:4/3;
  display:grid;place-items:center;
  color:var(--hell-leise);
  background:var(--oliv-stufe);
}
.vergleich__marke{
  position:absolute;left:0;top:0;
  background:var(--oliv);color:var(--offwhite);
  padding:.45em .9em;
  font-size:var(--t-klein);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
}

/* ---------- 11. Textseiten ----------------------------------------------- */

.text-seite{max-width:68ch}
.text-seite h2{font-size:var(--t-h2);line-height:1.1;margin:1.8em 0 .5em}
.text-seite h3{font-family:var(--schrift-text);font-weight:600;font-size:1.0625rem;margin:1.8em 0 .4em}
.text-seite h2:first-child,.text-seite h3:first-child{margin-top:0}
.text-seite ul,.text-seite ol{padding-left:1.2em;margin:0 0 1em}
.text-seite li{margin-bottom:.4em}
.text-seite table{width:100%;border-collapse:collapse;margin:0 0 1.5em}
.text-seite th,.text-seite td{text-align:left;padding:.8em 1em .8em 0;border-bottom:1px solid var(--linie-hell);font-size:.9375rem;vertical-align:top}
.text-seite dl{margin:0}
.text-seite dt{font-weight:600;margin-top:1.2em}
.text-seite dd{margin:.2em 0 0}

/* ---------- 12. Kontakt und Formular ------------------------------------- */

.kontaktband{
  display:grid;
  gap:clamp(24px,4vw,64px);
  align-items:start;
}
@media (min-width:860px){
  .kontaktband{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
}
.kontakt-nummer{
  font-family:var(--schrift-display);
  font-weight:300;
  font-size:clamp(1.9rem,4.4vw,3.1rem);
  letter-spacing:.005em;
  text-decoration:none;
  display:inline-block;
  line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.kontakt-nummer:hover{text-decoration:underline;text-underline-offset:.15em}
.kontakt-daten{margin:0;font-style:normal;line-height:1.75}
.kontakt-daten a{text-underline-offset:.2em}

.formular{display:grid;gap:18px;max-width:42rem}
@media (min-width:640px){
  .formular{grid-template-columns:1fr 1fr}
  .formular .feld--breit{grid-column:1 / -1}
}
.feld{display:flex;flex-direction:column;gap:.45em}
.feld label{font-size:var(--t-klein);font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.feld input,.feld select,.feld textarea{
  font-family:var(--schrift-text);
  font-size:1rem;
  color:var(--oliv);
  background:#FFFFFF;
  border:1px solid var(--oliv-leise);
  padding:.85em .9em;
  width:100%;
  border-radius:0;
}
.feld textarea{min-height:9em;resize:vertical}
.feld input:focus-visible,.feld select:focus-visible,.feld textarea:focus-visible{outline:3px solid var(--oliv);outline-offset:1px}
.feld--pflicht label::after{content:" *";color:var(--oliv-leise)}
.feld--falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.zustimmung{grid-column:1 / -1;display:flex;gap:.8em;align-items:flex-start;font-size:.9375rem;line-height:1.5}
.zustimmung input{margin-top:.28em;width:1.15em;height:1.15em;flex:0 0 auto}
.formular .taste{grid-column:1 / -1;justify-self:start}
.formular-hinweis{grid-column:1 / -1;font-size:var(--t-klein);color:var(--oliv-leise);margin:0}

.karte-platz{
  aspect-ratio:16/9;
  background:var(--oliv-stufe);
  color:var(--hell-leise);
  display:grid;place-items:center;
  text-align:center;
  padding:1.5em;
}

/* ---------- 13. Fuss ----------------------------------------------------- */

.fuss{background:var(--oliv);color:var(--offwhite);padding-block:clamp(48px,6vw,80px) 28px}
.fuss__raster{
  display:grid;
  gap:clamp(28px,3.5vw,48px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));
}
.fuss__logo{display:block;color:var(--offwhite);margin-bottom:1.1em}
.fuss__logo svg{height:28px;width:auto}
.fuss h2{font-size:var(--t-klein);letter-spacing:.12em;text-transform:uppercase;font-family:var(--schrift-text);font-weight:600;margin:0 0 1em;color:var(--hell-leise)}
.fuss h2.fuss__zweitkopf{margin-top:1.8em}
.fuss ul{list-style:none;margin:0;padding:0}
.fuss li{margin-bottom:.55em}
.fuss a{text-decoration:none}
.fuss a:hover{text-decoration:underline;text-underline-offset:.2em}
.fuss address{font-style:normal;line-height:1.75}
.fuss__anspruch{
  font-family:var(--schrift-display);
  font-weight:300;
  font-size:1.0625rem;
  letter-spacing:.02em;
  text-transform:uppercase;
  margin:0 0 1em;
  max-width:22ch;
}
.fuss__schluss{
  margin-top:clamp(32px,4vw,56px);
  padding-top:22px;
  border-top:1px solid var(--linie-dunkel);
  display:flex;flex-wrap:wrap;gap:.6em 2em;
  font-size:var(--t-klein);
  color:var(--hell-leise);
}
.fuss__schluss p{margin:0;max-width:74ch}

/* ---------- 14. Bewegung ------------------------------------------------- */

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

/* ---------- 15. Hinweisseite (review-notes.html) ------------------------- */

.hinweisliste{margin:0;padding-left:1.5em}
.hinweisliste > li{margin-bottom:1.8em;max-width:66ch;padding-left:.3em}
.hinweisliste > li::marker{font-variant-numeric:tabular-nums;color:var(--oliv-leise)}
.hinweisliste b{display:block;font-weight:600;margin-bottom:.15em}
.hinweisliste i{font-style:normal;font-weight:600;color:var(--oliv-leise)}
.farbwert{font-variant-numeric:tabular-nums;white-space:nowrap}
.ohne-umbruch{white-space:nowrap}
.hinweis-gruppe{margin-bottom:clamp(40px,5vw,72px)}
.hinweis-gruppe > h2{font-size:var(--t-h2);line-height:1.1;margin:0 0 .8em}
.hinweisliste p{margin:.45em 0 0}