/**
 * MERKBLATT.CSS — Hausstil fuer hochgeladene Merkblaetter (Schritt 3, 12.09.2026)
 *
 * Vorbild: das Gemini-PDF (Kopfkarte, Infokasten mit Akzentkante, farbiger
 * Tabellenkopf, gestrichelter Formelkasten, zwei Tipp-Spalten, Praxis-Tipp),
 * ABER durchgehend mit den Variablen aus style.css:7-95 — Amber-Akzent,
 * Glas-Karten, Playfair/DM Sans. Dunkel- und Hell-Theme.
 *
 * WARUM alles unter .mb- : style.css:566-574 setzt h1-h6 global auf clamp(),
 * d.h. eine nackte <h2> waere hier riesig. Jedes Element bekommt deshalb eine
 * eigene Klasse UND eine eigene font-size. Nichts aus zubereitung.css oder
 * css/components/ wird wiederverwendet — die Zubereitungs-Seite laedt
 * components/ gar nicht (Beobachtung 12.09.).
 */

/* === Themenfarben: einmal je Theme, damit die Bausteine selbst neutral bleiben === */
.mb-sheet {
    /* Kopf/Tabellenkopf bewusst dunkler als --accent-primary:
       weisse Schrift auf #f59e0b haette nur 2,9:1 Kontrast, auf #a86408 4,7:1. */
    --mb-brand-from: #a86408;
    --mb-brand-to: #7c4606;
    --mb-brand-on: #ffffff;
    --mb-titel: var(--accent-tertiary);
    --mb-zahl: var(--accent-secondary);
    --mb-zebra: rgba(255, 255, 255, 0.025);
    --mb-tipp-bg: rgba(245, 158, 11, 0.08);
    --mb-tipp-border: rgba(245, 158, 11, 0.35);
}

[data-theme="light"] .mb-sheet {
    --mb-brand-from: #b96f08;
    --mb-brand-to: #8a4f06;
    --mb-titel: #b45309;
    --mb-zahl: #b45309;
    --mb-zebra: rgba(0, 0, 0, 0.022);
    --mb-tipp-bg: #fffbeb;
    --mb-tipp-border: #fcd34d;
}

/* === Blatt === */
.mb-sheet {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    max-width: 900px;
    margin: 0 auto;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-primary);
}

/* === Kopfkarte === */
.mb-kopf {
    padding: var(--space-xl) var(--space-lg);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--mb-brand-from) 0%, var(--mb-brand-to) 100%);
    box-shadow: var(--shadow-md);
    color: var(--mb-brand-on);
}

.mb-badge {
    display: inline-block;
    margin-bottom: var(--space-md);
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.15);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--mb-brand-on);
}

.mb-titel {
    margin: 0;
    font-family: var(--font-display);
    /* eigene Groesse — sonst greift h1 { clamp(2rem, 5vw, 3.5rem) } aus style.css */
    font-size: clamp(1.6rem, 4.5vw, 2.5rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--mb-brand-on);
}

.mb-untertitel {
    margin: var(--space-sm) 0 0;
    font-size: 1rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92);
}

/* === Ueberschrift zwischen den Bausteinen === */
.mb-ueberschrift {
    margin: var(--space-sm) 0 0;
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--accent-subtle);
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--mb-titel);
}

/* === Absatz / Freitext === */
.mb-absatz {
    margin: 0;
    font-size: 1rem;
    /* pre-line: Zeilenumbrueche aus der KI-Antwort bleiben sichtbar,
       ohne dass irgendwo innerHTML gebraucht wird. */
    white-space: pre-line;
    color: var(--text-secondary);
}

/* === Infokasten (linke Akzentkante wie im PDF) === */
.mb-infokasten {
    padding: var(--space-lg);
    border: 1px solid var(--border-subtle);
    border-left: 4px solid var(--accent-primary);
    border-radius: var(--radius-sm) var(--radius-lg) var(--radius-lg) var(--radius-sm);
    background: var(--accent-subtle);
}

