/* =====================================================================
   HO-TEC Gruppe, Gaggenau. Gemeinsames Gestaltungssystem
   fuer index.html (Gruppe), oberflaechentechnik.html, aqua-plus.html.

   Eigenheit: die Schraege von 20 Grad aus dem HO-TEC-Logo.
   Sie erscheint als Naht im Startbild, als Parallelogramm-Pille,
   als schraeger Trenner im Zahlenband und als Marke in der Zeitleiste.
   Sonst nirgends.

   Farben: neutrale Basis, dazu zwei Bereichsfarben als Kodierung,
   gesteuert ueber data-bereich am <html>.

   Diese Datei wird von den Bereichsseiten NICHT veraendert.
   Seiteneigenes CSS gehoert in den <style>-Block der jeweiligen Seite.
   ===================================================================== */

/* ---------- Schrift: Archivo variabel, Breite und Gewicht, lokal ---------- */
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:100 900;
  font-stretch:62% 125%;
  font-display:swap;
  src:url(schriften/archivo-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:'Archivo';
  font-style:normal;
  font-weight:100 900;
  font-stretch:62% 125%;
  font-display:swap;
  src:url(schriften/archivo-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Archivo';
  font-style:italic;
  font-weight:100 900;
  font-stretch:62% 125%;
  font-display:swap;
  src:url(schriften/archivo-italic-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:'Archivo';
  font-style:italic;
  font-weight:100 900;
  font-stretch:62% 125%;
  font-display:swap;
  src:url(schriften/archivo-italic-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root{
  /* Basis, neutral und teuer */
  --tinte:#0E1113;
  --papier:#F5F5F1;
  --flaeche:#ECECE6;
  --flaeche-tief:#E3E3DC;
  --linie:#D9D9D2;
  --linie-zart:#E6E6E0;
  --text:#15181A;
  --leise:#5C625F;          /* 5,71:1 auf Papier */

  /* auf Tinte */
  --auf-dunkel:#F2F3EF;     /* 16,3:1 */
  --leise-dunkel:#A8B0AD;   /* 8,55:1 */
  --linie-dunkel:rgb(255 255 255/.16);

  /* Bereich 01 Oberflaechentechnik, Gruen aus dem HO-TEC-Logo */
  --gruen:#60B840;
  --gruen-papier:#2F7A1F;   /* 4,90:1 auf Papier */
  --gruen-dunkel:#7CD35C;   /* 10,2:1 auf Tinte */

  /* Bereich 02 AQUA-PLUS, Blau aus dem AQUA-PLUS-Logo */
  --blau:#0068B0;           /* 5,33:1 auf Papier, traegt Weiss mit 5,82:1 */
  --blau-papier:#0068B0;
  --blau-dunkel:#4FA6E8;    /* 7,18:1 auf Tinte */

  /* Bereichskodierung, wird unten je data-bereich gesetzt */
  --bereich:var(--tinte);
  --bereich-schrift:#FFFFFF;
  --bereich-auf-papier:var(--text);
  --bereich-auf-dunkel:var(--auf-dunkel);

  --schrift:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --radius:12px;
  --radius-klein:4px;
  --schraege:-20deg;

  --rand:clamp(22px,4.4vw,80px);
  --inhalt:1360px;
  --kopf-h:88px;

  --dauer:.3s;
  --dauer-lang:.6s;
  --kurve:cubic-bezier(.16,1,.3,1);
}

html[data-bereich="oberflaeche"]{
  --bereich:var(--gruen);
  --bereich-schrift:var(--tinte);
  --bereich-auf-papier:var(--gruen-papier);
  --bereich-auf-dunkel:var(--gruen-dunkel);
}
html[data-bereich="wasser"]{
  --bereich:var(--blau);
  --bereich-schrift:#FFFFFF;
  --bereich-auf-papier:var(--blau-papier);
  --bereich-auf-dunkel:var(--blau-dunkel);
}

/* ---------- Grundlagen ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--kopf-h) + 16px)}
body{
  margin:0;background:var(--papier);color:var(--text);
  font-family:var(--schrift);font-size:17px;line-height:1.6;font-weight:400;
  font-variation-settings:'wdth' 100;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
img,video{display:block;max-width:100%;height:auto}
h1,h2,h3,h4,p,dl,dd,figure,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
p{max-width:62ch}
svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
:focus-visible{outline:3px solid #0068B0;outline-offset:3px;border-radius:2px}
[hidden]{display:none!important}

.springen{position:fixed;top:-120px;left:16px;z-index:300;background:var(--tinte);color:#fff;padding:14px 20px;border-radius:var(--radius-klein);font-weight:600}
.springen:focus{top:14px}

/* ---------- Typografie ---------- */
h1,h2,.display{
  font-weight:600;
  font-variation-settings:'wdth' 115;
  letter-spacing:-.02em;line-height:1.0;
  text-wrap:balance;
}
h1{font-size:clamp(50px,6.6vw,108px)}
h2{font-size:clamp(36px,4.4vw,68px)}
h3{font-size:clamp(19px,1.5vw,22px);font-weight:600;font-variation-settings:'wdth' 104;letter-spacing:-.012em;line-height:1.24}
h4{font-size:17px;font-weight:600;letter-spacing:-.008em;line-height:1.3}

.zart{color:var(--leise)}
.bereichston{color:var(--bereich-auf-papier)}

.t-gross{font-size:clamp(20px,2.1vw,29px);line-height:1.38;letter-spacing:-.016em;font-weight:400;max-width:24ch}
.t-mittel{font-size:clamp(18px,1.5vw,20px);line-height:1.52;letter-spacing:-.006em}
.t-klein{font-size:14.5px;line-height:1.5}
.t-mikro{font-size:12.5px;line-height:1.45}
.t-leise{color:var(--leise)}
.t-zahl{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}

.label{
  display:inline-flex;align-items:center;gap:.6em;
  font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  font-variation-settings:'wdth' 100;line-height:1.3;color:var(--leise);
}
.label--auf-dunkel{color:var(--leise-dunkel)}
.label--bereich{color:var(--bereich-auf-papier)}

/* ---------- Wortzeichen HO-TEC, in CSS nachgebaut ---------- */
.zeichen{
  display:inline-flex;align-items:center;
  font-style:italic;font-weight:800;
  font-variation-settings:'wdth' 125;
  font-size:30px;line-height:1;letter-spacing:-.035em;
  color:var(--text);
  white-space:nowrap;
}
.zeichen__ho{padding-right:.1em}
.zeichen__tec{
  display:inline-block;
  padding:.18em .5em .2em .62em;
  color:var(--tinte);
  background:var(--gruen);
  clip-path:polygon(.5em 0,100% 0,calc(100% - .5em) 100%,0 100%);
}
.zeichen--auf-dunkel{color:var(--auf-dunkel)}
.zeichen--gross{font-size:clamp(46px,5.4vw,84px)}

/* ---------- Kopfzeile ---------- */
.kopf{
  position:sticky;top:0;z-index:60;
  height:var(--kopf-h);
  display:flex;align-items:center;gap:clamp(16px,2.4vw,44px);
  padding:0 var(--rand);
  background:var(--papier);color:var(--text);
  border-bottom:1px solid transparent;
  transition:background var(--dauer) var(--kurve),color var(--dauer) var(--kurve),border-color var(--dauer) var(--kurve);
}
.kopf.is-fest{border-bottom-color:var(--linie)}
body[data-kopf="film"] .kopf:not(.is-fest){
  background:transparent;color:#FFFFFF;border-bottom-color:transparent;
}
body[data-kopf="film"] .kopf:not(.is-fest) .zeichen{color:#FFFFFF}
body[data-kopf="film"] .kopf:not(.is-fest) .kopf__nav a::after{background:#FFFFFF}
body[data-kopf="film"] .kopf:not(.is-fest) .knopf--linie{border-color:rgb(255 255 255/.55);color:#FFFFFF}
body[data-kopf="film"] .kopf:not(.is-fest) .knopf--linie:hover{background:rgb(255 255 255/.14)}
body[data-kopf="film"] .kopf:not(.is-fest) .menue{color:#FFFFFF}

.kopf__marke{display:inline-flex;align-items:center;min-height:44px;flex:none}
.kopf__nav{display:flex;gap:clamp(14px,1.9vw,30px);margin-left:clamp(10px,2.6vw,54px);font-size:14.5px}
.kopf__nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:10px 0;font-weight:500}
.kopf__nav a::after{content:"";position:absolute;left:0;right:0;bottom:16px;height:1.5px;background:var(--text);transform:scaleX(0);transform-origin:left;transition:transform var(--dauer) var(--kurve)}
.kopf__nav a:hover::after,.kopf__nav a:focus-visible::after{transform:scaleX(1)}
.kopf__nav a[aria-current="page"]{font-weight:600;color:var(--bereich-auf-papier)}
.kopf__nav a[aria-current="page"]::after{background:var(--bereich-auf-papier);transform:scaleX(1)}
body[data-kopf="film"] .kopf:not(.is-fest) .kopf__nav a[aria-current="page"]{color:#FFFFFF}
.kopf__rechts{display:flex;align-items:center;gap:12px;margin-left:auto}
.kopf__tel{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 4px;font-size:14.5px;font-weight:600;font-variant-numeric:tabular-nums}
.kopf__tel svg{width:18px}
.kopf__tel:hover{text-decoration:underline;text-underline-offset:5px}
.menue{display:none;border:0;background:none;padding:11px;min-height:44px;min-width:44px;border-radius:var(--radius-klein)}

#mobilnav{
  display:flex;flex-direction:column;
  position:sticky;top:var(--kopf-h);z-index:55;
  background:var(--papier);border-bottom:1px solid var(--linie);
  padding:4px var(--rand) 20px;
}
#mobilnav a{display:flex;align-items:center;min-height:52px;border-bottom:1px solid var(--linie-zart);font-size:16px;font-weight:500}
#mobilnav a[aria-current="page"]{font-weight:600;color:var(--bereich-auf-papier)}

/* ---------- Knoepfe ---------- */
.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:14px;
  min-height:52px;padding:14px 26px;
  background:var(--tinte);color:#FFFFFF;
  border:1px solid var(--tinte);border-radius:var(--radius-klein);
  font-size:15px;font-weight:600;letter-spacing:-.005em;
  transition:background var(--dauer) var(--kurve),color var(--dauer) var(--kurve),border-color var(--dauer) var(--kurve),transform var(--dauer) var(--kurve);
}
.knopf:hover{background:#25292C;border-color:#25292C;transform:translateY(-2px)}
.knopf svg{width:19px;transition:transform var(--dauer) var(--kurve)}
.knopf:hover svg{transform:translateX(4px)}
.knopf--linie{background:transparent;color:var(--text);border-color:var(--linie)}
.knopf--linie:hover{background:var(--flaeche);border-color:var(--text);color:var(--text)}
.knopf--hell{background:#FFFFFF;color:var(--tinte);border-color:#FFFFFF}
.knopf--hell:hover{background:var(--flaeche);border-color:var(--flaeche);color:var(--tinte)}
.knopf--bereich{background:var(--bereich);color:var(--bereich-schrift);border-color:var(--bereich)}
.knopf--bereich:hover{background:var(--bereich);border-color:var(--bereich);color:var(--bereich-schrift)}
.knopf--klar{background:transparent;color:#FFFFFF;border-color:rgb(255 255 255/.5)}
.knopf--klar:hover{background:rgb(255 255 255/.14);border-color:#FFFFFF;color:#FFFFFF}

.textlink{display:inline-flex;align-items:center;gap:9px;min-height:44px;font-size:15px;font-weight:600}
.textlink span[aria-hidden]{transition:transform var(--dauer) var(--kurve)}
.textlink:hover span[aria-hidden]{transform:translate(3px,-3px)}
.textlink:hover{text-decoration:underline;text-underline-offset:6px}
.pfeillink{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:15px;font-weight:600;color:var(--bereich-auf-papier)}
.pfeillink svg{width:18px;transition:transform var(--dauer) var(--kurve)}
.pfeillink:hover svg{transform:translateX(5px)}
.rundknopf{
  width:46px;height:46px;flex:none;border:1px solid var(--linie);border-radius:50%;
  display:grid;place-items:center;background:none;
  transition:background var(--dauer),border-color var(--dauer),transform var(--dauer)
}
.rundknopf:hover{background:var(--flaeche);border-color:var(--text)}
.rundknopf:disabled{opacity:.3;cursor:default}
.rundknopf--klar{border-color:rgb(255 255 255/.45);color:#FFFFFF}
.rundknopf--klar:hover{background:rgb(255 255 255/.16);border-color:#FFFFFF}

/* ---------- Pille als Parallelogramm, die Eigenheit ---------- */
.pille{
  display:inline-flex;align-items:center;gap:.6em;
  padding:9px 22px 9px 27px;min-height:34px;
  font-size:12.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;line-height:1.3;
  color:var(--tinte);background:var(--flaeche);
  clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);
}
.pille--gruen{color:var(--tinte);background:var(--gruen)}
.pille--blau{color:#FFFFFF;background:var(--blau)}
.pille--dunkel{color:var(--auf-dunkel);background:var(--tinte)}
.pille--bereich{color:var(--bereich-schrift);background:var(--bereich)}
.pille b{font-weight:600}

/* ---------- Raster und Sektionen ---------- */
.spalte{width:min(100%,var(--inhalt));margin-inline:auto}
.sektion{padding:clamp(76px,8.2vw,142px) var(--rand);position:relative;background:var(--papier)}
.sektion--eng{padding-block:clamp(52px,5.4vw,84px)}
.sektion--dunkel{background:var(--tinte);color:var(--auf-dunkel)}
.sektion--dunkel .zart,.sektion--dunkel .t-leise{color:var(--leise-dunkel)}
.sektion--dunkel .label{color:var(--leise-dunkel)}
.sektion--flaeche{background:var(--flaeche)}

.sektionskopf{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:end;gap:clamp(24px,4vw,72px);margin-bottom:clamp(38px,4.4vw,66px)}
.sektionskopf .label{margin-bottom:22px}
.sektionskopf p{color:var(--leise);font-size:17px;max-width:46ch}
.sektionskopf--mittig{grid-template-columns:1fr;justify-items:start}
.sektion--dunkel .sektionskopf p{color:var(--leise-dunkel)}

/* ---------- Karten ---------- */
.karte{
  position:relative;display:flex;flex-direction:column;
  background:var(--papier);border:1px solid var(--linie);border-radius:var(--radius);
  overflow:hidden;min-width:0;
  transition:border-color var(--dauer) var(--kurve),transform var(--dauer) var(--kurve);
}
a.karte:hover{border-color:#B9BDB5;transform:translateY(-3px)}
.karte__bild{position:relative;overflow:hidden;background:var(--flaeche);aspect-ratio:16/10}
.karte__bild img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--kurve)}
.karte__bild--objekt{display:grid;place-items:center;padding:clamp(18px,2.4vw,34px)}
.karte__bild--objekt img{width:auto;max-height:100%;object-fit:contain}
a.karte:hover .karte__bild img{transform:scale(1.045)}
.karte__pille{position:absolute;left:18px;top:18px;z-index:2}
.karte__inhalt{padding:clamp(22px,2.4vw,34px);display:flex;flex-direction:column;gap:14px;flex:1}
.karte__inhalt p{color:var(--leise);font-size:16px;max-width:44ch}
.karte__fuss{margin-top:auto;padding-top:6px}
.karte--flaeche{background:var(--flaeche);border-color:transparent}
.karte--dunkel{background:var(--tinte);border-color:transparent;color:var(--auf-dunkel)}
.karte--dunkel .karte__inhalt p{color:var(--leise-dunkel)}

.marken{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.marken li{
  display:inline-flex;align-items:center;min-height:30px;padding:5px 12px;
  border:1px solid var(--linie);border-radius:999px;
  font-size:12.5px;color:var(--leise);
}
.karte--dunkel .marken li{border-color:var(--linie-dunkel);color:var(--leise-dunkel)}

/* Karte mit farbiger Kante, wie die Hotline-Karten der Referenz */
.kante{position:relative;padding:clamp(22px,2.4vw,30px) clamp(22px,2.4vw,30px) clamp(22px,2.4vw,30px) clamp(26px,2.6vw,34px);background:var(--papier);border:1px solid var(--linie);border-radius:var(--radius);overflow:hidden}
.kante::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--kante-farbe,var(--bereich))}
.kante--gruen{--kante-farbe:var(--gruen)}
.kante--blau{--kante-farbe:var(--blau)}

/* ---------- Datenlisten ---------- */
.daten{display:grid;grid-template-columns:auto 1fr;column-gap:clamp(20px,3vw,44px)}
.daten dt,.daten dd{margin:0;padding:15px 0;border-top:1px solid var(--linie);font-size:15.5px}
.daten dt{font-weight:600;white-space:nowrap}
.daten dd{color:var(--leise);font-variant-numeric:tabular-nums}
.sektion--dunkel .daten dt,.sektion--dunkel .daten dd{border-top-color:var(--linie-dunkel)}
.sektion--dunkel .daten dd{color:var(--leise-dunkel)}

.liste-index{columns:2;column-gap:clamp(24px,4vw,64px)}
.liste-index li{break-inside:avoid;padding:11px 0;border-top:1px solid var(--linie-zart);font-size:15.5px;color:var(--leise)}

/* ---------- Zahlenband, Trenner tragen die Schraege ---------- */
.zahlenband{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.zahlenband > div{position:relative;padding:4px clamp(16px,2.2vw,34px) 4px clamp(16px,2.2vw,34px)}
.zahlenband > div:first-child{padding-left:0}
.zahlenband > div:last-child{padding-right:0}
.zahlenband > div + div::before{
  content:"";position:absolute;left:0;top:2px;bottom:2px;width:1px;
  background:var(--linie-dunkel);transform:skewX(var(--schraege));
}
.zahlenband dt{
  display:flex;align-items:baseline;gap:.26em;flex-wrap:wrap;
  font-weight:600;font-variation-settings:'wdth' 115;letter-spacing:-.025em;line-height:1;
  font-size:clamp(34px,3.9vw,62px);font-variant-numeric:tabular-nums;
  color:var(--auf-dunkel);
}
.zahlenband dt i{
  font-style:normal;font-size:14px;font-weight:600;letter-spacing:.05em;
  font-variation-settings:'wdth' 100;color:var(--leise-dunkel);
}
.zahlenband dd{margin:14px 0 0;font-size:14.5px;line-height:1.45;color:var(--leise-dunkel);max-width:22ch}
.zahlenband--papier dt{color:var(--text)}
.zahlenband--papier dt i{color:var(--leise)}
.zahlenband--tinte dt i{color:rgb(14 17 19/.72)}
.zahlenband--papier dd{color:var(--leise)}
.zahlenband--papier > div + div::before{background:var(--linie)}
.zahlenband--tinte dt{color:var(--tinte)}
.zahlenband--tinte dd{color:rgb(14 17 19/.72)}
.zahlenband--tinte > div + div::before{background:rgb(14 17 19/.24)}

/* ---------- Bildunterschrift und Schild ---------- */
.bildnotiz{margin-top:12px;font-size:12.5px;line-height:1.45;color:var(--leise)}
.bildnotiz--klar{color:rgb(255 255 255/.86)}
.schild{
  position:absolute;left:14px;bottom:14px;z-index:3;
  display:inline-flex;align-items:center;
  padding:6px 11px;border-radius:3px;
  background:var(--tinte);color:#FFFFFF;
  font-size:12px;font-weight:500;letter-spacing:.02em;line-height:1.3;
}
.schild--rechts{left:auto;right:14px}
.schild--oben{bottom:auto;top:14px}

/* ---------- Akkordeon ---------- */
.akkordeon{border-top:1px solid var(--linie);max-width:82ch}
.akkordeon details{border-bottom:1px solid var(--linie)}
.akkordeon summary{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:22px 0;min-height:44px;cursor:pointer;list-style:none;
  font-size:clamp(18px,1.6vw,21px);font-weight:600;font-variation-settings:'wdth' 104;letter-spacing:-.01em;line-height:1.3;
}
.akkordeon summary::-webkit-details-marker{display:none}
.akkordeon summary::after{
  content:"";flex:none;width:14px;height:14px;
  border-right:1.6px solid var(--bereich-auf-papier);border-bottom:1.6px solid var(--bereich-auf-papier);
  transform:rotate(45deg) translate(-3px,-3px);
  transition:transform var(--dauer) var(--kurve);
}
.akkordeon details[open] summary::after{transform:rotate(225deg) translate(-3px,-3px)}
.akkordeon .inhalt{padding-bottom:24px;color:var(--leise);max-width:62ch}
.akkordeon .inhalt p + p{margin-top:14px}

/* ---------- Formularelemente ---------- */
.feld{display:grid;gap:7px}
.feld > span{font-size:13px;font-weight:600}
.feld > span i{font-style:normal;font-weight:400;color:var(--leise);margin-left:6px}
.feld input,.feld select,.feld textarea{
  width:100%;min-height:50px;padding:12px 15px;
  border:1px solid var(--linie);border-radius:var(--radius-klein);
  background:#FFFFFF;font:inherit;font-size:16px;color:inherit;
}
.feld input:focus,.feld select:focus{border-color:var(--text);outline:0;box-shadow:0 0 0 3px rgb(0 104 176/.18)}
.schalter{display:flex;flex-wrap:wrap;gap:8px}
.schalter button{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:11px 16px;
  border:1px solid var(--linie);border-radius:var(--radius-klein);background:#FFFFFF;
  font-size:14.5px;font-weight:500;
  transition:border-color var(--dauer),background var(--dauer),color var(--dauer);
}
.schalter button:hover{border-color:var(--text)}
.schalter button[aria-pressed="true"]{background:var(--bereich);border-color:var(--bereich);color:var(--bereich-schrift);font-weight:600}

/* ---------- Bereichsseiten-Hero, fertige Klasse fuer beide Bereichsseiten ---------- */
.bhero{
  position:relative;isolation:isolate;overflow:hidden;
  margin-top:calc(var(--kopf-h) * -1);
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:calc(var(--kopf-h) + 90px) var(--rand) 0;
  background:var(--tinte);color:#FFFFFF;
}
.bhero__film{position:absolute;inset:0;z-index:-2;overflow:hidden}
.bhero__film video,.bhero__film img{width:100%;height:100%;object-fit:cover}
.bhero__schleier{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg,rgb(9 12 13/.88) 0%,rgb(9 12 13/.66) 34%,rgb(9 12 13/.22) 62%,rgb(9 12 13/.1) 100%),
    linear-gradient(180deg,rgb(9 12 13/.6) 0%,rgb(9 12 13/.05) 18%,rgb(9 12 13/.1) 58%,rgb(9 12 13/.82) 100%);
}
.bhero__inhalt{width:min(100%,var(--inhalt));margin-inline:auto;padding-bottom:clamp(40px,5vh,74px)}
.bhero h1{font-size:clamp(44px,5.6vw,92px);margin-top:26px;color:#FFFFFF;max-width:min(100%,15ch)}
.bhero h1 .zart{color:#D3D7D5}
.bhero__satz{margin-top:26px;font-size:clamp(17px,1.4vw,19px);line-height:1.55;color:#EDEFEC;max-width:48ch}
.bhero__aktion{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:34px}
.bhero .label{color:#D7DAD8}
.bhero__fuss{
  width:min(100%,var(--inhalt));margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  min-height:78px;padding-bottom:env(safe-area-inset-bottom);
  border-top:1px solid rgb(255 255 255/.24);
  font-size:13.5px;color:#E4E6E4;
}
.bhero__fuss .ort{display:inline-flex;align-items:center;gap:9px;min-height:44px}
.bhero__fuss .ort svg{width:17px}
.bhero__fuss .mitte{color:#BFC4C2}

/* ---------- Standort und Karte ---------- */
.karte-rahmen{position:relative;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;background:var(--flaeche);border:1px solid var(--linie)}
.karte-rahmen iframe{width:100%;height:100%;border:0;display:block}

/* ---------- Fuss ---------- */
.fuss{background:var(--tinte);color:var(--auf-dunkel);padding:clamp(56px,5.4vw,84px) var(--rand) 36px}
.fuss__raster{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:clamp(28px,3.4vw,56px)}
.fuss h4{font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--leise-dunkel);margin-bottom:16px}
.fuss li{margin-bottom:2px}
.fuss a{display:inline-flex;align-items:center;min-height:40px;font-size:15px;color:var(--auf-dunkel)}
.fuss a:hover{text-decoration:underline;text-underline-offset:5px}
.fuss__recht{margin-top:clamp(40px,4vw,64px);padding-top:26px;border-top:1px solid var(--linie-dunkel);display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between;font-size:12.5px;color:var(--leise-dunkel)}
.fuss__recht p{max-width:none}
.fuss__adresse{font-size:15px;line-height:1.7;color:var(--leise-dunkel);margin-top:18px}
.fuss__adresse a{display:inline;min-height:0;color:var(--auf-dunkel)}

/* ---------- Demo, ein Dialog, zwei Strecken ---------- */
.demo{
  position:fixed;inset:0;z-index:200;display:none;
  align-items:center;justify-content:center;padding:clamp(12px,4vw,44px);
  background:rgb(10 13 14/.62);
}
/* Die Demo traegt die Farbe der gewaehlten Strecke, ohne die Seite umzufaerben. */
.demo[data-bereich="oberflaeche"]{--bereich:var(--gruen);--bereich-schrift:var(--tinte);--bereich-auf-papier:var(--gruen-papier)}
.demo[data-bereich="wasser"]{--bereich:var(--blau);--bereich-schrift:#FFFFFF;--bereich-auf-papier:var(--blau-papier)}
.demo.is-auf{display:flex}
.demo__karte{
  position:relative;width:min(100%,660px);max-height:min(92vh,880px);overflow:auto;
  background:var(--papier);border-radius:var(--radius);
  padding:clamp(22px,3vw,40px);
}
.demo__kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}
.demo__marke{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--leise);min-height:44px}
.demo__marke::before{content:"";width:9px;height:9px;flex:none;background:var(--bereich);transform:skewX(var(--schraege))}
.demo__zu{border:1px solid var(--linie);background:none;border-radius:50%;width:44px;height:44px;display:grid;place-items:center;flex:none}
.demo__zu:hover{background:var(--flaeche)}
.demo__balken{height:3px;background:var(--linie);border-radius:2px;overflow:hidden;margin-bottom:26px}
.demo__balken i{display:block;height:100%;background:var(--bereich);transition:transform .4s var(--kurve);transform-origin:left;transform:scaleX(.2)}
.demo h2{font-size:clamp(27px,3.2vw,40px)}
.demo__frage{margin-top:8px;margin-bottom:22px;font-size:15px;color:var(--leise)}
.demo__wahl{display:grid;gap:10px;margin:0;padding:0;border:0}
.demo__wahl legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.demo__knopf{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:100%;text-align:left;padding:15px 18px;min-height:58px;
  background:var(--flaeche);border:1px solid transparent;border-radius:var(--radius-klein);
  font-size:16px;font-weight:600;
  transition:border-color .2s,background .2s,color .2s;
}
.demo__knopf small{display:block;font-weight:400;font-size:13px;color:var(--leise);margin-top:3px}
.demo__knopf:hover{border-color:var(--text)}
.demo__knopf[aria-pressed="true"]{background:var(--bereich);border-color:var(--bereich);color:var(--bereich-schrift)}
.demo__knopf[aria-pressed="true"] small{color:var(--bereich-schrift)}
.demo__knopf span[aria-hidden]{flex:none;opacity:.5}
.demo__ergebnis dl{display:grid;grid-template-columns:auto 1fr;gap:10px 22px;margin:20px 0;padding:22px;background:var(--flaeche);border-radius:var(--radius-klein);font-size:15px}
.demo__ergebnis dt{font-weight:600}
.demo__ergebnis dd{margin:0;color:var(--leise)}
.demo__felder{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:4px 0 18px}
.demo__wege{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:22px}
.demo__haken{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--bereich);color:var(--bereich-schrift);margin-bottom:18px}
.demo__haken svg{width:26px;height:26px;stroke-width:2.2}
.demo__fuss{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:26px;padding-top:18px;border-top:1px solid var(--linie)}
.demo__zurueck{background:none;border:0;color:var(--leise);font-size:14px;font-weight:600;min-height:44px;padding:0 4px}
.demo__zurueck:hover{color:var(--text);text-decoration:underline;text-underline-offset:4px}
.demo__hinweis{font-size:12.5px;color:var(--leise)}

/* ---------- Bewegung: einblenden, sonst Ruhe ---------- */
html.js .auf{opacity:0;transform:translateY(14px);transition:opacity .75s var(--kurve),transform .75s var(--kurve)}
html.js .auf.is-da{opacity:1;transform:none}
html.js .auf--2{transition-delay:.09s}
html.js .auf--3{transition-delay:.18s}
html.js .auf--4{transition-delay:.27s}

/* ---------- Schmale Bildschirme ---------- */
@media(max-width:1180px){
  .kopf__nav{display:none}
  .menue{display:grid;place-items:center}
  .fuss__raster{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .sektionskopf{grid-template-columns:1fr;align-items:start;gap:20px}
  .sektionskopf p{max-width:none}
  .zahlenband{grid-template-columns:1fr 1fr;row-gap:30px}
  .zahlenband > div{padding-left:clamp(16px,4vw,28px)}
  .zahlenband > div:nth-child(3){padding-left:0}
  .zahlenband > div:nth-child(3)::before{display:none}
  .liste-index{columns:1}
  .demo__felder{grid-template-columns:1fr}
}
@media(max-width:760px){
  :root{--rand:22px;--kopf-h:68px;--inhalt:100%}
  body{font-size:17px}
  .zeichen{font-size:25px}
  .kopf__tel span{display:none}
  .kopf__rechts .knopf{display:none}
  .kopf__tel{min-width:44px;justify-content:center}
  h2{font-size:clamp(32px,8.4vw,44px)}
  .sektion{padding:clamp(58px,13vw,78px) var(--rand)}
  .karte__inhalt{padding:22px}
  .fuss__raster{grid-template-columns:1fr;gap:30px}
  .fuss__recht{flex-direction:column;gap:6px}
  .bhero{min-height:100svh;padding-top:calc(var(--kopf-h) + 60px)}
  .bhero h1{font-size:clamp(42px,11.4vw,64px)}
  .bhero__fuss{min-height:60px;font-size:12.5px}
  .bhero__fuss .mitte{display:none}
  .demo{padding:0;align-items:flex-end}
  .demo__karte{width:100%;max-height:94vh;border-radius:var(--radius) var(--radius) 0 0;padding:20px 20px calc(22px + env(safe-area-inset-bottom))}
  .demo h2{font-size:28px}
  .akkordeon summary{padding:19px 0}
}
@media(max-width:480px){
  .zahlenband{grid-template-columns:1fr;row-gap:26px}
  .zahlenband > div{padding-left:0;padding-right:0}
  .zahlenband > div + div::before{display:none}
  .zahlenband > div + div{border-top:1px solid var(--linie-dunkel);padding-top:24px}
  .zahlenband--papier > div + div{border-top-color:var(--linie)}
  .zahlenband--tinte > div + div{border-top-color:rgb(14 17 19/.24)}
}

/* ---------- Reduzierte Bewegung: alles steht ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  html.js .auf{opacity:1;transform:none}
}
