/* ═══════════════════════════════════════════════════════════════════════
   ITAA-SYSTEM — Explosionszeichnung
   Ein Werkblatt. Drei Druckfarben plus das Licht, das die Geräte selbst
   abgeben. Warm ist immer emittiert, kalt ist immer unbestrahlt.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* Grund — Marke-Register: das Werkblatt */
  --werkblatt:#E8E9E1;
  --werkblatt-tief:#DEE0D6;
  --werkblatt-hoch:#F1F2EC;

  /* Grund — Shop-Register: das Lagerbuch, kühler und dichter */
  --laden:#D3D9CB;
  --laden-tief:#C6CDBD;

  /* Kammer — der Windkanal */
  --kammer:#12150F;
  --kammer-hoch:#1D211A;

  /* Eisentinte */
  --ink:#16181A;
  --ink-2:#4C514D;
  /* 5,7:1 auf dem Werkblatt, 4,8:1 auf dem Lagerbuch. Der vorige Wert
     (#6E736D) lag bei 3,4–4,0:1 und trug die gesamte Mono-Beschriftung —
     im dunklen Stall unlesbar. */
  --ink-3:#565B56;
  --ink-inv:#EDEFE8;

  /* Anreißlinien */
  --riss:#B2B7AC;
  --riss-fein:#C8CCC0;
  --riss-inv:#3A4036;

  /* Emittiert — die einzige Wärmequelle auf dieser Seite */
  --amber:#EA5B0C;
  --amber-lo:#FFB25C;
  --amber-ink:#9C3608;
  /* Barrierefreiheit (2026-09-24, D7.07). Weiße Schrift auf Amber erreicht
     3,5:1, verlangt sind 4,5:1 — die gefüllte Fläche unter weißer Schrift ist
     darum eine Stufe tiefer (4,9:1). Amber selbst bleibt, wo es leuchtet. */
  --amber-flaeche:#C24A08;
  /* Der Fokusring: Amber erreicht auf dem Werkblatt nur 2,9:1 (verlangt 3:1),
     auf dunklem Grund reicht es. Hell also die Tinte des Ambers (5,8:1). */
  --fokus:var(--amber-ink);

  /* Unbestrahlt */
  --kalt:#005899;
  --kalt-lo:#4C8FC4;

  /* Weide — der Gegenton des Lagerbuchs */
  --salbei:#6E7D65;

  --grund:var(--werkblatt);
  --grund-tief:var(--werkblatt-tief);

  --sp:clamp(1.15rem,.55rem + 2.4vw,2rem);
  --rand:clamp(1.15rem,.2rem + 4vw,4.5rem);
  --masse:min(1560px,100%);

  --schnell:180ms;
  --ruhig:520ms;
  --lang:2200ms;
  --daempfung:cubic-bezier(.16,1,.3,1);
}

[data-register="shop"]{ --grund:var(--laden); --grund-tief:var(--laden-tief); }
/* Auf dunklem Grund trägt Amber den Fokus (4,0–5,3:1), die Tinte nicht. */
.ankunft,.scharnier,.akt--dunkel,.kanal,.telefon,.aktschiene[data-grund="dunkel"]{--fokus:var(--amber)}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scrollbar-color:var(--riss) transparent;
  scrollbar-width:thin;
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  background:var(--grund);
  color:var(--ink);
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-variation-settings:"wdth" 100,"wght" 400;
  font-size:clamp(1rem,.94rem + .22vw,1.075rem);
  line-height:1.62;
  letter-spacing:.002em;
  transition:background-color var(--ruhig) var(--daempfung);
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

::selection{background:var(--amber-flaeche);color:#fff}
:focus-visible{
  outline:2px solid var(--fokus);
  outline-offset:3px;
  border-radius:0;
}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--riss);border:3px solid var(--grund)}
::-webkit-scrollbar-thumb:hover{background:var(--ink-3)}

img,svg,canvas{display:block;max-width:100%}
button,input,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em}

/* ── Satzarten ─────────────────────────────────────────────────────── */
.riss-schrift{
  font-family:"Azeret Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-variant-numeric:tabular-nums;
  font-size:.68rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--ink-2);
}
.mass{
  font-family:"Azeret Mono",ui-monospace,monospace;
  font-variant-numeric:tabular-nums;
  letter-spacing:.01em;
}
h1,h2,h3{
  font-variation-settings:"wdth" 116,"wght" 780;
  letter-spacing:-.028em;
  line-height:1.02;
  text-wrap:balance;
}
h1{font-size:clamp(2.05rem,1.2rem + 2.7vw,3.75rem)}
h2{font-size:clamp(1.85rem,1.1rem + 2.9vw,3.5rem)}
/* Der Seitentitel der Formular- und Textblätter ist seit 2026-09-24 ein h1
   (D7.07, WCAG 1.3.1 — 26 Seiten hatten keins). Er sieht aus wie das h2
   davor; jede Regel für `.blatt__kopf h2` gilt für ihn mit. */
.blatt__titel{font-size:clamp(1.85rem,1.1rem + 2.9vw,3.5rem)}
h3{font-size:clamp(1.15rem,.98rem + .72vw,1.55rem);font-variation-settings:"wdth" 108,"wght" 700;letter-spacing:-.018em;line-height:1.16}
p{max-width:68ch;text-wrap:pretty}
.lead{font-size:clamp(1.06rem,.98rem + .42vw,1.3rem);line-height:1.55;color:var(--ink-2);max-width:58ch}

.hilfe{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.sprung{
  position:fixed;top:0;left:0;z-index:200;padding:.7rem 1.1rem;
  background:var(--ink);color:var(--ink-inv);transform:translateY(-110%);
}
.sprung:focus{transform:none}

/* ── Blattkopf ─────────────────────────────────────────────────────── */
.blattkopf{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--grund) 88%,transparent);
  backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--riss);
  transition:background-color var(--ruhig) var(--daempfung);
}
.blattkopf__reihe{
  width:var(--masse);margin-inline:auto;padding:0 var(--rand);
  min-height:66px;
  display:flex;align-items:stretch;gap:var(--sp);
}
.marke{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex-shrink:0}
.marke__bild{height:31px;width:auto;display:block}
.marke__zeichen{display:none;height:30px;width:auto}
.marke__unter{
  font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  font-variation-settings:"wdth" 88,"wght" 500;white-space:nowrap;
  padding-left:.7rem;border-left:1px solid var(--riss);
}
@media (max-width:520px){
  .marke__bild{display:none}
  .marke__zeichen{display:block}
}

/* Hauptnavigation — die Lasche eines Werkblatts, keine Toggle-Pille.
   Fünf Ziele bei 1024 px, ohne Kopfregister seit dem 2026-09-21; seit dem
   2026-09-24 sechs, „Mietkauf" steht neben „Für Betriebe". */
.reiter{display:flex;align-self:flex-end;margin-left:auto;gap:2px}
.reiter__blatt{
  position:relative;
  padding:.62rem 1.15rem .6rem;
  font-variation-settings:"wdth" 92,"wght" 740;
  font-size:.86rem;letter-spacing:.005em;
  color:var(--ink);
  border:1px solid color-mix(in srgb,var(--ink) 38%,transparent);
  border-bottom:0;
  background:var(--grund-tief);
  transition:color var(--schnell) linear,background-color var(--schnell) linear;
  white-space:nowrap;
  text-decoration:none;
}
.reiter__blatt:hover{color:var(--amber-ink);background:var(--werkblatt-hoch)}
/* Kräftiger seit 2026-09-25 (Auftraggeber: „die Kacheln oben noch besser
   sichtbar oder eine dickere Schrift, das ist mir zu schwach"): volle
   Tinte statt --ink-3, 740 statt 620, sichtbare Kante, volle Fläche. */
/* Die zwei langen Reiter („Pferdesolarien-Auswahl", „Mietkauf für
   Gewerbetreibende") stehen zweizeilig. Bis 2026-09-26 wurden sie ab
   1540 px einzeilig; mit sieben Reitern bräuchte das rund 1.640 px und
   passt in keine Blattbreite mehr (--masse endet bei 1.560). Alle Laschen
   sind gleich hoch, die einzeiligen stehen mittig. */
.reiter__blatt{display:flex;flex-direction:column;justify-content:center;line-height:1.15;padding-inline:.95rem}
.reiter__zeile{display:block}

.kopf__rechts{display:flex;align-items:center;gap:1rem;margin-left:var(--sp);flex-shrink:0}
.werkstatt-tel{font-size:.78rem;color:var(--ink-2);text-decoration:none;white-space:nowrap}
.werkstatt-tel:hover{color:var(--amber-ink);text-decoration:underline}
.werkstatt-tel b{font-variation-settings:"wdth" 94,"wght" 640;display:block;font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
/* Fünf Ziele statt zwei brauchen mehr Platz als vorher — die Telefonzeile
   und der Marke-Untertitel weichen jetzt schon bei 1180 statt bei 1000 px,
   damit 1024 px (die genannte Untergrenze) ohne seitliches Scrollen bleibt. */
/* Seit 2026-09-25 schon bei 1380 px: Die längeren Reiter („…-Auswahl",
   „Mietkauf für Gewerbetreibende") brauchen den Platz auch zweizeilig. */
/* Seit 2026-09-26 (sieben Reiter) weichen beide schon bei 1540 px. */
@media (max-width:1540px){.werkstatt-tel{display:none}}
@media (max-width:1540px) and (min-width:1131px){.marke__unter{display:none}}
/* Sechs Reiter statt fünf (2026-09-24): unter 1180 px rücken sie enger,
   damit 1024 px ohne seitliches Scrollen bleibt. */
/* Sieben Reiter (2026-09-26): enger schon ab 1440 px. */
@media (max-width:1440px){.reiter__blatt{padding-inline:.52rem}}

.konto-tat{font-size:.78rem;font-variation-settings:"wdth" 94,"wght" 640;color:var(--ink-2);text-decoration:none;white-space:nowrap}
.konto-tat:hover{color:var(--amber-ink);text-decoration:underline}

.korb{
  display:flex;align-items:center;gap:.5rem;
  border:1px solid var(--ink);padding:.44rem .8rem;
  font-size:.78rem;font-variation-settings:"wdth" 94,"wght" 640;
  transition:background-color var(--schnell) linear,color var(--schnell) linear;
}
.korb:hover{background:var(--ink);color:var(--ink-inv)}
.korb__zahl{font-family:"Azeret Mono",monospace;font-variant-numeric:tabular-nums;font-size:.72rem}

/* Telefon-Menü und Shop-Kurzweg: nur ≤1130 px sichtbar (s. u.), sonst trägt
   die Hauptnavigation dieselben Ziele bereits sichtbar im Kopf. */
.kopf__shop-kurz,.kopfmenue{display:none}

/* Auf schmalen Schirmen wird die Reihe einzeilig gehalten: Zeichen · Shop ·
   Warenkorb · Menü — der Rest zieht ins Menü, statt den Kopf zu stauchen.
   Seit 2026-09-24 schon ab 980 statt ab 760 px: Die volle Reihe braucht mit
   sechs Reitern gut 970 px. Mit fünf waren es schon rund 940, und zwischen
   761 und 940 px (iPad hochkant) liefen Kontakt, Konto und Warenkorb
   rechts aus dem Bild. Seit 2026-09-26 bis 1130 px: Mit sieben Reitern
   („Massagedecke" dazu) braucht die volle Reihe gut 1.120 px. */
@media (max-width:1130px){
  .blattkopf__reihe{flex-wrap:wrap;min-height:0;padding-block:.55rem;align-items:center;gap:.7rem}
  .marke{order:1}
  .reiter,.werkstatt-tel,.konto-tat{display:none}
  .kopf__shop-kurz{
    order:2;display:flex;align-items:center;justify-content:center;
    min-height:44px;min-width:44px;padding:0 .3rem;
    font-size:.82rem;font-variation-settings:"wdth" 96,"wght" 660;
    color:var(--ink);text-decoration:none;
  }
  .kopf__rechts{order:3;margin-left:auto;gap:.6rem}
  .kopfmenue{order:4;display:block;position:relative}
  .marke__unter{display:none}
  .marke__bild{height:23px}
}

/* Das Telefon-Menü — native <details>, dieselbe Bedienung wie beim FAQ
   (Akt 08) und den Zeilengruppen der Modellseiten: geht ohne JavaScript. */
.kopfmenue__knopf{
  display:flex;align-items:center;gap:.5rem;min-height:44px;padding:.3rem .2rem;
  font-size:.78rem;font-variation-settings:"wdth" 94,"wght" 640;color:var(--ink);
  cursor:pointer;list-style:none;
}
.kopfmenue__knopf::-webkit-details-marker{display:none}
.kopfmenue__strich{
  position:relative;display:block;width:20px;height:1px;background:var(--ink);
}
.kopfmenue__strich::before,.kopfmenue__strich::after{
  content:"";position:absolute;left:0;width:20px;height:1px;background:var(--ink);
}
.kopfmenue__strich::before{top:-6px}
.kopfmenue__strich::after{top:6px}
.kopfmenue[open] .kopfmenue__strich{background:transparent}
.kopfmenue[open] .kopfmenue__strich::before{top:0;transform:rotate(45deg)}
.kopfmenue[open] .kopfmenue__strich::after{top:0;transform:rotate(-45deg)}

.kopfmenue__blatt{
  position:absolute;right:0;top:calc(100% + .55rem);z-index:10;
  width:min(84vw,340px);
  display:flex;flex-direction:column;
  background:var(--grund);border:1px solid var(--ink);
  box-shadow:0 8px 24px rgba(0,0,0,.14);
  /* Das Menü hängt am klebenden Kopf und ist länger als ein Telefon hoch.
     Es scrollt darum in sich, und die Seite dahinter steht still, solange
     es offen ist (Auftraggeber, 2026-09-24: „der Hintergrund scrollt
     weiter"). 5,5rem ist der Kopf samt Abstand darüber und darunter. */
  max-height:calc(100vh - 5.5rem);
  max-height:calc(100dvh - 5.5rem);
  overflow-y:auto;overscroll-behavior:contain;
}
/* body trägt sonst overflow-x:hidden. Ist html gesperrt, geht das nicht
   mehr an den Viewport, body wird selbst zum Scrollbereich — und der
   klebende Kopf samt Menü rutscht aus dem Bild. `clip` schneidet genauso
   ab, ohne einen Scrollbereich aufzumachen. */
@media (max-width:1130px){
  html:has(.kopfmenue[open]){overflow:hidden}
  html:has(.kopfmenue[open]) body{overflow:clip}
}
.kopfmenue__titel{
  padding:.75rem 1rem .3rem;
  font-family:"Azeret Mono",monospace;font-size:.6rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);
}
.kopfmenue__ziel,.kopfmenue__tuer{
  display:flex;align-items:center;min-height:44px;padding:.3rem 1rem;
  font-size:.9rem;color:var(--ink);text-decoration:none;
  border-top:1px solid var(--riss-fein);
}
.kopfmenue__tuer{padding-left:1.6rem;font-size:.84rem;color:var(--ink-2)}
.kopfmenue__ziel:hover,.kopfmenue__tuer:hover{background:var(--werkblatt-hoch);color:var(--amber-ink)}

/* ── Aktionen ──────────────────────────────────────────────────────── */
.tat{
  display:inline-flex;align-items:center;gap:.62rem;
  padding:.92rem 1.5rem;
  font-variation-settings:"wdth" 100,"wght" 680;
  font-size:.94rem;letter-spacing:-.004em;
  text-decoration:none;
  border:1px solid var(--ink);
  transition:background-color var(--schnell) linear,color var(--schnell) linear,border-color var(--schnell) linear;
  min-height:48px;
}
.tat--voll{background:var(--ink);color:var(--ink-inv)}
.tat--voll:hover{background:var(--amber-flaeche);border-color:var(--amber-flaeche);color:#fff}
.tat--rand:hover{background:var(--ink);color:var(--ink-inv)}
.tat__pfeil{width:15px;height:9px;flex-shrink:0;transition:transform var(--schnell) var(--daempfung)}
.tat:hover .tat__pfeil{transform:translateX(4px)}

/* ═══ ANKUNFT — der erste Bildschirm ═══════════════════════════════════
   Umbau 2026-08-28 nach Kundenrückmeldung: erst die Emotion mit dem Pferd,
   danach die Technik mit den Einzelteilen. Die Explosionszeichnung ist
   damit nicht mehr der Einstieg, sondern die Antwort auf das Foto.
   Dunkel, weil der Stall dunkel ist. Der Umschlag ins helle Werkblatt
   weiter unten ist der Szenenwechsel von der Box in die Werkstatt. */
.ankunft{
  position:relative;
  background:var(--kammer);
  border-bottom:1px solid var(--riss-inv);
  isolation:isolate;
}
.ankunft__bild{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;
  object-fit:cover;object-position:50% 38%;
}
/* Zwei Stufen: unten satt, damit der Fließtext steht; oben eine schwächere
   Stufe, damit der Blattkopf über dem Bild lesbar bleibt. */
.ankunft::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to top,
    rgba(8,10,7,.95) 0%, rgba(8,10,7,.86) 22%,
    rgba(8,10,7,.34) 54%, rgba(8,10,7,.20) 74%, rgba(8,10,7,.52) 100%);
}
.ankunft__innen{
  position:relative;z-index:3;
  width:var(--masse);margin-inline:auto;
  padding:clamp(7rem,16vh,10rem) var(--rand) clamp(2.2rem,6vh,4.2rem);
  min-height:clamp(560px,88svh,940px);
  display:flex;flex-direction:column;justify-content:flex-end;
}
.ankunft h1{color:var(--ink-inv);max-width:19ch;margin-bottom:1.15rem}
.ankunft h1 em{
  font-style:normal;display:block;
  color:var(--amber-lo);
  font-variation-settings:"wdth" 116,"wght" 780;
}
/* Ein <em> in der Unterzeile hebt ein Wort hervor, es beginnt keine neue
   Zeile. Bis 2026-09-23 griff display:block auch hier: Auf Easy und Easy Plus
   stand „Der / Einstieg / . Steckerfertig." über drei Zeilen — schon im
   statischen Stand vom 31.08., bemerkt erst beim Umbau des Profi-Kopfs. */
.ankunft h1 em em{display:inline}
/* Profi (Auftraggeber, 27.09. abends): die drei Funktionen kleiner, in einer
   Reihe unter dem Namen. Bei .5em passt die Zeile auch am Telefon in die
   16ch des Kopfs, ohne dass nowrap sie über den Rand schieben könnte. */
.ankunft h1 .ankunft__funktionen{font-size:.5em;margin-top:.5em;letter-spacing:0}
/* Ein weicher dunkler Schein, seit der Dampf kräftiger ist (2026-09-24):
   Weiße Schrift über der hellen Säule verlöre sonst ihren Kontrast. */
