/* ============================================================
   Fundament für die Nennwerk-Demos
   ------------------------------------------------------------
   Enthält nur Mechanik: Skalen, Bewegung, wiederkehrende Bausteine.
   Alles ist über Tokens gesteuert. Jede Welt setzt ihre eigenen
   Tokens, Schriften und ihre eigene Struktur in der Seite selbst.

   Was hier NICHT hingehört: Farben, Schriftnamen, Sektionsaufbau.
   Eine Welt unterscheidet sich nicht durch andere Werte in denselben
   Bausteinen, sondern durch eigene Bausteine.
   ============================================================ */

:root{
  /* Abstände, Vierer-Basis */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  /* Schriftgrade: clamp mit Pixel-Untergrenze, damit es auf
     jeder Breite hält. Obergrenze verhindert den Plakateffekt. */
  --t-mini:clamp(.69rem,.67rem + .1vw,.78rem);
  --t-klein:clamp(.85rem,.83rem + .12vw,.95rem);
  --t-text:clamp(1rem,.97rem + .2vw,1.12rem);
  --t-gross:clamp(1.2rem,1.05rem + .75vw,1.65rem);
  --t-h3:var(--t-gross);
  --t-h2:clamp(1.9rem,1.4rem + 2.4vw,3.3rem);
  --t-h1:clamp(2.2rem,1.4rem + 3.8vw,4.6rem);
  --t-zahl:clamp(2.4rem,1.5rem + 4vw,5rem);

  /* Maße */
  --kante-max:1200px;
  --rand:clamp(20px,5vw,66px);
  --takt:clamp(68px,10vh,136px);
  --mass:62ch;

  /* Zwei Kurven, getrennte Rollen. Kurz für Bedienung,
     lang für Aufdeckung. Mehr braucht eine Seite nicht. */
  --ruhe:cubic-bezier(.23,1,.32,1);
  --vorhang:cubic-bezier(.53,0,0,1);

  /* Fallback-Tokens. Jede Welt überschreibt sie. */
  --grund:#FFFFFF; --flaeche:#F6F6F6; --tinte:#111111; --tinte-still:#666666;
  --linie:#E4E4E4; --kante:#CCCCCC; --akzent:#0044CC; --akzent-tinte:#FFFFFF;
  --radius:2px;
}

*,*::before,*::after{box-sizing:border-box}
/* scroll-padding: ohne diesen Wert landete die Zielüberschrift nach einem Klick im Menü 10 px unter der klebenden Kopfzeile */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:44px}
body{margin:0;background:var(--grund);color:var(--tinte);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
/* height:auto ist Pflicht: sonst behält ein Bild seine Attribut-Höhe, wenn die Breite begrenzt wird (Maler-Kontakt: Farbtöpfe hochkant gezogen). */
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{margin:0;text-wrap:balance}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3)}
p{margin:0;text-wrap:pretty}
::selection{background:var(--akzent);color:var(--akzent-tinte)}
:focus-visible{outline:2px solid var(--akzent);outline-offset:3px}

/* ---------- Bahn und Takt ---------- */
.bahn{width:100%;max-width:var(--kante-max);margin-inline:auto;padding-inline:var(--rand)}
.abschnitt{padding-block:var(--takt);background:var(--grund)}
.still{color:var(--tinte-still)}
.zahlen{font-variant-numeric:tabular-nums}
.mass{max-width:var(--mass)}

/* Der Abstand gehört der Grenze zwischen Abschnitten,
   nicht dem Paar aus Überschrift und Text. */
.kopfpaar{margin-bottom:var(--s8)}

/* ---------- Marke, das kleine Label ---------- */
.marke{display:block;font-size:var(--t-mini);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--akzent);margin-bottom:var(--s5)}

/* ---------- Knöpfe ---------- */
.knopf{display:inline-flex;align-items:center;gap:var(--s3);white-space:nowrap;
  padding:15px 26px;border-radius:var(--radius);text-decoration:none;
  border:1.5px solid var(--akzent);background:var(--akzent);color:var(--akzent-tinte);
  font-size:var(--t-klein);font-weight:700;line-height:1;
  transition:transform 130ms var(--ruhe),background-color 150ms var(--ruhe),
             border-color 150ms var(--ruhe),color 150ms var(--ruhe)}
