:root{
    --ease-spring: cubic-bezier(.2,.8,.2,1);
    /* Trimargi palette — Cream (Landing default).
       Warm linen still-life aesthetic derived from the hero-bg moon scene.
       Var names keep --lb-* prefix for now; rename to --tm-* deferred to a
       follow-up commit so the value-swap stays surgical. */
    --lb-base:         #f4ede0;   /* Cream linen */
    --lb-night:        #ecdfc8;   /* Darker cream for gradient depth */
    --lb-surface:      #fbf6ec;   /* Card / panel bg */
    --lb-ink:          #3d342a;   /* Primary text — warm dark brown */
    --lb-mist:         #6b5e4f;   /* Secondary text — warm taupe */
    --lb-accent:       #b89a6a;   /* Muted antique gold */
    --lb-accent-soft:  #8a724a;   /* Darker gold (hover) */
    --lb-ember:        #b85a3a;   /* Errors / warnings — warm rust */
    --lb-rose:         #b88a7a;   /* Secondary accent — warm rose */
    --lb-ink-dark:     #2a2218;   /* Gold-button text — deepest brown for contrast */
    /* Gold-button gradient stops — same family as the wordmark on the hero image. */
    --lb-gold:         #b89a6a;
    --lb-gold-bright:  #d4bd91;
    --lb-gold-dark:    #8a724a;
  }
  body.twilight-mode{
    /* Twilight palette — Results-preview + post-login.
       Source: .tmp/new-design/lib/theme.jsx LB_PALETTES.twilight */
    --lb-base:         #0a0a1a;
    --lb-night:        #15122a;
    --lb-surface:      #1d1638;
    --lb-ink:          #f6e6d8;
    --lb-mist:         #a8a0c6;
    --lb-accent:       #e6b89a;
    --lb-accent-soft:  #a0765c;
    --lb-ember:        #e88a94;
    --lb-rose:         #d49aa4;
  }
  html, body { background: var(--lb-base); color: var(--lb-ink); }
  body{
    font-family: 'Inter', sans-serif;
    line-height: 1.7;
    letter-spacing: 0.005em;
    -webkit-font-smoothing: antialiased;
    /* `clip` statt `hidden` — `hidden` impliziert overflow-y:auto, was den
       sticky-Header (position:sticky am viewport) bricht. */
    overflow-x: clip;
    transition: background-color .3s var(--ease-spring);
  }
  h1,h2,h3,.display{ font-family: 'Cormorant Garamond', serif; font-weight: 500; letter-spacing: -0.02em; }
  h1.display-xl{ letter-spacing: -0.035em; }

  /* Cream backdrop ------------------------------------------------------
     Trimargi cream-paper gradient. Soft warm radial wash over the linen
     base — replaces the night-sky stack from the obsidian era.
     Palette-aware via CSS vars; twilight mode (body.twilight-mode) still
     holds its dark values for now and will be repalette in Phase 4. */
  .cosmos{
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
      radial-gradient(110% 55% at 50% 115%, color-mix(in srgb, var(--lb-accent) 8%, transparent), transparent 65%),
      radial-gradient(75% 45% at 85% 5%, color-mix(in srgb, var(--lb-rose) 6%, transparent), transparent 55%),
      radial-gradient(60% 45% at 8% 22%, color-mix(in srgb, var(--lb-gold) 5%, transparent), transparent 60%),
      linear-gradient(180deg, var(--lb-base) 0%, var(--lb-night) 55%, var(--lb-base) 100%);
  }
  .grain{
    /* Subtle dark paper-grain on cream. Black noise (multiply blend) gives
       the linen-fibre feel without the overlay-on-dark trick from before. */
    position: fixed; inset: 0; z-index: 1; pointer-events:none; opacity: 0.22; mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.18  0 0 0 0 0.15  0 0 0 0 0.10  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  }
  /* Gold-dust starfield — replaces the bright-white obsidian stars.
     On cream the points become faint warm specks that read as fibre
     highlights rather than night-sky stars. */
  .stars{ position: fixed; inset: 0; z-index: 1; pointer-events:none; }
  .stars i{
    position:absolute; width:2px; height:2px; border-radius:50%;
    background: var(--lb-gold); opacity:.22; box-shadow: 0 0 5px rgba(184,154,106,.35);
    animation: lb-twinkle 6s var(--ease-spring) infinite;
  }
  @keyframes lb-twinkle { 0%,100%{opacity:.10; transform: scale(1);} 50%{opacity:.32; transform: scale(1.18);} }

  @keyframes lb-spin { to { transform: rotate(360deg); } }

  /* Reusable Orbits primitive ------------------------------------------
     Prototype-spec OrbitsSVG (theme.jsx:125). 400x400 viewBox, 5 concentric
     rings at r=170/145/115/85/55 rotating at different speeds. Size
     controlled by width/height attrs; styling by --lb-* palette vars. */
  .lb-orbits { transform-origin: 50% 50%; display: block; }
  .lb-orbits__ring { transform-origin: 200px 200px; transform-box: view-box; }
  .lb-orbits__ring-1 { animation: lb-spin 320s linear infinite reverse; }
  .lb-orbits__ring-2 { animation: lb-spin 240s linear infinite; }
  .lb-orbits__ring-3 { animation: lb-spin 180s linear infinite reverse; }
  .lb-orbits__ring-4 { animation: lb-spin 120s linear infinite; }
  .lb-orbits__ring-5 { animation: lb-spin 90s linear infinite reverse; }
  .lb-orbits__ring-1 .lb-orbits__circle,
  .lb-orbits__ring-3 .lb-orbits__circle,
  .lb-orbits__ring-5 .lb-orbits__circle { stroke: color-mix(in srgb, var(--lb-ink) 24%, transparent); stroke-width: .55; fill: none; }
  .lb-orbits__ring-1 .lb-orbits__circle { stroke-width: .75; }
  .lb-orbits__ring-2 .lb-orbits__circle,
  .lb-orbits__ring-4 .lb-orbits__circle { stroke: color-mix(in srgb, var(--lb-ink) 18%, transparent); stroke-width: .5; fill: none; stroke-dasharray: 2 5; }
  .lb-orbits__glyph { fill: color-mix(in srgb, var(--lb-ink) 66%, transparent); font-family: 'Cormorant Garamond', serif; font-size: 11px; font-variant-emoji: text; }
  .lb-orbits__orb-accent { fill: var(--lb-accent); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--lb-accent) 75%, transparent)); }
  .lb-orbits__orb-rose { fill: var(--lb-rose); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--lb-rose) 75%, transparent)); }
  .lb-orbits__orb-mist { fill: var(--lb-mist); filter: drop-shadow(0 0 3px color-mix(in srgb, var(--lb-mist) 75%, transparent)); }
  .lb-orbits__core { filter: drop-shadow(0 0 16px var(--lb-accent)); }
  @media (prefers-reduced-motion: reduce) {
    .lb-orbits__ring { animation: none !important; }
  }

  /* Form controls -------------------------------------------------------- */
  .field { position: relative; }
  .field > label{
    font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
    color: var(--lb-accent); margin-bottom: 8px; display:block;
  }
  .input {
    width:100%; background: rgba(255,252,245,0.78);
    border: 1px solid rgba(184,154,106,0.30);
    border-radius: 14px; padding: 14px 16px;
    color: var(--lb-ink); font-family: 'Inter', sans-serif; font-size: 15px;
    transition: border-color .25s var(--ease-spring), background-color .25s var(--ease-spring), transform .25s var(--ease-spring);
    outline: none;
    color-scheme: light;
  }
  .input::placeholder { color: rgba(107,94,79,.55); }
  .input:hover { border-color: rgba(184,154,106,.55); }
  .input:focus-visible { border-color: var(--lb-accent); background: rgba(255,252,245,0.95); }
  .input:active { transform: translateY(1px); }

  /* M4 — Auth-Modal-Step "Email bestaetigen" (statt vagem Alert) */
  .auth-confirm-step{
    text-align: center;
    padding: 12px 0 4px;
  }
  .auth-confirm-icon{
    display: inline-flex;
    width: 64px; height: 64px;
    align-items: center; justify-content: center;
    margin: 12px auto 14px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--lb-accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--lb-accent) 38%, transparent);
    color: var(--lb-accent);
  }
  .auth-confirm-text{
    color: rgba(61,52,42,0.85);
    font-size: 14px; line-height: 1.55;
    max-width: 320px; margin: 0 auto;
  }
  .auth-confirm-text strong{ color: var(--lb-accent); font-weight: 600; }
  .auth-confirm-back-row{
    margin-top: 14px;
    font-size: 12px;
    color: rgba(61,52,42,0.7);
  }

  /* Auth-Modal: wenn Confirm-Step aktiv, hide alles andere */
  body.auth-confirm-active .auth-orbital,
  body.auth-confirm-active #authForm,
  body.auth-confirm-active .auth-divider,
  body.auth-confirm-active #authGoogle,
  body.auth-confirm-active #authModeToggle,
  body.auth-confirm-active .auth-hint{ display: none !important; }

  /* M3 — Auth-Modal Mode-Toggle (Login ↔ Signup) */
  .auth-mode-toggle{
    margin: 14px 0 6px;
    text-align: center;
    font-size: 12px;
    color: rgba(61,52,42,0.78);
  }
  .auth-mode-toggle .inline-link-btn{ font-size: 12px; }
  .auth-mode-toggle-text{ margin-right: 6px; }

  /* m1 — Generic Spinner (Inline, nutzt currentColor) fuer Loading-Buttons */
  .lb-spinner{
    display: inline-block;
    width: 12px; height: 12px;
    margin-right: 8px;
    vertical-align: -2px;
    border: 1.6px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: lb-spin 0.7s linear infinite;
  }
  @keyframes lb-spin{ to { transform: rotate(360deg); } }

  /* M1 — Hero-CTA: prominenter Button im Hero, scrollt zum Form-Panel */
  .hero-cta-btn{
    display: inline-block;
    width: auto; min-width: 200px;
    padding: 14px 28px;
    margin: 0 auto;
  }

  /* Trimargi Hero — Landing splash with photographic backdrop ----------
     Replaces the obsidian OrbitsSVG hero. Wordmark + tagline + headline
     + text-link CTA, anchored to the bottom-left over a cream-washed
     moon/astrolabium still-life. Mobile-first; desktop two-column grid
     (body main:has(>#formPanel:not(.hide))) still places this section
     in its hero grid-area, narrower but readable. */
  /* ─────────── Phase 8: Trimargi-Landing v4 (Photo-Overlay-Pattern) ───────────
     Mobile: Foto bleibt distinct shape mit asymmetric mask, Wordmark+Eyebrow+h1
     overlay top-left INNERHALB des Fotos, Sub-Text UNTER Foto (volle Lesbarkeit).
     Desktop ≥768px: 2-Col Grid "text photo" / "sub photo" — Overlay wird statisch.
     Design-Tokens via Variant B-Airy (siehe design-tokens.json). */
  .tm-hero{
    position: relative;
    margin: 0 -20px 0;
    padding: 16px 28px 24px;
    isolation: isolate;
  }
  .tm-hero__photo{
    position: relative;
    width: calc(100% + 32px);
    margin-left: -16px;
    margin-bottom: 24px;
    aspect-ratio: 4 / 5;
    border-radius: 4px 60px 60px 4px;
    overflow: hidden;
    box-shadow:
      0 2px 4px rgba(148,106,86,0.06),
      0 16px 40px -12px rgba(148,106,86,0.14);
  }
  .tm-hero__photo img{
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: 75% 65%;
  }
  .tm-hero__photo::after{
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 130% 80% at top left,
      rgba(244,237,224,0.92) 0%,
      rgba(244,237,224,0.65) 30%,
      rgba(244,237,224,0.20) 55%,
      rgba(244,237,224,0) 75%);
    pointer-events: none;
  }
  .tm-hero__text-overlay{
    position: absolute;
    top: 40px;
    left: 28px;
    right: 38%;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .tm-hero__wordmark{
    font-family: 'Fraunces', 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 19px;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: #5C4334;
    font-variation-settings: 'opsz' 144, 'SOFT' 50;
    text-decoration: none;
    display: inline-block;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(184,154,106,0.40);
    align-self: flex-start;
  }
  .tm-hero__wordmark:hover{ color: #2D221A; }
  .tm-hero__eyebrow{
    display: inline-flex; align-items: center; gap: 10px;
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 13px;
    letter-spacing: 0.02em;
    color: #5C4334;
    font-variation-settings: 'opsz' 12, 'SOFT' 50;
  }
  .tm-hero__eyebrow::before{
    content: '✦';
    font-size: 11px;
    color: #946A56;
    font-style: normal;
  }
  .tm-hero__headline{
    margin: 0;
    color: #2D221A;
    font-family: 'Fraunces', 'Cormorant Garamond', serif;
    font-weight: 400;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .tm-hero__h1-prefix{
    font-size: 30px;
    line-height: 1.1;
    letter-spacing: -0.015em;
    font-variation-settings: 'opsz' 60, 'SOFT' 50;
    color: #564437;
  }
  .tm-hero__h1-focus{
    font-style: italic;
    font-size: 60px;
    line-height: 0.92;
    letter-spacing: -0.045em;
    font-variation-settings: 'opsz' 144, 'SOFT' 50;
    color: #5C4334;
    margin-left: -2px;
  }
  .tm-hero__sub{
    margin: 0;
    font-family: 'Fraunces', 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 400;
    font-variation-settings: 'opsz' 144, 'SOFT' 50;
    font-size: 17px;
    line-height: 1.55;
    letter-spacing: -0.01em;
    color: #564437;
    max-width: 30ch;
  }
  @media (min-width: 768px){
    .tm-hero{
      padding: 32px 48px 56px;
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      grid-template-areas:
        "text photo"
        "sub  photo";
      column-gap: 48px;
      align-items: start;
    }
    .tm-hero__text-overlay{
      position: static;
      grid-area: text;
      right: auto;
      gap: 24px;
    }
    .tm-hero__photo{
      grid-area: photo;
      margin: 0;
      aspect-ratio: 3 / 4;
      border-radius: 8px 96px 96px 8px;
      width: 100%;
      align-self: stretch;
    }
    .tm-hero__photo::after{ display: none; }
    .tm-hero__sub{ grid-area: sub; max-width: 36ch; font-size: 21px; }
    .tm-hero__h1-prefix{ font-size: 36px; }
    .tm-hero__h1-focus { font-size: 80px; }
  }
  @media (min-width: 1024px){
    .tm-hero{ padding: 56px 64px 80px; column-gap: 80px; }
    .tm-hero__h1-prefix{ font-size: 40px; }
    .tm-hero__h1-focus { font-size: 96px; line-height: 0.9; }
    .tm-hero__sub      { font-size: 22px; max-width: 40ch; }
  }
  /* ─────────── Phase 8: FAQ-Block (Editorial Q+A, kein Accordion) ───────────
     .landing-only: nur sichtbar wenn #formPanel sichtbar ist (= pre-form-submit
     landing-state). Wird ausgeblendet sobald User Form abschickt (results show)
     oder einloggt (dashboard show). */
  .tm-faq{
    margin: 48px -20px 0;
    padding: 48px 28px 48px;
    background: transparent;
  }
  .tm-faq.landing-only{ display: none; }
  body main:has(> #formPanel:not(.hide)) .tm-faq.landing-only{ display: block; }
  .tm-faq__eyebrow{
    display: inline-flex; align-items: center; gap: 10px;
    margin-bottom: 24px;
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 14px;          /* war 13 — knapp am AA-Threshold für 14px */
    letter-spacing: 0.02em;
    color: #5C4334;            /* war #946A56 (4.27:1) — jetzt brand-700 = ~7.5:1 ✓ */
    font-weight: 500;
  }
  .tm-faq__eyebrow::before{ content: '✦'; font-style: normal; color: #946A56; font-size: 12px; }
  .tm-faq__heading{
    font-family: 'Fraunces', 'Cormorant Garamond', serif;
    font-size: 32px;
    line-height: 1.05;
    letter-spacing: -0.025em;
    font-weight: 400;
    font-variation-settings: 'opsz' 144, 'SOFT' 50;
    margin: 0 0 28px;
    max-width: 16ch;
    color: #2D221A;
  }
  .tm-faq__grid{ display: block; }
  .tm-faq__qa{
    margin: 0 0 24px;
    padding: 0 0 20px;
    border-bottom: 1px solid rgba(237,221,210,0.6);
  }
  .tm-faq__qa:last-child{ border-bottom: 0; }
  .tm-faq__q{
    font-family: 'Fraunces', 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 400;
    font-variation-settings: 'opsz' 144, 'SOFT' 50;
    color: #2D221A;
    margin: 0 0 12px;
    max-width: 22ch;
  }
  .tm-faq__a{
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.65;
    color: #564437;
    margin: 0;
    max-width: 38ch;
  }
  @media (min-width: 768px){
    .tm-faq{ padding: 64px 48px 56px; margin: 64px -20px 0; }
    .tm-faq__heading{ font-size: 42px; max-width: 18ch; }
    .tm-faq__grid{
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 48px;
      row-gap: 0;
    }
    .tm-faq__qa{ margin-bottom: 0; padding: 24px 0; }
  }
  @media (min-width: 1024px){
    .tm-faq{ padding: 80px 64px 72px; max-width: 1000px; margin: 80px auto 0; }
    .tm-faq__heading{ font-size: 48px; }
    .tm-faq__grid{ column-gap: 72px; }
    .tm-faq__q{ font-size: 22px; }
    .tm-faq__a{ font-size: 16px; }
  }

  /* m2 — Inline-Text-Link mit Underline + Farbe (a11y: Form + Farbe) */
  .inline-link-btn{
    background: transparent;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--lb-accent) 55%, transparent);
    color: var(--lb-accent);
    padding: 0 2px 1px;
    cursor: pointer;
    font: inherit;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--lb-accent) 60%, transparent);
    text-underline-offset: 3px;
  }
  .inline-link-btn:hover{ text-decoration-color: var(--lb-accent); }
  .inline-link-btn:focus-visible{ outline: 2px solid var(--lb-accent); outline-offset: 2px; }

  /* Pflichtfeld-Indikator + feldweise Fehlermeldung */
  .req { color: var(--lb-accent); margin-left: 4px; font-weight: 600; }
  .field-error { font-size: 11px; color: var(--lb-ember); margin-top: 6px; min-height: 14px; line-height: 1.4; }
  .field.is-invalid > label { color: var(--lb-ember); }
  .field.is-invalid .input { border-color: var(--lb-ember); }
  .field.is-invalid .input:focus-visible { border-color: var(--lb-ember); }

  .site-footer{
    margin-top: 56px;
    text-align: center;
  }
  .site-footer__links{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 18px;
    font-size: 11px;             /* war 10 — etwas grösser für a11y-Lesbarkeit */
    letter-spacing: .20em;
    text-transform: uppercase;
    color: #5C4334;              /* war --lb-accent-soft (~4.0:1) — jetzt brand-700 (~7.5:1) ✓ */
    font-weight: 500;
  }
  .site-footer__links a{
    transition: color .2s var(--ease-spring), opacity .2s var(--ease-spring);
  }
  .site-footer__links a:hover{ color: var(--lb-accent); }
  .site-footer__links a:focus-visible{ outline: 2px solid var(--lb-accent); outline-offset: 4px; border-radius: 2px; }

  select.input { appearance: none; background-image:
    linear-gradient(45deg, transparent 50%, var(--lb-gold) 50%), linear-gradient(135deg, var(--lb-gold) 50%, transparent 50%);
    background-position: calc(100% - 22px) 20px, calc(100% - 16px) 20px;
    background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 40px;
  }
  select.input option { background: var(--lb-night); color: var(--lb-ink); }

  .btn-primary{
    width:100%; padding: 16px 20px; border-radius: 999px;
    background: linear-gradient(180deg, var(--lb-gold-bright) 0%, var(--lb-gold) 50%, var(--lb-gold-dark) 100%);
    color: var(--lb-ink-dark); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; font-size: 12px;
    box-shadow:
      0 0 0 1px rgba(201,168,106,.5) inset,
      0 8px 28px -6px rgba(201,168,106,.45),
      0 2px 0 rgba(255,255,255,.25) inset;
    transition: transform .25s var(--ease-spring), box-shadow .25s var(--ease-spring), filter .25s var(--ease-spring);
  }
  .btn-primary:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 0 0 1px rgba(201,168,106,.7) inset, 0 12px 32px -6px rgba(201,168,106,.55), 0 2px 0 rgba(255,255,255,.3) inset; }
  .btn-primary:active { transform: translateY(1px); }
  .btn-primary:focus-visible { outline: 2px solid var(--lb-ink); outline-offset: 3px; }

  .btn-ghost{
    color: var(--lb-accent); text-transform: uppercase; letter-spacing: .22em; font-size: 11px;
    transition: opacity .25s var(--ease-spring), transform .25s var(--ease-spring);
  }
  .btn-ghost:hover { opacity: .75; transform: translateY(-1px); }

  .btn-login{
    padding: 8px 18px; border-radius: 999px;
    background: rgba(201,168,106,0.06);
    border: 1px solid rgba(201,168,106,0.45);
    color: var(--lb-accent);
    font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
    transition: background-color .25s var(--ease-spring), border-color .25s var(--ease-spring), transform .25s var(--ease-spring), color .25s var(--ease-spring);
  }
  .btn-login:hover { background: rgba(201,168,106,0.14); border-color: var(--lb-accent); color: var(--lb-ink); }
  .btn-login:focus-visible { outline: 2px solid var(--lb-accent); outline-offset: 3px; }
  .btn-login:active { transform: translateY(1px); }

  /* Card ----------------------------------------------------------------- */
  .panel{
    background:
      radial-gradient(120% 60% at 50% 0%, rgba(184,154,106,0.07), transparent 60%),
      linear-gradient(180deg, rgba(251,246,236,0.96), rgba(244,237,224,0.88));
    border: 1px solid rgba(184,154,106,0.22);
    border-radius: 24px;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.55) inset,
      0 40px 80px -40px rgba(61,52,42,0.18),
      0 20px 40px -30px rgba(184,154,106,0.18);
    backdrop-filter: blur(12px);
  }

  .chip{
    display:inline-flex; align-items:center; gap:8px;
    padding: 6px 12px; border-radius:999px;
    border: 1px solid rgba(61,52,42,.18);
    background: rgba(61,52,42,.04);
    font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--lb-accent);
  }

  .hairline{ border-top: 1px dashed rgba(61,52,42,.18); }

  /* Result / SignCard — prototype spec (screens-results.jsx:6).
     Outer card: glyph on right, meta on left, CTA arrow at bottom-right. */
  /* ══ Post-Deutung — Richtung C "Die Schwelle" ══════════════════════════
     Warmer/heller Screen (Cream-Tokens aus :root) mit dunklem Twilight-
     Kopfband als Brand-Bruecke. Konsumiert ausschliesslich --lb-*-Tokens;
     das Band setzt die Twilight-Werte LOKAL als Overrides (Spiegel von
     body.twilight-mode, main.css:~22-33), damit der Rest warm bleibt. */
  .results-c{
    margin-top: 18px;
    max-width: 440px; margin-left: auto; margin-right: auto;
    border-radius: 28px; overflow: hidden;
    background:
      radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--lb-accent) 12%, transparent) 0%, transparent 55%),
      radial-gradient(90% 60% at 90% 110%, color-mix(in srgb, var(--lb-rose) 10%, transparent) 0%, transparent 50%),
      linear-gradient(180deg, var(--lb-surface) 0%, var(--lb-base) 46%, var(--lb-night) 100%);
    border: 1px solid color-mix(in srgb, var(--lb-accent) 18%, transparent);
    box-shadow:
      0 1px 0 rgba(255,255,255,.7) inset,
      0 30px 70px -30px rgba(42,34,24,.30),
      0 10px 24px -16px rgba(42,34,24,.22);
  }

  /* ── Twilight head-band (Brand-Bruecke) — lokale Twilight-Overrides ── */
  .results-band{
    position: relative; overflow: hidden;
    /* Twilight-Palette lokal — Werte gespiegelt aus body.twilight-mode. */
    --lb-base: #0a0a1a; --lb-night: #15122a; --lb-surface: #1d1638;
    --lb-ink: #f6e6d8; --lb-mist: #a8a0c6; --lb-accent: #e6b89a;
    --lb-rose: #d49aa4;
    background:
      radial-gradient(120% 200% at 20% -40%, color-mix(in srgb, var(--lb-accent) 28%, transparent) 0%, transparent 45%),
      linear-gradient(105deg, var(--lb-base) 0%, var(--lb-night) 55%, var(--lb-surface) 100%);
    color: var(--lb-ink);
    padding: 44px 24px 22px; text-align: center;
  }
  .results-band::after{ /* Starfield */
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .7;
    background-image:
      radial-gradient(1.4px 1.4px at 18% 38%, #fff 50%, transparent 55%),
      radial-gradient(1px 1px at 70% 26%, #fff 50%, transparent 55%),
      radial-gradient(1.2px 1.2px at 86% 58%, color-mix(in srgb, var(--lb-accent) 80%, #fff) 50%, transparent 55%),
      radial-gradient(1px 1px at 40% 70%, #fff 50%, transparent 55%),
      radial-gradient(1px 1px at 56% 18%, color-mix(in srgb, var(--lb-rose) 80%, #fff) 50%, transparent 55%);
  }
  .results-band__orbit{
    position: absolute; right: -46px; top: -46px; width: 150px; height: 150px;
    opacity: .5; border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--lb-accent) 40%, transparent);
    box-shadow:
      0 0 0 14px color-mix(in srgb, var(--lb-accent) 7%, transparent),
      0 0 0 30px color-mix(in srgb, var(--lb-accent) 4%, transparent);
  }
  .results-band__orbit::after{
    content: ""; position: absolute; right: 18px; top: 60px;
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--lb-accent); box-shadow: 0 0 8px 1px var(--lb-accent);
  }
  .results-band__reset{
    position: absolute; left: 16px; top: 16px; z-index: 2;
    width: 34px; height: 34px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, #fff 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--lb-accent) 28%, transparent);
    color: var(--lb-accent); cursor: pointer;
    transition: background .2s var(--ease-spring), transform .2s var(--ease-spring);
  }
  .results-band__reset:hover{ background: color-mix(in srgb, #fff 14%, transparent); transform: translateX(-1px); }
  .results-band__reset:focus-visible{ outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--lb-accent) 35%, transparent); }
  .results-kicker{
    position: relative; z-index: 1;
    font-family: 'Inter', sans-serif;
    font-size: 11px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase;
    color: var(--lb-accent);
  }
  .results-kicker__dot{ opacity: .55; margin: 0 7px; }
  .results-band__title{
    position: relative; z-index: 1;
    font-family: 'Cormorant Garamond', serif; font-weight: 500;
    font-size: 30px; line-height: 1.06; letter-spacing: -.035em;
    color: var(--lb-ink); margin: 13px 0 0;
  }
  .results-band__title em{ font-style: italic; color: var(--lb-accent); font-weight: 400; }
  .results-band__sub{
    position: relative; z-index: 1;
    font-family: 'Inter', sans-serif;
    font-size: 13.5px; line-height: 1.5; color: var(--lb-mist);
    margin: 11px auto 0; max-width: 280px;
  }
  .results-dateline{
    position: relative; z-index: 1;
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 16px; padding: 6px 13px; border-radius: 10px;
    background: color-mix(in srgb, #fff 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--lb-accent) 24%, transparent);
    font-family: 'Inter', sans-serif; font-feature-settings: "tnum" 1;
    font-size: 11px; letter-spacing: .02em;
    color: color-mix(in srgb, var(--lb-ink) 90%, transparent);
  }
  .results-dateline svg{ width: 12px; height: 12px; color: var(--lb-accent); flex: none; }

  /* ── Body (warm) ──────────────────────────────────────────────────── */
  .results-body{ position: relative; padding: 22px 18px 26px; }

  .results-chips{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .results-chip{
    position: relative;
    background: linear-gradient(180deg, color-mix(in srgb, #fff 70%, var(--lb-surface)), var(--lb-surface));
    border: 1px solid color-mix(in srgb, var(--lb-accent) 26%, transparent);
    border-radius: 18px; padding: 13px 8px 12px; text-align: center;
    box-shadow:
      0 1px 0 rgba(255,255,255,.6) inset,
      0 6px 16px -10px color-mix(in srgb, var(--lb-accent) 30%, transparent);
  }
  .results-chip__glyph{
    width: 34px; height: 34px; margin: 0 auto 7px;
    display: grid; place-items: center; border-radius: 50%;
    font-size: 17px; line-height: 1; color: var(--lb-ink-dark);
    background: radial-gradient(circle at 35% 28%, var(--lb-gold-bright), var(--lb-accent) 62%, var(--lb-gold-dark));
    box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 4px 10px -6px color-mix(in srgb, var(--lb-gold-dark) 60%, transparent);
    font-variant-emoji: text;
  }
  .results-chip__name{
    font-family: 'Inter', sans-serif;
    font-size: 9.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
    color: var(--lb-accent-soft);
  }
  .results-chip__sign{
    font-family: 'Cormorant Garamond', serif; font-weight: 500;
    font-size: 17px; letter-spacing: -.02em; color: var(--lb-ink); margin-top: 3px;
  }
  .results-chip__deg{
    font-family: 'Inter', sans-serif; font-feature-settings: "tnum" 1;
    font-size: 10.5px; letter-spacing: .01em; color: var(--lb-mist); margin-top: 2px;
  }

  .results-hint{
    margin-top: 11px; padding: 10px 12px;
    border-left: 2px solid color-mix(in srgb, var(--lb-accent) 50%, transparent);
    background: color-mix(in srgb, var(--lb-accent) 5%, transparent);
    border-radius: 0 10px 10px 0;
    font-family: 'Inter', sans-serif;
    font-size: 12px; line-height: 1.45; color: var(--lb-mist);
  }
  .results-hint b{ color: var(--lb-ink); font-weight: 600; }

  .results-sep{ display: flex; align-items: center; gap: 10px; margin: 22px 2px 16px; }
  .results-sep::before, .results-sep::after{
    content: ""; flex: 1; height: 1px;
    background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--lb-accent) 45%, transparent) 0 4px, transparent 4px 9px);
  }
  .results-sep span{
    font-family: 'Inter', sans-serif;
    font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
    color: var(--lb-accent-soft); white-space: nowrap;
  }

  /* [hidden] greift bei display:flex/grid-Komponenten nicht von selbst — die
     UA-Regel [hidden]{display:none} hat keine Prioritaet gegen einen expliziten
     display. Darum hier explizit fuer die Zustands-Bloecke nachziehen. */
  .results-age[hidden],
  #inlineRegForm[hidden],
  #inlineConfirmStep[hidden],
  #inlineLockState[hidden],
  #inlineRegForm.hidden,
  #inlineConfirmStep.hidden,
  #inlineLockState.hidden{ display: none !important; }

  /* Alters-Status — gold (volljaehrig) / rot (unter 18), token-only */
  .results-age{
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 12px; border-radius: 999px;
    background: color-mix(in srgb, var(--lb-accent) 12%, var(--lb-surface));
    border: 1px solid color-mix(in srgb, var(--lb-accent) 38%, transparent);
    font-family: 'Inter', sans-serif;
    font-size: 11.5px; font-weight: 500; color: var(--lb-accent-soft);
    margin-bottom: 14px;
  }
  .results-age__check{
    width: 15px; height: 15px; border-radius: 50%; flex: none;
    color: var(--lb-ink-dark); display: grid; place-items: center; font-size: 9px;
    background: radial-gradient(circle at 35% 28%, var(--lb-gold-bright), var(--lb-accent) 70%, var(--lb-gold-dark));
    box-shadow: 0 1px 0 rgba(255,255,255,.6) inset;
  }
  .results-age b{ font-weight: 600; color: var(--lb-ink); }
  .results-age--under{
    background: color-mix(in srgb, var(--lb-ember) 9%, var(--lb-surface));
    border-color: color-mix(in srgb, var(--lb-ember) 32%, transparent);
    color: var(--lb-ember); margin: 18px 0 0;
  }
  .results-age--under .results-age__check{ background: var(--lb-ember); color: #fff; box-shadow: none; font-weight: 700; }
  .results-age--under b{ color: var(--lb-ember); }

  /* Inline-Signup form */
  .results-field{ margin-bottom: 11px; }
  .results-field > label{
    display: block; font-family: 'Inter', sans-serif;
    font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    color: var(--lb-mist); margin-bottom: 6px;
  }
  .results-opt{ color: color-mix(in srgb, var(--lb-mist) 70%, transparent); font-weight: 400; text-transform: none; letter-spacing: 0; }
  .results-input{
    display: flex; align-items: center; gap: 9px;
    background: linear-gradient(180deg, #fff, var(--lb-surface));
    border: 1px solid color-mix(in srgb, var(--lb-accent) 30%, transparent);
    border-radius: 14px; padding: 0 13px; height: 46px;
    transition: border-color .25s var(--ease-spring), box-shadow .25s var(--ease-spring);
  }
  .results-input:focus-within{
    border-color: var(--lb-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--lb-accent) 18%, transparent);
  }
  .results-input > svg{ width: 16px; height: 16px; color: var(--lb-accent-soft); flex: none; }
  .results-input input{
    flex: 1; border: 0; background: transparent; outline: none;
    font-family: 'Inter', sans-serif; font-size: 14.5px; color: var(--lb-ink);
  }
  .results-input input::placeholder{ color: color-mix(in srgb, var(--lb-mist) 70%, transparent); }
  .results-eye{ cursor: pointer; opacity: .7; border-radius: 6px; transition: opacity .2s var(--ease-spring); }
  .results-eye:hover{ opacity: 1; }
  .results-eye:focus-visible{ outline: none; opacity: 1; box-shadow: 0 0 0 3px color-mix(in srgb, var(--lb-accent) 30%, transparent); }

  .results-promo-toggle{
    background: none; border: 0; padding: 2px 0; margin: -2px 0 11px; cursor: pointer;
    font-family: 'Inter', sans-serif; font-size: 11.5px; color: var(--lb-accent-soft);
    text-decoration: underline; text-underline-offset: 2px;
  }
  .results-promo-toggle:hover{ color: var(--lb-accent); }
  .results-promo-toggle:focus-visible{ outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--lb-accent) 28%, transparent); border-radius: 4px; }
  .results-affiliate-hint{
    margin-top: 7px; font-family: 'Inter', sans-serif;
    font-size: 11.5px; line-height: 1.45; color: var(--lb-mist);
  }
  .results-affiliate-hint strong{ color: var(--lb-accent-soft); }

  .results-carry{
    display: flex; align-items: center; gap: 8px;
    margin: 13px 0 2px; padding: 9px 11px; border-radius: 10px;
    background: color-mix(in srgb, var(--lb-accent) 6%, transparent);
    border: 1px dashed color-mix(in srgb, var(--lb-accent) 32%, transparent);
    font-family: 'Inter', sans-serif;
    font-size: 11.5px; line-height: 1.35; color: var(--lb-mist);
  }
  .results-carry svg{ width: 15px; height: 15px; color: var(--lb-accent-soft); flex: none; }
  .results-carry b{ color: var(--lb-ink); font-weight: 600; }

  .results-inline-error{
    margin: 11px 0 2px; padding: 9px 12px; border-radius: 10px;
    background: color-mix(in srgb, var(--lb-ember) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--lb-ember) 32%, transparent);
    font-family: 'Inter', sans-serif; font-size: 12px; line-height: 1.4;
    color: var(--lb-ember);
  }

  .results-btn{
    width: 100%; height: 50px; margin-top: 14px;
    border: 0; border-radius: 999px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 9px;
    font-family: 'Inter', sans-serif; font-weight: 600; font-size: 13px;
    letter-spacing: .16em; text-transform: uppercase; color: var(--lb-ink-dark);
    background: linear-gradient(180deg, var(--lb-gold-bright) 0%, var(--lb-accent) 52%, var(--lb-gold-dark) 100%);
    box-shadow:
      0 1px 0 rgba(255,255,255,.5) inset,
      0 -1px 0 color-mix(in srgb, var(--lb-gold-dark) 35%, transparent) inset,
      0 10px 22px -10px color-mix(in srgb, var(--lb-accent) 75%, transparent),
      0 0 0 1px color-mix(in srgb, var(--lb-gold-dark) 18%, transparent);
    transition: transform .25s var(--ease-spring), box-shadow .25s var(--ease-spring);
  }
  .results-btn:hover{ transform: translateY(-1px); }
  .results-btn:active{ transform: translateY(0); }
  .results-btn:focus-visible{
    outline: none;
    box-shadow:
      0 1px 0 rgba(255,255,255,.5) inset,
      0 10px 22px -10px color-mix(in srgb, var(--lb-accent) 75%, transparent),
      0 0 0 3px color-mix(in srgb, var(--lb-accent-soft) 55%, transparent);
  }
  .results-btn[disabled]{ opacity: .6; cursor: default; transform: none; }
  .results-btn svg{ width: 16px; height: 16px; transition: transform .25s var(--ease-spring); }
  .results-btn:hover svg{ transform: translateX(2px); }
  .results-btn--ghost{
    background: color-mix(in srgb, var(--lb-accent) 10%, var(--lb-surface));
    color: var(--lb-accent-soft);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--lb-accent) 30%, transparent);
  }

  .results-legal{
    margin-top: 13px; font-family: 'Inter', sans-serif;
    font-size: 11px; line-height: 1.5; color: var(--lb-mist); text-align: center;
  }
  .results-legal a{ color: var(--lb-accent-soft); text-decoration: underline; text-underline-offset: 2px; }

  .results-login{
    margin-top: 16px; padding-top: 15px; text-align: center;
    font-family: 'Inter', sans-serif; font-size: 12.5px; color: var(--lb-mist);
    border-top: 1px solid color-mix(in srgb, var(--lb-accent) 18%, transparent);
  }
  .results-login button{
    background: none; border: 0; padding: 0; cursor: pointer;
    font: inherit; color: var(--lb-accent-soft); font-weight: 600;
  }
  .results-login button:hover{ text-decoration: underline; text-underline-offset: 3px; }
  .results-login button:focus-visible,
  .results-legal a:focus-visible,
  .results-lock__note a:focus-visible{ outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--lb-accent) 28%, transparent); border-radius: 4px; }

  /* Confirm-Step (inline) */
  .results-confirm{ text-align: center; padding: 8px 4px 4px; }
  .results-confirm__icon{
    width: 52px; height: 52px; margin: 0 auto 14px;
    display: grid; place-items: center; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--lb-accent) 24%, var(--lb-surface)), var(--lb-surface));
    border: 1px solid color-mix(in srgb, var(--lb-accent) 36%, transparent);
    color: var(--lb-accent-soft);
  }
  .results-confirm__icon svg{ width: 24px; height: 24px; }
  .results-confirm__text{
    font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1.55;
    color: var(--lb-mist); margin: 0 auto 4px; max-width: 280px;
  }
  .results-confirm__text strong{ color: var(--lb-ink); }

  /* Lock-State (<18) */
  .results-lock{ text-align: center; padding: 8px 4px 4px; }
  .results-lock__badge{
    width: 56px; height: 56px; margin: 0 auto 16px;
    display: grid; place-items: center; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--lb-rose) 30%, var(--lb-surface)), var(--lb-surface));
    border: 1px solid color-mix(in srgb, var(--lb-rose) 40%, transparent);
    color: var(--lb-ember);
    box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 10px 24px -14px color-mix(in srgb, var(--lb-ember) 50%, transparent);
  }
  .results-lock__badge svg{ width: 24px; height: 24px; }
  .results-lock h2{
    font-family: 'Cormorant Garamond', serif; font-weight: 500;
    font-size: 21px; letter-spacing: -.03em; color: var(--lb-ink); margin: 0 0 9px;
  }
  .results-lock p{
    font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1.55;
    color: var(--lb-mist); margin: 0 auto; max-width: 268px;
  }
  .results-lock__note{ margin-top: 16px; font-size: 11px; color: var(--lb-mist); }
  .results-lock__note a{ color: var(--lb-accent-soft); text-decoration: underline; text-underline-offset: 2px; }

  .fade-in { animation: lb-fade .6s var(--ease-spring) both; }
  @keyframes lb-fade { from { opacity: 0; transform: translateY(8px);} to {opacity:1; transform: translateY(0);} }

  .hide { display: none !important; }

  /* Sticky Masthead — Logo + Burger bleiben beim Scrollen sichtbar.
     Sticky innerhalb der Shell; semitransparenter Cream-Background + Backdrop-Blur
     lassen den Hintergrund (Cosmos-Cream-Gradient bzw. Hero-Bild) weich durchschimmern. */
  .app-header{
    position: sticky;
    top: 0;
    z-index: 50;
    /* margin-top frisst das pt-10 (40px) der .shell auf, damit der Header
       schon im aufgescrollten Zustand am Viewport-Rand klebt — ohne sichtbare
       Lücke, durch die der Seiten-Hintergrund über dem Header schimmert. */
    margin: -40px -20px 0 -20px;
    padding: 14px 20px;
    background: linear-gradient(180deg,
      rgba(244,237,224,0.94) 0%,
      rgba(244,237,224,0.82) 70%,
      rgba(244,237,224,0.55) 100%);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid rgba(184,154,106,0.16);
    box-shadow: 0 8px 24px -16px rgba(61,52,42,0.18);
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
    .app-header{ background: rgba(244,237,224,0.96); }
  }
  #brandMark{ cursor: pointer; }
  #brandMark:focus-visible{ outline: 2px solid var(--lb-accent); outline-offset: 4px; border-radius: 6px; }

  /* Phase K.10 — Brand-Logo (Header) */
  .brand-logo{
    display: block;
    width: 22px; height: 22px;
    border-radius: 6px;
    filter: drop-shadow(0 0 8px rgba(201,168,106,0.25));
  }

  /* Generische Icon-Buttons (ggf. anderweitig genutzt) — die alte Results-
     TopBar/Cards/CTA-Schicht wurde durch Richtung C (oben) ersetzt. */
  .icon-btn{
    width: 38px; height: 38px; border-radius: 12px;
    background: color-mix(in srgb, var(--lb-accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--lb-accent) 30%, transparent);
    color: var(--lb-accent);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background .2s var(--ease-spring);
  }
  .icon-btn:hover{ background: color-mix(in srgb, var(--lb-accent) 20%, transparent); }
  .icon-btn:focus-visible{ outline: 2px solid var(--lb-accent); outline-offset: 2px; }
  .icon-btn-spacer{ width: 38px; height: 38px; flex-shrink: 0; }

  @keyframes lb-halo{
    0%, 100% { opacity: .6; transform: scale(1); }
    50%      { opacity: 1;  transform: scale(1.05); }
  }

  /* Info section */
  .info-card{
    background: linear-gradient(180deg, rgba(251,246,236,0.55), rgba(244,237,224,0.75));
    border: 1px solid rgba(61,52,42,.10);
    border-radius: 20px; padding: 22px;
  }
  .info-card h3{ font-size: 22px; color: var(--lb-ink); margin-bottom: 6px; }
  .info-card .badge{
    display:inline-flex; align-items:center; justify-content:center;
    width: 40px; height: 40px; border-radius: 999px;
    background: radial-gradient(circle at 30% 30%, rgba(201,168,106,.5), rgba(201,168,106,.1));
    border: 1px solid rgba(201,168,106,.35);
    font-family: 'Cormorant Garamond', 'Segoe UI Symbol', serif;
    font-size: 22px; color: var(--lb-ink); font-variant-emoji: text;
    box-shadow: 0 0 20px rgba(201,168,106,.18);
  }

  /* Geburtsort-Picker — eigenes Dropdown (ersetzt gmp-place-autocomplete,
     dessen Liste auf Mobile als Vollbild aufklappte). Das <input> nutzt
     .input / .settings-input; hier nur Wrapper + Vorschlagsliste. */
  .place-ac { position: relative; width: 100%; }
  /* Das Input muss den Wrapper immer fuellen: in Flex-Containern (z. B.
     .fragebogen-row) streckte sich das Input frueher als Flex-Kind selbst;
     seit der Wrapper das Flex-Kind ist, fiele es sonst auf die Default-
     Breite zurueck — und die Liste (left:0;right:0) waere breiter als das
     Feld. */
  .place-ac > input{ width: 100%; box-sizing: border-box; }
  .place-ac__list{
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
    margin: 0; padding: 6px; list-style: none;
    max-height: 264px; overflow-y: auto; overscroll-behavior: contain;
    background: rgba(255,252,245,0.98);
    border: 1px solid color-mix(in srgb, var(--lb-accent) 40%, transparent);
    border-radius: 14px;
    box-shadow:
      0 4px 14px -4px rgba(61,52,42,.22),
      0 20px 44px -14px color-mix(in srgb, var(--lb-accent) 50%, transparent);
    backdrop-filter: blur(8px) saturate(135%);
    color-scheme: light;
    animation: lb-ac-in .2s var(--ease-spring) both;
  }
  .place-ac__list[hidden]{ display: none; }
  @keyframes lb-ac-in{
    from{ opacity: 0; transform: translateY(-6px); }
    to  { opacity: 1; transform: none; }
  }
  .place-ac__option{
    display: flex; flex-direction: column; gap: 1px;
    padding: 9px 12px; border-radius: 10px; cursor: pointer;
    transition: background-color .15s var(--ease-spring);
  }
  .place-ac__option:hover,
  .place-ac__option.is-active{
    background: color-mix(in srgb, var(--lb-accent) 15%, transparent);
  }
  .place-ac__main{
    font-family: 'Inter', sans-serif; font-size: 14.5px; line-height: 1.3;
    color: var(--lb-ink);
  }
  .place-ac__secondary{
    font-family: 'Inter', sans-serif; font-size: 12px; line-height: 1.3;
    color: var(--lb-mist);
  }
  .place-ac__list::-webkit-scrollbar{ width: 8px; }
  .place-ac__list::-webkit-scrollbar-thumb{
    background: color-mix(in srgb, var(--lb-accent) 35%, transparent);
    border-radius: 8px;
  }

  .place-status{ font-size: 11px; color: var(--lb-mist); margin-top: 6px; min-height: 14px; }
  .place-status.ok{ color: var(--lb-accent); }

  /* Auth modal ----------------------------------------------------------- */
  .auth-backdrop{
    position: fixed; inset: 0; z-index: 50;
    background: radial-gradient(circle at 50% 30%, rgba(251,246,236,0.85), rgba(6,4,16,0.95));
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    overflow-y: auto;
    opacity: 0; pointer-events: none;
    transition: opacity .3s var(--ease-spring);
  }
  .auth-backdrop.open{ opacity: 1; pointer-events: auto; }

  .auth-panel{
    position: relative;
    width: 100%; max-width: 420px;
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background:
      radial-gradient(120% 60% at 50% 0%, rgba(201,168,106,0.12), transparent 60%),
      linear-gradient(180deg, rgba(251,246,236,0.94), rgba(244,237,224,0.97));
    border: 1px solid rgba(61,52,42,0.14);
    border-radius: 24px;
    padding: 30px 24px 24px;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.05) inset,
      0 40px 80px -30px rgba(61,52,42,0.18),
      0 20px 60px -20px rgba(201,168,106,0.22);
    transform: translateY(12px) scale(.98);
    opacity: 0;
    transition: transform .35s var(--ease-spring), opacity .35s var(--ease-spring);
  }
  .auth-backdrop.open .auth-panel{ transform: translateY(0) scale(1); opacity: 1; }

  .auth-close{
    position: absolute; top: 14px; right: 14px;
    width: 32px; height: 32px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    color: rgba(61,52,42,0.6);
    border: 1px solid rgba(61,52,42,0.14);
    background: rgba(61,52,42,0.04);
    font-size: 14px;
    transition: transform .25s var(--ease-spring), color .25s var(--ease-spring), background-color .25s var(--ease-spring);
  }
  .auth-close:hover{ color: var(--lb-ink); background: rgba(61,52,42,0.1); }
  .auth-close:focus-visible{ outline: 2px solid var(--lb-accent); outline-offset: 2px; }
  .auth-close:active{ transform: scale(.95); }

  .auth-title{
    font-family: 'Cormorant Garamond', serif;
    font-size: 26px; letter-spacing: -0.02em; line-height: 1.1;
    color: var(--lb-ink); text-align: center;
  }
  .auth-sub{
    font-size: 13px; line-height: 1.6; color: var(--lb-mist);
    text-align: center; margin-top: 8px;
  }

  .auth-tabs{
    display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
    padding: 4px;
    background: rgba(244,237,224,0.6);
    border: 1px solid rgba(61,52,42,0.08);
    border-radius: 14px;
    margin-top: 22px;
  }
  .auth-tab{
    padding: 10px; border-radius: 10px;
    font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
    color: var(--lb-mist);
    transition: color .25s var(--ease-spring), background-color .25s var(--ease-spring);
  }
  .auth-tab.active{
    color: #10091c; font-weight: 600;
    background: linear-gradient(180deg, var(--lb-gold-bright) 0%, var(--lb-gold) 100%);
    box-shadow: 0 2px 8px -2px rgba(201,168,106,.4);
  }
  .auth-tab:not(.active):hover{ color: var(--lb-ink); }
  .auth-tab:focus-visible{ outline: 2px solid var(--lb-accent); outline-offset: 2px; }

  .auth-field{ display: block; }
  .auth-field > label{
    font-size: 10px; letter-spacing: .28em; text-transform: uppercase;
    color: var(--lb-accent); margin-bottom: 6px; display: block;
  }
  .auth-input{
    width: 100%; padding: 14px 16px;
    background: rgba(251,246,236,0.55);
    border: 1px solid rgba(61,52,42,0.16);
    border-radius: 14px;
    font-family: 'Inter', sans-serif; font-size: 15px;
    color: var(--lb-ink);
    outline: none;
    color-scheme: dark;
    transition: border-color .25s var(--ease-spring), background-color .25s var(--ease-spring), transform .25s var(--ease-spring);
  }
  .auth-input::placeholder{ color: rgba(107,94,79,.7); }
  .auth-input:hover{ border-color: rgba(201,168,106,.4); }
  .auth-input:focus,
  .auth-input:focus-visible{ outline: none; border-color: var(--lb-accent); background: rgba(251,246,236,0.7); }
  .auth-input:active{ transform: translateY(1px); }
  /* Chrome/Safari Autofill: verhindert weiße Füllfarbe bei gespeicherten Logins. */
  .auth-input:-webkit-autofill,
  .auth-input:-webkit-autofill:hover,
  .auth-input:-webkit-autofill:focus,
  .auth-input:-webkit-autofill:active{
    -webkit-text-fill-color: var(--lb-ink);
    -webkit-box-shadow: 0 0 0 1000px rgba(251,246,236,0.95) inset;
    caret-color: var(--lb-ink);
    transition: background-color 9999s ease-in-out 0s;
  }
  /* Edge/IE native Passwort-Reveal ausblenden, damit unser Eye-Icon sichtbar bleibt. */
  .auth-input::-ms-reveal,
  .auth-input::-ms-clear{ display: none; }
  /* Chrome/Safari Passwort-Manager-Icon ausblenden. */
  .auth-input::-webkit-credentials-auto-fill-button,
  .auth-input::-webkit-contacts-auto-fill-button{
    visibility: hidden; display: none !important;
    pointer-events: none; position: absolute; right: 0;
  }

  .pw-wrap{ position: relative; }
  .pw-wrap .auth-input{ padding-right: 46px; }
  .pw-toggle{
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    width: 34px; height: 34px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    color: rgba(61,52,42,0.55);
    transition: color .25s var(--ease-spring), background-color .25s var(--ease-spring);
  }
  .pw-toggle:hover{ color: var(--lb-ink); background: rgba(61,52,42,0.06); }
  .pw-toggle:focus-visible{ outline: 2px solid var(--lb-accent); outline-offset: 2px; }
  .pw-toggle svg{
    width: 18px; height: 18px;
    stroke: currentColor; fill: none;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  }
  .pw-toggle .eye-closed{ display: none; }
  .pw-toggle.is-visible .eye-open{ display: none; }
  .pw-toggle.is-visible .eye-closed{ display: block; }

  /* MARGI-20 — Passwort-vergessen-Link unter dem Passwortfeld (Login-Mode) */
  .auth-forgot-row{
    margin: 6px 0 0;
    text-align: right;
    font-size: 12px;
    letter-spacing: .01em;
  }
  .auth-forgot-row .inline-link-btn{
    color: rgba(61,52,42,0.62);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .auth-forgot-row .inline-link-btn:hover{ color: var(--lb-ink); }

  .auth-divider{
    display: flex; align-items: center; gap: 12px;
    font-size: 10px; letter-spacing: .28em; text-transform: uppercase;
    color: var(--lb-mist);
    margin: 22px 0 16px;
  }
  .auth-divider::before, .auth-divider::after{
    content: ""; flex: 1; height: 1px;
    background: rgba(61,52,42,0.12);
  }

  .btn-google{
    width: 100%; padding: 12px 18px; border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    background: rgba(61,52,42,0.04);
    border: 1px solid rgba(61,52,42,0.2);
    color: var(--lb-ink); font-size: 14px; font-weight: 500;
    transition: background-color .25s var(--ease-spring), border-color .25s var(--ease-spring), transform .25s var(--ease-spring);
  }
  .btn-google:hover{ background: rgba(61,52,42,0.08); border-color: rgba(61,52,42,0.35); }
  .btn-google:active{ transform: translateY(1px); }
  .btn-google:focus-visible{ outline: 2px solid var(--lb-accent); outline-offset: 2px; }

  .auth-alert{
    font-size: 12px; line-height: 1.5;
    padding: 10px 12px; border-radius: 10px;
    border: 1px solid;
    display: none;
  }
  .auth-alert.error{
    color: #f5b7b7; border-color: rgba(245,183,183,0.3);
    background: rgba(183,110,121,0.1);
    display: block;
  }
  .auth-alert.info{
    color: var(--lb-accent); border-color: rgba(201,168,106,0.3);
    background: rgba(201,168,106,0.08);
    display: block;
  }

  .auth-hint{
    font-size: 11px; color: var(--lb-mist); text-align: center;
    margin-top: 14px; line-height: 1.6;
  }

  /* ─── Phase F: Dashboard-Ausbau ───────────────────────────────────── */

  /* Burger-Button (Header links, nur logged-in sichtbar) */
  .burger-btn{
    width: 38px; height: 38px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(201,168,106,0.08);
    border: 1px solid rgba(201,168,106,0.32);
    color: var(--lb-accent);
    transition: background-color .25s var(--ease-spring),
                border-color .25s var(--ease-spring),
                transform .25s var(--ease-spring);
  }
  .burger-btn:hover{ background: rgba(201,168,106,0.14); border-color: var(--lb-accent); color: var(--lb-ink); }
  .burger-btn:focus-visible{ outline: 2px solid var(--lb-accent); outline-offset: 3px; }
  .burger-btn:active{ transform: translateY(1px); }
  .burger-btn svg{ width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; }
  /* M13 — One-time Pulse beim ersten Mount (Discoverability), 2× und stop. */
  .burger-btn.is-seek-attention{ animation: lb-burger-pulse 1.6s ease-in-out 2; }
  @keyframes lb-burger-pulse{
    0%   { box-shadow: 0 0 0 0 rgba(201,168,106,0.55); }
    50%  { box-shadow: 0 0 0 8px rgba(201,168,106,0); }
    100% { box-shadow: 0 0 0 0 rgba(201,168,106,0); }
  }

  /* ─── Phase L1: Taler-Grundsystem ─────────────────────────────────── */
  /* Header-Badge: kompakter Pill-Button mit Glyph + Zahl + Label.
     Nur sichtbar im Dashboard-Mode (init hängt .hide ab). */
  .taler-display{
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 13px; font-weight: 500; letter-spacing: 0.01em;
    color: var(--lb-accent);
    background: linear-gradient(180deg, rgba(201,168,106,0.08), rgba(201,168,106,0.02));
    border: 1px solid rgba(201,168,106,0.32);
    box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset,
                0 0 14px rgba(201,168,106,0.08);
    cursor: pointer;
    transition: transform .25s var(--ease-spring),
                box-shadow .25s var(--ease-spring),
                border-color .25s var(--ease-spring),
                color .25s var(--ease-spring);
  }
  .taler-display:hover{
    transform: translateY(-1px);
    color: var(--lb-ink);
    border-color: var(--lb-accent);
    box-shadow: 0 2px 0 rgba(255,255,255,0.06) inset,
                0 0 22px rgba(201,168,106,0.22);
  }
  .taler-display:focus-visible{ outline: 2px solid var(--lb-accent); outline-offset: 3px; }
  .taler-display:active{ transform: translateY(0); }
  .taler-display .taler-icon{ font-size: 14px; opacity: 0.92; line-height: 1; }
  .taler-display .taler-count{ font-variant-numeric: tabular-nums; }
  .taler-display .taler-label{ opacity: 0.72; }
  @media (max-width: 420px){
    /* Sehr schmale Viewports: Label weg, nur Icon + Zahl */
    .taler-display .taler-label{ display: none; }
    .taler-display{ padding: 6px 10px; }
  }

  /* Taler-Popup (große Balance + heutige Gutschriften).
     Nutzt .confirm-backdrop / .confirm-panel (bereits definiert). */
  .taler-panel{ text-align: center; }
  .taler-balance-big{
    font-family: 'Cormorant Garamond', serif;
    font-size: 44px; line-height: 1; letter-spacing: -0.02em;
    color: var(--lb-accent); margin: 8px 0 14px;
  }
  .taler-balance-unit{ font-size: 22px; opacity: 0.7; font-family: 'Cormorant Garamond', serif; }
  .taler-today{
    display: flex; flex-direction: column; gap: 6px;
    margin: 12px 0 6px; font-size: 14px;
    padding: 12px 16px;
    border-radius: 14px;
    border: 1px dashed rgba(61,52,42,0.16);
    background: rgba(251,246,236,0.28);
    text-align: left;
  }
  .taler-today-row{
    display: flex; justify-content: space-between; align-items: baseline;
    color: var(--lb-ink); opacity: 0.88;
  }
  .taler-today-row .amount{ color: var(--lb-accent); font-variant-numeric: tabular-nums; font-weight: 500; }
  .taler-hint{
    font-size: 12px; color: var(--lb-mist); opacity: 0.85;
    font-style: italic; margin: 10px 0 4px; text-align: center;
  }

  /* M6 — Permanenter Taler-Breakdown auf der Taler-Seite (statt nur im Modal) */
  .taler-breakdown-card{
    margin: 14px 0 18px;
    padding: 18px 20px 16px;
    text-align: center;
  }
  .taler-breakdown-kicker{
    font-size: 10px; letter-spacing: .28em; text-transform: uppercase;
    color: var(--lb-accent); display: inline-block; margin-bottom: 4px;
  }
  .taler-breakdown-balance{
    font-family: 'Cormorant Garamond', serif;
    font-size: 38px; line-height: 1; letter-spacing: -0.02em;
    color: var(--lb-accent); margin: 6px 0 10px;
  }
  .taler-breakdown-unit{ font-size: 18px; opacity: 0.7; }
  .taler-breakdown-rows{
    display: flex; flex-direction: column; gap: 6px;
    margin: 10px auto 0; max-width: 360px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px dashed rgba(61,52,42,0.18);
    background: rgba(251,246,236,0.32);
    font-size: 13px; text-align: left;
  }
  .taler-breakdown-rows:empty{ display: none; }
  .taler-breakdown-row{
    display: flex; justify-content: space-between; align-items: baseline;
    color: var(--lb-ink); opacity: 0.9;
  }
  .taler-breakdown-row .amount{ color: var(--lb-accent); font-variant-numeric: tabular-nums; font-weight: 500; }
  .taler-breakdown-row.is-empty{ opacity: 0.55; font-style: italic; }
  .taler-breakdown-hint{
    margin-top: 10px; font-size: 11.5px; color: var(--lb-mist); opacity: 0.78;
    font-style: italic; line-height: 1.5;
    max-width: 360px; margin-left: auto; margin-right: auto;
  }

  /* Login-Bonus-Dialog — sanft feierlich, Glyph mit Gold-Glow. */
  .taler-celebrate{ text-align: center; }
  .celebrate-glyph{
    font-size: 52px; line-height: 1; text-align: center;
    color: var(--lb-accent);
    text-shadow: 0 0 18px rgba(201,168,106,0.55),
                 0 0 36px rgba(201,168,106,0.25);
    margin: 4px 0 8px;
  }
  .login-bonus-breakdown{
    display: flex; flex-direction: column; gap: 6px;
    padding: 14px 18px; margin: 12px 0 6px;
    border-radius: 14px;
    border: 1px dashed rgba(61,52,42,0.18);
    background: rgba(251,246,236,0.35);
    font-size: 14px; text-align: left;
  }
  .login-bonus-row{
    display: flex; justify-content: space-between; align-items: baseline;
    color: var(--lb-ink); opacity: 0.88;
  }
  .login-bonus-row .amount{ color: var(--lb-accent); font-variant-numeric: tabular-nums; }
  .login-bonus-row.total{
    border-top: 1px solid rgba(61,52,42,0.18);
    padding-top: 8px; margin-top: 4px;
    font-family: 'Cormorant Garamond', serif; font-size: 18px;
    color: var(--lb-accent); opacity: 1;
  }

  /* Phase L3 — Taler-Kaufseite ------------------------------------------ */
  .taler-shop-intro{
    padding: 22px 22px 24px;
    display: flex; flex-direction: column; gap: 8px;
    text-align: center;
  }
  .taler-shop-kicker{
    font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
    color: rgba(201,168,106,0.85);
  }
  .taler-shop-title{
    font-family: 'Cormorant Garamond', serif;
    font-size: 30px; line-height: 1.12; letter-spacing: -0.02em;
    color: var(--lb-ink); margin: 2px 0 4px;
  }
  .taler-shop-sub{
    font-size: 13.5px; line-height: 1.6;
    color: rgba(61,52,42,0.72);
    max-width: 380px; margin: 0 auto;
  }
  .taler-shop-balance-inline{
    margin-top: 8px;
    font-size: 12.5px; letter-spacing: 0.02em;
    color: rgba(61,52,42,0.6);
  }
  .taler-shop-balance-inline #talerShopBalance{
    color: var(--lb-accent); font-weight: 500;
    font-variant-numeric: tabular-nums;
  }
  .taler-shop-footnote{
    margin: 18px 22px 4px;
    font-size: 11.5px; line-height: 1.55;
    color: rgba(61,52,42,0.48); text-align: center;
    font-style: italic;
  }

  .taler-packages-grid{
    display: grid; grid-template-columns: 1fr;
    gap: 12px;
    padding: 8px 0 4px;
  }
  .taler-packages-loading{
    padding: 28px 14px; text-align: center;
    color: rgba(61,52,42,0.52); font-size: 12.5px;
    letter-spacing: 0.18em; text-transform: uppercase;
  }
  /* Pakete: einzeilige Karten — Label · Taler · €-Preis · CTA in einer Reihe.
     Tagline + bestes-Paket-Stempel entfernt; Ersparnis-Chip wandert in den
     Header der Karte (vor dem Label). */
  .taler-package-card{
    position: relative;
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(251,246,236,0.5);
    border: 1px solid rgba(201,168,106,0.22);
    transition: border-color .22s ease-out, transform .22s cubic-bezier(0.2,0.9,0.3,1), box-shadow .22s ease-out;
  }
  .taler-package-card:hover{
    border-color: rgba(201,168,106,0.45);
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(201,168,106,0.14);
  }
  .taler-package-card.is-featured{
    border-color: rgba(201,168,106,0.58);
    background: linear-gradient(160deg, rgba(251,246,236,0.7) 0%, rgba(251,246,236,0.55) 100%);
    box-shadow: 0 12px 30px rgba(201,168,106,0.16);
  }
  .taler-package-label{
    font-family: 'Cormorant Garamond', serif;
    font-size: 19px; line-height: 1.15;
    color: var(--lb-ink);
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .taler-package-values{
    display: inline-flex; align-items: baseline;
    gap: 8px;
    flex-shrink: 0;
  }
  .taler-package-amount{
    font-family: 'Cormorant Garamond', serif;
    font-size: 19px; letter-spacing: -0.01em;
    color: var(--lb-accent);
    font-variant-numeric: tabular-nums;
  }
  .taler-package-amount-unit{
    font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
    color: rgba(201,168,106,0.72); margin-left: 3px;
  }
  .taler-package-btn{
    margin: 0; flex-shrink: 0;
    appearance: none; cursor: pointer;
    padding: 8px 14px; border-radius: 999px;
    font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
    background: rgba(201,168,106,0.14);
    border: 1px solid rgba(201,168,106,0.48);
    color: #f5ead0;
    transition: background .22s, border-color .22s, transform .15s;
  }
  .taler-package-btn:hover{
    background: rgba(201,168,106,0.22);
    border-color: rgba(201,168,106,0.72);
  }
  .taler-package-btn:active{ transform: translateY(1px); }
  .taler-package-btn:focus-visible{ outline: 2px solid var(--lb-accent); outline-offset: 3px; }
  .taler-package-card.is-featured .taler-package-btn{
    background: linear-gradient(140deg, #f0d48c 0%, var(--lb-gold) 100%);
    color: #1a1224;
    border-color: rgba(201,168,106,0.82);
  }
  .taler-package-card.is-featured .taler-package-btn:hover{
    background: linear-gradient(140deg, #f5dda0 0%, #d4b578 100%);
  }

  @media (min-width: 560px){
    .taler-packages-grid{ grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 8px 0; }
  }

  /* Mehr-Taler ↔ Abos Tab-Switcher (Phase L4-merge): konsolidierte
     Bezahlseite mit Pill-Toggle. */
  .taler-shop-tabs{
    display: inline-flex;
    margin: 16px auto 18px;
    padding: 4px;
    border-radius: 999px;
    border: 1px solid rgba(201,168,106,0.28);
    background: rgba(251,246,236,0.55);
    align-self: center;
  }
  .taler-shop-tabs-wrap{ display: flex; justify-content: center; }
  .taler-shop-tab{
    appearance: none; border: 0; cursor: pointer;
    padding: 8px 22px;
    border-radius: 999px;
    background: transparent;
    color: rgba(61,52,42,0.65);
    font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase;
    font-family: 'Inter', sans-serif;
    transition: color .2s, background-color .25s;
    min-width: 96px;
  }
  .taler-shop-tab:hover{ color: var(--lb-ink); }
  .taler-shop-tab:focus-visible{ outline: 2px solid var(--lb-accent); outline-offset: 3px; }
  .taler-shop-tab.is-active{
    background: linear-gradient(140deg, #f0d48c 0%, var(--lb-gold) 100%);
    color: #1a1224;
    box-shadow: 0 4px 12px -2px rgba(201,168,106,0.45);
  }
  .taler-shop-pane{ animation: lb-fade .4s var(--ease-spring) both; }

  /* Pricing-Modell 2026-05-27 — Tier-Toggle ueber Paket-Grid. Highlightet
     den aktiven Status, zeigt aber alle 4 Tier-Preise pro Paket-Card
     parallel an. Default = aktiver Plan des Users (talerState.plan). */
  .taler-tier-toggle-wrap{
    display: flex; flex-direction: column; align-items: center;
    gap: 10px;
    margin: 4px 0 22px;
    text-align: center;
  }
  .taler-tier-toggle-label{
    font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
    color: rgba(61,52,42,0.55);
    font-family: 'Inter', sans-serif;
  }
  .taler-tier-toggle{
    display: inline-flex; flex-wrap: wrap; justify-content: center;
    padding: 4px;
    border-radius: 999px;
    border: 1px solid rgba(201,168,106,0.28);
    background: rgba(251,246,236,0.55);
  }
  .taler-tier-toggle-btn{
    appearance: none; border: 0; cursor: pointer;
    padding: 8px 18px;
    border-radius: 999px;
    background: transparent;
    color: rgba(61,52,42,0.65);
    font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
    font-family: 'Inter', sans-serif;
    transition: color .2s, background-color .25s, box-shadow .25s;
    white-space: nowrap;
  }
  .taler-tier-toggle-btn:hover{ color: var(--lb-ink); }
  .taler-tier-toggle-btn:focus-visible{ outline: 2px solid var(--lb-accent); outline-offset: 3px; }
  .taler-tier-toggle-btn.is-active{
    background: linear-gradient(140deg, #f0d48c 0%, var(--lb-gold) 100%);
    color: #1a1224;
    box-shadow: 0 4px 12px -2px rgba(201,168,106,0.45);
  }
  .taler-tier-toggle-hint{
    font-size: 12px;
    color: rgba(61,52,42,0.6);
    max-width: 420px;
    line-height: 1.5;
    margin: 0;
  }

  /* Vertikale Ladder der 4 Tier-Preise pro Paket-Card. Active-Row ist
     hervorgehoben (gold-tint, fettere Schrift), die anderen Rows bleiben
     sichtbar als Wert-Vergleich + Upsell-Signal. */
  .taler-package-tier-prices{
    display: flex; flex-direction: column; gap: 4px;
    margin: 10px 0 14px;
    padding: 8px 10px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--lb-paper) 35%, transparent);
    border: 1px solid rgba(61,52,42,0.08);
  }
  .taler-package-tier-row{
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 4px 6px;
    border-radius: 8px;
    font-size: 12.5px;
    color: rgba(61,52,42,0.62);
    transition: background-color .2s, color .2s;
  }
  .taler-package-tier-row .tier-row-label{
    letter-spacing: 0.04em;
    font-family: 'Inter', sans-serif;
  }
  .taler-package-tier-row .tier-row-price{
    font-weight: 500;
    font-variant-numeric: tabular-nums;
  }
  .taler-package-tier-row[data-active="true"]{
    background: color-mix(in srgb, var(--lb-gold) 18%, transparent);
    color: var(--lb-ink);
  }
  .taler-package-tier-row[data-active="true"] .tier-row-price{
    font-weight: 600;
    font-size: 14px;
  }

  /* C4 — Kontext-Badge im Mock-Pay-Modal (Einmalkauf vs. Abo) */
  .mock-pay-context{
    display: block; margin: -2px auto 14px; max-width: 320px;
    padding: 8px 12px; border-radius: 12px;
    background: color-mix(in srgb, var(--lb-accent) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--lb-accent) 28%, transparent);
    color: var(--lb-ink); opacity: 0.92;
    font-size: 11.5px; line-height: 1.45; letter-spacing: .01em;
    text-align: center;
  }
  .mock-pay-context:empty{ display: none; }
  .mock-pay-context strong{ color: var(--lb-accent); font-weight: 600; }

  /* Mock-Payment-Dialog (Spec §11) --------------------------------------- */
  .mock-pay-summary{
    display: flex; flex-direction: column; gap: 4px;
    padding: 14px 18px; margin: 12px 0 6px;
    border-radius: 14px;
    border: 1px dashed rgba(61,52,42,0.18);
    background: rgba(251,246,236,0.35);
    font-size: 14px; text-align: left;
  }
  .mock-pay-summary-row{
    display: flex; justify-content: space-between; align-items: baseline;
    color: var(--lb-ink); opacity: 0.88;
  }
  .mock-pay-summary-row .amount{ color: var(--lb-accent); font-variant-numeric: tabular-nums; }
  .mock-pay-summary-row.total{
    border-top: 1px solid rgba(61,52,42,0.18);
    padding-top: 8px; margin-top: 4px;
    font-family: 'Cormorant Garamond', serif; font-size: 17px;
  }
  /* Pricing-Modell 2026-05-27 — Tier-Rabatt-Anzeige im Dialog. Brutto-Preis
     durchgestrichen, effektiver Preis dahinter; Tier-Hinweis als Mini-Row
     ueber dem Total. */
  .mock-pay-summary-row.tier-hint{
    font-size: 11.5px;
    color: rgba(61,52,42,0.7);
    letter-spacing: 0.04em;
  }
  .mock-pay-summary-row.tier-hint .amount{
    color: var(--lb-accent);
    font-weight: 500;
  }
  .mock-pay-price-strike{
    text-decoration: line-through;
    opacity: 0.5;
    margin-right: 8px;
    font-size: 0.82em;
    font-family: 'Inter', sans-serif;
  }
  .mock-pay-price-current{
    color: var(--lb-accent);
    font-weight: 600;
  }

  /* Pflicht-Bestätigungen im Checkout — § 356 Abs. 5 BGB Widerrufs-Verzicht,
     § 312j BGB Button-Lösung. Muss aktiv vom User abgehakt werden. */
  .checkout-consent{
    display: flex; flex-direction: column; gap: 8px;
    margin: 14px 0 4px;
    padding: 12px 16px 14px;
    border: 1px solid rgba(61,52,42,0.16);
    border-radius: 14px;
    background: rgba(251,246,236,0.45);
    text-align: left;
  }
  .checkout-consent__legend{
    font-size: 11.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--lb-mist, #8a7e6f);
    font-weight: 500;
    padding: 0 6px;
    margin-bottom: 2px;
  }
  .checkout-consent__row{
    display: flex; gap: 10px; align-items: flex-start;
    font-size: 13px; line-height: 1.5;
    color: rgba(61,52,42,0.88);
    cursor: pointer;
    padding: 4px 2px;
    border-radius: 8px;
    transition: background 160ms ease;
  }
  .checkout-consent__row:hover{ background: rgba(201,168,106,0.06); }
  .checkout-consent__row input[type="checkbox"]{
    flex-shrink: 0;
    width: 18px; height: 18px;
    margin: 1px 0 0;
    accent-color: var(--lb-accent, #c9a86a);
    cursor: pointer;
  }
  .checkout-consent__row input[type="checkbox"]:focus-visible{
    outline: 2px solid var(--lb-accent, #c9a86a);
    outline-offset: 3px;
  }
  .checkout-consent__row strong{ color: var(--lb-ink, #2a241d); font-weight: 600; }
  .checkout-consent__hint{
    font-size: 12px;
    color: var(--lb-mist, #8a7e6f);
    margin: 6px 2px 4px;
    text-align: center;
  }
  .checkout-consent__hint[data-error="true"]{ color: var(--lb-rose, #b06e6e); }

  .taler-celebrate-panel{ text-align: center; }

  /* Phase L4 — Abo-Seite ------------------------------------------------- */
  .subscription-intro{
    padding: 22px 22px 24px;
    display: flex; flex-direction: column; gap: 8px;
    text-align: center;
  }
  .subscription-kicker{
    font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
    color: rgba(201,168,106,0.85);
  }
  .subscription-title{
    font-family: 'Cormorant Garamond', serif;
    font-size: 30px; line-height: 1.12; letter-spacing: -0.02em;
    color: var(--lb-ink); margin: 2px 0 4px;
  }
  .subscription-sub{
    font-size: 13.5px; line-height: 1.6;
    color: rgba(61,52,42,0.72);
    max-width: 380px; margin: 0 auto;
  }
  .subscription-current-inline{
    margin-top: 8px;
    font-size: 12.5px; letter-spacing: 0.02em;
    color: rgba(61,52,42,0.6);
  }
  .subscription-current-inline #subscriptionCurrentPlan{
    color: var(--lb-accent); font-weight: 500;
  }

  .subscription-plans-grid{
    display: grid; grid-template-columns: 1fr;
    gap: 14px;
    padding: 8px 0 4px;
  }
  .subscription-plans-loading{
    padding: 28px 14px; text-align: center;
    color: rgba(61,52,42,0.52); font-size: 12.5px;
    letter-spacing: 0.18em; text-transform: uppercase;
  }
  .subscription-plan-card{
    position: relative;
    display: flex; flex-direction: column; gap: 10px;
    padding: 20px 20px 18px;
    border-radius: 18px;
    background: rgba(251,246,236,0.55);
    border: 1px solid rgba(201,168,106,0.22);
    transition: border-color .22s ease-out, transform .22s cubic-bezier(0.2,0.9,0.3,1), box-shadow .22s ease-out;
  }
  .subscription-plan-card:hover{
    border-color: rgba(201,168,106,0.45);
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(201,168,106,0.14);
  }
  .subscription-plan-card.is-featured{
    border-color: rgba(201,168,106,0.58);
    background: linear-gradient(160deg, rgba(251,246,236,0.72) 0%, rgba(251,246,236,0.58) 100%);
    box-shadow: 0 14px 32px rgba(201,168,106,0.18);
  }
  .subscription-plan-card.is-featured::before{
    content: 'Beliebteste Wahl';
    position: absolute; top: -8px; right: 18px;
    font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase;
    padding: 3px 10px; border-radius: 999px;
    background: linear-gradient(140deg, #f0d48c 0%, var(--lb-gold) 100%);
    color: #1a1224; font-weight: 500;
  }
  .subscription-plan-card.is-active::after{
    content: 'aktiv';
    position: absolute; top: -8px; left: 18px;
    font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase;
    padding: 3px 10px; border-radius: 999px;
    background: rgba(251,246,236,0.92);
    border: 1px solid rgba(160,220,190,0.6);
    color: #bce3cd;
  }
  /* M11 — Pro-Plan-Marker: zeigt explizit dass dieser Plan Tiefenanalyse
     freischaltet. User sieht den Zusammenhang zwischen Plan-Wahl + Pro-Modus. */
  .subscription-plan-pro-badge{
    display: inline-flex; align-items: center; gap: 6px;
    margin: 8px 0 6px;
    padding: 5px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--lb-accent) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--lb-accent) 38%, transparent);
    color: var(--lb-accent);
    font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em;
  }
  .subscription-plan-pro-badge svg{ flex-shrink: 0; opacity: 0.9; }

  .subscription-plan-header{
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px;
  }
  .subscription-plan-label{
    font-family: 'Cormorant Garamond', serif;
    font-size: 26px; line-height: 1.1; letter-spacing: -0.01em;
    color: var(--lb-ink);
  }
  .subscription-plan-price{
    font-size: 13.5px;
    color: rgba(61,52,42,0.82);
    font-variant-numeric: tabular-nums;
  }
  .subscription-plan-price .plan-price-free{ color: rgba(201,168,106,0.85); letter-spacing: 0.04em; }
  .subscription-plan-daily{
    display: flex; align-items: baseline; gap: 8px;
    padding: 8px 0 2px;
    border-top: 1px solid rgba(61,52,42,0.1);
    border-bottom: 1px solid rgba(61,52,42,0.1);
  }
  .subscription-plan-daily-amount{
    font-family: 'Cormorant Garamond', serif;
    font-size: 28px; line-height: 1;
    color: var(--lb-accent);
    font-variant-numeric: tabular-nums;
  }
  .subscription-plan-daily-unit{
    font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
    color: rgba(201,168,106,0.72);
  }
  .subscription-plan-tagline{
    font-size: 13.5px; line-height: 1.55;
    color: rgba(61,52,42,0.82);
  }
  .subscription-plan-highlights{
    list-style: none; padding: 0; margin: 2px 0 0;
    display: flex; flex-direction: column; gap: 4px;
  }
  .subscription-plan-highlights li{
    position: relative;
    padding-left: 18px;
    font-size: 12.5px; line-height: 1.55;
    color: rgba(61,52,42,0.72);
  }
  .subscription-plan-highlights li::before{
    content: "\2022";
    position: absolute; left: 0; top: 0;
    color: rgba(201,168,106,0.72);
    font-size: 11px;
  }
  .subscription-plan-btn{
    margin-top: 12px;
    appearance: none; cursor: pointer;
    padding: 13px 20px; border-radius: 999px;
    font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
    background: rgba(201,168,106,0.10);
    border: 1px solid rgba(201,168,106,0.55);
    color: var(--lb-accent-soft);
    box-shadow: 0 1px 0 rgba(255,255,255,.4) inset;
    transition: background .22s var(--ease-spring), border-color .22s var(--ease-spring), color .22s var(--ease-spring), transform .15s var(--ease-spring), box-shadow .22s var(--ease-spring);
  }
  .subscription-plan-btn:hover{
    background: rgba(201,168,106,0.18);
    border-color: var(--lb-accent);
    color: var(--lb-ink);
    box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 6px 18px -8px rgba(184,154,106,.45);
  }
  .subscription-plan-btn:active{ transform: translateY(1px); }
  .subscription-plan-btn:focus-visible{ outline: 2px solid var(--lb-accent); outline-offset: 3px; }
  .subscription-plan-btn:disabled{
    cursor: default;
    background: rgba(201,168,106,0.06);
    border-color: rgba(184,154,106,0.30);
    color: rgba(107,94,79,0.65);
    box-shadow: none;
  }
  .subscription-plan-btn:disabled:hover{
    background: rgba(201,168,106,0.06);
    border-color: rgba(184,154,106,0.30);
    color: rgba(107,94,79,0.65);
    transform: none;
    box-shadow: none;
  }
  .subscription-plan-card.is-featured .subscription-plan-btn{
    background: linear-gradient(180deg, var(--lb-gold-bright) 0%, var(--lb-gold) 50%, var(--lb-gold-dark) 100%);
    color: var(--lb-ink-dark);
    border-color: rgba(201,168,106,0.82);
    box-shadow:
      0 0 0 1px rgba(201,168,106,.5) inset,
      0 8px 22px -8px rgba(201,168,106,.55),
      0 2px 0 rgba(255,255,255,.25) inset;
  }
  .subscription-plan-card.is-featured .subscription-plan-btn:hover{
    background: linear-gradient(180deg, #e8d2a4 0%, var(--lb-gold-bright) 50%, var(--lb-gold) 100%);
    color: var(--lb-ink-dark);
    filter: brightness(1.04);
  }
  .subscription-plan-card.is-featured .subscription-plan-btn:disabled{
    background: rgba(201,168,106,0.18);
    color: rgba(61,52,42,0.55);
    border-color: rgba(201,168,106,0.45);
    box-shadow: none;
    filter: none;
  }

  @media (min-width: 560px){
    .subscription-plans-grid{ grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 8px 0; }
  }

  /* Phase L6 — Analytics-Dashboard (admin-only) */
  .admin-intro{
    padding: 20px 22px 22px;
    display: flex; flex-direction: column; gap: 6px;
    text-align: center;
  }
  .admin-kicker{
    font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
    color: rgba(201,168,106,0.85);
  }
  .admin-title{
    font-family: 'Cormorant Garamond', serif;
    font-size: 26px; line-height: 1.15; letter-spacing: -0.02em;
    color: var(--lb-ink); margin: 0 0 2px;
  }
  .admin-sub{
    font-size: 12.5px; line-height: 1.55;
    color: rgba(61,52,42,0.62);
    max-width: 380px; margin: 0 auto;
  }
  .admin-kpi-grid{
    display: grid; grid-template-columns: 1fr; gap: 12px;
    padding: 8px 14px 20px;
  }
  .admin-kpi-loading{
    padding: 30px 14px; text-align: center;
    color: rgba(61,52,42,0.55); font-style: italic;
    letter-spacing: 0.05em;
  }
  .admin-kpi-card{
    padding: 14px 16px 16px;
    border-radius: 14px;
    background: rgba(251,246,236,0.55);
    border: 1px solid rgba(61,52,42,0.08);
  }
  .admin-kpi-title{
    font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
    color: rgba(201,168,106,0.75);
    margin: 0 0 8px;
  }
  .admin-kpi-big{
    font-family: 'Cormorant Garamond', serif;
    font-size: 30px; line-height: 1.05; letter-spacing: -0.01em;
    color: var(--lb-ink);
    font-variant-numeric: tabular-nums;
  }
  .admin-kpi-unit{
    font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase;
    color: rgba(201,168,106,0.7);
    margin-left: 6px;
  }
  .admin-kpi-sub{
    font-size: 12px; color: rgba(61,52,42,0.62);
    margin-top: 6px;
  }
  .admin-kpi-rows{
    display: flex; flex-direction: column; gap: 4px;
    margin-top: 4px;
  }
  .admin-kpi-row{
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 8px;
    font-size: 12.5px;
    border-bottom: 1px solid rgba(61,52,42,0.05);
    padding: 4px 0;
  }
  .admin-kpi-row:last-child{ border-bottom: 0; }
  .admin-kpi-row .label{ color: rgba(61,52,42,0.72); }
  .admin-kpi-row .value{ color: var(--lb-accent); font-variant-numeric: tabular-nums; }

  /* --- Phase L8 Affiliate-Views ---------------------------------------- */
  /* Schnell-Link-Karte unten in dashAdmin */
  .admin-affiliates-link{
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; margin: 6px 14px 24px; padding: 18px 22px;
    cursor: pointer; text-decoration: none; color: inherit;
    transition: transform .22s var(--ease-spring), box-shadow .22s var(--ease-spring);
  }
  .admin-affiliates-link:hover{ transform: translateY(-1px);
    box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--lb-accent) 40%, transparent); }
  .admin-affiliates-title{ font-size: 22px; margin: 4px 0 4px; }
  .admin-affiliates-arrow{ font-size: 22px; color: var(--lb-accent); }

  /* Affiliate-Dashboard */
  .affiliate-dash{ padding: 8px 14px 24px; display: flex; flex-direction: column; gap: 14px; }
  .affiliate-card{ padding: 18px 20px; }
  .affiliate-status-row{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .affiliate-status-pill{
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px; border-radius: 999px; font-size: 11px; letter-spacing: 0.15em;
    text-transform: uppercase; font-weight: 600;
    background: rgba(201,168,106,0.18); color: var(--lb-gold-bright);
    border: 1px solid rgba(201,168,106,0.35);
  }
  .affiliate-status-pill.pending  { background: rgba(232,164,119,0.16); color: var(--lb-ember); border-color: rgba(232,164,119,0.35); }
  .affiliate-status-pill.rejected { background: rgba(183,110,121,0.18); color: var(--lb-rose);  border-color: rgba(183,110,121,0.4); }
  .affiliate-status-pill.paused   { background: rgba(142,122,168,0.18); color: var(--lb-mist);  border-color: rgba(142,122,168,0.4); }
  .affiliate-status-pill.banned   { background: rgba(183,110,121,0.28); color: #ffb1b1;          border-color: rgba(255,150,150,0.5); }
  .affiliate-status-rate{ color: rgba(61,52,42,0.72); font-size: 13px; }

  /* Link + Code Copy-Karten */
  .affiliate-share-grid{ display: grid; grid-template-columns: 1fr; gap: 12px; }
  @media (min-width: 560px){ .affiliate-share-grid{ grid-template-columns: 1fr 1fr; } }
  .affiliate-copy-card{
    padding: 14px 16px; border-radius: 14px;
    background: rgba(251,246,236,0.55); border: 1px solid rgba(61,52,42,0.08);
  }
  .affiliate-copy-label{
    font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
    color: rgba(201,168,106,0.75); margin: 0 0 8px;
  }
  .affiliate-copy-row{
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  }
  .affiliate-copy-value{
    flex: 1 1 auto; min-width: 0;
    font-family: 'Cormorant Garamond', serif; font-size: 22px;
    color: var(--lb-ink); word-break: break-all; line-height: 1.2;
  }
  .affiliate-copy-btn{
    flex: 0 0 auto;
    padding: 6px 12px; border-radius: 999px;
    background: rgba(201,168,106,0.18); border: 1px solid rgba(201,168,106,0.4);
    color: var(--lb-gold-bright); font-size: 11px; letter-spacing: 0.12em;
    text-transform: uppercase; cursor: pointer;
    transition: background .2s var(--ease-spring), transform .2s var(--ease-spring);
  }
  .affiliate-copy-btn:hover{ background: rgba(201,168,106,0.28); }
  .affiliate-copy-btn.copied{ background: rgba(116,196,118,0.2); color: #a8e6a4; border-color: rgba(116,196,118,0.4); }

  /* Commission-Tabelle */
  .affiliate-table-wrap{ overflow-x: auto; }
  .affiliate-table{ width: 100%; border-collapse: collapse; font-size: 13px; }
  .affiliate-table th, .affiliate-table td{
    padding: 8px 10px; text-align: left;
    border-bottom: 1px solid rgba(61,52,42,0.07);
  }
  .affiliate-table th{
    font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
    color: rgba(201,168,106,0.7); font-weight: 500;
  }
  .affiliate-table td{ color: rgba(61,52,42,0.85); font-variant-numeric: tabular-nums; }
  .affiliate-table .num{ text-align: right; }
  .affiliate-table .status{ font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; }
  .affiliate-table .status.pending{  color: var(--lb-ember); }
  .affiliate-table .status.approved{ color: var(--lb-gold-bright); }
  .affiliate-table .status.paid{     color: #a8e6a4; }
  .affiliate-table .status.reversed{ color: var(--lb-rose); }
  .affiliate-table .status.rejected{ color: var(--lb-rose); }

  .affiliate-pagination{
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding-top: 12px;
  }
  .affiliate-status-filter{
    display: flex; gap: 6px; flex-wrap: wrap; padding: 0 0 12px;
  }
  .affiliate-status-filter button{
    padding: 4px 12px; border-radius: 999px;
    background: transparent; border: 1px solid rgba(61,52,42,0.15);
    color: rgba(61,52,42,0.7); font-size: 11px; letter-spacing: 0.1em;
    cursor: pointer; transition: all .15s var(--ease-spring);
  }
  .affiliate-status-filter button:hover{ border-color: rgba(201,168,106,0.5); }
  .affiliate-status-filter button.active{
    background: rgba(201,168,106,0.18); border-color: rgba(201,168,106,0.5);
    color: var(--lb-gold-bright);
  }

  /* Channels-Liste */
  .affiliate-channel-list{ display: flex; flex-direction: column; gap: 8px; }
  .affiliate-channel-item{
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; border-radius: 12px;
    background: rgba(251,246,236,0.55); border: 1px solid rgba(61,52,42,0.07);
  }
  .affiliate-channel-platform{
    flex: 0 0 auto;
    font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--lb-gold-bright);
  }
  .affiliate-channel-handle{ flex: 1 1 auto; color: rgba(61,52,42,0.85); }
  .affiliate-channel-status{
    flex: 0 0 auto; font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase;
    color: rgba(61,52,42,0.55);
  }

  /* Bewerbungs-Wizard */
  .affiliate-apply{ padding: 8px 14px 24px; display: flex; flex-direction: column; gap: 14px; }
  .apply-stepper{
    display: flex; gap: 6px; padding: 0 0 4px;
    overflow-x: auto;
  }
  .apply-step{
    flex: 1 1 auto; min-width: 120px;
    padding: 10px 14px; border-radius: 12px;
    background: rgba(251,246,236,0.55); border: 1px solid rgba(61,52,42,0.07);
    color: rgba(61,52,42,0.55); font-size: 12px; letter-spacing: 0.05em;
    cursor: default; text-align: center;
  }
  .apply-step.active{
    background: rgba(201,168,106,0.18);
    border-color: rgba(201,168,106,0.4);
    color: var(--lb-gold-bright);
  }
  .apply-step.done{ color: rgba(61,52,42,0.85); }

  .apply-section{ display: block; }
  .apply-section.hide{ display: none; }
  .affiliate-section-title{ font-size: 22px; margin: 0 0 4px; }
  .affiliate-section-sub{ font-size: 13px; color: rgba(61,52,42,0.7); margin: 0 0 18px; }

  .apply-grid{
    display: grid; grid-template-columns: 1fr; gap: 14px;
  }
  @media (min-width: 560px){ .apply-grid{ grid-template-columns: 1fr 1fr; } }
  .apply-field{ display: flex; flex-direction: column; gap: 6px; }
  .apply-field-half{ }
  @media (min-width: 560px){ .apply-field-half{ grid-column: span 1; } }
  .apply-field > span{
    font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase;
    color: rgba(201,168,106,0.7);
  }
  /* M10 — Plain-Sprache-Hint unter Fachbegriff-Feldern */
  .apply-field-hint{
    display: block;
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.5;
    color: rgba(61,52,42,0.62);
    letter-spacing: 0.01em;
    text-transform: none;
    font-weight: 400;
  }
  .apply-field input[type=text],
  .apply-field input[type=email],
  .apply-field input[type=number],
  .apply-field select,
  .apply-field textarea{
    width: 100%; padding: 10px 12px;
    border-radius: 10px; border: 1px solid rgba(61,52,42,0.18);
    background: rgba(251,246,236,0.55); color: var(--lb-ink);
    font-size: 14px; font-family: inherit;
  }
  .apply-field input:focus, .apply-field select:focus, .apply-field textarea:focus{
    outline: none; border-color: rgba(201,168,106,0.55);
    box-shadow: 0 0 0 2px rgba(201,168,106,0.12);
  }
  .apply-field-checkbox{
    flex-direction: row; align-items: flex-start; gap: 10px;
    padding: 6px 0;
  }
  .apply-field-checkbox input{ margin-top: 4px; }
  .apply-field-checkbox span{
    text-transform: none; letter-spacing: normal; font-size: 13.5px;
    color: rgba(61,52,42,0.85);
  }

  .apply-channels{ display: flex; flex-direction: column; gap: 12px; }
  .apply-channel-row{
    display: grid; grid-template-columns: 1fr; gap: 8px;
    padding: 12px; border-radius: 12px;
    background: rgba(251,246,236,0.55); border: 1px solid rgba(61,52,42,0.07);
    position: relative;
  }
  @media (min-width: 560px){
    .apply-channel-row{ grid-template-columns: 1fr 1.5fr 1fr auto; align-items: end; }
  }
  .apply-channel-row .apply-field > span{ font-size: 10px; }
  .apply-channel-remove{
    background: transparent; border: 0;
    color: rgba(183,110,121,0.85); cursor: pointer;
    font-size: 18px; padding: 8px;
  }

  .apply-nav{
    display: flex; gap: 10px; justify-content: space-between;
    padding-top: 12px;
  }

  /* Admin-Affiliates-Tabs */
  .admin-affiliates-tabs{
    display: flex; gap: 6px; padding: 0 14px 12px;
    overflow-x: auto;
  }
  .admin-tab{
    flex: 0 0 auto;
    padding: 8px 16px; border-radius: 999px;
    background: rgba(251,246,236,0.55); border: 1px solid rgba(61,52,42,0.08);
    color: rgba(61,52,42,0.7); font-size: 12px; letter-spacing: 0.05em;
    cursor: pointer; transition: all .15s var(--ease-spring);
  }
  .admin-tab:hover{ border-color: rgba(201,168,106,0.4); }
  .admin-tab.active{
    background: rgba(201,168,106,0.18); border-color: rgba(201,168,106,0.5);
    color: var(--lb-gold-bright);
  }

  .admin-affiliates-list{ padding: 0 14px 24px; }
  .admin-affiliate-row{
    padding: 14px 16px; margin-bottom: 10px;
    border-radius: 14px;
    background: rgba(251,246,236,0.55); border: 1px solid rgba(61,52,42,0.08);
  }
  .admin-affiliate-row-head{
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; flex-wrap: wrap; margin-bottom: 8px;
  }
  .admin-affiliate-name{
    font-family: 'Cormorant Garamond', serif; font-size: 20px;
    color: var(--lb-ink); margin: 0;
  }
  .admin-affiliate-meta{
    display: flex; gap: 12px; flex-wrap: wrap;
    font-size: 11.5px; color: rgba(61,52,42,0.65);
  }
  .admin-affiliate-meta strong{ color: var(--lb-accent); font-weight: 500; }
  .admin-affiliate-channels{
    display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px;
  }
  .admin-affiliate-channel-chip{
    font-size: 10.5px; letter-spacing: 0.1em;
    padding: 3px 8px; border-radius: 999px;
    background: rgba(201,168,106,0.12); color: rgba(61,52,42,0.85);
    border: 1px solid rgba(201,168,106,0.25);
  }
  .admin-affiliate-actions{
    display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px;
  }
  .admin-action-btn{
    padding: 6px 12px; border-radius: 8px;
    background: rgba(201,168,106,0.18); border: 1px solid rgba(201,168,106,0.4);
    color: var(--lb-gold-bright); font-size: 11px; letter-spacing: 0.08em;
    cursor: pointer; transition: background .15s;
  }
  .admin-action-btn:hover{ background: rgba(201,168,106,0.28); }
  .admin-action-btn.danger{
    background: rgba(183,110,121,0.18); border-color: rgba(183,110,121,0.4);
    color: var(--lb-rose);
  }
  .admin-action-btn.danger:hover{ background: rgba(183,110,121,0.28); }
  .admin-affiliate-rejection{
    margin-top: 10px; padding: 10px 12px;
    border-radius: 10px; background: rgba(183,110,121,0.08);
    border: 1px solid rgba(183,110,121,0.2);
    font-size: 12.5px; color: rgba(61,52,42,0.85);
  }

  /* Admin-Affiliates-Toolbar (Suche + Filter + Trefferzahl) */
  .admin-affiliates-toolbar{
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 0 14px 12px;
  }
  .admin-affiliates-search-wrap{ position: relative; }
  .admin-affiliates-search-wrap::before{
    content: ""; position: absolute; left: 12px; top: 50%;
    width: 14px; height: 14px; transform: translateY(-50%);
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>") center/contain no-repeat;
    color: rgba(61,52,42,0.55); pointer-events: none;
  }
  .admin-affiliates-search{
    width: 100%; box-sizing: border-box;
    padding: 9px 12px 9px 34px; border-radius: 999px;
    background: rgba(251,246,236,0.55);
    border: 1px solid rgba(61,52,42,0.1);
    color: var(--lb-ink); font-size: 13px;
    transition: border-color .15s var(--ease-spring), background-color .15s var(--ease-spring);
  }
  .admin-affiliates-search::placeholder{ color: rgba(61,52,42,0.45); }
  .admin-affiliates-search:focus{
    outline: none;
    border-color: rgba(201,168,106,0.45);
    background: rgba(251,246,236,0.7);
  }
  .admin-affiliates-toolbar-row{
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  }
  .admin-affiliates-filter{
    flex: 1 1 auto; min-width: 0;
    padding: 9px 32px 9px 12px; border-radius: 999px;
    background: rgba(251,246,236,0.55);
    border: 1px solid rgba(61,52,42,0.1);
    color: var(--lb-ink); font-size: 12.5px;
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a86a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
    transition: border-color .15s var(--ease-spring);
  }
  .admin-affiliates-filter:focus{ outline: none; border-color: rgba(201,168,106,0.45); }
  .admin-affiliates-filter[hidden]{ display: none; }
  .admin-affiliates-count{
    font-size: 11.5px; letter-spacing: 0.06em;
    color: rgba(61,52,42,0.6);
    padding: 0 4px;
    white-space: nowrap;
  }

  /* Admin-Affiliates-Tabelle */
  .admin-affiliates-table-wrap{
    overflow-x: auto;
    border-radius: 14px;
    background: rgba(251,246,236,0.55);
    border: 1px solid rgba(61,52,42,0.08);
  }
  .admin-affiliates-table{
    width: 100%; min-width: 640px;
    border-collapse: collapse;
    font-size: 12.5px;
    color: var(--lb-ink);
  }
  .admin-affiliates-table thead th{
    position: sticky; top: 0;
    background: rgba(251,246,236,0.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    text-align: left;
    font-weight: 500;
    font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
    color: rgba(61,52,42,0.6);
    padding: 10px 12px;
    border-bottom: 1px solid rgba(61,52,42,0.1);
    white-space: nowrap;
  }
  .admin-affiliates-table th.sortable{
    cursor: pointer;
    user-select: none;
    transition: color .15s var(--ease-spring);
  }
  .admin-affiliates-table th.sortable:hover{ color: var(--lb-gold-bright); }
  .admin-affiliates-table th.sortable.is-sorted{ color: var(--lb-gold-bright); }
  .admin-affiliates-sort-arrow{
    display: inline-block; margin-left: 4px;
    font-size: 9px; opacity: 0.5;
    transform: translateY(-1px);
  }
  .admin-affiliates-table th.is-sorted .admin-affiliates-sort-arrow{ opacity: 1; }
  .admin-affiliates-table th.align-right,
  .admin-affiliates-table td.align-right{ text-align: right; }
  .admin-affiliates-table tbody tr{
    border-bottom: 1px solid rgba(61,52,42,0.05);
    transition: background-color .12s;
  }
  .admin-affiliates-table tbody tr:last-child{ border-bottom: none; }
  .admin-affiliates-table tbody tr:hover{ background: rgba(201,168,106,0.06); }
  .admin-affiliates-table td{
    padding: 11px 12px;
    vertical-align: middle;
  }
  .admin-affiliates-table td.cell-name{ font-weight: 500; color: var(--lb-ink); }
  .admin-affiliates-table td.cell-num{ font-variant-numeric: tabular-nums; }
  .admin-affiliates-table td.cell-muted{ color: rgba(61,52,42,0.65); }
  .admin-affiliates-table td.cell-channels{
    display: flex; flex-wrap: wrap; gap: 4px; max-width: 220px;
  }
  .admin-affiliates-table td.cell-reason{
    color: rgba(61,52,42,0.85);
    max-width: 280px;
    overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap;
  }
  .admin-affiliates-table td.cell-actions{
    white-space: nowrap;
  }
  .admin-affiliates-table .admin-action-btn{
    padding: 5px 10px; font-size: 10.5px;
  }
  .admin-affiliates-table .admin-action-btn + .admin-action-btn{ margin-left: 6px; }
  .admin-affiliates-empty{
    padding: 28px 16px;
    text-align: center;
    color: rgba(61,52,42,0.6);
    font-size: 13px;
  }
  @media (min-width: 560px){
    .admin-affiliates-toolbar{
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 10px;
    }
    .admin-affiliates-toolbar-row{ justify-content: flex-end; }
    .admin-affiliates-filter{ flex: 0 0 auto; min-width: 160px; }
  }

  /* Auth-Modal: Affiliate-Code-Feld (registriere mit Promocode) */
  .auth-affiliate-hint{
    margin-top: 8px; padding: 8px 12px;
    border-radius: 10px; background: rgba(201,168,106,0.1);
    border: 1px solid rgba(201,168,106,0.25);
    font-size: 12px; color: rgba(61,52,42,0.85);
  }

  /* Compliance — 18+ Bestätigung im Signup-Modal.
     Im Gegensatz zu sonstigen .auth-field-Eintraegen kein Top-Label, sondern
     eine inline Checkbox + Beschreibung. */
  .auth-age-field{ display: block; }
  .auth-age-check{
    display: flex; gap: 10px; align-items: flex-start;
    font-size: 13.5px; line-height: 1.5;
    color: rgba(61,52,42,0.92);
    cursor: pointer;
    padding: 4px 2px;
  }
  .auth-age-check input[type="checkbox"]{
    flex-shrink: 0;
    width: 18px; height: 18px;
    margin: 1px 0 0;
    accent-color: var(--lb-accent, #c9a86a);
    cursor: pointer;
  }
  .auth-age-check input[type="checkbox"]:focus-visible{
    outline: 2px solid var(--lb-accent, #c9a86a);
    outline-offset: 3px;
  }
  .auth-age-check strong{ color: var(--lb-ink, #2a241d); font-weight: 600; }
  .auth-age-hint{
    margin: 6px 0 0; padding: 0 2px;
    font-size: 11.5px; color: rgba(61,52,42,0.62);
  }
  .auth-age-hint a{
    color: rgba(61,52,42,0.85);
    text-decoration: underline;
    text-decoration-color: rgba(201,168,106,0.55);
  }

  @media (min-width: 560px){
    .admin-kpi-grid{ grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 8px 18px 20px; }
  }

  /* Burger-Overlay — prototype: Mobile.html:76-163 ------------------------
     Full-viewport blurred backdrop + right-anchored floating glass card. */
  .drawer-backdrop{
    position: fixed; inset: 0;
    background: color-mix(in srgb, var(--lb-base) 82%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0; pointer-events: none;
    z-index: 80;
    transition: opacity .22s var(--ease-spring);
  }
  .drawer-backdrop.open{ opacity: 1; pointer-events: auto; }

  .drawer{
    position: fixed;
    top: 58px; right: 12px; bottom: 24px;
    width: min(260px, calc(100vw - 24px));
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--lb-surface) 94%, transparent),
      color-mix(in srgb, var(--lb-night) 94%, transparent));
    border: 1px solid color-mix(in srgb, var(--lb-accent) 30%, transparent);
    border-radius: 22px;
    padding: 12px 14px;
    display: flex; flex-direction: column;
    z-index: 90;
    opacity: 0; transform: translateY(-8px) scale(.98);
    transform-origin: top right; pointer-events: none;
    box-shadow:
      0 24px 60px -20px rgba(0,0,0,0.8),
      0 0 40px -16px color-mix(in srgb, var(--lb-accent) 30%, transparent);
    transition: opacity .22s var(--ease-spring), transform .22s var(--ease-spring);
  }
  .drawer.open{ opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

  .drawer-header{
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
  }
  .drawer-eyebrow{
    font-size: 9px; letter-spacing: .28em; color: var(--lb-accent);
    text-transform: uppercase; font-family: 'Inter', sans-serif;
  }
  .drawer-close{
    width: 28px; height: 28px; border-radius: 10px;
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--lb-ink) 14%, transparent);
    color: var(--lb-ink);
    font-size: 16px; line-height: 1;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background-color .2s var(--ease-spring);
  }
  .drawer-close:hover{ background: color-mix(in srgb, var(--lb-ink) 10%, transparent); }
  .drawer-close:focus-visible{ outline: 2px solid var(--lb-accent); outline-offset: 2px; }

  .drawer-nav{
    display: flex; flex-direction: column; gap: 3px;
    flex: 1; min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    /* M13 — Fade-Edges signalisieren Overflow oben/unten ohne Scrollbar */
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  }
  .drawer-nav::-webkit-scrollbar{ display: none; }
  .drawer-item{
    display: flex; align-items: center; gap: 12px;
    padding: 9px; border-radius: 12px;
    border: 1px solid transparent;
    background: transparent;
    color: color-mix(in srgb, var(--lb-ink) 82%, transparent);
    font-family: 'Inter', sans-serif; font-size: 13px; letter-spacing: .01em;
    text-align: left;
    transition: background-color .2s var(--ease-spring),
                border-color .2s var(--ease-spring),
                color .2s var(--ease-spring);
  }
  .drawer-item:hover{
    background: color-mix(in srgb, var(--lb-accent) 12%, transparent);
    color: var(--lb-ink);
  }
  .drawer-item:focus-visible{ outline: 2px solid var(--lb-accent); outline-offset: 2px; }
  .drawer-item.is-active{
    background: color-mix(in srgb, var(--lb-accent) 18%, transparent);
    border-color: color-mix(in srgb, var(--lb-accent) 28%, transparent);
    color: var(--lb-ink);
  }
  .drawer-glyph{
    width: 24px; height: 24px; border-radius: 8px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--lb-accent) 14%, transparent);
    color: var(--lb-accent);
    font-family: 'Cormorant Garamond', serif; font-size: 16px;
    font-variant-emoji: text;
  }
  .drawer-item.is-active .drawer-glyph{
    background: color-mix(in srgb, var(--lb-accent) 28%, transparent);
  }
  .drawer-label{
    flex: 1; font-family: 'Cormorant Garamond', serif; font-size: 16px;
  }
  .drawer-active-dot{
    font-size: 10px; color: var(--lb-accent); letter-spacing: .18em;
    opacity: 0; transition: opacity .2s var(--ease-spring);
  }
  .drawer-item.is-active .drawer-active-dot{ opacity: 1; }

  .drawer-footer{
    margin-top: auto; padding-top: 10px;
    border-top: 1px dashed color-mix(in srgb, var(--lb-ink) 12%, transparent);
  }
  .drawer-footer .drawer-eyebrow{
    color: var(--lb-mist); margin-bottom: 6px; padding: 0 4px;
    font-size: 9px; letter-spacing: .24em;
  }
  .drawer-email{
    padding: 0 4px 8px; font-size: 13px; color: var(--lb-ink);
    word-break: break-all;
  }
  .drawer-logout{
    width: 100%;
    padding: 10px 18px;
    background: color-mix(in srgb, var(--lb-rose) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--lb-rose) 45%, transparent);
    border-radius: 999px;
    color: var(--lb-rose);
    font-family: 'Inter', sans-serif;
    font-size: 11px; font-weight: 500;
    letter-spacing: .22em; text-transform: uppercase;
    cursor: pointer;
    transition: background-color .25s var(--ease-spring), border-color .25s var(--ease-spring), color .25s var(--ease-spring), transform .25s var(--ease-spring);
  }
  .drawer-logout:hover{
    background: color-mix(in srgb, var(--lb-rose) 14%, transparent);
    border-color: var(--lb-rose);
    color: #f1d4d4;
  }
  .drawer-logout:focus-visible{ outline: 2px solid var(--lb-rose); outline-offset: 3px; }
  .drawer-logout:active{ transform: translateY(1px); }

  /* Tagesimpuls-Panel */
  .tagesimpuls{
    position: relative;
    margin-top: 16px; padding: 20px 20px 22px;
    background: linear-gradient(180deg, rgba(18,14,38,0.82), rgba(244,237,224,0.72));
    border: 1px solid rgba(201,168,106,0.22);
    border-radius: 20px;
    box-shadow: 0 18px 40px -24px rgba(0,0,0,0.7),
                0 6px 18px -10px rgba(201,168,106,0.14),
                inset 0 1px 0 rgba(61,52,42,0.05);
    overflow: hidden;
  }
  .tagesimpuls::before{
    content: "";
    position: absolute; inset: -1px; border-radius: inherit;
    background: radial-gradient(120% 90% at 100% 0%, rgba(201,168,106,0.12), transparent 55%),
                radial-gradient(120% 90% at 0% 100%, rgba(183,110,121,0.08), transparent 60%);
    pointer-events: none; z-index: 0;
  }
  .tagesimpuls > *{ position: relative; z-index: 1; }
  .tagesimpuls .kicker{
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 10px; letter-spacing: .28em; text-transform: uppercase;
    color: var(--lb-accent);
  }
  .tagesimpuls h3{
    font-family: 'Cormorant Garamond', serif;
    font-size: 26px; letter-spacing: -0.01em; color: var(--lb-ink);
    margin-top: 6px; line-height: 1.15;
  }
  .tagesimpuls .impuls-body{
    margin-top: 12px; font-size: 15px; line-height: 1.7; color: #e8dcc0;
    min-height: 4.5em;
  }
  /* Phase K.8 #14: Tagesimpuls standardmäßig auf 2 Zeilen kürzen + [weiterlesen]. */
  .tagesimpuls .impuls-body.is-collapsed{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 0;
  }
  .tagesimpuls .impuls-toggle{
    display: none; margin-top: 8px;
    background: none; border: none; padding: 0;
    color: var(--lb-accent);
    font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase;
    cursor: pointer;
    transition: color .2s;
  }
  .tagesimpuls .impuls-toggle.is-available{ display: inline-block; }
  .tagesimpuls .impuls-toggle:hover{ color: var(--lb-ink); }
  .tagesimpuls .impuls-toggle:focus-visible{ outline: 2px solid var(--lb-accent); outline-offset: 2px; }
  .tagesimpuls .impuls-skeleton{
    display: block;
    height: 0.95em; border-radius: 6px; margin: 0.5em 0;
    background: linear-gradient(90deg, rgba(61,52,42,0.06), rgba(61,52,42,0.14), rgba(61,52,42,0.06));
    background-size: 200% 100%;
    animation: shimmer 1.6s linear infinite;
  }
  .tagesimpuls .impuls-skeleton:nth-child(2){ width: 88%; }
  .tagesimpuls .impuls-skeleton:nth-child(3){ width: 72%; }
  @keyframes shimmer{
    0%{   background-position: 200% 0; }
    100%{ background-position: -200% 0; }
  }

  /* Klickbare Tiles — erweitert .result-card um Pointer + Micro-Interaction.
     .result-card--locked bleibt bei disabled-tiles (Chat, Kartenlegen) erhalten. */
  .result-card.tile-clickable{
    cursor: pointer;
    transition: transform .25s var(--ease-spring),
                border-color .25s var(--ease-spring),
                box-shadow .3s var(--ease-spring);
  }
  .result-card.tile-clickable:hover{
    transform: translateY(-2px);
    border-color: rgba(201,168,106,0.45);
    box-shadow: 0 18px 40px -22px rgba(0,0,0,0.8),
                0 10px 24px -12px rgba(201,168,106,0.22);
  }
  .result-card.tile-clickable:focus-visible{ outline: 2px solid var(--lb-accent); outline-offset: 3px; }
  .result-card.tile-clickable:active{ transform: translateY(0); }
  .result-card .tile-arrow{
    margin-left: auto; color: var(--lb-accent); font-size: 18px; line-height: 1;
    transition: transform .25s var(--ease-spring);
  }
  .result-card.tile-clickable:hover .tile-arrow{ transform: translateX(3px); }
  .result-card .tile-soon{
    font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
    color: rgba(201,168,106,0.6); margin-left: auto;
  }

  /* Dashboard-Views (Kind-Sections innerhalb #dashboardPanel) */
  .dash-view{ animation: lb-fade .5s var(--ease-spring) both; }
  @keyframes lb-fade{ from{ opacity: 0; transform: translateY(6px); } to{ opacity: 1; transform: none; } }

  .view-header{
    display: flex; align-items: center; gap: 10px;
    margin: 4px 0 14px;
  }
  .view-back{
    width: 34px; height: 34px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    color: rgba(61,52,42,0.7);
    border: 1px solid rgba(61,52,42,0.14);
    transition: color .25s var(--ease-spring), background-color .25s var(--ease-spring), border-color .25s var(--ease-spring);
  }
  .view-back:hover{ color: var(--lb-ink); background: rgba(201,168,106,0.08); border-color: rgba(201,168,106,0.3); }
  .view-back:focus-visible{ outline: 2px solid var(--lb-accent); outline-offset: 2px; }
  .view-back svg{ width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .view-title{
    font-family: 'Cormorant Garamond', serif;
    font-size: 26px; color: var(--lb-ink); letter-spacing: -0.01em;
  }
  .chat-session-row{
    display: flex; align-items: stretch; gap: 4px;
  }
  .chat-session-row .chat-session-item{ flex: 1; min-width: 0; }
  .chat-session-delete{
    flex-shrink: 0;
    width: 34px;
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    color: rgba(61,52,42,0.55);
    background: transparent;
    border: 1px solid rgba(61,52,42,0.08);
    cursor: pointer;
    transition: color .25s var(--ease-spring),
                background-color .25s var(--ease-spring),
                border-color .25s var(--ease-spring),
                transform .2s var(--ease-spring);
  }
  .chat-session-delete svg{ width: 15px; height: 15px; }
  .chat-session-delete:hover{
    color: var(--lb-ember);
    background: rgba(217,122,78,0.08);
    border-color: rgba(217,122,78,0.32);
  }
  .chat-session-delete:focus-visible{
    outline: none;
    color: var(--lb-ember);
    border-color: var(--lb-ember);
    box-shadow: 0 0 0 3px rgba(217,122,78,0.22);
  }
  .chat-session-delete:active{ transform: scale(0.94); }
  .chat-session-delete:disabled{ opacity: 0.4; cursor: not-allowed; }

  /* Chat "Brief" — prototype screens-chat.jsx ChatV3. Italic serif title + timestamp eyebrow. */
  .chat-header .chat-title-stack{
    display: flex; flex-direction: column; align-items: flex-start;
    margin-left: 6px; margin-right: auto;
  }
  .chat-title-eyebrow{
    font-size: 9.5px; letter-spacing: .28em; color: var(--lb-accent);
    text-transform: uppercase; font-family: 'Inter', sans-serif;
  }
  .chat-title-name{
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px; font-style: italic; color: var(--lb-ink);
    letter-spacing: -0.005em; line-height: 1.1;
  }

  /* TransitStrip — horizontal scroll of 5 planet-sign pills above chat body */
  .transit-strip{
    display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden;
    padding: 2px 0 10px; margin: -6px 0 6px;
    -ms-overflow-style: none; scrollbar-width: none;
  }
  .transit-strip::-webkit-scrollbar{ display: none; }
  .transit-pill{
    display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
    padding: 7px 10px; border-radius: 999px;
    background: color-mix(in srgb, var(--lb-surface) 55%, transparent);
    border: 1px solid color-mix(in srgb, var(--lb-ink) 14%, transparent);
    font-family: 'Inter', sans-serif; font-size: 10.5px;
    color: color-mix(in srgb, var(--lb-ink) 82%, transparent);
    letter-spacing: .04em;
  }
  .transit-pill .planet{
    font-family: 'Cormorant Garamond', serif; font-size: 13px; color: var(--lb-accent);
    font-variant-emoji: text;
  }
  .transit-pill .sign{
    font-family: 'Cormorant Garamond', serif; font-size: 13px; color: var(--lb-ink);
    font-variant-emoji: text;
  }
  .transit-pill .deg{ font-size: 9.5px; color: var(--lb-mist); letter-spacing: .1em; }
  .transit-strip:empty{ display: none; }

  /* Aktuelle Konstellationen — Tabelle statt Brief-Header (Phase L5-a) */
  .transit-table-wrap{
    margin: -4px 0 10px;
    padding: 12px 14px 10px;
    border-radius: 14px;
    background:
      linear-gradient(180deg, rgba(251,246,236,0.55), rgba(244,237,224,0.7));
    border: 1px solid rgba(61,52,42,0.10);
    box-shadow:
      0 1px 0 0 rgba(201,168,106,0.05) inset,
      0 10px 28px -16px rgba(61,52,42,0.125);
  }
  .transit-table-head{
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin: 0;
    background: transparent; border: 0; padding: 0;
    width: 100%; cursor: pointer;
    color: inherit;
    text-align: left;
  }
  .transit-table-head:focus-visible{ outline: 2px solid var(--lb-accent); outline-offset: 4px; border-radius: 8px; }
  .transit-table-kicker{
    font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
    color: rgba(201,168,106,0.8);
  }
  .transit-table-time{
    font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
    color: rgba(61,52,42,0.45);
    font-variant-numeric: tabular-nums;
    margin-left: auto;
  }
  .transit-table-caret{
    color: rgba(201,168,106,0.7);
    transition: transform .25s var(--ease-spring);
    flex-shrink: 0;
  }
  .transit-table-wrap:not(.is-collapsed) .transit-table-caret{ transform: rotate(180deg); }
  .transit-table-collapsible{
    overflow: hidden;
    max-height: 0;
    transition: max-height .35s var(--ease-spring), margin-top .25s ease-out;
  }
  .transit-table-wrap:not(.is-collapsed) .transit-table-collapsible{
    max-height: 520px; /* genug für 10 Planeten + Header */
    margin-top: 10px;
  }
  .transit-table{
    width: 100%; border-collapse: collapse; table-layout: fixed;
  }
  .transit-table th, .transit-table td{
    padding: 6px 4px; text-align: left;
    font-size: 12.5px; line-height: 1.2;
    border-bottom: 1px solid rgba(61,52,42,0.06);
  }
  .transit-table thead th{
    font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase;
    color: rgba(201,168,106,0.55);
    font-weight: 500;
    padding-bottom: 6px;
  }
  .transit-table tbody tr:last-child td{ border-bottom: 0; }
  .transit-table{ table-layout: auto; }
  .transit-table .planet-name{
    color: var(--lb-ink);
    font-family: 'Cormorant Garamond', serif; font-size: 14.5px;
  }
  .transit-table .planet-glyph{
    color: var(--lb-accent); font-size: 13px; margin-right: 6px;
    font-variant-emoji: text;
  }
  .transit-table .sign-glyph{
    color: var(--lb-accent); font-size: 13px; margin-right: 4px;
    font-variant-emoji: text;
  }
  .transit-table .sign-name{
    color: rgba(61,52,42,0.82);
  }
  /* 2-Spalten-Layout: links Haus + Zeichen, rechts Planet. */
  .transit-table .col-house-sign{
    display: flex; align-items: center; gap: 6px;
    font-family: 'Cormorant Garamond', serif; font-size: 14.5px;
    color: rgba(61,52,42,0.82);
  }
  .transit-table .house-num{
    color: var(--lb-accent);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.08em;
    min-width: 26px;
  }
  .transit-table .house-sep{
    color: rgba(201,168,106,0.4);
    font-size: 12px;
  }
  .transit-table .col-planet{
    text-align: right; white-space: nowrap;
  }
  .transit-table thead th:last-child{ text-align: right; }
  .transit-table-empty td{
    color: rgba(61,52,42,0.45);
    text-align: center; font-style: italic;
    letter-spacing: 0.05em;
  }

  /* Natal-Chart-Modal (L5-a — Klick auf Zentrum-Orb) */
  .natal-chart-panel{
    max-width: 420px; max-height: 82vh; overflow-y: auto;
    text-align: left; position: relative;
  }
  .natal-chart-close{
    position: absolute; top: 10px; right: 12px;
    width: 32px; height: 32px; border-radius: 50%;
    background: transparent; border: 1px solid rgba(61,52,42,0.18);
    color: rgba(61,52,42,0.7); font-size: 18px; line-height: 1;
    cursor: pointer;
    transition: color .2s, border-color .2s, background-color .2s;
  }
  .natal-chart-close:hover{
    color: var(--lb-ink);
    border-color: rgba(201,168,106,0.6);
    background: rgba(201,168,106,0.08);
  }
  .natal-chart-close:focus-visible{ outline: 2px solid var(--lb-accent); outline-offset: 2px; }
  .natal-chart-body{ display: flex; flex-direction: column; gap: 16px; margin-top: 8px; }
  .natal-chart-section{
    display: flex; flex-direction: column; gap: 6px;
  }
  .natal-chart-section-title{
    font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
    color: rgba(201,168,106,0.75);
    margin-bottom: 2px;
  }
  .natal-chart-highlights{
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
    padding: 10px 12px; border-radius: 12px;
    background: rgba(251,246,236,0.35);
    border: 1px dashed rgba(61,52,42,0.14);
  }
  .natal-chart-highlight{
    display: flex; flex-direction: column; align-items: center; gap: 2px;
  }
  .natal-chart-highlight-label{
    font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase;
    color: rgba(201,168,106,0.7);
  }
  .natal-chart-highlight-glyph{
    font-family: 'Cormorant Garamond', serif; font-size: 22px; line-height: 1;
    color: var(--lb-accent); font-variant-emoji: text;
  }
  .natal-chart-highlight-sign{
    font-family: 'Cormorant Garamond', serif; font-size: 14.5px;
    color: var(--lb-ink);
  }
  .natal-chart-table{
    width: 100%; border-collapse: collapse; table-layout: fixed;
  }
  .natal-chart-table th, .natal-chart-table td{
    padding: 5px 4px; text-align: left;
    font-size: 12.5px; line-height: 1.2;
    border-bottom: 1px solid rgba(61,52,42,0.06);
  }
  .natal-chart-table thead th{
    font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase;
    color: rgba(201,168,106,0.55);
    font-weight: 500;
  }
  .natal-chart-table tbody tr:last-child td{ border-bottom: 0; }
  .natal-chart-table .col-num{
    width: 36px; color: var(--lb-accent);
    font-family: 'Cormorant Garamond', serif; font-size: 14px;
    font-variant-numeric: tabular-nums;
  }
  .natal-chart-table .col-house-num{
    width: 42px; color: var(--lb-accent);
    font-family: 'Cormorant Garamond', serif; font-size: 14px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.08em;
  }
  .natal-chart-table .planet-name{
    color: var(--lb-ink);
    font-family: 'Cormorant Garamond', serif; font-size: 14px;
  }
  .natal-chart-table .planet-glyph, .natal-chart-table .sign-glyph{
    color: var(--lb-accent); font-size: 13px; margin-right: 4px;
    font-variant-emoji: text;
  }
  .natal-chart-loading{
    text-align: center; padding: 20px 0;
    color: rgba(61,52,42,0.55); font-style: italic;
  }

  /* Natal-Chart inline im #horoskopBody (Klick auf Zentrum-Orb) */
  .horoskop-chart-inline{
    display: flex; flex-direction: column; gap: 18px;
    padding: 2px 2px 4px;
  }
  .horoskop-chart-inline .natal-chart-section{ gap: 6px; }
  /* Natal-Variante der Transit-Tabelle: kein Toggle, Kicker als Block. */
  .transit-table-kicker--natal{ display: block; }
  .horoskop-chart-inline .transit-table-wrap .transit-table-collapsible{
    max-height: none; margin-top: 10px;
  }

  /* Aktiver Zustand des Zentrum-Orbs, wenn die Tabelle angezeigt wird */
  .orbital-center.is-active{
    box-shadow:
      0 0 0 2px rgba(201,168,106,0.5),
      0 0 32px 6px rgba(201,168,106,0.32);
  }
  .orbital-center.is-active .orbital-center-core{
    background: radial-gradient(circle at 50% 40%, #fff1c8, var(--lb-gold) 70%);
  }

  /* Einstellungen-Form */
  .settings-grid{ display: flex; flex-direction: column; gap: 14px; }
  .settings-row{ display: flex; flex-direction: column; gap: 6px; }
  .settings-row label{
    font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--lb-accent);
  }
  .settings-input{
    width: 100%; padding: 14px 16px;
    background: rgba(251,246,236,0.55);
    border: 1px solid rgba(61,52,42,0.16);
    border-radius: 14px;
    font-family: 'Inter', sans-serif; font-size: 15px; color: var(--lb-ink);
    outline: none;
    color-scheme: dark;
    transition: border-color .25s var(--ease-spring), background-color .25s var(--ease-spring), transform .25s var(--ease-spring);
  }
  .settings-input::placeholder{ color: rgba(107,94,79,.7); }
  .settings-input:hover{ border-color: rgba(201,168,106,.4); }
  .settings-input:focus,
  .settings-input:focus-visible{ outline: none; border-color: var(--lb-accent); background: rgba(251,246,236,0.7); }
  .settings-input:active{ transform: translateY(1px); }
  .settings-input:-webkit-autofill,
  .settings-input:-webkit-autofill:hover,
  .settings-input:-webkit-autofill:focus{
    -webkit-text-fill-color: var(--lb-ink);
    -webkit-box-shadow: 0 0 0 1000px rgba(251,246,236,0.95) inset;
    caret-color: var(--lb-ink);
    transition: background-color 9999s ease-in-out 0s;
  }
  /* Date-/Time-Picker-Indicator — Default-Dark (wie Startseite) */
  .settings-input::-webkit-calendar-picker-indicator{
    cursor: pointer;
  }
  .settings-input[type="date"],
  .settings-input[type="time"]{
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
  }
  .settings-input::-webkit-datetime-edit-fields-wrapper{ color: var(--lb-ink); }
  .settings-input::-webkit-datetime-edit{ color: var(--lb-ink); padding: 0; }
  .settings-input::-webkit-datetime-edit-text{ color: rgba(201,168,106,0.75); padding: 0 3px; }
  .settings-input::-webkit-datetime-edit-day-field:focus,
  .settings-input::-webkit-datetime-edit-month-field:focus,
  .settings-input::-webkit-datetime-edit-year-field:focus,
  .settings-input::-webkit-datetime-edit-hour-field:focus,
  .settings-input::-webkit-datetime-edit-minute-field:focus{
    background-color: rgba(201,168,106,0.18);
    color: var(--lb-ink);
    outline: none; border-radius: 3px;
  }

  .throttle-hint{
    font-size: 12px; color: rgba(61,52,42,0.6);
    text-align: center; margin-top: 10px;
  }
  .throttle-hint.is-blocked{ color: #d9a7a7; }
  .throttle-hint.is-ok{ color: rgba(201,168,106,0.85); }

  .settings-alert{
    font-size: 12px; padding: 10px 12px; border-radius: 10px;
    margin-top: 10px;
    display: none;
  }
  .settings-alert.show{ display: block; }
  .settings-alert.ok{
    background: rgba(201,168,106,0.08); color: #e8dcc0; border: 1px solid rgba(201,168,106,0.28);
  }
  .settings-alert.error{
    background: rgba(217,122,78,0.08); color: var(--lb-ink); border: 1px solid rgba(217,122,78,0.32);
  }

  .recalc-btn{ width: 100%; margin-top: 6px; }
  .recalc-btn[disabled]{ opacity: 0.45; cursor: not-allowed; }
  .recalc-btn[disabled]:hover{ transform: none; box-shadow: none; }

  /* Einstellungen — Section-Abstand + Titel */
  #dashEinstellungen .panel + .panel{ margin-top: 14px; }
  .settings-section-title{
    font-size: 10px; letter-spacing: .28em; text-transform: uppercase;
    color: var(--lb-accent);
  }
  .settings-section-desc{
    font-size: 12px; color: rgba(61,52,42,0.62);
    line-height: 1.55; margin: 6px 0 14px;
  }

  /* M15 — Settings-Anker-Nav (Mobile only, sticky unter dem Header) */
  .settings-anchors{
    display: none; /* Default hidden on Desktop */
  }
  @media (max-width: 720px){
    .settings-anchors{
      display: flex; gap: 6px;
      position: sticky; top: 0; z-index: 30;
      padding: 10px 4px;
      margin: -4px -4px 12px;
      background: linear-gradient(180deg, rgba(244,237,224,0.96) 0%, rgba(244,237,224,0.86) 100%);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      overflow-x: auto;
      overscroll-behavior-x: contain;
      scrollbar-width: none;
    }
    .settings-anchors::-webkit-scrollbar{ display: none; }
  }
  .settings-anchor{
    flex-shrink: 0;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(251,246,236,0.55);
    border: 1px solid rgba(201,168,106,0.22);
    color: rgba(61,52,42,0.7);
    font-size: 12px; font-weight: 500; letter-spacing: 0.02em;
    text-decoration: none;
    transition: background-color .22s var(--ease-spring), color .22s var(--ease-spring), border-color .22s var(--ease-spring);
  }
  .settings-anchor:hover{ color: rgba(61,52,42,0.95); border-color: rgba(201,168,106,0.4); }
  .settings-anchor.is-active{
    background: rgba(201,168,106,0.14);
    border-color: rgba(201,168,106,0.6);
    color: var(--lb-accent);
  }

  /* Basis-Kontext-Karte */
  .settings-basis-card{
    padding: 18px 20px;
    background: rgba(18,15,42,0.6);
    border: 1px solid rgba(201,168,106,0.22);
    border-radius: 18px;
    position: relative; overflow: hidden;
    box-shadow: 0 16px 36px -16px rgba(5,4,15,0.55),
                0 0 0 1px rgba(201,168,106,0.04) inset;
  }
  .settings-basis-card::before{
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(120% 90% at 0% 0%, rgba(201,168,106,0.10), transparent 55%),
                radial-gradient(120% 90% at 100% 100%, rgba(183,110,121,0.08), transparent 60%);
    border-radius: inherit;
  }
  .settings-basis-card > *{ position: relative; z-index: 1; }
  .basis-signs{
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 8px; margin-top: 14px;
  }
  .basis-sign{
    text-align: center; padding: 12px 6px;
    background: rgba(244,237,224,0.55);
    border: 1px solid rgba(61,52,42,0.08);
    border-radius: 12px;
    transition: border-color .25s var(--ease-spring);
  }
  .basis-sign .glyph{
    font-size: 22px; color: var(--lb-accent); line-height: 1;
  }
  .basis-sign .kind{
    font-size: 9px; letter-spacing: .22em; text-transform: uppercase;
    color: rgba(61,52,42,0.52); margin-top: 8px;
  }
  .basis-sign .name{
    font-family: 'Cormorant Garamond', serif;
    font-size: 16px; color: var(--lb-ink); margin-top: 1px; letter-spacing: -0.01em;
  }
  .basis-meta{
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; color: rgba(107,94,79,0.75);
    margin-top: 10px;
  }
  .basis-meta svg{ width: 11px; height: 11px; opacity: 0.7; flex-shrink: 0; }
  .basis-empty{
    font-size: 12px; color: rgba(61,52,42,0.55);
    text-align: center; padding: 14px 0 4px;
  }

  /* Throttle-Chip (ersetzt textlichen Hint) */
  .throttle-chip{
    display: flex; align-items: flex-start; gap: 8px;
    padding: 10px 12px; border-radius: 12px;
    font-size: 12px; line-height: 1.4;
    margin-top: 12px;
    border: 1px solid transparent;
    background: rgba(244,237,224,0.45);
  }
  .throttle-chip svg{ width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; }
  .throttle-chip.is-ok{
    border-color: rgba(201,168,106,0.22);
    background: rgba(201,168,106,0.05);
    color: #d6c496;
  }
  .throttle-chip.is-blocked{
    border-color: rgba(217,167,167,0.28);
    background: rgba(217,167,167,0.05);
    color: #d9a7a7;
  }

  /* Konto-Sektion */
  .account-row{
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px;
    padding: 12px 0; border-bottom: 1px solid rgba(61,52,42,0.06);
  }
  .account-row:last-of-type{ border-bottom: none; }
  .account-label{
    display: block;
    font-size: 9px; letter-spacing: .24em; text-transform: uppercase;
    color: rgba(201,168,106,0.72);
  }
  .account-value{
    display: block; font-size: 14px; color: var(--lb-ink); margin-top: 2px;
    word-break: break-all;
  }
  .account-logout{
    margin-top: 16px; width: 100%;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 14px;
    background: transparent;
    border: 1px solid rgba(217,167,167,0.32);
    border-radius: 12px;
    color: #e4b4b4;
    font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500;
    letter-spacing: .04em;
    cursor: pointer;
    transition: background-color .25s var(--ease-spring),
                border-color .25s var(--ease-spring),
                transform .2s var(--ease-spring);
  }
  .account-logout svg{ width: 14px; height: 14px; opacity: 0.85; }
  .account-logout:hover{
    background: rgba(217,167,167,0.08);
    border-color: rgba(217,167,167,0.5);
    transform: translateY(-1px);
  }
  .account-logout:focus-visible{
    outline: 2px solid rgba(217,167,167,0.5);
    outline-offset: 3px;
  }
  .account-logout:active{ transform: translateY(0); }

  /* Phase K.2 — Account stats + Passwort-Button + Fragebogen-Link */
  .account-stats{
    font-size: 12.5px;
    color: rgba(61,52,42,0.6);
    font-variant-numeric: tabular-nums;
  }
  .account-action{
    margin-top: 12px; width: 100%;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 14px;
    background: transparent;
    border: 1px solid rgba(61,52,42,0.22);
    border-radius: 12px;
    color: rgba(61,52,42,0.82);
    font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500;
    letter-spacing: .04em;
    cursor: pointer;
    transition: background-color .25s var(--ease-spring),
                border-color .25s var(--ease-spring),
                color .25s var(--ease-spring);
  }
  .account-action svg{ width: 14px; height: 14px; opacity: 0.85; }
  .account-action:hover{
    background: rgba(201,168,106,0.08);
    border-color: rgba(201,168,106,0.4);
    color: var(--lb-ink);
  }
  .account-action:focus-visible{ outline: 2px solid var(--lb-accent); outline-offset: 3px; }

  /* Danger-Variant: rote Akzent fuer destruktive Aktionen (Konto loeschen). */
  .btn-danger{
    border-color: rgba(176,110,110,0.4) !important;
    color: rgba(176,110,110,0.95) !important;
  }
  .btn-danger:hover:not(:disabled){
    background: rgba(176,110,110,0.08) !important;
    border-color: rgba(176,110,110,0.65) !important;
    color: var(--lb-rose, #b06e6e) !important;
  }
  .btn-danger:disabled{
    opacity: 0.45;
    cursor: not-allowed;
  }
  .btn-danger:focus-visible{ outline: 2px solid var(--lb-rose, #b06e6e); outline-offset: 3px; }

  /* DSGVO-Section: zwei-spaltiges Row-Layout. Info links, Button rechts. */
  .settings-privacy-card{ display: flex; flex-direction: column; gap: 14px; }
  .privacy-row{
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid rgba(61,52,42,0.12);
    background: rgba(251,246,236,0.45);
  }
  .privacy-row--danger{
    border-color: rgba(176,110,110,0.22);
    background: rgba(176,110,110,0.04);
  }
  .privacy-row-info{ display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
  .privacy-row-title{ font-size: 14px; color: var(--lb-ink, #2a241d); font-weight: 500; }
  .privacy-row-sub{ font-size: 12.5px; color: rgba(61,52,42,0.68); line-height: 1.45; }
  .privacy-row .account-action{
    margin-top: 0;
    width: auto;
    flex-shrink: 0;
    padding: 9px 14px;
    font-size: 12.5px;
  }
  @media (max-width: 520px){
    .privacy-row{ flex-direction: column; align-items: stretch; gap: 10px; }
    .privacy-row .account-action{ width: 100%; }
  }

  /* Hinweis unterhalb der Konto-Zeilen, wenn Passwort-Änderung nicht möglich
     (z. B. weil der User via Google OAuth eingeloggt ist). */
  .account-provider-hint{
    margin: 10px 0 4px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(61,52,42,0.04);
    border: 1px solid rgba(61,52,42,0.12);
    color: rgba(61,52,42,0.72);
    font-size: 12px; line-height: 1.5;
  }

  .fragebogen-link{
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 6px;
    padding: 14px 16px;
    background: rgba(201,168,106,0.06);
    border: 1px solid rgba(201,168,106,0.28);
    border-radius: 14px;
    color: var(--lb-ink);
    font-family: 'Cormorant Garamond', serif; font-size: 17px;
    text-decoration: none;
    transition: background-color .25s, border-color .25s, transform .2s;
  }
  .fragebogen-link:hover{
    background: rgba(201,168,106,0.12);
    border-color: rgba(232,201,138,0.5);
    transform: translateY(-1px);
  }
  .fragebogen-link:focus-visible{ outline: 2px solid var(--lb-accent); outline-offset: 3px; }
  .fragebogen-link-arrow{ color: var(--lb-accent); font-size: 18px; }

  /* Phase K — Optionale Angaben in Settings Panel 4. */
  /* Optionale Angaben — Mobile-first Stacked-Cards (Einstellungen2.png).
     Jede Zeile ist eine eigene Karte: Label (Caps) + Value (Cormorant
     italic) untereinander, Edit-Stift als 38×38-Square rechts. */
  .optional-answers{
    margin: 10px 0 18px;
    padding: 0;
    display: flex; flex-direction: column; gap: 10px;
  }
  .optional-answer-row{
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas:
      "label edit"
      "value edit";
    gap: 4px 14px;
    align-items: center;
    padding: 14px 16px;
    background: rgba(244,237,224,0.55);
    border: 1px solid rgba(61,52,42,0.10);
    border-radius: 14px;
    transition: border-color .2s, background-color .2s;
  }
  .optional-answer-row.is-editing{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "label"
      "value";
    border-color: rgba(201,168,106,0.36);
    background: rgba(251,246,236,0.7);
    align-items: start;
  }
  .optional-answer-label{
    grid-area: label;
    font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
    color: rgba(61,52,42,0.55);
    margin: 0;
  }
  .optional-answer-value{
    grid-area: value;
    font-family: 'Cormorant Garamond', serif;
    font-size: 17px; line-height: 1.3;
    color: var(--lb-ink);
    font-style: italic;
    overflow-wrap: anywhere;
    margin: 0;
  }
  .optional-answer-edit{
    grid-area: edit;
    align-self: center;
    width: 38px; height: 38px;
    border-radius: 12px;
    background: rgba(244,237,224,0.6);
    border: 1px solid rgba(201,168,106,0.30);
    color: var(--lb-accent);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: color .18s, border-color .18s, background-color .18s, transform .18s;
    flex-shrink: 0;
    padding: 0;
  }
  .optional-answer-edit .edit-icon{ font-size: 16px; line-height: 1; }
  .optional-answer-edit > span:not(.edit-icon){ display: none; } /* nur Icon */
  .optional-answer-edit:hover{
    color: var(--lb-ink);
    border-color: rgba(232,201,138,0.7);
    background: rgba(201,168,106,0.14);
    transform: translateY(-1px);
  }
  .optional-answer-edit:focus-visible{ outline: 2px solid var(--lb-accent); outline-offset: 2px; }
  .optional-answer-edit:active{ transform: translateY(0); }
  .optional-answer-editor{
    display: flex; flex-direction: column; gap: 8px;
    min-width: 0;
  }
  .optional-answer-editor input[type="text"],
  .optional-answer-editor input[type="number"],
  .optional-answer-editor select,
  .optional-answer-editor textarea{
    background: rgba(244,237,224,0.6);
    border: 1px solid rgba(61,52,42,0.18);
    border-radius: 10px;
    padding: 8px 12px;
    color: var(--lb-ink);
    font-family: 'Inter', sans-serif; font-size: 13px;
    width: 100%;
  }
  .optional-answer-editor textarea{ min-height: 62px; resize: vertical; font-family: 'Cormorant Garamond', serif; font-size: 15px; }
  .optional-answer-editor input:focus,
  .optional-answer-editor select:focus,
  .optional-answer-editor textarea:focus{
    outline: none;
    border-color: rgba(201,168,106,0.55);
    box-shadow: 0 0 0 2px rgba(201,168,106,0.10);
  }
  .optional-answer-actions{
    display: flex; gap: 8px; align-items: center;
    font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  }
  .optional-answer-actions button{
    padding: 6px 12px; border-radius: 999px;
    font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
    cursor: pointer;
    transition: background-color .2s, border-color .2s, color .2s;
  }
  .optional-answer-save{
    background: rgba(201,168,106,0.12);
    border: 1px solid rgba(201,168,106,0.42);
    color: var(--lb-accent);
  }
  .optional-answer-save:hover{
    background: rgba(201,168,106,0.2);
    border-color: rgba(232,201,138,0.55);
    color: var(--lb-ink);
  }
  .optional-answer-cancel{
    background: transparent;
    border: 1px solid rgba(61,52,42,0.2);
    color: rgba(61,52,42,0.6);
  }
  .optional-answer-cancel:hover{ color: var(--lb-ink); border-color: rgba(61,52,42,0.4); }
  .optional-answer-counter{
    font-size: 10.5px; letter-spacing: .1em;
    color: rgba(61,52,42,0.45);
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .optional-answer-counter.is-near-limit{ color: var(--lb-ember); }
  .optional-answer-toggle{
    display: inline-flex; align-items: center; gap: 10px;
    cursor: pointer; user-select: none;
  }
  .optional-answer-toggle input{ appearance: none; -webkit-appearance: none;
    width: 36px; height: 20px; border-radius: 999px;
    background: rgba(61,52,42,0.18);
    position: relative; cursor: pointer;
    transition: background-color .25s;
  }
  .optional-answer-toggle input:checked{ background: rgba(201,168,106,0.6); }
  .optional-answer-toggle input::after{
    content: ""; position: absolute;
    width: 16px; height: 16px; border-radius: 50%;
    top: 2px; left: 2px;
    background: var(--lb-ink);
    transition: transform .25s cubic-bezier(.2,.8,.2,1);
  }
  .optional-answer-toggle input:checked::after{ transform: translateX(16px); }
  .optional-answers-empty{
    padding: 10px 12px;
    font-size: 12.5px; color: rgba(61,52,42,0.45);
    font-style: italic;
    text-align: center;
  }

  /* Phase K — Priority-Panel-Akzent, wenn noch Fragebogen-Fragen offen sind.
     Das Panel rückt an die Spitze von Settings und bekommt eine dezente
     Gold-Umrandung als sanften visuellen Anker. */
  .panel.is-priority{
    border-color: rgba(201,168,106,0.32);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.04) inset,
      0 28px 60px -30px rgba(61,52,42,0.18),
      0 0 0 1px rgba(232,201,138,0.18),
      0 18px 36px -24px rgba(201,168,106,0.28);
  }

  .fragebogen-intro{
    margin-bottom: 18px;
    color: rgba(61,52,42,0.78);
    font-size: 13.5px; line-height: 1.7;
  }

  /* M7 — Fragebogen-Wizard-Header (Mehrwert-Versprechen + Progress-Bar) */
  .fragebogen-wizard-header{
    margin-bottom: 14px;
    padding: 22px 22px 18px;
    text-align: center;
  }
  .fragebogen-wizard-kicker{
    display: inline-block;
    font-size: 10px; letter-spacing: .28em; text-transform: uppercase;
    color: var(--lb-accent); margin-bottom: 10px;
  }
  .fragebogen-wizard-title{
    font-size: 26px; line-height: 1.15; letter-spacing: -0.02em;
    color: var(--lb-ink); margin: 0 0 8px;
  }
  .fragebogen-wizard-sub{
    color: rgba(61,52,42,0.78);
    font-size: 13px; line-height: 1.6;
    max-width: 420px; margin: 0 auto 16px;
  }

  /* M7 — Progress-Bar (auch in Settings genutzt) */
  .fragebogen-progress{
    margin: 0 auto; max-width: 420px;
    text-align: center;
  }
  .fragebogen-progress-bar{
    width: 100%; height: 6px;
    border-radius: 999px;
    background: rgba(61,52,42,0.10);
    overflow: hidden;
    margin-bottom: 8px;
  }
  .fragebogen-progress-fill{
    height: 100%;
    background: linear-gradient(90deg, color-mix(in srgb, var(--lb-accent) 60%, transparent), var(--lb-accent));
    border-radius: 999px;
    transition: width .4s var(--ease-spring);
  }
  .fragebogen-progress-label{
    font-size: 11.5px; letter-spacing: 0.04em;
    color: var(--lb-mist); opacity: 0.85;
    margin: 0;
  }
  .fragebogen-progress-label > span:first-child{
    color: var(--lb-accent); font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .fragebogen-progress-suffix{ opacity: 0.78; }
  .fragebogen-form{
    display: flex; flex-direction: column; gap: 16px;
  }
  .fragebogen-row{
    display: flex; flex-direction: column; gap: 6px;
  }
  .fragebogen-row label{
    font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase;
    color: var(--lb-accent);
  }
  .fragebogen-row input[type="text"],
  .fragebogen-row input[type="number"],
  .fragebogen-row select,
  .fragebogen-row textarea{
    background: rgba(244,237,224,0.6);
    border: 1px solid rgba(61,52,42,0.18);
    border-radius: 12px;
    padding: 11px 14px;
    color: var(--lb-ink);
    font-family: 'Inter', sans-serif; font-size: 14px;
    transition: border-color .25s, box-shadow .25s;
  }
  .fragebogen-row textarea{ min-height: 74px; resize: vertical; font-family: 'Cormorant Garamond', serif; font-size: 16px; line-height: 1.5; }
  .fragebogen-row input:focus, .fragebogen-row select:focus, .fragebogen-row textarea:focus{
    outline: none;
    border-color: rgba(201,168,106,0.55);
    box-shadow: 0 0 0 3px rgba(201,168,106,0.10);
  }
  .fragebogen-row.is-hidden{ display: none; }
  .fragebogen-toggle{
    display: inline-flex; align-items: center; gap: 10px;
    cursor: pointer; user-select: none;
  }
  .fragebogen-toggle input{ appearance: none; -webkit-appearance: none;
    width: 36px; height: 20px; border-radius: 999px;
    background: rgba(61,52,42,0.18);
    position: relative; cursor: pointer;
    transition: background-color .25s;
  }
  .fragebogen-toggle input:checked{ background: rgba(201,168,106,0.6); }
  .fragebogen-toggle input::after{
    content: ""; position: absolute;
    width: 16px; height: 16px; border-radius: 50%;
    top: 2px; left: 2px;
    background: var(--lb-ink);
    transition: transform .25s cubic-bezier(.2,.8,.2,1);
  }
  .fragebogen-toggle input:checked::after{ transform: translateX(16px); }
  .fragebogen-toggle .toggle-label{ font-size: 13.5px; color: var(--lb-ink); font-family: 'Inter', sans-serif; letter-spacing: 0; text-transform: none; }

  .fragebogen-footer{
    margin-top: 18px;
    display: flex; flex-direction: column; gap: 10px; align-items: center;
  }
  .fragebogen-save-state{
    text-align: center;
    font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
    color: rgba(61,52,42,0.55);
    min-height: 14px;
    transition: opacity .3s;
  }
  .fragebogen-save-state.is-dirty{ color: var(--lb-ember); }
  .fragebogen-save-state.is-saving{ color: rgba(201,168,106,0.8); }
  .fragebogen-save-state.is-saved{ color: rgba(120,200,140,0.8); }

  /* Phase K — Zeichen-Counter unter Freitext-Feldern. Ab 90 % des Limits
     wechselt die Farbe auf Ember, als dezenter Hinweis. */
  .fragebogen-counter{
    margin-top: 4px;
    font-size: 10.5px; letter-spacing: .1em;
    color: rgba(61,52,42,0.45);
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .fragebogen-counter.is-near-limit{ color: var(--lb-ember); }

  /* Phase K.4 — Fragebogen-Hint-Banner (Home + Chat) */
  .questionnaire-hint{
    display: flex; align-items: center; gap: 12px;
    margin: 12px 0 18px;
    padding: 12px 14px;
    background: rgba(201,168,106,0.08);
    border: 1px solid rgba(201,168,106,0.32);
    border-radius: 14px;
    text-decoration: none; color: var(--lb-ink);
    transition: background-color .25s, border-color .25s, transform .2s;
  }
  .questionnaire-hint:hover{
    background: rgba(201,168,106,0.14);
    border-color: rgba(232,201,138,0.55);
    transform: translateY(-1px);
  }
  .questionnaire-hint:focus-visible{ outline: 2px solid var(--lb-accent); outline-offset: 3px; }
  .questionnaire-hint-glyph{
    flex-shrink: 0;
    color: var(--lb-gold, #c9a86a); font-size: 16px;
    text-shadow: 0 0 12px rgba(201,168,106,0.35);
  }
  .questionnaire-hint-body{
    display: flex; flex-direction: column; gap: 2px;
    flex: 1; min-width: 0;
  }
  .questionnaire-hint-title{
    font-family: 'Cormorant Garamond', serif; font-size: 16px;
    color: var(--lb-ink); letter-spacing: -0.01em;
  }
  .questionnaire-hint-sub{
    font-size: 11.5px; line-height: 1.4;
    color: rgba(61,52,42,0.65);
  }
  .questionnaire-hint-arrow{ color: var(--lb-accent); font-size: 18px; }

  /* Phase K.5 — Chat-Sessions-Panel */
  .chat-sessions-panel{
    margin: 8px 0 14px;
    padding: 14px 14px 12px;
    background: rgba(244,237,224,0.55);
    border: 1px solid rgba(61,52,42,0.10);
    border-radius: 14px;
  }
  .chat-sessions-head{
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px; gap: 10px;
  }
  .chat-sessions-eyebrow{
    font-size: 10px; letter-spacing: .28em; text-transform: uppercase;
    color: rgba(61,52,42,0.55);
  }
  .chat-new-btn{
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent;
    border: 1px solid rgba(201,168,106,0.35);
    color: var(--lb-accent);
    font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
    padding: 6px 12px; border-radius: 999px;
    cursor: pointer;
    transition: background-color .25s, border-color .25s, color .25s;
  }
  .chat-new-btn:hover{
    background: rgba(201,168,106,0.1);
    border-color: rgba(232,201,138,0.55);
    color: var(--lb-ink);
  }
  .chat-new-btn:focus-visible{ outline: 2px solid var(--lb-accent); outline-offset: 2px; }
  .chat-sessions-list{
    display: flex; flex-direction: column; gap: 6px;
  }
  .chat-sessions-empty{
    font-size: 12px; color: rgba(61,52,42,0.45);
    text-align: center; padding: 10px 0; font-style: italic;
  }
  .chat-sessions-pager{
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; padding-top: 8px; margin-top: 4px;
    border-top: 1px solid rgba(61,52,42,0.06);
  }
  .chat-sessions-pager-btn{
    appearance: none; cursor: pointer;
    padding: 5px 12px; border-radius: 999px;
    background: transparent;
    border: 1px solid rgba(201,168,106,0.35);
    color: var(--lb-accent);
    font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
    transition: background-color .2s, border-color .2s, transform .15s, opacity .2s;
  }
  .chat-sessions-pager-btn:hover{
    background: rgba(201,168,106,0.1);
    border-color: rgba(201,168,106,0.55);
  }
  .chat-sessions-pager-btn:active{ transform: translateY(1px); }
  .chat-sessions-pager-btn:focus-visible{ outline: 2px solid var(--lb-accent); outline-offset: 2px; }
  .chat-sessions-pager-btn:disabled{
    opacity: 0.32; cursor: default;
  }
  .chat-sessions-pager-btn:disabled:hover{
    background: transparent; border-color: rgba(201,168,106,0.35);
    transform: none;
  }
  .chat-sessions-pager-status{
    font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
    color: rgba(61,52,42,0.55);
    font-variant-numeric: tabular-nums;
  }
  .chat-session-item{
    display: flex; flex-direction: column; gap: 3px;
    padding: 10px 12px;
    background: transparent;
    border: 1px solid rgba(61,52,42,0.08);
    border-radius: 10px;
    cursor: pointer;
    text-align: left; width: 100%;
    transition: border-color .25s, background-color .25s;
  }
  .chat-session-item:hover{
    border-color: rgba(201,168,106,0.3);
    background: rgba(201,168,106,0.04);
  }
  .chat-session-item.is-active{
    border-color: rgba(232,201,138,0.55);
    background: rgba(201,168,106,0.08);
  }
  .chat-session-item:focus-visible{ outline: 2px solid var(--lb-accent); outline-offset: 2px; }
  .chat-session-title{
    font-family: 'Cormorant Garamond', serif; font-size: 15px;
    color: var(--lb-ink);
    font-style: italic;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .chat-session-meta{
    display: flex; align-items: center; gap: 8px;
    font-size: 10.5px; color: rgba(61,52,42,0.45);
    letter-spacing: .12em;
  }
  .chat-session-count::before{ content: '· '; opacity: .5; }

  /* Confirm-Sub (Passwort-Modal) */
  .confirm-sub{
    color: rgba(61,52,42,0.65);
    font-size: 13px; line-height: 1.55;
    margin-bottom: 4px;
  }

  /* Confirm-Modal — auf Auth-Panel-Sprache abgestimmt (Creme + Gold),
     damit alle modalen Dialoge wie ein Produkt wirken. */
  .confirm-backdrop{
    position: fixed; inset: 0; z-index: 60;
    background: radial-gradient(circle at 50% 30%, rgba(251,246,236,0.85), rgba(6,4,16,0.95));
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    display: none; align-items: center; justify-content: center;
    padding: 24px;
    overflow-y: auto;
    opacity: 0;
    transition: opacity .25s var(--ease-spring);
  }
  .confirm-backdrop.open{ display: flex; opacity: 1; }
  .confirm-panel{
    position: relative;
    max-width: 420px; width: 100%;
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background:
      radial-gradient(120% 60% at 50% 0%, rgba(201,168,106,0.12), transparent 60%),
      linear-gradient(180deg, rgba(251,246,236,0.94), rgba(244,237,224,0.97));
    border: 1px solid rgba(61,52,42,0.14);
    border-radius: 24px; padding: 30px 24px 24px;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.05) inset,
      0 40px 80px -30px rgba(61,52,42,0.18),
      0 20px 60px -20px rgba(201,168,106,0.22);
    transform: translateY(12px) scale(.98); opacity: 0;
    transition: transform .35s var(--ease-spring), opacity .35s var(--ease-spring);
  }
  .confirm-backdrop.open .confirm-panel{
    transform: translateY(0) scale(1); opacity: 1;
  }
  .confirm-panel .confirm-kicker{
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 10px; letter-spacing: .28em; text-transform: uppercase;
    color: var(--lb-accent);
  }
  .confirm-panel h3{
    font-family: 'Cormorant Garamond', serif;
    font-size: 24px; color: var(--lb-ink); letter-spacing: -0.01em;
    margin: 8px 0 10px; line-height: 1.2;
  }
  .confirm-panel p{
    font-size: 13px; color: rgba(61,52,42,0.75);
    line-height: 1.6; margin-bottom: 18px;
  }
  .confirm-actions{
    display: flex; gap: 10px;
  }
  .confirm-actions > *{ flex: 1; }

  /* C3 — Insufficient-Taler bekommt 3 Buttons; vertikal stacken für klare Hierarchie */
  .confirm-actions--stacked{ flex-direction: column; gap: 10px; }
  .confirm-actions--stacked > *{ flex: none; width: 100%; }

  /* C3 — Smart-Upsell-Button: subtiler als btn-primary, prominenter als btn-ghost */
  .btn-outline{
    width: 100%;
    padding: 12px 16px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--lb-accent) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--lb-accent) 38%, transparent);
    color: var(--lb-ink);
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    cursor: pointer;
    transition: background-color .25s var(--ease-spring), border-color .25s var(--ease-spring), transform .25s var(--ease-spring);
  }
  .btn-outline:hover{
    background: color-mix(in srgb, var(--lb-accent) 14%, transparent);
    border-color: color-mix(in srgb, var(--lb-accent) 60%, transparent);
    transform: translateY(-1px);
  }
  .btn-outline:focus-visible{ outline: 2px solid var(--lb-accent); outline-offset: 2px; }
  .btn-outline__title{ font-size: 12px; font-weight: 600; color: var(--lb-accent); letter-spacing: .14em; text-transform: uppercase; }
  .btn-outline__sub{ font-size: 11px; color: rgba(61,52,42,0.78); letter-spacing: .02em; }

  /* Phase G — Natal-Horoskop-View ─────────────────────────────────────── */
  /* Radial-Orbital-Navigation: 4 Kategorien kreisförmig um pulsierendes Zentrum.
     Alle Nodes immer sichtbar, kein Scrollen. Sanfte Auto-Rotation, Klick pausiert. */
  .horoskop-orbital{
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 320px;
    margin: 4px auto 10px;
    display: flex; align-items: center; justify-content: center;
    --orbit-radius: 118px;
    --node-size: 58px;
    --orbit-duration: 52s;
  }
  .orbital-ring{
    position: absolute;
    /* width = orbit diameter so Nodes sit on the ring */
    width: calc(var(--orbit-radius) * 2);
    height: calc(var(--orbit-radius) * 2);
    border-radius: 50%;
    border: 1px solid rgba(201,168,106,0.22);
    box-shadow: inset 0 0 40px rgba(201,168,106,0.04),
                0 0 30px rgba(201,168,106,0.04);
  }
  .orbital-ring::before,
  .orbital-ring::after{
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(61,52,42,0.06);
  }
  .orbital-ring::before{ inset: -12px; }
  .orbital-ring::after { inset: 14px; border-color: rgba(201,168,106,0.10); }

  .orbital-center{
    position: absolute;
    width: 46px; height: 46px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: 0; padding: 0;
    cursor: pointer;
    transition: transform .25s var(--ease-spring);
  }
  .orbital-center:hover{ transform: scale(1.08); }
  .orbital-center:focus-visible{ outline: 2px solid var(--lb-accent); outline-offset: 6px; border-radius: 50%; }
  .orbital-center-core{
    position: absolute;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, var(--lb-ink) 0%, var(--lb-accent) 40%, #7a5a32 90%);
    box-shadow: 0 0 18px rgba(201,168,106,0.55),
                0 0 38px rgba(201,168,106,0.3),
                inset 0 0 8px rgba(61,52,42,0.5);
    animation: lb-pulse 3.2s ease-in-out infinite;
  }
  .orbital-center-ping{
    position: absolute;
    width: 46px; height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(201,168,106,0.45);
    opacity: 0;
    animation: lb-pulse-ping 2.6s cubic-bezier(.2,.8,.2,1) infinite;
  }
  @keyframes lb-pulse{
    0%,100%{ transform: scale(1); opacity: 1; }
    50%    { transform: scale(1.08); opacity: 0.85; }
  }
  @keyframes lb-pulse-ping{
    0%  { transform: scale(1);    opacity: 0.55; }
    80% { transform: scale(2.4);  opacity: 0;    }
    100%{ transform: scale(2.4);  opacity: 0;    }
  }

  .orbital-wheel{
    position: absolute; inset: 0;
    animation: lb-orbit-spin var(--orbit-duration) linear infinite;
    will-change: transform;
    /* Wheel ist nur ein Träger — Klicks gehen durch zur Center-Kugel,
       die Nodes selbst aktivieren pointer-events wieder. */
    pointer-events: none;
  }
  .orbital-wheel.is-paused{ animation-play-state: paused; }
  @keyframes lb-orbit-spin{
    from{ transform: rotate(0deg); }
    to  { transform: rotate(360deg); }
  }

  .orbital-node{
    position: absolute;
    top: 50%; left: 50%;
    width: var(--node-size); height: var(--node-size);
    margin: calc(var(--node-size) / -2) 0 0 calc(var(--node-size) / -2);
    background: transparent; border: 0; padding: 0;
    cursor: pointer;
    /* Wheel hat pointer-events:none, Nodes übernehmen Klicks. */
    pointer-events: auto;
    transform:
      rotate(var(--angle))
      translateX(var(--orbit-radius))
      rotate(calc(var(--angle) * -1));
    transition: transform .3s var(--ease-spring);
  }
  /* Counter-rotation damit Icons & Labels aufrecht bleiben, wenn das Rad dreht */
  .orbital-wheel { transform-origin: 50% 50%; }
  .orbital-node > *{
    animation: lb-orbit-spin-counter var(--orbit-duration) linear infinite;
    will-change: transform;
  }
  .orbital-wheel.is-paused .orbital-node > *{ animation-play-state: paused; }
  @keyframes lb-orbit-spin-counter{
    from{ transform: rotate(0deg); }
    to  { transform: rotate(-360deg); }
  }

  .orbital-node-btn{
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    border-radius: 50%;
    color: rgba(61,52,42,0.75);
    background: radial-gradient(circle at 30% 30%, rgba(16,14,18,0.9) 0%, rgba(10,8,14,1) 100%);
    border: 1.5px solid rgba(201,168,106,0.35);
    box-shadow: 0 4px 16px rgba(61,52,42,0.105),
                inset 0 0 12px rgba(201,168,106,0.05);
    transition: transform .35s var(--ease-spring),
                color .25s var(--ease-spring),
                border-color .3s var(--ease-spring),
                box-shadow .35s var(--ease-spring);
  }
  .orbital-node-btn svg{ width: 22px; height: 22px; }

  .orbital-node-label{
    position: absolute; left: 50%; top: calc(100% + 6px);
    transform: translateX(-50%);
    font-family: 'Cormorant Garamond', serif;
    font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
    font-weight: 500;
    color: rgba(61,52,42,0.55);
    white-space: nowrap;
    transition: color .25s var(--ease-spring), opacity .25s var(--ease-spring);
    pointer-events: none;
  }

  .orbital-node:hover .orbital-node-btn,
  .orbital-node:focus-visible .orbital-node-btn{
    color: var(--lb-ink);
    border-color: rgba(201,168,106,0.75);
    transform: scale(1.08);
    box-shadow: 0 6px 22px rgba(61,52,42,0.125),
                0 0 18px rgba(201,168,106,0.22);
  }
  .orbital-node:hover .orbital-node-label,
  .orbital-node:focus-visible .orbital-node-label{
    color: rgba(61,52,42,0.9);
  }
  .orbital-node:focus-visible{ outline: 0; }
  .orbital-node:focus-visible .orbital-node-btn{
    outline: 2px solid var(--lb-accent); outline-offset: 4px;
  }

  .orbital-node.is-active .orbital-node-btn{
    color: #0f0d12;
    background: radial-gradient(circle at 30% 30%, var(--lb-ink) 0%, var(--lb-accent) 45%, #a88448 100%);
    border-color: rgba(61,52,42,0.85);
    transform: scale(1.18);
    box-shadow: 0 8px 26px rgba(61,52,42,0.125),
                0 0 26px rgba(201,168,106,0.45),
                inset 0 0 10px rgba(61,52,42,0.35);
  }
  .orbital-node.is-active .orbital-node-label{
    color: var(--lb-ink);
    font-weight: 600;
  }

  .orbital-caption{
    text-align: center;
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px; letter-spacing: 0.02em;
    color: var(--lb-ink);
    margin: 6px 0 18px;
    min-height: 1.4em;
    transition: opacity .3s var(--ease-spring);
  }

  .horoskop-layout{
    display: grid;
    gap: 18px;
  }
  .horoskop-chapter-selector{
    position: relative;
    width: 100%;
    min-height: 92px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28px;
    grid-template-areas:
      "meta icon"
      "title icon"
      "sub icon";
    align-items: center;
    gap: 2px 14px;
    padding: 16px 18px;
    border-radius: 12px;
    border: 1px solid rgba(201,168,106,0.36);
    background:
      radial-gradient(120% 150% at 100% 0%, rgba(201,168,106,0.13), transparent 48%),
      rgba(251,246,236,0.68);
    color: var(--lb-ink);
    text-align: left;
    cursor: pointer;
    box-shadow: 0 14px 36px -28px rgba(61,52,42,0.45);
  }
  .horoskop-chapter-selector:focus-visible{
    outline: 2px solid var(--lb-accent);
    outline-offset: 3px;
  }
  .horoskop-selector-meta,
  .horoskop-reading-meta,
  .horoskop-sheet-kicker{
    color: var(--lb-accent);
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
  }
  .horoskop-selector-meta{ grid-area: meta; }
  .horoskop-selector-title{
    grid-area: title;
    font-family: 'Cormorant Garamond', serif;
    font-size: 28px;
    line-height: 1.02;
    letter-spacing: -0.02em;
  }
  .horoskop-selector-sub{
    grid-area: sub;
    color: rgba(61,52,42,0.72);
    font-size: 13px;
    line-height: 1.35;
  }
  .horoskop-selector-chevron{
    grid-area: icon;
    width: 24px;
    height: 24px;
    color: var(--lb-accent);
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    justify-self: end;
  }
  .horoskop-chapter-nav{
    display: none;
  }
  .horoskop-chapter-item,
  .horoskop-sheet-option{
    appearance: none;
    width: 100%;
    border: 1px solid rgba(61,52,42,0.12);
    background: rgba(251,246,236,0.58);
    color: var(--lb-ink);
    border-radius: 12px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    text-align: left;
    cursor: pointer;
    transition: border-color .22s var(--ease-spring),
                background-color .22s var(--ease-spring),
                transform .22s var(--ease-spring);
  }
  .horoskop-chapter-item:hover,
  .horoskop-sheet-option:hover{
    border-color: rgba(201,168,106,0.42);
    background: rgba(251,246,236,0.86);
  }
  .horoskop-chapter-item:focus-visible,
  .horoskop-sheet-option:focus-visible{
    outline: 2px solid var(--lb-accent);
    outline-offset: 2px;
  }
  .horoskop-chapter-item.is-active,
  .horoskop-sheet-option.is-active{
    background: rgba(201,168,106,0.14);
    border-color: rgba(201,168,106,0.64);
  }
  .horoskop-chapter-icon{
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--lb-accent);
    border: 1px solid rgba(201,168,106,0.28);
    background: rgba(255,252,245,0.62);
  }
  .horoskop-chapter-icon svg{
    width: 19px;
    height: 19px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .horoskop-chapter-text{
    min-width: 0;
    display: grid;
    gap: 2px;
  }
  .horoskop-chapter-title{
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
  }
  .horoskop-chapter-sub{
    color: rgba(61,52,42,0.62);
    font-size: 12px;
    line-height: 1.35;
  }
  .horoskop-reading{
    min-width: 0;
  }
  .horoskop-reading-head{
    margin-bottom: 16px;
  }
  .horoskop-reading-head h2{
    margin: 5px 0 4px;
    color: var(--lb-ink);
    font-size: clamp(32px, 6vw, 48px);
    line-height: 1;
  }
  .horoskop-reading-head p{
    margin: 0;
    color: rgba(61,52,42,0.68);
    font-size: 14px;
  }
  /* Inline dropdown anchor — wraps selector + panel so the panel can absolute-position to it */
  .horoskop-dropdown{
    position: relative;
  }
  .horoskop-chapter-sheet[hidden]{
    display: none !important;
  }
  /* Sheet rendered as a dropdown panel anchored below the selector button */
  .horoskop-chapter-sheet{
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 30;
    max-height: min(64svh, 520px);
    overflow: auto;
    border-radius: 14px;
    border: 1px solid rgba(201,168,106,0.36);
    background: rgba(251,246,236,0.98);
    box-shadow: 0 20px 48px -22px rgba(31,23,17,0.45);
    padding: 8px;
    animation: horoskopDropdownIn .18s cubic-bezier(.2,.8,.2,1) both;
    transform-origin: top center;
  }
  @keyframes horoskopDropdownIn{
    from{ opacity: 0; transform: translateY(-4px) scale(0.985); }
    to{   opacity: 1; transform: translateY(0)    scale(1); }
  }
  @media (prefers-reduced-motion: reduce){
    .horoskop-chapter-sheet{ animation: none; }
  }
  .horoskop-chapter-selector[aria-expanded="true"] .horoskop-selector-chevron{
    transform: rotate(180deg);
  }
  .horoskop-selector-chevron{
    transition: transform .18s cubic-bezier(.2,.8,.2,1);
  }
  .horoskop-sheet-list{
    display: grid;
    gap: 6px;
  }
  @media (min-width: 860px){
    .horoskop-layout{
      grid-template-columns: minmax(210px, 280px) minmax(0, 1fr);
      align-items: start;
      gap: clamp(24px, 4vw, 46px);
    }
    .horoskop-chapter-selector{ display: none; }
    .horoskop-dropdown{ display: none; }
    .horoskop-chapter-nav{
      display: grid;
      gap: 10px;
      position: sticky;
      top: 92px;
    }
    .horoskop-reading-head{
      margin-bottom: 20px;
    }
    .horoskop-reading-head h2{
      font-size: clamp(42px, 5vw, 64px);
    }
  }

  .horoskop-content{
    font-size: 15px; line-height: 1.75; color: #e8dcc0;
    min-height: 60vh;
    padding-left: clamp(14px, 4vw, 26px);
    padding-right: clamp(14px, 4vw, 26px);
  }
  .horoskop-content > *{ animation: lb-fade .5s var(--ease-spring) both; }
  .horoskop-content p{ margin-top: 1.15em; }
  .horoskop-content p:first-child{ margin-top: 0; }
  /* Phase K.8 #14 / K.7 #12: Drop-Cap entfernt — erster Buchstabe
     entspricht der Fließtext-Formatierung. */

  /* Loading-State: Liquid-Morph-Text zwischen Status-Phrasen.
     Gooey-Effekt durch SVG-Threshold-Filter + Gaussian-Blur — Buchstaben
     fließen beim Morph ineinander. Kein Skeleton — nur atmende Gold-Worte. */
  .natal-loading{
    min-height: 58vh;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 22px;
    padding: 40px 0;
  }
  .natal-morph{
    position: relative;
    width: 100%;
    max-width: 380px;
    height: 68px;
    margin: 0 auto;
    font-family: 'Cormorant Garamond', serif;
    font-size: 34px; font-weight: 500;
    color: var(--lb-accent);
    text-shadow: 0 0 14px rgba(201,168,106,0.35);
    text-align: center;
    letter-spacing: 0.008em;
    line-height: 1;
  }
  .natal-morph-word{
    position: absolute;
    left: 0; right: 0; top: 0;
    display: block;
    width: 100%;
    white-space: nowrap;
  }
  .natal-loading-sub{
    font-family: 'Inter', sans-serif;
    font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase;
    color: rgba(61,52,42,0.38);
  }
  .natal-loading-dots{
    display: inline-flex; gap: 5px; align-items: center;
    margin-left: 8px;
  }
  .natal-loading-dots span{
    width: 4px; height: 4px; border-radius: 50%;
    background: var(--lb-accent);
    opacity: 0.2;
    animation: natalDots 1.4s ease-in-out infinite;
  }
  .natal-loading-dots span:nth-child(2){ animation-delay: 0.2s; }
  .natal-loading-dots span:nth-child(3){ animation-delay: 0.4s; }
  @keyframes natalDots{
    0%, 80%, 100%{ opacity: 0.2; transform: scale(0.9); }
    40%          { opacity: 0.9; transform: scale(1.15); }
  }
  @media (min-width: 768px){
    .natal-morph{ font-size: 42px; height: 80px; max-width: 440px; }
  }
  @media (prefers-reduced-motion: reduce){
    .natal-morph{ filter: none; }
    .natal-loading-dots span{ animation: none; opacity: 0.55; }
  }

  .horoskop-error{
    padding: 20px 18px;
    border-radius: 16px;
    border: 1px dashed rgba(217,122,78,0.28);
    background: rgba(217,122,78,0.05);
    color: rgba(61,52,42,0.9);
    font-size: 13px; line-height: 1.7;
    text-align: center;
  }
  .horoskop-error-icon{
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    margin-bottom: 8px;
    border-radius: 50%;
    background: rgba(217,122,78,0.10);
    color: var(--lb-ember);
  }
  .horoskop-error strong{
    color: var(--lb-ink);
    font-family: 'Cormorant Garamond', serif;
    font-size: 17px; font-weight: 500;
    letter-spacing: -0.005em;
    display: block; margin-bottom: 6px;
  }
  .horoskop-retry{
    display: inline-block; margin-top: 14px;
    color: var(--lb-accent); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
    background: transparent; border: 0; padding: 0; cursor: pointer;
    transition: opacity .25s var(--ease-spring), transform .25s var(--ease-spring);
  }
  .horoskop-retry:hover{ opacity: .75; transform: translateY(-1px); }
  .horoskop-retry:focus-visible{ outline: 2px solid var(--lb-accent); outline-offset: 3px; border-radius: 4px; }

  /* Tablet/desktop tweaks */
  @media (min-width: 768px){
    .shell { max-width: 480px; }
    .horoskop-orbital{ max-width: 380px; --node-size: 64px; --orbit-radius: 140px; }
    .orbital-node-btn svg{ width: 24px; height: 24px; }
    .orbital-node-label{ font-size: 13px; }
    .orbital-caption{ font-size: 20px; }
    .horoskop-content{ font-size: 16px; line-height: 1.8; }
  }
  @media (prefers-reduced-motion: reduce){
    .orbital-wheel, .orbital-node > *{ animation: none !important; }
    .orbital-center-core, .orbital-center-ping{ animation: none !important; }
  }

  /* ── Phase H: Chat ──────────────────────────────────────── */
  .chat-panel{
    padding: 16px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 68vh;
    max-height: 82vh;
  }
  .chat-stream{
    flex: 1 1 auto;
    overflow-y: auto;
    scroll-behavior: smooth;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 2px 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(201,168,106,0.38) transparent;
  }
  .chat-stream::-webkit-scrollbar{ width: 6px; }
  .chat-stream::-webkit-scrollbar-track{ background: transparent; }
  .chat-stream::-webkit-scrollbar-thumb{
    background: rgba(201,168,106,0.32);
    border-radius: 3px;
  }
  .chat-empty{
    margin: 14px auto 8px;
    max-width: 280px;
    text-align: center;
    color: rgba(61,52,42,0.7);
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    line-height: 1.6;
  }
  .chat-empty-kicker{
    display: inline-block;
    font-size: 10.5px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--lb-accent);
    margin-bottom: 10px;
  }
  .chat-empty p{ margin: 0; }
  .chat-empty-title{
    font-family: 'Cormorant Garamond', serif;
    font-size: 17px;
    line-height: 1.25;
    color: var(--lb-ink);
    letter-spacing: -0.01em;
    margin-bottom: 6px !important;
  }
  .chat-empty-hint{
    font-size: 12px;
    color: rgba(61,52,42,0.62);
  }
  .chat-starters{
    margin: 12px auto 0;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    text-align: left;
  }
  .chat-starter{
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 9px 13px 10px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(201,168,106,0.10) 0%, rgba(201,168,106,0.04) 100%);
    border: 1px solid rgba(201,168,106,0.22);
    color: var(--lb-ink);
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    line-height: 1.45;
    letter-spacing: -0.003em;
    text-align: left;
    cursor: pointer;
    box-shadow:
      0 1px 0 rgba(255,243,214,0.05) inset,
      0 6px 14px rgba(6,4,14,0.35);
    transition: transform .24s cubic-bezier(0.2,0.9,0.3,1),
                border-color .22s ease-out,
                background .22s ease-out,
                box-shadow .24s ease-out;
  }
  .chat-starter::before{
    content: '\2022';
    flex-shrink: 0;
    font-size: 12px;
    color: var(--lb-accent);
    line-height: 1.7;
    opacity: 0.85;
    transition: transform .24s cubic-bezier(0.2,0.9,0.3,1), opacity .22s ease-out;
  }
  .chat-starter:hover{
    border-color: rgba(201,168,106,0.45);
    background: linear-gradient(135deg, rgba(201,168,106,0.18) 0%, rgba(201,168,106,0.07) 100%);
    transform: translateY(-1px);
    box-shadow:
      0 1px 0 rgba(255,243,214,0.08) inset,
      0 10px 22px rgba(6,4,14,0.5);
  }
  .chat-starter:hover::before{ transform: rotate(18deg); opacity: 1; }
  .chat-starter:focus-visible{
    outline: none;
    border-color: var(--lb-accent);
    box-shadow:
      0 0 0 3px rgba(201,168,106,0.2),
      0 10px 22px rgba(6,4,14,0.5);
  }
  .chat-starter:active{ transform: translateY(0); }
  @media (prefers-reduced-motion: reduce){
    .chat-starter, .chat-starter::before{ transition: none; }
    .chat-starter:hover{ transform: none; }
    .chat-starter:hover::before{ transform: none; }
  }

  .chat-bubble{
    position: relative;
    max-width: 84%;
    padding: 11px 14px 12px;
    border-radius: 16px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.65;
    letter-spacing: -0.005em;
    white-space: pre-wrap;
    word-wrap: break-word;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .32s cubic-bezier(0.2,0.9,0.3,1), transform .32s cubic-bezier(0.2,0.9,0.3,1);
  }
  .chat-bubble.is-mounted{ opacity: 1; transform: translateY(0); }
  .bubble-user{
    align-self: flex-end;
    color: #1a1224;
    background: linear-gradient(140deg, #e8c97a 0%, var(--lb-gold) 70%, #b4925a 100%);
    border: 1px solid rgba(201,168,106,0.6);
    box-shadow:
      0 1px 0 rgba(255,238,200,0.32) inset,
      0 6px 14px rgba(201,168,106,0.22),
      0 2px 5px rgba(10,6,20,0.4);
    border-bottom-right-radius: 6px;
  }
  .bubble-assistant{
    align-self: flex-start;
    color: var(--lb-ink);
    background: linear-gradient(160deg, rgba(61,52,42,0.06) 0%, rgba(201,168,106,0.05) 100%);
    border: 1px solid rgba(201,168,106,0.22);
    box-shadow:
      0 1px 0 rgba(61,52,42,0.05) inset,
      0 4px 12px rgba(6,4,14,0.5),
      0 1px 0 rgba(201,168,106,0.08);
    padding-left: 34px;
    border-bottom-left-radius: 6px;
  }
  .chat-bubble.is-streaming::after{
    content: "▌";
    display: inline-block;
    color: var(--lb-accent);
    margin-left: 2px;
    animation: lb-cursor 1.05s ease-in-out infinite;
    vertical-align: baseline;
  }
  @keyframes lb-cursor{
    0%, 100%{ opacity: 0.92; }
    50%     { opacity: 0.15; }
  }
  .chat-bubble.is-error{
    align-self: flex-start;
    background: rgba(217,122,78,0.06);
    border: 1px dashed rgba(217,122,78,0.32);
    color: rgba(61,52,42,0.9);
    padding-left: 14px;
  }
  .chat-bubble.is-error::before{ content: none; }

  .chat-typing{
    align-self: flex-start;
    display: inline-flex;
    gap: 6px;
    align-items: center;
    padding: 10px 14px;
    border-radius: 14px;
    background: rgba(61,52,42,0.04);
    border: 1px solid rgba(201,168,106,0.14);
    opacity: 0;
    transition: opacity .25s ease-out;
  }
  .chat-typing[data-visible="1"]{ opacity: 1; }
  .chat-typing span{
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--lb-accent); opacity: 0.3;
    animation: natalDots 1.4s ease-in-out infinite;
  }
  .chat-typing span:nth-child(2){ animation-delay: 0.18s; }
  .chat-typing span:nth-child(3){ animation-delay: 0.36s; }

  /* Phase L2 — Chat-Mode-Chips über dem Eingabefeld. Zwei Radio-ähnliche
     Pills für Trimargi (3 Taler) vs. Tiefenanalyse (15 Taler). */
  .chat-mode-chips{
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 4px 8px 2px;
    justify-content: flex-start;
  }
  .chat-mode-chip{
    appearance: none;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(251,246,236,0.55);
    border: 1px solid rgba(201,168,106,0.20);
    color: rgba(61,52,42,0.62);
    cursor: pointer;
    transition: border-color .22s ease-out, color .22s ease-out, background .22s ease-out;
  }
  .chat-mode-chip:hover{
    border-color: rgba(201,168,106,0.38);
    color: rgba(61,52,42,0.85);
  }
  .chat-mode-chip:focus-visible{
    outline: 2px solid var(--lb-accent);
    outline-offset: 3px;
  }
  .chat-mode-chip.is-active{
    background: rgba(201,168,106,0.12);
    border-color: rgba(201,168,106,0.62);
    color: #f5ead0;
  }
  .chat-mode-chip .chip-cost{
    font-size: 10.5px;
    letter-spacing: 0.02em;
    color: rgba(61,52,42,0.48);
    font-variant-numeric: tabular-nums;
  }
  .chat-mode-chip.is-active .chip-cost{ color: rgba(245,234,208,0.82); }
  /* Pro-Gate: 'Tiefenanalyse' nur ab Plan ≥ Fortgeschritten zugänglich.
     Locked-Chip ist sichtbar, klickbar (Klick → Abo-Tab), aber visuell als
     gesperrt erkennbar (Schloss + gestrichelter Border + opacity). */
  .chat-mode-chip.is-locked{
    opacity: 0.58;
    border-style: dashed;
    color: rgba(61,52,42,0.5);
  }
  .chat-mode-chip.is-locked:hover{
    opacity: 0.78;
    border-color: rgba(201,168,106,0.42);
    color: rgba(61,52,42,0.7);
  }
  .chat-mode-chip .chip-lock{
    display: inline-flex; align-items: center;
    width: 12px; height: 12px;
    color: rgba(232,201,138,0.7);
  }
  .chat-mode-chip:not(.is-locked) .chip-lock{ display: none; }

  /* C5 — Pro-Chip im Locked-State zeigt sichtbaren Upgrade-Hint, nicht nur Schloss.
     Macht aus Sackgasse eine Bruecke. Auf Mobile besonders relevant. */
  .chat-mode-chip .chip-upgrade-hint{
    margin-left: 4px;
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lb-accent);
    font-weight: 600;
    opacity: 0.78;
  }
  .chat-mode-chip:not(.is-locked) .chip-upgrade-hint{ display: none; }

  .chat-starter-hint{
    margin-top: 7px;
    font-size: 11px;
    line-height: 1.5;
    color: rgba(61,52,42,0.52);
    font-style: italic;
    text-align: center;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
  }

  .chat-input-wrap{
    position: relative;
    flex-shrink: 0;
    display: flex;
    gap: 8px;
    align-items: flex-end;
    padding: 8px 6px 2px;
    border-top: 1px solid rgba(201,168,106,0.14);
  }
  #chatInput{
    flex: 1 1 auto;
    resize: none;
    min-height: 40px;
    max-height: 140px;
    padding: 10px 13px;
    border-radius: 12px;
    background: rgba(8,5,16,0.55);
    border: 1px solid rgba(201,168,106,0.22);
    color: var(--lb-ink);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: -0.005em;
    outline: none;
    overflow: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(201,168,106,0.38) transparent;
    transition: border-color .22s ease-out, box-shadow .22s ease-out;
  }
  #chatInput::-webkit-scrollbar{ width: 6px; }
  #chatInput::-webkit-scrollbar-track{ background: transparent; }
  #chatInput::-webkit-scrollbar-thumb{
    background: rgba(201,168,106,0.32);
    border-radius: 3px;
  }
  #chatInput::placeholder{ color: rgba(61,52,42,0.35); }
  #chatInput:hover{ border-color: rgba(201,168,106,0.35); }
  #chatInput:focus{
    border-color: var(--lb-accent);
    box-shadow:
      0 0 0 3px rgba(201,168,106,0.14),
      0 4px 14px rgba(6,4,14,0.45) inset;
  }
  #chatInput:disabled{ opacity: 0.55; cursor: not-allowed; }

  .chat-send{
    flex-shrink: 0;
    min-width: 40px; height: 40px;
    padding: 0 11px;
    gap: 5px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px;
    background: linear-gradient(140deg, #e8c97a 0%, var(--lb-gold) 70%, #b4925a 100%);
    border: 1px solid rgba(201,168,106,0.55);
    color: #1a1224;
    cursor: pointer;
    box-shadow:
      0 1px 0 rgba(255,238,200,0.35) inset,
      0 6px 14px rgba(201,168,106,0.22);
    transition: transform .22s cubic-bezier(0.2,0.9,0.3,1),
                box-shadow .22s ease-out,
                opacity .22s ease-out;
  }
  .chat-send svg{ width: 18px; height: 18px; stroke: currentColor; }
  .chat-send:hover{
    transform: translateY(-1px);
    box-shadow:
      0 1px 0 rgba(255,238,200,0.45) inset,
      0 9px 20px rgba(201,168,106,0.32);
  }
  .chat-send:active{ transform: translateY(1px); }
  .chat-send:focus-visible{ outline: 2px solid var(--lb-accent); outline-offset: 3px; }
  .chat-send:disabled{ opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }

  @media (min-width: 768px){
    .chat-panel{ min-height: 70vh; max-height: 78vh; padding: 20px 18px 16px; }
    .chat-bubble{ font-size: 14.5px; max-width: 78%; }
    #chatInput{ font-size: 14px; min-height: 44px; padding: 11px 14px; }
    .chat-send{ min-width: 44px; height: 44px; }
    .chat-empty-title{ font-size: 19px; }
    .chat-empty-hint{ font-size: 13px; }
    .chat-starter{ font-size: 13px; padding: 10px 14px 11px; }
  }
  @media (prefers-reduced-motion: reduce){
    .chat-bubble{ transition: opacity .1s; transform: none; }
    .chat-bubble.is-streaming::after{ animation: none; opacity: 0.85; }
  }

  /* ── Phase I — Tageskarte ──────────────────────────────────────────── */
  .tageskarte-panel{
    padding: 28px 22px 32px;
    display: flex; flex-direction: column; align-items: center;
    gap: 0;
  }
  .tageskarte-intro{
    max-width: 440px;
    text-align: center;
    color: rgba(61,52,42,0.72);
    font-size: 14px; line-height: 1.7;
    margin: 4px auto 28px;
  }

  .tarot-card-stage{
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    perspective: 1400px;
    filter: drop-shadow(0 32px 42px rgba(4,3,14,0.55))
            drop-shadow(0 8px 14px rgba(4,3,14,0.35));
  }
  .tarot-card-flip{
    position: relative;
    width: 100%;
    /* 2:3 = natives Seitenverhaeltnis der Karten-PNGs (1024x1536, /tarot/).
       3:4 beschnitt die Karten oben/unten via object-fit:cover (MARGI-19). */
    aspect-ratio: 2 / 3;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transition: transform 1.15s cubic-bezier(0.55, 0.15, 0.2, 1.08);
    background: transparent;
    border: 0; padding: 0;
    cursor: pointer;
    appearance: none;
  }
  .tarot-card-flip:focus-visible{
    outline: 2px solid var(--lb-accent);
    outline-offset: 8px;
    border-radius: 22px;
  }
  .tarot-card-flip.is-revealed{ transform: rotateY(180deg); cursor: default; }

  .tarot-card-face{
    position: absolute; inset: 0;
    border-radius: 22px;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .tarot-card-face--front{ transform: rotateY(180deg); }
  .tarot-card-face--front img{
    display: block; width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 22px;
  }

  .tarot-card-face--back{
    display: grid; place-items: center;
    background:
      radial-gradient(120% 80% at 50% 30%, rgba(232,164,120,0.10) 0%, transparent 55%),
      radial-gradient(90% 70% at 50% 100%, rgba(201,168,106,0.08) 0%, transparent 70%),
      linear-gradient(160deg, #17102a 0%, #0a0612 100%);
    border: 1px solid rgba(201,168,106,0.28);
    box-shadow:
      inset 0 0 0 1px rgba(201,168,106,0.08),
      inset 0 0 70px rgba(4,3,12,0.55);
  }
  .tarot-card-face--back::before{
    /* innerer goldener Rahmen mit Abstand zur Kante */
    content: "";
    position: absolute;
    inset: 14px;
    border-radius: 14px;
    border: 1px solid rgba(201,168,106,0.22);
    pointer-events: none;
  }
  .tarot-card-face--back::after{
    /* winzige Stern-Streuung über das Rücken-Motiv */
    content: "";
    position: absolute; inset: 0;
    background-image:
      radial-gradient(1px 1px at 14% 22%, rgba(61,52,42,0.45), transparent 60%),
      radial-gradient(1px 1px at 82% 18%, rgba(61,52,42,0.35), transparent 60%),
      radial-gradient(1px 1px at 28% 78%, rgba(61,52,42,0.30), transparent 60%),
      radial-gradient(1px 1px at 70% 86%, rgba(61,52,42,0.35), transparent 60%),
      radial-gradient(1px 1px at 50% 8%, rgba(61,52,42,0.40), transparent 60%);
    pointer-events: none;
    opacity: 0.8;
  }
  .tarot-card-face--back svg{
    position: relative;
    width: 74%; height: 74%;
    opacity: 0.95;
  }

  .tarot-cta-wrap{
    margin-top: 26px;
    min-height: 48px;
    display: flex; align-items: center; justify-content: center;
  }
  .tarot-draw-cta{
    display: inline-flex; align-items: center; gap: 10px;
    padding: 13px 26px;
    border-radius: 999px;
    background: linear-gradient(140deg, #f0d48c 0%, var(--lb-gold) 55%, #a88849 100%);
    color: #1a1224;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    border: 1px solid rgba(201,168,106,0.55);
    box-shadow:
      0 1px 0 rgba(255,238,200,0.4) inset,
      0 10px 26px rgba(201,168,106,0.22),
      0 2px 6px rgba(4,3,12,0.35);
    cursor: pointer;
    transition: transform .3s cubic-bezier(0.2,0.9,0.3,1),
                box-shadow .3s ease-out,
                opacity .35s ease-out;
  }
  .tarot-draw-cta:hover{
    transform: translateY(-2px);
    box-shadow:
      0 1px 0 rgba(255,238,200,0.5) inset,
      0 14px 32px rgba(201,168,106,0.32),
      0 2px 8px rgba(4,3,12,0.45);
  }
  .tarot-draw-cta:active{ transform: translateY(0); }
  .tarot-draw-cta:focus-visible{ outline: 2px solid var(--lb-accent); outline-offset: 4px; }
  .tarot-draw-cta.is-hidden{
    opacity: 0; pointer-events: none; transform: scale(0.96) translateY(4px);
  }

  .tarot-reveal{
    max-width: 520px;
    margin: 34px auto 4px;
    text-align: center;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .7s ease-out, transform .7s ease-out;
    pointer-events: none;
  }
  .tarot-reveal.is-visible{ opacity: 1; transform: none; pointer-events: auto; }
  .tarot-reveal-eyebrow{
    font-size: 10px; letter-spacing: .28em; text-transform: uppercase;
    color: var(--lb-accent);
  }
  .tarot-reveal-title{
    font-family: 'Cormorant Garamond', serif;
    font-size: 34px; line-height: 1.1;
    color: var(--lb-ink); letter-spacing: -0.01em;
    margin: 8px 0 14px;
  }
  .tarot-reveal-text{
    font-size: 14.5px;
    color: rgba(61,52,42,0.78);
    line-height: 1.75;
  }
  .tarot-reveal-actions{
    margin-top: 24px;
    display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  }
  .tarot-reset-btn{
    background: transparent; color: rgba(61,52,42,0.72);
    font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase;
    padding: 10px 20px; border-radius: 999px;
    border: 1px solid rgba(61,52,42,0.18);
    cursor: pointer;
    transition: color .3s, border-color .3s, background-color .3s;
  }
  .tarot-reset-btn:hover{
    color: var(--lb-ink);
    border-color: rgba(201,168,106,0.4);
    background: rgba(201,168,106,0.06);
  }
  .tarot-reset-btn:focus-visible{ outline: 2px solid var(--lb-accent); outline-offset: 3px; }

  @media (min-width: 768px){
    .tarot-card-stage{ max-width: 360px; }
    .tarot-reveal-title{ font-size: 38px; }
  }
  @media (prefers-reduced-motion: reduce){
    .tarot-card-flip{ transition: none; }
    .tarot-reveal{ transition: none; }
  }

  /* ── Phase J — Kartenlegen (Split-Flow) ──────────────────────────────
     State-driven via data-state auf .kartenlegen-stage:
       idle       → schwebende Solo-Karte + Input + Chips
       splitting  → Solo fadet aus, Chips + Input fadet aus
       revealing  → 3 Karten nebeneinander, User flippt per Klick
       decision   → 4. Karte erscheint + Decision-Panel
       extending  → 4. Karte flippt, dann generating
       generating → Loading-Dots (API-Call läuft)
       complete   → Antwort + Reset sichtbar
  */
  .kartenlegen-disclaimer{
    display: flex; gap: 10px; align-items: flex-start;
    max-width: 480px; margin: -6px auto 18px;
    color: rgba(61,52,42,0.75);
    font-size: 12.5px; line-height: 1.6;
  }
  .kartenlegen-intro-glyph{
    display: inline-block; flex-shrink: 0;
    color: var(--lb-gold, #c9a86a);
    font-size: 14px; padding-top: 1px;
    text-shadow: 0 0 12px rgba(201,168,106,0.28);
  }

  /* KI-Transparenz-Hinweis (Art. 50 EU AI Act).
     Sichtbar in jeder View, in der eine KI Antworten generiert. */
  .ai-disclaimer{
    display: inline-flex; gap: 8px; align-items: center;
    padding: 6px 12px; margin: 0 auto 12px;
    background: rgba(201,168,106,0.08);
    border: 1px solid rgba(201,168,106,0.22);
    border-radius: 999px;
    color: rgba(61,52,42,0.78);
    font-size: 12px; line-height: 1.5;
    letter-spacing: 0.005em;
    max-width: max-content;
  }
  .ai-disclaimer__dot{
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--lb-gold, #c9a86a);
    box-shadow: 0 0 6px rgba(201,168,106,0.55);
    flex-shrink: 0;
  }
  .ai-disclaimer a{
    color: rgba(61,52,42,0.95);
    text-decoration: underline;
    text-decoration-color: rgba(201,168,106,0.55);
    text-underline-offset: 2px;
    margin-left: 2px;
  }
  .ai-disclaimer a:hover{ text-decoration-color: var(--lb-gold, #c9a86a); }
  .ai-disclaimer--tarot{ margin-top: -4px; margin-bottom: 16px; }
  @media (max-width: 480px){
    .ai-disclaimer{ font-size: 11.5px; padding: 5px 10px; }
  }

  .kartenlegen-stage{
    position: relative;
    display: flex; flex-direction: column; align-items: center;
    min-height: 540px;
    padding: 6px 0 30px;
    gap: 16px;
    /* Burst-Animation auf .kartenlegen-slot.is-flipped::before nutzt
       width: 180% (≈74px überstand pro Karte). Ohne Clip expandiert das
       die Cards-Row scrollWidth, bläst den Layout-Viewport (innerWidth)
       auf und die fixierten Cosmos-/Stars-/Grain-Layer werden breiter
       als der Viewport — Folge: horizontaler Scroll auf Mobil. */
    overflow-x: clip;
  }

  /* Chip-Reihen oben/unten — subtil mit Float-Bewegung. */
  .kartenlegen-chips-row{
    display: flex; flex-wrap: wrap; gap: 8px;
    justify-content: center;
    width: 100%;
    transition: opacity .45s ease-out, transform .45s ease-out;
  }
  .kartenlegen-chips-top{    animation: kartenlegen-chip-drift 8s ease-in-out infinite; }
  .kartenlegen-chips-bottom{ animation: kartenlegen-chip-drift 9s ease-in-out infinite reverse; }
  @keyframes kartenlegen-chip-drift{
    0%,100%{ transform: translateY(0); }
    50%    { transform: translateY(-3px); }
  }
  .kartenlegen-chip{
    background: rgba(61,52,42,0.04);
    border: 1px solid rgba(61,52,42,0.18);
    color: rgba(61,52,42,0.78);
    font-size: 11.5px; line-height: 1.3;
    padding: 7px 13px; border-radius: 999px;
    cursor: pointer;
    transition: background-color .3s, border-color .3s, color .3s, transform .25s cubic-bezier(.2,.8,.2,1);
  }
  .kartenlegen-chip:hover{
    background: rgba(201,168,106,0.08);
    border-color: rgba(201,168,106,0.4);
    color: var(--lb-ink);
    transform: translateY(-1px);
  }
  .kartenlegen-chip:focus-visible{ outline: 2px solid var(--lb-accent); outline-offset: 2px; }
  .kartenlegen-chip:active{ transform: translateY(0); }

  /* Input-Zeile: einzeiliges Feld + runder Submit-Pfeil. */
  .kartenlegen-input-row{
    display: flex; align-items: center; gap: 10px;
    width: 100%; max-width: 440px;
    transition: opacity .45s ease-out, transform .45s ease-out;
  }
  .kartenlegen-input{
    flex: 1;
    background: rgba(244,237,224,0.65);
    border: 1px solid rgba(61,52,42,0.22);
    border-radius: 999px;
    padding: 13px 22px;
    color: var(--lb-ink);
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px; line-height: 1.25;
    transition: border-color .35s ease-out, box-shadow .35s ease-out;
  }
  .kartenlegen-input::placeholder{
    color: rgba(61,52,42,0.38);
    font-style: italic;
  }
  .kartenlegen-input:focus{
    outline: none;
    border-color: rgba(201,168,106,0.55);
    box-shadow: 0 0 0 3px rgba(201,168,106,0.12);
  }
  .kartenlegen-submit{
    flex-shrink: 0;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: linear-gradient(140deg, #f0d48c 0%, var(--lb-gold, #c9a86a) 55%, #a88849 100%);
    color: #1a1224;
    border: 1px solid rgba(201,168,106,0.55);
    box-shadow:
      0 1px 0 rgba(255,238,200,0.4) inset,
      0 8px 20px rgba(201,168,106,0.22),
      0 2px 6px rgba(4,3,12,0.35);
    display: grid; place-items: center;
    cursor: pointer;
    transition: transform .3s cubic-bezier(0.2,0.9,0.3,1), opacity .3s, box-shadow .3s;
  }
  .kartenlegen-submit:hover:not(:disabled){
    transform: translateY(-2px) scale(1.04);
  }
  .kartenlegen-submit:focus-visible{ outline: 2px solid var(--lb-accent); outline-offset: 3px; }
  .kartenlegen-submit:disabled{
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: 0 4px 12px rgba(4,3,12,0.3);
  }
  .kartenlegen-submit svg{ display: block; }

  /* Card-Stage: beherbergt Solo-Float (idle) + 3-Karten-Grid + 4.-Karten-Slot. */
  .kartenlegen-card-stage{
    position: relative;
    width: 100%;
    min-height: 240px;
    perspective: 1800px;
  }

  /* Floating Solo-Karte (idle) — leicht auf-ab-Animation. */
  .kartenlegen-floating{
    position: absolute;
    left: 50%; top: 20px;
    transform: translateX(-50%);
    width: 150px; aspect-ratio: 2 / 3; /* nativ 2:3, s. MARGI-19 */
    animation: kartenlegen-float 4.2s ease-in-out infinite;
    filter: drop-shadow(0 22px 34px rgba(4,3,14,0.5)) drop-shadow(0 6px 14px rgba(4,3,14,0.35));
    transition: opacity .6s ease-out, transform .6s ease-out;
    pointer-events: none;
  }
  .kartenlegen-floating-card{
    position: relative;
    width: 100%; height: 100%;
    border-radius: 14px;
    overflow: hidden;
  }
  .kartenlegen-floating-card .kartenlegen-card-face--back{
    inset: 0; position: absolute;
    border-radius: 14px;
  }
  @keyframes kartenlegen-float{
    0%,100%{ transform: translateX(-50%) translateY(0); }
    50%    { transform: translateX(-50%) translateY(-10px); }
  }
  /* Zentrierte Variante ohne translateX(-50%) — für Elemente, die via
     margin:auto schon zentriert sind (z. B. .kartenlegen-decision-slot). */
  @keyframes kartenlegen-float-center{
    0%,100%{ transform: translateY(0); }
    50%    { transform: translateY(-10px); }
  }

  /* 3-Karten-Grid (erscheint in revealing+ states). */
  .kartenlegen-cards{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 12px 4px 8px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .6s ease-out, transform .6s ease-out;
    pointer-events: none;
  }
  .kartenlegen-slot{
    position: relative;
    display: flex; flex-direction: column; align-items: center;
    opacity: 0;
    transform: scale(0.3) translateY(-40px);
    transition: opacity .7s cubic-bezier(.2,.8,.2,1),
                transform .75s cubic-bezier(.2,.8,.2,1);
  }
  .kartenlegen-slot.is-enter{ opacity: 1; transform: none; }
  .kartenlegen-slot.is-dimmed{ opacity: 0.4; filter: saturate(0.5); pointer-events: none; }
  .kartenlegen-slot.is-active .kartenlegen-card-flip::before{
    content: ""; position: absolute; inset: -18px;
    border-radius: 28px; pointer-events: none;
    background: radial-gradient(circle at 50% 50%, rgba(232,201,138,0.42) 0%, rgba(201,168,106,0.0) 62%);
    animation: kartenlegen-idle-halo 2.2s ease-in-out infinite;
    z-index: -1;
  }
  @keyframes kartenlegen-idle-halo{
    0%,100%{ opacity: 0.55; transform: scale(0.97); }
    50%    { opacity: 1;    transform: scale(1.06); }
  }

  .kartenlegen-card-flip{
    position: relative;
    width: 100%; aspect-ratio: 2 / 3; /* nativ 2:3, s. MARGI-19 */
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transition: transform 1.15s cubic-bezier(0.55, 0.15, 0.2, 1.08);
    background: transparent;
    border: 0; padding: 0;
    cursor: pointer;
    appearance: none;
  }
  .kartenlegen-card-flip:focus-visible{
    outline: 2px solid var(--lb-accent);
    outline-offset: 4px;
    border-radius: 14px;
  }
  .kartenlegen-card-flip.is-revealed{
    transform: rotateY(180deg);
    cursor: default;
  }
  .kartenlegen-card-face{
    position: absolute; inset: 0;
    border-radius: 14px;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .kartenlegen-card-face--front{ transform: rotateY(180deg); }
  .kartenlegen-card-face--front img{
    display: block; width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 14px;
  }
  .kartenlegen-card-face--front::after{
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(100deg,
      transparent 25%,
      rgba(255,236,200,0.55) 50%,
      transparent 75%);
    transform: translateX(-120%);
    opacity: 0;
    pointer-events: none;
  }
  .kartenlegen-card-flip.is-revealed .kartenlegen-card-face--front::after{
    animation: kartenlegen-shimmer 1.1s cubic-bezier(.3,.8,.3,1) .2s 1 forwards;
  }
  @keyframes kartenlegen-shimmer{
    0%  { transform: translateX(-120%); opacity: 0; }
    30% { opacity: 1; }
    100%{ transform: translateX(130%); opacity: 0; }
  }
  .kartenlegen-card-face--back{
    display: grid; place-items: center;
    background:
      radial-gradient(120% 80% at 50% 30%, rgba(232,164,120,0.10) 0%, transparent 55%),
      radial-gradient(90% 70% at 50% 100%, rgba(201,168,106,0.08) 0%, transparent 70%),
      linear-gradient(160deg, #17102a 0%, #0a0612 100%);
    border: 1px solid rgba(201,168,106,0.28);
    box-shadow:
      inset 0 0 0 1px rgba(201,168,106,0.08),
      inset 0 0 50px rgba(4,3,12,0.55);
  }
  .kartenlegen-card-face--back::before{
    content: ""; position: absolute; inset: 8px;
    border-radius: 9px;
    border: 1px solid rgba(201,168,106,0.22);
    pointer-events: none;
  }
  .kartenlegen-card-face--back svg{
    position: relative;
    width: 72%; height: 72%;
    opacity: 0.92;
  }

  .kartenlegen-card-title{
    font-family: 'Cormorant Garamond', serif;
    font-size: 15px; line-height: 1.25;
    color: var(--lb-ink);
    letter-spacing: -0.01em;
    text-align: center;
    margin-top: 10px; min-height: 20px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .6s ease-out, transform .6s ease-out;
  }
  .kartenlegen-slot.is-flipped .kartenlegen-card-title{
    opacity: 1; transform: none;
    transition-delay: .45s;
  }
  .kartenlegen-slot.is-flipped::before{
    content: ""; position: absolute;
    top: 42%; left: 50%;
    width: 180%; height: 180%;
    transform: translate(-50%, -50%) scale(0.3);
    background: radial-gradient(circle at 50% 50%, rgba(232,201,138,0.45) 0%, rgba(201,168,106,0.0) 55%);
    opacity: 0;
    pointer-events: none;
    z-index: -1;
    animation: kartenlegen-burst 1.4s ease-out 0.1s 1 forwards;
  }
  @keyframes kartenlegen-burst{
    0%  { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
    40% { opacity: 1; transform: translate(-50%, -50%) scale(1.0); }
    100%{ opacity: 0; transform: translate(-50%, -50%) scale(1.4); }
  }

  /* Decision-Slot: visuelle 4. Tarotkarte (mit Flip-Animation, gold gerahmt)
     oben, Vertiefungs-Label und beide Action-Buttons direkt sichtbar darunter.
     Hybrid aus „Karte sichtbar + Flip beim Aufdecken" UND „Buttons sofort
     wählbar" (Mockup Vertiefungskarte2.png + ursprüngliches Karten-Visual). */
  .kartenlegen-decision-slot{
    margin: 26px auto 0;
    width: 100%; max-width: 340px;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    opacity: 0;
    transform: scale(0.6) translateY(20px);
    transition: opacity .7s cubic-bezier(.2,.8,.2,1),
                transform .8s cubic-bezier(.2,.8,.2,1);
    pointer-events: none;
  }
  /* Innere Tarotkarte behält 3:4-Proportion + Flip-Verhalten.
     cursor: pointer signalisiert, dass auch ein direkter Klick auf die
     Karte die Vertiefung aufdeckt (alternativ zum 'Vertiefung aufdecken'-Button). */
  .kartenlegen-decision-slot .kartenlegen-card-flip{
    position: relative;
    width: 160px; aspect-ratio: 2 / 3; /* nativ 2:3, s. MARGI-19 */
    border-radius: 14px;
    cursor: pointer;
    box-shadow:
      0 22px 34px rgba(4,3,14,0.55),
      0 0 0 1px rgba(232,201,138,0.45),
      0 0 40px rgba(201,168,106,0.25);
  }
  .kartenlegen-decision-slot .kartenlegen-card-flip.is-revealed{
    cursor: default;
  }
  .kartenlegen-decision-label{
    font-family: 'Cormorant Garamond', serif;
    font-size: 15px; line-height: 1.25;
    color: var(--lb-ink);
    letter-spacing: -0.01em;
    text-align: center;
    min-height: 18px;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .4s ease-out, transform .4s ease-out;
  }
  /* Label fade-in, sobald Karte aufgedeckt wurde (oder ab extending-State). */
  .kartenlegen-decision-slot .kartenlegen-card-flip.is-revealed ~ .kartenlegen-decision-label,
  .kartenlegen-stage[data-state="extending"] .kartenlegen-decision-label,
  .kartenlegen-stage[data-state="generating"] .kartenlegen-decision-label,
  .kartenlegen-stage[data-state="complete"] .kartenlegen-decision-slot:not(.is-skipped) .kartenlegen-decision-label{
    opacity: 1; transform: none;
    transition-delay: .45s;
  }
  /* Button-Stack innerhalb des Decision-Slots */
  .kartenlegen-decision-slot .kartenlegen-decision-actions{
    display: flex; flex-direction: column; gap: 10px;
    width: 100%; align-items: stretch;
    margin-top: 4px;
    opacity: 0; transform: translateY(8px);
    transition: opacity .5s ease-out .15s, transform .5s ease-out .15s;
  }
  .kartenlegen-stage[data-state="decision"] .kartenlegen-decision-slot .kartenlegen-decision-actions{
    opacity: 1; transform: none; pointer-events: auto;
  }
  .kartenlegen-stage[data-state="extending"] .kartenlegen-decision-slot .kartenlegen-decision-actions,
  .kartenlegen-stage[data-state="generating"] .kartenlegen-decision-slot .kartenlegen-decision-actions,
  .kartenlegen-stage[data-state="complete"] .kartenlegen-decision-slot .kartenlegen-decision-actions{
    opacity: 0; transform: translateY(-6px) scale(0.98);
    pointer-events: none;
  }

  /* Decision-Panel (Buttons) */
  .kartenlegen-decision-panel{
    max-width: 500px; width: 100%;
    padding: 22px 22px 24px;
    border-radius: 22px;
    border: 1px solid rgba(201,168,106,0.32);
    background:
      radial-gradient(120% 120% at 50% 0%, rgba(201,168,106,0.14), transparent 65%),
      linear-gradient(180deg, rgba(24,18,56,0.55), rgba(10,8,24,0.85));
    text-align: center;
    opacity: 0; transform: translateY(10px);
    transition: opacity .6s ease-out .2s, transform .6s ease-out .2s;
    pointer-events: none;
  }
  .kartenlegen-extend-eyebrow{
    font-family: 'Cormorant Garamond', serif;
    font-size: 20px; letter-spacing: -0.01em;
    color: var(--lb-ink);
    margin-bottom: 8px;
  }
  .kartenlegen-extend-text{
    font-size: 13px; line-height: 1.7;
    color: rgba(61,52,42,0.75);
    margin: 0 auto 18px;
    max-width: 380px;
  }
  .kartenlegen-decision-actions{
    display: flex; flex-direction: column; gap: 10px;
    align-items: center;
  }
  .tarot-draw-cta.is-premium{
    position: relative;
    border: 1px solid rgba(232,201,138,0.9);
    box-shadow:
      0 1px 0 rgba(255,238,200,0.5) inset,
      0 14px 32px rgba(201,168,106,0.28),
      0 0 0 1px rgba(232,201,138,0.35);
  }
  .tarot-draw-cta.is-premium::before{
    content: ""; position: absolute; inset: -6px;
    border-radius: 999px;
    background: radial-gradient(ellipse at center, rgba(232,201,138,0.35) 0%, transparent 70%);
    opacity: 0.8;
    pointer-events: none;
    z-index: -1;
    animation: kartenlegen-premium-glow 2.4s ease-in-out infinite;
  }
  @keyframes kartenlegen-premium-glow{
    0%,100%{ opacity: 0.5; transform: scale(0.97); }
    50%    { opacity: 1;   transform: scale(1.05); }
  }
  .kartenlegen-skip-btn{
    background: transparent;
    border: 1px solid rgba(61,52,42,0.22);
    color: rgba(61,52,42,0.7);
    font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase;
    padding: 10px 20px; border-radius: 999px;
    cursor: pointer;
    transition: color .3s, border-color .3s, background-color .3s;
  }
  .kartenlegen-skip-btn:hover{
    color: var(--lb-ink);
    border-color: rgba(61,52,42,0.4);
    background: rgba(61,52,42,0.04);
  }
  .kartenlegen-skip-btn:focus-visible{ outline: 2px solid var(--lb-accent); outline-offset: 3px; }

  /* Phase L2 — dezenter Taler-Kostenhinweis am Button-Label */
  .tarot-cost{
    font-weight: 400;
    opacity: 0.72;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
    text-transform: none;
    margin-left: 2px;
  }
  .tarot-draw-cta .tarot-cost{ color: rgba(30,20,50,0.78); }
  .kartenlegen-skip-btn .tarot-cost{ color: rgba(61,52,42,0.55); }

  /* Zweizeiliges Label für Tarot-Decision-CTAs */
  .tarot-cta-label{
    display: inline-flex; flex-direction: column; align-items: center;
    gap: 2px; line-height: 1.18;
  }
  .tarot-cta-title{ display: block; }
  .tarot-draw-cta .tarot-cost,
  .kartenlegen-skip-btn .tarot-cost{
    display: block;
    margin-left: 0;
    font-size: 10px;
    letter-spacing: 0.16em;
  }
  /* M8 — Kosten-Aufschluesselung als Hint pro Decision-Button */
  .tarot-cost-breakdown{
    display: block;
    margin-top: 2px;
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: none;
    opacity: 0.72;
  }
  .kartenlegen-skip-btn{
    display: inline-flex; flex-direction: column; align-items: center;
    gap: 2px; line-height: 1.2;
  }

  /* Loading-Dots */
  .kartenlegen-loading{
    display: none;
    align-items: center; justify-content: center; gap: 10px;
    padding: 26px 14px;
    font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
    color: rgba(61,52,42,0.65);
  }
  .kartenlegen-loading-text{ margin-left: 4px; }
  .kartenlegen-loading-dot{
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--lb-gold, #c9a86a);
    animation: kartenlegen-loading-pulse 1.1s ease-in-out infinite;
  }
  .kartenlegen-loading-dot:nth-child(2){ animation-delay: .15s; }
  .kartenlegen-loading-dot:nth-child(3){ animation-delay: .3s; }
  @keyframes kartenlegen-loading-pulse{
    0%,100%{ opacity: .25; transform: scale(0.85); }
    50%    { opacity: 1;   transform: scale(1.2);  }
  }

  /* Antwort-Panel */
  .kartenlegen-interpretation{
    display: none;
    max-width: 520px; width: 100%;
    margin: 20px auto 0;
    padding: 22px 20px 20px;
    background:
      radial-gradient(120% 60% at 50% 0%, rgba(201,168,106,0.10), transparent 60%),
      linear-gradient(180deg, rgba(251,246,236,0.65), rgba(244,237,224,0.85));
    border: 1px solid rgba(61,52,42,0.12);
    border-radius: 22px;
    opacity: 0; transform: translateY(12px);
    transition: opacity .8s ease-out, transform .8s ease-out;
  }
  .kartenlegen-interpretation.is-visible{ opacity: 1; transform: none; }
  .kartenlegen-interpretation-eyebrow{
    font-size: 10px; letter-spacing: .28em; text-transform: uppercase;
    color: var(--lb-accent);
    text-align: center; margin-bottom: 14px;
  }
  .kartenlegen-interpretation-text{
    font-size: 14.5px; line-height: 1.75;
    color: rgba(61,52,42,0.85);
  }
  .kartenlegen-interpretation-text > p{ margin: 0 0 14px; }
  .kartenlegen-interpretation-text > p:last-child{ margin-bottom: 0; }
  /* Phase K.7 #12: Drop-Cap entfernt — erster Buchstabe des Fließtexts
     läuft auf der gleichen Grundlinie wie der Rest. */
  .kartenlegen-interpretation-extend{
    display: none;
    margin-top: 16px; padding-top: 16px;
    border-top: 1px dashed rgba(201,168,106,0.3);
  }
  .kartenlegen-interpretation-extend.is-visible{ display: block; }
  .kartenlegen-interpretation-extend-eyebrow{
    font-size: 9.5px; letter-spacing: .3em; text-transform: uppercase;
    color: var(--lb-accent);
    margin-bottom: 8px; text-align: left;
  }

  /* Reset-Wrap */
  .kartenlegen-reset-wrap{
    display: none;
    justify-content: center;
    margin-top: 24px;
  }

  .kartenlegen-error{
    margin-top: 14px; padding: 10px 14px;
    background: rgba(176,60,60,0.10);
    border: 1px solid rgba(240,130,78,0.28);
    border-radius: 12px;
    color: var(--lb-ember);
    font-size: 12.5px; line-height: 1.5;
  }

  /* ==== State-driven visibility ==== */
  .kartenlegen-stage[data-state="idle"] .kartenlegen-floating{ opacity: 1; }
  .kartenlegen-stage[data-state="idle"] .kartenlegen-cards{ display: none; }
  .kartenlegen-stage[data-state="idle"] .kartenlegen-decision-slot{ display: none; }
  .kartenlegen-stage[data-state="idle"] .kartenlegen-decision-panel{ display: none; }
  .kartenlegen-stage[data-state="idle"] .kartenlegen-loading{ display: none; }

  .kartenlegen-stage[data-state="splitting"] .kartenlegen-floating{
    opacity: 0;
    transform: translateX(-50%) scale(0.6);
  }
  .kartenlegen-stage[data-state="splitting"] .kartenlegen-chips-row,
  .kartenlegen-stage[data-state="splitting"] .kartenlegen-input-row{
    opacity: 0; transform: translateY(-10px); pointer-events: none;
  }
  .kartenlegen-stage[data-state="splitting"] .kartenlegen-decision-slot,
  .kartenlegen-stage[data-state="splitting"] .kartenlegen-decision-panel,
  .kartenlegen-stage[data-state="splitting"] .kartenlegen-loading{ display: none; }

  .kartenlegen-stage[data-state="revealing"] .kartenlegen-floating{ display: none; }
  .kartenlegen-stage[data-state="revealing"] .kartenlegen-chips-row,
  .kartenlegen-stage[data-state="revealing"] .kartenlegen-input-row{
    display: none;
  }
  .kartenlegen-stage[data-state="revealing"] .kartenlegen-cards{
    opacity: 1; transform: none; pointer-events: auto;
  }
  .kartenlegen-stage[data-state="revealing"] .kartenlegen-decision-slot,
  .kartenlegen-stage[data-state="revealing"] .kartenlegen-decision-panel,
  .kartenlegen-stage[data-state="revealing"] .kartenlegen-loading{ display: none; }

  .kartenlegen-stage[data-state="decision"] .kartenlegen-floating{ display: none; }
  .kartenlegen-stage[data-state="decision"] .kartenlegen-chips-row,
  .kartenlegen-stage[data-state="decision"] .kartenlegen-input-row{ display: none; }
  .kartenlegen-stage[data-state="decision"] .kartenlegen-cards{
    opacity: 1; transform: none; pointer-events: none;
  }
  .kartenlegen-stage[data-state="decision"] .kartenlegen-decision-slot{
    opacity: 1; transform: none;
    pointer-events: auto;
    animation: kartenlegen-float-center 4.2s ease-in-out infinite;
  }
  .kartenlegen-stage[data-state="decision"] .kartenlegen-decision-panel{
    opacity: 1; transform: none;
    pointer-events: auto;
  }
  .kartenlegen-stage[data-state="decision"] .kartenlegen-loading{ display: none; }

  /* extending: Karte flippt zur 4. Tarotkarte, Buttons faden weg
     (Buttons werden separat oben gesteuert). Slot bleibt sichtbar, damit
     der Reveal stattfinden kann. */
  .kartenlegen-stage[data-state="extending"] .kartenlegen-floating{ display: none; }
  .kartenlegen-stage[data-state="extending"] .kartenlegen-chips-row,
  .kartenlegen-stage[data-state="extending"] .kartenlegen-input-row{ display: none; }
  .kartenlegen-stage[data-state="extending"] .kartenlegen-cards{ opacity: 1; transform: none; pointer-events: none; }
  .kartenlegen-stage[data-state="extending"] .kartenlegen-decision-slot{
    opacity: 1; transform: none;
    pointer-events: none; animation: none;
  }
  .kartenlegen-stage[data-state="extending"] .kartenlegen-loading{ display: none; }

  /* generating: Loading-Dots erscheinen, Karte bleibt aufgedeckt sichtbar */
  .kartenlegen-stage[data-state="generating"] .kartenlegen-floating{ display: none; }
  .kartenlegen-stage[data-state="generating"] .kartenlegen-chips-row,
  .kartenlegen-stage[data-state="generating"] .kartenlegen-input-row{ display: none; }
  .kartenlegen-stage[data-state="generating"] .kartenlegen-cards{ opacity: 0.85; transform: none; pointer-events: none; }
  .kartenlegen-stage[data-state="generating"] .kartenlegen-decision-slot{ opacity: 0.9; transform: none; pointer-events: none; animation: none; }
  .kartenlegen-stage[data-state="generating"] .kartenlegen-loading{ display: flex; }

  /* complete: Karte bleibt sichtbar (zeigt revealed Front), wenn Skip → hidden */
  .kartenlegen-stage[data-state="complete"] .kartenlegen-floating{ display: none; }
  .kartenlegen-stage[data-state="complete"] .kartenlegen-chips-row,
  .kartenlegen-stage[data-state="complete"] .kartenlegen-input-row{ display: none; }
  .kartenlegen-stage[data-state="complete"] .kartenlegen-cards{ opacity: 1; transform: none; pointer-events: none; }
  .kartenlegen-stage[data-state="complete"] .kartenlegen-decision-slot{ opacity: 1; transform: none; pointer-events: none; animation: none; }
  .kartenlegen-stage[data-state="complete"] .kartenlegen-decision-slot.is-skipped{ display: none; }
  .kartenlegen-stage[data-state="complete"] .kartenlegen-decision-panel{ display: none; }
  .kartenlegen-stage[data-state="complete"] .kartenlegen-loading{ display: none; }
  .kartenlegen-stage[data-state="complete"] .kartenlegen-interpretation{ display: block; }
  .kartenlegen-stage[data-state="complete"] .kartenlegen-reset-wrap{ display: flex; }

  /* Verlauf */
  .kartenlegen-history{
    padding: 18px 18px 20px;
    opacity: 0.92;
  }
  .kartenlegen-history-header{ margin-bottom: 14px; }
  .kartenlegen-history-eyebrow{
    font-size: 10px; letter-spacing: .28em; text-transform: uppercase;
    color: rgba(61,52,42,0.55);
  }
  .kartenlegen-history-list{ display: flex; flex-direction: column; gap: 10px; }
  .kartenlegen-history-empty{
    font-size: 12.5px;
    color: rgba(61,52,42,0.42);
    text-align: center; padding: 14px 8px;
    font-style: italic;
  }
  .kartenlegen-history-pager{
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; padding-top: 10px; margin-top: 8px;
    border-top: 1px solid rgba(61,52,42,0.06);
  }
  .kartenlegen-history-pager-btn{
    appearance: none; cursor: pointer;
    padding: 5px 12px; border-radius: 999px;
    background: transparent;
    border: 1px solid rgba(201,168,106,0.35);
    color: var(--lb-accent);
    font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
    transition: background-color .2s, border-color .2s, transform .15s, opacity .2s;
  }
  .kartenlegen-history-pager-btn:hover{
    background: rgba(201,168,106,0.1);
    border-color: rgba(201,168,106,0.55);
  }
  .kartenlegen-history-pager-btn:active{ transform: translateY(1px); }
  .kartenlegen-history-pager-btn:focus-visible{ outline: 2px solid var(--lb-accent); outline-offset: 2px; }
  .kartenlegen-history-pager-btn:disabled{
    opacity: 0.32; cursor: default;
  }
  .kartenlegen-history-pager-btn:disabled:hover{
    background: transparent; border-color: rgba(201,168,106,0.35);
    transform: none;
  }
  .kartenlegen-history-pager-status{
    font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
    color: rgba(61,52,42,0.55);
    font-variant-numeric: tabular-nums;
  }
  .kartenlegen-history-item{
    border: 1px solid rgba(61,52,42,0.10);
    border-radius: 14px;
    padding: 12px 14px;
    background: rgba(244,237,224,0.35);
    transition: border-color .3s, background-color .3s;
  }
  .kartenlegen-history-item[open]{
    border-color: rgba(201,168,106,0.25);
    background: rgba(251,246,236,0.55);
  }
  .kartenlegen-history-summary{
    list-style: none;
    display: flex; gap: 12px; align-items: flex-start;
    cursor: pointer;
    font-size: 12.5px;
    color: rgba(61,52,42,0.78);
  }
  .kartenlegen-history-summary::-webkit-details-marker{ display: none; }
  .kartenlegen-history-thumbs{
    display: flex; gap: 4px;
    flex-shrink: 0;
  }
  .kartenlegen-history-thumbs img{
    width: 26px; height: 38px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid rgba(201,168,106,0.18);
  }
  .kartenlegen-history-thumbs img.is-extend{
    border-color: rgba(232,201,138,0.55);
    box-shadow: 0 0 6px rgba(201,168,106,0.35);
  }
  .kartenlegen-history-meta{
    display: flex; flex-direction: column; gap: 2px;
    flex: 1; min-width: 0;
  }
  .kartenlegen-history-date{
    font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
    color: rgba(61,52,42,0.45);
  }
  .kartenlegen-history-question{
    font-family: 'Cormorant Garamond', serif;
    font-size: 15px; line-height: 1.35;
    color: var(--lb-ink);
    font-style: italic;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  .kartenlegen-history-body{
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed rgba(61,52,42,0.12);
    font-size: 12.5px; line-height: 1.7;
    color: rgba(61,52,42,0.72);
  }
  .kartenlegen-history-body > p{ margin: 0 0 10px; }
  .kartenlegen-history-extend{
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(201,168,106,0.18);
    font-size: 12px; line-height: 1.7;
    color: rgba(61,52,42,0.68);
  }
  .kartenlegen-history-extend > p{ margin: 0 0 8px; }
  .kartenlegen-history-extend::before{
    content: "Vertiefung · ";
    color: var(--lb-accent);
    font-size: 9.5px; letter-spacing: .28em; text-transform: uppercase;
  }
  .kartenlegen-history-stale{
    margin-top: 10px; padding: 8px 12px;
    background: rgba(201,168,106,0.06);
    border: 1px solid rgba(201,168,106,0.22);
    border-radius: 10px;
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
    font-size: 11.5px; line-height: 1.5;
    color: rgba(61,52,42,0.75);
  }
  .kartenlegen-history-stale-text{ flex: 1; min-width: 160px; }
  .kartenlegen-history-stale-btn{
    background: transparent;
    border: 1px solid rgba(201,168,106,0.4);
    color: var(--lb-accent);
    font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
    padding: 6px 12px; border-radius: 999px;
    cursor: pointer;
    transition: background-color .3s, color .3s, border-color .3s;
  }
  .kartenlegen-history-stale-btn:hover{
    background: rgba(201,168,106,0.12);
    color: var(--lb-ink);
    border-color: rgba(232,201,138,0.6);
  }
  .kartenlegen-history-stale-btn:focus-visible{ outline: 2px solid var(--lb-accent); outline-offset: 2px; }

  @media (min-width: 520px){
    .kartenlegen-cards{ gap: 14px; padding: 12px 10px 8px; }
    .kartenlegen-card-title{ font-size: 16px; margin-top: 12px; }
    .kartenlegen-floating{ width: 170px; top: 10px; }
  }
  @media (min-width: 768px){
    .kartenlegen-cards{ max-width: 560px; margin: 0 auto; gap: 18px; }
    .kartenlegen-floating{ width: 190px; }
    .kartenlegen-decision-actions{ flex-direction: row; gap: 14px; }
  }
  @media (prefers-reduced-motion: reduce){
    .kartenlegen-floating,
    .kartenlegen-slot,
    .kartenlegen-card-flip,
    .kartenlegen-interpretation,
    .kartenlegen-decision-slot,
    .kartenlegen-decision-panel,
    .kartenlegen-chips-top,
    .kartenlegen-chips-bottom{ transition: none; animation: none; }
    .kartenlegen-slot.is-flipped::before,
    .kartenlegen-slot.is-active .kartenlegen-card-flip::before{ animation: none; }
  }

  /* ───────────────────────────────────────────────────────────────────
     Design-handoff additions — Trimargi Mobile (2026-04).
     Layer targeted refinements on top of the existing palette:
       · twilight-mode (post-login) shifts accent radials to rose/peach
       · greeting block with weekday kicker + italic-gold name
       · full-width chat hero tile with rotating orbital backdrop
       · epistolary "Brief" typography for assistant chat bubbles
       · locked-preview for Moon/Asc until registered
       · typographic glyphs in natal orbital nav
       · small orbital emblem above auth modal title
     ─────────────────────────────────────────────────────────────── */

  /* (Twilight backdrop is handled automatically via --lb-* vars
     on body.twilight-mode; no per-class .cosmos override needed.) */

  /* Dashboard greeting — kicker + italic gold name. Replaces the
     centered panel with the tighter editorial layout from the design. */
  .dash-greeting{ padding: 6px 2px 14px; }
  .dash-greeting .kicker{
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 10px; letter-spacing: .28em; text-transform: uppercase;
    color: var(--lb-accent);
  }
  .dash-greeting h2{
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500; font-size: 30px;
    letter-spacing: -0.03em; line-height: 1.1;
    color: var(--lb-ink); margin-top: 6px;
  }
  .dash-greeting h2 .name{
    font-style: italic; color: var(--lb-accent); font-weight: 500;
  }
  .dash-greeting .email-line{
    font-size: 11.5px; color: rgba(107,94,79,0.8); margin-top: 8px;
  }
  .dash-greeting .email-line .email{ color: var(--lb-accent); }

  /* Hero chat tile — full-width, elevated, rotating orbital backdrop. */
  .tile-chat-hero{
    position: relative; overflow: hidden; display: block;
    border-radius: 22px;
    padding: 18px 18px 18px;
    margin-top: 14px;
    background:
      linear-gradient(135deg, rgba(201,168,106,0.20), rgba(251,246,236,0.6)),
      linear-gradient(180deg, rgba(251,246,236,0.92), rgba(7,6,17,0.95));
    border: 1px solid rgba(201,168,106,0.42);
    box-shadow:
      0 24px 50px -24px rgba(0,0,0,0.8),
      0 0 60px -14px rgba(201,168,106,0.22);
    text-decoration: none; color: inherit;
    transition: transform .25s var(--ease-spring),
                border-color .25s var(--ease-spring),
                box-shadow .3s var(--ease-spring);
  }
  .tile-chat-hero:hover{
    transform: translateY(-2px);
    border-color: rgba(201,168,106,0.6);
    box-shadow:
      0 28px 60px -24px rgba(0,0,0,0.85),
      0 0 80px -12px rgba(201,168,106,0.3);
  }
  .tile-chat-hero:focus-visible{
    outline: 2px solid var(--lb-accent); outline-offset: 3px;
  }
  .tile-chat-hero:active{ transform: translateY(0); }
  .tile-chat-hero .tile-orbits{
    position: absolute; top: -30px; right: -30px;
    width: 180px; height: 180px; opacity: 0.55;
    pointer-events: none;
  }
  .tile-chat-hero .tile-orbits .orbit-spin-hero{
    transform-origin: 50% 50%;
    animation: lb-spin 180s linear infinite;
  }
  .tile-chat-hero .tile-content{ position: relative; z-index: 1; }
  .tile-chat-hero .tile-kicker{
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 10px; letter-spacing: .28em; text-transform: uppercase;
    color: var(--lb-accent);
  }
  .tile-chat-hero .tile-headline{
    font-family: 'Cormorant Garamond', serif;
    font-size: 26px; color: var(--lb-ink);
    letter-spacing: -0.02em; line-height: 1.12;
    margin-top: 6px;
  }
  .tile-chat-hero .tile-subline{
    font-size: 12.5px; color: rgba(107,94,79,0.92);
    line-height: 1.55; margin-top: 6px; margin-bottom: 14px;
  }
  .tile-chat-hero .tile-cta{
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: 999px;
    background: var(--lb-accent); color: #10091c;
    font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
    transition: transform .2s var(--ease-spring);
  }
  .tile-chat-hero:hover .tile-cta{ transform: translateX(2px); }

  /* Chat "Brief" voice — assistant bubbles wear Cormorant while logged in,
     echoing the epistolary ChatV3 from the design. User bubbles stay Inter
     so the typographic contrast reads as "letter" vs. "reply". */
  body.twilight-mode .chat-bubble.bubble-assistant{
    font-family: 'Cormorant Garamond', serif;
    font-size: 16.5px;
    line-height: 1.72;
    letter-spacing: -0.005em;
    padding-top: 12px; padding-bottom: 14px;
  }

  /* Natal orbital nodes — swap the icon SVGs for typographic astrological
     glyphs (Venus, Mars, Moon, Sun). Tracks the design more faithfully. */
  .orbital-glyph{
    font-family: 'Cormorant Garamond', 'Segoe UI Symbol', 'Symbola', serif;
    font-size: 26px; line-height: 1;
    font-variant-emoji: text;
    display: inline-block;
    transform: translateY(-1px);
  }
  .orbital-node.is-active .orbital-glyph{
    color: inherit; /* already picks up active-state color */
  }

  /* Auth modal — small orbital emblem above the title. */
  .auth-orbital{
    display: flex; justify-content: center;
    margin-bottom: 10px; margin-top: -2px;
    pointer-events: none;
  }
  .auth-orbital svg{ display: block; }
  .auth-orbital .orbit-spin-auth{
    transform-origin: 50% 50%;
    animation: lb-spin 180s linear infinite;
  }

  @media (prefers-reduced-motion: reduce){
    .chat-typing span{ animation: none; opacity: 0.55; }
    .tile-chat-hero .tile-orbits .orbit-spin-hero,
    .auth-orbital .orbit-spin-auth{ animation: none; }
  }

  /* ──────────────────────────────────────────────────────────────────
     Desktop responsiveness (>= 1024px) — Phase L9
     Mobile-first base bleibt unangetastet. Hier nur additive Anpassungen
     für große Viewports, damit die App auf Desktop nicht "verloren" wirkt.
     :has() wird verwendet, um die drei App-States zu erkennen:
       Landing  = #formPanel sichtbar  → Hero links / Form rechts (2-Spalten)
       Results  = #results sichtbar    → SignCards in 3-Spalten-Grid
       Dashboard= #dashboardPanel sichtbar → Tile-Grid kann breiter atmen
     ────────────────────────────────────────────────────────────────── */
  @media (min-width: 1024px){
    .shell{ max-width: 1080px; }

    /* ── Landing (Phase 8 v4): Hero und Form fließen vertikal, Hero hat
       sein eigenes internes 2-Col Grid auf Desktop (siehe .tm-hero @media). ─ */
    body main:has(> #formPanel:not(.hide)) > #formPanel{
      max-width: 520px;
      margin-left: auto;
      margin-right: auto;
    }

    /* ── Results (Richtung C): die "Schwellen"-Karte bleibt als kompakte,
       zentrierte Einheit (max-width in .results-c selbst). Auf Desktop nur
       leicht breiter, damit das Kopfband/Body luftiger atmen. ─────────── */
    #results.results-c{
      max-width: 460px;
    }

    /* ── Dashboard: zentriert mit komfortabler Breite ─────────────── */
    body main:has(> #dashboardPanel:not(.hide)) > header,
    body main:has(> #dashboardPanel:not(.hide)) > #dashboardPanel{
      max-width: 720px;
      margin-left: auto;
      margin-right: auto;
    }
  }

  /* ── Auth-Modal bleibt schmal & zentriert auf allen Größen ─────── */

  /* ──────────────────────────────────────────────────────────────────
     Toast-Notifications (Phase L9b)
     Globaler Helper: window.lb.toast(msg, kind, duration)
     kind: 'ok' | 'error' | 'info'  (default: 'ok')
     ────────────────────────────────────────────────────────────────── */
  .lb-toast-host{
    position: fixed;
    bottom: max(20px, env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    display: flex; flex-direction: column-reverse;
    gap: 10px;
    pointer-events: none;
    width: max-content; max-width: calc(100% - 24px);
  }
  .lb-toast{
    pointer-events: auto;
    padding: 12px 18px;
    border-radius: 14px;
    background:
      radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--lb-accent) 14%, transparent), transparent 60%),
      linear-gradient(180deg, rgba(251,246,236,0.96), rgba(244,237,224,0.98));
    border: 1px solid rgba(61,52,42,0.18);
    box-shadow:
      0 12px 40px -10px rgba(0,0,0,0.75),
      0 0 0 1px rgba(255,255,255,0.04) inset,
      0 0 24px -6px color-mix(in srgb, var(--lb-accent) 24%, transparent);
    color: var(--lb-ink);
    font-size: 13px; line-height: 1.5; letter-spacing: .01em;
    display: flex; align-items: center; gap: 10px;
    min-height: 44px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transform: translateY(10px) scale(.96);
    transition: opacity .3s var(--ease-spring), transform .3s var(--ease-spring);
  }
  .lb-toast.show{ opacity: 1; transform: translateY(0) scale(1); }
  .lb-toast::before{
    content: '';
    width: 8px; height: 8px; border-radius: 999px;
    flex-shrink: 0;
    background: var(--lb-accent);
    box-shadow: 0 0 12px color-mix(in srgb, var(--lb-accent) 70%, transparent);
  }
  .lb-toast.error{
    border-color: rgba(217,122,78,0.42);
    box-shadow:
      0 12px 40px -10px rgba(0,0,0,0.75),
      0 0 0 1px rgba(255,255,255,0.04) inset,
      0 0 24px -6px rgba(217,122,78,0.32);
  }
  .lb-toast.error::before{
    background: var(--lb-ember);
    box-shadow: 0 0 12px rgba(217,122,78,0.7);
  }
  .lb-toast.info::before{
    background: var(--lb-mist);
    box-shadow: 0 0 10px rgba(107,94,79,0.45);
  }
  @media (prefers-reduced-motion: reduce){
    .lb-toast{ transition: opacity .15s linear; transform: none !important; }
  }
  /* Trimargi UX repair pass -------------------------------------------------
     Makes the signed-in app use one readable paper system instead of mixing
     pale pages with low-contrast dark legacy components. */
  body.signed-in{
    --lb-base: #f8f1e4;
    --lb-night: #efe4cf;
    --lb-surface: #fffaf0;
    --lb-ink: #33271e;
    --lb-mist: #665746;
    --lb-accent: #8f7243;
    --lb-accent-soft: #6f5732;
    --lb-ember: #a84830;
    --lb-rose: #9c6f62;
    --tm-ink: #33271e;
    --tm-muted: #665746;
    --tm-accent: #8f7243;
    --tm-surface: #fffaf0;
    background: linear-gradient(180deg, #f8f1e4 0%, #efe4cf 100%);
    color: var(--tm-ink);
  }
  body.signed-in .cosmos{
    background:
      radial-gradient(80% 60% at 12% 4%, rgba(183,154,102,0.12), transparent 56%),
      linear-gradient(180deg, rgba(255,250,240,0.96), rgba(239,228,207,0.96));
  }
  body.signed-in .stars{ display: none; }
  body.signed-in .shell{ max-width: 960px; }
  @media (min-width: 1024px){
    body.signed-in main:has(> #dashboardPanel:not(.hide)) > header,
    body.signed-in main:has(> #dashboardPanel:not(.hide)) > #dashboardPanel{
      max-width: 960px;
      margin-left: auto;
      margin-right: auto;
    }
  }
  body.signed-in .app-header{
    background: rgba(248,241,228,0.92);
    border-bottom: 1px solid rgba(151,123,76,0.28);
  }
  body.signed-in .btn-login{ display: none; }
  body.signed-in #brandMark .display{
    color: var(--tm-ink);
    text-transform: none;
    font-size: clamp(24px, 3vw, 34px);
  }
  body.signed-in .brand-logo{ width: 28px; height: 28px; }
  body.signed-in .taler-display,
  body.signed-in .burger-btn,
  body.signed-in .view-back{
    color: var(--tm-ink);
    background: rgba(255,250,240,0.86);
    border-color: rgba(151,123,76,0.42);
  }
  body.signed-in .taler-display{
    min-width: 128px;
    max-width: 100%;
    white-space: nowrap;
    justify-content: center;
    min-height: 48px;
    font-variant-numeric: tabular-nums;
  }
  body.signed-in .burger-btn,
  body.signed-in .view-back{
    width: 48px;
    height: 48px;
  }
  body.signed-in .view-header{ min-height: 48px; margin: 10px 0 18px; }
  body.signed-in .view-title{
    color: var(--tm-ink);
    font-size: clamp(28px, 5vw, 44px);
    line-height: 1.05;
  }
  body.signed-in .panel,
  body.signed-in .chat-panel,
  body.signed-in .chat-sessions-panel,
  body.signed-in .kartenlegen-history,
  body.signed-in .taler-breakdown-card,
  body.signed-in .taler-shop-intro,
  body.signed-in .subscription-intro{
    background: rgba(255,250,240,0.92);
    border: 1px solid rgba(151,123,76,0.46);
    border-radius: 8px;
    box-shadow:
      0 24px 54px -38px rgba(70,51,31,0.28),
      0 0 0 1px rgba(255,255,255,0.62) inset;
    color: var(--tm-ink);
    backdrop-filter: none;
  }
  body.signed-in .dash-greeting{ padding: clamp(26px, 5vw, 48px) 0 clamp(24px, 4vw, 40px); }
  body.signed-in .dash-greeting .kicker,
  body.signed-in .chat-sessions-eyebrow,
  body.signed-in .kartenlegen-history-eyebrow,
  body.signed-in .taler-shop-kicker,
  body.signed-in .subscription-kicker,
  body.signed-in .taler-breakdown-kicker{
    color: rgba(93,75,48,0.78);
    letter-spacing: 0.16em;
  }
  body.signed-in .dash-greeting h2{
    font-size: clamp(40px, 8vw, 86px);
    color: var(--tm-ink);
  }
  body.signed-in .tagesimpuls{
    padding: clamp(24px, 5vw, 46px) clamp(18px, 5vw, 58px);
    background: rgba(255,250,240,0.92);
    border-color: rgba(151,123,76,0.58);
    border-radius: 8px;
  }
  body.signed-in .tagesimpuls::before{ border-color: rgba(151,123,76,0.42); }
  body.signed-in .tagesimpuls h3{ font-size: clamp(34px, 7vw, 64px); color: var(--tm-ink); }
  body.signed-in .tile-chat-hero{
    min-height: clamp(230px, 28vw, 348px);
    padding: clamp(26px, 4vw, 46px);
    border-radius: 8px;
    border-color: rgba(151,123,76,0.54);
    background:
      radial-gradient(44% 82% at 92% 18%, rgba(143,114,67,0.16), transparent 66%),
      linear-gradient(135deg, rgba(255,250,240,0.98), rgba(232,218,194,0.96));
    box-shadow:
      0 30px 70px -48px rgba(70,51,31,0.36),
      0 0 0 1px rgba(255,255,255,0.68) inset;
  }
  body.signed-in .tile-chat-hero .tile-content{
    display: grid;
    align-content: center;
    min-height: 100%;
    max-width: min(680px, calc(100% - 180px));
  }
  body.signed-in .tile-chat-hero .tile-kicker{
    color: rgba(93,75,48,0.76);
    font-size: 12px;
    letter-spacing: 0.26em;
  }
  body.signed-in .tile-chat-hero .tile-headline{
    color: var(--tm-ink);
    font-size: clamp(38px, 5.4vw, 68px);
    line-height: 0.98;
    margin-top: 16px;
  }
  body.signed-in .tile-chat-hero .tile-subline{
    color: rgba(51,39,30,0.78);
    font-size: clamp(15px, 2vw, 22px);
    max-width: 640px;
    margin-top: 18px;
    margin-bottom: 28px;
  }
  body.signed-in .tile-chat-hero .tile-cta{
    width: fit-content;
    min-height: 48px;
    padding: 12px 24px;
    background: #e1bd9b;
    color: #171019;
    box-shadow: 0 14px 28px -18px rgba(70,51,31,0.58);
  }
  body.signed-in .tile-chat-hero .tile-orbits{
    top: 24px;
    right: 34px;
    width: clamp(150px, 18vw, 230px);
    height: clamp(150px, 18vw, 230px);
    opacity: 0.36;
  }
  body.signed-in #dashHome > .grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 18px;
  }
  body.signed-in #dashHome .result-card.tile-clickable{
    min-height: 168px;
    padding: 24px 24px 22px;
    border-radius: 8px;
    display: grid;
    grid-template-rows: 1fr auto;
    background:
      linear-gradient(180deg, rgba(255,250,240,0.95), rgba(236,224,203,0.88));
    border-color: rgba(151,123,76,0.42);
    color: var(--tm-ink);
    box-shadow: 0 22px 48px -42px rgba(70,51,31,0.34);
  }
  body.signed-in #dashHome .result-card .kind{
    color: rgba(93,75,48,0.72);
    font-size: 11px;
    letter-spacing: 0.24em;
  }
  body.signed-in #dashHome .result-card .name{
    color: var(--tm-ink);
    font-size: clamp(28px, 3.4vw, 42px) !important;
    line-height: 1.02 !important;
    margin-top: 14px;
  }
  body.signed-in #dashHome .result-card .text-gold{
    color: var(--tm-accent);
    font-size: 11px;
    letter-spacing: 0.22em;
  }
  body.signed-in .tagesimpuls .impuls-body,
  body.signed-in .dashboard-mantra,
  body.signed-in .taler-shop-sub,
  body.signed-in .subscription-sub,
  body.signed-in .taler-breakdown-hint,
  body.signed-in .chat-empty,
  body.signed-in .chat-empty-hint,
  body.signed-in .kartenlegen-disclaimer,
  body.signed-in .kartenlegen-history-body,
  body.signed-in .kartenlegen-history-extend{
    color: rgba(51,39,30,0.76);
  }
  body.signed-in .dash-astro-icon{
    width: clamp(88px, 13vw, 136px);
    height: clamp(88px, 13vw, 136px);
  }
  body.signed-in .dash-sky-lines{ font-size: clamp(22px, 4vw, 34px); }
  body.signed-in .dashboard-actions{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }
  body.signed-in .dashboard-feature-card,
  body.signed-in .tile-chat-hero.dashboard-feature-card{
    aspect-ratio: 1 / 0.86;
    min-height: 0;
    max-height: 270px;
    gap: clamp(14px, 2.5vw, 24px);
  }
  body.signed-in .dashboard-feature-title{
    font-size: clamp(28px, 4.2vw, 48px);
    overflow-wrap: normal;
  }
  body.signed-in .dashboard-feature-icon{
    width: clamp(62px, 8vw, 94px);
    height: clamp(62px, 8vw, 94px);
  }
  body.signed-in .chat-panel{
    min-height: min(680px, 72svh);
    max-height: none;
    padding: 20px;
  }
  body.signed-in .chat-empty-title{
    color: var(--tm-ink);
    font-size: clamp(22px, 5vw, 34px);
  }
  body.signed-in .chat-starter,
  body.signed-in .chat-mode-chip,
  body.signed-in .chat-session-item,
  body.signed-in .kartenlegen-chip,
  body.signed-in .kartenlegen-history-item{
    background: rgba(255,255,255,0.52);
    border-color: rgba(151,123,76,0.34);
    color: var(--tm-ink);
  }
  body.signed-in .chat-starter,
  body.signed-in .chat-mode-chip,
  body.signed-in .chat-new-btn,
  body.signed-in .chat-sessions-pager-btn,
  body.signed-in .kartenlegen-history-pager-btn{
    min-height: 44px;
  }
  body.signed-in .chat-mode-chip.is-active,
  body.signed-in .chat-session-item.is-active{
    background: rgba(143,114,67,0.14);
    border-color: rgba(151,123,76,0.62);
    color: var(--tm-ink);
    font-weight: 600;
  }
  body.signed-in .chat-mode-chips{
    gap: 8px;
    padding: 8px 0 10px;
    overflow: visible;
  }
  body.signed-in .chat-mode-chip{
    min-width: 0;
    padding: 8px 14px;
    color: rgba(51,39,30,0.78);
    line-height: 1.15;
  }
  body.signed-in .chat-mode-chip .chip-cost,
  body.signed-in .chat-session-meta,
  body.signed-in .chat-sessions-pager-status,
  body.signed-in .kartenlegen-history-pager-status{
    color: rgba(51,39,30,0.58);
  }
  body.signed-in .chat-mode-chip.is-active .chip-cost{ color: rgba(51,39,30,0.62); }
  body.signed-in .chat-mode-chip.is-locked{
    opacity: 1;
    border-color: rgba(151,123,76,0.34);
    background: rgba(255,255,255,0.42);
  }
  body.signed-in .chat-mode-chip .chip-upgrade-hint{
    color: var(--tm-accent);
    white-space: nowrap;
  }
  body.signed-in #chatInput,
  body.signed-in .kartenlegen-input{
    min-height: 48px;
    background: rgba(255,255,255,0.64);
    border-color: rgba(151,123,76,0.4);
    color: var(--tm-ink);
    font-family: 'Inter', sans-serif;
    font-size: 15px;
  }
  body.signed-in #chatInput::placeholder,
  body.signed-in .kartenlegen-input::placeholder{ color: rgba(51,39,30,0.5); }
  body.signed-in .chat-send{ min-width: 58px; height: 48px; border-radius: 14px; }
  body.signed-in .chat-session-row{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 52px;
    gap: 10px;
  }
  body.signed-in .chat-session-item{
    min-height: 74px;
    border-radius: 8px;
    padding: 12px 14px;
  }
  body.signed-in .chat-session-title{
    color: var(--tm-ink);
    font-size: 18px;
    line-height: 1.25;
  }
  body.signed-in .chat-session-meta{
    flex-wrap: wrap;
    gap: 4px 8px;
    font-size: 12px;
    letter-spacing: 0.06em;
  }
  body.signed-in .chat-session-delete{
    width: 52px;
    min-height: 100%;
    border-radius: 8px;
    background: rgba(255,255,255,0.34);
    border-color: rgba(151,123,76,0.28);
    color: rgba(51,39,30,0.52);
  }
  body.signed-in .chat-session-delete svg{ width: 20px; height: 20px; }
  body.signed-in .horoskop-panel{ padding: clamp(18px, 4vw, 34px); }
  body.signed-in .horoskop-layout{
    gap: clamp(18px, 3vw, 42px);
  }
  body.signed-in .horoskop-chapter-selector,
  body.signed-in .horoskop-chapter-item,
  body.signed-in .horoskop-sheet-option{
    background: rgba(255,255,255,0.58);
    border-color: rgba(151,123,76,0.34);
    color: var(--tm-ink);
  }
  body.signed-in .horoskop-chapter-selector{
    border-radius: 8px;
    min-height: 104px;
    box-shadow: 0 18px 40px -34px rgba(70,51,31,0.38);
  }
  body.signed-in .horoskop-selector-meta,
  body.signed-in .horoskop-reading-meta,
  body.signed-in .horoskop-sheet-kicker{
    color: rgba(93,75,48,0.78);
    letter-spacing: 0.16em;
  }
  body.signed-in .horoskop-selector-title,
  body.signed-in .horoskop-reading-head h2,
  body.signed-in .horoskop-sheet-head h2{
    color: var(--tm-ink);
  }
  body.signed-in .horoskop-selector-sub,
  body.signed-in .horoskop-reading-head p,
  body.signed-in .horoskop-chapter-sub{
    color: rgba(51,39,30,0.66);
  }
  body.signed-in .horoskop-chapter-icon{
    color: var(--tm-accent);
    border-color: rgba(151,123,76,0.28);
    background: rgba(255,250,240,0.68);
  }
  body.signed-in .horoskop-chapter-item,
  body.signed-in .horoskop-sheet-option{
    border-radius: 8px;
  }
  body.signed-in .horoskop-chapter-item.is-active,
  body.signed-in .horoskop-sheet-option.is-active{
    background: rgba(143,114,67,0.15);
    border-color: rgba(151,123,76,0.68);
  }
  body.signed-in .horoskop-sheet-panel{
    background: rgba(255,250,240,0.98);
    border-color: rgba(151,123,76,0.42);
    color: var(--tm-ink);
  }
  body.signed-in .horoskop-sheet-close{
    color: var(--tm-ink);
    background: rgba(255,255,255,0.74);
    border-color: rgba(151,123,76,0.34);
  }
  body.signed-in .horoskop-orbital{
    aspect-ratio: auto;
    max-width: none;
    margin: 0 0 18px;
    display: block;
    min-height: 0;
  }
  body.signed-in .orbital-ring,
  body.signed-in .orbital-center,
  body.signed-in .orbital-caption{ display: none; }
  body.signed-in .orbital-wheel{
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    animation: none;
    pointer-events: auto;
  }
  body.signed-in .orbital-node{
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    transform: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 50px;
    padding: 10px 18px;
    border: 1px solid rgba(151,123,76,0.34);
    border-radius: 999px;
    background: rgba(255,255,255,0.5);
    flex: 0 1 auto;
  }
  body.signed-in .orbital-node > *{ animation: none; transform: none; }
  body.signed-in .orbital-node-btn{
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    color: var(--tm-accent);
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  body.signed-in .orbital-node-btn svg{
    width: 28px;
    height: 28px;
  }
  body.signed-in .orbital-node-label{
    position: static;
    transform: none;
    color: rgba(51,39,30,0.72);
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: none;
    white-space: nowrap;
  }
  body.signed-in .orbital-node.is-active{
    background: rgba(183,154,102,0.16);
    border-color: rgba(151,123,76,0.66);
  }
  body.signed-in .orbital-node.is-active .orbital-node-label{
    color: var(--tm-ink);
    font-weight: 600;
  }
  body.signed-in .horoskop-content,
  body.signed-in .horoskop-body{
    color: rgba(51,39,30,0.82);
    font-size: 17px;
    line-height: 1.75;
    min-height: 0;
    padding: 0;
  }
  body.signed-in .kartenlegen-stage{ min-height: 430px; }
  body.signed-in .kartenlegen-cards{
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
  }
  body.signed-in .kartenlegen-card-title,
  body.signed-in .kartenlegen-decision-label,
  body.signed-in .kartenlegen-history-question{ color: var(--tm-ink); }
  body.signed-in .kartenlegen-interpretation{
    background: rgba(255,250,240,0.92);
    border-color: rgba(151,123,76,0.4);
  }
  body.signed-in .kartenlegen-interpretation-text{
    color: rgba(51,39,30,0.82);
    font-size: 16px;
  }
  /* Pricing-Modell 2026-05-27 — Card-Layout vertikal (Label → Tagline →
     Taler-Amount → Tier-Preise-Ladder → Button). Vorher 2x2-Grid mit
     "label save / values button"; Savings-Chip ist obsolet (uniform
     50€/1000T-Rate), Ladder ersetzt die Pseudo-Ersparnis. */
  body.signed-in .taler-package-card{
    display: flex; flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 18px 16px;
    background: rgba(255,250,240,0.9);
    border-color: rgba(151,123,76,0.4);
    border-radius: 8px;
  }
  body.signed-in .taler-package-label{
    overflow: visible;
    white-space: normal;
    color: var(--tm-ink);
    font-size: 22px;
  }
  body.signed-in .taler-package-tagline{
    font-size: 12.5px;
    color: rgba(51,39,30,0.62);
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.02em;
    margin-bottom: 2px;
  }
  body.signed-in .taler-package-values{ flex-wrap: wrap; }
  body.signed-in .taler-package-amount{
    color: var(--tm-accent);
    font-size: 22px;
  }
  body.signed-in .taler-package-btn{
    min-height: 44px;
    color: var(--tm-ink);
    background: rgba(183,154,102,0.14);
    border-color: rgba(151,123,76,0.5);
    align-self: stretch;
    margin-top: 4px;
  }
  @media (max-width: 760px){
    html, body{ max-width: 100%; overflow-x: clip; }
    body.signed-in .shell{
      width: auto;
      max-width: 100%;
      margin-left: 0;
      margin-right: 0;
      padding: 14px 14px 56px;
    }
    body.signed-in .app-header{
      margin: -14px -14px 8px;
      padding: 12px 14px;
      gap: 10px;
    }
    body.signed-in #headerRight{ gap: 8px; }
    body.signed-in .btn-login{ display: none; }
    body.signed-in .taler-display{
      min-width: 72px;
      padding: 4px 10px;
      font-size: 13px;
      min-height: 34px;
      gap: 5px;
    }
    body.signed-in .taler-display .taler-icon{ font-size: 13px; }
    body.signed-in .burger-btn{ width: 34px; height: 34px; }
    body.signed-in .dash-greeting{
      text-align: left;
      padding: 26px 4px 24px;
    }
    body.signed-in .dash-greeting .kicker{
      justify-content: flex-start;
      margin-bottom: 12px;
    }
    body.signed-in .dash-greeting h2{
      font-size: clamp(38px, 13vw, 54px);
    }
    body.signed-in .tagesimpuls{ text-align: left; }
    body.signed-in .tagesimpuls::before{ inset: 8px; }
    body.signed-in .dash-astro-icon{ margin-left: 0; }
    body.signed-in .dash-sky-lines{
      font-size: 24px;
      margin-left: 0;
    }
    body.signed-in .dashboard-actions{
      grid-template-columns: 1fr;
      gap: 14px;
      margin-top: 28px;
    }
    body.signed-in .tile-chat-hero{
      min-height: 260px;
      padding: 24px 22px;
    }
    body.signed-in .tile-chat-hero .tile-content{
      max-width: none;
      padding-right: 74px;
    }
    body.signed-in .tile-chat-hero .tile-orbits{
      width: 112px;
      height: 112px;
      top: 14px;
      right: 8px;
      opacity: 0.28;
    }
    body.signed-in .tile-chat-hero .tile-headline{
      font-size: clamp(34px, 11vw, 46px);
    }
    body.signed-in .tile-chat-hero .tile-subline{
      font-size: 15px;
      margin-bottom: 22px;
    }
    body.signed-in #dashHome > .grid{
      grid-template-columns: 1fr;
      gap: 14px;
    }
    body.signed-in #dashHome .result-card.tile-clickable{
      min-height: 132px;
      padding: 20px;
    }
    body.signed-in #dashHome .result-card .name{
      font-size: 32px !important;
    }
    body.signed-in .dashboard-feature-card,
    body.signed-in .tile-chat-hero.dashboard-feature-card{
      aspect-ratio: auto;
      min-height: 104px;
      max-height: none;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 64px;
      justify-items: start;
      align-items: center;
      text-align: left;
      padding: 18px 20px;
    }
    body.signed-in .dashboard-feature-title{ font-size: 34px; }
    body.signed-in .dashboard-feature-icon{
      width: 56px;
      height: 56px;
      justify-self: end;
    }
    body.signed-in .chat-panel{
      min-height: 68svh;
      padding: 16px;
    }
    body.signed-in .chat-mode-chips{
      display: grid;
      grid-template-columns: 1fr;
      padding-inline: 0;
    }
    body.signed-in .chat-mode-chip{
      justify-content: center;
      width: 100%;
    }
    body.signed-in .chat-sessions-head{
      flex-direction: column;
      align-items: stretch;
    }
    body.signed-in .chat-new-btn{
      justify-content: center;
      width: 100%;
    }
    body.signed-in .chat-sessions-pager,
    body.signed-in .kartenlegen-history-pager{
      display: grid;
      grid-template-columns: 1fr auto 1fr;
    }
    body.signed-in .orbital-wheel{
      overflow-x: auto;
      flex-wrap: nowrap;
      padding-bottom: 4px;
      scrollbar-width: none;
    }
    body.signed-in .orbital-wheel::-webkit-scrollbar{ display: none; }
    body.signed-in .orbital-node{ flex: 0 0 auto; }
    body.signed-in .kartenlegen-stage{
      min-height: 380px;
      gap: 12px;
    }
    body.signed-in .kartenlegen-card-stage{ min-height: 210px; }
    body.signed-in .kartenlegen-floating{ width: 128px; }
    body.signed-in .kartenlegen-cards{
      gap: 8px;
      padding-inline: 0;
    }
    body.signed-in .kartenlegen-card-title{ font-size: 13px; }
    /* Mobile: Card-Layout bleibt vertikal (gleicher Stack wie Desktop) —
       die Vorlage hier war fuer das alte 2x2-Grid; nicht mehr relevant. */
    body.signed-in .taler-package-btn{ width: 100%; }
  }

  /* ═══════════════════════════════════════════════════════════════════════
     PHASE M — Stories-Dashboard
     - Bottom-Nav (App-Shell)
     - Dashboard-Home Quick-Compose + Stories-Carousel
     - Profil-Avatar
     ─────────────────────────────────────────────────────────────────── */

  /* — Bottom-Nav ————————————————————————————————————————————————— */
  .botnav-bar{
    display: none;
    position: fixed; left: 50%; transform: translateX(-50%);
    bottom: 0; width: 100%; max-width: 480px;
    padding: 8px 14px calc(env(safe-area-inset-bottom, 0px) + 8px);
    background: rgba(244, 237, 224, 0.94);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border-top: 1px solid rgba(184, 154, 106, 0.22);
    grid-template-columns: repeat(4, 1fr); gap: 4px;
    z-index: 60;
    box-shadow: 0 -8px 28px -16px rgba(61, 52, 42, 0.3);
  }
  body.signed-in .botnav-bar{ display: grid; }
  body.signed-in main.shell{ padding-bottom: 110px; }
  .botnav-link{
    text-decoration: none; color: var(--lb-mist);
    text-align: center; padding: 8px 4px 6px;
    border-radius: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 10px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500;
    position: relative;
    transition: color .2s var(--ease-spring);
  }
  .botnav-link .botnav-glyph{
    display: flex; align-items: center; justify-content: center;
    font-family: 'Cormorant Garamond', serif;
    font-size: 20px; line-height: 1;
    color: var(--lb-mist); margin-bottom: 2px;
    transition: color .2s var(--ease-spring), transform .2s var(--ease-spring);
  }
  /* SVG-Icons brauchen explizite Größe — sonst expandieren sie auf SVG-Default
     (300×150) und sprengen die Botnav. Skaliert wie die früheren Text-Glyphs. */
  .botnav-link .botnav-glyph svg{
    width: 22px; height: 22px;
    stroke: currentColor; fill: none;
  }
  .botnav-link:hover{ color: var(--lb-ink); }
  .botnav-link:hover .botnav-glyph{ color: var(--lb-accent-soft); transform: translateY(-1px); }
  .botnav-link.is-active{ color: var(--lb-accent-soft); }
  .botnav-link.is-active .botnav-glyph{ color: var(--lb-accent); }
  .botnav-link.is-active::before{
    content: ''; position: absolute; top: 2px; left: 50%; transform: translateX(-50%);
    width: 24px; height: 2px; border-radius: 2px; background: var(--lb-accent);
  }
  .botnav-link:focus-visible{ outline: 2px solid var(--lb-accent); outline-offset: 2px; }

  /* — Dashboard-Greeting (compact) ——————————————————————————————— */
  .dash-greeting-compact{ margin-bottom: 14px; }
  .dash-greeting-compact .kicker{
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
    color: var(--lb-accent); font-weight: 500;
    margin-bottom: 6px;
  }
  .dash-greeting-compact h1{
    font-family: 'Cormorant Garamond', serif; font-weight: 500;
    font-size: 28px; line-height: 1.05; letter-spacing: -.02em;
    color: var(--lb-ink); margin: 0;
  }
  .dash-greeting-compact h1 em{ font-style: italic; color: var(--lb-accent-soft); font-weight: 500; }

  /* — Quick-Compose (Chat-Input on Home) ——————————————————————— */
  .dash-quick-compose{
    position: relative; border-radius: 24px;
    background: var(--lb-surface);
    border: 1.5px solid rgba(184,154,106,.4);
    padding: 16px 16px 12px;
    box-shadow: 0 24px 50px -30px rgba(61,52,42,.45), 0 1px 0 rgba(255,255,255,.6) inset;
    margin-bottom: 14px;
  }
  .dash-quick-compose textarea{
    width: 100%; border: none; outline: none; background: transparent; resize: none;
    font-family: 'Cormorant Garamond', serif;
    font-size: 20px; line-height: 1.3;
    color: var(--lb-ink); letter-spacing: -.01em;
    min-height: 56px;
  }
  .dash-quick-compose textarea::placeholder{ color: var(--lb-mist); font-style: italic; }
  .dash-quick-compose-row{
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 8px; padding-top: 8px;
    border-top: 1px dashed rgba(184,154,106,.3);
  }
  .dash-quick-compose-ctx{
    display: inline-flex; align-items: center; gap: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 11px; color: var(--lb-mist);
    letter-spacing: .08em; text-transform: uppercase;
  }
  .dash-quick-compose-ctx::before{ content: '◴'; color: var(--lb-accent); }
  .dash-quick-compose-send{
    width: 40px; height: 40px; border-radius: 50%;
    border: none; cursor: pointer; flex: none;
    background: linear-gradient(180deg, var(--lb-accent) 0%, var(--lb-accent-soft) 100%);
    color: var(--lb-surface); font-size: 16px;
    display: grid; place-items: center;
    transition: transform .25s var(--ease-spring), box-shadow .25s var(--ease-spring);
    box-shadow: 0 6px 18px -8px rgba(184,154,106,.7);
  }
  .dash-quick-compose-send:hover{ transform: translateY(-2px) scale(1.04); box-shadow: 0 12px 26px -12px rgba(184,154,106,.9); }
  .dash-quick-compose-send:active{ transform: translateY(0) scale(0.98); }
  .dash-quick-compose-send:disabled{ opacity: .5; cursor: not-allowed; }

  /* — Suggestion-Chips ——————————————————————————————————————————— */
  .dash-chips{
    display: flex; gap: 6px;
    margin-bottom: 22px;
    overflow-x: auto; padding-bottom: 4px;
    scrollbar-width: none;
    /* allow chips to bleed slightly outside container for visual breathing room */
  }
  .dash-chips::-webkit-scrollbar{ display: none; }
  .dash-chip{
    padding: 7px 12px; border-radius: 999px;
    background: rgba(251,246,236,.7);
    border: 1px solid rgba(184,154,106,.28);
    font-family: 'Inter', sans-serif;
    font-size: 12.5px; color: var(--lb-ink);
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 5px;
    white-space: nowrap; flex: none;
    transition: all .25s var(--ease-spring);
    cursor: pointer;
  }
  .dash-chip:hover{ background: var(--lb-surface); border-color: var(--lb-accent); transform: translateY(-1px); }
  .dash-chip:focus-visible{ outline: 2px solid var(--lb-accent); outline-offset: 2px; }
  .dash-chip-glyph{ color: var(--lb-accent); font-family: 'Cormorant Garamond', serif; }

  /* ─────────────────────────────────────────────────────────────────────
     Phase N+2 — Tageshoroskop in 3 Akten (ersetzt das Stories-Carousel)
     ───────────────────────────────────────────────────────────────────── */
  .tageshoroskop-head{
    display: flex; align-items: baseline; justify-content: space-between;
    margin: 4px 0 12px;
  }
  .tageshoroskop-head h3{
    font-family: 'Cormorant Garamond', serif; font-weight: 500;
    font-size: 22px; letter-spacing: -.01em; color: var(--lb-ink);
    margin: 0;
  }
  .tageshoroskop-swipe{
    font-family: 'Inter', sans-serif;
    font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
    color: var(--lb-mist);
  }
  .tageshoroskop-swipe::after{ content: ' →'; color: var(--lb-accent); }

  .tageshoroskop-rail{
    display: flex; gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin: 0 -20px; padding: 0 20px 4px;
    scroll-padding: 20px;
    -webkit-overflow-scrolling: touch;
  }
  .tageshoroskop-rail::-webkit-scrollbar{ display: none; }

  .tageshoroskop-akt{
    flex: none; width: calc(100% - 32px); max-width: 360px;
    scroll-snap-align: start;
    background: var(--lb-surface);
    border: 1px solid rgba(184,154,106,.22);
    border-radius: 22px;
    padding: 22px 22px 22px;
    position: relative;
    box-shadow: 0 18px 38px -24px rgba(61,52,42,.4);
    min-height: 320px;
    display: flex; flex-direction: column;
  }
  .tageshoroskop-akt-num{
    font-family: 'Cormorant Garamond', serif; font-style: italic;
    font-size: 13px; color: var(--lb-accent-soft);
  }
  .tageshoroskop-akt-num::after{ content: ' / 3'; opacity: .5; }
  .tageshoroskop-akt-glyph{
    position: absolute; top: 18px; right: 22px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 38px; line-height: 1; color: var(--lb-accent);
    opacity: .7;
  }
  .tageshoroskop-akt-title{
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500; font-size: 24px; line-height: 1.15; letter-spacing: -.015em;
    margin: 16px 0 12px; color: var(--lb-ink);
  }
  .tageshoroskop-akt-title em{
    font-style: italic; color: var(--lb-accent-soft); font-weight: 500;
  }
  .tageshoroskop-akt-body{
    font-family: 'Inter', sans-serif;
    font-size: 15px; line-height: 1.7; color: var(--lb-ink);
    margin: 0; flex: 1;
  }
  .tageshoroskop-akt-skeleton{
    display: block; height: 14px; margin-bottom: 10px; border-radius: 6px;
    background: linear-gradient(90deg, rgba(61,52,42,.08), rgba(61,52,42,.16), rgba(61,52,42,.08));
    background-size: 200% 100%;
    animation: tageshoroskopShimmer 1.4s ease-in-out infinite;
  }
  .tageshoroskop-akt-skeleton:nth-child(2){ width: 88%; }
  .tageshoroskop-akt-skeleton:nth-child(3){ width: 64%; }
  @keyframes tageshoroskopShimmer{
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  .tageshoroskop-dots{
    display: flex; gap: 6px; justify-content: center;
    margin: 14px 0 8px;
  }
  .tageshoroskop-dots span{
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(184,154,106,.25);
    transition: width .25s var(--ease-spring), background .25s ease;
  }
  .tageshoroskop-dots span.is-active{
    background: var(--lb-accent); width: 18px; border-radius: 4px;
  }

  .tageshoroskop-cta{
    width: 100%; margin-top: 14px;
    padding: 14px 18px;
    border: none; border-radius: 14px;
    background: var(--lb-accent); color: var(--lb-ink-dark);
    font-family: 'Inter', sans-serif;
    font-size: 15px; font-weight: 500;
    cursor: pointer;
    transition: transform .15s ease, opacity .15s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .tageshoroskop-cta:hover:not(:disabled){ transform: translateY(-1px); }
  .tageshoroskop-cta:disabled{ opacity: .55; cursor: not-allowed; }
  .tageshoroskop-cta:focus-visible{ outline: 2px solid var(--lb-accent-soft); outline-offset: 3px; }

  /* [Phase N+2: alle .dash-stories*, .dash-story*, .dash-story--* Klassen
     entfernt — siehe tageshoroskop-* Klassen oben.] */

  /* — Profil-Avatar (im Header) ——————————————————————————————— */
  .header-avatar-btn{
    width: 34px; height: 34px; border-radius: 50%;
    background: linear-gradient(160deg, var(--lb-accent), var(--lb-accent-soft));
    color: var(--lb-surface);
    display: none; place-items: center;
    font-family: 'Cormorant Garamond', serif;
    font-size: 15px; font-weight: 500;
    border: 1px solid rgba(184,154,106,.4);
    box-shadow: 0 4px 12px -6px rgba(61,52,42,.3);
    cursor: pointer; padding: 0;
  }
  body.signed-in .header-avatar-btn{ display: grid; }
  body.signed-in .burger-btn{ display: none; }
  .header-avatar-btn:focus-visible{ outline: 2px solid var(--lb-accent); outline-offset: 2px; }
  .header-avatar-btn:hover{ transform: scale(1.05); transition: transform .2s var(--ease-spring); }

  /* [Phase N+2: Tagesimpuls-Sheet-CSS entfernt — Sheet wird nicht mehr genutzt.] */

  /* — Profil-Sheet: User-Info-Block ———————————————————————————— */
  .profile-user{
    display: flex; align-items: center; gap: 12px;
    padding: 16px 18px 18px;
    border-bottom: 1px solid rgba(184, 154, 106, 0.18);
    margin-bottom: 4px;
  }
  .profile-user-avatar{
    flex: none; width: 44px; height: 44px; border-radius: 50%;
    background: linear-gradient(160deg, var(--lb-accent), var(--lb-accent-soft));
    color: var(--lb-surface);
    display: grid; place-items: center;
    font-family: 'Cormorant Garamond', serif;
    font-size: 20px; font-weight: 500;
    border: 1px solid rgba(184, 154, 106, 0.4);
    box-shadow: 0 6px 16px -6px rgba(61, 52, 42, 0.4);
  }
  .profile-user-meta{ flex: 1; min-width: 0; }
  .profile-user-name{
    font-family: 'Cormorant Garamond', serif; font-weight: 500;
    font-size: 18px; line-height: 1.15; letter-spacing: -.01em;
    color: var(--lb-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .profile-user-email{
    font-family: 'Inter', sans-serif;
    font-size: 12.5px; color: var(--lb-mist);
    margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* ════════════════════════════════════════════════════════════════
     Chat-View v2 — Continuous + Drawer (Round 3 Variant E)
     Append-only. Selektoren mit #dashChat.chat-view-v2 oder neuen
     Klassen (chat-headerbar, chat-drawer-*) — keine Kollision mit
     bestehenden .chat-*-Regeln.
     ════════════════════════════════════════════════════════════════ */
  #dashChat.chat-view-v2 {
    display:flex; flex-direction:column;
    /* Höhe = Viewport minus sticky app-header (~59px) minus #dashboardPanel.mt-6
       (24px). Wenn das Padding hier zu großzügig ist, scrollt zusätzlich der
       Body → doppelte Scrollbalken (chatStream-intern + body). overflow:hidden
       schließt Restausreißer ab — interner Scroll bleibt im chatStream. */
    height: calc(100dvh - 100px);
    min-height: 0;
    padding:0;
    position:relative;
    overflow: hidden;
  }
  /* mt-6 (24px) des dashboardPanel entfernt sich logisch erst über dem dashChat —
     trotzdem auf 0 ziehen, wenn aktive View dashChat ist, damit kein Body-Scroll
     entsteht. (Greift nur in Browsern mit :has-Support; sicherer Fallback ist
     die height-Calc oben.) */
  body:has(#dashChat.chat-view-v2:not(.hide)) #dashboardPanel { margin-top: 0; }
  /* Body-Scroll unterdrücken, solange Chat-View aktiv ist. Sonst läuft <main>
     um app-header (~52px) + pb-20 (80px) über das dashChat-Höhenbudget
     (100dvh - 100px) hinaus → ~32px Body-Overflow → zweite Scrollbar zusätzlich
     zum internen chatStream-Scroll. height:100dvh erzwingt exakt Viewport,
     overflow:hidden kappt den Rest; interner chatStream-Scroll bleibt intakt. */
  body:has(#dashChat.chat-view-v2:not(.hide)) {
    overflow: hidden;
    height: 100dvh;
  }
  /* Legacy .view-header in v2 ausblenden (bleibt für andere Views aktiv) */
  #dashChat.chat-view-v2 > .view-header { display:none; }

  /* Round-3 v3: Floating drawer FAB — replaces the bulky sticky chat-headerbar.
     position:fixed → bleibt beim Scroll der Chat-Nachrichten sichtbar; z-index liegt
     unter dem app-header (50), aber über den Chat-Bubbles. top-Offset hält Abstand
     zum sticky app-header (~66px) statt darüber zu liegen. */
  #dashChat.chat-view-v2 .chat-drawer-fab {
    position:fixed; top:74px; left:14px; z-index:40;
    width:38px; height:38px;
    display:grid; place-items:center;
    background:rgba(244,237,224,.82);
    backdrop-filter:blur(14px) saturate(140%);
    -webkit-backdrop-filter:blur(14px) saturate(140%);
    border:1px solid var(--lb-line, rgba(184,154,106,.22));
    border-radius:12px;
    color:var(--lb-mist, #6b5e4f);
    cursor:pointer;
    box-shadow:0 6px 18px -10px rgba(61,52,42,.25);
    transition:color .2s var(--ease-spring, cubic-bezier(.2,.8,.2,1)),
                background .2s var(--ease-spring, cubic-bezier(.2,.8,.2,1)),
                transform .2s var(--ease-spring, cubic-bezier(.2,.8,.2,1));
  }
  #dashChat.chat-view-v2 .chat-drawer-fab:hover {
    color:var(--lb-ink, #3d342a);
    background:rgba(244,237,224,.95);
    transform:translateY(-1px);
  }
  #dashChat.chat-view-v2 .chat-drawer-fab:focus-visible {
    outline:2px solid var(--lb-accent, #b89a6a); outline-offset:2px;
  }
  .chat-hamburger {
    position:relative; display:block;
    width:16px; height:2px;
    background:currentColor; border-radius:2px;
  }
  .chat-hamburger::before, .chat-hamburger::after {
    content:''; position:absolute; left:0;
    width:16px; height:2px;
    background:currentColor; border-radius:2px;
  }
  .chat-hamburger::before { top:-5px; }
  .chat-hamburger::after  { top:5px; }

  /* Slim questionnaire hint (override default chrome inside v2) */
  #dashChat.chat-view-v2 .questionnaire-hint.chat-q-hint {
    display:flex; align-items:center; gap:8px;
    padding:6px 14px; margin:0;
    background:var(--lb-base, #f4ede0);
    border:0; border-bottom:1px solid var(--lb-line, rgba(184,154,106,.22));
    color:var(--lb-mist, #6b5e4f);
    font-size:11.5px; font-style:italic;
    text-decoration:none; border-radius:0;
    box-shadow:none;
  }
  #dashChat.chat-view-v2 .chat-q-hint .questionnaire-hint-glyph { color:var(--lb-accent, #b89a6a); font-size:12px; }
  #dashChat.chat-view-v2 .chat-q-hint .questionnaire-hint-body { display:inline; flex:1; }
  #dashChat.chat-view-v2 .chat-q-hint .questionnaire-hint-title {
    display:inline; font-size:11.5px; font-weight:500; color:var(--lb-ink, #3d342a); margin-right:4px;
  }
  #dashChat.chat-view-v2 .chat-q-hint .questionnaire-hint-sub { display:none; }
  #dashChat.chat-view-v2 .chat-q-hint .questionnaire-hint-arrow { margin-left:auto; color:var(--lb-mist, #6b5e4f); }
  #dashChat.chat-view-v2 .chat-q-hint:hover { color:var(--lb-ink, #3d342a); }

  /* Chat panel — flex column, stream fills, composer fixed */
  #dashChat.chat-view-v2 #chatPanel.chat-panel--v2 {
    flex:1; display:flex; flex-direction:column;
    padding:0; margin:0; background:transparent;
    border:0; box-shadow:none; border-radius:0;
    min-height:0; position:relative;
  }
  #dashChat.chat-view-v2 #chatStream.chat-stream--v2 {
    flex:1; overflow-y:auto;
    /* Bottom-Padding: 78px botnav + ~130px Composer (Chips+Input) + ~84px sticky-Header-Offset
       (#dashChat erbt 100dvh, app-header schiebt das Stream-Bottom unter den Viewport) + Gap.
       Sonst landet die unterste Bubble bei bottom-Alignment direkt auf den Mode-Chips. */
    /* Bottom-Padding muss genug Platz lassen, damit die unterste Bubble nicht
       unter dem fixierten Composer (≈103px: chips ~25px + input 48px + padding)
       und der Botnav (78px) verschwindet. ~200px deckt das + kleinen Gap. */
    padding:18px 14px 200px;
    display:flex; flex-direction:column; gap:10px;
    scroll-behavior:smooth;
    background:transparent;
    border:0; box-shadow:none;
  }
  /* Inhalt unten ans Ende drücken: ein unsichtbarer flex-grower vorne füllt
     den verfügbaren Platz, Bubble/Empty-State sitzen bündig über dem Composer.
     Bei vielen Bubbles schrumpft der Grower auf 0 und overflow+scroll greift.
     Robust gegenüber display:none am chatEmpty (wo :first-child versagen würde). */
  #dashChat.chat-view-v2 #chatStream.chat-stream--v2::before {
    content: '';
    flex: 1 1 0;
    min-height: 0;
  }

  /* v2 Bubble look — beide Bubbles teilen sich Typografie (Inter sans).
     Twilight-Mode setzte den Assistant sonst auf Cormorant serif, was im
     Chat-Kontext schwerer leserlich war. */
  #dashChat.chat-view-v2 #chatStream .chat-bubble {
    max-width:82%; padding:11px 15px;
    font-family:'Inter', system-ui, sans-serif;
    font-size:14px; line-height:1.5;
    letter-spacing:-0.005em;
    color:var(--lb-ink, #3d342a);
    word-wrap:break-word; margin:0;
  }
  #dashChat.chat-view-v2 #chatStream .chat-bubble.bubble-assistant {
    align-self:flex-start;
    background:var(--lb-surface, #fbf6ec);
    border:1px solid var(--lb-line, rgba(184,154,106,.22));
    border-radius:18px 18px 18px 6px;
    box-shadow:0 4px 12px -8px rgba(61,52,42,.15);
    /* twilight-mode font-Override für bubble-assistant explizit zurücknehmen */
    font-family:'Inter', system-ui, sans-serif;
    font-size:14px;
    line-height:1.5;
    letter-spacing:-0.005em;
    padding:11px 15px;
  }
  #dashChat.chat-view-v2 #chatStream .chat-bubble.bubble-user {
    align-self:flex-end;
    background:rgba(184,154,106,.18);
    border:0;
    border-radius:18px 18px 6px 18px;
  }

  /* Sticky composer — sitzt direkt auf der Botnav-Oberkante (kein Spalt).
     Botnav-Höhe = 8px (bar-top-pad) + 14px (link-vpad) + 20px (icon) + 2px (gap)
     + ~14px (text 10px×1.4) + 6px (link-bottom-pad) + 8px (bar-bottom-pad) ≈ 64px.
     Safe-area-inset-bottom ist bereits ins botnav-padding eingerechnet, daher
     hier zusätzlich addieren, damit der Composer beim iPhone-Notch nicht über
     die Botnav rutscht. */
  #dashChat.chat-view-v2 #chatForm.chat-input-wrap--v2 {
    position:fixed; left:50%; transform:translateX(-50%);
    bottom:calc(64px + env(safe-area-inset-bottom, 0px));
    width:100%; max-width:430px;
    z-index:35;
    padding:10px 14px 12px;
    background:linear-gradient(to top, var(--lb-base, #f4ede0) 72%, rgba(244,237,224,0));
    border:0; box-shadow:none; margin:0;
    display:block;
  }
  #dashChat.chat-view-v2 #chatForm.chat-input-wrap--v2 .chat-mode-chips {
    /* Wrap erlauben — auf Mobile passen Standard- + Tiefenanalyse-Chip
       (inkl. + UPGRADE) sonst nicht in eine Zeile und werden rechts abgeschnitten.
       grid-template-columns aus body.signed-in @max-width:760px explizit
       zurücknehmen, sonst füllt jeder Chip 100% der Breite. */
    display:flex; flex-wrap:wrap; gap:6px 8px;
    grid-template-columns:none;
    padding:0 0 8px 0;
    margin:0;
    background:transparent; border:0;
    justify-content:flex-start;
  }
  #dashChat.chat-view-v2 #chatForm.chat-input-wrap--v2 .chat-mode-chips > .chat-mode-chip {
    /* width:100% aus body.signed-in @max-width:760px überschreiben.
       min-height:44px aus body.signed-in-Sammelregel ebenfalls reset — Chips
       sollen in v2 kompakter sein als Buttons. */
    flex:0 1 auto;
    width:auto;
    max-width:100%; min-width:0;
    min-height:0;
    white-space:nowrap;
    padding:5px 10px;
    font-size:11px;
    gap:5px;
    line-height:1.2;
    justify-content:flex-start;
  }
  /* Inhalte des Chips: Cost, Lock, Upgrade-Hint kompakter */
  #dashChat.chat-view-v2 #chatForm.chat-input-wrap--v2 .chat-mode-chip .chip-cost {
    font-size:10px;
  }
  #dashChat.chat-view-v2 #chatForm.chat-input-wrap--v2 .chat-mode-chip .chip-lock {
    width:10px; height:10px;
  }
  #dashChat.chat-view-v2 #chatForm.chat-input-wrap--v2 .chat-mode-chip .chip-upgrade-hint {
    margin-left:2px;
    font-size:8.5px;
    letter-spacing:0.03em;
  }
  #dashChat.chat-view-v2 .chat-composer-row {
    display:flex; align-items:flex-end; gap:8px;
  }
  #dashChat.chat-view-v2 .chat-composer-row #chatInput {
    flex:1; min-height:44px; max-height:120px;
    padding:12px 16px; border-radius:24px;
    border:1px solid var(--lb-line, rgba(184,154,106,.22));
    background:var(--lb-surface, #fbf6ec);
    color:var(--lb-ink, #3d342a);
    font:14px 'Inter', system-ui, sans-serif; line-height:1.4;
    resize:none; outline:none;
    transition:border-color .2s var(--ease-spring, cubic-bezier(.2,.8,.2,1));
    box-shadow:none;
  }
  #dashChat.chat-view-v2 .chat-composer-row #chatInput::placeholder {
    color:var(--lb-mist, #6b5e4f); font-style:italic;
  }
  #dashChat.chat-view-v2 .chat-composer-row #chatInput:focus { border-color:var(--lb-accent, #b89a6a); }
  #dashChat.chat-view-v2 .chat-composer-row .chat-send {
    position:relative; width:48px; height:48px; border-radius:50%;
    background:radial-gradient(circle at 30% 30%, var(--lb-gold-bright, #d4bd91), var(--lb-accent, #b89a6a));
    border:0; color:var(--lb-ink, #3d342a);
    cursor:pointer;
    display:grid; place-items:center;
    box-shadow:0 6px 18px -6px rgba(184,154,106,.7);
    transition:transform .2s var(--ease-spring, cubic-bezier(.2,.8,.2,1));
    padding:0; flex-shrink:0;
    min-width:48px; min-height:48px;
  }
  #dashChat.chat-view-v2 .chat-composer-row .chat-send:hover { transform:translateY(-1px); }
  #dashChat.chat-view-v2 .chat-composer-row .chat-send svg {
    width:20px; height:20px;
  }

  /* Typing indicator (anchored above composer) */
  #dashChat.chat-view-v2 #chatTyping.chat-typing--v2 {
    position:absolute; left:22px;
    bottom:calc(78px + 110px + env(safe-area-inset-bottom, 0px));
    z-index:32;
  }

  /* ── Drawer ─────────────────────────────────────────────────── */
  .chat-drawer-backdrop {
    position:fixed; inset:0;
    background:rgba(61,52,42,.4);
    z-index:60; opacity:0; pointer-events:none;
    transition:opacity .25s var(--ease-spring, cubic-bezier(.2,.8,.2,1));
  }
  .chat-drawer-backdrop.is-open { opacity:1; pointer-events:auto; }
  .chat-drawer {
    position:fixed; top:0; left:0; bottom:0;
    width:87%; max-width:374px;
    background:var(--lb-surface, #fbf6ec);
    border-right:1px solid var(--lb-line, rgba(184,154,106,.22));
    box-shadow:0 24px 56px -20px rgba(61,52,42,.45);
    z-index:70;
    display:flex; flex-direction:column;
    transform:translateX(-100%);
    transition:transform .3s var(--ease-spring, cubic-bezier(.2,.8,.2,1));
    overflow:hidden;
  }
  .chat-drawer.is-open { transform:translateX(0); }
  .chat-drawer-head {
    display:flex; justify-content:space-between; align-items:center;
    padding:14px 16px; border-bottom:1px solid var(--lb-line, rgba(184,154,106,.22));
  }
  .chat-drawer-brand {
    display:inline-flex; align-items:center; gap:8px;
    font-family:'Cormorant Garamond', Georgia, serif;
    font-size:16px; font-weight:500;
    color:var(--lb-ink, #3d342a);
  }
  .chat-drawer-brand-glyph { font-size:18px; color:var(--lb-accent, #b89a6a); }
  .chat-drawer-body { flex:1; overflow-y:auto; padding:14px 16px 16px; }
  .chat-drawer-search {
    display:flex; align-items:center; gap:8px;
    padding:10px 14px; border-radius:16px;
    background:var(--lb-base, #f4ede0);
    border:1px solid var(--lb-line, rgba(184,154,106,.22));
  }
  .chat-drawer-search-glyph { color:var(--lb-mist, #6b5e4f); font-size:14px; }
  .chat-drawer-search input {
    flex:1; border:0; background:transparent; outline:none;
    font:13px 'Inter', system-ui, sans-serif;
    color:var(--lb-ink, #3d342a);
  }
  .chat-drawer-search input::placeholder { color:var(--lb-mist, #6b5e4f); font-style:italic; }
  .chat-drawer-newbtn {
    margin-top:12px; width:100%;
    padding:12px 16px; border-radius:14px;
    background:var(--lb-accent, #b89a6a);
    color:var(--lb-ink, #3d342a);
    border:0; font:600 14px 'Inter', system-ui, sans-serif;
    cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:8px;
    box-shadow:0 6px 16px -6px rgba(184,154,106,.6);
    transition:transform .2s var(--ease-spring, cubic-bezier(.2,.8,.2,1));
  }
  .chat-drawer-newbtn:hover { transform:translateY(-1px); }
  .chat-drawer-section { margin-top:22px; }
  .chat-drawer-eyebrow {
    font:500 11px 'Inter', system-ui, sans-serif;
    letter-spacing:.14em; text-transform:uppercase;
    color:var(--lb-mist, #6b5e4f);
    margin:0 0 10px 0;
  }
  .chat-drawer #chatSessionsList { display:flex; flex-direction:column; gap:4px; }
  .chat-drawer #chatSessionsPager { margin-top:10px; }
  .chat-drawer .chat-sessions-empty {
    padding:12px 10px; font-size:13px;
    color:var(--lb-mist, #6b5e4f); font-style:italic;
  }
  .transit-in-drawer { border-radius:12px; }
  .chat-drawer-fragebogen {
    display:flex; justify-content:space-between; align-items:center;
    padding:12px 14px; border-radius:12px;
    background:var(--lb-base, #f4ede0);
    border:1px solid var(--lb-line, rgba(184,154,106,.22));
    color:var(--lb-ink, #3d342a);
    font-size:13px;
    text-decoration:none;
    transition:background .2s var(--ease-spring, cubic-bezier(.2,.8,.2,1));
  }
  .chat-drawer-fragebogen strong { color:var(--lb-accent-soft, #8a724a); font-weight:600; }
  .chat-drawer-fragebogen:hover { background:rgba(184,154,106,.06); }
  .chat-drawer-fragebogen-arrow { color:var(--lb-mist, #6b5e4f); }
  .chat-drawer-foot {
    padding:14px 16px; border-top:1px solid var(--lb-line, rgba(184,154,106,.22));
  }
  .chat-drawer-foot a {
    color:var(--lb-mist, #6b5e4f); text-decoration:none;
    font:500 13px 'Inter', system-ui, sans-serif;
  }
  .chat-drawer-foot a:hover { color:var(--lb-ink, #3d342a); }
  body.chat-drawer-open { overflow:hidden; }

  /* ════════════════════════════════════════════════════════════════
     Composer/Footer/Drawer hardening (2026-05-24)
     ════════════════════════════════════════════════════════════════ */

  /* Footer raus aus Dashboard-Routen — Legal-Links sind im Profil-Drawer. */
  body.signed-in .site-footer { display: none; }

  /* .fade-in / .dash-view nutzen Slide-In-Animationen mit transform; mit
     animation-fill-mode:both behält der Browser die transform-Eigenschaft
     im computed style (matrix(1,0,0,1,0,0)) — das erzeugt einen Containing-
     Block für fixed-Descendants, sodass #chatForm.position:fixed am
     #dashboardPanel statt am Viewport hängt. Für die signed-in App-Shell
     wird die Animation deshalb auf eine reine Opacity-Variante umgebogen,
     damit der Composer wirklich am Viewport-Bottom kleben kann. */
  #dashboardPanel.fade-in { animation-name: lb-fade-opacity; }
  #dashChat.chat-view-v2 { animation-name: lb-fade-opacity; }
  @keyframes lb-fade-opacity { from { opacity: 0; } to { opacity: 1; } }

  /* Chat-Drawer + Backdrop respektieren jetzt das HTML hidden-Attribut.
     Vorher überschrieb .chat-drawer{display:flex} den UA-Default, sodass
     der Drawer zwar via translateX(-100%) versteckt war, aber als Layout
     präsent blieb und am Rand sichtbare Artefakte (white-bar) erzeugen
     konnte. */
  .chat-drawer[hidden],
  .chat-drawer-backdrop[hidden] { display: none !important; }

  /* Rechtliches-Block im Profil-Drawer (#drawer). */
  .drawer-legal {
    margin-top: 10px; padding: 10px 4px 4px;
    border-top: 1px dashed color-mix(in srgb, var(--lb-ink) 12%, transparent);
  }
  .drawer-legal .drawer-eyebrow {
    color: var(--lb-mist); margin-bottom: 8px; padding: 0 2px;
    font-size: 9px; letter-spacing: .24em;
  }
  .drawer-legal-links {
    display: flex; flex-wrap: wrap; gap: 6px 14px;
    padding: 0 2px;
    font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
    font-family: 'Inter', sans-serif; font-weight: 500;
    line-height: 1.6;
  }
  .drawer-legal-links a {
    color: color-mix(in srgb, var(--lb-ink) 62%, transparent);
    text-decoration: none;
    transition: color .2s var(--ease-spring);
  }
  .drawer-legal-links a:hover { color: var(--lb-accent); }
  .drawer-legal-links a:focus-visible {
    outline: 2px solid var(--lb-accent); outline-offset: 3px; border-radius: 2px;
  }

  /* [Phase N+2: Phase-N+1-Dashboard-Card-Visual-Layer + dash-sheet-CSS
     entfernt — Tageshoroskop laeuft jetzt direkt im Dashboard via
     .tageshoroskop-* Klassen, kein Sheet mehr.] */

  /* ======================================================================
     Werkbank (MARGI-24/26) - Admin- & Partner-Views nach Design-Variante C.
     Quelle: design/mockups/MARGI-22/variante-c-werkbank.html (Design-Go
     2026-06-12). .wb-sheet ist der Scope: er pinnt die Cream-Token aus
     :root fest (gleiches Muster wie body.twilight-mode), damit die
     Werkbank auch post-login (Twilight) hell bleibt. Alle wb-*-Komponenten
     konsumieren ausschliesslich Token + color-mix-Ableitungen.
     ====================================================================== */
  .wb-sheet{
    /* Theme-Pin: Werte = :root-Cream-Palette (SoT oben in dieser Datei). */
    --lb-base:#f4ede0; --lb-night:#ecdfc8; --lb-surface:#fbf6ec;
    --lb-ink:#3d342a; --lb-mist:#6b5e4f; --lb-ink-dark:#2a2218;
    --lb-accent:#b89a6a; --lb-accent-soft:#8a724a; --lb-ember:#b85a3a; --lb-rose:#b88a7a;
    --lb-gold:#b89a6a; --lb-gold-bright:#d4bd91; --lb-gold-dark:#8a724a;
    --wb-hairline: color-mix(in srgb, var(--lb-gold-dark) 30%, transparent);
    --wb-hairline-soft: color-mix(in srgb, var(--lb-gold-dark) 18%, transparent);
    --wb-card-shadow: 0 10px 26px -14px color-mix(in srgb, var(--lb-ink) 22%, transparent);
    --wb-r: 16px;

    position: relative;
    max-width: 520px; margin: 0 auto;
    background: var(--lb-base);
    background-image: radial-gradient(140% 38% at 50% -6%, color-mix(in srgb, var(--lb-gold-bright) 40%, transparent) 0%, transparent 60%);
    border: 1px solid color-mix(in srgb, var(--lb-gold-bright) 45%, transparent);
    border-radius: 24px;
    box-shadow: 0 30px 70px -30px color-mix(in srgb, var(--lb-ink-dark) 55%, transparent);
    padding: 18px 16px 22px;
    color: var(--lb-ink);
    line-height: 1.45;
    font-family: 'Inter', sans-serif;
  }

  /* --- Kopf ------------------------------------------------------------ */
  .wb-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:10px; margin-bottom:4px; }
  .wb-eyebrow{ display:block; font-size:9.5px; font-weight:600; letter-spacing:.24em; color:var(--lb-gold-dark); text-transform:uppercase; margin-bottom:3px; }
  .wb-title{ font-family:'Fraunces', serif; font-weight:500; font-size:24px; line-height:1.05; letter-spacing:.01em; margin:0; }
  .wb-stand{ flex:none; white-space:nowrap; font-family:'Cormorant Garamond', serif; font-style:italic; font-size:14.5px; color:var(--lb-mist); text-align:right; line-height:1.25; padding-bottom:2px; }
  .wb-morgen{ font-family:'Cormorant Garamond', serif; font-style:italic; font-size:16px; color:var(--lb-mist); margin:6px 2px 14px; }
  .wb-morgen .wb-star{ color:var(--lb-gold); font-style:normal; font-size:13px; }

  /* --- Shared ----------------------------------------------------------- */
  .wb-num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }
  .wb-card{ background:var(--lb-surface); border:1px solid var(--wb-hairline-soft); border-radius:var(--wb-r); box-shadow:var(--wb-card-shadow); }
  .wb-section-title{
    display:flex; align-items:center; gap:10px;
    font-family:'Inter', sans-serif; font-size:10.5px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
    color:var(--lb-gold-dark); margin:22px 2px 10px;
  }
  .wb-section-title::after{ content:""; flex:1; height:1px; background:linear-gradient(to right, var(--wb-hairline), transparent); }
  .wb-chip{ display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; letter-spacing:.02em; padding:3px 9px; border-radius:999px; white-space:nowrap; }
  .wb-chip-up{ color:var(--lb-gold-dark); background:color-mix(in srgb, var(--lb-gold) 16%, transparent); border:1px solid color-mix(in srgb, var(--lb-gold) 35%, transparent); }
  .wb-chip-down{ color:var(--lb-ember); background:color-mix(in srgb, var(--lb-ember) 10%, transparent); border:1px solid color-mix(in srgb, var(--lb-ember) 30%, transparent); }
  .wb-chip-flat{ color:var(--lb-mist); background:color-mix(in srgb, var(--lb-mist) 8%, transparent); border:1px solid color-mix(in srgb, var(--lb-mist) 20%, transparent); }
  .wb-card-foot{
    margin:0 16px; padding:10px 0 13px; border-top:1px dashed var(--wb-hairline-soft);
    font-family:'Cormorant Garamond', serif; font-style:italic; font-size:14px; color:var(--lb-mist); line-height:1.5;
  }
  .wb-card-foot b{ font-family:'Inter', sans-serif; font-style:normal; font-weight:700; color:var(--lb-gold-dark); font-size:12.5px; }
  .wb-loading{ border:1.5px dashed var(--wb-hairline); border-radius:var(--wb-r); padding:30px 20px; text-align:center; color:var(--lb-mist); font-size:13.5px; }

  /* --- KPI-Snap-Karten --------------------------------------------------- */
  .wb-snap-row{ display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 -16px; padding:4px 16px 10px; scrollbar-width:none; }
  .wb-snap-row::-webkit-scrollbar{ display:none; }
  .wb-stat-card{ flex:0 0 78%; scroll-snap-align:center; padding:16px 16px 14px; display:flex; flex-direction:column; gap:7px; }
  .wb-stat-card .wb-label{ font-size:10.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--lb-mist); }
  .wb-stat-card .wb-big{ font-family:'Inter', sans-serif; font-weight:700; font-size:34px; line-height:1; letter-spacing:-.02em; }
  .wb-stat-card .wb-big .wb-unit{ font-size:20px; color:var(--lb-gold-dark); margin-left:2px; }
  .wb-snap-dots{ display:flex; justify-content:center; gap:7px; margin:0 0 4px; }
  .wb-snap-dots i{ width:6px; height:6px; border-radius:50%; background:var(--wb-hairline); transition:all .25s ease; }
  .wb-snap-dots i.on{ background:var(--lb-gold-dark); width:18px; border-radius:99px; }

  /* --- Plan-Verteilung ---------------------------------------------------- */
  .wb-pad-card{ padding:14px 16px; }
  .wb-plan-bar{ display:flex; height:18px; border-radius:9px; overflow:hidden; border:1px solid var(--wb-hairline-soft); margin:4px 0 12px; background:var(--lb-night); }
  .wb-plan-bar i{ display:block; height:100%; width:0; transition:width .9s cubic-bezier(.22,.9,.3,1); }
  .wb-legend{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:9px 12px; }
  .wb-legend span{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--lb-mist); min-width:0; white-space:nowrap; overflow:hidden; }
  .wb-legend b{ color:var(--lb-ink); font-weight:600; }
  .wb-legend i{ flex:none; width:9px; height:9px; border-radius:3px; border:1px solid var(--wb-hairline-soft); }

  /* --- KPI-Zeilen ---------------------------------------------------------- */
  .wb-kpi-card{ padding:4px 16px; }
  .wb-kpi-row{ display:grid; grid-template-columns:minmax(0,1fr) 48px 44px 48px; align-items:center; gap:8px; padding:12px 2px; }
  .wb-kpi-card--wide .wb-kpi-row{ grid-template-columns:minmax(0,1fr) 48px 80px; }
  .wb-kpi-row + .wb-kpi-row{ border-top:1px dashed var(--wb-hairline-soft); }
  .wb-kpi-row .wb-k-label{ min-width:0; font-size:13px; color:var(--lb-ink); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .wb-kpi-row .wb-k-sub{ display:block; font-size:10.5px; color:var(--lb-mist); font-weight:400; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .wb-kpi-row .wb-k-num{ font-size:18px; font-weight:600; text-align:right; white-space:nowrap; }
  .wb-kpi-row .wb-chip{ justify-self:end; font-size:10.5px; padding:3px 7px; }
  .wb-minibar{ width:100%; height:5px; border-radius:3px; background:var(--lb-night); overflow:hidden; }
  .wb-minibar i{ display:block; height:100%; width:0; background:var(--lb-gold); border-radius:3px; transition:width .9s cubic-bezier(.22,.9,.3,1); }

  /* --- Ring (Vertiefungs-Quote) -------------------------------------------- */
  .wb-ringwrap{ display:flex; align-items:center; gap:16px; padding:14px 16px; }
  .wb-ring{ flex:none; width:78px; height:78px; transform:rotate(-90deg); }
  .wb-ring .wb-ring-track{ fill:none; stroke:var(--lb-night); stroke-width:7; }
  .wb-ring .wb-ring-val{ fill:none; stroke:var(--lb-gold-dark); stroke-width:7; stroke-linecap:round; stroke-dasharray:213.6; stroke-dashoffset:213.6; transition:stroke-dashoffset 1.1s cubic-bezier(.22,.9,.3,1); }
  .wb-ring-label{ position:relative; }
  .wb-ring-num{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:700; }

  /* --- Wiederkehr (Retention-Drittel) --------------------------------------- */
  .wb-tri{ display:grid; grid-template-columns:repeat(3,1fr); padding:15px 6px 12px; text-align:center; }
  .wb-tri > div{ padding:2px 4px; min-width:0; }
  .wb-tri > div + div{ border-left:1px dashed var(--wb-hairline-soft); }
  .wb-t-label{ font-size:9.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--lb-mist); display:block; margin-bottom:7px; }
  .wb-t-num{ font-weight:700; font-size:21px; letter-spacing:-.01em; white-space:nowrap; }
  .wb-t-num .wb-unit{ font-size:13px; color:var(--lb-mist); font-weight:500; }

  /* --- Aufenthalt (Anteil je Bereich) ---------------------------------------- */
  .wb-share-card{ padding:5px 16px; }
  .wb-share-row{ padding:11px 2px; }
  .wb-share-row + .wb-share-row{ border-top:1px dashed var(--wb-hairline-soft); }
  .wb-share-top{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:6px; }
  .wb-share-top .wb-s-name{ font-size:13px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .wb-share-top .wb-s-pct{ font-size:14.5px; font-weight:700; color:var(--lb-gold-dark); white-space:nowrap; }
  .wb-share-bar{ height:8px; border-radius:4px; background:var(--lb-night); overflow:hidden; }
  .wb-share-bar i{ display:block; height:100%; width:0; border-radius:4px; background:linear-gradient(to right, var(--lb-gold-bright), var(--lb-gold)); transition:width .9s cubic-bezier(.22,.9,.3,1); }
  .wb-share-sub{ display:flex; justify-content:space-between; gap:8px; font-size:10.5px; color:var(--lb-mist); margin-top:4px; white-space:nowrap; }

  /* --- Verteilungen (Median/Sigma/Histogramm) --------------------------------- */
  .wb-title-row{ display:flex; align-items:center; gap:10px; margin:22px 2px 10px; }
  .wb-title-row .wb-section-title{ margin:0; flex:1; }
  .wb-rangeseg{ display:flex; gap:5px; }
  .wb-rangeseg button{
    min-height:34px; padding:0 11px; border-radius:999px; cursor:pointer;
    background:none; border:1px solid var(--wb-hairline-soft); color:var(--lb-mist);
    font-family:'Inter', sans-serif; font-size:10.5px; font-weight:600; letter-spacing:.06em;
    transition:all .2s ease;
  }
  .wb-rangeseg button.on{ color:var(--lb-gold-dark); border-color:var(--lb-gold); background:color-mix(in srgb, var(--lb-gold) 13%, transparent); }
  .wb-dist-card{ flex:0 0 84%; scroll-snap-align:center; padding:15px 16px 13px; }
  .wb-dist-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
  .wb-dist-head .wb-label{ font-size:10.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--lb-mist); }
  .wb-dist-n{ font-size:11px; color:var(--lb-mist); white-space:nowrap; }
  .wb-dist-big{ font-weight:700; font-size:31px; letter-spacing:-.02em; line-height:1; margin-top:7px; }
  .wb-dist-big .wb-unit{ font-size:13px; font-weight:500; color:var(--lb-mist); letter-spacing:0; margin-left:4px; }
  .wb-histo{ display:flex; align-items:flex-end; gap:5px; height:46px; margin:12px 0 3px; }
  .wb-histo i{ flex:1; height:0; border-radius:3px 3px 0 0; background:color-mix(in srgb, var(--lb-gold) 34%, transparent); transition:height .8s cubic-bezier(.22,.9,.3,1); }
  .wb-histo i.hi{ background:var(--lb-gold-dark); }
  .wb-histo-x{ display:flex; gap:5px; font-size:8.5px; color:var(--lb-mist); text-align:center; letter-spacing:.02em; }
  .wb-histo-x span{ flex:1; white-space:nowrap; overflow:hidden; }
  .wb-dist-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; text-align:center; margin-top:11px; padding-top:10px; border-top:1px dashed var(--wb-hairline-soft); }
  .wb-dist-stats .wb-d-label{ display:block; font-size:9px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--lb-mist); margin-bottom:3px; }
  .wb-dist-stats .wb-d-label em{ font-style:normal; text-transform:none; font-size:10px; }
  .wb-dist-stats .wb-d-num{ font-size:15.5px; font-weight:700; white-space:nowrap; }
  .wb-dist-note{ margin-top:10px; font-family:'Cormorant Garamond', serif; font-style:italic; font-size:13.5px; color:var(--lb-mist); line-height:1.45; }
  .wb-dist-note b{ font-family:'Inter', sans-serif; font-style:normal; font-weight:700; color:var(--lb-gold-dark); font-size:12px; }

  /* --- Funnel ------------------------------------------------------------------ */
  .wb-funnel{ padding:15px 16px 13px; }
  .wb-f-stage{ margin-bottom:4px; }
  .wb-f-top{ display:flex; justify-content:space-between; align-items:baseline; font-size:12.5px; color:var(--lb-mist); margin-bottom:5px; }
  .wb-f-top b{ font-size:15px; color:var(--lb-ink); font-weight:700; }
  .wb-f-bar{ height:14px; border-radius:7px; background:var(--lb-night); overflow:hidden; }
  .wb-f-bar i{ display:block; height:100%; width:0; border-radius:7px; background:linear-gradient(to right, var(--lb-gold-bright), var(--lb-gold-dark)); transition:width .9s cubic-bezier(.22,.9,.3,1); }
  .wb-f-conv{ display:flex; align-items:center; gap:7px; margin:7px 0 9px; padding-left:4px; font-size:11px; color:var(--lb-mist); }
  .wb-f-conv .wb-arrow{ color:var(--lb-gold-dark); font-size:12px; }
  .wb-f-conv b{ color:var(--lb-gold-dark); font-weight:700; }
  .wb-f-foot{ margin-top:10px; padding-top:10px; border-top:1px dashed var(--wb-hairline-soft); font-family:'Cormorant Garamond', serif; font-style:italic; font-size:14.5px; color:var(--lb-mist); }
  .wb-f-foot b{ font-family:'Inter', sans-serif; font-style:normal; font-weight:700; color:var(--lb-gold-dark); font-size:13px; }

  /* --- Tagesrhythmus -------------------------------------------------------------- */
  .wb-rhythm-card{ padding:15px 16px 13px; }
  .wb-rhythm{ display:flex; align-items:flex-end; gap:2.5px; height:44px; }
  .wb-rhythm i{ flex:1; height:0; border-radius:2px 2px 0 0; background:color-mix(in srgb, var(--lb-gold) 30%, transparent); transition:height .8s cubic-bezier(.22,.9,.3,1); }
  .wb-rhythm i.peak{ background:var(--lb-gold-dark); }
  .wb-rhythm-x{ display:flex; justify-content:space-between; font-size:9.5px; color:var(--lb-mist); margin-top:6px; padding:0 1px; }

  @media (prefers-reduced-motion: reduce){
    .wb-sheet *{ transition-duration:.001ms !important; }
  }

  /* --- Werkbank: Partner-Verwaltung (MARGI-27) -------------------------- */
  .wb-seg{ position:relative; display:flex; background:var(--lb-night); border:1px solid var(--wb-hairline-soft); border-radius:999px; padding:3px; margin:6px 0 12px; }
  .wb-seg button{
    position:relative; z-index:1; flex:1; min-height:44px; border:0; background:none;
    font-family:'Inter', sans-serif; font-size:11.5px; font-weight:600; letter-spacing:.01em;
    color:var(--lb-mist); cursor:pointer; border-radius:999px; white-space:nowrap; padding:0 2px;
    transition:color .2s ease, background .25s ease, box-shadow .25s ease;
  }
  .wb-seg button.on{
    color:var(--lb-ink); background:var(--lb-surface);
    border:1px solid var(--wb-hairline-soft);
    box-shadow:0 4px 10px -6px color-mix(in srgb, var(--lb-ink) 35%, transparent);
  }
  .wb-seg button .wb-cnt{ font-size:10px; font-weight:700; color:var(--lb-gold-dark); background:color-mix(in srgb, var(--lb-gold) 18%, transparent); border-radius:99px; padding:1px 6px; margin-left:3px; }
  .wb-search{ display:flex; align-items:center; gap:9px; background:var(--lb-surface); border:1px solid var(--wb-hairline-soft); border-radius:12px; padding:0 13px; min-height:44px; margin-bottom:10px; }
  .wb-search svg{ flex:none; }
  .wb-search input{ flex:1; border:0; background:none; font-family:'Inter', sans-serif; font-size:14px; color:var(--lb-ink); outline:none; min-height:44px; }
  .wb-search input::placeholder{ color:var(--lb-mist); opacity:.8; }
  .wb-toolbar-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
  .wb-select{
    background:var(--lb-surface); border:1px solid var(--wb-hairline-soft); border-radius:999px;
    color:var(--lb-mist); font-family:'Inter', sans-serif; font-size:11.5px; font-weight:600;
    min-height:36px; padding:0 12px; outline:none;
  }
  .wb-count{ font-size:11.5px; color:var(--lb-mist); white-space:nowrap; }

  .wb-apply-card{
    border:1.5px dashed var(--lb-gold); border-radius:var(--wb-r);
    background:linear-gradient(135deg, color-mix(in srgb, var(--lb-gold-bright) 22%, transparent), color-mix(in srgb, var(--lb-surface) 90%, transparent));
    padding:14px 15px; margin-bottom:12px;
  }
  .wb-apply-head{ display:flex; align-items:center; gap:11px; margin-bottom:11px; }
  .wb-apply-head .wb-who b{ display:block; font-family:'Fraunces', serif; font-weight:500; font-size:16.5px; }
  .wb-apply-head .wb-who span{ font-size:12px; color:var(--lb-mist); }
  .wb-apply-tag{
    margin-left:auto; font-size:9.5px; font-weight:700; letter-spacing:.16em;
    color:var(--lb-gold-dark); text-transform:uppercase;
    border:1px solid var(--lb-gold); border-radius:99px; padding:4px 9px; background:var(--lb-surface); white-space:nowrap;
  }
  .wb-apply-channels{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:11px; }
  .wb-apply-channels span{
    font-size:10.5px; font-weight:600; color:var(--lb-mist);
    border:1px solid var(--wb-hairline-soft); border-radius:99px; padding:3px 9px; background:var(--lb-surface);
  }
  .wb-apply-actions{ display:flex; gap:9px; }
  .wb-btn{
    flex:1; min-height:44px; border-radius:999px; cursor:pointer;
    font-family:'Inter', sans-serif; font-size:12.5px; font-weight:600; letter-spacing:.10em;
    text-transform:uppercase; transition:transform .15s ease, opacity .2s ease;
  }
  .wb-btn:active{ transform:scale(.97); }
  .wb-btn-solid{ background:var(--lb-gold-dark); color:var(--lb-surface); border:1px solid var(--lb-gold-dark); }
  .wb-btn-ghost-ember{ background:none; color:var(--lb-ember); border:1px solid color-mix(in srgb, var(--lb-ember) 45%, transparent); }
  .wb-swipe-hint{ display:flex; align-items:center; gap:6px; font-size:11px; color:var(--lb-mist); margin:0 4px 8px; letter-spacing:.03em; }

  .wb-plist{ display:flex; flex-direction:column; gap:10px; }
  .wb-swipe-item{ position:relative; border-radius:var(--wb-r); overflow:hidden; }
  .wb-swipe-actions{ position:absolute; inset:0 0 0 auto; display:flex; width:216px; border-radius:var(--wb-r); overflow:hidden; }
  .wb-swipe-actions button{
    flex:1; border:0; cursor:pointer; font-family:'Inter', sans-serif;
    font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
    color:var(--lb-surface); white-space:nowrap;
  }
  .wb-swipe-actions .wb-act-open{ background:var(--lb-gold-dark); }
  .wb-swipe-actions .wb-act-payout{ background:var(--lb-ink); }
  .wb-swipe-actions .wb-act-pause{ background:var(--lb-ember); }
  .wb-swipe-content{
    position:relative; z-index:1; background:var(--lb-surface);
    border:1px solid var(--wb-hairline-soft); border-radius:var(--wb-r);
    box-shadow:var(--wb-card-shadow);
    display:flex; align-items:center; gap:10px; padding:13px 10px 13px 12px;
    touch-action:pan-y; cursor:grab; user-select:none; -webkit-user-select:none;
    transition:transform .28s cubic-bezier(.3,.9,.32,1); will-change:transform;
  }
  .wb-swipe-content.dragging{ transition:none; cursor:grabbing; }
  .wb-av{
    flex:none; width:44px; height:44px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-family:'Fraunces', serif; font-weight:500; font-size:16px; color:var(--lb-gold-dark);
    background:color-mix(in srgb, var(--lb-gold) 14%, transparent); border:1px solid color-mix(in srgb, var(--lb-gold) 40%, transparent);
  }
  .wb-p-meta{ flex:1; min-width:0; }
  .wb-p-meta .wb-name{ font-family:'Fraunces', serif; font-weight:500; font-size:16px; display:flex; align-items:center; gap:6px; white-space:nowrap; overflow:hidden; }
  .wb-p-meta .wb-live{ flex:none; width:7px; height:7px; border-radius:50%; background:var(--lb-gold-dark); box-shadow:0 0 0 3px color-mix(in srgb, var(--lb-gold) 18%, transparent); }
  .wb-p-meta .wb-facts{ display:flex; align-items:center; gap:7px; margin-top:4px; font-size:12px; color:var(--lb-mist); white-space:nowrap; overflow:hidden; }
  .wb-p-meta .wb-free{ font-weight:700; color:var(--lb-gold-dark); }
  .wb-p-code{
    font-family:'Inter', sans-serif; font-weight:600; font-size:11px; letter-spacing:.10em;
    color:var(--lb-gold-dark); background:color-mix(in srgb, var(--lb-gold) 12%, transparent);
    border:1px solid color-mix(in srgb, var(--lb-gold) 35%, transparent); border-radius:6px; padding:2px 6px;
  }
  .wb-stripe-badge{ flex:none; display:inline-flex; align-items:center; font-size:9px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:2px 7px; border-radius:99px; white-space:nowrap; }
  .wb-stripe-badge.ok{ color:var(--lb-gold-dark); background:color-mix(in srgb, var(--lb-gold) 14%, transparent); border:1px solid color-mix(in srgb, var(--lb-gold) 40%, transparent); }
  .wb-stripe-badge.miss{ color:var(--lb-ember); background:color-mix(in srgb, var(--lb-ember) 10%, transparent); border:1px solid color-mix(in srgb, var(--lb-ember) 32%, transparent); }
  .wb-more-btn{ flex:none; width:44px; height:44px; margin:-6px -6px -6px -4px; border:0; background:none; color:var(--lb-mist); font-size:19px; cursor:pointer; border-radius:50%; letter-spacing:.5px; }
  .wb-more-btn:active{ background:color-mix(in srgb, var(--lb-mist) 8%, transparent); }
  .wb-empty{ border:1.5px dashed var(--wb-hairline); border-radius:var(--wb-r); padding:34px 20px; text-align:center; color:var(--lb-mist); }
  .wb-empty .wb-glyph{ font-size:20px; color:var(--lb-gold); display:block; margin-bottom:8px; }
  .wb-empty p{ font-size:13.5px; font-weight:500; color:var(--lb-ink); margin:0; }
  .wb-empty em{ font-family:'Cormorant Garamond', serif; font-size:15px; display:block; margin-top:4px; }
  .wb-reject-card{ display:flex; align-items:center; gap:12px; padding:13px; opacity:.8; }
  .wb-reject-card .wb-av{ filter:grayscale(.6); }

  /* Floating-Auszahlungslauf-Button + Ergebnis-Sheet */
  #dashAdminAffiliates{ padding-bottom:24px; }
  .wb-payout-bar{ position:sticky; bottom:calc(env(safe-area-inset-bottom, 0px) + 88px); z-index:40; max-width:488px; margin:18px auto 0; }
  .wb-payout-bar button{
    width:100%; min-height:58px; border-radius:999px; cursor:pointer;
    background:var(--lb-ink); color:var(--lb-surface);
    border:1px solid color-mix(in srgb, var(--lb-gold-bright) 50%, transparent);
    box-shadow:0 14px 30px -12px color-mix(in srgb, var(--lb-ink) 55%, transparent);
    font-family:'Inter', sans-serif; text-align:left;
    display:flex; align-items:center; gap:11px; padding:8px 20px;
    transition:transform .15s ease, background .3s ease;
  }
  .wb-payout-bar button:active{ transform:scale(.98); }
  .wb-pb-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
  .wb-pb-head{ font-size:13px; font-weight:600; letter-spacing:.05em; }
  .wb-pb-sub{ font-size:10px; font-weight:500; letter-spacing:.01em; color:color-mix(in srgb, var(--lb-base) 75%, transparent); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .wb-payout-bar button.done{ background:var(--lb-gold-dark); border-color:var(--lb-gold-dark); }

  .wb-bottomsheet-backdrop{ position:fixed; inset:0; z-index:45; background:color-mix(in srgb, var(--lb-ink-dark) 42%, transparent); opacity:0; pointer-events:none; transition:opacity .3s ease; }
  .wb-bottomsheet-backdrop.show{ opacity:1; pointer-events:auto; }
  .wb-bottomsheet{
    position:fixed; left:0; right:0; bottom:0; z-index:46; max-width:520px; margin:0 auto;
    background:var(--lb-surface); border-top:1px solid var(--wb-hairline);
    border-radius:24px 24px 0 0;
    box-shadow:0 -20px 50px -20px color-mix(in srgb, var(--lb-ink-dark) 45%, transparent);
    padding:10px 18px 18px;
    transform:translateY(104%); visibility:hidden; pointer-events:none;
    transition:transform .34s cubic-bezier(.3,.9,.3,1), visibility 0s linear .34s;
    color:var(--lb-ink);
  }
  .wb-bottomsheet.show{ transform:none; visibility:visible; pointer-events:auto; transition:transform .34s cubic-bezier(.3,.9,.3,1); }
  .wb-sheet-grab{ display:block; width:38px; height:4px; border-radius:2px; background:var(--wb-hairline); margin:0 auto 12px; }
  .wb-bottomsheet h3{ font-family:'Fraunces', serif; font-weight:500; font-size:20px; margin:0; }
  .wb-sheet-sub{ font-family:'Cormorant Garamond', serif; font-style:italic; font-size:14px; color:var(--lb-mist); margin:2px 0 10px; }
  .wb-run-list{ border-top:1px dashed var(--wb-hairline-soft); max-height:40vh; overflow-y:auto; }
  .wb-run-row{ display:flex; align-items:baseline; flex-wrap:wrap; gap:2px 10px; padding:11px 2px; border-bottom:1px dashed var(--wb-hairline-soft); }
  .wb-run-who{ font-family:'Fraunces', serif; font-weight:500; font-size:15px; margin-right:auto; }
  .wb-run-state{ font-size:12px; font-weight:600; white-space:nowrap; }
  .wb-run-state.ok{ color:var(--lb-gold-dark); }
  .wb-run-state.warn{ color:var(--lb-ember); }
  .wb-run-state.skip{ color:var(--lb-mist); }
  .wb-run-why{ flex-basis:100%; font-size:11.5px; color:var(--lb-mist); }
  .wb-sheet-hint{ font-size:11.5px; color:var(--lb-mist); line-height:1.5; margin:12px 2px 14px; }

  /* --- Werkbank: Partner-Dashboard "Mein Bereich" (MARGI-28) ------------- */
  .wb-me-head{ display:flex; align-items:center; gap:12px; margin:8px 2px 16px; }
  .wb-me-head .wb-av{ width:50px; height:50px; font-size:18px; }
  .wb-me-head .wb-who b{ display:block; font-family:'Fraunces', serif; font-weight:500; font-size:20px; }
  .wb-status-pill{
    display:inline-flex; align-items:center; gap:5px; margin-top:4px;
    font-size:10px; font-weight:700; letter-spacing:.10em; text-transform:uppercase;
    border-radius:99px; padding:3px 10px;
    color:var(--lb-gold-dark); background:color-mix(in srgb, var(--lb-gold) 14%, transparent);
    border:1px solid color-mix(in srgb, var(--lb-gold) 40%, transparent);
  }
  .wb-status-pill.warn{ color:var(--lb-ember); background:color-mix(in srgb, var(--lb-ember) 10%, transparent); border-color:color-mix(in srgb, var(--lb-ember) 32%, transparent); }
  .wb-money{ display:grid; grid-template-columns:1fr 1.15fr 1fr; padding:16px 6px 14px; text-align:center; }
  .wb-money > div{ padding:2px 4px; min-width:0; }
  .wb-money > div + div{ border-left:1px dashed var(--wb-hairline-soft); }
  .wb-m-label{ font-size:9.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--lb-mist); display:block; margin-bottom:7px; }
  .wb-m-num{ font-weight:700; font-size:17px; line-height:1.05; display:block; letter-spacing:-.01em; white-space:nowrap; }
  .wb-m-num .wb-unit{ font-size:13px; color:var(--lb-mist); }
  .wb-m-sub{ display:block; font-size:9.5px; color:var(--lb-mist); line-height:1.4; margin-top:5px; padding:0 2px; }
  .wb-money .focus .wb-m-label{ color:var(--lb-gold-dark); }
  .wb-money .focus .wb-m-num{ font-size:21px; color:var(--lb-gold-dark); }
  .wb-threshold{ padding:13px 15px 14px; margin-top:10px; }
  .wb-th-bar{ height:10px; border-radius:5px; background:var(--lb-night); overflow:hidden; margin-bottom:9px; }
  .wb-th-bar i{ display:block; height:100%; width:0; border-radius:5px; background:linear-gradient(to right, var(--lb-gold-bright), var(--lb-gold-dark)); transition:width .9s cubic-bezier(.22,.9,.3,1); }
  .wb-th-text{ font-size:12px; color:var(--lb-mist); line-height:1.55; }
  .wb-th-text b{ color:var(--lb-gold-dark); font-weight:700; white-space:nowrap; }
  .wb-stripe-off{
    border:1.5px solid color-mix(in srgb, var(--lb-ember) 42%, transparent);
    border-radius:var(--wb-r);
    background:linear-gradient(135deg, color-mix(in srgb, var(--lb-ember) 9%, transparent), var(--lb-surface) 55%);
    padding:15px 16px;
  }
  .wb-stripe-off b{ display:block; font-family:'Fraunces', serif; font-weight:500; font-size:17.5px; margin-bottom:5px; }
  .wb-stripe-off p{ font-size:12.5px; color:var(--lb-mist); line-height:1.5; margin:0 0 12px; }
  .wb-stripe-off .wb-btn{ display:block; width:100%; }
  .wb-stripe-on{ padding:13px 15px; }
  .wb-so-row{ display:flex; align-items:center; gap:12px; }
  .wb-so-tick{
    flex:none; width:34px; height:34px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; font-size:15px;
    color:var(--lb-gold-dark); background:color-mix(in srgb, var(--lb-gold) 16%, transparent);
    border:1px solid color-mix(in srgb, var(--lb-gold) 40%, transparent);
  }
  .wb-so-meta{ min-width:0; }
  .wb-so-meta b{ display:block; font-size:13.5px; font-weight:600; }
  .wb-so-meta span{ display:block; font-size:11.5px; color:var(--lb-mist); margin-top:2px; }
  .wb-link-btn{
    display:inline-flex; align-items:center; margin:2px 0 0 46px; min-height:44px; padding:0 2px;
    background:none; border:0; cursor:pointer; color:var(--lb-gold-dark);
    font-family:'Inter', sans-serif; font-size:11.5px; font-weight:600; letter-spacing:.04em; white-space:nowrap;
  }
  .wb-copy-card{ display:flex; align-items:center; gap:11px; padding:12px 12px 12px 15px; }
  .wb-copy-card + .wb-copy-card{ margin-top:10px; }
  .wb-c-meta{ flex:1; min-width:0; }
  .wb-c-label{ font-size:9.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--lb-mist); display:block; margin-bottom:4px; }
  .wb-c-value{ font-family:ui-monospace, 'Inter', monospace; font-size:13.5px; font-weight:600; letter-spacing:.02em; color:var(--lb-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
  .wb-c-value.code{ font-size:19px; letter-spacing:.30em; color:var(--lb-gold-dark); font-weight:700; }
  .wb-copy-btn{
    flex:none; min-width:92px; min-height:44px; border-radius:999px; cursor:pointer;
    background:none; border:1px solid var(--lb-gold); color:var(--lb-gold-dark);
    font-family:'Inter', sans-serif; font-size:11px; font-weight:700; letter-spacing:.12em;
    text-transform:uppercase; transition:all .2s ease;
  }
  .wb-copy-btn:active{ transform:scale(.95); }
  .wb-copy-btn.copied{ background:var(--lb-gold-dark); color:var(--lb-surface); border-color:var(--lb-gold-dark); animation:wb-pulse .45s ease; }
  @keyframes wb-pulse{ 0%{transform:scale(1)} 40%{transform:scale(1.07)} 100%{transform:scale(1)} }
  .wb-prov-card{ padding:6px 16px; }
  .wb-prov-row{ display:flex; align-items:center; gap:11px; padding:11.5px 2px; }
  .wb-prov-row + .wb-prov-row{ border-top:1px dashed var(--wb-hairline-soft); }
  .wb-prov-date{ flex:none; width:44px; font-size:11.5px; color:var(--lb-mist); font-weight:500; white-space:nowrap; }
  .wb-prov-what{ flex:1; min-width:0; font-size:13.5px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .wb-prov-what .wb-k-sub{ display:block; font-size:10.5px; color:var(--lb-mist); font-weight:400; }
  .wb-prov-amt{ flex:none; font-size:14.5px; font-weight:700; color:var(--lb-gold-dark); white-space:nowrap; }
  .wb-prov-state{ flex:none; font-size:9.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; border-radius:99px; padding:3px 8px; white-space:nowrap; }
  .wb-st-offen{ color:var(--lb-mist); background:color-mix(in srgb, var(--lb-mist) 10%, transparent); border:1px solid color-mix(in srgb, var(--lb-mist) 22%, transparent); }
  .wb-st-frei{ color:var(--lb-gold-dark); background:color-mix(in srgb, var(--lb-gold) 16%, transparent); border:1px solid color-mix(in srgb, var(--lb-gold) 40%, transparent); }
  .wb-st-aus{ color:var(--lb-rose); background:color-mix(in srgb, var(--lb-rose) 12%, transparent); border:1px solid color-mix(in srgb, var(--lb-rose) 38%, transparent); }
  .wb-st-storno{ color:var(--lb-ember); background:color-mix(in srgb, var(--lb-ember) 10%, transparent); border:1px solid color-mix(in srgb, var(--lb-ember) 30%, transparent); }
  .wb-chan-row{ display:flex; align-items:center; gap:9px; padding:10px 2px; font-size:12.5px; color:var(--lb-mist); }
  .wb-chan-row + .wb-chan-row{ border-top:1px dashed var(--wb-hairline-soft); }
  .wb-chan-row b{ color:var(--lb-ink); font-weight:600; font-size:13px; }
  .wb-kv-row{ display:flex; justify-content:space-between; gap:10px; padding:9px 2px; font-size:12.5px; }
  .wb-kv-row + .wb-kv-row{ border-top:1px dashed var(--wb-hairline-soft); }
  .wb-kv-row .k{ color:var(--lb-mist); }
  .wb-kv-row .v{ font-weight:600; text-align:right; min-width:0; overflow-wrap:anywhere; }