/* ===========================================================================
   Carl Reiner GmbH — ein Stylesheet für die ganze Seite.
   Gestaltung nach dem Entwurf vom 13.09.2026: eckige Formen, versale Etiketten
   und Knöpfe, eine Schriftfamilie für alles, feine Trennlinien.
   Alle Farben stehen oben als Marken. Wer eine Farbe ändern will, ändert sie
   dort. Die Seite hat bewusst nur einen hellen Auftritt (kein Dunkelmodus).
   ======================================================================== */

/* --- Schrift -----------------------------------------------------------
   Eine Familie für alles: „Hausschrift". Den Block zwischen den Markierungen
   schreibt werkzeuge/bau.py — liegen lizenzierte Myriad-Pro-Dateien in
   assets/schrift/ (myriadpro-300/400/600/700.woff2), nimmt er diese, sonst
   Source Sans 3 (SIL OFL 1.1). Hier nichts von Hand ändern. */
/* schriften:anfang */
@font-face{font-family:'Hausschrift';font-style:normal;font-weight:300 700;font-display:swap;src:url(schrift/sourcesans3.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Hausschrift';font-style:normal;font-weight:300 700;font-display:swap;src:url(schrift/sourcesans3-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* schriften:ende */

/* --- Marken: helle Darstellung ------------------------------------------ */
:root{
  color-scheme:light;       /* nur heller Auftritt — kein Dunkelmodus */
  --marke:#0f53a4;          /* Hausfarbe = Blau aus dem Logo, 7,5:1 auf Weiß */
  --marke-tief:#0a3f7e;
  --marke-hauch:#eef4fb;
  --marke-rand:#cfe0f3;

  --grund:#ffffff;
  --grund-2:#f4f6f9;        /* abgesetzte Fläche */
  --grund-3:#eceff4;        /* Karte auf abgesetzter Fläche */
  --rand:#dde2ea;
  --rand-stark:#c3ccd9;

  --text:#16202e;           /* 14,8:1 auf Weiß */
  --text-2:#4a5769;         /* 7,3:1 — für Beiwerk, nicht für Fließtext */
  --text-3:#5a667b;         /* ≥ 5:1 auf allen hellen Flächen (auch --grund-3) */
  --auf-marke:#ffffff;

  --gut:#1a7f4b;
  --warn:#8a5a00;
  --fehler:#b3261e;

  --schatten:0 1px 2px rgba(16,32,56,.05), 0 8px 24px rgba(16,32,56,.07);
  --schatten-hoch:0 2px 6px rgba(16,32,56,.10), 0 18px 46px rgba(16,32,56,.14);

  /* Abstandsraster — nichts dazwischen erfinden */
  --a1:4px; --a2:8px; --a3:16px; --a4:24px; --a5:40px; --a6:64px; --a7:96px;
  /* Flächen hinter freigestellten Produktfotos (Weiß wird per multiply verrechnet) */
  --bildgrund:#f1f4f8;
  --bildgrund-weiss:#ffffff;
  --bild-dimmen:none;
  --rund:4px; --rund-klein:2px;
  --hof:1200px;             /* Spaltenbreite */
  --lese:68ch;              /* Textspalte */
  --zeit:.18s;
}

/* --- Marken: dunkle Darstellung ----------------------------------------- */

/* --- Grundlagen --------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
/* hidden muss gewinnen — sonst zeigt ein späteres display:flex das Element doch */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}
body{
  margin:0;background:var(--grund);color:var(--text);
  font-family:'Hausschrift','Helvetica Neue',Arial,sans-serif;
  font-size:1.0625rem;line-height:1.65;   /* 17 px Fließtext */
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{margin:0 0 var(--a3);line-height:1.2;font-weight:700;letter-spacing:-.01em;color:var(--text)}
h1{font-size:clamp(2rem,1.4rem + 2.4vw,3.1rem);letter-spacing:-.02em}
h2{font-weight:400;letter-spacing:-.005em;line-height:1.18;
  font-size:clamp(1.65rem,1.2rem + 1.5vw,2.4rem)}
h3{font-size:1.25rem}
/* Lange deutsche Komposita („Körpergewichtsentlastungssystem") dürfen auf schmalen
   Bildschirmen nicht über den Rand laufen */
h1,h2,h3,h4,.pbuehne__unter{overflow-wrap:break-word}
@media (max-width:640px){h1,h2,h3{hyphens:auto;-webkit-hyphens:auto}}
h4{font-size:1.0625rem;font-weight:600}
/* bau.py ebnet die Überschriftenebenen (keine übersprungene Ebene, HIG/WCAG).
   Eine umgestufte Überschrift trägt wie-hN und sieht aus wie vorher. */
.wie-h3{font-size:1.25rem;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.wie-h4{font-size:1.0625rem;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.wie-h5{font-size:.83em;font-weight:700;letter-spacing:normal;line-height:1.65;margin-block:1.67em}   /* wie Browser-h5 */
p{margin:0 0 var(--a3);max-width:var(--lese)}
ul,ol{margin:0 0 var(--a3);padding-left:1.3em;max-width:var(--lese)}
li{margin-bottom:var(--a1)}
a{color:var(--marke);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--marke-tief)}
img{max-width:100%;height:auto;display:block}
strong,b{font-weight:600}
hr{border:0;border-top:1px solid var(--rand);margin:var(--a5) 0}
table{border-collapse:collapse;width:100%;font-size:.97rem}
th,td{text-align:left;padding:var(--a2) var(--a3);border-bottom:1px solid var(--rand)}
th{font-weight:600;color:var(--text-2)}
figure{margin:0 0 var(--a4)}
figcaption{font-size:.9rem;color:var(--text-3);margin-top:var(--a2)}
small{font-size:.9rem;color:var(--text-2)}
code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.92em;
  background:var(--grund-3);padding:.1em .35em;border-radius:5px}

:where(a,button,input,select,textarea,summary):focus-visible{
  outline:3px solid var(--marke);outline-offset:2px;border-radius:4px}

.sprungmarke{position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--marke);color:var(--auf-marke);padding:var(--a2) var(--a3);border-radius:0 0 8px 0}
.sprungmarke:focus{left:0}

.hof{width:100%;max-width:var(--hof);margin-inline:auto;padding-inline:var(--a4)}
@media (max-width:640px){.hof{padding-inline:var(--a3)}}

/* Symbole: Grundgröße wie die umgebende Schrift. :where() hat keine Spezifität —
   jede Bausteinregel (.knopf svg usw.) setzt ihre eigene Größe darüber. Ohne
   diese Zeile wächst ein Symbol ohne Regel auf die volle Spaltenbreite. */
:where(svg){width:1.15em;height:1.15em;flex:none}
:where(h2,h3,h4)>svg{vertical-align:-.16em;margin-right:.3em;color:var(--marke)}
:where(p,li)>a>svg{vertical-align:-.16em;margin-left:.25em}

/* --- Bausteine ---------------------------------------------------------- */
.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:12px 24px;border-radius:var(--rund-klein);border:1px solid transparent;
  font:inherit;font-weight:600;font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;white-space:nowrap;line-height:1.2;vertical-align:middle;
  transition:background var(--zeit),color var(--zeit),border-color var(--zeit);
}
.knopf svg{width:18px;height:18px;flex:none;transition:transform var(--zeit)}
.knopf:hover svg{transform:translateX(3px)}
.knopf--voll{background:var(--marke);color:var(--auf-marke)}
.knopf--voll:hover{background:var(--marke-tief);color:var(--auf-marke)}
.knopf--rand{background:transparent;color:var(--marke);border-color:var(--marke)}
.knopf--rand:hover{background:var(--marke);color:var(--auf-marke)}
.knopf--still{background:var(--grund-3);color:var(--text);border-color:var(--rand)}
.knopf--still:hover{background:var(--rand)}
.knopf--klein{min-height:44px;padding:6px 16px;font-size:.74rem}
.knopf[disabled],.knopf[aria-disabled="true"]{opacity:.45;pointer-events:none}
@media (prefers-reduced-motion: reduce){.knopf:hover svg{transform:none}}

.karte{
  background:var(--grund);border:1px solid var(--rand);border-radius:var(--rund);
  padding:var(--a4);
}
.karte :where(h3,.wie-h3){margin-bottom:var(--a2)}
.karte p:last-child{margin-bottom:0}
a.karte{text-decoration:none;color:inherit;display:block;
  transition:border-color var(--zeit),box-shadow var(--zeit)}
a.karte:hover{border-color:var(--marke-rand);box-shadow:var(--schatten)}

.raster{display:grid;gap:var(--a4)}
/* auto-fill statt auto-fit: eine einzelne Karte bleibt spaltenbreit, statt sich
   über die ganze Zeile zu ziehen */
.raster--2{grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr))}
.raster--3{grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))}
.raster--4{grid-template-columns:repeat(auto-fill,minmax(min(210px,100%),1fr))}

.band{padding-block:clamp(56px,7vw,96px)}
.band--still{background:var(--grund-2)}
.band__kopf{max-width:var(--lese);margin-bottom:var(--a5)}
.band__kopf h2{margin-bottom:var(--a2)}
.band__kopf p{color:var(--text-2);font-size:1.05rem;margin-bottom:0}
.band__kopf--zeile{display:flex;flex-wrap:wrap;gap:var(--a3) var(--a5);
  align-items:flex-end;justify-content:space-between;max-width:none}
.band__kopf--zeile>div{max-width:38rem}

/* Versales Etikett über Abschnittsköpfen: „PRODUKTE & LÖSUNGEN" */
.etikett,.marke-zeile{display:inline-flex;align-items:center;gap:var(--a2);
  font-size:.76rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--marke);margin:0 0 var(--a3)}
.marke-zeile svg{width:16px;height:16px;flex:none}
.etikett--hell{color:var(--auf-tief-2)}

/* Weiter-Verweis: „ALLE PRODUKTKATEGORIEN →" */
.weiter{display:inline-flex;align-items:center;gap:10px;min-height:44px;
  font-weight:600;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--marke);text-decoration:none;white-space:nowrap}
.weiter svg{width:16px;height:16px;transition:transform var(--zeit)}
.weiter svg{flex:none}
@media (max-width:420px){.weiter{white-space:normal;max-width:100%}}
.weiter:hover{color:var(--marke-tief)}
.weiter:hover svg,a:hover .weiter svg{transform:translateX(3px)}
.weiter--klein{font-size:.7rem;min-height:0}
@media (prefers-reduced-motion: reduce){.weiter:hover svg,a:hover .weiter svg{transform:none}}

.hinweis{border-left:3px solid var(--marke);background:var(--marke-hauch);
  padding:var(--a3) var(--a4);margin-bottom:var(--a4)}
.hinweis p:last-child{margin-bottom:0}

/* --- Kopf --------------------------------------------------------------- */
.kopf{position:sticky;top:0;z-index:40;background:var(--grund);border-bottom:1px solid var(--rand)}
@supports (backdrop-filter:blur(12px)){
  .kopf{background:color-mix(in srgb,var(--grund) 90%,transparent);backdrop-filter:saturate(180%) blur(14px)}
}
.kopf__innen{display:flex;align-items:center;gap:var(--a4);min-height:92px}
.kopf__logo{display:flex;align-items:center;text-decoration:none;flex:none;min-height:44px}
.kopf__logo img{height:42px;width:auto}

.nav{display:flex;align-items:center;gap:var(--a1);margin-left:auto}
.nav>*{position:relative}
.nav__punkt{position:relative;display:inline-flex;align-items:center;gap:5px;min-height:44px;
  padding:0 14px;border:0;background:none;text-decoration:none;color:var(--text);
  font:inherit;font-weight:600;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.nav__punkt:hover,.nav__punkt[aria-expanded="true"]{color:var(--marke)}
.nav__punkt[aria-current="page"]{color:var(--marke)}
.nav__punkt[aria-current="page"]::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;
  height:2px;background:var(--marke)}
.nav__punkt svg{width:13px;height:13px;transition:transform var(--zeit)}
.nav__punkt[aria-expanded="true"] svg{transform:rotate(180deg)}

.klapp{position:absolute;top:calc(100% + 10px);left:0;min-width:270px;max-width:min(92vw,660px);
  background:var(--grund);border:1px solid var(--rand);border-radius:var(--rund);
  box-shadow:var(--schatten-hoch);padding:var(--a2);z-index:50}
.klapp[hidden]{display:none}
.klapp a{display:block;padding:9px var(--a3);border-radius:var(--rund-klein);text-decoration:none;
  color:var(--text);font-size:.95rem;min-height:40px}
.klapp a:hover{background:var(--grund-2);color:var(--marke)}
.klapp--breit{display:grid;grid-template-columns:repeat(2,minmax(230px,1fr));gap:0 var(--a2)}
.klapp__alle{grid-column:1 / -1;display:flex!important;align-items:center;gap:8px;
  margin-bottom:var(--a2);padding-bottom:var(--a2);border-bottom:1px solid var(--rand);
  font-size:.74rem!important;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--marke)!important}
.klapp__alle svg{width:15px;height:15px}
.klapp a.klapp__hervor{grid-column:1 / -1;display:flex;align-items:center;gap:10px;font-weight:600;
  color:var(--marke);background:var(--marke-hauch);margin-bottom:var(--a1)}
.klapp a.klapp__hervor:hover{background:var(--marke-hauch);text-decoration:underline}
.klapp__hervor svg{width:18px;height:18px;flex:none}
.zertifikat{display:grid;grid-template-columns:auto 1fr;gap:var(--a5);align-items:center;
  padding:var(--a5);margin:0 0 var(--a6);border:1px solid var(--marke-rand);border-radius:var(--rund);background:var(--marke-hauch)}
.zertifikat :where(h2,.wie-h2){margin:0 0 var(--a3)}
.zertifikat p{max-width:62ch}
.zertifikat p:last-child{margin-bottom:0}
.zertifikat__siegel{width:168px;aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;align-items:center;
  justify-content:center;background:var(--grund);border:6px double var(--marke);color:var(--marke);text-align:center;line-height:1.05}
.zertifikat__norm{font-size:.8rem;font-weight:600;letter-spacing:.14em}
.zertifikat__nummer{font-size:2.3rem;font-weight:700;font-variant-numeric:tabular-nums}
.zertifikat__jahr{font-size:1rem;font-weight:600}
.zertifikat__text{margin-top:6px;font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-2)}
@media (max-width:680px){.zertifikat{grid-template-columns:1fr;padding:var(--a4);gap:var(--a4)}.zertifikat__siegel{width:132px}.zertifikat__nummer{font-size:1.8rem}}
.servicehinweis{display:flex;align-items:center;justify-content:space-between;gap:var(--a4);
  padding:var(--a4) var(--a5);margin:0 0 var(--a5);border-color:var(--marke-rand);background:var(--marke-hauch)}
.servicehinweis :where(h2,.wie-h2){font-size:1.35rem;margin:0 0 var(--a2)}
.servicehinweis p:last-child{margin:0;color:var(--text-2)}
.servicehinweis .etikett{margin:0 0 var(--a2)}
.servicehinweis .knopf{flex:none}
@media (max-width:760px){.servicehinweis{flex-direction:column;align-items:flex-start;padding:var(--a4)}}

.kopf__fern{display:inline-flex;align-items:center;gap:8px;flex:none;min-height:44px;padding:0 14px;
  border-radius:var(--rund-klein);border:1px solid var(--marke-rand);background:var(--marke-hauch);
  color:var(--marke);font-size:.9rem;font-weight:600;white-space:nowrap}
.kopf__fern:hover{background:var(--marke);border-color:var(--marke);color:var(--auf-marke);text-decoration:none}
.kopf__fern svg{width:20px;height:20px;flex:none}
@media (max-width:900px){.kopf__fern span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .kopf__fern{width:44px;padding:0;justify-content:center}}
.kopf__suche{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:44px;height:44px;border-radius:var(--rund-klein);border:1px solid var(--rand);
  background:var(--grund);color:var(--text)}
.kopf__suche:hover{border-color:var(--marke-rand);color:var(--marke);background:var(--marke-hauch)}
.kopf__suche svg{width:20px;height:20px}
.kopf__taste{display:none;margin-left:auto;align-items:center;justify-content:center;
  width:44px;height:44px;border:1px solid var(--rand);border-radius:var(--rund-klein);
  background:var(--grund);color:var(--text);cursor:pointer}
