/* =========================================================
     1. BRAND-TOKENS (Style-Spec 1) — nicht aendern
     ========================================================= */
  :root {
    --brand-accent:        #c00;
    --brand-accent-hover:  #d11;
    --brand-font:          system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --brand-radius-card:   8px;
    --brand-radius-input:  4px;
    --brand-radius-pill:   3px;
  }

  /* =========================================================
     2.1 DARK-THEME (Default)
     ========================================================= */
  :root {
    --bg-body:        #0e0e10;
    --bg-card:        #18181b;
    --bg-input:       #1f1f23;
    --bg-nav:         rgba(10,10,12,.78);
    --bg-hover:       #25252a;
    --bg-code:        #2a2a2e;
    --bg-subtle:      #15151a;

    /* ---- 12.09.2026: bisher NIRGENDS definiert (Mark: "jetzt das mit dem
       hellen modus"). Alle Nutzer trugen dunkle Rueckfallwerte in sich, im
       hellen Thema stand deshalb dunkle Flaeche unter dunkler Schrift.
       Betroffen waren: konto/daten (Eingabefelder, 1,05:1 - man sah nicht,
       was man tippt), erstellung + warenkorb (Kacheln und Kacheltitel),
       js/dls-gestalten.js (Guthabenzeile), widerruf + datenschutz (Rahmen)
       und js/dls-core.js (Hover-Grund der Rueckweg-Leiste). */
    --bg-elevated:    #16161a;
    --bg-card-hover:  #1d1d22;
    --bg-soft:        rgba(255,255,255,.03);
    --border:         #3a3a44;
    --text-default:   #e8e8ec;

    --text-primary:   #ededee;
    --text-secondary: #a1a1aa;
    --text-muted:     #71717a;
    --text-faint:     #52525b;
    --text-bright:    #fafafa;

    --border-default: #2a2a30;
    --border-hover:   #3a3a42;
    --border-active:  var(--brand-accent);
    --shadow-card:    0 1px 3px rgba(0,0,0,.4);
    --shadow-hover:   0 8px 24px rgba(0,0,0,.5);

    /* radial glow accent fuer Hero (dark only) */
    --hero-glow:      radial-gradient(60% 50% at 50% 0%, rgba(204,0,0,.10), transparent 70%);
    --spot-color:     rgba(204,0,0,.18);
    --spot-color-2:   rgba(255,255,255,.04);
  }

  /* 2.2 LIGHT-THEME (User-Toggle) */
  [data-theme="light"] {
    --bg-body:        #fafafa;
    --bg-card:        #fff;
    --bg-input:       #fff;
    --bg-nav:         rgba(255,255,255,.82);
    --bg-hover:       #f2f2f2;
    --bg-code:        #f4f4f4;
    --bg-subtle:      #f5f5f5;

    /* 12.09.2026, Gegenstueck zum dunklen Thema. --border ist bewusst etwas
       kraeftiger als --border-default (#e5e5e5) - genau wie im Dunklen
       (#3a3a44 gegen #2a2a30), denn er traegt sichtbare Kastenrahmen. */
    --bg-elevated:    #ffffff;
    --bg-card-hover:  #f2f2f2;
    --bg-soft:        rgba(0,0,0,.03);
    --border:         #d4d4d8;
    --text-default:   #1a1a1a;

    --text-primary:   #1a1a1a;
    --text-secondary: #555;
    --text-muted:     #777;
    --text-faint:     #aaa;
    --text-bright:    #000;

    --border-default: #e5e5e5;
    --border-hover:   #ccc;
    --border-active:  var(--brand-accent);
    --shadow-card:    0 1px 3px rgba(0,0,0,.06);
    --shadow-hover:   0 4px 12px rgba(0,0,0,.10);

    --hero-glow:      radial-gradient(60% 50% at 50% 0%, rgba(204,0,0,.06), transparent 70%);
    --spot-color:     rgba(204,0,0,.08);
    --spot-color-2:   rgba(0,0,0,.025);
  }

  /* =========================================================
     4. SPACING & LAYOUT TOKENS
     ========================================================= */
  :root {
    --layout-max:    1400px;
    --pad-body:      16px;
    --gap-section:   24px;
    --pad-card:      22px;
    --pad-section:   clamp(48px, 8vw, 96px);
    --gap-hero:      clamp(24px, 5vw, 64px);
  }

  /* =========================================================
     RESET + BASE
     ========================================================= */
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    font-family: var(--brand-font);
    background: var(--bg-body);
    color: var(--text-primary);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    position: relative;
  }

  /* =========================================================
     SPOTLIGHT CURSOR (Pointer fine only; reduced-motion: off)
     ========================================================= */
  .spotlight {
    position: fixed;
    top: 0; left: 0;
    width: 600px; height: 600px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle at center,
      var(--spot-color) 0%,
      var(--spot-color-2) 30%,
      transparent 60%);
    transition: opacity .35s ease;
    will-change: transform, opacity;
    mix-blend-mode: screen;
  }
  [data-theme="light"] .spotlight { mix-blend-mode: multiply; }
  body.spot-on .spotlight { opacity: 1; }
  @media (hover: none), (prefers-reduced-motion: reduce) {
    .spotlight { display: none !important; }
  }
  img, svg { display: block; max-width: 100%; }
  a { color: inherit; text-decoration: none; }
  button { font-family: inherit; cursor: pointer; }

  .wrap {
    max-width: var(--layout-max);
    margin: 0 auto;
    padding: 0 var(--pad-body);
  }

  /* =========================================================
     TOPNAV (sticky, blur-glass)
     ========================================================= */
  .topnav {
    position: sticky; top: 0; z-index: 50;
    background: var(--bg-nav);
    backdrop-filter: saturate(140%) blur(12px);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    border-bottom: 1px solid var(--border-default);
  }
  .topnav-inner {
    max-width: var(--layout-max);
    margin: 0 auto;
    padding: 12px var(--pad-body);
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .nav-brand {
    font-weight: 700;
    color: var(--text-bright);
    font-size: 16px;
    letter-spacing: -.01em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    transition: transform .2s cubic-bezier(.2,.7,.2,1);
  }
  .nav-brand:hover { transform: translateX(-1px); }
  .nav-brand:hover .brand-mark { transform: rotate(-8deg) scale(1.08); }
  .nav-brand .brand-mark {
    width: 24px; height: 24px;
    display: inline-block;
    background: url("/brand/brand-icon-64.png?v=2") center/contain no-repeat;
    border-radius: 5px;
    position: relative;
    transition: transform .25s cubic-bezier(.2,.7,.2,1), filter .2s;
  }
  .nav-brand:hover .brand-mark { filter: drop-shadow(0 0 4px rgba(204,0,0,.55)); }
  .nav-brand .brand-mark::after { content: none; }

  .nav-items {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
  }
  .nav-items a {
    color: var(--text-secondary);
    font-size: 14px;
    padding: 8px 12px;
    border-radius: var(--brand-radius-input);
    transition: color .15s, background .15s;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }
  .nav-items a:hover {
    color: var(--text-bright);
    background: var(--bg-hover);
  }
  .nav-divider {
    width: 1px; height: 20px;
    background: var(--border-default);
    margin: 0 4px;
  }

  .icon-btn {
    background: transparent;
    border: 1px solid var(--border-default);
    border-radius: var(--brand-radius-input);
    color: var(--text-secondary);
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: color .15s, background .15s, border-color .15s;
  }
  .icon-btn:hover {
    color: var(--text-bright);
    background: var(--bg-hover);
    border-color: var(--border-hover);
    transform: translateY(-1px);
  }
  .icon-btn:active { transform: translateY(0); }
  .icon-btn svg { width: 16px; height: 16px; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
  .theme-toggle:hover .sun { transform: rotate(45deg); }
  .theme-toggle:hover .moon { transform: rotate(-15deg); }

  .login-link {
    color: var(--text-bright) !important;
    border: 1px solid var(--border-default);
    padding: 8px 14px !important;
    font-weight: 500;
    transition: border-color .15s, background .15s, transform .12s !important;
  }
  .login-link:hover {
    border-color: var(--brand-accent);
    background: rgba(204,0,0,.06);
  }

  /* Theme toggle: show sun in dark, moon in light */
  .theme-toggle .sun { display: block; }
  .theme-toggle .moon { display: none; }
  [data-theme="light"] .theme-toggle .sun { display: none; }
  [data-theme="light"] .theme-toggle .moon { display: block; }

  /* Hamburger (mobile only) */
  .nav-burger {
    display: none;
    background: transparent;
    border: 1px solid var(--border-default);
    border-radius: var(--brand-radius-input);
    color: var(--text-bright);
    width: 40px; height: 40px;
    margin-left: auto;
    align-items: center; justify-content: center;
  }
  .nav-burger svg { width: 18px; height: 18px; }

  /* Mobile drawer (offscreen by default) */
  .nav-drawer {
    display: none;
  }

  /* =========================================================
     HERO
     ========================================================= */
  .hero {
    position: relative;
    padding: clamp(40px, 7vw, 80px) 0 clamp(48px, 8vw, 96px);
    overflow: hidden;
  }
  .hero::before {
    content: "";
    position: absolute; inset: 0;
    background: var(--hero-glow);
    pointer-events: none;
    z-index: 0;
  }
  .hero-inner {
    position: relative; z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--gap-hero);
    align-items: center;
  }

  .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px 5px 6px;
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: 99px;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 24px;
  }
  .hero-eyebrow .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--brand-accent);
    box-shadow: 0 0 0 3px rgba(204,0,0,.15);
  }

  h1.hero-headline {
    color: var(--text-bright);
    font-size: clamp(36px, 5.5vw, 60px);
    line-height: 1.04;
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 0 0 20px;
    text-wrap: balance;
  }
  h1.hero-headline .accent {
    background: conic-gradient(from 200deg at 50% 50%, #c00 0%, #ff4a3a 28%, #ff7a4a 45%, #ff3a3a 62%, #c00 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    background-size: 200% 200%;
  }

  .hero-lead {
    color: var(--text-secondary);
    font-size: clamp(16px, 1.6vw, 18px);
    line-height: 1.55;
    max-width: 560px;
    margin: 0 0 28px;
    text-wrap: pretty;
  }
  .hero-lead strong {
    color: var(--text-bright);
    font-weight: 600;
  }

  .hero-cta-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
  }
  .btn-cta {
    background: var(--brand-accent);
    color: #fff;
    border: none;
    padding: 14px 24px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
    transform: translate3d(var(--mag-x, 0px), var(--mag-y, 0px), 0);
    transition: transform .35s cubic-bezier(.2,.7,.2,1), background .15s, box-shadow .25s;
    box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 6px 14px rgba(204,0,0,.18);
  }
  .btn-cta::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform .55s cubic-bezier(.2,.7,.2,1);
    pointer-events: none;
  }
  .btn-cta:hover {
    background: var(--brand-accent-hover);
    box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 12px 28px rgba(204,0,0,.32);
  }
  .btn-cta:hover::before { transform: translateX(100%); }
  .btn-cta:active { transition-duration: .08s; }
  .btn-cta svg { width: 16px; height: 16px; transition: transform .25s cubic-bezier(.2,.7,.2,1); }
  .btn-cta:hover svg { transform: translateX(4px); }

  /* Deaktiviert (z.B. Bestell-Button vor gueltiger Auswahl): klar ausgegraut, nicht wie aktiv */
  .btn-cta:disabled,
  .btn-cta[disabled] {
    background: var(--bg-hover);
    color: var(--text-muted);
    box-shadow: none;
    cursor: not-allowed;
  }
  .btn-cta:disabled::before,
  .btn-cta[disabled]::before { display: none; }
  .btn-cta:disabled:hover,
  .btn-cta[disabled]:hover { background: var(--bg-hover); box-shadow: none; }
  .btn-cta:disabled svg,
  .btn-cta[disabled] svg { transform: none; opacity: .55; }

  .hero-secondary-links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    font-size: 14px;
  }
  .hero-secondary-links a {
    color: var(--text-secondary);
    padding: 6px 0;
    border-bottom: 1px solid transparent;
    transition: color .15s, border-color .15s;
  }
  .hero-secondary-links a:hover {
    color: var(--text-bright);
    border-color: var(--brand-accent);
  }
  .hero-secondary-links .sep {
    color: var(--text-faint);
    user-select: none;
  }

  /* Hero visual: stacked image layers fuer Crossfade */
  /* Hero visual: stacked image layers + Canvas-Partikel-Overlay */
  .hero-visual {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    max-width: 520px;
    margin-left: auto;
    border-radius: 14px;
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-hover);
    transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .2s, box-shadow .25s;
  }
  .hero-visual.is-busy { cursor: progress; }
  .hero-visual:hover {
    transform: translateY(-3px);
    border-color: var(--brand-accent);
    box-shadow: 0 18px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(204,0,0,.25);
  }
  [data-theme="light"] .hero-visual:hover {
    box-shadow: 0 18px 40px rgba(0,0,0,.18), 0 0 0 1px rgba(204,0,0,.35);
  }
  .hero-particles {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none;
    opacity: 0;
    z-index: 1;
    transition: opacity .12s ease;
  }
  .hero-particles.is-on { opacity: 1; }
  .hero-visual-meta { z-index: 3; }
  .hero-visual.is-busy .hv-counter::after {
    content: "";
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--brand-accent);
    margin-left: 6px;
    vertical-align: middle;
    animation: dls-pulse .8s ease-in-out infinite;
  }
  @keyframes dls-pulse {
    0%,100% { opacity: .3; transform: scale(.8); }
    50%     { opacity: 1;  transform: scale(1.2); }
  }
  .hero-visual-layer {
    position: absolute; inset: 0;
    opacity: 0;
    transition: opacity .45s ease;
    background: var(--bg-subtle);
  }
  .hero-visual-layer.is-active { opacity: 1; }
  .hero-visual-layer svg {
    width: 100%; height: 100%;
  }

  /* Style-Caption oben rechts in der Hero-Visual */
  .hero-visual-meta {
    position: absolute;
    top: 12px; left: 12px; right: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    z-index: 2;
    pointer-events: none;
  }
  .hv-tag {
    background: rgba(0,0,0,.55);
    color: #fafafa;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
    padding: 5px 9px;
    border-radius: 99px;
    border: 1px solid rgba(255,255,255,.12);
  }
  .hv-counter {
    background: rgba(0,0,0,.55);
    color: #fafafa;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-size: 11px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    padding: 5px 9px;
    border-radius: 99px;
    border: 1px solid rgba(255,255,255,.12);
  }

  /* Style-Switcher unter dem Hero-Bild */
  .style-switcher {
    margin-top: 18px;
    max-width: 520px;
    margin-left: auto;
  }
  .style-switcher-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
    margin-bottom: 10px;
  }
  .style-switcher-label .hint {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-faint);
  }
  .style-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }
  .style-btn {
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    color: var(--text-bright);
    padding: 0;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    min-height: 80px;
    display: block;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .18s, transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .2s;
    -webkit-tap-highlight-color: transparent;
  }
  .style-btn:hover {
    border-color: var(--border-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
  }
  .style-btn:active { transform: translateY(0); }
  .style-btn.is-active {
    border-color: var(--brand-accent);
    box-shadow: 0 0 0 1px var(--brand-accent), 0 6px 16px rgba(204,0,0,.22);
  }
  /* Foto fuellt den Button (JS setzt background-image inline); Gradient = Fallback */
  .style-btn .sb-swatch {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background-color: var(--bg-subtle);
    background-image: linear-gradient(135deg, var(--sb-a, #2a2a2a), var(--sb-b, #555));
    background-size: cover;
    background-position: center;
    transition: transform .3s cubic-bezier(.2,.7,.2,1), filter .2s;
  }
  .style-btn:hover .sb-swatch,
  .style-btn.is-active .sb-swatch { transform: scale(1.05); }
  .style-btn:not(.is-active) .sb-swatch { filter: saturate(.85) brightness(.8); }
  .style-btn .sb-name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding: 16px 8px 7px;
    line-height: 1.15;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,.85);
    background: linear-gradient(to top, rgba(0,0,0,.9), rgba(0,0,0,.5) 55%, transparent);
  }

  /* =========================================================
     SECTIONS COMMON
     ========================================================= */
  section.band {
    padding: var(--pad-section) 0;
    border-top: 1px solid var(--border-default);
  }
  section.band.subtle {
    background: var(--bg-subtle);
  }
  .section-head {
    max-width: 720px;
    margin: 0 auto clamp(32px, 5vw, 56px);
    text-align: center;
  }
  .section-eyebrow {
    display: inline-block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 600;
    color: var(--brand-accent);
    margin-bottom: 12px;
  }
  .section-title {
    color: var(--text-bright);
    font-size: clamp(26px, 3.5vw, 38px);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -.015em;
    margin: 0 0 12px;
    text-wrap: balance;
  }
  .section-sub {
    color: var(--text-secondary);
    font-size: 16px;
    margin: 0;
    text-wrap: pretty;
  }

  /* =========================================================
     "WIE ES FUNKTIONIERT" — 3 Schritte verbunden via Bridges
     ========================================================= */
  .steps-flow {
    display: grid;
    grid-template-columns: minmax(0,1fr) clamp(56px, 7vw, 110px) minmax(0,1fr) clamp(56px, 7vw, 110px) minmax(0,1fr);
    gap: 0;
    align-items: stretch;
  }
  .step {
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--brand-radius-card);
    padding: 28px 24px;
    position: relative;
    overflow: hidden;
    transition: border-color .18s, transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s;
  }
  .step::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--brand-accent), transparent);
    transform: translateX(-100%);
    transition: transform .5s cubic-bezier(.2,.7,.2,1);
  }
  .step:hover {
    border-color: var(--brand-accent);
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
  }
  .step:hover::before { transform: translateX(0); }

  /* Bridge zwischen Cards: Linie + glowing Funke + Flow-Dot */
  .step-bridge {
    position: relative;
    min-height: 100%;
  }
  .bridge-line {
    position: absolute;
    top: 78px;
    left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--border-default) 25%, var(--border-default) 75%, transparent 100%);
    transition: background .25s;
  }
  .bridge-star {
    position: absolute;
    top: 78px;
    left: 50%;
    width: 28px; height: 28px;
    transform: translate(-50%, -50%);
    color: var(--text-muted);
    z-index: 2;
    transition: transform .35s cubic-bezier(.2,.7,.2,1), color .25s;
  }
  .bridge-star::before {
    content: "";
    position: absolute;
    inset: -18px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(204,0,0,.45) 0%, rgba(204,0,0,.18) 35%, transparent 70%);
    opacity: 0;
    transition: opacity .4s;
    pointer-events: none;
  }
  .bridge-star svg { width: 100%; height: 100%; fill: currentColor; display: block; position: relative; z-index: 1; }
  .bridge-dot {
    position: absolute;
    top: 78px;
    left: 0;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--brand-accent);
    box-shadow: 0 0 8px var(--brand-accent), 0 0 16px rgba(204,0,0,.5);
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
  }

  .steps-flow:has(.step:hover) .bridge-line {
    background: linear-gradient(90deg, transparent 0%, var(--brand-accent) 25%, var(--brand-accent) 75%, transparent 100%);
  }
  .steps-flow:has(.step:hover) .bridge-star {
    color: var(--brand-accent);
    transform: translate(-50%, -50%) scale(1.25) rotate(45deg);
  }
  .steps-flow:has(.step:hover) .bridge-star::before { opacity: 1; }
  .steps-flow:has(.step:hover) .bridge-dot {
    animation: bridge-flow-h 1.4s cubic-bezier(.4,0,.6,1) infinite;
  }
  @keyframes bridge-flow-h {
    0%   { left: 0%;   opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { left: 100%; opacity: 0; }
  }

  /* =========================================================
     VERCEL-STIL BORDER-SPOTLIGHT
     Cursor-Position als CSS-Var --mx/--my (px) gesetzt via JS.
     Mask-Trick zeigt nur den Border-Ring.
     ========================================================= */
  .style-tile, .price-card { position: relative; }
  .style-tile::before, .price-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
                rgba(204,0,0,.85) 0%, rgba(204,0,0,.35) 35%, transparent 65%);
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity .25s;
    pointer-events: none;
    z-index: 1;
  }
  .style-tile:hover::before, .price-card:hover::before { opacity: 1; }
  .price-card.featured::before { opacity: .35; }
  .style-tile:hover { border-color: var(--border-default); }
  .price-card:hover { border-color: var(--border-default); }
  .price-card.featured:hover { border-color: var(--brand-accent); }
  .step-num {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 12px;
    color: var(--brand-accent);
    font-weight: 600;
    letter-spacing: .1em;
    margin-bottom: 14px;
  }
  .step-icon {
    width: 40px; height: 40px;
    border-radius: 8px;
    background: var(--bg-hover);
    color: var(--text-bright);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 16px;
    transition: transform .3s cubic-bezier(.2,.7,.2,1), background .2s, color .2s;
  }
  .step:hover .step-icon {
    transform: rotate(-6deg) scale(1.06);
    background: var(--brand-accent);
    color: #fff;
  }
  .step-icon svg { width: 20px; height: 20px; transition: transform .3s; }
  .step h3 {
    color: var(--text-bright);
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 8px;
  }
  .step p {
    color: var(--text-secondary);
    font-size: 14.5px;
    margin: 0;
    line-height: 1.55;
  }
  .step .step-meta {
    color: var(--text-muted);
    font-size: 12.5px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--border-default);
  }

  /* =========================================================
     STIL-GALERIE PREVIEW
     ========================================================= */
  .style-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
  }
  .style-tile {
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--brand-radius-card);
    overflow: hidden;
    transition: border-color .18s, transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s;
    display: flex;
    flex-direction: column;
  }
  .style-tile:hover {
    border-color: var(--brand-accent);
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
  }
  .style-tile-media {
    aspect-ratio: 1 / 1;
    background: var(--bg-subtle);
    position: relative;
    overflow: hidden;
  }
  .style-tile-media svg {
    width: 100%; height: 100%;
    transition: transform .5s cubic-bezier(.2,.7,.2,1);
  }
  .style-tile:hover .style-tile-media svg { transform: scale(1.06); }
  .style-tile-media::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.35));
    opacity: 0;
    transition: opacity .25s;
    pointer-events: none;
  }
  .style-tile:hover .style-tile-media::after { opacity: 1; }
  .style-tile-name {
    transition: color .18s;
  }
  .style-tile:hover .style-tile-name { color: var(--brand-accent); }
  .style-tile-body {
    padding: 14px 16px 16px;
  }
  .style-tile-name {
    color: var(--text-bright);
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 2px;
  }
  .style-tile-sub {
    color: var(--text-muted);
    font-size: 12.5px;
  }
  .style-gallery-foot {
    margin-top: 32px;
    display: flex;
    justify-content: center;
  }
  .btn-ghost {
    background: transparent;
    border: 1px solid var(--border-default);
    color: var(--text-primary);
    padding: 12px 22px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: border-color .15s, background .15s;
  }
  .btn-ghost {
    transition: border-color .15s, background .15s, transform .12s, color .15s;
  }
  .btn-ghost:hover {
    border-color: var(--brand-accent);
    background: var(--bg-hover);
    color: var(--text-bright);
  }
  .btn-ghost:hover svg { transform: translateX(3px); }
  .btn-ghost svg { width: 14px; height: 14px; transition: transform .25s cubic-bezier(.2,.7,.2,1); }

  /* =========================================================
     PAKETE
     ========================================================= */
  .pricing {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .price-card {
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--brand-radius-card);
    padding: 28px 26px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: relative;
    transition: border-color .18s, transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s;
  }
  .price-card:hover {
    border-color: var(--brand-accent);
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
  }
  .price-card.featured {
    border-color: var(--brand-accent);
    box-shadow: 0 0 0 1px var(--brand-accent), 0 12px 32px rgba(204,0,0,.12);
  }
  .price-card.featured:hover {
    transform: translateY(-5px);
    border-color: var(--brand-accent);
    box-shadow: 0 0 0 1px var(--brand-accent), 0 18px 42px rgba(204,0,0,.22);
  }
  .price-card .num {
    transition: transform .25s cubic-bezier(.2,.7,.2,1), color .2s;
    transform-origin: left bottom;
  }
  .price-card:hover .num {
    transform: scale(1.04);
    color: var(--brand-accent);
  }
  .price-features li {
    transition: transform .18s, color .18s;
  }
  .price-features li svg {
    transition: transform .18s;
  }
  .price-card:hover .price-features li:hover svg { transform: scale(1.2); }
  .price-badge {
    position: absolute;
    top: -10px; left: 24px;
    background: var(--brand-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 99px;
    box-shadow: 0 4px 12px rgba(204,0,0,.32);
    transition: transform .25s cubic-bezier(.2,.7,.2,1);
  }
  .price-card:hover .price-badge { transform: translateY(-2px) rotate(-3deg); }
  .price-name {
    font-size: 13px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 600;
  }
  .price-amount {
    display: flex;
    align-items: baseline;
    gap: 6px;
  }
  .price-amount .num {
    color: var(--text-bright);
    font-size: 42px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1;
  }
  .price-amount .unit {
    color: var(--text-secondary);
    font-size: 14px;
  }
  .price-per {
    color: var(--text-secondary);
    font-size: 13px;
    margin-top: 4px;
  }
  .price-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .price-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: var(--text-primary);
  }
  .price-features li svg {
    flex-shrink: 0;
    width: 16px; height: 16px;
    color: var(--brand-accent);
    margin-top: 2px;
  }
  .price-cta {
    margin-top: auto;
    min-height: 44px;
  }
  .price-card .btn-cta { width: 100%; justify-content: center; }
  .price-card .btn-ghost { width: 100%; justify-content: center; }

  .pricing-foot {
    margin-top: 28px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
  }
  .pricing-foot strong { color: var(--text-secondary); font-weight: 500; }

  /* =========================================================
     FOOTER
     ========================================================= */
  .site-footer {
    border-top: 1px solid var(--border-default);
    background: var(--bg-subtle);
    /* 🔴 07.09.2026: Vorher margin-top: 0 - der Fuss stiess ohne Luft an
       den Inhalt. Mark dazu: "da sieht aus wie hingepappt". Gemessen:
       Fuss margin-top 0, Inhalt darueber margin-bottom 0, also gar kein
       Abstand. Warum die 0 dort stand, sagt kein Kommentar.
       clamp statt fester Wert: auf dem Handy frisst 72px zu viel Platz,
       am breiten Schirm wirken 40px geizig. Spart eine Mediaquery. */
    margin-top: clamp(40px, 6vw, 72px);
    padding: 56px 0 32px;
    color: var(--text-secondary);
    font-size: 14px;
  }
  .footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 32px;
  }
  /* 03.09.2026: Der Heft-Knopf in der Kopfzeile. Stand bis heute nur im
     Bauskript der Startseite - Mark sah ihn auf /gestalten/ fehlen. */
  .nav-heft {
    display: inline-flex; align-items: center; gap: 6px;
    margin-left: 14px; padding: 4px 11px;
    border: 1px solid var(--border-default, #2c2c32); border-radius: 10px;
    color: var(--text-secondary, #9a9aa2); font-size: 12.5px; font-weight: 600;
    text-decoration: none; white-space: nowrap;
  }
  .nav-heft:hover { color: var(--text-primary, #fff); border-color: #555; }

  /* 03.09.2026 (Mark): "zu gross, das ist dann die naechste seite".
     Sobald Fotos hochgeladen sind, braucht das Feld keine 207 px mehr -
     es schiebt sonst den Weiter-Knopf aus dem Bild. Anklickbar bleibt es. */
  .upload-zone.hat-fotos { padding: 13px 18px; }
  .upload-zone.hat-fotos .uz-title { font-size: 14px; margin: 0; }
  .upload-zone.hat-fotos .uz-hint,
  .upload-zone.hat-fotos > svg { display: none; }

  /* ===== 03.09.2026: gemeinsamer Fuss =====================================
     Diese Regeln standen bis heute nur im Bauskript der Startseite. Mark sah
     den Bruch auf /gestalten/ ("da ist noch die alte seite"). Ab hier gelten
     sie ueberall, wo dls-base.css eingebunden ist - also auf 18 Seiten. */

  /* Fuenfte Spalte nur am PC. 🔴 Die Regel traegt .site-footer davor, um
     gegen die Grundregel zu gewinnen - dadurch schlaegt sie aber auch die
     Handy-Regeln in ihren @media-Bloecken (Spezifitaet sticht Medienabfrage).
     Deshalb steckt sie selbst in einer Medienabfrage. Am 02.09. standen ohne
     das vier Spalten auf 375 px. */
  @media (min-width: 1025px) {
    .site-footer .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr auto; }
  }

  /* Eintraege untereinander, Symbol und Name nebeneinander. Die Liste selbst
     kommt aus .ft-col ul; hier steht nur, was den nicht klickbaren <span>
     fehlt - .ft-col a trifft die nicht. */
  .ft-col .social-liste span.s-eintrag {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--text-secondary); font-size: 13.5px;
  }
  .ft-col .social-liste a { gap: 8px; }
  .ft-col .social-liste svg { flex: 0 0 auto; }

  /* Der Markenname im Fuss: groesser, zweiter Teil im DLS-Rot. */
  .site-footer .ft-brand { font-size: 22px; letter-spacing: -.01em; }
  .site-footer .ft-brand .accent {
    background: conic-gradient(from 200deg at 50% 50%, #c00 0%, #ff4a3a 28%, #ff7a4a 45%, #ff3a3a 62%, #c00 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    background-size: 200% 200%;
    animation: dlsw-shimmer 6s ease-in-out infinite;
  }
  @media (prefers-reduced-motion: reduce) {
    .site-footer .ft-brand .accent { animation: none; }
  }

  .ft-brand {
    color: var(--text-bright);
    font-weight: 700;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
  }
  .ft-tag {
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.55;
    max-width: 320px;
  }
  .ft-col h4 {
    color: var(--text-bright);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin: 0 0 14px;
    font-weight: 600;
  }
  .ft-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
  .ft-col a {
    color: var(--text-secondary);
    font-size: 13.5px;
    transition: color .15s;
  }
  .ft-col a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color .15s, transform .15s;
  }
  .ft-col a:hover { color: var(--brand-accent); transform: translateX(3px); }
  .ft-col .soon {
    color: var(--text-faint);
    font-size: 11px;
    font-weight: 400;
    margin-left: 6px;
    padding: 1px 6px;
    border: 1px solid var(--border-default);
    border-radius: 99px;
    text-transform: uppercase;
    letter-spacing: .06em;
  }
  .footer-bottom {
    border-top: 1px solid var(--border-default);
    margin-top: 40px;
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    color: var(--text-muted);
    font-size: 12.5px;
  }

  /* =========================================================
     DYNAMISCHER STIL-SWITCHER CTA (kontextuell nach Auswahl)
     ========================================================= */
  .style-switcher-cta {
    margin-top: 14px;
    display: flex;
    justify-content: flex-end;
  }
  .style-switcher-cta .btn-switcher {
    background: var(--brand-accent);
    color: #fff;
    border: none;
    padding: 10px 18px;
    border-radius: 5px;
    font-size: 13.5px;
    font-weight: 600;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    transition: background .15s, box-shadow .25s, transform .12s;
    box-shadow: 0 4px 10px rgba(204,0,0,.16);
  }
  .style-switcher-cta .btn-switcher:hover {
    background: var(--brand-accent-hover);
    box-shadow: 0 6px 16px rgba(204,0,0,.28);
  }
  .style-switcher-cta .btn-switcher svg {
    width: 14px; height: 14px;
    transition: transform .25s cubic-bezier(.2,.7,.2,1);
  }
  .style-switcher-cta .btn-switcher:hover svg { transform: translateX(3px); }
  .style-switcher-cta .btn-switcher .style-name {
    transition: opacity .15s;
  }
  .style-switcher-cta .btn-switcher.is-flashing .style-name {
    animation: dls-flash .35s ease;
  }
  @keyframes dls-flash {
    0%   { opacity: 1; }
    35%  { opacity: 0; transform: translateY(-3px); }
    36%  { opacity: 0; transform: translateY(3px); }
    100% { opacity: 1; transform: translateY(0); }
  }

  /* =========================================================
     FAQ-AKKORDEON
     ========================================================= */
  .faq-list {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--border-default);
  }
  .faq-item {
    border-bottom: 1px solid var(--border-default);
    transition: background .2s;
  }
  .faq-item:hover { background: var(--bg-card); }
  .faq-item.is-open { background: var(--bg-card); }
  .faq-q {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text-bright);
    font-size: 16px;
    font-weight: 500;
    text-align: left;
    padding: 22px 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 56px;
    font-family: inherit;
    transition: color .15s;
  }
  .faq-q:hover { color: var(--brand-accent); }
  .faq-q .faq-icon {
    flex-shrink: 0;
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 1px solid var(--border-default);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: border-color .2s, background .2s, transform .35s cubic-bezier(.2,.7,.2,1);
  }
  .faq-q .faq-icon::before,
  .faq-q .faq-icon::after {
    content: "";
    position: absolute;
    background: currentColor;
    border-radius: 1px;
    transition: transform .3s cubic-bezier(.2,.7,.2,1), opacity .25s;
  }
  .faq-q .faq-icon::before { width: 10px; height: 1.5px; }
  .faq-q .faq-icon::after  { width: 1.5px; height: 10px; }
  .faq-item.is-open .faq-q .faq-icon {
    border-color: var(--brand-accent);
    background: var(--brand-accent);
    color: #fff;
    transform: rotate(90deg);
  }
  .faq-item.is-open .faq-q .faq-icon::after { transform: scaleY(0); opacity: 0; }
  .faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s cubic-bezier(.2,.7,.2,1);
  }
  .faq-item.is-open .faq-a { max-height: 520px; }
  .faq-a-inner {
    padding: 0 18px 24px;
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.6;
    max-width: 640px;
  }
  .faq-a-inner a { color: var(--brand-accent); text-decoration: underline; text-underline-offset: 3px; }

  /* =========================================================
     STICKY MOBILE CTA (Conversion-Hebel, nur Mobile)
     ========================================================= */
  .mobile-sticky-cta {
    display: none;
  }
  @media (max-width: 640px) {
    .mobile-sticky-cta {
      display: flex;
      position: fixed;
      bottom: 0; left: 0; right: 0;
      z-index: 80;
      padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
      background: rgba(14, 14, 16, .85);
      backdrop-filter: saturate(160%) blur(14px);
      -webkit-backdrop-filter: saturate(160%) blur(14px);
      border-top: 1px solid var(--border-default);
      align-items: center;
      gap: 12px;
      transform: translateY(120%);
      transition: transform .3s cubic-bezier(.2,.7,.2,1);
      pointer-events: none;
    }
    [data-theme="light"] .mobile-sticky-cta {
      background: rgba(255, 255, 255, .9);
    }
    .mobile-sticky-cta.is-visible {
      transform: translateY(0);
      pointer-events: auto;
    }

    /* ============================================================
       04.09.2026: Die Kachel-Regeln standen bis heute NUR inline in
       index.html (Zeilen 674-709, 731). Auf den uebrigen 36 Seiten
       laedt dls-leiste.js zwar dieselben Kacheln, aber es gab keine
       Regel dafuer - "Dein erstes Bild" blieb stehen und ueberlappte,
       der Text lief ueber den Rand.

       Woertlich uebernommen, nicht neu geschrieben. Die Startseite
       behaelt ihre Inline-Fassung; sie ist identisch, also aendert sich
       dort nichts.
       ============================================================ */
    .mobile-sticky-cta .f {
      flex: 1; min-width: 0; text-align: center;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      min-height: 44px; padding: 4px 6px; border-radius: 10px;
      background: rgba(18,18,22,.62);
      border: 1px solid rgba(255,255,255,.16);
      -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
      color: #fff; text-decoration: none;
      font-size: 11px; line-height: 1.25;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .mobile-sticky-cta .f i {
      display: block; font-style: normal; font-size: 9px;
      letter-spacing: .04em; text-transform: uppercase;
      color: rgba(255,255,255,.6); margin-bottom: 1px;
    }
    /* 🔴 DIE entscheidende Zeile: Wo Felder stehen, tritt der Textblock
       zurueck. Ohne sie ueberlappt "Dein erstes Bild" die Kacheln. */
    .mobile-sticky-cta.hat-felder .msc-info { display: none; }
    /* Bei vier Kacheln darf der Text umbrechen statt abgeschnitten zu
       werden. Nur dann - bei dreien passt alles in eine Zeile. */
    .mobile-sticky-cta.eng .f {
      white-space: normal;
      line-height: 1.2;
      text-align: center;
      padding: 4px 4px;
    }
    .mobile-sticky-cta.eng .f i { margin-bottom: 1px; }
    /* Der Knopf traegt im JS die Klasse .f und damit dieselben Werte.
       font-weight ausdruecklich: .msc-btn bringt ein 600 mit, .f setzt
       keins - ohne diese Zeile bleibt der Knopf halbfett. */
    .mobile-sticky-cta .msc-btn { text-decoration: none; font-weight: 400; }
    .mobile-sticky-cta .msc-btn:active { background: rgba(28,28,34,.8); }
    .msc-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-width: 0;
    }
    .msc-info strong {
      color: var(--text-bright);
      font-size: 14px;
      font-weight: 600;
      line-height: 1.2;
    }
    .msc-info .msc-sub {
      color: var(--text-muted);
      font-size: 12px;
      margin-top: 2px;
    }
    .msc-info .msc-sub strong {
      color: var(--text-secondary);
      font-size: 12px;
      font-weight: 600;
    }
    .msc-btn {
      background: var(--brand-accent);
      color: #fff;
      padding: 12px 18px;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 600;
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      text-decoration: none;
      flex-shrink: 0;
      box-shadow: 0 4px 12px rgba(204,0,0,.3);
    }
    .msc-btn:active { background: var(--brand-accent-hover); }
    .msc-btn svg { width: 14px; height: 14px; }
    /* Wenn Sticky-CTA sichtbar: extra padding am body damit der footer nicht ueberlappt */
    body.has-sticky-cta { padding-bottom: 0; }
    body.has-sticky-cta .site-footer { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  }

  /* =========================================================
     RESPONSIVE &mdash; Mobile / Tablet
     ========================================================= */

  /* Tablet (640&ndash;1024) */
  @media (max-width: 1024px) {
    .hero-inner { grid-template-columns: 1fr; gap: 36px; }
    .hero-visual { margin-left: 0; max-width: 100%; }
    .style-switcher { margin-left: 0; max-width: 100%; }
    .style-grid { grid-template-columns: repeat(3, 1fr); }
    /* 04.09.2026 (Mark): "es soll ueberall so aussehen wie auf der
       startseite". Die Zweispalten-Fassung gab es seit dem 02.09., aber
       nur lokal im <style> der Startseite - sie wurde nie geteilt.
       Dadurch sah der Fuss auf allen anderen Seiten anders aus:
       bei 412 px einspaltig (380 px) statt zweispaltig (181/181),
       bei 800 px ohne den Umbruch der Beschreibung ueber beide Spalten.

       Die drei Listen haben je vier kurze Eintraege; zwei Spalten
       tragen sie bequem. Der Beschreibungstext oben laeuft ueber beide.

       🔴 Der Block hier gilt bis 1024 px und deckt damit Handy UND
          Tablet ab. Im 640er-Block steht deshalb keine footer-grid-Regel
          mehr - zwei Stellen fuer dieselbe Sache waren genau der Fehler,
          der diesen Unterschied ueberhaupt entstehen liess. */
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 22px 18px; }
    .footer-grid h4 { margin-bottom: 8px; }
    .footer-grid > *:first-child { grid-column: 1 / -1; }
  }

  /* Mobile (<640) */
  @media (max-width: 640px) {
    .nav-items { display: none; }
    .nav-burger { display: inline-flex; }

    /* Mobile drawer */
    .nav-drawer.is-open { display: block; }
    .nav-drawer {
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      z-index: 100;
      background: var(--bg-body);
      padding: 16px var(--pad-body);
      display: none;
      flex-direction: column;
    }
    .nav-drawer-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 32px;
    }
    .nav-drawer-list {
      display: flex; flex-direction: column;
      gap: 4px;
    }
    .nav-drawer-list a {
      color: var(--text-primary);
      font-size: 18px;
      padding: 14px 4px;
      border-bottom: 1px solid var(--border-default);
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 48px;
    }
    .nav-drawer-list a:hover { color: var(--brand-accent); }
    .nav-drawer-foot {
      margin-top: auto;
      padding-top: 24px;
      display: flex;
      gap: 12px;
      align-items: center;
    }
    .nav-drawer-foot .icon-btn { width: 44px; height: 44px; }
    .nav-drawer-foot .login-link {
      flex: 1;
      justify-content: center;
      min-height: 44px;
      font-size: 15px !important;
    }

    /* Hero adjustments */
    h1.hero-headline { font-size: clamp(30px, 8vw, 40px); }
    .hero-lead { font-size: 16px; }
    .hero-cta-row .btn-cta { width: 100%; justify-content: center; }
    .hero-secondary-links { gap: 4px 12px; font-size: 13.5px; }

    /* Style-Switcher: 2-col Grid, optional scroll fallback */
    .style-buttons { grid-template-columns: repeat(2, 1fr); }
    .style-btn { min-height: 72px; }

    /* Sections stack */
    /* Steps: stack vertical, bridges vertikal */
    .steps-flow {
      grid-template-columns: 1fr;
      gap: 0;
    }
    .step-bridge {
      min-height: 56px;
      height: 56px;
    }
    .bridge-line {
      top: 0; bottom: 0;
      left: 50%; right: auto;
      width: 1px; height: 100%;
      background: linear-gradient(180deg, transparent 0%, var(--border-default) 25%, var(--border-default) 75%, transparent 100%);
    }
    .bridge-star { top: 50%; left: 50%; }
    .bridge-dot { top: 0; left: 50%; }
    .steps-flow:has(.step:hover) .bridge-line {
      background: linear-gradient(180deg, transparent 0%, var(--brand-accent) 25%, var(--brand-accent) 75%, transparent 100%);
    }
    .steps-flow:has(.step:hover) .bridge-dot {
      animation: bridge-flow-v 1.4s cubic-bezier(.4,0,.6,1) infinite;
    }
    @keyframes bridge-flow-v {
      0%   { top: 0%;   opacity: 0; }
      12%  { opacity: 1; }
      88%  { opacity: 1; }
      100% { top: 100%; opacity: 0; }
    }

    .steps { grid-template-columns: 1fr; }
    .style-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .pricing { grid-template-columns: 1fr; }
    .price-card.featured { order: -1; }

    /* 04.09.2026: Hier steht bewusst KEINE footer-grid-Regel mehr.
       Sie gilt jetzt im 1024-px-Block darueber und damit durchgehend
       von 0 bis 1024 px - eine Stelle statt zwei. */
    .footer-bottom { flex-direction: column; }

    section.band { padding: 56px 0; }
  }

  /* =========================================================
     ENTRANCE: subtle reveal on first paint (no loops)
     ========================================================= */
  @keyframes dls-rise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .hero-text > * { animation: dls-rise .55s cubic-bezier(.2,.7,.2,1) both; }
  .hero-text > *:nth-child(1) { animation-delay: .05s; }
  .hero-text > *:nth-child(2) { animation-delay: .12s; }
  .hero-text > *:nth-child(3) { animation-delay: .19s; }
  .hero-text > *:nth-child(4) { animation-delay: .26s; }
  .hero-text > *:nth-child(5) { animation-delay: .33s; }
  .hero-visual { animation: dls-rise .65s cubic-bezier(.2,.7,.2,1) both; animation-delay: .25s; }
  .style-switcher { animation: dls-rise .55s cubic-bezier(.2,.7,.2,1) both; animation-delay: .42s; }

  /* =========================================================
     A11Y / MOTION
     ========================================================= */
  @media (prefers-reduced-motion: reduce) {
    .hero-visual-layer { transition: none !important; }
    .btn-cta::before, .step::before { display: none !important; }
    *, *::before, *::after {
      animation-duration: .001ms !important;
      transition-duration: .001ms !important;
    }
  }

  /* Focus rings */
  a:focus-visible, button:focus-visible, .style-btn:focus-visible {
    outline: 2px solid var(--brand-accent);
    outline-offset: 2px;
    border-radius: var(--brand-radius-input);
  }

  /* =========================================================
     WOW-LAYER (Fable-5-Refresh 2026-06-12) — rein dekorativ.
     Keine Funktions-Selektoren; respektiert Light-Theme +
     prefers-reduced-motion. Entfernen = Seite faellt sauber
     auf den vorherigen Look zurueck.
     ========================================================= */

  /* ---- Erst-Eindruck: Vorhang + Glut-Flare ---- */
  .page-reveal {
    position: fixed; inset: 0; z-index: 9999;
    background: var(--bg-body);
    pointer-events: none;
    animation: dlsw-reveal .8s ease .25s both;
  }
  .page-reveal::after {
    content: "";
    position: absolute; left: 50%; top: 44%;
    width: 150px; height: 150px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(204,0,0,.55), transparent 70%);
    filter: blur(12px);
    animation: dlsw-flare 1s cubic-bezier(.2,.7,.2,1) both;
  }
  @keyframes dlsw-reveal { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }
  @keyframes dlsw-flare {
    0%   { opacity: 0; scale: .35; }
    35%  { opacity: 1; }
    100% { opacity: 0; scale: 7; }
  }

  /* ---- Hero: Kino-Buehne ---- */
  @media (min-width: 980px) {
    .hero { min-height: min(820px, calc(100svh - 56px)); display: flex; align-items: center; }
    .hero > .wrap { width: 100%; }
  }
  .hero-fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
  .fx-ember {
    position: absolute;
    width: 46vw; height: 46vw; border-radius: 50%;
    background: radial-gradient(circle, rgba(204,0,0,.8), transparent 60%);
    filter: blur(70px); opacity: .20;
  }
  .fx-ember.e1 { top: -18%; left: -12%; animation: dlsw-drift1 18s ease-in-out infinite alternate; }
  .fx-ember.e2 { bottom: -28%; right: -10%; width: 38vw; height: 38vw; opacity: .15; animation: dlsw-drift2 23s ease-in-out infinite alternate; }
  @keyframes dlsw-drift1 { from { transform: translate(0,0); } to { transform: translate(7vw, 4vh); } }
  @keyframes dlsw-drift2 { from { transform: translate(0,0); } to { transform: translate(-6vw, -5vh); } }

  .fx-grid {
    position: absolute; left: 50%; bottom: -14%;
    width: 150%; height: 62%;
    transform: translateX(-50%) perspective(620px) rotateX(61deg);
    background:
      repeating-linear-gradient(90deg, rgba(204,0,0,.08) 0 1px, transparent 1px 64px),
      repeating-linear-gradient(0deg,  rgba(204,0,0,.06) 0 1px, transparent 1px 64px);
    -webkit-mask-image: radial-gradient(68% 72% at 50% 0%, #000 25%, transparent 74%);
            mask-image: radial-gradient(68% 72% at 50% 0%, #000 25%, transparent 74%);
    animation: dlsw-floor 14s linear infinite;
  }
  @keyframes dlsw-floor { to { background-position: 0 0, 0 64px; } }

  .fx-grain {
    position: absolute; inset: 0;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2"/><feColorMatrix type="saturate" values="0"/></filter><rect width="160" height="160" filter="url(%23n)" opacity="0.6"/></svg>');
    opacity: .05;
    mix-blend-mode: overlay;
  }
  [data-theme="light"] .fx-grain { display: none; }
  [data-theme="light"] .fx-ember { opacity: .07; }
  [data-theme="light"] .fx-ember.e2 { opacity: .05; }
  [data-theme="light"] .fx-grid {
    background:
      repeating-linear-gradient(90deg, rgba(204,0,0,.06) 0 1px, transparent 1px 64px),
      repeating-linear-gradient(0deg,  rgba(204,0,0,.04) 0 1px, transparent 1px 64px);
  }

  /* ---- Headline: groesser, schimmernder Akzent ---- */
  h1.hero-headline {
    font-size: clamp(40px, 6.2vw, 72px);
    letter-spacing: -.03em;
  }
  h1.hero-headline .accent {
    animation: dlsw-shimmer 6s ease-in-out infinite;
    filter: drop-shadow(0 2px 22px rgba(204,0,0,.35));
  }
  @keyframes dlsw-shimmer {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
  }
  .hero-eyebrow .dot { animation: dls-pulse 2.2s ease-in-out infinite; }

  /* ---- Entrance-Choreografie: Blur -> scharf, gestaffelt (nach dem Vorhang) ---- */
  @keyframes dlsw-rise {
    from { opacity: 0; transform: translateY(18px); filter: blur(8px); }
    to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
  }
  .hero-text > * { animation: dlsw-rise .7s cubic-bezier(.2,.7,.2,1) both; }
  .hero-text > *:nth-child(1) { animation-delay: .40s; }
  .hero-text > *:nth-child(2) { animation-delay: .50s; }
  .hero-text > *:nth-child(3) { animation-delay: .60s; }
  .hero-text > *:nth-child(4) { animation-delay: .72s; }
  .hero-text > *:nth-child(5) { animation-delay: .84s; }
  .hero-visual    { animation: dlsw-rise .85s cubic-bezier(.2,.7,.2,1) .55s both; }
  .style-switcher { animation: dlsw-rise .7s  cubic-bezier(.2,.7,.2,1) .85s both; }

  /* ---- Hero-Visual: atmende rote Aura ---- */
  .hero-visual {
    animation-name: dlsw-rise, dlsw-aura;
    animation-duration: .85s, 7s;
    animation-timing-function: cubic-bezier(.2,.7,.2,1), ease-in-out;
    animation-delay: .55s, 1.6s;
    animation-iteration-count: 1, infinite;
    animation-fill-mode: both, none;
  }
  @keyframes dlsw-aura {
    0%, 100% { box-shadow: var(--shadow-hover), 0 0 70px rgba(204,0,0,.12); }
    50%      { box-shadow: var(--shadow-hover), 0 0 110px rgba(204,0,0,.26); }
  }
  [data-theme="light"] .hero-visual { animation-name: dlsw-rise; animation-duration: .85s; animation-delay: .55s; animation-iteration-count: 1; animation-fill-mode: both; }

  /* ---- CTA: kurzer Glut-Puls nach dem Einstieg (3x, dann Ruhe) ---- */
  .hero-cta-row .btn-cta { animation: dlsw-cta 2.4s ease-in-out 1.4s 3; }
  @keyframes dlsw-cta {
    0%, 100% { box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 6px 14px rgba(204,0,0,.18); }
    50%      { box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 10px 34px rgba(204,0,0,.45); }
  }

  /* ---- Stil-Marquee ---- */
  .style-marquee {
    position: relative;
    background: var(--bg-card);
    border-top: 1px solid var(--border-default);
    border-bottom: 1px solid var(--border-default);
    padding: 11px 0;
    /* 26.08.2026: bleibt im Inhaltsrahmen, auch auf breiten Schirmen (Marks Wunsch).
       Die 28px Abzug gleichen das transform: scale(1.02) unten aus — sonst raegte
       das Band je 14px ueber die Rahmenkante hinaus. */
    margin: clamp(6px, 1.5vw, 14px) auto clamp(22px, 3vw, 36px);
    max-width: min(calc(var(--layout-max, 1400px) - 28px), 98%);
    transform: rotate(-1.2deg) scale(1.02);
    overflow: hidden;
  }
  .mq-track {
    display: flex; width: max-content;
    animation: dlsw-marquee 32s linear infinite;
  }
  .style-marquee:hover .mq-track { animation-play-state: paused; }
  .mq-group { display: flex; align-items: center; gap: 34px; padding-right: 34px; }
  .mq-group span {
    font-size: clamp(12px, 1.3vw, 15px);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
  }
  .mq-group .mq-x { color: var(--brand-accent); font-size: 11px; letter-spacing: 0; }
  @keyframes dlsw-marquee { to { transform: translateX(-50%); } }

  /* ---- Scroll-Reveals (progressiv; ohne Support: alles normal sichtbar) ---- */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .step, .style-tile, .price-card, .faq-item {
        animation: dlsw-scroll both;
        animation-timeline: view();
        animation-range: entry 0% entry 38%;
      }
      @keyframes dlsw-scroll {
        from { opacity: .001; translate: 0 26px; }
        to   { opacity: 1;    translate: 0 0; }
      }
    }
  }

  /* ---- Performance mobil + Reduced Motion ---- */
  @media (max-width: 760px) {
    .fx-ember { width: 70vw; height: 70vw; filter: blur(46px); opacity: .15; }
    .fx-grid { display: none; }
    h1.hero-headline { font-size: clamp(36px, 9.5vw, 44px); }
  }
  @media (prefers-reduced-motion: reduce) {
    .page-reveal, .page-reveal::after { animation: none !important; opacity: 0 !important; visibility: hidden !important; }
    .fx-ember, .fx-grid, .mq-track, .hero-eyebrow .dot,
    h1.hero-headline .accent, .hero-visual, .hero-cta-row .btn-cta { animation: none !important; }
  }