.mb-infokasten-titel {
    margin: 0 0 var(--space-sm);
    font-family: var(--font-display);
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--mb-titel);
}

.mb-infokasten-text {
    margin: 0;
    font-size: 0.98rem;
    white-space: pre-line;
    color: var(--text-primary);
}

/* === Tabelle === */
.mb-tabelle-wrap {
    /* Scrollt IN SICH, nie die Seite (Abnahme 390 px) */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--bg-glass);
}

.mb-tabelle {
    width: 100%;
    /* erzwingt lesbare Spalten; darunter greift der Wrapper-Scroll */
    min-width: 620px;
    border-collapse: collapse;
    font-size: 0.95rem;
}

/* Verlauf liegt auf der ganzen Kopfzeile, nicht je Zelle — sonst startet
   der Gradient in jeder Spalte neu und es entstehen sichtbare Kanten. */
.mb-tabelle thead {
    background: linear-gradient(135deg, var(--mb-brand-from) 0%, var(--mb-brand-to) 100%);
}

.mb-tabelle th {
    padding: 14px var(--space-md);
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 600;
    text-align: left;
    color: var(--mb-brand-on);
}

.mb-tabelle th:first-child { border-top-left-radius: var(--radius-lg); }
.mb-tabelle th:last-child { border-top-right-radius: var(--radius-lg); }

.mb-tabelle td {
    padding: 12px var(--space-md);
    border-top: 1px solid var(--border-subtle);
    vertical-align: top;
    color: var(--text-primary);
}

.mb-tabelle tbody tr:nth-child(even) { background: var(--mb-zebra); }

.mb-tabelle td:first-child { font-weight: 600; }

/* Werte-Spalten: im PDF amber und fett */
.mb-tabelle td + td {
    font-weight: 600;
    white-space: nowrap;
    color: var(--mb-zahl);
}

/* Nebenzeile der ersten Spalte (Beispiele) — nur wenn die KI wirklich
   einen Zeilenumbruch liefert; es wird nichts hineininterpretiert. */
.mb-zelle-neben {
    display: block;
    margin-top: 3px;
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--text-secondary);
}

/* === Formel === */
.mb-formel {
    padding: var(--space-lg);
    border: 2px dashed var(--accent-primary);
    border-radius: var(--radius-lg);
    background: var(--accent-subtle);
    text-align: center;
}

.mb-formel-text {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.35;
    white-space: pre-line;
    color: var(--mb-titel);
}

.mb-formel-hinweis {
    margin: var(--space-sm) 0 0;
    font-size: 0.88rem;
    white-space: pre-line;
    color: var(--text-secondary);
}

/* === Listen (Tipp-Kaesten) === */
.mb-liste {
    padding: var(--space-lg);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--bg-glass);
}

.mb-liste-titel {
    margin: 0 0 var(--space-md);
    font-family: var(--font-display);
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--mb-titel);
}

