/* ============================================================
   baumfällung.com · Design-System „Mess-Station" (Entwurf D)
   Papierweiß + Tinte + Signalorange · harte Kanten · Space Mono
   ============================================================ */

/* ---------- Fonts (lokal, DSGVO) ---------- */
@font-face{font-family:'Bricolage Grotesque';src:url('../fonts/bricolage-latin.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url('../fonts/instrument-latin.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'Space Mono';src:url('../fonts/spacemono-400-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Space Mono';src:url('../fonts/spacemono-700-latin.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* ---------- Variablen ---------- */
:root{
  --papier:#FAF9F6;
  --weiss:#FFFFFF;
  --tinte:#122B21;
  --signal:#FF5C1F;
  --signal-dunkel:#DE460E;
  --moos:#3E7A5C;
  --sand:#F1EBDF;
  --linie:#D9D2C4;
  --tinte-70:rgba(18,43,33,.70);
  --tinte-55:rgba(18,43,33,.55);
  --radius:2px;              /* Mess-Instrument: fast keine Rundung */
  --kante:1.5px solid var(--tinte);
  --schatten:4px 4px 0 var(--tinte);
  --schatten-s:2.5px 2.5px 0 var(--tinte);
  --schatten-signal:4px 4px 0 var(--signal-dunkel);
  --font-kopf:'Bricolage Grotesque',system-ui,sans-serif;
  --font-text:'Instrument Sans',system-ui,sans-serif;
  --font-mono:'Space Mono',ui-monospace,monospace;
  --breit:1180px;
  --takt:.22s;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-text);
  background:var(--papier);
  color:var(--tinte);
  line-height:1.65;
  font-size:16.5px;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;cursor:pointer}
::selection{background:var(--signal);color:var(--weiss)}

/* ---------- Takt-Raster (Werkstatt-Papier) ---------- */
body{
  background-image:
    linear-gradient(var(--linie) 1px,transparent 1px),
    linear-gradient(90deg,var(--linie) 1px,transparent 1px);
  background-size:64px 64px;
  background-position:-1px -1px;
  background-attachment:fixed;
}

/* ---------- Typografie ---------- */
h1,h2,h3,h4{font-family:var(--font-kopf);font-weight:700;line-height:1.12;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:clamp(1.9rem,4.4vw,3.3rem);font-weight:800}
h2{font-size:clamp(1.45rem,2.8vw,2.15rem)}
h3{font-size:clamp(1.1rem,1.9vw,1.35rem)}
p{max-width:72ch}
.mono{font-family:var(--font-mono)}

/* Stempel / Etikett */
.stempel{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--font-mono);font-size:.78rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinte);
  border:var(--kante);background:var(--weiss);
  padding:.42em .85em .38em;
  box-shadow:var(--schatten-s);
}
.stempel b{color:var(--signal-dunkel)}
.stempel.orange{background:var(--signal);color:var(--weiss);border-color:var(--tinte)}
.kicker{
  font-family:var(--font-mono);font-size:.72rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--signal-dunkel);
  display:inline-flex;align-items:center;gap:.6em;margin-bottom:.9rem;
}
.kicker::before{content:"";width:26px;height:1.5px;background:var(--signal-dunkel)}

/* ---------- Layout ---------- */
.breit{max-width:var(--breit);margin:0 auto;padding:0 clamp(16px,4vw,44px)}
section{padding:clamp(3.4rem,7vw,5.6rem) 0}
.sand{background:var(--sand)}
.weiss-band{background:var(--weiss);border-top:var(--kante);border-bottom:var(--kante)}
.schnittlinie{
  border:none;border-top:1.5px dashed var(--linie);margin:0;
}

/* Kopfzeilen der Sektionen */
.kopf{display:flex;align-items:end;justify-content:space-between;gap:1.4rem;margin-bottom:clamp(1.6rem,3vw,2.6rem);flex-wrap:wrap}
.kopf p{color:var(--tinte-70);max-width:52ch}
.kopf .nummer{
  font-family:var(--font-mono);font-weight:700;color:var(--linie);
  font-size:clamp(2.6rem,6vw,4rem);line-height:1;user-select:none;
}

