@import url('/static/css/schriften.css');

:root {
    --yt-bg: #f7f8f8;
    --yt-bg-erhoben: #ffffff;
    --yt-text: #14191a;
    --yt-text-schwach: #5b6667;
    --yt-akzent: #2f8791;
    --yt-erfolg: #5c8a1e;
    --yt-rand: #d8dedf;
}

@media (prefers-color-scheme: dark) {
    :root {
        --yt-bg: #0b0f10;
        --yt-bg-erhoben: #12181a;
        --yt-text: #e8ecec;
        --yt-text-schwach: #9aa5a6;
        --yt-akzent: #4cb9c5;
        --yt-erfolg: #96c841;
        --yt-rand: #223034;
    }
}

* { box-sizing: border-box; }

/* Grundlage für schmale Bildschirme (21.09.2026). Bis hierher hatte das Stylesheet
   keine einzige Regel für kleine Displays — die beiden Zeilen hier hängen an der
   Wurzel, weil sie auf jeder Seite dasselbe Problem verhindern:

   text-size-adjust: iOS Safari vergrößert Schrift eigenmächtig ("Text Autosizing"),
   sobald ein Block breiter ist als die Spalte, in der er steht. Genau das passierte
   auf der Gesprächsseite und ließ dort alles riesig aussehen.

   overflow-wrap: eine ununterbrochene Zeichenkette — ein gepasteter Portfolio-Link,
   ein Zugangstoken, ein langes Kompositum — ist sonst so breit wie sie ist und
   schiebt ihren Kasten über den Bildschirmrand hinaus. */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    background: var(--yt-bg);
    color: var(--yt-text);
    font-family: 'IBM Plex Mono', monospace;
    margin: 0;
    padding: 2rem 1rem;
    line-height: 1.6;
    overflow-wrap: break-word;
}

.container {
    max-width: 640px;
    margin: 0 auto;
}

.karte {
    background: var(--yt-bg-erhoben);
    border: 1px solid var(--yt-rand);
    border-radius: 8px;
    padding: 1.5rem;
}

/* Die Farben des Siegels stehen NICHT hier, sondern in app/static/js/avatar.js
   (FARBE): der Avatar erscheint auf gewoehnlichen Seiten (hier) UND auf
   Sitzungsseiten (buehne.css) — eine Farbdefinition in beiden Stylesheets waere
   wieder zwei Kopien. */
#avatar {
    display: block;
    margin: 0 auto 1rem;
    width: 100px;
    height: 100px;
}

#avatar svg, #avatar canvas,
.jury-avatar svg, .jury-avatar canvas { width: 100%; height: 100%; display: block; }
#avatar canvas, .jury-avatar canvas { image-rendering: pixelated; }

/* Kein border-radius: 50% mehr — das Siegel ist quadratisch (im Unterschied
   zum alten Canvas-Avatar, der hier rund pulsierte). Seit #avatar auch im
   delegiert-Zweig von agent.html vorkommt (Dashboard-Siegel, siehe
   .dash-kopf #avatar), setzt chat.js avatar-denkt jetzt auch dort — ein
   runder Schein um ein eckiges Siegel war eine Nebenwirkung, keine
   Entscheidung. */
#avatar.avatar-denkt {
    animation: avatar-puls 1.2s ease-in-out infinite;
}

@keyframes avatar-puls {
    0%, 100% { box-shadow: 0 0 0 0 var(--yt-akzent); }
    50% { box-shadow: 0 0 0 6px transparent; }
}

.knopf {
    background: var(--yt-akzent);
    color: var(--yt-bg-erhoben);
    border: none;
    border-radius: 6px;
    padding: 0.75rem 1.5rem;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

.knopf:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.knopf-warnung {
    background: #c85c3a;
}

.text-schwach {
    color: var(--yt-text-schwach);
    font-size: 0.9rem;
}

.text-agent {
    color: var(--yt-akzent);
}

/* Agenten-Erschaffung: einheitliche Feldgröße (Spec 5.0) — kein Auto-Grow, keine
   variable Breite, unabhängig vom Inhalt.
   `<label>` ist standardmäßig `inline` — ein Kind-Feld mit nur `width:100%` bekommt
   dadurch keine verlässliche, für alle Labels gleiche Bezugsbreite (Breite hängt vom
   umgebenden Inline-Fluss ab, nicht vom Container). Label UND Feld deshalb explizit
   `display:block`, damit alle Felder garantiert dieselbe Breite bekommen. */
#wizard label {
    display: block;
    margin-bottom: 1rem;
}

/* Breiter, sobald Platz da ist (23.09.2026).

   Befund: auf einem MacBook musste man in fast jedem Schritt ein Stück scrollen — bei
   Schritt 1, 2 und 7 um 18 bis 55 Pixel. Also nicht zu viel Inhalt, sondern eine zu
   schmale Spalte: 640px Lesebreite sind für Fließtext richtig und für ein Formular mit
   Auswahlkarten zu wenig. Bei 900px Breite bricht derselbe Text in weniger Zeilen um,
   und das Kartenraster in Schritt 6 legt statt drei fünf Karten nebeneinander.

   Nur für den Wizard, nicht für die Lesespalten: der Ausschreibungstext und die
   Gesprächsseite bleiben bei 640px, weil dort gelesen und nicht bedient wird. */
@media (min-width: 1000px) {
    body:has(#wizard) > .container {
        max-width: 960px;
    }

    #wizard .feld-einzeilig {
        max-width: 32rem;
    }

    /* Fünf Karten pro Zeile statt vier: bei 180px Mindestbreite passen in die 960px-Spalte
       nur vier, und zehn Kriterien brauchen damit drei Zeilen statt zwei — genau die
       Zeile, die den Schritt über den Bildschirmrand schiebt. 160px reichen für die
       längste Überschrift („EIGENSTÄNDIGKEIT") und lassen fünf Karten nebeneinander. */
    #wizard .karten-raster {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        /* Die letzten zehn Pixel für Schritt 6 auf einem 800px hohen Fenster: etwas
           weniger Luft um das Raster und zwischen den Zeilen. */
        gap: 0.6rem;
        margin: 0.75rem 0;
    }

    /* Die letzten Pixel für Schritt 6 auf einem 800px hohen Fenster. Die Mindesthöhe der
       Karte stammt aus einer Zeit, in der die Karten breiter waren und der Text weniger
       Zeilen brauchte — bei fünf Karten pro Zeile füllt er sie ohnehin. */
    #wizard .karte-auswahl {
        min-height: 5.5rem;
        padding: 0.75rem;
    }

    #wizard {
        padding: 1.25rem 1.5rem;
    }

    /* Die Personenfelder zweispaltig: sieben Zeilen untereinander sind mehr, als auf
       einen Laptop-Bildschirm passen. Auf dem Handy (unterhalb dieses Umbruchpunkts)
       bleibt es bei einer Spalte — nebeneinander wären die Felder dort zu schmal. */
    .personen-felder {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 1.5rem;
    }

    .personen-felder .feld-einzeilig {
        max-width: none;
    }
}

/* Radiogruppe Vorbild-Haltung (Schritt 3): natives Fieldset/Legend für Screenreader-
   Gruppierung, aber ohne den browser-typischen Rahmen — soll wie der vorher hier
   stehende <p class="text-schwach"> aussehen, nicht wie ein eigenständiger Kasten. */
#wizard fieldset {
    border: none;
    padding: 0;
    margin: 0 0 1rem;
}

#wizard legend {
    padding: 0;
    margin-bottom: 0.5rem;
}

/* Ankreuzfelder im Wizard: Das native Kästchen ist 13x13px und verschwindet neben
   1rem-Text — bei den mehrzeiligen Zustimmungen lief der Text ausserdem unter dem
   Kästchen durch und las sich wie Fliesstext statt wie eine Frage, die man
   beantworten muss. Zwei Spalten statt Inline-Fluss: Bedienelement links in fester
   Breite, Text daneben in einer eigenen Spalte mit haengendem Einzug.
   Die Trefferflaeche war schon vorher das ganze Label (das <input> steht darin) —
   hier geht es darum, dass man sieht, wo man tippen kann und ob es gesetzt ist. */
#wizard .feld-zustimmung,
#wizard .feld-wahl {
    display: flex;
    gap: 0.65rem;
}

#wizard .feld-zustimmung {
    align-items: flex-start;
    padding: 0.5rem 0;
}

