body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul,.content-gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li,.content-gallery>ul li{float:left}.ce_gallery>ul li.col_first,.content-gallery>ul li.col_first{clear:left}.float_left,.media--left>figure{float:left}.float_right,.media--right>figure{float:right}.block{overflow:hidden}.media{display:flow-root}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both}
@media (max-width:767px){#wrapper{margin:0;width:auto}#container{padding-left:0;padding-right:0}#main,#left,#right{float:none;width:auto}#left{right:0;margin-left:0}#right{margin-right:0}}img{max-width:100%;height:auto}.audio_container audio{max-width:100%}.video_container video{max-width:100%;height:auto}.aspect,.responsive{position:relative;height:0}.aspect iframe,.responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%}.aspect--16\:9,.responsive.ratio-169{padding-bottom:56.25%}.aspect--16\:10,.responsive.ratio-1610{padding-bottom:62.5%}.aspect--21\:9,.responsive.ratio-219{padding-bottom:42.8571%}.aspect--4\:3,.responsive.ratio-43{padding-bottom:75%}.aspect--3\:2,.responsive.ratio-32{padding-bottom:66.6666%}.aspect--9\:16,.responsive.ratio-916{padding-bottom:177.7777%}.aspect--1\:1,.responsive.ratio-11{padding-bottom:100%}
.mod_visitors .invisible {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    float: left;
	width:0px;
	height:0px;
}
/**
 * CLICKPRESS CSS-Grid
 * @author: Stefan Schulz-Lauterbach
 *
 * thanks to Dinko Skopljak for co-working
 */
.justify-items-start {
  justify-items: start;
}

.justify-items-center {
  justify-items: center;
}

.justify-items-end {
  justify-items: end;
}

.justify-items-stretch {
  justify-items: stretch;
}

.content-start {
  align-content: start;
}

.content-center {
  align-content: center;
}

.content-end {
  align-content: end;
}

.items-start {
  align-items: start;
}

.items-center {
  align-items: center;
}

.items-end {
  align-items: end;
}

.items-stretch {
  align-items: stretch;
}

.items-baseline {
  align-items: baseline;
}

[class*=grid_] {
  display: grid;
  grid-gap: 1rem;
}
[class*=grid_] > .block {
  margin-bottom: 0;
}

@media (min-width: 576px) {
  .grid_mobile_100 {
    grid-template-columns: 1fr;
  }
  .grid_mobile_50_50 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid_mobile_33_33_33 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid_mobile_25_25_25_25 {
    grid-template-columns: repeat(4, 1fr);
  }
  .grid_mobile_75_25 {
    grid-template-columns: 3fr 1fr;
  }
  .grid_mobile_25_75 {
    grid-template-columns: 1fr 3fr;
  }
  .grid_mobile_66_33 {
    grid-template-columns: 2fr 1fr;
  }
  .grid_mobile_33_66 {
    grid-template-columns: 1fr 2fr;
  }
  .grid_mobile_60_40 {
    grid-template-columns: 3fr 2fr;
  }
  .grid_mobile_40_60 {
    grid-template-columns: 2fr 3fr;
  }
  .grid_mobile_50_25_25 {
    grid-template-columns: 2fr 1fr 1fr;
  }
  .grid_mobile_25_50_25 {
    grid-template-columns: 1fr 2fr 1fr;
  }
  .grid_mobile_25_25_50 {
    grid-template-columns: 1fr 1fr 2fr;
  }
  .grid_mobile_40_30_30 {
    grid-template-columns: 4fr 3fr 3fr;
  }
  .grid_mobile_30_40_30 {
    grid-template-columns: 3fr 4fr 3fr;
  }
  .grid_mobile_30_30_40 {
    grid-template-columns: 3fr 3fr 4fr;
  }
  .gap_mobile_0 {
    grid-gap: 0;
  }
  .gap_mobile_1 {
    grid-gap: 1rem;
  }
  .gap_mobile_2 {
    grid-gap: 2rem;
  }
  .gap_mobile_3 {
    grid-gap: 3rem;
  }
  .gap_mobile_4 {
    grid-gap: 4rem;
  }
  .gap_mobile_5 {
    grid-gap: 5rem;
  }
  .gap_mobile_6 {
    grid-gap: 6rem;
  }
  .gap_mobile_7 {
    grid-gap: 7rem;
  }
  .gap_mobile_8 {
    grid-gap: 8rem;
  }
  .gap_mobile_9 {
    grid-gap: 9rem;
  }
  .gap_mobile_10 {
    grid-gap: 10rem;
  }
  .gap_mobile_11 {
    grid-gap: 11rem;
  }
  .gap_mobile_12 {
    grid-gap: 12rem;
  }
}
@media (min-width: 768px) {
  .grid_tablet_100 {
    grid-template-columns: 1fr;
  }
  .grid_tablet_50_50 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid_tablet_33_33_33 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid_tablet_25_25_25_25 {
    grid-template-columns: repeat(4, 1fr);
  }
  .grid_tablet_75_25 {
    grid-template-columns: 3fr 1fr;
  }
  .grid_tablet_25_75 {
    grid-template-columns: 1fr 3fr;
  }
  .grid_tablet_66_33 {
    grid-template-columns: 2fr 1fr;
  }
  .grid_tablet_33_66 {
    grid-template-columns: 1fr 2fr;
  }
  .grid_tablet_60_40 {
    grid-template-columns: 3fr 2fr;
  }
  .grid_tablet_40_60 {
    grid-template-columns: 2fr 3fr;
  }
  .grid_tablet_50_25_25 {
    grid-template-columns: 2fr 1fr 1fr;
  }
  .grid_tablet_25_50_25 {
    grid-template-columns: 1fr 2fr 1fr;
  }
  .grid_tablet_25_25_50 {
    grid-template-columns: 1fr 1fr 2fr;
  }
  .grid_tablet_40_30_30 {
    grid-template-columns: 4fr 3fr 3fr;
  }
  .grid_tablet_30_40_30 {
    grid-template-columns: 3fr 4fr 3fr;
  }
  .grid_tablet_30_30_40 {
    grid-template-columns: 3fr 3fr 4fr;
  }
  .grid_tablet_20_40_40 {
    grid-template-columns: 1fr 2fr 2fr;
  }
  .grid_tablet_40_20_40 {
    grid-template-columns: 2fr 1fr 2fr;
  }
  .grid_tablet_40_40_20 {
    grid-template-columns: 2fr 2fr 1fr;
  }
  .gap_tablet_0 {
    grid-gap: 0;
  }
  .gap_tablet_1 {
    grid-gap: 1rem;
  }
  .gap_tablet_2 {
    grid-gap: 2rem;
  }
  .gap_tablet_3 {
    grid-gap: 3rem;
  }
  .gap_tablet_4 {
    grid-gap: 4rem;
  }
  .gap_tablet_5 {
    grid-gap: 5rem;
  }
  .gap_tablet_6 {
    grid-gap: 6rem;
  }
  .gap_tablet_7 {
    grid-gap: 7rem;
  }
  .gap_tablet_8 {
    grid-gap: 8rem;
  }
  .gap_tablet_9 {
    grid-gap: 9rem;
  }
  .gap_tablet_10 {
    grid-gap: 10rem;
  }
  .gap_tablet_11 {
    grid-gap: 11rem;
  }
  .gap_tablet_12 {
    grid-gap: 12rem;
  }
}
@media (min-width: 992px) {
  .grid_desktop_100 {
    grid-template-columns: 1fr;
  }
  .grid_desktop_50_50 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid_desktop_50_25_25 {
    grid-template-columns: 2fr 1fr 1fr;
  }
  .grid_desktop_33_33_33 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid_desktop_75_25 {
    grid-template-columns: 3fr 1fr;
  }
  .grid_desktop_25_75 {
    grid-template-columns: 1fr 3fr;
  }
  .grid_desktop_66_33 {
    grid-template-columns: 2fr 1fr;
  }
  .grid_desktop_60_40 {
    grid-template-columns: 3fr 2fr;
  }
  .grid_desktop_40_60 {
    grid-template-columns: 2fr 3fr;
  }
  .grid_desktop_33_66 {
    grid-template-columns: 1fr 2fr;
  }
  .grid_desktop_50_25_25 {
    grid-template-columns: 2fr 1fr 1fr;
  }
  .grid_desktop_40_30_30 {
    grid-template-columns: 4fr 3fr 3fr;
  }
  .grid_desktop_50_25_25 {
    grid-template-columns: 2fr 1fr 1fr;
  }
  .grid_desktop_25_50_25 {
    grid-template-columns: 1fr 2fr 1fr;
  }
  .grid_desktop_25_25_50 {
    grid-template-columns: 1fr 1fr 2fr;
  }
  .grid_desktop_40_30_30 {
    grid-template-columns: 4fr 3fr 3fr;
  }
  .grid_desktop_30_40_30 {
    grid-template-columns: 3fr 4fr 3fr;
  }
  .grid_desktop_30_30_40 {
    grid-template-columns: 3fr 3fr 4fr;
  }
  .grid_desktop_20_40_40 {
    grid-template-columns: 1fr 2fr 2fr;
  }
  .grid_desktop_40_20_40 {
    grid-template-columns: 2fr 1fr 2fr;
  }
  .grid_desktop_40_40_20 {
    grid-template-columns: 2fr 2fr 1fr;
  }
  .grid_desktop_25_25_25_25 {
    grid-template-columns: repeat(4, 1fr);
  }
  .grid_desktop_40_20_20_20 {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
  .grid_desktop_20_40_20_20 {
    grid-template-columns: 1fr 2fr 1fr 1fr;
  }
  .grid_desktop_20_20_40_20 {
    grid-template-columns: 1fr 1fr 2fr 1fr;
  }
  .grid_desktop_20_20_20_40 {
    grid-template-columns: 1fr 1fr 1fr 2fr;
  }
  .grid_desktop_20_20_20_20_20 {
    grid-template-columns: repeat(5, 1fr);
  }
  .gap_desktop_0 {
    grid-gap: 0;
  }
  .gap_desktop_1 {
    grid-gap: 1rem;
  }
  .gap_desktop_2 {
    grid-gap: 2rem;
  }
  .gap_desktop_3 {
    grid-gap: 3rem;
  }
  .gap_desktop_4 {
    grid-gap: 4rem;
  }
  .gap_desktop_5 {
    grid-gap: 5rem;
  }
  .gap_desktop_6 {
    grid-gap: 6rem;
  }
  .gap_desktop_7 {
    grid-gap: 7rem;
  }
  .gap_desktop_8 {
    grid-gap: 8rem;
  }
  .gap_desktop_9 {
    grid-gap: 9rem;
  }
  .gap_desktop_10 {
    grid-gap: 10rem;
  }
  .gap_desktop_11 {
    grid-gap: 11rem;
  }
  .gap_desktop_12 {
    grid-gap: 12rem;
  }
}

/*# sourceMappingURL=clickpress-grid.css.map */

#colorbox,#cboxOverlay,#cboxWrapper{position:absolute;top:0;left:0;z-index:9999;overflow:hidden;-webkit-transform:translate3d(0,0,0)}#cboxWrapper{max-width:none}#cboxOverlay{position:fixed;width:100%;height:100%}#cboxMiddleLeft,#cboxBottomLeft{clear:left}#cboxContent{position:relative}#cboxLoadedContent{overflow:auto;-webkit-overflow-scrolling:touch}#cboxTitle{margin:0}#cboxLoadingOverlay,#cboxLoadingGraphic{position:absolute;top:0;left:0;width:100%;height:100%}#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow{cursor:pointer}.cboxPhoto{float:left;margin:auto;border:0;display:block;max-width:none;-ms-interpolation-mode:bicubic}.cboxIframe{width:100%;height:100%;display:block;border:0;padding:0;margin:0}#colorbox,#cboxContent,#cboxLoadedContent{box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box}#cboxOverlay{background:#000;opacity:.9;filter:alpha(opacity = 90)}#colorbox{outline:0}#cboxContent{margin-top:20px;background:#000}.cboxIframe{background:#fff}#cboxError{padding:50px;border:1px solid #ccc}#cboxLoadedContent{border:5px solid #000;background:#fff}#cboxTitle{position:absolute;top:-20px;left:0;color:#ccc}#cboxCurrent{position:absolute;top:-20px;right:0;color:#ccc}#cboxLoadingGraphic{background:url(../../assets/colorbox/images/loading.gif) no-repeat center center}#cboxPrevious,#cboxNext,#cboxSlideshow,#cboxClose{border:0;padding:0;margin:0;overflow:visible;width:auto;background:0 0}#cboxPrevious:active,#cboxNext:active,#cboxSlideshow:active,#cboxClose:active{outline:0}#cboxSlideshow{position:absolute;top:-20px;right:90px;color:#fff}#cboxPrevious{position:absolute;top:50%;left:5px;margin-top:-32px;background:url(../../assets/colorbox/images/controls.png) no-repeat top left;width:28px;height:65px;text-indent:-9999px}#cboxPrevious:hover{background-position:bottom left}#cboxNext{position:absolute;top:50%;right:5px;margin-top:-32px;background:url(../../assets/colorbox/images/controls.png) no-repeat top right;width:28px;height:65px;text-indent:-9999px}#cboxNext:hover{background-position:bottom right}#cboxClose{position:absolute;top:5px;right:5px;display:block;background:url(../../assets/colorbox/images/controls.png) no-repeat top center;width:38px;height:19px;text-indent:-9999px}#cboxClose:hover{background-position:bottom center}
.content-slider{overflow:hidden;visibility:hidden;position:relative}.slider-wrapper{overflow:hidden;position:relative}.slider-wrapper>*{float:left;width:100%;position:relative}.slider-control{height:30px;position:relative}.slider-control a,.slider-control .slider-menu{position:absolute;top:9px;display:inline-block}.slider-control .slider-prev{left:0}.slider-control .slider-next{right:0}.slider-control .slider-menu{top:0;width:50%;left:50%;margin-left:-25%;font-size:27px;text-align:center}.slider-control .slider-menu b{color:#bbb;cursor:pointer}.slider-control .slider-menu b.active{color:#666}
/* =========================================================================
   WortBühne — lokale Font-Definitionen
   Alle Webfonts liegen unter files/themes/wortbuehne/fonts/.
   Heruntergeladen via scripts/download-fonts.sh (gwfh.mranftl.com → woff2).
   font-display: swap → Text wird sofort mit Fallback gerendert,
                         dann nahtlos auf den echten Font geswappt.
   ========================================================================= */

/* ---------- Bebas Neue (Display, Hero-Headlines) ---------- */
@font-face {
  font-family: 'Bebas Neue';
  src: url('../../files/themes/wortbuehne/fonts/bebas-neue-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Barlow Condensed (Display-Alt, Nav, Buttons, Section-H2/H3) ---------- */
@font-face {
  font-family: 'Barlow Condensed';
  src: url('../../files/themes/wortbuehne/fonts/barlow-condensed-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow Condensed';
  src: url('../../files/themes/wortbuehne/fonts/barlow-condensed-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow Condensed';
  src: url('../../files/themes/wortbuehne/fonts/barlow-condensed-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Libre Baskerville (Body) ---------- */
@font-face {
  font-family: 'Libre Baskerville';
  src: url('../../files/themes/wortbuehne/fonts/libre-baskerville-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Libre Baskerville';
  src: url('../../files/themes/wortbuehne/fonts/libre-baskerville-400italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Libre Baskerville';
  src: url('../../files/themes/wortbuehne/fonts/libre-baskerville-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* =========================================================================
   WortBühne — Theme-Stylesheet (One-Pager)
   Basis: Logo-Manual mit Farbenspiel-Konzept (Seite 3 des Manuals).
   Jede Section nutzt ein eigenes harmonierendes Farbpaar, das beim Scrollen
   visuell durchwechselt — wie ein Buchcover-Stack im Verlag.
   ========================================================================= */

/* Lokale Font-Definitionen — kein CDN-Roundtrip, DSGVO-konform.
   Files liegen unter files/themes/wortbuehne/fonts/, geladen
   via scripts/download-fonts.sh. */
@import url('/files/themes/wortbuehne/css/fonts.css');

/* Clickpress Grid stellt sein eigenes CSS unter public/bundles/contaoclickpressgrid/
   bereit. Wir laden es hier zentral, damit die grid_*-Klassen wirken. */
@import url('/bundles/contaoclickpressgrid/clickpress-grid.css');

/* ---------------------------------------------------- Reset / Foundations */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h); /* Sticky-Header-Offset bei Anchor-Sprung */
}
body {
  margin: 0;
  background: var(--color-cream);
  color: var(--color-navy);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: opacity 0.2s; }
a:hover { opacity: 0.7; }

/* Tastatur-Fokus: deutlicher Indikator fuer Accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-terracotta);
  outline-offset: 3px;
  opacity: 1;
}

button { font: inherit; cursor: pointer; }

/* ----------------------------------------------------------- Custom Props */
:root {
  /* Wortbühne — Farbenspiel-Palette nach Logo-Manual */
  --color-cream:           #faf3e3;
  --color-cream-soft:      #fdf8eb;
  --color-navy:            #1d2d3a;
  --color-navy-soft:       #2a3e50;
  --color-terracotta:      #b8542d;
  --color-mustard:         #c19a3a;
  --color-mustard-soft:    #e9d896;
  --color-forest:          #2c4a3b;
  --color-forest-soft:     #3e6151;
  --color-sage:            #c5cdc7;
  --color-coral:           #e08864;
  --color-muted:           #6e7b8b;
  --color-rule:            #e8ddc6;

  --font-display: 'Bebas Neue', 'Barlow Condensed', Impact, sans-serif;
  --font-display-alt: 'Barlow Condensed', 'Bebas Neue', Impact, sans-serif;
  --font-body: 'Libre Baskerville', 'Iowan Old Style', Baskerville, Georgia, serif;

  --container-max: 1200px;
  --container-padding: clamp(1.25rem, 4vw, 3rem);

  --section-pad-y: clamp(5rem, 10vw, 9rem);
  --header-h: 88px;

  /* Vertikales Rhythmus-System */
  --rhythm-xs: 0.5rem;
  --rhythm-sm: 1rem;
  --rhythm-md: 1.75rem;
  --rhythm-lg: 3rem;
  --rhythm-xl: 5rem;
}

/* ------------------------------------------------------------ Typografie */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.05;
  margin: 0 0 var(--rhythm-md);
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  letter-spacing: 0.01em;
  margin-bottom: var(--rhythm-md);
}
h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  letter-spacing: 0.04em;
  margin-bottom: var(--rhythm-md);
}
h3 {
  font-family: var(--font-display-alt);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  letter-spacing: 0.06em;
  margin-bottom: var(--rhythm-sm);
}
h4 {
  font-family: var(--font-display-alt);
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: 0.1em;
  margin-bottom: var(--rhythm-sm);
}

/* Headline-Element direkt vor Text -> tighter spacing */
.ce_headline + .ce_text { margin-top: calc(var(--rhythm-md) * -0.5); }

p { margin: 0 0 var(--rhythm-sm); }
p:last-child { margin-bottom: 0; }
p.lead {
  font-style: italic;
  font-size: clamp(1.15rem, 1.6vw, 1.5rem);
  line-height: 1.5;
  max-width: 60ch;
  margin: 0 0 var(--rhythm-lg); /* left-aligned, konsistent mit Body */
}

/* Hero-Lead darf zentriert bleiben (sitzt visuell dort) */
.section--hero p.lead { margin: 0 auto var(--rhythm-lg); }

/* Aggressives Spacing-System — funktioniert auch mit Contao-Wrappern,
   weil wir die Margins direkt auf die ce_*-Elemente schreiben, nicht ueber
   adjacente Sibling-Selektoren. */

/* Jedes Inhaltselement bekommt Top-Margin. Erstes in der Section: 0. */
.section .ce_text,
.section .ce_headline,
.section .ce_image,
.section .ce_html,
.section .ce_list,
.section .ce_form,
.section .ce_module {
  margin-top: var(--rhythm-md);
}

/* Sub-Section-Headlines (h3) brauchen viel mehr Atem als normale Text-Bloecke,
   weil sie eine neue Phase einleiten. Zwei Wege fuer maximale Browser-Abdeckung: */
.section .ce_headline:has(h3) {
  margin-top: var(--rhythm-xl) !important;
  padding-top: var(--rhythm-md);
  border-top: 1px solid currentColor;
  border-top-color: rgba(255,255,255,0.08);
}
.section--cream-mustard .ce_headline:has(h3),
.section--mustard .ce_headline:has(h3),
.section--sage .ce_headline:has(h3) {
  border-top-color: rgba(29,45,58,0.12);
}

/* Erste H3 in einer Section (direkt nach H2) bekommt KEINE Trennlinie */
.section .ce_headline:first-of-type + .ce_text + .ce_headline:has(h3),
.section .ce_headline:has(h2) + .ce_text + .ce_headline:has(h3) {
  border-top: 0;
}

/* Fallback ohne :has — direkt h3-Element targeten */
.section h3 {
  margin-top: var(--rhythm-lg);
}
.section .ce_headline:first-of-type h3 { margin-top: 0; }

/* Erstes Element in der Section: kein Top-Margin (sonst kommt es weg von H2) */
.section > *:first-child,
.section .mod_article > *:first-child {
  margin-top: 0;
}

/* Erste H2-Headline: kein Top-Margin */
.section .ce_headline:first-of-type {
  margin-top: 0;
}

/* H3 mit Icon: Flex fuer korrekte Icon-Vertikalisierung */
.section h3 {
  display: flex;
  align-items: center;
  gap: 0.5em;
  flex-wrap: wrap;
}
.section h3 .bi,
.section h3 .bs-icon {
  flex-shrink: 0;
  margin-right: 0;
  font-size: 0.9em;
  opacity: 0.7;
}

/* Bottom-Margin von Textbloecken vor Sub-Headline reduzieren,
   damit die Top-Margin der Headline dominiert */
.section .ce_text p:last-child { margin-bottom: 0; }

strong, b { font-weight: 700; }
em, i { font-style: italic; }

ul, ol { margin: 0 0 1.5rem; padding-left: 1.25em; }
li { margin-bottom: 0.5rem; }

/* ============================================================ Sticky Header
   Bleibt beim Scrollen sichtbar, hat einen leicht durchsichtigen Cream-
   Hintergrund mit Backdrop-Blur fuer den modernen Glaslook.            */

#header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(250, 243, 227, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--color-rule);
  padding-block: 0.75rem;
  height: var(--header-h);
}

/* Fixed-Header → Body braucht Padding-Top, sonst rutscht der erste
   Section-Inhalt unter den Header */
body {
  padding-top: var(--header-h);
}

.site-header {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: nowrap;
}

/* Header inside Clickpress Grid — neuer Aufbau via cp_grid_start im header-insert.
   Max-Width auf saemtliche Wrapper, damit Logo + Navi im 1200-px-Container sitzen
   (egal wie tief Contao verschachtelt rendert). Hintergrund-/Border bleibt 100%. */
#header > *,
#header .inside,
#header .mod_article,
#header > .mod_article > .ce_cp_grid_start,
#header > .mod_article > .ce_cp_grid_start > .grid_start {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  width: 100%;
  box-sizing: border-box;
}

/* Footer analog */
#footer > *,
#footer .inside,
#footer .mod_article {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  width: 100%;
  box-sizing: border-box;
}

#header .ce_image,
#header .image_container,
#header .ce_html {
  margin: 0;
}
/* DEPRECATED: alte Logo-Constraints aus dem Custom-HTML-Header.
   Jetzt geht alles über die "brand"-Section weiter unten (line ~371). */
#header .brand-link {
  display: inline-block;
  color: var(--color-navy);
  transition: opacity 0.2s;
}
#header .brand-link:hover { opacity: 0.7; }

/* Onepage-Navigation rendering — horizontale Liste, keine Bullets */
#header .mod_onepage_navigation,
#header nav.mod_onepage_navigation,
#header .ce_module {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
}

#header nav ul,
#header .mod_onepage_navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 2vw, 2rem);
  align-items: center;
}

#header nav li,
#header .mod_onepage_navigation li {
  list-style: none;
  margin: 0;
  padding: 0;
}

#header nav a,
#header .mod_onepage_navigation a {
  font-family: var(--font-display-alt);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  color: var(--color-navy);
  text-decoration: none;
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s, opacity 0.2s;
}