.ankunft h1,.ankunft .lead{text-shadow:0 0 28px rgba(8,10,7,.75),0 0 8px rgba(8,10,7,.55)}
.ankunft .lead{color:rgba(237,239,232,.84);max-width:48ch;margin-bottom:1.75rem}
.ankunft__taten{display:flex;flex-wrap:wrap;gap:.7rem}
/* Die Tastenfarben des Werkblatts tragen auf dunklem Grund nicht. */
.ankunft .tat--voll{background:var(--amber-flaeche);border-color:var(--amber-flaeche);color:#fff}
.ankunft .tat--voll:hover{background:var(--ink-inv);border-color:var(--ink-inv);color:var(--ink)}
.ankunft .tat--rand{border-color:rgba(237,239,232,.46);color:var(--ink-inv)}
.ankunft .tat--rand:hover{background:var(--ink-inv);border-color:var(--ink-inv);color:var(--ink)}

/* ═══ DAMPF — die Wolke im Foto bekommt Bewegung ══════════════════════
   Der Dampf ist im Bild echt; hier steigt er weiter. Nur Transform und
   Deckkraft werden bewegt, die Unschärfe steht fest — sonst rechnet der
   Browser den Weichzeichner in jedem Einzelbild neu. */
.dampf{
  position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;
  mix-blend-mode:screen;opacity:1;
  /* Schmal: eine Fahne über dem Rücken, keine Nebelbank über dem ganzen Bild.
     Die Deckkraft multipliziert sich über Verlauf, Maske, Animation und die
     darüberliegende Abdunklung — gemessen mit +7 von 255 war das unsichtbar. */
  mask-image:radial-gradient(36% 56% at 52% 42%,#000 0%,rgba(0,0,0,.9) 62%,transparent 100%);
  -webkit-mask-image:radial-gradient(36% 56% at 52% 42%,#000 0%,rgba(0,0,0,.9) 62%,transparent 100%);
}
.dampf i{
  position:absolute;left:var(--x);bottom:var(--u,30%);
  width:var(--b);height:calc(var(--b) * 1.6);margin-left:calc(var(--b) / -2);
  border-radius:50%;
  /* Seit 2026-09-24 dichter im Kern und länger sichtbar (Robin: „zu
     unscheinbar"), dazu vier Schwaden mehr im Blatt. Er bleibt unter der
     Abdunklung des Kopfbilds; die Überschrift trägt dafür einen dunklen
     Schein (.ankunft h1), damit sie auch über der Säule lesbar bleibt. */
  background:radial-gradient(closest-side at 50% 64%,
    #fff, rgba(255,247,232,.82) 46%, rgba(255,240,215,.25) 68%, transparent 82%);
  filter:blur(13px);
  opacity:0;
  animation:dampf-steigen var(--t) linear var(--d) infinite;
  will-change:transform,opacity;
}
@keyframes dampf-steigen{
  0%  {opacity:0;  transform:translate3d(0,0,0) scale(.6)}
  10% {opacity:1}
  60% {opacity:.85}
  100%{opacity:0;  transform:translate3d(var(--dx),-36vh,0) scale(1.8)}
}
/* Angehalten (blatt.js, „Bewegung anhalten"): Die Schwaden bleiben stehen,
   wo sie gerade sind — eine stehende Fahne statt eines leeren Bilds. */
[data-bewegung="still"] .dampf i{animation-play-state:paused}
/* Auf dem Telefon sind die Schwaden schmaler: Bei 375 px wären 240 px breite
   Wolken ein heller Fleck hinter dem Text.
   Seit 2026-09-27 (Robin: „funktioniert da nicht so gut wie auf Desktop“)
   steigen sie auch an anderer Stelle auf. Im Hochformat liegt der Rücken
   bei gut einem Drittel der Höhe, nicht bei zwei Dritteln wie im Querbild;
   die Schwaden stiegen darum im dunklen Fell auf, hatten ihre hellste Phase
   hinter der Überschrift und verloschen, bevor sie die freie Fläche unter
   den Lampen erreichten. Jetzt starten sie am Rücken, knapp über der
   Überschrift, und die Maske gibt den Raum darüber frei. */
@media (max-width:720px){
  .dampf{
    mask-image:radial-gradient(42% 40% at 52% 28%,#000 0%,rgba(0,0,0,.85) 60%,transparent 100%);
    -webkit-mask-image:radial-gradient(42% 40% at 52% 28%,#000 0%,rgba(0,0,0,.85) 60%,transparent 100%);
  }
  .dampf i{
    bottom:calc(var(--u,30%) + 17%);
    width:calc(var(--b) * .62);height:calc(var(--b) * 1.15);margin-left:calc(var(--b) * -.31);filter:blur(9px);
    animation-name:dampf-steigen-hoch;
  }
}
@keyframes dampf-steigen-hoch{
  0%  {opacity:0;  transform:translate3d(0,0,0) scale(.6)}
  12% {opacity:1}
  65% {opacity:.9}
  100%{opacity:0;  transform:translate3d(var(--dx),-30vh,0) scale(1.7)}
}
/* Bei reduzierter Bewegung bleibt die Fahne stehen, statt zu verschwinden —
   Ruhe heißt nicht, dass das Bild ärmer sein muss. */
@media (prefers-reduced-motion:reduce){
  .dampf i{animation:none;opacity:.52;transform:translate3d(0,-7vh,0) scale(1.2)}
}

.bildnachweis{
  position:absolute;z-index:3;right:var(--rand);bottom:.9rem;
  font-family:"Azeret Mono",monospace;font-size:.58rem;letter-spacing:.11em;
  text-transform:uppercase;color:rgba(237,239,232,.5);
  text-align:right;max-width:60vw;
}

/* ═══ FADEN — die Naht zwischen den ersten Akten ══════════════════════
   Rückmeldung 2026-08-28: die ersten drei Abschnitte wirkten aneinander-
   gereiht. Die Seite hat für so etwas eine eigene Sprache — die Anreiß-
   linie mit Beschriftung. Jede Naht kündigt den nächsten Akt an, statt
   ihn nur folgen zu lassen. */
.fadenband--hell{background:var(--werkblatt)}

.faden{
  /* Die Naht ist ein Absatz und liefe sonst gegen p{max-width:68ch}. */
  width:var(--masse);max-width:none;margin-inline:auto;
  padding:clamp(1.9rem,4.5vh,3.1rem) var(--rand) 0;
  display:flex;align-items:center;gap:.85rem;
}
.faden::before{content:"";width:clamp(20px,5vw,72px);height:1px;background:var(--riss);flex:none}
.faden::after{content:"";height:1px;background:var(--riss);flex:1 1 auto;min-width:1.5rem}
.faden span{
  font-family:"Azeret Mono",monospace;font-size:.66rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);
}
.fadenband--dunkel .faden::before,
.fadenband--dunkel .faden::after{background:var(--riss-inv)}
.fadenband--dunkel .faden span{color:rgba(237,239,232,.6)}

/* ═══ SCHARNIER — dasselbe Gerät, ohne alles ═══════════════════════════
   Das Bindeglied zwischen Fotowelt und Zeichnung: erst das leuchtende
   Gerät über dem Pferd, dann die leere Schale auf dem Werkstattboden,
   dann die Zeichnung. Drei Schritte, jeder für sich belegt. */
.scharnier{
  position:relative;background:var(--kammer);
  border-bottom:1px solid var(--riss-inv);
}
.scharnier__innen{
  width:var(--masse);margin-inline:auto;
  padding:clamp(3.6rem,9vh,6.8rem) var(--rand);
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(280px,1fr);
  gap:clamp(1.8rem,5vw,4.4rem);align-items:center;
}
@media (max-width:940px){ .scharnier__innen{grid-template-columns:1fr;gap:2rem} }
.scharnier__figur{margin:0;display:flex;flex-direction:column;gap:.7rem;align-items:flex-start}
.scharnier__bild{
  display:block;max-width:100%;height:auto;
  max-height:min(68svh,640px);width:auto;
  border:1px solid var(--riss-inv);
}
.scharnier__figur figcaption{
  font-family:"Azeret Mono",monospace;font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(237,239,232,.5);
}
.scharnier h2{color:var(--ink-inv)}
.scharnier h2 em{font-style:normal;color:var(--amber-lo);font-variation-settings:"wdth" 116,"wght" 780}
.scharnier p{color:rgba(237,239,232,.8)}
.scharnier__text > p + p{margin-top:1rem}

/* ═══ ANWENDUNG — Foto neben der Zeitachse ════════════════════════════ */
.anwendung__gitter{
  display:grid;grid-template-columns:minmax(260px,.62fr) minmax(0,1fr);
  gap:clamp(1.6rem,4vw,3.4rem);align-items:center;
}
@media (max-width:900px){ .anwendung__gitter{grid-template-columns:1fr} }
.anwendung__figur{margin:0;display:flex;flex-direction:column;gap:.6rem;align-items:flex-start}
.anwendung__figur img{
  display:block;max-width:100%;height:auto;width:auto;
  max-height:min(62svh,540px);border:1px solid var(--riss);
}
.anwendung__figur figcaption{
  font-family:"Azeret Mono",monospace;font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);
}
/* Am Telefon frisst das hochformatige Foto sonst zu viel Höhe — 4:3
   beschnitten statt eines neuen Bildes (Seitenstruktur-Arbeitsdatei,
   Tabelle 7, Akt 04). */
@media (max-width:720px){
  .anwendung__figur img{width:100%;max-width:none;aspect-ratio:4/3;object-fit:cover;max-height:none}
}

/* ═══ WERKSTATT — der Beleg für „von Hand gebaut" ═════════════════════
   Fertigung und Belege nebeneinander in einem Blatt (2026-09-23, vorher
   zwei gestapelte Blätter, zusammen gut 1.200 px hoch bei 1440 px Breite).
   Das Werkstattfoto steht klein neben seinem Satz statt als eigene Zeile. */
.werkstatt__gitter{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(2rem,5vw,4.4rem);align-items:start;
}
@media (max-width:900px){ .werkstatt__gitter{grid-template-columns:1fr} }
.werkstatt__spalte > p{color:var(--ink-2);max-width:56ch;margin-bottom:1.4rem}
.werkbank{
  margin:0;display:grid;grid-template-columns:minmax(130px,200px) minmax(0,1fr);
  gap:1.2rem;align-items:end;
  border-top:1px solid var(--riss);padding-top:1.4rem;
}
.werkbank img{display:block;width:100%;height:auto;border:1px solid var(--riss)}
@media (max-width:520px){ .werkbank{grid-template-columns:130px minmax(0,1fr)} }
.werkbank figcaption{display:flex;flex-direction:column;gap:.6rem}
.werkbank__satz{color:var(--ink);font-size:1.02rem;line-height:1.45;max-width:26ch}
.werkbank__ort{
  font-family:"Azeret Mono",monospace;font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);
}

.messfeld{
  position:relative;
  border-bottom:1px solid var(--riss);
  overflow:hidden;
}
.messfeld__innen{
  width:var(--masse);margin-inline:auto;padding:0 var(--rand);
  min-height:clamp(600px,88svh,940px);
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:1fr auto;
}
.buehne{
  position:relative;
  grid-area:1/1;
  margin:0 calc(var(--rand) * -1);
}
#c-hero{width:100%;height:100%;position:absolute;inset:0}
/* Ohne WebGL trägt eine gezeichnete Explosionsdarstellung dieselbe Aussage */
.buehne__ersatz{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:flex-end;
  padding:clamp(1rem,3vw,2.5rem) var(--rand);
  pointer-events:none;
}
.buehne__ersatz svg{width:min(560px,58%);height:auto}
@media (max-width:900px){
  .buehne__ersatz{align-items:flex-start;justify-content:center;padding-top:1rem}
  .buehne__ersatz svg{width:min(420px,86%)}
}
.buehne__ersatz[hidden]{display:none}
.ez-linie{stroke:var(--ink);stroke-width:1;fill:none;vector-effect:non-scaling-stroke}
.ez-fein{stroke:var(--riss);stroke-width:1;fill:none;vector-effect:non-scaling-stroke}
.ez-fuell{fill:var(--werkblatt-hoch);stroke:var(--ink);stroke-width:1}
.ez-warm{fill:var(--amber)}
.ez-nr{font-family:"Azeret Mono",monospace;font-size:9px;font-weight:600;fill:var(--ink);text-anchor:middle;dominant-baseline:central}
.ez-text{font-family:"Azeret Mono",monospace;font-size:12px;fill:var(--ink-2);letter-spacing:.06em}

.ansage{
  position:relative;z-index:3;
  grid-area:1/1;align-self:end;justify-self:start;
  padding-bottom:clamp(1.5rem,4vh,3.2rem);
  max-width:min(31rem,100%);
  pointer-events:none;
}
@media (min-width:1180px){ .ansage{max-width:min(34rem,44%)} }

/* Auf schmalen Schirmen wird aus der Überlagerung ein Stapel: erst die
   Geräte, dann die Ansage. Text über leuchtendem Blech ist unlesbar. */
@media (max-width:860px){
  /* Gedeckelt: ohne Obergrenze wächst die Bühne auf sehr hohen Viewports
     ins Absurde und schiebt die Ansage aus dem ersten Bild. */
  .messfeld__innen{grid-template-rows:clamp(320px,50svh,560px) auto auto;min-height:0}
  .messfeld__innen .ansage{
    grid-area:2/1;align-self:start;max-width:100%;
    padding-block:clamp(1.4rem,4vh,2.4rem);
  }
  .messfeld__innen .fusszeile{grid-area:3/1}
}
.ansage > *{pointer-events:auto}
.ansage h1{margin-bottom:1.1rem}
.ansage h1 em{
  font-style:normal;display:block;
  color:var(--amber-ink);
  font-variation-settings:"wdth" 116,"wght" 780;
}
.ansage .lead{margin-bottom:1.6rem}
.ansage__taten{display:flex;flex-wrap:wrap;gap:.7rem}

/* Die übrigen Shop-Türen unter den drei Geräten. Stand bis 2026-09-23 als
   Randspur in 0,7 rem und 46 Zeichen Breite unmittelbar an der Unterkante
   (Robin: „zu wenig Platz") — jetzt eine eigene Zeile mit Luft, jede Tür
   ein eigener Verweis. */
.messfeld__shop{
  position:relative;z-index:3;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1.4rem;
  margin:0;padding:1.1rem 0 clamp(1.6rem,4vh,2.6rem);
  font-size:.95rem;
}
.messfeld__shop-label{
  font-family:"Azeret Mono",monospace;font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);
}
.messfeld__shop a{color:var(--ink);text-underline-offset:.22em;text-decoration-color:var(--riss)}
.messfeld__shop a:hover{color:var(--amber-ink);text-decoration-color:var(--amber-ink)}
.messfeld__shop-alle{margin-left:auto;display:inline-flex;align-items:center;gap:.5rem;font-variation-settings:"wght" 620}
@media (max-width:600px){ .messfeld__shop-alle{margin-left:0} .messfeld__shop a{min-height:44px;display:inline-flex;align-items:center} }

/* Fußleiste des Messfelds: Modellnamen + Maße unter den Geräten */
.fusszeile{
  grid-area:2/1;position:relative;z-index:3;
  border-top:1px solid var(--riss);
  display:grid;grid-template-columns:repeat(3,1fr);
}
.fusszeile__zelle{
  padding:.85rem .9rem 1.05rem;
  border-right:1px solid var(--riss-fein);
  display:flex;flex-direction:column;gap:.14rem;
  text-decoration:none;
  transition:background-color var(--schnell) linear;
  min-height:76px;
}
.fusszeile__zelle:last-child{border-right:0}
.fusszeile__zelle:hover,.fusszeile__zelle:focus-visible{background:var(--werkblatt-hoch)}
.fusszeile__name{font-variation-settings:"wdth" 104,"wght" 700;font-size:1rem;letter-spacing:-.015em;display:flex;align-items:center;gap:.5rem}
.fusszeile__mass{font-size:.66rem;letter-spacing:.05em;color:var(--ink-3)}
.fusszeile__preis{font-size:.8rem;color:var(--ink-2);margin-top:.15rem}
.fusszeile__zelle[data-aktiv="true"] .fusszeile__name{color:var(--amber-ink)}
.fusszeile__punkt{width:7px;height:7px;background:var(--riss);flex-shrink:0;transition:background-color var(--ruhig) linear}
.fusszeile__zelle[data-aktiv="true"] .fusszeile__punkt{background:var(--amber)}
/* Die Zeile war schon ein Verweis, sah aber nicht so aus — ein sichtbarer
   Knopf statt eines unsichtbaren Klickbereichs (Seitenstruktur-
   Arbeitsdatei, Tabelle 7, Akt 06). */
.fusszeile__knopf{
  margin-top:.4rem;display:inline-flex;align-items:center;gap:.4rem;
  font-size:.76rem;font-variation-settings:"wdth" 100,"wght" 640;color:var(--amber-ink);
}
.fusszeile__knopf .tat__pfeil{width:13px;height:9px;flex-shrink:0}
@media (max-width:720px){
  .fusszeile{grid-template-columns:1fr;}
  .fusszeile__zelle{border-right:0;border-bottom:1px solid var(--riss-fein);min-height:0;padding:.7rem .1rem;flex-direction:row;align-items:baseline;gap:.35rem .7rem;flex-wrap:wrap}
  .fusszeile__zelle:last-child{border-bottom:0}
  .fusszeile__name{flex:1 1 auto}
  .fusszeile__preis{margin-left:auto;margin-top:0;order:2}
  .fusszeile__mass{flex:1 1 100%;order:3}
  .fusszeile__knopf{flex:1 1 100%;order:4;margin-top:0}
}

/* ── Blätter ───────────────────────────────────────────────────────── */
.blatt{
  width:var(--masse);margin-inline:auto;padding:clamp(4rem,9vh,7.5rem) var(--rand);
}
.blatt--rand{border-bottom:1px solid var(--riss)}
.blatt__kopf{max-width:56ch;margin-bottom:clamp(2.2rem,4.5vh,3.6rem)}
.blatt__kopf h2,.blatt__kopf .blatt__titel{margin-bottom:.95rem}
.blatt__kopf p{color:var(--ink-2)}

/* ═══ FERTIGUNGSTIEFE — ein Gerät zerlegt, nummeriert ═══════════════ */
.zerlegung{
  display:grid;
  grid-template-columns:minmax(0,1.32fr) minmax(320px,.78fr);
  gap:clamp(1.6rem,3.5vw,3.4rem);
  align-items:start;
}
@media (max-width:1040px){ .zerlegung{grid-template-columns:1fr} }

.zerlegung__buehne{
  position:relative;
  aspect-ratio:4/2.95;
  border:1px solid var(--riss);
  background:
    linear-gradient(to right,var(--riss-fein) 1px,transparent 1px) 0 0/44px 44px,
    linear-gradient(to bottom,var(--riss-fein) 1px,transparent 1px) 0 0/44px 44px,
    var(--werkblatt-hoch);
  overflow:hidden;
}
@media (max-width:560px){ .zerlegung__buehne{aspect-ratio:3/3.6} }
#c-teile{position:absolute;inset:0;width:100%;height:100%}
.anreiss{position:absolute;inset:0;pointer-events:none;z-index:2}
.anreiss line,.anreiss circle{stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke;fill:none}
.anreiss .nr-kreis{fill:var(--werkblatt-hoch)}
.anreiss text{
  font-family:"Azeret Mono",monospace;font-size:10px;font-weight:600;
  fill:var(--ink);text-anchor:middle;dominant-baseline:central;
}
.anreiss g{opacity:.86;transition:opacity var(--schnell) linear}
.anreiss g.gluehen{opacity:1}
.anreiss g.gluehen line{stroke:var(--amber);stroke-width:1.6}
.anreiss g.gluehen .nr-kreis{fill:var(--amber);stroke:var(--amber)}
.anreiss g.gluehen text{fill:#fff}
.anreiss g.blass{opacity:.25}

.buehne__schild{
  position:absolute;left:0;bottom:0;z-index:3;
  border-top:1px solid var(--riss);border-right:1px solid var(--riss);
  background:var(--werkblatt-hoch);
  padding:.42rem .7rem;
  font-family:"Azeret Mono",monospace;font-size:.6rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);
}

/* Stückliste */
.stueckliste{width:100%;border-collapse:collapse;font-size:.88rem}
.stueckliste caption{
  text-align:left;padding-bottom:.6rem;
  font-family:"Azeret Mono",monospace;font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);
}
.stueckliste th{
  text-align:left;font-family:"Azeret Mono",monospace;font-size:.58rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);font-weight:500;
  padding:.42rem .55rem;border-bottom:1px solid var(--ink);
}
.stueckliste th:first-child{width:2.6rem}
.stueckliste td{
  padding:.58rem .55rem;border-bottom:1px solid var(--riss-fein);
  vertical-align:baseline;
}
.stueckliste tbody tr{transition:background-color var(--schnell) linear;cursor:default}
.stueckliste tbody tr:hover,.stueckliste tbody tr.gluehen{background:var(--werkblatt-hoch)}
.stueckliste tbody tr:hover .pos,.stueckliste tbody tr.gluehen .pos{background:var(--amber-flaeche);color:#fff;border-color:var(--amber-flaeche)}
.pos{
  display:inline-grid;place-items:center;width:1.55rem;height:1.55rem;
  border:1px solid var(--ink);border-radius:50%;
  font-family:"Azeret Mono",monospace;font-size:.66rem;font-weight:600;
  font-variant-numeric:tabular-nums;
  transition:background-color var(--schnell) linear,color var(--schnell) linear,border-color var(--schnell) linear;
}
.teil__name{font-variation-settings:"wdth" 100,"wght" 620}
.teil__wert{display:block;font-size:.82rem;color:var(--ink-3);margin-top:.1rem}

/* ═══ DER PROFI IM KANAL — dunkle Messkammer ═══════════════════════
   2026-09-23: Der Akt liegt auf dem Werkblatt, dunkel ist nur noch die
   Bühne. Seit der Einwand direkt auf das Stallfoto folgt (Tausch vom
   19.09.), lagen zwei dunkle Akte aneinander und lasen sich als einer.
   Die Bühne zeigt das Innere des Geräts und bleibt deshalb Kammer —
   ein Fenster ins Gehäuse, kein Band. */
.kanal{
  position:relative;
  border-bottom:1px solid var(--riss);
}
/* Der Störer „Neu: Cool-Air" (2026-09-24). Die Form ist die bekannte —
   der runde Aufkleber auf der Verpackung —, gesetzt in der Sprache der
   Seite: ein feiner Ring wie ein Prägestempel, Schrift aus Überschrift und
   Maßkette. Leicht schräg, weil er aufgeklebt ist und nicht gedruckt.
   Blau, nicht Amber (Robin, selber Abend: „das ist ja kühl"): Cool-Air ist
   Luft ohne Strahlung, und dafür steht `--kalt` (Emissionsregel, DESIGN.md).
   Weiß darauf 7,4:1. */
/* Der Kopf wird um den Störer breiter; der Fließtext darunter behält sein Maß. */
#ganzjahr .blatt__kopf{max-width:min(96ch,100%)}
#ganzjahr .blatt__kopf > p{max-width:58ch}
.einwand__kopf{display:flex;align-items:center;gap:clamp(.8rem,2.4vw,2.2rem);margin-bottom:.95rem}
.einwand__kopf h2{margin-bottom:0;flex:0 1 auto}
/* Am Telefon passt der Störer nicht neben „Pferdesolarium.“ und lief über
   den Rand (bemerkt 2026-09-27). Dort steht er unter der Überschrift. */
@media (max-width:560px){
  .einwand__kopf{flex-wrap:wrap}
  .einwand__kopf .stoerer{width:96px;margin-top:.4rem}
}
.blatt__kopf .stoerer,.stoerer{
  flex:0 0 auto;position:relative;
  width:clamp(104px,6rem + 5.5vw,176px);aspect-ratio:1;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--kalt);color:#fff;text-align:center;
  transform:rotate(-9deg);
  box-shadow:0 1px 0 rgba(0,0,0,.08),0 10px 22px -12px rgba(0,40,80,.55);
}
.stoerer::before{
  content:"";position:absolute;inset:6%;border-radius:50%;
  border:1px dashed rgba(255,255,255,.55);pointer-events:none;
}
.stoerer__neu{
  font-variation-settings:"wdth" 116,"wght" 820;
  font-size:clamp(1.4rem,.9rem + 1.5vw,2.4rem);line-height:.9;
  letter-spacing:.02em;text-transform:uppercase;
}
.stoerer__was{
  font-variation-settings:"wdth" 104,"wght" 700;
  font-size:clamp(.95rem,.66rem + .75vw,1.4rem);line-height:1.1;margin-top:.15em;
}
.stoerer__wo{
  font-family:"Azeret Mono",monospace;font-size:clamp(.44rem,.38rem + .18vw,.56rem);
  letter-spacing:.1em;text-transform:uppercase;margin-top:.55em;opacity:.9;
}
.kanal__gitter{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.52fr);
  gap:clamp(1.6rem,3.4vw,3.2rem);align-items:start;
}
@media (max-width:980px){ .kanal__gitter{grid-template-columns:1fr} }
.kanal__buehne{
  position:relative;aspect-ratio:16/10;
  border:1px solid var(--ink);
  background:radial-gradient(120% 90% at 50% 42%,#1D211A 0%,#101309 100%);
  overflow:hidden;
}
@media (max-width:560px){ .kanal__buehne{aspect-ratio:4/4.2} }
#c-kanal{position:absolute;inset:0;width:100%;height:100%}
.kanal__marke{
  position:absolute;top:0;left:0;
  padding:.42rem .7rem;border-right:1px solid var(--riss-inv);border-bottom:1px solid var(--riss-inv);
  font-family:"Azeret Mono",monospace;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:#8B9385;
}

.kanal__zeile{
  display:flex;justify-content:space-between;gap:.5rem 1rem;flex-wrap:wrap;
  padding:.6rem 0;border-bottom:1px solid var(--riss-inv);
  font-size:.85rem;
}
.kanal__zeile dt{color:#8B9385;flex:0 0 auto}
.kanal__zeile dd{
  font-family:"Azeret Mono",monospace;font-variant-numeric:tabular-nums;
  color:var(--ink-inv);text-align:right;
  flex:1 1 auto;min-width:0;overflow-wrap:anywhere;
}

/* Offener Punkt — die Lücke in der Linie sagt: noch nicht beziffert */
.offen{
  margin-top:1.4rem;padding:.95rem 0 0;
  border-top:1px dashed var(--riss);
  font-size:.8rem;line-height:1.55;color:var(--ink-3);max-width:44ch;
}
/* Bis 2026-09-24 in den Farben der Kammer (2,6:1 und 1,5:1 auf dem
   Werkblatt, D7.07) — seit die Bühne auf dem Werkblatt liegt, steht der
   Hinweis überall auf hellem Grund. */
.offen b{color:var(--amber-ink);font-variation-settings:"wdth" 96,"wght" 660}
.offen--hell{border-top-color:var(--riss);color:var(--ink-3)}
.offen--hell b{color:var(--amber-ink)}

/* ═══ DREI MODELLE IM SELBEN MESSFELD ═════════════════════════════ */
.vergleich{border-top:1px solid var(--ink)}
.vergleich__zeile{
  display:grid;
  grid-template-columns:minmax(120px,.9fr) repeat(3,minmax(0,1fr));
  border-bottom:1px solid var(--riss-fein);
  align-items:stretch;
}
.vergleich__zeile:last-child{border-bottom:1px solid var(--ink)}
.vergleich__zeile--kopf{border-bottom:1px solid var(--ink)}
.vergleich__merkmal{
  padding:.85rem .7rem .85rem 0;
  font-family:"Azeret Mono",monospace;font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;
}
.vergleich__wert{
  padding:.85rem .8rem;border-left:1px solid var(--riss-fein);
  font-size:.9rem;display:flex;flex-direction:column;justify-content:center;gap:.12rem;
}
.vergleich__zeile--kopf .vergleich__wert{padding-block:1.15rem}
.vergleich__modell{font-variation-settings:"wdth" 106,"wght" 740;font-size:clamp(1rem,.9rem + .5vw,1.35rem);letter-spacing:-.02em}
.vergleich__anspruch{font-size:.78rem;color:var(--ink-3);line-height:1.4}
.vergleich__preis{font-family:"Azeret Mono",monospace;font-variant-numeric:tabular-nums;font-size:1.02rem;font-weight:600;margin-top:.4rem}
.vergleich__preis small{display:block;font-size:.62rem;letter-spacing:.06em;color:var(--ink-3);font-weight:400;text-transform:uppercase;margin-top:.1rem}

/* Balken statt Kacheln: Leistung im gemeinsamen Feld */
.balken{height:5px;background:var(--riss-fein);position:relative;margin-top:.42rem;width:100%}
.balken::after{
  content:"";position:absolute;inset:0 auto 0 0;width:100%;
  background:var(--amber);
  transform-origin:left center;
  transform:scaleX(var(--anteil,0));
  transition:transform 900ms var(--daempfung);
}
.balken--kalt::after{background:var(--kalt)}

.strich-luecke{
  display:inline-block;width:100%;height:1px;margin-top:.6rem;
  background:repeating-linear-gradient(to right,var(--riss) 0 7px,transparent 7px 15px);
}
@media (max-width:800px){
  /* Ein Modell je Block: zwei Spalten trennen den Wert von seinem Modell,
     und genau die Zuordnung ist der Zweck dieses Abschnitts. */
  .vergleich__zeile{grid-template-columns:1fr}
  .vergleich__merkmal{padding-bottom:.15rem;border-top:1px solid var(--ink)}
  .vergleich__zeile--kopf .vergleich__merkmal{display:none}
  .vergleich__wert{border-left:0;padding-inline:0;padding-block:.5rem}
  .vergleich__wert[data-modell]::before{
    content:attr(data-modell);
    font-family:"Azeret Mono",monospace;font-size:.58rem;letter-spacing:.11em;
    text-transform:uppercase;color:var(--ink-3);margin-bottom:.18rem;
  }
  .vergleich__zeile--kopf .vergleich__wert{
    border-top:1px solid var(--riss-fein);padding-block:1rem;
  }
  .vergleich__zeile--kopf .vergleich__wert::before{content:none}
}

/* ═══ PASST DAS IN MEINEN STALL ═══════════════════════════════════ */
.stall{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(1.6rem,3.4vw,3.4rem);align-items:start;
}
@media (max-width:900px){ .stall{grid-template-columns:1fr} }
.hoehe-feld{display:flex;align-items:flex-end;gap:.9rem;margin-bottom:1.3rem;flex-wrap:wrap}
.hoehe-feld label{font-family:"Azeret Mono",monospace;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:.42rem}
.hoehe-feld input{
  width:8rem;padding:.62rem .7rem;
  border:1px solid var(--ink);background:var(--werkblatt-hoch);
  font-family:"Azeret Mono",monospace;font-size:1.05rem;font-variant-numeric:tabular-nums;
  min-height:48px;
}
.hoehe-feld input:focus{outline:2px solid var(--fokus);outline-offset:2px}
.hoehe-einheit{font-family:"Azeret Mono",monospace;font-size:.86rem;color:var(--ink-3);padding-bottom:.85rem}

.befund{border-top:1px solid var(--ink)}
.befund__zeile{
  display:flex;align-items:center;gap:.85rem;
  padding:.82rem 0;border-bottom:1px solid var(--riss-fein);
}
.befund__strich{width:44px;height:1px;flex-shrink:0;position:relative}
.befund__strich[data-lage="frei"]{background:var(--ink)}
.befund__strich[data-lage="knapp"]{background:repeating-linear-gradient(to right,var(--ink) 0 4px,transparent 4px 8px)}
.befund__strich[data-lage="zu"]{background:repeating-linear-gradient(to right,var(--riss) 0 12px,transparent 12px 26px)}
.befund__strich[data-lage="frei"]::after{
  content:"";position:absolute;right:-1px;top:-2.5px;width:6px;height:6px;background:var(--amber);
}
.befund__name{font-variation-settings:"wdth" 100,"wght" 620;font-size:.94rem;flex:1}
.befund__urteil{font-family:"Azeret Mono",monospace;font-size:.72rem;letter-spacing:.05em;text-align:right;color:var(--ink-2)}
.befund__zeile[data-lage="zu"] .befund__name,.befund__zeile[data-lage="zu"] .befund__urteil{color:var(--ink-3)}
.befund__zeile[data-lage="frei"] .befund__urteil{color:var(--amber-ink);font-weight:600}

/* Der Schnitt durch die Stallgasse */
.schnitt{
  border:1px solid var(--riss);background:var(--werkblatt-hoch);
  aspect-ratio:16/11;position:relative;
}
.schnitt svg{position:absolute;inset:0;width:100%;height:100%}
/* Die beiden Ablesungen stehen zusätzlich als echter Text unter der
   Zeichnung: skalierte SVG-Schrift wird auf dem Telefon zu klein. */
.ablesung{
  display:flex;gap:1.4rem 2rem;flex-wrap:wrap;
  margin-top:.85rem;padding-top:.75rem;border-top:1px solid var(--riss);
}
.ablesung div{display:flex;flex-direction:column;gap:.1rem}
.ablesung dt{font-family:"Azeret Mono",monospace;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.ablesung dd{font-family:"Azeret Mono",monospace;font-variant-numeric:tabular-nums;font-size:1.05rem;font-weight:600}
.ablesung dd[data-lage="frei"]{color:var(--amber-ink)}

/* ═══ PRÜFREGISTER ════════════════════════════════════════════════
   Kein Siegelraster: dieselben Positionsnummern und Strichzustände wie in
   der Stückliste. Was belegt ist, trägt eine durchgezogene Linie; was noch
   nachgereicht wird, eine unterbrochene. */
.pruefregister{border-top:1px solid var(--ink)}

.pruef__satz{font-variation-settings:"wdth" 102,"wght" 660;font-size:1.02rem;letter-spacing:-.012em;line-height:1.3}
.pruef__woran{font-size:.88rem;color:var(--ink-2);line-height:1.55}
.pruef__strich{grid-column:2/-1;height:1px;margin-top:.15rem}
.pruef__strich[data-lage="beleg"]{background:var(--ink)}
.pruef__strich[data-lage="offen"]{background:repeating-linear-gradient(to right,var(--riss) 0 14px,transparent 14px 30px)}
.pruef__quelle{
  grid-column:2/-1;
  font-family:"Azeret Mono",monospace;font-size:.6rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);
}
@media (max-width:760px){
  
  .pruef__woran{grid-column:2}
  .pruef__strich,.pruef__quelle{grid-column:2}
}

/* ═══ LEERSTAND — ehrlich, bis es etwas zu zeigen gibt ═══════════════
   Bis 2026-09-26 auch die Referenzkarte auf /reitstall; die ist der
   Kundenkarte gewichen (siehe KUNDENKARTE). Die Bewertungen nutzen den
   Leerstand weiter, solange keine freigegeben sind. */
.leerstand{
  border:1px solid var(--riss);padding:clamp(1.8rem,4vw,3.2rem);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(1.5rem,3vw,3rem);align-items:center;
  background:
    linear-gradient(to right,var(--riss-fein) 1px,transparent 1px) 0 0/38px 38px,
    linear-gradient(to bottom,var(--riss-fein) 1px,transparent 1px) 0 0/38px 38px;
}
@media (max-width:820px){ .leerstand{grid-template-columns:1fr} }

/* ═══ SHOP-REGAL — Ebenen und Türen ═══════════════════════════════ */
.posten{border-top:1px solid var(--ink)}
.posten__zeile{
  display:grid;
  grid-template-columns:3.2rem minmax(0,1fr) minmax(0,15rem) 8.5rem auto;
  gap:1rem;align-items:center;
  padding:1.05rem 0;border-bottom:1px solid var(--riss-fein);
  position:relative;
}
.posten__zeile[hidden]{display:none}
.posten__nr{font-family:"Azeret Mono",monospace;font-size:.72rem;color:var(--ink-3);font-variant-numeric:tabular-nums;align-self:start;padding-top:.2rem}
.posten__name{font-variation-settings:"wdth" 102,"wght" 680;font-size:1.02rem;letter-spacing:-.014em}
.posten__zusatz{font-size:.92rem;color:var(--ink-2);margin-top:.16rem;line-height:1.45}
.posten__herkunft{font-size:.78rem;color:var(--ink-2);line-height:1.45}
.posten__preis{font-family:"Azeret Mono",monospace;font-variant-numeric:tabular-nums;font-size:1rem;font-weight:600;text-align:right}
.posten__preis small{display:block;font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);font-weight:400;margin-top:.15rem}

/* Die Linie trägt den Zustand, nicht die Farbe */
.zustand{display:block;height:1px;margin-top:.55rem;width:100%}
.zustand[data-lage="lieferbar"]{background:var(--ink)}
.zustand[data-lage="konfigurierbar"]{background:repeating-linear-gradient(to right,var(--ink) 0 3px,transparent 3px 6px)}
.zustand[data-lage="offen"]{background:repeating-linear-gradient(to right,var(--riss) 0 14px,transparent 14px 30px)}

/* Fremdware behält ihre Farbe hinter einem Haarlinien-Rahmen */

@media (max-width:900px){
  .posten__zeile{grid-template-columns:2.6rem minmax(0,1fr);row-gap:.5rem}
  .posten__herkunft{grid-column:2}
  .posten__preis{grid-column:2;text-align:left}
  .posten__tat{grid-column:2}
}
.tat--klein{padding:.6rem 1rem;font-size:.82rem;min-height:44px}

/* ═══ REGAL — der Shop in drei Ebenen ════════════════════════════
   Kundenentscheidung: Solarien vorn und größer, Fremdware darf nicht
   untergehen, Zubehör bleibt Register. Seit 2026-08-28 steht in der
   Fremdware nur noch ein einziger Posten — die Ebene bleibt trotzdem, weil
   die Herkunftstrennung die Herstelleraussage sauber hält. */
.ebene{margin-bottom:clamp(2.4rem,5vw,4rem)}
.ebene__kopf{
  display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;
  padding-bottom:.6rem;border-bottom:1px solid var(--ink);margin-bottom:1.5rem;
}
.ebene__titel{font-variation-settings:"wdth" 104,"wght" 720;font-size:clamp(1.1rem,.95rem + .6vw,1.4rem);letter-spacing:-.016em}
/* Herkunftszeile, Zusätze und MwSt.-Hinweis seit 2026-09-27 größer und
   dunkler (Auftraggeber: „das kann man kaum lesen“). */
.ebene__herkunft{font-family:"Azeret Mono",monospace;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.ebene__zahl{margin-left:auto;font-family:"Azeret Mono",monospace;font-size:.8rem;color:var(--ink-2)}

.regal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-left:1px solid var(--riss-fein)}
@media (max-width:900px){ .regal{grid-template-columns:1fr;border-left:0} }
.ware{
  display:flex;flex-direction:column;
  border-right:1px solid var(--riss-fein);border-bottom:1px solid var(--riss-fein);
  padding:0 0 1.4rem;
}
@media (max-width:900px){ .ware{border-right:0;border-top:1px solid var(--riss-fein)} }
.ware__buehne{
  position:relative;aspect-ratio:4/3;
  background:
    linear-gradient(to right,var(--riss-fein) 1px,transparent 1px) 0 0/34px 34px,
    linear-gradient(to bottom,var(--riss-fein) 1px,transparent 1px) 0 0/34px 34px,
    var(--werkblatt-hoch);
  border-bottom:1px solid var(--riss-fein);overflow:hidden;
}
.ware__buehne canvas{position:absolute;inset:0;width:100%;height:100%}
.ware__marke{
  position:absolute;left:0;bottom:0;padding:.28rem .55rem;
  border-top:1px solid var(--riss-fein);border-right:1px solid var(--riss-fein);
  background:var(--werkblatt-hoch);
  font-family:"Azeret Mono",monospace;font-size:.55rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);
}
.ware__leib{padding:1.1rem 1.2rem 0;display:flex;flex-direction:column;flex:1;gap:.5rem}
.ware__name{font-variation-settings:"wdth" 104,"wght" 730;font-size:1.25rem;letter-spacing:-.02em;line-height:1.1}
/* Profi-Karte: Name und Störer „Neu: Cool-Air" nebeneinander (2026-09-26). */
.ware__kopf{display:flex;align-items:center;justify-content:space-between;gap:.8rem}
.stoerer.stoerer--klein{width:74px;margin:-.2rem .1rem -.2rem 0}
.stoerer--klein .stoerer__neu{font-size:1.02rem}
.stoerer--klein .stoerer__was{font-size:.7rem;margin-top:.1em}
.ware__anspruch{font-size:.86rem;color:var(--ink-2);line-height:1.5}
.ware--freisteller .ware__anspruch{font-size:1rem;font-weight:600;color:var(--ink);line-height:1.45}
.ware__daten{display:flex;flex-direction:column;gap:.28rem;margin-top:.2rem}
.ware__zeile{display:flex;justify-content:space-between;gap:.8rem;font-size:.8rem;border-bottom:1px solid var(--riss-fein);padding-bottom:.28rem}
.ware__zeile dt{color:var(--ink-3)}
.ware__zeile dd{font-family:"Azeret Mono",monospace;font-variant-numeric:tabular-nums;text-align:right}
.ware__fuss{margin-top:auto;padding-top:1rem;display:flex;flex-direction:column;gap:.75rem}
.ware__preis{font-family:"Azeret Mono",monospace;font-variant-numeric:tabular-nums;font-size:1.3rem;font-weight:600;letter-spacing:-.02em}
.ware__preis small{display:block;font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);font-weight:400;margin-top:.2rem}
.ware__preis span{font-size:.8rem;font-weight:400;color:var(--ink-2)}
.ware__taten{display:flex;gap:.5rem;flex-wrap:wrap}
/* Die Steuerung ist ein Satz, keine Zahl: untereinander, in Grundschrift. */
.ware__zeile--text{flex-direction:column;gap:.12rem}
.ware__zeile--text dd{font-family:inherit;text-align:left;line-height:1.45;color:var(--ink-2)}
/* Mietkauf bei Easy Plus und Profi (Auftraggeber, 2026-09-24: „muss viel
   präsenter sein"). Unter den Knöpfen, als Verweis und nicht als dritter
   Knopf, damit „Konfigurieren" die erste Tat bleibt. */
