/* ============================================================
   Mitbewerberradar — App-Stylesheet (Phase 3c)
   CI-konsistent zum Bewertungsboost-Tool: kuehles Slate-Grau,
   Deep Slate als Primaerfarbe, Amber-Gold als Akzent.
   Single-View-App: Schritte ersetzen sich zentriert in der Mitte.

   Schrift: Inter (Body) + Plus Jakarta Sans (Display) — lokal als
   .woff2, kein externer Aufruf, identisch auf allen Geraeten.
   ============================================================ */

/* ---- Webfonts (lokal, font-display:swap) -------------------- */
@font-face {
    font-family: 'Inter'; font-style: normal; font-weight: 300;
    font-display: swap;
    src: url('../fonts/inter-v20-latin-300.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter'; font-style: normal; font-weight: 400;
    font-display: swap;
    src: url('../fonts/inter-v20-latin-regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter'; font-style: normal; font-weight: 500;
    font-display: swap;
    src: url('../fonts/inter-v20-latin-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter'; font-style: normal; font-weight: 600;
    font-display: swap;
    src: url('../fonts/inter-v20-latin-600.woff2') format('woff2');
}
/* Inter Italic (statisch 300/500/600) — fuer Zitate, Quellenangaben, Hinweistexte.
   400-italic fakt der Browser von 500 italic. */
@font-face {
    font-family: 'Inter'; font-style: italic; font-weight: 300;
    font-display: swap;
    src: url('../fonts/inter-v20-latin-300italic.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter'; font-style: italic; font-weight: 500;
    font-display: swap;
    src: url('../fonts/inter-v20-latin-500italic.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter'; font-style: italic; font-weight: 600;
    font-display: swap;
    src: url('../fonts/inter-v20-latin-600italic.woff2') format('woff2');
}
@font-face {
    font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400;
    font-display: swap;
    src: url('../fonts/plus-jakarta-sans-v12-latin-regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500;
    font-display: swap;
    src: url('../fonts/plus-jakarta-sans-v12-latin-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600;
    font-display: swap;
    src: url('../fonts/plus-jakarta-sans-v12-latin-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700;
    font-display: swap;
    src: url('../fonts/plus-jakarta-sans-v12-latin-700.woff2') format('woff2');
}
@font-face {
    font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 800;
    font-display: swap;
    src: url('../fonts/plus-jakarta-sans-v12-latin-800.woff2') format('woff2');
}

:root {
    --bg:        #f1f3f6;
    --bg-card:   #ffffff;
    --bg-sub:    #eef0f3;
    --bg-hover:  #f7f8fa;
    --text:      #18181b;
    --text-mid:  #3f3f46;
    --text-mut:  #6b7280;
    --border:    #e4e7ec;
    --border-st: #d1d5db;
    --accent:    #f5a623;   /* Amber-Gold: Platz-Zahl, Sterne, Logo, Hover */
    --accent-dk: #dd9415;
    --slate:     #0f172a;   /* Deep Slate: primaere Buttons */
    --slate-dk:  #020617;
    --teal:      #16a34a;
    --teal-dk:   #0c8b77;
    --gelb-bg:   #fff8e6;
    --gelb-bd:   #f1cf60;
    --gelb-tx:   #735c10;
    --r-s: 10px;
    --r-m: 14px;
    --r-l: 20px;
    --shadow:    0 10px 40px rgba(15, 23, 42, .12);
    --shadow-sm: 0 4px 16px rgba(15, 23, 42, .07);
    --font:         'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
    --font-display: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    -webkit-font-smoothing: antialiased;
    line-height: 1.55;
}

body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
}

/* ---- App-Rahmen ---------------------------------------------- */
.mr-app {
    width: 100%;
    max-width: 1200px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 0 20px;
}
/* Breitere Variante fuer Rechtstexte-Seiten (laenger Text = breiter Lesefluss) */
.mr-app--wide { max-width: 1080px; }

.mr-header {
    padding: 26px 0 10px;
    text-align: center;
}
.mr-logo {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1;
    color: var(--text);
}
.mr-logo span { color: var(--accent); }
.mr-by {
    font-size: .74rem;
    color: var(--text-mut);
    margin-top: 2px;
}
.mr-admin-flag {
    display: inline-block;
    margin-top: 8px;
    font-size: .72rem;
    font-weight: 600;
    color: var(--gelb-tx);
    background: var(--gelb-bg);
    border: 1px solid var(--gelb-bd);
    border-radius: 999px;
    padding: 3px 12px;
}
.mr-admin-flag a { color: var(--gelb-tx); }

/* ---- Stage: hält genau einen sichtbaren Schritt -------------- */
.mr-stage {
    flex: 1;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px 0;
}

.mr-step { display: none; }
.mr-step.active {
    display: block;
    animation: stepIn .38s cubic-bezier(.22,.61,.36,1);
}
@keyframes stepIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- Typo-Bausteine ------------------------------------------ */
.mr-h1 {
    font-family: var(--font-display);
    font-size: 1.85rem;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.2;
    text-align: center;
}
.mr-lead {
    font-size: 1rem;
    color: var(--text-mid);
    text-align: center;
    margin: 12px auto 26px;
    max-width: 570px;
}
.mr-step-frage {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-mut);
    text-align: center;
    margin-bottom: 14px;
}
.mr-text {
    font-size: .96rem;
    color: var(--text-mid);
    margin: 14px 0;
}
.mr-text strong { color: var(--text); }

/* ---- Suchfelder ---------------------------------------------- */
.mr-suchfelder {
    display: flex;
    gap: 12px;
    max-width: 800px;
    margin: 0 auto;
}
.mr-feld { display: flex; flex-direction: column; }
.mr-feld-name { flex: 2; }
.mr-feld-ort  { flex: 1; }
.mr-feld label {
    font-size: .76rem;
    font-weight: 600;
    color: var(--text-mut);
    margin-bottom: 5px;
}
.mr-feld input {
    width: 100%;
    padding: 14px 15px;
    font-size: 1rem;
    font-family: var(--font);
    color: var(--text);
    background: var(--bg-card);
    border: 1.5px solid var(--border-st);
    border-radius: var(--r-m);
    outline: none;
    transition: border-color .18s, box-shadow .18s;
}
.mr-feld input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(245, 166, 35, .22);
}
.mr-such-hinweis {
    font-size: .8rem;
    color: var(--text-mut);
    margin-top: 12px;
    text-align: center;
}

/* ---- Trefferliste -------------------------------------------- */
.mr-treffer:not(:empty) { margin-top: 14px; }
.mr-treffer-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: left;
    padding: 13px 16px;
    margin-bottom: 8px;
    background: var(--bg-card);
    border: 1.5px solid var(--border);
    border-radius: var(--r-m);
    cursor: pointer;
    font-family: var(--font);
    transition: border-color .15s, background .15s, transform .08s;
}
.mr-treffer-item:hover {
    border-color: var(--accent);
    background: var(--bg-hover);
}
.mr-treffer-item:active { transform: scale(.995); }
.mr-treffer-name { font-size: .98rem; font-weight: 700; color: var(--text); }
.mr-treffer-adr  { font-size: .84rem; color: var(--text-mut); margin-top: 1px; }
.mr-treffer-laedt, .mr-treffer-leer {
    text-align: center;
    font-size: .88rem;
    color: var(--text-mut);
    padding: 14px;
}

/* ---- Betrieb-Karte (Bestätigung) ----------------------------- */
.mr-betrieb-karte {
    background: var(--bg-card);
    border: 1.5px solid var(--border);
    border-radius: var(--r-l);
    box-shadow: var(--shadow-sm);
    padding: 24px;
    text-align: center;
}
.mr-betrieb-name {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -.01em;
}
.mr-betrieb-adr {
    font-size: .92rem;
    color: var(--text-mid);
    margin-top: 4px;
}
.mr-betrieb-meta {
    font-size: .86rem;
    color: var(--text-mut);
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

/* ---- Buttons ------------------------------------------------- */
.mr-btn-reihe {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}
.mr-btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    flex: 1;
    padding: 14px 18px;
    font-size: .96rem;
    font-weight: 700;
    font-family: var(--font);
    border-radius: var(--r-m);
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .12s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
}
.mr-btn:active { transform: scale(.985); }
.mr-btn-primary {
    background: var(--slate);
    color: #fff;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .22);
}
.mr-btn-primary:hover { background: var(--slate-dk); }
.mr-btn-ghost {
    background: var(--bg-card);
    color: var(--text-mid);
    border-color: var(--border-st);
}
.mr-btn-ghost:hover { border-color: var(--text-mut); }
.mr-btn-gross {
    flex: 1;
    padding: 17px;
    font-size: 1.05rem;
    background: var(--slate);
    color: #fff;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .26);
}
.mr-btn-gross:hover { background: var(--slate-dk); }
.mr-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
    box-shadow: none;
}
.mr-link {
    display: block;
    margin: 16px auto 0;
    text-align: center;
    background: none;
    border: none;
    color: var(--text-mut);
    font-size: .86rem;
    font-family: var(--font);
    text-decoration: underline;
    cursor: pointer;
}
.mr-link:hover { color: var(--accent); }

/* ---- Branchen-Badge ------------------------------------------ */
.mr-branche-badge {
    display: block;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--teal);
    background: #f1faf8;
    border: 1.5px solid #c2e6df;
    border-radius: var(--r-m);
    padding: 16px;
    margin: 6px 0;
}
.mr-branche-badge.ok {
    color: #fff;
    background: var(--teal);
    border-color: var(--teal);
}

/* ---- Searchable Dropdown (wie kunde/profil.php) -------------- */
.sd-wrap { position: relative; margin: 6px 0 4px; }
.sd-trigger {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 15px;
    background: var(--bg-card);
    border: 1.5px solid var(--border-st);
    border-radius: var(--r-m);
    cursor: pointer;
    transition: border-color .18s;
}
.sd-trigger:hover, .sd-wrap.open .sd-trigger { border-color: var(--accent); }
.sd-label { flex: 1; font-size: 1rem; color: var(--text); }
.sd-label.leer { color: var(--text-mut); }
.sd-trigger svg { color: var(--text-mut); flex-shrink: 0; }
.sd-dropdown {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0; z-index: 50;
    margin-top: 6px;
    background: var(--bg-card);
    border: 1.5px solid var(--border-st);
    border-radius: var(--r-m);
    box-shadow: var(--shadow);
    max-height: 320px;
    overflow: hidden;
    flex-direction: column;
}
.sd-wrap.open .sd-dropdown { display: flex; }
.sd-search {
    padding: 12px 15px;
    border: none;
    border-bottom: 1px solid var(--border);
    font-size: .92rem;
    font-family: var(--font);
    background: var(--bg-sub);
    outline: none;
    flex-shrink: 0;
}
.sd-options { overflow-y: auto; max-height: 264px; }
.sd-group {
    padding: 9px 15px 4px;
    font-size: .68rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .05em;
    color: var(--text-mut);
    background: var(--bg-sub);
    position: sticky; top: 0;
}
.sd-option {
    padding: 11px 15px;
    font-size: .92rem;
    cursor: pointer;
    transition: background .12s;
}
.sd-option:hover { background: var(--bg-hover); }
.sd-option.selected {
    background: var(--slate);
    color: #fff;
    font-weight: 600;
}

/* ---- Branchen-Tipp / Warnung --------------------------------- */
.mr-branche-tipp {
    font-size: .86rem;
    color: var(--gelb-tx);
    background: var(--gelb-bg);
    border: 1px solid var(--gelb-bd);
    border-radius: var(--r-s);
    padding: 10px 12px;
    margin-top: 10px;
}

/* ---- Loader -------------------------------------------------- */
.mr-loader {
    padding: 30px 0;
    text-align: center;
}
.mr-progress {
    width: 100%;
    max-width: 380px;
    height: 10px;
    margin: 0 auto;
    background: var(--bg-sub);
    border-radius: 99px;
    overflow: hidden;
}
.mr-progress-fill {
    width: 0%;
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--accent), #ffce6e);
    transition: width .42s cubic-bezier(.4,0,.2,1);
}
.mr-loader-text {
    margin-top: 18px;
    font-size: .98rem;
    font-weight: 600;
    color: var(--text-mid);
}

/* ---- Ergebnis ------------------------------------------------ */
/* Platz-Block als eigene Karte: Akzent-Leiste oben, grosse
   Gradient-Zahl, alles auf einem leicht erhoehten Panel. */
.mr-ergebnis-head {
    position: relative;
    text-align: center;
    margin-bottom: 22px;
    padding: 28px 24px 24px;
    background: var(--bg-card);
    border: 1.5px solid var(--border);
    border-radius: var(--r-l);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.mr-ergebnis-head::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent), #ffce6e);
}
.mr-ergebnis-label {
    font-size: .74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--text-mut);
}
.mr-ergebnis-rang {
    font-family: var(--font-display);
    font-size: 4.7rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.035em;
    margin-top: 6px;
    background: linear-gradient(165deg, #f7b23f 0%, #e07c10 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.mr-ergebnis-rang span {
    display: block;
    font-size: .9rem;
    font-weight: 600;
    color: var(--text-mut);
    -webkit-text-fill-color: var(--text-mut);
    letter-spacing: 0;
    margin-top: 8px;
}
/* Verdict-Pille — rang-abhängige Sofort-Wertung */
.mr-verdict {
    display: inline-block;
    margin-top: 12px;
    padding: 7px 18px;
    border-radius: 999px;
    font-size: .9rem;
    font-weight: 700;
}
.mr-verdict.top    { background: #e3f6f1; color: #0c7a67; }
.mr-verdict.gut    { background: #eaf7e6; color: #4a7d23; }
.mr-verdict.mittel { background: #fdeede; color: #b8631c; }
.mr-verdict.hinten { background: #fbe6e3; color: #c0392b; }

.mr-rang-liste {
    background: var(--bg-card);
    border: 1.5px solid var(--border);
    border-radius: var(--r-m);
    overflow: hidden;
}
/* Spaltenkopf der Rangliste */
.mr-rang-kopf {
    display: flex;
    gap: 12px;
    padding: 8px 15px;
    background: var(--bg-sub);
    border-bottom: 1px solid var(--border);
    font-size: .64rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-mut);
}
.mr-rang-kopf-pos   { flex: 0 0 26px; text-align: center; }
.mr-rang-kopf-name  { flex: 1; }
.mr-rang-kopf-rechts { flex: 0 0 auto; }
.mr-rang {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 15px;
    border-bottom: 1px solid var(--border);
}
.mr-rang:last-child { border-bottom: none; }
.mr-rang.eigen {
    background: var(--bg-hover);
    box-shadow: inset 3px 0 0 var(--accent);
}
.mr-rang-pos {
    flex: 0 0 26px;
    font-weight: 800;
    font-size: .92rem;
    color: var(--text-mut);
    text-align: center;
}
.mr-rang.eigen .mr-rang-pos { color: var(--accent); }
.mr-rang-mitte {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.mr-rang-name {
    font-size: .92rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mr-rang.eigen .mr-rang-name { font-weight: 800; }

/* Anonymisierter Mitbewerber: "geschwärzter" Balken + Schloss + Kürzel */
.mr-rang-anon {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 19px;
    min-width: 0;       /* darf innerhalb von .mr-rang-mitte schrumpfen */
    overflow: hidden;
}
.mr-rang-lock {
    color: var(--text-mut);
    flex: 0 0 auto;
}
.mr-rang-blur {
    height: 12px;
    border-radius: 4px;
    flex: 0 1 auto;     /* schrumpfbar — verhindert Überlappung auf Mobile */
    min-width: 24px;
    max-width: 100%;
    background: repeating-linear-gradient(90deg,
        var(--text-mut) 0 17px, transparent 17px 24px);
    filter: blur(2.5px);
    opacity: .5;
}
.mr-rang-badge {
    flex: 0 0 auto;
    font-size: .67rem;
    font-weight: 800;
    color: var(--text-mid);
    background: var(--bg-sub);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 1px 6px;
}
.mr-rang-ort {
    font-size: .76rem;
    color: var(--text-mut);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mr-rang-rechts {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}
.mr-rang-werte {
    font-size: .78rem;
    color: var(--text-mut);
    white-space: nowrap;
}
.mr-rang-werte strong {
    font-size: .86rem;
    font-weight: 800;
    color: var(--text-mid);
}
/* "Bewertungen" ausgeschrieben, nur auf Mobile gekürzt zu "Bew." */
.mr-bew-kurz { display: none; }
/* 5-Sterne-Reihe mit Teilfüllung: graue Leer-Sterne + beschnittenes
   goldenes Voll-Overlay (width = rating/5). */
.mr-sterne {
    position: relative;
    display: inline-block;
    font-size: .82rem;
    line-height: 1;
    letter-spacing: 1.5px;
    white-space: nowrap;
}
.mr-sterne-leer { color: #d8dce2; }
.mr-sterne-voll {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    color: var(--accent);
}
.mr-rang-luecke {
    text-align: center;
    padding: 7px;
    color: var(--text-mut);
    letter-spacing: .35em;
    font-size: .9rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg-sub);
}

/* ---- Fazit-Block: KI-Fazit + Vorteil-Karten + Reveal-CTA ----- */
/* Ein Container, innen durch Trennlinien optisch gegliedert. */
.mr-fazit-block {
    margin-top: 40px;
    background: var(--bg-card);
    border: 1.5px solid var(--border);
    border-radius: var(--r-l);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.mr-fazit {
    padding: 40px 40px;
    font-size: .95rem;
    line-height: 1.6;
    color: var(--text-mid);
    border-left: 4px solid var(--teal);
}

/* Vorteil-Karten (3 Stück, rang-abhängig) */
.mr-vorteile {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--border);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.mr-vorteil {
    background: var(--bg-card);
    padding: 16px 14px;
    text-align: center;
}
.mr-vorteil-icon {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #fef3df;
    color: var(--accent-dk);
    margin-bottom: 8px;
}
.mr-vorteil-icon svg { width: 19px; height: 19px; }
.mr-vorteil-titel {
    font-size: .84rem;
    font-weight: 800;
    color: var(--text);
}
.mr-vorteil-text {
    font-size: .78rem;
    line-height: 1.45;
    color: var(--text-mut);
    margin-top: 3px;
}

/* Reveal-CTA — fließt unten an den Fazit-Block an */
.mr-reveal-inner {
    padding: 40px;
    text-align: center;
}
.mr-reveal-titel {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 800;
}
/* Reveal-Formular (E-Mail + Doppelt-Einwilligung) */
.mr-reveal-form {
    margin-top: 14px;
    text-align: left;
}
.mr-reveal-leistungen {
    margin: 25px 0 0;
    padding: 14px 16px;
    background: rgba(245, 166, 35, .06);
    border-left: 3px solid var(--accent);
    border-radius: var(--r-s);
    font-size: .92rem;
    line-height: 1.55;
}
.mr-reveal-leistungen-title {
    font-weight: 700;
    font-size: .82rem;
    color: var(--text);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.mr-reveal-leistungen-list {
    margin: 0;
    padding: 0 0 0 18px;
    color: var(--text-mut);
}
.mr-reveal-leistungen-list li {
    margin: 4px 0;
}
.mr-reveal-mehr {
    margin: 11px 2px 0;
    font-size: .84rem;
    line-height: 1.5;
    color: var(--text-mut);
}
.mr-reveal-mehr strong { color: var(--text-mid); font-weight: 700; }
.mr-reveal-mehr a { color: var(--accent); font-weight: 600; text-decoration: none; }
.mr-reveal-mehr a:hover { text-decoration: underline; }
.mr-reveal-datenschutz { margin: 8px 2px 0; font-size: .76rem; line-height: 1.5; color: var(--text-mut); }
.mr-reveal-datenschutz a { color: var(--accent); text-decoration: none; }
.mr-reveal-datenschutz a:hover { text-decoration: underline; }
.mr-reveal-email {
    width: 100%;
    padding: 13px 15px;
    font-size: 1rem;
    font-family: var(--font);
    color: var(--text);
    background: var(--bg);
    border: 1.5px solid var(--border-st);
    border-radius: var(--r-m);
    outline: none;
    box-sizing: border-box;
    transition: border-color .18s, box-shadow .18s;
}
.mr-reveal-email:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(245, 166, 35, .22);
}
.mr-check {
    display: flex;
    gap: 9px;
    margin: 20px auto 0;
    max-width: 85%;
    font-size: .82rem;
    line-height: 1.45;
    color: var(--text-mid);
    cursor: pointer;
}
.mr-check input[type=checkbox] {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin: 1px 0 0;
    accent-color: var(--accent);
    cursor: pointer;
}
.mr-check-opt { color: var(--text-mut); }
.mr-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}
.mr-reveal-form .mr-btn {
    width: 100%;
    margin-top: 26px;
}
.mr-reveal-status {
    margin-top: 10px;
    font-size: .84rem;
    text-align: center;
}
.mr-reveal-status.info   { color: var(--text-mut); }
.mr-reveal-status.fehler { color: #c0392b; }

/* Reveal-Formular: Erfolgs-Zustand (nach Absenden) */
.mr-reveal-erfolg-titel {
    font-size: 1rem;
    font-weight: 800;
    color: var(--teal);
    margin-bottom: 4px;
}

/* radar.php: "freigeschaltet"-Badge */
.mr-reveal-badge {
    display: table;
    margin: 2px auto 16px;
    padding: 5px 14px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    color: #0c7a67;
    background: #e3f6f1;
}

/* ---- Cross-Sell (bei Tageslimit) ----------------------------- */
.mr-crosssell {
    margin-top: 22px;
    background: var(--bg-card);
    border: 1.5px solid var(--border);
    border-radius: var(--r-l);
    box-shadow: var(--shadow-sm);
    padding: 35px;
    text-align: center;
}
.mr-crosssell-titel {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 800;
}
.mr-crosssell .mr-btn {
    flex: none;
    display: inline-block;
    text-decoration: none;
    margin-top: 4px;
}

/* ---- "Deine letzten Analysen" -------------------------------- */
.mr-letzte {
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}
.mr-letzte-titel {
    font-size: .76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-mut);
    margin-bottom: 8px;
}
.mr-letzte-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 14px;
    margin-bottom: 6px;
    background: var(--bg-card);
    border: 1.5px solid var(--border);
    border-radius: var(--r-m);
    text-decoration: none;
    transition: border-color .15s, background .15s;
}
.mr-letzte-item:hover {
    border-color: var(--accent);
    background: var(--bg-hover);
}
.mr-letzte-firma {
    font-size: .92rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mr-letzte-pfeil {
    color: var(--accent);
    font-weight: 700;
    flex: 0 0 auto;
    padding-left: 10px;
}

/* ---- Snapshot-Hinweis (ergebnis.php) ------------------------- */
.mr-snapshot-hinweis {
    text-align: center;
    font-size: .82rem;
    color: var(--text-mut);
    margin: 10px 0 16px;
}
.mr-snapshot-hinweis strong { color: var(--text-mid); }
.mr-snapshot-sub {
    margin-top: 3px;
    font-size: .78rem;
    color: var(--text-mut);
}

/* ---- Footer -------------------------------------------------- */
.mr-footer {
    padding: 28px 0 24px;
    text-align: center;
}
.mr-footer nav a {
    color: var(--text-mut);
    font-size: .8rem;
    text-decoration: none;
    margin: 0 8px;
}
.mr-footer nav a:hover { color: var(--accent); text-decoration: underline; }
.mr-footer-by {
    font-size: .74rem;
    color: var(--text-mut);
    margin-top: 8px;
}

/* ---- Mobile -------------------------------------------------- */
@media (max-width: 540px) {
    .mr-app { padding: 0 16px; }
    .mr-logo { font-size: 2.4rem; }
    .mr-h1 { font-size: 1.55rem; }
    .mr-lead { font-size: .94rem; }
    .mr-suchfelder { flex-direction: column; gap: 10px; }
    .mr-btn-reihe { flex-direction: column; }
    .mr-ergebnis-head { padding: 24px 18px 22px; }
    .mr-ergebnis-rang { font-size: 3.7rem; }
    /* "Bewertungen" -> "Bew." auf Mobile */
    .mr-bew-lang { display: none; }
    .mr-bew-kurz { display: inline; }
    /* Vorteil-Karten: untereinander statt 3 nebeneinander */
    .mr-vorteile { grid-template-columns: 1fr; }
    .mr-vorteil {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        text-align: left;
        padding: 13px 16px;
    }
    .mr-vorteil-icon { margin-bottom: 0; flex: 0 0 auto; }
}

/* ============================================================
   FX-LAYER — Ambient-Background, Glass, Glow, Scroll-Reveal
   Modernes "High-End-App"-Finish. Alles rein additiv, respektiert
   prefers-reduced-motion (Block ganz unten).
   ============================================================ */

/* ---- Ambient: weiche Aurora-Verläufe + feines Korn ----------- */
body::before {
    content: "";
    position: fixed;
    inset: -25vmax;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(38vmax 38vmax at 16% 10%, rgba(245, 166, 35, .22), transparent 60%),
        radial-gradient(44vmax 44vmax at 88% 16%, rgba(15, 23, 42, .16), transparent 62%),
        radial-gradient(40vmax 40vmax at 78% 90%, rgba(15, 166, 142, .15), transparent 60%),
        radial-gradient(34vmax 34vmax at 8% 92%, rgba(245, 166, 35, .14), transparent 62%);
    filter: blur(6px);
    animation: auroraDrift 38s ease-in-out infinite alternate;
}
@keyframes auroraDrift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(2.6vmax, -2.2vmax, 0) scale(1.09); }
}
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .04;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Glass-Optik auf allen Karten-Flächen -------------------- */
.mr-betrieb-karte,
.mr-fazit-block,
.mr-crosssell,
.mr-ergebnis-head,
.mr-rang-liste {
    background: rgba(255, 255, 255, .72);
    -webkit-backdrop-filter: blur(16px) saturate(1.7);
    backdrop-filter: blur(16px) saturate(1.7);
    border: 1px solid rgba(255, 255, 255, .65);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .65),
        0 18px 50px -14px rgba(15, 23, 42, .22);
}
.mr-treffer-item,
.mr-letzte-item,
.mr-feld input,
.mr-reveal-email,
.sd-trigger {
    background: rgba(255, 255, 255, .6);
    -webkit-backdrop-filter: blur(10px) saturate(1.4);
    backdrop-filter: blur(10px) saturate(1.4);
}
.sd-dropdown {
    background: rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    backdrop-filter: blur(18px) saturate(1.6);
}
/* Browser ohne backdrop-filter: solide, damit Text lesbar bleibt */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .mr-betrieb-karte, .mr-fazit-block, .mr-crosssell,
    .mr-ergebnis-head, .mr-rang-liste { background: #fff; }
    .mr-treffer-item, .mr-letzte-item, .mr-feld input,
    .mr-reveal-email, .sd-trigger { background: #fff; }
}

/* sanftes Anheben bei Hover */
.mr-treffer-item:hover,
.mr-letzte-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px -12px rgba(15, 23, 42, .26);
}

/* ---- Buttons: Verlauf, Innenkante, Glanz-Sweep, Glow --------- */
.mr-btn-primary,
.mr-btn-gross {
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .14),
        0 8px 24px -8px rgba(15, 23, 42, .55);
}
.mr-btn-primary:hover,
.mr-btn-gross:hover {
    background: linear-gradient(180deg, #243149 0%, #0b1120 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .16),
        0 12px 30px -8px rgba(15, 23, 42, .6);
}
/* Glanz-Sweep zieht beim Hover über den Button */
.mr-btn-primary::after,
.mr-btn-gross::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(110deg,
        transparent 32%, rgba(255, 255, 255, .28) 50%, transparent 68%);
    transform: translateX(-130%);
    transition: transform .75s cubic-bezier(.4, 0, .2, 1);
}
.mr-btn-primary:hover::after,
.mr-btn-gross:hover::after { transform: translateX(130%); }

/* Der grosse CTA "Analyse starten" atmet mit dezentem Amber-Glow */
.mr-btn-gross { animation: ctaBreath 3.4s ease-in-out infinite; }
@keyframes ctaBreath {
    0%, 100% {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .14),
            0 8px 24px -8px rgba(15, 23, 42, .55),
            0 0 0 0 rgba(245, 166, 35, 0);
    }
    50% {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .16),
            0 12px 30px -8px rgba(15, 23, 42, .6),
            0 0 28px 2px rgba(245, 166, 35, .42);
    }
}
.mr-btn:disabled { animation: none; box-shadow: none; }
.mr-btn:disabled::after { display: none; }

/* ---- Logo + Akzent-Glow -------------------------------------- */
.mr-logo span { text-shadow: 0 0 20px rgba(245, 166, 35, .4); }

/* ---- Loader: laufender Glanz auf dem Fortschrittsbalken ------ */
.mr-progress-fill { position: relative; overflow: hidden; }
.mr-progress-fill::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        transparent, rgba(255, 255, 255, .6), transparent);
    transform: translateX(-100%);
    animation: progShine 1.25s ease-in-out infinite;
}
@keyframes progShine { to { transform: translateX(100%); } }

