/* =========================================================================
   SkillR STYLE BUNDLE — "orange-kiss-v2" (Material Design 3 · Roboto)

   v2 ist eine BEHAVIORAL/COMPOSITIONAL Erweiterung der Heiko-Vorgabe
   (docs/DESIGN-SYSTEM/custom-theme-orange-kiss/Future SKILLR v3 M3
    Design System.html). v2 erfindet KEINE parallele Komponenten-Suite
   neben Heikos `.topbar` / `.nav` / `.iconbtn` / `.navbtn--audio` /
   `.progress` / `.option` / `.cta`. Stattdessen:

   - Werte (Farbe, Form, Elevation, Motion) erbt v2 1:1 von v1 (orange-kiss).
   - Heikos kanonische Klassen bleiben gültig — v2 ergänzt nur dort, wo
     der DCR-Set 2026-05-26 eine konkrete Verhaltensänderung verlangt
     (Topbar als Overlay, Speaker in der Topbar, Bild-Toggle weg, X weg,
     House neu, Quiz-Ripple gekapselt, Pflicht-Erklärung-Tooltip).

   QUELLE-DCRs: docs/DCR-INDEX.md
   AKTIVIERUNG:
     html[data-sk-theme="orange-kiss-v2"]              → app path (Default)
     html:has(#sk-theme-orange-kiss-v2:checked)        → catalog CSS-only toggle
   ========================================================================= */

@import url("../orange-kiss/style.css");

/* =========================================================================
   M3 TOKEN PRIMITIVES — 1:1 aus Heikos Vorgabe, unter dem v2-Selektor.
   v1's style.css definiert dieselben Werte unter dem v1-Selektor — wir
   spiegeln sie hier, damit die v2-Diagnose-Seiten (die nur v2 aktivieren)
   die M3-Tokens ebenfalls bekommen. ADR-0011 konform.
   ========================================================================= */
html[data-sk-theme="orange-kiss-v2"],
html:has(#sk-theme-orange-kiss-v2:checked) {
  --md-sys-color-primary:              #7C3AED;
  --md-sys-color-on-primary:           #FFFFFF;
  --md-sys-color-primary-container:    #EDE9FE;
  --md-sys-color-on-primary-container: #4C1D95;
  --md-sys-color-secondary:            #F59E0B;
  --md-sys-color-on-secondary:         #FFFFFF;
  --md-sys-color-secondary-container:  #FEF3C7;
  --md-sys-color-on-secondary-container: #78350F;
  --md-sys-color-tertiary:             #10B981;
  --md-sys-color-on-tertiary:          #FFFFFF;
  /* Iter-6 (2026-05-27): Container-Werte auf 200er-Tailwind-Stufe — Original-
     Sättigung der M3-Choice-Chip-States (Selected/Success/Error klar sichtbar
     gefüllt). 100er-Stufe war zu blass auf weißem BG. */
  --md-sys-color-tertiary-container:   #A7F3D0;
  --md-sys-color-on-tertiary-container:#064E3B;
  --md-sys-color-background:           #F8FAFC;
  --md-sys-color-on-background:        #0F172A;
  --md-sys-color-surface:              #FFFFFF;
  --md-sys-color-on-surface:           #1E293B;
  --md-sys-color-surface-variant:      #F1F5F9;
  --md-sys-color-on-surface-variant:   #64748B;
  --md-sys-color-outline:              #94A3B8;
  --md-sys-color-outline-variant:      #E2E8F0;
  --md-sys-color-error:                #EF4444;
  --md-sys-color-on-error:             #FFFFFF;
  --md-sys-color-quiz-container:       #E2E8F0;
  --md-sys-color-on-quiz-container:    #0F172A;
  --md-sys-color-correct:              #22C55E;
  --md-sys-color-correct-container:    #BBF7D0;   /* Iter-6: 200er-Stufe (war #DCFCE7) */
  --md-sys-color-on-correct-container: #14532D;
  --md-sys-color-warn:                 #FF4757;
  --md-sys-color-warn-container:       #FECDD3;   /* Iter-6: 200er-Stufe (war #FFE4E6) */
  --md-sys-color-on-warn-container:    #881337;
  --md-shape-none: 0px;
  --md-shape-xs:   4px;
  --md-shape-sm:   8px;
  --md-shape-md:  12px;
  --md-shape-lg:  16px;
  --md-shape-xl:  28px;
  --md-shape-full: 999px;
  --md-elevation-1: 0px 1px 3px 1px rgba(0,0,0,0.15), 0px 1px 2px 0px rgba(0,0,0,0.30);
  --md-elevation-2: 0px 2px 6px 2px rgba(0,0,0,0.15), 0px 1px 2px 0px rgba(0,0,0,0.30);
  --md-elevation-3: 0px 1px 3px 0px rgba(0,0,0,0.30), 0px 4px 8px 3px rgba(0,0,0,0.15);

  --sk-bg:            var(--md-sys-color-background);
  --sk-text:          var(--md-sys-color-on-background);
  --sk-text-muted:    var(--md-sys-color-on-surface-variant);
  --sk-divider:       var(--md-sys-color-outline-variant);
  --sk-touch-min:     48px;
  --sk-shadow-1:      var(--md-elevation-1);
  --sk-shadow-2:      var(--md-elevation-2);
  --sk-shadow-3:      var(--md-elevation-3);
  --sk-dur-fast:      100ms;
  --sk-dur-base:      200ms;
  --sk-dur-slide:     300ms;
  --sk-ease-out:      cubic-bezier(0.1, 0.9, 0.2, 1);
  --sk-ease-in-out:   cubic-bezier(0.2, 0, 0, 1);
  --sk-sp-1:  4px;
  --sk-sp-2:  8px;
  --sk-sp-3: 12px;
  --sk-sp-4: 16px;
  --sk-sp-5: 24px;
  --sk-sp-6: 32px;
  --sk-sp-7: 48px;
  --sk-fs-eyebrow: 0.75rem;
  --sk-fs-body:    0.875rem;
  --sk-fs-body-lg: 1rem;
  --sk-fs-h2:      1.375rem;
  --sk-fs-h1:      1.75rem;
}

