— wir machen den Wrapper
transparent + padding-frei, damit unsere Section edge-to-edge erscheint.
Scope: nur view-featured (Startseite), nur container-top-a — andere
Positionen / Seiten behalten die Standard-Card-Chrome. */
body.view-featured .container-top-a > .card,
body.view-featured .container-top-a > .card > .card-body {
background: transparent;
border: 0;
padding: 0;
margin: 0;
box-shadow: none;
border-radius: 0;
}
/* site-grid gibt container-top-a 16 px Gutter links/rechts (Cassiopeia-Default).
Unsere Termine-Sektion will edge-to-edge wirken — Breakout-Trick mit
100 vw + Margin-Negation. Limited auf view-featured + container-top-a,
damit andere Seiten/Positionen unbeeinflusst bleiben. */
body.view-featured .container-top-a .mvi-section--termine {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
/* Responsive Anpassungen ---------------------------------------------------
Drei Zonen (1050 = --breakpoint-mobile-Token aus dem Header-System):
≥ 1051 Desktop — Default-Werte oben.
521 – 1050 Tablet — Head bleibt 2-Spalten-Row, Tile-Spacing reduziert.
≤ 520 Mobile — Head kollabiert zur Single-Column, Tile minimaler. */
@media (max-width: 1050px) {
/* Tablet: Tiles kompakter (weniger Padding, kleinerer Title), mehr Platz
für folgende Sektionen. Head bleibt in Row, weil Eyebrow + Title links
und More-Link + Slider rechts auf Tablet-Breite ergonomisch passen. */
.mvi-section__title {
font-size: 36px;
}
.mvi-event-tile {
flex-basis: 200px; /* war 260 — 3 voll + Peek bei 834 Inner */
padding: var(--space-3); /* 12 */
}
.mvi-event-tile__title {
font-size: var(--fs-sm); /* 14 */
}
}
/* Mid-Range + Mobile: Right-Cluster hidden + Section-Padding reduziert.
Beide Regeln gelten gemeinsam auf Phones bis kleine Phablet/Portrait-
Tablets, weil das Grid-Head bei 521–640 sonst overflowt (Title-min +
Right-Cluster-min > head-Breite). Hidden Right gibt dem Title vollen
Inner; reduziertes Padding gibt zusätzlich 48 px horizontalen Raum.
`.mvi-termine-actions` (More-Link + Prev/Next-Buttons) entfällt damit
bis 640 — „Alle Termine"/„Archivierte Beiträge" über Menü erreichbar,
Slider per Touch-Swipe bedienbar. */
@media (max-width: 640px) {
.mvi-section {
/* Section-Padding-X reduziert: 48 → 24. Mit nur 48 px horizontalem
Gesamtpadding hat der Inner-Content deutlich mehr Atemraum auf
schmalen + mid-range Viewports. */
padding-left: var(--space-5); /* 24 */
padding-right: var(--space-5); /* 24 */
}
.mvi-section--termine .mvi-termine-actions,
.mvi-section--aktuelles .mvi-termine-actions {
display: none;
}
}
@media (max-width: 520px) {
/* Mobile-only Tuning: Head kollabiert zur Single-Column (kein `auto`-
Track mehr nötig, da Right-Cluster ohnehin hidden), Title + Eyebrow
verkleinert für Phone-Breiten, Tile-Layout auf 48 % flex-basis. */
.mvi-section__head {
grid-template-columns: 1fr;
align-items: start;
/* Head→Track-Abstand auf Mobile zusätzlich reduziert (32 → 24), weil
die ausgeblendete Actions-Zeile bereits viel Höhe einspart und
der Block insgesamt kompakter wirken soll. */
margin-bottom: var(--space-5); /* 24 */
}
.mvi-section__title {
font-size: 28px;
}
.mvi-section__eyebrow {
font-size: 11px;
}
.mvi-event-tile {
flex-basis: 48%; /* 2 Karten voll sichtbar, dritte rechts off-track als Scroll-Reserve */
}
.mvi-event-tile__day {
font-size: var(--fs-lg); /* 22 */
}
}
/* === PHASE 3 · AKTUELLES (S-4) ============================================ */
/* News-/Beitrags-Sektion auf der Startseite. Foundation (mvi-section__head /
eyebrow / title / more) wird aus S-3 wiederverwendet. Section-Background
bewusst transparent — die page-cream-Farbe scheint durch und erzeugt
visuelle Trennung zur weißen Termine-Sektion oberhalb. */
.mvi-section--aktuelles {
background: transparent;
}
/* Sub-Text unter dem Title (nur in Aktuelles bisher benutzt — Foundation für
spätere Sektionen, die ebenfalls einen Sub-Untertitel brauchen).
17 px ist off-Scale (zwischen --fs-sm 14 und --fs-md 18), aber per
Playwright vom Preview gemessen und visuell harmonischer als 18. */
.mvi-section__sub {
font-family: var(--font-body);
font-size: 17px;
font-weight: 400;
line-height: var(--lh-normal); /* 1.55 */
color: var(--fg-secondary);
margin: 0;
max-width: 560px;
}
/* News-Track: auf Desktop + Tablet horizontal scroll-snap + Edge-to-Edge-
Breakout (margin -48 kompensiert section-padding 48, padding 0 48 macht
den Content wieder gleich zum Inner-Block). Auf Mobile column-stack. */
.mvi-news {
display: flex;
flex-direction: row;
gap: var(--space-5); /* 24 */
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
/* Inner-konform wie .mvi-event-track (Termine): 4-px-Peek statt Full-Bleed,
damit die Aktuelles-Sektion rechts bündig mit Termine/Ensembles endet
(r1236 ≈ Section-Inner). padding-LR + margin = --space-1 (4) wie der Track;
unten --space-2 (8) bleibt als Card-Shadow-Raum. Der frühere Edge-to-Edge-
Bleed mit rechts angeschnittener Karte (Scroll-Hint) entfällt bewusst
zugunsten gleicher rechter Kante (DECISIONS 2026-06-03). */
padding: 0 var(--space-1) var(--space-2); /* 0 4 8 */
margin: 0 calc(var(--space-1) * -1); /* -4 / -4 — wie .mvi-event-track */
scroll-padding-left: var(--space-1); /* 4 — = padding-left, card[0] rastet bündig am Inner-Rand ein */
scrollbar-width: none;
-ms-overflow-style: none;
}
.mvi-news::-webkit-scrollbar {
display: none;
}
.mvi-news:focus-visible {
outline: 2px solid var(--brand-gold);
outline-offset: 4px;
border-radius: var(--radius-sm);
}
/* News-Card — weiße Karte mit dezenter Border + xs-Shadow, scroll-snap-aligned.
Card-Breiten: Desktop 380, Tablet 320, Mobile 100 % (siehe Media-Queries).
Hover-Effekt: translateY(-2px) + Shadow-Boost xs → md (1:1 vom Preview).
Liegt auf der gesamten Card (nicht auf dem Photo!) — Photo skaliert nicht. */
.mvi-card {
display: flex;
flex-direction: column;
flex: 0 0 380px;
background: var(--bg-surface);
border: var(--border-w-thin) solid var(--border-subtle);
border-radius: var(--radius-lg); /* 14 */
box-shadow: var(--shadow-xs);
overflow: hidden;
scroll-snap-align: start;
transition: transform var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out);
}
.mvi-card:hover,
.mvi-card:focus-within {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
/* Photo-Link: wrappt das .mvi-card__photo-Div in einen Anchor — Klick aufs
Bild öffnet die Beitrags-Detail-Seite (selbe URL wie der „Weiterlesen"-Link).
Auf Hover/Focus skaliert das Photo dezent (Scale 1.03), Photo-Container
hat `overflow: hidden` → Skalierung wird visuell geclippt. */
.mvi-card__photo-link {
display: block;
text-decoration: none;
color: inherit;
outline: none;
-webkit-tap-highlight-color: transparent;
}
.mvi-card__photo-link:focus-visible {
outline: 2px solid var(--brand-gold);
outline-offset: 2px;
}
/* Card-Photo: 4:3 Aspect, Background-Image inline gesetzt im Override.
::before = Gradient-Overlay für Caption-Lesbarkeit, ::after = Caption
via `content: attr(data-label)`. Kein Hover-Effekt auf dem Photo selbst
— der gesamte Card-Hover (translateY + Shadow) liegt auf .mvi-card. */
.mvi-card__photo,
.mvi-photo {
position: relative;
aspect-ratio: 4 / 3;
background-color: var(--neutral-sand); /* Fallback wenn kein Bild */
background-size: cover;
background-position: center;
overflow: hidden;
}
.mvi-card__photo::before,
.mvi-photo::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
rgba(31, 28, 24, 0) 55%,
rgba(31, 28, 24, 0.55) 100%
);
}
.mvi-card__photo::after,
.mvi-photo::after {
content: attr(data-label);
position: absolute;
bottom: var(--space-3); /* 12 */
left: 14px;
right: 14px;
font-family: var(--font-display);
font-size: var(--fs-xs); /* 12 */
font-weight: 400;
font-style: italic; /* Preview-Match (Aktuelles + Ensembles) */
line-height: 1.3;
letter-spacing: 0.01em;
color: rgba(253, 250, 243, 0.92); /* cream-92 */
pointer-events: none;
}
/* Fallback-Placeholder für Beiträge ohne Beitragsbild (2026-05-23):
das PHP-Override (`mod_articles/default.php`) schreibt das Inline-
`style="background-image: url(...)"`-Attribut NUR wenn ein
`image_intro` gepflegt ist. Cards ohne Bild haben daher **kein**
`style`-Attribut → `:not([style])` matched genau diesen Fall.
Branded-Placeholder: Bordeaux-Hintergrund + MVI-Logo zentriert als
dezentes Wasserzeichen. Gradient-`::before` durch das Logo ersetzt
(kein dunkler Wash auf Bordeaux-BG nötig), Caption-`::after`
ausgeblendet (kein Foto → keine Foto-Caption „Foto · …"). */
.mvi-card__photo:not([style]),
.mvi-photo:not([style]) {
background-color: var(--brand-bordeaux);
}
.mvi-card__photo:not([style])::before,
.mvi-photo:not([style])::before {
background: none; /* Gradient-Overlay weg */
background-image: url('/media/templates/site/cassiopeia_mvi/images/logo.png');
background-repeat: no-repeat;
background-position: center center;
background-size: 45%; /* Logo zentriert, ~45 % Card-Breite */
opacity: 0.40; /* Wasserzeichen — Polish 2026-05-23 (0.18 → 0.30 → 0.40) */
}
.mvi-card__photo:not([style])::after,
.mvi-photo:not([style])::after {
display: none; /* keine „Foto · …"-Caption ohne Foto */
}
/* Flyer-Card (2026-05-23 R2): Beiträge mit Custom Field `beitragstyp=flyer`
sollen das Flyer-Plakat vollständig zeigen (kein Cropping, kein Repeat).
R1-Ansatz (`background-image` mit `background-size: contain`) versagte
bei Hochformat-Plakaten (Repeat) und Querformat (Crop). R2 nutzt ein
echtes `![]()
`-Element mit `object-fit: contain` — zuverlässig für beide
Orientierungen.
PHP-Override rendert für Flyer-Cards stattdessen:
(statt des Standard-`
`).
- aspect-ratio aufgehoben → Card-Höhe passt sich dem Bildverhältnis an.
- Padding für Letterbox-Charakter um das Bild.
- Pseudo-Elemente (Gradient + Caption) deaktiviert — Flyer-Plakat trägt
eigenen Titel.
- Lead-Text wird vom PHP-Override für Flyer bereits unterdrückt. */
.mvi-card__photo--flyer {
aspect-ratio: unset;
height: auto;
background: var(--neutral-cream);
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-3);
}
.mvi-card__photo--flyer img {
display: block;
width: 100%;
height: auto;
max-height: 400px;
object-fit: contain;
border-radius: var(--radius-sm);
}
.mvi-card__photo--flyer::before,
.mvi-card__photo--flyer::after {
display: none;
}
/* Kategorie-spezifischer Letterbox-Hintergrund (R3-Polish 2026-05-23) —
Bordeaux/Grün/Gold-deep statt cream, damit der Flyer-Frame zur Card-
Badge-Farbe passt. Modifier `--bordeaux/--green/--gold` kommt aus
`$modifier` (catid 125/126/127). gold-deep statt --brand-gold, weil
der hellere Gold-Ton sich vom Letterbox-Hintergrund zu wenig absetzt. */
.mvi-card__photo--flyer.mvi-card__photo--bordeaux {
background: var(--brand-bordeaux);
}
.mvi-card__photo--flyer.mvi-card__photo--green {
background: var(--brand-green);
}
.mvi-card__photo--flyer.mvi-card__photo--gold {
background: var(--brand-gold-deep);
}
.mvi-card__body {
display: flex;
flex-direction: column;
gap: var(--space-3); /* 10 in preview, 12 grid-konform */
padding: var(--space-5) 26px 28px; /* 24 26 28 — 26/28 off-grid (preview-Werte) */
}
.mvi-card__meta {
display: flex;
align-items: center;
gap: var(--space-3); /* 12 */
margin: 0;
}
.mvi-card__date {
font-family: var(--font-body);
font-size: 13px; /* zwischen fs-xs 12 und fs-sm 14 — Preview-Wert */
font-weight: 500;
color: var(--fg-muted);
}
.mvi-card__title {
font-family: var(--font-display);
font-size: 22px;
font-weight: 600;
line-height: 1.25;
letter-spacing: var(--ls-tight);
color: var(--brand-bordeaux);
margin: 0;
/* 2-Line-Clamp hält die Card-Höhen vergleichbar, auch wenn Artikel-Titel
stark variieren (Joomla-Beiträge haben echte, ungleich-lange Titel). */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Klickbarer Karten-Titel — geteilte Utility für Aktuelles (S-4),
Ensembles (S-5) und Ausbildung (S-6). Der wickelt den ; der
; der
behält seine eigene Bordeaux-Farbe. Bootstrap unterstreicht
nackte → `text-decoration: none` ist nötig; der Hover-Farbwechsel
braucht ohnehin eine Regel. Resting-State ist pixelgleich zum
ungewickelten Titel → keine Baseline-Drift. */
.mvi-title-link {
display: block;
text-decoration: none;
color: inherit;
-webkit-tap-highlight-color: transparent;
}
.mvi-title-link > * {
transition: color var(--dur-fast) var(--ease-out);
}
.mvi-title-link:hover > *,
.mvi-title-link:focus-visible > * {
color: var(--brand-bordeaux-deep);
}
.mvi-title-link:focus-visible {
outline: 2px solid var(--brand-gold);
outline-offset: 2px;
}
.mvi-card__lead {
font-family: var(--font-body);
font-size: 15px; /* zwischen fs-sm 14 und fs-base 16 — Preview-Wert */
font-weight: 400;
line-height: var(--lh-normal); /* 1.55 */
color: var(--fg-secondary);
margin: 0;
/* 5-Line-Clamp begrenzt sehr lange Intro-Texte — passt zur Preview-Höhe
(~ 120 px bei 15 px lh 1.55 = 5 Zeilen). */
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
}
.mvi-card__link {
font-family: var(--font-body);
font-size: var(--fs-sm); /* 14 */
font-weight: 600;
color: var(--brand-bordeaux);
text-decoration: none;
border-bottom: var(--border-w-thin) solid var(--brand-bordeaux);
padding: 0 0 2px;
align-self: flex-start; /* schmal — schrumpft nicht auf Card-Breite */
white-space: nowrap;
transition: color var(--dur-fast) var(--ease-out),
border-color var(--dur-fast) var(--ease-out);
}
.mvi-card__link:hover,
.mvi-card__link:focus-visible {
color: var(--brand-bordeaux-deep);
border-bottom-color: var(--brand-bordeaux-deep);
}
.mvi-card__link:focus-visible {
outline: 2px solid var(--brand-gold);
outline-offset: 3px;
}
/* Tag-Pill: kleine Marker neben dem Datum, gefüllt mit Modifier-Farbe.
`::before` setzt einen 6 × 6 Cream-Dot vor den Tag-Text. */
.mvi-tag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px var(--space-3); /* 5 10/12 → 12 grid-konform */
border-radius: var(--radius-pill); /* 999 */
font-family: var(--font-body);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
color: var(--neutral-cream-50);
}
.mvi-tag::before {
content: "";
display: block;
width: 6px;
height: 6px;
background: currentColor;
border-radius: 50%;
flex: 0 0 auto;
opacity: 0.85;
}
.mvi-tag--bordeaux { background: var(--brand-bordeaux); }
.mvi-tag--green { background: var(--brand-green); }
.mvi-tag--gold { background: var(--brand-gold-deep); }
/* Cassiopeia card-chrome Neutralizer + Breakout für top-b ----------------- */
body.view-featured .container-top-b > .card,
body.view-featured .container-top-b > .card > .card-body {
background: transparent;
border: 0;
padding: 0;
margin: 0;
box-shadow: none;
border-radius: 0;
}
body.view-featured .container-top-b .mvi-section--aktuelles {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
/* Responsive Tablet (521–1050) ------------------------------------------- */
@media (max-width: 1050px) {
.mvi-card {
flex-basis: 320px;
}
/* Untertitel auf Tablet & Mobile ausblenden — Eyebrow + H2 reichen als
Section-Intro, der Sub-Lead-Satz wirkt auf schmaleren Viewports
redundant und drückt die Cards nach unten. (Briefing schrieb
`__desc`; tatsächlicher Selektor im Markup ist `__sub`.) */
.mvi-section--aktuelles .mvi-section__sub {
display: none;
}
}
/* Mobile-Toggle-Button + Outline-Variante.
.mvi-news-mobile-cta ist auf Desktop+Tablet hidden, erscheint nur ≤ 520 px
unter dem Karten-Stack als „Alle X Beiträge anzeigen ∨" / „Weniger ∧"
Toggle. Button bleibt sichtbar — anders als bei One-Way-Expand. */
.mvi-news-mobile-cta {
display: none;
}
/* Toggle-Button Innenleben: zwei Text-Varianten (more/less) + Chevron.
Ein Text ist immer sichtbar (per `.is-expanded`-Klasse umgeschaltet). */
.mvi-news-toggle-btn {
width: 100%;
border-radius: var(--radius-pill); /* 999 — pill-Form für vollbreite CTAs */
/* iOS-spezifisch:
- `touch-action: manipulation` — eliminiert die 300-ms-Click-Verzögerung
(Double-Tap-Zoom-Warten). Click feuert sofort beim touchend.
- `-webkit-touch-callout: none` — kein Long-Press-Context-Menü.
- `user-select: none` — kein Text-Highlight auf den Toggle-Spans. */
touch-action: manipulation;
-webkit-touch-callout: none;
user-select: none;
}
/* Outline-only in ALLEN Interaktions-States (Touch/Mouse/Keyboard).
Der Toggle-Button soll nie eingefärbt erscheinen — kein filled
active/focus/hover, auch nicht beim Keyboard-Tab. iOS-Tap-Highlight
wird zusätzlich auf alle interaktiven Elemente in der Sektion gesetzt. */
.mvi-news-toggle-btn:hover,
.mvi-news-toggle-btn:focus,
.mvi-news-toggle-btn:focus-visible,
.mvi-news-toggle-btn:focus:not(:focus-visible),
.mvi-news-toggle-btn:active {
background: transparent !important;
color: var(--brand-bordeaux) !important;
outline: none !important;
box-shadow: none !important;
}
/* iOS-Tap-Highlight komplett unterdrücken — sonst blitzt nach Tap kurz ein
semi-transparenter Bordeaux-Cast auf Button/Karten. */
.mvi-news-toggle-btn,
.mvi-card,
.mvi-card__link {
-webkit-tap-highlight-color: transparent;
}
.mvi-news-toggle-btn__text-less {
display: none;
}
.mvi-news-toggle-btn.is-expanded .mvi-news-toggle-btn__text-more {
display: none;
}
.mvi-news-toggle-btn.is-expanded .mvi-news-toggle-btn__text-less {
display: inline;
}
/* CSS-Chevron (border-trick): 10×10 Quadrat, nur Right+Bottom-Border, 45°
gedreht → zeigt nach unten ∨. Beim Expand auf -135° → zeigt nach oben ∧. */
.mvi-news-toggle-btn__chevron {
display: inline-block;
width: 10px;
height: 10px;
border-right: var(--border-w-default) solid currentColor;
border-bottom: var(--border-w-default) solid currentColor;
transform: rotate(45deg);
transition: transform var(--dur-base) var(--ease-out);
margin-left: var(--space-2);
margin-bottom: 3px;
}
.mvi-news-toggle-btn.is-expanded .mvi-news-toggle-btn__chevron {
transform: rotate(-135deg);
margin-bottom: -3px;
}
.mvi-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
font-family: var(--font-body);
font-size: 15px; /* zwischen fs-sm 14 und fs-base 16 — visuelle Balance */
font-weight: 600;
line-height: 1.2;
text-decoration: none;
padding: var(--space-3) var(--space-6); /* 12 32 */
border-radius: var(--radius-sm); /* 4 */
cursor: pointer;
transition: background-color var(--dur-fast) var(--ease-out),
color var(--dur-fast) var(--ease-out),
border-color var(--dur-fast) var(--ease-out);
}
.mvi-btn--outline {
background: transparent;
border: var(--border-w-default) solid var(--brand-bordeaux); /* 1.5 — Preview-näher als 1 */
color: var(--brand-bordeaux);
}
.mvi-btn--outline:hover,
.mvi-btn--outline:focus-visible {
background: var(--brand-bordeaux);
color: var(--fg-on-bordeaux); /* cream-50 */
border-color: var(--brand-bordeaux);
}
.mvi-btn--outline:focus-visible {
outline: 2px solid var(--brand-gold);
outline-offset: 2px;
}
/* Responsive Mobile (≤ 520): Cards stacken vertikal, nur erste 3 Cards
sichtbar + CTA-Button am Ende. Kein Slider, kein Edge-to-Edge-Breakout.
.mvi-section--aktuelles .mvi-termine-actions hidden via gemeinsame
Regel weiter oben im Termine-Mobile-Block. */
@media (max-width: 520px) {
.mvi-news {
flex-direction: column;
gap: 18px; /* Preview-Wert, off-grid */
overflow: hidden; /* clippt Karten 4+ via max-height */
scroll-snap-type: none;
padding: 0 0 var(--space-2);
margin: 0;
/* max-height wird per JS gesetzt (collapsed = 3-Karten-Höhe;
expanded = scrollHeight). 500 ms ist langsamer als Drawer-Submenu
(420 ms) — gibt iOS Zeit, Click-Resolution sauber abzuschließen.
Easing: `cubic-bezier(0.16, 1, 0.3, 1)` (ease-out, identisch zum
Drawer-Submenu) — schnell anfangs, sanft auslaufend. */
transition: max-height 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* Karten 4+ sind im Flow (display: flex) — werden nur vom max-height
des Tracks geclippt. Damit ist die Höhen-Animation kontinuierlich,
statt einem display:none-Sprung.
flex: 0 0 auto = behalte Content-Größe, kein shrink (sonst quetschen
sich 8 Cards in die collapsed max-height statt zu clippen). */
.mvi-card {
flex: 0 0 auto;
}
/* Während der max-height-Animation: Card-Links nicht klickbar. Schützt
gegen iOS-Click-Through, wenn der User-Finger durch den Layout-Shift
plötzlich über einem Card-Link landet. Gilt auch für den Photo-Link-
Wrap (Bild ist auf Mobile ebenfalls klickbar). Nach `transitionend`
wird die Klasse wieder entfernt (siehe JS). */
.mvi-news.is-animating .mvi-card__link,
.mvi-news.is-animating .mvi-card__photo-link {
pointer-events: none;
}
/* Instant-Collapse: max-height-Wechsel ohne Animation. Wird vom JS für
genau einen Frame gesetzt, dann wieder entfernt — danach läuft beim
Expand wieder die normale 500-ms-Transition. */
.mvi-news.is-instant {
transition: none !important;
}
.mvi-card__body {
padding: 18px 20px 22px; /* Preview-Werte */
}
.mvi-card__title {
font-size: var(--fs-md); /* 18 — fast Preview's 20 */
}
/* Mobile-CTA aktivieren. Margin-top 16 sorgt für Touch-sicheren Abstand
zur letzten sichtbaren Karte (Card 3 hat einen `__link` am unteren
Rand — ohne Abstand könnte Tap auf Toggle versehentlich den Link
treffen). position + z-index defensive gegen Stacking-Probleme. */
.mvi-news-mobile-cta {
display: flex;
justify-content: center;
margin-top: var(--space-4); /* 16 */
position: relative;
z-index: 2;
}
}
/* === PHASE 3 · ENSEMBLES (S-5) ============================================ */
/* Statischer mod_custom-Block auf Position bottom-a (Snippet docs/ensembles.html).
Zwei gleichwertige Karten (Aktive Kapelle / Jugendkapelle) mit Foto oben,
Body mit Role-Badge, Titel, Lead und 3-spaltigem Stats-Cluster. Foundation
.mvi-section* wird wiederverwendet — eigene Klassen nur für Grid + Karten. */
/* Cassiopeia card-chrome Neutralizer für bottom-a (gleicher Mechanismus wie
top-a/top-b). Joomla wrappt mod_custom typischerweise in
. Wir entfernen Background/Border/Padding, damit die
Section bündig vom Page-Cream auf das eigene weiße Karten-Layout übergeht. */
body.view-featured .container-bottom-a > .card,
body.view-featured .container-bottom-a > .card > .card-body {
background: transparent;
border: 0;
padding: 0;
margin: 0;
box-shadow: none;
border-radius: 0;
}
/* Edge-to-Edge-Breakout für bottom-a — site-grid lässt 16 px Gutter L/R, wir
ziehen die Section auf volle Viewport-Breite (gleich wie Termine/Aktuelles). */
body.view-featured .container-bottom-a .mvi-section--ensembles {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
/* Grid-Wrapper: 2 Spalten Desktop+Tablet, 1 Spalte Mobile. ----------------- */
.mvi-ensembles {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-6); /* 32 */
}
/* Karte: weiße Surface mit dezenter Border + xs-Shadow, gleiche Sprache wie
.mvi-card (Aktuelles). Overflow:hidden klippt das Photo am border-radius.
Hover-/Focus-Within-Effekt 1:1 aus S-4 übernommen (translateY -2 +
shadow-md, 220 ms ease-out). Cursor bleibt default auf der Card — pointer
nur auf den klickbaren Elementen (.mvi-ens__photo-link, .mvi-ens__more),
analog .mvi-card in S-4: Text/Stats sind nicht klickbar, Hover-Lift
trotzdem auf der gesamten Card. */
.mvi-ens {
display: flex;
flex-direction: column;
background: var(--bg-surface);
border: var(--border-w-thin) solid var(--border-subtle);
border-radius: var(--radius-lg); /* 14 */
box-shadow: var(--shadow-xs);
overflow: hidden;
transition: transform var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out);
}
.mvi-ens:hover,
.mvi-ens:focus-within {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
/* Foto-Link: wrappt das .mvi-ens__photo-Div in einen Anchor — Klick aufs
Bild öffnet die jeweilige Ensemble-Detailseite (Aktive Kapelle /
Jugendkapelle). Analog zu .mvi-card__photo-link in S-4. */
.mvi-ens__photo-link {
display: block;
text-decoration: none;
color: inherit;
-webkit-tap-highlight-color: transparent;
}
.mvi-ens__photo-link:focus-visible {
outline: 2px solid var(--brand-gold);
outline-offset: 2px;
}
/* Foto: full-bleed Card-Top, aspect-ratio 4/3 Desktop, 16/9 ab Tablet.
Wird als background-image über Inline-Style vom Snippet gesetzt — kein
![]()
, damit object-fit / object-position trivial steuerbar bleibt und der
Browser direkt mit background-size cover arbeitet. */
.mvi-ens__photo {
width: 100%;
aspect-ratio: 4 / 3;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: var(--neutral-sand); /* Fallback bei ladenden Bildern */
}
/* JUKA-Foto: `background-size: 115%` (statt cover) zoomt das 4:3-Bild
leicht hinein → auch auf Desktop (4:3-Box) entsteht jetzt 15 % Overflow
zum Pannen (vorher cover = kein Desktop-Crop). `background-position:
60% 15%` schiebt den Ausschnitt nach rechts (weg von den Fahrrädern am
linken Rand) und nach oben (der „JUKA"-Banner bleibt sichtbar). 115 %
per Crop-Sim als Optimum gewählt: 120 % schnitt den Banner oben an,
110 % ließ die Fahrräder zu sichtbar. Scoped via aria-label, damit
Aktive Kapelle + S-4-Karten (.mvi-photo) unberührt bleiben. */
.mvi-ens__photo[aria-label*="Jugendkapelle"] {
background-size: 115%;
background-position: 60% 15%;
}
/* Body-Block: Padding 48 (Desktop) / 32 (Tablet) / 24 (Mobile), kleine vertikale
Gap zwischen Role/Title/Lead/Stats. */
.mvi-ens__body {
display: flex;
flex-direction: column;
gap: var(--space-3); /* 12 — Preview misst 14, --space-3 hält 8-Grid */
padding: var(--space-7); /* 48 */
}
/* Role-Badge: gleicher Eyebrow-Stil wie Section-Eyebrow, mit eigenem
::before-Strich in der jeweiligen Modifier-Farbe (currentColor). Section-
Eyebrow nutzt 28 × 1.5 in gold; Card-Eyebrow ist 24 × 1.5 — kürzer, weil
im engeren Card-Body kompakter wirkend. Modifier --bordeaux/--green setzt
die Color, der Strich erbt sie via currentColor. */
.mvi-ens__role {
display: inline-flex;
align-items: center;
gap: var(--space-2); /* 8 — kompakter als Section-Default 12, entspricht Preview-Wert 10 (auf nächstes Token gerundet) */
align-self: flex-start;
font-family: var(--font-body);
font-size: var(--fs-xs); /* 12 — Preview hat 11, Token-Annäherung wie Section-Eyebrow Mobile */
font-weight: 700;
text-transform: uppercase;
letter-spacing: var(--ls-eyebrow); /* 0.16em */
color: var(--brand-bordeaux);
margin: 0;
}
.mvi-ens__role::before {
content: "";
display: block;
width: 24px;
height: var(--border-w-default); /* 1.5 */
background: currentColor;
flex: 0 0 auto;
}
.mvi-ens__role--bordeaux { color: var(--brand-bordeaux); }
.mvi-ens__role--green { color: var(--brand-green); }
/* Card-Title: Spectral wie Section-Title, aber kleiner (Card-Hierarchie).
32 / 26 / 24 entsprechen Preview-Werten — analog zur Foundation .mvi-section__title
(44/36/28) sind das custom px-Werte (off Token-Set), weil das Mockup
spezifische Schriftgrößen pro Stufe wählt.
`hyphens: auto` erlaubt Silbentrennung (z.B. „Jugend-/kapelle") bei sehr
schmalen Cards. Tritt nur am Übergang Mobile→Tablet auf (VP 521–539,
Card-Body-Inner 159–168 px, „Jugendkapelle" natürliche Breite 168 px).
Ohne Hyphenation bräche der Browser hart im Wort um (overflow-wrap:
break-word vom Cassiopeia-Default). `lang="de-de"` ist auf
gesetzt → der Browser nutzt das deutsche Silbentrennungs-Wörterbuch. */
.mvi-ens__title {
margin: 0;
font-family: var(--font-display);
font-size: 32px;
font-weight: 600;
line-height: var(--lh-tight); /* 1.15 */
letter-spacing: var(--ls-tight); /* -0.005em */
color: var(--brand-bordeaux);
hyphens: auto;
-webkit-hyphens: auto;
/* Wort min 7 Zeichen, mind. 4 vor und 3 nach dem Strich. Verhindert, dass
der Browser kurze Wörter wie „Aktive" (6) in „Akti-ve" zerlegt — bei
mehrwortigen Titeln wird stattdessen am Leerzeichen umbrochen
(„Aktive | Kapelle"). Lange Komposita ohne Leerzeichen wie
„Jugendkapelle" (13) werden weiterhin sauber an Silbe getrennt
(„Jugend-kapelle"). */
hyphenate-limit-chars: 7 4 3;
-webkit-hyphenate-limit-before: 4;
-webkit-hyphenate-limit-after: 3;
}
/* Lead-Text: gleiche Lesetypografie wie .mvi-card__lead in Aktuelles. */
.mvi-ens__lead {
margin: 0;
font-family: var(--font-body);
font-size: var(--fs-base); /* 16 */
font-weight: 400;
line-height: var(--lh-normal); /* 1.55 */
color: var(--fg-primary);
}
/* Stats-Cluster: 3 Spalten flex row mit fester Gap. Margin-top trennt vom
Lead-Block; border-top + padding-top setzen einen visuellen Trennstrich
zwischen Beschreibung und Stats (Preview-Match: 1 px border-subtle,
padding 16).
`flex-wrap: wrap` schützt vor Overflow bei langen Stat-Werten
(„Freitags" + „1896" zusammen sprengen bei Tablet-Range 521–833 die
Card-Breite). Bei Overflow bricht das letzte Stat auf eine zweite Zeile;
`row-gap` ist kleiner als `column-gap`, damit der vertikale Wrap-Abstand
nicht überzogen wirkt. Preview hat `nowrap` — funktioniert dort nur mit
sehr kurzen Stat-Werten (60/28/150). */
.mvi-ens__stats {
display: flex;
flex-direction: row;
flex-wrap: wrap;
column-gap: var(--space-5); /* 24 */
row-gap: var(--space-3); /* 12 */
margin-top: var(--space-2); /* 8 */
padding-top: var(--space-4); /* 16 */
border-top: var(--border-w-thin) solid var(--border-subtle);
}
/* Einzelne Stat: vertikal gestapelt — große Zahl/Kurzwert oben, Label klein
darunter. Inline-flex erlaubt natürliche Min-Width, kein Stretch. */
.mvi-ens__stat {
display: inline-flex;
flex-direction: column;
gap: var(--space-1); /* 4 */
}
/* Number/Headline-Slot: 28 px Spectral 600. Negative letter-spacing -0.01em
per --ls-display für dichtere Optik (Preview misst -0.02em — wir nutzen
den nächstgelegenen Token). */
.mvi-ens__stat-num {
font-family: var(--font-display);
font-size: var(--fs-xl); /* 28 */
font-weight: 600;
line-height: 1;
letter-spacing: var(--ls-display); /* -0.01em */
color: var(--fg-primary);
}
/* Label-Slot: 11 px (off Token-Set wie Eyebrow Mobile), getrackt 0.08em.
Color = muted-grey, gleicher Token wie Termine-Tile-Meta. */
.mvi-ens__stat-lbl {
font-family: var(--font-body);
font-size: 11px;
font-weight: 400;
line-height: 1.4;
letter-spacing: 0.08em; /* zwischen --ls-wide 0.04 und --ls-eyebrow 0.16 */
color: var(--fg-muted);
}
/* Mehr-erfahren-Link: reiner Text-Link am Ende des Bodys. Analog .mvi-card__link
(Aktuelles) in Farbe + Schrift, aber OHNE border-bottom (User-Vorgabe).
Hover wechselt nur die Farbe — kein zusätzliches Unterstrich-Element. */
.mvi-ens__more {
align-self: flex-start;
margin-top: var(--space-2); /* 8 — Body-gap (12) + 8 = 20 zwischen Stats-Bottom und Link */
font-family: var(--font-body);
font-size: var(--fs-sm); /* 14 */
font-weight: 600;
color: var(--brand-bordeaux);
text-decoration: none;
white-space: nowrap;
-webkit-tap-highlight-color: transparent;
transition: color var(--dur-fast) var(--ease-out);
}
.mvi-ens__more:hover,
.mvi-ens__more:focus-visible {
color: var(--brand-bordeaux-deep);
}
.mvi-ens__more:focus-visible {
outline: 2px solid var(--brand-gold);
outline-offset: 3px;
}
/* Responsive Tablet (521–1050) ------------------------------------------- */
@media (max-width: 1050px) {
/* Photo wechselt auf 16/9 — mehr Breite, kompaktere Karten-Höhe, weil
Karten auf Tablet nebeneinander sehr schmal werden (~300 px). */
.mvi-ens__photo {
aspect-ratio: 16 / 9;
}
/* Grid-Gap auf Tablet enger (24 statt 32) — bei 300-px-Karten wirkt 32 zu
viel Luft. Preview-Match. */
.mvi-ensembles {
gap: var(--space-5); /* 24 */
}
.mvi-ens__body {
padding: var(--space-6); /* 32 */
}
.mvi-ens__title {
font-size: 26px;
}
/* Stat-num kleiner auf Tablet — Preview reduziert von 28 auf 24, damit die
3 Stats nebeneinander in der schmalen Card nicht überlaufen. */
.mvi-ens__stat-num {
font-size: 24px;
}
/* Section-Sub im Header analog zu Aktuelles ausblenden — Eyebrow + Title
reichen auf schmaleren Viewports, der Sub-Lead drückt sonst die Karten
unnötig nach unten. */
.mvi-section--ensembles .mvi-section__sub {
display: none;
}
}
/* Responsive Mobile (≤ 520) ----------------------------------------------- */
@media (max-width: 520px) {
.mvi-ensembles {
grid-template-columns: 1fr;
gap: var(--space-5); /* 24 */
}
.mvi-ens__body {
padding: var(--space-5); /* 24 — Preview misst 22, --space-5 hält 8-Grid */
}
.mvi-ens__title {
font-size: 24px;
}
/* Stat-num auf Mobile noch eine Stufe kleiner (22 statt 24) — Preview-Match. */
.mvi-ens__stat-num {
font-size: 22px;
}
}
/* === PHASE 3 · MUSIKALISCHE AUSBILDUNG (S-6) ============================== */
/* Statischer mod_custom-Block auf Position bottom-b (Snippet docs/ausbildung.html).
Drei Stufen-Karten (Früherziehung / Blockflöte / Instrumentalausbildung) mit
Badge (AB X JAHRE — dreigeteilt: kleines „AB" / große Zahl / „Jahre"), Title,
Lead-Text und Mehr-erfahren-Link. Sektion-Background ist sand, hebt sich
vom weißen Page-Hintergrund ab und gruppiert die drei Stufen optisch. */
/* Cassiopeia card-chrome Neutralizer für bottom-b (analog top-a/top-b und
bottom-a). Joomla wrappt mod_custom in . */
body.view-featured .container-bottom-b > .card,
body.view-featured .container-bottom-b > .card > .card-body {
background: transparent;
border: 0;
padding: 0;
margin: 0;
box-shadow: none;
border-radius: 0;
}
/* Edge-to-Edge-Breakout — gleiches Pattern wie Termine/Aktuelles/Ensembles. */
body.view-featured .container-bottom-b .mvi-section--ausbildung {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
/* Sektion-Hintergrund Sand — unterscheidet diese „Stufen"-Sektion vom weißen
Ensembles-Block direkt darüber. */
.mvi-section--ausbildung {
background: var(--bg-surface-warm); /* sand #efe7d6 */
}
/* Grid-Wrapper: 3 Spalten auf Desktop + Tablet, 1 Spalte auf Mobile.
Card-Breiten sind gleichmäßig (kein Content-Sizing) — alle drei Stufen
bekommen visuell denselben Raum. */
.mvi-ausbildung-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-5); /* 24 */
}
/* Karte: weiße Surface mit dünner Border subtil + dickem Gold-Top-Akzent.
Border-Setup ist identisch zur Termine-Tile-Sprache (`.mvi-event-tile` hat
ebenfalls 1px subtle umlaufend + 3px Modifier-Akzent oben) — die Gold-
Linie hebt die Ausbildungs-Stufe als „Akzent-Block" hervor und harmoniert
mit dem Gold-deep der Altersziffer im Badge. */
.mvi-ausbildung-card {
display: flex;
flex-direction: column;
gap: var(--space-3); /* 12 */
background: var(--bg-surface);
border: var(--border-w-thin) solid var(--border-subtle);
border-top: var(--border-w-strong) solid var(--brand-gold);
border-radius: var(--radius-md); /* 8 */
box-shadow: var(--shadow-xs);
padding: var(--space-6); /* 32 */
transition: transform var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out);
}
.mvi-ausbildung-card:hover,
.mvi-ausbildung-card:focus-within {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
/* Age-Badge: drei-Spans-Cluster mit gemeinsamer Baseline (kleines „AB"
versetzt zur großen Zahl). flex row mit gap 8 hält die Spans dicht
beieinander; align-items: baseline sorgt für optisches „auf einer Linie"
trotz drei verschiedener Font-Sizes. */
.mvi-ausbildung-card__age {
display: flex;
flex-direction: row;
align-items: baseline;
gap: var(--space-2); /* 8 */
}
/* "ab" → AB: kleines Source-Sans-Label in Muted-Grey, uppercase + getrackt.
13 px ist off-Token (Preview-Wert), nutzen wir 1:1 wie Stat-Lbl-Pattern. */
.mvi-ausbildung-card__age-prefix {
font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
line-height: 1.55;
letter-spacing: var(--ls-wide); /* 0.04em */
text-transform: uppercase;
color: var(--fg-muted);
}
/* Die Altersziffer ist das visuelle Highlight: 56 px Spectral 600 in
Gold-Deep. Verwendet --ls-display (-0.01em) als nächstgelegener Token
zum Preview's -0.02em (siehe Stat-Num-Decision in S-5). */
.mvi-ausbildung-card__age-num {
font-family: var(--font-display);
font-size: 56px;
font-weight: 600;
line-height: 1;
letter-spacing: var(--ls-display); /* -0.01em */
color: var(--brand-gold-deep);
}
/* „Jahre" — kleinere Spectral-Variante in derselben Gold-Farbe. */
.mvi-ausbildung-card__age-unit {
font-family: var(--font-display);
font-size: var(--fs-md); /* 18 */
font-weight: 500;
line-height: 1.55;
color: var(--brand-gold-deep);
}
/* Card-Title: Spectral wie Section-Title, kleiner (Card-Hierarchie).
22 / 20 / 20 entspricht Preview-Werten — die Tablet+Mobile-Reduktion auf
20 hält die Card kompakt auf engen Viewports. */
.mvi-ausbildung-card__title {
margin: 0;
font-family: var(--font-display);
font-size: var(--fs-lg); /* 22 */
font-weight: 600;
line-height: var(--lh-snug); /* 1.3 — Preview 1.25, Token-Annäherung */
color: var(--brand-bordeaux);
/* Konsistent zur Ensembles-Card: lange Komposita („Instrumentalausbildung")
werden bei sehr schmalen Viewports an Silben getrennt statt mitten im
Wort gebrochen. Siehe DECISIONS „S-5 Title-Wrap-Fix". */
hyphens: auto;
-webkit-hyphens: auto;
hyphenate-limit-chars: 7 4 3;
-webkit-hyphenate-limit-before: 4;
-webkit-hyphenate-limit-after: 3;
}
/* Lead-Text: dieselbe Lese-Typografie wie .mvi-card__lead (Aktuelles), aber
1 Punkt kleiner (14 statt 16) — der Card-Body hier ist kompakter. */
.mvi-ausbildung-card__text {
margin: 0;
font-family: var(--font-body);
font-size: var(--fs-sm); /* 14 */
font-weight: 400;
line-height: var(--lh-normal); /* 1.55 */
color: var(--fg-secondary);
}
/* Mehr-erfahren-Link: Foundation-Variante mit Bordeaux-Border-Bottom (anders
als .mvi-ens__more in S-5 — dort hat User explizit keinen Border verlangt;
hier folgen wir dem Preview-Design, das den Border zeigt). */
.mvi-ausbildung-card__link {
align-self: flex-start;
margin-top: var(--space-1); /* 4 — Card-Gap deckt schon 12 ab, kleine Zusatz-Distanz */
font-family: var(--font-body);
font-size: var(--fs-sm); /* 14 */
font-weight: 600;
color: var(--brand-bordeaux);
text-decoration: none;
border-bottom: var(--border-w-thin) solid var(--brand-bordeaux);
padding: 0 0 2px;
white-space: nowrap;
-webkit-tap-highlight-color: transparent;
transition: color var(--dur-fast) var(--ease-out),
border-color var(--dur-fast) var(--ease-out);
}
.mvi-ausbildung-card__link:hover,
.mvi-ausbildung-card__link:focus-visible {
color: var(--brand-bordeaux-deep);
border-bottom-color: var(--brand-bordeaux-deep);
}
.mvi-ausbildung-card__link:focus-visible {
outline: 2px solid var(--brand-gold);
outline-offset: 3px;
}
/* Responsive Tablet (521–899) -------------------------------------------- */
/* Grid kollabiert ab VP < 900 auf single-column. Bewusste Abweichung vom
globalen Projekt-Breakpoint (1050): bei VP 900–1050 sind 3 schmale Cards
à ~270 px noch lesbar und harmonisch — single-column dort würde die Cards
unnötig breit machen. Bei VP < 900 (insb. 600–768) wären 3 Cards mit
minmax(0, 1fr) so eng, dass Titel mitten im Wort umbrochen würden;
single-column gibt jedem Card die volle Inner-Breite. */
@media (max-width: 899px) {
.mvi-ausbildung-grid {
grid-template-columns: 1fr;
gap: var(--space-4); /* 16 — vertikale Lücke zwischen den 3 gestapelten Cards */
}
.mvi-ausbildung-card {
padding: var(--space-5); /* 24 */
}
.mvi-ausbildung-card__title {
font-size: var(--fs-md); /* 18 — Token-Annäherung zum Preview-Tablet-Wert */
}
/* Section-Sub im Header analog zu Aktuelles/Ensembles ausblenden — auf
schmaleren Viewports reichen Eyebrow + Title als Section-Intro. */
.mvi-section--ausbildung .mvi-section__sub {
display: none;
}
}
/* Responsive Mobile (≤ 520) ----------------------------------------------- */
/* Mobile erbt Single-Column-Grid + Card-Padding + Title-Size aus dem Tablet-
Block. Nur die age-num-Größe variiert (Mobile etwas kleiner, da Body-
Padding hier 24 ist und mehr vertical-rhythm ausgleicht). */
@media (max-width: 520px) {
.mvi-ausbildung-card__age-num {
font-size: 48px;
}
}
/* === PHASE 3 · GRID-EXTENSION für bottom-c / bottom-d ==================== */
/* Cassiopeia's site-grid `grid-template-areas` kennt nur bot-a und bot-b.
Damit unsere zusätzlichen Positionen bottom-c (Seefest, S-7) und bottom-d
(Sponsoren, S-8) im Grid landen — und nicht auf `grid-area: auto`
springen, was sie überlappend mit top-a rendern würde — erweitern wir die
Grid-Areas explizit. Sowohl Mobile (Default) als auch Desktop (≥992px)
Variante bekommen die zwei neuen Zeilen. */
@supports (display: grid) {
.site-grid {
grid-template-areas:
". banner banner banner banner ."
". top-a top-a top-a top-a ."
". top-b top-b top-b top-b ."
". comp comp comp comp ."
". side-r side-r side-r side-r ."
". side-l side-l side-l side-l ."
". bot-a bot-a bot-a bot-a ."
". bot-b bot-b bot-b bot-b ."
". bot-c bot-c bot-c bot-c ."
". bot-d bot-d bot-d bot-d .";
}
@media (min-width: 992px) {
.site-grid {
grid-template-areas:
". banner banner banner banner ."
". top-a top-a top-a top-a ."
". top-b top-b top-b top-b ."
". side-l comp comp side-r ."
". bot-a bot-a bot-a bot-a ."
". bot-b bot-b bot-b bot-b ."
". bot-c bot-c bot-c bot-c ."
". bot-d bot-d bot-d bot-d .";
}
}
}
.container-bottom-c { grid-area: bot-c; }
.container-bottom-d { grid-area: bot-d; }
/* Cassiopeia setzt `.container-top-a/b, .container-bottom-a/b > * { flex: 1 }`
nur für die Default-Positions. Ohne diese Regel collapsed unsere `.card`
im container-bottom-c/d auf width 0 (flex-child ohne flex-grow). Wir
spiegeln die Regel 1:1 für die neuen Positions. */
.container-bottom-c, .container-bottom-d {
position: relative;
}
.container-bottom-c > *,
.container-bottom-d > * {
flex: 1;
margin: 0.5em 0;
}
@media (max-width: 991.98px) {
.container-bottom-c, .container-bottom-d {
flex-direction: column;
}
.container-bottom-c > *,
.container-bottom-d > * {
flex: 0 auto;
}
}
/* === PHASE 3 · SEEFEST-PROMO (S-7) ========================================= */
/* mod_custom „Seefest-Promo" auf Position bottom-c. Vollbreiter Foto-Banner
mit Dunkel-Scrim. FESTE Höhe (542/480/420) + overflow:hidden → Content
wird bei Overflow geclippt statt die Sektion zu strecken (verhindert den
scheinbaren Zoom: bei min-height wuchs die Sektion auf >800px und der
cover-Crop wirkte herangezoomt). Desktop ≥1051: Eyebrow + Titel +
kompaktes 3-Spalten-Programm-Grid + Ghost-Button, unten ausgerichtet.
Tablet/Mobile ≤1050: Programm-Grid ausgeblendet → Kurzversion (Eyebrow +
Titel + Info-Zeile + Button), zentriert. Markup: docs/seefest.html.
Foto banner-gecroppt (1920×788, JPG ~544 KB q88) → object-fit: cover,
object-position center 60% (untere Bildhälfte = mehr Publikum). */
/* Cassiopeia card-chrome Neutralizer für bottom-c (analog bottom-d / S-8). */
body.view-featured .container-bottom-c > .card,
body.view-featured .container-bottom-c > .card > .card-body {
background: transparent;
border: 0;
padding: 0;
margin: 0;
box-shadow: none;
border-radius: 0;
}
/* Edge-to-Edge-Breakout (volle Viewport-Breite, wie Sponsoren-Strip). */
body.view-featured .container-bottom-c .mvi-section--seefest {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
/* Die SEKTION richtet vertikal aus (column-flex + justify-content:center),
nicht das Inner. Frühere Variante (flex-row + align-items:stretch +
inner height:100%) kollabierte das Inner in diesem Cassiopeia-Card-
Kontext auf ~414 px → Eyebrow oben geclippt, Leerraum unten. bg/scrim
sind position:absolute → bleiben aus dem Flex-Flow. */
.mvi-promo {
position: relative;
display: flex;
flex-direction: column;
justify-content: center; /* vertikal zentriert — gleichmäßiger Abstand oben/unten (alle Viewports) */
height: 542px; /* FEST (nicht min-height) — Desktop */
/* .mvi-section vererbt `padding: 64 48` + `box-sizing: border-box`.
Bei fester Höhe würde das die Flex-Content-Box auf 542-128 = 414 px
stauchen (Inner overflowt → Eyebrow geclippt, 64 px Leerraum unten).
Full-Bleed-Banner braucht kein Section-Padding — Inner bringt eigenes. */
padding: 0;
overflow: hidden; /* Content-Overflow wird geclippt */
isolation: isolate; /* eigener Stacking-Context für Scrim/Content */
}
/* Hintergrund-Foto als Cover-Layer (nur JPG, Option B — kein WebP).
Robust gegen beide Markup-Varianten: `.mvi-promo__bg` kann direkt das
![]()
sein ODER ein -Wrapper mit innerem ![]()
(je nachdem,
welches Snippet im mod_custom-Modul steckt). Beide werden absolut auf
den Banner-Bereich gelegt + object-fit: cover. object-position
center 60% → untere Bildhälfte (mehr Publikum, weniger Himmel). Kein
transform/scale — der frühere „Zoom" kam allein vom Höhen-Bug. */
.mvi-promo__bg {
position: absolute;
inset: 0;
z-index: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 60%;
}
.mvi-promo__bg img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 60%;
}
/* Dunkel-Wash: links dicht (Textzone lesbar), rechts klar (See sichtbar).
Farbe = --neutral-anthracite (#1f1c18) als rgba — Token kann nicht in
rgba() interpoliert werden, daher Literal mit dokumentierter Herkunft. */
.mvi-promo__scrim {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(
110deg,
rgba(31, 28, 24, 0.78) 0%,
rgba(31, 28, 24, 0.40) 60%,
rgba(31, 28, 24, 0.10) 100%
);
}
.mvi-promo__inner {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
gap: var(--space-5); /* 24 — Content / Programm / Button */
width: 100%;
max-width: var(--container-wide); /* 1320 */
margin: 0 auto;
padding: var(--space-5) var(--space-7); /* 24 / 48 — vertikal knapp, damit alles in 542 ohne Clip passt */
}
/* Info-Zeile + Kurztext — nur in der Tablet/Mobile-Kurzversion sichtbar
(Desktop zeigt stattdessen das Programm-Grid). */
.mvi-promo__where {
display: none;
margin: 0;
font-family: var(--font-body);
font-size: var(--fs-base); /* 16 */
font-weight: 500;
color: var(--neutral-cream);
}
.mvi-promo__intro {
display: none;
margin: var(--space-3) 0 0; /* 12 — Abstand zur Info-Zeile */
max-width: 480px;
font-family: var(--font-body);
font-size: 15px; /* zwischen fs-sm 14 und fs-base 16 — Spec */
font-weight: 400;
line-height: var(--lh-normal); /* 1.55 */
color: rgba(250, 246, 239, 0.92); /* --neutral-cream (#faf6ef) @ 0.92 */
}
/* ── Content (Eyebrow + Titel) ── */
.mvi-promo__eyebrow {
display: block;
font-family: var(--font-body);
font-size: var(--fs-xs); /* 12 */
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.16em; /* Preview-Match */
color: var(--brand-gold-soft);
}
.mvi-promo__title {
margin: var(--space-4) 0 0; /* 16 Atem zum Eyebrow */
font-family: var(--font-display);
font-size: 56px; /* über fs-Skala — Preview-Messung Desktop */
font-weight: 600;
line-height: 1.08;
color: var(--neutral-cream);
}
.mvi-promo__title em {
font-style: normal;
font-weight: 400;
color: var(--brand-gold-soft);
}
/* ── 3-Spalten-Programm-Grid — Desktop ≥1051 (kompakt, für feste 542 px).
Tablet/Mobile: komplett ausgeblendet (siehe Media-Queries). ── */
.mvi-promo__program {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px; /* Spec v3 — war 24 */
}
.mvi-promo__col {
display: flex;
flex-direction: column;
background: rgba(255, 255, 255, 0.08); /* leicht aufgehellt auf dunklem Grund */
border: var(--border-w-thin) solid rgba(255, 255, 255, 0.15);
border-radius: var(--radius-md); /* 8 */
padding: 12px 16px; /* Spec v3 — kompakter (war 16/20) */
}
.mvi-promo__day {
display: block;
margin-bottom: var(--space-2); /* 8 — kompakter (war 12) */
font-family: var(--font-body);
font-size: 10px; /* Spec v3 */
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--brand-gold-soft);
}
.mvi-promo__slot {
display: flex;
flex-direction: column;
gap: 2px; /* enge Zeilen innerhalb eines Blocks */
}
/* Trennlinie zwischen Block A und B — nur Sonntag hat zwei Slots. */
.mvi-promo__slot + .mvi-promo__slot {
margin-top: var(--space-2); /* 8 */
padding-top: var(--space-2); /* 8 */
border-top: var(--border-w-thin) solid rgba(255, 255, 255, 0.1);
}
.mvi-promo__time {
font-family: var(--font-body);
font-size: 11px; /* Spec v3 */
font-weight: 400;
color: var(--neutral-stone);
}
.mvi-promo__act-title {
margin: 0;
font-family: var(--font-body);
font-size: 14px; /* Spec v3 */
font-weight: 600;
color: var(--neutral-cream);
}
/* Untertitel (nur „Käthe Kächele") — in der Spec ohne eigene Stilangabe;
an die Acts-Zeile angelehnt + kursiv zur Abgrenzung vom Act-Titel. */
.mvi-promo__act-sub {
margin: 0;
font-family: var(--font-body);
font-size: 12px;
font-weight: 400;
font-style: italic;
color: var(--neutral-stone);
}
.mvi-promo__acts {
margin: 0;
font-family: var(--font-body);
font-size: 12px; /* Spec v3 */
font-weight: 400;
line-height: 1.4; /* kompakter für mehrzeilige Act-Listen */
color: var(--neutral-stone);
}
.mvi-promo__price {
margin-top: 2px;
font-family: var(--font-body);
font-size: 11px; /* Spec v3 */
font-weight: 400;
color: var(--brand-gold-soft);
}
/* Ghost-Button: heller Glas-Look auf dunklem Grund. Bewusst Cream-Text,
NICHT Bordeaux (Preview-Mockup zeigte Bordeaux auf dunklem Foto =
unlesbar — als Mockup-Bug eingestuft, Christoph bestätigt Cream).
Linksbündig unter dem Programm-Grid. */
.mvi-promo .mvi-btn--ghost {
align-self: flex-start; /* linksbündig, kein Stretch */
width: fit-content; /* nie full-width (auch nicht Mobile) */
background: rgba(255, 255, 255, 0.12);
border: var(--border-w-thin) solid rgba(255, 255, 255, 0.6);
border-radius: var(--radius-md); /* 8 */
padding: 14px 22px; /* Preview-Messung */
font-size: var(--fs-sm); /* 14 */
font-weight: 600;
color: var(--neutral-cream);
transition: background-color 220ms var(--ease-out);
}
.mvi-promo .mvi-btn--ghost:hover {
background: rgba(255, 255, 255, 0.22);
}
.mvi-promo .mvi-btn--ghost:focus-visible {
outline: 2px solid var(--brand-gold);
outline-offset: 2px;
}
/* ── Tablet ≤ 1050: Kurzversion — Programm-Grid raus, Info-Zeile rein,
Content vertikal zentriert, feste Höhe 480 ── */
@media (max-width: 1050px) {
.mvi-promo {
height: 480px; /* justify-content:center bereits in der Basis */
}
.mvi-promo__inner {
gap: var(--space-4); /* 16 */
padding: var(--space-7); /* 48 */
}
.mvi-promo__program {
display: none; /* Programm-Grid nur Desktop */
}
.mvi-promo__where,
.mvi-promo__intro {
display: block;
}
.mvi-promo__title {
font-size: 40px; /* Preview-Messung Tablet */
}
}
/* ── Mobile ≤ 520: feste Höhe 420, Titel kleiner, engeres Padding ── */
@media (max-width: 520px) {
.mvi-promo {
height: 420px;
}
.mvi-promo__inner {
padding: var(--space-6); /* 32 */
}
.mvi-promo__title {
font-size: 30px; /* Preview-Messung Mobile */
}
}
/* === PHASE 3 · SPONSOREN-STRIP (S-8) ======================================= */
/* Wird vom mod_custom Layout-Override `_:sponsoren`
(templates/cassiopeia_mvi/html/mod_custom/sponsoren.php) gerendert.
Position bottom-d. Der Strip listet alle Bilddateien aus
/images/02_sponsoren/ in zufälliger Reihenfolge auf — horizontaler
Scroll-Strip analog Termine-Tile (S-3). */
/* Cassiopeia card-chrome Neutralizer für bottom-d (analog top-a/b und
bottom-a/b). */
body.view-featured .container-bottom-d > .card,
body.view-featured .container-bottom-d > .card > .card-body {
background: transparent;
border: 0;
padding: 0;
margin: 0;
box-shadow: none;
border-radius: 0;
}
/* Edge-to-Edge-Breakout */
body.view-featured .container-bottom-d .mvi-section--sponsoren {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
/* Section-Hintergrund Sand — gleiche Töne wie Ausbildungs-Sektion;
gruppiert die Sponsoren visuell als „Ausklang"-Block der Startseite. */
.mvi-section--sponsoren {
background: var(--bg-surface); /* weiß #ffffff — sicherer Farbwechsel Ausbildung(creme)→Sponsoren(weiß)→Footer(dunkel), unabhängig von der temporären Seefest-Sektion */
}
/* Sektion-Header ist kompakter als die anderen Phase-3-Sektionen:
- Eyebrow + Title-Block links, More-Link rechts
- Title ist KEIN großer Display-Heading, sondern eine 18px-Subline
(„Ein herzliches Dankeschön an alle…") — visuell unauffälliger,
damit die Logos den Fokus behalten
- margin-bottom 24 (statt Default 32) */
.mvi-section--sponsoren .mvi-section__head {
align-items: center;
margin-bottom: var(--space-5); /* 24 */
}
.mvi-section--sponsoren .mvi-section__title {
font-family: var(--font-display);
font-size: var(--fs-md); /* 18 */
font-weight: 500;
font-style: italic; /* Preview-Match — gibt der Dankes-Subline einen warmen Ton */
line-height: var(--lh-normal); /* 1.55 — exakt Preview */
color: var(--fg-secondary); /* anthrazit-grau, nicht bordeaux */
letter-spacing: var(--ls-normal);
margin-top: var(--space-2); /* 8 — kleiner Atem zwischen Eyebrow und Sub-Text, matched Preview */
}
/* Sponsor-Strip: Wrapper mit overflow:hidden, innerer Track läuft per
CSS-Animation (`mvi-marquee`) kontinuierlich nach links. Der Track enthält
2 × Original-Set (Klon im PHP, aria-hidden). Animation animiert
`translate3d(0)` → `translate3d(-50%)` — bei -50% steht das Klon-Set
genau an der Original-Position, der CSS-`infinite`-Loop springt zurück
zu 0 visuell nahtlos.
Geschwindigkeit: JS berechnet `--carousel-duration` aus
`trackHalfWidth / 80 px/sec` und setzt es als Inline-Style auf dem
Wrapper. Resize → debounced neu berechnet. Damit ist die gefühlte
Geschwindigkeit auf allen Viewports gleich (~80 px/s).
Hover/Focus-Within pausiert via `.is-paused`-Klasse;
`prefers-reduced-motion` stoppt die Animation komplett (CSS-only). */
.mvi-sponsor-strip {
position: relative;
overflow: hidden;
width: 100%;
/* Vertikaler Padding-Buffer: gibt Card-Hover-Transform (translateY -1)
und Focus-Outline (2 px solid gold + 2 px offset) Platz oben/unten.
Ohne diesen Puffer würde overflow:hidden den Outline-Ring auf dem
oberen+unteren Card-Rand abschneiden. Horizontal bleibt der Clip
hart am Border-Edge — das Marquee-Looping funktioniert unverändert,
weil padding ON the inside of the clip-region wirkt. */
padding: var(--space-1) 0; /* 4 px vertical */
/* Default für den Fall, dass JS nicht oder noch nicht durchlief.
100 s entspricht ~890 px (≈ ein gemittelter Track-Halb-Wert für
ein Vereins-Logo-Set) — Browser fängt damit minimal-sanft an,
JS überschreibt sofort mit der echten Berechnung. */
--carousel-duration: 100s;
}
.mvi-sponsor-strip:focus-visible {
outline: 2px solid var(--brand-gold);
outline-offset: 4px;
border-radius: var(--radius-sm);
}
.mvi-sponsor-strip__track {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 14px; /* Preview-Wert, off-Grid */
width: max-content; /* Track = Original × 2 breit */
will-change: transform;
animation: mvi-marquee var(--carousel-duration, 100s) linear infinite;
/* Touch-Action lässt vertikales Scrollen der Seite passieren — User soll
den Strip nicht mit dem Daumen wegscrollen müssen, wenn er die Seite
scrollen will. */
touch-action: pan-y;
}
@keyframes mvi-marquee {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
/* Hover-/Focus-Within-Pause: User-Cursor auf dem Strip pausiert die
Animation, damit Tooltips lesbar bleiben und Klicks auf Logos präzise
möglich sind. */
.mvi-sponsor-strip:hover .mvi-sponsor-strip__track,
.mvi-sponsor-strip.is-paused .mvi-sponsor-strip__track {
animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
/* Stoppt die CSS-Animation komplett — Track steht still bei
translate3d(0). Inhalt bleibt voll lesbar, User kann manuell mit
Prev/Next bedienen. */
.mvi-sponsor-strip__track {
animation: none !important;
transform: translate3d(0, 0, 0) !important;
}
}
/* Karussell wird ohne Bedienelemente ausgeliefert — kein Wrapper für
Prev/Next nötig. „Alle Sponsoren →" steht alleine rechts im Header.
Mobile-Hide liegt direkt auf der Foundation-Klasse (siehe Media-Query). */
/* Logo-Container ist eine eigenständige Card: weiße Surface mit dezenter
subtler Border und kompaktem Innen-Padding. Fix-Maße 120×90 — schmal +
leicht hoch (Hochformat-Tendenz), gibt jeder Marke einen visuell
prominenteren Platz als das vorherige 160×72-Querformat. Logos
unterschiedlicher Aspect-Ratios werden via `object-fit: contain` auf dem
`![]()
` egalisiert.
Hover-Effekt: nur `translateY(-1)` + `border-color: bordeaux` — KEIN
shadow-md-Lift wie bei den größeren Card-Typen (S-4/S-5/S-6). Begründung:
ein dutzend kleiner Cards nebeneinander mit Lift-Shadow wäre visuell
überfrachtet; Border-Color-Wechsel signalisiert Interaktivität subtiler. */
.mvi-sponsor-logo {
flex: 0 0 160px;
width: 160px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-surface);
border: var(--border-w-thin) solid var(--border-subtle);
border-radius: var(--radius-md); /* 8 */
padding: var(--space-2); /* 8 — Inner 144×84, gibt Logo viel Fläche */
transition: transform var(--dur-base) var(--ease-out),
border-color var(--dur-base) var(--ease-out);
}
.mvi-sponsor-logo:hover,
.mvi-sponsor-logo:focus-within {
transform: translateY(-1px);
border-color: var(--brand-bordeaux);
}
.mvi-sponsor-logo img {
max-width: 100%;
/* Card-Inner ist 144×84 (160×100 minus 2×8 padding). max-height 64 nutzt
~76 % der Inner-Höhe — Logo füllt den verfügbaren Platz gut aus,
hochformatige Marken wirken kräftig, querformatige bleiben über
max-width: 100% begrenzt. */
max-height: 64px;
width: auto;
height: auto;
object-fit: contain;
/* Leichter Saturate-Dämpfer (Preview-Wert): Logos in unterschiedlichen
Farbintensitäten werden visuell angeglichen, ohne sie zu entfärben.
Auf Hover kommt die volle Sättigung zurück. */
filter: saturate(0.95);
transition: filter var(--dur-base) var(--ease-out);
}
.mvi-sponsor-logo:hover img,
.mvi-sponsor-logo:focus-within img {
filter: saturate(1);
}
/* Responsive Tablet (521–1050) — Sektion-Header bleibt 2-spaltig, weil
More-Link kompakt rechts neben Title passt. Strip-Layout unverändert
(horizontaler Scroll). */
@media (max-width: 1050px) {
.mvi-section--sponsoren .mvi-section__title {
font-size: var(--fs-sm); /* 14 — Tablet kompakter */
line-height: var(--lh-normal);
}
}
/* Responsive Mobile (≤ 520) — User-Vorgabe: „Alle Sponsoren →"-Link
ausblenden (Karussell-Autoplay läuft trotzdem). Pattern analog
`.mvi-termine-actions` Mobile-Hide aus Termine/Aktuelles, hier direkt auf
der Foundation-Klasse `.mvi-section__more` innerhalb der Sponsoren-
Section, weil das Wrapper-Element nach dem Buttons-Entfernen entfällt.
Cards bleiben 160×72 — auf 390 px Viewport sind das ~2 Logos sichtbar
(Foundation-Mobile-Inner 342 / 174 per logo+gap = 1.96). */
@media (max-width: 520px) {
.mvi-section--sponsoren .mvi-section__head {
grid-template-columns: 1fr;
align-items: start;
}
.mvi-section--sponsoren .mvi-section__more {
display: none;
}
}
/* === PHASE 3 · FOOTER (S-9) ================================================ */
/* Statisch im index.php gerendert (S-9 Strategie 1). Dunkler Footer mit
Brand-Block links + 3 Nav-Spalten + Legal-Bar mit Admin-Link.
Foundation-Klassen `.mvi-footer*` neu eingeführt — sektionsspezifisch,
weil der Footer einen kontrastierenden dunklen Hintergrund hat. Die
Foundation `.mvi-section*` würde mit ihren cream-/sand-Defaults nicht
passen. */
.mvi-footer {
background: var(--neutral-anthracite); /* #1f1c18 */
color: var(--neutral-stone); /* #d9d2c4 — heller cream-grey für Lesbarkeit auf dunkel */
/* Padding: 48 oben+seitlich, 24 unten — User-Vorgabe (96 → 48), der
dicke schwarze Bereich oben wurde als zu groß empfunden. */
padding: var(--space-7) var(--space-7) var(--space-5); /* 48 48 24 */
width: 100%;
}
.mvi-footer__inner {
display: grid;
/* Fluide 2fr/1fr/1fr/1fr: Brand-Spalte doppelt so breit wie Nav-Spalten.
Bei VP 1280 mit gap 48 ergibt das exakt 416/208/208/208 px (Preview-
Match). Bei kleineren Desktop-Viewports schrumpfen alle Spalten
proportional — kein Overflow mehr (war Problem bei festem
`416 208 208 208`-Grid: 1184 px Soll, ab VP 1060 abwärts overflow). */
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: var(--space-7); /* 48 */
max-width: var(--container-wide); /* 1320 */
margin: 0 auto;
}
/* Brand-Block (links): Vereinsname als Display-Schrift + Adress-Paragraph
mit Telefon-Link und Vorsitzendem-Hinweis. */
.mvi-footer__brand {
display: flex;
flex-direction: column;
gap: var(--space-3); /* 12 */
}
.mvi-footer__brand-row {
display: flex;
align-items: baseline;
}
.mvi-footer__brand-name {
font-family: var(--font-display);
font-size: var(--fs-md); /* 18 */
font-weight: 600;
line-height: var(--lh-snug); /* ~1.55 (Preview misst 27.9/18) */
color: var(--brand-gold-soft); /* identisch zu Nav-H4-Titeln — Marken-Konsistenz */
}
.mvi-footer__addr {
margin: 0;
font-family: var(--font-body);
font-size: var(--fs-sm); /* 14 */
font-weight: 400;
line-height: var(--lh-loose); /* 1.6 — Preview misst 22.4/14 */
color: var(--neutral-stone);
}
/* Telefon-Link bekommt Gold-Soft-Akzent — passt zur H4-Farbe der Nav-
Spalten und macht die Telefonnummer als „Call-to-Action" prominent. */
.mvi-footer__addr a {
color: var(--brand-gold-soft); /* #d8b765 */
text-decoration: none;
transition: color var(--dur-fast) var(--ease-out);
}
.mvi-footer__addr a:hover,
.mvi-footer__addr a:focus-visible {
color: var(--brand-gold); /* etwas intensiver auf Hover */
}
/* Nav-Spalten: 3 Stück (Verein / Mitmachen / Service). H4-Titel oben in
uppercase-Gold, darunter gestapelte Block-Links in stone-color. */
.mvi-footer__col {
display: flex;
flex-direction: column;
}
.mvi-footer__col h4 {
margin: 0 0 var(--space-1); /* 0 0 4 */
font-family: var(--font-body);
font-size: var(--fs-xs); /* 12 */
font-weight: 700;
letter-spacing: var(--ls-eyebrow); /* 0.16em */
text-transform: uppercase;
color: var(--brand-gold-soft);
}
.mvi-footer__col a {
display: block;
padding: var(--space-1) 0; /* 4 vertical — komfortabler Tap-Target */
font-family: var(--font-body);
font-size: var(--fs-sm); /* 14 */
font-weight: 400;
color: var(--neutral-stone);
text-decoration: none;
transition: color var(--dur-fast) var(--ease-out);
}
.mvi-footer__col a:hover,
.mvi-footer__col a:focus-visible {
color: var(--brand-gold-soft);
}
/* Legal-Bar: feine Trennlinie + flex space-between auf Desktop/Tablet,
stack auf Mobile. */
.mvi-footer__legal {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-3); /* 12 */
max-width: var(--container-wide);
margin: var(--space-7) auto 0; /* 48 top — Abstand zur Nav darüber */
padding-top: var(--space-4); /* 16 */
/* Border-Top auf dunklem Hintergrund: rgba(255,255,255,0.06) ist visuell
eine sehr leichte Aufhellung des Anthracite — sichtbar als Linie, aber
nicht aufdringlich. Token-Set hat keine border-on-dark-Variante,
dieser Wert wird hier direkt verwendet (User-Spec). */
border-top: 1px solid rgba(255, 255, 255, 0.06);
font-family: var(--font-body);
font-size: var(--fs-xs); /* 12 */
color: var(--fg-muted); /* #8a8478 — Copyright dezent */
}
.mvi-footer__legal-links {
display: flex;
align-items: center;
gap: var(--space-5); /* 24 — gemütlicher Abstand zwischen Impressum/Datenschutz/Admin */
}
.mvi-footer__legal-links a {
color: var(--brand-gold-soft);
text-decoration: none;
transition: color var(--dur-fast) var(--ease-out);
}
.mvi-footer__legal-links a:hover,
.mvi-footer__legal-links a:focus-visible {
color: var(--brand-gold);
}
/* Admin-Link: dezenter Lock-Icon-Link, ganz rechts in der Legal-Bar.
Default 50 % gedimmt, auf Hover voll sichtbar — soll nicht auffallen,
aber für Eingeweihte erreichbar (Tooltip „Backend"). Color bleibt
stone/muted, nicht gold — das Icon ist die Funktion, nicht der Akzent. */
.mvi-footer__admin {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--fg-muted) !important; /* override .mvi-footer__legal-links a gold-Default */
opacity: 0.5;
transition: opacity var(--dur-fast) var(--ease-out);
}
.mvi-footer__admin:hover,
.mvi-footer__admin:focus-visible {
color: var(--fg-muted) !important;
opacity: 1;
}
/* Responsive ≤ 1050 — User-Vorgabe: auf Tablet + Mobile wird nur die
Legal-Bar gezeigt. Brand-Block + Nav-Spalten sind ausgeblendet, weil
die mobile Navigation komplett über den Drawer im Header läuft — ein
redundanter Footer-Nav darunter ist nicht nötig. Padding wird auf das
notwendige Minimum reduziert (16 vertical, 48 horizontal). Trennlinie
border-top auf Legal-Bar entfällt, sonst hängt eine Linie ohne Kontext
im Raum. */
@media (max-width: 1050px) {
.mvi-footer {
padding: var(--space-4) var(--space-7); /* 16 vertical, 48 horizontal */
}
.mvi-footer__inner {
display: none;
}
.mvi-footer__legal {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
}
/* Responsive Mobile (≤ 520) — Legal-Bar stackt vertikal (Copyright oben,
Links unten). Auf Mobile auch padding-x leicht reduzieren, damit lange
Copyright-Zeile nicht zu eng am Bildrand klebt. */
@media (max-width: 520px) {
.mvi-footer {
padding: var(--space-4) var(--space-5); /* 16 vertical, 24 horizontal */
}
.mvi-footer__legal {
flex-direction: column;
align-items: flex-start;
gap: var(--space-3);
}
}
/* ============================================================
S-10 — BEITRAGSSEITE (Article View)
============================================================
Joomla rendert die Article-View (com_content view=article) ohne
eigenen Itemid → der aktive Itemid ist 101 (Startseite). Folge:
alle Modulzuweisungen der Startseite (Hero, Termine, Aktuelles,
Ensembles, Ausbildung, Sponsoren) erscheinen MIT auf der
Beitragsseite, der Article-Inhalt liegt mittendrin.
Lösung: Auf `body.view-article` werden die Startseite-Module-
Container ausgeblendet. Sidebar bleibt aktiv (Vorgabe). Header
und Footer bleiben unverändert. */
/* --- S-10 Phase 1: Startseite-Modul-Container ausblenden -------- */
/* .container-banner BLEIBT sichtbar — Hero-Modul rendert auch auf
Article-View (User-Vorgabe S-10 Korrektur 2026-05-15). */
body.view-article .container-top-a,
body.view-article .container-top-b,
body.view-article .container-bottom-a,
body.view-article .container-bottom-b,
body.view-article .container-bottom-c,
body.view-article .container-bottom-d {
display: none !important;
}
/* Hero-Variante auf Article-View: nur Foto, kein Text/CTAs/Social-Icons.
Der Hero wirkt damit als reine Marken-Visitenkarte zwischen Header
und Beitragsseite-Inhalt — der Article-Title übernimmt die
inhaltliche Kommunikation. */
body.view-article .mvi-hero__content,
body.view-article .mvi-hero__social {
display: none;
}
body.view-article .mvi-hero__overlay {
background: none;
}
/* --- S-10-9: Breadcrumb (Startseite / Aktuelles / Titel) -------- */
/* Sitzt als erstes Element im .com-content-article (vor dem Titel),
erbt damit die 720-px-Lese-Spalte.
S-12 Polish 2026-05-20 (Fix 2): `view-article` → `:is(view-article,
view-archive)` erweitert. Spezifität bleibt identisch (`:is()` nimmt die
höchste Innenspezifität — beide Selektoren sind 0,1,0 body-class) →
bestehende view-article-Seiten unverändert; itemid-938 (view-archive)
erbt jetzt das Breadcrumb-Styling. */
:is(body.view-article, body.view-archive) .com-content-article > .mvi-breadcrumb,
body.view-archive .com-content-archive > .mvi-breadcrumb,
body.view-list.itemid-934 .mvi-cal-wrapper > .mvi-breadcrumb,
body.com_igallery.view-category .ig-main-scope-wrapper.profile-1 > .mvi-breadcrumb,
body.com_contact.view-category .com-contact-category > .mvi-breadcrumb {
display: flex;
align-items: center;
gap: var(--space-2);
flex-wrap: wrap;
margin-bottom: var(--space-5);
}
:is(body.view-article, body.view-archive, body.view-list.itemid-934, body.com_igallery.view-category, body.com_contact.view-category) .mvi-breadcrumb a,
:is(body.view-article, body.view-archive, body.view-list.itemid-934, body.com_igallery.view-category, body.com_contact.view-category) .mvi-breadcrumb__link {
font-family: var(--font-body);
font-size: var(--fs-sm);
color: var(--fg-muted);
text-decoration: none;
transition: color var(--dur-base) var(--ease-out);
}
:is(body.view-article, body.view-archive, body.view-list.itemid-934, body.com_igallery.view-category, body.com_contact.view-category) .mvi-breadcrumb a:hover,
:is(body.view-article, body.view-archive, body.view-list.itemid-934, body.com_igallery.view-category, body.com_contact.view-category) .mvi-breadcrumb__link:hover {
color: var(--brand-bordeaux);
}
:is(body.view-article, body.view-archive, body.view-list.itemid-934, body.com_igallery.view-category, body.com_contact.view-category) .mvi-breadcrumb__sep {
color: var(--fg-muted);
font-size: var(--fs-sm);
user-select: none;
}
:is(body.view-article, body.view-archive, body.view-list.itemid-934, body.com_igallery.view-category, body.com_contact.view-category) .mvi-breadcrumb__current {
font-family: var(--font-body);
font-size: var(--fs-sm);
font-weight: 600;
color: var(--fg-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 360px;
}
@media (max-width: 520px) {
:is(body.view-article, body.view-archive, body.view-list.itemid-934, body.com_igallery.view-category, body.com_contact.view-category) .mvi-breadcrumb__current {
max-width: 180px;
}
}
/* --- S-10 Phase 2: Article-Container + Titel ------------------- */
/* Article rendert in einer schmalen Lese-Spalte (720 px), zentriert.
Galerie und Pagenavigation brechen in späteren Phasen aus dieser
Spalte aus auf full container-wide (1320 px). */
body.view-article .com-content-article.item-page {
max-width: var(--article-content-width);
margin: 0 auto;
padding: var(--space-7) var(--space-7) var(--space-9);
box-sizing: content-box;
}
@media (max-width: 520px) {
body.view-article .com-content-article.item-page {
padding-left: var(--space-5);
padding-right: var(--space-5);
}
}
/* Joomla rendert zwei .page-header-Blöcke unter view-article:
1. Startseite
— vom Menüpunkt (Itemid 101) → ausblenden
2. {Article-Title}
— der eigentliche Titel → stylen */
body.view-article .com-content-article > .page-header:has(> h1) {
display: none;
}
body.view-article .com-content-article > .page-header:has(> h2) {
margin: 0 0 var(--space-5);
}
body.view-article .com-content-article > .page-header > h2 {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(var(--fs-3xl), 4vw, var(--fs-4xl)); /* 48→64, harmonisch (kein Fullwidth mehr) */
line-height: 1.1;
letter-spacing: normal;
color: var(--brand-bordeaux);
margin: 0;
text-wrap: balance;
hyphens: auto;
-webkit-hyphens: auto;
hyphenate-limit-chars: 7 4 3;
}
/* ≤1050: Titel auf die responsiven Größen (clamp-min wäre 48 px, auf
Mobile in der ~342-px-Spalte unharmonisch). 38 / 28 wie Pre-Fullwidth. */
@media (max-width: 1050px) {
body.view-article .com-content-article > .page-header > h2 { font-size: 38px; }
}
@media (max-width: 520px) {
body.view-article .com-content-article > .page-header > h2 { font-size: 28px; }
}
/* --- S-10 Phase 3: Article-Meta (Badge + Datum) ----------------- */
/* Inline-Meta-Block — Tag-Pill (Catid-Modifier) + Veröffentlichungs-
datum mit „·"-Trenner. S-10 Polish: sitzt jetzt ÜBER dem Titel
(Breadcrumb → Meta → Titel → Bild), daher margin-bottom = Abstand
zum Titel (16) statt zuvor zum Bild (32). */
body.view-article .com-content-article > .mvi-article-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 14px;
margin: 0 0 var(--space-4);
}
body.view-article .mvi-article-meta__date {
display: inline-flex;
align-items: center;
font-family: var(--font-display);
font-weight: 500;
font-size: 15px;
letter-spacing: 0.01em;
font-variant-numeric: tabular-nums;
color: var(--neutral-anthracite);
}
body.view-article .mvi-article-meta__date::before {
content: "·";
margin-right: 14px;
color: var(--border-subtle);
font-weight: 400;
}
/* S-10 Polish-Reset (2026-05-17): Der Fullwidth-Breakout für
Breadcrumb + Meta + Titel wurde wieder ENTFERNT — alle drei sitzen
jetzt (wie der Fließtext) in der zentrierten Lese-Spalte
(--article-content-width 856). Kein Breakout, keine negativen
Margins; es gelten wieder die Standard-Regeln (3868/3933/3964),
die .com-content-article zentriert per margin:0 auto. */
/* --- S-10 Phase 4: Beitragsbild (figure.item-image) ------------- */
/* Joomla rendert `images_fulltext` als ``
mit Class `left` als Default-Float-Alignment. Wir neutralisieren den
Float, geben dem Bild ein festes 16:9-Verhältnis (4:3 auf Mobile)
und runden die Ecken passend zum übrigen Designsystem. */
body.view-article .com-content-article figure.item-image {
position: relative;
margin: 0 0 var(--space-7);
float: none;
width: 100%;
overflow: hidden;
border-radius: var(--radius-md); /* clippt Gradient/Caption rund (img hat radius-md) */
}
body.view-article .com-content-article figure.item-image img {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: var(--radius-md);
border: 1px solid var(--border-subtle);
}
@media (max-width: 520px) {
body.view-article .com-content-article figure.item-image img {
aspect-ratio: 4 / 3;
}
}
/* S-10 Polish-Fix 4 (2026-05-17): Bildunterschrift NICHT mehr als
unter dem Bild, sondern als data-label-Attribut →
per ::after AUF dem Bild (analog .mvi-card__photo::after auf der
Startseite). Gradient-Overlay (::before) + Caption (::after) NUR
wenn data-label vorhanden (kein Alt-Text → figure ohne data-label
→ kein dunkler Wash, keine Caption — folgt der Spec-Verbal-
Anforderung; das Spec-CSS-Snippet hatte ::before ungescoped,
was ohne Caption nur sinnlos abdunkeln würde). */
body.view-article .com-content-article figure.item-image[data-label]::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(31, 28, 24, 0) 55%,
rgba(31, 28, 24, 0.55) 100%
);
pointer-events: none;
z-index: 1;
}
body.view-article .com-content-article figure.item-image[data-label]::after {
content: attr(data-label);
position: absolute;
bottom: var(--space-3); /* 12 px */
left: var(--space-4); /* 16 px */
right: var(--space-4);
font-family: var(--font-display);
font-style: italic;
font-size: var(--fs-xs); /* 12 px */
color: rgba(245, 240, 235, 0.92); /* cream */
z-index: 2;
pointer-events: none;
}
/* Joomla-Default figcaption auf .item-image unterdrücken — Caption rendert
stattdessen über `data-label="…"::after` (PHP-Override default.php, siehe
DECISIONS 2026-05-17 „S-10 Polish-Imgflow"). Defensive Suppression für
den Fall, dass der Editor doch einen generiert. */
body.view-article .com-content-article figure.item-image figcaption {
display: none;
}
/* Flyer-Artikel (2026-05-23): Beitragstyp `flyer` zeigt das Bild ohne
Cropping — Flyer-Plakate enthalten Text-im-Bild der nicht beschnitten
werden darf. Klasse `.com-content-article--flyer` setzt der PHP-Override
wenn das Custom Field `beitragstyp=flyer` ist. `object-fit: contain` +
`aspect-ratio: auto` gibt dem Bild seine natürliche Form. Cream-Hintergrund
hinter dem Bild (für Letterboxing). Gradient + Caption deaktiviert. */
body.view-article .com-content-article--flyer figure.item-image {
background-color: var(--neutral-cream);
}
body.view-article .com-content-article--flyer figure.item-image img {
aspect-ratio: auto;
object-fit: contain;
height: auto;
border: 0; /* kein Border auf Cream-Letterbox */
}
body.view-article .com-content-article--flyer figure.item-image[data-label]::before,
body.view-article .com-content-article--flyer figure.item-image[data-label]::after {
display: none;
}
/* --- S-10 Phase 5: Body-Prose + Blockquote ---------------------- */
/* Lesefreundliche Typografie für den Artikel-Body. 17 px / lh 1.7
matched die HTML-Referenz (.mvi-prose) — die optimale Balance
zwischen Lesegröße und Zeilenhöhe für narrative Texte. */
body.view-article .com-content-article__body {
font-family: var(--font-body);
font-size: 17px;
line-height: 1.7;
color: var(--neutral-anthracite);
}
body.view-article .com-content-article__body > p {
margin: 0 0 var(--space-5);
}
body.view-article .com-content-article__body > p:last-child {
margin-bottom: 0;
}
/* ============================================================
S-10 Polish (2026-05-17) — Padding-Fix + Intro-Lead + Drop Cap
============================================================ */
/* K1 — Mobile-Padding-Fix: Auf ≤520 px sitzt .com-content-article
im .container-component, das per .site-grid (CSS-Grid,
column-gap 16) einen 16-px-Gutter erhält → effektiver Einzug
40 px (16 Grid-Gutter + 24 Article-Padding) statt 24 wie auf der
Startseite. Lösung: Breakout auf volle Viewport-Breite (identisch
zum Pattern der Startseite-Sektionen / Galerie / Pagenav), das
eigene 24-px-Padding bleibt → Content-Einzug exakt 24 px, volle
390-px-VP genutzt. `border-box` nötig, damit width:100vw + padding
keinen horizontalen Overflow erzeugt. Desktop unverändert. */
@media (max-width: 520px) {
body.view-article .com-content-article.item-page {
box-sizing: border-box;
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
}
/* K3 — Intro-Lead: erster Body-Absatz als ruhiger Source-Sans-
Italic-Einstieg in Sekundärfarbe (kompensiert das bewusst nicht
gerenderte Joomla-Lead-Element, S-10 C). Polish-Fix 2: Größe jetzt
= Fließtext (17 px, NICHT `--fs-base` 16 — Spec-Token-Referenz hätte
das Spec-Ziel „gleiche Größe wie Fließtext" verfehlt, da der Body
hartcodiert 17 px nutzt). Nur Italic + Sekundärfarbe heben den
Einstieg ab, kein Größenkontrast mehr.
Polish-Fix 4 (2026-05-17): Der erste Absatz wird im PHP-Override
in einen eigenen `.com-content-article__intro`-Wrapper VOR das Bild
gerendert (Body-Split). Lead + Drop Cap zielen daher jetzt auf
`.com-content-article__intro > p` statt `.__body > p:first-of-type`
— sonst bekäme der erste Absatz des Rest-Bodys (nach dem Bild)
fälschlich Lead+Drop-Cap. */
/* S-10 / R3 (2026-05-18): Erster Absatz = LEAD für ALLE Artikel global
(User-Auftrag — der auf Über-Uns eingeführte Lead-Stil gefällt und
soll überall gelten). 19 px (Mockup-Lead-Wert, etablierter
kommentierter Rohwert), NICHT kursiv, --fg-primary, KEIN Drop-Cap.
Früher: Italic/Sekundär 17 + Spectral-Drop-Cap (+Mobile-Fallback);
früherer Über-Uns-scoped Override entfällt (global jetzt identisch). */
body.view-article .com-content-article__intro > p:first-of-type {
font-family: var(--font-body);
font-style: normal;
font-size: 19px; /* Lead (Mockup-Wert, kein --fs-Token) */
line-height: 1.55;
color: var(--fg-primary);
margin-bottom: var(--space-6); /* 32 px (Abstand zum Bild) */
}
/* Kein Drop-Cap mehr — ::first-letter neutralisiert (falls UA/Erbe). */
body.view-article .com-content-article__intro > p:first-of-type::first-letter {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
color: inherit;
float: none;
line-height: inherit;
margin: 0;
}
/* Zwischenüberschriften: Spectral Bordeaux, deutlich abgesetzt mit
margin-top, scroll-margin-top für Anker-Sprünge unter dem 88-px-Header. */
body.view-article .com-content-article__body > h2 {
font-family: var(--font-display);
font-weight: 600;
font-size: 28px;
line-height: 1.2;
letter-spacing: -0.005em;
color: var(--brand-bordeaux);
margin: var(--space-7) 0 var(--space-4);
scroll-margin-top: 100px;
}
body.view-article .com-content-article__body > h2:first-child {
margin-top: 0;
}
body.view-article .com-content-article__body > h3 {
font-family: var(--font-display);
font-weight: 500;
font-size: 22px;
line-height: 1.3;
color: var(--brand-bordeaux);
margin: var(--space-6) 0 var(--space-3);
scroll-margin-top: 100px;
}
/* Blockquote: 3-px-Bordeaux-Border-Left, Spectral italic, leichte
Hervorhebung. Foundation für Editoren, die Zitate setzen wollen. */
body.view-article .com-content-article__body blockquote {
margin: var(--space-6) 0;
padding: var(--space-3) var(--space-5);
border-left: var(--border-w-strong) solid var(--brand-bordeaux);
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: var(--fs-lg);
line-height: var(--lh-snug);
color: var(--neutral-anthracite);
}
body.view-article .com-content-article__body blockquote > p:last-child {
margin-bottom: 0;
}
/* Listen mit konsistentem Spacing. */
body.view-article .com-content-article__body ul,
body.view-article .com-content-article__body ol {
margin: 0 0 var(--space-5);
padding-left: var(--space-6);
}
body.view-article .com-content-article__body li {
margin-bottom: var(--space-2);
}
body.view-article .com-content-article__body li:last-child {
margin-bottom: 0;
}
/* Inline-Bilder im Body — falls Editoren Bilder im Fließtext einfügen,
bekommen sie konsistente Rundung + Spacing. */
body.view-article .com-content-article__body img {
max-width: 100%;
height: auto;
border-radius: var(--radius-md);
margin: var(--space-5) 0;
display: block;
}
/* Inline-Links: Bordeaux-Unterstrich (analog Foundation). */
body.view-article .com-content-article__body a {
color: var(--brand-bordeaux);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: color var(--dur-base) var(--ease-out);
}
body.view-article .com-content-article__body a:hover {
color: var(--brand-bordeaux-deep);
}
/* Mobile-Reduktion der Body-Typografie. */
@media (max-width: 520px) {
body.view-article .com-content-article__body {
font-size: 16px;
line-height: 1.65;
}
body.view-article .com-content-article__body > h2 {
font-size: 22px;
margin-top: var(--space-6);
}
body.view-article .com-content-article__body > h3 {
font-size: 19px;
}
body.view-article .com-content-article__body blockquote {
font-size: var(--fs-md);
padding: var(--space-2) var(--space-4);
}
}
/* --- S-10 Phase 6: Ignite Gallery — Output stylen --------------- */
/* Ignite-Gallery rendert per Shortcode als ` > .ig-gallery-wrapper > .ig-thumbs-grid >
.ig-thumbs-grid-block > .ig-grid-img-link(a) > img`. Wir machen daraus
einen horizontalen Scroll-Strip (analog Termine-Strip S-3). Den
kompletten 2-spaltigen Section-Header (Eyebrow + Titel links,
„Alle Fotos →" rechts) rendert das Content-Plugin
`plg_content_mvi_gallery_link` als echten `.mvi-gallery-head`-DOM-
Block VOR der Galerie (onContentPrepare) — frühere CSS-Pseudo-
Eyebrow/Titel + nachgestellter Link sind ersetzt (S-10-6 Polish). */
/* Gemeinsamer Breakout für Header UND Strip aus der 720-px-Lesespalte
auf **container-wide mit 24-px-Guttern** (NICHT 100vw) — gleiche
Breite wie die Startseiten-Sektionen (Termine S-3 / Aktuelles S-4).
Box 1232 px @ VP1280 / 1320 gecappt ≥1368 / 342 @ VP390, je 24 px
Abstand zum Viewport. Das innere padding (var(--gutter)) setzt den
Content nochmals 24 px ein → Content-Breite = .mvi-section__inner
(1184 @1280). margin-left zentriert den Block über der schmalen
Spalte (100% = 720). Header + Strip exakt gleich breit/zentriert. */
body.view-article .com-content-article__body .mvi-gallery-head,
/* itemid-979 („Unsere Register", natives pid=4) UND itemid-937
(„Chronik", S-13) sind hier AUSGENOMMEN:
- 979: Diagnose 2026-05-18 — der Sidebar-Overlap kam allein aus diesem
globalen Breakout (width:min(...) + negativem margin-left). Ohne
die Regel sitzt die pid=4-Galerie ohne jede width/margin-Angabe
sauber in der Content-Spalte (settled @1280 = x408/w800).
- 937: Die Chronik-Galerien sitzen in `.mvi-epoch__body`-Blöcken der
Zeitleiste und sollen IN der Content-Spalte bleiben (kein Breakout
auf container-wide). Ohne :not(.itemid-937) würde jede Epoch-Galerie
aus der Lesespalte rauslaufen — visuell bricht das die Bullet-/Linie-
Alignierung. */
body.view-article:not(.itemid-979):not(.itemid-937) .com-content-article__body .ig-main-scope-wrapper {
position: relative;
box-sizing: border-box;
width: min(var(--container-wide), calc(100vw - 2 * var(--gutter)));
margin-left: calc(
(min(var(--container-wide), calc(100vw - 2 * var(--gutter))) - 100%) / -2
);
margin-right: 0;
padding-left: var(--gutter);
padding-right: var(--gutter);
}
/* Strip + Grid füllen den Breakout-Wrapper voll (kein eigener
width-Constraint, der sie einschränkt). */
body.view-article .com-content-article__body .ig-main-scope-wrapper .ig-gallery-wrapper,
body.view-article .com-content-article__body .ig-main-scope-wrapper .ig-thumbs-grid {
width: 100%;
max-width: none;
margin-left: 0;
margin-right: 0;
}
/* === „Unsere Register" (itemid 979): natives Ignite-Profil pid=4 ========
Galerie sitzt vom globalen S-10-Breakout ausgenommen (:not(.itemid-979)
oben) sauber in der Content-Spalte. Dieser Block: MVI-Vereinheitlichung
der pid=4-Galerie (Großbild + Caption + horizontaler Thumb-Strip) auf
den Look der Beitrags-Galerie (pid=3 /seefest). Analyse-Stand
2026-05-18 (Live-DOM /ueber-uns/unsere-register). Lightbox = eigener
Block weiter unten (siehe „ig-lightbox"). */
/* (A) Abstand Lead-Absatz → Großbild = --space-4 (16) — aber AUSSERHALB
der Karte. Befund 2026-05-19: `margin-top` am Bild erzeugte die
16-px-Lücke INNERHALB von .ig-slideshow-item-inner-lboxon (Cream-bg
+ 1-px-Border) = „weißer Strich oben". Lösung: Abstand auf die
.ig-slideshow-Bühne (Flex-Item → kein Collapse) legen, Bild-
margin-top auf 0. So sitzt der Abstand vor der Karte, nicht darin. */
/* (R5-1) `body.itemid-979 .ig-slideshow { margin-top }` ENTFERNT —
kein Extra-Abstand mehr vor der Galerie-Karte (Bild-margin-top:0
bleibt; Lead→Bild-Abstand = Prosa-margin der Lead-Absatzes). */
body.itemid-979 .ig-slideshow-image {
margin-top: 0 !important;
object-fit: cover !important; /* füllt die Box randlos, wie Beitragsbilder */
border-radius: 0 !important; /* Radius kommt vom Container */
}
/* (P2) Großbild + Caption als EINE gerundete Karte: Container
.ig-slideshow-item-inner-lboxon bekommt --radius-md + subtilen Rahmen
+ overflow:hidden → alle vier Ecken gerundet, Caption-Leiste mit-
geclippt. Identisch zu Beitragsbildern (radius-md, border-subtle). */
body.itemid-979 .ig-slideshow-item-inner-lboxon {
border-radius: var(--radius-md);
overflow: hidden;
border: var(--border-w-thin) solid var(--border-subtle);
background: transparent; /* Bild deckt cover-randlos; kein Cream-Peek */
anchor-name: --ig979-card; /* (R4-3) Anker für orientierungsunabh. Pfeile (Chromium); Fallback s.u. */
}
/* (R5-2) Slideshow-Pfeile = rechteckiger dunkler Kasten + Ignites
natives Pfeil-SVG (identisch zur Lightbox). Befund 2026-05-19:
Lightbox-Referenz `.ig-lightbox-button-left` nutzt DASSELBE Ignite-
SVG ``, computed Stroke
`rgba(255,255,255,0.7)`, transparent, kein Radius. → ::after-Chevron
(R4) ENTFERNT, Ignite-SVG WIEDER sichtbar (gleiches Markup = exakt
gleiche Pfeilform), Stroke weiß (--fg-on-bordeaux). Kasten:
rechteckig (border-radius:0), dunkel color-mix(--neutral-black 35%),
Hover 58 %, Pfeil per Flexbox exakt zentriert. Position bleibt
(R4): 23%-Token-Fallback + Anchor-Positioning (Chromium) relativ
zur Bildkarte. Scope nur `.ig-slideshow` (Lightbox unberührt). */
body.itemid-979 {
--ig979-arrow-edge: 23%;
}
body.itemid-979 .ig-slideshow .ig-slideshow-button {
box-sizing: border-box !important;
/* (R7-1) Sauberer quadratischer 44×44-Kasten — EIN Grauton.
Befund 2026-05-19: das SVG-Element trägt einen EIGENEN bg
(`rgba(0,0,0,0.3)` von Ignites `ignitegallery.css`) ÜBER unserem
Button-bg → zwei Grautöne im SVG-Bereich. Fix: nativer Button
`background:transparent`, eigener Kasten via `::before`, SVG-bg
ebenfalls transparent → nur eine Graufläche. (R6-1 `padding:0`
bleibt — neutralisiert Ignites Default `padding:25 25 25 0`.) */
width: 44px !important;
height: 44px !important;
min-height: 0 !important;
padding: 0 !important;
top: 50% !important;
transform: translateY(-50%) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important; /* (R7-1) statt color-mix → ::before zeichnet */
color: var(--fg-on-bordeaux) !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
opacity: 1;
overflow: hidden !important;
position: relative; /* (R7-1) Kontext fürs ::before */
}
/* (R7-1) Der Kasten: einzige Graufläche, hinter SVG. */
body.itemid-979 .ig-slideshow .ig-slideshow-button::before {
content: "";
position: absolute;
inset: 0;
background: color-mix(in srgb, var(--neutral-black) 35%, transparent);
z-index: 0;
transition: background var(--dur-base) var(--ease-out);
}
body.itemid-979 .ig-slideshow .ig-slideshow-button:hover::before,
body.itemid-979 .ig-slideshow .ig-slideshow-button:focus-visible::before {
background: color-mix(in srgb, var(--neutral-black) 58%, transparent);
}
body.itemid-979 .ig-slideshow .ig-slideshow-button-left {
left: var(--ig979-arrow-edge) !important;
right: auto !important;
}
body.itemid-979 .ig-slideshow .ig-slideshow-button-right {
right: var(--ig979-arrow-edge) !important;
left: auto !important;
}
/* Ignites natives Pfeil-SVG sichtbar (wie Lightbox), weißer Stroke,
scharf bei jeder Größe (non-scaling), Flex-zentriert. SVG-eigenes
bg (von Ignite `rgba(0,0,0,0.3)`) eliminiert + über ::before via z-index. */
body.itemid-979 .ig-slideshow .ig-slideshow-button svg {
display: block !important;
width: auto !important;
height: 22px !important;
margin: 0 !important;
overflow: visible;
background: transparent !important; /* (R7-1) kill Ignites SVG-bg */
position: relative;
z-index: 1; /* über ::before */
}
body.itemid-979 .ig-slideshow .ig-slideshow-button svg polyline,
body.itemid-979 .ig-slideshow .ig-slideshow-button svg * {
stroke: currentColor !important;
stroke-width: 2.5 !important;
vector-effect: non-scaling-stroke;
fill: none !important;
}
/* (R7-2) Pfeile INSIDE der Bildkarte (am inneren Rand), NICHT straddling
die Kante. Befund: bei Querformat (Karte ≈ Stagebreite) ragt straddling-
Pfeil über die Stage hinaus → wird von `.ig-slideshow{overflow:hidden}`
(R6-2) abgeschnitten. Lösung: Anchor-Positioning OHNE translateX —
Pfeil-linke-Kante = Karten-linke-Kante (left btn), Pfeil-rechte-Kante
= Karten-rechte-Kante (right btn). Damit sitzen die Pfeile vollständig
im Karten-overflow:hidden, kein Clipping unabhängig vom Format. */
@supports (left: anchor(--ig979-card left)) {
body.itemid-979 .ig-slideshow .ig-slideshow-button {
position-anchor: --ig979-card;
top: anchor(--ig979-card center) !important;
transform: translateY(-50%) !important; /* nur vertikal zentriert */
}
body.itemid-979 .ig-slideshow .ig-slideshow-button-left {
left: anchor(--ig979-card left) !important;
right: auto !important;
}
body.itemid-979 .ig-slideshow .ig-slideshow-button-right {
right: anchor(--ig979-card right) !important;
left: auto !important;
}
}
/* (R7-2+3) Stage `overflow:hidden` (R6-2) ZURÜCKGENOMMEN — sonst werden
Pfeile bei Querformat-Karten (≈ Stagebreite) am Bildrand abgeschnitten.
Anti-Flicker stützt sich jetzt allein auf `transition` + die ohnehin
bestehenden Karten-overflow:hidden + Anchor-Positioning inside-card.
MutationObserver (R7-Diagnose, 1,2 s nach Slide-Click): keine
UL-Attribut-Mutationen → das beim Format-Wechsel beobachtete Flackern
kommt nicht von UL-Höhe, sondern wahrscheinlich von der KARTEN-Breite
(Ignite passt `.ig-slideshow-item-inner-lboxon` per Aspekt an).
Transition auch dort + Bump 0.15→0.2s. */
body.itemid-979 .ig-slideshow {
overflow: visible !important;
}
body.itemid-979 .igui-slideshow-items,
body.itemid-979 .ig-slideshow-items {
transition: height 0.2s ease !important;
}
body.itemid-979 .ig-slideshow-item-inner-lboxon {
transition: width 0.2s ease, height 0.2s ease !important;
}
/* (C) Caption als Bild-Overlay mit Gradient-Scrim (statt Cream-Block).
Befund 2026-05-19: .ig-description-overlay liegt nativ als
absolute Bottom-Overlay AUF dem Bild (OVERLAY bestätigt). MVI:
dunkler Verlauf nach oben transparent, Titel Spectral creme,
Personen Source Sans 3 creme — analog Beitragsbild-Caption.
h3 responsiv (clamp) + Umbruch → kein Mobile-Clip. */
body.itemid-979 .ig-slideshow .ig-description-overlay {
position: absolute;
inset: auto 0 0 0;
background: linear-gradient(
to top,
color-mix(in srgb, var(--neutral-black) 80%, transparent) 0%,
color-mix(in srgb, var(--neutral-black) 45%, transparent) 55%,
transparent 100%
) !important;
border-top: 0 !important;
padding: var(--space-7) var(--space-4) var(--space-4) !important;
text-align: center;
}
body.itemid-979 .ig-description-overlay h3 {
margin: 0;
font-family: var(--font-display);
font-size: clamp(var(--fs-md), 4.2vw, var(--fs-lg));
font-weight: 600;
line-height: 1.2;
color: var(--fg-on-bordeaux);
white-space: normal;
overflow-wrap: normal;
hyphens: auto;
}
body.itemid-979 .ig-description-overlay p {
margin: 2px 0 0;
font-family: var(--font-body);
font-size: var(--fs-sm);
line-height: 1.35;
color: color-mix(in srgb, var(--fg-on-bordeaux) 85%, transparent);
white-space: normal;
overflow-wrap: break-word;
}
/* (4) Mobile-Caption (≤520): Befund 2026-05-19 — Caption ist auch
mobil ein OVERLAY auf dem Bild (capVsImg:OVERLAY) mit EIGENEM
Gradient-Scrim, bereits zentriert + Spectral/Source-Sans. Daher
`--fg-default/--fg-secondary` (dunkel) NICHT angewandt (auf dem
dunklen Scrim unlesbar; creme = robust, auch falls Ignite die
Caption auf einem echten Gerät darunter rendert — der eigene
Gradient-bg bleibt am Element). Nur Padding gestrafft: Seiten/
unten --space-2, oben minimaler Scrim-Verlauf. */
@media (max-width: 520px) {
body.itemid-979 .ig-slideshow .ig-description-overlay {
padding: var(--space-4) var(--space-2) var(--space-2) !important;
}
body.itemid-979 .ig-description-overlay p {
font-size: 13px;
line-height: 1.3;
}
}
/* (R4-4) Mobile-Caption DEFENSIV: Playwright-Emulation behält
`ig-notphone` (Ignite-Phone-Erkennung ist UA-basiert) → echtes
Gerät kann die Caption anders rendern (ggf. links/darunter). Daher
alle plausiblen Touch-/Schmalbreiten-Queries: Titel + Personenliste
IMMER zentriert (mit !important), Spectral / Source Sans 3,
creme-Token (auf Eigen-Scrim lesbar, robust auch falls Block
darunter), Padding --space-2. (Befund: Emu zeigt bereits
OVERLAY/center/Spectral-creme; dunkle Tokens wären auf dem Scrim
unlesbar → bewusst creme. Nur am echten Gerät final verifizierbar.) */
@media (max-width: 768px), (pointer: coarse), (hover: none) {
body.itemid-979 .ig-description-overlay,
body.itemid-979 .ig-description-overlay h3,
body.itemid-979 .ig-description-overlay p {
text-align: center !important;
}
body.itemid-979 .ig-description-overlay h3 {
font-family: var(--font-display) !important;
color: var(--fg-on-bordeaux) !important;
}
body.itemid-979 .ig-description-overlay p {
font-family: var(--font-body) !important;
color: color-mix(in srgb, var(--fg-on-bordeaux) 85%, transparent) !important;
}
body.itemid-979 .ig-slideshow .ig-description-overlay {
padding: var(--space-4) var(--space-2) var(--space-2) !important;
}
}
/* (R7-4) Strategie-Wechsel: Overlay-Experiment auf Mobile AUFGEGEBEN
(zu fragil — Ignite hat auf echtem ig-phone-UA einen eigenen Modus
`.ig-image-descriptions-below` UNTER dem Bild, den unsere R5-Force-
Overlay-Hacks nicht zuverlässig dominieren). Stattdessen:
`.ig-image-descriptions-below` (nativ auf ig-phone) wieder sichtbar
lassen und MVI-konform stylen — zentriert, Spectral-Titel, Source-
Sans-Personenliste, Token-Farben (dunkel, auf Page-bg). Desktop-
Overlay (siehe (C) oben) bleibt unangetastet. */
body.itemid-979 .ig-image-descriptions-below,
body.itemid-979 .ig-image-descriptions-below .ig-image-description {
text-align: center !important;
padding: var(--space-3) var(--space-4) 0 !important;
}
body.itemid-979 .ig-image-descriptions-below h3,
body.itemid-979 .ig-image-description h3 {
margin: 0 !important;
font-family: var(--font-display) !important;
font-size: var(--fs-lg) !important;
font-weight: 600 !important;
line-height: 1.25 !important;
color: var(--fg-default) !important;
}
body.itemid-979 .ig-image-descriptions-below p,
body.itemid-979 .ig-image-description p {
margin: 2px 0 0 !important;
font-family: var(--font-body) !important;
font-size: var(--fs-sm) !important;
line-height: 1.4 !important;
color: var(--fg-secondary) !important;
}
/* (P4) Thumb-Strip 1:1 wie Beitrags-Galerie pid=3: 200×200-Kachel,
--radius-md, subtiler Rahmen, Hover-Lift translateY(-2)+shadow-md,
img object-fit:cover, KEINE Chevron-Pfeile — nur horizontal scrollbar,
aktiver Thumb = weicher Gold-Schein (box-shadow) statt harter Outline.
WICHTIG: Ignite legt die ``-Thumbs per JS auf `position:absolute`
in `ul.ig-slider-items` (+ transform-Offset für die Pfeil-Navigation).
Für nativen Scroll: Items zurück in den Flow (position:static!),
Track = ul auf `width:max-content` ohne JS-transform, Viewport =
.ig-thumb-scroller-inner mit overflow-x:auto. Gold NUR im Below-
Strip → kein Leak in die Lightbox-Vertikale (.ig-thumb-scroller-lbox). */
body.itemid-979 .ig-thumb-scroller-left,
body.itemid-979 .ig-thumb-scroller-right {
display: none !important;
}
/* Scroll-Viewport = .ig-thumb-scroller-main-below selbst. Es ist ein
FLEX-Item von .ig-gallery-wrapper → default min-width:auto ließ es auf
die 4452-px-Trackbreite wachsen (Iter 2: nicht scrollbar). min-width:0
zwingt es zurück auf Spaltenbreite, overflow-x:auto scrollt intern.
Alle inneren Ebenen = max-content/visible (reine Pass-through). */
body.itemid-979 .ig-thumb-scroller-main-below {
min-width: 0 !important;
width: 100% !important;
max-width: 100% !important;
overflow-x: auto !important;
overflow-y: hidden !important;
/* (R5-3) oben --space-2 (Gap Bild→Strip); UNTEN --space-4: Befund
2026-05-19 — der Container clippt mit overflow-y:hidden (zwingend
bei overflow-x:auto) den Hover-Schatten (--shadow-md ragt ~22 px
nach unten). Bottom-Padding = Schatten-Luft (wie pid=3-Referenz),
KEIN Ignite-Reset/Spezifitäts-Problem (box-shadow war schon da). */
padding: var(--space-2) 0 var(--space-4) !important;
scroll-behavior: smooth;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
body.itemid-979 .ig-thumb-scroller-main-below::-webkit-scrollbar {
display: none;
}
body.itemid-979 .ig-thumb-scroller-main-below .ig-thumb-scroller,
body.itemid-979 .ig-thumb-scroller-main-below .ig-thumb-scroller-horizontal,
body.itemid-979 .ig-thumb-scroller-main-below .ig-thumb-scroller-horizontal-inner,
body.itemid-979 .ig-thumb-scroller-main-below .ig-thumb-scroller-inner {
overflow: visible !important;
width: max-content !important;
height: auto !important;
transform: none !important;
}
/* Track: natürliche Breite, kein JS-transform */
body.itemid-979 .ig-thumb-scroller-main-below .ig-slider-items {
position: static !important;
width: max-content !important;
height: auto !important;
transform: none !important;
white-space: nowrap;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
/* Kachel: zurück in den Flow. (1) KEIN Rahmen/Box/Outline mehr —
aktiver Thumb nur über Opacity (inaktiv 0.65 / aktiv 1, 0.2s).
border-radius bleibt (gerundete Ecken sind kein „Rahmen").
(5) Hover-Lift bit-identisch zu pid=3 (verifiziert: matrix(…,-2) +
--shadow-md + 0.22s cubic-bezier(.16,1,.3,1)). */
body.itemid-979 .ig-thumb-scroller-main-below .ig-scroller-img-wrapper {
position: static !important;
float: none !important;
transform: none !important;
top: auto !important;
left: auto !important;
display: inline-block;
box-sizing: border-box;
width: 200px !important;
height: 200px !important;
margin: 0 var(--space-3) 0 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: var(--radius-md);
box-shadow: none !important;
outline: none !important;
overflow: hidden;
cursor: pointer;
vertical-align: top;
opacity: 0.65;
transition: opacity 0.2s var(--ease-out),
transform var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out);
}
/* (R4-5) Hover-Lift NUR auf echten Zeigegeräten (Maus). Befund: Ignite
setzt die Aktiv-Klasse `.ig-active-thumb` erst bei touchend (nach dem
Bildwechsel) — die einzige Aktiv-Klasse, keine separate Touch-Klasse.
Auf Touch löst aber `:hover` (sticky-hover beim Tap) ein verfrühtes
Opacity/Lift-Flackern VOR dem Wechsel aus. `@media (hover:hover) and
(pointer:fine)` koppelt :hover von Touch ab → dort treibt
ausschließlich `.ig-active-thumb` die Opacity (post-touchend). */
@media (hover: hover) and (pointer: fine) {
body.itemid-979 .ig-thumb-scroller-main-below .ig-scroller-img-wrapper:hover {
opacity: 1;
transform: translateY(-2px) !important;
box-shadow: var(--shadow-md) !important;
}
}
body.itemid-979 .ig-thumb-scroller-main-below .ig-img-link {
display: block !important;
width: 100% !important;
height: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
body.itemid-979 .ig-thumb-scroller-main-below .ig-scroller-img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
border-radius: 0 !important;
margin: 0 !important;
}
/* (1) Aktiver Thumb: KEIN Gold-Schein/Rahmen/Outline mehr — nur volle
Opacity (Hervorhebung rein über Helligkeit ggü. inaktiv 0.65). */
body.itemid-979 .ig-thumb-scroller-main-below .ig-scroller-img-wrapper.ig-active-thumb {
opacity: 1;
border: 0 !important;
box-shadow: none !important;
outline: none !important;
}
/* Scroll-zu-Galerie lässt Platz unter dem 88-px-Sticky-Header (z=100). */
body.itemid-979 .com-content-article__body .ig-main-scope-wrapper,
body.itemid-979 .ig-slideshow {
scroll-margin-top: calc(var(--header-h-desktop) + var(--space-5));
}
/* Ignite-Bildzähler „1/21" (oben rechts, Galerie) ausblenden — NICHT
.ig-description-overlay (= Caption). */
body.itemid-979 .ig-slideshow .ig-slideshow-overlay {
display: none !important;
}
/* === „Unsere Register" pid=4 — Ignite-Lightbox (Vollbild) ============
Ignite hängt die Lightbox an → Scope `body.itemid-979
.igui-lightbox.profile-4` (profile-4 = pid=4 = ausschließlich diese
Galerie). KONSERVATIV: Ignites Positionierung/Funktion NICHT
anfassen (Panel rendert bereits korrekt als Vollbild-Overlay) —
nur MVI-Kosmetik, Caption sichtbar (P5), Gold-Leak begrenzen (P6),
Mobile-Fit (P7), MVI-Look (P8). Analyse 2026-05-18. */
/* (P8) Warmer MVI-Dunkelgrund statt reinem Schwarz. */
body.itemid-979 .igui-lightbox.profile-4 {
background: var(--neutral-black) !important;
}
/* (P5) Bildunterschrift VOLLSTÄNDIG: Ignite gibt dem Bottom-Wrapper
~60 px fix → mehrzeilige Personenliste wird abgeschnitten. Höhe
auto, kein Clip, lesbarer Scrim nach oben. */
body.itemid-979 .igui-lightbox.profile-4 .ig-lightbox-bottom-wrapper,
body.itemid-979 .igui-lightbox.profile-4 .ig-lightbox-descriptions {
height: auto !important;
max-height: none !important;
min-height: 0 !important;
overflow: visible !important;
}
body.itemid-979 .igui-lightbox.profile-4 .ig-lightbox-bottom-wrapper {
padding: var(--space-5) var(--space-5) var(--space-4) !important;
background: linear-gradient(
to top,
color-mix(in srgb, var(--neutral-black) 88%, transparent),
transparent
) !important;
text-align: center;
pointer-events: none; /* blockiert Bild-/Nav-Klicks nicht */
}
body.itemid-979 .igui-lightbox.profile-4 .igui-lightbox-caption,
body.itemid-979 .igui-lightbox.profile-4 .ig-lightbox-descriptions {
text-align: center !important;
}
body.itemid-979 .igui-lightbox.profile-4 .ig-lightbox-descriptions h3 {
margin: 0 0 2px;
font-family: var(--font-display);
font-size: var(--fs-lg);
font-weight: 600;
line-height: 1.25;
color: var(--fg-on-bordeaux);
}
body.itemid-979 .igui-lightbox.profile-4 .ig-lightbox-descriptions p {
margin: 0;
font-family: var(--font-body);
font-size: var(--fs-sm);
line-height: 1.4;
color: color-mix(in srgb, var(--fg-on-bordeaux) 85%, transparent);
}
/* (P8) Toolbar oben: MVI-Typo, cremefarbene Zahlen/Icons. */
body.itemid-979 .igui-lightbox.profile-4 .igui-lightbox-toolbar,
body.itemid-979 .igui-lightbox.profile-4 .ig-lightbox-buttons {
font-family: var(--font-body);
color: var(--fg-on-bordeaux);
}
body.itemid-979 .igui-lightbox.profile-4 .ig-hits,
body.itemid-979 .igui-lightbox.profile-4 .ig-img-numbering {
font-size: var(--fs-sm);
color: color-mix(in srgb, var(--fg-on-bordeaux) 80%, transparent);
}
/* (1) Lightbox-Thumbs: KEIN Rahmen/Box/Outline (auch hier nicht) —
aktiver Thumb nur über Opacity (inaktiv 0.65 / aktiv 1, 0.2s),
konsistent zum Inline-Strip. */
body.itemid-979 .igui-lightbox.profile-4 .ig-scroller-img-wrapper {
border: 0 !important;
box-shadow: none !important;
outline: none !important;
border-radius: var(--radius-sm);
overflow: hidden;
opacity: 0.65;
transition: opacity 0.2s var(--ease-out);
}
body.itemid-979 .igui-lightbox.profile-4 .ig-scroller-img-wrapper.ig-active-thumb,
body.itemid-979 .igui-lightbox.profile-4 .ig-scroller-img-wrapper:hover {
opacity: 1;
border: 0 !important;
box-shadow: none !important;
outline: none !important;
}
/* (P7) Mobile: rechte Vertikal-Thumbs ausblenden (Platz fürs Bild),
Bild contain in den Restraum (Lupe/Bild nicht abgeschnitten),
Caption kompakt. Panel-Positionierung bewusst NICHT überschrieben. */
@media (max-width: 520px) {
body.itemid-979 .igui-lightbox.profile-4 .ig-lightbox-right-wrapper {
display: none !important;
}
body.itemid-979 .igui-lightbox.profile-4 .igui-lightbox-items img,
body.itemid-979 .igui-lightbox.profile-4 .ig-slideshow-image {
max-width: 100vw !important;
max-height: calc(100dvh - 132px) !important;
object-fit: contain !important;
}
body.itemid-979 .igui-lightbox.profile-4 .ig-lightbox-bottom-wrapper {
padding: var(--space-4) var(--space-3) !important;
}
body.itemid-979 .igui-lightbox.profile-4 .ig-lightbox-descriptions h3 {
font-size: var(--fs-md);
}
}
/* Leere JCE-Paragraphen ausblenden (erzeugen sonst unerwünschten
vertikalen Abstand). `p:empty` + `:has(>br:only-child)` +
`:has(>span:empty)`. ACHTUNG: ein literales `
` ist
per CSS NICHT selektierbar (nbsp ist ein Textknoten → kein :empty,
kein Selektor matcht Textinhalt) — solche Fälle bräuchten einen
Content-/Plugin-Fix. min-height:0 + margin-collapse fangen den Rest. */
/* WICHTIG: `:not(.com-content-article__intro)` — der Intro-Wrapper trägt
ZUSÄTZLICH die Klasse `.com-content-article__body`. `br:only-child`
ignoriert Textknoten, d. h. ein inhaltsvoller `Text
Text
`
(genau EIN
, sehr häufig) matcht `:has(> br:only-child)` und
würde sonst den kompletten Lead-Absatz ausblenden (Bug Unsere
Register, Diagnose 2026-05-18). Intro daher generell ausnehmen —
nur der Rest-Body bekommt die Leer-Absatz-Bereinigung.
MVI S-13 (2026-05-20): Selektor von `p` auf `> p` (Direct-Child)
reduziert. Ohne `>` matchte die Regel auch VERSCHACHTELTE Absätze
(z. B. `.mvi-epoch__body p` in der Chronik-Zeitleiste). Damit
wurden `Im Jahre 1896…
`-Patterns ausgeblendet, obwohl
sie sichtbaren Text enthielten — Diagnose 2026-05-20: kompletter
Epoch-1896-Fließtext display:none. Direct-Child-Restriktion
schützt jede Verschachtelung (Epoch-Body, Blockquotes, Custom-
Wrapper); für flache normale Artikel keine Änderung (deren ``
sind ohnehin Direct-Children des `__body`). */
body.view-article:not(.itemid-942):not(.itemid-1221) .com-content-article__body:not(.com-content-article__intro) > p:empty,
body.view-article:not(.itemid-942):not(.itemid-1221) .com-content-article__body:not(.com-content-article__intro) > p:has(> br:only-child),
body.view-article:not(.itemid-942):not(.itemid-1221) .com-content-article__body:not(.com-content-article__intro) > p:has(> span:empty) {
display: none;
}
body.view-article .com-content-article__body p {
min-height: 0;
}
/* Margin-Collapse zwischen (Rest-)Absatz und Galerie-Block bzw.
nach der Galerie. `.mvi-article-gallery-wrapper` existiert in dieser
Implementierung nicht — wirksame Klassen sind `.mvi-gallery-head`
(Plugin-Header vor der Galerie) und `.ig-main-scope-wrapper`. */
body.view-article .com-content-article__body p + .mvi-gallery-head,
body.view-article .com-content-article__body p + .ig-main-scope-wrapper,
body.view-article .com-content-article__body .ig-main-scope-wrapper + p {
margin-top: 0;
}
/* Galerie-Header (Plugin-Output): 2-spaltig, links Eyebrow+Titel,
rechts „Alle Fotos →". border-top + padding-top + margin-top =
48-px-Trennung vom Fließtext (analog .mvi-section__head). */
body.view-article .com-content-article__body .mvi-gallery-head {
display: flex;
justify-content: space-between;
/* `center` (statt `flex-end`) — mit Nav als 3. flex-child sitzen die
44-px-Buttons auf derselben Mittellinie wie Eyebrow+Titel und Link
(R4 2026-05-23, Termine-Pattern). */
align-items: center;
gap: var(--space-5);
margin-top: var(--space-7);
margin-bottom: var(--space-5);
padding-top: var(--space-7);
border-top: var(--border-w-thin) solid var(--border-subtle);
}
/* Eyebrow nutzt jetzt die Projekt-Standard-Klasse .mvi-section__eyebrow
(linker 28-px-Gold-::before-Strich + Typo, definiert ~Z. 1820). Die
frühere .mvi-gallery-head__eyebrow-Regel ist entfernt; der 8-px-Gap
Eyebrow→Titel wird via Titel-margin-top getragen (analog
.mvi-section--sponsoren .mvi-section__title, S-8). */
.mvi-gallery-head__title {
margin: var(--space-2) 0 0; /* 8 px Gap zum Eyebrow darüber */
font-family: var(--font-display);
font-size: 38px; /* Desktop — Spec (fs-3xl wäre 48) */
font-weight: 600;
line-height: 1.15;
color: var(--brand-bordeaux);
}
/* „Alle Fotos →" exakt wie .mvi-section__more. `text-decoration: none`
ist zwingend: die S-10-Prosa-Link-Regel unterstreicht jeden im
Body zusätzlich → zusammen mit dem border-bottom ein DOPPEL-Strich.
Nur der border-bottom soll der (einzige) Unterstrich sein. */
body.view-article .com-content-article__body .mvi-gallery-head .mvi-section__more {
flex: 0 0 auto;
font-family: var(--font-body);
font-size: var(--fs-sm); /* 14 */
font-weight: 600;
color: var(--brand-bordeaux);
text-decoration: none;
border-bottom: var(--border-w-thin) solid var(--brand-bordeaux);
white-space: nowrap;
}
/* Strip-Wrapper: nur noch der Scroll-Strip (Header übernimmt Trennung +
Titel). Kein border-top/padding/Pseudo mehr. margin-bottom 0 →
Abstand zur Prev/Next-Navigation = deren eigene margin-top
(var(--space-7) = 48, S-10 Phase 7) → total 48 px (KORREKTUR 4). */
body.view-article .com-content-article__body .ig-main-scope-wrapper {
margin-top: 0;
margin-bottom: 0;
}
/* Ignites Thumbnail-Container → horizontaler Scroll-Strip. padding-top
gibt dem Hover-Lift + Schatten Luft (overflow-x:auto ⇒ overflow-y
clippt sonst). */
body.view-article .com-content-article__body .ig-main-scope-wrapper .ig-thumbs-grid {
display: flex !important;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
gap: var(--space-3); /* 12 */
padding: var(--space-3) 0 var(--space-2); /* 12 oben (Hover-Luft) / 8 unten */
height: auto !important;
position: static !important;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* alt-Edge/IE */
}
body.view-article .com-content-article__body .ig-main-scope-wrapper .ig-thumbs-grid::-webkit-scrollbar {
display: none; /* WebKit/Blink */
}
/* Jedes Thumbnail = fixe 200-px-Kachel im Strip. Ignite positioniert
die Blocks per JS `position:absolute` (data-igui-grid Stack) → per
`!important` (schlägt Ignites Inline-Styles) zurück in den Flex-Fluss. */
body.view-article .com-content-article__body .ig-main-scope-wrapper .ig-thumbs-grid-block {
flex: 0 0 200px;
scroll-snap-align: start;
aspect-ratio: 1 / 1;
overflow: hidden;
border-radius: var(--radius-md);
position: static !important;
top: auto !important;
left: auto !important;
transform: none !important;
width: auto !important; /* flex-basis 200 bestimmt die Breite */
height: auto !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
cursor: pointer;
transition: transform var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out);
}
/* Hover-Lift identisch .mvi-ens (S-5) / .mvi-card (S-4): transition
transform+box-shadow --dur-base/--ease-out (oben, Z. ~4401),
hover translateY(-2px) + --shadow-md. Per Playwright verifiziert
1:1 deckungsgleich zu .mvi-ens. `transform !important` wegen des
Ignite-JS-Resets (`transform:none !important`). `box-shadow`
ebenfalls `!important` — rein defensiv gegen mögliche künftige
Ignite-CSS-Spezifitäts-Konflikte; aktuell auch ohne wirksam
(gemessen: shadow-md greift sauber, kein Konflikt). */
body.view-article .com-content-article__body .ig-main-scope-wrapper .ig-thumbs-grid-block:hover {
transform: translateY(-2px) !important;
box-shadow: var(--shadow-md) !important;
}
/* Link-Wrapper füllt die 200×200-Kachel, Bild deckt sie ab. */
body.view-article .com-content-article__body .ig-main-scope-wrapper .ig-grid-img-link {
display: block;
width: 100% !important;
height: 100%;
}
body.view-article .com-content-article__body .ig-main-scope-wrapper .ig-thumbs-grid-image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Tablet 521–1050: Titel 30 px (Strip-Kachelbreite bleibt 200 px). */
@media (max-width: 1050px) {
.mvi-gallery-head__title {
font-size: 30px; /* Tablet — Spec */
}
}
/* Mobile ≤ 520: Breakout-Formel greift weiter (342 px @ VP390, 24 px
je Seite) — KEIN width/margin-Reset mehr. Header bleibt 2-spaltig
(row + space-between), „Alle Fotos →" steht auf ALLEN Viewports
rechts (S-10-6 Mobile-Fix 2026-05-17). Nur Titel 24 px + kompakter
margin-top. Strip scrollt weiter horizontal. */
@media (max-width: 520px) {
body.view-article .com-content-article__body .mvi-gallery-head {
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
gap: var(--space-3);
margin-top: var(--space-6);
}
.mvi-gallery-head__title {
font-size: 24px; /* Mobile — Spec */
}
}
/* --- S-10 Phase 7: Pagenavigation (Prev/Next Cards) ------------- */
/* Joomla rendert das pagenavigation-Plugin INNERHALB von
.com-content-article (durch $this->item->pagination im Layout-
Override). Wir brechen den Block aus der 720-Spalte aus auf
container-wide — selber Mechanismus wie bei der Galerie (Phase 6). */
/* KORREKTUR S-10-6 (revidiert): border-top + padding-top WIEDER her-
gestellt (vorige Iteration hatte ihn als „zweiten Strich" entfernt —
User will den Trennstrich vor Prev/Next doch). Original-Stand:
border-top 1px border-subtle + padding `var(--space-7) 0 space-8`. */
body.view-article .com-content-article > .mvi-postnav {
position: relative;
width: min(var(--container-wide), calc(100vw - 2 * var(--gutter)));
left: 50%;
transform: translateX(-50%);
margin-top: var(--space-7);
padding: var(--space-7) 0 var(--space-8);
border-top: 1px solid var(--border-subtle);
}
:is(body.view-article, body.view-archive, body.itemid-980, body.itemid-941) .mvi-postnav__inner {
max-width: var(--container-wide);
margin: 0 auto;
padding-left: var(--space-7);
padding-right: var(--space-7);
box-sizing: border-box;
}
:is(body.view-article, body.view-archive, body.itemid-980, body.itemid-941) .mvi-postnav__grid {
display: grid;
/* minmax(0,1fr) statt 1fr: 1fr = minmax(auto,1fr) lässt die Spalte nicht unter
ihr min-content (= längstes unteilbares Wort) schrumpfen — ein langes
Kompositum wie „Instrumentalausbildung" sprengt sonst auf schmalen Viewports
(≤520) die Spalte und schiebt die rechte Card über den Viewport-Rand.
minmax(0,…) erlaubt das Schrumpfen; bei genug Platz identisch zu 1fr. */
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: var(--space-4);
}
:is(body.view-article, body.view-archive, body.itemid-980, body.itemid-941) .mvi-postnav__card {
display: flex;
flex-direction: column;
gap: 0;
padding: var(--space-4) var(--space-5); /* 16 / 24 px (kompakt) */
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
text-decoration: none;
color: inherit;
transition: transform var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out);
}
:is(body.view-article, body.view-archive, body.itemid-980, body.itemid-941) .mvi-postnav__card:hover,
:is(body.view-article, body.view-archive, body.itemid-980, body.itemid-941) .mvi-postnav__card:focus-visible {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
text-decoration: none;
}
:is(body.view-article, body.view-archive, body.itemid-980, body.itemid-941) .mvi-postnav__card:focus-visible {
outline: 2px solid var(--brand-gold);
outline-offset: 2px;
}
:is(body.view-article, body.view-archive, body.itemid-980, body.itemid-941) .mvi-postnav__card--next {
text-align: right;
}
:is(body.view-article, body.view-archive, body.itemid-980, body.itemid-941) .mvi-postnav__eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-body);
font-size: 10px;
font-weight: 700;
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--fg-muted);
}
:is(body.view-article, body.view-archive, body.itemid-980, body.itemid-941) .mvi-postnav__card--next .mvi-postnav__eyebrow {
align-self: flex-end;
}
:is(body.view-article, body.view-archive, body.itemid-980, body.itemid-941) .mvi-postnav__arrow {
font-family: var(--font-body);
font-size: 14px;
line-height: 1;
font-weight: 400;
}
:is(body.view-article, body.view-archive, body.itemid-980, body.itemid-941) .mvi-postnav__date {
display: block;
font-family: var(--font-body);
font-size: var(--fs-xs); /* 12 px (kompakt) */
color: var(--fg-muted);
margin-top: var(--space-1); /* 4 px */
}
:is(body.view-article, body.view-archive, body.itemid-980, body.itemid-941) .mvi-postnav__title {
font-family: var(--font-display);
font-weight: 600;
font-size: var(--fs-md); /* 18 px (kompakt) */
line-height: 1.25;
letter-spacing: -0.005em;
color: var(--brand-bordeaux);
margin-top: var(--space-1); /* 4 px */
/* Lange Kompositwörter (z. B. „Instrumentalausbildung") im schmalen Mobile-Slot
umbrechen lassen statt überlaufen — härtet die geteilten Postnav-Regeln gegen
künftige lange Titel (Paar zu minmax(0,1fr) am __grid). */
overflow-wrap: anywhere;
}
/* Placeholder hält die Grid-Spalte frei, wenn prev oder next fehlt. */
:is(body.view-article, body.view-archive, body.itemid-980, body.itemid-941) .mvi-postnav__placeholder {
display: block;
}
/* Mobile (≤ 520): bleibt 2-spaltig, aber kompakt — nur Eyebrow + Datum
(kein Titel). Breakout deaktiviert. */
@media (max-width: 520px) {
body.view-article .com-content-article > .mvi-postnav {
position: static;
width: auto;
transform: none;
left: auto;
padding: var(--space-6) 0 var(--space-7);
}
:is(body.view-article, body.view-archive, body.itemid-980, body.itemid-941) .mvi-postnav__inner {
padding-left: 0;
padding-right: 0;
}
/* Grid bleibt 1fr 1fr (Desktop-Default) — kein Single-Column-Override. */
:is(body.view-article, body.view-archive, body.itemid-980, body.itemid-941) .mvi-postnav__card {
padding: var(--space-3) var(--space-4); /* 12 16 */
}
:is(body.view-article, body.view-archive, body.itemid-980, body.itemid-941) .mvi-postnav__eyebrow {
font-size: 10px;
}
:is(body.view-article, body.view-archive, body.itemid-980, body.itemid-941) .mvi-postnav__date {
font-size: 13px;
}
:is(body.view-article, body.view-archive, body.itemid-980, body.itemid-941) .mvi-postnav__title {
display: none;
}
}
/* R3 Fix 4: Über-Uns-Prev/Next zeigt auf Mobile den SEITENTITEL, nicht
den Subtitle. Generisch (Aktuelles) blendet ≤520 den __title aus und
zeigt nur __date (= Datum) — bei Über-Uns ist __date aber der
Untertitel („Holz · Blech · Schlag") und __title der Seitenname
(„Unsere Register"). Daher SPEZIFISCH für die 4 Über-Uns-Itemids:
__title wieder einblenden, __date (Untertitel) ausblenden → Card =
Eyebrow + Seitentitel. Kein generisches Verhalten. */
@media (max-width: 520px) {
body.itemid-1002 .mvi-postnav__title,
body.itemid-979 .mvi-postnav__title,
body.itemid-937 .mvi-postnav__title,
body.itemid-938 .mvi-postnav__title,
body.itemid-939 .mvi-postnav__title,
body.itemid-940 .mvi-postnav__title,
body.itemid-941 .mvi-postnav__title,
body.itemid-1244 .mvi-postnav__title,
body.itemid-1245 .mvi-postnav__title,
body.itemid-982 .mvi-postnav__title,
body.itemid-983 .mvi-postnav__title,
body.itemid-975 .mvi-postnav__title,
body.itemid-976 .mvi-postnav__title,
body.itemid-977 .mvi-postnav__title,
body.itemid-978 .mvi-postnav__title,
body.itemid-998 .mvi-postnav__title,
body.itemid-981 .mvi-postnav__title,
body.itemid-980 .mvi-postnav__title {
display: block;
}
body.itemid-1002 .mvi-postnav__date,
body.itemid-979 .mvi-postnav__date,
body.itemid-937 .mvi-postnav__date,
body.itemid-938 .mvi-postnav__date,
body.itemid-939 .mvi-postnav__date,
body.itemid-940 .mvi-postnav__date,
body.itemid-941 .mvi-postnav__date,
body.itemid-1244 .mvi-postnav__date,
body.itemid-1245 .mvi-postnav__date,
body.itemid-982 .mvi-postnav__date,
body.itemid-983 .mvi-postnav__date,
body.itemid-975 .mvi-postnav__date,
body.itemid-976 .mvi-postnav__date,
body.itemid-977 .mvi-postnav__date,
body.itemid-978 .mvi-postnav__date,
body.itemid-998 .mvi-postnav__date,
body.itemid-981 .mvi-postnav__date,
body.itemid-980 .mvi-postnav__date {
display: none;
}
}
/* === S-11: ÜBER-UNS — 2-Spalten + Sidebar + Stats + Titel/Eyebrow ========= */
/* Greift auf body.has-sidebar-left (Joomla setzt das, sobald ein Modul auf
sidebar-left zugewiesen ist — hier NUR die 4 Über-Uns-Itemids
1002/979/937/938). NICHT mehr an view-article gebunden: itemid-938
(Archivierte Beiträge) ist view-archive (Diagnose 2026-05-17), würde
sonst aus Sidebar + 2-Spalten-Grid herausfallen. Startseite hat kein
sidebar-left-Modul → unberührt. Gemeinsamer Parent = die Cassiopeia
`.site-grid` (siehe DECISIONS 2026-05-17). */
/* --- Fix 1: 2-Spalten + FULL-BLEED-Banner, Desktop ≥1051 ----------------
Banner muss wie Startseite/Seefest über die VOLLE Viewport-Breite
(1280) gehen. Cassiopeias Basis-Grid hat dafür [full-start]/[full-end]-
Lines; die frühere S-11-`grid-template-columns` (fixe Spalten ohne
diese Lines) kappte den Banner auf 1232. Lösung: eigene Lines, Banner
spannt full-start/full-end; Sidebar/Gap/Content per Line platziert.
Äußere Spalten = `minmax(var(--gutter),1fr)` → wachsen auf breiten
Viewports und ZENTRIEREN den 2-Spalten-Block; Minimum --gutter (24)
auf schmalen. Content-Spalte gecappt auf
`--container-wide − sidebar − gap` (= 1320−280−56 = 984) → der
Block (Sidebar+Gap+Content) ist max --container-wide (1320), zentriert
— wie der restliche Site-Content. R4-Fix der R3-Regression: R3 hatte
feste 24-Außenspalten + `1fr`-Content → Content wuchs unbegrenzt
(@1920 ≈ 1536 px, full-bleed statt zentriert). @1280 identisch zu R3
(24/24, Content 896 — Symmetrie/Token bleibt). Banner spannt weiter
full-start/full-end = volle Viewport-Breite (Fullbleed unberührt).
(Diagnose 2026-05-18 @1280/1680/1920.) */
@media (min-width: 1051px) {
body.has-sidebar-left .site-grid {
grid-template-columns:
[full-start] minmax(var(--gutter), 1fr)
[main-start] var(--ueber-sidebar-w)
[gap-start] var(--ueber-col-gap)
[content-start] minmax(0, calc(var(--container-wide) - var(--ueber-sidebar-w) - var(--ueber-col-gap)))
[main-end] minmax(var(--gutter), 1fr) [full-end];
grid-template-areas: none;
column-gap: 0;
}
body.has-sidebar-left .container-banner {
grid-column: full-start / full-end;
grid-row: 1;
}
body.has-sidebar-left .container-sidebar-left {
grid-column: main-start / gap-start;
grid-row: 2;
/* Fix 3: bündig mit dem Breadcrumb. Content (.item-page) hat
padding-top --space-7 (48); zusätzlich sitzt die Content-Box in
derselben Grid-Row strukturell 16 px (=--space-4) tiefer als der
Sidebar-Container (gemessen 2026-05-17) → +--space-4, damit der
Eyebrow exakt auf Breadcrumb-Höhe startet.
Default-Pfad gilt für Hero-Seiten (Über-Uns + Jugend) — Sidebar
ist initial NICHT sticky (Hero in Row 1 schiebt Row 2 unter den
sticky-Top 120 px). S-14-Sponsoren-Override siehe direkt unten. */
padding-top: calc(var(--space-7) + var(--space-4));
position: sticky;
top: 120px;
align-self: start;
}
/* S-14-Sponsoren (2026-05-21): Hero-lose Sidebar-Seiten — Sidebar ist
ab Frame 1 sticky aktiv, weil Grid-Row-2-Default (~88, direkt unter
Header) unter `top: 120px` liegt → sticky kicks in. Der +16-px-Grid-
Strukturversatz ist hier nicht relevant (kein Hero in Row 1).
Stattdessen: Eyebrow bündig zum Breadcrumb via padding-top --space-6
(32 = sticky-Top 120 − Header-h 88, kompensiert den Sticky-Sprung).
`:not(:has(.container-banner))` erkennt Hero-Abwesenheit strukturell
— kein Itemid-Match nötig, wirkt auf jede künftige Hero-lose Sidebar-
Seite (z. B. „Sponsor werden" 983, „Bilder"/„Kontakte" nach mod_
custom-Swap). */
body.has-sidebar-left:not(:has(.container-banner)) .container-sidebar-left {
padding-top: var(--space-6);
}
body.has-sidebar-left .container-component {
grid-column: content-start / main-end;
grid-row: 2;
}
/* Content füllt seine (jetzt auf --container-wide gecappte, zentrierte)
Spalte → Box-Rechts == Spalten-Rechts, symmetrisch zur Sidebar
(S-10-max-width/Zentrierung aus; R3 Fix 2 + R4-Cap). */
body.has-sidebar-left .com-content-article.item-page {
margin-left: 0;
max-width: none;
}
}
/* 992–1050: Projekt-`.site-grid`-Desktop-Override (≥992) macht sonst
2-spaltig — für den scoped Fall auf gestapelt zurück (comp über side-l,
wie Mobile-Default <992). */
@media (min-width: 992px) and (max-width: 1050px) {
body.has-sidebar-left .site-grid {
grid-template-areas:
". banner banner banner banner ."
". comp comp comp comp ."
". side-l side-l side-l side-l ."
". side-r side-r side-r side-r ."
". bot-a bot-a bot-a bot-a ."
". bot-b bot-b bot-b bot-b ."
". bot-c bot-c bot-c bot-c ."
". bot-d bot-d bot-d bot-d .";
}
}
/* --- Mockup-Parität: Über-Uns-Sidebar ist DESKTOP-ONLY ------------------
Das Mockup blendet die „Über Uns"-Sidebar ≤1050 px komplett aus
(Hamburger-Hauptnav genügt) — Live stapelte sie zuvor als großen
Bordeaux-Block unter den Content. Bewusste Revision der früheren
S-11-Stacking-Entscheidung (User-Auftrag „alles ans Mockup",
Diagnose 2026-05-17). Leere `side-l`-Grid-Area ohne Element → 0-Höhe,
kein Gap. */
@media (max-width: 1050px) {
body.itemid-1002 .container-sidebar-left,
body.itemid-979 .container-sidebar-left,
body.itemid-937 .container-sidebar-left,
body.itemid-938 .container-sidebar-left,
body.itemid-939 .container-sidebar-left,
body.itemid-940 .container-sidebar-left,
body.itemid-941 .container-sidebar-left,
body.itemid-1244 .container-sidebar-left,
body.itemid-1245 .container-sidebar-left,
body.itemid-982 .container-sidebar-left,
body.itemid-983 .container-sidebar-left,
body.itemid-975 .container-sidebar-left,
body.itemid-976 .container-sidebar-left,
body.itemid-977 .container-sidebar-left,
body.itemid-978 .container-sidebar-left,
body.itemid-998 .container-sidebar-left,
body.itemid-981 .container-sidebar-left,
body.itemid-980 .container-sidebar-left {
display: none;
}
}
/* --- Fix 2: Sidebar = mod_custom „.mvi-about-side" (Mockup-exakt) -------- */
/* Ersetzt das frühere mod_menu (hatte kein Untertitel-Feld). Markup:
docs/ueber-uns-sidebar.html (Modul nur auf Itemids 1002/979/937/938).
Aktiver Zustand OHNE Backend-PHP: Joomla setzt body.itemid-NNNN, der
Link trägt data-itemid="NNNN" → reines CSS-Match (:is()-Gruppe unten).
Px-Werte = Mockup-exakt (kein Spacing-Token deckt 18/14/13/17/12 px),
konsistent zum etablierten S-11-Muster; Farben/Radius/Border = Token. */
/* Cassiopeia rendert das Sidebar-Modul als EIN Element
`.sidebar-left.card` (Compound, NICHT `.sidebar-left .card`!) mit
1px-Border + `margin:16px 0`, darin `.card-body` mit `padding:16px`.
Ohne Reset: Komponente 280→246 px, +17 px Versatz, 16 px tiefer.
Compound-Selektor + card-body-Reset → volle 280-px-Track-Breite,
bündig oben (Diagnose 2026-05-17, Live-Ahnenkette). */
.sidebar-left.card:has(.mvi-about-side),
.sidebar-left.card:has(.mvi-about-side) .card-body {
margin: 0;
padding: 0;
border: 0;
background: none;
box-shadow: none;
}
.mvi-about-side {
display: flex;
flex-direction: column;
gap: 18px; /* Mockup sideWrap-gap */
}
.mvi-about-side__head {
display: flex;
flex-direction: column;
gap: 6px; /* Mockup Eyebrow → Titel */
padding: 0 0 var(--space-4); /* Mockup 0 0 16 */
border-bottom: var(--border-w-thin) solid var(--border-subtle);
}
.mvi-about-side__eyebrow {
font-family: var(--font-body);
font-size: 11px; /* Mockup-Eyebrow 11/600 */
font-weight: 600;
line-height: 1.55;
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
color: var(--brand-bordeaux);
}
.mvi-about-side__title {
margin: 0;
font-family: var(--font-display);
font-size: 28px; /* Mockup-Titel 28/600 */
font-weight: 600;
line-height: 1.1;
letter-spacing: -0.005em; /* Mockup -0.14px @28 */
color: var(--fg-primary); /* Mockup: Anthrazit, nicht Bordeaux */
}
.mvi-about-side__nav {
display: flex;
flex-direction: column;
gap: 2px; /* Mockup nav-gap */
}
.mvi-about-side__link {
position: relative; /* Anker für ::after-Chevron */
display: grid;
grid-template-columns: 32px 1fr; /* num | body (Chevron = absolut) */
align-items: center;
gap: var(--space-3); /* Mockup 12 */
padding: var(--space-3) 30px var(--space-3) 14px; /* rechts Platz für Chevron */
border-radius: var(--radius-md); /* Mockup 8 */
color: var(--fg-default); /* inaktiv Anthrazit (User 2026-05-17) */
text-decoration: none;
transition: background-color var(--dur-base) var(--ease-out),
color var(--dur-base) var(--ease-out);
}
.mvi-about-side__num {
font-family: var(--font-display);
font-size: 13px; /* Mockup-Num 13/400 */
font-weight: 400;
font-style: italic; /* Mockup-Num Spectral italic */
line-height: 1.55;
color: var(--brand-gold-deep); /* Mockup inaktiv #9a7826 */
font-variant-numeric: tabular-nums;
}
.mvi-about-side__body {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.mvi-about-side__label {
font-family: var(--font-display);
font-size: 17px; /* Mockup-Label 17/500 */
font-weight: 500;
line-height: 1.25;
letter-spacing: -0.005em; /* Mockup -0.085px @17 */
color: var(--fg-default); /* inaktiv Anthrazit (User 2026-05-17) */
}
.mvi-about-side__hint {
font-family: var(--font-body);
font-size: 12px; /* Mockup-Hint 12/400 */
font-weight: 400;
line-height: 1.55;
letter-spacing: 0.02em; /* Mockup 0.24px @12 */
color: var(--fg-secondary); /* inaktiv dezent (User 2026-05-17) */
}
/* Fix 6: Chevron als CSS-`::after` (NICHT mehr als
. Wir entfernen Background/Border/Padding, damit die
Section bündig vom Page-Cream auf das eigene weiße Karten-Layout übergeht. */
body.view-featured .container-bottom-a > .card,
body.view-featured .container-bottom-a > .card > .card-body {
background: transparent;
border: 0;
padding: 0;
margin: 0;
box-shadow: none;
border-radius: 0;
}
/* Edge-to-Edge-Breakout für bottom-a — site-grid lässt 16 px Gutter L/R, wir
ziehen die Section auf volle Viewport-Breite (gleich wie Termine/Aktuelles). */
body.view-featured .container-bottom-a .mvi-section--ensembles {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
/* Grid-Wrapper: 2 Spalten Desktop+Tablet, 1 Spalte Mobile. ----------------- */
.mvi-ensembles {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-6); /* 32 */
}
/* Karte: weiße Surface mit dezenter Border + xs-Shadow, gleiche Sprache wie
.mvi-card (Aktuelles). Overflow:hidden klippt das Photo am border-radius.
Hover-/Focus-Within-Effekt 1:1 aus S-4 übernommen (translateY -2 +
shadow-md, 220 ms ease-out). Cursor bleibt default auf der Card — pointer
nur auf den klickbaren Elementen (.mvi-ens__photo-link, .mvi-ens__more),
analog .mvi-card in S-4: Text/Stats sind nicht klickbar, Hover-Lift
trotzdem auf der gesamten Card. */
.mvi-ens {
display: flex;
flex-direction: column;
background: var(--bg-surface);
border: var(--border-w-thin) solid var(--border-subtle);
border-radius: var(--radius-lg); /* 14 */
box-shadow: var(--shadow-xs);
overflow: hidden;
transition: transform var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out);
}
.mvi-ens:hover,
.mvi-ens:focus-within {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
/* Foto-Link: wrappt das .mvi-ens__photo-Div in einen Anchor — Klick aufs
Bild öffnet die jeweilige Ensemble-Detailseite (Aktive Kapelle /
Jugendkapelle). Analog zu .mvi-card__photo-link in S-4. */
.mvi-ens__photo-link {
display: block;
text-decoration: none;
color: inherit;
-webkit-tap-highlight-color: transparent;
}
.mvi-ens__photo-link:focus-visible {
outline: 2px solid var(--brand-gold);
outline-offset: 2px;
}
/* Foto: full-bleed Card-Top, aspect-ratio 4/3 Desktop, 16/9 ab Tablet.
Wird als background-image über Inline-Style vom Snippet gesetzt — kein
![]()
, damit object-fit / object-position trivial steuerbar bleibt und der
Browser direkt mit background-size cover arbeitet. */
.mvi-ens__photo {
width: 100%;
aspect-ratio: 4 / 3;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: var(--neutral-sand); /* Fallback bei ladenden Bildern */
}
/* JUKA-Foto: `background-size: 115%` (statt cover) zoomt das 4:3-Bild
leicht hinein → auch auf Desktop (4:3-Box) entsteht jetzt 15 % Overflow
zum Pannen (vorher cover = kein Desktop-Crop). `background-position:
60% 15%` schiebt den Ausschnitt nach rechts (weg von den Fahrrädern am
linken Rand) und nach oben (der „JUKA"-Banner bleibt sichtbar). 115 %
per Crop-Sim als Optimum gewählt: 120 % schnitt den Banner oben an,
110 % ließ die Fahrräder zu sichtbar. Scoped via aria-label, damit
Aktive Kapelle + S-4-Karten (.mvi-photo) unberührt bleiben. */
.mvi-ens__photo[aria-label*="Jugendkapelle"] {
background-size: 115%;
background-position: 60% 15%;
}
/* Body-Block: Padding 48 (Desktop) / 32 (Tablet) / 24 (Mobile), kleine vertikale
Gap zwischen Role/Title/Lead/Stats. */
.mvi-ens__body {
display: flex;
flex-direction: column;
gap: var(--space-3); /* 12 — Preview misst 14, --space-3 hält 8-Grid */
padding: var(--space-7); /* 48 */
}
/* Role-Badge: gleicher Eyebrow-Stil wie Section-Eyebrow, mit eigenem
::before-Strich in der jeweiligen Modifier-Farbe (currentColor). Section-
Eyebrow nutzt 28 × 1.5 in gold; Card-Eyebrow ist 24 × 1.5 — kürzer, weil
im engeren Card-Body kompakter wirkend. Modifier --bordeaux/--green setzt
die Color, der Strich erbt sie via currentColor. */
.mvi-ens__role {
display: inline-flex;
align-items: center;
gap: var(--space-2); /* 8 — kompakter als Section-Default 12, entspricht Preview-Wert 10 (auf nächstes Token gerundet) */
align-self: flex-start;
font-family: var(--font-body);
font-size: var(--fs-xs); /* 12 — Preview hat 11, Token-Annäherung wie Section-Eyebrow Mobile */
font-weight: 700;
text-transform: uppercase;
letter-spacing: var(--ls-eyebrow); /* 0.16em */
color: var(--brand-bordeaux);
margin: 0;
}
.mvi-ens__role::before {
content: "";
display: block;
width: 24px;
height: var(--border-w-default); /* 1.5 */
background: currentColor;
flex: 0 0 auto;
}
.mvi-ens__role--bordeaux { color: var(--brand-bordeaux); }
.mvi-ens__role--green { color: var(--brand-green); }
/* Card-Title: Spectral wie Section-Title, aber kleiner (Card-Hierarchie).
32 / 26 / 24 entsprechen Preview-Werten — analog zur Foundation .mvi-section__title
(44/36/28) sind das custom px-Werte (off Token-Set), weil das Mockup
spezifische Schriftgrößen pro Stufe wählt.
`hyphens: auto` erlaubt Silbentrennung (z.B. „Jugend-/kapelle") bei sehr
schmalen Cards. Tritt nur am Übergang Mobile→Tablet auf (VP 521–539,
Card-Body-Inner 159–168 px, „Jugendkapelle" natürliche Breite 168 px).
Ohne Hyphenation bräche der Browser hart im Wort um (overflow-wrap:
break-word vom Cassiopeia-Default). `lang="de-de"` ist auf
gesetzt → der Browser nutzt das deutsche Silbentrennungs-Wörterbuch. */
.mvi-ens__title {
margin: 0;
font-family: var(--font-display);
font-size: 32px;
font-weight: 600;
line-height: var(--lh-tight); /* 1.15 */
letter-spacing: var(--ls-tight); /* -0.005em */
color: var(--brand-bordeaux);
hyphens: auto;
-webkit-hyphens: auto;
/* Wort min 7 Zeichen, mind. 4 vor und 3 nach dem Strich. Verhindert, dass
der Browser kurze Wörter wie „Aktive" (6) in „Akti-ve" zerlegt — bei
mehrwortigen Titeln wird stattdessen am Leerzeichen umbrochen
(„Aktive | Kapelle"). Lange Komposita ohne Leerzeichen wie
„Jugendkapelle" (13) werden weiterhin sauber an Silbe getrennt
(„Jugend-kapelle"). */
hyphenate-limit-chars: 7 4 3;
-webkit-hyphenate-limit-before: 4;
-webkit-hyphenate-limit-after: 3;
}
/* Lead-Text: gleiche Lesetypografie wie .mvi-card__lead in Aktuelles. */
.mvi-ens__lead {
margin: 0;
font-family: var(--font-body);
font-size: var(--fs-base); /* 16 */
font-weight: 400;
line-height: var(--lh-normal); /* 1.55 */
color: var(--fg-primary);
}
/* Stats-Cluster: 3 Spalten flex row mit fester Gap. Margin-top trennt vom
Lead-Block; border-top + padding-top setzen einen visuellen Trennstrich
zwischen Beschreibung und Stats (Preview-Match: 1 px border-subtle,
padding 16).
`flex-wrap: wrap` schützt vor Overflow bei langen Stat-Werten
(„Freitags" + „1896" zusammen sprengen bei Tablet-Range 521–833 die
Card-Breite). Bei Overflow bricht das letzte Stat auf eine zweite Zeile;
`row-gap` ist kleiner als `column-gap`, damit der vertikale Wrap-Abstand
nicht überzogen wirkt. Preview hat `nowrap` — funktioniert dort nur mit
sehr kurzen Stat-Werten (60/28/150). */
.mvi-ens__stats {
display: flex;
flex-direction: row;
flex-wrap: wrap;
column-gap: var(--space-5); /* 24 */
row-gap: var(--space-3); /* 12 */
margin-top: var(--space-2); /* 8 */
padding-top: var(--space-4); /* 16 */
border-top: var(--border-w-thin) solid var(--border-subtle);
}
/* Einzelne Stat: vertikal gestapelt — große Zahl/Kurzwert oben, Label klein
darunter. Inline-flex erlaubt natürliche Min-Width, kein Stretch. */
.mvi-ens__stat {
display: inline-flex;
flex-direction: column;
gap: var(--space-1); /* 4 */
}
/* Number/Headline-Slot: 28 px Spectral 600. Negative letter-spacing -0.01em
per --ls-display für dichtere Optik (Preview misst -0.02em — wir nutzen
den nächstgelegenen Token). */
.mvi-ens__stat-num {
font-family: var(--font-display);
font-size: var(--fs-xl); /* 28 */
font-weight: 600;
line-height: 1;
letter-spacing: var(--ls-display); /* -0.01em */
color: var(--fg-primary);
}
/* Label-Slot: 11 px (off Token-Set wie Eyebrow Mobile), getrackt 0.08em.
Color = muted-grey, gleicher Token wie Termine-Tile-Meta. */
.mvi-ens__stat-lbl {
font-family: var(--font-body);
font-size: 11px;
font-weight: 400;
line-height: 1.4;
letter-spacing: 0.08em; /* zwischen --ls-wide 0.04 und --ls-eyebrow 0.16 */
color: var(--fg-muted);
}
/* Mehr-erfahren-Link: reiner Text-Link am Ende des Bodys. Analog .mvi-card__link
(Aktuelles) in Farbe + Schrift, aber OHNE border-bottom (User-Vorgabe).
Hover wechselt nur die Farbe — kein zusätzliches Unterstrich-Element. */
.mvi-ens__more {
align-self: flex-start;
margin-top: var(--space-2); /* 8 — Body-gap (12) + 8 = 20 zwischen Stats-Bottom und Link */
font-family: var(--font-body);
font-size: var(--fs-sm); /* 14 */
font-weight: 600;
color: var(--brand-bordeaux);
text-decoration: none;
white-space: nowrap;
-webkit-tap-highlight-color: transparent;
transition: color var(--dur-fast) var(--ease-out);
}
.mvi-ens__more:hover,
.mvi-ens__more:focus-visible {
color: var(--brand-bordeaux-deep);
}
.mvi-ens__more:focus-visible {
outline: 2px solid var(--brand-gold);
outline-offset: 3px;
}
/* Responsive Tablet (521–1050) ------------------------------------------- */
@media (max-width: 1050px) {
/* Photo wechselt auf 16/9 — mehr Breite, kompaktere Karten-Höhe, weil
Karten auf Tablet nebeneinander sehr schmal werden (~300 px). */
.mvi-ens__photo {
aspect-ratio: 16 / 9;
}
/* Grid-Gap auf Tablet enger (24 statt 32) — bei 300-px-Karten wirkt 32 zu
viel Luft. Preview-Match. */
.mvi-ensembles {
gap: var(--space-5); /* 24 */
}
.mvi-ens__body {
padding: var(--space-6); /* 32 */
}
.mvi-ens__title {
font-size: 26px;
}
/* Stat-num kleiner auf Tablet — Preview reduziert von 28 auf 24, damit die
3 Stats nebeneinander in der schmalen Card nicht überlaufen. */
.mvi-ens__stat-num {
font-size: 24px;
}
/* Section-Sub im Header analog zu Aktuelles ausblenden — Eyebrow + Title
reichen auf schmaleren Viewports, der Sub-Lead drückt sonst die Karten
unnötig nach unten. */
.mvi-section--ensembles .mvi-section__sub {
display: none;
}
}
/* Responsive Mobile (≤ 520) ----------------------------------------------- */
@media (max-width: 520px) {
.mvi-ensembles {
grid-template-columns: 1fr;
gap: var(--space-5); /* 24 */
}
.mvi-ens__body {
padding: var(--space-5); /* 24 — Preview misst 22, --space-5 hält 8-Grid */
}
.mvi-ens__title {
font-size: 24px;
}
/* Stat-num auf Mobile noch eine Stufe kleiner (22 statt 24) — Preview-Match. */
.mvi-ens__stat-num {
font-size: 22px;
}
}
/* === PHASE 3 · MUSIKALISCHE AUSBILDUNG (S-6) ============================== */
/* Statischer mod_custom-Block auf Position bottom-b (Snippet docs/ausbildung.html).
Drei Stufen-Karten (Früherziehung / Blockflöte / Instrumentalausbildung) mit
Badge (AB X JAHRE — dreigeteilt: kleines „AB" / große Zahl / „Jahre"), Title,
Lead-Text und Mehr-erfahren-Link. Sektion-Background ist sand, hebt sich
vom weißen Page-Hintergrund ab und gruppiert die drei Stufen optisch. */
/* Cassiopeia card-chrome Neutralizer für bottom-b (analog top-a/top-b und
bottom-a). Joomla wrappt mod_custom in
. */
body.view-featured .container-bottom-b > .card,
body.view-featured .container-bottom-b > .card > .card-body {
background: transparent;
border: 0;
padding: 0;
margin: 0;
box-shadow: none;
border-radius: 0;
}
/* Edge-to-Edge-Breakout — gleiches Pattern wie Termine/Aktuelles/Ensembles. */
body.view-featured .container-bottom-b .mvi-section--ausbildung {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
/* Sektion-Hintergrund Sand — unterscheidet diese „Stufen"-Sektion vom weißen
Ensembles-Block direkt darüber. */
.mvi-section--ausbildung {
background: var(--bg-surface-warm); /* sand #efe7d6 */
}
/* Grid-Wrapper: 3 Spalten auf Desktop + Tablet, 1 Spalte auf Mobile.
Card-Breiten sind gleichmäßig (kein Content-Sizing) — alle drei Stufen
bekommen visuell denselben Raum. */
.mvi-ausbildung-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-5); /* 24 */
}
/* Karte: weiße Surface mit dünner Border subtil + dickem Gold-Top-Akzent.
Border-Setup ist identisch zur Termine-Tile-Sprache (`.mvi-event-tile` hat
ebenfalls 1px subtle umlaufend + 3px Modifier-Akzent oben) — die Gold-
Linie hebt die Ausbildungs-Stufe als „Akzent-Block" hervor und harmoniert
mit dem Gold-deep der Altersziffer im Badge. */
.mvi-ausbildung-card {
display: flex;
flex-direction: column;
gap: var(--space-3); /* 12 */
background: var(--bg-surface);
border: var(--border-w-thin) solid var(--border-subtle);
border-top: var(--border-w-strong) solid var(--brand-gold);
border-radius: var(--radius-md); /* 8 */
box-shadow: var(--shadow-xs);
padding: var(--space-6); /* 32 */
transition: transform var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out);
}
.mvi-ausbildung-card:hover,
.mvi-ausbildung-card:focus-within {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
/* Age-Badge: drei-Spans-Cluster mit gemeinsamer Baseline (kleines „AB"
versetzt zur großen Zahl). flex row mit gap 8 hält die Spans dicht
beieinander; align-items: baseline sorgt für optisches „auf einer Linie"
trotz drei verschiedener Font-Sizes. */
.mvi-ausbildung-card__age {
display: flex;
flex-direction: row;
align-items: baseline;
gap: var(--space-2); /* 8 */
}
/* "ab" → AB: kleines Source-Sans-Label in Muted-Grey, uppercase + getrackt.
13 px ist off-Token (Preview-Wert), nutzen wir 1:1 wie Stat-Lbl-Pattern. */
.mvi-ausbildung-card__age-prefix {
font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
line-height: 1.55;
letter-spacing: var(--ls-wide); /* 0.04em */
text-transform: uppercase;
color: var(--fg-muted);
}
/* Die Altersziffer ist das visuelle Highlight: 56 px Spectral 600 in
Gold-Deep. Verwendet --ls-display (-0.01em) als nächstgelegener Token
zum Preview's -0.02em (siehe Stat-Num-Decision in S-5). */
.mvi-ausbildung-card__age-num {
font-family: var(--font-display);
font-size: 56px;
font-weight: 600;
line-height: 1;
letter-spacing: var(--ls-display); /* -0.01em */
color: var(--brand-gold-deep);
}
/* „Jahre" — kleinere Spectral-Variante in derselben Gold-Farbe. */
.mvi-ausbildung-card__age-unit {
font-family: var(--font-display);
font-size: var(--fs-md); /* 18 */
font-weight: 500;
line-height: 1.55;
color: var(--brand-gold-deep);
}
/* Card-Title: Spectral wie Section-Title, kleiner (Card-Hierarchie).
22 / 20 / 20 entspricht Preview-Werten — die Tablet+Mobile-Reduktion auf
20 hält die Card kompakt auf engen Viewports. */
.mvi-ausbildung-card__title {
margin: 0;
font-family: var(--font-display);
font-size: var(--fs-lg); /* 22 */
font-weight: 600;
line-height: var(--lh-snug); /* 1.3 — Preview 1.25, Token-Annäherung */
color: var(--brand-bordeaux);
/* Konsistent zur Ensembles-Card: lange Komposita („Instrumentalausbildung")
werden bei sehr schmalen Viewports an Silben getrennt statt mitten im
Wort gebrochen. Siehe DECISIONS „S-5 Title-Wrap-Fix". */
hyphens: auto;
-webkit-hyphens: auto;
hyphenate-limit-chars: 7 4 3;
-webkit-hyphenate-limit-before: 4;
-webkit-hyphenate-limit-after: 3;
}
/* Lead-Text: dieselbe Lese-Typografie wie .mvi-card__lead (Aktuelles), aber
1 Punkt kleiner (14 statt 16) — der Card-Body hier ist kompakter. */
.mvi-ausbildung-card__text {
margin: 0;
font-family: var(--font-body);
font-size: var(--fs-sm); /* 14 */
font-weight: 400;
line-height: var(--lh-normal); /* 1.55 */
color: var(--fg-secondary);
}
/* Mehr-erfahren-Link: Foundation-Variante mit Bordeaux-Border-Bottom (anders
als .mvi-ens__more in S-5 — dort hat User explizit keinen Border verlangt;
hier folgen wir dem Preview-Design, das den Border zeigt). */
.mvi-ausbildung-card__link {
align-self: flex-start;
margin-top: var(--space-1); /* 4 — Card-Gap deckt schon 12 ab, kleine Zusatz-Distanz */
font-family: var(--font-body);
font-size: var(--fs-sm); /* 14 */
font-weight: 600;
color: var(--brand-bordeaux);
text-decoration: none;
border-bottom: var(--border-w-thin) solid var(--brand-bordeaux);
padding: 0 0 2px;
white-space: nowrap;
-webkit-tap-highlight-color: transparent;
transition: color var(--dur-fast) var(--ease-out),
border-color var(--dur-fast) var(--ease-out);
}
.mvi-ausbildung-card__link:hover,
.mvi-ausbildung-card__link:focus-visible {
color: var(--brand-bordeaux-deep);
border-bottom-color: var(--brand-bordeaux-deep);
}
.mvi-ausbildung-card__link:focus-visible {
outline: 2px solid var(--brand-gold);
outline-offset: 3px;
}
/* Responsive Tablet (521–899) -------------------------------------------- */
/* Grid kollabiert ab VP < 900 auf single-column. Bewusste Abweichung vom
globalen Projekt-Breakpoint (1050): bei VP 900–1050 sind 3 schmale Cards
à ~270 px noch lesbar und harmonisch — single-column dort würde die Cards
unnötig breit machen. Bei VP < 900 (insb. 600–768) wären 3 Cards mit
minmax(0, 1fr) so eng, dass Titel mitten im Wort umbrochen würden;
single-column gibt jedem Card die volle Inner-Breite. */
@media (max-width: 899px) {
.mvi-ausbildung-grid {
grid-template-columns: 1fr;
gap: var(--space-4); /* 16 — vertikale Lücke zwischen den 3 gestapelten Cards */
}
.mvi-ausbildung-card {
padding: var(--space-5); /* 24 */
}
.mvi-ausbildung-card__title {
font-size: var(--fs-md); /* 18 — Token-Annäherung zum Preview-Tablet-Wert */
}
/* Section-Sub im Header analog zu Aktuelles/Ensembles ausblenden — auf
schmaleren Viewports reichen Eyebrow + Title als Section-Intro. */
.mvi-section--ausbildung .mvi-section__sub {
display: none;
}
}
/* Responsive Mobile (≤ 520) ----------------------------------------------- */
/* Mobile erbt Single-Column-Grid + Card-Padding + Title-Size aus dem Tablet-
Block. Nur die age-num-Größe variiert (Mobile etwas kleiner, da Body-
Padding hier 24 ist und mehr vertical-rhythm ausgleicht). */
@media (max-width: 520px) {
.mvi-ausbildung-card__age-num {
font-size: 48px;
}
}
/* === PHASE 3 · GRID-EXTENSION für bottom-c / bottom-d ==================== */
/* Cassiopeia's site-grid `grid-template-areas` kennt nur bot-a und bot-b.
Damit unsere zusätzlichen Positionen bottom-c (Seefest, S-7) und bottom-d
(Sponsoren, S-8) im Grid landen — und nicht auf `grid-area: auto`
springen, was sie überlappend mit top-a rendern würde — erweitern wir die
Grid-Areas explizit. Sowohl Mobile (Default) als auch Desktop (≥992px)
Variante bekommen die zwei neuen Zeilen. */
@supports (display: grid) {
.site-grid {
grid-template-areas:
". banner banner banner banner ."
". top-a top-a top-a top-a ."
". top-b top-b top-b top-b ."
". comp comp comp comp ."
". side-r side-r side-r side-r ."
". side-l side-l side-l side-l ."
". bot-a bot-a bot-a bot-a ."
". bot-b bot-b bot-b bot-b ."
". bot-c bot-c bot-c bot-c ."
". bot-d bot-d bot-d bot-d .";
}
@media (min-width: 992px) {
.site-grid {
grid-template-areas:
". banner banner banner banner ."
". top-a top-a top-a top-a ."
". top-b top-b top-b top-b ."
". side-l comp comp side-r ."
". bot-a bot-a bot-a bot-a ."
". bot-b bot-b bot-b bot-b ."
". bot-c bot-c bot-c bot-c ."
". bot-d bot-d bot-d bot-d .";
}
}
}
.container-bottom-c { grid-area: bot-c; }
.container-bottom-d { grid-area: bot-d; }
/* Cassiopeia setzt `.container-top-a/b, .container-bottom-a/b > * { flex: 1 }`
nur für die Default-Positions. Ohne diese Regel collapsed unsere `.card`
im container-bottom-c/d auf width 0 (flex-child ohne flex-grow). Wir
spiegeln die Regel 1:1 für die neuen Positions. */
.container-bottom-c, .container-bottom-d {
position: relative;
}
.container-bottom-c > *,
.container-bottom-d > * {
flex: 1;
margin: 0.5em 0;
}
@media (max-width: 991.98px) {
.container-bottom-c, .container-bottom-d {
flex-direction: column;
}
.container-bottom-c > *,
.container-bottom-d > * {
flex: 0 auto;
}
}
/* === PHASE 3 · SEEFEST-PROMO (S-7) ========================================= */
/* mod_custom „Seefest-Promo" auf Position bottom-c. Vollbreiter Foto-Banner
mit Dunkel-Scrim. FESTE Höhe (542/480/420) + overflow:hidden → Content
wird bei Overflow geclippt statt die Sektion zu strecken (verhindert den
scheinbaren Zoom: bei min-height wuchs die Sektion auf >800px und der
cover-Crop wirkte herangezoomt). Desktop ≥1051: Eyebrow + Titel +
kompaktes 3-Spalten-Programm-Grid + Ghost-Button, unten ausgerichtet.
Tablet/Mobile ≤1050: Programm-Grid ausgeblendet → Kurzversion (Eyebrow +
Titel + Info-Zeile + Button), zentriert. Markup: docs/seefest.html.
Foto banner-gecroppt (1920×788, JPG ~544 KB q88) → object-fit: cover,
object-position center 60% (untere Bildhälfte = mehr Publikum). */
/* Cassiopeia card-chrome Neutralizer für bottom-c (analog bottom-d / S-8). */
body.view-featured .container-bottom-c > .card,
body.view-featured .container-bottom-c > .card > .card-body {
background: transparent;
border: 0;
padding: 0;
margin: 0;
box-shadow: none;
border-radius: 0;
}
/* Edge-to-Edge-Breakout (volle Viewport-Breite, wie Sponsoren-Strip). */
body.view-featured .container-bottom-c .mvi-section--seefest {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
/* Die SEKTION richtet vertikal aus (column-flex + justify-content:center),
nicht das Inner. Frühere Variante (flex-row + align-items:stretch +
inner height:100%) kollabierte das Inner in diesem Cassiopeia-Card-
Kontext auf ~414 px → Eyebrow oben geclippt, Leerraum unten. bg/scrim
sind position:absolute → bleiben aus dem Flex-Flow. */
.mvi-promo {
position: relative;
display: flex;
flex-direction: column;
justify-content: center; /* vertikal zentriert — gleichmäßiger Abstand oben/unten (alle Viewports) */
height: 542px; /* FEST (nicht min-height) — Desktop */
/* .mvi-section vererbt `padding: 64 48` + `box-sizing: border-box`.
Bei fester Höhe würde das die Flex-Content-Box auf 542-128 = 414 px
stauchen (Inner overflowt → Eyebrow geclippt, 64 px Leerraum unten).
Full-Bleed-Banner braucht kein Section-Padding — Inner bringt eigenes. */
padding: 0;
overflow: hidden; /* Content-Overflow wird geclippt */
isolation: isolate; /* eigener Stacking-Context für Scrim/Content */
}
/* Hintergrund-Foto als Cover-Layer (nur JPG, Option B — kein WebP).
Robust gegen beide Markup-Varianten: `.mvi-promo__bg` kann direkt das
![]()
sein ODER ein -Wrapper mit innerem ![]()
(je nachdem,
welches Snippet im mod_custom-Modul steckt). Beide werden absolut auf
den Banner-Bereich gelegt + object-fit: cover. object-position
center 60% → untere Bildhälfte (mehr Publikum, weniger Himmel). Kein
transform/scale — der frühere „Zoom" kam allein vom Höhen-Bug. */
.mvi-promo__bg {
position: absolute;
inset: 0;
z-index: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 60%;
}
.mvi-promo__bg img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 60%;
}
/* Dunkel-Wash: links dicht (Textzone lesbar), rechts klar (See sichtbar).
Farbe = --neutral-anthracite (#1f1c18) als rgba — Token kann nicht in
rgba() interpoliert werden, daher Literal mit dokumentierter Herkunft. */
.mvi-promo__scrim {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(
110deg,
rgba(31, 28, 24, 0.78) 0%,
rgba(31, 28, 24, 0.40) 60%,
rgba(31, 28, 24, 0.10) 100%
);
}
.mvi-promo__inner {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
gap: var(--space-5); /* 24 — Content / Programm / Button */
width: 100%;
max-width: var(--container-wide); /* 1320 */
margin: 0 auto;
padding: var(--space-5) var(--space-7); /* 24 / 48 — vertikal knapp, damit alles in 542 ohne Clip passt */
}
/* Info-Zeile + Kurztext — nur in der Tablet/Mobile-Kurzversion sichtbar
(Desktop zeigt stattdessen das Programm-Grid). */
.mvi-promo__where {
display: none;
margin: 0;
font-family: var(--font-body);
font-size: var(--fs-base); /* 16 */
font-weight: 500;
color: var(--neutral-cream);
}
.mvi-promo__intro {
display: none;
margin: var(--space-3) 0 0; /* 12 — Abstand zur Info-Zeile */
max-width: 480px;
font-family: var(--font-body);
font-size: 15px; /* zwischen fs-sm 14 und fs-base 16 — Spec */
font-weight: 400;
line-height: var(--lh-normal); /* 1.55 */
color: rgba(250, 246, 239, 0.92); /* --neutral-cream (#faf6ef) @ 0.92 */
}
/* ── Content (Eyebrow + Titel) ── */
.mvi-promo__eyebrow {
display: block;
font-family: var(--font-body);
font-size: var(--fs-xs); /* 12 */
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.16em; /* Preview-Match */
color: var(--brand-gold-soft);
}
.mvi-promo__title {
margin: var(--space-4) 0 0; /* 16 Atem zum Eyebrow */
font-family: var(--font-display);
font-size: 56px; /* über fs-Skala — Preview-Messung Desktop */
font-weight: 600;
line-height: 1.08;
color: var(--neutral-cream);
}
.mvi-promo__title em {
font-style: normal;
font-weight: 400;
color: var(--brand-gold-soft);
}
/* ── 3-Spalten-Programm-Grid — Desktop ≥1051 (kompakt, für feste 542 px).
Tablet/Mobile: komplett ausgeblendet (siehe Media-Queries). ── */
.mvi-promo__program {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px; /* Spec v3 — war 24 */
}
.mvi-promo__col {
display: flex;
flex-direction: column;
background: rgba(255, 255, 255, 0.08); /* leicht aufgehellt auf dunklem Grund */
border: var(--border-w-thin) solid rgba(255, 255, 255, 0.15);
border-radius: var(--radius-md); /* 8 */
padding: 12px 16px; /* Spec v3 — kompakter (war 16/20) */
}
.mvi-promo__day {
display: block;
margin-bottom: var(--space-2); /* 8 — kompakter (war 12) */
font-family: var(--font-body);
font-size: 10px; /* Spec v3 */
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--brand-gold-soft);
}
.mvi-promo__slot {
display: flex;
flex-direction: column;
gap: 2px; /* enge Zeilen innerhalb eines Blocks */
}
/* Trennlinie zwischen Block A und B — nur Sonntag hat zwei Slots. */
.mvi-promo__slot + .mvi-promo__slot {
margin-top: var(--space-2); /* 8 */
padding-top: var(--space-2); /* 8 */
border-top: var(--border-w-thin) solid rgba(255, 255, 255, 0.1);
}
.mvi-promo__time {
font-family: var(--font-body);
font-size: 11px; /* Spec v3 */
font-weight: 400;
color: var(--neutral-stone);
}
.mvi-promo__act-title {
margin: 0;
font-family: var(--font-body);
font-size: 14px; /* Spec v3 */
font-weight: 600;
color: var(--neutral-cream);
}
/* Untertitel (nur „Käthe Kächele") — in der Spec ohne eigene Stilangabe;
an die Acts-Zeile angelehnt + kursiv zur Abgrenzung vom Act-Titel. */
.mvi-promo__act-sub {
margin: 0;
font-family: var(--font-body);
font-size: 12px;
font-weight: 400;
font-style: italic;
color: var(--neutral-stone);
}
.mvi-promo__acts {
margin: 0;
font-family: var(--font-body);
font-size: 12px; /* Spec v3 */
font-weight: 400;
line-height: 1.4; /* kompakter für mehrzeilige Act-Listen */
color: var(--neutral-stone);
}
.mvi-promo__price {
margin-top: 2px;
font-family: var(--font-body);
font-size: 11px; /* Spec v3 */
font-weight: 400;
color: var(--brand-gold-soft);
}
/* Ghost-Button: heller Glas-Look auf dunklem Grund. Bewusst Cream-Text,
NICHT Bordeaux (Preview-Mockup zeigte Bordeaux auf dunklem Foto =
unlesbar — als Mockup-Bug eingestuft, Christoph bestätigt Cream).
Linksbündig unter dem Programm-Grid. */
.mvi-promo .mvi-btn--ghost {
align-self: flex-start; /* linksbündig, kein Stretch */
width: fit-content; /* nie full-width (auch nicht Mobile) */
background: rgba(255, 255, 255, 0.12);
border: var(--border-w-thin) solid rgba(255, 255, 255, 0.6);
border-radius: var(--radius-md); /* 8 */
padding: 14px 22px; /* Preview-Messung */
font-size: var(--fs-sm); /* 14 */
font-weight: 600;
color: var(--neutral-cream);
transition: background-color 220ms var(--ease-out);
}
.mvi-promo .mvi-btn--ghost:hover {
background: rgba(255, 255, 255, 0.22);
}
.mvi-promo .mvi-btn--ghost:focus-visible {
outline: 2px solid var(--brand-gold);
outline-offset: 2px;
}
/* ── Tablet ≤ 1050: Kurzversion — Programm-Grid raus, Info-Zeile rein,
Content vertikal zentriert, feste Höhe 480 ── */
@media (max-width: 1050px) {
.mvi-promo {
height: 480px; /* justify-content:center bereits in der Basis */
}
.mvi-promo__inner {
gap: var(--space-4); /* 16 */
padding: var(--space-7); /* 48 */
}
.mvi-promo__program {
display: none; /* Programm-Grid nur Desktop */
}
.mvi-promo__where,
.mvi-promo__intro {
display: block;
}
.mvi-promo__title {
font-size: 40px; /* Preview-Messung Tablet */
}
}
/* ── Mobile ≤ 520: feste Höhe 420, Titel kleiner, engeres Padding ── */
@media (max-width: 520px) {
.mvi-promo {
height: 420px;
}
.mvi-promo__inner {
padding: var(--space-6); /* 32 */
}
.mvi-promo__title {
font-size: 30px; /* Preview-Messung Mobile */
}
}
/* === PHASE 3 · SPONSOREN-STRIP (S-8) ======================================= */
/* Wird vom mod_custom Layout-Override `_:sponsoren`
(templates/cassiopeia_mvi/html/mod_custom/sponsoren.php) gerendert.
Position bottom-d. Der Strip listet alle Bilddateien aus
/images/02_sponsoren/ in zufälliger Reihenfolge auf — horizontaler
Scroll-Strip analog Termine-Tile (S-3). */
/* Cassiopeia card-chrome Neutralizer für bottom-d (analog top-a/b und
bottom-a/b). */
body.view-featured .container-bottom-d > .card,
body.view-featured .container-bottom-d > .card > .card-body {
background: transparent;
border: 0;
padding: 0;
margin: 0;
box-shadow: none;
border-radius: 0;
}
/* Edge-to-Edge-Breakout */
body.view-featured .container-bottom-d .mvi-section--sponsoren {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
/* Section-Hintergrund Sand — gleiche Töne wie Ausbildungs-Sektion;
gruppiert die Sponsoren visuell als „Ausklang"-Block der Startseite. */
.mvi-section--sponsoren {
background: var(--bg-surface); /* weiß #ffffff — sicherer Farbwechsel Ausbildung(creme)→Sponsoren(weiß)→Footer(dunkel), unabhängig von der temporären Seefest-Sektion */
}
/* Sektion-Header ist kompakter als die anderen Phase-3-Sektionen:
- Eyebrow + Title-Block links, More-Link rechts
- Title ist KEIN großer Display-Heading, sondern eine 18px-Subline
(„Ein herzliches Dankeschön an alle…") — visuell unauffälliger,
damit die Logos den Fokus behalten
- margin-bottom 24 (statt Default 32) */
.mvi-section--sponsoren .mvi-section__head {
align-items: center;
margin-bottom: var(--space-5); /* 24 */
}
.mvi-section--sponsoren .mvi-section__title {
font-family: var(--font-display);
font-size: var(--fs-md); /* 18 */
font-weight: 500;
font-style: italic; /* Preview-Match — gibt der Dankes-Subline einen warmen Ton */
line-height: var(--lh-normal); /* 1.55 — exakt Preview */
color: var(--fg-secondary); /* anthrazit-grau, nicht bordeaux */
letter-spacing: var(--ls-normal);
margin-top: var(--space-2); /* 8 — kleiner Atem zwischen Eyebrow und Sub-Text, matched Preview */
}
/* Sponsor-Strip: Wrapper mit overflow:hidden, innerer Track läuft per
CSS-Animation (`mvi-marquee`) kontinuierlich nach links. Der Track enthält
2 × Original-Set (Klon im PHP, aria-hidden). Animation animiert
`translate3d(0)` → `translate3d(-50%)` — bei -50% steht das Klon-Set
genau an der Original-Position, der CSS-`infinite`-Loop springt zurück
zu 0 visuell nahtlos.
Geschwindigkeit: JS berechnet `--carousel-duration` aus
`trackHalfWidth / 80 px/sec` und setzt es als Inline-Style auf dem
Wrapper. Resize → debounced neu berechnet. Damit ist die gefühlte
Geschwindigkeit auf allen Viewports gleich (~80 px/s).
Hover/Focus-Within pausiert via `.is-paused`-Klasse;
`prefers-reduced-motion` stoppt die Animation komplett (CSS-only). */
.mvi-sponsor-strip {
position: relative;
overflow: hidden;
width: 100%;
/* Vertikaler Padding-Buffer: gibt Card-Hover-Transform (translateY -1)
und Focus-Outline (2 px solid gold + 2 px offset) Platz oben/unten.
Ohne diesen Puffer würde overflow:hidden den Outline-Ring auf dem
oberen+unteren Card-Rand abschneiden. Horizontal bleibt der Clip
hart am Border-Edge — das Marquee-Looping funktioniert unverändert,
weil padding ON the inside of the clip-region wirkt. */
padding: var(--space-1) 0; /* 4 px vertical */
/* Default für den Fall, dass JS nicht oder noch nicht durchlief.
100 s entspricht ~890 px (≈ ein gemittelter Track-Halb-Wert für
ein Vereins-Logo-Set) — Browser fängt damit minimal-sanft an,
JS überschreibt sofort mit der echten Berechnung. */
--carousel-duration: 100s;
}
.mvi-sponsor-strip:focus-visible {
outline: 2px solid var(--brand-gold);
outline-offset: 4px;
border-radius: var(--radius-sm);
}
.mvi-sponsor-strip__track {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 14px; /* Preview-Wert, off-Grid */
width: max-content; /* Track = Original × 2 breit */
will-change: transform;
animation: mvi-marquee var(--carousel-duration, 100s) linear infinite;
/* Touch-Action lässt vertikales Scrollen der Seite passieren — User soll
den Strip nicht mit dem Daumen wegscrollen müssen, wenn er die Seite
scrollen will. */
touch-action: pan-y;
}
@keyframes mvi-marquee {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
/* Hover-/Focus-Within-Pause: User-Cursor auf dem Strip pausiert die
Animation, damit Tooltips lesbar bleiben und Klicks auf Logos präzise
möglich sind. */
.mvi-sponsor-strip:hover .mvi-sponsor-strip__track,
.mvi-sponsor-strip.is-paused .mvi-sponsor-strip__track {
animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
/* Stoppt die CSS-Animation komplett — Track steht still bei
translate3d(0). Inhalt bleibt voll lesbar, User kann manuell mit
Prev/Next bedienen. */
.mvi-sponsor-strip__track {
animation: none !important;
transform: translate3d(0, 0, 0) !important;
}
}
/* Karussell wird ohne Bedienelemente ausgeliefert — kein Wrapper für
Prev/Next nötig. „Alle Sponsoren →" steht alleine rechts im Header.
Mobile-Hide liegt direkt auf der Foundation-Klasse (siehe Media-Query). */
/* Logo-Container ist eine eigenständige Card: weiße Surface mit dezenter
subtler Border und kompaktem Innen-Padding. Fix-Maße 120×90 — schmal +
leicht hoch (Hochformat-Tendenz), gibt jeder Marke einen visuell
prominenteren Platz als das vorherige 160×72-Querformat. Logos
unterschiedlicher Aspect-Ratios werden via `object-fit: contain` auf dem
`![]()
` egalisiert.
Hover-Effekt: nur `translateY(-1)` + `border-color: bordeaux` — KEIN
shadow-md-Lift wie bei den größeren Card-Typen (S-4/S-5/S-6). Begründung:
ein dutzend kleiner Cards nebeneinander mit Lift-Shadow wäre visuell
überfrachtet; Border-Color-Wechsel signalisiert Interaktivität subtiler. */
.mvi-sponsor-logo {
flex: 0 0 160px;
width: 160px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-surface);
border: var(--border-w-thin) solid var(--border-subtle);
border-radius: var(--radius-md); /* 8 */
padding: var(--space-2); /* 8 — Inner 144×84, gibt Logo viel Fläche */
transition: transform var(--dur-base) var(--ease-out),
border-color var(--dur-base) var(--ease-out);
}
.mvi-sponsor-logo:hover,
.mvi-sponsor-logo:focus-within {
transform: translateY(-1px);
border-color: var(--brand-bordeaux);
}
.mvi-sponsor-logo img {
max-width: 100%;
/* Card-Inner ist 144×84 (160×100 minus 2×8 padding). max-height 64 nutzt
~76 % der Inner-Höhe — Logo füllt den verfügbaren Platz gut aus,
hochformatige Marken wirken kräftig, querformatige bleiben über
max-width: 100% begrenzt. */
max-height: 64px;
width: auto;
height: auto;
object-fit: contain;
/* Leichter Saturate-Dämpfer (Preview-Wert): Logos in unterschiedlichen
Farbintensitäten werden visuell angeglichen, ohne sie zu entfärben.
Auf Hover kommt die volle Sättigung zurück. */
filter: saturate(0.95);
transition: filter var(--dur-base) var(--ease-out);
}
.mvi-sponsor-logo:hover img,
.mvi-sponsor-logo:focus-within img {
filter: saturate(1);
}
/* Responsive Tablet (521–1050) — Sektion-Header bleibt 2-spaltig, weil
More-Link kompakt rechts neben Title passt. Strip-Layout unverändert
(horizontaler Scroll). */
@media (max-width: 1050px) {
.mvi-section--sponsoren .mvi-section__title {
font-size: var(--fs-sm); /* 14 — Tablet kompakter */
line-height: var(--lh-normal);
}
}
/* Responsive Mobile (≤ 520) — User-Vorgabe: „Alle Sponsoren →"-Link
ausblenden (Karussell-Autoplay läuft trotzdem). Pattern analog
`.mvi-termine-actions` Mobile-Hide aus Termine/Aktuelles, hier direkt auf
der Foundation-Klasse `.mvi-section__more` innerhalb der Sponsoren-
Section, weil das Wrapper-Element nach dem Buttons-Entfernen entfällt.
Cards bleiben 160×72 — auf 390 px Viewport sind das ~2 Logos sichtbar
(Foundation-Mobile-Inner 342 / 174 per logo+gap = 1.96). */
@media (max-width: 520px) {
.mvi-section--sponsoren .mvi-section__head {
grid-template-columns: 1fr;
align-items: start;
}
.mvi-section--sponsoren .mvi-section__more {
display: none;
}
}
/* === PHASE 3 · FOOTER (S-9) ================================================ */
/* Statisch im index.php gerendert (S-9 Strategie 1). Dunkler Footer mit
Brand-Block links + 3 Nav-Spalten + Legal-Bar mit Admin-Link.
Foundation-Klassen `.mvi-footer*` neu eingeführt — sektionsspezifisch,
weil der Footer einen kontrastierenden dunklen Hintergrund hat. Die
Foundation `.mvi-section*` würde mit ihren cream-/sand-Defaults nicht
passen. */
.mvi-footer {
background: var(--neutral-anthracite); /* #1f1c18 */
color: var(--neutral-stone); /* #d9d2c4 — heller cream-grey für Lesbarkeit auf dunkel */
/* Padding: 48 oben+seitlich, 24 unten — User-Vorgabe (96 → 48), der
dicke schwarze Bereich oben wurde als zu groß empfunden. */
padding: var(--space-7) var(--space-7) var(--space-5); /* 48 48 24 */
width: 100%;
}
.mvi-footer__inner {
display: grid;
/* Fluide 2fr/1fr/1fr/1fr: Brand-Spalte doppelt so breit wie Nav-Spalten.
Bei VP 1280 mit gap 48 ergibt das exakt 416/208/208/208 px (Preview-
Match). Bei kleineren Desktop-Viewports schrumpfen alle Spalten
proportional — kein Overflow mehr (war Problem bei festem
`416 208 208 208`-Grid: 1184 px Soll, ab VP 1060 abwärts overflow). */
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: var(--space-7); /* 48 */
max-width: var(--container-wide); /* 1320 */
margin: 0 auto;
}
/* Brand-Block (links): Vereinsname als Display-Schrift + Adress-Paragraph
mit Telefon-Link und Vorsitzendem-Hinweis. */
.mvi-footer__brand {
display: flex;
flex-direction: column;
gap: var(--space-3); /* 12 */
}
.mvi-footer__brand-row {
display: flex;
align-items: baseline;
}
.mvi-footer__brand-name {
font-family: var(--font-display);
font-size: var(--fs-md); /* 18 */
font-weight: 600;
line-height: var(--lh-snug); /* ~1.55 (Preview misst 27.9/18) */
color: var(--brand-gold-soft); /* identisch zu Nav-H4-Titeln — Marken-Konsistenz */
}
.mvi-footer__addr {
margin: 0;
font-family: var(--font-body);
font-size: var(--fs-sm); /* 14 */
font-weight: 400;
line-height: var(--lh-loose); /* 1.6 — Preview misst 22.4/14 */
color: var(--neutral-stone);
}
/* Telefon-Link bekommt Gold-Soft-Akzent — passt zur H4-Farbe der Nav-
Spalten und macht die Telefonnummer als „Call-to-Action" prominent. */
.mvi-footer__addr a {
color: var(--brand-gold-soft); /* #d8b765 */
text-decoration: none;
transition: color var(--dur-fast) var(--ease-out);
}
.mvi-footer__addr a:hover,
.mvi-footer__addr a:focus-visible {
color: var(--brand-gold); /* etwas intensiver auf Hover */
}
/* Nav-Spalten: 3 Stück (Verein / Mitmachen / Service). H4-Titel oben in
uppercase-Gold, darunter gestapelte Block-Links in stone-color. */
.mvi-footer__col {
display: flex;
flex-direction: column;
}
.mvi-footer__col h4 {
margin: 0 0 var(--space-1); /* 0 0 4 */
font-family: var(--font-body);
font-size: var(--fs-xs); /* 12 */
font-weight: 700;
letter-spacing: var(--ls-eyebrow); /* 0.16em */
text-transform: uppercase;
color: var(--brand-gold-soft);
}
.mvi-footer__col a {
display: block;
padding: var(--space-1) 0; /* 4 vertical — komfortabler Tap-Target */
font-family: var(--font-body);
font-size: var(--fs-sm); /* 14 */
font-weight: 400;
color: var(--neutral-stone);
text-decoration: none;
transition: color var(--dur-fast) var(--ease-out);
}
.mvi-footer__col a:hover,
.mvi-footer__col a:focus-visible {
color: var(--brand-gold-soft);
}
/* Legal-Bar: feine Trennlinie + flex space-between auf Desktop/Tablet,
stack auf Mobile. */
.mvi-footer__legal {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-3); /* 12 */
max-width: var(--container-wide);
margin: var(--space-7) auto 0; /* 48 top — Abstand zur Nav darüber */
padding-top: var(--space-4); /* 16 */
/* Border-Top auf dunklem Hintergrund: rgba(255,255,255,0.06) ist visuell
eine sehr leichte Aufhellung des Anthracite — sichtbar als Linie, aber
nicht aufdringlich. Token-Set hat keine border-on-dark-Variante,
dieser Wert wird hier direkt verwendet (User-Spec). */
border-top: 1px solid rgba(255, 255, 255, 0.06);
font-family: var(--font-body);
font-size: var(--fs-xs); /* 12 */
color: var(--fg-muted); /* #8a8478 — Copyright dezent */
}
.mvi-footer__legal-links {
display: flex;
align-items: center;
gap: var(--space-5); /* 24 — gemütlicher Abstand zwischen Impressum/Datenschutz/Admin */
}
.mvi-footer__legal-links a {
color: var(--brand-gold-soft);
text-decoration: none;
transition: color var(--dur-fast) var(--ease-out);
}
.mvi-footer__legal-links a:hover,
.mvi-footer__legal-links a:focus-visible {
color: var(--brand-gold);
}
/* Admin-Link: dezenter Lock-Icon-Link, ganz rechts in der Legal-Bar.
Default 50 % gedimmt, auf Hover voll sichtbar — soll nicht auffallen,
aber für Eingeweihte erreichbar (Tooltip „Backend"). Color bleibt
stone/muted, nicht gold — das Icon ist die Funktion, nicht der Akzent. */
.mvi-footer__admin {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--fg-muted) !important; /* override .mvi-footer__legal-links a gold-Default */
opacity: 0.5;
transition: opacity var(--dur-fast) var(--ease-out);
}
.mvi-footer__admin:hover,
.mvi-footer__admin:focus-visible {
color: var(--fg-muted) !important;
opacity: 1;
}
/* Responsive ≤ 1050 — User-Vorgabe: auf Tablet + Mobile wird nur die
Legal-Bar gezeigt. Brand-Block + Nav-Spalten sind ausgeblendet, weil
die mobile Navigation komplett über den Drawer im Header läuft — ein
redundanter Footer-Nav darunter ist nicht nötig. Padding wird auf das
notwendige Minimum reduziert (16 vertical, 48 horizontal). Trennlinie
border-top auf Legal-Bar entfällt, sonst hängt eine Linie ohne Kontext
im Raum. */
@media (max-width: 1050px) {
.mvi-footer {
padding: var(--space-4) var(--space-7); /* 16 vertical, 48 horizontal */
}
.mvi-footer__inner {
display: none;
}
.mvi-footer__legal {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
}
/* Responsive Mobile (≤ 520) — Legal-Bar stackt vertikal (Copyright oben,
Links unten). Auf Mobile auch padding-x leicht reduzieren, damit lange
Copyright-Zeile nicht zu eng am Bildrand klebt. */
@media (max-width: 520px) {
.mvi-footer {
padding: var(--space-4) var(--space-5); /* 16 vertical, 24 horizontal */
}
.mvi-footer__legal {
flex-direction: column;
align-items: flex-start;
gap: var(--space-3);
}
}
/* ============================================================
S-10 — BEITRAGSSEITE (Article View)
============================================================
Joomla rendert die Article-View (com_content view=article) ohne
eigenen Itemid → der aktive Itemid ist 101 (Startseite). Folge:
alle Modulzuweisungen der Startseite (Hero, Termine, Aktuelles,
Ensembles, Ausbildung, Sponsoren) erscheinen MIT auf der
Beitragsseite, der Article-Inhalt liegt mittendrin.
Lösung: Auf `body.view-article` werden die Startseite-Module-
Container ausgeblendet. Sidebar bleibt aktiv (Vorgabe). Header
und Footer bleiben unverändert. */
/* --- S-10 Phase 1: Startseite-Modul-Container ausblenden -------- */
/* .container-banner BLEIBT sichtbar — Hero-Modul rendert auch auf
Article-View (User-Vorgabe S-10 Korrektur 2026-05-15). */
body.view-article .container-top-a,
body.view-article .container-top-b,
body.view-article .container-bottom-a,
body.view-article .container-bottom-b,
body.view-article .container-bottom-c,
body.view-article .container-bottom-d {
display: none !important;
}
/* Hero-Variante auf Article-View: nur Foto, kein Text/CTAs/Social-Icons.
Der Hero wirkt damit als reine Marken-Visitenkarte zwischen Header
und Beitragsseite-Inhalt — der Article-Title übernimmt die
inhaltliche Kommunikation. */
body.view-article .mvi-hero__content,
body.view-article .mvi-hero__social {
display: none;
}
body.view-article .mvi-hero__overlay {
background: none;
}
/* --- S-10-9: Breadcrumb (Startseite / Aktuelles / Titel) -------- */
/* Sitzt als erstes Element im .com-content-article (vor dem Titel),
erbt damit die 720-px-Lese-Spalte.
S-12 Polish 2026-05-20 (Fix 2): `view-article` → `:is(view-article,
view-archive)` erweitert. Spezifität bleibt identisch (`:is()` nimmt die
höchste Innenspezifität — beide Selektoren sind 0,1,0 body-class) →
bestehende view-article-Seiten unverändert; itemid-938 (view-archive)
erbt jetzt das Breadcrumb-Styling. */
:is(body.view-article, body.view-archive) .com-content-article > .mvi-breadcrumb,
body.view-archive .com-content-archive > .mvi-breadcrumb,
body.view-list.itemid-934 .mvi-cal-wrapper > .mvi-breadcrumb,
body.com_igallery.view-category .ig-main-scope-wrapper.profile-1 > .mvi-breadcrumb,
body.com_contact.view-category .com-contact-category > .mvi-breadcrumb {
display: flex;
align-items: center;
gap: var(--space-2);
flex-wrap: wrap;
margin-bottom: var(--space-5);
}
:is(body.view-article, body.view-archive, body.view-list.itemid-934, body.com_igallery.view-category, body.com_contact.view-category) .mvi-breadcrumb a,
:is(body.view-article, body.view-archive, body.view-list.itemid-934, body.com_igallery.view-category, body.com_contact.view-category) .mvi-breadcrumb__link {
font-family: var(--font-body);
font-size: var(--fs-sm);
color: var(--fg-muted);
text-decoration: none;
transition: color var(--dur-base) var(--ease-out);
}
:is(body.view-article, body.view-archive, body.view-list.itemid-934, body.com_igallery.view-category, body.com_contact.view-category) .mvi-breadcrumb a:hover,
:is(body.view-article, body.view-archive, body.view-list.itemid-934, body.com_igallery.view-category, body.com_contact.view-category) .mvi-breadcrumb__link:hover {
color: var(--brand-bordeaux);
}
:is(body.view-article, body.view-archive, body.view-list.itemid-934, body.com_igallery.view-category, body.com_contact.view-category) .mvi-breadcrumb__sep {
color: var(--fg-muted);
font-size: var(--fs-sm);
user-select: none;
}
:is(body.view-article, body.view-archive, body.view-list.itemid-934, body.com_igallery.view-category, body.com_contact.view-category) .mvi-breadcrumb__current {
font-family: var(--font-body);
font-size: var(--fs-sm);
font-weight: 600;
color: var(--fg-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 360px;
}
@media (max-width: 520px) {
:is(body.view-article, body.view-archive, body.view-list.itemid-934, body.com_igallery.view-category, body.com_contact.view-category) .mvi-breadcrumb__current {
max-width: 180px;
}
}
/* --- S-10 Phase 2: Article-Container + Titel ------------------- */
/* Article rendert in einer schmalen Lese-Spalte (720 px), zentriert.
Galerie und Pagenavigation brechen in späteren Phasen aus dieser
Spalte aus auf full container-wide (1320 px). */
body.view-article .com-content-article.item-page {
max-width: var(--article-content-width);
margin: 0 auto;
padding: var(--space-7) var(--space-7) var(--space-9);
box-sizing: content-box;
}
@media (max-width: 520px) {
body.view-article .com-content-article.item-page {
padding-left: var(--space-5);
padding-right: var(--space-5);
}
}
/* Joomla rendert zwei .page-header-Blöcke unter view-article:
1.
Startseite
— vom Menüpunkt (Itemid 101) → ausblenden 2.{Article-Title}
— der eigentliche Titel → stylen */ body.view-article .com-content-article > .page-header:has(> h1) { display: none; } body.view-article .com-content-article > .page-header:has(> h2) { margin: 0 0 var(--space-5); } body.view-article .com-content-article > .page-header > h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(var(--fs-3xl), 4vw, var(--fs-4xl)); /* 48→64, harmonisch (kein Fullwidth mehr) */ line-height: 1.1; letter-spacing: normal; color: var(--brand-bordeaux); margin: 0; text-wrap: balance; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 7 4 3; } /* ≤1050: Titel auf die responsiven Größen (clamp-min wäre 48 px, auf Mobile in der ~342-px-Spalte unharmonisch). 38 / 28 wie Pre-Fullwidth. */ @media (max-width: 1050px) { body.view-article .com-content-article > .page-header > h2 { font-size: 38px; } } @media (max-width: 520px) { body.view-article .com-content-article > .page-header > h2 { font-size: 28px; } } /* --- S-10 Phase 3: Article-Meta (Badge + Datum) ----------------- */ /* Inline-Meta-Block — Tag-Pill (Catid-Modifier) + Veröffentlichungs- datum mit „·"-Trenner. S-10 Polish: sitzt jetzt ÜBER dem Titel (Breadcrumb → Meta → Titel → Bild), daher margin-bottom = Abstand zum Titel (16) statt zuvor zum Bild (32). */ body.view-article .com-content-article > .mvi-article-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin: 0 0 var(--space-4); } body.view-article .mvi-article-meta__date { display: inline-flex; align-items: center; font-family: var(--font-display); font-weight: 500; font-size: 15px; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; color: var(--neutral-anthracite); } body.view-article .mvi-article-meta__date::before { content: "·"; margin-right: 14px; color: var(--border-subtle); font-weight: 400; } /* S-10 Polish-Reset (2026-05-17): Der Fullwidth-Breakout für Breadcrumb + Meta + Titel wurde wieder ENTFERNT — alle drei sitzen jetzt (wie der Fließtext) in der zentrierten Lese-Spalte (--article-content-width 856). Kein Breakout, keine negativen Margins; es gelten wieder die Standard-Regeln (3868/3933/3964), die .com-content-article zentriert per margin:0 auto. */ /* --- S-10 Phase 4: Beitragsbild (figure.item-image) ------------- */ /* Joomla rendert `images_fulltext` als ``
mit Class `left` als Default-Float-Alignment. Wir neutralisieren den
Float, geben dem Bild ein festes 16:9-Verhältnis (4:3 auf Mobile)
und runden die Ecken passend zum übrigen Designsystem. */
body.view-article .com-content-article figure.item-image {
position: relative;
margin: 0 0 var(--space-7);
float: none;
width: 100%;
overflow: hidden;
border-radius: var(--radius-md); /* clippt Gradient/Caption rund (img hat radius-md) */
}
body.view-article .com-content-article figure.item-image img {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: var(--radius-md);
border: 1px solid var(--border-subtle);
}
@media (max-width: 520px) {
body.view-article .com-content-article figure.item-image img {
aspect-ratio: 4 / 3;
}
}
/* S-10 Polish-Fix 4 (2026-05-17): Bildunterschrift NICHT mehr als
unter dem Bild, sondern als data-label-Attribut →
per ::after AUF dem Bild (analog .mvi-card__photo::after auf der
Startseite). Gradient-Overlay (::before) + Caption (::after) NUR
wenn data-label vorhanden (kein Alt-Text → figure ohne data-label
→ kein dunkler Wash, keine Caption — folgt der Spec-Verbal-
Anforderung; das Spec-CSS-Snippet hatte ::before ungescoped,
was ohne Caption nur sinnlos abdunkeln würde). */
body.view-article .com-content-article figure.item-image[data-label]::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(31, 28, 24, 0) 55%,
rgba(31, 28, 24, 0.55) 100%
);
pointer-events: none;
z-index: 1;
}
body.view-article .com-content-article figure.item-image[data-label]::after {
content: attr(data-label);
position: absolute;
bottom: var(--space-3); /* 12 px */
left: var(--space-4); /* 16 px */
right: var(--space-4);
font-family: var(--font-display);
font-style: italic;
font-size: var(--fs-xs); /* 12 px */
color: rgba(245, 240, 235, 0.92); /* cream */
z-index: 2;
pointer-events: none;
}
/* Joomla-Default figcaption auf .item-image unterdrücken — Caption rendert
stattdessen über `data-label="…"::after` (PHP-Override default.php, siehe
DECISIONS 2026-05-17 „S-10 Polish-Imgflow"). Defensive Suppression für
den Fall, dass der Editor doch einen generiert. */
body.view-article .com-content-article figure.item-image figcaption {
display: none;
}
/* Flyer-Artikel (2026-05-23): Beitragstyp `flyer` zeigt das Bild ohne
Cropping — Flyer-Plakate enthalten Text-im-Bild der nicht beschnitten
werden darf. Klasse `.com-content-article--flyer` setzt der PHP-Override
wenn das Custom Field `beitragstyp=flyer` ist. `object-fit: contain` +
`aspect-ratio: auto` gibt dem Bild seine natürliche Form. Cream-Hintergrund
hinter dem Bild (für Letterboxing). Gradient + Caption deaktiviert. */
body.view-article .com-content-article--flyer figure.item-image {
background-color: var(--neutral-cream);
}
body.view-article .com-content-article--flyer figure.item-image img {
aspect-ratio: auto;
object-fit: contain;
height: auto;
border: 0; /* kein Border auf Cream-Letterbox */
}
body.view-article .com-content-article--flyer figure.item-image[data-label]::before,
body.view-article .com-content-article--flyer figure.item-image[data-label]::after {
display: none;
}
/* --- S-10 Phase 5: Body-Prose + Blockquote ---------------------- */
/* Lesefreundliche Typografie für den Artikel-Body. 17 px / lh 1.7
matched die HTML-Referenz (.mvi-prose) — die optimale Balance
zwischen Lesegröße und Zeilenhöhe für narrative Texte. */
body.view-article .com-content-article__body {
font-family: var(--font-body);
font-size: 17px;
line-height: 1.7;
color: var(--neutral-anthracite);
}
body.view-article .com-content-article__body > p {
margin: 0 0 var(--space-5);
}
body.view-article .com-content-article__body > p:last-child {
margin-bottom: 0;
}
/* ============================================================
S-10 Polish (2026-05-17) — Padding-Fix + Intro-Lead + Drop Cap
============================================================ */
/* K1 — Mobile-Padding-Fix: Auf ≤520 px sitzt .com-content-article
im .container-component, das per .site-grid (CSS-Grid,
column-gap 16) einen 16-px-Gutter erhält → effektiver Einzug
40 px (16 Grid-Gutter + 24 Article-Padding) statt 24 wie auf der
Startseite. Lösung: Breakout auf volle Viewport-Breite (identisch
zum Pattern der Startseite-Sektionen / Galerie / Pagenav), das
eigene 24-px-Padding bleibt → Content-Einzug exakt 24 px, volle
390-px-VP genutzt. `border-box` nötig, damit width:100vw + padding
keinen horizontalen Overflow erzeugt. Desktop unverändert. */
@media (max-width: 520px) {
body.view-article .com-content-article.item-page {
box-sizing: border-box;
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
}
/* K3 — Intro-Lead: erster Body-Absatz als ruhiger Source-Sans-
Italic-Einstieg in Sekundärfarbe (kompensiert das bewusst nicht
gerenderte Joomla-Lead-Element, S-10 C). Polish-Fix 2: Größe jetzt
= Fließtext (17 px, NICHT `--fs-base` 16 — Spec-Token-Referenz hätte
das Spec-Ziel „gleiche Größe wie Fließtext" verfehlt, da der Body
hartcodiert 17 px nutzt). Nur Italic + Sekundärfarbe heben den
Einstieg ab, kein Größenkontrast mehr.
Polish-Fix 4 (2026-05-17): Der erste Absatz wird im PHP-Override
in einen eigenen `.com-content-article__intro`-Wrapper VOR das Bild
gerendert (Body-Split). Lead + Drop Cap zielen daher jetzt auf
`.com-content-article__intro > p` statt `.__body > p:first-of-type`
— sonst bekäme der erste Absatz des Rest-Bodys (nach dem Bild)
fälschlich Lead+Drop-Cap. */
/* S-10 / R3 (2026-05-18): Erster Absatz = LEAD für ALLE Artikel global
(User-Auftrag — der auf Über-Uns eingeführte Lead-Stil gefällt und
soll überall gelten). 19 px (Mockup-Lead-Wert, etablierter
kommentierter Rohwert), NICHT kursiv, --fg-primary, KEIN Drop-Cap.
Früher: Italic/Sekundär 17 + Spectral-Drop-Cap (+Mobile-Fallback);
früherer Über-Uns-scoped Override entfällt (global jetzt identisch). */
body.view-article .com-content-article__intro > p:first-of-type {
font-family: var(--font-body);
font-style: normal;
font-size: 19px; /* Lead (Mockup-Wert, kein --fs-Token) */
line-height: 1.55;
color: var(--fg-primary);
margin-bottom: var(--space-6); /* 32 px (Abstand zum Bild) */
}
/* Kein Drop-Cap mehr — ::first-letter neutralisiert (falls UA/Erbe). */
body.view-article .com-content-article__intro > p:first-of-type::first-letter {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
color: inherit;
float: none;
line-height: inherit;
margin: 0;
}
/* Zwischenüberschriften: Spectral Bordeaux, deutlich abgesetzt mit
margin-top, scroll-margin-top für Anker-Sprünge unter dem 88-px-Header. */
body.view-article .com-content-article__body > h2 {
font-family: var(--font-display);
font-weight: 600;
font-size: 28px;
line-height: 1.2;
letter-spacing: -0.005em;
color: var(--brand-bordeaux);
margin: var(--space-7) 0 var(--space-4);
scroll-margin-top: 100px;
}
body.view-article .com-content-article__body > h2:first-child {
margin-top: 0;
}
body.view-article .com-content-article__body > h3 {
font-family: var(--font-display);
font-weight: 500;
font-size: 22px;
line-height: 1.3;
color: var(--brand-bordeaux);
margin: var(--space-6) 0 var(--space-3);
scroll-margin-top: 100px;
}
/* Blockquote: 3-px-Bordeaux-Border-Left, Spectral italic, leichte
Hervorhebung. Foundation für Editoren, die Zitate setzen wollen. */
body.view-article .com-content-article__body blockquote {
margin: var(--space-6) 0;
padding: var(--space-3) var(--space-5);
border-left: var(--border-w-strong) solid var(--brand-bordeaux);
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: var(--fs-lg);
line-height: var(--lh-snug);
color: var(--neutral-anthracite);
}
body.view-article .com-content-article__body blockquote > p:last-child {
margin-bottom: 0;
}
/* Listen mit konsistentem Spacing. */
body.view-article .com-content-article__body ul,
body.view-article .com-content-article__body ol {
margin: 0 0 var(--space-5);
padding-left: var(--space-6);
}
body.view-article .com-content-article__body li {
margin-bottom: var(--space-2);
}
body.view-article .com-content-article__body li:last-child {
margin-bottom: 0;
}
/* Inline-Bilder im Body — falls Editoren Bilder im Fließtext einfügen,
bekommen sie konsistente Rundung + Spacing. */
body.view-article .com-content-article__body img {
max-width: 100%;
height: auto;
border-radius: var(--radius-md);
margin: var(--space-5) 0;
display: block;
}
/* Inline-Links: Bordeaux-Unterstrich (analog Foundation). */
body.view-article .com-content-article__body a {
color: var(--brand-bordeaux);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: color var(--dur-base) var(--ease-out);
}
body.view-article .com-content-article__body a:hover {
color: var(--brand-bordeaux-deep);
}
/* Mobile-Reduktion der Body-Typografie. */
@media (max-width: 520px) {
body.view-article .com-content-article__body {
font-size: 16px;
line-height: 1.65;
}
body.view-article .com-content-article__body > h2 {
font-size: 22px;
margin-top: var(--space-6);
}
body.view-article .com-content-article__body > h3 {
font-size: 19px;
}
body.view-article .com-content-article__body blockquote {
font-size: var(--fs-md);
padding: var(--space-2) var(--space-4);
}
}
/* --- S-10 Phase 6: Ignite Gallery — Output stylen --------------- */
/* Ignite-Gallery rendert per Shortcode als `
> .ig-gallery-wrapper > .ig-thumbs-grid >
.ig-thumbs-grid-block > .ig-grid-img-link(a) > img`. Wir machen daraus
einen horizontalen Scroll-Strip (analog Termine-Strip S-3). Den
kompletten 2-spaltigen Section-Header (Eyebrow + Titel links,
„Alle Fotos →" rechts) rendert das Content-Plugin
`plg_content_mvi_gallery_link` als echten `.mvi-gallery-head`-DOM-
Block VOR der Galerie (onContentPrepare) — frühere CSS-Pseudo-
Eyebrow/Titel + nachgestellter Link sind ersetzt (S-10-6 Polish). */
/* Gemeinsamer Breakout für Header UND Strip aus der 720-px-Lesespalte
auf **container-wide mit 24-px-Guttern** (NICHT 100vw) — gleiche
Breite wie die Startseiten-Sektionen (Termine S-3 / Aktuelles S-4).
Box 1232 px @ VP1280 / 1320 gecappt ≥1368 / 342 @ VP390, je 24 px
Abstand zum Viewport. Das innere padding (var(--gutter)) setzt den
Content nochmals 24 px ein → Content-Breite = .mvi-section__inner
(1184 @1280). margin-left zentriert den Block über der schmalen
Spalte (100% = 720). Header + Strip exakt gleich breit/zentriert. */
body.view-article .com-content-article__body .mvi-gallery-head,
/* itemid-979 („Unsere Register", natives pid=4) UND itemid-937
(„Chronik", S-13) sind hier AUSGENOMMEN:
- 979: Diagnose 2026-05-18 — der Sidebar-Overlap kam allein aus diesem
globalen Breakout (width:min(...) + negativem margin-left). Ohne
die Regel sitzt die pid=4-Galerie ohne jede width/margin-Angabe
sauber in der Content-Spalte (settled @1280 = x408/w800).
- 937: Die Chronik-Galerien sitzen in `.mvi-epoch__body`-Blöcken der
Zeitleiste und sollen IN der Content-Spalte bleiben (kein Breakout
auf container-wide). Ohne :not(.itemid-937) würde jede Epoch-Galerie
aus der Lesespalte rauslaufen — visuell bricht das die Bullet-/Linie-
Alignierung. */
body.view-article:not(.itemid-979):not(.itemid-937) .com-content-article__body .ig-main-scope-wrapper {
position: relative;
box-sizing: border-box;
width: min(var(--container-wide), calc(100vw - 2 * var(--gutter)));
margin-left: calc(
(min(var(--container-wide), calc(100vw - 2 * var(--gutter))) - 100%) / -2
);
margin-right: 0;
padding-left: var(--gutter);
padding-right: var(--gutter);
}
/* Strip + Grid füllen den Breakout-Wrapper voll (kein eigener
width-Constraint, der sie einschränkt). */
body.view-article .com-content-article__body .ig-main-scope-wrapper .ig-gallery-wrapper,
body.view-article .com-content-article__body .ig-main-scope-wrapper .ig-thumbs-grid {
width: 100%;
max-width: none;
margin-left: 0;
margin-right: 0;
}
/* === „Unsere Register" (itemid 979): natives Ignite-Profil pid=4 ========
Galerie sitzt vom globalen S-10-Breakout ausgenommen (:not(.itemid-979)
oben) sauber in der Content-Spalte. Dieser Block: MVI-Vereinheitlichung
der pid=4-Galerie (Großbild + Caption + horizontaler Thumb-Strip) auf
den Look der Beitrags-Galerie (pid=3 /seefest). Analyse-Stand
2026-05-18 (Live-DOM /ueber-uns/unsere-register). Lightbox = eigener
Block weiter unten (siehe „ig-lightbox"). */
/* (A) Abstand Lead-Absatz → Großbild = --space-4 (16) — aber AUSSERHALB
der Karte. Befund 2026-05-19: `margin-top` am Bild erzeugte die
16-px-Lücke INNERHALB von .ig-slideshow-item-inner-lboxon (Cream-bg
+ 1-px-Border) = „weißer Strich oben". Lösung: Abstand auf die
.ig-slideshow-Bühne (Flex-Item → kein Collapse) legen, Bild-
margin-top auf 0. So sitzt der Abstand vor der Karte, nicht darin. */
/* (R5-1) `body.itemid-979 .ig-slideshow { margin-top }` ENTFERNT —
kein Extra-Abstand mehr vor der Galerie-Karte (Bild-margin-top:0
bleibt; Lead→Bild-Abstand = Prosa-margin der Lead-Absatzes). */
body.itemid-979 .ig-slideshow-image {
margin-top: 0 !important;
object-fit: cover !important; /* füllt die Box randlos, wie Beitragsbilder */
border-radius: 0 !important; /* Radius kommt vom Container */
}
/* (P2) Großbild + Caption als EINE gerundete Karte: Container
.ig-slideshow-item-inner-lboxon bekommt --radius-md + subtilen Rahmen
+ overflow:hidden → alle vier Ecken gerundet, Caption-Leiste mit-
geclippt. Identisch zu Beitragsbildern (radius-md, border-subtle). */
body.itemid-979 .ig-slideshow-item-inner-lboxon {
border-radius: var(--radius-md);
overflow: hidden;
border: var(--border-w-thin) solid var(--border-subtle);
background: transparent; /* Bild deckt cover-randlos; kein Cream-Peek */
anchor-name: --ig979-card; /* (R4-3) Anker für orientierungsunabh. Pfeile (Chromium); Fallback s.u. */
}
/* (R5-2) Slideshow-Pfeile = rechteckiger dunkler Kasten + Ignites
natives Pfeil-SVG (identisch zur Lightbox). Befund 2026-05-19:
Lightbox-Referenz `.ig-lightbox-button-left` nutzt DASSELBE Ignite-
SVG ``, computed Stroke
`rgba(255,255,255,0.7)`, transparent, kein Radius. → ::after-Chevron
(R4) ENTFERNT, Ignite-SVG WIEDER sichtbar (gleiches Markup = exakt
gleiche Pfeilform), Stroke weiß (--fg-on-bordeaux). Kasten:
rechteckig (border-radius:0), dunkel color-mix(--neutral-black 35%),
Hover 58 %, Pfeil per Flexbox exakt zentriert. Position bleibt
(R4): 23%-Token-Fallback + Anchor-Positioning (Chromium) relativ
zur Bildkarte. Scope nur `.ig-slideshow` (Lightbox unberührt). */
body.itemid-979 {
--ig979-arrow-edge: 23%;
}
body.itemid-979 .ig-slideshow .ig-slideshow-button {
box-sizing: border-box !important;
/* (R7-1) Sauberer quadratischer 44×44-Kasten — EIN Grauton.
Befund 2026-05-19: das SVG-Element trägt einen EIGENEN bg
(`rgba(0,0,0,0.3)` von Ignites `ignitegallery.css`) ÜBER unserem
Button-bg → zwei Grautöne im SVG-Bereich. Fix: nativer Button
`background:transparent`, eigener Kasten via `::before`, SVG-bg
ebenfalls transparent → nur eine Graufläche. (R6-1 `padding:0`
bleibt — neutralisiert Ignites Default `padding:25 25 25 0`.) */
width: 44px !important;
height: 44px !important;
min-height: 0 !important;
padding: 0 !important;
top: 50% !important;
transform: translateY(-50%) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important; /* (R7-1) statt color-mix → ::before zeichnet */
color: var(--fg-on-bordeaux) !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
opacity: 1;
overflow: hidden !important;
position: relative; /* (R7-1) Kontext fürs ::before */
}
/* (R7-1) Der Kasten: einzige Graufläche, hinter SVG. */
body.itemid-979 .ig-slideshow .ig-slideshow-button::before {
content: "";
position: absolute;
inset: 0;
background: color-mix(in srgb, var(--neutral-black) 35%, transparent);
z-index: 0;
transition: background var(--dur-base) var(--ease-out);
}
body.itemid-979 .ig-slideshow .ig-slideshow-button:hover::before,
body.itemid-979 .ig-slideshow .ig-slideshow-button:focus-visible::before {
background: color-mix(in srgb, var(--neutral-black) 58%, transparent);
}
body.itemid-979 .ig-slideshow .ig-slideshow-button-left {
left: var(--ig979-arrow-edge) !important;
right: auto !important;
}
body.itemid-979 .ig-slideshow .ig-slideshow-button-right {
right: var(--ig979-arrow-edge) !important;
left: auto !important;
}
/* Ignites natives Pfeil-SVG sichtbar (wie Lightbox), weißer Stroke,
scharf bei jeder Größe (non-scaling), Flex-zentriert. SVG-eigenes
bg (von Ignite `rgba(0,0,0,0.3)`) eliminiert + über ::before via z-index. */
body.itemid-979 .ig-slideshow .ig-slideshow-button svg {
display: block !important;
width: auto !important;
height: 22px !important;
margin: 0 !important;
overflow: visible;
background: transparent !important; /* (R7-1) kill Ignites SVG-bg */
position: relative;
z-index: 1; /* über ::before */
}
body.itemid-979 .ig-slideshow .ig-slideshow-button svg polyline,
body.itemid-979 .ig-slideshow .ig-slideshow-button svg * {
stroke: currentColor !important;
stroke-width: 2.5 !important;
vector-effect: non-scaling-stroke;
fill: none !important;
}
/* (R7-2) Pfeile INSIDE der Bildkarte (am inneren Rand), NICHT straddling
die Kante. Befund: bei Querformat (Karte ≈ Stagebreite) ragt straddling-
Pfeil über die Stage hinaus → wird von `.ig-slideshow{overflow:hidden}`
(R6-2) abgeschnitten. Lösung: Anchor-Positioning OHNE translateX —
Pfeil-linke-Kante = Karten-linke-Kante (left btn), Pfeil-rechte-Kante
= Karten-rechte-Kante (right btn). Damit sitzen die Pfeile vollständig
im Karten-overflow:hidden, kein Clipping unabhängig vom Format. */
@supports (left: anchor(--ig979-card left)) {
body.itemid-979 .ig-slideshow .ig-slideshow-button {
position-anchor: --ig979-card;
top: anchor(--ig979-card center) !important;
transform: translateY(-50%) !important; /* nur vertikal zentriert */
}
body.itemid-979 .ig-slideshow .ig-slideshow-button-left {
left: anchor(--ig979-card left) !important;
right: auto !important;
}
body.itemid-979 .ig-slideshow .ig-slideshow-button-right {
right: anchor(--ig979-card right) !important;
left: auto !important;
}
}
/* (R7-2+3) Stage `overflow:hidden` (R6-2) ZURÜCKGENOMMEN — sonst werden
Pfeile bei Querformat-Karten (≈ Stagebreite) am Bildrand abgeschnitten.
Anti-Flicker stützt sich jetzt allein auf `transition` + die ohnehin
bestehenden Karten-overflow:hidden + Anchor-Positioning inside-card.
MutationObserver (R7-Diagnose, 1,2 s nach Slide-Click): keine
UL-Attribut-Mutationen → das beim Format-Wechsel beobachtete Flackern
kommt nicht von UL-Höhe, sondern wahrscheinlich von der KARTEN-Breite
(Ignite passt `.ig-slideshow-item-inner-lboxon` per Aspekt an).
Transition auch dort + Bump 0.15→0.2s. */
body.itemid-979 .ig-slideshow {
overflow: visible !important;
}
body.itemid-979 .igui-slideshow-items,
body.itemid-979 .ig-slideshow-items {
transition: height 0.2s ease !important;
}
body.itemid-979 .ig-slideshow-item-inner-lboxon {
transition: width 0.2s ease, height 0.2s ease !important;
}
/* (C) Caption als Bild-Overlay mit Gradient-Scrim (statt Cream-Block).
Befund 2026-05-19: .ig-description-overlay liegt nativ als
absolute Bottom-Overlay AUF dem Bild (OVERLAY bestätigt). MVI:
dunkler Verlauf nach oben transparent, Titel Spectral creme,
Personen Source Sans 3 creme — analog Beitragsbild-Caption.
h3 responsiv (clamp) + Umbruch → kein Mobile-Clip. */
body.itemid-979 .ig-slideshow .ig-description-overlay {
position: absolute;
inset: auto 0 0 0;
background: linear-gradient(
to top,
color-mix(in srgb, var(--neutral-black) 80%, transparent) 0%,
color-mix(in srgb, var(--neutral-black) 45%, transparent) 55%,
transparent 100%
) !important;
border-top: 0 !important;
padding: var(--space-7) var(--space-4) var(--space-4) !important;
text-align: center;
}
body.itemid-979 .ig-description-overlay h3 {
margin: 0;
font-family: var(--font-display);
font-size: clamp(var(--fs-md), 4.2vw, var(--fs-lg));
font-weight: 600;
line-height: 1.2;
color: var(--fg-on-bordeaux);
white-space: normal;
overflow-wrap: normal;
hyphens: auto;
}
body.itemid-979 .ig-description-overlay p {
margin: 2px 0 0;
font-family: var(--font-body);
font-size: var(--fs-sm);
line-height: 1.35;
color: color-mix(in srgb, var(--fg-on-bordeaux) 85%, transparent);
white-space: normal;
overflow-wrap: break-word;
}
/* (4) Mobile-Caption (≤520): Befund 2026-05-19 — Caption ist auch
mobil ein OVERLAY auf dem Bild (capVsImg:OVERLAY) mit EIGENEM
Gradient-Scrim, bereits zentriert + Spectral/Source-Sans. Daher
`--fg-default/--fg-secondary` (dunkel) NICHT angewandt (auf dem
dunklen Scrim unlesbar; creme = robust, auch falls Ignite die
Caption auf einem echten Gerät darunter rendert — der eigene
Gradient-bg bleibt am Element). Nur Padding gestrafft: Seiten/
unten --space-2, oben minimaler Scrim-Verlauf. */
@media (max-width: 520px) {
body.itemid-979 .ig-slideshow .ig-description-overlay {
padding: var(--space-4) var(--space-2) var(--space-2) !important;
}
body.itemid-979 .ig-description-overlay p {
font-size: 13px;
line-height: 1.3;
}
}
/* (R4-4) Mobile-Caption DEFENSIV: Playwright-Emulation behält
`ig-notphone` (Ignite-Phone-Erkennung ist UA-basiert) → echtes
Gerät kann die Caption anders rendern (ggf. links/darunter). Daher
alle plausiblen Touch-/Schmalbreiten-Queries: Titel + Personenliste
IMMER zentriert (mit !important), Spectral / Source Sans 3,
creme-Token (auf Eigen-Scrim lesbar, robust auch falls Block
darunter), Padding --space-2. (Befund: Emu zeigt bereits
OVERLAY/center/Spectral-creme; dunkle Tokens wären auf dem Scrim
unlesbar → bewusst creme. Nur am echten Gerät final verifizierbar.) */
@media (max-width: 768px), (pointer: coarse), (hover: none) {
body.itemid-979 .ig-description-overlay,
body.itemid-979 .ig-description-overlay h3,
body.itemid-979 .ig-description-overlay p {
text-align: center !important;
}
body.itemid-979 .ig-description-overlay h3 {
font-family: var(--font-display) !important;
color: var(--fg-on-bordeaux) !important;
}
body.itemid-979 .ig-description-overlay p {
font-family: var(--font-body) !important;
color: color-mix(in srgb, var(--fg-on-bordeaux) 85%, transparent) !important;
}
body.itemid-979 .ig-slideshow .ig-description-overlay {
padding: var(--space-4) var(--space-2) var(--space-2) !important;
}
}
/* (R7-4) Strategie-Wechsel: Overlay-Experiment auf Mobile AUFGEGEBEN
(zu fragil — Ignite hat auf echtem ig-phone-UA einen eigenen Modus
`.ig-image-descriptions-below` UNTER dem Bild, den unsere R5-Force-
Overlay-Hacks nicht zuverlässig dominieren). Stattdessen:
`.ig-image-descriptions-below` (nativ auf ig-phone) wieder sichtbar
lassen und MVI-konform stylen — zentriert, Spectral-Titel, Source-
Sans-Personenliste, Token-Farben (dunkel, auf Page-bg). Desktop-
Overlay (siehe (C) oben) bleibt unangetastet. */
body.itemid-979 .ig-image-descriptions-below,
body.itemid-979 .ig-image-descriptions-below .ig-image-description {
text-align: center !important;
padding: var(--space-3) var(--space-4) 0 !important;
}
body.itemid-979 .ig-image-descriptions-below h3,
body.itemid-979 .ig-image-description h3 {
margin: 0 !important;
font-family: var(--font-display) !important;
font-size: var(--fs-lg) !important;
font-weight: 600 !important;
line-height: 1.25 !important;
color: var(--fg-default) !important;
}
body.itemid-979 .ig-image-descriptions-below p,
body.itemid-979 .ig-image-description p {
margin: 2px 0 0 !important;
font-family: var(--font-body) !important;
font-size: var(--fs-sm) !important;
line-height: 1.4 !important;
color: var(--fg-secondary) !important;
}
/* (P4) Thumb-Strip 1:1 wie Beitrags-Galerie pid=3: 200×200-Kachel,
--radius-md, subtiler Rahmen, Hover-Lift translateY(-2)+shadow-md,
img object-fit:cover, KEINE Chevron-Pfeile — nur horizontal scrollbar,
aktiver Thumb = weicher Gold-Schein (box-shadow) statt harter Outline.
WICHTIG: Ignite legt die ``-Thumbs per JS auf `position:absolute`
in `ul.ig-slider-items` (+ transform-Offset für die Pfeil-Navigation).
Für nativen Scroll: Items zurück in den Flow (position:static!),
Track = ul auf `width:max-content` ohne JS-transform, Viewport =
.ig-thumb-scroller-inner mit overflow-x:auto. Gold NUR im Below-
Strip → kein Leak in die Lightbox-Vertikale (.ig-thumb-scroller-lbox). */
body.itemid-979 .ig-thumb-scroller-left,
body.itemid-979 .ig-thumb-scroller-right {
display: none !important;
}
/* Scroll-Viewport = .ig-thumb-scroller-main-below selbst. Es ist ein
FLEX-Item von .ig-gallery-wrapper → default min-width:auto ließ es auf
die 4452-px-Trackbreite wachsen (Iter 2: nicht scrollbar). min-width:0
zwingt es zurück auf Spaltenbreite, overflow-x:auto scrollt intern.
Alle inneren Ebenen = max-content/visible (reine Pass-through). */
body.itemid-979 .ig-thumb-scroller-main-below {
min-width: 0 !important;
width: 100% !important;
max-width: 100% !important;
overflow-x: auto !important;
overflow-y: hidden !important;
/* (R5-3) oben --space-2 (Gap Bild→Strip); UNTEN --space-4: Befund
2026-05-19 — der Container clippt mit overflow-y:hidden (zwingend
bei overflow-x:auto) den Hover-Schatten (--shadow-md ragt ~22 px
nach unten). Bottom-Padding = Schatten-Luft (wie pid=3-Referenz),
KEIN Ignite-Reset/Spezifitäts-Problem (box-shadow war schon da). */
padding: var(--space-2) 0 var(--space-4) !important;
scroll-behavior: smooth;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
body.itemid-979 .ig-thumb-scroller-main-below::-webkit-scrollbar {
display: none;
}
body.itemid-979 .ig-thumb-scroller-main-below .ig-thumb-scroller,
body.itemid-979 .ig-thumb-scroller-main-below .ig-thumb-scroller-horizontal,
body.itemid-979 .ig-thumb-scroller-main-below .ig-thumb-scroller-horizontal-inner,
body.itemid-979 .ig-thumb-scroller-main-below .ig-thumb-scroller-inner {
overflow: visible !important;
width: max-content !important;
height: auto !important;
transform: none !important;
}
/* Track: natürliche Breite, kein JS-transform */
body.itemid-979 .ig-thumb-scroller-main-below .ig-slider-items {
position: static !important;
width: max-content !important;
height: auto !important;
transform: none !important;
white-space: nowrap;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
/* Kachel: zurück in den Flow. (1) KEIN Rahmen/Box/Outline mehr —
aktiver Thumb nur über Opacity (inaktiv 0.65 / aktiv 1, 0.2s).
border-radius bleibt (gerundete Ecken sind kein „Rahmen").
(5) Hover-Lift bit-identisch zu pid=3 (verifiziert: matrix(…,-2) +
--shadow-md + 0.22s cubic-bezier(.16,1,.3,1)). */
body.itemid-979 .ig-thumb-scroller-main-below .ig-scroller-img-wrapper {
position: static !important;
float: none !important;
transform: none !important;
top: auto !important;
left: auto !important;
display: inline-block;
box-sizing: border-box;
width: 200px !important;
height: 200px !important;
margin: 0 var(--space-3) 0 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: var(--radius-md);
box-shadow: none !important;
outline: none !important;
overflow: hidden;
cursor: pointer;
vertical-align: top;
opacity: 0.65;
transition: opacity 0.2s var(--ease-out),
transform var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out);
}
/* (R4-5) Hover-Lift NUR auf echten Zeigegeräten (Maus). Befund: Ignite
setzt die Aktiv-Klasse `.ig-active-thumb` erst bei touchend (nach dem
Bildwechsel) — die einzige Aktiv-Klasse, keine separate Touch-Klasse.
Auf Touch löst aber `:hover` (sticky-hover beim Tap) ein verfrühtes
Opacity/Lift-Flackern VOR dem Wechsel aus. `@media (hover:hover) and
(pointer:fine)` koppelt :hover von Touch ab → dort treibt
ausschließlich `.ig-active-thumb` die Opacity (post-touchend). */
@media (hover: hover) and (pointer: fine) {
body.itemid-979 .ig-thumb-scroller-main-below .ig-scroller-img-wrapper:hover {
opacity: 1;
transform: translateY(-2px) !important;
box-shadow: var(--shadow-md) !important;
}
}
body.itemid-979 .ig-thumb-scroller-main-below .ig-img-link {
display: block !important;
width: 100% !important;
height: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
body.itemid-979 .ig-thumb-scroller-main-below .ig-scroller-img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
border-radius: 0 !important;
margin: 0 !important;
}
/* (1) Aktiver Thumb: KEIN Gold-Schein/Rahmen/Outline mehr — nur volle
Opacity (Hervorhebung rein über Helligkeit ggü. inaktiv 0.65). */
body.itemid-979 .ig-thumb-scroller-main-below .ig-scroller-img-wrapper.ig-active-thumb {
opacity: 1;
border: 0 !important;
box-shadow: none !important;
outline: none !important;
}
/* Scroll-zu-Galerie lässt Platz unter dem 88-px-Sticky-Header (z=100). */
body.itemid-979 .com-content-article__body .ig-main-scope-wrapper,
body.itemid-979 .ig-slideshow {
scroll-margin-top: calc(var(--header-h-desktop) + var(--space-5));
}
/* Ignite-Bildzähler „1/21" (oben rechts, Galerie) ausblenden — NICHT
.ig-description-overlay (= Caption). */
body.itemid-979 .ig-slideshow .ig-slideshow-overlay {
display: none !important;
}
/* === „Unsere Register" pid=4 — Ignite-Lightbox (Vollbild) ============
Ignite hängt die Lightbox an → Scope `body.itemid-979
.igui-lightbox.profile-4` (profile-4 = pid=4 = ausschließlich diese
Galerie). KONSERVATIV: Ignites Positionierung/Funktion NICHT
anfassen (Panel rendert bereits korrekt als Vollbild-Overlay) —
nur MVI-Kosmetik, Caption sichtbar (P5), Gold-Leak begrenzen (P6),
Mobile-Fit (P7), MVI-Look (P8). Analyse 2026-05-18. */
/* (P8) Warmer MVI-Dunkelgrund statt reinem Schwarz. */
body.itemid-979 .igui-lightbox.profile-4 {
background: var(--neutral-black) !important;
}
/* (P5) Bildunterschrift VOLLSTÄNDIG: Ignite gibt dem Bottom-Wrapper
~60 px fix → mehrzeilige Personenliste wird abgeschnitten. Höhe
auto, kein Clip, lesbarer Scrim nach oben. */
body.itemid-979 .igui-lightbox.profile-4 .ig-lightbox-bottom-wrapper,
body.itemid-979 .igui-lightbox.profile-4 .ig-lightbox-descriptions {
height: auto !important;
max-height: none !important;
min-height: 0 !important;
overflow: visible !important;
}
body.itemid-979 .igui-lightbox.profile-4 .ig-lightbox-bottom-wrapper {
padding: var(--space-5) var(--space-5) var(--space-4) !important;
background: linear-gradient(
to top,
color-mix(in srgb, var(--neutral-black) 88%, transparent),
transparent
) !important;
text-align: center;
pointer-events: none; /* blockiert Bild-/Nav-Klicks nicht */
}
body.itemid-979 .igui-lightbox.profile-4 .igui-lightbox-caption,
body.itemid-979 .igui-lightbox.profile-4 .ig-lightbox-descriptions {
text-align: center !important;
}
body.itemid-979 .igui-lightbox.profile-4 .ig-lightbox-descriptions h3 {
margin: 0 0 2px;
font-family: var(--font-display);
font-size: var(--fs-lg);
font-weight: 600;
line-height: 1.25;
color: var(--fg-on-bordeaux);
}
body.itemid-979 .igui-lightbox.profile-4 .ig-lightbox-descriptions p {
margin: 0;
font-family: var(--font-body);
font-size: var(--fs-sm);
line-height: 1.4;
color: color-mix(in srgb, var(--fg-on-bordeaux) 85%, transparent);
}
/* (P8) Toolbar oben: MVI-Typo, cremefarbene Zahlen/Icons. */
body.itemid-979 .igui-lightbox.profile-4 .igui-lightbox-toolbar,
body.itemid-979 .igui-lightbox.profile-4 .ig-lightbox-buttons {
font-family: var(--font-body);
color: var(--fg-on-bordeaux);
}
body.itemid-979 .igui-lightbox.profile-4 .ig-hits,
body.itemid-979 .igui-lightbox.profile-4 .ig-img-numbering {
font-size: var(--fs-sm);
color: color-mix(in srgb, var(--fg-on-bordeaux) 80%, transparent);
}
/* (1) Lightbox-Thumbs: KEIN Rahmen/Box/Outline (auch hier nicht) —
aktiver Thumb nur über Opacity (inaktiv 0.65 / aktiv 1, 0.2s),
konsistent zum Inline-Strip. */
body.itemid-979 .igui-lightbox.profile-4 .ig-scroller-img-wrapper {
border: 0 !important;
box-shadow: none !important;
outline: none !important;
border-radius: var(--radius-sm);
overflow: hidden;
opacity: 0.65;
transition: opacity 0.2s var(--ease-out);
}
body.itemid-979 .igui-lightbox.profile-4 .ig-scroller-img-wrapper.ig-active-thumb,
body.itemid-979 .igui-lightbox.profile-4 .ig-scroller-img-wrapper:hover {
opacity: 1;
border: 0 !important;
box-shadow: none !important;
outline: none !important;
}
/* (P7) Mobile: rechte Vertikal-Thumbs ausblenden (Platz fürs Bild),
Bild contain in den Restraum (Lupe/Bild nicht abgeschnitten),
Caption kompakt. Panel-Positionierung bewusst NICHT überschrieben. */
@media (max-width: 520px) {
body.itemid-979 .igui-lightbox.profile-4 .ig-lightbox-right-wrapper {
display: none !important;
}
body.itemid-979 .igui-lightbox.profile-4 .igui-lightbox-items img,
body.itemid-979 .igui-lightbox.profile-4 .ig-slideshow-image {
max-width: 100vw !important;
max-height: calc(100dvh - 132px) !important;
object-fit: contain !important;
}
body.itemid-979 .igui-lightbox.profile-4 .ig-lightbox-bottom-wrapper {
padding: var(--space-4) var(--space-3) !important;
}
body.itemid-979 .igui-lightbox.profile-4 .ig-lightbox-descriptions h3 {
font-size: var(--fs-md);
}
}
/* Leere JCE-Paragraphen ausblenden (erzeugen sonst unerwünschten
vertikalen Abstand). `p:empty` + `:has(>br:only-child)` +
`:has(>span:empty)`. ACHTUNG: ein literales `
, sehr häufig) matcht `:has(> br:only-child)` und würde sonst den kompletten Lead-Absatz ausblenden (Bug Unsere Register, Diagnose 2026-05-18). Intro daher generell ausnehmen — nur der Rest-Body bekommt die Leer-Absatz-Bereinigung. MVI S-13 (2026-05-20): Selektor von `p` auf `> p` (Direct-Child) reduziert. Ohne `>` matchte die Regel auch VERSCHACHTELTE Absätze (z. B. `.mvi-epoch__body p` in der Chronik-Zeitleiste). Damit wurden `
` ist per CSS NICHT selektierbar (nbsp ist ein Textknoten → kein :empty, kein Selektor matcht Textinhalt) — solche Fälle bräuchten einen Content-/Plugin-Fix. min-height:0 + margin-collapse fangen den Rest. */ /* WICHTIG: `:not(.com-content-article__intro)` — der Intro-Wrapper trägt ZUSÄTZLICH die Klasse `.com-content-article__body`. `br:only-child` ignoriert Textknoten, d. h. ein inhaltsvoller `
Text
Text
, sehr häufig) matcht `:has(> br:only-child)` und würde sonst den kompletten Lead-Absatz ausblenden (Bug Unsere Register, Diagnose 2026-05-18). Intro daher generell ausnehmen — nur der Rest-Body bekommt die Leer-Absatz-Bereinigung. MVI S-13 (2026-05-20): Selektor von `p` auf `> p` (Direct-Child) reduziert. Ohne `>` matchte die Regel auch VERSCHACHTELTE Absätze (z. B. `.mvi-epoch__body p` in der Chronik-Zeitleiste). Damit wurden `
Im Jahre 1896…
` sind ohnehin Direct-Children des `__body`). */ body.view-article:not(.itemid-942):not(.itemid-1221) .com-content-article__body:not(.com-content-article__intro) > p:empty, body.view-article:not(.itemid-942):not(.itemid-1221) .com-content-article__body:not(.com-content-article__intro) > p:has(> br:only-child), body.view-article:not(.itemid-942):not(.itemid-1221) .com-content-article__body:not(.com-content-article__intro) > p:has(> span:empty) { display: none; } body.view-article .com-content-article__body p { min-height: 0; } /* Margin-Collapse zwischen (Rest-)Absatz und Galerie-Block bzw. nach der Galerie. `.mvi-article-gallery-wrapper` existiert in dieser Implementierung nicht — wirksame Klassen sind `.mvi-gallery-head` (Plugin-Header vor der Galerie) und `.ig-main-scope-wrapper`. */ body.view-article .com-content-article__body p + .mvi-gallery-head, body.view-article .com-content-article__body p + .ig-main-scope-wrapper, body.view-article .com-content-article__body .ig-main-scope-wrapper + p { margin-top: 0; } /* Galerie-Header (Plugin-Output): 2-spaltig, links Eyebrow+Titel, rechts „Alle Fotos →". border-top + padding-top + margin-top = 48-px-Trennung vom Fließtext (analog .mvi-section__head). */ body.view-article .com-content-article__body .mvi-gallery-head { display: flex; justify-content: space-between; /* `center` (statt `flex-end`) — mit Nav als 3. flex-child sitzen die 44-px-Buttons auf derselben Mittellinie wie Eyebrow+Titel und Link (R4 2026-05-23, Termine-Pattern). */ align-items: center; gap: var(--space-5); margin-top: var(--space-7); margin-bottom: var(--space-5); padding-top: var(--space-7); border-top: var(--border-w-thin) solid var(--border-subtle); } /* Eyebrow nutzt jetzt die Projekt-Standard-Klasse .mvi-section__eyebrow (linker 28-px-Gold-::before-Strich + Typo, definiert ~Z. 1820). Die frühere .mvi-gallery-head__eyebrow-Regel ist entfernt; der 8-px-Gap Eyebrow→Titel wird via Titel-margin-top getragen (analog .mvi-section--sponsoren .mvi-section__title, S-8). */ .mvi-gallery-head__title { margin: var(--space-2) 0 0; /* 8 px Gap zum Eyebrow darüber */ font-family: var(--font-display); font-size: 38px; /* Desktop — Spec (fs-3xl wäre 48) */ font-weight: 600; line-height: 1.15; color: var(--brand-bordeaux); } /* „Alle Fotos →" exakt wie .mvi-section__more. `text-decoration: none` ist zwingend: die S-10-Prosa-Link-Regel unterstreicht jeden im Body zusätzlich → zusammen mit dem border-bottom ein DOPPEL-Strich. Nur der border-bottom soll der (einzige) Unterstrich sein. */ body.view-article .com-content-article__body .mvi-gallery-head .mvi-section__more { flex: 0 0 auto; font-family: var(--font-body); font-size: var(--fs-sm); /* 14 */ font-weight: 600; color: var(--brand-bordeaux); text-decoration: none; border-bottom: var(--border-w-thin) solid var(--brand-bordeaux); white-space: nowrap; } /* Strip-Wrapper: nur noch der Scroll-Strip (Header übernimmt Trennung + Titel). Kein border-top/padding/Pseudo mehr. margin-bottom 0 → Abstand zur Prev/Next-Navigation = deren eigene margin-top (var(--space-7) = 48, S-10 Phase 7) → total 48 px (KORREKTUR 4). */ body.view-article .com-content-article__body .ig-main-scope-wrapper { margin-top: 0; margin-bottom: 0; } /* Ignites Thumbnail-Container → horizontaler Scroll-Strip. padding-top gibt dem Hover-Lift + Schatten Luft (overflow-x:auto ⇒ overflow-y clippt sonst). */ body.view-article .com-content-article__body .ig-main-scope-wrapper .ig-thumbs-grid { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; gap: var(--space-3); /* 12 */ padding: var(--space-3) 0 var(--space-2); /* 12 oben (Hover-Luft) / 8 unten */ height: auto !important; position: static !important; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* alt-Edge/IE */ } body.view-article .com-content-article__body .ig-main-scope-wrapper .ig-thumbs-grid::-webkit-scrollbar { display: none; /* WebKit/Blink */ } /* Jedes Thumbnail = fixe 200-px-Kachel im Strip. Ignite positioniert die Blocks per JS `position:absolute` (data-igui-grid Stack) → per `!important` (schlägt Ignites Inline-Styles) zurück in den Flex-Fluss. */ body.view-article .com-content-article__body .ig-main-scope-wrapper .ig-thumbs-grid-block { flex: 0 0 200px; scroll-snap-align: start; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius-md); position: static !important; top: auto !important; left: auto !important; transform: none !important; width: auto !important; /* flex-basis 200 bestimmt die Breite */ height: auto !important; margin: 0 !important; padding: 0 !important; float: none !important; cursor: pointer; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } /* Hover-Lift identisch .mvi-ens (S-5) / .mvi-card (S-4): transition transform+box-shadow --dur-base/--ease-out (oben, Z. ~4401), hover translateY(-2px) + --shadow-md. Per Playwright verifiziert 1:1 deckungsgleich zu .mvi-ens. `transform !important` wegen des Ignite-JS-Resets (`transform:none !important`). `box-shadow` ebenfalls `!important` — rein defensiv gegen mögliche künftige Ignite-CSS-Spezifitäts-Konflikte; aktuell auch ohne wirksam (gemessen: shadow-md greift sauber, kein Konflikt). */ body.view-article .com-content-article__body .ig-main-scope-wrapper .ig-thumbs-grid-block:hover { transform: translateY(-2px) !important; box-shadow: var(--shadow-md) !important; } /* Link-Wrapper füllt die 200×200-Kachel, Bild deckt sie ab. */ body.view-article .com-content-article__body .ig-main-scope-wrapper .ig-grid-img-link { display: block; width: 100% !important; height: 100%; } body.view-article .com-content-article__body .ig-main-scope-wrapper .ig-thumbs-grid-image { display: block; width: 100%; height: 100%; object-fit: cover; } /* Tablet 521–1050: Titel 30 px (Strip-Kachelbreite bleibt 200 px). */ @media (max-width: 1050px) { .mvi-gallery-head__title { font-size: 30px; /* Tablet — Spec */ } } /* Mobile ≤ 520: Breakout-Formel greift weiter (342 px @ VP390, 24 px je Seite) — KEIN width/margin-Reset mehr. Header bleibt 2-spaltig (row + space-between), „Alle Fotos →" steht auf ALLEN Viewports rechts (S-10-6 Mobile-Fix 2026-05-17). Nur Titel 24 px + kompakter margin-top. Strip scrollt weiter horizontal. */ @media (max-width: 520px) { body.view-article .com-content-article__body .mvi-gallery-head { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: var(--space-3); margin-top: var(--space-6); } .mvi-gallery-head__title { font-size: 24px; /* Mobile — Spec */ } } /* --- S-10 Phase 7: Pagenavigation (Prev/Next Cards) ------------- */ /* Joomla rendert das pagenavigation-Plugin INNERHALB von .com-content-article (durch $this->item->pagination im Layout- Override). Wir brechen den Block aus der 720-Spalte aus auf container-wide — selber Mechanismus wie bei der Galerie (Phase 6). */ /* KORREKTUR S-10-6 (revidiert): border-top + padding-top WIEDER her- gestellt (vorige Iteration hatte ihn als „zweiten Strich" entfernt — User will den Trennstrich vor Prev/Next doch). Original-Stand: border-top 1px border-subtle + padding `var(--space-7) 0 space-8`. */ body.view-article .com-content-article > .mvi-postnav { position: relative; width: min(var(--container-wide), calc(100vw - 2 * var(--gutter))); left: 50%; transform: translateX(-50%); margin-top: var(--space-7); padding: var(--space-7) 0 var(--space-8); border-top: 1px solid var(--border-subtle); } :is(body.view-article, body.view-archive, body.itemid-980, body.itemid-941) .mvi-postnav__inner { max-width: var(--container-wide); margin: 0 auto; padding-left: var(--space-7); padding-right: var(--space-7); box-sizing: border-box; } :is(body.view-article, body.view-archive, body.itemid-980, body.itemid-941) .mvi-postnav__grid { display: grid; /* minmax(0,1fr) statt 1fr: 1fr = minmax(auto,1fr) lässt die Spalte nicht unter ihr min-content (= längstes unteilbares Wort) schrumpfen — ein langes Kompositum wie „Instrumentalausbildung" sprengt sonst auf schmalen Viewports (≤520) die Spalte und schiebt die rechte Card über den Viewport-Rand. minmax(0,…) erlaubt das Schrumpfen; bei genug Platz identisch zu 1fr. */ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); } :is(body.view-article, body.view-archive, body.itemid-980, body.itemid-941) .mvi-postnav__card { display: flex; flex-direction: column; gap: 0; padding: var(--space-4) var(--space-5); /* 16 / 24 px (kompakt) */ background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); text-decoration: none; color: inherit; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } :is(body.view-article, body.view-archive, body.itemid-980, body.itemid-941) .mvi-postnav__card:hover, :is(body.view-article, body.view-archive, body.itemid-980, body.itemid-941) .mvi-postnav__card:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-md); text-decoration: none; } :is(body.view-article, body.view-archive, body.itemid-980, body.itemid-941) .mvi-postnav__card:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: 2px; } :is(body.view-article, body.view-archive, body.itemid-980, body.itemid-941) .mvi-postnav__card--next { text-align: right; } :is(body.view-article, body.view-archive, body.itemid-980, body.itemid-941) .mvi-postnav__eyebrow { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--fg-muted); } :is(body.view-article, body.view-archive, body.itemid-980, body.itemid-941) .mvi-postnav__card--next .mvi-postnav__eyebrow { align-self: flex-end; } :is(body.view-article, body.view-archive, body.itemid-980, body.itemid-941) .mvi-postnav__arrow { font-family: var(--font-body); font-size: 14px; line-height: 1; font-weight: 400; } :is(body.view-article, body.view-archive, body.itemid-980, body.itemid-941) .mvi-postnav__date { display: block; font-family: var(--font-body); font-size: var(--fs-xs); /* 12 px (kompakt) */ color: var(--fg-muted); margin-top: var(--space-1); /* 4 px */ } :is(body.view-article, body.view-archive, body.itemid-980, body.itemid-941) .mvi-postnav__title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-md); /* 18 px (kompakt) */ line-height: 1.25; letter-spacing: -0.005em; color: var(--brand-bordeaux); margin-top: var(--space-1); /* 4 px */ /* Lange Kompositwörter (z. B. „Instrumentalausbildung") im schmalen Mobile-Slot umbrechen lassen statt überlaufen — härtet die geteilten Postnav-Regeln gegen künftige lange Titel (Paar zu minmax(0,1fr) am __grid). */ overflow-wrap: anywhere; } /* Placeholder hält die Grid-Spalte frei, wenn prev oder next fehlt. */ :is(body.view-article, body.view-archive, body.itemid-980, body.itemid-941) .mvi-postnav__placeholder { display: block; } /* Mobile (≤ 520): bleibt 2-spaltig, aber kompakt — nur Eyebrow + Datum (kein Titel). Breakout deaktiviert. */ @media (max-width: 520px) { body.view-article .com-content-article > .mvi-postnav { position: static; width: auto; transform: none; left: auto; padding: var(--space-6) 0 var(--space-7); } :is(body.view-article, body.view-archive, body.itemid-980, body.itemid-941) .mvi-postnav__inner { padding-left: 0; padding-right: 0; } /* Grid bleibt 1fr 1fr (Desktop-Default) — kein Single-Column-Override. */ :is(body.view-article, body.view-archive, body.itemid-980, body.itemid-941) .mvi-postnav__card { padding: var(--space-3) var(--space-4); /* 12 16 */ } :is(body.view-article, body.view-archive, body.itemid-980, body.itemid-941) .mvi-postnav__eyebrow { font-size: 10px; } :is(body.view-article, body.view-archive, body.itemid-980, body.itemid-941) .mvi-postnav__date { font-size: 13px; } :is(body.view-article, body.view-archive, body.itemid-980, body.itemid-941) .mvi-postnav__title { display: none; } } /* R3 Fix 4: Über-Uns-Prev/Next zeigt auf Mobile den SEITENTITEL, nicht den Subtitle. Generisch (Aktuelles) blendet ≤520 den __title aus und zeigt nur __date (= Datum) — bei Über-Uns ist __date aber der Untertitel („Holz · Blech · Schlag") und __title der Seitenname („Unsere Register"). Daher SPEZIFISCH für die 4 Über-Uns-Itemids: __title wieder einblenden, __date (Untertitel) ausblenden → Card = Eyebrow + Seitentitel. Kein generisches Verhalten. */ @media (max-width: 520px) { body.itemid-1002 .mvi-postnav__title, body.itemid-979 .mvi-postnav__title, body.itemid-937 .mvi-postnav__title, body.itemid-938 .mvi-postnav__title, body.itemid-939 .mvi-postnav__title, body.itemid-940 .mvi-postnav__title, body.itemid-941 .mvi-postnav__title, body.itemid-1244 .mvi-postnav__title, body.itemid-1245 .mvi-postnav__title, body.itemid-982 .mvi-postnav__title, body.itemid-983 .mvi-postnav__title, body.itemid-975 .mvi-postnav__title, body.itemid-976 .mvi-postnav__title, body.itemid-977 .mvi-postnav__title, body.itemid-978 .mvi-postnav__title, body.itemid-998 .mvi-postnav__title, body.itemid-981 .mvi-postnav__title, body.itemid-980 .mvi-postnav__title { display: block; } body.itemid-1002 .mvi-postnav__date, body.itemid-979 .mvi-postnav__date, body.itemid-937 .mvi-postnav__date, body.itemid-938 .mvi-postnav__date, body.itemid-939 .mvi-postnav__date, body.itemid-940 .mvi-postnav__date, body.itemid-941 .mvi-postnav__date, body.itemid-1244 .mvi-postnav__date, body.itemid-1245 .mvi-postnav__date, body.itemid-982 .mvi-postnav__date, body.itemid-983 .mvi-postnav__date, body.itemid-975 .mvi-postnav__date, body.itemid-976 .mvi-postnav__date, body.itemid-977 .mvi-postnav__date, body.itemid-978 .mvi-postnav__date, body.itemid-998 .mvi-postnav__date, body.itemid-981 .mvi-postnav__date, body.itemid-980 .mvi-postnav__date { display: none; } } /* === S-11: ÜBER-UNS — 2-Spalten + Sidebar + Stats + Titel/Eyebrow ========= */ /* Greift auf body.has-sidebar-left (Joomla setzt das, sobald ein Modul auf sidebar-left zugewiesen ist — hier NUR die 4 Über-Uns-Itemids 1002/979/937/938). NICHT mehr an view-article gebunden: itemid-938 (Archivierte Beiträge) ist view-archive (Diagnose 2026-05-17), würde sonst aus Sidebar + 2-Spalten-Grid herausfallen. Startseite hat kein sidebar-left-Modul → unberührt. Gemeinsamer Parent = die Cassiopeia `.site-grid` (siehe DECISIONS 2026-05-17). */ /* --- Fix 1: 2-Spalten + FULL-BLEED-Banner, Desktop ≥1051 ---------------- Banner muss wie Startseite/Seefest über die VOLLE Viewport-Breite (1280) gehen. Cassiopeias Basis-Grid hat dafür [full-start]/[full-end]- Lines; die frühere S-11-`grid-template-columns` (fixe Spalten ohne diese Lines) kappte den Banner auf 1232. Lösung: eigene Lines, Banner spannt full-start/full-end; Sidebar/Gap/Content per Line platziert. Äußere Spalten = `minmax(var(--gutter),1fr)` → wachsen auf breiten Viewports und ZENTRIEREN den 2-Spalten-Block; Minimum --gutter (24) auf schmalen. Content-Spalte gecappt auf `--container-wide − sidebar − gap` (= 1320−280−56 = 984) → der Block (Sidebar+Gap+Content) ist max --container-wide (1320), zentriert — wie der restliche Site-Content. R4-Fix der R3-Regression: R3 hatte feste 24-Außenspalten + `1fr`-Content → Content wuchs unbegrenzt (@1920 ≈ 1536 px, full-bleed statt zentriert). @1280 identisch zu R3 (24/24, Content 896 — Symmetrie/Token bleibt). Banner spannt weiter full-start/full-end = volle Viewport-Breite (Fullbleed unberührt). (Diagnose 2026-05-18 @1280/1680/1920.) */ @media (min-width: 1051px) { body.has-sidebar-left .site-grid { grid-template-columns: [full-start] minmax(var(--gutter), 1fr) [main-start] var(--ueber-sidebar-w) [gap-start] var(--ueber-col-gap) [content-start] minmax(0, calc(var(--container-wide) - var(--ueber-sidebar-w) - var(--ueber-col-gap))) [main-end] minmax(var(--gutter), 1fr) [full-end]; grid-template-areas: none; column-gap: 0; } body.has-sidebar-left .container-banner { grid-column: full-start / full-end; grid-row: 1; } body.has-sidebar-left .container-sidebar-left { grid-column: main-start / gap-start; grid-row: 2; /* Fix 3: bündig mit dem Breadcrumb. Content (.item-page) hat padding-top --space-7 (48); zusätzlich sitzt die Content-Box in derselben Grid-Row strukturell 16 px (=--space-4) tiefer als der Sidebar-Container (gemessen 2026-05-17) → +--space-4, damit der Eyebrow exakt auf Breadcrumb-Höhe startet. Default-Pfad gilt für Hero-Seiten (Über-Uns + Jugend) — Sidebar ist initial NICHT sticky (Hero in Row 1 schiebt Row 2 unter den sticky-Top 120 px). S-14-Sponsoren-Override siehe direkt unten. */ padding-top: calc(var(--space-7) + var(--space-4)); position: sticky; top: 120px; align-self: start; } /* S-14-Sponsoren (2026-05-21): Hero-lose Sidebar-Seiten — Sidebar ist ab Frame 1 sticky aktiv, weil Grid-Row-2-Default (~88, direkt unter Header) unter `top: 120px` liegt → sticky kicks in. Der +16-px-Grid- Strukturversatz ist hier nicht relevant (kein Hero in Row 1). Stattdessen: Eyebrow bündig zum Breadcrumb via padding-top --space-6 (32 = sticky-Top 120 − Header-h 88, kompensiert den Sticky-Sprung). `:not(:has(.container-banner))` erkennt Hero-Abwesenheit strukturell — kein Itemid-Match nötig, wirkt auf jede künftige Hero-lose Sidebar- Seite (z. B. „Sponsor werden" 983, „Bilder"/„Kontakte" nach mod_ custom-Swap). */ body.has-sidebar-left:not(:has(.container-banner)) .container-sidebar-left { padding-top: var(--space-6); } body.has-sidebar-left .container-component { grid-column: content-start / main-end; grid-row: 2; } /* Content füllt seine (jetzt auf --container-wide gecappte, zentrierte) Spalte → Box-Rechts == Spalten-Rechts, symmetrisch zur Sidebar (S-10-max-width/Zentrierung aus; R3 Fix 2 + R4-Cap). */ body.has-sidebar-left .com-content-article.item-page { margin-left: 0; max-width: none; } } /* 992–1050: Projekt-`.site-grid`-Desktop-Override (≥992) macht sonst 2-spaltig — für den scoped Fall auf gestapelt zurück (comp über side-l, wie Mobile-Default <992). */ @media (min-width: 992px) and (max-width: 1050px) { body.has-sidebar-left .site-grid { grid-template-areas: ". banner banner banner banner ." ". comp comp comp comp ." ". side-l side-l side-l side-l ." ". side-r side-r side-r side-r ." ". bot-a bot-a bot-a bot-a ." ". bot-b bot-b bot-b bot-b ." ". bot-c bot-c bot-c bot-c ." ". bot-d bot-d bot-d bot-d ."; } } /* --- Mockup-Parität: Über-Uns-Sidebar ist DESKTOP-ONLY ------------------ Das Mockup blendet die „Über Uns"-Sidebar ≤1050 px komplett aus (Hamburger-Hauptnav genügt) — Live stapelte sie zuvor als großen Bordeaux-Block unter den Content. Bewusste Revision der früheren S-11-Stacking-Entscheidung (User-Auftrag „alles ans Mockup", Diagnose 2026-05-17). Leere `side-l`-Grid-Area ohne Element → 0-Höhe, kein Gap. */ @media (max-width: 1050px) { body.itemid-1002 .container-sidebar-left, body.itemid-979 .container-sidebar-left, body.itemid-937 .container-sidebar-left, body.itemid-938 .container-sidebar-left, body.itemid-939 .container-sidebar-left, body.itemid-940 .container-sidebar-left, body.itemid-941 .container-sidebar-left, body.itemid-1244 .container-sidebar-left, body.itemid-1245 .container-sidebar-left, body.itemid-982 .container-sidebar-left, body.itemid-983 .container-sidebar-left, body.itemid-975 .container-sidebar-left, body.itemid-976 .container-sidebar-left, body.itemid-977 .container-sidebar-left, body.itemid-978 .container-sidebar-left, body.itemid-998 .container-sidebar-left, body.itemid-981 .container-sidebar-left, body.itemid-980 .container-sidebar-left { display: none; } } /* --- Fix 2: Sidebar = mod_custom „.mvi-about-side" (Mockup-exakt) -------- */ /* Ersetzt das frühere mod_menu (hatte kein Untertitel-Feld). Markup: docs/ueber-uns-sidebar.html (Modul nur auf Itemids 1002/979/937/938). Aktiver Zustand OHNE Backend-PHP: Joomla setzt body.itemid-NNNN, der Link trägt data-itemid="NNNN" → reines CSS-Match (:is()-Gruppe unten). Px-Werte = Mockup-exakt (kein Spacing-Token deckt 18/14/13/17/12 px), konsistent zum etablierten S-11-Muster; Farben/Radius/Border = Token. */ /* Cassiopeia rendert das Sidebar-Modul als EIN Element `.sidebar-left.card` (Compound, NICHT `.sidebar-left .card`!) mit 1px-Border + `margin:16px 0`, darin `.card-body` mit `padding:16px`. Ohne Reset: Komponente 280→246 px, +17 px Versatz, 16 px tiefer. Compound-Selektor + card-body-Reset → volle 280-px-Track-Breite, bündig oben (Diagnose 2026-05-17, Live-Ahnenkette). */ .sidebar-left.card:has(.mvi-about-side), .sidebar-left.card:has(.mvi-about-side) .card-body { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; } .mvi-about-side { display: flex; flex-direction: column; gap: 18px; /* Mockup sideWrap-gap */ } .mvi-about-side__head { display: flex; flex-direction: column; gap: 6px; /* Mockup Eyebrow → Titel */ padding: 0 0 var(--space-4); /* Mockup 0 0 16 */ border-bottom: var(--border-w-thin) solid var(--border-subtle); } .mvi-about-side__eyebrow { font-family: var(--font-body); font-size: 11px; /* Mockup-Eyebrow 11/600 */ font-weight: 600; line-height: 1.55; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--brand-bordeaux); } .mvi-about-side__title { margin: 0; font-family: var(--font-display); font-size: 28px; /* Mockup-Titel 28/600 */ font-weight: 600; line-height: 1.1; letter-spacing: -0.005em; /* Mockup -0.14px @28 */ color: var(--fg-primary); /* Mockup: Anthrazit, nicht Bordeaux */ } .mvi-about-side__nav { display: flex; flex-direction: column; gap: 2px; /* Mockup nav-gap */ } .mvi-about-side__link { position: relative; /* Anker für ::after-Chevron */ display: grid; grid-template-columns: 32px 1fr; /* num | body (Chevron = absolut) */ align-items: center; gap: var(--space-3); /* Mockup 12 */ padding: var(--space-3) 30px var(--space-3) 14px; /* rechts Platz für Chevron */ border-radius: var(--radius-md); /* Mockup 8 */ color: var(--fg-default); /* inaktiv Anthrazit (User 2026-05-17) */ text-decoration: none; transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); } .mvi-about-side__num { font-family: var(--font-display); font-size: 13px; /* Mockup-Num 13/400 */ font-weight: 400; font-style: italic; /* Mockup-Num Spectral italic */ line-height: 1.55; color: var(--brand-gold-deep); /* Mockup inaktiv #9a7826 */ font-variant-numeric: tabular-nums; } .mvi-about-side__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .mvi-about-side__label { font-family: var(--font-display); font-size: 17px; /* Mockup-Label 17/500 */ font-weight: 500; line-height: 1.25; letter-spacing: -0.005em; /* Mockup -0.085px @17 */ color: var(--fg-default); /* inaktiv Anthrazit (User 2026-05-17) */ } .mvi-about-side__hint { font-family: var(--font-body); font-size: 12px; /* Mockup-Hint 12/400 */ font-weight: 400; line-height: 1.55; letter-spacing: 0.02em; /* Mockup 0.24px @12 */ color: var(--fg-secondary); /* inaktiv dezent (User 2026-05-17) */ } /* Fix 6: Chevron als CSS-`::after` (NICHT mehr als