/* Romantic Gothic: Leder, Bordeaux, Gold und Pergament.
   Die Werte stammen aus Werkzeuge/Testumgebung/soll-design3/design-tokens.json.
   Die Namen bleiben, wie sie waren - sie benennen die Rolle, nicht den Farbton,
   und ein Materialwechsel soll nicht dazu fuehren, dass ueberall --blau steht
   und Bordeaux herauskommt. */
:root {
    color-scheme: light;

    /* Pergament: die hellen Inhaltsflaechen, gestaffelt von aussen nach innen. */
    --papier: #f5eae1;
    --flaeche: #fff7ed;
    --flaeche-warm: #f0dfd0;
    --weich: #f0dfd0;
    --linie: #d5b293;
    --linie-zart: #e7cebA;
    --pergament-schatten: #e7ceba;

    --tinte: #351a21;
    --tinte-weich: #6f514b;
    --tinte-zart: #8b7168;

    /* Leder und Pflaume: Kopfbereich, Menueleiste, ruhende Reiter. */
    --leder: #211a23;
    --leder-hoch: #2c222c;
    --pflaume: #382030;
    --tinte-tief: #180c19;

    /* Der aktive Zustand ist Bordeaux mit Goldrahmen. */
    --akzent: #65273d;
    --akzent-tief: #531c31;
    --akzent-hell: #763149;
    --akzent-zart: #f3dce0;

    /* Gold ist Schmuck, Rahmen und Beschlag - nie Flaeche unter Fliesztext. */
    --gold-glanz: #fff0b8;
    --gold-hell: #f7d994;
    --gold: #c99055;
    --gold-dunkel: #7a4027;

    --text-auf-leder: #fff1d8;
    --gold-auf-leder: #f3cc7a;

    --gruen: #596b3c;
    --gruen-zart: #e3e5d2;
    --rose: #9f3148;
    --rose-zart: #f3dce0;

    /* Gedeckte Kacheln, alle aus der warmen Familie. */
    --kachel-rose: #f0d9d6;
    --kachel-minze: #e2e4d4;
    --kachel-flieder: #e6d8e0;
    --kachel-salbei: #e4e1cb;
    --kachel-sand: #f7e7cf;

    /* Warme braune Schatten statt schwarzer - der Entwurf schlieszt harte
       schwarze Schlagschatten ausdruecklich aus. */
    --schatten-zart: 0 1px 2px rgba(65, 35, 42, .07);
    --schatten: 0 5px 14px rgba(65, 35, 42, .16);
    --schatten-tief: 0 8px 20px rgba(53, 26, 33, .20);
    --schatten-leder: 0 3px 7px rgba(24, 12, 25, .35),
        inset 0 1px 0 rgba(255, 226, 170, .28),
        inset 0 -2px 4px rgba(0, 0, 0, .22);

    --rundung-klein: 12px;
    --rundung: 20px;
    --rundung-gross: 26px;
    --rundung-panel: 32px;

    /* Serife fuer alles: Der Entwurf verlangt sie fuer Titel wie fuer
       Fliesztext. Cormorant traegt die groszen Titel, Lora den Rest; beide
       liegen als Webfont neben dieser Datei. */
    font-family: Lora, Georgia, "Times New Roman", serif;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: Lora;
    src: url("../fonts/lora.ttf") format("truetype");
    font-weight: 400 700;
    font-display: swap;
}

@font-face {
    font-family: "Cormorant Garamond";
    src: url("../fonts/cormorant-garamond.ttf") format("truetype");
    font-weight: 400 700;
    font-display: swap;
}

* { box-sizing: border-box; }

html, body, #app { width: 100%; min-height: 100%; margin: 0; }

body {
    background: var(--papier);
    color: var(--tinte);
    overflow: hidden;
}

/* textarea und select erben die Schrift nicht von selbst - ohne sie hier stand
   jedes mehrzeilige Feld in der Vorgabeschrift des Browsers. Sichtbar war das
   im Eingabefeld des Chats und in der Info des Profils: gesperrt, schmal und
   in einer anderen Familie als der Text daneben. */
button, input, textarea, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.boot-screen {
    align-items: center;
    background: var(--papier);
    display: flex;
    inset: 0;
    justify-content: center;
    position: fixed;
}

.boot-mark, .brand-mark, .rail-mark {
    align-items: center;
    background: linear-gradient(145deg, var(--akzent-hell), var(--akzent-tief));
    border-radius: 16px 16px 16px 6px;
    box-shadow: 0 10px 26px rgba(53, 26, 33, .34);
    color: white;
    display: inline-flex;
    font-weight: 800;
    justify-content: center;
}

.boot-mark { font-size: 24px; height: 54px; width: 54px; z-index: 1; }

.boot-pulse {
    animation: pulse 1.6s ease-out infinite;
    border: 1px solid rgba(201, 144, 85, .5);
    border-radius: 50%;
    height: 90px;
    position: absolute;
    width: 90px;
}

@keyframes pulse {
    from { opacity: .75; transform: scale(.65); }
    to { opacity: 0; transform: scale(1.2); }
}

/* ---------------------------------------------------------------------------
   Anmeldung - "Pergamentbrief"

   Die Anmeldung liegt auf derselben Pergamentflaeche wie der Chat dahinter.
   Das Blatt darauf traegt Form und Goldrahmen der Packkarten aus der App und
   oben den Messingverschluss des Stickerfachs: ein verschlossenes Blatt, das
   sich oeffnen laeszt. Vorher war es eine weisze Glaskarte auf hellgrauem
   Grund - die sah aus wie ein anderes Programm.
   --------------------------------------------------------------------------- */
/* Der Chatraum traegt eine erzaehlende Illustration; die Anmeldung bekommt
   einen eigenen, ruhigen Grund: ein feines Rautengitter mit vier Vierpaessen
   und darunter eine Papierkoernung. Beide Kacheln sind nahtlos, zusammen
   knapp 60 kB, und so schwach gezeichnet, dass sie Material andeuten statt
   ein Motiv zu zeigen. */
.lock-shell {
    align-items: center;
    background-color: #fbf4e8;
    background-image:
        url("../design/atelier-soft/login-parchment.svg"),
        url("../design/atelier-soft/login-parchment-grain.png");
    background-position: center, center;
    background-repeat: repeat, repeat;
    background-size: 240px, 256px;
    display: flex;
    flex-direction: column;
    height: 100dvh;
    justify-content: center;
    /* Ein zentriertes Kind, das hoeher ist als der Behaelter, laeszt sich sonst
       am oberen Rand nicht erreichen: der Beschlag und der Kartenkopf waren
       abgeschnitten und blieben es auch beim Rollen. */
    justify-content: safe center;
    overflow: auto;
    padding: 30px 22px;
    position: relative;
}

/* Die Papierstruktur ist hell und gleichmaeszig; ohne diesen weichen Rand
   schwebt das Blatt nicht, sondern klebt darauf. */