.kopf__taste svg{width:22px;height:22px}
@media (max-width:1080px){
  .nav{display:none}
  .kopf__taste{display:inline-flex;margin-left:0}
  .kopf__suche{margin-left:auto}
}
@media (max-width:640px){
  .kopf__innen{min-height:72px}
  .kopf__logo img{height:34px}
}
/* Sehr schmale Geräte: Logo gibt nach, Knöpfe behalten 44 px */
.kopf__taste,.kopf__suche,.kopf__fern,.listenknopf{flex:none}
@media (max-width:420px){
  .kopf__innen{gap:var(--a2)}
  .kopf__logo{flex:0 1 auto;min-width:0}
  .kopf__logo img{height:auto;width:100%;max-width:190px}
}

/* --- Menü auf schmalen Geräten ------------------------------------------ */
.menue{position:fixed;inset:92px 0 0;background:var(--grund);z-index:39;
  overflow-y:auto;padding:var(--a4) 0 var(--a6);
  transform:translateX(100%);transition:transform .24s ease;visibility:hidden}
.menue[data-offen="ja"]{transform:none;visibility:visible}
.menue a{display:block;padding:11px var(--a4);text-decoration:none;color:var(--text);font-weight:600}
.menue a:hover{background:var(--grund-2)}
.menue details>summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;padding:11px var(--a4);font-weight:600;min-height:44px}
.menue details>summary::-webkit-details-marker{display:none}
.menue details>summary svg{width:16px;height:16px;color:var(--text-3);transition:transform var(--zeit)}
.menue details[open]>summary svg{transform:rotate(180deg)}
.menue details a{padding-left:var(--a5);font-weight:400;color:var(--text-2)}
.menue details a.menue__hervor{font-weight:600;color:var(--marke)}
.menue details details a{padding-left:var(--a6);font-size:.95rem}
.menue details details>summary{padding-left:var(--a5);font-weight:400}
.menue__fuss{padding:var(--a3) var(--a4) 0;margin:var(--a3) 0 0;border-top:1px solid var(--rand);
  font-size:.92rem;color:var(--text-3);line-height:1.9}

@media (max-width:640px){.menue{inset:72px 0 0}}

/* --- Brotkrumen --------------------------------------------------------- */
.krumen{padding-block:var(--a3);border-bottom:1px solid var(--rand);background:var(--grund-2)}
.krumen ol{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;
  max-width:none;font-size:.9rem;color:var(--text-3)}
.krumen li::after{content:"›";margin-left:6px;color:var(--rand-stark)}
.krumen li:last-child::after{content:""}
.krumen a{color:var(--text-2);text-decoration:none}
.krumen a:hover{color:var(--marke);text-decoration:underline}
.krumen li[aria-current]{color:var(--text)}

/* --- Seitenkopf der Unterseiten ------------------------------------------ */
.seitenkopf{padding-block:var(--a6) var(--a5);background:var(--grund-2);border-bottom:1px solid var(--rand)}
.seitenkopf h1{font-weight:400;letter-spacing:-.01em;
  font-size:clamp(2.1rem,1.5rem + 2.2vw,3.2rem);margin-bottom:var(--a2)}
.seitenkopf p{font-size:1.1rem;color:var(--text-2);margin-bottom:0}

/* --- Inhalt aus der Übernahme ------------------------------------------- */
.inhalt{padding-block:var(--a6)}
.inhalt img{border-radius:var(--rund-klein);margin-block:var(--a4)}
.inhalt :where(h2:not(.wie-h3,.wie-h4,.wie-h5)){margin-top:var(--a5)}
.inhalt :where(h3:not(.wie-h4,.wie-h5),.wie-h3){margin-top:var(--a4)}
.inhalt>*:first-child{margin-top:0}
/* Download-Verweis: dieselbe Kastenform wie .knopf--klein (44 px, versal),
   damit er neben einem Knopf exakt auf gleicher Höhe steht. */
a.pdf{display:inline-flex;align-items:center;gap:var(--a2);min-height:44px;max-width:100%;
  padding:6px 16px;margin:0 var(--a2) var(--a2) 0;border:1px solid var(--rand);vertical-align:middle;
  border-radius:var(--rund-klein);text-decoration:none;color:var(--text);
  font-size:.74rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;line-height:1.2;
  background:var(--grund-2);white-space:normal}
a.pdf:hover{border-color:var(--marke-rand);color:var(--marke);background:var(--marke-hauch)}
a.pdf svg{width:16px;height:16px;flex:none;color:var(--marke)}

/* --- Partnerlogos ------------------------------------------------------- */
.partner{display:flex;flex-wrap:wrap;gap:var(--a5);align-items:center;justify-content:center}
.partner img{height:38px;width:auto;opacity:.72;filter:grayscale(1);transition:opacity var(--zeit),filter var(--zeit)}
.partner img:hover{opacity:1;filter:none}

.partnerband{padding-block:var(--a5);border-top:1px solid var(--rand)}

/* --- Fuß ---------------------------------------------------------------- */
.fuss{background:var(--grund);border-top:1px solid var(--rand)}
.fuss__raster{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:var(--a5);
  padding-block:var(--a6) var(--a5)}
.fuss__logo{height:42px;width:auto;margin-bottom:var(--a3)}
.fuss__titel{line-height:1.2;font-family:inherit;font-size:.74rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text);margin-bottom:var(--a3)}
.fuss ul{list-style:none;padding:0;margin:0}
.fuss li{margin-bottom:6px;font-size:.9rem}
.fuss p{font-size:.9rem;color:var(--text-2);line-height:1.75}
.fuss a{color:var(--text-2);text-decoration:none}
.fuss a:hover{color:var(--marke);text-decoration:underline}
.fuss__sozial{display:flex;gap:var(--a1);margin-left:-10px}
.fuss__sozial a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  color:var(--marke)}
.fuss__sozial a:hover{color:var(--marke-tief);text-decoration:none}
.fuss__sozial svg{width:26px;height:26px}
.fuss__unten{border-top:1px solid var(--rand);font-size:.8rem;color:var(--text-3)}
.fuss__unten-innen{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--a2) var(--a4);min-height:64px;padding-block:var(--a2)}
.fuss__recht{display:flex;flex-wrap:wrap;gap:0 var(--a2)}
.fuss__recht a{min-width:44px;justify-content:center;padding-inline:var(--a2);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);
  text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.fuss__recht a:hover{color:var(--marke)}
@media (max-width:1000px){.fuss__raster{grid-template-columns:1fr 1fr 1fr}.fuss__marke{grid-column:1 / -1}}
@media (max-width:640px){.fuss__raster{grid-template-columns:1fr 1fr}}
/* Auf Touchgeräten: Verweise 44 px hoch, damit sie sich treffen lassen
   (Accessibility: 44×44 pt, „spacing between controls as important as size"). */
@media (max-width:760px){
  .fuss li{margin-bottom:0}
  .fuss li a{display:flex;align-items:center;min-height:44px}
  .fuss p a{display:inline-flex;align-items:center;min-height:44px}
}

/* ===========================================================================
   Ersatzteil-Katalog
   ======================================================================== */
.nurlesbar{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.listenknopf{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:var(--rund-klein);border:1px solid var(--rand);
  background:var(--grund);color:var(--text);flex:none}
.listenknopf:hover{border-color:var(--marke-rand);color:var(--marke);background:var(--marke-hauch)}
.listenknopf svg{width:21px;height:21px}
.listenknopf__zahl{position:absolute;top:-5px;right:-5px;min-width:21px;height:21px;padding:0 5px;
  border-radius:999px;background:var(--marke);color:var(--auf-marke);
  font-size:.75rem;font-weight:700;line-height:21px;text-align:center}

.shop__buehne{padding-block:var(--a6) var(--a5);
  background:linear-gradient(165deg,var(--marke-hauch),var(--grund) 70%);
  border-bottom:1px solid var(--rand)}
.shop__buehne h1{font-size:clamp(1.7rem,1.3rem + 1.6vw,2.5rem);margin-bottom:var(--a3);font-weight:400;letter-spacing:-.005em;line-height:1.18}
.shop__vor{font-size:1.1rem;color:var(--text-2);max-width:62ch}

.sn-suche{margin-top:var(--a5);max-width:640px}
.sn-suche label{display:block;font-weight:600;margin-bottom:var(--a2)}
.sn-suche__zeile{display:flex;align-items:center;gap:var(--a2);background:var(--grund);
  border:1px solid var(--rand-stark);border-radius:var(--rund-klein);padding:5px 5px 5px var(--a3);
  box-shadow:var(--schatten)}
.sn-suche__zeile:focus-within{border-color:var(--marke);box-shadow:0 0 0 3px var(--marke-hauch)}
.sn-suche__zeile svg{width:20px;height:20px;color:var(--text-3);flex:none}
.sn-suche__zeile input{flex:1;min-width:0;border:0;background:none;font:inherit;color:var(--text);
  padding:10px 0;min-height:34px}
.sn-suche__zeile input:focus{outline:none}
.sn-suche__antwort{margin:var(--a2) 0 0;font-size:.95rem;color:var(--text-2)}

.shop{padding-block:var(--a6)}
.shop__familie{font-size:1.15rem;margin:var(--a6) 0 var(--a4);padding-bottom:var(--a2);
  border-bottom:1px solid var(--rand);color:var(--text-2);
  letter-spacing:.04em;text-transform:uppercase;font-size:.85rem}
.shop__familie:first-of-type{margin-top:var(--a4)}

.geraet{display:flex;flex-direction:column;gap:var(--a2);padding:var(--a4)}
/* Gerätefoto oben in der Kachel — freigestellt, Weiß mit der Fläche verrechnet */
.geraet__bild{display:flex;align-items:center;justify-content:center;height:170px;margin:calc(-1 * var(--a4)) calc(-1 * var(--a4)) var(--a2);
  background:var(--bildgrund);border-bottom:1px solid var(--rand);border-radius:var(--rund) var(--rund) 0 0;overflow:hidden}
.geraet__bild img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;padding:var(--a3);mix-blend-mode:multiply}
.geraet__bild--leer svg{width:48px;height:48px;color:var(--text-3);opacity:.6}
.shop__titel{display:grid;grid-template-columns:180px minmax(0,1fr);gap:var(--a4);align-items:start}
.shop__geraetbild{display:flex;align-items:center;justify-content:center;aspect-ratio:1;background:var(--bildgrund);
  border:1px solid var(--rand);border-radius:var(--rund);overflow:hidden}
.shop__geraetbild img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;padding:var(--a3);mix-blend-mode:multiply}
.shop__geraetbild--leer svg{width:56px;height:56px;color:var(--text-3);opacity:.6}
@media (max-width:560px){.shop__titel{grid-template-columns:1fr}.shop__geraetbild{max-width:220px}}
.geraet :where(h3,.wie-h3){font-size:1.1rem;margin:0}
.geraet p{margin:0;color:var(--text-2);font-size:.97rem;max-width:none}
.geraet__fuss{display:flex;flex-wrap:wrap;gap:var(--a2) var(--a3);margin-top:auto;
  padding-top:var(--a3);font-size:.88rem;color:var(--text-3)}
.geraet__fuss span:first-child{font-weight:600;color:var(--marke)}
.geraet__sn{font-variant-numeric:tabular-nums}

.suchfeld{display:flex;align-items:center;gap:var(--a2);flex:1;min-width:220px;
  background:var(--grund);border:1px solid var(--rand-stark);border-radius:var(--rund-klein);padding:0 var(--a3)}
.suchfeld:focus-within{border-color:var(--marke);box-shadow:0 0 0 3px var(--marke-hauch)}
.suchfeld svg{width:19px;height:19px;color:var(--text-3);flex:none}
.suchfeld input{flex:1;min-width:0;border:0;background:none;font:inherit;color:var(--text);
  min-height:44px;padding:0}
.suchfeld input:focus{outline:none}
.suchfeld--breit{max-width:460px;margin-bottom:var(--a4)}

.shop__leiste{display:flex;flex-wrap:wrap;gap:var(--a3);align-items:center;margin-bottom:var(--a4)}
.filter{display:flex;flex-wrap:wrap;gap:var(--a2)}
.filterknopf{min-height:44px;padding:0 var(--a3);border-radius:var(--rund-klein);border:1px solid var(--rand);
  background:var(--grund);color:var(--text-2);font:inherit;font-weight:600;font-size:.94rem;cursor:pointer}
.filterknopf:hover{border-color:var(--marke-rand);color:var(--marke)}
.filterknopf.ist-an{background:var(--marke);border-color:var(--marke);color:var(--auf-marke)}

.shop__kopf{display:grid;grid-template-columns:1.35fr 1fr;gap:var(--a5);align-items:start;
  margin-bottom:var(--a5);padding-bottom:var(--a5);border-bottom:1px solid var(--rand)}
.shop__kopf h1{margin-bottom:var(--a3);font-size:clamp(1.65rem,1.2rem + 1.5vw,2.4rem);font-weight:400;letter-spacing:-.005em;line-height:1.18}
.shop__sn{background:var(--grund-2);border:1px solid var(--rand);border-radius:var(--rund);padding:var(--a4)}
.shop__sn label{display:block;font-weight:600;margin-bottom:var(--a2);font-size:.97rem}
.shop__sn label span{font-weight:400;color:var(--text-3)}
.shop__sn input{width:100%;min-height:44px;padding:0 var(--a3);border:1px solid var(--rand-stark);
  border-radius:10px;background:var(--grund);color:var(--text);font:inherit;
  font-variant-numeric:tabular-nums}
.shop__sn input:focus{outline:none;border-color:var(--marke);box-shadow:0 0 0 3px var(--marke-hauch)}
.shop__sn-antwort{margin:var(--a2) 0 0;font-size:.92rem;color:var(--text-3);min-height:1.4em}
.shop__sn-antwort.ist-gut{color:var(--gut)}
.shop__sn-antwort.ist-warnung{color:var(--warn)}
@media (max-width:860px){.shop__kopf{grid-template-columns:1fr}}

.shop__zahl{color:var(--text-3);font-size:.92rem;margin-bottom:var(--a3)}
.shop__leer{padding:var(--a5);text-align:center;color:var(--text-2);
  background:var(--grund-2);border-radius:var(--rund)}
.alsLink{border:0;background:none;padding:0;font:inherit;color:var(--marke);
  text-decoration:underline;cursor:pointer}

.teilgruppe + .teilgruppe{margin-top:var(--a6)}
.teilgruppe__titel{display:flex;align-items:baseline;gap:var(--a2);font-size:1.3rem;margin:0 0 var(--a3);
  padding-bottom:var(--a2);border-bottom:1px solid var(--rand)}
.teilgruppe__zahl,.teilgruppe__zahl b{font-size:.92rem;font-weight:400;color:var(--text-3);font-variant-numeric:tabular-nums}
.teile{list-style:none;padding:0;margin:0;max-width:none;display:grid;gap:var(--a3)}
.teil{display:grid;grid-template-columns:96px 1fr auto;gap:var(--a4);align-items:center;
  padding:var(--a3) var(--a4);border:1px solid var(--rand);border-radius:var(--rund);
  background:var(--grund);margin:0}
.teil:hover{border-color:var(--marke-rand)}
.teil__bild{width:96px;height:96px;object-fit:contain;border-radius:var(--rund-klein);
  background:var(--grund-2)}
img.teil__bild{background:var(--bildgrund-weiss);filter:var(--bild-dimmen)}
.teil__bild--leer{display:flex;align-items:center;justify-content:center;color:var(--text-3)}
.teil__bild--leer svg{width:34px;height:34px}
.teil__text :where(h3,.wie-h3){font-size:1.02rem;margin:0 0 var(--a1)}
.teil__art{margin:0 0 var(--a1);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--marke);font-weight:600}
.teil__info{margin:0 0 var(--a1);font-size:.92rem;color:var(--text-2)}
.teil__nr{margin:0;font-size:.88rem;color:var(--text-3)}
.teil__nr span{font-variant-numeric:tabular-nums;color:var(--text-2)}
.teil__tat{display:flex;align-items:center;gap:var(--a2)}
.menge input{width:68px;min-height:44px;padding:0 var(--a2);text-align:center;
  border:1px solid var(--rand-stark);border-radius:10px;background:var(--grund);
  color:var(--text);font:inherit;font-variant-numeric:tabular-nums}