.ware__mietkauf{
  font-size:.8rem;color:var(--amber-ink);text-decoration:underline;
  text-underline-offset:.2em;text-decoration-thickness:1px;
}
.ware__mietkauf:hover{color:var(--ink)}

/* Fremdware: derselbe Rahmen und dieselbe Leiste wie im Register */
.ware--fremd{position:relative;padding-inline:.9rem;border-right:1px solid var(--riss-fein)}
.ware--fremd::before{content:"";position:absolute;inset:.5rem .35rem 1rem;border:1px solid var(--salbei);pointer-events:none}
.ware--fremd .ware__buehne{
  background:var(--werkblatt-hoch);border:1px solid var(--riss-fein);
  display:grid;place-items:center;margin-top:1.4rem;
}
.ware__buehne img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
}
/* Freisteller auf Weiß (Bezahlsysteme, 2026-09-25): ganz im Bild, und das
   Weiß des Fotos nimmt per multiply die Farbe des Blatts an — ohne Raster,
   das sonst durch das Gerät schiene. */
.ware__buehne--freisteller{background:var(--werkblatt-hoch);display:grid;place-items:center}
.ware__buehne--freisteller img{object-fit:contain;padding:1.1rem;mix-blend-mode:multiply}
.ware__reserve{
  font-family:"Azeret Mono",monospace;font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;color:#5E6C56;text-align:center;padding:1rem;
}
.fremd-leiste{
  position:absolute;top:.5rem;left:.35rem;z-index:2;
  background:#5E6C56;color:#F2F5EE;
  font-family:"Azeret Mono",monospace;font-size:.55rem;letter-spacing:.13em;
  text-transform:uppercase;padding:.24rem .55rem;
}

