/* ============================================================
   DATENSTADL – Design-System
   CI: Tannengrün & Holzbraun · Editorial · Digitales Handwerk
   ============================================================ */
/* Lokale Schriften (DSGVO-konform, kein Google-Server-Kontakt) */
@font-face{font-family:'Clash Display';src:url('fonts/clash-display.woff2') format('woff2');font-weight:200 700;font-style:normal;font-display:swap}
@font-face{font-family:'Manrope';src:url('fonts/manrope.woff2') format('woff2');font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:'Comfortaa';src:url('fonts/comfortaa.woff2') format('woff2');font-weight:500 700;font-style:normal;font-display:swap}

:root{
  /* Farben */
  --tanne:#12291d;          /* tiefes Dunkelgrün – Primär */
  --tanne-tief:#0b1d14;     /* fast schwarzgrün – dunkle Sektionen */
  --moos:#2f5c3e;           /* helleres Grün – Akzente */
  --salbei:#a9bfae;         /* gedämpftes Grün – Text auf dunkel */
  --holz:#7c4a1f;           /* sattes Braun – Sekundär */
  --karamell:#b97c3e;       /* helles Braun – Akzent/Hover, NUR für Deko/Flächen */
  /* Karamell hat als Textfarbe zu wenig Kontrast (2,96:1 auf Creme – WCAG AA
     verlangt 4,5:1). Für Text deshalb diese beiden Varianten verwenden:
     -tief auf hellem Grund (4,65:1), -hell auf dunklem Grund (4,63:1).
     Die CI-Farbe selbst bleibt unverändert. */
  --karamell-tief:#8e5f2f;  /* Karamell für Text auf Creme/Papier */
  --karamell-hell:#be7f3f;  /* Karamell für Text auf Tanne/Tanne-tief */
  --creme:#f2ecdd;          /* Papierton – Haupthintergrund */
  --papier:#faf6ec;         /* hellere Karte */
  --tinte:#1b1a14;          /* Text */
  --grau:#6d685c;           /* Nebentext */
  --linie:#ddd3bd;          /* Linien */
  /* Schatten – vier Stufen statt 19 Einzelwerten.
     Die Farbe ist Tannengrün, nicht Schwarz: ein farbiger Schatten wirkt auf
     dem warmen Papierton wie Licht im Raum, ein grauer wie Schmutz.
     Die negative Streuung (-26px) zieht den Schatten unter das Element
     zurück, damit er nicht als Rand herausquillt. */
  --schatten-s:0 6px 18px -8px rgba(18,41,29,.6);        /* Knöpfe */
  --schatten-m:0 12px 26px -12px rgba(18,41,29,.5);      /* Icon-Plättchen, Kreise */
  --schatten-l:0 22px 46px -26px rgba(18,41,29,.38);     /* Karten beim Überfahren */
  --schatten-xl:0 30px 60px -28px rgba(18,41,29,.42);    /* schwebende Bilder, Panels */
  --schatten-m-dunkel:0 12px 26px -12px rgba(0,0,0,.6);  /* dieselben Stufen auf dunklem Grund */
  --schatten-l-dunkel:0 22px 46px -26px rgba(0,0,0,.55);
  --schatten-glut:0 10px 22px -8px rgba(185,124,62,.85); /* Sonderfall: CTA-Hover glüht in Karamell */
  /* Typo */
  --serif:"Clash Display","Segoe UI",system-ui,sans-serif;
  --sans:"Manrope","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);background:var(--creme);color:var(--tinte);
  line-height:1.7;font-size:16.5px;overflow-x:hidden;
}
::selection{background:var(--karamell);color:#fff}

/* Korn-Textur über allem (subtil) */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9990;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Seitenränder respektieren die Safe-Area (iPhone-Notch im Querformat) */
.wrap{max-width:1160px;margin:0 auto;padding:0 max(26px,env(safe-area-inset-right)) 0 max(26px,env(safe-area-inset-left))}
img,svg{max-width:100%;display:block}
a{color:inherit}

/* ---------- Strich-Icons (ein Stil für die ganze Seite) ----------
   Alle Symbole der Website sind gezeichnete Linien im Stil des Logos – keine Emojis.
   Emojis zeichnet das Betriebssystem: auf iPhone anders als auf Windows, immer bunt,
   nicht einfärbbar. Diese Icons erben stattdessen die Textfarbe (currentColor).
   Die Strichstärke wird pro Größe gesetzt: kleine Icons brauchen kräftigere Linien. */
.zsymbol svg,.qicon svg,.ssymbol svg,.dsymbol svg,.lsymbol svg,.check-pdf svg,
.mini svg,.knopf svg,.tel-kopf svg,.tel-mobil svg{
  fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;flex:none;
}
.zsymbol svg,.qicon svg,.ssymbol svg,.dsymbol svg,.check-pdf svg{stroke-width:1.7}
.lsymbol svg,.mini svg,.knopf svg,.tel-kopf svg,.tel-mobil svg{stroke-width:2}
/* Jeder Icon-Träger MUSS eine Größe bekommen – ein SVG ohne width/height füllt
   sonst den verfügbaren Platz und sprengt das Element. */
.mini svg{width:16px;height:16px}

/* ---------- Preloader ---------- */
#lader{position:fixed;inset:0;background:var(--tanne-tief);z-index:10000;display:flex;align-items:center;justify-content:center;transition:opacity .7s ease,visibility .7s}
#lader.weg{opacity:0;visibility:hidden}
#lader .wort{font-family:var(--serif);font-weight:600;font-size:clamp(2rem,6vw,4rem);color:var(--creme);letter-spacing:.02em;display:flex}
#lader .wort span{opacity:0;transform:translateY(.6em);animation:ladeBuchstabe .5s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes ladeBuchstabe{to{opacity:1;transform:none}}
#lader .wort span:nth-child(odd){color:var(--karamell)}

/* ---------- Scroll-Fortschritt ---------- */
#fortschritt{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--holz),var(--karamell));z-index:9999}

/* ---------- Eigener Cursor (nur Desktop) ---------- */
#zeiger,#zeigerRing{position:fixed;top:0;left:0;pointer-events:none;z-index:9998;border-radius:50%;transform:translate(-50%,-50%)}
#zeiger{width:8px;height:8px;background:var(--karamell);transition:width .2s,height .2s,background .2s}
#zeigerRing{width:36px;height:36px;border:1.5px solid rgba(185,124,62,.55);transition:transform .18s ease-out,width .25s,height .25s,border-color .25s}
body.zeiger-gross #zeigerRing{width:70px;height:70px;border-color:var(--moos)}
body.zeiger-gross #zeiger{width:5px;height:5px}
@media (hover:none),(max-width:900px){#zeiger,#zeigerRing{display:none}}

/* ---------- Navigation ---------- */
/* padding-top zieht den Header bis unter die Statusleiste/Notch (viewport-fit=cover) */
header.top{position:fixed;top:0;left:0;right:0;z-index:900;transition:box-shadow .35s;padding-top:env(safe-area-inset-top)}
/* Blur/Hintergrund auf Pseudo-Element, damit das fixe Mobilmenü nicht im Header "gefangen" wird (iOS-Bug mit backdrop-filter) */
header.top::before{content:"";position:absolute;inset:0;background:rgba(242,236,221,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;transition:opacity .35s;pointer-events:none}
/* Safe-Area-Streifen IMMER deckend – sonst scrollt Text sichtbar durch die Notch */
header.top::after{content:"";position:absolute;top:0;left:0;right:0;height:env(safe-area-inset-top);background:var(--creme);pointer-events:none}
header.top.fest::before{opacity:1}
header.top.fest{box-shadow:0 1px 0 var(--linie)}
header.top .inner{position:relative;max-width:1160px;margin:0 auto;padding:22px max(26px,env(safe-area-inset-right)) 22px max(26px,env(safe-area-inset-left));display:flex;align-items:center;gap:20px;transition:padding .35s}
header.top.fest .inner{padding-top:13px;padding-bottom:13px}
.logo{font-family:'Comfortaa',var(--sans);font-weight:700;font-size:1.3rem;text-decoration:none;color:var(--tanne);letter-spacing:-.02em;display:flex;align-items:center;gap:10px}
.logo svg{width:30px;height:30px}
.logo span{white-space:nowrap}
.logo b{color:var(--holz);font-weight:700}
nav.haupt{margin-left:auto;display:flex;gap:2px;align-items:center}
nav.haupt a{text-decoration:none;font-size:.93rem;font-weight:600;color:var(--grau);padding:8px 14px;border-radius:99px;position:relative;transition:color .25s}
nav.haupt a:not(.cta)::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;background:var(--karamell);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.7,.3,1)}
nav.haupt a:hover{color:var(--tanne)}
nav.haupt a:hover::after,nav.haupt a.aktiv::after{transform:scaleX(1)}
nav.haupt a.aktiv{color:var(--tanne)}
nav.haupt a.cta{background:var(--tanne);color:var(--creme);margin-left:10px;padding:10px 20px;overflow:hidden;box-shadow:var(--schatten-s);transition:background .25s,box-shadow .25s,transform .25s}
nav.haupt a.cta:hover{background:var(--holz);box-shadow:var(--schatten-glut);transform:translateY(-1px)}

/* Telefonnummer im Header – Desktop: Text-Pille neben dem CTA */
nav.haupt a.tel-kopf{display:inline-flex;align-items:center;gap:8px;color:var(--tanne);font-weight:800;border:1.5px solid var(--linie);padding:9px 16px;margin-left:8px;white-space:nowrap;background:rgba(255,255,255,.5);transition:border-color .25s,color .25s}
nav.haupt a.tel-kopf::after{content:none}
nav.haupt a.tel-kopf:hover{border-color:var(--karamell);color:var(--holz)}
nav.haupt a.tel-kopf svg{width:16px;height:16px;flex:none}
/* Telefonnummer im Header – Mobil: reiner Icon-Knopf (Platz ist knapp) */
/* Seit dem 5. Menüpunkt („Referenzen", 16.08.2026) wird die Kopfzeile zwischen
   900 und 1600 px zu eng – „Über uns" brach dort in zwei Zeilen um. Deshalb
   gestaffelt Luft herausnehmen: erst die Abstände, dann die ausgeschriebene
   Telefonnummer (das Hörer-Symbol bleibt, der Anruf-Weg also auch). */
nav.haupt a{white-space:nowrap}
@media(max-width:1600px){
  nav.haupt a{padding:8px 9px;font-size:.89rem}
  nav.haupt a:not(.cta)::after{left:9px;right:9px}
  nav.haupt a.cta{margin-left:6px;padding:10px 15px}
  nav.haupt a.tel-kopf{padding:9px 12px;margin-left:5px}
}
@media(max-width:1120px){
  nav.haupt a.tel-kopf span{display:none}
  nav.haupt a.tel-kopf{padding:9px 11px}
}
.tel-mobil{display:none}
#menueKnopf{display:none}
@media(max-width:900px){
  nav.haupt{position:fixed;inset:0;z-index:950;background:var(--tanne-tief);flex-direction:column;justify-content:center;gap:8px;transform:translateY(-102%);visibility:hidden;transition:transform .5s cubic-bezier(.7,0,.2,1),visibility 0s .5s}
  nav.haupt.offen{visibility:visible;transition:transform .5s cubic-bezier(.7,0,.2,1)}
  nav.haupt.offen{transform:none}
  /* NOTCH-FIX (der eigentliche): iOS-Safari meldet keine Safe-Area (env()=0)
     und legt seine Statusleiste durchscheinend ueber die Seite – dahinter
     zeichnet es eine unscharfe Live-Kopie des Inhalts. Ein Header mit
     backdrop-filter + Restttransparenz liefert ihr genau diesen Inhalt.
     Am Handy daher: voll deckend, kein Blur, immer sichtbar (nicht erst
     ab .fest) – dann hat Safari nur eine glatte Cremeflaeche zum Abtasten. */
  header.top::before{background:var(--creme);backdrop-filter:none;-webkit-backdrop-filter:none;opacity:1}
  nav.haupt a{color:var(--salbei);font-size:1.4rem;font-family:var(--serif)}
  nav.haupt a.cta{margin:14px 0 0;box-shadow:none}
  nav.haupt a.tel-kopf{display:none}   /* am Handy übernimmt der Icon-Knopf + die Sticky-Leiste */
  /* Icon-Knopf: schiebt sich per margin-left:auto nach rechts, Hamburger folgt */
  .tel-mobil{display:inline-flex;align-items:center;justify-content:center;margin-left:auto;width:42px;height:42px;border-radius:50%;border:1.5px solid var(--linie);background:rgba(255,255,255,.55);color:var(--tanne);text-decoration:none;flex:none;transition:border-color .25s}
  .tel-mobil:active{border-color:var(--karamell)}
  .tel-mobil svg{width:19px;height:19px}
  .tel-mobil{width:44px;height:44px}
  /* 44x44 Klickfläche (Mindestmaß für sicheres Tippen); die Striche bleiben
     optisch 34px breit und sitzen mittig – der Knopf sieht aus wie vorher. */
  #menueKnopf{display:block;margin-left:10px;background:none;border:0;cursor:pointer;z-index:1001;width:44px;height:44px;position:relative;flex:none}
  #menueKnopf i,#menueKnopf::before,#menueKnopf::after{content:"";position:absolute;left:5px;right:5px;height:2.5px;background:var(--tanne);border-radius:3px;transition:.35s}
  #menueKnopf::before{top:9px}#menueKnopf i{top:20.5px}#menueKnopf::after{top:32px}
  #menueKnopf.offen::before{top:20.5px;transform:rotate(45deg);background:var(--creme)}
  #menueKnopf.offen i{opacity:0}
  #menueKnopf.offen::after{top:20.5px;transform:rotate(-45deg);background:var(--creme)}
}

/* ---------- Hero ---------- */
.held{min-height:100svh;display:flex;align-items:center;position:relative;padding:130px 0 60px;overflow:hidden}
.held .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;position:relative;z-index:2}
.vorzeile{display:inline-flex;align-items:center;gap:10px;font-size:.85rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--holz);margin-bottom:22px}
.vorzeile::before{content:"";width:34px;height:2px;background:var(--karamell)}
.held h1{font-family:var(--serif);font-weight:600;font-size:clamp(2.5rem,5.6vw,4.6rem);line-height:1.06;letter-spacing:-.02em;color:var(--tanne)}
.held h1 .zeile{display:block;overflow:hidden}
.held h1 .zeile > span{display:inline-block;transform:translateY(110%);animation:zeileRein 1s cubic-bezier(.2,.7,.2,1) forwards}
.held h1 .zeile:nth-child(2)>span{animation-delay:.12s}
.held h1 .zeile:nth-child(3)>span{animation-delay:.24s}
@keyframes zeileRein{to{transform:none}}
/* Wort-Rotor */
.rotor{display:inline-grid;vertical-align:bottom;color:var(--holz);font-style:normal}
.rotor span{grid-area:1/1;opacity:0;transform:translateY(.6em) rotateX(50deg);transition:opacity .5s,transform .55s cubic-bezier(.2,.7,.2,1);white-space:nowrap}
.rotor span.da{opacity:1;transform:none}
.held p.sub{margin:26px 0 34px;font-size:1.12rem;color:var(--grau);max-width:520px}
.held .knoepfe{display:flex;gap:14px;flex-wrap:wrap}

