/* ==========================================================================
   FW Blocks — Frontend-Raster (vom BlockRenderer ausgegeben).

   Prinzip:
   - CSS-Grid mit --bg-cols Spalten; Zellen sind QUADRATISCH:
     Zeilenhöhe = (Containerbreite − Gaps) / Spalten (Container-Query-Einheit).
   - minmax(…, auto): Text, der höher ist als seine Zellen, dehnt die Zeile,
     statt abgeschnitten zu werden.
   - Mobile (<720px): Grid wird zum Stapel in DOM-Reihenfolge (Renderer
     sortiert nach y,x) — kein JavaScript nötig.
   ========================================================================== */

html { overflow-x: clip; } /* 100vw-Breakouts ohne horizontale Scrollbar */

/* 🪁 Mitschweben (anim.follow): weiches Nachziehen beim Scrollen */
.fw-follow { will-change: transform; transition: transform .25s cubic-bezier(.2, .8, .3, 1); }
@media (prefers-reduced-motion: reduce) { .fw-follow { transition: none; } }

/* 🪄 Import-Reveal-Rettung: macht JS-abhängig versteckte Importe sichtbar
   (mit sanftem Fade-In). --force neutralisiert zusätzlich versetzende
   Transforms, falls die Original-CSS-Reveal-Klassen nicht greifen. */
.fw-imported .fw-revealed {
  opacity: 1 !important; visibility: visible !important;
  transition: opacity .6s ease, transform .6s ease !important;
}
.fw-imported .fw-revealed--force { transform: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .fw-imported .fw-revealed { transition: none !important; }
}

.fw-blocks {
  container-type: inline-size;
  margin: 1.5rem auto;
}

/* Schmale/linksbündige Text-Wrapper (Lesebreite wie .content.prose mit
   max-width:72ch) neutralisieren, sobald sie ein Raster enthalten: Der
   vw-Breakout rechnet von der ELTERN-Mitte — sitzt der Wrapper nicht in der
   Bildschirmmitte, hängt „Volle Breite" weit links aus dem Bild.            */
