/**
 * BAUSTEINE — die gemeinsamen Bauteile aller Seitenfamilien
 * (Design-Update E1-3, 15.10.2026): Knopf, Login-Knopf, Seitenkopf, Fuß.
 *
 * WARUM: Der Login stand an acht Stellen in sechs Gestalten, die Fußzeile in
 * vier, die Seitenköpfe als Kasten im Kasten. Hier steht jedes Bauteil EINMAL;
 * die Seiten setzen es über eine Partial ein (views/partials/login_knopf.ejs,
 * seiten_fuss.ejs, jb_hero_band.ejs).
 *
 * REGELN (tests/bausteine.test.js hält sie fest):
 *   - Werte nur aus tokens.css. Ein Ton, der fehlt, kommt dort als Rolle
 *     dazu — hier steht kein Farb-Literal.
 *   - Keine Bootstrap-Klassen: Casino- und Team-Hülle laden Bootstrap nicht.
 *   - Namensraum .jt-*. Wo ein Bauteil eine Linkfarbe setzt (Hauptknopf,
 *     Links im Fuß), trägt die Regel eine Klasse MEHR als nötig: Allgemeine
 *     Link-Regeln wie `.cas-body a` (0,1,1) oder `body.ob a` (0,1,2) schlugen
 *     sonst die Schrift — so stand am Coins-Tor goldene Schrift auf Lila.
 *   - Ein eigener Block für reduzierte Bewegung (am Ende).
 *
 * Geladen in v2_head_assets, casino_doc_start und team_orangebonus, jeweils
 * nach tokens.css (tests/helfer/tokenQuelle.js).
 */

/* ===== Knopf ============================================================= */

.jt-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--jt-a-2);
    min-height: 44px;
    padding: 0 var(--jt-a-6);
    border: 1px solid transparent;
    border-radius: var(--jt-r-pille);
    font-family: var(--jt-schrift-text);
    font-size: var(--jt-t-m);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: filter var(--jt-zeit-kurz) var(--jt-kurve), transform var(--jt-zeit-kurz) var(--jt-kurve), border-color var(--jt-zeit-kurz) var(--jt-kurve);
}

.jt-knopf:focus-visible {
    outline: 2px solid var(--jt-fokus);
    outline-offset: 3px;
}

/* Der Hauptknopf: Orange, dunkle Schrift (Bauregel 11). Die doppelte Klasse
   (0,2,0) ist Absicht — siehe Kopf dieser Datei. */
.jt-knopf.jt-knopf--haupt {
    border-color: var(--jt-cta-kante);
    background: var(--jt-cta-grund);
    color: var(--jt-cta-text);
    box-shadow: var(--jt-cta-schatten);
}

.jt-knopf.jt-knopf--haupt:hover,
.jt-knopf.jt-knopf--haupt:focus-visible {
    color: var(--jt-cta-text);
    filter: brightness(1.06);
    transform: translateY(-1px);
}

/* Der neutrale Knopf: Rauchglas mit Messingkante (Abbrechen, Zurück). */
.jt-knopf.jt-knopf--neutral {
    border-color: var(--jt-knopf-neutral-kante);
    background: var(--jt-knopf-neutral-grund);
    color: var(--jt-text);
}

.jt-knopf.jt-knopf--neutral:hover,
.jt-knopf.jt-knopf--neutral:focus-visible {
    border-color: var(--jt-messing);
    color: var(--jt-text);
}

/* Größen: die Hauptaktion einer Seite 52 px, in der Kopfzeile 40 px. */
.jt-knopf--gross {
    min-height: 52px;
    padding: 0 var(--jt-a-8);
}

.jt-knopf--kopf {
    min-height: 40px;
    padding: 0 var(--jt-a-4);
    font-size: var(--jt-t-s);
}

.jt-knopf--breit {
    display: flex;
    width: 100%;
}

/* ===== Login-Knopf (Wahlzettel F3-A) =====================================
   Immer „Mit Discord einloggen", immer Orange — views/partials/login_knopf.ejs.
   Das Discord-Zeichen erbt die dunkle Schrift: Es ist Teil des Knopfs, kein
   Logo-Aufkleber (marken-icons.css zeichnet es als Maske in currentColor). */

.jt-login .fa-discord {
    font-size: 1.12em;
    color: inherit;
}

/* In der Kopfzeile bleibt unter 576 px nur das Zeichen. Der Text verschwindet
   OPTISCH, nicht für Vorleser: Vorher stand er in `d-none d-sm-inline`, das
   Zeichen war aria-hidden — schmal war der Knopf damit namenlos. */
@media (max-width: 575.98px) {
    .jt-login__text--schmal {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }

    .jt-knopf--kopf:has(.jt-login__text--schmal) {
        min-width: 44px;
        padding: 0 var(--jt-a-3);
    }

    /* Das Zeichen allein sagt nicht, was der Knopf tut (Audit 26.10.2026):
       Neben ihm steht „Login" — für Augen. Vorleser hören weiter den vollen
       Text, das kurze Wort ist aria-hidden. */
    .jt-login .jt-login__kurz {
        display: inline;
    }
}

.jt-login__kurz {
    display: none;
}

/* ===== Sprunglink (Audit 26.10.2026) =====================================
   Unsichtbar, bis die Tab-Taste ihn trifft — dann oben links, in den Farben
   des Hauptknopfs. views/partials/v2_doc_start.ejs. */
.jt-sprung {
    position: absolute;
    top: -80px;
    left: var(--jt-a-3);
    z-index: 2000;
    padding: var(--jt-a-2) var(--jt-a-4);
    border-radius: var(--jt-r-pille);
    background: var(--jt-cta-grund);
    color: var(--jt-cta-text);
    font-weight: 800;
    text-decoration: none;
}

.jt-sprung:focus,
.jt-sprung:focus-visible {
    top: var(--jt-a-3);
    outline: 2px solid var(--jt-fokus);
    outline-offset: 3px;
}

