/*
 * Drive Snapshot, „fancy"-Fassung in ondeso-Farben: Orange #ef7b00 (--blau-tief,
 * gefüllte Knöpfe) und #ff9a33 (--blau, Text und Linien auf Dunkel) wie im
 * ondeso-Entwurf, dunkle Flächen als warmes Grafit statt Navy. Die Variablen-
 * namen bleiben „blau", damit site.css unverändert passt.
 * Liegt über site.css und dreht das
 * Zeichenpapier zur Nachtpause: dunkles Blau, leuchtende Linien, Bewegung.
 * Inhalt und Aufbau bleiben die der Blueprint-Fassung.
 *
 * Bestandsblau #d66b00 lebt als --blau-tief (gefüllte Knöpfe) weiter, auf
 * dunklem Grund trägt die aufgehellte Stufe --blau Text und Linien.
 * Kontraste auf --papier #141211: --tinte 17,0:1, --grau 9,9:1, --blau 8,8:1;
 * auf Orange steht dunkle Schrift #1a1206 (6,6:1), Weiß hätte nur 2,8:1.
 * Ohne Skript und bei reduzierter Bewegung steht alles still und sichtbar.
 */

:root {
  color-scheme: dark;
  --papier: #141211;
  --papier-2: #201e1c;
  --weiss: #23201e;
  --tinte: #f6f4f2;
  --grau: #c6bbae;
  --linie: #43403c;
  --raster: rgba(239, 123, 0, .07);
  --blau: #ff9a33;
  --blau-tief: #ef7b00;
  --blau-hell: #322f2c;
  --glut: rgba(255, 153, 51, .45);
  --gelb: #1c1907;
  --gelb-kante: #6b611c;
  --gelb-text: #fff3a6;
  --rot: #ff8f86;
  --weich: cubic-bezier(.2, .7, .2, 1);
}