#header nav a:hover,
#header nav a.active,
#header nav a.trail,
#header .mod_onepage_navigation a:hover,
#header .mod_onepage_navigation a.active,
#header .mod_onepage_navigation a.trail {
  border-bottom-color: var(--color-terracotta);
  text-decoration: none;
}

.site-header .brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.site-header .brand a {
  display: block;
  width: 78px;
  color: var(--color-navy);
  transition: opacity 0.2s;
}
.site-header .brand a:hover { opacity: 0.7; }
.site-header .brand img,
.site-header .brand svg { width: 100%; height: auto; display: block; }

/* Logo-Constraint nach Header-Refactor.
   Big-Hammer-Approach: jedes <img> im Header wird auf 65px Höhe
   geklemmt, egal welche Wrapper-Klassen Contao rendert. */
.site-header .ce_image.brand,
.site-header [class*="brand"],
.site-header figure.brand,
.site-header .image_container.brand {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

#header img,
header#header img,
.site-header img,
.mod_article.site-header img,
body #header .site-header img,
.site-header .ce_image img,
.site-header .ce_image.brand img,
.site-header [class*="brand"] img,
.site-header figure img,
.site-header .image_container img {
  height: 65px !important;
  width: auto !important;
  max-width: none !important;
  max-height: 65px !important;
  min-height: 0 !important;
  display: block;
  object-fit: contain;
}

/* Falls Contao das SVG inline (statt als <img>) ausgibt */
#header .site-header svg:not([class*="bi-"]),
.site-header [class*="brand"] svg {
  height: 65px !important;
  width: auto !important;
  max-height: 65px !important;
}

/* Klickpress-Grid: der eigentliche Grid-Container hat Klassen wie
   "grid_25_75", "grid_start" — NICHT "cp_grid_*". Der ce_cp_grid_start
   ist nur das outer <section>-Wrapping. align-items muss am inneren
   Grid-Container sitzen, sonst zentriert nichts. */
.site-header .grid_start,
.site-header [class*="grid_25_"],
.site-header [class*="grid_50_"],
.site-header [class*="grid_75_"],
#header .grid_start,
#header [class*="grid_25_"] {
  align-items: center !important;
}

