/* =============================================================
   styles.css — Komponenten der Produktseite
   Setzt tokens.css voraus. Keine Farbwerte, nur Tokens.
   ============================================================= */

.wrap{max-width:var(--col);margin-inline:auto;padding-inline:var(--gutter-page)}

/* ---------- Entwurfsband (fliegt beim Livegang raus) ---------- */
.draft{
  background:var(--surface-2);color:var(--ink-2);
  font-size:12px;line-height:1.4;text-align:center;
  padding:9px var(--gutter-page);
  border-bottom:1px solid var(--line-soft);
}
.draft b{color:var(--ink);font-weight:400}

/* ---------- Kopfzeile ---------- */
.topnav{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb, var(--ground) 78%, transparent);
  backdrop-filter:saturate(160%) blur(18px);
  -webkit-backdrop-filter:saturate(160%) blur(18px);
  border-bottom:1px solid var(--line-soft);
}
.topnav__in{
  max-width:var(--col);margin-inline:auto;padding-inline:var(--gutter-page);
  height:56px;display:flex;align-items:center;justify-content:space-between;gap:var(--s5);
}
.wordmark{
  font-family:var(--display);font-size:17px;letter-spacing:.02em;color:var(--ink);
}
.wordmark span{color:var(--ink-3)}
.topnav__links{display:flex;align-items:center;gap:var(--s6);list-style:none;margin:0;padding:0}
.topnav__links a:not(.btn){
  font-size:13.65px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2);
}
/* Leiste 30 % groesser: Links 10,5 -> 13,65 px, Schaltflaeche 12,5 -> 16,25 px,
   Marke 50 -> 65 px (Inline-Stil im Markup). */
.topnav__links .btn--sm{font-size:16.25px;padding:9px 18px}
.topnav__links a:not(.btn):hover{color:var(--ink)}
@media (max-width:900px){ .topnav__links li:not(:last-child){display:none} }

/* ---------- Bühne: Objekt über volle Breite ---------- */
.stage{position:relative;height:min(72vh,620px);overflow:hidden}
.stage--tall{height:min(84vh,760px)}
.stage img{
  width:100%;height:100%;object-fit:cover;object-position:52% 48%;
  filter:contrast(1.18) brightness(.96) saturate(1.08);
}
.stage__veil{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to bottom,
      color-mix(in srgb, var(--ground) 82%, transparent) 0%,
      transparent 24%, transparent 48%,
      var(--ground) 98%),
    radial-gradient(ellipse 68% 58% at 52% 48%,
      transparent 40%,
      color-mix(in srgb, var(--ground) 74%, transparent) 100%);
}
.stage__mark{
  position:absolute;top:var(--s7);left:0;right:0;z-index:2;text-align:center;
  font-size:10.5px;letter-spacing:.52em;text-transform:uppercase;color:var(--ink-2);
}
.stage__placeholder{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(ellipse 56% 64% at 50% 46%, var(--surface-2) 0%, var(--ground) 72%);
  border-block:1px dashed var(--line);
}

/* ---------- Aussage ---------- */
.say{position:relative;z-index:2;margin-top:-96px}
.say--flat{margin-top:var(--s9)}
.say__claim{
  font-size:17px;line-height:1.75;color:var(--ink-2);
  margin:var(--s5) 0 0;max-width:44ch;
}
.say__claim em{font-style:normal;color:var(--ink)}
@media (max-width:760px){ .say{margin-top:-40px} }

/* ---------- Kennzahlenband ---------- */
.figures{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--brand-line);
  margin-top:var(--s8);
}
.figure{padding:var(--s6) var(--s7) var(--s1);position:relative}
.figure + .figure::before{
  content:"";position:absolute;left:0;top:var(--s6);bottom:var(--s3);
  width:1px;background:var(--line);
}
.figure:first-child{padding-left:0}
.figure:last-child{padding-right:0}
.figure__value u{text-decoration:none;font-size:.36em;letter-spacing:0;color:var(--ink-2);margin-left:.12em}
.figure__label{
  font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--brand);
  margin:var(--s5) 0 var(--s1);
}
.figure__note{font-size:14px;line-height:1.6;color:var(--ink-2);margin:0;max-width:24ch}
@media (max-width:760px){
  .figures{grid-template-columns:1fr;margin-top:var(--s7)}
  .figure{padding-inline:0;padding-top:var(--s5)}
  .figure + .figure::before{display:none}
  .figure + .figure{border-top:1px solid var(--line-soft);margin-top:var(--s4)}
}

/* ---------- Kapitel ---------- */
.chapter{padding-block:var(--s10) 0}
.chapter--tight{padding-block:var(--s9) 0}
.chapter__body{
  display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s8);
  margin-top:var(--s7);
}
.chapter__body p{font-size:15.5px;line-height:1.86;color:var(--ink-2);margin:0}
.chapter__body p em{font-style:normal;color:var(--ink)}
.chapter__body p + p{margin-top:var(--s4)}
@media (max-width:900px){
  .chapter__body{grid-template-columns:1fr;gap:var(--s4)}
}

/* ---------- Bildpaar ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);margin-top:var(--s7)}
.duo figure{margin:0}
.duo img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-lg);filter:contrast(1.12) brightness(.97)}
.duo figcaption{margin-top:var(--s3);font-size:13px;color:var(--ink-2)}
@media (max-width:760px){ .duo{grid-template-columns:1fr} }

/* ---------- Platzhalterfläche ---------- */
.slot{
  border:1px dashed var(--line);border-radius:var(--r-lg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--s2);text-align:center;padding:var(--s6);
  background:repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--ink) 2%, transparent) 0 12px,
    transparent 12px 24px);
}
.slot--duo{aspect-ratio:4/3}
.slot--stage{aspect-ratio:16/8;margin-top:var(--s7)}
.slot__title{font-family:var(--display);font-size:23px;letter-spacing:-.008em;color:var(--ink)}
.slot__note{font-size:13px;line-height:1.6;color:var(--ink-2);max-width:46ch;margin:0}

