/* Peinert — öffentliches Stylesheet · „Modern-Premium+ (hell)" — proto-5.
   Heller warm-neutraler Look, tiefes Smaragd als Akzent (kein Orange/Gold).
   Kein unsafe-inline, keine externen Ressourcen. Tokens in tokens.css.
   Farb-Semantik streng: Grün = geprüft/Wert · Bernstein = Mängel · Rot = Reserviert/Verkauft. */

/* ============================================================ RESET / BASIS */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);
  font-size:var(--text-base);line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:500;line-height:1.1;letter-spacing:-.02em;margin:0}
p{margin:0}
a{color:inherit}
img{max-width:100%;display:block}
ul,ol{margin:0;padding:0}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
:focus-visible{outline:var(--fokus);outline-offset:3px;border-radius:4px}
::selection{background:var(--accent-soft);color:var(--accent-ink)}

.skip{position:absolute;left:-999px;top:0;z-index:300;background:var(--accent);color:#FFFFFF;
  padding:10px 16px;border-radius:0 0 10px 0;font-weight:500;text-decoration:none}
.skip:focus{left:0}

/* ============================================================ ATMOSPHÄRE (Grain + Drift ~5%) */
.atmos{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.atmos .drift{position:absolute;inset:-25%;background:
  radial-gradient(46% 44% at 28% 22%,rgba(31,78,102,.07),transparent 60%),
  radial-gradient(42% 46% at 82% 72%,rgba(31,78,102,.06),transparent 62%)}
.atmos .grain{position:absolute;inset:0;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='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:150px 150px}
@keyframes atmosDrift{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(24px,-18px,0)}}

/* ============================================================ SCROLL-FORTSCHRITT */
.progress{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--accent-3),var(--accent));z-index:200;will-change:transform;
  box-shadow:0 1px 6px rgba(31,78,102,.35)}

/* ============================================================ DEMO-STREIFEN */
.demo-leiste{position:fixed;top:0;left:0;right:0;height:var(--demo-h);z-index:120;background:var(--ink);
  color:var(--paper);display:flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  padding:0 14px;text-align:center;margin:0}
.demo-leiste b{color:#FFFFFF}
.demo-dot{width:7px;height:7px;border-radius:50%;background:var(--accent-3);box-shadow:0 0 0 3px rgba(31,78,102,.35);flex:none;position:relative}
.demo-dot::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:3px solid rgba(31,78,102,.35);animation:pulseDot 2.6s ease-in-out infinite}
@keyframes pulseDot{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.7);opacity:0}}
/* Schmale Screens: der Demo-Text passt nicht mehr in eine Zeile. Statt in die Kopfzeile
   zu drängen, wächst der Streifen auf zwei Zeilen — und --demo-h wächst mit, sodass
   Header-Offset (top) und Shell-Abstand automatisch nachziehen (kein Überlappen, kein
   H-Overflow, nichts versteckt). */
@media (max-width:560px){
  :root{--demo-h:0px}
  .demo-leiste{font-size:.64rem;letter-spacing:.06em;line-height:1.28;padding:4px 12px}
}
@media (max-width:390px){
  :root{--demo-h:0px}
  .demo-leiste{font-size:.6rem;letter-spacing:.04em}
}

/* ============================================================ HEADER (schlanke, sichtbare Leiste) */
.header{position:fixed;top:var(--demo-h);left:0;right:0;z-index:110;
  display:flex;flex-direction:column;
  background:color-mix(in srgb,var(--paper) 82%,transparent);
  backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s ease,box-shadow .3s ease,background .3s ease}
.header.scrolled{border-bottom-color:var(--line);box-shadow:0 6px 24px rgba(20,11,0,.06);
  background:color-mix(in srgb,var(--paper) 92%,transparent)}

/* Utility-Zeile (obere, dünne Stufe): Standort · Bestandszahl · Telefon.
   Ruhige Mono-Typo, feine Trennlinie zur Hauptzeile — klappt beim Scrollen ein. */
.util{height:var(--util-h);overflow:hidden;border-bottom:1px solid var(--line);
  transition:height .35s var(--ease),opacity .3s ease,border-color .3s ease}
.header.scrolled .util{height:0;opacity:0;border-bottom-color:transparent}
.util-inner{max-width:var(--maxw);width:100%;margin:0 auto;height:var(--util-h);padding:0 var(--gutter);
  display:flex;align-items:center;gap:16px;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.03em;color:var(--ink-3)}
.util-ort{display:inline-flex;align-items:center;gap:.5em;white-space:nowrap}
.util-ort svg{width:13px;height:13px;color:var(--accent);flex:none}
.util-bestand{margin-left:auto;white-space:nowrap;color:var(--ink-2)}
.util-bestand strong{color:var(--accent-ink);font-weight:500}
.util-tel{display:inline-flex;align-items:baseline;gap:.6em;text-decoration:none;color:var(--ink-2);
  white-space:nowrap;padding-left:16px;border-left:1px solid var(--line)}
.util-tel-num{font-weight:500;color:var(--ink)}
.util-tel:hover .util-tel-num{color:var(--accent-ink)}

.nav{max-width:var(--maxw);width:100%;margin:0 auto;height:var(--head-h);padding:0 var(--gutter);display:flex;align-items:center;gap:clamp(14px,2vw,26px)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);flex:none}
.brand .wm{display:flex;flex-direction:column;line-height:1}
.brand-sig{display:flex;align-items:center;flex:none}
.brand-sig svg{width:1.7rem;height:1.7rem;display:block;transition:width .35s var(--ease),height .35s var(--ease)}
.header.scrolled .brand-sig svg{width:1.5rem;height:1.5rem}
/* Foto-Band (echte Hallen-Bilder / Symbolbild) */
.foto-band{padding:clamp(40px,6vw,84px) 0}
.foto-band-head{max-width:62ch;margin:0 0 clamp(20px,3vw,32px)}
.foto-band-head h2{font-family:var(--font-head);font-weight:500;font-size:clamp(1.5rem,1rem+2vw,2.25rem);letter-spacing:-.02em;margin:.35em 0 .25em;color:var(--ink)}
.foto-band-head p{color:var(--ink-2);max-width:56ch}
.foto-band-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,24px)}
.foto-band-grid figure{margin:0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-2);background:var(--sand)}
.foto-band-grid img{display:block;width:100%;height:100%;aspect-ratio:3/2;object-fit:cover}
@media (max-width:760px){.foto-band-grid{grid-template-columns:1fr}}
.brand .wm b{font-family:"Chivo",var(--font-head);font-weight:500;font-size:1.34rem;letter-spacing:-.012em;text-transform:none;transition:font-size .35s var(--ease)}
.wm .sq{display:inline-block;width:.16em;height:.16em;background:var(--accent);margin-left:.12em;border-radius:1px}
.brand .wm span{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-top:5px}
.header.scrolled .brand .wm b{font-size:1.18rem}

/* Panel auf Desktop transparent (Links + Aktionen fließen direkt in die Leiste).
   Kein Overlay, kein <details> — die Links sind ohne Klick sichtbar. */
.nav-panel{display:contents}
.nav-burger{display:none}

/* Nav-Links: linksbündig direkt neben der Wortmarke, dezenter senkrechter Trenner davor */
.nav-links{display:flex;align-items:center;gap:clamp(10px,1.4vw,22px);
  padding-left:clamp(14px,1.8vw,24px);border-left:1px solid var(--line)}
.nav-links a{position:relative;font-family:var(--font-head);font-weight:500;font-size:.95rem;
  color:var(--ink-2);text-decoration:none;white-space:nowrap;padding:6px 1px;line-height:1;
  transition:color .2s var(--ease)}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--ink)}
.nav-links a:hover::after,.nav-links a:focus-visible::after{transform:scaleX(1)}
.nav-links a[aria-current="page"]{color:var(--accent-ink)}
.nav-links a[aria-current="page"]::after{transform:scaleX(1)}

/* Rechte Seite: Telefon (Platzhalter) + CTA */
.nav-actions{display:flex;align-items:center;gap:14px;margin-left:auto;flex:none}
.nav-tel{display:flex;flex-direction:column;gap:2px;text-decoration:none;color:var(--ink);line-height:1.1}
.nav-tel-num{font-family:var(--font-mono);font-size:.9rem;font-weight:500;white-space:nowrap}
.nav-tel-lab{font-size:.6rem;color:var(--ink-3);letter-spacing:.04em}
.nav-tel:hover .nav-tel-num{color:var(--accent-ink)}
.nav-actions .btn-cta{padding:.62em 1.15em;font-size:.92rem;border-radius:6px}
/* Telefon lebt auf Desktop in der Utility-Zeile — im Hauptzeilen-Block nur mobil sichtbar */
.nav-actions .nav-tel{display:none}

/* Dezente Katalog-Suche in der Hauptzeile (führt zur Katalogsuche /maschinen) */
.nav-suche{display:flex;align-items:center;gap:.5em;position:relative;
  border:1px solid var(--line-2);border-radius:999px;background:var(--paper-2);
  padding:.4em .9em;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.nav-suche:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.nav-suche-ic{display:inline-flex;color:var(--ink-3);flex:none}
.nav-suche-ic svg{width:15px;height:15px}
.nav-suche input{border:0;background:none;font-family:var(--font-body);font-size:.86rem;color:var(--ink);
  width:9.5em;padding:0;outline:none}
.nav-suche input::placeholder{color:var(--ink-3)}

/* Mobil-Menü-Knopf (nur ≤820px + JS sichtbar) */
.nav-burger{align-items:center;gap:.6em;cursor:pointer;border:0;background:none;
  font-family:var(--font-head);font-weight:500;font-size:.96rem;color:var(--ink);padding:9px 2px;line-height:1}
.nav-burger-icon{display:inline-flex;flex-direction:column;justify-content:center;gap:4px;width:22px;height:14px}
.nav-burger-icon span{display:block;height:1.7px;background:var(--ink);border-radius:2px;transition:width .3s var(--ease)}
.nav-burger-icon span:nth-child(1){width:22px}
.nav-burger-icon span:nth-child(2){width:15px;align-self:flex-end}
.nav-burger-icon span:nth-child(3){width:19px}
.nav-burger[aria-expanded="true"] .nav-burger-icon span{width:22px}

/* ============================================================ BUTTONS */
.btn{position:relative;display:inline-flex;align-items:center;gap:.55em;font-family:var(--font-head);font-weight:500;font-size:1rem;line-height:1;padding:.95em 1.5em;border-radius:var(--r-pill);text-decoration:none;cursor:pointer;border:1px solid transparent;overflow:hidden;isolation:isolate;background:var(--accent);color:#FFFFFF;box-shadow:var(--sh-accent);transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s,color .25s,border-color .25s}
.btn .arw{transition:transform .3s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(120deg,transparent 25%,rgba(255,255,255,.30) 50%,transparent 75%);transform:translateX(-130%);transition:transform .7s var(--ease)}
.btn:hover{background:var(--accent-2);transform:translateY(-2px);box-shadow:0 20px 40px rgba(31,78,102,.30)}
.btn:hover::before{transform:translateX(130%)}
.btn[disabled]{opacity:.6;cursor:default}
.btn-primary{background:var(--accent);color:#FFFFFF}
/* sekundär / linie / outline — heller Grund, füllt sich */
.btn-secondary,.btn-linie,.btn-outline,.btn-sekundaer{background:var(--paper-2);color:var(--accent-ink);border-color:var(--line-2);box-shadow:var(--sh-1)}
.btn-secondary::before,.btn-linie::before,.btn-outline::before,.btn-sekundaer::before{background:var(--accent-soft);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.btn-secondary:hover,.btn-linie:hover,.btn-outline:hover,.btn-sekundaer:hover{background:var(--paper-2);color:var(--accent-ink);border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--sh-2)}
.btn-secondary:hover::before,.btn-linie:hover::before,.btn-outline:hover::before,.btn-sekundaer:hover::before{transform:scaleX(1)}
/* auf dunklen Flächen */
.btn-light{background:rgba(255,255,255,.10);color:#FFFFFF;border-color:rgba(255,255,255,.35);backdrop-filter:blur(4px);box-shadow:none}
.btn-light::before{display:none}
.btn-light:hover{background:#FFFFFF;color:var(--accent-2);transform:translateY(-2px);box-shadow:0 16px 34px rgba(0,0,0,.28)}
.btn-white{background:#FFFFFF;color:var(--accent-2);box-shadow:0 12px 30px rgba(0,0,0,.22)}
.btn-white:hover{background:#FFFFFF;color:var(--accent-2);transform:translateY(-2px);box-shadow:0 20px 44px rgba(0,0,0,.3)}
/* Sekundär-Knopf im Katalog kompakter */
.btn-sekundaer{font-size:.92rem;padding:.7em 1.15em}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}
/* Textlink */
.tlink{display:inline-flex;align-items:center;gap:.45em;text-decoration:none;font-family:var(--font-head);font-weight:500;color:var(--accent-ink);position:relative}
.tlink .u{position:absolute;left:0;right:1.6em;bottom:-2px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.tlink:hover .u{transform:scaleX(1)}
.tlink .arw{transition:transform .3s var(--ease)}
.tlink:hover .arw{transform:translateX(4px)}
/* schlichter Inline-Link in Karten */
.btn-link{display:inline-flex;align-items:center;gap:.4em;text-decoration:none;font-family:var(--font-head);font-weight:500;color:var(--accent-ink)}
.btn-link .arw{transition:transform .3s var(--ease)}
.btn-link:hover .arw{transform:translateX(4px)}
/* CTA-Knopf (eigenständig, seriös): rechteckig, feiner Rahmen, Fill von unten + Pfeil */
.btn-cta{position:relative;display:inline-flex;align-items:center;gap:.6em;font-family:var(--font-head);font-weight:500;font-size:1rem;line-height:1;padding:.9em 1.6em;border:1.5px solid var(--accent);border-radius:4px;color:var(--accent-ink);background:transparent;text-decoration:none;cursor:pointer;overflow:hidden;isolation:isolate;transition:color .35s var(--ease),border-color .35s var(--ease)}
.btn-cta::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--accent);transform:translateY(101%);transition:transform .4s var(--ease)}
.btn-cta:hover,.btn-cta:focus-visible{color:#FFFFFF}
.btn-cta:hover::before,.btn-cta:focus-visible::before{transform:translateY(0)}
.btn-cta .arw{transition:transform .35s var(--ease)}
.btn-cta:hover .arw,.btn-cta:focus-visible .arw{transform:translateX(5px)}
.btn-cta:active{transform:translateY(1px)}

/* ============================================================ LAYOUT / SHELL */
.shell{padding-top:calc(var(--demo-h) + var(--util-h) + var(--head-h))}
main{display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.section,.sektion{padding:var(--raum-sektion) 0;position:relative}
.sektion.tight,.section.tight{padding-top:clamp(20px,3vw,40px)}
.pt0{padding-top:0 !important}
.band{background:var(--sand)}
.abstand-oben{margin-top:clamp(22px,3vw,34px)}
.abstand-klein{margin-top:14px}
.klein{font-size:var(--text-klein)}
.muted{color:var(--ink-2)}
.luecke{color:var(--grau-luecke);font-style:normal}
.eyebrow{display:inline-flex;align-items:center;gap:.55em;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:500}
.eyebrow::before{content:"";width:22px;height:1.5px;background:var(--accent);opacity:.6}
.vorzeile{display:inline-block;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:500;margin-bottom:8px}
.sec-head{max-width:60ch;margin-bottom:clamp(30px,4vw,52px)}
.sec-head h2{font-size:clamp(1.9rem,1.2rem+2vw,3rem);margin-top:16px}
.sec-head p{margin-top:16px;color:var(--ink-2);font-size:1.1rem;max-width:56ch}
.sektion-kopf{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:flex-end;justify-content:space-between;margin-bottom:clamp(24px,3vw,40px)}
.sektion-kopf h1,.sektion-kopf h2{font-size:clamp(1.8rem,1.2rem+1.8vw,2.7rem)}
.untertitel{margin-top:16px;color:var(--ink-2);font-size:clamp(1.05rem,1rem+.4vw,1.22rem);max-width:60ch}
.lead-p{font-size:1.08rem;color:var(--ink);max-width:60ch}
.lead-p+.lead-p{margin-top:16px}
.zaehler,.treffer-zeile,.cap-note,.note{font-family:var(--font-mono);font-size:.8rem;color:var(--ink-3)}
.treffer-zeile{margin:18px 0 22px}
.cap-note{margin-top:20px}
.note{margin-top:20px;display:flex;align-items:center;gap:.5em}
h1{font-size:clamp(2rem,1.3rem+2.4vw,3.2rem);letter-spacing:-.025em}
.sektion h2,.section h2{font-size:clamp(1.6rem,1.1rem+1.6vw,2.4rem)}
.sektion h3,.section h3{font-size:1.2rem}
.sektion p+p{margin-top:14px}
.nur-print{display:none}
/* Fließtext-Links (nur Prosa — Karten-Titel/Buttons/Tlinks ausgenommen) */
.sektion p a:not(.btn):not(.tlink):not(.btn-link),
.untertitel a,
.hinweis-kasten a,
.faq-body a,
.liste-schlicht a,
.protokoll dd a,
.akte-haupt a:not(.btn):not(.btn-sekundaer),
.textseite a:not(.btn){color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.sektion p a:not(.btn):not(.tlink):not(.btn-link):hover,
.hinweis-kasten a:hover,.faq-body a:hover,.protokoll dd a:hover,
.akte-haupt a:not(.btn):not(.btn-sekundaer):hover,.textseite a:not(.btn):hover{text-decoration-thickness:2px}
.platzhalter-marke{display:inline-block;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.04em;padding:2px 7px;border-radius:999px;background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-line);vertical-align:baseline;text-decoration:none}
.entwurf-marke{display:inline-block;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.05em;padding:5px 12px;border-radius:999px;background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-line);margin-bottom:18px}

/* Placeholder-Medien (gedeckt grün, kein Orange, „Foto folgt") */
.ph{position:relative;background:var(--sand);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:120px;color:var(--ink-3)}
.ph::before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(135deg,transparent 0 13px,rgba(31,78,102,.05) 13px 14px);transition:transform .55s var(--ease)}
.ph-label{position:relative;z-index:1;display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-mono);font-size:.78rem;letter-spacing:.04em;color:var(--ink-3);transition:transform .45s var(--ease);text-align:center;padding:0 10px}
.ph-label svg{width:16px;height:16px;opacity:.6}
.ph-tag{position:absolute;z-index:2;top:12px;left:12px;font-family:var(--font-mono);font-size:.64rem;letter-spacing:.05em;padding:5px 10px;background:var(--paper-2);border:1px solid var(--line);border-radius:999px;color:var(--ink-2)}
.ph-no{position:absolute;z-index:2;bottom:12px;right:12px;font-family:var(--font-mono);font-size:.64rem;color:var(--ink-3)}
.ph-dark,.ph-invert{background:var(--panel)}
.ph-dark::before,.ph-invert::before{background-image:repeating-linear-gradient(135deg,transparent 0 13px,rgba(255,255,255,.06) 13px 14px)}
.ph-dark .ph-label,.ph-invert .ph-label{color:rgba(255,255,255,.72)}
.ph-invert .ph-tag{background:var(--panel-2);border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.75)}
.demo-chip{display:inline-flex;align-items:center;gap:.4em;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent-ink);border:1px solid color-mix(in srgb,var(--accent) 22%,transparent)}

/* ============================================================ HERO */
.hero{position:relative;overflow:hidden;padding:clamp(30px,5vw,64px) 0 clamp(48px,6vw,86px)}
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-bg .blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55}
.hero-bg .b1{width:520px;height:520px;top:-160px;right:-120px;background:radial-gradient(circle,rgba(31,78,102,.28),transparent 68%);animation:drift1 22s ease-in-out infinite}
.hero-bg .b2{width:440px;height:440px;bottom:-180px;left:-100px;background:radial-gradient(circle,rgba(31,78,102,.18),transparent 70%);animation:drift2 26s ease-in-out infinite}
.hero-bg .grid{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;opacity:.35;mask-image:radial-gradient(circle at 70% 30%,#000,transparent 72%);-webkit-mask-image:radial-gradient(circle at 70% 30%,#000,transparent 72%)}
@keyframes drift1{0%,100%{transform:translate(0,0)}50%{transform:translate(-40px,30px)}}
@keyframes drift2{0%,100%{transform:translate(0,0)}50%{transform:translate(36px,-28px)}}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(32px,4vw,64px);align-items:center}
.hero-copy .badge{display:inline-flex;align-items:center;flex-wrap:wrap;gap:.55em;background:var(--paper-2);border:1px solid var(--line);box-shadow:var(--sh-1);border-radius:999px;padding:7px 14px 7px 8px;font-size:.82rem;color:var(--ink-2);margin-bottom:26px}
.hero-copy .badge .pin{display:inline-flex;align-items:center;gap:.35em;background:var(--accent-soft);color:var(--accent-ink);border-radius:999px;padding:3px 9px;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.05em}
.hero-copy .badge .pin .lp{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(31,78,102,.22)}
.hero-copy h1{font-size:clamp(2.3rem,1.3rem+4.4vw,4.4rem);letter-spacing:-.03em;line-height:1.02}
.hero-copy h1 .accent{color:var(--accent)}
.hero-copy .sub{margin-top:22px;font-size:clamp(1.05rem,1rem+.4vw,1.28rem);color:var(--ink-2);max-width:46ch}
.hero-cta{margin-top:32px}
.hero-facts{margin-top:34px;display:flex;flex-wrap:wrap;gap:8px 22px;padding-top:24px;border-top:1px solid var(--line)}
.hero-facts li{list-style:none;display:flex;align-items:center;gap:.5em;font-size:.9rem;color:var(--ink-2)}
.hero-facts li svg{width:16px;height:16px;color:var(--accent);flex:none}
/* hero visual — Musterakte */
.hero-visual{position:relative;min-height:440px}
.akte-karte{position:relative;z-index:2;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-3);padding:20px;max-width:400px;margin-left:auto}
.akte-karte .akte-photo{aspect-ratio:16/11;border-radius:var(--r);margin-bottom:16px;min-height:0}
.akte-karte .akte-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}
.akte-karte .akte-head h3{font-size:1.22rem}
.akte-karte .akte-head .onr{font-family:var(--font-mono);font-size:.7rem;color:var(--ink-3);margin-top:4px}
.akte-karte .rows{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.akte-karte .rows div{background:var(--paper-2);padding:10px 12px}
.akte-karte .rows .k{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.akte-karte .rows .v{font-size:.92rem;font-weight:500;margin-top:3px}
.akte-karte .akte-foot{display:flex;align-items:center;justify-content:space-between;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.akte-karte .price{font-family:var(--font-head);font-weight:500;font-size:1.3rem}
.akte-karte .price small{display:block;font-family:var(--font-mono);font-size:.6rem;font-weight:400;color:var(--ink-3);letter-spacing:.05em;text-transform:uppercase}
.akte-karte .pseudo-btn{display:inline-flex;align-items:center;gap:.4em;background:var(--accent);color:#FFFFFF;border-radius:10px;padding:.6em 1em;font-family:var(--font-head);font-weight:500;font-size:.9rem}
.float{position:absolute;z-index:3;background:var(--paper-2);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-2);padding:12px 15px;display:flex;align-items:center;gap:11px}
.float .ic{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.float .ic svg{width:18px;height:18px}
.float .t b{display:block;font-family:var(--font-head);font-weight:500;font-size:.92rem;line-height:1.1}
.float .t span{font-size:.72rem;color:var(--ink-3)}
.float-1{top:14px;left:-8px}
.float-2{bottom:28px;left:-16px}
.float-tag{position:absolute;z-index:4;top:-14px;right:8px;background:none;border:0;box-shadow:none;padding:0}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* ============================================================ TRUST BAND */
.trust{background:var(--panel);color:#FFFFFF;position:relative;overflow:hidden}
.trust::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 15% 20%,rgba(31,78,102,.4),transparent 55%);pointer-events:none}
.trust .wrap{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:14px 34px;padding-top:22px;padding-bottom:22px;align-items:center;justify-content:center;list-style:none}
.trust li{list-style:none;display:flex;align-items:center;gap:.6em;font-size:.96rem;color:rgba(255,255,255,.92)}
.trust li svg{width:18px;height:18px;color:#8FB8CC;flex:none}
.trust .sep{width:1px;height:16px;background:rgba(255,255,255,.2)}

/* ============================================================ STATS */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.stat{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 26px;box-shadow:var(--sh-1);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.stat:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.stat .n{font-family:var(--font-head);font-weight:500;font-size:clamp(2.6rem,1.6rem+2.4vw,3.6rem);line-height:1;letter-spacing:-.03em;color:var(--accent);font-variant-numeric:tabular-nums}
.stat .n .suf{font-size:.5em;color:var(--ink-3);margin-left:.1em}
.stat .lab{margin-top:12px;font-weight:500;font-family:var(--font-head)}
.stat .desc{margin-top:5px;font-size:.88rem;color:var(--ink-3)}

/* ============================================================ WARENGRUPPEN */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.wcard{position:relative;display:flex;flex-direction:column;text-decoration:none;color:inherit;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-1);transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.wcard:hover{transform:translateY(-6px);box-shadow:var(--sh-3);border-color:color-mix(in srgb,var(--accent) 30%,var(--line))}
.wcard .ph{border:0;border-radius:0;border-bottom:1px solid var(--line);aspect-ratio:4/3;min-height:0}
.wcard:hover .ph::before{transform:scale(1.09)}
.wcard:hover .ph-label{transform:scale(1.05)}
.wcard .body{padding:24px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.wcard h3{font-size:1.35rem}
.wcard .subs{color:var(--ink-2);font-size:.95rem}
.wcard .count{font-family:var(--font-mono);font-size:.76rem;color:var(--ink-3)}
.wcard .go{margin-top:auto;padding-top:14px;color:var(--accent-ink);font-family:var(--font-head);font-weight:500;display:inline-flex;align-items:center;gap:.45em}
.wcard .go .arw{transition:transform .3s var(--ease)}
.wcard:hover .go .arw{transform:translateX(5px)}

/* ============================================================ STEPS (4-Schritte + Kaufablauf) */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;list-style:none}
.step{position:relative;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 24px;box-shadow:var(--sh-1);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.step:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.step .snr{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:13px;background:var(--accent-soft);color:var(--accent);font-family:var(--font-head);font-weight:500;font-size:1.3rem;margin-bottom:16px}
.step h3{font-size:1.2rem;margin-bottom:8px}
.step p{color:var(--ink-2);font-size:.96rem}
/* Schritte-Liste (Unterseiten: Kaufablauf/Besichtigung) */
.schritte{list-style:none;display:grid;gap:16px}
.schritte>li{display:grid;grid-template-columns:auto 1fr;gap:18px;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;box-shadow:var(--sh-1)}
.schritte>li .snr{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex:none;border-radius:11px;background:var(--accent-soft);color:var(--accent);font-family:var(--font-head);font-weight:500}
.schritte>li h3{font-size:1.12rem;margin-bottom:6px}
.schritte>li p{color:var(--ink-2)}

/* ============================================================ ABLAUF (Prozess-Rail, benannte Phasen — bewusst KEINE Nummern-Kacheln) */
.ablauf-intro{max-width:66ch}
.ablauf-intro h2{font-size:clamp(1.9rem,1.2rem+2vw,3rem);margin-top:14px}
.ablauf-lead{margin-top:16px;color:var(--ink-2);font-size:clamp(1.05rem,1rem+.4vw,1.2rem);max-width:66ch}
.ablauf-rail{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(16px,2vw,26px);
  margin-top:clamp(30px,4vw,52px)}
.ablauf-phase{position:relative;padding-top:34px}
/* Verbindungslinie hinter den Punkten (Fluss, nicht isolierte Kacheln) */
.ablauf-phase::before{content:"";position:absolute;top:13px;left:15px;right:calc(-1 * clamp(16px,2vw,26px));
  height:2px;background:linear-gradient(90deg,var(--accent),var(--line-2));z-index:0}
.ablauf-phase:last-child::before{display:none}
.ablauf-punkt{position:absolute;top:6px;left:0;width:16px;height:16px;border-radius:50%;
  background:var(--paper-2);border:2px solid var(--accent);z-index:1}
.ablauf-punkt::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--accent)}
.ablauf-phase-nr{display:inline-block;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);font-weight:500}
.ablauf-phase h3{font-size:1.12rem;margin-top:8px;line-height:1.22}
.ablauf-phase p{margin-top:8px;color:var(--ink-2);font-size:.95rem}
.ablauf-phase p a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}

/* ============================================================ STORY / FIRMEN-ZEITLEISTE (home) */
.story-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(30px,4.5vw,72px);align-items:start}
.story-copy .lead{font-size:1.08rem;color:var(--ink-2);margin-top:16px}
.story-copy .lead.big{font-size:clamp(1.3rem,1.05rem+1vw,1.7rem);color:var(--ink);font-family:var(--font-head);font-weight:500;letter-spacing:-.01em;line-height:1.35;margin-top:16px}
.story-copy .pill{display:inline-flex;align-items:center;gap:.5em;margin-top:24px;background:var(--accent-soft);color:var(--accent-ink);border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);border-radius:999px;padding:9px 15px;font-size:.9rem;font-weight:500}
.story-copy .pill svg{width:17px;height:17px;flex:none}
.story-timeline{position:relative;list-style:none;margin:0;padding:2px 0 0 40px}
.story-timeline::before{content:"";position:absolute;left:12px;top:12px;bottom:14px;width:2px;background:linear-gradient(var(--accent),var(--line-2))}
.tl-item{position:relative;padding-bottom:30px}
.tl-item:last-child{padding-bottom:0}
.tl-dot{position:absolute;left:-40px;top:1px;width:26px;height:26px;border-radius:50%;background:var(--paper-2);border:2px solid var(--accent);display:grid;place-items:center;box-shadow:0 4px 10px rgba(31,78,102,.14)}
.tl-dot::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--accent)}
.tl-year{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-weight:500;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tl-item h3{font-size:1.18rem;margin-top:7px}
.tl-item p{color:var(--ink-2);font-size:.96rem;margin-top:6px;max-width:46ch}

/* ============================================================ ABOUT / PERSON */
.about{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(30px,4vw,60px);align-items:center}
.about .lead+.lead{margin-top:18px}
.about .lead{font-size:1.08rem;color:var(--ink-2)}
.about .lead.big{font-size:clamp(1.3rem,1.05rem+1vw,1.7rem);color:var(--ink);font-family:var(--font-head);font-weight:500;letter-spacing:-.01em;line-height:1.35}
.about .roleline{margin-top:22px;font-size:.95rem;color:var(--ink-3)}
.about h2{margin-bottom:8px}
.person{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--sh-2)}
.person .ph{aspect-ratio:4/5;margin-bottom:18px;min-height:0}
.person .role{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:7px}
.person .name{font-family:var(--font-head);font-weight:500;font-size:1.5rem;letter-spacing:-.01em}
.person .org{color:var(--ink-2);font-size:.92rem;margin-top:5px}
.person .fmark{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:.8rem;color:var(--ink-3);display:flex;align-items:center;gap:.5em;flex-wrap:wrap}
.person .callo{margin-top:12px;font-size:.9rem;color:var(--accent-ink);display:flex;align-items:center;gap:.5em;font-weight:500}
.person .callo svg{width:16px;height:16px;flex:none}