.lock-shell::before {
    background: radial-gradient(ellipse at 50% 45%, transparent 38%, rgba(90, 55, 40, .17));
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.lock-card {
    background: linear-gradient(180deg, #fffdf8, var(--flaeche));
    border: 2px solid var(--gold);
    border-radius: 24px;
    box-shadow:
        0 18px 44px rgba(70, 40, 30, .22),
        inset 0 0 0 1px rgba(255, 255, 255, .8),
        inset 0 0 0 5px var(--flaeche),
        inset 0 0 0 6px rgba(201, 144, 85, .42);
    max-width: 600px;
    padding: 40px 46px 28px;
    position: relative;
    text-align: center;
    width: 100%;
    z-index: 1;
}

/* Derselbe Beschlag wie am Stickerfach - dort ist er der Griff, mit dem sich
   das Fach aufziehen laeszt. */
.lock-latch {
    background: url("../design/atelier-soft/picker-latch.png") center / contain no-repeat;
    height: 52px;
    left: 50%;
    position: absolute;
    top: -30px;
    transform: translateX(-50%);
    width: 96px;
}

.brand-lockup {
    align-items: center;
    color: var(--tinte);
    display: flex;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 25px;
    font-weight: 600;
    gap: 12px;
    justify-content: center;
    letter-spacing: .03em;
}

/* Die Marke in der Kopfzeile trägt dasselbe gezeichnete Zeichen: keine Fläche,
   keine Kachel, nur der Strich in der Akzentfarbe. */
.brand-mark {
    background: none;
    box-shadow: none;
    color: var(--akzent);
    height: 37px;
    width: 37px;
}

/* Auf dem Blatt steht die Marke als Strichzeichnung im Gold der Umgebung.
   Die weiße Kachel davor sah auf dem dunklen Pergament aus wie ein
   aufgeklebtes Fremdteil. */
.lock-card .brand-mark {
    background: transparent;
    box-shadow: none;
    color: var(--gold);
    height: 40px;
    width: 40px;
}

.brand-glyph {
    fill: none;
    height: 100%;
    stroke: currentColor;
    stroke-linejoin: round;
    stroke-width: 2.3;
    width: 100%;
}

.privacy-chip {
    align-items: center;
    background: linear-gradient(180deg, var(--leder-hoch), var(--leder));
    border: 1px solid rgba(201, 144, 85, .65);
    border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(255, 226, 170, .22);
    color: var(--gold-auf-leder);
    display: inline-flex;
    font-size: 10.5px;
    gap: 8px;
    letter-spacing: .16em;
    padding: 8px 14px;
    text-transform: uppercase;
}

.privacy-chip span {
    background: var(--gold-hell);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(247, 217, 148, .14);
    height: 6px;
    width: 6px;
}

.pulse-dot {
    background: var(--gruen);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(89, 107, 60, .16);
    height: 7px;
    width: 7px;
}

.lock-card h1 {
    font-size: clamp(34px, 5vw, 44px);
    letter-spacing: -.01em;
    line-height: 1.04;
    margin: 14px 0 12px;
}

.lock-card h1 em { color: var(--akzent); font-style: normal; }

.lock-copy {
    color: var(--tinte-weich);
    font-size: 15px;
    line-height: 1.65;
    margin: 0 auto;
    max-width: 42ch;
}

.vault-fields {
    display: grid;
    gap: 13px;
    grid-template-columns: minmax(0, 1fr);
    margin-top: 24px;
    text-align: left;
}

.vault-fields label {
    color: var(--gold-dunkel);
    display: flex;
    flex-direction: column;
    font-size: 10px;
    font-weight: 700;
    gap: 7px;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.vault-fields input {
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: 11px;
    color: var(--tinte);
    min-height: 50px;
    outline: none;
    padding: 0 15px;
    text-transform: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.vault-fields input:focus {
    border-color: var(--akzent);
    box-shadow: 0 0 0 3px rgba(101, 39, 61, .14);
}

.unlock-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    margin-top: 22px;
}

.unlock-actions .primary-action { justify-content: center; width: 100%; }

/* Bordeaux mit Goldkante - dieselbe Schaltflaeche wie "Neue Unterhaltung" im
   Chat. Der Schatten war blau und stammte aus der Vorgaengerfassung. */
.primary-action {
    align-items: center;
    background: linear-gradient(180deg, var(--akzent-hell), var(--akzent-tief));
    border: 1px solid #4d1728;
    border-radius: 14px;
    box-shadow:
        0 6px 14px rgba(93, 27, 46, .30),
        inset 0 0 0 1px rgba(247, 217, 148, .38),
        inset 0 1px 0 rgba(255, 230, 208, .30);
    color: var(--text-auf-leder);
    cursor: pointer;
    display: inline-flex;
    font-weight: 600;
    gap: 12px;
    min-height: 54px;
    padding: 0 22px;
    transition: transform .18s ease, box-shadow .18s ease;
}

.primary-action:hover:not(:disabled) {
    box-shadow:
        0 10px 22px rgba(93, 27, 46, .38),
        inset 0 0 0 1px rgba(247, 217, 148, .5),
        inset 0 1px 0 rgba(255, 230, 208, .34);
    transform: translateY(-2px);
}

.primary-action:disabled { cursor: wait; opacity: .7; }
.primary-action b { color: var(--gold-auf-leder); font-size: 20px; margin-left: 8px; }

.action-icon {
    border: 2px solid rgba(255, 255, 255, .9);
    border-radius: 3px;
    height: 17px;
    position: relative;
    width: 17px;
}

.action-icon::after {
    background: rgba(255, 255, 255, .9);
    content: "";
    height: 5px;
    left: 4px;
    position: absolute;
    top: 4px;
    width: 5px;
}

.file-action {
    border: 1px solid var(--linie);
    border-radius: 14px;
    color: #5d554b;
    cursor: pointer;
    font-size: 13px;
    font-weight: 680;
    padding: 17px 18px;
    transition: background .18s ease;
}

.file-action:hover { background: var(--weich); }
.file-action.disabled { opacity: .5; pointer-events: none; }

/* Zierlinie und Merkmale schlieszen das Blatt ab - dieselbe Raute wie ueber
   den Abschnitten in der App. */
.lock-rule {
    align-items: center;
    color: var(--gold);
    display: flex;
    font-size: 11px;
    gap: 14px;
    margin: 26px 0 18px;
}

.lock-rule::before, .lock-rule::after {
    background: linear-gradient(90deg, transparent, rgba(201, 144, 85, .75), transparent);
    content: "";
    flex: 1;
    height: 1px;
}

.security-facts {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    text-align: left;
}

.security-facts > div { align-items: center; display: flex; gap: 10px; min-width: 0; }
.security-facts p { display: flex; flex-direction: column; margin: 0; min-width: 0; }
.security-facts b { font-size: 12.5px; font-weight: 600; }
.security-facts small { color: var(--tinte-zart); font-size: 10.5px; margin-top: 2px; }

.fact-icon {
    align-items: center;
    border: 1px solid rgba(201, 144, 85, .75);
    border-radius: 50%;
    color: var(--gold-dunkel);
    display: flex;
    flex: 0 0 auto;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 13px;
    height: 32px;
    justify-content: center;
    width: 32px;
}

/* Das Herz sitzt an der Unterkante wie an den Packkarten der App. */
.lock-heart {
    bottom: -11px;
    color: var(--gold);
    font-size: 15px;
    left: 50%;
    line-height: 1;
    position: absolute;
    transform: translateX(-50%);
}

.lock-footnote {
    color: var(--tinte-zart);
    font-size: 11.5px;
    line-height: 1.5;
    margin: 20px 0 0;
    position: relative;
    text-align: center;
    z-index: 1;
}

.notice {
    align-items: center;
    border-radius: 14px;
    display: flex;
    gap: 11px;
    margin-top: 18px;
    padding: 12px 14px;
}

.error-notice { background: var(--flaeche); border: 1px solid #f2ebdf; color: var(--rose); }
.error-notice > span {
    align-items: center;
    background: var(--rose);
    border-radius: 50%;
    color: white;
    display: flex;
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 800;
    height: 20px;
    justify-content: center;
    width: 20px;
}
.error-notice p { font-size: 12px; line-height: 1.45; margin: 0; }

.app-shell {
    background: var(--papier);
    display: grid;
    gap: 14px;
    grid-template-columns: 74px 348px minmax(0, 1fr);
    height: 100dvh;
    overflow: hidden;
    padding: 14px;
}

/* Die Leiste ist hell wie das Papier, nicht mehr fast schwarz. Getrennt wird
   über Abstand und Rundung, nicht über einen harten Farbsprung. */
.app-rail {
    align-items: center;
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--rundung-gross);
    box-shadow: var(--schatten-zart);
    display: flex;
    flex-direction: column;
    padding: 18px 12px 16px;
}

.rail-mark { border-radius: 14px 14px 14px 6px; height: 42px; width: 42px; }
.app-rail nav { display: flex; flex: 1; flex-direction: column; gap: 8px; margin-top: 30px; }

.rail-button, .avatar-button {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 15px;
    color: var(--tinte-weich);
    cursor: pointer;
    display: flex;
    height: 46px;
    justify-content: center;
    transition: background .15s, color .15s;
    width: 46px;
}

.rail-button.active { background: var(--akzent-zart); color: var(--akzent-tief); }
.rail-button:hover { background: var(--weich); color: var(--tinte); }

.chat-glyph {
    border: 2px solid currentColor;
    border-radius: 7px 7px 7px 3px;
    height: 19px;
    position: relative;
    width: 21px;
}

.chat-glyph::after {
    color: currentColor;
    content: "··";
    font-size: 15px;
    left: 4px;
    letter-spacing: 1px;
    line-height: 7px;
    position: absolute;
    top: 1px;
}

.shield-glyph, .orbit-shield, .mini-shield {
    border: 2px solid currentColor;
    border-radius: 10px 10px 14px 14px;
    display: inline-block;
    height: 21px;
    position: relative;
    width: 18px;
}

.shield-glyph::after, .orbit-shield::after, .mini-shield::after {
    border-bottom: 2px solid currentColor;
    border-right: 2px solid currentColor;
    content: "";
    height: 7px;
    left: 5px;
    position: absolute;
    top: 4px;
    transform: rotate(45deg);
    width: 3px;
}

.avatar-button {
    background: linear-gradient(145deg, var(--kachel-rose), var(--kachel-flieder));
    color: var(--pflaume);
    font-size: 13px;
    font-weight: 800;
    overflow: hidden;
}
.avatar-button img { height: 100%; object-fit: cover; width: 100%; }

.conversation-panel {
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--rundung-gross);
    box-shadow: var(--schatten-zart);
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.panel-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 20px 18px 12px;
}

.eyebrow {
    color: var(--tinte-zart);
    display: block;
    font-size: 9px;
    font-weight: 820;
    letter-spacing: .16em;
}

.panel-header h2, .thread-header h2, .scanner-card h2 {
    letter-spacing: -.035em;
    margin: 4px 0 0;
}
.panel-header h2 { font-size: 21px; }

/* Der Einstieg in einen neuen Chat ist die wichtigste Handlung der Spalte und
   sitzt deshalb als volle Schaltfläche über der Suche - so wie im Entwurf. */
.new-chat-button {
    align-items: center;
    background: var(--akzent);
    border: 0;
    border-radius: 15px;
    box-shadow: 0 6px 16px rgba(93, 27, 46, .26);
    color: white;
    cursor: pointer;
    display: flex;
    font-size: 14px;
    font-weight: 700;
    gap: 10px;
    justify-content: center;
    margin: 4px 18px 12px;
    padding: 14px 18px;
    transition: background .15s, transform .1s;
}
.new-chat-button:hover { background: var(--akzent-tief); }
.new-chat-button:active { transform: translateY(1px); }
.new-chat-button .plus {
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
}

.icon-button {
    align-items: center;
    background: white;
    border: 1px solid var(--linie);
    border-radius: 12px;
    color: #70685e;
    cursor: pointer;
    display: flex;
    height: 39px;
    justify-content: center;
    width: 39px;
}
.icon-button:hover { background: var(--weich); }

.search-box {
    align-items: center;
    background: #f5f4f1;
    border: 1px solid transparent;
    border-radius: 13px;
    display: flex;
    margin: 0 20px;
    padding: 0 12px;
}
.search-box:focus-within { border-color: rgba(101, 39, 61, .35); background: var(--flaeche); }
.search-box > span {
    border: 1.8px solid var(--tinte-zart);
    border-radius: 50%;
    height: 13px;
    margin-right: 9px;
    position: relative;
    width: 13px;
}
.search-box > span::after {
    background: var(--tinte-zart);
    content: "";
    height: 1.8px;
    position: absolute;
    right: -4px;
    top: 10px;
    transform: rotate(45deg);
    width: 6px;
}
.search-box input {
    background: transparent;
    border: 0;
    color: var(--tinte);
    font-size: 12px;
    height: 43px;
    min-width: 0;
    outline: 0;
    width: 100%;
}
.search-box input::placeholder { color: #9a938a; }
.search-box kbd {
    background: white;
    border: 1px solid var(--linie);
    border-radius: 5px;
    color: var(--tinte-weich);
    font-size: 8px;
    padding: 3px 5px;
    white-space: nowrap;
}

.session-banner {
    align-items: center;
    background: linear-gradient(90deg, rgba(89, 107, 60, .10), rgba(89, 107, 60, .04));
    border: 1px solid rgba(89, 107, 60, .22);
    border-radius: 12px;
    display: flex;
    gap: 11px;
    margin: 15px 20px 6px;
    padding: 10px 12px;
}
.session-banner p, .panel-footer p { display: flex; flex-direction: column; margin: 0; }
.session-banner b { color: var(--gruen); font-size: 10px; }
.session-banner small { color: #94887b; font-size: 9px; margin-top: 2px; }

/* Der Abgleich nach dem Entsperren.

   Bewusst eine eigene Klasse und nicht das Sitzungsband: Die Fassung
   "web-vnext" blendet .session-banner und .migration-hint aus, und damit war
   die schwebende .status-notice der einzige Hinweis darauf, dass im
   Hintergrund noch gearbeitet wird - eine blassgruene Pille ueber der dunklen
   Kopfleiste. Gold statt Gruen: Hier ist etwas im Gange, nicht in Ordnung. */
.sync-banner {
    align-items: center;
    background: linear-gradient(90deg, rgba(201, 144, 85, .18), rgba(201, 144, 85, .06));
    border: 1px solid rgba(201, 144, 85, .42);
    border-radius: 12px;
    display: flex;
    flex: 0 0 auto;
    gap: 11px;
    margin: 12px 14px 8px;
    padding: 10px 12px;
}
/* Im Chat sitzt er als Band unter dem Kopf - wie die fixierten Nachrichten
   daneben, und wie die schrumpft er im Flexstapel nicht weg. */
.sync-banner.in-thread {
    background: linear-gradient(90deg, rgba(201, 144, 85, .20), rgba(255, 250, 242, .94));
    border-radius: 0;
    border-width: 0 0 1px;
    margin: 0;
    padding: 9px 22px;
    position: relative;
    z-index: 3;
}
.sync-banner p { display: flex; flex-direction: column; margin: 0; min-width: 0; }
.sync-banner b { color: var(--gold-dunkel); font-size: 10px; }
.sync-banner small { color: #8b7168; font-size: max(10px, .68rem); margin-top: 2px; }
.sync-spinner {
    animation: sync-spin 1s linear infinite;
    border: 2px solid rgba(201, 144, 85, .3);
    border-radius: 50%;
    border-top-color: var(--gold);
    flex: none;
    height: 13px;
    width: 13px;
}
@keyframes sync-spin { to { transform: rotate(360deg); } }
.theme-dark .sync-banner {
    background: linear-gradient(90deg, rgba(247, 217, 148, .16), rgba(247, 217, 148, .05));
    border-color: rgba(247, 217, 148, .34);
}
/* Das Band im Chat liegt auf der gemusterten Fläche und braucht auch im
   Dunkeln etwas Deckung - sonst schaut das Muster durch die Schrift. */
.theme-dark .sync-banner.in-thread {
    background: linear-gradient(90deg, rgba(247, 217, 148, .16), rgba(37, 22, 39, .94));
}
.theme-dark .sync-banner b { color: var(--gold-hell); }
.theme-dark .sync-banner small { color: var(--tinte-zart); }

.conversation-list {
    flex: 1;
    overflow: auto;
    padding: 7px 10px 16px;
}

.conversation-row {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--rundung);
    color: inherit;
    cursor: pointer;
    display: flex;
    gap: 12px;
    padding: 10px 11px;
    text-align: left;
    transition: background .16s ease, border-color .16s ease;
    width: 100%;
}
.conversation-row:hover { background: var(--weich); }
.conversation-row.selected {
    background: var(--akzent-zart);
    border-color: rgba(201, 144, 85, .55);
}

/* Runde Avatare mit warmem Rand - im Entwurf tragen sie Illustrationen, hier
   sonst die Initiale. */
.conversation-avatar, .thread-avatar {
    align-items: center;
    background: var(--kachel-sand);
    border: 1px solid var(--linie);
    border-radius: 50%;
    color: #8a6a3c;
    display: flex;
    flex: 0 0 auto;
    font-size: 15px;
    font-weight: 800;
    height: 46px;
    justify-content: center;
    overflow: hidden;
    width: 46px;
}
.conversation-avatar img, .thread-avatar img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}
.conversation-copy { min-width: 0; width: 100%; }
.conversation-meta { align-items: baseline; display: flex; justify-content: space-between; gap: 10px; }
.conversation-meta b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-meta time { color: var(--tinte-zart); font-size: 11px; white-space: nowrap; }
.conversation-preview {
    color: var(--tinte-weich);
    display: block;
    font-size: 12px;
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.conversation-delivery-state {
    color: var(--tinte-zart);
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: -2px;
    margin-right: 5px;
}

.empty-list { color: #9f9891; padding: 50px 24px; text-align: center; }
.empty-list span { font-size: 28px; letter-spacing: 5px; }
.empty-list p { font-size: 11px; line-height: 1.5; }

/* Der Fuß der Chatspalte ist im Entwurf keine Statuszeile, sondern eine
   Vertrauenskarte plus der Einstieg ins Privacy Center. */
.panel-footer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 14px 14px;
}

.trust-card {
    align-items: flex-start;
    background: var(--gruen-zart);
    border: 1px solid rgba(89, 107, 60, .22);
    border-radius: var(--rundung);
    display: flex;
    gap: 11px;
    padding: 13px 14px;
}
.trust-card .mini-shield { flex: 0 0 auto; height: 19px; margin-top: 1px; width: 16px; }
.trust-card .mini-shield::after { height: 6px; left: 5px; top: 4px; width: 2px; }
.trust-card p { display: flex; flex-direction: column; gap: 3px; margin: 0; }
.trust-card b { color: var(--gruen); font-size: 12px; }
.trust-card small { color: #5f7a6c; font-size: 11px; line-height: 1.45; }

.privacy-entry {
    align-items: center;
    background: var(--flaeche-warm);
    border: 1px solid var(--linie);
    border-radius: var(--rundung);
    color: var(--tinte);
    cursor: pointer;
    display: flex;
    gap: 11px;
    padding: 12px 14px;
    text-align: left;
    width: 100%;
}
.privacy-entry:hover { background: var(--weich); }
.privacy-entry b { flex: 1; font-size: 13px; }
.privacy-entry .chevron { color: var(--tinte-zart); font-size: 15px; }

/* Der Chatraum trägt eine sehr zurückhaltende Musterung aus Stickerformen -
   im Entwurf ist es genau dieses „Papier mit Kritzeleien". */
.thread-panel {
    position: relative;
    background-color: #faf3e7;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190' viewBox='0 0 190 190'%3E%3Cg fill='none' stroke='%23cdb590' stroke-width='1' stroke-linecap='round' stroke-linejoin='round' opacity='.30'%3E%3Cpath d='M26 30l2.6 5.3 5.8.8-4.2 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8-4.2-4.1 5.8-.8z'/%3E%3Cpath d='M124 24c2.7-2.8 7-2.8 9.6 0 2.7 2.8 2.7 7.3 0 10L128 44l-4-10c-2.7-2.7-2.7-7.2 0-10z'/%3E%3Crect x='132' y='108' width='22' height='17' rx='3'/%3E%3Ccircle cx='143' cy='117' r='4.6'/%3E%3Cpath d='M137 108l2-3h8l2 3'/%3E%3Crect x='24' y='112' width='34' height='24' rx='4'/%3E%3Cpath d='M32 122h18M32 129h13'/%3E%3Cpath d='M80 166c3-4.6 7.6-7 12-7s9 2.4 12 7'/%3E%3Ccircle cx='92' cy='152' r='5.4'/%3E%3Cpath d='M166 168l3 6 3-6z'/%3E%3Cpath d='M78 70h20v14H78z'/%3E%3Cpath d='M78 75h20'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
    border: 1px solid var(--linie);
    border-radius: var(--rundung-gross);
    box-shadow: var(--schatten-zart);
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.empty-thread {
    align-items: center;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    padding: 30px;
    text-align: center;
}
.empty-orbit {
    align-items: center;
    background: rgba(255, 255, 255, .75);
    border: 1px solid white;
    border-radius: 50%;
    box-shadow: 0 25px 65px rgba(53, 26, 33, .18);
    color: var(--akzent);
    display: flex;
    height: 112px;
    justify-content: center;
    position: relative;
    width: 112px;
}
.empty-orbit::before, .empty-orbit::after {
    border: 1px solid rgba(201, 144, 85, .35);
    border-radius: 50%;
    content: "";
    position: absolute;
}
.empty-orbit::before { height: 152px; width: 152px; }
.empty-orbit::after { height: 190px; width: 190px; }
.orbit-shield { height: 35px; width: 29px; }
.orbit-shield::after { height: 11px; left: 9px; top: 8px; width: 5px; }
.empty-thread h2 { font-size: 28px; letter-spacing: -.04em; margin: 50px 0 9px; }
.empty-thread > p { color: #898178; font-size: 12px; line-height: 1.6; max-width: 330px; }
.empty-proof {
    align-items: center;
    color: #817a71;
    display: flex;
    font-size: 9px;
    font-weight: 700;
    gap: 7px;
    margin-top: 16px;
    text-transform: uppercase;
}
.empty-proof span { background: var(--gruen); border-radius: 50%; height: 6px; width: 6px; }

.thread-header {
    align-items: center;
    background: var(--flaeche);
    border-bottom: 1px solid var(--linie);
    display: flex;
    gap: 13px;
    min-height: 72px;
    padding: 12px 20px;
}
.thread-avatar { height: 42px; width: 42px; }
.thread-header > div { flex: 1; min-width: 0; }
.thread-header h2 { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-header p {
    align-items: center;
    color: #928b83;
    display: flex;
    font-size: 9px;
    gap: 6px;
    margin: 4px 0 0;
}
.thread-header p span { background: var(--gruen); border-radius: 50%; height: 6px; width: 6px; }

.mobile-back { display: none; }

.message-stage { flex: 1; min-height: 0; overflow: auto; }
.stage-inner { margin: 0 auto; max-width: 860px; padding: 20px clamp(20px, 5vw, 64px) 30px; }

.day-divider {
    align-items: center;
    display: flex;
    justify-content: center;
    margin: 9px 0 18px;
}
.day-divider span {
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: 999px;
    box-shadow: var(--schatten-zart);
    color: var(--tinte-weich);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 6px 14px;
}

.history-page-trigger {
    display: flex;
    justify-content: center;
    margin: 0 0 14px;
}
.history-page-trigger button {
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: 999px;
    color: var(--tinte-weich);
    cursor: pointer;
    font-size: 11px;
    min-height: 36px;
    padding: 7px 14px;
}
.history-page-trigger button:hover { border-color: var(--akzent); color: var(--akzent); }
.history-page-trigger button:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.history-page-trigger button:disabled { cursor: progress; opacity: .72; }

.message-line { display: flex; margin: 6px 0; }

/* Gemeinsame Fixierungen sitzen zwischen Kopf und Verlauf. Jede Zeile ist
   zugleich der Sprung zur Originalnachricht; bei drei bleibt der Block klein. */
.pinned-messages {
    align-items: stretch;
    background: color-mix(in srgb, var(--flaeche, #fffaf2) 94%, transparent);
    border-bottom: 1px solid var(--linie, #dfcbb5);
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
    padding: 7px 14px;
    position: relative;
    z-index: 3;
}
.pinned-mark { color: var(--akzent, #70213a); font-size: 20px; padding-top: 5px; }
.pinned-messages > div { display: grid; flex: 1; gap: 3px; min-width: 0; }
.pinned-messages button {
    align-items: center;
    background: transparent;
    border: 0;
    border-left: 3px solid var(--akzent, #70213a);
    color: var(--tinte, #371d25);
    cursor: pointer;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    min-width: 0;
    padding: 3px 7px;
    text-align: left;
}
.pinned-messages button:hover { background: var(--weich, #f3e6d6); }
.pinned-messages button > span { display: flex; flex-direction: column; min-width: 0; }
.pinned-messages b { font-size: 11px; }
.pinned-messages small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pinned-messages time { color: var(--tinte-weich, #806a60); flex: 0 0 auto; font-size: 10px; }
.pin-duration-preview {
    background: var(--weich, #f3e6d6);
    border-radius: 10px;
    color: var(--tinte-weich, #806a60);
    margin: 14px 0;
    overflow: hidden;
    padding: 10px 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.action-list button:disabled { cursor: default; opacity: .5; }
.theme-dark .pinned-messages { background: var(--flaeche); border-color: var(--linie); }
.theme-dark .pinned-messages button { color: var(--tinte); }

@media (max-width: 640px) {
    .pinned-messages { padding-inline: 10px; }
    .pinned-messages time { display: none; }
}
.message-stack {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    max-width: min(74%, 570px);
    position: relative;
}
.outgoing .message-stack { align-items: flex-end; }

.message-bubble, .media-message {
    border-radius: 7px 17px 17px 17px;
    box-shadow: 0 4px 12px rgba(47, 40, 32, .06);
    min-width: 86px;
    position: relative;
}
/* Eingehend weiß mit warmem Rand, ausgehend zartblau - beides mit dunkler
   Schrift. Das kräftige Blau bleibt den Schaltflächen vorbehalten. */
.message-bubble {
    background: var(--flaeche);
    border: 1px solid var(--linie);
    padding: 11px 13px 8px;
}
.outgoing .message-bubble {
    background: var(--akzent-zart);
    border-color: #b8b99d;
    border-radius: var(--rundung) 7px var(--rundung) var(--rundung);
    color: var(--tinte);
}
.message-bubble.retracted { background: transparent; border: 1px dashed #d6c9b2; box-shadow: none; color: var(--tinte-zart); }
/* Eine verschnuerte Nachricht: gestrichelt wie die zurueckgezogene, aber in
   Gold statt in Grau - sie ist nicht weg, sie ist nur noch zu. */
.message-bubble.verschnuert { border: 1px dashed var(--gold, #c9a227); box-shadow: none; }
.message-bubble.verschnuert .verschnuert-titel { margin: 0; font-weight: 600; }
.message-bubble.verschnuert .verschnuert-hinweis { margin: .2rem 0 0; font-size: .82em; opacity: .75; }
.message-bubble p { font-size: 13px; line-height: 1.5; margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
/* "Mehr anzeigen" steht unter dem abgebrochenen Text und ist die Fortsetzung
   der Nachricht - kein Werkzeug an ihr. Deshalb schlicht als Wort, in der
   Akzentfarbe der Links, ohne Rahmen und ohne Fläche. */
.message-more {
    background: transparent;
    border: 0;
    color: var(--akzent);
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    margin-top: 3px;
    padding: 2px 0;
}
.message-more:hover { text-decoration: underline; }
.message-more:focus-visible {
    border-radius: 4px;
    outline: 2px solid var(--akzent);
    outline-offset: 2px;
}
.chat-link {
    color: var(--akzent);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
.chat-link:hover { text-decoration-thickness: 2px; }
.chat-link:focus-visible {
    border-radius: 3px;
    outline: 2px solid var(--akzent);
    outline-offset: 2px;
}
.bubble-meta, .media-meta {
    align-items: center;
    display: flex;
    gap: 5px;
    justify-content: flex-end;
    margin-top: 4px;
}
.bubble-meta time, .media-meta time, .edit-history-trigger, .edit-history-label {
    color: #a59e95;
    font-size: 7.5px;
    font-style: normal;
}
.outgoing .bubble-meta time, .outgoing .edit-history-trigger, .outgoing .edit-history-label {
    color: var(--tinte-zart);
}
.edit-history-trigger {
    background: transparent;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
    margin: -6px -3px;
    min-height: 28px;
    padding: 6px 3px;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
}
.edit-history-trigger:hover { background: rgba(112, 33, 58, .1); color: var(--akzent); }
.edit-history-trigger:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
.delivery-state {
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--akzent);
    cursor: pointer;
    font: inherit;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: -2px;
    line-height: 1;
    margin: -6px -7px -6px -4px;
    min-height: 32px;
    min-width: 36px;
    padding: 6px 7px 6px 4px;
    position: relative;
    z-index: 2;
}
.delivery-state:hover { background: rgba(112, 33, 58, .1); }
.delivery-state:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
.delivery-state.state-4,
.conversation-delivery-state.state-4 { color: #087ac1; }

.reply-preview {
    align-items: center;
    background: rgba(255, 255, 255, .6);
    border-left: 3px solid var(--akzent);
    border-radius: 5px;
    color: #8e867d;
    display: flex;
    font-size: 11px;
    gap: 6px;
    margin-bottom: 3px;
    max-width: 100%;
    overflow: hidden;
    padding: 6px 8px;
}
/* min-width: 0 ist hier keine Feinheit, sondern die ganze Zeile: Ohne sie
   waechst ein flex-Kind nie unter seinen Inhalt, der lange Zitattext hielte
   die Zeile auf und schoebe die Miniatur aus der Blase. */
.reply-preview-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Die Miniatur sagt, worauf geantwortet wurde - mehr nicht. Deshalb der
   Ausschnitt aus der Mitte (cover) statt des ganzen Bildes: Bei einem hohen
   Foto bliebe sonst ein Streifen uebrig, auf dem nichts zu erkennen ist. */
.reply-preview-thumb {
    background: rgba(0, 0, 0, .06);
    border-radius: 4px;
    flex: none;
    height: 36px;
    object-fit: cover;
    width: 36px;
}
/* Ein Sticker ist freigestellt und hat keinen Rand zu verlieren: Er wird
   ganz gezeigt, auf durchsichtigem Grund. */
.reply-preview-thumb.is-sticker {
    background: none;
    object-fit: contain;
}
.reaction-row { display: flex; gap: 3px; margin: -4px 8px 0; position: relative; z-index: 1; }
.reaction-row span {
    background: white;
    border: 1px solid var(--linie);
    border-radius: 999px;
    box-shadow: 0 3px 8px rgba(40, 34, 27, .08);
    font-size: 12px;
    padding: 2px 5px;
}

.media-message {
    background: white;
    max-width: 350px;
    overflow: hidden;
    padding: 6px;
    width: min(52vw, 350px);
}
.outgoing .media-message { border-radius: 17px 7px 17px 17px; }
.media-message img {
    border-radius: 12px;
    display: block;
    max-height: 420px;
    object-fit: contain;
    width: 100%;
}
.sticker-message { background: transparent; box-shadow: none; width: min(38vw, 240px); }
.sticker-message img { max-height: 270px; }
.media-placeholder {
    align-items: center;
    background:
        linear-gradient(145deg, rgba(201, 144, 85, .12), rgba(101, 39, 61, .07)),
        #f7f5f2;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 180px;
    padding: 22px;
}
.sticker-message .media-placeholder { min-height: 200px; }
.image-placeholder, .sticker-placeholder {
    color: var(--tinte-zart);
    font-size: 42px;
    margin-bottom: 14px;
}
.media-placeholder button {
    background: white;
    border: 1px solid var(--linie);
    border-radius: 10px;
    color: var(--akzent-tief);
    cursor: pointer;
    font-size: 10px;
    font-weight: 750;
    padding: 9px 12px;
}
.media-placeholder small { color: var(--tinte-weich); font-size: 9px; text-align: center; }
.media-caption { font-size: 11px; line-height: 1.45; margin: 8px 7px 2px; }
.media-meta { padding: 0 5px 2px; }
.media-error { color: var(--rose); display: block; font-size: 8px; padding: 6px; }
.media-gallery {
    background: white;
    border-radius: 7px 17px 17px 17px;
    box-shadow: 0 4px 12px rgba(47, 40, 32, .06);
    overflow: hidden;
    padding: 5px;
    width: min(62vw, 390px);
}
.outgoing .media-gallery { border-radius: 17px 7px 17px 17px; }
.media-gallery-grid {
    display: grid;
    gap: 3px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.media-gallery-item {
    aspect-ratio: 1;
    background: var(--weich);
    min-width: 0;
    overflow: hidden;
    position: relative;
}
.media-gallery-item:nth-child(1) { border-radius: 12px 3px 3px 3px; }
.media-gallery-item:nth-child(2) { border-radius: 3px 12px 3px 3px; }
.media-gallery-item:nth-last-child(1):nth-child(odd) { border-radius: 3px 3px 12px 12px; grid-column: 1 / -1; aspect-ratio: 2 / 1; }
.media-gallery-item:nth-last-child(1):nth-child(even) { border-radius: 3px 3px 12px 3px; }
.media-gallery-item:nth-last-child(2):nth-child(odd) { border-radius: 3px 3px 3px 12px; }
.media-gallery-item:first-child:nth-last-child(2) { border-radius: 12px 3px 3px 12px; }
.media-gallery-item:nth-child(2):last-child { border-radius: 3px 12px 12px 3px; }
.gallery-open {
    background: transparent;
    border: 0;
    cursor: zoom-in;
    height: 100%;
    padding: 0;
    width: 100%;
}
.gallery-open img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}
.gallery-placeholder {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    padding: 10px;
    text-align: center;
}
.gallery-placeholder > span { color: var(--tinte-zart); font-size: 28px; }
.gallery-placeholder small { color: var(--tinte-weich); font-size: 8px; }
.gallery-placeholder button {
    background: white;
    border: 1px solid var(--linie);
    border-radius: 8px;
    color: var(--akzent);
    cursor: pointer;
    font-size: 8px;
    margin-top: 6px;
    padding: 6px 8px;
}
.gallery-actions {
    background: rgba(22, 19, 15, .64);
    border: 0;
    border-radius: 999px;
    color: white;
    cursor: pointer;
    font-size: 11px;
    line-height: 1;
    opacity: 0;
    padding: 6px 7px;
    position: absolute;
    right: 6px;
    top: 6px;
    transition: opacity .15s ease;
}
.media-gallery-item:hover .gallery-actions,
.gallery-actions:focus-visible { opacity: 1; }
@media (hover: none) {
    .gallery-actions { opacity: 1; }
}
.gallery-meta { margin-top: 3px; padding: 0 5px 1px; }

.readonly-composer {
    align-items: center;
    background: rgba(255, 255, 255, .9);
    border-top: 1px solid var(--linie);
    display: flex;
    gap: 12px;
    min-height: 68px;
    padding: 10px 22px;
}
.readonly-icon {
    border: 2px solid var(--tinte-zart);
    border-radius: 4px;
    height: 14px;
    position: relative;
    width: 14px;
}
.readonly-icon::after {
    background: var(--tinte-zart);
    content: "";
    height: 2px;
    left: -3px;
    position: absolute;
    top: 4px;
    transform: rotate(-45deg);
    width: 18px;
}
.readonly-composer p { display: flex; flex: 1; flex-direction: column; margin: 0; }
.readonly-composer b { color: #686057; font-size: 10px; }
.readonly-composer small { color: var(--tinte-weich); font-size: 8px; margin-top: 2px; }
.readonly-composer button {
    background: #f6f3ee;
    border: 0;
    border-radius: 10px;
    color: var(--akzent-tief);
    cursor: pointer;
    font-size: 9px;
    font-weight: 750;
    padding: 9px 12px;
}

.message-composer {
    align-items: flex-end;
    background: var(--flaeche);
    border-top: 1px solid var(--linie);
    display: flex;
    gap: 12px;
    min-height: 72px;
    padding: 12px clamp(14px, 3vw, 24px) 14px;
}

.message-composer textarea {
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--tinte);
    flex: 1;
    line-height: 1.45;
    max-height: 130px;
    min-height: 48px;
    outline: none;
    padding: 13px 16px;
    resize: none;
}

/* Das Textfeld liegt jetzt in der Pille; ein eigener Fokusrahmen wuerde
   doppelt zeichnen. Den Fokus zeigt .composer-row an. */
.message-composer textarea:focus { background: transparent; box-shadow: none; }

.message-composer textarea { font-size: 13px; }
.message-composer textarea::placeholder { color: var(--tinte-zart); }

.message-composer textarea:disabled { cursor: not-allowed; opacity: .6; }

/* Der Knopf sitzt jetzt am rechten Ende der Eingabezeile statt darunter: rund,
   in derselben Größe wie die Werkzeuge, und die einzige kräftige Fläche im
   Chatraum. Eine eigene Zeile für einen einzigen Knopf war Leerraum, seit die
   Stickerleiste daneben weggefallen ist. */
.send-button {
    align-items: center;
    background: var(--akzent);
    border: 0;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(93, 27, 46, .24);
    color: white;
    cursor: pointer;
    display: flex;
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 700;
    gap: 8px;
    height: 44px;
    justify-content: center;
    margin-left: 2px;
    padding: 0;
    width: 44px;
}
.send-button:hover:not(:disabled) { background: var(--akzent-tief); }
.send-button:disabled { box-shadow: none; cursor: not-allowed; opacity: .38; }
.send-button .send-pfeil { font-size: 20px; line-height: 1; }

.migration-hint {
    align-items: center;
    background: #f9f6f1;
    border-top: 1px solid #f1e2be;
    color: #725b26;
    display: flex;
    gap: 12px;
    padding: 9px 22px;
}

.migration-hint p {
    display: flex;
    flex-direction: column;
    font-size: 9px;
    margin: 0;
}

.migration-hint small { color: #978251; margin-top: 2px; }

.modal-scrim {
    align-items: center;
    background: rgba(22, 19, 15, .76);
    backdrop-filter: blur(12px);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 22px;
    position: fixed;
    z-index: 20;
}
.scanner-card {
    background: var(--flaeche);
    border-radius: 28px;
    box-shadow: var(--schatten);
    max-width: 520px;
    padding: 25px;
    width: 100%;
}
.scanner-card header { align-items: flex-start; display: flex; justify-content: space-between; }
.scanner-card h2 { font-size: 22px; }
.scanner-card header button {
    background: #f3f1ed;
    border: 0;
    border-radius: 50%;
    color: #726a61;
    cursor: pointer;
    font-size: 22px;
    height: 36px;
    width: 36px;
}
/* Der Browser zeigt den Kopplungscode; gescannt wird er vom Handy. */
.pairing-code-frame {
    align-items: center;
    background: #ffffff;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    margin-top: 20px;
    padding: 18px;
}
.pairing-code-frame svg {
    display: block;
    height: auto;
    /* Fest quadratisch und gross genug, damit eine Handykamera ihn aus
       normalem Abstand sicher erfasst. */
    image-rendering: pixelated;
    max-width: 300px;
    width: 100%;
}
.pairing-verification {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 16px 0 0;
}
.pairing-verification span {
    color: var(--tinte-weich);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.pairing-verification b {
    background: var(--flaeche-warm);
    border: 1px solid var(--linie);
    border-radius: 12px;
    box-sizing: border-box;
    color: var(--tinte);
    display: inline-block;
    font-family: "Cascadia Mono", Consolas, monospace;
    font-size: clamp(26px, 7vw, 36px);
    font-variant-numeric: tabular-nums;
    letter-spacing: .12em;
    line-height: 1.1;
    max-width: 100%;
    padding: 10px 16px;
    text-align: center;
}
.theme-dark .pairing-verification b {
    background: var(--text-auf-leder);
    border-color: var(--gold);
    color: var(--tinte-tief);
}
.scanner-card > p { color: var(--tinte-weich); font-size: 11px; line-height: 1.55; margin: 16px 3px 8px; }
.pairing-instructions {
    background: var(--flaeche-warm);
    border: 1px solid var(--linie);
    border-radius: 14px;
    color: var(--tinte-weich);
    font-size: 11px;
    line-height: 1.55;
    margin: 16px 3px 8px;
    padding: 11px 13px;
}
.pairing-instructions p { margin: 0; }
.pairing-instructions p + p { margin-top: 8px; }
.pairing-instructions b { color: var(--tinte); }
.scanner-security {
    align-items: center;
    color: #8d7e6d;
    display: flex;
    font-size: 9px;
    gap: 7px;
    margin: 12px 3px 0;
}
.scanner-security .mini-shield { height: 15px; width: 13px; }
.scanner-security .mini-shield::after { height: 4px; left: 3px; top: 3px; }

.visually-hidden {
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    clip: rect(0 0 0 0);
}

#blazor-error-ui {
    background: var(--flaeche);
    border-top: 1px solid #e6ccc8;
    bottom: 0;
    color: #7e3a30;
    font-size: 12px;
    left: 0;
    padding: 12px 18px;
    position: fixed;
    right: 0;
    z-index: 100;
}
#blazor-error-ui button { float: right; }

@media (max-width: 900px) {
    .app-shell { grid-template-columns: 72px 320px minmax(0, 1fr); }
    .message-stack { max-width: 84%; }
}

@media (max-width: 720px) {
    body { overflow: hidden; }
    /* Auf dem Handy fuellt das Blatt die Breite; der Beschlag wird kleiner,
       damit er ueber der Oberkante nicht den halben Bildschirm einnimmt. */
    .lock-shell { justify-content: flex-start; padding: 18px 14px 30px; }
    .lock-card { border-radius: 20px; margin-top: auto; padding: 30px 20px 24px; }
    .lock-card h1 { font-size: 34px; }
    .lock-latch { height: 42px; top: -24px; width: 78px; }
    .security-facts { gap: 10px; grid-template-columns: minmax(0, 1fr); }
    .lock-rule { margin: 22px 0 16px; }
    .lock-footnote { margin-bottom: auto; }

    .app-shell { display: block; position: relative; }
    .app-rail { display: none; }
    .conversation-panel, .thread-panel {
        height: 100dvh;
        inset: 0;
        position: absolute;
        width: 100%;
    }
    .conversation-panel { transform: translateX(0); transition: transform .22s ease; z-index: 1; }
    .thread-panel { transform: translateX(100%); transition: transform .22s ease; z-index: 2; }
    .app-shell.thread-open .conversation-panel { transform: translateX(-24%); }
    .app-shell.thread-open .thread-panel { transform: translateX(0); }
    .mobile-back {
        background: transparent;
        border: 0;
        color: var(--akzent);
        display: block;
        font-size: 22px;
        padding: 8px;
    }
    .thread-header { padding-left: 8px; }
    .stage-inner { padding: 18px 13px 26px; }
    .message-stack { max-width: 88%; }
    .media-message { width: min(75vw, 350px); }
    .sticker-message { width: min(58vw, 240px); }
    .message-composer { padding: 9px 12px; }
    .migration-hint { padding-inline: 14px; }
}

/* Videoeditor und dateigroessenbasierter Empfang. */
.composer-tool.video-tool { font-size: 17px; }
.video-message > video {
    background: #121212;
    border-radius: 14px;
    display: block;
    max-height: min(54vh, 520px);
    width: 100%;
}
.video-trim-controls { display: grid; gap: 12px; margin-top: 14px; }
.video-trim-controls label { display: grid; gap: 6px; }
.video-trim-controls label > span { display: flex; justify-content: space-between; }
.video-trim-controls input[type="range"] { accent-color: #b34a67; width: 100%; }
.video-quality-control small { display: flex; justify-content: space-between; }
.video-resolution {
    display: flex;
    gap: 8px;
    margin: 8px 2px 0;
}
.video-resolution span {
    opacity: .72;
}

/* Die Rueckfrage nach einem zu gross geratenen Export. Sie steht bewusst als
   eigener Kasten unter der Schaetzung und nicht als Fehlerzeile: Es ist keine
   Sackgasse, sondern ein Angebot mit einem Knopf daran. */
.video-oversize {
    background: rgba(175, 110, 43, .12);
    border: 1px solid rgba(175, 110, 43, .38);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
    padding: 12px;
}
.video-oversize p {
    margin: 0;
}
.video-oversize small {
    opacity: .74;
}
.video-retry {
    align-self: flex-start;
    background: #2e7d54;
    border: 0;
    border-radius: 11px;
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    padding: 9px 16px;
}
.video-retry:disabled {
    cursor: default;
    opacity: .55;
}
.video-placeholder {
    align-items: center;
    background-color: #262126;
    background-position: center;
    background-size: cover;
    border-radius: 14px;
    color: white;
    display: flex;
    gap: 13px;
    min-height: 190px;
    padding: 18px;
    position: relative;
    text-shadow: 0 1px 5px #000;
}
.video-placeholder::before {
    background: linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.12));
    border-radius: inherit;
    content: "";
    inset: 0;
    position: absolute;
}
.video-placeholder > * { position: relative; }
.video-placeholder small { display: block; margin-top: 4px; }
.video-play {
    align-items: center;
    background: rgba(255,255,255,.9);
    border-radius: 50%;
    color: #301c27;
    display: flex;
    height: 48px;
    justify-content: center;
    padding-left: 3px;
    text-shadow: none;
    width: 48px;
}
.video-download { margin-top: 8px; width: 100%; }
.video-loading { display: block; padding: 9px 2px 2px; }

/* Eine Datei: kein Bild, deshalb Symbol, Name und Größe in einer Zeile. */
.doc-message { padding: 4px 2px; width: min(62vw, 390px); }
.doc-row { align-items: center; display: flex; gap: 11px; padding: 6px 5px 2px; }
.doc-symbol { font-size: 26px; line-height: 1; }
.doc-body { min-width: 0; }
/* Umbrechen statt kürzen: In einem gekürzten Namen verstecken sich sonst die
   zwölf Leerzeichen vor der zweiten Endung. */
.doc-name {
    display: block;
    font-size: 12px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.doc-size { color: var(--tinte-weich); display: block; font-size: 10px; }
.doc-download {
    display: block;
    margin-top: 9px;
    text-align: center;
    width: 100%;
}
a.doc-download { text-decoration: none; }
.doc-warning, .doc-blocked {
    font-size: 10px;
    line-height: 1.45;
    margin: 8px 5px 0;
}
.doc-warning { color: #8a5a12; }
.doc-blocked { color: var(--rose); }
.doc-message.is-blocked { opacity: .82; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

@media (forced-colors: active) {
    .privacy-chip span, .pulse-dot, .empty-proof span, .thread-header p span {
        background: CanvasText;
    }
}

/* ------------------------------------------------------- Product polish */

:where(button, input, textarea, label[for]):focus-visible {
    outline: 3px solid rgba(201, 144, 85, .62);
    outline-offset: 3px;
}

button:disabled,
label.disabled {
    cursor: not-allowed;
    opacity: .48;
}

.header-actions {
    align-items: center;
    display: flex;
    gap: 8px;
}

.mobile-security { display: none; }
.theme-button { font-size: 18px; }

.unread-badge {
    align-items: center;
    background: var(--akzent);
    border-radius: 999px;
    color: white;
    display: flex;
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 800;
    height: 22px;
    justify-content: center;
    min-width: 22px;
    padding: 0 6px;
}

.message-line {
    align-items: center;
    gap: 7px;
    position: relative;
    transition: background .2s ease, border-radius .2s ease;
}

.message-line.outgoing {
    /* row-reverse legt die Aktionsknoepfe links neben die eigene Blase.
       Dadurch liegt der visuelle rechte Rand bei flex-start, nicht flex-end. */
    flex-direction: row-reverse;
    justify-content: flex-start;
}

.message-actions-trigger {
    background: transparent;
    border: 0;
    border-radius: 10px;
    color: #90887e;
    cursor: pointer;
    font-size: 15px;
    min-height: 34px;
    opacity: 0;
    padding: 5px 8px;
    transition: opacity .16s ease, background .16s ease;
}

.message-line:hover .message-actions-trigger,
.message-actions-trigger:focus-visible {
    opacity: 1;
}

.message-actions-trigger:hover { background: var(--weich); }

.message-highlight {
    background: rgba(201, 144, 85, .22);
    border-radius: 18px;
}

.media-open {
    background: transparent;
    border: 0;
    cursor: zoom-in;
    display: block;
    padding: 0;
    width: 100%;
}

.media-viewer {
    align-items: center;
    background: rgba(14, 12, 10, .94);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 58px 26px 26px;
    position: fixed;
    touch-action: pan-y pinch-zoom;
    z-index: 70;
}
.viewer-image-button {
    background: transparent;
    border: 0;
    cursor: zoom-in;
    display: block;
    line-height: 0;
    max-width: min(1100px, 100%);
    padding: 0;
}
.viewer-image-button img {
    display: block;
    max-height: calc(100dvh - 84px);
    max-width: 100%;
    object-fit: contain;
}
.media-viewer.is-zoomed {
    align-items: flex-start;
    justify-content: flex-start;
    overflow: auto;
    overscroll-behavior: contain;
    touch-action: auto;
}
.media-viewer.is-zoomed .viewer-image-button {
    cursor: zoom-out;
    flex: 0 0 auto;
    max-width: none;
}
.media-viewer.is-zoomed .viewer-image-button img {
    max-height: none;
    max-width: none;
}
.viewer-close {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
    color: white;
    cursor: pointer;
    font-size: 25px;
    height: 42px;
    position: fixed;
    right: 22px;
    top: 18px;
    width: 42px;
}
.viewer-position {
    background: rgba(0, 0, 0, .52);
    border-radius: 999px;
    bottom: 18px;
    color: white;
    font-size: 12px;
    left: 50%;
    padding: 5px 10px;
    pointer-events: none;
    position: fixed;
    transform: translateX(-50%);
}

button.reply-preview {
    border: 0;
    cursor: pointer;
    display: flex;
    text-align: left;
}

/* Reaktionen sind im Entwurf eigene kleine Pillen unter der Blase, mit
   Zaehler und einem Pluszeichen zum Ergaenzen. */
.reaction-row { gap: 5px; margin: -6px 8px 0; }
.reaction-row button {
    align-items: center;
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: 999px;
    box-shadow: var(--schatten-zart);
    cursor: pointer;
    display: inline-flex;
    font-size: 14px;
    gap: 4px;
    line-height: 1;
    padding: 5px 9px;
    transition: border-color .15s, transform .1s;
}
.reaction-row button:hover { border-color: rgba(201, 144, 85, .6); transform: translateY(-1px); }
.reaction-row button.own {
    background: var(--akzent-zart);
    border-color: var(--akzent);
}
.reaction-row button b {
    color: var(--tinte-weich);
    font-size: 11px;
    font-weight: 700;
}
.reaction-row button.own b { color: var(--akzent-tief); }
.reaction-row .reaction-add {
    color: var(--akzent);
    font-size: 15px;
    font-weight: 700;
    padding: 5px 10px;
}

/* Symbolknoepfe in der Kopfzeile des Gespraechs */
.thread-actions { display: flex; flex: 0 0 auto; gap: 8px; }
.thread-actions .icon-button {
    border-radius: 50%;
    font-size: 15px;
    height: 40px;
    width: 40px;
}
.thread-actions .icon-button:disabled { cursor: not-allowed; opacity: .45; }

.reaction-row button.own {
    border-color: var(--akzent);
    box-shadow: 0 0 0 2px rgba(101, 39, 61, .12);
}

.message-composer {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
    min-height: 78px;
}

/* Werkzeuge und Textfeld sitzen gemeinsam in einer Pille, die Sendetaste
   daneben - genau die Aufteilung aus dem Entwurf. */
.composer-row {
    align-items: center;
    background: var(--flaeche-warm);
    border: 1px solid var(--linie);
    border-radius: 999px;
    display: flex;
    gap: 4px;
    padding: 5px 6px 5px 8px;
}
.composer-row:focus-within {
    border-color: rgba(101, 39, 61, .46);
    box-shadow: 0 0 0 3px rgba(101, 39, 61, .12);
}

/* Die Werkzeuge sind Berührungsziele und waren mit 38 Pixeln kleiner als das,
   was ein Finger sicher trifft. 44 Pixel sind die übliche Untergrenze; das
   Symbol darin folgt der Schriftgröße. */
.composer-tool {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 50%;
    color: var(--tinte-weich);
    cursor: pointer;
    display: flex;
    flex: 0 0 auto;
    font-size: 22px;
    height: 44px;
    justify-content: center;
    width: 44px;
}

button.composer-tool { font: inherit; font-size: 22px; }
.composer-tool:hover { background: var(--weich); color: var(--akzent); }
.composer-tool.disabled { cursor: not-allowed; opacity: .45; }
.sticker-tool { color: var(--akzent); }

/* Ein nativer, auch per Tastatur erreichbarer Dateiwähler für alle Anhänge. */
.attach-tool { position: relative; overflow: hidden; }
.attach-tool .attachment-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.attach-tool .attachment-input:disabled { cursor: not-allowed; }
.attach-tool:focus-within { outline: 2px solid var(--akzent); outline-offset: 2px; }

.attachment-drop-hint { display: none; }
.thread-panel.is-file-dragover > .attachment-drop-hint {
    position: absolute;
    inset: 12px;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
    padding: 24px;
    border: 2px dashed var(--akzent);
    border-radius: 20px;
    background: color-mix(in srgb, var(--flaeche) 95%, transparent);
    color: var(--tinte);
    text-align: center;
    pointer-events: none;
}
.attachment-drop-hint > .tool-glyph { font-size: 36px; color: var(--akzent); }
.attachment-drop-hint strong { font-size: 20px; }
.attachment-drop-hint > span { color: var(--tinte-weich); }

/* Gezeichnete Symbole statt Schriftzeichen: gleiche Strichstärke, gleiche
   Rundungen, Größe an der Schriftgröße der Umgebung. */
.tool-glyph {
    block-size: 1em;
    fill: none;
    inline-size: 1em;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

/* Unter dem Eingabefeld standen eine zweite Stickerauswahl und der
   Senden-Knopf. Beides ist weg beziehungsweise in die Zeile gewandert; die
   Zeile darunter gibt es nicht mehr. */

.composer-context {
    align-items: center;
    background: linear-gradient(90deg, rgba(201, 144, 85, .16), transparent);
    border-left: 3px solid var(--akzent);
    border-radius: 8px;
    display: flex;
    gap: 10px;
    margin: 0 3px;
    padding: 8px 10px;
}

.composer-context > span { color: var(--akzent); font-size: 18px; }
.composer-context p {
    display: flex;
    flex: 1;
    flex-direction: column;
    margin: 0;
    min-width: 0;
}
.composer-context b { font-size: 11px; }
.composer-context small {
    color: var(--tinte-weich);
    font-size: 10px;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Dieselbe Miniatur wie im Zitat, nur etwas groesser: Hier ist sie die
   letzte Gelegenheit zu bemerken, dass die Antwort am falschen Bild haengt. */
.composer-context-thumb {
    background: rgba(0, 0, 0, .06);
    border-radius: 6px;
    flex: none;
    height: 38px;
    object-fit: cover;
    width: 38px;
}
.composer-context-thumb.is-sticker {
    background: none;
    object-fit: contain;
}
.composer-context button {
    background: transparent;
    border: 0;
    color: var(--tinte-weich);
    cursor: pointer;
    font-size: 20px;
}

.emoji-palette {
    background: white;
    border: 1px solid var(--linie);
    border-radius: 16px;
    box-shadow: 0 14px 38px rgba(38, 32, 25, .13);
    display: grid;
    gap: 4px;
    grid-template-columns: repeat(12, 1fr);
    padding: 8px;
}

.emoji-palette button,
.reaction-picker button {
    background: transparent;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    font-size: 22px;
    min-height: 39px;
}

.emoji-palette button:hover,
.reaction-picker button:hover { background: var(--weich); }

.toast-notice {
    align-items: center;
    background: var(--flaeche-warm);
    border: 1px solid var(--linie);
    border-radius: 15px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 88px);
    box-shadow: 0 20px 60px rgba(20, 17, 13, .25);
    color: var(--tinte);
    display: flex;
    gap: 10px;
    left: 50%;
    max-width: min(520px, calc(100vw - 28px));
    padding: 11px 13px;
    position: fixed;
    transform: translateX(-50%);
    width: max-content;
    z-index: 80;
}

.toast-notice > span {
    align-items: center;
    background: var(--rose);
    border-radius: 50%;
    display: flex;
    font-size: 11px;
    font-weight: 800;
    height: 22px;
    justify-content: center;
    color: var(--text-auf-leder);
    width: 22px;
}
.toast-notice p { font-size: 12px; margin: 0; }
.toast-notice button {
    background: transparent;
    border: 0;
    color: var(--tinte);
    cursor: pointer;
    font-size: 20px;
}

.action-scrim { z-index: 50; }

.action-sheet,
.confirm-card,
.delivery-status-card,
.edit-history-card {
    background: var(--flaeche);
    border: 1px solid rgba(255, 255, 255, .86);
    border-radius: 26px;
    box-shadow: var(--schatten);
    max-width: 470px;
    padding: 22px;
    width: 100%;
}

.action-sheet,
.edit-history-card {
    max-height: min(760px, calc(100dvh - 28px));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: rgba(112, 33, 58, .62) transparent;
    scrollbar-width: thin;
}

.action-sheet::-webkit-scrollbar { width: 9px; }
.edit-history-card::-webkit-scrollbar { width: 9px; }
.action-sheet::-webkit-scrollbar-track { background: transparent; margin-block: 14px; }
.edit-history-card::-webkit-scrollbar-track { background: transparent; margin-block: 14px; }
.action-sheet::-webkit-scrollbar-thumb {
    background: rgba(112, 33, 58, .62);
    background-clip: padding-box;
    border: 3px solid transparent;
    border-radius: 999px;
}
.edit-history-card::-webkit-scrollbar-thumb {
    background: rgba(112, 33, 58, .62);
    background-clip: padding-box;
    border: 3px solid transparent;
    border-radius: 999px;
}
.action-sheet::-webkit-scrollbar-thumb:hover { background-color: rgba(112, 33, 58, .82); }
.edit-history-card::-webkit-scrollbar-thumb:hover { background-color: rgba(112, 33, 58, .82); }
.action-sheet::-webkit-scrollbar-button { display: none; height: 0; }
.edit-history-card::-webkit-scrollbar-button { display: none; height: 0; }

.action-sheet header,
.security-drawer header,
.delivery-status-card header,
.edit-history-card header {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
}

.action-sheet h2,
.security-drawer h2,
.confirm-card h2,
.delivery-status-card h2,
.edit-history-card h2 {
    letter-spacing: -.035em;
    margin: 4px 0 0;
}

.action-sheet header > button,
.security-drawer header > button,
.delivery-status-card header > button,
.edit-history-card header > button {
    background: var(--weich);
    border: 0;
    border-radius: 50%;
    color: var(--tinte-weich);
    cursor: pointer;
    font-size: 22px;
    height: 36px;
    width: 36px;
}

.delivery-status-card { max-width: 390px; }
.delivery-status-summary {
    align-items: center;
    background: var(--weich);
    border: 1px solid var(--linie);
    border-radius: 18px;
    display: flex;
    gap: 15px;
    margin-top: 20px;
    padding: 17px;
}
.delivery-status-summary > span {
    align-items: center;
    background: var(--akzent-zart);
    border-radius: 50%;
    color: var(--akzent);
    display: flex;
    flex: 0 0 auto;
    font-size: 19px;
    font-weight: 800;
    height: 48px;
    justify-content: center;
    letter-spacing: -3px;
    padding-right: 3px;
    width: 48px;
}
.delivery-status-summary.state-3 > span { color: #a64135; letter-spacing: 0; }
.delivery-status-summary p { display: flex; flex-direction: column; gap: 3px; margin: 0; }
.delivery-status-summary b { font-size: 15px; }
.delivery-status-summary small { color: var(--tinte-weich); font-size: 12px; line-height: 1.45; }
.delivery-device-list {
    border-top: 1px solid var(--linie);
    display: grid;
    gap: 10px;
    margin-top: 16px;
    padding-top: 14px;
}
.delivery-device-list p {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
}
.delivery-device-list b { font-size: 13px; }
.delivery-device-list small { color: var(--tinte-weich); font-size: 11px; }
.delivery-timeline {
    border-top: 1px solid var(--linie);
    display: grid;
    gap: 2px;
    margin-top: 16px;
    padding-top: 12px;
}
.delivery-station {
    align-items: center;
    color: var(--tinte-zart);
    display: grid;
    gap: 8px;
    grid-template-columns: 16px minmax(0, 1fr) auto;
    min-height: 34px;
}
.delivery-station > span { font-size: 12px; }
.delivery-station > b { font-size: 13px; }
.delivery-station > time {
    color: var(--tinte-weich);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.delivery-station.is-reached { color: var(--tinte); }
.delivery-station.is-reached > span { color: var(--akzent); }

.edit-history-card { max-width: 560px; }
.edit-history-intro {
    color: var(--tinte-weich);
    font-size: 12px;
    margin: 7px 0 0;
}
.edit-history-legend {
    border-bottom: 1px solid var(--linie);
    margin-top: 16px;
    padding: 0 3px 14px;
}
.edit-history-legend > span {
    color: var(--tinte-weich);
    font-size: 11px;
    line-height: 1.45;
}
.edit-history-legend p {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 9px 0 0;
}
.edit-history-legend b { font-size: 11px; }
.edit-version-list {
    display: grid;
    gap: 9px;
    margin-top: 14px;
}
.edit-version-card {
    background: var(--flaeche-warm);
    border: 1px solid var(--linie);
    border-radius: 17px;
    padding: 13px 14px;
}
.edit-version-card.is-current {
    background: var(--akzent-zart);
    border-color: rgba(112, 33, 58, .24);
}
.edit-version-meta {
    align-items: flex-start;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}
.edit-version-meta p {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
}
.edit-version-meta b {
    color: var(--tinte-weich);
    font-size: 10px;
    letter-spacing: .035em;
    text-transform: uppercase;
}
.edit-version-meta time {
    color: var(--tinte-zart);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
}
.edit-version-meta > span {
    background: var(--akzent);
    border-radius: 999px;
    color: var(--text-auf-leder);
    flex: 0 0 auto;
    font-size: 9px;
    font-weight: 760;
    padding: 4px 8px;
    text-transform: uppercase;
}
.edit-version-text {
    color: var(--tinte);
    font-size: 14px;
    line-height: 1.62;
    margin: 9px 0 0;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}
.edit-version-text > span { border-radius: 4px; }
.edit-diff-removed {
    background: var(--rose-zart);
    color: var(--rose);
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
}
.edit-diff-added {
    background: var(--gruen-zart);
    color: var(--gruen);
    text-decoration: none;
}
.edit-version-text.is-fallback .edit-diff-removed,
.edit-version-text.is-fallback .edit-diff-added {
    display: block;
    margin-top: 5px;
    padding: 4px 7px;
}
.edit-version-text.is-fallback .edit-diff-removed::before { content: "− "; font-weight: 800; }
.edit-version-text.is-fallback .edit-diff-added::before { content: "+ "; font-weight: 800; }
.edit-version-note {
    color: var(--tinte-weich);
    display: block;
    font-size: 10px;
    margin-top: 8px;
}
.edit-history-close {
    background: var(--akzent);
    border: 0;
    border-radius: 13px;
    color: var(--text-auf-leder);
    cursor: pointer;
    font-size: 12px;
    font-weight: 740;
    margin-top: 16px;
    min-height: 42px;
    width: 100%;
}
.edit-history-close:hover { background: var(--akzent-hell); }
.edit-history-close:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

.reaction-picker {
    display: grid;
    gap: 4px;
    grid-template-columns: repeat(8, 1fr);
    margin: 18px 0 13px;
}

.action-list {
    border-bottom: 1px solid var(--linie);
    border-top: 1px solid var(--linie);
    display: flex;
    flex-direction: column;
    padding: 7px 0;
}

.action-list > button,
.security-controls > button {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 14px;
    color: inherit;
    cursor: pointer;
    display: flex;
    gap: 12px;
    padding: 11px;
    text-align: left;
    width: 100%;
}

.action-list > button:hover,
.security-controls > button:hover { background: var(--weich); }
.action-list > button > span,
.security-controls > button > span {
    align-items: center;
    background: var(--weich);
    border-radius: 11px;
    color: var(--akzent);
    display: flex;
    flex: 0 0 auto;
    font-size: 18px;
    height: 38px;
    justify-content: center;
    width: 38px;
}
.action-list p,
.security-controls p {
    display: flex;
    flex-direction: column;
    margin: 0;
}
.action-list b,
.security-controls b { font-size: 13px; }
.action-list small,
.security-controls small {
    color: var(--tinte-weich);
    font-size: 10px;
    margin-top: 3px;
}

.danger-secondary {
    background: transparent;
    border: 0;
    color: var(--rose);
    cursor: pointer;
    font-size: 12px;
    font-weight: 720;
    margin-top: 12px;
    padding: 10px;
    width: 100%;
}

.confirm-card { max-width: 410px; text-align: center; }
.confirm-icon {
    align-items: center;
    background: var(--flaeche);
    border-radius: 18px;
    color: var(--rose);
    display: inline-flex;
    font-size: 27px;
    height: 58px;
    justify-content: center;
    width: 58px;
}
.confirm-card h2 { margin-top: 17px; }
.confirm-card p {
    color: var(--tinte-weich);
    font-size: 12px;
    line-height: 1.6;
}
.confirm-card > div,
.modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 19px;
}
.confirm-card button,
.modal-actions > button:not(.primary-action) {
    background: var(--weich);
    border: 0;
    border-radius: 13px;
    cursor: pointer;
    font-weight: 700;
    min-height: 44px;
    padding: 0 16px;
}
.confirm-card .danger-action {
    background: var(--rose);
    color: white;
}
/* Kontolöschung: nicht umkehrbar, deshalb auch außerhalb der Bestätigungskarte
   deutlich als solche gekennzeichnet. */
.push-card { max-width: 460px; }
.push-point {
    font-size: 12px;
    line-height: 1.6;
    margin: 12px 0 0;
}
.push-point b { font-weight: 700; }
.danger-heading {
    color: var(--rose);
    font-size: 13px;
    margin: 22px 0 6px;
}
.server-card .danger-action {
    background: var(--rose);
    border: 0;
    border-radius: 13px;
    color: white;
    cursor: pointer;
    font-weight: 700;
    margin-top: 10px;
    min-height: 44px;
    padding: 0 16px;
}
.server-card .danger-action:disabled {
    cursor: not-allowed;
    opacity: .55;
}
.dialog-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 10px;
}
.dialog-actions > button:not(.danger-action) {
    background: var(--weich);
    border: 0;
    border-radius: 13px;
    color: inherit;
    cursor: pointer;
    min-height: 44px;
    padding: 0 16px;
}

.caption-field { display: flex; flex-direction: column; gap: 7px; margin-top: 16px; }
.caption-field > span {
    color: var(--tinte-weich);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.caption-field input {
    background: white;
    border: 1px solid var(--linie);
    border-radius: 13px;
    min-height: 47px;
    outline: none;
    padding: 0 13px;
}
.privacy-note,
.security-footnote {
    color: var(--tinte-weich);
    font-size: 10px;
    line-height: 1.6;
}
.primary-action.compact { min-height: 44px; padding: 0 16px; }

.security-drawer-backdrop {
    background: rgba(22, 19, 15, .48);
    inset: 0;
    position: fixed;
    z-index: 45;
}

.security-drawer {
    background: var(--flaeche);
    box-shadow: -24px 0 70px rgba(25, 21, 16, .22);
    display: flex;
    flex-direction: column;
    height: 100dvh;
    margin-left: auto;
    max-width: 430px;
    overflow: auto;
    padding: 27px;
    width: min(100%, 430px);
}

.security-hero {
    align-items: center;
    background: linear-gradient(135deg, rgba(101, 39, 61, .10), rgba(201, 144, 85, .12));
    border: 1px solid rgba(201, 144, 85, .42);
    border-radius: 20px;
    display: flex;
    gap: 15px;
    margin-top: 24px;
    padding: 17px;
}
.security-hero-icon {
    color: var(--gruen);
    flex: 0 0 auto;
    font-size: 42px;
}
.security-hero p { display: flex; flex-direction: column; margin: 0; }
.security-hero b { color: var(--gruen); font-size: 13px; }
.security-hero small { color: #847666; font-size: 10px; line-height: 1.5; margin-top: 4px; }
.security-details { margin: 21px 0 9px; }
.security-details > div {
    align-items: baseline;
    border-bottom: 1px solid var(--linie);
    display: flex;
    gap: 18px;
    justify-content: space-between;
    padding: 12px 2px;
}
.security-details dt { color: var(--tinte-weich); font-size: 10px; }
.security-details dd { font-size: 11px; font-weight: 700; margin: 0; text-align: right; }
.security-details .fingerprint {
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
    font-size: 9px;
    max-width: 245px;
    overflow-wrap: anywhere;
}
.security-controls {
    border: 1px solid var(--linie);
    border-radius: 18px;
    margin-top: 15px;
    padding: 5px;
}
.security-shortcuts > button > span .ph,
.security-controls > button > span .ph { font-size: 21px; }
.icon-button > .ph { font-size: 20px; }
.security-footnote { margin: auto 3px 0; padding-top: 22px; }

/* Mehr als dekorativ: ein vollständiges, kontrastreiches dunkles Farbschema. */
/* Der dunkle Modus setzt denselben Satz Marken neu, nicht nur eine Auswahl.
   Vorher waren hier fünf davon überschrieben - jedes Bauteil, das eine der
   übrigen benutzte, blieb hell und stand als leuchtender Fleck auf dunklem
   Grund. Wer eine neue Marke einführt, gibt ihr auch hier einen Wert. */
/* Im Dunkeln wandert das Pergament auf Leder: Die Inhaltsflaechen werden
   dunkles Pflaume, die Schrift creme, und Gold uebernimmt die Rolle, die im
   Hellen die dunkle Tinte hatte. Bordeaux bleibt der aktive Zustand - eine
   zweite Akzentfarbe fuer das dunkle Schema haette die Materialwelt
   zerschnitten. */
.theme-dark {
    --papier: #180c19;
    --flaeche: #251627;
    --flaeche-warm: #2c222c;
    --weich: #382030;
    --linie: #4a2635;
    --linie-zart: #382030;
    --pergament-schatten: #4a2635;

    --tinte: #fff1d8;
    --tinte-weich: #d8bfa4;
    --tinte-zart: #a98e78;

    --akzent: #763149;
    --akzent-tief: #65273d;
    --akzent-hell: #8a3b56;
    --akzent-zart: #3a1f2b;

    --gruen: #8ca35e;
    --gruen-zart: #262b1c;
    --rose: #c2566d;
    --rose-zart: #3a1f27;

    --kachel-rose: #3a2530;
    --kachel-minze: #262b1c;
    --kachel-flieder: #322337;
    --kachel-salbei: #2b2d1e;
    --kachel-sand: #3a2c1c;

    --schatten-zart: 0 1px 2px rgba(0, 0, 0, .40);
    --schatten: 0 6px 16px rgba(0, 0, 0, .50);
    --schatten-tief: 0 24px 60px rgba(0, 0, 0, .60);

    color: var(--tinte);
    color-scheme: dark;
}

/* Die Musterung des Chatraums braucht im Dunkeln eine eigene Strichfarbe;
   der helle Ton verschwindet dort nicht, er leuchtet. */
.theme-dark .thread-panel {
    background-color: var(--papier);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190' viewBox='0 0 190 190'%3E%3Cg fill='none' stroke='%23574a38' stroke-width='1' stroke-linecap='round' stroke-linejoin='round' opacity='.55'%3E%3Cpath d='M26 30l2.6 5.3 5.8.8-4.2 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8-4.2-4.1 5.8-.8z'/%3E%3Cpath d='M124 24c2.7-2.8 7-2.8 9.6 0 2.7 2.8 2.7 7.3 0 10L128 44l-4-10c-2.7-2.7-2.7-7.2 0-10z'/%3E%3Crect x='132' y='108' width='22' height='17' rx='3'/%3E%3Ccircle cx='143' cy='117' r='4.6'/%3E%3Cpath d='M137 108l2-3h8l2 3'/%3E%3Crect x='24' y='112' width='34' height='24' rx='4'/%3E%3Cpath d='M32 122h18M32 129h13'/%3E%3Cpath d='M80 166c3-4.6 7.6-7 12-7s9 2.4 12 7'/%3E%3Ccircle cx='92' cy='152' r='5.4'/%3E%3Cpath d='M166 168l3 6 3-6z'/%3E%3Cpath d='M78 70h20v14H78z'/%3E%3Cpath d='M78 75h20'/%3E%3C/g%3E%3C/svg%3E");
    border-color: var(--linie);
}

/* Diese Regeln stammen aus der Zeit vor dem Markensatz und setzen feste Werte,
   die den obigen widersprechen. Sie werden zurückgenommen. */
.theme-dark .conversation-panel,
.theme-dark .thread-header,
.theme-dark .message-composer,
.theme-dark .icon-button {
    background: var(--flaeche);
    border-color: var(--linie);
}
.theme-dark.app-shell { background: var(--papier); }
.theme-dark .trust-card {
    background: var(--gruen-zart);
    border-color: rgba(140, 163, 94, .30);
}
.theme-dark .trust-card b { color: var(--gruen); }
.theme-dark .trust-card small { color: #9bb5a8; }
.theme-dark .privacy-entry,
.theme-dark .composer-row,
.theme-dark .fingerprint-card {
    background: var(--flaeche-warm);
    border-color: var(--linie);
    color: var(--tinte);
}
.theme-dark .fingerprint-block { background: var(--flaeche); border-color: var(--linie); }
.theme-dark .message-bubble { background: var(--flaeche); border-color: var(--linie); }
.theme-dark .outgoing .message-bubble {
    background: var(--akzent-zart);
    border-color: var(--akzent-hell);
}
.theme-dark .day-divider span,
.theme-dark .reaction-row button { background: var(--flaeche); border-color: var(--linie); }
/* Die Zahl der eigenen Reaktion stand in Bordeaux auf dunklem Grund. */
.theme-dark .reaction-row button.own b { color: var(--gold-auf-leder); }

/* Im Dunkeln traegt die Anmeldung dieselbe Kachel wie im Hellen, nur auf
   Pflaume statt auf Pergament: Das Goldgitter ist dort ohnehin nur zu ahnen.
   Die Motivkachel des Chatraums stand hier frei hinter dem Blatt und wirkte
   wie eine Tapete. */
.theme-dark.lock-shell {
    background-color: var(--papier);
    background-image:
        url("../design/atelier-soft/login-parchment.svg"),
        url("../design/atelier-soft/login-parchment-grain.png");
    background-size: 240px, 256px;
}

.theme-dark.lock-shell::before {
    background: radial-gradient(ellipse at 50% 45%, transparent 30%, rgba(0, 0, 0, .45));
}

.theme-dark .lock-card {
    background: linear-gradient(180deg, var(--flaeche-warm), var(--flaeche));
    box-shadow:
        0 18px 44px rgba(0, 0, 0, .5),
        inset 0 0 0 1px rgba(255, 226, 170, .10),
        inset 0 0 0 5px var(--flaeche),
        inset 0 0 0 6px rgba(201, 144, 85, .42);
}

/* Goldschrift ist nur auf dunklem Grund erlaubt - im Dunkeln ist das Blatt
   dunkel, also darf die Feldbeschriftung heller werden als das Braungold. */
.theme-dark .vault-fields label { color: var(--gold-hell); }
.theme-dark .fact-icon { color: var(--gold-hell); }
.theme-dark .lock-card h1 em { color: var(--rose); }

.theme-dark .conversation-panel,
.theme-dark .thread-header,
.theme-dark .message-composer,
.theme-dark .icon-button {
    background: rgba(40, 34, 27, .94);
    border-color: var(--linie);
}
.theme-dark.app-shell,
.theme-dark .thread-panel {
    background:
        radial-gradient(circle at 50% 0%, rgba(201, 144, 85, .10), transparent 28%),
        var(--flaeche);
}
.theme-dark .search-box,
.theme-dark .message-composer textarea,
.theme-dark .composer-tool {
    background: #2f2821;
    color: var(--tinte);
}
.theme-dark .search-box:focus-within,
.theme-dark .message-composer textarea:focus,
.theme-dark .emoji-palette,
.theme-dark .action-sheet,
.theme-dark .confirm-card,
.theme-dark .security-drawer,
.theme-dark .delivery-status-card,
.theme-dark .edit-history-card {
    background: var(--flaeche-warm);
    color: var(--tinte);
}
.theme-dark .conversation-row:hover,
.theme-dark .action-list > button:hover,
.theme-dark .security-controls > button:hover,
.theme-dark .emoji-palette button:hover,
.theme-dark .reaction-picker button:hover {
    background: #383026;
}
.theme-dark .conversation-row.selected {
    background: linear-gradient(105deg, rgba(118, 49, 73, .40), rgba(101, 39, 61, .16));
}
.theme-dark .message-bubble,
.theme-dark .reaction-row button,
.theme-dark .day-divider span,
.theme-dark .media-message,
.theme-dark .media-gallery {
    background: #322b22;
    color: var(--tinte);
}
.theme-dark .outgoing .message-bubble {
    background: linear-gradient(125deg, var(--akzent-hell), var(--akzent-tief));
    color: var(--text-auf-leder);
}
.theme-dark .outgoing .bubble-meta time,
.theme-dark .outgoing .edit-history-trigger,
.theme-dark .outgoing .edit-history-label,
.theme-dark .outgoing .delivery-state { color: rgba(255, 241, 216, .72); }
/* Das dunkle Pflaumen-Akzentrot verschwindet auf der dunklen Blase; auf der
   eigenen, die dieselbe Farbe als Fläche trägt, erst recht. */
.theme-dark .message-more,
.web-vnext.theme-dark .message-more { color: var(--rose); }
.theme-dark .message-more:focus-visible,
.web-vnext.theme-dark .message-more:focus-visible { outline-color: var(--rose); }
.theme-dark .outgoing .message-more,
.web-vnext.theme-dark .outgoing .message-more,
.theme-dark .outgoing .message-more:focus-visible,
.web-vnext.theme-dark .outgoing .message-more:focus-visible {
    color: var(--text-auf-leder);
    outline-color: var(--text-auf-leder);
}
/* Und dasselbe fuer die Adressen im Text. Fuer "Mehr anzeigen" war es oben
   laengst geregelt, fuer den Link daneben nie: In der eigenen Blase trug er
   genau die Farbe, mit der die Blase gefuellt ist, und sichtbar blieb von
   einer Adresse nur noch ihre Unterstreichung. Beide stehen in derselben
   Blase und tragen deshalb dieselbe Farbe - zwei verschiedene waeren im
   Hellen wie im Dunkeln eine Behauptung ueber einen Unterschied, den es
   nicht gibt. */
.theme-dark .chat-link,
.web-vnext.theme-dark .chat-link { color: var(--rose); }
.theme-dark .chat-link:focus-visible,
.web-vnext.theme-dark .chat-link:focus-visible { outline-color: var(--rose); }
.theme-dark .outgoing .chat-link,
.web-vnext.theme-dark .outgoing .chat-link,
.theme-dark .outgoing .chat-link:focus-visible,
.web-vnext.theme-dark .outgoing .chat-link:focus-visible {
    color: var(--text-auf-leder);
    outline-color: var(--text-auf-leder);
}
.theme-dark .delivery-state.state-4,
.theme-dark .conversation-delivery-state.state-4 { color: #61bfff; }
.theme-dark .reply-preview { background: rgba(255, 255, 255, .07); color: var(--tinte-weich); }
.theme-dark .reply-preview-thumb:not(.is-sticker),
.theme-dark .composer-context-thumb:not(.is-sticker) {
    background: rgba(255, 255, 255, .09);
}
.theme-dark .session-banner {
    background: linear-gradient(90deg, rgba(140, 163, 94, .16), rgba(140, 163, 94, .05));
}
.theme-dark .caption-field input,
.theme-dark .confirm-card button,
.theme-dark .modal-actions > button:not(.primary-action) {
    background: #383026;
    border-color: var(--linie);
    color: var(--tinte);
}
.theme-dark .lock-footnote { color: var(--tinte-zart); }

/* Lesbare Untergrenze statt dekorativer 8-Pixel-Typografie. */
.conversation-preview,
.session-banner small,
.panel-footer p,
.panel-footer small,
.thread-header p,
.bubble-meta time,
.media-meta time,
.edit-history-trigger,
.edit-history-label,
.delivery-state,
.day-divider span,
.empty-proof,
.scanner-security {
    font-size: max(10px, .68rem);
}
.conversation-meta time,
.search-box kbd,
.eyebrow { font-size: max(10px, .65rem); }
.message-bubble p { font-size: 13px; }

@media (max-width: 720px) {
    .mobile-security { display: flex; }
    .theme-button { display: none; }
    .message-actions-trigger { opacity: .76; }
    .composer-tool { height: 44px; width: 44px; }
    .emoji-palette { grid-template-columns: repeat(6, 1fr); }
    .reaction-picker { grid-template-columns: repeat(4, 1fr); }
    /* Der Sendedialog steht auf dem Handy am unteren Rand. Bei
       `viewport-fit=cover` liegt dieser Rand auf iPhone und installierter PWA
       hinter Gestenindikator beziehungsweise Browserleiste. Der Composer
       rechnet die Safe-Area bereits ein; der Dialog tat es bislang nicht und
       schnitt dadurch gerade seine beiden Abschlussknöpfe ab. */
    .action-scrim {
        align-items: flex-end;
        padding: 10px max(10px, env(safe-area-inset-right))
            max(10px, env(safe-area-inset-bottom))
            max(10px, env(safe-area-inset-left));
    }
    .action-sheet,
    .edit-history-card {
        border-radius: 25px 25px 17px 17px;
        max-width: none;
    }
    .security-drawer { max-width: none; padding: 22px; }
}

/* Ausweg, wenn das Gerät den Bildschirm nicht scannen kann: derselbe Inhalt
   als Text. Eingeklappt, weil es der Sonderfall ist. */
.manual-pairing {
    border-top: 1px solid var(--linie, #ebe8e2);
    margin-top: 14px;
    padding-top: 12px;
}
.manual-pairing summary {
    color: var(--tinte-weich);
    cursor: pointer;
    font-size: 11px;
    list-style: none;
}
.manual-pairing summary::-webkit-details-marker { display: none; }
.manual-pairing summary::before { content: "▸ "; }
.manual-pairing[open] summary::before { content: "▾ "; }
.manual-pairing summary:hover { color: var(--tinte, var(--tinte)); }
.manual-pairing > p { color: var(--tinte-weich); font-size: 10px; margin: 10px 0 8px; }
.manual-pairing code {
    background: var(--flaeche-warm);
    border-radius: 10px;
    display: block;
    font-family: "Cascadia Mono", Consolas, monospace;
    font-size: 10px;
    line-height: 1.5;
    /* Umbruch mitten im Code: Er ist lang und hat keine Leerzeichen. */
    overflow-wrap: anywhere;
    padding: 10px;
    user-select: all;
}
.manual-pairing button {
    background: var(--weich, var(--flaeche-warm));
    border: 0;
    border-radius: 10px;
    color: var(--tinte, var(--tinte));
    cursor: pointer;
    font-size: 11px;
    margin-top: 8px;
    padding: 7px 14px;
}
.theme-dark .manual-pairing code {
    background: var(--weich);
    color: var(--tinte);
}

/* Tritt an die Stelle des Codes, sobald er abgelaufen ist. Der Dialog bleibt
   stehen, damit der Weg zum nächsten Versuch einen Klick weit ist. */
.pairing-expired {
    padding: 28px 4px 12px;
    text-align: center;
}
.pairing-expired p {
    color: var(--tinte-weich);
    font-size: 12px;
    line-height: 1.6;
    margin: 0 0 16px;
}
.pairing-expired button {
    background: var(--accent, var(--pflaume));
    border: 0;
    border-radius: 12px;
    color: #ffffff;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    padding: 11px 22px;
}
.pairing-expired button:hover { filter: brightness(1.08); }

/* Feature parity: Profile, devices, backup, server, sticker picker, editor */
.feature-scrim { z-index: 60; }
.feature-card {
    background: var(--flaeche);
    border: 1px solid rgba(255, 255, 255, .86);
    border-radius: 26px;
    box-shadow: var(--schatten);
    max-height: min(820px, calc(100dvh - 28px));
    max-width: 620px;
    overflow-y: auto;
    padding: 24px;
    width: 100%;
}
.feature-card header {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
}
.feature-card header > button {
    background: var(--weich);
    border: 0;
    border-radius: 50%;
    color: var(--tinte-weich);
    cursor: pointer;
    font-size: 22px;
    height: 36px;
    width: 36px;
}
.feature-card h2 { letter-spacing: -.035em; margin: 4px 0 0; }
.dialog-copy,
.privacy-note {
    color: var(--tinte-weich);
    font-size: 12px;
    line-height: 1.55;
}
.dialog-copy { margin: 18px 0 12px; }
.field-stack {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 15px;
}
.field-stack > span,
.caption-field > span {
    color: var(--tinte-weich);
    font-size: 11px;
    font-weight: 700;
}
.field-stack input,
.field-stack textarea,
.sticker-search,
.emoji-search {
    background: var(--weich);
    border: 1px solid transparent;
    border-radius: 13px;
    color: var(--tinte);
    min-height: 42px;
    padding: 10px 12px;
    width: 100%;
}
.field-stack textarea { resize: vertical; }
.feature-card input:focus,
.feature-card textarea:focus { border-color: var(--akzent); outline: 0; }
.profile-avatar-editor {
    align-items: center;
    display: flex;
    gap: 15px;
    margin: 22px 0 8px;
}
.profile-avatar-editor > img,
.profile-avatar-editor > span {
    align-items: center;
    background: linear-gradient(135deg, var(--akzent), var(--gold));
    border-radius: 50%;
    color: white;
    display: flex;
    flex: 0 0 auto;
    font-size: 26px;
    font-weight: 800;
    height: 74px;
    justify-content: center;
    object-fit: cover;
    width: 74px;
}
.profile-avatar-editor > div {
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.editor-button,
.text-button {
    border-radius: 11px;
    cursor: pointer;
    display: inline-flex;
    font-size: 11px;
    font-weight: 700;
    justify-content: center;
    padding: 9px 12px;
}
.editor-button {
    background: var(--weich);
    color: var(--akzent-tief);
}
.text-button {
    background: transparent;
    border: 0;
    color: var(--tinte-weich);
}
.text-button:hover,
.editor-button:hover { filter: brightness(.96); }
.feature-card .modal-actions { margin-top: 20px; }
.security-shortcuts {
    border-bottom: 1px solid var(--linie);
    display: grid;
    gap: 4px;
    margin: 14px 0 7px;
    padding-bottom: 10px;
}
.security-shortcuts > button {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 14px;
    color: inherit;
    cursor: pointer;
    display: flex;
    gap: 12px;
    padding: 10px;
    text-align: left;
    width: 100%;
}
.security-shortcuts > button:hover { background: var(--weich); }
.security-shortcuts > button > span {
    align-items: center;
    background: var(--weich);
    border-radius: 11px;
    color: var(--akzent);
    display: flex;
    flex: 0 0 auto;
    font-size: 18px;
    height: 38px;
    justify-content: center;
    width: 38px;
}
.security-shortcuts p,
.device-row p,
.sticker-pack-row p {
    display: flex;
    flex-direction: column;
    margin: 0;
}
.security-shortcuts b,
.device-row b,
.sticker-pack-row b { font-size: 12px; }
.security-shortcuts small,
.device-row small,
.sticker-pack-row small {
    color: var(--tinte-weich);
    font-size: 10px;
    margin-top: 3px;
}
.device-list { display: grid; gap: 9px; margin: 14px 0; }
.device-row {
    align-items: center;
    background: var(--weich);
    border-radius: 16px;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 13px;
}
.device-row code {
    color: var(--tinte-weich);
    display: block;
    font-family: "Cascadia Mono", Consolas, monospace;
    font-size: 9px;
    margin-top: 8px;
    overflow-wrap: anywhere;
}
.verify-button {
    background: white;
    border: 1px solid rgba(201, 144, 85, .45);
    border-radius: 11px;
    color: var(--akzent-tief);
    cursor: pointer;
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 750;
    padding: 8px 10px;
}
.verify-button.verified {
    background: rgba(89, 107, 60, .14);
    border-color: rgba(89, 107, 60, .38);
    color: var(--gruen);
}
.confirm-inline {
    background: rgba(164, 76, 62, .08);
    border-radius: 15px;
    margin-top: 12px;
    padding: 13px;
}
.confirm-inline p { color: var(--tinte-weich); font-size: 11px; line-height: 1.5; margin: 0 0 10px; }
.confirm-inline button {
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    font-size: 11px;
    margin-right: 7px;
    padding: 8px 10px;
}
.storage-summary {
    background: var(--weich);
    border-radius: 16px;
    display: grid;
    gap: 9px;
    margin: 20px 0 14px;
    padding: 15px;
}
.storage-summary b { font-size: 13px; }
.storage-summary small { color: var(--tinte-weich); font-size: 10px; }
.storage-summary progress { accent-color: var(--akzent); height: 8px; width: 100%; }
.backup-actions { display: grid; gap: 9px; }
.backup-actions > button {
    background: var(--weich);
    border: 1px solid transparent;
    border-radius: 15px;
    color: inherit;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px;
    text-align: left;
}
.backup-actions > button:hover { border-color: rgba(201, 144, 85, .55); }
.backup-actions b { font-size: 12px; }
.backup-actions small { color: var(--tinte-weich); font-size: 10px; }
.server-status {
    align-items: center;
    background: var(--weich);
    border-radius: 16px;
    display: flex;
    gap: 10px;
    margin: 20px 0 12px;
    padding: 15px;
}
.server-status p { display: flex; flex-direction: column; margin: 0; }
.server-status small { color: var(--tinte-weich); font-size: 10px; margin-top: 3px; }
.server-json {
    background: var(--flaeche);
    border-radius: 15px;
    color: var(--gold-auf-leder);
    font: 10px/1.55 "Cascadia Mono", Consolas, monospace;
    max-height: 220px;
    overflow: auto;
    padding: 14px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.sticker-tabs {
    border-bottom: 1px solid var(--linie);
    display: flex;
    gap: 4px;
    margin: 18px 0 14px;
    overflow-x: auto;
}
.sticker-tabs button {
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--tinte-weich);
    cursor: pointer;
    font-size: 11px;
    font-weight: 750;
    padding: 10px 9px;
    white-space: nowrap;
}
.sticker-tabs button.active {
    border-bottom-color: var(--akzent);
    color: var(--akzent-tief);
}
.sticker-search { margin-bottom: 10px; }
/* Die Spaltenzahl richtet sich nach der Breite, nicht nach einer festen Zahl:
   Auf einem breiten Bildschirm standen sonst vier riesige Kacheln mit viel
   Luft dazwischen. */
.sticker-grid {
    display: grid;
    gap: 9px;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    margin-top: 13px;
}
.sticker-choice {
    min-width: 0;
    position: relative;
}
.sticker-choice > button:first-child {
    align-items: center;
    background: var(--weich);
    border: 1px solid transparent;
    border-radius: 15px;
    color: inherit;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-height: 104px;
    padding: 8px 5px 6px;
    width: 100%;
}
.sticker-choice > button:first-child:hover { border-color: var(--akzent); }
.sticker-choice img {
    height: 66px;
    object-fit: contain;
    width: 66px;
}
.sticker-placeholder { font-size: 42px; height: 66px; line-height: 66px; }
.sticker-choice small {
    color: var(--tinte-weich);
    font-size: 9px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sticker-favorite {
    background: white;
    border: 0;
    border-radius: 50%;
    color: #cc981e;
    cursor: pointer;
    font-size: 14px;
    height: 25px;
    position: absolute;
    right: -3px;
    top: -3px;
    width: 25px;
}
.sticker-pack-list { display: grid; gap: 8px; margin-top: 16px; }
.sticker-pack-row {
    align-items: center;
    background: var(--weich);
    border: 1px solid transparent;
    border-radius: 15px;
    color: inherit;
    cursor: pointer;
    display: flex;
    gap: 11px;
    padding: 12px;
    text-align: left;
    width: 100%;
}
/* Pack oeffnen und Pack favorisieren sind zwei getrennte Aktionen. Sie duerfen
   sich nicht dieselbe Schaltflaeche teilen, sonst favorisiert ein Fehlgriff
   statt zu oeffnen. */
.sticker-pack-open {
    align-items: center;
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: flex;
    flex: 1 1 auto;
    gap: 11px;
    min-width: 0;
    padding: 0;
    text-align: left;
}
.sticker-pack-favorite {
    background: none;
    border: 0;
    color: var(--akzent);
    cursor: pointer;
    flex: 0 0 auto;
    font-size: 18px;
    line-height: 1;
    padding: 4px 2px;
}
.sticker-pack-detail { margin-top: 4px; }
.sticker-pack-detail h3 {
    font-size: 14px;
    margin: 10px 0 12px;
}
.sticker-pack-back {
    background: none;
    border: 0;
    color: var(--akzent);
    cursor: pointer;
    font-size: 12px;
    padding: 4px 0;
}
.library-error {
    color: var(--rose);
    font-size: 11px;
    line-height: 1.5;
    margin: 10px 0 0;
}
.sticker-pack-row:hover { border-color: var(--akzent); }
.sticker-pack-row > span { color: var(--akzent); font-size: 20px; }
.sticker-pack-row > strong { color: #c6941e; margin-left: auto; }
.sticker-upload-button { margin-top: 15px; width: 100%; }
.empty-list-copy { color: var(--tinte-weich); font-size: 12px; line-height: 1.55; padding: 14px 3px; text-align: center; }
.emoji-palette { display: block; padding: 10px; }
.emoji-search { margin-bottom: 7px; min-height: 36px; }
.emoji-picker-controls {
    background: var(--flaeche);
    padding-bottom: 5px;
    position: sticky;
    top: -10px;
    z-index: 2;
}
.emoji-categories {
    display: flex;
    gap: 3px;
    overflow-x: auto;
    padding: 1px 0 5px;
    scrollbar-width: thin;
}
.emoji-palette .emoji-category {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--tinte-weich);
    display: flex;
    flex: 0 0 62px;
    flex-direction: column;
    font-size: 18px;
    gap: 1px;
    justify-content: center;
    min-height: 45px;
    padding: 3px 2px;
}
.emoji-palette .emoji-category small {
    font-size: 9px;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}
.emoji-palette .emoji-category.active {
    background: var(--akzent-zart);
    border-color: rgba(101, 39, 61, .28);
    color: var(--akzent-tief);
}
.emoji-result-count {
    color: var(--tinte-weich);
    font-size: 10px;
    margin: 2px 2px 0;
}
/* Wie beim Stickerraster: Die Spaltenzahl folgt der Breite. Bei zehn festen
   Spalten stand auf einem breiten Bildschirm jedes Emoji allein in einer
   handtellergroßen Zelle. */
.emoji-grid {
    display: grid;
    gap: 3px;
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
}
.emoji-grid button { font-size: 21px; }
.emoji-grid .emoji-more {
    background: var(--weich);
    color: var(--akzent-tief);
    font-size: 11px;
    font-weight: 750;
    grid-column: 1 / -1;
    margin-top: 5px;
    min-height: 38px;
}
.emoji-picker-state {
    color: var(--tinte-weich);
    font-size: 12px;
    margin: 16px 4px;
    text-align: center;
}
.emoji-picker-state.error {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.emoji-picker-state.error button {
    background: var(--weich);
    color: var(--akzent-tief);
    font-size: 11px;
    min-height: 36px;
    padding: 0 12px;
}
.custom-emoji-section h3 {
    color: var(--tinte-weich);
    font-family: inherit;
    font-size: 10px;
    letter-spacing: .06em;
    margin: 12px 2px 0;
    text-transform: uppercase;
}
.status-notice {
    background: color-mix(in srgb, var(--flaeche) 86%, var(--gruen) 14%);
    border: 1px solid rgba(89, 107, 60, .34);
    border-radius: 13px;
    box-shadow: 0 12px 32px rgba(20, 17, 13, .22);
    color: var(--gruen);
    font-size: 12px;
    left: 50%;
    line-height: 1.4;
    max-width: min(520px, calc(100vw - 28px));
    overflow-wrap: anywhere;
    padding: 10px 14px;
    position: fixed;
    text-align: center;
    top: 18px;
    transform: translateX(-50%);
    width: max-content;
    z-index: 80;
}
.status-notice.app-status-notice { top: 88px; }
@media (max-width: 799px) {
    .status-notice.app-status-notice {
        top: calc(env(safe-area-inset-top, 0px) + 80px);
    }
}
.theme-dark .feature-card { background: var(--flaeche); border-color: rgba(255, 255, 255, .08); }
.theme-dark .field-stack input,
.theme-dark .field-stack textarea,
.theme-dark .sticker-search,
.theme-dark .emoji-search,
.theme-dark .storage-summary,
.theme-dark .device-row,
.theme-dark .backup-actions > button,
.theme-dark .sticker-choice > button:first-child,
.theme-dark .sticker-pack-row,
.theme-dark .server-status { background: var(--weich); color: var(--tinte); }
.theme-dark .sticker-favorite,
.theme-dark .verify-button { background: #40362a; color: var(--tinte); }
.theme-dark .editor-button { color: var(--gold-auf-leder); }
@media (max-width: 560px) {
    .feature-scrim { align-items: flex-end; padding: 10px; }
    .feature-card { border-radius: 24px 24px 16px 16px; max-height: calc(100dvh - 20px); padding: 19px; }
    .sticker-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .emoji-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .device-row { align-items: flex-start; flex-direction: column; }
    .verify-button { width: 100%; }
}
.custom-emoji-grid {
    border-top: 1px solid var(--linie);
    display: grid;
    gap: 4px;
    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
    margin-top: 10px;
    max-height: 280px;
    overflow-y: auto;
    padding-top: 10px;
}
.custom-emoji-grid button {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    min-height: 42px;
    padding: 3px;
}
.custom-emoji-grid button:hover { background: var(--weich); }
.custom-emoji-grid img {
    height: 34px;
    object-fit: contain;
    width: 34px;
}
.chat-inline-emoji {
    display: inline-block;
    height: 1.55em;
    object-fit: contain;
    vertical-align: -.38em;
    width: 1.55em;
}
@media (max-width: 560px) {
    .custom-emoji-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}
.admin-drawer-backdrop {
    align-items: center;
    background: rgba(22, 19, 15, .56);
    display: flex;
    inset: 0;
    padding: clamp(10px, 2vw, 28px);
    position: fixed;
    z-index: 60;
}
.admin-drawer {
    background: var(--flaeche);
    border: 1px solid rgba(201, 144, 85, .30);
    border-radius: 25px;
    box-shadow: 0 30px 90px rgba(25, 21, 16, .32);
    display: flex;
    flex-direction: column;
    height: min(94dvh, 1100px);
    margin: auto;
    max-width: 1500px;
    min-height: 0;
    overflow: hidden;
    width: min(96vw, 1500px);
}
.admin-drawer-header {
    align-items: center;
    border-bottom: 1px solid var(--linie);
    display: flex;
    justify-content: space-between;
    padding: 15px 20px;
}
.admin-drawer-header h2 {
    letter-spacing: -.035em;
    margin: 4px 0 0;
}
.admin-drawer-actions {
    align-items: center;
    display: flex;
    gap: 10px;
}
.admin-drawer-link {
    background: var(--weich);
    border-radius: 11px;
    color: var(--akzent);
    font-size: 11px;
    font-weight: 750;
    padding: 9px 12px;
    text-decoration: none;
}
.admin-drawer-link:hover { filter: brightness(.96); }
.admin-drawer-close {
    background: var(--weich);
    border: 0;
    border-radius: 50%;
    color: var(--tinte-weich);
    cursor: pointer;
    font-size: 20px;
    height: 36px;
    line-height: 1;
    width: 36px;
}
.admin-drawer-close:hover { color: var(--tinte); }
.admin-frame {
    background: var(--tinte-tief);
    border: 0;
    flex: 1;
    min-height: 0;
    width: 100%;
}
.theme-dark .admin-drawer {
    background: var(--flaeche-warm);
    border-color: rgba(255, 255, 255, .08);
}
@media (max-width: 720px) {
    .admin-drawer-backdrop { padding: 0; }
    .admin-drawer {
        border-radius: 0;
        height: 100dvh;
        max-width: none;
        width: 100vw;
    }
    .admin-drawer-header { padding: 14px; }
    .admin-drawer-link { display: none; }
}

/* ---------------------------------------------------------------------------
   Fingerabdruckkarte im Privacy Center

   Im Entwurf ist sie das erste, was man sieht: ein Block aus Hexadezimalgruppen
   und darunter die Aussage, ob verglichen wurde. Der Fingerabdruck wird
   abgelesen und Zeichen fuer Zeichen verglichen - deshalb Festbreitenschrift,
   grosszuegige Laufweite und Gruppen statt einer durchgehenden Zeichenkette.
   --------------------------------------------------------------------------- */
.fingerprint-card {
    background: var(--flaeche-warm);
    border: 1px solid var(--linie);
    border-radius: var(--rundung);
    margin: 16px 0 4px;
    padding: 16px;
}
.fingerprint-card h3 {
    font-size: 13px;
    letter-spacing: -.01em;
    margin: 0 0 12px;
}
.fingerprint-block {
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--rundung-klein);
    padding: 12px 14px;
}
.fingerprint-block code {
    color: var(--tinte);
    display: block;
    font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;
    font-size: 13px;
    letter-spacing: .09em;
    line-height: 1.75;
    overflow-wrap: anywhere;
    word-spacing: .35em;
}
.fingerprint-state {
    align-items: center;
    color: var(--tinte-weich);
    display: flex;
    font-size: 12px;
    font-weight: 700;
    gap: 8px;
    margin: 12px 0 0;
}
.fingerprint-state > .ph {
    align-items: center;
    background: var(--weich);
    border-radius: 50%;
    color: var(--tinte-weich);
    display: inline-flex;
    height: 20px;
    justify-content: center;
    width: 20px;
}
.fingerprint-state.ok { color: var(--akzent-tief); }
.fingerprint-state.ok > .ph { background: var(--akzent-zart); color: var(--akzent-tief); }

/* ---------------------------------------------------------------------------
   Markenzeile mit Kopplungszustand

   Im Entwurf steht ganz oben die Marke und daneben, ob die Verbindung sicher
   steht. Das ist die eine Information, die vor allen anderen kommt.
   --------------------------------------------------------------------------- */
.panel-brand { align-items: center; display: flex; gap: 11px; min-width: 0; }
.panel-brand > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.panel-brand b { font-size: 17px; letter-spacing: -.02em; }

.pair-state {
    align-items: center;
    color: var(--tinte-weich);
    display: inline-flex;
    font-size: 11px;
    font-weight: 700;
    gap: 6px;
}
.pair-state i {
    background: var(--tinte-zart);
    border-radius: 50%;
    height: 7px;
    width: 7px;
}
.pair-state.ok { color: var(--gruen); }
.pair-state.ok i { background: var(--gruen); }

/* Die Büroklammer schließt das Eingabefeld nach rechts ab. */
.composer-row .attach-tool { margin-left: auto; }
.composer-row textarea { flex: 1; }

/* Die Büroklammer war aus drei Kästen zusammengesetzt und verschmolz in
   dieser Größe zu einer Form, die niemand als Klammer las. Sie ist jetzt eine
   Strichzeichnung - siehe .tool-glyph. */

/* ---------------------------------------------------------------------------
   Zwei Layoutfehler, die erst beim Durchgehen aller Dialoge auffielen
   --------------------------------------------------------------------------- */

/* Die Emoji-Palette liegt im Fusz des Gespraechs. Ohne Hoehenbegrenzung waechst
   der Fusz, bis er den Nachrichtenbereich vollstaendig verdraengt - das
   Gespraech verschwindet, waehrend man ein Emoji sucht. */
.emoji-palette {
    max-height: min(42vh, 340px);
    overflow-y: auto;
}
.message-composer { flex: 0 0 auto; max-height: 62vh; }
.message-stage { flex: 1 1 auto; }

/* Ein Hinweistext in einem vierspaltigen Raster bekommt eine Spalte und bricht
   danach nach jedem zweiten Wort um. Er gehoert ueber die ganze Breite. */
.sticker-grid .empty-list-copy { grid-column: 1 / -1; }

/* Die Palette hatte noch die helle Grundfarbe fest eingetragen. */
.emoji-palette { background: var(--flaeche); }

/* ----------------------------------------------------------- Typografie

   Die groszen Ueberschriften tragen Cormorant Garamond, alles andere Lora.
   Cormorant ist eine Renaissance-Antiqua mit sehr feinen Haarstrichen: grosz
   gesetzt traegt sie den Entwurf, in Fliesztextgroesze wird sie duenn. Die
   Grenze liegt deshalb bei den Ueberschriften und nicht bei einer
   Schriftgroesze. */
h1, h2, .hero-title, .screen-title, .feature-card > header h2,
.brand-row strong, .conversation-title {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 700;
    letter-spacing: .01em;
}

/* Metallkante statt grauem Rahmen: Der Entwurf verlangt fuer Karten einen
   feinen Goldrand ein Stueck innerhalb der Auszenkontur. Ein einzelner Strich
   sieht aus wie ein gewoehnlicher Rahmen; erst die zweite Linie mit Abstand
   macht daraus eine gefasste Flaeche. */
.feature-card, .thread-panel, .security-drawer, .conversation-row {
    box-shadow: var(--schatten), inset 0 0 0 1px rgba(201, 144, 85, .22);
}

/* ---------------------------------------------------------------------------
   Atelier Soft – ausgewaehlte Designrichtung

   Die Weboberflaeche folgt hier bewusst dem ausgewahlten Mockup: links die
   Unterhaltungen, rechts der Chat und unten ein bordeauxfarbenes Atelier-Fach
   fuer Sticker. Das Fach bleibt funktional ein Modal; visuell liegt es wie
   eine ausziehbare Lederablage am unteren Rand des Chats.
   --------------------------------------------------------------------------- */
@media (min-width: 721px) {
    body { background: #24191b; }

    .app-shell {
        background:
            linear-gradient(180deg, rgba(255, 225, 186, .20), transparent 7px),
            #24191b;
        border: 2px solid #130e11;
        border-radius: 16px;
        box-shadow:
            0 18px 50px rgba(18, 8, 12, .38),
            inset 0 0 0 1px rgba(190, 116, 72, .55);
        gap: 0;
        grid-template-columns: 350px minmax(0, 1fr);
        padding: 10px;
    }

    .app-rail { display: none; }

    .conversation-panel {
        border-radius: 10px 0 0 10px;
        border-right-color: #c6a27e;
        box-shadow: inset -1px 0 0 rgba(255, 255, 255, .52);
    }

    .thread-panel {
        background-color: #fbf4e8;
        background-image: url("../design/atelier-soft/chat-collar-paper.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        border-left: 0;
        border-radius: 0 10px 10px 0;
        box-shadow: inset 0 0 0 1px rgba(201, 144, 85, .22);
    }

    .thread-header {
        background: rgba(255, 250, 242, .91);
        border-bottom: 1px dashed #c6a27e;
    }

    .thread-header h2,
    .panel-header h2,
    .feature-card h2 { color: #17151b; }

    .thread-header p { color: var(--akzent); }
    .thread-header p span { background: var(--akzent); }

    .new-chat-button,
    .send-button {
        background: linear-gradient(180deg, #873246, #642238);
        border: 1px solid #4d1728;
        box-shadow:
            0 5px 11px rgba(93, 27, 46, .23),
            inset 0 1px 0 rgba(255, 230, 208, .28);
    }

    .new-chat-button:hover,
    .send-button:hover:not(:disabled) { background: #571b30; }

    .search-box {
        background: #fffaf3;
        border-color: #d8c5ac;
    }

    .search-box:focus-within,
    .composer-row:focus-within { border-color: rgba(101, 39, 61, .46); }

    .session-banner {
        background: #f3eee0;
        border-color: #ddd0b0;
    }

    .conversation-row.selected {
        background: #f0e1d2;
        border-color: #caa684;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5);
    }

    .message-stage { background: rgba(255, 250, 241, .15); }

    .message-bubble {
        background: rgba(255, 252, 247, .94);
        border-color: #d8c5ac;
    }

    .outgoing .message-bubble {
        background: #e4e2d1;
        border-color: #b8b99d;
        color: #29231f;
    }

    .outgoing .bubble-meta time,
    .outgoing .edit-history-trigger,
    .outgoing .edit-history-label { color: #74695d; }
    .delivery-state { color: var(--akzent); }

    .composer-row {
        background: rgba(255, 250, 243, .94);
        border-color: #c6a27e;
    }

    .composer-tool:hover { background: #f0e1d2; color: var(--akzent); }

    /* Das Fach hielt links die Breite der Chatspalte frei und endete exakt an
       der Gesprächsspalte. Es darf jetzt über die ganze Breite gehen - sonst
       hätte die große Raste aus dem Griff keinen Platz zu wachsen. */
    .feature-scrim:has(.sticker-picker-card) {
        align-items: flex-end;
        background: rgba(35, 20, 21, .14);
        backdrop-filter: blur(1px);
        justify-content: center;
        padding: 0 22px 10px;
    }

    /* Gescrollt wird jetzt innen, nicht die ganze Karte: Der Beschlag ragt über
       die Oberkante hinaus und wäre sonst abgeschnitten. Kopfzeile und Reiter
       bleiben dadurch beim Blättern stehen. */
    .feature-scrim:has(.sticker-picker-card) .sticker-picker-card {
        border: 2px solid #2c1b23;
        border-bottom: 0;
        border-radius: 25px 25px 0 0;
        box-shadow:
            0 -12px 26px rgba(45, 23, 27, .20),
            inset 0 0 0 1px rgba(207, 154, 91, .60);
        display: flex;
        flex-direction: column;
        max-height: min(53dvh, 540px);
        max-width: none;
        overflow: visible;
        padding: 21px 22px 18px;
        position: relative;
        transform: translateY(var(--sheet-drag, 0px));
        transition: max-height .22s ease, transform .18s ease;
        width: 100%;
    }

    .feature-scrim:has(.sticker-picker-card) .sticker-browser,
    .feature-scrim:has(.sticker-picker-card) .sticker-pack-list,
    .feature-scrim:has(.sticker-picker-card) .sticker-pack-detail {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }

    /* Im Demo-Modus stehen Liste und Vorschau nebeneinander. Gescrollt wird
       dann nur die Liste: Die Vorschau daneben endet mit ihrem Sendeknopf, und
       der darf nie unter die Kante des Fachs rutschen. Deshalb bekommt das
       Raster genau die verfügbare Höhe statt einer Mindesthöhe. */
    .feature-scrim:has(.sticker-picker-card) .demo-sticker-browser {
        grid-template-rows: minmax(0, 1fr);
        min-height: 0;
        overflow: hidden;
    }

    .feature-scrim:has(.sticker-picker-card) .demo-sticker-browser .sticker-browser-list {
        min-height: 0;
        overflow-y: auto;
        padding-right: 4px;
    }

    /* Während des Ziehens folgt das Fach dem Finger ohne Nachlauf. */
    .feature-scrim:has(.sticker-picker-card) .sticker-picker-card.is-dragging {
        transition: none;
    }

    /* Die zweite Raste. Gezogen wird sie am Beschlag, gesetzt wird sie hier.
       Die Höhe steht mit, weil das Fach im Demo-Modus eine feste bekommt und
       sonst trotz größerer Obergrenze nicht wachsen würde. */
    .feature-scrim:has(.sticker-picker-card) .sticker-picker-card.is-large {
        height: 88dvh;
        max-height: 88dvh;
    }

    /* Der Beschlag ist der Griff: klicken schließt, ziehen ändert die Größe.
       touch-action: none, damit der Finger zieht statt die Seite zu scrollen. */
    .feature-scrim:has(.sticker-picker-card) .sheet-handle {
        background: url("../design/atelier-soft/picker-latch.png") center / contain no-repeat;
        border: 0;
        cursor: grab;
        display: block;
        height: 48px;
        left: 50%;
        padding: 0;
        position: absolute;
        top: -30px;
        touch-action: none;
        transform: translateX(-50%);
        width: 80px;
    }

    .feature-scrim:has(.sticker-picker-card) .sheet-handle:active { cursor: grabbing; }

    .feature-scrim:has(.sticker-picker-card) .sheet-handle:focus-visible {
        border-radius: 12px;
        outline: 2px solid var(--gold, #c9a06a);
        outline-offset: 3px;
    }

    .sticker-picker-card header { align-items: center; }
    .sticker-picker-card header h2 { font-size: 22px; }

    .sticker-picker-card .sticker-tabs {
        gap: 12px;
        margin-top: 15px;
    }

    .sticker-picker-card .sticker-tabs button {
        color: #596476;
        font-size: 12px;
    }

    .sticker-picker-card .sticker-tabs button.active {
        border-bottom-color: var(--akzent);
        color: var(--akzent);
    }

    .sticker-picker-card .sticker-search-field,
    .sticker-picker-card .sticker-search,
    .sticker-picker-card .field-stack input {
        background: #fffaf3;
        border-color: #d8c5ac;
    }

    .sticker-picker-card .sticker-choice > button:first-child {
        background: #f7ecde;
        border-color: #e0cdb5;
    }

    .sticker-picker-card .sticker-choice > button:first-child:hover {
        border-color: var(--akzent);
    }
}

@media (max-width: 720px) {
    .thread-panel {
        background-color: #fbf4e8;
        background-image: url("../design/atelier-soft/chat-collar-paper.png");
        background-position: center;
        background-size: auto 100%;
    }

    .feature-scrim:has(.sticker-picker-card) {
        background: rgba(35, 20, 21, .44);
    }
}

/* ---------------------------------------------------------------------------
   Demo-Modus

   Beides ist nur zu sehen, wenn der Server "/demo/state" bedient - im Betrieb
   tut er das nicht. Die Gestaltung hat deshalb genau eine Aufgabe: Sie darf
   den Chat nicht schoener machen, sondern muss ihn erkennbar als Attrappe
   auszeichnen. Deswegen Gold auf Leder statt Bordeaux auf Pergament - der
   einzige Ort in dieser Oberflaeche, an dem ein Hinweis ueber allem liegt.
   --------------------------------------------------------------------------- */

.demo-entry {
    border-top: 1px dashed var(--linie);
    margin-top: 24px;
    padding-top: 20px;
    position: relative;
    z-index: 1;
}

.demo-entry > button {
    align-items: flex-start;
    background: var(--leder);
    border: 1px solid var(--gold);
    border-radius: 15px;
    color: var(--gold-auf-leder);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font: inherit;
    gap: 3px;
    padding: 12px 16px;
    text-align: left;
    transition: border-color .18s ease, transform .18s ease;
    width: 100%;
}

.demo-entry > button:hover:not(:disabled) {
    border-color: var(--gold-hell);
    transform: translateY(-1px);
}

.demo-entry > button:disabled { cursor: wait; opacity: .6; }
.demo-entry b { font-size: 13px; }
.demo-entry button small { color: var(--text-auf-leder); font-size: 10px; opacity: .8; }

.demo-entry > p {
    color: var(--tinte-weich);
    font-size: 10px;
    line-height: 1.5;
    margin: 10px 2px 0;
}

.demo-badge {
    align-items: center;
    background: var(--leder);
    border: 1px solid var(--gold);
    border-radius: 999px;
    box-shadow: var(--schatten-tief);
    color: var(--text-auf-leder);
    display: flex;
    font-size: 11px;
    gap: 9px;
    left: 50%;
    margin: 0;
    padding: 7px 15px 7px 8px;
    /* Fest und ueber allem: Die Demo soll auch dann erkennbar bleiben, wenn
       gerade ein Dialog offen ist oder die Liste gescrollt wird. Aus dem
       Grid herausgenommen, damit das geprüfte Layout unverändert bleibt.
       Ohne pointer-events: none laege ueber der Kopfzeile ein unsichtbares
       Feld, das Klicks schluckt - ein Hinweis darf nichts blockieren. */
    pointer-events: none;
    position: fixed;
    top: 10px;
    transform: translateX(-50%);
    z-index: 90;
}

.demo-badge b {
    background: var(--akzent);
    border-radius: 999px;
    color: var(--text-auf-leder);
    font-size: 10px;
    letter-spacing: .1em;
    padding: 3px 10px;
    text-transform: uppercase;
}

.demo-badge span { color: var(--gold-auf-leder); }

@media (max-width: 720px) {
    /* Auf schmalen Geräten sitzt oben die Kopfzeile des Gesprächs. Der Hinweis
       wandert deshalb nach unten, wo er den Verlauf nicht verdeckt. */
    .demo-badge {
        bottom: 8px;
        font-size: 10px;
        top: auto;
    }

    .demo-badge span { display: none; }
}

/* Standard ist die flächige Collar-Komposition aus dem ausgewählten Entwurf.
   Nur die beim Entsperren gezogene 5%-Variante verwendet die frühere,
   randbetonte Cuff-Tapete. Die Klasse bleibt für die gesamte Sitzung stabil. */
.app-shell.rare-chat-background .thread-panel {
    background-image: url("../design/atelier-soft/chat-cuffs-paper.png");
}

/* ---------------------------------------------------------------------------
   Atelier Soft · visuelle Wahrheit im Demo-Modus

   Der Demo-Modus ist der reproduzierbare Zustand für den Vergleich mit dem
   ausgewählten Konzeptbild. Diese Regeln ändern keine Chatlogik; sie bringen
   nur Proportionen, Typografie, Nachrichtenraum und Stickerfach auf denselben
   visuellen Stand.
   --------------------------------------------------------------------------- */
@media (min-width: 721px) {
    .app-shell.demo-mode,
    .app-shell.demo-mode button,
    .app-shell.demo-mode input,
    .app-shell.demo-mode textarea,
    .atelier-picker-scrim.demo-mode,
    .atelier-picker-scrim.demo-mode button,
    .atelier-picker-scrim.demo-mode input {
        font-family: "Segoe UI", Inter, Arial, sans-serif;
    }

    .app-shell.demo-mode {
        border-radius: 13px;
        grid-template-columns: 340px minmax(0, 1fr);
        padding: 5px;
    }

    .demo-mode .conversation-panel {
        background: rgba(255, 250, 242, .98);
        border-radius: 8px 0 0 8px;
    }

    .demo-mode .panel-header { padding: 18px 19px 12px; }
    .demo-mode .panel-brand { gap: 12px; }
    .demo-mode .brand-mark {
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        height: 46px;
        width: 46px;
    }
    .demo-mode .panel-brand b {
        color: var(--tinte);
        font-size: 27px;
        font-weight: 750;
        letter-spacing: -.04em;
    }
    /* Die Demo zeigt die Kopfzeile ohne Werkzeuge - bis auf den Einklappknopf.
       Ohne ihn wäre die eingeklappte Spalte ein Zustand ohne Rückweg. */
    .demo-mode .pair-state,
    .demo-mode .panel-header .header-actions > *:not(.list-toggle),
    .demo-mode .session-banner,
    .demo-mode .privacy-entry { display: none; }

    .demo-mode .new-chat-button {
        border-radius: 10px;
        font-size: 16px;
        font-weight: 500;
        margin: 5px 20px 14px;
        min-height: 51px;
        padding: 12px 18px;
    }
    .demo-mode .new-chat-button .plus { font-size: 26px; font-weight: 300; }

    .demo-mode .search-box {
        border-color: #dfd1bf;
        border-radius: 11px;
        margin: 0 20px 9px;
    }
    .demo-mode .search-box input { font-size: 13px; height: 42px; }
    .demo-mode .search-box kbd { display: none; }

    .demo-mode .conversation-list { padding: 0 12px 8px; }
    .demo-mode .conversation-row {
        border-bottom: 1px solid #eadfce;
        border-radius: 11px;
        gap: 12px;
        min-height: 69px;
        padding: 8px 9px;
    }
    .demo-mode .conversation-row.selected {
        background: #f2e7dc;
        border-color: #d0ad8e;
    }
    .demo-mode .conversation-avatar {
        background: #ead8c2;
        border-color: #b88e62;
        height: 48px;
        width: 48px;
    }
    .demo-mode .conversation-avatar img { object-position: center 18%; }
    .demo-mode .conversation-meta b { color: #1d1d24; font-size: 15px; font-weight: 650; }
    .demo-mode .conversation-meta time { color: var(--tinte-zart); font-size: 11px; }
    .demo-mode .conversation-preview { color: var(--tinte-weich); font-size: 12px; }

    .demo-mode .panel-footer { padding: 9px 15px 15px; }
    .demo-mode .trust-card {
        background: rgba(255, 250, 243, .72);
        border-color: #dfd1bf;
        border-radius: 12px;
        color: #7b2035;
        padding: 14px 15px;
    }
    .demo-mode .trust-card b { color: #7b2035; font-size: 13px; }
    .demo-mode .trust-card small { color: var(--tinte-zart); font-size: 11px; }

    .demo-mode .thread-panel {
        background-color: #fbf5e9;
        background-position: center 82px;
        background-repeat: no-repeat;
        background-size: 100% auto;
        border-radius: 0 8px 8px 0;
    }
    .demo-mode .thread-header {
        background: rgba(255, 251, 244, .94);
        border-bottom: 1px dashed #cfae8d;
        min-height: 82px;
        padding: 12px 22px;
    }
    .demo-mode .thread-avatar {
        background: #ead8c2;
        border-color: #b88e62;
        height: 50px;
        width: 50px;
    }
    .demo-mode .thread-avatar img { object-position: center 17%; }
    .demo-mode .thread-header h2 {
        color: #17171d;
        font-size: 21px;
        font-weight: 650;
        letter-spacing: -.02em;
    }
    .demo-mode .thread-header p { color: #7b2035; font-size: 11px; }
    .demo-mode .thread-actions { gap: 12px; }
    .demo-mode .thread-actions .icon-button {
        background: transparent;
        border: 0;
        color: #20232a;
        font-size: 17px;
    }

    .demo-mode .message-stage { background: rgba(255, 249, 239, .16); }
    .demo-mode .stage-inner {
        margin: 0;
        max-width: none;
        padding: 15px 28px 30px;
    }
    .demo-mode .day-divider { margin: 2px 0 18px; }
    .demo-mode .day-divider span {
        background: rgba(255, 252, 246, .9);
        font-size: 12px;
        font-weight: 500;
        padding: 7px 14px;
    }
    .demo-mode .message-line { margin: 9px 0; }
    .demo-mode .message-line.outgoing { justify-content: flex-start; }
    .demo-mode .message-bubble {
        border-radius: 7px 13px 13px 13px;
        box-shadow: 0 3px 8px rgba(67, 48, 37, .08);
        padding: 10px 13px 8px;
    }
    .demo-mode .outgoing .message-bubble {
        background: rgba(228, 226, 209, .94);
        border-color: #babaa2;
        border-radius: 13px 7px 13px 13px;
    }
    .demo-mode .message-bubble p { font-size: 14px; line-height: 1.4; }
    .demo-mode .bubble-meta time,
    .demo-mode .edit-history-trigger,
    .demo-mode .edit-history-label { font-size: 9px; }
    .demo-mode .sticker-message {
        background: transparent;
        padding: 0;
        width: min(36vw, 390px);
    }
    .demo-mode .sticker-message img {
        border-radius: 18px;
        max-height: 275px;
        object-fit: contain;
    }
    .demo-mode .message-composer {
        background: rgba(255, 251, 244, .96);
        font-family: "Segoe UI", Inter, Arial, sans-serif;
    }

    .demo-mode .demo-badge {
        left: auto;
        padding: 4px 8px 4px 5px;
        right: 185px;
        top: 21px;
        transform: none;
    }
    .demo-mode .demo-badge span { display: none; }

    .atelier-picker-scrim.demo-mode {
        align-items: flex-end;
        background: rgba(35, 20, 21, .12);
        backdrop-filter: none;
        justify-content: center;
        padding: 0 8px;
    }
    .atelier-picker-scrim.demo-mode .atelier-demo-picker {
        background: #fffaf1;
        border: 6px solid #24191b;
        border-bottom: 0;
        border-radius: 27px 27px 0 0;
        box-shadow:
            0 -9px 24px rgba(40, 20, 25, .20),
            inset 0 0 0 2px #8c3b35,
            inset 0 0 0 4px #c2874e;
        height: min(45dvh, 460px);
        max-height: min(45dvh, 460px);
        overflow: visible;
        padding: 24px 22px 18px;
    }
    .atelier-picker-scrim.demo-mode .atelier-demo-picker .sheet-handle {
        height: 54px;
        top: -35px;
        width: 88px;
    }
    .atelier-demo-picker > header {
        align-items: center;
        min-height: 35px;
    }
    .atelier-demo-picker > header .eyebrow { display: none; }
    .atelier-demo-picker > header h2 {
        color: #222128;
        font-family: "Segoe UI", Inter, Arial, sans-serif;
        font-size: 19px;
        font-weight: 650;
        margin: 0;
    }
    .atelier-demo-picker > header > button {
        background: transparent;
        border: 0;
        color: #7b2035;
        cursor: pointer;
        font-size: 24px;
    }
    .atelier-demo-picker .sticker-tabs {
        gap: 22px;
        margin: -40px 315px 12px 185px;
    }
    .atelier-demo-picker .sticker-tabs button {
        color: #56677b;
        font-size: 12px;
        font-weight: 500;
        padding: 10px 7px;
    }
    .atelier-demo-picker .sticker-tabs button.active {
        border-bottom: 3px solid #7b2035;
        color: #7b2035;
        font-weight: 650;
    }

    .demo-sticker-browser {
        display: grid;
        gap: 18px;
        grid-template-columns: minmax(0, 1fr) 285px;
        min-height: 330px;
    }
    .demo-sticker-browser .sticker-browser-list { min-width: 0; }
    /* Die Suche stand rechtsbündig und schmal über einem linksbündigen Raster.
       Sie sitzt jetzt auf derselben Kante wie das Raster darunter. */
    .demo-sticker-browser .sticker-search-field {
        background: #fffdf8;
        border-color: #ded2c2;
        border-radius: 12px;
        margin: 0 0 11px;
    }
    .demo-sticker-browser .caption-field,
    .demo-sticker-browser .sticker-upload-button { display: none; }
    .demo-sticker-browser .sticker-grid {
        gap: 9px;
        grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
        margin-top: 0;
    }
    .demo-sticker-browser .sticker-choice > button:first-child {
        background: #fbf5e9;
        border-color: #e4d7c5;
        border-radius: 12px;
        min-height: 122px;
        padding: 7px 5px 5px;
    }
    .demo-sticker-browser .sticker-choice > button:first-child:hover {
        border-color: #7b2035;
        box-shadow: inset 0 0 0 1px #7b2035;
    }
    .demo-sticker-browser .sticker-choice img {
        height: 88px;
        width: 100%;
    }
    .demo-sticker-browser .sticker-choice small { display: none; }
    .demo-sticker-browser .sticker-favorite {
        color: #7b2035;
        right: 3px;
        top: 3px;
    }

    /* Das Vorschaubild war 205 Pixel hoch eingetragen. In einem Fach mit
       gedeckelter Höhe blieb für den Knopf darunter nichts übrig - er wurde
       an der Unterkante abgeschnitten. Jetzt gibt das Bild nach, der Knopf
       nicht. */
    .sticker-featured-preview {
        align-items: center;
        background: #fcf6eb;
        border: 1px solid #e4d7c5;
        border-radius: 14px;
        display: flex;
        flex-direction: column;
        min-height: 0;
        min-width: 0;
        padding: 10px;
        position: relative;
    }
    .sticker-featured-preview > span {
        color: #7b2035;
        font-size: 10px;
        font-weight: 700;
        left: 13px;
        letter-spacing: .08em;
        position: absolute;
        text-transform: uppercase;
        top: 11px;
    }
    .sticker-featured-preview img {
        flex: 1 1 auto;
        margin-top: 5px;
        max-height: 205px;
        min-height: 0;
        object-fit: contain;
        width: 100%;
    }
    .sticker-featured-preview p {
        align-self: stretch;
        display: flex;
        flex-direction: column;
        margin: 1px 3px 8px;
    }
    .sticker-featured-preview p b { color: #202129; font-size: 13px; }
    .sticker-featured-preview p small { color: #657184; font-size: 10px; margin-top: 2px; }
    .sticker-featured-preview > button {
        background: linear-gradient(180deg, #8c263b, #6c1d31);
        border: 1px solid #501526;
        border-radius: 10px;
        color: white;
        cursor: pointer;
        flex: 0 0 auto;
        font-size: 14px;
        min-height: 48px;
        width: 100%;
    }
}

/* ---------------------------------------------------------------------------
   Atelier - was einer dem anderen anlegt

   Alles hier arbeitet mit den Marken aus :root; der dunkle Modus stellt nur
   die Werte um und braucht deshalb keine eigenen Regeln. Der Ton ist Leder,
   Bordeaux und Gold - kein Rot, das schreit, und kein Schwarz, das hart wird.
   --------------------------------------------------------------------------- */

/* Die Figur im Kopf ist jetzt ein Knopf. Sie muss weiter wie ein Avatar
   aussehen und trotzdem anfassbar wirken. */
.thread-avatar.toy-trigger {
    cursor: pointer;
    padding: 0;
    position: relative;
    transition: box-shadow .18s ease, transform .18s ease;
}
.thread-avatar.toy-trigger:hover { transform: translateY(-1px); }
.thread-avatar.toy-trigger:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}
/* Liegt etwas an, bekommt der Rand Gold und ein kleines Siegel - erkennbar,
   ohne dass jemand die Zeile daneben lesen muss. */
.thread-avatar.toy-trigger.is-bound {
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(201, 144, 85, .30);
}
.toy-seal {
    align-items: center;
    background: linear-gradient(160deg, var(--akzent-hell), var(--akzent-tief));
    border: 1px solid var(--gold);
    border-radius: 50%;
    bottom: -1px;
    color: var(--gold-hell);
    display: flex;
    font-size: 8px;
    height: 15px;
    justify-content: center;
    line-height: 1;
    position: absolute;
    right: -1px;
    width: 15px;
}

/* Die Zustandszeile im Kopf ersetzt den Migrationshinweis, solange etwas
   liegt. Der Punkt davor wird Gold statt Gruen: Es ist kein Sicherheitszustand. */
.thread-header p.toy-line { color: var(--akzent); font-weight: 700; }
.thread-header p.toy-line span { background: var(--gold); }

/* --- Systemmeldung im Verlauf --------------------------------------------- */

/* Mittig, schmal, ohne Blase: Sie kommt von keiner der beiden Seiten. */
.toy-notice {
    align-items: center;
    align-self: center;
    background: var(--flaeche-warm);
    border: 1px solid var(--linie);
    /* Zweizeilig ist die Pillenform zu rund; ein weicher Kasten traegt beide
       Zeilen ruhiger. */
    border-radius: var(--rundung);
    box-shadow: var(--schatten-zart);
    display: flex;
    gap: 10px;
    margin: 10px auto;
    max-width: min(440px, 94%);
    padding: 8px 14px 8px 8px;
    width: fit-content;
}
.toy-notice img {
    border: 1px solid var(--gold);
    border-radius: 50%;
    flex: 0 0 auto;
    height: 30px;
    object-fit: cover;
    width: 30px;
}
.toy-notice p {
    color: var(--tinte-weich);
    font-size: 11.5px;
    line-height: 1.45;
    margin: 0;
}
/* Zwei Zeilen: oben was geschehen ist, darunter was es bedeutet. Die Folge
   ist der Teil, den man beim Ueberfliegen braucht - sie steht deshalb nicht
   im selben Satz, sondern darunter und ruhiger. */
.toy-notice b { color: var(--tinte); display: block; font-size: 12px; }
.toy-notice small { display: block; font-size: 10.5px; margin-top: 1px; }
.toy-notice time {
    color: var(--tinte-zart);
    font-size: 10px;
    margin-left: 7px;
}

/* --- Die gesperrte Seite --------------------------------------------------- */

/* Steht ueber dem abgeschalteten Composer. Ein totes Eingabefeld ohne Grund
   sieht aus wie ein Fehler; hier steht der Grund und die Restzeit. */
.toy-lock {
    align-items: center;
    background: linear-gradient(150deg, var(--akzent-tief), var(--pflaume));
    border-top: 1px solid var(--gold);
    color: var(--text-auf-leder);
    display: flex;
    gap: 12px;
    padding: 11px 20px;
}
.toy-lock img {
    border: 1px solid var(--gold);
    border-radius: 50%;
    flex: 0 0 auto;
    height: 42px;
    object-fit: cover;
    width: 42px;
}
.toy-lock p { flex: 1; margin: 0; min-width: 0; }
.toy-lock b { display: block; font-size: 13px; }
.toy-lock small {
    color: var(--gold-auf-leder);
    display: block;
    font-size: 10.5px;
    line-height: 1.5;
    margin-top: 2px;
}
.toy-clock {
    background: rgba(0, 0, 0, .28);
    border: 1px solid var(--gold);
    border-radius: 11px;
    color: var(--gold-glanz);
    flex: 0 0 auto;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    padding: 6px 11px;
}

/* Die Binde sperrt nichts, also steht ueber dem offenen Composer kein
   Sperrbalken, sondern eine Erklaerung. Damit man beides nicht verwechselt,
   liegt die Farbfolge umgekehrt: heller Pflaumenton oben. */
.toy-lock.is-blind-lock {
    background: linear-gradient(150deg, var(--pflaume), var(--akzent-tief));
}

/* --- Unter dem Beissknebel: zwei Antworten --------------------------------- */

/* Sie ersetzen die ganze Composer-Zeile und stehen nicht daneben: Ein
   abgeschaltetes Eingabefeld mit zwei Knoepfen darunter saehe aus, als koennte
   man es doch irgendwie benutzen. Gross genug, um mit dem Daumen getroffen zu
   werden - mehr als diese beiden Ziele gibt es hier ohnehin nicht. */
.composer-row.ja-nein {
    display: flex;
    gap: 12px;
    padding: 10px 20px 14px;
}
.ja-nein-antwort {
    background: linear-gradient(150deg, var(--akzent-tief), var(--pflaume));
    border: 1px solid var(--gold);
    border-radius: 26px;
    color: var(--text-auf-leder);
    cursor: pointer;
    flex: 1;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 19px;
    letter-spacing: .04em;
    padding: 13px 0;
}
.ja-nein-antwort:hover:not(:disabled) { filter: brightness(1.12); }
.ja-nein-antwort:disabled { cursor: default; opacity: .55; }

/* --- Unter der Binde: die Sicht nehmen ------------------------------------- */

/* Zwei Wirkungen kennt das Atelier. Ein Knebel nimmt die Stimme - der Composer
   oben ist dann zu. Eine Binde nimmt die Sicht, und das steht hier.
 *
 * Verschleiert wird der Inhalt, nicht die Buehne: Blasen, Abstaende, Reihen
 * behalten Form und Platz. Sichtbar bleibt dadurch, DASS etwas ankommt - nur
 * nicht, was. Ein einfach ausgeblendeter Verlauf saehe aus wie ein leerer
 * Chat, also wie ein Fehler.
 *
 * Eine Regel auf der ganzen Flaeche statt einer je Blase: So bleibt es beim
 * Umblaettern eine einzige Ebene, und - wichtiger - nichts kann durchrutschen.
 * Eine Aufzaehlung einzelner Teile vergisst frueher oder spaeter eines, und
 * das waere dann genau die Zeile, die man nicht lesen sollte. Auch die
 * Systemmeldung des Ateliers liegt darunter; was gerade gilt, steht sichtbar
 * in der Karte ueber dem Eingabefeld.
 *
 * Kein `transition`: Ein Uebergang waere huebsch, zeigte den Text aber eine
 * halbe Sekunde lang lesbar - beim Anlegen wie beim Abnehmen in die falsche
 * Richtung. */
.message-stage.is-blind .stage-inner,
.composer-context small.is-blind,
.conversation-preview.is-blind {
    filter: blur(4.6px) saturate(.78) contrast(.92);
    /* Verwischt ist nicht weg: Ohne das holte ein Dreifachklick den Text
       zurueck in die Zwischenablage. */
    -webkit-user-select: none;
    user-select: none;
}
/* Die beiden Vorschauzeilen stehen dicht unter einer anderen Zeile - in der
   Liste unter dem Namen, im Composer unter „Antwort auf“. Die volle Staerke
   liefe dort sichtbar in die Nachbarzeile hinein. Weniger ist hier trotzdem
   genug: 3,4 Punkt Unschaerfe auf 11 Punkt Schrift sind rund ein Drittel der
   Zeichenhoehe und damit weit jenseits des Entzifferbaren. */
.composer-context small.is-blind,
.conversation-preview.is-blind { filter: blur(3.4px) saturate(.78); }
/* Die Miniatur im Composer liegt ausserhalb der verschleierten Buehne und
   braucht ihren eigenen Schleier - sonst zeigte ausgerechnet sie, was der
   Text daneben verbirgt. Staerker als beim Text: Ein Bild ist auch stark
   verwischt noch wiederzuerkennen. */
.composer-context-thumb.is-blind { filter: blur(9px) saturate(.7); }

/* Bilder und Sticker brauchen ein Vielfaches: Ein Motiv bleibt bei der
   Staerke, die Schrift zu Brei macht, muehelos erkennbar. Der Wert steht
   deshalb in Pixeln - er haengt an der Bildgroesse, nicht an einer
   Schriftgroesse.

   30 Punkt sind nachgemessen und nicht geschaetzt: Bei 17 war die Schrift
   laengst Brei, auf dem Sticker aber noch eine Person mit langem Haar zu
   erkennen. Als Faustzahl - rund ein Zehntel der Kachelbreite, und die
   Bildaufteilung ist weg. */
.message-stage.is-blind .media-open { cursor: default; }
.message-stage.is-blind .media-open img { filter: blur(30px) saturate(.75); }
.message-stage.is-blind .gallery-open img { filter: blur(30px) saturate(.75); }

/* Nur Fotos werden dazu beschnitten. `blur` zieht die Kanten nach aussen ins
   Durchsichtige; ein Foto bekaeme sonst einen ausgefransten hellen Saum, und
   weil es ohnehin rechteckig ist, faellt die geschlossene Flaeche nicht auf.

   Sticker ausdruecklich nicht: Sie sind freigestellt, und ein randscharfes
   Rechteck an ihrer Stelle sieht aus wie ein Schwaerzungsbalken - der einzige
   harte Rand in einem sonst weichen Bild. Ihr Umriss darf nach innen
   ausblenden. Erkennbar wird davon nichts: Bei 17 Punkt Unschaerfe auf einer
   240 Punkt breiten Kachel bleibt ein Fleck. */
.message-stage.is-blind .media-message:not(.sticker-message) .media-open {
    border-radius: 12px;
    overflow: hidden;
}
.message-stage.is-blind .media-message:not(.sticker-message) .media-open img {
    transform: scale(1.16);
}
/* Gross gilt dasselbe, nur groesser - sonst waere ein verschleiertes Bild mit
   einem Tipp wieder scharf. */
.media-viewer.is-blind { overflow: hidden; }
.media-viewer.is-blind img {
    filter: blur(70px) saturate(.75);
    transform: scale(1.12);
}

/* Der Schleier ueber dem Ganzen. Als `inset`-Schatten und nicht als eigene
   Lage: Die Buehne scrollt, ein daringelegtes Element scrollte mit und der
   Verlauf zoege unter einem wandernden Fleck hindurch. Innere Schatten liegen
   auf dem Rahmen des Elements und bleiben stehen. */
.message-stage.is-blind {
    box-shadow: inset 0 0 120px 26px rgba(28, 16, 30, .3);
}
.theme-dark .message-stage.is-blind {
    box-shadow: inset 0 0 130px 30px rgba(0, 0, 0, .45);
}

/* Je Zeichen ein Punkt, wie im Kennwortfeld - und aus demselben Grund vom
   Browser gemacht und nicht von uns: Im Feld steht weiter der echte Text.
   Eine selbst gesetzte Maske im Wert wuerde bei der naechsten Eingabe
   zurueckgelesen und haette den Entwurf nach drei Zeichen zerstoert. */
.message-composer textarea.blind-input {
    -webkit-text-security: disc;
    caret-color: var(--akzent);
    letter-spacing: .05em;
}
/* Wo die Eigenschaft fehlt, bleibt das Feld lieber ganz leer als lesbar. Der
   Cursor steht weiter an der richtigen Stelle - man sieht nur nicht, wovor. */
@supports not (-webkit-text-security: disc) {
    .message-composer textarea.blind-input { color: transparent; }
}

/* --- Das Auswahlfenster ---------------------------------------------------- */

.toy-card { max-width: 560px; }

/* Der Atelier-Soft-Block setzt `.feature-card h2` auf ein festes Fast-Schwarz.
   Fuer das Stickerfach stimmt das - dessen Karte bleibt auch im dunklen Schema
   hell. Jeder andere Dialog bekommt dort aber `--flaeche`, und die ist dunkel:
   "Profil bearbeiten", "Geraete", "Serversicherung" und dieses Fenster standen
   im Dunkeln in Fast-Schwarz auf Fast-Schwarz. Die Ausnahme gilt deshalb
   umgekehrt. */
.theme-dark .feature-card:not(.sticker-picker-card) h2 { color: var(--tinte); }

/* Was gerade liegt, steht ganz oben - vor jeder neuen Auswahl. */
.toy-state {
    align-items: center;
    background: var(--akzent-zart);
    border: 1px solid var(--linie);
    border-radius: var(--rundung);
    display: flex;
    gap: 12px;
    margin-top: 18px;
    padding: 12px;
}
.toy-state img {
    border: 1px solid var(--gold);
    border-radius: 50%;
    flex: 0 0 auto;
    height: 52px;
    object-fit: cover;
    width: 52px;
}
.toy-state p { flex: 1; margin: 0; min-width: 0; }
.toy-state b { display: block; font-size: 13.5px; }
.toy-state small {
    color: var(--tinte-weich);
    display: block;
    font-size: 11px;
    line-height: 1.5;
    margin-top: 2px;
}
.toy-release {
    background: var(--flaeche);
    border: 1px solid var(--akzent);
    border-radius: 12px;
    /* Nicht --akzent: der Rahmen traegt den Ton, die Schrift braucht Kontrast
       zur Flaeche - und die ist im dunklen Schema selbst Bordeaux. */
    color: var(--tinte);
    cursor: pointer;
    flex: 0 0 auto;
    font-size: 12.5px;
    font-weight: 700;
    min-height: 40px;
    padding: 0 15px;
}
.toy-release:hover:not(:disabled) {
    background: var(--akzent);
    color: var(--text-auf-leder);
}
.toy-release:disabled { cursor: not-allowed; opacity: .5; }

.toy-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 18px;
}
.toy-tabs button {
    background: var(--weich);
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--tinte-weich);
    cursor: pointer;
    font-size: 12.5px;
    min-height: 36px;
    padding: 0 14px;
}
.toy-tabs button.active {
    background: linear-gradient(160deg, var(--akzent-hell), var(--akzent-tief));
    border-color: var(--gold);
    color: var(--text-auf-leder);
    font-weight: 700;
}
/* Die noch leeren Faecher bleiben sichtbar. Sie sagen, wohin es geht, ohne
   etwas zu versprechen, das dahinter noch nicht liegt. */
.toy-tabs button.locked { cursor: not-allowed; opacity: .55; }
.toy-tabs button i {
    background: var(--gold);
    border-radius: 4px;
    color: var(--tinte-tief);
    font-size: 8px;
    font-style: normal;
    font-weight: 800;
    letter-spacing: .06em;
    margin-left: 6px;
    padding: 1px 4px;
    text-transform: uppercase;
    vertical-align: 1px;
}

.toy-lead {
    color: var(--tinte-weich);
    font-size: 12px;
    line-height: 1.55;
    margin: 14px 0 0;
}

/* Der Schalter im Stickerfach: nur meine Figur oder auch die andere. Klein und
   ohne Rahmen - er ist eine Nebenfrage, kein Reiter. */
.sticker-figur-schalter {
    background: none;
    border: 0;
    color: var(--akzent);
    cursor: pointer;
    font-size: 12px;
    padding: 4px 2px 10px;
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.sticker-figur-schalter:hover { color: var(--akzent-tief); }

/* Nur das Stueck, nie die Figur damit - der Rest ist die Ueberraschung. */
.toy-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(122px, 1fr));
    margin-top: 13px;
}
.toy-choice {
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--rundung);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px;
    text-align: left;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.toy-choice:hover { border-color: var(--gold); }
.toy-choice.selected {
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(201, 144, 85, .28);
}
/* Die Ablage ist eine beleuchtete Auslage und bleibt in beiden Farbschemata
   hell - absichtlich, nicht als Loch im dunklen Modus. Auf dunklem Grund
   verschwaende ein schwarzer Gegenstand bis auf die Naht, und genau die drei
   Stuecke unterscheiden sich nur in der Farbe der Kugel. Der Goldrahmen
   bindet die Flaeche an den Rest. */
.toy-choice-plate {
    align-items: center;
    background: radial-gradient(120% 90% at 50% 15%, #f2e5d4, #d8c2a6);
    border: 1px solid var(--gold-dunkel);
    border-radius: var(--rundung-klein);
    display: flex;
    height: 92px;
    justify-content: center;
    margin-bottom: 5px;
    overflow: hidden;
    width: 100%;
}
.toy-choice-plate img {
    height: 100%;
    object-fit: contain;
    padding: 8px;
    width: 100%;
}
.toy-choice b { font-size: 12.5px; }
.toy-choice small {
    color: var(--tinte-weich);
    font-size: 10.5px;
    line-height: 1.45;
}

.toy-duration { margin-top: 18px; }
.toy-duration-label {
    color: var(--tinte-weich);
    font-size: 11px;
    font-weight: 700;
}
.toy-duration-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 7px;
}
.toy-duration-row button {
    background: var(--weich);
    border: 1px solid transparent;
    border-radius: 11px;
    color: var(--tinte-weich);
    cursor: pointer;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    min-height: 40px;
    padding: 0 13px;
}
/* Gefuellt statt nur getoent: --akzent auf --flaeche steht im hellen Schema
   gut da, im dunklen sind beide Bordeaux und der Text verschwindet. */
.toy-duration-row button.selected {
    background: linear-gradient(160deg, var(--akzent-hell), var(--akzent-tief));
    border-color: var(--gold);
    color: var(--text-auf-leder);
    font-weight: 700;
}
.toy-duration small {
    color: var(--tinte-zart);
    display: block;
    font-size: 10.5px;
    line-height: 1.5;
    margin-top: 8px;
}

.toy-error {
    background: var(--rose-zart);
    border: 1px solid var(--rose);
    border-radius: var(--rundung-klein);
    color: var(--rose);
    font-size: 12px;
    margin: 14px 0 0;
    padding: 9px 12px;
}

.toy-actions {
    display: flex;
    gap: 9px;
    justify-content: flex-end;
    margin-top: 20px;
}
.toy-apply {
    background: linear-gradient(180deg, var(--akzent-hell), var(--akzent-tief));
    border: 1px solid var(--gold-dunkel);
    border-radius: 14px;
    box-shadow: var(--schatten-leder);
    color: var(--text-auf-leder);
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    min-height: 48px;
    padding: 0 26px;
}
.toy-apply:disabled { cursor: not-allowed; opacity: .5; }
/* Der Demo-Knopf sieht bewusst nicht aus wie eine echte Handlung. */
.toy-demo {
    background: transparent;
    border: 1px dashed var(--linie);
    border-radius: 14px;
    color: var(--tinte-zart);
    cursor: pointer;
    font-size: 12px;
    min-height: 48px;
    padding: 0 15px;
}

@media (max-width: 560px) {
    .toy-lock { gap: 9px; padding: 9px 12px; }
    .toy-lock img { height: 36px; width: 36px; }
    .toy-clock { font-size: 13px; padding: 5px 9px; }
    .toy-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
    .toy-choice-plate { height: 78px; }
    .toy-actions { flex-direction: column-reverse; }
    .toy-actions button { width: 100%; }
}

/* ---------------------------------------------------------------------------
   Nachträge aus der Durchsicht der Weboberfläche

   Fünf Stellen, die beim Bedienen auffielen: ein Beschlag ohne Funktion, eine
   Suche ohne Bezug zu ihrem Dialog, eine Chatspalte ohne Ausweg, und zwei
   Symbole, die nicht zeigten, was sie meinen.
   --------------------------------------------------------------------------- */

/* Der Griff gehört zur ausziehbaren Ablage am unteren Rand. Auf schmalen
   Geräten ist das Fach ein gewöhnlicher Dialog mit Kreuz - dort gibt es
   nichts zu ziehen. */
.sheet-handle { display: none; }

/* Die Suche im Stickerfach: ein Feld im Material des Dialogs statt eines
   grauen Kastens dazwischen. Die Lupe ist dieselbe Zeichnung wie in der
   Chatsuche - eine Suche soll überall gleich aussehen. */
.sticker-search-field {
    align-items: center;
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: 13px;
    display: flex;
    gap: 9px;
    margin: 0 0 12px;
    padding: 0 13px;
}

.sticker-search-field:focus-within {
    border-color: var(--akzent);
    box-shadow: 0 0 0 3px rgba(101, 39, 61, .10);
}

.sticker-search-field .search-glyph {
    border: 1.8px solid var(--tinte-zart);
    border-radius: 50%;
    flex: 0 0 auto;
    height: 13px;
    position: relative;
    width: 13px;
}

.sticker-search-field .search-glyph::after {
    background: var(--tinte-zart);
    content: "";
    height: 1.8px;
    position: absolute;
    right: -4px;
    top: 10px;
    transform: rotate(45deg);
    width: 6px;
}

.sticker-search-field input.sticker-search {
    background: transparent;
    border: 0;
    margin: 0;
    min-height: 44px;
    padding: 0;
}

.sticker-search-field input.sticker-search:focus { outline: 0; }

.theme-dark .sticker-search-field {
    background: var(--weich);
    border-color: var(--linie);
}

.theme-dark .sticker-search-field input.sticker-search { background: transparent; }

/* Die eingeklappte Chatspalte. Übrig bleibt ein schmaler Streifen mit dem
   Knopf, der sie zurückholt - ein Zustand ohne Ausweg wäre keiner. */
@media (min-width: 721px) {
    .app-shell { transition: grid-template-columns .22s ease; }

    .app-shell.list-collapsed,
    .app-shell.demo-mode.list-collapsed {
        grid-template-columns: 56px minmax(0, 1fr);
    }

    .list-collapsed .conversation-panel > *:not(.panel-header) { display: none; }

    .list-collapsed .panel-header {
        justify-content: center;
        padding: 14px 6px;
    }

    .list-collapsed .panel-brand,
    .list-collapsed .panel-header .header-actions > *:not(.list-toggle) {
        display: none;
    }

    .list-collapsed .panel-header .header-actions { gap: 0; }
}

.collapse-glyph { font-size: 19px; line-height: 1; }

/* Auf schmalen Geräten wechselt die Oberfläche ohnehin zwischen Liste und
   Gespräch; ein Einklappen hätte dort keine Bedeutung. */
@media (max-width: 720px) {
    .list-toggle { display: none; }
}

/* Das gezeichnete Stickersymbol steht auch dort, wo vorher ein großes Zeichen
   als Platzhalter saß. Es folgt der Schriftgröße, also genügt sie als Maß. */
.sticker-placeholder .tool-glyph { opacity: .55; }

.pack-glyph {
    align-items: center;
    color: var(--akzent);
    display: flex;
    flex: 0 0 auto;
    font-size: 22px;
    justify-content: center;
}


/* Wer Bewegung abbestellt hat, bekommt die Zustände sofort statt animiert. */
@media (prefers-reduced-motion: reduce) {
    .app-shell,
    .feature-scrim:has(.sticker-picker-card) .sticker-picker-card {
        transition: none;
    }
}

/* ---------------------------------------------------------------------------
   Zweite Durchsicht: Handlungen an der Nachricht

   Antworten und Reagieren sind die beiden häufigen Handlungen. Sie lagen
   hinter den drei Punkten, also hinter zwei Klicks und einem Blatt, das den
   halben Bildschirm belegt. Jetzt stehen sie an der Blase, sobald der Zeiger
   sie berührt - alles Seltenere bleibt, wo es war.
   --------------------------------------------------------------------------- */

.message-quick {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: 2px;
}

.quick-action {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 10px;
    color: #90887e;
    cursor: pointer;
    display: flex;
    font-size: 17px;
    height: 32px;
    justify-content: center;
    opacity: 0;
    padding: 0;
    transition: opacity .16s ease, background .16s ease, color .16s ease;
    width: 32px;
}

/* Sichtbar beim Überfahren, beim Tastaturfokus und solange die Reaktionsreihe
   an dieser Nachricht offen steht. */
.message-line:hover .quick-action,
.message-line:focus-within .quick-action,
.quick-action.active { opacity: 1; }

.quick-action:hover { background: var(--weich); color: var(--akzent); }
.quick-action.active { background: var(--akzent-zart); color: var(--akzent-tief); }
.message-actions-trigger { font-size: 15px; }

/* Die schnelle Reaktionsreihe sitzt unter der Blase, auf deren Seite. Sie ist
   absolut verankert: Ihr breiter Inhalt darf weder die Blase noch die daneben
   liegenden Aktionsknöpfe verschieben. Die Nachrichtenzeile reserviert nur den
   nötigen Platz nach unten. */
.message-line.has-quick-reactions { margin-bottom: 58px; }
.quick-reactions {
    align-items: center;
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: 999px;
    box-shadow: var(--schatten-zart);
    display: flex;
    flex-wrap: nowrap;
    gap: 2px;
    max-width: min(430px, calc(100vw - 60px));
    overflow-x: auto;
    padding: 3px 5px;
    position: absolute;
    scrollbar-width: none;
    top: calc(100% + 6px);
    width: max-content;
    z-index: 4;
}
.quick-reactions::-webkit-scrollbar { display: none; }
.incoming .quick-reactions { left: 0; }
.outgoing .quick-reactions { right: 0; }

.quick-reactions button {
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    font-size: 19px;
    height: 34px;
    line-height: 1;
    padding: 0;
    transition: background .12s ease, transform .1s ease;
    width: 34px;
}

.quick-reactions button:hover { background: var(--weich); transform: scale(1.14); }
.quick-reactions button.own { background: var(--akzent-zart); }
.quick-reactions .quick-more {
    color: var(--akzent);
    font-size: 20px;
    font-weight: 700;
}

.theme-dark .quick-reactions { background: var(--flaeche); border-color: var(--linie); }

/* Auf Zeigergeräten ohne Überfahren - also am Finger - bleiben die Knöpfe
   sichtbar; sonst wären sie dort gar nicht erreichbar. */
@media (hover: none) {
    .quick-action { opacity: .72; }
}

@media (max-width: 720px) {
    .quick-action { height: 30px; width: 30px; }
    .quick-reactions button { font-size: 17px; height: 32px; width: 32px; }
}

/* Der Winkel im Einklappknopf ist jetzt gezeichnet statt gesetzt: Das
   Schriftzeichen ‹ sitzt in seiner Zelle links und wirkte dadurch verrutscht. */
.collapse-glyph {
    align-items: center;
    display: flex;
    font-size: 21px;
    justify-content: center;
}

.collapse-glyph.is-open { transform: rotate(180deg); }

/* ---------------------------------------------------------------------------
   PIN statt Passphrase

   Vier oder sechs Ziffern statt zwölf Zeichen. Die Eingabe soll danach
   aussehen: wenige, große, gleichmäßig gesetzte Zeichen - nicht wie ein
   Passwortfeld, in das jemand einen Satz tippt.
   --------------------------------------------------------------------------- */

.pin-length {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 20px;
}

.pin-length button {
    background: transparent;
    border: 1px solid var(--linie);
    border-radius: 999px;
    color: var(--tinte-weich);
    cursor: pointer;
    font-size: 12px;
    font-weight: 650;
    min-height: 38px;
    padding: 0 18px;
}

.pin-length button.selected {
    background: var(--akzent-zart);
    border-color: var(--akzent);
    color: var(--akzent-tief);
}

.lock-card .pin-length button {
    border-color: rgba(201, 144, 85, .45);
    color: var(--gold-dunkel);
}

.lock-card .pin-length button.selected {
    background: rgba(201, 144, 85, .22);
    border-color: var(--gold);
    color: var(--gold);
}

input.pin-input {
    font-size: 26px;
    letter-spacing: .38em;
    text-align: center;
}

input.pin-input::placeholder { letter-spacing: .38em; opacity: .5; }

/* Die Wartezeit nach zu vielen Fehlversuchen. Sie steht da, weil eine
   Schaltfläche, die nur wieder abweist, keine Auskunft ist. */
.lock-wait {
    color: var(--gold);
    font-size: 12px;
    margin-top: 14px;
    text-align: center;
}

.lock-wait b { color: var(--gold-auf-leder); }

.pin-hint { margin-top: 16px; }

.lock-secondary {
    background: transparent;
    border: 1px solid rgba(201, 144, 85, .45);
    border-radius: 999px;
    color: var(--gold-dunkel);
    cursor: pointer;
    font-size: 12px;
    margin-top: 10px;
    min-height: 40px;
    padding: 0 18px;
    width: 100%;
}

.lock-secondary:hover { border-color: var(--gold); color: var(--gold); }

.lock-confirm {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(201, 144, 85, .35);
    border-radius: 14px;
    margin-top: 12px;
    padding: 13px;
}

.lock-confirm p {
    color: var(--gold-dunkel);
    font-size: 12px;
    margin: 0 0 10px;
}

/* Verwerfen steht weder in der Bestätigungskarte noch auf dem Serverblatt,
   deshalb bekommt die Schaltfläche hier ihre eigene rote Fassung. Ohne sie
   blieb sie im Browserstandard stehen – neben dem gefüllten Abbrechen sah
   das aus wie ein Fehler in der Seite. */
.lock-confirm .danger-action {
    background: var(--rose);
    border: 0;
    border-radius: 13px;
    color: white;
    cursor: pointer;
    font-weight: 700;
    min-height: 44px;
    padding: 0 16px;
}

.lock-confirm .danger-action:disabled {
    cursor: not-allowed;
    opacity: .55;
}


/* --------------------------------------------------------------- Suche
   Die Treffer der Suche stehen unter der Gesprächsliste. Farben kommen
   ausschließlich aus den Variablen, damit das dunkle Schema mitgeht. */

.search-results {
    border-top: 1px solid var(--linie);
    margin-top: 6px;
    padding: 10px 12px 4px;
}
.search-results h3 {
    align-items: baseline;
    color: var(--tinte-weich);
    display: flex;
    font-size: 10.5px;
    gap: 8px;
    letter-spacing: .1em;
    margin: 0 0 6px;
    text-transform: uppercase;
}
.search-results h3 small {
    color: var(--tinte-zart);
    letter-spacing: 0;
    text-transform: none;
}
.search-empty { color: var(--tinte-zart); font-size: 11.5px; margin: 4px 0 8px; }
.search-group { margin-bottom: 10px; }
.search-group h4 {
    align-items: center;
    display: flex;
    font-size: 12px;
    gap: 7px;
    margin: 0 0 4px;
}
.search-group h4 small { color: var(--tinte-zart); font-size: 10px; font-weight: 400; }
.search-hit {
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: 13px;
    cursor: pointer;
    display: block;
    margin-bottom: 5px;
    padding: 8px 10px;
    text-align: left;
    width: 100%;
}
.search-hit:hover { border-color: var(--gold); }
.search-hit time { color: var(--tinte-zart); display: block; font-size: 10px; }
.search-snippet {
    color: var(--tinte);
    display: block;
    font-size: 12px;
    line-height: 1.45;
    margin-top: 2px;
    overflow: hidden;
}
.search-snippet mark {
    background: rgba(201, 144, 85, .3);
    border-radius: 3px;
    color: inherit;
    font-weight: 700;
    padding: 0 1px;
}

/* ------------------------------------------------------------ Chatsuche
   Eine Zeile unter dem Kopf des offenen Chats. Die Trefferliste legt sich
   über den Verlauf, statt ihn nach unten zu schieben. */

.chat-search {
    align-items: center;
    background: var(--flaeche);
    border-bottom: 1px solid var(--linie);
    display: flex;
    flex: 0 0 auto;
    gap: 4px;
    padding: 8px clamp(12px, 3vw, 28px);
    position: relative;
    z-index: 6;
}
.chat-search-field {
    align-items: center;
    background: var(--flaeche-warm);
    border: 1px solid var(--linie);
    border-radius: 999px;
    color: var(--tinte-weich);
    display: flex;
    flex: 1;
    gap: 8px;
    min-width: 0;
    padding: 0 12px;
}
.chat-search-field:focus-within {
    border-color: var(--akzent);
    box-shadow: 0 0 0 2px var(--akzent-zart);
}
/* Den Fokus zeigt der Rand des Feldes; ein zweiter Rahmen ums innere
   Eingabefeld zeichnete doppelt. */
.chat-search .chat-search-field input:focus,
.chat-search .chat-search-field input:focus-visible {
    background: transparent;
    box-shadow: none;
    outline: none;
}
.chat-search-field input {
    background: transparent;
    border: 0;
    color: var(--tinte);
    flex: 1;
    font: inherit;
    font-size: 14px;
    height: 38px;
    min-width: 0;
    outline: none;
}
.chat-search-field input::placeholder { color: var(--tinte-zart); }
.chat-search-count {
    color: var(--tinte-weich);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    min-width: 5.5em;
    text-align: center;
    white-space: nowrap;
}
.chat-search-step {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 50%;
    color: var(--tinte-weich);
    cursor: pointer;
    display: flex;
    flex: 0 0 auto;
    font-size: 18px;
    height: 36px;
    justify-content: center;
    width: 36px;
}
.chat-search-step:hover:not(:disabled) { background: var(--weich); color: var(--akzent); }
.chat-search-step:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
.chat-search-step:disabled { cursor: default; opacity: .35; }
.chat-search-list {
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: 16px;
    box-shadow: var(--schatten-zart);
    left: clamp(12px, 3vw, 28px);
    max-height: min(52vh, 460px);
    overflow-y: auto;
    padding: 8px;
    position: absolute;
    right: clamp(12px, 3vw, 28px);
    top: calc(100% + 4px);
}
.chat-search-list .search-hit.is-current { border-color: var(--akzent); }
/* Umrandet statt eingefärbt: Die Blasenfarbe sagt schon, wer schrieb. */
.app-shell .message-line.is-search-hit .message-bubble,
.app-shell .message-line.is-search-hit .media-message {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}
.web-vnext .thread-actions .icon-button.is-active {
    border-color: var(--akzent);
    box-shadow: inset 0 0 0 1px var(--akzent);
}
.web-vnext.theme-dark .chat-search {
    background: color-mix(in srgb, var(--flaeche) 94%, transparent);
}
.web-vnext.theme-dark .chat-search-field:focus-within,
.web-vnext.theme-dark .chat-search-list .search-hit.is-current {
    border-color: var(--gold-dunkel);
}
.web-vnext.theme-dark .thread-actions .icon-button.is-active {
    border-color: var(--gold-dunkel);
    box-shadow: inset 0 0 0 1px var(--gold-dunkel);
}
.web-vnext.theme-dark .chat-search-step:hover:not(:disabled) { color: var(--gold-hell); }

/* --------------------------------------------------- Großes Eingabefeld
   Ohne Vergrößerung wächst das Feld mit dem Text bis zur alten Obergrenze,
   wo der Browser field-sizing kennt; sonst bleibt es wie bisher. Vergrößert
   steht es fest auf gut halber Höhe, die Werkzeuge sitzen unten. */
.message-composer textarea { field-sizing: content; }
/* Den Fokus zeigt die Pille (.composer-row:focus-within). Der allgemeine
   Rahmen aus appearance.css zeichnete innen ein zweites Rechteck - im großen
   Feld über die halbe Höhe. */
.message-composer .composer-row textarea:focus-visible {
    box-shadow: none;
    outline: none;
}
/* Vergrößert bekommt das Feld die ganze Breite der Pille, die Werkzeuge eine
   Zeile darunter. Neben einer halbhohen Schreibfläche ließen sie links eine
   leere Spalte stehen - auf dem Handy blieb dem Text kaum ein Drittel. */
.message-composer.is-expanded .composer-row { flex-wrap: wrap; }
.web-vnext .message-composer.is-expanded .composer-row { border-radius: 18px; }
.message-composer.is-expanded .composer-row textarea {
    field-sizing: fixed;
    flex: 1 0 100%;
    height: min(42vh, 440px);
    height: min(42dvh, 440px);
    max-height: none;
    order: -1;
}
/* Mit offener Emoji-Auswahl teilen sich beide den Fuß; sonst drückte das
   Feld den Verlauf ganz hinaus. */
.message-composer.is-expanded:has(.emoji-palette) .composer-row textarea {
    height: min(22vh, 200px);
    height: min(22dvh, 200px);
}



/* ------------------------------------------------------------- Der Pranger */

/* Anders gebaut als `.toy-notice`, und zwar absichtlich: Dort ist das Bild ein
   Beleg von 30 Punkten am Rand, hier ist es der Spott und damit die Sache
   selbst. Es steht deshalb oben in voller Breite, im Seitenverhaeltnis der
   Vorlage (3:2), und der Text darunter. */
.pranger-notice {
    align-self: center;
    background: var(--flaeche-warm);
    border: 1px solid var(--gold);
    border-radius: var(--rundung);
    box-shadow: var(--schatten-zart);
    margin: 14px auto;
    max-width: min(320px, 94%);
    overflow: hidden;
    width: fit-content;
}
.pranger-notice img {
    aspect-ratio: 3 / 2;
    display: block;
    object-fit: cover;
    width: 100%;
}
.pranger-notice p {
    color: var(--tinte-weich);
    font-size: 11.5px;
    line-height: 1.45;
    margin: 0;
    padding: 8px 12px 9px;
}
.pranger-notice b { color: var(--tinte); display: block; font-size: 12px; }
/* Der Grund ist Nutzertext. Kursiv und in Anfuehrungszeichen, damit er nie wie
   ein Satz der App aussieht - der Unterschied traegt hier die ganze Last. */
.pranger-notice q {
    color: var(--tinte);
    display: block;
    font-style: italic;
    margin: 2px 0 1px;
}
.pranger-notice small { display: block; font-size: 10.5px; }
.pranger-notice time {
    color: var(--tinte-zart);
    display: block;
    font-size: 10px;
    margin-top: 3px;
}

/* Der Wurf bekommt kein Bild: Bei zehn Wuerfen staende sonst zehnmal dasselbe
   Bild im Verlauf. Dieselbe schmale Form traegt auch die Befreiung. */
.wurf-notice {
    align-self: center;
    background: var(--flaeche-warm);
    border: 1px solid var(--linie);
    border-radius: 999px;
    margin: 6px auto;
    max-width: min(400px, 94%);
    padding: 5px 14px 6px;
    width: fit-content;
}
.wurf-notice p {
    color: var(--tinte-weich);
    font-size: 11px;
    line-height: 1.4;
    margin: 0;
    text-align: center;
}
.wurf-notice b { color: var(--tinte); display: block; font-size: 11.5px; }
.wurf-notice small { display: block; font-size: 10px; }
.wurf-notice time { color: var(--tinte-zart); font-size: 10px; }
/* Die Befreiung ist die gute Nachricht - Gold statt der stillen Linie. */
.wurf-notice.is-frei { border-color: var(--gold); }

/* Die Karte ueber dem Eingabefeld, wie beim Atelier. */
.pranger-lock {
    align-items: center;
    background: var(--flaeche-warm);
    border: 1px solid var(--gold);
    border-radius: var(--rundung);
    display: flex;
    gap: 10px;
    margin-bottom: 8px;
    padding: 8px 12px 8px 8px;
}
.pranger-lock img {
    border: 1px solid var(--gold);
    border-radius: 8px;
    flex: 0 0 auto;
    height: 44px;
    object-fit: cover;
    width: 66px;
}
.pranger-lock p {
    color: var(--tinte-weich);
    flex: 1 1 auto;
    font-size: 11px;
    line-height: 1.4;
    margin: 0;
}
.pranger-lock b { color: var(--tinte); display: block; font-size: 12px; }
.pranger-lock small { display: block; font-size: 10.5px; }

/* Der Obstkorb steht in derselben Karte: Er ist der einzige Weg, die Strafe zu
   verlaengern, und gehoert dorthin, wo sie steht - nicht in ein Menue. */
.obst-werfen {
    background: var(--flaeche);
    border: 1px solid var(--gold);
    border-radius: 50%;
    cursor: pointer;
    flex: 0 0 auto;
    font-size: 18px;
    height: 38px;
    line-height: 1;
    width: 38px;
}
.obst-werfen:hover:not(:disabled) { background: var(--flaeche-warm); }
.obst-werfen:disabled { cursor: default; opacity: .5; }

/* Das Siegel am Kopfbild - wie `.toy-seal`, nur in Bordeaux statt Akzent. */
.pranger-seal {
    align-items: center;
    background: linear-gradient(160deg, #7d1f2e, #3d0d15);
    border: 1px solid var(--gold);
    border-radius: 50%;
    bottom: -1px;
    color: var(--gold-hell);
    display: flex;
    font-size: 8px;
    height: 15px;
    justify-content: center;
    position: absolute;
    right: -1px;
    width: 15px;
}
/* Nach der Freilassung derselbe Platz, andere Farbe: Es ist vorbei. */
.pranger-seal.is-frei {
    background: linear-gradient(160deg, #4a3a12, #241c08);
}

/* Die Knoepfe in den Systemmeldungen.

   Sie stehen dort und nicht nur ueber dem Eingabefeld, weil die Handlung zum
   Ereignis gehoert: Der Obstkorb neben das Bild, auf das geworfen wird, und
   das Loesen neben die Meldung, die das Anlegen berichtet. Ueber dem
   Eingabefeld sieht den Loesen-Knopf ohnehin nur, wer traegt - und der ist der
   Falsche dafuer. */
.toy-notice { flex-wrap: wrap; }
.toy-loesen,
.obst-werfen.im-verlauf {
    background: var(--flaeche);
    border: 1px solid var(--gold);
    border-radius: 999px;
    color: var(--tinte);
    cursor: pointer;
    font-size: 11px;
    padding: 4px 12px 5px;
    white-space: nowrap;
}
.toy-loesen:hover:not(:disabled),
.obst-werfen.im-verlauf:hover:not(:disabled) { background: var(--flaeche-warm); }
.toy-loesen:disabled,
.obst-werfen.im-verlauf:disabled { cursor: default; opacity: .5; }
/* In der Prangermeldung sitzt er unter dem Text, nicht daneben: Die Karte ist
   schmal, und ein Knopf in der Zeile draengte das Zitat auf zwei Zeilen. */
.obst-werfen.im-verlauf {
    display: block;
    height: auto;
    margin: 0 12px 10px;
    width: auto;
}
/* Korb und Schluessel nebeneinander, nicht untereinander: Beide Gesten gehoeren
   demselben Augenblick, und uebereinander gestellt sähe die obere aus wie die
   naheliegende. Die Wahl zwischen Spott und Milde soll offen daliegen. */
.pranger-handlungen {
    display: flex;
    gap: 6px;
    margin: 0 12px 10px;
}
.pranger-handlungen .obst-werfen.im-verlauf { margin: 0; }

/* ---------------------------------------------------------------------------
   Web vNext · Fokusraum

   Der neue Rahmen folgt dem ausgewaehlten Desktop-Entwurf. Die Fachlogik der
   bisherigen Komponenten bleibt erhalten; diese Schicht ordnet sie zu einer
   einzigen responsiven Anwendung statt zu drei losen Karten im Seitenraum.
   --------------------------------------------------------------------------- */

.web-vnext,
.web-vnext button,
.web-vnext input,
.web-vnext textarea,
.web-vnext select,
.atelier-picker-scrim button,
.atelier-picker-scrim input {
    font-family: "Segoe UI", Inter, Arial, sans-serif;
}

.web-vnext.app-shell {
    background: #f9f0e4;
    display: grid;
    gap: 0;
    grid-template-columns: 292px minmax(0, 1fr);
    grid-template-rows: 76px minmax(0, 1fr);
    height: 100dvh;
    padding: 0;
}

.web-vnext .global-header {
    align-items: stretch;
    background-color: #32161f;
    background-image:
        radial-gradient(circle at 12% 30%, rgba(255, 221, 157, .05), transparent 22%),
        linear-gradient(90deg, #2b121b, #421b27 48%, #2b121b);
    border-bottom: 1px solid #7a492e;
    box-shadow: 0 3px 12px rgba(31, 12, 17, .28);
    color: var(--gold-auf-leder);
    display: flex;
    grid-column: 1 / -1;
    grid-row: 1;
    min-width: 0;
    padding: 0 24px 0 30px;
    position: relative;
    z-index: 20;
}

.web-vnext .global-brand {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--gold-auf-leder);
    cursor: pointer;
    display: flex;
    flex: 0 0 270px;
    gap: 15px;
    padding: 0;
    text-align: left;
}

.web-vnext .global-brand strong {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 29px;
    font-weight: 650;
    letter-spacing: -.025em;
}
.web-vnext .global-brand > .ph { font-size: 35px; }
.web-vnext .global-nav .ph { font-size: 21px; }
.web-vnext .global-icon-button .ph { font-size: 21px; }

.brand-symbol {
    border: 2px solid currentColor;
    border-radius: 8px 8px 8px 3px;
    display: block;
    height: 34px;
    position: relative;
    width: 39px;
}
.brand-symbol::after {
    border-bottom: 2px solid currentColor;
    border-left: 2px solid currentColor;
    bottom: -7px;
    content: "";
    height: 10px;
    left: 5px;
    position: absolute;
    transform: skew(-25deg);
    width: 10px;
}
.brand-symbol span {
    border: 2px solid currentColor;
    border-radius: 50%;
    height: 10px;
    left: 12px;
    position: absolute;
    top: 8px;
    width: 10px;
}

.web-vnext .global-nav {
    align-items: stretch;
    display: flex;
    gap: 8px;
}
.web-vnext .global-nav button {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 13px 13px 0 0;
    color: #e9bd68;
    cursor: pointer;
    display: flex;
    font-size: 15px;
    gap: 11px;
    min-width: 118px;
    padding: 0 22px;
    position: relative;
}
.web-vnext .global-nav button:hover { background: rgba(255, 244, 218, .06); }
.web-vnext .global-nav button.active {
    background: rgba(15, 5, 9, .30);
    box-shadow: inset 0 0 0 1px rgba(231, 178, 91, .12);
    color: #ffd986;
}
.web-vnext .global-nav button.active::after {
    background: #e9af4f;
    bottom: 7px;
    content: "";
    height: 2px;
    left: 22px;
    position: absolute;
    right: 22px;
}

.nav-icon { color: currentColor; display: inline-block; flex: 0 0 auto; position: relative; }
.nav-chat { border: 2px solid currentColor; border-radius: 6px; height: 18px; width: 21px; }
.nav-chat::after {
    border-bottom: 2px solid currentColor;
    border-left: 2px solid currentColor;
    bottom: -5px;
    content: "";
    height: 7px;
    left: 3px;
    position: absolute;
    transform: skew(-28deg);
    width: 7px;
}
.nav-sticker { border: 2px solid currentColor; border-radius: 3px 8px 8px 8px; height: 20px; width: 20px; }
.nav-sticker::after { border: 1.5px solid currentColor; border-radius: 50%; content: ""; height: 5px; left: 5px; position: absolute; top: 5px; width: 5px; }
.nav-training { border-left: 3px solid currentColor; border-right: 3px solid currentColor; height: 19px; width: 25px; }
.nav-training::after { background: currentColor; content: ""; height: 3px; left: 2px; position: absolute; top: 8px; width: 15px; }
.nav-training::before { border-left: 3px solid currentColor; border-right: 3px solid currentColor; content: ""; height: 13px; left: 3px; position: absolute; top: 3px; width: 13px; }
.nav-settings { border: 2px dotted currentColor; border-radius: 50%; height: 21px; width: 21px; }
.nav-settings::after { border: 2px solid currentColor; border-radius: 50%; content: ""; height: 5px; left: 6px; position: absolute; top: 6px; width: 5px; }

.web-vnext .global-actions {
    align-items: center;
    display: flex;
    gap: 12px;
    margin-left: auto;
}
.global-demo {
    border: 1px solid rgba(238, 190, 100, .45);
    border-radius: 999px;
    color: #f3cb79;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .11em;
    padding: 5px 10px;
    text-transform: uppercase;
}
.web-vnext .global-icon-button,
.web-vnext .profile-chevron {
    align-items: center;
    background: transparent;
    border: 0;
    color: #e9bd68;
    cursor: pointer;
    display: flex;
    height: 40px;
    justify-content: center;
    width: 40px;
}
.web-vnext .avatar-button {
    background: #ead5bd;
    border: 1px solid #ca9a61;
    height: 42px;
    width: 42px;
}
.profile-chevron { width: 28px !important; }
.profile-chevron span { border-bottom: 1.5px solid currentColor; border-right: 1.5px solid currentColor; height: 7px; transform: rotate(45deg) translateY(-2px); width: 7px; }

.web-vnext .demo-badge { display: none; }
.web-vnext .conversation-panel {
    background: rgba(255, 248, 238, .96);
    border: 0;
    border-radius: 0;
    border-right: 1px solid #dfc8ad;
    box-shadow: none;
    grid-column: 1;
    grid-row: 2;
}
@media (min-width: 800px) {
    .web-vnext.app-shell.list-collapsed {
        grid-template-columns: 56px minmax(0, 1fr);
    }
    .web-vnext.list-collapsed .panel-header {
        justify-content: center;
        padding: 10px 6px;
    }
    .web-vnext.list-collapsed .panel-header .header-actions {
        justify-content: center;
        width: 100%;
    }
}
.web-vnext .panel-header {
    justify-content: flex-end;
    min-height: 61px;
    padding: 10px 16px;
}
.web-vnext .panel-brand { display: none; }
.web-vnext .panel-header .header-actions > *:not(.list-toggle) { display: none; }
.web-vnext .list-toggle {
    background: #fff8ef;
    border-color: #dcc3a6;
    border-radius: 9px;
    height: 34px;
    width: 34px;
}
.web-vnext .new-chat-button,
.web-vnext .session-banner,
.web-vnext .privacy-entry { display: none; }
.web-vnext .search-box {
    background: #fffaf3;
    border-color: #e0ccb4;
    border-radius: 12px;
    margin: 0 14px 12px;
}
.web-vnext .search-box input { font-size: 13px; height: 44px; }
.web-vnext .search-box kbd { display: none; }
.web-vnext .conversation-list { padding: 0 11px 12px; }
.web-vnext .conversation-row {
    border-bottom: 1px solid #eadbc8;
    border-radius: 12px;
    gap: 11px;
    min-height: 72px;
    padding: 9px 8px;
}
.web-vnext .conversation-row.selected { background: #f2e5d8; border-color: #d5b08d; }
.web-vnext .conversation-avatar { border-color: #c99868; height: 49px; width: 49px; }
.web-vnext .conversation-meta b { color: #27191c; font-size: 14px; }
.web-vnext .conversation-preview { font-size: 11px; }
.web-vnext .panel-footer { padding: 12px 14px 16px; }
.web-vnext .trust-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    color: #6a273a;
    padding: 10px 5px;
}
.web-vnext .trust-card b { color: #6a273a; font-size: 12px; }
.web-vnext .trust-card small { color: #8d756a; font-size: 10px; }

.web-vnext .thread-panel {
    background-color: #fff8ed;
    background-image: url("../design/atelier-soft/chat-collar-paper.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    grid-column: 2;
    grid-row: 2;
}
.web-vnext .thread-header {
    background: rgba(255, 250, 242, .94);
    border-bottom: 1px solid #e3cfb6;
    min-height: 86px;
    padding: 12px 28px;
}
.web-vnext .thread-avatar { border-color: #c99868; height: 52px; width: 52px; }
.web-vnext .thread-header h2 {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 27px;
    font-weight: 650;
}
.web-vnext .thread-header p { color: #6f3345; font-size: 11px; }
.web-vnext .thread-header > .thread-actions {
    flex: 0 0 auto;
    margin-left: auto;
    min-width: auto;
}
.web-vnext .thread-actions .icon-button {
    background: #f5e8d9;
    border: 1px solid #ddc4a6;
    border-radius: 50%;
    color: #70213a;
    font-size: 21px;
    height: 42px;
    transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
    width: 42px;
}
.web-vnext .thread-actions .icon-button:hover {
    background: #ecdbc8;
    border-color: #bb8d74;
    transform: translateY(-1px);
}
.web-vnext .thread-actions .icon-button:focus-visible {
    outline: 2px solid #70213a;
    outline-offset: 2px;
}
.web-vnext .message-stage { background: rgba(255, 249, 239, .16); }
.web-vnext .stage-inner {
    margin: 0 auto;
    max-width: 920px;
    padding: 22px 34px 44px;
}
.web-vnext .message-stack { max-width: min(74%, 600px); }
.web-vnext .message-bubble { border-color: #d9c7b2; }
.web-vnext .outgoing .message-bubble { background: #e8eadc; border-color: #bdc2aa; }
.message-bubble.emoji-only p {
    font-size: 2rem;
    line-height: 1.15;
    overflow-wrap: normal;
}
.web-vnext .message-composer {
    background: rgba(255, 249, 240, .94);
    border-top: 0;
    padding: 12px clamp(24px, 7vw, 108px) 16px;
}
.web-vnext .composer-row {
    background: #fffdf8;
    border: 1px solid #dec7aa;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(61, 31, 35, .08);
    min-height: 58px;
    padding: 6px 8px 6px 10px;
}
.web-vnext .composer-row textarea { font-size: 14px; padding: 12px 8px; }
.web-vnext .composer-tool { border-radius: 50%; height: 44px; width: 44px; }
.web-vnext .send-button { background: #711f38; border-radius: 50%; height: 48px; width: 48px; }
.web-vnext .migration-hint { display: none; }

/* Hauptarbeitsbereiche */
.workspace-area {
    background: #fff8ed;
    grid-column: 1 / -1;
    grid-row: 2;
    min-height: 0;
    overflow: auto;
    padding: 42px clamp(28px, 5vw, 78px) 64px;
}
.workspace-heading { align-items: flex-end; display: flex; gap: 28px; justify-content: space-between; margin: 0 auto 26px; max-width: 1240px; }
.workspace-heading h1 {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(38px, 4vw, 56px);
    line-height: 1;
    margin: 7px 0 10px;
}
.workspace-heading p { color: var(--tinte-weich); font-size: 14px; margin: 0; }
.workspace-primary {
    background: #70213a !important;
    border: 1px solid #511228 !important;
    border-radius: 12px !important;
    color: white !important;
    cursor: pointer;
    font-weight: 650;
    min-height: 46px;
    padding: 0 22px !important;
}
.workspace-tabs { border-bottom: 1px solid #ddc5a8; display: flex; gap: 30px; margin: 0 auto 20px; max-width: 1240px; }
.workspace-tabs button { background: transparent; border: 0; border-bottom: 3px solid transparent; color: #755e57; cursor: pointer; font-weight: 600; min-height: 47px; padding: 0 3px; }
.workspace-tabs button.active { border-bottom-color: #76213c; color: #76213c; }
.workspace-search { align-items: center; background: #fffdf8; border: 1px solid #ddc5a8; border-radius: 12px; display: flex; margin: 0 auto 24px; max-width: 1240px; padding: 0 16px; }
.workspace-search input { background: transparent; border: 0; flex: 1; font-size: 14px; min-height: 48px; outline: 0; padding-left: 12px; }
.workspace-sticker-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)); margin: 0 auto; max-width: 1240px; }

/* Stickerbereich. Die Motive sind hier der Inhalt: Jede Packkarte bekommt ein
   großes Titelbild aus bis zu vier Motiven. Bis zum 14.09.2026 steckten sie als
   34-Pixel-Kacheln neben dem Titel und waren kaum zu erkennen. Alle Farben
   hängen an den Token aus appearance.css, damit das dunkle Schema mitgeht. */
.sticker-hero > div { min-width: 0; }
.sticker-stats { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 16px 0 0; padding: 0; }
.sticker-stats li {
    align-items: baseline;
    background: var(--flaeche);
    border: 1px solid var(--linie-zart);
    border-radius: 999px;
    color: var(--tinte-weich);
    display: inline-flex;
    font-size: 12px;
    gap: 5px;
    padding: 5px 12px;
}
.sticker-stats b { color: var(--tinte); font-size: 14px; font-weight: 700; }
.sticker-workspace .workspace-primary { align-items: center; display: inline-flex; gap: 8px; justify-content: center; }
.sticker-workspace .workspace-primary .ph { font-size: 18px; }

.sticker-workspace-bar { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; margin: 0 auto 24px; max-width: 1240px; }
.sticker-workspace-bar .workspace-tabs { flex: 0 0 auto; margin: 0; max-width: 100%; }
.sticker-workspace-bar .workspace-search { flex: 1 1 240px; margin: 0; max-width: none; }
.sticker-bar-actions { display: flex; flex: 0 0 auto; gap: 8px; margin-left: auto; }
.sticker-bar-actions button {
    align-items: center;
    border: 1px solid var(--linie);
    border-radius: 12px;
    cursor: pointer;
    display: inline-flex;
    font: 650 13px var(--ui-font);
    gap: 7px;
    justify-content: center;
    min-height: 46px;
    padding: 0 16px;
    white-space: nowrap;
}
.sticker-bar-actions .ph { font-size: 17px; }
.sticker-sort-toggle { background: var(--flaeche); color: var(--tinte-weich); }
.sticker-sort-toggle:hover:not(:disabled) { border-color: var(--tinte-zart); color: var(--tinte); }
.sticker-sort-toggle[aria-pressed="true"] { background: var(--akzent-zart); border-color: var(--ui-accent-text); color: var(--ui-accent-text); }
.sticker-sort-toggle:disabled { cursor: default; opacity: .5; }
.sticker-new-pack { background: var(--akzent); border-color: var(--akzent-tief) !important; color: #fff; }
.sticker-new-pack:hover { background: var(--akzent-tief); }

.sticker-workspace .pack-browser {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 232px), 1fr));
    margin: 0 auto;
    max-width: 1240px;
}
.pack-card {
    background: var(--flaeche);
    border: 1px solid var(--linie-zart);
    border-radius: 18px;
    box-shadow: var(--schatten-zart);
    color: var(--tinte);
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.pack-card:hover { border-color: var(--linie); box-shadow: var(--schatten); transform: translateY(-2px); }
.pack-browser.is-sorting .pack-card:hover { transform: none; }
.pack-open {
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    padding: 10px 10px 0;
    position: relative;
    text-align: left;
}
.pack-open:focus-visible { border-radius: 17px; outline: 2px solid var(--ui-focus); outline-offset: -3px; }
/* Wie viele Motive das Titelbild hat, bestimmt die Aufteilung: Ein einzelnes
   füllt die Fläche, bei dreien steht das erste über zwei Zeilen. */
.pack-art {
    aspect-ratio: 1;
    background: var(--flaeche-warm);
    border-radius: 13px;
    color: var(--ui-accent-text);
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    padding: 10px;
    width: 100%;
}
.pack-art img {
    display: block;
    height: 100%;
    min-height: 0;
    min-width: 0;
    object-fit: contain;
    transition: transform .25s ease;
    width: 100%;
}
.pack-card:hover .pack-art img { transform: scale(1.05); }
.pack-art[data-anzahl="0"],
.pack-art[data-anzahl="1"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); place-items: center; }
.pack-art[data-anzahl="2"] { grid-template-rows: minmax(0, 1fr); }
.pack-art[data-anzahl="3"] img:first-child { grid-row: span 2; }
.pack-art > .ph { font-size: 46px; opacity: .6; }
.pack-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 6px 14px; }
.pack-meta b {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    font: 650 15px/1.3 var(--ui-font);
    overflow: hidden;
}
.pack-meta small { color: var(--tinte-weich); font-size: 12px; }
.pack-badge {
    align-items: center;
    background: var(--flaeche);
    border: 1px solid var(--linie-zart);
    border-radius: 999px;
    box-shadow: var(--schatten-zart);
    color: var(--ui-accent-text);
    display: inline-flex;
    font: 650 11px var(--ui-font);
    gap: 5px;
    left: 18px;
    padding: 4px 10px;
    position: absolute;
    top: 18px;
}
.pack-card.is-locked .pack-badge { color: var(--tinte-weich); }
/* Die Reihenfolgeknöpfe erscheinen nur im Sortiermodus als Leiste unter der
   Karte. Dauerhaft sichtbar nahmen sie jeder Karte ein Viertel ihrer Breite. */
.pack-order-actions { align-items: center; border-top: 1px solid var(--linie-zart); display: flex; gap: 8px; justify-content: space-between; padding: 8px 10px; }
.pack-order-actions span { color: var(--tinte-weich); font-size: 12px; font-weight: 600; }
.pack-order-actions button { align-items: center; border: 1px solid var(--linie); border-radius: 10px; cursor: pointer; display: flex; font-size: 17px; height: 38px; justify-content: center; width: 46px; }
.pack-order-actions button:disabled { cursor: default; opacity: .35; }
.pack-heart {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 50%;
    color: #77213c;
    cursor: pointer;
    display: flex;
    flex: 0 0 auto;
    font-size: 24px;
    height: 44px;
    justify-content: center;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    width: 44px;
}
.pack-heart:hover {
    background: #f4e7d8;
    border-color: #d9bea0;
}
.pack-heart.active {
    background: #77213c;
    border-color: #77213c;
    color: #fff8ec;
}
.pack-heart:focus-visible {
    outline: 2px solid #77213c;
    outline-offset: 2px;
}
.workspace-empty { align-items: center; color: #806a60; display: flex; flex-direction: column; grid-column: 1 / -1; justify-content: center; min-height: 340px; text-align: center; }
.workspace-empty > .nav-icon { color: #7a2942; transform: scale(1.8); }
.workspace-empty > .ph { color: #7a2942; font-size: 38px; }
.workspace-empty h2 { color: var(--tinte); font-family: "Cormorant Garamond", Georgia, serif; font-size: 30px; margin: 30px 0 8px; }
.workspace-empty p { max-width: 480px; }
.workspace-sticker-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); }
.workspace-sticker { background: var(--flaeche); border: 1px solid var(--linie-zart); border-radius: 16px; color: inherit; cursor: pointer; min-width: 0; padding: 8px; transition: border-color .18s ease, box-shadow .18s ease; }
.workspace-sticker:hover { border-color: var(--linie); box-shadow: var(--schatten); }
.workspace-sticker img { aspect-ratio: 1; background: var(--flaeche-warm); border-radius: 12px; display: block; height: auto; object-fit: contain; padding: 10px; width: 100%; }
.workspace-sticker small { display: block; font-size: 13px; font-weight: 600; overflow: hidden; padding: 8px 4px 2px; text-overflow: ellipsis; white-space: nowrap; }

.sticker-manager-toolbar {
    align-items: center;
    display: flex;
    gap: 10px;
    margin: 0 auto 22px;
    max-width: 1240px;
}
.sticker-manager-toolbar label { display: flex; flex: 1; flex-direction: column; gap: 5px; max-width: 430px; }
.sticker-manager-toolbar label span { color: #755f56; font-size: 11px; font-weight: 700; }
.sticker-manager-toolbar input,
.sticker-manager-detail input {
    background: #fffdf8;
    border: 1px solid #d5b997;
    border-radius: 10px;
    color: #371d25;
    min-height: 42px;
    outline: 0;
    padding: 0 12px;
}
.sticker-manager-toolbar button,
.manager-pack-actions button,
.manager-add-button,
.manager-inline-actions button {
    align-items: center;
    background: #70213a;
    border: 1px solid #511228;
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font-size: 12px;
    font-weight: 700;
    gap: 7px;
    justify-content: center;
    min-height: 42px;
    padding: 0 15px;
}
.sticker-manager-toolbar .secondary,
.manager-pack-actions .secondary,
.manager-inline-actions .secondary {
    background: #fffaf2;
    border-color: #caaa85;
    color: #6d3144;
}
.manager-pack-actions .danger { background: #fff6f3; border-color: #d7a4a4; color: #9a2639; }
.sticker-manager-detail { margin: 0 auto; max-width: 1240px; }
.sticker-manager-detail > header {
    align-items: center;
    background: var(--flaeche);
    border: 1px solid var(--linie-zart);
    border-radius: 18px;
    box-shadow: var(--schatten-zart);
    display: grid;
    gap: 20px;
    grid-template-columns: auto minmax(160px, 1fr) auto;
    padding: 18px 22px;
}
.sticker-manager-detail > header h2 { font-family: "Cormorant Garamond", Georgia, serif; font-size: 32px; margin: 0; }
.sticker-manager-detail > header p { color: #806a60; font-size: 12px; margin: 4px 0 0; }
.manager-back { background: transparent; border: 0; color: #70213a; cursor: pointer; font-weight: 700; }
.manager-pack-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.manager-add-button { margin: 0; }
.manager-progress { align-items: center; color: #6b574f; display: flex; gap: 10px; justify-content: center; min-height: 54px; }
.manager-progress span { animation: pulse 1.2s infinite; border: 2px solid #77223c; border-radius: 50%; height: 18px; width: 18px; }
.manager-empty { min-height: 260px; }
/* Farbtoken statt fester Werte: --flaeche und --tinte drehen sich mit dem
   Schema, ein fester heller Ton waere im Dunkeln wieder Schrift auf Schrift. */
.manager-locked-note {
    align-items: center;
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: 12px;
    color: var(--tinte-weich);
    display: flex;
    font-size: 11px;
    gap: 9px;
    line-height: 1.5;
    margin-top: 14px;
    padding: 11px 13px;
}
.manager-locked-note .ph { color: var(--akzent); flex: none; font-size: 18px; }
.manager-sticker-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 176px), 1fr)); margin-top: 22px; }
.manager-sticker-card { background: var(--flaeche); border: 1px solid var(--linie-zart); border-radius: 16px; min-width: 0; padding: 8px; transition: border-color .18s ease, box-shadow .18s ease; }
.manager-sticker-card:hover { border-color: var(--linie); box-shadow: var(--schatten); }
/* Quadratisch statt 164 Pixel hoch: Das Motiv wächst mit der Spalte. */
.manager-sticker-image { align-items: center; aspect-ratio: 1; background: var(--flaeche-warm); border-radius: 12px; display: flex; justify-content: center; margin-bottom: 8px; overflow: hidden; }
.manager-sticker-card .manager-sticker-image { padding: 10px; }
.manager-sticker-image img { height: 100%; min-height: 0; object-fit: contain; width: 100%; }
.manager-sticker-image .ph { color: #9d7669; font-size: 34px; }
/* Ein leeres Vorschaufeld heisst zweierlei: "gibt es nicht" - dafuer steht
   ph-image-broken - oder "wird noch entschluesselt". Das Atmen unterscheidet
   beides, ohne dass ein zweites Bildfeld noetig waere. */
.manager-sticker-image .ph.is-pending { animation: manager-vorschau-wartet 1.4s ease-in-out infinite alternate; }
@keyframes manager-vorschau-wartet { from { opacity: .3; } to { opacity: .85; } }
.manager-sticker-card > b { display: block; overflow: hidden; padding: 3px 2px 9px; text-overflow: ellipsis; white-space: nowrap; }
.manager-sticker-card > input { width: 100%; }
.manager-item-actions,
.manager-inline-actions { display: flex; gap: 6px; }
.manager-item-actions button { align-items: center; background: #fffaf2; border: 1px solid #d9bea0; border-radius: 8px; color: #6d3144; cursor: pointer; display: flex; height: 34px; justify-content: center; width: 34px; }
.manager-item-actions button:disabled { cursor: default; opacity: .35; }
.manager-item-actions button.danger { margin-left: auto; }
.manager-item-actions button.is-confirming { background: #9a2639; color: #fff; opacity: 1; }
.manager-inline-actions { margin-top: 8px; }
.manager-inline-actions button { flex: 1; min-height: 36px; padding: 0 8px; }
.manager-move-target { display: block; margin-top: 4px; }
.manager-move-target select { background: #fffaf2; border: 1px solid #d9bea0; border-radius: 8px; color: #4b3a33; min-height: 38px; padding: 0 8px; width: 100%; }

/* Das Bild einer Packkachel ist der Knopf in die Grossansicht. Es sieht
   unveraendert aus - nur der Zeiger und die leichte Vergroesserung verraten,
   dass da etwas passiert. */
.manager-sticker-image { border: 0; cursor: pointer; padding: 0; width: 100%; }
.manager-sticker-image img { transition: transform .18s ease; }
.manager-sticker-image:hover img { transform: scale(1.05); }
.manager-sticker-image:focus-visible { outline: 2px solid #77213c; outline-offset: 2px; }

/* Die Grossansicht eines Motivs. Breiter als die uebrigen Dialoge: links das
   Bild in Ruhe, rechts die Angaben. Untereinander waere beides klein. */
.sticker-detail-card { max-width: 880px; }
.sticker-detail-body {
    display: grid;
    gap: 22px;
    grid-template-columns: minmax(0, 1.15fr) minmax(230px, 1fr);
    margin-top: 20px;
}
.sticker-detail-stage {
    align-items: center;
    background: #f2e4d2;
    border: 1px solid #e0c9ae;
    border-radius: 18px;
    display: flex;
    gap: 6px;
    justify-content: space-between;
    min-height: 320px;
    padding: 10px;
}
.sticker-detail-stage figure {
    align-items: center;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    margin: 0;
    min-width: 0;
}
.sticker-detail-stage img { max-height: 340px; max-width: 100%; object-fit: contain; }
.sticker-detail-stage .ph { color: #9d7669; font-size: 44px; }
.sticker-detail-stage figcaption { color: #806a60; font-size: 12px; text-align: center; }
.sticker-detail-step {
    align-items: center;
    background: #fffaf2;
    border: 1px solid #d9bea0;
    border-radius: 50%;
    color: #6d3144;
    cursor: pointer;
    display: flex;
    flex: 0 0 auto;
    height: 38px;
    justify-content: center;
    width: 38px;
}
.sticker-detail-step:disabled { cursor: default; opacity: .3; }
.sticker-detail-side { display: flex; flex-direction: column; gap: 14px; }
.sticker-detail-emojis { display: flex; flex-wrap: wrap; gap: 6px; }
.sticker-detail-emojis span {
    background: #f7e7cf;
    border: 1px solid #e3cbaa;
    border-radius: 9px;
    font-size: 17px;
    line-height: 1;
    padding: 6px 8px;
}
.sticker-detail-data { margin: 0; }
.sticker-detail-data > div {
    align-items: baseline;
    border-bottom: 1px solid #ecd9c2;
    display: flex;
    gap: 14px;
    justify-content: space-between;
    padding: 8px 0;
}
.sticker-detail-data > div:last-child { border-bottom: 0; }
.sticker-detail-data dt { color: #806a60; flex: 0 0 auto; font-size: 12px; }
.sticker-detail-data dd { font-size: 13px; font-weight: 600; margin: 0; text-align: right; }
.sticker-detail-data dd.kennung {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 11px;
    font-weight: 500;
    overflow-wrap: anywhere;
}
.sticker-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.sticker-detail-actions button,
.sticker-detail-download {
    align-items: center;
    background: #70213a;
    border: 1px solid #511228;
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font-size: 12px;
    font-weight: 700;
    gap: 7px;
    justify-content: center;
    min-height: 42px;
    padding: 0 15px;
    text-decoration: none;
}
.sticker-detail-actions .secondary,
.sticker-detail-download { background: #fffaf2; border-color: #caaa85; color: #6d3144; }
.sticker-detail-actions .danger { background: #fff6f3; border-color: #d7a4a4; color: #9a2639; }
.sticker-detail-actions .danger.is-confirming {
    background: #9a2639;
    border-color: #9a2639;
    color: #fff;
}
.sticker-detail-actions button:disabled { cursor: default; opacity: .45; }
.sticker-detail-edit { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.sticker-detail-edit label { display: flex; flex-direction: column; gap: 5px; }
.sticker-detail-edit label span { color: #755f56; font-size: 11px; font-weight: 700; }
.sticker-detail-edit input,
.sticker-detail-edit select {
    background: #fffdf8;
    border: 1px solid #d5b997;
    border-radius: 10px;
    color: #371d25;
    min-height: 42px;
    padding: 0 12px;
    width: 100%;
}
.sticker-detail-card .workspace-notice { margin: 18px 0 0; max-width: none; }
.sticker-detail-card .manager-progress { justify-content: flex-start; min-height: 44px; }

/* Sticker, die ohne Pack in einer Unterhaltung gelandet sind. Eigener
   Abschnitt unter den eigenen Packs, damit klar bleibt: Das ist kein Pack. */
.workspace-loose-stickers { margin: 36px auto 0; max-width: 1240px; }
.workspace-loose-stickers h2 {
    display: flex;
    flex-direction: column;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 28px;
    gap: 4px;
    margin: 0;
}
.workspace-loose-stickers > p { color: #806a60; font-size: 13px; margin: 6px 0 18px; }

@media (max-width: 820px) {
    .sticker-manager-detail > header { align-items: flex-start; grid-template-columns: 1fr; }
    .manager-pack-actions { justify-content: flex-start; }
    .manager-sticker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sticker-manager-toolbar { align-items: stretch; flex-direction: column; }
    .sticker-detail-body { grid-template-columns: 1fr; }
    .sticker-detail-stage { min-height: 240px; }
    .sticker-detail-stage img { max-height: 240px; }
}

.sync-state { align-items: center; color: #5b6a40; display: flex; font-size: 12px; gap: 8px; }
.sync-state > span { background: currentColor; border-radius: 50%; height: 7px; width: 7px; }
.sync-state.loading > span { animation: pulse 1.2s infinite; }
.training-tabs { overflow-x: auto; }
.workspace-notice { background: #f5e1e0; border: 1px solid #d9a6a8; border-radius: 12px; color: #761f35; margin: 30px auto; max-width: 900px; padding: 16px; }
.workspace-loading { align-items: center; color: #705b52; display: flex; gap: 14px; justify-content: center; min-height: 360px; }
.workspace-loading > span { animation: pulse 1.2s infinite; border: 2px solid #77223c; border-radius: 50%; height: 22px; width: 22px; }
.training-empty { align-items: center; display: flex; flex-direction: column; margin: 70px auto 0; max-width: 660px; text-align: center; }
.training-empty-icon { align-items: center; background: #f0dfce; border: 1px solid #d8b995; border-radius: 50%; color: #77213c; display: flex; height: 94px; justify-content: center; margin-bottom: 30px; width: 94px; }
.training-empty-icon .nav-training { transform: scale(1.7); }
.training-empty-icon .ph { font-size: 38px; }
.training-empty h2 { font-family: "Cormorant Garamond", Georgia, serif; font-size: 38px; line-height: 1.08; margin: 12px 0; }
.training-empty p { color: #755f56; line-height: 1.65; margin: 0 0 26px; }
.training-empty button { background: transparent; border: 1px solid #bd9872; border-radius: 11px; color: #6e2339; cursor: pointer; min-height: 45px; padding: 0 20px; }
.training-overview { display: grid; gap: 18px; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(180px, 1fr)); margin: 38px auto; max-width: 1240px; }
.training-hero,
.training-stat { background: #fffdf8; border: 1px solid #dfc6a8; border-radius: 16px; padding: 26px; }
.training-hero h2 { font-family: "Cormorant Garamond", Georgia, serif; font-size: 36px; margin: 9px 0; }
.training-hero p { color: #725f57; }
.training-actions { display: flex; gap: 10px; margin-top: 24px; }
.training-actions button { background: transparent; border: 1px solid #c5a27d; border-radius: 11px; min-height: 46px; padding: 0 18px; }
.training-stat { display: flex; flex-direction: column; justify-content: center; }
.training-stat span { color: #775e55; font-size: 12px; text-transform: uppercase; }
.training-stat b { color: #70213a; font-family: "Cormorant Garamond", Georgia, serif; font-size: 52px; margin: 10px 0 0; }
.training-stat small { color: #89746a; }

/* Das Picker-Popover entspricht der ausgewaehlten Fassung: Suche immer oben,
   Groessenschalter daneben, keine zweite Sicherheitszeile unter dem Composer. */
.picker-header-actions { align-items: center; display: flex; gap: 5px; }
.picker-header-actions > button { align-items: center; display: flex; justify-content: center; }
.picker-expand span { height: 18px; position: relative; width: 18px; }
.picker-expand span::before,
.picker-expand span::after { border-color: currentColor; border-style: solid; content: ""; height: 6px; position: absolute; width: 6px; }
.picker-expand span::before { border-width: 2px 0 0 2px; left: 0; top: 0; }
.picker-expand span::after { border-width: 0 2px 2px 0; bottom: 0; right: 0; }
.picker-global-search { margin: 12px 0 8px !important; }
.picker-context-search { display: none !important; }
.sticker-manage-entry { align-items: center; background: transparent; border: 0; border-top: 1px solid #dfcbb3; color: #6d233a; cursor: pointer; display: flex; gap: 11px; margin-top: 10px; min-height: 48px; padding: 10px 4px 0; text-align: left; width: 100%; }
.sticker-manage-entry > span:nth-child(2) { flex: 1; }
.sticker-manage-entry > .ph { font-size: 20px; }
.manage-chevron { border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; height: 8px; transform: rotate(45deg); width: 8px; }

@media (min-width: 721px) {
    .feature-scrim:has(.sticker-picker-card) {
        align-items: flex-end;
        background: transparent;
        justify-content: flex-start;
        pointer-events: none;
        padding: 0 0 76px 330px;
    }
    .feature-scrim:has(.sticker-picker-card) .sticker-picker-card {
        background: #fffaf1;
        border: 1px solid #d7b995;
        border-radius: 15px;
        box-shadow: 0 14px 40px rgba(49, 21, 27, .22);
        height: auto;
        max-height: min(62dvh, 610px);
        max-width: 560px;
        overflow: auto;
        padding: 15px 16px 12px;
        pointer-events: auto;
        width: min(560px, calc(100vw - 360px));
    }
    .feature-scrim:has(.sticker-picker-card) .sticker-picker-card.is-large {
        height: min(78dvh, 780px);
        max-height: min(78dvh, 780px);
        max-width: 880px;
        width: min(880px, calc(100vw - 360px));
    }
    .feature-scrim:has(.sticker-picker-card) .sheet-handle { display: none; }
    .sticker-picker-card > header .eyebrow { display: none; }
    /* Die Karte bleibt hier auch im dunklen Schema hell. Ohne feste Farbe
       erbte der Titel über appearance.css die helle Schrift des dunklen
       Schemas und stand fast unsichtbar auf Creme (15.09.2026). */
    .sticker-picker-card > header h2 { color: #222128; font-size: 18px; margin: 0; }
    .sticker-picker-card .sticker-tabs { margin-top: 5px; }
    .sticker-picker-card .sticker-browser { display: block; }
    .sticker-picker-card .sticker-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .sticker-picker-card.is-large .sticker-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .sticker-picker-card .sticker-featured-preview { display: none; }
    .sticker-picker-card .caption-field,
    .sticker-picker-card .sticker-upload-button { display: none; }
}

@media (max-width: 1000px) {
    .web-vnext.app-shell { grid-template-columns: 260px minmax(0, 1fr); }
    .web-vnext .global-header { padding-left: 20px; }
    .web-vnext .global-brand { flex-basis: 220px; }
    .web-vnext .global-brand strong { font-size: 25px; }
    .web-vnext .global-nav button { min-width: 102px; padding: 0 14px; }
    .web-vnext .message-composer { padding-inline: 22px; }
    .feature-scrim:has(.sticker-picker-card) { padding-left: 280px; }
    .training-overview { grid-template-columns: 1fr 1fr; }
    .training-hero { grid-column: 1 / -1; }
}

@media (max-width: 799px) {
    .web-vnext.app-shell { display: block; padding-top: 68px; position: relative; }
    .web-vnext .global-header { height: 68px; inset: 0 0 auto; padding: 0 12px; position: fixed; }
    .web-vnext .global-brand { flex: 0 0 auto; }
    .web-vnext .global-brand strong { display: none; }
    .brand-symbol { transform: scale(.78); }
    .web-vnext .global-nav { flex: 1; justify-content: center; }
    .web-vnext .global-nav button { flex-direction: column; font-size: 10px; gap: 4px; min-width: 64px; padding: 10px 8px 9px; }
    .web-vnext .global-nav button.active::after { bottom: 4px; left: 14px; right: 14px; }
    .web-vnext .global-actions { gap: 2px; }
    .web-vnext .global-icon-button,
    .web-vnext .profile-chevron,
    .web-vnext .global-demo { display: none; }
    .web-vnext .avatar-button { height: 38px; width: 38px; }
    .web-vnext .conversation-panel,
    .web-vnext .thread-panel {
        bottom: 0;
        height: auto;
        left: 0;
        position: fixed;
        right: 0;
        top: 68px;
        transition: transform .22s ease, visibility .22s ease;
    }
    .web-vnext .conversation-panel { transform: translateX(0); z-index: 3; }
    .web-vnext .thread-panel { transform: translateX(100%); visibility: hidden; z-index: 4; }
    .web-vnext.thread-open .conversation-panel { transform: translateX(-100%); }
    .web-vnext.thread-open .thread-panel { transform: translateX(0); visibility: visible; }
    .web-vnext .mobile-back {
        align-items: center;
        background: transparent;
        border: 0;
        color: #6a273a;
        display: flex;
        font-size: 22px;
        height: 44px;
        justify-content: center;
        padding: 0;
        width: 44px;
    }
    .web-vnext .thread-header { min-height: 72px; padding: 9px 12px; }
    .web-vnext .thread-header h2 { font-size: 22px; }
    .web-vnext .stage-inner { padding: 18px 12px 30px; }
    .web-vnext .message-stack { max-width: 88%; }
    .web-vnext .message-composer { padding: 8px 9px max(10px, env(safe-area-inset-bottom)); }
    .web-vnext .composer-row { border-radius: 18px; }
    .workspace-area { inset: 68px 0 0; padding: 24px 16px 48px; position: fixed; }
    .workspace-heading { align-items: flex-start; flex-direction: column; gap: 18px; }
    .workspace-heading h1 { font-size: 40px; }
    .workspace-tabs { gap: 22px; }
    /* Zwei Spalten statt einer: Mit großem Titelbild wäre jede Karte sonst
       fast so hoch wie der Bildschirm. */
    .sticker-workspace .pack-browser { gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sticker-workspace-bar .workspace-tabs { flex: 1 1 100%; }
    .sticker-bar-actions { margin-left: 0; width: 100%; }
    .sticker-bar-actions button { flex: 1 1 0; }
    .pack-open { padding: 7px 7px 0; }
    .pack-art { border-radius: 11px; gap: 4px; padding: 6px; }
    .pack-meta { padding: 9px 4px 11px; }
    .pack-meta b { font-size: 14px; }
    .pack-badge { font-size: 10px; left: 13px; padding: 3px 8px; top: 13px; }
    .pack-order-actions { padding: 6px; }
    .pack-order-actions button { width: 40px; }
    .training-overview { grid-template-columns: 1fr 1fr; }
    .training-hero { grid-column: 1 / -1; }
    .feature-scrim:has(.sticker-picker-card) { padding: 0; }
    .picker-global-search { margin-top: 8px !important; }
}

@media (max-width: 520px) {
    .web-vnext .global-nav button { min-width: 54px; padding-inline: 5px; }
    .web-vnext .global-actions { display: none; }
    .training-overview { grid-template-columns: 1fr; }
    .training-hero { grid-column: auto; }
    .workspace-sticker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    .web-vnext *, .atelier-picker-scrim * { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* --- Training Showcase -------------------------------------------------- */
.training-dashboard,
.training-plan-layout,
.training-history-layout,
.training-progress-layout,
.training-body-layout,
.training-coach-layout { margin-top: 36px; }
.training-kpis,
.body-kpis {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 18px;
}
.training-kpis article,
.body-kpis article {
    background: rgba(255, 253, 248, .82);
    border: 1px solid #decdb8;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    min-height: 128px;
    padding: 22px;
}
.training-kpis span,
.body-kpis span,
.training-stat span { color: #7d6962; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.training-kpis b,
.body-kpis b { color: #571b2f; font-family: Georgia, serif; font-size: 29px; font-weight: 500; margin-top: 12px; }
.training-kpis small,
.body-kpis small { color: #8b7770; margin-top: auto; }
.training-dashboard-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1.65fr) minmax(280px, .85fr);
}
.training-chart-card,
.training-next-card,
.training-recent-card,
.training-plan-card,
.coach-recommendation {
    background: rgba(255, 253, 248, .82);
    border: 1px solid #decdb8;
    border-radius: 16px;
    padding: 24px;
}
.training-chart-card > header,
.training-next-card > header,
.training-recent-card > header,
.training-plan-card > header,
.exercise-progress-grid article > header {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
}
.training-chart-card h2,
.training-next-card h2,
.training-plan-card h2,
.training-coach-layout h2 { font-family: Georgia, serif; font-size: 27px; font-weight: 500; margin: 6px 0 0; }
.training-chart-card header > strong,
.training-plan-card header > strong,
.exercise-progress-grid header > strong { color: #657648; font-size: 14px; }
.training-chart { display: block; margin-top: 14px; overflow: visible; width: 100%; }
.training-chart text { fill: #8b7770; font-family: "Segoe UI", sans-serif; font-size: 10px; }
.training-chart .chart-grid { stroke: #eadfce; stroke-width: 1; }
.training-chart .chart-area { fill: rgba(126, 31, 59, .10); }
.training-chart .chart-line { fill: none; stroke: #7e1f3b; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; }
.training-chart .chart-point { fill: #fffaf2; stroke: #7e1f3b; stroke-width: 3; }
.training-chart.bar-chart rect { fill: #7e1f3b; opacity: .86; }
.training-chart .weight-line { stroke: #7e1f3b; }
.training-chart .waist-line { stroke: #b57d37; }
.training-chart .weight-dot { fill: #7e1f3b; }
.training-chart .waist-dot { fill: #b57d37; }
.training-next-card { background: linear-gradient(145deg, #5b182e, #7a2440); border-color: #8e4057; color: #fff8eb; }
.training-next-card .eyebrow,
.training-next-card p { color: #e4be73; }
.training-next-card h2 { font-size: 34px; margin-top: 28px; }
.training-next-card dl { border-bottom: 1px solid rgba(255,255,255,.2); border-top: 1px solid rgba(255,255,255,.2); display: grid; grid-template-columns: 1fr 1fr; margin: 26px 0; padding: 18px 0; }
.training-next-card dl div { display: flex; flex-direction: column; gap: 7px; }
.training-next-card dt { color: #e2cfc0; font-size: 11px; text-transform: uppercase; }
.training-next-card dd { font-size: 16px; margin: 0; }
.training-next-card .workspace-primary { background: #f2d08a; color: #4a1426; width: 100%; }
.training-recent-card header button { background: transparent; border: 0; color: #7e1f3b; cursor: pointer; }
.recent-workout { align-items: center; border-top: 1px solid #eadfce; display: grid; gap: 14px; grid-template-columns: 52px minmax(0, 1fr) auto; padding: 16px 0; }
.recent-workout:first-of-type { margin-top: 12px; }
.recent-workout time { color: #806e68; font-size: 12px; }
.recent-workout p { display: flex; flex-direction: column; margin: 0; }
.recent-workout small { color: #8c7771; margin-top: 3px; }
.recent-workout > strong { color: #602037; font-size: 12px; }
.training-plan-layout { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }
.training-plan-card.active { border-color: #9b6273; box-shadow: 0 12px 30px rgba(86, 29, 48, .08); }
.training-plan-card > p { color: #75635e; line-height: 1.55; }
.training-day-list { margin-top: 22px; }
.training-day-row { align-items: center; border-top: 1px solid #eadfce; display: grid; gap: 16px; grid-template-columns: 78px minmax(0, 1fr) auto; padding: 16px 0; }
.training-day-row > span { color: #8b7770; font-size: 10px; text-transform: uppercase; }
.training-day-row.next > span { color: #7e1f3b; font-weight: 700; }
.training-day-row p,
.training-day-row > div { display: flex; flex-direction: column; margin: 0; }
.training-day-row small { color: #8b7770; margin-top: 4px; }
.training-day-row > div { text-align: right; }
.training-history-layout,
.training-body-layout { display: grid; gap: 20px; }
.training-history-table { background: rgba(255, 253, 248, .78); border: 1px solid #decdb8; border-radius: 16px; overflow: hidden; }
.training-table-head,
.training-table-row { align-items: center; display: grid; gap: 16px; grid-template-columns: 120px minmax(220px, 1.6fr) repeat(3, minmax(90px, .6fr)); padding: 13px 20px; }
.training-table-head { background: #f3e9db; color: #79645e; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; }
.training-table-row { border-top: 1px solid #eadfce; color: #5d4c47; font-size: 13px; }
.training-table-row p { display: flex; flex-direction: column; margin: 0; min-width: 0; }
.training-table-row small { color: #8b7770; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.training-progress-layout { display: grid; gap: 20px; }
.exercise-progress-grid { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.exercise-progress-grid article { background: rgba(255, 253, 248, .82); border: 1px solid #decdb8; border-radius: 15px; padding: 20px; }
.exercise-progress-grid h3 { font-size: 15px; margin: 0; }
.exercise-progress-grid header small,
.exercise-progress-grid article > p { color: #8b7770; }
.exercise-progress-grid article > b { color: #571b2f; display: block; font-family: Georgia, serif; font-size: 27px; font-weight: 500; margin-top: 20px; }
.exercise-progress-grid article > p { margin: 4px 0 0; }
.exercise-sparkline { margin-top: 10px; width: 100%; }
.exercise-sparkline polyline { fill: none; stroke: #7e1f3b; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; }
.body-kpis { margin: 0; }
.body-table .training-table-row,
.body-table .training-table-head { grid-template-columns: 120px repeat(3, 110px) minmax(260px, 1fr); }
.training-coach-layout > header { max-width: 760px; }
.training-coach-layout > header > p { color: #77645e; line-height: 1.6; }
.coach-insight-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 28px; }
.coach-insight-grid article { align-items: flex-start; background: rgba(255, 253, 248, .82); border: 1px solid #decdb8; border-left: 4px solid #8b776e; border-radius: 13px; display: flex; gap: 16px; padding: 22px; }
.coach-insight-grid article.positive { border-left-color: #728052; }
.coach-insight-grid article.attention { border-left-color: #bd8737; }
.coach-insight-grid i { color: #7e1f3b; font-size: 23px; margin-top: 1px; }
.coach-insight-grid h3 { font-family: Georgia, serif; font-size: 20px; font-weight: 500; margin: 0; }
.coach-insight-grid p { color: #75635e; line-height: 1.55; margin: 7px 0 0; }
.coach-recommendation { align-items: center; background: #f1e4d2; display: flex; gap: 28px; justify-content: space-between; margin-top: 20px; }
.coach-recommendation > div { max-width: 800px; }
.coach-recommendation p { color: #6f5b55; line-height: 1.55; }
.coach-recommendation button { background: #6f1e37; border: 0; border-radius: 10px; color: #fff8ec; cursor: pointer; flex: 0 0 auto; padding: 13px 18px; }

@media (max-width: 1050px) {
    .training-kpis,
    .body-kpis,
    .exercise-progress-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .training-dashboard-grid { grid-template-columns: 1fr; }
    .training-table-head,
    .training-table-row { grid-template-columns: 90px minmax(180px, 1.5fr) repeat(3, minmax(75px, .6fr)); }
}

@media (max-width: 720px) {
    .training-dashboard,
    .training-plan-layout,
    .training-history-layout,
    .training-progress-layout,
    .training-body-layout,
    .training-coach-layout { margin-top: 24px; }
    .training-kpis,
    .body-kpis,
    .exercise-progress-grid,
    .coach-insight-grid { grid-template-columns: 1fr; }
    .training-kpis article,
    .body-kpis article { min-height: 108px; }
    .training-plan-layout { grid-template-columns: 1fr; }
    .training-plan-card,
    .training-chart-card,
    .training-next-card,
    .training-recent-card { padding: 18px; }
    .training-history-table { overflow-x: auto; }
    .training-table-head,
    .training-table-row { min-width: 720px; }
    .coach-recommendation { align-items: flex-start; flex-direction: column; }
}

/* Der Picker hat genau vier gleichwertige Bereiche. Die ältere Atelier-Regel
   drückte die Leiste mit festen Außenabständen zusammen; dadurch wurde selbst
   im großen Dialog ein innerer horizontaler Scrollbalken erzeugt. */
.sticker-picker-card .sticker-tabs,
.atelier-demo-picker .sticker-tabs {
    display: grid;
    gap: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 10px 0 14px;
    overflow: visible;
    width: 100%;
}

.sticker-picker-card .sticker-tabs button,
.atelier-demo-picker .sticker-tabs button {
    min-width: 0;
    overflow: hidden;
    padding-inline: 6px;
    text-overflow: ellipsis;
    width: 100%;
}

@media (max-width: 480px) {
    .sticker-picker-card .sticker-tabs button,
    .atelier-demo-picker .sticker-tabs button {
        font-size: 11px;
        padding-inline: 3px;
    }
}

/* Die Motive nutzen jetzt die ganze Kachel. Feste quadratische Karten vermeiden
   die leeren Unterseiten, die zuvor aus gestreckten Rasterzeilen entstanden. */
.sticker-picker-card .sticker-grid,
.atelier-demo-picker .sticker-grid {
    align-content: start;
    grid-auto-rows: auto;
}

.sticker-picker-card .sticker-choice,
.atelier-demo-picker .sticker-choice {
    aspect-ratio: 1;
}

.sticker-picker-card .sticker-choice > button:first-child,
.atelier-demo-picker .sticker-choice > button:first-child {
    height: 100%;
    min-height: 0;
    padding: 7px;
}

.sticker-picker-card .sticker-choice img,
.atelier-demo-picker .sticker-choice img {
    display: block;
    height: 100%;
    max-height: none;
    object-fit: contain;
    object-position: center;
    width: 100%;
}

.sticker-picker-card .sticker-choice small,
.atelier-demo-picker .sticker-choice small { display: none; }

/* Ruhige, runde Werkzeugknöpfe mit Phosphor-Icons statt gezeichneter Ecken. */
.picker-header-actions { gap: 8px; }
.picker-header-actions > button {
    background: #f7ecde;
    border: 1px solid #e1cdb4;
    border-radius: 50%;
    color: #6f2139;
    cursor: pointer;
    font-size: 19px;
    height: 40px;
    padding: 0;
    transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
    width: 40px;
}
.picker-header-actions > button:hover {
    background: #efe0ce;
    border-color: #bd8e78;
    transform: translateY(-1px);
}
.picker-header-actions > button:focus-visible {
    outline: 2px solid #7b2035;
    outline-offset: 2px;
}
.picker-header-actions .ph { line-height: 1; }

/* Pack-Bibliothek wie in der App: Karten mit echten Motivvorschauen. */
.sticker-picker-card .sticker-pack-list {
    align-content: start;
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    padding: 1px;
}
.sticker-picker-card .sticker-figur-schalter,
.sticker-picker-card .sticker-pack-list .library-error,
.sticker-picker-card .empty-list-copy { grid-column: 1 / -1; }
.sticker-picker-card .sticker-pack-row {
    align-items: stretch;
    background: #fbf4e8;
    border-color: #e1cdb4;
    display: block;
    min-width: 0;
    padding: 0;
    position: relative;
}
.sticker-picker-card .sticker-pack-open {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
}
.sticker-pack-preview {
    background: #f2e4d2;
    border-radius: 14px 14px 0 0;
    display: grid;
    gap: 4px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    height: 156px;
    overflow: hidden;
    padding: 8px;
    width: 100%;
}
.sticker-pack-preview img {
    height: 100%;
    min-height: 0;
    min-width: 0;
    object-fit: contain;
    width: 100%;
}
/* Dieselbe Aufteilung wie das Titelbild der Packkarten im Stickerbereich. */
.sticker-pack-preview[data-anzahl="0"],
.sticker-pack-preview[data-anzahl="1"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.sticker-pack-preview[data-anzahl="2"] { grid-template-rows: minmax(0, 1fr); }
.sticker-pack-preview[data-anzahl="3"] img:first-child { grid-row: span 2; }
.sticker-pack-preview > .ph {
    align-items: center;
    color: #9d7669;
    display: flex;
    font-size: 34px;
    justify-content: center;
}
.sticker-pack-preview > .ph-spinner-gap {
    animation: picker-preview-spin .8s linear infinite;
}
@keyframes picker-preview-spin { to { transform: rotate(360deg); } }
.sticker-pack-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 12px 14px 14px;
}
.sticker-pack-copy b {
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Die Packzeile der Auswahl bleibt auch im dunklen Schema creme (siehe
   .sticker-picker-card .sticker-pack-row). Ohne eigene Schriftfarbe erbte der
   Titel dort die helle --tinte und verschwand auf dem hellen Grund. */
.sticker-picker-card .sticker-pack-copy b { color: #2f2229; }
.sticker-pack-copy small { color: #806d65; font-size: 11px; }
.sticker-picker-card .sticker-pack-favorite {
    align-items: center;
    background: rgba(255, 253, 248, .94);
    border: 1px solid rgba(225, 205, 180, .9);
    border-radius: 50%;
    display: flex;
    height: 34px;
    justify-content: center;
    padding: 0;
    position: absolute;
    right: 8px;
    top: 8px;
    width: 34px;
}

@media (min-width: 721px) {
    .sticker-picker-card .sticker-grid {
        gap: 12px;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .sticker-picker-card.is-large .sticker-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .sticker-picker-card .sticker-grid,
    .atelier-demo-picker .sticker-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .picker-header-actions > button { height: 38px; width: 38px; }
}
.self-message-source {
    display: block;
    margin-top: 0.2rem;
    color: var(--muted, #667085);
    font-size: 0.72rem;
    text-align: right;
}

/* --- Mediathek ----------------------------------------------------------
   Anders als die uebrigen Arbeitsbereiche traegt dieser keine festen
   Farbwerte: Er holt sie aus den Marken und steht damit im hellen wie im
   dunklen Schema richtig. Die aelteren Bereiche daneben sind noch hell
   verdrahtet - wer sie anfasst, kann sie hierher nachziehen. */
.mediathek-workspace,
.mediathek-detail-scrim {
    /* Bordeaux als Schriftfarbe steht im dunklen Schema auf fast schwarzem
       Grund. Dort uebernimmt Gold die Rolle, die im Hellen die Tinte hat;
       Bordeaux bleibt der aktive Zustand und damit eine Flaeche, kein Text. */
    --mediathek-ton: var(--akzent);
}
.theme-dark .mediathek-workspace,
.mediathek-detail-scrim.theme-dark {
    --mediathek-ton: var(--gold-hell);
}
.mediathek-workspace {
    background: var(--flaeche);
    color: var(--tinte);
}
.mediathek-heading-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; }
.mediathek-ghost {
    align-items: center;
    background: var(--flaeche-warm);
    border: 1px solid var(--linie);
    border-radius: 12px;
    color: var(--mediathek-ton);
    cursor: pointer;
    display: inline-flex;
    font-weight: 600;
    gap: 8px;
    min-height: 46px;
    padding: 0 18px;
}
.mediathek-ghost:hover:not(:disabled) { background: var(--weich); }
.mediathek-ghost:disabled { cursor: default; opacity: .55; }

.mediathek-bestand {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    margin: 0 auto 20px;
    max-width: 1240px;
}
.mediathek-stat {
    background: var(--flaeche-warm);
    border: 1px solid var(--linie-zart);
    border-radius: var(--rundung-klein);
    color: inherit;
    display: flex;
    flex-direction: column;
    font: inherit;
    gap: 2px;
    padding: 14px 16px;
    text-align: left;
}
button.mediathek-stat { cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
button.mediathek-stat:hover { border-color: var(--linie); }
.mediathek-stat.aktiv { background: var(--akzent-zart); border-color: var(--akzent); }
.mediathek-stat.is-total { background: var(--akzent); border-color: var(--akzent-tief); color: var(--text-auf-leder); }
.mediathek-stat.is-total .eyebrow,
.mediathek-stat.is-total small { color: var(--gold-auf-leder); }
.mediathek-stat > span { align-items: center; color: var(--tinte-weich); display: flex; font-size: 12px; gap: 6px; }
.mediathek-stat > b { font-family: "Cormorant Garamond", Georgia, serif; font-size: 30px; line-height: 1.1; }
.mediathek-stat > small { color: var(--tinte-zart); font-size: 11px; }
.mediathek-stat.aktiv > span,
.mediathek-stat.aktiv > small { color: var(--mediathek-ton); }

.mediathek-hinweis {
    align-items: center;
    background: var(--flaeche-warm);
    border: 1px dashed var(--linie);
    border-radius: var(--rundung-klein);
    color: var(--tinte-weich);
    display: flex;
    flex-wrap: wrap;
    font-size: 13px;
    gap: 8px;
    margin: 0 auto 20px;
    max-width: 1240px;
    padding: 10px 14px;
}
.mediathek-hinweis > button {
    background: transparent;
    border: 0;
    color: var(--mediathek-ton);
    cursor: pointer;
    font: inherit;
    font-weight: 650;
    text-decoration: underline;
}

.mediathek-toolbar {
    display: grid;
    gap: 12px;
    margin: 0 auto 18px;
    max-width: 1240px;
}
.mediathek-search {
    background: var(--flaeche);
    border-color: var(--linie);
    color: var(--tinte);
    margin: 0;
    max-width: none;
}
.mediathek-search > .ph { color: var(--tinte-zart); font-size: 18px; }
.mediathek-search input { color: inherit; }
.mediathek-selects { display: flex; flex-wrap: wrap; gap: 12px; }
.mediathek-selects > label { display: flex; flex-direction: column; gap: 4px; min-width: 150px; }
.mediathek-selects > label > span {
    color: var(--tinte-zart);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.mediathek-selects select {
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: 10px;
    color: var(--tinte);
    font: inherit;
    min-height: 42px;
    padding: 0 10px;
}
.mediathek-views { align-items: flex-end; display: flex; gap: 6px; margin-left: auto; }
.mediathek-views > button {
    align-items: center;
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: 10px;
    color: var(--tinte-weich);
    cursor: pointer;
    display: flex;
    font-size: 19px;
    height: 42px;
    justify-content: center;
    width: 44px;
}
.mediathek-views > button.aktiv { background: var(--akzent); border-color: var(--akzent-tief); color: var(--text-auf-leder); }
.mediathek-reset { justify-self: start; min-height: 40px; }

.mediathek-auswahlleiste {
    align-items: center;
    background: var(--akzent-zart);
    border: 1px solid var(--akzent);
    border-radius: var(--rundung-klein);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 auto 18px;
    max-width: 1240px;
    padding: 12px 16px;
    position: sticky;
    top: 0;
    z-index: 4;
}
.mediathek-auswahlleiste > b { color: var(--mediathek-ton); }
.mediathek-auswahlleiste > span,
.mediathek-auswahlleiste > small { color: var(--tinte-weich); font-size: 12px; }
.mediathek-auswahlleiste > button {
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: 10px;
    color: var(--mediathek-ton);
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    min-height: 38px;
    padding: 0 14px;
}
.mediathek-auswahlleiste > button:disabled { cursor: default; opacity: .5; }
.mediathek-auswahl-links { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.mediathek-download-link {
    align-items: center;
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: 999px;
    color: var(--mediathek-ton);
    display: inline-flex;
    font-size: 12px;
    gap: 6px;
    max-width: 100%;
    overflow: hidden;
    padding: 6px 12px;
    text-decoration: none;
    white-space: nowrap;
}
.mediathek-download-link:hover { background: var(--weich); }

.mediathek-raster {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    margin: 0 auto;
    max-width: 1240px;
}
.mediathek-raster.ansicht-gross { grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); }
.mediathek-raster.ansicht-liste { display: block; }
.mediathek-gruppe {
    color: var(--tinte-weich);
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 21px;
    grid-column: 1 / -1;
    margin: 14px 0 0;
    position: sticky;
    top: 0;
    z-index: 2;
}
/* Die Ueberschrift steht auf dem Bildlauf, nicht darueber: Ohne eigenen
   Grund schoeben sich die Kacheln beim Scrollen sichtbar durch sie hindurch. */
.mediathek-gruppe::before {
    background: var(--flaeche);
    content: "";
    inset: -8px -6px -4px;
    position: absolute;
    z-index: -1;
}

.mediathek-kachel {
    background: var(--flaeche-warm);
    border: 1px solid var(--linie-zart);
    border-radius: var(--rundung-klein);
    overflow: hidden;
    position: relative;
    transition: border-color .15s ease, transform .15s ease;
}
.mediathek-kachel:hover { border-color: var(--linie); transform: translateY(-2px); }
.mediathek-kachel.gewaehlt { border-color: var(--akzent); box-shadow: 0 0 0 2px var(--akzent) inset; }
.mediathek-flaeche {
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: block;
    font: inherit;
    padding: 8px;
    text-align: left;
    width: 100%;
}
.mediathek-bild {
    align-items: center;
    aspect-ratio: 1 / 1;
    background: var(--flaeche);
    border: 1px solid var(--linie-zart);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    overflow: hidden;
    position: relative;
    width: 100%;
}
.mediathek-bild img { height: 100%; object-fit: cover; width: 100%; }
.mediathek-kachel.art-sticker .mediathek-bild img { object-fit: contain; padding: 6px; }
.mediathek-bild > .ph { color: var(--tinte-zart); font-size: 30px; }
.mediathek-bild.is-blind img { filter: blur(18px) saturate(.7); }
.mediathek-platzhalter {
    background: linear-gradient(100deg, var(--flaeche) 30%, var(--weich) 50%, var(--flaeche) 70%);
    background-size: 260% 100%;
    animation: mediathek-warten 1.6s ease-in-out infinite;
    height: 100%;
    width: 100%;
}
@keyframes mediathek-warten {
    from { background-position: 130% 0; }
    to { background-position: -30% 0; }
}
.mediathek-endung {
    color: var(--mediathek-ton);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .06em;
}
.mediathek-spielmarke {
    align-items: center;
    background: rgba(24, 12, 25, .62);
    border-radius: 50%;
    color: var(--text-auf-leder);
    display: flex;
    font-size: 20px;
    height: 42px;
    justify-content: center;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 42px;
}
.mediathek-dauer,
.mediathek-binde {
    background: rgba(24, 12, 25, .72);
    border-radius: 6px;
    bottom: 6px;
    color: var(--text-auf-leder);
    font-size: 11px;
    padding: 2px 6px;
    position: absolute;
    right: 6px;
}
.mediathek-binde { bottom: auto; right: auto; left: 6px; top: 6px; }
.mediathek-text { display: block; padding: 8px 2px 0; }
.mediathek-text b {
    display: block;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mediathek-text small {
    align-items: center;
    color: var(--tinte-zart);
    display: flex;
    font-size: 11px;
    gap: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mediathek-zeit,
.mediathek-groesse { color: var(--tinte-zart); font-size: 11px; }
.mediathek-zeit { display: block; padding: 4px 2px 0; }
.mediathek-groesse { display: none; }
.mediathek-haken,
.mediathek-lupe {
    align-items: center;
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: 50%;
    color: var(--mediathek-ton);
    display: flex;
    font-size: 16px;
    height: 32px;
    justify-content: center;
    position: absolute;
    right: 14px;
    top: 14px;
    width: 32px;
}
.mediathek-lupe { cursor: pointer; opacity: 0; transition: opacity .15s ease; }
.mediathek-kachel:hover .mediathek-lupe,
.mediathek-lupe:focus-visible { opacity: 1; }
.mediathek-haken.an { background: var(--akzent); border-color: var(--akzent-tief); color: var(--text-auf-leder); }

/* Liste: dieselben Kacheln, in einer Zeile ausgelegt. Zwei getrennte
   Markierungen haetten dieselbe Bedienung ein zweites Mal gebraucht. */
.mediathek-raster.ansicht-liste .mediathek-kachel { margin-bottom: 8px; }
.mediathek-raster.ansicht-liste .mediathek-flaeche {
    align-items: center;
    display: grid;
    gap: 14px;
    grid-template-columns: 56px minmax(0, 1fr) 110px 90px;
    padding: 10px 52px 10px 12px;
}
.mediathek-raster.ansicht-liste .mediathek-bild { border-radius: 8px; height: 56px; width: 56px; }
.mediathek-raster.ansicht-liste .mediathek-spielmarke { font-size: 13px; height: 26px; width: 26px; }
.mediathek-raster.ansicht-liste .mediathek-dauer { display: none; }
.mediathek-raster.ansicht-liste .mediathek-text { padding: 0; }
.mediathek-raster.ansicht-liste .mediathek-zeit { padding: 0; text-align: right; }
.mediathek-raster.ansicht-liste .mediathek-groesse { display: block; text-align: right; }
.mediathek-raster.ansicht-liste .mediathek-lupe { opacity: 1; top: 50%; transform: translateY(-50%); }
.mediathek-raster.ansicht-liste .mediathek-haken { top: 50%; transform: translateY(-50%); }
.mediathek-raster.ansicht-liste .mediathek-gruppe { margin: 18px 0 8px; }

.mediathek-sentinel { height: 1px; margin: 0 auto; max-width: 1240px; }
.mediathek-mehr { align-items: center; display: flex; flex-direction: column; gap: 8px; padding: 22px 0 6px; }
.mediathek-mehr > small { color: var(--tinte-zart); font-size: 12px; }
.mediathek-mehr > button {
    background: var(--flaeche-warm);
    border: 1px solid var(--linie);
    border-radius: 12px;
    color: var(--mediathek-ton);
    cursor: pointer;
    font: inherit;
    font-weight: 650;
    min-height: 46px;
    padding: 0 22px;
}
.mediathek-ende { color: var(--tinte-zart); font-size: 12px; padding: 22px 0 6px; text-align: center; }

/* Grossansicht */
.mediathek-detail-card { max-width: 1080px; width: min(96vw, 1080px); }
.mediathek-detail-card > header p { color: var(--tinte-weich); font-size: 13px; margin: 4px 0 0; }
.mediathek-detail-body { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr) 280px; padding: 4px 0 0; }
.mediathek-detail-buehne {
    align-items: center;
    background: var(--flaeche-warm);
    border: 1px solid var(--linie-zart);
    border-radius: var(--rundung-klein);
    display: flex;
    justify-content: center;
    min-height: 320px;
    overflow: hidden;
    padding: 14px;
    position: relative;
}
.mediathek-detail-buehne img,
.mediathek-detail-buehne video { max-height: 62vh; max-width: 100%; object-fit: contain; }
.mediathek-detail-buehne.is-blind img,
.mediathek-detail-buehne.is-blind video { filter: blur(30px) saturate(.7); }
.mediathek-detail-poster,
.mediathek-detail-dokument,
.mediathek-detail-leer {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    text-align: center;
}
.mediathek-detail-poster > .ph,
.mediathek-detail-leer > .ph { color: var(--tinte-zart); font-size: 46px; }
.mediathek-detail-dokument .mediathek-endung { font-size: 34px; }
.mediathek-detail-leer figcaption,
.mediathek-detail-poster figcaption,
.mediathek-detail-dokument figcaption {
    align-items: center;
    color: var(--tinte-weich);
    display: flex;
    flex-direction: column;
    font-size: 13px;
    gap: 8px;
}
.mediathek-detail-binde {
    background: rgba(24, 12, 25, .78);
    border-radius: 999px;
    bottom: 12px;
    color: var(--text-auf-leder);
    font-size: 12px;
    left: 50%;
    margin: 0;
    padding: 6px 14px;
    position: absolute;
    transform: translateX(-50%);
}
.mediathek-blaettern {
    align-items: center;
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: 50%;
    color: var(--mediathek-ton);
    cursor: pointer;
    display: flex;
    font-size: 22px;
    height: 44px;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    z-index: 2;
}
.mediathek-blaettern.zurueck { left: 10px; }
.mediathek-blaettern.vor { right: 10px; }
.mediathek-detail-seite { display: flex; flex-direction: column; gap: 12px; }
.mediathek-detail-actions { flex-wrap: wrap; }

@media (max-width: 980px) {
    .mediathek-detail-body { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
    .mediathek-bestand { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mediathek-selects > label { min-width: 132px; }
    .mediathek-views { margin-left: 0; }
    .mediathek-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mediathek-raster.ansicht-gross { grid-template-columns: minmax(0, 1fr); }
    .mediathek-raster.ansicht-liste .mediathek-flaeche {
        grid-template-columns: 48px minmax(0, 1fr);
    }
    .mediathek-raster.ansicht-liste .mediathek-zeit,
    .mediathek-raster.ansicht-liste .mediathek-groesse { display: none; }
    .mediathek-lupe { opacity: 1; }
}

/* ---------------------------------------------------------------------------
   Neutrale Zugangsflaeche – "Tagesraum"

   Der gesperrte Zustand ist absichtlich keine verkleinerte Fassung des Chats.
   Eine Person, die nur diesen Bildschirm sieht, soll darin einen gewoehnlichen
   persoenlichen Tagesplaner erkennen: keine Chatmarke, kein Schlossmotiv, keine
   Kryptografiebegriffe und keine Farben oder Beschlaege der eigentlichen App.
   Die Selektoren stehen am Dateiende, damit auch die alten Hell-/Dunkel- und
   Mobilregeln der Chatgestaltung sicher ueberschrieben werden.
   --------------------------------------------------------------------------- */

.boot-screen {
    background: #edf2eb;
    font-family: "Segoe UI", Inter, system-ui, sans-serif;
}

.boot-mark {
    background: linear-gradient(145deg, #6f8a78, #496453);
    border-radius: 18px;
    box-shadow: 0 12px 28px rgba(49, 74, 58, .20);
    font-weight: 650;
}

.boot-pulse { border-color: rgba(83, 116, 94, .30); }

.lock-shell,
.theme-dark.lock-shell {
    --lock-background: #edf2eb;
    --lock-panel: #fbfcf9;
    --lock-panel-muted: #f3f6f1;
    --lock-ink: #27352c;
    --lock-copy: #68756c;
    --lock-accent: #557361;
    --lock-accent-deep: #3f5c4a;
    --lock-line: #d9e2da;
    align-items: stretch;
    background: var(--lock-background);
    color: var(--lock-ink);
    display: flex;
    font-family: "Segoe UI", Inter, system-ui, -apple-system, sans-serif;
    height: 100dvh;
    justify-content: center;
    overflow: auto;
    padding: 32px;
    position: relative;
}

.lock-shell::before,
.theme-dark.lock-shell::before {
    background:
        radial-gradient(circle at 11% 13%, rgba(153, 183, 161, .34) 0 8%, transparent 8.2%),
        radial-gradient(circle at 88% 84%, rgba(207, 221, 206, .65) 0 15%, transparent 15.2%);
    content: "";
    inset: 0;
    pointer-events: none;
    position: fixed;
}

.lock-shell::after {
    border: 1px solid rgba(85, 115, 97, .10);
    border-radius: 50%;
    content: "";
    height: 440px;
    pointer-events: none;
    position: fixed;
    right: -210px;
    top: -250px;
    width: 440px;
}

.lock-layout {
    align-self: center;
    background: var(--lock-panel);
    border: 1px solid rgba(63, 92, 74, .10);
    border-radius: 32px;
    box-shadow: 0 24px 70px rgba(54, 77, 62, .14);
    display: grid;
    grid-template-columns: minmax(330px, .92fr) minmax(420px, 1.08fr);
    margin: auto;
    max-width: 980px;
    min-height: min(690px, calc(100dvh - 64px));
    overflow: hidden;
    position: relative;
    width: 100%;
    z-index: 1;
}

.lock-intro {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .20), transparent 55%),
        #6f8978;
    color: #f8fbf7;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 42px;
    position: relative;
}

.lock-intro::before,
.lock-intro::after {
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 46% 54% 62% 38%;
    content: "";
    pointer-events: none;
    position: absolute;
    transform: rotate(28deg);
}

.lock-intro::before {
    height: 260px;
    right: -122px;
    top: -88px;
    width: 210px;
}

.lock-intro::after {
    bottom: -124px;
    height: 300px;
    left: -145px;
    width: 250px;
}

.quiet-brand,
.lock-mobile-brand {
    align-items: center;
    display: flex;
    font-size: 16px;
    font-weight: 650;
    gap: 11px;
    letter-spacing: -.01em;
    position: relative;
    z-index: 1;
}

.quiet-mark {
    align-items: center;
    background: rgba(255, 255, 255, .92);
    border-radius: 13px;
    display: inline-flex;
    height: 38px;
    justify-content: center;
    position: relative;
    width: 38px;
}

.quiet-mark > span {
    border: 2px solid #597362;
    border-radius: 80% 18% 70% 22%;
    height: 17px;
    position: relative;
    transform: rotate(-38deg);
    width: 12px;
}

.quiet-mark > span::after {
    background: #597362;
    content: "";
    height: 1.5px;
    left: 4px;
    position: absolute;
    top: 9px;
    transform: rotate(42deg);
    transform-origin: left center;
    width: 10px;
}

.lock-intro-copy {
    margin: auto 0 34px;
    max-width: 320px;
    position: relative;
    z-index: 1;
}

.lock-intro-copy > p,
.lock-kicker {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .15em;
    margin: 0 0 13px;
    text-transform: uppercase;
}

.lock-intro-copy > p { color: rgba(255, 255, 255, .72); }

.lock-intro-copy h2 {
    font-size: clamp(32px, 4vw, 45px);
    font-weight: 580;
    letter-spacing: -.045em;
    line-height: 1.08;
    margin: 0 0 18px;
}

.lock-intro-copy > span {
    color: rgba(255, 255, 255, .72);
    font-size: 14px;
    line-height: 1.6;
}

.day-preview {
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .20);
    border-radius: 22px;
    backdrop-filter: blur(10px);
    display: grid;
    gap: 11px;
    padding: 22px;
    position: relative;
    z-index: 1;
}

.day-preview > p {
    color: rgba(255, 255, 255, .68);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    margin: 0;
    text-transform: uppercase;
}

.day-preview > strong {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    margin-bottom: 3px;
}

.day-preview > div {
    align-items: center;
    color: rgba(255, 255, 255, .78);
    display: flex;
    gap: 10px;
}

.day-preview > div > span {
    border: 1px solid rgba(255, 255, 255, .48);
    border-radius: 50%;
    height: 14px;
    width: 14px;
}

.day-preview small { font-size: 11.5px; }

.lock-card,
.theme-dark .lock-card {
    align-self: stretch;
    background: var(--lock-panel);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: var(--lock-ink);
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: none;
    padding: 48px clamp(38px, 6vw, 68px) 36px;
    text-align: left;
    width: auto;
}

.lock-mobile-brand { color: var(--lock-ink); display: none; margin-bottom: 42px; }
.lock-mobile-brand .quiet-mark { background: #e5ece5; }
.lock-kicker { color: var(--lock-accent); }

.lock-card h1,
.theme-dark .lock-card h1 {
    color: var(--lock-ink);
    font-size: clamp(34px, 4.6vw, 48px);
    font-weight: 580;
    letter-spacing: -.045em;
    line-height: 1.07;
    margin: 0 0 15px;
}

.lock-copy {
    color: var(--lock-copy);
    font-size: 14.5px;
    line-height: 1.62;
    margin: 0;
    max-width: 42ch;
}

.vault-fields {
    gap: 14px;
    margin-top: 28px;
}

.vault-fields label,
.theme-dark .vault-fields label {
    color: var(--lock-copy);
    font-size: 10.5px;
    font-weight: 700;
    gap: 8px;
    letter-spacing: .12em;
}

.vault-fields input,
.theme-dark .vault-fields input {
    background: var(--lock-panel-muted);
    border: 1px solid var(--lock-line);
    border-radius: 14px;
    color: var(--lock-ink);
    min-height: 54px;
    padding: 0 17px;
}

.vault-fields input:focus,
.theme-dark .vault-fields input:focus {
    background: var(--lock-panel);
    border-color: var(--lock-accent);
    box-shadow: 0 0 0 4px rgba(85, 115, 97, .13);
}

.lock-card .pin-length {
    justify-content: flex-start;
    margin-top: 24px;
}

.lock-card .pin-length button {
    border-color: var(--lock-line);
    color: var(--lock-copy);
}

.lock-card .pin-length button.selected {
    background: #e6eee7;
    border-color: #a8bbaa;
    color: var(--lock-accent-deep);
}

.unlock-actions { margin-top: 20px; }

.lock-card .primary-action {
    background: var(--lock-accent);
    border: 1px solid var(--lock-accent-deep);
    border-radius: 14px;
    box-shadow: 0 9px 20px rgba(63, 92, 74, .18);
    color: #fff;
    font-family: inherit;
    font-weight: 650;
    justify-content: space-between;
    min-height: 53px;
    padding: 0 19px 0 21px;
}

.lock-card .primary-action:hover:not(:disabled) {
    background: var(--lock-accent-deep);
    box-shadow: 0 12px 25px rgba(63, 92, 74, .23);
    transform: translateY(-1px);
}

.lock-card .primary-action:disabled {
    box-shadow: none;
    cursor: not-allowed;
    opacity: .48;
}

.lock-card .primary-action b {
    color: #fff;
    font-size: 18px;
    margin-left: 12px;
}

.lock-card .notice {
    background: #fff6f2;
    border: 1px solid #efd7cc;
    border-radius: 13px;
    color: #8a4d3a;
    margin-top: 20px;
}

.lock-card .error-notice > span { background: #9b5d48; }

.lock-wait,
.lock-wait b {
    color: var(--lock-copy);
}

.lock-footnote,
.pin-hint {
    color: var(--lock-copy);
    font-size: 11px;
    margin: 16px 0 0;
    text-align: left;
}

.lock-secondary {
    border: 0;
    color: var(--lock-copy);
    font-size: 11.5px;
    margin-top: 4px;
    min-height: 34px;
    padding: 0;
    text-align: left;
    text-decoration: underline;
    text-decoration-color: rgba(104, 117, 108, .40);
    text-underline-offset: 3px;
    width: fit-content;
}

.lock-secondary:hover { color: var(--lock-accent-deep); }

.lock-confirm {
    background: var(--lock-panel-muted);
    border: 1px solid var(--lock-line);
    border-radius: 14px;
    margin-top: 12px;
    padding: 14px;
}

.lock-confirm p { color: var(--lock-copy); }

.lock-confirm .dialog-actions button:not(.danger-action) {
    background: var(--lock-panel);
    border: 1px solid var(--lock-line);
    border-radius: 12px;
    color: var(--lock-ink);
}

.lock-device-note {
    align-items: center;
    color: #87928a;
    display: flex;
    font-size: 10.5px;
    gap: 8px;
    margin: auto 0 0;
    padding-top: 26px;
}

.lock-device-note > span {
    background: #7d9a86;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(125, 154, 134, .12);
    height: 6px;
    width: 6px;
}

.lock-card .demo-entry {
    border-top-color: var(--lock-line);
    margin-top: 22px;
    padding-top: 18px;
}

.lock-card .demo-entry > button {
    background: var(--lock-panel-muted);
    border-color: var(--lock-line);
    color: var(--lock-ink);
}

.lock-card .demo-entry > button:hover:not(:disabled) { border-color: var(--lock-accent); }
.lock-card .demo-entry button small,
.lock-card .demo-entry > p { color: var(--lock-copy); }

.theme-dark.lock-shell {
    --lock-background: #1f2822;
    --lock-panel: #28322b;
    --lock-panel-muted: #303c33;
    --lock-ink: #edf3ed;
    --lock-copy: #abb8ae;
    --lock-accent: #789781;
    --lock-accent-deep: #688972;
    --lock-line: #405045;
}

.theme-dark .lock-layout {
    border-color: rgba(255, 255, 255, .06);
    box-shadow: 0 28px 80px rgba(0, 0, 0, .30);
}

.theme-dark .lock-intro { background: #4e6958; }
.theme-dark .lock-mobile-brand .quiet-mark { background: #dce8de; }
.theme-dark .lock-card .pin-length button.selected { background: #3a4c3f; }
.theme-dark .lock-card .notice { background: #3b302b; border-color: #64493e; color: #efc6b6; }
.theme-dark .lock-device-note { color: #93a198; }

@media (max-width: 800px) {
    .lock-shell,
    .theme-dark.lock-shell {
        align-items: flex-start;
        justify-content: center;
        padding: 18px;
    }

    .lock-layout {
        align-self: flex-start;
        display: block;
        margin: auto;
        max-width: 520px;
        min-height: 0;
    }

    .lock-intro { display: none; }
    .lock-mobile-brand { display: flex; }

    .lock-card,
    .theme-dark .lock-card {
        border-radius: 0;
        min-height: calc(100dvh - 36px);
        padding: 34px clamp(24px, 8vw, 48px) 28px;
    }

    .lock-card h1,
    .theme-dark .lock-card h1 { font-size: clamp(34px, 10vw, 44px); }
}

@media (max-height: 720px) and (min-width: 801px) {
    .lock-shell,
    .theme-dark.lock-shell { padding-block: 20px; }
    .lock-layout { min-height: calc(100dvh - 40px); }
    .lock-intro { padding: 32px; }
    .lock-intro-copy { margin-bottom: 24px; }
    .day-preview { padding: 17px 19px; }
    .lock-card,
    .theme-dark .lock-card { padding-block: 30px 24px; }
    .lock-card h1,
    .theme-dark .lock-card h1 { font-size: 39px; }
    .vault-fields { margin-top: 21px; }
    .lock-device-note { padding-top: 18px; }
}

/* ---------------------------------------------------------------------------
   Web vNext · dunkler Chat

   Die vNext-Schicht kam nach dem ursprünglichen Darkmode hinzu und trug ihre
   Pergamentfarben fest ein. Ihre Selektoren stehen später im Stylesheet und
   gewannen deshalb gegen die dunklen Marken. Diese abschließende Schicht ist
   absichtlich auf den Chat begrenzt: Sie lässt den hellen Entwurf unverändert,
   gilt auch in der Demo und hält die vNext-Spezifität an einer Stelle zusammen.
   --------------------------------------------------------------------------- */

.web-vnext.theme-dark.app-shell {
    background: var(--papier);
    color: var(--tinte);
}

.web-vnext.theme-dark .conversation-panel {
    background: color-mix(in srgb, var(--papier) 92%, var(--flaeche));
    border-right-color: var(--linie);
}

.web-vnext.theme-dark .list-toggle,
.web-vnext.theme-dark .search-box,
.web-vnext.theme-dark .conversation-row {
    background: var(--flaeche);
    border-color: var(--linie);
    color: var(--tinte);
}

.web-vnext.theme-dark .search-box input,
.web-vnext.theme-dark .composer-row textarea {
    color: var(--tinte);
}

.web-vnext.theme-dark .search-box input::placeholder,
.web-vnext.theme-dark .composer-row textarea::placeholder {
    color: var(--tinte-zart);
}

.web-vnext.theme-dark .conversation-row:hover {
    background: var(--weich);
}

.web-vnext.theme-dark .conversation-row.selected {
    background: linear-gradient(105deg, var(--akzent-zart), var(--flaeche));
    border-color: var(--akzent-hell);
}

.web-vnext.theme-dark .conversation-avatar,
.web-vnext.theme-dark .thread-avatar {
    border-color: var(--gold-dunkel);
}

.web-vnext.theme-dark .conversation-meta b,
.web-vnext.theme-dark .thread-header h2 {
    color: var(--tinte);
}

.web-vnext.theme-dark .conversation-meta time,
.web-vnext.theme-dark .conversation-preview,
.web-vnext.theme-dark .panel-footer small {
    color: var(--tinte-zart);
}

.web-vnext.theme-dark .trust-card,
.web-vnext.theme-dark .trust-card b {
    color: var(--gruen);
}

.web-vnext.theme-dark .trust-card small {
    color: var(--tinte-zart);
}

.web-vnext.theme-dark .thread-panel {
    background-color: var(--papier);
    background-image:
        linear-gradient(rgba(24, 12, 25, .88), rgba(24, 12, 25, .88)),
        url("../design/atelier-soft/chat-collar-paper.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.web-vnext.theme-dark.rare-chat-background .thread-panel {
    background-image:
        linear-gradient(rgba(24, 12, 25, .88), rgba(24, 12, 25, .88)),
        url("../design/atelier-soft/chat-cuffs-paper.png");
}

.web-vnext.theme-dark .thread-header,
.web-vnext.theme-dark .message-composer {
    background: color-mix(in srgb, var(--flaeche) 94%, transparent);
    border-color: var(--linie);
}

.web-vnext.theme-dark .thread-header p {
    color: var(--gold-hell);
}

.web-vnext.theme-dark .thread-actions .icon-button {
    background: var(--weich);
    border-color: var(--linie);
    color: var(--gold-hell);
}

.web-vnext.theme-dark .thread-actions .icon-button:hover {
    background: var(--akzent-zart);
    border-color: var(--akzent-hell);
}

.web-vnext.theme-dark .thread-actions .icon-button:focus-visible {
    outline-color: var(--gold-hell);
}

.web-vnext.theme-dark .message-stage {
    background: rgba(24, 12, 25, .18);
}

.web-vnext.theme-dark .day-divider span,
.web-vnext.theme-dark .message-bubble,
.web-vnext.theme-dark .media-message,
.web-vnext.theme-dark .media-gallery {
    background: var(--flaeche-warm);
    border-color: var(--linie);
    color: var(--tinte);
}

.web-vnext.theme-dark .outgoing .message-bubble {
    background: linear-gradient(125deg, var(--akzent-hell), var(--akzent-tief));
    border-color: var(--akzent-hell);
    color: var(--text-auf-leder);
}

.web-vnext.theme-dark .outgoing .bubble-meta time,
.web-vnext.theme-dark .outgoing .edit-history-trigger,
.web-vnext.theme-dark .outgoing .edit-history-label,
.web-vnext.theme-dark .outgoing .delivery-state {
    color: rgba(255, 241, 216, .76);
}

.web-vnext.theme-dark .composer-row {
    background: var(--flaeche-warm);
    border-color: var(--linie);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
}

.web-vnext.theme-dark .composer-row:focus-within {
    border-color: var(--gold-dunkel);
    box-shadow: 0 0 0 3px rgba(201, 144, 85, .14);
}

.web-vnext.theme-dark .composer-tool {
    background: transparent;
    color: var(--gold-hell);
}

.web-vnext.theme-dark .pinned-messages,
.web-vnext.theme-dark .quick-reactions,
.web-vnext.theme-dark .emoji-palette,
.web-vnext.theme-dark .reaction-picker {
    background: var(--flaeche);
    border-color: var(--linie);
    color: var(--tinte);
}

.theme-dark .security-hero small {
    color: var(--tinte-weich);
}

.theme-dark .fingerprint-state.ok {
    color: var(--gruen);
}

.theme-dark .fingerprint-state.ok > .ph {
    background: var(--gruen-zart);
    color: var(--gruen);
}

/* ---------------------------------------------------- pr0gramm-Vorschaukarte

   Die Karte sitzt in der Sprechblase, ueber dem Text. Sie erbt deren
   Textfarbe, damit sie in der eigenen wie in der fremden Blase lesbar bleibt -
   die beiden haben unterschiedliche Hintergruende, und eine fest gesetzte
   Farbe waere in genau einer von beiden falsch. */
/* Ueber dem Text und nicht darunter, seit der eigene Satz dazwischen unterging:
   Wer einen Link mit einem Wort dazu schickt ("du?"), sah zuerst die fette
   Adresse, dann das Wort, dann ein 420 px breites Bild - das Wort war das
   Kleinste zwischen den beiden lautesten Dingen. Jetzt endet die Blase auf dem
   selbst Geschriebenen, wie die Bildblase auf ihrer Unterschrift. */
/* Breiter als die 320 px von frueher: Standbild, Tags und Kommentarzahl
   quetschten sich sonst in eine Spalte, in der sechs Tags vier Zeilen
   brauchten. Die Blase selbst laesst bis 600 px zu (.message-stack), die
   Karte war die Bremse. min() haelt sie auf schmalen Schirmen im Rahmen. */
.pr0-karte {
    margin-bottom: 8px;
    padding: 8px;
    border-radius: 12px;
    background: rgb(0 0 0 / 12%);
    width: min(420px, 100%);
}

/* Die Karte zeigt den Beitrag bereits. Die nackte Adresse im Text ist damit
   die Fussnote und nicht die Schlagzeile: Sie bleibt anklickbar, hoert aber
   auf, fett und in Akzentfarbe nach vorn zu draengen. Sonst ist das Lauteste
   in der Blase ausgerechnet der Teil, den niemand selbst geschrieben hat.
   Die Unterstreichung bleibt - sie und nicht die Farbe sagt "anklickbar". */
/* .message-bubble davor ist kein Schmuck: Ohne das gewaenne im dunklen Schema
   .web-vnext.theme-dark .chat-link mit seinen drei Klassen, und die
   zurueckgenommene Adresse traege in der fremden Blase Rose statt der
   Blasenfarbe - bei 3,5:1 statt 12,5:1. In der eigenen Blase setzt
   .theme-dark .outgoing .chat-link weiterhin --text-auf-leder; das faellt
   nicht auf, weil das genau die Farbe ist, die die Blase ihrem Text ohnehin
   gibt - also dasselbe, was inherit liefert. */
.message-bubble.mit-pr0-karte .chat-link {
    color: inherit;
    font-weight: 400;
    opacity: 0.72;
}

.pr0-buehne {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: #262126;
    line-height: 0;
}

/* Der Abspielknopf liegt ueber dem Standbild. Das Video selbst kommt erst,
   wenn jemand ihn drueckt - ein Verlauf mit zehn Videolinks zoege sonst zehn
   Dateien ueber den Server, von denen niemand eine sehen wollte. */
.pr0-abspielen {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 58px;
    height: 58px;
    border: 0;
    border-radius: 29px;
    background: rgb(104 27 69 / 67%);
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

.pr0-abspielen:disabled {
    cursor: progress;
}

.pr0-medien-fehler {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: 0 14px;
    color: #f0e6ea;
    font-size: 0.78rem;
    line-height: 1.4;
    text-align: center;
}

/* Hoehe begrenzt: Ein Hochkantvideo zoege die Blase sonst ueber den
   Bildschirm. Der Rest wird beschnitten, das Standbild bleibt mittig. */
.pr0-buehne img,
.pr0-buehne video {
    display: block;
    width: 100%;
    max-height: 320px;
    object-fit: contain;
}

.pr0-kopf {
    margin-top: 8px;
    font-size: 0.78rem;
    opacity: 0.85;
}

.pr0-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

/* Umbrechend und nicht waagerecht scrollend: Die Karte steckt in einer Liste,
   die selbst senkrecht scrollt, und zwei Scrollrichtungen ineinander erwischt
   man beim Wischen nie zuverlaessig. */
.pr0-tag {
    font-size: 0.72rem;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgb(0 0 0 / 14%);
    white-space: nowrap;
}

.pr0-tag-rest { opacity: 0.6; }

.pr0-kommentar-schalter {
    margin-top: 8px;
    padding: 5px 11px;
    border: 0;
    border-radius: 8px;
    background: rgb(0 0 0 / 16%);
    color: inherit;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}

.pr0-kommentar-schalter:hover { background: rgb(0 0 0 / 24%); }

/* ---------------------------------------------------- Kommentare im Overlay

   Vollbild auf dem Telefon, ein zentriertes Feld auf dem Schreibtisch. Der
   Verlauf dahinter bleibt sichtbar, aber abgedunkelt - das sagt "danach bist
   du wieder da, wo du warst" deutlicher als ein harter Seitenwechsel. */
.pr0-overlay {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgb(0 0 0 / 55%);
    backdrop-filter: blur(2px);
    animation: pr0-einblenden 140ms ease-out;
}

.pr0-overlay-feld {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 560px;
    max-height: 88vh;
    border-radius: 16px 16px 0 0;
    background: var(--flaeche, #fff7ed);
    color: var(--tinte, #351a21);
    box-shadow: 0 -8px 40px rgb(0 0 0 / 35%);
    animation: pr0-hochschieben 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
    outline: none;
}

@media (min-width: 640px) {
    .pr0-overlay { align-items: center; }
    .pr0-overlay-feld { border-radius: 16px; max-height: 82vh; }
}

@keyframes pr0-einblenden { from { opacity: 0; } to { opacity: 1; } }

@keyframes pr0-hochschieben {
    from { transform: translateY(24px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Die Kopfzeile bleibt stehen: Bei dreihundert Kommentaren ist der Weg zum
   Schliessen sonst ein Weg nach oben. */
.pr0-overlay-kopf {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 10px;
    border-bottom: 1px solid rgb(0 0 0 / 10%);
}

.pr0-overlay-kopf b { flex: 1; font-size: 1rem; }

.pr0-alle,
.pr0-schliessen {
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    border-radius: 8px;
}

.pr0-alle {
    font-size: 0.78rem;
    font-weight: 600;
    padding: 6px 9px;
    opacity: 0.8;
}

.pr0-alle:hover { background: rgb(0 0 0 / 8%); opacity: 1; }

.pr0-schliessen {
    width: 34px;
    height: 34px;
    font-size: 1rem;
    line-height: 1;
}

.pr0-schliessen:hover { background: rgb(0 0 0 / 8%); }

.pr0-overlay-körper {
    overflow-y: auto;
    padding: 6px 16px 20px;
    overscroll-behavior: contain;
}

/* Ein Strang je oberstem Kommentar, auf eigener Flaeche. */
.pr0-strang {
    margin: 10px 0;
    padding: 10px 12px;
    border-radius: 14px;
    background: var(--flaeche, #fff7ed);
    border: 1px solid var(--linie, #d5b293);
    box-shadow: 0 2px 8px rgb(47 40 32 / 6%);
}

.pr0-kommentar { padding: 4px 0; }

/* Antworten haengen an einer senkrechten Linie - dem sichtbaren Faden des
   Strangs. Sie verschwindet mit den Antworten, weil sie an ihnen haengt. */
.pr0-antwort {
    border-left: 2px solid rgb(101 39 61 / 22%);
    padding-left: 9px;
}

.pr0-kommentar p {
    margin: 2px 0 0 30px;
    font-size: 0.86rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.pr0-kommentar-kopf {
    display: flex;
    align-items: center;
    gap: 7px;
}

/* Der Anfangsbuchstabe gibt jeder Zeile einen Anker, an dem das Auge einhakt. */
.pr0-marke {
    flex: none;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.72rem;
    font-weight: 700;
    background: var(--akzent-zart, #f3dce0);
    color: var(--akzent, #65273d);
}

.pr0-marke-leer { background: var(--flaeche-warm, #f0dfd0); color: var(--tinte-zart, #8b7168); }

.pr0-name { font-size: 0.79rem; }
.pr0-name-leer { font-weight: 400; color: var(--tinte-zart, #8b7168); }

/* Ob ein Kommentar oben oder unten steht, ist die eine Angabe, die man beim
   Ueberfliegen wirklich benutzt - Farbe liest sich schneller als ein Vorzeichen. */
.pr0-punkte {
    flex: none;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 8px;
    white-space: nowrap;
}

.pr0-punkte-hoch { background: #e3e5d2; color: #596b3c; }
.pr0-punkte-tief { background: #f0d9d6; color: #9f3148; }
.pr0-punkte-null { background: var(--flaeche-warm, #f0dfd0); color: var(--tinte-zart, #8b7168); }

.pr0-antwortzahl {
    font-size: 0.7rem;
    opacity: 0.6;
    white-space: nowrap;
}

.pr0-luft { flex: 1; }

/* Der Griff ist die eigentliche Bedienung: Ohne ihn ist ein Strang mit
   dreissig Antworten eine Wand, durch die man nur scrollen kann. */
.pr0-griff {
    flex: none;
    min-width: 30px;
    padding: 2px 7px;
    border: 0;
    border-radius: 7px;
    background: rgb(0 0 0 / 8%);
    color: inherit;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.3;
    cursor: pointer;
}

.pr0-griff:hover { background: rgb(0 0 0 / 16%); }

/* Der angesprungene Kommentar ist der Grund, warum der Link ueberhaupt diese
   Form hatte - er darf nicht untergehen. */
.pr0-kommentar-ziel {
    background: rgb(255 227 163 / 45%);
    border-radius: 9px;
    padding: 6px 8px;
}

.pr0-laedt,
.pr0-fehler,
.pr0-hinweis {
    margin: 0;
    font-size: 0.78rem;
    opacity: 0.75;
}

.pr0-hinweis { margin-top: 4px; }

/* Die Blase setzt pre-wrap fuer den Nachrichtentext. In der Karte stammen
   Umbrueche und Einrueckung aber aus dem Razor-Quelltext - mit pre-wrap
   stand der Hinweis zerrissen und eingerueckt in der Blase. */
.message-bubble .pr0-karte p { white-space: normal; }

/* Im dunklen Thema kehren sich die Toenungen um.
   --flaeche und --tinte werden von .theme-dark ohnehin umdefiniert, das Feld
   folgt also von selbst. Die Aufhellungen darin nicht: Eine schwarze Toenung
   auf dunklem Grund ist keine Toenung mehr, sondern ein unsichtbarer Knopf. */
.theme-dark .pr0-karte { background: rgb(255 255 255 / 8%); }
.theme-dark .pr0-tag { background: rgb(255 255 255 / 12%); }
.theme-dark .pr0-kommentar-schalter { background: rgb(255 255 255 / 12%); }
.theme-dark .pr0-kommentar-schalter:hover { background: rgb(255 255 255 / 20%); }
.theme-dark .pr0-overlay-kopf { border-bottom-color: rgb(255 255 255 / 14%); }
.theme-dark .pr0-alle:hover,
.theme-dark .pr0-schliessen:hover { background: rgb(255 255 255 / 12%); }
.theme-dark .pr0-strang { background: rgb(255 255 255 / 6%); }
.theme-dark .pr0-antwort { border-left-color: rgb(247 217 148 / 30%); }
.theme-dark .pr0-griff { background: rgb(255 255 255 / 14%); }
.theme-dark .pr0-griff:hover { background: rgb(255 255 255 / 24%); }

.theme-dark .pr0-kommentar-ziel {
    background: rgb(247 217 148 / 12%);
    outline-color: rgb(247 217 148 / 34%);
}

/* ------------------------------------------------------------------
   Sendedialog für Bilder, Videos und Dateien.
   Ein Arbeitsplatz statt einer Karte: links die Bühne, rechts die
   Werkzeuge, unten Bildleiste, Unterschrift und Senden. In die Bühne
   zeichnet image-editor.js; hier steht nur ihr Rahmen.
   Die Regeln hängen an der ID, weil appearance.css Felder in Dialogen
   mit sehr spezifischen :is()-Selektoren einfärbt.
   ------------------------------------------------------------------ */
.media-composer-scrim { padding: 24px; }
#media-composer {
    --mc-stage: #141216;
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: 24px;
    box-shadow: 0 30px 80px rgb(20 12 18 / 34%);
    color: var(--tinte);
    display: grid;
    font-family: var(--ui-font);
    /* Ohne feste Spalte waechst das Raster auf die Breite seines breitesten
       Inhalts - auf dem Handy liefen Werkzeuge und Senden rechts hinaus. */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    height: min(860px, calc(100dvh - 48px));
    max-width: 1180px;
    min-width: 0;
    overflow: hidden;
    position: relative;
    width: 100%;
}
#media-composer.is-document { height: min(620px, calc(100dvh - 48px)); max-width: 900px; }
#media-composer.is-file-dragover::after {
    background: color-mix(in srgb, var(--akzent) 14%, transparent);
    border: 3px dashed var(--ui-focus);
    border-radius: 20px;
    content: "";
    inset: 8px;
    pointer-events: none;
    position: absolute;
    z-index: 6;
}
#media-composer button:disabled { cursor: not-allowed; opacity: .45; }
#media-composer :is(button, label, textarea, input):focus-visible {
    outline: 2px solid var(--ui-focus);
    outline-offset: 2px;
}

#media-composer .mc-header {
    align-items: center;
    border-bottom: 1px solid var(--linie-zart);
    display: flex;
    gap: 12px;
    padding: 10px 14px 10px 10px;
}
#media-composer .mc-heading { flex: 1; min-width: 0; }
#media-composer h2 {
    color: var(--tinte);
    font: 650 18px/1.25 var(--ui-font);
    letter-spacing: -.01em;
    margin: 0;
}
#media-composer .mc-heading p {
    align-items: center;
    color: var(--tinte-weich);
    display: flex;
    font-size: 12px;
    gap: 5px;
    margin: 2px 0 0;
    min-width: 0;
}
#media-composer .mc-heading p span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#media-composer .mc-heading p .ph { color: var(--gruen); flex: 0 0 auto; font-size: 14px; }
#media-composer .mc-heading b { color: var(--tinte); font-weight: 650; }
#media-composer .mc-icon-button {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 12px;
    color: var(--tinte-weich);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 20px;
    height: 40px;
    justify-content: center;
    padding: 0;
    width: 40px;
}
#media-composer .mc-icon-button:hover:not(:disabled) { background: var(--weich); color: var(--tinte); }
#media-composer .mc-history { align-items: center; display: flex; gap: 2px; }
#media-composer .mc-text-button {
    background: transparent;
    border: 0;
    border-radius: 10px;
    color: var(--ui-accent-text);
    cursor: pointer;
    font: 600 13px var(--ui-font);
    margin-left: 4px;
    padding: 9px 12px;
}
#media-composer .mc-text-button:hover:not(:disabled) { background: var(--akzent-zart); }

#media-composer .mc-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 336px;
    min-height: 0;
}
#media-composer .mc-stage-frame {
    background: radial-gradient(circle at 50% 42%, #231f27 0%, var(--mc-stage) 72%);
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    position: relative;
}
#media-composer .mc-stage { inset: 0; position: absolute; }
#media-composer .mc-canvas { display: block; height: 100%; touch-action: none; user-select: none; width: 100%; }
#media-composer .mc-stage-state {
    align-items: center;
    color: #efe9f1;
    display: flex;
    flex-direction: column;
    font-size: 13px;
    gap: 12px;
    inset: 0;
    justify-content: center;
    position: absolute;
    z-index: 3;
}
#media-composer .mc-stage-state.is-sending { backdrop-filter: blur(2px); background: rgb(12 10 14 / 62%); }
#media-composer .mc-stage-state progress {
    accent-color: #fff;
    block-size: 6px;
    inline-size: min(240px, 60%);
}
#media-composer .mc-spinner {
    animation: mc-spin .8s linear infinite;
    border: 3px solid rgb(255 255 255 / 22%);
    border-radius: 50%;
    border-top-color: #fff;
    display: inline-block;
    height: 28px;
    width: 28px;
}
@keyframes mc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    #media-composer .mc-spinner { animation-duration: 2.4s; }
}
#media-composer .mc-text-input {
    --mc-text-outline: #111114;
    background: rgb(12 10 14 / 28%);
    border: 1px dashed rgb(255 255 255 / 75%);
    border-radius: 8px;
    caret-color: currentColor;
    field-sizing: content;
    font-family: var(--ui-font);
    font-weight: 700;
    line-height: 1.18;
    max-width: 80%;
    min-height: 0;
    min-width: 3ch;
    outline: none;
    overflow: hidden;
    padding: 2px 8px;
    position: absolute;
    resize: none;
    text-align: center;
    text-shadow:
        1px 1px 0 var(--mc-text-outline), -1px -1px 0 var(--mc-text-outline),
        1px -1px 0 var(--mc-text-outline), -1px 1px 0 var(--mc-text-outline),
        0 0 3px var(--mc-text-outline);
    transform: translate(-50%, -50%);
    z-index: 2;
}

#media-composer .mc-panel {
    background: var(--flaeche);
    border-left: 1px solid var(--linie-zart);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px 16px 14px;
    scrollbar-width: thin;
}
#media-composer .mc-section { border-bottom: 1px solid var(--linie-zart); padding: 12px 0 16px; }
#media-composer .mc-section:last-child { border-bottom: 0; }
#media-composer .mc-section h3 {
    color: var(--tinte-weich);
    font: 700 11px var(--ui-font);
    letter-spacing: .08em;
    margin: 0 0 10px;
    text-transform: uppercase;
}
#media-composer .mc-tools { display: grid; gap: 6px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
#media-composer .mc-tool {
    align-items: center;
    background: var(--flaeche-warm);
    border: 1px solid transparent;
    border-radius: 14px;
    color: var(--tinte);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font: 600 11px var(--ui-font);
    gap: 5px;
    justify-content: center;
    min-height: 64px;
    padding: 8px 2px;
}
#media-composer .mc-tool .ph { font-size: 22px; }
#media-composer .mc-tool:hover:not(:disabled) { border-color: var(--linie); }
#media-composer .mc-tool.is-active {
    background: var(--akzent-zart);
    border-color: var(--ui-accent-text);
    color: var(--ui-accent-text);
}
#media-composer .mc-quick { display: flex; gap: 6px; margin-top: 8px; }
#media-composer .mc-quick button {
    align-items: center;
    background: transparent;
    border: 1px solid var(--linie);
    border-radius: 12px;
    color: var(--tinte);
    cursor: pointer;
    display: inline-flex;
    flex: 1;
    font-size: 19px;
    height: 40px;
    justify-content: center;
}
#media-composer .mc-quick button:hover:not(:disabled) { background: var(--flaeche-warm); }
#media-composer .mc-options { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
#media-composer .mc-label { color: var(--tinte-weich); font-size: 12px; font-weight: 600; }
#media-composer .mc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
#media-composer .mc-chip {
    background: var(--flaeche-warm);
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--tinte);
    cursor: pointer;
    font: 600 12px var(--ui-font);
    padding: 7px 12px;
}
#media-composer .mc-chip:hover { border-color: var(--linie); }
#media-composer .mc-chip.is-active { background: var(--akzent); color: #fff; }
#media-composer .mc-apply {
    align-items: center;
    background: var(--akzent);
    border: 0;
    border-radius: 12px;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font: 650 13px var(--ui-font);
    gap: 6px;
    justify-content: center;
    margin-top: 4px;
    min-height: 40px;
}
#media-composer .mc-apply:hover { background: var(--akzent-tief); }
#media-composer .mc-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
#media-composer .mc-swatch {
    background: var(--swatch);
    border: 2px solid var(--flaeche);
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--linie);
    cursor: pointer;
    height: 30px;
    padding: 0;
    width: 30px;
}
#media-composer .mc-swatch.is-active { box-shadow: 0 0 0 2px var(--ui-accent-text); }
#media-composer .mc-segmented {
    background: var(--flaeche-warm);
    border-radius: 12px;
    display: grid;
    gap: 3px;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    padding: 3px;
}
#media-composer .mc-segmented button {
    background: transparent;
    border: 0;
    border-radius: 9px;
    color: var(--tinte-weich);
    cursor: pointer;
    font: 600 12px var(--ui-font);
    min-height: 34px;
    padding: 6px 8px;
}
#media-composer .mc-segmented button.is-active {
    background: var(--akzent-zart);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-accent-text) 55%, transparent);
    color: var(--ui-accent-text);
}
#media-composer .mc-quality button { display: flex; flex-direction: column; gap: 1px; min-height: 50px; }
#media-composer .mc-quality b { font-size: 13px; }
#media-composer .mc-quality small { font-size: 11px; font-weight: 500; opacity: .85; }
#media-composer :is(.mc-hint, .mc-note) { color: var(--tinte-weich); font-size: 12px; line-height: 1.5; margin: 0; }
#media-composer .mc-note { display: flex; gap: 8px; }
#media-composer .mc-tool-hint { margin-top: 10px; }
#media-composer .mc-note .ph { font-size: 18px; }
#media-composer .mc-switch {
    align-items: flex-start;
    cursor: pointer;
    display: grid;
    gap: 10px;
    grid-template-columns: auto minmax(0, 1fr);
    margin-top: 14px;
    position: relative;
}
#media-composer .mc-switch input { height: 1px; margin: 0; opacity: 0; position: absolute; width: 1px; }
#media-composer .mc-switch-track {
    background: var(--linie);
    border-radius: 999px;
    height: 22px;
    margin-top: 1px;
    position: relative;
    transition: background .15s;
    width: 38px;
}
#media-composer .mc-switch-track::after {
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgb(0 0 0 / 30%);
    content: "";
    height: 18px;
    left: 2px;
    position: absolute;
    top: 2px;
    transition: transform .15s;
    width: 18px;
}
#media-composer .mc-switch input:checked + .mc-switch-track { background: var(--akzent); }
#media-composer .mc-switch input:checked + .mc-switch-track::after { transform: translateX(16px); }
#media-composer .mc-switch input:focus-visible + .mc-switch-track { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
#media-composer .mc-switch b { display: block; font-size: 13px; font-weight: 600; }
#media-composer .mc-switch small { color: var(--tinte-weich); display: block; font-size: 12px; margin-top: 2px; }
#media-composer .mc-warning {
    align-items: flex-start;
    background: var(--rose-zart);
    border-radius: 12px;
    color: var(--rose);
    display: flex;
    font-size: 12px;
    gap: 8px;
    line-height: 1.45;
    margin: 10px 0 0;
    padding: 9px 11px;
}
#media-composer .mc-warning .ph { flex: 0 0 auto; font-size: 16px; }
#media-composer .mc-facts dl { display: grid; gap: 10px; margin: 0; }
#media-composer .mc-facts dl div { display: grid; gap: 2px; }
#media-composer .mc-facts dt { color: var(--tinte-weich); font-size: 12px; }
#media-composer .mc-facts dd { font-size: 13px; font-variant-numeric: tabular-nums; margin: 0; }
#media-composer .mc-facts dd small {
    background: var(--gruen-zart);
    border-radius: 999px;
    color: var(--gruen);
    font-size: 11px;
    font-weight: 600;
    margin-left: 4px;
    padding: 2px 7px;
    white-space: nowrap;
}

#media-composer .mc-strip {
    align-items: center;
    border-top: 1px solid var(--linie-zart);
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 10px 14px;
    scrollbar-width: thin;
}
#media-composer .mc-thumb { flex: 0 0 auto; position: relative; }
#media-composer .mc-thumb[draggable="true"] { cursor: grab; }
#media-composer .mc-thumb-select {
    background: var(--mc-stage);
    border: 2px solid transparent;
    border-radius: 14px;
    cursor: pointer;
    display: block;
    height: 64px;
    overflow: hidden;
    padding: 0;
    position: relative;
    width: 64px;
}
#media-composer .mc-thumb-select img { display: block; height: 100%; object-fit: cover; width: 100%; }
#media-composer .mc-thumb.is-selected .mc-thumb-select {
    border-color: var(--ui-accent-text);
    box-shadow: 0 0 0 3px var(--akzent-zart);
}
#media-composer .mc-thumb-marks {
    background: rgb(12 10 14 / 72%);
    border-radius: 7px;
    bottom: 4px;
    color: #fff;
    display: flex;
    font-size: 11px;
    gap: 2px;
    left: 4px;
    padding: 2px 4px;
    position: absolute;
}
#media-composer .mc-thumb-remove {
    align-items: center;
    background: rgb(12 10 14 / 78%);
    border: 0;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font-size: 12px;
    height: 22px;
    justify-content: center;
    opacity: 0;
    padding: 0;
    position: absolute;
    right: 5px;
    top: 5px;
    transition: opacity .12s;
    width: 22px;
}
#media-composer .mc-thumb:is(:hover, :focus-within, .is-selected) .mc-thumb-remove { opacity: 1; }
@media (hover: none) {
    #media-composer .mc-thumb-remove { opacity: 1; }
}
#media-composer .mc-thumb-add {
    align-items: center;
    border: 1.5px dashed var(--linie);
    border-radius: 14px;
    color: var(--tinte-weich);
    cursor: pointer;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    font-size: 22px;
    height: 64px;
    justify-content: center;
    width: 64px;
}
#media-composer .mc-thumb-add small { font-size: 10px; font-weight: 600; }
#media-composer .mc-thumb-add:hover { border-color: var(--ui-accent-text); color: var(--ui-accent-text); }
#media-composer .mc-thumb-add.is-disabled { opacity: .45; pointer-events: none; }

#media-composer .mc-footer {
    border-top: 1px solid var(--linie-zart);
    display: grid;
    gap: 8px;
    padding: 12px 14px;
}
#media-composer .mc-compose { align-items: flex-end; display: flex; gap: 10px; }
#media-composer .mc-caption-box {
    align-items: flex-end;
    background: var(--flaeche-warm);
    border: 1px solid var(--linie-zart);
    border-radius: 18px;
    display: flex;
    flex: 1;
    gap: 2px;
    min-width: 0;
    padding: 4px 12px 4px 4px;
}
#media-composer .mc-caption-box:focus-within { border-color: var(--ui-focus); }
#media-composer .mc-caption-box textarea {
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--tinte);
    field-sizing: content;
    flex: 1;
    font: 15px/1.4 var(--ui-font);
    max-height: 112px;
    min-height: 40px;
    min-width: 0;
    outline: none;
    padding: 9px 4px;
    resize: none;
}
#media-composer .mc-caption-box textarea::placeholder { color: var(--tinte-zart); }
#media-composer .mc-counter {
    color: var(--tinte-zart);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    padding-bottom: 12px;
}
#media-composer .mc-counter.is-near { color: var(--rose); font-weight: 650; }
#media-composer .mc-send {
    align-items: center;
    background: var(--akzent);
    border: 0;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgb(123 48 75 / 28%);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    font: 650 15px var(--ui-font);
    gap: 10px;
    min-height: 50px;
    padding: 0 20px;
}
#media-composer .mc-send .ph { font-size: 19px; }
#media-composer .mc-send:hover:not(:disabled) { background: var(--akzent-tief); }
#media-composer .mc-footnote {
    align-items: center;
    color: var(--tinte-zart);
    display: flex;
    font-size: 11px;
    gap: 6px;
    margin: 0;
}
#media-composer .mc-emoji-row { display: flex; flex-wrap: wrap; gap: 2px; }
#media-composer .mc-emoji-row button {
    background: transparent;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    font-size: 22px;
    height: 40px;
    padding: 0;
    width: 40px;
}
#media-composer .mc-emoji-row button:hover { background: var(--weich); }
#media-composer :is(.mc-alert, .mc-notice) {
    align-items: center;
    border-radius: 12px;
    display: flex;
    font-size: 13px;
    gap: 8px;
    line-height: 1.4;
    margin: 0;
    padding: 4px 4px 4px 12px;
}
#media-composer .mc-alert { background: var(--rose-zart); color: var(--rose); }
#media-composer .mc-notice { background: var(--flaeche-warm); color: var(--tinte-weich); }
#media-composer :is(.mc-alert, .mc-notice) span { flex: 1; }
#media-composer :is(.mc-alert, .mc-notice) .mc-icon-button { color: inherit; font-size: 15px; height: 32px; width: 32px; }
#media-composer .mc-confirm {
    align-items: center;
    background: rgb(12 10 14 / 55%);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 20px;
    position: absolute;
    z-index: 7;
}
#media-composer .mc-confirm > div {
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: 20px;
    box-shadow: var(--schatten);
    max-width: 380px;
    padding: 22px;
    width: 100%;
}
#media-composer .mc-confirm h3 { color: var(--tinte); font: 650 18px var(--ui-font); letter-spacing: 0; margin: 0; }
#media-composer .mc-confirm p { color: var(--tinte-weich); font-size: 13px; line-height: 1.5; margin: 8px 0 18px; }
#media-composer .mc-confirm-actions { display: flex; gap: 8px; justify-content: flex-end; }
#media-composer .mc-confirm-actions button {
    background: var(--weich);
    border: 0;
    border-radius: 12px;
    color: var(--tinte);
    cursor: pointer;
    font: 600 14px var(--ui-font);
    min-height: 42px;
    padding: 0 16px;
}
#media-composer .mc-confirm-actions .danger-action { background: #b3263e; color: #fff; }

#media-composer .mc-video-stage { align-items: center; display: flex; justify-content: center; padding: 18px; }
#media-composer .mc-video-stage video {
    background: #000;
    border-radius: 12px;
    display: block;
    max-height: 100%;
    max-width: 100%;
}
#media-composer .video-trim-controls { margin-top: 0; }
#media-composer .video-trim-controls label > span,
#media-composer .video-quality-control > span { display: flex; font-size: 13px; justify-content: space-between; }
#media-composer .video-quality-control { display: grid; gap: 6px; }
#media-composer .video-quality-control small { color: var(--tinte-weich); font-size: 11px; }
#media-composer .mc-meter { background: var(--weich); border-radius: 999px; height: 8px; margin-top: 16px; overflow: hidden; }
#media-composer .mc-meter span { background: var(--gruen); border-radius: inherit; display: block; height: 100%; transition: width .2s; }
#media-composer .mc-meter.is-over span { background: var(--rose); }
#media-composer .mc-meter-label { font-size: 13px; margin: 6px 0 0; }
#media-composer .video-resolution { flex-wrap: wrap; font-size: 12px; }
#media-composer .video-oversize { color: var(--tinte); font-size: 12px; }

#media-composer .mc-document-stage { align-items: center; display: flex; justify-content: center; padding: 24px; }
#media-composer .mc-file-card {
    align-items: center;
    background: var(--flaeche);
    border-radius: 22px;
    box-shadow: 0 20px 50px rgb(0 0 0 / 38%);
    color: var(--tinte);
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 360px;
    padding: 30px 28px;
    text-align: center;
    width: 100%;
}
#media-composer .mc-file-icon {
    align-items: center;
    background: var(--akzent-zart);
    border-radius: 18px;
    color: var(--ui-accent-text);
    display: flex;
    flex-direction: column;
    font-size: 40px;
    height: 88px;
    justify-content: center;
    margin-bottom: 8px;
    width: 76px;
}
#media-composer .mc-file-icon b { font-size: 11px; letter-spacing: .06em; }
#media-composer .mc-file-card strong { font-size: 15px; overflow-wrap: anywhere; }
#media-composer .mc-file-card small { color: var(--tinte-weich); font-size: 13px; }

@media (max-width: 760px) {
    .media-composer-scrim.action-scrim { align-items: stretch; padding: 0; }
    #media-composer {
        border: 0;
        border-radius: 0;
        height: 100dvh;
        max-width: none;
    }
    #media-composer.is-document { height: 100dvh; }
    #media-composer .mc-header { gap: 6px; padding: calc(env(safe-area-inset-top, 0px) + 6px) 8px 6px 4px; }
    #media-composer .mc-text-button { padding: 9px 8px; }
    #media-composer .mc-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(200px, 1fr) auto; }
    #media-composer .mc-panel {
        border-left: 0;
        border-top: 1px solid var(--linie-zart);
        max-height: 36dvh;
        padding: 0 12px 6px;
    }
    #media-composer .mc-section { padding: 10px 0 12px; }
    #media-composer .mc-section h3 { margin-bottom: 8px; }
    #media-composer .mc-tool { min-height: 54px; }
    #media-composer.is-image .mc-facts { display: none; }
    #media-composer .mc-strip { padding: 8px 10px; }
    #media-composer :is(.mc-thumb-select, .mc-thumb-add) { height: 54px; width: 54px; }
    #media-composer .mc-footer { padding: 8px 10px max(10px, env(safe-area-inset-bottom)); }
    #media-composer .mc-footnote { display: none; }
    #media-composer .mc-send { border-radius: 50%; height: 50px; justify-content: center; padding: 0; width: 50px; }
    #media-composer .mc-send span { display: none; }
}

/* Gemeinsamer Kalender ---------------------------------------------------
   Farben nur über die Tokens aus appearance.css und je Termin eine feste
   Kennfarbe. Die Kennfarben bleiben in beiden Modi dieselben: Ein Termin soll
   auf dem Telefon und im Browser, hell wie dunkel, gleich wiederzuerkennen
   sein. */
.farbe-rose { --kalender-farbe: #c2456b; }
.farbe-koralle { --kalender-farbe: #e0694f; }
.farbe-gold { --kalender-farbe: #c9962b; }
.farbe-salbei { --kalender-farbe: #6f9a6b; }
.farbe-minze { --kalender-farbe: #3fa596; }
.farbe-himmel { --kalender-farbe: #4a8fd6; }
.farbe-flieder { --kalender-farbe: #9a6cc9; }
.farbe-grau { --kalender-farbe: #857f8c; }

.kalender-kopf-aktionen { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
.kalender-schloss { align-items: center; color: var(--tinte-weich); display: inline-flex; font-size: 12px; gap: 6px; }
.kalender-schloss .ph { font-size: 17px; }
.kalender-gespraech { align-items: center; color: var(--tinte-weich); display: inline-flex; font-size: 12px; gap: 8px; }
.kalender-gespraech select { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px; color: var(--tinte); font: 600 13px var(--ui-font); min-height: 40px; padding: 0 10px; }
.kalender-neu { align-items: center; display: inline-flex; gap: 8px; }
.kalender-neu .ph { font-size: 18px; }
.kalender-workspace > .workspace-notice { border: 1px solid var(--linie); border-radius: 12px; margin: 0 auto 18px; max-width: 1240px; padding: 12px 16px; }

.kalender-layout { align-items: start; display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); margin: 0 auto; max-width: 1240px; }
.kalender-monat, .kalender-liste { background: var(--flaeche); border: 1px solid var(--linie-zart); border-radius: 16px; box-shadow: var(--schatten-zart); color: var(--tinte); }
.kalender-monat { padding: 18px; }
.kalender-monat-kopf { align-items: center; display: flex; gap: 8px; margin-bottom: 14px; }
.kalender-monat-kopf h2 { flex: 1; font: 650 20px var(--ui-font); letter-spacing: -.3px; margin: 0; }
.kalender-knopf { align-items: center; background: var(--flaeche-warm); border: 1px solid var(--linie); border-radius: 10px; color: var(--tinte); cursor: pointer; display: inline-flex; font: 600 13px var(--ui-font); gap: 6px; justify-content: center; min-height: 38px; min-width: 38px; padding: 0 12px; }
.kalender-knopf:hover:not(:disabled) { background: var(--akzent-zart); color: var(--ui-accent-text); }
.kalender-knopf:disabled { cursor: default; opacity: .5; }
.kalender-knopf .ph { font-size: 17px; }

.kalender-raster { display: grid; gap: 4px; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.kalender-wochentag { color: var(--tinte-zart); font: 700 10px var(--ui-font); letter-spacing: 1px; padding: 4px 0 6px; text-align: center; }
.kalender-tag { align-items: stretch; background: var(--papier); border: 1px solid transparent; border-radius: 10px; color: var(--tinte); cursor: pointer; display: flex; flex-direction: column; font: 12px var(--ui-font); gap: 3px; min-height: 96px; min-width: 0; padding: 6px; text-align: left; }
.kalender-tag:hover { border-color: var(--linie); }
.kalender-tag.fremd { opacity: .45; }
.kalender-tag.gewaehlt { background: var(--akzent-zart); border-color: var(--ui-accent-text); }
.kalender-tageszahl { align-items: center; align-self: flex-start; border-radius: 12px; display: inline-flex; font-weight: 700; height: 24px; justify-content: center; min-width: 24px; padding: 0 5px; }
.kalender-tag.heute .kalender-tageszahl { background: var(--akzent); color: #fff; }
.kalender-chip { background: color-mix(in srgb, var(--kalender-farbe) 18%, var(--flaeche)); border-left: 3px solid var(--kalender-farbe); border-radius: 6px; color: var(--tinte); display: block; font-size: 11px; line-height: 1.35; overflow: hidden; padding: 1px 6px; text-overflow: ellipsis; white-space: nowrap; }
.kalender-mehr { color: var(--tinte-weich); font-size: 11px; padding-left: 4px; }

.kalender-seite { display: flex; flex-direction: column; gap: 18px; }
.kalender-liste { padding: 14px; }
.kalender-liste-kopf { align-items: center; display: flex; gap: 10px; justify-content: space-between; margin-bottom: 8px; }
.kalender-liste-kopf h2 { font: 650 16px var(--ui-font); margin: 0; }
.kalender-leer { color: var(--tinte-weich); font-size: 13px; margin: 4px 2px 6px; }
.kalender-eintrag { align-items: center; background: transparent; border: 0; border-radius: 10px; color: var(--tinte); cursor: pointer; display: grid; font: 13px var(--ui-font); gap: 10px; grid-template-columns: 4px minmax(0, 1fr) auto; padding: 9px 8px; text-align: left; width: 100%; }
.kalender-eintrag::before { align-self: stretch; background: var(--kalender-farbe); border-radius: 2px; content: ""; }
.kalender-eintrag:hover { background: var(--flaeche-warm); }
.kalender-eintrag b { display: block; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kalender-eintrag small { color: var(--tinte-weich); display: block; font-size: 12px; margin-top: 2px; }
.kalender-symbole { color: var(--tinte-zart); display: flex; font-size: 15px; gap: 4px; }

.kalender-dialog .feature-card { max-width: 560px; width: 100%; }
.kalender-felder { border: 0; margin: 0; min-width: 0; padding: 0; }
.kalender-zeile { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr) minmax(0, 140px); }
.kalender-dialog .field-stack select { border: 1px solid var(--linie); min-height: 44px; padding: 0 12px; }
.kalender-dialog .field-stack input[type="date"], .kalender-dialog .field-stack input[type="time"] { min-height: 44px; }
.kalender-schalter { align-items: center; color: var(--tinte); display: flex; font-size: 13px; font-weight: 600; gap: 10px; margin-top: 15px; }
.kalender-schalter input { height: 18px; width: 18px; }
.kalender-farbfeld { border: 0; margin: 15px 0 0; padding: 0; }
.kalender-farbfeld legend { color: var(--tinte-weich); font-size: 11px; font-weight: 700; margin-bottom: 7px; }
.kalender-farben { display: flex; flex-wrap: wrap; gap: 8px; }
.kalender-farbwahl { background: var(--kalender-farbe); border: 3px solid var(--flaeche); border-radius: 50%; box-shadow: 0 0 0 1px var(--linie); cursor: pointer; height: 34px; width: 34px; }
.kalender-farbwahl[aria-checked="true"] { box-shadow: 0 0 0 2px var(--tinte); }
.kalender-meta { color: var(--tinte-weich); font-size: 12px; line-height: 1.5; margin: 6px 0 0; }
.kalender-fehler { border: 1px solid var(--linie); border-radius: 12px; margin-top: 16px; padding: 10px 14px; }
.kalender-loeschen { background: var(--rose-zart); border-radius: 12px; color: var(--tinte); margin-top: 16px; padding: 12px 14px; }
.kalender-loeschen p { margin: 0 0 10px; }
.kalender-loeschen div { display: flex; flex-wrap: wrap; gap: 8px; }
.kalender-loeschen button { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px; color: var(--tinte); cursor: pointer; font-weight: 700; min-height: 40px; padding: 0 14px; }
.kalender-loeschen .danger-action { background: var(--rose); border-color: transparent; color: #fff; }
.modal-actions > .kalender-loeschen-knopf { color: var(--rose); margin-right: auto; }

.kalender-erinnerung-hinweis { align-items: flex-start; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 14px; box-shadow: var(--schatten); color: var(--tinte); display: flex; gap: 12px; max-width: 360px; padding: 14px 16px; position: fixed; right: 24px; top: 88px; z-index: 40; }
.kalender-erinnerung-hinweis > .ph { color: var(--ui-accent-text); font-size: 24px; }
.kalender-erinnerung-hinweis b { display: block; font-size: 13px; }
.kalender-erinnerung-hinweis p { font-size: 13px; margin: 3px 0 6px; }
.kalender-erinnerung-hinweis small { color: var(--tinte-weich); display: block; font-size: 11px; margin-bottom: 6px; }
.kalender-erinnerung-hinweis div > button { background: var(--akzent); border: 0; border-radius: 9px; color: #fff; cursor: pointer; font: 600 12px var(--ui-font); min-height: 34px; padding: 0 12px; }
.kalender-hinweis-zu { background: transparent; border: 0; color: var(--tinte-weich); cursor: pointer; font-size: 20px; line-height: 1; }

@media (max-width: 1000px) {
    .kalender-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
    .kalender-monat { padding: 12px; }
    .kalender-raster { gap: 2px; }
    .kalender-tag { gap: 2px; min-height: 58px; padding: 4px 3px; }
    .kalender-tageszahl { font-size: 12px; height: 22px; min-width: 22px; }
    /* Am Telefon reicht ein Farbbalken je Termin; die Tagesliste nennt die Titel. */
    .kalender-chip { background: var(--kalender-farbe); border-left: 0; font-size: 0; height: 5px; padding: 0; }
    .kalender-mehr { font-size: 9px; padding-left: 1px; }
    .kalender-kopf-aktionen { justify-content: flex-start; }
    .kalender-zeile { grid-template-columns: minmax(0, 1fr) minmax(0, 120px); }
    .kalender-erinnerung-hinweis { left: 12px; max-width: none; right: 12px; top: 72px; }
}

/* Medien lassen sich im Browser nicht speichern (15.09.2026).
   Ergänzt js/medien-schutz.js: kein Herausziehen auf den Desktop, kein
   Langdruckmenü auf Touchgeräten, und gedruckt bleiben Bilder und Videos leer.
   Eine Hürde, kein Schutz - Bildschirmfotos kann eine Webseite nicht
   verhindern. */
img,
video,
canvas {
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    user-select: none;
}

@media print {
    img,
    video,
    canvas { visibility: hidden !important; }
}