/* ===== Seitenkopf (Wahlzettel F6-A „Bühne ohne Kasten") ===================
   Kein Kasten: Der Titel steht frei auf dem Hallenfoto, das Licht des
   Kronleuchters fällt von oben auf ihn, darunter eine Messinglinie.
   views/partials/jb_hero_band.ejs. */

.jt-seitenkopf {
    position: relative;
    isolation: isolate;
    margin: 0 0 var(--jt-a-8);
    padding: clamp(22px, 4vw, 44px) 0 6px;
    text-align: center;
}

.jt-seitenkopf::before {
    content: "";
    position: absolute;
    left: 50%;
    top: clamp(-150px, -12vw, -90px);
    z-index: -1;
    width: min(760px, 100%);
    height: calc(100% + 140px);
    transform: translateX(-50%);
    background: var(--jt-luesterlicht);
    pointer-events: none;
}

.jt-seitenkopf__kicker {
    margin: 0 0 var(--jt-a-3);
    color: var(--jt-messing);
    font-family: var(--jt-schrift-alt);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
}

/* Eine Klasse mehr (0,2,0), wie bei den Linkfarben (Kopf dieser Datei):
   Allgemeine Überschrift-Regeln der Hüllen schlugen sonst durch —
   `.cas-body h1` (0,1,1) setzt Sperrung und Farbe, `body.ob h1` (0,1,2)
   die Schrift der Team-Seiten. Auf /coins/start stand der Titel enger
   gesperrt als auf jeder anderen Seite (Design-Update E4). */
.jt-seitenkopf .jt-seitenkopf__titel {
    margin: 0;
    font-family: var(--jt-schrift-alt);
    font-size: clamp(2.4rem, 6vw, 3.8rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-wrap: balance;
    color: var(--jt-creme);
    background: var(--jt-titel-verlauf);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: var(--jt-titel-schatten);
}

.jt-seitenkopf__unter {
    max-width: 600px;
    margin: 14px auto 0;
    color: var(--jt-text-leise);
    font-size: clamp(0.98rem, 1.6vw, 1.08rem);
    line-height: 1.6;
}

.jt-seitenkopf__linie {
    display: block;
    width: 140px;
    height: 1px;
    margin: 22px auto 0;
    background: var(--jt-messing-linie);
}

.jt-seitenkopf__meta {
    margin-top: var(--jt-a-4);
}

/* ===== Fuß (Bauregel 7) ==================================================
   Einer für alle Seiten — views/partials/seiten_fuss.ejs. */

.jt-fuss {
    position: relative;
    z-index: 1;
    margin-top: 56px;
    border-top: 1px solid var(--jt-fuss-kante);
    background: var(--jt-fuss-grund);
    font-family: var(--jt-schrift-text);
}

/* Das Band mit dem Muster des Designers über dem Fuß (Betreiber 07.09.2026):
   Es wohnt in den 56 px Abstand, die der Fuß ohnehin hat. Die Maske blendet es
   nach oben aus, sonst stünde eine harte Kante im Inhalt. -webkit-mask-image
   für Safari; ohne Präfix wäre es dort ein harter Streifen. Bis E1-3 nur auf
   den v2-Seiten — jetzt, mit EINEM Fuß, auf jeder Seite mit Fuß. */
.jt-fuss::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -56px;
    height: 56px;
    background: url(/images/logo/juicer-bot-muster.webp) center top / 200px auto repeat;
    opacity: 0.1;
    -webkit-mask-image: linear-gradient(to bottom, transparent, black);
    mask-image: linear-gradient(to bottom, transparent, black);
    pointer-events: none;
}

.jt-fuss__innen {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    max-width: 1050px;
    margin: 0 auto;
    padding: 22px var(--jt-a-4) 26px;
    text-align: center;
}

.jt-fuss__marke {
    margin: 0;
    color: var(--jt-text-leise);
    font-size: 0.82rem;
}

/* Einfarbig weiß und halb durchsichtig — die Marke läuft mit, sie zieht den
   Blick nicht vom Rest des Fußes. display ausdrücklich und mit Vorfahr-Klasse:
   Die Team-Seite setzt mit `body.ob img` (0,1,2) jedes Bild auf block — dort
   stand das Zeichen sonst allein über der Zeile (Blatt E1-3, 15.10.2026). */
.jt-fuss .jt-fuss__zeichen {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 7px;
    vertical-align: -4px;
    opacity: 0.5;
}

/* Wo gesendet wird, ist keine Fußnote: die Kanäle etwas kräftiger als die
   Rechtslinks darunter. */
.jt-fuss__kanaele,
.jt-fuss__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 18px;
}

.jt-fuss .jt-fuss__kanaele a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--jt-text);
    font-size: 0.84rem;
    font-weight: 600;
    text-decoration: none;
}

.jt-fuss .jt-fuss__links a {
    color: var(--jt-text-leise);
    font-size: 0.84rem;
    text-decoration: none;
}

.jt-fuss .jt-fuss__kanaele a:hover,
.jt-fuss .jt-fuss__links a:hover {
    color: var(--jt-gold);
}

/* Am Touchgerät mindestens 40 px hoch (Audit 26.10.2026): Die Links standen als
   reine Textzeilen da — kaum 20 px zum Treffen. */
@media (pointer: coarse), (max-width: 640px) {
    .jt-fuss .jt-fuss__kanaele a,
    .jt-fuss .jt-fuss__links a {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
    }
}

.jt-fuss__alter {
    margin: 0;
    color: var(--jt-text-leise);
    font-size: 0.75rem;
}

/* Das Hilfsangebot neben „18+“ (Block F, 22.10.2026): als Link erkennbar. */
.jt-fuss .jt-fuss__alter a {
    color: inherit;
    text-decoration: underline;
}

/* ===== Seitenwechsel (Wahlzettel F4N „ja") ===============================
   Die Kopfzeile bleibt stehen, eine orange Lichtnaht zieht die neue Seite in
   0,32 s von links herein. CSS View Transitions zwischen Dokumenten (Chrome ab
   126, Safari ab 18.2); Firefox und ältere Browser wechseln wie bisher. Reines
   CSS — kein Skript, die strenge CSP bleibt. Beide Seiten müssen diese Datei
   laden, sonst gibt es keine Blende: XMAS, Fehler- und Wartungsseite wechseln
   ohne. */
