/* =========================================================
St. Michaelis – Modul-Stylesheet (hero, spalter, karussell,
slideshow, teams, flipbook, instagram + Musik-Design)
Baut auf main.css auf und nutzt die --st-* Design-Tokens.
========================================================= */
/* ---------- Tokens an Theme koppeln (Michel-Fallbacks) ---------- */
:root{
--stm-primary:var(--st-color-primary,#002F5D);
--stm-accent:var(--st-color-accent,#B51F29);
--stm-lightblue:var(--st-color-lightblue,#CAD9E0);
--stm-midblue:var(--st-color-secondary,#034B91);
--stm-gold:var(--st-color-gold,#D1AC57);
--stm-gap:var(--st-space-m,2rem);
}
/* ---------- Headline-Farben generell (blau / rot) für ALLE Module ---------- */
.module__headline-1{display:block;color:var(--st-color-primary,#002F5D);}
.module__headline-2{display:block;color:var(--st-color-accent,#B51F29);}
/* ---------- Button-Variante Secondary (main.css stylt .btn/.btn--primary) ---------- */
/* 31.07.: Altlast entfernt - .btn--secondary bekam frueher zusaetzlich einen
2px-inset-Schatten zur 1px-Kontur (wirkte "zu fett"). Styling: Buttons v2 unten. */
/* =========================================================
Spalter 1–4
========================================================= */
.module--spalter .cols__row{display:grid;gap:var(--stm-gap);align-items:start;}
.module--spalter-1 .cols__row{grid-template-columns:1fr;}
.module--spalter-2 .cols__row{grid-template-columns:1fr 1fr;}
.module--spalter-3 .cols__row{grid-template-columns:repeat(3,1fr);}
.module--spalter-4 .cols__row{grid-template-columns:repeat(4,1fr);}
.module__inner.split-70-30 .cols__row{grid-template-columns:7fr 3fr;}
.module__inner.split-30-70 .cols__row{grid-template-columns:3fr 7fr;}
.spalter__head{margin-bottom:0;}
.spalter__head .module__headline{margin-bottom:0;}
.module--spalter .module__inner{grid-template-columns:1fr;row-gap:1.5rem;}
/* Bild-Text 2-Spalter: Kopf in Textspalte, Bild volle Spaltenhoehe oben-buendig */
.has-bildtext .cols__row{align-items:stretch;}
.has-bildtext .spalter__head{margin-bottom:1rem;}
.has-bildtext .col--type-image{align-self:stretch;min-height:340px;}
/* 12.08. Ticket "Fehler Bilddarstellung bei Mehr anzeigen": Ist der Text AUFGEKLAPPT,
darf die Bildspalte nicht mitwachsen (stretch + cover zoomte das Bild extrem auf).
Hook = is-open am Toggle-Button; Browser ohne :has() behalten das bisherige Verhalten. */
.has-bildtext:has(.col__more-toggle.is-open) .col--type-image{align-self:flex-start;min-height:0;}
.has-bildtext .col--type-image .col__media{height:100%;margin:0;}
.has-bildtext .col--type-image .col__img,.has-bildtext .col--type-image img{height:100%;width:100%;object-fit:cover;display:block;}
/* Video-Facade in Spalten (YouTube/Vimeo): Poster + Play -> Embed beim Klick */
.col__media--video{position:relative;margin-bottom:var(--st-space-s,1rem);}
.col__video-facade{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;padding:0;cursor:pointer;background:var(--st-color-primary,#002F5D) 50%/cover no-repeat;overflow:hidden;}
.col__video-facade::after{content:"";position:absolute;inset:0;background:rgba(0,47,93,.18);transition:background .2s ease;}
.col__video-facade:hover::after{background:rgba(0,47,93,.04);}
.col__video-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:66px;height:66px;border-radius:999px;background:rgba(255,255,255,.92);z-index:1;box-shadow:0 4px 18px rgba(0,0,0,.25);}
.col__video-play::before{content:"";position:absolute;top:50%;left:56%;transform:translate(-50%,-50%);border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent var(--st-color-primary,#002F5D);}
.col__video-embed{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;margin-bottom:var(--st-space-s,1rem);}
.col__video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
/* Video im Bild-Text-Spalter: FESTES 16:9 statt Hoehe der Textspalte (31.07.) */
.has-bildtext .col--type-video{align-self:start;}
.has-bildtext .col--type-video .col__media--video{height:auto;margin:0;}
.has-bildtext .col--type-video .col__video-facade,.has-bildtext .col--type-video .col__video-embed{aspect-ratio:16/9;height:auto;margin:0;}
.module__inner.is-intro .spalter__head .module__kicker{margin-bottom:.35em;}
.module__inner.is-intro .spalter__head{text-align:center;max-width:872px;margin-left:auto;margin-right:auto;}
.module--spalter-1 .module__inner.is-intro{max-width:872px;margin-inline:auto;}
/* Intro-Checkbox: Inhalt IMMER zentrieren - ueberschreibt jede WYSIWYG-Ausrichtung
(inline text-align aus dem Editor) per !important (31.07.). */
.module__inner.is-intro .col__text,
.module__inner.is-intro .col__text *{text-align:center!important;}
.module__inner.is-intro .col__text p>a.btn{margin-left:.3rem;margin-right:.3rem;}
.module__inner.hl-xl .module__headline{font-size:var(--stm-h3-size);line-height:var(--stm-h3-lh);} /* 21.08.: hl-xl ~ Headline XL */
/* 09.09. (Maik, "Modul Intro"): XL-Intro fuer die Homepage - Intro-Variante mit Headline-Groesse XL
(Select "Headline-Groesse" auf XL = H3-Token "Headline XL"). Die Intro-Kappungen (872px) gelten
dann nur noch fuer die COPY; Kopf/Headline duerfen in den vollen Satzspiegel wachsen (Mock:
"XL INTRO HEADLINE / HOMEPAGE" laeuft deutlich breiter als die 872px-Lesespalte). */
.module--spalter-1 .module__inner.is-intro.hl-xl{max-width:none;}
.module__inner.is-intro.hl-xl .spalter__head{max-width:1320px;width:100%;} /* width:100% noetig - die is-intro-Basisregel zentriert per margin:auto, und Auto-Margins machen GRID-Items (.cols ist ein Grid) shrink-to-fit: ohne width sass der Kopf auf max-content (724px) statt auf der 1320px-Kappe */
.module__inner.is-intro.hl-xl .spalter__head .module__headline{max-width:none;}
.module__inner.is-intro.hl-xl .cols__row{max-width:872px;margin-inline:auto;} /* Copy bleibt in der bewaehrten Intro-Lesebreite */
.col__media{margin-bottom:var(--st-space-s,1rem);}
.col__media img,.col__media video{width:100%;height:auto;display:block;}
.module--spalter-1 .col__media img{width:auto;max-width:100%;} /* 02.08.: 1-Spalter nie hochskalieren, Bild vollstaendig zeigen (Kundenticket) */
.col__subhead{margin:0 0 .5em;line-height:1.15;color:var(--st-color-primary,#002F5D);
text-transform:uppercase;font-weight:700;}
.col__subhead--gross{font-size:clamp(1.3rem,2vw,1.6rem);}
.col__subhead--klein{font-size:1.05rem;}
.col__text{font-size:var(--stm-copy-size,1.25rem);line-height:var(--stm-copy-lh,1.5);} /* 03.09. (Maik, "Globale Headlines"): Zweispalter-Copy = Standard-Copy 20/30 (erbte vorher 18px vom Body) */
.col__cta{margin-top:var(--st-space-s,1rem);display:flex;gap:12px;flex-wrap:wrap;}
@media (max-width:900px){
.module--spalter-2 .cols__row,.module--spalter-3 .cols__row,.module--spalter-4 .cols__row,
.module__inner.split-70-30 .cols__row,.module__inner.split-30-70 .cols__row{grid-template-columns:1fr;}
}
/* =========================================================
Hero-Slider
========================================================= */
.hero-slider{position:relative;overflow:hidden;}
/* 01.08.: Satzspiegel-Breite des Heros wirkte nie - es gab keine Regel fuer :not(.is-full) (Kundenticket) */
.module--hero:not(.is-full){width:calc(100% - 2*var(--st-gutter,60px));max-width:1200px;margin-left:auto;margin-right:auto;}
/* 31.07.: FESTE Hero-Hoehen statt Browserhoehe (Figma: Homepage 717, Verteiler 500) */
.hero-slider--s{min-height:0;height:500px;}
.hero-slider--m{min-height:0;height:600px;}
.hero-slider--l{min-height:0;height:717px;}
@media(max-width:782px){ /* Figma Mobile: 600/444 */
.hero-slider--s{height:444px;}
.hero-slider--m{height:520px;}
.hero-slider--l{height:600px;}
}
.hero-slider__track{position:absolute;inset:0;}
.hero-slider__slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease,transform .6s ease;}
.hero-slider__slide.is-active{opacity:1;z-index:1;}
.hero-slider:not(.is-ready) .hero-slider__slide:first-child{opacity:1;}
.hero-slider.is-single .hero-slider__slide{opacity:1;position:relative;}
.hero-slider.effect-slide .hero-slider__slide{opacity:1;}
.hero-slider .hero{height:100%;}
.hero-slider__slide.hero{position:absolute;display:flex;align-items:center;}
.hero-slider.is-single .hero-slider__slide.hero{position:relative;}
.hero__media{position:absolute;inset:0;z-index:0;}
.hero__media img,.hero__video{width:100%;height:100%;object-fit:cover;}
/* 13.09. R10 ("Musik-Design"-Nachtrag, Hero-Video): YouTube/Vimeo als Hintergrund-Video.
Der Wrapper ist Size-Container (er ist inset:0 absolut, seine Groesse haengt nie vom Inhalt ab),
das iframe deckt per 16:9-Cover-Formel (cqw/cqh) die Flaeche wie object-fit:cover; pointer-events
aus = kein Player-Hover/Klick, der Hero bleibt durchklickbar wie mit Bild. Sitzt INNERHALB von
.hero__media, damit der Musik-"M"-Clip (has-musik-m) auch das Video beschneidet. */
.hero__ytwrap{position:absolute;inset:0;overflow:hidden;pointer-events:none;container-type:size;}
.hero__ytwrap iframe{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:0;width:max(100cqw,177.78cqh);height:max(100cqh,56.25cqw);}
/* Musik V-Ausschnitt: fester Winkel -> Oberkante skaliert mit Hero-Hoehe (L/M/S) */
/* 13.09. (Maik, "Modul Musik Design"): das weisse "M" (Bild-Clip) haengt jetzt an der EIGENEN
Hero-Checkbox "Musik-Bilder" (Klasse has-musik-m, hero.php) statt am Musik-Design - "man
moechte haeufig die blauen Headlines, aber nicht das weisse M". Der transparente Kasten
gehoert zum M-Look (ragte sonst ins V-Dreieck) und wandert mit. ACHTUNG Altbestand:
bestehende Musik-Heros zeigen das M erst wieder, wenn die neue Checkbox gesetzt ist. */
.has-musik-m .hero__media{clip-path:polygon(25% 0,75% 0,50% 100%);}
.hero-slider--m.has-musik-m .hero__media{clip-path:polygon(29% 0,71% 0,50% 100%);}
.hero-slider--s.has-musik-m .hero__media{clip-path:polygon(34% 0,66% 0,50% 100%);}
/* Michel-/Musik-Design: weisser Kasten entfaellt (31.07., ragte ins V-Dreieck) */
.hero-slider.has-musik-m .hero__box{background:transparent;}
/* 10.08. (Asana "Hero-Headline"): Box auto-breit (P rechts = P links), bisherige Breite
als MAXIMALbreite, unten 20px weniger Padding (2.5rem-20px = 1.25rem). */
.hero__box{position:relative;z-index:1;background:rgba(255,255,255,.85);padding:2.5rem 2.5rem 1.25rem;width:auto;max-width:clamp(440px,36vw,680px);
margin-left:0;}
.hero__topline{color:var(--st-color-accent,#B51F29);font-family:var(--st-font-head,inherit);text-transform:uppercase;font-weight:700;
font-size:1.05rem;letter-spacing:0;margin:0 0 .6em;}
.hero__headline{margin:0 0 .5em;font-family:var(--st-font-head,inherit);font-weight:700;text-transform:uppercase;line-height:.9;letter-spacing:0;
font-size:clamp(2.5rem,5.2vw,5rem);
-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;} /* 10.08.: automatischer Umbruch (Asana "Hero-Headline", Screenshot Segensmomente) */
.hero__text{color:var(--st-color-text,#1a1a1a);margin:0 0 1.2em;}
.hero__cta.btn{margin-top:.25rem;}
.hero-slider__nav{position:absolute;right:24px;bottom:24px;z-index:3;display:flex;gap:8px;}
.hero-slider__arrow{width:44px;height:44px;padding:0;box-sizing:border-box;border-radius:50%;border:2px solid rgba(255,255,255,.85);background:transparent;color:rgba(255,255,255,.85);cursor:pointer;display:flex;align-items:center;justify-content:center;} /* 04.08.: Outline-Pfeile wie G5 (Kundenticket) */
.hero-slider__arrow svg{max-width:none;flex:0 0 auto;}
.hero-slider__arrow:hover{background:rgba(255,255,255,.15);color:#fff;border-color:#fff;}
.hero-slider__dots{position:absolute;left:50%;transform:translateX(-50%);bottom:28px;z-index:3;display:flex;gap:8px;} /* 04.08.: mittig (Kundenticket) */
.hero-slider__dots button{width:10px;height:10px;border-radius:999px;border:0;background:rgba(255,255,255,.6);cursor:pointer;padding:0;}
.hero-slider__dots button[aria-current="true"]{background:#fff;}
@media(max-width:900px){ .hero__box{margin:0 var(--st-pad,20px) 0 0;width:auto;max-width:none;padding:1.75rem;} } /* 28.08. (Maik): HL-Flaeche mobil IMMER buendig am linken Browserrand (links 0, rechte Luft bleibt) */
/* =========================================================
Vanilla-Slider (Karussell, Slideshow, Spalten-Slideshow)
========================================================= */
.stm-slider{position:relative;overflow:hidden;}
.stm-slider__track{position:relative;}
.stm-slider__slide{position:absolute;inset:0;opacity:0;transition:opacity .5s ease,transform .5s ease;}
.stm-slider__slide.is-active{opacity:1;position:relative;} /* aktive Folie traegt die Hoehe (29.07.) */
/* 14.09. (Kunde, "Slider Mehrspalter"): Swipe-Unterstuetzung - is-adj macht den beim Ziehen
mitlaufenden Nachbar-Slide sichtbar (JS setzt/entfernt die Klasse); pan-y laesst vertikales
Wischen als Seiten-Scroll durch und reserviert horizontal fuers Sliden. Beides NUR am
generischen .stm-slider (Hero-Slider unberuehrt). */
.stm-slider__slide.is-adj{opacity:1;}
.stm-slider[data-stm-slider] .stm-slider__track{touch-action:pan-y;}
.stm-slider:not(.is-ready) .stm-slider__slide:first-child{position:relative;opacity:1;}
.stm-slider__slide img{width:100%;height:auto;display:block;}
.stm-slider__prev,.stm-slider__next{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
width:44px;height:44px;border:0;border-radius:999px;background:rgba(255,255,255,.9);cursor:pointer;font-size:1.1rem;}
.stm-slider__prev{left:12px;} .stm-slider__next{right:12px;}
.stm-slider__prev,.stm-slider__next{display:flex;align-items:center;justify-content:center;} /* 01.08.: SVG-Pfeile zentrieren */
.stm-slider__prev svg,.stm-slider__next svg{display:block;flex:0 0 auto;}
.stm-slider__dots{position:absolute;left:0;right:0;bottom:12px;z-index:3;display:flex;gap:8px;justify-content:center;}
.stm-slider__dots button{width:10px;height:10px;border-radius:999px;border:0;background:rgba(0,0,0,.25);cursor:pointer;padding:0;}
.stm-slider__dots button[aria-current="true"]{background:var(--st-color-primary,#002F5D);}
/* Karussell (Kacheln) – Karten-Karussell */
.stm-cards-carousel{position:relative;}
.stm-cards__head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--st-space-m,2rem);margin-bottom:var(--st-space-m,2rem);flex-wrap:wrap;}
.stm-cards__heading{max-width:60ch;}
.stm-cards__heading .module__headline{margin:.2em 0 0;}
.stm-cards__controls{display:flex;align-items:center;gap:var(--st-space-s,1rem);}
.stm-cards__arrows{display:flex;gap:.5rem;}
.stm-cards__arrow{width:44px;height:44px;border-radius:999px;border:1px solid var(--st-color-primary,#002F5D);
background:#fff;color:var(--st-color-primary,#002F5D);font-size:1.5rem;line-height:1;cursor:pointer;
display:flex;align-items:center;justify-content:center;transition:background .15s ease,color .15s ease;}
.stm-cards__arrow:hover{background:var(--st-color-primary,#002F5D);color:#fff;}
.stm-cards__arrow[disabled]{opacity:.35;cursor:default;}
.stm-cards__arrow[disabled]:hover{background:#fff;color:var(--st-color-primary,#002F5D);}
.stm-cards{list-style:none;margin:0;padding:0 0 .5rem;display:grid;grid-auto-flow:column;
grid-auto-columns:minmax(260px,1fr);gap:var(--st-space-m,2rem);
overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
scrollbar-width:none;-ms-overflow-style:none;}
.stm-cards::-webkit-scrollbar{display:none;}
@media(min-width:700px){ .stm-cards{grid-auto-columns:calc((100% - 3*var(--st-space-m,2rem))/4);} }
.stm-card{scroll-snap-align:start;}
.stm-card__inner{display:flex;flex-direction:column;gap:.85rem;text-decoration:none;color:inherit;}
.stm-card__media{display:block;aspect-ratio:1/1;overflow:hidden;background:var(--st-color-mist,#CAD9E0);border-radius:2px;}
.stm-card__img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease;}
a.stm-card__inner:hover .stm-card__img{transform:scale(1.04);}
.stm-card__title{font-family:var(--st-font-head,inherit);font-weight:700;text-transform:uppercase;
letter-spacing:.04em;font-size:1.05rem;color:var(--st-color-primary,#002F5D);}
.stm-cards__dots{display:flex;gap:.5rem;justify-content:center;margin-top:var(--st-space-m,2rem);}
.stm-cards__dots button{width:9px;height:9px;border-radius:999px;border:0;background:rgba(0,47,93,.25);cursor:pointer;padding:0;}
.stm-cards__dots button[aria-current="true"]{background:var(--st-color-primary,#002F5D);}
@media(max-width:700px){ .stm-cards{grid-auto-columns:78%;} .stm-cards__arrows{display:none;} }
/* =========================================================
Slideshow / Galerie – Raster+Lightbox, Thumbnail-Slider, Coverflow
========================================================= */
.stm-ss__head{margin-bottom:var(--st-space-m,2rem);}
.stm-ss__head .module__headline{margin:0;}
.stm-ss__head .module__kicker{margin-bottom:8px;} /* 01.09. (Maik, Galerie-Runde): Abstand Topline -> HL um 1/3 verringert (12 -> 8px; HL-margin-top raus, sonst gewinnt er beim Margin-Collapse) */
.stm-ss__caption{margin:.5rem 0 0;font-size:.88rem;line-height:1.4;color:var(--st-color-slate,#5C788E);}
.stm-ss__caption-text{color:var(--st-color-ink,#1a1a1a);}
.stm-ss__credit{font-style:italic;opacity:.85;}
/* --- Raster + Lightbox --- */
.stm-gallery-grid{display:grid;gap:var(--st-space-s,1rem);grid-template-columns:repeat(3,1fr);}
.stm-gallery-grid--2{grid-template-columns:repeat(2,1fr);}
.stm-gallery-grid--3{grid-template-columns:repeat(3,1fr);}
.stm-gallery-grid--4{grid-template-columns:repeat(4,1fr);}
@media(max-width:900px){ .stm-gallery-grid,.stm-gallery-grid--3,.stm-gallery-grid--4{grid-template-columns:repeat(2,1fr);} }
@media(max-width:520px){ .stm-gallery-grid,.stm-gallery-grid--2,.stm-gallery-grid--3,.stm-gallery-grid--4{grid-template-columns:1fr;} }
.stm-gallery__item{margin:0;}
.stm-gallery__btn{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;overflow:hidden;border-radius:2px;}
.stm-gallery__img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3;transition:transform .4s ease;}
.stm-gallery__btn:hover .stm-gallery__img{transform:scale(1.04);}
/* Lightbox-Overlay (per JS injiziert) */
.stm-lightbox{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
background:rgba(0,20,40,.92);opacity:0;visibility:hidden;transition:opacity .25s ease;}
.stm-lightbox.is-open{opacity:1;visibility:visible;}
.stm-lightbox__img{max-width:88vw;max-height:78vh;object-fit:contain;display:block;box-shadow:0 10px 40px rgba(0,0,0,.4);}
.stm-lightbox__cap{position:absolute;left:0;right:0;bottom:24px;text-align:center;color:#fff;font-size:.95rem;padding:0 1rem;}
.stm-lightbox__cap .stm-ss__credit{color:rgba(255,255,255,.75);}
.stm-lightbox__btn{position:absolute;top:50%;transform:translateY(-50%);width:54px;height:54px;border:0;border-radius:999px;
background:rgba(255,255,255,.15);color:#fff;font-size:2rem;line-height:1;cursor:pointer;transition:background .15s;}
.stm-lightbox__btn:hover{background:rgba(255,255,255,.3);}
.stm-lightbox__prev{left:2vw;} .stm-lightbox__next{right:2vw;}
.stm-lightbox__close{position:absolute;top:20px;right:24px;width:44px;height:44px;font-size:1.6rem;transform:none;}
@media(max-width:600px){ .stm-lightbox__btn{width:44px;height:44px;font-size:1.5rem;} }
/* --- Thumbnail-Slider --- */
.stm-thumbs__stage{position:relative;background:var(--st-color-mist,#CAD9E0);border-radius:2px;overflow:hidden;}
.stm-thumbs__slide{margin:0;display:none;}
.stm-thumbs__slide.is-active{display:block;}
.stm-thumbs__img{width:100%;max-height:70vh;object-fit:contain;display:block;background:#000;}
.stm-thumbs__stage .stm-ss__caption{position:absolute;left:0;right:0;bottom:0;margin:0;padding:.75rem 1rem;
background:linear-gradient(transparent,rgba(0,20,40,.75));color:#fff;}
.stm-thumbs__stage .stm-ss__caption .stm-ss__caption-text{color:#fff;}
.stm-thumbs__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:46px;height:46px;border:0;border-radius:999px;
background:rgba(255,255,255,.85);color:var(--st-color-primary,#002F5D);font-size:1.6rem;line-height:1;cursor:pointer;}
.stm-thumbs__arrow[data-dir="prev"]{left:12px;} .stm-thumbs__arrow[data-dir="next"]{right:12px;}
.stm-thumbs__nav{list-style:none;margin:.75rem 0 0;padding:0;display:flex;gap:.5rem;overflow-x:auto;scrollbar-width:thin;}
.stm-thumbs__thumb{padding:0;border:2px solid transparent;background:none;cursor:pointer;border-radius:2px;overflow:hidden;flex:0 0 auto;}
.stm-thumbs__thumb img{width:88px;height:64px;object-fit:cover;display:block;}
.stm-thumbs__thumb.is-active{border-color:var(--st-color-primary,#002F5D);}
/* --- Coverflow --- */
.stm-coverflow{position:relative;display:flex;align-items:center;gap:.5rem;}
.stm-coverflow__track{list-style:none;margin:0;padding:1rem 0;display:flex;align-items:center;justify-content:center;
gap:1rem;overflow:hidden;flex:1;min-height:0;}
.stm-coverflow__item{flex:0 0 auto;width:clamp(160px,42%,620px);opacity:.45;transform:scale(.82);
transition:opacity .4s ease,transform .4s ease;filter:saturate(.9);}
.stm-coverflow__item figure{margin:0;}
.stm-coverflow__item.is-active{opacity:1;transform:scale(1);filter:none;}
.stm-coverflow__img{width:100%;max-height:64vh;object-fit:contain;display:block;border-radius:2px;}
.stm-coverflow__arrow{flex:0 0 auto;width:48px;height:48px;border:1px solid var(--st-color-primary,#002F5D);border-radius:999px;
background:#fff;color:var(--st-color-primary,#002F5D);font-size:1.6rem;line-height:1;cursor:pointer;transition:background .15s,color .15s;}
.stm-coverflow__arrow:hover{background:var(--st-color-primary,#002F5D);color:#fff;}
/* =========================================================
Teams
========================================================= */
.stm-team__head{margin-bottom:var(--st-space-m,2rem);}
.stm-team__head .module__headline{margin:.2em 0 0;}
/* Raster */
.stm-team-grid{display:grid;gap:2.5rem 24px;grid-template-columns:repeat(3,1fr);} /* 01.08.: Spalten-Gap 24px nach Figma */
.stm-team-grid--2{grid-template-columns:repeat(2,1fr);}
.stm-team-grid--3{grid-template-columns:repeat(3,1fr);}
.stm-team-grid--4{grid-template-columns:repeat(4,1fr);}
@media(max-width:900px){ .stm-team-grid,.stm-team-grid--3,.stm-team-grid--4{grid-template-columns:repeat(2,1fr);} }
@media(max-width:560px){ .stm-team-grid,.stm-team-grid--2,.stm-team-grid--3,.stm-team-grid--4{grid-template-columns:1fr;} }
/* Personenkarte */
.stm-team-card{display:flex;flex-direction:column;height:100%;}
.stm-team-card__media{aspect-ratio:3/4;overflow:hidden;background:var(--st-color-mist,#CAD9E0);border-radius:0;margin-bottom:1rem;} /* 02.09. (Maik): keine abgerundeten Ecken */
.stm-team-card__img{width:100%;height:100%;object-fit:cover;display:block;}
.stm-team-card__body{display:flex;flex-direction:column;gap:.35rem;}
.stm-team-card__name{margin:0;font-family:var(--st-font-head,inherit);font-size:1.2rem;font-weight:700;color:var(--st-color-primary,#002F5D);}
.stm-team-card__role{margin:0 0 .35rem;font-weight:600;color:var(--st-color-accent,#B51F29);}
.stm-team-card__text{font-size:1.25rem;line-height:1.5;margin:.5rem 0 0;}
.stm-team-card__contact{margin:.25rem 0 0;font-size:.92rem;line-height:1.5;}
.stm-team-card__contact dd{margin:0;}
.stm-team-card__contact dd a{color:var(--st-color-primary,#002F5D);text-decoration:none;}
.stm-team-card__contact dd a:hover{text-decoration:underline;}
.stm-team-card__contact-label{font-weight:700;color:var(--st-color-primary,#002F5D);margin-top:.15rem;}
/* 02.09.: Alt-Regeln fuer __more entfernt - Typo/Farbe/Hover kommen von "Textlink mit Pfeil (klein)" (btn--text btn--sm), Layout unten bei den Karten-Regeln */
/* Musik-Design: Akzente blau statt rot */
.is-musik .stm-team-card__role,
.is-musik .stm-team-card__more{color:var(--st-color-primary,#002F5D);}
/* Karussell-Variante nutzt die stm-cards-Mechanik */
.stm-cards--team{grid-auto-columns:minmax(240px,1fr);}
@media(min-width:700px){ .stm-cards--team{grid-auto-columns:calc((100% - 2*var(--st-space-m,2rem))/3);} }
.stm-cards__controls--top{display:flex;justify-content:flex-end;margin-bottom:1rem;}
/* =========================================================
Downloads – Datei-Karten
========================================================= */
/* =========================================================
Flipbook
========================================================= */
.flipbook{max-width:900px;margin:0 auto;text-align:center;}
.flipbook__cover img{width:100%;height:auto;display:block;margin-bottom:var(--st-space-s,1rem);}
.flipbook__embed{position:relative;padding-top:66%;}
.flipbook__embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.flipbook__open{margin-top:var(--st-space-s,1rem);}
/* =========================================================
Instagram / Social
========================================================= */
.instagram__handle{margin:0 0 var(--st-space-s,1rem);font-weight:700;color:var(--st-color-primary,#002F5D);}
.instagram__handle a{color:inherit;text-decoration:none;}
.instagram-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.instagram-item{position:relative;display:block;overflow:hidden;aspect-ratio:4/5;background:var(--st-color-bg-alt,#f2f3f5);}
.instagram-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease;}
.instagram-item:hover img{transform:scale(1.04);}
.instagram-item__cap{position:absolute;inset:auto 0 0 0;z-index:3;padding:8px;font-size:.8rem;background:rgba(0,47,93,.7);color:#fff;
opacity:0;transition:.2s;}
.instagram-item:hover .instagram-item__cap{opacity:1;}
.instagram__feed-placeholder{padding:var(--st-space-l,4rem);border:1px dashed var(--st-color-border,#e2e4e8);text-align:center;color:var(--st-color-muted,#5a5a5a);}
@media(max-width:900px){ .instagram-grid{grid-template-columns:repeat(2,1fr);} }
/* =========================================================
Musik-Design: Topline + Headline komplett Primärblau
========================================================= */
.is-musik .module__kicker,
.is-musik .hero__topline,
.is-musik .module__headline,
.is-musik .module__headline-1,
.is-musik .module__headline-2,
.is-musik .hero__headline,
.is-musik .hero__headline .module__headline-1,
.is-musik .hero__headline .module__headline-2,
.is-musik .col__subhead,
.is-musik .stm-hl__last{color:var(--st-color-primary,#002F5D)!important;}
/* 14.09. (Maik, "Musik Design"): Die fruehe Konzept-Regel ".is-musik .btn--primary = Outline"
ist RAUS - der im Editor gewaehlte "CTA-Button Blau" muss auch im Musik-Design als gefuellter
blauer Button erscheinen (Backend zeigte ihn korrekt, Frontend machte Outline daraus).
Der Musik-Hover bleibt als eigene Regel bestehen (s. globaler Musik-Block, hart #B51F29 -
die Standard-Hover-Var --st-color-accent ist im is-musik-Scope auf BLAU remappt). */
/* =========================================================
Spenden
========================================================= */
.spenden__purpose{font-weight:700;color:var(--st-color-primary,#002F5D);margin:0 0 1rem;}
.spenden__amounts{list-style:none;margin:0 0 1.5rem;padding:0;display:flex;gap:12px;flex-wrap:wrap;}
.spenden__amount{border:2px solid var(--st-color-primary,#002F5D);border-radius:8px;padding:.6rem 1rem;text-align:center;min-width:88px;}
.spenden__amount-value{display:block;font-weight:800;font-size:1.25rem;color:var(--st-color-primary,#002F5D);}
.spenden__amount-label{display:block;font-size:.85rem;color:var(--st-color-muted,#5a5a5a);}
/* =========================================================
Tickets
========================================================= */
.tickets-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--st-space-m,2rem);margin-bottom:1.5rem;}
.ticket-card{border:1px solid var(--st-color-border,#e2e4e8);border-radius:8px;padding:1.5rem;display:flex;flex-direction:column;}
.ticket-card__title{margin:0 0 .25em;color:var(--st-color-primary,#002F5D);}
.ticket-card__price{margin:0 0 .5em;font-weight:800;font-size:1.4rem;color:var(--st-color-accent,#B51F29);}
.ticket-card__desc{margin:0 0 1rem;font-size:.95rem;line-height:1.5;flex:1;}
@media(max-width:900px){ .tickets-grid{grid-template-columns:1fr;} }
/* =========================================================
Glockengeläut (Audio)
========================================================= */
.glocken{list-style:none;margin:0;padding:0;display:grid;gap:1rem;}
.glocken__item{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px 20px;
padding:1rem 1.25rem;background:var(--st-color-bg-alt,#f2f3f5);border-radius:8px;}
.glocken__title{font-weight:700;color:var(--st-color-primary,#002F5D);}
.glocken__player{width:100%;max-width:360px;grid-column:2;}
.glocken__info{grid-column:1/-1;font-size:.9rem;color:var(--st-color-muted,#5a5a5a);}
@media(max-width:640px){ .glocken__item{grid-template-columns:1fr;} .glocken__player{grid-column:1;max-width:none;} }
/* =========================================================
Button-System (Figma) – Pill, Pfeil, Zustände, SM/2XL
========================================================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;font-family:var(--st-font-head,inherit);font-weight:500;font-size:1.25rem;line-height:1;height:45px;padding:0 1.5rem;border-radius:999px;border:1px solid transparent;text-decoration:none;cursor:pointer;white-space:nowrap;-webkit-appearance:none;appearance:none;transition:all .3s ease-in-out;} /* 05.09. (Maik, "Modul GLOBAL: Buttons"): Padding aller CTAs um 1/4 verringert (2 -> 1.5rem); Hoehen bleiben (Mock markiert nur die Seiten, Rueckfrage Johann bestaetigt) */
.btn:hover,.btn:focus-visible,.btn:active{text-decoration:none;} /* main.css a:hover unterstreicht sonst */
.btn--sm{height:37.5px;font-size:1rem;font-weight:400;padding:0 1.22rem;gap:.625em;} /* 07.09. R2 (Maik): Hoehe -1/4 (50 -> 37.5px) */ /* 05.09. (Maik): Padding -1/4 (1.625 -> 1.22rem) */
.btn__ico{font-size:1.1em;line-height:0;display:inline-flex;align-items:center;}
.btn__text{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;}
.btn__sub{font-weight:400;font-size:.76em;opacity:.9;}
/* 31.07. CTA-Finale: SVG-Pfeile statt Unicode-Zeichen - rendert bei ALLEN Usern
identisch (gepunktete Ersatz-Glyphen einzelner System-Fonts adé). Das Chevron hat
Pfeil-Groesse und wird beim Hover nur VERLAENGERT (rechts verankert). */
.btn--primary::after,.btn--secondary::after,.btn--primary-neg::after,.btn--text::after{content:"";display:inline-block;flex:0 0 auto;width:.62em;height:.95em;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 15'%3E%3Cpath d='M2 1.8 8 7.5 2 13.2' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right center/auto 100%;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 15'%3E%3Cpath d='M2 1.8 8 7.5 2 13.2' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right center/auto 100%;transition:all .3s ease-in-out;}
.btn--primary:hover::after,.btn--primary:focus-visible::after,.btn--primary:active::after,
.btn--secondary:hover::after,.btn--secondary:focus-visible::after,.btn--secondary:active::after,
.btn--primary-neg:hover::after,.btn--primary-neg:focus-visible::after,.btn--primary-neg:active::after,
.btn--text:hover::after,.btn--text:focus-visible::after,.btn--text:active::after{width:1.28em;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 15'%3E%3Cpath d='M1 7.5h16.4M12 1.8 18 7.5 12 13.2' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 15'%3E%3Cpath d='M1 7.5h16.4M12 1.8 18 7.5 12 13.2' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
.btn--arrow-left::after{transform:scaleX(-1);}
.btn--arrow-left{flex-direction:row-reverse;}
.btn--stacked::after,.btn--sound::after,.btn--rotate::after,.btn--ics::after,.btn--spenden::after,.btn--ticket::after,.btn--noarrow::after{content:none;}
.btn--primary{background:var(--st-color-primary,#002F5D);color:#fff;}
.btn--primary:hover,.btn--primary:focus-visible{background:var(--st-color-accent,#B51F29);color:#fff;}
.btn--primary:active{background:#8F1620;color:#fff;}
.btn--primary-neg{background:#fff;color:var(--st-color-primary,#002F5D);}
.btn--primary-neg:hover,.btn--primary-neg:focus-visible{background:#fff;color:var(--st-color-accent,#B51F29);}
.btn--primary-neg:active{color:#8F1620;}
.btn--secondary{background:#fff;color:var(--st-color-primary,#002F5D);border-color:var(--st-color-primary,#002F5D);}
.btn--secondary:hover,.btn--secondary:focus-visible{background:var(--st-color-secondary,#034B91);color:#fff;border-color:var(--st-color-secondary,#034B91);} /* 05.09. (Maik, Buttons-Ticket): CTA-Outline-States NEU - Hover Flaeche+Kontur #034B91, Typo+Icon weiss */
.btn--secondary:active{background:var(--st-color-primary,#002F5D);color:#fff;border-color:var(--st-color-primary,#002F5D);} /* 05.09. (Maik): Pressed/Active Flaeche+Kontur #002F5D, Typo+Icon weiss (Hover/Active-Farben getauscht gegenueber vorher) */
.btn--text{background:none;border:0;height:auto;padding:.25em 0;color:#222222;gap:.4em;font-weight:500;} /* 05.09. (Maik, Buttons-Ticket): Text-Link mit Pfeil - Schriftschnitt MEDIUM (war 700) + neue States: Default #222222 (war Primaerblau) */
.btn--text:hover,.btn--text:focus-visible{color:var(--st-color-secondary,#034B91);} /* Hover #034B91 */
.btn--text:active{color:var(--st-color-primary,#002F5D);} /* Pressed #002F5D */
.btn--text.btn--neg{color:#fff;}
.btn--text.btn--neg:hover{color:var(--st-color-lightblue,#CAD9E0);}
.btn--ics{background:#fff;color:var(--st-color-primary,#002F5D);border-color:var(--st-color-primary,#002F5D);}
.btn--ics:hover,.btn--ics:focus-visible{border-color:var(--st-color-secondary,#034B91);color:var(--st-color-secondary,#034B91);}
.btn--rotate{background:var(--st-color-primary,#002F5D);color:#fff;font-size:.9rem;height:40px;padding:0 1.1rem;}
.btn--stacked{height:auto;padding:.45rem 1.6rem;} /* 07.09. R2: vertikal -1/4 */
.btn:disabled,.btn.is-disabled,.btn[aria-disabled="true"]{background:#fff!important;color:var(--st-neutral-300,#B0B0B0)!important;border-color:var(--st-neutral-300,#B0B0B0)!important;cursor:default;pointer-events:none;}
.btn--text:disabled,.btn--text.is-disabled{background:none!important;border:0!important;color:var(--st-neutral-300,#B0B0B0)!important;}
/* 05.09. (Maik, Buttons-Ticket, "Generell gilt"): Mobile IMMER die kleine Version - GLOBAL fuer
alle CTA-Buttons und Text-Links (ersetzt die bisherigen Einzelregeln pro Modul, die bleiben
als engere Sonderfaelle bestehen). Grenze 1000px = mobile Navigation. Werte = .btn--sm
(Padding bereits -1/4); Text-Link (klein) = 1rem. Sonderhoehen (rotate/stacked) bleiben. */
@media (max-width:1000px){
.btn{height:37.5px;font-size:1rem;font-weight:400;padding:0 1.22rem;gap:.625em;} /* 07.09. R2: Hoehe -1/4 */
.btn--text{height:auto;padding:.25em 0;font-size:1rem;gap:.4em;font-weight:500;}
.btn--rotate{height:40px;font-size:.9rem;padding:0 .825rem;}
.btn--stacked{height:auto;padding:.45rem 1.2rem;}
}
.textlink{color:var(--st-color-accent,#B51F29);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s ease;}
.textlink:hover,.textlink:focus-visible{border-bottom-color:currentColor;}
/* =========================================================
Klickelemente (Figma) – Breadcrumb, Mehr-anzeigen, Navdots,
Scroll-down, Slider-Arrows (Zustände), Paginierung
========================================================= */
.stm-breadcrumb{font-size:.8rem;color:var(--st-neutral-400,#888);display:flex;flex-wrap:wrap;gap:.45em;align-items:center;}
.stm-breadcrumb a{color:var(--st-neutral-400,#888);text-decoration:none;}
.stm-breadcrumb a:hover{color:var(--st-color-primary,#002F5D);}
.stm-breadcrumb__sep{color:var(--st-neutral-300,#B0B0B0);font-size:.9em;}
.stm-breadcrumb__current{color:var(--st-neutral-950,#222);font-weight:700;}
.stm-more-toggle{background:none;border:0;cursor:pointer;color:var(--st-neutral-500,#6D6D6D);font-size:.95rem;display:inline-flex;align-items:center;gap:.6em;padding:.4em 0;}
.stm-more-toggle:hover{color:var(--st-color-primary,#002F5D);}
.stm-more-toggle__ico{width:.5em;height:.5em;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);display:inline-block;margin-top:-.18em;transition:transform .2s ease;}
.stm-more-toggle[aria-expanded="true"] .stm-more-toggle__ico{transform:rotate(-135deg);margin-top:.12em;}
.stm-cards__dots button,.stm-slider__dots button,.hero-slider__dots button,.stm-dots button{width:8px;height:8px;border-radius:999px;border:0;background:var(--st-neutral-300,#B0B0B0);cursor:pointer;padding:0;transition:width .2s ease,background .2s ease;}
.stm-cards__dots button[aria-current="true"],.stm-slider__dots button[aria-current="true"],.hero-slider__dots button[aria-current="true"],.stm-dots button[aria-current="true"]{width:26px;background:var(--st-color-primary,#002F5D);}
.stm-eq{display:inline-flex;gap:14px;align-items:flex-start;}
.stm-eq__col{position:relative;display:flex;flex-direction:column;gap:7px;align-items:center;}
.stm-eq__col > span{width:6px;height:6px;border-radius:999px;background:var(--st-neutral-300,#B0B0B0);}
.stm-eq__bar{position:absolute;left:50%;transform:translateX(-50%);width:6px;border-radius:999px;background:var(--st-color-primary,#002F5D);}
.stm-scroll-down{width:40px;height:40px;border-radius:999px;border:1.5px solid currentColor;background:none;color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;opacity:.85;transition:opacity .2s ease;font-size:1.05rem;line-height:0;}
.stm-scroll-down:hover{opacity:1;}
.stm-arrow{width:38px;height:38px;flex:0 0 auto;border-radius:999px;border:1.5px solid var(--st-color-primary,#002F5D);background:#fff;color:var(--st-color-primary,#002F5D);font-size:1.05rem;line-height:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,color .15s ease;}
.stm-arrow svg{display:block;} /* 17.08.: SVG-Pfeile exakt mittig (Font-Glyphen sassen schief) */
.stm-arrow:hover{background:var(--st-color-lightblue,#CAD9E0);}
.stm-arrow:active{background:var(--st-color-primary,#002F5D);color:#fff;}
.stm-arrow:disabled,.stm-arrow[disabled],.stm-arrow.is-inactive{border-color:var(--st-neutral-300,#B0B0B0);color:var(--st-neutral-300,#B0B0B0);background:#fff;cursor:default;}
.stm-cards__arrow:hover,.stm-coverflow__arrow:hover{background:var(--st-color-lightblue,#CAD9E0);border-color:var(--st-color-primary,#002F5D);color:var(--st-color-primary,#002F5D);}
.stm-cards__arrow[disabled]{border-color:var(--st-neutral-300,#B0B0B0);color:var(--st-neutral-300,#B0B0B0);}
.stm-pagination{display:flex;align-items:center;gap:16px;justify-content:center;flex-wrap:wrap;} /* 16.09. (Kunde, "Paginierung" global): Figma-Stände - Details s. Kommentar am .stm-evl__pager (~2102) */
.stm-pagination__num{min-width:1.2em;text-align:center;color:var(--st-neutral-300,#B0B0B0);text-decoration:none;font-weight:700;}
a.stm-pagination__num:hover,a.stm-pagination__num:focus-visible{color:var(--st-color-secondary,#034B91);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;}
a.stm-pagination__num:active{color:var(--st-color-primary,#002F5D);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;}
.stm-pagination__num[aria-current="page"],.stm-pagination__num.is-active{color:var(--st-color-primary,#002F5D);}
.stm-pagination__edge{width:24px;height:24px;padding:0;font-size:0;line-height:0;background:url("../img/icons/Slider%20Arrow%20Paginierung%20right%20default.svg") no-repeat center/24px 24px;border:0;cursor:pointer;text-decoration:none;background-position:center,-60px -60px;background-size:24px 24px,1px 1px;background-repeat:no-repeat;} /* Unicode-Pfeil per font-size:0 stumm - Grafik = Asset; Richtung ueber Position: der Prev-Pfeil ist (wenn vorhanden) IMMER erstes Kind */ /* 17.09. (Maik, Paginierung R2): Hover-Variante als geparkte 1px-Zweitebene VORGELADEN (Preload-Muster wie stm-il/G3-Toggle) - Pfeil blitzte beim ersten Hover auf, weil die Hover-Datei erst da geladen wurde */
.stm-pagination__edge{background-image:url("../img/icons/Slider%20Arrow%20Paginierung%20right%20default.svg"),url("../img/icons/Slider%20Arrow%20Paginierung%20right%20hover.svg");}
.stm-pagination__edge:first-child{background-image:url("../img/icons/Slider%20Arrow%20Paginierung%20left%20default.svg"),url("../img/icons/Slider%20Arrow%20Paginierung%20left%20hover.svg");}
.stm-pagination__edge:hover,.stm-pagination__edge:active{background-image:url("../img/icons/Slider%20Arrow%20Paginierung%20right%20hover.svg"),url("../img/icons/Slider%20Arrow%20Paginierung%20right%20default.svg");}
.stm-pagination__edge:first-child:hover,.stm-pagination__edge:first-child:active{background-image:url("../img/icons/Slider%20Arrow%20Paginierung%20left%20hover.svg"),url("../img/icons/Slider%20Arrow%20Paginierung%20left%20default.svg");}
.stm-pagination__edge[disabled],.stm-pagination__edge.is-inactive{opacity:.35;pointer-events:none;}
/* 17.09. (Maik, Paginierung R2): Seitenwechsel springt zum CONTENT-Anfang statt zum Seitenkopf -
paginate_links haengt #stm-liste (Archive) bzw. #stm-termine (/veranstaltungen) an jeden Link;
scroll-margin-top haelt den sticky Header (Desktop 137px, Mobil 80px) + etwas Luft frei. */
#stm-liste,#stm-termine{scroll-margin-top:9.4rem;}
@media (max-width:1000px){
#stm-liste,#stm-termine{scroll-margin-top:6rem;}
}
html[data-stm-anchorjump]{scroll-behavior:auto !important;} /* 17.09. R2 (Maik-Video): Paginierungs-Anker springt INSTANT statt sichtbar vom Hero herunterzurutschen - Attribut setzt das fruehe Head-Script (functions.php), stm-modules.js entfernt es nach der Lade-Nachkorrektur */
.stm-pager{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
.stm-pager__link{display:inline-flex;align-items:center;gap:.6em;color:var(--st-color-primary,#002F5D);text-decoration:none;font-weight:600;}
.stm-pager__link:hover,.stm-pager__link:focus-visible,.stm-pager__link:active{color:var(--st-color-accent,#B51F29);text-decoration:none;} /* 17.09. (Stefanie, beide Einzelseiten): "vorige"/"naechste" hovern ROT #B51F29 wie die Kreis-Pfeile daneben, OHNE Underline (war #034B91 + globale Link-Underline) */
.stm-pager__center{font-weight:700;}
a.stm-pager__center{color:var(--st-color-primary,#002F5D);} /* 16.09. (Stefanie): Textlink-Komponente im DEFAULT blau #002F5D (Ticket); Hover #034B91/Pressed #002F5D kommen aus den .btn--text-Staten (hoehere Spezifitaet) */
.stm-arrow--ic{border:0;background-color:transparent;background-image:url("../img/icons/Slider%20Arrow%20white%20circle%20right%20default.svg"),url("../img/icons/Slider%20Arrow%20white%20circle%20right%20hover.svg");background-position:center,-60px -60px;background-size:contain,1px 1px;background-repeat:no-repeat;} /* 16.09. (Stefanie): Kreis-Pfeile = gelieferte Assets (wie Flipbook) statt Eigenbau-Kreis */ /* 18.09. R56 (Dirk/Stefanie, "Slider-Pfeile unten in der Navi auch hier vorladen"): Zwei-Ebenen-Muster wie Flipbook R53 - Hover-Grafik als geparkte 1px-Zweitebene, laedt beim ersten Paint, kein Aufblitzen beim Erstkontakt */
.stm-arrow--ic-l{background-image:url("../img/icons/Slider%20Arrow%20white%20circle%20left%20default.svg"),url("../img/icons/Slider%20Arrow%20white%20circle%20left%20hover.svg");}
.stm-pager__link:hover .stm-arrow--ic-l,.stm-pager__link:active .stm-arrow--ic-l,.stm-arrow--ic-l:hover{background-image:url("../img/icons/Slider%20Arrow%20white%20circle%20left%20hover.svg"),url("../img/icons/Slider%20Arrow%20white%20circle%20left%20default.svg");background-color:transparent;}
.stm-pager__link:hover .stm-arrow--ic-r,.stm-pager__link:active .stm-arrow--ic-r,.stm-arrow--ic-r:hover{background-image:url("../img/icons/Slider%20Arrow%20white%20circle%20right%20hover.svg"),url("../img/icons/Slider%20Arrow%20white%20circle%20right%20default.svg");background-color:transparent;}
@media (max-width:640px){
.stm-pager{row-gap:1.4rem;}
.stm-pager__link--prev{order:1;}
.stm-pager__link--next{order:2;margin-left:auto;}
.stm-pager__center{order:3;flex:0 0 100%;justify-content:center;font-size:1rem;} /* 16.09. (Stefanie, Mobile-Figma): Zeile 1 = vorige/naechste links+rechts, Zeile 2 = "Alle ..." zentriert (Textlink klein) */
}
/* ============ Teaser-Features (2026-07-23) ============ */
.col__media--map{position:relative;width:100%;min-height:340px;height:100%;}
.col__media--map iframe{display:block;width:100%;height:100%;min-height:340px;border:0;}
.has-bildtext .col--type-map{align-self:stretch;}
.has-bildtext .col--type-map .col__media--map{height:100%;}
.col__form{width:100%;}
.col__form .wpforms-container{margin:0;}
/* 07.09.: alte stm-slider__caption-Regeln entfernt - die Kachel-Slideshow rendert jetzt die
Headline-Box (.stm-slbox, s. "Slideshow mit Headline-Box" weiter unten). */
.col__media,.col__media--video,.col__media--cards{position:relative;}
.col__sound{position:absolute;right:1rem;bottom:1rem;z-index:3;}
.col__sound-audio{display:none;}
.is-textmore .col--type-none .col__text{position:relative;overflow:hidden;}
.is-textmore .col--type-none .col__text{transition:max-height .35s ease;} /* 01.08.: animiertes Auf-/Zuklappen */
.is-textmore .col--type-none .col__text.is-clamped{max-height:18em;}
.is-textmore .col--type-none .col__text.is-clamped::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4em;background:linear-gradient(to bottom,rgba(255,255,255,0),#fff);pointer-events:none;}
/* 01.08.: Mehr/Weniger im Spalter wie G2-Lightbox (grau, SVG-Chevron, animiert - Kundenticket) */
.col__text-toggle,.col__more-toggle{display:flex;justify-content:center;align-items:center;gap:.45rem;margin:.75rem auto 0;align-self:center;background:none;border:0;padding:0;cursor:pointer;color:var(--st-neutral-400,#888);font-weight:400;font-family:inherit;font-size:inherit;text-transform:none;text-decoration:none;} /* 03.09. (Maik): Weiterlesen-Tag GLOBAL horizontal zentriert unter der Copy (Desktop/Tablet/Mobile) - war inline-flex/linksbuendig. Buttons bleiben auch als display:flex shrink-to-fit, daher zentrieren die auto-Margins; align-self:center faengt Spalten ab, die selbst Flex-Container sind (stretch wuerde sonst die Breite aufziehen). Timeline (.stm-tl__more) und G2-Lightbox (.stm-ov__g2moretoggle) stehen schon per margin:auto mittig. */
.col__text-toggle:hover,.col__more-toggle:hover{color:var(--st-color-accent,#B51F29);}
.stm-chev{display:inline-block;width:.95em;height:.62em;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 10'%3E%3Cpath d='M1.8 2 7.5 8 13.2 2' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 10'%3E%3Cpath d='M1.8 2 7.5 8 13.2 2' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;transition:transform .2s ease;}
.is-open > .stm-chev{transform:rotate(180deg);} /* 16.09. (Kunde, "Galerie 2"): KIND- statt Nachfahren-Kombinator - die G2-Lightbox selbst traegt .stm-ov.is-open, der Nachfahren-Selektor drehte damit JEDES Chevron in der offenen Lightbox dauerhaft auf 180° (Mehr-anzeigen stand schon zugeklappt "falsch herum", das Toggle-is-open aenderte nichts mehr). Alle .stm-chev-Spans sitzen als DIREKTES Kind ihres Toggles (col__more-toggle functions.php:780, Teaser-Akkordeon stm-modules.js:587, G2-g2moretoggle stm-slideshow.js:272) - nur noch der eigene Button dreht sein Chevron. */
.teaser-grid{display:flex;flex-wrap:wrap;gap:var(--st-space-s,16px);grid-template-columns:none;}
.teaser-grid__item{--tg-gap:var(--st-space-s,16px);flex:0 0 auto;display:block;text-decoration:none;color:inherit;}
.teaser-grid .tg--full{flex-basis:100%;}
.teaser-grid .tg--half{flex-basis:calc(50% - var(--tg-gap)/2);}
.teaser-grid .tg--two_thirds{flex-basis:calc(66.666% - var(--tg-gap)/3);}
.teaser-grid .tg--one_third{flex-basis:calc(33.333% - var(--tg-gap)*2/3);}
.teaser-grid .tg--quarter{flex-basis:calc(25% - var(--tg-gap)*3/4);}
.teaser-grid__media{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--st-color-lightblue,#CAD9E0);}
.tg--full .teaser-grid__media{aspect-ratio:21/9;}
.teaser-grid__img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s ease;}
.teaser-grid__item:hover .teaser-grid__img{transform:scale(1.05);}
.teaser-grid__overlay{position:absolute;left:0;right:0;bottom:0;padding:1.25rem;display:flex;flex-direction:column;gap:.25rem;background:linear-gradient(to top,rgba(0,47,93,.72),rgba(0,47,93,0));}
.teaser-grid__title{font-family:var(--st-font-head,inherit);font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#fff;}
.teaser-grid__cta{font-weight:700;color:#fff;}
.teaser-grid__cta::after{content:"";display:inline-block;width:1.1em;height:.8em;vertical-align:-.08em;margin-left:.35em;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 15'%3E%3Cpath d='M1 7.5h16.4M12 1.8 18 7.5 12 13.2' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 15'%3E%3Cpath d='M1 7.5h16.4M12 1.8 18 7.5 12 13.2' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;} /* 01.08.: SVG statt Unicode-Pfeil */
.teaser-grid__item:hover .teaser-grid__cta{color:var(--st-color-accent,#B51F29);}
@media (max-width:820px){
.teaser-grid__item{flex-basis:100% !important;}
.teaser-grid__media,.tg--full .teaser-grid__media{aspect-ratio:16/9;}
}
/* --- 07.09. (Maik, "Modul Slider mit Headline-Box"): Struktur nach Figma 8090:1508 (Desktop) /
8090:1208 (Mobile). Das Bildformat traegt jetzt der TRACK (872/520 wie Figma, mobil 360/460),
damit Pfeile und Dots UNTERHALB des Bildes nicht mehr vom overflow:hidden des Wrappers
abgeschnitten werden; die Slides liegen absolut im Track (auch die aktive - die generischen
is-active/not(is-ready)-Regeln wuerden sie sonst in den Fluss holen und die Ratio aufsprengen). */
.col__media--cards{position:relative;margin-bottom:3rem;} /* Platz fuer Dots/Pfeile unterm Bild */
.col__media--cards .stm-slider{position:relative;overflow:visible;} /* 13.09. (Kunde, "2 Spalter Slideshow mit Headline-Box"): DIE Ursache der "fehlenden" Pfeile/Dots - die Basisregel .stm-slider traegt overflow:hidden und clippte die unterhalb des Bildes positionierte Navigation (top:100%+X) komplett weg (Desktop Pfeile+Dots, mobil die Dots; die mobilen Pfeile liegen INNERHALB und blieben sichtbar - exakt das Ticketbild) */
.col__media--cards .stm-slider__track{position:relative;aspect-ratio:872/520;overflow:hidden;}
.col__media--cards .stm-slider__slide,
.col__media--cards .stm-slider:not(.is-ready) .stm-slider__slide:first-child,
.col__media--cards .stm-slider__slide.is-active{position:absolute;inset:0;}
.col__media--cards .stm-slider__slide img{width:100%;height:100%;object-fit:cover;}
.has-bildtext .col--type-slider_cards{align-self:start;} /* Ratio bestimmt die Hoehe (Figma: Bild ist die hoehere Spalte) - nicht mehr auf Spaltenhoehe strecken */
/* Headline-Box: unten links AUF dem Bild (Figma: 20/20 Inset, Padding 24/20) */
.stm-slbox{position:absolute;left:20px;bottom:20px;z-index:2;background:#fff;padding:22px 26px 22px 22px;max-width:min(78%,420px);} /* 13.09. (Kunde): Padding links/oben/unten 22px, rechts 26px */
.stm-slbox__hl{margin:0;font-family:var(--st-font-head,inherit);font-weight:700;text-transform:uppercase;font-size:1.75rem;line-height:.875;letter-spacing:0;color:var(--st-color-primary,#002F5D);} /* 13.09. (Kunde): Line-Height-Proportionen analog H2 (Token-Ratio Desktop .875, war 1.18) */
.stm-slbox__l{display:block;}
.stm-slbox__l--red{color:var(--st-color-accent,#B51F29);}
.stm-slbox .stm-slbox__link{margin-top:12px;} /* Figma: 18px Luecke HL->Link (abzgl. .25em Eigen-Padding der Textlink-Komponente) */
/* Nav unterm Bild: duenne stm-sarr-Pfeile rechts, Dots mittig - vertikal auf gemeinsamer Achse (Figma: Mitte 26px unter Bildkante) */
.stm-slbox__arrows{position:absolute;right:0;top:calc(100% + 3px);display:flex;gap:.9rem;z-index:2;} /* 13.09. (Kunde, "Slider Mehrspalter"): Abstand zur Bildkante halbiert (Pfeil-Mitte 26 -> 15px, analog Spalten-Slideshow) */
.col__media--cards .stm-slider__prev,.col__media--cards .stm-slider__next{position:static;top:auto;left:auto;right:auto;transform:none;width:24px;height:24px;} /* Basisregel setzt die Slideshow-Pfeile absolut in die Bildmitte - hier sitzen sie im Pfeil-Container */
.col__media--cards .stm-slider__nav{position:absolute;left:0;right:0;top:calc(100% + 11px);display:flex;justify-content:center;} /* 13.09.: Dot-Mitte 26 -> 15px unter der Bildkante (Abstand halbiert) */
.col__media--cards .stm-slider__dots{position:static;left:auto;right:auto;bottom:auto;} /* Basisregel pinnt Dots absolut ins Bild - hier stehen sie im Nav-Container unterm Bild */
@media (max-width:900px){ /* Spalten gestapelt = Mobile-Layout (Figma 8090:1208) */
.col__media--cards .stm-slider{padding-top:46px;} /* Pfeil-Zone UEBER dem Bild */
.stm-slbox__arrows{top:0;left:0;right:0;justify-content:space-between;}
.stm-slbox{left:18px;top:18px;bottom:auto;padding:18px 21px 18px 18px;} /* Box OBEN im Bild (statt wie beim Hero unten herauszuhaengen) */ /* 13.09. (Kunde): Padding mobil proportional (22/26 * 18/22 = 18/21) */
.stm-slbox__hl{line-height:.889;} /* 13.09.: H2-Token-Ratio am Mobil-Ende der Interpolation */
.col__media--cards .stm-slider__track{aspect-ratio:360/460;}
}
/* ============ Akkordeon-Modul (2026-07-23) ============ */
.accordion__head{margin-bottom:2.5rem;} /* 01.08.: Kopf wie andere Module (Topline + Headline) */
.accordion__head .module__headline{margin:.2em 0 0;}
/* 01.09. (Maik, "Akkordeons brauchen Liebe"):
- Titel+Icon 8px eingerueckt (Trennlinien bleiben volle Breite), Inhalt nochmal +8px links
- Doppellinien-Fix: main.css gab JEDEM Item border-bottom, stm-modules jedem border-top ->
zwischen den Items lagen zwei 1px-Linien uebereinander ("unscharf"); erste/letzte waren
einfach ("scharf"). Jetzt: nur border-top je Item + border-bottom nur am letzten.
- Plus/Minus nach den gelieferten SVGs (22px-Balken, runde Enden, Marine/Akzentrot-Hover)
als ZWEI CSS-Balken nachgebaut - nur so laesst sich der senkrechte Balken um 90 Grad auf
die Waagerechte drehen (Datei-Swap kann nicht morphen); Geometrie/Farben identisch zu
assets/img/icons/Plus.svg & Co. */
.module--accordion .accordion__item{border-top:1px solid var(--st-neutral-300,#D1D1D1);border-bottom:0;}
.module--accordion .accordion__item:last-child{border-bottom:1px solid var(--st-neutral-300,#D1D1D1);}
.accordion__title{list-style:none;cursor:pointer;display:block;position:relative;padding:1.15rem calc(8px + 22px + 1rem) 1.15rem 8px;margin:0;font-family:var(--st-font-head,inherit);font-weight:700;font-size:1.125rem;color:var(--st-color-primary,#002F5D);}
.accordion__title::-webkit-details-marker{display:none;}
.accordion__title::before,.accordion__title::after{content:"";position:absolute;right:8px;top:50%;width:22px;height:2px;margin-top:-1px;border-radius:1px;background:var(--st-color-primary,#002F5D);transition:transform .3s ease,background .15s ease;}
.accordion__title::before{transform:rotate(90deg);} /* der senkrechte Plus-Balken */
.accordion__item[open] .accordion__title::before{transform:rotate(180deg);} /* dreht sich beim Oeffnen um 90 Grad auf die Waagerechte -> Minus (und beim Schliessen zurueck) */
.accordion__title:hover{color:var(--st-color-accent,#B51F29);}
.accordion__title:hover::before,.accordion__title:hover::after{background:var(--st-color-accent,#B51F29);} /* Hover-SVGs: beide Balken Akzentrot */
.accordion__body{padding:.25rem 8px 1.5rem 16px;max-width:70ch;} /* 8px wie der Titel + 8px extra Einzug links */
.accordion__body p{margin:0 0 .75rem;}
.accordion__body p:last-child{margin-bottom:0;}
/* ============ Zitat-Modul (2026-07-23 v2, nach Figma) ============ */
.module--quote .module__inner.quote{max-width:872px;margin-left:auto;margin-right:auto;}
.quote__fig{margin:0;display:flex;flex-direction:column;}
.quote--has-image .quote__media{align-self:center;margin-bottom:2rem;}
.quote__img{width:220px;height:auto;border-radius:14px;display:block;} /* 01.08.: kein Anschnitt mehr (war 260x260 cover), etwas kleiner */
.quote__mark{display:block;color:var(--st-color-lightblue,#CAD9E0);margin-bottom:1rem;} /* 01.08.: Kunden-SVG statt Font-Glyphe */
.quote__mark svg{width:clamp(64px,8vw,109px);height:auto;display:block;}
.quote__text{font-family:var(--st-font-head,inherit);font-weight:700;text-transform:uppercase;color:var(--st-color-primary,#002F5D);line-height:1.05;margin:.25rem 0 0;}
.quote--l .quote__text{font-size:var(--stm-h2-size);} /* 09.09. (Maik, Zitate): L = globale H2 (Token, 80px-Kappe; vorher 52px-Kappe) */
.quote--m .quote__text{font-size:clamp(2rem,4.4vw,3.25rem);} /* 09.09. (Maik, Zitate): M uebernimmt die bisherige L-Groesse (52px-Kappe; vorher 40px) */
.quote--s .quote__text{font-size:clamp(1.25rem,2.6vw,1.9rem);text-transform:none;line-height:1.4;} /* 31.07.: S-Zitat brauchte mehr Zeilenabstand */
.quote__caption{margin-top:1.5rem;text-align:center;display:flex;flex-direction:column;gap:.133rem;} /* 09.09. (Maik, Zitate): Abstand Autor->Zusatz um 1/3 verringert (.2rem -> .133rem) */
.quote__author{font-weight:700;color:var(--st-color-accent,#B51F29);} /* 09.09. (Maik, Zitate): gemischte Schreibweise statt versal (uppercase + letter-spacing raus); Schriftgroesse bleibt identisch mit .quote__extra (beide erben 1.125rem) */
.quote__extra{color:var(--st-color-primary,#002F5D);} /* 09.09. (Maik, Zitate): Zusatz in #002F5D (vorher Ink mit .85 Opacity) */
.module--quote.is-musik{background:var(--st-color-primary,#002F5D);}
/* Module MIT Hintergrundflaeche brauchen trotz global entferntem Modul-Padding
(31.07., main.css) weiterhin vertikalen INNENabstand: */
.module.has-bg,.module.theme--dark,.module--quote.is-musik{padding-top:var(--st-space-l,4rem);padding-bottom:var(--st-space-l,4rem);}
.module--quote.is-musik .quote__text{color:#fff;}
.module--quote.is-musik .quote__mark{color:rgba(255,255,255,.4);}
.module--quote.is-musik .quote__author{color:var(--st-color-gold,#D1AC57);}
.module--quote.is-musik .quote__extra{color:rgba(255,255,255,.8);}
/* ============ Akkordeon neben Bild (2026-07-23) ============ */
.module--accordion .module__inner.has-media .accordion__grid{display:grid;gap:2.5rem;align-items:start;}
.module--accordion .acc--two_thirds .accordion__grid{grid-template-columns:2fr 1fr;}
.module--accordion .acc--half .accordion__grid{grid-template-columns:1fr 1fr;}
.accordion__media{align-self:start;}
.accordion__img{width:100%;height:auto;object-fit:cover;display:block;border-radius:2px;} /* 01.09. (Maik): Bild behaelt sein Ausgangsformat und waechst NICHT mit dem geoeffneten Akkordeon in die Hoehe (vorher stretch + height:100%) */
@media (max-width:820px){
.module--accordion .acc--two_thirds .accordion__grid,
.module--accordion .acc--half .accordion__grid{grid-template-columns:1fr;}
.accordion__img{min-height:0;} /* 01.09.: auch mobil natuerliche Bildhoehe */
}
/* ============ Parallax nach Figma 8183:1952 (Asana "Modul Paralax", 23.08.2026) ============
Basis 1440px (Wrapper 1320 + 2x60). Spalten-Linien (px): 0|60|107|706|751|807|918|972|1346|1383|1440.
Bildverhaeltnisse aus Figma: Bild1 918x551, Bild2 576x506 (max 580x500-Klasse).
Ebenen unten->oben: Bild1, HL1, Copy1, Bild2, Stack2 (HL2+Copy2). */
.module--parallax{padding-left:0;padding-right:0;} /* 30.08. (Maik): auch das 60px-Modulpadding weg - erst so kleben die Bilder bei Viewports unter 1560px WIRKLICH am Browserrand (vorher blieb links/rechts ein 60px-Streifen) */
.module--parallax > .module__inner{max-width:1560px;padding-left:0;padding-right:0;} /* 28.08. (Maik): Bilder kleben bis 1560px Viewport am Browserrand, danach zentriert mit Weissraum */
.module--parallax .plx__img{box-shadow:none;border-radius:0;width:100%;height:auto;display:block;object-fit:cover;}
.module--parallax .plx__headline .plx__hl{display:block;}
.module--parallax .plx__hlbox{background:rgba(255,255,255,.9);} /* 28.08. (Maik): HL-Flaechen NICHT blau - weiss #fff bei 90%% */
.plx-t__hl2{position:relative;z-index:2;}
.plx-t__copy2{position:relative;z-index:1;} /* 07.09. R6 (Maik, "HL-Flaechen ganz oben"): Z-Ordnung INNERHALB von stack2 - Copy 2 rutscht beim Hochscrollen hinter ihre HL-Flaeche. Gilt Desktop UND Mobile (beide stapeln hl2+copy2 im selben stack2-Kontext); ohne explizites z gewann die spaeter im DOM stehende, transformierte Copy */
.module--parallax .plx__headline{margin:0;} /* Abstand nach unten = Flaechen-Padding (gleich wie links) */
.module--parallax .plx__topline{font-size:.95rem;letter-spacing:0;font-weight:700;text-transform:uppercase;color:var(--st-color-accent,#B51F29);margin:0 0 .1rem;} /* 30.08. (Maik): Abstand Topline -> HL um 30%% verringert (visuell ~21px -> ~15px, Rest ist Zeilen-Leading) */ /* 28.08.: Standard-Topline (H6-Groesse .95rem) - war .82rem */
/* 03.09. (Maik): Vollweiss-Override ERSATZLOS RAUS - "die Deckkraft der weissen Flaechen betraegt
95%, das sollte nie so sein [vollweiss]". Historie: das #fff kam am 02.09. gegen die durch die
95%%-Transparenz durchscheinende Bildkante (wirkte wie ein Umbruch zwischen Copy und Button) -
diese schwache Kante ist laut Maik aber DESIGN-ABSICHT, sie bleibt jetzt bewusst sichtbar.
Deckkraft steht zentral in der .plx-c__box-Basisregel (rgba .95, gilt Desktop UND Mobile). */
.module--parallax .plx-c__box .plx__text{margin:0 0 1.65rem;} /* 28.08.: Abstand Copy -> CTA um 1/2 vergroessert (1.1 -> 1.65rem) */
.module--parallax .plx__copy .plx__text{color:var(--st-color-ink,#222);}
.module--parallax .plx__headline{hyphens:auto;overflow-wrap:anywhere;} /* lange Woerter (KONZERTORGEL) brechen in der 646px-Flaeche */
@media (min-width:1001px){
.plx-t{display:grid;position:relative;
grid-template-columns:4.167% 3.264% 41.597% 3.125% 3.889% 7.708% 3.75% 25.972% 2.569% 3.958%;
grid-template-rows:auto calc(2rem + var(--stm-h3-lh,90px)) auto 1fr 16px 50px auto;} /* 30.08. (Maik): Ueberlappung HL-Flaeche/Bild = unteres Padding + genau EINE Headline-Zeile -> obere Bildkante sitzt bei jeder Viewportbreite exakt zwischen den zwei HL-Zeilen (134px fix stimmte nur bei 1920) */
.plx-t__media1{grid-column:1/7;grid-row:2/7;z-index:1;align-self:stretch;}
.plx-t__img1{aspect-ratio:92/55;height:100%;object-position:center center;} /* 28.08.: fixe Ratio (Maik) */
.plx-t__hl1{grid-column:5/9;grid-row:1/3;z-index:6;align-self:end;justify-self:start;max-width:100%;padding:2rem;} /* 31.08. (Maik): endet rechts buendig mit Copy 1 (Linie 9) statt am Browserrand - HL stand hinter den Quicklinks; justify-self:start = Flaeche schrumpft bei kurzen HLs auf Textbreite (wie Teaser/Heros) */ /* 30.08. (Maik): Innenabstand rundum um 1/3 verringert */ /* 28.08.: Abstand zur HL rundum gleich */ /* Fix: Linie 5 = x751 (verifiziert) */ /* unten fix auf Bild1, waechst nach oben (Zeile 1 auto) */
.plx-t__copy1{grid-column:8/9;grid-row:3/4;z-index:3;padding-top:0;} /* 28.08.: KEIN Abstand zwischen HL-Flaeche und Copy */ /* 07.09. R6 (Maik): HL-Flaeche 1 jetzt z6 (s.o.) - die Copy (z3) rutscht beim Hochscrollen HINTER die Flaeche */
.plx-t__media2{grid-column:6/10;grid-row:6/8;z-index:4;align-self:start;} /* rechts am Wrapper, ~16px tiefer als HL-Flaeche 2 */
.plx-t__img2{aspect-ratio:58/50;object-position:center center;} /* 28.08.: fixe Ratio (Maik) */
.plx-t__stack2{grid-column:2/4;grid-row:5/8;z-index:5;align-self:start;} /* oben fix auf Bild1, waechst nach unten */
.plx-t__hl2{width:fit-content;max-width:100%;padding:2rem;} /* 31.08. (Maik): Flaeche passt sich kurzen HLs an */ /* 30.08. (Maik): 1/3 weniger, wie HL-Flaeche 1 */ /* 28.08.: rundum gleich */
.plx-t__copy2{padding:0 0 0 2rem;max-width:none;} /* 30.08.: buendig zum neuen HL-Padding */ /* beginnt buendig unter HL-Flaeche 2, linksbuendig mit deren Text */
.plx-t__copy2 .plx__text,.plx-t__copy1 .plx__text{max-width:none;}
.plx-t__copy1{max-width:none;}
}
@media (max-width:1000px){
/* Mobile nach Figma 8183:2191: HL1 oben, Bild1 ueberlappt von unten; Bild2 rechtsbuendig,
HL2-Box ueberlappt Bildunterkante links, Copy darunter. */
.plx-t{display:flex;flex-direction:column;}
.plx-t__hl1{order:1;width:fit-content;max-width:80%;position:relative;z-index:2;margin-bottom:-41px;padding:1.6rem;} /* 31.08. (Maik): 80%% ist jetzt MAX-Breite, Flaeche schrumpft auf die HL */ /* 28.08.: rundum gleich */
.plx-t__media1{order:2;width:92.8%;position:relative;z-index:1;}
.plx-t__img1{aspect-ratio:33/30;object-position:center center;}
.plx-t__copy1{order:3;padding:1rem 8%;margin-top:1.5rem;max-width:none;position:relative;z-index:1;background:rgba(255,255,255,.9);} /* 05.10. R8 (Stefanie, "weisse Flaeche mit 90% Deckkraft im Hintergrund ... damit die Lesbarkeit gewaehrleistet ist"): Copy-Flaechen mobil wie die HL-Flaechen weiss hinterlegt (rgba .9, Muster .plx__hlbox) - die Copys laufen beim Ueberdecken uebers Bild und blieben sonst schwer lesbar (Kundenvideo P1 Mobile); vertikales Padding 1rem, damit die Flaeche den Text fasst */ /* 30.08. (Maik): mobil Abstand zwischen Bild 1 und Copy 1 */ /* 28.08.: kein Abstand zur HL-Flaeche */ /* 07.09. R6 (Maik): explizit UNTER der HL-Flaeche (z2) - Copy rutscht auch mobil dahinter */
.plx-t__media2{order:4;width:78%;margin:2.6rem 0 0 auto;position:relative;z-index:1;}
.plx-t__img2{aspect-ratio:28/25;object-position:center center;}
.plx-t__stack2{order:5;position:relative;z-index:2;margin-top:-3rem;}
.plx-t__hl2{width:fit-content;max-width:84%;padding:1.6rem;}
.plx-t__copy2{padding:1rem 8%;max-width:none;background:rgba(255,255,255,.9);} /* 05.10. R8: weisse 90%-Flaeche wie Copy 1, s.o. */
}
/* ---- Parallax-Modul 2 (Collage, 3 Bilder + Copy-Flaechen) nach Anhang-Mock ---- */
.plx-c{position:relative;}
.plx-c__item{position:relative;}
.plx-c__img{display:block;width:100%;height:auto;border-radius:0;object-fit:cover;}
.plx-c__box{position:relative;z-index:3;background:rgba(255,255,255,.95);padding:1.6rem 1.9rem;} /* 03.09. (Maik): Deckkraft der weissen Flaechen = 95%% - verbindlich fuer ALLE Copy-Flaechen, Desktop und Mobile (war .92, zwischenzeitlich vollweiss) */
.plx-c__box .plx__text{color:var(--st-color-ink,#222);margin:0 0 1.1rem;line-height:var(--stm-copy-lh,1.5);} /* 03.09.: Standard-Copy-Zeilenhoehe (1.6 ueberschrieb sonst das Token) */
.plx-c__box .plx__actions{margin:0;}
@media (min-width:1001px){
/* Bild1 rechts am Wrapper+60 (Modulrand), Bild2 rechts am Wrapper (60px Rand),
Bild3 links am Wrapper+60 (Modulrand); gleicher Abstand zwischen den Bildern. */
.plx-c__box{padding:2rem;} /* 30.08. (Maik): Innenabstand zum Text rundum um 1/3 verringert */ /* 28.08.: gleicher Innenabstand rundum wie die P1-Flaechen */
.plx-c__item--1{width:85.8%;margin-left:auto;z-index:3;} /* 30.08. (Maik): insgesamt groesser (Figma 85.8%% Wrapperbreite); z3, damit Copy-Flaeche 1 UEBER Bild 2 liegt (Maik: "liegt ueber Bild 2") */
.plx-c__item--1 .plx-c__img{aspect-ratio:124/74;object-position:center center;} /* 28.08.: fixe Ratio (Maik) */
.plx-c__item--1 .plx-c__box{position:absolute;bottom:-11.2%;left:-7.6%;width:49.6%;margin:0;} /* 31.08. (Maik): an der UNTERKANTE verankert (11.2%% Bildhoehe unter Bild 1 = ueber die 3.6%%-Luecke hinweg) - die Flaeche liegt damit bei JEDER Textlaenge auf der linken oberen Ecke von Bild 2 und waechst nach oben */ /* 30.08. (Maik): breiter (Figma 474/955 Bildbreite), ragt links ueber die Bildkante; ABSOLUT verankert (Oberkante bei 31.2%% Bildhoehe ueber der Unterkante), damit die Textlaenge NICHT die Position von Bild 2 verschiebt */ /* 28.08.: sitzt tiefer - ragt rechts unten ueber Bild 2 */
.plx-c__item--2{width:50.9%;margin:3.6% 5.5% 0 auto;z-index:2;} /* 30.08. (Maik): groesser (Figma 50.9%%), rechts 5.5%% Rand; margin-top = exakt die Figma-Luecke Bild1->Bild2 (3.4%% Wrapperbreite) - moeglich, weil Copy 1 absolut haengt und den Fluss nicht mehr verlaengert. Vertikale Luecke = horizontale Luecke Bild2<->Bild3 (Maik) */ /* Copy1-Ueberhang (50px) kompensiert -> exakt 40px Bild-Abstand */
.plx-c__item--2 .plx-c__img{aspect-ratio:73/59;object-position:center center;}
.plx-c__item--2 .plx-c__box{position:absolute;bottom:-15%;left:8.15%;width:83.7%;margin:0;} /* 31.08. (Maik): sitzt tiefer - Unterkante fix 15%% Bildhoehe unter Bild 2; mit realen Textlaengen liegt die Flaeche damit immer noch AUF dem Bild (Figma-Wert -32%% haette sie bei kurzen Texten ganz unters Bild geschoben) */ /* 30.08. (Maik): breiter (Figma 474/566 Bildbreite), mittig; absolut wie Copy 1, damit Bild 3 textunabhaengig ansetzt */ /* 28.08.: ragt ~zur Haelfte unten raus - Bildkante endet zwischen 1. und 2. Copyzeile */
.plx-c__item--3{width:40%;margin-top:-27.2%;z-index:1;} /* 30.08. (Maik/Figma): 40%% Wrapperbreite, buendig links; -27.2%% ab Bild2-UNTERKANTE (Copys sind absolut) = Bild3-Top ~13.8%% Wrapperbreite unter Bild2-Top wie im Figma */ /* 28.08.: horizontale Luecke zu Bild 2 = 40px (wie Bild1<->Bild2) */ /* Bild3-Top ~180px nach Bild2-Top (Mock) */ /* beginnt waehrend Bild2 laeuft, links am Modulrand */
.plx-c__item--3 .plx-c__img{aspect-ratio:58/65;object-position:center center;}
.plx-c__item--3 .plx-c__box{width:86.5%;margin:-17% 0 0 22.2%;} /* 30.08. (Maik): breiter (Figma 385/445), links 22%% eingerueckt, ragt rechts ueber die Bildkante; bleibt IM Fluss. 02.09. (Johann, "Problem mit dem Umbruch"): tiefer aufs Bild gezogen (-13 -> -17%%; Wrapper cappt bei 1560, dadurch schneidet die Kante NIE durch den Button) - mit dem kurzen echten Text schnitt die Bildkante ZWISCHEN den zwei Zeilen durch und Zeile 2 + Button wirkten auf dem weissen Grund "abgerissen"; jetzt sitzt der Text komplett auf dem Bild */ /* 28.08.: Bildkante endet zwischen 1./2. Copyzeile */
}
@media (max-width:1000px){
.plx-c__item{margin-top:2rem;} /* Abstand Bild3<->Bild2 = Bild1<->Bild2 */
.plx-c__item--1{margin-top:0;}
.plx-c__item--1 .plx-c__img{aspect-ratio:36/32;object-position:center center;} /* 28.08.: fixe Mobil-Ratios (Maik) */
.plx-c__item--2{width:88%;margin-left:auto;}
.plx-c__item--2 .plx-c__img{aspect-ratio:32/32;object-position:center center;}
.plx-c__item--3{width:95%;} /* 31.08. (Maik): NICHT full width - Weissraum rechts (Figma ~5%%) */
.plx-c__item--3 .plx-c__img{aspect-ratio:34/38;object-position:center center;}
.plx-c__box{width:92%;margin:-2.65rem 0 0;padding:1.05rem;} /* 31.08.: liegt ueberlappend auf dem Bild (Bildkante zwischen 1./2. Copyzeile). 02.09. (Maik): rechts eingekuerzt, damit ~8%% Viewport MOTIV neben der Flaeche sichtbar bleibt. 03.09. (Maik): Einkuerzung gilt NUR fuer Copy-Flaeche 1 und 3 - Flaeche 2 laeuft bis zum rechten Rand (eigene Regel unten); Deckkraft kommt aus der Basisregel (95%%) */
.plx-c__item--2 .plx-c__box{width:100%;padding-left:0;} /* 03.09. (Maik): Copy-Flaeche 2 laeuft rechts BIS ZUM RAND (Item 2 endet am Viewportrand, 100%% = volle Spanne; die 8%%-Motivstreifen-Einkuerzung vom 02.09. galt nur fuer Flaeche 1+3) und Text + Button beginnen links BUENDIG mit Bild 2 (Box-Links = Bild-Links -> padding-left:0 setzt die Inhalte exakt auf die Bildkante) */
.plx-c__item--3 .plx-c__box{width:91.6%;} /* Bild 3 spannt 95%% -> gleicher Streifen, endet an der Bildkante vor dem Weissraum */
/* 30.08. (Maik): Copy 2 "fast ueber komplette Breite" - deckt als 100%%-Box exakt die Bild2-Spanne (beginnt an dessen linker Bildkante, laeuft bis zum rechten Rand) - Basisregel reicht */
.module--parallax .btn{height:37.5px;font-size:1rem;font-weight:400;padding:0 1.22rem;gap:.625em;} /* 28.08.: CTA-Button klein (Button-Set) mobil - P1 wie P2 */ /* 05.09. (Maik, Buttons-Ticket): Padding -1/4 */
}
/* ===== Karussell-Karten: hochkant + zentrierter Titel (Figma, 2026-07-23) ===== */
.module--karussell .stm-card__media{aspect-ratio:4/5;}
.module--karussell .stm-card__title{text-align:center;}
/* ===== Zitat: Text zentriert (Figma-Korrektur 2026-07-23) ===== */
.module--quote .quote__text{text-align:center;}
.module--quote .quote__mark{text-align:left;}
.module--quote .quote__img{border-radius:2px;}
/* ===== Zitat-Anführungszeichen als SVG (Figma, 2026-07-23) ===== */
.module--quote .quote__mark{display:block;width:78px;height:auto;color:var(--st-color-lightblue,#CAD9E0);margin:0 0 .42rem;text-align:left;} /* 09.09. (Maik, Zitate): Abstand Quote-Icon -> Zitat um 1/3 verringert - sichtbarer Abstand = .75rem hier + .25rem margin-top des Texts = 16px, jetzt .42+.25rem = 10.7px */
.module--quote .quote__mark svg{width:78px;height:auto;fill:currentColor;display:block;}
.module--quote.is-musik .quote__mark{color:rgba(255,255,255,.45);}
/* ============ Mega-Menü Desktop (Nachtschicht 2026-07-25) ============ */
.site-header{position:sticky;top:0;} /* 02.08.: sticky reaktiviert (main.css-Basis); admin-bar-Offset kommt aus main.css */
.nav-menu--mega{display:flex;gap:2.5rem;align-items:center;list-style:none;margin:0;padding:0;}
/* 01.08.: Hauptmenue nach Figma (Meta Pro Book 20px #222); Unterstrich als 2px-Linie mit runden
Enden ALS OVERLAY (::after, immer vorhanden, nur Farbe wechselt -> nichts springt, immer duenn). */
.nav-menu--mega .nav-menu__link,
.site-nav .nav-menu--mega > li > a{font-family:var(--st-font-body,inherit);font-weight:400;text-transform:uppercase;letter-spacing:.02em;font-size:1.25rem;line-height:1.5;color:var(--st-color-ink,#222);text-decoration:none;padding:1.2rem 0;display:inline-block;position:relative;}
.site-nav .nav-menu--mega > li > a,
.site-nav .nav-menu--mega > li.current-menu-item > a,
.site-nav .nav-menu--mega > li.current-menu-ancestor > a,
.site-nav .nav-menu--mega > li.current_page_ancestor > a{color:var(--st-color-ink,#222);background:none;}
.nav-menu--mega .nav-menu__link::after{content:"";position:absolute;left:0;right:0;bottom:.85rem;height:2px;background:transparent;}
/* 19.08. R2 Hauptnav-States (Maik): aktueller Punkt Primaer (Text+Linie); Hover/Mega-offen
Sekundaer - steht NACH der is-current-Regel und gewinnt daher auch ueber dem aktiven
Punkt; Pressed Primaer. is-mega-open kommt aus dem JS und haelt den Hover-Zustand,
solange sich die Maus im zugehoerigen Megamenue bewegt (Luecke zwischen li und Mega). */
.nav-menu--mega .nav-menu__item.is-current > .nav-menu__link{color:var(--st-color-primary,#002F5D);}
.nav-menu--mega .nav-menu__item.is-current > .nav-menu__link::after{background:var(--st-color-primary,#002F5D);}
.nav-menu--mega .nav-menu__item:hover > .nav-menu__link,
.nav-menu--mega .nav-menu__item:focus-within > .nav-menu__link,
.nav-menu--mega .nav-menu__item.is-mega-open > .nav-menu__link{color:var(--st-color-secondary,#034B91);}
.nav-menu--mega .nav-menu__item:hover > .nav-menu__link::after,
.nav-menu--mega .nav-menu__item:focus-within > .nav-menu__link::after,
.nav-menu--mega .nav-menu__item.is-mega-open > .nav-menu__link::after{background:var(--st-color-secondary,#034B91);}
.nav-menu--mega .nav-menu__item > .nav-menu__link:active{color:var(--st-color-primary,#002F5D);}
.nav-menu--mega .nav-menu__item > .nav-menu__link:active::after{background:var(--st-color-primary,#002F5D);}
/* ==== Mega-Menue nach Figma (31.07., Nodes 8001:15422 + 8004:2045) ====
Links 366px Ebene-2 | (optional) 360px Ebene-3 mit Innenschatten | Teaser-Hero,
der sich beim Oeffnen der 3. Ebene zur Seite schiebt (left 366px -> 726px). */
.mega{position:absolute;left:0;right:0;top:100%;height:min(620px,calc(100vh - 140px));background:transparent;z-index:60;overflow:hidden;} /* 28.08. (Maik): BG transparent - der statische weisse Layer blitzte bei der Animation HINTER dem slidenden Inner auf */ /* 01.08.: kein Schlagschatten mehr (Ticket); 23.08.: untere Trennlinie sitzt am INNER und slidet mit rein (Maik: "als Ganzes reinanimieren") */
/* 19.08. (Maik): Die graue Trennlinie Hauptmenue/Megamenue bleibt an Ort und Stelle - vorher ueberdeckte
das herausfahrende Mega (z-index 60) die border-bottom des Headers, unten erschien stattdessen die
Mega-Abschlusslinie -> wirkte, als wandere die Linie mit. Overlay-Linie ueber dem Mega: */
@media (min-width:1001px){.site-header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:#B0B0B0;z-index:70;pointer-events:none;}} /* 19.08.: hart #B0B0B0 - einheitlicher Grauton offen/geschlossen */
/* 21.09. R65: Die R61-Regeln (.is-g5flush blendete border-bottom + ::after aus, solange eine
Galerie 5 unterm Header gepinnt war) sind ZURUECKGENOMMEN - Kundin: "die graue Trennlinie ...
bitte wieder anzeigen lassen"; die Kante kam in Wahrheit vom Blur-Geisterband der Vorgaenger-
Slides (Ausschub-Fix in stm-slideshow.js, R65). Das JS setzt die Klasse nicht mehr (und raeumt
sie aktiv ab), daher stehen hier bewusst keine .is-g5flush-Regeln mehr. */
/* 19.08. (Maik): Mega faehrt HINTER dem Hauptmenue hervor - der Slide liegt auf dem INNER
(das Mega clippt via overflow:hidden), das Mega selbst blendet nur. Verlassen: Fade-Out
via is-closing (JS setzt hidden erst nach 220ms). */
.mega.is-open{animation:stmMegaFade .3s ease-out;}
.mega.is-open .mega__inner{animation:stmMegaSlide .3s ease-out;}
.mega.is-closing{animation:stmMegaOut .22s ease-in both;pointer-events:none;}
@keyframes stmMegaFade{from{opacity:0;}to{opacity:1;}}
@keyframes stmMegaSlide{from{transform:translateY(-24px);}to{transform:translateY(0);}}
@keyframes stmMegaOut{from{opacity:1;}to{opacity:0;}}
.mega[hidden]{display:none;}
.mega__inner{position:relative;height:100%;max-width:none;margin:0;padding:0;display:block;box-sizing:border-box;border-bottom:1px solid #B0B0B0;background:#fff;} /* 28.08.: weisser Grund slidet als Teil des Inners mit */
.mega__l2{list-style:none;margin:0;padding:48px 40px;position:absolute;left:0;top:0;bottom:0;width:366px;display:flex;flex-direction:column;gap:24px;overflow-y:auto;}
.mega__l2-item a{display:flex;justify-content:space-between;align-items:center;gap:1rem;font-family:var(--st-font-body,inherit);font-weight:400;text-transform:uppercase;letter-spacing:.02em;font-size:1.25rem;line-height:1.5;color:var(--st-color-ink,#222);text-decoration:none;} /* 01.08.: Figma - Book 20px #222, Regular */
.mega__l2-item.is-active a,.mega__l2-item a:hover{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px;} /* 23.08. (Maik): Hover/Aktiv NUR Linie, Schriftschnitt bleibt Book - kein Umbruch-Springen, einheitlich zu Mobile */
.mega__chev{flex:0 0 auto;width:10px;height:15px;font-size:0;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 15'%3E%3Cpath d='M2 1.8 8 7.5 2 13.2' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 15'%3E%3Cpath d='M2 1.8 8 7.5 2 13.2' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;}
.mega__l3{position:absolute;left:366px;top:0;bottom:0;width:360px;background:#fff;box-shadow:inset 8px 0 13px rgba(0,0,0,.05);padding:48px 40px;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .25s ease;}
.mega.has-l3 .mega__l3{opacity:1;visibility:visible;}
.mega__l3-list{list-style:none;margin:0;padding:0;display:none;flex-direction:column;gap:26px;}
.mega__l3-list.is-active{display:flex;}
.mega__l3-list a{font-size:1.25rem;line-height:1.5;font-weight:400;color:var(--st-color-ink,#222);text-decoration:none;}
.mega__l3-list a:hover{color:var(--st-color-secondary,#034B91);text-decoration:underline;text-underline-offset:5px;}
.mega__l3-list a:active{color:var(--st-color-primary,#002F5D);} /* 19.08. (Maik): Pressed ~ Primaer */
.mega__teasers{position:absolute;top:0;right:0;bottom:0;left:366px;transition:left .35s ease;overflow:hidden;} /* schiebt sich zur Seite */
.mega.has-l3 .mega__teasers{left:726px;}
.mega__teaser{display:none;position:absolute;inset:0;min-height:0;}
.mega__teaser.is-active{display:block;}
.mega__teaser-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.mega__teaser-box{position:absolute;left:0;top:42px;width:400px;min-height:347px;margin:0;max-width:none;background:rgba(255,255,255,.8);display:flex;flex-direction:column;justify-content:center;padding:44px 38px 44px 24px;z-index:2;}
.mega__teaser-hl{margin:0 0 1.5rem;font-family:var(--st-font-head,inherit);font-weight:700;text-transform:uppercase;font-size:clamp(2.4rem,3.1vw,3.75rem);line-height:.85;}
.mega__hl1{display:block;color:var(--st-color-primary,#002F5D);}
.mega__hl2{display:block;color:var(--st-color-accent,#B51F29);}
.mega__teaser-copy{margin:0 0 2.5rem;color:var(--st-color-ink,#222);font-size:1.25rem;line-height:1.5;}
/* 10.08. (CPT-Teaser): WYSIWYG-Variante - Absaetze kompakt, CTA aus dem Editor sitzt wie der alte Button */
.mega__teaser-copy--rich p{margin:0 0 .6em;}
.mega__teaser-copy--rich p:last-child{margin-bottom:0;}
.mega__teaser-copy--rich .btn{margin-top:.9em;white-space:nowrap;}
/* 10.08. (Kontakt in Spalte): Team-Karte als Spalteninhalt */
.col--type-team .stm-team-card--col{max-width:100%;}
.col--type-team .stm-team-card__media img{width:100%;height:100%;object-fit:cover;} /* 13.09. (Kunde, "Modul Teams Kachel Bild"): "damit der gesamte Bild-Container gefuellt ist" - das alte height:auto liess das Bild im 3/4-Container mit Mist-Hintergrundstreifen stehen. Gewuenschtes ERGEBNIS = voll gefuellter Container -> object-fit:cover (woertliches 'contain' wuerde exakt die beanstandeten Raender lassen; im Antworttext erlaeutert) */
.mega__teaser-btn{white-space:nowrap;align-self:flex-start;}
@media (max-width:1000px){
.mega{display:none !important;}
}
/* Mega-Menü Fix: Panel vollbreit (li/nav dürfen nicht positioniert sein) – nur Desktop */
@media (min-width:1001px){
.site-nav:has(.nav-menu--mega){position:static !important;}
.nav-menu--mega > .nav-menu__item{position:static !important;}
}
/* ============ WPForms-Styling nach Figma (2026-07-26, v2 hohe Spezifität) ============ */
body div.wpforms-container-full,body div.wpforms-container{--wpforms-field-border-color:var(--st-color-lightblue,#CAD9E0);--wpforms-field-border-radius:8px;--wpforms-field-text-color:var(--st-color-primary,#002F5D);--wpforms-button-background-color:var(--st-color-primary,#002F5D);--wpforms-button-border-radius:999px;max-width:640px;}
body div.wpforms-container-full .wpforms-form .wpforms-field{padding:9px 0;}
body div.wpforms-container-full .wpforms-form input[type=text],body div.wpforms-container-full .wpforms-form input[type=email],body div.wpforms-container-full .wpforms-form select,body div.wpforms-container-full .wpforms-form textarea{width:100%;max-width:100%;border:1px solid var(--st-color-lightblue,#CAD9E0);border-radius:8px !important;padding:.7em 1.05em;height:auto;color:var(--st-color-primary,#002F5D);background:#fff;font-family:inherit;font-size:1rem;line-height:1.4;}
body div.wpforms-container-full .wpforms-form input::placeholder,body div.wpforms-container-full .wpforms-form textarea::placeholder{color:rgba(0,47,93,.72);opacity:1;}
body div.wpforms-container-full .wpforms-form select{appearance:none;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 1em center;padding-right:2.6em;}
body div.wpforms-container-full .wpforms-form textarea{min-height:210px !important;}
body div.wpforms-container-full .wpforms-form input[type=text]:focus,body div.wpforms-container-full .wpforms-form input[type=email]:focus,body div.wpforms-container-full .wpforms-form input[type=tel]:focus,body div.wpforms-container-full .wpforms-form input[type=number]:focus,body div.wpforms-container-full .wpforms-form input[type=url]:focus,body div.wpforms-container-full .wpforms-form input[type=password]:focus,body div.wpforms-container-full .wpforms-form select:focus,body div.wpforms-container-full .wpforms-form textarea:focus{border-color:var(--st-color-primary,#002F5D);outline:none;box-shadow:none;} /* 09.09. (Maik, Newsletter-Ticket, GLOBAL fuer alle Formularfelder): im aktiven Zustand faerbt sich NUR die vorhandene hellgraue 1px-Kontur Dunkelblau - gleiche Strichstaerke, KEIN zusaetzlicher Ring. Die "dicke blaue Kontur" war der Browser-Default-Fokusring (outline auto), fuer den keine eigene Regel existierte; der Fokus bleibt durch den Farbwechsel der Kontur sichtbar. */
body div.wpforms-container-full .wpforms-form .wpforms-field-label{display:none;}
body div.wpforms-container-full .wpforms-form .wpforms-field-checkbox ul{list-style:none;margin:0;padding:0;}
body div.wpforms-container-full .wpforms-form .wpforms-field-checkbox li{display:flex;align-items:flex-start;gap:.6rem;margin:.35rem 0;}
body div.wpforms-container-full .wpforms-form .wpforms-field-checkbox li input[type=checkbox]{width:20px;height:20px;flex:0 0 auto;margin-top:0;-webkit-appearance:none;appearance:none;border:1px solid var(--wpforms-field-border-color,#CAD9E0);border-radius:4px;background:#fff;cursor:pointer;position:relative;} /* 09.09. R3 (Maik, Newsletter): native accent-color-Optik ersetzt, 20px-Box, r4 */ /* 09.09. R8 (Maik): DEFAULT-Kontur grau wie die Textfelder (1px #CAD9E0 = WPForms-Feldrahmen) - NUR der geklickte Zustand wird blau (Regel unten); margin-top:0 -> Box-Oberkante = Zeilen-Oberkante, und weil lh (19.76px) ~ Boxhoehe (20px) sitzt die erste Textzeile vertikal mittig zum Kaestchen, mehrzeiliger Text waechst nach unten */
body div.wpforms-container-full .wpforms-form .wpforms-field-checkbox li input[type=checkbox]::before,body div.wpforms-container-full .wpforms-form .wpforms-field-checkbox li input[type=checkbox]::after{content:none;} /* 09.09. R4 (Johann, "noch kaputt"): WPForms-Modern malt den Checkbox-Rahmen als EIGENES ::before-Pseudo (16px, 1px lightblue, absolut) AUF dem Input + den Haken als ::after - zusammen mit unserer 20px-Box ergab das ZWEI versetzte Rahmen (oben/links hell, unten/rechts dunkel; auf Johanns 2x-Screenshot per Pixelanalyse identifiziert: #CAD9E0-Kante + #002F5D-Kante am selben Kaestchen). Beide WPForms-Pseudos aus - die Box zeichnet der Input selbst (Regel oben), den Haken UNSERE :checked-Regel darunter. */
body div.wpforms-container-full .wpforms-form .wpforms-field-checkbox li input[type=checkbox]:checked::after{content:"";box-sizing:border-box;position:absolute;left:50%;top:50%;width:7px;height:11px;margin:-6.9px 0 0 -3.5px;border:solid var(--st-color-primary,#002F5D);border-width:0 2.5px 2.5px 0;background:none;transform:rotate(40deg);} /* blauer Haken; :checked::after (hoehere Spezifitaet) reaktiviert ihn nach dem content:none oben; background:none neutralisiert ein evtl. SVG-Haken-Bild der WPForms-::after-Regel */ /* 09.09. R8c (Johann, "noch nicht exakt genug"): URSACHE des Restversatzes war box-sizing - im WPForms-Kontext rendern Pseudos CONTENT-box (unser Haken real 9x13, Rotationszentrum rechts-unten verschoben; live per getComputedStyle bewiesen), die Newsletter-Auswahl (.stm-nlx__box:after) dagegen BORDER-box. box-sizing:border-box erzwungen -> Glyph wieder echte 7x11; margin -6.9px vertikal legt die Haken-Tinte per PIL-Raster exakt auf die Boxmitte, identisch zur Auswahl (deren Element-Mitte sitzt 1.5px ueber Boxmitte, Tinte dadurch zentriert - bottom-heavy Glyph). LEHRE: bei Pseudo-Geometrie IMMER box-sizing mitpruefen - dieselbe width/height-Angabe kann je nach Reset-Kontext zwei verschiedene Kaesten ergeben. */
body div.wpforms-container-full .wpforms-form .wpforms-field-checkbox li input[type=checkbox]:checked,body div.wpforms-container-full .wpforms-form .wpforms-field-checkbox li input[type=checkbox]:checked:hover,body div.wpforms-container-full .wpforms-form .wpforms-field-checkbox li input[type=checkbox]:checked:focus,body div.wpforms-container-full .wpforms-form .wpforms-field-checkbox li input[type=checkbox]:checked:active{border:1.5px solid var(--st-color-primary,#002F5D);background:#fff;box-shadow:none;} /* 09.09. R8 (Maik): NUR der geklickte (angehakte) Zustand traegt die blaue 1.5px-Kontur - inkl. Hover/Focus/Active-Varianten, damit keine WPForms-Zustandsregel dazwischenfunkt */
body div.wpforms-container-full .wpforms-form .wpforms-field-checkbox li input[type=checkbox]:focus-visible{outline:2px solid var(--st-color-secondary,#034B91);outline-offset:2px;} /* Tastatur-Fokus bleibt sichtbar (appearance:none entfernt den nativen Ring) - Muster wie .stm-nlx__cb:focus-visible */
body div.wpforms-container-full .wpforms-form .wpforms-field-checkbox li input[type=checkbox].wpforms-error,body div.wpforms-container-full .wpforms-form .wpforms-field-checkbox li input[type=checkbox].user-invalid{border:1.5px solid var(--st-color-accent,#B51F29);} /* 09.09. R5 (Johann): WPForms-Validierung setzt .wpforms-error auf den Input und deren Regel loescht die Border (border-style:none) - Kontur bleibt im Error-Zustand stehen. */ /* 09.09. R8 (Maik): Error-Kontur in Michel-Rot #B51F29 statt Blau */
body div.wpforms-container-full .wpforms-form .wpforms-field-checkbox li input[type=checkbox]:hover,body div.wpforms-container-full .wpforms-form .wpforms-field-checkbox li input[type=checkbox]:focus,body div.wpforms-container-full .wpforms-form .wpforms-field-checkbox li input[type=checkbox]:active{border:1px solid var(--wpforms-field-border-color,#CAD9E0);box-shadow:none;background:#fff;} /* 09.09. R6/R8: unangehakt bleibt die Kontur auch bei Hover/Focus/Active GRAU wie im Default (WPForms wuerde hier eigene Zustandsoptik reinmalen); angehakt gewinnt die :checked-Variantenregel oben (hoehere Spezifitaet) */
body div.wpforms-container-full .wpforms-form .wpforms-field-checkbox li input[type=checkbox].wpforms-error:hover,body div.wpforms-container-full .wpforms-form .wpforms-field-checkbox li input[type=checkbox].wpforms-error:focus,body div.wpforms-container-full .wpforms-form .wpforms-field-checkbox li input[type=checkbox].user-invalid:hover,body div.wpforms-container-full .wpforms-form .wpforms-field-checkbox li input[type=checkbox].user-invalid:focus{border:1.5px solid var(--st-color-accent,#B51F29);box-shadow:none;background:#fff;} /* 09.09. R6 (Johann, "gleiches Problem auch im Inkognito"): WPForms hat :hover-/:focus-Varianten der Error-Regel (0-6-2, border-style:none), die die reine Error-Regel (0-5-4) schlagen, sobald die Maus nach dem Abwahl-Klick auf dem Kaestchen steht. Diese Varianten (0-6-4) halten den Error-Rahmen in allen dynamischen Zustaenden - seit R8 in Michel-Rot. LEHRE: CDP-Klicks setzen weder :hover noch :focus - solche Zustandskombis sind per Automation unsichtbar und muessen ueber die CSSOM-Regelliste gefunden und per Klassenkopie nachgebaut werden. */
body div.wpforms-container-full .wpforms-form .wpforms-field-checkbox li label{color:var(--st-color-ink,#222);font-size:.95rem;margin:0;}
body div.wpforms-container-full .wpforms-form .wpforms-submit-container{text-align:right;padding-top:.6rem;}
body div.wpforms-container-full .wpforms-form button[type=submit]{display:inline-flex;align-items:center;justify-content:center;gap:.6em;background:var(--st-color-primary,#002F5D) !important;color:#fff !important;border:1px solid transparent;border-radius:999px !important;padding:0 1.5rem;font-weight:500;font-family:var(--st-font-head,inherit);font-size:1.25rem;line-height:1;height:45px;white-space:nowrap;-webkit-appearance:none;appearance:none;cursor:pointer;transition:all .3s ease-in-out;} /* 02.08.: gleiche Transition wie CTA-System */ /* 09.09. (Maik, Newsletter-Ticket): Submit = exakt der definierte grosse System-CTA .btn/.btn--primary (45px/1.25rem/500/0 1.5rem) statt des veralteten Sondermasses (46px/1rem/700/.85em 1.8em); mobil unten der globale <=1000-Switch auf die kleine Variante */
body div.wpforms-container-full .wpforms-form button[type=submit]:after{content:"";display:inline-block;flex:0 0 auto;width:.62em;height:.95em;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 15'%3E%3Cpath d='M2 1.8 8 7.5 2 13.2' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right center/auto 100%;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 15'%3E%3Cpath d='M2 1.8 8 7.5 2 13.2' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right center/auto 100%;transition:all .3s ease-in-out;} /* 02.08.: exakt wie .btn--primary - Chevron, beim Hover verlaengert */
body div.wpforms-container-full .wpforms-form button[type=submit]:hover{background:var(--st-color-accent,#B51F29) !important;}
body div.wpforms-container-full .wpforms-form button[type=submit]:hover:after,body div.wpforms-container-full .wpforms-form button[type=submit]:focus-visible:after,body div.wpforms-container-full .wpforms-form button[type=submit]:active:after{width:1.28em;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 15'%3E%3Cpath d='M1 7.5h16.4M12 1.8 18 7.5 12 13.2' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 15'%3E%3Cpath d='M1 7.5h16.4M12 1.8 18 7.5 12 13.2' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
body div.wpforms-container-full .wpforms-form button[type=submit]:active{background:#8F1620 !important;} /* 09.09.: Pressed-State des System-CTA */
@media (max-width:1000px){
body div.wpforms-container-full .wpforms-form button[type=submit]{height:37.5px;font-size:1rem;font-weight:400;padding:0 1.22rem;gap:.625em;} /* 09.09. (Maik, Newsletter-Ticket): mobil die KLEINE System-CTA-Variante - Werte und Grenze (1000px) identisch mit dem globalen .btn-Klein-Switch */
}
body div.wpforms-container-full .wpforms-form .wpforms-field-checkbox li{gap:.3rem;} /* 09.09. (Maik): Abstand Auswahl-Kaestchen -> "Datenschutzbestimmungen"-Text HALBIERT */ /* 09.09. R5 (Maik, Kontaktformular-Ticket): GLOBAL fuer alle Formulare (war auf .module--newsletter gescopt) */
body div.wpforms-container-full .wpforms-form .wpforms-field-checkbox li label{padding-left:0;} /* 09.09. R2 (Johann): sichtbarer Abstand war trotz Gap-Halbierung 16.8px - WPForms gibt dem Label ZUSAETZLICH padding-left:12px mit. Padding weg -> sichtbar 4.8px */ /* 09.09. R5: global */
body div.wpforms-container-full .wpforms-form .wpforms-field-checkbox ul li input + label{padding-left:0;padding-inline-start:0;} /* 09.09. R7: REGRESSION aus der R5-Globalisierung - mit dem Wegfall von .module--newsletter verlor die Regel oben eine Klasse (0-3-4) und WPForms' "div... .wpforms-field.wpforms-field-checkbox ul li input + label{padding-inline-start:12px}" (0-3-5) gewann wieder: Text sass in ALLEN Formularen erneut 16.8px neben dem Kaestchen. Diese Variante (0-3-6) schlaegt sie; padding-inline-start explizit mit genullt, weil die WPForms-Regel die logische Eigenschaft setzt. LEHRE: beim Ent-Scopen einer Regel sinkt ihre Spezifitaet - jede Globalisierung gegen die verlierende Fremdregel NEU nachmessen (Tinte, nicht Box). */
body div.wpforms-container-full .wpforms-form .wpforms-field-checkbox li input[type=checkbox]{margin-top:0;} /* 09.09. R2: war 4.5px (Text oben buendig zur Box) */ /* 09.09. R8 (Maik): Textzeile VERTIKAL ZENTRIERT zum Kaestchen - margin-top:0 reicht, weil Zeilenhoehe (19.76px) ~ Boxhoehe (20px); mehrzeiliger Text waechst nach unten */
body div.wpforms-container-full .wpforms-form .wpforms-submit-container{padding-top:0;} /* 09.09. R2 (Johann): Abstand "*Pflichtfelder" zum Block darueber halbiert (Container-padding-top 9.6px raus) */ /* 09.09. R5: global */
body div.wpforms-container-full .wpforms-form .wpforms-submit-container::before{content:"*Pflichtfelder";display:block;text-align:left;font-size:.8rem;color:var(--st-neutral-600,#6D6D6D);margin:-5px 0 .8rem;} /* 09.09. (Maik): "*Pflichtfelder" ZWISCHEN Datenschutz-Zeile und CTA (Block VOR dem Button, linksbuendig; -5px oben, Rest des Abstands sind Feld-padding-bottom 9px + 10px Feld->Container in WPForms-Strukturen) */ /* 09.09. R5 (Maik, Kontaktformular-Ticket): GLOBAL fuer ALLE Formulare - die alte :after-Variante unterm .module--form-Formular ist ERSATZLOS raus (stand sonst doppelt); damit steht die Zeile auch im Teams-/Kontaktformular */
/* ---- 16.09.2026 (Ticket "Abschiedsbuch Herr Roeder"): Upload-Felder + Zeichen-Zaehler ----
Neues Formular 11501 nutzt erstmals File-Upload (WPForms Pro, modern style) und das
600-Zeichen-Limit. Upload-Felder brauchen SICHTBARE Labels ("Upload 1 - ein Foto von mir"),
die globale Platzhalter-Konvention (Labels display:none, Z.842) gilt nur fuer Tipp-Felder. */
body div.wpforms-container-full .wpforms-form .wpforms-field-file-upload .wpforms-field-label{display:block;font-size:1rem;font-weight:500;color:var(--st-color-primary,#002F5D);margin:0 0 .45rem;}
body div.wpforms-container-full .wpforms-form .wpforms-field-file-upload .wpforms-uploader{border:1px dashed var(--st-color-lightblue,#CAD9E0);border-radius:8px;background:#fff;color:var(--st-color-primary,#002F5D);}
body div.wpforms-container-full .wpforms-form .wpforms-field-file-upload .wpforms-uploader:hover,body div.wpforms-container-full .wpforms-form .wpforms-field-file-upload .wpforms-uploader.wpforms-dropzone-hover{border-color:var(--st-color-primary,#002F5D);}
body div.wpforms-container-full .wpforms-form .wpforms-field-file-upload .wpforms-uploader .dz-message{color:var(--st-color-primary,#002F5D);}
body div.wpforms-container-full .wpforms-form .wpforms-field-file-upload .wpforms-uploader svg{fill:var(--st-color-primary,#002F5D);}
body div.wpforms-container-full .wpforms-form .wpforms-field-description{font-size:.8rem;color:var(--st-neutral-600,#6D6D6D);margin-top:.35rem;}
body div.wpforms-container-full .wpforms-form .wpforms-field-limit-text{font-size:.8rem;color:var(--st-neutral-600,#6D6D6D);text-align:right;margin-top:.35rem;}
/* ============ Mobile Navigation – Header + Drill-Down (2026-07-26) ============ */
@media (min-width:1001px){
.header-search{display:none;}
.site-branding__logo--stacked{display:none;}
.mnav{display:none;}
}
@media (max-width:1000px){
/* --- Header nach Figma: Burger links, Logo (gestapelt) mittig, Suche rechts ---
19.08. R2 (Asana "Modul Haupt Navigation"): Asset-Icons (Burger Menu/Close/Suche Lupe),
Menue hoehenfuellend, kein Schatten auf der Hauptnavi, Trennlinie hart #B0B0B0. */
.site-topbar{display:none;}
.site-header__inner{min-height:80px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 14px;}
.nav-toggle{display:flex;order:1;flex-direction:row;align-items:center;justify-content:center;gap:0;width:44px;height:44px;padding:0;background:transparent;border:none;cursor:pointer;color:var(--st-color-primary,#002F5D);}
.nav-toggle{position:relative;}
.nav-toggle__open,.nav-toggle__close{display:block;line-height:0;transition:opacity .22s ease,transform .22s ease;} /* 28.08. (Maik): Burger <-> Close animiert (Crossfade + Drehung) */
.nav-toggle__open svg,.nav-toggle__close svg{width:36px;height:36px;max-width:none;display:block;} /* 23.08.: Icons etwas groesser */
.nav-toggle__close{position:absolute;left:50%;top:50%;margin:-18px 0 0 -18px;opacity:0;transform:rotate(-90deg);pointer-events:none;}
.nav-toggle[aria-expanded="true"] .nav-toggle__open{opacity:0;transform:rotate(90deg);}
.nav-toggle[aria-expanded="true"] .nav-toggle__close{opacity:1;transform:rotate(0deg);}
.nav-toggle__bar{background:var(--st-color-primary,#002F5D);} /* Fallback-Bars, falls Icon-Dateien fehlen */
.site-header__inner{position:relative;}
.site-branding{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;} /* 28.08. (Maik): Logo zur BROWSERBREITE zentriert, nicht zwischen den ungleich breiten Icon-Gruppen */
.site-branding__logo--full,.site-branding__logo--mark{display:none !important;}
.site-branding__logo--stacked{display:block;height:62px;width:auto;}
.header-actions{order:3;display:flex;align-items:center;gap:2px;} /* 28.08. (Eyeable): Gruppe statt Einzelbutton */
.header-search{display:flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--st-color-primary,#002F5D);background:none !important;border:0;padding:0;} /* 18.08.: kein Akzent-BG (Altregel) */
.site-header .header-a11y svg{width:40px;height:40px;max-width:none;}
.site-header .header-search svg{width:40px;height:40px;max-width:none;} /* 28.08. R2: 40 = Kreisgroesse; Spezifitaet > button.header-search svg */
body.mnav-lock{overflow:hidden;}
/* --- Overlay: hoehenfuellend, liegt HINTER der Hauptnavigation (kein Schatten auf ihr) --- */
#site-nav{display:none;position:fixed;top:calc(80px + var(--wp-admin--admin-bar--height,0px));left:0;right:0;bottom:0;background:#fff;z-index:80;box-shadow:none;border-top:1px solid #B0B0B0;height:auto;max-height:none;overflow-y:auto;overscroll-behavior:contain;} /* 28.08. (Maik): wieder hoehenfuellend - fixed bis bottom:0 statt 100dvh-Rechnung (dvh war auf Kunden-Browsern unzuverlaessig -> Menue endete vor dem unteren Rand); 19.08.: max-height:none schlaegt Altregel */
#site-nav.is-open{display:block;}
#site-nav .nav-menu--mega{display:none;}
/* --- Drill-Down (19.08. R2: Stack-Slides statt Akkordeons, nach Figma) --- */
.mnav ul{list-style:none;margin:0;padding:0;}
.mnav__panel--sub{display:none;}
.mnav__panel{padding-bottom:150px;} /* 28.08. (Maik): fester Weissraum nach dem letzten Menuepunkt - die Quicknavi-Pille (bottom 16 + 56 hoch) liegt nie mehr ueber dem Inhalt */
.mnav.has-sub .mnav__panel--root{display:none;}
.mnav__panel--sub.is-active{display:block;}
.mnav__panel.slide-fwd{animation:mnavInFwd .28s ease both;}
.mnav__panel.slide-back{animation:mnavInBack .28s ease both;}
.mnav__panel--root{padding-bottom:150px;} /* 28.08.: gleicher fester Weissraum wie die Sub-Panels (2rem-Regel ueberschrieb die generische 150px-Regel) */
/* Mask-Chevron wie Desktop (mega__chev, 10x15) */
.mnav__chev{flex:0 0 auto;width:10px;height:15px;font-size:0;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 15'%3E%3Cpath d='M2 1.8 8 7.5 2 13.2' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 15'%3E%3Cpath d='M2 1.8 8 7.5 2 13.2' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;}
/* Hauptmenuepunkte: Typo wie Desktop (Book, uppercase, #222222), KEINE Trennlinien */
.mnav ul.mnav__l1{padding-top:.6rem;} /* 19.08.: Spezifitaet > .mnav ul */
.mnav__row{display:flex;justify-content:space-between;align-items:center;gap:1rem;width:100%;padding:.85rem 1.5rem;background:none;border:0;font-family:var(--st-font-body,inherit);font-weight:400;text-transform:uppercase;letter-spacing:.02em;font-size:1.25rem;line-height:1.5;color:#222222;text-decoration:none;text-align:left;cursor:pointer;}
.mnav__row .mnav__chev{color:#222222;}
button.mnav__row:hover,button.mnav__row:active,button.mnav__metarow:hover,button.mnav__metarow:active{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px;} /* 28.08. (Maik): Hover-Effekt auch fuer Punkte mit tieferer Ebene (mobil) */
/* Panel-Kopf: Back-Arrow (Asset) linksbuendig + vertikal zentriert, Titel zentriert,
unterstrichen, #222222, Maximalbreite mit automatischem Umbruch */
.mnav__head{position:relative;padding:1.1rem 3.4rem;min-height:56px;display:flex;align-items:center;justify-content:center;margin-bottom:.9rem;} /* 23.08.: mehr Abstand Titel -> Untermenue */
.mnav__back{position:absolute;left:.9rem;top:50%;transform:translateY(-50%);width:44px;height:44px;padding:0;border:0;cursor:pointer;background:transparent url("../img/icons/Back%20Arrow.svg") no-repeat center/36px auto;font-size:0;} /* 28.08. (Maik): gleiche Groesse wie das Close-Icon (36px) */
.mnav__title{display:block;max-width:100%;margin:0 auto;text-align:center;font-family:var(--st-font-body,inherit);font-weight:400;text-transform:uppercase;letter-spacing:.02em;font-size:1.25rem;line-height:1.4;color:#222222;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px;overflow-wrap:break-word;hyphens:auto;}
/* Tiefere Ebenen: KEINE Trennlinien, KEINE Akkordeons - Typo/Chevrons wie Desktop */
.mnav__l3list a{display:block;padding:.7rem 1.5rem;font-size:1.25rem;line-height:1.5;font-weight:400;color:#222222;text-decoration:none;}
/* Topnavigation im Menue: einheitlich #5D5D5D, gleiche Chevrons; dunkelblaue Trennlinie
zum Hauptmenue NUR in Textbox-Breite (margin statt voller Breite) */
.mnav ul.mnav__meta{border-top:1px solid var(--st-color-primary,#002F5D);margin:1.1rem 1.5rem 0;padding:1rem 0 2rem;} /* 19.08.: Spezifitaet > .mnav ul; 23.08.: Linie duenner (Maik) */
.mnav__metarow{display:flex;justify-content:space-between;align-items:center;gap:1rem;width:100%;padding:.6rem 0;background:none;border:0;font-family:var(--st-font-body,inherit);font-weight:400;font-size:1.125rem;line-height:1.5;color:var(--st-neutral-600,#5D5D5D);cursor:pointer;text-align:left;text-decoration:none;}
.mnav__metarow .mnav__chev{color:var(--st-neutral-600,#5D5D5D);}
.mnav__metalist a{display:flex;align-items:center;gap:10px;padding:.7rem 1.5rem;color:var(--st-neutral-600,#5D5D5D);text-decoration:none;font-size:1.125rem;direction:ltr;text-align:left;}
.mnav__metalist a:hover{color:#034B91;}
.mnav__metalist a.is-active{color:var(--st-color-primary,#002F5D);font-weight:700;}
.mnav__metalist .stm-lang__check{display:none;flex:0 0 auto;}
.mnav__metalist a.is-active .stm-lang__check{display:block;}
}
@keyframes mnavInFwd{from{transform:translateX(48px);opacity:0;}to{transform:none;opacity:1;}}
@keyframes mnavInBack{from{transform:translateX(-48px);opacity:0;}to{transform:none;opacity:1;}}
/* ============ Footer mobil nach Figma „7 Mob Mobile Footer" (2026-07-26) ============ */
@media (max-width:782px){
.site-footer__cols{grid-template-columns:1fr !important;gap:0;}
.site-footer__col{padding:22px 0;border-bottom:1px solid #ffffff;} /* 23.08. (Maik): Trenner weiss */
.site-footer__col:first-child{padding-top:0;}
.site-footer__col--social{border-bottom:0;}
.site-footer__bottom{display:flex;flex-direction:column;align-items:center;border-top:1px solid #ffffff;margin-top:8px;}
.site-footer__logo,.site-footer__logo--center{position:static;transform:none;background:transparent;padding:24px 0 4px;order:1;margin:0;}
.site-footer__meta{order:2;width:100%;}
.site-footer__meta::before{display:none;}
.site-footer__meta-menu{flex-wrap:wrap;justify-content:center;column-gap:24px;row-gap:10px;padding:12px 0 110px;} /* 23.08. (Maik): mehr blaue Flaeche unten - Quicknavi-Pille (bottom 16 + 56 hoch) verdeckt die Meta-Punkte nicht mehr */
.site-footer__meta-menu li{background:transparent;}
}
/* Mobile: lange Headline-Wörter umbrechen (min-content-Overflow, 2026-07-26) */
@media (max-width:1000px){
.module__headline,.quote__text,.plx__headline{hyphens:auto;overflow-wrap:anywhere;}
.cols__row,.cols__row>.col{min-width:0;}
}
/* 19.08. R2: Meta-Styles wandern in den Hauptnav-Mobile-Block */
/* 19.08. R2: Topnavi-Mobile-Styles in den Hauptnav-Mobile-Block ueberfuehrt */
/* ============ Karussell "Aktuelles"/"Veranstaltungen" + Team-Formular (2026-07-27, Figma 8081:1051) ============ */
.nkar{display:grid;grid-template-columns:minmax(240px,.9fr) 2.1fr;gap:3rem;align-items:center;}
.nkar__intro{display:flex;flex-direction:column;gap:1.4rem;align-items:flex-start;min-width:0;}
.nkar__intro-img{max-width:65%;height:auto;align-self:flex-end;margin-bottom:-2rem;}
.nkar__headline{font-size:var(--stm-h2-size);line-height:var(--stm-h2-lh);margin:0;} /* 21.08.: globale H2 */
.nkar__cta{margin:0;}
.nkar__main{min-width:0;}
@media(min-width:700px){ .nkar .stm-cards{grid-auto-columns:calc((100% - 2*var(--st-space-m,2rem))/3);} }
.nkar .stm-card__media{aspect-ratio:auto;}
.nkar-card__inner{display:flex;flex-direction:column;gap:.3rem;text-decoration:none;height:100%;}
.nkar-card{display:flex;} .nkar-card>.nkar-card__inner{flex:1;} /* 31.07.: gleiche Kartenhoehe */
.nkar-card__media{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--st-color-lightblue,#CAD9E0);}
.nkar-card__img{width:100%;height:100%;object-fit:cover;display:block;}
.nkar-card__date{position:absolute;top:0;left:0;background:rgba(34,34,34,.85);color:#fff;font-size:.72rem;font-weight:700;padding:.3rem .6rem;letter-spacing:.04em;}
.nkar-card__badge{position:absolute;top:0;left:0;background:var(--st-color-primary,#002F5D);color:#fff;font-size:.72rem;font-weight:700;padding:.3rem .6rem;letter-spacing:.04em;text-transform:uppercase;}
/* 02.08.: Termine-Karussell nach Figma 8081:1156 - Freisteller rechts, grosse Headline links, CTA unten */
.nkar--events{grid-template-columns:minmax(280px,.95fr) 1.05fr;}
.nkar--events .nkar__intro{position:relative;display:block;min-height:420px;}
.nkar--events .nkar__intro-img{position:absolute;right:0;bottom:0;max-width:60%;margin:0;z-index:1;}
.nkar--events .nkar__intro .module__kicker{position:relative;z-index:2;margin:0 0 1rem;}
.nkar--events .nkar__headline{position:relative;z-index:2;margin:0 0 2rem;max-width:70%;} /* 02.08. R2: KEINE Groessen-Override mehr - Standard-Headline wie Einzelveranstaltung/alle Module */
.nkar--events .nkar__cta{position:relative;z-index:2;margin:0;}
.nkar--events .nkar-card__badge{text-transform:none;} /* Kategorien nicht VERSAL (Ticket) */
@media(max-width:900px){
.nkar--events .nkar__intro{min-height:0;}
.nkar--events .nkar__intro-img{position:static;max-width:45%;display:block;margin:0 auto 1rem;}
.nkar--events .nkar__headline{max-width:none;}
}
.nkar-card__title,.nkar-card__when{font-family:var(--st-font-head,inherit);font-weight:700;text-transform:uppercase;color:var(--st-color-primary,#002F5D);font-size:.92rem;line-height:1.3;margin-top:.55rem;}
.nkar-card__sub,.nkar-card__evtitle{color:var(--st-color-accent,#B51F29);font-weight:700;font-size:.9rem;line-height:1.35;}
.nkar-card__desc{color:#555;font-size:.85rem;line-height:1.4;}
.nkar-card__go{color:#222222;font-size:1rem;font-weight:500;margin-top:auto;padding-top:.35rem;display:inline-flex;align-items:center;gap:.4em;align-self:flex-start;} /* 31.07.: immer auf einer Hoehe */ /* 05.09. (Maik, Buttons-Ticket): auf die Komponente "Text-Link mit Pfeil (klein)" vereinheitlicht - Medium 1rem, #222222, mit Chevron (News + Veranstaltungen hatten "komplett andere Textlinks") */
.nkar-card__go::after{content:"";display:inline-block;flex:0 0 auto;width:.62em;height:.95em;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 15'%3E%3Cpath d='M2 1.8 8 7.5 2 13.2' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right center/auto 100%;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 15'%3E%3Cpath d='M2 1.8 8 7.5 2 13.2' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right center/auto 100%;transition:all .3s ease-in-out;} /* 07.09. R2 (Maik, News-Karussell): transition wie beim btn--text-Original - noetig fuer den Hover-Morph unten */
.nkar-card__inner:hover .nkar-card__go::after,.nkar-card__inner:focus-visible .nkar-card__go::after,.nkar-card__inner:active .nkar-card__go::after{width:1.28em;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 15'%3E%3Cpath d='M1 7.5h16.4M12 1.8 18 7.5 12 13.2' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 15'%3E%3Cpath d='M1 7.5h16.4M12 1.8 18 7.5 12 13.2' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");} /* 07.09. R2 (Maik, News-Karussell): "der korrekte Text-Link hat bei Hover und Klick einen PFEIL statt Chevron" - der Hover-Morph des btn--text-Originals fehlte in der nkar-Kopie; er greift beim Hover/Klick der ganzen Karte (die Karte IST der Link, analog zum Farbwechsel darunter). Gilt fuer News- UND Veranstaltungs-Karten (beide nutzen .nkar-card__go) */
.nkar-card__inner:hover .nkar-card__title{color:var(--st-color-accent,#B51F29);}
.nkar-card__inner:hover .nkar-card__go{color:var(--st-color-secondary,#034B91);}
.nkar-card__inner:active .nkar-card__go{color:var(--st-color-primary,#002F5D);} /* 05.09. (Maik): Text-Link-States #222/#034B91/#002F5D - Kartentitel hovert weiter rot */
.nkar__topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;gap:1rem;}
.nkar__tabs{display:flex;gap:1.6rem;}
.nkar__tab{background:none;border:0;padding:0;font-family:var(--st-font-head,inherit);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:.95rem;color:var(--st-color-primary,#002F5D);cursor:pointer;}
.nkar__tab.is-active,.nkar__tab:hover{color:var(--st-color-accent,#B51F29);}
.nkar__main[data-tab="heute"] .stm-card[data-today="0"]{display:none;}
.nkar__empty{color:#666;margin:.5rem 0 0;}
@media(max-width:900px){
.nkar{grid-template-columns:1fr;gap:1.25rem;}
.nkar__intro{align-items:center;text-align:center;}
.nkar__intro-img{align-self:center;margin-bottom:0;max-width:45%;}
}
.stm-team-form{display:grid;grid-template-columns:1fr 1.3fr;gap:3rem;align-items:start;}
.stm-team-form .stm-team-card__media{aspect-ratio:6/3;} /* 01.08.: breites Personenbild (Ticket) */
.stm-team-form .stm-team-card__name{margin-bottom:.25rem;} /* 02.08.: Funktion dichter an den Namen (Ticket) */
.stm-team-form__form .wpforms-container,.stm-team-form__form .wpforms-container-full,
body .stm-team-form__form div.wpforms-container-full{margin-top:0;padding-top:0;} /* Formular oben buendig mit dem Bild (02.08.: Selektor verstaerkt) */
.stm-team-form__form .wpforms-container .wpforms-form,.stm-team-form__form .wpforms-field:first-child{margin-top:0;padding-top:0;}
.stm-team-form__hint{color:#666;}
@media(max-width:820px){ .stm-team-form{grid-template-columns:1fr;gap:1.5rem;} }
/* Fix: Intro-Headline im nkar darf auch auf Desktop trennen (2026-07-27) */
.nkar__headline{hyphens:auto;overflow-wrap:anywhere;}
/* Fix: gestapeltes Logo auf Desktop sicher verstecken (stm-assets.css setzt .site-branding__logo display:block) 2026-07-27 */
@media (min-width:1001px){ .site-branding__logo.site-branding__logo--stacked{display:none;} }
/* Fix: Sound-Button verankert sich in seiner Spalte (sitzt unten rechts im Motiv, Figma) 2026-07-27 */
.col:has(.col__soundwrap){position:relative;}
/* ============ Teaser-Rework nach Figma-Abgleich (2026-07-27) ============ */
/* Teaserkacheln: eigener Modul-Wrapper, max 1440px, Link-Zeile UNTER dem Bild */
/* 04.08.: 1440px-Sonderbreite ENTFERNT - Teaser liegt im Satzspiegel (Kundenticket module-6) */
.teaser-grid__item{display:flex;flex-direction:column;gap:.9rem;text-decoration:none;}
/* 02.09. R2 (Maik, "Modul Teaser Kacheln"): Kachel-Ratios exakt nach Figma-Briefing */
.teaser-grid__media{position:relative;display:block;overflow:hidden;aspect-ratio:648/440;} /* Basis = 2-Spalter 64.8/44 */
.tg--full .teaser-grid__media{aspect-ratio:1320/540;} /* 1-Spalter 132/54 */
.tg--two_thirds .teaser-grid__media{aspect-ratio:872/520;} /* 70er-Kachel 87.2/52 */
.tg--one_third .teaser-grid__media{aspect-ratio:422/380;} /* 3-Spalter 42.2/38 */
.tg--two_thirds + .tg--one_third .teaser-grid__media,
.tg--one_third:has(+ .tg--two_thirds) .teaser-grid__media{aspect-ratio:422/520;} /* 30er NEBEN einem 70er: 42.2/52 - gleiche Hoehe wie die 70er-Kachel (872+422+Gap = Satzspiegel) */
.tg--quarter .teaser-grid__media{aspect-ratio:312/320;} /* 4-Spalter 31.2/32 (leicht hochkant) */
.teaser-grid__label{display:block;text-align:center;font-family:var(--st-font-head,inherit);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:.95rem;color:var(--st-color-primary,#002F5D);transition:color .15s ease;}
.teaser-grid__item:hover .teaser-grid__label{color:var(--st-color-accent,#B51F29);}
.teaser-grid__overlay{display:none;}
/* 02.09. R2: Kopfzeile mit optionalem CTA - EXAKT der Karussell-Standard (.nnews__head):
Desktop Topline/HL links + Button rechts untenbuendig zur HL, Mobile untereinander linksbuendig */
.stm-teasergrid .tg__head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:2rem;}
.stm-teasergrid .tg__headings{min-width:0;}
.stm-teasergrid .tg__head .module__headline{margin-bottom:0;}
.stm-teasergrid .tg__cta{flex:0 0 auto;}
.stm-teasergrid .teaser-grid{margin-top:0;} /* Abstand zum Grid steuert jetzt .tg__head */
@media (max-width:900px){
.stm-teasergrid .tg__head{flex-direction:column;align-items:flex-start;gap:1.25rem;margin-bottom:1.5rem;}
}
/* 02.09. R2: Mobil haben ALLE Kacheln dasselbe Format 36/32, kleine Formate full width */
@media (max-width:820px){
.teaser-grid__item{flex-basis:calc(50% - var(--tg-gap)/2) !important;}
.teaser-grid__media,.tg--full .teaser-grid__media,.tg--two_thirds .teaser-grid__media,
.tg--one_third .teaser-grid__media,.tg--quarter .teaser-grid__media,
.tg--two_thirds + .tg--one_third .teaser-grid__media,
.tg--one_third:has(+ .tg--two_thirds) .teaser-grid__media{aspect-ratio:360/320;}
}
@media (max-width:520px){ .teaser-grid__item{flex-basis:100% !important;} }
/* Slider-Dots (sitewide): Grau-Punkte, aktiv = blaue Pille */
.stm-slider__dots{display:flex;gap:.45rem;align-items:center;}
.stm-slider__dots button{width:8px;height:8px;border-radius:999px;border:0;padding:0;background:var(--st-neutral-300,#D1D1D1);cursor:pointer;transition:all .2s ease;}
.stm-slider__dots button[aria-current="true"]{width:22px;background:var(--st-color-primary,#002F5D);}
.stm-slider__prev,.stm-slider__next{background:none;border:0;padding:0;font-size:1.3rem;line-height:1;color:var(--st-color-primary,#002F5D);cursor:pointer;}
.stm-slider__prev:disabled,.stm-slider__next:disabled{color:var(--st-neutral-300,#D1D1D1);cursor:default;}
.stm-slider__prev:hover:not(:disabled),.stm-slider__next:hover:not(:disabled){color:var(--st-color-accent,#B51F29);}
/* 07.09.: caption-box/navarrows-Regeln entfernt - Markup nutzt jetzt .stm-slbox + .stm-slbox__arrows (s. Spalter-Block) */
/* Meta-Zeilen (Glockengelaeut: Label blau VERSAL, Wert rot) */
.col__text .stm-meta{margin:.5rem 0 0;}
.col__text .stm-meta strong{display:block;color:var(--st-color-primary,#002F5D);text-transform:uppercase;letter-spacing:.05em;font-size:.82rem;}
.col__text .stm-meta span{color:var(--st-color-accent,#B51F29);font-weight:700;font-size:.9rem;line-height:1.4;}
/* Meta-Zeilen: Wert-Text rot auch ohne span (TinyMCE strippt spans) 2026-07-27 */
.col__text .stm-meta{color:var(--st-color-accent,#B51F29);font-weight:700;font-size:.9rem;line-height:1.45;}
/* is-intro Bild-Text: Kopf zentriert, Spaltentext bleibt linksbuendig (Glockengelaeut) 2026-07-27 */
.module--spalter .is-intro .col .col__text{text-align:left;}
/* Teaserkacheln: Link-Balken halbtransparent unten AUF dem Bild (Figma-Detail) 2026-07-27 */
.teaser-grid__item{gap:0;}
.teaser-grid__bar{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:.75rem 1rem; /* 02.08.: z-index ueber dem Bild-Credit (Credit liegt dahinter) */background:rgba(255,255,255,.85);text-align:center;font-family:var(--st-font-head,inherit);font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:1.25rem;line-height:1.1;color:var(--st-color-primary,#002F5D);transition:color .15s ease;} /* 05.09. (Maik, "Modul Teaser"): Title-Links ALLE auf H5 (1.25rem, war H4 28px - "einfach zu riesig"); line-height 1.5 statt H5-34px, damit mehrzeilige Titel in der Leiste kompakt bleiben */ /* 15.10. R115 (Kunde, "Teaserkachel Lineheight H5"): 1.5 (30px) -> 1.1 (22px) = die allgemeine H5-Zeilenhoehe aus Maiks 10.09.-Ticket (.module h5 20/22px, Regel ~2366). Die 1.5 stammte von VOR dem 10.09., als die globale H5 noch 34px hatte - seit der Globalkorrektur stand die Kachel als einzige noch auf dem alten Wert. Relativ (1.1) statt 1.375rem, damit ein kuenftiger Groessenwechsel mitskaliert. */
.teaser-grid__item:hover .teaser-grid__bar{color:var(--st-color-accent,#B51F29);}
/* 05.09.: 4-Spalter-Sonderregel (Figma 24) entfaellt - alle Varianten einheitlich H5 */
@media (max-width:820px){ .teaser-grid__bar{padding:.7rem .9rem;} } /* mobil: gleiche H5-Groesse, nur kompakteres Padding */
/* ============ Karussells dynamisiert: Anschnitt + Dots + Pfeile (Figma, 2026-07-27) ============ */
/* Angeschnittener Eintrag: News/Events ~2,4 Karten, generisches Karussell ~4,3 Karten je View */
@media(min-width:700px){
.nkar .stm-cards{grid-auto-columns:calc((100% - var(--nkarbleed,0px) - 2*var(--st-space-m,2rem))/2.4);}
.module--karussell .stm-cards{grid-auto-columns:calc((100% - 4*var(--st-space-m,2rem))/4.3);}
}
/* Dots: aktiv = blaue Pille */
.stm-cards__dots button{width:8px;height:8px;background:var(--st-neutral-300,#D1D1D1);transition:width .2s ease,background .2s ease;}
.stm-cards__dots button[aria-current="true"]{width:22px;background:var(--st-color-primary,#002F5D);}
/* News-Feinschliff (31.07., Kundenticket module-11): schmalere Gaps, Titel lh 1.1,
kompakter Datums-Badge, Hover nur "Mehr erfahren", Anschnitt AUSSERHALB des Satzspiegels */
.stm-cards--news{gap:1rem;} /* 07.09. (Maik, News-Karussell): Gap wie Karussell Standard (1rem, war 1.5) - Kacheln damit exakt in Standard-4-Spalter-Breite */
.nkar-card__title{line-height:1.1;}
.nkar-card__date,.nkar-card__badge{font-size:.75rem;line-height:1;padding:5px 8px;}
.nkar-card__inner:hover,.nkar-card__inner:hover span{text-decoration:none;}
/* 05.09. (Maik, Buttons-Ticket): Hover-Unterstreichung raus - die Text-Link-Komponente hat keine, der Chevron kommt aus der Basisregel */
.module--newsblog,.module--events{overflow-x:clip;} /* Bleed ohne Seiten-Scrollbalken */
/* ==== Code-Modul: Embeds/iframes responsiv 16:9 (31.07., Webcam-Ticket) ====
Wie die Live-Seite (padding-bottom 56.25%-Hack), nur modern per aspect-ratio.
width/height-Attribute des eingefuegten iframes werden ueberschrieben; eine
feste Hoehe per Inline-style="height:..px" gewinnt weiterhin (bewusst). */
.module--code iframe{display:block;width:100%;aspect-ratio:16/9;height:auto;border:0;}
.stm-hn__customico{width:34px;height:34px;object-fit:contain;max-width:none;display:block;} /* Motiv 34px = gruene Kaesten (Kundenmock, 51px@1.5x) */ /* Quick-Navi: getauschte Icons */
/* ==== Breadcrumbs (31.07., Figma Seite "Layout") ==== */
.modules{display:flow-root;} /* 01.08.: Margin-Collapse-Falle - die bc-Marge kollabierte durch den Wrapper nach aussen (sichtbar 0px unterm Header) */
.stm-bc{margin:2rem 0 1rem;} /* 02.08.: Header ueberlappt seit Sticky-Fix NICHT mehr -> 2rem = 32px sichtbare Luft wie abgenommen */
.module--sgt .stm-bc{position:relative;z-index:5;} /* 18.09. R56 (Dirk/Stefanie, Einzelseiten News+Termine): Brotkrume in der Z-ACHSE ueber den Content - die grosse Datums-Textbox der sgt-grid reichte (transparent) ueber die Brotkrume und fing deren Klicks ab; Position bleibt wie immer UNTER dem Hero (17.09.-Umzug vor den Hero war ein Missverstaendnis, Templates zurueckgebaut) */
.stm-bc__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;}
.stm-bc__item{display:inline-flex;align-items:center;font-size:.75rem;font-weight:500;line-height:1.5;letter-spacing:.0125em;color:var(--st-neutral-300,#B0B0B0);}
.stm-bc__item.is-current{color:var(--st-neutral-400,#888888);}
.stm-bc__link{color:inherit;text-decoration:none;}
.stm-bc__link:hover{color:var(--st-neutral-400,#888888);text-decoration:none;}
/* Nach einem Hero: Breadcrumb DIREKT an die Hero-Kante (fix 40px, unabhaengig vom Spacer);
der "Abstand unten" des Heros wirkt erst NACH dem Breadcrumb (Kundenregel 31.07.).
Margin-Collapse-Mathe: Ziel 40px = max(HeroSpacer, mt) bzw. HeroSpacer + negatives mt. */
.module--hero + .stm-bc{margin-top:-10px;margin-bottom:50px;} /* Default-Spacer 50 */
.module--hero.spacer--0 + .stm-bc{margin-top:40px;margin-bottom:0;}
.module--hero.spacer--25 + .stm-bc{margin-top:40px;margin-bottom:25px;}
.module--hero.spacer--50 + .stm-bc{margin-top:-10px;margin-bottom:50px;}
.module--hero.spacer--75 + .stm-bc{margin-top:-35px;margin-bottom:75px;}
.module--hero.spacer--100 + .stm-bc{margin-top:-60px;margin-bottom:100px;}
.module--hero.spacer--150 + .stm-bc{margin-top:-110px;margin-bottom:150px;}
.module--hero.spacer--200 + .stm-bc{margin-top:-160px;margin-bottom:200px;}
.module--hero.spacer--250 + .stm-bc{margin-top:-210px;margin-bottom:250px;}
/* 28.08. (Maik): Breadcrumb-Abstand nach oben MOBIL um 60%% verringert (40px sichtbar -> 16px).
30.08. (Maik): "gerne nochmal um 40%%" -> 16px sichtbar -> ~10px (je Variante -6px mehr Zug);
Basisfall 12.8px -> 7.7px, Termin-Single 11.2px -> 6.7px. Desktop weiterhin unveraendert.
01.09. (Johann-Screenshot, Fenster 901-1000px): Breakpoint von 900 auf 1000 - die Seite zeigt ab
<=1000 das MOBILE Layout (Burger/zentriertes Logo), der Breadcrumb-Block schaltete aber erst bei
<=900 um -> in der Zone dazwischen galten noch die Desktop-40px. Gleiche Lehre wie beim
Quicknav-JS: Breakpoints IMMER an der Media-Query des sichtbaren Layouts ausrichten. */
@media(max-width:1000px){
.stm-bc{margin-top:.48rem;padding-top:0;} /* Basisfall ohne Hero davor: 2rem -> 0.48rem. 01.09. (Johann, 48px-Messung): .stm-bc ist AUCH .module und erbt 32px padding-top IM Element - alle bisherigen Runden haben nur den Margin-Anteil verkleinert, der Text sass trotzdem 32px tiefer als die gemessene Boxkante. Mobil padding-top:0 -> sichtbarer Abstand = exakt die kalibrierten Margin-Werte (10px bei Heros). */
.module--hero + .stm-bc{margin-top:-40px;}
.module--hero.spacer--0 + .stm-bc{margin-top:10px;}
.module--hero.spacer--25 + .stm-bc{margin-top:-15px;} /* 30.08.: Kalibrierfehler der 28.08.-Runde behoben - Hero traegt hier selbst 25px margin-bottom, die beim Margin-Collapse gewannen (sichtbar waren 25 statt 16); -15 ergibt die einheitlichen 10px */
.module--hero.spacer--50 + .stm-bc{margin-top:-40px;}
.module--hero.spacer--75 + .stm-bc{margin-top:-65px;}
.module--hero.spacer--100 + .stm-bc{margin-top:-90px;}
.module--hero.spacer--150 + .stm-bc{margin-top:-140px;}
.module--hero.spacer--200 + .stm-bc{margin-top:-190px;}
.module--hero.spacer--250 + .stm-bc{margin-top:-240px;}
.module--sgt .stm-bc{margin-top:.42rem;} /* Termin-Single: 1.75rem -> 0.42rem */
}
.stm-bc__item:not(:last-child)::after{content:"";width:20px;height:20px;flex:0 0 auto;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 15'%3E%3Cpath d='M2 1.8 8 7.5 2 13.2' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/auto 9px;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 15'%3E%3Cpath d='M2 1.8 8 7.5 2 13.2' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/auto 9px;}
.nnews__main.stm-cards-carousel,.nkar__main{--nkarbleed:calc(var(--st-gutter,60px) + max(0px,(100vw - 1320px)/2));margin-right:calc(-1*var(--nkarbleed));}
/* Pfeile: schlicht, blau, disabled grau (statt Kreis-Buttons) */
.nkar .stm-cards__arrows,.module--karussell .stm-cards__arrows{gap:1rem;}
.nkar .stm-cards__arrow,.module--karussell .stm-cards__arrow{width:auto;height:auto;border:0;border-radius:0;background:none;font-size:1.5rem;line-height:1;color:var(--st-color-primary,#002F5D);padding:.15rem .2rem;}
.nkar .stm-cards__arrow:hover,.module--karussell .stm-cards__arrow:hover{background:none;color:var(--st-color-accent,#B51F29);}
.nkar .stm-cards__arrow[disabled],.module--karussell .stm-cards__arrow[disabled]{opacity:1;color:var(--st-neutral-300,#D1D1D1);}
.nkar .stm-cards__arrow[disabled]:hover,.module--karussell .stm-cards__arrow[disabled]:hover{background:none;color:var(--st-neutral-300,#D1D1D1);}
/* Badge-Farben nach Kategorie (Figma: Gottesdienste rot, Musik blau, Vortrag gold) */
.nkar-card__badge{background:var(--st-color-primary,#002F5D);}
.nkar-card__badge.badge--gottesdienste{background:var(--st-color-accent,#B51F29);}
.nkar-card__badge.badge--musik{background:var(--st-color-primary,#002F5D);}
.nkar-card__badge.badge--vortrag{background:var(--st-color-gold,#D1AC57);}
/* ============ Teams-Rework nach Figma (2026-07-27) ============ */
/* Karte: Foto quadratisch + Credit-Overlay, Name VERSAL blau, Funktion rot (Musik: blau) */
.stm-team-card__media{position:relative;overflow:hidden;aspect-ratio:424/280;margin-bottom:.625rem;} /* 02.09. (Maik): Abstand Bild -> Name halbiert (1.25 -> .625rem) */
.stm-cards--team .stm-team-card__media{aspect-ratio:312/280;}
.stm-team-grid--minimal .stm-team-card__media{aspect-ratio:424/380;}
.stm-team-card__body{gap:0;}
.stm-team-card__img{width:100%;height:100%;object-fit:cover;display:block;}
.stm-team-card__credit{position:absolute;left:0;bottom:0;background:rgba(34,34,34,.7);color:#fff;font-size:.62rem;padding:.2rem .45rem;letter-spacing:.02em;}
.stm-team-card__name{font-family:var(--st-font-body,inherit);font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:1.25rem;line-height:1.1;color:var(--st-color-primary,#002F5D);margin:0 0 .45rem;} /* 01.08.: Meta Pro (Body) statt Headline-Schnitt - Figma */ /* 02.09. (Maik): Name = H5-Groesse (20px, passte schon); Abstand Name -> Beschreibung halbiert (.875 -> .45rem) */
.stm-team-card__role{color:var(--st-color-accent,#B51F29);font-weight:400;font-size:1.25rem;line-height:1.5;margin:0;} /* 02.09. (Maik): Beschreibung = Standard-Copy (20/30, Regular) */
.stm-cards--team .stm-team-card__role,.stm-team-grid .stm-team-card__role{line-height:1.125;} /* 09.09. (Maik, Karussell mit Personen): Zeilenabstand der Funktion um 1/4 reduziert (30 -> 22.5px), Desktop+Mobile, Karussell UND Kachelansicht; das Personen-Kontaktformular (.stm-team-form) bleibt bewusst unangetastet */
.is-musik .stm-team-card__role{color:var(--st-color-primary,#002F5D);}
/* Kontaktblock */
.stm-team-card__contact{margin:.875rem 0 0;} /* 02.09. (Maik): Blockabstand halbiert (1.75 -> .875rem) */
.stm-team-card__contact-head{font-family:var(--st-font-body,inherit);font-weight:700;color:var(--st-color-primary,#002F5D);margin:0 0 .375rem;font-size:1.25rem;line-height:1.1;} /* 02.09.: halbiert */
.stm-team-card__contact-line{margin:0;font-size:1.25rem;color:var(--st-color-ink,#222);line-height:1.5;} /* 01.08.: Zeilen laufen durch (Figma lh30, kein Extra-Abstand) */
.stm-team-card__contact-line a{color:inherit;text-decoration:none;}
.stm-team-card__iconlink{margin:.375rem 0 0;font-size:1.25rem;line-height:1.2;} /* 02.09. (Maik): halbiert */
.stm-team-card__iconlink a{display:inline-flex;align-items:center;gap:.375rem;color:var(--st-color-accent,#B51F29);text-decoration:none;font-weight:400;}
.stm-team-card__iconlink a:hover{text-decoration:underline;}
.stm-team-card__iconlink .stm-ic{display:inline-flex;width:20px;height:20px;color:var(--st-color-accent,#B51F29);}
.stm-team-card__iconlink .stm-ic svg{width:20px;height:20px;}
.stm-team-card__more{margin-top:auto;padding-top:.875rem;align-self:flex-start;} /* 02.09. (Maik): Abstand halbiert; Typo/Farbe/Pfeil kommen jetzt von der definierten Komponente "Textlink mit Pfeil (klein)" (btn btn--text btn--sm im Markup) - hier NUR noch Layout */
.stm-team-card__body{flex:1;}
.stm-cards--team .stm-team-card__more{margin-top:.5rem;}
@media(min-width:1001px){
.stm-cards--team .stm-team-card__text,.stm-cards--team .stm-team-card__contact-line,.stm-cards--team .stm-team-card__contact-head{font-size:1.125rem;line-height:1.625rem;} /* 09.09. (Maik, Karussell mit Personen): NUR Desktop - Kurztext, Kontakt-Zusatz und Adresse auf 18px/26px verkleinert (vorher 20/30) */ /* 09.09. R2 (Maik): auch der "Kontakt"-Zwischentitel auf 18/26 (bleibt bold); E-Mail-/Website-Links bleiben 20px */
}
.stm-team-grid--3 .stm-team-card__text,.stm-team-grid--3 .stm-team-card__contact-line,.stm-team-grid--3 .stm-team-card__contact-head,.stm-team-grid--4 .stm-team-card__text,.stm-team-grid--4 .stm-team-card__contact-line,.stm-team-grid--4 .stm-team-card__contact-head{font-size:1.125rem;line-height:1.625rem;} /* 09.09. (Maik): dito fuer die 3- und 4-spaltige Kachelansicht (variantenbasiert, gilt auch mobil); 2-Spalter bleibt bei 20/30 */ /* 09.09. R2 (Maik): inkl. "Kontakt"-Zwischentitel */
/* Raster minimal: zentrierte Namenszeile */
.stm-team-grid--minimal .stm-team-card--minimal{text-align:center;}
.stm-team-card__caption{margin:0;font-family:var(--st-font-body,inherit);font-weight:700;color:var(--st-color-primary,#002F5D);font-size:1.25rem;} /* 01.08.: dichter ans Bild */
.stm-team-grid--minimal .stm-team-card__media{margin-bottom:.625rem;}
/* Team-Karussell: Anschnitt wie Figma (~4,3 Karten) */
@media(min-width:700px){ .stm-cards--team{grid-auto-columns:calc((100% - 4*var(--st-space-m,2rem))/4.3);} }
.stm-team-carousel .stm-cards__arrows{gap:1rem;}
.stm-team-carousel .stm-cards__arrow{width:auto;height:auto;border:0;border-radius:0;background:none;font-size:1.5rem;line-height:1;color:var(--st-color-primary,#002F5D);padding:.15rem .2rem;}
.stm-team-carousel .stm-cards__arrow:hover{background:none;color:var(--st-color-accent,#B51F29);}
.stm-team-carousel .stm-cards__arrow[disabled]{opacity:1;color:var(--st-neutral-300,#D1D1D1);}
/* ============================================================
Flipbook 2.0 (27.07.) – PDF.js + StPageFlip, Controls nach Figma
============================================================ */
.stm-flip__dl-top{margin:var(--stm-copy-size,1.25rem) 0 1.75rem;} /* 10.09. (Johann, "Zeilenabstand Flipbook Download"): oben derselbe Abstand wie zwischen den der Copy (20px = 1em der Copy-Groesse; der letzte Absatz traegt margin-bottom 0, der Link klebte direkt darunter) */
/* 16.09. (Kunde, "Flipbook"): Link ist jetzt die echte Komponente btn btn--text btn--sm (Markup) -
die frueheren Nachbau-Farbregeln (05.09.) sind raus, sonst wuerden sie die Komponente per
hoeherer Spezifitaet (.stm-flip__dl-top a) ueberstimmen. */
.stm-flip{position:relative;max-width:1160px;margin:0 auto;outline:none;}
.stm-flip__scroll{overflow:hidden;}
.stm-flip__scroll.is-zoomed{overflow:auto;max-height:80vh;}
.stm-flip__stagewrap{position:relative;padding:1.5rem 4rem 2rem;}
.stm-flip__book{margin:0 auto;transition:transform .25s ease;}
.stm-flip__book .stf__parent{margin:0 auto;}
.stm-flip__book img{box-shadow:0 10px 30px rgba(0,0,0,.18);}
.stm-flip__status{text-align:center;color:var(--st-neutral-500,#767676);padding:3rem 0;}
.stm-flip.is-ready .stm-flip__status{display:none;}
/* Kreis-Pfeile links/rechts */
.stm-flip__arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;padding:0;border:0;border-radius:50%;background-color:transparent;background-image:url("../img/icons/Slider%20Arrow%20white%20circle%20left%20default.svg"),url("../img/icons/Slider%20Arrow%20white%20circle%20left%20hover.svg");background-position:center,-60px -60px;background-size:contain,1px 1px;background-repeat:no-repeat;cursor:pointer;z-index:5;transition:opacity .15s;} /* 16.09. (Kunde, "Flipbook"): gelieferte Assets "Slider Arrow white circle" (36er-viewBox: weisser Kreis + grauer Ring + blauer Pfeil; Hover-Variante = roter Kreis) statt Eigenbau-Kreis mit Inline-SVG */ /* 18.09. (Kunde, "Flipbook: Slider-Pfeile vorladen"): Zwei-Ebenen-Muster wie Paginierung/Timeline/Zoom-Close - Hover-Grafik als geparkte 1px-Zweitebene, laedt beim ersten Paint statt beim ersten Hover -> kein Aufblitzen */
.stm-flip__arrow--next{background-image:url("../img/icons/Slider%20Arrow%20white%20circle%20right%20default.svg"),url("../img/icons/Slider%20Arrow%20white%20circle%20right%20hover.svg");}
.stm-flip__arrow--prev:hover,.stm-flip__arrow--prev:active{background-image:url("../img/icons/Slider%20Arrow%20white%20circle%20left%20hover.svg"),url("../img/icons/Slider%20Arrow%20white%20circle%20left%20default.svg");}
.stm-flip__arrow--next:hover,.stm-flip__arrow--next:active{background-image:url("../img/icons/Slider%20Arrow%20white%20circle%20right%20hover.svg"),url("../img/icons/Slider%20Arrow%20white%20circle%20right%20default.svg");}
.stm-flip__arrow[disabled]{opacity:.35;cursor:default;pointer-events:none;}
.stm-flip__arrow--prev{left:0;}
.stm-flip__arrow--next{right:0;}
/* Bedienleiste unten */
.stm-flip__bar{display:flex;align-items:center;gap:1.5rem;margin-top:1rem;padding:0 .25rem;}
.stm-flip__tools{display:flex;align-items:center;gap:.9rem;}
.stm-flip__iconbtn{border:0;padding:0;width:26px;height:26px;color:var(--st-color-primary,#002F5D);cursor:pointer;display:inline-flex;background:currentColor;-webkit-mask:no-repeat center/22px 22px;mask:no-repeat center/22px 22px;transition:color .15s;} /* 16.09. (Kunde, "Flipbook"): gelieferte Icons als MASKE - background:currentColor faerbt, die bestehende Hover-Regel macht weiter das Rot #B51F29 */
.stm-flip__iconbtn[data-flip-thumbs]{-webkit-mask-image:url("../img/icons/Icon%20Kachel%20Flipbook.svg");mask-image:url("../img/icons/Icon%20Kachel%20Flipbook.svg");}
.stm-flip__iconbtn[data-flip-zoom]{-webkit-mask-image:url("../img/icons/Icon%20Zoom%20in%20Flipbook.svg");mask-image:url("../img/icons/Icon%20Zoom%20in%20Flipbook.svg");}
.stm-flip__iconbtn[data-flip-fullscreen]{-webkit-mask-image:url("../img/icons/Icon%20Frame%20Flipbook.svg");mask-image:url("../img/icons/Icon%20Frame%20Flipbook.svg");}
.stm-flip__iconbtn--dl{-webkit-mask-image:url("../img/icons/Icon%20Download%20Flipbook.svg");mask-image:url("../img/icons/Icon%20Download%20Flipbook.svg");}
.stm-flip__iconbtn:hover{color:var(--st-color-accent,#B51F29);}
/* Fortschrittsbalken */
.stm-flip__range{flex:1;appearance:none;-webkit-appearance:none;height:4px;border-radius:2px;background:var(--st-neutral-200,#E3E8EE);cursor:pointer;}
.stm-flip__range::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--st-color-primary,#002F5D);border:0;}
.stm-flip__range::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--st-color-primary,#002F5D);border:0;}
.stm-flip__range::-moz-range-progress{background:var(--st-color-primary,#002F5D);height:4px;border-radius:2px;}
/* Thumbnail-Overlay */
.stm-flip__thumbs{position:absolute;inset:0;z-index:10;background:rgba(255,255,255,.96);overflow:auto;padding:2rem;}
.stm-flip__thumbgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:1rem;}
.stm-flip__thumb{position:relative;border:1px solid var(--st-neutral-200,#E3E8EE);background:#fff;padding:0;cursor:pointer;}
.stm-flip__thumb img{display:block;width:100%;height:auto;}
.stm-flip__thumb span{position:absolute;right:.35rem;bottom:.35rem;font-size:.75rem;color:#fff;background:var(--st-color-primary,#002F5D);padding:.05rem .4rem;border-radius:2px;}
.stm-flip__thumb:hover{border-color:var(--st-color-primary,#002F5D);}
/* Vollbild */
.stm-flip.is-fullscreen{background:#fff;padding:2rem;display:flex;flex-direction:column;justify-content:center;}
.stm-flip.is-fullscreen .stm-flip__stagewrap{padding-top:0;}
/* Mobil */
@media (max-width:767px){
.stm-flip__stagewrap{padding:1rem 2.4rem 1.5rem;}
.stm-flip__arrow{width:36px;height:36px;}
.stm-flip__bar{gap:1rem;}
}
/* ============================================================
News-Rework (27.07.) – „News aus dem Michel" / „Neuigkeiten"
============================================================ */
/* Karte: Datum-Badge blau, Bild-Credit-Overlay, fetter Mehr-erfahren-Link */
.nkar-card__date{background:var(--st-color-primary,#002F5D);}
.nkar-card__credit{position:absolute;left:0;bottom:0;background:rgba(34,34,34,.55);color:#fff;font-size:.62rem;padding:.15rem .45rem;line-height:1.2;}
/* 05.09.: fw-700-Override raus - Text-Link-Komponente ist MEDIUM (Basisregel oben) */
/* Karussell-Kopf: Topline/Headline links · Alle-News-Button + Pfeile rechts */
.nnews__head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:2.5rem;} /* 01.08.: Controls buendig zur Headline-Unterkante */
.nnews__headings{min-width:0;}
.nnews__headline{margin:0;}
.nnews__actions{display:flex;align-items:center;gap:1.75rem;flex:0 0 auto;}
.nnews__main{min-width:0;position:relative;}
.nnews__head .stm-cards__controls--top{position:static;margin:0;} /* 01.08.: Controls sitzen jetzt IN der Kopfzeile */
.nnews__main > .nnews__head{margin-right:var(--nkarbleed,0px);} /* 01.08.: Kopfzeile bleibt im Satzspiegel - der Anschnitt-Bleed gilt nur den Karten */
.nnews__head .stm-cards__arrows{align-items:flex-end;} /* Pfeile (44px) buendig zur Button-/Headline-Unterkante */
.stm-nnews .stm-cards__arrows{gap:1.1rem;}
.stm-nnews .stm-cards__arrow{width:auto;height:auto;border:0;border-radius:0;background:none;font-size:1.4rem;line-height:1;color:var(--st-color-primary,#002F5D);padding:.15rem .2rem;}
.stm-nnews .stm-cards__arrow:hover{background:none;color:var(--st-color-accent,#B51F29);}
.stm-nnews .stm-cards__arrow[disabled]{opacity:1;color:var(--st-color-lightblue,#CAD9E0);}
.stm-nnews .stm-cards__arrow[disabled]:hover{background:none;color:var(--st-color-lightblue,#CAD9E0);}
@media(min-width:700px){ .stm-nnews .stm-cards{grid-auto-columns:calc((100% - 3*1rem)/4);padding-right:var(--nkarbleed,0px);} } /* 07.09. (Maik): padding-right = Anschnitt-Bleed -> der Content-Bereich der Liste IST der Satzspiegel: Kacheln exakt Standard-4-Spalter-Breite UND am Scroll-Ende schliesst die LETZTE Kachel buendig mit dem Satzspiegel ab (vorher lief sie bis zur Bleed-Kante) */
@media(max-width:900px){
.nnews__head{flex-direction:column;align-items:flex-start;gap:1rem;}
.nnews__main .stm-cards__controls--top{position:static;display:flex;justify-content:flex-end;margin-bottom:.5rem;}
.stm-nnews .stm-cards{grid-auto-columns:calc((100% - 1.4*1rem)/2.4);} /* 07.09.: Bleed steckt jetzt im padding-right (Content-Bereich = Satzspiegel), Gap 1rem */
}
@media(max-width:600px){ .stm-nnews .stm-cards{grid-auto-columns:calc((100% - .3*1rem)/1.3);} } /* 07.09.: dito; unter 700 uebersteuert ohnehin der Standard-Mobile-Block weiter unten (100%) */
/* 07.09. (Maik, "Modul Karussell News"): Angleich an den Karussell-Standard.
Desktop: Dots zentriert im SATZSPIEGEL (Container laeuft inkl. Bleed - margin-right gleicht
aus), Bild -> Text -1/3 (13.6 -> 9.1px: Titel-Margin .55 -> .27rem bei .3rem Flex-Gap),
Text -> Text-Link halbiert (Struktur-Abstand 10.4 -> 4.8px: padding-top des Links raus;
die Links bleiben ueber alle Karten auf einer Hoehe, gemessen an der hoechsten Karte).
Mobile (<=700): exakt der Standard-Karussell-Aufbau - Einspalter-Kachel in Satzspiegelbreite
ohne Anschnitt, Kopf als Spalte (HL -> CTA -> Pfeile je 1.4rem, Pfeile links/rechts buendig
ueber der Kachel, 1rem zur Kachel), Dots 1.35rem unter der Kachel + zentriert,
Bild -> Text HALBIERT (13.6 -> 6.8px). */
.stm-nnews .stm-cards__dots{margin-right:var(--nkarbleed,0px);}
.stm-nnews .nkar-card__title,.module--newsblog .nkar-card__title{margin-top:.27rem;} /* 09.09. (Maik, Karussell News): angepasster Bild->Text-Abstand gilt auch fuer die News-KACHEL-Ansicht (.module--newsblog Raster; Basis .55rem bleibt fuer die Veranstaltungs-Karten) */
.stm-nnews .nkar-card__go,.module--newsblog .nkar-card__go{padding-top:0;} /* 09.09. (Maik, Karussell News): angepasster Text->Text-Link-Abstand auch in der Kachel-Ansicht */
@media(max-width:700px){
.nnews__main.stm-cards-carousel{--nkarbleed:0px;margin-right:0;}
.stm-nnews .stm-cards{grid-auto-columns:100%;gap:1rem;padding-right:0;}
.nnews__head{flex-direction:column;align-items:flex-start;gap:1.4rem;margin-bottom:1rem;}
.nnews__main .stm-cards__controls--top{display:block;width:100%;margin:0;}
.stm-nnews .stm-cards__arrows{display:grid;grid-template-columns:1fr auto;gap:1.4rem;width:100%;align-items:center;}
.stm-nnews .stm-cards__arrows .btn{grid-column:1 / -1;justify-self:start;}
.stm-nnews .stm-cards__arrows .stm-sarr--prev{justify-self:start;}
.stm-nnews .stm-cards__arrows .stm-cards__arrow[data-dir="next"]{justify-self:end;}
.stm-nnews .stm-cards__dots{margin-top:1.35rem;}
.stm-nnews .nkar-card__title{margin-top:.125rem;}
}
/* Raster „Neuigkeiten" – 4-spaltig, gleiche Karten */
.nnews__gridhead{margin-bottom:2.5rem;}
.nnews-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2.25rem 1.5rem;}
.nnews-grid__item{min-width:0;}
@media(max-width:1000px){ .nnews-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media(max-width:560px){ .nnews-grid{grid-template-columns:1fr;} }
/* Google Map – Dummy-Kartenbild nach Figma (27.07.) */
.stm-map{margin:0;max-width:1320px;}
.stm-map__img{display:block;width:100%;height:auto;}
/* 404-Seite „Heiliger Bimbam" (27.07.) */
.stm-404{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center;padding-top:2.5rem;padding-bottom:3.5rem;}
.stm-404__text{min-width:0;}
.stm-404__media{display:flex;justify-content:center;}
.stm-404__media img{width:auto;max-width:100%;max-height:520px;}
.stm-404__search{display:flex;align-items:center;gap:1.1rem;max-width:340px;margin-top:1.5rem;}
.stm-404__search input{flex:1;min-width:0;border:0;border-bottom:1px solid var(--st-neutral-300,#D1D1D1);border-radius:0;padding:.45rem 0;font:inherit;color:var(--st-color-ink,#222);background:none;outline:none;appearance:none;-webkit-appearance:none;}
.stm-404__search input::placeholder{color:var(--st-neutral-500,#767676);}
.stm-404__search input:focus{border-bottom-color:var(--st-color-primary,#002F5D);}
/* 15.09. (Stefanie, "404 Seite"): Icons analog Hauptsuche - exakt das Rezept der ASP-Overrides
(~2532ff): Lupe = Asset "Suche Lupe.svg" in Kreisgroesse 40 (die viewBox enthaelt den Bounds-Kreis),
Hover-/Pressed-State = Kreisfarbe #CAD9E0 aus "Suche Lupe Hover.svg"; Close = "Close klein.svg" 34px,
erscheint per JS (404.php) nur bei Eingabe. Das native Such-X des Browsers ist abgeschaltet, sonst
staenden zwei Close-Icons nebeneinander. opacity:1 auf Hover schlaegt die globale
button:hover{opacity:.92}-Regel aus main.css (stm-hn-Muster). */
.stm-404__search .stm-404__go{flex:0 0 auto;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:url("../img/icons/Suche%20Lupe.svg") no-repeat center/40px 40px;cursor:pointer;}
.stm-404__search .stm-404__go:hover,.stm-404__search .stm-404__go:focus-visible,.stm-404__search .stm-404__go:active{background-color:#CAD9E0;opacity:1;}
/* 16.09. R2 (Stefanie, Video): Close-Icon sass als Flex-Nachbar NEBEN dem Feld und verkuerzte den
Suchschlitz ("riesig, sitzt nicht auf dem Suchschlitz"). In der Hauptsuche steckt das proclose IN
der gefuellten 44px-Bar - beim Unterstrich-Feld hier ist das Aequivalent ein OVERLAY am rechten
Feldende: absolut positioniert (nimmt keine Flexbreite weg), 24px-Icon in 28px-Klickflaeche,
vertikal auf der Feldmitte; das Feld bekommt rechts Padding, damit Text nicht unters X laeuft.
right = 40px Lupe + 1.1rem Gap + 4px Einzug. */
.stm-404__search{position:relative;}
.stm-404__search input{padding-right:34px;}
.stm-404__search .stm-404__clear{position:absolute;right:calc(40px + 1.1rem + 4px);top:50%;transform:translateY(-50%);width:28px;height:28px;padding:0;border:0;background:url("../img/icons/Close%20klein.svg") no-repeat center/38px 38px;cursor:pointer;} /* 17.09. (Maik, "arg winzig"): KORREKTUR der 13px vom 16.09. - "Close klein.svg" traegt INTERNES PADDING, die X-Glyphe fuellt nur 33.8% der SVG-Flaeche (canvas-vermessen). 13px background-size ergab eine 4.4px-Glyphe; fuer die von Figma geforderten 13px GLYPHE muss die Flaeche 13/0.338 = 38px sein. Die 38px ragen seitlich transparent ueber die 28px-Klickflaeche - die zentrierte 13px-Glyphe bleibt vollstaendig sichtbar. */
.stm-404__search .stm-404__clear:hover{opacity:1;}
.stm-404__search .stm-404__clear[hidden]{display:none;} /* explizit: irgendeine globale button-Displayregel (z.B. altes display:inline-flex) wuerde das UA-[hidden] sonst ueberstimmen - im Injektions-Test live passiert */
.stm-404__search input::-webkit-search-cancel-button,.stm-404__search input::-webkit-search-decoration{-webkit-appearance:none;appearance:none;}
@media(max-width:800px){
.stm-404{grid-template-columns:1fr;gap:2rem;}
.stm-404__media{order:-1;}
.stm-404__media img{max-height:300px;}
}
/* ============================================================
Slideshow-Rework (27.07.) – 5 Galerien nach Figma
============================================================ */
/* Kopf: Headline links, Pfeile rechts unten (Galerie 1) */
.stm-ss__head{margin-bottom:1.25rem;} /* 01.09. (Maik): Abstand Copy -> Slideshow 20px (Pfeile sitzen mit drin) */ /* 02.09. R2: bleibt 20px = HAELFTE des neuen HL-Copy-Abstands (Maiks Regel: Copy->Slideshow = halber HL-Copy-Abstand) */
.stm-ss__head--arrows{display:block;} /* 05.09. (Maik, Galerie 1): Pfeile auch DESKTOP aus der Kopfzeile geloest - sie sollen NICHT unten buendig mit Copy/HL stehen, sondern "mit der Slideshow zusammen nach unten rutschen": eigene rechtsbuendige Reihe mit festem Abstand zur Slideshow (war flex + align-items:flex-end an der Copy-Unterkante) */
.stm-ss__copy{margin-top:2.5rem;max-width:70ch;} /* 01.09. (Maik): 8 -> 20px */ /* 02.09. R2 (Maik): nochmal VERDOPPELT (20 -> 40px), Desktop only - Mobile-Block unten behaelt 1rem */
.stm-ss__arrows{display:flex;gap:1.1rem;flex:0 0 auto;justify-content:flex-end;margin-top:1.25rem;} /* 05.09. (Maik): Desktop rechtsbuendig unter der Copy, 20px Abstand nach oben; nach unten wirken die 20px der .stm-ss__head-margin -> Pfeile haengen fest an der Slideshow */
.stm-ss__arrow{background:none;border:0;padding:.15rem .2rem;color:var(--st-color-primary,#002F5D);cursor:pointer;display:inline-flex;}
.stm-ss__arrow svg{max-width:none;flex:0 0 auto;}
.stm-ss__arrow:hover{color:var(--st-color-accent,#B51F29);}
.stm-ss__arrow[disabled]{color:var(--st-color-lightblue,#CAD9E0);cursor:default;}
/* Punkte: aktiv = blaue Pille */
.stm-ss__dots{display:flex;justify-content:center;align-items:center;gap:.5rem;margin-top:1.1rem;}
.stm-ss__dot{width:8px;height:8px;border-radius:4px;border:0;padding:0;background:var(--st-neutral-300,#D1D1D1);cursor:pointer;transition:all .2s;}
.stm-ss__dot.is-active{width:22px;background:var(--st-color-primary,#002F5D);}
/* Bild-Credit-Overlay (unten links auf dem Bild) */
.stm-ss__imgcredit{position:absolute;left:0;bottom:0;background:rgba(34,34,34,.55);color:#fff;font-size:.62rem;padding:.15rem .45rem;line-height:1.2;margin:0;}
/* Zweifarbige Labels (VERSAL, „|“ = Zeile 2 rot) */
.stm-ss__l1{display:block;color:var(--st-color-primary,#002F5D);}
.stm-ss__l2{display:block;color:var(--st-color-accent,#B51F29);}
/* ---------- Galerie 1: Hauptbild + Thumbs/Texte ---------- */
.stm-g1__stage{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--st-color-lightblue,#CAD9E0);}
.stm-g1__slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .35s;}
/* 01.08.: Bilduebergang "Bewegen" = echtes Schieben ohne Fade (Referenz BSH-Hero):
neue Folie schiebt komplett herein, die alte gleichzeitig hinaus. */
.stm-g1[data-transition="slide"] .stm-g1__slide{transition:none;}
.stm-g1__slide.is-slide-r{animation:stmG1InR .5s ease both;opacity:1;z-index:2;}
.stm-g1__slide.is-slide-l{animation:stmG1InL .5s ease both;opacity:1;z-index:2;}
.stm-g1__slide.is-out-l{animation:stmG1OutL .5s ease both;opacity:1;z-index:1;}
.stm-g1__slide.is-out-r{animation:stmG1OutR .5s ease both;opacity:1;z-index:1;}
@keyframes stmG1InR{from{transform:translateX(100%);}to{transform:translateX(0);}}
@keyframes stmG1InL{from{transform:translateX(-100%);}to{transform:translateX(0);}}
@keyframes stmG1OutL{from{transform:translateX(0);}to{transform:translateX(-100%);}}
@keyframes stmG1OutR{from{transform:translateX(0);}to{transform:translateX(100%);}}
.stm-g1__slide.is-active{opacity:1;}
.stm-g1__img{width:100%;height:100%;object-fit:cover;display:block;}
.stm-g1__thumbnav{list-style:none;display:flex;gap:6px;margin:6px 0 0;padding:0;}
.stm-g1__thumbnav li{flex:1;min-width:0;}
.stm-g1__thumb{display:block;width:100%;aspect-ratio:16/10;overflow:hidden;border:0;padding:0;cursor:pointer;opacity:.85;background:none;position:relative;}
.stm-g1__thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.stm-g1__thumb .stm-imgcredit,.stm-g1__thumb .stm-ss__imgcredit{display:none;} /* 01.09. (Maik): auf den kleinen Thumbnails keine Copyrights (kommen aus dem globalen Bild-Credit-Filter) */
/* 01.08.: blaue Aktiv-Linie als Overlay-Ebene - die alte outline lag mit -2px INNERHALB der Box und wurde vom Bild uebermalt */
.stm-g1__thumb::after{content:"";position:absolute;inset:0;border:2px solid transparent;pointer-events:none;}
.stm-g1__thumb:hover,.stm-g1__thumb.is-active{opacity:1;}
.stm-g1__thumb:hover::after,.stm-g1__thumb.is-active::after{border-color:var(--st-color-primary,#002F5D);}
.stm-g1__textnav{list-style:none;display:flex;justify-content:center;flex-wrap:wrap;gap:.5rem 2rem;margin:1.25rem 0 0;padding:0 20px;} /* 10.08.: zentriert unter dem Bild (Asana-Ticket) */ /* 07.09. (Maik, "Galerie 1 mit Texten"): 20px Seitenpadding (war 4px), Abstand Bild -> Nav bleibt 20px; max-height/overflow-y RAUS - die Nav scrollt nie mehr und wird nicht mehr angeschnitten (mobil war "KANZEL" in Zeile 3 geclippt: 102px Inhalt in 88px Box), sie bricht einfach um und waechst */
.stm-g1__navtext{background:none;border:0;padding:0;cursor:pointer;font-family:var(--st-font-head,inherit);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:1.05rem;color:var(--st-color-primary,#002F5D);} /* 07.09. (Maik): Schriftgroesse = Topline (module__kicker 1.05rem, live gemessen 16.8px Desktop UND Mobile - war .85rem) */
.stm-g1__navtext:hover,.stm-g1__navtext.is-active{color:var(--st-color-accent,#B51F29);}
/* ---------- Galerie 2: Karten-Raster ---------- */
.stm-g2{display:grid;gap:2.25rem 1.75rem;}
.stm-g2--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.stm-g2--3{grid-template-columns:repeat(3,minmax(0,1fr));}
.stm-g2--4{grid-template-columns:repeat(4,minmax(0,1fr));}
.stm-g2__open{display:flex;flex-direction:column;align-items:flex-start;gap:.45rem;background:none;border:0;padding:0;cursor:pointer;text-align:left;width:100%;height:100%;font:inherit;}
.stm-g2__card{display:flex;} .stm-g2__card>.stm-g2__open{flex:1;}
.stm-g2__media{display:block;width:100%;aspect-ratio:4/3;overflow:hidden;background:var(--st-color-lightblue,#CAD9E0);}
.stm-g2__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s;}
.stm-g2__open:hover .stm-g2__media img{transform:scale(1.04);}
.stm-g2__title{font-family:var(--st-font-body,inherit);font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:1.25rem;line-height:1.1;margin-top:.275rem;color:var(--st-color-primary,#002F5D);} /* 14.09. (Kunde, Anhang "H5" + "Abstand halbieren"): Name exakt wie .stm-team-card__name (Meta Pro Body, H5-Groesse 20px, lh 1.1, ls .02em) statt Headline-Schnitt 28px; Abstand Bild->Name HALBIERT: 23.2px (gap .45rem + margin 1rem) -> 11.6px (gap .45rem + margin .275rem), gemessen. */
.stm-g2__title .stm-ss__l1,.stm-g2__title .stm-ss__l2{display:inline;}
.stm-g2__teaser{color:var(--st-color-ink,#222);font-size:1.25rem;line-height:1.5;}
/* 14.09. (Kunde, Anhang "Korrekte Text-Links einsetzen"): "Mehr erfahren" ist jetzt die Komponente
"Textlink mit Pfeil (klein)" (btn btn--text btn--sm im Markup, slideshow.php) wie in den
Team-Kacheln - hier NUR noch Layout; Karten-Hover/Active steuern die Komponenten-States samt
Pfeil-Morph an (die ganze Karte ist der Klickbereich, Muster wie .nkar-card__go). */
.stm-g2__more{margin-top:auto;padding-top:.6rem;}
.stm-g2__open:hover .stm-g2__more,.stm-g2__open:focus-visible .stm-g2__more{color:var(--st-color-secondary,#034B91);}
.stm-g2__open:active .stm-g2__more{color:var(--st-color-primary,#002F5D);}
.stm-g2__open:hover .stm-g2__more::after,.stm-g2__open:focus-visible .stm-g2__more::after,.stm-g2__open:active .stm-g2__more::after{width:1.28em;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 15'%3E%3Cpath d='M1 7.5h16.4M12 1.8 18 7.5 12 13.2' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 15'%3E%3Cpath d='M1 7.5h16.4M12 1.8 18 7.5 12 13.2' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
/* ---------- Galerie 3: justified Raster ---------- */
/* 31.07.: gleichmaessiges Raster (Kundenwunsch: kein Flattern unten/rechts) */
.stm-g3{display:grid;gap:14px;grid-template-columns:repeat(var(--g3cols,3),minmax(0,1fr));}
.stm-g3__item{margin:0;}
.stm-g3__btn{position:relative;display:block;width:100%;border:0;padding:0;background:none;cursor:pointer;overflow:hidden;}
.stm-g3__img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block;}
.stm-g3__item.no-nums .stm-g3__file{display:none;}
.stm-g3__file{position:absolute;top:.4rem;right:.55rem;color:#fff;font-size:.7rem;text-shadow:0 1px 3px rgba(0,0,0,.55);opacity:0;transition:opacity .15s;}
.stm-g3__btn:hover .stm-g3__file{opacity:1;}
.stm-g3__copyright{position:absolute;left:0;bottom:0;background:rgba(34,34,34,.55);color:#fff;font-size:.62rem;padding:.15rem .45rem;}
/* 01.08.: Justified-Raster (JS setzt Position/Groesse; Bilder behalten ihr Seitenverhaeltnis) */
.stm-g3.is-justified{display:block;position:relative;}
/* 02.08.: Anker - sanftes Scrollen + Ziel unterhalb des sticky Headers */
/* 14.10. R109 (Kunde, "Ankerlinks: Sprungmarke + 100px, Content nicht hinterm Menue"):
(1) Versatz = Headerhoehe + 100px Luft (Desktop-Header fix 137px -> 237; mobil 80 -> 180).
Die alten 140px lagen nur 3px unter der Headerkante, gefuehlt "hinterm Menue".
(2) Gilt jetzt fuer ALLE id-Ziele ([id]), nicht nur .module/.stm-bc - auch Anker im
Fliesstext (WYSIWYG) landen damit frei. scroll-margin wirkt nur bei Anker-Navigation/
scrollIntoView, nie aufs Layout. Die Paginierungs-Anker #stm-liste/#stm-termine
behalten ihre Maik-kalibrierten knapperen Werte (ID-Selektor schlaegt [id]). */
html{scroll-behavior:smooth;}
[id]{scroll-margin-top:237px;}
@media(max-width:1000px){ [id]{scroll-margin-top:180px;} }
.stm-g3.is-justified .stm-g3__btn{height:100%;}
.stm-g3.is-justified .stm-g3__img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;}
/* ---------- Overlays (Galerie 2 + 3) ---------- */
body.stm-ov-open{overflow:hidden;}
.stm-ov{position:fixed;inset:0;z-index:9000;display:none;background:rgba(255,255,255,.88);}
.stm-ov.is-open{display:block;}
.stm-ov__frame{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:3.5rem 5rem;}
/* 31.07.: Box-Wrapper - Close/Pfeile/Dots sitzen AN der Lightbox, nicht am Browser-Rand */
.stm-ov__box{position:relative;width:min(880px,92vw);}
.stm-ov__card{position:relative;background:#fff;box-shadow:0 18px 60px rgba(0,0,0,.25);width:100%;max-height:82vh;overflow:auto;}
.stm-ov__close{position:absolute;top:-2.6rem;right:0;z-index:3;background:none;border:0;padding:.3rem;color:var(--st-color-ink,#222);cursor:pointer;display:inline-flex;}
.stm-ov__close svg{max-width:none;}
.stm-ov__close:hover{color:var(--st-color-accent,#B51F29);}
.stm-ov__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:42px;height:42px;min-width:42px;padding:0;box-sizing:border-box;aspect-ratio:1;border-radius:50%;border:1px solid var(--st-neutral-300,#D1D1D1);background:#fff;color:var(--st-color-primary,#002F5D);cursor:pointer;display:flex;align-items:center;justify-content:center;}
.stm-ov__arrow svg{max-width:none;flex:0 0 auto;width:30px;height:30px;} /* 07.09. (Maik, Galerie 3): Pfeil GROESSER im Kreis - 30px-SVG rendert die 20px-Pfeillinie der Figma-Vorlage (40er Kreis/20er Pfeil); war 18px-SVG = 12px-Linie */
.stm-ov__arrow:hover{border-color:var(--st-color-accent,#B51F29);color:var(--st-color-accent,#B51F29);}
.stm-ov__arrow--prev{left:-56px;}
.stm-ov__arrow--next{right:-56px;}
@media(max-width:1260px){ .stm-ov__arrow--prev{left:-14px;} .stm-ov__arrow--next{right:-14px;} }
.stm-ov__dots{position:absolute;left:0;right:0;top:100%;padding-top:1rem;margin:0;}
/* Overlay Galerie 2: Text-Modal */
.stm-ov--g2 .stm-ov__box{width:min(1092px,92vw);}
.stm-ov--g2 .stm-ov__card{padding:2.2rem 2.25rem 2.5rem;}
.stm-ov__g2top{display:grid;grid-template-columns:minmax(0,500px) minmax(0,1fr);gap:2rem;align-items:stretch;} /* 14.09. (Kunde): Bildspalte = fixe 500px-Bildbreite (war 7fr/6fr - liess das Bild schmaler/breiter als 500 laufen) */
.stm-ov__g2head{display:flex;flex-direction:column;justify-content:center;} /* 31.07.: Headline+Subline vertikal zentriert neben dem Bild */
.stm-ov__g2head .stm-ss-intro{margin:0;color:var(--st-color-primary,#002F5D);font-weight:500;font-size:1.25rem;line-height:1.5;}
.stm-ov__g2title .stm-ss__lastline{color:var(--st-color-accent,#B51F29);} /* Standard: letzte Zeile rot */
.stm-ov__g2media{margin:0;}
.stm-ov__g2media img{width:100%;height:auto;display:block;}
.stm-ov__g2caption{color:var(--st-neutral-500,#6D6D6D);font-size:1rem;line-height:1.25;margin-top:.6rem;}
.stm-ov__g2title{font-family:var(--st-font-head,inherit);font-weight:700;text-transform:uppercase;font-size:clamp(2rem,4.2vw,3.75rem);line-height:.9;margin:0 0 1rem;hyphens:auto;overflow-wrap:anywhere;color:var(--st-color-primary,#002F5D);}
.stm-ov__g2intro{color:var(--st-color-primary,#002F5D);font-weight:500;font-size:1.25rem;line-height:1.5;}
.stm-ov__g2body{margin-top:1.5rem;font-size:1.25rem;line-height:1.5;color:var(--st-color-ink,#222);}
.stm-ov__g2body p{margin:0 0 .9rem;}
.stm-ov__g2body.is-collapsed{max-height:11.5rem;overflow:hidden;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent);}
/* 14.09. (Kunde, Wdh.): "Da sind immer noch die veralteten Mehr-anzeigen-Akkordeons drin" / Anhang
"Das Korrekte Mehr anzeigen einsetzen". Der 13.09.-Fix hatte auf 1rem verkleinert - das KORREKTE
Original ist die Weiterlesen-Komponente der Spalten (.col__text-toggle, Zeile ~510): dort erbt
font-size die COPY-Groesse 1.25rem. Jetzt 1:1 deren Werte (flex + gap .45rem + .stm-chev-Span aus
stm-slideshow.js statt der Sonder-Chevron-Maske .stm-ov__g2chev - Regeln geloescht); die globale
Regel ".is-open .stm-chev" dreht das Chevron. KEINE Sonderoptik mehr. */
.stm-ov__g2moretoggle{display:flex;justify-content:center;align-items:center;gap:.45rem;margin:.75rem auto 0;background:none;border:0;padding:0;cursor:pointer;color:var(--st-neutral-400,#888);font-weight:400;font-family:inherit;font-size:1.25rem;text-transform:none;text-decoration:none;}
.stm-ov__g2moretoggle:hover{color:var(--st-color-accent,#B51F29);}
/* 12.08. Ticket "Scrollen bei Text in Galerie" / 13.09. (Kunde, "Modul Galerie 2") UMGEBAUT:
"Der ganze Content scrollt in der Lightbox - Bild und Headline scrollen mit." Der fruehere
Flex-Split (g2top fix, nur der Textkoerper scrollte innen) ist raus - die KARTE selbst ist
der Scroll-Container (Basisregel .stm-ov__card overflow:auto), alles fliesst normal. */
.stm-ov--g2 .stm-ov__card{max-height:calc(100vh - 140px);}
/* 14.09. (Kunde, "Galerie 2", Wdh. aus letztem Kommentar): "den Bildern auch eine FIXE BREITE von
500px geben und Bilder ueber COVER einbinden" - die 13.09.-Regel hatte stattdessen die HOEHE auf
500 gekappt (width:auto). Jetzt woertlich: Breite fix 500px (auf schmalen Karten via max-width
gekappt), Format fest quadratisch 500x500 (aspect-ratio - cover braucht einen festen Rahmen),
Bildausschnitt per object-fit:cover. */
.stm-ov__g2media img{width:500px;max-width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;}
/* 13.09. (Kunde): Pfeil-Icons wie Galerie 3 - gelieferte Dateien "Slider Arrow white circle *"
(identische Geometrie wie die Lightbox-Icons der G3; Hover per Bildtausch, vorgeladen). */
.stm-ov--g2 .stm-ov__arrow{--ova:url("../img/icons/Slider%20Arrow%20white%20circle%20right%20default.svg");--ovah:url("../img/icons/Slider%20Arrow%20white%20circle%20right%20hover.svg");border:0;background-color:transparent;background-image:var(--ova),var(--ovah);background-position:center,-60px -60px;background-size:contain,1px 1px;background-repeat:no-repeat;width:40px;height:40px;min-width:40px;}
.stm-ov--g2 .stm-ov__arrow--prev{--ova:url("../img/icons/Slider%20Arrow%20white%20circle%20left%20default.svg");--ovah:url("../img/icons/Slider%20Arrow%20white%20circle%20left%20hover.svg");}
.stm-ov--g2 .stm-ov__arrow:hover{background-image:var(--ovah),var(--ova);}
.stm-ov--g2 .stm-ov__arrow svg{display:none;}
.stm-ov__g2link{margin-top:1rem;}
/* 14.09. (Kunde, Anhang "Korrekte Text-Links einsetzen"): der Link ist jetzt die Komponente
"Textlink mit Pfeil (klein)" (btn btn--text btn--sm im Markup, stm-slideshow.js) - die alten
Sonderregeln (.85rem/700/Hover rot) sind raus, Typo/Farbe/Pfeil/States kommen vom Button-System. */
/* Overlay Galerie 3: Lightbox mit Text-Panel */
.stm-ov--g3 .stm-ov__box{width:min(1096px,calc(100vw - 170px));} /* 08.09. R4 (Stefanie): beim Verkleinern des Browserfensters wird die GALERIE schmaler - 170px Reserve (2x80px Frame-Padding + Luft) deckt die 56px-Pfeil-Aussenlage ab, die Pfeile bleiben IMMER links/rechts AUSSEN (war 92vw -> Pfeile rutschten per 1260er-Regel in die Galerie) */
.stm-ov--g3 .stm-ov__arrow--prev{left:-56px;}
.stm-ov--g3 .stm-ov__arrow--next{right:-56px;} /* schlaegt die generische 1260er-Innen-Regel (-14px) per Spezifitaet 0-3-0 - gilt fuer G3 in JEDER Desktop-Breite; mobil uebersteuert der <=900-Block (spaeter im File, gleiche Spezifitaet) */
.stm-ov--g3 .stm-ov__card{max-width:none;padding:0;overflow:visible;}
/* 08.09. R3 (Stefanie): aeussere Slider-Pfeile der G3-Lightbox = gelieferte Icons "Slider Arrow
Lightbox" (Kreis+Rand+Pfeil im SVG) statt CSS-Kreis + Inline-SVG; Hover tauscht auf die rote
Variante (geparkte 1px-Zweitebene laedt sie vor). Mobil dieselben Icons verkleinert (Block unten). */
.stm-ov--g3 .stm-ov__arrow{--ova:url("../img/icons/Slider%20Arrow%20Lightbox%20right%20default.svg");--ovah:url("../img/icons/Slider%20Arrow%20Lightbox%20right%20hover.svg");border:0;background-color:transparent;background-image:var(--ova),var(--ovah);background-position:center,-60px -60px;background-size:contain,1px 1px;background-repeat:no-repeat;width:40px;height:40px;min-width:40px;}
.stm-ov--g3 .stm-ov__arrow--prev{--ova:url("../img/icons/Slider%20Arrow%20Lightbox%20left%20default.svg");--ovah:url("../img/icons/Slider%20Arrow%20Lightbox%20left%20hover.svg");}
.stm-ov--g3 .stm-ov__arrow:hover{background-image:var(--ovah),var(--ova);}
.stm-ov--g3 .stm-ov__arrow svg{display:none;}
/* 31.07.: feste Box (Hoehe+Breite konstant), Panel liegt ALS OVERLAY ueber dem Bild */
.stm-ov__g3wrap{position:relative;aspect-ratio:1096/580;max-height:82vh;overflow:hidden;}
.stm-ov__g3media{margin:0;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#fff;}
.stm-ov__g3media img{width:100%;height:100%;display:block;object-fit:cover;}
.stm-ov__g3wrap.is-portrait .stm-ov__g3media{padding:0;}
.stm-ov__g3wrap.is-portrait .stm-ov__g3media img{object-fit:contain;width:auto;max-width:100%;height:100%;} /* Hochformat: zentriert mit Weissraum, Box bleibt gleich gross */
.stm-ov__g3cap{position:absolute;top:.5rem;right:.75rem;z-index:2;margin:0;color:#fff;font-size:.8rem;line-height:1.3;text-shadow:0 1px 3px rgba(0,0,0,.55);max-width:60%;text-align:right;} /* 15.10. R114 (Kunde): Bildbeschriftung in der Lightbox per default oben rechts (Optik wie der Hover-Text .stm-g3__file im Raster); Copyright unten links kommt als globale Plakette (.stm-imgcredit, Basisregel ~2339) direkt mit ins figure */
.stm-ov__g3panel{position:absolute;top:0;right:0;bottom:0;width:min(38%,340px);background:rgba(255,255,255,.85);padding:3.2rem 1.6rem 1.6rem;display:flex;align-items:flex-start;overflow-y:auto;overscroll-behavior:contain;} /* 12.08. Ticket "Scrollen bei Text in Galerie 3": lange Overlaytexte scrollen statt beidseitig abgeschnitten */
.stm-ov__g3panel > *{margin-top:auto;margin-bottom:auto;} /* kurzer Text bleibt vertikal zentriert (align-items:center wuerde bei overflow den Anfang abschneiden) */
/* 08.09. R3 (Stefanie): Ausklapp-Pfeil = geliefertes Icon "Slider Arrow Lightbox" (weisser Kreis mit
grauem Rand + blauer Pfeil, Hover = roter Pfeil). Ersetzt die CSS-gebaute Kreisflaeche UND die
Zustands-Sonderregel vom 07.09. (offen = blanker Pfeil) - das Icon gilt jetzt in beiden Zustaenden.
Hover-Variante als geparkte 1px-Zweitebene vorgeladen (Icon-Links-LEHRE). */
.stm-ov__g3toggle{position:absolute;top:.9rem;right:.9rem;width:40px;height:40px;border:0;border-radius:50%;padding:0;cursor:pointer;color:var(--st-color-primary,#002F5D);background-color:transparent;background-position:center,-60px -60px;background-size:contain,1px 1px;background-repeat:no-repeat;box-shadow:none;display:inline-flex;align-items:center;justify-content:center;}
/* 08.09. R4 (Stefanie, praezisiert): GESCHLOSSEN (is-panel-hidden) = geliefertes Icon "Slider Arrow
Lightbox" (Kreis mit Kontur); GEOEFFNET = Pfeil OHNE Hinterlegung (das Inline-SVG, kein Kreis). */
.stm-ov__g3wrap.is-panel-hidden .stm-ov__g3toggle{background-image:url("../img/icons/Slider%20Arrow%20Lightbox%20right%20default.svg"),url("../img/icons/Slider%20Arrow%20Lightbox%20right%20hover.svg");}
.stm-ov__g3wrap.is-panel-hidden .stm-ov__g3toggle:hover{background-image:url("../img/icons/Slider%20Arrow%20Lightbox%20right%20hover.svg"),url("../img/icons/Slider%20Arrow%20Lightbox%20right%20default.svg");}
.stm-ov__g3toggle svg{display:none;} /* 09.09. (Maik): Inline-SVG komplett aus - BEIDE Zustaende nutzen jetzt das gelieferte Icon-Artwork */
.stm-ov__g3toggle{background-image:url("../img/icons/Slider%20Arrow%20Lightbox%20right%20open%20default.svg"),url("../img/icons/Slider%20Arrow%20Lightbox%20right%20open%20hover.svg");} /* 09.09. (Maik, "noch der alte dickere Pfeil"): GEOEFFNET = Pfeil des gelieferten Icons OHNE Kreis (Pfeil-only-Ableitung, gleiche Pfadgeometrie) statt des dicken 30px-Inline-SVGs; Hover vorgeladen */
.stm-ov__g3toggle:hover{background-image:url("../img/icons/Slider%20Arrow%20Lightbox%20right%20open%20hover.svg"),url("../img/icons/Slider%20Arrow%20Lightbox%20right%20open%20default.svg");color:var(--st-color-accent,#B51F29);}
.stm-ov__g3wrap.is-panel-hidden .stm-ov__g3paneltext{display:none;}
.stm-ov__g3wrap.is-panel-hidden .stm-ov__g3panel{background:transparent;width:64px;padding:0;} /* zu: nur runder Linkspfeil bleibt */
.stm-ov__g3wrap.is-panel-hidden .stm-ov__g3toggle{transform:scaleX(-1);}
.stm-ov__g3head{font-family:var(--st-font-head,inherit);font-weight:700;text-transform:uppercase;font-size:1rem;line-height:1.35;margin:0 0 .75rem;} /* 08.09. R4 (Stefanie hatte RECHT - QM-Vorfall): Die HL ist ein