/* ============================================================ REGION · EISENACH (Wartburg + Karte) */
.region-grid{display:grid;grid-template-columns:1fr 1.08fr;gap:clamp(30px,4vw,64px);align-items:center}
.region-copy p{margin-top:16px;color:var(--ink-2);font-size:1.08rem;max-width:52ch}
.region-copy h2{margin-top:16px;font-size:clamp(1.8rem,1.2rem+1.8vw,2.6rem)}
.region-facts{display:grid;gap:2px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:26px}
.region-facts .row{background:var(--paper-2);padding:14px 18px}
.region-facts .k{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.region-facts .v{font-size:1rem;margin-top:4px;font-weight:500}
.region-facts .v small{display:block;font-size:.76rem;color:var(--ink-3);margin-top:2px;font-weight:400}
.region-visual{display:flex;flex-direction:column;gap:18px}
.wartburg{margin:0;position:relative;background:linear-gradient(160deg,var(--accent-soft),var(--paper-2));border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 26px 18px;box-shadow:var(--sh-1);overflow:hidden}
.wartburg::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(31,78,102,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(31,78,102,.05) 1px,transparent 1px);background-size:34px 34px;mask-image:radial-gradient(circle at 70% 20%,#000,transparent 75%);-webkit-mask-image:radial-gradient(circle at 70% 20%,#000,transparent 75%);pointer-events:none}
.wartburg svg{position:relative;z-index:1;width:100%;height:auto;display:block}
.wartburg path{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wartburg .ridge{stroke:var(--line-2);stroke-width:1.6}
.wartburg figcaption{position:relative;z-index:1;margin-top:14px;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:.5em}
.mapcard{min-height:clamp(190px,24vw,240px);flex-direction:column;gap:12px}
.mapcard .mapgrid{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:38px 38px;opacity:.55;mask-image:radial-gradient(circle at 50% 42%,#000,transparent 80%);-webkit-mask-image:radial-gradient(circle at 50% 42%,#000,transparent 80%)}
.mapcard .mroad{position:absolute;inset:0;pointer-events:none}
.mapcard .mroad span{position:absolute;background:var(--line-2);opacity:.6}
.mapcard .mroad .r1{left:0;right:0;top:52%;height:2px;transform:rotate(-4deg)}
.mapcard .mroad .r2{top:0;bottom:0;left:38%;width:2px;transform:rotate(3deg)}
.mapcard .mappin{position:relative;z-index:1;color:var(--accent)}
.mapcard .mappin svg{width:38px;height:38px;filter:drop-shadow(0 6px 12px rgba(31,78,102,.3))}
.mapcard .mappin::before{content:"";position:absolute;left:50%;top:38%;width:12px;height:12px;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 0 rgba(31,78,102,.4)}
.mapcard .mappin::after{content:"";position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);width:24px;height:8px;border-radius:50%;background:rgba(31,78,102,.16)}
.mapcard .ph-label{position:relative;z-index:1}
/* Echte Standortkarte (lokales OSM-Bild, kein externer Live-Abruf) */
.mapfig{margin:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-1);background:var(--paper-2)}
.mapfig img{width:100%;height:auto;aspect-ratio:820/460;object-fit:cover}
.mapfig figcaption{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:12px 16px;font-size:.82rem;color:var(--ink-3)}
.mapfig figcaption span{display:inline-flex;align-items:center;gap:.5em}
.mapfig figcaption .tlink{font-size:.82rem;white-space:nowrap}

/* ============================================================ NEWS / AKTUELLES */
.news{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ncard{display:flex;flex-direction:column;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-1);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.ncard:hover{transform:translateY(-5px);box-shadow:var(--sh-2)}
.ncard:hover .ph::before{transform:scale(1.08)}
.ncard .ph{border:0;border-radius:0;border-bottom:1px solid var(--line);aspect-ratio:16/9;min-height:0}
.ncard .body{padding:22px;display:flex;flex-direction:column;gap:8px;flex:1}
.ncard .meta{display:flex;align-items:center;gap:10px}
.ncard .date{font-family:var(--font-mono);font-size:.74rem;color:var(--ink-3)}
.ncard h3{font-size:1.16rem}
.ncard p{color:var(--ink-2);font-size:.95rem}
.chip-demo{display:inline-flex;align-self:flex-start;align-items:center;gap:.4em;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent-ink);border:1px solid color-mix(in srgb,var(--accent) 22%,transparent)}

/* ============================================================ PRÜFEN / CHECK */
.check{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,4vw,60px);align-items:start}
.check h2{margin-top:16px;font-size:clamp(1.8rem,1.2rem+1.8vw,2.6rem)}
.check .muted{margin-top:16px;font-size:1.08rem}
.check-list{list-style:none;display:flex;flex-direction:column;gap:14px}
.check-list li,.check-item{display:grid;grid-template-columns:auto 1fr;gap:18px;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;box-shadow:var(--sh-1);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.check-list li:hover,.check-item:hover{transform:translateX(4px);box-shadow:var(--sh-2)}
.check-list .cn,.check-item .cn{font-family:var(--font-mono);font-size:.9rem;color:var(--accent);padding-top:3px;font-weight:500}
.check-list h3,.check-item h3{font-size:1.1rem;margin-bottom:6px}
.check-list p,.check-item p{color:var(--ink-2);font-size:.95rem}
.check-aside{position:sticky;top:calc(var(--demo-h) + var(--head-h) + 24px)}

/* ============================================================ PANEL / CTA-BAND (Verwalter) */
.panel,.cta-band{position:relative;background:linear-gradient(150deg,var(--panel),var(--panel-2));color:#FFFFFF;border-radius:var(--r-xl);padding:clamp(32px,4.5vw,64px);overflow:hidden;box-shadow:var(--sh-3)}
.panel::after,.cta-band::after{content:"";position:absolute;top:-120px;right:-100px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(31,78,102,.45),transparent 66%);filter:blur(30px);pointer-events:none}
.panel::before,.cta-band::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:52px 52px;mask-image:radial-gradient(circle at 80% 10%,#000,transparent 70%);-webkit-mask-image:radial-gradient(circle at 80% 10%,#000,transparent 70%);pointer-events:none}
.panel .inner,.cta-band>*{position:relative;z-index:1}
.panel .inner{max-width:64ch}
.panel .eyebrow{color:#8FB8CC}
.panel .eyebrow::before{background:#8FB8CC}
.panel h2,.cta-band h2{font-size:clamp(1.7rem,1.2rem+1.8vw,2.7rem);margin-top:16px;color:#FFFFFF;max-width:22ch}
.panel p,.cta-band p{margin-top:18px;color:rgba(255,255,255,.85);font-size:1.08rem;max-width:64ch}
.panel .btn-row,.cta-band-cta{margin-top:30px}
.door-tag{display:inline-flex;align-items:center;gap:.6em;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.door-tag .n{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);font-weight:500;color:#FFFFFF}

/* ============================================================ CLOSER / KONTAKT (home) */
.closer{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(30px,4vw,60px);align-items:center;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(32px,4vw,60px);box-shadow:var(--sh-2)}
.closer h2{font-size:clamp(1.8rem,1.2rem+2vw,2.8rem);margin-top:16px}
.closer p{margin-top:16px;color:var(--ink-2);font-size:1.08rem;max-width:46ch}
.contact{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(30px,4vw,60px);align-items:start}
.contact h2{margin-top:12px}
.contact .lead{margin-top:16px;color:var(--ink-2);font-size:1.06rem;max-width:48ch}
.contact .actions{margin-top:24px;display:flex;flex-wrap:wrap;gap:14px}
.contact .map{margin-top:26px}
.contact .map .ph{aspect-ratio:16/9;min-height:0}
.facts{display:grid;gap:2px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;align-self:start}
.facts .row{background:var(--paper);padding:16px 20px}
.facts .k{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.facts .v{font-size:1.02rem;margin-top:4px;font-weight:500}
.facts .v a{color:var(--accent-ink);text-decoration:none}
.facts .v small{display:block;font-size:.76rem;color:var(--ink-3);margin-top:3px;font-weight:400}

/* ============================================================ FOOTER */
.footer{background:var(--ink);color:rgba(255,255,255,.82);padding:clamp(48px,6vw,80px) 0 32px;margin-top:clamp(56px,7vw,100px)}
.footer a{color:rgba(255,255,255,.82);text-decoration:none;transition:color .2s}
.footer a:hover{color:#FFFFFF}
.foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px}
.foot-brand .wm b{font-family:"Chivo",var(--font-head);font-weight:500;font-size:1.5rem;color:#FFFFFF;letter-spacing:-.012em;text-transform:none}
.foot-brand .wm span{display:block;font-family:var(--font-mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-top:8px}
.foot-brand p{margin-top:18px;font-size:.92rem;color:rgba(255,255,255,.6);max-width:34ch}
.foot-col .foot-titel{font-family:var(--font-head);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:16px}
.foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;font-size:.95rem}
.foot-reg{margin-top:38px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);font-size:.86rem;color:rgba(255,255,255,.6);line-height:1.75}
.foot-reg b{color:#FFFFFF}
.foot-reg .platzhalter-marke{background:transparent;border-color:rgba(255,255,255,.3);color:rgba(255,255,255,.7)}
.foot-bottom{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.04em;color:rgba(255,255,255,.5)}

/* ============================================================ CHIPS (Farbsemantik) */
.chip{display:inline-flex;align-items:center;gap:.4em;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.03em;padding:4px 10px;border-radius:999px;background:var(--neutral-bg);color:var(--ink-2);border:1px solid var(--line)}
.chip-ok,.chip-voll{background:var(--ok-bg);color:var(--ok-ink);border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
.chip-warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}
.chip-grau{background:var(--neutral-bg);color:var(--ink-3);border-color:var(--line)}
.chip-status,.chip-signal{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-line)}
.chip-klaerung{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}
.chip-muster{background:var(--ink);color:#FFFFFF;border-color:var(--ink)}
.chip-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none;display:inline-block}

/* ============================================================ KATALOG-FILTER */
.filterleiste{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px;box-shadow:var(--sh-1);margin-top:6px}
.filter-chips{display:flex;flex-wrap:wrap;gap:10px}
.fchip{font:inherit;font-family:var(--font-head);font-weight:500;font-size:.92rem;display:inline-flex;align-items:center;gap:.5em;padding:.55em 1em;border-radius:999px;border:1px solid var(--line-2);background:var(--paper);color:var(--ink-2);cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s}
.fchip:hover{border-color:var(--accent);color:var(--ink)}
.fchip[aria-pressed="true"]{background:var(--accent);color:#FFFFFF;border-color:var(--accent);box-shadow:var(--sh-accent)}
.fchip .fcount{font-family:var(--font-mono);font-size:.72rem;font-weight:500;opacity:.75}
.fchip .fcount::before{content:"("}
.fchip .fcount::after{content:")"}
.fchip[aria-pressed="true"] .fcount{opacity:.9}
.filter-zeile{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px 18px;margin-top:16px}
.filter-feld{display:flex;flex-direction:column;gap:6px;min-width:0}
.filter-feld label{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.filter-feld input,.filter-feld select,.sort-sel{font:inherit;font-size:.94rem;padding:.6em .8em;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--paper);color:var(--ink);width:100%}
.filter-feld input:focus,.filter-feld select:focus,.sort-sel:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px rgba(31,78,102,.14)}
.feld-versteckt{display:none}
.katalog-tools{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:end;justify-content:space-between;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.katalog-tools-links{display:flex;align-items:center;gap:10px}
.katalog-tools-links label{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.sort-sel{width:auto;min-width:200px}
.view-toggle{display:inline-flex;border:1px solid var(--line-2);border-radius:999px;overflow:hidden;background:var(--paper)}
.view-toggle button{font:inherit;font-family:var(--font-head);font-weight:500;font-size:.86rem;padding:.5em 1.1em;border:0;background:none;color:var(--ink-2);cursor:pointer}
.view-toggle button[aria-pressed="true"]{background:var(--accent);color:#FFFFFF}
.leer-zustand{text-align:center;padding:48px 20px;color:var(--ink-2)}
.leer-zustand p{margin-bottom:16px}

/* ============================================================ KATALOG (Register-Bereich, Warengruppen) */
.katalog-sektion{background:var(--katalog-bg)}
.katalog-gruppen{display:flex;flex-direction:column;gap:clamp(40px,5vw,74px);margin-top:10px}
.warengruppe{scroll-margin-top:calc(var(--demo-h) + var(--head-h) + 16px)}
.warengruppe[hidden]{display:none}
.wg-kopf{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 24px;margin-bottom:clamp(18px,2.4vw,26px);padding-bottom:14px;border-bottom:1px solid var(--katalog-line)}
.wg-eyebrow{display:inline-flex;align-items:center;gap:.55em;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:500}
.wg-eyebrow::before{content:"";width:20px;height:1.5px;background:var(--accent);opacity:.6}
.wg-kopf h2{font-size:clamp(1.45rem,1.05rem+1.5vw,2.25rem);margin-top:8px}
.wg-sub{color:var(--ink-2);font-size:.98rem;margin-top:7px;max-width:62ch}
.wg-count{font-family:var(--font-mono);font-size:.8rem;color:var(--ink-3);white-space:nowrap;align-self:flex-end}
.wg-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
/* Listen-Ansicht (Umschalter erhalten) */
.katalog-gruppen.liste .wg-raster{grid-template-columns:1fr}
.katalog-gruppen.liste .karte{flex-direction:row;align-items:stretch}
.katalog-gruppen.liste .karte-bild{aspect-ratio:auto;width:min(38%,260px);border-bottom:0;border-right:1px solid var(--line)}
.katalog-gruppen.liste .karte-koerper{flex:1}

/* ============================================================ KATALOGKARTE (_karte) */
.karten-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:6px}
.karten-raster.liste{grid-template-columns:1fr}
.karte{position:relative;display:flex;flex-direction:column;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-1);transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.karte:hover{transform:translateY(-6px);box-shadow:var(--sh-3);border-color:color-mix(in srgb,var(--accent) 26%,var(--line))}
.karte-bild{position:relative;aspect-ratio:16/9;background:var(--sand);border-bottom:1px solid var(--line);overflow:hidden;display:flex;align-items:center;justify-content:center}
.karte-bild::before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(135deg,transparent 0 13px,rgba(31,78,102,.05) 13px 14px);transition:transform .55s var(--ease)}
.karte:hover .karte-bild::before{transform:scale(1.09)}
.karte-bild .ph-tag{position:absolute;top:12px;left:12px;z-index:2}
.karte-no{position:absolute;bottom:10px;left:12px;z-index:1;font-family:var(--font-mono);font-size:.66rem;color:var(--ink-3)}
.karte-fotos{position:relative;z-index:1;font-family:var(--font-mono);font-size:.74rem;color:var(--ink-3)}
.karte-status{position:absolute;top:12px;right:12px;z-index:3}
.karte-koerper{padding:20px 22px 22px;display:flex;flex-direction:column;gap:9px;flex:1}
.objektnr{font-family:var(--font-mono);font-size:.68rem;color:var(--ink-3)}
.karte-tag{font-size:.82rem;color:var(--ink-3)}
.karte-koerper h3{font-size:1.18rem;line-height:1.15}
.karte-koerper h3 a{text-decoration:none;color:inherit}
.karte-koerper h3 a:hover{color:var(--accent-ink)}
.karte-daten{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;margin-top:2px}
.karte-daten>div{background:var(--paper-2);padding:9px 11px}
.karte-daten .k{display:block;font-family:var(--font-mono);font-size:.58rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.karte-daten .w{display:block;font-size:.9rem;font-weight:500;margin-top:2px}
.karte-chips{display:flex;flex-wrap:wrap;gap:8px}
.karte-fuss{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px}
.karte-fuss .preis{font-family:var(--font-head);font-weight:500;font-size:1.16rem}
.karte-fuss .preis small{display:block;font-family:var(--font-mono);font-size:.6rem;font-weight:400;color:var(--ink-3);letter-spacing:.03em}
.preis-hinweis{margin-top:8px;font-size:.78rem;color:var(--warn)}
/* Listen-Ansicht */
.karten-raster.liste .karte{flex-direction:row;align-items:stretch}
.karten-raster.liste .karte-bild{aspect-ratio:auto;width:min(38%,260px);border-bottom:0;border-right:1px solid var(--line)}
.karten-raster.liste .karte-koerper{flex:1}

/* ============================================================ OBJEKTAKTE (Detail) */
.akte-kopf{padding:clamp(20px,3vw,34px) 0 0}
.akte-kopf .pfad{font-family:var(--font-mono);font-size:.76rem;color:var(--ink-3);margin-bottom:12px}
.akte-kopf .pfad a{color:var(--accent-ink);text-decoration:none}
.akte-kopf h1{font-size:clamp(1.9rem,1.3rem+2vw,3rem)}
.akte-kopfzeile{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-top:16px;font-size:.9rem;color:var(--ink-2)}
.akte-kopfzeile .mono{font-size:.82rem;color:var(--ink-3)}
.akte-kopfzeile strong{color:var(--ink)}
.zustand-marke{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.03em;padding:4px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent-ink);border:1px solid color-mix(in srgb,var(--accent) 26%,transparent)}
.zustand-marke.signal{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}
.akte-layout{display:grid;grid-template-columns:1fr 340px;gap:clamp(28px,3.5vw,52px);align-items:start;padding-top:clamp(24px,3vw,40px);padding-bottom:clamp(40px,5vw,72px)}
.akte-haupt{min-width:0;display:flex;flex-direction:column;gap:clamp(30px,4vw,50px)}
.akte-haupt>section{scroll-margin-top:calc(var(--demo-h) + var(--head-h) + 16px)}
.akte-haupt h2{font-size:1.4rem;display:flex;align-items:baseline;gap:.6em;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:18px}
.blocknr{font-family:var(--font-mono);font-size:.8rem;font-weight:500;color:var(--accent)}
.akte-haupt section>p{color:var(--ink-2)}
/* Protokoll (dl) — überall wiederverwendet */
.protokoll{display:grid;gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--paper-2)}
.protokoll>div{display:grid;grid-template-columns:minmax(140px,.5fr) 1fr;gap:16px;padding:12px 16px;border-bottom:1px solid var(--line)}
.protokoll>div:last-child{border-bottom:0}
.protokoll dt{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);margin:0}
.protokoll dd{margin:0;color:var(--ink);font-size:.96rem}
.protokoll dd.zahl,.protokoll dd .zahl{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.protokoll dd.klein{color:var(--ink-2)}
.maengel-liste{list-style:none;counter-reset:mangel;border:1px solid var(--warn-line);border-radius:var(--r);overflow:hidden;background:var(--warn-bg)}
.maengel-liste li{counter-increment:mangel;position:relative;padding:12px 16px 12px 48px;border-bottom:1px solid var(--warn-line);color:var(--ink)}
.maengel-liste li:last-child{border-bottom:0}
.maengel-liste li::before{content:counter(mangel);position:absolute;left:14px;top:12px;width:22px;height:22px;border-radius:50%;background:var(--warn);color:#FFFFFF;font-family:var(--font-mono);font-size:.72rem;display:grid;place-items:center}
.keine-maengel{background:var(--ok-bg);border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);border-radius:var(--r);padding:14px 18px;color:var(--accent-ink)}
.papiere-status{font-family:var(--font-mono);font-size:.78rem;color:var(--accent-ink)}
.papiere-status.fehlt{color:var(--danger)}
.papiere-status.klaerung{color:var(--warn)}
/* Galerie-Platzhalter */
.galerie-platzhalter,.akte-galerie{margin:0}
.galerie-haupt .ph{aspect-ratio:16/10;min-height:0;background:var(--panel)}
.galerie-haupt .ph .ph-label{color:rgba(255,255,255,.72)}
.galerie-haupt .ph::before{background-image:repeating-linear-gradient(135deg,transparent 0 13px,rgba(255,255,255,.06) 13px 14px)}
.galerie-haupt .ph-no{color:rgba(255,255,255,.5)}
.galerie-thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.galerie-thumb{font:inherit;font-size:.82rem;padding:.5em 1em;border:1px solid var(--line-2);border-radius:999px;background:var(--paper);color:var(--ink-2);cursor:pointer}
.galerie-thumb[aria-pressed="true"]{background:var(--accent);color:#FFFFFF;border-color:var(--accent)}
.galerie-platzhalter figcaption{margin-top:12px;font-size:.82rem;color:var(--ink-3)}
/* Preisblock (sticky) */
.akte-preis{position:sticky;top:calc(var(--demo-h) + var(--head-h) + 20px);background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;box-shadow:var(--sh-2)}
.akte-preis .etikett-titel{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);display:flex;align-items:baseline;gap:.5em;margin-bottom:12px}
.akte-preis .brutto{font-family:var(--font-head);font-weight:500;font-size:2rem;letter-spacing:-.02em;line-height:1.05}
.akte-preis .brutto small{font-size:.5em;font-weight:500;color:var(--ink-3);margin-left:.3em}
.akte-preis .netto{font-size:.86rem;color:var(--ink-3);margin-top:4px}
.akte-preis .festpreis{display:flex;align-items:center;gap:.5em;margin-top:14px;font-size:.9rem;color:var(--accent-ink);font-weight:500}
.akte-preis .freigabe-hinweis{margin-top:14px;padding:12px 14px;border-radius:var(--r-sm);background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--ink);font-size:.86rem}
.akte-preis .btn{width:100%;justify-content:center;margin-top:18px}
.akte-preis .neben{margin-top:14px;font-size:.8rem;color:var(--ink-3)}
.akte-preis-aktionen{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.akte-preis-aktionen .btn-sekundaer{flex:1}
/* Mobile Preisbar */
.mobil-preisbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--paper-2);border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(20,11,0,.1);padding:12px var(--gutter);align-items:center;justify-content:space-between;gap:14px}
.mobil-preisbar .mp-preis{font-family:var(--font-head);font-weight:500;font-size:1.2rem}
.mobil-preisbar .mp-klein{display:block;font-family:var(--font-mono);font-size:.66rem;color:var(--ink-3)}
.aehnliche h2{font-size:clamp(1.5rem,1.1rem+1.4vw,2.2rem)}

/* ============================================================ HINWEIS-KASTEN / TEXTSEITEN */
.hinweis-kasten{background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 18%,transparent);border-left:3px solid var(--accent);border-radius:var(--r);padding:18px 20px}
.hinweis-kasten.klaerung{background:var(--warn-bg);border-color:var(--warn-line);border-left-color:var(--warn)}
.hinweis-kasten h3,.hinweis-kasten .h-klein{font-size:1.05rem;margin-bottom:8px}
.hinweis-kasten p{color:var(--ink-2)}
.zwei-spalten{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:start}
.zwei-spalten h2{margin-bottom:10px}
.zwei-spalten h3{margin:0 0 8px}
.zwei-spalten p+p{margin-top:12px}
.textseite{max-width:820px;padding-top:clamp(24px,4vw,40px);padding-bottom:clamp(40px,5vw,72px)}
.textseite h1{margin-bottom:8px}
.textseite h2{font-size:1.3rem;margin:clamp(26px,3vw,40px) 0 10px}
.textseite p{color:var(--ink-2);margin-top:10px}
.textseite .protokoll{margin-top:14px}
.liste-schlicht{list-style:none;display:flex;flex-direction:column;gap:12px;margin-top:6px}
.liste-schlicht li{position:relative;padding-left:24px;color:var(--ink-2)}
.liste-schlicht li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;border-radius:50%;background:var(--accent)}
.liste-schlicht strong{color:var(--ink)}
.anker-nav{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.anker-nav a{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.03em;padding:.5em 1em;border-radius:999px;border:1px solid var(--line-2);background:var(--paper-2);color:var(--ink-2);text-decoration:none;transition:border-color .2s,color .2s}
.anker-nav a:hover{border-color:var(--accent);color:var(--accent-ink)}

/* ============================================================ FORMULARE */
.formular{display:flex;flex-direction:column;gap:16px;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(22px,3vw,32px);box-shadow:var(--sh-1)}
.feld{display:flex;flex-direction:column;gap:6px;border:0;padding:0;margin:0;min-width:0}
.feld>label,.feld legend{font-family:var(--font-head);font-weight:500;font-size:.92rem}
.feld input,.feld select,.feld textarea{font:inherit;font-size:.98rem;padding:.7em .9em;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--paper);color:var(--ink);width:100%}
.feld textarea{min-height:120px;resize:vertical}
.feld input:focus,.feld select:focus,.feld textarea:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px rgba(31,78,102,.14)}
.feld-zeile{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.weiche{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.weiche input[type=radio]{position:absolute;opacity:0;width:1px;height:1px}
.weiche label{font-family:var(--font-head);font-weight:500;font-size:.9rem;padding:.55em 1em;border:1px solid var(--line-2);border-radius:999px;background:var(--paper);color:var(--ink-2);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.weiche input[type=radio]:checked+label{background:var(--accent);color:#FFFFFF;border-color:var(--accent)}
.weiche input[type=radio]:focus-visible+label{outline:var(--fokus);outline-offset:2px}
.hilfe{font-size:.8rem;color:var(--ink-3)}
.datenschutz-hinweis{margin-top:2px}
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-meldung{margin-top:14px;padding:12px 16px;border-radius:var(--r-sm);background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);color:var(--accent-ink);font-size:.94rem}
.form-meldung.fehler{background:var(--danger-bg);border-color:var(--danger-line);color:var(--danger)}

/* Bestaetigung nach dem Absenden.
   Das Formular tritt ab (> * wird ausgeblendet), die Karte nimmt seinen Platz
   ein. Dadurch steht die Antwort dort, wo eben noch die Felder waren, und nicht
   als schmale Zeile am unteren Rand. */
form.ist-gesendet > *{display:none}
form.ist-gesendet > .form-erfolg{
  display:flex; gap:16px; align-items:flex-start;
  padding:22px 24px; background:var(--accent-soft);
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
  border-left:4px solid var(--accent);
}
form.ist-gesendet > .form-erfolg:focus{outline:none}
form.ist-gesendet > .form-erfolg:focus-visible{outline:var(--fokus); outline-offset:3px}
/* Die Karte fährt kurz auf: Wer gerade abgeschickt hat, soll sehen, dass sich
   etwas TUT, nicht nur, dass plötzlich etwas anderes dasteht. */
form.ist-gesendet > .form-erfolg{ animation:feAuf .34s var(--ease) both }
@keyframes feAuf{
  from{ opacity:0; transform:translateY(8px) }
  to{ opacity:1; transform:none }
}
.fe-haken{
  flex:0 0 auto; width:34px; height:34px; display:grid; place-items:center;
  background:var(--accent); color:var(--papier);
  font-size:1.15rem; line-height:1; font-weight:600;
}
.fe-haken svg{ width:22px; height:22px; display:block; overflow:visible }
.fe-kreis,.fe-strich{
  fill:none; stroke:var(--paper); stroke-width:3;
  stroke-linecap:round; stroke-linejoin:round;
}
/* Umfang 2·π·14 ≈ 88, Strichlänge ≈ 20 — beide werden von 0 an gezeichnet. */
.fe-kreis{ stroke-width:2; opacity:.55; stroke-dasharray:88; stroke-dashoffset:88;
  animation:feKreis .5s var(--ease) .06s forwards }
.fe-strich{ stroke-dasharray:22; stroke-dashoffset:22;
  animation:feStrich .32s var(--ease) .38s forwards }
@keyframes feKreis{ to{ stroke-dashoffset:0 } }
@keyframes feStrich{ to{ stroke-dashoffset:0 } }

/* Der Absendeknopf zeigt während des Sendens einen laufenden Ring. */
.btn.sendet{ position:relative; padding-left:2.6em; cursor:progress }
.btn.sendet::after{
  content:""; position:absolute; left:1.1em; top:50%; width:1em; height:1em;
  margin-top:-.5em; border-radius:50%;
  border:2px solid currentColor; border-top-color:transparent;
  animation:feDreh .7s linear infinite;
}
@keyframes feDreh{ to{ transform:rotate(360deg) } }

/* Reduzierte Bewegung: Das Ergebnis bleibt, die Bewegung fällt weg. */
@media (prefers-reduced-motion: reduce){
  form.ist-gesendet > .form-erfolg{ animation:none }
  .fe-kreis,.fe-strich{ stroke-dashoffset:0; animation:none }
  .btn.sendet::after{ animation:none }
}
.fe-text{min-width:0}
.fe-titel{
  margin:0; font-family:var(--font-head); font-weight:600;
  font-size:1.12rem; line-height:1.25; letter-spacing:-.01em; color:var(--ink);
}
.fe-zeile{margin:6px 0 0; color:var(--ink-2); font-size:.96rem; line-height:1.5}
.fe-ruf{margin:10px 0 0; color:var(--ink-2); font-size:.96rem; line-height:1.5}
.fe-ruf a{color:var(--accent-ink); font-weight:600}
.fe-nr{margin:12px 0 0; color:var(--ink-3); font-size:.84rem}
.fe-nr .mono{color:var(--ink-2)}
@media (min-width:560px){
  form.ist-gesendet > .form-erfolg{padding:26px 28px}
}

/* ============================================================ FAQ */
.faq-liste{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.faq-item{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1);overflow:hidden}
.faq-item summary{list-style:none;cursor:pointer;padding:18px 20px;font-family:var(--font-head);font-weight:500;font-size:1.06rem;display:flex;align-items:center;justify-content:space-between;gap:14px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-family:var(--font-mono);font-size:1.3rem;color:var(--accent);transition:transform .3s var(--ease);flex:none}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-body{padding:0 20px 20px}
.faq-body p{color:var(--ink-2)}
h1 em,h2 em{font-style:normal;color:var(--accent)}

/* ============================================================ VORGANG-TIMELINE (Status) */
.timeline{list-style:none;position:relative;margin-top:22px;padding-left:34px}
.timeline::before{content:"";position:absolute;left:11px;top:6px;bottom:6px;width:2px;background:var(--line-2)}
.timeline>li{position:relative;padding:0 0 26px}
.timeline>li:last-child{padding-bottom:0}
.timeline>li::before{content:"";position:absolute;left:-28px;top:2px;width:20px;height:20px;border-radius:50%;background:var(--paper-2);border:2px solid var(--line-2)}
.timeline>li.erreicht::before{border-color:var(--accent);background:var(--accent-soft)}
.timeline>li.aktuell::before{border-color:var(--accent);background:var(--accent);box-shadow:0 0 0 4px rgba(31,78,102,.18)}
.timeline .t-label{font-family:var(--font-head);font-weight:500}
.timeline>li.erreicht .t-label,.timeline>li.aktuell .t-label{color:var(--accent-ink)}
.timeline .t-datum{font-family:var(--font-mono);font-size:.74rem;color:var(--ink-3);margin-left:.5em}
.timeline .t-text{color:var(--ink-2);font-size:.92rem;margin-top:4px}

/* ============================================================ REVEAL / ANIMATION */
@media (prefers-reduced-motion:no-preference){
  html.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .8s var(--ease)}
  html.js .reveal.in{opacity:1;transform:none}
  html.js .stagger>*{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .75s var(--ease)}
  html.js .stagger.in>*{opacity:1;transform:none}
  html.js .stagger.in>*:nth-child(2){transition-delay:.08s}
  html.js .stagger.in>*:nth-child(3){transition-delay:.16s}
  html.js .stagger.in>*:nth-child(4){transition-delay:.24s}
  html.js .stagger.in>*:nth-child(5){transition-delay:.32s}
  html.js .stagger.in>*:nth-child(6){transition-delay:.40s}

  /* Hero-Ladeanimation (reine CSS-Keyframes → laufen auch ohne JS, enden sichtbar) */
  .hload{opacity:0;transform:translateY(24px);animation:hIn .9s var(--ease) forwards}
  .hload.d1{animation-delay:.08s}
  .hload.d2{animation-delay:.20s}
  .hload.d3{animation-delay:.34s}
  .hload.d4{animation-delay:.48s}

  /* Kinetischer Hero — Headline Wort für Wort */
  .hero-h1 .w{display:inline-block;opacity:0;transform:translateY(30px) rotate(2.5deg);animation:wordIn .85s var(--ease) both}
  .hero-h1 .w:nth-child(1){animation-delay:.10s}
  .hero-h1 .w:nth-child(2){animation-delay:.19s}
  .hero-h1 .w:nth-child(3){animation-delay:.28s}
  .hero-h1 .w:nth-child(4){animation-delay:.37s}
  .hero-h1 .w:nth-child(5){animation-delay:.46s}
  .hero-h1 .w:nth-child(6){animation-delay:.55s}
  .hero-h1 .w:nth-child(7){animation-delay:.64s}

  /* Musterakte setzt sich zusammen */
  html.js .akte-karte{opacity:0;transform:translateY(24px) scale(.97);animation:assemble .9s var(--ease) .30s both}
  html.js .akte-karte>*{opacity:0;transform:translateY(12px);animation:assemble .6s var(--ease) both}
  html.js .akte-karte>*:nth-child(1){animation-delay:.55s}
  html.js .akte-karte>*:nth-child(2){animation-delay:.66s}
  html.js .akte-karte>*:nth-child(3){animation-delay:.77s}
  html.js .akte-karte>*:nth-child(4){animation-delay:.88s}

  /* Firmen-Zeitleiste wächst */
  html.js .story-timeline::before{transform:scaleY(0);transform-origin:top}
  html.js .story-timeline.in::before{animation:growLine 1.15s var(--ease) forwards}
  html.js .story-timeline .tl-dot{opacity:0;transform:scale(0)}
  html.js .story-timeline.in .tl-dot{animation:popDot .55s var(--ease) forwards}
  html.js .story-timeline.in .tl-item:nth-child(1) .tl-dot{animation-delay:.15s}
  html.js .story-timeline.in .tl-item:nth-child(2) .tl-dot{animation-delay:.33s}
  html.js .story-timeline.in .tl-item:nth-child(3) .tl-dot{animation-delay:.51s}
  html.js .story-timeline.in .tl-item:nth-child(4) .tl-dot{animation-delay:.69s}

  /* Wartburg-Silhouette zeichnet sich beim Scrollen */
  html.js .wartburg path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s var(--ease)}
  html.js .wartburg.in .ridge{stroke-dashoffset:0}
  html.js .wartburg.in .castle{stroke-dashoffset:0;transition-delay:.35s}
  html.js .wartburg.in .flag{stroke-dashoffset:0;transition-delay:1.5s}

  /* Karten-Landepuls Standort-Pin */
  html.js .mapcard.in .mappin::before{animation:ping 2.6s ease-out infinite}

  /* Katalog: Karten fahren gestaffelt ein, wenn ihre Warengruppe in den Blick kommt */
  html.js .wg-raster.stagger>*:nth-child(7){transition-delay:.36s}
  html.js .wg-raster.stagger>*:nth-child(8){transition-delay:.40s}
  html.js .wg-raster.stagger>*:nth-child(9){transition-delay:.44s}

  /* Katalog: weicher Übergang der sichtbaren Karten beim Filtern (Fade+Rise) */
  html.js .katalog-uebergang .karte:not([hidden]){animation:karteRein .42s var(--ease) both}

  /* Floats: einfliegen + sanftes Schweben (nur Desktop) */
  @media (min-width:1081px){
    html.js .float-tag{opacity:0;animation:fadein .6s ease .50s both}
    html.js .float-1{opacity:0;animation:fadein .6s ease 1.00s both, bob 6s ease-in-out 1.6s infinite}
    html.js .float-2{opacity:0;animation:fadein .6s ease 1.15s both, bob 6s ease-in-out 1.95s infinite}
  }
}
@keyframes hIn{to{opacity:1;transform:none}}
@keyframes wordIn{from{opacity:0;transform:translateY(30px) rotate(2.5deg)}to{opacity:1;transform:none}}
@keyframes assemble{to{opacity:1;transform:none}}
@keyframes fadein{to{opacity:1}}
@keyframes growLine{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes popDot{0%{opacity:0;transform:scale(0)}60%{opacity:1;transform:scale(1.18)}100%{opacity:1;transform:scale(1)}}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(31,78,102,.4)}70%{box-shadow:0 0 0 22px rgba(31,78,102,0)}100%{box-shadow:0 0 0 0 rgba(31,78,102,0)}}
@keyframes karteRein{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ============================================================ RESPONSIVE */
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .hero-visual{min-height:0;max-width:440px;margin:0 auto}
  .stats{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .foot-top{grid-template-columns:1fr 1fr}
  .check{grid-template-columns:1fr}
  .check-aside{position:static}
  .story-grid{grid-template-columns:1fr;gap:38px}
  .region-grid{grid-template-columns:1fr;gap:40px}
  .akte-layout{grid-template-columns:1fr}
  .akte-preis{position:static;top:auto}
  .contact{grid-template-columns:1fr}
}
@media (max-width:900px){
  .mobil-preisbar{display:flex}
  .akte-preis .btn{display:none}
}
@media (max-width:820px){
  /* Nav: kompakter Menü-Knopf (JS) + Aufklappliste. Ohne JS bleibt die Liste
     einfach ausgeklappt unter der Leiste — No-JS bedienbar, kein Overlay. */
  /* Utility-Zeile + Header-Suche entfallen mobil (kein H-Overflow); Telefon kommt
     zurück ins Aufklapp-Menü, die Suche steht auf der Katalogseite bereit. */
  .util{display:none}
  .nav-suche{display:none}
  .shell{padding-top:calc(var(--demo-h) + var(--head-h))}
  .nav{gap:12px}
  .nav-actions .nav-tel{display:flex}
  html.js .nav-burger{display:inline-flex;margin-left:auto}
  .nav-panel{display:flex;flex-direction:column;gap:4px;
    position:absolute;top:calc(var(--head-h) - 2px);left:0;right:0;
    background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    box-shadow:var(--sh-2);padding:14px var(--gutter) 18px;z-index:130}
  html.js .nav-panel{display:none}
  html.js .nav-panel.offen{display:flex}
  .nav-links{flex-direction:column;align-items:stretch;gap:2px;border-left:0;padding-left:0}
  .nav-links a{padding:14px 12px;border-radius:var(--r-sm);font-size:1.02rem}
  .nav-links a::after{display:none}
  .nav-links a:hover,.nav-links a:focus-visible,
  .nav-links a[aria-current="page"]{background:var(--accent-soft);color:var(--accent-ink)}
  .nav-actions{margin-left:0;margin-top:10px;padding-top:14px;border-top:1px solid var(--line);
    flex-wrap:wrap;gap:14px;align-items:center}
  .nav-tel{flex-direction:row;align-items:baseline;gap:.5em}
  .nav-actions .btn-cta{padding:.85em 1.4em}
  .cards3,.news,.karten-raster,.wg-raster{grid-template-columns:1fr}
  .about{grid-template-columns:1fr}
  .closer{grid-template-columns:1fr}
  .zwei-spalten{grid-template-columns:1fr}
  /* Ablauf-Rail wird vertikal (durchgehende Linie links) */
  .ablauf-rail{grid-template-columns:1fr;gap:0;padding-left:34px}
  .ablauf-phase{padding-top:0;padding-bottom:26px}
  .ablauf-phase:last-child{padding-bottom:0}
  .ablauf-phase::before{top:6px;bottom:-6px;left:-27px;right:auto;width:2px;height:auto;
    background:linear-gradient(var(--accent),var(--line-2))}
  .ablauf-phase:last-child::before{display:none}
  .ablauf-punkt{top:4px;left:-34px}
  .trust .wrap{justify-content:flex-start}
  .trust .sep{display:none}
  .karten-raster.liste .karte,.katalog-gruppen.liste .karte{flex-direction:column}
  .karten-raster.liste .karte-bild,.katalog-gruppen.liste .karte-bild{width:100%;border-right:0;border-bottom:1px solid var(--line);aspect-ratio:16/9}
  .katalog-tools{align-items:stretch}
  .sort-sel{width:100%;min-width:0}
}
@media (max-width:560px){
  body{font-size:16px}
  .stats,.steps{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr}
  .feld-zeile{grid-template-columns:1fr}
  .float-1,.float-2{position:relative;top:auto;left:auto;bottom:auto;margin:12px auto 0;max-width:280px}
  .float-tag{position:static;display:inline-flex;margin-bottom:12px}
  .hero-visual{max-width:100%}
  .akte-karte{margin:0 auto}
  .protokoll>div{grid-template-columns:1fr;gap:4px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;scroll-behavior:auto !important}
  .atmos{display:none}
  html.js .reveal,html.js .stagger>*{opacity:1 !important;transform:none !important}
  .hload,.hero-h1 .w{opacity:1 !important;transform:none !important}
}

/* ============================================================ QUARTALS-KATALOG-KOPF (STUFE 3) */
.katalog-quartal{display:inline-flex;align-items:center;gap:.6em;margin-top:14px;
  font-family:var(--font-mono);font-size:.92rem;letter-spacing:.03em;color:var(--accent-ink);
  background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 26%,transparent);
  border-radius:999px;padding:7px 16px}
.katalog-quartal strong{font-weight:500;color:var(--accent-2)}
.katalog-quartal .kq-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none;
  box-shadow:0 0 0 3px rgba(31,78,102,.18)}
.katalog-quartal .kq-note{font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3)}

/* ============================================================ NEU-BADGE + NEU-FILTER (Feature 5) */
.chip-neu{background:var(--accent);color:#FFFFFF;border-color:var(--accent);font-weight:500}
.fchip-neu[aria-pressed="true"]{background:var(--accent);color:#FFFFFF;border-color:var(--accent);box-shadow:var(--sh-accent)}

/* ============================================================ OBJEKT-ALARM (Feature 3) */
.alarm-band{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,44px);align-items:center;
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(24px,3vw,40px);box-shadow:var(--sh-1)}
.alarm-band h2{margin-top:8px}
.alarm-band .alarm-text p{margin-top:12px}
.alarm-form{box-shadow:none;border:0;padding:0;background:none;gap:12px}

/* ============================================================ AKTE-FORMULARE / FORM-TITEL */
.akte-form{gap:12px}
.form-titel{font-family:var(--font-head);font-size:1.05rem;margin-bottom:2px}
/* Der Transport-Richtwert ist entfallen: Die Lieferung ist im Preis enthalten,
   ein Rechner dafuer nannte einen Preis fuer etwas, das nichts kostet. */

/* ============================================================ STELLENANZEIGEN */
.stellen{list-style:none;margin:0;padding:0;display:grid;gap:26px}
.stelle{border:1px solid var(--line);border-top:3px solid var(--accent);background:var(--paper);padding:26px 28px}
.stelle-kopf{display:flex;gap:18px;align-items:flex-start}
.stelle-nr{font-family:var(--font-mono);font-size:1.5rem;line-height:1;color:var(--ink-geist);flex:none;padding-top:2px}
.stelle-kopf h2{margin:0;font-size:clamp(1.2rem,1rem+.7vw,1.5rem);line-height:1.2;letter-spacing:-.01em}
.stelle-meta{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}
.stelle-meta .chip{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.04em;
  padding:4px 9px;border:1px solid var(--line-2);color:var(--ink-2);background:var(--sand)}
.stelle-koerper{display:grid;gap:24px;margin-top:22px}
.stelle-koerper h3{font-size:.78rem;font-family:var(--font-mono);font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 10px}
.stelle-koerper .liste-schlicht{margin:0}
.stelle-tat{margin:24px 0 0}
@media (min-width:760px){
  .stelle-koerper{grid-template-columns:1fr 1fr;gap:34px}
}

/* ============================================================ LIGHTBOX (Gerüst, Feature 7) */
.lightbox{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
  background:rgba(12,24,20,.86);padding:24px}
.lightbox[hidden]{display:none}
.lightbox-bild{max-width:min(1100px,92vw);max-height:88vh;width:auto;height:auto;border-radius:var(--r);box-shadow:var(--sh-3)}
.lightbox-zu{position:absolute;top:18px;right:22px;width:44px;height:44px;border-radius:50%;border:0;
  background:rgba(255,255,255,.14);color:#FFFFFF;font-size:1.6rem;line-height:1;cursor:pointer}
.lightbox-zu:hover{background:#FFFFFF;color:var(--accent-2)}

/* Responsive für die neuen Komponenten */
@media (max-width:900px){
}
@media (max-width:820px){
  .alarm-band{grid-template-columns:1fr}
}
@media (max-width:560px){
}

/* ---- Bildmarke „Gekerbte Platte" -------------------------------------------
   Eine Datei (_marke.html), drei Einsatzorte. Farbe kommt immer über
   currentColor vom Elternelement, damit die Marke im hellen Kopf, im dunklen
   Fuß und im Druck ohne eigene Fassung auskommt. */
.brand-sig{color:var(--accent)}
.brand:hover .brand-sig{color:var(--ink)}

.wm-zeile{display:flex;align-items:center;gap:.85rem}
.foot-sig{flex:none;display:flex;color:#FFFFFF;opacity:.92}
.foot-sig .marke{width:2.6rem;height:2.6rem;display:block}

/* ---- Verkaufte Objekte bleiben stehen ---------------------------------------
   Sie zu verstecken wäre bequemer, aber ein Bestand, in dem nie etwas weggeht,
   wirkt ausgedacht. Sichtbar bleiben, zurückgenommen wirken, Preis durchstreichen. */
.karte-verkauft{opacity:.72}
.karte-verkauft:hover{opacity:.9}
/* Nur die Preiszahl durchstreichen. text-decoration vererbt sich und lässt sich
   im Kind NICHT zurücknehmen — deshalb bekommt die Kleinzeile ein eigenes
   Textfluss-Element statt eines Aufhebungsversuchs. */
.karte-verkauft .preis{color:var(--ink-3)}
.karte-verkauft .preis>span.betrag{text-decoration:line-through;
  text-decoration-thickness:2px;text-decoration-color:var(--ink-3)}
.karte-verkauft .preis small{display:block;text-decoration:none}
.karte-verkauft .karte-bild{filter:grayscale(1)}

/* Stand-Zeile: wann der Bestand zuletzt durchgesehen wurde. Gepflegte Seiten
   zeigen das, erzeugte nie. */
.bestand-stand{display:flex;align-items:center;gap:.45rem;font-family:var(--font-mono);
  font-size:.72rem;letter-spacing:.04em;color:var(--ink-3);margin-top:.9rem}
.bestand-stand b{font-weight:500;color:var(--ink-2)}
.bestand-stand::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--accent);flex:none}

/* ---- Hero-Bestand statt Schein-Karte ----------------------------------------
   Ersetzt die frühere schwebende „Musterakte" mit Floating-Badges. Die zeigte
   erfundene Daten und war das deutlichste Landingpage-Motiv der Seite. Hier
   stehen echte Positionen aus dem Register — Nummer, Maschine, Eckdaten, Preis. */
.hero-bestand{background:var(--paper-2);border:1px solid var(--line);
  box-shadow:0 1px 0 rgba(38,42,38,.04);padding:1.15rem 1.25rem 1rem}
.hb-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding-bottom:.7rem;border-bottom:1px solid var(--line)}
.hb-titel{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3)}
.hb-alle{font-size:.78rem;color:var(--accent);white-space:nowrap}
.hb-alle:hover{text-decoration:underline;text-underline-offset:3px}

.hb-liste{list-style:none;margin:0;padding:0}
.hb-liste li+li{border-top:1px solid var(--line)}
.hb-liste a{text-decoration:none;display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:
  "nr name preis" "nr daten preis";gap:0 .7rem;padding:.7rem 0;align-items:center}
.hb-liste a:hover{background:var(--accent-soft)}
.hb-liste a:hover .hb-name{color:var(--accent)}
.hb-nr{grid-area:nr;font-family:var(--font-mono);font-size:.68rem;color:var(--ink-3);
  border:1px solid var(--line);padding:.16rem .34rem;align-self:center}
.hb-name{grid-area:name;font-weight:500;font-size:.94rem;line-height:1.25}
.hb-daten{grid-area:daten;font-family:var(--font-mono);font-size:.7rem;color:var(--ink-3);margin-top:2px}
.hb-preis{grid-area:preis;font-family:var(--font-mono);font-weight:500;font-size:.88rem;
  white-space:nowrap;align-self:center}

@media (max-width:900px){
  .hb-liste a{grid-template-columns:auto 1fr;grid-template-areas:"nr name" "nr daten" ". preis"}
  .hb-preis{margin-top:.3rem}
}
.verkauft-am{font-family:var(--font-mono);font-size:.72rem;color:var(--ink-3);
  margin:.35rem 0 0;letter-spacing:.03em}

/* ---- Einlaufende Bestandszeilen + Druck-Rückmeldung -------------------------
   Die Kästen sollen sich beim Öffnen einer nach dem anderen setzen, nicht alle
   gleichzeitig. Nur transform/opacity — bleibt auf dem Compositor, ruckelt nicht. */
@media (prefers-reduced-motion: no-preference){
  html.js .hb-liste li{opacity:0;transform:translateY(14px);
    animation:hIn .62s var(--ease) forwards}
  html.js .hb-liste li:nth-child(1){animation-delay:.46s}
  html.js .hb-liste li:nth-child(2){animation-delay:.56s}
  html.js .hb-liste li:nth-child(3){animation-delay:.66s}
  html.js .hero-bestand .bestand-stand{opacity:0;animation:fadein .5s ease .82s forwards}

  /* Beim Eintreffen kurz „andocken": winziger Überschwung, dann fest.
     Das ist der Unterschied zwischen „eingeblendet" und „gelandet". */
  html.js .stagger.in>*{animation:andocken .5s var(--ease) both}
  html.js .stagger.in>*:nth-child(2){animation-delay:.08s}
  html.js .stagger.in>*:nth-child(3){animation-delay:.16s}
  html.js .stagger.in>*:nth-child(4){animation-delay:.24s}
  html.js .stagger.in>*:nth-child(5){animation-delay:.32s}
}
@keyframes andocken{
  0%{opacity:0;transform:translateY(22px) scale(.985)}
  70%{opacity:1;transform:translateY(-3px) scale(1.004)}
  100%{opacity:1;transform:none}
}

/* Druck-Rückmeldung: die Karte gibt unter dem Finger nach und federt zurück.
   Ohne das fühlt sich ein Klick auf einer Kachel „tot" an. */
.karte{transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .2s}
.karte:active{transform:translateY(-2px) scale(.988);transition-duration:.09s}
.karte:focus-within{border-color:var(--accent);box-shadow:var(--sh-2)}
.hb-liste a{transition:background .18s ease,transform .12s var(--ease)}
.hb-liste a:active{transform:scale(.99)}

/* Karte fällt aus dem Filter: kurz zurücktreten, dann erst aus dem Fluss nehmen.
   Nur transform/opacity, damit es auf dem Compositor bleibt. */
@media (prefers-reduced-motion: no-preference){
  html.js .karte.karte-geht{animation:karteRaus .15s var(--ease) both;pointer-events:none}
}
@keyframes karteRaus{
  from{opacity:1;transform:none}
  to{opacity:0;transform:translateY(-6px) scale(.97)}
}

/* Kategorie-Aufschlüsselung je Warengruppe. Leere Kategorien bleiben sichtbar —
   ein Bestand ohne Lücken wirkt zusammengestellt, nicht gewachsen. */
.wg-aufteilung{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem .5rem;
  margin:.1rem 0 1.3rem;padding:0}
.wg-aufteilung li{display:inline-flex;align-items:baseline;gap:.4rem;
  font-size:.78rem;color:var(--ink-2);border:1px solid var(--line);
  padding:.24rem .55rem;background:var(--paper-2)}
.wg-aufteilung li .mono{font-family:var(--font-mono);font-size:.74rem;color:var(--ink-3)}
.wg-aufteilung li.leer{color:var(--ink-3);border-style:dashed;background:transparent}

/* ============================================================ APPLE-DURCHGANG
   Nach dem apple-design-Leitfaden ergänzt. Drei Punkte, die gefehlt haben. */

/* §1 REAKTION — Rückmeldung beim Drücken, nicht erst beim Loslassen.
   Diese vier Elementtypen fühlten sich beim Antippen tot an. */
.wcard{transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.wcard:active{transform:translateY(-2px) scale(.988);transition-duration:.09s}
.fchip{transition:transform .16s var(--ease),background .18s ease,border-color .18s ease}
.fchip:active{transform:scale(.96);transition-duration:.08s}
.btn-link{transition:transform .14s var(--ease),color .18s ease}
.btn-link:active{transform:translateX(2px) scale(.98);transition-duration:.08s}
.nav-links a{transition:color .18s ease,transform .14s var(--ease)}
.nav-links a:active{transform:scale(.97);transition-duration:.08s}

/* §12 SCROLL-KANTE statt harter Trennlinie. Eine 1px-Linie unter schwebender
   Leiste liest sich wie eine Naht; ein kurzer Verlauf liest sich wie Material,
   unter dem Inhalt durchläuft. */
.header.scrolled{border-bottom-color:transparent}
.header::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px;
  pointer-events:none;opacity:0;transition:opacity .3s ease;
  background:linear-gradient(to bottom,color-mix(in srgb,var(--ink) 8%,transparent),transparent)}
.header.scrolled::after{opacity:1}

/* §14 Die beiden Schalter, die neben prefers-reduced-motion noch fehlten. */
@media (prefers-reduced-transparency: reduce){
  .header{background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none}
  .header.scrolled{background:var(--paper);border-bottom:1px solid var(--line)}
  .header::after{display:none}
}
@media (prefers-contrast: more){
  .header{background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none;
    border-bottom:2px solid var(--ink)}
  .btn,.fchip,.karte,.wcard{border-color:var(--ink)}
  .hb-liste li+li{border-top-color:var(--ink-2)}
}

/* ---- Suchauftrag (Bestand prüfen -> vormerken) ------------------------------ */
.suchauftrag{padding:0 0 clamp(2rem,1rem+3vw,3.4rem)}
.sa-karte{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.4rem,1rem+1.6vw,2.2rem);box-shadow:var(--sh-1)}
.sa-kopf h2{font-size:clamp(1.3rem,1rem+1.2vw,1.8rem);margin:.3em 0 .3em}
.sa-kopf p{color:var(--ink-2);max-width:62ch;margin:0 0 1.2rem}
.sa-zeile{display:flex;gap:.7rem;align-items:stretch;flex-wrap:wrap}
.sa-zeile input[type=search],.sa-zeile input[type=text]{flex:1 1 15rem;min-width:0;
  padding:.8rem 1rem;border:1px solid var(--line-2);border-radius:var(--r);
  background:var(--paper);font:inherit;color:var(--ink)}
.sa-zeile input:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.sa-ergebnis{margin:.9rem 0 0;font-size:.92rem;padding:.7rem .9rem;border-radius:var(--r);
  border:1px solid var(--line)}
.sa-ergebnis.ok{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}
.sa-ergebnis.warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn)}
.sa-ergebnis.err{background:var(--danger-bg);border-color:var(--danger-line);color:var(--danger)}
.sa-merken{margin-top:1.3rem;padding-top:1.3rem;border-top:1px solid var(--line)}
.sa-merken-frage{margin:0 0 .9rem;font-weight:500;color:var(--ink)}
.sa-zeile-3{align-items:flex-end}
.sa-zeile-3 .feld{flex:1 1 13rem;display:flex;flex-direction:column;gap:.35rem;min-width:0}
.sa-zeile-3 .feld label{font-size:.8rem;color:var(--ink-2)}
.sa-hinweis{margin:.8rem 0 0;font-size:.78rem;color:var(--ink-3)}
.sa-meldung{margin:.8rem 0 0;font-size:.92rem;padding:.7rem .9rem;border-radius:var(--r);border:1px solid var(--line)}
.sa-meldung.ok{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}
.sa-meldung.err{background:var(--danger-bg);border-color:var(--danger-line);color:var(--danger)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (max-width:640px){ .sa-zeile .btn{width:100%} }

/* ============================================================ ESPRESSO / AMBER
   Umstellung auf das warme Dunkelsystem. Die Token-Ebene trägt die Farben; hier
   stehen nur die Regeln, die die Vorlage ausdrücklich anders will als vorher. */

/* Knöpfe: gefüllte Amber-Pille = Aktion, Creme-Umriss = alles daneben.
   ABWEICHUNG von der Vorlage: sie nennt Warm Cream als Textfarbe auf Amber —
   das sind 1,6:1 und damit unlesbar. Die Vorlage selbst setzt beim Pfeil-Kreis
   Espresso auf Amber; das übernehmen wir hier (rund 9:1). */
.btn,.btn-primary,.btn-primaer,.btn-cta{border-radius:var(--r-pill);box-shadow:none}
.btn-primary,.btn-primaer,.btn-cta{background:var(--accent);color:var(--paper);border-color:transparent}
.btn-primary:hover,.btn-primaer:hover,.btn-cta:hover{background:var(--accent-3);color:var(--paper)}
.btn-sekundaer,.btn-ghost,.btn-secondary{background:transparent;color:var(--ink);
  border:1px solid var(--ink);border-radius:var(--r-pill)}
.btn-sekundaer:hover,.btn-ghost:hover,.btn-secondary:hover{background:rgba(255,255,255,.08);color:var(--ink)}
.btn-white{background:var(--ink);color:var(--paper);box-shadow:none}
.btn-light{background:rgba(255,255,255,.08);color:var(--ink);border-color:var(--line-2);backdrop-filter:none}
.btn-link{color:var(--accent)}

/* Eingabefelder werden ebenfalls Pillen — Bedienbares fühlt sich eingedrückt an,
   Inhaltsflächen bleiben ruhig bei 6px. */
input[type=text],input[type=email],input[type=tel],input[type=search],select,
.sa-zeile input,.feld input,.feld select{border-radius:var(--r-pill);
  background:var(--sand);border:1px solid var(--line);color:var(--ink)}
textarea{border-radius:var(--r);background:var(--sand);border:1px solid var(--line);color:var(--ink)}
input::placeholder,textarea::placeholder{color:var(--ink-3)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);
  outline-offset:1px;border-color:var(--accent)}

