/* Basis-Layout, strukturell -- nicht für Kunden-Anpassungen. Farben/Icons:
   css/theme.css. Handy-Ansicht: css/webplayer-mobile.css. Regeln nach dem
   ARD-Gaming-Designsystem. */

:root {
	/* Strukturmaße, an mehreren Stellen genutzt (s. .tt-v7-body/.tt-v7-top, main). */
	--tt-sidebar-width: 340px;
	--tt-player-height: 560px;
	--tt-touch: 44px;   /* Mindestgröße Tippziel */
	/* Zentrale Textbausteine für CSS-generierten Inhalt (content:). */
	--tt-str-waiting: "Wird geladen …";
	--tt-str-no-data: "Noch keine Abstimmung zu dieser Frage";
	--tt-str-start: "Story starten";
}

/* Tastatur-Fokus: Limette, 3px, Abstand 3px -- für alle Bedienelemente, auch TWISTs eigene. */
.tt-v7-wrap :is(button, [role="button"], [tabindex]):focus-visible {
	outline: 3px solid var(--c-signal); outline-offset: 3px;
}
.tt-v7-wrap .tt-v7-settings-panel:focus-visible { outline: none; } /* Panel selbst bekommt den Fokus nur zum Vorlesen. */

/* Nur Handy-Ansicht (webplayer-mobile.css), am Desktop ausgeblendet. */
.tt-v7-pagenav, .tt-v7-impact-strip, .tt-v7-peek { display: none; }


.tt-v7-card {
	background: var(--c-bg); border-radius: 22px; padding: 24px;
	display: flex; flex-direction: column; gap: 16px;
}
.tt-v7-label { font-size: 13px; font-weight: 600; color: var(--c-fg-3); margin-bottom: 8px; }

.tt-v7-title-box { min-width: 200px; }
.tt-v7-title { font-size: 20px; font-weight: 700; line-height: 1.25; min-height: 1.25em; text-wrap: balance; }
/* Platzhalter, solange TWIST keinen Titel liefert: vor dem Start und im Intro vor Kapitel 1. */
.tt-v7-title:empty::before,
.tt-v7-title:has(> h2:empty)::before { content: var(--tt-title-default, ""); }
/* Titel im Modeler: <span class="tt-eyebrow">1. Akt</span><span class="tt-title">Text</span>.
   :where() = Spezifität 0, globales Webdesigner-CSS gewinnt immer. */
:where(.tt-eyebrow) { display: block; font-size: 13px; font-weight: 700; color: var(--c-accent-light); margin-bottom: 2px; }
:where(.tt-title) { display: block; font-size: 20px; font-weight: 700; color: var(--c-fg); }

.tt-v7-progress-box { min-width: 220px; }
.tt-v7-progress:empty::before { content: var(--tt-str-waiting); color: var(--c-fg-3); font-size: 13px; }
.tt-v7-progress .story-progress-value { color: var(--c-accent-light); font-weight: 600; font-variant-numeric: tabular-nums; }
/* TWISTs Hülle um Titel und Wert hat unten 8px Abstand (für Wert über dem Balken). In unserer Zeile
   hob das den Wert 4px über Balken und Bezeichnung. */
.tt-v7-progress .story-progress > div:first-child { margin: 0; }

