/* scylaros.com – einfache Seite im Stil der Verpackung. Nur Grautöne, keine Schatten. */

@font-face {
  font-family: "Manrope";
  src: url("/schrift/manrope.woff2?v=846a27c3c79b") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --grund: #0e0e0f;
  --grund-oben: #18181b;
  --titel: #e6e6e6;
  --text: #b8b8b8;
  --neben: #7d7d7d;
  --zeichen: #6f6f6f;
  --linie: #26262a;
  --rand: 20px;
  --abstand: 72px;
  color-scheme: dark;
}

@media (min-width: 800px) {
  :root {
    --rand: 40px;
    --abstand: 120px;
  }
}

* { box-sizing: border-box; }

main { flex: 1 0 auto; }

html {
  background-color: var(--grund);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 100vh;
  background-color: var(--grund);
  background-image: linear-gradient(180deg, var(--grund-oben) 0, var(--grund) 900px);
  background-repeat: no-repeat;
  color: var(--text);
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  overflow-wrap: break-word;
}

img { display: block; max-width: 100%; height: auto; }

a { color: var(--titel); text-decoration-color: var(--zeichen); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--titel); }
a:focus-visible, .knopf:focus-visible { outline: 2px solid var(--titel); outline-offset: 4px; border-radius: 4px; }

h1, h2, h3 { color: var(--titel); font-weight: 650; line-height: 1.2; margin: 0; }
h2 { font-size: 26px; letter-spacing: -0.01em; }
h3 { font-size: 17px; font-weight: 700; }
p { margin: 0; }

@media (min-width: 800px) {
  h2 { font-size: 34px; }
}

.innen {
  width: 100%;
  max-width: calc(1040px + 2 * var(--rand));
  margin: 0 auto;
  padding: 0 var(--rand);
}

.sprung {
  position: absolute;
  left: -9999px;
}
.sprung:focus { left: var(--rand); top: 8px; z-index: 2; background: var(--grund); padding: 8px 12px; }

/* Kopf */
.kopf { border-bottom: 1px solid var(--linie); }
.kopf .innen {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
  min-height: 64px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.marke {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--titel);
  font-weight: 650;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
}
.marke img { width: 28px; }
.kopf nav { display: flex; gap: 16px; font-size: 14px; }
@media (min-width: 800px) {
  .marke img { width: 30px; }
  .kopf nav { gap: 24px; font-size: 15px; }
}
.kopf nav a { color: var(--text); text-decoration: none; }
.kopf nav a:hover, .kopf nav a[aria-current="page"] { color: var(--titel); }

/* Hero: echtes 3D-Gerät nur aus CSS (Vorderseite, Rückseite, Rahmen mit Dicke, Tasten, Kameraloch).
   Ohne JavaScript steht das Gerät ruhig rechts (Handy: unter dem Text). Mit /js/hero.js (Klasse hero-an an <html>):
   Auftritt per Keyframes, danach dreht, schrumpft und verschwindet es beim Scrollen (Bühne bleibt per sticky stehen). */