/* Tiefe entsteht über Randton, nie über Schatten oder Weichzeichnung. */
.karte,.wcard,.sa-karte,.ncard,.factcard,.hero-bestand{box-shadow:none;background:var(--paper-2);
  border:1px solid var(--line)}
.karte:hover,.wcard:hover{box-shadow:none;border-color:var(--accent);transform:translateY(-3px)}

/* Enges negatives Tracking ab 27px — hält große Zeilen als kompakte Blöcke zusammen. */
h1,.hero-copy h1{letter-spacing:-.014em}
h2{letter-spacing:-.008em}
h3{letter-spacing:-.005em}

/* Der Demo-Streifen und die dunklen Bänder sitzen jetzt auf Midnight Cocoa. */
.demo-leiste,.trust,.foot{background:var(--panel);color:var(--ink);border-color:var(--line)}
.trust li,.foot a,.foot p,.foot span{color:var(--ink-2)}
.foot a:hover{color:var(--accent)}

/* Platzhalterflächen: warm getönt statt hellgrau, sonst leuchten sie als Löcher. */
.ph{background:var(--sand);border-color:var(--line);color:var(--ink-3)}

/* Mängel bleiben lesbar, ohne einen zweiten Buntton einzuführen: ruhige Sandtinte
   auf Hairline. Amber ist ausschließlich Handlungsfarbe — ein Mangel ist keine
   Handlungsaufforderung. */