/* =========================================================================
   M3 CANONICAL GEOMETRY BASELINE — 1:1 aus Heikos Vorgabe
   docs/DESIGN-SYSTEM/custom-theme-orange-kiss/Future SKILLR v3 M3 Design System.html
   (Heikos Catalog-Geometrie lebt nur im Catalog-HTML, nicht in v1's theme.css.
    Wir hosten sie hier, damit Standalone-Pages wie die Diagnose-Seiten
    die kanonische M3-Phone-Frame-Optik bekommen.)
   ========================================================================= */
html[data-sk-theme="orange-kiss-v2"] .frames,
html:has(#sk-theme-orange-kiss-v2:checked) .frames {
  display: flex; gap: var(--sk-sp-6); flex-wrap: wrap;
}
html[data-sk-theme="orange-kiss-v2"] .device,
html:has(#sk-theme-orange-kiss-v2:checked) .device { width: 310px; }
html[data-sk-theme="orange-kiss-v2"] .device .scr,
html:has(#sk-theme-orange-kiss-v2:checked) .device .scr {
  width: 310px; height: 640px; border-radius: 40px;
  border: 12px solid var(--md-sys-color-on-background);
  overflow: hidden; box-shadow: var(--sk-shadow-3); position: relative;
  background: var(--sk-bg);
}
html[data-sk-theme="orange-kiss-v2"] .device .cap,
html:has(#sk-theme-orange-kiss-v2:checked) .device .cap {
  text-align: center; font-size: .85rem; margin-top: var(--sk-sp-3); line-height: 1.4;
}
html[data-sk-theme="orange-kiss-v2"] .device .cap b,
html:has(#sk-theme-orange-kiss-v2:checked) .device .cap b {
  display: block; color: var(--md-sys-color-primary);
}
html[data-sk-theme="orange-kiss-v2"] .device .cap span,
html:has(#sk-theme-orange-kiss-v2:checked) .device .cap span {
  color: var(--sk-text-muted); font-size: .75rem;
}

html[data-sk-theme="orange-kiss-v2"] .frame,
html:has(#sk-theme-orange-kiss-v2:checked) .frame {
  display: flex; flex-direction: column; height: 100%;
}
html[data-sk-theme="orange-kiss-v2"] .topbar,
html:has(#sk-theme-orange-kiss-v2:checked) .topbar {
  display: flex; align-items: center; gap: var(--sk-sp-3);
  padding: var(--sk-sp-4) var(--sk-sp-4) var(--sk-sp-2);
  background: transparent; height: 64px;
}
html[data-sk-theme="orange-kiss-v2"] .progress,
html:has(#sk-theme-orange-kiss-v2:checked) .progress {
  flex: 1; height: 8px; border-radius: var(--md-shape-full);
  background: var(--md-sys-color-surface-variant);
  overflow: hidden; display: block; padding: 0; border: none;
}
html[data-sk-theme="orange-kiss-v2"] .progress .indicator,
html:has(#sk-theme-orange-kiss-v2:checked) .progress .indicator {
  height: 100%; border-radius: var(--md-shape-full);
  background: var(--md-sys-color-tertiary);
  transition: width 320ms cubic-bezier(.4, 0, .2, 1);
}
html[data-sk-theme="orange-kiss-v2"] .stage[data-bg="branded"] .progress,
html:has(#sk-theme-orange-kiss-v2:checked) .stage[data-bg="branded"] .progress {
  background: rgba(255, 255, 255, .25);
}
html[data-sk-theme="orange-kiss-v2"] .stage[data-bg="branded"] .progress .indicator,
html:has(#sk-theme-orange-kiss-v2:checked) .stage[data-bg="branded"] .progress .indicator {
  background: var(--md-sys-color-on-primary);
}

html[data-sk-theme="orange-kiss-v2"] .iconbtn,
html:has(#sk-theme-orange-kiss-v2:checked) .iconbtn {
  width: var(--sk-touch-min, 48px); height: var(--sk-touch-min, 48px);
  border: 0; background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--md-shape-full); color: var(--md-sys-color-on-surface);
  transition: background-color var(--sk-dur-fast);
  touch-action: manipulation; /* iOS: kein 300ms Tap-Delay */
}
html[data-sk-theme="orange-kiss-v2"] .iconbtn:hover,
html:has(#sk-theme-orange-kiss-v2:checked) .iconbtn:hover {
  background: rgba(0, 0, 0, 0.05);
}
html[data-sk-theme="orange-kiss-v2"] .iconbtn svg,
html:has(#sk-theme-orange-kiss-v2:checked) .iconbtn svg {
  width: 24px; height: 24px;
}