.mb-punkte {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mb-punkt {
    position: relative;
    padding-left: 18px;
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.mb-punkt + .mb-punkt { margin-top: var(--space-md); }

.mb-punkt::before {
    content: '\2022';
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 700;
    color: var(--accent-primary);
}

.mb-punkt-fett {
    font-weight: 700;
    color: var(--text-primary);
}

/* === Zweispalter: zwei aufeinanderfolgende Listen mit Titel === */
.mb-spalten {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

@media (min-width: 700px) {
    .mb-spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.mb-spalten > .mb-liste { height: 100%; }

/* === Praxis-Tipp === */
.mb-tipp {
    padding: var(--space-lg);
    border: 1px solid var(--mb-tipp-border);
    border-radius: var(--radius-lg);
    background: var(--mb-tipp-bg);
}

.mb-tipp-titel {
    margin: 0 0 var(--space-sm);
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--mb-titel);
}

.mb-tipp-text {
    margin: 0;
    font-size: 0.98rem;
    white-space: pre-line;
    color: var(--text-primary);
}

[data-theme="light"] .mb-tipp-text { color: #78350f; }

/* === Unbekannter Bausteintyp === */
/* Lieber sichtbar roh anzeigen als stillschweigend verlieren (Nichts geht verloren). */
.mb-unbekannt {
    margin: 0;
    padding: var(--space-md);
    border: 1px dashed var(--border-medium);
    border-radius: var(--radius-md);
    background: var(--bg-glass);
    font-family: ui-monospace, monospace;
    font-size: 0.8rem;
    line-height: 1.5;
    word-break: break-word;
    white-space: pre-wrap;
    color: var(--text-muted);
}

/* === Mobil: alles einspaltig, etwas kompakter === */
@media (max-width: 520px) {
    .mb-sheet { gap: var(--space-md); }
    .mb-kopf { padding: var(--space-lg) var(--space-md); }
    .mb-infokasten,
    .mb-liste,
    .mb-formel,
    .mb-tipp { padding: var(--space-md); }
}

/* ===================================================================
   TEIL 2 — Bereich "Merkblaetter" auf der Zubereitungs-Seite
   (Schritt 4, 12.09.2026)

   WARUM eigene Knopf-Klassen statt .btn aus style.css: .btn traegt dort
   feste Hoehen und Abstaende aus dem Rezept-Layout; hier stehen bis zu
   drei Knoepfe in einer Kartenzeile. Die Kacheln dagegen nutzen bewusst
   .import-option aus style.css (die Seite laedt sie, :1730) — so sehen
   sie exakt aus wie die Import-Kacheln auf der Startseite.
   =================================================================== */

.mb-bereich {
    margin-top: var(--space-2xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--border-subtle);
}

.mb-bereich-hinweis {
    margin: 0 0 var(--space-lg);
    font-family: var(--font-body);
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* Laufender Stand ("Die KI liest das Merkblatt…") */
.mb-status {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--accent-subtle);
    border-radius: var(--radius-md);
    background: var(--accent-subtle);
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--accent-primary);
}

/* === Text einfuegen === */
.mb-text-box {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.mb-textfeld {
    width: 100%;
    min-height: 160px;
    padding: var(--space-md);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    background: var(--bg-glass);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.6;
    resize: vertical;
    box-sizing: border-box;
}

.mb-feld {
    flex: 1 1 200px;
    min-width: 0;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-sm);
    background: var(--bg-glass);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.95rem;
    box-sizing: border-box;
}

.mb-textfeld:focus,
.mb-feld:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-subtle);
}

/* === Knoepfe === */
.mb-leiste,
.mb-karte-leiste,
.mb-umbenennen {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.mb-leiste { margin-top: var(--space-lg); }
.mb-karte-leiste { margin-top: var(--space-md); }
.mb-umbenennen { margin-top: var(--space-sm); align-items: center; }

.mb-knopf {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 10px var(--space-md);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-sm);
    background: var(--bg-glass);
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.mb-knopf:hover {
    border-color: var(--accent-primary);
    background: var(--accent-subtle);
    color: var(--text-primary);
}

.mb-knopf-haupt {
    border-color: transparent;
    background: linear-gradient(135deg, var(--accent-primary), #d97706);
    color: #fff;
}

.mb-knopf-haupt:hover {
    background: linear-gradient(135deg, var(--accent-secondary), var(--accent-primary));
    color: #fff;
}

.mb-knopf-warnung:hover {
    border-color: var(--error);
    background: rgba(239, 68, 68, 0.1);
    color: var(--error);
}

/* === Liste der gespeicherten Merkblaetter === */
.mb-karten {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}

@media (min-width: 700px) {
    .mb-karten { grid-template-columns: repeat(2, 1fr); }
}

.mb-karte {
    padding: var(--space-lg);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--bg-glass);
    transition: border-color var(--transition-fast);
}

.mb-karte:hover { border-color: var(--border-medium); }

.mb-karte-name {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.15rem;   /* eigene Groesse: style.css:566-574 setzt h1-h6 global auf clamp() */
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-primary);
    word-break: break-word;
}

.mb-karte-meta {
    margin: var(--space-xs) 0 0;
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--text-muted);
    word-break: break-word;
}

