/* DK 11.10. Kapitel-Anzeige (Standard, html.kap).
   Quelle: team_hub/kapitel.css, eingebunden von team_hub.py. */

/* ---------- Anzeige im Kopf (Handy: rechte, bisher leere Hälfte · Desktop: zwischen Logo und Menü) ---------- */
html.kap .kap{position:relative;display:flex;align-items:center;margin-left:auto;min-width:0;}
html.kap .site-header .wrap{display:flex;align-items:center;}
html.kap .kap-btn{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:9px;min-height:44px;max-width:100%;padding:4px 6px 4px 4px;border-radius:10px;cursor:pointer;color:#f4f1e8;-webkit-tap-highlight-color:transparent;}
html.kap .kap-btn:focus-visible{outline:3px solid var(--sg-yellow,#dec87d);outline-offset:2px;}
html.kap .kap-seg{position:relative;flex:none;display:grid;place-items:center;min-width:46px;height:34px;padding:0 7px;border-radius:7px;
  background:linear-gradient(180deg,#2e2c26,#1f1e1a);box-shadow:inset 0 0 0 1px #4a4538,inset 0 2px 6px rgba(0,0,0,.45);
  font:400 21px/1 "R45 Seg",monospace;letter-spacing:.04em;color:var(--h-neon,#ffd66b);text-shadow:var(--h-glow,0 0 8px rgba(255,200,80,.45));}
/* unbeleuchtete Segmente wie auf der Hallentafel */
html.kap .kap-seg::before{content:"88";position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,214,107,.07);text-shadow:none;pointer-events:none;}
html.kap .kap-seg b{position:relative;font:inherit;}
html.kap .kap-txt{display:grid;min-width:0;line-height:1.15;text-align:left;}
html.kap .kap-txt small{white-space:nowrap;font:700 10px/1.2 Archivo,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#a9a391;}
html.kap .kap-txt strong{font:750 14px/1.2 Archivo,system-ui,sans-serif;color:#f4f1e8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
html.kap .kap-ico{flex:none;width:16px;height:16px;color:#a9a391;}
html.kap .kap-btn[aria-expanded="true"] .kap-ico{transform:rotate(180deg);}

/* ---------- Kapitelliste ---------- */
html.kap .kap-list{position:absolute;top:calc(100% + 10px);right:0;z-index:90;width:min(300px,calc(100vw - 24px));margin:0;padding:8px;list-style:none;
  border-radius:14px;background:rgba(36,34,30,.98);box-shadow:0 18px 40px rgba(0,0,0,.45),inset 0 0 0 1px rgba(222,200,125,.22);}
html.kap .kap-list[hidden]{display:none;}
html.kap .kap-list a{display:flex;align-items:center;gap:12px;min-height:46px;padding:5px 10px 5px 6px;border-radius:10px;color:#e9e4d4;text-decoration:none;font:650 15px/1.25 Archivo,system-ui,sans-serif;}
html.kap .kap-list a:hover{background:rgba(255,255,255,.05);}
html.kap .kap-list a:focus-visible{outline:3px solid var(--sg-yellow,#dec87d);outline-offset:-3px;}
html.kap .kap-list a .kap-seg{min-width:38px;height:30px;font-size:17px;}
html.kap .kap-list a[aria-current="true"]{background:rgba(222,200,125,.12);color:#fff;}
html.kap .kap-list a:not([aria-current="true"]) .kap-seg{color:#8d8670;text-shadow:none;}

/* ---------- Handy-Kopf ---------- */
html.kap .site-header .kap{margin-right:-6px;}
html.kap .site-header .kap-btn{gap:6px;padding-right:2px;}
html.kap .site-header .kap-ico{display:none;}
html.kap .site-header .kap-l{display:none;}
html.kap .site-header .kap-txt small{white-space:nowrap;}
html.kap .site-header .kap-txt strong{font-size:12.5px;width:100px;max-width:100px;}   /* DK 11.10.: feste Breite – Zähltafel steht auf allen Seiten an derselben Stelle, lange Namen werden kleiner */
@media (max-width:380px){html.kap .site-header .kap-txt strong{font-size:12px;width:92px;max-width:92px;}html.kap .site-header .kap{flex:0 1 auto;min-width:0;}}
html.kap .site-header .kap-list{right:-6px;}
@media (max-width:359px){html.kap .site-header .kap-txt{display:none;}html.kap .site-header .kap-ico{display:block;}}

/* ---------- Desktop-Leiste ---------- */
html.kap .th-bar .kap{margin:0 auto 0 28px;padding-left:22px;border-left:1px solid rgba(244,241,232,.12);}
html.kap .th-bar .kap-list{left:22px;right:auto;}
html.kap .th-bar .kap.is-tight .kap-txt{display:none;}

/* ---------- Abschnittsköpfe: Nummer als Segmentkachel, auf Handy und Desktop gleich ---------- */
html.kap .kap-kick{display:flex !important;align-items:center;gap:12px;}
html.kap .kap-kick .kap-seg{order:-1;min-width:42px;height:30px;font-size:17px;}
html.kap .kap-h2{display:flex;align-items:center;gap:14px;}
html.kap .kap-h2 > .kap-seg{min-width:50px;height:38px;font-size:22px;}

@media (prefers-reduced-motion:no-preference){html.kap .kap-ico{transition:transform .2s ease;}}
@media print{html.kap .kap{display:none;}}


/* ===================== DK 11.10.: Bewegung der Kapitel: Zähltafel (kfx1), Unterstrich (kfx3), Kapitelbalken (kfx4) =====================
   Regeln: Schrift selbst bewegt/skaliert/verschwimmt nie; nur Licht (Farbe/Leuchten), Masken und Linien. Einmal pro Kapitelwechsel,
   keine Daueranimation; bei „weniger Bewegung“ alles ruhig. */

/* 1 · Zähltafel (DK 11.10.): Klappblätter wie auf der Spiele-Seite. Abschnitt: von leer auf die Nummer; Kopf: blättert aufs neue Kapitel */
html.kfx1 .kap-flap{flex:none;display:inline-flex;gap:2px;padding:3px;border-radius:6px;background:#1c1b17;box-shadow:inset 0 0 0 1px #4a4538,0 1px 0 rgba(0,0,0,.5);}
html.kfx1 .kf{position:relative;display:block;width:18px;height:28px;perspective:120px;font:800 19px/1 Archivo,Arial,sans-serif;color:#f1ede2;}
html.kfx1 .kf > i{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;border-radius:3px;
  background:linear-gradient(180deg,#46443c 0 49.5%,#3b3932 50.5%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.035);backface-visibility:hidden;}
html.kfx1 .kf-t,html.kfx1 .kf-ft{clip-path:inset(0 0 50% 0);}
html.kfx1 .kf-b,html.kfx1 .kf-fb{clip-path:inset(50% 0 0 0);}
/* Scharnier */
html.kfx1 .kf::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;margin-top:-.5px;background:#191814;z-index:3;}
html.kfx1 .kf-ft{z-index:2;transform-origin:50% 50%;animation:kfTop .21s cubic-bezier(.55,0,.9,.5) both;}
html.kfx1 .kf-fb{z-index:2;transform-origin:50% 50%;transform:rotateX(90deg);animation:kfBot .21s cubic-bezier(.1,.5,.45,1) .2s both;}
@keyframes kfTop{from{transform:rotateX(0)}to{transform:rotateX(-90deg);filter:brightness(.55)}}
@keyframes kfBot{from{transform:rotateX(90deg);filter:brightness(1.35)}to{transform:rotateX(0)}}
/* Größen: Kopf, Abschnitt, Liste */
html.kfx1 .kap-btn > .kap-flap .kf{width:17px;height:28px;font-size:18px;}
html.kfx1 .kap-kick .kap-flap{order:-1;}
html.kfx1 .kap-kick .kf{width:17px;height:27px;font-size:18px;}
html.kfx1 .kap-h2 > .kap-flap .kf{width:21px;height:33px;font-size:22px;}
html.kfx1 .kap-list .kap-flap{padding:2px;}
html.kfx1 .kap-list .kf{width:14px;height:22px;font-size:14.5px;}
html.kfx1 .kap-list a:not([aria-current="true"]) .kf{color:#a49d88;}
html.kfx1 .kap-list a[aria-current="true"] .kap-flap{box-shadow:inset 0 0 0 1px rgba(222,200,125,.55);}
html.kfx1 .site-header .kap-btn > .kap-flap .kf{width:15px;height:26px;font-size:16.5px;}

/* 3 · Tischkante (DK 11.10.): beim Erreichen des Kapitels zieht sich unter der Überschrift ein Unterstrich über die ganze Bildbreite */
html.kfx3 .kap-ul{position:relative;padding-bottom:16px;}
html.kfx3 .kap-ul::after{content:"";position:absolute;left:calc(var(--kx,0) * -1px);width:calc(var(--kw,0) * 1px);bottom:0;height:2px;pointer-events:none;
  background:linear-gradient(90deg,rgba(222,200,125,.15),var(--sg-yellow,#dec87d) 18%,var(--sg-yellow,#dec87d) 82%,rgba(222,200,125,.15));
  transform:scaleX(var(--ks,0));transform-origin:0 50%;}
/* Länge setzt kapitel.js je Scrollposition (nur aktives Kapitel ganz); der kurze Übergang glättet nur die Scrollschritte */
@media (prefers-reduced-motion:no-preference){html.kfx3.kap-fxt .kap-ul::after{transition:transform .25s linear;}}
html.kfx3 main section[id]:has(.kap-ul){overflow-x:clip;}

/* 4 · Kapitelbalken unter der Leiste: ein Feld pro Kapitel, springt von Feld zu Feld */
html.kfx4 .kap-prog{position:absolute;left:12px;right:12px;bottom:0;height:3px;display:flex;gap:4px;pointer-events:none;z-index:2;}
html.kfx4 .kap-prog i{flex:1;border-radius:2px 2px 0 0;background:rgba(244,241,232,.1);}
html.kfx4 .kap-prog i.is-on{background:var(--sg-yellow,#dec87d);}
@keyframes kapCell{0%{background:#fff8dc;box-shadow:0 0 10px 1px rgba(255,214,107,.85)}100%{background:var(--sg-yellow,#dec87d);box-shadow:0 0 0 0 rgba(255,214,107,0)}}
html.kfx4 .kap-prog i.is-new{animation:kapCell .7s ease-out both;}
html.kfx4.d62 .site-header .kap-prog{display:none;}
html.kfx4:not(.d62) .th-bar .kap-prog{display:none;}

/* weniger Bewegung: Zustände ja, Animationen nein */
@media (prefers-reduced-motion:reduce){
  html[class*="kfx"] .kf-ft,html[class*="kfx"] .kf-fb,
  html[class*="kfx"] .is-new{animation:none !important;}
}

/* 5 · Fokus (DK 11.10.): nur das aktive Kapitel ist scharf, die anderen leicht unscharf. Oben (vor Kapitel 1) und am Seitenende alles scharf.
   Tastaturfokus in einem anderen Kapitel macht es sofort scharf. */
/* Stärke je Scrollposition setzt kapitel.js (oben höchstens blur .88px, unten ~.09px); der kurze Übergang glättet nur die Scrollschritte */
html.kfx5 .kap-sec:focus-within{filter:none !important;opacity:1 !important;}
@media (prefers-reduced-motion:no-preference){html.kfx5.kap-fxt .kap-sec{transition:filter .25s linear,opacity .25s linear;}}
@media print{html.kfx5 .kap-sec{filter:none !important;opacity:1 !important;}}