/* Seite „Einrichtung & Bedienung“ (/einrichtung) — Video-Anleitung. Baut auf site.css/start.css auf (Obsidian-Gestaltung: Graphit/Navy, Champagnergold als Licht).
   Kein Inline-Code (strikte CSP), keine Animationen: das Video startet nie von selbst. */

[hidden]{display:none!important}

.ein-kopf{padding-block:clamp(4.5rem,9vw,7.5rem) clamp(1.8rem,3.5vw,3rem)}
.ein-kopf .titel{margin-top:1.4rem;max-width:17em}
.ein-kopf .lead{margin-top:1.6rem}
.ein-test{margin:1.6rem 0 0;max-width:46em;padding:.9rem 1.2rem;border:1px solid var(--linie-2);border-left:2px solid var(--gold);background:var(--f1);color:var(--text-2);font-size:.95rem;line-height:1.55}
.ein-test strong{color:var(--text);font-weight:600}

/* Video */
.ein-videobereich{padding-bottom:clamp(3rem,6vw,5rem)}
.ein-figur{margin:0}
.ein-rahmen{position:relative;border:1px solid var(--linie-3);background:#000;box-shadow:0 34px 90px -34px rgba(0,0,0,.85),0 0 0 1px rgba(233,194,116,.08)}
.ein-rahmen video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#000}
/* Untertitel: dunkler Grund, helle Schrift, etwas kleiner als der Browser-Standard (die Szenen tragen schon große Schrift) */
.ein-rahmen video::cue{background:rgba(6,8,12,.86);color:#fff;font-family:var(--fliess);font-size:82%;line-height:1.35}
.ein-figur figcaption{margin-top:.8rem}
.ein-werkzeuge{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1rem;margin-top:1.2rem}
.ein-link{display:flex;flex:1 1 24rem;min-width:0;gap:.6rem}
.ein-link input{flex:1 1 auto;min-width:0;min-height:46px;padding:0 .95rem;border:1px solid var(--linie-3);border-radius:2px;background:var(--f1);color:var(--text);font:500 .9rem/1 var(--mono);letter-spacing:.02em}
.ein-link input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.ein-status{min-height:1.6em;margin-top:.7rem;color:var(--gold-hell)}

.ein-kapitel-box{margin-top:clamp(1.6rem,3vw,2.4rem)}
.ein-klein-titel{font:500 .72rem/1.3 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 1rem}
.ein-kapitel{display:grid;grid-template-columns:repeat(auto-fill,minmax(14.5rem,1fr));gap:.5rem}
.ein-kapitel button{display:flex;align-items:baseline;gap:.8rem;width:100%;min-height:46px;padding:.6rem .95rem;text-align:left;border:1px solid var(--linie-2);border-radius:2px;background:var(--f1);color:var(--text-2);cursor:pointer;font:500 .95rem/1.25 var(--fliess);transition:border-color var(--t-schnell),background var(--t-schnell),color var(--t-schnell)}
.ein-kapitel button:hover{border-color:var(--gold);color:var(--text);background:rgba(233,194,116,.06)}
.ein-kapitel button[aria-current="true"]{border-color:var(--gold);color:var(--gold-hell);background:rgba(233,194,116,.1)}
.zeit{font:500 .78rem/1 var(--mono);letter-spacing:.08em;color:var(--gold);font-variant-numeric:tabular-nums}

/* Schriftliche Anleitung */
.ein-text{padding-top:clamp(2.5rem,5vw,4rem)}
.ein-spalten{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(2.5rem,6vw,6rem);align-items:start}
.ein-h2{margin-top:1.2rem;font-weight:300;font-size:clamp(1.9rem,3.6vw,3.1rem);line-height:1.02;letter-spacing:-.035em}
.ein-einleitung{margin-top:1.1rem;max-width:36em;color:var(--text-2)}
.ein-schritte{margin-top:2rem;padding:0;list-style:none;counter-reset:es;border-top:1px solid var(--linie-2)}
.ein-schritte li{position:relative;counter-increment:es;padding:1.15rem 0 1.15rem 3.6rem;border-bottom:1px solid var(--linie);color:var(--text-2);line-height:1.55}
.ein-schritte li::before{content:counter(es,decimal-leading-zero);position:absolute;left:0;top:1.35rem;font:500 .78rem/1 var(--mono);letter-spacing:.14em;color:var(--gold)}
.ein-schritte b{color:var(--text);font-weight:600}
.ein-liste{margin-top:1.8rem;padding:0;list-style:none;border-top:1px solid var(--linie-2)}
.ein-liste li{padding:1rem 0;border-bottom:1px solid var(--linie);color:var(--text-2);line-height:1.55}
.ein-liste b{color:var(--text);font-weight:600}
.ein-hinweis{margin:1.6rem 0 0;padding:1rem 1.2rem;border:1px solid var(--linie-2);border-left:2px solid var(--gold);background:var(--f1);color:var(--text-2);font-size:.95rem;line-height:1.55}
.ein-hinweis strong{color:var(--text);font-weight:600}

/* Begriffe */
.ein-begriffe{padding-block:clamp(3.5rem,7vw,6rem)}
.ein-dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:0;margin:2rem 0 0;border-top:1px solid var(--linie-2)}
.ein-dl>div{padding:1.1rem 1.4rem 1.1rem 0;border-bottom:1px solid var(--linie)}
.ein-dl dt{font:600 1rem/1.3 var(--fliess);color:var(--text)}
.ein-dl dd{margin:.35rem 0 0;color:var(--text-2);font-size:.95rem;line-height:1.55}

.ein-text-fassung{margin-top:clamp(2rem,4vw,3rem);border:1px solid var(--linie-2);background:var(--grund)}
.ein-text-fassung summary{display:flex;align-items:center;min-height:52px;padding:.7rem 1.2rem;cursor:pointer;font-weight:600;color:var(--text)}
.ein-text-fassung summary:hover{color:var(--gold-hell)}
.ein-transkript{margin:0;padding:.4rem 1.2rem 1.2rem;list-style:none;border-top:1px solid var(--linie)}
.ein-transkript li{display:grid;grid-template-columns:3.6rem minmax(0,1fr);gap:.8rem;padding:.55rem 0;color:var(--text-2);line-height:1.5}
.ein-schluss{margin-top:clamp(1.8rem,3.5vw,2.6rem);max-width:46em;color:var(--text-2);font-size:.95rem;line-height:1.6}
.ein-schluss a{color:var(--gold-hell)}

@media (max-width:900px){
  .ein-spalten{grid-template-columns:1fr}
  .ein-link{flex-basis:100%}
}
@media (max-width:520px){
  .ein-link{flex-direction:column}
  .ein-link .btn{justify-content:center}
  .ein-schritte li{padding-left:3rem}
  .ein-kapitel{grid-template-columns:1fr 1fr}
  .ein-kapitel button{flex-direction:column;gap:.3rem;align-items:flex-start}
  .ein-werkzeuge .btn{flex:1 1 100%;justify-content:center}
}