html[data-sk-theme="orange-kiss-v2"] .stage,
html:has(#sk-theme-orange-kiss-v2:checked) .stage {
  flex: 1; position: relative; overflow: hidden; background: var(--sk-bg);
}
html[data-sk-theme="orange-kiss-v2"] .stage[data-bg="branded"],
html:has(#sk-theme-orange-kiss-v2:checked) .stage[data-bg="branded"] {
  background: var(--md-sys-color-primary);
}
html[data-sk-theme="orange-kiss-v2"] .stage[data-bg="branded"] .iconbtn,
html:has(#sk-theme-orange-kiss-v2:checked) .stage[data-bg="branded"] .iconbtn {
  color: var(--md-sys-color-on-primary);
}
html[data-sk-theme="orange-kiss-v2"] .stage[data-bg="quiz"],
html:has(#sk-theme-orange-kiss-v2:checked) .stage[data-bg="quiz"] {
  background: var(--md-sys-color-quiz-container);
}

html[data-sk-theme="orange-kiss-v2"] .slide,
html:has(#sk-theme-orange-kiss-v2:checked) .slide {
  position: absolute; inset: 0;
  padding: var(--sk-sp-5) var(--sk-sp-5) var(--sk-sp-4);
  display: flex; flex-direction: column; gap: var(--sk-sp-3);
  background: var(--sk-bg);
}
html[data-sk-theme="orange-kiss-v2"] .slide[data-bg="branded"],
html:has(#sk-theme-orange-kiss-v2:checked) .slide[data-bg="branded"] {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  text-align: center; justify-content: center;
}
html[data-sk-theme="orange-kiss-v2"] .slide__eyebrow,
html:has(#sk-theme-orange-kiss-v2:checked) .slide__eyebrow {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .08em;
  font-weight: 500; color: var(--md-sys-color-primary); margin: 0;
}
html[data-sk-theme="orange-kiss-v2"] .slide__title,
html:has(#sk-theme-orange-kiss-v2:checked) .slide__title {
  font-size: 1.6rem; font-weight: 700; line-height: 1.15; margin: 0;
}
html[data-sk-theme="orange-kiss-v2"] .slide__body,
html:has(#sk-theme-orange-kiss-v2:checked) .slide__body {
  font-size: 1rem; line-height: 1.45; margin: 0;
  color: var(--md-sys-color-on-surface);
}
html[data-sk-theme="orange-kiss-v2"] .slide[data-bg="branded"] .slide__body,
html:has(#sk-theme-orange-kiss-v2:checked) .slide[data-bg="branded"] .slide__body {
  color: var(--md-sys-color-on-primary); opacity: .9;
}