/* ---------- Header (Desktop sticky · Mobil statisch) ---------- */
.top{
  position:relative;z-index:60;
  background:var(--papier);
  border-bottom:var(--kante);
}
.top .leiste{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.72rem clamp(16px,4vw,44px);
  max-width:var(--breit);margin:0 auto;
}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.brand .logo{width:30px;height:30px;flex:none}
.brand-name{font-family:var(--font-kopf);font-weight:800;font-size:1.06rem;letter-spacing:-.02em}
.brand-name .tld{color:var(--signal-dunkel)}
.nav{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;justify-content:flex-end}
.nav a{
  text-decoration:none;font-weight:700;font-size:.83rem;
  font-family:var(--font-mono);letter-spacing:.03em;
  color:var(--tinte);position:relative;
  border:var(--kante);background:var(--weiss);
  padding:.42em .85em;
  box-shadow:var(--schatten-s);
  transition:transform var(--takt) ease,box-shadow var(--takt) ease,background var(--takt) ease;
}
.nav a:hover,.nav a.aktiv{
  background:var(--tinte);color:var(--weiss);
  transform:translate(2px,2px);box-shadow:0 0 0 var(--tinte);
}
.top .cta-klein{
  text-decoration:none;font-weight:700;font-size:.9rem;
  font-family:var(--font-mono);letter-spacing:.06em;
  border:var(--kante);background:var(--signal);color:var(--weiss);
  padding:.5em 1em;box-shadow:var(--schatten-s);
  transition:transform var(--takt) ease,box-shadow var(--takt) ease;
}
.top .cta-klein:hover{transform:translate(2px,2px);box-shadow:1.5px 1.5px 0 var(--tinte)}
.progress{
  height:3px;background:var(--signal);
  width:0%;transition:width .08s linear;
}
.burger{display:none}
/* Sticky nur ab Tablet aufwärts */
@media(min-width:961px){
  .top{position:sticky;top:0}
}

/* Mobile-Nav: global versteckt — nur Mobil via Burger einblendbar */
.nav-mobil{display:none}

/* Mobile-Nav */
@media(max-width:960px){
  .burger{
    display:grid;place-items:center;width:42px;height:42px;
    border:var(--kante);background:var(--weiss);box-shadow:var(--schatten-s);
  }
  .burger svg{width:20px;height:20px}
  .top .nav{display:none}
  .top .cta-klein{display:none}
  .nav-mobil{
    display:none;border-top:var(--kante);background:var(--weiss);
  }
  .nav-mobil.offen{display:block}
  .nav-mobil a{
    display:block;text-decoration:none;font-weight:600;
    padding:.85rem clamp(16px,4vw,44px);border-bottom:1.5px dashed var(--linie);
  }
  .nav-mobil a:last-child{border-bottom:none}
}

/* ---------- Hero · Mess-Station ---------- */
.hero{padding-top:clamp(2rem,4vw,3.4rem);overflow:hidden}
.hero-gitter{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.6rem,4vw,3.4rem);align-items:stretch}
.hero-text{display:flex;flex-direction:column;justify-content:center;min-width:0}
.hero h1{margin:.9rem 0 1.1rem}
.hero h1 .u{color:var(--signal-dunkel)}
.hero-lead{font-size:1.08rem;color:var(--tinte-70);margin-bottom:1.6rem;max-width:46ch}
.plz-form{
  display:flex;gap:.7rem;flex-wrap:wrap;align-items:stretch;
  max-width:520px;
}
.plz-form input{
  flex:1;min-width:150px;
  font-family:var(--font-mono);font-size:1.05rem;font-weight:700;
  padding:.72em .9em;border:var(--kante);background:var(--weiss);
  outline-offset:2px;
}
.plz-form input:focus{outline:2.5px solid var(--signal)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--font-mono);font-weight:700;letter-spacing:.05em;
  border:var(--kante);box-shadow:var(--schatten);
  padding:.74em 1.35em;text-decoration:none;
  transition:transform var(--takt) ease,box-shadow var(--takt) ease;
  font-size:.98rem;
}
.btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--tinte)}
.btn-primary{background:var(--signal);color:var(--weiss)}
.btn-primary:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--tinte)}
.btn-tinte{background:var(--tinte);color:var(--weiss)}
.btn-tinte:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--tinte)}
.btn-geist{background:var(--weiss);color:var(--tinte)}
.btn-geist:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--tinte)}
.hero-vertrauen{
  display:flex;gap:1.6rem;flex-wrap:wrap;margin-top:1.5rem;
  font-size:.86rem;color:var(--tinte-55);
}
.hero-vertrauen span{display:inline-flex;align-items:center;gap:.45em}
.hero-vertrauen .haken{color:var(--moos);font-weight:700}