@view-transition {
    navigation: auto;
}

/* Bauregel 25: Die Kopfzeile hat einen eigenen Namen — beim Wechsel steht sie
   still, nur der aktive Menüpunkt blendet kurz über. Die Team-Leiste
   (.juicer-v2-nav, views/partials/v2_admin_nav.ejs) ist die Kopfzeile der
   Team-Seiten — beide stehen nie im selben Dokument (E7). */
.juicer-topnav,
.juicer-v2-nav {
    view-transition-name: jt-kopfzeile;
}

::view-transition-group(jt-kopfzeile) {
    animation-duration: var(--jt-zeit-kurz);
}

/* Die alte Seite steht, bis die Naht sie überdeckt; die neue wird von links
   freigelegt. */
::view-transition-old(root) {
    animation: none;
}

::view-transition-new(root) {
    animation: jt-naht-wisch 320ms cubic-bezier(0.77, 0, 0.18, 1) both;
}

/* Die Naht selbst: ein eigenes Element (site_top_nav.ejs, VOR der Kopfzeile,
   damit die Kopfzeile darüber liegt). In Ruhe 60 px links außer Sicht —
   samt Leuchten, das gut 36 px weit reicht. */
.jt-naht {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    background: var(--jt-orange);
    box-shadow: var(--jt-naht-glanz);
    transform: translateX(-60px);
    pointer-events: none;
    view-transition-name: jt-naht;
}

::view-transition-old(jt-naht) {
    display: none;
}

/* Ohne diese Zeile blendet der Browser das Bild der Naht über die ganze Dauer
   ein (Standard-Überblendung): Bei einem Viertel des Wegs leuchtete sie nur zu
   einem Viertel (Einzelbilder 15.10.2026). */
::view-transition-new(jt-naht) {
    animation: none;
}

::view-transition-group(jt-naht) {
    animation: jt-naht-lauf 320ms cubic-bezier(0.77, 0, 0.18, 1) both;
}

@keyframes jt-naht-wisch {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 0 0 0); }
}

@keyframes jt-naht-lauf {
    from { transform: translateX(-60px); }
    to { transform: translateX(100vw); }
}

/* ===== Licht an — einmal je Besuch (Wahlzettel F4-B „lebendig") ==========
   Der erste Seitenaufruf einer Sitzung bekommt ihn: Der Lichtkegel über dem
   Seitenkopf blendet auf, ein Glanz läuft einmal über den Messingtitel. Der
   Merker `html.jt-auftritt` kommt aus einem Skript im Kopf (v2_head_assets,
   casino_doc_start, team_orangebonus — vor dem ersten Bild). Jeder weitere
   Aufruf steht still; „bei jedem Besuch" wäre die Show (F4-C), die nicht
   gewählt ist. */
html.jt-auftritt .jt-seitenkopf::before {
    animation: jt-licht-an 1.6s var(--jt-kurve) both;
}

/* Der Glanz läuft GLEICHMÄSSIG (ease-in-out), nicht mit der Hauskurve: Die
   bremst so stark, dass das Band in unter 0,2 s über den Titel huschte und
   unsichtbar blieb (Einzelbilder 15.10.2026). Das Band ist ein Drittel so
   breit wie sein Bild (300 %); 85 % → 15 % führt es von knapp links vor dem
   Titel bis knapp rechts dahinter. */
html.jt-auftritt .jt-seitenkopf__titel {
    background-image: var(--jt-glanz-band), var(--jt-titel-verlauf);
    background-size: 300% 100%, 100% 100%;
    background-repeat: no-repeat;
    animation: jt-glanz 1.2s ease-in-out 0.35s both;
}

/* Das Licht flammt beim Angehen kurz auf: Der hellste Teil des Kegels liegt
   hinter der Kopfzeile (dort hängt im Foto der Kronleuchter), ein bloßes
   Einblenden war deshalb kaum zu sehen. */
@keyframes jt-licht-an {
    0% { opacity: 0; }
    55% { opacity: 1; filter: brightness(1.9); }
    100% { opacity: 1; filter: none; }
}

@keyframes jt-glanz {
    from { background-position: 85% 0, 0 0; }
    to { background-position: 15% 0, 0 0; }
}

/* ===== Bauchbinde — der Ereignis-Rahmen (E3-0) ===========================
   Die Mischung „Ein Saal, drei Lautstärken": Der Saal ist der Grundton, die
   Sendung spricht NUR bei Ereignissen — live, Aufstieg, Drop, großer Gewinn.
   Dann steht eine Bauchbinde wie im Stream: beleuchtete Rauchglas-Tafel,
   Signalkante links, goldene Unterlinie, Zeile 2 im Grau des Servernamens.
   Nie als Fläche und nie für einen Dauerzustand.

   Aufbau — Lage und Inhalt setzt die Seite, Texte per textContent:
     <div class="jt-binde [jt-binde--live] [jt-binde--ein]" role="status">
       <span class="jt-binde__naht">Aus dem Stream</span>   (darf fehlen)
       <strong class="jt-binde__titel">…</strong>
       <span class="jt-binde__zeile">…</span>
     </div>

   `--ein` spielt den Auftritt: Wischblende 380 ms, Zeile 2 um 60 ms
   versetzt, die Linie der Naht zieht auf. Ein Skript setzt die Klasse, wenn
   das Ereignis gerade passiert. Zeigt eine Seite beim Laden einen Zustand,
   setzt sie die Klasse nur unter html.jt-auftritt — einmal je Besuch (F4-B). */
.jt-binde {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    max-width: 100%;
    padding: 10px 18px 12px 20px;
    border-radius: 10px;
    background: var(--jt-oberlicht), var(--jt-tafel);
    box-shadow: inset 4px 0 0 var(--jt-binde-signal), inset 0 -2px 0 var(--jt-gold), var(--jt-binde-schatten);
    color: var(--jt-text);
    font-family: var(--jt-schrift-text);
}