.chip-warn{background:transparent;border-color:var(--warn-line);color:var(--warn)}
.chip-ok{background:rgba(31,78,102,.07);border-color:var(--accent);color:var(--accent)}
.chip-grau{background:transparent;border-color:var(--line);color:var(--ink-3)}

/* --- Badge-Zeile auf dem Kartenbild -----------------------------------------
   Kategorie-Tag und Status-Chip lagen frei links/rechts und überlappten, sobald
   der Kategoriename umbrach. Jetzt eine Flexzeile: der Status-Chip behält seine
   volle Breite, der Kategorie-Tag kürzt mit Ellipse. */
.karte-bild-kopf{
  position:absolute; z-index:3; top:12px; left:12px; right:12px;
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:8px; pointer-events:none;
}
.karte-bild .ph-tag{
  position:static; min-width:0; max-width:100%;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.karte-bild .karte-status{ position:static; flex:0 0 auto; white-space:nowrap }

/* --- Bedienelemente: 3:1 Rand (WCAG 1.4.11) ---------------------------------
   Felder, Selects und der sekundäre Button sind Steuerelemente, keine Deko —
   ihr Rand muss sich vom Grund abheben. Die Hairlines zwischen Karten und
   Abschnitten bleiben bewusst leise. */
.feld input, .feld select, .feld textarea,
input[type="search"], input[type="text"], input[type="email"], input[type="tel"],
select, textarea, .btn-sekundaer, .filter-chip{
  border-color:var(--line-kontrast);
}
.feld input:focus-visible, .feld select:focus-visible, .feld textarea:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible{
  border-color:var(--accent);
}

/* ============================================================
   ESPRESSO — KONTRASTKORREKTUREN
   Gemessen, nicht geschätzt: ein Playwright-Lauf über alle 17 Seiten hat jeden
   Textknoten gegen seinen tatsächlich gerenderten Grund gerechnet. Die Fälle
   hier sind Folgen des Palettentauschs — Regeln, die »hell« oder »dunkel« als
   feste Farbe annahmen statt als Rolle.
   ============================================================ */

/* 1 — Footer. Lag auf var(--ink); das war früher dunkle Tinte, ist jetzt Creme:
       cremefarbener Text auf cremefarbenem Grund, 1:1, auf allen 17 Seiten. */
.footer{ background:var(--katalog-bg); border-top:1px solid var(--line) }

/* 2 — »Musterdaten« ist ein Warnhinweis und soll knallen: Creme-Fläche,
       Espresso-Schrift (17,6:1) statt Creme auf Creme. */
.chip-muster{ background:var(--ink); color:var(--paper); border-color:var(--ink) }

/* 3 — Gefüllte Amber-Flächen tragen Espresso-Schrift, nie Creme.
       Creme auf Amber sind 1,6:1 — unlesbar. Espresso auf Amber sind 11:1.
       (Bewusste Abweichung von der Refero-Vorlage; deren eigener Pfeil-Kreis
       macht es genauso.) Kindelemente erben mit, sonst bleiben Zähler und
       Pfeile hell. */

/* 4 — »Neu im Bestand« wird Umriss statt Fläche. Gefülltes Amber bleibt so den
       Handlungen vorbehalten (ein Akzent, sparsam) — ein Bestandshinweis darf
       nicht lauter sein als der Preis daneben. */
.chip-neu{
  background:transparent; color:var(--accent);
  border:1px solid color-mix(in srgb, var(--accent) 55%, transparent);
}
.chip-neu *{ color:inherit }

/* 5 — Die drei Aktenwerkzeuge lagen als flex:1 nebeneinander in der schmalen
       Preisspalte: dreizeiliger Text + Pillenradius ergab Kreise. Untereinander
       als volle Pillen, jede einzeilig. */
.akte-preis-aktionen{ flex-direction:column }

/* 6 — Die Basisregel .btn trug noch color:#FFFFFF aus der hellen Palette. Jeder
       Knopf ohne Modifier (»Nachricht senden«, »Termin anfragen«, …) stand damit
       cremefarben auf Amber. Ausgenommen sind die Umriss-Varianten, die einen
       dunklen Grund haben und Creme brauchen. Die :not()-Kette hebt zugleich die
       Spezifität über seitenlokale Regeln wie .leer-zustand .btn-primary. */
.btn:not(.btn-secondary):not(.btn-linie):not(.btn-outline):not(.btn-sekundaer):not(.btn-ghost):not(.btn-light):not(.btn-white){
  color:var(--paper);
}
.btn:not(.btn-secondary):not(.btn-linie):not(.btn-outline):not(.btn-sekundaer):not(.btn-ghost):not(.btn-light):not(.btn-white) *{
  color:inherit;
}

/* 7 — Hero-Kopfzeile auf schmalen Geräten. Die Pillenform (999px) setzt eine
       einzeilige Zeile voraus; sobald der Text auf zwei Zeilen umbricht, wird
       aus der Pille eine verzerrte Kapsel. Unter 720px darum Kartenradius und
       linksbündig gestapelt — die Pillensprache bleibt beim inneren Ortschip. */
@media (max-width:720px){
  .hero-copy .badge{
    border-radius:var(--r-lg); align-items:flex-start;
    padding:9px 13px; gap:.4em .55em; line-height:1.45;
  }
}

/* 8 — Helle Flächen tragen Espresso, nie Amber. Die »hellen« Knopfvarianten
       stammen aus der alten Palette, wo Akzent-auf-Weiß dunkelgrün war und
       trug. Amber auf Creme sind 2,1:1. Betrifft auch Ruhe- und Hover-Zustände,
       die ein reiner Seiten-Scan nicht sieht. */
.btn-white, .btn-white:hover,
.btn-light:hover, .lightbox-zu:hover{
  color:var(--paper);
}
.btn-white *, .btn-light:hover *, .lightbox-zu:hover *{ color:inherit }
/* .btn-light ruht auf einer dunklen Glasfläche und trägt dort Creme; erst der
   Hover füllt sie cremefarben, dann muss die Schrift kippen. */
.btn-light{ color:var(--ink) }
.btn-light *{ color:inherit }

/* 9 — Knöpfe erben keine Schrift: .vb-clear fiel auf Arial zurück. */

/* 10 — Der Registereintrag im Footer betonte mit 700. Das System kennt 400 und
        500; Betonung läuft hier über Farbe, nicht über Fettung. */
.foot-reg b{ font-weight:500; color:var(--ink) }

/* 11 — Der Verlauf im Vertrauensstreifen stammt aus der hellen Palette, wo er
        als blasser Schimmer lag. Auf Espresso wirkt derselbe Wert (.4) wie ein
        olivfarbener Fleck über dem linken Drittel. Auf einen Hauch reduziert —
        die Vorlage arbeitet ohne dekorative Verläufe, ganz weglassen nähme dem
        Band aber die Trennung vom Hero. */
.trust::after{ background:radial-gradient(circle at 15% 20%, rgba(31,78,102,.07), transparent 60%) }

/* --- Besichtigungstermin ----------------------------------------------------
   Datumsblock links wie ein Kalenderblatt, Text mittig, Handlung rechts.
   Nutzt ausschließlich Tokens — überlebt den anstehenden Palettenwechsel. */
.termin{
  display:grid; grid-template-columns:auto 1fr auto; gap:20px; align-items:center;
  padding:20px 22px; border:1px solid var(--line-2); border-radius:var(--r-lg);
  background:var(--paper-2);
}
.termin-datum{
  display:grid; place-items:center; gap:1px; min-width:66px;
  padding:9px 12px; border-radius:var(--r); background:var(--accent-soft);
  border:1px solid color-mix(in srgb, var(--accent) 38%, transparent);
}
.termin-tag{ font-family:var(--font-head); font-weight:500; font-size:1.85rem; line-height:1; color:var(--accent) }
.termin-monat{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.13em;
               text-transform:uppercase; color:var(--accent) }
.termin-titel{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin:0 0 3px;
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-2);
}
.termin-wann{ margin:0; font-family:var(--font-head); font-weight:500; font-size:1.14rem; line-height:1.3 }
.termin-wo{ margin:3px 0 0; font-size:.94rem; color:var(--ink-2) }
.termin-hinweis{ margin:10px 0 0; font-size:.92rem; color:var(--ink-2); line-height:1.6; max-width:56ch }
.termin-tat{ display:flex; flex-direction:column; gap:9px; align-items:flex-end }
.termin-kompakt{ padding:15px 17px; gap:15px }
.termin-kompakt .termin-datum{ min-width:56px; padding:7px 10px }
.termin-kompakt .termin-tag{ font-size:1.5rem }
@media (max-width:760px){
  .termin{ grid-template-columns:auto 1fr; gap:14px 15px }
  .termin-tat{ grid-column:1 / -1; align-items:stretch }
  .termin-tat .btn{ justify-content:center }
}
.pb0{padding-bottom:0 !important}

/* ============================================================
   RICHTUNG B — „AMTSREGISTER"
   Belegt durch Messung an Grisebach, Auctionet und Maschinensucher:
   grauer Grund, weiße Karten als Vitrinen, Radius 0, KEINE Schatten,
   Trennung ausschließlich über 1-px-Haarlinien. Der Akzent ist Tintenblau
   und trägt nur Handlungen — Status behält seine eigenen Farben.
   ============================================================ */

/* Grundton und Flächen -------------------------------------------------- */
body{ background:var(--paper); color:var(--ink) }
.karte, .akte-karte, .sa-karte, .kasten, .termin{ background:var(--paper-2) }

/* Radius 0 und schattenfrei. Die drei gemessenen Referenzen kommen zusammen
   auf 2.174 große Elemente ohne einen einzigen box-shadow. */
.btn, .btn-primary, .btn-primaer, .btn-cta, .btn-sekundaer, .btn-secondary,
.chip, .karte, .kasten, .fchip, .feld input, .feld select, .feld textarea,
input, select, textarea, .termin, .termin-datum, .sa-karte{
  border-radius:0; box-shadow:none;
}

/* Der Footer lag auf --katalog-bg; das ist in dieser Palette Weiß und damit
   unsichtbar gegen den Seitengrund. Er bekommt die dunkle Tinte als Fläche. */
