/*
 * "sr-Bild" (Block + Widget, siehe inc/bild-block.php) – Rahmenstil
 * "Passepartout": gleichmäßiger Rahmen, Bildtext klein im Rahmen unter dem
 * Bild. Eigene Datei statt style.css, weil sie zusätzlich im Block-Editor
 * geladen wird – die Vorschau dort entspricht dadurch genau der Website.
 *
 * Farbe und Außenabstände kommen je Bild als CSS-Variablen vom Server
 * (--sr-bild-rahmenfarbe, --sr-bild-abstand-v, --sr-bild-abstand-h).
 * "figure.sr-bild" statt nur ".sr-bild": Die allgemeine Abstandsregel
 * ".entry-content > * + *" (style.css) ist gleich spezifisch und würde
 * sonst den eingestellten Außenabstand oben überschreiben.
 */

figure.sr-bild {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 100%;
    margin: var(--sr-bild-abstand-v, 16px) 0;
    padding: 10px;
    background: var(--sr-bild-rahmenfarbe, #ffffff);
    /* Durchsichtiger Rand bei allen Farben: im Schwarz-Weiß-Modus wird er (wie jeder Rand) schwarz und zeigt den Rahmen weiterhin an. */
    border: 1px solid transparent;
    border-radius: 8px;
}

/* Weißer Rahmen auf weißer Seite: feine graue Kante, sonst wäre er unsichtbar. */
figure.sr-bild-farbe-weiss {
    border-color: #e4e1da;
}

/* Ausschnitt: Seitenverhältnis kommt je Bild als "aspect-ratio" vom Server. */
.sr-bild-ausschnitt {
    width: 100%;
    overflow: hidden;
    border-radius: 3px;
}

.sr-bild-ausschnitt .sr-bild-img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

.sr-bild-text {
    margin: 0;
    padding: 0 2px 2px;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--sr-bild-textfarbe, var(--sr-text, #333333)); /* kontrastsicher zur Rahmenfarbe, siehe sr_schule_bild_textfarbe() */
}

/* Bildtext-Größe "Klein" (eine Stufe kleiner, 12px) – kleiner nicht, sonst schwer lesbar. */
figure.sr-bild-text-klein .sr-bild-text {
    font-size: 0.75rem;
}

/* Links im Bildtext in Schriftfarbe statt Linkfarbe – die Linkfarbe ist nur gegen Weiß kontrastgeprüft, nicht gegen die farbigen Rahmen. */
.sr-bild-text a {
    color: inherit;
    text-decoration: underline;
}

/* ---- Breite und Bündigkeit ---- */

figure.sr-bild-breite-1-1 { width: 100%; }
figure.sr-bild-breite-1-2 { width: 50%; }
figure.sr-bild-breite-1-4 {
    width: 25%;
    min-width: min(100%, 140px); /* in schmalen Spalten (z. B. Seitenleiste) nicht winzig werden */
}

/*
 * Ein Bild OHNE Umfließen steht für sich: Reicht ein vorangehendes,
 * umflossenes Bild noch bis hierher, beginnt es erst darunter – sonst würde
 * es seitlich ausweichen und z. B. nicht mehr mittig stehen.
 */
figure.sr-bild:not(.sr-bild-umfliessen) { clear: both; }

figure.sr-bild-links     { margin-right: auto; }
figure.sr-bild-zentriert { margin-left: auto; margin-right: auto; }
figure.sr-bild-rechts    { margin-left: auto; }

/*
 * Umfließen: Das Bild schwebt an den Rand, Text und andere Blöcke laufen
 * daneben weiter. Der seitliche Außenabstand gilt nur zur Textseite hin –
 * außen bleibt das Bild bündig mit der Inhaltsspalte.
 */
figure.sr-bild-umfliessen.sr-bild-links {
    float: left;
    margin-left: 0;
    margin-right: var(--sr-bild-abstand-h, 16px);
}

figure.sr-bild-umfliessen.sr-bild-rechts {
    float: right;
    margin-right: 0;
    margin-left: var(--sr-bild-abstand-h, 16px);
}

/*
 * Nur im Block-Editor: Der Editor stellt Text in einer mittigen Spalte von
 * höchstens 840px dar (WordPress-Vorgabe für klassische Themes, siehe
 * ":where(.wp-block) { max-width: 840px }"). Breite und Bündigkeit des
 * Bildes beziehen sich hier deshalb auf GENAU diese Spalte statt auf die
 * ganze Editor-Fläche – der äußere Rahmenrand steht damit schon im Editor
 * bündig mit dem Textrand, 1/2 ist die halbe Textbreite usw., wie später
 * auf der Website.
 *   --sr-bild-spalte: Breite der Textspalte (in schmalen Bereichen wie
 *                     Spalten-Blöcken einfach deren volle Breite)
 *   --sr-bild-rand:   Abstand der Textspalte zum Rand der Editor-Fläche
 * Prozentwerte darin beziehen sich (wie bei "width"/"margin" üblich) auf
 * die Breite des umgebenden Bereichs.
 */
.editor-styles-wrapper figure.sr-bild {
    --sr-bild-spalte: min(100%, 840px);
    --sr-bild-rand: max(0px, (100% - 840px) / 2);
    max-width: var(--sr-bild-spalte);
}

.editor-styles-wrapper figure.sr-bild-breite-1-1 { width: var(--sr-bild-spalte); }
.editor-styles-wrapper figure.sr-bild-breite-1-2 { width: calc(var(--sr-bild-spalte) / 2); }
.editor-styles-wrapper figure.sr-bild-breite-1-4 { width: calc(var(--sr-bild-spalte) / 4); }

.editor-styles-wrapper figure.sr-bild-links {
    margin-left: var(--sr-bild-rand);
    margin-right: auto;
}

.editor-styles-wrapper figure.sr-bild-rechts {
    margin-left: auto;
    margin-right: var(--sr-bild-rand);
}

.editor-styles-wrapper figure.sr-bild-umfliessen.sr-bild-links {
    margin-left: var(--sr-bild-rand);
    margin-right: var(--sr-bild-abstand-h, 16px);
}

.editor-styles-wrapper figure.sr-bild-umfliessen.sr-bild-rechts {
    margin-left: var(--sr-bild-abstand-h, 16px);
    margin-right: var(--sr-bild-rand);
}

/*
 * Nur im Block-Editor: Dort ist jeder Block eine eigene, positionierte
 * Ebene – die folgenden Absätze lägen sonst über dem umflossenen Bild, und
 * Bildtext/Ziehen im Bild ließen sich an diesen Stellen nicht anklicken.
 */
.editor-styles-wrapper figure.sr-bild-umfliessen {
    position: relative;
    z-index: 1;
}

/*
 * Ein umflossenes Bild am Ende des Inhalts oder eines Widgets darf nicht
 * über dessen unteren Rand hinausragen – "flow-root" lässt den Behälter
 * das schwebende Bild mit umschließen.
 */
.entry-content,
.widget {
    display: flow-root;
}

/*
 * Smartphone: 1/2 in voller Breite und ohne Umfließen (daneben blieben nur
 * wenige Wörter pro Zeile), 1/4 wird zu 1/2 und darf weiter umflossen werden.
 */
@media (max-width: 599px) {
    figure.sr-bild.sr-bild-breite-1-2 {
        width: 100%;
        float: none;
        margin-left: 0;
        margin-right: 0;
    }

    figure.sr-bild.sr-bild-breite-1-4 {
        width: 50%;
    }
}

/* ---- Bilderreihe (Block "sr-Bilderreihe") ---- */

/*
 * Mehrere sr-Bilder nebeneinander: zwei 1/2, vier 1/4 oder gemischt. Die
 * Breiten werden mit dem Abstand zwischen den Bildern verrechnet, damit
 * z. B. zwei Hälften plus Abstand genau die volle Breite ergeben. Nur oben/
 * unten ein Außenabstand – links/rechts bleibt der Rand frei, damit die
 * Reihe im Editor (mittige Textspalte) wie auf der Website bündig mit dem
 * Text steht. Die Regeln für Bilder IN der Reihe sind bewusst etwas
 * spezifischer (".sr-bilderreihe > figure.sr-bild…") als alle anderen
 * Bildregeln dieser Datei, auch als die Editor- und Smartphone-Regeln.
 */
.sr-bilderreihe {
    --sr-reihe-abstand: 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--sr-reihe-abstand);
    margin-top: var(--sr-reihe-abstand-v, 16px);
    margin-bottom: var(--sr-reihe-abstand-v, 16px);
    clear: both;
}

.sr-bilderreihe-zentriert { justify-content: center; }
.sr-bilderreihe-rechts    { justify-content: flex-end; }

.sr-bilderreihe > figure.sr-bild.sr-bild {
    margin: 0;
    float: none;
    min-width: 0;
    max-width: 100%;
}

.sr-bilderreihe > figure.sr-bild.sr-bild-breite-1-1 { width: 100%; }
.sr-bilderreihe > figure.sr-bild.sr-bild-breite-1-2 { width: calc((100% - var(--sr-reihe-abstand)) / 2); }
.sr-bilderreihe > figure.sr-bild.sr-bild-breite-1-4 { width: calc((100% - 3 * var(--sr-reihe-abstand)) / 4); }

/* Smartphone: 1/2 bleibt nebeneinander (wie eine kleine Galerie), 1/4 wird zu zwei pro Zeile. */
@media (max-width: 599px) {
    .sr-bilderreihe > figure.sr-bild.sr-bild-breite-1-2,
    .sr-bilderreihe > figure.sr-bild.sr-bild-breite-1-4 {
        width: calc((100% - var(--sr-reihe-abstand)) / 2);
    }
}

/* Im Editor nimmt die Reihe die volle Textspalte ein (wie jeder andere Block dort). */
.editor-styles-wrapper .sr-bilderreihe {
    max-width: 840px;
    margin-left: auto;
    margin-right: auto;
}

/* Editor: "+"-Knopf zum Hinzufügen eines Bildes in eigener Zeile unter der Reihe, statt über der Ecke des letzten Bildes. */
.editor-styles-wrapper .sr-bilderreihe > .block-list-appender {
    position: static;
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 0;
}

/* ---- Großansicht beim Anklicken (js/bild-grossansicht.js) ---- */

.sr-bild-gross-link {
    display: block;
    width: 100%;
    height: 100%;
    cursor: zoom-in;
}

.sr-bild-gross-link:focus-visible {
    outline: 3px solid var(--sr-fokus-stark, #333333);
    outline-offset: -3px;
}

.sr-bild-dialog {
    padding: 0;
    border: 0;
    background: transparent;
    max-width: none;
    max-height: none;
    overflow: visible;
}

.sr-bild-dialog::backdrop {
    background: rgba(0, 0, 0, 0.78);
}

.sr-bild-dialog figure.sr-bild {
    position: relative;
    width: auto;
    margin: 0;
    float: none;
}

.sr-bild-dialog .sr-bild-gross-img {
    display: block;
    border-radius: 3px;
    /* Breite/Höhe setzt das Skript passend zum Bildschirm, nie größer als das Original. */
}

/* Bildtext so breit wie das Bild, damit er darunter umbricht statt den Rahmen zu verbreitern. */
.sr-bild-dialog .sr-bild-text {
    max-width: var(--sr-bild-gross-breite, 100%);
}

.sr-bild-schliessen {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid #333333;
    background: #ffffff;
    color: #333333;
    font: inherit;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.sr-bild-schliessen:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
}

/* ---- Schwarz-Weiß-Modus ---- */

/* Die Großansicht liegt auf dunklem Grund – ohne eigenen weißen Hintergrund wäre der schwarze Bildtext darauf unlesbar. */
html.sr-schwarzweiss .sr-bild-dialog figure.sr-bild,
html.sr-schwarzweiss .sr-bild-schliessen {
    background-color: #ffffff !important;
}