/* ---- Verdict-Pille: federnder Auftritt ----------------------- */
.mr-verdict { animation: pillPop .55s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes pillPop {
    from { opacity: 0; transform: scale(.82); }
    to   { opacity: 1; transform: scale(1); }
}

/* ---- Scroll-Reveal ------------------------------------------- */
/* .mr-fx wird per Inline-Script im <head> gesetzt (JS-an-Erkennung).
   Ohne JS bleibt alles sichtbar — ergebnis.php funktioniert ohne JS. */
.mr-fx .mr-rang-liste,
.mr-fx .mr-fazit-block,
.mr-fx .mr-crosssell,
.mr-fx .mr-letzte {
    opacity: 0;
    transform: translateY(28px);
}
.mr-rang-liste.is-visible,
.mr-fazit-block.is-visible,
.mr-crosssell.is-visible,
.mr-letzte.is-visible {
    opacity: 1;
    transform: none;
    transition:
        opacity .7s cubic-bezier(.16, .84, .44, 1),
        transform .7s cubic-bezier(.16, .84, .44, 1);
}

/* ============================================================
   DARK THEME (.mr-dark) — cinematische Landingpage-Hero-Anmutung
   wie der Hero von bewertungsboost.de. Liegt auf <body> aller
   MR-Seiten. Kippt die Palette, macht aus den Glas-Karten
   dunkle Glas-Panels, primaere Buttons werden Amber.
   ============================================================ */
/* Canvas/Overscroll-Bereich ebenfalls dunkel (verhindert hellen Rand) */
html:has(body.mr-dark) { background: #0a0c12; }

body.mr-dark {
    --bg:        #0d1018;
    --bg-card:   rgba(255, 255, 255, .05);
    --bg-sub:    rgba(255, 255, 255, .045);
    --bg-hover:  rgba(255, 255, 255, .08);
    --text:      #f4f5f7;
    --text-mid:  #b9bdc8;
    --text-mut:  #888d9a;
    --border:    rgba(255, 255, 255, .10);
    --border-st: rgba(255, 255, 255, .17);
    color: var(--text);
    background:
        radial-gradient(115vmax 75vmax at 50% -12%, #1c2438 0%, transparent 58%),
        linear-gradient(180deg, #0f131c 0%, #0a0c12 100%);
    background-attachment: fixed;
}
/* Aurora glüht auf dem dunklen Grund deutlich stärker */
body.mr-dark::before { filter: blur(10px); }
body.mr-dark::after  { opacity: .055; }

/* ---- Dunkle Glas-Panels ------------------------------------- */
body.mr-dark .mr-betrieb-karte,
body.mr-dark .mr-fazit-block,
body.mr-dark .mr-crosssell,
body.mr-dark .mr-ergebnis-head,
body.mr-dark .mr-rang-liste {
    background: rgba(22, 27, 40, .55);
    border: 1px solid rgba(255, 255, 255, .10);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .07),
        0 26px 64px -18px rgba(0, 0, 0, .7);
}
body.mr-dark .mr-treffer-item,
body.mr-dark .mr-letzte-item,
body.mr-dark .mr-feld input,
body.mr-dark .mr-reveal-email,
body.mr-dark .sd-trigger {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .14);
    color: var(--text);
}
body.mr-dark .mr-feld input::placeholder,
body.mr-dark .mr-reveal-email::placeholder { color: var(--text-mut); }
/* E-Mail-Feld im Reveal: gleiche Hervorhebung wie das Suchfeld (Amber-Glow-Rahmen
   + Puls) + Cue mit Pfeil. Dark-spezifisch, weil .mr-dark die Border sonst neutral
   setzt. Cue/Pfeil-Klassen (.mr-such-cue-text/.mr-such-arrow) wiederverwendet. */
.mr-reveal-cue { display:flex; flex-direction:column; align-items:center; gap:0; margin:8px auto 12px; color:var(--accent); }
body.mr-dark .mr-reveal-email {
    border-color: rgba(245,166,35,.5);
    box-shadow: 0 0 0 1px rgba(245,166,35,.08), 0 0 22px 0 rgba(245,166,35,.16);
    animation: mrRevealGlow 3.4s ease-in-out infinite;
}
@keyframes mrRevealGlow {
    0%,100% { box-shadow: 0 0 0 1px rgba(245,166,35,.08), 0 0 22px 0 rgba(245,166,35,.14); }
    50%     { box-shadow: 0 0 0 1px rgba(245,166,35,.20), 0 0 42px 4px rgba(245,166,35,.34); }
}
body.mr-dark .mr-reveal-email:focus {
    animation: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(245,166,35,.30);
}
body.mr-dark .sd-dropdown {
    background: rgba(18, 22, 32, .94);
    border-color: rgba(255, 255, 255, .12);
}
body.mr-dark .sd-search { background: rgba(255, 255, 255, .04); color: var(--text); }
body.mr-dark .sd-group  { background: rgba(255, 255, 255, .04); }
body.mr-dark .mr-treffer-item:hover {
    box-shadow: 0 16px 36px -14px rgba(0, 0, 0, .8);
}

/* ---- Primäre Buttons werden Amber (wie der BB-Hero-CTA) ------ */
body.mr-dark .mr-btn-primary,
body.mr-dark .mr-btn-gross {
    background: linear-gradient(180deg, #f8b341 0%, #e8881c 100%);
    color: #1c1404;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .4),
        0 10px 30px -8px rgba(245, 166, 35, .5);
}
body.mr-dark .mr-btn-primary:hover,
body.mr-dark .mr-btn-gross:hover {
    background: linear-gradient(180deg, #ffc154 0%, #f2942b 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .45),
        0 14px 38px -8px rgba(245, 166, 35, .6);
}
body.mr-dark .mr-btn-gross { animation: ctaBreathDark 3.4s ease-in-out infinite; }
@keyframes ctaBreathDark {
    0%, 100% {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .4),
            0 10px 30px -8px rgba(245, 166, 35, .5),
            0 0 0 0 rgba(245, 166, 35, 0);
    }
    50% {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .45),
            0 14px 38px -8px rgba(245, 166, 35, .6),
            0 0 34px 4px rgba(245, 166, 35, .55);
    }
}
body.mr-dark .mr-btn-ghost {
    background: rgba(255, 255, 255, .06);
    color: var(--text-mid);
    border-color: rgba(255, 255, 255, .16);
}
body.mr-dark .mr-btn-ghost:hover { border-color: rgba(255, 255, 255, .34); }

/* ---- Detail-Flächen auf dunkel nachziehen ------------------- */
body.mr-dark .mr-sterne-leer { color: rgba(255, 255, 255, .16); }
body.mr-dark .mr-vorteil-icon {
    background: rgba(245, 166, 35, .14);
    color: var(--accent);
}
body.mr-dark .mr-vorteil { background: rgba(255, 255, 255, .03); }
body.mr-dark .mr-branche-badge {
    color: #45d8be;
    background: rgba(15, 166, 142, .12);
    border-color: rgba(15, 166, 142, .34);
}
body.mr-dark .mr-branche-badge.ok {
    color: #07140f;
    background: var(--teal);
    border-color: var(--teal);
}
body.mr-dark .sd-option.selected { background: var(--accent); color: #1c1404; }

/* ---- HERO-Bereich (Suche-Schritt auf der Startseite) -------- */
.mr-hero-over {
    display: table;
    margin: 0 auto 18px;
    padding: 6px 16px;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--accent);
    background: rgba(245, 166, 35, .10);
    border: 1px solid rgba(245, 166, 35, .30);
    border-radius: 999px;
}
body.mr-dark .mr-h1 {
    font-size: clamp(2rem, 6vw, 3.2rem);
    letter-spacing: -.025em;
    line-height: 1.12;
}
body.mr-dark .mr-h1 em {
    font-style: normal;
    color: var(--accent);
    text-shadow: 0 0 32px rgba(245, 166, 35, .5);
}
body.mr-dark .mr-lead { font-size: 1.06rem; }
.mr-hero-trust {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin: 0 auto 24px;
    font-size: .82rem;
    color: var(--text-mut);
}
.mr-hero-trust span { display: inline-flex; align-items: center; gap: 7px; }
.mr-hero-trust span::before {
    content: "";
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px rgba(245, 166, 35, .8);
}
.mr-hero-trust strong { color: var(--text-mid); font-weight: 700; }
body.mr-dark .mr-feld input {
    padding: 16px 17px;
    font-size: 1.04rem;
}

/* Hero: gestaffelter Auftritt der einzelnen Elemente (BB-Hero-Feel) */
body.mr-dark .mr-step[data-step="suche"].active { animation: none; }
body.mr-dark .mr-step[data-step="suche"].active #suche-normal > * {
    opacity: 0;
    animation: fadeUp .7s cubic-bezier(.16, .84, .44, 1) forwards;
}
body.mr-dark .mr-step[data-step="suche"].active #suche-normal > *:nth-child(1) { animation-delay: .05s; }
body.mr-dark .mr-step[data-step="suche"].active #suche-normal > *:nth-child(2) { animation-delay: .14s; }
body.mr-dark .mr-step[data-step="suche"].active #suche-normal > *:nth-child(3) { animation-delay: .23s; }
body.mr-dark .mr-step[data-step="suche"].active #suche-normal > *:nth-child(4) { animation-delay: .32s; }
body.mr-dark .mr-step[data-step="suche"].active #suche-normal > *:nth-child(5) { animation-delay: .41s; }
body.mr-dark .mr-step[data-step="suche"].active #suche-normal > *:nth-child(6) { animation-delay: .50s; }
body.mr-dark .mr-step[data-step="suche"].active #suche-normal > *:nth-child(7) { animation-delay: .59s; }
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- Legal-Content (Datenschutz/Impressum/Nutzungsbedingungen) ---
   Weisse "Reader-Mode"-Karte auf dem dunklen MR-Hintergrund —
   lange Rechtstexte brauchen kontrastreiche Lesbarkeit.
*/
/* Kleiner Zurueck-Link ueber der Legal-Karte */
.mr-legal-back {
    max-width: 1000px;
    margin: 12px auto -4px;
    padding: 0 4px;
}
.mr-legal-back a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .86rem;
    color: var(--text-mid);
    text-decoration: none;
    transition: color .15s;
}
.mr-legal-back a:hover { color: var(--accent); }
.mr-legal-back svg { flex: 0 0 auto; }