html[data-sk-theme="orange-kiss-v2"] .options,
html:has(#sk-theme-orange-kiss-v2:checked) .options {
  display: flex; flex-direction: column; gap: var(--sk-sp-3);
}
html[data-sk-theme="orange-kiss-v2"] .option,
html:has(#sk-theme-orange-kiss-v2:checked) .option {
  background: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline);
  color: var(--md-sys-color-on-surface);
  padding: 14px 16px; border-radius: var(--md-shape-lg);
  font-size: 1.0625rem; font-weight: 500; text-align: left; cursor: pointer;
  min-height: var(--sk-touch-min, 48px);
  transition: all var(--sk-dur-fast);
  touch-action: manipulation; /* iOS: kein 300ms Tap-Delay */
}
html[data-sk-theme="orange-kiss-v2"] .option .check,
html:has(#sk-theme-orange-kiss-v2:checked) .option .check {
  float: right; margin-left: var(--sk-sp-3); font-weight: 700;
}

html[data-sk-theme="orange-kiss-v2"] .nav,
html:has(#sk-theme-orange-kiss-v2:checked) .nav {
  flex: 0 0 auto; padding: var(--sk-sp-3) var(--sk-sp-5) var(--sk-sp-5);
  display: flex; align-items: center; justify-content: center;
  gap: var(--sk-sp-4); background: transparent;
}
html[data-sk-theme="orange-kiss-v2"] .navbtn,
html:has(#sk-theme-orange-kiss-v2:checked) .navbtn {
  width: 56px; height: 56px; border-radius: var(--md-shape-full);
  border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
  transition: all var(--sk-dur-fast);
  touch-action: manipulation; /* iOS: kein 300ms Tap-Delay */
}
html[data-sk-theme="orange-kiss-v2"] .navbtn svg,
html:has(#sk-theme-orange-kiss-v2:checked) .navbtn svg {
  width: 24px; height: 24px;
}
html[data-sk-theme="orange-kiss-v2"] .navbtn--forward:hover,
html:has(#sk-theme-orange-kiss-v2:checked) .navbtn--forward:hover {
  background: var(--md-sys-color-secondary); transform: scale(1.04);
}

html[data-sk-theme="orange-kiss-v2"] .cta,
html:has(#sk-theme-orange-kiss-v2:checked) .cta {
  font-family: inherit; font-weight: 500; font-size: 1.0625rem; border: 0;
  cursor: pointer; min-height: var(--sk-touch-min, 48px);
  padding: 12px 24px; border-radius: var(--md-shape-full);
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; transition: all var(--sk-dur-fast);
  touch-action: manipulation; /* iOS: kein 300ms Tap-Delay */
}
html[data-sk-theme="orange-kiss-v2"] .cta--primary,
html:has(#sk-theme-orange-kiss-v2:checked) .cta--primary {
  background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary);
  box-shadow: var(--sk-shadow-1);
}
html[data-sk-theme="orange-kiss-v2"] .cta--secondary,
html:has(#sk-theme-orange-kiss-v2:checked) .cta--secondary {
  background: transparent; color: var(--md-sys-color-primary);
  border: 1px solid var(--md-sys-color-outline);
}
html[data-sk-theme="orange-kiss-v2"] .cta--ghost,
html:has(#sk-theme-orange-kiss-v2:checked) .cta--ghost {
  background: transparent; color: var(--md-sys-color-primary);
}

/* =========================================================================
   GATE — alle v2-spezifischen Verhaltensänderungen unter dem v2-Theme-Selektor
   ========================================================================= */