/* ---------- Apparaturtypen ---------- */
.types{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);margin-top:var(--s7)}
.type{
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
  background:var(--surface);
}
.type__img{aspect-ratio:4/3;background:var(--surface-2)}
.type__img img{width:100%;height:100%;object-fit:cover;filter:contrast(1.1) brightness(.96)}
.type__meta{padding:var(--s4)}
.type__name{font-family:var(--display);font-size:17px;letter-spacing:-.006em;margin:0 0 var(--s1)}
.type__note{font-size:13px;line-height:1.55;color:var(--ink-2);margin:0}
@media (max-width:1100px){ .types{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .types{grid-template-columns:1fr} }

/* ---------- Abschluss ---------- */
.cta{
  margin-top:var(--s10);padding-block:var(--s9);
  border-top:1px solid var(--line);
  text-align:center;
}
.cta p{margin:var(--s4) auto 0;max-width:44ch;color:var(--ink-2);font-size:17px;line-height:1.7}
.cta__actions{display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:center;margin-top:var(--s6)}

/* ---------- Fußnoten und Fuß ---------- */
.notes{
  border-top:1px solid var(--line-soft);margin-top:var(--s9);padding-top:var(--s5);
  font-size:12px;line-height:1.6;color:var(--ink-3);
}
.notes ol{margin:0;padding-left:1.2em}
.notes li{margin-bottom:var(--s1)}
sup{font-size:.62em;vertical-align:super;line-height:0;color:var(--ink-3)}

.pagefoot{
  border-top:1px solid var(--line-soft);margin-top:var(--s7);padding-block:var(--s5) var(--s8);
  display:flex;flex-wrap:wrap;gap:var(--s4) var(--s7);justify-content:space-between;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);
}
/* Pflichtangaben stehen ganz unten und bleiben zurueckgenommen: sie sollen
   auffindbar sein, nicht werben. */
.pagefoot__recht{display:flex;gap:var(--s5)}
.pagefoot__recht a{color:inherit;text-decoration:none}
.pagefoot__recht a:hover,.pagefoot__recht a:focus-visible{color:var(--ink);text-decoration:underline}

/* Sprungmarken: die feste Kopfzeile darf die Überschrift nicht verdecken */
[id]{scroll-margin-top:96px}
html{scroll-behavior:smooth}

/* Einstieg und Nutzen — zwei neue Abschnitte fuer Leser, die gedruckte
   Apparaturen noch nicht kennen. Drei bzw. zwei Spalten, die auf schmalen
   Geraeten untereinander laufen. */
.erklaert{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6);margin-top:var(--s6)}
.nutzen{display:grid;grid-template-columns:1fr 1fr;gap:var(--s7);margin-top:var(--s6)}
.erklaert h3,.nutzen h3{font-family:var(--display);font-size:17px;letter-spacing:-.006em;
  margin:0 0 var(--s3);color:var(--ink)}
.erklaert p{font-size:15.5px;line-height:1.86;color:var(--ink-2);margin:0}
.nutzen ul{margin:0;padding:0;list-style:none}
.nutzen li{font-size:15.5px;line-height:1.7;color:var(--ink-2);padding-left:1.4em;position:relative}
.nutzen li + li{margin-top:var(--s3)}
.nutzen li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;
  border-radius:50%;background:var(--brand)}
@media (max-width:860px){
  .erklaert{grid-template-columns:1fr;gap:var(--s5)}
  .nutzen{grid-template-columns:1fr;gap:var(--s5)}
}
/* Der Hinweis unter den Fussnoten ist keine Fussnote — er gehoert nicht in
   die nummerierte Liste, sonst zeigt eine Ziffer auf ihn, die nirgends steht. */
.notes__hinweis{font-size:12.5px;line-height:1.65;color:var(--ink-3);margin:var(--s3) 0 0;max-width:78ch}

/* Was noch nicht bestellbar ist, steht abgesetzt und zurueckgenommen —
   sonst verspricht die Seite Geraete, die es noch nicht gibt. */
.ausblick__titel{font-family:var(--display);font-size:13px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-2);margin:var(--s8) 0 var(--s2)}
.ausblick__text{font-size:14px;line-height:1.7;color:var(--ink-2);margin:0 0 var(--s5);max-width:52ch}
/* Zurueckgenommen wird das Bild, nicht der Text: der muss lesbar bleiben
   (Kontrast mindestens 4,5:1, WCAG AA). */
.types--ausblick .type__img{opacity:.72}
.types--ausblick .type__img img{filter:contrast(1.1) brightness(.82) saturate(.85)}
/* Die Marke stand zu klein in der Leiste; die Leiste waechst mit.
   .topnav__in setzt eine feste Hoehe — eine Mindesthoehe allein wuerde
   dagegen nicht ankommen. */
.topnav__in{height:82px}

/* 3D-Buehne: Canvas ueber dem Foto, das Foto bleibt als Platzhalter.
   Waagerecht ziehen dreht das Modell; senkrecht wischen scrollt weiter die Seite. */
.stage3d{background:var(--ground)}
.stage3d__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;
  cursor:grab;touch-action:pan-y}
.stage3d__canvas:active{cursor:grabbing}
.stage3d[data-state="ready"] img{visibility:hidden}