/* Stadl-Illustration */
.stadlbild{position:relative}
.stadlbild svg{width:100%;height:auto;overflow:visible}
.stadlbild .strich{fill:none;stroke:var(--tanne);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.stadlbild .strich.braun{stroke:var(--holz)}
.stadlbild .strich.duenn{stroke-width:1.6;stroke:var(--karamell)}
.stadlbild .zeichnen{stroke-dasharray:var(--l,600);stroke-dashoffset:var(--l,600);animation:zeichnen 2.2s cubic-bezier(.5,0,.2,1) forwards}
@keyframes zeichnen{to{stroke-dashoffset:0}}
.stadlbild .puls{animation:pulsPunkt 2.6s ease-in-out infinite}
@keyframes pulsPunkt{0%,100%{opacity:.25}50%{opacity:1}}
/* 🔴 Die Bewegung läuft über margin und sitzt auf dem SVG – nicht über
   transform und nicht auf dem Rahmen (16.08.2026, in acht Testrunden am
   iPhone eingegrenzt).
   Grund 1 (margin statt transform): Eine transform-Bewegung lässt mobile
   Grafikchips die Zeichnung bei JEDER Zwischenposition neu rastern, statt sie
   einmal zu rastern und zu verschieben – die Kantenglättung jeder Linie wandert
   mit, sichtbar als Zittern des ganzen Hauses. Am Rechner fällt es nicht auf,
   in Chrome am Handy tritt es genauso auf wie in Safari.
   Grund 2 (SVG statt Rahmen): Der Rahmen ist ein Raster-Kind, und .held .wrap
   zentriert vertikal – die Zentrierung rechnet einen Abstand wieder heraus,
   das Haus stand still.
   ⚠️ Erfolglos ausprobiert, damit es niemand wiederholt: translate3d,
   will-change, stroke-dasharray entfernen, overflow abschalten, feste Breite.
   ⚠️ margin ist eine Layout-Eigenschaft und kostet mehr als transform. Bei
   EINEM Element im 7-Sekunden-Takt vertretbar – für neue Animationen gilt
   weiterhin transform. */
.schwebe svg{animation:schweben 7s ease-in-out infinite}
@keyframes schweben{0%,100%{margin-top:0}50%{margin-top:-14px}}

/* Scroll-Pfeil */
.runter{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--grau);text-decoration:none}
.runter i{display:block;width:1.5px;height:44px;background:var(--grau);position:relative;overflow:hidden}
.runter i::after{content:"";position:absolute;inset:0;background:var(--holz);transform:translateY(-100%);animation:tropfen 1.8s ease-in-out infinite}
@keyframes tropfen{60%,100%{transform:translateY(100%)}}

