/* Sermo — Knopf, Gespräch und Figur (ADR 0020, templates/_sermo.php, _sermo_figur.php).
   Offen steht Sermo als Ganzfigur unten rechts, das Gespräch schwebt daneben (Florian, 05.11.2026).
   Beides liegt über der Seite (position: fixed) und verschiebt nichts: Jede Arbeitsseite passt
   weiter auf 1440 × 900 (docs/konzepte/App-ohne-Scrollen.md). Die Figur lässt Klicks auf die Seite
   durch. Am Handy ist das Gespräch Vollbild. Die Bezeichner heißen weiter `leiste`.
   Nur Tokens aus brand-tokens.css; Fenster der Seite (Top-Layer) liegen immer darüber. */

.sermo-knopf {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 900;
    width: 60px;
    height: 60px;
    padding: 0;
    border: 1.5px solid var(--border-field);
    border-radius: 999px;
    background: var(--surface-card);
    box-shadow: 0 6px 18px var(--petrol-12);
    cursor: pointer;
    overflow: hidden;
}
.sermo-knopf:hover { box-shadow: 0 8px 24px var(--petrolhell-25); }
.sermo-knopf:focus-visible,
.sermo-leiste button:focus-visible,
.sermo-leiste input:focus-visible,
.sermo-leiste a:focus-visible,
.sermo-leiste textarea:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}
.sermo-knopf[aria-expanded="true"] { display: none; }

.sermo-figur { display: block; width: 52px; height: 52px; margin: 3px auto; }
/* Der Knopf blinzelt einmal nach dem Laden, danach nur unter der Maus oder mit dem Tastaturfokus
   (Sermo-Prüfung 11/2026, F10 — WCAG 2.2.2: bis dahin alle 5,2 s auf jeder Seite, ohne Ende).
   „Bewegung anhalten" im Gespräch hält auch ihn an (`data-sermo-angehalten`, sermo.js). */
.sermo-knopf .sermo-augen { transform-box: fill-box; transform-origin: center; animation: sermo-blinzeln-einmal 2.2s 1; }
.sermo-knopf:hover .sermo-augen,
.sermo-knopf:focus-visible .sermo-augen { animation: sermo-blinzeln-hover 2.6s infinite; }
.sermo-knopf[data-sermo-angehalten] .sermo-augen { animation: none; }
@keyframes sermo-blinzeln-einmal { 0%, 84%, 100% { transform: none; } 92% { transform: scaleY(0.1); } }
@keyframes sermo-blinzeln-hover { 0%, 12%, 100% { transform: none; } 6% { transform: scaleY(0.1); } }

/* Die Bühne: Gespräch links, Figur rechts, beide unten bündig. Der Rahmen selbst nimmt keine
   Klicks an, nur das Gespräch — die Figur lässt sie zur Seite durch. */
.sermo-leiste {
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 900;
    max-width: 100vw;
    display: flex;
    align-items: flex-end;
    gap: 22px;
    padding: 0 24px 14px 0;
    box-sizing: border-box;
    pointer-events: none;
    font-family: var(--font-body);
    font-feature-settings: "lnum";
    color: var(--text-body);
}
.sermo-leiste[hidden] { display: none; }