/* Einzeilige Auswahl: mittig ausgerichtet und auf 44px Zeilenhoehe gebracht, damit
   die drei Haltungen nicht als drei enge Textzeilen aneinanderkleben. */
#wizard .feld-wahl {
    align-items: center;
    min-height: 2.75rem;
    margin-bottom: 0;
}

/* Der Satz steht in einem eigenen <span>: sonst waere ein <a> darin ein eigenes
   Flex-Element und spraenge aus dem Satz heraus ("Ich [Foerderrichtlinien]
   akzeptiere die"). */
#wizard .feld-zustimmung span,
#wizard .feld-wahl span {
    flex: 1 1 auto;
    min-width: 0;
}

#wizard .feld-zustimmung input,
#wizard .feld-wahl input {
    flex: 0 0 auto;
    width: 1.35rem;
    height: 1.35rem;
    margin: 0;
    accent-color: var(--yt-akzent);
}

/* Bei mehrzeiligem Text sitzt das Kaestchen sonst auf der Textoberkante statt auf
   der ersten Zeile. */
#wizard .feld-zustimmung input {
    margin-top: 0.15rem;
}

.feld-einzeilig, .feld-mehrzeilig {
    display: block;
    width: 100%;
    max-width: 26rem;
    margin-top: 0.35rem;
    font-family: inherit;
    font-size: 1rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--yt-rand);
    border-radius: 6px;
    background: var(--yt-bg);
    color: var(--yt-text);
    box-sizing: border-box;
}

.feld-mehrzeilig {
    max-width: none;
    height: 6rem;
    resize: none;
    overflow-y: auto;
}

.zeichen-zaehler {
    margin-top: 0.35rem;
}

.karten-raster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem;
    margin: 1rem 0;
}

.karte-auswahl {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 6.5rem;
    padding: 0.9rem;
    border: 1px solid var(--yt-rand);
    border-radius: 8px;
    background: var(--yt-bg);
    color: var(--yt-text);
    font-family: inherit;
    font-size: 0.95rem;
    text-align: left;
    cursor: pointer;
}

.karte-auswahl strong {
    display: block;
    margin-bottom: 0.35rem;
}

.karte-auswahl {
    position: relative;
}

/* Gewählt muss man auf einen Blick sehen: kräftiger Rahmen, deutlich getönte Fläche, Haken. */
.karte-auswahl.ausgewaehlt {
    border-color: var(--yt-akzent);
    box-shadow: 0 0 0 2px var(--yt-akzent);
    background: color-mix(in srgb, var(--yt-akzent) 28%, var(--yt-bg));
}

.karte-auswahl.ausgewaehlt::after {
    content: "✓";
    position: absolute;
    top: 0.4rem;
    right: 0.5rem;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background: var(--yt-akzent);
    color: var(--yt-bg);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.4rem;
    text-align: center;
}

.karte-auswahl.entscheidend {
    border-width: 2px;
    border-color: var(--yt-akzent);
}

/* Primär-Markierung (Schritt 2/6): eigene Chips statt Zweitklick auf die Karte selbst —
   sonst gibt es ab der vollen Auswahl keinen Weg mehr, sie zu ändern. */
.primaer-wahl {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.primaer-wahl[hidden] {
    display: none;
}

.chip-primaer {
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--yt-rand);
    border-radius: 999px;
    background: var(--yt-bg);
    color: var(--yt-text);
    font-family: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}

.chip-primaer.aktiv {
    border-color: var(--yt-akzent);
    background: var(--yt-akzent);
    color: var(--yt-bg-erhoben);
    outline: 2px solid var(--yt-akzent);
    outline-offset: 2px;
}

.auswahl-status {
    margin: 0.5rem 0 0.25rem;
}

.regler-wrapper {
    margin: 1.25rem 0;
}

.regler-pole {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--yt-text-schwach);
    margin-bottom: 0.35rem;
}

.regler-wrapper input[type="range"] {
    width: 100%;
}

.regler-skala {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--yt-text-schwach);
    margin-top: 0.15rem;
    padding: 0 0.15rem;
}

.wizard-navigation {
    display: flex;
    gap: 0.75rem;
    margin-top: 2rem;
}

#fehlt-noch-block {
    background: color-mix(in srgb, var(--yt-akzent) 8%, var(--yt-bg));
    border: 1px solid var(--yt-rand);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

#fehlt-noch {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.link-schritt {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    white-space: normal;
    background: var(--yt-bg);
    border: 1px solid var(--yt-rand);
    border-radius: 6px;
    padding: 0.6rem 0.75rem;
    color: var(--yt-akzent);
    font-family: inherit;
    font-size: 0.9rem;
    cursor: pointer;
}

/* ---------------------------------------------------------------------------
   Startseite (Programmübersicht aller Jahrgänge).
   Eigene, breite Container-Variante: die Formularseiten bleiben bei 640px, weil
   dort Lesbarkeit zählt — die Jahrgangsspalten brauchen dagegen Fläche.
   --------------------------------------------------------------------------- */

.container-weit {
    max-width: 1320px;
}

/* Titel über dem Bild statt darauf: das Kopfmotiv ist hell, weißer Text darauf
   bräuchte einen dunklen Verlauf — und der würde genau die Helligkeit wieder
   zerstören, um die es hier geht. */
.masthead {
    margin-bottom: 1.5rem;
}

.masthead .marke {
    margin: 0;
    font-size: 0.8rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--yt-akzent);
}

.masthead h1 {
    margin: 0.3rem 0 0.5rem;
    font-size: clamp(2rem, 5.5vw, 3.4rem);
    line-height: 1.05;
    letter-spacing: 0.01em;
}

/* Leiste über dem Titel und zentrierter Titel (07.10.2026): die Einleitung darunter steht als mittige Spalte,
   der Titel stand am linken Rand und wirkte versetzt. */
.vereinsleiste {
    display: flex;
    align-items: center;
    padding: 1.25rem 1.5rem 0;
    margin-bottom: 2rem;
}
.vereinslogo img {
    display: block;
    height: 2.4rem;
    width: auto;
    filter: invert(1);
}
@media (prefers-color-scheme: dark) {
    .vereinslogo img { filter: none; }
}
.masthead-mitte {
    text-align: center;
}
@media (max-width: 520px) {
    .vereinsleiste { padding: 0.75rem 0.5rem 0; }
    .vereinslogo img { height: 2rem; }
}
.masthead .untertitel {
    margin: 0;
    max-width: 44rem;
    font-size: clamp(1rem, 1.7vw, 1.15rem);
    color: var(--yt-text-schwach);
}

.masthead-mitte .untertitel {
    margin-inline: auto;
}

.kopfbild {
    display: block;
    width: 100%;
    /* Die width/height-Attribute am <img> (gegen Layout-Sprünge beim Laden) wirken als
       feste CSS-Höhe und würden `aspect-ratio` aushebeln — `height: auto` gibt das
       Seitenverhältnis wieder an aspect-ratio zurück. */
    height: auto;
    aspect-ratio: 3 / 1;
    object-fit: cover;
    border-radius: 8px;
}

.einleitung {
    max-width: 44rem;
    margin: 2.5rem auto 3rem;
}

.einleitung p {
    font-size: 1.02rem;
}

.einleitung .lead {
    margin: 0 0 1.75rem;
    font-size: clamp(1.25rem, 2.6vw, 1.6rem);
    font-weight: 600;
    line-height: 1.35;
}

/* Zäsur vor dem Schlusssatz: drei kurze Zeilen, jede für sich, mit Akzentkante. */
.einleitung .leitsatz {
    margin: 2.25rem 0;
    padding-left: 1.25rem;
    border-left: 3px solid var(--yt-akzent);
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    line-height: 1.5;
}

.einleitung .leitsatz span {
    display: block;
}

.einleitung .schluss {
    font-size: 1.05rem;
    font-weight: 600;
}

.einleitung .urheber {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--yt-rand);
}

.spalten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
    align-items: stretch;
}

.jahrgang {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
}

.jahrgang h2 {
    margin: 0.3rem 0 0.9rem;
    font-size: 1.25rem;
    line-height: 1.3;
}

.jahrgang p {
    font-size: 0.95rem;
}

.jahrgang-bild {
    display: block;
    width: 100%;
    height: auto;
    /* Quadratische Jahrgangsplakate mit Schriftzug oben links — nicht beschneiden. */
    aspect-ratio: 1 / 1;
    object-fit: contain;
    border-radius: 6px;
    margin-bottom: 1.25rem;
}

.jahrgang-marke {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.8rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--yt-text-schwach);
}

