/* Haut „Bühne": dunkel, filmgeführt. Der Kopf jeder Produktseite ist ein
   Film, der Bildschirm-Schieber darunter liest sich als Filmstreifen.
   Anton bleibt den Titeln vorbehalten — als Fließschrift wäre sie unlesbar. */

.cy--buehne{
  --cy-grund:#0E1116; --cy-flaeche:#161C24; --cy-tinte:#FFFFFF; --cy-leise:#98A2AE;
  --cy-linie:#1E242C; --cy-linie-stark:#2B333D;
  --cy-nav-grund:rgba(14,17,22,.86);
  /* Neutral, solange keine Produktseite offen ist. Auf einer Produktseite
     setzt der Renderer die aufgehellte Produktfarbe auf die Wurzel — dunkle
     Töne wie Violett schaffen auf diesem Grund keine 4,5:1. */
  --cy-farbe:#E7E9EC; --cy-hell:#161C24; --cy-auf-farbe:#0E1116;
  --cy-schrift:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --cy-anzeige:Inter,sans-serif;
  --cy-plakat:Anton,Impact,sans-serif;
  --cy-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --cy-radius:6px; --cy-radius-knopf:4px;
  --cy-schatten:0 30px 60px rgba(0,0,0,.55);
  --cy-schatten-farbe:0 0 0 1px var(--cy-farbe), 0 24px 50px rgba(0,0,0,.6);
}

/* Plakatschrift nur dort, wo sie trägt */
.cy--buehne .cy-nav__marke,
.cy--buehne .cy-held h1,
.cy--buehne .cy-produkt h2,
.cy--buehne .cy-abschnitt__titel,
.cy--buehne .cy-abschluss h2,
.cy--buehne .cy-paket h3{font-family:var(--cy-plakat); text-transform:uppercase;
  letter-spacing:.01em; font-weight:400}
.cy--buehne .cy-held h1{font-size:clamp(38px,6vw,70px); line-height:.98}
.cy--buehne .cy-nav__marke{font-size:23px}

/* Der volle Knopf trägt die Farbe der Seite: auf einer Produktseite die
   aufgehellte Produktfarbe, sonst das neutrale Hellgrau. Dunkle Schrift
   darauf, das hält in beiden Fällen den Kontrast. */
.cy--buehne .cy-knopf{border-color:var(--cy-linie-stark); color:var(--cy-tinte)}
/* Nach der allgemeinen Knopfregel, sonst gewinnt deren Textfarbe: gleiche
   Spezifität, und die spätere Regel setzt sich durch. */