.tt-v7-vars-box {
	background: var(--c-glass); border: 1px solid var(--c-line); border-radius: 18px; padding: 14px 12px;
}
.tt-v7-vars:empty::before { content: var(--tt-str-waiting); color: var(--c-fg-3); font-size: 13px; }
.tt-v7-vars .story-variables { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; list-style: none; margin: 0; padding: 0; }
.tt-v7-vars .story-variables > * { display: contents; }
/* Ab 5 Chips (inkl. ausgeblendetem Fortschritt): 2x2 statt 3 nebeneinander. */
.tt-v7-vars .story-variables:has(.story-variable:nth-child(5)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.tt-v7-body { display: grid; grid-template-columns: 1fr var(--tt-sidebar-width); gap: 16px; }
/* 980px = Leitbreakpoint des Designsystems, gleicher Wert wie bei .tt-v7-top unten. */
@media (max-width: 980px) { .tt-v7-body { grid-template-columns: 1fr; } }
.tt-v7-player-col { min-width: 0; }
.tt-v7-side-col { display: flex; flex-direction: column; gap: 12px; }
/* Antwortbuttons "Bei Audioende" (Standard, Einstellungen): Entscheidungskarte erst, wenn TWIST die
   Entscheidung fällig meldet (.tt-v7-decide-due). "Immer sichtbar" (.tt-v7-decisions-always): jederzeit,
   ein Klick überspringt dann den Rest der Szene. Beide Klassen setzt js/webplayer.js. */
.tt-v7-card:not(.tt-v7-decide-due):not(.tt-v7-decisions-always) .tt-v7-decisions-card { display: none; }
/* TWISTs Antwort-Behälter hat z-index: 999 (views/decide/styles.ts) und läge sonst über dem Einstellungen-Popover
   (40), dem Tooltip (75) und dem Neustart-Dialog (80). isolation sperrt die 999 in der Karte ein. */
.tt-v7-decisions-card { isolation: isolate; }
/* Einspaltig (Tablet hochkant): Entscheidungskarte direkt unter dem Player, nicht unter den Werten. */
@media (max-width: 980px) { .tt-v7-side-col .tt-v7-decisions-card { order: -1; } }

/* Statusrahmen in Limette, pulsiert während .tt-v7-decide-due (Klasse von js/webplayer.js). */
@keyframes tt-v7-pulse {
	0%   { box-shadow: 0 0 0 2px var(--c-signal); border-color: var(--c-signal); }
	100% { box-shadow: 0 0 0 2px var(--c-signal-soft); border-color: var(--c-signal-soft); }
}
.tt-v7-decide-due .tt-v7-decisions-card { animation: tt-v7-pulse 2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
	.tt-v7-decide-due .tt-v7-decisions-card { animation: none; border-color: var(--c-signal); }
}

.tt-v7-side-card {
	background: var(--c-glass); border: 1px solid var(--c-line); border-radius: 18px; padding: 16px;
}
.tt-v7-community:empty::before { content: var(--tt-str-no-data); color: var(--c-fg-3); font-size: 13px; }
.tt-v7-comm-count { font-size: 12px; color: var(--c-fg-3); margin-top: 10px; }

/* Reiter "Letzte/Aktuelle Frage": reines CSS (Radio + :checked), kein JS. */
.tt-v7-tabs { position: relative; display: flex; flex-wrap: wrap; gap: 6px; }
.tt-v7-tabs input { position: absolute; opacity: 0; pointer-events: none; }
.tt-v7-tabs label {
	display: inline-flex; align-items: center; min-height: var(--tt-touch); padding: 0 16px;
	font-size: 13px; font-weight: 600; cursor: pointer; border-radius: 999px;
	border: 1px solid var(--c-line); color: var(--c-fg-2); margin-bottom: 8px; box-sizing: border-box;
}
.tt-v7-tabs input:checked + label { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); }
.tt-v7-tabs input:focus-visible + label { outline: 3px solid var(--c-signal); outline-offset: 3px; }
.tt-v7-tabs .tt-v7-community { flex-basis: 100%; }
.tt-v7-tab-prev:not(:checked) ~ .tt-v7-comm-prev,
.tt-v7-tab-curr:not(:checked) ~ .tt-v7-comm-curr { display: none; }
/* Teilnehmerzahl: steht neben TWISTs Behälter (js/webplayer.js, updateCommunityCount()). Wie der
   Behälter nur beim gewählten Reiter, und nur wenn TWIST dort eine Abstimmung zeigt. */
.tt-v7-tabs .tt-v7-comm-count { flex-basis: 100%; margin-top: 4px; } /* + 6px gap = 10px wie bisher */
.tt-v7-tab-prev:not(:checked) ~ .tt-v7-comm-count-prev,
.tt-v7-tab-curr:not(:checked) ~ .tt-v7-comm-count-curr,
.tt-v7-community:empty + .tt-v7-comm-count { display: none; }