.footer{ background:var(--ink); color:rgba(255,255,255,.86); border-top:0 }
.footer a{ color:#FFFFFF }
.foot-reg b{ color:#FFFFFF }
.foot-reg, .foot-bottom{ color:rgba(255,255,255,.62) }
.footer h4{ color:rgba(255,255,255,.55) }

/* Dunkle Bänder behalten weiße Schrift; sie liegen jetzt auf --ink. */
.trust, .band-dunkel{ background:var(--ink); color:#FFFFFF }
.trust li{ color:rgba(255,255,255,.9) }
.trust::after{ display:none }   /* Verlauf ersatzlos: die Vorlagen arbeiten ohne */

/* Knöpfe. Gefülltes Tintenblau trägt weiße Schrift (8,9:1). */
.btn:not(.btn-secondary):not(.btn-linie):not(.btn-outline):not(.btn-sekundaer):not(.btn-ghost):not(.btn-light):not(.btn-white),
.btn-primary, .btn-primaer, .btn-cta{
  background:var(--accent); color:#FFFFFF; border-color:transparent;
}
.btn:not(.btn-secondary):not(.btn-linie):not(.btn-outline):not(.btn-sekundaer):not(.btn-ghost):not(.btn-light):not(.btn-white) *{ color:inherit }
.btn:hover, .btn-primary:hover, .btn-primaer:hover, .btn-cta:hover{ background:var(--accent-2); color:#FFFFFF }
.btn-secondary, .btn-sekundaer, .btn-outline, .btn-linie{
  background:var(--paper-2); color:var(--ink); border:1px solid var(--line-kontrast);
}
.btn-secondary:hover, .btn-sekundaer:hover, .btn-outline:hover, .btn-linie:hover{
  background:var(--paper-2); color:var(--accent); border-color:var(--accent);
}
/* .btn-light lag auf einer hellen Glasfläche über dunklem Grund — die gibt es
   in dieser Palette nicht mehr. Wird zum Umriss auf dunklem Band. */
.btn-light{ background:transparent; color:#FFFFFF; border:1px solid rgba(255,255,255,.45) }
.btn-light:hover{ background:#FFFFFF; color:var(--ink) }
.btn-white{ background:#FFFFFF; color:var(--ink) }
.btn-white:hover{ background:#FFFFFF; color:var(--accent) }

/* Überschriften dürfen wieder Gewicht haben — der Espresso-Lauf hatte alles
   auf 500 gezogen, was zu Libre Franklin nicht passt. */
h1,h2,h3{ font-weight:600; letter-spacing:-.021em }
h1{ letter-spacing:-.028em }
.btn, .btn-primaer, .btn-cta{ font-weight:500 }

/* Haarlinien statt Flächen: Karten bekommen einen echten Rand, keinen Schein. */
.karte{ border:1px solid var(--line) }
.karte:hover{ border-color:var(--line-kontrast) }

/* Marke: gestanzte Platte mit Serifen-P (Entwurf 06) */
.brand .wm b, .foot-brand .wm b{ font-family:var(--font-head); font-weight:700 }

/* --- Musterdaten-Hinweis am Katalog ----------------------------------------- */
.musterhinweis{
  display:flex; gap:14px; align-items:flex-start;
  border:1px solid var(--warn-line); background:var(--warn-bg);
  padding:13px 16px; margin:0 0 26px;
}
.musterhinweis p{ margin:0; font-size:.93rem; line-height:1.6; color:var(--ink-2) }
.mh-marke{
  flex:none; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.11em;
  text-transform:uppercase; background:var(--warn); color:#FFFFFF; padding:4px 9px;
}

/* ============================================================
   TERMIN-ZEITLEISTE
   Bewegung ausschließlich über transform und opacity — die Striche laufen
   gestaffelt hoch, dann setzt sich der nächste Termin. Kein Layout wird
   angefasst, deshalb kostet die Animation keine Bildrate.
   ============================================================ */
.zeitleiste{ padding:var(--raum-sektion) 0; background:var(--katalog-bg);
             border-top:1px solid var(--line); border-bottom:1px solid var(--line) }
.zl-kopf{ max-width:60ch; margin-bottom:34px }
.zl-kopf h2{ margin:8px 0 8px }
.zl-kopf p{ margin:0; color:var(--ink-2) }

.zl-schiene{
  display:grid; grid-template-columns:1fr auto; gap:30px; align-items:end;
  padding-top:26px; border-top:1px solid var(--line-2);
}
.zl-striche{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:flex-end; gap:5px; flex-wrap:wrap;
}
.zl-strich{
  position:relative; width:9px; height:34px; flex:none;
  background:var(--line-2);
  transform:scaleY(.18); transform-origin:bottom;
  opacity:.35;
}
.zl-strich.zl-jahrwechsel{ height:46px; background:var(--ink-3); margin-left:13px }
.zl-strich.zl-jahrwechsel:first-child{ margin-left:0 }
.zl-jahr{
  position:absolute; bottom:-21px; left:0;
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.09em; color:var(--ink-3);
}
/* Datum beim Überfahren — jeder Strich ist ein belegbarer Termin, kein Ornament */
.zl-tip{
  position:absolute; bottom:calc(100% + 7px); left:50%;
  transform:translateX(-50%) translateY(3px); opacity:0; pointer-events:none;
  background:var(--ink); color:#FFFFFF; padding:3px 7px; white-space:nowrap;
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.02em;
  transition:opacity .14s ease, transform .14s ease;
}
.zl-strich:hover .zl-tip, .zl-strich:focus-within .zl-tip{ opacity:1; transform:translateX(-50%) translateY(0) }
.zl-strich:hover{ background:var(--accent) }

.zl-naechster{ display:flex; align-items:flex-end; gap:16px; opacity:0; transform:translateY(10px) }
.zl-punkt{
  width:16px; height:16px; flex:none; margin-bottom:9px;
  background:var(--accent); border-radius:50%;
  box-shadow:0 0 0 0 rgba(31,78,102,.45);
}
.zl-karte{ border:1px solid var(--ink); background:var(--paper-2); padding:15px 18px; min-width:270px }
.zl-nr{ margin:0 0 4px; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.13em;
        text-transform:uppercase; color:var(--accent) }
.zl-datum{ margin:0; font-weight:600; font-size:1.06rem; line-height:1.3 }
.zl-zeit{ margin:3px 0 13px; font-size:.9rem; color:var(--ink-2) }
.zl-knopf{ width:100% ; justify-content:center }


/* Staffelung der Striche. Frueher stand der Zaehler als style="--i:N"
   im Markup; die CSP (style-src 'self') hat das Attribut verworfen, damit
   war var(--i) leer und alle Striche kamen gleichzeitig. Der Zaehler steht
   deshalb hier: nth-child ist dasselbe Wissen, nur regelkonform. */
.zl-striche > *{ --i:0 }
.zl-naechster{ --i:24 }
.zl-striche > *:nth-child(1){--i:0} .zl-striche > *:nth-child(2){--i:1} .zl-striche > *:nth-child(3){--i:2} .zl-striche > *:nth-child(4){--i:3} .zl-striche > *:nth-child(5){--i:4} .zl-striche > *:nth-child(6){--i:5}
.zl-striche > *:nth-child(7){--i:6} .zl-striche > *:nth-child(8){--i:7} .zl-striche > *:nth-child(9){--i:8} .zl-striche > *:nth-child(10){--i:9} .zl-striche > *:nth-child(11){--i:10} .zl-striche > *:nth-child(12){--i:11}
.zl-striche > *:nth-child(13){--i:12} .zl-striche > *:nth-child(14){--i:13} .zl-striche > *:nth-child(15){--i:14} .zl-striche > *:nth-child(16){--i:15} .zl-striche > *:nth-child(17){--i:16} .zl-striche > *:nth-child(18){--i:17}
.zl-striche > *:nth-child(19){--i:18} .zl-striche > *:nth-child(20){--i:19} .zl-striche > *:nth-child(21){--i:20} .zl-striche > *:nth-child(22){--i:21} .zl-striche > *:nth-child(23){--i:22} .zl-striche > *:nth-child(24){--i:23}
.zl-striche > *:nth-child(25){--i:24} .zl-striche > *:nth-child(26){--i:25} .zl-striche > *:nth-child(27){--i:26} .zl-striche > *:nth-child(28){--i:27} .zl-striche > *:nth-child(29){--i:28} .zl-striche > *:nth-child(30){--i:29}
.zl-striche > *:nth-child(31){--i:30} .zl-striche > *:nth-child(32){--i:31} .zl-striche > *:nth-child(33){--i:32} .zl-striche > *:nth-child(34){--i:33} .zl-striche > *:nth-child(35){--i:34} .zl-striche > *:nth-child(36){--i:35}
.zl-striche > *:nth-child(37){--i:36} .zl-striche > *:nth-child(38){--i:37} .zl-striche > *:nth-child(39){--i:38} .zl-striche > *:nth-child(40){--i:39} .zl-striche > *:nth-child(41){--i:40} .zl-striche > *:nth-child(42){--i:41}
.zl-striche > *:nth-child(43){--i:42} .zl-striche > *:nth-child(44){--i:43} .zl-striche > *:nth-child(45){--i:44} .zl-striche > *:nth-child(46){--i:45} .zl-striche > *:nth-child(47){--i:46} .zl-striche > *:nth-child(48){--i:47}
.zl-striche > *:nth-child(49){--i:48} .zl-striche > *:nth-child(50){--i:49} .zl-striche > *:nth-child(51){--i:50} .zl-striche > *:nth-child(52){--i:51} .zl-striche > *:nth-child(53){--i:52} .zl-striche > *:nth-child(54){--i:53}
.zl-striche > *:nth-child(55){--i:54} .zl-striche > *:nth-child(56){--i:55} .zl-striche > *:nth-child(57){--i:56} .zl-striche > *:nth-child(58){--i:57} .zl-striche > *:nth-child(59){--i:58} .zl-striche > *:nth-child(60){--i:59}

/* Ablauf: Striche staffeln sich hoch, danach setzt sich der Punkt. */
[data-zeitleiste].laeuft .zl-strich{
  animation:zl-hoch .42s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:calc(var(--i) * 26ms);
}
[data-zeitleiste].laeuft .zl-naechster{
  animation:zl-setzen .5s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:calc(var(--i) * 26ms + 120ms);
}
[data-zeitleiste].laeuft .zl-punkt{
  animation:zl-puls 2.6s ease-out 3;
  animation-delay:calc(var(--i) * 26ms + 520ms);
}
@keyframes zl-hoch{ to{ transform:scaleY(1); opacity:1 } }
@keyframes zl-setzen{ to{ opacity:1; transform:translateY(0) } }
@keyframes zl-puls{
  0%{ box-shadow:0 0 0 0 rgba(31,78,102,.45) }
  70%{ box-shadow:0 0 0 13px rgba(31,78,102,0) }
  100%{ box-shadow:0 0 0 0 rgba(31,78,102,0) }
}

/* Ohne JS und bei reduzierter Bewegung steht alles sofort da. */
.zl-strich, .zl-naechster{ animation-fill-mode:forwards }
@media (prefers-reduced-motion: reduce){
  .zl-strich{ transform:scaleY(1); opacity:1; animation:none !important }
  .zl-naechster{ opacity:1; transform:none; animation:none !important }
  .zl-punkt{ animation:none !important }
}
@media (max-width:860px){
  .zl-schiene{ grid-template-columns:1fr; gap:34px; align-items:stretch }
  .zl-naechster{ align-items:stretch }
  .zl-karte{ flex:1 }
}

/* Zeitleiste, Feinschliff: die Striche sollen die Schiene ausfüllen statt links
   zu kleben — sonst liest man ein Loch statt einer durchgehenden Reihe. */
.zl-striche{ flex:1; align-items:flex-end }
.zl-strich{ flex:1 1 0; min-width:7px; max-width:24px; width:auto }
.zl-schiene{ gap:20px }
.zl-naechster{ gap:12px }
.zl-strich.zl-jahrwechsel{ margin-left:16px }

/* ============================================================
   EINSTIEGSRASTER („Alle Wege")
   Karten als Vitrinen auf grauem Grund: weiße Fläche, Haarlinie, Radius 0,
   kein Schatten. Beim Überfahren wandert nur der Pfeil und der Rand nimmt
   die Akzentfarbe an — beides sind compositor-freundliche Eigenschaften.
   ============================================================ */
.wege{ padding:var(--raum-sektion) 0 }
.wege-gruppe{
  margin:30px 0 13px; font-family:var(--font-mono); font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); font-weight:400;
}
.wege-gruppe:first-of-type{ margin-top:8px }
.wege-raster{ display:grid; grid-template-columns:repeat(auto-fit,minmax(238px,1fr)); gap:1px;
              background:var(--line); border:1px solid var(--line) }
.weg{
  position:relative; display:flex; flex-direction:column; gap:6px;
  background:var(--paper-2); padding:19px 20px 44px; text-decoration:none; color:inherit;
  transition:background .16s ease;
}
.weg:hover, .weg:focus-visible{ background:var(--paper) }
.weg-nr{
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.1em; color:var(--ink-3);
}
.weg-titel{ font-family:var(--font-head); font-weight:600; font-size:1.06rem; letter-spacing:-.014em }
.weg-text{ font-size:.9rem; line-height:1.55; color:var(--ink-2) }
.weg-pfeil{
  position:absolute; left:20px; bottom:17px; color:var(--accent); font-size:1.05rem;
  transition:transform .22s cubic-bezier(.16,1,.3,1);
}
.weg:hover .weg-pfeil, .weg:focus-visible .weg-pfeil{ transform:translateX(5px) }
/* Der Haupteinstieg jeder Gruppe bekommt einen Balken, keine Farbe — der
   Akzent bleibt den Handlungen vorbehalten. */
.weg-stark{ box-shadow:inset 3px 0 0 var(--accent) }
.weg-stark .weg-titel{ color:var(--accent) }
@media (prefers-reduced-motion: reduce){
  .weg-pfeil{ transition:none }
}

/* Suchfeld im Kopf: die Hülle trägt die Form, das Feld darin ist randlos.
   Nach dem Radiuswechsel stand ein eckiger 1-px-Rahmen in einer runden Hülle —
   zwei Formen übereinander. Die Hülle wird eckig wie alles andere. */
.nav-suche{ border-radius:0 }
.nav-suche input{ border:0 !important; background:none; border-radius:0 }
.nav-suche:focus-within{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft) }

/* Zeitleiste auf schmalen Geräten: 23 Striche plus Jahresabstände brauchen mehr
   als 320 px. Statt die Seite aufzudrücken, scrollt die Schiene in sich selbst —
   breite Inhalte bekommen ihren eigenen Scrollbereich, die Seite nie. */
@media (max-width:700px){
  .zl-striche{
    flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
    padding-bottom:24px; margin-bottom:-24px;   /* Platz für die Jahreszahlen */
    scrollbar-width:thin;
  }
  .zl-strich{ flex:0 0 auto; width:8px; min-width:8px }
  .zl-strich.zl-jahrwechsel{ margin-left:11px }
  .zl-tip{ display:none }        /* kein Hover auf dem Touchscreen */
}

/* Deutsche Komposita sprengen schmale Bildschirme: „Besichtigungstermine",
   „Insolvenzverwertung", „Auflösungsbestände" passen bei 320 px in keine Zeile
   und drücken die ganze Seite auf. Silbentrennung statt Überlauf — greift nur,
   weil das Dokument lang="de" trägt. */
h1, h2, h3, h4, .hero-h1, .weg-titel, .zl-kopf h2{
  hyphens:auto; -webkit-hyphens:auto; overflow-wrap:break-word;
}
@media (min-width:760px){
  /* Auf breiten Schirmen ist Trennung unnötig und stört den Satz. */
  h1, h2, h3, h4, .hero-h1, .weg-titel, .zl-kopf h2{ hyphens:manual; -webkit-hyphens:manual }
}

/* Musterhinweis auf schmalen Geräten: das Beispiel-Aktenzeichen steht mit
   geschützten Leerzeichen und kann deshalb nirgends umbrechen. Auf 320 px
   drückt es die Seite auf. Marke über den Text stapeln und den Code notfalls
   trennen lassen — lesbar bleibt er trotzdem. */
@media (max-width:560px){
  .musterhinweis{ flex-direction:column; gap:9px; padding:12px 14px }
  .mh-marke{ align-self:flex-start }
  .musterhinweis .mono{ overflow-wrap:anywhere; font-size:.82em }
}

/* ============================================================
   FUSSZEILE — Neuaufbau
   Drei Ebenen: Marke mit Satz und Kontakt · vier Spalten Wege ·
   Registerangaben als lesbare Liste statt Trennpunkt-Kette.
   ============================================================ */
.foot-oben{
  display:grid; grid-template-columns:minmax(280px,1fr) 2.1fr; gap:44px;
  padding-bottom:34px;
}
.foot-brand .wm-zeile{ display:flex; align-items:center; gap:12px; margin-bottom:16px }
.foot-satz{
  margin:0 0 20px; max-width:44ch; font-size:.96rem; line-height:1.66;
  color:rgba(255,255,255,.78);
}
.foot-kontakt{ margin:0; display:grid; gap:9px }
.foot-kontakt > div{ display:grid; grid-template-columns:88px 1fr; gap:12px; align-items:start }
.foot-kontakt dt{
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.11em;
  text-transform:uppercase; color:rgba(255,255,255,.5); padding-top:3px;
}
.foot-kontakt dd{ margin:0; font-size:.95rem; line-height:1.5; color:#FFFFFF }
.foot-kontakt a{ color:#FFFFFF; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.35) }
.foot-kontakt a:hover{ border-bottom-color:#FFFFFF }

.foot-spalten{ display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:26px }
.footer .foot-col .foot-titel{
  margin:0 0 12px; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.13em;
  text-transform:uppercase; font-weight:400; color:rgba(255,255,255,.5);
}
.footer .foot-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px }
.footer .foot-col a{
  color:rgba(255,255,255,.85); text-decoration:none; font-size:.94rem;
  border-bottom:1px solid transparent; transition:color .14s ease, border-color .14s ease;
}
.footer .foot-col a:hover, .footer .foot-col a:focus-visible{
  color:#FFFFFF; border-bottom-color:rgba(255,255,255,.5);
}

.foot-register{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(186px,1fr));
  gap:1px; margin:0; padding:0;
  border-top:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.16);
}
.foot-register > div{ background:var(--ink); padding:14px 0 4px }
.foot-register dt{
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.12em;
  text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:4px;
}
.foot-register dd{ margin:0; font-size:.92rem; line-height:1.45; color:#FFFFFF }

.foot-unten{
  display:flex; flex-wrap:wrap; gap:9px 26px; justify-content:space-between;
  margin-top:26px; padding-top:18px; border-top:1px solid rgba(255,255,255,.16);
  font-size:.82rem; color:rgba(255,255,255,.6);
}
.foot-rolle{ color:rgba(255,255,255,.5) }
@media (max-width:820px){
  .foot-oben{ grid-template-columns:1fr; gap:34px }
  .foot-register > div{ padding-right:14px }
}

/* --- Termin-Kachel, überarbeitet -------------------------------------------- */
.termin-datum{ min-width:74px; gap:0; padding:8px 12px 10px }
.termin-wt{ font-family:var(--font-mono); font-size:.6rem; letter-spacing:.14em;
            text-transform:uppercase; color:var(--accent); opacity:.75 }
.termin-titel{ gap:8px }
.termin-wo a{ color:var(--ink-2); text-decoration:underline; text-underline-offset:2px;
              text-decoration-thickness:1px }
.termin-wo a:hover{ color:var(--accent) }
.termin-hinweis b{ color:var(--ink); font-weight:600 }

/* --- Zwei Wege zur selben Maschine ------------------------------------------ */
.wege2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:1px;
        background:var(--line-2); border:1px solid var(--line-2) }
.weg2{ background:var(--paper-2); padding:22px 24px 24px }
.weg2:first-child{ box-shadow:inset 0 3px 0 var(--accent) }
.weg2:last-child{ box-shadow:inset 0 3px 0 var(--warn) }
.weg2-marke{
  display:inline-block; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:9px;
}
.weg2 h3{ margin:0 0 9px; font-size:1.2rem }
.weg2 p{ margin:0; color:var(--ink-2); line-height:1.66 }
.weg2 b{ color:var(--ink); font-weight:600 }

/* ============================================================
   AUFKLAPP-MENÜ
   Öffnet bei Hover und bei Tastaturfokus. Der Kopflink bleibt eine echte
   Zieladresse, damit ein Klick darauf nirgends ins Leere führt. Bewegung nur
   über opacity und transform; das Panel liegt permanent im DOM, damit es nicht
   bei jedem Überfahren neu gelayoutet werden muss.
   ============================================================ */
.nav-gruppe{ position:relative; display:flex; align-items:center }
.nav-chev{
  display:inline-block; width:6px; height:6px; margin-left:.42em; vertical-align:1px;
  border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translateY(-1px); opacity:.5;
  transition:transform .18s ease, opacity .18s ease;
}
.nav-gruppe:hover .nav-chev, .nav-gruppe:focus-within .nav-chev{
  opacity:1; transform:rotate(225deg) translateY(-2px);
}
.nav-klapp{
  position:absolute; top:100%; left:-14px; z-index:60;
  min-width:274px; padding:7px 0;
  background:var(--paper-2); border:1px solid var(--line-2);
  opacity:0; visibility:hidden; transform:translateY(-5px);
  transition:opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}
.nav-gruppe:hover .nav-klapp, .nav-gruppe:focus-within .nav-klapp{
  opacity:1; visibility:visible; transform:translateY(0); transition-delay:0s;
}
/* Unsichtbare Brücke: sonst schließt das Panel, wenn die Maus den Spalt
   zwischen Kopflink und Panel überquert. */
.nav-klapp::before{ content:""; position:absolute; left:0; right:0; top:-10px; height:10px }
.nav-links .nav-klapp a{
  display:block; padding:9px 16px; text-decoration:none; line-height:1.35;
  border-left:2px solid transparent;
}
.nav-links .nav-klapp a b{ display:block; font-weight:600; font-size:.93rem; color:var(--ink) }
.nav-links .nav-klapp a span{ display:block; font-size:.79rem; color:var(--ink-3); margin-top:1px }
.nav-links .nav-klapp a:hover, .nav-links .nav-klapp a:focus-visible{
  background:var(--paper); border-left-color:var(--accent);
}
.nav-links .nav-klapp a:hover b{ color:var(--accent) }

/* Im Mobilmenü gibt es kein Hover: alles klappt aus und steht untereinander. */
@media (max-width:980px){
  .nav-gruppe{ display:block }
  .nav-klapp{
    position:static; opacity:1; visibility:visible; transform:none;
    min-width:0; border:0; border-left:1px solid var(--line);
    margin:2px 0 8px 12px; padding:0; background:none;
  }
  .nav-klapp::before{ display:none }
  .nav-chev{ display:none }
  .nav-links .nav-klapp a{ padding:7px 14px }
}
@media (prefers-reduced-motion: reduce){
  .nav-klapp{ transition:opacity .01s, visibility 0s }
  .nav-chev{ transition:none }
}

/* --- Quartalskatalog-Knopf in der Kopfleiste --------------------------------
   Vorher nur Text („Bestand Q3 / 2026 · 35 Objekte"). Der Quartalskatalog ist
   das Herz der Seite — er gehört anklickbar, nicht dekorativ. */
.util-quartal{
  display:inline-flex; align-items:center; gap:.55em; text-decoration:none;
  padding:3px 10px; border:1px solid var(--line-2); background:var(--paper-2);
  color:var(--ink); font-size:.76rem; line-height:1.5;
  transition:border-color .15s ease, color .15s ease;
}
.util-quartal .uq-marke{
  font-family:var(--font-mono); font-size:.64rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3);
}
.util-quartal strong{ font-family:var(--font-mono); font-weight:500; color:var(--accent) }
.util-quartal .uq-zahl{ color:var(--ink-2) }
.util-quartal .arw{ color:var(--accent); transition:transform .2s cubic-bezier(.16,1,.3,1) }
.util-quartal:hover{ border-color:var(--accent); color:var(--accent) }
.util-quartal:hover .arw{ transform:translateX(3px) }
@media (max-width:720px){ .util-quartal .uq-marke{ display:none } }
@media (prefers-reduced-motion: reduce){ .util-quartal .arw{ transition:none } }

/* ============================================================
   ANFRAGE
   Eine Spalte, schmal, ruhig. Die vorherige Fassung hatte drei Fehler, die
   erst im Screenshot auffielen: ein graues Loch im Kartenraster (vier Karten
   in drei Spalten), eine Zweispaltigkeit, die die rechte Seitenhälfte leer
   ließ, und zusammengefallene Feldabstände — die Beschriftung des nächsten
   Feldes klebte am Eingabefeld darüber.
   ============================================================ */
.wrap:has(> .anfrage){ display:block }
/* Alles auf dieser Seite in eine mittige Spalte — ein linksbündiges Formular
   mit leerer rechter Seitenhälfte sieht aus wie ein Layoutfehler. */
.wrap:has(> .anfrage) > *{ max-width:640px; margin-left:auto; margin-right:auto }
.anfrage{ margin:26px auto 0; max-width:640px }
.anf-neben{ margin:26px auto 0; max-width:640px }

/* Schritte: kleine Ziffer, kein Kasten */
.anf-schritt{
  display:flex; align-items:center; gap:10px; margin:0 0 14px; padding:0; border:0;
  font-family:var(--font-head); font-weight:600; font-size:1.02rem; letter-spacing:-.012em;
}
.anf-nr{
  display:grid; place-items:center; width:21px; height:21px; flex:none;
  border:1px solid var(--accent); color:var(--accent); background:none;
  font-family:var(--font-mono); font-size:.68rem; line-height:1;
}
.anf-wahl{ border:0; padding:0; margin:0 0 26px }
.anf-teil{ margin:0 0 26px; padding-top:22px; border-top:1px solid var(--line) }

/* Vier Karten — nie drei plus Loch. Unter 560 px eine Spalte, darüber zwei. */
.anf-karten{ display:grid; grid-template-columns:1fr; gap:1px;
             background:var(--line-2); border:1px solid var(--line-2) }
@media (min-width:560px){ .anf-karten{ grid-template-columns:1fr 1fr } }
.anf-karten input[type="radio"]{ position:absolute; opacity:0; width:1px; height:1px }
.anf-karten label{
  display:block; background:var(--paper-2); padding:13px 15px 14px; cursor:pointer;
  border-left:3px solid transparent; transition:background .14s ease, border-color .14s ease;
}
.anf-karten label:hover{ background:var(--paper) }
.anf-k-titel{ display:block; font-weight:600; font-size:.95rem; letter-spacing:-.01em; margin-bottom:2px }
.anf-k-text{ display:block; font-size:.82rem; line-height:1.45; color:var(--ink-2) }
.anf-karten input:checked + label{ background:var(--paper); border-left-color:var(--accent) }
.anf-karten input:checked + label .anf-k-titel{ color:var(--accent) }
.anf-karten input:focus-visible + label{ outline:2px solid var(--accent); outline-offset:-2px }

/* Felder: verlässlicher Abstand zwischen den Blöcken, nicht nur innerhalb */
.anfrage .feld{ margin:0 0 15px }
.anfrage .feld-zeile{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0 0 15px }
.anfrage .feld-zeile .feld{ margin:0 }
@media (max-width:520px){ .anfrage .feld-zeile{ grid-template-columns:1fr } }
.anfrage label{ display:block; margin-bottom:5px; font-size:.88rem; font-weight:500 }
.anfrage .hilfe{ margin:5px 0 0; font-size:.8rem; line-height:1.5; color:var(--ink-3) }
.anfrage input, .anfrage select, .anfrage textarea{ width:100%; padding:9px 11px; font-size:.94rem }
.anfrage textarea{ min-height:110px; resize:vertical }
.anfrage .weiche{ display:flex; gap:0; margin-bottom:4px }
.anfrage .weiche label{ margin:0; border:1px solid var(--line-kontrast); border-radius:0;
                        padding:7px 15px; font-size:.88rem; cursor:pointer }
.anfrage .weiche label + input + label{ border-left:0 }
.anfrage fieldset.feld{ border:0; padding:0 }
.anfrage fieldset.feld legend{ margin-bottom:6px; padding:0; font-size:.88rem }

.anf-wenn[hidden]{ display:none }
.anf-merk{
  border-left:3px solid var(--warn); background:var(--warn-bg);
  padding:11px 14px; font-size:.86rem; line-height:1.55; color:var(--ink-2); margin:0 0 15px;
}
.anf-merk b{ color:var(--ink) }
.anf-senden{ margin-top:4px }

/* Direktkontakt als schmaler Streifen, nicht als zweiter Kasten */
.anf-direkt{ border:1px solid var(--line); background:var(--paper-2); padding:16px 18px }
.anf-direkt h2{ margin:0 0 11px; font-size:1rem }
.anf-direkt .protokoll{ margin:0 }
@media (prefers-reduced-motion: reduce){ .anf-karten label{ transition:none } }

/* --- Bestandskasten im Hero, überarbeitet ------------------------------------
   Aus einer Preisliste wird ein Registerauszug: Zustand und Papierstand stehen
   mit dabei, weil genau das den Unterschied zu einem Kleinanzeigenportal macht. */
.hb-titel{ display:inline-flex; align-items:center; gap:7px }
.hb-puls{
  width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none;
  box-shadow:0 0 0 0 rgba(31,78,102,.5); animation:hb-puls 3.2s ease-out infinite;
}
@keyframes hb-puls{
  0%{ box-shadow:0 0 0 0 rgba(31,78,102,.5) }
  60%{ box-shadow:0 0 0 8px rgba(31,78,102,0) }
  100%{ box-shadow:0 0 0 0 rgba(31,78,102,0) }
}
.hb-liste li + li{ border-top:1px solid var(--line) }
.hb-liste a{
  display:grid; gap:5px; padding:13px 0; text-decoration:none; color:inherit;
  border-left:2px solid transparent; padding-left:0;
  transition:border-color .15s ease, padding-left .15s cubic-bezier(.16,1,.3,1);
}
.hb-liste a:hover, .hb-liste a:focus-visible{ border-left-color:var(--accent); padding-left:10px }
.hb-zeile1{ display:flex; align-items:baseline; gap:9px }
.hb-zeile2{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap }
.hb-zeile3{ display:flex; align-items:baseline; justify-content:space-between; gap:10px }
.hb-nr{
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.05em; color:var(--ink-3);
  border:1px solid var(--line); padding:1px 5px; flex:none;
}
.hb-name{ font-family:var(--font-head); font-weight:600; font-size:.99rem; letter-spacing:-.012em }
.hb-daten{ font-family:var(--font-mono); font-size:.7rem; color:var(--ink-3) }
.hb-chips{ display:flex; gap:5px }
.hb-chip{
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.03em; padding:2px 6px;
  border:1px solid var(--line); color:var(--ink-3); white-space:nowrap;
}
.hb-chip-ok{ border-color:color-mix(in srgb,var(--accent) 42%,transparent); color:var(--accent) }
.hb-preis{ font-family:var(--font-mono); font-weight:500; font-size:1.02rem; color:var(--ink);
           font-variant-numeric:tabular-nums }
.hb-akte{ font-size:.79rem; color:var(--accent); opacity:0; transition:opacity .15s ease }
.hb-liste a:hover .hb-akte, .hb-liste a:focus-visible .hb-akte{ opacity:1 }
@media (prefers-reduced-motion: reduce){
  .hb-puls{ animation:none }
  .hb-liste a{ transition:none }
  .hb-akte{ opacity:1; transition:none }
}

/* Die alte Spaltendefinition der Bestandsliste galt noch weiter: Name, Daten und
   Chips landeten nebeneinander statt untereinander und überlappten. Eine Spalte. */
.hb-liste a{ grid-template-columns:1fr; grid-template-areas:none; align-items:stretch }
.hb-zeile1{ min-width:0 }
.hb-name{ min-width:0; overflow-wrap:break-word }

/* Anfrage, zwei Nachträge aus der Sichtprüfung:
   · Die Vorzeile ist ein <span> — margin:auto greift bei inline nicht, sie blieb
     als einziges Element links kleben.
   · In einer zweispaltigen Feldzeile hält ein ausgeblendetes Feld seine Spalte
     weiter besetzt. Das Namensfeld stand dadurch halbbreit neben einer Lücke. */
.wrap:has(> .anfrage) > .eyebrow{ display:block }
.anfrage .feld-zeile:has(> .anf-wenn[hidden]){ grid-template-columns:1fr }
.anfrage .feld-zeile > .anf-wenn[hidden]{ display:none }

/* Abstände zwischen Überschrift und folgendem Zweispalter.
   Beim Kürzen des Käuferschutz-Blocks fiel auf: die H2 klebte am H3 darunter,
   und die beiden Spalten starteten auf unterschiedlicher Höhe, weil die eine
   eine Zeile Überschrift mehr umbrach. */
.sektion h2 + .zwei-spalten,
.sektion h2 + .wege2,
.sektion h1 + .zwei-spalten{ margin-top:26px }
.zwei-spalten{ align-items:start }
.zwei-spalten > div > h3:first-child,
.zwei-spalten > div > h2:first-child{ margin-top:0; margin-bottom:12px }
.liste-schlicht{ margin:0 }
.liste-schlicht li + li{ margin-top:11px }

/* ============================================================
   BILDRATE — die vier Dauerkosten abgestellt
   Gemessen mit einem Scan über alle Elemente: was permanent animiert, was
   pro Scrollbild neu gezeichnet werden muss, was eine eigene Ebene erzwingt.
   ============================================================ */

/* 1 — Der pulsende Punkt animierte endlos einen box-shadow. Ein Schatten kann
       nicht vom Compositor bewegt werden; der Browser zeichnet ihn in JEDEM
       Bild neu, dauerhaft, auch wenn niemand hinschaut. Stattdessen ein Ring
       aus einem Pseudo-Element, der nur skaliert und ausblendet — beides
       compositor-fähig. (Derselbe Fehler wie beim letzten Ruckel-Durchgang.) */
.hb-puls{ position:relative; box-shadow:none; animation:none }
.hb-puls::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--accent); opacity:0;
  animation:hb-ring 3.2s cubic-bezier(.16,1,.3,1) infinite;
}
@keyframes hb-ring{
  0%{ transform:scale(1); opacity:.5 }
  70%{ transform:scale(3.4); opacity:0 }
  100%{ transform:scale(3.4); opacity:0 }
}
.zl-punkt{ position:relative; box-shadow:none !important; animation:none !important }
[data-zeitleiste].laeuft .zl-punkt{ animation:none !important }
.zl-punkt::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--accent); opacity:0;
}
[data-zeitleiste].laeuft .zl-punkt::after{
  animation:hb-ring 2.6s cubic-bezier(.16,1,.3,1) 3;
  animation-delay:calc(var(--i) * 26ms + 520ms);
}

/* 2 — backdrop-filter auf der fixierten Kopfleiste zwingt den Browser, bei
       jedem Scrollbild den Bereich dahinter neu weichzuzeichnen. Bei einem
       Gestaltungssystem ohne Rundungen und ohne Schatten bringt Milchglas
       ohnehin nichts. Deckende Fläche mit Haarlinie. */
.header{
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  background:var(--paper); border-bottom:1px solid var(--line);
}

/* 3 — Die Atmosphärenschicht ist eine bildschirmfüllende fixierte Ebene mit
       Kornmuster bei 4,5 % Deckkraft. Auf hellem Papier sieht man davon nichts,
       sie kostet aber eine eigene Compositor-Ebene über die ganze Seite. */
.atmos{ display:none }

/* 4 — Der Fortschrittsbalken trug will-change dauerhaft (hält eine eigene Ebene
       permanent vor) und einen Schatten. Transform allein reicht. */
.progress{ will-change:auto; box-shadow:none }

@media (prefers-reduced-motion: reduce){
  .hb-puls::after, .zl-punkt::after{ animation:none !important; opacity:0 }
}

/* --- Suchgesuch, neu ---------------------------------------------------------
   Der Kasten klebte ohne Abstand am dunklen Band darüber und lief rechts aus
   dem Raster. Jetzt normaler Abschnittsabstand und ein Gitter, das die drei
   Felder und den Knopf in eine Zeile legt. */
.suchauftrag{ padding:var(--raum-sektion) 0 }
.sa-karte{ border:1px solid var(--line-2); background:var(--paper-2); padding:26px 28px 28px }
.sa-kopf{ max-width:62ch }
.sa-kopf h2{ margin:8px 0 8px }
.sa-kopf p{ margin:0; color:var(--ink-2) }
.sa-gitter{
  display:grid; grid-template-columns:1.5fr 1fr 1fr auto; gap:12px;
  align-items:end; margin-top:22px;
}
.sa-gitter .feld{ margin:0 }
.sa-gitter label{ display:block; margin-bottom:5px; font-size:.86rem; font-weight:500 }
.sa-gitter input{ width:100%; padding:9px 11px; font-size:.94rem }
.sa-gitter .btn{ white-space:nowrap; padding:.72em 1.2em }
.sa-hinweis{ margin:14px 0 0; font-size:.82rem; color:var(--ink-3) }
.sa-meldung{ margin:12px 0 0; font-size:.92rem }
@media (max-width:900px){ .sa-gitter{ grid-template-columns:1fr 1fr } .sa-gitter .btn{ grid-column:1 / -1 } }
@media (max-width:560px){ .sa-gitter{ grid-template-columns:1fr } }

/* --- Navigation: Fläche statt Unterstrich -----------------------------------
   Der Unterstrich unter dem aktiven Wort wirkt wie ein Link im Fließtext und
   springt bei jedem Seitenwechsel. Stattdessen eine ruhige Fläche mit
   Radius — das ist im ganzen System die einzige Rundung, und genau deshalb
   liest sie sich als Bedienelement und nicht als Dekoration. */
.nav-links > a, .nav-gruppe > a{
  padding:7px 13px; border-radius:6px; text-decoration:none !important;
  border-bottom:0 !important; transition:background .14s ease, color .14s ease;
}
.nav-links > a::after, .nav-gruppe > a::after{ display:none !important }
.nav-links > a:hover, .nav-gruppe:hover > a, .nav-gruppe:focus-within > a{
  background:rgba(31,78,102,.07); color:var(--accent);
}
.nav-links a[aria-current="page"]{
  background:var(--accent); color:#FFFFFF;
}
.nav-links a[aria-current="page"]:hover{ background:var(--accent-2); color:#FFFFFF }
.nav-klapp{ border-radius:6px; overflow:hidden }

/* --- Termin im Kopf: kompakt, nicht unterstrichen --------------------------- */
.nav-termin{
  display:inline-flex; align-items:baseline; gap:.5em; text-decoration:none;
  padding:6px 12px; border:1px solid var(--line-2); border-radius:6px;
  color:var(--ink); white-space:nowrap;
  transition:border-color .14s ease, background .14s ease;
}
.nav-termin .nt-marke{
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3);
}
.nav-termin strong{ font-weight:600; font-size:.9rem; color:var(--accent) }
.nav-termin:hover{ border-color:var(--accent); background:rgba(31,78,102,.05) }
@media (max-width:1180px){ .nav-termin .nt-marke{ display:none } }
@media (prefers-reduced-motion: reduce){
  .nav-links > a, .nav-gruppe > a, .nav-termin{ transition:none }
}

/* Termin in der Kopfleiste statt in der Hauptnavigation — dort drängelten sich
   drei Kästchen nebeneinander und »Anfragen« lief aus dem Bild. */
.nav-termin{ display:none }
.util-termin{
  display:inline-flex; align-items:baseline; gap:.42em; text-decoration:none;
  color:var(--ink-2); font-size:.76rem; white-space:nowrap;
}
.util-termin strong{ color:var(--accent); font-weight:600 }
.util-termin:hover{ color:var(--accent) }
@media (max-width:820px){ .util-termin{ display:none } }
.bestand-wechsel{ margin:8px 0 0; color:var(--ink-2); max-width:64ch }
.bestand-wechsel a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px }