.sermo-gespraech {
    position: relative;
    width: 420px;
    /* Auch ein langes Gespräch bleibt unter der Kopfzeile der App — „+ Neuer Post" und „Konto"
       stehen rechts oben, genau darüber (Kopfzeile 80 px + Luft; geprüft in bin/sermo/figur-pruefen.js). */
    max-height: calc(100vh - 116px);
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    background: var(--surface-card);
    border: 1px solid var(--border-rule);
    border-radius: 18px;
    box-shadow: 0 18px 48px var(--petrol-12);
    pointer-events: auto;
    animation: sermo-einblenden 0.3s ease-out;
}
/* Der Zipfel zeigt auf Sermos Mund (Höhe aus der Figur: 210 px breit, Mund 122 px über dem Fuß). */
.sermo-zipfel {
    position: absolute;
    right: -10px;
    bottom: 99px;
    width: 18px;
    height: 18px;
    background: var(--surface-card);
    border-top: 1px solid var(--border-rule);
    border-right: 1px solid var(--border-rule);
    transform: rotate(45deg);
}
.sermo-buehne { flex: 0 0 auto; width: 210px; animation: sermo-auftritt 0.45s ease-out; }
.sermo-ganz { display: block; width: 100%; height: auto; overflow: visible; }
@keyframes sermo-einblenden { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes sermo-auftritt { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* Was in der Figur von selbst läuft: die Zeilen auf der Rolle und die Denk-Punkte. Lage und
   Haltung setzt sermo-figur.js. */
.sermo-zeile { stroke-dasharray: 62; stroke-dashoffset: 62; }
.sermo-ganz[data-zustand="arbeit"] .sermo-zeile--1 { animation: sermo-zeile1 4s linear infinite; }
.sermo-ganz[data-zustand="arbeit"] .sermo-zeile--2 { animation: sermo-zeile2 4s linear infinite; }
.sermo-ganz[data-zustand="arbeit"] .sermo-zeile--3 { animation: sermo-zeile3 4s linear infinite; }
@keyframes sermo-zeile1 { 0% { stroke-dashoffset: 62; } 25%, 92% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 62; } }
@keyframes sermo-zeile2 { 0%, 25% { stroke-dashoffset: 62; } 50%, 92% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 62; } }
@keyframes sermo-zeile3 { 0%, 50% { stroke-dashoffset: 62; } 75%, 92% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 62; } }
.sermo-pk { transform-box: fill-box; transform-origin: center; animation: sermo-aufsteigen 2.4s ease-out infinite; }
.sermo-pk--2 { animation-delay: 0.35s; }
.sermo-pk--3 { animation-delay: 0.7s; }
@keyframes sermo-aufsteigen { 0% { opacity: 0; transform: translateY(5px) scale(0.6); } 25%, 75% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-3px); } }
/* Ruhephase der Welle und „Bewegung anhalten" (sermo-figur.js setzt `data-ruhe`): Die Rolle steht
   voll beschrieben, die Denk-Punkte stehen. */
.sermo-ganz[data-ruhe] .sermo-pk { animation: none; }
.sermo-ganz[data-ruhe][data-zustand="arbeit"] .sermo-zeile { animation: none; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
    .sermo-knopf .sermo-augen, .sermo-knopf:hover .sermo-augen, .sermo-knopf:focus-visible .sermo-augen,
    .sermo-gespraech, .sermo-buehne, .sermo-pk { animation: none; }
    .sermo-ganz[data-zustand="arbeit"] .sermo-zeile { animation: none; stroke-dashoffset: 0; }
}

.sermo-kopf {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 12px 12px 16px;
    border-bottom: 1px solid var(--border-rule);
}
.sermo-name { display: flex; flex-direction: column; flex: 1 1 auto; line-height: 1.2; }
.sermo-name strong { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -0.02em; }
.sermo-name small { font-size: 13px; color: var(--text-muted); }
.sermo-mehr {
    border: 0;
    background: none;
    color: var(--text-muted);
    font: inherit;
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
    padding: 6px;
    white-space: nowrap;
}
.sermo-zu {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-body);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}
.sermo-zu:hover, .sermo-mehr:hover, .sermo-still:hover { background: var(--accent-hover); }
/* „Bewegung anhalten" (F10, WCAG 2.2.2): Pause-Zeichen, gedrückt das Weiter-Zeichen. */
.sermo-still {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}
.sermo-still .sermo-still__weiter,
.sermo-still[aria-pressed="true"] .sermo-still__pause { display: none; }
.sermo-still[aria-pressed="true"] .sermo-still__weiter { display: block; }

