/* fin-law: Bild im Text — gilt auf der Website UND in der Leinwand des Editors.
   Dieselben Regeln an beiden Orten, damit das Bild im Editor genau so steht wie live.

   Website (klassisches Theme):  <div class="wp-block-image"><figure class="alignright fl-tiefer-3">
   Leinwand des Editors:         <div class="wp-block" data-align="right"><figure class="wp-block-image fl-tiefer-3"> */

/* eine Zeile Fließtext: 16px × 1,4 (style.css, .entry-content__container p) */
:root { --fl-zeile: 22.4px; }

/* Überschriften laufen nie neben einem Bild, sie beginnen darunter */
:is(.entry-content__container, .editor-styles-wrapper.post-type-post) h2 { clear: both; }

/* Bild neben dem Text */
.entry-content__container figure.alignright,
.entry-content__container figure.alignleft {
  display: block;                 /* Kern: table — max-width greift dann nicht verlässlich */
  width: fit-content;             /* so breit wie das Bild … */
  max-width: 100%;
}
/* … und Unterschrift/Hinweis machen es nicht breiter, sie brechen um.
   🔴 Nicht width: min-content am <figure>: ein Bild mit max-width in % trägt dazu 0 bei,
   das Bild fällt auf 0 px zusammen (so gemessen in Chrome). */
.entry-content__container :is(figure.alignright, figure.alignleft) > :is(figcaption, .fl-zoom__hinweis) { display: block; contain: inline-size; }
.entry-content__container :is(figure.alignright, figure.alignleft) img { display: block; max-width: 100%; height: auto; }
/* ohne gesetzte Breite: 320 px wie in der abgestimmten Variante */
.entry-content__container :is(figure.alignright, figure.alignleft):not(.is-resized) img { width: 320px; }

/* Website und Leinwand als GETRENNTE Regeln: in einem gemeinsamen :is() zählt die
   stärkste Variante, und die Handy-Regel unten käme nicht mehr durch. */
.entry-content__container figure.alignright { float: right; margin: 5px 0 8px 24px; }
.entry-content__container figure.alignleft  { float: left;  margin: 5px 24px 8px 0; }
.editor-styles-wrapper [data-align="right"] > figure.wp-block-image { float: right; margin: 5px 0 8px 24px; }
.editor-styles-wrapper [data-align="left"]  > figure.wp-block-image { float: left;  margin: 5px 24px 8px 0; }

/* Höhe: fl-tiefer-N = das Bild beginnt N Zeilen unter dem Anfang des Absatzes.
   Vor dem Bild steht ein unsichtbarer „Schieber": ein float derselben Seite, 0 px breit,
   N Zeilen hoch. Neben ihm läuft der Text in voller Breite, das Bild setzt mit clear
   darunter an. Der Schieber ist das ::before des Rahmens um das Bild — auf der Website
   <div class="wp-block-image fl-tiefer-N">, im Editor <div data-align> (dort trägt erst
   das <figure> die Klasse, daher :has()).
   +2px Schieber / 3px statt 5px Rand: Absatz und Bild stehen um Bruchteile eines Pixels
   versetzt (22,4 px je Zeile); ohne die Luft streifte das Bild die letzte freie Zeile.
   🔴 Nicht shape-outside: inset(): Safari setzt die Umfluss-Fläche an den oberen Rand
   statt an das Bild — der Text lief dort über der Lücke schmal und UNTER dem Bild breit. */
.entry-content__container div.wp-block-image[class*="fl-tiefer-"]::before,
.editor-styles-wrapper [data-align]:has(> figure[class*="fl-tiefer-"])::before {
  content: "";
  float: right;
  width: 0;
  height: calc(var(--fl-tiefer, 0) * var(--fl-zeile) + 2px);
}
.entry-content__container div.wp-block-image[class*="fl-tiefer-"]:has(> figure.alignleft)::before,
.editor-styles-wrapper [data-align="left"]:has(> figure[class*="fl-tiefer-"])::before { float: left; }
.entry-content__container div.wp-block-image[class*="fl-tiefer-"] > figure.alignright,
.editor-styles-wrapper [data-align="right"] > figure.wp-block-image[class*="fl-tiefer-"] { clear: right; margin-top: 3px; }
.entry-content__container div.wp-block-image[class*="fl-tiefer-"] > figure.alignleft,
.editor-styles-wrapper [data-align="left"] > figure.wp-block-image[class*="fl-tiefer-"] { clear: left; margin-top: 3px; }