.jt-binde--live {
    --jt-binde-signal: var(--jt-live);
}

/* Die Naht: ein Ring von 10 px, eine Linie von 2 px, dann eine kurze Zeile. */
.jt-binde__naht {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--jt-t-xs);
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--jt-zeilen-grau);
}

.jt-binde__naht::before {
    content: "";
    order: -2;
    flex: none;
    box-sizing: border-box;
    width: 10px;
    height: 10px;
    border: 2px solid var(--jt-binde-signal);
    border-radius: 50%;
}

.jt-binde__naht::after {
    content: "";
    order: -1;
    flex: none;
    width: 36px;
    height: 2px;
    background: linear-gradient(90deg, var(--jt-binde-signal), var(--jt-gold));
    transform-origin: left center;
}

.jt-binde__titel {
    font-family: var(--jt-schrift-alt);
    font-size: var(--jt-t-l);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--jt-text);
}

.jt-binde__zeile {
    font-size: var(--jt-t-s);
    line-height: 1.35;
    color: var(--jt-zeilen-grau);
}

.jt-binde.jt-binde--ein {
    animation: jt-naht-wisch 380ms var(--jt-kurve-schnitt) backwards;
}

.jt-binde--ein .jt-binde__zeile {
    animation: jt-binde-zeile 380ms var(--jt-kurve-schnitt) 60ms both;
}

.jt-binde--ein .jt-binde__naht::after {
    animation: jt-binde-naht 380ms var(--jt-kurve-schnitt) both;
}

@keyframes jt-binde-zeile {
    from { opacity: 0; transform: translateX(-12px); }
    to { opacity: 1; transform: none; }
}

@keyframes jt-binde-naht {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* ===== Beitreten-Band (26.10.2026) =======================================
   Die Einladung auf den offenen Seiten (views/partials/beitreten_band.ejs):
   Betreiber „klar damit werben, dem Discord Server beizutreten". Eine ruhige
   Tafel mit Messingkante, das Discord-Zeichen, ein Satz, der Knopf. Keine
   Bauchbinde — die gehört Ereignissen, das hier ist ein Dauerzustand. */
.jt-beitreten {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--jt-a-4) var(--jt-a-6);
    margin: var(--jt-a-6) 0;
    padding: var(--jt-a-4) var(--jt-a-6);
    border: 1px solid rgba(var(--jt-messing-rgb), 0.3);
    border-radius: var(--jt-r-l);
    background: var(--jt-oberlicht), var(--jt-tafel);
    color: var(--jt-text);
}

.jt-beitreten__zeichen {
    display: inline-grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(var(--jt-messing-rgb), 0.12);
    color: var(--jt-messing-hell);
    font-size: var(--jt-t-xl);
}

.jt-beitreten__text {
    min-width: 0;
}

.jt-beitreten .jt-beitreten__titel {
    margin: 0;
    font-family: var(--jt-schrift-alt);
    font-size: var(--jt-t-l);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--jt-text);
}

.jt-beitreten .jt-beitreten__satz {
    margin: var(--jt-a-1) 0 0;
    max-width: 62ch;
    font-size: var(--jt-t-s);
    line-height: 1.5;
    color: var(--jt-text-leise);
}

.jt-beitreten__aktionen {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--jt-a-2);
}

/* Zwei Klassen (0,2,0): allgemeine Link-Regeln der Hüllen färben sonst jedes a
   (Kopf dieser Datei). 44 px hoch — ein Finger trifft auch den leisen Weg. */
.jt-beitreten .jt-beitreten__weiter {
    display: inline-flex;
    align-items: center;
    gap: var(--jt-a-2);
    min-height: 44px;
    font-size: var(--jt-t-s);
    color: var(--jt-messing-hell);
    text-decoration: underline;
    text-decoration-color: rgba(var(--jt-messing-rgb), 0.5);
    text-underline-offset: 3px;
}

.jt-beitreten .jt-beitreten__weiter:focus-visible {
    outline: 2px solid var(--jt-fokus);
    outline-offset: 3px;
}

/* Am Handy: Zeichen und Satz oben, die Aktionen darunter über die volle Breite. */
@media (max-width: 720px) {
    .jt-beitreten {
        grid-template-columns: auto minmax(0, 1fr);
        padding: var(--jt-a-4);
    }

    .jt-beitreten__aktionen {
        grid-column: 1 / -1;
        align-items: stretch;
    }

    .jt-beitreten__aktionen .jt-knopf {
        white-space: normal;
    }

    .jt-beitreten .jt-beitreten__weiter {
        justify-content: center;
    }
}

/* ===== Werkzeug-Seiten (E7, Design-Update 15.10.2026) ====================
   Die Team- und Admin-Seiten sind Werkzeuge: dicht, ruhig, gut bedienbar,
   kein Auftritt. Sie bekommen dieselben Bauteile wie jede Seite — Knopf und
   Seitenkopf — in einer Fassung für die Arbeit. Flächen, Felder, Tabellen und
   Marken der Werkzeug-Seiten stehen in public/css/pages/werkzeug.css. */

/* Der kleine Knopf: viele Aktionen auf einer Seite, dicht nebeneinander. Am
   Touchgerät trotzdem 44 px — ein Finger wird nicht kleiner, weil die Seite
   dichter ist. */
.jt-knopf--klein {
    min-height: 36px;
    padding: 0 var(--jt-a-4);
    font-size: var(--jt-t-s);
}

@media (pointer: coarse) {
    .jt-knopf--klein {
        min-height: 44px;
    }
}

/* Gefahr: löschen, zurücksetzen, schließen. Rot in Schrift und Kante, keine
   rote Fläche — ein Löschknopf soll auffindbar sein, nicht die Seite
   anschreien. Doppelte Klasse wie beim Hauptknopf (Kopf dieser Datei). Die
   Schrift ist das helle Rot: das Grund-Rot erreicht auf Samt nur 4,4 : 1. */
