/* ======================================================================
   HERO — eine Auszeichnung, viele Anordnungen
   ======================================================================
   ❗️Hier steht das GESAMTE Aussehen aller Hero-Bauarten. Der Renderer gibt
      für jede dieselben Zonen aus; was eine Bauart ausmacht, ist allein der
      Abschnitt `.fw-hero--<slug>` weiter unten. Eine neue Bauart braucht
      deshalb kein neues Markup, nur einen Eintrag in HeroVarianten und einen
      Abschnitt hier.
   ❗️Farben kommen AUSSCHLIESSLICH aus den Design-Variablen (--color-*), mit
      Rückfallwert. Damit passt sich der Hero der eingestellten Gestaltung an
      und hängt an keiner festen Farbe. Eine var() ohne Rückfall würde die
      ganze Eigenschaft ungültig machen (Falle vom 2026-08-05).
   ====================================================================== */

.fw-hero{
  --h-primary:var(--color-primary,#0a6ebd);
  /* #1956/#1957: Schrift in der Primaerfarbe, lesbar auf --h-bg (= Seitengrund).
     Die dunkle Variante setzt Kicker und Zahlen ohnehin auf Weiss. */
  --h-primary-text:var(--color-primary-text,var(--h-primary));
  --h-accent:var(--color-accent,#ff9a3c);
  --h-text:var(--color-text,#16202b);
  --h-bg:var(--color-background,#fff);
  --h-muted:color-mix(in srgb,var(--h-text) 58%,transparent);
  --h-line:color-mix(in srgb,var(--h-text) 13%,transparent);
  --h-soft:color-mix(in srgb,var(--h-primary) 7%,var(--h-bg));
  --h-rund:var(--fw-hero-rund,16px);
  --h-luft:var(--fw-hero-luft,80px);
  --h-spalte:clamp(24px,4vw,56px);
  position:relative;
  color:var(--h-text);
  background:var(--h-bg);
  padding:var(--h-luft) 0;
  overflow:clip;                 /* angeschnittene Bilder dürfen nicht scrollen */
}
.fw-hero *{box-sizing:border-box}
.fw-hero img{max-width:100%;display:block}

/* ❗️EIN ABSTAND UNTER DEM HERO, NICHT DREI (gemeldet 2026-09-28: „warum
   ist da häufig eine so grosse Lücke zwischen hero und dem ersten block“).
   Drei Ebenen brachten je eigene Luft mit, und sie addierte sich: der Hero
   selbst (--fw-hero-luft, 80 px), der Seitenabschnitt darunter
   (.page-section: 2,5 rem am Handy, 4 rem am PC) und das Blockraster
   (.fw-blocks, 1,5 rem). Gemessen an der Vorschau „von-de-suederdiek-am-see“,
   Seite „luzie“, bei 390 px: 80 + 40 + 24 = 144 px zwischen Bildunterkante
   und der Überschrift „Luzie auf einen Blick“; am PC 168 px.
   Jetzt gibt der Hero die Luft und der Abschnitt darunter nicht mehr. Die
   1,5 rem des Rasters BLEIBEN mit Absicht: unter einem Hero mit farbigem
   Grund wäre der erste Block sonst an die Farbkante geklebt. */
/* ❗️Und am Handy ist die Luft selbst zu gross. --fw-hero-luft ist ein
   fester Pixelwert aus der Einstellung (Vorgabe 80), gedacht fuer den
   grossen Bildschirm; auf 390 px sind dieselben 80 px oben wie unten ein
   Fuenftel der Bildschirmbreite. Anteilig statt fest, damit eine
   eingestellte 0 auch 0 bleibt und eine eingestellte 200 gross bleibt. */
@media (max-width:640px){
  .fw-hero{--h-luft:calc(var(--fw-hero-luft,80px) * .6)}
}
main > .fw-hero + .page-section{padding-top:0}
/* Die eine Bauart, die bewusst bündig endet — bei „Fenster“ läuft das Bild
   bis an die Unterkante (padding-bottom:0), dort gibt es keine Hero-Luft,
   die den Abstand tragen könnte. */
main > .fw-hero--fenster + .page-section{padding-top:clamp(22px,4vw,40px)}

.fw-hero__wrap{
  position:relative; z-index:1;
  max-width:var(--fw-hero-breite,1180px); margin:0 auto; padding:0 clamp(18px,4vw,32px);
  display:grid; gap:var(--h-spalte); align-items:center;
}
.fw-hero__text{display:flex; flex-direction:column; align-items:flex-start; min-width:0}

.fw-hero__kicker{
  margin:0 0 .9rem; font-size:.78rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--h-primary-text);
  display:inline-flex; align-items:center; gap:.55em;
}
.fw-hero__kicker::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--h-accent);flex:none}
/* ❗️`color:inherit` ist Pflicht, nicht Kosmetik. Die Website bringt eigene
   h1-Regeln mit (seite.css), und die setzen eine feste Farbe. Auf einem
   dunklen Titelbild stand die Überschrift dadurch dunkelblau auf dunkelblau —
   lesbar war sie nur, wo zufällig ein heller Bildteil lag. Eine Klasse schlägt
   einen Elementnamen, `inherit` holt die Farbe also wieder vom Abschnitt. */
.fw-hero__titel{
  margin:0; font-weight:800; letter-spacing:-.025em; line-height:1.05;
  font-size:clamp(2rem,5.2vw,3.9rem); color:inherit;
}
.fw-hero__lead{
  margin:1.05rem 0 0; font-size:clamp(1rem,1.4vw,1.2rem); line-height:1.6;
  color:var(--h-muted); max-width:56ch;
}
.fw-hero__hinweis{margin:.9rem 0 0; font-size:.9rem; color:var(--h-muted)}
.fw-hero__knoepfe{display:flex; flex-wrap:wrap; gap:12px; margin-top:1.7rem}
.fw-hero__knopf{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.78em 1.5em; border-radius:999px; font-weight:650; font-size:.98rem;
  text-decoration:none; line-height:1.2; transition:transform .15s ease, box-shadow .15s ease;
}
/* ❗️ZWEI Klassen im Selektor, und das mit Absicht. Das Design-System gibt als
   Inline-Stil `main a, .content a, article a {color: <Markenfarbe>}` aus. Der
   Hero steht innerhalb von `.content`, also traf `.content a` mit (0,1,1) auf
   `.fw-hero__knopf--voll` mit (0,1,0) — und gewann. Ergebnis: der gefuellte
   Knopf hatte Schrift und Flaeche in derselben Farbe und war schlicht LEER zu
   sehen. Aufgefallen am 2026-09-04, sobald eine Website eine eigene
   Markenfarbe bekam; bei der Werksfarbe fiel es nicht auf, weil Knopf und
   Link dieselbe blaue Farbe hatten und der Text zufaellig trotzdem stand.
   `.fw-hero .fw-hero__knopf--voll` ist (0,2,0) und schlaegt beides, ohne dass
   irgendwo ein `!important` noetig wird. */
.fw-hero .fw-hero__knopf--voll{background:var(--h-primary); color:#fff;
  box-shadow:0 8px 22px color-mix(in srgb,var(--h-primary) 32%,transparent)}
.fw-hero .fw-hero__knopf--umriss{border:1.5px solid var(--h-line); color:var(--h-text)}
.fw-hero__knopf:hover{transform:translateY(-1px)}

/* ---- Bilder ---------------------------------------------------------- */
.fw-hero__bilder{display:grid; gap:14px; min-width:0}
.fw-hero__bild{margin:0; min-width:0; display:flex; flex-direction:column; gap:.5rem}
.fw-hero__rahmen,
.fw-hero__leerbild{
  border-radius:var(--h-rund); overflow:hidden; position:relative;
  aspect-ratio:4/3; background:var(--h-soft);
}
.fw-hero__rahmen img{width:100%;height:100%;object-fit:cover}
/* Fehlt ein Bild, kommt eine ruhige Fläche — nie ein kaputtes <img>. */
.fw-hero__leerbild{
  background:
    radial-gradient(120% 90% at 20% 0%,color-mix(in srgb,var(--h-primary) 16%,transparent),transparent 60%),
    var(--h-soft);
}
.fw-hero__bildtext{font-size:.86rem; color:var(--h-muted); margin:0}

/* ---- Hintergrundbild ------------------------------------------------- */
.fw-hero__grund{position:absolute; inset:0; z-index:0; overflow:hidden}
.fw-hero__grund img{width:100%;height:100%;object-fit:cover}
.fw-hero__grund--leer{background:
  radial-gradient(90% 120% at 15% 0%,color-mix(in srgb,var(--h-primary) 30%,transparent),transparent 65%),
  color-mix(in srgb,var(--h-text) 82%,#000)}
/* ❗️Der Schleier ist Pflicht, nicht Geschmack: heller Text auf einem
   beliebigen Foto ist sonst nicht lesbar, und welches Foto kommt, weiss
   niemand vorher. */
.fw-hero__schleier{position:absolute; inset:0; opacity:var(--fw-hero-schleier,.4);
  background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,1) 100%)}

.fw-hero--dunkel{color:#fff}
.fw-hero--dunkel .fw-hero__titel{color:#fff}
.fw-hero--dunkel .fw-hero__lead,
.fw-hero--dunkel .fw-hero__hinweis,
.fw-hero--dunkel .fw-hero__bildtext{color:rgba(255,255,255,.82)}
.fw-hero--dunkel .fw-hero__kicker{color:#fff}
.fw-hero--dunkel .fw-hero__knopf--umriss{border-color:rgba(255,255,255,.55); color:#fff}
.fw-hero--dunkel .fw-hero__knopf--voll{background:#fff; color:var(--h-text); box-shadow:none}
/* Auf dunklem Grund gilt dasselbe Spezifitaets-Problem, nur andersherum. */
.fw-hero.fw-hero--dunkel .fw-hero__knopf--voll{color:var(--h-text)}
.fw-hero.fw-hero--dunkel .fw-hero__knopf--umriss{color:#fff}

/* ---- Zusatzzeile (Punkte / Kennzahlen) ------------------------------- */
/* ❗️Die Zusatzzeile steht IM Raster des Hero, nicht daneben. Vorher war sie
   ein eigener Kasten mit eigenem `__wrap` — damit konnte sie nur unten quer
   liegen. Im Raster kann jede Bauart selbst bestimmen, wo sie hingehört; „Mit
   Öffnungszeiten" setzt sie als Karte neben den Text. */
.fw-hero__zusatz{grid-column:1/-1; display:grid; grid-template-columns:repeat(3,1fr);
  gap:16px; align-items:stretch; margin-top:clamp(8px,1.6vw,20px)}
.fw-hero__punkt{display:flex; flex-direction:column; gap:.35rem; min-width:0}
.fw-hero__punktgross{font-weight:700}
.fw-hero__punktklein{font-size:.92rem; color:var(--h-muted); line-height:1.5}
.fw-hero__zusatz--punkte .fw-hero__punkt{
  padding:18px 20px; border:1px solid var(--h-line); border-radius:var(--h-rund);
  background:color-mix(in srgb,var(--h-text) 3%,transparent);
}
.fw-hero__zusatz--punkte .fw-hero__punktgross{font-size:1.05rem}
.fw-hero__zusatz--zahlen .fw-hero__punktgross{
  font-size:clamp(1.9rem,3.4vw,2.9rem); line-height:1; letter-spacing:-.02em; color:var(--h-primary-text);
}
.fw-hero--dunkel .fw-hero__zusatz--punkte .fw-hero__punkt{
  border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.08)}
.fw-hero--dunkel .fw-hero__zusatz--zahlen .fw-hero__punktgross{color:#fff}

/* ======================================================================
   DIE BAUARTEN
   ====================================================================== */

/* ---- Ohne Bild ------------------------------------------------------- */
.fw-hero--mittig .fw-hero__wrap{justify-items:center; text-align:center}
.fw-hero--mittig .fw-hero__text{align-items:center; max-width:56rem}
.fw-hero--mittig .fw-hero__lead{margin-inline:auto}
.fw-hero--mittig .fw-hero__knoepfe{justify-content:center}

.fw-hero--links .fw-hero__text{max-width:44rem}

.fw-hero--redaktion .fw-hero__text{
  display:grid; width:100%;
  grid-template-columns:1.02fr .98fr; column-gap:clamp(24px,4vw,64px);
}
.fw-hero--redaktion .fw-hero__kicker {grid-area:1/1/2/2}
.fw-hero--redaktion .fw-hero__titel  {grid-area:2/1/5/2}
.fw-hero--redaktion .fw-hero__lead   {grid-area:2/2/3/3; margin-top:.3rem; align-self:start}
.fw-hero--redaktion .fw-hero__knoepfe{grid-area:3/2/4/3; align-self:start}
.fw-hero--redaktion .fw-hero__hinweis{grid-area:4/2/5/3; align-self:start}

.fw-hero--riesig .fw-hero__text{display:grid; width:100%; grid-template-columns:1fr auto; column-gap:32px}
.fw-hero--riesig .fw-hero__kicker {grid-area:1/1/2/3}
.fw-hero--riesig .fw-hero__titel  {grid-area:2/1/3/3; font-size:clamp(2.6rem,8.6vw,6.6rem); letter-spacing:-.04em}
.fw-hero--riesig .fw-hero__lead   {grid-area:3/1/4/2; margin-top:1.6rem; max-width:44ch}
.fw-hero--riesig .fw-hero__knoepfe{grid-area:3/2/4/3; align-self:end; margin-top:1.6rem}
.fw-hero--riesig .fw-hero__hinweis{grid-area:4/1/5/3}

/* ---- Text und ein Bild ----------------------------------------------- */
.fw-hero--zweiteilig .fw-hero__wrap,
.fw-hero--gespiegelt .fw-hero__wrap,
.fw-hero--hoch .fw-hero__wrap{grid-template-columns:1fr 1fr}
.fw-hero--gespiegelt .fw-hero__text{order:2}
.fw-hero--gespiegelt .fw-hero__bilder{order:1}
.fw-hero--hoch .fw-hero__rahmen,
.fw-hero--hoch .fw-hero__leerbild{aspect-ratio:3/4}

/* ❗️KLEINES HOCHFORMAT. Nicht 1fr 1fr wie „Hochformat": die Bildspalte ist so
   breit wie das Bild und nicht breiter, den Rest bekommt der Text. `auto` als
   zweite Spur heisst genau das — sie schrumpft auf den Inhalt, und der ist
   durch `max-width` gedeckelt.
   ❗️`align-self:center` an den BILDERN, nicht am Rahmen: `.fw-hero__wrap` hat
   zwar `align-items:center`, aber `.fw-hero__bilder` ist ein Raster und zieht
   sich sonst auf die Höhe des Textes — das Bild stünde oben und der Rest wäre
   leere Fläche. */
/* ❗️AM GROSSEN BILDSCHIRM STAND DAS BILD ZU WEIT WEG. Mit `1fr` fuer den Text
   sass es am rechten Rand des Bandes, und zwischen dem Ende der Zeile und dem
   Bild lagen gemessen 410 px Weiss — die beiden sahen nicht mehr wie ein Paar
   aus, sondern wie zwei Sachen, die zufaellig in derselben Reihe stehen.
   Die Textspur ist deshalb auf ein Lesemass festgelegt, und das Bild folgt
   direkt darauf. Der linke Rand bleibt dabei am Raster der Seite: ein Hero,
   der als einziger Abschnitt eingerueckt anfaengt, faellt sofort auf. */
.fw-hero--hochklein .fw-hero__wrap{grid-template-columns:minmax(0,58ch) auto; justify-content:start}
.fw-hero--hochklein .fw-hero__bilder{align-self:center; width:min(240px,26vw)}
.fw-hero--hochklein .fw-hero__rahmen,
.fw-hero--hochklein .fw-hero__leerbild{aspect-ratio:3/4}

.fw-hero--angeschnitten .fw-hero__wrap{
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  max-width:none; padding-right:0; padding-left:max(clamp(18px,4vw,32px),calc(50vw - var(--fw-hero-breite,1180px) / 2));
}
.fw-hero--angeschnitten .fw-hero__rahmen,
.fw-hero--angeschnitten .fw-hero__leerbild{
  border-radius:var(--h-rund) 0 0 var(--h-rund); aspect-ratio:5/4;
}

.fw-hero--ueberlappt .fw-hero__wrap{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
.fw-hero--ueberlappt .fw-hero__text{
  position:relative; z-index:2; padding:clamp(24px,3vw,40px);
  background:var(--h-bg); border:1px solid var(--h-line); border-radius:var(--h-rund);
  box-shadow:0 26px 60px color-mix(in srgb,var(--h-text) 14%,transparent);
  margin-right:clamp(-96px,-6vw,-32px);
}
.fw-hero--ueberlappt .fw-hero__rahmen,
.fw-hero--ueberlappt .fw-hero__leerbild{aspect-ratio:4/3}

/* ---- Grosses Bild ---------------------------------------------------- */
.fw-hero--buehne,
.fw-hero--bildpunkte{padding-block:clamp(84px,13vw,168px)}
.fw-hero--buehne .fw-hero__wrap,
.fw-hero--bildpunkte .fw-hero__wrap{justify-items:center; text-align:center}
.fw-hero--buehne .fw-hero__text,
.fw-hero--bildpunkte .fw-hero__text{align-items:center; max-width:52rem}
.fw-hero--buehne .fw-hero__knoepfe,
.fw-hero--bildpunkte .fw-hero__knoepfe{justify-content:center}
/* ❗️„Bühne mit Punkten": Bild und Text stehen in `.fw-hero__buehne`, die
   Punkte im hellen `.fw-hero__band` darunter (siehe HeroRenderer). Den
   Innenabstand trägt deshalb die Bühne, nicht der Hero: sonst läge über und
   unter dem Bild ein heller Streifen. Vorher endete das Bild über eine feste
   Höhe vor der Zone, und die Punkte trugen die Farben für dunklen Grund
   (#1824). `:has()` statt der Bauart, weil die Bühne nur entsteht, wenn es
   eine Zone gibt. */
.fw-hero:has(> .fw-hero__buehne){padding-block:0}
.fw-hero__buehne{position:relative; padding-block:clamp(84px,13vw,168px)}
.fw-hero__band{background:var(--h-bg); color:var(--h-text);
  padding-block:clamp(26px,3.4vw,44px) clamp(46px,6vw,88px)}
.fw-hero__band .fw-hero__zusatz{margin-top:0}
.fw-hero__band .fw-hero__zusatz--punkte .fw-hero__punkt{
  border-color:var(--h-line); background:color-mix(in srgb,var(--h-text) 3%,transparent)}
.fw-hero__band .fw-hero__zusatz--zahlen .fw-hero__punktgross{color:var(--h-primary-text)}
/* Im Bau-Modus gelten sonst die hellen Umrisse des dunklen Hero. */
.fw-hero--bau .fw-hero__band .fw-hero__zusatz .fw-hero--leer{
  outline-color:color-mix(in srgb,var(--h-primary) 50%,transparent);
  background:color-mix(in srgb,var(--h-primary) 5%,transparent)}
.fw-hero--bau .fw-hero__band .fw-hero__zusatz [data-fwh]:hover{
  outline-color:color-mix(in srgb,var(--h-primary) 55%,transparent);
  background:color-mix(in srgb,var(--h-primary) 7%,transparent)}

.fw-hero--rahmen{padding:clamp(18px,2.4vw,34px) 0}
.fw-hero--rahmen .fw-hero__grund{
  inset:clamp(18px,2.4vw,34px) clamp(18px,4vw,40px);
  border-radius:clamp(18px,2.4vw,30px);
}
.fw-hero--rahmen .fw-hero__wrap{
  justify-items:center; text-align:center;
  padding-block:clamp(70px,11vw,150px);
}
.fw-hero--rahmen .fw-hero__text{align-items:center; max-width:50rem}
.fw-hero--rahmen .fw-hero__knoepfe{justify-content:center}

.fw-hero--kino{padding-top:0}
.fw-hero--kino .fw-hero__wrap{grid-template-columns:1fr auto; align-items:end}
.fw-hero--kino .fw-hero__bilder{
  grid-column:1/-1; grid-row:1;
  width:100vw; margin-left:50%; transform:translateX(-50%);
}
.fw-hero--kino .fw-hero__rahmen,
.fw-hero--kino .fw-hero__leerbild{border-radius:0; aspect-ratio:21/8}
.fw-hero--kino .fw-hero__text{grid-row:2}
.fw-hero--kino .fw-hero__knoepfe{grid-row:2; grid-column:2; margin-top:0}

.fw-hero--fenster{padding-bottom:0}
.fw-hero--fenster .fw-hero__wrap{grid-template-columns:1fr auto; align-items:end}
.fw-hero--fenster .fw-hero__bilder{
  grid-column:1/-1; margin-top:clamp(28px,4vw,54px);
  width:100vw; margin-left:50%; transform:translateX(-50%);
}
.fw-hero--fenster .fw-hero__rahmen,
.fw-hero--fenster .fw-hero__leerbild{border-radius:0; aspect-ratio:16/6}
.fw-hero--fenster .fw-hero__knoepfe{margin-top:0}

/* ---- Bildraster ------------------------------------------------------ */
.fw-hero--mosaik .fw-hero__wrap{grid-template-columns:.92fr 1.08fr}
.fw-hero--mosaik .fw-hero__bilder{grid-template-columns:1fr 1fr}
.fw-hero--mosaik .fw-hero__rahmen,
.fw-hero--mosaik .fw-hero__leerbild{aspect-ratio:1}
.fw-hero--mosaik .fw-hero__bild:nth-child(1),
.fw-hero--mosaik .fw-hero__bild:nth-child(4){margin-top:clamp(0px,2vw,26px)}

.fw-hero--magazin .fw-hero__wrap{grid-template-columns:.8fr 1.2fr}
.fw-hero--magazin .fw-hero__bilder{grid-template-columns:1.5fr 1fr; grid-template-rows:1fr 1fr}
.fw-hero--magazin .fw-hero__bild:nth-child(1){grid-row:1/3}
.fw-hero--magazin .fw-hero__bild:nth-child(1) .fw-hero__rahmen,
.fw-hero--magazin .fw-hero__bild:nth-child(1) .fw-hero__leerbild{aspect-ratio:3/4; height:100%}
.fw-hero--magazin .fw-hero__rahmen,
.fw-hero--magazin .fw-hero__leerbild{aspect-ratio:4/3}

.fw-hero--bento .fw-hero__wrap{grid-template-columns:1fr 1fr; align-items:stretch}
.fw-hero--bento .fw-hero__text{
  padding:clamp(22px,2.6vw,36px); border-radius:var(--h-rund);
  background:var(--h-soft); justify-content:center;
}
.fw-hero--bento .fw-hero__bilder{grid-template-columns:1fr 1fr; grid-template-rows:auto auto}
.fw-hero--bento .fw-hero__bild:nth-child(1){grid-column:1/3}
.fw-hero--bento .fw-hero__rahmen,
.fw-hero--bento .fw-hero__leerbild{aspect-ratio:16/9}
.fw-hero--bento .fw-hero__bild:nth-child(n+2) .fw-hero__rahmen,
.fw-hero--bento .fw-hero__bild:nth-child(n+2) .fw-hero__leerbild{aspect-ratio:1}

.fw-hero--karten .fw-hero__wrap{justify-items:center; text-align:center}
.fw-hero--karten .fw-hero__text{align-items:center; max-width:46rem}
.fw-hero--karten .fw-hero__knoepfe{justify-content:center}
.fw-hero--karten .fw-hero__bilder{width:100%; grid-template-columns:repeat(3,1fr)}
.fw-hero--karten .fw-hero__bild{
  border:1px solid var(--h-line); border-radius:var(--h-rund); overflow:hidden; gap:0;
  background:var(--h-bg); transition:transform .18s ease, box-shadow .18s ease;
}
.fw-hero--karten .fw-hero__bild:hover{transform:translateY(-3px);
  box-shadow:0 16px 40px color-mix(in srgb,var(--h-text) 10%,transparent)}
.fw-hero--karten .fw-hero__rahmen,
.fw-hero--karten .fw-hero__leerbild{border-radius:0; aspect-ratio:3/2}
.fw-hero--karten .fw-hero__bildtext{padding:14px 18px 18px; text-align:left; font-weight:600; color:var(--h-text)}

.fw-hero--galerie .fw-hero__wrap{grid-template-columns:1fr auto; align-items:end}
.fw-hero--galerie .fw-hero__bilder{
  grid-column:1/-1; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr);
  margin-top:clamp(26px,3.5vw,46px);
}
.fw-hero--galerie .fw-hero__rahmen,
.fw-hero--galerie .fw-hero__leerbild{aspect-ratio:3/4}
.fw-hero--galerie .fw-hero__knoepfe{margin-top:0}

/* ---- Mit Zusatzzeile ------------------------------------------------- */
.fw-hero--punkte .fw-hero__wrap{justify-items:center; text-align:center}
.fw-hero--punkte .fw-hero__text{align-items:center; max-width:52rem}
.fw-hero--punkte .fw-hero__lead{margin-inline:auto}
.fw-hero--punkte .fw-hero__knoepfe{justify-content:center}
.fw-hero--zahlen .fw-hero__text{max-width:46rem}

/* ---- Fläche ---------------------------------------------------------- */
.fw-hero--farbe{background:var(--h-primary)}
.fw-hero--farbe .fw-hero__text{max-width:48rem}
.fw-hero--verlauf{
  background:
    radial-gradient(80% 120% at 12% 0%,color-mix(in srgb,var(--h-primary) 22%,transparent),transparent 62%),
    radial-gradient(70% 110% at 92% 12%,color-mix(in srgb,var(--h-accent) 20%,transparent),transparent 58%),
    var(--h-bg);
}
.fw-hero--verlauf .fw-hero__wrap{justify-items:center; text-align:center}
.fw-hero--verlauf .fw-hero__text{align-items:center; max-width:52rem}
.fw-hero--verlauf .fw-hero__lead{margin-inline:auto}
.fw-hero--verlauf .fw-hero__knoepfe{justify-content:center}

/* ======================================================================
   HANDY
   ======================================================================
   ❗️Bilder liegen NIE einfach untereinander in voller Höhe. Sonst scrollt man
      auf dem Telefon minutenlang an vier riesigen Bildern vorbei (dieselbe
      Regel wie in _start_prep.php). Raster bleiben zweispaltig, Reihen werden
      zur Wischleiste.
   ====================================================================== */
@media (max-width:820px){
  .fw-hero__wrap{grid-template-columns:1fr !important; gap:clamp(22px,5vw,34px)}
  .fw-hero__text{order:0 !important}
  .fw-hero__bilder{order:1 !important; grid-template-columns:1fr 1fr !important}
  .fw-hero--redaktion .fw-hero__text,
  .fw-hero--riesig .fw-hero__text{display:flex; flex-direction:column}
  .fw-hero--zweiteilig .fw-hero__bilder,
  .fw-hero--gespiegelt .fw-hero__bilder,
  .fw-hero--hoch .fw-hero__bilder,
  .fw-hero--hochklein .fw-hero__bilder,
  .fw-hero--angeschnitten .fw-hero__bilder,
  .fw-hero--ueberlappt .fw-hero__bilder{grid-template-columns:1fr !important}
  .fw-hero--gespiegelt .fw-hero__bilder{order:-1 !important}
  /* ❗️KLEINES HOCHFORMAT BRICHT AM HANDY NICHT UM (Ansage 2026-09-27: „mache
     dass das kleiner ist und dann bei handy rechts neben text ist").
     Die Regeln darüber stapeln JEDE Bauart: eine Spalte, Bild unter dem Text,
     volle Breite. Für diese hier ist genau das falsch — ein 3:4-Bild auf voller
     Handybreite ist kein kleines Bild mehr, sondern der halbe erste Bildschirm.
     Sie behält deshalb ihre zwei Spalten, das Bild wird nur schmaler.
     ❗️`!important` ist hier Pflicht, nicht Nachlässigkeit: die drei Regeln, die
     überschrieben werden, tragen es selbst. Ohne das greift nichts davon. */
  .fw-hero--hochklein .fw-hero__wrap{
    grid-template-columns:minmax(0,1fr) auto !important;
    gap:clamp(14px,4vw,22px) !important;
    align-items:start;
  }
  .fw-hero--hochklein .fw-hero__bilder{
    order:1 !important; justify-self:end;
    width:min(124px,31vw) !important;
    /* Auf Höhe der Überschrift, nicht am oberen Rand des Kickers: so steht das
       Gesicht neben dem Namen und nicht neben der Zeile darüber. */
    margin-top:clamp(18px,6vw,34px);
  }
  .fw-hero--hochklein .fw-hero__bildtext{font-size:.78rem}

  /* ❗️UNTER 360 px WIRD ES DOCH ZU ENG. Bei 132 px Bild plus Abstand bleiben
     der Überschrift keine 180 px, und aus „Von de Süderdiek am See" werden
     sechs Zeilen. Dort ist Stapeln die ehrlichere Lösung — aber klein und
     linksbündig unter dem Text, nicht über die ganze Breite. */
  @media (max-width:359px){
    .fw-hero--hochklein .fw-hero__wrap{grid-template-columns:1fr !important}
    .fw-hero--hochklein .fw-hero__bilder{
      width:min(150px,46vw) !important; justify-self:start; margin-top:0;
    }
  }
  .fw-hero--angeschnitten .fw-hero__wrap{padding-inline:clamp(18px,4vw,32px); max-width:var(--fw-hero-breite,1180px)}
  .fw-hero--angeschnitten .fw-hero__rahmen,
  .fw-hero--angeschnitten .fw-hero__leerbild{border-radius:var(--h-rund)}
  .fw-hero--ueberlappt .fw-hero__text{margin-right:0}
  .fw-hero--magazin .fw-hero__bilder{grid-template-rows:none}
  .fw-hero--magazin .fw-hero__bild:nth-child(1){grid-row:auto; grid-column:1/3}
  .fw-hero--magazin .fw-hero__bild:nth-child(1) .fw-hero__rahmen,
  .fw-hero--magazin .fw-hero__bild:nth-child(1) .fw-hero__leerbild{aspect-ratio:16/9}
  .fw-hero--bento .fw-hero__bild:nth-child(1){grid-column:1/3}
  /* Reihen zur Wischleiste: eine Karte breit, die nächste schaut hervor. */
  .fw-hero--karten .fw-hero__bilder,
  .fw-hero--galerie .fw-hero__bilder{
    display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
    margin-inline:calc(clamp(18px,4vw,32px) * -1); padding-inline:clamp(18px,4vw,32px);
    scrollbar-width:none;
  }
  .fw-hero--karten .fw-hero__bilder::-webkit-scrollbar,
  .fw-hero--galerie .fw-hero__bilder::-webkit-scrollbar{display:none}
  .fw-hero--karten .fw-hero__bild,
  .fw-hero--galerie .fw-hero__bild{flex:0 0 78%; scroll-snap-align:start}
  .fw-hero--karten .fw-hero__bild:hover{transform:none; box-shadow:none}
  .fw-hero__zusatz{grid-template-columns:1fr}
  .fw-hero--zahlen .fw-hero__zusatz{grid-template-columns:repeat(3,1fr); gap:12px}
  .fw-hero--buehne, .fw-hero--bildpunkte,
  .fw-hero--diashow{padding-block:clamp(64px,16vw,110px)}
  /* Die besonderen Bauarten auf dem Handy: eine Spalte, Karten unter den Text,
     der Fächer liegt flach nebeneinander statt gestapelt (auf einem Telefon
     gibt es kein Überfahren, das ihn öffnen könnte). */
  .fw-hero--zeiten .fw-hero__zusatz{grid-column:1; grid-row:auto; margin-top:0}
  .fw-hero--faecher .fw-hero__bilder{aspect-ratio:auto; display:grid;
    grid-template-columns:1fr 1fr; gap:10px}
  .fw-hero--faecher .fw-hero__bild{position:static; transform:none !important}
  .fw-hero--faecher .fw-hero__bild:nth-child(1){grid-column:1/3}
  .fw-hero--faecher .fw-hero__rahmen,
  .fw-hero--faecher .fw-hero__leerbild{height:auto; aspect-ratio:4/3; box-shadow:none}
  .fw-hero--maske .fw-hero__titel{font-size:clamp(2.2rem,13vw,3.6rem)}
  .fw-hero--laufband .fw-hero__titel{font-size:clamp(2rem,12vw,3.4rem)}
  .fw-hero__buehne{padding-block:clamp(64px,16vw,110px)}
}

@media (prefers-reduced-motion:reduce){
  .fw-hero__knopf, .fw-hero--karten .fw-hero__bild{transition:none}
  .fw-hero__knopf:hover, .fw-hero--karten .fw-hero__bild:hover{transform:none}
}

/* ======================================================================
   BESONDERE BAUARTEN
   ====================================================================== */

/* ---- Diashow ---------------------------------------------------------
   ❗️Die Zeitsteuerung macht CSS, nicht ein Skript. Jedes Bild läuft dieselbe
   Bildfolge, nur um `--i` Schritte versetzt — die Länge eines Durchlaufs
   ergibt sich aus `--n`, der Zahl der Bilder. Deshalb braucht es weder einen
   Zeitgeber noch eine eigene Regel je Anzahl. */
.fw-hero--diashow{padding-block:clamp(96px,15vw,190px)}
.fw-hero--diashow .fw-hero__wrap{justify-items:center; text-align:center}
.fw-hero--diashow .fw-hero__text{align-items:center; max-width:52rem}
.fw-hero--diashow .fw-hero__knoepfe{justify-content:center}
.fw-hero__grundbild{position:absolute; inset:0}
.fw-hero__grundbild img{width:100%; height:100%; object-fit:cover}
/* ❗️UNSICHTBAR NUR IN DER DIASHOW (gemeldet 2026-10-14: „hab bild gemacht
   aber im hero hintergrund ist keins"). Die Deckkraft 0 stand seit dem
   19.08. an JEDEM Hintergrundbild, eingeblendet hat es aber nur die
   Bildfolge der Diashow. Bühne, Rahmen und Bildpunkte zeigten deshalb nie
   ein Bild: geladen war es (1400×647 gemessen), zu sehen nicht. Erst hier,
   wo die Bildfolge es wieder einblendet, darf es unsichtbar beginnen. */
.fw-hero--diashow .fw-hero__grundbild{
  opacity:0;
  --takt:6.5s;
  animation:fw-dia calc(var(--n) * var(--takt)) linear infinite,
            fw-kenburns calc(var(--n) * var(--takt)) linear infinite;
  /* ❗️Jedes Bild ist um EINEN Takt später dran als das vorige — mehr nicht.
     Der erste Versuch rechnete (n - i) * Takt und schob Bild 1 damit 26
     Sekunden in die Zukunft: die Diashow blieb einfach grau, ohne Fehler,
     ohne Meldung. Die Prozentwerte der Bildfolge sind so gewählt, dass ein
     Fenster ziemlich genau einen Takt breit ist; sie kacheln also. */
  animation-delay:calc(var(--i) * var(--takt));
}
@keyframes fw-dia{
  0%{opacity:0}  4%{opacity:1}
  /* Sichtbar bleibt jedes Bild seinen eigenen Takt lang; der Anteil ergibt
     sich aus 1/n, deshalb die Rechnung über calc() im Verzögerungswert. */
  20%{opacity:1} 26%{opacity:0} 100%{opacity:0}
}
@keyframes fw-kenburns{
  0%{transform:scale(1.02)} 26%{transform:scale(1.11)} 100%{transform:scale(1.11)}
}
/* Nur ein Bild? Dann nicht blenden, sondern einfach liegen bleiben. */
.fw-hero--diashow .fw-hero__grund[style*="--n:1"] .fw-hero__grundbild{animation:none; opacity:1}
.fw-hero__grundplus{
  position:absolute; right:12px; bottom:12px; z-index:4; width:34px; height:34px;
  display:grid; place-items:center; border-radius:50%; font-size:17px; font-weight:700;
  background:rgba(255,255,255,.9); color:#16202b; cursor:pointer;
}
.fw-hero__grundplus:nth-of-type(2){right:54px}
.fw-hero__grundplus:nth-of-type(3){right:96px}
.fw-hero:not(.fw-hero--bau) .fw-hero__grundplus{display:none}

/* ---- Bild in der Schrift ---------------------------------------------
   ❗️`background-clip:text` braucht eine durchsichtige Schriftfarbe, sonst
   liegt die Farbe ÜBER dem Bild und man sieht nichts davon. Und einen
   Rückfall: ohne gepflegtes Bild bliebe die Überschrift sonst unsichtbar. */
.fw-hero--maske .fw-hero__titel{
  font-size:clamp(2.6rem,9vw,7rem); letter-spacing:-.035em; line-height:1;
}
.fw-hero--maske .fw-hero__titel[style*="--bild"]{
  background-image:var(--bild); background-size:cover; background-position:center;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-text-fill-color:transparent;
}
.fw-hero--maske .fw-hero__bilder--wahl{max-width:190px}
.fw-hero--maske .fw-hero__bilder--wahl .fw-hero__rahmen,
.fw-hero--maske .fw-hero__bilder--wahl .fw-hero__leerbild{aspect-ratio:16/9}

/* ---- Vorher / Nachher ------------------------------------------------- */
.fw-hero__vergleich{
  position:relative; border-radius:var(--h-rund); overflow:hidden;
  aspect-ratio:4/3; background:var(--h-soft); cursor:ew-resize; touch-action:none;
}
.fw-hero__vgl{position:absolute; inset:0}
.fw-hero__vgl img{width:100%; height:100%; object-fit:cover}
/* Das obere Bild wird von rechts weggeschnitten — `--v` ist der Anteil, den
   man von ihm noch sieht (0 bis 1). Gesetzt wird er in hero.js. */
.fw-hero__vgl--a{clip-path:inset(0 calc(100% - var(--v,.5) * 100%) 0 0)}
.fw-hero__vgl-griff{
  position:absolute; top:0; bottom:0; left:calc(var(--v,.5) * 100%);
  width:3px; margin-left:-1.5px; background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.25);
}
.fw-hero__vgl-griff::after{
  content:""; position:absolute; top:50%; left:50%; width:38px; height:38px;
  transform:translate(-50%,-50%); border-radius:50%; background:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.3);
}

/* ---- Mit Öffnungszeiten ----------------------------------------------- */
.fw-hero--zeiten .fw-hero__wrap{grid-template-columns:1.05fr .95fr; align-items:start}
.fw-hero--zeiten .fw-hero__text  {grid-column:1; grid-row:1}
.fw-hero--zeiten .fw-hero__bilder{grid-column:1; grid-row:2; margin-top:clamp(18px,2.5vw,30px)}
.fw-hero--zeiten .fw-hero__rahmen,
.fw-hero--zeiten .fw-hero__leerbild{aspect-ratio:16/9}
.fw-hero--zeiten .fw-hero__zusatz{
  grid-column:2; grid-row:1 / span 2; grid-template-columns:1fr; gap:0; margin-top:0;
  padding:clamp(20px,2.4vw,30px); border-radius:var(--h-rund);
  border:1px solid var(--h-line); background:var(--h-soft);
}
.fw-hero__zusatz--zeiten .fw-hero__punkt{
  flex-direction:row; align-items:baseline; justify-content:space-between; gap:14px;
  padding:.62em 0; border-bottom:1px dashed var(--h-line);
}
.fw-hero__zusatz--zeiten .fw-hero__punkt:last-child{border-bottom:0; padding-bottom:0}
.fw-hero__zusatz--zeiten .fw-hero__punktgross{font-size:.98rem; font-weight:600}
.fw-hero__zusatz--zeiten .fw-hero__punktklein{
  font-size:.98rem; color:var(--h-text); font-variant-numeric:tabular-nums; text-align:right;
}

/* ---- Laufband ---------------------------------------------------------
   ❗️Zwei Ausgaben derselben Zeile, die zusammen um genau die Breite EINER
   wandern — nur so schliesst der Kreis ohne Sprung. */
.fw-hero--laufband .fw-hero__titel{
  display:flex; gap:.4em; width:100%; overflow:hidden; white-space:nowrap;
  font-size:clamp(2.4rem,8vw,6rem); letter-spacing:-.03em;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.fw-hero__lauf{flex:0 0 auto; animation:fw-lauf 18s linear infinite}
@keyframes fw-lauf{from{transform:translateX(0)} to{transform:translateX(-100%)}}
.fw-hero--laufband .fw-hero__wrap{max-width:none; padding-inline:0}
.fw-hero--laufband .fw-hero__kicker,
.fw-hero--laufband .fw-hero__lead,
.fw-hero--laufband .fw-hero__knoepfe,
.fw-hero--laufband .fw-hero__hinweis{margin-inline:clamp(18px,4vw,32px)}
/* Beim Bearbeiten steht es still — auf einem fahrenden Text kann man nicht
   tippen. */
.fw-hero--bau .fw-hero__lauf{animation:none}
.fw-hero--bau.fw-hero--laufband .fw-hero__lauf[aria-hidden]{display:none}

/* ---- Bildfächer -------------------------------------------------------
   Ganz ohne Skript: die Bilder liegen übereinander und fahren beim
   Überfahren des Stapels auseinander. */
.fw-hero--faecher .fw-hero__wrap{grid-template-columns:.9fr 1.1fr}
.fw-hero--faecher .fw-hero__bilder{position:relative; aspect-ratio:4/3; display:block}
.fw-hero--faecher .fw-hero__bild{
  position:absolute; inset:0; transition:transform .45s var(--fw-kurve, cubic-bezier(.2,.7,.3,1));
  transform-origin:50% 100%;
}
.fw-hero--faecher .fw-hero__bild:nth-child(1){transform:rotate(-5deg) translateX(-2%)}
.fw-hero--faecher .fw-hero__bild:nth-child(2){transform:rotate(1deg)}
.fw-hero--faecher .fw-hero__bild:nth-child(3){transform:rotate(6deg) translateX(2%)}
.fw-hero--faecher .fw-hero__bilder:hover .fw-hero__bild:nth-child(1){transform:rotate(-13deg) translateX(-16%) translateY(-3%)}
.fw-hero--faecher .fw-hero__bilder:hover .fw-hero__bild:nth-child(2){transform:rotate(0deg) translateY(-6%)}
.fw-hero--faecher .fw-hero__bilder:hover .fw-hero__bild:nth-child(3){transform:rotate(14deg) translateX(16%) translateY(-3%)}
.fw-hero--faecher .fw-hero__rahmen,
.fw-hero--faecher .fw-hero__leerbild{height:100%; box-shadow:0 18px 44px rgba(0,0,0,.22)}

/* ======================================================================
   DER AUFTRITT — wie der Bereich erscheint
   ======================================================================
   ❗️Reines CSS, keine Bibliothek. Die Recherche zu 2026 ist da eindeutig:
      GSAP kostet rund 60 kB, bevor die Seite ein Zeichen zeigt, und für das
      Erscheinen von Text braucht es das nicht. Was hier läuft, sind
      ausschliesslich `opacity` und `transform` — beides auf dem Compositor.
   ❗️`backwards` ist Pflicht: ohne Füllung nach hinten steht der Text in der
      Verzögerung sichtbar da und springt erst dann weg.
   ====================================================================== */
@keyframes fw-auf{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none}}
@keyframes fw-auf-klein{from{opacity:0; transform:translateY(11px)} to{opacity:1; transform:none}}

.fw-hero--auf-sanft .fw-hero__wrap{animation:fw-auf .7s var(--fw-kurve, cubic-bezier(.2,.7,.3,1)) both}

.fw-hero--auf-zeilen .fw-hero__text > *,
.fw-hero--auf-zeilen .fw-hero__bilder,
.fw-hero--auf-zeilen .fw-hero__zusatz .fw-hero__punkt{
  animation:fw-auf .62s var(--fw-kurve, cubic-bezier(.2,.7,.3,1)) both;
  animation-delay:calc(var(--i, 0) * .11s + .06s);
}

.fw-hero--auf-worte .fw-hero__stueck,
.fw-hero--auf-zeichen .fw-hero__stueck{
  display:inline-block;
  animation:fw-auf-klein .5s var(--fw-kurve, cubic-bezier(.2,.7,.3,1)) both;
}
.fw-hero--auf-worte .fw-hero__stueck{animation-delay:calc(var(--s, 0) * .075s + .1s)}
.fw-hero--auf-zeichen .fw-hero__stueck{animation-delay:calc(var(--s, 0) * .028s + .1s)}
/* Der Rest kommt danach, sonst steht der Satz vor seiner Überschrift da. */
.fw-hero--auf-worte .fw-hero__lead,
.fw-hero--auf-worte .fw-hero__knoepfe,
.fw-hero--auf-zeichen .fw-hero__lead,
.fw-hero--auf-zeichen .fw-hero__knoepfe{
  animation:fw-auf .6s var(--fw-kurve, cubic-bezier(.2,.7,.3,1)) both; animation-delay:.5s;
}

.fw-hero__vorhang{
  position:absolute; inset:0; z-index:6; pointer-events:none; background:var(--h-primary);
  transform-origin:50% 0;
  animation:fw-vorhang 1s cubic-bezier(.76,0,.24,1) both; animation-delay:.15s;
}
@keyframes fw-vorhang{from{transform:scaleY(1)} to{transform:scaleY(0)}}
.fw-hero--auf-vorhang .fw-hero__wrap{animation:fw-auf .6s ease both; animation-delay:.7s}

.fw-hero--auf-zoom .fw-hero__grund img,
.fw-hero--auf-zoom .fw-hero__rahmen img{animation:fw-zoom 1.6s cubic-bezier(.2,.7,.3,1) both}
@keyframes fw-zoom{from{transform:scale(1.14)} to{transform:scale(1)}}
.fw-hero--auf-zoom .fw-hero__wrap{animation:fw-auf .8s ease both; animation-delay:.2s}

/* Beim Bearbeiten läuft kein Auftritt: nach jeder Änderung wird der Bereich
   neu eingesetzt, und er würde bei jedem getippten Wort erneut auftauchen. */
.fw-hero--bau .fw-hero__wrap,
.fw-hero--bau .fw-hero__text > *,
.fw-hero--bau .fw-hero__stueck,
.fw-hero--bau .fw-hero__vorhang{animation:none !important; opacity:1; transform:none}
.fw-hero--bau .fw-hero__vorhang{display:none}

/* ======================================================================
   DIE BEWEGUNG — was danach passiert
   ====================================================================== */
/* Parallax über den Scrollfortschritt. `view()` gibt es nicht überall; wo es
   fehlt, passiert schlicht nichts — kein Ruckeln, kein Skript, kein Rückfall,
   der später schlechter altert als das Original. */
@supports (animation-timeline: view()){
  .fw-hero--bew-parallax .fw-hero__grund img,
  .fw-hero--bew-parallax .fw-hero__grundbild img{
    animation:fw-parallax linear both; animation-timeline:view(); animation-range:cover;
  }
  @keyframes fw-parallax{from{transform:translateY(-8%) scale(1.12)} to{transform:translateY(8%) scale(1.12)}}
}
.fw-hero--bew-schweben .fw-hero__bild{animation:fw-schweb 7s ease-in-out infinite}
.fw-hero--bew-schweben .fw-hero__bild:nth-child(2){animation-delay:-2.3s}
.fw-hero--bew-schweben .fw-hero__bild:nth-child(3){animation-delay:-4.6s}
@keyframes fw-schweb{0%,100%{transform:translateY(-6px)} 50%{transform:translateY(6px)}}

/* Neigen und Lichtkegel bekommen ihre Werte aus hero.js — CSS kann nicht
   wissen, wo der Zeiger steht. Ohne Werte stehen beide auf 0 und tun nichts. */
.fw-hero--bew-neigen .fw-hero__rahmen,
.fw-hero--bew-neigen .fw-hero__leerbild{
  transition:transform .18s ease-out; transform-style:preserve-3d;
  transform:perspective(900px) rotateX(calc(var(--my,0) * -7deg)) rotateY(calc(var(--mx,0) * 7deg));
}
.fw-hero--bew-licht::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(420px circle at calc(var(--px,50) * 1%) calc(var(--py,50) * 1%),
    color-mix(in srgb,var(--h-primary) 26%,transparent), transparent 62%);
  transition:opacity .25s linear; opacity:0;
}
.fw-hero--bew-licht:hover::before{opacity:1}
.fw-hero--bew-koerner::after{
  content:""; position:absolute; inset:-120px; z-index:2; pointer-events:none; opacity:.32;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  animation:fw-korn .6s steps(4) infinite;
}
@keyframes fw-korn{
  0%{transform:translate(0,0)} 25%{transform:translate(-24px,14px)}
  50%{transform:translate(18px,-20px)} 75%{transform:translate(-12px,-10px)}
  100%{transform:translate(0,0)}
}

/* ❗️Wer weniger Bewegung eingestellt hat, bekommt KEINE. Das ist keine
   Höflichkeit, sondern für manche Menschen der Unterschied zwischen benutzbar
   und unwohl. Der Hero bleibt vollständig — nur still. */
@media (prefers-reduced-motion:reduce){
  .fw-hero *,
  .fw-hero *::before,
  .fw-hero *::after{
    animation:none !important; transition:none !important; transform:none !important;
    opacity:1 !important;
  }
  .fw-hero__vorhang{display:none}
  .fw-hero__grundbild{opacity:1}
  .fw-hero__grundbild:not(:first-of-type){display:none}
}

/* ======================================================================
   BEARBEITEN — nur für Angemeldete (Klasse `fw-hero--bau`)
   ======================================================================
   ❗️Was man auf der Seite anfassen kann, wird auf der Seite angefasst. Jede
      Textzone ist anklickbar, jedes Bild auch. Damit man eine FEHLENDE Zone
      überhaupt treffen kann, gibt der Renderer sie im Bau-Modus leer aus und
      hier bekommt sie einen Platzhalter — sonst liesse sich ein fehlender
      Kicker nie hinzufügen.
   ❗️Zurückhaltend: solange man nichts überfährt, sieht der Hero aus wie für
      den Besucher. Die Werkzeuge erscheinen beim Überfahren, nicht davor.
   ====================================================================== */
/* ❗️Ausserhalb des Bau-Modus fällt eine leere Zone ganz weg. Sie steht im
   Dokument, damit man sie anklicken kann — sichtbar ist sie deshalb noch
   lange nicht. Ohne diese Regel bliebe an ihrer Stelle eine Zeile Luft. */
.fw-hero:not(.fw-hero--bau) .fw-hero--leer{display:none}

.fw-hero--bau [data-fwh]{
  cursor:text; border-radius:7px;
  outline:1.5px dashed transparent; outline-offset:3px;
  transition:outline-color .12s linear, background-color .12s linear;
}
.fw-hero--bau [data-fwh]:hover{
  outline-color:color-mix(in srgb,var(--h-primary) 55%,transparent);
  background:color-mix(in srgb,var(--h-primary) 7%,transparent);
}
.fw-hero--bau.fw-hero--dunkel [data-fwh]:hover{
  outline-color:rgba(255,255,255,.7); background:rgba(255,255,255,.12);
}
/* Der Platzhalter einer leeren Zone. Er steht NUR hier, nie im Dokument des
   Besuchers — dort fällt die leere Zone ganz weg.
   ❗️IMMER SICHTBAR, nicht erst beim Überfahren (gemeldet 2026-10-14: „wenn
   hero leer schwer nachvollziehbar wo man klicken kann"). Vorher trug eine
   leere Zone einen Rand in 22 % Textfarbe und einen Platzhalter mit 42 %
   Deckkraft. Auf einem leeren Titelbereich sah das nach Seitenschmuck aus,
   nicht nach einem Feld. Jetzt: Rand und Grund in der Markenfarbe und ein
   „＋" davor, so wie überall im Editor etwas Neues angelegt wird. Die
   Zurückhaltung von oben gilt weiter für GEFÜLLTE Zonen. */
.fw-hero--bau .fw-hero--leer::before{
  content:"＋ " attr(data-fwleer); opacity:.62; font-style:italic; font-weight:400;
}
.fw-hero--bau .fw-hero__titel.fw-hero--leer::before{font-style:normal; opacity:.5}
.fw-hero--bau .fw-hero--leer{outline-color:color-mix(in srgb,var(--h-primary) 50%,transparent)}
.fw-hero--bau.fw-hero--dunkel .fw-hero--leer{outline-color:rgba(255,255,255,.62)}
/* ❗️Nicht am Knopf: der gefüllte Knopf hat seine Fläche in der Markenfarbe,
   und der blasse Grund hier überschrieb sie (gleiche Gewichtung, spätere
   Regel). Übrig blieb weiße Schrift auf fast weißem Grund. */
.fw-hero--bau .fw-hero--leer:not(.fw-hero__knopf){background:color-mix(in srgb,var(--h-primary) 5%,transparent)}
.fw-hero--bau.fw-hero--dunkel .fw-hero--leer:not(.fw-hero__knopf){background:rgba(255,255,255,.07)}
/* ❗️Der Vorspann hat schon ein ::before: den Punkt davor, 7 × 7 px. Stand der
   Platzhalter auch dort, wurde er in diese 7 px gezwängt, brach Buchstabe um
   Buchstabe um und lief über die Überschrift (gemessen 2026-10-14 bei
   1400 px: „KURZER / VORSPANN" quer über dem „Ü"). Der Punkt bleibt, der
   Platzhalter steht dahinter im ::after. */
.fw-hero--bau .fw-hero__kicker.fw-hero--leer::before{content:""}
.fw-hero--bau .fw-hero__kicker.fw-hero--leer::after{
  content:"＋ " attr(data-fwleer); opacity:.62; font-style:italic; font-weight:400; letter-spacing:.1em;
}
/* Ein leerer Knopf soll als Knopf erkennbar bleiben, sonst weiss man nicht,
   was dort entstünde. */
.fw-hero--bau .fw-hero__knopf.fw-hero--leer{opacity:.8; min-width:7rem}

/* ❗️Die Beschriftung kommt aus `aria-label`, das der Server übersetzt
   ausgibt („Bild 2 wählen", „Titelbild wählen"). Ein fester Text hier
   stünde auch auf einer englischen Oberfläche deutsch da. */
/* ❗️KEIN `position:relative` hier (bis 2026-10-14 stand es da). Jeder
   Bildplatz ist schon positioniert: Rahmen und Leerbild relativ, Hintergrund,
   Diashow-Bild, Vergleichsseite und ＋ absolut. Die Regel überstimmte die
   absoluten (zwei Klassen gegen eine) und zog sie in den Fluss: ein LEERER
   Hintergrund hatte im Bau-Modus die Höhe 0, die dunkle Fläche fehlte, und
   die weiße Schrift der Bühne stand unsichtbar auf Weiß (gemessen bei
   „Bühne" ohne Bild, 1400 px). Der Vergleich stapelte seine beiden Bilder. */
.fw-hero--bau [data-fwbild]{cursor:pointer}
.fw-hero--bau [data-fwbild]::after{
  content:attr(aria-label); position:absolute; inset:auto 10px 10px auto;
  padding:.4em .8em; border-radius:999px; font-size:.78rem; font-weight:600;
  background:rgba(12,18,26,.82); color:#fff; opacity:0; pointer-events:none;
  transition:opacity .12s linear; white-space:nowrap;
}
.fw-hero--bau [data-fwbild]:hover::after,
.fw-hero--bau [data-fwbild]:focus-visible::after{opacity:1}
/* Ein LEERER Bildplatz sagt immer, was er ist, nicht erst beim Überfahren. */
.fw-hero--bau .fw-hero__leerbild[data-fwbild]{
  outline:2px dashed color-mix(in srgb,var(--h-primary) 50%,transparent); outline-offset:-2px;
}
.fw-hero--bau .fw-hero__leerbild[data-fwbild]::after{content:"＋ " attr(aria-label); inset:auto auto 50% 50%;
  transform:translate(-50%,50%); opacity:1}
/* Der leere HINTERGRUND oben in der Mitte und hell: unten rechts lag er unter
   den Seitenknöpfen des Editors, und dunkel auf der dunklen Ersatzfläche war
   er nur noch Schrift ohne Knopf. Oben links steht „Inhalt bearbeiten". */
.fw-hero--bau .fw-hero__grund--leer[data-fwbild]::after{content:"＋ " attr(aria-label); opacity:1;
  inset:14px auto auto 50%; transform:translateX(-50%); background:rgba(255,255,255,.94); color:#16202b}
.fw-hero--bau [data-fwbild]:hover{outline:2px solid var(--h-primary); outline-offset:2px}

/* ✦ „Inhalt bearbeiten": fester Einstieg ins Formular mit allen Feldern
   (siehe HeroRenderer). OBEN links, knapp unter der Kante: die Leiste des
   Titelbereichs geht ÜBER der Kante auf und lässt die Stelle frei. Unten
   lag er im ersten Versuch unter der Leiste des nächsten Blocks, die über
   dessen Oberkante, also in den Titelbereich hineinragt (gemessen bei
   1400 px: „Inhalt bearbeite…" abgeschnitten). Unten rechts steht der
   Hinweis eines Hintergrundbilds. */
.fw-hero__inhaltknopf{display:none}
.fw-hero--bau .fw-hero__inhaltknopf{
  display:inline-flex; align-items:center; gap:.45em;
  position:absolute; left:14px; top:14px; z-index:5;
  margin:0; padding:.55em 1em; border:0; border-radius:999px; cursor:pointer;
  font-family:inherit; font-size:.8rem; font-weight:650; line-height:1.2; letter-spacing:.01em;
  text-transform:none; background:#1d222b; color:#fff; box-shadow:0 6px 18px rgba(0,0,0,.28);
}
.fw-hero--bau .fw-hero__inhaltknopf::before{content:"✎"}
.fw-hero--bau .fw-hero__inhaltknopf:hover,
.fw-hero--bau .fw-hero__inhaltknopf:focus-visible{background:var(--h-primary); outline:2px solid #fff; outline-offset:2px}
.fw-hero--aus .fw-hero__inhaltknopf{display:none}

/* Die Zone, auf die man klickt, um die Bauart zu wechseln: alles im Hero,
   was kein Text und kein Bild ist. Sie zeigt sich erst beim Überfahren. */
.fw-hero--bau::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  outline:2px solid transparent; outline-offset:-2px;
  transition:outline-color .12s linear;
}
.fw-hero--bau[data-fwoffen]::after{outline-color:color-mix(in srgb,var(--h-primary) 60%,transparent)}

/* ======================================================================
   AUSGEBLENDET — für den Besucher weg, hier noch da
   ======================================================================
   ❗️Er MUSS im Layover sichtbar bleiben. Der Schalter sitzt in der Leiste
      dieses Heros, und die gibt es nur, solange er auf der Seite steht — wäre
      er auch hier weg, käme man nie wieder an ihn heran. Also gedämpft und
      deutlich gekennzeichnet statt versteckt.
   ====================================================================== */
/* ❗️Gedämpft werden die KINDER, nicht der Abschnitt. `opacity` am Abschnitt
   fasst ihn samt Pseudo-Element zu einer Gruppe zusammen — der Hinweis wäre
   dann genauso blass wie das, worauf er hinweist, und liesse sich auch nicht
   zurückholen: eine Deckkraft über 1 gibt es nicht, sie wird auf 1 gekappt
   und tut nichts. */
/* ❗️AUSSERHALB DES RASTER-MODUS GAR NICHT (Ansage 2026-08-20). „Ausgeblendet"
   heisst ausgeblendet — auch für den, der die Seite nur anschaut. Sichtbar
   bleibt er allein dort, wo gebaut wird; sonst käme man an den Schalter nie
   wieder heran, denn der sitzt in seiner Werkzeugleiste. */
.fw-hero--aus:not(.fw-hero--bau){display:none}

/* ❗️EINGEKLAPPT statt bloss blass. Ein ausgeblendeter Hero über die volle Höhe
   nur gedämpft stehen zu lassen kostet den halben Bildschirm für etwas, das
   gar nicht mehr da ist. Übrig bleibt ein schmaler Streifen mit dem Hinweis —
   genug, um ihn zu treffen und wieder einzuschalten. */
.fw-hero--aus.fw-hero--bau{
  padding:0; min-height:46px; display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--h-text) 6%, var(--h-bg));
  border-block:1px dashed color-mix(in srgb, var(--h-text) 22%, transparent);
}
.fw-hero--aus.fw-hero--bau > .fw-hero__wrap,
.fw-hero--aus.fw-hero--bau > .fw-hero__grund,
.fw-hero--aus.fw-hero--bau > .fw-hero__buehne,
.fw-hero--aus.fw-hero--bau > .fw-hero__band{display:none}
.fw-hero--aus::before{
  content:"Titelbereich ausgeblendet — Besucher sehen ihn nicht";
  position:static; transform:none; z-index:3;
  padding:.42em 1em; border-radius:999px; white-space:nowrap;
  font-size:.8rem; font-weight:650; letter-spacing:.01em;
  background:#1d222b; color:#fff; box-shadow:0 6px 18px rgba(0,0,0,.35);
}
/* Ohne Bau-Modus wird er gar nicht erst ausgegeben — die Regel greift also nur
   im Layover. Sicherheitshalber trotzdem: kein Hinweis auf einer Seite, auf
   der niemand etwas bearbeitet. */
.fw-hero--aus:not(.fw-hero--bau)::before{content:none}

/* Beim Tippen: der Text bleibt an Ort und Stelle, nur der Rahmen wird fest. */
.fw-hero--bau [data-fwh][contenteditable="true"]{
  outline:2px solid var(--h-primary); background:color-mix(in srgb,var(--h-primary) 9%,transparent);
  cursor:text;
}
.fw-hero--bau [data-fwh][contenteditable="true"]::before{content:none}