/* ==========================================================
   Infobox
   ========================================================== */

.infobox {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
    gap: 0.25rem 0.9rem;

    margin-block: 2rem;
    padding: 1.1rem 1.35rem;
    border: 1px solid var(--border);
    border-inline-start: 4px solid var(--infobox-accent, var(--brand));
    border-radius: var(--radius);

    background: var(--infobox-bg, var(--surface-muted));
}


/* ── Icon: linke Spalte, beide Zeilen ────── */

.infobox::before {
    content: var(--infobox-icon, "\F431");
    grid-column: 1;
    grid-row: 1 / 3;

    font-family: "bootstrap-icons";
    font-size: 1.3rem;
    line-height: 1.3;
    color: var(--infobox-accent, var(--brand));
}


/* ── Titel: rechte Spalte, Zeile 1 ───────── */

.infobox__titel {
    grid-column: 2;
    grid-row: 1;

    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--infobox-accent, var(--brand));
}


/* ── Text: rechte Spalte, Zeile 2 ────────── */

.infobox__text {
    grid-column: 2;
    grid-row: 2;

    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.6;
}

.infobox__text > :first-child { margin-block-start: 0; }
.infobox__text > :last-child  { margin-block-end: 0; }

.infobox__text a {
    color: var(--infobox-accent, var(--brand));
}

/* Ohne Titel: Text über beide Zeilen, vertikal mittig */
.infobox:not(:has(.infobox__titel)) .infobox__text {
    grid-row: 1 / 3;
    align-self: center;
}


/* ==========================================================
   Varianten
   ========================================================== */

.infobox--info {
    --infobox-icon: "\F431";    /* info-circle */
    --infobox-accent: var(--brand);
}

.infobox--tipp {
    --infobox-icon: "\F467";    /* lightbulb */
    --infobox-accent: #2e7d32;
    --infobox-bg: #f1f7f1;
}

.infobox--warnung {
    --infobox-icon: "\F33A";    /* exclamation-triangle */
    --infobox-accent: #b45309;
    --infobox-bg: #fdf6ec;
}


/* ── Editor ──────────────────────────────── */

.infobox .block-editor-rich-text__editable:focus {
    outline: none;
}


/* ── Mobil ───────────────────────────────── */

@media (width <= 420px) {
    .infobox {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        padding: 1rem 1.1rem;
    }

    .infobox::before {
        grid-column: 1;
        grid-row: 1;
        font-size: 1.15rem;
    }

    .infobox__titel {
        grid-column: 1;
        grid-row: 2;
    }

    .infobox__text {
        grid-column: 1;
        grid-row: 3;
    }

    .infobox:not(:has(.infobox__titel)) .infobox__text {
        grid-row: 2;
        align-self: start;
    }
}


/* ── Druck ───────────────────────────────── */

@media print {
    .infobox {
        background: none;
        border-color: #999;
        border-inline-start-color: #333;
        break-inside: avoid;
    }
}