.fl-tiefer-1,[data-align]:has(>.fl-tiefer-1){--fl-tiefer:1} .fl-tiefer-2,[data-align]:has(>.fl-tiefer-2){--fl-tiefer:2} .fl-tiefer-3,[data-align]:has(>.fl-tiefer-3){--fl-tiefer:3} .fl-tiefer-4,[data-align]:has(>.fl-tiefer-4){--fl-tiefer:4} .fl-tiefer-5,[data-align]:has(>.fl-tiefer-5){--fl-tiefer:5}
.fl-tiefer-6,[data-align]:has(>.fl-tiefer-6){--fl-tiefer:6} .fl-tiefer-7,[data-align]:has(>.fl-tiefer-7){--fl-tiefer:7} .fl-tiefer-8,[data-align]:has(>.fl-tiefer-8){--fl-tiefer:8} .fl-tiefer-9,[data-align]:has(>.fl-tiefer-9){--fl-tiefer:9} .fl-tiefer-10,[data-align]:has(>.fl-tiefer-10){--fl-tiefer:10}
.fl-tiefer-11,[data-align]:has(>.fl-tiefer-11){--fl-tiefer:11} .fl-tiefer-12,[data-align]:has(>.fl-tiefer-12){--fl-tiefer:12} .fl-tiefer-13,[data-align]:has(>.fl-tiefer-13){--fl-tiefer:13} .fl-tiefer-14,[data-align]:has(>.fl-tiefer-14){--fl-tiefer:14} .fl-tiefer-15,[data-align]:has(>.fl-tiefer-15){--fl-tiefer:15}
.fl-tiefer-16,[data-align]:has(>.fl-tiefer-16){--fl-tiefer:16} .fl-tiefer-17,[data-align]:has(>.fl-tiefer-17){--fl-tiefer:17} .fl-tiefer-18,[data-align]:has(>.fl-tiefer-18){--fl-tiefer:18} .fl-tiefer-19,[data-align]:has(>.fl-tiefer-19){--fl-tiefer:19} .fl-tiefer-20,[data-align]:has(>.fl-tiefer-20){--fl-tiefer:20}
.fl-tiefer-21,[data-align]:has(>.fl-tiefer-21){--fl-tiefer:21} .fl-tiefer-22,[data-align]:has(>.fl-tiefer-22){--fl-tiefer:22} .fl-tiefer-23,[data-align]:has(>.fl-tiefer-23){--fl-tiefer:23} .fl-tiefer-24,[data-align]:has(>.fl-tiefer-24){--fl-tiefer:24} .fl-tiefer-25,[data-align]:has(>.fl-tiefer-25){--fl-tiefer:25}
.fl-tiefer-26,[data-align]:has(>.fl-tiefer-26){--fl-tiefer:26} .fl-tiefer-27,[data-align]:has(>.fl-tiefer-27){--fl-tiefer:27} .fl-tiefer-28,[data-align]:has(>.fl-tiefer-28){--fl-tiefer:28} .fl-tiefer-29,[data-align]:has(>.fl-tiefer-29){--fl-tiefer:29} .fl-tiefer-30,[data-align]:has(>.fl-tiefer-30){--fl-tiefer:30}
.fl-tiefer-31,[data-align]:has(>.fl-tiefer-31){--fl-tiefer:31} .fl-tiefer-32,[data-align]:has(>.fl-tiefer-32){--fl-tiefer:32} .fl-tiefer-33,[data-align]:has(>.fl-tiefer-33){--fl-tiefer:33} .fl-tiefer-34,[data-align]:has(>.fl-tiefer-34){--fl-tiefer:34} .fl-tiefer-35,[data-align]:has(>.fl-tiefer-35){--fl-tiefer:35}
.fl-tiefer-36,[data-align]:has(>.fl-tiefer-36){--fl-tiefer:36} .fl-tiefer-37,[data-align]:has(>.fl-tiefer-37){--fl-tiefer:37} .fl-tiefer-38,[data-align]:has(>.fl-tiefer-38){--fl-tiefer:38} .fl-tiefer-39,[data-align]:has(>.fl-tiefer-39){--fl-tiefer:39} .fl-tiefer-40,[data-align]:has(>.fl-tiefer-40){--fl-tiefer:40}
.fl-tiefer-41,[data-align]:has(>.fl-tiefer-41){--fl-tiefer:41} .fl-tiefer-42,[data-align]:has(>.fl-tiefer-42){--fl-tiefer:42} .fl-tiefer-43,[data-align]:has(>.fl-tiefer-43){--fl-tiefer:43} .fl-tiefer-44,[data-align]:has(>.fl-tiefer-44){--fl-tiefer:44} .fl-tiefer-45,[data-align]:has(>.fl-tiefer-45){--fl-tiefer:45}
.fl-tiefer-46,[data-align]:has(>.fl-tiefer-46){--fl-tiefer:46} .fl-tiefer-47,[data-align]:has(>.fl-tiefer-47){--fl-tiefer:47} .fl-tiefer-48,[data-align]:has(>.fl-tiefer-48){--fl-tiefer:48} .fl-tiefer-49,[data-align]:has(>.fl-tiefer-49){--fl-tiefer:49} .fl-tiefer-50,[data-align]:has(>.fl-tiefer-50){--fl-tiefer:50}
.fl-tiefer-51,[data-align]:has(>.fl-tiefer-51){--fl-tiefer:51} .fl-tiefer-52,[data-align]:has(>.fl-tiefer-52){--fl-tiefer:52} .fl-tiefer-53,[data-align]:has(>.fl-tiefer-53){--fl-tiefer:53} .fl-tiefer-54,[data-align]:has(>.fl-tiefer-54){--fl-tiefer:54} .fl-tiefer-55,[data-align]:has(>.fl-tiefer-55){--fl-tiefer:55}
.fl-tiefer-56,[data-align]:has(>.fl-tiefer-56){--fl-tiefer:56} .fl-tiefer-57,[data-align]:has(>.fl-tiefer-57){--fl-tiefer:57} .fl-tiefer-58,[data-align]:has(>.fl-tiefer-58){--fl-tiefer:58} .fl-tiefer-59,[data-align]:has(>.fl-tiefer-59){--fl-tiefer:59} .fl-tiefer-60,[data-align]:has(>.fl-tiefer-60){--fl-tiefer:60}