/* TWISTs Anzeigen zur Spracheingabe in der Antwortkarte (Kreisel "startet", Balken "hört zu"):
   Der Kreisel zeichnet weit über seinen 40px-Kasten hinaus (Bogen ~80px) und lag über dem ersten
   Button: halb so groß, im Kasten. Schaltet man das Mikro aus, setzt TWIST beide Anzeigen nicht
   zurück: dann ausblenden (ihre Hüllen sind die einzigen klassenlosen divs mit Inline-Abstand). */
.tt-v7-card .decision-view .loading-spinner { top: 0; margin-left: 0; transform: scale(.5); transform-origin: 0 0; }
.tt-v7-card:has(#mic-input-disabled) .decision-view > div[style]:not([class]) { display: none; }

/* Antwortbuttons: TWIST-Komponente .button/.button-content, als Pille umgestylt.
   Mehrere Antworten pro Block -> umrandet statt hellblau gefüllt (nur ein Primary-CTA pro Block). */
.tt-v7-side-card .button {
	display: block; width: 100%; min-height: var(--tt-touch); text-align: left; cursor: pointer;
	background: var(--c-glass-2); border: 1px solid var(--c-line); color: var(--c-fg);
	border-radius: 999px; padding: 11px 20px; margin-bottom: 8px; font-family: inherit;
}
.tt-v7-side-card .button:last-child { margin-bottom: 0; }
.tt-v7-side-card .button:hover { border-color: var(--c-accent); }
/* TWIST zeichnet den Rahmen als 4px-Schatten, zentriert die Buttons schmal und setzt Versalien. */
.tt-v7-side-card .button {
	box-shadow: none; box-sizing: border-box; letter-spacing: normal;
	display: flex; align-items: center; justify-content: center; text-align: center;
}
.tt-v7-side-card .button-content p { margin: 0; font-size: 14px; font-weight: 600; text-transform: none; }
.tt-v7-decisions-card .decision-view { align-items: stretch; }
/* TWIST setzt unter die Antworten 30px Abstand, in der Karte nur Leerraum. */
.tt-v7-decisions-card .decisions-wrapper { width: 100%; align-items: stretch; margin: 0; }
/* TWISTs Hover-Effekt (eckiger 4px-Rahmen über ::before/::after) passt nicht zur Pille. */
.tt-v7-wrap .tt-v7-side-card .button::before,
.tt-v7-wrap .tt-v7-side-card .button::after { display: none; }
/* Hinweis "Spracheingabe nicht verfügbar" steht schon unter der Steuerleiste (#speech-not-available);
   in der ausgelagerten Entscheidungskarte wäre er doppelt. */
.tt-v7-wrap #decide-speech-not-available { display: none; }
.tt-v7-wrap #speech-not-available { color: var(--c-fg-2); font-size: 13px; line-height: 1.4; }
/* "Triff deine Wahl": Highlight-Headline in Limette wie der Statusrahmen, ohne Versalien. */
.tt-v7-wrap #decide-title { color: var(--c-signal); text-transform: none; letter-spacing: normal; }

/* --- Umstyling der TWIST-eigenen Klassennamen (kein eigenes Markup) --- */
/* TWIST-Markup: <section class="story-progress"><div>Wert</div>
   <div class="story-progress-track">...</div></section>, als Flex-Reihe. */
.tt-v7-wrap .story-progress { display: flex; align-items: center; gap: 10px; }
.tt-v7-wrap .story-progress-value { white-space: nowrap; }
.tt-v7-wrap .story-progress-track { background: var(--c-glass-2); border-radius: 99px; height: 6px; flex: 0 0 200px; }
.tt-v7-wrap .story-progress-bar { background: var(--c-accent); border-radius: 99px; }

/* Balken wird per JS gemalt (paintVariableBars()), Breite hängt vom Wert ab. */
.tt-v7-wrap .story-variable {
	display: flex; flex-direction: column; align-items: center; gap: 6px;
	background: var(--c-glass); border: 1px solid var(--c-line); border-radius: 14px;
	padding: 10px 6px; margin: 0; min-width: 0;
}
/* Icon pro Slot, s. theme.css --tt-icon-N. */
.tt-v7-wrap .story-variable > span[aria-hidden="true"] {
	display: block; width: 22px; height: 22px; flex-shrink: 0;
	background: center / contain no-repeat;
}
.tt-v7-wrap .story-variable[data-variable-slot="2"] > span[aria-hidden="true"] { background-image: var(--tt-icon-2); }
.tt-v7-wrap .story-variable[data-variable-slot="3"] > span[aria-hidden="true"] { background-image: var(--tt-icon-3); }
.tt-v7-wrap .story-variable[data-variable-slot="4"] > span[aria-hidden="true"] { background-image: var(--tt-icon-4); }
.tt-v7-wrap .story-variable[data-variable-slot="5"] > span[aria-hidden="true"] { background-image: var(--tt-icon-5); }
.tt-v7-wrap .story-variable-name { font-size: 12px; font-weight: 600; color: var(--c-fg-3); display: flex; align-items: center; justify-content: center; min-height: 26px; text-align: center; overflow-wrap: anywhere; }
/* Für Screenreader im DOM, visuell versteckt (Balken ersetzt die Zahl). */
.tt-v7-wrap .story-variable-value {
	position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0);
}
/* Kein overflow:hidden, damit der Mittelstrich über den Balken hinausragt.
   Die Füllung rundet deshalb selbst ihr äußeres Ende ab (.neg links, .pos rechts). */