/* Höhenkette schließen — sonst kollabieren die Wrapper zwischen
   .site-header (88px) und Grid-Container auf Inhaltshöhe und
   align-items:center hat keinen Spielraum. */
#header .mod_article,
#header .ce_cp_grid_start,
#header .ce_cp_grid_start > .grid_start,
#header section.ce_cp_grid_start,
#header > .mod_article > .ce_cp_grid_start {
  height: 100%;
}

/* Spaltenkinder vertikal flex-mittig — falls der Image-CE und der
   Module-CE in eigenen Wrappers sitzen, die ihre Höhe an die Spalte
   ranziehen. */
.site-header .ce_cp_column_start {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

/* Nav rechtsbündig: das ul innerhalb der OnePage-Nav an die rechte Kante */
.site-header .main-nav .level_1,
#header .main-nav .level_1,
#header [class*="onepage_navigation"] .level_1 {
  justify-content: flex-end;
}

/* ---------------------------------------------------------------
   Kontakt-Item in der OnePage-Nav als CTA-Button.
   Selector: li[data-onepage-link="kontakt"] — wird vom Bundle gerendert.
   Icon via CSS-mask-image (currentColor-aware, kein JS, kein Insert-Tag).
   --------------------------------------------------------------- */
.main-nav li[data-onepage-link="kontakt"] > a,
#header [data-onepage-link="kontakt"] > a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 1.4rem !important;
  background: var(--color-terracotta);
  color: var(--color-cream) !important;
  border-radius: 999px;
  border: 0 !important;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s;
}
.main-nav li[data-onepage-link="kontakt"] > a:hover,
.main-nav li[data-onepage-link="kontakt"] > a:focus-visible,
.main-nav li[data-onepage-link="kontakt"].active > a,
#header [data-onepage-link="kontakt"] > a:hover,
#header [data-onepage-link="kontakt"].active > a {
  background: var(--color-navy);
  color: var(--color-cream) !important;
  transform: translateY(-1px);
}
/* Underline-Akzent (kommt von .main-nav a::after) auf Kontakt-Button NICHT */
.main-nav li[data-onepage-link="kontakt"] > a::after,
#header [data-onepage-link="kontakt"] > a::after {
  display: none !important;
}

/* Envelope-Icon via mask-image — folgt currentColor automatisch */
.main-nav li[data-onepage-link="kontakt"] > a::before,
#header [data-onepage-link="kontakt"] > a::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4Zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2Zm13 2.383-4.708 2.825L15 11.105V5.383Zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741ZM1 11.105l4.708-2.897L1 5.383v5.722Z"/></svg>');
          mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4Zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2Zm13 2.383-4.708 2.825L15 11.105V5.383Zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741ZM1 11.105l4.708-2.897L1 5.383v5.722Z"/></svg>');
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}

.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 2vw, 2rem);
  align-items: center;
}
.main-nav li { margin: 0; }
.main-nav a {
  font-family: var(--font-display-alt);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  color: var(--color-navy);
  position: relative;
  padding: 0.25rem 0;
}
.main-nav a:hover,
.main-nav a:focus-visible,
.main-nav a.active,
.main-nav a.trail {
  opacity: 1;
  text-decoration: none;
}
.main-nav a.active::after,
.main-nav a:hover::after,
.main-nav li.active > a::after,
.main-nav li.active a::after,
#header [data-onepage-link].active > a::after,
#header li[class*="active"] > a::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -4px;
  height: 2px;
  background: var(--color-terracotta);
}
/* Bei der Kontakt-Pille kein Underline-Akzent */
.main-nav li[data-onepage-link="kontakt"].active > a::after,
.main-nav li[data-onepage-link="kontakt"] > a:hover::after {
  display: none !important;
}

/* Topmenü hart rechtsbündig (auch wenn Contao das Modul/HTML in Wrapper packt) */
.site-header,
#header > div,
#header .ce_html {
  width: 100%;
}
.site-header .main-nav,
#header .main-nav {
  margin-left: auto;
}
.main-nav ul {
  justify-content: flex-end;
}

/* Kontakt-CTA: Pill-Button. Selektor mit #header gewinnt gegen
   '#header nav a' (Spezifität 1,0,2). padding mit !important schlägt
   eventuelles Inline-Style aus DevTools-Tests. */
#header .main-nav .nav-cta,
.main-nav .nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.5rem !important;
  border: 0;
  background: var(--color-terracotta);
  color: var(--color-cream) !important;
  border-radius: 999px;
  font-family: var(--font-display-alt);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  line-height: 1;
  white-space: nowrap;
  transition: background 0.2s, transform 0.2s;
}
/* Border-Bottom vom #header nav a-Default neutralisieren */
#header .main-nav .nav-cta { border-bottom: 0 !important; }
.main-nav .nav-cta:hover,
.main-nav .nav-cta:focus-visible {
  background: var(--color-navy);
  color: var(--color-cream) !important;
  opacity: 1;
  transform: translateY(-1px);
}
.main-nav .nav-cta::after,
.main-nav .nav-cta.active::after,
.main-nav .nav-cta:hover::after { display: none; }