.cy--buehne .cy-knopf.cy-knopf--voll{background:var(--cy-farbe); color:#0E1116; border-color:transparent}
.cy--buehne .cy-knopf.cy-knopf--voll:hover{filter:brightness(1.08)}

/* Der Film im Kopf */
.cy--buehne .cy-held--film{padding:0 0 20px}
.cy--buehne .cy-film{background:#000; border-bottom:1px solid var(--cy-linie)}
/* Das Seitenverhaeltnis muss dastehen, bevor die Metadaten kommen. Ohne das
   rechnet der Browser mit 300x150, und wenn der Film sich meldet, springt die
   halbe Seite nach unten — der groesste Einzelposten an Bildaufbau-
   Verschiebung, den diese Seite hatte. Die mitgelieferten Filme sind
   1600x900; ein eigener bringt seine Masse als Attribute mit und schlaegt
   diesen Wert. */
.cy--buehne .cy-film__video{width:100%; height:auto; aspect-ratio:16/9; display:block}
.cy--buehne .cy-held__text{padding-top:38px}
.cy--buehne .cy-held--start{padding:70px 0 34px}

/* Der Schieber als Filmstreifen */
.cy--buehne .cy-schieber__buehne{border-radius:4px; border-color:var(--cy-linie)}
.cy--buehne .cy-folie figcaption{background:#11161D}
.cy--buehne .cy-schieber__punkte{gap:2px; background:var(--cy-linie); padding:1px; border-radius:4px}
.cy--buehne .cy-punkt{border:none; border-radius:0; background:var(--cy-grund); flex:1;
  font-family:var(--cy-mono); font-size:12px; letter-spacing:.06em; padding:11px 12px}
.cy--buehne .cy-punkt.cy-an{background:#1B222B; color:#fff;
  box-shadow:inset 0 -3px 0 var(--cy-farbe)}
.cy--buehne .cy-schieber__pfeil{border-radius:4px}

/* Produktplakate auf der Startseite */
.cy--buehne .cy-produkt{border-radius:4px; background:var(--cy-grund)}
.cy--buehne .cy-produkt__film{position:relative; display:block; background:#000; overflow:hidden}
.cy--buehne .cy-produkt__film video,
.cy--buehne .cy-produkt__film img{width:100%; height:260px; object-fit:cover; opacity:.95; display:block}
.cy--buehne .cy-produkt__nummer{position:absolute; left:14px; top:12px; font-family:var(--cy-mono);
  font-size:11px; letter-spacing:.2em; background:rgba(0,0,0,.6); padding:5px 10px}
.cy--buehne .cy-produkt__kopf{background:var(--cy-grund)}

.cy--buehne .cy-nutzen__bild img{border-color:var(--cy-linie-stark)}
.cy--buehne .cy-paket{background:var(--cy-flaeche)}
.cy--buehne .cy-paket__zahl{border-bottom-color:var(--cy-linie-stark)}
.cy--buehne .cy-gruende{background:var(--cy-flaeche)}
.cy--buehne .cy-abschluss{background:#11161D}
@media (max-width:860px){
  .cy--buehne .cy-produkt__film video,
  .cy--buehne .cy-produkt__film img{height:200px}
}
.cy--buehne .cy-menue__knopf{background:var(--cy-flaeche)}
.cy--buehne .cy-form :is(input,select,textarea){background:#11161D}
.cy--buehne .cy-kontakt__direkt{background:#11161D}

/* Produktfarbe im Dunkeln: getönte Flächen statt voller Farbe */
.cy--buehne .cy-produkt__kopf{background:linear-gradient(170deg,color-mix(in srgb,var(--cy-farbe) 9%,var(--cy-grund)),var(--cy-grund))}
.cy--buehne .cy-paket.cy-hervor{background:color-mix(in srgb,var(--cy-farbe) 7%,var(--cy-flaeche))}
.cy--buehne .cy-stufe{background:color-mix(in srgb,var(--cy-farbe) 12%,transparent)}
.cy--buehne .cy-nav__glieder a.cy-an{color:var(--cy-farbe)}

/* Der Hero-Film ist eine helle Bildschirmaufnahme und stößt sonst hart an den
   dunklen Grund. Ein Verlauf am unteren Rand führt ihn hinein — billiger und
   flexibler, als ihn in den Film hineinzurendern. */
.cy--buehne .cy-film{position:relative}
.cy--buehne .cy-film::after{content:""; position:absolute; left:0; right:0; bottom:0; height:130px;
  background:linear-gradient(to bottom, rgba(14,17,22,0), var(--cy-grund)); pointer-events:none}
.cy--buehne .cy-produkt__film::after{content:""; position:absolute; left:0; right:0; bottom:0; height:70px;
  background:linear-gradient(to bottom, rgba(14,17,22,0), var(--cy-grund)); pointer-events:none}

/* Anton ist eine schmale Plakatschrift; unter .98 Zeilenhöhe verlieren
   vietnamesische Zeichen ihren Punkt. */
.cy--buehne[lang="vi"] .cy-held h1{line-height:1.18}
.cy--buehne[lang="vi"] .cy-produkt h2,
.cy--buehne[lang="vi"] .cy-abschnitt__titel,
.cy--buehne[lang="vi"] .cy-abschluss h2,
.cy--buehne[lang="vi"] .cy-paket h3{line-height:1.25}