/* Der Telefonblock war mit derselben Klasse gebaut wie die Registerangaben im
   Fuß — „Rufen Sie an" sah damit aus wie „HRB 521791". Eigene, wärmere Form. */
.anf-mensch{ margin:0 0 14px; font-size:.92rem; line-height:1.6; color:var(--ink-2) }
.anf-direkt .protokoll > div{ grid-template-columns:78px 1fr; padding:7px 0 }
.anf-direkt .protokoll dt{ font-family:var(--font-body); font-size:.82rem; letter-spacing:0;
                           text-transform:none; color:var(--ink-3) }
.anf-direkt .protokoll dd{ font-size:.97rem }
.anf-direkt .protokoll dd a{ color:var(--accent); font-weight:500 }
.anfrage fieldset.feld legend{ font-weight:500; font-size:.88rem; color:var(--ink) }

/* ============================================================
   ANFRAGE — Befunde aus der Bildprüfung
   Alle sechs Punkte standen im Screenshot, nicht im Code.
   ============================================================ */

/* 1 — Die gewählte Karte war in Seitengrundfarbe gefüllt (#F1F1EE) — exakt die
       Farbe eines leeren Eingabefelds. Die Auswahl sah dadurch aus wie ein
       ausgestanztes Loch, die drei nicht gewählten wirkten aktiver.
       Gewählt bleibt jetzt weiß, hover bekommt eine eigene, schwächere Stufe. */