/* Mess-Turm */
.station{
  position:relative;background:var(--weiss);
  border:var(--kante);box-shadow:var(--schatten);
  padding:clamp(1rem,2.4vw,1.5rem);
  display:flex;flex-direction:column;
}
.station-kopf{
  display:flex;justify-content:space-between;align-items:center;gap:.8rem;
  border-bottom:1.5px dashed var(--linie);padding-bottom:.7rem;margin-bottom:.6rem;
}
.station-titel{font-family:var(--font-kopf);font-weight:700;font-size:.95rem}
.messfeld{flex:1;display:grid;grid-template-columns:44px 1fr;gap:0;position:relative;min-height:340px}
/* Skala */
.skala{
  position:relative;border-right:1.5px solid var(--tinte);
  background:repeating-linear-gradient(to bottom,var(--linie) 0 1.5px,transparent 1.5px calc(100%/6));
}
.skala .tick{
  position:absolute;right:0;transform:translateY(50%);
  font-family:var(--font-mono);font-size:.6rem;font-weight:700;color:var(--tinte-55);
  background:var(--weiss);padding:1px 3px;line-height:1;
}
.skala .tick::after{content:"";display:none}
/* Baum */
.baum-buehne{position:relative;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;padding:0 6px}
.boden{
  width:100%;height:26px;border-top:1.5px solid var(--tinte);
  background:repeating-linear-gradient(-45deg,var(--sand) 0 7px,var(--papier) 7px 14px);
  position:absolute;bottom:0;left:0;
}
.baum{
  position:absolute;bottom:22px;left:50%;
  width:clamp(120px,15vw,170px);
  transform-origin:bottom center;
  transition:height .5s cubic-bezier(.34,1.4,.5,1);
  will-change:height;
}
.baum.wippt{animation:wippen .55s ease}
@keyframes wippen{
  0%{transform:translateX(-50%) rotate(0)}
  30%{transform:translateX(-50%) rotate(1.6deg)}
  60%{transform:translateX(-50%) rotate(-1.2deg)}
  100%{transform:translateX(-50%) rotate(0)}
}
.baum svg{width:100%;height:100%;overflow:visible}
/* Mess-Label */
.mess-label{
  position:absolute;left:calc(50% + clamp(60px,8vw,88px));
  font-family:var(--font-mono);font-size:.72rem;font-weight:700;
  background:var(--tinte);color:var(--weiss);
  padding:.28em .55em;white-space:nowrap;
  transition:bottom .5s cubic-bezier(.34,1.4,.5,1);
}
.mess-label::before{
  content:"";position:absolute;left:-16px;top:50%;
  width:16px;height:1.5px;background:var(--signal-dunkel);
}
.mess-label .mini{color:var(--signal);font-size:.9em}
/* Vogel */
.vogel{
  position:absolute;right:14%;opacity:0;transform:translateY(8px) rotate(-8deg);
  transition:opacity .4s ease,transform .4s ease;
  width:34px;
}
.vogel.da{opacity:1;transform:translateY(0) rotate(0)}
/* Slider-Schublade */
.schublade{
  border-top:1.5px dashed var(--linie);margin-top:.8rem;padding-top:.9rem;
  display:grid;grid-template-columns:1fr auto;gap:.9rem;align-items:center;
}
.schublade .label-zeile{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.4rem}
.hoehe-input{width:100%;appearance:none;height:34px;background:var(--papier);border:var(--kante);cursor:ew-resize}
.hoehe-input::-webkit-slider-thumb{
  appearance:none;width:26px;height:34px;background:var(--signal);
  border:var(--kante);box-shadow:2px 2px 0 var(--tinte);
  cursor:ew-resize;
}
.hoehe-input::-moz-range-thumb{
  width:24px;height:32px;background:var(--signal);
  border:var(--kante);border-radius:0;box-shadow:2px 2px 0 var(--tinte);
  cursor:ew-resize;
}
.hoehe-input::-moz-range-track{background:transparent}
.preis-anzeige{
  text-align:right;border:var(--kante);background:var(--sand);
  padding:.55em .85em;box-shadow:var(--schatten-s);min-width:172px;
}
.preis-anzeige .titel{font-family:var(--font-mono);font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--tinte-55)}
.preis-anzeige .wert{
  font-family:var(--font-mono);font-weight:700;font-size:1.18rem;
  white-space:nowrap;
}
.preis-anzeige .wert .bis{font-size:.85em;color:var(--tinte-55)}
.kleingedrucktes{font-size:.72rem;color:var(--tinte-55);margin-top:.55rem}