/* =========================================================
   Aktiver Nav-Link (gesetzt von dls-core.js: aria-current="page")
   ========================================================= */
.nav-items a[aria-current="page"],
.nav-drawer-list a[aria-current="page"] {
  color: var(--text-primary);
}
.nav-items a[aria-current="page"] {
  position: relative;
}
.nav-items a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: var(--brand-accent);
  border-radius: 2px;
}

/* ====== STIL-GRUPPEN (Homepage-Sektion #gruppen, dynamisch) ====== */
.group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
}
.group-card {
  display: block;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--brand-radius-card);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.group-card:hover {
  transform: translateY(-4px);
  border-color: var(--brand-accent);
  box-shadow: 0 14px 44px rgba(0,0,0,.45);
}
.group-card-media {
  aspect-ratio: 3 / 4;
  background: #0d0d0d;
  overflow: hidden;
}
.group-card-media img,
.group-card-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.group-card-body { padding: 16px 18px 20px; }
.group-card-name { font-size: 20px; line-height: 1.2; margin: 0 0 5px; color: var(--text-primary); }
.group-card-sub { font-size: 13px; font-weight: 600; color: var(--brand-accent); margin-bottom: 9px; }
.group-card-desc { font-size: 13.5px; line-height: 1.55; color: var(--text-secondary); margin: 0; }
@media (max-width: 720px) {
  .group-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .group-card-name { font-size: 17px; }
  .group-card-desc { display: none; }
}