/* Unter 1280 px ist die Textspalte schmaler als im Editor (729 px; bei 1000 px nur 496 px):
   dort höchstens die halbe Spalte, damit neben dem Bild noch Text Platz hat */
@media (max-width: 1279px) {
  .entry-content__container :is(figure.alignright, figure.alignleft) { max-width: 50%; }
}

/* Knopf fürs Vollbild (nur Website) */
.fl-zoom__open {
  all: unset;
  display: block;
  position: relative;
  cursor: zoom-in;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(5, 11, 21, .08), 0 10px 30px rgba(5, 11, 21, .10);
}
.fl-zoom__open img { transition: transform .4s ease; }
.fl-zoom__open:hover img { transform: scale(1.03); }
.fl-zoom__open:focus-visible { outline: 3px solid #A7D7B0; outline-offset: 3px; }
.fl-zoom__icon {
  position: absolute; top: 8px; right: 8px;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: #010316; color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  transition: background .2s ease, color .2s ease;
}
.fl-zoom__open:hover .fl-zoom__icon { background: #A7D7B0; color: #010316; }
/* Mini-Bild (bis 140 px, PHP setzt fl-mini): Lupe klein in der Ecke */
.fl-mini .fl-zoom__open { border-radius: 6px; }
.fl-mini .fl-zoom__icon { top: 3px; right: 3px; width: 18px; height: 18px; }
.fl-mini .fl-zoom__icon svg { width: 10px; height: 10px; }
.entry-content__container figure.alignright.fl-mini { margin-left: 18px; }
.entry-content__container figure.alignleft.fl-mini { margin-right: 18px; }
.fl-zoom__hinweis {
  display: block;
  margin-top: 8px;
  font-family: Outfit, sans-serif; font-size: 13px; font-weight: 300; line-height: 1.3;
  color: rgba(5, 11, 21, .55);
}

/* Handy: nichts fließt, das Bild steht in voller Breite über dem Absatz.
   Ausnahme Mini-Bild: es bleibt in seiner Größe neben dem Text (samt Höhe), daneben ist genug Platz. */
@media (max-width: 768px) {
  .entry-content__container :is(figure.alignright, figure.alignleft):not(.fl-mini) {
    float: none; clear: none; display: block; width: auto; max-width: none;
    margin: 4px 0 20px;
  }
  .entry-content__container div.wp-block-image:not(:has(> .fl-mini))::before { display: none; }
  .entry-content__container :is(figure.alignright, figure.alignleft):not(.fl-mini) img { width: 100% !important; }
}

/* Vollbild */
dialog.fl-lightbox {
  position: fixed; inset: 0;
  width: 100vw; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: rgba(1, 3, 22, .94);
  cursor: zoom-out;
}
dialog.fl-lightbox[open] { display: grid; place-items: center; animation: fl-fade .25s ease; }
dialog.fl-lightbox::backdrop { background: transparent; }
.fl-lightbox figure { margin: 0; display: grid; justify-items: center; gap: 12px; }
.fl-lightbox img {
  max-width: min(94vw, 1100px); max-height: 86dvh;
  width: auto; height: auto;
  border-radius: 12px;
  animation: fl-pop .3s ease;
}
.fl-lightbox figcaption { font-family: Outfit, sans-serif; font-size: 14px; font-weight: 300; color: rgba(255, 255, 255, .7); text-align: center; padding: 0 16px; }
.fl-lightbox figcaption:empty { display: none; }
.fl-lightbox__close {
  position: absolute; top: 16px; right: 16px;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .35); background: transparent; color: #fff;
  cursor: pointer;
}
.fl-lightbox__close:hover { background: #A7D7B0; border-color: #A7D7B0; color: #010316; }
html:has(dialog.fl-lightbox[open]) { overflow: hidden; }

@keyframes fl-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fl-pop { from { transform: scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  dialog.fl-lightbox[open], .fl-lightbox img { animation: none; }
  .fl-zoom__open img { transition: none; }
}