/* Fallende Blätter (CTA-Microimpression) */
.blatt{
  position:fixed;top:-40px;z-index:99;pointer-events:none;
  font-size:1.05rem;opacity:0;
  animation:blattfall 2.8s ease-in forwards;
}
@keyframes blattfall{
  0%{opacity:0;transform:translateY(0) rotate(0)}
  12%{opacity:.95}
  100%{opacity:0;transform:translateY(72vh) translateX(var(--dx,20px)) rotate(340deg)}
}

/* ---------- Karten mit Offset-Schatten ---------- */
.karten-gitter{display:grid;gap:1.4rem}
.karte{
  position:relative;background:var(--weiss);
  border:var(--kante);box-shadow:var(--schatten);
  padding:1.5rem 1.5rem 1.35rem;
  transition:transform .3s ease,box-shadow .3s ease;
}
.karte:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--tinte)}
.karte .oben{display:flex;justify-content:space-between;align-items:start;gap:1rem;margin-bottom:.7rem}
.karte h3{margin-bottom:.45rem}
.karte p{color:var(--tinte-70);font-size:.96rem}
.preis-band{
  display:inline-flex;align-items:center;gap:.4em;
  font-family:var(--font-mono);font-weight:700;font-size:1.02rem;
  background:var(--tinte);color:var(--weiss);padding:.3em .7em;
}
.tick{
  font-family:var(--font-mono);font-size:.72rem;font-weight:700;
  border:1.5px solid var(--linie);padding:.2em .5em;color:var(--tinte-55);
}
.tick.hit{border-color:var(--signal-dunkel);color:var(--signal-dunkel)}
.karte .fuss{
  display:flex;justify-content:space-between;align-items:center;gap:.8rem;
  border-top:1.5px dashed var(--linie);margin-top:1.1rem;padding-top:.85rem;flex-wrap:wrap;
}
@media(min-width:701px){.karten-gitter-3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:701px){.karten-gitter-2{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.karten-gitter{gap:1.1rem}}

/* ---------- Leistungs-Index (nummerierte Liste) ---------- */
.index-liste{list-style:none;counter-reset:idx}
.index-liste li{
  counter-increment:idx;
  display:grid;grid-template-columns:56px 1fr;gap:1.2rem;
  padding:1.05rem 0;border-bottom:1.5px dashed var(--linie);
  align-items:start;
}
.index-liste li:last-child{border-bottom:none}
.index-liste li::before{
  content:counter(idx,decimal-leading-zero);
  font-family:var(--font-mono);font-weight:700;font-size:1.5rem;
  color:var(--linie);line-height:1.15;transition:color .18s ease,transform .18s ease;
}
.index-liste li:hover::before{color:var(--signal);transform:translateX(4px)}
.index-liste h3{font-size:1.06rem;margin-bottom:.3rem}
.index-liste p{color:var(--tinte-70);font-size:.94rem}

/* ---------- Ablauf / Schritte ---------- */
.schritte{display:grid;gap:1.2rem;counter-reset:schritt}
.schritt{
  position:relative;background:var(--weiss);border:var(--kante);
  box-shadow:var(--schatten-s);padding:1.15rem 1.2rem 1.05rem;
  display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:center;
  transition:transform .25s ease,box-shadow .25s ease;
}
.schritt:hover{transform:translate(-2px,-2px);box-shadow:4.5px 4.5px 0 var(--tinte)}
.schritt-nr{
  font-family:var(--font-mono);font-weight:700;font-size:1.7rem;
  width:52px;height:52px;display:grid;place-items:center;
  border:var(--kante);background:var(--sand);
}
.schritt h3{font-size:1.02rem;margin-bottom:.15rem}
.schritt p{font-size:.9rem;color:var(--tinte-70)}
@media(min-width:761px){.schritte{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1181px){.schritte-4{grid-template-columns:repeat(4,1fr)}}

/* ---------- Ratgeber-Karten (Kapitel-Nummern) ---------- */
.rg-gitter{display:grid;gap:1.3rem}
.rg-karte{
  display:block;text-decoration:none;background:var(--weiss);
  border:var(--kante);box-shadow:var(--schatten);
  padding:1.3rem 1.35rem;position:relative;
  transition:transform .25s ease,box-shadow .25s ease;
}
.rg-karte:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--tinte)}
.rg-karte .kapitel{
  font-family:var(--font-mono);font-weight:700;font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--tinte-55);
  display:flex;justify-content:space-between;margin-bottom:.65rem;
}
.rg-karte .kapitel b{color:var(--linie);transition:color .18s ease;font-size:.95rem}
.rg-karte:hover .kapitel b{color:var(--signal)}
.rg-karte h3{font-size:1.06rem;margin-bottom:.4rem}
.rg-karte p{font-size:.92rem;color:var(--tinte-70)}
.rg-karte .meta{
  margin-top:.85rem;font-family:var(--font-mono);font-size:.7rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--signal-dunkel);
}
@media(min-width:701px){.rg-gitter{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1001px){.rg-gitter-3{grid-template-columns:repeat(3,1fr)}}

/* ---------- Saison-Band ---------- */
.saison-band{border:var(--kante);box-shadow:var(--schatten);background:var(--weiss);padding:1.5rem}
.saison-grid{display:grid;grid-template-columns:auto 1fr auto;gap:1.4rem;align-items:center}
.saison-dial{
  width:88px;height:88px;border:var(--kante);background:var(--sand);
  display:grid;place-items:center;position:relative;
}
.saison-dial .nadel{position:absolute;width:2.5px;height:34px;background:var(--signal);bottom:50%;transform-origin:bottom center;transform:rotate(var(--w,0deg));transition:transform .6s cubic-bezier(.34,1.4,.5,1)}
.saison-dial .nadel::after{content:"";position:absolute;top:-7px;left:-4.5px;width:9px;height:9px;background:var(--signal);border:1.5px solid var(--tinte);border-radius:50%}
.saison-dial .zentrum{width:12px;height:12px;background:var(--tinte);border-radius:50%;z-index:2}
.saison-monate{display:flex;font-family:var(--font-mono);font-size:.66rem;font-weight:700;color:var(--tinte-55);letter-spacing:.05em}
.saison-info h3{margin-bottom:.3rem}
.saison-info p{color:var(--tinte-70);font-size:.94rem}
.saison-badge{
  font-family:var(--font-mono);font-size:.72rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;border:var(--kante);padding:.5em .9em;
  background:var(--signal);color:var(--weiss);box-shadow:var(--schatten-s);
  white-space:nowrap;
}
@media(max-width:760px){.saison-grid{grid-template-columns:1fr;justify-items:start;gap:1rem}}

/* ---------- PLZ-Chips (Städte) ---------- */
.chips{display:flex;flex-wrap:wrap;gap:.55rem}
.chip-stadt{
  font-family:var(--font-mono);font-size:.78rem;font-weight:700;
  text-decoration:none;border:var(--kante);background:var(--weiss);
  padding:.34em .75em;box-shadow:var(--schatten-s);
  transition:transform var(--takt) ease,box-shadow var(--takt) ease,background var(--takt) ease;
}
.chip-stadt:hover{background:var(--signal);color:var(--weiss);transform:translate(2px,2px);box-shadow:0 0 0 var(--tinte)}

/* ---------- Partner-Band (Lead-Modell) ---------- */
.partner-band{
  background:var(--tinte);color:var(--papier);
  border-top:var(--kante);border-bottom:var(--kante);
}
.partner-band h2,.partner-band h3{color:var(--weiss)}
.partner-band p{color:rgba(250,249,246,.78)}
.partner-band .kicker{color:var(--signal)}
.partner-band .kicker::before{background:var(--signal)}
.partner-innen{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.6rem,4vw,3rem);align-items:start}
@media(max-width:860px){.partner-innen{grid-template-columns:1fr}}
.lead-stufen{list-style:none}
.lead-stufen li{
  display:grid;grid-template-columns:auto 1fr auto;gap:.9rem;align-items:center;
  padding:.85rem 0;border-bottom:1.5px dashed rgba(250,249,246,.22);
}
.lead-stufen li:last-child{border-bottom:none}
.lead-stufen .art{font-family:var(--font-kopf);font-weight:700;color:var(--weiss)}
.lead-stufen .erk{font-size:.85rem;color:rgba(250,249,246,.7)}
.lead-stufen .faktor{
  font-family:var(--font-mono);font-weight:700;color:var(--signal);
  white-space:nowrap;
}
.partner-kasten{
  background:var(--papier);color:var(--tinte);border:1.5px solid rgba(250,249,246,.5);
  box-shadow:5px 5px 0 var(--signal-dunkel);padding:1.5rem;
}
.partner-kasten h3{margin-bottom:.6rem}
.partner-kasten p{font-size:.92rem;color:var(--tinte-70)}
.partner-kasten p+p{margin-top:.6rem}