.content:has(> .fw-blocks),
.prose:has(> .fw-blocks),
.about-text:has(> .fw-blocks) {
  max-width: none !important;
  width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ---- Breiten-Modi ----------------------------------------------------------
   „Container": zentrierte Inhaltsbreite — auch wenn der Eltern-Wrapper
   (Home-Templates: #content, Import: .fw-imported) vollbreit ist.            */
.fw-blocks--container {
  width: 100%;
  max-width: var(--container, 1140px);
  margin-left: auto; margin-right: auto;
}

/* vw-Breakout für Seiten, deren Template den Inhalt in einen schmalen
   .container steckt (Standard-/Fokus-Templates etc.).                        */
.fw-blocks--full   { width: 100vw;     margin-left: calc(50% - 50vw); }
.fw-blocks--w75    { width: 75vw;      margin-left: calc(50% - 37.5vw); }
.fw-blocks--w66    { width: 66.666vw;  margin-left: calc(50% - 33.333vw); }
.fw-blocks--custom { width: calc(var(--bg-pagew, 80) * 1vw); margin-left: calc(50% - var(--bg-pagew, 80) * .5vw); }

/* In ohnehin VOLLBREITEN Wrappern ist der vw-Breakout falsch (Scrollbar-
   Versatz: links raus, rechts fehlt ein Stück) → dort einfache Prozente.     */
#content > .fw-blocks--full,   .fw-imported > .fw-blocks--full   { width: 100%; margin-left: 0; }
#content > .fw-blocks--w75,    .fw-imported > .fw-blocks--w75    { width: 75%;     margin-left: auto; margin-right: auto; }
#content > .fw-blocks--w66,    .fw-imported > .fw-blocks--w66    { width: 66.666%; margin-left: auto; margin-right: auto; }
#content > .fw-blocks--custom, .fw-imported > .fw-blocks--custom { width: calc(var(--bg-pagew, 80) * 1%); margin-left: auto; margin-right: auto; }

@media (max-width: 900px) {
  /* Auf kleineren Screens sind schmale Modi kontraproduktiv → volle Breite */
  .fw-blocks--w75, .fw-blocks--w66, .fw-blocks--custom { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
}

.fw-blocks__grid {
  display: grid;
  grid-template-columns: repeat(var(--bg-cols, 11), 1fr);
  grid-auto-rows: minmax(calc((100cqw - (var(--bg-cols, 11) - 1) * var(--bg-gap, 12px)) / var(--bg-cols, 11)), auto);
  gap: var(--bg-gap, 12px);
}
@supports not (width: 1cqw) {
  /* Fallback für ältere Browser: vw-Näherung (etwas zu groß in Containern, nie clippend) */
  .fw-blocks__grid {
    grid-auto-rows: minmax(calc((100vw - (var(--bg-cols, 11) - 1) * var(--bg-gap, 12px)) / var(--bg-cols, 11)), auto);
  }
}

.fw-block { min-width: 0; position: relative; }
.fw-block__inner { height: 100%; min-width: 0; overflow-wrap: break-word; }

/* Fließende Blöcke (Auto-Höhe): Zeilenhöhe = Inhalt — kein Strecken/Stauchen,
   keine Weißraum-Lücken, wenn der Inhalt kürzer ist als die Editor-Zeilen. */
.fw-block--flow { grid-row: auto; }
.fw-block--flow .fw-block__inner { height: auto; }

/* Sandbox-HTML mit Viewport-Inhalt (vh/sticky/fixed): echte Bildschirmhöhe,
   scrollt intern — so ist „vh" = ein Bildschirm und Sticky-Effekte funktionieren.
   (Auto-Höhe wäre hier fatal: iframe-Höhe × vh = Rückkopplung → riesige Lücken.) */
.fw-html-sandbox--viewport { height: 100vh !important; }

/* Voll randloser Einzel-Block (nur wenn er alle Spalten überspannt) */
.fw-block--bleed > .fw-block__inner { width: 100vw; margin-left: calc(50% - 50vw); }

/* Text-Prose: erbt Theme-Typografie über .content/.prose; Grundabstand zähmen */
.fw-block__prose > :first-child { margin-top: 0; }
.fw-block__prose > :last-child  { margin-bottom: 0; }
/* Themes begrenzen .content.prose auf Lesebreite (z. B. max-width: 72ch).
   Im Raster bestimmt der BLOCK die Breite — ein vollbreiter Text+-Block
   soll wirklich von links nach rechts laufen. */
.fw-blocks .fw-block__prose.content.prose { max-width: none; margin-left: 0; margin-right: 0; }

/* Buttons füllen ihre Blockfläche (Breite × Höhe frei einstellbar) */
.fw-block--button .fw-block__inner { display: flex; }
.fw-block--button .fw-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center;
  text-align: center; text-decoration: none; border-radius: 10px;
  background: var(--color-primary, #1e5693); color: #fff; font-weight: 600;
  padding: .6rem 1.2rem; transition: filter .15s ease, transform .15s ease;
}
.fw-block--button .fw-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.fw-btn--secondary { background: #6b7280 !important; }
.fw-btn--outline {
  background: transparent !important;
  color: var(--color-primary, #1e5693) !important;
  border: 2px solid var(--color-primary, #1e5693);
}
.fw-btn--s { font-size: .85rem; }
.fw-btn--l { font-size: 1.15rem; }

/* Spacer ist bewusst leer */
.fw-block--spacer .fw-block__inner { min-height: 100%; }

/* Video/Bild füllen die Blockfläche */
.fw-block--video .fw-block__inner,
.fw-block--image .fw-block__inner { height: 100%; }

/* ---- Mobile: Stapel in Leserichtung -------------------------------------- */
@media (max-width: 719.98px) {
  .fw-blocks__grid { display: block; }
  .fw-blocks__grid > .fw-block { margin-bottom: var(--bg-gap, 12px); }
  .fw-blocks__grid > .fw-block:last-child { margin-bottom: 0; }
  .fw-block--hide-mobile { display: none !important; }

  /* Feste Block-Höhen loslassen — Inhalt bestimmt die Höhe */
  .fw-block--image .fw-block__inner,
  .fw-block--video .fw-block__inner { height: auto; }
  /* Sandbox-HTML meldet seine Inhaltshöhe per postMessage und wächst exakt mit
     (auch auf Mobile) — nur eine Mindesthöhe als Fallback, bis die Messung da ist.
     KEINE feste Höhe/!important, sonst überschriebe es die gemeldete Höhe. */
  .fw-html-sandbox { min-height: 200px; }
  .fw-block--image img { height: auto !important; max-height: 70vh; object-fit: cover; }
  .fw-block--video iframe, .fw-block--video video { aspect-ratio: 16 / 9; height: auto !important; }
  .fw-block--spacer { display: none; } /* leere Abstände stapeln sich nicht sinnvoll */
  .fw-block--button .fw-btn { padding: .9rem 1.2rem; }
}

/* ==========================================================================
   Block-Animationen (Tab „Animation" im Editor)
   Einschweben nutzt die vorhandene Scroll-Reveal-Runtime (fw-animate--…).
   ========================================================================== */

/* Hover-Effekte */
.fw-hov { transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease, filter .25s ease; }
.fw-hov--lift:hover   { transform: translateY(-8px); box-shadow: 0 14px 30px rgba(0,0,0,.16); }
.fw-hov--grow:hover   { transform: scale(1.05); }
.fw-hov--shrink:hover { transform: scale(.95); }
.fw-hov--glow:hover   { box-shadow: 0 0 22px 4px var(--fw-hov-col, rgba(37,99,235,.55)); }
.fw-hov--rotate:hover { transform: rotate(3deg) scale(1.02); }
.fw-hov--fade:hover   { opacity: .55; }
.fw-hov--color .fw-block__inner { transition: background-color .25s ease, color .25s ease; }
.fw-hov--color:hover .fw-block__inner { background-color: var(--fw-hov-col, #2563eb); color: #fff; border-radius: 10px; }
.fw-hov--color:hover .fw-block__inner * { color: inherit; }

/* Dauerschleifen */
@keyframes fwPulse  { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes fwFloat  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes fwSpin   { to { transform: rotate(360deg); } }
@keyframes fwBlink  { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes fwGrad   { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.fw-loop--pulse  { animation: fwPulse 2.2s ease-in-out infinite; }
.fw-loop--float  { animation: fwFloat 3.2s ease-in-out infinite; }
.fw-loop--spin   { animation: fwSpin 6s linear infinite; }
.fw-loop--blink  { animation: fwBlink 1.6s ease-in-out infinite; }
.fw-loop--gradient > .fw-block__inner,
.fw-loop--gradient > :first-child {
  background-image: linear-gradient(120deg, var(--fw-grad-a, #ff7eb3), var(--fw-grad-b, #65d6ce), var(--fw-grad-a, #ff7eb3));
  background-size: 220% 220%;
  animation: fwGrad 5s ease infinite;
  border-radius: 10px;
}

/* Zeitgesteuertes Ausblenden (data-fw-hide-after, Mini-Runtime im Renderer) */
[data-fw-hide-after] { transition: opacity .6s ease, transform .6s ease; }
.fw-block--hidden { opacity: 0 !important; transform: scale(.96); pointer-events: none; }

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
  .fw-block--button .fw-btn { transition: none; }
  .fw-loop--pulse, .fw-loop--float, .fw-loop--spin, .fw-loop--blink,
  .fw-loop--gradient > .fw-block__inner { animation: none; }
  .fw-hov, .fw-hov--color .fw-block__inner { transition: none; }
}