.anf-karten label:hover{ background:#FAFAF9 }
.anf-karten input:checked + label{ background:#FFFFFF; border-left-color:var(--accent) }

/* 2 — Der Rahmen des Kartenrasters war oben, links und rechts 1 px und unten
       6 px: die allgemeine Regel .anfrage label{margin-bottom:5px} griff auch
       auf die Kartenbeschriftungen und addierte sich zur Rasterfuge. */
.anf-karten label{ margin-bottom:0 }

/* 3 — »Ihre Nachricht« klebte mit 0 px am Hinweis darüber, und der Hinweis
       gehört inhaltlich zu den Feldern DARÜBER, nicht zur Nachricht. */
.anfrage .hilfe{ margin:5px 0 15px }
.anfrage .feld .hilfe:last-child{ margin-bottom:0 }

/* 4 — »Lieber anrufen?« hatte zwei ineinanderliegende Rahmen in derselben
       Farbe auf demselben Grund. Der innere fällt weg. */
.anf-direkt .protokoll{ border:0 }
.anf-direkt .protokoll > div{ border-bottom:1px solid var(--line) }
.anf-direkt .protokoll > div:last-child{ border-bottom:0 }

/* 5 — Nach dem Absenden sprang der Browser zum Pflichtfeld, dessen Beschriftung
       dann hinter der fixierten Kopfleiste lag. */
html{ scroll-padding-top:120px }

/* 6 — Vier verschiedene Fokusringe in einem Formular. Eine Regel für alle. */
.anfrage input:focus-visible, .anfrage select:focus-visible, .anfrage textarea:focus-visible,
.anf-karten input:focus-visible + label,
.anfrage .weiche input:focus-visible + label,
.anfrage .btn:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}
/* Auf gefüllten Flächen braucht der Ring eine helle Trennung, sonst verschmilzt
   er mit der Füllung zu einem dunklen Klotz. */
.anfrage .weiche input:checked:focus-visible + label,
.anfrage .btn:focus-visible{ box-shadow:0 0 0 2px #FFFFFF inset }

/* 7 — Beim Umschalten sprang alles darunter um bis zu 233 px. Mindesthöhe
       hält den Bereich stabil. */
.anf-teil:first-of-type{ min-height:188px }
@media (max-width:560px){ .anf-teil:first-of-type{ min-height:0 } }

/* 8 — Fingerbedienung: alle Bedienelemente auf mindestens 44 px. */
@media (max-width:560px){
  .anfrage input, .anfrage select, .anfrage textarea{ min-height:44px }
  .anfrage .weiche label{ min-height:44px; display:flex; align-items:center }
}

/* 9 — Das Fußraster ließ bei 768 px eine leere Zelle, durch die der
       Rasterhintergrund als heller Block schien — dasselbe Loch wie im
       Kartenraster, nur eine Breite tiefer. */
@media (min-width:700px) and (max-width:900px){
  .foot-spalten{ grid-template-columns:1fr 1fr }
}

/* ============================================================
   ANFRAGE — Neubau: ein Block, Nummer oben
   Vorher 11 Bedienelemente und 209 Wörter, auf dem Handy 824 px bis zum
   ersten Feld. Die alten Bauteile (.anf-karten, .anf-teil, .anf-nr,
   .anf-schritt) entfallen ersatzlos.
   ============================================================ */
.anf-kopf{ max-width:640px; margin:0 0 26px }
.anf-kopf h1{ margin:8px 0 18px }
.anf-tel{
  display:inline-flex; flex-direction:column; gap:2px; text-decoration:none;
  border-left:3px solid var(--accent); padding:4px 0 4px 14px; margin-bottom:12px;
}
.at-nummer{ font-family:var(--font-mono); font-size:1.42rem; font-weight:500; color:var(--accent);
            letter-spacing:-.01em }
.at-zeit{ font-size:.88rem; color:var(--ink-2) }
.anf-tel:hover .at-nummer{ color:var(--accent-2) }
.anf-oder{ margin:0; color:var(--ink-2); max-width:52ch }

.anfrage{ max-width:640px; margin:0 }
.anf-satz{ border:0; padding:0; margin:0 0 22px }
.anf-satz legend{ padding:0; margin-bottom:8px; font-size:1.02rem; font-weight:600; color:var(--ink) }
.anf-satz .weiche{ flex-wrap:wrap }
.anf-satz .weiche label{ font-size:.95rem; padding:9px 17px }
.optional{ font-weight:400; color:var(--ink-3); font-size:.86em }
.pflicht{ color:var(--accent) }
.anf-nachsatz{ margin:11px 0 0; font-size:.85rem; color:var(--ink-3) }
.anf-fuss{ max-width:640px; margin:26px 0 0; padding-top:18px; border-top:1px solid var(--line);
           font-size:.86rem; line-height:1.7; color:var(--ink-3) }
.anf-fuss a{ color:var(--accent) }

/* Alte Bauteile stilllegen, falls sie irgendwo überlebt haben */
.anf-karten, .anf-nr, .anf-schritt, .anf-teil, .anf-neben, .anf-direkt, .anf-mensch{ display:none }

/* Anfrage: weiße Fläche statt grauer Kastenstapel — auf hellgrauem Grund liest
   sich das als Vitrine, so wie die Karten im Katalog. */
.anfrage{ background:var(--paper-2); border:1px solid var(--line); padding:26px 28px 28px }
.anf-felder{ margin-top:4px }
.anf-abschluss{ margin-top:22px; padding-top:20px; border-top:1px solid var(--line) }
.anf-satz + .anf-satz{ margin-top:-8px }
.anf-vorab{
  max-width:640px; margin:22px 0 0; padding:18px 20px;
  border-left:3px solid var(--accent); background:var(--paper-2);
}
.anf-vorab p{ margin:0 0 8px }
.anf-vorab ul{ margin:0; padding-left:18px; display:grid; gap:5px }
.anf-vorab li{ font-size:.92rem; color:var(--ink-2) }
.anf-vorab a{ color:var(--accent); font-weight:500 }

/* --- Anfrage: Maschinenkarte, Live-Treffer, Ablauf --------------------------- */
.anf-position{
  display:flex; align-items:center; gap:14px; max-width:640px; margin:0 0 16px;
  border:1px solid var(--accent); border-left-width:3px; background:var(--paper-2);
  padding:13px 16px;
}
.ap-nr{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.05em; color:var(--ink-3);
        border:1px solid var(--line); padding:2px 7px; flex:none }
.ap-text{ flex:1; min-width:0 }
.ap-name{ margin:0; font-weight:600; font-size:1rem; letter-spacing:-.012em }
.ap-daten{ margin:2px 0 0; font-size:.82rem; color:var(--ink-2) }
.ap-preis{ font-family:var(--font-mono); font-weight:500; font-size:.98rem; white-space:nowrap;
           font-variant-numeric:tabular-nums }
.ap-wechsel{ font-size:.8rem; color:var(--accent); white-space:nowrap }
@media (max-width:600px){
  .anf-position{ flex-wrap:wrap }
  .ap-text{ flex:1 1 100% ; order:3 }
}

.anf-treffer{ margin:7px 0 0; font-size:.86rem; line-height:1.5 }
.anf-treffer-treffer{ color:var(--accent); font-weight:500 }
.anf-treffer-leer{ color:var(--ink-2) }

.anf-danach{
  list-style:none; margin:18px 0 0; padding:0; display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  background:var(--line); border:1px solid var(--line); counter-reset:schritt;
}
.anf-danach li{ background:var(--paper-2); padding:12px 14px; counter-increment:schritt }
.anf-danach li::before{
  content:counter(schritt); display:block; font-family:var(--font-mono); font-size:.66rem;
  color:var(--accent); margin-bottom:4px;
}
.anf-danach b{ display:block; font-size:.9rem; font-weight:600; margin-bottom:2px }
.anf-danach span{ display:block; font-size:.8rem; line-height:1.45; color:var(--ink-2) }

/* ============================================================
   KOPFLEISTE — deckend
   Sie war zu 82 % bzw. 92 % deckend. Solange ein Weichzeichner dahinterlag,
   verschwamm der durchscheinende Inhalt zu einer Fläche. Der Weichzeichner ist
   für die Bildrate entfallen (er musste bei jedem Scrollbild neu rechnen) —
   seitdem las man den Text der Seite durch die Navigation hindurch.
   Milchglas passt ohnehin nicht zu einem System ohne Rundungen und Schatten.
   ============================================================ */
.header, .header.scrolled{
  background:var(--paper);
  backdrop-filter:none; -webkit-backdrop-filter:none;
  box-shadow:none;
}
.header{ border-bottom:1px solid var(--line) }

/* ============================================================
   AUFKLAPP-MENÜ — ohne Unterzeile, mit Rundung
   ============================================================ */
.nav-links .nav-klapp a span{ display:none }
.nav-klapp{
  border-radius:10px; min-width:212px; padding:6px;
  border:1px solid var(--line-2); overflow:hidden;
}
.nav-links .nav-klapp a{
  border-radius:6px; border-left:0; padding:9px 13px;
}
.nav-links .nav-klapp a b{ font-weight:500; font-size:.92rem }
.nav-links .nav-klapp a:hover, .nav-links .nav-klapp a:focus-visible{
  background:rgba(31,78,102,.08); border-left:0;
}
.nav-links .nav-klapp a:hover b{ color:var(--accent) }

/* Hinweis unter dem Ablauf: die Besichtigung ist kein Schritt in der Kette,
   sondern jederzeit möglich — deshalb steht sie daneben, nicht darin. */
.ablauf-hinweis{
  max-width:70ch; margin:26px 0 0; padding:14px 18px;
  border-left:3px solid var(--accent); background:var(--paper-2);
}
.ablauf-hinweis p{ margin:0; line-height:1.7; color:var(--ink-2) }
.ablauf-hinweis b{ color:var(--ink) }
.ablauf-hinweis a{ color:var(--accent); font-weight:500; white-space:nowrap }

/* --- Bildbänder ------------------------------------------------------------- */
.foto-voll{ margin:0 }
.foto-voll img{ width:100%; height:auto; display:block; border:1px solid var(--line) }
.marke-band{ padding:0 0 var(--raum-sektion) }
.foto-band-head{ max-width:64ch; margin-bottom:20px }
.foto-band-head h2{ margin:0 0 8px }
.foto-band-head p{ margin:0; color:var(--ink-2) }

/* --- Kennzahlen ------------------------------------------------------------- */
.kennzahlen{ padding:var(--raum-sektion) 0 }
.kz-raster{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1px;
  margin:0; background:var(--line); border:1px solid var(--line);
}
.kz{ background:var(--paper-2); padding:20px 22px 22px }
.kz dt{
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:9px;
}
.kz dd{ margin:0; display:flex; align-items:baseline; gap:.4em }
.kz dd b{ font-family:var(--font-head); font-weight:600; font-size:2.15rem; line-height:1;
          letter-spacing:-.03em; color:var(--accent); font-variant-numeric:tabular-nums }
.kz dd span{ font-size:.9rem; color:var(--ink-2) }

/* --- Bild im Ablauf --------------------------------------------------------- */
.ablauf-bild{ margin:26px 0 0 }
.ablauf-bild img{ width:100%; height:auto; display:block; border:1px solid var(--line) }
.ablauf-bild figcaption{ margin-top:9px; font-size:.86rem; line-height:1.6; color:var(--ink-3);
                         max-width:70ch }

/* ============================================================
   KONTAKTSEITE — zweispaltig (Wege links, Formular rechts)
   Vorher ein Feldstapel auf voller Breite: die Telefonnummer stand als
   kleine Zeile darüber und ging unter, obwohl sie der schnellste Weg ist.
   Jetzt liegt links, was ohne Formular funktioniert.
   Optik bleibt Akte: rechter Winkel, Haarlinie, Mono-Marke über jedem Block.
   ============================================================ */
.kt-kopf{ max-width:60ch }
.kt-kopf h1{ margin:.25em 0 .3em }
.kt-raster{
  display:grid; grid-template-columns:minmax(0,330px) minmax(0,1fr);
  gap:26px; align-items:start; margin-top:30px;
}
.kt-spalte{ display:flex; flex-direction:column; gap:14px }

.kt-karte{
  background:var(--paper-2); border:1px solid var(--line);
  padding:18px 20px 20px;
}
.kt-marke{
  display:flex; align-items:center; gap:7px;
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:12px;
}
.kt-punkt{
  width:7px; height:7px; background:var(--accent); flex:none;
  box-shadow:0 0 0 3px var(--accent-soft);
}

/* Die Nummer ist das wichtigste Element der Seite — entsprechend groß.
   Mono mit Tabellenziffern, weil sie hier wie ein Registereintrag gelesen
   und oft abgeschrieben wird. */
.kt-tel{
  display:block; font-family:var(--font-mono); font-variant-numeric:tabular-nums;
  font-size:clamp(1.22rem,1rem+.9vw,1.5rem); font-weight:700; letter-spacing:-.01em;
  color:var(--accent-ink); text-decoration:none; line-height:1.2;
}
.kt-tel:hover{ color:var(--accent-3) }
.kt-tel-zeit{ margin:5px 0 14px; font-size:.83rem; color:var(--ink-2) }
.kt-mail{
  display:inline-flex; align-items:center; gap:7px; font-size:.92rem;
  color:var(--accent-ink); text-decoration:none; word-break:break-all;
  padding-top:13px; border-top:1px solid var(--line); width:100%;
}
.kt-mail svg{ width:16px; height:16px; flex:none; color:var(--ink-3) }
.kt-mail:hover{ text-decoration:underline; text-underline-offset:3px }

.kt-person{ display:flex; align-items:center; gap:13px }
.kt-avatar{
  width:50px; height:50px; flex:none; display:grid; place-items:center;
  background:var(--accent); color:#FFFFFF;
  font-family:var(--font-mono); font-size:.94rem; font-weight:700; letter-spacing:.04em;
}
.kt-person-text b{ display:block; font-size:1rem; letter-spacing:-.01em; color:var(--ink) }
.kt-person-text span{ display:block; margin-top:2px; font-size:.8rem; color:var(--ink-3) }
.kt-person-satz{ margin:12px 0 0; font-size:.85rem; line-height:1.55; color:var(--ink-2) }

.kt-adresse{ margin:0; font-size:.95rem; line-height:1.6; color:var(--ink) }
.kt-termin{
  margin:13px 0 0; padding-top:12px; border-top:1px solid var(--line);
  font-size:.87rem; line-height:1.55; color:var(--ink-2);
}
.kt-termin b{ color:var(--ink); font-weight:600 }
.kt-weiter{
  display:inline-block; margin-top:12px; font-size:.85rem;
  color:var(--accent-ink); text-decoration:none;
}
.kt-weiter:hover{ text-decoration:underline; text-underline-offset:3px }

/* Drei Haken statt eines Fließtexts: das sind die Zusagen, die ein Absender
   vor dem Ausfüllen wissen will. */
.kt-haken{ list-style:none; margin:2px 0 0; padding:0; display:flex; flex-direction:column; gap:9px }
.kt-haken li{ display:flex; align-items:flex-start; gap:9px; font-size:.85rem; line-height:1.45; color:var(--ink-2) }
.kt-haken svg{ width:15px; height:15px; flex:none; margin-top:2px; color:var(--accent) }

/* ---- Formularkarte ---- */
.kt-form{ margin:0; max-width:none; background:var(--paper-2); border:1px solid var(--line) }
.kt-form-kopf{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:12px 22px; background:var(--ink); color:var(--paper);
}
.kt-form-marke{
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
}
.kt-form-nr{ font-size:.78rem; color:#C9CBC6 }
.kt-form-koerper{ padding:22px }

.kt-position{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px;
  padding:12px 14px; margin:0 0 20px;
  background:var(--sand-2); border-left:3px solid var(--accent);
}
.kp-nr{ font-family:var(--font-mono); font-size:.76rem; letter-spacing:.06em; color:var(--accent-ink) }
.kp-name{ margin:0; font-weight:600; font-size:.95rem; color:var(--ink) }
.kp-daten{ margin:2px 0 0; font-size:.79rem; color:var(--ink-2) }
.kp-preis{ font-family:var(--font-mono); font-weight:700; font-size:.92rem; color:var(--ink) }
.kp-wechsel{ grid-column:2/-1; font-size:.78rem; color:var(--accent-ink) }

.kt-weg .weiche-3{ display:grid; grid-template-columns:repeat(3,1fr) }
.kt-weg .weiche-3 label{ text-align:center; padding-left:6px; padding-right:6px }

.kt-abschluss{ margin-top:20px; padding-top:18px; border-top:1px solid var(--line) }
.kt-abschluss .anf-senden{ width:100% }
.kt-signatur{ margin:12px 0 0; font-size:.83rem; color:var(--ink-3); text-align:center }

.kt-fuss{
  margin:26px 0 0; padding-top:16px; border-top:1px solid var(--line);
  font-size:.85rem; line-height:1.6; color:var(--ink-3);
}

/* Auf schmalen Geräten zuerst die Nummer, dann das Formular, dann der Rest —
   display:contents löst die Spalte auf, damit die Reihenfolge frei wählbar ist. */
@media (max-width:900px){
  .kt-raster{ grid-template-columns:1fr; gap:14px }
  .kt-spalte{ display:contents }
  .kt-tel-karte{ order:1 }
  .kt-form{ order:2; margin-bottom:12px }
  .kt-karte:not(.kt-tel-karte){ order:3 }
  .kt-haken{ order:4 }
}
@media (max-width:560px){
  .kt-form-koerper{ padding:18px 15px }
  .kt-form-kopf{ padding:11px 15px }
  .kt-position{ grid-template-columns:auto 1fr }
  .kp-preis{ grid-column:2; justify-self:start }
}

/* ============================================================
   BILDER — Maßstab statt Bildschirmbreite
   Die Fotos lagen vorher als volle Bänder in der Seite. Bei 1800 px Quelle
   heißt das: ein Bild füllt den halben Bildschirm und sagt nichts dazu.
   Jetzt hat jedes Bild eine feste Obergrenze und einen Text, der erklärt,
   was man sieht — ein Foto ohne Beschriftung ist Dekoration, mit Beschriftung
   ein Beleg.
   ============================================================ */
.bild-neben{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(20px,3vw,44px); align-items:center;
}
.bild-text .eyebrow{ margin-bottom:8px }
.bild-text h2{ margin:0 0 12px; font-size:clamp(1.35rem,1rem+1.5vw,1.9rem) }
.bild-text p{ margin:0 0 10px; color:var(--ink-2); max-width:46ch }
.bild-text .klein{ font-size:.86rem }
.bild-text .tlink{ margin-top:6px; display:inline-block }

.bild-rahmen{ margin:0 }
.bild-rahmen img{
  display:block; width:100%; height:auto;
  border:1px solid var(--line); background:var(--sand-2);
}
.bild-rahmen figcaption{
  margin-top:10px; font-size:.83rem; line-height:1.55; color:var(--ink-3);
  max-width:62ch; padding-left:12px; border-left:2px solid var(--line-2);
}
/* Das breite Bild bleibt deutlich unter der Textbreite der Seite. */
.bild-breit{ max-width:860px }

/* Foto als Hintergrundband: das Bild trägt hier keine prüfbare Aussage,
   sondern den Übergang zwischen zwei Kapiteln. Der Verlauf ist Pflicht —
   ohne ihn steht weiße Schrift irgendwann auf einer hellen Bildstelle. */
.foto-hintergrund{
  /* Pfad relativ zum Stylesheet (/static/css/) — so bleibt es bei der strengen
     CSP, die kein style-Attribut mit url() im Template erlauben würde. */
  --fh-bild:url("../img/schluessel-papiere.webp?v=1786566270");
  position:relative; isolation:isolate;
  padding:clamp(52px,8vw,104px) 0;
  background-image:
    linear-gradient(90deg, rgba(15,18,21,.92) 0%, rgba(15,18,21,.78) 46%, rgba(15,18,21,.42) 100%),
    var(--fh-bild);
  background-size:cover; background-position:center 62%; background-repeat:no-repeat;
  color:#FFFFFF;
}
.fh-text{ max-width:44ch }
.fh-text .eyebrow{ color:#FFFFFF; opacity:.72; margin-bottom:10px }
.fh-text p{
  margin:0; font-family:var(--font-head); font-weight:500;
  font-size:clamp(1.18rem,.95rem+1.1vw,1.62rem); line-height:1.35;
  letter-spacing:-.015em; color:#FFFFFF;
}

/* Porträtkarte: Bild oben, Angaben darunter, Nummer als Abschluss. */
.person-foto{ margin:0 0 18px }
.person-foto img{
  display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover;
  object-position:center 22%; border:1px solid var(--line); background:var(--sand-2);
}
.person-tel{
  display:block; margin-top:14px; padding-top:14px; border-top:1px solid var(--line);
  font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-weight:700;
  font-size:1.05rem; color:var(--accent-ink); text-decoration:none;
}
.person-tel:hover{ color:var(--accent-3) }

@media (max-width:860px){
  .bild-neben{ grid-template-columns:1fr; gap:18px }
  .foto-hintergrund{
    /* Kleinere Quelle aufs Handy: das große Bild ist hier reine Fracht. */
    --fh-bild:url("../img/schluessel-papiere-sm.webp?v=1786566270");
    background-image:
      linear-gradient(180deg, rgba(15,18,21,.72) 0%, rgba(15,18,21,.90) 100%),
      var(--fh-bild);
  }
  .fh-text{ max-width:none }
}

/* ============================================================
   STANDORT + KENNZAHLEN (ein Block statt zwei Bänder)
   Die Zahlen stehen jetzt in einer 2×2-Matrix neben dem Standortfoto, und
   jede trägt ihre Definition. Vier Ziffern in einer Reihe lasen sich wie ein
   Werbebanner; mit Erklärung darunter sind sie prüfbare Angaben.
   ============================================================ */
.standort-zahlen{ padding:var(--raum-sektion) 0 }
.sz-raster{
  display:grid; grid-template-columns:minmax(0,0.86fr) minmax(0,1.14fr);
  gap:clamp(22px,3.4vw,48px); align-items:start;
}
.sz-bild{ position:sticky; top:calc(var(--kopf-h,72px) + 18px) }
.sz-bild img{ aspect-ratio:3/2; object-fit:cover }
.sz-bild figcaption b{ color:var(--ink); font-weight:600 }

.sz-zahlen > .eyebrow{ display:block; margin-bottom:8px }
.sz-zahlen h2{ margin:0 0 20px; font-size:clamp(1.35rem,1rem+1.5vw,1.95rem) }
.sz-zahlen .tlink{ display:inline-block; margin-top:18px }

/* 2×2 statt einer Reihe aus vier: so bleibt Platz für den Erklärsatz. */
.sz-zahlen .kz-raster{ grid-template-columns:repeat(2,minmax(0,1fr)) }
.sz-zahlen .kz{ padding:18px 20px 20px; display:flex; flex-direction:column }
/* Zahl zuerst, Bezeichnung darunter — dd steht im Quelltext vor dt, damit die
   Reihenfolge auch ohne CSS stimmt und Vorlesesoftware sie so ausgibt. */
.sz-zahlen .kz dd{ order:1; margin:0 0 6px; align-items:baseline }
.sz-zahlen .kz dd b{ font-size:clamp(1.9rem,1.4rem+1.4vw,2.5rem) }
.sz-zahlen .kz dt{ order:2; margin:0 0 9px; text-transform:none;
  font-family:var(--font-body); font-size:.9rem; font-weight:600;
  letter-spacing:-.01em; color:var(--ink); }
.sz-zahlen .kz p{ order:3; margin:0; padding-top:9px; border-top:1px solid var(--line);
  font-size:.82rem; line-height:1.55; color:var(--ink-2) }

@media (max-width:900px){
  .sz-raster{ grid-template-columns:1fr; gap:22px }
  .sz-bild{ position:static }
}
@media (max-width:520px){
  .sz-zahlen .kz-raster{ grid-template-columns:1fr }
}

/* ============================================================
   PRÜFLISTE — Grunddaten als Fußzeile
   Identität und Laufleistung sind Pflichtprogramm und stehen deshalb nicht
   mehr als eigene Karten oben, sondern gesammelt unter der Liste.
   ============================================================ */
.check-haupt{ display:flex; flex-direction:column; gap:14px }
.check-basis{
  padding:14px 18px; background:var(--sand-2); border-left:3px solid var(--line-2);
  font-size:.88rem; line-height:1.6; color:var(--ink-2);
}
.check-basis b{ color:var(--ink) }

/* Die drei Punkte, an denen ein Kauf im Katalog hängt. */
.katalog-punkte{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px }
.katalog-punkte li{
  position:relative; padding-left:19px; font-size:.88rem; line-height:1.55; color:var(--ink-2);
}
.katalog-punkte li::before{
  content:""; position:absolute; left:0; top:.52em;
  width:7px; height:7px; background:var(--accent);
}
.katalog-punkte b{ color:var(--ink) }

/* ============================================================
   KONTAKT — kompakter, und die Maschinensuche
   Das Formular war zu groß: volle Feldhöhe, große Abstände, dazu eine
   Kartenspalte, die sich danebendrängte. Felder und Zwischenräume sind
   jetzt enger, die linke Spalte schmaler.
   ============================================================ */
.kt-raster{ grid-template-columns:minmax(0,292px) minmax(0,1fr); gap:22px }
.kt-karte{ padding:15px 17px 17px }
.kt-marke{ margin-bottom:10px }
.kt-form-koerper{ padding:18px }
.anfrage .feld{ margin:0 0 12px }
.anfrage .feld-zeile{ gap:10px; margin:0 0 12px }
.anfrage label{ margin-bottom:4px; font-size:.85rem }
.anfrage input, .anfrage select, .anfrage textarea{ padding:7px 10px; font-size:.92rem }
.anfrage textarea{ min-height:84px }
.anfrage .weiche label{ padding-top:.55em; padding-bottom:.55em; font-size:.9rem }
.anf-satz{ margin:0 0 14px }
.kt-abschluss{ margin-top:15px; padding-top:14px }
.kt-position{ padding:10px 12px; margin:0 0 15px }

/* Telefon und E-Mail mit Symbol — zwei Zeilen, die man sofort unterscheidet. */
.kt-tel{ display:flex; align-items:center; gap:9px }
.kt-ic{ width:17px; height:17px; flex:none; color:var(--ink-3) }
.kt-tel .kt-ic{ color:var(--accent) }
.kt-tel-zeit{ margin:5px 0 12px; padding-left:26px }
.kt-mail{ gap:9px }

/* Das Foto ersetzt das Monogramm; quadratisch wie die Logo-Platte. */
img.kt-avatar{ width:56px; height:56px; object-fit:cover; object-position:center 18%;
  border:1px solid var(--line); background:var(--sand-2) }

/* --- Maschinensuche ------------------------------------------------------- */
.ms-feld{ position:relative }
.ms-marken{ list-style:none; margin:0 0 8px; padding:0; display:flex; flex-wrap:wrap; gap:6px }
.ms-marke{
  display:inline-flex; align-items:center; gap:8px;
  padding:5px 6px 5px 9px; background:var(--accent-soft);
  border:1px solid var(--line-2); font-size:.84rem; max-width:100%;
}
.ms-marke-nr{ font-family:var(--font-mono); font-size:.72rem; color:var(--accent-ink) }
.ms-marke-name{ color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.ms-marke-weg{
  flex:none; width:20px; height:20px; display:grid; place-items:center;
  border:0; background:transparent; color:var(--ink-3); cursor:pointer;
  font-size:1.05rem; line-height:1; border-radius:0;
}
.ms-marke-weg:hover{ background:var(--ink); color:#FFFFFF }
.ms-marke-weg:focus-visible{ outline:2px solid var(--accent); outline-offset:1px }

.ms-liste{
  list-style:none; margin:2px 0 0; padding:0; position:absolute; z-index:30;
  left:0; right:0; max-height:274px; overflow-y:auto;
  background:var(--paper-2); border:1px solid var(--line-kontrast);
  box-shadow:0 10px 26px rgba(20,22,20,.13);
}
.ms-treffer{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px;
  padding:9px 12px; cursor:pointer; border-bottom:1px solid var(--line);
}
.ms-treffer:last-child{ border-bottom:0 }
.ms-treffer-aktiv{ background:var(--accent-soft) }
.ms-treffer-nr{ font-family:var(--font-mono); font-size:.72rem; color:var(--accent-ink) }
.ms-treffer-text{ min-width:0 }
.ms-treffer-text b{ display:block; font-size:.92rem; font-weight:600; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.ms-treffer-klein{ display:block; font-size:.76rem; color:var(--ink-2) }
.ms-treffer-preis{ font-family:var(--font-mono); font-size:.8rem; color:var(--ink-2); white-space:nowrap }
.ms-mehr{ padding:8px 12px; font-size:.78rem; color:var(--ink-3); background:var(--sand-2) }

@media (max-width:900px){
  .kt-raster{ grid-template-columns:1fr }
}

/* Eigene display-Werte hebeln das hidden-Attribut aus — der Browser-Standard
   [hidden]{display:none} verliert gegen jede spätere display-Regel. Ohne diese
   zwei Zeilen belegt eine leere Markenzeile dauerhaft Platz. */
.ms-marken[hidden], .ms-liste[hidden]{ display:none }
.ms-box{ position:relative }
.ms-liste{ top:100%; margin-top:2px }

/* ============================================================
   ABLAUF-SCHRITTE — Matrix statt schwebender Textspalten
   Vorher: sechs Textblöcke unter einer Haarlinie, deren Höhen frei
   auseinanderliefen. Ein langer Schritt neben einem kurzen ließ die Zeile
   ausgefranst aussehen, und die Verbindungslinie oben hing über dem Text,
   ohne ihn zu fassen.

   Jetzt dieselbe Bauweise wie die Kennzahlen: gleich hohe Zellen, 1 px
   Haarlinie dazwischen, Nummer und Marke in einem eigenen Kopf. Das Raster
   trägt die Ordnung — es braucht dafür keine gezeichnete Linie.
   ============================================================ */
.ablauf-schritte{
  list-style:none; margin:26px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.schritt{
  background:var(--paper-2); padding:19px 21px 21px;
  display:flex; flex-direction:column;
  transition:background .2s var(--ease);
}
.schritt:hover{ background:var(--sand) }

.schritt-kopf{
  display:flex; align-items:baseline; gap:11px;
  padding-bottom:11px; margin-bottom:12px; border-bottom:1px solid var(--line);
}
.schritt-nr{
  font-family:var(--font-mono); font-variant-numeric:tabular-nums;
  font-size:1.5rem; font-weight:700; line-height:1; letter-spacing:-.045em;
  color:var(--accent);
}
.schritt-marke{
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3);
}
.schritt h3{ margin:0 0 8px; font-size:1.06rem; line-height:1.28 }
.schritt p{ margin:0; font-size:.9rem; line-height:1.62; color:var(--ink-2) }
.schritt p b{ color:var(--ink) }

@media (max-width:1080px){ .ablauf-schritte{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:640px){
  .ablauf-schritte{ grid-template-columns:1fr }
  .schritt{ padding:16px 17px 18px }
  .schritt-nr{ font-size:1.3rem }
}

/* Erscheinen: nur überblenden. Die allgemeine Stagger-Regel schiebt um 22 px
   nach oben — bei aneinandergrenzenden Zellen sieht man dabei die Fugen
   aufreißen. */
@media (prefers-reduced-motion:no-preference){
  html.js .ablauf-schritte.stagger>*{ transform:none; transition:opacity .36s ease }
  html.js .ablauf-schritte.stagger.in>*{ transition-delay:0s }
  html.js .ablauf-schritte.stagger.in>*:nth-child(2){ transition-delay:.06s }
  html.js .ablauf-schritte.stagger.in>*:nth-child(3){ transition-delay:.12s }
  html.js .ablauf-schritte.stagger.in>*:nth-child(4){ transition-delay:.18s }
  html.js .ablauf-schritte.stagger.in>*:nth-child(5){ transition-delay:.24s }
  html.js .ablauf-schritte.stagger.in>*:nth-child(6){ transition-delay:.30s }
}

/* Hinweis, wenn der Termin wegen eines Feiertags eine Woche später liegt —
   sonst liest sich das angezeigte Datum wie ein Widerspruch zur Regel. */
.termin-abweichung{
  display:block; margin-top:4px; font-size:.8rem; color:var(--ink-3);
}

/* ============================================================
   ANSPRECHPARTNER-KARTE — Foto trägt die Karte
   Vorher ein 56-px-Kästchen neben dem Namen. Bei Insolvenzware ist die erste
   Frage des Käufers, ob am anderen Ende ein Mensch sitzt — dafür war es zu
   klein. Jetzt volle Kartenbreite, Angaben darunter.
   ============================================================ */
.kt-person-karte{ padding:0; overflow:hidden }
.kt-person-bild{ margin:0 }
.kt-person-bild img{
  display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover;
  object-position:center 18%; background:var(--sand-2);
}
.kt-person-koerper{ padding:15px 17px 17px }
.kt-person-koerper .kt-marke{ margin-bottom:9px }
.kt-person-koerper .kt-person-text b{ font-size:1.05rem }

/* Auf dem Handy steht die Karte unter dem Formular — dort reicht ein Streifen,
   sonst schiebt ein hochformatiges Foto den Rest aus dem Bild. */
@media (max-width:900px){
  .kt-person-bild img{ aspect-ratio:16/7; object-position:center 22% }
}

/* Dritte Weichen-Option: drei Beschriftungen brauchen mehr Zeilenluft als zwei. */
.anfrage .weiche-3 label{ font-size:.85rem; line-height:1.25 }

/* ============================================================
   BILDER IM TEXTFLUSS — halbe Breite statt Bildschirmbreite
   Techets Muster, live gemessen: ein Existenzbeleg gross (rund 80 % der
   Spalte) mit Bildunterschrift, Nebenbilder bei 35 bis 40 %. Ohne Obergrenze
   drueckt sonst jedes Foto den Text auseinander.
   ============================================================ */
.bild-halb{ max-width:480px; margin:0 0 clamp(20px,2.6vw,30px) }
.bild-schmal{ max-width:420px; margin:0 0 22px }
.bild-halb img, .bild-schmal img{ aspect-ratio:3/2; object-fit:cover }

/* Bewusst KEIN float: neben einem Grid (Kartenraster, zwei-spalten) quetscht
   ein gefloatetes Bild die Spalten zusammen, bis Überschriften mitten im Wort
   umbrechen. Ein Block mit Obergrenze macht denselben Dienst ohne den Ärger. */
@media (max-width:1000px){
  .bild-halb, .bild-schmal{ max-width:100% }
}

/* ============================================================
   HERO MIT FOTO-HINTERGRUND
   Techet loest den Einstieg mit einem weichen Verlauf, ohne Foto. Hier steht
   ein Foto dahinter, weil bei einer 2024 gegruendeten Firma der Ort das
   wichtigste Argument ist. Bedingung: Der Verlauf muss die Schrift tragen, und
   zwar auf JEDEM Ausschnitt, sonst steht die Ueberschrift irgendwann auf einer
   hellen Hallendecke. Deshalb deckt er links kraeftig und laeuft nach rechts aus,
   wo der Bestandskasten ohnehin eine eigene Flaeche mitbringt.
   ============================================================ */
.hero{ position:relative; isolation:isolate }
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(260deg,
      color-mix(in srgb, var(--paper) 74%, transparent) 0%,
      color-mix(in srgb, var(--paper) 58%, transparent) 30%,
      color-mix(in srgb, var(--paper) 52%, transparent) 55%,
      color-mix(in srgb, var(--paper) 66%, transparent) 80%,
      color-mix(in srgb, var(--paper) 82%, transparent) 100%),
    url("../img/hero-halle.webp?v=1786571243");
  background-size:cover;
  background-position:60% 50%;
  background-repeat:no-repeat;
  /* Spiegelung: bringt den Bagger von rechts (hinter der Bestandskarte) nach
     links in den freien Streifen. Der Verlauf ist mitgespiegelt, deshalb steht
     er auf 260grad statt 100grad und deckt weiterhin die Textseite staerker. */
  transform:translateZ(0) scaleX(-1);
}

/* Die Schrift im Hero traegt den Kontrast selbst, damit der Verlauf duenn
   bleiben darf. Ohne diese zwei Zeilen muesste das Foto zugedeckt werden. */
.hero .sub{ color:var(--ink) }
.hero .badge{ background:var(--paper-2); border-color:var(--line-2) }
/* Auf schmalen Geraeten liegt der Text ueber der ganzen Breite, dort muss der
   Verlauf senkrecht decken statt seitlich. */
@media (max-width:900px){
  .hero::after{
    background-image:
      linear-gradient(180deg,
        var(--paper) 0%, var(--paper) 30%,
        color-mix(in srgb, var(--paper) 88%, transparent) 55%,
        color-mix(in srgb, var(--paper) 74%, transparent) 100%),
      url("../img/hero-halle-sm.webp?v=1786571243");
    background-position:center 55%;
  }
}
@media (prefers-reduced-transparency: reduce){
  .hero::after{ background-image:none }
}

/* Das FAQ-Band nutzt das aeltere Schluesselbild. */
.fh-faq{ --fh-bild:url("../img/papiere-schluessel.webp?v=1786389341") }
@media (max-width:860px){ .fh-faq{ --fh-bild:url("../img/papiere-schluessel-sm.webp?v=1786389341") } }

/* Weitere Foto-Bänder. Jedes bekommt sein eigenes Bild über die Variable,
   den Verlauf und die Schriftfarbe erbt es vom gemeinsamen .foto-hintergrund. */
.fh-halle{ --fh-bild:url("../img/halle-bestand.webp?v=1786389341"); background-position:center 34% }
.fh-auftrag{ --fh-bild:url("../img/mandat-uebergabe.webp?v=1786566269") }
.fh-glaeubiger{ --fh-bild:url("../img/glaeubigerliste.webp?v=1786566271") }
@media (max-width:860px){
  .fh-halle{ --fh-bild:url("../img/halle-bestand-sm.webp?v=1786389341") }
  .fh-auftrag{ --fh-bild:url("../img/mandat-uebergabe-sm.webp?v=1786566269") }
  .fh-glaeubiger{ --fh-bild:url("../img/glaeubigerliste-sm.webp?v=1786566271") }
}
/* HOF-BAND — das Foto vollständig statt angeschnitten
   Auf dem Bild stehen acht Leute über die ganze Breite und darüber das
   Hallenschild. Als Hintergrundband (background-size:cover) fiel bei jedem
   Zuschnitt etwas davon weg: entweder das Schild oben oder die Beine unten.
   Deshalb steht das Foto hier als echtes Bild in seinem eigenen Format, auf
   höchstens 1400 px (die Größe der Datei) begrenzt und auf dunklem Grund
   zentriert. Der Text liegt darunter im Bild, mit Verlauf von unten. */
.hof-band{ background:#0F1215; color:#FFFFFF }
.hof-rahmen{ position:relative; max-width:1400px; margin:0 auto }
.hof-bild{ display:block; width:100%; height:auto }
.hof-text{
  position:absolute; left:0; right:0; bottom:0;
  padding:clamp(58px,7vw,96px) var(--gutter) clamp(18px,2.4vw,30px);
  background:linear-gradient(0deg, rgba(15,18,21,.94) 0%, rgba(15,18,21,.80) 38%, rgba(15,18,21,0) 100%);
}
.hof-text .eyebrow{ display:block; color:#FFFFFF; opacity:.74; margin-bottom:8px }
.hof-text p{
  margin:0; max-width:62ch; color:#FFFFFF;
  font-family:var(--font-head); font-weight:500;
  font-size:clamp(1.02rem,.9rem+.7vw,1.42rem); line-height:1.35; letter-spacing:-.015em;
}
/* Auf dem Handy wird der Text unter das Bild gesetzt: Über dem Foto deckt er
   sonst die halbe Gruppe zu. */
@media (max-width:700px){
  .hof-text{ position:static; background:none; padding:18px var(--gutter) 26px }
}
.hof-band + .sektion.pt0{ padding-top:clamp(46px,6vw,84px) }
/* Der Handschlag sitzt mittig im Bild, das Schild links unten. Ohne eigene
   Position schneidet der Verlauf beides weg. */
.fh-auftrag{ background-position:center 38% }
.fh-glaeubiger{ background-position:center 55% }

/* ============================================================
   KENNZAHLEN ALS SYMBOLLISTE
   Die 2×2-Matrix mit Riesenziffern las sich wie ein Werbebanner. Das Muster,
   das auf dieser Seite funktioniert, steht direkt darüber: Symbol, kurzer
   Satz, fertig. Die Zahl steht jetzt im Text statt in 40 px Schrift.
   ============================================================ */
.kz-liste{ list-style:none; margin:0; padding:0; display:grid; gap:16px }
.kz-liste li{
  display:grid; grid-template-columns:auto 1fr; gap:13px; align-items:center;
  padding-bottom:15px; border-bottom:1px solid var(--line);
}
.kz-liste li:last-child{ border-bottom:0; padding-bottom:0 }
.kz-liste svg{ width:21px; height:21px; flex:none; color:var(--accent) }
.kz-liste b{ display:block; font-size:1.02rem; letter-spacing:-.01em; color:var(--ink) }
.kz-liste span{ display:block; margin-top:4px; font-size:.87rem; line-height:1.55; color:var(--ink-2) }

/* ============================================================
   SAMMELBESICHTIGUNG: Ablauf, Fakten, Eintragung, Lageplan
   Vorher standen hier zwei Hakenlisten (»Was Sie mitbringen« / »Was vor Ort
   geht«), die jeder Verwerter so schreiben könnte. Ersetzt durch das, was man
   vor der Abfahrt tatsächlich wissen muss.
   ============================================================ */
.bes-raster{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.bes-punkt{ background:var(--paper-2); padding:17px 19px 19px }
.bes-nr{
  display:block; font-family:var(--font-mono); font-variant-numeric:tabular-nums;
  font-size:1.35rem; font-weight:700; line-height:1; color:var(--accent);
  margin-bottom:9px;
}
.bes-punkt h3{ margin:0 0 7px; font-size:1rem; line-height:1.3 }
.bes-punkt p{ margin:0; font-size:.87rem; line-height:1.55; color:var(--ink-2) }

/* Die vier Angaben, nach denen am Telefon gefragt wird. */
.bes-fakten{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px;
  margin:0; background:var(--line-2); border:1px solid var(--line-2);
}
.bes-fakten > div{ background:var(--sand-2); padding:13px 15px }
.bes-fakten dt{
  font-family:var(--font-mono); font-size:.64rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:5px;
}
.bes-fakten dd{ margin:0; font-size:.94rem; font-weight:600; color:var(--ink) }

/* --- Eintragung --- */
.bes-anmeldung{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(22px,3vw,44px); align-items:start;
  background:var(--paper-2); border:1px solid var(--line); padding:clamp(20px,2.6vw,32px);
}
.ba-text h2{ margin:6px 0 10px; font-size:clamp(1.3rem,1rem+1.3vw,1.8rem) }
.ba-text p{ color:var(--ink-2); margin:0 0 16px }
.ba-haken{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px }
.ba-haken li{ display:flex; align-items:flex-start; gap:9px; font-size:.87rem; line-height:1.45; color:var(--ink-2) }
.ba-haken svg{ width:15px; height:15px; flex:none; margin-top:2px; color:var(--accent) }
.ba-form{ margin:0 }
.ba-termin{
  margin:0 0 15px; padding:9px 12px; background:var(--accent-soft);
  border-left:3px solid var(--accent); font-size:.88rem; color:var(--ink);
}
.ba-form .feld{ margin:0 0 12px }
.ba-form .feld-zeile{ display:grid; grid-template-columns:1fr 1fr; gap:11px; margin:0 0 12px }
.ba-form .feld-zeile .feld{ margin:0 }
.ba-form label{ display:block; margin-bottom:4px; font-size:.85rem; font-weight:500 }
.ba-form input, .ba-form select{ width:100%; padding:8px 10px; font-size:.93rem }
.ba-form .btn{ width:100%; margin-top:2px }
.ba-form .hilfe{ margin-top:9px; font-size:.8rem; color:var(--ink-3) }

/* --- Lageplan: Skizze, keine Landkarte --- */
.lageplan{ margin:0 0 18px }
.lageplan svg{ display:block; width:100%; height:auto; border:1px solid var(--line); background:var(--paper-2) }
.lageplan figcaption{ margin-top:9px; font-size:.83rem; line-height:1.5; color:var(--ink-3) }
.lp-grund{ fill:var(--paper-2) }
.lp-strasse{ stroke:var(--line-2); stroke-width:12; fill:none }
.lp-einfahrt{ stroke:var(--line-2); stroke-width:8; fill:none; stroke-dasharray:6 5 }
.lp-hof{ fill:var(--sand-2); stroke:var(--line); stroke-width:1 }
.lp-halle{ fill:var(--accent); stroke:var(--accent-2); stroke-width:1 }
.lp-tor{ fill:var(--paper-2) }
.lp-halle-text{ fill:#FFFFFF; font-family:var(--font-head); font-size:15px; font-weight:600 }
.lp-beschriftung{ fill:var(--ink-2); font-family:var(--font-mono); font-size:8.5px; letter-spacing:.06em }
.lp-hell{ fill:rgba(255,255,255,.82) }

@media (max-width:1000px){
  .bes-raster{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .bes-fakten{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .bes-anmeldung{ grid-template-columns:1fr }
}
@media (max-width:560px){
  .bes-raster{ grid-template-columns:1fr }
  .bes-fakten{ grid-template-columns:1fr }
  .ba-form .feld-zeile{ grid-template-columns:1fr }
}

/* Zuletzt verkauft: kleiner Abschluss im Bestandskasten. Bewusst gedämpft,
   damit er die verfügbaren Positionen darüber nicht überstrahlt. */
.hb-verkauft{ margin-top:13px; padding-top:12px; border-top:1px solid var(--line) }
.hb-verkauft-marke{
  display:block; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:8px;
}
.hb-verkauft ul{ list-style:none; margin:0; padding:0; display:grid; gap:6px }
.hb-verkauft li{
  display:grid; grid-template-columns:auto 1fr auto; gap:9px; align-items:baseline;
  font-size:.82rem; color:var(--ink-3);
}
.hv-nr{ font-family:var(--font-mono); font-size:.72rem; color:var(--ink-3) }
.hv-name{ color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.hv-datum{ font-family:var(--font-mono); font-size:.74rem; white-space:nowrap }

/* Legende für die Terminreihe, wenn sie ohne eigenen Kopf läuft: Ohne sie
   stehen dort nur graue Balken ohne Bedeutung. */
.zl-legende{
  margin:0 0 14px; font-size:.85rem; color:var(--ink-2);
}


/* Familiengeschichte neben den belegten Zahlen: eigener Grund, damit man sieht,
   dass hier erzaehlt und nicht belegt wird. */
.gesch-familie{
  background:var(--sand); border-left:3px solid var(--accent);
  padding:24px 26px; align-self:start;
}
.gesch-familie h3{
  margin:0 0 12px; font-family:var(--font-mono); font-weight:500;
  font-size:.72rem; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3);
}
.gesch-familie p{ margin:0 0 14px; font-size:.95rem; line-height:1.62 }
.gesch-familie p:last-child{ margin-bottom:0 }


/* Aufforderung unter den Fragen. Bewusst ruhig: kein Kasten in Signalfarbe,
   sondern eine abgesetzte Flaeche mit derselben Kante wie die Fragenliste. */
.faq-fragen{
  display:grid; gap:20px; align-items:center;
  background:var(--sand); border-top:2px solid var(--accent);
  padding:26px 28px;
}
.faq-fragen h2{ margin:0 0 8px; font-size:clamp(1.15rem,1rem+.6vw,1.45rem) }
.faq-fragen p{ margin:0; color:var(--ink-2); font-size:.95rem; line-height:1.6; max-width:60ch }
.faq-fragen-tat{ display:flex; flex-wrap:wrap; align-items:center; gap:14px }
@media (min-width:820px){
  .faq-fragen{ grid-template-columns:1fr auto; gap:34px }
  .faq-fragen-tat{ justify-content:flex-end }
}


/* ============================================================ COOKIE-HINWEIS
   Unten mittig, schmal, nicht modal: Die Seite ist bedienbar, während er steht.
   Ein Vollbild-Overlay wäre für einen Satz ohne Wahlmöglichkeit übergriffig.
   Mittig statt in der Ecke, weil er sonst über der linken Spalte des Bestands
   klebt und dort Karten verdeckt. */
.cookie-zeile{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:130;
  margin-inline:auto;
  display:flex; flex-wrap:wrap; align-items:center; gap:14px;
  max-width:640px; padding:16px 18px;
  background:var(--paper); border:1px solid var(--line-2);
  box-shadow:0 10px 30px rgba(20,24,20,.14);
  opacity:0; transform:translateY(10px);
  transition:opacity .22s ease, transform .22s ease;
}
.cookie-zeile.ck-da{ opacity:1; transform:none }
.cookie-zeile[hidden]{ display:none }
.cookie-zeile p{
  margin:0; flex:1 1 260px; font-size:.86rem; line-height:1.5; color:var(--ink-2);
}
.cookie-zeile a{ color:var(--accent-ink) }
.cookie-zeile .btn-sekundaer{ flex:none }
@media (min-width:700px){
  /* Beide Seiten gleich weit weg + margin-inline:auto = mittig; die Breite
     deckelt weiterhin max-width, nicht die Ränder. */
  .cookie-zeile{ left:24px; right:24px; bottom:24px; flex-wrap:nowrap }
}
@media (prefers-reduced-motion: reduce){
  .cookie-zeile{ transition-duration:1ms }
}


/* ============================================================ TOUCH & KLEINE GERÄTE
   Zwei Dinge, die am Schreibtisch nie auffallen:

   1. Bei 320 px (iPhone SE, altes Android) passten Wortmarke und Menüknopf
      nicht nebeneinander. Der Knopf stand 30 px außerhalb des Fensters und war
      damit unerreichbar. Unter 400 px fällt deshalb die Unterzeile der Marke
      weg und der Menüknopf zeigt nur noch sein Symbol.

   2. Am Finger sind 26 px hohe Schaltflächen ein Glücksspiel. Alles, was man
      antippt, bekommt auf Tastgeräten mindestens 44 px Höhe. Fließtext-Links
      bleiben ausgenommen: Sie stehen mitten im Satz, dort wäre eine
      Vergrößerung sinnlos und würde die Zeilen auseinanderreißen. */
@media (max-width:400px){
  .brand .wm span{ display:none }
  .nav-burger-text{ display:none }
  .nav{ gap:8px; padding:0 12px }
  .brand{ min-width:0 }
  .brand .wm{ min-width:0 }
}

@media (pointer:coarse){
  .anker-nav a, .fchip, .view-toggle button{ padding-top:.55em; padding-bottom:.55em }

  /* Formularfelder: 44 px sind auch hier die Grenze, und 16 px Schriftgröße
     verhindern, dass iOS beim Antippen in das Feld hineinzoomt. */
  input:not([type=radio]):not([type=checkbox]), select, textarea{
    min-height:44px; font-size:16px;
  }
  textarea{ min-height:96px }
  .weiche label{ min-height:44px; display:inline-flex; align-items:center }
  .faq-item summary{ min-height:52px; display:flex; align-items:center }

  /* Fußzeile: die Linkliste wird zur Tippliste. Klassen heißen foot-*, nicht
     fuss-* — die falsche Schreibweise hätte hier still gar nichts bewirkt. */
  .foot-col a, .foot-kontakt a, .foot-recht a{ min-height:40px; display:inline-flex; align-items:center }

  /* Marke, Brotkrume, Kartenüberschriften und Kontaktlinks: keine Fließtext-
     Links, sondern eigenständige Ziele. Fließtext bleibt bewusst unangetastet,
     eine vergrößerte Zeile mitten im Satz reißt den Absatz auseinander. */
  .brand{ min-height:44px }
  .pfad a, .karte h3 a, .hv-name, .kp-wechsel{ display:inline-block; padding-block:5px }
  a[href^="tel:"], a[href^="mailto:"]{ display:inline-flex; align-items:center; min-height:44px }
  .kt-tel, .kt-mail{ min-height:48px }

  /* Kopfleiste ganz oben und die Vergleichstabelle: auch dort wird getippt. */
  .util-termin, .util-quartal, .util-tel, .util-bestand{
    min-height:44px; display:inline-flex; align-items:center;
  }

  /* Kartenüberschriften bleiben umbruchfähig, bekommen die Höhe deshalb über
     Innenabstand statt über inline-flex: ein zweizeiliger Modellname darf nicht
     in einer Zeile kleben. */
  .karte h3 a{ padding-block:11px }
  .pfad a{ padding-block:14px }

  /* Links, die allein in ihrer Zeile stehen (Protokollzeile, Nachsatz), sind
     Ziele wie jeder Knopf, auch wenn sie aussehen wie Text. */
  .protokoll dd a, .bes-fakten dd a, .termin-wo a, .klein > a:only-child, .hilfe > a:only-child{
    display:inline-flex; align-items:center; min-height:40px;
  }

  /* Panel: Reiter, Knöpfe und die aufklappbare Kundenkarte. */
  .pv-reiter-punkt, .pv-knopf, .pv-aufklapp, .pv-chip-knopf{
    min-height:44px; display:inline-flex; align-items:center;
  }
}


/* Platz für die schwebende Vergleichsleiste, damit sie nichts verdeckt. */

/* Stellenanzeigen: Die Chips (»Vollzeit oder Teilzeit ab 25 Stunden«) sind
   breiter als ein 320-px-Fenster. Ein Grid-Kind darf per Voreinstellung nicht
   schmaler werden als sein breitester Inhalt, dadurch schob die Karte zwei
   Pixel über den Rand. min-width:0 hebt genau das auf. */
.stellen > *{ min-width:0 }
.stelle-meta .chip{ white-space:normal }
@media (max-width:400px){
  .stelle{ padding:20px 16px }
}


/* ============================================================ OBJEKTFOTOS
   Erst mit echten Aufnahmen sichtbar; ohne Fotos bleibt der Platzhalter, der
   schon vorher hier stand. */
/* Feste Bildflaeche, und zwar aus einem handfesten Grund: Die Aufnahmen einer
   Position haben sehr verschiedene Seitenverhaeltnisse - von 1400x689 (Seiten-
   ansicht) bis 1400x1675 (Hochformat-Detail). Mit height:auto aenderte sich beim
   Bildwechsel die Hoehe des Hauptbilds, und der Streifen mit den Miniaturen
   sprang um bis zu 613 px nach unten. Wer auf die dritte Miniatur zielte, traf
   danach das Hauptbild - und oeffnete die Lightbox mit dem VORHERIGEN Foto.
   Genau das war der gemeldete "das falsche Bild"-Fehler (40 Fehlklicks in 128
   Versuchen). Mit fester Flaeche und object-fit:contain steht der Streifen
   still, und jedes Foto ist vollstaendig zu sehen. */
.galerie-haupt{
  position:relative; aspect-ratio:3/2; overflow:hidden;
  background:var(--sand); display:grid; place-items:center;
}
.galerie-bild{
  display:block; width:100%; height:100%; object-fit:contain; cursor:zoom-in;
  background:var(--sand);
  transition:opacity .18s var(--ease);
}
/* Waehrend das naechste Foto laedt, wird das alte gedaempft. Ohne das stand es
   bei langsamer Verbindung bis zu zwei Sekunden weiter scharf im Bild, obwohl
   die Miniatur darunter schon die naechste Ansicht markierte. */
.galerie-haupt.laedt .galerie-bild{ opacity:.38 }
/* Blätterpfeile: liegen im Bild, nicht daneben - das Bild ist die Flaeche, auf
   die der Nutzer ohnehin zeigt. Sie sind dauerhaft sichtbar (auf dem Handy gibt
   es kein Hover, und wer sie erst suchen muss, benutzt sie nicht) und dunkel
   hinterlegt, damit sie auf hellen wie dunklen Fotos stehen. */
.galerie-pfeil{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:56px; display:grid; place-items:center;
  border:0; padding:0; cursor:pointer;
  background:rgba(18,22,26,.62); color:#FFFFFF;
  font-size:1.9rem; line-height:1; font-family:var(--font-head);
  transition:background .15s var(--ease);
}
.galerie-pfeil:hover{ background:rgba(18,22,26,.86) }
.galerie-pfeil:focus-visible{ outline:2px solid #FFFFFF; outline-offset:-4px }
.galerie-zurueck{ left:0 }
.galerie-vor{ right:0 }
/* Zähler unten links, gegenüber der Lupe-Beschriftung. */
.galerie-zaehler{
  position:absolute; left:12px; bottom:12px; pointer-events:none;
  background:#12161A; color:#FFFFFF;
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.05em;
  padding:6px 10px;
}
@media (max-width:600px){
  .galerie-pfeil{ width:38px; height:48px; font-size:1.5rem }
  .galerie-zaehler{ left:8px; bottom:8px }
}
.galerie-lupe{
  position:absolute; right:12px; bottom:12px; pointer-events:none;
  background:#12161A; color:#FFFFFF;
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.05em;
  padding:6px 10px;
}
.galerie-thumb-bild{
  padding:0; border:1px solid var(--line-2); border-radius:0;
  background:none; line-height:0; overflow:hidden;
}
.galerie-thumb-bild img{ display:block; width:96px; height:72px; object-fit:cover }
/* Aktives Bild: kraeftiger Rahmen statt Leuchtrand. Der Schatten lief unter
   den Nachbarn durch und sah aus wie ein blauer Fleck. */
.galerie-thumb-bild[aria-pressed="true"]{ border:2px solid var(--accent); box-shadow:none }
.galerie-thumb-bild[aria-pressed="true"] img{ opacity:1 }
.galerie-thumb-bild img{ opacity:.72; transition:opacity .2s var(--ease) }
.galerie-thumb-bild:hover img{ opacity:1 }
.karte-bild-link{ position:absolute; inset:0; display:block; line-height:0 }
.karte-bild-link img{ width:100%; height:100%; object-fit:cover; display:block }
@media (pointer:coarse){
  .galerie-thumb-bild{ min-height:0 }
  .galerie-thumb-bild img{ width:110px; height:82px }
}

/* Liegt ein echtes Foto auf der Karte, sind die Platzhalter-Beschriftungen im
   Weg: Die grosse Objektnummer war fuer die leere Flaeche gedacht, und der
   Foto-Zaehler stand ohne Grund weiss auf hellem Himmel. */
.karte-bild-link ~ .karte-no{ display:none }
.karte-bild-link ~ .karte-fotos{
  background:#12161A; color:#FFFFFF; padding:5px 9px;
  font-family:var(--font-mono); font-size:.64rem; letter-spacing:.04em;
}

/* ============================================================ GANZE KARTE KLICKBAR
   Vorher fuehrten nur die Ueberschrift und »Akte« in die Position. Wer auf das
   Bild tippte (der groesste Teil der Karte), landete nirgends. Der Trick ist
   ein unsichtbares Feld ueber der ganzen Karte, das an der Ueberschrift haengt:
   So bleibt genau EIN Link im Dokument, Screenreader und Tastatur behalten die
   gewohnte Reihenfolge, und die Karte selbst wird nicht zum Link-Ungetuem. */
.karte h3 a::after{
  content:""; position:absolute; inset:0; z-index:1;
}
/* Alles, was selbst anklickbar ist, muss ueber dieses Feld. */
.karte .karte-anfrage,
.karte .chip,
.karte .karte-fotos{ position:relative; z-index:2 }
/* Der Bildlink bleibt absolut ueber der ganzen Bildflaeche. Haette er hier
   position:relative bekommen, waere aus dem fuellenden Foto ein 96 px hoher
   Streifen mitten im Platzhalter geworden. */
.karte .karte-bild-link{ z-index:2 }
/* Der Zeigefinger soll ueber der ganzen Karte erscheinen, nicht nur ueber dem Text. */
.karte{ cursor:pointer }
.karte h3 a{ position:static }

/* Liegt ein Foto auf der Karte, ist die Kategorie-Marke darauf doppelt: Sie
   steht zwei Zeilen tiefer noch einmal im Kartenkoerper. Auf dem Bild bleiben
   nur die Zustandsmarken, die es sonst nirgends gibt. */
.karte-bild:has(.karte-bild-link) .ph-tag{ display:none }

/* Der Foto-Zaehler stand mittig auf der Platzhalterflaeche. Auf einem echten
   Foto gehoert er in die Ecke, sonst liegt er dem Motiv im Gesicht. */
.karte-bild:has(.karte-bild-link) .karte-fotos{
  position:absolute; right:10px; bottom:10px; left:auto; top:auto; transform:none;
}

/* Ein Feld mit display:grid ueberstimmt das hidden-Attribut. Ohne diese Zeile
   blendet kein JavaScript der Welt es aus - derselbe Fehler wie damals bei der
   Markenzeile der Maschinensuche. */
.feld[hidden]{ display:none }


/* ============================================================ AKTE: ANFRAGE-AUFFORDERUNG
   Ersetzt das zweite Formular mitten in der Akte. Ein Weg, ein Formular. */
.akte-anfrage{
  display:grid; gap:18px; margin-top:26px;
  background:var(--sand); border-left:3px solid var(--accent);
  padding:22px 24px;
}
.akte-anfrage-titel{
  margin:0 0 6px; font-family:var(--font-head); font-weight:600; font-size:1.06rem; color:var(--ink);
}
.akte-anfrage .klein{ margin:0; max-width:56ch }
.akte-anfrage-tat{ display:flex; flex-wrap:wrap; align-items:center; gap:14px }
@media (min-width:760px){
  .akte-anfrage{ grid-template-columns:1fr auto; align-items:center; gap:28px }
}


/* ============================================================ KARTENBILD GROSS
   Die Bildflaeche schrumpfte auf 273 statt 355 px: aspect-ratio zusammen mit
   einer gedeckelten Hoehe laesst die Breite mitwandern. Mit width:100% legt die
   Breite die Hoehe fest, nicht umgekehrt. */
/* figure bringt vom Browser margin:1em 40px mit. Mit width:100% ragte die
   Bildflaeche dadurch 40 px nach rechts aus der Karte und wurde abgeschnitten:
   genau das »abgehackte« Bild. Margin raus, dann sitzt sie buendig. */
.karte-bild{ width:100%; align-self:stretch; margin:0 }

/* Weitere Ansichten als Miniaturen unten links auf dem Foto. */
.karte-mini{
  position:absolute; left:10px; bottom:10px; z-index:2;
  display:flex; gap:5px;
}
.karte-mini img{
  width:46px; height:35px; object-fit:cover; display:block;
  border:2px solid rgba(255,255,255,.9);
  box-shadow:0 2px 6px rgba(15,18,21,.35);
}
@media (max-width:520px){
  .karte-mini img{ width:40px; height:30px }
}

/* Nur fuer Vorleseprogramme: schliesst Ueberschriften-Luecken, ohne die
   Gestaltung zu veraendern. Nicht display:none - das waere fuer
   Vorleseprogramme ebenfalls weg. */
.nur-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}


/* ============================================================
   BEDIENUNG MIT DEM FINGER
   Auf dem Handy und dem Tablet gibt es keinen Mauszeiger: Was mit der Maus
   auf zwei Pixel genau zu treffen ist, wird mit dem Daumen zum Glücksspiel.
   Apple und Google nennen beide 44 px als Mindestmaß. Gemessen waren es:
   Menüknopf 26×32, »Akte →« 56×26 (67 Mal auf der Katalogseite), die
   Umschalter Kachel/Liste 37 px hoch. Deshalb hier eine eigene Runde für
   Zeigegeräte ohne Zeiger - am Aussehen auf dem Rechner ändert das nichts.
   ============================================================ */
@media (pointer: coarse) {
  .nav-burger{ min-width:44px; min-height:44px; justify-content:flex-end }
  /* »Akte →« ist auf der Karte der Weg in die Position. Er bekommt die volle
     Kartenbreite, damit man ihn nicht suchen muss. */
  .karte-anfrage{
    min-height:44px; display:inline-flex; align-items:center;
    padding:.5em .2em;
  }
  .view-toggle button,
  .karte-chips .chip{ min-height:44px; display:inline-flex; align-items:center }
  .galerie-thumb-bild{ min-height:44px }
  /* Filter, Sortierung und Suchfeld: dieselbe Mindesthöhe, sonst trifft man
     auf dem Handy die Auswahl daneben. */
  .filterleiste select,
  .filterleiste input,
  .filter-chip{ min-height:44px }
  /* Textlinks in den Abschnitten (»alle 67 ansehen«, »Über uns«, die Links im
     Cookie-Hinweis) und die beiden Knöpfe in der Akte lagen zwischen 16 und
     39 px. Auch die zählen als Bedienelement. */
  .hb-alle, .tlink,
  .btn-sekundaer,
  .ck-zeile a, .fuss-recht a{
    min-height:44px; display:inline-flex; align-items:center;
  }
}