.knopf--rand{background:transparent;color:var(--tinte);border-color:var(--kante)}

@media (hover:hover) and (pointer:fine){
  .knopf:hover{background:var(--akzent-hell,var(--akzent));border-color:var(--akzent-hell,var(--akzent))}
  .knopf--rand:hover{background:transparent;border-color:var(--akzent);color:var(--akzent)}
}

/* ---------- Kopfzeile mit Menü ohne Skript ---------- */
.kopf__reihe{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);
  padding-block:var(--s4)}
.kopf__name{font-size:var(--t-klein);font-weight:800;text-decoration:none;letter-spacing:-.01em}
.kopf__nav{display:flex;gap:clamp(14px,2.2vw,30px);font-size:var(--t-klein)}
.kopf__nav a{text-decoration:none;color:var(--tinte-still);padding-block:4px;
  border-bottom:1.5px solid transparent;
  transition:color 150ms var(--ruhe),border-color 150ms var(--ruhe)}
@media (hover:hover){.kopf__nav a:hover{color:var(--tinte);border-color:var(--akzent)}}

.menue{display:none;position:relative}
.menue > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;
  padding:10px 13px;border:1px solid var(--kante);border-radius:var(--radius);
  font-size:var(--t-klein);font-weight:700}
.menue > summary::-webkit-details-marker{display:none}
.menue > summary::marker{content:none}
.menue__strich{display:block;width:17px;height:1.5px;background:var(--tinte);position:relative}
.menue__strich::before,.menue__strich::after{content:"";position:absolute;left:0;
  width:17px;height:1.5px;background:var(--tinte);transition:transform 200ms var(--ruhe)}
.menue__strich::before{top:-5px}
.menue__strich::after{top:5px}
.menue[open] .menue__strich{background:transparent}
.menue[open] .menue__strich::before{transform:translateY(5px) rotate(45deg)}
.menue[open] .menue__strich::after{transform:translateY(-5px) rotate(-45deg)}
.menue__liste{position:absolute;right:0;top:calc(100% + 10px);min-width:min(76vw,230px);
  background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius);
  box-shadow:0 20px 44px rgba(0,0,0,.18);display:grid;padding:var(--s3) var(--s5) var(--s5);z-index:60}
.menue__liste a{padding-block:13px;text-decoration:none;border-bottom:1px solid var(--linie);
  font-size:var(--t-text);font-weight:700}
.menue__liste a:last-child{border-bottom:0}
@media (max-width:880px){
  .kopf__nav{display:none}
  .menue{display:block}
  /* Der Knopf wandert ins Menü. Sonst schiebt er es über den rechten Rand. */
  .kopf__reihe > .knopf{display:none}
}
/* Keine Seite darf waagerecht scrollen. */
html,body{max-width:100%;overflow-x:clip}
/* Browser geben figure 40 px Seitenrand. Das hat im Maschinenbau eine Figur auf 270 px gequetscht. */
figure{margin:0}

/* ---------- Belegzeile: Zahlen direkt unter dem Hero ---------- */
.beleg{border-block:1px solid var(--linie);background:var(--flaeche)}
.beleg__reihe{display:grid;grid-template-columns:repeat(4,1fr)}
.beleg__feld{padding:clamp(20px,2.6vw,32px) clamp(12px,1.6vw,20px) clamp(20px,2.6vw,32px) 0}
.beleg__feld + .beleg__feld{border-left:1px solid var(--linie);padding-left:clamp(16px,2.4vw,32px)}
.beleg__wert{display:block;font-size:var(--t-gross);font-weight:800;letter-spacing:-.02em;margin-bottom:2px}
.beleg__was{display:block;font-size:var(--t-mini);line-height:1.4;letter-spacing:.09em;text-transform:uppercase;color:var(--tinte-still)}
@media (max-width:720px){
  .beleg__reihe{grid-template-columns:1fr 1fr}
  .beleg__feld:nth-child(3){border-left:0;padding-left:0}
  .beleg__feld:nth-child(n+3){border-top:1px solid var(--linie)}
}