/* Icon nackt im Button — keine Plate */
.main-nav .nav-cta__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-cream);
}
.main-nav .nav-cta__icon svg { width: 100%; height: 100%; display: block; }
.main-nav .nav-cta__label { display: inline-block; }

/* Active-Zustand: eingedunkelt, clean */
.main-nav .nav-cta.active {
  background: var(--color-navy);
}

/* ============================================================== Burger-Menu
   Toggle erscheint < 992px, Overlay-Nav schiebt von rechts.                */
.menu-toggle {
  display: none;
  align-items: center;
  gap: 0.55rem;
  background: transparent;
  border: 0;
  padding: 0.5rem 0.75rem;
  margin-left: auto;
  color: var(--color-navy);
  font-family: var(--font-display-alt);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.85rem;
  cursor: pointer;
}
.menu-toggle__bars {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  width: 22px;
  height: 16px;
}
.menu-toggle__bars span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--color-navy);
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.2s;
}
.menu-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  display: none;
  background: transparent;
  border: 0;
  padding: 0.5rem;
  color: var(--color-cream);
  cursor: pointer;
  z-index: 2;
}

/* DEPRECATED: Burger-/Mobile-Overlay aus dem alten Custom-HTML-Header.
   Das neue OnePage-Nav-Modul hat keinen Burger — Mobile-Strategie unten
   ist „Logo + Kontakt-Pille only", Sektions-Links blenden bei <768px aus.
   Falls später Burger zurückkommt, hier ein eigenes <button> + JS bauen. */

/* === Tablet: Items kompakter, damit alles in den Header passt === */
@media (max-width: 1199.98px) {
  .main-nav .level_1 {
    gap: clamp(0.5rem, 1.2vw, 1rem);
  }
  .main-nav a {
    font-size: 0.85rem;
    letter-spacing: 0.12em;
  }
  .main-nav li[data-onepage-link="kontakt"] > a {
    padding: 0.55rem 1rem !important;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
  }
  .main-nav li[data-onepage-link="kontakt"] > a::before {
    width: 14px;
    height: 14px;
  }
  .site-header [class*="brand"] img {
    height: 55px !important;
  }
}

/* === Mobile (<768px): Section-Links versteckt im Burger, nur Logo +
   Burger + Kontakt-Pille im Header sichtbar === */
@media (max-width: 767.98px) {
  /* Grid auf 1fr auto: Logo links, Nav rechts */
  #header > .mod_article > .ce_cp_grid_start > .grid_start,
  #header .ce_cp_grid_start > [class*="grid_"] {
    grid-template-columns: auto 1fr !important;
    gap: 1rem;
  }
  /* Sektions-Items im Header verstecken — sichtbar nur im Overlay */
  .main-nav li:not([data-onepage-link="kontakt"]) {
    display: none;
  }
  .main-nav .level_1 {
    justify-content: flex-end;
    align-items: center;
  }
  .site-header [class*="brand"] img {
    height: 48px !important;
  }
  #header {
    padding-block: 0.5rem;
  }

  /* === Burger-Button === */
  .menu-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: var(--color-navy);
    margin-right: 0.5rem;
    z-index: 1001;
    position: relative;
  }
  .menu-toggle__bars {
    display: inline-flex;
    flex-direction: column;
    width: 24px;
    height: 18px;
    justify-content: space-between;
  }
  .menu-toggle__bars span {
    display: block;
    width: 100%;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.2s ease;
  }

  /* === Overlay-Open-State === */
  body.menu-open { overflow: hidden; }

  /* Overlay deckt ALLES ab — auch den fixed #header (z-index: 100).
     Vorher hatte ich #header bei menu-open auf z-index 999 hochgezogen,
     damit verschwand der X-Button hinter dem Header. */
  body.menu-open .main-nav,
  body.menu-open #header [class*="onepage_navigation"] {
    position: fixed;
    inset: 0;
    background: var(--color-navy);
    padding: 5rem 2rem 2rem;
    z-index: 1100;        /* > #header (100) und > eventuelle Cookiebar */
    overflow-y: auto;
  }
  body.menu-open .main-nav .level_1 {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    justify-content: flex-start;
  }
  body.menu-open .main-nav li:not([data-onepage-link="kontakt"]) {
    display: block;
    width: 100%;
  }
  body.menu-open .main-nav a {
    color: var(--color-cream);
    font-size: 1.4rem;
    letter-spacing: 0.14em;
  }
  body.menu-open .main-nav li[data-onepage-link="kontakt"] {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(243, 230, 207, 0.18);
    width: 100%;
  }
  body.menu-open .main-nav li[data-onepage-link="kontakt"] > a {
    background: var(--color-cream) !important;
    color: var(--color-navy) !important;
    font-size: 1.2rem;
    padding: 0.85rem 2rem !important;
  }
  body.menu-open .main-nav li[data-onepage-link="kontakt"] > a::before {
    background-color: var(--color-terracotta);
  }

  /* Burger zu X morphen — position:absolute relativ zum nav (das nach
     DOM-Move via JS bei body sitzt mit inset:0 = fullscreen). So bleibt
     das X innerhalb des Overlay-Stacking-Contexts und kann nicht von
     viewport-fixed Layern (Backend-Toolbar, Cookiebar etc.) verdeckt
     werden. */
  body.menu-open .menu-toggle {
    position: absolute !important;
    top: 1rem;
    right: 1rem;
    width: 48px;
    height: 48px;
    color: var(--color-cream) !important;
    border: 1px solid rgba(243, 230, 207, 0.35);
    border-radius: 50%;
    background: transparent;
    z-index: 9999 !important;
  }
  body.menu-open .menu-toggle:hover,
  body.menu-open .menu-toggle:focus-visible {
    background: rgba(243, 230, 207, 0.12);
  }
  body.menu-open .menu-toggle__bars {
    width: 22px;
    height: 16px;
  }
  body.menu-open .menu-toggle__bars span {
    background: var(--color-cream) !important;
    height: 2.5px;
  }
  body.menu-open .menu-toggle__bars span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  body.menu-open .menu-toggle__bars span:nth-child(2) { opacity: 0; }
  body.menu-open .menu-toggle__bars span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}

/* Burger ab 768px wieder unsichtbar */
@media (min-width: 768px) {
  .menu-toggle { display: none !important; }
}

/* Defensiv: Header-Höhe darf den Container niemals überlaufen */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}
#header,
.site-header,
#header > .mod_article,
#header .ce_cp_grid_start {
  max-width: 100%;
}
/* Nav-Module darf shrinken */
#header .main-nav,
#header .ce_module {
  min-width: 0;
}
.main-nav .level_1 {
  flex-wrap: wrap;
}

/* Legal-Hinweis-Banner (Impressum/Datenschutz/AGB platzhalter) */
.legal-pending {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  margin: 0 0 2.5rem 0;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--color-terracotta);
  background: rgba(190, 92, 70, 0.08);
  border-radius: 4px;
  font-size: 0.97rem;
}
.legal-pending__icon { flex-shrink: 0; line-height: 1.4; color: var(--color-terracotta); }
.legal-pending__icon .bi { font-size: 1.2rem; }
.legal-pending__body strong { display: block; margin-bottom: 0.15rem; }

/* ============================================================== Sections
   Jede Section bekommt ein eigenes Farbpaar (Farbenspiel).             */

/* Wichtig: Contao-Wrapper als reine Block-Container, nicht Flex/Grid */
#wrapper, #container, #main, #main > .inside { display: block; width: 100%; }

/* Section: Hintergrund 100%, Inhalt strikt im Container.
   Wir nutzen Flex-Column als Wrapper, damit ALLE direkten Kinder
   (egal ob Contao-Article, Wrapper-Div, Inhaltselement) konsistent
   horizontal zentriert + container-padded sind. */
.section {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  padding-block: var(--section-pad-y);
  padding-inline: 0;
  position: relative;
  scroll-margin-top: var(--header-h);
  overflow: hidden;
}

/* Der erste Wrapper innerhalb (article.mod_article oder Inhaltselement)
   wird auf Container-Max + Center gezogen. */
.section > * {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  box-sizing: border-box;
}

/* Falls Contao 5 die Article-Inhalte in einem .mod_article verpackt,
   muessen die Inhalts-CEs darin auch zentriert werden */
.section .mod_article {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  padding-inline: 0;
}
.section .mod_article > * {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  box-sizing: border-box;
}

/* Innere Block-Inhalte sollen nicht Flex/Inline werden */
.section .ce_text,
.section .ce_headline { display: block; }

/* Hero — Cream auf Navy-Type */
.section--hero {
  background: #ffffff;
  color: var(--color-navy);
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - var(--header-h));
  /* WICHTIG: flex-direction column, sonst stapelt sich der Hero horizontal */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: var(--section-pad-y);
}
.section--hero .ce_text,
.section--hero .ce_headline,
.section--hero .three-pillars {
  max-width: 920px;
  width: 100%;
}
.section--hero h1 {
  font-size: clamp(3.5rem, 10vw, 8rem);
  letter-spacing: 0.01em;
  margin-bottom: 1rem;
}
.section--hero p.lead {
  font-style: italic;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  margin-inline: auto;
  margin-bottom: 0;
}

/* ============================================ Hero-Hintergrund: Buchschnitte
   Dezenter Bücher-Streifen am unteren Section-Rand.
   Datei: files/themes/wortbuehne/img/hero-books-bg.jpg
   (Querformat, weißer Hintergrund — wird mit Opacity 0.18 eingeblendet.) */
.section--hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/files/themes/wortbuehne/img/hero-books-bg.jpg')
              bottom center / 100% auto no-repeat;
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
}
.section--hero > * { position: relative; z-index: 1; }
.section--hero .ce_html:has(.hero-vision-decor) {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  margin: 0;
}
.hero-vision-decor {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: clamp(2.5rem, 10vh, 8rem);
  pointer-events: none;
  color: var(--color-navy);
}
.hero-vision-svg {
  width: min(820px, 88%);
  height: auto;
  opacity: 0.22;
}

/* Glühbirne sanft pulsieren */
.hv-bulb { animation: hv-pulse 3.6s ease-in-out infinite; transform-origin: 120px 120px; }
@keyframes hv-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* Strahlen mit-pulsen */
.hv-rays {
  transform-origin: 120px 120px;
  animation: hv-rays 3.6s ease-in-out infinite;
}
@keyframes hv-rays {
  0%, 100% { transform: scale(0.9);  opacity: 0.45; }
  50%      { transform: scale(1.12); opacity: 1; }
}