/* ═══ FUSS ════════════════════════════════════════════════════════ */
.fuss{
  border-top:1px solid var(--ink);
  background:var(--werkblatt-tief);
}
[data-register="shop"] .fuss{background:var(--laden-tief)}
.fuss__innen{
  width:var(--masse);margin-inline:auto;padding:clamp(2.6rem,5vh,4rem) var(--rand);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));
  gap:2rem clamp(1.5rem,3vw,3rem);
}
.fuss h3{font-size:.62rem;font-family:"Azeret Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-variation-settings:normal;font-weight:500;margin-bottom:.85rem}
.fuss ul{list-style:none;display:flex;flex-direction:column;gap:.45rem}
.fuss a{font-size:.88rem;text-decoration:none;color:var(--ink-2)}
.fuss a:hover{color:var(--amber-ink);text-decoration:underline}
.fuss__adresse{font-size:.88rem;color:var(--ink-2);line-height:1.65}
/* Siegel und Zahlungszeichen als ein Block, 120px breit: oben das Siegel,
   darunter die vier Zeichen zu zweit, zusammen genau so breit. Nebeneinander
   passten beide erst ab etwa 245px Spaltenbreite — bei 1440px sind es 227.
   Die Kacheln sind weiß, nicht im Ton des Fußes: Die Zeichen der Anbieter
   sind für weiße Flächen gezeichnet und dürfen nicht umgefärbt werden. */
.fuss__vertrauen{margin-top:1.2rem;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.fuss__siegel{display:inline-block}
.fuss__siegel img{display:block;width:120px;height:auto}
.fuss__zahlung{display:grid;grid-template-columns:repeat(2,57px);grid-auto-rows:34px;gap:6px}
/* Knappes Polster: Visa und Mastercard tragen ihren Schutzraum in der Datei
   (Visa rund ein Fünftel je Seite). Mit 5 × 7 px Polster stand der Visa-
   Schriftzug nur 22 px breit, neben einem 41 px breiten PayPal. */
.fuss__zeichen{display:flex;align-items:center;justify-content:center;padding:2px 3px;background:#fff;border:1px solid var(--riss);border-radius:3px}
.fuss__zeichen img{display:block;max-width:100%;max-height:100%}
.fuss__zahlung:hover .fuss__zeichen,.fuss__zahlung:focus-visible .fuss__zeichen{border-color:var(--amber-ink)}
.fuss__unten{
  border-top:1px solid var(--riss);
  padding:1rem var(--rand);
  width:var(--masse);margin-inline:auto;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.72rem;color:var(--ink-3);
}

/* ═══ KORBBLATT ═══════════════════════════════════════════════════ */
.korbblatt{
  position:fixed;inset:0 0 0 auto;z-index:100;width:min(420px,100%);
  background:var(--werkblatt-hoch);border-left:1px solid var(--ink);
  transform:translateX(100%);
  /* Unsichtbar erst, wenn es hinausgeglitten ist — sonst verschwände es
     beim Schließen schlagartig. */
  visibility:hidden;
  transition:transform var(--ruhig) var(--daempfung),visibility 0s linear var(--ruhig);
  display:flex;flex-direction:column;
}
.korbblatt[data-offen="true"]{transform:none;visibility:visible;transition-delay:0s}
.korbblatt__kopf{padding:1.2rem var(--sp);border-bottom:1px solid var(--ink);display:flex;justify-content:space-between;align-items:center;gap:1rem}
.korbblatt__liste{flex:1;overflow-y:auto;padding:var(--sp)}
.korbblatt__leer{color:var(--ink-3);font-size:.9rem}
.korbblatt__posten{display:flex;justify-content:space-between;gap:1rem;padding:.85rem 0;border-bottom:1px solid var(--riss-fein);font-size:.9rem}
.korbblatt__fuss{padding:var(--sp);border-top:1px solid var(--ink)}
.schleier{position:fixed;inset:0;z-index:99;background:rgba(20,22,18,.42);opacity:0;pointer-events:none;transition:opacity var(--ruhig) linear}
.schleier[data-offen="true"]{opacity:1;pointer-events:auto}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

/* ═══ AKTSCHIENE — eine Maßkette am Rand, kein Navigationsbalken ═══════
   Nur die Punkte stehen dauerhaft: die Beschriftung wäre breiter als der
   Seitenrand und liefe in den Satz. Der Name erscheint bei Berührung.
   Auf schmalen Schirmen tragen die Nahtstellen den Faden. */
.aktschiene{display:none}
@media (min-width:1120px){
  .aktschiene{
    display:flex;flex-direction:column;gap:.1rem;
    position:fixed;left:clamp(.8rem,1.5vw,1.5rem);top:50%;
    transform:translateY(-50%);z-index:40;
  }
  body[data-register="shop"] .aktschiene{display:none}
  .aktschiene__glied{
    position:relative;display:block;width:22px;height:22px;
    text-decoration:none;font-size:0;
  }
  /* Der Punkt */
  .aktschiene__glied::before{
    content:"";position:absolute;left:8px;top:9px;width:6px;height:4px;
    background:var(--riss);
    transition:background-color var(--schnell) var(--daempfung),
               width var(--schnell) var(--daempfung),
               left var(--schnell) var(--daempfung);
  }
  /* Die Beschriftung, erst bei Berührung */
  .aktschiene__glied::after{
    content:attr(data-name);
    position:absolute;left:24px;top:50%;transform:translateY(-50%);
    white-space:nowrap;pointer-events:none;
    font-family:"Azeret Mono",monospace;font-size:.58rem;letter-spacing:.1em;
    text-transform:uppercase;color:var(--ink);
    background:var(--grund);padding:.3rem .5rem;
    border:1px solid var(--riss);
    opacity:0;transition:opacity var(--schnell) var(--daempfung);
  }
  .aktschiene__glied:hover::after,
  .aktschiene__glied:focus-visible::after{opacity:1}
  .aktschiene__glied:hover::before{background:var(--ink)}
  .aktschiene__glied[aria-current="true"]::before{
    background:var(--amber);width:14px;left:4px;
  }
  /* Über dunklem Grund kehrt sich die Schiene um. */
  .aktschiene[data-grund="dunkel"] .aktschiene__glied::before{background:var(--riss-inv)}
  .aktschiene[data-grund="dunkel"] .aktschiene__glied:hover::before{background:var(--ink-inv)}
  .aktschiene[data-grund="dunkel"] .aktschiene__glied[aria-current="true"]::before{background:var(--amber)}
  .aktschiene[data-grund="dunkel"] .aktschiene__glied::after{
    color:var(--ink-inv);background:var(--kammer);border-color:var(--riss-inv);
  }
}

/* ═══ WIRKFELD — was ein Solarium dem Pferd tut ════════════════════════ */
.wirkfeld{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;background:var(--riss);border:1px solid var(--riss);
}
@media (max-width:820px){ .wirkfeld{grid-template-columns:1fr} }
.wirkung{
  background:var(--grund);padding:clamp(1.3rem,2.6vw,2.1rem);
  display:flex;flex-direction:column;gap:.7rem;
}
.wirkung__kopf{display:flex;align-items:baseline;gap:.7rem}
.wirkung__name{
  font-variation-settings:"wdth" 108,"wght" 740;
  font-size:clamp(1.15rem,1rem + .6vw,1.5rem);letter-spacing:-.018em;
}
.wirkung__was{color:var(--ink-2);font-size:.95rem;line-height:1.55}
.wirkung__zitat{
  border-left:2px solid var(--amber);padding-left:.8rem;
  font-size:.88rem;line-height:1.5;color:var(--ink-2);font-style:italic;
}
.wirkung__zitat cite{
  display:block;font-style:normal;margin-top:.3rem;
  font-family:"Azeret Mono",monospace;font-size:.56rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);
}
.wirkung__koennen{
  display:flex;flex-wrap:wrap;gap:.4rem .9rem;margin-top:auto;padding-top:.6rem;
  border-top:1px solid var(--riss-fein);
  font-family:"Azeret Mono",monospace;font-size:.6rem;letter-spacing:.06em;
}
.wirkung__kann{display:flex;align-items:center;gap:.35rem;color:var(--ink-2)}
.wirkung__kann::before{content:"";width:14px;height:0;border-top:2px solid var(--amber)}
.wirkung__kann[data-kann="nein"]{color:var(--ink-3)}
.wirkung__kann[data-kann="nein"]::before{border-top:1px dotted var(--riss)}
.wirkung__kann[data-kann="option"]::before{border-top:2px dashed var(--kalt)}

/* ═══ GANZJAHRES-SCHALTER ══════════════════════════════════════════════ */
.jahr__wahl{border:1px solid var(--ink);background:var(--werkblatt-hoch);margin-bottom:1.4rem}
.jahr__kopf{
  padding:.55rem .8rem;border-bottom:1px solid var(--ink);
  font-family:"Azeret Mono",monospace;font-size:.6rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);
}
.jahr__reihe{display:grid;grid-template-columns:repeat(3,1fr)}
.jahr__stellung{
  appearance:none;background:transparent;border:0;
  border-right:1px solid var(--riss);
  padding:.75rem .6rem;cursor:pointer;text-align:left;
  color:var(--ink);font:inherit;font-size:.84rem;
  font-variation-settings:"wdth" 100,"wght" 620;
  transition:background-color var(--schnell) var(--daempfung);
}
.jahr__stellung:last-child{border-right:0}
.jahr__stellung small{
  display:block;margin-top:.2rem;
  font-family:"Azeret Mono",monospace;font-size:.55rem;letter-spacing:.08em;
  text-transform:uppercase;opacity:.62;font-variation-settings:normal;
}
.jahr__stellung:hover{background:var(--werkblatt)}
.jahr__stellung[aria-pressed="true"]{background:var(--amber-flaeche);color:#fff}
.jahr__stellung[aria-pressed="true"] small{opacity:1}
.jahr__lage{
  font-size:.92rem;line-height:1.6;color:var(--ink-2);
  min-height:4.4em;margin-bottom:1.1rem;
}

/* ═══ PRODUKTBERATER ═══════════════════════════════════════════════════ */
.berater{border:1px solid var(--ink);background:var(--werkblatt-hoch)}
.berater__frage{padding:clamp(1rem,2.2vw,1.5rem);border-bottom:1px solid var(--riss)}
.berater__frage:last-of-type{border-bottom:0}
.berater__text{
  display:flex;align-items:baseline;gap:.6rem;margin-bottom:.75rem;
  font-variation-settings:"wdth" 104,"wght" 680;font-size:1.02rem;
}
.berater__wahl{display:flex;flex-wrap:wrap;gap:.5rem}
.berater__knopf{
  appearance:none;background:transparent;border:1px solid var(--riss);
  padding:.5rem .85rem;cursor:pointer;font:inherit;font-size:.85rem;
  color:var(--ink-2);min-height:44px;
  transition:border-color var(--schnell) var(--daempfung),
             background-color var(--schnell) var(--daempfung);
}
.berater__knopf:hover{border-color:var(--ink);color:var(--ink)}
/* Gewählt ist orange (2026-09-27, Auftraggeber) — wie die Jahresstellung und
   die Funktionsknöpfe. Die tiefere Fläche, weil weiße Schrift darauf steht. */
.berater__knopf[aria-pressed="true"]{background:var(--amber-flaeche);border-color:var(--amber-flaeche);color:#fff}
.berater__knopf[aria-pressed="true"] .teil__wert{color:inherit}
.berater__ergebnis{
  padding:clamp(1rem,2.2vw,1.5rem);border-top:1px solid var(--ink);
  background:var(--werkblatt);
}
.berater__urteil{
  font-variation-settings:"wdth" 110,"wght" 760;
  font-size:clamp(1.2rem,1rem + .8vw,1.7rem);letter-spacing:-.02em;margin-bottom:.5rem;
}
.berater__grund{color:var(--ink-2);font-size:.94rem;line-height:1.6;margin-bottom:.9rem}
.berater__offen{
  font-family:"Azeret Mono",monospace;font-size:.6rem;letter-spacing:.06em;
  color:var(--ink-3);line-height:1.7;
}

/* Die passenden Geräte, gleich groß und vom teuersten zum günstigsten
   (Auftraggeber, 2026-09-24). Drei Spalten auch bei einem oder zwei
   Geräten: So hat eine Karte immer dieselbe Größe. */
.berater__geraete{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;
}
@media (max-width:760px){ .berater__geraete{grid-template-columns:1fr} }
.berater__geraet{
  display:flex;flex-direction:column;gap:.35rem;
  border:1px solid var(--ink);background:var(--grund);
  padding:clamp(.9rem,2vw,1.2rem);
}
.berater__geraet .berater__urteil{margin-bottom:0}
.berater__anspruch{color:var(--ink-2);font-size:.88rem;line-height:1.5}
.berater__geraet .berater__offen{margin-top:auto;padding-top:.5rem}
.berater__geraet .tat{align-self:flex-start;margin-top:.4rem}
/* Das Ergebnis, sobald es eins gibt (2026-09-26): farbig hinterlegt, mit
   eigener Überschrift und einem Foto je Gerät. Amber ist hier Wärme, die
   Farbe der Geräte; die Karten bleiben hell, damit das Foto trägt. */
.berater__ergebnis--da{
  background:color-mix(in srgb,var(--amber-lo) 22%,var(--werkblatt-hoch));
  border-top:3px solid var(--amber);
  scroll-margin-top:5rem;
}
.berater__zuihnen{
  font-variation-settings:"wdth" 110,"wght" 780;
  font-size:clamp(1.35rem,1.05rem + 1vw,2rem);letter-spacing:-.02em;line-height:1.1;
  color:var(--amber-ink);margin-bottom:.4rem;
}
.berater__ergebnis--da .berater__grund{color:var(--ink)}
.berater__ergebnis--da .berater__geraet{background:var(--werkblatt-hoch);border-color:var(--amber-ink)}
.berater__bild{
  display:block;width:calc(100% + 2 * clamp(.9rem,2vw,1.2rem));max-width:none;
  margin:calc(-1 * clamp(.9rem,2vw,1.2rem)) calc(-1 * clamp(.9rem,2vw,1.2rem)) .5rem;
  aspect-ratio:3/2;object-fit:cover;background:var(--werkblatt-tief);
}

/* ═══ TYPENSCHILD — Kopf der Artikelseite (bis 2026-09-23 auch der Modellseiten) ═ */
.schild{
  border:1px solid var(--ink);padding:clamp(.9rem,2vw,1.3rem);
  max-width:32rem;
}
/* Bis 2026-09-24 ein dunkles Glas für das Kopfbild; seit es dort nicht mehr
   steht, lag es auf hellem Grund bei 2,7:1 und 1,9:1 (D7.07). */
.schild__reihe{
  display:flex;justify-content:space-between;gap:1.2rem;
  padding:.32rem 0;border-bottom:1px solid var(--riss-fein);
  font-family:"Azeret Mono",monospace;font-size:.66rem;letter-spacing:.06em;
}
.schild__reihe:last-child{border-bottom:0}
.schild__reihe dt{color:var(--ink-3);text-transform:uppercase;letter-spacing:.1em}
.schild__reihe dd{margin:0;color:var(--ink);text-align:right}

/* ═══ AMORTISATIONSRECHNER ═════════════════════════════════════════════ */
.rechner{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.86fr);
  gap:clamp(1.4rem,3.5vw,3rem);align-items:start;
}
@media (max-width:900px){ .rechner{grid-template-columns:1fr} }
.rechner__feld{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.7rem 0;border-bottom:1px solid var(--riss);
}
.rechner__feld label{font-size:.94rem;color:var(--ink-2);max-width:22ch}
.rechner__feld input,.rechner__feld select{
  width:8.5rem;padding:.5rem .6rem;min-height:44px;
  border:1px solid var(--ink);background:var(--werkblatt-hoch);
  font-family:"Azeret Mono",monospace;font-size:.95rem;color:var(--ink);
  text-align:right;
}
.rechner__feld select{text-align:left}
.rechner__tafel{border:1px solid var(--ink);background:var(--werkblatt-hoch)}
.rechner__zeile{
  display:flex;justify-content:space-between;gap:1rem;
  padding:.6rem .9rem;border-bottom:1px solid var(--riss);
  font-family:"Azeret Mono",monospace;font-size:.8rem;
}
.rechner__zeile:last-child{border-bottom:0}
.rechner__zeile dt{color:var(--ink-3);text-transform:uppercase;letter-spacing:.08em;font-size:.62rem;align-self:center}
.rechner__zeile dd{margin:0;color:var(--ink)}
.rechner__gross{
  padding:1rem .9rem;background:var(--ink);color:var(--ink-inv);
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
}
.rechner__gross b{
  font-family:"Azeret Mono",monospace;font-size:clamp(1.3rem,1rem + 1.4vw,2rem);
  font-weight:400;letter-spacing:-.01em;
}
.rechner__gross span{
  font-family:"Azeret Mono",monospace;font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;opacity:.72;
}

/* ═══ WISSEN — Anrisse der Fachtexte ═══════════════════════════════════ */
.wissen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--riss);border:1px solid var(--riss)}
@media (max-width:820px){ .wissen{grid-template-columns:1fr} }
.wissen__karte{
  background:var(--grund);padding:clamp(1.1rem,2.2vw,1.6rem);
  display:flex;flex-direction:column;gap:.6rem;text-decoration:none;color:inherit;
  transition:background-color var(--schnell) var(--daempfung);
}
.wissen__karte:hover{background:var(--werkblatt-hoch)}
.wissen__titel{font-variation-settings:"wdth" 104,"wght" 700;font-size:1.05rem;letter-spacing:-.015em}
.wissen__anriss{color:var(--ink-2);font-size:.9rem;line-height:1.55}
.wissen__mehr{
  margin-top:auto;font-family:"Azeret Mono",monospace;font-size:.58rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--amber-ink);
}

/* ═══ FACHSEITE — Fließtext ════════════════════════════════════════════ */
.fach{width:min(72ch,100%);margin-inline:auto}
.fach h3{
  margin:clamp(2rem,4vh,3rem) 0 .8rem;
  font-variation-settings:"wdth" 104,"wght" 720;
  font-size:clamp(1.1rem,1rem + .5vw,1.35rem);letter-spacing:-.012em;
}
.fach p{margin-bottom:1rem;color:var(--ink-2);line-height:1.7}
.fach .hinweis{
  border:1px solid var(--kalt);padding:.9rem 1.1rem;margin:1.6rem 0;
  font-size:.92rem;color:var(--ink-2);
}
.fach .hinweis b{color:var(--kalt-ink,#004a80)}

/* ═══════════════════════════════════════════════════════════════════════
   MODELLSEITEN — „Das Typenschild"
   Die Seite ist das Datenblatt, das ein Stallbetreiber ohnehin anfordert —
   nur steht es oben statt als PDF ganz unten.
   ═══════════════════════════════════════════════════════════════════════ */
.ankunft--modell .ankunft__innen{
  min-height:clamp(440px,66svh,720px);
  padding-top:clamp(6rem,12vh,8rem);
}
.ankunft--modell h1{max-width:16ch;margin-bottom:.9rem}
.ankunft--modell .lead{margin-bottom:1.3rem;max-width:44ch}

/* Reiter als echte Verweise auf den Unterseiten */
a.reiter__blatt{text-decoration:none}

.modellblatt{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(290px,.44fr);
  gap:clamp(1.6rem,4vw,3.6rem);align-items:start;
}
@media (max-width:1000px){ .modellblatt{grid-template-columns:1fr} }

.zeilengruppe{border-top:1px solid var(--ink);padding-top:.9rem;margin-bottom:clamp(2rem,4vh,3rem)}
.zeilengruppe__kopf{display:flex;align-items:baseline;gap:.75rem;margin-bottom:.9rem}
.zeilengruppe__nr{
  font-family:"Azeret Mono",monospace;font-size:.7rem;letter-spacing:.1em;
  color:var(--ink-3);flex:none;
}
.zeilengruppe__titel{
  font-variation-settings:"wdth" 106,"wght" 720;
  font-size:clamp(1.05rem,.95rem + .5vw,1.32rem);letter-spacing:-.015em;
}
.zeilengruppe > p{color:var(--ink-2);margin-bottom:1rem;max-width:62ch}

/* Die neuen Handyfotos (Seitenstruktur-Arbeitsdatei, Abschnitt 12): als
   Figur in der Spalte, nie breiter als ihre eigene Pixelbreite — B4, es
   gibt keine größeren Originale. */
.zeilengruppe__foto{margin:.9rem 0 1.1rem;max-width:320px}
.zeilengruppe__foto img{display:block;width:100%;height:auto;border:1px solid var(--riss)}
.zeilengruppe__foto figcaption{
  font-family:"Azeret Mono",monospace;font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin-top:.4rem;
}
/* Mehrere Fotos einer Gruppe stehen nebeneinander, nicht untereinander
   (Robin, 2026-09-23: „Warum werden die Bilder da nicht nebeneinander
   angezeigt?"). Querformat bis 320 px wie bisher, Hochformat schmaler,
   damit zwei davon nicht höher werden als ein Bildschirm. */
.zeilengruppe__fotos{display:flex;flex-wrap:wrap;gap:.9rem 1.1rem;margin:.9rem 0 1.1rem}
.zeilengruppe__fotos .zeilengruppe__foto{margin:0;flex:1 1 240px}
.zeilengruppe__foto--hoch{max-width:230px}
.zeilengruppe__fotos .zeilengruppe__foto--hoch{flex:0 1 230px}
/* Ein einzelnes Hochformat steht neben seinen Zeilen statt darüber. */
.zeilengruppe__seite{
  display:grid;grid-template-columns:minmax(140px,210px) minmax(0,1fr);
  gap:1.4rem;align-items:start;margin:.9rem 0 1.1rem;
}
.zeilengruppe__seite .zeilengruppe__foto{margin:0;max-width:none}
.zeilengruppe__seite .blattzeile{flex-direction:column;align-items:flex-start;gap:.2rem}
.zeilengruppe__seite .blattzeile dd{text-align:left}
.zeilengruppe__seite .blattzeile:first-child{padding-top:0}
@media (max-width:520px){ .zeilengruppe__seite{grid-template-columns:1fr} .zeilengruppe__seite .zeilengruppe__foto{max-width:230px} }

/* Die rein technischen Gruppen (Bestückung, Elektrik, Montage, Lieferumfang,
   Prüfungen und Garantie) klappen zu — auf Wunsch des Auftraggebers
   (2026-09-19), damit „Passt das über mein Pferd?" (Gruppe 4) nicht mehr
   hinter einer Wand aus Kenndaten steht. Bauform, Zerlegt und Preis/
   Konfiguration bleiben offene <section>, nicht betroffen. Derselbe
   +/– -Auftritt wie beim FAQ-Akkordeon (akt-08), kein neuer Stil. */
summary.zeilengruppe__kopf{cursor:pointer;list-style:none}
summary.zeilengruppe__kopf::-webkit-details-marker{display:none}
summary.zeilengruppe__kopf::before{
  content:"+";flex:none;width:1.1rem;
  font-family:"Azeret Mono",monospace;color:var(--amber-ink);
}
details.zeilengruppe[open] > summary.zeilengruppe__kopf::before{content:"–"}

.blattzeile{
  display:flex;justify-content:space-between;align-items:baseline;gap:1.2rem;
  padding:.55rem 0;border-bottom:1px solid var(--riss-fein);
}
.blattzeile dt{font-size:.9rem;color:var(--ink-2)}
.blattzeile dd{
  margin:0;text-align:right;font-family:"Azeret Mono",monospace;font-size:.86rem;
  color:var(--ink);
}
.blattzeile[data-strich="offen"] dd{color:var(--ink-3)}
.blattzeile[data-strich="offen"]{border-bottom-style:dashed;border-bottom-color:var(--riss)}
.blattzeile[data-strich="konfig"]{border-bottom-style:dotted}

/* Die Abschnitte unter dem Modellblatt (Passung, Video, Vergleich, die
   anderen Modelle) mit weniger Luft (2026-09-23, Robin: „Du verschwendest
   an so vielen Stellen so viel Platz") — vorher bis zu 7,5 rem über und
   unter jedem, dazu ein eigenes Blatt nur für den Kopf „Maße und Passung". */
.ankunft--modell ~ .blatt{padding-block:clamp(2.6rem,6vh,4.4rem)}
.ankunft--modell ~ .blatt .blatt__kopf{margin-bottom:clamp(1.4rem,3vh,2.2rem)}
.zeilengruppe--kopf{margin-bottom:clamp(1.2rem,2.5vh,1.8rem)}
.zeilengruppe--kopf .zeilengruppe__kopf{margin-bottom:0}
/* Blattkopf links, Bild rechts — statt eines Fotos allein in einer
   schmalen Spalte unter dem Kopf (2026-09-23, /reitstall). */
.kopf-mit-bild{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.6rem,4vw,3.6rem);align-items:end;margin-bottom:clamp(2rem,4vh,3rem);
}
.kopf-mit-bild:last-child{margin-bottom:0}
.kopf-mit-bild > .blatt__kopf{margin-bottom:0;max-width:56ch}
.kopf-mit-bild > .zeilengruppe__foto{margin:0;max-width:560px}
.kopf-mit-bild > .zeilengruppe__fotos{margin:0}
.kopf-mit-bild .zeilengruppe__fotos .zeilengruppe__foto{max-width:none;flex:1 1 200px}
@media (max-width:860px){ .kopf-mit-bild{grid-template-columns:1fr;align-items:start} }

/* /bewertungen: das Foto neben den Karten statt allein über ihnen. */
.bewertungen-seite{
  display:grid;grid-template-columns:minmax(180px,260px) minmax(0,1fr);
  gap:clamp(1.4rem,3.5vw,3rem);align-items:start;
}
.bewertungen-seite > .zeilengruppe__foto{margin:0;max-width:none;position:sticky;top:calc(var(--kopfhoehe,72px) + 1rem)}
@media (max-width:760px){
  .bewertungen-seite{grid-template-columns:1fr}
  .bewertungen-seite > .zeilengruppe__foto{position:static;max-width:240px}
}
/* Das Kundinnen-Video neben seinem Text statt allein unter ihm — im
   Telefon, der Text samt Hinweis rechts daneben, mittig zur Höhe. */
.video-neben{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(1.8rem,5vw,4.2rem);align-items:center;
}
.video-neben .telefon{order:-1;--telefon-b:250px}
.video-neben .blatt__kopf{margin-bottom:0}
.video-neben__hinweis,.laufband__hinweis{font-size:.86rem;color:var(--ink-2);line-height:1.55;margin-top:.9rem}
@media (max-width:600px){ .video-neben{grid-template-columns:1fr;gap:1.4rem} }

/* Die mitlaufende Preisschiene */
.preisschiene{position:sticky;top:calc(var(--kopfhoehe,72px) + 1rem);border:1px solid var(--ink)}
@media (max-width:1000px){ .preisschiene{position:static} }
.preisschiene__kopf{
  padding:.55rem .9rem;border-bottom:1px solid var(--ink);
  font-family:"Azeret Mono",monospace;font-size:.6rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);
}
.preisschiene__leib{padding:clamp(.9rem,2vw,1.3rem)}
.preisschiene__preis{
  font-family:"Azeret Mono",monospace;white-space:nowrap;
  font-size:clamp(1.3rem,.85rem + 1.1vw,2.1rem);letter-spacing:-.02em;
  display:block;margin-bottom:.15rem;
}
.preisschiene__mwst{
  font-family:"Azeret Mono",monospace;font-size:.58rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:1rem;
}
.preisschiene__taten{display:flex;flex-direction:column;gap:.5rem}
.preisschiene__taten .tat{justify-content:center}
.preisschiene__fuss{
  margin-top:1rem;padding-top:.8rem;border-top:1px solid var(--riss);
  font-family:"Azeret Mono",monospace;font-size:.6rem;line-height:1.7;color:var(--ink-3);
}

/* Die Fotos über der Preisschiene (2026-09-23). Die Spalte reicht über die
   ganze Höhe des Blatts: Die Fotos stehen oben und scrollen weg, die
   Schiene läuft darunter weiter mit. Hinge beides zusammen an sticky,
   wäre es auf einem Laptop höher als der Schirm. Am Telefon löst sich die
   Spalte auf: Die Fotos stehen vor Gruppe 1, die Schiene bleibt am Ende. */
.modellblatt__seite{align-self:stretch;display:flex;flex-direction:column;gap:1rem;min-width:0}
@media (max-width:1000px){
  .modellblatt__seite{display:contents}
  .produktbilder{order:-1;max-width:560px}
}
.produktbilder{border:1px solid var(--ink);min-width:0}
.produktbilder__buehne{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;scrollbar-width:none;
}
.produktbilder__buehne::-webkit-scrollbar{display:none}
.produktbilder__bild{flex:0 0 100%;scroll-snap-align:start;margin:0}
.produktbilder__bild img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.produktbilder__bild figcaption{
  padding:.55rem .9rem;border-top:1px solid var(--ink);
  font-family:"Azeret Mono",monospace;font-size:.6rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);
}
.produktbilder__leiste{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;
  padding:.6rem .9rem .9rem;
}
.produktbilder__daumen{
  padding:0;border:1px solid var(--riss);background:none;cursor:pointer;
  opacity:.6;transition:opacity .2s,border-color .2s;
}
.produktbilder__daumen img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.produktbilder__daumen:hover{opacity:1}
.produktbilder__daumen[aria-current="true"]{opacity:1;border-color:var(--ink)}

/* ═══════════════════════════════════════════════════════════════════════
   DER FADEN — 2026-08-29
   Bis hierher war die Seite ein Stapel aus zwölf gleich großen Blättern,
   und die Übergänge waren Beschriftungen, die ankündigten, dass gleich
   ein neues Blatt kommt. Ein roter Faden, den man beschriften muss, ist
   keiner. Also wird die Seite EIN Blatt: ein Heftrand nach DIN-Art am
   linken Papierrand, eine durchgehende Linie darin, fortlaufende
   Positionsnummern 01–07, die nie neu beginnen — und eine Glut, die mit
   dem Lesefortschritt am Faden hochwandert. Warm bleibt emittiert.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --heftrand:clamp(2.7rem,1.1rem + 4.2vw,6.5rem);
  --faden-x:calc(var(--heftrand) / 2);
  --faden-hell:var(--riss);
  --faden-dunkel:rgba(237,239,232,.30);
}

#reg-marke{position:relative}
.akt{position:relative;margin:0}

/* Jede Sektion zeichnet ihr eigenes Stück Faden. Weil die Sektionen
   lückenlos aufeinanderfolgen, ergeben die Stücke eine Linie — und jedes
   Stück kennt den Grund, auf dem es liegt. */
.akt > section{position:relative}
.akt > section::before{
  content:"";position:absolute;z-index:5;pointer-events:none;
  left:var(--faden-x);top:0;bottom:0;width:1px;
  background:var(--faden-hell);
}
.akt > .ankunft::before,
.akt > .scharnier::before{background:var(--faden-dunkel)}

/* Die Glut: der gelesene Teil des Fadens. Ein Element über die ganze
   Seitenlänge, damit sie über die dunklen Bänder hinwegläuft. */
.faden__glut{
  position:absolute;z-index:6;pointer-events:none;
  left:var(--faden-x);top:0;width:1px;
  height:var(--glut,0px);
  background:linear-gradient(to bottom,
    rgba(234,91,12,0) 0,rgba(234,91,12,.55) 22%,var(--amber) 100%);
}
@media (prefers-reduced-motion:reduce){ .faden__glut{transition:none} }

