/* ============================================================
   koubon — Markentheme
   Teil A: mappt die Beere/Gold-Palette auf die zentralen yRoute
           Theme-Tokens (--yr-*). Damit rendern ALLE wiederverwendeten
           Coupon-Komponenten (bg-primary, text-ytext-first, …)
           automatisch in koubon-Farben — ohne Markup zu ändern.
   Teil B: koubon-eigene Marketing-Komponenten (kb-*).

   ============================================================ */

/* Self-hosted Marken-Schriften (SIL OFL) — NICHT von Google Fonts laden
   (DSGVO, vgl. LG München I 3 O 17493/20 / cartavo.css). Quelle: Fontsource.
   Hanken Grotesk + IBM Plex Sans als Variable Fonts (ein File, volle Gewichts-
   spanne), IBM Plex Mono statisch 400/500 für Codes/Beträge. */
@font-face {
    font-family: 'Hanken Grotesk';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/hanken-grotesk-wght.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 100 700;
    font-display: swap;
    src: url('fonts/ibm-plex-sans-wght.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/ibm-plex-mono-400.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/ibm-plex-mono-500.woff2') format('woff2');
}

/* ---- Teil A: yRoute-Tokens auf koubon mappen ---- */
[data-theme="koubon"] {
    --yr-primary: #D2286A;
    --yr-primary-hover: #B01E58;
    --yr-primary-light: #FBECF2;
    --yr-primary-text: #B01E58;
    --yr-accent: #EFA637;

    --yr-nav-bg: rgba(255, 255, 255, 0.9);
    --yr-nav-text: #7C6771;
    --yr-nav-active: #D2286A;
    --yr-nav-hover: #FBECE7;
    --yr-nav-brand: #241820;
    --yr-nav-border: rgba(36, 24, 32, 0.07);

    --yr-body-bg: #FBF5F1;
    --yr-surface: #FFFFFF;
    --yr-surface-hover: #FBECE7;
    --yr-border: #EDDCD6;
    --yr-card-border: rgba(36, 24, 32, 0.06);
    --yr-text: #241820;
    --yr-text-muted: #7C6771;
    --yr-text-light: #A08B95;

    --yr-success: #1F9D6B;
    --yr-warning: #EFA637;
    --yr-danger: #E2504F;

    --yr-price-bg: linear-gradient(135deg, #D2286A 0%, #B01E58 100%);
    --yr-price-text: #FFFFFF;

    --yr-step-active: #D2286A;
    --yr-step-completed: #1F9D6B;
    --yr-step-pending: #EDDCD6;

    --yr-option-selected-border: #D2286A;
    --yr-option-selected-bg: #FBECF2;

    --yr-input-bg: #FFFFFF;
    --yr-input-border: #EDDCD6;
    --yr-input-focus: #D2286A;

    --yr-font: 'Hanken Grotesk', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ---- Teil B: koubon Marketing-Tokens + Komponenten ---- */
:root {
    --kb-font-display: 'Hanken Grotesk', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --kb-font-body: 'IBM Plex Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --kb-font-mono: 'IBM Plex Mono', 'SF Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;

    --kb-bg: #FBF5F1;
    --kb-surface: #FFFFFF;
    --kb-surface-2: #FBECE7;
    --kb-ink: #241820;
    --kb-muted: #7C6771;
    --kb-line: #EDDCD6;
    --kb-primary: #D2286A;
    --kb-primary-strong: #B01E58;
    --kb-on-primary: #FFFFFF;
    --kb-accent: #EFA637;
    --kb-success: #1F9D6B;
    --kb-success-tint: #E4F4EC;
    --kb-accent-tint: #FBEED6;
    --kb-muted-tint: #F0E7E4;
    --kb-shadow: 0 1px 2px rgba(36, 24, 32, .06), 0 18px 40px -18px rgba(176, 30, 88, .28);
}

@media (prefers-color-scheme: dark) {
    :root {
        --kb-bg: #140F16;
        --kb-surface: #1E1720;
        --kb-surface-2: #271E2A;
        --kb-ink: #F6EEF1;
        --kb-muted: #B49FAA;
        --kb-line: #372B3A;
        --kb-primary: #F0538A;
        --kb-primary-strong: #F86E9C;
        --kb-on-primary: #2A0E1B;
        --kb-accent: #F5B841;
        --kb-success: #35C08A;
        --kb-success-tint: #143026;
        --kb-accent-tint: #34260F;
        --kb-muted-tint: #2A2130;
        --kb-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 18px 44px -18px rgba(0, 0, 0, .65);
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--kb-bg);
    color: var(--kb-ink);
    font-family: var(--kb-font-body);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* Blazor's unhandled-error bar: hidden until Blazor flips it to block. */
#blazor-error-ui { display: none; }

/* ---- nav ---- */
.kb-nav {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 14px clamp(16px, 4vw, 44px);
    background: var(--yr-nav-bg, rgba(255,255,255,.9));
    border-bottom: 1px solid var(--yr-nav-border, rgba(36,24,32,.07));
    backdrop-filter: blur(14px);
    position: sticky; top: 0; z-index: 50;
}
.kb-brandwrap { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.kb-logo { width: 34px; height: 34px; border-radius: 22%; box-shadow: var(--kb-shadow); }
.kb-brand {
    font-family: var(--kb-font-display); font-weight: 800; font-size: 24px;
    letter-spacing: -.04em; color: var(--kb-ink);
}
.kb-brand-sm { font-size: 20px; }
.kb-nav-right { display: flex; align-items: center; gap: 8px; }
.kb-nav-link {
    text-decoration: none; color: var(--kb-muted); font-weight: 600; font-size: 15px;
    padding: 8px 12px; border-radius: 10px;
}
.kb-nav-link:hover { color: var(--kb-ink); background: var(--kb-surface-2); }
.kb-nav-cta {
    text-decoration: none; font-family: var(--kb-font-display); font-weight: 700; font-size: 15px;
    color: var(--kb-on-primary); background: var(--kb-primary);
    padding: 9px 16px; border-radius: 11px;
}
.kb-nav-cta:hover { background: var(--kb-primary-strong); }

/* ---- Gutschein-Dropdown ---- */
.kb-dd { position: relative; }
.kb-dd-btn { background: transparent; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font: inherit; }
.kb-dd-btn svg { opacity: .7; }
.kb-dd-panel {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
    min-width: 240px; background: var(--kb-surface); border: 1px solid var(--kb-line);
    border-radius: 14px; box-shadow: var(--kb-shadow); padding: 8px; display: flex; flex-direction: column; gap: 2px;
}
.kb-dd-label {
    font-family: var(--kb-font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--kb-muted); padding: 8px 12px 4px;
}
.kb-dd-item {
    display: block; text-decoration: none; color: var(--kb-ink); font-weight: 600; font-size: 14.5px;
    padding: 9px 12px; border-radius: 9px;
}
.kb-dd-item:hover { background: var(--kb-surface-2); color: var(--kb-primary); }
.kb-dd-sub { font-weight: 500; font-size: 13px; color: var(--kb-muted); }
.kb-dd-sub:hover { color: var(--kb-primary); }
.kb-dd-backdrop { position: fixed; inset: 0; z-index: 55; background: transparent; }

/* ---- hero ---- */
.kb-main { min-height: 60vh; }
.kb-hero {
    max-width: 1080px; margin: 0 auto; padding: clamp(32px, 6vw, 72px) clamp(16px, 4vw, 44px);
    display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 56px); align-items: center;
}
@media (max-width: 820px) { .kb-hero { grid-template-columns: 1fr; } }
.kb-eyebrow {
    font-family: var(--kb-font-mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
    color: var(--kb-primary); font-weight: 500; margin: 0 0 16px;
}
.kb-headline {
    font-family: var(--kb-font-display); font-weight: 800;
    font-size: clamp(34px, 5.6vw, 56px); line-height: 1.02; letter-spacing: -.035em;
    margin: 0; color: var(--kb-ink); text-wrap: balance; max-width: 15ch;
}
.kb-headline em { font-style: normal; color: var(--kb-primary); }
.kb-lede { color: var(--kb-muted); font-size: 17px; max-width: 46ch; margin: 20px 0 0; }
.kb-btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.kb-btn {
    font-family: var(--kb-font-display); font-weight: 700; font-size: 15px; border-radius: 12px;
    padding: 12px 18px; border: 1px solid transparent; cursor: pointer; text-decoration: none;
    display: inline-flex; align-items: center; gap: 9px; transition: transform .12s ease, background .12s ease;
}
.kb-btn-primary { background: var(--kb-primary); color: var(--kb-on-primary); }
.kb-btn-primary:hover { background: var(--kb-primary-strong); transform: translateY(-1px); }
.kb-btn-ghost { background: transparent; color: var(--kb-ink); border-color: var(--kb-line); }
.kb-btn-ghost:hover { background: var(--kb-surface-2); }
.kb-btn:focus-visible { outline: 3px solid var(--kb-accent); outline-offset: 2px; }

/* ---- state chips ---- */
.kb-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.kb-chip {
    font-family: var(--kb-font-mono); font-size: 12px; letter-spacing: .04em; border-radius: 999px;
    padding: 6px 12px; display: inline-flex; align-items: center; gap: 7px;
}
.kb-dot { width: 8px; height: 8px; border-radius: 999px; }
.kb-chip-active { background: var(--kb-success-tint); color: var(--kb-success); }
.kb-chip-active .kb-dot { background: var(--kb-success); }
.kb-chip-partial { background: var(--kb-accent-tint); color: var(--kb-accent); }
.kb-chip-partial .kb-dot { background: var(--kb-accent); }
.kb-chip-expired { background: var(--kb-muted-tint); color: var(--kb-muted); }
.kb-chip-expired .kb-dot { background: var(--kb-muted); }

/* ---- coupon card ---- */
.kb-hero-art { display: flex; justify-content: center; }
.kb-coupon {
    width: 100%; max-width: 380px; background: var(--kb-surface);
    border: 1px solid var(--kb-line); border-radius: 20px; box-shadow: var(--kb-shadow); overflow: hidden;
}
.kb-coupon-top { background: linear-gradient(135deg, var(--kb-primary), var(--kb-primary-strong)); color: #fff; padding: 22px 24px; }
.kb-coupon-issuer { font-family: var(--kb-font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.kb-coupon-biz { font-family: var(--kb-font-display); font-weight: 700; font-size: 22px; margin-top: 3px; }
.kb-coupon-amount { font-family: var(--kb-font-display); font-weight: 800; font-size: 48px; letter-spacing: -.03em; margin-top: 12px; line-height: 1; font-variant-numeric: tabular-nums; }
.kb-coupon-amount span { font-size: 22px; font-weight: 700; opacity: .9; }
.kb-coupon-rest { font-size: 12.5px; opacity: .9; margin-top: 5px; }
.kb-tear { position: relative; height: 22px; background: var(--kb-surface); }
.kb-tear::before, .kb-tear::after {
    content: ""; position: absolute; top: 50%; transform: translateY(-50%);
    width: 22px; height: 22px; border-radius: 999px; background: var(--kb-bg); border: 1px solid var(--kb-line);
}
.kb-tear::before { left: -11px; }
.kb-tear::after { right: -11px; }
.kb-tear-dots { position: absolute; left: 18px; right: 18px; top: 50%; transform: translateY(-50%); border-top: 2px dashed var(--kb-line); }
.kb-coupon-bottom { padding: 16px 24px 24px; display: flex; flex-direction: column; gap: 14px; }
.kb-code { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--kb-surface-2); border: 1px solid var(--kb-line); border-radius: 12px; padding: 11px 14px; color: var(--kb-ink); }
.kb-code-cap { font-family: var(--kb-font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--kb-muted); }
.kb-code-val { font-family: var(--kb-font-mono); font-size: 17px; letter-spacing: .12em; color: var(--kb-ink); }
.kb-coupon-foot { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--kb-muted); }

/* ---- footer ---- */
.kb-footer { border-top: 1px solid var(--kb-line); margin-top: 48px; }
.kb-footer-inner {
    max-width: 1080px; margin: 0 auto; padding: 24px clamp(16px, 4vw, 44px);
    display: flex; align-items: center; gap: 20px; flex-wrap: wrap; color: var(--kb-muted); font-size: 13.5px;
}
.kb-footer-legal { display: flex; gap: 16px; }
.kb-footer-legal span { cursor: default; }
.kb-footer-copy { margin-left: auto; font-family: var(--kb-font-mono); font-size: 12px; letter-spacing: .02em; }

@media (prefers-reduced-motion: reduce) {
    .kb-btn:hover { transform: none; }
}

/* ============================================================
   Teil C: Interim-Bridge für die geteilten Coupon-Seiten.
   Sie stammen aus YRoute.Share und tragen ein paar fest kodierte
   Tailwind-Farben (zinc/body-color/dark/gray), die dem koubon-Theme
   nicht folgen — v. a. im Dark-Mode. Hier koubon-scoped auf die
   --yr-*-Tokens umgebogen (Hauptapp bleibt unberührt). Wird beim
   „Extract" durch echte Token-Klassen im Markup ersetzt.
   Diese Regeln stehen bewusst außerhalb jeder @layer und schlagen
   damit die Tailwind-Utilities ohne !important.
   ============================================================ */
[data-theme="koubon"] .border-b-zinc-600 { border-bottom-color: var(--yr-border); }
[data-theme="koubon"] .border-gray-3     { border-color: var(--yr-border); }
[data-theme="koubon"] .text-body-color   { color: var(--yr-text-muted); }
[data-theme="koubon"] .text-dark         { color: var(--yr-text); }

/* YButton is hardcoded to fuchsia — map it to the koubon primary (Beere). */
[data-theme="koubon"] .bg-fuchsia-900 { background-color: var(--yr-primary); }
[data-theme="koubon"] .hover\:bg-fuchsia-950:hover { background-color: var(--yr-primary-hover); }