/* Punkt-Flow: Welle nach rechts. Letzter Punkt schluckt sich ins Buch
   (translate +60px + Skalierung 0 + fade) — das ist der Story-Anker. */
.hv-dot {
  opacity: 0.18;
  transform-origin: center;
  transform-box: fill-box;
  animation: hv-flow 2.6s ease-in-out infinite;
}
.hv-dot--1 { animation-delay: 0s; }
.hv-dot--2 { animation-delay: 0.18s; }
.hv-dot--3 { animation-delay: 0.36s; }
.hv-dot--4 { animation-delay: 0.54s; }
.hv-dot--5 {
  animation: hv-flow-into-book 2.6s ease-in-out infinite;
  animation-delay: 0.72s;
}
@keyframes hv-flow {
  0%, 100% { opacity: 0.18; transform: scale(0.7); }
  25%      { opacity: 1;    transform: scale(1.25); }
  60%      { opacity: 0.18; transform: scale(0.7); }
}
@keyframes hv-flow-into-book {
  0%, 100% { opacity: 0; transform: scale(0.4) translateX(0); }
  20%      { opacity: 1; transform: scale(1.25) translateX(0); }
  55%      { opacity: 0.6; transform: scale(0.6) translateX(40px); }
  70%      { opacity: 0; transform: scale(0.2) translateX(60px); }
}

/* Buch leicht "atmen" — minimaler Pulse, damit es lebendig aber ruhig wirkt */
.hv-book { animation: hv-book-breathe 4s ease-in-out infinite; transform-origin: 680px 125px; }
@keyframes hv-book-breathe {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.015); }
}

/* Textlinien im Buch werden „geschrieben" — Stroke-Dash-Animation läuft
   gestaffelt von oben nach unten, links zuerst, dann rechts. Sieht aus,
   als ob unsichtbarer Stift den Text aufbaut. Loop 7s mit langer Halte-
   und kurzer Auslösch-Phase, damit das fertige Buch der Default-Eindruck
   bleibt und das Schreiben als Ereignis wirkt. */
.hv-textlines line {
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
  animation: hv-write 7s ease-out infinite;
}
.hv-textlines line:nth-of-type(1) { animation-delay: 0.0s; }
.hv-textlines line:nth-of-type(2) { animation-delay: 0.4s; }
.hv-textlines line:nth-of-type(3) { animation-delay: 0.8s; }
.hv-textlines line:nth-of-type(4) { animation-delay: 1.2s; }
.hv-textlines line:nth-of-type(5) { animation-delay: 1.6s; }
.hv-textlines line:nth-of-type(6) { animation-delay: 2.0s; }
.hv-textlines line:nth-of-type(7) { animation-delay: 2.4s; }
.hv-textlines line:nth-of-type(8) { animation-delay: 2.8s; }
@keyframes hv-write {
  0%   { stroke-dashoffset: 80; opacity: 0; }
  5%   { stroke-dashoffset: 80; opacity: 1; }
  20%  { stroke-dashoffset: 0;  opacity: 1; }
  88%  { stroke-dashoffset: 0;  opacity: 1; }
  96%  { stroke-dashoffset: 0;  opacity: 0; }
  100% { stroke-dashoffset: 80; opacity: 0; }
}

/* Reduced-Motion respektieren */
@media (prefers-reduced-motion: reduce) {
  .hv-bulb, .hv-rays, .hv-dot, .hv-book, .hv-textlines line { animation: none; }
  .hv-dot { opacity: 0.6; }
  .hv-textlines line { stroke-dashoffset: 0; opacity: 1; }
}

/* Verlag — Navy auf Cream-Type */
.section--navy {
  background: var(--color-navy);
  color: var(--color-cream);
}
.section--navy h1, .section--navy h2, .section--navy h3 { color: var(--color-cream); }
.section--navy a { color: var(--color-coral); }

/* Literatur — Forest auf Cream-Type */
.section--forest {
  background: var(--color-forest);
  color: var(--color-cream);
}
.section--forest h1, .section--forest h2, .section--forest h3 { color: var(--color-mustard-soft); }
.section--forest a { color: var(--color-coral); }

/* Coaching — Mustard-soft auf Navy-Type */
.section--mustard {
  background: var(--color-mustard-soft);
  color: var(--color-navy);
}

/* Consulting — Cream auf Navy-Type, mit Mustard-Akzenten */
/* Section--cream: helle, ruhige Cream-Section (für FAQ als Cool-Down
   zwischen Coaching's cream-mustard-gradient und Kontakt's terracotta) */
.section--cream {
  background: var(--color-cream-soft);
  color: var(--color-navy);
}
.section--cream h2 { color: var(--color-terracotta); }
.section--cream h3 { color: var(--color-navy); }

.section--cream-mustard {
  background: var(--color-cream);
  color: var(--color-navy);
}
.section--cream-mustard h2 { color: var(--color-mustard); }

/* Team — Sage auf Navy-Type */
.section--sage {
  background: var(--color-sage);
  color: var(--color-navy);
}

/* Kontakt — Terracotta auf Cream-Type */
.section--terracotta {
  background: var(--color-terracotta);
  color: var(--color-cream);
}
.section--terracotta h1, .section--terracotta h2, .section--terracotta h3 { color: var(--color-cream); }
.section--terracotta a { color: var(--color-cream); border-bottom: 1px solid currentColor; }

/* ===================================================== Drei-Saeulen Cards */

.three-pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin: 3rem 0 0;
}

.three-pillars .pillar {
  padding: 2.5rem 2rem;
  border: 1px solid var(--color-rule);
  background: rgba(255, 255, 255, 0.75);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.section--navy .three-pillars .pillar,
.section--forest .three-pillars .pillar,
.section--terracotta .three-pillars .pillar {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
}
.three-pillars .pillar:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -24px rgba(29, 45, 58, 0.25);
}
.three-pillars .pillar h3 {
  margin-bottom: 1rem;
  font-size: 1.4rem;
  letter-spacing: 0.08em;
}
.three-pillars .pillar p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.6;
}

/* ===================================================== Ethik / Werte-Liste */
/* Alte .ethik (Karten-Style) — nur als Fallback, falls noch verwendet. */
.ethik { list-style: none; padding: 0; margin: var(--rhythm-md) 0 0; }
.ethik li { padding: 0.5rem 0; }
.ethik li strong { display: block; }

/* ===================================================== Book-Cards (Literatur)
   Zwei (oder mehr) Buch-Vorschau-Cards in 2-Spalten-Grid.
   Weißer Hintergrund hebt sich von der Forest-Section ab.
   Hover: leichter Lift + Schatten — wirkt klickbar. */
.book-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: var(--rhythm-lg);
  max-width: 720px;
}
/* Buch-Card: greift auf .ce_text mit cssID-Klasse 'book-card' UND
   auf einen reinen .book-card-Wrapper (für Backwards-Compat). */
.book-card,
.ce_text.book-card {
  display: flex;
  flex-direction: column;
  background: #ffffff !important;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  transition: transform 0.25s, box-shadow 0.25s;
}
.book-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}
/* Cover-Bild via addImage=1: Contao rendert <figure class="image_container">
   als erstes Kind im ce_text. Wir wollen ein einheitliches Card-Bild
   (kein sichtbarer Bruch zwischen Cover-Bereich und Body). */
.book-card .image_container,
.book-card figure {
  margin: 0 0 1rem 0;
  aspect-ratio: 5 / 7;
  background: var(--color-cream-soft);
  overflow: hidden;
  border-radius: 4px 4px 0 0;
}
.book-card .image_container img,
.book-card figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Alle direkten Card-Kinder bekommen einheitliches horizontales Padding,
   AUSSER die figure (Cover soll voll-bleed bis zum Rand). */
.book-card > * {
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
}
.book-card > figure,
.book-card > .image_container {
  padding: 0 !important;
  margin: 0 0 1rem 0;
}

/* Headline-Farbe Navy mit !important (sonst überschreibt section--forest) */
.book-card > h3,
.book-card .book-card__title {
  margin: 0 0 0.5rem;
  padding-top: 0.25rem;
  font-family: var(--font-display-alt);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 1rem;
  color: var(--color-navy) !important;
  line-height: 1.35;
}
.book-card > p {
  margin: 0 0 0.5rem;
  color: var(--color-navy) !important;
}
.book-card .book-card__price {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-terracotta) !important;
  margin: 0 0 1rem;
}
.book-card > p:last-child,
.book-card .book-card__buy-wrap {
  padding-bottom: 1.25rem !important;
  margin: auto 0 0 0;
}
.book-card__body {
  padding: 1.25rem 1.4rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: var(--color-navy);
}
.book-card__title {
  font-family: var(--font-display-alt);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 1.05rem;
  margin: 0;
  color: var(--color-navy);
}
.book-card__price {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--color-terracotta);
  margin: 0.15rem 0 0.5rem;
}
.book-card__buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  margin-top: auto;
  padding: 0.55rem 1.2rem;
  background: var(--color-terracotta);
  color: var(--color-cream) !important;
  border-radius: 999px;
  font-family: var(--font-display-alt);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s;
}
.book-card__buy:hover {
  background: var(--color-navy);
  transform: translateY(-1px);
  opacity: 1;
}

/* ===================================================== Image Marquee
   Greift sowohl auf das eigene .image-marquee-Markup als auch auf das
   Standard-Contao-Galerie-CE (.content-gallery > ul) — so funktioniert
   die Marquee-Animation OHNE Custom-Template. Marco kann im Backend
   das Galerie-CE bedienen, das CSS macht den Slider draus.
   Track-Dopplung fehlt im Standard-CE → bei Loop springt es einmal pro
   Zyklus zurück. Mit langer Dauer (90s) ist das kaum bemerkbar. */
