/* theme-kirsch.css — NEUER Baustein (UNIVERSAL §21 Regel 2/4), NICHT in die App eingebunden.
   Farbwelt „Leichtes Kirschrot": heller, warmer Grund, Kirschrot als Akzent, Text in dunklem Weinbraun.
   Überschreibt nur Tokens (Token-Quelle bleibt premium-design-tokens.css) und ein paar feste Werte.
   Wirkt NUR mit <html data-design="kirsch">. Einbindung nach Freigabe: letztes Stylesheet nach theme.css.
   Gesehen im Mockup: mockups/mockup-kirsch-startseite.html
   Kontrast (WCAG, gerechnet): Weiß auf --kr-cherry 6,3:1 · Text auf --kr-paper 15:1 · Akzent als Link auf Papier 5,8:1 */

:root[data-design="kirsch"],
:root[data-design="kirsch-dezent"] {   /* gleiche Farbwelt; theme-kirsch-dezent.css setzt danach die Knöpfe auf Dunkel */
    --kr-cherry:        #b8253f;
    --kr-cherry-hover:  #9d1d35;
    --kr-cherry-active: #86182d;
    --kr-blush:         #fde9ec;
    --kr-paper:         #fff6f6;
    --kr-line:          #f0cfd5;
    --kr-ink:           #2a1216;

    --bg-base:        var(--kr-paper);
    --bg-surface:     #ffffff;
    --bg-subtle:      var(--kr-blush);
    --color-bg-secondary: var(--kr-paper);
    --color-bg-hover:     var(--kr-blush);

    --text-primary:        var(--kr-ink);
    --text-secondary:      #5b3a40;
    --text-muted:          #6e4f55;
    --color-text-primary:  var(--kr-ink);
    --color-text-secondary:#5b3a40;

    --border-default: var(--kr-line);
    --border-subtle:  var(--kr-blush);
    --border-strong:  #dfa9b3;
    --color-border:   var(--kr-line);

    --color-primary:        var(--kr-cherry);
    --color-primary-dark:   var(--kr-cherry-hover);
    --color-primary-active: var(--kr-cherry-active);
    --accent:               var(--kr-cherry);
    --accent-hover:         var(--kr-cherry-hover);
    --accent-active:        var(--kr-cherry-active);
    --text-on-accent:       #ffffff;
    --focus-ring:           rgba(184, 37, 63, 0.35);

    /* Historischer Name: --brand-orange ist die Akzentfarbe (premium-design-tokens.css); viele Seiten lesen sie direkt */
    --brand-orange:        var(--kr-cherry);
    --brand-orange-hover:  var(--kr-cherry-hover);
    --brand-orange-active: var(--kr-cherry-active);
    --brand-orange-tint:   var(--kr-blush);
    --brand-orange-tint-mid: #e98a9a;
    --brand-orange-focus:  rgba(184, 37, 63, 0.35);

    --radius-md: 10px;
    --radius-lg: 14px;
}

/* Kopfbereich: Papier mit sanftem Kirsch-Schimmer, der Globus als Kirsch-Ring */
:root[data-design="kirsch"] .hero {
    background: radial-gradient(900px 480px at 80% 20%, var(--kr-blush) 0%, transparent 70%);
}
:root[data-design="kirsch"] .hero-eyebrow,
:root[data-design="kirsch"] .section-eyebrow { color: var(--kr-cherry); font-weight: 700; letter-spacing: .14em; }
:root[data-design="kirsch"] .hero-globe {
    background: radial-gradient(circle at 35% 30%, #ffffff 0%, var(--kr-blush) 65%, #f6c9d1 100%);
    border: 1px solid var(--kr-line);
    box-shadow: 0 8px 28px -12px rgba(134, 24, 45, .35);
}

/* Knöpfe */
:root[data-design="kirsch"] .btn { border-radius: 10px; font-weight: 600; }
:root[data-design="kirsch"] .btn-primary { box-shadow: 0 6px 16px -8px rgba(184, 37, 63, .7); }
:root[data-design="kirsch"] .btn-secondary { background: #ffffff; color: var(--kr-cherry); border-color: var(--kr-cherry); }
:root[data-design="kirsch"] .btn-secondary:hover { background: var(--kr-blush); }

/* Service-Karten: Kirschrot statt Teal, der schwarze Rand wird ein dunkleres Kirschrot */
:root[data-design="kirsch"] .service-card--accent { border-color: var(--kr-cherry-active); }

/* Prinzipien-, Preis- und Abschluss-Karten: weiß mit feiner rosa Linie */
:root[data-design="kirsch"] .feature-card,
:root[data-design="kirsch"] .model-card,
:root[data-design="kirsch"] .cta-section {
    background: #ffffff;
    border: 1px solid var(--kr-line);
    box-shadow: 0 1px 2px rgba(134, 24, 45, .06), 0 8px 24px -14px rgba(134, 24, 45, .22);
}
:root[data-design="kirsch"] .feature-icon { background: var(--kr-blush); color: var(--kr-cherry); }
:root[data-design="kirsch"] .model-card--featured { border: 2px solid var(--kr-cherry); }
:root[data-design="kirsch"] .why-section,
:root[data-design="kirsch"] .features-section,
:root[data-design="kirsch"] .value-props,
:root[data-design="kirsch"] .pricing-section { border-top-color: var(--kr-line); }