/*
Theme Name: Floo Magazin
Theme URI: https://floo.eu
Author: Florian Floo Weber
Description: Programmheft auf Streifen. Jede Rubrik der Startseite ist ein weißer Bogen, der auf blau-weißem Stoff liegt. Alle Inhalte bleiben normale Gutenberg-Blöcke.
Version: 3.2.0
Requires at least: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: floo-magazin
*/

/* ------------------------------------------------------------------
   Grundwerte
   Streifenfarbe und -breite lassen sich unter Design › Stile › Farben
   („Streifen“, „Streifen hell“) bzw. hier bei --floo-sw ändern.
------------------------------------------------------------------ */
:root{
  --floo-ink:#12253a;
  --floo-ostsee:#15537f;
  --floo-bordeaux:#96232a;
  --floo-bordeaux-dunkel:#7a1a20;
  --floo-grau:#526170;
  --floo-linie:#d6e2ec;
  --floo-papier:#fff;
  --floo-streifen:var(--wp--preset--color--streifen,#6b9ac0);
  --floo-streifen-hell:var(--wp--preset--color--streifen-hell,#f3f7fa);
  --floo-sw:30px;                               /* Breite eines Streifens */
  --floo-rund:12px;                             /* Ecken der Bögen */
  --floo-rund-klein:6px;                        /* Ecken von Bildern, Videos, Knöpfen */
  --floo-rand:clamp(12px,3.4vw,60px);           /* sichtbarer Stoff links/rechts */
  --floo-bogen:1200px;                          /* maximale Bogenbreite */
  --floo-innen:clamp(22px,4.2vw,64px);          /* Innenabstand der Bögen */
  --floo-luft:clamp(20px,3vw,44px);             /* Streifen zwischen den Bögen */
  --floo-spalte:clamp(16px,2.2vw,32px);         /* Spaltenabstand */
  --floo-h2:clamp(2.15rem,3.3vw,3.15rem);
  --floo-serif:"EB Garamond",Georgia,serif;
  --floo-sans:Karla,system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Der Stoff */
body{
  margin:0;
  color:var(--floo-ink);
  background-color:var(--floo-streifen-hell);
  background-image:repeating-linear-gradient(90deg,
    var(--floo-streifen) 0 var(--floo-sw),
    var(--floo-streifen-hell) var(--floo-sw) calc(var(--floo-sw) * 2));
  font-family:var(--floo-sans);
  font-size:1.0625rem;
  line-height:1.62;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

p,li,figcaption{hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:8 4 4}
h1,h2,h3,h4,h5,h6{hyphens:manual;-webkit-hyphens:manual;overflow-wrap:normal;text-wrap:balance;font-family:var(--floo-serif);font-variant-numeric:oldstyle-nums proportional-nums}
p{text-wrap:pretty}
img{max-width:100%;height:auto}
a{color:var(--floo-ostsee)}
:focus-visible{outline:2px solid var(--floo-ostsee);outline-offset:3px}

/* WordPress setzt zwischen Header, Inhalt und Footer Abstände – die steuern wir selbst */
body .wp-site-blocks{padding:0}
body .wp-site-blocks > *{margin-block:0}

/* ------------------------------------------------------------------
   Die Bögen
   Header, jede Rubrik der Startseite, normale Seiten und Footer liegen
   als weiße Blätter auf dem Stoff.
------------------------------------------------------------------ */
.floo-header,
.floo-footer,
.floo-page,
.floo-front .wp-block-post-content > *,
.floo-magazin .wp-block-post-content > *,
.floo-page:has(> .wp-block-post-content > .floo-hero) > .wp-block-post-content > *,
.editor-styles-wrapper .is-root-container > .wp-block-group{
  width:min(var(--floo-bogen), 100% - 2 * var(--floo-rand));
  max-width:none;
  margin-inline:auto;
  background:var(--floo-papier);
  box-shadow:0 0 0 1px rgba(18,37,58,.12);
}

.floo-front .wp-block-post-content > *,
.floo-magazin .wp-block-post-content > *,
.floo-page:has(> .wp-block-post-content > .floo-hero) > .wp-block-post-content > *,
.editor-styles-wrapper .is-root-container > .wp-block-group{margin-block:var(--floo-luft) 0}
/* Titelblatt hängt direkt am Kopf */
.floo-front .wp-block-post-content > :first-child,
.floo-magazin .wp-block-post-content > :first-child,
.floo-page:has(> .wp-block-post-content > .floo-hero) > .wp-block-post-content > :first-child{margin-top:0;border-top:1px solid var(--floo-linie)}

/* Magazin-Inhalt auf einer normalen Seite (z. B. einer Testseite):
   kein Sammelbogen, kein Seitentitel, keine Lesebreite – jede Rubrik
   wird wie auf der Startseite zu einem eigenen Bogen. */
body .floo-page:has(> .wp-block-post-content > .floo-hero){width:auto;background:none;box-shadow:none;border-top:0;padding:0}
.floo-page:has(> .wp-block-post-content > .floo-hero) > .floo-page__title{display:none}
.floo-page:has(> .wp-block-post-content > .floo-hero) > .wp-block-post-content{max-width:none;margin:0}

.floo-section{padding:var(--floo-innen)}

/* ------------------------------------------------------------------
   Kopf
------------------------------------------------------------------ */
body .floo-header{
  margin-top:var(--floo-luft);
  padding:18px var(--floo-innen);
  gap:28px;
  align-items:center;
  justify-content:space-between;
}
.floo-wordmark{
  display:flex;align-items:center;gap:.7rem;
  font-family:var(--floo-serif);font-size:clamp(2rem,2.6vw,2.6rem);font-weight:600;
  line-height:1;letter-spacing:-.035em;color:var(--floo-ink);text-decoration:none;white-space:nowrap;
}
.floo-wordmark__signatur{display:block;height:clamp(40px,4.2vw,56px);width:auto;margin:-4px 0}
.floo-wordmark small{
  font-family:var(--floo-sans);font-size:.72rem;font-weight:500;letter-spacing:0;
  line-height:1.25;color:var(--floo-grau);
}
.floo-header .wp-block-navigation{font-size:.95rem;gap:clamp(14px,1.7vw,28px)}
.floo-header .wp-block-navigation__container{flex-wrap:wrap;justify-content:flex-end;row-gap:4px}
.floo-header .wp-block-navigation-item__content{color:var(--floo-ink);text-decoration:none;padding:.25rem 0}
.floo-header .wp-block-navigation-item__content:hover{color:var(--floo-bordeaux);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.35em}
.floo-header .wp-block-navigation__responsive-container.is-menu-open{padding:28px;background:var(--floo-papier)}
.floo-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{font-family:var(--floo-serif);font-size:1.7rem}

/* ------------------------------------------------------------------
   Gemeinsame Bausteine
------------------------------------------------------------------ */
/* Rubrikzeile: klein, kursiv, Satzschreibung – keine Versalien-Etiketten */
.floo-eyebrow{
  font-family:var(--floo-serif);font-style:italic;font-size:1.2rem;line-height:1.3;
  color:var(--floo-ostsee);margin:0 0 .3rem;
}
.floo-heading{
  font-family:var(--floo-serif);font-weight:500;font-size:var(--floo-h2);line-height:1.03;
  letter-spacing:-.015em;color:var(--floo-ink);margin:0 0 1.1rem;
}
.floo-heading--red{color:var(--floo-bordeaux)}

/* Textlinks statt Buttons */
.floo-links{display:flex;flex-wrap:wrap;gap:.4rem 1.8rem;margin:1.3rem 0 0}
.floo-links a{
  font-weight:700;color:var(--floo-bordeaux);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:.32em;
}
.floo-links a:nth-child(2),.floo-world--school .floo-links a,.floo-workshops .floo-links a{color:var(--floo-ostsee)}
.floo-links a:hover{text-decoration-thickness:2px}

/* Der einzige echte Button (Programm) */
.floo-btn .wp-block-button__link{
  background:var(--floo-bordeaux);color:#fff;border-radius:0;
  padding:.8rem 1.35rem;font-family:var(--floo-sans);font-weight:700;font-size:.97rem;text-decoration:none;
}
.floo-btn .wp-block-button__link:hover{background:var(--floo-bordeaux-dunkel);color:#fff}

/* Randnotiz – dieselbe Spalte in Programm und Vita */
.floo-marginalie{
  font-family:var(--floo-serif);font-style:italic;font-size:1.22rem;line-height:1.35;
  color:var(--floo-ostsee);border-left:1px solid var(--floo-linie);padding-left:20px;margin:0;
}

/* Bildunterschriften, falls im Bild-Block eingetragen */
.wp-site-blocks figcaption{
  font-size:.8rem;line-height:1.4;color:var(--floo-grau);margin:.5rem 0 0;text-align:left;
}

/* ------------------------------------------------------------------
   Abstände – verbindlich
   WordPress setzt zwischen Blöcke eigene Abstände. Innerhalb der Rubriken
   regelt das Theme sie vollständig selbst, damit nichts „schwimmt“.
------------------------------------------------------------------ */
:is(.wp-site-blocks,.editor-styles-wrapper) :is(.floo-section,.floo-hero,.floo-hero__copy,.floo-hero__image,.floo-event__text,.floo-worlds,.floo-world,
  .floo-world__content,.floo-workshops,.floo-media__videos,.floo-media__small,.floo-radio__intro,.floo-gallery,
  .floo-bio__text,.floo-contact) > *{margin-block:0}
:is(.wp-site-blocks,.editor-styles-wrapper) .floo-eyebrow{margin:0 0 .3rem}
:is(.wp-site-blocks,.editor-styles-wrapper) .floo-heading{margin:0 0 1.1rem}
:is(.wp-site-blocks,.editor-styles-wrapper) .floo-links{margin:1.3rem 0 0}
:is(.wp-site-blocks,.editor-styles-wrapper) .floo-hero__copy > .floo-hero__name{margin-top:.9rem}
:is(.wp-site-blocks,.editor-styles-wrapper) .floo-hero__copy > .floo-hero__lede{margin-top:auto}
:is(.wp-site-blocks,.editor-styles-wrapper) .floo-event__text > .floo-heading{margin-bottom:.7rem}
:is(.wp-site-blocks,.editor-styles-wrapper) .floo-event__text > h3{margin-bottom:1.1rem}
:is(.wp-site-blocks,.editor-styles-wrapper) .floo-event__text > .floo-event__facts{margin:1.5rem 0}
:is(.wp-site-blocks,.editor-styles-wrapper) .floo-world__content > .floo-world__sub{margin:.3rem 0 .9rem}
:is(.wp-site-blocks,.editor-styles-wrapper) .floo-bio__text > .floo-heading,:is(.wp-site-blocks,.editor-styles-wrapper) .floo-radio__intro > .floo-heading{margin-bottom:1.25rem}
:is(.wp-site-blocks,.editor-styles-wrapper) .floo-media__videos,:is(.wp-site-blocks,.editor-styles-wrapper) .floo-gallery{margin-top:.4rem}
:is(.wp-site-blocks,.editor-styles-wrapper) .floo-workshops .floo-links{margin:0}

/* ------------------------------------------------------------------
   Titelblatt
------------------------------------------------------------------ */
.floo-hero{
  display:grid;grid-template-columns:minmax(0,11fr) minmax(0,13fr);
  min-height:min(66vh,600px);
}
.floo-hero__copy{
  display:flex;flex-direction:column;
  padding:clamp(28px,4vw,60px) var(--floo-innen) var(--floo-innen);
}
.floo-hero h1{
  font-family:var(--floo-serif);font-weight:600;
  font-size:clamp(4rem,8.4vw,8.4rem);line-height:.82;letter-spacing:-.045em;
  margin:0 0 0 -.05em;color:var(--floo-ink);white-space:nowrap;
}
.floo-hero .floo-hero__name{
  font-family:var(--floo-serif);font-size:clamp(1.45rem,2vw,2rem);line-height:1.15;
  margin-top:.9rem;
}
.floo-hero .floo-hero__lede{margin-top:auto;padding-top:2.5rem;font-size:1.2rem;line-height:1.5;max-width:30ch}
.floo-hero__image{position:relative;min-height:340px;overflow:hidden;background:var(--floo-linie)}
.floo-hero__image .wp-block-image{position:absolute;inset:0;margin:0}
.floo-hero__image img{width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block}

/* ------------------------------------------------------------------
   Programm („Gerade da.“) – Plakat · Text · Randnotiz
------------------------------------------------------------------ */
.floo-event{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--floo-spalte);align-items:start;
}
.floo-event > .floo-event__poster{grid-column:1 / 5;margin:0}
.floo-event > .floo-event__text{grid-column:5 / 10}
.floo-event > .floo-marginalie{grid-column:10 / 13;align-self:end;margin-bottom:5.2rem}
.floo-event__poster img{display:block;width:100%;height:auto}
.floo-event .floo-heading{font-size:clamp(2.6rem,4.4vw,4.2rem);line-height:.97;margin-bottom:.7rem}
.floo-event h3{font-family:var(--floo-serif);font-weight:500;font-size:clamp(1.3rem,1.8vw,1.6rem);line-height:1.2;margin:0 0 1.1rem}
.floo-event__facts{
  font-weight:700;font-size:.95rem;line-height:1.5;color:var(--floo-bordeaux);
  border-top:1px solid var(--floo-bordeaux);border-bottom:1px solid var(--floo-bordeaux);
  padding:.75rem 0;margin:1.5rem 0;hyphens:manual;-webkit-hyphens:manual;
}
.floo-event .wp-block-buttons{margin-top:0}

/* ------------------------------------------------------------------
   echT (und weitere „Welten“) – Text links, Foto rechts bis an den
   Bogenrand, Workshops als Fußleiste desselben Bogens.
   Ein Bild-Block irgendwo in der Gruppe wird automatisch zum Foto rechts.
------------------------------------------------------------------ */
.floo-worlds{display:block}
.floo-world{position:relative;min-width:0}
.floo-world + .floo-world{border-top:1px solid var(--floo-linie)}
.floo-world .wp-block-image{
  position:absolute;top:0;right:0;bottom:0;width:41.666%;
  margin:0!important;overflow:hidden;background:var(--floo-linie);
}
.floo-world .wp-block-image img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block}
.floo-world .wp-block-image figcaption{position:absolute;left:0;right:0;bottom:0;margin:0;padding:.5rem .8rem;background:rgba(255,255,255,.9)}
.floo-world:has(.wp-block-image){min-height:clamp(340px,30vw,440px)}
.floo-world:has(.wp-block-image) .floo-world__content{padding-right:calc(41.666% + var(--floo-innen))}
.floo-world__content{padding:clamp(26px,3.2vw,44px) var(--floo-innen) clamp(28px,3.2vw,44px)}
.floo-world h2{font-family:var(--floo-serif);font-weight:500;font-size:clamp(2.4rem,3.7vw,3.5rem);line-height:.95;letter-spacing:-.02em}
.floo-world--stage h2{color:var(--floo-bordeaux)}
.floo-world--school h2{color:var(--floo-ostsee)}
.floo-world .floo-world__sub{font-family:var(--floo-serif);font-style:italic;font-size:1.2rem;color:var(--floo-grau);margin:.3rem 0 .9rem}
.floo-world__content > p:not(.floo-world__sub):not(.floo-links){max-width:60ch}
.floo-workshops{
  border-top:1px solid var(--floo-linie);
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:0;align-items:baseline;
  padding:0;
}
.floo-workshops h3{font-family:var(--floo-serif);font-weight:500;font-size:1.55rem;line-height:1.2;padding:16px var(--floo-innen) 0;grid-column:1}
.floo-workshops > p:not(.floo-links){grid-column:1;padding:0 var(--floo-innen) 16px;color:var(--floo-grau)}
.floo-workshops .floo-links{grid-column:2;grid-row:1 / span 2;align-self:center;margin:0;padding:16px var(--floo-innen);border-left:1px solid var(--floo-linie);height:100%;align-items:center}

/* ------------------------------------------------------------------
   Floo in Bewegung – ein großes Video, zwei kleine
------------------------------------------------------------------ */
.floo-media__videos{
  display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--floo-spalte);align-items:start;margin-top:.4rem;
}
.floo-media__small{display:grid;gap:var(--floo-spalte);align-content:start}
.floo-media .floo-video-card__title{font-weight:500;font-size:.9rem;line-height:1.4;margin-top:.55rem}
.floo-media__videos > .floo-video-card .floo-video-card__title{font-family:var(--floo-serif);font-size:1.25rem;font-weight:400}

/* ------------------------------------------------------------------
   Radio Floo
------------------------------------------------------------------ */
.floo-radio{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--floo-spalte);align-items:start}
.floo-radio > .floo-radio__intro{grid-column:1 / 5}
.floo-radio > :not(.floo-radio__intro){grid-column:5 / 13}
.floo-radio__intro p{font-family:var(--floo-serif);font-style:italic;font-size:1.25rem;color:var(--floo-grau)}

/* ------------------------------------------------------------------
   Unterhaltung – Videothek links, Radio rechts
------------------------------------------------------------------ */
.floo-unterhaltung__raster{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:0;align-items:start;margin-top:.2rem}
.floo-unterhaltung__video{padding-right:var(--floo-spalte)}
.floo-unterhaltung__audio{padding-left:var(--floo-spalte);border-left:1px solid var(--floo-linie);align-self:stretch}
:is(.wp-site-blocks,.editor-styles-wrapper) :is(.floo-unterhaltung__raster,.floo-unterhaltung__video,.floo-unterhaltung__audio,.floo-videothek) > *{margin-block:0}
:is(.wp-site-blocks,.editor-styles-wrapper) .floo-unterhaltung__raster .floo-heading{margin-bottom:.9rem}
:is(.wp-site-blocks,.editor-styles-wrapper) .floo-unterhaltung__zeile{font-family:var(--floo-serif);font-style:italic;font-size:1.2rem;color:var(--floo-grau);margin:-.5rem 0 .9rem}
.floo-unterhaltung .floo-radio-list{--floo-radio-hoehe:clamp(18rem,34vw,27rem)}

/* ------------------------------------------------------------------
   Flootos – jedes Foto in seinem eigenen Format (kein Beschnitt).
   Die Reihen füllen sich bündig; das Seitenverhältnis setzt floo.js.
------------------------------------------------------------------ */
.floo-gallery{display:flex;flex-wrap:wrap;gap:8px;margin-top:.4rem}
.floo-gallery::after{content:"";flex-grow:999}
.floo-gallery .wp-block-image{
  --ar:1.5;
  flex:calc(var(--ar) * 100) 1 calc(var(--ar) * clamp(120px,14vw,190px));
  margin:0;position:relative;background:var(--floo-linie);cursor:zoom-in;
}
.floo-gallery .wp-block-image img{width:100%;height:auto;aspect-ratio:var(--ar);object-fit:cover;display:block}
.floo-gallery .wp-block-image figcaption{font-size:.78rem;color:var(--floo-grau);margin:.35rem 0 0}
.floo-gallery .wp-block-image:focus-visible{outline:2px solid var(--floo-ostsee);outline-offset:3px}
.floo-gallery .lightbox-trigger,.floo-gallery .wp-lightbox-overlay{display:none!important}
.floo-gallery .wp-block-image img:hover{filter:brightness(1.04)}

/* Bildbetrachter */
.floo-no-scroll{overflow:hidden}
.floo-viewer{
  position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:rgba(9,18,30,.96);color:#fff;overflow:hidden;
}
.floo-viewer::backdrop{background:rgba(9,18,30,.96)}
.floo-viewer[open]{display:grid;grid-template-rows:1fr auto}
.floo-viewer__stage{margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:0;padding:56px 72px 8px}
.floo-viewer__stage img{max-width:100%;max-height:calc(100dvh - 150px);width:auto;height:auto;object-fit:contain;display:block;transition:opacity .18s ease}
.floo-viewer.is-changing .floo-viewer__stage img{opacity:.25}
.floo-viewer__caption{font-family:var(--floo-serif);font-style:italic;font-size:1.1rem;color:#dfe8ef;margin:.8rem 0 0;text-align:center}
.floo-viewer__count{margin:0 0 18px;text-align:center;font-size:.8rem;letter-spacing:.06em;color:#9fb3c4;font-variant-numeric:tabular-nums}
.floo-viewer__btn{position:absolute;border:0;background:none;color:#fff;cursor:pointer;width:52px;height:52px;display:grid;place-items:center;padding:0;opacity:.8}
.floo-viewer__btn:hover,.floo-viewer__btn:focus-visible{opacity:1}
.floo-viewer__btn svg{width:28px;height:28px}
.floo-viewer__prev{left:10px;top:50%;transform:translateY(-50%)}
.floo-viewer__next{right:10px;top:50%;transform:translateY(-50%)}
.floo-viewer__close{right:10px;top:8px}
.floo-viewer.is-single .floo-viewer__prev,.floo-viewer.is-single .floo-viewer__next,.floo-viewer.is-single .floo-viewer__count{display:none}
@media (prefers-reduced-motion:reduce){.floo-viewer__stage img{transition:none}}

/* ------------------------------------------------------------------
   Über Floo – Foto · Text · Randnotiz (Raster wie beim Programm)
------------------------------------------------------------------ */
.floo-bio{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--floo-spalte);align-items:start}
.floo-bio > .floo-bio__photo{grid-column:1 / 5;margin:0}
.floo-bio > .floo-bio__text{grid-column:5 / 10}
.floo-bio > .floo-marginalie{grid-column:10 / 13;align-self:end;margin-bottom:3.6rem}
.floo-bio__photo img{display:block;width:100%;aspect-ratio:1;object-fit:cover}

/* ------------------------------------------------------------------
   Schreiben (Formular aus Floo Tools)
------------------------------------------------------------------ */
.floo-contact .floo-contact-form-wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--floo-spalte);align-items:start}
.floo-contact .floo-contact-form__intro{grid-column:1 / 5}
.floo-contact .floo-contact-form__form{grid-column:5 / 11}
.floo-contact .floo-contact-form__intro h2{font-family:var(--floo-serif);font-weight:500;font-size:var(--floo-h2);line-height:1.03;letter-spacing:-.015em;margin:0 0 .8rem}
.floo-contact .floo-contact-form__intro p{margin:0 0 .6rem;max-width:26ch}
.floo-contact .floo-contact-form__intro a{font-size:1.1rem}

/* ------------------------------------------------------------------
   Normale Seiten (Impressum, Datenschutz, Vita …)
------------------------------------------------------------------ */
body .floo-page{margin-top:0;border-top:1px solid var(--floo-linie);padding:var(--floo-innen)}
.floo-page > .wp-block-post-content{max-width:68ch}
.floo-page__title{font-family:var(--floo-serif);font-weight:500;font-size:var(--floo-h2);line-height:1.03;margin:0 0 1.4rem}
.floo-page > .wp-block-post-content > h2{font-size:1.9rem;margin:2.2rem 0 .6rem}
.floo-page > .wp-block-post-content > h3{font-size:1.4rem;margin:1.8rem 0 .5rem}

/* ------------------------------------------------------------------
   Fuß
------------------------------------------------------------------ */
body .floo-footer{
  margin-top:var(--floo-luft);margin-bottom:var(--floo-luft);
  padding:16px var(--floo-innen);font-size:.85rem;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;align-items:center;
}
.floo-footer p{margin:0}
.floo-footer a{color:var(--floo-ink);text-decoration:none;margin-left:1.2rem}
.floo-footer a:first-child{margin-left:0}
.floo-footer a:hover{color:var(--floo-bordeaux);text-decoration:underline}

/* ------------------------------------------------------------------
   Editor: Abstände sichtbar wie im Frontend
------------------------------------------------------------------ */
.editor-styles-wrapper .is-root-container{padding-block:var(--floo-luft)}

/* ------------------------------------------------------------------
   Vita – Tabellen (auf der Vita-Seite und im Fenster)
------------------------------------------------------------------ */
.wp-block-table.floo-vita-table{margin:0 0 2rem}
.wp-block-table.floo-vita-table table{width:100%;border-collapse:collapse;font-size:.95rem;line-height:1.45}
.wp-block-table.floo-vita-table td{border:0;border-top:1px solid var(--floo-linie);padding:.62rem .9rem .62rem 0;vertical-align:top;hyphens:auto;-webkit-hyphens:auto}
.wp-block-table.floo-vita-table tr:last-child td{border-bottom:1px solid var(--floo-linie)}
.wp-block-table.floo-vita-table td:first-child{width:6.4rem;white-space:nowrap;font-family:var(--floo-serif);font-size:1.08rem;font-variant-numeric:oldstyle-nums;color:var(--floo-bordeaux);padding-top:.5rem}
.wp-block-table.floo-vita-table td:nth-child(2){font-family:var(--floo-serif);font-size:1.15rem;line-height:1.3;color:var(--floo-ink);width:38%}
.wp-block-table.floo-vita-table td:last-child{color:var(--floo-grau);padding-right:0}
.wp-block-table.floo-vita-table em{display:block;font-style:normal;font-family:var(--floo-sans);font-size:.8rem;line-height:1.4;color:var(--floo-grau);margin-top:.15rem}
.wp-block-table.floo-vita-table--vier td:nth-child(2){width:34%}
.wp-block-table.floo-vita-table--vier td:nth-child(3){width:20%;color:var(--floo-ink)}
.wp-block-table.floo-vita-table--vier td:last-child{font-size:.84rem}
.floo-vita-note{font-size:.84rem;color:var(--floo-grau);font-style:italic;max-width:60ch}
.floo-page .wp-block-post-content > h2,.floo-dialog__body h2{font-family:var(--floo-serif);font-weight:500;font-size:clamp(1.9rem,2.8vw,2.5rem);color:var(--floo-ink);margin:2.4rem 0 .9rem}
.floo-page .wp-block-post-content > h3,.floo-dialog__body h3{font-family:var(--floo-serif);font-style:italic;font-weight:400;font-size:1.3rem;color:var(--floo-ostsee);margin:1.6rem 0 .5rem}
.floo-page:has(.floo-vita-table) > .wp-block-post-content{max-width:none}

/* Vita-Fenster */
.floo-dialog{
  width:min(1040px,100vw - 2 * var(--floo-rand));height:min(88dvh,1100px);max-width:none;max-height:none;
  margin:auto;padding:0;border:0;background:var(--floo-papier);color:var(--floo-ink);
  box-shadow:0 0 0 1px rgba(18,37,58,.12);overflow:hidden;
}
.floo-dialog[open]{display:flex;flex-direction:column}
.floo-dialog::backdrop{
  background-color:var(--floo-streifen-hell);
  background-image:repeating-linear-gradient(90deg,var(--floo-streifen) 0 var(--floo-sw),var(--floo-streifen-hell) var(--floo-sw) calc(var(--floo-sw) * 2));
}
.floo-dialog__bar{display:flex;align-items:center;gap:1.4rem;padding:16px var(--floo-innen);border-bottom:1px solid var(--floo-linie);flex:none}
.floo-dialog__title{font-family:var(--floo-serif);font-weight:500;font-size:1.9rem;line-height:1;margin:0}
.floo-dialog__nav{display:flex;flex-wrap:wrap;gap:.2rem 1.3rem;font-size:.9rem;margin-right:auto}
.floo-dialog__nav a{color:var(--floo-ostsee);text-decoration:none}
.floo-dialog__nav a:hover{text-decoration:underline;text-underline-offset:.3em}
.floo-dialog__close{border:0;background:none;color:var(--floo-ink);width:44px;height:44px;display:grid;place-items:center;cursor:pointer;margin-right:-10px;flex:none}
.floo-dialog__close svg{width:24px;height:24px}
.floo-dialog__body{position:relative;overflow-y:auto;overscroll-behavior:contain;padding:0 var(--floo-innen) var(--floo-innen);flex:1;outline:none}
.floo-dialog__body > .wp-block-post-content > :first-child{margin-top:1.4rem}
.floo-dialog__loading{margin:2rem 0;color:var(--floo-grau);font-style:italic;font-family:var(--floo-serif);font-size:1.2rem}

/* ------------------------------------------------------------------
   Tablet
------------------------------------------------------------------ */
@media (max-width:1080px){
  .floo-wordmark small{display:none}
  .floo-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .floo-event > .floo-event__poster,.floo-bio > .floo-bio__photo{grid-column:1 / 5}
  .floo-event > .floo-event__text,.floo-bio > .floo-bio__text{grid-column:5 / 13}
  .floo-event > .floo-marginalie,.floo-bio > .floo-marginalie{grid-column:5 / 13;margin:2rem 0 0!important;align-self:start;max-width:40ch}
  .floo-contact .floo-contact-form__form{grid-column:5 / 13}
}

/* ------------------------------------------------------------------
   Telefon
------------------------------------------------------------------ */
@media (max-width:782px){
  :root{--floo-sw:22px}
  body .floo-header{padding:14px 18px}
  .floo-wordmark small{display:none}

  .floo-hero{display:flex;flex-direction:column;min-height:0}
  .floo-hero__image{order:-1;height:min(112vw,560px)}
  .floo-hero__copy{padding:26px var(--floo-innen) 30px}
  .floo-hero h1{font-size:clamp(3.6rem,19vw,6rem)}
  .floo-hero .floo-hero__lede{margin-top:0;padding-top:1.4rem}

  .floo-event,.floo-bio,.floo-radio,.floo-contact .floo-contact-form-wrap{display:block}
  .floo-event__poster{max-width:72%;margin-bottom:28px!important}
  .floo-bio__photo{max-width:62%;margin-bottom:26px!important}
  .floo-event > .floo-marginalie,.floo-bio > .floo-marginalie{margin-top:1.8rem!important}
  .floo-radio__intro{margin-bottom:1.2rem!important}
  .floo-contact .floo-contact-form__intro{margin-bottom:1.6rem!important}
  .floo-contact .floo-contact-form__intro{margin-bottom:1.6rem}

  .floo-world{display:flex;flex-direction:column}
  .floo-world .wp-block-image{position:static;width:auto;height:min(78vw,420px);order:-1}
  .floo-world:has(.wp-block-image){min-height:0}
  .floo-world:has(.wp-block-image) .floo-world__content{padding-right:var(--floo-innen)}
  .floo-world__content .wp-block-image{margin:1.2rem calc(-1 * var(--floo-innen)) 0!important}
  .floo-workshops{display:block;padding:18px var(--floo-innen)}
  .floo-workshops h3,.floo-workshops > p:not(.floo-links),.floo-workshops .floo-links{padding:0;border:0;height:auto}
  .floo-workshops .floo-links{margin-top:.6rem!important}

  .floo-unterhaltung__raster{display:block}
  .floo-unterhaltung__video{padding-right:0}
  .floo-unterhaltung__audio{padding-left:0;border-left:0;border-top:1px solid var(--floo-linie);padding-top:1.6rem;margin-top:2rem!important}
  .floo-videothek__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .floo-unterhaltung .floo-radio-list{--floo-radio-hoehe:24rem}
  .floo-viewer__stage{padding:52px 8px 4px}
  .floo-viewer__prev,.floo-viewer__next{top:auto;bottom:4px;transform:none}
  .floo-dialog{width:100vw;height:100dvh}
  .floo-dialog__bar{flex-wrap:wrap;gap:.4rem 1rem;padding:12px 18px}
  .floo-dialog__nav{order:3;width:100%}
  .floo-dialog__title{margin-right:auto}
  .wp-block-table.floo-vita-table table,.wp-block-table.floo-vita-table tbody{display:block}
  .wp-block-table.floo-vita-table tr{display:grid;grid-template-columns:4.6rem minmax(0,1fr);border-top:1px solid var(--floo-linie);padding:.55rem 0}
  .wp-block-table.floo-vita-table tr:last-child{border-bottom:1px solid var(--floo-linie)}
  .wp-block-table.floo-vita-table td{border:0!important;padding:0 0 .15rem!important;width:auto!important}
  .wp-block-table.floo-vita-table td:first-child{grid-row:1 / span 3;font-size:1rem}
  .wp-block-table.floo-vita-table td:not(:first-child){grid-column:2}
  .floo-media__videos{grid-template-columns:1fr}
  .floo-media__small{grid-template-columns:1fr 1fr}
  .floo-gallery .wp-block-image{flex-basis:calc(var(--ar) * 110px)}
}

/* ------------------------------------------------------------------
   Leicht gerundete Ecken
   Stärke oben bei --floo-rund / --floo-rund-klein einstellbar (0 = eckig).
------------------------------------------------------------------ */
.floo-front .wp-block-post-content > *,
.floo-magazin .wp-block-post-content > *,
.floo-page:has(> .wp-block-post-content > .floo-hero) > .wp-block-post-content > *,
.floo-footer,
.editor-styles-wrapper .is-root-container > .wp-block-group{border-radius:var(--floo-rund);overflow:clip}
body .floo-page{border-radius:0 0 var(--floo-rund) var(--floo-rund);overflow:clip}
body .floo-page:has(> .wp-block-post-content > .floo-hero){border-radius:0;overflow:visible}
/* Kopf und Titelblatt bilden zusammen einen Bogen */
.floo-header{border-radius:var(--floo-rund) var(--floo-rund) 0 0}
.floo-front .wp-block-post-content > :first-child,
.floo-magazin .wp-block-post-content > :first-child,
.floo-page:has(> .wp-block-post-content > .floo-hero) > .wp-block-post-content > :first-child{border-radius:0 0 var(--floo-rund) var(--floo-rund)}

/* Bilder, Videos, Knöpfe im Inneren */
.floo-event__poster img,.floo-bio__photo img,
.floo-gallery .wp-block-image,.floo-gallery .wp-block-image img,
.floo-videothek__screen,.floo-videothek__img,.floo-video-card__button,
.floo-btn .wp-block-button__link,.floo-contact-form button,
.floo-radio-track__btn{border-radius:var(--floo-rund-klein)}
.floo-radio-track__btn{border-radius:50%}
.floo-gallery .wp-block-image{overflow:hidden}
.floo-gallery .wp-block-image:has(figcaption){overflow:visible;background:none}
.floo-viewer__stage img{border-radius:var(--floo-rund-klein)}
.floo-dialog{border-radius:var(--floo-rund)}
@media (max-width:782px){.floo-dialog{border-radius:0}}