.section--sage .content-gallery,
.content-gallery {
  width: 100%;
  overflow: hidden;
  margin-top: var(--rhythm-lg);
  -webkit-mask-image: linear-gradient(to right,
    transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(to right,
    transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.content-gallery > ul {
  display: flex;
  gap: 0;                  /* WICHTIG: kein gap, sonst hängt am -50%-Wrap der Trailing-Gap → sichtbarer Sprung */
  width: max-content;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
  animation: marquee-scroll-cga 20s linear infinite;
}
.content-gallery > ul > li {
  flex-shrink: 0;
  list-style: none;
  margin: 0 1.5rem;        /* statt gap → symmetrische Margins links/rechts, ergibt 3rem zwischen Bildern */
  padding: 0;
}
.content-gallery > ul > li figure {
  margin: 0;
}
.content-gallery > ul img {
  height: clamp(110px, 14vw, 160px);
  width: auto;
  max-width: none;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.6);
  padding: 0.5rem;
  display: block;
  object-fit: contain;
}
/* -50% bringt den Track exakt um die erste Hälfte nach links.
   Die zweite Hälfte (per JS dupliziert, aria-hidden) füllt den Bereich
   bis dahin nahtlos auf → kein sichtbarer Sprung beim Loop-Ende. */
@keyframes marquee-scroll-cga {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Hover-Pause: greift sowohl wenn Maus auf der Section als auch direkt
   auf dem Bild ist. Pointer-events durch alle Children erlauben. */
.content-gallery:hover > ul,
.content-gallery > ul:hover {
  animation-play-state: paused;
}

/* Bilder anklickbar wirken lassen + cursor pointer wenn fullsize aktiv */
.content-gallery > ul a {
  display: block;
  cursor: zoom-in;
  text-decoration: none;
  transition: transform 0.2s, opacity 0.2s;
}
.content-gallery > ul a:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}
@media (prefers-reduced-motion: reduce) {
  .content-gallery > ul { animation: none; flex-wrap: wrap; }
  .content-gallery { -webkit-mask-image: none; mask-image: none; }
}

/* Bestehender Image-Marquee (für Custom-HTML-Fallback) — unverändert */
.image-marquee {
  width: 100%;
  overflow: hidden;
  margin-top: var(--rhythm-lg);
  -webkit-mask-image: linear-gradient(to right,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%);
          mask-image: linear-gradient(to right,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%);
}
.image-marquee__track {
  display: flex;
  gap: 1.5rem;
  width: max-content;
  align-items: center;
  animation: marquee-scroll 60s linear infinite;
}
.image-marquee__item {
  flex-shrink: 0;
  height: clamp(110px, 14vw, 160px);
  width: auto;
  max-width: none;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.6);
  padding: 0.5rem;
  display: block;
  object-fit: contain;
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.image-marquee:hover .image-marquee__track {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .image-marquee__track { animation: none; }
  .image-marquee { -webkit-mask-image: none; mask-image: none; }
}

/* Visueller Cut zwischen Verlag-Inhalten und Ethik (oder anderen Blöcken).
   Sanfter Fade-Strich, kein hartes Border. */
.section-divider {
  border: 0;
  height: 1px;
  margin: var(--rhythm-lg) auto;
  max-width: 820px;
  background: linear-gradient(to right,
    transparent 0%,
    currentColor 25%,
    currentColor 75%,
    transparent 100%);
  opacity: 0.18;
}

/* ===================================================== Ethik-Block
   Eigener Wrapper mit deutlichem Cream-Wash auf navy-Section, klare
   Abgrenzung zum oberen Vision/Mission/Story-Line-Bereich.
   Border-left in Terracotta + leichter Box-Shadow als visueller Anker. */
.ethik-block {
  display: block;
  margin: var(--rhythm-md) auto 0;
  padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
  background: rgba(250, 243, 227, 0.12);
  border-left: 4px solid var(--color-terracotta);
  border-radius: 8px;
  max-width: 900px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.ethik-block__title {
  margin: 0 0 var(--rhythm-md);
  font-family: var(--font-display-alt);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  color: var(--color-cream);
}
.ethik-block .ethik-principles {
  margin: 0;
}

/* Auf hellen Sections (falls Ethik-Block dort jemals genutzt wird):
   Navy-Tint + Navy-Title statt Cream */
.section--cream-mustard .ethik-block,
.section--mustard .ethik-block,
.section--sage .ethik-block {
  background: rgba(31, 41, 64, 0.08);
  box-shadow: 0 8px 24px rgba(31, 41, 64, 0.12);
}
.section--cream-mustard .ethik-block__title,
.section--mustard .ethik-block__title,
.section--sage .ethik-block__title {
  color: var(--color-navy);
}

/* Neue typografische Ethik-Liste mit grossen Ordnungsnummern. */
.ethik-principles {
  list-style: none;
  counter-reset: none; /* nutzen direkte .num-Spans, kein Counter */
  padding: 0;
  margin: var(--rhythm-lg) 0 0;
  max-width: 760px;
  display: grid;
  gap: var(--rhythm-md);
}

.ethik-principles li {
  display: grid;
  grid-template-columns: clamp(48px, 5vw, 72px) 1fr;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  align-items: baseline;
  padding: 0;
  background: none;
  border: 0;
  position: relative;
  padding-bottom: var(--rhythm-md);
  border-bottom: 1px solid currentColor;
  border-bottom-color: rgba(255,255,255,0.08);
}

.ethik-principles li:last-child { border-bottom: 0; padding-bottom: 0; }

.ethik-principles .num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  line-height: 1;
  color: var(--color-terracotta);
  letter-spacing: 0.02em;
}

.ethik-principles li > div {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.55;
  padding-top: 0.4em; /* visuell zur Mitte der Nummer ausrichten */
  text-wrap: pretty; /* Browser sortiert Zeilenenden so, dass keine Satzzeichen am Zeilenanfang landen */
  hyphens: auto;
}

.ethik-principles strong {
  font-family: var(--font-display-alt);
  font-weight: 700;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  letter-spacing: 0.04em;
  text-transform: none;
}

/* In Light-Sections eine subtilere Trennlinie */
.section--cream-mustard .ethik-principles li,
.section--mustard .ethik-principles li,
.section--sage .ethik-principles li {
  border-bottom-color: rgba(29, 45, 58, 0.12);
}

/* ===================================================== Phasen-Definition-List */
dl.phasen {
  margin: var(--rhythm-md) 0 0;
  display: grid;
  gap: 1rem;
  max-width: 760px;
}
dl.phasen dt {
  font-family: var(--font-display-alt);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.95rem;
  margin-top: 0.75rem;
  color: var(--color-terracotta);
}
.section--mustard dl.phasen dt,
.section--cream-mustard dl.phasen dt { color: var(--color-terracotta); }
.section--navy dl.phasen dt,
.section--forest dl.phasen dt,
.section--terracotta dl.phasen dt { color: var(--color-cream); }
dl.phasen dd {
  margin: 0;
  padding-left: 0;
  font-size: 0.98rem;
  line-height: 1.6;
}

/* ===================================================== Phase-Cards (Coaching 3-Spalten)
   Weißer Hintergrund für maximale Lesbarkeit auf Mustard-Section,
   ohne Akzent-Border oben — der Akzent kommt vom Icon. */
.phase-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 2.25rem 1.75rem 1.75rem;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(31, 41, 64, 0.08);
  transition: transform 0.25s, box-shadow 0.25s;
}
.phase-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(31, 41, 64, 0.14);
}

/* Mehr Atmung zwischen Lead-Text und Card-Grid */
.section .ce_cp_grid_start { margin-top: var(--rhythm-lg); }
.phase-card__icon {
  display: inline-flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-terracotta);
  color: var(--color-cream);
  margin-bottom: 1rem;
  font-size: 1.4rem;
}
.phase-card__icon .bi {
  margin: 0;
  color: var(--color-cream);
  font-size: 1.4rem;
}
.phase-card__title {
  font-family: var(--font-display-alt);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 1.05rem;
  margin: 0 0 0.85rem;
  color: var(--color-navy);
}
.phase-card__body {
  margin: 0 0 1.25rem;
  font-size: 0.97rem;
  line-height: 1.65;
  flex: 1;
}
.phase-card__price {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid rgba(31, 41, 64, 0.15);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.phase-card__price-label {
  font-family: var(--font-display-alt);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  color: rgba(31, 41, 64, 0.65);
}
.phase-card__price-value {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-terracotta);
  letter-spacing: 0.02em;
}
.phase-card__price-value small {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.85rem;
  color: rgba(31, 41, 64, 0.65);
  margin-left: 0.4rem;
}

/* Auf Navy/Forest/Terracotta Cream-Schrift, dunklere Box */
.section--navy .phase-card,
.section--forest .phase-card,
.section--terracotta .phase-card {
  background: rgba(250, 243, 227, 0.08);
}
.section--navy .phase-card__title,
.section--forest .phase-card__title,
.section--terracotta .phase-card__title { color: var(--color-cream); }
.section--navy .phase-card__price,
.section--forest .phase-card__price,
.section--terracotta .phase-card__price { border-top-color: rgba(250, 243, 227, 0.18); }
.section--navy .phase-card__price-label,
.section--forest .phase-card__price-label,
.section--terracotta .phase-card__price-label { color: rgba(250, 243, 227, 0.7); }
.section--navy .phase-card__price-value small,
.section--forest .phase-card__price-value small,
.section--terracotta .phase-card__price-value small { color: rgba(250, 243, 227, 0.7); }

/* ===================================================== FAQ-Akkordeon */
.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 820px;
  margin: var(--rhythm-md) auto 0;
}
.faq-accordion__item {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(31, 41, 64, 0.05);
  transition: box-shadow 0.25s, background 0.25s;
}
.faq-accordion__item[open] {
  box-shadow: 0 6px 22px rgba(31, 41, 64, 0.10);
}
.faq-accordion__question {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.4rem;
  font-family: var(--font-display-alt);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--color-navy);
  letter-spacing: 0.01em;
  user-select: none;
}
.faq-accordion__question::-webkit-details-marker { display: none; }
.faq-accordion__question::marker { content: ''; }
.faq-accordion__q-text { flex: 1; }
.faq-accordion__chevron {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--color-terracotta);
  transition: transform 0.3s ease;
}
.faq-accordion__item[open] .faq-accordion__chevron { transform: rotate(180deg); }
.faq-accordion__answer {
  padding: 0 1.4rem 1.3rem;
  color: var(--color-navy);
  font-size: 0.97rem;
  line-height: 1.65;
}
.faq-accordion__answer p:first-child { margin-top: 0; }
.faq-accordion__answer p:last-child { margin-bottom: 0; }
.faq-accordion__answer ul { margin: 0.5rem 0; padding-left: 1.2rem; }
.faq-accordion__answer li { margin: 0.25rem 0; }

/* Auf dunklen Sections (falls FAQ mal woanders eingesetzt) */
.section--navy .faq-accordion__item,
.section--forest .faq-accordion__item,
.section--terracotta .faq-accordion__item {
  background: rgba(250, 243, 227, 0.95);
}

/* ===================================================== FAQ-Accordion (mod_pm_faq_accordion)
   Native <details>/<summary>, ohne JS, mit Chevron-Icon das beim
   Aufklappen rotiert. Items mit dezenter Trennlinie und Hover-Tint. */