.mb-leer {
    margin: 0;
    padding: var(--space-xl) var(--space-md);
    border: 1px dashed var(--border-medium);
    border-radius: var(--radius-lg);
    font-family: var(--font-body);
    font-size: 0.9rem;
    text-align: center;
    color: var(--text-muted);
}

/* === Vorschau vor dem Speichern === */
.mb-vorschau {
    display: block;
    padding: var(--space-lg);
    border: 1px solid var(--accent-subtle);
    border-radius: var(--radius-xl);
    background: var(--bg-glass);
}

.mb-vorschau-titel {
    margin: 0 0 var(--space-md);
    font-family: var(--font-display);
    font-size: 1.25rem;   /* eigene Groesse, s.o. */
    font-weight: 700;
    color: var(--text-primary);
}

/* Durchgefallene Plausibilitaetspruefung — hier gibt es KEIN "Speichern". */
.mb-warnung {
    margin: 0 0 var(--space-md);
    padding: var(--space-md);
    border: 1px solid var(--border-medium);
    border-left: 3px solid var(--error);
    border-radius: var(--radius-md);
    background: rgba(239, 68, 68, 0.08);
    font-family: var(--font-body);
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* === Vollansicht === */
.mb-ansicht { margin-top: var(--space-md); }

/* ===================================================================
 * BEARBEITEN (Schritt 5, 12.09.2026)
 *
 * Jeder Baustein bekommt eine kleine Werkzeugleiste ueber sich; beim
 * Bearbeiten tritt an seine Stelle eine Formularkarte.
 * WARUM die Formularkarte den Baustein ERSETZT statt ueber ihm zu liegen:
 * der Kopf ist ein Farbverlauf (.mb-kopf) — Eingabefelder darauf waeren in
 * beiden Themes schlecht lesbar. Auf der neutralen Karte stimmt der Kontrast
 * ueberall.
 * =================================================================== */

.mb-block {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    min-width: 0;
}

/* Zweispalter: die Huelle ist jetzt das Kind, nicht mehr die Liste selbst. */
.mb-spalten > .mb-block { height: 100%; }
.mb-spalten > .mb-block > .mb-liste { flex: 1; }

.mb-werkzeug {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-xs);
    opacity: 0.55;
    transition: opacity var(--transition-fast);
}

.mb-block:hover > .mb-werkzeug,
.mb-werkzeug:focus-within { opacity: 1; }

/* Auf dem Handy gibt es kein Zeigen — dort bleibt die Leiste immer sichtbar.
   Und sie muss mit dem Daumen treffbar sein: gemessen am 13.09. waren die
   Knoepfe 24 px hoch (Empfehlung: 44) und brauchten bei 390 px zwei Zeilen.
   Die beiden Pfeile tragen dort nur ihr Symbol — damit passen alle vier
   Knoepfe mit 44 px Hoehe in EINE Zeile (gemessen: 44/44/105/88 bei 390 px). */
@media (hover: none) {
    .mb-werkzeug { opacity: 1; }

    .mb-mini {
        min-height: 44px;
        padding: 5px 12px;
    }

    .mb-mini-pfeil {
        min-width: 44px;
        padding-left: 0;
        padding-right: 0;
        gap: 0;
        justify-content: center;
    }

    /* Beschriftung bleibt fuer Vorleseprogramme da, nur unsichtbar. */
    .mb-mini-pfeil > span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    /* „Loeschen" sitzt neben „Bearbeiten" — etwas Abstand gegen den Fehlgriff. */
    .mb-mini-warnung { margin-left: var(--space-sm); }
}

.mb-mini {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 5px 10px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--bg-glass);
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.mb-mini:hover:not(:disabled) {
    border-color: var(--accent-primary);
    background: var(--accent-subtle);
    color: var(--text-primary);
}