/* ---------- Leistungen als Zeilenliste, nie als Kartenraster ---------- */
.werk{border-top:1px solid var(--kante)}
.werk__zeile{display:grid;grid-template-columns:3.2ch minmax(0,30ch) minmax(0,1fr) auto;
  gap:clamp(14px,2.6vw,40px);align-items:baseline;
  padding-block:clamp(20px,2.8vw,34px);border-bottom:1px solid var(--linie)}
.werk__nr{font-size:var(--t-mini);font-weight:700;color:var(--akzent)}
/* line-height: zweizeilige Leistungsnamen standen mit dem Fließtext-Zeilenabstand (1,6) viel zu locker */
.werk__was{font-size:var(--t-gross);font-weight:700;letter-spacing:-.015em;line-height:1.2;hyphens:auto;overflow-wrap:anywhere}
.werk__wie{font-size:var(--t-klein);color:var(--tinte-still);max-width:58ch}
.werk__preis{font-size:var(--t-klein);font-weight:700;white-space:nowrap}
/* Kopfzeilen mit fester zweiter Spalte (Überschrift links, Satz rechts) brechen
   auf dem Telefon in eine Spalte. Ohne diese Regel bekommt die Überschrift null
   Breite und legt sich über den Satz. Gilt für jede Klasse auf __kopf. */
@media (max-width:820px){
  body [class*="__kopf"]{grid-template-columns:1fr;row-gap:var(--s4);align-items:start}
}
@media (max-width:820px){
  .werk__zeile{grid-template-columns:3.2ch 1fr;row-gap:var(--s3)}
  .werk__wie,.werk__preis{grid-column:2}
}

/* ---------- Datenblatt an Referenzen: was, woraus, welche Leistung ---------- */
.blatt{border-top:1px solid var(--linie)}
.blatt div{display:grid;grid-template-columns:10ch 1fr;gap:var(--s4);
  padding-block:10px;border-bottom:1px solid var(--linie);font-size:var(--t-klein)}
.blatt span:first-child{font-size:var(--t-mini);font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--tinte-still)}

/* ---------- Fragen ---------- */
/* min-content: bei 1024 px war die Kopfspalte 109 px breit, „Häufig gefragt“ braucht 159 und lief in die Fragen */
.frag{display:grid;grid-template-columns:minmax(min-content,1fr) minmax(0,66ch);
  gap:clamp(24px,4vw,64px);align-items:start}
.frag__liste{border-top:1px solid var(--kante)}
details{border-bottom:1px solid var(--linie)}
summary{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s5);
  padding-block:var(--s5);cursor:pointer;list-style:none;font-weight:700;font-size:var(--t-text)}
summary::-webkit-details-marker{display:none}
summary::marker{content:none}
summary::after{content:"";flex:none;width:12px;height:12px;margin-top:.4em;
  background:linear-gradient(var(--tinte-still),var(--tinte-still)) center/100% 1.5px no-repeat,
             linear-gradient(var(--tinte-still),var(--tinte-still)) center/1.5px 100% no-repeat;
  transition:rotate 250ms var(--ruhe)}
details[open] summary::after{rotate:45deg}
details p{padding-bottom:var(--s6);font-size:var(--t-klein);color:var(--tinte-still);max-width:58ch}
@media (max-width:860px){.frag{grid-template-columns:1fr}}

/* ---------- Reaktion auf den Zeiger ----------
   Alles Klickbare antwortet sichtbar. Nur für echte Zeiger: auf dem Telefon löst Tippen sonst ein hängendes Hover aus. */
a{text-underline-offset:.18em;text-decoration-thickness:1px;transition:color 150ms var(--ruhe),text-decoration-color 150ms var(--ruhe)}
summary{transition:color 150ms var(--ruhe)}
summary::after{transition:rotate 250ms var(--ruhe),scale 180ms var(--ruhe)}
@media (hover:hover) and (pointer:fine){
  summary:hover{color:var(--akzent)}
  summary:hover::after{scale:1.25}
  main a:not(.knopf):hover{color:var(--akzent);text-decoration-color:currentColor}
  /* Fußzeilen sind dunkel: die Akzentfarbe würde den Link dort beim Überfahren verschwinden lassen */
  .fuss a:hover{color:#fff;text-decoration-color:currentColor}
  .kopf__name:hover{opacity:.72}
}
.kopf__name{transition:opacity 150ms var(--ruhe)}
.knopf:active{transform:scale(.97)}

/* ---------- Telefon ----------
   Der Menüknopf erbte das Plus der Fragenliste und trug zwei Symbole. */
.menue > summary::after{content:none}
summary{text-wrap:balance}
@media (max-width:700px){
  /* Abschnittsabstand: auf dem Telefon lagen 170 bis 208 px zwischen zwei Inhalten */
  :root{--takt:clamp(52px,7.4vh,76px)}
  /* Knöpfe klebten am folgenden Bild (24 px), hatten aber 54 px Abstand zum Text darüber */
  body .held__gitter{row-gap:var(--s7)}
}

/* ---------- Fuß ---------- */
.fuss{padding-block:var(--s9) var(--s6)}
.fuss__reihe{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));
  gap:clamp(24px,4vw,60px);padding-bottom:var(--s8);border-bottom:1px solid var(--linie)}