/* Positionsnummer — sitzt auf dem Faden und unterbricht ihn, wie die
   Positionsnummer einer Zeichnung ihre Hinweislinie unterbricht. */
.akt__pos{
  position:absolute;z-index:7;
  left:var(--faden-x);top:clamp(2.4rem,5.5vh,4.2rem);
  transform:translateX(-50%);
  display:grid;place-items:center;
  width:1.9rem;height:1.9rem;border-radius:50%;
  background:var(--grund);border:1px solid var(--riss);
  font-family:"Azeret Mono",monospace;font-size:.62rem;font-weight:600;
  font-variant-numeric:tabular-nums;letter-spacing:.04em;color:var(--ink-2);
}
.akt--dunkel .akt__pos{
  background:var(--kammer);border-color:var(--faden-dunkel);color:rgba(237,239,232,.72);
}
.akt--misch .akt__pos{
  background:var(--kammer);border-color:var(--faden-dunkel);color:rgba(237,239,232,.72);
}

/* ═══ GRUNDTON — 2026-09-23 ═════════════════════════════════════════════
   Seit der Umstellung vom 19. und 21.09. lagen die beiden dunklen Akte
   vorn aneinander und dahinter vier helle am Stück, fast 4.000 px ohne
   Wechsel. Dunkel bleibt, was innen ist (DESIGN.md) — also wechseln die
   hellen Akte im Grundton: Werkblatt und Werkblatt Tief im Takt, damit
   jeder Akt als eigenes Blatt ankommt und die Seite trotzdem eine bleibt.
   Die Marke und alles, was mit dem Grund gefüllt ist, geht mit. */
.akt--tief{--grund:var(--werkblatt-tief);background:var(--grund)}
.akt__anker{display:block;height:0;scroll-margin-top:clamp(4.5rem,11vh,6.5rem)}

/* Der Satzspiegel rückt hinter den Heftrand. Links breiter als rechts —
   das ist die Bindekante des Blattes, keine Unachtsamkeit. */
.akt .blatt,
.akt .ankunft__innen,
.akt .messfeld__innen,
.akt .scharnier__innen{ padding-left:max(var(--rand),var(--heftrand)) }

/* ═══ GEWICHT — nicht jeder Akt wiegt gleich viel ═══════════════════════
   I–IV laut und randlos, V voll, VI ruhiger, VII kompakt. Vorher waren
   alle zwölf Abschnitte gleich groß und gleich laut; genau daraus entsteht
   der Eindruck einer Aneinanderreihung. */
#akt-02 .blatt__kopf h2{font-size:clamp(2.1rem,1.15rem + 3.5vw,4.15rem)}
#akt-07{--masse:min(1300px,100%)}
#akt-09{--masse:min(1140px,100%)}
#akt-07 .scharnier__text h2,
#akt-09 .blatt__kopf h2{font-size:clamp(1.62rem,1.05rem + 2.15vw,2.8rem)}
#akt-07 .blatt,
#akt-09 .blatt{padding-block:clamp(3.2rem,7vh,5.6rem)}
/* Akt 07 kompakter (2026-09-23): Das Foto der leeren Schale bestimmt die
   Höhe des Scharniers — kleiner gesetzt und mit weniger Luft darüber und
   darunter; die Textspalte rückt ans Bild statt in die Mitte. */
#akt-07 .blatt{padding-block:clamp(2.6rem,5.5vh,4.2rem)}
#akt-07 .scharnier__innen{
  padding-block:clamp(2.6rem,6vh,4.4rem);
  grid-template-columns:auto minmax(0,1fr);
}
#akt-07 .scharnier__text{max-width:60ch}
@media (max-width:940px){ #akt-07 .scharnier__innen{grid-template-columns:1fr} }

/* Zweite Hälfte der Überschrift ist die Wendung, nicht das zweite
   Problem — deshalb trägt sie die Wärme. */
.blatt__kopf h2 em,
.blatt__kopf .blatt__titel em,
.schluss h2 em{
  font-style:normal;display:block;color:var(--amber-ink);
  font-variation-settings:"wdth" 116,"wght" 780;
}
.scharnier h2 em{display:block}

/* Preisanker im ersten Bild. Die Zahl ist hier ein Argument: die meisten
   halten ein Pferdesolarium für eine Anschaffung im fünfstelligen Bereich. */
.anker{
  font-family:"Azeret Mono",monospace;
  font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(237,239,232,.72);margin-bottom:1.7rem;
}
.anker span{color:var(--amber-lo);padding:0 .35em}

/* ═══ RANDSPUR — die zweite Lesespur für Betriebe ═══════════════════════
   Eine Erzählung, zwei Spuren. In einer Zeichnung steht die zweite
   Informationsebene im Rand; hier übersetzt sie jeden Akt in die
   gewerbliche Frage und endet in reitstall.html. */
.randspur{
  font-family:"Azeret Mono",monospace;
  font-size:.7rem;line-height:1.65;letter-spacing:.02em;
  color:var(--ink-3);max-width:46ch;
  margin-top:1.1rem;padding-left:.85rem;
  border-left:1px solid var(--riss);
}
.randspur b{
  display:block;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  font-size:.6rem;color:var(--amber-ink);margin-bottom:.2rem;
}
.randspur a{color:inherit;text-underline-offset:.22em;text-decoration-color:var(--riss)}
.randspur a:hover{color:var(--amber-ink);text-decoration-color:var(--amber-ink)}
.randspur--hell{color:rgba(237,239,232,.68);border-left-color:var(--faden-dunkel)}
.randspur--hell b{color:var(--amber-lo)}
.randspur--hell a{text-decoration-color:var(--faden-dunkel)}
.randspur--hell a:hover{color:var(--amber-lo);text-decoration-color:var(--amber-lo)}
.ankunft .randspur{margin-top:1.5rem}

/* ═══ ZUSAGEN — die Leiste unter dem Foto (2026-09-27) ═══════════════════
   Aus dem Entwurf des Auftraggebers, in der Sprache des Blatts: drei
   Felder zwischen Anreißlinien, Strichzeichen in Tinte, der Titel kräftig,
   die Zeile darunter klein. Keine Karten, keine Schatten. */
.zusagen{
  list-style:none;margin:0;padding:0 var(--rand);
  background:var(--werkblatt-hoch);border-bottom:1px solid var(--riss);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
}
.zusage{
  display:flex;align-items:center;gap:.95rem;
  padding:clamp(1rem,2.2vw,1.45rem) clamp(.6rem,2vw,1.6rem);
  border-left:1px solid var(--riss-fein);
  font-size:.86rem;line-height:1.4;color:var(--ink-2);
}
.zusage:first-child{border-left:0;padding-left:0}
.zusage b{display:block;color:var(--ink);font-size:.98rem;font-variation-settings:"wdth" 104,"wght" 700;letter-spacing:-.01em}
.zusage__zeichen{width:34px;height:34px;flex-shrink:0;stroke:var(--ink);stroke-width:1.3;stroke-linejoin:round;stroke-linecap:round}
.zusage__werkstatt{fill:var(--amber);stroke:none}
@media (min-width:1561px){ .zusagen{padding-inline:calc((100% - 1560px) / 2 + var(--rand))} }
@media (max-width:760px){
  .zusagen{grid-template-columns:1fr;padding-block:.3rem}
  .zusage{border-left:0;border-top:1px solid var(--riss-fein);padding:.8rem 0}
  .zusage:first-child{border-top:0}
  .zusage__zeichen{width:28px;height:28px}
}

/* ═══ DIE KETTE — vier Wirkungen, die aufeinander aufbauen ══════════════
   Vorher vier gleich große Kacheln in einem 2×2-Raster: vier
   gleichrangige Behauptungen. Es ist aber eine Ursachenfolge — die Luft
   trägt ab, IR-A geht in die Tiefe, die Tiefenwärme entspannt, UV kommt
   obendrauf. Also eine Stückliste, keine Kachelwand. */

.wirkfeld--kette .wirkung{
  background:none;
  display:grid;grid-template-columns:1.9rem minmax(0,1fr);
  column-gap:clamp(1rem,2.4vw,1.9rem);row-gap:.55rem;
  align-items:start;
  padding:clamp(1.5rem,3vh,2.3rem) 0;
  border-bottom:1px solid var(--riss);
}
.wirkfeld--kette .wirkung__kopf{
  display:contents;
}
.wirkfeld--kette .wirkung__kopf .pos{grid-column:1;grid-row:1;margin-top:.1rem}
.wirkfeld--kette .wirkung__name{
  grid-column:2;grid-row:1;
  font-size:clamp(1.25rem,1rem + 1vw,1.75rem);
  font-variation-settings:"wdth" 112,"wght" 740;
}
.wirkfeld--kette .wirkung__was,
.wirkfeld--kette .wirkung__zitat,
.wirkfeld--kette .wirkung__koennen{grid-column:2}
.wirkfeld--kette .wirkung__was{max-width:62ch}
.wirkfeld--kette .wirkung__koennen{margin-top:.35rem}
@media (max-width:620px){
  .wirkfeld--kette .wirkung{grid-template-columns:1.55rem minmax(0,1fr);column-gap:.85rem}
}
/* Das Glied, an dem aus Trocknen Erholung wird. */
.wirkfeld--kette .wirkung--kern .pos{background:var(--amber-flaeche);border-color:var(--amber-flaeche);color:#fff}
.wirkfeld--kette .wirkung--kern .wirkung__name{color:var(--amber-ink)}

/* ═══ WISSEN — Beschriftungszeilen statt Karten ════════════════════════
   Nur auf der Hauptseite. Die Modellseiten führen dieselbe Klasse weiter
   als Kartenraster; die Regel muss deshalb am Modifikator hängen. */
.wissen--zeilen{display:block;background:none;border:0;border-top:1px solid var(--riss)}
.wissen__zeile{
  display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  gap:.3rem clamp(1rem,2.4vw,2rem);align-items:baseline;
  padding:.95rem 0;border-bottom:1px solid var(--riss);
  text-decoration:none;color:inherit;
  transition:transform var(--schnell) var(--daempfung),color var(--schnell) linear;
}
.wissen__zeile:hover,.wissen__zeile:focus-visible{transform:translateX(.45rem);color:var(--amber-ink)}
.wissen__zeile .wissen__titel{font-size:1rem}
.wissen__zeile .wissen__anriss{font-size:.86rem}
@media (max-width:680px){ .wissen__zeile{grid-template-columns:1fr} }

/* ═══ ZWISCHENÜBERSCHRIFT — Schritt innerhalb eines Aktes ══════════════
   Ein Akt hat eine Überschrift. Alles darunter ist ein Schritt, kein
   Neuanfang, und wird auch so gesetzt. */
.zwischen{
  font-family:"Azeret Mono",monospace;
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  font-variation-settings:normal;font-weight:600;
  color:var(--ink-3);
  display:flex;align-items:center;gap:.9rem;
  margin-bottom:.9rem;
}
.zwischen::after{content:"";height:1px;flex:1 1 auto;background:var(--riss)}
/* Im Blattkopf endete die Linie an dessen 56ch — mitten im Blatt, wie
   abgerissen. Sie füllt die Restbreite des Satzspiegels, der Text
   darunter behält sein Maß. */
.blatt__kopf:has(> .zwischen){max-width:none}
.blatt__kopf:has(> .zwischen) > p{max-width:56ch}
.blatt__kopf .zwischen + p{margin-top:0}

/* ═══ AKT VII — der Abschluss ══════════════════════════════════════════
   Vorher endete die Seite auf einer leeren Karte und der Bitte, uns einen
   Stall anzubieten. Ein Verkaufsweg braucht am Ende eine Handlung des
   Besuchers, abgestuft nach Verbindlichkeit. */
.wege{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;background:var(--riss);
  border-block:1px solid var(--riss);
  margin-bottom:clamp(2.2rem,5vh,3.6rem);
}
@media (max-width:860px){ .wege{grid-template-columns:1fr} }

/* Die vier Shop-Türen — gleichrangig, anders als die beiden abgestuften
   Wege in Akt 07. Die einzige neu gesetzte Fläche im ganzen Umbau
   (Seitenstruktur-Arbeitsdatei, Abschnitt 0/10): vier statt zwei Felder,
   gleich breit auf jeder Stufe. */
.wege.wege--vier{grid-template-columns:1fr}
@media (min-width:601px){ .wege.wege--vier{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1040px){ .wege.wege--vier{grid-template-columns:repeat(4,minmax(0,1fr))} }

/* Die drei Service-Türen auf /service — gleiche Machart. */
.wege.wege--drei{grid-template-columns:1fr}
@media (min-width:780px){ .wege.wege--drei{grid-template-columns:repeat(3,minmax(0,1fr))} }

.weg{
  background:var(--grund);text-decoration:none;color:inherit;
  padding:clamp(1.4rem,3vw,2.1rem);
  display:grid;gap:.42rem;align-content:start;
  transition:background-color var(--schnell) var(--daempfung);
}
.weg:hover,.weg:focus-visible{background:var(--werkblatt-hoch)}
.weg__nr{
  font-family:"Azeret Mono",monospace;font-size:.6rem;letter-spacing:.15em;
  color:var(--ink-3);
}
.weg__tat{
  font-size:clamp(1.2rem,1rem + .8vw,1.6rem);
  font-variation-settings:"wdth" 112,"wght" 740;letter-spacing:-.018em;
}
.weg__zahl{
  font-family:"Azeret Mono",monospace;font-size:.82rem;color:var(--amber-ink);
  letter-spacing:.02em;
}
.weg__was{font-size:.88rem;line-height:1.6;color:var(--ink-2);margin-top:.3rem}
.weg--erst{background:var(--werkblatt-hoch)}
.weg--erst .weg__tat{color:var(--amber-ink)}
.weg--erst:hover{background:var(--grund-tief)}
/* Der Anruf mit zwei Nummern (2026-09-25) ist keine Fläche zum Klicken,
   sondern trägt zwei Links — die Fläche bleibt deshalb beim Überfahren. */
.weg--nummern:hover{background:var(--werkblatt-hoch)}
.weg__zahlen{display:grid;gap:.3rem}
a.weg__zahl{text-decoration:none;justify-self:start}
a.weg__zahl:hover,a.weg__zahl:focus-visible{text-decoration:underline;text-underline-offset:.2em}

/* ═══ FUSSNOTE ═════════════════════════════════════════════════════════ */
.fussnote{
  margin-top:clamp(1.4rem,3vh,2.2rem);
  font-size:.82rem;line-height:1.6;color:var(--ink-3);max-width:62ch;
  padding-top:.9rem;border-top:1px solid var(--riss-fein);
}

/* Die Punktkette am linken Rand ist entfallen: Der Heftrand mit Faden,
   Positionsnummern und Glut leistet dasselbe, nur sichtbar — und zwei
   konkurrierende Randsysteme waren genau das Problem, das behoben werden
   sollte. Die Regel bleibt stehen, falls ein Blatt sie noch mitbringt. */
.aktschiene{display:none !important}

/* ═══ NACHZUG 2026-08-29 ═══════════════════════════════════════════════
   Die Blattköpfe waren auf 56ch begrenzt — gemessen an der Grundschrift,
   nicht an der Überschrift. Zweizeilige Überschriften brachen dadurch an
   der falschen Stelle („Trocknen ist nur / das / Offensichtliche."). Kopf
   und Fließtext bekommen jetzt getrennte Maße. */
.blatt__kopf{max-width:min(76ch,100%)}
.blatt__kopf h2,.blatt__kopf .blatt__titel{max-width:26ch}
.blatt__kopf > p{max-width:58ch}
.ankunft h1{max-width:22ch}

/* Zitatmarke: eine Anreißlinie, keine Leuchtspur. Warm bleibt emittiert. */
.wirkung__zitat{border-left-width:1px}
.wirkfeld--kette .wirkung__zitat{max-width:64ch;margin-top:.2rem}

/* Der Kopf im Messfeld sitzt in .ansage, nicht in .blatt__kopf — die
   Wendung muss dort dieselbe Behandlung bekommen. */
.ansage h2 em{
  font-style:normal;display:block;color:var(--amber-ink);
  font-variation-settings:"wdth" 116,"wght" 780;
}
.ansage h2{max-width:20ch}
.ansage .randspur{margin-top:1.2rem}
.blatt__kopf h2,.blatt__kopf .blatt__titel{max-width:30ch}

/* Der Kopf im Messfeld teilt sich die Fläche mit der Zeichnung und darf
   deshalb nicht so laut werden wie der Einwand in Akt 04. */
#akt-06 .ansage h2{font-size:clamp(1.7rem,1.05rem + 2.25vw,3rem);max-width:none}

/* Abgestufte Verbindlichkeit heißt auch abgestufte Fläche: der Anruf ist
   der erste Weg, nicht der erste von drei gleichen. */
@media (min-width:861px){
  .wege{grid-template-columns:1.35fr 1fr}
}
.weg--erst{background:var(--werkblatt-hoch)}
.weg--erst .weg__was{color:var(--ink-2)}

/* ═══════════════════════════════════════════════════════════════════════
   AKT 03 — DER SCHNITT
   Die Kette behauptete ihre Steigerung bisher nur im Text. Jetzt trägt
   sie eine Zeichnung: viermal dieselbe Stelle durch Fell und Gewebe, in
   identischer Geometrie, damit die vier Schritte vergleichbar sind. Was
   wechselt, ist ausschließlich die Wirkung darin — Feuchte nach oben,
   IR-A in die Tiefe, der Muskelstrang darunter, UV in der Haut. Es ist
   dieselbe Begründung wie beim Gerät in Akt 06: Was eine Kamera nicht
   zeigen kann, zeigt ein Schnitt.
   ═══════════════════════════════════════════════════════════════════════ */

/* Eigener Rahmen, nicht geerbt: `.schnitt` gehört dem Stall-Schnitt der
   Modellseiten. Die Detailzeichnung bekommt ihr Feld wie im Blattkatalog. */
.schnittbild{
  display:block;width:100%;height:auto;
  border:1px solid var(--riss);background:var(--werkblatt-hoch);
}

/* Anreißlinien und Schichtgrenzen */
.sn-linie{stroke:var(--riss);stroke-width:1;fill:none;vector-effect:non-scaling-stroke}
.sn-geraet{stroke:var(--ink);stroke-width:1.6;fill:none;vector-effect:non-scaling-stroke}
.sn-text{
  font-family:"Azeret Mono",monospace;font-size:8.5px;
  fill:var(--ink-3);letter-spacing:.09em;
}
.sn-text--stark{fill:var(--amber-ink)}
/* Die wirksame Schicht des jeweiligen Schrittes */
.sn-aktiv{fill:var(--amber)}
/* Emittiert = warm. IR-B/-C leisten hier nichts und bleiben deshalb grau,
   nicht blau: Blau ist in dieser Seite reserviert für unbestrahlt. */
.sn-strahl{stroke:var(--amber);stroke-width:1.5;fill:var(--amber);vector-effect:non-scaling-stroke}
.sn-strahl--offen{stroke-dasharray:4 3.5}
.sn-strahl--offen.sn-spitze{stroke-dasharray:none}
.sn-matt{stroke:var(--ink-3);stroke-width:1.3;fill:none;vector-effect:non-scaling-stroke}
.sn-luft{stroke:var(--ink-2);stroke-width:1.2;fill:var(--ink-2);vector-effect:non-scaling-stroke}
.sn-feuchte{stroke:var(--ink-3);stroke-width:1;fill:var(--ink-3);vector-effect:non-scaling-stroke}
.sn-muskel{stroke:var(--amber-ink);stroke-width:1.4;fill:none;vector-effect:non-scaling-stroke}
.sn-spitze{stroke:none}

/* Ab dieser Breite steht die Zeichnung neben dem Text, statt darunter —
   die rechte Blatthälfte war in diesem Akt vorher leer. */
@media (min-width:1040px){
  .wirkfeld--kette .wirkung{
    grid-template-columns:1.9rem minmax(0,1fr) clamp(250px,26%,340px);
    column-gap:clamp(1.2rem,2.6vw,2.8rem);
  }
  .wirkfeld--kette .wirkung__name{grid-column:2 / 4}
  
}

/* Nachzug: `grid-row:2 / -1` zählt gegen das *explizite* Raster, und das
   hat hier keine Zeilen — die Zeichnung landete dadurch in Zeile 1 und
   verdrängte den Text nach unten. Ein großzügiger Span trifft jede
   Gliedlänge, auch das vierzeilige Glied „Entspannen". */

.sn-vermerk{fill:var(--riss);letter-spacing:.12em}

/* ═══════════════════════════════════════════════════════════════════════
   AKT 03 — VIER PHASEN, AUFKLAPPBAR                        2026-08-29
   Die Kette stand vorher vollständig offen da: gut zu lesen, aber ohne
   Übersicht — man sah nie alle vier Schritte gleichzeitig. Jetzt ist der
   Akt zuerst eine Übersicht und auf Wunsch eine Erklärung. Der erste
   Schritt steht offen, damit die Bauart sofort erkennbar ist.

   Wichtig für die Übersicht: Jede Kopfzeile trägt eine Tiefenmarke —
   dieselben fünf Schichten wie in der großen Zeichnung, nur ohne
   Beschriftung. Übereinander gelesen wandert das gefüllte Band nach unten
   und am Ende zurück in die Haut. Die Steigerung ist damit auch im
   zugeklappten Zustand sichtbar, statt hinter einem Klick zu verschwinden.

   Das Konzeptpapier schloss Akkordeons aus. Diese Entscheidung ist am
   2026-08-29 auf Wunsch des Auftraggebers aufgehoben — und sie trägt hier,
   weil der zugeklappte Zustand die Aussage behält statt sie zu verstecken.
   ═══════════════════════════════════════════════════════════════════════ */

.phase--kern .pos{background:var(--amber-flaeche);border-color:var(--amber-flaeche);color:#fff}

/* Aufklappen über die Rasterzeile — kein Höhen-Getrickse. */

.phase__innen .wirkung__was{max-width:62ch;grid-column:1}
.phase__innen .wirkung__zitat{max-width:64ch;grid-column:1;margin-top:.15rem}
.phase__innen .wirkung__koennen{grid-column:1;margin-top:.5rem}

/* ═══════════════════════════════════════════════════════════════════════
   AKT 03 — NEBENEINANDER                                    2026-08-29
   Korrektur der Fassung von heute Vormittag: Die vier Phasen klappen ab
   1040 px **waagerecht** auf, wie die Reiter einer Registermappe. Eine
   Phase offen, drei als schmale Streifen mit hochgestelltem Namen.

   Der Gewinn gegenüber der senkrechten Fassung: Die vier Tiefenmarken
   stehen jetzt nebeneinander in einer Reihe. Von links nach rechts
   gelesen wandert das gefüllte Band nach unten und am Ende zurück in die
   Haut — die Steigerung des Aktes ist damit in einem Blick erfasst,
   ohne dass irgendetwas aufgeklappt sein müsste.

   Die Breite läuft über `grid-template-columns` mit fr-Einheiten, nicht
   über animierte Breiten: dasselbe Mittel wie beim senkrechten Aufklappen
   über `grid-template-rows`, und es löst keinen Layout-Thrash aus.
   Unter 1040 px bleibt die senkrechte Fassung; ein Reiterband aus vier
   Streifen ist auf einem Telefon nicht bedienbar.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width:1040px){
  
  
  
  
  
    
  

  
  

    
  
  
  
  

  /* ── Der offene Reiter ── */
  
  
  
  
  
  @keyframes phase-auf{ from{opacity:0} to{opacity:1} }
  

  /* Der Streifen ist selbst die Schaltfläche — er bekommt seine Rückmeldung
     über den Grund, nicht über ein zusätzliches Zeichen. */
  
  
}

/* ── Zwei Ehrlichkeiten am Reiter ──────────────────────────────────────
   Die Tiefenmarke des offenen Reiters saß am rechten Rand seines Kopfes
   und riss die Reihe der vier Marken auseinander, sobald ein mittlerer
   Reiter gezogen war. Sie rückt neben die Positionsnummer, damit die
   Reihenfolge über alle vier erhalten bleibt.

   Und: Es ist immer eine Phase offen. Ein Minuszeichen am offenen Reiter
   verspricht ein Zuklappen, das es nicht gibt — das Zeichen erscheint
   deshalb nur an den geschlossenen. Gilt in beiden Fassungen. */

@media (min-width:1040px){
  
  .phase[data-offen="ja"] .pos{order:-2}
  
}

/* ═══════════════════════════════════════════════════════════════════════
   LUFTKREISLAUF — MARKEN UND LEGENDE                        2026-08-29
   Vorher standen die vollständigen Anschriften mitten in der Zeichnung
   und verdeckten genau das, was sie erklären sollten. Jetzt trägt die
   Zeichnung nur noch drei Nummern, und der Text steht als Legende
   darunter — außerhalb des Bildes, aber in Lesereihenfolge daneben.
   Berührung oder Tastaturfokus einer Legendenzeile hebt die zugehörige
   Nummer hervor und umgekehrt; das ersetzt den Tooltip, ohne dass man
   etwas suchen muss.

   Die Sätze wechseln mit der Betriebsart: Ohne Strahler gibt es keine
   Restwärme, und im Sommer wird gar nicht gewärmt. Siehe SCHRITTE in
   blatt.js.
   ═══════════════════════════════════════════════════════════════════════ */
.kanal__marken{position:absolute;inset:0;pointer-events:none;z-index:3}
.kanalmarke{
  position:absolute;transform:translate(-50%,-50%);
  display:grid;place-items:center;
  width:1.45rem;height:1.45rem;border-radius:50%;
  font-family:"Azeret Mono",monospace;font-size:.63rem;font-weight:600;
  letter-spacing:.02em;
  color:rgba(237,239,232,.86);
  background:rgba(14,17,11,.78);
  border:1px solid rgba(237,239,232,.34);
  backdrop-filter:blur(2px);
  transition:background-color var(--schnell) linear,border-color var(--schnell) linear,
             color var(--schnell) linear,transform var(--schnell) var(--daempfung);
}
.kanalmarke[data-hell]{
  background:var(--amber-flaeche);border-color:var(--amber-flaeche);color:#fff;
  transform:translate(-50%,-50%) scale(1.18);
}

.kanal__legende{
  margin:.95rem 0 0;padding:.95rem 0 0;list-style:none;
  border-top:1px solid var(--riss);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;background:var(--riss);
}
.kanal__legende li{
  background:var(--grund);
  padding:.1rem clamp(.6rem,1.4vw,1rem) .1rem 0;
  display:grid;grid-template-columns:1.45rem minmax(0,1fr);
  column-gap:.6rem;row-gap:.12rem;align-items:start;
  cursor:default;
}
.kanal__legende li:first-child{padding-left:0}
.kanal__legende li + li{padding-left:clamp(.6rem,1.4vw,1rem)}
.kanal__legende b{
  grid-row:1 / 3;
  display:grid;place-items:center;width:1.45rem;height:1.45rem;border-radius:50%;
  border:1px solid var(--riss);
  font-family:"Azeret Mono",monospace;font-size:.63rem;font-weight:600;
  color:var(--ink-2);
  transition:background-color var(--schnell) linear,border-color var(--schnell) linear,color var(--schnell) linear;
}
.kanal__legende li[data-hell] b{background:var(--amber-flaeche);border-color:var(--amber-flaeche);color:#fff}
.schritt__satz{
  grid-column:2;font-size:.86rem;line-height:1.4;
  color:var(--ink);
}
.schritt__zusatz{
  grid-column:2;font-family:"Azeret Mono",monospace;
  font-size:.58rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);
}
.kanal__legende li:focus-visible{outline:2px solid var(--fokus);outline-offset:2px}

@media (max-width:860px){
  .kanal__legende{grid-template-columns:1fr;gap:1px}
  .kanal__legende li,
  .kanal__legende li + li{padding:.55rem 0 .55rem 0}
}

/* Bühne und Legende sind ein Rasterkind: Als getrennte Kinder belegte die
   Legende die rechte Spalte und schob die Bedienleiste in eine neue Zeile. */
.kanal__bild{min-width:0}

/* Die Legende trennte ihre Spalten über einen 1px-Raster-Spalt vor eigenem
   Hintergrund. Im einspaltigen Fall lag dieser Hintergrund frei und ergab
   einen dunklen Streifen über der Liste. Echte Linien statt Durchscheinen. */
.kanal__legende{background:none;gap:0}
.kanal__legende li{background:none}
.kanal__legende li + li{border-left:1px solid var(--riss)}
@media (max-width:860px){
  .kanal__legende li + li{border-left:0;border-top:1px solid var(--riss)}
}

/* ── 1. Eine Kante ─────────────────────────────────────────────────────
   Die ruhigeren Akte werden nach rechts schmaler, nicht mittig. */
#akt-07,#akt-08,#akt-09{--masse:min(1560px,100%)}
@media (min-width:1000px){
  #akt-07 .blatt,#akt-07 .scharnier__innen,
  #akt-08 .blatt{padding-right:calc(var(--rand) + clamp(0px,9vw,150px))}
  #akt-09 .blatt{padding-right:calc(var(--rand) + clamp(0px,14vw,260px))}
}

/* ── 2. Die Typenleiter ────────────────────────────────────────────────
   1440 px: 72 · 58 · 52 · 44 · 40 — 390 px: 30 · 28 · 26 · 24 · 23. */
.ankunft h1{font-size:clamp(1.9rem,.55rem + 4.9vw,4.5rem)}
.blatt__kopf h2,.blatt__kopf .blatt__titel{font-size:clamp(1.6rem,.6rem + 3.1vw,3.25rem)}
#akt-02 .blatt__kopf h2{font-size:clamp(1.75rem,.7rem + 3.4vw,3.6rem)}
#akt-06 .ansage h2{font-size:clamp(1.55rem,.75rem + 2.5vw,2.75rem)}
#akt-07 .scharnier__text h2,
#akt-08 .blatt__kopf h2,
#akt-09 .blatt__kopf h2{font-size:clamp(1.45rem,.55rem + 2.5vw,2.5rem)}

/* ── 3. Der Blattkopf nutzt die Breite ─────────────────────────────────
   Überschrift links, Vorspann und Randspur rechts. Halbiert die Höhe des
   Kopfes und gibt dem Auge eine zweite Spalte, der es folgen kann. */
@media (min-width:1000px){
  #akt-04 .blatt__kopf,
  #akt-03 .blatt__kopf,
  #akt-05 .blatt__kopf,
  #berater .blatt__kopf,
  #akt-08 .blatt__kopf,
  #akt-09 .blatt__kopf{
    max-width:none;
    display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
    column-gap:clamp(2rem,4.5vw,4.5rem);align-items:end;
  }
  #akt-04 .blatt__kopf h2,
  #akt-03 .blatt__kopf h2,
  #akt-05 .blatt__kopf h2,
  #berater .blatt__kopf h2,
  #akt-08 .blatt__kopf h2,
  #akt-09 .blatt__kopf h2{max-width:none;margin-bottom:0;grid-row:1/3}
  #akt-04 .blatt__kopf > p,
  #akt-03 .blatt__kopf > p,
  #akt-05 .blatt__kopf > p,
  #berater .blatt__kopf > p,
  #akt-08 .blatt__kopf > p,
  #akt-09 .blatt__kopf > p{max-width:52ch;grid-column:2}
  #akt-04 .blatt__kopf .randspur,
  #akt-03 .blatt__kopf .randspur{grid-column:2;margin-top:.9rem;max-width:52ch}
}

/* ── 6. Tap-Ziele ──────────────────────────────────────────────────────
   Gemessen bei 390 px: 22 Ziele unter 40 px, davon die gesamte Fußzeile
   mit 16 px Höhe. PRODUCT.md führt große Tap-Ziele als Produktanforderung,
   weil im Stall mit Handschuhen und kalten Fingern gelesen wird. */
@media (max-width:860px){
  .fuss ul{gap:0}
  .fuss li a{display:flex;align-items:center;min-height:44px;padding:.15rem 0}
  .fuss__adresse a{display:inline-flex;align-items:center;min-height:44px}
  .fuss__unten a{display:inline-flex;align-items:center;min-height:44px}
  .randspur a{display:inline-flex;align-items:center;min-height:44px}
  .wissen__zeile{padding-block:.85rem}
}

/* ═══════════════════════════════════════════════════════════════════════
   DIE DREI NACHGELADENEN FOTOS                              2026-08-29
   Gemessen: pferd-profi, gehaeuse-nackt und werkstatt standen alle drei
   bei 2 × 2 px und waren nach vollständigem Durchscrollen immer noch nicht
   geladen. Ursache ist eine Verklemmung: `width:auto` auf einem noch nicht
   geladenen Bild in einer Flexspalte mit `align-items:flex-start` ergibt
   einen Kasten von null — und ein Kasten von null löst `loading="lazy"`
   nie aus. Kein Laden, kein Kasten, kein Laden.

   Damit fehlten drei der vier Fotografien der Seite: das Pferd unter dem
   Profi, die nackte Schale und die Werkbank — also ausgerechnet die
   Belege für „von Hand gebaut". Der Text daneben zog sich in die Länge,
   weil neben ihm nichts stand.

   Die Breite ist jetzt bestimmt, die Höhe folgt dem Seitenverhältnis aus
   den width/height-Attributen. Damit ist der Platz reserviert, bevor das
   Bild da ist — kein Nachrücken beim Laden.
   ═══════════════════════════════════════════════════════════════════════ */
.anwendung__figur img,
.scharnier__bild,
.werkbank img{width:100%;height:auto;max-height:none}
.anwendung__figur{max-width:clamp(260px,32vw,430px)}
.scharnier__figur{max-width:clamp(220px,24vw,330px)}
@media (max-width:900px){
  .anwendung__figur,.scharnier__figur{max-width:min(420px,100%)}
}

/* ── Der Produktberater nutzt die Breite ───────────────────────────────
   Drei Fragen à 132 px untereinander in einer 1290 px breiten Spalte: Die
   Fragen stehen jetzt nebeneinander, wie auf einem Formularbogen. */
@media (min-width:900px){
  .berater{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
  .berater__frage{border-right:1px solid var(--riss);padding-right:clamp(1rem,2vw,1.6rem)}
  .berater__frage:last-of-type{border-right:0}
  .berater__ergebnis{grid-column:1/-1}
}

/* Die letzten drei zu kleinen Ziele: Markenzeichen im Blattkopf, Warenkorb
   und der Zerlegen-Knopf lagen bei 30 bis 37 px Höhe. */
@media (max-width:860px){
  .marke{min-height:44px;min-width:44px;display:flex;align-items:center}
  .korb{min-height:44px}
  
}

/* ═══════════════════════════════════════════════════════════════════════
   DIE BÄNDER — Vergleich und Belege                         2026-08-29
   Akt 05 und 06 trugen zusammen 51 % der mobilen Seitenlänge. Beide
   enthielten lange, vollständig ausgeschriebene Listen: acht Merkmals-
   zeilen und fünf Belegzeilen, jede in voller Höhe, immer offen.

   Jetzt dieselbe Bewegung wie bei den Reitern in Akt 03, aber senkrecht
   und nicht ausschließend — ein Vergleich und ein Belegregister sind
   Listen, keine Abfolge. Die zugeklappte Zeile behält ihre Aussage: beim
   Vergleich den Gruppennamen samt Anriss, beim Beleg den ganzen Satz und
   seine Strichgrammatik. Wer nur überfliegt, hat trotzdem alles gelesen,
   was zählt.
   ═══════════════════════════════════════════════════════════════════════ */
.band{border-top:1px solid var(--ink)}
.band__zeile{border-bottom:1px solid var(--riss-fein)}
.band__zeile:last-child{border-bottom:1px solid var(--ink)}
.band__kopf{font:inherit;letter-spacing:normal;line-height:inherit;margin:0}

.band__schalter{
  width:100%;text-align:left;color:inherit;
  display:grid;grid-template-columns:3.4rem minmax(0,1fr) auto;
  column-gap:clamp(.7rem,1.6vw,1.3rem);row-gap:.32rem;
  align-items:center;
  padding:clamp(.95rem,2vh,1.25rem) 0;
  min-height:58px;
  transition:background-color var(--schnell) var(--daempfung);
}
.band__schalter:hover{background:var(--werkblatt-hoch)}
.band__schalter:focus-visible{outline:2px solid var(--fokus);outline-offset:-2px}
.band__schalter .pos{grid-column:1;justify-self:start}
.band__schalter .pruef__satz,
.band__satz{grid-column:2;grid-row:1}
.band__satz{font-variation-settings:"wdth" 102,"wght" 660;font-size:1.02rem;letter-spacing:-.012em;line-height:1.3}
.band__schalter .pruef__strich{grid-column:2;grid-row:2;margin-top:0;align-self:center}
.band__anriss{
  grid-column:2;grid-row:2;
  font-family:"Azeret Mono",monospace;font-size:.6rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);
}
/* Gezeichnetes Pluszeichen wie am Reiter; die offene Zeile trägt keines,
   weil dort nichts mehr zu öffnen ist. */
.band__zeichen{
  grid-column:3;grid-row:1/3;
  position:relative;width:1.25rem;height:1.25rem;flex:none;
  border:1px solid var(--riss);
}
.band__zeichen::before,.band__zeichen::after{content:"";position:absolute;background:var(--ink-2)}
.band__zeichen::before{left:22%;right:22%;top:50%;height:1px;transform:translateY(-.5px)}
.band__zeichen::after{top:22%;bottom:22%;left:50%;width:1px;transform:translateX(-.5px)}
.band__zeile[data-offen="ja"] .band__zeichen{display:none}

/* Ausgangszustand ist zu, geöffnet wird über das Attribut. So hängt der
   geschlossene Zustand an keiner laufenden Animation — nur das Öffnen ist
   ein Übergang. Ohne Skript fehlt `data-bereit`, dann steht alles offen
   und der Akt bleibt vollständig lesbar. */
.band__inhalt{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--ruhig) var(--daempfung)}
.band__zeile[data-offen="ja"] .band__inhalt,
.band:not([data-bereit]) .band__inhalt{grid-template-rows:1fr}
/* Kein Innenabstand am schrumpfenden Element: Padding bleibt beim
   Zusammenklappen stehen und hält die Zeile offen. Einzug und Luft hängen
   deshalb an den Kindern, die im Überlauf mitverschwinden. */
.band__innen{overflow:hidden;min-height:0;visibility:visible}
.band__innen > *{margin-left:3.4rem}
.band__innen > *:last-child{margin-bottom:clamp(1rem,2.2vh,1.5rem)}
.band[data-bereit] .band__zeile:not([data-offen="ja"]) .band__innen{visibility:hidden;transition:visibility 0s linear var(--ruhig)}
@media (prefers-reduced-motion:reduce){
  .band__inhalt{transition:none}
  .band[data-bereit] .band__zeile:not([data-offen="ja"]) .band__innen{transition:none}
}
.band__innen .pruef__woran{font-size:.88rem;color:var(--ink-2);line-height:1.55;max-width:68ch}
.band__innen .pruef__quelle{
  display:block;margin-top:.5rem;
  font-family:"Azeret Mono",monospace;font-size:.6rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);
}