/* ---------- Laufband ---------- */
/* Das Laufband ist absichtlich gedreht und um 2 % vergroessert, damit es an den
   Raendern ueberlappt statt weisse Ecken zu zeigen. Dieser Ueberstand machte die
   Seite 13 px breiter als das Fenster (09.09.2026 gemessen, auf jeder Seite).
   Der Rahmen schneidet ihn ab - die Optik bleibt, das waagrechte Scrollen ist weg.
   🔴 NICHT stattdessen overflow-x auf html setzen: Das macht ein Scroll-Element
   daraus und die klebenden Paketkarten (.paketkarte, position:sticky) kleben nicht
   mehr - nachgemessen, sie scrollen dann 1:1 mit. */
.laufband-rahmen{overflow:hidden;padding:16px 0;margin:-16px 0}
.laufband{background:var(--tanne);color:var(--creme);overflow:hidden;padding:16px 0;transform:rotate(-1.2deg) scale(1.02);margin:10px 0}
.laufband .spur{display:flex;width:max-content;animation:laufen 26s linear infinite;font-family:var(--serif);font-size:1.25rem;font-style:normal}
.laufband .spur span{padding:0 26px;white-space:nowrap}
.laufband .spur b{color:var(--karamell-hell);font-weight:400}
@keyframes laufen{to{transform:translateX(-50%)}}

