/* ============================================================
   Wache Weiblichkeit — Entwurf 03
   Design-Tokens uebernommen aus ww-02.html; erweitert um Nav,
   Footer, Kontaktformular und die wwSection/wwRow/wwCol-Grid-
   Mechanik, die spaeter die ZMS-Metaobjekte abbildet.
   ============================================================ */

/* Fedra Serif Pro B -- lokal eingebunden, Ueberschriften/Sonderfaelle */
@font-face{
  font-family:'Fedra Serif Pro B';
  font-weight:400; font-style:normal; font-display:swap;
  src:url('FedraSerifPro B Book.otf') format('opentype');
}
@font-face{
  font-family:'Fedra Serif Pro B';
  font-weight:400; font-style:italic; font-display:swap;
  src:url('FedraSerifPro B BookItalic.otf') format('opentype');
}
@font-face{
  font-family:'Fedra Serif Pro B';
  font-weight:500; font-style:normal; font-display:swap;
  src:url('FedraSerifPro B Medium.otf') format('opentype');
}
@font-face{
  font-family:'Fedra Serif Pro B';
  font-weight:500; font-style:italic; font-display:swap;
  src:url('FedraSerifPro B MediumIta.otf') format('opentype');
}
@font-face{
  font-family:'Fedra Serif Pro B';
  font-weight:700; font-style:normal; font-display:swap;
  src:url('FedraSerifPro B Bold.otf') format('opentype');
}
@font-face{
  font-family:'Fedra Serif Pro B';
  font-weight:700; font-style:italic; font-display:swap;
  src:url('FedraSerifPro B BoldItalic.otf') format('opentype');
}

:root{
  /* Primär: Rot */
  --ww-red:        #e20020;
  --ww-red-dark:   #b00019;
  --ww-red-light:  #e94058;
  /* Zwischenton fuer Button-Hover: dunkler als --ww-red, aber dezenter als
     das satte --ww-red-dark (55% Mischung Richtung dark). */
  --ww-red-dark-soft: #c6001c;
  /* Sekundär: Gold */
  --ww-gold:       #feb811;
  --ww-gold-dark:  #c6900d;
  --ww-gold-light: #feca4c;
  --ww-cream:      #fbf8f5;
  --ww-sand:       #f2ece5;
  --ww-sand-deep:  #e6dccf;
  --ww-plum:       #454545;
  --ww-plum-soft:  #33202a;
  --ww-ink:        #231f20;
  --ww-ink-muted:  #6d6266;
  --ww-graybg:     #f1f2f3;
  /* Hintergrund Topbar + Footer */
  --ww-bar-bg:     #bfbbbb;

  --ww-font-display: "Fedra Serif Pro B", Georgia, serif;
  --ww-font-base:    "Source Sans 3", -apple-system, "Segoe UI", sans-serif;

  --ww-maxw:  1180px;
  --ww-rhythm: clamp(3rem, 7vw, 5.5rem);

  /* Eckenradius fuer Bilder und Karten. Emergetik faehrt .35rem,
     hier bewusst eine Spur runder. */
  --ww-radius: .5rem;
  /* Eigener, kleinerer Radius fuer Buttons -- am Original orientiert
     (BeTheme .button: --mfn-button-border-radius: 3px), nicht an --ww-radius,
     das fuer Karten/Bilder deutlich runder sein soll. */
  --ww-btn-radius: .25rem;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--ww-font-base);
  font-size:1.0625rem; line-height:1.75;
  color:var(--ww-ink); background:var(--ww-graybg);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5{font-family:var(--ww-font-display); font-weight:400; line-height:1.28; color:var(--ww-plum); margin:0 0 .7em}