.sermo-verlauf {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sermo-blase {
    margin: 0;
    max-width: 88%;
    padding: 10px 13px;
    font-size: 15px;
    line-height: 1.45;
    white-space: pre-line;
    overflow-wrap: anywhere;
}
.sermo-blase--sermo { align-self: flex-start; background: var(--stein); border-radius: 14px 14px 14px 4px; }
.sermo-blase--kunde { align-self: flex-end; background: var(--petrol); color: var(--text-on-dark); border-radius: 14px 14px 4px 14px; }
.sermo-blase--leise { color: var(--text-muted); background: none; padding-left: 0; font-size: 14px; }

.sermo-denkt { display: inline-flex; gap: 4px; margin-right: 8px; vertical-align: middle; }
.sermo-denkt i { width: 7px; height: 7px; background: var(--petrolhell); animation: sermo-denkt 1.2s infinite ease-in-out; }
.sermo-denkt i:nth-child(2) { animation-delay: 0.2s; }
.sermo-denkt i:nth-child(3) { animation-delay: 0.4s; }
@keyframes sermo-denkt { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sermo-denkt i { animation: none; opacity: 0.6; } }

.sermo-karte {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--border-rule);
    border-radius: 12px;
    background: var(--surface-card);
}
.sermo-karte__vorschau {
    display: block;
    width: 100%;
    max-width: 260px;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 6px;
    background: var(--stein);
}
.sermo-karte__titel { font-weight: 700; font-size: 14px; }
.sermo-karte__liste { margin: 0; padding-left: 18px; font-size: 14px; color: var(--text-muted); }
.sermo-karte__hinweis { margin: 0; font-size: 14px; color: var(--text-muted); }
.sermo-karte__knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sermo-karte form { margin: 0; }

.sermo-tun {
    min-height: 44px;
    padding: 0 18px;
    border: 1.5px solid var(--text-on-amber);
    border-radius: 999px;
    background: var(--accent);
    color: var(--text-on-amber);
    font: inherit;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
}
.sermo-tun:hover { background: var(--apricot-hell); }
.sermo-tun[disabled] { opacity: 0.5; cursor: not-allowed; }
/* Solange Sermo antwortet, wartet „N Posts erstellen" (sermo.js, setzeBeschaeftigt). */
.sermo-leiste[data-sermo-beschaeftigt] [data-sermo-vorschlag-knopf] { opacity: 0.5; pointer-events: none; }

/* Zwischen vorigem und laufendem Gespräch. */
.sermo-trenner {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0;
    font-size: 12.5px;
    color: var(--text-muted);
    text-align: center;
}
.sermo-trenner::before,
.sermo-trenner::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--border-rule); }
/* Was Sermo ins neue Gespräch mitnimmt (F9) — unter dem Trenner, aufklappbar. */
.sermo-details.sermo-mitgenommen { margin: -2px 0 6px; text-align: left; }
.sermo-mitgenommen-text { margin: 6px 0 0; white-space: pre-line; line-height: 1.45; }
.sermo-link { font-size: 14px; font-weight: 600; color: var(--petrol); }

/* Feld oben über die ganze Breite; darunter der Mikrofon-Knopf (setzt spracheingabe.js hinter
   das Feld) und rechts „Senden" — sonst drückt der Mikrofon-Knopf das Feld auf ein Drittel. */
.sermo-eingabe {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 12px 16px 6px;
    border-top: 1px solid var(--border-rule);
}
.sermo-eingabe textarea {
    flex: 1 1 100%;
    resize: none;
    min-height: 48px;
    max-height: 160px;
    padding: 10px 12px;
    border: 1.5px solid var(--border-field);
    border-radius: 12px;
    font: inherit;
    font-size: 15px;
    color: var(--text-body);
    background: var(--surface-card);
}
.sermo-senden {
    flex: 0 0 auto;
    margin-left: auto;
    width: 44px;
    height: 44px;
    border: 1.5px solid var(--text-on-amber);
    border-radius: 999px;
    background: var(--accent);
    color: var(--text-on-amber);
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
}
.sermo-senden[disabled] { opacity: 0.5; cursor: wait; }
.sermo-fuss { margin: 0; padding: 0 16px 12px; font-size: 12.5px; line-height: 1.45; color: var(--text-muted); }
.sermo-fuss a { color: var(--petrol); }
/* Restkontingent (F14), nur wenn es knapp wird — steht über dem KI-Hinweis. */
.sermo-fuss--kontingent { padding-bottom: 4px; font-weight: 700; color: var(--petrol); }
.sermo-fuss--kontingent[hidden] { display: none; }