.menge input:focus{outline:none;border-color:var(--marke);box-shadow:0 0 0 3px var(--marke-hauch)}
.teil__dazu.ist-getan{background:var(--gut);border-color:var(--gut)}
@media (max-width:760px){
  .teil{grid-template-columns:72px 1fr;gap:var(--a3)}
  .teil__bild{width:72px;height:72px}
  .teil__tat{grid-column:1 / -1;justify-content:flex-end}
  .teil,.teil__text{min-width:0}
  .teil__text :where(h3,.wie-h3){overflow-wrap:anywhere}
}

/* --- Bereichskacheln, Einleitung, Darstellungs-Umschalter ---------------- */
.bereich{display:flex;flex-direction:column;gap:var(--a2);padding:0;overflow:hidden}
.bereich__zeichen{display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:var(--rund-klein);background:var(--marke-hauch);color:var(--marke);
  margin-bottom:var(--a2)}
.bereich__zeichen svg{width:26px;height:26px}
.bereich :where(h3,.wie-h3){font-size:1.12rem;margin:0}
.bereich p{color:var(--text-2);font-size:.97rem;margin:0}
.fuehrung{font-size:1.15rem;color:var(--text-2);margin-bottom:var(--a5)}

.bereich{padding:0;overflow:hidden}
.bereich>:where(h3,.wie-h3),.bereich>p{padding-inline:var(--a4)}
.bereich>:where(h3,.wie-h3){margin-top:var(--a4)}
.bereich>p:last-child{padding-bottom:var(--a4)}
.bereich__bild{display:block;background:var(--bildgrund);border-bottom:1px solid var(--rand)}
/* Freigestellte Gerätefotos: nicht beschneiden, Weiß mit der Fläche verrechnen */
.bereich__bild img{width:100%;height:210px;margin:0;object-fit:contain;padding:var(--a3);mix-blend-mode:multiply}
/* Ersatzteil-Kachel: dieselbe Form wie eine Gerätekachel, leicht blau hinterlegt */
.ersatzkachel .bereich__bild{border-bottom-color:var(--marke-rand)}
.ersatzkachel .bereich__bild img{object-fit:cover;padding:0;mix-blend-mode:normal;filter:var(--bild-dimmen)}
a.karte.ersatzkachel{display:flex;flex-direction:column;gap:0;background:var(--marke-hauch);border-color:var(--marke-rand)}
.ersatzkachel>.weiter{align-self:flex-start;margin:auto var(--a4) var(--a4);padding-top:var(--a3)}
.ersatzkachel>p{margin-top:var(--a2)}
.ersatzkachel>p:has(+ .weiter){padding-bottom:0}

/* --- Anfrageseite -------------------------------------------------------- */
.anfrage{padding-block:var(--a6)}
.anfrage__spalten{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--a6);align-items:start}
.anfrage__spalten>*{min-width:0}
.anfrage__hinweis{color:var(--text-2);font-size:.97rem}
.anfrage__daten{background:var(--grund-2);border:1px solid var(--rand);border-radius:var(--rund);
  padding:var(--a5);position:sticky;top:88px}
@media (max-width:960px){
  .anfrage__spalten{grid-template-columns:1fr;gap:var(--a5)}
  .anfrage__daten{position:static}
}

.posten{list-style:none;padding:0;margin:0 0 var(--a4);max-width:none;display:grid;gap:var(--a2)}
.posten__zeile{display:grid;grid-template-columns:64px minmax(0,1fr) auto auto;gap:var(--a3);align-items:center;
  padding:var(--a3);border:1px solid var(--rand);border-radius:var(--rund);background:var(--grund);margin:0}
.posten__bild{width:64px;height:64px;object-fit:contain;border-radius:var(--rund-klein);
  background:var(--bildgrund);mix-blend-mode:multiply}
.posten__bild--leer{mix-blend-mode:normal;border:1px solid var(--rand)}
.posten__text :where(h3,.wie-h3){font-size:1rem;margin:0 0 2px}
.posten__unter{margin:0;font-size:.85rem;color:var(--text-3)}
.posten__geraet{margin:2px 0 0;font-size:.85rem;color:var(--marke)}
.posten__menge{display:flex;align-items:center;gap:4px}
.posten__menge input{width:56px;min-height:44px;text-align:center;border:1px solid var(--rand-stark);
  border-radius:9px;background:var(--grund);color:var(--text);font:inherit;
  font-variant-numeric:tabular-nums}
.mengenknopf{width:38px;height:44px;border:1px solid var(--rand);border-radius:9px;
  background:var(--grund);color:var(--text);font:inherit;font-size:1.2rem;line-height:1;cursor:pointer}
.mengenknopf:hover{border-color:var(--marke);color:var(--marke)}
.posten__weg{width:44px;height:44px;border:0;border-radius:9px;background:none;
  color:var(--text-3);font-size:1rem;cursor:pointer}
.posten__weg:hover{background:var(--grund-3);color:var(--fehler)}
@media (max-width:600px){
  .posten__zeile{grid-template-columns:48px minmax(0,1fr) 44px}
  .posten__bild{width:48px;height:48px}
  .posten__weg{grid-column:3;grid-row:1}
  .mengenknopf{width:44px}
  .posten__menge{grid-column:1 / -1;justify-content:flex-end}
}

.feld{margin-bottom:var(--a4)}
.feld label{display:block;font-weight:600;font-size:.95rem;margin-bottom:6px}
.feld label span{font-weight:400;color:var(--text-3)}
.feld abbr{color:var(--marke);text-decoration:none;border:0}
.feld input,.feld textarea{width:100%;min-height:44px;padding:10px var(--a3);
  border:1px solid var(--rand-stark);border-radius:10px;background:var(--grund);
  color:var(--text);font:inherit;resize:vertical}
.feld input:focus,.feld textarea:focus{outline:none;border-color:var(--marke);
  box-shadow:0 0 0 3px var(--marke-hauch)}
.feld input[aria-invalid="true"],.feld textarea[aria-invalid="true"]{border-color:var(--fehler)}
.feld__fehler{margin:5px 0 0;font-size:.87rem;color:var(--fehler);min-height:1px}
.feld--paar{display:grid;grid-template-columns:1fr 1fr;gap:var(--a3);align-items:stretch}
/* Zweizeilige Beschriftungen: Felder beginnen trotzdem auf gleicher Höhe */
.feld--paar>div{display:flex;flex-direction:column}
.feld--paar label{flex:1 0 auto;display:flex;align-items:flex-end}
/* Felder ohne Fehlerzeile bekommen denselben Platz darunter */
.feld--paar>div:not(:has(.feld__fehler))::after{content:"";display:block;min-height:1px;margin-top:5px}
.feld--paar>div{margin:0}
@media (max-width:480px){.feld--paar{grid-template-columns:1fr}}
.feld--kasten{background:var(--grund);border:1px solid var(--rand);border-radius:var(--rund);
  padding:var(--a3)}
.kreuz{display:flex;gap:var(--a2);align-items:flex-start;font-weight:400;font-size:.92rem;
  line-height:1.5;cursor:pointer}
.kreuz input{width:22px;height:22px;min-height:22px;flex:none;margin-top:2px;accent-color:var(--marke)}

.feld select{width:100%;min-height:44px;height:48px;padding:10px var(--a3);border:1px solid var(--rand-stark);
  border-radius:10px;background:var(--grund);color:var(--text);font:inherit}
.feld input:not([type=checkbox]):not([type=radio]):not([type=file]){height:48px}
.feld select:focus{outline:none;border-color:var(--marke);box-shadow:0 0 0 3px var(--marke-hauch)}
.kreuz{min-height:44px}
/* Bestellart: zwei Wahlkarten — direkt bestellen oder Angebot anfordern */
.bestellart{border:0;padding:0;min-width:0}
.bestellart legend{padding:0;margin-bottom:6px;font-weight:600;font-size:.95rem}
.bestellart .bestellart__wahl{display:flex;gap:var(--a2);align-items:flex-start;margin:0;padding:var(--a3);
  border:1px solid var(--rand-stark);border-radius:var(--rund);background:var(--grund);font-weight:400;cursor:pointer}
.bestellart .bestellart__wahl + .bestellart__wahl{margin-top:var(--a2)}
.bestellart .bestellart__wahl:has(input:checked){border-color:var(--marke);box-shadow:inset 0 0 0 1px var(--marke);
  background:var(--marke-hauch)}
.bestellart .bestellart__wahl:has(input:focus-visible){outline:2px solid var(--marke);outline-offset:2px}
.bestellart .bestellart__wahl input{width:22px;height:22px;min-height:22px;flex:none;margin:1px 0 0;padding:0;
  accent-color:var(--marke);box-shadow:none}
.bestellart .bestellart__wahl span{color:var(--text)}
.bestellart__wahl strong{display:block;font-size:1rem;line-height:1.4}
.bestellart .bestellart__wahl small{display:block;margin-top:2px;font-size:.9rem;line-height:1.45;color:var(--text-2)}
/* unsichtbares Feld gegen Automaten — für Menschen und Vorlesegeräte ausgeblendet */
.honig{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* --- Seminare (Seiten erzeugt von seminare.inc.php) ---------------------- */
.hinweis--stark{border-left-color:var(--warn);background:var(--grund-2)}
.marke{display:inline-flex;align-items:center;min-height:24px;padding:2px 8px;border:1px solid var(--marke-rand);
  border-radius:var(--rund-klein);font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--marke);white-space:nowrap}
.marke--voll{border-color:var(--warn);color:var(--warn)}
.marke--offen{border-color:var(--gut);color:var(--gut)}

/* Übersicht */
.seminare__einstieg{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--a5);align-items:center;margin-bottom:var(--a6)}
.seminare__einstieg .fuehrung{margin-bottom:var(--a4)}
.seminare__punkte{list-style:none;padding:0;margin:0;display:grid;gap:var(--a3)}
.seminare__punkte li{display:grid;grid-template-columns:44px 1fr;gap:var(--a3);align-items:start;margin:0}
.seminare__punkte svg{width:44px;height:44px;padding:10px;border-radius:var(--rund);background:var(--marke-hauch);color:var(--marke)}
.seminare__punkte strong{display:block;font-size:1rem}
.seminare__punkte span{color:var(--text-2);font-size:.95rem;line-height:1.5}
.seminare__foto img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--rund);filter:var(--bild-dimmen)}
.seminare h2{margin-top:0}
@media (max-width:900px){.seminare__einstieg{grid-template-columns:1fr;gap:var(--a4)}}

.termine{list-style:none;padding:0;margin:0 0 var(--a5);max-width:none;display:grid;gap:var(--a3)}
.termin{display:grid;grid-template-columns:140px 96px minmax(0,1fr) auto;gap:var(--a4);align-items:center;margin:0;
  padding:var(--a3) var(--a4) var(--a3) var(--a3);background:var(--grund);border:1px solid var(--rand);border-radius:var(--rund);
  transition:border-color var(--zeit),box-shadow var(--zeit)}
.termin__bild{align-self:stretch;display:block;min-height:105px;border-radius:var(--rund-klein);overflow:hidden;background:#fff}
.termin__bild img{width:100%;height:100%;max-height:150px;object-fit:contain;display:block;padding:4px;box-sizing:border-box}
.termin--voll .termin__bild img{opacity:.6}
.termin:hover{border-color:var(--marke-rand);box-shadow:var(--schatten)}
.termin__datum{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;align-self:stretch;
  padding:var(--a2);border-radius:var(--rund-klein);background:var(--marke-hauch);color:var(--marke);text-align:center}
.termin__datum em{font-style:normal;font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.termin__datum strong{font-size:2rem;font-weight:400;line-height:1}
.termin__datum span{font-size:.78rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.termin--voll .termin__datum{background:var(--grund-2);color:var(--text-2)}
.termin__kategorie{margin:0 0 2px;font-size:.72rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3)}
.termin__text :where(h3,.wie-h3){font-size:1.15rem;margin:0 0 var(--a1)}
.termin__datumtext{margin:0 0 var(--a1);color:var(--text-2);font-size:.95rem;display:flex;flex-wrap:wrap;gap:var(--a2);align-items:center}
.termin__zeile{display:flex;flex-wrap:wrap;gap:var(--a1) var(--a4);margin:0;font-size:.92rem;color:var(--text-2)}
.termin__zeile span{display:inline-flex;align-items:center;gap:6px}
.termin__zeile svg{width:16px;height:16px;color:var(--text-3)}
.termin__tat{display:flex;flex-direction:column;gap:var(--a2);min-width:128px}
.termin__tat .knopf{width:100%}
@media (max-width:760px){
  .termin{grid-template-columns:72px minmax(0,1fr);padding:var(--a3)}
  .termin__bild{grid-column:1 / -1;min-height:0;height:200px}
  .termin__bild img{max-height:none}
  .termin__datum strong{font-size:1.6rem}
  .termin__tat{grid-column:1 / -1;flex-direction:row}
  .termin__tat .knopf{width:auto;flex:1}
}

/* Detailseite: Inhalt links, „Auf einen Blick" rechts mitlaufend */
.seminar__raster{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--a6);align-items:start}
.seminar__seite{position:sticky;top:108px;order:2}
.seminar__haupt{order:1;min-width:0}
.seminar__karte{background:var(--grund);border:1px solid var(--rand);border-radius:var(--rund);padding:var(--a4);box-shadow:var(--schatten)}
.seminar__termin{display:flex;align-items:center;gap:var(--a3);padding-bottom:var(--a3);margin-bottom:var(--a3);border-bottom:1px solid var(--rand)}
.seminar__tag{font-size:3rem;font-weight:400;line-height:1;color:var(--marke)}
.seminar__monat{font-weight:600;line-height:1.3}
.seminar__monat span{font-weight:400;color:var(--text-2)}
.seminar__bis{margin:-8px 0 var(--a3);color:var(--text-2);font-size:.95rem}
.seminar__fakten{list-style:none;padding:0;margin:0 0 var(--a4);display:grid;gap:var(--a3)}
.seminar__fakten li{display:grid;grid-template-columns:22px 1fr;gap:var(--a2);margin:0;line-height:1.45}
.seminar__fakten svg{width:20px;height:20px;margin-top:2px;color:var(--marke)}
.seminar__fakten small{font-size:.88rem;color:var(--text-2)}
.seminar__cta{width:100%}
.seminar__stand{margin:0;padding:var(--a2) var(--a3);border-radius:var(--rund-klein);background:var(--grund-2);font-weight:600;font-size:.95rem}
.seminar__stand--voll{background:#fbf0dc;color:#6b4600}
.seminar__fragen{margin:var(--a3) 0 0;font-size:.92rem;color:var(--text-2);line-height:1.6}
.seminar__karte .pdf{margin:var(--a3) 0 0}
.seminar__abschnitt{margin-bottom:var(--a6)}
.seminar__abschnitt>h2,.seminar__kachel>h2{font-size:1.35rem;font-weight:700;letter-spacing:-.01em;line-height:1.2;margin:0 0 var(--a3)}
.seminar__paar{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--a3);margin-bottom:var(--a6)}
.seminar__kachel{background:var(--grund-2);border-radius:var(--rund);padding:var(--a4)}
.seminar__kachel>svg{width:28px;height:28px;color:var(--marke);margin-bottom:var(--a2)}
.seminar__kachel>h2{font-size:1.1rem}
.seminar__kachel p{margin-bottom:0;color:var(--text-2)}
.seminar__programm{list-style:none;counter-reset:punkt;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0 var(--a4);max-width:none}
.seminar__programm li{counter-increment:punkt;display:grid;grid-template-columns:32px 1fr;gap:var(--a3);align-items:baseline;
  margin:0;padding:var(--a3) 0;border-bottom:1px solid var(--rand)}
.seminar__programm li::before{content:counter(punkt,decimal-leading-zero);font-size:.8rem;font-weight:600;color:var(--marke);letter-spacing:.04em}
.seminar__referenten{display:grid;grid-template-columns:44px 1fr;gap:var(--a3);align-items:start}
.seminar__referenten>svg{width:44px;height:44px;padding:10px;border-radius:50%;background:var(--marke-hauch);color:var(--marke)}
.seminar__referenten p{margin:10px 0 0}
.seminar__ort{background:var(--grund-2);border-radius:var(--rund);padding:var(--a4)}
.seminar__ort p{margin-bottom:var(--a2)}
.seminar__zusatz{color:var(--text-2)}
.seminar__links{display:flex;flex-wrap:wrap;gap:0 var(--a4);margin:0}
.seminar__wege{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--a3);margin-bottom:var(--a4)}
a.seminar__weg{display:grid;grid-template-columns:24px 1fr;gap:var(--a3);align-items:start;min-height:44px;padding:var(--a3);
  border:1px solid var(--rand);border-radius:var(--rund);background:var(--grund);color:var(--text);text-decoration:none;
  transition:border-color var(--zeit),background var(--zeit)}