.tt-v7-varbar { position: relative; width: 100%; height: 12px; background: var(--c-glass-2); border-radius: 99px; }
.tt-v7-varbar-fill {
	position: absolute; top: 0; bottom: 0;
	transition: left .5s ease, width .5s ease, background-color .5s ease;
}
.tt-v7-varbar-fill.neg { border-radius: 99px 0 0 99px; }
.tt-v7-varbar-fill.pos { border-radius: 0 99px 99px 0; }
/* Tooltip der Variablen (js/webplayer.js, Texte in js/labels.js). Bezugspunkt ist die Karte. */
.tt-v7-wrap .story-variable:not([data-variable-slot="1"]) { cursor: help; }
.tt-v7-tip {
	position: absolute; z-index: 75; display: flex; flex-direction: column; gap: 2px;
	box-sizing: border-box; max-width: 280px; padding: 10px 12px; border-radius: 12px; pointer-events: none;
	background: var(--c-bg-2); border: 1px solid var(--c-accent); box-shadow: 0 8px 24px var(--c-shadow);
	color: var(--c-fg-2); font-size: 13px; line-height: 1.4;
}
.tt-v7-tip[hidden] { display: none; }
.tt-v7-tip strong { color: var(--c-fg); font-weight: 700; }
/* Wert hat sich geändert (Klassen setzt paintVariableBars()): Kachel leuchtet kurz
   grün (steigt) bzw. rot (sinkt). */