.mb-mini:disabled {
    opacity: 0.35;
    cursor: default;
}

.mb-mini-warnung:hover:not(:disabled) {
    border-color: var(--error);
    background: rgba(239, 68, 68, 0.1);
}

.mb-leerhinweis {
    margin: 0;
    padding: var(--space-md);
    border: 1px dashed var(--border-medium);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* === Formularkarte === */
.mb-form {
    padding: var(--space-lg);
    border: 1px solid var(--accent-subtle);
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
    box-shadow: var(--shadow-md);
}

.mb-form-titel {
    margin: 0 0 var(--space-md);
    font-family: var(--font-display);
    font-size: 1.1rem;   /* eigene Groesse: style.css:566-574 setzt h1-h6 global */
    font-weight: 700;
    color: var(--text-primary);
}

.mb-form-zeile {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
}

.mb-label {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.mb-form-hinweis {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--text-muted);
}

/* Solider Grund statt Glas: auf der Karte waere ein 3-%-Weiss unsichtbar. */
.mb-form .mb-feld,
.mb-form .mb-textfeld {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Die grosse Schreibflaeche aus dem Text-Upload passt fuer einen Absatz nicht. */
.mb-form .mb-textfeld { min-height: 96px; }

.mb-form-leiste {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

/* === Tabelle bearbeiten === */
.mb-edit-tabelle {
    width: 100%;
    border-collapse: separate;
    border-spacing: var(--space-xs);
    font-family: var(--font-body);
}

.mb-edit-tabelle th,
.mb-edit-tabelle td {
    padding: 0;
    vertical-align: top;
}

.mb-edit-tabelle th { min-width: 120px; }
.mb-edit-tabelle .mb-edit-aktion { width: 1%; white-space: nowrap; }

.mb-spaltenfeld {
    width: 100%;
    font-weight: 600;
}

.mb-zellenfeld {
    width: 100%;
    min-width: 120px;
    padding: var(--space-sm);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-sm);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.9rem;
    line-height: 1.5;
    resize: vertical;
    box-sizing: border-box;
}

.mb-zellenfeld:focus,
.mb-spaltenfeld:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-subtle);
}

/* === Sicherheitsfrage vor dem Loeschen === */
.mb-loeschfrage {
    padding: var(--space-md);
    border: 1px solid var(--border-medium);
    border-left: 3px solid var(--error);
    border-radius: var(--radius-md);
    background: rgba(239, 68, 68, 0.06);
}

.mb-loeschfrage-text {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--text-primary);
}

.mb-loeschfrage .mb-form-leiste { margin-top: var(--space-sm); }

/* === Hinweis über dem Einfügefeld (Schritt 6, 12.09.2026) ===
   WARUM eigener, ruhiger Stil statt .mb-warnung: das ist ein Ratschlag, kein
   Fehler — der rote Kasten ist der Längenprüfung vorbehalten. */
.mb-text-tipp {
    margin: 0;
    padding: var(--space-sm) var(--space-md);
    border-left: 3px solid var(--accent-subtle);
    border-radius: var(--radius-sm);
    background: var(--bg-glass);
    font-family: var(--font-body);
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.mb-text-tipp strong { color: var(--text-primary); font-weight: 600; }

/* Die Längenprüfung nutzt .mb-warnung, braucht darin aber keinen Abstand nach
   unten — im Kasten sorgt das Flex-`gap` dafür. */
.mb-text-box .mb-warnung { margin: 0; }

/* ===================================================================
 * SUCHE UEBER ALLE MERKBLAETTER (Schritt 6, 13.09.2026)
 *
 * Wie oben gilt: jede Regel haengt an einer eigenen .mb--Klasse und bringt
 * ihre eigene font-size mit (style.css:566-574 setzt h1-h6 global auf clamp()).
 * Die Markierungsfarbe wird je Theme gesetzt, weil --accent-tertiary im
 * Hell-Theme NICHT ueberschrieben wird und dort unlesbar waere.
 * =================================================================== */

.mb-bereich {
    --mb-mark-bg: rgba(245, 158, 11, 0.35);
    --mb-mark-fg: #ffffff;
}

[data-theme="light"] .mb-bereich {
    --mb-mark-bg: #fde68a;
    --mb-mark-fg: #78350f;
}

.mb-suche {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
}

.mb-suche-zeile {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 4px var(--space-md);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    background: var(--bg-glass);
    transition: border-color var(--transition-fast);
}

.mb-suche-zeile:focus-within {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-subtle);
}