/* Vorher/Nachher-Wipe auf der Gruppen-Karte */
.group-card-media.ba { position: relative; cursor: ew-resize; }
.group-card-media.ba .ba-layer { position: absolute; inset: 0; }
.group-card-media.ba .ba-layer img { width: 100%; height: 100%; object-fit: cover; display: block; }
.group-card-media.ba .ba-after { clip-path: inset(0 0 0 50%); }
.group-card-media.ba .ba-divider { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: rgba(255,255,255,.85); box-shadow: 0 0 6px rgba(0,0,0,.5); pointer-events: none; }
.group-card-media.ba .ba-badge { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.62); color: #fff; font-size: 11px; letter-spacing: .3px; padding: 4px 11px; border-radius: 20px; pointer-events: none; white-space: nowrap; }

/* Paket angekuendigt, aber noch nicht kaufbar (products.coming_soon) */
.price-card.is-soon { opacity: .72; }
.price-card.is-soon .price-soon { font-size: 26px; font-weight: 700; color: var(--text-secondary); }
.price-cta.is-disabled { pointer-events: none; opacity: .55; display: block; text-align: center; }

/* =========================================================
   Anmelde-Streifen (#dlsAuthBar)
   Wird von js/dls-auth.js eingefuegt, aber NUR bei bestehender Anmeldung.
   26.08.2026: Farben und Masse stehen zentral hier statt inline im JS
   (Marks Ansage: "das sollte schon zentral sein"). Gruen ist raus — der
   Streifen ist jetzt ein ruhiges Band in Kartenfarbe, das Signal traegt
   der Punkt in der Markenfarbe.
   ========================================================= */