a.seminar__weg:hover{border-color:var(--marke);background:var(--marke-hauch)}
.seminar__weg svg{width:22px;height:22px;color:var(--marke);margin-top:2px}
.seminar__weg span{color:var(--text-2);font-size:.92rem;overflow-wrap:anywhere;line-height:1.45}
.seminar__weg strong{display:block;color:var(--text);font-size:1rem}
.seminar__formular{max-width:760px;margin-bottom:var(--a5);padding:var(--a4)}
.seminar__formular h3{margin-top:0}
@media (max-width:980px){
  .seminar__raster{grid-template-columns:1fr;gap:var(--a4)}
  .seminar__seite{position:static;order:0}
}

.anfrage__senden{width:100%}
.anfrage__stand{margin:var(--a2) 0 0;font-size:.92rem;color:var(--text-2);min-height:1px}
.anfrage__stand.ist-fehler{color:var(--fehler)}
.anfrage__klein{margin:var(--a3) 0 0;font-size:.86rem;color:var(--text-3)}
/* Abschluss nach dem Absenden: eine ruhige Karte, alles mittig, Knöpfe gleich breit */
.anfrage__abschluss{max-width:640px;margin-inline:auto;padding:var(--a6) var(--a5);text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:var(--a4)}
.anfrage__abschluss h2{margin:0}
.anfrage__abschluss>p{margin:0;max-width:52ch;color:var(--text-2)}
.anfrage__zeichen{display:inline-grid;place-items:center;width:56px;height:56px;border-radius:50%;
  background:var(--gut);color:#fff}
.anfrage__zeichen svg{width:28px;height:28px}
.anfrage__eckdaten{display:grid;grid-template-columns:1fr 1fr;width:100%;margin:0;
  border:1px solid var(--rand);border-radius:var(--rund);background:var(--grund-2)}
.anfrage__eckdaten>div{padding:var(--a3) var(--a4);min-width:0}
.anfrage__eckdaten>div+div{border-left:1px solid var(--rand)}
.anfrage__eckdaten dt{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}
.anfrage__eckdaten dd{margin:4px 0 0;font-weight:600;overflow-wrap:anywhere}
.anfrage__knoepfe{display:grid;grid-template-columns:1fr 1fr;gap:var(--a3);width:100%;max-width:480px}
.anfrage__knoepfe .knopf{width:100%;justify-content:center;text-align:center}
@media (max-width:560px){
  .anfrage__abschluss{padding:var(--a5) var(--a4)}
  .anfrage__eckdaten,.anfrage__knoepfe{grid-template-columns:1fr}
  .anfrage__eckdaten>div+div{border-left:0;border-top:1px solid var(--rand)}
}
/* Fehlermeldung über dem Absende-Knopf */
.anfrage__fehler{margin:0 0 var(--a3);padding:var(--a3) var(--a4);border:1px solid var(--fehler);
  border-left-width:4px;border-radius:var(--rund);background:var(--grund);font-size:.95rem}
.anfrage__fehler p{margin:0}
.anfrage__fehler p+p{margin-top:var(--a2);color:var(--text-2)}
.anfrage__fehler strong{color:var(--fehler)}

/* --- Übernommene Inhalte: die alten Layout-Tabellen ---------------------- */
.duo{display:grid;gap:var(--a5);margin-bottom:var(--a5)}
.duo__paar{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:var(--a5);align-items:center}
.duo__paar>div{min-width:0}
/* Paar ohne zweite Hälfte (Bild in die Bühne gewandert, leere Hülle): Text über
   die volle Breite statt in der schmalen Bildspalte */
.duo__paar>div:empty{display:none}
.duo__paar:not(:has(>div:nth-child(2))),.duo__paar:has(>div:empty){grid-template-columns:1fr}
.duo__paar>div>*:first-child{margin-top:0}
.duo__paar>div>*:last-child{margin-bottom:0}
.duo__paar picture img{filter:var(--bild-dimmen);width:100%;height:auto;max-height:300px;object-fit:contain;
  border-radius:var(--rund);background:var(--grund-2)}
@media (max-width:760px){
  .duo__paar{grid-template-columns:1fr;gap:var(--a3)}
  .duo{gap:var(--a5)}
}

.stapel{margin-bottom:var(--a4)}
/* Häufige Fragen: aufklappbar (HIG: schrittweise Offenlegung), Zeile ≥ 44 px */
.fragen{border-top:1px solid var(--rand);margin-bottom:var(--a5);max-width:var(--lese)}
.fragen details{border-bottom:1px solid var(--rand)}
.fragen summary{display:flex;align-items:center;justify-content:space-between;gap:var(--a3);
  min-height:44px;padding:var(--a2) 0;cursor:pointer;list-style:none;font-weight:600;color:var(--text)}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary:hover{color:var(--marke)}
.fragen summary svg{width:16px;height:16px;flex:none;color:var(--text-3);transition:transform var(--zeit)}
.fragen details[open]>summary svg{transform:rotate(180deg)}
.fragen details>p{margin:0 0 var(--a3);color:var(--text-2)}
/* Bildreihe unter einem Abschnitt: gleich hohe Felder, Fotos nicht beschnitten */
.galerie{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--a3);margin:0 0 var(--a5)}
.galerie figure{margin:0;display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;
  background:var(--bildgrund-weiss);border:1px solid var(--rand);border-radius:var(--rund-klein);overflow:hidden}
.galerie img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;mix-blend-mode:multiply}
/* Bildreihe mit Bildunterschrift: Bild oben, Text darunter */
.galerie figure:has(figcaption){flex-direction:column;aspect-ratio:auto;padding-bottom:var(--a2)}
.galerie figcaption{padding:0 var(--a3);text-align:center;color:#2f3a4b}
.block{margin-bottom:var(--a6);padding-top:var(--a4);border-top:1px solid var(--rand)}
.block:first-of-type{border-top:0;padding-top:0}
.block>:where(h3,.wie-h3){font-size:1.35rem;margin-bottom:var(--a4);color:var(--marke)}

.inhalt :where(h4:not(.wie-h5),.wie-h4){font-size:1.12rem;font-weight:700;margin-bottom:var(--a2)}
.inhalt :where(h4,.wie-h4) strong{font-weight:700}

.haken{list-style:none;padding:0;display:grid;gap:var(--a2)}
.haken li{position:relative;padding-left:30px}
.haken li::before{content:"";position:absolute;left:0;top:.55em;width:16px;height:16px;
  border-radius:50%;background:var(--marke-hauch);
  box-shadow:inset 0 0 0 1.5px var(--marke)}
.haken li::after{content:"";position:absolute;left:5px;top:calc(.55em + 5px);
  width:6px;height:3px;border-left:2px solid var(--marke);border-bottom:2px solid var(--marke);
  transform:rotate(-45deg)}

.inhalt table{margin-bottom:var(--a5);width:100%;max-width:880px}
.inhalt td:first-child{width:44%;color:var(--text-2)}
/* Tabellen mit Kopfzeile sind Listen, keine Kennwert-Paare: Spalten nach Inhalt */
.inhalt table:has(thead) td:first-child{width:auto}
.inhalt td{overflow-wrap:anywhere}
/* Schmale Bildschirme: mehrspaltige Tabellen enger setzen, Kopfzeilen dürfen trennen */
@media (max-width:640px){
  .inhalt :is(th,td){padding:var(--a2) 10px}
  .inhalt th{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:anywhere}
}
.inhalt thead th{background:var(--grund-2);font-size:.92rem}
.inhalt tr.gruppe th{background:var(--marke-hauch);color:var(--marke);text-align:left;font-size:.86rem;letter-spacing:.06em;text-transform:uppercase}
.inhalt tbody tr:nth-child(2n) td{background:var(--grund-2)}

/* --- Vertriebspartner ----------------------------------------------------- */
.partnerliste{margin-bottom:var(--a6)}
.partnerkarte{display:flex;flex-direction:column;gap:var(--a1);padding:var(--a4)}
.partnerkarte .etikett{margin:0 0 var(--a1)}
.partnerkarte .etikett svg{width:15px;height:15px}
.partnerkarte :where(h3,.wie-h3){font-size:1.35rem;margin:0}
.partnerkarte__firma{color:var(--text-2);font-size:.95rem;margin:0 0 var(--a2)}
.partnerkarte p{margin-bottom:var(--a2)}
.partnerkarte__wege{list-style:none;padding:var(--a3) 0 0;margin:auto 0 0;border-top:1px solid var(--rand);display:grid;gap:0}
.partnerkarte__wege li{margin:0}
.partnerkarte__wege a{display:flex;align-items:center;gap:var(--a2);min-height:44px;text-decoration:none;overflow-wrap:anywhere}
.partnerkarte__wege a:hover{text-decoration:underline}
.partnerkarte__wege svg{width:18px;height:18px;flex:none}

/* --- Termine: Regeln stehen im Abschnitt „Seminare" ------------------------ */
.termin__text :where(h3,.wie-h3) a{color:inherit;text-decoration:none}
.termin__text :where(h3,.wie-h3) a:hover{color:var(--marke)}

/* ===========================================================================
   Produktbühne — dunkles Band mit Bild, Name und Einleitung
   Vorbild: die Produktseiten von Shinhan Medical und Jaeger.
   Hintergrund ist das Blau aus dem Logo, deshalb eigene Marken.
   ======================================================================== */
:root{
  --tief:#0f53a4;          /* Logo-Blau; Weiß darauf: 7,5:1 */
  --tief-2:#0b4488;        /* etwas dunkler für Hover */
  --auf-tief:#ffffff;
  --auf-tief-2:#dbe6f4;    /* 6,0:1 auf --tief */
}

.pbuehne{background:var(--tief);color:var(--auf-tief);padding-block:var(--a6)}
.pbuehne__innen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:var(--a6);align-items:center}
.pbuehne__innen--einspaltig{grid-template-columns:1fr;max-width:760px}
.pbuehne__bild{background:var(--bildgrund-weiss);border-radius:var(--rund);padding:var(--a5);
  display:flex;align-items:center;justify-content:center;min-height:280px}
.pbuehne__bild img{max-height:400px;width:auto;max-width:100%;height:auto;mix-blend-mode:multiply}
.pbuehne__text p a:not([class]){color:var(--auf-tief);text-decoration:underline;text-underline-offset:2px}
.pbuehne__text p a:not([class]):hover{text-decoration-thickness:2px}
.pbuehne__text h1{color:var(--auf-tief);font-size:clamp(2rem,1.5rem + 2vw,2.9rem);
  margin-bottom:var(--a2);letter-spacing:-.02em}
.pbuehne__unter{color:var(--auf-tief-2);font-size:1.05rem;margin-bottom:var(--a4)}
.pbuehne hr{border:0;border-top:1px solid rgba(255,255,255,.22);margin:0 0 var(--a4);
  max-width:420px}
.pbuehne p{color:var(--auf-tief-2);max-width:52ch}
.pbuehne strong{color:var(--auf-tief)}
.pbuehne sup{color:inherit}
.pbuehne__tat{display:flex;flex-wrap:wrap;align-items:center;gap:var(--a2);margin-top:var(--a4)}
/* Ohne flex:none quetscht der Flexkasten die Knöpfe zu Kreisen zusammen */
.pbuehne__tat>*,.pbuehne__tat>a.pdf{flex:none;margin:0}   /* a.pdf hat sonst Außenabstand → 4 px versetzt */
.knopf--hell{background:var(--auf-tief);color:var(--tief);border-color:var(--auf-tief)}
.knopf--hell:hover{background:var(--auf-tief-2);color:var(--tief)}
.pbuehne .pdf{background:transparent;border-color:rgba(255,255,255,.35);color:var(--auf-tief)}
.pbuehne .pdf svg{color:var(--auf-tief-2)}
.pbuehne .pdf:hover{background:var(--tief-2);border-color:var(--auf-tief-2);color:var(--auf-tief)}
.duo__rest{margin-bottom:var(--a4)}
@media (max-width:860px){
  .pbuehne__innen{grid-template-columns:1fr;gap:var(--a4)}
  .pbuehne__bild{min-height:0;padding:var(--a4)}
  .pbuehne__bild img{max-height:260px}
}

/* --- Karte mit Foto oben ------------------------------------------------- */
a.karte--foto{padding:0;overflow:hidden;display:flex;flex-direction:column}
.karte__bild{display:block}
/* Hier ist Zuschnitt richtig: das sind Szenenfotos, keine freigestellten
   Geräte — bei ihnen geht durch den Beschnitt nichts Wesentliches verloren. */
.karte__bild img{width:100%;height:180px;object-fit:cover;display:block}
.karte__text{padding:var(--a4);display:flex;flex-direction:column;gap:var(--a2);flex:1}
.karte__text :where(h3,.wie-h3){margin:0;font-size:1.1rem}
.karte__text p{margin:0;color:var(--text-2);font-size:.97rem}
.karte__weiter{display:flex;align-items:center;gap:6px;margin-top:auto!important;
  color:var(--marke)!important;font-weight:600;font-size:.95rem}
.karte__weiter svg{width:16px;height:16px}

/* --- Herkunftshinweis unter übernommenen Herstellerangaben --------------- */
.quelle{font-size:.88rem;color:var(--text-3);border-left:2px solid var(--rand);
  padding-left:var(--a3);margin-top:var(--a4)}

/* ===========================================================================
   Startseite — Aufbau nach dem Entwurf vom 13.09.2026
   ======================================================================== */

/* --- Bühne mit Bilderfolge ------------------------------------------------
   Die Bühnenbilder der alten Seite sind 2600×700 und tragen ihr Gerät rechts,
   links ist Himmel. Deshalb liegt jedes Bild in voller Breite und UNBESCHNITTEN
   am unteren Rand; darüber setzt eine Fläche in der Himmelsfarbe des Bilds fort,
   und der Text steht links auf einem hellen Schleier.
   Die Bühne bleibt in beiden Darstellungen hell — die Bilder sind es auch. */