.jt-knopf.jt-knopf--gefahr {
    border-color: rgba(var(--jt-fehler-rgb), 0.55);
    background: rgba(var(--jt-fehler-rgb), 0.08);
    color: var(--jt-fehler-hell);
}

.jt-knopf.jt-knopf--gefahr:hover,
.jt-knopf.jt-knopf--gefahr:focus-visible {
    border-color: var(--jt-fehler);
    background: rgba(var(--jt-fehler-rgb), 0.16);
    color: var(--jt-fehler-hell);
}

/* Ein Knopf, der gerade nicht geht, sieht so aus — für alle Fassungen. */
.jt-knopf:disabled,
.jt-knopf[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.5;
    filter: none;
    transform: none;
}

/* Der Seitenkopf als Werkzeug-Kopf (jbHeroArt: 'werkzeug',
   views/partials/jb_hero_band.ejs): dieselbe Bühne ohne Kasten, aber
   linksbündig, kleiner — und still. */
.jt-seitenkopf.jt-seitenkopf--werkzeug {
    margin: 0 0 var(--jt-a-6);
    padding: var(--jt-a-4) 0 0;
    text-align: left;
}

/* Das Licht fällt auf den Titel links, nicht auf die Mitte der Seite.
   Höchstens 108 %: Mit left -8 % endet der Kegel genau am rechten Rand des
   Kopfs. Mit 116 % ragte er am Handy 8 % hinaus, und die Seite wurde breiter
   als das Fenster (420 → 435 px, Durchsicht 16.10.2026). */
.jt-seitenkopf--werkzeug::before {
    left: -8%;
    top: -120px;
    width: min(640px, 108%);
    height: calc(100% + 120px);
    transform: none;
}

.jt-seitenkopf--werkzeug .jt-seitenkopf__kicker {
    margin-bottom: var(--jt-a-2);
    letter-spacing: 0.26em;
}

.jt-seitenkopf--werkzeug .jt-seitenkopf__titel {
    font-size: clamp(1.75rem, 3.2vw, 2.35rem);
    letter-spacing: 0.05em;
    text-wrap: pretty;
}

.jt-seitenkopf--werkzeug .jt-seitenkopf__unter {
    max-width: 72ch;
    margin: var(--jt-a-2) 0 0;
    font-size: 0.95rem;
    line-height: 1.55;
}

.jt-seitenkopf--werkzeug .jt-seitenkopf__linie {
    width: 120px;
    margin: var(--jt-a-4) 0 0;
}

.jt-seitenkopf--werkzeug .jt-seitenkopf__meta {
    margin-top: var(--jt-a-3);
}

/* Kein „Licht an" auf Werkzeugen — auch nicht beim ersten Aufruf einer
   Sitzung: Wer im Stream die Creator-Zentrale öffnet, will arbeiten. */
html.jt-auftritt .jt-seitenkopf--werkzeug::before {
    animation: none;
}

html.jt-auftritt .jt-seitenkopf--werkzeug .jt-seitenkopf__titel {
    animation: none;
    background-image: var(--jt-titel-verlauf);
    background-size: auto;
}

/* ===== Podest (Bauregeln 4, 13, 24 — Wahlzettel S1-C, S2 Rauchglas) =======
   Die ersten drei auf drei Sockeln aus warmem Rauchglas im Licht des
   Kronleuchters: Startseite (views/leaderboard_public.ejs) und
   Coin-Bestenliste (views/coin_bestenliste.ejs) stehen auf DEMSELBEN
   Baustein (Design-Update E4; vorher lebte er nur in pages/leaderboard.css).
   Rang durch Licht und Höhe, nie durch Gold, Silber, Bronze — keine Medaille,
   kein Pokal-Dreiklang (Bauregel 24).

     <div class="jt-podest">
       <article class="jt-podest__stufe jt-podest__stufe--1 [jt-podest__stufe--ich]">
         <div class="jt-podest__kopf"><img class="jt-podest__bild"> <p class="jt-podest__name">…</p></div>
         <div class="jt-podest__sockel">
           <span class="jt-podest__ziffer"><span class="visually-hidden">Platz </span>1</span>
           <span class="jt-podest__beschrift">…</span> <p class="jt-podest__wert">…</p>
         </div>
       </article> …

   Im Markup stehen die Plätze in Lesereihenfolge 1 · 2 · 3 (Vorleser hören
   zuerst Platz 1); die Stellung 2 – 1 – 3 macht das Raster, am Handy in EINER
   Reihe mit Platz 1 erhöht (Bauregel 4). Bewegung nur beim ersten Besuch
   (html.jt-auftritt, F4-B). Was jede Seite selbst mitbringt — Vergleichen,
   Plakette, Fußzeile, Namensfarbe —, steht bei der Seite. */

.jt-podest {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr) minmax(0, 1fr);
    align-items: end;
    gap: clamp(10px, 2.2vw, 26px);
    max-width: 900px;
    margin: clamp(26px, 4vw, 48px) auto 0;
    padding-top: 26px;
}

/* Die Stellung: 2 links, 1 in der Mitte, 3 rechts. */
.jt-podest__stufe--1 { grid-column: 2; grid-row: 1; z-index: 2; }
.jt-podest__stufe--2 { grid-column: 1; grid-row: 1; }
.jt-podest__stufe--3 { grid-column: 3; grid-row: 1; }

/* Der Lichtkegel kommt von oben (Kronleuchter) und fällt auf Platz 1. Die
   Seite schneidet ihn seitlich ab (overflow-x: clip am Behälter). */
.jt-podest::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: -340px;
    left: 50%;
    width: min(760px, 120%);
    height: calc(100% + 300px);
    transform: translateX(-50%);
    background: var(--jt-podest-lichtkegel);
    -webkit-mask-image: var(--jt-podest-lichtkegel-maske);
    mask-image: var(--jt-podest-lichtkegel-maske);
    filter: blur(2px);
    pointer-events: none;
}

/* Beim ersten Besuch geht das Licht an. */
html.jt-auftritt .jt-podest::before { animation: jt-podest-licht 1.6s ease-out 0.25s both; }