/* Der Vergleich: Die Merkmalszeilen behalten ihr eigenes Raster und ihre
   Spaltenflucht mit der Kopfzeile — deshalb hier kein Einzug. */
.band--vergleich{border-top:0}
.band--vergleich .band__innen > *{margin-left:0}
.band--vergleich .band__innen > *:last-child{margin-bottom:0}
.band--vergleich .band__schalter{background:var(--grund-tief)}
.band--vergleich .band__schalter:hover{background:var(--werkblatt-hoch)}
.band--vergleich .band__zeile:last-child{border-bottom:0}
.band--vergleich .vergleich__zeile:last-child{border-bottom:1px solid var(--riss-fein)}

@media (max-width:760px){
  .band__schalter{grid-template-columns:2.4rem minmax(0,1fr) auto;column-gap:.7rem}
  .band__innen > *{margin-left:2.4rem}
  .band--vergleich .band__innen > *{margin-left:0}
}

/* ═══ SCHNITTZEICHNUNGEN AUF DEN FACHSEITEN ════════════════════════════
   Die vier Schnitte standen auf der Hauptseite in einem Reiterband und
   machten aus Akt 03 einen Apparat. Sie gehören dorthin, wo erklärt wird:
   Trocknen auf „Warum Pferdesolarien?", Wärmen und Entspannen auf den
   Infrarot-Text, Besonnen auf den UV-Text. Dort sind sie Beleg statt
   Bedienung — und die Fachseiten waren bisher reiner Fließtext. */
.fachschnitt{margin:1.6rem 0 2rem;max-width:min(30rem,100%)}
.fachschnitt figcaption{
  margin-top:.5rem;
  font-family:"Azeret Mono",monospace;font-size:.58rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);line-height:1.5;
}
.fachschnitt__vor{margin-top:1.4rem;color:var(--ink-2)}
.fachschnitte{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1.6rem;margin-bottom:1rem}
.fachschnitte .fachschnitt{margin:1rem 0 0;max-width:none}
@media (max-width:640px){ .fachschnitte{grid-template-columns:1fr} }

/* ── Akt 03: vier Aussagen statt eines Reiterbands ─────────────────────
   Vorher vier Reiter mit Text, Zitat, Schnittzeichnung und Modellzeile —
   ein Bedienelement für eine Aussage, die in einen Satz passt. */
