/* ============================================================
   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:      #0FA68E;
    --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: 700px;
    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;
    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: 460px;
}
.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;
}
.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 { 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;
    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: 20px;
    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: 18px 20px;
    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: 20px;
    text-align: center;
}
.mr-reveal-titel {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 800;
}
/* Reveal-Formular (E-Mail + Doppelt-Einwilligung) */
.mr-reveal-form {
    margin-top: 14px;
    text-align: left;
}
.mr-reveal-leistungen {
    margin: 14px 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-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-top: 12px;
    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: 16px;
}
.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: 22px;
    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 4px;
}
.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); }
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%; }
}