.mr-legal-content {
    max-width: 1000px;
    margin: 20px auto 40px;
    padding: 44px clamp(20px, 5vw, 64px);
    background: rgba(255, 255, 255, .97);
    color: #18181b;
    border-radius: var(--r-l);
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .55), 0 1px 0 rgba(255,255,255,.6) inset;
    line-height: 1.66;
    font-size: .96rem;
    font-family: var(--font);
}
.mr-legal-content h1 {
    font-family: var(--font-display);
    font-size: 1.85rem;
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 0 0 24px;
    color: #18181b;
}
.mr-legal-content h2 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    margin: 32px 0 12px;
    color: #18181b;
}
.mr-legal-content h3 {
    font-size: 1.04rem;
    font-weight: 700;
    margin: 24px 0 8px;
    color: #18181b;
}
.mr-legal-content h4 {
    font-size: .96rem;
    font-weight: 700;
    margin: 18px 0 6px;
    color: #3f3f46;
}
.mr-legal-content p { margin: 0 0 14px; color: #3f3f46; }
.mr-legal-content a {
    color: var(--accent-dk);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.mr-legal-content a:hover { color: #b8761a; }
.mr-legal-content strong { color: #18181b; font-weight: 700; }
.mr-legal-content em { font-style: italic; }
.mr-legal-content ul, .mr-legal-content ol {
    margin: 8px 0 16px 22px;
    color: #3f3f46;
}
.mr-legal-content li { margin-bottom: 5px; }
.mr-legal-content hr { border: none; border-top: 1px solid #e4e7ec; margin: 28px 0; }
.mr-legal-content table { border-collapse: collapse; width: 100%; margin: 14px 0; font-size: .92rem; }
.mr-legal-content th, .mr-legal-content td { border: 1px solid #e4e7ec; padding: 8px 12px; text-align: left; }
.mr-legal-content th { background: #f4f5f7; font-weight: 600; }
.mr-legal-content code {
    background: #f4f5f7;
    padding: 1px 6px;
    border-radius: 3px;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: .9em;
}
.mr-legal-content blockquote {
    border-left: 3px solid var(--accent);
    padding: 10px 18px;
    margin: 16px 0;
    background: #fef8e8;
    color: #3f3f46;
    font-style: italic;
}
/* Mehrere Datenschutz-Bloecke (Haupt / Social / Sonstige) trennen */
.mr-legal-section + .mr-legal-section {
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid #e4e7ec;
}
.mr-legal-stand {
    margin-top: 40px;
    padding-top: 18px;
    border-top: 1px solid #e4e7ec;
    font-size: .82rem;
    color: #6b7280;
    font-style: italic;
}
.mr-legal-placeholder {
    color: #6b7280;
    font-style: italic;
    text-align: center;
    padding: 30px 0;
}
@media (max-width: 540px) {
    .mr-legal-content { padding: 30px 22px; font-size: .92rem; margin: 8px auto 24px; }
    .mr-legal-content h1 { font-size: 1.5rem; }
    .mr-legal-content h2 { font-size: 1.12rem; }
}

/* ---- Reduced Motion: alles Bewegte ruhigstellen -------------- */
@media (prefers-reduced-motion: reduce) {
    body::before { animation: none; }
    .mr-btn-gross { animation: none; }
    .mr-btn-primary::after, .mr-btn-gross::after { display: none; }
    .mr-progress-fill::after { animation: none; }
    .mr-verdict { animation: none; }
    .mr-step.active { animation: none; }
    .mr-fx .mr-rang-liste,
    .mr-fx .mr-fazit-block,
    .mr-fx .mr-crosssell,
    .mr-fx .mr-letzte { opacity: 1; transform: none; }
    .mr-rang-liste.is-visible,
    .mr-fazit-block.is-visible,
    .mr-crosssell.is-visible,
    .mr-letzte.is-visible { transition: none; }
    .mr-treffer-item:hover, .mr-letzte-item:hover { transform: none; }
    body.mr-dark .mr-step[data-step="suche"].active #suche-normal > * {
        opacity: 1;
        animation: none;
    }
}

/* ═══════════════════════════════════════════════════════════════
   "Deine letzten Analysen" — Zeile mit X-Button zum Entfernen
   ═══════════════════════════════════════════════════════════════
   Aktueller mr-letzte-item bleibt als anklickbarer <a>. Der X-Button
   liegt DANEBEN (nicht innerhalb des <a>, sonst nested-interactive-Bug).
   Hover des X-Buttons -> rot, des Items -> Amber (siehe oben).
*/
.mr-letzte-row {
    display: flex;
    align-items: stretch;
    gap: 6px;
    margin-bottom: 6px;
}
.mr-letzte-row .mr-letzte-item {
    flex: 1; min-width: 0;
    margin-bottom: 0;  /* override des Item-mb, weil row-gap die Lücke macht */
}
/* X-Button: transparent, dezent weiss/grau — passt zum cinematischen Dark-Look.
   Kein eigener Hintergrund (sonst hellt es die dunkle Bar auf). Im Hover
   leicht rot toenend als visuelles Signal ohne hartes Background-Rect. */
.mr-letzte-del {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px;
    background: transparent;
    border: 1.5px solid transparent;
    border-radius: var(--r-m);
    color: var(--text-mut);
    font-size: 1rem; line-height: 1;
    cursor: pointer;
    transition: color .15s, border-color .15s, background .15s, transform .15s;
    font-family: inherit;
    padding: 0;
    opacity: .65;
}
.mr-letzte-del:hover {
    background: rgba(220, 38, 38, .12);
    border-color: rgba(220, 38, 38, .35);
    color: #ef4444;
    opacity: 1;
    transform: translateY(-1px);
}
.mr-letzte-del:active { transform: translateY(0); }
/* Dark-Hero: X in halbtransparentem Weiss, Hover weiterhin rot */
body.mr-dark .mr-letzte-del {
    color: rgba(255, 255, 255, .55);
}
body.mr-dark .mr-letzte-del:hover {
    background: rgba(239, 68, 68, .18);
    border-color: rgba(239, 68, 68, .45);
    color: #fca5a5;
}

/* ═══════════════════════════════════════════════════════════════
   mrConfirmModal — globales Bestaetigungs-Modal (MR-Cinematic)
   ═══════════════════════════════════════════════════════════════
   Analog zu bbConfirmModal in BB, aber im MR-Brand: helle Glas-Karte
   mit Amber-Akzent. Triple-Schutz gegen FOUC (hidden-Attribut + CSS
   visibility/opacity + JS Override beim Open).

   Aufruf: mrConfirmModal({ title, text, okLabel, cancelLabel, danger, onConfirm })
*/
.mr-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, .55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity .2s ease;
}
.mr-modal-overlay.is-open {
    opacity: 1;
}
.mr-modal {
    background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
    border: 1px solid var(--border);
    border-radius: 18px;
    width: 100%;
    max-width: 440px;
    padding: 26px 28px 22px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .9) inset,
        0 24px 60px -16px rgba(15, 23, 42, .4),
        0 2px 8px rgba(15, 23, 42, .12);
    transform: translateY(8px) scale(.97);
    transition: transform .25s cubic-bezier(.16, 1, .3, 1);
}
.mr-modal-overlay.is-open .mr-modal {
    transform: translateY(0) scale(1);
}
.mr-modal-head {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 14px;
}
.mr-modal-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(245, 166, 35, .18), rgba(245, 166, 35, .06));
    color: #c97a1a;
    font-size: 1.2rem;
    box-shadow: inset 0 0 0 1px rgba(245, 166, 35, .25);
    flex-shrink: 0;
}
.mr-modal-icon.is-danger {
    background: linear-gradient(135deg, rgba(220, 38, 38, .15), rgba(220, 38, 38, .04));
    color: #b91c1c;
    box-shadow: inset 0 0 0 1px rgba(220, 38, 38, .2);
}
/* Texte hardkodiert auf dunkles Slate — Modal-Card ist immer hell
   (auch im Dark-Hero), damit es klar absetzt. CSS-Vars wuerden im
   body.mr-dark-Kontext helle Farben liefern -> unlesbar auf weiss. */
.mr-modal-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    line-height: 1.3;
}
.mr-modal-body {
    font-size: .92rem;
    color: #475569;
    line-height: 1.55;
    margin-bottom: 22px;
}
.mr-modal-body p { margin: 0 0 8px; }
.mr-modal-body p:last-child { margin-bottom: 0; }
.mr-modal-body strong { color: #0f172a; }
.mr-modal-actions {
    display: flex; gap: 10px; justify-content: flex-end;
}
.mr-modal-btn {
    padding: 10px 18px;
    border-radius: 10px;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    border: 1.5px solid transparent;
    transition: all .15s ease;
}
/* Auch Cancel-Button hartcodiert, sonst greift im body.mr-dark der
   helle --text auf hellem --bg-sub-Rect = unlesbar. */
.mr-modal-btn-cancel {
    background: #f1f5f9;
    color: #334155;
    border-color: #e2e8f0;
}
.mr-modal-btn-cancel:hover {
    background: #e2e8f0;
    border-color: #cbd5e1;
}
.mr-modal-btn-ok {
    background: linear-gradient(180deg, var(--accent), var(--accent-dk));
    color: #fff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .2),
        0 4px 12px -2px rgba(245, 166, 35, .35);
}
.mr-modal-btn-ok:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .2),
        0 6px 16px -2px rgba(245, 166, 35, .45);
}
.mr-modal-btn-ok.is-danger {
    background: linear-gradient(180deg, #ef4444, #b91c1c);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .2),
        0 4px 12px -2px rgba(220, 38, 38, .35);
}
.mr-modal-btn-ok.is-danger:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .2),
        0 6px 16px -2px rgba(220, 38, 38, .45);
}
@media (max-width: 480px) {
    .mr-modal { padding: 22px 22px 18px; }
    .mr-modal-actions { flex-direction: column-reverse; }
    .mr-modal-btn { width: 100%; }
}