.hero { position: relative; overflow: clip; --hero-schwarz: #181615; }
.hero .innen {
  position: relative;
  display: grid;
  gap: 16px;
  padding-top: 16px;
}
.hero h1 { font-size: 40px; font-weight: 700; letter-spacing: -0.02em; }
.hero .unterzeile, .seitenkopf .unterzeile { margin-top: 12px; color: var(--titel); font-size: 20px; font-weight: 500; }
.hero .satz { margin-top: 16px; max-width: 34em; }
.knopf {
  display: inline-block;
  margin-top: 32px;
  padding: 12px 28px;
  border: 1px solid #8a8a8a;
  border-radius: 999px;
  color: var(--titel);
  font-weight: 600;
  text-decoration: none;
}
.knopf:hover { border-color: var(--titel); }
.knopf-voll { border-color: var(--titel); background-color: var(--titel); color: var(--grund); }
.knopf-voll:hover { border-color: #ffffff; background-color: #ffffff; }
.knoepfe { display: flex; flex-wrap: wrap; gap: 12px 16px; margin-top: 32px; }
.knoepfe .knopf { margin-top: 0; }

/* Gerät: 1em = 1/100 der Gerätehöhe. Handy 54 % der Fensterhöhe (passt unter den Text), Desktop 70 %. */
.hero-geraet {
  --ge: min(0.54vh, calc((100vh - 400px) / 100));
  justify-self: center;
  width: 46.6em;
  height: 100em;
  font-size: var(--ge);
}
@supports (height: 1svh) {
  .hero-geraet { --ge: min(0.54svh, calc((100svh - 400px) / 100)); }
}
.g-blende, .g-flug, .g-raum, .g-auftritt, .g-koerper { position: relative; width: 100%; height: 100%; }
.g-raum { perspective: 1600px; }
.g-auftritt, .g-koerper { transform-style: preserve-3d; }
.g-koerper { transform: rotateY(0deg); }
.g-koerper > * { position: absolute; display: block; backface-visibility: hidden; -webkit-backface-visibility: hidden; }

/* Vorderseite: dunkler, schmaler Rand, Bildschirm mit runden Ecken, Kameraloch, Lichtkante, wandernder Reflex.
   Eckradius 4,2em = 9 % der Breite (Animation 2: wie Alexanders Vorlage der Rückseite) */
.g-vorne, .g-hinten { inset: 0; border-radius: 4.2em; overflow: hidden; }
.g-vorne {
  transform: translateZ(0.715em);
  background-image: linear-gradient(160deg, #15161a, #0c0c0d);
  box-shadow: inset 0 0 0 1px #3a3b40;
}
.g-vorne img {
  position: absolute;
  left: 1.2em;
  top: 1.2em;
  width: 44.2em;
  height: 97.6em;
  max-width: none;
  border-radius: 3em;
}
.g-vorne i, .g-hinten i { position: absolute; display: block; }
.g-loch {
  left: 50%;
  top: 2.5em;
  width: 1.5em;
  height: 1.5em;
  margin-left: -0.75em;
  border-radius: 50%;
  background-image: radial-gradient(circle at 38% 34%, #2c2e36 0, #08080a 42%, #000000 70%);
  box-shadow: 0 0 0 0.12em rgba(255, 255, 255, 0.05);
}
.g-reflex {
  top: -20%;
  left: 0;
  width: 34%;
  height: 140%;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0));
  opacity: 0.45;
  transform: translateX(-30%) skewX(-16deg);
}
/* Weiche Fassung (vorab weichgezeichnet) – hero.js blendet sie beim Auflösen über das scharfe Bild */
.g-vorne img.g-weich, .g-hinten img.g-weich { opacity: 0; }
.g-hinten img.g-weich { position: absolute; inset: 0; }
/* Lichtkanten (Animation 2): je Fläche vier Kanten (dünne Linie + weicher Innenschein wie die Fase der Vorlage), Licht fest von links oben. hero.js setzt je Bild die Deckkraft
   aus dem Drehwinkel (Lambert der Kanten-Normale); vorne schwächer (Glas), hinten #D8D8D8 → nach rechts/unten ausklingend */
.g-k { inset: 0; border: 0 solid #d8d8d8; border-radius: 4.2em; opacity: 0; }
.g-vorne .g-k { border-color: #9a9a9a; }
/* Grundwerte ohne JS / bei „Bewegung reduzieren“ (wie p = 0); hero.js überschreibt sie je Bild */
.g-vorne .g-k-l, .g-vorne .g-k-o { opacity: 0.4; }
.g-hinten .g-k-l, .g-hinten .g-k-o { opacity: 1; }
.g-hinten .g-k-r { opacity: 0.4; }
.g-k-l { border-left-width: 0.2em; box-shadow: inset 0.34em 0 0.4em -0.22em rgba(216, 216, 216, 0.45); -webkit-mask-image: linear-gradient(#000 0, #000 62%, transparent 97%); mask-image: linear-gradient(#000 0, #000 62%, transparent 97%); }
.g-k-o { border-top-width: 0.18em; box-shadow: inset 0 0.3em 0.36em -0.2em rgba(216, 216, 216, 0.4); -webkit-mask-image: linear-gradient(90deg, #000 0, #000 35%, rgba(0, 0, 0, 0.55) 100%); mask-image: linear-gradient(90deg, #000 0, #000 35%, rgba(0, 0, 0, 0.55) 100%); }
.g-k-r { border-right-width: 0.2em; -webkit-mask-image: linear-gradient(#000 0, rgba(0, 0, 0, 0.45) 22%, transparent 50%); mask-image: linear-gradient(#000 0, rgba(0, 0, 0, 0.45) 22%, transparent 50%); }
.g-k-u { border-bottom-width: 0.2em; -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.5), transparent 70%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.5), transparent 70%); }
/* Animation 5 – Lichtkante hinten wie das Rendering (gemessen quer und entlang der Kanten der Vorlage):
   links Kernlinie ≈ 247 hell, ≈ 6 px breit, bis 63 % der Höhe voll, dann auslaufend bis 97 %; Innenschein ≈ 85 → 56;
   oben 229 an der Ecke → 192 (Viertel) → 137 (Mitte) → 86 (drei Viertel) → weg vor der rechten Ecke;
   rechts 180 von 6 bis 18 % der Höhe, 139 bei 25 %, 63 bei 36 %, weg bei 48 %; unten unsichtbar. */
.g-hinten .g-k { border-color: #f2efed; }
.g-hinten .g-k-l { border-left-width: 0.3em; box-shadow: inset 0.5em 0 0.6em -0.3em rgba(236, 232, 228, 0.42); -webkit-mask-image: linear-gradient(#000 0, #000 63%, rgba(0, 0, 0, 0.62) 74%, rgba(0, 0, 0, 0.28) 89%, transparent 98%); mask-image: linear-gradient(#000 0, #000 63%, rgba(0, 0, 0, 0.62) 74%, rgba(0, 0, 0, 0.28) 89%, transparent 98%); }
.g-hinten .g-k-o { border-top-width: 0.24em; box-shadow: inset 0 0.34em 0.4em -0.24em rgba(236, 232, 228, 0.3); -webkit-mask-image: linear-gradient(90deg, #000 0, rgba(0, 0, 0, 0.84) 28%, rgba(0, 0, 0, 0.58) 52%, rgba(0, 0, 0, 0.36) 78%, rgba(0, 0, 0, 0.1) 90%, transparent 97%); mask-image: linear-gradient(90deg, #000 0, rgba(0, 0, 0, 0.84) 28%, rgba(0, 0, 0, 0.58) 52%, rgba(0, 0, 0, 0.36) 78%, rgba(0, 0, 0, 0.1) 90%, transparent 97%); }
.g-hinten .g-k-r { border-right-width: 0.22em; -webkit-mask-image: linear-gradient(transparent 2%, rgba(0, 0, 0, 0.8) 6%, rgba(0, 0, 0, 0.8) 18%, rgba(0, 0, 0, 0.6) 25%, rgba(0, 0, 0, 0.26) 36%, transparent 48%); mask-image: linear-gradient(transparent 2%, rgba(0, 0, 0, 0.8) 6%, rgba(0, 0, 0, 0.8) 18%, rgba(0, 0, 0, 0.6) 25%, rgba(0, 0, 0, 0.26) 36%, transparent 48%); }
.g-hinten .g-k-u { display: none; }

/* Rückseite (Animation 3, Vektor nach Alexanders Vorlage): warmes mattes Fast-Schwarz #181615 (Vorlage 24,22,21),
   feines Korn, zu den Rändern #1E1C1A, keine Spiegelung; drei geschlossene dünne Kameraringe (links oben hell, rechts
   unten dunkler) und das Logo „sy“ (metallisches Grau) in bilder/geraet-hinten.svg */
/* Animation 5 (aus der Vorlage gemessen): Fläche überall 24,22,21 wie der Grund (keine Vignette), nur an der linken Kante ein
   Lichtschein (oben +13 Stufen, ab halber Höhe weg); Korn der Vorlage σ ≈ 0,4 Stufen → kein Korn mehr; kein Umriss. */
.g-hinten {
  transform: rotateY(180deg) translateZ(0.715em);
  background-color: #181615;
  background-image: radial-gradient(ellipse 11% 48% at 0 16%, rgba(255, 246, 238, 0.06) 0, rgba(255, 246, 238, 0.025) 55%, rgba(255, 246, 238, 0) 100%);
}
.g-hinten img { width: 100%; height: 100%; max-width: none; }
/* Ringe (geraet-hinten.svg): im Schlüsselwinkel wie die Kreise der Vorlage; hero.js staucht sie sonst waagerecht zu Kreisen */
.g-hinten img:first-child { transform-origin: 21.459% 50%; }
/* Logo (geraet-logo.svg, Schattierung der Vorlage): von hero.js angelegt, in p 0,25 … 0,34 auf die Neigung der Vorlage gedreht */
.g-hinten .g-logo { left: 17.51em; top: 36.1892em; width: 10em; height: 5.5615em; background: url(/bilder/geraet-logo.svg?v=99e6ef6dce3b) 0 0 / 100% 100% no-repeat; }

/* Rahmen (Dicke 1,43em ≈ 9 px bei 70 vh): 4 gerade Flächen + 3 Facetten je Ecke (Eckradius 4,2em), Farbe wie die
   Rückseite. Licht (--l, von hero.js je Bild) liegt auf der Kante zur Rückseite und klingt zur Vorderseite hin aus.
   Erzeugt mit werkzeug/rueckseite.py */
.g-r {
  --l: 0;
  width: 1.43em;
  background-color: #1a1817;
  background-image: linear-gradient(90deg, rgba(216, 216, 216, calc(var(--l) * 0.3)) 0, rgba(216, 216, 216, calc(var(--l) * 0.12)) 0.2em, rgba(216, 216, 216, calc(var(--l) * 0.2)) 0.6em, rgba(216, 216, 216, calc(var(--l) * 0.32)) 1.1em, rgba(216, 216, 216, calc(var(--l) * 0.7)) 1.32em, rgba(236, 236, 236, var(--l)) 1.43em);
}
/* lange Seiten: Licht klingt nach unten aus (wie die linke Kante der Vorlage) */
/* Animation 5: .g-r1 ist im Schlüsselwinkel die linke, hell schimmernde Seitenfläche – Helligkeit entlang der Höhe wie gemessen
   (oben ≈ 90, 28 % ≈ 62, 44 % ≈ 45, 59 % ≈ 36, 75 % ≈ 26, ab 88 % weg) */
.g-r1 { background-image: linear-gradient(90deg, rgba(216, 216, 216, calc(var(--l) * 0.42)) 0, rgba(216, 216, 216, calc(var(--l) * 0.2)) 0.2em, rgba(216, 216, 216, calc(var(--l) * 0.3)) 0.6em, rgba(226, 222, 218, calc(var(--l) * 0.5)) 1.1em, rgba(236, 232, 228, calc(var(--l) * 0.85)) 1.32em, rgba(246, 243, 240, var(--l)) 1.43em); -webkit-mask-image: linear-gradient(#000 0, rgba(0, 0, 0, 0.68) 28%, rgba(0, 0, 0, 0.42) 44%, rgba(0, 0, 0, 0.28) 59%, rgba(0, 0, 0, 0.1) 75%, transparent 88%); mask-image: linear-gradient(#000 0, rgba(0, 0, 0, 0.68) 28%, rgba(0, 0, 0, 0.42) 44%, rgba(0, 0, 0, 0.28) 59%, rgba(0, 0, 0, 0.1) 75%, transparent 88%); }
.g-r3 { -webkit-mask-image: linear-gradient(to top, #000 0, #000 55%, rgba(0, 0, 0, 0.2) 100%); mask-image: linear-gradient(to top, #000 0, #000 55%, rgba(0, 0, 0, 0.2) 100%); }
.g-r1 { left: 45.885em; top: 4.170em; height: 91.660em; transform: rotate(0.0deg) rotateY(90deg); }
.g-r2 { left: 22.585em; top: 80.870em; height: 38.260em; transform: rotate(90.0deg) rotateY(90deg); }
.g-r3 { left: -0.715em; top: 4.170em; height: 91.660em; transform: rotate(180.0deg) rotateY(90deg); }
.g-r4 { left: 22.585em; top: -19.130em; height: 38.260em; transform: rotate(270.0deg) rotateY(90deg); }
.g-r5 { left: 42.735em; top: -0.871em; height: 2.305em; transform: rotate(285.0deg) rotateY(90deg); }
.g-r6 { left: 44.554em; top: 0.179em; height: 2.305em; transform: rotate(315.0deg) rotateY(90deg); }
.g-r7 { left: 45.604em; top: 1.998em; height: 2.305em; transform: rotate(345.0deg) rotateY(90deg); }
.g-r8 { left: 45.604em; top: 95.698em; height: 2.305em; transform: rotate(15.0deg) rotateY(90deg); }
.g-r9 { left: 44.554em; top: 97.516em; height: 2.305em; transform: rotate(45.0deg) rotateY(90deg); }
.g-r10 { left: 42.735em; top: 98.566em; height: 2.305em; transform: rotate(75.0deg) rotateY(90deg); }
.g-r11 { left: 2.435em; top: 98.566em; height: 2.305em; transform: rotate(105.0deg) rotateY(90deg); }
.g-r12 { left: 0.616em; top: 97.516em; height: 2.305em; transform: rotate(135.0deg) rotateY(90deg); }
.g-r13 { left: -0.434em; top: 95.698em; height: 2.305em; transform: rotate(165.0deg) rotateY(90deg); }
.g-r14 { left: -0.434em; top: 1.998em; height: 2.305em; transform: rotate(195.0deg) rotateY(90deg); }
.g-r15 { left: 0.616em; top: 0.179em; height: 2.305em; transform: rotate(225.0deg) rotateY(90deg); }
.g-r16 { left: 2.435em; top: -0.871em; height: 2.305em; transform: rotate(255.0deg) rotateY(90deg); }

/* Tasten (wie in der Vorlage, von hinten gesehen): links die Lautstärke-Wippe als zwei feine helle Striche (13,4–20,3 %
   der Höhe), rechts die Ein/Aus-Taste dunkel. Von vorne gesehen liegt die Wippe also rechts. */
.g-t { --l: 0; border-radius: 0.2em; background-color: #181615; }
.g-laut { top: 13.4em; height: 6.9em; }
.g-ein { top: 24em; height: 6.5em; }
.g-t-aussen { width: 0.8em; }
.g-laut.g-t-aussen { left: 46.5em; transform: rotateY(90deg); background-image: linear-gradient(90deg, rgba(216, 216, 216, calc(var(--l) * 0.85)) 0, rgba(216, 216, 216, calc(var(--l) * 0.22)) 0.12em, rgba(216, 216, 216, calc(var(--l) * 0.3)) 0.68em, rgba(230, 230, 230, calc(var(--l) * 0.9)) 0.8em); }
.g-ein.g-t-aussen { left: -0.7em; transform: rotate(180deg) rotateY(90deg); background-image: linear-gradient(90deg, #221f1d, #181615 30%, #181615 70%, #1e1c1a); }
.g-t-vorne, .g-t-hinten { width: 0.32em; }
.g-laut.g-t-vorne, .g-laut.g-t-hinten { left: 46.58em; }
.g-ein.g-t-vorne, .g-ein.g-t-hinten { left: -0.3em; }
.g-t-vorne { transform: translateZ(0.4em); }
.g-t-hinten { transform: rotateY(180deg) translateZ(0.4em); }
/* Animation 5: wie im Rendering zwei schmale, fast bündige Tasten in der hell schimmernden Seitenfläche (nicht mehr als Block
   herausstehend): Außenfläche nur 0,08em vor dem Rahmen, hintere Flanke als feine dunkle Fuge */
.g-laut { -webkit-mask-image: linear-gradient(#000 0, #000 44%, transparent 44%, transparent 56%, #000 56%); mask-image: linear-gradient(#000 0, #000 44%, transparent 44%, transparent 56%, #000 56%); }
.g-laut.g-t-aussen { left: 46.28em; width: 0.64em; background-image: linear-gradient(90deg, rgba(236, 232, 228, calc(var(--l) * 0.55)) 0, rgba(216, 216, 216, calc(var(--l) * 0.34)) 0.12em, rgba(216, 216, 216, calc(var(--l) * 0.4)) 0.52em, rgba(240, 236, 232, calc(var(--l) * 0.7)) 0.64em); }
.g-laut.g-t-hinten { left: 46.6em; width: 0.08em; transform: rotateY(180deg) translateZ(0.32em); }
/* die vordere Flanke bleibt wie bisher (von vorn als feiner Splitter am Rand sichtbar – Vorderseite unverändert; von hinten unsichtbar) */
.g-laut.g-t-vorne { -webkit-mask-image: none; mask-image: none; }

/* Weicher Boden-Schatten (radial, höchstens 25 %) – wird von hero.js mit gedreht und verkleinert */
.g-schatten {
  position: absolute;
  left: -6%;
  top: calc(100% + 1.5em);
  width: 112%;
  height: 7em;
  background-image: radial-gradient(closest-side, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0));
}

/* Animation 4 – Schlüsselbild: Alexanders Rendering 1:1 (bilder/geraet-schluesselbild.webp, 855 × 2048, verlustfrei, jeder
   Pixel wie eingang/box/rueckseite-2048.png). Nur mit hero.js (das Skript legt .hero-grund und .g-schluessel an; ohne JS und bei
   „Bewegung reduzieren“ gibt es sie nicht, es wird nichts geladen). --hero-schwarz = gemessene Grundfarbe der Vorlage (Median
   der Randstreifen: 24, 22, 21). Lage in em des Geräts: in der Pose der Vorlage (rotateY 215°, Perspektive 6200 px) ist das
   Gerät 1861 px = 100em hoch, seine Mitte liegt bei (445,73 | 1042,16) px der Vorlage → dieser Punkt liegt auf der Gerätemitte
   und ist transform-origin; hero.js skaliert das Bild um ihn (gleiche Skalierung wie das Gerät bei p = 0,36). Ränder 32 px der
   Vorlage (1,7195em) laufen weich aus, damit nie ein Rechteck sichtbar wird. */
/* Grund der Bühne (hero.js): deckende Fläche, Farbe je Bild zwischen Seitenfarbe und --hero-schwarz; darüber oben nur über dem Rest
   des Seitenverlaufs ein schmaler halbdurchsichtiger Streifen in --hero-schwarz (kein Vollbild-Mischen, 60 Bilder/s) */
.hero-grund, .hero-grund-band { position: absolute; left: 0; top: 0; width: 100%; opacity: 0; pointer-events: none; will-change: transform, opacity; }
.hero-grund { height: 100%; background-color: var(--grund); }
.hero-grund-band { height: 902px; background-color: var(--hero-schwarz); }
.g-schluessel {
  position: absolute;
  left: -0.6514em;
  top: -6.0006em;
  width: 45.943em;
  height: 110.0484em;
  transform-origin: 23.9514em 56.0006em;
  background: url(/bilder/geraet-schluesselbild.webp?v=e0029dc71d76) 0 0 / 100% 100% no-repeat;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  /* Animation 5 – dritte Maskenschicht = Lichtgrenze: schräg (150°, von links oben nach rechts unten); vor der Grenze (--lauf-a)
     schon das Bild, hinter ihr (--lauf-b) noch das CSS-Gerät. hero.js verschiebt die Grenze mit dem Lichtstreifen (p 0,34 … 0,44);
     sonst steht sie ganz hinten (Bild voll). */
  --lauf-a: 999em;
  --lauf-b: 1000em;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 1.7195em, #000 calc(100% - 1.7195em), transparent), linear-gradient(transparent, #000 1.7195em, #000 calc(100% - 1.7195em), transparent), linear-gradient(150deg, #000 var(--lauf-a), transparent var(--lauf-b));
  -webkit-mask-composite: source-in, source-in;
  mask-image: linear-gradient(90deg, transparent, #000 1.7195em, #000 calc(100% - 1.7195em), transparent), linear-gradient(transparent, #000 1.7195em, #000 calc(100% - 1.7195em), transparent), linear-gradient(150deg, #000 var(--lauf-a), transparent var(--lauf-b));
  mask-composite: intersect, intersect;
}
/* Lichtlauf (Animation 5, von hero.js angelegt): gleiche Lage und Skalierung wie das Schlüsselbild; die Maske (Vorlagen-Pixel)
   begrenzt das Licht auf Rückfläche und linke Seitenfläche, unten läuft es aus. Der Streifen (35 % der Gerätehöhe, sehr weicher
   Rand) wird nur verschoben (transform), die Deckkraft (höchstens 16 %) setzt hero.js am Behälter – kein Filter. */
.g-licht {
  position: absolute;
  left: -0.6514em;
  top: -6.0006em;
  width: 45.943em;
  height: 110.0484em;
  transform-origin: 23.9514em 56.0006em;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  -webkit-mask: url(/bilder/geraet-licht-maske.svg?v=12517cb530ff) 0 0 / 100% 100% no-repeat;
  mask: url(/bilder/geraet-licht-maske.svg?v=12517cb530ff) 0 0 / 100% 100% no-repeat;
}
.g-licht i {
  position: absolute;
  left: -77.03em;
  top: 37.52em;
  width: 200em;
  height: 35em;
  background-image: linear-gradient(rgba(255, 252, 248, 0) 0, rgba(255, 252, 248, 0.05) 14%, rgba(255, 252, 248, 0.24) 28%, rgba(255, 252, 248, 0.62) 40%, #fffcf8 50%, rgba(255, 252, 248, 0.62) 60%, rgba(255, 252, 248, 0.24) 72%, rgba(255, 252, 248, 0.05) 86%, rgba(255, 252, 248, 0) 100%);
  will-change: transform;
}
/* vorab weichgezeichnete Fassung (Auflösen p 0,56 … 0,76), liegt deckungsgleich darüber */
.g-schluessel i { position: absolute; inset: 0; display: block; background: url(/bilder/geraet-schluesselbild-weich.webp?v=528cad415d06) 0 0 / 100% 100% no-repeat; opacity: 0; }
/* Perspektive in em (statt 1600 px): bei 1440 × 900 (Gerät 630 px) und 390 × 844 (444 px) wie bisher ≈ 1600 px; so passt das
   Gerät in jeder Fensterhöhe bei p = 0,36 genau auf die Perspektive der Vorlage (hero.js rechnet die Skalierung daraus) */
.hero-an .g-raum { perspective: 360em; will-change: opacity; }

/* Desktop: Text links, Gerät rechts (70 % der Fensterhöhe) */
@media (min-width: 800px) {
  .hero .innen {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 64px;
    padding-top: 32px;
  }
  .hero-geraet { --ge: 0.7vh; justify-self: end; }
  .hero-an .g-raum { perspective: 254em; }
  .hero h1 { font-size: 64px; }
  .hero .unterzeile { font-size: 24px; }
}
@media (min-width: 800px) {
  @supports (height: 1svh) {
    .hero-geraet { --ge: 0.7svh; }
  }
}

/* Mit hero.js: lange Scroll-Strecke (Desktop 260 vh, Handy 200 vh), die Bühne steht so lange still (sticky) */
.hero-an { --strecke: 200vh; }
.hero-an .hero { height: calc(100vh + var(--strecke)); }
.hero-an .hero-buehne { position: sticky; top: 0; height: 100vh; }
.hero-an .hero-buehne .innen { height: 100%; align-content: start; }
.hero-an .g-flug { will-change: transform; }
.hero-an .g-koerper { will-change: transform; }
/* Animation 2: 6 vh höher als zuvor, damit „Was ScylarOS ausmacht“ ab p = 0,68 sichtbar hereinkommt (keine leere Fläche) */
.hero-an #ausmacht { position: relative; z-index: 1; margin-top: calc(-0.25 * var(--strecke) - 16px - 28vh); }
@supports (height: 1svh) {
  .hero-an { --strecke: 200svh; }
  .hero-an .hero { height: calc(100svh + var(--strecke)); }
  .hero-an .hero-buehne { height: 100svh; }
}
@media (min-width: 800px) {
  .hero-an { --strecke: 260vh; }
  .hero-an .hero-buehne .innen { align-content: center; padding-top: 0; }
}
@media (min-width: 800px) {
  @supports (height: 1svh) {
    .hero-an { --strecke: 260svh; }
  }
}

/* Auftritt (0 → 1,1 s, startet sofort): Gerät kommt von unten, leicht kleiner und gedreht; Text höchstens 0,3 s weich */
.hero-an .g-auftritt { animation: g-auftritt 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hero-an .g-blende { animation: g-blende 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hero-an .hero-text > * { animation: text-ein 0.24s ease-out both; }
.hero-an .hero-text > :nth-child(2) { animation-delay: 60ms; }
.hero-an .hero-text > :nth-child(3) { animation-delay: 120ms; }
.hero-an .hero-text > :nth-child(4) { animation-delay: 180ms; }
@keyframes g-auftritt {
  from { transform: translate3d(0, 48px, 0) scale(0.94) rotateY(-14deg); }
  to { transform: translate3d(0, 0, 0) scale(1) rotateY(0deg); }
}
@keyframes g-blende {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes text-ein {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .g-auftritt, .g-blende, .hero-text > * { animation: none; }
}

/* Abschnitte */
.abschnitt { margin-top: var(--abstand); }
.abschnitt h2 { margin-bottom: 40px; }
.abschnitt-ende { padding-bottom: var(--abstand); }

.punkte {
  display: grid;
  gap: 32px 48px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.punkte li { border-top: 1px solid var(--linie); padding-top: 20px; }
.punkte p { margin-top: 8px; }
@media (min-width: 640px) {
  .punkte { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .punkte { grid-template-columns: repeat(3, 1fr); }
}

/* Geräterahmen für echte Bildschirme */
.geraet {
  padding: 8px;
  border: 1px solid #3a3a3f;
  border-radius: 34px;
  background-color: #070708;
}
.geraet img { border-radius: 26px; width: 100%; }

.bildschirme {
  display: flex;
  gap: 20px;
  margin: 0 calc(-1 * var(--rand));
  padding: 0 var(--rand) 8px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--rand);
  scrollbar-width: thin;
  scrollbar-color: var(--linie) transparent;
}
.bildschirme li { flex: 0 0 240px; scroll-snap-align: start; }
.bildschirme figure { margin: 0; }
.bildschirme figcaption { margin-top: 16px; color: var(--text); font-size: 15px; text-align: center; }

/* Am Handy: Geräte untereinander, mittig, je 260 px */
@media (max-width: 799px) {
  .bildschirme {
    flex-direction: column;
    align-items: center;
    gap: 40px;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  .bildschirme li { flex: none; width: 260px; max-width: 100%; }
}

@media (min-width: 800px) {
  .bildschirme {
    justify-content: space-between;
    gap: 40px;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  .bildschirme li { flex: 0 1 320px; }
}

/* Bestellen */
.karte {
  max-width: 560px;
  padding: 32px 24px;
  border: 1px solid #3a3a3f;
  border-radius: 24px;
  background-color: #121214;
}
.karte h3 { font-size: 20px; }
.karte .preis { margin-top: 16px; color: var(--titel); font-size: 48px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.karte .preis-zusatz { margin-top: 8px; color: var(--neben); font-size: 14px; }
.paket { margin: 28px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--linie); }
.paket li { position: relative; padding: 12px 0 12px 22px; border-bottom: 1px solid var(--linie); }
.paket li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 23px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--zeichen);
}
.karte .karte-text { margin-top: 24px; color: var(--titel); }
.karte .karte-neben { margin-top: 6px; color: var(--neben); font-size: 15px; }
.karte .knopf { margin-top: 28px; }
.unter-karte { margin-top: 16px; color: var(--neben); font-size: 14px; }
@media (min-width: 800px) {
  .karte { padding: 40px 48px; }
  .karte .preis { font-size: 56px; }
}

/* Tabelle */
.daten { width: 100%; max-width: 640px; border-collapse: collapse; }
.daten-spalten { display: grid; }
.daten-spalten .daten { max-width: none; table-layout: fixed; }
.daten-spalten .daten th { width: 42%; }
@media (max-width: 799px) {
  .daten + .daten tr:first-child th, .daten + .daten tr:first-child td { border-top: 0; }
}
@media (min-width: 800px) {
  .daten-spalten { grid-template-columns: 1fr 1fr; gap: 0 48px; align-items: start; }
}
.daten th, .daten td { padding: 14px 0; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; }
.daten tr:first-child th, .daten tr:first-child td { border-top: 1px solid var(--linie); }
.daten th { width: 40%; padding-right: 16px; color: var(--neben); font-weight: 500; }
.daten td { color: var(--titel); }

address { font-style: normal; }
address p + p { margin-top: 12px; }

/* Textseiten (Impressum, Datenschutz, 404) */
.text { max-width: 44em; padding-top: 56px; padding-bottom: var(--abstand); }
.text h1 { font-size: 36px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 24px; }
.text h2 { font-size: 21px; margin-top: 48px; margin-bottom: 12px; }
.text p + p, .text p + ul, .text ul + p { margin-top: 12px; }
.text ul { margin: 0; padding-left: 1.2em; }
.text li + li { margin-top: 6px; }
.text .stand { color: var(--neben); font-size: 15px; }
.text dl { margin: 0; display: grid; grid-template-columns: 13em 1fr; gap: 6px 24px; }
.text dt { color: var(--neben); }
.text dd { margin: 0; color: var(--titel); }
.text .leise { margin-top: 32px; }
@media (min-width: 800px) {
  .text { padding-top: 88px; }
  .text h1 { font-size: 48px; }
}
@media (max-width: 479px) {
  .text dl { grid-template-columns: 1fr; gap: 0; }
  .text dd + dt { margin-top: 10px; }
}

/* Fuß */
.fuss {
  border-top: 1px solid var(--linie);
  padding: 56px 0 48px;
  text-align: center;
}
.fuss .zeichen { width: 64px; margin: 0 auto; }
.fuss nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 24px; margin-top: 28px; font-size: 15px; }
.fuss nav a { color: var(--text); text-decoration: none; }
.fuss nav a:hover { color: var(--titel); }
.fuss .recht { margin-top: 20px; color: var(--neben); font-size: 13px; }

/* Ranking-Seiten (31.10.2026): /scylaros/ /ki/ /neuigkeiten/ /presse/ und Textlinks auf der Startseite */
.kopf nav { flex-wrap: wrap; row-gap: 4px; }
.weiter { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 40px; font-size: 15px; }
.punkte p a { white-space: nowrap; }
.text .vorspann { margin-top: 16px; color: var(--titel); font-size: 19px; line-height: 1.5; }
.inhaltsliste { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 28px; padding: 16px 0; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); font-size: 15px; }
.inhaltsliste a { color: var(--text); }
.text .frage h3 { margin-top: 28px; margin-bottom: 6px; }
.text .frage h2 + h3 { margin-top: 0; }
.text .frage ul { margin-top: 12px; }
.text .frage ul + p { margin-top: 16px; }
.text strong { color: var(--titel); font-weight: 650; }
.text .ki-hinweis { margin-top: 24px; padding: 16px 20px; border: 1px solid #3a3a3f; border-radius: 16px; background-color: #121214; }
.text .eintrag { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--linie); }
.text .eintrag h2 { margin-top: 6px; }
.text .datum { color: var(--neben); font-size: 15px; }
.text-breit .daten { max-width: none; margin-top: 4px; }
.faktenblatt th { width: 30%; }
.text .downloads { list-style: none; padding-left: 0; }
.text .downloads li { padding: 10px 0; border-bottom: 1px solid var(--linie); }
.text .downloads li + li { margin-top: 0; }
.leise-text { display: block; color: var(--neben); font-size: 14px; }
@media (max-width: 479px) {
  .faktenblatt th, .faktenblatt td { display: block; width: auto; }
  .faktenblatt th { padding-bottom: 2px; border-bottom: 0; }
  .faktenblatt td { padding-top: 0; }
  .faktenblatt tr:first-child td { border-top: 0; }
}

/* Vergleich + Englisch (31.10.2026): Sprachumschalter DE/EN im Kopf, Vergleichstabelle (am Handy je Zeile ein Block) */
.kopf nav .sprache { padding: 0 7px; border: 1px solid var(--linie); border-radius: 6px; font-size: 13px; line-height: 1.6; align-self: center; }
.sprache-hinweis { color: var(--neben); font-size: 0.85em; }
.vergleich-tabelle { margin-top: 20px; }
.vergleich-tabelle thead th { color: var(--neben); font-weight: 500; font-size: 14px; padding: 10px 16px 10px 0; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); text-align: left; vertical-align: bottom; }
.vergleich-tabelle { table-layout: fixed; }
.vergleich-tabelle thead th { width: 27%; }
.vergleich-tabelle thead th:first-child { width: 19%; }
.vergleich-tabelle tbody th { width: auto; }
.vergleich-tabelle td { padding-right: 16px; color: var(--text); }
.vergleich-tabelle td:first-of-type { color: var(--titel); }
.text .quellen { margin-top: 16px; }
@media (max-width: 799px) {
  .vergleich-tabelle thead { display: none; }
  .vergleich-tabelle tr, .vergleich-tabelle tbody th, .vergleich-tabelle td { display: block; width: auto; }
  .vergleich-tabelle tr { padding: 14px 0; border-bottom: 1px solid var(--linie); }
  .vergleich-tabelle tr:first-child { border-top: 1px solid var(--linie); }
  .vergleich-tabelle tbody th, .vergleich-tabelle td, .vergleich-tabelle tr:first-child th, .vergleich-tabelle tr:first-child td { padding: 0; border: 0; }
  .vergleich-tabelle tbody th { color: var(--titel); font-weight: 650; margin-bottom: 6px; }
  .vergleich-tabelle td + td { margin-top: 8px; }
  .vergleich-tabelle td::before { content: attr(data-system); display: block; color: var(--neben); font-size: 13px; }
}