.kette{
  border-top:1px solid var(--riss);
  display:grid;grid-template-columns:1fr;
}
@media (min-width:900px){
  .kette{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(2rem,4vw,4rem)}
}
.kette__glied{
  display:grid;grid-template-columns:1.9rem minmax(0,1fr);
  column-gap:clamp(.9rem,2vw,1.5rem);row-gap:.45rem;align-items:start;
  padding:clamp(1.3rem,2.8vh,1.9rem) 0;
  border-bottom:1px solid var(--riss);
}
.kette__glied .pos{grid-row:1;grid-column:1;margin-top:.1rem}
.kette__name{
  grid-column:2;grid-row:1;
  font-size:clamp(1.2rem,1rem + .9vw,1.6rem);
  font-variation-settings:"wdth" 112,"wght" 740;letter-spacing:-.018em;line-height:1.1;
}
.kette__satz{grid-column:2;max-width:52ch;color:var(--ink-2);line-height:1.55}
.kette__glied .wirkung__zitat{grid-column:2;max-width:52ch;margin-top:.2rem}
.kette__glied .wirkung__koennen{grid-column:2;margin-top:.45rem}
.kette__glied--kern .pos{background:var(--amber-flaeche);border-color:var(--amber-flaeche);color:#fff}
.kette__glied--kern .kette__name{color:var(--amber-ink)}
/* Ein Zeichen hinter jedem Namen (Wunsch des Auftraggebers, 2026-09-25):
   Föhn, warme Strahlen, Lotus, Sonne. Strich wie die Pfeile der Seite,
   in Amber, damit es Auszeichnung bleibt und nicht zur Bebilderung wird. */
.kette__zeichen{
  display:inline-block;width:1.05em;height:1.05em;margin-left:.4em;vertical-align:-.14em;
  color:var(--amber);stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}

/* ── Akt 04: die zwanzig Minuten zum Ziehen ────────────────────────────
   Stand hier zwischenzeitlich als stille Drei-Marken-Kurve — auf
   ausdrücklichen Wunsch des Auftraggebers (2026-09-19) wieder der
   Schieberegler, den die Seite vor dem Laravel-Port schon hatte. Die
   Zieh-Logik in blatt.js (baueAchse()) war die ganze Zeit vorhanden, nur
   ohne dieses Markup ohne Wirkung. */
.achse{margin-top:1.8rem}
.achse__spur{
  position:relative;height:78px;border:1px solid var(--riss);overflow:hidden;
  background:linear-gradient(to right,color-mix(in srgb,var(--kalt) 16%,var(--werkblatt-hoch)) 0%,var(--werkblatt-hoch) 42%,color-mix(in srgb,var(--amber-lo) 34%,var(--werkblatt-hoch)) 100%);
  cursor:ew-resize;touch-action:none;
}
.achse__marke{
  position:absolute;top:-1px;bottom:-1px;width:1px;background:var(--ink);
  /* Der Lauf ist um die halbe Markenbreite eingerückt, damit sie an beiden
     Enden vollständig im Feld steht statt über den Rand zu ragen. */
  left:calc(6px + var(--stelle,0) * (100% - 12px));
  pointer-events:none;
}
.achse__marke::after{
  content:"";position:absolute;left:-5px;top:-5px;width:11px;height:11px;background:var(--amber);
}
.achse__fell{position:absolute;inset:0;pointer-events:none}
.achse__legende{display:flex;justify-content:space-between;gap:1rem;margin-top:.75rem}
.achse__legende span:last-child{text-align:right}
.achse__ablesung{
  display:flex;align-items:baseline;gap:.9rem;margin-top:1.2rem;
  padding-top:1rem;border-top:1px solid var(--ink);flex-wrap:wrap;
}
.achse__zeit{font-family:"Azeret Mono",monospace;font-size:clamp(1.8rem,1.2rem + 2.4vw,3rem);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.03em;line-height:1}
.achse__lage{font-size:.95rem;color:var(--ink-2);max-width:36ch}

/* ═══ KONFIGURATOR — die Ausführung wählen ═════════════════════════════
   Kein eigenes Formularvokabular: Die Wahlknöpfe sind dieselben wie im
   Produktberater, die Trennung ist dieselbe Anreißlinie wie im Blatt.
   ══════════════════════════════════════════════════════════════════════ */
.konfig{display:flex;flex-direction:column;margin-top:1rem}
.konfig__achse{
  display:grid;grid-template-columns:minmax(9rem,14rem) 1fr;gap:.6rem 1.2rem;
  align-items:start;padding:.9rem 0;border-bottom:1px solid var(--riss-fein);
}
.konfig__marke{
  display:flex;align-items:baseline;gap:.6rem;
  font-size:.9rem;color:var(--ink-2);padding-top:.6rem;
}
.konfig__ergebnis{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;
  gap:1rem 2rem;padding:1.1rem 0 .9rem;border-top:1px solid var(--ink);
}
.konfig__preisblock{display:flex;flex-direction:column;gap:.15rem;min-width:12rem}
.konfig__preis{
  font-family:"Azeret Mono",monospace;font-weight:500;
  font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.konfig__preis[data-offen="ja"]{font-size:clamp(1.1rem,1rem + .5vw,1.35rem);color:var(--ink-3)}
.konfig__mwst{font-size:.74rem;color:var(--ink-3);margin-top:.35rem}
.konfig__kennung{display:flex;flex-direction:column;gap:.2rem;text-align:right}
.konfig__kennung .mass{font-size:.82rem;color:var(--ink-2)}
.konfig__versand{font-size:.8rem;color:var(--ink-3);line-height:1.7;margin-top:.7rem}
.konfig__versand .mass{color:var(--ink-2)}
@media (max-width:680px){
  .konfig__achse{grid-template-columns:1fr;gap:.5rem}
  .konfig__marke{padding-top:0}
  .konfig__kennung{text-align:left}
}

/* ═══ LIEFERSCHEIN — der Warenkorb als Positionsliste ══════════════════
   Dieselbe Grammatik wie die Stückliste: Nummer im Rand, Bezeichnung,
   Beleg darunter, Betrag rechtsbündig auf der Ziffernachse.
   ══════════════════════════════════════════════════════════════════════ */
.korbposten{
  display:grid;grid-template-columns:1.9rem 1fr auto;gap:.15rem .7rem;
  padding:.85rem 0;border-bottom:1px solid var(--riss-fein);
  align-items:baseline;
}
.korbposten__nr{
  font-family:"Azeret Mono",monospace;font-size:.68rem;color:var(--ink-3);
  font-variant-numeric:tabular-nums;grid-row:1 / span 2;
}
.korbposten__name{font-size:.92rem;font-variation-settings:"wdth" 100,"wght" 560}
.korbposten__betrag{
  font-family:"Azeret Mono",monospace;font-size:.88rem;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.korbposten__beleg{
  grid-column:2 / span 2;display:flex;flex-wrap:wrap;align-items:center;
  gap:.35rem .8rem;font-size:.7rem;color:var(--ink-3);
}
.korbposten__schluessel{font-family:"Azeret Mono",monospace;letter-spacing:.02em}
.korbposten__menge{display:flex;align-items:center;gap:.1rem;margin-left:auto}
.korbposten__stufe,.korbposten__weg{
  appearance:none;background:transparent;border:1px solid var(--riss);
  color:var(--ink-2);font:inherit;font-size:.8rem;line-height:1;
  min-width:30px;min-height:30px;cursor:pointer;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  transition:border-color var(--schnell) var(--daempfung),color var(--schnell) var(--daempfung);
}
.korbposten__stufe:hover,.korbposten__weg:hover{border-color:var(--ink);color:var(--ink)}
.korbposten__zahl{
  font-family:"Azeret Mono",monospace;font-size:.78rem;min-width:2.1rem;
  text-align:center;font-variant-numeric:tabular-nums;
}
.korbposten__weg{margin-left:.4rem}
.korbposten[data-offen="ja"] .korbposten__betrag{color:var(--ink-3);font-size:.76rem}

.korbsumme{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.korbsumme__hinweis{font-size:.7rem;color:var(--ink-3);margin:.35rem 0 1rem}

/* ═══ ZÄHLWERK — die Summe springt um wie im Münzautomaten ═════════════
   Die Geräte rechnen mit Münz- und Chipkartenautomaten ab. Dass die Summe
   ihre Ziffern rollt statt sie auszutauschen, ist darum kein Effekt,
   sondern ein Zitat aus dem Gerät. Rechts beginnt die Bewegung, nach links
   läuft sie mit Verzug nach — so arbeitet ein mechanisches Zählwerk.
   ══════════════════════════════════════════════════════════════════════ */
.zaehlwerk{display:inline-flex;align-items:baseline;font-variant-numeric:tabular-nums}
.zaehlwerk__stelle{
  display:inline-block;overflow:hidden;height:1em;line-height:1;
  vertical-align:baseline;
}
.zaehlwerk__walze{
  display:block;
  transform:translateY(calc(var(--ziffer, 0) * -1em));
  transition:transform .42s cubic-bezier(.2,.9,.2,1);
  transition-delay:var(--verzug, 0ms);
}
.zaehlwerk__walze span{display:block;height:1em;line-height:1}
.zaehlwerk__fest{display:inline-block;line-height:1}
@media (prefers-reduced-motion: reduce){
  .zaehlwerk__walze{transition:none;transition-delay:0ms}
}

/* Eine frisch eingetragene Position zieht ihre Anreißlinie selbst. */
@keyframes anreissen{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.korbposten--neu{border-bottom-color:transparent;position:relative}
.korbposten--neu::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--ink);transform-origin:left;
  animation:anreissen .5s cubic-bezier(.2,.9,.2,1) forwards;
}
@media (prefers-reduced-motion: reduce){
  .korbposten--neu{border-bottom-color:var(--riss-fein)}
  .korbposten--neu::after{animation:none;transform:scaleX(1)}
}
.konfig__taten{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.5rem;margin-top:.7rem}
.konfig__legen{align-self:flex-end}
.konfig__teilen{margin-top:.45rem;align-self:flex-end;min-height:36px;padding:.45rem .8rem;font-size:.76rem}
@media (max-width:680px){
  .konfig__taten{flex-direction:column-reverse;align-items:stretch}
  .konfig__legen,.konfig__mietkauf,.konfig__teilen{align-self:stretch;justify-content:center;width:100%}
}

/* ═══ KASSE — das Auftragsblatt ════════════════════════════════════════
   Ein Formular in der Grammatik des Blatts: Beschriftung links, Eingabe
   rechts, Anreißlinie darunter. Keine Kästen, keine Radien.
   ══════════════════════════════════════════════════════════════════════ */
.kasse__spalten{display:grid;grid-template-columns:1fr;gap:var(--sp)}
@media (min-width:960px){
  .kasse__spalten{grid-template-columns:minmax(0,1fr) 22rem;gap:clamp(2rem,4vw,4rem);align-items:start}
  .kasse__schiene{position:sticky;top:calc(var(--kopfhoehe,64px) + 1.5rem)}
}
.kasse__feld{
  display:grid;grid-template-columns:minmax(9rem,14rem) minmax(0,1fr);
  gap:.5rem 1.2rem;align-items:center;
  padding:.6rem 0;border-bottom:1px solid var(--riss-fein);
}
.kasse__feld--breit{grid-template-columns:1fr;align-items:start}
.kasse__feld label{font-size:.9rem;color:var(--ink-2)}
.kasse__feld input,.kasse__feld select,.kasse__feld textarea{
  width:100%;padding:.55rem .7rem;min-height:44px;
  border:1px solid var(--ink);background:var(--werkblatt-hoch);
  font:inherit;font-size:.95rem;color:var(--ink);
}
.kasse__feld textarea{min-height:5.5rem;line-height:1.55;resize:vertical}
.kasse__feld input:focus-visible,.kasse__feld select:focus-visible,.kasse__feld textarea:focus-visible{
  outline:2px solid var(--fokus);outline-offset:1px;
}
.kasse__schiene{border:1px solid var(--ink);background:var(--werkblatt-hoch);padding:var(--sp)}
.kasse__schiene-kopf{
  font-family:"Azeret Mono",monospace;font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:.6rem;
}
.kasse__posten{margin-bottom:.9rem}
.kasse__zeile{
  display:grid;grid-template-columns:1fr auto;gap:.1rem .8rem;
  padding:.6rem 0;border-bottom:1px solid var(--riss-fein);font-size:.88rem;
}
.kasse__zeile .mass{font-size:.85rem}
.kasse__zeile-beleg{grid-column:1 / span 2;font-size:.68rem;color:var(--ink-3);font-family:"Azeret Mono",monospace}
.kasse__gutschein{margin-bottom:1.1rem;padding-bottom:1.1rem;border-bottom:1px solid var(--riss-fein)}
.kasse__gutschein-eingabe{display:flex;gap:.6rem}
.kasse__gutschein-eingabe input{
  flex:1 1 auto;min-width:0;padding:.55rem .7rem;min-height:44px;
  border:1px solid var(--ink);background:var(--werkblatt-hoch);font:inherit;font-size:.95rem;color:var(--ink);
}
.kasse__gutschein-eingabe input:focus-visible{outline:2px solid var(--fokus);outline-offset:1px}
.kasse__gutschein-eingabe .tat{flex:0 0 auto}
.kasse__gutschein [data-kasse-gutschein-meldung]:empty{display:none}
.kasse__gutschein [data-kasse-gutschein-meldung]{margin-top:.6rem}
.kasse__rechnung{margin-bottom:1rem}
.kasse__rechnung .blattzeile:last-child{
  border-bottom:0;border-top:1px solid var(--ink);margin-top:.3rem;padding-top:.7rem;
  font-variation-settings:"wdth" 104,"wght" 700;
}
.kasse__knopf{width:100%;justify-content:center}
.kasse__hinweis{font-size:.74rem;color:var(--ink-3);line-height:1.65;margin-top:.8rem}
.kasse__fehler{
  border-left:3px solid var(--amber);background:var(--werkblatt-tief);
  padding:.9rem 1.1rem;margin-bottom:var(--sp);font-size:.92rem;
}
.kasse__fehler ul{list-style:none;margin-top:.4rem;color:var(--ink-2)}

/* ═══ BESTÄTIGUNG ══════════════════════════════════════════════════════ */
.bestaetigung{display:grid;grid-template-columns:1fr;gap:var(--sp)}
@media (min-width:960px){
  .bestaetigung{grid-template-columns:minmax(0,1fr) 20rem;gap:clamp(2rem,4vw,4rem);align-items:start}
}
.bestaetigung__schluessel{font-family:"Azeret Mono",monospace;font-size:.7rem;color:var(--ink-3)}
.bestaetigung__rechnung{margin-top:1.4rem;max-width:30rem}
.bestaetigung__summe{
  border-bottom:0;border-top:1px solid var(--ink);margin-top:.3rem;padding-top:.7rem;
  font-variation-settings:"wdth" 104,"wght" 700;
}
.bestaetigung__anschrift{border:1px solid var(--ink);background:var(--werkblatt-hoch);padding:var(--sp)}
.bestaetigung__anschrift address{font-style:normal;line-height:1.7;margin-bottom:1.2rem}
/* Die Auswahl am Zubehör (2026-09-26): Größe, Münztyp, Farbe, Chipkarten
   dazu. Dieselben Wahlknöpfe wie im Konfigurator, nur untereinander statt
   in zwei Spalten — die Schiene ist dafür zu schmal. */
.artikelwahl{display:flex;flex-direction:column;gap:.9rem;margin:1.1rem 0}
.artikelwahl__achse{display:flex;flex-direction:column;gap:.45rem}
.artikelwahl .konfig__marke{padding-top:0}
.bestaetigung__notiz{font-size:.88rem;color:var(--ink-2);line-height:1.6;margin-bottom:1.2rem;white-space:pre-line}

/* ═══ RECHTSTEXTE ══════════════════════════════════════════════════════
   Lange Fließtexte in der Schriftgrammatik des Blatts. Schmale Spalte,
   weil hier gelesen und nicht überflogen wird.
   ══════════════════════════════════════════════════════════════════════ */
.rechtstext{max-width:38rem;font-size:.96rem;line-height:1.75;color:var(--ink-2)}
.rechtstext h2,.rechtstext h3,.rechtstext h4{
  font-variation-settings:"wdth" 104,"wght" 700;color:var(--ink);
  margin:2rem 0 .6rem;line-height:1.25;
  /* Die Abschnitte tragen Anker (#muster-widerrufsformular); der Sprung
     dorthin darf nicht unter dem Kopf landen. */
  scroll-margin-top:clamp(4.5rem,11vh,6.5rem);
}
.rechtstext h2{font-size:1.3rem}
.rechtstext h3{font-size:1.1rem}
.rechtstext h4{font-size:1rem}
.rechtstext p{margin-bottom:.9rem}
.rechtstext ul,.rechtstext ol{margin:0 0 .9rem 1.2rem}
.rechtstext li{margin-bottom:.35rem}
.rechtstext a{color:var(--ink);text-underline-offset:.2em}
.rechtstext strong,.rechtstext b{color:var(--ink);font-variation-settings:"wdth" 100,"wght" 640}
.rechtstext hr{border:0;border-top:1px solid var(--riss);margin:1.8rem 0}
.rechtstext table{border-collapse:collapse;width:100%;margin-bottom:1rem;font-size:.9rem}
.rechtstext th,.rechtstext td{text-align:left;padding:.5rem .8rem .5rem 0;border-bottom:1px solid var(--riss-fein)}
.kasse__zahlung{border-top:1px solid var(--riss);padding-top:.9rem;margin-bottom:1rem}
/* Als fieldset (D7.07, 2026-09-24) — dieselbe Gestalt wie das div davor:
   Die Legende sitzt nicht auf der Rahmenlinie, sondern darunter. */
fieldset.kasse__zahlung{border:0;border-top:1px solid var(--riss);margin:0 0 1rem;padding:.9rem 0 0;min-width:0}
fieldset.kasse__zahlung > legend{float:left;width:100%;padding:0}
fieldset.kasse__zahlung > legend + *{clear:both}
.kasse__gruppe{border:0;margin:0;padding:0;min-width:0}
.kasse__gruppe > legend{float:left;width:100%;padding:0}
.kasse__gruppe > legend + *{clear:both}
.kasse__zahlwahl{
  display:flex;align-items:flex-start;gap:.7rem;padding:.6rem 0;
  border-bottom:1px solid var(--riss-fein);font-size:.9rem;cursor:pointer;
}
.kasse__zahlwahl:last-child{border-bottom:0}
.kasse__zahlwahl input{margin-top:.25rem;min-width:18px;min-height:18px;accent-color:var(--ink)}
.kasse__zahlanriss{font-size:.78rem;color:var(--ink-3);line-height:1.5}
/* Das Passwortfeld fürs Konto nur, wenn das Konto angehakt ist. */
.kasse__zahlwahl:has(> input[name="konto"]:not(:checked)) + .kasse__kontopasswort{display:none}
.bestaetigung__zahlung{
  font-family:"Azeret Mono",monospace;font-size:.78rem;line-height:1.85;
  color:var(--ink-2);white-space:pre-line;margin-bottom:1.3rem;
  padding-bottom:1.1rem;border-bottom:1px solid var(--riss);
}
.kontakt__direkt{margin-bottom:.4rem}
.kontakt__direkt .tat{width:100%}

/* ═══ AKT 08 — HÄUFIGE FRAGEN ═══════════════════════════════════════════
   Neuer Inhaltstyp, keine bestehende Vorlage zu verletzen. Reine
   Werkzeuge aus dem übrigen Blatt: Anreißlinien, native <details> statt
   Skript, Azeret Mono für die Ziffer — kein Akkordeon-Stil neu erfunden. */
.faq{border-top:1px solid var(--ink)}
.faq__eintrag{border-bottom:1px solid var(--riss);padding:1rem 0}
.faq__frage{
  cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:.75rem;
  font-size:1.02rem;font-variation-settings:"wdth" 106,"wght" 640;
}
.faq__frage::-webkit-details-marker{display:none}
.faq__frage::before{
  content:"+";flex:none;width:1.1rem;
  font-family:"Azeret Mono",monospace;color:var(--amber-ink);
}
.faq__eintrag[open] .faq__frage::before{content:"–"}
.faq__antwort{color:var(--ink-2);margin-top:.6rem;padding-left:1.85rem;max-width:62ch;line-height:1.6}

/* ═══ AKT 05 — BEWERTUNGEN ══════════════════════════════════════════════
   Greift erst, sobald $bewertungen (die auf_startseite-Auswahl, F6) gefüllt
   ist — bis dahin zeigt die Seite den allgemeinen .leerstand-Baustein.
   Eigenes System: Text und Sterne als Daten (App\Models\Bewertung), kein
   Bildschirmfoto mehr. */
/* Das Kundinnen-Video als weitere Stimme (Abschnitt 12.2/12.4): links im
   Telefon, leicht schräg, rechts das Laufband. Das Telefon ist nur wenig
   höher als die Karten (2026-09-23) — es begleitet sie, statt den Akt zu
   bestimmen. Am Telefon steht es zuerst, weil es im Dokument zuerst steht. */
.bewertungen-video-gitter{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(1.8rem,4.5vw,3.6rem);align-items:center;margin-bottom:1.4rem;
}
@media (max-width:760px){
  .bewertungen-video-gitter{grid-template-columns:1fr}
  .bewertungen-video-gitter .telefon{justify-self:start}
}

.bewertungen{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.4rem}

/* ═══ DAS TELEFON ═════════════════════════════════════════════════════
   Das Kundinnen-Video im Gehäuse eines Telefons, reines CSS. Der Schirm hat
   das Format 9 : 19,5 eines heutigen Geräts, das Video darin sein eigenes
   9 : 16 — oben und unten bleibt Schwarz wie beim echten Abspielen,
   abgeschnitten wird nichts. --telefon-b ist die Breite des Schirms und
   damit die einzige Stellschraube für die Größe. Kein Autoplay, kein Ton
   ohne Klick; der Platz steht fest, beim Laden rückt nichts nach. */
/* Seit 2026-09-27 größer, überall (Auftraggeber: „dass man das noch besser
   sieht“): 270 statt 176 px, neben dem Text 250 statt 152, am Telefon 190
   statt 124 — dort steht es dann über dem Text statt daneben. */
.telefon{--telefon-b:270px;margin:0;width:calc(var(--telefon-b) + 16px)}
.telefon__gehaeuse{
  position:relative;padding:8px;border-radius:32px;
  background:linear-gradient(145deg,#2A2D30,#101214 55%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 1px 2px rgba(22,24,26,.25),
    0 22px 44px -20px rgba(22,24,26,.55);
  transform:rotate(-3deg);transform-origin:50% 60%;
}
/* Die Tasten an der Seite: ein Strich rechts, zwei links. */
.telefon__gehaeuse::before,.telefon__gehaeuse::after{
  content:"";position:absolute;width:3px;border-radius:2px;background:#1B1D20;
}
.telefon__gehaeuse::before{right:-2px;top:22%;height:13%}
.telefon__gehaeuse::after{left:-2px;top:18%;height:18%;
  box-shadow:0 calc(var(--telefon-b) * .5) 0 #1B1D20}
.telefon__schirm{
  position:relative;overflow:hidden;border-radius:24px;background:#000;
  aspect-ratio:9/19.5;display:flex;align-items:center;
}
/* Die Kamerainsel oben. */
.telefon__schirm::before{
  content:"";position:absolute;z-index:2;top:9px;left:50%;transform:translateX(-50%);
  width:30%;height:15px;border-radius:9px;background:#000;
  box-shadow:0 0 0 1px rgba(255,255,255,.06);
}
.telefon video{
  display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:contain;background:#000;
}
/* Mit Skript: ein ruhiger Abspielknopf auf dem Standbild statt der
   Bedienleiste; nach dem Klick übernimmt die Leiste des Browsers. Ohne
   Skript bleibt es beim nativen controls-Attribut. */
.telefon__abspielen{
  position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);
  width:52px;height:52px;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;color:var(--ink);
  background:rgba(241,242,236,.9);box-shadow:0 6px 18px -6px rgba(0,0,0,.6);
  transition:transform .2s ease,background .2s ease;
}
.telefon__abspielen svg{width:22px;height:22px;margin-left:3px}
.telefon__abspielen:hover{transform:translate(-50%,-50%) scale(1.06);background:#fff}
.telefon__abspielen:focus-visible{outline:2px solid var(--fokus);outline-offset:3px}
.telefon__abspielen[hidden]{display:none}
@media (prefers-reduced-motion:reduce){ .telefon__abspielen{transition:none} }
/* Am Telefon: kleiner, damit der Text daneben Platz hat. */
@media (max-width:600px){ .telefon,.video-neben .telefon{--telefon-b:190px} .telefon__gehaeuse{border-radius:26px;padding:6px} .telefon__schirm{border-radius:20px} }
.bewertungen__karte{
  margin:0;border:1px solid var(--riss);background:var(--werkblatt-hoch);
  padding:1.3rem 1.4rem;display:flex;flex-direction:column;gap:.9rem;
}
.bewertungen__text{margin:0;line-height:1.55;color:var(--ink)}
.bewertungen__fuss{
  margin-top:auto;display:flex;align-items:baseline;justify-content:space-between;
  gap:.75rem;flex-wrap:wrap;padding-top:.75rem;border-top:1px solid var(--riss-fein);
}
.bewertungen__autor{font-style:normal;font-variation-settings:"wdth" 100,"wght" 600;color:var(--ink)}
.bewertungen__sterne{letter-spacing:.1em;color:var(--riss);white-space:nowrap}
.bewertungen__sterne span[data-voll]{color:var(--amber)}
/* Kundenfoto als eigene Kachel (2026-09-25): dieselbe Karte, das Foto
   füllt sie bis an den Rand, darunter die Unterschrift wie ein Name. */
.bewertungen__karte--foto{padding:0;gap:0;overflow:hidden}
.bewertungen__karte--foto img{
  display:block;width:100%;flex:1 1 auto;min-height:240px;max-height:420px;
  object-fit:cover;object-position:50% 32%;
}
.bewertungen__karte--foto .bewertungen__fuss{margin:0;padding:.8rem 1.4rem .9rem;border-top:1px solid var(--riss)}

/* Das Laufband (2026-09-23, Robin: „Einzelbewertungen als Slider
   durchlaufen lassen"): alle freigegebenen Stimmen in einer Spur, die
   sich ohne Skript mit dem Finger oder der Rollleiste schieben lässt und
   an jeder Karte einrastet. Das Skript lässt sie weiterlaufen, hält an,
   solange Zeiger oder Fokus darauf liegen, und bei reduzierter Bewegung
   ganz. Zwei Karten nebeneinander, wo Platz ist, sonst eine. */
.laufband{min-width:0;display:flex;flex-direction:column;gap:1rem}
.laufband__gesamt{
  display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;margin:0;
  font-family:"Azeret Mono",monospace;font-size:.78rem;letter-spacing:.04em;color:var(--ink-2);
}
.laufband__spur{
  display:flex;gap:1.4rem;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;overscroll-behavior-x:contain;scrollbar-width:none;
  padding-bottom:2px;
}
.laufband__spur::-webkit-scrollbar{display:none}
.laufband__spur:focus-visible{outline:2px solid var(--fokus);outline-offset:4px}
.laufband__spur > .bewertungen__karte{flex:0 0 calc((100% - 1.4rem) / 2);scroll-snap-align:start}
/* Eine Karte je Blick: Sie wird nicht auf die längste Stimme gestreckt,
   sonst steht unter einem kurzen Satz eine halbe Karte Leere. */
@media (max-width:1100px){
  .laufband__spur{align-items:flex-start}
  .laufband__spur > .bewertungen__karte{flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){ .laufband__spur{scroll-behavior:auto} }
.laufband__leiste{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.laufband__knopf[aria-pressed] svg{width:12px;height:12px}
.laufband__knopf{
  width:2.4rem;height:2.4rem;display:grid;place-items:center;flex:none;
  border:1px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;
}
.laufband__knopf[hidden]{display:none}
.laufband__knopf svg{width:15px;height:9px}
.laufband__knopf:hover{background:var(--ink);color:var(--werkblatt)}
.laufband__knopf:focus-visible{outline:2px solid var(--fokus);outline-offset:2px}
.laufband__stand{font-size:.72rem;color:var(--ink-3);min-width:4.5ch;text-align:center}
.laufband__alle{margin-left:auto;font-size:.9rem;color:var(--ink)}

/* ═══ EINWILLIGUNG — eine Frage, zwei gleich große Antworten ══════════
   Ergänzt 2026-09-23 mit reCAPTCHA. Der Banner ist ein Streifen am Fuß,
   kein Vorhang über der Seite: Lesen geht ohne Entscheidung, erst das
   Absenden braucht eine. Zustimmen und Ablehnen sehen gleich aus, damit
   keine Antwort nahegelegt wird. Das Abzeichen von Google ist ausgeblendet;
   den Hinweis trägt jedes Formular unter dem Knopf (.recaptcha-hinweis). */
.grecaptcha-badge{visibility:hidden}
.einwilligung{
  position:fixed;inset:auto 0 0 0;z-index:90;
  max-height:70vh;overflow-y:auto;
  background:var(--werkblatt-hoch);border-top:1px solid var(--ink);
  padding:1rem var(--rand) calc(1rem + env(safe-area-inset-bottom));
}
.einwilligung[hidden]{display:none}
.einwilligung__innen{
  max-width:1560px;margin-inline:auto;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.9rem 2.5rem;
}
.einwilligung__text{flex:1 1 30rem}
.einwilligung__text h2{font-size:.68rem;line-height:1.4;font-variation-settings:normal;margin-bottom:.3rem}
.einwilligung__text p{font-size:.84rem;line-height:1.6;color:var(--ink-2);max-width:92ch}
.einwilligung__wahl{display:flex;gap:.6rem;flex-shrink:0}
.einwilligung__wahl .tat{min-width:8.5rem;justify-content:center;background:transparent;cursor:pointer}
.einwilligung__wahl .tat:hover{background:var(--ink);color:var(--ink-inv)}
@media (max-width:560px){
  .einwilligung__wahl{width:100%}
  .einwilligung__wahl .tat{flex:1;min-width:0}
}

/* Hält blatt.js ein Formular an, weil die Zustimmung fehlt, steht diese
   Sperre vor dem Knopf. Dieselbe Linie wie .kasse__fehler: Es ist eine
   Meldung, kein neues Bauteil. */
.einwilligung-sperre{
  border-left:3px solid var(--amber);background:var(--werkblatt-tief);
  padding:.9rem 1.1rem;margin-bottom:1rem;font-size:.88rem;
}
.einwilligung-sperre:focus{outline:none}
.einwilligung-sperre__wahl{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.2rem;margin-top:.75rem}
.einwilligung-sperre__wahl .tat{cursor:pointer}
.einwilligung-sperre__wahl a{font-size:.84rem;color:var(--ink-2)}

/* Der Stand auf /cookie-einstellungen. Dieselbe Linie wie die Sperre;
   die gewählte Antwort ist gefüllt. */
.einwilligung-stand{
  border-left:3px solid var(--ink);background:var(--werkblatt-tief);
  padding:1rem 1.2rem;margin-block:1.2rem;
}
.einwilligung-stand__wahl{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.8rem}
.einwilligung-stand__wahl .tat{min-width:8.5rem;justify-content:center;background:transparent;cursor:pointer}
.einwilligung-stand__wahl .tat[aria-pressed="true"],
.einwilligung-stand__wahl .tat:hover{background:var(--ink);color:var(--ink-inv)}

/* Platzhalter tragen hier Formathinweise („2026-0001", „ATU…"). Der
   Browservorgabe fehlen 4,5:1 (D7.07, 2026-09-24). */
::placeholder{color:var(--ink-3);opacity:1}

/* ═══ BEWEGUNG ANHALTEN — der Schalter an Dampf und Bühnen (2026-09-24) ═
   Gesetzt von blatt.js, nur wo sich etwas bewegt und „Bewegung reduzieren"
   aus ist. Dieselbe Grammatik wie das Schild der Bühne: Mono, Versalien,
   eine Kante — ein Etikett an der Zeichnung, kein Bedienfeld darüber. */
.bewegung{
  position:absolute;z-index:4;
  display:inline-flex;align-items:center;gap:.5rem;min-height:2.4rem;
  padding:.42rem .75rem;cursor:pointer;
  font-family:"Azeret Mono",monospace;font-size:.6rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);background:var(--werkblatt-hoch);
  border:0;border-top:1px solid var(--riss);border-left:1px solid var(--riss);
}
.bewegung svg{width:10px;height:10px;flex:none}
.bewegung:hover{color:var(--ink)}
.bewegung--unten{right:0;bottom:0}
.bewegung--eckeoben{right:0;top:0;border-top:0;border-bottom:1px solid var(--riss)}
.bewegung--oben{right:var(--rand);top:1rem;border:1px solid var(--riss-inv)}
.bewegung--dunkel{color:rgba(237,239,232,.78);background:rgba(8,10,7,.55);border-color:var(--riss-inv)}
.bewegung--dunkel:hover{color:var(--ink-inv)}

/* 2026-09-25 (Auftraggeber): Gerätebeschreibung in der Modellzeile, Zeile
   unter dem Akt-Kopf von Akt 02. */
.fusszeile__zeile{font-size:.82rem;line-height:1.4;color:var(--ink-2);max-width:38ch}
.fusszeile__neu{font-family:"Azeret Mono",monospace;font-size:.62rem;letter-spacing:.08em;color:var(--kalt);border:1px solid currentColor;padding:.05rem .3rem;margin-inline:.15rem}
.kanal__zeile{font-variation-settings:"wdth" 104,"wght" 680;font-size:1.15rem;letter-spacing:-.01em}

/* 2026-09-25 (Auftraggeber): Die Bühne der Geräte auf den Shop-Karten ohne
   Raster („keine Linien!"). Nur dort, wo ein Gerät gezeichnet wird; die
   Fotokarten bleiben, wie sie sind. Ein heller Grund mit weichem Lichtfleck. */
.ware__buehne:has(canvas){
  background:radial-gradient(ellipse 70% 62% at 50% 46%,#FBFBF8 0%,var(--werkblatt-hoch) 62%,var(--werkblatt) 100%);
}

/* ═══ KUNDENKARTE — wo schon ein ITAA-System hängt (2026-09-26) ═════════
   Grundkarte als Bild aus der eigenen Ablage, Punkte im Dokument. Amber
   ist hier ein Gerät, das Wärme abgibt — dieselbe Farbe wie im Schnitt des
   Höhenrechners. Die Werkstatt steht in Tinte, als Raute. */
/* Seit 2026-09-27 ohne Länderliste daneben. Die Karte bleibt so breit wie
   bisher neben der Liste; über die volle Breite wäre sie auf dem Schirm
   höher als das Fenster. */
.kundenkarte{max-width:64rem;margin-top:clamp(1.4rem,3vw,2.4rem)}
/* Die eigene Überschrift der Karte (2026-09-27, Auftraggeber). */
.kundenkarte__ueberschrift{margin-top:clamp(2.4rem,5vw,4rem)}
.kundenkarte__ueberschrift + .kundenkarte,
.kundenkarte__unterzeile + .kundenkarte{margin-top:clamp(.9rem,1.6vw,1.3rem)}
/* Darunter kleiner, was ein Punkt ist (Auftraggeber, 27.09. abends). */
.kundenkarte__unterzeile{margin-top:.4rem;max-width:60ch;color:var(--ink-2)}
.kundenkarte__bild{position:relative;border:1px solid var(--ink);background:#D9DED8}
.kundenkarte__bild[data-klickbar]{cursor:zoom-in}
.kundenkarte__svg{display:block;width:100%;height:auto}
.kundenkarte__laender text{
  font-family:"Azeret Mono",monospace;font-size:11px;letter-spacing:.14em;
  fill:var(--ink-3);opacity:.8;
}
.kundenkarte__punkte circle{
  fill:var(--amber);fill-opacity:.82;stroke:#fff;stroke-width:.9;
  transition:fill-opacity var(--schnell) linear;
}
.kundenkarte__punkte circle:hover,.kundenkarte__punkte circle[data-aktiv]{fill:var(--amber-ink);fill-opacity:1}
.kundenkarte__werkstatt rect{fill:var(--ink);stroke:#fff;stroke-width:1.2}
.kundenkarte__werkstatt text{
  font-family:"Azeret Mono",monospace;font-size:10px;letter-spacing:.1em;
  fill:var(--ink);paint-order:stroke;stroke:#F4F5F0;stroke-width:3px;
}
.kundenkarte__lupe{
  position:absolute;right:.6rem;bottom:.6rem;
  display:flex;align-items:center;gap:.45rem;min-height:40px;padding:.45rem .8rem;
  background:var(--werkblatt-hoch);border:1px solid var(--ink);color:var(--ink);
  font:inherit;font-size:.78rem;font-variation-settings:"wdth" 94,"wght" 660;cursor:pointer;
}
.kundenkarte__lupe svg{width:16px;height:16px}
.kundenkarte__lupe:hover{background:var(--ink);color:var(--ink-inv)}
.kundenkarte__quelle{margin-top:.7rem;max-width:72ch;font-size:.74rem;line-height:1.55;color:var(--ink-3)}

/* Die große Karte: ein natives <dialog>, das der Knopf öffnet. Der Rahmen
   scrollt, wenn vergrößert ist; ein Punkt nennt seine Angaben unten. */
.kundenkarte__dialog{
  width:min(1200px,calc(100vw - 1.5rem));height:calc(100dvh - 1.5rem);max-height:none;max-width:none;
  margin:auto;padding:0;border:1px solid var(--ink);background:var(--werkblatt-hoch);color:var(--ink);
  display:none;flex-direction:column;
}
.kundenkarte__dialog[open]{display:flex}
.kundenkarte__dialog::backdrop{background:rgba(22,24,26,.62)}
.kundenkarte__kopf{
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  padding:.6rem .8rem;border-bottom:1px solid var(--ink);
}
.kundenkarte__titel{flex:1;min-width:12rem;font-variation-settings:"wdth" 104,"wght" 720;font-size:1rem}
.kundenkarte__knopf{
  min-width:40px;min-height:40px;padding:0 .7rem;border:1px solid var(--ink);
  background:transparent;color:var(--ink);font:inherit;font-size:.82rem;cursor:pointer;
}
.kundenkarte__knopf:hover{background:var(--ink);color:var(--ink-inv)}
.kundenkarte__rahmen{flex:1;overflow:auto;background:#D9DED8;overscroll-behavior:contain}
.kundenkarte__rahmen .kundenkarte__svg{width:100%;min-width:100%;max-width:none}
@media (max-width:760px){ .kundenkarte__titel{font-size:.9rem;min-width:0} }
.kundenkarte__rahmen .kundenkarte__punkte circle{cursor:pointer}
.kundenkarte__detail{
  padding:.65rem .8rem;border-top:1px solid var(--ink);min-height:2.6rem;
  font-family:"Azeret Mono",monospace;font-size:.78rem;letter-spacing:.02em;
}
html:has(.kundenkarte__dialog[open]){overflow:hidden}

/* ═══ STARTSEITE NACH DEM ENTWURF DES AUFTRAGGEBERS (2026-09-27) ══════════
   „Weniger Detailinformationen, plakativer, die wichtigen Fakten zuerst.“
   Übernommen ist die Ordnung des Entwurfs — Leiste, drei Modellkarten mit
   Zeichen, „Noch unsicher?“ mit Pferdefoto, drei Funktionen —, gesetzt in
   der Sprache des Blatts: Tinte, Anreißlinien, keine Rundungen, Amber nur
   für Wärme, Blau nur für Cool-Air. */

/* Modellkarten unter der Bühne. Dieselbe Zelle wie die Zeile davor
   (`fusszeile__zelle`, `data-modell`), nur höher und mit Merkmalen. */
.fusszeile--karten{gap:0;border-top:1px solid var(--ink);background:var(--werkblatt-hoch)}
.fusszeile--karten .modellkarte{
  padding:clamp(1.1rem,2vw,1.6rem) clamp(1rem,1.8vw,1.5rem) clamp(1.2rem,2vw,1.6rem);
  gap:0;min-height:0;border-right:1px solid var(--riss);
}
.fusszeile--karten .modellkarte:last-child{border-right:0}
.fusszeile--karten .modellkarte:hover,.fusszeile--karten .modellkarte:focus-visible{background:#fff}
.fusszeile--karten .modellkarte{position:relative}
.modellkarte__kopf{display:flex;align-items:center;gap:.8rem}
.modellkarte .fusszeile__name{font-size:clamp(1.2rem,1rem + .6vw,1.5rem);letter-spacing:-.02em}
/* Der Störer hängt in der Ecke, damit alle drei Köpfe gleich hoch sind und
   die Merkmale auf einer Linie stehen. Bis 2026-09-30 ragte er über die
   Oberkante der Karte und wurde dort angeschnitten (Auftraggeber, Foto vom
   Bildschirm); seitdem sitzt er ganz in der Karte, neben Name und Zeile. */
.modellkarte{--stoerer:72px}
.modellkarte .stoerer--klein{position:absolute;top:clamp(.8rem,1.4vw,1.1rem);right:clamp(.8rem,1.6vw,1.3rem);width:var(--stoerer);margin:0;z-index:1}
/* Die Zeile unter dem Namen läuft nicht unter den Störer, sondern bricht
   vor ihm um. Wo sie das tut (schmale Karten), halten alle drei Zeilen zwei
   Zeilen Höhe, damit die Merkmale weiter auf einer Linie stehen, und der
   Störer rückt etwas kleiner in die Ecke, damit „3-1“ frei bleibt. */
.modellkarte:has(.stoerer--klein) .modellkarte__zeile{padding-right:calc(var(--stoerer) + .5rem)}
@media (min-width:721px) and (max-width:1279px){
  .modellkarte{--stoerer:64px}
  .modellkarte .stoerer--klein{right:.5rem}
  .modellkarte__zeile{min-height:2lh}
}
.modellkarte__zeile{margin-top:.25rem;font-size:1rem;color:var(--ink-2)}
.modellkarte__merkmale{
  display:flex;flex-direction:column;gap:.55rem;
  margin:1.1rem 0 1.15rem;padding:1rem 0 1.1rem;
  border-top:1px solid var(--riss-fein);border-bottom:1px solid var(--riss-fein);
}
.merkmal{display:flex;align-items:center;gap:.75rem;font-size:.95rem;color:var(--ink)}
.merkmal__zeichen{width:22px;height:22px;flex-shrink:0;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.merkmal__zeichen--warm{stroke:var(--amber-flaeche)}
.merkmal__zeichen--kalt{stroke:var(--kalt)}
.modellkarte__preis{font-size:clamp(1.35rem,1.1rem + .7vw,1.7rem);font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.modellkarte__hinweis{font-size:.8rem;color:var(--ink-2);margin-top:.15rem}
.fusszeile--karten .fusszeile__knopf{
  margin-top:1.1rem;justify-content:center;gap:.6rem;
  min-height:48px;padding:.8rem 1rem;
  background:var(--ink);color:var(--ink-inv);font-size:.94rem;
  transition:background-color var(--schnell) linear;
}
.fusszeile--karten .modellkarte:hover .fusszeile__knopf,
.fusszeile--karten .modellkarte[data-aktiv="true"] .fusszeile__knopf{background:var(--amber-flaeche);color:#fff}
.fusszeile--karten .fusszeile__knopf .tat__pfeil{width:15px}
@media (max-width:720px){
  /* Die schmale Zeile davor lief hier als umbrechende Reihe mit eigener
     Reihenfolge; die Karte bleibt eine Spalte. */
  .fusszeile--karten .modellkarte{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;border-right:0;border-bottom:1px solid var(--riss);padding:1.4rem .1rem 1.5rem}
  .fusszeile--karten .modellkarte:last-child{border-bottom:0}
  .fusszeile--karten .modellkarte > *{order:0;flex:0 0 auto;margin-left:0}
  .fusszeile--karten .fusszeile__name{flex:0 1 auto}
  .modellkarte .stoerer--klein{top:.7rem;right:.1rem}
}

/* „Noch unsicher?“ — der Zugang zum Produktberater. */
.unsicher{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  border:1px solid var(--ink);background:var(--werkblatt-hoch);overflow:hidden;
}
.unsicher__text{padding:clamp(1.6rem,4vw,3.4rem);align-self:center}
.unsicher__marke{
  font-family:"Azeret Mono",monospace;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--amber-ink);margin-bottom:.9rem;
}
.unsicher h2{font-size:clamp(1.7rem,1.1rem + 2.2vw,2.9rem);margin-bottom:1rem;max-width:18ch}
.unsicher h2 em{font-style:normal;display:block;color:var(--amber-ink);font-variation-settings:"wdth" 116,"wght" 780}
.unsicher__text > p:not(.unsicher__marke){color:var(--ink-2);max-width:44ch;margin-bottom:1.6rem}
.unsicher__bild{position:relative;margin:0;min-height:320px;background:var(--kammer)}
.unsicher__bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:52% 30%}
/* Der Übergang vom hellen Blatt ins Foto, wie im Entwurf. */
.unsicher__bild::before{
  content:"";position:absolute;inset:0 auto 0 0;width:28%;z-index:1;pointer-events:none;
  background:linear-gradient(to right,var(--werkblatt-hoch),rgba(241,242,236,0));
}
.unsicher__bild .bildnachweis{bottom:.7rem;right:.9rem}
@media (max-width:820px){
  .unsicher{grid-template-columns:1fr}
  .unsicher__bild{min-height:0;aspect-ratio:4/3;order:-1}
  .unsicher__bild::before{inset:auto 0 0 0;width:auto;height:30%;background:linear-gradient(to top,var(--werkblatt-hoch),rgba(241,242,236,0))}
}

/* Der Produktberater im eigenen Fenster. */
.berater-fenster{
  width:min(900px,calc(100vw - 1.5rem));max-width:none;max-height:calc(100dvh - 1.5rem);
  margin:auto;padding:0;border:1px solid var(--ink);background:var(--werkblatt);color:var(--ink);
  overflow:auto;overscroll-behavior:contain;
}
.berater-fenster::backdrop{background:rgba(22,24,26,.62)}
.berater-fenster__kopf{
  position:sticky;top:0;z-index:2;
  display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  padding:clamp(1rem,2.4vw,1.6rem) clamp(1rem,2.4vw,1.6rem) .9rem;
  background:var(--werkblatt);border-bottom:1px solid var(--riss);
}
.berater-fenster__kopf h2{font-size:clamp(1.35rem,1rem + 1.4vw,2rem);margin:0}
.berater-fenster__kopf h2 em{font-style:normal;display:block;color:var(--amber-ink);font-variation-settings:"wdth" 116,"wght" 780}
.berater-fenster__zu{
  flex-shrink:0;width:44px;height:44px;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--ink);background:transparent;color:var(--ink);
}
.berater-fenster__zu svg{width:16px;height:16px}
.berater-fenster__zu:hover{background:var(--ink);color:var(--ink-inv)}
.berater-fenster__satz{padding:.9rem clamp(1rem,2.4vw,1.6rem) 0;color:var(--ink-2)}
.berater-fenster .berater{margin:1rem clamp(1rem,2.4vw,1.6rem) clamp(1rem,2.4vw,1.6rem)}
html:has(.berater-fenster[open]){overflow:hidden}

/* Die drei Funktionen neben der Bühne. Jede Taste schaltet sie um. */
.funktionen{display:flex;flex-direction:column;border:1px solid var(--ink);background:var(--werkblatt-hoch);margin-bottom:1.3rem}
.funktion{
  appearance:none;display:flex;align-items:flex-start;gap:1rem;width:100%;
  padding:1.05rem 1.1rem;border:0;border-bottom:1px solid var(--riss);
  background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer;
  transition:background-color var(--schnell) linear,color var(--schnell) linear;
}
.funktion:last-child{border-bottom:0}
.funktion:hover{background:var(--werkblatt)}
.funktion__zeichen{width:34px;height:34px;flex-shrink:0;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.funktion__zeichen--warm{stroke:var(--amber-flaeche)}
.funktion__zeichen--kalt{stroke:var(--kalt)}
.funktion__text{font-size:.92rem;line-height:1.45;color:var(--ink-2)}
.funktion__text b{display:block;font-size:1.2rem;letter-spacing:-.015em;color:var(--ink);font-variation-settings:"wdth" 104,"wght" 720;margin-bottom:.15rem}
.funktion[aria-pressed="true"]{background:var(--amber-flaeche);color:#fff}
.funktion--kalt[aria-pressed="true"]{background:var(--kalt)}
.funktion[aria-pressed="true"] .funktion__zeichen{stroke:#fff}
.funktion[aria-pressed="true"] .funktion__text,.funktion[aria-pressed="true"] .funktion__text b{color:#fff}
.funktion:focus-visible{outline:2px solid var(--fokus);outline-offset:-4px}
.funktionen__lage{font-size:1.08rem;line-height:1.55;color:var(--ink);min-height:5em}

/* ═══ ARTIKELSEITE: FOTO IM BESTELLBLOCK (2026-09-27) ══════════════════════
   Robin: „die Bilder unterschiedlich groß und einfach nur reingesetzt …
   rechts mit in den Bestellblock, links nur den Text“. Links liest man,
   rechts kauft man. Der Block ist breiter als die Schiene davor; das Foto
   hat einen festen Rahmen in 4 : 3, damit Preis und Knopf im ersten Bild
   bleiben. Er läuft nicht mit: Mit Auswahl ist er höher als das Fenster. */
@media (min-width:960px){
  .bestaetigung--artikel{grid-template-columns:minmax(0,1fr) minmax(21rem,25rem)}
}
/* Am Telefon zuerst Foto, Preis und Knopf, dann der Text. */
@media (max-width:959px){ .bestaetigung--artikel .bestaetigung__anschrift{order:-1} }
.bestaetigung--artikel .bestaetigung__anschrift{padding:0;overflow:hidden}
.artikel__kasse{padding:clamp(1.1rem,2.2vw,1.6rem)}
.artikel__bild{
  --bildrand:0px;position:relative;
  margin:0;aspect-ratio:4/3;border-bottom:1px solid var(--ink);
  overflow:hidden;background:var(--werkblatt);
}
.artikel__bild img{
  position:absolute;inset:var(--bildrand);margin:auto;
  width:calc(100% - 2 * var(--bildrand));height:calc(100% - 2 * var(--bildrand));object-fit:cover;
}
/* Freisteller: ganz im Bild, gleicher Rand ringsum, auf Weiß.
   Nie mehr als doppelt so groß wie die Datei (--b, --h), sonst unscharf. */
.artikel__bild--freisteller{--bildrand:clamp(1rem,2.2vw,1.6rem);background:#fff}
.artikel__bild--freisteller img{
  object-fit:contain;mix-blend-mode:multiply;
  max-width:var(--b,none);max-height:var(--h,none);
}
.artikel__preis{
  font-size:clamp(1.7rem,1.3rem + 1vw,2.2rem);font-weight:600;letter-spacing:-.02em;
  color:var(--ink);line-height:1.1;margin:.2rem 0 .3rem;
}
.artikel__steuer{font-size:.86rem;color:var(--ink-2);margin-bottom:1.1rem}
.artikel__steuer a{color:inherit;text-underline-offset:.2em}
.bestaetigung--artikel .artikelwahl{margin-top:.2rem}
.artikel__schild{max-width:none;margin-top:1.2rem;border-color:var(--riss)}
.artikel__schild .schild__reihe{font-size:.74rem}
.artikel__text .rechtstext{max-width:40rem}

/* Die übrigen Artikel darunter mit kleinem Bild. */
.posten__zeile--bild{grid-template-columns:3.2rem 4.25rem minmax(0,1fr) minmax(0,15rem) 8.5rem auto}
.posten__bild{
  width:4.25rem;aspect-ratio:1;display:grid;place-items:center;overflow:hidden;
  border:1px solid var(--riss);background:var(--werkblatt);
}
.posten__bild img{width:100%;height:100%;object-fit:cover}
.posten__bild--freisteller{background:#fff;padding:.3rem}
.posten__bild--freisteller img{object-fit:contain;mix-blend-mode:multiply}
@media (max-width:900px){
  .posten__zeile--bild{grid-template-columns:2.6rem 3.6rem minmax(0,1fr)}
  .posten__zeile--bild .posten__bild{width:3.6rem;grid-row:span 4;align-self:start}
  .posten__zeile--bild .posten__herkunft,.posten__zeile--bild .posten__preis,.posten__zeile--bild .posten__tat{grid-column:3}
}