#dlsAuthBar {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Band ueber die volle Breite, Inhalt im Rahmen — wie .band */
  padding: 7px max(16px, calc((100% - var(--layout-max)) / 2));
  font-size: 13px;
  line-height: 1.3;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-default);
  color: var(--text-secondary);
}
#dlsAuthBar .ab-punkt {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-accent);
  flex: 0 0 auto;
}
/* 🔴 12.09.2026 (Zweifel-Zora, Runde 3): Mit dem zweiten Link wurde der Streifen
   am Handy 17 px hoeher - bei 320 px brach "Angemeldet als <Name>" auf drei
   Zeilen, weil die Links flex:0 0 auto haben und der Text den Rest schlucken
   muss. Der Text ist hier das Nachrangige: eine Zeile, bei Platzmangel gekuerzt.
   Die Links bleiben vollstaendig und klickbar. */
#dlsAuthBar .ab-text { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#dlsAuthBar a { color: inherit; text-decoration: underline; flex: 0 0 auto; }
#dlsAuthBar a:hover { color: var(--text-primary); }
#dlsAuthBar a[data-dls="logout"] { opacity: .7; }
/* 23.09.2026 ANMELDEZEILE-MAIL: gekuerzte Adresse hinter dem Namen (Mark: mehrere Konten).
   Rechner: gleiche Zeile, der Name bleibt ganz, die Adresse nimmt den Rest. Handy: eigene zweite
   Zeile - die erste hat dort nur ~97 px, die Adresse braucht ~170 px. Gemessen 375/1280 px. */
#dlsAuthBar.mit-mail .ab-text { flex: 0 1 auto; }
#dlsAuthBar .ab-mail { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .8; }
@media (max-width: 640px) {
  #dlsAuthBar.mit-mail { flex-wrap: wrap; row-gap: 1px; }
  #dlsAuthBar.mit-mail .ab-text { flex: 1 1 0; }
  #dlsAuthBar .ab-mail { order: 10; flex: 1 0 100%; padding-left: 18px; font-size: 12px; }
}