.jahrgang-ordnung {
    color: var(--yt-akzent);
    font-weight: 700;
}

.zustand {
    margin-left: auto;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
}

.zustand-laufend {
    background: var(--yt-akzent);
    color: var(--yt-bg-erhoben);
}

/* Der laufende Jahrgang ist der einzige, bei dem es etwas zu tun gibt — er bekommt
   deshalb als einziger den Akzentrahmen. */
.jahrgang-laufend {
    border-color: var(--yt-akzent);
}

.fellows-titel {
    margin: 1.25rem 0 0.6rem;
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--yt-text-schwach);
}

.fellows {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}

.fellows li {
    margin-bottom: 0.7rem;
    font-size: 0.95rem;
}

.fellows strong {
    display: block;
    font-weight: 600;
}

.fellows-platzhalter {
    margin-bottom: 1rem;
}

/* Förderer unter einem Jahrgang (02.10.2026): klein, einfarbig und gedämpft, damit sie neben den Plakaten nicht
   laut werden; beim Darüberfahren und Fokussieren voll sichtbar. Im dunklen Modus werden die dunklen Logos
   umgekehrt, sonst verschwänden sie. */
.foerderer { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--yt-rand); }   /* ganz unten im Kasten: liegt über alle drei auf einer Höhe */
.foerderer-titel { margin: 0 0 0.35rem; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--yt-text-schwach); }
.foerderer-logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; align-items: center; gap: 0 1.1rem; }   /* eine Zeile, nie Umbruch */
.foerderer-logos li { min-width: 0; flex: 0 1 auto; }
.foerderer-logos a { display: block; }
.foerderer-logos img { display: block; height: 28px; width: auto; max-width: 100%; object-fit: contain;   /* feste Höhe: SVGs ohne Eigenmaß fielen sonst auf Breite 0; max-width 100% lässt die Zeile auf dem Handy schrumpfen statt umbrechen */
    filter: grayscale(1) opacity(0.7); transition: filter 0.15s ease; }
.foerderer-logos a:hover img, .foerderer-logos a:focus-visible img { filter: grayscale(0) opacity(1); }
@media (prefers-color-scheme: dark) {
    .foerderer-logos img { filter: grayscale(1) invert(1) opacity(0.75); }
    .foerderer-logos a:hover img, .foerderer-logos a:focus-visible img { filter: grayscale(1) invert(1) opacity(1); }
}

.jahrgang-fuss {
    margin: auto 0 0;
    padding-top: 0.75rem;
}

a.knopf {
    display: inline-block;
    text-decoration: none;
    text-align: center;
}

.seitenfuss {
    margin-top: 3rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--yt-rand);
    text-align: center;
}

/* Fußmenü der öffentlichen Seiten (_fussmenue.html): eine leise Zeile, auf dem Handy umbrechend. */
.fussmenue {
    margin: 2.5rem 0 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--yt-rand);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem 0.6rem;
    font-size: 0.9rem;
    color: var(--yt-text-schwach);
}
.fussmenue a { color: inherit; }
.fussmenue a:hover { color: var(--yt-akzent); }
.seitenfuss .fussmenue { margin: 0.75rem 0 0; padding-top: 0; border-top: 0; }

/* Links auf der Startseite: die Standard-Linkfarbe des Browsers ist auf dem dunklen
   Untergrund kaum lesbar. */
.container-weit a {
    color: var(--yt-akzent);
}

.container-weit a.knopf {
    color: var(--yt-bg-erhoben);
}

.jahrgang-fuss a:not(.knopf) {
    font-size: 0.85rem;
    text-decoration: none;
}

.jahrgang-fuss a:not(.knopf):hover {
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Admin-Panel: dieselbe Sprache wie die öffentlichen Seiten (Schrift, Farben,
   .karte/.knopf/.zustand), aber dichter — mehr Informationen pro Bildschirm,
   Formularfelder eng geführt, der gefährliche Bereich sichtbar abgesetzt.
   --------------------------------------------------------------------------- */

.masthead-admin {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.masthead-admin h1 {
    margin: 0;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    line-height: 1.2;
}

.masthead-aktionen {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.masthead-aktionen form {
    margin: 0;
}

.knopf-leise {
    background: transparent;
    color: var(--yt-text);
    border: 1px solid var(--yt-rand);
}

/* .container-weit a.knopf setzt die Knopf-Textfarbe auf --yt-bg-erhoben (für den
   gefüllten Teal-Hintergrund gedacht) — auf dem transparenten Ghost-Knopf wäre das
   auf beiden Themes fast unlesbar. Gleiche Spezifität wie die Ursprungsregel, gewinnt
   aber durch die spätere Position in der Datei. */
.container-weit a.knopf-leise {
    color: var(--yt-text);
}

.admin-tabelle {
    width: 100%;
    border-collapse: collapse;
}

.admin-tabelle th,
.admin-tabelle td {
    border-bottom: 1px solid var(--yt-rand);
    padding: 0.6rem 0.5rem;
    text-align: left;
}

.admin-tabelle th {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--yt-text-schwach);
}

.admin-tabelle td:last-child { text-align: right; }

.test-marke {
    display: inline-block;
    border: 1px solid var(--yt-akzent);
    border-radius: 4px;
    padding: 0 0.4rem;
    margin-left: 0.4rem;
    font-size: 0.8rem;
    color: var(--yt-akzent);
}

/* Zwei Klassen im Selektor (statt nur .karten-raster-admin), damit die Regel
   .karten-raster zuverlässig per Spezifität überschreibt (0,2,0 statt 0,1,0)
   — unabhängig von der Reihenfolge im Stylesheet, nicht nur durch Zufall,
   weil dieser Admin-Abschnitt hinten steht. */
.karten-raster.karten-raster-admin {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
    margin: 1.75rem 0;
}

.karten-raster-admin .karte h2 {
    margin: 0 0 0.9rem;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--yt-text-schwach);
}

.admin-balken {
    margin: 0.75rem 0;
}

.admin-balken-zeile {
    margin-bottom: 0.6rem;
    font-size: 0.85rem;
}

.admin-balken-zeile span {
    display: block;
    margin-bottom: 0.25rem;
}

.admin-balken-hintergrund {
    background: var(--yt-bg);
    border: 1px solid var(--yt-rand);
    border-radius: 999px;
    height: 0.5rem;
    overflow: hidden;
}

.admin-balken-fuellung {
    background: var(--yt-akzent);
    height: 100%;
}

.admin-formular label {
    display: block;
    margin-bottom: 0.9rem;
    font-size: 0.9rem;
}

.admin-formular .feld-checkbox {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--yt-text-schwach);
}

.admin-formular-schmal {
    max-width: 30rem;
    margin: 0 auto;
}

.admin-anmeldung {
    max-width: 24rem;
    margin: 3rem auto 0;
}

