/* ============================================================
   TRÆN · App-Seite /app/ · gemeinsame Bausteine aller Versionen (Alex 28.10.2026)
   Telefon-Rahmen, Bandskala, Wettkampfzeitraum, Abschluss. Tokens aus site.css; die Versionen
   (app-a.css, app-b.css, app-c.css) setzen nur ihr Layout darauf. Keine Verläufe, Buttons in
   Textfarbe, Kobalt nur Daten, Emerald nur Status (DESIGN.md).
   ============================================================ */

/* ---------- Telefon: ein Bildschirm der App ---------- */
.app-seite .telefon{margin:0;container-type:inline-size}
.app-seite .telefon .bild{aspect-ratio:393/852;border-radius:13cqi;background:#161616;box-shadow:0 0 0 1px rgba(43,43,43,.28),0 22px 48px -26px rgba(22,22,22,.5)}
.app-seite .telefon figcaption{margin-top:12px;text-align:center}
/* Abends: feine helle Kontur, sonst verschwimmen dunkle Bildschirme mit dem Seitengrund */
:root[data-theme="dark"] .app-seite .telefon .bild{box-shadow:0 0 0 1px rgba(244,242,237,.16),0 22px 48px -26px rgba(0,0,0,.7)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .app-seite .telefon .bild{box-shadow:0 0 0 1px rgba(244,242,237,.16),0 22px 48px -26px rgba(0,0,0,.7)}}

/* ---------- Datenzeile ohne Linie (leise, unter Satz oder Bild) ---------- */
.app-daten{font:500 12.5px/1.5 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--text-leise)}
.app-daten > span{white-space:nowrap}   /* Einträge bleiben ganz (build.py → app_daten) */

/* ---------- Bandskala Start … Reference (TRAEN_04 §4.3) ---------- */
.baender{--name:7.2rem;--spanne:4.6rem;max-width:620px}
.baender-kopf,.baender-skala li{display:grid;grid-template-columns:var(--name) var(--spanne) minmax(0,1fr);align-items:center}
.baender-kopf{margin:0 0 6px;min-height:20px}
.baender-kopf .label{grid-column:3;position:relative;justify-self:start;margin-left:calc(var(--gate) * 1%);max-width:calc((100 - var(--gate)) * 1%);padding-left:8px;font-size:10.5px}   /* bricht am Handy um statt überzustehen */
.baender-skala{list-style:none;margin:0;padding:0}
.baender-skala li{min-height:34px;border-top:1px solid var(--linie)}
.baender-skala li:last-child{border-bottom:1px solid var(--linie)}
.band-name{font-size:15px;line-height:1.3}
.band-spanne{font:500 12px/1.3 var(--mono);letter-spacing:.06em;color:var(--text-leise)}
.band-spur{position:relative;align-self:stretch}
.band-spur i{position:absolute;top:50%;left:calc((var(--von) - 1) * 1%);width:max(3px,calc(var(--anteil) * 1%));height:6px;margin-top:-3px;border-radius:3px;background:var(--linie-stark);opacity:.22}
.band-spur::after{content:"";position:absolute;top:0;bottom:0;left:calc(var(--gate) * 1%);border-left:1px dashed var(--text-leise)}
.baender-skala li[data-an] .band-name{font-weight:600}
.baender-skala li[data-an] .band-spur i{opacity:1;background:var(--link)}
.band-spur b{position:absolute;top:50%;left:calc((var(--pos) - .5) * 1%);transform:translate(-50%,-50%);display:grid;place-items:center;min-width:30px;height:22px;padding:0 6px;border-radius:11px;background:var(--link);color:#fff;font:600 12px/1 var(--mono);letter-spacing:.02em;z-index:1}
:root[data-theme="dark"] .band-spur b{color:var(--nacht)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .band-spur b{color:var(--nacht)}}
@media (max-width:420px){.baender{--name:6.2rem;--spanne:3.9rem}.band-name{font-size:14px}}

/* ---------- Wettkampfzeitraum: Wochen, dann Pause ---------- */
.zeitraum{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;max-width:520px}
.zeitraum li{padding-top:10px;border-top:3px solid var(--linie-stark);font:500 11.5px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.zeitraum li.pause{border-top-style:dashed;border-top-color:var(--text-leise);color:var(--text-leise)}

/* ---------- Abschluss: Status, App-Warteliste, Rechtstexte der App ---------- */
.app-abschluss .launch > div:first-child{align-content:start;gap:16px}
.app-recht{display:flex;flex-wrap:wrap;gap:8px 22px;margin:16px 0 0;font-size:14px}