/* vorleser.css — Karte, untere Leiste und Markierung (Auftrag P1; P2: Balken zum Ziehen, ±15 s, Leiste zweizeilig;
 * V12: „Mitlesen“ statt „Stelle zeigen“, in Karte und Leiste; V13: Kai aus Ebenen – Grundbild, Ring, Gesicht).
 * Nur geladen, wenn der Player aktiv ist. Farben aus dem Theme (--surface, --ink, --muted, --line, --heading);
 * Abspielknopf und Balkenknopf fest #8dc65e / #1b2612.
 * Hell/Dunkel folgt NUR [data-theme] der Seite (Lampen-Schalter), nicht dem Gerät (Entscheidung Christian, P2). */
.kai-karte{
  --kai-gruen:#8dc65e; --kai-symbol:#1b2612; --kai-mark:rgba(141,198,94,.20); --kai-schein:141,198,94;
  position:relative; display:grid; grid-template-columns:64px 52px minmax(0,1fr) auto;
  grid-template-areas:"figur play text tempo" "figur spur spur spur" "figur unten unten unten";
  align-items:center; column-gap:12px; row-gap:2px;
  margin:0 0 24px; padding:12px 14px 10px 10px;
  background:var(--surface,#fffdf9); color:var(--ink,#2a2118);
  border:1px solid var(--line,#e4d6c2); border-radius:var(--radius,14px);
  box-shadow:var(--shadow,0 10px 24px -16px rgba(70,50,30,.28));
  font-family:var(--font-body,system-ui,sans-serif); line-height:1.3; box-sizing:border-box; max-width:100%;
}
.kai-karte button{font:inherit; color:inherit; -webkit-tap-highlight-color:transparent}
/* Theme: .prose img bekommt Rahmen und Rundung; Kai steht frei */
.kai-karte img,.kai-leiste img{border:0!important; border-radius:0!important; background:none!important; max-width:none; box-shadow:none}
.kai-figur{
  grid-area:figur; position:relative; width:64px; height:100px; padding:0; margin:0;
  background:none; border:0; border-radius:16px; cursor:pointer; align-self:center;
}
.kai-bild{
  position:relative; z-index:1; display:block; width:58px; height:88px; margin:6px auto;
  animation:kai-schweben 3.4s ease-in-out infinite; will-change:transform;
}
/* V13: Ebenen übereinander, alle im Zuschnitt des Grundbilds (121 x 184 = doppelte Auflösung) */
.kai-huepf{position:absolute; left:0; top:0; width:100%; height:100%; display:block}
.kai-karte .kai-huepf img,.kai-leiste .kai-huepf img{position:absolute; left:0; top:0; width:100%; height:100%; display:block; margin:0}
.kai-gesicht{opacity:0; transform-origin:50% 33.96%}          /* Augenlinie (v 0,475 im Display) */
.kai-gesicht.kai-an{opacity:1}
.kai-ring{opacity:0; transition:opacity .33s ease}            /* Ringwechsel weich wie im Drehbuch (10 Bilder) */
.kai-ring.kai-an{opacity:1}
.kai-schein{
  position:absolute; left:-6px; right:-6px; top:4px; bottom:4px; border-radius:50%;
  background:radial-gradient(circle,rgba(var(--kai-schein),.65) 0,rgba(var(--kai-schein),.22) 45%,rgba(var(--kai-schein),0) 70%);
  opacity:0; transition:opacity .4s ease;
}
.kai-spricht .kai-schein{opacity:1; animation:kai-leuchten 2.2s ease-in-out infinite}
@keyframes kai-schweben{0%,100%{transform:translateY(2px)}50%{transform:translateY(-4px)}}
@keyframes kai-leuchten{0%,100%{opacity:.55}50%{opacity:1}}

.kai-play{
  grid-area:play; width:52px; height:52px; border-radius:50%; border:0; padding:0; cursor:pointer;
  background:var(--kai-gruen); color:var(--kai-symbol); display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px -4px rgba(60,110,30,.55);
}
.kai-play svg,.kai-l-play svg{width:24px; height:24px; fill:currentColor}
/* Symbolfarbe fest (#1b2612): ".kai-karte button{color:inherit}" wäre sonst stärker (P1: im Dunkeln helles Symbol) */
.kai-karte .kai-play,.kai-leiste .kai-l-play{color:var(--kai-symbol)}
.kai-laedt .kai-play{animation:kai-leuchten 1s ease-in-out infinite}
.kai-text{grid-area:text; display:flex; flex-direction:column; min-width:0}
.kai-haupt{font-weight:600; color:var(--heading,#211a12); font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.kai-neben{font-size:13.5px; color:var(--muted,#6e6253)}
.kai-tempo,.kai-l-tempo{
  grid-area:tempo; min-width:44px; height:44px; padding:0 8px; border-radius:22px; cursor:pointer;
  background:transparent; border:1px solid var(--line,#e4d6c2); font-size:14px; font-weight:600;
}
/* Balken zum Ziehen: Tippfläche 44 px hoch, sichtbare Bahn 6 px, runder Knopf 18 px.
 * touch-action pan-y: senkrechtes Wischen scrollt die Seite weiter, waagrechtes Ziehen spult (vorleser.js). */
.kai-spur{
  position:relative; height:44px; cursor:pointer; touch-action:pan-y; outline:none; box-sizing:border-box;
  -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent;
}
.kai-karte .kai-spur{grid-area:spur}
.kai-spur-bahn{
  position:absolute; left:9px; right:9px; top:50%; height:6px; margin-top:-3px; border-radius:3px;
  background:var(--kai-bahn,#e4d6c2);
}
.kai-spur-fuell{position:absolute; left:0; top:0; bottom:0; width:0; border-radius:3px; background:var(--kai-gruen)}
.kai-spur-knopf{
  position:absolute; left:0; top:50%; width:18px; height:18px; margin:-9px 0 0 -9px; border-radius:50%;
  background:var(--kai-gruen); box-shadow:0 1px 4px rgba(0,0,0,.35); transition:transform .12s ease;
}
.kai-zieht .kai-spur-knopf{transform:scale(1.3)}
.kai-spur:focus-visible .kai-spur-bahn{outline:2px solid var(--kai-gruen); outline-offset:6px}
.kai-unten{
  grid-area:unten; display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-size:12.5px; color:var(--muted,#6e6253); font-variant-numeric:tabular-nums;
}
.kai-sprungpaar{display:flex; gap:14px}
.kai-sprung{
  flex:0 0 auto; width:44px; height:44px; border-radius:50%; border:0; padding:0; cursor:pointer;
  background:transparent; color:var(--heading,#211a12); display:flex; align-items:center; justify-content:center;
}
.kai-sprung svg{width:28px; height:28px; fill:currentColor; overflow:visible}
.kai-sprung text{font-size:7.4px; font-weight:700; font-family:var(--font-body,system-ui,sans-serif)}
.kai-sprung:active{background:var(--line-soft,#eee6d8)}

.kai-blase{
  position:absolute; left:10px; bottom:calc(100% + 10px); z-index:5; max-width:min(280px,calc(100% - 20px));
  padding:10px 14px; border-radius:14px; background:var(--heading,#211a12); color:var(--bg,#fbf7f1);
  font-size:14.5px; line-height:1.35; box-shadow:0 10px 24px -10px rgba(0,0,0,.45);
  opacity:0; transform:translateY(6px); transition:opacity .25s ease,transform .25s ease; pointer-events:none;
}
.kai-blase::after{content:""; position:absolute; left:28px; top:100%; border:8px solid transparent; border-top-color:var(--heading,#211a12)}
.kai-blase-an .kai-blase{opacity:1; transform:none}

/* Markierung des Absatzes, aus dem Kai gerade liest */
.kai-stelle{
  background:rgba(141,198,94,.20)!important; box-shadow:0 0 0 6px rgba(141,198,94,.20);
  border-radius:6px; transition:background-color .3s ease,box-shadow .3s ease;
}
/* V16: loser Text (Absätze ohne <p>) liegt in einem inline-span: Ecken und Schein an jedem Zeilenstück */
.kai-lose.kai-stelle{-webkit-box-decoration-break:clone; box-decoration-break:clone}
/* V16: Absatz fehlt auf der Seite: Kai liest ungefähr hier, der nächste gefundene Absatz ist nur gestrichelt umrandet */
.kai-stelle.kai-ungefaehr{background:transparent!important; box-shadow:none; outline:2px dashed #6f9f45; outline-offset:4px}

/* Mitlesen (V12): Umschalter, aus = Umriss, an = grün gefüllt (aria-pressed); vor dem ersten Abspielen gesperrt */
.kai-karte .kai-mit,.kai-leiste .kai-mit{
  flex:0 0 auto; height:44px; padding:0 12px; border-radius:22px; cursor:pointer; font-size:13.5px; font-weight:600;
  background:transparent; border:1px solid var(--line,#e4d6c2); line-height:1; white-space:nowrap;
}
.kai-karte .kai-mit.kai-an,.kai-leiste .kai-mit.kai-an{background:var(--kai-gruen); border-color:var(--kai-gruen); color:var(--kai-symbol)}
.kai-mit:disabled{opacity:.45; cursor:default}
.kai-mit:focus-visible{outline:2px solid var(--kai-gruen); outline-offset:2px}
.kai-unten .kai-mit{margin-left:auto}
/* Karte: Mitlesen erst ab 400 px (gemessen V12: bei 360 px ragt die Zeile 29 px hinaus, bei 390 px bleibt 0 px Rest),
 * darunter nur in der unteren Leiste */
@media (max-width:399px){ .kai-karte .kai-k-mit{display:none} }

/* untere Leiste, zwei Zeilen: Zeit | Balken | Gesamtzeit — Kai, -15, Abspielen, +15, Tempo, Mitlesen */
.kai-leiste{
  --kai-gruen:#8dc65e; --kai-symbol:#1b2612; --kai-schein:141,198,94;
  position:fixed; left:0; right:0; bottom:0; z-index:9990; box-sizing:border-box;
  display:flex; flex-direction:column; padding:0 12px calc(6px + env(safe-area-inset-bottom,0px));
  background:var(--surface,#fffdf9); color:var(--ink,#2a2118); border-top:1px solid var(--line,#e4d6c2);
  box-shadow:0 -8px 22px -14px rgba(0,0,0,.35); font-family:var(--font-body,system-ui,sans-serif);
}
.kai-leiste[hidden]{display:none}
.kai-leiste button{font:inherit; color:inherit; -webkit-tap-highlight-color:transparent}
.kai-l-reihe{display:flex; align-items:center; gap:8px; min-width:0}
.kai-l-oben .kai-spur{flex:1 1 auto; min-width:0}
.kai-l-ist,.kai-l-gesamt{flex:0 0 auto; min-width:36px; font-size:12.5px; color:var(--muted,#6e6253); font-variant-numeric:tabular-nums}
.kai-l-gesamt{text-align:right}
.kai-l-figur{position:relative; width:26px; height:40px; flex:0 0 auto}
.kai-l-figur .kai-bild{width:100%; height:100%; margin:0; animation:none}
.kai-spricht .kai-l-figur{filter:drop-shadow(0 0 5px rgba(var(--kai-schein),.8))}
.kai-l-play{
  flex:0 0 auto; width:44px; height:44px; border-radius:50%; border:0; padding:0; cursor:pointer;
  background:var(--kai-gruen); color:var(--kai-symbol); display:flex; align-items:center; justify-content:center;
}
.kai-l-tempo{flex:0 0 auto; margin-left:auto}
html.kai-leiste-offen body{padding-bottom:var(--kai-leiste-h,104px)}

@media (max-width:420px){
  .kai-karte{grid-template-columns:56px 48px minmax(0,1fr) auto; column-gap:10px; padding:10px 10px 8px 6px}
  .kai-figur{width:56px; height:92px} .kai-figur .kai-bild{width:53px; height:80px}
  .kai-play{width:48px; height:48px}
  .kai-haupt{font-size:15px} .kai-neben{font-size:13px}
  .kai-leiste{padding-left:8px; padding-right:8px}
  .kai-l-reihe{gap:6px}
  .kai-sprungpaar{gap:10px}
  .kai-l-figur{width:23px; height:36px}
  .kai-karte .kai-mit,.kai-leiste .kai-mit{padding:0 10px; font-size:13px}
}
@media (max-width:340px){ .kai-l-figur{display:none} }
/* Rechner: Leiste nicht über die ganze Breite, mittig wie eine Abspielleiste */
@media (min-width:900px){
  .kai-leiste{left:50%; right:auto; width:720px; transform:translateX(-50%); border:1px solid var(--line,#e4d6c2); border-bottom:0; border-radius:14px 14px 0 0; overflow:hidden}
}

/* Dunkel: nur über den Lampen-Schalter der Seite ([data-theme=dark]); die Theme-Farben wechseln mit */
[data-theme=dark] .kai-karte,[data-theme=dark] .kai-leiste{--kai-bahn:#4d3f2f}
[data-theme=dark] .kai-stelle{background:rgba(141,198,94,.16)!important; box-shadow:0 0 0 6px rgba(141,198,94,.16)}
[data-theme=dark] .kai-stelle.kai-ungefaehr{background:transparent!important; box-shadow:none; outline-color:#8dc65e}
[data-theme=dark] .kai-blase{background:#f7f1e7; color:#20160e}
[data-theme=dark] .kai-blase::after{border-top-color:#f7f1e7}

/* Bewegung reduzieren: keine Animation, nur ruhiges Leuchten beim Sprechen */
@media (prefers-reduced-motion:reduce){
  .kai-bild,.kai-spricht .kai-schein,.kai-laedt .kai-play{animation:none}
  .kai-ring{transition:none}
  .kai-blase,.kai-stelle,.kai-schein,.kai-spur-knopf{transition:none}
  .kai-blase{transform:none}
}