/* ============================================================
   Holz-Eberth - stil.css
   Eine dunkle, geerdete Heritage-Handwerkerseite.
   Zwei Schriftfamilien (Newsreader, Karla), ein Kernholz-Akzent,
   zwei Eckenradien (4px + Pille). Mobil zuerst.
   ============================================================ */

/* ---------- Schriften: selbst gehostet ---------- */
@font-face{
  font-family:"Newsreader";
  src:url("schrift/newsreader-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Newsreader";
  src:url("schrift/newsreader-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Karla";
  src:url("schrift/karla-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Karla";
  src:url("schrift/karla-500.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Karla";
  src:url("schrift/karla-700.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}

/* ---------- Token ---------- */
:root{
  --grund:#12140F;      /* Waldnacht, nicht reinschwarz */
  --grund-2:#1B1E16;    /* leicht gehobene Fläche */
  --grund-3:#232720;    /* Karten */
  --tinte:#F0EDE4;      /* Knochenweiß */
  --tinte-leise:#B9B7AC;/* ruhiger Fließtext */
  --tinte-still:#9AA093;/* Beschriftungen, Fußnoten */
  --linie:#33372D;      /* Hairlines */
  /* Markengrün, gemessen am Firmenlogo (grünes Feld, dunkelgrüne Tanne,
     Holzleiter): #009030. Auf dem Nachtgrund käme das Original nur auf
     4,44:1 — genommen ist deshalb eine Stufe heller, gleiche Farbe.
     Vorher stand hier Amber „frisch gesägtes Kernholz": aus dem Material
     abgeleitet, nicht aus der Marke (05.08.2026).
       --akzent      #2fae52 auf #12140F = 6,44:1 · dunkel darauf 6,44:1
       --akzent-text #3cc063 auf #12140F = 7,87:1
       --akzent-tief #00702a auf hellem Band = 5,53:1 */
  --akzent:#2fae52;
  --akzent-text:#3cc063;
  --akzent-tief:#00702a;
  --hebung:var(--akzent-text); /* kippt am Untergrund, nicht am Baustein */

  --r:4px;              /* Radius 1: Karten, Bilder, Felder */
  --pille:999px;        /* Radius 2: Knöpfe */
  --breite:1180px;
  --luft:clamp(3.5rem,7vw,6rem); /* Abschnittsabstand */
}
/* helle Kästen in dunklem Abschnitt setzen die Hebung zurück */
.hell{--hebung:#8a5a16;}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--grund);
  color:var(--tinte);
  font-family:"Karla",system-ui,sans-serif;
  font-size:clamp(1rem,.96rem + .3vw,1.12rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:anywhere;
}
img{max-width:100%;height:auto;display:block;}

/* ---------- Auszeichnung: vier Stufen, je eine Ausprägung ---------- */
/* 1 Rubrik (Kicker) */
.rubrik{
  font-family:"Karla",sans-serif;
  font-weight:700;
  font-size:.8125rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--hebung);
  margin:0 0 .8rem;
}
/* 2 Datenwert (Jahre, Mengen, Nummern) */
.wert{
  font-family:"Karla",sans-serif;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  color:var(--hebung);
  hyphens:manual;
}
/* 3 Betonung im Fließtext - kein Schriftwechsel */
strong,.hebung{font-weight:600;color:var(--hebung);}
/* 4 Kennzahl - Größe trägt, nicht Farbe */
.kennzahl{
  font-family:"Newsreader",serif;
  font-weight:600;
  color:var(--tinte);
  line-height:1;
  font-size:clamp(2.6rem,7vw,4.4rem);
  hyphens:manual;
}

/* ---------- Überschriften & Text ---------- */
h1,h2,h3{
  font-family:"Newsreader",serif;
  font-weight:600;
  line-height:1.1;
  text-wrap:balance;
  hyphens:manual;
  margin:0 0 .8rem;
  color:var(--tinte);
}
h1{font-size:clamp(2.2rem,3.2vw + 1.2rem,3.9rem);}
h2{font-size:clamp(1.75rem,2vw + 1rem,2.7rem);}
h3{font-size:clamp(1.25rem,1vw + .9rem,1.55rem);}
p{margin:0 0 1rem;text-wrap:pretty;hyphens:auto;}
.leise{color:var(--tinte-leise);}
.fliess{color:var(--tinte-leise);max-width:62ch;}
a{color:var(--akzent-text);text-underline-offset:.18em;}

/* ---------- Layout-Hüllen ---------- */
.huelle{width:min(100% - 2.4rem,var(--breite));margin-inline:auto;}
.schmal{width:min(100% - 2.4rem,760px);margin-inline:auto;}
section{padding-block:var(--luft);}
.trenner-o{border-top:1px solid var(--linie);}

/* ---------- Kopf / Navigation ---------- */
.kopf{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:1rem;
  padding:.7rem clamp(1rem,3vw,2rem);
  min-height:60px;max-height:76px;
  background:color-mix(in srgb,var(--grund) 88%,transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--linie);
}
.marke{
  font-family:"Newsreader",serif;font-weight:600;font-size:1.3rem;
  color:var(--tinte);text-decoration:none;letter-spacing:.01em;
  margin-right:auto;white-space:nowrap;
}
.nav-liste{
  display:flex;gap:clamp(.6rem,1.6vw,1.6rem);
  list-style:none;margin:0;padding:0;
}
.nav-liste a{
  color:var(--tinte-leise);text-decoration:none;font-weight:500;
  font-size:.98rem;padding:.5rem .2rem;white-space:nowrap;display:block;
}
.nav-liste a:hover,.nav-liste a[aria-current="page"]{color:var(--tinte);}
.nav-schalter{display:none;}
.tel-knopf{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--akzent);color:#17140d;font-weight:700;
  text-decoration:none;padding:.55rem 1.1rem;border-radius:var(--pille);
  white-space:nowrap;font-size:.96rem;
}
.tel-knopf:hover{background:var(--akzent-text);}

@media (max-width:820px){
  /* Ohne JavaScript: Menue steht sichtbar und begehbar unter der Marke. */
  .kopf{flex-wrap:wrap;}
  .nav{order:3;flex-basis:100%;}
  .nav-schalter{display:none;}
  .nav-liste{
    display:flex;flex-wrap:wrap;gap:.1rem .9rem;
    position:static;background:none;border:0;padding:.2rem 0 0;
  }
  .nav-liste a{padding:.45rem .1rem;border:0;font-size:1rem;}

  /* Mit JavaScript: Hamburger, Menue klappt ein. */
  .js .kopf{flex-wrap:nowrap;}
  .js .nav{order:0;flex-basis:auto;}
  .js .nav-schalter{
    display:inline-flex;align-items:center;
    background:transparent;border:1px solid var(--linie);color:var(--tinte);
    border-radius:var(--r);padding:.5rem .8rem;font:inherit;font-weight:600;
    cursor:pointer;min-height:44px;
  }
  .js .nav-liste{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;gap:0;
    background:var(--grund-2);border-bottom:1px solid var(--linie);
    padding:.4rem clamp(1rem,3vw,2rem) 1rem;
  }
  .js .nav[data-offen="true"] .nav-liste{display:flex;}
  .js .nav-liste a{padding:.75rem .2rem;font-size:1.05rem;border-top:1px solid var(--linie);}
}

/* ---------- Knöpfe ---------- */
.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font:inherit;font-weight:700;cursor:pointer;text-decoration:none;
  border-radius:var(--pille);padding:.85rem 1.6rem;
  border:1px solid transparent;transition:transform .12s ease,background .2s ease;
  min-height:48px;
}
.knopf-voll{background:var(--akzent);color:#17140d;}
.knopf-voll:hover{background:var(--akzent-text);}
.knopf-linie{background:transparent;color:var(--tinte);border-color:var(--linie);}
.knopf-linie:hover{border-color:var(--akzent);color:var(--tinte);}
.knopf:active{transform:translateY(1px);}

/* ---------- Hero ---------- */
.hero{
  position:relative;isolation:isolate;
  min-height:clamp(520px,82vh,760px);
  display:flex;align-items:flex-end;
  padding-bottom:clamp(2.5rem,6vw,4.5rem);
  overflow:hidden;
}
.hero--flach{min-height:clamp(360px,52vh,480px);}
.hero__bild{position:absolute;inset:0;z-index:-2;}
.hero__bild img{width:100%;height:100%;object-fit:cover;object-position:center 40%;
  filter:saturate(.86) contrast(1.02);}
.hero__schleier{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(12,14,9,.28) 0%,rgba(12,14,9,.55) 55%,rgba(12,14,9,.92) 100%),
    linear-gradient(90deg,rgba(12,14,9,.62) 0%,rgba(12,14,9,0) 60%);
}
.hero__inhalt{max-width:38rem;}
.hero h1{margin-bottom:.7rem;}
.hero .fliess{color:#e8e6dd;max-width:34ch;}
.hero__satz{width:fit-content;}

/* ---------- Zahlenstreifen (gemeinsame Spalte) ---------- */
.zahlen{
  display:grid;grid-template-columns:minmax(0,1fr);gap:1.2rem 2rem;
  margin:0;padding:0;
}
@media(min-width:640px){.zahlen{grid-template-columns:repeat(2,1fr);}}
@media(min-width:900px){.zahlen--4{grid-template-columns:repeat(4,1fr);}}
.zahlen li{list-style:none;min-width:0;}
.zahlen .kennzahl{display:block;margin-bottom:.3rem;}
.zahlen .zk-text{color:var(--tinte-leise);font-size:.98rem;display:block;}

/* ---------- Zug: Text neben Bild ---------- */
.zug{display:grid;gap:clamp(1.4rem,4vw,3rem);align-items:center;}
@media(min-width:860px){
  .zug{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .zug--umkehr .zug__bild{order:-1;}
}
.zug__bild{min-width:0;}
.zug__bild img{width:100%;border-radius:var(--r);border:1px solid var(--linie);
  filter:saturate(.9);aspect-ratio:4/3;object-fit:cover;}
.zug__text{min-width:0;}
.zug__bild.hochbild img{aspect-ratio:3/4;}
.bildunterschrift{color:var(--tinte-still);font-size:.86rem;margin:.6rem 0 0;}

/* ---------- Leistungs-Raster ---------- */
.raster{display:grid;gap:1.2rem;grid-template-columns:minmax(0,1fr);}
@media(min-width:620px){.raster{grid-template-columns:repeat(2,1fr);}}
@media(min-width:980px){.raster--3{grid-template-columns:repeat(3,1fr);}}
.karte{
  background:var(--grund-2);border:1px solid var(--linie);border-radius:var(--r);
  padding:1.4rem;min-width:0;
}
.karte h3{margin-bottom:.5rem;}
.karte p{margin:0;color:var(--tinte-leise);font-size:.98rem;}

/* ---------- Stationen ---------- */
.station{background:var(--grund-2);border-top:1px solid var(--linie);
  border-bottom:1px solid var(--linie);}
.frage{border:0;margin:0;padding:0;min-width:0;}
.frage legend{padding:0;}
.frage .nr{
  display:inline-grid;place-items:center;width:1.9rem;height:1.9rem;
  border-radius:var(--pille);background:var(--akzent-tief);color:var(--akzent-text);
  font-weight:700;font-size:.9rem;margin-right:.6rem;vertical-align:middle;
}
.frage .hilfe{color:var(--tinte-leise);margin:.4rem 0 1.4rem;max-width:52ch;}
.wahl{display:flex;flex-wrap:wrap;gap:.7rem;}
.wahl button{
  font:inherit;font-weight:600;cursor:pointer;color:var(--tinte);
  background:var(--grund-3);border:1px solid var(--linie);
  border-radius:var(--pille);padding:.6rem 1.1rem;min-height:44px;
  transition:border-color .15s ease,background .15s ease;
}
.wahl button:hover{border-color:var(--akzent);}
.wahl button[aria-pressed="true"]{
  background:var(--akzent);border-color:var(--akzent);color:#17140d;
}
.ergebnis{
  margin-top:1.6rem;padding:1.2rem 1.3rem;
  background:var(--grund);border:1px solid var(--linie);border-left:3px solid var(--akzent);
  border-radius:var(--r);min-height:3rem;
}
.ergebnis p{margin:0;color:var(--tinte);}
.ergebnis .ruf{display:block;margin-top:.8rem;font-weight:700;}
.ergebnis .ruf a{font-family:"Karla";font-variant-numeric:tabular-nums;}
.fussnote{color:var(--tinte-still);font-size:.82rem;margin:1rem 0 0;max-width:60ch;}

/* ---------- Signatur: Jahrhundert-Zeitleiste ---------- */
.zeit{position:relative;padding-left:2.2rem;}
.zeit__spur{position:absolute;left:.55rem;top:.4rem;bottom:.4rem;width:2px;
  background:var(--linie);border-radius:2px;overflow:hidden;}
.zeit__fuell{position:absolute;left:0;top:0;width:100%;
  height:calc(var(--p,1)*100%);background:var(--akzent);transition:height .1s linear;}
.zeit__schritt{position:relative;padding-bottom:2.2rem;}
.zeit__schritt:last-child{padding-bottom:0;}
.zeit__punkt{position:absolute;left:-2.2rem;top:.35rem;width:.85rem;height:.85rem;
  border-radius:var(--pille);background:var(--grund);border:2px solid var(--akzent);
  transform:translateX(.13rem);}
.zeit__jahr{font-family:"Karla";font-weight:700;font-variant-numeric:tabular-nums;
  color:var(--hebung);font-size:1.05rem;}
.zeit__schritt h3{margin:.2rem 0 .4rem;}
.zeit__schritt p{margin:0;color:var(--tinte-leise);max-width:52ch;}

/* ---------- Zitat ---------- */
.zitat{max-width:24ch;}
.zitat blockquote{
  font-family:"Newsreader",serif;font-weight:400;font-size:clamp(1.5rem,3vw,2.2rem);
  line-height:1.3;margin:0;color:var(--tinte);text-wrap:balance;
}
.zitat figcaption{margin-top:1.2rem;color:var(--tinte-leise);font-size:.95rem;}
.zitat figcaption b{color:var(--tinte);font-weight:700;}

/* zwei Spalten: kürzere läuft mit */
@media(min-width:900px){
  .zwei{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,4rem);
    align-items:start;}
  .klebt{position:sticky;top:96px;align-self:start;}
}

/* ---------- Galerie ---------- */
.galerie{display:grid;gap:1.1rem;grid-template-columns:minmax(0,1fr);}
@media(min-width:640px){.galerie{grid-template-columns:repeat(2,1fr);}}
.galerie figure{margin:0;min-width:0;}
.galerie img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r);
  border:1px solid var(--linie);filter:saturate(.9);}
.galerie figure.hoch img{aspect-ratio:3/4;}
.galerie figcaption{color:var(--tinte-still);font-size:.86rem;margin-top:.5rem;}
.galerie .gross{grid-column:1/-1;}
.galerie .gross img{aspect-ratio:16/9;}

/* ---------- Kontakt / Formular ---------- */
.kontakt-raster{display:grid;gap:clamp(1.6rem,4vw,3rem);grid-template-columns:minmax(0,1fr);}
@media(min-width:840px){.kontakt-raster{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}}
/* 05.08.2026: Die Kontaktzeilen bekommen dieselben Haarlinien wie die
   uebrigen Tabellen — sonst steht der Block als Textwuest da. */
.daten{list-style:none;margin:0;padding:0;display:grid;gap:0;
  border-top:1px solid var(--linie);}
.daten li{min-width:0;padding:.75rem 0;border-bottom:1px solid var(--linie);}
.daten .dt{display:block;color:var(--tinte-still);font-size:.82rem;
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:.15rem;}
.daten a{color:var(--tinte);text-decoration:none;}
.daten a:hover{color:var(--akzent-text);}
form.anfrage{display:grid;gap:1rem;}
form.anfrage label{display:grid;gap:.4rem;font-weight:600;font-size:.95rem;}
form.anfrage input,form.anfrage textarea{
  font:inherit;color:var(--tinte);background:var(--grund-2);
  border:1px solid var(--linie);border-radius:var(--r);padding:.75rem .9rem;
  min-width:0;width:100%;
}
form.anfrage input::placeholder,form.anfrage textarea::placeholder{color:var(--tinte-still);}
form.anfrage textarea{min-height:8rem;resize:vertical;}
form.anfrage input:focus,form.anfrage textarea:focus{outline:2px solid var(--akzent-text);outline-offset:1px;border-color:var(--akzent);}

/* ---------- Karte ---------- */
.karte-block{padding-block:0;margin-top:var(--luft);}
.karte-block > .huelle{margin-bottom:1.4rem;}
.karte-wrap{position:relative;width:100%;height:clamp(280px,38vw,460px);
  background:var(--grund-2);border-top:1px solid var(--linie);overflow:hidden;}
.karte-wrap iframe{width:100%;height:100%;border:0;display:block;}
.karte__sperre{
  position:absolute;inset:0;display:grid;place-content:center;gap:.9rem;
  text-align:center;padding:1.5rem;background:var(--grund-2);
}
.karte-wrap.ks-frei .karte__sperre{display:none;}
.karte__sperre p{color:var(--tinte-leise);max-width:44ch;margin:0 auto;}
.karte__sperre .zeile{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center;}

/* ---------- Fußbereich ---------- */
.fuss{background:var(--grund-2);border-top:1px solid var(--linie);
  --hebung:var(--akzent-text);padding-block:clamp(2.5rem,5vw,3.5rem);}
.fuss-raster{display:grid;gap:1.6rem 2rem;grid-template-columns:minmax(0,1fr);}
@media(min-width:720px){.fuss-raster{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);}}
.fuss h4{font-family:"Karla";font-weight:700;font-size:.82rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tinte-still);margin:0 0 .8rem;}
.fuss a{color:var(--tinte-leise);text-decoration:none;}
.fuss a:hover{color:var(--tinte);}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;}
.fuss .marke-f{font-family:"Newsreader",serif;font-size:1.2rem;color:var(--tinte);}
.ks-cookie-oeffnen{
  font:inherit;background:transparent;border:1px solid var(--linie);color:var(--tinte-leise);
  border-radius:var(--pille);padding:.5rem 1rem;cursor:pointer;min-height:40px;
}
.ks-cookie-oeffnen:hover{border-color:var(--akzent);color:var(--tinte);}
.fuss-unten{margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--linie);
  display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:center;
  color:var(--tinte-still);font-size:.86rem;}