.mb-suche-lupe {
    flex: 0 0 auto;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.mb-suche-feld {
    flex: 1 1 auto;
    min-width: 0;                 /* sonst sprengt das Feld die Karte auf 390 px */
    padding: 10px 0;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 1rem;              /* >= 16px: darunter zoomt iOS beim Antippen hinein */
    line-height: 1.4;
}

.mb-suche-feld:focus { outline: none; }

/* Das eigene X reicht — Chromes eingebautes staende sonst daneben. */
.mb-suche-feld::-webkit-search-cancel-button,
.mb-suche-feld::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

.mb-suche-weg {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;                 /* Fingerziel, auch auf dem Handy */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--text-muted);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.mb-suche-weg:hover { background: var(--bg-glass-hover); color: var(--text-primary); }

.mb-suche-zahl {
    margin: 0 0 0 2px;
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--text-muted);
}

.mb-suche-leer {
    margin: 0;
    padding: var(--space-xl) var(--space-md);
    border: 1px dashed var(--border-medium);
    border-radius: var(--radius-lg);
    font-family: var(--font-body);
    font-size: 0.9rem;
    line-height: 1.6;
    text-align: center;
    color: var(--text-secondary);
    word-break: break-word;
}

.mb-suche-leer strong { color: var(--text-primary); }

/* === Treffer auf der Karte === */
.mb-tref {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

.mb-tref-kopf {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--mb-titel, var(--accent-primary));
}

.mb-tref-stelle {
    display: block;
    width: 100%;
    margin: 0;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--bg-glass);
    color: var(--text-secondary);
    font-family: var(--font-body);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.mb-tref-stelle:hover { border-color: var(--accent-primary); background: var(--accent-subtle); }

.mb-tref-stelle:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.mb-tref-ort {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.mb-tref-text {
    margin: 2px 0 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-secondary);
    overflow-wrap: anywhere;      /* lange Tabellenzellen duerfen nicht ueberstehen */
}

.mb-tref-rest {
    margin: 0 0 0 2px;
    font-family: var(--font-body);
    font-size: 0.78rem;
    color: var(--text-muted);
}

.mb-mark {
    padding: 0 2px;
    border-radius: 3px;
    background: var(--mb-mark-bg);
    color: var(--mb-mark-fg);
    font-weight: 600;
}

/* === Angesprungener Baustein: zwei Sekunden umrandet === */
/* Angesprungene Tabellenzelle der Zubereitung-Seite (13.09.2026). Eigene
   Regel, weil `.mb-blitz` bewusst auf `.mb-block` begrenzt ist und eine
   Tabellenzelle kein Baustein ist. */
.mb-zellblitz {
    outline: 2px solid var(--accent-primary);
    outline-offset: -2px;
    background: var(--accent-subtle) !important;
    transition: outline-color var(--transition-base), background var(--transition-base);
}

/* Trefferkarte einer Tabelle — sichtbar anders als ein Merkblatt, damit in der
   Trefferliste klar ist, was man gleich oeffnet. */
.mb-karte-tabelle {
    border-left: 3px solid var(--accent-primary);
}

.mb-block.mb-blitz,
.mb-block-kopf.mb-blitz {
    outline: 2px solid var(--accent-primary);
    outline-offset: 4px;
    border-radius: var(--radius-md);
    background: var(--accent-subtle);
    transition: outline-color var(--transition-base), background var(--transition-base);
}