/* Startvorschläge im leeren Chat (F3) — verschwinden mit der ersten Nachricht. */
.sermo-start { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 4px; }
.sermo-start__titel { font-size: 13px; color: var(--text-muted); }
.sermo-start__knopf {
    min-height: 40px;
    padding: 0 14px;
    border: 1.5px solid var(--border-field);
    border-radius: 999px;
    background: var(--surface-card);
    color: var(--petrol);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.sermo-start__knopf:hover { border-color: var(--petrol); background: var(--accent-wash); }

/* Daumen unter der jüngsten Antwort (F14). */
.sermo-daumen { display: flex; align-items: center; gap: 2px; margin-top: -6px; padding-left: 4px; font-size: 12.5px; color: var(--text-muted); }
.sermo-daumen span { margin-right: 4px; }
.sermo-daumen button {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}
.sermo-daumen button:hover { background: var(--accent-hover); color: var(--petrol); }

.sermo-unsichtbar {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Fotos: Knopf in der Eingabe, Karte „Wofür ist dieses Foto?" mit drei Wahlknöpfen. */
.sermo-anhang {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 12px;
    border: 1.5px solid var(--border-field);
    border-radius: 999px;
    background: var(--surface-card);
    color: var(--petrol);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.sermo-anhang:hover { background: var(--accent-hover); }
.sermo-anhang[hidden] { display: none; }
.sermo-karte__vorschau--klein { max-width: 140px; }
.sermo-wahl { display: flex; flex-direction: column; gap: 8px; }
.sermo-wahl__knopf {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 12px;
    border: 1.5px solid var(--border-field);
    border-radius: 10px;
    background: var(--surface-card);
    color: var(--text-body);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.sermo-wahl__knopf strong { font-size: 14.5px; }
.sermo-wahl__knopf span { font-size: 13px; color: var(--text-muted); line-height: 1.4; }
.sermo-wahl__knopf em { font-size: 12.5px; font-style: normal; font-weight: 600; color: var(--text-muted); }
.sermo-wahl__knopf:hover:not([aria-disabled="true"]) { border-color: var(--petrol); background: var(--accent-wash); }
/* `aria-disabled` statt `disabled` (F10): Der Knopf bleibt in der Tab-Folge, „ab Pro" ist hörbar. */
.sermo-wahl__knopf[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.sermo-fotoform { display: flex; flex-direction: column; gap: 10px; }
.sermo-feld { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }
.sermo-feld input {
    min-height: 40px;
    padding: 0 10px;
    border: 1.5px solid var(--border-field);
    border-radius: 8px;
    font: inherit;
    font-size: 15px;
}
.sermo-haken { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.45; }
.sermo-haken input { margin-top: 3px; flex: 0 0 auto; }
.sermo-details { font-size: 12.5px; color: var(--text-muted); margin-left: 24px; }
.sermo-details summary { cursor: pointer; }
.sermo-details ul { margin: 6px 0 0; padding-left: 16px; display: flex; flex-direction: column; gap: 4px; }
.sermo-karte__fehler { margin: 0; font-size: 13.5px; color: var(--status-error-fg); }

/* Übersicht: die Fragen an Sermo in der Startkarte (inverse Karte, helle Schrift auf Petrol;
   Größe dort in app.css, `.uebersicht-fragen`). */
.uebersicht-sermo {
    min-height: 40px;
    padding: 0 16px;
    border: 1.5px solid var(--border-on-dark);
    border-radius: 999px;
    background: transparent;
    color: var(--text-on-dark);
    font: inherit;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}
.uebersicht-sermo:hover { background: var(--surface-on-dark); }

/* Handy: Vollbild, Sermo klein über dem Gespräch. */
@media (max-width: 700px) {
    .sermo-leiste {
        top: 0;
        left: 0;
        width: 100vw;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0;
        background: var(--surface-card);
        pointer-events: auto;
    }
    .sermo-buehne { order: -1; align-self: center; width: 84px; margin-top: 6px; }
    .sermo-gespraech { flex: 1 1 auto; min-height: 0; width: auto; max-height: none; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
    .sermo-zipfel { display: none; }
    .sermo-knopf { right: 14px; bottom: 14px; }
    /* Seit „Bewegung anhalten" vier Dinge im Kopf — enger stellen, damit nichts umbricht. */
    .sermo-kopf { gap: 2px; padding: 10px 8px 10px 14px; }
}