h1,h2{color:var(--ww-red)}
h1{font-size:clamp(1.9rem,4.4vw,3.1rem)}
h2{font-size:clamp(1.45rem,2.9vw,2rem)}
h3{font-size:clamp(1.3rem,2.2vw,1.7rem)}
h4{font-size:clamp(1.1rem,1.7vw,1.35rem)}
.web a{color:var(--ww-red); text-decoration:none}
.web a:hover{color:var(--ww-red-dark); text-decoration:underline}
p{margin:0 0 1em}
img{max-width:100%; height:auto; display:block}
ul,ol{padding-left:0; margin:0 0 1em}
::selection{background:var(--ww-red); color:#fff}

/* h1/h2 sind immer zentriert, mit Goldlinie darunter (gilt ueberall: Opener,
   Fliesstext, Kontaktformular ...). */
h1, h2{text-align:center; max-width:none}
h1::after, h2::after{
  content:""; display:block; margin:.5em auto 0; width:120px; height:3px;
  background:url("../img/goldlinie.png") center/120px 3px no-repeat;
}
.ww-section--dark h1::after, .ww-section--dark h2::after{opacity:.9}

.ww-container{max-width:var(--ww-maxw); margin-inline:auto; padding-inline:1.25rem}

/* Goldlinie -- die einzige zulaessige Trennlinie im Design.
   opacity:1 ist Absicht, nicht Redundanz: Bootstraps Reboot setzt auf jedes
   <hr> serienmaessig opacity:.25 (border-top: var(--bs-border-width) solid;
   opacity:.25) -- das faerbt keine unserer beiden .ww-goldline-Regeln
   (weder diese hier noch .ww-footer .ww-goldline) automatisch aus, weil sie
   die Eigenschaft schlicht nicht anfassten. Ergebnis war eine Linie, die im
   Markup und im CSS vollstaendig da war, aber zu 75% durchsichtig blieb --
   im Footer gegen den hellgrauen Hintergrund praktisch unsichtbar. */
.ww-goldline{display:block; width:180px; height:3px; border:0; margin:1.2rem 0; opacity:1; background:url("../img/goldlinie.png") left/180px 3px no-repeat}

/* Zitat-Dekoration (quotes.webp als dezentes Anfuehrungszeichen-Icon) */
.ww-richtext--quote{position:relative; padding-left:2.4rem}
.ww-richtext--quote::before{
  content:""; position:absolute; left:0; top:.1em; width:1.8rem; height:1.8rem;
  background:url("../img/quotes.webp") left top/contain no-repeat; opacity:.85;
}

/* Bullet-Icon aus dem Original (wpunkt/bullet-15) -- gilt fuer JEDE <ul> in
   Content-Bereichen, nicht nur explizit mit .ww-richtext/.ww-rawhtml
   umhuellte (wwSection.body/wwAccordionItem-Body und ZMSTextarea in
   wwCol rendern ihr HTML roh, ohne solchen Wrapper).
   Bewusst "div.wwSection/wwRow/wwCol", nicht die bloße meta_id-Klasse:
   ZMS klebt die meta_id auch an die ZMI-Listenzeile
   (<li class="wwSection zmi-item">). Ohne das div davor erwischt die
   Regel die <ul> der Aktions-Dropdowns rechts in der Zeile.
   .ww-section ul gilt fuer die Theme-Huelle um Seiten-Level-wwRow. */
.ww-richtext ul, .ww-rawhtml ul, div.wwSection ul, div.wwRow ul, div.wwCol ul, .ww-section ul, .accordion-body ul{list-style:none; margin-left:0; padding-left:0}
.ww-richtext ul li, .ww-rawhtml ul li, div.wwSection ul li, div.wwRow ul li, div.wwCol ul li, .ww-section ul li, .accordion-body ul li{position:relative; padding-left:1.6em; margin-bottom:.5em}
.ww-richtext ul li::before, .ww-rawhtml ul li::before, div.wwSection ul li::before, div.wwRow ul li::before, div.wwCol ul li::before, .ww-section ul li::before, .accordion-body ul li::before{
  content:""; position:absolute; left:0; top:.45em;
  width:13px; height:13px;
  background:url("../img/wacheweiblichkeit-bullet_15.png") center/contain no-repeat;
}
.ww-richtext ol{margin-left:1.3em}

/* ============================================================
   HEADER
   ============================================================ */
.ww-topbar{background:var(--ww-plum); color:#e9dfe1; font-size:.82rem}
.ww-topbar__inner{display:flex; justify-content:space-between; align-items:center; padding:.5rem 1.25rem; flex-wrap:wrap; gap:.5rem}
.ww-topbar__contact{list-style:none; display:flex; gap:1.4rem; margin:0; padding:0; flex-wrap:wrap}
.ww-topbar__contact a{color:#e9dfe1}
.ww-topbar__contact a:hover{color:var(--ww-gold)}
.ww-topbar__social{list-style:none; display:flex; gap:.8rem; margin:0; padding:0}
.ww-topbar__social a{color:#e9dfe1; display:inline-flex}
.ww-topbar__social a:hover{color:var(--ww-gold)}

/* Klebt beim Scrollen oben fest. Der sticky Kasten ist der <header>, nicht
   die Leiste selbst: sticky wirkt nur innerhalb des Elternelements, und das
   ist hier <body> -- also die ganze Seite. Die Kontaktleiste .ww-topbar
   liegt davor und scrollt weg. */
.ww-header{position:sticky; top:0; z-index:40}
.ww-topbar2{background:#fff; border-bottom:1px solid var(--ww-sand-deep)}
.ww-topbar2__inner{display:flex; align-items:center; justify-content:space-between; padding-block:.6rem; gap:1.5rem; position:relative}
.ww-logo{display:flex; flex:none}
.ww-logo--mobile{display:none}
.ww-logo--nav img{height:46px; width:auto}
.ww-logo--mobile img{height:38px; width:auto}

.ww-nav-toggle{display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:.4rem}
.ww-nav-toggle span{width:24px; height:2px; background:var(--ww-plum)}

/* Split-Menu mit mittigem Logo nach dem 3. Eintrag (wie im Original: "Split Main Menu") */
.ww-nav{display:flex; align-items:center; gap:2rem; flex:1; font-size:1rem; font-weight:400; letter-spacing:.01em}
.ww-nav__left, .ww-nav__right{flex:1 1 0; list-style:none; display:flex; gap:1.5rem; margin:0; padding:0; align-items:center}
.ww-nav__left{justify-content:flex-end}
.ww-nav__right{justify-content:flex-start}
.ww-nav a{color:var(--ww-plum); text-decoration:none; padding:.4rem 0; display:inline-block}
.ww-nav a:hover, .ww-nav a.is-active{color:var(--ww-red)}
/* Der letzte Menuepunkt ist der CTA -- gleiche Sprache wie .ww-btn: Icon
   links mit Abstand, kleiner Radius, Hover blendet einen Rahmen ein statt
   zu skalieren (Details siehe Kommentar bei .ww-btn weiter unten).
   Selektor bewusst als ".ww-nav a.ww-nav__cta": die Zeile darueber
   (.ww-nav a) ist spezifischer als eine einzelne Klasse und wuerde das
   display:inline-flex sonst ueberstimmen -- der gap bliebe wirkungslos
   und Icon und Text klebten aneinander. */
.ww-nav a.ww-nav__cta{
  background:var(--ww-red); color:#fff !important;
  padding:.55rem 1.1rem !important; border-radius:var(--ww-btn-radius);
  border:2px solid transparent;
  display:inline-flex; align-items:center; gap:.55rem;
  transition:background .15s, border-color .15s, box-shadow .15s;
}
.ww-nav a.ww-nav__cta:hover{
  background:var(--ww-red-dark-soft); color:#fff !important; border-color:var(--ww-red-dark-soft);
  box-shadow:0 6px 18px rgba(226,0,32,.22);
}
.ww-nav li.has-children{position:relative}
.ww-nav__sub{list-style:none; margin:0; padding:.6rem 0; display:none; position:absolute; left:0; top:100%; background:#fff; box-shadow:0 12px 30px rgba(42,28,33,.15); min-width:260px; border-radius:4px}
.ww-nav li.has-children:hover > .ww-nav__sub, .ww-nav li.has-children:focus-within > .ww-nav__sub{display:flex; flex-direction:column}
.ww-nav__sub li{width:100%; position:relative}
.ww-nav__sub a{padding:.5rem 1.2rem; font-weight:400; width:100%}
/* 3. Ebene: flyout zur Seite statt darunter */
.ww-nav__sub .ww-nav__sub{top:-.6rem; left:100%}
.ww-nav__sub li.has-children > a::after{content:" ›"}
.ww-nav__mega{display:none; flex-direction:row !important; gap:2rem; min-width:640px; padding:1.2rem 1.5rem}
.ww-nav li.has-children:hover > .ww-nav__mega, .ww-nav li.has-children:focus-within > .ww-nav__mega{display:flex}
.ww-nav__mega .mega-col{flex:1}
.ww-nav__mega .mega-title{font-weight:700; text-align:center; border-bottom:1px solid var(--ww-sand-deep); padding-bottom:.4rem; margin-bottom:.3rem; display:block}
.ww-nav__mega ul{list-style:none; margin:0; padding:0}
.ww-nav__mega ul a{font-weight:400; font-size:.83rem; padding:.35rem 0}

@media (max-width: 980px){
  .ww-nav-toggle{display:flex}
  .ww-logo--nav{display:none}
  .ww-logo--mobile{display:flex}
  .ww-nav{position:absolute; top:100%; left:0; right:0; background:#fff; flex-direction:column; align-items:stretch; max-height:0; overflow:hidden; box-shadow:0 12px 24px rgba(0,0,0,.12); transition:max-height .25s ease}
  .ww-nav.is-open{max-height:80vh; overflow-y:auto}
  .ww-nav__left, .ww-nav__right{flex-direction:column; align-items:stretch; justify-content:flex-start; gap:0; padding:.5rem 0}
  .ww-nav__sub, .ww-nav__mega{position:static; box-shadow:none; display:none !important; min-width:0}
  .ww-nav li.has-children.is-open > .ww-nav__sub, .ww-nav li.has-children.is-open > .ww-nav__mega{display:flex !important}
  .ww-nav__mega{flex-direction:column !important; gap:.5rem}
}

/* ============================================================
   SEITEN-HEADER (implizit, von zms_theme_ww/standard_html vor jeder
   Seite eingefuegt -- title/goldlinie(per h1::after)/description,
   zentriert, untereinander. Mit titleimage: Bild als Hintergrund ueber
   die volle Breite, .container bleibt fuer den Text auf Leserbreite.
   ============================================================ */
.ww-pageheader{padding-block:clamp(2.5rem,6vw,4rem); background-color:var(--ww-graybg); background-size:cover; background-position:center; position:relative}
.ww-pageheader .ww-container{text-align:center; position:relative; z-index:1}
.ww-pageheader h1{margin-bottom:0}
.ww-pageheader p{max-width:60ch; margin:1rem auto 0; white-space:pre-line; color:var(--ww-ink-muted); font-size:1.5rem; line-height:normal}
.ww-pageheader--image{color:#fff}
.ww-pageheader--image::before{content:""; position:absolute; inset:0; background:rgba(20,12,15,.42)}
.ww-pageheader--image h1{color:#fff}
.ww-pageheader--image p{color:#f2e9eb}
/* titleimage_fullheight: Hoehe strikt an die Breite gekoppelt (klassischer
   padding-top-Prozent-Trick -- padding-Prozente beziehen sich immer auf die
   Breite des Containing Blocks), NICHT per aspect-ratio: aspect-ratio ist nur
   ein Sizing-Vorschlag, den ueberlaufender Text (langer Titel/Beschreibung)
   durchbrechen kann -- wird die Box dadurch hoeher als das Bildverhaeltnis,
   schneidet background-size:cover links/rechts ab. Der padding-top-Trick ist
   dagegen immun: der Text liegt als eigene, aus dem Fluss genommene Ebene
   (position:absolute) obendrauf und kann die Boxhoehe nicht mehr beeinflussen.
   So bleibt die Bildbreite garantiert = Viewportbreite, ohne jemals seitlich
   beschnitten zu werden, unabhaengig vom Textumfang. */
.ww-pageheader--fullheight{height:0; padding-block:0}
.ww-pageheader--fullheight .ww-container{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding-block:1.5rem}

/* ============================================================
   SECTIONS / ROWS / COLS  (wwSection / wwRow / wwCol)
   Seiten-Hintergrund ist immer #f1f2f3; jede Section (ausser dem
   Opener) ist eine "Karte" in einem Bootstrap-artigen .container,
   sodass links/rechts/zwischen den Sections die Seitenfarbe durchscheint.
   ============================================================ */
.ww-section{background-size:cover; background-position:center}

/* Opener: erste Section jeder Seite, randlos wie ein Hero */
.ww-section--opener{padding-block:clamp(3rem,7vw,5rem); display:flex; align-items:center; min-height:38vh}
.ww-section--opener.ww-section--full-screen{min-height:70vh}
.ww-section--opener .ww-section__inner{max-width:var(--ww-maxw); margin-inline:auto; padding-inline:1.25rem; width:100%}
.ww-section--opener h1{font-size:clamp(1.6rem,3.2vw,2.35rem); line-height:1.4; margin-bottom:0}
.ww-section--opener:not(.ww-section--dark){background-color:var(--ww-graybg)}

/* Boxed: alle Content-Sections darunter */
.ww-section--boxed{padding-block:10px}
.ww-section--boxed .ww-section__inner{
  max-width:var(--ww-maxw); margin-inline:auto;
  background:#fff; border-radius:var(--ww-radius); padding:30px;
}
.ww-section--boxed.ww-section--dark .ww-section__inner{background:var(--ww-plum)}
.ww-section--boxed.ww-section--bgimage .ww-section__inner{
  background-size:cover; background-position:center; background-repeat:no-repeat; position:relative;
}
.ww-section--boxed.ww-section--bgimage .ww-section__inner::before{content:""; position:absolute; inset:0; border-radius:var(--ww-radius); background:rgba(20,12,15,.42)}
.ww-section--boxed.ww-section--bgimage .ww-row{position:relative; z-index:1}

/* Bildbande: volle Viewport-Breite, kein Karten-Rahmen, kein Text.
   Original (BeTheme full-width hide-mobile): ~400px hoch, Bild als
   background center top. cover, damit die Grafik auf jeder Breite
   randlos durchlaeuft. Auf Mobile ausgeblendet wie im Original. */
.ww-section--imageband{
  height:clamp(220px, 32vw, 400px);
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat;
  padding:0;
  margin:0;
}
@media (max-width:767.98px){
  .ww-section--imageband{display:none}
}

.ww-section--dark{color:#f2e9eb}
.ww-section--dark, .ww-section--dark p, .ww-section--dark li{color:#f2e9eb}
.ww-section--dark h1, .ww-section--dark h2, .ww-section--dark h3, .ww-section--dark h4{color:#fff}
.ww-section--dark a:not(.ww-btn){color:var(--ww-gold)}
.ww-section--full-screen{min-height:78vh; display:flex; align-items:center}
.ww-section--bgimage{background-repeat:no-repeat}
.ww-section--opener.ww-section--bgimage{position:relative}
.ww-section--opener.ww-section--bgimage::before{content:""; position:absolute; inset:0; background:rgba(20,12,15,.42)}
.ww-section--opener.ww-section--bgimage .ww-section__inner{position:relative; z-index:1}

.ww-row{display:flex; flex-wrap:wrap; gap:2rem; margin-bottom:1.8rem}
.ww-row:last-child{margin-bottom:0}
.ww-col{flex:1 1 var(--ww-basis, 100%); max-width:100%; min-width:min(100%, 240px)}
.ww-col--placeholder{display:none}

/* Kein Bild in der Reihe: Textblock schmaler und zentriert (wie Emergetik) */
.ww-row--solo-text{justify-content:center}
.ww-row--solo-text > .ww-col{flex:0 1 720px; max-width:720px}
.ww-row--solo-text .ww-richtext{text-align:center}
.ww-row--solo-text .ww-richtext p{margin-inline:auto}

/* Referenzen-/Presselogo-Streifen ("Bekannt aus" -> spaeter wwReferenzen) */
.ww-row--refstrip{align-items:center; justify-content:center; gap:2.4rem; row-gap:1.2rem}
.ww-row--refstrip .ww-col{flex:0 1 auto; min-width:0}
.ww-row--refstrip .ww-figure{margin:0}
.ww-row--refstrip img{max-height:42px; width:auto; opacity:.62; filter:grayscale(1); transition:opacity .15s, filter .15s}
.ww-row--refstrip a:hover img{opacity:1; filter:none}

/* renderWwSection/renderWwRow nutzen rohes Bootstrap-Grid (.row/.col-lg-*,
   .col-md-*) als Flex-Items. Ohne min-width:0 kann ein grosses Bild im
   media_element-Slot (oder in einer wwCol) ueber Flexbox' automatisches
   min-width:auto die Spalte sprengen. Generelle Absicherung fuer jedes
   Bootstrap-Grid der Seite. */
.row > [class*="col-"]{min-width:0}

/* Kopfzeile und Innenabstand einer wwRow. Der senkrechte Rhythmus zwischen
   mehreren Kindern einer wwCol steht bewusst hier als Geschwisterregel und
   nicht als mb-3 im Render-Script: so laesst er sich an einer Stelle
   aendern, und das letzte Kind erzeugt keinen ueberzaehligen Abstand. */
.ww-col-item + .ww-col-item{margin-top:1rem}
.ww-row-eyebrow{margin-bottom:.5rem}
.ww-row-title{margin-bottom:0}

/* Seite-Level-wwRow sitzt in der Karten-Section. Bootstraps .row
   (g-4 / g-lg-5) zieht per negativem Margin nach aussen und frisst
   das 30px-Kartenpadding fast auf -- Text und Listen kleben dann am
   Kartenrand, die Custom-Bullets laufen links raus. */
div.wwRow{padding-inline:1.25rem}

/* ZMS-Core (nicht unser Theme) schreibt fuer ZMSGraphic per Inline-Style
   eine feste Pixel-Breite auf den .graphic-Wrapper -- die tatsaechliche
   Breite des hochgeladenen Bildes, z.B. style="width:1920px" fuer ein
   normales Foto. Dadurch wird max-width:100% auf dem <img> wirkungslos
   (der Prozentbezug IST ja schon die volle Bildbreite) und das Bild
   sprengt jede schmalere Spalte seitlich. Inline-Style schlaegt jede
   Klassenregel, nur !important gewinnt dagegen. */
.graphic{width:100% !important}

/* Inhaltsbilder bekommen dieselbe Rundung wie die Buttons. Bewusst nur die
   Bild-Traeger aufzaehlen statt pauschal "img": Logos (Kopf, Topbar, Footer)
   und die Partner-/Guetesiegel-Logos in .row--badges/.row--refstrip sollen
   eckig bleiben. */
.graphic img,
.ww-figure img,
.ww-teaser__img img,
.bt-carousel-media img,
.carousel-item img{border-radius:var(--ww-radius)}

/* Zentrierte wwSection ohne Bild (layout=text-centered): Textlaufbreite
   begrenzen, wie bei .ww-row--solo-text / Emergetik. */
.ww-section .row.justify-content-center > [class*="col-"]{max-width:720px}

/* wwRow mit row_variant=badges (Guetesiegel/Partnerlogos mit Kurztext,
   z.B. Trusted Bodywork / VFP): Logo begrenzen+zentrieren, Text darunter. */
.row--badges{justify-content:center; text-align:center}
.row--badges .ww-col-item img{max-height:70px; width:auto; margin-inline:auto; display:block}
.row--badges .ww-col-item p{font-size:.85rem; color:var(--ww-ink-muted); margin:.6rem 0 0}
.row--badges .ww-col-item p:first-of-type{margin-top:.8rem}

/* wwRow mit row_variant=refstrip (Presse-/Partnerlogo-Streifen ohne
   Kurztext, z.B. "Bekannt aus:"): schwarzweiss, faerbt bei Hover ein.
   Die Spalten kommen aus renderWwRow als gleich breite Bootstrap-
   .col-md-Grid-Zellen MIT vollem Gutter-Padding (24px je Seite) --
   bei 8-10 Logos in einer Reihe frisst das fast die Haelfte jeder
   schmalen Spalte weg (Bild schrumpft auf ~34px). Padding raus,
   Spalten auf Inhaltsbreite schrumpfen lassen (kein Bootstrap-Grid
   mehr noetig, Row-Flexbox + gap uebernimmt die Verteilung). */
.row--refstrip{justify-content:center; align-items:center; gap:1.6rem 2.4rem; row-gap:1.4rem}
.row--refstrip > [class*="col-"]{padding-left:0; padding-right:0; flex:0 1 auto; width:auto; max-width:140px}
.row--refstrip .ww-col-item{text-align:center}
.row--refstrip .ww-col-item img{max-height:44px; width:auto; margin-inline:auto; display:block; opacity:.62; filter:grayscale(1); transition:opacity .15s, filter .15s}
.row--refstrip .ww-col-item a:hover img, .row--refstrip .ww-col-item:hover img{opacity:1; filter:none}

/* Kontaktformular-Sektion etwas kompakter */
.ww-section--kontaktform .ww-section__inner{background:var(--ww-graybg)}

/* Bild / Figure */
.ww-figure{margin:0 0 1em}
.ww-figure img{border-radius:4px}
/* Bild, das im Original als CSS-Hintergrund einer leeren Spalte steckte
   (Muffins "Bild neben Text"-Trick) -- als echtes, spaltenfuellendes Bild */
.ww-figure--fill{margin:0; align-self:stretch}
.ww-figure--fill img{width:100%; height:100%; min-height:320px; object-fit:cover; border-radius:var(--ww-radius)}

/* Buttons -- kleiner Eckenradius wie im Original (BeTheme .button: 3px,
   hier --ww-btn-radius), Icon links vom Label. inline-flex statt
   inline-block, damit Icon und Label sauber auf einer Grundlinie sitzen;
   den Abstand macht gap, deshalb setzt renderWwButton am Icon weder me-2
   noch ein &nbsp;.
   Hover ist ein Rahmen, der einblendet, keine Vergroesserung: ein skalierter
   Button macht Text und Icon zwischen den Pixelrastern unscharf, ein Rahmen
   aendert nur seine Farbe. border:2px solid transparent steht schon im
   Ruhezustand da (unsichtbar) -- die Boxgroesse bleibt beim Hover exakt
   gleich, nur die Randfarbe wechselt, kein Reflow. Hintergrund UND Rahmen
   wechseln beide auf --ww-red-dark-soft -- ein Ton, keine zweite Akzentfarbe. */
.ww-btn, .ww-btnwrap a{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  background:var(--ww-red); color:#fff !important; text-decoration:none !important;
  padding:.85rem 1.7rem; border-radius:var(--ww-btn-radius); font-weight:600; font-size:.92rem; letter-spacing:.02em;
  border:2px solid transparent; cursor:pointer; transition:background .15s, border-color .15s, box-shadow .15s;
}
.ww-btn:hover, .ww-btnwrap a:hover{
  background:var(--ww-red-dark-soft); box-shadow:0 6px 18px rgba(226,0,32,.22);
}
.ww-btn:not(.ww-btn--outline):hover, .ww-btnwrap a:not(.ww-btn--outline):hover{
  border-color:var(--ww-red-dark-soft);
}
.ww-btn--small{padding:.5rem 1.1rem; font-size:.82rem}
.ww-btn--outline{background:transparent; color:var(--ww-red) !important; border-color:var(--ww-red)}
.ww-btn--outline:hover{background:var(--ww-red); color:#fff !important}
.ww-btnwrap{margin:.5rem 0 1.3rem; text-align:center}

/* Steht ein Button allein (Seiten-Element, einzeln in einer Spalte):
   zentriert statt linksbuendig. In den Flex-Reihen von
   wwSection.buttons_html() ist das ein No-op -- dort sitzt der Button
   ohnehin schon in einer eigenen Flex-Zelle, deren Breite dem Inhalt folgt. */
div.wwButton{text-align:center}

/* Teaser-Karten (article_box) */
.ww-row:has(.ww-col--article_box){gap:1.5rem}
.ww-teaser{display:block; background:#fff; border-radius:var(--ww-radius); overflow:hidden; box-shadow:0 6px 20px rgba(42,28,33,.08); text-decoration:none !important; color:inherit; transition:transform .15s}
.ww-teaser:hover{transform:translateY(-3px)}
.ww-teaser__img img{aspect-ratio:1/1; object-fit:cover; width:100%}
.ww-teaser__body{padding:1.1rem 1.3rem}
.ww-teaser__eyebrow{font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ww-red); font-weight:600}
.ww-teaser__title{margin:.3rem 0 0; font-size:1.1rem}

/* Trailer-Box (vergangene Seminare) */
.ww-trailer{position:relative; display:block; border-radius:var(--ww-radius); overflow:hidden; color:#fff !important; text-decoration:none !important}
.ww-trailer img{aspect-ratio:16/9; object-fit:cover; width:100%; filter:brightness(.72)}
.ww-trailer__cap{position:absolute; left:1rem; bottom:.8rem; right:1rem; font-weight:600; text-shadow:0 2px 6px rgba(0,0,0,.6)}
.ww-trailer--archiv{opacity:.85}
.ww-trailer--archiv .ww-trailer__cap em{font-weight:400; opacity:.8}

/* Accordion (alt: rohes <details>/<summary> -- durch wwAccordion/
   wwAccordionItem abgeloest, Klassen bleiben als Fallback stehen) */
.ww-accordion__item{border-bottom:1px solid var(--ww-sand-deep); padding:.9rem 0}
.ww-accordion__item summary{cursor:pointer; font-family:var(--ww-font-display); font-size:1.1rem; color:var(--ww-plum); list-style:none}
.ww-accordion__item summary::-webkit-details-marker{display:none}
.ww-accordion__item summary::before{content:"+ "; color:var(--ww-red)}
.ww-accordion__item[open] summary::before{content:"– "}
.ww-accordion__body{padding-top:.7rem}

/* ============================================================
   wwProduct / wwProductFact -- Veranstaltungs-/Produkt-Steckbrief
   (Eckdaten-Tabelle links, hervorgehobene Preis-Karte rechts).
   ============================================================ */
.ww-product__eyebrow{font-size:.8rem; text-transform:uppercase; letter-spacing:.09em; color:var(--ww-red); font-weight:600; margin-bottom:.3rem}
.ww-product__title{text-align:left; font-size:clamp(1.15rem,2vw,1.5rem); margin-bottom:1.2rem}
.ww-product__title::after{display:none}

.ww-product__facts{width:100%; border-collapse:collapse}
.ww-product__facts th, .ww-product__facts td{
  padding:.65rem .9rem .65rem 0; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--ww-sand-deep);
}
.ww-product__facts th{font-weight:600; color:var(--ww-plum); white-space:nowrap; width:1%; padding-right:1.6rem}
.ww-product__facts tr:last-child th, .ww-product__facts tr:last-child td{border-bottom:0}
.ww-product__facts p{margin:0 0 .5em}
.ww-product__facts p:last-child{margin-bottom:0}

.ww-product__price-card{
  background:var(--ww-sand); border-radius:10px; padding:1.8rem 1.5rem; text-align:center;
  box-shadow:0 6px 20px rgba(42,28,33,.08);
}
.ww-product__price-title{margin-bottom:1rem; font-size:1.35rem}
.ww-product__price-label{font-weight:600; margin-bottom:.2rem}
.ww-product__price{font-family:var(--ww-font-display); font-size:1.7rem; color:var(--ww-red); margin:0 0 .2rem}
.ww-product__price-note{font-size:.85rem; color:var(--ww-ink-muted); margin-bottom:0}
.ww-product__price-sep{border:0; border-top:1px solid var(--ww-sand-deep); margin:1.2rem 0}
.ww-product__buttons{margin-top:1.4rem}

@media (max-width:991.98px){
  .ww-product__price-card{margin-top:1.5rem}
}

/* wwAccordion / wwAccordionItem -- Bootstrap-5-Accordion, auf WW-Palette
   umgefaerbt ueber Bootstraps eigene CSS-Variablen (sauberer als jede
   Bootstrap-Regel zu ueberschreiben). */
.wwAccordion .ww-accordion-title{text-align:center; margin-bottom:.5rem}
.wwAccordion .ww-accordion-desc{max-width:720px; margin:0 auto 2rem; text-align:center; color:var(--ww-ink-muted)}
/* --- Akkordeon: Goldlinien und Einblendung -------------------------------
   Bootstrap baut jede Akkordeon-Kopfzeile als <h2 class="accordion-header">.
   Die globale Regel h1::after, h2::after haengt daran eine Goldlinie -- bei
   zwoelf Fragen also zwoelf Zierlinien mitten in einer Bedienleiste. Die
   Goldlinie ist als Abschluss einer Ueberschrift gedacht, nicht als Schmuck an
   einem Schalter. Nur hier abschalten, ueberall sonst bleibt sie. */
.wwAccordion .accordion-header::after,
.wwAccordion .accordion-header::before{content:none}

/* Staffelung der Fragen beim Hochfahren: die nth-child-Regeln fuer .row
   greifen hier nicht, das Akkordeon ist kein Grid. Gezaehlt wird der
   .wwAccordionItem-WRAPPER, den ZMS um jedes Item legt -- .accordion-item
   selbst ist immer das einzige Kind darin und damit stets nth-child(1).
   Klein halten: bei zwoelf Fragen wuerde eine lange Kette am Ende spuerbar
   hinterherhinken. */
.js .wwAccordion .accordion > .wwAccordionItem:nth-child(2) .accordion-item.reveal{transition-delay:.06s}
.js .wwAccordion .accordion > .wwAccordionItem:nth-child(3) .accordion-item.reveal{transition-delay:.12s}
.js .wwAccordion .accordion > .wwAccordionItem:nth-child(4) .accordion-item.reveal{transition-delay:.18s}
.js .wwAccordion .accordion > .wwAccordionItem:nth-child(n+5) .accordion-item.reveal{transition-delay:.24s}

.wwAccordion .accordion{
  max-width:800px; margin-inline:auto;
  --bs-accordion-border-color: var(--ww-sand-deep);
  --bs-accordion-border-radius: 4px;
  --bs-accordion-inner-border-radius: 3px;
  --bs-accordion-btn-color: var(--ww-plum);
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-active-color: var(--ww-red);
  --bs-accordion-active-bg: var(--ww-sand);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(226,0,32,.15);
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23454545'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e20020'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}
.wwAccordion .accordion-button{font-family:var(--ww-font-display); font-size:1.08rem}
.wwAccordion .accordion-button:focus{border-color:var(--ww-sand-deep)}
.wwAccordion .accordion-body{color:var(--ww-ink)}
.wwAccordion .accordion-body p:last-child{margin-bottom:0}

/* ============================================================
   wwReviews / wwReview -- Google-Bewertungen.
   Nachbau des Trustindex-Widgets, das auf der WordPress-Seite steht
   (Layout 13, Set "light-background", ti-col-4). Die Masse stammen aus
   dessen erzeugtem Stylesheet: 25/75-Teilung, graue Karten mit 12 Pixel
   Radius und 20 Pixel Innenabstand, Profilbild 40, Firmenfoto 65, Sterne
   17 bzw. 20 Pixel, Text auf vier Zeilen. Geaendert ist die Schrift --
   Trustindex bringt eine eigene Poppins mit, hier laeuft alles auf
   --ww-font-base wie der Rest der Site.

   Die neutralen Grautoene stehen als eigene Variablen oben: sie gehoeren
   zur Google-Anmutung, nicht zur WW-Palette, und lassen sich hier an einer
   Stelle umstellen, falls die Karten spaeter in Sandtoenen stehen sollen.
   ============================================================ */
.ww-reviews{
  --ww-review-card:   #f4f4f4;   /* Kartenflaeche */
  --ww-review-ink:    #000;      /* Namen */
  --ww-review-muted:  #6b6b6b;   /* Datum */
  --ww-review-gap:    10px;      /* halber Abstand zwischen den Karten */
  font-family:var(--ww-font-base); font-size:14px; line-height:1.4;
}
.ww-reviews__title{text-align:center; margin-bottom:.5rem}
.ww-reviews__desc{max-width:720px; margin:0 auto 2rem; text-align:center; color:var(--ww-ink-muted)}

/* Kopfblock links, Karten rechts -- unterhalb von 992px gestapelt, weil ein
   Viertel Spaltenbreite dort weder fuer den Namen noch fuer den Button reicht. */
.ww-reviews__inner{display:flex; flex-wrap:wrap; align-items:flex-start}
.ww-reviews__source{flex:0 0 100%; max-width:100%; margin-bottom:1.5rem}
.ww-reviews__slider, .ww-reviews__grid{flex:0 0 100%; max-width:100%; min-width:0}
@media (min-width:992px){
  .ww-reviews__source{flex:0 0 25%; max-width:25%; margin-bottom:0; padding-right:1.5rem}
  .ww-reviews__slider, .ww-reviews__grid{flex:0 0 75%; max-width:75%}
}

.ww-reviews__logo{margin-bottom:.6rem}
.ww-reviews__logo img{width:65px; height:65px; border-radius:4px; object-fit:cover}
.ww-reviews__name{font-weight:600; font-size:15px; color:var(--ww-review-ink); line-height:1.3}
.ww-reviews__name a{color:inherit; text-decoration:none}
.ww-reviews__name a:hover{text-decoration:underline}
.ww-reviews__count{margin-top:.15rem; font-size:14px; color:var(--ww-ink)}
/* Der Button "Eine Bewertung schreiben" nutzt jetzt .ww-btn (Outline, klein) --
   siehe renderWwReviews. Hier bleibt nur der Abstand nach oben. */
.ww-reviews__write-wrap{margin-top:.9rem}

/* Sterne (renderWwStars) -- Groesse steuert das Renderskript ueber width/height,
   hier nur Farbe und Ausrichtung. --ww-gold liegt praktisch auf dem Google-Gelb. */
.ww-stars{display:inline-flex; align-items:center; gap:1px; line-height:1}
.ww-star--on{color:var(--ww-gold)}
.ww-star--off{color:#dadada}
.ww-reviews__source .ww-stars{margin:.35rem 0 .15rem}

/* --- Slider ---------------------------------------------------------------
   Kein Karussell-Plugin: der Track ist eine Flexreihe mit Scroll-Snap. Damit
   funktioniert Wischen auf dem Handy von Haus aus, und ohne JavaScript bleibt
   die Reihe scrollbar statt eingefroren. web.js legt nur Pfeile, Autoplay und
   die Fortschrittsleiste darueber. */
.ww-reviews__slider{position:relative}
.ww-reviews__track{
  display:flex; margin:0 calc(var(--ww-review-gap) * -1);
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scrollbar-width:none;
  padding-bottom:5px;            /* Platz fuer den Hover-Versatz der Karten */
}
.ww-reviews__track::-webkit-scrollbar{display:none}
.ww-reviews__track > .ww-reviews__cell{
  flex:0 0 85%; max-width:85%; padding:0 var(--ww-review-gap);
  scroll-snap-align:start; display:flex; flex-direction:column;
}
@media (min-width:768px){ .ww-reviews__track > .ww-reviews__cell{flex-basis:50%; max-width:50%} }
@media (min-width:1024px){ .ww-reviews__track > .ww-reviews__cell{flex-basis:33.333%; max-width:33.333%} }

.ww-reviews__grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.25rem}
.ww-reviews__grid > .ww-reviews__cell{display:flex; flex-direction:column}
/* Im Vorschau-Modus legt ZMS um jede Karte noch einen contentEditable-Wrapper.
   Der muss die Hoehe durchreichen, sonst sacken die Karten in sich zusammen. */
.ww-reviews__cell > *{display:flex; flex-direction:column; flex:1 1 auto}

/* --- Karte ---------------------------------------------------------------- */
.ww-review{
  display:flex; flex-direction:column; flex:1 1 auto; height:100%;
  background:var(--ww-review-card); border-radius:12px; padding:20px;
  transition:transform .2s ease;
}
@media (min-width:480px){
  .ww-review:hover{transform:translateY(-5px)}
}
@media (prefers-reduced-motion:reduce){
  .ww-review{transition:none}
  .ww-review:hover{transform:none}
}
.ww-review__head{display:flex; align-items:center; position:relative; padding-right:26px}
.ww-review__platform{position:absolute; top:0; right:0; line-height:0}
.ww-review__avatar{flex:0 0 40px; width:40px; height:40px; margin-right:10px}
.ww-review__avatar img{width:40px; height:40px; border-radius:30px; object-fit:cover}
.ww-review__initials{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:30px;
  background:var(--ww-sand-deep); color:var(--ww-plum);
  font-weight:600; font-size:15px;
}
.ww-review__who{min-width:0}
.ww-review__name{
  display:block; font-weight:600; font-size:15px; color:var(--ww-review-ink);
  line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ww-review__date{font-size:13px; color:var(--ww-review-muted)}
.ww-review__rating{display:flex; align-items:center; gap:6px; margin:.7rem 0 .5rem}
.ww-review__verified{display:inline-flex; color:#4285f4}

.ww-review__text{font-size:15px; line-height:1.45; color:var(--ww-ink)}
.ww-review__text p{margin:0 0 .7em}
.ww-review__text p:last-child{margin-bottom:0}
/* Vier Zeilen wie im Original, damit die Karten in einer Reihe gleich hoch
   stehen. Nur mit JS -- sonst gaebe es kein "Weiterlesen", und der Text waere
   unerreichbar abgeschnitten. */
.js .ww-review__text{
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical;
  overflow:hidden; min-height:calc(4 * 1.45 * 15px);
}
.js .ww-review.is-open .ww-review__text{
  display:block; overflow:visible; min-height:0;
}
.ww-review__reply{margin-top:.7rem; padding-left:.8rem; border-left:2px solid var(--ww-sand-deep)}
.ww-review__reply-by{font-weight:600; font-size:13px; color:var(--ww-review-muted)}

.ww-review__more{
  display:none; align-self:flex-start; margin-top:.5rem; padding:0;
  border:0; background:none; color:var(--ww-red);
  font:inherit; font-size:14px; font-weight:600; cursor:pointer;
}
.ww-review__more:hover{text-decoration:underline}
/* web.js setzt has-more nur, wenn der Text tatsaechlich ueberlaeuft. */
.js .ww-review.has-more .ww-review__more{display:inline-block}

/* --- Pfeile und Fortschrittsleiste ---------------------------------------- */
.ww-reviews__nav{
  display:none; position:absolute; top:-42px; z-index:2;
  width:30px; height:30px; padding:0; border:0; border-radius:15px;
  background:#fff center/9px 9px no-repeat; outline:2px solid #f4f4f4;
  cursor:pointer;
}
.ww-reviews__nav[disabled]{opacity:.35; cursor:default}
.ww-reviews__nav--prev{
  right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12' fill='none' stroke='%23575757' stroke-width='2'%3E%3Cpath d='M7 1 2 6l5 5'/%3E%3C/svg%3E");
}
.ww-reviews__nav--next{
  right:4px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12' fill='none' stroke='%23575757' stroke-width='2'%3E%3Cpath d='M1 1l5 5-5 5'/%3E%3C/svg%3E");
}
@media (min-width:1024px){
  .js .ww-reviews__nav{display:block}
}
/* Trustindex zeigt die Leiste erst unter 480px. Zwischen 480 und 1024 stuenden
   dann weder Pfeile noch Anzeige -- hier laeuft sie deshalb bis 1024 mit, wo
   die Pfeile uebernehmen. */
.ww-reviews__progress{
  display:none; width:150px; height:3px; margin:1.2rem auto 0;
  border-radius:3px; background:rgba(87,87,87,.35);
  position:relative; overflow:hidden;
}
.ww-reviews__dot{
  position:absolute; top:0; left:0; height:3px; width:50%;
  border-radius:3px; background:#575757;
  transition:width .2s ease, left .2s ease;
}
@media (max-width:1023.98px){
  .js .ww-reviews__progress{display:block}
}
/* Passen alle Karten nebeneinander, setzt web.js diese Klasse -- dann gibt es
   nichts zu blaettern und weder Pfeile noch Leiste haetten eine Aufgabe. */
.ww-reviews--static .ww-reviews__nav,
.js .ww-reviews--static .ww-reviews__progress{display:none}

/* Einblenden: wwReviews steht in shell_meta_ids und bekommt vom Theme keinen
   col_class-Wrapper, in dem die reveal-Klasse sonst sitzt -- die Renderer
   setzen sie an der Zelle. Leichte Staffelung, aber kurz gehalten: der Track
   scrollt, die hinteren Karten sieht ohnehin niemand hochfahren. */
.js .ww-reviews__cell:nth-child(2){transition-delay:.08s}
.js .ww-reviews__cell:nth-child(3){transition-delay:.16s}
.js .ww-reviews__cell:nth-child(n+4){transition-delay:.24s}

/* Testimonials ("Das sagen meine Kundinnen") */
.ww-testimonials{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.5rem}
.ww-testimonial{position:relative; margin:0; background:#fff; border-radius:var(--ww-radius); padding:1.6rem 1.5rem 1.4rem 2.6rem; box-shadow:0 6px 20px rgba(42,28,33,.06)}
.ww-testimonial::before{
  content:""; position:absolute; left:1rem; top:1.3rem; width:1.6rem; height:1.6rem;
  background:url("../img/quotes.webp") left top/contain no-repeat; opacity:.8;
}
.ww-testimonial__quote{font-style:italic}
.ww-testimonial cite{display:block; margin-top:.8rem; font-weight:600; font-style:normal; color:var(--ww-red)}

/* ============================================================
   pageToc -- Inhaltsverzeichnis der Unterseiten (Blog-Index).
   Uebernommen aus Emergetiks "Ideenwelt", auf die WW-Palette gebracht.
   Zwei Varianten ueber das Attribut toc_style:
     table -> Kachelraster (hier auf /blog im Einsatz)
     list  -> Liste mit rechts umflossenem Vorschaubild
   Das Vorschaubild liefert getPageImage() (titleimage der Unterseite,
   sonst erstes Bild im Seiteninhalt).
   ============================================================ */
.toc-item .page-meta{letter-spacing:.06em}
.toc-item h3{margin-bottom:.3em; font-size:1.25rem; text-align:left}
.toc-item h3::after{display:none}          /* keine Goldlinie unter Kacheltiteln */
.toc-item h3 a{color:var(--ww-red)}
.toc-item p{margin-bottom:.5rem; line-height:1.45; color:var(--ww-ink-muted); font-size:.94rem}

/* Variante "table": Kachelraster */
.toc-table .toc-item{margin-bottom:1.8rem}
.toc-table .toc-image{
  display:block; margin-bottom:.85rem; overflow:hidden;
  border-radius:var(--ww-radius); aspect-ratio:16 / 9; background:var(--ww-sand);
}
.toc-table .toc-image img{
  display:block; width:100%; height:100%; object-fit:cover; object-position:center;
  transition:opacity .2s ease, transform .25s ease;
}
.toc-table .toc-image:hover img{opacity:.92; transform:scale(1.02)}

/* Variante "list": Vorschaubild rechts, vom Text umflossen */
.toc-list{list-style:none; margin:0; padding-left:0}
.toc-list .toc-item{
  --toc-thumb-h:6.1rem;
  overflow:hidden;               /* schliesst den Float ein */
  margin-bottom:1.75rem;
}
.toc-list .toc-item::before{content:none}   /* kein ww-Bullet in dieser Liste */
.toc-list .toc-thumb{
  float:right; width:calc(var(--toc-thumb-h) * 16 / 9); max-width:45%;
  aspect-ratio:16 / 9; margin:.15rem 0 .75rem 1.25rem; overflow:hidden;
  border-radius:var(--ww-radius); background:var(--ww-sand);
}
.toc-list .toc-thumb img{
  display:block; width:100%; height:100%; object-fit:cover; object-position:center;
  transition:opacity .2s ease, transform .25s ease;
}
.toc-list .toc-thumb:hover img{opacity:.92; transform:scale(1.02)}
@media (max-width:575.98px){
  .toc-list .toc-thumb{float:none; width:100%; max-width:100%; margin:0 0 .75rem 0}
}

/* Blog-Index */
.ww-blogindex{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.7rem}
.ww-blogcard{display:block; text-decoration:none !important; color:inherit; background:#fff; border-radius:var(--ww-radius); overflow:hidden; box-shadow:0 6px 20px rgba(42,28,33,.08)}
.ww-blogcard__img img{aspect-ratio:16/11; object-fit:cover; width:100%}
.ww-blogcard__body{padding:1.1rem 1.3rem}
.ww-blogcard__date{font-size:.75rem; color:var(--ww-ink-muted); text-transform:uppercase; letter-spacing:.06em}
.ww-blogcard__title{margin:.3rem 0 .5rem; font-size:1.15rem}
.ww-blogcard__body p{font-size:.92rem; color:var(--ww-ink-muted); margin:0}

/* Video / Gallery */
.ww-video{width:100%; border-radius:var(--ww-radius); background:#000}

/* ZMSVideo (Kern-ZMS-Typ, Products/zms/conf/metaobj_manager) bringt eigene
   Klassen fuer die Seitenverhaeltnis-Box mit (embed-responsive-*) -- das war
   Bootstrap-4-Vokabular, Bootstrap 5 hat dieses Utility ersatzlos durch
   .ratio/.ratio-16x9 ersetzt. Ohne eigenes CSS haette das Video also gar
   keine Groesse. Hier nach dem alten Bootstrap-4-Muster nachgebaut (Padding-
   Trick fuer feste Seitenverhaeltnisse), weil ZMSVideo.standard_html ein
   projektfremdes Kern-Template ist und nicht angepasst wird. */
.video-wrapper{margin:1em 0}
.video-wrapper.elastic-video{border-radius:var(--ww-radius); overflow:hidden; box-shadow:0 6px 20px rgba(42,28,33,.08)}
.embed-responsive{position:relative; display:block; width:100%; padding:0; overflow:hidden}
.embed-responsive-16by9{padding-top:56.25%}
.embed-responsive-item{position:absolute; top:0; left:0; width:100%; height:100% !important; border:0}
/* Das Preview-Screen-<img> von ZMSVideo (nur bei provider=fileupload/attr img
   gesetzt) bekommt vom Kern-Template width="videoWidth" height="videoHeight"
   als HTML-Attribute -- OHNE die Weiche, die iframe/video daneben bekommen
   ([None,videoWidth][videoWidth>0]). Bleiben videoWidth/videoHeight leer
   (0), rendert das Bild folglich bei width="0" height="0": unsichtbar, und
   die 16:9-Box (.embed-responsive-16by9) bleibt als leerer Platzhalter
   stehen -- daher der "sehr hohe leere Bereich" ohne jeden sichtbaren
   Inhalt, in ZMI-Vorschau wie Frontend gleichermassen. Das Bild traegt außerdem
   keine eigene Positionierungsklasse (nur video/iframe bekommen
   "embed-responsive-item"), muss also ueber den Tag-Selektor eingebunden
   werden. object-fit:cover schlaegt die HTML-Attribute in jedem Fall, ganz
   unabhaengig davon, ob videoWidth/videoHeight befuellt sind. */
.embed-responsive > img{
  position:absolute; top:0; left:0; width:100% !important; height:100% !important;
  object-fit:cover; z-index:1; margin:0;
}
/* Play-Button-Kreis auf dem Vorschaubild -- macht auf den ersten Blick klar,
   dass ein Klick das Video startet. Liegt auf .embed-responsive (nicht auf
   dem <img> selbst: <img> ist ein Replaced Element, ::after darauf wird von
   keinem Browser zuverlaessig gerendert). pointer-events:none reicht den
   Klick durch, er trifft weiterhin das <img> darunter, das den
   onclick-Handler traegt. Ausgeblendet, sobald web.js dem Wrapper nach dem
   Klick die Klasse is-playing gibt (siehe dortiger Kommentar) -- ohne das
   bliebe der Play-Kreis ueber dem laufenden Video stehen. */
.video-wrapper.fileupload .embed-responsive::after{
  content:"\f04b"; font-family:'Font Awesome 6 Free'; font-weight:900; font-style:normal;
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:4.5rem; height:4.5rem; line-height:4.5rem; text-align:center; font-size:1.7rem;
  color:#fff; background:rgba(20,12,15,.55); border-radius:50%;
  box-shadow:0 6px 20px rgba(20,12,15,.35);
  z-index:2; pointer-events:none; transition:background .15s, transform .15s;
}
.video-wrapper.fileupload:hover .embed-responsive::after{
  background:var(--ww-red); transform:translate(-50%,-50%) scale(1.08);
}
.video-wrapper.fileupload.is-playing .embed-responsive::after{display:none}
.video-wrapper p.description{margin:.6rem 0 0; font-size:.9rem; color:var(--ww-ink-muted); font-style:italic}
.ww-gallery{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:.6rem}
.ww-gallery img{aspect-ratio:1/1; object-fit:cover; border-radius:4px}

/* Rohes HTML (Beckenschaukel) */
.ww-rawhtml table{width:100%; border-collapse:collapse}
.ww-rawhtml td, .ww-rawhtml th{padding:.5rem .7rem; text-align:left; border-bottom:1px solid var(--ww-sand-deep)}

/* ============================================================
   KONTAKTFORMULAR
   ============================================================ */
.ww-form-note{background:#fff3cd; border:1px solid #f0d998; color:#7a5b00; padding:.6rem .9rem; border-radius:4px; font-size:.85rem; max-width:none}
.ww-contactform{max-width:640px; display:flex; flex-direction:column; gap:1rem; margin-top:1rem}
.ww-form-row{display:flex; gap:1rem; flex-wrap:wrap}
.ww-form-row label{flex:1 1 240px}
.ww-contactform label{display:flex; flex-direction:column; gap:.35rem; font-size:.9rem; font-weight:600; color:var(--ww-plum)}
.ww-contactform input[type=text], .ww-contactform input[type=email],
.ww-contactform input[type=tel], .ww-contactform textarea{
  font:inherit; padding:.65rem .8rem; border:1px solid var(--ww-sand-deep); border-radius:4px; background:#fff; color:var(--ww-ink)
}
.ww-contactform input:focus, .ww-contactform textarea:focus{
  outline:none; border-color:var(--ww-red); box-shadow:0 0 0 .2rem rgba(226,0,32,.12)
}
.ww-form-check{flex-direction:row !important; align-items:flex-start; gap:.6rem !important; font-weight:400 !important; font-size:.85rem !important}
.ww-form-check input{margin-top:.2rem}
.ww-form-required{font-size:.78rem; color:var(--ww-ink-muted); max-width:none}

/* wwContactForm -- Feldfehler, Hinweise, Erfolgsmeldung, ALTCHA-Widget */
.ww-contactform-wrap{margin-top:1rem}
.ww-contactform .has-error input, .ww-contactform .has-error textarea{border-color:var(--ww-red)}
.ww-contactform .ww-field-error{display:block; color:var(--ww-red); font-size:.8rem; font-weight:400; margin-top:.25rem}
.ww-form-hint{font-size:.82rem; color:var(--ww-ink-muted); margin:-.4rem 0 0; max-width:none}
.ww-contactform button[type=submit]{align-self:flex-start; cursor:pointer}
.ww-altcha{margin:.2rem 0}
.ww-contactform-success{
  background:var(--ww-sand); border-radius:var(--ww-radius); padding:1.6rem 1.4rem; max-width:640px; margin-top:1rem;
}
.ww-contactform-success p{margin:0; font-size:1.02rem}
.ww-contactform-success i{color:var(--ww-red); margin-right:.45rem}

/* ============================================================
   FOOTER
   ============================================================ */
.ww-footer a{color:var(--ww-ink)}
.ww-footer a:hover{color:var(--ww-red-dark)}
.ww-footer__widgets{background:var(--ww-bar-bg); color:var(--ww-ink)}
.ww-footer__widgets .ww-container{display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; padding-block:3rem}
.ww-footer__logo{display:flex; align-items:center; justify-content:center}
.ww-footer .ww-goldline{background-image:none; border-top:1px solid var(--ww-gold-dark); height:0; width:80px; opacity:1}
.ww-footer__legal{background:var(--ww-plum); color:#e9dfe1; padding-block:1.2rem; font-size:.8rem}
.ww-footer__legal a{color:#e9dfe1; margin:0 .1rem}
.ww-footer__legal a:hover{color:var(--ww-gold)}
.ww-footer__legal .ww-container{display:flex; justify-content:space-between; align-items:center; flex-wrap:nowrap; gap:1.5rem; overflow-x:auto}
.ww-footer__legal p{white-space:nowrap; margin:0; flex-shrink:0}
.ww-footer__social{list-style:none; display:flex; gap:.8rem; margin:0; padding:0; flex-shrink:0}
.ww-footer__social a{display:inline-flex}

@media (max-width: 760px){
  .ww-footer__widgets .ww-container{grid-template-columns:1fr; text-align:center}
  .ww-footer__logo{order:-1}
  .ww-row:has(.ww-col--article_box){flex-direction:column}
}

/* ============================================================
   wwQuote (article-quote/quote-block): quotes.webp als Hintergrundgrafik
   oben links, mit leichter Ueberlappung zur Textecke, unter dem Text. Das
   fa-quote-left-Icon ist dafuer aus renderWwQuote raus -- ein Icon UND eine
   Grafik gleichzeitig waere redundant gewesen.
   ============================================================ */
.article-quote, .quote-block{position:relative; padding-top:1.75rem}
.article-quote::before, .quote-block::before{
  content:""; position:absolute; top:2px; left:-.5rem; width:56px; height:49px;
  background:url("../img/quotes.webp") left top/contain no-repeat; z-index:0;
}
.article-quote .quote-content, .quote-block .quote-content{position:relative; z-index:1}

/* ============================================================
   btCarousel: grosse rote Doppelpfeile statt der auf hellem
   Kartenhintergrund unsichtbaren weissen Bootstrap-Standard-Icons, plus
   sauber im Karussell-Container verankerter Zoom-Button.
   ============================================================ */
.carousel-control-prev, .carousel-control-next{opacity:1}
.carousel-control-prev i, .carousel-control-next i{
  font-size:2.75rem; color:var(--ww-red); text-shadow:0 2px 8px rgba(0,0,0,.15);
  transition:color .15s, transform .15s;
}
.carousel-control-prev:hover i, .carousel-control-next:hover i{color:var(--ww-red-dark); transform:scale(1.08)}

.bt-carousel-title{margin-bottom:1.2rem}
.bt-carousel-media{position:relative}
.bt-carousel-zoom{
  position:absolute; right:1rem; bottom:1rem; z-index:5;
  width:2.75rem; height:2.75rem; border-radius:50%; border:0; cursor:pointer;
  background:#fff; color:var(--ww-red); display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; box-shadow:0 4px 14px rgba(42,28,33,.18);
  transition:color .15s, transform .15s;
}
.bt-carousel-zoom:hover{color:var(--ww-red-dark); transform:scale(1.08)}

/* ============================================================
   EINBLENDEN BEIM SCROLLEN + BACK-TO-TOP
   ============================================================ */

/* .reveal setzt standard_html an jedes Seiten-Element, die Renderscripts
   zusaetzlich an ihre Spalten. Sichtbar wird es erst, wenn web.js die
   Klasse is-visible setzt -- greift nur bei aktivem JS (<html class="js">),
   ohne JS bleibt alles normal sichtbar.
   Bewusst sanfter als bei Emergetik: kuerzerer Weg (14px statt 24px),
   laengere Dauer (.9s statt .7s) und eine weich auslaufende Kurve. */
.js .reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .9s cubic-bezier(.22,.61,.36,1),
             transform .9s cubic-bezier(.22,.61,.36,1);
  will-change:opacity, transform;
}
.js .reveal.is-visible{opacity:1; transform:none}
/* Nebeneinanderliegende Spalten einer Zeile leicht versetzt */
.js .row > .reveal:nth-child(2){transition-delay:.10s}
.js .row > .reveal:nth-child(3){transition-delay:.20s}
.js .row > .reveal:nth-child(4){transition-delay:.30s}
@media (prefers-reduced-motion: reduce){
  .js .reveal{opacity:1; transform:none; transition:none}
}

/* Zurueck nach oben -- rund, in Markenrot, faedelt sich erst ab 400px
   Scrolltiefe ein. visibility mit in die Transition, damit der Button im
   ausgeblendeten Zustand keine Klicks abfaengt. */
#backToTop{
  position:fixed; right:1.5rem; bottom:1.5rem; z-index:1040;
  width:46px; height:46px; border-radius:50%; border:0; cursor:pointer;
  background:var(--ww-red); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:1.05rem; box-shadow:0 6px 20px rgba(42,28,33,.18);
  opacity:0; visibility:hidden; transform:translateY(8px) scale(.95);
  transition:opacity .25s, transform .25s, visibility .25s, background .15s;
}
#backToTop.is-visible{opacity:1; visibility:visible; transform:none}
#backToTop:hover{background:var(--ww-red-dark); transform:scale(1.08)}
@media (prefers-reduced-motion: reduce){
  #backToTop{transition:opacity .25s, visibility .25s, background .15s}
  #backToTop:hover, #backToTop.is-visible{transform:none}
}

/* Sprungziele (wwSection.anchor). Der Versatz haelt das Ziel unter der
   klebenden Navigationsleiste hervor -- ohne scroll-margin-top landet die
   Ueberschrift beim Anker-Sprung hinter dem Header. */
.ww-section[id], .ww-anchor{scroll-margin-top:6rem}
.ww-anchor{display:block; height:0; overflow:hidden}

/* --- Ausnahme: keine Goldlinie unter dem Titel der FAQ-Seite --------------
   Auf Wunsch nur fuer /haeufige-fragen/. Der Haken daran: das Theme gibt
   keine sprechende Klasse an den <body>, nur die Zope-id -- die haelt, solange
   die Seite nicht neu angelegt wird. Soll die Goldlinie site-weit weg, ist die
   richtige Stelle stattdessen die Regel h1::after, h2::after weiter oben. */
body#zmsid_e1061 .ww-pageheader h1::after{content:none}