@keyframes jt-podest-licht {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Die Spiegelung auf dem Marmorboden der Halle. */
.jt-podest::after {
    content: "";
    position: absolute;
    z-index: 0;
    bottom: -30px;
    left: 50%;
    width: min(860px, 100%);
    height: 70px;
    transform: translateX(-50%);
    background: var(--jt-podest-spiegelung);
    filter: blur(10px);
    pointer-events: none;
}

.jt-podest__stufe {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}

/* Beim ersten Besuch steigen die Sockel nacheinander auf — Platz 1 zuerst. */
html.jt-auftritt .jt-podest__stufe { animation: jt-podest-auftritt 0.7s var(--jt-kurve) both; }
html.jt-auftritt .jt-podest__stufe--1 { animation-delay: 0.35s; }
html.jt-auftritt .jt-podest__stufe--2 { animation-delay: 0.5s; }
html.jt-auftritt .jt-podest__stufe--3 { animation-delay: 0.62s; }

@keyframes jt-podest-auftritt {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

.jt-podest__kopf {
    position: relative;
    width: 100%;
    margin-bottom: 14px;
    text-align: center;
}

.jt-podest__bild {
    width: 74px;
    height: 74px;
    margin-bottom: 10px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(var(--jt-messing-rgb), 0.6);
    box-shadow: var(--jt-podest-bild-schatten);
    filter: brightness(0.86) saturate(0.92);
}

/* Platz 1 steht im Licht. */
.jt-podest__stufe--1 .jt-podest__bild {
    width: 108px;
    height: 108px;
    border: 3px solid var(--jt-messing-hell);
    filter: none;
    box-shadow: var(--jt-podest-bild-schatten-1);
}

/* Der eigene Platz: Orange heißt „du" (wie die eigene Zeile jeder Rangliste). */
.jt-podest__stufe.jt-podest__stufe--ich .jt-podest__bild {
    border-color: var(--jt-orange);
    box-shadow: 0 0 0 4px rgba(var(--jt-grund-rgb), 0.85), 0 0 0 6px rgba(var(--jt-orange-rgb), 0.7), 0 0 30px rgba(var(--jt-orange-rgb), 0.45);
}

.jt-podest__name {
    max-width: 100%;
    margin: 0;
    padding: 0 8px;
    font-family: var(--jt-schrift-alt);
    font-weight: 700;
    font-size: 1.02rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.jt-podest__stufe--1 .jt-podest__name { font-size: 1.24rem; }

/* Der Sockel: getöntes, warmes Rauchglas (Betreiberwahl 15.10., Nachwahl
   S2M „Rauchglas mit Goldkante"). Die Halle scheint gedämpft durch, oben ein
   feiner Goldrand, unten die orange Lichtleiste der Spieltische. */
.jt-podest__sockel {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px 12px 18px;
    border-radius: 6px 6px 4px 4px;
    background: var(--jt-podest-glas);
    -webkit-backdrop-filter: blur(14px) saturate(1.25);
    backdrop-filter: blur(14px) saturate(1.25);
    box-shadow: var(--jt-podest-sockel-schatten);
}

.jt-podest__stufe--1 .jt-podest__sockel {
    min-height: 236px;
    background: var(--jt-podest-glas-1);
    box-shadow: var(--jt-podest-sockel-schatten-1);
}

.jt-podest__stufe--2 .jt-podest__sockel { min-height: 178px; }
.jt-podest__stufe--3 .jt-podest__sockel { min-height: 156px; }

/* Die Lichtleiste der Spieltische, unten am Glas. */
.jt-podest__sockel::after {
    content: "";
    position: absolute;
    left: 7%;
    right: 7%;
    bottom: -1px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--jt-orange) 18%, var(--jt-orange-licht) 50%, var(--jt-orange) 82%, transparent);
    box-shadow: 0 0 14px 2px rgba(var(--jt-orange-rgb), 0.55), 0 6px 22px 2px rgba(var(--jt-orange-rgb), 0.25);
    pointer-events: none;
}

/* Kein Pokal-Dreiklang: Die Platzzahl ist golden ins Glas eingelegt (Cinzel —
   die Inschrift der J-Münze). Sie steht als Text da, nicht als Bild. */
.jt-podest__ziffer {
    display: block;
    margin-bottom: 10px;
    font-family: var(--jt-schrift-rang);
    font-weight: 700;
    font-size: 2.5rem;
    line-height: 1;
    background: var(--jt-podest-ziffer-verlauf);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--jt-messing-hell);
    filter: var(--jt-podest-ziffer-schatten);
}

.jt-podest__stufe--1 .jt-podest__ziffer { font-size: 3.4rem; }

/* --jt-text-leise, nicht --jt-text-still: Creme zu 42 % kam auf dem Rauchglas
   auf 3,5 : 1, während eines Streams (hellere Halle) auf 3,1 : 1 — schlecht
   lesbar auf der Startseite und der Coin-Bestenliste (Abschlussblatt
   15.10.2026, tests/startseiteLesbarkeit.test.js). */
.jt-podest__beschrift {
    font-family: var(--jt-schrift-alt);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--jt-text-leise);
}

/* Zahlen: Inter 800 mit gleich breiten Ziffern (Bauregel 10, F1-A). */
.jt-podest__wert {
    margin: 6px 0 10px;
    font-family: var(--jt-schrift-wert);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    font-weight: 800;
    font-size: 1.12rem;
    line-height: 1.2;
    text-align: center;
    color: var(--jt-text);
}

/* Gold nur für Verdientes: der Wert von Platz 1. */
.jt-podest__stufe--1 .jt-podest__wert {
    font-size: 1.55rem;
    color: var(--jt-podest-wert-1);
    text-shadow: var(--jt-podest-wert-1-schein);
}

/* Am Handy in EINER Reihe, Platz 1 erhöht in der Mitte (Bauregel 4) — bis E2
   standen die drei untereinander, jede Karte so hoch wie ein halber
   Bildschirm. */