.fuss h3{font-size:var(--t-text);margin-bottom:var(--s4)}
.fuss ul{margin:0;padding:0;list-style:none;display:grid;gap:var(--s3);
  font-size:var(--t-klein);color:var(--tinte-still)}
.fuss__titel{display:block;font-size:var(--t-mini);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--akzent);margin-bottom:var(--s5)}
.fuss__zeile{padding-top:var(--s5);font-size:var(--t-mini);color:var(--tinte-still);
  display:flex;flex-wrap:wrap;gap:var(--s5);justify-content:space-between}
@media (max-width:760px){.fuss__reihe{grid-template-columns:1fr}}

/* ---------- Bildkennzeichnung ---------- */
.kibild{position:relative}
.kibild figcaption{position:absolute;left:0;bottom:0;padding:6px 10px;
  background:rgba(0,0,0,.72);color:#fff;font-size:var(--t-mini);letter-spacing:.04em}

/* Bild mit beschreibender Unterschrift. Ohne diese Klasse erbt die Unterschrift
   den dunklen Kennzeichnungs-Chip und legt sich als graue Schrift darauf ueber
   das Bild. Hier steht der Satz unter dem Bild, die Kennzeichnung bleibt drauf. */
.kibild--satz figcaption{position:static;background:none;color:inherit;
  padding:var(--s4);letter-spacing:normal;font-size:var(--t-klein)}
.kibild--satz .kimarke{position:absolute;left:0;top:0;padding:6px 10px;
  background:rgba(0,0,0,.72);color:#fff;font-size:var(--t-mini);letter-spacing:.04em}
/* Telefon: Kennzeichnung oben statt unten, weil dort oft Textkarten über dem Bild liegen.
   Muss NACH der Grundregel stehen, sonst gewinnt deren bottom:0 und der Chip wird zur Säule. */
@media (max-width:820px){.kibild figcaption{bottom:auto;top:0}}

/* ============================================================
   Bewegung — Einblenden von unten, zeitgesteuert, einmal
   ------------------------------------------------------------
   Bis 19.09.2026 hing das Aufdecken an der Scrollposition
   (animation-timeline:view). Beim langsamen Scrollen stand der
   Inhalt dadurch halb aufgedeckt im Bild und blieb so stehen,
   solange niemand weiterscrollte — das sah „komisch“ aus (Sven).
   Jetzt läuft die Einblendung ab, sobald ein Element ins Bild
   kommt, und endet IMMER vollständig. Sie kann nicht auf halbem
   Weg stehen bleiben; deshalb ist Deckkraft hier unbedenklich —
   die alte Regel „nie als Überblendung“ galt der scrollgekoppelten
   Fassung, die tatsächlich halbdurchsichtig stehen konnte.
   Ohne Skript (.js fehlt) ist alles sofort sichtbar.
   ============================================================ */
@media (prefers-reduced-motion:no-preference){
  .js .ein,.js .ein--folge > *{opacity:0;transform:translateY(28px);
    transition:opacity 850ms var(--ruhe),transform 1100ms var(--ruhe)}
  .js .ein.da,.js .ein--folge.da > *{opacity:1;transform:none}
  .js .ein--folge.da > *{transition-delay:calc(var(--i,0) * 90ms)}
}
/* Weniger Bewegung heißt weniger und sanfter, nicht nichts.
   Die statische Fassung bleibt vollständig. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}