.verfahren-knoepfe {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.verfahren-knoepfe .knopf {
    width: 100%;
}

.hinweis-warnung {
    border: 1px solid #c85c3a;
    background: color-mix(in srgb, #c85c3a 12%, var(--yt-bg));
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

.fehler {
    color: #c85c3a;
    font-size: 0.9rem;
}

/* Der gefährliche Bereich (Zurückspulen, Call/Agent löschen) steht bewusst hinter
   einem Aufklapper und mit der Warnfarbe umrandet — er darf nie neben "Jury
   fortsetzen" & Co. auf gleicher Augenhöhe stehen, sonst verwechselt man den Knopf,
   der das Verfahren weiterführt, mit dem, der Bewerbungen echter Menschen vernichtet. */
.gefahr-bereich {
    margin-top: 2.5rem;
    border: 1px solid color-mix(in srgb, #c85c3a 45%, var(--yt-rand));
    border-radius: 8px;
    padding: 1rem 1.25rem;
    background: var(--yt-bg-erhoben);
}

.gefahr-bereich summary {
    cursor: pointer;
    font-weight: 600;
    color: #c85c3a;
}

.gefahr-bereich[open] summary {
    margin-bottom: 1rem;
}

.gefahr-bereich form {
    margin-bottom: 1rem;
}

.gefahr-bereich form:last-child {
    margin-bottom: 0;
    padding-top: 1rem;
    border-top: 1px solid var(--yt-rand);
}

/* ---------------------------------------------------------------------------
   Gesprächsseite (agent.html) — Anpassung an kleine Bildschirme, 21.09.2026.

   Befund vorher, auf dem iPhone: der Gesprächstext lief rechts aus dem Bild, die
   Schrift war aufgebläht, das Eingabefeld hing mitten in der Seite, Senden und
   Anhängen standen als Blöcke untereinander, dazwischen das rohe Datei-Feld.

   Ursache des waagerechten Überlaufs war nicht eine feste Breite, sondern fehlendes
   Umbrechen: eine Nachricht mit einem gepasteten Link wurde 538px breit in einem
   293px breiten Kasten. Weil der Verlauf `overflow-y:auto` trug (und damit auch
   waagerecht scrollte), scrollte nicht die Seite, sondern der Kasten in sich selbst —
   der Text war schlicht abgeschnitten. Das Umbrechen steht jetzt oben an der Wurzel.

   Hier geht es um die Anordnung: auf dem Handy wird die Seite zur Spalte über die
   volle Höhe mit genau EINEM Scrollbereich (.gespraech-strom); der Verfasser steht
   fest unten. Auf dem Desktop bleibt das gewohnte Bild — Strom und Verfasser zusammen
   als eine Karte.

   Nachtrag 22.09.2026: im Gespräch stehen nur noch zwei Nachrichten (aktuelle Frage
   des Agenten, letzte eigene Antwort), alles Ältere liegt auf der Verlaufsseite. Das
   gilt auf jeder Breite — die Verkürzung ist eine Entscheidung über das Gespräch, nicht
   über den Bildschirm.
   --------------------------------------------------------------------------- */

/* Der Gesprächsbereich hat am 22.09.2026 (zweite Runde) seinen Kartenrahmen verloren.
   Grund: mit Sprechblasen liegt eine Karte um die Blasen wie ein zweiter Rahmen um
   etwas, das schon gerahmt ist — das Gespräch soll auf der Seite liegen, nicht in
   einem Kasten auf der Seite. Die Klasse bleibt als Platz für den Abstand. */
.gespraech-verlauf {
    margin-top: 1.25rem;
}

/* --- Die Frage-Tafel (23.09.2026) -------------------------------------------
   Auf der Gesprächsseite steht nur noch die aktuelle Frage des Agenten; die eigene
   Antwort ist weg. Damit verliert links/rechts seinen Sinn — es spricht nur noch einer
   sichtbar. Frage und Eingabefeld sind deshalb ein gleich breiter, gleich geformter
   Block: oben, was er wissen will, darunter, wo man es beantwortet. Genau das war der
   gemeldete Fehler („das Schreibfeld ist nicht gleich groß wie das Ausgabefeld").

   Die Sprechblasen (22.09.) leben auf der Verlaufsseite weiter — dort sprechen zwei,
   und dort ist die Unterscheidung nach Seite genau richtig. */
.frage-tafel {
    background: var(--yt-bg-erhoben);
    border: 1px solid var(--yt-rand);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    min-height: 6rem;
}

.frage-tafel:empty {
    display: none;
}

.frage-name {
    margin: 0 0 0.35rem;
    font-size: 0.8rem;
    color: var(--yt-text-schwach);
}

.frage-text {
    margin: 0;
    /* Der Aufbau aus Rauschen ersetzt Zeichen durch Blockgrafik gleicher Breite; ohne
       pre-wrap wuerden Zeilenumbrueche des Modells verschluckt. */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* --- Sprechblasen (22.09.2026), jetzt nur noch auf der Verlaufsseite ---------
   Der Agent steht links, die eigene Antwort rechts. Die Richtung trägt die Information,
   die vorher der Name tragen musste; der Name bleibt trotzdem stehen, klein darüber:
   der Agent hat einen selbstgewählten Namen, und der ist Teil dieser Bewerbung. */
.nachricht {
    display: flex;
    flex-direction: column;
    max-width: 85%;
}

.nachricht-name {
    font-size: 0.8rem;
    color: var(--yt-text-schwach);
    margin-bottom: 0.25rem;
}

.nachricht-blase {
    padding: 0.7rem 0.9rem;
    border-radius: 16px;
    /* Harte Zusicherung für den Gesprächstext: hier landet fremder Text, der
       garantiert irgendwann einen 200 Zeichen langen Link enthält. `anywhere` bricht
       auch dann, wenn `break-word` es sich noch anders überlegen könnte. */
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.nachricht-agent {
    align-items: flex-start;
    margin-right: auto;
}

.nachricht-agent .nachricht-blase {
    background: var(--yt-bg-erhoben);
    border: 1px solid var(--yt-rand);
    /* Die abgeflachte Ecke zeigt zur Seite, auf der die Blase steht. */
    border-bottom-left-radius: 5px;
}

.nachricht-mensch {
    align-items: flex-end;
    margin-left: auto;
}

.nachricht-mensch .nachricht-blase {
    background: var(--yt-akzent);
    color: #ffffff;
    border: 1px solid var(--yt-akzent);
    border-bottom-right-radius: 5px;
}

/* Die sechs Zeilen der Erschaffungs-Sequenz sind keine Rede und bekommen deshalb
   keine Blase — sie sammeln sich als Protokoll an derselben Stelle. */
.gespraech-sequenz {
    margin-bottom: 0.35rem;
}

/* --- Kopf des Gesprächs ------------------------------------------------------
   Avatar und Kurzfassung standen als eigene Karte über dem Gespräch und kosteten
   zusammen mit dem Erklärtext den halben Bildschirm. Jetzt eine Zeile: Avatar klein
   links, Name und Kurzfassung daneben. */
.gespraech-kopf {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--yt-rand);
}

.gespraech-kopf #avatar {
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    margin: 0;
}

.gespraech-kopf-text {
    min-width: 0;
}

.gespraech-kopf-text p {
    margin: 0;
}

.gespraech-kopf-name {
    font-weight: 600;
}

/* Der Zugangslink: eine Zeile statt einer Karte mit zwei Absätzen. Sichtbar bleibt er
   trotzdem — er ist der einzige Weg zurück zu dieser Bewerbung. */
.zugangszeile {
    font-size: 0.8rem;
    color: var(--yt-text-schwach);
    margin: 0.75rem 0 0;
}

.zugangszeile-link {
    display: block;
    margin-top: 0.15rem;
    word-break: break-all;
    font-size: 0.75rem;
}

/* Der Erklärtext im Klapp-Bereich. Offen beim ersten Besuch (agent.html setzt `open`,
   solange das Gespräch leer ist), danach eine Zeile. */
.gespraech-info {
    margin-top: 0.75rem;
    font-size: 0.9rem;
}

.gespraech-fragen {
    margin: 0.5rem 0 0.75rem 1.2rem;
    padding: 0;
}

.gespraech-fragen li {
    margin-bottom: 0.4rem;
}

.gespraech-info textarea {
    width: 100%;
    font-size: 0.85rem;
}

.gespraech-info > summary {
    cursor: pointer;
    padding: 0.5rem 0;
    color: var(--yt-akzent);
}

/* --- Überlagerung ------------------------------------------------------------
   Die Delegation ist der einzige unumkehrbare Schritt dieser Seite. Sie lag bisher als
   Karte im Scrollbereich — und weil die Seite beim Laden ans Ende springt, war die
   Bestätigung danach schlicht nicht zu sehen. Als Ebene über allem kann sie nicht
   übersehen werden, und sie ersetzt zugleich das confirm()-Fenster des Browsers.

   position: fixed mit inset:0 statt einer Höhe: bei offener Tastatur ist jede
   Höhenangabe hier falsch, und die Überlagerung hat mit dem Gesprächsstrom nichts zu
   tun. Der Inhalt scrollt in sich, falls die Zusammenfassung lang ist. */
.ueberlagerung {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(10, 15, 16, 0.55);
    overflow-y: auto;
}

.ueberlagerung[hidden] {
    display: none;
}

.ueberlagerung-tafel {
    background: var(--yt-bg-erhoben);
    border: 1px solid var(--yt-rand);
    border-radius: 12px;
    padding: 1.5rem;
    width: 100%;
    max-width: 30rem;
    max-height: 100%;
    overflow-y: auto;
}

.ueberlagerung-tafel:focus {
    outline: none;
}

.ueberlagerung-tafel h2 {
    margin-top: 0;
}

.ueberlagerung-knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

/* Die Zustimmung nach Art. 22 DSGVO direkt über dem Knopf (07.10.2026): lesbar, nicht als Kleingedrucktes —
   sie ist der Inhalt des Klicks. Ein Rand links bindet sie an den Knopf darunter. */
.uebergabe-zustimmung {
    margin: 1.25rem 0 0;
    padding-left: 0.75rem;
    border-left: 3px solid var(--yt-rand);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Der zweite Knopf einer Überlagerung ist nie die Handlung, um die es geht. */
.knopf-still {
    background: transparent;
    color: var(--yt-text-schwach);
    border: 1px solid var(--yt-rand);
}

/* Solange eine Ebene offen ist, scrollt darunter nichts. */
body.hat-ueberlagerung {
    overflow: hidden;
}

/* Der begrenzte Verlaufskasten (`#verlauf { max-height: 400px; overflow-y: auto }`) ist
   am 22.09.2026 ersatzlos entfallen: auf der Gesprächsseite stehen nur noch zwei
   Nachrichten, da gibt es nichts mehr zu begrenzen. Damit ist auch auf dem Desktop der
   letzte verschachtelte Scrollbereich weg — die Seite scrollt, sonst nichts. */

/* Der Verweis auf die Verlaufsseite. Eine Zeile Text über der aktuellen Frage, also
   dort, wo das Ältere läge — leise genug, um den ruhigen Eindruck nicht zu stören. */
.verlauf-verweis {
    margin: 0 0 1rem;
    font-size: 0.85rem;
}

/* Derselbe Abstand auf der Verlaufsseite: fünfzehn Nachrichten ohne Zwischenraum lesen
   sich als eine Wand, und hier wird zurückgelesen, nicht überflogen. */
.verlauf-liste .nachricht + .nachricht {
    margin-top: 1rem;
}

.gespraech-fehler {
    margin: 1rem 0 0;
    /* Dieselbe Farbe wie .knopf-warnung — kein neuer Ton für diesen einen Satz. */
    color: #c85c3a;
}

/* Gleiche Breite, gleiche Form wie die Frage-Tafel darueber: die beiden sind zwei
   Haelften eines Instruments, nicht eine Nachricht und ein Formular. */
.verfasser {
    border: none;
    background: none;
    padding: 1rem 0 0;
}

.verfasser #eingabe {
    border-radius: 12px;
    padding: 1rem 1.1rem;
    height: auto;
    min-height: 3.5rem;
    /* chat.js setzt die Hoehe; `resize` daneben waere ein zweiter Regler fuer dasselbe. */
    resize: none;
    overflow-y: auto;
}

/* Senden und Anhängen nebeneinander statt untereinander — auf 375px passen beide
   nebeneinander, und der Daumen erreicht sie ohne Scrollen. Der Statustext bricht
   per flex-basis in die nächste Zeile, sobald er etwas zu sagen hat. */
.verfasser-knoepfe .knopf {
    /* Ohne feste Zeilenhoehe macht das Büroklammer-Zeichen den Anhängen-Knopf 6px
       höher als Senden — nebeneinander stehend fällt der Versatz auf. */
    line-height: 1.25;
}

.verfasser-knoepfe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

#anhang-status:not(:empty) {
    flex-basis: 100%;
}

/* Das rohe <input type="file"> bleibt bedienbar (der Anhängen-Knopf öffnet es per
   .click()), zeigt aber nicht mehr den browsereigenen Kasten mit „Keine Datei
   ausgewählt", der quer durch die Karte lief und nur 21px hoch war. */
.datei-versteckt {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    #avatar.avatar-denkt { animation: none; }
}

/* --- Handy und Tablet (iPad im Hochformat ist 768 breit) ---------------------- */
@media (max-width: 900px) {
    /* body:has(…) trifft sofort; die Klasse setzt chat.js nach (Browser ohne :has). */
    body.gespraech-modus,
    body:has(#chat.gespraech) {
        padding: 0;
        height: 100vh;
        /* dvh statt vh: auf iOS ist 100vh die Höhe OHNE eingeblendete Adressleiste —
           der Verfasser läge dort unter dem Bildschirmrand. Browser ohne dvh
           überspringen die Zeile und behalten den vh-Wert. */
        height: 100dvh;
        overflow: hidden;
    }

    /* Bei offener Tastatur trägt chat.js die tatsächlich sichtbare Höhe ein — und den
       Versatz. Die Höhe allein reichte nicht: Safari schiebt beim Fokussieren den
       sichtbaren Ausschnitt nach oben, ohne dass das Layout davon erfährt. Die Seite
       war dann zwar so hoch wie der sichtbare Bereich, stand aber zu weit oben, und
       genau das Stück unten war der Verfasser. `position: fixed` verankert die Spalte
       am Ausschnitt statt am Dokument, `top` holt den Versatz zurück. */
    body.gespraech-modus.hat-sichthoehe,
    body:has(#chat.gespraech).hat-sichthoehe {
        position: fixed;
        top: var(--sicht-versatz, 0px);
        left: 0;
        right: 0;
        height: var(--sicht-hoehe);
    }

    body.gespraech-modus > .container,
    body:has(#chat.gespraech) > .container {
        display: flex;
        flex-direction: column;
        height: 100%;
        /* Wie sonst auch: die Zeile darf nicht ueber die Lesebreite hinauswachsen. */
        max-width: 640px;
        padding: 0 0.75rem;
    }

    .gespraech {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
    }

    /* Der einzige Scrollbereich der Seite. min-height:0 ist nötig, damit ein
       Flex-Kind überhaupt kleiner werden darf als sein Inhalt — ohne das wächst der
       Strom über die Spalte hinaus und schiebt den Verfasser aus dem Bild. */
    .gespraech-strom {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding: 0.75rem 0 0.5rem;
        /* Spalte, damit der Verlauf unten andocken kann (margin-top:auto weiter unten).
           Bei zwei Nachrichten stand sonst eine halbe Bildschirmhöhe Leere zwischen der
           letzten Blase und dem Eingabefeld — wie ein leeres Blatt, nicht wie ein Chat. */
        display: flex;
        flex-direction: column;
    }

    /* Der Verlauf trägt auf dem Handy keinen Rahmen mehr (siehe .gespraech-verlauf) —
       die Blasen stehen frei auf der Seite und docken unten an. Ist das Gespräch länger
       als der Bildschirm, greift margin-top:auto nicht mehr und es scrollt normal. */
    .gespraech-verlauf {
        margin-top: auto;
        padding-bottom: 0.5rem;
    }

    .verfasser {
        border: none;
        border-radius: 0;
        background: var(--yt-bg);
        /* safe-area: unter dem Home-Indikator neuerer iPhones liegt sonst der Knopf. */
        padding: 0.75rem 0 calc(0.75rem + env(safe-area-inset-bottom));
    }

    /* Die Hoehe fuehrt chat.js nach (das Feld waechst mit dem Text). Hier steht nur
       noch die Untergrenze — drei feste Zeilen kosteten auf einem 667px-Bildschirm zu
       viel vom Gespräch. */
    #eingabe {
        min-height: 3.25rem;
    }

    .verfasser-knoepfe {
        margin-top: 0.5rem;
    }
}

/* ---------------------------------------------------------------------------
   Transparenzseite (jury.html) — 23.09.2026.

   Sie hatte bis dahin KEINE einzige Regel: die Avatare standen als Spalte
   untereinander (bei 16 Positionen rund 1.100px Scroll allein dafuer), und jede
   Nominierung, jede Bewertung, jeder Redebeitrag lag als flache Liste darunter.

   Es ist nichts weggenommen worden. Die Struktur faltet nur: jede Verfahrensstufe ist
   ein <details> mit einer Zeile davor, die sagt, was drin ist.
   --------------------------------------------------------------------------- */

.jury-untertitel {
    margin-top: -0.5rem;
    color: var(--yt-text-schwach);
}

.jury-stand {
    background: var(--yt-bg-erhoben);
    border: 1px solid var(--yt-rand);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin: 1.5rem 0 2rem;
}

.jury-stand p {
    margin: 0 0 0.5rem;
}

.jury-stand p:last-child {
    margin-bottom: 0;
}

/* Die vier Stufen als Leiste. Waagerecht, solange Platz ist; auf dem Handy bricht sie
   um, statt zu scrollen — eine waagerecht scrollende Fortschrittsanzeige ist eine, die
   man nicht sieht. */
.jury-stufenleiste {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.75rem;
    list-style: none;
    padding: 0;
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
    color: var(--yt-text-schwach);
}

.jury-stufenleiste li::before {
    content: "○ ";
}

.jury-stufenleiste .ist-erledigt {
    color: var(--yt-text);
}

.jury-stufenleiste .ist-erledigt::before {
    content: "● ";
    color: var(--yt-erfolg);
}

.jury-stufenleiste .ist-aktuell {
    color: var(--yt-akzent);
    font-weight: 600;
}

.jury-stufenleiste .ist-aktuell::before {
    content: "◉ ";
}

.jury-ergebnis {
    padding-left: 1.25rem;
}

.jury-ergebnis li {
    margin-bottom: 1.25rem;
}

.jury-ergebnis-name {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

/* Raster statt Spalte. minmax(96px, …) haelt vier Avatare auf 390px nebeneinander —
   aus 16 Zeilen werden vier. */
.jury-avatare {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 1rem 0.5rem;
    margin: 1rem 0 2rem;
}

.jury-avatar-eintrag {
    text-align: center;
}

.jury-avatar {
    cursor: pointer;
    width: 60px;
    height: 60px;
    margin: 0 auto;
}

.jury-avatar-name {
    margin: 0.25rem 0 0;
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}

.jury-avatar-status {
    margin: 0;
    font-size: 0.75rem;
    color: var(--yt-text-schwach);
}

/* Ausgeschieden heisst: die Position ist raus, die Stimme bleibt (KONZEPT.md B.2).
   Deshalb blass, nicht durchgestrichen — durchgestrichen hiesse „zaehlt nicht mehr". */
.jury-avatar-eintrag.ist-ausgeschieden {
    opacity: 0.45;
}

/* Die aufgeklappten Angaben zu einem Agenten. */
.jury-specs {
    margin-top: 0.4rem;
    font-size: 0.8rem;
    text-align: left;
    color: var(--yt-text-schwach);
}

.jury-kriterien {
    padding-left: 1.25rem;
}

/* Eine Verfahrensstufe. Die Zusammenfassungszeile ist das, was man liest; der Inhalt
   das, was man aufklappt, wenn man nachrechnen will. */
.jury-stufe {
    border: 1px solid var(--yt-rand);
    border-radius: 8px;
    background: var(--yt-bg-erhoben);
    margin-bottom: 0.5rem;
}

.jury-stufe > summary {
    cursor: pointer;
    padding: 0.9rem 1rem;
    font-weight: 600;
}

.jury-stufe[open] > summary {
    border-bottom: 1px solid var(--yt-rand);
}

.jury-liste {
    margin: 0;
    padding: 0.75rem 1rem 0.75rem 2.25rem;
    font-size: 0.9rem;
}

/* Eine Position innerhalb einer Diskursstufe — die zweite Faltebene. Bei 50
   Bewerbungen hat eine Stufe ueber tausend Beitraege, und gesucht wird fast immer
   die eine Position. */
.jury-position {
    margin: 0.5rem 1rem;
    border-left: 2px solid var(--yt-rand);
    padding-left: 0.75rem;
}

.jury-position > summary {
    cursor: pointer;
    padding: 0.4rem 0;
    font-size: 0.9rem;
}

.jury-beitrag {
    margin: 0.75rem 0;
}

.jury-beitrag p {
    margin: 0;
}

.jury-beitrag-kopf {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.15rem !important;
}

/* Eine Antwort rückt ein und zeigt, worauf sie antwortet (07.10.2026): die Verhandlung liest sich als Gespräch. */
.jury-antwort {
    margin-left: 1.5rem;
    padding-left: 0.75rem;
    border-left: 2px solid var(--yt-rand);
}

.jury-antwort-auf {
    font-size: 0.85rem;
    font-style: italic;
    margin-bottom: 0.25rem !important;
}

/* Zusammenfassung am Kopf einer Stufe oder einer Verhandlungsrunde (07.10.2026). */
.jury-zusammenfassung {
    background: var(--yt-bg-erhoben);
    border: 1px solid var(--yt-rand);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin: 0.75rem 0 1rem;
}

.jury-zusammenfassung p {
    margin: 0;
}

.jury-zusammenfassung-kopf {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.25rem !important;
}

/* ---------------------------------------------------------------------------
   Landing-Seite eines Open Calls (landing.html) — 23.09.2026.

   Sie war eine Karte mit dem Ausschreibungstext in `text-schwach`, darunter zwei
   Stichpunktlisten, ganz unten der Knopf. Jetzt: Kopf, Eckdaten, Knopf — dann der Text.
   Gestaltung bewusst an die Startseite angelehnt (.masthead, .marke), es ist dieselbe
   Einladung, nur eine Ebene tiefer.
   --------------------------------------------------------------------------- */

.call-kopf {
    margin-bottom: 1.5rem;
}

.call-kopf .marke {
    margin: 0;
    font-size: 0.8rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--yt-akzent);
}

.call-kopf h1 {
    margin: 0.3rem 0 0;
    font-size: clamp(1.8rem, 5vw, 2.8rem);
    line-height: 1.1;
}

/* Die Eckdaten. auto-fit statt fester Spalten: auf 390px stehen sie untereinander,
   ab etwa 480px nebeneinander — ohne eigenen Umbruchpunkt. */
.call-fakten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.75rem 1.5rem;
    margin: 0 0 1.5rem;
    padding: 1rem 1.25rem;
    background: var(--yt-bg-erhoben);
    border: 1px solid var(--yt-rand);
    border-radius: 8px;
}

.call-fakten dt {
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--yt-text-schwach);
}