@media (max-width: 900px) {
    .jt-podest {
        max-width: 560px;
        gap: 8px;
        margin-top: 26px;
        padding-top: 14px;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.16fr) minmax(0, 1fr);
    }

    .jt-podest::before { top: -200px; height: calc(100% + 180px); }

    .jt-podest__kopf { margin-bottom: 8px; }
    .jt-podest__bild { width: 52px; height: 52px; margin-bottom: 6px; }
    .jt-podest__stufe--1 .jt-podest__bild { width: 70px; height: 70px; }
    .jt-podest__name { padding: 0 2px; font-size: 0.8rem; letter-spacing: 0.03em; }
    .jt-podest__stufe--1 .jt-podest__name { font-size: 0.9rem; }

    .jt-podest__sockel { padding: 12px 6px 12px; }
    .jt-podest__stufe--1 .jt-podest__sockel { min-height: 150px; }
    .jt-podest__stufe--2 .jt-podest__sockel { min-height: 116px; }
    .jt-podest__stufe--3 .jt-podest__sockel { min-height: 102px; }
    .jt-podest__ziffer { margin-bottom: 6px; font-size: 1.7rem; }
    .jt-podest__stufe--1 .jt-podest__ziffer { font-size: 2.3rem; }

    .jt-podest__beschrift { display: none; }

    .jt-podest__wert { margin: 4px 0 8px; font-size: 0.86rem; text-wrap: balance; }
    .jt-podest__stufe--1 .jt-podest__wert { font-size: 1rem; }
}

/* ===== Programm (Mitglied werden, 25.10.2026) ============================
   Was im Discord läuft, gesetzt wie ein Programmheft im Saal: der Name links,
   rechts hinter einer Punktlinie eine kurze Tatsache („19 Stufen", „Twitch ·
   Kick"), darunter ein Satz. Zwei Seiten zeigen es — die Startseite für Gäste
   kurz, /mitglied-werden ausführlich (--ausfuehrlich); die Sätze stehen in
   config/mitgliedWerden.js.

   Die Punktlinie ist ein Teil des Rasters (::before in der Spalte „linie"),
   kein Zeichenfüller aus Punkten: Sie wächst mit der Breite und bricht nie um.
   ::after bleibt frei — dort hängt der Saison-Schmuck seine Netze ein
   (saison.css). Doppelter Rahmen innen wie bei einer gedruckten Karte. */
.jt-programm {
    position: relative;
    isolation: isolate;
    padding: clamp(22px, 3.4vw, 38px) clamp(18px, 3.6vw, 44px) clamp(18px, 3vw, 30px);
    border-radius: var(--jt-r-l);
    background:
        radial-gradient(70% 55% at 50% 0%, rgba(var(--jt-messing-hell-rgb), 0.08), transparent 72%),
        var(--jt-samt);
    box-shadow: var(--jt-samt-schatten), inset 0 0 0 1px rgba(var(--jt-messing-rgb), 0.26);
}

.jt-programm::before {
    content: "";
    position: absolute;
    inset: 7px;
    z-index: -1;
    border: 1px solid rgba(var(--jt-messing-rgb), 0.14);
    border-radius: calc(var(--jt-r-l) - 5px);
    pointer-events: none;
}

.jt-programm__kopf {
    margin-bottom: clamp(8px, 1.6vw, 16px);
    text-align: center;
}

.jt-programm__kicker {
    display: inline-flex;
    align-items: center;
    gap: var(--jt-a-3);
    margin: 0 0 var(--jt-a-2);
    font-family: var(--jt-schrift-alt);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--jt-messing);
}

.jt-programm__kicker::before,
.jt-programm__kicker::after {
    content: "";
    width: clamp(18px, 4vw, 44px);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--jt-messing));
}

.jt-programm__kicker::after { transform: scaleX(-1); }

/* Zwei Klassen (0,2,0): allgemeine Überschrift-Regeln der Hüllen schlagen
   sonst durch (Kopf dieser Datei, wie .jt-seitenkopf__titel). */
.jt-programm .jt-programm__titel {
    margin: 0;
    font-family: var(--jt-schrift-alt);
    font-size: clamp(1.7rem, 3.6vw, 2.5rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--jt-creme);
    background: var(--jt-titel-verlauf);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: var(--jt-titel-schatten);
}

.jt-programm__liste {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(28px, 5vw, 64px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.jt-programm__punkt {
    display: grid;
    grid-template-columns: 38px auto minmax(18px, 1fr) auto;
    grid-template-areas:
        "symbol name linie wert"
        ".      text text  text";
    /* Oben angeschlagen: In der zweispaltigen Liste ist jeder Punkt so hoch wie
       sein Nachbar — ohne `start` verteilte das Raster den Rest auf die beiden
       Zeilen, und der Satz rutschte vom Namen weg (Foto 25.10.). */
    align-content: start;
    align-items: center;
    column-gap: var(--jt-a-3);
    row-gap: 4px;
    padding: 16px 0;
    border-top: 1px solid rgba(var(--jt-messing-rgb), 0.14);
}

/* Zwei Spalten: die erste Reihe ohne Linie darüber. */
.jt-programm__punkt:nth-child(-n + 2) { border-top: 0; }

.jt-programm__punkt::before {
    content: "";
    grid-area: linie;
    height: 0;
    border-bottom: 2px dotted rgba(var(--jt-messing-rgb), 0.45);
}

/* Das Zeichen in einer kleinen Messing-Fassung — dieselbe Sprache wie die
   Wappen der Leiter, ohne deren Rollenfarbe: ein Programmpunkt ist kein Rang. */
.jt-programm__symbol {
    grid-area: symbol;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, rgba(var(--jt-messing-rgb), 0.2), var(--jt-grund) 76%);
    box-shadow: 0 0 0 1px rgba(var(--jt-messing-rgb), 0.55), 0 6px 14px rgba(var(--jt-grund-rgb), 0.5);
    color: var(--jt-messing-hell);
    font-size: 0.95rem;
}

.jt-programm .jt-programm__name {
    grid-area: name;
    margin: 0;
    font-family: var(--jt-schrift-alt);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--jt-creme);
}