.tt-v7-wrap .story-variable.tt-v7-up { --tt-flash: var(--c-positive); }
.tt-v7-wrap .story-variable.tt-v7-down { --tt-flash: var(--c-negative); }
.tt-v7-wrap .story-variable:is(.tt-v7-up, .tt-v7-down) { animation: tt-v7-flash 1.2s ease-out; }
@keyframes tt-v7-flash {
	0%   { box-shadow: 0 0 0 2px var(--tt-flash), 0 0 18px var(--tt-flash); }
	100% { box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
	.tt-v7-varbar-fill { transition: none; }
	.tt-v7-wrap .story-variable:is(.tt-v7-up, .tt-v7-down) { animation: none; }
}
/* Mittelstrich: weiß (weder rot noch grün), breiter und 5px höher als der Balken, mit dunkler Kontur. */
.tt-v7-varbar-tick {
	position: absolute; left: 50%; top: -5px; bottom: -5px; width: 4px; margin-left: -2px; z-index: 1;
	background: var(--c-fg); border-radius: 2px; box-shadow: 0 0 0 1px var(--c-bg);
}

.tt-v7-wrap .community-option { margin-bottom: 10px; }
.tt-v7-wrap .community-option:last-child { margin-bottom: 0; }
.tt-v7-wrap .community-option.own-choice { color: var(--c-accent-light); font-weight: 600; }

/* FullPlayer auf unser Design umgestellt, mit .tt-v7-card verschmolzen.
   Farben über TWISTs eigene CSS-Variablen (fullPlayer/styles.ts).
   Immersiv-Bild auf <main> begrenzt, gesetzt per JS (syncMediaBackground()). */
.tt-v7-player-col .full-player {
	min-height: 0; position: static;
	background: transparent !important; padding: 0 !important; border-radius: 0 !important;
}
/* Auf .tt-v7-card statt nur .full-player: umgeleitete Module (Fortschritt/
   Variablen/Community) rendern außerhalb von .full-player. */
.tt-v7-card, .tt-v7-player-col .full-player {
	--twist-panel: var(--c-bg-2) !important;
	--twist-ink: var(--c-fg) !important;
	--twist-border: var(--c-line) !important;
	--twist-track: var(--c-glass-2) !important;
	--twist-focus: var(--c-signal) !important;
	--twist-accent: var(--c-accent) !important;
	--twist-selected: var(--c-selected) !important;
	--twist-radius: 18px !important;
}
.tt-v7-card :is(.story-progress, .story-variables, .community-comparison) {
	background: transparent; border: 0; padding: 0;
}
#story-progress-title, #story-variables-title { display: none; }
/* Community-Modul-Titel zeigt TWISTs echte Frage, nur an unsere Karte angepasst. */
.tt-v7-community [id^="community-"] {
	font-size: 14px; font-weight: 600; color: var(--c-fg-2); margin: 0 0 10px; line-height: 1.35;
	text-transform: none; letter-spacing: normal;
}
.tt-v7-card .story-variable[data-variable-slot="1"] { display: none; }
.tt-v7-player-col .full-player,
.tt-v7-player-col .full-player * { color: var(--c-fg); }
.tt-v7-player-col .text-view p,
.tt-v7-player-col .text-view div,
.tt-v7-player-col .text-view span { color: var(--c-fg-2) !important; }

/* data-audio-vis="timeline" (kein "spectrum"). min-height gegen Timeline-Höhen-Bug. */
.tt-v7-player-col .audio-spectrum-wrapper { min-height: 20px !important; }
.tt-v7-player-col .rc-progress-line-path { stroke: var(--c-accent) !important; }
/* Zeitanzeige "00:01 / 01:41": TWISTs Feld ist 14 Zeichen breit und linksbündig, die Ziffern sind aber
   unterschiedlich breit (die 1 schmaler). Gleich breite Ziffern, sonst rutscht der Text im Sekundentakt. */
.tt-v7-player-col .time-progress { font-variant-numeric: tabular-nums; }

/* Leere Details-Spalte von FullPlayers internem Grid ausblenden, Grid auf eine Spalte. */
.tt-v7-player-col .full-player-details { display: none; }
.tt-v7-player-col .full-player :has(> .full-player-details) { grid-template-columns: 1fr !important; }

/* Feste Höhe + Flexbox: <main> bleibt in allen drei Ansichten gleich hoch.
   Scroll-Reset auf neuen Text: js/webplayer.js, nicht TWISTs scrollUpText().
   Begründung: docs/TWIST-ABHAENGIGKEITEN.md, "Entwurfsentscheidungen". */
.tt-v7-player-col main {
	position: relative;
	display: flex; flex-direction: column;
	background: var(--c-glass); border: 1px solid var(--c-line); border-radius: 18px;
	height: var(--tt-player-height, 560px);
	background-size: cover; background-position: center;
	/* Default-Bild vor Story-Start, danach übernimmt js/webplayer.js (syncMediaBackground()). */
	background-image: var(--tt-image-default, none);
}
.tt-v7-player-col .chapter-player {
	flex: 0 0 auto; margin-top: auto; background: var(--c-bg-2);
	border-top: 1px solid var(--c-line); padding: 10px 12px 4px;
	border-radius: 0 0 18px 18px; position: relative; z-index: 1;
}

/* Vor dem ersten Play: nur Bild + Play-Button. Titel/Fortschritt/Sidebar
   ausgeblendet, .tt-v7-started (js/webplayer.js) schaltet das wieder an.
   Feste Höhe hält die Kartengröße beim Start stabil. Mobil s.
   webplayer-mobile.css. */
.tt-v7-card:not(.tt-v7-started) .tt-v7-top,
.tt-v7-card:not(.tt-v7-started) .tt-v7-side-col {
	display: none;
}
.tt-v7-card:not(.tt-v7-started) { height: calc(var(--tt-player-height, 560px) + 48px); }
/* <main> deckt die ganze Karte (inset:0 gegen .tt-v7-card). TWISTs unbenannter
   Behälter um <main> hat position:relative und würde sonst zum Bezugspunkt --
   vor dem Start deshalb auf static gesetzt. Rein per CSS, keine Messwerte im Skript. */
.tt-v7-card:not(.tt-v7-started) .tt-v7-player-col :has(> main) { position: static !important; }
.tt-v7-card:not(.tt-v7-started) .tt-v7-player-col main {
	position: absolute; inset: 0; z-index: 3; height: auto; border-radius: 22px;
}
.tt-v7-card:not(.tt-v7-started) .chapter-player {
	position: absolute; inset: 0; z-index: 2; margin: 0;
	background: transparent; border: 0; padding: 0; border-radius: 18px;
	display: flex; align-items: center; justify-content: center;
}
.tt-v7-card:not(.tt-v7-started) .chapter-player .audio-spectrum-wrapper,
.tt-v7-card:not(.tt-v7-started) .chapter-player .controls-addition,
.tt-v7-card:not(.tt-v7-started) .chapter-player .back-btn,
.tt-v7-card:not(.tt-v7-started) .chapter-player .forward-btn,
.tt-v7-card:not(.tt-v7-started) .chapter-player .controls-mic {
	display: none;
}
.tt-v7-card:not(.tt-v7-started) .chapter-player .audio-controls {
	justify-content: center;
}
/* Play-Pille: Hellblau mit dunklem Icon (Primary-Handlung). */
.tt-v7-card:not(.tt-v7-started) .chapter-player .toggle {
	width: 76px; height: 76px; border-radius: 999px; border: 0;
	background: var(--c-accent); display: grid; place-items: center;
	box-shadow: 0 10px 22px -8px var(--c-shadow);
}
.tt-v7-card:not(.tt-v7-started) .chapter-player .toggle:hover { background: var(--c-accent-hover); }
.tt-v7-card:not(.tt-v7-started) .chapter-player .toggle svg { width: 34px; height: 34px; }
.tt-v7-card:not(.tt-v7-started) .chapter-player .toggle svg path { fill: var(--c-on-accent) !important; }
.tt-v7-card:not(.tt-v7-started) .tt-v7-restart { visibility: hidden !important; }
/* TWISTs Hinweis "Beim Aktivieren der Spracherkennung kann es sein, dass sie auf deinem Gerät
   nicht richtig funktioniert" (Label speechRecProblems) nie zeigen (16.10.2026): TWIST blendet
   ihn pauschal auf jedem iPhone/iPad mit Spracheingabe ein, ohne zu prüfen, ob die Erkennung
   funktioniert (starterView.tsx, startAudioBook/index.tsx) -- das irritierte, wenn sie geht.
   #notifier nutzt TWIST nur dafür; echte Fehler (speechNotPossible, speechNotAvailable…)
   kommen über andere Elemente und bleiben sichtbar. Auf dem Startbild steht stattdessen
   eine Beschriftung unter dem Play-Knopf. */
.tt-v7-card #notifier { display: none !important; }
.tt-v7-card:not(.tt-v7-started) .chapter-player .toggle { position: relative; overflow: visible; }
.tt-v7-card:not(.tt-v7-started) .chapter-player .toggle::after {
	content: var(--tt-str-start); position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%);
	white-space: nowrap; font-size: 16px; font-weight: 700; color: var(--c-fg);
	text-shadow: 0 1px 3px rgba(0,0,0,.6), 0 0 16px rgba(0,0,0,.6);
}