/* ---------- FAQ ---------- */
.faq details{
  background:var(--weiss);border:var(--kante);box-shadow:var(--schatten-s);
  margin-bottom:1rem;
  transition:box-shadow .2s ease;
}
.faq details[open]{box-shadow:var(--schatten)}
.faq summary{
  cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1rem 1.15rem;
  font-family:var(--font-kopf);font-weight:700;font-size:1.01rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";font-family:var(--font-mono);font-weight:700;
  width:30px;height:30px;flex:none;display:grid;place-items:center;
  border:var(--kante);background:var(--sand);font-size:1.15rem;
  transition:background .18s ease,transform .18s ease;
}
.faq details[open] summary::after{content:"−";background:var(--signal);color:var(--weiss)}
.faq .antwort{padding:0 1.15rem 1.2rem;color:var(--tinte-70);font-size:.95rem;max-width:75ch}
.faq .antwort p+p{margin-top:.7rem}
.faq .antwort ul{margin:.5rem 0 .5rem 1.1rem}
.faq .antwort li+li{margin-top:.3rem}

/* ---------- Tabellen ---------- */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:var(--kante);box-shadow:var(--schatten);background:var(--weiss)}
.tabelle{border-collapse:collapse;width:100%;min-width:560px;font-size:.92rem}
.tabelle caption{
  caption-side:top;text-align:left;font-family:var(--font-mono);
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinte-55);padding:.7rem 1rem;border-bottom:var(--kante);background:var(--sand);
}
.tabelle th,.tabelle td{padding:.7rem 1rem;text-align:left;border-bottom:1.5px dashed var(--linie);vertical-align:top}
.tabelle thead th{
  font-family:var(--font-mono);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  border-bottom:var(--kante);background:var(--papier);
}
.tabelle tbody tr:last-child td{border-bottom:none}
.tabelle .z{font-family:var(--font-mono);font-weight:700;white-space:nowrap}
.tabelle tbody tr:hover{background:var(--sand)}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,.9,.36,1)}
.reveal.da{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ---------- Footer ---------- */
.fussbereich{
  background:var(--tinte);color:var(--papier);
  padding:3rem 0 2.2rem;margin-top:0;
}
.fuss-gitter{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem}
@media(max-width:860px){.fuss-gitter{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.fuss-gitter{grid-template-columns:1fr}}
.fuss-gitter h4{
  font-family:var(--font-mono);font-size:.72rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--signal);
  margin-bottom:.9rem;
}
.fuss-gitter a{display:block;text-decoration:none;color:rgba(250,249,246,.72);font-size:.9rem;padding:.22rem 0}
.fuss-gitter a:hover{color:var(--weiss)}
.fuss-gitter p{color:rgba(250,249,246,.6);font-size:.85rem}
.fuss-marke{display:flex;align-items:center;gap:.6rem;margin-bottom:.9rem}
.fuss-marke .logo{width:28px;height:28px}
.fuss-marke .name{font-family:var(--font-kopf);font-weight:800;font-size:1.05rem;color:var(--weiss)}
.fuss-unten{
  border-top:1.5px dashed rgba(250,249,246,.25);margin-top:2.2rem;padding-top:1.2rem;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:.72rem;color:rgba(250,249,246,.5);
}
.fuss-unten a{color:rgba(250,249,246,.7);text-decoration:none}
.fuss-unten a:hover{color:var(--signal)}

/* ---------- Artikel (Ratgeber) ---------- */
.artikel{padding-top:clamp(1.8rem,4vw,3rem)}
.artikel-kopf{max-width:840px;margin:0 auto}
.artikel-titel{margin:.8rem 0 .9rem;font-size:clamp(1.7rem,3.6vw,2.7rem)}
.artikel-meta{
  display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;
  font-family:var(--font-mono);font-size:.72rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--tinte-55);
  margin-bottom:1.6rem;
}
.artikel-meta .punkt{color:var(--signal-dunkel)}
.artikel-koerper{max-width:840px;margin:0 auto}
.artikel-koerper p{margin-bottom:1.05rem}
.artikel-koerper h2{
  margin:2.4rem 0 .9rem;padding-top:.2rem;scroll-margin-top:5.5rem;
}
.artikel-koerper h3{margin:1.7rem 0 .55rem;scroll-margin-top:5.5rem}
.artikel-koerper ul,.artikel-koerper ol{margin:0 0 1.05rem 1.25rem}
.artikel-koerper li+li{margin-top:.4rem}
.artikel-koerper li::marker{color:var(--signal-dunkel);font-weight:700}
.artikel-koerper a{color:var(--signal-dunkel);font-weight:600;text-decoration-thickness:1.5px;text-underline-offset:3px}
.artikel-koerper a:hover{color:var(--signal)}
.artikel-koerper strong{font-weight:700}
.merkkasten{
  border:var(--kante);box-shadow:var(--schatten-s);background:var(--sand);
  padding:1.15rem 1.3rem;margin:1.5rem 0;max-width:75ch;
}
.merkkasten .titel{
  font-family:var(--font-mono);font-size:.7rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--signal-dunkel);
  display:flex;align-items:center;gap:.5em;margin-bottom:.5rem;
}
.merkkasten p{font-size:.94rem;margin-bottom:0}
.merkkasten p+p{margin-top:.5rem}
.merkkasten.weiss{background:var(--weiss)}
.inhalts-nav{
  border:var(--kante);background:var(--weiss);box-shadow:var(--schatten-s);
  padding:1.15rem 1.3rem;margin:0 0 2.2rem;
}
.inhalts-nav .titel{font-family:var(--font-mono);font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:.6rem;color:var(--tinte-55)}
.inhalts-nav ol{margin-left:1.2rem;font-size:.94rem}
.inhalts-nav li+li{margin-top:.35rem}
.inhalts-nav a{text-decoration:none;font-weight:600;border-bottom:1.5px dashed var(--linie)}
.inhalts-nav a:hover{border-bottom-color:var(--signal)}
.artikel-footer{
  max-width:840px;margin:2.6rem auto 0;
  border-top:var(--kante);padding-top:1.6rem;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:center;
}