.call-fakten dd {
    margin: 0.15rem 0 0;
    font-size: 1.05rem;
    font-weight: 600;
}

.call-aufruf {
    margin: 1.5rem 0 2rem;
}

.call-aufruf .knopf {
    display: inline-block;
    text-decoration: none;
}

.call-aufruf .text-schwach {
    margin: 0.75rem 0 0;
    max-width: 38rem;
}

.call-hinweis {
    margin: 1.5rem 0 2rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--yt-rand);
    border-radius: 8px;
    background: var(--yt-bg-erhoben);
}

.call-hinweis p {
    margin: 0 0 0.35rem;
}

.call-hinweis p:last-child {
    margin-bottom: 0;
}

.call-testlauf {
    border-color: var(--yt-akzent);
}

/* Der Ausschreibungstext ist der Haupttext dieser Seite und wird auch so gesetzt —
   vorher stand er in `text-schwach`, also grau und kleiner als alles andere. */
.call-text {
    max-width: 38rem;
    margin-bottom: 2rem;
}

/* Call-Seite in Blöcken (07.10.2026): Open Call, So funktioniert die Bewerbung, eigene Jury, Wichtig zu wissen.
   Jeder Block eine Box mit kleiner Überschrift in Akzentfarbe, wie die Werkgespräch-Seite. */