.pm-faq {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: var(--rhythm-md);
  max-width: 880px;
  margin-inline: auto;
}
.pm-faq__item {
  border-bottom: 1px solid rgba(31, 41, 64, 0.15);
  transition: background 0.2s;
}
.pm-faq__item:first-child { border-top: 1px solid rgba(31, 41, 64, 0.15); }
.pm-faq__item[open] { background: rgba(255, 255, 255, 0.4); }

.pm-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display-alt);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.98rem;
  color: var(--color-navy);
  transition: color 0.2s;
}
.pm-faq__question::-webkit-details-marker { display: none; }
.pm-faq__question:hover { color: var(--color-terracotta); }
.pm-faq__text { flex: 1; }
.pm-faq__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-terracotta);
  color: var(--color-cream);
  flex-shrink: 0;
  transition: transform 0.3s ease, background 0.2s;
}
.pm-faq__item[open] .pm-faq__icon {
  transform: rotate(180deg);
}
.pm-faq__question:hover .pm-faq__icon {
  background: var(--color-navy);
}

.pm-faq__answer {
  padding: 0 1.4rem 1.4rem;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(29, 45, 58, 0.85);
  animation: pm-faq-fade 0.3s ease-out;
}
.pm-faq__answer p:first-child { margin-top: 0; }
.pm-faq__answer p:last-child { margin-bottom: 0; }
.pm-faq__answer ul { margin: 0.5rem 0 0; padding-left: 1.2rem; }
.pm-faq__answer li { margin: 0.25rem 0; }
@keyframes pm-faq-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Reduced-Motion */
@media (prefers-reduced-motion: reduce) {
  .pm-faq__icon, .pm-faq__answer { transition: none; animation: none; }
}

/* ===================================================== Bio-More-Akkordeon
   Sitzt innerhalb der Team-Cards. Dezenter als FAQ — kein Border,
   kleineres Toggle, Icon rechts neben „Mehr über"-Label.            */
.bio-more {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px dashed currentColor;
  border-color: rgba(29, 45, 58, 0.18);
}
.bio-more__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display-alt);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.85rem;
  color: var(--color-terracotta);
  padding: 0.25rem 0;
  transition: color 0.2s;
}
.bio-more__toggle::-webkit-details-marker { display: none; }
.bio-more__toggle:hover { color: var(--color-navy); }
.bio-more__icon {
  display: inline-flex;
  align-items: center;
  transition: transform 0.3s ease;
}
.bio-more[open] .bio-more__icon { transform: rotate(180deg); }

.bio-more__content {
  margin-top: 0.85rem;
  font-size: 0.96rem;
  line-height: 1.7;
  animation: bio-more-fade 0.35s ease-out;
}
.bio-more__content p:first-child { margin-top: 0; }
.bio-more__content p:last-child { margin-bottom: 0; }

.bio-more__quote {
  margin: 1rem 0 0;
  padding: 0.6rem 1rem;
  border-left: 2px solid var(--color-terracotta);
  font-style: italic;
  color: rgba(29, 45, 58, 0.85);
  font-size: 0.97rem;
}

@keyframes bio-more-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .bio-more__icon, .bio-more__content { transition: none; animation: none; }
}

/* ===================================================== Quote-Block */
.quote-block {
  margin: var(--rhythm-md) 0;
  padding: 1.5rem 2rem;
  border-left: 3px solid var(--color-terracotta);
  background: rgba(255, 255, 255, 0.04);
  font-family: var(--font-body);
}
.quote-block p {
  font-size: 1.15rem;
  font-style: italic;
  line-height: 1.55;
  margin: 0 0 0.75rem;
}
.quote-block cite {
  font-family: var(--font-display-alt);
  font-style: normal;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.section--navy .quote-block cite,
.section--forest .quote-block cite,
.section--terracotta .quote-block cite { color: rgba(250, 243, 227, 0.7); }

/* ===================================================== Section-Headlines */
/* H2 in Sections bekommt einen kleinen Akzentstrich darunter,
   um den Section-Anfang visuell klar zu setzen. */
.section > .ce_headline > h2:first-of-type,
.section .ce_headline:first-child h2,
.section h2.first-headline {
  position: relative;
  padding-bottom: var(--rhythm-sm);
  margin-bottom: var(--rhythm-md);
}
.section > .ce_headline:first-child h2::after,
.section h2.first-headline::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 64px;
  height: 3px;
  background: var(--color-terracotta);
}
.section--cream-mustard h2::after,
.section--mustard h2::after,
.section--sage h2::after { background: var(--color-terracotta); }
.section--terracotta h2::after,
.section--navy h2::after,
.section--forest h2::after { background: var(--color-cream); }

/* ============================================ Bootstrap-Icon Inline-Helper */
/* Icons aus dem bs-icons-inserttag rendern als <i class="bi bi-..."></i>
   oder ggf. <span>. Wir geben ihnen einen sanften Inline-Stil. */
.bi,
i.bi,
.bs-icon {
  display: inline-block;
  vertical-align: -0.15em;
  margin-right: 0.4em;
  color: var(--color-terracotta);
  font-size: 1.1em;
}
.section--terracotta .bi,
.section--navy .bi,
.section--forest .bi { color: var(--color-cream); }

/* Subsection-Headlines (h3) mit Icon davor — kleinere Variante */
.section h3 .bi,
.section h3 .bs-icon {
  font-size: 0.85em;
  margin-right: 0.5em;
  color: inherit;
  opacity: 0.6;
}

/* ============================================================ Team-Grid
   Drei Personen-Cards mit Portrait oben, Name in Versalien, Rolle italic, Bio. */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 3rem;
  margin: 3rem 0 0;
}

/* Team-Bilder in Clickpress-Spalten: einheitlicher 4:5 Hochformat-Crop,
   damit Susanne, Theresa und Hilmar gleich groß stehen — egal welche
   Original-Auflösung das jeweilige Foto hat. */
.section--sage .ce_cp_column_start ~ .ce_image,
.section--team .ce_cp_column_start ~ .ce_image,
.section--sage .ce_image:has(img[alt="Susanne"]),
.section--sage .ce_image:has(img[alt="Theresa"]),
.section--sage .ce_image:has(img[alt="Hilmar"]) {
  aspect-ratio: 4 / 5;
  width: 100%;
  overflow: hidden;
  background: var(--color-cream);
  border-radius: 4px;
  margin-bottom: 1.25rem;
}
.section--sage .ce_image img,
.section--team .ce_image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;  /* Gesicht oben in der Crop-Box */
  display: block;
}
.team-member { text-align: left; }
.team-member-photo {
  aspect-ratio: 4 / 5;
  width: 100%;
  background: var(--color-cream);
  border: 1px solid rgba(29, 45, 58, 0.1);
  margin-bottom: 1.5rem;
  overflow: hidden;
}
.team-member-photo img,
.team-member-photo svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.team-member h3 {
  font-size: 2rem;
  margin: 0 0 0.25rem;
}
.team-member .role {
  font-family: var(--font-display-alt);
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  color: var(--color-terracotta);
  font-style: normal;
  margin: 0 0 1rem;
}
.team-member p {
  font-size: 0.98rem;
  line-height: 1.65;
}

/* ====================================================== Kontakt-Sektion */
.section--terracotta .ce_text,
.section--terracotta .ce_headline { max-width: 720px; }

.contact-info {
  font-size: 1.15rem;
  line-height: 1.9;
}
.contact-info strong {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 1.4rem;
  display: block;
  margin-bottom: 0.5em;
}
.contact-info a { text-decoration: underline; text-underline-offset: 0.25em; }

/* ========================================== Kontakt-Card (rechte Spalte) */
.contact-card {
  position: relative;
  padding: 0 0 0 clamp(1rem, 3vw, 2.5rem);
  border-left: 1px solid rgba(255,255,255,0.18);
  font-style: normal;
}
.contact-card__title {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  letter-spacing: 0.12em;
  color: var(--color-cream);
  margin: 0 0 var(--rhythm-md);
  padding-bottom: var(--rhythm-sm);
  border-bottom: 1px solid rgba(255,255,255,0.18);
}
.contact-card__org {
  font-size: 1.05rem;
  margin-bottom: var(--rhythm-md);
}
.contact-card__org strong {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 1.15rem;
  display: block;
  margin-bottom: 0.25em;
}
.contact-card__row {
  font-size: 1rem;
  margin: 0 0 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.contact-card__row a {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.contact-card__row .bi {
  margin-right: 0;
  color: var(--color-cream);
  opacity: 0.7;
  flex-shrink: 0;
}
.contact-card__hint {
  margin-top: var(--rhythm-md);
  font-size: 0.9rem;
  opacity: 0.7;
}

/* Ansprechpartner-Liste: dezent abgesetzt */
.contact-card__people {
  margin-top: var(--rhythm-md);
  padding-top: 1rem;
  border-top: 1px solid rgba(250, 243, 227, 0.2);
}
.contact-card__people-label {
  font-family: var(--font-display-alt);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  opacity: 0.7;
  margin: 0 0 0.5rem;
}
.contact-card__people-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.97rem;
}
.contact-card__people-list li::before {
  content: '·';
  margin-right: 0.5rem;
  opacity: 0.5;
}

/* Mobile: Border links wegnehmen, oben Trennlinie */
@media (max-width: 720px) {
  .contact-card {
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,0.18);
    padding: var(--rhythm-md) 0 0;
    margin-top: var(--rhythm-md);
  }
}

/* ============================================ Hero-Pillars (Subline) */
.hero-pillars {
  font-family: var(--font-display-alt);
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  font-style: normal;
  color: var(--color-terracotta);
  margin-top: var(--rhythm-md);
  text-align: center;
}

/* ================================================= Scroll-Hinweis im Hero
   Container hat font-size 1.5em — alle Kinder nutzen em-Werte, sodass
   Label, Icon und Kreis proportional mitskalieren. */
.scroll-hint {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6em;
  text-decoration: none;
  color: var(--color-muted);
  cursor: pointer;
  font-size: 1.5em;
  transition: color 0.2s, transform 0.2s;
}
.scroll-hint:hover { color: var(--color-text); }

.scroll-hint__label {
  font-family: var(--font-display-alt);
  text-transform: uppercase;
  font-size: 0.65em;
  letter-spacing: 0.22em;
  font-weight: 600;
}