.held{
  --marke:#0f53a4; --marke-tief:#0a3f7e; --auf-marke:#ffffff;
  --text:#16202e; --text-2:#4a5769; --text-3:#67748a; --rand:#dde2ea;
  position:relative;isolation:isolate;overflow:hidden;background:#fff;color:var(--text);
  min-height:max(460px, calc(26.923vw + 90px))
}
.folien{position:absolute;inset:0;z-index:-2}
.folie{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.2s ease;
  background:linear-gradient(to bottom,#ffffff 0%,var(--himmel) calc(100% - 26.923vw + 2px))}
.folie.ist-an{opacity:1}
/* Himmelsfarbe und Bildschwerpunkt je Folie — als Klassen, weil die
   Content-Security-Policy keine style-Attribute erlaubt. */
.folie--1{--himmel:#aabac8;--fokus:88%}
.folie--2{--himmel:#adbcca;--fokus:86%}
.folie--3{--himmel:#b3c1cc;--fokus:84%}
.folie--4{--himmel:#b4c5d3;--fokus:86%}
.folie--5{--himmel:#adbecd;--fokus:72%}
.folie--6{--himmel:#aabcca;--fokus:86%}
.folie--7{--himmel:#bfcad2;--fokus:86%}
.folie picture{position:absolute;left:0;right:0;bottom:0;display:block}
.folie img{width:100%;height:auto;display:block;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 24%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 24%)}
.folien::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.86) 30%,rgba(255,255,255,0) 58%)}

.held__innen{position:relative;display:flex;flex-direction:column;justify-content:space-between;
  gap:var(--a4);min-height:inherit;padding-block:clamp(36px,4vw,64px) var(--a5)}
.held__text{max-width:600px}
.held h1{font-weight:400;font-size:clamp(2.5rem,1.3rem + 3.2vw,4rem);line-height:1.04;
  letter-spacing:-.025em;color:var(--text);margin-bottom:var(--a4)}
.held h1 em{font-style:normal;color:var(--marke)}
.held__satz{font-size:clamp(1.2rem,1rem + .6vw,1.45rem);line-height:1.4;font-weight:600;color:var(--text);max-width:34ch;margin:0 0 var(--a2)}
.held__vor{font-size:1.08rem;line-height:1.6;color:var(--text-2);max-width:52ch;margin-bottom:var(--a4)}
.held__vor:has(+.held__jahr){margin-bottom:var(--a3)}
.held__jahr{display:inline-flex;align-items:center;gap:var(--a2);margin:0 0 var(--a4);min-height:44px;padding:6px 18px 6px 14px;border:1px solid var(--marke-rand);border-radius:999px;background:var(--marke-hauch);color:var(--marke);font-size:1.3rem;font-weight:600;letter-spacing:.03em}
.held__jahr svg{width:24px;height:24px;flex:none}
.held__knoepfe{display:flex;flex-wrap:wrap;align-items:center;gap:var(--a3) var(--a5)}

.folien__steuer{display:flex;flex-wrap:wrap;align-items:center;gap:var(--a1)}
.folien__zahl{display:none;min-width:4.5em;justify-content:center;font-size:.9rem;font-weight:600;
  color:var(--text-2);font-variant-numeric:tabular-nums}
.folien__taste,.folien__punkt{flex:none}
.folien__steuer[hidden]{display:none}
.folien__taste{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border:1px solid rgba(22,32,46,.2);border-radius:50%;background:rgba(255,255,255,.75);
  color:var(--text);cursor:pointer;transition:background var(--zeit),border-color var(--zeit)}
.folien__taste:hover{background:#fff;border-color:var(--marke);color:var(--marke)}
.folien__taste svg{width:17px;height:17px}
.folien__taste[aria-pressed="true"]{background:var(--marke);border-color:var(--marke);color:#fff}
.folien__punkte{display:flex}
.folien__punkt{position:relative;width:44px;height:44px;border:0;background:none;cursor:pointer;padding:0}
.folien__punkt::before{content:"";position:absolute;left:7px;right:7px;top:50%;height:2px;
  translate:0 -50%;background:rgba(22,32,46,.25);transition:background var(--zeit),height var(--zeit)}
.folien__punkt:hover::before{background:rgba(22,32,46,.5)}
.folien__punkt[aria-current="true"]::before{background:var(--marke);height:3px}
/* Schmale Bildschirme: sechs Punkte passen nicht neben Pfeile und Pause — Zähler statt Punkte */
@media (max-width:560px){
  .folien__steuer{flex-wrap:nowrap}
  .folien__punkte{display:none}
  .folien__zahl{display:inline-flex}
}

/* Scroll-Hinweis unten in der Mitte */
.held__runter{position:absolute;left:50%;bottom:14px;translate:-50% 0;display:flex;
  align-items:center;justify-content:center;width:44px;height:56px;color:var(--text)}
.held__runter::before{content:"";position:absolute;width:26px;height:42px;border-radius:14px;
  border:1.5px solid rgba(22,32,46,.4);background:rgba(255,255,255,.5)}
.held__runter svg{position:relative;width:15px;height:15px}
.held__runter:hover{color:var(--marke)}

@media (prefers-reduced-motion: reduce){.folie{transition:none}}

/* Schmale Geräte: Text oben, Bild darunter. Hier MUSS das Bild beschnitten
   werden, sonst ist es 100 px hoch — der Ausschnitt liegt auf dem Gerät. */
@media (max-width:900px){
  .held{min-height:0;display:flex;flex-direction:column}
  .held__innen{order:1;min-height:0;padding-block:var(--a5) var(--a4)}
  .folien{position:relative;order:2;height:220px;inset:auto}
  .folie{background:var(--himmel)}
  .folie picture{inset:0}
  .folie img{height:100%;object-fit:cover;object-position:var(--fokus) center;
    -webkit-mask-image:none;mask-image:none}
  .folien::after{display:none}
  .held__runter{display:none}
}

/* --- Werte-Leiste ---------------------------------------------------------- */
.werte{background:var(--grund-2);border-bottom:1px solid var(--rand)}
.werte__raster{display:grid;grid-template-columns:repeat(4,1fr)}
.wert{position:relative;text-align:center;padding:var(--a5) var(--a4)}
.wert+.wert::before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;background:var(--rand)}
.wert svg{display:block;width:46px;height:46px;margin:0 auto var(--a3);color:var(--marke)}
.wert h2{font-family:inherit;font-size:.8rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;line-height:1.3;margin-bottom:var(--a2)}
.wert p{font-size:.92rem;line-height:1.6;color:var(--text-2);max-width:25ch;margin:0 auto}
@media (max-width:900px){
  .werte__raster{grid-template-columns:1fr 1fr}
  .wert:nth-child(3)::before{display:none}
  .wert:nth-child(n+3){border-top:1px solid var(--rand)}
}
@media (max-width:520px){
  .werte__raster{grid-template-columns:1fr}
  .wert::before{display:none}
  .wert+.wert{border-top:1px solid var(--rand)}
}

/* --- Produkte & Lösungen: Einleitung links, Karten rechts ------------------ */
.produkte{display:grid;grid-template-columns:minmax(260px,1.3fr) repeat(4,minmax(0,1fr));gap:var(--a3)}
.produkte__kopf{grid-row:span 2;display:flex;flex-direction:column;padding-right:var(--a4)}
.produkte__kopf h2{margin-bottom:var(--a3);font-size:clamp(1.55rem,1rem + 1.1vw,2.1rem);
  hyphens:manual;-webkit-hyphens:manual;overflow-wrap:break-word}
.produkte__kopf p{color:var(--text-2);font-size:.98rem}
.produkte__kopf .weiter{margin-top:auto;margin-bottom:1px;min-height:44px}   /* 1 px = Kartenrahmen */
.pkarte{display:flex;flex-direction:column;border:1px solid var(--rand);border-radius:var(--rund-klein);
  background:var(--grund);color:var(--text);text-decoration:none;
  transition:border-color var(--zeit),box-shadow var(--zeit)}
.pkarte:hover{border-color:var(--marke-rand);box-shadow:var(--schatten)}
.pkarte__bild{display:flex;align-items:center;justify-content:center;height:170px;padding:var(--a3);
  background:var(--bildgrund);border-bottom:1px solid var(--rand)}
.pkarte__bild picture{display:contents}
/* Die Gerätefotos sind auf Weiß freigestellt — multiply lässt das Weiß in der
   grauen Fläche verschwinden, ohne das Gerät zu beschneiden. */
.pkarte__bild img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;mix-blend-mode:multiply}
.pkarte__text{display:flex;flex-direction:column;gap:6px;flex:1;padding:var(--a3) var(--a3) 0}
.pkarte__text strong{font-size:1rem;font-weight:600;line-height:1.3}
.pkarte__text>span:not(.weiter){font-size:.85rem;line-height:1.5;color:var(--text-2)}
/* Verweis füllt die letzte Zeile der Karte (44 px) — so steht sein Text genau auf
   derselben Linie wie „Alle Produktbereiche" links, das ebenfalls unten sitzt. */
.pkarte__text .weiter{margin-top:auto;min-height:44px}
@media (max-width:1100px){
  .produkte{grid-template-columns:repeat(3,minmax(0,1fr))}
  .produkte__kopf{grid-column:1 / -1;grid-row:auto;padding-right:0;margin-bottom:var(--a3)}
  .produkte__kopf .weiter{margin-top:var(--a2)}
}
@media (max-width:760px){.produkte{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.produkte{grid-template-columns:1fr}}

/* --- Über uns: Bild, Text, Zahlen ----------------------------------------- */
/* --- AGB: nummerierte Punkte mit hängender Nummer ------------------------- */
.agb__inhalt{margin:var(--a5) 0 var(--a6);padding:var(--a4) var(--a5);background:var(--grund-2);border-radius:var(--rund)}
.agb__inhalt h2{font-size:1.05rem;margin:0 0 var(--a3)}
.agb__inhalt ol{margin:0;padding-left:1.6em}
@media (min-width:720px){.agb__inhalt ol{columns:2;column-gap:var(--a5)}}
.agb__inhalt li{margin:0 0 var(--a1);break-inside:avoid}
.agb__abschnitt{scroll-margin-top:96px;margin-bottom:var(--a5)}
.agb__abschnitt h2{font-size:1.3rem;margin:0 0 var(--a3)}
.agb__abschnitt h2 .agb__nr{color:var(--marke);font-variant-numeric:tabular-nums}
.agb__punkt{display:grid;grid-template-columns:3.4em minmax(0,1fr);gap:var(--a2);margin:0 0 var(--a3);max-width:none}
.agb__punkt--tief{grid-template-columns:4.4em minmax(0,1fr);padding-left:3.4em}
.agb__punkt .agb__nr{color:var(--text-3);font-variant-numeric:tabular-nums}
.agb__text{min-width:0;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
@media (max-width:520px){.agb__punkt--tief{padding-left:1em}}

/* --- Hervorgehobenes Merkmal (Nox T3s: RIP-Gurte) ------------------------- */
.merkmal__raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,4vw,64px);align-items:center}
.merkmal__bild img{width:100%;height:auto;border-radius:var(--rund);display:block;filter:var(--bild-dimmen)}
.merkmal__text h2{font-size:clamp(1.9rem,1.2rem + 2.4vw,3rem);line-height:1.1;letter-spacing:-.02em;font-weight:400;margin:0 0 var(--a4)}
.merkmal__vor{font-size:clamp(1.05rem,.98rem + .35vw,1.22rem);line-height:1.6;color:var(--text-2);max-width:60ch}
.merkmal__zahlen{list-style:none;margin:var(--a5) 0;padding:0;max-width:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--a4)}
.merkmal__zahlen li{margin:0;display:flex;flex-direction:column;gap:var(--a2);padding:var(--a4);background:var(--grund);
  border:1px solid var(--rand);border-radius:var(--rund)}
.merkmal__zahlen strong{font-size:clamp(2rem,1.4rem + 2vw,3rem);font-weight:600;line-height:1;color:var(--marke);font-variant-numeric:tabular-nums}
.merkmal__zahlen span{color:var(--text-2);font-size:.97rem;line-height:1.5}
.merkmal__zahlen--seite{margin-top:var(--a4)}
.merkmal-block{padding:clamp(28px,4vw,48px);margin-block:var(--a5);background:var(--marke-hauch);
  border:1px solid var(--marke-rand);border-radius:var(--rund)}
.merkmal-block>.etikett{margin:0 0 var(--a2)}
.merkmal-block>:is(h2,h3){font-size:clamp(1.9rem,1.2rem + 2.4vw,3rem);line-height:1.1;letter-spacing:-.02em;
  font-weight:400;color:var(--text);margin:0 0 var(--a4)}
@media (max-width:900px){.merkmal__raster{grid-template-columns:1fr}}
@media (max-width:640px){.merkmal__zahlen{grid-template-columns:1fr}}

.ueber{display:grid;grid-template-columns:42% minmax(0,1fr) minmax(230px,.5fr);background:var(--grund-2)}
.ueber__bild{display:block;align-self:center}
.ueber__bild img{width:100%;height:auto;aspect-ratio:800 / 1094;display:block}   /* nie beschneiden: ganzes Foto, Turmspitzen inklusive */
.ueber__text{padding:clamp(40px,5vw,84px) clamp(28px,4vw,64px);align-self:center}
.ueber__text h2{margin-bottom:var(--a4)}
.ueber__text p{color:var(--text-2);font-size:.98rem;line-height:1.75;margin-bottom:var(--a4)}
.zeitleiste{list-style:none;margin:0 0 var(--a6);padding:0;max-width:none;display:grid;gap:var(--a3)}
.zeitleiste li{display:grid;grid-template-columns:5.5rem 1fr;gap:var(--a4);align-items:baseline;margin:0;
  padding:var(--a3) 0;border-top:1px solid var(--rand)}
.zeitleiste__jahr{font-size:1.25rem;font-weight:600;color:var(--marke);font-variant-numeric:tabular-nums;line-height:1.2}
.zeitleiste :where(h3,.wie-h3){font-size:1.05rem;margin:0 0 var(--a1)}
.zeitleiste p{margin:0;color:var(--text-2)}
.kennzahlen{list-style:none;margin:var(--a5) 0 var(--a6);padding:0;max-width:none;display:grid;
  grid-template-columns:repeat(3,1fr);gap:var(--a4);text-align:center}
.kennzahlen li{margin:0;display:flex;flex-direction:column;gap:var(--a1);padding:var(--a4);
  border:1px solid var(--rand);border-radius:var(--rund)}
.kennzahlen strong{font-size:clamp(1.6rem,4vw,2.4rem);font-weight:600;color:var(--marke);font-variant-numeric:tabular-nums}
.kennzahlen span{color:var(--text-2)}
@media (max-width:600px){.zeitleiste li{grid-template-columns:4.2rem 1fr;gap:var(--a3)}
  .kennzahlen{grid-template-columns:1fr}}
.ueber__zahlen{list-style:none;margin:var(--a6) 0;padding:0 clamp(24px,3vw,48px);max-width:none;
  border-left:1px solid var(--rand);display:flex;flex-direction:column;justify-content:center;gap:var(--a4)}
.ueber__zahlen li{display:flex;align-items:center;gap:var(--a3);margin:0}
.ueber__zahlen svg{width:38px;height:38px;flex:none;color:var(--marke)}
.ueber__zahlen span{display:flex;flex-direction:column;line-height:1.25}
.ueber__zahlen small{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.ueber__zahlen strong{font-size:1.25rem;font-weight:600;color:var(--marke)}
@media (max-width:1100px){
  .ueber{grid-template-columns:1fr 1fr}
  .ueber__zahlen{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;justify-content:space-between;
    border-left:0;border-top:1px solid var(--rand);margin:0 clamp(28px,4vw,64px);padding:var(--a4) 0 var(--a5)}
}
@media (max-width:760px){
  .ueber{grid-template-columns:1fr}
  .ueber__zahlen{display:grid;grid-template-columns:1fr 1fr;margin-inline:var(--a4)}
}
.ueber>*{min-width:0}
@media (max-width:400px){.ueber__zahlen{grid-template-columns:1fr}}

/* --- Service-Karten mit Foto ---------------------------------------------- */
.videos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:var(--a4);margin:var(--a4) 0 var(--a5)}
.video{display:flex;flex-direction:column;padding:0;overflow:hidden;color:inherit;text-decoration:none}
.video:hover{border-color:var(--marke-rand);box-shadow:var(--schatten)}
.video__bild{position:relative;display:block;aspect-ratio:16/9;background:#000}
.video__bild img{width:100%;height:100%;object-fit:cover;display:block}
.video__start{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;
  background:rgba(0,0,0,.62)}
.video__start::after{content:"";position:absolute;left:22px;top:17px;border-style:solid;border-width:11px 0 11px 17px;
  border-color:transparent transparent transparent #fff}
.video:hover .video__start{background:var(--marke)}
.video__dauer{position:absolute;right:8px;bottom:8px;padding:2px 6px;border-radius:4px;background:rgba(0,0,0,.72);
  color:#fff;font-size:.78rem;font-weight:600;font-variant-numeric:tabular-nums}
.video__text{display:flex;flex-direction:column;gap:var(--a1);padding:var(--a3) var(--a4) var(--a4);flex:1}
.video__text .etikett{margin:0}
.video__text strong{font-size:1.05rem;font-weight:600}
.video__text>span:not(.etikett):not(.weiter){font-size:.93rem;color:var(--text-2)}
.video__text .weiter{margin-top:auto;padding-top:var(--a2)}
.webinare{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(460px,100%),1fr));gap:var(--a4);margin:var(--a5) 0}
.webinar{display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--a4);padding:var(--a4);align-items:start}
.webinar__bild{width:96px;height:96px;border-radius:50%;object-fit:cover;display:block}
.webinar__text{min-width:0}
.webinar .etikett{margin:0 0 var(--a2)}
.webinar h3{font-size:1.2rem;margin:0 0 var(--a1)}
.webinar__en{font-size:.88rem;color:var(--text-3);font-style:italic;margin:0 0 var(--a3)}
.webinar__ref{font-size:.93rem;color:var(--text-2);margin:0 0 var(--a3)}
.webinar__text>p:not([class]){font-size:.95rem}
.webinar__wege{list-style:none;padding:0;margin:var(--a3) 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:var(--a2) var(--a4)}
.webinar__wege li{margin:0;display:flex}
.webinar__wege .pdf{margin:0}
@media (max-width:520px){.webinar{grid-template-columns:1fr}.webinar__bild{width:72px;height:72px}}
.wien__bilder{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:var(--a4);margin:0}
.wien__bild{margin:0;display:flex;flex-direction:column;border:1px solid var(--rand);border-radius:var(--rund-klein);overflow:hidden;background:var(--grund)}
.wien__bild img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
.wien__bild figcaption{display:flex;flex-direction:column;gap:var(--a1,4px);padding:var(--a3) var(--a4) var(--a4)}
.wien__bild strong{font-size:1.05rem;font-weight:600}
.wien__bild span{font-size:.93rem;color:var(--text-2)}
.wien__fuss{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--a3);margin:var(--a5) 0 var(--a3)}
.wien__adresse{display:flex;align-items:flex-start;gap:var(--a2);margin:0}
.wien__adresse svg{width:22px;height:22px;color:var(--marke);flex:none;margin-top:2px}
/* Beide Zeilen im selben Block: gleiche Zeilenhöhe, gleicher Abstand */
/* Feste Zeilenhöhe statt Faktor: sonst hätte die kleinere zweite Zeile
   einen kleineren Abstand als die erste. */
.wien__adresse-zeilen{display:flex;flex-direction:column;min-width:0;line-height:1.6rem}
.wien__adresse-zeilen>*{line-height:inherit}
.wien__adresse-zeilen strong{font-weight:600}
.wien__adresse-zeilen>span{font-weight:400;color:var(--text-2);font-size:.95rem}
.wien .quelle{margin:0}
.fkarten{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--a4)}
.fkarte{display:flex;flex-direction:column;border:1px solid var(--rand);border-radius:var(--rund-klein);
  background:var(--grund);color:var(--text);text-decoration:none;overflow:hidden;
  transition:border-color var(--zeit),box-shadow var(--zeit)}
.fkarte:hover{border-color:var(--marke-rand);box-shadow:var(--schatten)}
/* Szenenfotos dürfen beschnitten werden — anders als die freigestellten Geräte */
.fkarte__bild img{width:100%;height:220px;object-fit:cover;display:block}
.fkarte__text{display:flex;flex-direction:column;gap:var(--a2);flex:1;padding:var(--a4)}
.fkarte__text strong{font-size:1.1rem;font-weight:600}
.fkarte__text>span:not(.weiter){font-size:.95rem;color:var(--text-2)}
.fkarte__text .weiter{margin-top:auto;padding-top:var(--a2)}

/* --- Ersatzteil-Band (anstelle des Newsletters im Entwurf) ----------------- */
.ruf-band{background:var(--tief);color:var(--auf-tief);padding-block:var(--a5)}
.ruf-band__innen{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,1fr);gap:var(--a4) var(--a6);align-items:center}
.ruf-band__text{display:flex;align-items:center;gap:var(--a4)}
.ruf-band__text svg{width:44px;height:44px;flex:none;color:var(--auf-tief)}
.ruf-band .etikett{margin-bottom:4px}
.ruf-band h2{font-family:inherit;font-size:1.3rem;font-weight:600;letter-spacing:0;line-height:1.35;
  color:var(--auf-tief);margin:0}
.ruf-band__form{display:flex}
.ruf-band__form input{flex:1;min-width:0;min-height:52px;padding:0 var(--a3);border:0;
  border-radius:var(--rund-klein) 0 0 var(--rund-klein);background:#fff;color:#16202e;font:inherit;
  font-variant-numeric:tabular-nums}
.ruf-band__form .knopf{min-height:52px;border-radius:0 var(--rund-klein) var(--rund-klein) 0}
.ruf-band :focus-visible{outline-color:#ffffff}
@media (max-width:860px){.ruf-band__innen{grid-template-columns:1fr}}

/* --- Breites Foto am Kopf einer Inhaltsseite ------------------------------ */
.seitenfoto{margin:0 0 var(--a5)}
.seitenfoto img{filter:var(--bild-dimmen);width:100%;height:clamp(220px,32vw,420px);object-fit:cover;object-position:center 40%;
  border-radius:var(--rund-klein);margin:0}

/* --- Herstellerangaben: Ergometer-Arten, Programm, lange Listen ----------- */
.arten ul,.programm ul{list-style:none;padding:0;margin:var(--a2) 0 0}
.arten li,.programm li{margin:0;padding:6px 0;border-top:1px solid var(--rand);font-size:.95rem}
.arten li a,.programm li a{text-decoration:none;font-weight:600}
.arten li a:hover,.programm li a:hover{text-decoration:underline}
.programm :where(h4,.wie-h4){font-family:inherit;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.liste-klein{font-size:.88rem;color:var(--text-3);line-height:1.6}

/* --- Suche ------------------------------------------------------------------ */
.suche__form{margin:0 0 var(--a3)}
.suchfeld--gross{min-height:56px;padding-inline:var(--a4);font-size:1.1rem}
.suchfeld--gross svg{width:22px;height:22px}
.suchfeld--gross input{min-height:54px;font-size:1.1rem}
.suche__stand{color:var(--text-2);font-size:.95rem;min-height:1.5em;margin:0 0 var(--a4)}
.suche__gruppe{display:flex;align-items:baseline;gap:var(--a2);font-size:1.3rem;margin:var(--a5) 0 var(--a3);
  padding-bottom:var(--a2);border-bottom:1px solid var(--rand)}
.suche__gruppe span{font-size:.92rem;font-weight:400;color:var(--text-3);font-variant-numeric:tabular-nums}
.treffer{list-style:none;padding:0;margin:0;max-width:none;display:grid;gap:var(--a2)}
.treffer__eintrag{margin:0}
.treffer__link{display:flex;gap:var(--a4);align-items:flex-start;padding:var(--a3);border-radius:var(--rund);
  text-decoration:none;color:inherit;border:1px solid transparent}
.treffer__link:hover,.treffer__link:focus-visible{border-color:var(--marke-rand);background:var(--marke-hauch)}
.treffer__bild{width:72px;height:72px;flex:none;object-fit:contain;border-radius:var(--rund-klein);
  background:var(--bildgrund-weiss);filter:var(--bild-dimmen)}
.treffer__bild--leer{display:block;background:var(--grund-2);filter:none}
.treffer__text{display:flex;flex-direction:column;gap:2px;min-width:0}
.treffer__pfad{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.treffer__titel{font-size:1.1rem;font-weight:600;color:var(--marke)}
.treffer__unter{font-size:.95rem;color:var(--text-2)}
.treffer__auszug{font-size:.92rem;color:var(--text-2);line-height:1.55;overflow-wrap:anywhere}
.treffer mark{background:var(--marke-hauch);color:inherit;border-radius:3px;padding:0 2px;
  box-shadow:inset 0 -2px 0 var(--marke-rand)}
.treffer--teile .treffer__link{padding-block:var(--a2)}
.suche__vorschlaege{display:flex;flex-wrap:wrap;gap:var(--a2)}
.suche__vorschlaege a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--a3);
  border:1px solid var(--rand);border-radius:999px;text-decoration:none;color:var(--text)}
.suche__vorschlaege a:hover{border-color:var(--marke);color:var(--marke)}
.suche__nichts{padding:var(--a4);border:1px solid var(--rand);border-radius:var(--rund);background:var(--grund-2)}
.menue__suche{padding:var(--a3) var(--a4) var(--a2)}
.menue__suche .suchfeld{min-width:0}
@media (max-width:600px){.treffer__bild{width:56px;height:56px}.treffer__link{gap:var(--a3);padding:var(--a2)}}

/* ===========================================================================
   TwinStream EVO — Systemseiten (Übersicht + Unterseiten)
   ======================================================================== */
.ts-anker{display:flex;flex-wrap:wrap;gap:var(--a2);margin:0 0 var(--a5);padding:0;list-style:none;max-width:none}
.ts-anker li{margin:0}
.ts-anker a{display:inline-flex;align-items:center;min-height:44px;padding:6px 16px;border:1px solid var(--rand);
  border-radius:999px;background:var(--grund);color:var(--text);text-decoration:none;font-size:.95rem}
.ts-anker a:hover{border-color:var(--marke);color:var(--marke)}

.artikel-liste{display:grid;gap:var(--a4);grid-template-columns:repeat(auto-fill,minmax(min(460px,100%),1fr));margin:0 0 var(--a5)}
.artikel-liste--eng{grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr))}
.artikel{display:grid;grid-template-columns:150px minmax(0,1fr);gap:var(--a4);align-items:start;
  background:var(--grund);border:1px solid var(--rand);border-radius:var(--rund);padding:var(--a4);scroll-margin-top:96px}