.call-block {
    margin: 0 0 1.25rem;
    padding: 1.25rem 1.4rem;
    background: var(--yt-bg-erhoben);
    border: 1px solid var(--yt-rand);
    border-radius: 12px;
}
.call-block h2 {
    margin: 0 0 0.85rem;
    font-size: 0.82rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--yt-akzent);
}
.call-block p { margin: 0 0 0.75rem; }
.call-block p:last-child { margin-bottom: 0; }
.call-block .call-text { max-width: none; margin-bottom: 0; }
.call-schritte {
    list-style: none;
    counter-reset: schritt;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.9rem;
}
.call-schritte li {
    counter-increment: schritt;
    display: grid;
    grid-template-columns: 2rem 1fr;
    gap: 0.75rem;
}
.call-schritte li::before {
    content: counter(schritt);
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 700;
    color: var(--yt-akzent);
    border: 1.5px solid var(--yt-akzent);
}
.call-schritte strong { display: block; }
.call-fakt-zusatz {
    display: block;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--yt-text-schwach);
}
/* Call-Seite, Runde 2 (Clair, 07.10.2026): Logo wie auf der Startseite mit Trennlinie darunter, Eckdaten 2 × 2,
   Bewerben-Knopf so breit wie die Boxen, Links in den Boxen in der Akzentfarbe (das Standard-Blau war schlecht
   lesbar). */
.vereinsleiste-trenner {
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--yt-rand);
}
.call-fakten {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.call-aufruf .knopf {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}
.call-block a,
.call-verfahren a,
.call-recht a {
    color: var(--yt-akzent);
    font-weight: 600;
    text-underline-offset: 3px;
}

.call-ablauf ol {
    max-width: 38rem;
    padding-left: 1.25rem;
}

.call-ablauf li {
    margin-bottom: 0.75rem;
}

/* Die Regeln (Teil C, 28.09.2026): dieselbe Satzbreite wie der Ausschreibungstext. */
.call-regeln ul {
    padding-left: 1.1rem;
    margin: 0 0 0.75rem;
    display: grid;
    gap: 0.55rem;
}

.call-regeln h3 {
    margin: 1.75rem 0 0.5rem;
    font-size: 1rem;
}

.call-verfahren {
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--yt-rand);
}

