/* Die drei Phasen einer Bewerbung als drei Farbflächen (30.09.2026).

   Erschaffung (Wizard), Werkvermittlung (Gespräch bis zur Übergabe) und Eingereicht
   (Dashboard + Chat danach) sahen bis hierher gleich aus. Clair: man soll spüren, dass eine
   neue Phase begonnen hat — abstrakt, kein Ort. Deshalb je Phase eine ganze Fläche:

     erschaffung  Teal    — hell, offen, „es entsteht etwas"
     werk         Rost    — warm, im Gespräch
     eingereicht  Schwarz — das Schwarz der Sitzungs-Bildschirme; ab hier gehört der Agent
                            zur Jury

   Umgesetzt allein über die --yt-*-Variablen von stil.css: was dort schon Variable ist
   (fast alles), zieht mit. Die Phase steht als data-phase am <body> (_basis.html).
   Diese Datei ersetzt für diese Seiten das automatische Hell/Dunkel — die Farbe gehört zur
   Phase, nicht zum System.

   Der Knopf hat Hintergrund --yt-akzent und Schrift --yt-bg-erhoben (stil.css), darum ist
   der „Akzent" je Phase die Tinte und „erhoben" das Papier. Kontraste nachgerechnet:
   Text auf Fläche ≥ 5,5, Schwachtext ≥ 4,8, Knopf ≥ 8. */

body[data-phase="erschaffung"] {
    --yt-bg: #4cb9c5;
    --yt-bg-erhoben: #eefafb;
    --yt-text: #062a2f;
    --yt-text-schwach: #0a3c43;
    --yt-akzent: #062a2f;
    --yt-erfolg: #0d4a1c;
    --yt-rand: #2b7e88;
    --phase-farbe: #4cb9c5;
}

body[data-phase="werk"] {
    --yt-bg: #a8451f;
    --yt-bg-erhoben: #7f3013;
    --yt-text: #fff4ec;
    --yt-text-schwach: #ffe1d0;
    --yt-akzent: #fff1e6;
    --yt-erfolg: #d9f2a3;
    --yt-rand: #d98a66;
    --phase-farbe: #a8451f;
}

body[data-phase="eingereicht"] {
    --yt-bg: #0b0f10;
    --yt-bg-erhoben: #12181a;
    --yt-text: #e8ecec;
    --yt-text-schwach: #9aa5a6;
    --yt-akzent: #96c841;
    --yt-erfolg: #96c841;
    --yt-rand: #223034;
    --phase-farbe: #0b0f10;
}

/* Auch der Rand hinter der Seite (Überscrollen, hohe Bildschirme) trägt die Farbe. */
html:has(body[data-phase="erschaffung"]) { background: #4cb9c5; }
html:has(body[data-phase="werk"]) { background: #a8451f; }
html:has(body[data-phase="eingereicht"]) { background: #0b0f10; }

/* Was in stil.css fest verdrahtet ist und auf den Phasenflächen nicht trägt. */
body[data-phase="werk"] .nachricht-mensch .nachricht-blase,
body[data-phase="eingereicht"] .nachricht-mensch .nachricht-blase {
    color: var(--yt-bg-erhoben);
}

/* Die Warnfarbe ist Rost — auf der Rost-Phase unsichtbar. */
body[data-phase="werk"] .knopf-warnung { background: #ffb08a; color: #3a1206; }
body[data-phase="werk"] .hinweis-warnung {
    border-color: var(--yt-text-schwach);
    background: var(--yt-bg-erhoben);
}
body[data-phase="werk"] .fehler,
body[data-phase="werk"] .gespraech-fehler { color: #ffe1d0; font-weight: 600; }
body[data-phase="erschaffung"] .fehler { color: #6b1d08; font-weight: 600; }
body[data-phase="erschaffung"] .knopf-warnung { background: #6b1d08; color: #fff4ec; }

/* --- Der Wisch (phasen.js) ---------------------------------------------------------
   Vor dem Wechsel läuft ein Streifen in der Zielfarbe über die Seite und trägt einen
   Satz; die neue Seite beginnt in derselben Farbe und gibt sie wieder frei. Ohne
   JavaScript oder bei „weniger Bewegung" bleibt es ein harter Schnitt. */
.phasen-wisch {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 0 max(1.5rem, 8vw);
    background: var(--wisch-farbe);
    color: var(--wisch-tinte);
}
.phasen-wisch .wisch-marke {
    font: 600 0.75rem 'IBM Plex Mono', monospace;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.75;
}
.phasen-wisch .wisch-satz {
    margin: 0.6rem 0 0;
    font: 300 clamp(1.8rem, 6vw, 3.4rem)/1.1 'IBM Plex Sans', system-ui, sans-serif;
    letter-spacing: -0.02em;
}

/* Ankunft: bevor <body> steht, deckt ein Pseudo-Element schon in der Zielfarbe ab
   (phasen.js setzt die Klasse im <head>), damit die Seite nicht kurz aufblitzt. */
html.phasen-ankunft::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: var(--wisch-farbe);
}

/* Nachgezogen nach den ersten Screenshots (30.09.): Links standen im Browser-Blau,
   Eingabefelder und Platzhalter trugen die Grundfarben. */
body[data-phase] a:not(.knopf):not(.knopf-leise):not(.knopf-still) {
    color: var(--yt-akzent);
}
body[data-phase] input::placeholder,
body[data-phase] textarea::placeholder {
    color: var(--yt-text-schwach);
    opacity: 0.75;
}
body[data-phase="erschaffung"] input[type="text"],
body[data-phase="erschaffung"] input[type="email"],
body[data-phase="erschaffung"] input[type="number"],
body[data-phase="erschaffung"] textarea,
body[data-phase="erschaffung"] select {
    background: #ffffff;
    color: var(--yt-text);
}

/* Das Siegel ist ein Gegenstand, keine Zeichnung auf der Fläche: immer auf einer dunklen
   Plakette, damit es auf Teal, Rost und Schwarz gleich gut lesbar ist (30.09.2026, auf Rost
   war es kaum zu sehen). Die Farben des Siegels selbst bleiben (avatar.js). */
body[data-phase] #avatar {
    background: #0b0f10;
    border-radius: 6px;
    padding: 6px;
    box-sizing: border-box;
}
body[data-phase] .gespraech-kopf #avatar { padding: 3px; }

.neues-gespraech p { margin: 0 0 0.75rem; }

/* Nach der Übergabe beginnt das Gespräch leer: dann kein leerer Kasten über dem Eingabefeld. */
.frage-tafel:not(:has(*)) { display: none; }