.jt-programm__wert {
    grid-area: wert;
    font-family: var(--jt-schrift-wert);
    font-size: 0.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    white-space: nowrap;
    color: var(--jt-messing-hell);
}

.jt-programm .jt-programm__text {
    grid-area: text;
    margin: 0;
    color: var(--jt-text-leise);
    font-size: 0.92rem;
    line-height: 1.5;
}

.jt-programm--ausfuehrlich .jt-programm__text {
    font-size: 0.97rem;
    line-height: 1.6;
}

.jt-programm__weiter {
    margin: var(--jt-a-3) 0 0;
    text-align: center;
}

/* Zwei Klassen: `.cas-body a` & Co. färben sonst jeden Link (Kopf dieser Datei). */
.jt-programm .jt-programm__link {
    display: inline-flex;
    align-items: center;
    gap: var(--jt-a-2);
    min-height: 44px;
    padding: 0 var(--jt-a-2);
    font-weight: 700;
    font-size: 0.94rem;
    color: var(--jt-messing-hell);
    text-decoration: underline;
    text-decoration-color: rgba(var(--jt-messing-rgb), 0.5);
    text-underline-offset: 5px;
}

.jt-programm .jt-programm__link:hover { color: var(--jt-creme); text-decoration-color: var(--jt-messing-hell); }

.jt-programm .jt-programm__link:focus-visible {
    outline: 2px solid var(--jt-fokus);
    outline-offset: 2px;
    border-radius: var(--jt-r-s);
}

@media (max-width: 760px) {
    .jt-programm__liste { grid-template-columns: minmax(0, 1fr); }
    .jt-programm__punkt:nth-child(2) { border-top: 1px solid rgba(var(--jt-messing-rgb), 0.14); }
    .jt-programm__punkt {
        grid-template-columns: 34px auto minmax(12px, 1fr) auto;
        column-gap: 10px;
        padding: 14px 0;
    }
    .jt-programm__symbol { width: 34px; height: 34px; font-size: 0.86rem; }
    .jt-programm .jt-programm__name { font-size: 1rem; letter-spacing: 0.04em; }
    .jt-programm .jt-programm__text { font-size: 0.9rem; }
}

/* ===== Neu: ein Titel (25.10.2026) ========================================
   In Wallet und Profil, einmal je Titel (views/partials/titel_neu.ejs). Ein
   Schild unter dem Lüsterlicht: links die Plakette, in der Mitte der Name in
   der Rang-Schrift, rechts der eine Knopf. Am Handy untereinander. */
.jt-titel-neu {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--jt-a-3) var(--jt-a-4);
    margin: 0 0 var(--jt-a-4);
    padding: var(--jt-a-4);
    border: 1px solid rgba(var(--jt-messing-rgb), 0.5);
    border-radius: var(--jt-r-l);
    background: var(--jt-luesterlicht), var(--jt-samt);
    box-shadow: var(--jt-samt-schatten);
    animation: jt-titel-neu-ein var(--jt-zeit-lang) var(--jt-kurve-pop) both;
}

.jt-titel-neu__zeichen {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--jt-tafel);
    box-shadow: 0 0 0 2px rgba(var(--jt-messing-rgb), 0.85), 0 0 22px rgba(var(--jt-orange-licht-rgb), 0.35);
    font-size: 1.3rem;
    color: var(--jt-messing-hell);
}

.jt-titel-neu__text { min-width: 0; }

.jt-titel-neu .jt-titel-neu__kicker {
    margin: 0;
    font-family: var(--jt-schrift-alt);
    font-size: var(--jt-t-xs);
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--jt-orange-licht);
}

.jt-titel-neu .jt-titel-neu__kopf {
    margin: 2px 0 0;
    font-family: var(--jt-schrift-rang);
    font-size: var(--jt-t-l);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--jt-messing-hell);
    text-wrap: balance;
}

.jt-titel-neu .jt-titel-neu__wie {
    margin: 4px 0 0;
    font-size: var(--jt-t-s);
    color: var(--jt-text-leise);
}

.jt-titel-neu__knoepfe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--jt-a-2) var(--jt-a-4);
}

.jt-titel-neu__knoepfe form { margin: 0; }

.jt-titel-neu .jt-titel-neu__link {
    font-size: var(--jt-t-s);
    color: var(--jt-messing-hell);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.jt-titel-neu .jt-titel-neu__link:focus-visible {
    outline: 2px solid var(--jt-fokus);
    outline-offset: 2px;
    border-radius: var(--jt-r-s);
}

@keyframes jt-titel-neu-ein {
    from { opacity: 0; transform: translateY(-6px) scale(0.985); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 640px) {
    .jt-titel-neu { grid-template-columns: auto minmax(0, 1fr); }
    .jt-titel-neu__knoepfe { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ===== Reduzierte Bewegung =============================================== */

@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }

    .jt-knopf {
        transition: none;
    }

    .jt-knopf.jt-knopf--haupt:hover,
    .jt-knopf.jt-knopf--haupt:focus-visible {
        transform: none;
    }

    ::view-transition-new(root),
    ::view-transition-group(jt-naht),
    html.jt-auftritt .jt-seitenkopf::before,
    html.jt-auftritt .jt-seitenkopf__titel,
    .jt-binde.jt-binde--ein,
    .jt-binde--ein .jt-binde__zeile,
    .jt-binde--ein .jt-binde__naht::after,
    html.jt-auftritt .jt-podest::before,
    html.jt-auftritt .jt-podest__stufe,
    .jt-titel-neu {
        animation: none;
    }
}

/* ===== Werbung (Konformitätsplan 22.10.2026, Block F) =====================
   Steht unmittelbar am Link auf eine Partnerseite (app/werbung.js,
   config/partnerSeiten.js). Leise, aber lesbar — eine Kennzeichnung, die man
   übersieht, ist keine. */
.werbung-marke {
    display: inline-block;
    margin-left: 0.25em;
    padding: 0 0.45em;
    border: 1px solid var(--jt-linie-stark);
    border-radius: var(--jt-r-s);
    font-size: 0.72em;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--jt-text-leise);
    vertical-align: 0.1em;
}