.call-verfahren .text-schwach {
    display: block;
    margin-top: 0.25rem;
}

.call-recht {
    margin-top: 1.5rem;
    font-size: 0.9rem;
}

/* ---------------------------------------------------------------------------
   Dashboard nach der Einreichung (agent.html, Zustand `delegiert`) — 23.09.2026.

   Vorher blieb die Seite nach der Uebergabe genau dieselbe, nur mit einer Karte mehr.
   Dass eine neue Stufe begonnen hat, war nicht zu sehen — und genau das war die
   Meldung. Die Adresse bleibt dieselbe (der Zugangslink ist das Einzige, was jemand
   behaelt), das Gesicht nicht.
   --------------------------------------------------------------------------- */

.dash-kopf {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

/* Siegel links, Text rechts — dieselbe Bildsprache wie .gespraech-kopf oben,
   nur groesser (64px statt 48px): das hier ist der Moment der Uebergabe, kein
   beilaeufiger Gespraechskopf. #avatar erscheint auf dieser Seite nie doppelt
   (delegiert-Zweig und Gespraechskopf schliessen sich gegenseitig aus), die
   allgemeine #avatar-Regel (100px, zentriert) reicht hier also nicht. */
.dash-kopf #avatar {
    width: 64px;
    height: 64px;
    flex: 0 0 auto;
    margin: 0;
}

.dash-kopf-text {
    min-width: 0;
}

.dash-kopf .marke {
    margin: 0;
    font-size: 0.8rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--yt-erfolg);
}

.dash-kopf h1 {
    margin: 0.3rem 0 0.5rem;
    font-size: clamp(1.6rem, 4.5vw, 2.4rem);
    line-height: 1.15;
}

.dash-kopf p {
    margin: 0;
}

.dash-stand {
    background: var(--yt-bg-erhoben);
    border: 1px solid var(--yt-rand);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.dash-lage {
    margin: 0 0 0.75rem;
}

.dash-countdown {
    margin: 0.75rem 0 0;
}

.dash-countdown-wert {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--yt-akzent);
}

.dash-zahlen {
    margin-bottom: 1rem;
}

.dash-lage-eigen {
    border-left: 3px solid var(--yt-akzent);
    padding: 0.5rem 0 0.5rem 0.9rem;
    margin-bottom: 1.5rem;
}

.dash-lage-eigen p {
    margin: 0 0 0.35rem;
}

.dash-lage-eigen p:last-child {
    margin-bottom: 0;
}

/* Ausgeschieden heisst: die Position ist raus, die Stimme bleibt. Deshalb ein anderer
   Ton, aber kein Rot — es ist kein Fehler, sondern ein Verfahrensschritt. */
.dash-lage-ausgeschieden_vorrunde,
.dash-lage-ausgeschieden_mittelfeld,
.dash-lage-ausgeschieden {
    border-left-color: var(--yt-text-schwach);
}

.dash-ergebnis {
    background: var(--yt-bg-erhoben);
    border: 1px solid var(--yt-erfolg);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.dash-ergebnis-titel {
    margin: 0 0 0.5rem;
    font-weight: 600;
}

.dash-verfahren {
    margin: 1.5rem 0;
    padding-top: 1rem;
    border-top: 1px solid var(--yt-rand);
}

.dash-verfahren .text-schwach {
    display: block;
    margin-top: 0.25rem;
}

.dash-chat-titel {
    margin-bottom: 0.25rem;
}

/* Der Weg in die Übergabe, im Gesprächsstrom statt als Ebene darüber — und zwar am
   Ende des Stroms, direkt über dem Eingabefeld. Die Karte ist damit das Letzte vor der
   Eingabe und liegt trotzdem im Scrollbereich, nicht über ihm. */
.delegation-anstoss {
    margin-top: 1.25rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--yt-akzent);
    border-radius: 12px;
    background: var(--yt-bg-erhoben);
}

.delegation-anstoss p {
    margin: 0 0 0.75rem;
}

.delegation-anstoss p:last-child {
    margin: 0.75rem 0 0;
}

/* Eigenstimme: ein Agent hat für seine eigene Position gestimmt. Kein Warnton — das ist
   erlaubt und folgt aus der Doppelrolle. Nur sichtbar. */
.eigenstimme {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.1rem 0.4rem;
    border: 1px solid var(--yt-rand);
    border-radius: 4px;
    font-size: 0.75rem;
    color: var(--yt-text-schwach);
    white-space: nowrap;
}

/* Die Ansichten-Liste im Admin-Panel (24.09.2026). Definitionsliste statt Aufzählung,
   weil jede Adresse eine Erklärung braucht: am Abend der Sitzung soll niemand raten,
   welcher der vier Bildschirme auf welchen Beamer gehört. */
.admin-ansichten {
    margin: 0;
    display: grid;
    gap: 0.6rem;
}

.admin-ansichten > div {
    display: grid;
    gap: 0.1rem;
}

.admin-ansichten dt {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    font-weight: 600;
}

.admin-ansichten dt .text-schwach {
    font-weight: 400;
    font-size: 0.85em;
}

.admin-ansichten dd {
    margin: 0;
    font-size: 0.9em;
}

/* „So sieht das konkret aus" auf der Startseite (30.09.2026) */
.einleitung .konkret-titel { margin: 2.5rem 0 0.75rem; font-size: 1.1rem; }
.einleitung .konkret { padding-left: 1.25rem; margin: 0 0 1.75rem; }
.einleitung .konkret li { margin-bottom: 0.6rem; }

/* Admin-Reiter (30.09.2026): ohne JavaScript stehen alle Teile untereinander. */
.admin-reiter {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--yt-rand);
    margin: 1.25rem 0 0.5rem;
}