html[data-sk-theme="orange-kiss-v2"],
html:has(#sk-theme-orange-kiss-v2:checked) {

  /* DCR-0001 — gewählter Icon-Pfad nach Diagnose; sprite-inline | font-material */
  --sk-icon-source: sprite-inline;

  /* DCR-0003 — Swipe-Parameter (gelesen von Pager-JS, nicht direkt CSS) */
  --sk-swipe-threshold-rel: 0.25;
  --sk-swipe-threshold-vel: 600;
  --sk-swipe-resistance:    0.4;
  --sk-swipe-snap-duration: 220ms;

  /* DCR-0004 — TTS Speaker-Cross-Overlay (Aus-Zustand) */
  --sk-tts-cross-color:  var(--md-sys-color-error);
  --sk-tts-cross-stroke: 2px;

  /* DCR-0007 — Topbar/House-Hooks */
  --sk-topbar-overlay-bg-fallback:
    color-mix(in srgb, var(--md-sys-color-surface) 60%, transparent);

  /* DCR-0009 — Ripple */
  --sk-ripple-color:
    color-mix(in srgb, var(--md-sys-color-primary) 32%, transparent);
  --sk-ripple-duration: 180ms;

  /* DCR-0011 — Explainer Tooltip */
  --sk-explainer-backdrop:
    color-mix(in srgb, var(--md-sys-color-scrim, #000) 60%, transparent);
  --sk-explainer-radius: 16px;

  /* DCR-0015 — Button-Design-Rolle "topbar-icon".
     Konsistente State-basierte Farben für House, Speaker, künftige Topbar-Icons.
     Designer kann diese Werte hier ändern; Player-Code referenziert nur die
     Token-Namen.

     State-Sequenz (oben gewinnt):
       1. :disabled  → opacity 0.38
       2. :focus-visible → Focus-Ring (Primary)
       3. .is-warning → Warn-Container + ic-x  (z.B. Speaker.is-off)
       4. .is-state-active / [aria-pressed=true] → Tertiary-Container + Ring  (z.B. Speaker.is-playing)
       5. :active → Active-Tint
       6. :hover → Hover-Tint
       7. default → Surface-Variant
  */
  --sk-btn-topbar-bg:                  var(--md-sys-color-surface-variant);
  --sk-btn-topbar-bg-hover:            var(--md-sys-color-primary-container);
  --sk-btn-topbar-bg-active:           color-mix(in srgb, var(--md-sys-color-primary) 24%, transparent);
  --sk-btn-topbar-bg-state-active:     var(--md-sys-color-tertiary-container);
  --sk-btn-topbar-bg-state-warning:    var(--md-sys-color-warn-container);
  --sk-btn-topbar-ink:                 var(--md-sys-color-on-surface);
  --sk-btn-topbar-ink-hover:           var(--md-sys-color-on-primary-container);
  --sk-btn-topbar-ink-state-active:    var(--md-sys-color-on-tertiary-container);
  --sk-btn-topbar-ink-state-warning:   var(--md-sys-color-on-warn-container);
  --sk-btn-topbar-border-state-active: 2px solid var(--md-sys-color-tertiary);
  --sk-btn-topbar-elevation:           none;
  --sk-btn-topbar-elevation-hover:     var(--md-elevation-1, 0px 1px 3px 1px rgba(0,0,0,0.15));
  --sk-btn-topbar-radius:              999px;

  /* DCR-0017 + Iter-5 (2026-05-27, Mirko): Indicator = zartes Mintgrün
     (tertiary-container, gleich wie Speaker-active-Button), nicht das knallige
     tertiary. Track bleibt dunkel (kontrastiert das zarte Grün). Mintgrüner
     Border am Indicator (gleich wie Speaker-Border) für visuelle Konsistenz
     mit dem aria-pressed=true-Pattern des Speakers. */
  --sk-progress-track-bg:           rgba(0, 0, 0, 0.38);
  --sk-progress-track-border:       rgba(255, 255, 255, 0.40);
  --sk-progress-indicator-min-width:12px;
  --sk-progress-indicator-bg:       var(--md-sys-color-tertiary-container);
  --sk-progress-indicator-border:   var(--md-sys-color-tertiary);
  --sk-progress-height:             12px;
  --sk-progress-radius:             999px;
  --sk-progress-min-width:          80px;
  /* Iter-8 P1.1 (2026-05-27): Retry-Outro-Progress mittel-grau ("traurig"),
     gleiche Helligkeit wie das zarte Mintgrün — jetzt tokenisiert statt
     hardcoded im Player. */
  --sk-progress-indicator-bg-retry:     #CBD5E1; /* slate-300, ~80% Lightness wie tertiary-container */
  --sk-progress-indicator-border-retry: #64748B; /* slate-500 */
  --sk-progress-transition:         width 320ms cubic-bezier(.4, 0, .2, 1);
}

/* =========================================================================
   DCR-0007 — Topbar als Overlay, House links, Speaker rechts, X weg
   Heikos `.topbar` bleibt; v2 fügt `.topbar--v2` als Layout-Mode hinzu.
   ========================================================================= */
html[data-sk-theme="orange-kiss-v2"] .topbar.topbar--v2,
html:has(#sk-theme-orange-kiss-v2:checked) .topbar.topbar--v2 {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 2;
  background: transparent;
  padding-block: 12px;
}
/* compact-Mode: ohne Hero-Bild bekommt die Topbar einen Glas-Fallback,
   damit die Buttons lesbar bleiben */
html[data-sk-theme="orange-kiss-v2"] .frame:not(:has(.slide__hero)) .topbar--v2,
html:has(#sk-theme-orange-kiss-v2:checked) .frame:not(:has(.slide__hero)) .topbar--v2 {
  background: var(--sk-topbar-overlay-bg-fallback);
  -webkit-backdrop-filter: blur(8px); /* iOS Safari */
  backdrop-filter: blur(8px);
}

/* DCR-0007 — Speaker wandert in die Topbar.
   Wir nutzen Heikos `.navbtn--audio`-Styles als Vorlage für die Topbar-Variante,
   bauen sie aber als `.iconbtn iconbtn--audio` (M3 Topbar-Größe 48px). */
html[data-sk-theme="orange-kiss-v2"] .iconbtn--audio,
html:has(#sk-theme-orange-kiss-v2:checked) .iconbtn--audio {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  border-radius: var(--md-shape-full);
}
html[data-sk-theme="orange-kiss-v2"] .iconbtn--audio.is-playing,
html:has(#sk-theme-orange-kiss-v2:checked) .iconbtn--audio.is-playing {
  background: var(--md-sys-color-tertiary-container);
  color: var(--md-sys-color-on-tertiary-container);
  border: 2px solid var(--md-sys-color-tertiary);
}

/* DCR-0004 — Aus-Zustand: diagonale Linie über den Speaker
   (Markup-Konvention: zusätzliches <path class="ic-x"> im SVG-Glyph) */
html[data-sk-theme="orange-kiss-v2"] .iconbtn--audio .ic-x,
html:has(#sk-theme-orange-kiss-v2:checked) .iconbtn--audio .ic-x {
  display: none;
  stroke: var(--sk-tts-cross-color);
  stroke-width: var(--sk-tts-cross-stroke);
}
html[data-sk-theme="orange-kiss-v2"] .iconbtn--audio.is-off .ic-x,
html:has(#sk-theme-orange-kiss-v2:checked) .iconbtn--audio.is-off .ic-x {
  display: inline;
}

/* DCR-0003/0007 — Slide-Padding gegen Topbar-Overlay-Kollision.
   Heikos `.slide` startet bei padding 24px top; mit unserem absolut positionierten
   `.topbar--v2` (64 px hoch, z-index:2) verschwinden Eyebrow/Title hinter den
   Buttons. v2-Default: Inhalt unter die Topbar pushen. */
html[data-sk-theme="orange-kiss-v2"] .frame:has(.topbar--v2) .slide,
html:has(#sk-theme-orange-kiss-v2:checked) .frame:has(.topbar--v2) .slide {
  padding-top: 64px;
}
/* Hero als erstes Kind: full-bleed top, greift unter die Topbar (image overlay,
   DCR-0003 "transparente Buttonbar überlagert das Bild"). */
html[data-sk-theme="orange-kiss-v2"] .frame:has(.topbar--v2) .slide > .slide__hero:first-child,
html:has(#sk-theme-orange-kiss-v2:checked) .frame:has(.topbar--v2) .slide > .slide__hero:first-child {
  margin-top: -64px;
}

/* DCR-0007 ext. (Mirko 2026-05-26): Coursebar wird in v2 zur Chip im Hero,
   positioniert AM UNTEREN RAND des Hero-Bilds. Slide wird Container für
   Container-Queries, damit die Chip-Position sich an die echte Hero-Höhe
   anpasst (Hero = aspect-ratio 16/10, mit -24px horizontalem Bleed).
*/
html[data-sk-theme="orange-kiss-v2"] .frame:has(.topbar--v2) .slide:has(.slide__coursebar),
html:has(#sk-theme-orange-kiss-v2:checked) .frame:has(.topbar--v2) .slide:has(.slide__coursebar) {
  padding-top: 0;
  container-type: inline-size;
}
html[data-sk-theme="orange-kiss-v2"] .frame:has(.topbar--v2) .slide:has(.slide__coursebar) .slide__hero,
html:has(#sk-theme-orange-kiss-v2:checked) .frame:has(.topbar--v2) .slide:has(.slide__coursebar) .slide__hero {
  margin-top: 0;
  position: relative; /* dem Chip eine Bezugsbox geben */
}
html[data-sk-theme="orange-kiss-v2"] .frame:has(.topbar--v2) .slide .slide__coursebar,
html:has(#sk-theme-orange-kiss-v2:checked) .frame:has(.topbar--v2) .slide .slide__coursebar {
  position: absolute;
  /* Hero-Höhe = (slide_content_width + 2*24px Bleed) * 10/16
     Chip an Hero-Unterkante mit 12px Innenabstand: */
  top: calc((100cqi + 48px) * 0.625 - 44px);
  left: 16px;
  margin: 0;
  padding: 6px 12px;
  background: color-mix(in srgb, var(--md-sys-color-surface) 82%, transparent);
  color: var(--md-sys-color-primary);
  border: none;
  border-radius: var(--md-shape-full);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  z-index: 3;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--md-elevation-1);
}

/* DCR-0003 (Mirko 2026-05-26): wenn die v2-Topbar aktiv ist, übernimmt
   das Wischen die Slide-Navigation — die untere Chevron-Bar (.nav.nav--v2)
   wird damit redundant und ausgeblendet. Wer Chevrons explizit zeigen will
   (z.B. Diagnose-Seite diag-blattern), nutzt die Helper-Klasse
   `nav--show-chevrons` als Override. */
html[data-sk-theme="orange-kiss-v2"] .frame:has(.topbar--v2) .nav.nav--v2:not(.nav--show-chevrons),
html:has(#sk-theme-orange-kiss-v2:checked) .frame:has(.topbar--v2) .nav.nav--v2:not(.nav--show-chevrons) {
  display: none;
}

/* DCR-0007 — bewusst entfernte Heiko-Vorgaben (X-Close, Bild-Toggle).
   Scope: NUR innerhalb von Topbars, die das v2-Layout aktiv tragen
   (`.topbar--v2`) — so bleibt Heikos M3-Baseline-Katalog (Sec. 10) im selben
   Dokument unverändert sichtbar, während v2-bestückte Slide-Shells die
   verworfenen Buttons verstecken. */
html[data-sk-theme="orange-kiss-v2"] .topbar.topbar--v2 [aria-label="Schließen"],
html[data-sk-theme="orange-kiss-v2"] .topbar.topbar--v2 [aria-label="Bild ausblenden"],
html[data-sk-theme="orange-kiss-v2"] .topbar.topbar--v2 [aria-label="Bild einblenden"],
html:has(#sk-theme-orange-kiss-v2:checked) .topbar.topbar--v2 [aria-label="Schließen"],
html:has(#sk-theme-orange-kiss-v2:checked) .topbar.topbar--v2 [aria-label="Bild ausblenden"],
html:has(#sk-theme-orange-kiss-v2:checked) .topbar.topbar--v2 [aria-label="Bild einblenden"] {
  display: none !important;
}

/* =========================================================================
   DCR-0002 — Progress: Heikos `.progress > .indicator` 1:1.
   "Slide X von Y"-Text-Zeile entfernt (war Codepfad, nicht Heiko-Vorgabe).
   Abschluss-Seite ohne Bar.
   ========================================================================= */
html[data-sk-theme="orange-kiss-v2"] [data-sk="progress-label"],
html:has(#sk-theme-orange-kiss-v2:checked) [data-sk="progress-label"] {
  display: none !important;
}
html[data-sk-theme="orange-kiss-v2"] .slide[data-kind="outro"] ~ .topbar .progress,
html[data-sk-theme="orange-kiss-v2"] .frame:has(.slide[data-kind="outro"]) .progress,
html:has(#sk-theme-orange-kiss-v2:checked) .frame:has(.slide[data-kind="outro"]) .progress {
  visibility: hidden;
}

/* =========================================================================
   DCR-0003 — Slide-Shell: Heikos `.stage` ist bereits `overflow:hidden`;
   v2 garantiert zusätzlich, dass `.slide` nicht scrollbar wird.
   Heikos `.nav` bekommt die v2-Reduktion (nur back/forward — Audio in Topbar).
   ========================================================================= */
html[data-sk-theme="orange-kiss-v2"] .slide,
html:has(#sk-theme-orange-kiss-v2:checked) .slide {
  overflow: hidden;
  overscroll-behavior: contain;
}
html[data-sk-theme="orange-kiss-v2"] .nav.nav--v2 .navbtn--audio,
html:has(#sk-theme-orange-kiss-v2:checked) .nav.nav--v2 .navbtn--audio {
  display: none; /* Audio lebt jetzt in der Topbar, DCR-0007 */
}

/* =========================================================================
   DCR-0005 — Variant-Switch defensiv entfernen (war kein Heiko-Vorgaben-Element)
   DCR-0006 — Hero/Bild-Toggle (Heiko-Vorgabe!) bewusst entfernt — s. DCR-0006.
   ========================================================================= */
html[data-sk-theme="orange-kiss-v2"] [data-sk="variant-switch"],
html[data-sk-theme="orange-kiss-v2"] sk-variant-switch,
html:has(#sk-theme-orange-kiss-v2:checked) [data-sk="variant-switch"],
html:has(#sk-theme-orange-kiss-v2:checked) sk-variant-switch {
  display: none !important;
}
html[data-sk-theme="orange-kiss-v2"] .ds-toggle:has(#dsHero),
html:has(#sk-theme-orange-kiss-v2:checked) .ds-toggle:has(#dsHero) {
  display: none !important;
}

/* =========================================================================
   DCR-0009 — Quiz-Option Ripple in der Option gekapselt
   Heikos `.option` ist `position: relative` über `cursor:pointer` —
   wir fügen `isolation: isolate` und einen ::after-Ripple hinzu.
   ========================================================================= */
html[data-sk-theme="orange-kiss-v2"] .option,
html:has(#sk-theme-orange-kiss-v2:checked) .option {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
html[data-sk-theme="orange-kiss-v2"] .option::after,
html:has(#sk-theme-orange-kiss-v2:checked) .option::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--sk-ripple-x, 50%) var(--sk-ripple-y, 50%),
              var(--sk-ripple-color) 0%, transparent 60%);
  opacity: 0;
  transition: opacity var(--sk-ripple-duration) ease-out;
  pointer-events: none;
  z-index: 0;
}
html[data-sk-theme="orange-kiss-v2"] .option:active::after,
html:has(#sk-theme-orange-kiss-v2:checked) .option:active::after {
  opacity: 1;
  transition: none;
}
/* Stage isolation, damit Ripple nicht aus Nachbar-Slides "durchblutet" */
html[data-sk-theme="orange-kiss-v2"] .stage,
html:has(#sk-theme-orange-kiss-v2:checked) .stage {
  isolation: isolate;
}

/* =========================================================================
   DCR-0010 / DCR-0011 — Quiz-Logik: (i)-Symbol bei falscher Antwort
   Heikos `.option.is-wrong` bekommt zusätzlichen Info-Slot.
   Erklärung wird über `.sk-explainer` (Tooltip-Modal) gerendert.
   ========================================================================= */
html[data-sk-theme="orange-kiss-v2"] .option.is-wrong .sk-info-hint,
html:has(#sk-theme-orange-kiss-v2:checked) .option.is-wrong .sk-info-hint {
  display: inline-flex;
  margin-left: 8px;
  width: 20px; height: 20px;
  align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--md-sys-color-error);
  color: var(--md-sys-color-on-error);
  font-weight: 700;
  font-size: 12px;
}
html[data-sk-theme="orange-kiss-v2"] .sk-explainer,
html:has(#sk-theme-orange-kiss-v2:checked) .sk-explainer {
  position: fixed; inset: 0;
  background: var(--sk-explainer-backdrop);
  display: none; align-items: center; justify-content: center;
  z-index: 50;
}
html[data-sk-theme="orange-kiss-v2"] .sk-explainer[open],
html:has(#sk-theme-orange-kiss-v2:checked) .sk-explainer[open] {
  display: flex;
}
html[data-sk-theme="orange-kiss-v2"] .sk-explainer__card,
html:has(#sk-theme-orange-kiss-v2:checked) .sk-explainer__card {
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  border-radius: var(--sk-explainer-radius);
  box-shadow: var(--sk-shadow-3);
  padding: 16px 20px;
  max-width: min(420px, calc(100% - 32px));
}

/* FR-140 C9 — iOS zoomt beim Fokus in Formularfelder mit font-size < 16px rein.
   Touch-scoped: hebt Formular-Controls auf Touch-Geräten (iOS UND Android) auf
   >= 16px; Desktop bleibt unberührt. So bleibt iOS == Android konsistent. */
@media (pointer: coarse) {
  input, textarea, select { font-size: 16px; }
}