.fuss-unten a{color:var(--tinte-still);}

/* ---------- Brotkrumen ---------- */
.krumen{display:flex;flex-wrap:wrap;gap:.4rem;align-items:baseline;
  color:var(--tinte-still);font-size:.86rem;margin-bottom:1.4rem;list-style:none;padding:0;}
.krumen li{display:flex;gap:.4rem;align-items:baseline;}
.krumen a{color:var(--tinte-leise);text-decoration:none;display:inline-block;padding:.25rem 0;}
.krumen .sep{color:var(--linie);}

/* ---------- Fokus ---------- */
:focus-visible{outline:2px solid var(--akzent-text);outline-offset:2px;border-radius:2px;}
a:focus-visible,button:focus-visible{outline:2px solid var(--akzent-text);outline-offset:3px;}

/* ---------- Hilfsklassen ---------- */
.abstand-o{margin-top:1.6rem;}
.mitte-knopf{margin-top:1.6rem;display:flex;flex-wrap:wrap;gap:1rem;}
.blk{display:block;}

/* ---------- Bewegung: Startzustände NICHT im CSS (editor-fest).
   Reduzierte Bewegung: nichts läuft, alles im Endzustand. ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;}
  .zeit__fuell{--p:1;height:100%;}
}

/* ── Maße und Ausführungen (ergänzt 05.08.2026) ───────────────────────
   Die bisherige Website nennt zu jedem Produkt exakte Längen, Durchmesser
   und Materialien. Genau das sucht ein Kunde, der bestellen will — es
   gehört auf die neue Seite, aber nicht als vier Textwände. Deshalb
   geklappt; `<details>` arbeitet ohne JavaScript.
   Kein `display` auf dem Kind des geschlossenen `<details>`: Chromium gibt
   ihm sonst einen Kasten in voller Grösse. */