.artikel--breit{grid-column:1 / -1;grid-template-columns:minmax(0,260px) minmax(0,1fr)}
.artikel--symbol{grid-template-columns:88px minmax(0,1fr)}
.artikel__bild{background:var(--bildgrund-weiss);border-radius:var(--rund-klein);display:flex;align-items:center;justify-content:center}
.artikel__bild img{display:block;width:100%;height:auto;max-height:220px;object-fit:contain;mix-blend-mode:multiply}
.artikel--breit .artikel__bild img{max-height:320px}
.artikel__text{min-width:0}
.artikel__art{margin:0 0 var(--a1);font-size:.76rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--marke)}
.artikel__text h3{margin:0 0 var(--a1);font-size:1.2rem}
.artikel__unter{margin:0 0 var(--a3);color:var(--text-2);font-size:.97rem}
.artikel__text p{font-size:.98rem}
.artikel__text ul{margin:0 0 var(--a3)}
.artikel__text li{font-size:.97rem}
.artikel__daten{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--a1) var(--a3);margin:0 0 var(--a3);font-size:.95rem}
.artikel__daten dt{color:var(--text-3);font-weight:600}
.artikel__daten dd{margin:0}
.artikel__ref{display:flex;flex-wrap:wrap;gap:var(--a1) var(--a2);margin:var(--a3) 0 0;padding:0;list-style:none}
.artikel__ref li{margin:0;font-size:.82rem;font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--text-2);
  background:var(--grund-2);border:1px solid var(--rand);border-radius:var(--rund-klein);padding:2px 8px}
.artikel__ref li b{font-weight:600;color:var(--text-3);margin-right:4px}
.artikel__hinweis{margin:var(--a2) 0 0;font-size:.9rem;color:var(--warn)}
@media (max-width:560px){
  .artikel,.artikel--breit{grid-template-columns:1fr}
  .artikel__bild{max-width:260px}
  .artikel--symbol{grid-template-columns:72px minmax(0,1fr)}
}

.ts-hinweis{background:var(--marke-hauch);border:1px solid var(--marke-rand);border-radius:var(--rund);
  padding:var(--a4);margin:0 0 var(--a5)}
.ts-hinweis h2,.ts-hinweis h3{margin-top:0}
.ts-hinweis p:last-child{margin-bottom:0}

.anwendungen{display:grid;gap:var(--a4);grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));margin:0 0 var(--a5)}
.anwendung{background:var(--grund);border:1px solid var(--rand);border-radius:var(--rund);overflow:hidden;display:flex;flex-direction:column}
.anwendung img{display:block;width:100%;height:auto;aspect-ratio:16 / 9;object-fit:cover}
.anwendung__text{padding:var(--a4)}
.anwendung__text h3{margin:0 0 var(--a2);font-size:1.15rem}
.anwendung__text p{margin:0 0 var(--a2);color:var(--text-2);font-size:.97rem}
.anwendung__text ul{margin:0}
.anwendung__text li{font-size:.95rem}

.ts-tabelle{overflow-x:auto;margin:0 0 var(--a3);-webkit-overflow-scrolling:touch}
.ts-tabelle table{min-width:720px;margin:0}
.ts-tabelle td,.ts-tabelle th{white-space:nowrap;font-variant-numeric:tabular-nums}
.ts-tabelle tr.gruppe th{text-align:left;background:var(--grund-2)}
.artikel__daten>div{display:contents}
.ts-anker a[aria-current="page"]{background:var(--marke);border-color:var(--marke);color:var(--auf-marke);font-weight:600}
.ts-sprung{margin:calc(-1 * var(--a4)) 0 var(--a5);color:var(--text-3);font-size:.95rem}
.ts-sprung a{display:inline-block;padding-block:10px}
.artikel__text{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
@media (max-width:560px){
  .artikel__daten{grid-template-columns:1fr;gap:0}
  .artikel__daten dd{margin-bottom:var(--a2)}
}
.bereich>.weiter{margin-top:auto;padding:0 var(--a4) var(--a3)}
.ts-weiter>.karte{display:flex;flex-direction:column}
.ts-weiter>.karte>.weiter{margin-top:auto}
a.karte.ts-karte{display:flex}


/* --- Startseite: Video TwinStream EVO (öffnet YouTube, kein Einbetten — CSP und keine Fremd-Cookies) --- */
.film-band{background:var(--grund);color:var(--text)}
.film{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,72px);align-items:center}
.film__text h2{color:var(--text);font-size:clamp(1.9rem,1.2rem + 2.4vw,3rem);font-weight:400;letter-spacing:-.02em;line-height:1.1;margin:0 0 var(--a4)}
.film__text p:not(.etikett){color:var(--text-2);font-size:1.05rem;line-height:1.65;max-width:44ch;margin-bottom:var(--a5)}
.film__bild{position:relative;display:block;border-radius:var(--rund);overflow:hidden;
  box-shadow:var(--schatten-hoch);outline-offset:4px}
.film__bild img{display:block;width:100%;height:auto;aspect-ratio:16 / 9;transition:transform .6s ease}
.film__bild:hover img{transform:scale(1.03)}
.film__start{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;
  background:rgba(255,255,255,.92);box-shadow:0 8px 30px rgba(0,0,0,.35);transition:background var(--zeit),transform var(--zeit)}
.film__start::after{content:"";position:absolute;left:33px;top:26px;border-style:solid;border-width:16px 0 16px 25px;
  border-color:transparent transparent transparent var(--tief)}
