/* Bausteine des Redaktionssystems (Info-Box …). Gemeinsam fuer Webseite, Editor-Inhalt und Vorschau in der Redaktion. */

/* Info-Box (ersetzt Kadence Infobox): Farbe und Bildbreite als CSS-Variablen im style-Attribut,
   damit die Redaktion sie im Editor ändern kann. Aussehen wie die bisherigen Kadence-Boxen. */
.see-infobox {
    --see-box-bg: #e9f7fd;
    --see-box-media: 175px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 1.5em 0;
    padding: 1.5rem;
    border-radius: 5px;
    background: var(--see-box-bg);
}
.see-infobox--media-left { flex-direction: row; align-items: flex-start; }
.see-infobox--media-right { flex-direction: row-reverse; align-items: flex-start; }
.see-infobox--center { text-align: center; align-items: center; }
.see-infobox-media { flex: 0 0 auto; width: var(--see-box-media); max-width: 100%; }
.see-infobox-media img { display: block; width: 100%; height: auto; border-radius: 5px; }
.see-infobox-icon { width: auto; font-size: 50px; line-height: 0; }
.see-infobox-icon svg { width: 50px; height: 50px; }
.see-infobox-body { flex: 1 1 auto; min-width: 0; }
.see-infobox-body > :first-child { margin-top: 0; }
.see-infobox-body > :last-child { margin-bottom: 0; }
.see-infobox-title { margin: 5px 0 10px; }
@media (max-width: 600px) {
    .see-infobox--media-left, .see-infobox--media-right { flex-direction: column; }
}