body {
  background-color: var(--papier);
  background-image:
    radial-gradient(60rem 40rem at 85% -10%, rgba(243, 135, 28, .28), transparent 70%),
    radial-gradient(50rem 35rem at -10% 40%, rgba(214, 107, 0, .18), transparent 70%),
    linear-gradient(var(--raster) 1px, transparent 1px),
    linear-gradient(90deg, var(--raster) 1px, transparent 1px);
  background-size: auto, auto, 24px 24px, 24px 24px;
  background-attachment: fixed, fixed, scroll, scroll;
}
::selection { background: var(--blau-tief); color: #ffffff; }

/* Lichtkegel, der dem Mauszeiger folgt (das Skript setzt --mx/--my). */
.licht {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(28rem 28rem at var(--mx, 70%) var(--my, 20%), rgba(196, 183, 169, .13), transparent 65%);
  transition: opacity .6s;
}

/* ---- Entwurfsleiste ------------------------------------------------ */
.entwurf { color: var(--gelb-text); }

/* ---- Kopf ---------------------------------------------------------- */
/* Kopf bleibt beim Scrollen oben stehen; Sprungziele halten Abstand dazu. */
html { scroll-padding-top: 5.5rem; }
.kopf {
  position: sticky; top: 0; z-index: 35;
  background: color-mix(in srgb, var(--papier) 70%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: box-shadow .3s, background .3s;
}
.kopf.ist-gerollt { background: color-mix(in srgb, var(--papier) 86%, transparent); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .8), 0 1px 0 rgba(208, 198, 187, .25); }
/* Offenes Menü auf dem Handy: darf nie höher als der Bildschirm werden */
.nav.ist-offen { max-height: calc(100dvh - 4.25rem); overflow-y: auto; }
.marke__zeichen path[fill] { filter: drop-shadow(0 0 4px var(--glut)); }

/* ---- Knöpfe -------------------------------------------------------- */
.knopf { background: transparent; border-color: color-mix(in srgb, var(--blau) 70%, transparent); color: var(--tinte); transition: background .25s, border-color .25s, box-shadow .25s, transform .25s var(--weich); }
.knopf:hover { background: var(--blau-hell); border-color: var(--blau); box-shadow: 0 0 0 4px rgba(196, 183, 169, .12); }
.knopf--voll, .aktion__link--voll, .schritte [aria-current] {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(135deg, #ff9933, var(--blau-tief) 55%, #d66b00); border-color: transparent; color: #1a1206;
  box-shadow: 0 8px 30px -8px rgba(243, 135, 28, .8), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.knopf--voll:hover { background: linear-gradient(135deg, #ff9933, #ff942a 55%, #d06d0a); box-shadow: 0 10px 38px -6px rgba(255, 153, 51, .95), inset 0 1px 0 rgba(255, 255, 255, .3); transform: translateY(-1px); }
/* Lichtkante, die beim Überfahren durch den Knopf wischt */
.knopf--voll::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .28) 48%, transparent 66%);
  transform: translateX(-120%); transition: transform .7s var(--weich);
}
.knopf--voll:hover::after { transform: translateX(120%); }
.aktion__link:not(.aktion__link--voll) { background: var(--weiss); color: var(--tinte); }

/* ---- Start --------------------------------------------------------- */
.start { position: relative; overflow: hidden; isolation: isolate; }
.start h1 {
  background: linear-gradient(100deg, #ffffff 0%, #f2efec 45%, #d0c6bb 80%, #ff9933 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-bottom: .06em; position: relative;
}
/* Jedes Wort trägt denselben Verlauf, verschoben um seine Lage im Block, sonst
   finge der Verlauf in jedem Wort neu an (Maße setzt das Skript). */
.start h1 .wort {
  display: inline-block; background-image: inherit; background-repeat: no-repeat;
  background-size: var(--bw, 100%) var(--bh, 100%); background-position: var(--bx, 0) var(--by, 0);
  -webkit-background-clip: text; background-clip: text;
}
/* Offizielles Logo „Drive Snapshot by ondeso“, auf dem dunklen Grund fast weiß */
.start__logo { width: clamp(13rem, 46vw, 24rem); height: auto; margin: 0 0 1.5rem; filter: brightness(0) invert(.94); }
.kennung span:first-child {
  display: inline-flex; align-items: center; gap: .5rem;
}
.kennung span:first-child::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: #4dffb8;
  box-shadow: 0 0 0 3px rgba(77, 255, 184, .18), 0 0 12px #4dffb8;
}

.start__bild { position: relative; display: grid; place-items: center; padding-block: 2rem; }
.start__bild .dialog { position: relative; z-index: 1; }
/* Die Bildunterschrift liegt über den Spuren der Platte: dunkler Hof für die Lesbarkeit */
.start__bild figcaption { text-shadow: 0 0 6px var(--papier), 0 0 14px var(--papier), 0 0 2px var(--papier); }
.platte {
  position: absolute; left: 50%; top: 50%; z-index: 0; width: min(150%, 40rem); height: auto;
  transform: translate(-50%, -50%); overflow: visible; pointer-events: none;
  filter: drop-shadow(0 0 40px rgba(243, 135, 28, .35));
}
.platte__scheibe { stroke: #cb6b0b; stroke-width: 1; }
.platte__spur { fill: none; stroke: #ff9933; stroke-width: 1.2; opacity: .45; transform-origin: 0 0; }
.platte__spur.s1 { stroke-dasharray: 22 6; }
.platte__spur.s2 { stroke-dasharray: 3 9; opacity: .6; }
.platte__spur.s3 { stroke-dasharray: 40 10 6 10; }
.platte__spur.s4 { stroke-dasharray: 2 5; opacity: .7; }
.platte__spur.s5 { stroke-dasharray: 18 8; }
.platte__spur.s6 { stroke-dasharray: 1 6; opacity: .8; }
.platte__keil { transform-origin: 0 0; }
.platte__keil line { stroke: #e2dcd6; stroke-width: 1.5; filter: drop-shadow(0 0 4px #d0c6bb); }
.platte__nabe { fill: #292622; stroke: #d7710b; stroke-width: 1.5; }
.platte__achse { fill: #d0c6bb; }

/* Die Platte ragt über die Bildspalte hinaus; die Kennwerte decken sie ab. */
.werte { position: relative; z-index: 2; background: var(--papier); box-shadow: 0 -24px 24px -8px var(--papier); border-top-color: color-mix(in srgb, var(--blau) 60%, transparent); }
.werte dd { color: #ffffff; }

/* ---- Bildschirmfoto: schwebendes Fenster ---------------------------- */
.dialog__rahmen {
  box-shadow: 0 0 0 1px rgba(208, 198, 187, .35), 0 30px 60px -20px rgba(0, 0, 0, .8), 0 0 50px -10px rgba(243, 135, 28, .55);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .5s var(--weich), box-shadow .4s;
  will-change: transform;
}
.dialog__rahmen::before, .dialog__rahmen::after { border-color: var(--blau); filter: drop-shadow(0 0 3px var(--blau)); }
.dialog__rahmen:hover { box-shadow: 0 0 0 1px rgba(216, 208, 199, .6), 0 40px 70px -20px rgba(0, 0, 0, .85), 0 0 70px -6px rgba(255, 153, 51, .7); }
/* Glanzlicht, das der Neigung folgt */
.dialog__rahmen > img { position: relative; }
.dialog__rahmen .glanz {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light; opacity: 0; transition: opacity .4s;
  background: radial-gradient(18rem 18rem at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .55), transparent 60%);
}
.dialog__rahmen:hover .glanz { opacity: 1; }

/* ---- Bänder -------------------------------------------------------- */
.band--prinzip, .band--lizenzen { background: linear-gradient(180deg, rgba(35, 32, 30, .65), rgba(35, 32, 30, .25)); }
.band__nr::after { background: linear-gradient(90deg, var(--blau), var(--linie) 40%); transform-origin: left; }
.band__nr span { text-shadow: 0 0 10px var(--glut); }

/* ---- Prinzip ------------------------------------------------------- */
.merke { color: var(--gelb-text); background: linear-gradient(90deg, rgba(243, 135, 28, .18), var(--gelb) 40%); border-left-color: var(--blau); }
.zeitachse__punkt::before { background: var(--papier); border-color: var(--grau); }
.zeitachse__punkt--schnitt::before { background: var(--blau); border-color: var(--blau); box-shadow: 0 0 14px var(--blau); }
.zeitachse__punkt--schnitt::after, .zeitachse__punkt--lauf::after { box-shadow: 0 0 8px var(--blau); }

/* ---- Funktionen ---------------------------------------------------- */
.fkt { border-bottom-color: var(--linie); }
.fkt__nr { display: inline-block; padding: .2rem .5rem; border: 1px solid var(--linie); border-radius: 999px; background: var(--blau-hell); }
.terminal {
  background: #100e0d; border-radius: 10px; border: 1px solid #423f3c;
  box-shadow: 0 30px 60px -25px rgba(0, 0, 0, .9), 0 0 60px -15px rgba(243, 135, 28, .5);
}
.terminal__kopf { display: flex; align-items: center; gap: .45rem; border-bottom-color: #383532; }
.terminal__kopf::before {
  content: ''; width: 9px; height: 9px; border-radius: 50%; background: #ff5f57;
  box-shadow: 14px 0 #febc2e, 28px 0 #28c840; margin-right: 34px;
}
.code { color: #efebe7; }
.code .rest { visibility: hidden; }
.code .zeiger {
  display: inline-block; width: .55em; height: 1.1em; margin-bottom: -.2em; background: #d0c6bb;
  box-shadow: 0 0 8px #d0c6bb; animation: blinken 1s steps(1) infinite;
}
@keyframes blinken { 50% { opacity: 0; } }
.doku__inhalt .code { background: #100e0d; border: 1px solid #423f3c; border-radius: 8px; }

/* ---- Tabellen, Download, Preise ------------------------------------ */
.spec, .preise, .dateien, .kapitelliste, .felder, .opt { border-top-color: color-mix(in srgb, var(--blau) 55%, transparent); }
.preise tbody tr { border-bottom-color: color-mix(in srgb, var(--blau) 40%, transparent); }
.preis { transition: transform .3s var(--weich); }
.preis__wert { color: #ffffff; transition: color .25s, text-shadow .25s; }
.preis:hover .preis__wert { color: var(--blau); text-shadow: 0 0 18px var(--glut); text-decoration: none; }
.preis:hover { transform: translateY(-2px); }
.datei { transition: background .25s; }
.datei:hover { background: rgba(50, 47, 44, .55); }
.datei--haupt { background: linear-gradient(90deg, rgba(243, 135, 28, .28), rgba(50, 47, 44, .4)); border-bottom-color: var(--blau); box-shadow: inset 3px 0 var(--blau); }
.datei__link .ikon { transition: transform .3s var(--weich); }
.datei__link:hover .ikon { transform: translateY(3px); }

.adresse { background: linear-gradient(160deg, var(--weiss), var(--papier-2)); border-color: var(--linie); border-radius: 8px; box-shadow: 0 20px 50px -25px rgba(243, 135, 28, .6); }

/* ---- Fuß, Doku ----------------------------------------------------- */
.fuss { background: linear-gradient(180deg, #191816, #100f0e); border-top-color: color-mix(in srgb, var(--blau) 45%, transparent); }
.doku__nav { background: var(--weiss); }
.warnung { background: #2a0d12; }
.schritte a, .schritte span { background: var(--weiss); }
code { color: #ebe6e2; }

/* ---- Scroll-Leiste: Nadel glüht stärker ---------------------------- */
@media (min-width: 48rem) {
  .schiene__zeiger::before { box-shadow: 0 0 10px 1px var(--blau); }
  .start__bild { padding-block: 3rem; }
}

/* ===== Bewegung — nur mit Skript und ohne Wunsch nach Ruhe ========== */
@media (prefers-reduced-motion: no-preference) {
  .js-fancy .platte__spuren .platte__spur { animation: drehen 40s linear infinite; }
  .js-fancy .platte__spur.s2 { animation-duration: 26s; animation-direction: reverse; }
  .js-fancy .platte__spur.s3 { animation-duration: 60s; }
  .js-fancy .platte__spur.s4 { animation-duration: 18s; animation-direction: reverse; }
  .js-fancy .platte__spur.s5 { animation-duration: 34s; }
  .js-fancy .platte__spur.s6 { animation-duration: 12s; }
  .js-fancy .platte__keil { animation: drehen 6s linear infinite; }
  .js-fancy .platte__scheibe { animation: schnitt 6s ease-out infinite; }
  @keyframes drehen { to { transform: rotate(360deg); } }
  /* Einmal pro Umlauf des Lesekeils: kurz aufblitzen, der „Schnitt" */
  @keyframes schnitt { 0%, 86%, 100% { stroke: #cb6b0b; stroke-width: 1; } 90% { stroke: #e2dcd6; stroke-width: 3; } }

  /* Überschrift Wort für Wort */
  .js-fancy .start h1 .wort { opacity: 0; transform: translateY(.45em) rotate(2deg); filter: blur(8px); animation: auftauchen .9s var(--weich) forwards; animation-delay: calc(var(--i) * 70ms + 120ms); }
  @keyframes auftauchen { to { opacity: 1; transform: none; filter: none; } }
  .js-fancy .start__logo, .js-fancy .start__text, .js-fancy .kennung, .js-fancy .werte { opacity: 0; animation: einblenden 1s var(--weich) .55s forwards; }
  .js-fancy .start__logo, .js-fancy .kennung { animation-delay: 0s; }
  .js-fancy .werte { animation-delay: .8s; }
  .js-fancy .start__bild { opacity: 0; animation: heran 1.4s var(--weich) .35s forwards; }
  @keyframes einblenden { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  @keyframes heran { from { opacity: 0; transform: scale(.92) translateY(20px); } to { opacity: 1; transform: none; } }

  /* Alles mit data-zeige erscheint beim Hineinscrollen */
  .js-fancy [data-zeige] { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--weich), transform .9s var(--weich); transition-delay: var(--v, 0ms); }
  .js-fancy [data-zeige].ist-da { opacity: 1; transform: none; }
  .js-fancy .band__nr::after { transform: scaleX(0); transition: transform 1.2s var(--weich) .15s; }
  .js-fancy .band.ist-da > .band__nr::after { transform: scaleX(1); }

  /* Zeitachse füllt sich mit dem Scrollen (--z von 0 bis 1) */
  .js-fancy .zeitachse::after {
    content: ''; position: absolute; left: 7px; top: .5rem; width: 2px; height: calc((100% - 3rem) * var(--z, 0));
    background: linear-gradient(var(--tinte), var(--blau)); box-shadow: 0 0 10px var(--blau);
  }
  .js-fancy .zeitachse__punkt { opacity: .35; transition: opacity .5s; }
  .js-fancy .zeitachse__punkt.ist-an { opacity: 1; }
  .js-fancy .zeitachse__punkt--schnitt.ist-an::before { animation: puls 1.8s ease-out infinite; }
  @keyframes puls { 0% { box-shadow: 0 0 0 0 rgba(208, 198, 187, .7), 0 0 14px var(--blau); } 100% { box-shadow: 0 0 0 16px rgba(208, 198, 187, 0), 0 0 14px var(--blau); } }
}

/* Kapitelliste der Doku klebt unter dem Kopf, nicht dahinter */
@media (min-width: 64rem) {
  .doku__nav { top: 5.5rem; }
}

/* ---- Shop-Band unter dem Start -------------------------------------- */
.shopband { padding-block: 0 3rem; position: relative; z-index: 2; }
.shopband__in {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; gap: 1.75rem; padding: 1.5rem;
  border: 1px solid rgba(208, 198, 187, .35); border-radius: 14px;
  background:
    radial-gradient(40rem 20rem at 100% 0%, rgba(255, 153, 51, .45), transparent 70%),
    linear-gradient(135deg, #302d2a, #1e1c1a 60%);
  box-shadow: 0 30px 70px -30px rgba(243, 135, 28, .8), inset 0 1px 0 rgba(255, 255, 255, .08);
}
/* Leuchtkante, die langsam um den Rahmen wandert */
.shopband__in::before {
  content: ''; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--w, 0deg), transparent 0 70%, #d0c6bb 80%, transparent 90%);
  -webkit-mask: linear-gradient(#000000 0 0) content-box, linear-gradient(#000000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.shopband__in > * { min-width: 0; }
.shopband__kicker { margin: 0 0 .6rem; color: var(--blau); letter-spacing: .14em; text-transform: uppercase; font-size: .72rem; }
.shopband h2 { font-size: clamp(1.5rem, 4.6vw, 2.2rem); margin-bottom: .5em; }
.shopband__text p:last-child { color: var(--grau); margin: 0; }
.shopband__preise { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.shopband__preise li { max-width: none; }
.shopband__preise a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; min-height: 48px;
  padding: .8rem 1rem; border: 1px solid var(--linie); border-radius: 8px;
  background: rgba(20, 18, 17, .55); color: var(--tinte); text-decoration: none;
  transition: border-color .25s, background .25s, transform .3s var(--weich);
}
.shopband__preise a:hover { border-color: var(--blau); background: rgba(243, 135, 28, .18); transform: translateX(3px); }
.shopband__preise span { font-size: .75rem; color: var(--grau); }
.shopband__preise strong { font-size: 1.2rem; letter-spacing: -.02em; white-space: nowrap; }
.shopband__knopf { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; }

@media (min-width: 48rem) {
  .shopband { padding-bottom: 4rem; }
  .shopband__in { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 3rem; padding: 2.25rem 2.5rem; align-items: center; }
  .shopband__knopf { grid-column: 1 / -1; }
}
@media (min-width: 80rem) {
  .shopband__in { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; }
  .shopband__knopf { grid-column: auto; flex-direction: column; align-items: stretch; }
}

@property --w { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@media (prefers-reduced-motion: no-preference) {
  .js-fancy .shopband__in::before { animation: umlauf 8s linear infinite; }
  @keyframes umlauf { to { --w: 360deg; } }
}

/* Dunkle Schrift auf allen orangen Flächen (Weiß erreicht auf #ef7b00 nur 2,8:1). */
.knopf--voll, .knopf--voll:hover, .aktion__link--voll, .schritte [aria-current], .sprung { color: #1a1206; }
::selection { color: #1a1206; }

/* Hero-Wort der Scroll-Leiste sieht aus wie die Wortmarke im Kopf (.marke__wort),
   damit die fliegende Kopie am Start deckungsgleich auf dem Logo liegt.
   Die übrigen Kapitelwörter bleiben in Versalien. */
@media (min-width: 48rem) {
  .schiene__wort--held { text-transform: none; font-weight: 500; letter-spacing: -.02em; }
  .schiene__wort--held b { font-weight: 800; color: var(--blau); }
}