.scroll-hint__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3em;
  height: 3em;
  border-radius: 50%;
  border: 0.1em solid currentColor;
  font-size: 1.6em;
  animation: scrollBob 2s ease-in-out infinite;
}
.scroll-hint__icon .bi,
.scroll-hint__icon svg {
  width: 1em;
  height: 1em;
  font-size: inherit;
}
.scroll-hint__icon .bi {
  margin: 0;
  color: currentColor;
  opacity: 1;
}

@keyframes scrollBob {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50%      { transform: translateY(6px); opacity: 1; }
}

/* ============================================================= Buttons */
.btn,
button[type="submit"],
.ce_form button {
  display: inline-block;
  font-family: var(--font-display-alt);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.85rem;
  padding: 0.9em 1.6em;
  border: 1px solid currentColor;
  background: currentColor;
  color: var(--color-cream);
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.btn:hover, .btn:focus-visible {
  background: transparent;
  text-decoration: none;
}

/* ============================================================ Formulare */
/* Form-Container an Section-Layout angeglichen: 1400 px wie die anderen
   Inhaltselemente, Hintergrund der Section bleibt 100% breit. */
.section > .ce_form,
.section .ce_form {
  max-width: var(--container-max);
  margin-inline: auto;
  margin-top: 2rem;
  padding-inline: var(--container-padding);
}
.ce_form form {
  display: grid;
  gap: 1.25rem;
  max-width: 720px; /* die Form-Felder selbst schmaler halten, sonst wirken Inputs ueberbreit */
  margin-inline: auto;
}

.widget { margin: 0; }
.widget label {
  display: block;
  font-family: var(--font-display-alt);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
  font-weight: 600;
}
/* KEIN eigenes ::after fuer .mandatory — Contaos Template setzt bereits einen Stern,
   sonst doppelte Markierung. */
.widget .mandatory { color: currentColor; opacity: 0.7; }

/* Erfolgsmeldung nach Ajax-Submit */
.contact-form__success {
  padding: 2rem;
  border-radius: 12px;
  background: var(--color-cream);
  color: var(--color-navy);
  text-align: center;
  animation: contact-form-success-fadein 0.4s ease-out;
}
.contact-form__success h3 {
  margin: 0 0 0.75rem;
  color: var(--color-terracotta);
  font-family: var(--font-display);
}
.contact-form__success p { margin: 0.5rem 0; }
.contact-form__success a {
  color: var(--color-terracotta);
  border-bottom: 1px solid currentColor;
}
@keyframes contact-form-success-fadein {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.widget input,
.widget textarea,
.widget select {
  width: 100%;
  padding: 0.85em 1em;
  border: 1px solid rgba(255, 255, 255, 0.4);
  /* Default: Pflichtfelder prominent in Cream */
  background: var(--color-cream) !important;
  font: inherit;
  font-family: var(--font-body);
  /* !important nötig — sonst zieht die section--terracotta-Cascade
     (color: var(--color-cream)) auf den Input und der Text wird unsichtbar */
  color: var(--color-navy) !important;
  border-radius: 0;
  transition: border-color 0.2s, box-shadow 0.2s;
}

/* Optionale Felder: zurückgenommen — deutlich weniger Aufmerksamkeit
   als Pflichtfelder, damit der User dem Pflicht-Pfad folgt. */
.widget input:optional,
.widget textarea:optional,
.widget select:optional {
  background: rgba(250, 243, 227, 0.45) !important;
  border-color: rgba(255, 255, 255, 0.25);
  color: rgba(29, 45, 58, 0.85);
}
.widget input:optional::placeholder,
.widget textarea:optional::placeholder { opacity: 0.5; }

/* Browser-Autofill-Tint neutralisieren (Chrome/Edge/Safari) */
.widget input:-webkit-autofill,
.widget input:-webkit-autofill:hover,
.widget input:-webkit-autofill:focus,
.widget textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 30px var(--color-cream) inset !important;
  -webkit-text-fill-color: var(--color-navy) !important;
  caret-color: var(--color-navy);
}

.widget input:focus,
.widget textarea:focus,
.widget select:focus {
  outline: none;
  border-color: var(--color-navy);
  box-shadow: 0 0 0 3px rgba(29, 45, 58, 0.12);
}

.widget textarea { min-height: 140px; resize: vertical; }
.widget input::placeholder,
.widget textarea::placeholder { color: var(--color-muted); opacity: 0.7; }

/* Datenschutz-Checkbox: inline mit Label rechts.
   Kompakte Variante ohne Wrapper-Headline (Legend wird ausgeblendet). */
.widget-checkbox { display: block; }
.widget-checkbox legend { display: none !important; }
.widget-checkbox fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  width: 100%;
}
.widget-checkbox fieldset > span,
.checkbox_container > span {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: 0.95rem;
  line-height: 1.5;
}
.checkbox_container input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
  margin-top: 0.2em;
  accent-color: var(--color-cream);
}
.checkbox_container label {
  font-family: var(--font-body);
  font-size: 0.95rem;
  letter-spacing: 0;
  text-transform: none;
  margin: 0;
  font-weight: 400;
}
.checkbox_container label a { text-decoration: underline; text-underline-offset: 0.2em; }

/* Submit-Button im Form */
.widget-submit { margin-top: 0.75rem; }
.widget-submit button[type="submit"] {
  width: auto;
  display: inline-block;
  font-family: var(--font-display-alt);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.9rem;
  padding: 1em 2em;
  border: 2px solid var(--color-cream);
  background: var(--color-cream);
  color: var(--color-terracotta);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.widget-submit button[type="submit"]:hover,
.widget-submit button[type="submit"]:focus-visible {
  background: transparent;
  color: var(--color-cream);
}
.widget-submit button[type="submit"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Validierungsfehler */
.widget .error,
.widget input.error,
.widget textarea.error { border-color: #c0392b; }
.widget p.error,
p.error {
  color: #c0392b;
  font-size: 0.85rem;
  margin: 0.25rem 0 0;
}

/* AJAX-Erfolgsmeldung */
.form-success {
  padding: 2rem 0;
  text-align: center;
}
.form-success h3 {
  color: inherit;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  margin-bottom: 0.5rem;
}
.form-success p {
  font-size: 1.1rem;
  margin: 0;
  max-width: 36ch;
  margin-inline: auto;
  font-style: italic;
}

/* ================================================================ Footer */
#footer {
  background: var(--color-navy);
  color: var(--color-cream);
  padding-block: 3rem;
}
.site-footer {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  display: grid;
  gap: 0.75rem;
  text-align: center;
}
.site-footer .footer-tagline {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 1.1rem;
}
.site-footer .footer-meta {
  font-family: var(--font-display-alt);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.85rem;
}
.site-footer .footer-meta a { color: var(--color-cream); opacity: 0.75; }
.site-footer .footer-meta a:hover { opacity: 1; }
.site-footer .footer-copyright {
  font-family: var(--font-display-alt);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-top: 0.5rem;
}

/* ================================================== Dekorative Elemente
   3-Kreis-Motiv als Section-Akzent — Echo aus dem WortBühne-Logo
   (Farbenspiel: drei Kreise, gestaffelte Größen).
   Pro Section variabel platziert für visuellen Rhythmus.            */

/* Standard-Dekoration oben rechts: 3 Kreise gestaffelt (Logo-Echo)
   via box-shadow-Stack auf einem einzigen Pseudo-Element. Skaliert
   mit clamp() für das Hauptkreis-Maß; die anderen zwei sind als
   Box-Shadow-Spreads relativ dazu. currentColor wird sauber geerbt. */
.section--navy::before,
.section--forest::before,
.section--mustard::before,
.section--sage::before,
.section--terracotta::before,
.section--cream-mustard::before {
  content: '';
  position: absolute;
  width: clamp(80px, 9vw, 130px);
  height: clamp(80px, 9vw, 130px);
  top: clamp(2.5rem, 5vw, 5rem);
  right: clamp(7rem, 12vw, 12rem);
  border-radius: 50%;
  background: currentColor;
  opacity: 0.08;
  pointer-events: none;
  /* mittlerer Kreis (rechts oben versetzt) + kleiner Kreis (rechts unten) */
  box-shadow:
    clamp(80px, 9vw, 130px) clamp(-30px, -3vw, -50px) 0 clamp(-25px, -3vw, -45px) currentColor,
    clamp(130px, 14vw, 200px) clamp(20px, 2vw, 30px) 0 clamp(-50px, -5vw, -75px) currentColor;
}

/* Manche Sections: zusätzlich flächiger Akzent links unten — Halbkreis */
.section--verlag::after,
.section--navy::after,
.section--coaching::after,
.section--mustard::after {
  content: '';
  position: absolute;
  width: clamp(220px, 30vw, 460px);
  height: clamp(220px, 30vw, 460px);
  border-radius: 50%;
  background: currentColor;
  opacity: 0.05;
  bottom: clamp(-6rem, -10vw, -10rem);
  left: clamp(-6rem, -10vw, -10rem);
  pointer-events: none;
}

/* Andere Sections: flächiger, dezenter Kreis-Akzent unten —
   gleiche Farbsprache wie Verlag/Coaching, nur kleiner und woanders. */
.section--literatur::after,
.section--forest::after,
.section--team::after,
.section--sage::after {
  content: '';
  position: absolute;
  width: clamp(180px, 22vw, 320px);
  height: clamp(180px, 22vw, 320px);
  border-radius: 50%;
  background: currentColor;
  opacity: 0.06;
  bottom: clamp(-4rem, -7vw, -7rem);
  right: clamp(6vw, 10vw, 12vw);
  pointer-events: none;
}

/* Kontakt: kompletter Pattern-Wash für visuelle Klimax am Ende */
.section--terracotta::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 12% 88%, rgba(250, 243, 227, 0.10) 0, rgba(250, 243, 227, 0) 38%),
    radial-gradient(circle at 88% 18%, rgba(250, 243, 227, 0.08) 0, rgba(250, 243, 227, 0) 32%);
  pointer-events: none;
}

/* ============================================================ Responsive */
@media (max-width: 720px) {
  .site-header {
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-block: 0.5rem;
    height: auto;
  }
  #header { height: auto; }
  html { scroll-padding-top: 120px; }
  .main-nav ul {
    justify-content: center;
    gap: 1rem;
  }
  .main-nav a {
    font-size: 0.78rem;
    letter-spacing: 0.12em;
  }
  .section { padding-block: 4.5rem; }
  .section--hero { min-height: auto; padding-block: 5rem 4rem; }
}

@media print {
  .main-nav, #footer { display: none; }
  body { font-size: 11pt; background: white; color: black; }
  .section { background: white !important; color: black !important; padding-block: 1rem; }
}