.klapp{border:1px solid var(--linie);border-radius:var(--r);background:var(--grund-2);
  margin-top:.7rem;overflow:hidden}
.klapp>summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  gap:.8rem;padding:.95rem 1.1rem;min-height:48px;
  font-family:"Newsreader",serif;font-weight:600;font-size:1.1rem;color:var(--tinte)}
.klapp>summary::-webkit-details-marker{display:none}
.klapp>summary::after{content:"+";margin-left:auto;color:var(--akzent);
  font-size:1.35rem;line-height:1}
.klapp[open]>summary::after{content:"–"}
.klapp>summary:hover{background:rgba(233,238,231,.05)}
.klapp__inhalt{padding:0 1.1rem 1.25rem}
.klapp[open]>.klapp__inhalt{display:grid;gap:.9rem}
.masse{list-style:none;margin:0;padding:0;display:grid;gap:.1rem}
.masse li{display:grid;gap:.55rem;padding:.9rem 0;border-bottom:1px solid var(--linie)}
/* Das Foto des Betriebs zu jedem Maß. Die Bilder stammen von der bisherigen
   Website und zeigen genau das Produkt, dessen Maße daneben stehen — sie
   waren beim ersten Bau nicht mit übernommen worden (05.08.2026). */
.masse__bild{height:auto;width:100%;max-width:190px;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--r);border:1px solid var(--linie);background:var(--grund-3)}
.masse li:last-child{border-bottom:0}
.masse b{font-weight:600;color:var(--tinte)}
.masse span{color:var(--tinte-leise);font-size:.95rem}
@media (min-width:620px){
  .masse li{grid-template-columns:190px 12rem minmax(0,1fr);gap:1.4rem;align-items:center}
  .masse__bild{grid-row:span 1}
}