/* ============================================================
   LANDINGPAGE-STRECKE (.mr-lp) — Ueberzeugung unter dem Funnel.
   Nutzt die Dark-Tokens (body.mr-dark) + Amber-Akzent. Wird beim
   Funnel-Start per JS (zeigeStep) ueber [hidden] ausgeblendet.
   ============================================================ */
.mr-lp{max-width:1000px;margin:8px auto 0;padding:0 22px}
.mr-lp[hidden]{display:none}
.mr-lp-section{padding:42px 0}
.mr-lp-head{text-align:center;max-width:680px;margin:0 auto 26px}
.mr-lp-eyebrow{font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:11px}
.mr-lp-h2{font-family:'Plus Jakarta Sans','Inter',sans-serif;font-weight:800;font-size:clamp(1.5rem,3.4vw,2.05rem);line-height:1.15;letter-spacing:-.02em;color:#fff}
.mr-lp-sub{color:var(--text-mid);margin-top:11px;font-size:1.02rem}

.mr-fx .mr-lp-reveal{opacity:0;transform:translateY(20px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.mr-fx .mr-lp-reveal.is-visible{opacity:1;transform:none}

.mr-lp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}
.mr-lp-stat{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:22px 16px;text-align:center}
.mr-lp-stat-num{font-family:'Plus Jakarta Sans','Inter',sans-serif;font-weight:800;font-size:clamp(1.7rem,3.4vw,2.4rem);color:var(--accent);line-height:1}
.mr-lp-stat-label{font-size:.84rem;color:var(--text-mid);margin-top:9px;line-height:1.4}
.mr-lp-stat-src{font-size:.68rem;color:var(--text-mut);margin-top:8px}

.mr-lp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.mr-lp-card{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:22px;transition:border-color .2s,transform .2s}
.mr-lp-card:hover{border-color:var(--border-st);transform:translateY(-3px)}
.mr-lp-card-ic{width:38px;height:38px;border-radius:11px;background:rgba(245,166,35,.14);border:1px solid rgba(245,166,35,.3);display:flex;align-items:center;justify-content:center;font-size:1.15rem;margin-bottom:13px}
.mr-lp-card h3{font-family:'Plus Jakarta Sans','Inter',sans-serif;font-weight:700;font-size:1.05rem;color:#fff;margin-bottom:7px}
.mr-lp-card p{color:var(--text-mid);font-size:.93rem}

.mr-lp-mock{background:var(--bg-card);border:1px solid var(--border);border-radius:18px;padding:22px;box-shadow:0 26px 64px -18px rgba(0,0,0,.7)}
.mr-lp-mock-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.mr-lp-mock-head b{font-family:'Plus Jakarta Sans','Inter',sans-serif;color:#fff;font-size:1.05rem}
.mr-lp-mock-pill{font-size:.72rem;font-weight:700;padding:5px 12px;border-radius:999px;background:rgba(245,166,35,.16);color:#ffd591;border:1px solid rgba(245,166,35,.34)}
.mr-lp-rank{display:flex;align-items:center;gap:13px;padding:11px 13px;border-radius:11px;border:1px solid transparent}
.mr-lp-rank + .mr-lp-rank{margin-top:6px}
.mr-lp-rank-pos{width:26px;text-align:center;font-weight:700;color:var(--text-mut)}
.mr-lp-rank-name{flex:1;color:var(--text-mid);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mr-lp-rank-cnt{font-weight:600;color:var(--text-mid);font-size:.9rem;white-space:nowrap}
.mr-cnt-kurz{display:none}
.mr-lp-rank.eigen{background:rgba(245,166,35,.1);border-color:rgba(245,166,35,.34)}
.mr-lp-rank.eigen .mr-lp-rank-pos{color:var(--accent)}
.mr-lp-rank.eigen .mr-lp-rank-name{color:#fff;font-weight:700}
.mr-lp-rank.eigen .mr-lp-rank-cnt{color:#fff}
.mr-lp-gap{display:flex;flex-direction:column;align-items:center;gap:4px;padding:9px 0}
.mr-lp-gap i{width:4px;height:4px;border-radius:50%;background:var(--text-mut);opacity:.4}
.mr-lp-mock-note{margin-top:13px;font-size:.78rem;color:var(--text-mut);text-align:center}

.mr-lp-cross{background:linear-gradient(135deg,rgba(245,166,35,.12),rgba(245,166,35,.04));border:1px solid rgba(245,166,35,.28);border-radius:18px;padding:32px;text-align:center}
.mr-lp-cross h2{font-family:'Plus Jakarta Sans','Inter',sans-serif;font-weight:800;font-size:clamp(1.4rem,3vw,1.95rem);color:#fff;letter-spacing:-.02em}
.mr-lp-cross p{color:var(--text-mid);max-width:560px;margin:13px auto 20px;font-size:1rem}

.mr-lp-faq{max-width:760px;margin:0 auto;display:grid;gap:11px}
.mr-lp-faq details{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.mr-lp-faq summary{padding:16px 19px;cursor:pointer;font-weight:600;color:#fff;font-size:1rem;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:14px}
.mr-lp-faq summary::-webkit-details-marker{display:none}
.mr-lp-faq summary::after{content:"+";font-size:1.4rem;color:var(--accent);font-weight:400;line-height:1;transition:transform .2s}
.mr-lp-faq details[open] summary::after{transform:rotate(45deg)}
.mr-lp-faq p{padding:0 19px 17px;color:var(--text-mid);font-size:.94rem;line-height:1.6;box-sizing:border-box;overflow:hidden;transition:height .28s ease}

.mr-lp-finalcta{text-align:center}

@media(max-width:880px){
  .mr-lp-grid{grid-template-columns:1fr}
  .mr-lp-stats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .mr-lp{padding:0 16px}
  .mr-lp-section{padding:32px 0}
  .mr-lp-mock{padding:16px}
  .mr-lp-rank{gap:9px;padding:10px 11px}
  .mr-lp-rank-cnt{font-size:.82rem}
  .mr-lp-rank .mr-cnt-lang{display:none}
  .mr-lp-rank .mr-cnt-kurz{display:inline}
}
/* ============================================================
   SUCHFELD-ABSETZUNG: Eingabe-Zone hervorheben + handgeschwungener,
   animierter Pfeil "Gib hier deine Daten ein". Amber-Akzent + Glow-Puls.
   ============================================================ */
.mr-such-cue{display:flex;flex-direction:column;align-items:center;gap:0;margin:24px auto 0;color:var(--accent)}
.mr-such-cue-text{font-family:'Plus Jakarta Sans','Inter',sans-serif;font-weight:700;font-size:1.04rem;color:var(--accent);transform:rotate(-3deg);text-shadow:0 0 18px rgba(245,166,35,.35)}
.mr-such-arrow{width:84px;height:56px;margin-top:2px;color:var(--accent);overflow:visible;filter:drop-shadow(0 0 10px rgba(245,166,35,.3));animation:mrArrowBob 2s ease-in-out infinite}
@keyframes mrArrowBob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

.mr-such-box{
    position:relative;
    max-width:850px;margin:20px auto 60px;padding:40px 70px 40px;border-radius:20px;
    background:linear-gradient(180deg,rgba(245,166,35,.07),rgba(255,255,255,.02));
    border:1.5px solid rgba(245,166,35,.42);
    box-shadow:0 0 0 4px rgba(245,166,35,.05),0 22px 60px -22px rgba(245,166,35,.30),inset 0 1px 0 rgba(255,255,255,.06);
}
/* Glow-Puls auf Pseudo-Element, damit ihn die Funnel-Stagger-Animation
   (#suche-normal > * { animation: fadeUp }) nicht via Spezifitaet ueberschreibt. */
.mr-such-box::after{
    content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
    animation:mrSuchGlow 3.4s ease-in-out infinite;
}
@keyframes mrSuchGlow{
    0%,100%{box-shadow:0 0 0 1px rgba(245,166,35,.06),0 0 26px 0 rgba(245,166,35,.10)}
    50%{box-shadow:0 0 0 1px rgba(245,166,35,.18),0 0 46px 5px rgba(245,166,35,.32)}
}
.mr-such-box .mr-suchfelder{margin-top:0}
.mr-such-box .mr-such-hinweis{margin-bottom:0}
/* Treffer liegen jetzt IN der Box unter den Feldern. "Tippe..."-Hinweis
   ausblenden, sobald Treffer da sind (:has degradiert sauber auf alten Browsern). */
.mr-such-box:has(.mr-treffer:not(:empty)) .mr-such-hinweis{display:none}
/* Tageslimit erreicht: Felder sichtbar lassen, aber sperren (kein Glow, keine Funktion). */
.mr-such-box.is-locked { border-color: rgba(255,255,255,.14); box-shadow: none; }
.mr-such-box.is-locked::after { animation: none; box-shadow: none; }
.mr-such-box.is-locked .mr-suchfelder { opacity: .5; }
.mr-such-box.is-locked .mr-feld input { cursor: not-allowed; }
.mr-such-hinweis.mr-such-hinweis--limit { color: var(--text-mid); font-size: .92rem; }
.mr-such-hinweis--limit strong { color: var(--accent); }

@media(max-width:560px){
    .mr-such-box{padding:24px 18px 22px}
    .mr-such-arrow{width:70px;height:48px}
}
@media(prefers-reduced-motion:reduce){
    .mr-such-arrow{animation:none}
    .mr-such-box::after{animation:none}
    body.mr-dark .mr-reveal-email{animation:none}
}