/* Eigene scrollbare Box, <main> selbst bleibt fest. */
.tt-v7-player-col .text-view {
	flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 8px !important;
	/* Am Textende nicht in die Seite weiterscrollen (sonst rutscht die ganze Seite bzw. federt nach). */
	overscroll-behavior: contain;
	/* Weicher Auslauf unten: zeigt, dass weiterer Text folgt. Die letzte Zeile liegt am Ende über
	   dem Auslauf (Abstand von TWIST darunter rund 35px). */
	-webkit-mask-image: linear-gradient(#000 calc(100% - 32px), transparent);
	mask-image: linear-gradient(#000 calc(100% - 32px), transparent);
}
/* Text beginnt oben, keine vertikale Zentrierung. */
.tt-v7-player-col .text-view { justify-content: flex-start !important; }
.tt-v7-player-col .chat-transcript {
	flex: 1 1 auto; min-height: 0; max-height: none !important; overscroll-behavior: contain;
}
/* Chat-Textgröße an Standard-Text angeglichen. NICHT nur auf .text-wrapper:
   Chat-Blasen haben keine eigene font-size und erben sie von .chat-transcript. */
.tt-v7-player-col .text-wrapper,
.tt-v7-player-col .chat-transcript {
	font-size: calc(var(--tt-text-base, 17px) + var(--tt-text-step, 0px)) !important;
}
.tt-v7-card.tt-v7-text-sm { --tt-text-step: -2px; }
.tt-v7-card.tt-v7-text-lg { --tt-text-step: 2px; }

/* Immersiv: kein Text über dem Bild. */
.tt-v7-player-col .full-player.player-view-immersive .text-view {
	display: none;
}

/* TWISTs Ansicht-Umschalter ist immer unsichtbar. Bedient wird er über die eigenen Knöpfe
   im Einstellungen-Panel ([data-view], js/webplayer.js, syncViewButtons()), die seine
   Knöpfe auslösen. Details: docs/TWIST-ABHAENGIGKEITEN.md. */
.tt-v7-player-col .full-player :has(> .player-view-switcher-wrapper) { display: none !important; }

/* contain:layout macht die Karte zum Bezugspunkt der position:fixed-Elemente
   darin (Einstellungen-Sheet): sie hängen an der Karte, nicht
   am Fenster. Was beim Scrollen sichtbar bleibt (Restart, Handy-Leiste), hängt per
   position:absolute an der Karte, Grund s. webplayer-mobile.css. */
.tt-v7-card { position: relative; contain: layout; }
.tt-v7-top { display: grid; grid-template-columns: 1fr var(--tt-sidebar-width); gap: 16px; }
/* Titel+Fortschritt gestapelt statt nebeneinander. */
.tt-v7-top-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
/* Gleicher Breakpoint wie .tt-v7-body oben. */
@media (max-width: 980px) { .tt-v7-top { grid-template-columns: 1fr; } }

/* Zahnrad öffnet Popover (Desktop) / Sheet (Handy, s. webplayer-mobile.css). */
.tt-v7-top-side { position: relative; display: flex; justify-content: flex-end; }
.tt-v7-gear {
	width: var(--tt-touch); height: var(--tt-touch); flex: none; display: grid; place-items: center;
	border-radius: 999px; border: 1px solid var(--c-line); background: var(--c-glass);
	color: var(--c-fg-2); cursor: pointer;
}
.tt-v7-gear svg { width: 20px; height: 20px; }
.tt-v7-gear:hover { background: var(--c-glass-2); color: var(--c-fg); }
.tt-v7-settings-panel {
	display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; width: 320px;
	background: var(--c-bg-2); border: 1px solid var(--c-line); border-radius: 18px;
	padding: 14px 16px 16px; box-shadow: 0 16px 40px var(--c-shadow);
}
.tt-v7-settings-open .tt-v7-settings-panel { display: block; }
.tt-v7-sheet-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 16px; font-weight: 700; color: var(--c-fg); }
.tt-v7-sheet-close {
	width: var(--tt-touch); height: var(--tt-touch); flex: none; border-radius: 999px; border: 1px solid var(--c-line);
	background: var(--c-glass); color: var(--c-fg-2); cursor: pointer; display: grid; place-items: center;
}
.tt-v7-sheet-close svg { width: 16px; height: 16px; }
.tt-v7-settings-row { margin-bottom: 14px; }
.tt-v7-settings-row:last-child { margin-bottom: 0; }
/* Fehlermeldung von TWIST, wenn die Ansicht nicht gespeichert werden konnte (gespiegelt). */
.tt-v7-view-error { margin: 6px 0 0; font-size: 13px; line-height: 1.35; color: var(--c-negative); }
.tt-v7-seg button:disabled { opacity: .5; cursor: default; }

.tt-v7-seg { display: flex; gap: 4px; }
.tt-v7-seg button {
	flex: 1; min-height: var(--tt-touch); padding: 0 6px; border-radius: 999px; border: 1px solid var(--c-line);
	background: var(--c-glass); color: var(--c-fg-2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.tt-v7-seg button:hover { border-color: var(--c-accent); }
.tt-v7-seg button.on { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); }

/* Eigener Restart-Button statt TWISTs eigenem (ausgeblendet). Anker:
   TWISTs leerer Platzhalter .controls-addition. Position: js/webplayer.js
   positionRestart(). Details: docs/TWIST-ABHAENGIGKEITEN.md.
   absolute statt fixed (Safari, s. webplayer-mobile.css); z-index über der
   Handy-Leiste (30), die dort nicht mehr in TWISTs Wrapper steckt. */
.tt-v7-player-col .full-player :has(> .restart-control) { display: none; }
.tt-v7-restart {
	visibility: hidden; position: absolute; z-index: 31;
	display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px;
	background: transparent; border: 0; padding: 0; margin: 0; cursor: pointer; color: var(--c-accent);
	font-family: inherit; /* Buttons erben die Schrift sonst nicht (Browser-Standardschrift) */
}
.tt-v7-restart svg { width: 26px; height: 26px; flex: none; }
.tt-v7-restart span { font: inherit; font-size: 13px; font-weight: 400; color: var(--c-fg); text-align: center; }
.tt-v7-restart:hover { color: var(--c-accent-light); }
.tt-v7-restart:hover span { color: var(--c-fg-2); }

/* Bestätigung vor dem Neustart: deckt die Karte ab (js/webplayer.js). */
.tt-v7-confirm {
	position: absolute; inset: 0; z-index: 80; display: grid; place-items: center;
	padding: 16px; background: var(--c-dim);
	touch-action: none; /* Wischen auf der Abdunklung scrollt nicht die Seite dahinter. */
}
.tt-v7-confirm[hidden] { display: none; }
.tt-v7-confirm-box {
	width: 100%; max-width: 320px; padding: 20px; border-radius: 18px;
	background: var(--c-bg-2); border: 1px solid var(--c-line); box-shadow: 0 16px 40px var(--c-shadow);
}
.tt-v7-confirm-text { margin: 0 0 16px; color: var(--c-fg); font-size: 16px; font-weight: 600; line-height: 1.4; }
.tt-v7-confirm-sub { display: block; margin-top: 4px; font-size: 14px; font-weight: 400; color: var(--c-fg-2); }
.tt-v7-confirm-actions { display: flex; gap: 8px; }
.tt-v7-confirm-actions button {
	flex: 1; min-height: var(--tt-touch); padding: 0 12px; border-radius: 999px; cursor: pointer;
	font: inherit; font-size: 14px; font-weight: 600;
	border: 1px solid var(--c-line); background: var(--c-glass); color: var(--c-fg-2);
}
.tt-v7-confirm-actions .tt-v7-confirm-ok { border-color: var(--c-accent); background: var(--c-accent); color: var(--c-on-accent); }