/* Breadcrumb */
.krume{
  font-family:var(--font-mono);font-size:.72rem;font-weight:700;letter-spacing:.06em;
  color:var(--tinte-55);margin-bottom:1rem;
}
.krume a{color:var(--tinte-55);text-decoration:none}
.krume a:hover{color:var(--signal-dunkel)}
.krume .sep{color:var(--signal-dunkel);margin:0 .45em}

/* ---------- Sonstiges ---------- */
.spalt-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,3vw,2.6rem)}
@media(max-width:760px){.spalt-2{grid-template-columns:1fr}}
.ok-box{
  display:none;border:var(--kante);box-shadow:var(--schatten-s);background:var(--weiss);
  padding:1.1rem 1.3rem;margin-top:1rem;max-width:520px;
}
.ok-box.da{display:block;animation:reinpop .35s cubic-bezier(.34,1.4,.5,1)}
@keyframes reinpop{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:none}}
.ok-box .t{font-family:var(--font-kopf);font-weight:700;margin-bottom:.25rem;display:flex;gap:.5em;align-items:center}
.ok-box .t::before{content:"✓";color:var(--moos);font-family:var(--font-mono);font-weight:700}
.ok-box p{font-size:.9rem;color:var(--tinte-70);margin:0}

/* Hero responsive */
@media(max-width:940px){
  .hero-gitter{grid-template-columns:1fr}
  .station{order:-1}
  .messfeld{min-height:280px}
}

/* 3D-Tilt nur für Geräte mit Hover */
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .tilt{transition:transform .2s ease;transform-style:preserve-3d;will-change:transform}
}