/* ---------- Sektionen & Reveals ---------- */
section{padding:110px 0;position:relative}
section.dicht{padding:70px 0}
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:.82rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--holz);margin-bottom:18px}
.kicker::before{content:"";width:30px;height:2px;background:var(--karamell)}
h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.12;letter-spacing:-.015em;color:var(--tanne);margin-bottom:18px;max-width:760px}
h2 em{font-style:normal;color:var(--holz)}
p.gross{font-size:1.15rem;color:var(--grau);max-width:640px}
[data-zeigen]{opacity:0;transform:translateY(44px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
[data-zeigen].sichtbar{opacity:1;transform:none}

/* Manifest (große Editorial-Zeilen) */
.manifest p{font-family:var(--serif);font-size:clamp(1.5rem,3.1vw,2.5rem);line-height:1.35;font-weight:400;color:var(--tinte);max-width:900px}
.manifest p b{color:var(--holz);font-weight:600}
.manifest .wortweise span{opacity:.14;transition:opacity .5s}
.manifest .wortweise span.an{opacity:1}
/* Heimat-Foto unterm Manifest: breites Kino-Format, gleiche Bildsprache
   wie das Über-uns-Foto (Hauch Drehung + versetzter Karamell-Rahmen) */
.heimat{margin:52px 0 0;position:relative;transform:rotate(-.6deg);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.heimat:hover{transform:rotate(0deg)}
.heimat::before{content:"";position:absolute;inset:12px -12px -12px 12px;border:2px solid var(--karamell);border-radius:26px;transform:rotate(1.1deg);opacity:.45;z-index:0}
.heimat img{position:relative;z-index:1;display:block;width:100%;height:auto;max-height:480px;object-fit:cover;object-position:center 38%;border-radius:22px;box-shadow:var(--schatten-xl)}
.heimat figcaption{position:relative;z-index:1;margin-top:18px;text-align:center;font-family:'Comfortaa',var(--sans);font-size:.85rem;font-weight:700;color:var(--grau);letter-spacing:.04em}
.heimat figcaption b{color:var(--karamell-tief)}

/* ---------- Dunkle Sektionen ---------- */
.dunkel{background:var(--tanne-tief);color:var(--creme)}
.dunkel h2{color:var(--creme)}
.dunkel p.gross,.dunkel .kicker{color:var(--salbei)}
.dunkel .kicker::before{background:var(--karamell)}

/* ---------- Paket-Stapel (Sticky Cards) ---------- */
.stapel{display:flex;flex-direction:column;gap:26px}
.paketkarte{
  position:sticky;top:110px;background:var(--papier);border:1px solid var(--linie);
  border-radius:26px;padding:52px;display:grid;grid-template-columns:auto 1fr auto;gap:38px;align-items:center;
  box-shadow:var(--schatten-xl);will-change:transform;
}
.paketkarte:nth-child(2){top:126px;background:#f6f0e2}
.paketkarte:nth-child(3){top:142px;background:var(--papier)}
.paketkarte:nth-child(4){top:158px;background:#f6f0e2}
.paketkarte .nr{font-family:var(--serif);font-size:1rem;color:var(--karamell-tief);writing-mode:vertical-rl;transform:rotate(180deg);letter-spacing:.2em}
.paketkarte h3{font-family:var(--serif);font-weight:600;font-size:clamp(1.6rem,2.6vw,2.2rem);color:var(--tanne);margin-bottom:10px}
.paketkarte h3 b{color:var(--holz);font-weight:600}
.paketkarte p{color:var(--grau);max-width:520px;margin-bottom:16px}
.paketkarte .zeilen{display:flex;gap:10px;flex-wrap:wrap}
.merkmal{font-size:.8rem;font-weight:700;border:1px solid var(--linie);border-radius:99px;padding:5px 13px;color:var(--grau);background:#fff}
.paketkarte .seite{display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.paketkarte .ab{font-family:var(--serif);font-size:1.7rem;color:var(--tanne)}
.paketkarte .ab small{display:block;font-family:var(--sans);font-size:.75rem;color:var(--grau);text-align:right}
@media(max-width:820px){.paketkarte{grid-template-columns:1fr;padding:32px}.paketkarte .nr{writing-mode:horizontal-tb;transform:none}.paketkarte .seite{align-items:flex-start}}

/* ---------- Buttons ---------- */
.knopf{
  display:inline-flex;align-items:center;gap:12px;text-decoration:none;font-weight:800;font-size:.98rem;
  padding:16px 30px;border-radius:99px;position:relative;overflow:hidden;border:1.5px solid transparent;
  transition:color .35s,border-color .35s,transform .2s;will-change:transform;
}
.knopf .pfeil{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.knopf:hover .pfeil{transform:translateX(6px)}
.knopf::before{content:"";position:absolute;inset:0;border-radius:99px;transform:scaleX(0);transform-origin:right;transition:transform .45s cubic-bezier(.7,0,.2,1);z-index:-1}
.knopf:hover::before{transform:scaleX(1);transform-origin:left}
.knopf.voll{background:var(--tanne);color:var(--creme)}
.knopf.voll::before{background:var(--holz)}
.knopf.rand{border-color:var(--tanne);color:var(--tanne);background:transparent}
.knopf.rand::before{background:var(--tanne)}
.knopf.rand:hover{color:var(--creme)}
.knopf.hell{background:var(--creme);color:var(--tanne)}
.knopf.hell::before{background:var(--karamell)}
.knopf.hell:hover{color:#fff}
/* Outline-Variante für dunkle Flächen (z. B. „Anrufen" neben WhatsApp im Kontakt-Panel) */
.knopf.rand-hell{border-color:rgba(242,236,221,.55);color:var(--creme);background:transparent}
.knopf.rand-hell::before{background:var(--creme)}
.knopf.rand-hell:hover{color:var(--tanne);border-color:var(--creme)}
.knopf svg{width:18px;height:18px;flex:none}

/* ---------- Zahlen/Fakten ---------- */
.fakten{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:rgba(169,191,174,.25);border-radius:20px;overflow:hidden;margin-top:50px}
.fakt{background:var(--tanne-tief);padding:38px 30px}
.fakt .zahl{font-family:var(--serif);font-size:clamp(2.2rem,4vw,3.2rem);color:var(--karamell-hell);line-height:1}
.fakt .zahl small{font-size:.55em}
.fakt p{color:var(--salbei);font-size:.9rem;margin-top:10px}

/* ---------- Ablauf ---------- */
.ablauf{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px;counter-reset:s}
.schritt{background:var(--papier);border:1px solid var(--linie);border-radius:20px;padding:30px;position:relative;transition:transform .35s,box-shadow .35s}
.schritt:hover{transform:translateY(-8px);box-shadow:var(--schatten-l)}
.schritt::before{counter-increment:s;content:"0" counter(s);font-family:var(--serif);font-style:normal;font-size:2rem;color:var(--karamell-tief);display:block;margin-bottom:12px}
.schritt b{font-size:1.05rem;color:var(--tanne);display:block;margin-bottom:6px}
.schritt span{color:var(--grau);font-size:.93rem}

/* ---------- Duo / Über uns ---------- */
/* ---------- Über uns: Foto + Editorial-Blöcke ---------- */
.wir{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(36px,5vw,72px);align-items:start;margin-top:44px}
/* Das Foto liegt leicht gedreht auf einem versetzten Karamell-Rahmen –
   wie ein frisch entwickelter Abzug am Werkstatttisch */
.wirbild{position:relative;margin:0;max-width:440px;justify-self:center;transform:rotate(-2deg);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.wirbild:hover{transform:rotate(0deg) scale(1.01)}
.wirbild::before{content:"";position:absolute;inset:14px -14px -14px 14px;border:2px solid var(--karamell);border-radius:26px;transform:rotate(2.5deg);opacity:.55;z-index:0}
.wirbild img{position:relative;z-index:1;width:100%;height:auto;display:block;border-radius:22px;box-shadow:var(--schatten-xl)}
.wirbild figcaption{position:relative;z-index:1;margin-top:18px;text-align:center;font-family:'Comfortaa',var(--sans);font-size:.85rem;font-weight:700;color:var(--grau);letter-spacing:.04em}
.wirbild figcaption b{color:var(--karamell-tief)}
.wirtext{display:flex;flex-direction:column;gap:34px}
.wirtext .gross{margin:0}
/* Personen: offene Blöcke mit Farbkante statt Karten – das Gesicht zeigt ja das Foto */
.person{border-left:3px solid var(--linie);padding-left:26px}
.person.gruen{border-color:var(--tanne)}
.person.braun{border-color:var(--holz)}
.person h3{font-family:var(--sans);font-weight:800;font-size:1.3rem;letter-spacing:-.01em;color:var(--tanne);margin-bottom:2px}
.person .rolle{font-size:.85rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--karamell-tief);margin-bottom:12px}
.person p{color:var(--grau);font-size:.96rem}
@media(max-width:860px){
  .wir{grid-template-columns:1fr;gap:44px}
  .wirbild{max-width:min(360px,82vw)}
}

/* ---------- Preiskarten ---------- */
.preise{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;align-items:stretch}
.preis{background:var(--papier);border:1px solid var(--linie);border-radius:24px;padding:40px 34px;position:relative;display:flex;flex-direction:column;transition:transform .35s,box-shadow .35s}
.preis:hover{transform:translateY(-8px);box-shadow:var(--schatten-l)}
.preis.hervor{background:var(--tanne);color:var(--creme);border-color:var(--tanne)}
.preis.hervor .name,.preis.hervor .betrag{color:var(--creme)}
.preis.hervor li{color:var(--salbei)}
.preis .band{position:absolute;top:-13px;left:30px;background:var(--holz);color:#fff;font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:6px 14px;border-radius:99px}
.preis .name{font-family:var(--serif);font-size:1.25rem;color:var(--tanne);margin-bottom:16px}
.preis .alt{color:var(--grau);text-decoration:line-through;font-size:1rem}
.preis.hervor .alt{color:rgba(242,236,221,.5)}
.preis .betrag{font-family:var(--serif);font-size:2.6rem;line-height:1.05;color:var(--tanne)}
.preis .einheit{font-size:.82rem;color:var(--grau);margin:4px 0 22px}
.preis.hervor .einheit{color:var(--salbei)}
.preis ul{list-style:none;margin-bottom:28px;flex:1}
.preis li{padding:9px 0 9px 30px;position:relative;font-size:.93rem;color:var(--grau);border-bottom:1px dashed var(--linie)}
.preis.hervor li{border-color:rgba(169,191,174,.2)}
.preis li::before{content:"";position:absolute;left:1px;top:.42em;width:14px;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b97c3e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.6 4.6 4.6L19 7'/%3E%3C/svg%3E") center/contain no-repeat}
.einfuehrung{display:flex;gap:14px;align-items:flex-start;background:linear-gradient(100deg,rgba(47,92,62,.08),rgba(185,124,62,.08));border:1px solid var(--linie);border-radius:18px;padding:20px 24px;margin:34px 0 0;font-size:.93rem;color:var(--grau)}
.einfuehrung b{color:var(--tanne)}
.einfuehrung .punkt{min-width:10px;height:10px;border-radius:50%;background:var(--moos);margin-top:7px;animation:pulsPunkt 2s infinite}

/* ---------- FAQ ---------- */
.faq details{border-bottom:1px solid var(--linie);padding:6px 0}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 4px;font-family:var(--serif);font-size:1.15rem;color:var(--tanne)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .plus{width:30px;height:30px;min-width:30px;border-radius:50%;border:1.5px solid var(--holz);position:relative;transition:transform .4s,background .3s}
.faq summary .plus::before,.faq summary .plus::after{content:"";position:absolute;top:50%;left:50%;width:12px;height:1.8px;background:var(--holz);transform:translate(-50%,-50%)}
.faq summary .plus::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .35s}
.faq details[open] .plus{transform:rotate(45deg);background:rgba(185,124,62,.12)}
.faq .antwort{color:var(--grau);padding:0 46px 22px 4px;max-width:760px}

/* ---------- Leistungsverzeichnis (Paketseiten): inklusive vs. Aufpreis ---------- */
.leistungen{display:grid;grid-template-columns:1.1fr .9fr;gap:22px;margin-top:44px}
.lkarte{background:var(--papier);border:1px solid var(--linie);border-radius:24px;padding:34px}
.lkarte h3{font-family:var(--serif);font-weight:600;font-size:1.35rem;color:var(--tanne);margin-bottom:18px;display:flex;align-items:center;gap:12px}
.lkarte h3 .lsymbol{width:34px;height:34px;min-width:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}
.lkarte h3 .lsymbol svg{width:17px;height:17px}
.lkarte.inkl h3 .lsymbol{background:var(--tanne);color:var(--creme)}
.lkarte.extra h3 .lsymbol{background:rgba(185,124,62,.15);color:var(--holz);border:1.5px solid var(--karamell)}
.lkarte ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.lkarte li{position:relative;padding-left:26px;color:var(--grau);font-size:.96rem}
.lkarte li b{color:var(--tinte)}
.lkarte.inkl li::before{content:"";position:absolute;left:0;top:.42em;width:14px;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f5c3e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.6 4.6 4.6L19 7'/%3E%3C/svg%3E") center/contain no-repeat}
.lkarte.extra li::before{content:"+";position:absolute;left:0;top:0;color:var(--karamell-tief);font-weight:800}
.lkarte .lfuss{margin-top:18px;padding-top:16px;border-top:1px dashed var(--linie);font-size:.85rem;color:var(--grau)}
@media(max-width:760px){.leistungen{grid-template-columns:1fr}}

/* ---------- Paket-Vergleichstabelle (Startseite) ---------- */
.tabellenhuelle{overflow-x:auto;margin-top:44px;border:1px solid var(--linie);border-radius:24px;background:var(--papier);-webkit-overflow-scrolling:touch}
.vergleich{width:100%;border-collapse:collapse;min-width:820px;font-size:.94rem}
.vergleich th,.vergleich td{padding:18px 20px;text-align:left;vertical-align:top;border-bottom:1px solid var(--linie)}
.vergleich thead th{font-family:var(--serif);font-weight:600;font-size:1.15rem;color:var(--tanne);border-bottom:2px solid var(--karamell)}
.vergleich thead th:first-child{width:130px}
.vergleich tbody th{font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--karamell-tief);white-space:nowrap}
.vergleich td{color:var(--grau)}
.vergleich td b{color:var(--tinte)}
.vergleich .preiszeile td{font-family:var(--serif);font-size:1.2rem;color:var(--tanne)}
.vergleich .preiszeile td small{display:block;font-family:var(--sans);font-size:.78rem;color:var(--grau);margin-top:2px}
.vergleich tfoot td{background:rgba(185,124,62,.07);color:var(--tinte);font-size:.92rem;border-bottom:none}
.vergleich a.mehr-link{color:var(--holz);font-weight:700;text-decoration:none;border-bottom:1.5px solid var(--karamell);white-space:nowrap}
.vergleich a.mehr-link:hover{color:var(--karamell)}
.wisch{display:none;font-size:.8rem;color:var(--grau);margin-top:10px;text-align:center}
@media(max-width:900px){.wisch{display:block}}

/* ---------- KI-Check (Lead-Magnet) ---------- */
.check{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(34px,5vw,64px);align-items:center;background:var(--papier);border:1px solid var(--linie);border-radius:32px;padding:clamp(34px,5vw,64px)}
.check-punkte{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:12px}
.check-punkte li{position:relative;padding-left:28px;color:var(--grau)}
.check-punkte li::before{content:"";position:absolute;left:0;top:.42em;width:14px;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f5c3e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.6 4.6 4.6L19 7'/%3E%3C/svg%3E") center/contain no-repeat}
.check-punkte b{color:var(--tinte)}
.check-form{background:var(--creme);border:1.5px solid var(--linie);border-radius:22px;padding:32px;display:flex;flex-direction:column;gap:16px;text-align:center}
.check-pdf{color:var(--holz);display:flex;justify-content:center}
.check-pdf svg{width:42px;height:42px}
.check-form>b{font-family:var(--serif);font-weight:600;font-size:1.2rem;color:var(--tanne)}
.check-form .feld{text-align:left}
.check-form .feld>span{color:var(--holz)}
.check-form input{font-family:var(--sans);font-size:1rem;color:var(--tinte);background:#fff;border:1.5px solid var(--linie);border-radius:14px;padding:13px 16px;width:100%;transition:border-color .25s}
.check-form input:focus-visible{border-color:var(--karamell-tief)}
.check-form .absenden{justify-content:center}
.check-form .absenden[disabled]{opacity:.6;cursor:wait}
.check-form .rechtlich{font-size:.76rem;color:var(--grau);line-height:1.5}
.check-form .rechtlich a{color:var(--holz)}
.check-form .meldung{font-size:.92rem;font-weight:700;color:var(--holz)}
.check-form .meldung:empty{display:none}
.check-form .meldung.gut{color:var(--moos)}
@media(max-width:860px){.check{grid-template-columns:1fr}}

/* ---------- Blog „Aus dem Stadl" ---------- */
.blogliste{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;margin-top:44px}
.blogkarte{display:flex;flex-direction:column;gap:12px;background:var(--papier);border:1px solid var(--linie);border-radius:24px;padding:32px;text-decoration:none;transition:transform .35s,box-shadow .35s}
.blogkarte:hover{transform:translateY(-6px);box-shadow:var(--schatten-l)}
.blogkarte .datum{font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--karamell-tief)}
.blogkarte h2{font-family:var(--serif);font-weight:600;font-size:1.45rem;line-height:1.2;color:var(--tanne);margin:0;max-width:none}
.blogkarte p{color:var(--grau);font-size:.95rem}
.blogkarte .mehr{margin-top:auto;color:var(--holz);font-weight:700;font-size:.9rem}
/* Artikel-Layout: schmale Lesespalte, ruhige Typo */
.artikel{max-width:760px}
.artikel p,.artikel li{color:var(--tinte);font-size:1.05rem;line-height:1.75;margin-bottom:1.2em}
.artikel ul,.artikel ol{margin:0 0 1.2em 24px}
.artikel li{margin-bottom:.5em}
.artikel h2{font-size:clamp(1.5rem,2.6vw,2rem);margin:1.8em 0 .6em;max-width:none}
.artikel .einleitung{font-size:1.18rem;color:var(--grau)}
.artikel b{color:var(--tanne)}
.artikel a{color:var(--holz);text-decoration-color:var(--karamell)}
.artikel .kasten{background:var(--papier);border:1px solid var(--linie);border-left:4px solid var(--karamell);border-radius:16px;padding:22px 26px;margin:1.6em 0}
.artikel .kasten p:last-child{margin-bottom:0}
.artikel table{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:.98rem}
.artikel th,.artikel td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--linie);vertical-align:top}
.artikel th{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--karamell-tief)}
.artikel .meta{font-size:.85rem;color:var(--grau);margin-bottom:34px}

/* ---------- Demo-Sektionen („So sähe es bei Ihnen aus") ---------- */
/* Video-Demo (KIno): Click-to-play – YouTube lädt erst nach Klick (cookiefrei) */
.videodemo{position:relative;margin-top:44px;border-radius:22px;overflow:hidden;box-shadow:var(--schatten-xl);aspect-ratio:16/9;background:var(--tanne-tief)}
.videodemo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.videodemo:hover img{transform:scale(1.03)}
.videodemo .abspielen{position:absolute;inset:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:rgba(11,29,20,.35);border:0;cursor:pointer;transition:background .3s}
.videodemo .abspielen:hover{background:rgba(11,29,20,.5)}
.videodemo .abspielen .kreis{width:84px;height:84px;border-radius:50%;background:var(--creme);display:flex;align-items:center;justify-content:center;box-shadow:var(--schatten-m-dunkel);transition:transform .3s}
.videodemo .abspielen:hover .kreis{transform:scale(1.08)}
.videodemo .abspielen .kreis::before{content:"";width:0;height:0;border-style:solid;border-width:14px 0 14px 24px;border-color:transparent transparent transparent var(--tanne);margin-left:6px}
.videodemo .abspielen span{color:var(--creme);font-weight:800;font-size:.95rem;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.videodemo iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.videohinweis{font-size:.8rem;color:var(--grau);margin-top:14px;max-width:640px}
.videohinweis a{color:var(--holz)}

/* Beispiel-Automatik (BüroKI): Ablauf in 4 Stationen mit Verbindungspfeilen */
.autoablauf{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px;counter-reset:station}
.station{background:var(--papier);border:1px solid var(--linie);border-radius:20px;padding:26px 22px;position:relative;counter-increment:station}
.station::before{content:counter(station);position:absolute;top:-14px;left:22px;width:28px;height:28px;border-radius:50%;background:var(--karamell);color:#fff;font-weight:800;font-size:.85rem;display:flex;align-items:center;justify-content:center}
.station:not(:last-child)::after{content:"→";position:absolute;right:-16px;top:50%;transform:translateY(-50%);color:var(--karamell);font-size:1.3rem;font-weight:800;z-index:1}
.station .ssymbol{display:block;color:var(--holz);margin-bottom:14px}
.station .ssymbol svg{width:28px;height:28px}
.station b{display:block;color:var(--tanne);font-size:1rem;margin-bottom:6px}
.station span{color:var(--grau);font-size:.88rem;line-height:1.55}
@media(max-width:860px){
  .autoablauf{grid-template-columns:1fr;gap:26px;max-width:440px}
  .station:not(:last-child)::after{content:"↓";right:auto;left:50%;top:auto;bottom:-24px;transform:translateX(-50%)}
}

/* „In Kürze"-Platzhalter (TelefonKI-Demo) */
.demnaechst{margin-top:44px;background:var(--papier);border:1.5px dashed var(--karamell);border-radius:24px;padding:38px 34px;display:flex;gap:24px;align-items:center;max-width:760px}
.demnaechst .dsymbol{flex:none;color:var(--holz)}
.demnaechst .dsymbol svg{width:38px;height:38px}
/* NUR die Überschrift ist ein eigener Block. Ohne den Kind-Selektor traf die
   Regel auch das <b> mitten im Fließtext – der Satz brach dort um und das
   Komma danach landete allein am Zeilenanfang. */
.demnaechst>div>b{display:block;font-family:var(--serif);font-size:1.25rem;color:var(--tanne);margin-bottom:6px}
.demnaechst p b{color:var(--tinte)}
.demnaechst p{color:var(--grau);font-size:.95rem;margin:0}
@media(max-width:620px){
  .demnaechst{flex-direction:column;text-align:center;padding:30px 24px}
  /* Überschrift und Knopf bleiben mittig, der Fließtext wird linksbündig:
     bei sechs Zeilen findet das Auge sonst den Zeilenanfang nicht wieder. */
  .demnaechst p{text-align:left}
  .demnaechst p:last-child{text-align:center}
}

/* ---------- Kontakt-Panel ---------- */
.kontakt{background:var(--tanne);border-radius:32px;padding:clamp(40px,7vw,90px);text-align:center;position:relative;overflow:hidden}
.kontakt::before,.kontakt::after{content:"";position:absolute;border-radius:50%;filter:blur(70px);opacity:.5}
.kontakt::before{width:340px;height:340px;background:var(--moos);top:-120px;left:-80px}
.kontakt::after{width:300px;height:300px;background:var(--holz);bottom:-130px;right:-60px}
.kontakt>*{position:relative;z-index:1}
.kontakt h2{color:var(--creme);margin:0 auto 14px}
.kontakt p{color:var(--salbei);max-width:520px;margin:0 auto 34px}
.kontakt .knoepfe{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
/* Am Handy untereinander und gleich breit – sonst wirken sie ausgefranst */
@media(max-width:620px){
  .kontakt .knoepfe{flex-direction:column;align-items:stretch}
  .kontakt .knoepfe .knopf{justify-content:center;padding-left:20px;padding-right:20px}
}
.kontakt .direkt{margin-top:26px;color:var(--salbei);font-size:.95rem}
.kontakt .direkt a{color:var(--creme);text-decoration-color:var(--karamell)}

/* ---------- Footer ---------- */
footer{background:var(--tanne-tief);color:var(--salbei);padding:80px 0 34px;margin-top:110px;overflow:hidden}
footer .oben{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-bottom:60px}
footer .spalte b{display:block;color:var(--creme);margin-bottom:14px;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase}
footer .spalte a{display:block;text-decoration:none;color:var(--salbei);padding:4px 0;font-size:.95rem;transition:color .25s,transform .25s}
footer .spalte a:hover{color:var(--karamell);transform:translateX(5px)}
footer .riesig{font-family:var(--serif);font-weight:700;font-size:clamp(3rem,12vw,10.5rem);line-height:.95;letter-spacing:-.02em;text-align:center;color:transparent;-webkit-text-stroke:1.5px rgba(169,191,174,.35);transition:.6s;user-select:none;cursor:default}
footer .riesig:hover{color:var(--karamell);-webkit-text-stroke:1.5px transparent}
footer .unten{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid rgba(169,191,174,.15);margin-top:50px;padding-top:24px;font-size:.82rem}
footer .unten a{color:var(--salbei)}

/* ---------- Unterseiten-Held ---------- */
.unterheld{padding:190px 0 80px;position:relative;overflow:hidden}
.unterheld .produktname{font-family:var(--serif);font-size:clamp(2.6rem,6.5vw,5rem);font-weight:600;letter-spacing:-.02em;color:var(--tanne);line-height:1.05}
.unterheld .produktname b{color:var(--holz);font-weight:600}
.unterheld .riesenwort{position:absolute;top:90px;right:-30px;font-family:var(--serif);font-size:clamp(6rem,20vw,17rem);color:rgba(124,74,31,.06);font-weight:700;pointer-events:none;white-space:nowrap;z-index:0}
.unterheld .wrap{position:relative;z-index:1}
.brotkrumen{font-size:.85rem;color:var(--grau);margin-bottom:26px}
.brotkrumen a{color:var(--holz);text-decoration:none}

/* Merkmal-Gitter Unterseiten – immer symmetrisch: 3 / 2 / 1 Spalten */
.gitter{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:960px){.gitter{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.gitter{grid-template-columns:1fr}}
.zelle{
  position:relative;isolation:isolate;
  background:var(--papier);border:1px solid var(--linie);border-radius:20px;padding:32px;
  transition:transform .5s cubic-bezier(.2,.7,.3,1),box-shadow .5s,border-color .45s;
}
/* Warmer Lichtschein, der beim Überfahren aus der Icon-Ecke wächst */
.zelle::before{
  content:"";position:absolute;z-index:-1;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(440px circle at 14% 0%,rgba(185,124,62,.14),transparent 62%);
  opacity:0;transition:opacity .5s;
}
.zelle:hover{transform:translateY(-6px);border-color:rgba(185,124,62,.55);box-shadow:var(--schatten-l)}
.zelle:hover::before{opacity:1}

/* Icon-Plättchen: Strichzeichnung im Stil des Logos, kein Emoji */
.zelle .zsymbol{
  position:relative;isolation:isolate;display:grid;place-items:center;
  width:52px;height:52px;margin-bottom:20px;border-radius:16px;
  color:var(--holz);background:rgba(124,74,31,.07);
  box-shadow:inset 0 0 0 1px rgba(124,74,31,.15);
  transition:color .4s,transform .5s cubic-bezier(.2,.7,.3,1),box-shadow .4s;
}
/* Grüne Füllung wächst von unten ins Plättchen */
.zelle .zsymbol::before{
  content:"";position:absolute;z-index:-1;inset:0;border-radius:inherit;
  background:linear-gradient(150deg,var(--moos),var(--tanne));
  transform:scaleY(0);transform-origin:bottom;
  transition:transform .45s cubic-bezier(.2,.7,.3,1);
}
.zelle .zsymbol svg{width:25px;height:25px}
.zelle:hover .zsymbol{
  color:var(--creme);transform:translateY(-3px) rotate(-4deg);
  box-shadow:inset 0 0 0 1px transparent,var(--schatten-m);
}
.zelle:hover .zsymbol::before{transform:scaleY(1)}
/* Der Strich zeichnet sich beim Überfahren einmal nach (braucht pathLength="1" im SVG) */
.zelle:hover .zsymbol svg>*{animation:strichZeichnen .8s cubic-bezier(.55,.1,.3,1)}
@keyframes strichZeichnen{from{stroke-dasharray:1;stroke-dashoffset:1}to{stroke-dasharray:1;stroke-dashoffset:0}}

.zelle b{display:block;color:var(--tanne);font-size:1.02rem;margin-bottom:6px}
.zelle span:not(.zsymbol){color:var(--grau);font-size:.92rem}

/* Variante für dunkle Abschnitte (BüroKI: „Ihre Daten bleiben Ihre Daten") */
.zelle.dunkel{background:rgba(250,246,236,.06);border-color:rgba(169,191,174,.2)}
.zelle.dunkel::before{background:radial-gradient(440px circle at 14% 0%,rgba(185,124,62,.2),transparent 62%)}
.zelle.dunkel:hover{border-color:rgba(185,124,62,.5);box-shadow:var(--schatten-l-dunkel)}
.zelle.dunkel b{color:var(--creme)}
.zelle.dunkel span:not(.zsymbol){color:var(--salbei)}
.zelle.dunkel .zsymbol{color:var(--karamell);background:rgba(250,246,236,.08);box-shadow:inset 0 0 0 1px rgba(169,191,174,.22)}
.zelle.dunkel:hover .zsymbol{color:var(--tanne-tief);box-shadow:inset 0 0 0 1px transparent,var(--schatten-m-dunkel)}
.zelle.dunkel .zsymbol::before{background:linear-gradient(150deg,#d8a061,var(--karamell))}

/* Querverweise – große Karten mit Icon und "Mehr dazu" */
.quer{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:960px){.quer{grid-template-columns:1fr}}
.quer a{background:var(--papier);border:1px solid var(--linie);border-radius:22px;padding:34px 30px;text-decoration:none;transition:transform .35s,border-color .35s,box-shadow .35s;display:flex;flex-direction:column;gap:8px}
.quer a:hover{transform:translateY(-8px);border-color:var(--karamell);box-shadow:var(--schatten-l)}
.quer .qicon{color:var(--holz);margin-bottom:10px;transition:color .35s,transform .45s cubic-bezier(.2,.7,.3,1)}
.quer .qicon svg{width:30px;height:30px}
.quer a:hover .qicon{color:var(--karamell);transform:translateY(-2px)}
.quer a b{font-family:var(--serif);color:var(--tanne);display:block;font-size:1.35rem;font-weight:600}
.quer a span{font-size:.94rem;color:var(--grau);flex:1}
.quer .mehr{margin-top:14px;font-weight:800;font-size:.9rem;color:var(--holz);display:inline-flex;align-items:center;gap:8px}
.quer .mehr i{font-style:normal;transition:transform .3s}
.quer a:hover .mehr i{transform:translateX(6px)}

/* Hinweis-Kasten transparent */
.transparenz{border-left:3px solid var(--karamell);padding:6px 0 6px 24px;color:var(--grau);font-size:.95rem;max-width:720px;margin-top:30px}
.transparenz b{color:var(--tinte)}

/* Buchungs-Hinweis im Kontaktpanel */
.kontakt .bald{margin-top:22px;font-size:.85rem;color:var(--salbei);opacity:.85}
.kontakt .bald b{color:var(--creme)}

/* ---------- Kontaktformular (in der dunklen Kontakt-Karte) ---------- */
.kontakt .oder{display:flex;align-items:center;gap:16px;max-width:640px;margin:38px auto 26px;color:var(--salbei);font-size:.9rem;letter-spacing:.02em}
.kontakt .oder::before,.kontakt .oder::after{content:"";flex:1;height:1px;background:rgba(169,191,174,.3)}
.formular{max-width:640px;margin:0 auto;text-align:left;display:flex;flex-direction:column;gap:16px}
.feldpaar{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.feld{display:flex;flex-direction:column;gap:7px}
.feld>span{font-size:.85rem;font-weight:700;color:var(--salbei);letter-spacing:.01em}
.feld>span em{font-style:normal;color:var(--karamell-hell)}
.feld>span em.opt{color:var(--salbei);font-weight:500;opacity:.7}
.formular input,.formular select,.formular textarea{
  font-family:var(--sans);font-size:1rem;color:var(--creme);
  background:rgba(255,255,255,.06);border:1.5px solid rgba(169,191,174,.28);
  border-radius:14px;padding:13px 16px;width:100%;
  transition:border-color .25s,background .25s;
}
.formular textarea{resize:vertical;min-height:120px;line-height:1.5}
.formular input::placeholder,.formular textarea::placeholder{color:rgba(169,191,174,.55)}
.formular input:focus,.formular select:focus,.formular textarea:focus{
  border-color:var(--karamell-hell);background:rgba(255,255,255,.1);
}
/* Auswahlliste: eigener Pfeil, damit sie nicht wie ein Fremdkörper wirkt */
.formular select{appearance:none;cursor:pointer;padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9bfae' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:17px}
.formular select option{background:var(--tanne-tief);color:var(--creme)}
.formular .hinweis{margin:-6px 0 0;font-size:.83rem;color:var(--salbei);opacity:.75}
/* Spam-Falle: unsichtbar, aber nicht display:none (das erkennen Bots) */
.stadltor{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formular .absenden{align-self:flex-start;margin-top:6px}
.formular .absenden[disabled]{opacity:.6;cursor:wait}
.formular .rechtlich{font-size:.78rem;color:var(--salbei);opacity:.75;line-height:1.5}
.formular .rechtlich a{color:var(--creme);text-decoration-color:var(--karamell)}
.formular .meldung{font-size:.92rem;font-weight:700}
.formular .meldung:empty{display:none}
.formular .meldung.fehler{color:#ffb4a2}
.gesendet{background:rgba(255,255,255,.08);border:1.5px solid var(--karamell);border-radius:18px;padding:26px 24px;text-align:center;color:var(--salbei);line-height:1.6}
.gesendet b{color:var(--creme);font-size:1.15rem}
.gesendet a{color:var(--creme);text-decoration-color:var(--karamell)}
@media(max-width:620px){
  .feldpaar{grid-template-columns:1fr}
  .formular .absenden{align-self:stretch;justify-content:center}
}

/* ---------- Cal.com-Terminbuchung (in der dunklen Kontakt-Karte) ---------- */
.kontakt .termin{margin-top:40px}
.kontakt .termin-titel{display:block;font-family:var(--serif);font-size:clamp(1.3rem,2.4vw,1.7rem);color:var(--creme);margin:0 auto 8px}
.kontakt .termin-text{color:var(--salbei);max-width:520px;margin:0 auto 22px}
.termin-knopf.laedt{opacity:.7;cursor:wait}
.kontakt .termin-hinweis{font-size:.8rem;color:var(--salbei);opacity:.72;max-width:470px;margin:16px auto 0;line-height:1.5}
.kontakt .termin-hinweis a{color:var(--creme);text-decoration-color:var(--karamell)}
/* Kalender-Box: erst nach Klick sichtbar, dunkler Rahmen passend zur Karte */
.cal-box{margin-top:28px;min-height:560px;border-radius:18px;overflow:hidden;background:var(--tanne-tief);border:1px solid rgba(169,191,174,.18)}
.cal-box iframe{width:100%!important;border:0}
/* Ist der Kalender offen, verschwinden Trenner, Titel, Text, Button und Hinweis */
.termin.cal-offen .oder,
.termin.cal-offen .termin-titel,
.termin.cal-offen .termin-text,
.termin.cal-offen .termin-knopf,
.termin.cal-offen .termin-hinweis{display:none}
/* Am Handy: Karte schlanker machen, sobald der Kalender offen ist – sonst
   erdrückt die Innenpolsterung den Kalender (er würde sonst extrem schmal
   und dadurch sehr hoch stapeln). */
@media(max-width:620px){
  .kontakt.kalender-offen{padding-left:12px;padding-right:12px;padding-bottom:16px}
  .kontakt.kalender-offen .termin{margin-top:24px}
  .cal-box{min-height:520px;margin-top:20px}
}
/* Kleiner Footer-Knopf */
.mini{display:inline-flex;align-items:center;gap:9px;background:transparent;border:1.5px solid rgba(169,191,174,.4);color:var(--salbei)!important;border-radius:99px;padding:9px 18px!important;font-weight:700;font-size:.88rem!important;text-decoration:none;transition:border-color .3s,color .3s;width:max-content;margin-top:6px}
.mini:hover{border-color:var(--karamell);color:var(--karamell)!important;transform:none!important}

/* Mobil-Feinschliff */
@media(max-width:900px){
  .runter{display:none}   /* Scroll-Indikator kollidiert am Handy mit den Hero-Buttons */
  .held{min-height:auto;padding:150px 0 70px}
  .held .wrap{grid-template-columns:1fr;gap:30px}
  .stadlbild{max-width:340px;margin:0 auto}
  /* Paket-Stapel am Handy deaktivieren (Flacker-Ursache) – Karten scrollen normal */
  .paketkarte{position:relative;top:auto!important;transform:none!important;filter:none!important}
}

/* Nur echte Phones: Hero-Überschrift kleiner, damit das längste Rotor-Wort
   ("Ihre Automatisierung.") nicht rechts über den Displayrand ragt.
   Tablets (600–900px) behalten die große Überschrift. */
@media(max-width:600px){
  .held h1{font-size:clamp(1.55rem,7vw,2.6rem)}
}

/* ============================================================
   TASTATUR-FOKUS
   Wer nicht mit der Maus arbeitet – aus Gewohnheit, wegen Zittern oder
   mit Screenreader – braucht zu sehen, wo er gerade steht. Der blaue
   Standardring des Browsers verschwindet auf unserem Dunkelgrün fast.
   :focus-visible statt :focus: der Ring erscheint bei Tastaturbedienung,
   aber nicht bei jedem Mausklick.
   ============================================================ */
:focus-visible{
  outline:3px solid var(--karamell-tief);
  outline-offset:3px;
  border-radius:6px;
}
/* Auf dunklen Flächen kehrt sich die Logik um: dort braucht der Ring
   die hellere Variante, sonst verschwindet er im Grün. */
.kontakt :focus-visible,footer :focus-visible,.dunkel :focus-visible,
.laufband :focus-visible,#menue :focus-visible{
  outline-color:var(--karamell-hell);
}
/* Knöpfe und Karten bringen ihre eigene Rundung mit – der Ring folgt ihr,
   statt eine zweite Form daneben zu setzen. */
.knopf:focus-visible,.mini:focus-visible,nav.haupt a:focus-visible{border-radius:99px}
.zelle:focus-visible,.quer a:focus-visible,.preis:focus-visible{border-radius:20px}
/* Maus- und Touchbedienung bekommen keinen Ring – da stört er nur. */
:focus:not(:focus-visible){outline:none}

/* ============================================================
   HANDY-FEINSCHLIFF (bis 620px)
   Die meisten Besucher kommen vom Handy. Alles hier hat ein Ziel:
   weniger Scrollen bei gleicher Ruhe, und Tippziele, die man trifft.
   ============================================================ */
@media(max-width:620px){

  /* --- Vertikaler Rhythmus ---
     Am Desktop trennen 110px zwei Abschnitte angenehm. Am Handy sind das
     zwei Drittel Bildschirm nur Leere – der Nutzer scrollt an Inhalt vorbei,
     ohne es zu merken. 64px trennen genauso klar, sparen aber pro Übergang
     fast einen halben Bildschirm. */
  section{padding-top:64px;padding-bottom:64px}
  .unterheld{padding-top:130px;padding-bottom:52px}
  footer{margin-top:64px;padding-top:56px}

  /* --- Karten ---
     34px Innenabstand kosten bei 390px Breite ein Fünftel der Textbreite.
     26px wirken genauso großzügig, lassen aber spürbar mehr Zeile übrig. */
  .zelle,.station,.check-form{padding:26px}
  .lkarte{padding:26px}
  .preis{padding:30px 24px}
  .quer a{padding:26px 24px}
  .kontakt{border-radius:24px}

  /* --- Lesbarkeit ---
     Zeilenhöhe 1.7 ist für breite Desktop-Spalten gedacht. Bei ~38 Zeichen
     pro Zeile am Handy zerfällt der Absatz damit in lauter Einzelzeilen;
     1.6 hält ihn als Block zusammen. Schrift bleibt bei 16px+ (darunter
     zoomt iOS beim Antippen von Feldern automatisch hinein). */
  body{line-height:1.6}
  p.gross{font-size:1.05rem;line-height:1.6}
  .zelle span:not(.zsymbol),.station span,.lkarte li{font-size:.95rem}
  /* Überschriften NIE automatisch trennen – in einer Display-Schrift sieht
     "arbei-tet" nach Fehler aus. Sie dürfen nur im Notfall umbrechen. */
  h1,h2,h3{overflow-wrap:break-word}
  /* Fließtext darf trennen (sonst sprengt "Auftragsverarbeitungsvertrag" die
     Zeile), aber erst ab 7 Zeichen und nie mit Zwei-Buchstaben-Rest –
     ohne die Grenze wird aus "Visitenkarte" ein "Vi-sitenkarte". */
  p,li,.zelle span:not(.zsymbol),.station span{
    overflow-wrap:break-word;hyphens:auto;
    -webkit-hyphenate-limit-before:4;-webkit-hyphenate-limit-after:3;
    hyphenate-limit-chars:7 4 3;
  }
  /* Überschriften brechen an sinnvoller Stelle statt mit einem Wort allein */
  h1,h2{text-wrap:balance}

  /* --- Tippziele ---
     Apple und Google nennen 44px als Mindestmaß für sicheres Treffen.
     Die Fußzeilen-Links lagen bei 17–34px: ohne genaues Zielen daneben. */
  footer .spalte a{padding:11px 0;font-size:1rem}
  footer .unten a{display:inline-block;padding:8px 0}
  .mini{padding:12px 20px!important}
  .vergleich a.mehr-link{display:inline-block;padding:10px 0}
  /* Knöpfe dürfen am Handy die volle Breite nehmen – ein Knopf, der die
     Zeile füllt, ist leichter zu treffen und wirkt entschiedener. */
  .knopf{width:100%;justify-content:center;padding:16px 22px}
  .knopf.klein,.mini{width:auto}

  /* --- Deko zähmen ---
     Das Riesenwort im Hintergrund ist am Desktop ein schöner Akzent.
     Am Handy überlagert es den Brotkrumen-Pfad und macht ihn schwer lesbar. */
  .unterheld .riesenwort{opacity:.5;top:70px}
}

/* ---------- Nachgebaute Ansicht (Postfach, E-Mail, Belegliste) ----------
   Zeigt dem Besucher, wie eine Automatik im Alltag aussieht. Immer als
   <figure> mit <figcaption> auszeichnen – es ist eine Nachbildung, kein
   Bildschirmfoto, und das muss auch ein Screenreader mitbekommen. */
.mockup{background:var(--papier);border:1px solid var(--linie);border-radius:20px;
  box-shadow:var(--schatten-l);overflow:hidden;max-width:640px;margin:0}
.mockup .leiste{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 18px;
  background:rgba(18,41,29,.06);border-bottom:1px solid var(--linie);
  font-size:.8rem;font-weight:700;letter-spacing:.04em;color:var(--grau)}
.mockup .rumpf{padding:22px 24px}
.mockup .fuss{padding:16px 24px 22px;border-top:1px dashed var(--linie);
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:.86rem;color:var(--grau)}
.mockup figcaption{padding:10px 24px 16px;font-size:.8rem;color:var(--grau)}
/* Breite Zeilen (Dateinamen, Beleglisten) scrollen in sich selbst –
   niemals den Body waagrecht scrollen lassen. */
.mockup .breit{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:620px){.mockup .rumpf{padding:18px}}

/* Belegliste im Mockup (Belegautomat) */
.belegliste{border-collapse:collapse;font-size:.86rem;min-width:430px}
.belegliste th{text-align:left;font-weight:700;color:var(--grau);padding:6px 16px 6px 0}
.belegliste td{padding:6px 16px 6px 0}
.belegliste th:last-child,.belegliste td:last-child{padding-right:0}
@media(max-width:620px){
  /* Am Handy passen fünf Spalten nicht ins Bild. Die Beleg-Nummer ist die
     entbehrlichste – ohne sie ist „Vorschlag" sichtbar, und genau die Spalte
     ist der Kern der Sache (der Automat schlägt vor, der Kunde bestätigt). */
  .belegliste .wegAmHandy{display:none}
  .belegliste{min-width:0;font-size:.82rem}
  .belegliste th,.belegliste td{padding-right:12px}
}

/* Mail-Kopf als <dl>, damit ein Screenreader „Von: …" wirklich vorliest */
.mailkopf{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:.86rem;
  padding-bottom:14px;margin-bottom:16px;border-bottom:1px dashed var(--linie)}
.mailkopf dt{color:var(--grau);font-weight:700}
.mailkopf dd{color:var(--tinte);margin:0}

/* Dateiliste (Belegautomat) – Modifier auf .lkarte, kein neuer Baustein.
   Muss NACH .lkarte.inkl/.extra li::before stehen, sonst bleibt das Häkchen. */
.lkarte.dateien li{padding-left:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.86rem;color:var(--tinte);line-height:1.55;word-break:break-all}
.lkarte.dateien li::before{content:none}

/* Status-Chip in Grün + einzelne Preiskarte nicht auf volle Breite ziehen
   (.preise ist auto-fit minmax(260px,1fr) – eine einzelne Karte würde sonst
   über die ganze Sektionsbreite laufen und kaputt aussehen). */
.merkmal.gruen{border-color:var(--moos);color:var(--tanne);background:rgba(47,92,62,.08)}
.preishuelle{max-width:380px;margin-top:40px}

/* PFLICHT: Hinweiskästen auf dunklem Grund – sonst grauer Text auf Schwarzgrün */
.dunkel .einfuehrung{background:rgba(250,246,236,.06);border-color:rgba(169,191,174,.22);color:var(--salbei)}
.dunkel .einfuehrung b,.dunkel .transparenz b{color:var(--creme)}
.dunkel .transparenz{color:var(--salbei)}
.dunkel .mockup{background:rgba(250,246,236,.04);border-color:rgba(169,191,174,.22)}
.dunkel .mockup .leiste{background:rgba(250,246,236,.06);border-bottom-color:rgba(169,191,174,.22);color:var(--salbei)}
.dunkel .mockup .rumpf,.dunkel .mockup .fuss{color:var(--salbei)}
.dunkel .mockup .fuss{border-top-color:rgba(169,191,174,.22)}
.dunkel .mockup figcaption{color:var(--salbei)}
.dunkel .mailkopf{border-bottom-color:rgba(169,191,174,.22)}
.dunkel .mailkopf dt{color:var(--salbei)}
.dunkel .mailkopf dd{color:var(--creme)}
.dunkel .merkmal{background:rgba(250,246,236,.08);border-color:rgba(169,191,174,.28);color:var(--salbei)}
.dunkel .merkmal.gruen{background:rgba(169,191,174,.16);border-color:var(--salbei);color:var(--creme)}

/* Sehr schmale Geräte (iPhone SE & Co.) */
@media(max-width:380px){
  .zelle,.station,.lkarte,.check-form{padding:22px}
  .preis{padding:26px 20px}
}

/* Reduzierte Bewegung */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important}
  [data-zeigen]{opacity:1;transform:none}
}

/* ---------- Autorenzeile und Aktualisierungsstempel ----------
   Wer eine Seite verantwortet und wann sie zuletzt geprüft wurde – sichtbar für
   Menschen und als JSON-LD (author, dateModified) für Maschinen. Grund: KI-Modelle
   gewichten benannte Autoren und datierte Seiten höher, und bei Seiten voller
   Preise ist das Datum ohnehin die ehrlichste Angabe, die wir machen können.
   Bewusst leise gehalten: Haarlinie und kleine Schrift, kein Kasten, kein Badge. */
/* Abstand nach oben positiv: stil.css setzt in Zeile 45 global margin:0, die
   Überschrift bringt also keinen eigenen Abstand mit, den man abziehen könnte. */
.byline{font-size:.88rem;color:var(--grau);margin:18px 0 0;line-height:1.6}
.byline b{font-weight:600;color:var(--holz)}
footer .stempel{margin-top:16px;font-size:.78rem;color:var(--salbei);opacity:.7;line-height:1.6}
footer .stempel b{font-weight:600}

/* ============================================================
   🔴 GANZ ZUM SCHLUSS: Laufband am Handy stillstellen
   Diese Regeln MÜSSEN hier unten stehen, nicht oben im Mobil-Block:
   `.laufband .spur` steht weiter oben und ist gleich spezifisch – bei
   Gleichstand gewinnt in CSS die SPÄTERE Regel. Im Mobil-Block wurde
   `animation:none` deshalb still überstimmt, die Laufschrift lief weiter und
   schob den einen sichtbaren Spruch aus dem Bild. Das sah aus wie Zittern und
   hat am 16.08.2026 mehrere Stunden gekostet.
   ⚠️ Wer hier etwas ändert, prüft die BERECHNETEN Werte im Browser
   (getComputedStyle), nicht nur den Quelltext.

   Warum überhaupt still: Die Laufschrift zittert am Handy auch dann, wenn die
   Bewegung über margin läuft – anders als beim Stadl. Der Unterschied ist
   nicht gefunden. Zurückdrehen: diesen Block löschen. */
@media(max-width:900px){
  .laufband .spur{animation:none;width:auto;justify-content:center}
  .laufband .spur span:not(:first-child){display:none}
}