.admin-reiter a {
    padding: 0.6rem 1.1rem;
    text-decoration: none;
    color: var(--yt-text-schwach);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.admin-reiter a.aktiv {
    color: var(--yt-text);
    border-bottom-color: var(--yt-akzent);
    font-weight: 600;
}

.admin-reiter-inhalt[hidden] { display: none; }

.admin-gross {
    font-size: 1.8rem;
    margin: 0.2rem 0 0.6rem;
    line-height: 1.1;
}

.admin-vorschau {
    border: 0;
    padding: 0;
    margin: 0 0 1rem;
}

.admin-vorschau label {
    display: block;
    margin: 0.35rem 0;
    font-size: 0.9rem;
}

/* Wizard-Formularfehler: Satz direkt unter dem Feld, Feld rot umrandet. */
.feld-fehler {
    display: block;
    color: #c85c3a;
    font-size: 0.85rem;
    margin-top: 0.25rem;
}
.feld-ungueltig {
    border-color: #c85c3a !important;
    outline: 2px solid color-mix(in srgb, #c85c3a 35%, transparent);
}

.einleitung .konkret-zeitraum { font-weight: 600; margin: 0 0 0.75rem; }

/* Reiter der Studien-Seiten im Admin-Panel (05.10.2026): echte Seiten statt Hash-Reiter, dieselbe Optik wie .admin-reiter. */
.admin-reiter-seiten { display: flex; flex-wrap: wrap; gap: 0.25rem; border-bottom: 1px solid var(--yt-rand); margin: 1.25rem 0 1rem; }
.admin-reiter-seiten a { padding: 0.6rem 1.1rem; text-decoration: none; color: var(--yt-text-schwach); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.admin-reiter-seiten a.aktiv { color: var(--yt-text); border-bottom-color: var(--yt-akzent); font-weight: 600; }

/* Hinweis auf die Befragung der Hochschule (05.10.2026): eine Box in der Signalfarbe, kein Aufklapper. */
.studie-box { border: 2px solid var(--yt-akzent); background: color-mix(in srgb, var(--yt-akzent) 16%, var(--yt-bg)); border-radius: 8px; padding: 1.1rem 1.25rem; margin: 1.5rem 0; }
.studie-box h3 { margin: 0.6rem 0 0.5rem; font-size: 1.1rem; }
.studie-box p { margin: 0.4rem 0; }
.studie-box-logo { display: block; height: 34px; width: auto; background: #fff; border-radius: 4px; padding: 5px 9px; }
.studie-box .knopf { margin-top: 0.4rem; }
.hs-logo-gross { display: block; height: 40px; width: auto; margin: 0.75rem 0 0.5rem; background: #fff; border-radius: 4px; padding: 6px 12px; }

/* Titel der Arbeit im Übergabefenster (07.10.2026). */
#projekttitel {
    width: 100%;
    margin: 0.25rem 0 0.5rem;
    padding: 0.5rem 0.65rem;
    font: inherit;
    color: inherit;
    background: var(--yt-bg-erhoben);
    border: 1px solid var(--yt-rand);
    border-radius: 6px;
    box-sizing: border-box;
}

/* Fortschritt der Übergabe (07.10.2026): ruhiger Balken ohne Prozentzahl, wir kennen den echten Fortschritt nicht. */
.delegation-fortschritt {
    margin-top: 1rem;
}

.delegation-fortschritt p {
    margin: 0.5rem 0 0;
}

.fortschritt-balken {
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    background: var(--yt-rand);
}

.fortschritt-balken span {
    display: block;
    height: 100%;
    width: 35%;
    border-radius: 3px;
    background: currentColor;
    animation: fortschritt-lauf 1.6s ease-in-out infinite;
}

@keyframes fortschritt-lauf {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(300%); }
}

@media (prefers-reduced-motion: reduce) {
    .fortschritt-balken span {
        animation: none;
        width: 100%;
        opacity: 0.5;
    }
}

.ueberlagerung button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* --- Werkgespräch: drei Boxen (07.10.2026, Clairs finales Design) -----------------------------------------
   „Dein Agent“, „So geht's“, „Gespräch mit …“ — je ein Rahmen auf Rost mit kleiner Großbuchstaben-Überschrift. Die
   Seite scrollt im normalen Fluss (die Spalte mit festem Verfasser gilt nur noch nach der Übergabe, Klasse
   `gespraech`). Farben aus der Phase (phasen.css); die KI-Kachel und der Übergabe-Knopf sind Papier auf Rost.
   Kontraste: Text #fff4ec auf #a8451f 5,6:1, Kachel #3a1206 auf #fffaf6 15:1, Kachel-Knopf #fffaf6 auf #a8451f 5,7:1. */
.werkgespraech { display: grid; gap: 0.9rem; }
.werk-karte {
    border: 1.5px solid rgba(255, 250, 246, 0.35); border-radius: 16px; padding: 0.9rem; min-width: 0;
    display: grid; gap: 0.75rem;
}
.werk-karte > * { margin: 0; }
.werk-karte-titel {
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--yt-text-schwach); margin: 0;
}
.agent-zeile { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 0.75rem; align-items: center; }
.agent-zeile #avatar { width: 52px; height: 52px; margin: 0; }
.agent-zeile-text p { margin: 0; }
.agent-zeile-name { font-weight: 700; }
.linkfeld { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; align-items: center; }
.linkfeld-link {
    display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font: 0.75rem 'IBM Plex Mono', monospace; background: rgba(0, 0, 0, 0.18); border-radius: 8px; padding: 0.5rem 0.6rem;
}
.knopf-klein { padding: 0.45rem 0.7rem; font-size: 0.78rem; }
.linkfeld-hinweis { font-size: 0.8rem; }
.anleitung-satz { line-height: 1.5; }
.anleitung-schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.anleitung-schritte li { display: grid; grid-template-columns: 1.6rem 1fr; gap: 0.6rem; align-items: start; }
.anleitung-schritte p { margin: 0.1rem 0 0; }
.anleitung-nr {
    width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1.5px solid currentColor;
    display: grid; place-items: center; font-weight: 700; font-size: 0.8rem;
}
.ki-kachel { background: #fffaf6; color: #3a1206; border-radius: 12px; padding: 0.85rem 0.9rem; }
.ki-kachel p { margin: 0 0 0.4rem; }
.ki-kachel .ki-kachel-knopf { margin: 0.5rem 0 0.2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.ki-kachel .knopf { background: #a8451f; color: #fffaf6; padding: 0.55rem 1rem; font-size: 0.9rem; }
.ki-kachel #ki-auftrag-status { font-size: 0.85rem; }
.ki-auftrag-text > summary { cursor: pointer; font-size: 0.8rem; color: #7f3013; padding: 0.2rem 0; }
.ki-auftrag-text textarea { width: 100%; background: #ffffff; color: #3a1206; border: 1px solid #e3c3b2; margin-top: 0.4rem; font-size: 0.8rem; }
.anleitung-fragen > summary { cursor: pointer; font-weight: 600; }
.anleitung-klein { font-size: 0.78rem; line-height: 1.45; color: var(--yt-text-schwach); }

.werkstand { display: grid; gap: 0.6rem; font-size: 0.85rem; line-height: 1.4; }
.verstaendnis { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: center; }
.verstaendnis-ring { width: 6.5rem; height: 6.5rem; }
.verstaendnis-ring svg { display: block; width: 100%; height: 100%; }
.ring-gross .ring-bahn, .ring-viertel { fill: none; stroke-width: 10; }
.ring-gross .ring-bahn { stroke: rgba(255, 250, 246, 0.22); }
.ring-viertel { stroke: #fffaf6; transition: opacity 0.5s ease; }
.ring-viertel.leer { opacity: 0; }
.ring-zahl { font: 700 12px 'IBM Plex Mono', monospace; fill: currentColor; text-anchor: middle; }
.verstaendnis-text p { margin: 0; }
.verstaendnis-titel { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--yt-text-schwach); }
.verstaendnis-punkte { list-style: none; margin: 0.3rem 0 0; padding: 0; display: grid; gap: 0.15rem; font-size: 0.8rem; color: var(--yt-text-schwach); }
.verstaendnis-punkte li { display: grid; grid-template-columns: 1rem 1fr; gap: 0.3rem; }
.verstaendnis-punkte li::before { content: "○"; }
.verstaendnis-punkte li.voll { color: var(--yt-text); }
.verstaendnis-punkte li.voll::before { content: "●"; }
.verstaendnis-satz { margin: 0; font-weight: 600; }
.uebergabe-am-ring { display: grid; gap: 0.35rem; justify-items: start; }
.uebergabe-am-ring[hidden] { display: none; }
.uebergabe-am-ring p { margin: 0; }
.knopf-uebergabe { background: #fffaf6; color: #7f3013; font-size: 1rem; padding: 0.75rem 1.4rem; }
.material { display: grid; gap: 0.35rem; justify-items: center; }
.material-titel { margin: 0; font-size: 0.72rem; color: var(--yt-text-schwach); }
.material-ringe { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.1rem; }
.material-ringe li { display: grid; justify-items: center; gap: 0.1rem; }
.ring-klein { width: 2.75rem; height: 2.75rem; display: block; }
.ring-klein .ring-bahn, .ring-fuell { fill: none; stroke-width: 5; }
.ring-klein .ring-bahn { stroke: rgba(255, 250, 246, 0.22); }
.ring-fuell { stroke: #fffaf6; stroke-linecap: round; transition: stroke-dashoffset 0.5s ease; }
.ring-klein-zahl { font: 700 11px 'IBM Plex Mono', monospace; fill: currentColor; text-anchor: middle; }
.ring-klein-text { font-size: 0.7rem; color: var(--yt-text-schwach); white-space: nowrap; }
.werk-trenner { border: 0; height: 1px; background: rgba(255, 250, 246, 0.25); margin: 0; }
.gespraech-karte .gespraech-verlauf { margin: 0; padding: 0; border: 0; }
.frage-zeile { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 0.6rem; align-items: start; }
body[data-phase] .avatar-klein { width: 34px; height: 34px; background: #0b0f10; border-radius: 6px; padding: 3px; box-sizing: border-box; }
.avatar-klein svg, .avatar-klein canvas { width: 100%; height: 100%; display: block; }
.gespraech-karte .verfasser { padding: 0; }
.gespraech-karte .verlauf-verweis { font-size: 0.8rem; }
.zeichen-zaehler { margin: 0.3rem 0 0; text-align: right; font-size: 0.75rem; color: var(--yt-text-schwach); }
.zeichen-zaehler.zu-lang { color: var(--yt-text); font-weight: 600; text-align: left; }
@media (prefers-reduced-motion: reduce) {
    .ring-viertel, .ring-fuell { transition: none; }
}

/* Satz in der Box „Dein Agent“ (07.10.2026). */
.agent-bewerbungssatz { margin: 0.35rem 0 0; font-size: 0.85rem; font-weight: 600; }