.film__bild:hover .film__start{background:#fff;transform:scale(1.06)}
.film__dauer{position:absolute;right:12px;bottom:12px;padding:4px 10px;border-radius:4px;background:rgba(0,0,0,.72);
  color:#fff;font-size:.85rem;font-variant-numeric:tabular-nums}
@media (max-width:900px){.film{grid-template-columns:1fr}.film__bild{order:-1}}
@media (prefers-reduced-motion: reduce){.film__bild:hover img,.film__bild:hover .film__start{transform:none}}

/* ===========================================================================
   TwinStream EVO — Launch-Auftritt (Bühne, Scroll-Ablauf, Film, Oberfläche)
   Dunkle, ruhige Flächen, ein Gerät, viel Luft. Alles, was sich bewegt, steht
   hinter prefers-reduced-motion; ohne JavaScript bleibt ein fertiges Bild.
   ======================================================================== */
.launch,.ablauf,.film-launch{--nacht:#050a14;--nacht-2:#0b1628;--glanz:#8fb4e6;--hell-2:#b9c7da;
  background:var(--nacht);color:#fff}
.launch{position:relative;overflow:hidden;isolation:isolate;
  background:radial-gradient(ellipse 55% 70% at 68% 55%,#16345f 0%,#0a1730 45%,var(--nacht) 80%)}
.launch::after{content:"";position:absolute;inset:auto 0 0 0;height:30%;z-index:-1;
  background:linear-gradient(to bottom,transparent,var(--nacht))}
.launch__innen{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;
  gap:clamp(24px,4vw,64px);min-height:min(88vh,860px);padding-block:clamp(48px,7vw,96px) 0}
.launch__vor{font-size:clamp(.95rem,.85rem + .3vw,1.1rem);color:var(--glanz);letter-spacing:.02em;margin:0 0 var(--a3);font-weight:600}
.launch__titel{font-size:clamp(3.2rem,1.4rem + 7vw,7.5rem);line-height:.95;letter-spacing:-.045em;font-weight:600;color:#fff;margin:0 0 var(--a4)}
.launch__titel sup{font-size:.28em;vertical-align:top;position:relative;top:.35em;font-weight:400;letter-spacing:0;color:var(--hell-2)}
.launch__satz{font-size:clamp(1.5rem,1.1rem + 1.4vw,2.4rem);line-height:1.2;letter-spacing:-.02em;color:#fff;margin:0 0 var(--a4);font-weight:400}
.launch__klein{color:var(--hell-2);font-size:1.05rem;line-height:1.6;max-width:44ch;margin:0 0 var(--a5)}
.launch__tat{display:flex;flex-wrap:wrap;gap:var(--a3)}
.knopf--glas{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.35)}
.knopf--glas:hover{background:rgba(255,255,255,.14);color:#fff;border-color:#fff}
.launch__geraet{align-self:end;display:flex;justify-content:center}
.launch__geraet img{width:min(100%,560px);height:auto;display:block;
  -webkit-mask-image:linear-gradient(to bottom,#000 80%,transparent 100%);mask-image:linear-gradient(to bottom,#000 80%,transparent 100%);
  filter:drop-shadow(0 40px 80px rgba(20,70,160,.35))}
@media (prefers-reduced-motion: no-preference){
  .launch__text>*{animation:launch-ein .9s cubic-bezier(.2,.7,.2,1) both}
  .launch__text>*:nth-child(2){animation-delay:.08s}.launch__text>*:nth-child(3){animation-delay:.16s}
  .launch__text>*:nth-child(4){animation-delay:.24s}.launch__text>*:nth-child(5){animation-delay:.32s}
  .launch__geraet img{animation:launch-geraet 1.4s cubic-bezier(.2,.7,.2,1) .1s both}
}
@keyframes launch-ein{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes launch-geraet{from{opacity:0;transform:translateY(40px) scale(.96)}to{opacity:1;transform:none}}
@media (max-width:900px){
  .launch__innen{grid-template-columns:1fr;min-height:0;padding-top:var(--a6)}
  .launch__geraet img{width:min(78%,420px)}
}

/* --- Scroll-Ablauf: das Gerät fährt hoch --------------------------------- */
.ablauf{--kopf:92px;position:relative;background:linear-gradient(var(--nacht),var(--nacht-2) 50%,var(--nacht))}
.ablauf--aktiv{height:520vh}
.ablauf__buehne{padding-block:var(--a6)}
.ablauf--aktiv .ablauf__buehne{position:sticky;top:0;height:100vh;padding:var(--kopf) 0 var(--a4);overflow:hidden;display:flex;align-items:center}
.ablauf__innen{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,5vw,80px);align-items:center;width:100%}
.ablauf__geraet{position:relative;width:min(100%,560px);justify-self:center;aspect-ratio:1497 / 1941;
  transform-origin:50% 22%;will-change:transform;
  -webkit-mask-image:linear-gradient(to bottom,#000 78%,transparent 100%);mask-image:linear-gradient(to bottom,#000 78%,transparent 100%)}
.ablauf--aktiv .ablauf__geraet{height:min(calc(100vh - var(--kopf) - 40px),900px);width:auto}
.ablauf__geraet img{position:absolute;inset:0;width:100%;height:100%;display:block}
.ablauf__gross,.ablauf__klein{position:absolute;display:block}
.ablauf__gross{left:9.886%;top:4.585%;width:78.824%;height:33.797%}
.ablauf__klein{left:54.509%;top:62.7%;width:25.384%;height:10.613%}
.ablauf__text h2{color:#fff;font-size:clamp(2rem,1.2rem + 2.6vw,3.4rem);font-weight:600;letter-spacing:-.03em;line-height:1.05;margin:0 0 var(--a5)}
.ablauf__schritte{list-style:none;margin:0;padding:0;max-width:30rem}
.ablauf__schritte li{margin:0 0 var(--a4);display:grid;grid-template-columns:3rem minmax(0,1fr);column-gap:var(--a2)}
.ablauf__nr{grid-row:span 2;color:var(--glanz);font-weight:600;font-variant-numeric:tabular-nums;padding-top:4px}
.ablauf__schritte strong{font-size:clamp(1.3rem,1.1rem + .6vw,1.75rem);font-weight:600;letter-spacing:-.01em;color:#fff;line-height:1.2}
.ablauf__schritte span:last-child{color:var(--hell-2);font-size:1.05rem;line-height:1.6;margin-top:var(--a1)}
/* aktiv: immer nur ein Schritt, groß und ruhig eingeblendet */
.ablauf--aktiv .ablauf__schritte{position:relative;min-height:12rem}
.ablauf--aktiv .ablauf__schritte li{position:absolute;inset:0 0 auto 0;opacity:0;transform:translateY(24px);
  transition:opacity .5s ease,transform .6s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.ablauf--aktiv .ablauf__schritte li.ist-an{opacity:1;transform:none}
.ablauf__fortschritt{display:none}
.ablauf--aktiv .ablauf__fortschritt{display:flex;gap:6px;margin-top:var(--a4)}
.ablauf__fortschritt i{height:3px;flex:1;max-width:48px;background:rgba(255,255,255,.18);border-radius:2px;overflow:hidden;position:relative}
.ablauf__fortschritt i b{position:absolute;inset:0;background:#fff;transform-origin:left;transform:scaleX(0)}
@media (max-width:1100px){.ablauf{--kopf:72px}}
@media (max-width:900px){
  .ablauf__innen{grid-template-columns:1fr;gap:var(--a3)}
  .ablauf--aktiv .ablauf__geraet{height:min(54vh,520px)}
  .ablauf__text h2{font-size:1.7rem;margin-bottom:var(--a3)}
  .ablauf--aktiv .ablauf__text .etikett{display:none}
  .ablauf--aktiv .ablauf__schritte{min-height:9rem}
  .ablauf__schritte strong{font-size:1.25rem}
  .ablauf__schritte span:last-child{font-size:.98rem}
}

/* --- Film ------------------------------------------------------------------ */
.film-launch{padding-block:clamp(64px,9vw,128px);background:linear-gradient(var(--nacht),#0a1426)}
.film-launch__kopf{max-width:44rem;margin:0 auto var(--a5);text-align:center}
.film-launch__kopf h2{color:#fff;font-size:clamp(2rem,1.2rem + 2.6vw,3.4rem);font-weight:600;letter-spacing:-.03em;line-height:1.05;margin:0 0 var(--a3)}
.film-launch__kopf p:not(.etikett){color:var(--hell-2);font-size:1.08rem;line-height:1.6;margin:0 auto}
.kino{margin:0}
.kino__rahmen{position:relative;border-radius:14px;overflow:hidden;background:#000;aspect-ratio:16 / 9;
  box-shadow:0 40px 120px rgba(10,40,100,.45),0 0 0 1px rgba(255,255,255,.08)}
.kino__video{display:block;width:100%;height:100%;background:#000}
.kino__start{position:absolute;inset:0;border:0;padding:0;margin:0;cursor:pointer;background:#000;display:block;width:100%}
.kino__start[hidden]{display:none}
.kino__start img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1),opacity .3s}
.kino__start:hover img{transform:scale(1.025);opacity:.92}
.kino__knopf{position:absolute;left:50%;top:50%;width:clamp(64px,8vw,96px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:background var(--zeit),transform var(--zeit)}
.kino__knopf::after{content:"";position:absolute;left:54%;top:50%;transform:translate(-50%,-50%);border-style:solid;
  border-width:.75em 0 .75em 1.2em;border-color:transparent transparent transparent #fff;font-size:clamp(14px,1.6vw,20px)}
.kino__start:hover .kino__knopf,.kino__start:focus-visible .kino__knopf{background:rgba(255,255,255,.3);transform:translate(-50%,-50%) scale(1.06)}
.kino__dauer{position:absolute;left:20px;bottom:18px;color:#fff;font-size:.9rem;letter-spacing:.04em;text-shadow:0 1px 8px rgba(0,0,0,.6)}
@media (prefers-reduced-motion: reduce){.kino__start:hover img{transform:none}}

/* --- Oberfläche -------------------------------------------------------------- */
.oberflaeche{padding-block:clamp(64px,9vw,128px);background:var(--grund)}
.oberflaeche__kopf{max-width:44rem;margin:0 auto var(--a5);text-align:center}
.oberflaeche__kopf h2{font-size:clamp(2rem,1.2rem + 2.6vw,3.4rem);font-weight:600;letter-spacing:-.03em;line-height:1.05;margin:0 0 var(--a3)}
.oberflaeche__kopf p:not(.etikett){color:var(--text-2);font-size:1.08rem;line-height:1.6}
.oberflaeche__bild{margin:0;border-radius:16px;overflow:hidden;box-shadow:var(--schatten-hoch);background:#1c1f24}
.oberflaeche__bild img{display:block;width:100%;height:auto}
.oberflaeche__punkte{list-style:none;padding:0;margin:var(--a5) 0 0;max-width:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--a4)}
.oberflaeche__punkte li{margin:0;display:flex;flex-direction:column;gap:var(--a1);padding-top:var(--a3);border-top:2px solid var(--marke)}
.oberflaeche__punkte strong{font-size:1.15rem;font-weight:600}
.oberflaeche__punkte span{color:var(--text-2);font-size:.98rem;line-height:1.55}
@media (max-width:760px){.oberflaeche__punkte{grid-template-columns:1fr}}
.launch__marke,.launch__evo{display:block;white-space:nowrap}
.launch__evo{background:linear-gradient(100deg,#ffffff 0%,#9cc3f5 55%,#4f8fe0 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.launch__titel{font-size:clamp(3rem,1.2rem + 6vw,6.6rem)}
@media (max-width:900px){.film__kino{order:-1}}

/* Scroll-Ablauf: Schrift hebt sich vom Gerät ab — beim Heranzoomen wächst das
   Gerät nach links statt in die Textspalte, der Text liegt auf einer dunklen
   Glasfläche und immer über dem Gerät. */
.ablauf__geraet{z-index:1}
.ablauf__text{position:relative;z-index:2}
.ablauf--aktiv .ablauf__text{padding:clamp(24px,3vw,40px);border-radius:20px;
  background:rgba(5,10,20,.72);border:1px solid rgba(255,255,255,.1);
  box-shadow:0 30px 80px rgba(0,0,0,.45);
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%)}
.ablauf--aktiv .ablauf__schritte strong{text-shadow:0 2px 16px rgba(0,0,0,.6)}
@media (min-width:901px){.ablauf__geraet{transform-origin:88% 22%}}
@media (max-width:900px){
  .ablauf__geraet{transform-origin:50% 12%}
  .ablauf--aktiv .ablauf__text{padding:var(--a4);border-radius:16px}
}

/* Safari zeichnet bei filter + mask-image auf einem Bild ein sichtbares Rechteck.
   Deshalb: Bild ohne Filter und Maske, der Lichtschein liegt als eigene Ebene
   dahinter, das Ausblenden nach unten als Verlauf in der Hintergrundfarbe darüber. */
.launch__geraet{position:relative;isolation:isolate}
.launch__geraet img{filter:none;-webkit-mask-image:none;mask-image:none;position:relative;z-index:1}
.launch__geraet::before{content:"";position:absolute;z-index:0;left:50%;top:38%;width:130%;aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(56,120,220,.30) 0%,rgba(56,120,220,.10) 38%,rgba(56,120,220,0) 68%)}
.launch__geraet::after{content:"";position:absolute;z-index:2;left:-10%;right:-10%;bottom:0;height:24%;pointer-events:none;
  background:linear-gradient(to bottom,rgba(5,10,20,0),var(--nacht))}
.ablauf__geraet{-webkit-mask-image:none;mask-image:none}
.ablauf__geraet::after{content:"";position:absolute;z-index:3;left:-10%;right:-10%;bottom:-1px;height:24%;pointer-events:none;
  background:linear-gradient(to bottom,rgba(11,22,40,0),var(--nacht-2))}
/* Kein sichtbarer Kasten unter dem Gerät: Abschnitt einfarbig, Ausblendung endet
   exakt in derselben Farbe. */
.ablauf{background:var(--nacht)}
.ablauf__geraet::after{background:linear-gradient(to bottom,rgba(5,10,20,0),var(--nacht));left:-30%;right:-30%}

/* --- Scroll-Ablauf: Laser Safe Mode ---------------------------------------
   Die Renderfolge zeigt den LSM nie eingeschaltet. Deshalb eine eindeutig als
   Einblendung erkennbare Anzeige: Ringe um die LSM-Taste und FiO₂ Jet, dazu
   eine Karte, in der der Sauerstoff beim Scrollen auf Raumluft sinkt. */
.ablauf--aktiv{height:660vh}   /* 600vh für 6 Schritte + 0,6 Schritt Laser (data-gewicht 1.6) */
.ablauf__laser{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity .5s ease}
.ablauf__laser.ist-an{opacity:1}
/* Rahmen als exakte Vierecke (je ein SVG über dem ganzen Gerät, Ecken leicht gerundet, ~5 px), Eckpunkte am eingepassten
   LSM-Bild vermessen: sie folgen der perspektivischen Neigung der Felder. Punkte in % des Gerätebilds.
   Das Leuchten sitzt am <svg> — Filter auf einzelnen SVG-Formen zeigt Safari nicht an. */
.ablauf__ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;
  opacity:0;transition:opacity .45s ease;filter:drop-shadow(0 0 2px rgba(255,159,67,.95)) drop-shadow(0 0 8px rgba(255,159,67,.6))}
.ablauf__ring path{fill:none;stroke:#ff9f43;stroke-width:2px;vector-effect:non-scaling-stroke;stroke-linejoin:round}
/* Rahmen erst, wenn der LSM-Bildschirm ganz da ist und ein Stück weitergescrollt wurde (seite.js: mit-ringen) */
.ablauf__laser.mit-ringen .ablauf__ring{opacity:1}
.ablauf__ring--fio2{filter:drop-shadow(0 0 2px rgba(124,196,255,.95)) drop-shadow(0 0 7px rgba(124,196,255,.55))}
.ablauf__ring--fio2 path{stroke:#7cc4ff}
@media (prefers-reduced-motion: no-preference){.ablauf__laser.ist-an .ablauf__ring--lsm{animation:lsm-puls 1.6s ease-in-out infinite}}
@keyframes lsm-puls{50%{filter:drop-shadow(0 0 3px rgba(255,159,67,1)) drop-shadow(0 0 14px rgba(255,159,67,.85))}}
/* Laserblitz beim Wechsel auf den LSM-Bildschirm (seite.js): ein einziger Blitz über die ganze Seite,
   ausgehend vom Laser-Symbol, dazu ein Strahl quer über den Bildschirm. Nur ohne „Bewegung reduzieren“. */
.laserblitz{position:fixed;inset:0;z-index:200;pointer-events:none;opacity:0;overflow:hidden;mix-blend-mode:screen;mix-blend-mode:plus-lighter;
  background:radial-gradient(circle at var(--bx,70%) var(--by,50%),#fff 0,#fff 2.5%,rgba(255,238,214,.98) 8%,
    rgba(255,182,104,.88) 20%,rgba(255,128,56,.55) 40%,rgba(255,92,40,.26) 64%,rgba(255,196,150,.12) 100%)}
/* Lichthof: wächst vom Laser-Symbol aus und glüht nach */
.laserblitz::before{content:"";position:absolute;left:var(--bx,70%);top:var(--by,50%);width:150vmax;height:150vmax;
  margin:-75vmax 0 0 -75vmax;border-radius:50%;opacity:0;transform:scale(.12);
  background:radial-gradient(circle,#fff 0,rgba(255,236,200,.95) 5%,rgba(255,176,96,.75) 14%,rgba(255,120,56,.4) 28%,
    rgba(255,80,40,.16) 44%,transparent 60%)}
/* Strahl: weißer Kern, mehrere Glühschichten */
.laserblitz::after{content:"";position:absolute;left:0;right:0;top:var(--by,50%);height:5px;margin-top:-2.5px;
  border-radius:3px;background:#fff;
  box-shadow:0 0 6px 2px #fff,0 0 18px 7px rgba(255,214,160,.95),0 0 44px 16px rgba(255,150,70,.8),
    0 0 100px 34px rgba(255,100,45,.5),0 0 180px 60px rgba(255,80,40,.25);
  transform:scaleX(0);transform-origin:var(--bx,70%) 50%}
.laserblitz.ist-an{animation:laserblitz 1.15s cubic-bezier(.2,.7,.3,1) forwards}
.laserblitz.ist-an::before{animation:laserhof 1.15s cubic-bezier(.2,.7,.3,1) forwards}
.laserblitz.ist-an::after{animation:laserstrahl .85s ease-out forwards}
@keyframes laserblitz{0%{opacity:0}8%{opacity:1}24%{opacity:.95}100%{opacity:0}}
@keyframes laserhof{0%{opacity:1;transform:scale(.12)}28%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.2)}}
@keyframes laserstrahl{0%{transform:scaleX(0);opacity:1}22%{transform:scaleX(1);opacity:1}55%{opacity:.9}100%{transform:scaleX(1);opacity:0}}
@media (prefers-reduced-motion: reduce){.laserblitz{display:none}}
.ablauf__karte{position:absolute;left:62%;top:44%;min-width:190px;display:flex;flex-direction:column;gap:8px;
  padding:16px 18px;border-radius:14px;background:rgba(10,18,32,.86);border:1px solid rgba(255,255,255,.14);
  box-shadow:0 20px 50px rgba(0,0,0,.5);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#fff}
.ablauf__karte-kopf{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#ffb877;font-weight:600}
.ablauf__o2{display:flex;align-items:baseline;gap:6px}
.ablauf__o2 b{font-size:2.6rem;line-height:1;font-weight:600;font-variant-numeric:tabular-nums}
.ablauf__o2 small{color:var(--hell-2);font-size:.9rem}
.ablauf__balken{display:block;height:4px;border-radius:2px;background:rgba(255,255,255,.15);overflow:hidden}
.ablauf__balken i{display:block;height:100%;width:80%;background:linear-gradient(90deg,#7cc4ff,#ff9f43);border-radius:2px}
.ablauf__bereit{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;font-weight:600;color:#7ee2a8;opacity:0;transition:opacity .35s}
.ablauf__bereit::before{content:"";width:8px;height:8px;border-radius:50%;background:#34c77b;box-shadow:0 0 10px #34c77b}
.ablauf__bereit.ist-an{opacity:1}
@media (max-width:900px){.ablauf__karte{left:auto;right:2%;top:40%;min-width:150px;padding:12px 14px}.ablauf__o2 b{font-size:2rem}}
@media (max-width:900px){.ablauf--aktiv .ablauf__geraet{height:min(46vh,480px)}}
@media (max-width:900px) and (max-height:760px){.ablauf--aktiv .ablauf__geraet{height:36vh}.ablauf__text h2{font-size:1.4rem}}
/* exakt vermessen am Renderbild 21100 (Bildschirm-Ausschnitt 1180×656 ab x148/y89 im Gerätebild 1497×1941) */
.ablauf__mehr{margin-top:var(--a2)}
@media (max-width:900px){
  .ablauf--aktiv .ablauf__geraet{height:min(43vh,470px)}
  .ablauf__mehr{min-height:44px;padding:6px 16px;font-size:.74rem;margin-top:0}
}
@media (max-width:900px) and (max-height:760px){.ablauf--aktiv .ablauf__geraet{height:34vh}}
@media (max-width:900px){.ablauf--aktiv .ablauf__geraet{height:min(40vh,440px)}.ablauf--aktiv .ablauf__text h2{font-size:1.45rem;margin-bottom:var(--a2)}}

/* Startseite: Scroll-Ablauf in Carl-Reiner-Blau statt Nachtblau.
   Einfarbig, damit die Ausblendung unter dem Gerät keine Kante bildet. */
.ablauf--blau{--nacht:#0f53a4;--nacht-2:#0f53a4;--hell-2:#dbe6f4;--glanz:#dbe6f4;background:#0f53a4}
.ablauf--blau .ablauf__geraet::after{background:linear-gradient(to bottom,rgba(15,83,164,0),#0f53a4)}
.ablauf--blau.ablauf--aktiv .ablauf__text{background:rgba(6,38,82,.55);border-color:rgba(255,255,255,.18);
  box-shadow:0 30px 80px rgba(4,26,60,.35)}
.ablauf--blau .ablauf__fortschritt i{background:rgba(255,255,255,.28)}
.ablauf--blau .knopf--glas{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5)}

/* Startseite: dunkleres Carl-Reiner-Blau mit Verlauf. Der Verlauf liegt auf der
   klebenden Bühne (bewegt sich nicht mit), das Gerät blendet per Maske nach unten
   aus — keine Farbfläche darüber, die zum Verlauf passen müsste. */
.ablauf--blau{background:#062f63}
.ablauf--blau .ablauf__buehne{background:
  radial-gradient(ellipse 55% 65% at 30% 42%,rgba(40,120,220,.35) 0%,rgba(40,120,220,0) 70%),
  linear-gradient(160deg,#0d4f9c 0%,#0a4282 40%,#062f63 100%)}
.ablauf--blau .ablauf__geraet::after{display:none}
.ablauf--blau .ablauf__geraet{-webkit-mask-image:linear-gradient(to bottom,#000 76%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 76%,transparent 100%)}
.ablauf--blau.ablauf--aktiv .ablauf__text{background:rgba(3,24,56,.5)}

/* Knöpfe im Handy-Menü: .menue a setzt display:block und Textfarbe — beides muss
   für Knöpfe zurückgenommen werden, sonst steht die Schrift links und dunkel. */
.menue a.knopf{display:inline-flex;justify-content:center;text-align:center}
.menue a.knopf--voll,.menue a.knopf--voll:hover{color:var(--auf-marke)}
.menue a.knopf--voll:hover{background:var(--marke-tief)}
.menue__anfrage{margin:var(--a3) var(--a4)}

/* --- Bauformen der Jet-Endoskope: kleine Bildkarten ---------------------- */
.formen{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(190px,100%),1fr));gap:var(--a4);margin:0 0 var(--a5)}
.form{margin:0;background:var(--grund);border:1px solid var(--rand);border-radius:var(--rund);padding:var(--a3);
  display:flex;flex-direction:column;gap:var(--a2)}
.form picture{display:flex;align-items:center;justify-content:center;background:var(--bildgrund-weiss);border-radius:var(--rund-klein)}
.form img{display:block;width:100%;height:auto;max-height:170px;object-fit:contain;mix-blend-mode:multiply}
.form figcaption{display:flex;flex-direction:column;gap:2px}
.form strong{font-size:1.02rem;font-weight:600}
.form span{color:var(--text-2);font-size:.92rem;line-height:1.45}

/* ===========================================================================
   TwinStream-Anwendungen: Auf einen Blick, Zubehör, Aufklapper, Übersicht
   Zeilenhöhen fest in rem, damit zusammengehörige Zeilen gleichen Abstand haben.
   ======================================================================== */
.ts-anker--zweit{margin-top:calc(-1 * var(--a4))}
.ts-anker--zweit a{font-size:.9rem;background:var(--grund-2);border-color:transparent}
.ts-anker--zweit a[aria-current="page"]{background:var(--marke-hauch);border-color:var(--marke);color:var(--marke);font-weight:600}

.blick{list-style:none;margin:0 0 var(--a5);padding:0;max-width:none;display:grid;gap:var(--a4);
  grid-template-columns:repeat(4,minmax(0,1fr))}
.blick>li{margin:0;padding:var(--a4);background:var(--grund);border:1px solid var(--rand);border-top:3px solid var(--marke);border-radius:var(--rund)}
.blick h3{margin:0 0 var(--a3);font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--marke)}
.blick ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--a2)}
.blick ul li{margin:0;font-size:.97rem;line-height:1.45rem;color:var(--text-2)}
.blick strong{color:var(--text);font-weight:600}
@media (max-width:1100px){.blick{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.blick{grid-template-columns:1fr}}

.ts-details{margin:0 0 var(--a4);border:1px solid var(--rand);border-radius:var(--rund);background:var(--grund)}
.ts-details>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--a3);
  min-height:52px;padding:var(--a2) var(--a4);font-weight:600;color:var(--marke)}
.ts-details>summary::-webkit-details-marker{display:none}
.ts-details>summary svg{width:18px;height:18px;flex:none;transition:transform var(--zeit)}
.ts-details[open]>summary svg{transform:rotate(180deg)}
.ts-details>summary:hover{background:var(--grund-2)}
.ts-details__inhalt{padding:0 var(--a4) var(--a4)}
.ts-details__inhalt .ts-tabelle{margin-bottom:var(--a2)}
.artikel .ts-details{margin:var(--a3) 0 0}
.artikel .ts-details>summary{padding:var(--a2) var(--a3);font-size:.95rem}
.artikel .ts-details__inhalt{padding:0 var(--a3) var(--a3)}
.artikel__text .ts-tabelle table{min-width:0}
.artikel__text .ts-tabelle td,.artikel__text .ts-tabelle th{white-space:normal;font-size:.9rem}
@media (prefers-reduced-motion: reduce){.ts-details>summary svg{transition:none}}

.zub{display:grid;gap:var(--a4);grid-template-columns:repeat(auto-fill,minmax(min(520px,100%),1fr))}
.zub__gruppe{background:var(--grund);border:1px solid var(--rand);border-radius:var(--rund);padding:var(--a4)}
.zub__gruppe h3{margin:0 0 var(--a2);font-size:1.1rem}
.zub__gruppe>p{margin:0 0 var(--a3);color:var(--text-2);font-size:.95rem;line-height:1.45rem}
.zub__liste{list-style:none;margin:0;padding:0;max-width:none}
.zub__liste li{margin:0;display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:var(--a3);align-items:center;
  padding:var(--a2) 0;border-top:1px solid var(--rand)}
.zub__liste li:first-child{border-top:0}
.zub__bild{width:64px;height:48px;display:flex;align-items:center;justify-content:center;background:var(--bildgrund-weiss);border-radius:var(--rund-klein)}
.zub__bild picture{display:contents}
.zub__bild img{max-width:64px;max-height:48px;width:auto;height:auto;object-fit:contain;mix-blend-mode:multiply}
.zub__bild--leer{background:var(--grund-2)}
.zub__text{display:flex;flex-direction:column;min-width:0;line-height:1.45rem}
.zub__text>*{line-height:inherit}
.zub__text strong{font-weight:600;font-size:.98rem}
.zub__text span{color:var(--text-2);font-size:.9rem}
.zub__ref{font-size:.82rem;font-variant-numeric:tabular-nums;color:var(--text-2);text-align:right;white-space:nowrap;
  background:var(--grund-2);border:1px solid var(--rand);border-radius:var(--rund-klein);padding:2px 8px}
@media (max-width:560px){
  .zub__liste li{grid-template-columns:48px minmax(0,1fr);row-gap:var(--a1)}
  .zub__bild{width:48px;height:40px}
  .zub__bild img{max-width:48px;max-height:40px}
  .zub__ref{grid-column:2;justify-self:start;white-space:normal;text-align:left}
}

.anw-karten{display:grid;gap:var(--a4);grid-template-columns:repeat(auto-fill,minmax(min(420px,100%),1fr));margin:0 0 var(--a5)}
.anw-karte{display:flex;flex-direction:column;background:var(--grund);border:1px solid var(--rand);border-radius:var(--rund);overflow:hidden;
  text-decoration:none;color:inherit;transition:border-color var(--zeit),box-shadow var(--zeit)}
.anw-karte:hover{border-color:var(--marke-rand);box-shadow:var(--schatten)}
.anw-karte__bild{display:block}
.anw-karte__bild img{display:block;width:100%;height:auto;aspect-ratio:16 / 9;object-fit:cover}
.anw-karte__text{display:flex;flex-direction:column;gap:var(--a2);padding:var(--a4);flex:1}
.anw-karte__text>strong{font-size:1.25rem;font-weight:600;color:var(--text)}
.anw-karte__text>span:not(.weiter){color:var(--text-2)}
.anw-karte dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--a3);line-height:1.45rem;font-size:.93rem}
.anw-karte dl>div{display:contents}
.anw-karte dt{color:var(--text-3);font-weight:600}
.anw-karte dd{margin:0}
.anw-karte .weiter{margin-top:auto}
/* REF-Nummern nie umbrechen; im Zubehör steht die REF unter dem Namen, damit
   der Name in zweispaltigen Gruppen genug Platz hat. */
.nr{white-space:nowrap}
.zub__liste li{grid-template-columns:64px minmax(0,1fr);row-gap:6px;align-items:start}
.zub__bild{grid-row:span 2;align-self:center}
.zub__ref{grid-column:2;justify-self:start;text-align:left}
@media (max-width:560px){.zub__liste li{grid-template-columns:48px minmax(0,1fr)}}
.anwendung__text .weiter{margin-top:var(--a3)}
.anwendung__text{display:flex;flex-direction:column;flex:1}.anwendung__text .weiter{margin-top:auto;padding-top:var(--a3)}
/* TwinStream-Leiste: neun Seiten müssen am Desktop in eine Zeile passen */
@media (min-width:1100px){
  .ts-anker:not(.ts-anker--zweit){gap:6px;flex-wrap:nowrap}
  .ts-anker:not(.ts-anker--zweit) a{padding:6px 11px;font-size:.88rem;white-space:nowrap}
}

/* Kompakter Kopf für 1081–1319 px (Laptops): sonst ragen Logo, Menü, Fernwartung
   und Suche über den Rand und die Seite scrollt seitlich. Fernwartung nur als
   Symbol (Beschriftung bleibt für Screenreader), Menüpunkte enger, Logo kleiner. */
@media (min-width:1081px) and (max-width:1319px){
  .kopf__innen{gap:var(--a3)}
  .kopf__logo img{height:36px}
  .nav__punkt{padding:0 9px;letter-spacing:.06em}
  .nav__punkt[aria-current="page"]::after{left:9px;right:9px}
  .kopf__fern{width:44px;padding:0;justify-content:center}
  .kopf__fern span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
}
/* TwinStream-Leiste erst ab 1200 px in eine Zeile zwingen */
@media (min-width:1100px) and (max-width:1199px){
  .ts-anker:not(.ts-anker--zweit){flex-wrap:wrap}
}

/* --- Aufzählung mit Häkchen, modern --------------------------------------
   Gefüllter Kreis in Logoblau, weißes Häkchen. Feste Zeilenhöhe (rem), damit
   der Kreis genau auf der Mitte der ersten Zeile sitzt und mehrzeilige Punkte
   gleichmäßige Abstände haben. */
.haken{--hz:1.6rem;--hk:20px;gap:10px}
.haken li{padding-left:calc(var(--hk) + 12px);line-height:var(--hz);margin:0}
.haken li::before{top:calc((var(--hz) - var(--hk)) / 2);left:0;width:var(--hk);height:var(--hk);
  border-radius:50%;background:var(--marke);box-shadow:0 1px 2px rgba(15,83,164,.25)}
.haken li::after{top:calc((var(--hz) - var(--hk)) / 2 + 6px);left:6px;width:8px;height:4px;
  border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}

/* Hoch- und tiefgestellte Zeichen (Fußnoten ¹, CO₂-Varianten, R<sub>occ</sub>) dürfen die
   Zeile nicht höher machen — sonst rutscht der Text gegenüber dem Aufzählungszeichen und
   die Zeilenabstände werden ungleich. */
sup,sub{line-height:0;position:relative;vertical-align:baseline;font-size:.72em}
sup{top:-.45em}
sub{top:.25em}

/* SentrySuite: Netzwerk-Schaubild (breit, weißer Grund, antippen = groß öffnen) */
.netz__vor{max-width:68ch}
.netz__bild{margin:var(--a3) 0 var(--a4);padding:var(--a4);background:#fff;border:1px solid var(--rand);border-radius:var(--rund)}
.netz__bild a{display:block}
.netz__bild img{display:block;width:100%;height:auto}
.netz__bild figcaption{margin-top:var(--a2);text-align:left;padding:0}
@media (max-width:640px){.netz__bild{padding:var(--a2)}}
.netz__liste{max-width:72ch}

/* --- HUR (aus hur.fi) ------------------------------------------------------ */
.hur-muskeln{max-width:480px;margin:0 auto;text-align:center}
.hur-muskeln img{display:block;width:100%;height:auto;margin:0 auto}
.hur-muskeln figcaption{margin-top:var(--a2)}
.hur-bild{margin:var(--a4) 0}
.hur-bild img{display:block;width:100%;max-width:760px;height:auto;border-radius:var(--rund)}
.hur-farben{list-style:none;padding:0;margin:0 0 var(--a3);display:flex;flex-wrap:wrap;gap:var(--a2) var(--a4);max-width:none}
.hur-farben li{display:flex;align-items:center;gap:var(--a2);margin:0}
.hur-farbe{display:inline-block;width:22px;height:22px;border-radius:50%;border:1px solid var(--rand-stark);flex:none}
/* HUR-Produktfotos sind auf Weiß freigestellt — kein grauer Rand daneben */
.duo img[src*="/hurfi-q-"]{background:var(--bildgrund-weiss)}
.hur-downloads{display:flex;flex-wrap:wrap;gap:var(--a2) var(--a4);margin:0 0 var(--a5)}
.hur-downloads a.pdf{margin:0}
.hur-knoepfe{display:flex;flex-wrap:wrap;align-items:center;gap:var(--a2);margin-top:var(--a3)}
.hur-knoepfe>*,.hur-knoepfe>a.pdf{margin:0;flex:none}