/* ═══════════════════════════════════════════════════════════════════
   TREASURY — öffentliche Website
   Eigenes Stylesheet, unabhängig von style.css/custom.css der Coindrop-
   Seite: die beiden Auftritte sollen sich nicht gegenseitig verstellen.

   Farben aus dem Logo: Navy #18233b, Gold #c49a3a, dazu ein tieferes
   "Nacht"-Navy für Hero und dunkle Flächen und je ein Verlauf pro Metall.
   Premium statt Kampagne: dunkle, ruhige Flächen, Gold als Licht, Bewegung
   nur dort, wo sie etwas zeigt. Alle Animationen entfallen bei
   "Bewegung reduzieren" (ganz unten).

   Klassen mit .tr-js davor greifen nur, wenn JavaScript läuft — ohne JS
   ist jeder Inhalt sofort sichtbar.
   ═══════════════════════════════════════════════════════════════════ */

:root {
    --tr-navy:       #18233b;
    --tr-navy-hell:  #22304f;
    --tr-nacht:      #0b1322;
    --tr-gold:       #c49a3a;
    --tr-gold-hell:  #d3a94a;
    --tr-gold-licht: #f1d68a;
    --tr-grund:      #ffffff;
    --tr-grund-2:    #f6f7f9;
    --tr-text:       #2c3444;
    --tr-text-leise: #6b7484;
    --tr-linie:      #e6e9ef;
    --tr-breite:     1140px;
    --tr-plus:       #3ecf8e;
    --tr-minus:      #ff7a7a;
    --tr-weich:      cubic-bezier(.2, .7, .2, 1);

    /* Metallverläufe — Barren, Punkte, Ring */
    --tr-xau: linear-gradient(135deg, #fbeeb0 0%, #dcb454 38%, #a57822 100%);
    --tr-xag: linear-gradient(135deg, #ffffff 0%, #c6cdd6 45%, #7c8794 100%);
    --tr-xpt: linear-gradient(135deg, #f4f8fb 0%, #cfd9e2 45%, #8a98a6 100%);
    --tr-xpd: linear-gradient(135deg, #f6f0e6 0%, #c9bfab 45%, #837966 100%);

    /* Körnung als Daten-URI — kein zusätzlicher Request */
    --tr-korn: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
::selection { background: rgba(196,154,58,0.35); }

/* Seitengrund Nacht-Navy, Inhalt weiß: der halbtransparente Kopf liegt
   oben über dem Grund — auf Weiß wirkte er grau statt wie dunkles Glas. */
.tr-body {
    margin: 0;
    background: var(--tr-nacht);
    color: var(--tr-text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

.tr-inhalt { background: var(--tr-grund); }

.tr-breite { max-width: var(--tr-breite); margin: 0 auto; padding: 0 24px; }

/* ── Kursleiste ───────────────────────────────────────────────────────
   Über dem Kopf, scrollt mit weg. Ein Satz ist rund 1.500 px breit — erst
   ab 1.600 px Fensterbreite stehen die Metalle ruhig nebeneinander, darunter
   läuft die Leiste als Band (zweiter Satz nur dann sichtbar, für die
   Endlosschleife). Bei 1.440 px war sie vorher rechts abgeschnitten. */
.tr-ticker {
    position: relative; z-index: 51; overflow: hidden;
    background: #070d18; color: rgba(255,255,255,0.65);
    font-size: .8rem; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.tr-ticker-band { display: flex; width: max-content; margin: 0 auto; }
.tr-ticker-satz { display: flex; align-items: center; gap: 34px; padding: 8px 17px; white-space: nowrap; }
.tr-ticker-satz + .tr-ticker-satz { display: none; }
.tr-ticker-eintrag { display: inline-flex; align-items: center; gap: 8px; }
.tr-ticker-name { color: #fff; font-weight: 600; }
.tr-ticker-kurs { color: #fff; font-variant-numeric: tabular-nums; border-radius: 4px; padding: 0 2px; }
.tr-ticker-einheit { color: rgba(255,255,255,0.4); }
.tr-ticker-hinweis { color: rgba(255,255,255,0.32); font-size: .72rem; }
.tr-ticker [data-feld="prozent"] { font-variant-numeric: tabular-nums; border-radius: 4px; padding: 0 2px; }

.tr-live {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: var(--tr-plus);
}
.tr-live::before {
    content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor;
    box-shadow: 0 0 0 0 rgba(62,207,142,0.6); animation: tr-puls 2s infinite;
}
@keyframes tr-puls {
    0%   { box-shadow: 0 0 0 0 rgba(62,207,142,0.55); }
    70%  { box-shadow: 0 0 0 8px rgba(62,207,142,0); }
    100% { box-shadow: 0 0 0 0 rgba(62,207,142,0); }
}

.tr-plus  { color: var(--tr-plus); }
.tr-minus { color: var(--tr-minus); }

.tr-spark { width: 54px; height: 16px; overflow: visible; }
.tr-spark polyline {
    fill: none; stroke: currentColor; stroke-width: 1.5;
    stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke;
}

/* Kurz aufleuchten, wenn sich ein Wert ändert */
.tr-blitz { animation: tr-blitz 1.4s ease-out; }
@keyframes tr-blitz {
    0%   { background: rgba(196,154,58,0.45); }
    100% { background: transparent; }
}

@media (max-width: 1599px) {
    .tr-ticker-band { margin: 0; animation: tr-laufband 40s linear infinite; }
    .tr-ticker-satz + .tr-ticker-satz { display: flex; }
    .tr-ticker:hover .tr-ticker-band { animation-play-state: paused; }
}
@keyframes tr-laufband { to { transform: translateX(-50%); } }

/* ── Kopf ─────────────────────────────────────────────────────────────
   Dunkles Glas über allem, wird beim Scrollen schlanker. Die goldene
   Linie darunter ist der Lesefortschritt. */
.tr-kopf {
    position: sticky; top: 0; z-index: 50;
    background: rgba(11,19,34,0.78);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid rgba(255,255,255,0.07);
    transition: background .3s;
}
.tr-kopf--klein { background: rgba(11,19,34,0.93); }
.tr-kopf-inhalt {
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; height: 76px; transition: height .3s var(--tr-weich);
}
.tr-kopf--klein .tr-kopf-inhalt { height: 62px; }
.tr-marke { display: flex; align-items: center; }
.tr-marke img { height: 34px; width: auto; display: block; transition: height .3s var(--tr-weich); }
.tr-kopf--klein .tr-marke img { height: 28px; }

.tr-fortschritt { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.tr-fortschritt span {
    display: block; height: 100%; transform: scaleX(0); transform-origin: 0 50%;
    background: linear-gradient(90deg, var(--tr-gold), var(--tr-gold-licht));
    box-shadow: 0 0 12px rgba(196,154,58,0.7);
}

.tr-nav { display: flex; align-items: center; gap: 28px; }
.tr-nav-link {
    position: relative; font-size: .93rem; color: rgba(255,255,255,0.72); text-decoration: none;
    padding: 6px 0; transition: color .2s;
}
.tr-nav-link::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: var(--tr-gold); transform: scaleX(0); transform-origin: 0 50%;
    transition: transform .35s var(--tr-weich);
}
.tr-nav-link:hover { color: #fff; }
.tr-nav-link:hover::after, .tr-nav-link--an::after { transform: scaleX(1); }
.tr-nav-link--an { color: #fff; font-weight: 600; }

.tr-nav-login {
    padding: 9px 20px; border-radius: 9px; font-size: .9rem; font-weight: 600;
    border: 1px solid rgba(196,154,58,0.6); color: var(--tr-gold-licht); text-decoration: none;
    transition: background .2s, color .2s, border-color .2s;
}
.tr-nav-login:hover { background: var(--tr-gold); border-color: var(--tr-gold); color: var(--tr-nacht); }

/* ── Sprachumschalter ─────────────────────────────────────────────────
   <details>/<summary> statt Modal: kein Bootstrap, kein JavaScript. */
.tr-sprachen { position: relative; }
.tr-sprachen-knopf {
    display: flex; align-items: center; gap: 7px; cursor: pointer;
    padding: 7px 12px; border-radius: 8px;
    font-size: .84rem; font-weight: 600;
    list-style: none; user-select: none;
    background: transparent; border: 1px solid rgba(255,255,255,0.18); color: rgba(255,255,255,0.75);
}
.tr-sprachen-knopf::-webkit-details-marker { display: none; }
.tr-sprachen-knopf:hover { border-color: var(--tr-gold); color: #fff; }
.tr-sprachen-pfeil {
    width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
    border-top: 5px solid rgba(255,255,255,0.5); transition: transform .15s;
}
.tr-sprachen[open] .tr-sprachen-pfeil { transform: rotate(180deg); }

.tr-sprachen-liste {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
    min-width: 190px; padding: 6px;
    background: #fff; border: 1px solid var(--tr-linie); border-radius: 11px;
    box-shadow: 0 18px 40px rgba(11,19,34,0.25);
}
.tr-sprachen-eintrag {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 10px 12px; border-radius: 8px;
    font-size: .88rem; color: var(--tr-text); text-decoration: none;
}
.tr-sprachen-name { display: flex; align-items: center; gap: 10px; }

/* Flaggen aus flag-icon: quadratisch, mit feinem Rand — reines Weiß im
   polnischen und amerikanischen Wappen verschwimmt sonst. */
.tr-sprachen .flag-icon {
    width: 18px; height: 18px; border-radius: 3px; flex: 0 0 auto;
    box-shadow: inset 0 0 0 1px rgba(24,35,59,0.12);
    background-size: cover; background-position: center;
}
.tr-sprachen-knopf .flag-icon { width: 17px; height: 17px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25); }
.tr-sprachen-eintrag:hover { background: var(--tr-grund-2); color: var(--tr-navy); }
.tr-sprachen-eintrag--an { color: var(--tr-navy); font-weight: 600; cursor: default; }
.tr-sprachen-haken { color: var(--tr-gold); }
.tr-sprachen-kuerzel-klein { font-size: .7rem; color: var(--tr-text-leise); letter-spacing: .06em; }
.tr-fuss-sprachen .tr-sprachen-liste { top: auto; bottom: calc(100% + 8px); }

/* Menü am Handy: reines CSS über eine versteckte Checkbox */
.tr-menue-schalter, .tr-menue-knopf { display: none; }
.tr-menue-knopf span {
    display: block; width: 22px; height: 2px; background: #fff;
    margin: 5px 0; border-radius: 2px; transition: transform .3s var(--tr-weich), opacity .2s;
}
.tr-menue-schalter:checked + .tr-menue-knopf span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.tr-menue-schalter:checked + .tr-menue-knopf span:nth-child(2) { opacity: 0; }
.tr-menue-schalter:checked + .tr-menue-knopf span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Abschnitte ───────────────────────────────────────────────────── */
.tr-abschnitt { position: relative; padding: 100px 0; }
.tr-abschnitt--grau { background: var(--tr-grund-2); }
.tr-abschnitt--navy {
    overflow: hidden; color: rgba(255,255,255,0.8);
    background:
        radial-gradient(800px 420px at 88% 0%, rgba(196,154,58,0.18), transparent 60%),
        radial-gradient(600px 400px at 0% 100%, rgba(64,96,160,0.22), transparent 60%),
        var(--tr-navy);
}
/* Die dunkelste Fläche — Metalle auf der Startseite */
.tr-abschnitt--nacht {
    overflow: hidden; color: rgba(255,255,255,0.72); isolation: isolate;
    background:
        radial-gradient(900px 500px at 50% -10%, rgba(196,154,58,0.16), transparent 60%),
        linear-gradient(180deg, var(--tr-nacht), #0f1a2e);
}
.tr-abschnitt--nacht::before, .tr-abschnitt--navy::before {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: var(--tr-korn); opacity: .05; mix-blend-mode: overlay;
}
.tr-abschnitt--nacht > .tr-breite, .tr-abschnitt--navy > .tr-breite { position: relative; z-index: 1; }

.tr-kicker {
    font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
    color: var(--tr-gold); margin-bottom: 16px;
}
/* Abschnitts-Kicker mit feiner Goldlinie davor */
.tr-abschnitt > .tr-breite > .tr-kicker,
.tr-hero .tr-kicker { display: inline-flex; align-items: center; gap: 12px; }
.tr-abschnitt > .tr-breite > .tr-kicker::before,
.tr-hero .tr-kicker::before { content: ''; width: 28px; height: 1px; background: currentColor; }

.tr-h1 {
    font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.08; letter-spacing: -.03em;
    font-weight: 750; color: var(--tr-navy); margin: 0 0 22px;
}
.tr-h2 {
    font-size: clamp(1.7rem, 3.6vw, 2.6rem); line-height: 1.15; letter-spacing: -.025em;
    font-weight: 700; color: var(--tr-navy); margin: 0 0 18px;
}
.tr-abschnitt--navy .tr-h2, .tr-abschnitt--nacht .tr-h2 { color: #fff; }
.tr-h3 { font-size: 1.1rem; font-weight: 650; color: var(--tr-navy); margin: 0 0 8px; }

/* Notbremse für lange deutsche Wörter ("Hochsicherheitsverwahrung."):
   im Hero und in den dunklen Abschnitten steht overflow: hidden, dort wurde
   ein zu langes Wort sonst still abgeschnitten, statt umzubrechen. */
.tr-h1, .tr-h2, .tr-h3, .tr-unterzeile, .tr-kicker, .tr-kennzahl-wert, .tr-kennzahl-text,
.tr-karte-wert, .tr-merksatz, .tr-tabelle td, .tr-faq summary, .tr-metall-name {
    overflow-wrap: break-word;
}
.tr-lead { font-size: 1.14rem; color: var(--tr-text-leise); max-width: 660px; margin: 0 0 32px; }
.tr-abschnitt--navy .tr-lead, .tr-abschnitt--nacht .tr-lead { color: rgba(255,255,255,0.62); }

/* Zweite Zeile unter der H1 ("Echtes Metall. Einfacher Zugang. …") */
.tr-unterzeile {
    margin: -6px 0 22px; font-size: clamp(1.15rem, 2.2vw, 1.5rem); font-weight: 500;
    line-height: 1.35; color: var(--tr-navy);
}

/* Rechtlich gebotener Kleintext direkt unter einer Aussage. Leise, aber
   lesbar — versteckt wäre er wertlos. */
.tr-hinweis { margin: 16px 0 0; max-width: 680px; font-size: .8rem; line-height: 1.55; color: var(--tr-text-leise); }
.tr-abschnitt--navy .tr-hinweis { color: rgba(255,255,255,0.5); }

/* ── Hero ─────────────────────────────────────────────────────────────
   Auf allen Seiten dunkel: Nacht-Navy, ein Goldschein, der der Maus leicht
   folgt (--gx/--gy aus treasury.js), Körnung und eine goldene Haarlinie. */
.tr-hero {
    position: relative; overflow: hidden; isolation: isolate;
    padding: 110px 0 96px;
    color: rgba(255,255,255,0.78);
    background:
        radial-gradient(900px 540px at var(--gx, 78%) var(--gy, 16%), rgba(196,154,58,0.24), transparent 62%),
        radial-gradient(760px 520px at 6% 112%, rgba(70,104,170,0.30), transparent 60%),
        linear-gradient(180deg, var(--tr-nacht) 0%, var(--tr-navy) 100%);
    transition: background-position .6s;
}
.tr-hero::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: var(--tr-korn); opacity: .07; mix-blend-mode: overlay;
}
.tr-hero::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(196,154,58,0.6), transparent);
}
.tr-hero .tr-kicker     { color: var(--tr-gold-hell); }
.tr-hero .tr-h1         { color: #fff; }
.tr-hero .tr-unterzeile { color: var(--tr-gold-licht); }
.tr-hero .tr-lead       { color: rgba(255,255,255,0.66); }
.tr-hero .tr-hinweis    { color: rgba(255,255,255,0.42); }

/* Auftritt beim Laden — ohne JavaScript, per CSS */
.tr-hero .tr-kicker, .tr-hero .tr-h1:not([data-tr-split]), .tr-hero .tr-unterzeile,
.tr-hero .tr-lead, .tr-hero .tr-knoepfe, .tr-hero .tr-hinweis, .tr-hero .tr-kennzahlen {
    animation: tr-auftritt 1s var(--tr-weich) both;
}
.tr-hero .tr-h1:not([data-tr-split]) { animation-delay: .1s; }
.tr-hero .tr-unterzeile { animation-delay: .55s; }
.tr-hero .tr-lead       { animation-delay: .7s; }
.tr-hero .tr-knoepfe    { animation-delay: .85s; }
.tr-hero .tr-hinweis    { animation-delay: 1s; }
.tr-hero .tr-kennzahlen { animation-delay: 1.1s; }
@keyframes tr-auftritt {
    from { opacity: 0; transform: translateY(22px); filter: blur(6px); }
    to   { opacity: 1; transform: none; filter: none; }
}

/* Startseite: mehr Bühne, Text links, Rechner rechts */
.tr-hero--start { padding: 96px 0 72px; min-height: min(900px, calc(100svh - 110px)); display: flex; align-items: center; }
.tr-hero--start > .tr-breite { width: 100%; }
.tr-hero--start .tr-h1 { font-size: clamp(2.6rem, 6.2vw, 5rem); line-height: 1.02; letter-spacing: -.04em; }
.tr-hero-raster {
    display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    gap: 56px; align-items: center;
}

/* Lichtpunkte, die langsam treiben */
.tr-hero-licht { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.tr-hero-licht span {
    position: absolute; width: 380px; height: 380px; border-radius: 50%; filter: blur(80px);
    background: rgba(196,154,58,0.18); animation: tr-treiben 18s ease-in-out infinite alternate;
}
.tr-hero-licht span:nth-child(1) { top: -120px; right: 8%; }
.tr-hero-licht span:nth-child(2) { bottom: -160px; left: 18%; background: rgba(80,120,200,0.20); animation-duration: 22s; }
.tr-hero-licht span:nth-child(3) { top: 30%; right: 36%; width: 220px; height: 220px; background: rgba(241,214,138,0.10); animation-duration: 26s; }
@keyframes tr-treiben {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(-60px, 40px, 0) scale(1.15); }
}

/* Wort-für-Wort-Auftritt der Überschrift (Wörter setzt treasury.js).
   Bis das passiert ist, bleibt sie unsichtbar — mit Notausgang nach 1,2 s,
   falls das Skript nicht läuft. */
.tr-js [data-tr-split]:not(.tr-geteilt) { opacity: 0; animation: tr-notfall 0s 1.2s forwards; }
@keyframes tr-notfall { to { opacity: 1; } }
.tr-wort {
    display: inline-block; padding: 0 .02em .1em; margin-bottom: -.1em;
    animation: tr-wort-rein 1s var(--tr-weich) both;
    animation-delay: calc(.15s + var(--w, 0) * .11s);
}
@keyframes tr-wort-rein {
    from { opacity: 0; transform: translateY(.5em) rotate(3deg); filter: blur(10px); }
    to   { opacity: 1; transform: none; filter: none; }
}
/* Jedes Metall in seiner Farbe, mit wanderndem Glanzlicht */
.tr-wort--xau { --a: #b8872c; --b: #e8c462; --c: #fff4c8; }
.tr-wort--xag { --a: #8994a1; --b: #d7dde4; --c: #ffffff; }
.tr-wort--xpt { --a: #92a1ae; --b: #dce4eb; --c: #ffffff; }
.tr-wort--xpd { --a: #8a806d; --b: #d4cab6; --c: #fffaf0; }
.tr-wort--xau, .tr-wort--xag, .tr-wort--xpt, .tr-wort--xpd {
    background: linear-gradient(110deg, var(--a) 0%, var(--b) 34%, var(--c) 50%, var(--b) 66%, var(--a) 100%);
    background-size: 260% 100%; background-position: 100% 0;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: tr-wort-rein 1s var(--tr-weich) both, tr-schimmer 7s ease-in-out infinite;
    animation-delay: calc(.15s + var(--w, 0) * .11s), calc(1.8s + var(--w, 0) * .35s);
}
@keyframes tr-schimmer {
    0%        { background-position: 100% 0; }
    45%, 100% { background-position: 0 0; }
}

/* Kennzahlen im Hero als Glasleiste */
.tr-hero .tr-kennzahlen { margin: 64px 0 0; background: rgba(255,255,255,0.08); }
.tr-hero .tr-kennzahl {
    background: rgba(11,19,34,0.55);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.tr-hero .tr-kennzahl-wert { font-size: 1.05rem; }

/* ── Rechner (Hero) ───────────────────────────────────────────────────
   Glaskarte. Der Ring zeigt, welcher Anteil einer Feinunze der Betrag
   ergibt; pathLength=100, damit der Versatz direkt in Prozent läuft. */
.tr-rechner {
    position: relative; isolation: isolate;
    padding: 28px; border-radius: 24px; color: #fff;
    background: linear-gradient(160deg, rgba(255,255,255,0.11), rgba(255,255,255,0.03));
    border: 1px solid rgba(255,255,255,0.13);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    box-shadow: 0 40px 90px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.14);
    animation: tr-rechner-rein 1.1s var(--tr-weich) .45s both;
}
@keyframes tr-rechner-rein {
    from { opacity: 0; transform: translateY(30px) scale(.97); filter: blur(8px); }
    to   { opacity: 1; transform: none; filter: none; }
}
.tr-rechner-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.tr-rechner-titel { font-size: 1.02rem; font-weight: 650; }

/* minmax(0, …): sonst erzwingen die Metallnamen eine Mindestbreite, und am
   Handy wurde die ganze Seite breiter als der Bildschirm. */
.tr-rechner-tabs {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px;
    padding: 4px; margin-bottom: 22px; border-radius: 13px; background: rgba(0,0,0,0.28);
}
.tr-rechner-tab {
    appearance: none; -webkit-appearance: none; border: 0; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 7px;
    padding: 9px 4px; border-radius: 10px; background: transparent;
    font: inherit; font-size: .8rem; font-weight: 600; color: rgba(255,255,255,0.6);
    transition: background .25s, color .25s, box-shadow .25s;
}
.tr-rechner-tab:hover { color: #fff; }
.tr-rechner-tab[aria-selected="true"] {
    background: rgba(255,255,255,0.11); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14);
}
.tr-rechner-tab:focus-visible { outline: 2px solid var(--tr-gold); outline-offset: 2px; }

.tr-punkt { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: var(--tr-xau); }
.tr-punkt--xag { background: var(--tr-xag); }
.tr-punkt--xpt { background: var(--tr-xpt); }
.tr-punkt--xpd { background: var(--tr-xpd); }

.tr-rechner-label {
    display: block; margin-bottom: 8px;
    font-size: .7rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
    color: rgba(255,255,255,0.5);
}
.tr-rechner-eingabe {
    display: flex; align-items: center; gap: 6px;
    padding: 10px 16px; border-radius: 13px;
    background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1);
    font-size: 1.75rem; font-weight: 750; letter-spacing: -.02em;
    transition: border-color .2s, box-shadow .2s;
}
.tr-rechner-eingabe:focus-within { border-color: var(--tr-gold); box-shadow: 0 0 0 4px rgba(196,154,58,0.18); }
.tr-rechner-waehrung { color: var(--tr-gold-hell); }
.tr-rechner-eingabe input {
    flex: 1; min-width: 0; padding: 0; border: 0; outline: none; background: transparent;
    font: inherit; color: #fff; -moz-appearance: textfield; appearance: textfield;
}
.tr-rechner-eingabe input::-webkit-outer-spin-button,
.tr-rechner-eingabe input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Euro-Gegenwert unter dem Betrag — Richtwert, deshalb zurückhaltend */
.tr-rechner-eur {
    margin-top: 6px;
    font-size: .82rem;
    color: rgba(255,255,255,0.5);
    font-variant-numeric: tabular-nums;
    min-height: 1.2em;
}

.tr-rechner-regler {
    -webkit-appearance: none; appearance: none; width: 100%; height: 6px; margin: 18px 0 22px;
    border-radius: 6px; outline: none; cursor: pointer;
    background: linear-gradient(90deg, var(--tr-gold) 0 var(--fuellung, 5%), rgba(255,255,255,0.14) var(--fuellung, 5%) 100%);
}
.tr-rechner-regler::-webkit-slider-thumb {
    -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
    background: #fff; border: 5px solid var(--tr-gold);
    box-shadow: 0 0 0 6px rgba(196,154,58,0.2), 0 4px 12px rgba(0,0,0,0.4);
    transition: transform .15s;
}
.tr-rechner-regler:active::-webkit-slider-thumb { transform: scale(1.18); }
.tr-rechner-regler::-moz-range-thumb {
    width: 14px; height: 14px; border-radius: 50%;
    background: #fff; border: 5px solid var(--tr-gold);
    box-shadow: 0 0 0 6px rgba(196,154,58,0.2);
}
.tr-rechner-regler:focus-visible { box-shadow: 0 0 0 4px rgba(196,154,58,0.3); }

.tr-rechner-ergebnis {
    display: grid; grid-template-columns: 112px 1fr; gap: 20px; align-items: center;
    padding: 18px; margin-bottom: 16px; border-radius: 18px;
    background: rgba(0,0,0,0.24); border: 1px solid rgba(255,255,255,0.06);
}
.tr-ring { position: relative; width: 112px; height: 112px; }
.tr-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.tr-ring circle { fill: none; stroke-width: 7; }
.tr-ring-grund { stroke: rgba(255,255,255,0.09); }
.tr-ring-wert {
    stroke: var(--tr-gold); stroke-linecap: round; stroke-dasharray: 100;
    transition: stroke-dashoffset .7s var(--tr-weich), stroke .4s;
    filter: drop-shadow(0 0 6px rgba(196,154,58,0.55));
}
.tr-rechner[data-aktiv="XAG"] .tr-ring-wert { stroke: #cfd5dd; filter: drop-shadow(0 0 6px rgba(210,218,226,0.5)); }
.tr-rechner[data-aktiv="XPT"] .tr-ring-wert { stroke: #dbe3ea; filter: drop-shadow(0 0 6px rgba(219,227,234,0.5)); }
.tr-rechner[data-aktiv="XPD"] .tr-ring-wert { stroke: #cdc3af; filter: drop-shadow(0 0 6px rgba(205,195,175,0.5)); }
.tr-ring-symbol {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em;
    background: var(--tr-xau); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tr-ring-symbol { flex-direction: column; line-height: 1; font-variant-numeric: tabular-nums; }
.tr-ring-symbol small { margin-top: 3px; font-size: .42em; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.tr-ring-symbol small:empty { display: none; }
.tr-ring-symbol--lang { font-size: 1.2rem; }
/* Mindestens eine volle Runde: Spur in Metallfarbe hinterlegt */
.tr-ring--runde .tr-ring-grund { stroke: var(--tr-gold); opacity: .3; }
.tr-rechner[data-aktiv="XAG"] .tr-ring--runde .tr-ring-grund { stroke: #cfd5dd; }
.tr-rechner[data-aktiv="XPT"] .tr-ring--runde .tr-ring-grund { stroke: #dbe3ea; }
.tr-rechner[data-aktiv="XPD"] .tr-ring--runde .tr-ring-grund { stroke: #cdc3af; }
.tr-rechner[data-aktiv="XAG"] .tr-ring-symbol { background-image: var(--tr-xag); }
.tr-rechner[data-aktiv="XPT"] .tr-ring-symbol { background-image: var(--tr-xpt); }
.tr-rechner[data-aktiv="XPD"] .tr-ring-symbol { background-image: var(--tr-xpd); }

.tr-rechner-menge {
    font-size: 2.15rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.05;
    color: #fff; font-variant-numeric: tabular-nums; transition: opacity .3s;
}
.tr-rechner-menge small { font-size: .5em; font-weight: 700; color: var(--tr-gold-hell); margin-left: 4px; letter-spacing: 0; }
.tr-rechner-oz { margin-top: 4px; font-size: .86rem; color: rgba(255,255,255,0.58); font-variant-numeric: tabular-nums; }
.tr-rechner-anteil { margin-top: 6px; font-size: .8rem; font-weight: 600; color: var(--tr-gold-licht); }
.tr-rechner-min { display: none; margin-top: 6px; font-size: .78rem; color: #ffb4b4; }
.tr-rechner--zuwenig .tr-rechner-menge { opacity: .3; }
.tr-rechner--zuwenig .tr-rechner-anteil { display: none; }
.tr-rechner--zuwenig .tr-rechner-min { display: block; }
/* Hinweis ab Ueberweisungs-/Pruefschwelle — ruhig, keine Warnfarbe */
.tr-rechner-gross { margin-top: 8px; font-size: .74rem; line-height: 1.45; color: rgba(255,255,255,0.55); }

.tr-rechner-kurs {
    display: flex; justify-content: space-between; gap: 12px; margin-bottom: 16px;
    font-size: .8rem; color: rgba(255,255,255,0.55);
}
.tr-rechner-kurs strong { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.tr-rechner .tr-knopf { width: 100%; justify-content: center; }
.tr-rechner-hinweis { margin: 12px 0 0; font-size: .7rem; line-height: 1.5; color: rgba(255,255,255,0.4); }
.tr-rechner-leer { margin: 0; font-size: .9rem; color: rgba(255,255,255,0.6); }

/* ── Knöpfe ───────────────────────────────────────────────────────────
   Beim Überfahren läuft ein Glanz hindurch (::after hinter dem Text). */
.tr-knopf {
    position: relative; overflow: hidden; isolation: isolate;
    display: inline-flex; align-items: center; gap: 9px;
    padding: 15px 30px; border-radius: 11px;
    font-size: .97rem; font-weight: 650; text-decoration: none; cursor: pointer;
    background: var(--tr-navy); color: #fff; border: 1px solid var(--tr-navy);
    transition: background .2s, transform .25s var(--tr-weich), box-shadow .25s;
}
.tr-knopf::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%; z-index: -1;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,0.45), transparent);
    transform: skewX(-20deg); transition: left .75s var(--tr-weich); pointer-events: none;
}
.tr-knopf:hover { background: var(--tr-navy-hell); color: #fff; transform: translateY(-2px); }
.tr-knopf:hover::after { left: 135%; }
.tr-knopf:focus-visible { outline: 2px solid var(--tr-gold); outline-offset: 3px; }
.tr-knopf--gold {
    background: linear-gradient(135deg, #dcb454, var(--tr-gold) 55%, #b0852c);
    border-color: var(--tr-gold); color: var(--tr-nacht);
    box-shadow: 0 12px 32px rgba(196,154,58,0.35), inset 0 1px 0 rgba(255,255,255,0.35);
}
.tr-knopf--gold:hover {
    background: linear-gradient(135deg, #e6c162, var(--tr-gold-hell) 55%, #bd8f31);
    color: var(--tr-nacht); box-shadow: 0 18px 42px rgba(196,154,58,0.5), inset 0 1px 0 rgba(255,255,255,0.4);
}
.tr-knopf--leer { background: transparent; color: var(--tr-navy); border-color: var(--tr-linie); }
.tr-knopf--leer:hover { background: var(--tr-grund-2); color: var(--tr-navy); }
.tr-knopf--leer::after { background: linear-gradient(100deg, transparent, rgba(196,154,58,0.18), transparent); }

/* Auf dunklem Grund dreht sich der leere Knopf um — sonst dunkle Schrift
   auf dunklem Grund (aufgefallen im Fuß der FAQ-Seite). */
.tr-abschnitt--navy .tr-knopf--leer, .tr-abschnitt--nacht .tr-knopf--leer, .tr-hero .tr-knopf--leer {
    color: #fff; border-color: rgba(255,255,255,0.28); background: rgba(255,255,255,0.04);
}
.tr-abschnitt--navy .tr-knopf--leer:hover, .tr-abschnitt--nacht .tr-knopf--leer:hover, .tr-hero .tr-knopf--leer:hover {
    background: rgba(255,255,255,0.1); color: #fff; border-color: rgba(255,255,255,0.5);
}
.tr-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── Lichtkante unter dem Mauszeiger ──────────────────────────────────
   Ein goldener Rand, der dem Zeiger folgt (--mx/--my aus treasury.js).
   Die Maske schneidet die Mitte heraus, übrig bleibt nur die Kante. */
.tr-karte::before, .tr-metall::before, .tr-rechner::before, .tr-dok::before {
    content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1px;
    background: radial-gradient(280px circle at var(--mx, 50%) var(--my, -200%), rgba(214,176,86,0.95), transparent 62%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0; transition: opacity .35s; pointer-events: none;
}
.tr-karte:hover::before, .tr-metall:hover::before, .tr-rechner:hover::before, .tr-dok:hover::before { opacity: 1; }

/* ── Handlungsaufforderung ────────────────────────────────────────── */
.tr-cta { padding: 0 0 100px; }
.tr-cta-box {
    position: relative; overflow: hidden; isolation: isolate;
    display: flex; align-items: center; justify-content: space-between;
    gap: 36px; flex-wrap: wrap;
    padding: 56px 56px; border-radius: 26px;
    background:
        radial-gradient(600px 300px at 100% 0%, rgba(196,154,58,0.28), transparent 60%),
        radial-gradient(500px 300px at 0% 100%, rgba(70,104,170,0.25), transparent 60%),
        var(--tr-navy);
    box-shadow: 0 40px 80px rgba(11,19,34,0.25);
}
.tr-cta-box::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: var(--tr-korn); opacity: .06; mix-blend-mode: overlay;
}
.tr-cta-box .tr-h2 { color: #fff; margin-bottom: 10px; }
.tr-cta-text { margin: 0; max-width: 560px; font-size: .97rem; color: rgba(255,255,255,0.64); }
.tr-cta-knopf { flex: 0 0 auto; }

@media (max-width: 700px) {
    .tr-cta { padding-bottom: 62px; }
    .tr-cta-box { padding: 34px 26px; gap: 24px; }
    .tr-cta-knopf { width: 100%; justify-content: center; }
}

/* ── Karten ───────────────────────────────────────────────────────── */
.tr-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.tr-karte {
    position: relative; padding: 30px 26px; background: #fff;
    border: 1px solid var(--tr-linie); border-radius: 18px;
    transition: transform .35s var(--tr-weich), box-shadow .35s, border-color .35s;
}
.tr-karte:hover {
    transform: translateY(-5px);
    box-shadow: 0 22px 48px rgba(24,35,59,0.11);
    border-color: rgba(196,154,58,0.22);
}
.tr-karte p { margin: 0; font-size: .94rem; color: var(--tr-text-leise); }
.tr-karte p + p { margin-top: 12px; }
.tr-karte-nr {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; margin-bottom: 18px; border-radius: 11px;
    font-size: .85rem; font-weight: 750; color: var(--tr-gold);
    background: rgba(196,154,58,0.1); border: 1px solid rgba(196,154,58,0.28);
}
/* Großer Wert in einer Karte (Freigrenze, Satz) */
.tr-karte-wert { margin: 6px 0 10px; font-size: 1.55rem; font-weight: 750; line-height: 1.25; letter-spacing: -.02em; color: var(--tr-navy); }
.tr-karte .tr-karte-link {
    display: inline-block; margin-top: 16px; font-size: .9rem; font-weight: 600;
    color: var(--tr-navy); text-decoration: none; border-bottom: 2px solid var(--tr-gold);
}

/* Probleme, die beim Scrollen durchgestrichen werden. --strich läuft per
   GSAP von 0 bis 1; ohne Skript bleibt es bei 0 und die Karte normal. */
.tr-karte--problem .tr-strich {
    background: linear-gradient(var(--tr-gold), var(--tr-gold)) no-repeat 0 58% / calc(var(--strich, 0) * 100%) 2px;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.tr-karte--problem .tr-karte-nr { filter: grayscale(var(--strich, 0)); }
.tr-karte--problem p { color: color-mix(in srgb, var(--tr-text-leise) calc(100% - var(--strich, 0) * 35%), #c5cad3); }
.tr-karte--problem::after {
    content: attr(data-geloest); position: absolute; top: 20px; right: 20px;
    padding: 4px 10px; border-radius: 99px;
    font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--tr-nacht); background: linear-gradient(135deg, #e6c162, var(--tr-gold));
    opacity: var(--strich, 0); transform: scale(calc(.8 + var(--strich, 0) * .2));
}
/* Lösungen mit eigenem Linien-Icon statt Nummer (SVGs in index.php).
   Weiche Goldkachel, beim Überfahren füllt sie sich golden. */
.tr-karte-icon {
    display: flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; margin-bottom: 20px; border-radius: 15px;
    color: var(--tr-gold);
    background: linear-gradient(135deg, rgba(230,193,98,0.20), rgba(196,154,58,0.06));
    border: 1px solid rgba(196,154,58,0.3);
    transition: background .35s, color .35s, box-shadow .35s, transform .35s var(--tr-weich);
}
.tr-karte-icon svg {
    width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.6;
    stroke-linecap: round; stroke-linejoin: round;
}
.tr-karte:hover .tr-karte-icon {
    color: var(--tr-nacht); border-color: transparent;
    background: linear-gradient(135deg, #e6c162, var(--tr-gold));
    box-shadow: 0 10px 24px rgba(196,154,58,0.4);
    transform: rotate(-4deg) scale(1.05);
}

/* ── Metalle (Startseite, dunkler Abschnitt) ──────────────────────────
   Jede Karte mit einem gezeichneten Barren im Farbton des Metalls, dem
   Live-Kurs und leichter 3D-Neigung unter dem Zeiger (--rx/--ry). */
.tr-metalle { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.tr-metall {
    position: relative; overflow: hidden; padding: 28px 24px 26px; border-radius: 20px;
    background: linear-gradient(165deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.66);
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--hub, 0px));
    transition: transform .3s var(--tr-weich), box-shadow .35s, border-color .35s, background .35s;
    transform-style: preserve-3d;
}
.tr-metall:hover {
    --hub: -6px;
    background: linear-gradient(165deg, rgba(255,255,255,0.11), rgba(255,255,255,0.03));
    box-shadow: 0 30px 60px rgba(0,0,0,0.4);
}
.tr-barren {
    position: relative; overflow: hidden; height: 70px; margin: 0 6px 24px;
    background: var(--tr-xau);
    clip-path: polygon(9% 0, 91% 0, 100% 100%, 0 100%);
    display: flex; align-items: center; justify-content: center;
}
.tr-barren::before {                       /* obere Kante, heller */
    content: ''; position: absolute; left: 9%; right: 9%; top: 0; height: 30%;
    background: linear-gradient(180deg, rgba(255,255,255,0.55), transparent);
}
.tr-barren::after {                        /* Glanz beim Überfahren */
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.75) 48%, transparent 64%);
    transform: translateX(-130%); transition: transform 1s var(--tr-weich);
}
.tr-metall:hover .tr-barren::after { transform: translateX(130%); }
.tr-barren span {
    position: relative; font-size: 1.35rem; font-weight: 800; letter-spacing: .04em;
    color: rgba(0,0,0,0.28); text-shadow: 0 1px 0 rgba(255,255,255,0.45);
}
.tr-metall--xag .tr-barren { background: var(--tr-xag); }
.tr-metall--xpt .tr-barren { background: var(--tr-xpt); }
.tr-metall--xpd .tr-barren { background: var(--tr-xpd); }

.tr-metall-code { font-size: .7rem; font-weight: 700; letter-spacing: .14em; color: rgba(255,255,255,0.42); }
.tr-metall-name { font-size: 1.3rem; font-weight: 750; color: #fff; margin: 2px 0 6px; letter-spacing: -.01em; }
.tr-metall-preis {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 14px;
    font-variant-numeric: tabular-nums;
}
.tr-metall-ab { font-size: .75rem; color: rgba(255,255,255,0.45); }
.tr-metall-kurs { font-size: 1.12rem; font-weight: 700; color: #fff; border-radius: 4px; padding: 0 2px; }
.tr-metall-einheit { font-size: .75rem; color: rgba(255,255,255,0.45); }
/* Gold zusaetzlich je Gramm */
.tr-metall-gramm { font-size: .8rem; font-weight: 600; color: rgba(255,255,255,0.7); font-variant-numeric: tabular-nums; }
.tr-metall-gramm [data-feld] { border-radius: 4px; padding: 0 2px; }
.tr-rechner-gramm { margin-left: 4px; font-weight: 500; color: rgba(255,255,255,0.6); }
.tr-rechner-gramm[hidden] { display: none; }
.tr-metall-preis [data-feld="prozent"] { font-size: .78rem; font-weight: 600; border-radius: 4px; padding: 0 2px; }
.tr-metall p { margin: 0; font-size: .9rem; color: rgba(255,255,255,0.62); }

/* ── Ablauf (Startseite) ──────────────────────────────────────────────
   Ohne Skript und am Handy: fünf Schritte untereinander. Auf breiten
   Schirmen pinnt treasury.js den Abschnitt, die Schritte leuchten beim
   Scrollen nacheinander auf (.tr-an / .tr-jetzt). */
.tr-ablauf-raster {
    display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 72px; align-items: center;
}
.tr-ablauf-zaehler {
    display: flex; align-items: baseline; gap: 10px; margin: 8px 0 18px;
    font-size: clamp(3.4rem, 7vw, 5.4rem); font-weight: 800; letter-spacing: -.05em; line-height: 1;
    font-variant-numeric: tabular-nums;
}
.tr-ablauf-zaehler [data-tr-ablauf-nr] {
    background: var(--tr-xau); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tr-ablauf-zaehler small { font-size: .32em; font-weight: 700; letter-spacing: 0; color: var(--tr-text-leise); }
.tr-ablauf-balken { height: 3px; max-width: 280px; margin: 0 0 30px; border-radius: 3px; background: var(--tr-linie); overflow: hidden; }
.tr-ablauf-balken span {
    display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(1);
    background: linear-gradient(90deg, var(--tr-gold-licht), var(--tr-gold));
    transition: transform .3s var(--tr-weich);
}
.tr-ablauf-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.tr-ablauf-schritt {
    display: flex; align-items: center; gap: 20px;
    padding: 22px 24px; border-radius: 18px;
    background: #fff; border: 1px solid var(--tr-linie);
    font-size: 1.04rem; font-weight: 600; line-height: 1.45; color: var(--tr-navy);
    transition: opacity .5s var(--tr-weich), transform .5s var(--tr-weich), background .45s, color .45s, box-shadow .45s, border-color .45s;
}
.tr-ablauf-nr {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 13px;
    font-size: .85rem; font-weight: 800; color: var(--tr-gold);
    background: rgba(196,154,58,0.1); border: 1px solid rgba(196,154,58,0.3);
    transition: background .45s, color .45s, border-color .45s;
}
.tr-ablauf--gepinnt .tr-ablauf-balken span { transform: scaleX(0); }
.tr-ablauf--gepinnt .tr-ablauf-schritt { opacity: .32; transform: scale(.97) translateX(12px); }
.tr-ablauf--gepinnt .tr-ablauf-schritt.tr-an { opacity: 1; transform: none; }
.tr-ablauf-schritt.tr-jetzt {
    background: var(--tr-navy); border-color: var(--tr-navy); color: #fff;
    box-shadow: 0 24px 50px rgba(24,35,59,0.28);
}
.tr-ablauf-schritt.tr-jetzt .tr-ablauf-nr {
    background: linear-gradient(135deg, #e6c162, var(--tr-gold)); color: var(--tr-nacht); border-color: transparent;
}

/* ── Schaufenster ─────────────────────────────────────────────────────
   Großes Bild direkt unter dem Hero, halb auf Navy, halb auf Grau. */
.tr-schaufenster { background: linear-gradient(180deg, var(--tr-navy) 0 42%, var(--tr-grund-2) 42% 100%); padding: 0 0 20px; }
.tr-schaufenster-rahmen { border-radius: 26px; overflow: hidden; box-shadow: 0 40px 90px rgba(11,19,34,0.35); }
.tr-schaufenster-rahmen .tr-bild, .tr-schaufenster-rahmen .tr-bild-platz { border-radius: 0; }

/* ── Kennzahlen-Leiste ────────────────────────────────────────────────
   Die Trennlinien entstehen aus dem 1px-Abstand auf hellerem Grund — so
   stimmen sie auch dann, wenn die Leiste am Handy zweizeilig umbricht. */
.tr-kennzahlen {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
    margin: 0 0 32px; border-radius: 16px; overflow: hidden;
    background: var(--tr-navy-hell);
}
.tr-kennzahl { padding: 22px 16px; text-align: center; background: var(--tr-navy); }
.tr-kennzahl-wert {
    font-size: .95rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase;
    color: var(--tr-gold-hell); font-variant-numeric: tabular-nums;
}
.tr-kennzahl-text { margin-top: 4px; font-size: .82rem; color: rgba(255,255,255,0.72); }
/* Am Handy zwei Spalten, die schrumpfen dürfen (minmax statt 1fr — sonst
   wuchs die Spalte mit "Drittverwahrung" über den Rand), dazu weniger
   Sperrung. Unter 375 px einspaltig: dort passt es zu zweit nicht mehr. */
@media (max-width: 700px) {
    .tr-kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tr-kennzahl { padding: 16px 10px; }
    .tr-kennzahl-wert, .tr-hero .tr-kennzahl-wert { font-size: .8rem; letter-spacing: .04em; hyphens: auto; -webkit-hyphens: auto; }
    .tr-kennzahl-text { font-size: .76rem; hyphens: auto; -webkit-hyphens: auto; }
}
@media (max-width: 374px) { .tr-kennzahlen { grid-template-columns: minmax(0, 1fr); } }

/* ── Merksatz ─────────────────────────────────────────────────────── */
.tr-merksatz {
    position: relative; margin: 48px 0 0; padding: 28px 32px; max-width: 880px;
    border-left: 4px solid var(--tr-gold); border-radius: 0 18px 18px 0;
    background: linear-gradient(90deg, rgba(196,154,58,0.09), var(--tr-grund-2) 45%);
    font-size: 1.24rem; font-weight: 650; line-height: 1.45; letter-spacing: -.01em; color: var(--tr-navy);
}
.tr-abschnitt--grau .tr-merksatz { background: linear-gradient(90deg, rgba(196,154,58,0.1), #fff 45%); }
.tr-merksatz-label {
    display: block; margin-bottom: 8px;
    font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: var(--tr-gold);
}
.tr-merksatz--leise { font-size: .97rem; font-weight: 400; line-height: 1.65; letter-spacing: 0; color: var(--tr-text); }
.tr-merksatz--claim { text-transform: uppercase; letter-spacing: .08em; }

/* ── Schritte (kurze nummerierte Abfolge) ─────────────────────────── */
.tr-schritte {
    list-style: none; margin: 0 0 32px; padding: 0; counter-reset: schritt;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px;
}
.tr-schritte li {
    counter-increment: schritt; padding: 22px 20px;
    background: #fff; border: 1px solid var(--tr-linie); border-radius: 16px;
    font-size: .94rem; font-weight: 550; line-height: 1.5; color: var(--tr-navy);
}
.tr-schritte li::before {
    content: counter(schritt);
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; margin-bottom: 12px; border-radius: 10px;
    font-size: .8rem; font-weight: 750; color: var(--tr-gold);
    background: rgba(196,154,58,0.1); border: 1px solid rgba(196,154,58,0.28);
}

/* ── Aufzählung ───────────────────────────────────────────────────── */
.tr-liste { list-style: none; margin: 16px 0 0; padding: 0; }
.tr-liste li { position: relative; margin-top: 8px; padding-left: 20px; font-size: .94rem; color: var(--tr-text-leise); }
.tr-liste li::before {
    content: ''; position: absolute; left: 0; top: .62em;
    width: 6px; height: 6px; border-radius: 50%; background: var(--tr-gold);
}
.tr-liste--nein li::before {
    content: '\00d7'; top: 0; width: auto; height: auto; border-radius: 0; background: none;
    font-weight: 700; color: var(--tr-gold);
}

/* ── Fließtext-Block ──────────────────────────────────────────────── */
.tr-text { max-width: 780px; }
.tr-text p { margin: 0 0 16px; }
.tr-text .tr-h3 { margin-top: 34px; }
.tr-text .tr-h3:first-child { margin-top: 0; }

/* ── Tabelle (Aktivierungspreise) ─────────────────────────────────── */
.tr-tabelle-rahmen {
    overflow-x: auto; margin: 0 0 22px;
    background: #fff; border: 1px solid var(--tr-linie); border-radius: 18px;
    box-shadow: 0 18px 40px rgba(24,35,59,0.06);
}
.tr-tabelle { width: 100%; border-collapse: collapse; font-size: .94rem; }
.tr-tabelle th {
    padding: 15px 22px; text-align: left; background: var(--tr-grund-2);
    font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--tr-text-leise); border-bottom: 1px solid var(--tr-linie);
}
.tr-tabelle td { padding: 20px 22px; vertical-align: top; color: var(--tr-text-leise); border-bottom: 1px solid var(--tr-linie); transition: background .2s; }
.tr-tabelle tr:last-child td { border-bottom: 0; }
.tr-tabelle tbody tr:hover td { background: rgba(196,154,58,0.05); }
.tr-tabelle-zeitpunkt { font-weight: 600; color: var(--tr-navy) !important; }
.tr-tabelle-preis { font-weight: 750; white-space: nowrap; color: var(--tr-navy) !important; }

/* Am Handy gestapelt statt drei Spalten: Zeitpunkt und Preis in einer
   Zeile, die Beschreibung volle Breite darunter. Vorher wurde sie zu einem
   schmalen Streifen gequetscht und musste seitlich gescrollt werden. */
@media (max-width: 640px) {
    .tr-tabelle thead { display: none; }
    .tr-tabelle, .tr-tabelle tbody { display: block; }
    .tr-tabelle tr {
        display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px;
        padding: 18px 20px; border-bottom: 1px solid var(--tr-linie);
    }
    .tr-tabelle tr:last-child { border-bottom: 0; }
    .tr-tabelle td { padding: 0; border-bottom: 0; }
    .tr-tabelle td:nth-child(3) { grid-column: 1 / -1; font-size: .88rem; }
    .tr-tabelle-zeitpunkt { min-width: 0; hyphens: auto; -webkit-hyphens: auto; }
}

/* ── Einblenden beim Scrollen ─────────────────────────────────────────
   Über `translate`, nicht `transform` — transform bleibt frei für die
   Hover-Effekte, beide setzen sich zusammen. Die Übergänge der Karten
   stehen hier mit drin, sonst würden sie überschrieben. */
.tr-js .tr-rein {
    opacity: 0; translate: 0 34px;
    transition:
        opacity .9s var(--tr-weich) calc(var(--i, 0) * 90ms),
        translate .9s var(--tr-weich) calc(var(--i, 0) * 90ms),
        transform .35s var(--tr-weich), box-shadow .35s, border-color .35s, background .35s;
}
.tr-js .tr-rein.tr-sichtbar { opacity: 1; translate: none; }

/* ── Abstände und Ausrichtung ─────────────────────────────────────── */
.tr-abstand-oben  { margin-top: 48px; }
.tr-abstand-unten { margin-bottom: 52px; }
.tr-knoepfe--abstand { margin-top: 32px; }
.tr-mittig { text-align: center; }
.tr-mittig .tr-lead { margin-left: auto; margin-right: auto; }
.tr-mittig .tr-knoepfe { justify-content: center; }

/* Seitenende ohne eigenen Text: der Link zur nächsten Seite plus die
   Registrierung. */
.tr-weiter {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
    padding-top: 42px; border-top: 1px solid var(--tr-linie);
}

/* ── Legal-Liste ──────────────────────────────────────────────────── */
.tr-doks { display: grid; gap: 12px; max-width: 720px; }
.tr-dok {
    position: relative;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 18px 22px; background: #fff;
    border: 1px solid var(--tr-linie); border-radius: 14px;
    text-decoration: none; color: inherit; transition: transform .3s var(--tr-weich), box-shadow .3s;
}
.tr-dok:hover { color: inherit; transform: translateX(4px); box-shadow: 0 12px 30px rgba(24,35,59,0.08); }
.tr-dok-titel { font-weight: 600; color: var(--tr-navy); }
.tr-dok-meta { font-size: .78rem; color: var(--tr-text-leise); margin-top: 2px; }
.tr-dok-pfeil { color: var(--tr-gold); flex: 0 0 auto; }

/* ── FAQ ──────────────────────────────────────────────────────────── */
.tr-faq { display: grid; gap: 10px; max-width: 820px; }
.tr-faq details {
    background: #fff; border: 1px solid var(--tr-linie); border-radius: 14px; padding: 0;
    transition: border-color .25s, box-shadow .25s;
}
.tr-faq details:hover { border-color: rgba(196,154,58,0.35); }
.tr-faq details[open] { border-color: rgba(196,154,58,0.45); box-shadow: 0 14px 34px rgba(24,35,59,0.07); }
.tr-faq summary {
    padding: 19px 22px; cursor: pointer; font-weight: 600; color: var(--tr-navy);
    list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px;
}
.tr-faq summary::-webkit-details-marker { display: none; }
.tr-faq summary::after {
    content: '+'; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    font-size: 1.2rem; line-height: 1; color: var(--tr-gold);
    background: rgba(196,154,58,0.1); transition: transform .35s var(--tr-weich), background .25s;
}
.tr-faq details[open] summary::after { transform: rotate(45deg); background: rgba(196,154,58,0.2); }
.tr-faq-text { overflow: hidden; padding: 0 22px 20px; font-size: .94rem; color: var(--tr-text-leise); }

/* ── Fuß ──────────────────────────────────────────────────────────── */
.tr-fuss {
    position: relative; overflow: hidden; isolation: isolate;
    background: linear-gradient(180deg, var(--tr-navy), var(--tr-nacht));
    color: rgba(255,255,255,0.6); padding: 70px 0 0; margin-top: 0;
}
.tr-fuss::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(196,154,58,0.5), transparent);
}
.tr-fuss-inhalt {
    display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; padding-bottom: 46px;
}
/* Im Fuß deutlich größer als im Kopf: hier ist das Logo der Abschluss. */
.tr-fuss-marke img { height: 48px; width: auto; opacity: .92; }
.tr-fuss-claim { margin-top: 14px; font-size: .85rem; color: var(--tr-gold); letter-spacing: .04em; }
/* Pflichthinweis aus dem Wording-Dokument (Kap. 8) */
.tr-fuss-hinweis { margin: 18px 0 0; max-width: 460px; font-size: .78rem; line-height: 1.6; color: rgba(255,255,255,0.45); }
.tr-fuss-nav { display: flex; flex-direction: column; gap: 11px; }
.tr-fuss-nav a { font-size: .89rem; color: rgba(255,255,255,0.6); text-decoration: none; transition: color .2s; }
.tr-fuss-nav a:hover { color: #fff; }
.tr-fuss-zeile {
    display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
    padding-top: 22px; padding-bottom: 26px;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: .8rem; color: rgba(255,255,255,0.4);
}

/* ── Bilder ───────────────────────────────────────────────────────── */
.tr-bild { margin: 0; border-radius: 18px; overflow: hidden; background: var(--tr-grund-2); }
.tr-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Platzhalter, solange das Bild fehlt. Bewusst auffällig — und der Prompt
   steht gleich darin, damit niemand ihn suchen muss. */
.tr-bild-platz {
    display: flex; flex-direction: column; gap: 12px;
    padding: 22px; border-radius: 18px;
    background: repeating-linear-gradient(45deg,
        rgba(196,154,58,0.05) 0 12px, rgba(196,154,58,0.10) 12px 24px), #fbf8f1;
    border: 2px dashed rgba(196,154,58,0.5);
}
.tr-bild-platz-kopf {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.tr-bild-platz-datei { color: #8a6a20; }
.tr-bild-platz-format { padding: 3px 9px; border-radius: 5px; background: rgba(196,154,58,0.2); color: #7a5c1a; }
.tr-bild-platz-prompt {
    flex: 1 1 auto; overflow: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .78rem; line-height: 1.55; color: #6b5518;
    background: rgba(255,255,255,0.6); border-radius: 9px; padding: 14px 16px;
}
.tr-bild-platz-fuss { font-size: .7rem; color: #8a6a20; }
.tr-bild-platz-fuss code { background: rgba(255,255,255,0.6); padding: 1px 5px; border-radius: 4px; font-size: .95em; }

/* Bild neben Text */
.tr-zweispalt { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.tr-zweispalt + .tr-zweispalt { margin-top: 80px; }
/* Bild rechts statt links — für abwechselnde Blöcke (Metalle-Seite) */
@media (min-width: 901px) { .tr-zweispalt--gedreht > :first-child { order: 2; } }
@media (max-width: 900px) { .tr-zweispalt { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

/* ── Gründer (Über uns) ───────────────────────────────────────────────
   Porträt neben langem Text: am Desktop bleibt das Bild beim Lesen
   stehen (sticky), sonst wäre es nach dem zweiten Absatz schon weg. */
.tr-abschnitt--linie { border-top: 1px solid var(--tr-linie); }

.tr-gruender {
    display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    gap: 64px; align-items: start; margin-top: 56px;
}
.tr-gruender + .tr-gruender { margin-top: 96px; padding-top: 96px; border-top: 1px solid var(--tr-linie); }
.tr-gruender-bild {
    position: sticky; top: 110px; margin: 0; aspect-ratio: 4 / 5;
    border-radius: 22px; overflow: hidden; background: var(--tr-navy);
    box-shadow: 0 30px 70px rgba(11,19,34,0.22), 0 0 0 1px rgba(196,154,58,0.35);
}
.tr-gruender-bild::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, transparent 62%, rgba(11,19,34,0.35));
}
.tr-gruender-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
.tr-gruender-name {
    margin: 0; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.15;
    letter-spacing: -.02em; font-weight: 700; color: var(--tr-navy);
}
.tr-gruender-rolle {
    display: inline-flex; align-items: center; gap: 12px; margin: 10px 0 28px;
    font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--tr-gold);
}
.tr-gruender-rolle::before { content: ''; width: 28px; height: 1px; background: currentColor; }
.tr-text .tr-gruender-einstieg { font-size: 1.14rem; font-weight: 500; line-height: 1.6; color: var(--tr-navy); }
@media (min-width: 901px) { .tr-gruender--gedreht { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); } }
@media (min-width: 901px) { .tr-gruender--gedreht > .tr-gruender-bild { order: 2; } }
@media (max-width: 900px) {
    .tr-gruender { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 40px; }
    .tr-gruender + .tr-gruender { margin-top: 64px; padding-top: 64px; }
    .tr-gruender-bild { position: relative; top: 0; width: 100%; max-width: 360px; }
}

/* Gemeinsame Vision: beide Porträts klein, überlappend */
.tr-gruender-paar { display: flex; margin-bottom: 28px; }
.tr-gruender-paar img {
    width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: 50% 20%;
    border: 2px solid var(--tr-gold); box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.tr-gruender-paar img + img { margin-left: -16px; }
.tr-text--hell p { color: rgba(255,255,255,0.78); }
.tr-gruender-claim {
    margin: 36px 0 0; font-size: clamp(1.2rem, 2.6vw, 1.7rem); font-weight: 700;
    line-height: 1.3; letter-spacing: .02em; color: var(--tr-gold-licht);
}

/* ── Platzhalter, solange ein Inhalt fehlt ────────────────────────── */
.tr-todo {
    padding: 16px 20px; border-radius: 12px; margin: 22px 0;
    background: rgba(196,154,58,0.08); border: 1px dashed rgba(196,154,58,0.45);
    font-size: .85rem; color: #8a6a20;
}

/* ── Schmale Schirme ──────────────────────────────────────────────── */
/* Überall minmax(0, 1fr) statt 1fr: eine 1fr-Spalte wächst auf die
   Mindestbreite ihres Inhalts, und am Handy lief die Seite dann seitlich raus. */
@media (max-width: 980px) {
    .tr-hero-raster { grid-template-columns: minmax(0, 1fr); gap: 44px; }
    .tr-hero--start { min-height: 0; }
    .tr-ablauf-raster { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

/* Handy: Silbentrennung nach Seitensprache (lang-Attribut) und etwas
   kleinere Überschriften — deutsche Komposita passen sonst nicht in eine
   Zeile ("Vermögenswert.", "Versicherungskosten", "Registrierung"). */
@media (max-width: 480px) {
    .tr-body { hyphens: auto; -webkit-hyphens: auto; }
    .tr-h1 { font-size: 1.95rem; letter-spacing: -.025em; }
    .tr-hero--start .tr-h1 { font-size: 2.35rem; }
    .tr-h2 { font-size: 1.55rem; }
    .tr-unterzeile { font-size: 1.1rem; }
    .tr-rechner-tab { font-size: .74rem; padding: 9px 2px; }
    .tr-rechner-tab .tr-punkt { display: none; }
    .tr-rechner-eingabe { font-size: 1.5rem; }
    .tr-karte-wert { font-size: 1.35rem; }
    .tr-ablauf-schritt { padding: 18px; gap: 14px; font-size: .96rem; }
}
@media (max-width: 360px) {
    .tr-rechner { padding: 18px; }
    .tr-rechner-tab { font-size: .66rem; letter-spacing: -.01em; }
    .tr-h1 { font-size: 1.8rem; }
    .tr-hero--start .tr-h1 { font-size: 2.1rem; }
}

@media (max-width: 900px) {
    .tr-fuss-inhalt { grid-template-columns: 1fr; gap: 30px; }
    .tr-fuss-marke img { height: 40px; }
}

@media (max-width: 820px) {
    .tr-menue-knopf { display: block; cursor: pointer; }
    .tr-nav {
        display: none; position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 0;
        padding: 8px 24px 22px;
        background: rgba(11,19,34,0.97);
        -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .tr-menue-schalter:checked ~ .tr-nav { display: flex; animation: tr-menue-rein .35s var(--tr-weich); }
    .tr-nav-link { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
    .tr-nav-link::after { display: none; }
    .tr-nav-link--an { color: var(--tr-gold-licht); }
    .tr-nav-login { margin-top: 14px; text-align: center; }
    .tr-nav .tr-sprachen { margin-top: 14px; }
    .tr-abschnitt { padding: 70px 0; }
    .tr-hero { padding: 72px 0 60px; }
    .tr-hero--start { padding: 56px 0 48px; }
    .tr-rechner { padding: 22px; }
    .tr-rechner-ergebnis { grid-template-columns: 88px 1fr; gap: 16px; }
    .tr-ring { width: 88px; height: 88px; }
    .tr-ring-symbol { font-size: 1.5rem; }
    .tr-rechner-menge { font-size: 1.75rem; }
}
@keyframes tr-menue-rein { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ── Bewegung reduzieren ──────────────────────────────────────────────
   Wer das im System eingestellt hat, bekommt eine ruhige Seite: keine
   Auftritte, kein Laufband, kein Schimmern. Inhalte stehen sofort da. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    /* Kein Laufband — dafür seitlich scrollbar statt abgeschnitten */
    .tr-ticker { overflow-x: auto; }
    .tr-ticker-band { animation: none !important; margin: 0; }
    .tr-ticker-satz + .tr-ticker-satz { display: none !important; }
}

/* ── Cookie-Hinweis ───────────────────────────────────────────────────
   Nacht + Gold wie Kopf und Rechner. Auf dem Handy ein Sheet von unten,
   damit der Daumen die Knöpfe erreicht. Logik: js/treasury-consent.js */
.tr-cc[hidden], .tr-cc-schwebe[hidden], .tr-cc-einstellungen[hidden] { display: none !important; }
html.tr-cc-offen, html.tr-cc-offen body { overflow: hidden; }

.tr-cc {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center; padding: 16px;
    background: rgba(8, 13, 24, 0.62);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.tr-cc-fenster {
    width: 100%; max-width: 560px; max-height: calc(100vh - 32px);
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--tr-nacht); color: rgba(255,255,255,0.86);
    border: 1px solid rgba(196,154,58,0.28); border-radius: 22px;
    box-shadow: 0 40px 100px rgba(0,0,0,0.55);
    animation: tr-cc-rein .38s var(--tr-weich) both;
}
@keyframes tr-cc-rein { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }

.tr-cc-kopf { display: flex; align-items: center; gap: 14px; padding: 24px 28px 18px; border-bottom: 1px solid rgba(255,255,255,0.07); }
.tr-cc-schild {
    width: 42px; height: 42px; flex-shrink: 0; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    color: var(--tr-gold-licht); background: rgba(196,154,58,0.12); border: 1px solid rgba(196,154,58,0.3);
}
.tr-cc-schild svg { width: 20px; height: 20px; }
.tr-cc-label { display: block; margin-bottom: 2px; font-size: .66rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--tr-gold-hell); }
.tr-cc-titel { margin: 0; font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; color: #fff; }

.tr-cc-inhalt { padding: 18px 28px 0; overflow-y: auto; }
.tr-cc-text { margin: 0; font-size: .88rem; line-height: 1.65; color: rgba(255,255,255,0.68); }
.tr-cc-text a { color: var(--tr-gold-licht); text-underline-offset: 2px; }

.tr-cc-einstellungen { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.tr-cc-kategorie { padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); }
.tr-cc-kat-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tr-cc-kat-name { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; font-weight: 650; color: #fff; }
.tr-cc-kat-name svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--tr-gold-hell); }
.tr-cc-status { flex-shrink: 0; padding: 3px 9px; border-radius: 999px; font-size: .7rem; font-weight: 700; white-space: nowrap; }
.tr-cc-status--an  { color: var(--tr-nacht); background: var(--tr-plus); }
.tr-cc-status--aus { color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.08); }
.tr-cc-kat-text { margin: 8px 0 0; font-size: .8rem; line-height: 1.6; color: rgba(255,255,255,0.58); }

.tr-cc-details { margin-top: 8px; }
.tr-cc-details summary { cursor: pointer; list-style: none; font-size: .76rem; font-weight: 600; color: var(--tr-gold-licht); }
.tr-cc-details summary::-webkit-details-marker { display: none; }
.tr-cc-details summary::after { content: ' ▾'; }
.tr-cc-details[open] summary::after { content: ' ▴'; }
.tr-cc-liste { margin: 10px 0 0; padding: 6px 12px; border-radius: 10px; background: rgba(0,0,0,0.25); }
.tr-cc-zeile { display: grid; grid-template-columns: 130px 1fr; gap: 4px 12px; padding: 7px 0; font-size: .76rem; border-bottom: 1px solid rgba(255,255,255,0.05); }
.tr-cc-zeile:last-child { border-bottom: 0; }
.tr-cc-zeile dt { margin: 0; color: rgba(255,255,255,0.88); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .72rem; overflow-wrap: anywhere; }
.tr-cc-zeile dd { margin: 0; line-height: 1.5; color: rgba(255,255,255,0.58); }
.tr-cc-laufzeit { display: block; color: rgba(255,255,255,0.4); }

.tr-cc-fuss { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; padding: 18px 28px 24px; border-top: 1px solid rgba(255,255,255,0.07); }
.tr-cc-knopf {
    flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center;
    padding: 11px 18px; border-radius: 999px; cursor: pointer;
    font: inherit; font-size: .84rem; font-weight: 650;
    color: rgba(255,255,255,0.82); background: transparent; border: 1px solid rgba(255,255,255,0.16);
    transition: background .2s, border-color .2s, color .2s, transform .2s, box-shadow .2s;
}
.tr-cc-knopf:hover { background: rgba(255,255,255,0.07); color: #fff; }
.tr-cc-knopf--gold { border-color: transparent; background: var(--tr-xau); color: var(--tr-nacht); }
.tr-cc-knopf--gold:hover { background: var(--tr-xau); color: var(--tr-nacht); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(196,154,58,0.35); }
.tr-cc-knopf:focus-visible, .tr-cc-schwebe:focus-visible, .tr-cc-details summary:focus-visible, .tr-cc-text a:focus-visible {
    outline: 2px solid var(--tr-gold); outline-offset: 3px;
}

.tr-cc-schwebe {
    position: fixed; left: 20px; bottom: 20px; z-index: 990;
    width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--tr-gold-licht); background: rgba(11,19,34,0.9); border: 1px solid rgba(196,154,58,0.35);
    box-shadow: 0 6px 20px rgba(0,0,0,0.35); transition: transform .2s;
}
.tr-cc-schwebe:hover { transform: scale(1.08); }
.tr-cc-schwebe svg { width: 18px; height: 18px; }

@media (max-width: 700px) {
    .tr-cc { align-items: flex-end; padding: 0; }
    .tr-cc-fenster { max-width: none; max-height: 92vh; border-radius: 20px 20px 0 0; }
    .tr-cc-kopf, .tr-cc-inhalt, .tr-cc-fuss { padding-left: 20px; padding-right: 20px; }
    .tr-cc-knopf { flex: 1 1 100%; }
    .tr-cc-knopf--gold { order: -1; }
    .tr-cc-zeile { grid-template-columns: 1fr; }
    .tr-cc-schwebe { left: 14px; bottom: 14px; }
}