/* ============================================================
   Bloggerei Magazin – Info-/Callout-Boxen für Artikel
   ============================================================

   Zwei Varianten, beide im Marken-Farbstil aus dem Logo
   (Rot #f4003e -> Lila #9c2c76 -> Petrol #357a97):

     1. "Info-Box hell"     – heller Hintergrund, kräftiger Rand links
     2. "Info-Box gefüllt"  – voller Marken-Verlauf, weißer Text

   VERWENDUNG IM BEITRAG
   ---------------------
   Im Editor eine "Gruppe" einfügen, Inhalt hineinschreiben, dann rechts
   in der Seitenleiste unter "Stile" die gewünschte Box-Variante wählen.
   Alternativ lässt sich einem beliebigen Block unter "Erweitert" die
   CSS-Klasse  bmag-info  bzw.  bmag-fill  von Hand geben.

   HINWEIS ZUM AUFBAU
   ------------------
   Die Regeln hängen bewusst NICHT am .bmag-Wrapper, sondern nur an den
   Box-Klassen selbst. Dadurch funktioniert dieselbe Datei auch im
   Gutenberg-Editor, wo es den .bmag-Wrapper nicht gibt – die Box sieht
   beim Schreiben also schon so aus wie später auf der Seite.
   ============================================================ */

/* Eigene Farb-Variablen, damit die Boxen unabhängig von magazin-v4.css
   funktionieren (im Editor sind die dortigen Tokens nicht vorhanden). */
.bmag-info, .is-style-bmag-info,
.bmag-fill, .is-style-bmag-fill {
    --bx-brand:#f4003e;
    --bx-lila:#9c2c76;
    --bx-petrol:#357a97;
    --bx-grad:linear-gradient(135deg,#f4003e 0%,#9c2c76 52%,#357a97 100%);
    --bx-ink:#26292b;
    --bx-body:#5c6266;
}


/* ============================================================
   Variante 1 – "Info-Box hell"
   ============================================================ */

.bmag-info, .is-style-bmag-info {
    position:relative;
    background:#fdf5f7;
    border-left:6px solid var(--bx-brand);
    border-radius:0 12px 12px 0;
    padding:1.5em 1.7em;
    margin:1.9em 0;
    color:var(--bx-body);
}

/* Der farbige Rand nimmt den kompletten Marken-Verlauf auf */
.bmag-info:before, .is-style-bmag-info:before {
    content:"";
    position:absolute;
    left:-6px; top:0; bottom:0;
    width:6px;
    background:var(--bx-grad);
    border-radius:3px 0 0 3px;
}

.bmag-info > *:first-child, .is-style-bmag-info > *:first-child { margin-top:0; }
.bmag-info > *:last-child,  .is-style-bmag-info > *:last-child  { margin-bottom:0; }

/* Überschrift der Box. Neben echten Überschriften auch .bmag-box-title auf einem
   <p> – so bleibt die H2/H3-Gliederung des Artikels (und damit das
   Inhaltsverzeichnis) unberührt. */
.bmag-info h2, .bmag-info h3, .bmag-info h4, .bmag-info h5, .bmag-info .bmag-box-title,
.is-style-bmag-info h2, .is-style-bmag-info h3, .is-style-bmag-info h4, .is-style-bmag-info h5,
.is-style-bmag-info .bmag-box-title {
    color:var(--bx-brand);
    font-size:1.45em;
    font-weight:800;
    line-height:1.25;
    letter-spacing:-.01em;
    margin:0 0 .6em;
}


/* ============================================================
   Variante 2 – "Info-Box gefüllt"
   ============================================================ */

.bmag-fill, .is-style-bmag-fill {
    background:var(--bx-grad);
    color:#fff;
    border-radius:16px;
    padding:1.7em 1.9em;
    margin:1.9em 0;
    box-shadow:0 12px 30px rgba(156,44,118,.24);
}

.bmag-fill > *:first-child, .is-style-bmag-fill > *:first-child { margin-top:0; }
.bmag-fill > *:last-child,  .is-style-bmag-fill > *:last-child  { margin-bottom:0; }

/* Doppelte Klasse = höhere Spezifität, damit die weiße Schrift die
   allgemeinen Artikel-Regeln aus magazin-v4.css sicher übersteuert. */
.bmag-fill.bmag-fill, .is-style-bmag-fill.is-style-bmag-fill,
.bmag-fill.bmag-fill p, .is-style-bmag-fill.is-style-bmag-fill p,
.bmag-fill.bmag-fill li, .is-style-bmag-fill.is-style-bmag-fill li,
.bmag-fill.bmag-fill strong, .is-style-bmag-fill.is-style-bmag-fill strong,
.bmag-fill.bmag-fill b, .is-style-bmag-fill.is-style-bmag-fill b {
    color:#fff;
}

.bmag-fill.bmag-fill h2, .bmag-fill.bmag-fill h3,
.bmag-fill.bmag-fill h4, .bmag-fill.bmag-fill h5, .bmag-fill.bmag-fill .bmag-box-title,
.is-style-bmag-fill.is-style-bmag-fill h2, .is-style-bmag-fill.is-style-bmag-fill h3,
.is-style-bmag-fill.is-style-bmag-fill h4, .is-style-bmag-fill.is-style-bmag-fill h5,
.is-style-bmag-fill.is-style-bmag-fill .bmag-box-title {
    color:#fff;
    font-size:1.45em;
    font-weight:800;
    line-height:1.25;
    letter-spacing:-.01em;
    margin:0 0 .6em;
}

.bmag-fill.bmag-fill a, .is-style-bmag-fill.is-style-bmag-fill a {
    color:#fff;
    text-decoration:underline;
    text-underline-offset:2px;
}
.bmag-fill.bmag-fill a:hover, .is-style-bmag-fill.is-style-bmag-fill a:hover { opacity:.8; }


/* ============================================================
   Listen in beiden Varianten – Marken-Punkte statt Standard-Aufzählung
   ============================================================ */

/* Doppelte Klasse = höhere Spezifität. Nötig, weil die allgemeine Regel
   ".bmag .art-body ul" aus magazin-v4.css sonst gewinnt und die Aufzählung
   zusätzlich einrücken würde – die Punkte säßen dann nicht bündig. */
.bmag-info.bmag-info ul, .is-style-bmag-info.is-style-bmag-info ul,
.bmag-fill.bmag-fill ul, .is-style-bmag-fill.is-style-bmag-fill ul {
    list-style:none;
    padding-left:0;
    margin:0 0 1em;
}

.bmag-info.bmag-info li, .is-style-bmag-info.is-style-bmag-info li,
.bmag-fill.bmag-fill li, .is-style-bmag-fill.is-style-bmag-fill li {
    position:relative;
    padding-left:1.6em;
    margin:.55em 0;
}

.bmag-info li:before, .is-style-bmag-info li:before {
    content:"";
    position:absolute;
    left:.15em; top:.62em;
    width:.5em; height:.5em;
    border-radius:50%;
    background:var(--bx-grad);
}

.bmag-fill li:before, .is-style-bmag-fill li:before {
    content:"";
    position:absolute;
    left:.15em; top:.62em;
    width:.5em; height:.5em;
    border-radius:50%;
    background:rgba(255,255,255,.92);
}


/* ============================================================
   Kleine Bildschirme
   ============================================================ */

@media (max-width:600px) {
    .bmag-info, .is-style-bmag-info { padding:1.2em 1.3em; border-radius:0 10px 10px 0; }
    .bmag-fill, .is-style-bmag-fill { padding:1.3em 1.4em; border-radius:12px; }
}