/* src/schrift.css */
/* Sofia Sans 800, selbst gehostet statt Google Fonts: offline da und keine Verbindung zu Google (Sofia, 2026-11-11). Lizenz SIL Open Font License 1.1 */
@font-face { font-family: "Sofia Sans"; font-style: normal; font-weight: 800; font-display: swap; src: url(fonts/sofia-sans-800-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Sofia Sans"; font-style: normal; font-weight: 800; font-display: swap; src: url(fonts/sofia-sans-800-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* src/styles.css */
/* Aus Prototyp/workout-aufbau.html übernommen (style, extra, PROTO_CSS aus aufbau.py), nicht von Hand ändern.
   Anpassungen für die echte App stehen in app-rahmen.css. Neu erzeugen: node tools/aus_prototyp.mjs */
/* Drei Reihen, je eine Variante mit drei Handys (Start, Training, Fortschritt), auf hellgrauem Grund im Apple-Stil */
:root { --bg: #F2F2F7; --text: #1D1D1F; --grau: #6E6E73; --lila: #AF52DE; --sys: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif; --anton: "Anton", "Arial Narrow", sans-serif }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #000; --text: #F5F5F7; --grau: #98989D; color-scheme: dark } }
:root[data-theme="dark"] { --bg: #000; --text: #F5F5F7; --grau: #98989D; color-scheme: dark }
* { box-sizing: border-box }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.45 var(--sys); -webkit-font-smoothing: antialiased }
.wrap { max-width: 1120px; margin: 0 auto; padding-inline: 20px; padding-block: 40px 56px }
h1 { font-size: 34px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 6px }
.unter { color: var(--grau); margin: 0 0 8px; max-width: 64ch }
.variante { margin-top: 40px }
.vtext h2 { font-size: 22px; margin: 0 0 4px; letter-spacing: -.01em }
.vtext p { margin: 0 0 18px; color: var(--grau); max-width: 70ch }
.handys { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 24px; justify-items: center }
figure { margin: 0; width: 100%; max-width: 270px; display: flex; flex-direction: column; align-items: center; gap: 10px }
figcaption { color: var(--grau); font-size: 13px; font-weight: 600 }
.handy { position: relative; width: 100%; aspect-ratio: 300 / 640; border-radius: 44px; background: #0A0A0B; box-shadow: 0 0 0 1.5px #3A3A3C, 0 20px 40px rgba(0,0,0,.25) }
.screen { position: absolute; inset: 9px; border-radius: 36px; overflow: hidden; background: #000; color: #fff; container-type: inline-size; font-family: var(--sys) }
.insel { position: absolute; top: 3.5cqw; left: 35%; width: 30%; height: 8.5cqw; border-radius: 20px; background: #000; z-index: 9 }
.status { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; padding: 5cqw 8cqw 0; font-size: 4.4cqw; font-weight: 600; z-index: 8 }
.inhalt { position: absolute; inset: 0; padding: 18cqw 6cqw 30cqw; display: flex; flex-direction: column; gap: 4cqw; z-index: 2 }
.datum, .karte small, .letzt { color: rgba(235,235,245,.6); font-size: 3.6cqw; font-weight: 600; text-transform: uppercase; letter-spacing: .04em }
.letzt { text-transform: none; letter-spacing: 0; font-size: 4cqw; font-weight: 500 }
.titel { margin: 0; font-size: 10cqw; font-weight: 800; letter-spacing: -.02em; line-height: 1 }
.woche { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 3.4cqw; color: rgba(235,235,245,.6); font-weight: 600 }
.woche i { display: block; margin: 1.4cqw auto 0; width: 7.5cqw; height: 7.5cqw; border-radius: 50%; background: rgba(255,255,255,.1) }
.woche .ja i { background: #fff } .woche .heute i { box-shadow: inset 0 0 0 1.5px var(--lila); background: transparent } .woche .frei i { background: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18) }
.karte { background: #1C1C1E; border-radius: 4cqw; padding: 4.5cqw; display: flex; flex-direction: column; gap: 1cqw }
.gross { font-size: 8cqw; font-weight: 800; line-height: 1.05 }
.mehr { color: rgba(235,235,245,.6); font-size: 3.8cqw }
.klein span { font-size: 4cqw }
.los, .satz { margin-top: 3cqw; border: 0; border-radius: 99px; padding: 4cqw; background: var(--lila); color: #fff; font: 700 5cqw var(--sys) }
.plan { font-size: 3.6cqw; color: var(--lila); font-weight: 600 }
.tabs { position: absolute; left: 4cqw; right: 4cqw; bottom: 5cqw; display: grid; grid-template-columns: repeat(4, 1fr); padding: 2.6cqw 1cqw; border-radius: 99px; background: #1C1C1E; z-index: 7 }
.tabs span { display: flex; flex-direction: column; align-items: center; gap: .6cqw; font-size: 2.9cqw; font-weight: 600; color: rgba(235,235,245,.55) }
.tabs svg { width: 6.4cqw; height: 6.4cqw; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round } /* Symbole als Linien: Hantel, Uhr, Zickzack-Kurve, Person (Sofia, 2026-11-10) */
.tabs .an { color: #fff }
/* Training */
.training { padding-bottom: 6cqw }
.kopfzeile { display: flex; justify-content: space-between; font-size: 3.8cqw; color: rgba(235,235,245,.6) }
.uebung { margin: 0; font-size: 8.5cqw; font-weight: 800; line-height: 1.05 }
.hinweis { font-size: 3.8cqw; color: rgba(235,235,245,.75); display: flex; gap: 1.6cqw; align-items: baseline }
.hinweis b { color: var(--lila); font-weight: 700 }
.saetze { display: flex; flex-direction: column; gap: 1.6cqw; font-size: 4cqw }
.saetze .fertig { color: rgba(235,235,245,.55) } .saetze .jetzt { font-weight: 700 }
.werte { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw }
.wert { background: #1C1C1E; border-radius: 4cqw; padding: 3cqw 2.4cqw; column-gap: 1.5cqw; display: grid; grid-template-columns: auto 1fr auto; align-items: center; text-align: center }
.wert b { font-family: var(--sys); font-weight: 700; font-size: 7.4cqw; line-height: 1.05; font-variant-numeric: tabular-nums; letter-spacing: -.01em; padding: 0 1.5cqw } /* Systemschrift statt Anton (Sofia, 2026-11-10) */
.wert small { grid-column: 1 / -1; color: rgba(235,235,245,.6); font-size: 3.4cqw }
.wert button { width: 9cqw; height: 9cqw; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; font-size: 5.6cqw; line-height: 1 }
.pause { margin-top: auto; display: flex; justify-content: space-between; align-items: baseline; font-size: 3.6cqw; color: rgba(235,235,245,.6); background: #1C1C1E; border-radius: 4cqw; padding: 3cqw 4cqw }
.pause b { font-family: var(--sys); font-weight: 700; font-size: 7cqw; color: #fff; font-variant-numeric: tabular-nums }
.satz { margin-top: 0 }
/* Fortschritt */
.seg { display: grid; grid-template-columns: repeat(3, 1fr); background: rgba(118,118,128,.24); border-radius: 2.4cqw; padding: .6cqw; font-size: 3.6cqw; text-align: center }
.seg span { padding: 1.4cqw 0; border-radius: 2cqw } .seg .an { background: #636366; font-weight: 600 }
.liste div { display: flex; align-items: center; gap: 2cqw; font-size: 4cqw; padding: 1.4cqw 0; border-top: .5px solid rgba(255,255,255,.1) }
.liste div span:first-child { flex: 1 } .liste b { color: #30D158 } .liste b.gleich { color: rgba(235,235,245,.6) }
.pill { font-size: 2.8cqw; background: var(--lila); border-radius: 99px; padding: .4cqw 2cqw; font-weight: 700 }
/* Variante 1: Plakat-Logbuch. Überschriften in der Systemschrift fett (nicht Anton, nicht in Großbuchstaben, Sofia 2026-11-10), Anton nur für die großen Zahlen; wenig Rundung, feste Leiste unten */
.v1 .karte, .v1 .wert, .v1 .pause { border-radius: 2cqw }
.v1 .los, .v1 .satz { border-radius: 2.4cqw }
.v1 .tabs { border-radius: 0; left: 0; right: 0; bottom: 0; padding-bottom: 6cqw; background: #0B0B0C; border-top: 1px solid #222 }
/* Variante 2: Glas auf dem lila Streifen */
.v2 .streifen-bg { position: absolute; left: 50%; top: 50%; width: 300cqw; height: 42cqw; background: var(--lila); opacity: .24; transform: translate(-50%, -50%) rotate(-50deg); filter: blur(10cqw) }
.v2 .karte, .v2 .wert, .v2 .pause, .v2 .tabs { background: rgba(255,255,255,.08); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.2) }

.schriften { margin-top: 48px }
.schriften h2 { font-size: 22px; margin: 0 0 4px; letter-spacing: -.01em }
.schriften > p { margin: 0 0 18px; color: var(--grau); max-width: 70ch }
.proben { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px }
.probe { margin: 0; border-radius: 18px; overflow: hidden; background: #000; color: #fff; display: flex; flex-direction: column }
.probe .muster { padding: 22px 20px 18px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px }
.probe .muster span { font-size: 32px; line-height: 1.1 }
.probe .muster span + span { font-size: 26px; color: rgba(235,235,245,.7) }
.probe figcaption { padding: 10px 20px 14px; border-top: 1px solid #222; display: flex; flex-direction: column; gap: 1px }
.probe figcaption b { font-size: 15px } .probe figcaption small { color: rgba(235,235,245,.6); font-size: 13px }
.vergleich { margin-top: 48px }
.vergleich h2 { font-size: 22px; margin: 0 0 4px; letter-spacing: -.01em }
.vergleich > p { margin: 0 0 18px; color: var(--grau); max-width: 70ch }
.vgl-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px }
.vgl { margin: 0; display: flex; flex-direction: column; gap: 8px }
.vgl figcaption { color: var(--grau); font-size: 13px; font-weight: 600; text-align: center }
.vgl-screen { background: #000; color: #fff; border-radius: 22px; padding: 22px 20px; display: flex; flex-direction: column; gap: 10px }
.vgl-screen small, .vgl-screen .klein { font-family: -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: .04em; text-transform: uppercase; font-size: 11px; font-weight: 600; color: rgba(235,235,245,.6) }
.vgl-screen h4 { margin: 0; font-size: 34px; line-height: 1.05 }
.vgl-screen h4.zwei { margin-top: 8px }
.vgl-screen h5 { margin: 6px 0 0; font-size: 26px; line-height: 1.1 }
.vgl-karte { background: #1C1C1E; border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px }
.vgl-karte b { font-size: 24px }
/* Gewählt: Variante 2 (Sofia, 2026-11-10). Überschriften in Sofia Sans, leicht gesperrt */
.v2 .titel, .v2 .gross, .v2 .uebung { font-family: 'Sofia Sans', -apple-system, sans-serif; font-weight: 800; letter-spacing: .02em }
.chips { display: flex; flex-wrap: wrap; gap: 1.6cqw } .chips span { font-size: 3.6cqw; padding: 1.3cqw 3cqw; border-radius: 99px; background: rgba(255,255,255,.12) } .chips .an { background: var(--lila) }
.zurueck { font-size: 3.8cqw; color: var(--lila) }
.kopf2 { display: flex; justify-content: space-between; align-items: center } .zahnrad { font-size: 5cqw; color: rgba(235,235,245,.7) }
.liste2 div { display: flex; justify-content: space-between; gap: 2cqw; font-size: 3.8cqw; padding: 1.9cqw 0; border-top: .5px solid rgba(255,255,255,.12) } .liste2 div:first-child { border-top: 0 } .liste2 em { font-style: normal; color: rgba(235,235,245,.6); text-align: right; white-space: nowrap }
.liste2.pfeile em::after { content: " ›"; color: rgba(235,235,245,.35) }
.liste2.drei div { flex-direction: column; gap: .4cqw } .liste2.drei em { text-align: left }
.liste2.wahl .an span { font-weight: 700 } .liste2.wahl .an em { color: var(--lila) }
.liste2.status .jetzt span { font-weight: 700 } .liste2.status .jetzt em { color: var(--lila) }
.neben { border: 0; border-radius: 99px; padding: 3cqw; background: rgba(255,255,255,.1); color: #fff; font: 600 4cqw var(--sys) }
.suche { background: rgba(118,118,128,.24); border-radius: 2.6cqw; padding: 2.4cqw 3.4cqw; font-size: 3.8cqw; color: rgba(235,235,245,.6) }
.skala { display: grid; grid-template-columns: repeat(10, 1fr); gap: 1cqw; text-align: center; font-size: 3.3cqw } .skala span { padding: 1.4cqw 0; border-radius: 1.6cqw; background: rgba(255,255,255,.1) } .skala .an { background: var(--lila); font-weight: 700 }
.kurve { width: 100%; height: auto; display: block }
.vgl2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqw } .vgl2 div { background: rgba(255,255,255,.08); border-radius: 3cqw; padding: 2.6cqw 3cqw; display: flex; flex-direction: column; gap: .6cqw; box-shadow: inset 0 0 0 .5px rgba(255,255,255,.2) } .vgl2 b { font-size: 4.4cqw } .vgl2 .vor { box-shadow: inset 0 0 0 1.2px var(--lila) } .vgl2 small { color: rgba(235,235,245,.6); font-size: 3.2cqw; font-weight: 600 }
.medien .platz { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; margin-top: 1.6cqw } .medien .platz i { aspect-ratio: 1; border-radius: 2.4cqw; border: 1px dashed rgba(255,255,255,.25); display: grid; place-items: center; font-style: normal; color: rgba(235,235,245,.5); font-size: 6cqw }
.inhalt.ohne { padding-bottom: 6cqw }
.buddy { background: rgba(255,255,255,.12); border-radius: 99px; padding: .6cqw 2.6cqw; color: #fff }
.live-kopf { display: flex; justify-content: space-between; align-items: baseline } .uhr { font-size: 6cqw; font-variant-numeric: tabular-nums; color: rgba(235,235,245,.85) }
.fortschritt-balken { height: 1.6cqw; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden } .fortschritt-balken i { display: block; height: 100%; background: var(--lila); border-radius: 99px }
.ue-liste { display: flex; flex-direction: column; gap: 2cqw }
.ue { display: flex; align-items: center; gap: 3cqw; padding: 3cqw 3.4cqw; border-radius: 3.6cqw; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.14) }
.ue.jetzt { background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1.2px var(--lila) }
.ue.fertig .ue-text b, .ue.fertig .ue-text span { color: rgba(235,235,245,.5) }
.haken { flex: 0 0 auto; width: 6cqw; height: 6cqw; border-radius: 50%; background: var(--lila); display: grid; place-items: center; font-size: 3.4cqw; font-weight: 700 }
.haken.leer { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(235,235,245,.4) }
.ue-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .4cqw } .ue-text b { font-size: 4cqw } .ue-text span { font-size: 3.3cqw; color: rgba(235,235,245,.6) }
.punkte { display: flex; gap: 1.2cqw; margin-top: .8cqw } .punkte i { width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background: rgba(255,255,255,.18) } .punkte i.voll { background: var(--lila) } .punkte i.akt { box-shadow: 0 0 0 1px var(--lila); background: transparent }
.weiter-k { border: 0; border-radius: 99px; padding: 2cqw 3.6cqw; background: var(--lila); color: #fff; font: 700 3.6cqw var(--sys) }
.live-fuss { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqw } .neben.ende { color: #FF6961 }
.klein3 { font-size: 3.4cqw }
.liste2.neuzeile span { color: var(--lila); font-weight: 700 } .liste2.neuzeile em { color: var(--lila) }
.tabs.fuenf { grid-template-columns: repeat(5, 1fr); padding: 3.4cqw 3cqw; left: 13cqw; right: 13cqw } /* Symbole enger zusammen (Sofia, 2026-11-10) */
.tabs.fuenf .an { color: var(--lila) } /* aktives Symbol in Lila */ .tabs.fuenf span { justify-content: center } .tabs.fuenf svg { width: 7cqw; height: 7cqw } /* nur Symbole, ohne Beschriftung (Sofia, 2026-11-10) */
.bereich { margin-top: 40px } .bereich h2 { font-size: 24px; margin: 0 0 16px; letter-spacing: -.01em }
figcaption { text-align: center; display: flex; flex-direction: column; gap: 2px } figcaption b { color: var(--text); font-size: 15px } figcaption span { font-weight: 400; max-width: 32ch }
.neu { font-style: normal; font-size: 11px; font-weight: 700; color: #fff; background: var(--lila); border-radius: 99px; padding: 1px 7px; margin-left: 4px; vertical-align: 2px }
:root { --karte: #FFFFFF } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --karte: #1C1C1E } } :root[data-theme="dark"] { --karte: #1C1C1E }
.ablauf { background: var(--karte); border-radius: 18px; padding: 16px 20px; margin-top: 18px; max-width: 780px } .ablauf ol { margin: 6px 0 0; padding-left: 20px } .ablauf li { margin: 3px 0 }

.screen-inhalt .h-buehne .h-text { gap: 2.6cqw } /* mehr Luft über und unter dem Namen, erst bei erledigt, dann auch bei Laut Plan (Sofia, 2026-11-11) */
.screen-inhalt .nt-knopf { display: block; width: 100%; border: 0; border-radius: 99px; background: rgba(255,255,255,.06); color: rgba(235,235,245,.75); font: 400 3.6cqw var(--sys); padding: 2.6cqw; margin: 2.4cqw 0 0 } /* Sitzung nachtragen, ruhig unter der letzten Übung (Sofia, 2026-11-11) */
.screen-inhalt .nt-kopf { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1cqw } .screen-inhalt .nt-kopf b { font-size: 3.9cqw } .screen-inhalt .nt-kopf span { font-size: 3cqw; color: rgba(235,235,245,.55) }
.screen-inhalt .nt-satz { display: flex; width: 100%; justify-content: space-between; align-items: center; border: 0; border-top: .5px solid rgba(255,255,255,.08); background: none; color: #fff; padding: 1.5cqw 0; font: 3.3cqw var(--sys); text-align: left } .screen-inhalt .nt-kopf + .nt-satz { border-top: 0 } .screen-inhalt .nt-satz span { color: rgba(235,235,245,.55) } .screen-inhalt .nt-satz b { border-radius: 99px; padding: 1cqw 2.8cqw; background: rgba(255,255,255,.1); font-weight: 600 } .screen-inhalt .nt-satz b.leer { background: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); color: rgba(235,235,245,.4); font-weight: 400 }
.screen-inhalt .nt-plus { border: 0; background: none; color: var(--lila); font: 3.3cqw var(--sys); padding: 1.6cqw 0 0; text-align: left; align-self: flex-start } .screen-inhalt small.nt-a { display: block; margin: 2.4cqw 0 1.4cqw }
.screen-inhalt .nt-seg { margin-top: 1.4cqw } .screen-inhalt .nt-tag { display: flex; justify-content: center; align-items: center; gap: 5cqw; margin-top: 2.4cqw; font-size: 3.8cqw } .screen-inhalt .nt-tag button { border: 0; background: rgba(255,255,255,.1); color: #fff; border-radius: 50%; width: 8cqw; height: 8cqw; font-size: 4.4cqw; line-height: 1 } .screen-inhalt .nt-tag button:disabled { opacity: .3 }
.screen-inhalt .nt-ue { display: block; width: 100%; margin-top: 1cqw }
.screen-inhalt .vk-auf.mit-nach { grid-template-columns: auto auto 1fr auto } .screen-inhalt .vk-nach { justify-self: start; align-self: center; flex: 0 0 auto; font-size: 2.6cqw; font-weight: 500; color: rgba(235,235,245,.6); background: rgba(255,255,255,.08); border-radius: 99px; padding: .5cqw 2cqw; margin-left: 0 } /* Etikett im Verlauf (Sofia, 2026-11-11) */
.h-zeile { display: flex; align-items: center; gap: 4.6cqw } .screen-inhalt .h-buehne .h-zeile .h-los { width: 12.1cqw; margin-top: .8cqw } /* Schaft 24 von 40 Einheiten = 5,2 cqw, so hoch wie das kleine e (Sofia, 2026-11-11) */
.screen-inhalt .h-buehne .h-los { flex: 0 0 auto; width: 32cqw; height: auto; border-radius: 0; background: none; padding: 0; display: block } .h-los svg { display: block; width: 100%; height: auto; overflow: visible } .h-los .hp-f { fill: url(#hpG); stroke: none; stroke-width: 0; stroke-linejoin: round; paint-order: stroke } .h-los .hp-l { fill: url(#hpL); stroke: none } .h-los text { fill: #fff; font: 800 21px "Sofia Sans", var(--sys) } /* Pfeil statt Kreis (Sofia, 2026-11-11) */
.h-buehne { display: flex; align-items: center; gap: 4.4cqw; margin-top: 2cqw } .h-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .8cqw } .h-text small { font-size: 3cqw; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(235,235,245,.55) } .h-name { font: 800 10cqw/1 "Sofia Sans", var(--sys) }
.screen-inhalt .h-los { flex: 0 0 auto; width: 21cqw; height: 21cqw; border-radius: 50%; border: 0; background: var(--lila); color: var(--auf-akzent, #fff); font: 800 5.6cqw "Sofia Sans", var(--sys); padding: 0 }
.screen-inhalt .h-anders { align-self: flex-start; border: 0; border-radius: 99px; background: rgba(255,255,255,.06); color: rgba(235,235,245,.7); font: 400 3.8cqw var(--sys); padding: 2.4cqw 4.2cqw } /* Heute Variante A (Sofia, 2026-11-11) */
.screen-inhalt .heute-link { background: none; border: 0; padding: 2.6cqw; color: rgba(235,235,245,.65); font: 4.2cqw var(--sys); align-self: center; margin-top: -2.2cqw } /* „Anderes Training wählen“ ohne Knopf; Los wieder volle Breite (Sofia, 2026-11-11) */
.screen-inhalt .abl-mitte .abl-ring { margin-top: 2.4cqw } .screen-inhalt .abl-mitte + .abl-fuss { margin-top: -2cqw } /* Uhr mittig zwischen Übungsname und Knopf (Sofia, 2026-11-11) */
.screen-inhalt .abl-fuss { align-items: center } .screen-inhalt .abl-fuss .los { width: auto; padding: 3cqw 9cqw; font-size: 4.2cqw } /* Knopf so breit wie sein Text (Sofia, 2026-11-11) */
.screen-inhalt .abl-mitte, .screen-inhalt .abl-ende { flex: 0 0 auto; margin-top: 8cqw } .screen-inhalt .abl-fuss { margin-top: 6cqw } /* Knöpfe direkt unter der Uhr, leichter zu erreichen (Sofia, 2026-11-11) */
.screen-inhalt .abl-titel { margin-top: 3cqw } /* Titel etwas tiefer, weg vom Zurück-Link (Sofia, 2026-11-11) */
.abl-balken { display: flex; gap: 1cqw } .abl-balken i { flex: 1; height: 1.1cqw; border-radius: 99px; background: rgba(255,255,255,.14) } .abl-balken i.ja { background: var(--lila) } .abl-balken i.jetzt { background: color-mix(in srgb, var(--lila) 50%, transparent) }
.abl-mitte { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 2.6cqw } .abl-mitte small { font-size: 3cqw; letter-spacing: .06em; text-transform: uppercase; color: rgba(235,235,245,.55) } .abl-name { font: 800 8cqw/1.1 "Sofia Sans", var(--sys) } .abl-vorgabe { font: 800 14cqw/1 "Sofia Sans", var(--sys); color: var(--lila) }
.abl-ring { position: relative; width: 46cqw; height: 46cqw } .abl-ring svg { width: 100%; height: 100%; transform: rotate(-90deg) } .abl-ring circle { fill: none; stroke-width: 7 } .abl-ring .r1 { stroke: rgba(255,255,255,.1) } .abl-ring .r2 { stroke: var(--lila); stroke-linecap: round } .abl-ring b { position: absolute; inset: 0; display: grid; place-items: center; font: 800 12cqw "Sofia Sans", var(--sys); font-variant-numeric: tabular-nums }
.abl-fuss { display: flex; flex-direction: column; gap: 1cqw } .screen-inhalt .abl-skip { background: none; border: 0; color: rgba(235,235,245,.55); font: 3.4cqw var(--sys); padding: 2.4cqw }
.abl-ende { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2cqw; text-align: center } .abl-ende b { font: 800 8cqw "Sofia Sans", var(--sys) } .abl-haken { width: 16cqw; height: 16cqw; border-radius: 50%; background: var(--lila); display: grid; place-items: center; font-size: 8cqw; font-weight: 700 } /* Aufwärmen Variante B (Sofia, 2026-11-11) */
.verw { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqw; margin-top: 2cqw } .screen-inhalt .verw .neben.voll { background: var(--lila); color: var(--auf-akzent, #fff) } .verw-feld { display: flex; flex-direction: column; gap: 1cqw; margin-top: 2cqw } .verw-frage { margin-top: 2cqw }
.screen-inhalt .wk-i { align-self: flex-end; margin: -2.6cqw 0 -2cqw; width: 4.4cqw; height: 4.4cqw; border-radius: 50%; border: 1px solid rgba(235,235,245,.4); background: none; color: rgba(235,235,245,.55); font: 600 2.7cqw/1 var(--sys); padding: 0; display: grid; place-items: center; position: relative } .wk-i::after { content: ""; position: absolute; inset: -3.4cqw }
.wk-legende { position: relative; display: flex; flex-wrap: wrap; gap: 1.6cqw 3.4cqw; background: rgba(255,255,255,.06); border-radius: 3cqw; padding: 2.6cqw 8cqw 2.6cqw 3cqw; font-size: 3.1cqw; color: rgba(235,235,245,.8) } .wk-legende span { display: flex; align-items: center; gap: 1.4cqw } .wk-legende b { color: var(--lila) } .screen-inhalt .wk-legende button { position: absolute; top: .4cqw; right: 1cqw; background: none; border: 0; color: rgba(235,235,245,.55); font-size: 4.4cqw; padding: 1.2cqw 2cqw }
.lg { width: 3.4cqw; height: 3.4cqw; border-radius: 50%; display: inline-block } .lg.ja { background: var(--lila) } .lg.geplant { background: rgba(255,255,255,.22) } .lg.frei { box-shadow: inset 0 0 0 1px rgba(255,255,255,.3) } .lg.cardio { box-shadow: inset 0 0 0 1px rgba(255,255,255,.45), inset 0 0 0 1.6cqw transparent, inset 0 0 0 2.2cqw rgba(255,255,255,.3) }
.entl-hin { font-size: 3.2cqw; color: var(--lila); text-align: center }
.offen-hin { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; background: rgba(255,159,10,.12); border-radius: 3cqw; padding: 2.4cqw 3cqw; font-size: 3.4cqw } .screen-inhalt .offen-hin .neben { padding: 2cqw 3cqw; font-size: 3.2cqw; white-space: nowrap } /* Runde 3 (Sofia, 2026-11-11) */
.st-kopf { display: flex; align-items: center; gap: 1.8cqw } .screen-inhalt .st-i { position: relative; width: 4.4cqw; height: 4.4cqw; border-radius: 50%; border: 1px solid rgba(235,235,245,.5); background: none; color: rgba(235,235,245,.6); font: 600 2.7cqw/1 var(--sys); padding: 0; display: grid; place-items: center } .st-i::after { content: ""; position: absolute; inset: -3.4cqw }
.st-zahl { display: flex; align-items: baseline; gap: 2.4cqw; margin-top: 1.2cqw } .st-zahl b { font: 800 10.5cqw/1 "Sofia Sans", var(--sys); font-variant-numeric: tabular-nums } .screen-inhalt .st-p { background: none; border: 0; padding: 1cqw 0; color: var(--lila); font: 600 3.9cqw var(--sys) }
.st-erkl { position: relative; margin-top: 2cqw; background: rgba(255,255,255,.06); border-radius: 3cqw; padding: 2.6cqw 7cqw 2.6cqw 3cqw; font-size: 3.2cqw; line-height: 1.45; color: rgba(235,235,245,.85) } .st-erkl b { color: #fff } .screen-inhalt .st-erkl button { position: absolute; top: .6cqw; right: 1cqw; background: none; border: 0; color: rgba(235,235,245,.55); font-size: 4.4cqw; padding: 1.2cqw 2cqw }
.st-meta { display: block; font-size: 3.1cqw; color: rgba(235,235,245,.55); margin-top: 1cqw }
.kurve.wisch { touch-action: none; overflow: visible } .kurve .blase rect { fill: #2b2233; stroke: rgba(210,174,245,.45); stroke-width: .25 } .kurve .blase .b1 { font: 2.6px var(--sys); fill: rgba(235,235,245,.6) } .kurve .blase .b2 { font: 700 3.1px var(--sys); fill: #fff } /* Statistik Variante C (Sofia, 2026-11-11) */
.screen-inhalt .chips button.sub { background: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.28) } .screen-inhalt .chips button.sub.an { background: var(--lila); box-shadow: none } .screen-inhalt .chips button.teil { box-shadow: inset 0 0 0 1.5px var(--lila) } /* Untergruppen der Muskelkarte (Sofia, 2026-11-11) */
.screen-inhalt .chips.zeile { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -6cqw; padding: 0 6cqw; flex: 0 0 auto } .chips.zeile::-webkit-scrollbar { display: none } .screen-inhalt .chips.zeile button { flex: 0 0 auto; white-space: nowrap } /* Muskel-Chips in einer Zeile zum Wischen (Sofia, 2026-11-11) */
.mk-paar { display: grid; grid-template-columns: 30cqw 30cqw; justify-content: center; gap: 8cqw; align-items: end; margin-top: 2.4cqw } .mk-figur { position: relative } .mk-figur svg { display: block; width: 100%; height: auto } .mk-figur .mk-vorne { position: absolute; inset: 0 }
.mk-figur .huelle { fill: #000 } .mk-figur .linie { fill: rgba(220,226,250,.3); pointer-events: none }
.mk-figur path[data-name] { fill: rgba(235,235,245,.42); stroke: transparent; stroke-width: 14; stroke-linejoin: round; pointer-events: visible; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; transition: fill .45s ease-out } .mk-figur path[data-name].an { fill: var(--lila); transition: none }
.mk-hinten { aspect-ratio: 855 / 2063; border: 1px dashed rgba(255,255,255,.22); border-radius: 4cqw; display: grid; place-items: center; text-align: center; font-size: 3cqw; line-height: 1.3; color: rgba(235,235,245,.45); padding: 2cqw }
.mk-name { text-align: center; margin-top: 2.4cqw; font-size: 3.8cqw; font-weight: 600 } .mk-name.leer { visibility: hidden } /* Muskelkarte im Katalog (Sofia, 2026-11-11) */
.gilt-frage { display: flex; flex-direction: column; gap: 2.4cqw; background: rgba(255,255,255,.08); border-radius: 4cqw; padding: 3.4cqw; font-size: 3.6cqw; margin-top: 2cqw } .gilt-frage div { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw } .gilt-frage .neben { font-size: 3.4cqw; padding: 2.6cqw 1cqw } .gilt-frage .neben:first-child { background: var(--lila); color: var(--auf-akzent, #fff) } .nur-woche { display: block; font-style: normal; font-size: 3cqw; color: var(--lila); font-weight: 500 } /* nur diese Woche oder Plan (Sofia, 2026-11-10) */
.schnapp .screen { font-size: 10.5px } .schnapp .screen-inhalt { pointer-events: none } /* Einzelseiten im gleichen Verhältnis wie der große Prototyp, nicht klickbar (Sofia, 2026-11-10) */
.screen-inhalt .saetze { padding-left: 3cqw } /* Sätze auf der Kante von „Letztes Mal“ (Sofia, 2026-11-10) */
.screen-inhalt .wert3 span.schalt { display: flex; align-items: center; justify-content: center; gap: 0; width: auto; height: 10cqw; margin-top: 1.6cqw; border-radius: 99px; background: rgba(255,255,255,.12) } .screen-inhalt .wert3 .schalt button { width: 15cqw; height: 100%; background: none; border-radius: 0 } .wert3 .schalt em { width: 1px; height: 5cqw; background: rgba(255,255,255,.25) }
.screen-inhalt .saetze + .werte { margin-top: 2.4cqw } /* etwas mehr Luft unter „Satz 2 von 4“ (Sofia, 2026-11-10) */
.wert3 { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: .4cqw } .wert3 b { font-size: 9.5cqw; font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; white-space: nowrap } .wert3 small { font-size: 3.2cqw; color: rgba(235,235,245,.55) }
.wert3 span { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6cqw; width: 100%; margin-top: 1.6cqw } .screen-inhalt .wert3 button { height: 10cqw; border: 0; border-radius: 99px; background: rgba(255,255,255,.12); color: #fff; display: grid; place-items: center; padding: 0 } .wert3 svg { width: 4.8cqw; height: 4.8cqw; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round }
.werte { gap: 4cqw } .korr .wert3 b { font-size: 9cqw } /* Eingabe nach Variante 1 (Sofia, 2026-11-10) */
.p-rahmen svg { display: none } .p-flaeche .p-rahmen b { font-size: 7.4cqw; letter-spacing: -.01em } .p-pille .p-rahmen b { font-size: 4.6cqw } /* nur die Zeit, ohne ablaufenden Rand, der lenkte ab (Sofia, 2026-11-10) */
.p-rahmen { position: relative; flex: none; display: inline-block; margin-left: 2cqw } .p-rahmen svg { position: absolute; inset: 0; width: 100%; height: 100% } .p-rahmen rect { fill: none; stroke-width: 9 } .p-rahmen .r1 { stroke: rgba(255,255,255,.12) } .p-rahmen .r2 { stroke: var(--lila); stroke-linecap: round }
.p-rahmen b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 6.6cqw; font-weight: 700; font-variant-numeric: tabular-nums } .p-pille .p-rahmen { margin-left: 0 } .p-pille .p-rahmen b { font-size: 4cqw } .p-flaeche.ring.vorbei .p-rahmen .r2, .p-pille.vorbei .p-rahmen .r2 { stroke: #fff } /* Zeit im abgerundeten Rechteck (Sofia, 2026-11-10) */
.screen-inhalt .p-rechts .p-knopf, .screen-inhalt .p-pille .p-knopf { height: 9.5cqw } /* Pausenknöpfe flacher, Breite wie vorher (Sofia, 2026-11-10) */
.screen-inhalt .p-rechts .p-knopf.rueck, .screen-inhalt .p-pille .p-knopf.rueck, .pv-b .pv-pk.rueck, .pv-t .pv-pk.rueck, .pv-c-o .pv-pk.rueck { color: #fff } /* Rückgängig weiß wie +15 s und Weiter; höhere Spezifität, sonst gewinnt die ältere lila Regel (Sofia, 2026-11-10) */
.p-ring { position: relative; flex: none; display: inline-block } .p-ring svg { width: 100%; height: 100%; transform: rotate(-90deg) } .p-ring circle { fill: none; stroke-width: 7 } .p-ring .r1 { stroke: rgba(255,255,255,.12) } .p-ring .r2 { stroke: var(--lila); stroke-linecap: round; transition: stroke-dasharray .25s linear } .p-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 4cqw; font-weight: 700; font-variant-numeric: tabular-nums }
.p-flaeche.ring { justify-content: flex-start; gap: 3cqw; padding: 2cqw 2.4cqw 2cqw 2cqw } .p-flaeche.ring .p-rechts { margin-left: auto } .p-info { flex: 1; min-width: 0; font-size: 3.2cqw; color: rgba(235,235,245,.7) } .p-flaeche.ring.vorbei .p-ring .r2, .p-pille.vorbei .p-ring .r2 { stroke: #fff } .p-flaeche.ring.vorbei .p-info { color: var(--auf-akzent, #fff) } /* Zahl im Kreis statt Balken (Sofia, 2026-11-10) */
.p-pille .p-ring b { font-size: 2.6cqw } .screen-inhalt .p-pille .p-links { align-items: center; padding-left: 1.6cqw; gap: 2cqw }
.stift { display: inline-block; font-style: normal; transform: scaleX(-1); margin-left: 1.6cqw } /* Stift zeigt zum Satz (Sofia, 2026-11-10) */
.werte { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.4cqw } .werte.eins { grid-template-columns: minmax(0, 1fr) }
.wert2 { min-width: 0; background: #1C1C1E; border-radius: 4cqw; padding: 2.2cqw 2.4cqw 2.6cqw; display: flex; flex-direction: column; align-items: center; gap: 1cqw } .wert2 small { font-size: 3cqw; color: rgba(235,235,245,.55) }
.wert2 .wz { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 1cqw } .wert2 b { flex: 1; min-width: 0; text-align: center; font-size: 7.2cqw; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap }
.wert2 button { flex: none; width: 10cqw; height: 10cqw; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; display: grid; place-items: center; padding: 0 } .wert2 svg { width: 4.6cqw; height: 4.6cqw; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round } /* Plus/Minus im Verhältnis, nichts überschneidet sich (Sofia, 2026-11-10) */
.korr-hinter { position: absolute; inset: 0; z-index: 25; background: rgba(0,0,0,.55); display: flex; align-items: flex-end } .korr { width: 100%; box-sizing: border-box; background: #1C1C1E; border-radius: 6cqw 6cqw 0 0; padding: 3cqw 4cqw 7cqw; display: flex; flex-direction: column; gap: 3cqw; animation: hoch .2s ease } .korr .vt-griff { width: 10cqw; height: 1.2cqw; border-radius: 99px; background: rgba(255,255,255,.3); align-self: center } .korr-t { font: 800 5cqw "Sofia Sans", var(--sys) } .korr .wert2 { background: rgba(255,255,255,.06) }
.korr-k { display: grid; grid-template-columns: 1fr 1.4fr; gap: 2.4cqw } .korr-k .los { margin: 0 } @keyframes hoch { from { transform: translateY(100%) } to { transform: none } } /* Satz korrigieren als Blatt von unten (Sofia, 2026-11-10) */
.screen-inhalt .pl-register small .r-p { display: block; margin: .6cqw 0 0; font-style: normal; text-transform: none; letter-spacing: 0; font-size: 3cqw } .screen-inhalt .reg-name em .pz { font-style: normal; min-width: 0; text-align: left; display: inline }
.screen-inhalt .karte.wv1 { padding-top: 1.6cqw; padding-bottom: 2.65cqw } /* oben und unten so viel Luft wie seitlich (Sofia, 2026-11-10) */
.wo-ueber.grau { color: rgba(235,235,245,.6); margin-top: 3cqw } .screen-inhalt .wo-liste { margin-top: 0 }
.screen-inhalt .wpl-neu { display: flex; align-items: center; gap: 3cqw } .wpl-neu i { width: 7cqw; height: 7cqw; display: grid; place-items: center } .wpl-neu svg { width: 4cqw; height: 4cqw; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; fill: none } /* Plus in der Ring-Spalte, als Zeichnung genau mittig zur Schrift (Sofia, 2026-11-10) */
.screen-inhalt .karte.wv1 > button:first-child { border-top: 0 }
.screen-inhalt .wo-liste { display: flex; flex-direction: column; margin-top: -1.6cqw } .screen-inhalt .wo-liste .wpl { border-top: 0; padding: 1.6cqw 0 } .screen-inhalt .wo-liste .reg-neu { padding-top: 2cqw }
.screen-inhalt .karte.wv1 .kopf b { font: 800 5.4cqw "Sofia Sans", var(--sys); color: #fff } .screen-inhalt .karte.wv1 .wt b { font: 600 3.8cqw var(--sys); color: #fff } .screen-inhalt .karte.wv1 .wt { min-height: 9.5cqw } .screen-inhalt .karte.wv1 .heute b { color: var(--lila) } /* Planname groß, Trainings in Textgröße: Hierarchie getauscht (Sofia, 2026-11-10) */
.screen-inhalt .wo-reg { margin-top: 1cqw } .screen-inhalt .wo-reg .r { padding-top: 1cqw } .screen-inhalt .wo-reg .wpl { border-top: 0; padding: 1.6cqw 0 } .screen-inhalt .wo-reg .reg-neu { padding-top: 2.4cqw }
.wo-ueber { margin: 1cqw 0 -1.4cqw; font: 800 4.6cqw "Sofia Sans", var(--sys); letter-spacing: .01em } /* Überschrift über der Woche, etwas wichtiger als „Meine Wochenpläne“ (Sofia, 2026-11-10) */
.screen-inhalt .wv1 .wt, .screen-inhalt .wv1 .wp { display: grid; grid-template-columns: 9cqw 1fr; align-items: center; width: 100%; border: 0; background: none; text-align: left; padding: 0; border-top: .5px solid rgba(255,255,255,.1) } .screen-inhalt .wv1 .wt { min-height: 12cqw } .screen-inhalt .wv1 .wp { min-height: 7cqw }
.screen-inhalt .wv1 small { font-size: 3cqw; color: rgba(235,235,245,.5); text-transform: uppercase; letter-spacing: .05em } .screen-inhalt .wv1 .wt b { font: 800 5.4cqw "Sofia Sans", var(--sys) } .screen-inhalt .wv1 .wp span { font-size: 3cqw; color: rgba(235,235,245,.3) }
.screen-inhalt .wv1 .heute { margin: 0 -2.4cqw; padding: 0 2.4cqw; width: calc(100% + 4.8cqw); border-radius: 3cqw; box-shadow: inset 0 0 0 1.5px var(--lila); border-top-color: transparent } .screen-inhalt .wv1 .heute small, .screen-inhalt .wv1 .heute b { color: var(--lila) } .screen-inhalt .wv1 .heute + button { border-top-color: transparent }
.screen-inhalt .wv1 .kopf { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 2cqw } .screen-inhalt .wv1 .kopf b { font: 600 3.8cqw var(--sys); color: rgba(235,235,245,.75) } .screen-inhalt .wv1 .kopf em { font-style: normal; font-size: 3cqw; color: var(--lila) } .screen-inhalt .wv1 { gap: 0 }
.screen-inhalt .wv-plaene { gap: 0 } .screen-inhalt .wpl { display: flex; align-items: center; gap: 3cqw; width: 100%; border: 0; background: none; text-align: left; padding: 2cqw 0; border-top: .5px solid rgba(255,255,255,.1) } .screen-inhalt .wpl:first-child { border-top: 0 } .screen-inhalt .wpl .wv-ring { width: 7cqw; height: 7cqw } .wpl span { display: flex; flex-direction: column } .wpl b { font-size: 3.8cqw } .wpl em { font-style: normal; font-size: 3cqw; color: rgba(235,235,245,.5) } .wpl.an b { color: var(--lila) }
.wv-ring { transform: rotate(-90deg); flex: none } .wv-ring circle { fill: none; stroke-width: 3.6 } .wv-ring .r1 { stroke: rgba(255,255,255,.12) } .wv-ring .r2 { stroke: var(--lila); stroke-linecap: round }
.schritt-z { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; padding: 1.8cqw 0; border-top: .5px solid rgba(255,255,255,.1) } .schritt-z:first-child { border-top: 0 } .schritt-z span { display: flex; flex-direction: column } .schritt-z b { font-size: 3.8cqw; font-weight: 500 } .schritt-z em { font-style: normal; font-size: 3.1cqw; color: rgba(235,235,245,.55) }
.screen-inhalt .schritt-weg { border: 0; width: 9cqw; height: 9cqw; border-radius: 50%; background: rgba(255,255,255,.1); color: rgba(235,235,245,.7); font-size: 5cqw; line-height: 1 } .schritt-neu { display: flex; flex-direction: column; gap: 1.6cqw; padding-top: 2.4cqw; border-top: .5px solid rgba(255,255,255,.1) } /* eigene Abläufe bearbeiten (Sofia, 2026-11-10) */
.pl-register .r { display: grid; grid-template-columns: 22cqw 1fr; gap: 2cqw; padding: 3cqw 0; border-top: .5px solid rgba(255,255,255,.15) } .pl-register .r:first-child { border-top: 0 } .pl-register small { font-size: 2.7cqw; color: rgba(235,235,245,.5); text-transform: uppercase; letter-spacing: .04em; padding-top: 1.6cqw } .pl-register .r > div { display: flex; flex-direction: column; gap: .4cqw } .pl-register .reg-name { display: flex; flex-direction: column; padding: 1cqw 0 }
.screen-inhalt .pl-register .r { display: grid; grid-template-columns: 22cqw 1fr; gap: 2cqw; padding: 3cqw 0; border-top: .5px solid rgba(255,255,255,.15) } .screen-inhalt .pl-register .r:first-child { border-top: 0 } .screen-inhalt .pl-register small { font-size: 2.7cqw; color: rgba(235,235,245,.5); text-transform: uppercase; letter-spacing: .04em; padding-top: 1.6cqw } .screen-inhalt .pl-register .r > div { display: flex; flex-direction: column; gap: .4cqw } /* Trainings als Register (Sofia, 2026-11-10) */
.screen-inhalt .reg-name { border: 0; background: none; padding: 1cqw 0; text-align: left; display: flex; flex-direction: column; gap: .2cqw } .reg-name b { font: 800 5.6cqw/1.1 "Sofia Sans", var(--sys) } .reg-name em { font-style: normal; font-size: 3cqw; color: rgba(235,235,245,.5) } .screen-inhalt .reg-name:active b { color: var(--lila) }
.screen-inhalt .reg-neu { border: 0; background: none; padding: 2cqw 0; text-align: left; color: var(--lila); font: 600 3.8cqw var(--sys) }
.mk-platz { aspect-ratio: 1 / 1.05; border-radius: 3cqw; border: 1px dashed rgba(255,255,255,.25); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6cqw; padding: 6cqw; text-align: center; margin-top: 1cqw } .mk-platz span { font-size: 4cqw; font-weight: 600; color: rgba(235,235,245,.75) } .mk-platz em { font-style: normal; font-size: 3.2cqw; color: rgba(235,235,245,.5); line-height: 1.4 }
.vorher-pfeil { flex: none; width: 7cqw; height: 7cqw; fill: none; stroke: var(--lila); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round }
/* Pausen-Element nach Lilly (2026-11-10) */
.unten-fest.block { background: rgba(255,255,255,.08); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.2); border-radius: 6cqw; padding: 2.4cqw; gap: 2cqw; margin-top: 3cqw }
.unten-fest.block .satz { min-height: 16.5cqw; border-radius: 4cqw; margin-top: 0 }
.p-ruhig { display: flex; justify-content: space-between; align-items: center; min-height: 9cqw; padding: 0 2cqw; color: rgba(235,235,245,.6) } .p-ruhig span { font-size: 3.4cqw } .p-ruhig b { font-size: 4.4cqw; font-weight: 600; font-variant-numeric: tabular-nums }
.p-flaeche { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 2cqw; min-height: 16cqw; border-radius: 4cqw; background: rgba(255,255,255,.06); padding: 0 2.4cqw 0 3.6cqw }
.p-balken { position: absolute; left: 0; top: 0; bottom: 0; background: color-mix(in srgb, var(--lila) 30%, transparent); transition: width .25s linear; pointer-events: none }
.p-text { position: relative; display: flex; flex-direction: column; gap: .2cqw } .p-text small { font-size: 3.2cqw; color: rgba(235,235,245,.6) } .p-text b { font-size: 8cqw; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1 }
.p-rechts { position: relative; display: flex; gap: 2cqw; animation: einblenden .2s ease both }
.screen-inhalt .p-knopf { border: 0; height: 13cqw; padding: 0 4cqw; border-radius: 99px; background: rgba(255,255,255,.14); color: #fff; font: 600 3.6cqw var(--sys); white-space: nowrap } .screen-inhalt .p-knopf.rueck { color: var(--lila) }
.p-flaeche.vorbei, .p-pille.vorbei { background: var(--lila); animation: puls .3s ease } .p-flaeche.vorbei small, .p-flaeche.vorbei b, .p-pille.vorbei span, .p-pille.vorbei b { color: var(--auf-akzent, #fff) }
@keyframes puls { 50% { transform: scale(1.02) } } @media (prefers-reduced-motion: reduce) { .p-flaeche.vorbei, .p-pille.vorbei, .p-rechts { animation: none } }
.p-pille { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; height: 14cqw; border-radius: 99px; background: rgba(255,255,255,.1); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.2); padding-right: 1.5cqw }
.screen-inhalt .p-links { position: relative; flex: 1; height: 100%; border: 0; background: none; display: flex; align-items: baseline; gap: 2cqw; padding-left: 5cqw; text-align: left } .p-links span { font-size: 3.6cqw; color: rgba(235,235,245,.6) } .p-links b { font-size: 5cqw; font-weight: 700; font-variant-numeric: tabular-nums } .p-pille .p-links { align-items: center }
.p-pille .p-knopf { position: relative; height: 11cqw }
.screen-inhalt .abbruch { border: 0; background: none; padding: 2cqw 0; color: rgba(235,235,245,.6); font: 500 3.6cqw var(--sys) } /* Training abbrechen (Sofia, 2026-11-10) */
.abbruch-frage { display: flex; flex-direction: column; gap: 2.4cqw; background: rgba(255,69,58,.12); border-radius: 4cqw; padding: 3.4cqw; font-size: 3.6cqw } .abbruch-frage div { display: flex; gap: 2.4cqw } .screen-inhalt .mini.rot { background: #FF453A; color: #fff }
/* Reparaturen nach der Prüfung durch Lilly, Shaun und O'Brien (2026-11-10) */
.unten-fest { position: sticky; bottom: 0; display: flex; flex-direction: column; gap: 2.4cqw; padding: 3cqw 0 1cqw; margin-top: auto; background: linear-gradient(transparent, #000 22%); z-index: 3 }
.saetze button.fertig { border: 0; background: none; color: rgba(235,235,245,.55); font: inherit; text-align: left; padding: 1cqw 0; cursor: pointer } .saetze button.fertig.an { color: var(--lila); font-weight: 700 }
.screen-inhalt .satz:disabled { opacity: .35; cursor: default }
.toast.rueck { display: flex; align-items: center; gap: 3cqw; top: auto; bottom: 24cqw; padding: 2.4cqw 2.4cqw 2.4cqw 4.4cqw } .toast.rueck button { border: 0; border-radius: 99px; background: rgba(255,255,255,.18); color: #fff; font: 600 3.4cqw var(--sys); padding: 2cqw 3.4cqw }
.loesch { display: flex; align-items: center; gap: 2.4cqw; flex-wrap: wrap; font-size: 3.6cqw; color: rgba(235,235,245,.8) } .loesch .mini:first-of-type { background: #FF453A; color: #fff }
.screen-inhalt .los, .screen-inhalt .satz, .screen-inhalt .weiter-k, .skala button.an, .chips button.an { color: var(--auf-akzent, #fff) }
.wert button { width: 11.5cqw; height: 11.5cqw; font-size: 6.4cqw } .wert { min-width: 0 } .werte { gap: 2.4cqw } /* größere Zielflächen (Lilly, 2026-11-10) */
.screen-inhalt .mini { padding: 2.6cqw 3.8cqw; font-size: 3.4cqw }
.screen-inhalt .zurueck { padding-block: 2.6cqw; margin-block: -2.6cqw }
.kopf2 .zahnrad { width: 12cqw; height: 12cqw; margin-right: -2cqw }
.screen-inhalt .los, .screen-inhalt .satz { font: 700 5.4cqw var(--sys); letter-spacing: .01em } /* Los und Satz fertig kräftiger und größer, „font: inherit“ hatte das überschrieben (Sofia, 2026-11-10) */
.neben.wie-los { margin-inline: 4.5cqw } .screen-inhalt .neben.wie-los { color: rgba(235,235,245,.6) } /* etwas grauer als „Los“ (Sofia, 2026-11-10) */ /* so breit wie „Los“ in der Karte darüber */
.screen-inhalt .woche .cardio.geplant i { background: repeating-radial-gradient(circle at center, rgba(255,255,255,.2) 0 .45cqw, transparent .45cqw 1.05cqw) } .screen-inhalt .woche .cardio.ja i { background: repeating-radial-gradient(circle at center, color-mix(in srgb, var(--lila) 70%, #000) 0 .45cqw, transparent .45cqw 1.05cqw) } /* Cardio: Ringe mit gleichen Abständen (Sofia, 2026-11-10) */
.ber-t .ber-p { font-style: normal; margin-left: 1.6cqw; letter-spacing: 0 } /* Durchschnitt direkt neben dem Bereich (Sofia, 2026-11-10) */
.screen-inhalt .zurueck { display: inline-flex; align-items: center; gap: .8cqw; line-height: 1 } .zurueck svg { width: 4.4cqw; height: 4.4cqw; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; margin-left: -1cqw }
.satz-a button { font-size: 3.3cqw } .vd-satz .sa { font-style: normal; font-weight: 400; color: rgba(235,235,245,.5); margin-left: 2cqw; font-size: 3.2cqw } /* Anstrengung je Satz (Sofia, 2026-11-10) */
.wahl-knoepfe { display: flex; flex-direction: column; gap: 2.4cqw } .wahl-knoepfe .neben { font-size: 3.8cqw; white-space: nowrap } .zwei-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqw } .zwei-knoepfe .neben { padding-left: 1cqw; padding-right: 1cqw } /* alle drei gleich groß (Sofia, 2026-11-10) */ /* Training und Ablauf getrennt wählen (Sofia, 2026-11-10) */
.wsaetze { display: flex; align-items: center; gap: 2.4cqw; flex-wrap: wrap; font-size: 3.4cqw; color: rgba(235,235,245,.55); font-variant-numeric: tabular-nums } .wsaetze small { font-size: 3cqw; font-weight: 600; text-transform: uppercase; letter-spacing: .04em } .wsaetze i { font-style: normal; font-weight: 700; font-size: 2.8cqw; border-radius: 1cqw; padding: .2cqw 1cqw; margin-right: 1cqw; background: rgba(255,255,255,.12) } /* Aufwärmsätze grau mit W (Shaun, 2026-11-10) */
.zl.abl span { display: flex; align-items: center; gap: 2.4cqw; text-align: left } .zl.abl .kreis { flex: none; width: 5.6cqw; height: 5.6cqw; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(235,235,245,.4); display: grid; place-items: center; font-style: normal; font-size: 3.2cqw; font-weight: 700; color: #fff } .zl.abl.an .kreis { background: var(--lila); box-shadow: none } .zl.abl.an span { color: rgba(235,235,245,.6) } .zl.abl em { font-size: 3.2cqw } /* Abläufe abhaken wie in Erinnerungen (Shaun, Sofia, 2026-11-10) */
.ausf.vorher { justify-content: space-between; color: #fff } .ausf.vorher b { font-weight: 600 } .ausf.vorher em { font-style: normal; color: var(--lila); font-weight: 600; white-space: nowrap } .abl-z { margin-top: .4cqw }
.zl.schalter-z { align-items: center } .schalter { position: relative; flex: none; width: 13cqw; height: 8cqw; border-radius: 99px; background: rgba(120,120,128,.36); transition: background .2s } .schalter b { position: absolute; top: .6cqw; left: .6cqw; width: 6.8cqw; height: 6.8cqw; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .2s } .schalter.an { background: var(--lila) } .schalter.an b { transform: translateX(5cqw) } /* Schalter wie in iOS (Sofia, 2026-11-10) */
.screen-inhalt .woche span.heute { color: var(--lila); font-weight: 700 } .screen-inhalt .woche span.heute.ja { color: rgba(235,235,245,.6); font-weight: 600 } .screen-inhalt .woche .heute i { box-shadow: none } .screen-inhalt .woche .heute.geplant i { background: rgba(255,255,255,.1) } .screen-inhalt .woche .heute.ja i { background: color-mix(in srgb, var(--lila) 55%, #000) } .screen-inhalt .woche .heute.frei i { background: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18) } /* heute: Tageskürzel in Akzentfarbe statt Ring, Kreis wie die anderen Tage (Sofia, 2026-11-10) */
.screen-inhalt .woche .ja i { background: color-mix(in srgb, var(--lila) 55%, #000) } /* erledigte Tage dunkles Lila statt Weiß (Sofia, 2026-11-10) */
.kopf2 .zahnrad { color: rgba(235,235,245,.6) } /* grau wie das Datum, muss die Knopf-Farbe überstimmen (Sofia, 2026-11-10) */
.satzw { display: inline-grid; grid-template-columns: 15cqw 4cqw 6cqw; align-items: baseline; font-variant-numeric: tabular-nums } .satzw b { font-weight: 400; text-align: right } .satzw i { font-style: normal; text-align: center; opacity: .7 } .satzw u { text-decoration: none; text-align: left } .satzw.nur { grid-template-columns: 25cqw } .satzw.nur b { text-align: right } /* Kilo, × und Wdh. je in einer Spalte (Sofia, 2026-11-10) */
.vk-liste { display: flex; flex-direction: column; gap: 2.4cqw } .vk { gap: 0; padding: 2.9cqw 4cqw; border-radius: 3cqw } /* Verlauf zum Aufklappen (Sofia, 2026-11-10) */
.vk-kopf { display: flex; align-items: center; gap: 2cqw } .vk-auf { flex: 1; display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; column-gap: 2.6cqw; border: 0; background: none; color: #fff; text-align: left; padding: 0 } .vk-auf small { color: rgba(235,235,245,.6); font-size: 3.2cqw; min-width: 15cqw } .vk-auf b { font-family: "Sofia Sans", var(--sys); font-weight: 800; font-size: 4.6cqw }
.vk-auf .pfeil { width: 4.4cqw; height: 4.4cqw; fill: none; stroke: rgba(235,235,245,.6); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; align-self: center; transition: transform .2s } .vk.auf .pfeil { transform: rotate(180deg) }
.vk .vk-info { border: 0; background: none; padding: 0; width: 8cqw; height: 8cqw; display: grid; place-items: center; color: rgba(235,235,245,.6) } .vk-info svg { width: 6cqw; height: 6cqw; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round } .vk-info .voll { fill: currentColor }
.vk-mehr { margin-top: 2.4cqw; padding-top: 1.6cqw; border-top: .5px solid rgba(255,255,255,.12); animation: aufklappen .2s ease } .vk-meta { display: block; font-size: 3.2cqw; color: rgba(235,235,245,.55); margin-bottom: .8cqw }
@keyframes aufklappen { from { opacity: 0; transform: translateY(-1.5cqw) } to { opacity: 1; transform: none } }
.vk-ue { display: flex; justify-content: space-between; gap: 2cqw; font-size: 3.5cqw; padding: .9cqw 0 } .vk-ue em { font-style: normal; color: rgba(235,235,245,.65); font-variant-numeric: tabular-nums; white-space: nowrap }
.vd-name { font-size: 4.2cqw; margin-bottom: 1cqw } .vd-satz { display: flex; justify-content: space-between; font-size: 3.7cqw; padding: 1.2cqw 0; border-top: .5px solid rgba(255,255,255,.1) } .vd-satz span { color: rgba(235,235,245,.6) } .vd-satz b { font-weight: 600; font-variant-numeric: tabular-nums }
.ber-t { display: flex; justify-content: space-between; font-size: 2.8cqw; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: rgba(235,235,245,.5); padding: 3.4cqw 0 .4cqw } .ber-t:first-child { padding-top: .4cqw } .bereiche .ber-t + .zl { border-top: 0 } /* Bereiche als leise Zwischentitel in einer Kachel, wie „Verplant“ im Dashboard (Sofia, 2026-11-10) */
.zl .gr { display: block; font-size: 3cqw; color: rgba(235,235,245,.5); font-weight: 400; margin-top: .3cqw } .zl.drei2 { align-items: center } .zl .pz { font-style: normal; display: inline-block; min-width: 11cqw; text-align: right; color: rgba(235,235,245,.6) } .zl .pz.plus { color: var(--lila); font-weight: 600 } /* wieder helles Lila (Sofia, 2026-11-10) */
.zl.ohne-pfeil:active span, .zl.ohne-pfeil:focus-visible span { color: var(--lila) } .zl.ohne-pfeil { -webkit-tap-highlight-color: transparent } .zl.ohne-pfeil span { transition: color .15s }
.erkl { line-height: 1.45 } .pkt-a { font-weight: 400; color: rgba(235,235,245,.55); margin-left: 1.6cqw; font-size: 3.1cqw; text-transform: none; letter-spacing: 0 }
.plan-z span { display: flex; align-items: center; gap: 2cqw } .zl.plan-z .haken { font-style: normal; width: 4cqw; height: auto; background: none; border-radius: 0; box-shadow: none; margin: 0; color: var(--lila); font-weight: 700; display: inline-block } .plan-z.an span { font-weight: 700 }
.treue { display: flex; align-items: center; gap: 2cqw; font-variant-numeric: tabular-nums } .treue-b { display: inline-block; width: 12cqw; height: 1.4cqw; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden } .treue-b i { display: block; height: 100%; background: rgba(235,235,245,.55); border-radius: 99px } /* Zuverlässigkeit je Wochenplan (Sofia, 2026-11-10) */
.kurve .pkt { fill: #1C1C1E; stroke: var(--lila); stroke-width: .8 } .kurve .pkt.an { fill: var(--lila); stroke: #fff; stroke-width: .7 } .kurve .pkt-ziel { fill: transparent; cursor: pointer } .kurve .pkt-linie { stroke: rgba(255,255,255,.25); stroke-width: .4; stroke-dasharray: 1 1 }
.pkt-info { display: flex; align-items: baseline; gap: 2cqw; font-size: 3.6cqw; margin-top: 1.4cqw } .pkt-info span { color: rgba(235,235,245,.6) } .pkt-info b { font-weight: 700; font-variant-numeric: tabular-nums } .pkt-info em { font-style: normal; margin-left: auto; color: var(--lila); font-weight: 600 }
.kurve-flaeche { fill: var(--lila); opacity: .14 } .akzent-punkt { fill: var(--lila) } .kurve .achse { font: 3.2px var(--sys); fill: rgba(235,235,245,.45) } /* längere Kurven mit Achsen (Sofia, 2026-11-10) */
.seg.zr { margin-bottom: .5cqw }
.wk-kopf { display: flex; justify-content: space-between; align-items: baseline } .wk-kopf b { font-size: 5cqw; font-weight: 700; font-variant-numeric: tabular-nums }
.wk-seg { display: flex; gap: 1.4cqw; margin: 1.2cqw 0 .6cqw } .wk-seg i { flex: 1; height: 2cqw; border-radius: 99px; background: rgba(255,255,255,.12) } .wk-seg i.voll { background: var(--lila) } .wk-seg i.jetzt { box-shadow: inset 0 0 0 1.2px var(--lila); background: transparent } /* Wochenfortschritt auf Heute (Sofia, 2026-11-10) */
.medien .platz .med { aspect-ratio: 1; border-radius: 2.4cqw; overflow: hidden; border: 0; padding: 0; background: #2C2C2E; position: relative; display: grid; place-items: center; cursor: pointer }
.medien .platz .med img, .medien .platz .med video { width: 100%; height: 100%; object-fit: cover; display: block } .medien .platz .med b { position: absolute; color: #fff; font-size: 5cqw; text-shadow: 0 0 6px rgba(0,0,0,.6) }
.medien .platz .med.plus { background: none; border: 1px dashed rgba(255,255,255,.25); color: rgba(235,235,245,.6); font-size: 7cqw }
.ausf { display: flex; gap: 2.6cqw; align-items: center; width: 100%; border: 0; background: #1C1C1E; border-radius: 3cqw; padding: 2.4cqw; text-align: left; color: rgba(235,235,245,.75); font-size: 3.4cqw; margin-bottom: 1cqw }
.ausf img, .ausf video { width: 11cqw; height: 11cqw; border-radius: 2cqw; object-fit: cover; flex: none } .ausf span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.zoom { position: absolute; inset: 0; z-index: 30; background: rgba(0,0,0,.92); display: grid; place-items: center } .zoom img, .zoom video { max-width: 100%; max-height: 80%; display: block } .zoom .zu { position: absolute; top: 12cqw; right: 4cqw; width: 9cqw; height: 9cqw; border-radius: 50%; border: 0; background: rgba(255,255,255,.18); color: #fff; font-size: 6cqw; line-height: 1 }
.proto-paar { display: flex; gap: 48px; justify-content: center; flex-wrap: wrap; width: 100% } .proto-spalte { width: 360px; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px } /* alte App rechts daneben zum Vergleichen (Sofia, 2026-11-10) */
.proto-label { margin: 0; font: 600 13px var(--sys); color: var(--grau); text-transform: uppercase; letter-spacing: .06em }
.stv .wort .balken-w { position: absolute; left: 50%; top: 50%; width: 300cqw; height: 3.2cqw; background: rgba(255,255,255,.5); transform: translate(-50%, -50%) rotate(-50deg) translateY(17cqw); pointer-events: none } /* weißer Balken an der Stelle der Linien, etwas dünner als die Schrift, geht mit dem Titel weg (Sofia, 2026-11-10) */
.stv .wort span { position: relative; z-index: 1 } /* Schrift liegt über der Linie */
.kopf2 { display: flex; justify-content: space-between; align-items: center }
.zahnrad { border: 0; background: none; width: 9cqw; height: 9cqw; display: grid; place-items: center; padding: 0; color: rgba(235,235,245,.6) } /* ohne Fläche dahinter, grau wie das Datum (Sofia, 2026-11-10) */
.zahnrad svg { width: 6.4cqw; height: 6.4cqw; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round }
.farben { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2cqw; margin-top: 1cqw }
.farbe { border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 1.2cqw; font-size: 3cqw; color: rgba(235,235,245,.7); padding: 0 }
.farbe i { width: 9cqw; height: 9cqw; border-radius: 50%; background: var(--f) } .farbe.an i { box-shadow: 0 0 0 .7cqw #000, 0 0 0 1.3cqw var(--f) } .farbe.an span { color: #fff; font-weight: 600 }
.akzent-strich { color: var(--lila) }
.stv { background: transparent !important } .stv .streifen { display: none } /* Start nutzt denselben Hintergrund wie die App, nur WORKOUT verschwindet */
.screen-inhalt.einblenden .inhalt, .screen-inhalt.einblenden .tabs { animation: einblenden .6s ease both }
.screen-inhalt.einblenden .tabs { animation-delay: .1s }
@keyframes einblenden { from { opacity: 0; filter: blur(8px) } to { opacity: 1; filter: blur(0) } }
@media (prefers-reduced-motion: reduce) { .screen-inhalt.einblenden .inhalt, .screen-inhalt.einblenden .tabs { animation: none } }
.start-hantel { position: absolute; right: 9cqw; bottom: 22cqw; width: 44cqw; height: auto } /* Hantel aus dem App-Icon unten rechts, etwas höher (Sofia, 2026-11-10) */
.skala.drei { grid-template-columns: repeat(3, 1fr) } .skala.drei button, .skala.drei span { font-size: 3.4cqw; padding: 2.4cqw 0 }
.proto { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 28px } .proto-text { display: flex; align-items: center; gap: 14px } .proto-text h2 { margin: 0 } /* Prototyp mittig (Sofia, 2026-11-10) */
@media (max-width: 760px) { .proto { grid-template-columns: minmax(0, 1fr) } }
.proto-text h2 { font-size: 24px; margin: 0 0 6px } .proto-text p { color: var(--grau); margin: 0 0 14px; max-width: 52ch }
.reset { border: 0; border-radius: 99px; padding: 9px 16px; background: rgba(118,118,128,.16); color: var(--text); font: 600 14px var(--sys); cursor: pointer }
.gross-handy { max-width: 360px; width: 100%; justify-self: center }
.screen-inhalt { position: absolute; inset: 0; z-index: 2 }
.screen-inhalt .inhalt { overflow-y: auto; scrollbar-width: none } .screen-inhalt .inhalt::-webkit-scrollbar { display: none }
.screen-inhalt button { font: inherit; color: inherit; cursor: pointer }
.screen-inhalt.start { z-index: 6 }
.startseite { position: absolute; inset: 0; cursor: grab; touch-action: none }
.stv { position: absolute; inset: 0; background: #000; overflow: hidden }
.stv .streifen { position: absolute; left: 50%; top: 50%; width: 300cqw; height: 42cqw; background: #AF52DE; opacity: .24; transform: translate(-50%, -50%) rotate(-50deg); filter: blur(10cqw) } /* verschwommen wie in der App (Sofia, 2026-11-10) */
.stv .wort { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 0 0 46cqw 7.5cqw; font-family: "Sofia Sans", -apple-system, sans-serif; font-weight: 800; font-size: 25cqw; line-height: .86; letter-spacing: -.005em; text-transform: uppercase; color: #fff } .stv .wort span + span { margin-left: 1.5cqw } /* Startbildschirm Variante B (Sofia, 2026-11-10) */
.stv .gina-box { position: absolute; right: 8cqw; bottom: 5cqw; width: 54cqw } .stv .gina-box svg { display: block; width: 100%; height: auto; overflow: visible } /* Schwanz darf über die Bildbox hinaus (2026-11-10) */
.tipp { position: absolute; left: 0; right: 0; bottom: 1.5cqw; margin: 0; text-align: center; font-size: 3cqw; color: rgba(235,235,245,.45); pointer-events: none }
.zl { width: 100%; background: none; border: 0; text-align: left; display: flex; justify-content: space-between; gap: 2cqw; font-size: 3.8cqw; padding: 2cqw 0; border-top: .5px solid rgba(255,255,255,.12) }
.liste3 .zl:first-child { border-top: 0 } .zl em { font-style: normal; color: rgba(235,235,245,.6); text-align: right; white-space: nowrap } .zl:disabled { cursor: default; opacity: 1 }
.zl.drei { flex-direction: column; gap: .4cqw } .zl.drei em { text-align: left }
.zl.wahl.an span { font-weight: 700 } .zl.wahl.an em { color: var(--lila) } .zl.neuzeile span, .zl.neuzeile em { color: var(--lila); font-weight: 700 }
.chips button { border: 0; font-size: 3.6cqw; padding: 1.3cqw 3cqw; border-radius: 99px; background: rgba(255,255,255,.12); color: #fff } .chips button.an { background: var(--lila) }
.seg button { border: 0; background: none; color: #fff; padding: 1.4cqw 0; border-radius: 2cqw; font-size: 3.6cqw } .seg button.an { background: #636366; font-weight: 600 } .seg { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)) }
.skala button { border: 0; color: #fff; padding: 1.4cqw 0; border-radius: 1.6cqw; background: rgba(255,255,255,.1); font-size: 3.3cqw } .skala button.an { background: var(--lila); font-weight: 700 }
.tabk { border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: .6cqw; font-size: 2.5cqw; font-weight: 600; color: rgba(235,235,245,.55) } .tabk.an { color: var(--lila) } .tabk { justify-content: center; padding: .6cqw 0 } .tabk svg { width: 7cqw; height: 7cqw; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round }
.ue { width: 100%; border: 0; text-align: left; color: #fff } .ue-text { display: flex } .punkte { display: flex }
.weiter-k { display: inline-block }
.uhr2 { font-size: 4.4cqw; font-variant-numeric: tabular-nums; color: rgba(235,235,245,.8) }
.pause.an { box-shadow: inset 0 0 0 1.2px var(--lila) } .mini { border: 0; background: rgba(255,255,255,.14); color: #fff; border-radius: 99px; padding: 1cqw 2.4cqw; font-size: 3.2cqw }
.werte.eins { grid-template-columns: 1fr }
.eingabe, .screen-inhalt textarea { width: 100%; box-sizing: border-box; background: rgba(118,118,128,.24); border: 0; border-radius: 2.6cqw; padding: 2.4cqw 3.4cqw; font: 3.8cqw var(--sys); color: #fff; resize: none }
.eingabe::placeholder, .screen-inhalt textarea::placeholder { color: rgba(235,235,245,.5) }
.zurueck { background: none; border: 0; padding: 0; text-align: left; align-self: flex-start }
.toast { position: absolute; left: 50%; top: 14cqw; transform: translateX(-50%); background: rgba(44,44,46,.95); color: #fff; border-radius: 99px; padding: 2cqw 4cqw; font-size: 3.4cqw; z-index: 20; white-space: nowrap }
.screen-inhalt .woche span { color: rgba(235,235,245,.6) }

/* src/app-rahmen.css */
/* Echte App: volle Handybreite statt Handy-Rahmen des Prototyps (Bauplan O'Brien, 2026-11-11).
   Alles in cqw rechnet weiter wie im Prototyp, nur ist der Bildschirm jetzt die ganze Breite (höchstens 430 px). */
html, body { height: 100%; background: #000; color: #fff; overscroll-behavior: none }
/* Seite selbst festnageln: auf dem iPhone ließ sich sonst die ganze Seite samt Leiste verschieben, gescrollt wird nur der Inhalt (Sofia, 2026-11-11) */
html, body { position: fixed; inset: 0; overflow: hidden }
/* Rahmen nie scrollbar, auch nicht von iOS beim Tippen; nur der Inhalt scrollt, und nur senkrecht; keine Scrollbalken (Sofia, 2026-11-11) */
#app.app-rahmen, #app .screen, #app .screen-inhalt { overflow: clip }
#app .screen-inhalt .inhalt { overflow-x: hidden; overflow-y: auto }
* { scrollbar-width: none } *::-webkit-scrollbar { display: none; width: 0; height: 0 }
body { margin: 0; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none }
input, textarea { -webkit-user-select: text; user-select: text }
#app.app-rahmen { position: fixed; top: 0; left: 0; right: 0; height: var(--app-h, 100%); display: flex; justify-content: center; background: #000 } /* Höhe misst rahmen.js an der sichtbaren Fläche (Sofia, 2026-11-11) */
#app .screen { position: relative; inset: auto; width: 100%; max-width: 430px; height: 100%; border-radius: 0; overflow: clip; container-type: inline-size }
/* Safe Area: Kopf unter der Statusleiste, Leiste über dem Home-Balken */
#app .screen-inhalt .inhalt { padding-top: calc(env(safe-area-inset-top) + 8cqw); padding-bottom: 0; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y }
/* Abstand am Seitenende als eigenes Element: Safari ignoriert padding-bottom in scrollenden Flex-Spalten, sonst endet der Inhalt hinter der Leiste und es gibt nichts zu scrollen */
#app .screen-inhalt .inhalt::after { content: ""; flex: 0 0 calc(27cqw + env(safe-area-inset-bottom)) }
#app .screen-inhalt .inhalt.ohne::after { flex-basis: calc(6cqw + env(safe-area-inset-bottom)) }
#app .tabs { bottom: max(3cqw, calc(env(safe-area-inset-bottom) * .6)) } /* tiefer, nah am Home-Balken (Sofia, 2026-11-11) */
#app .unten-fest { padding-bottom: calc(1cqw + env(safe-area-inset-bottom)) }
#app .korr { padding-bottom: calc(7cqw + env(safe-area-inset-bottom)) }
#app .toast { top: calc(env(safe-area-inset-top) + 4cqw) }
#app .toast.rueck { top: auto; bottom: calc(24cqw + env(safe-area-inset-bottom)) }
#app .zoom .zu { top: calc(env(safe-area-inset-top) + 4cqw) }
@media (min-width: 431px) { #app .screen { box-shadow: 0 0 0 1px #1C1C1E } }

/* Neue Teile der echten App, im Stil der App */
.test-zeichen { display: inline-block; vertical-align: .35em; margin-left: 1.6cqw; padding: .5cqw 2cqw; border-radius: 99px; background: #FF9F0A; color: #000; font: 700 2.8cqw var(--sys); letter-spacing: .06em }
.update-pille { position: absolute; z-index: 21; left: 50%; bottom: calc(max(3cqw, calc(env(safe-area-inset-bottom) * .6)) + 19cqw); transform: translateX(-50%); border: 0; border-radius: 99px; padding: 3.2cqw 5.6cqw; background: rgba(44,44,46,.92); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.25); color: #fff; font: 600 3.4cqw var(--sys); white-space: nowrap; cursor: pointer }
.screen-inhalt label.zl { cursor: pointer; color: #fff }
.screen-inhalt .version { text-align: center; margin-top: 2cqw }
.screen-inhalt .fehler-z { color: #FF6961 }
.screen-inhalt .code-feld { font: 600 7cqw var(--sys); letter-spacing: .4em; text-align: center; padding: 3cqw }
.screen-inhalt .wo-ueber.grau { margin-bottom: -2cqw }

.screen-inhalt .los[disabled] { opacity: .35; pointer-events: none } /* Anlegen erst mit Hauptmuskel (Sofia, 2026-11-11) */
.screen-inhalt .mk-hinweis { display: block; margin-top: 1.4cqw; font-size: .82em; line-height: 1.3; opacity: .7 } /* Hinweis unter „Rückseite folgt“ (Sofia, 2026-11-11) */
/* Update-Pille unten über der Leiste statt oben, besser mit dem Daumen erreichbar (Sofia, 2026-11-11) */
html.tippt #app .tabs, html.tippt #app .update-pille { display: none } /* beim Tippen keine Leiste über den Feldern (Sofia, 2026-11-11) */
/* Beispieldaten: ruhige graue Pille im Stil des TEST-Zeichens auf Heute (Sofia, 2026-11-11) */
.bsp-zeichen { display: inline-block; vertical-align: .35em; margin-left: 1.6cqw; padding: .6cqw 2.2cqw; border-radius: 99px; background: rgba(255,255,255,.12); color: rgba(235,235,245,.7); font: 600 2.8cqw var(--sys); letter-spacing: .02em }
/* Werkseinstellungen am Ende der Einstellungen (Sofia, 2026-11-11) */
.screen-inhalt .neben.werk { display: block; width: 100%; margin-top: 4cqw }
.loesch.werk { margin-top: 4cqw }

/* src/feedback.css */
/* Feedback nur im Test-Build: leiser Texteintrag am Seitenende, kein Knopf (Sofia, 2026-11-11) */
.screen-inhalt .fb-link { align-self: center; border: 0; background: none; color: rgba(235,235,245,.45); font: 3.4cqw var(--sys); padding: 3cqw; margin-top: 2cqw; cursor: pointer }
.fb-blatt .fb-arten { margin-top: -1cqw }
.fb-blatt .chips button { border: 0; font-size: 3.6cqw; padding: 1.6cqw 3.6cqw; border-radius: 99px; background: rgba(255,255,255,.12); color: #fff }
.fb-blatt .chips button.an { background: var(--lila); color: var(--auf-akzent, #fff) }
.fb-blatt textarea { min-height: 24cqw }