/*
Theme Name:        SCB Club Theme
Theme URI:         https://github.com/tec-12-at/scb-club
Author:            tec12 / Christoph
Author URI:        https://www.tec12.at
Description:       Eigenes, schlankes Vereins-Theme für den Schützenclub Bründl. Stil basiert auf eigenem Design-System (Barlow Condensed, Primärrot #C42119), modern und voll updatefähig neu aufgebaut. Arbeitet eng mit dem Plugin scb-club zusammen (Termine, Mitglieder, Sponsoren).
Version:           0.11.15
Requires at least: 6.6
Tested up to:      7.1
Requires PHP:      8.0
License:           GPL-2.0-or-later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       scb-club-theme
Tags:              custom-header, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ============================================================================
   1. CSS-Variablen (Design-Tokens)

   Layer-Struktur:
   :root                        → Defaults (light)
   [data-theme="dark"]          → Dark-Overrides – seit 0.9.0 in
                                  assets/dark.css (nur bei SCB_THEME_DARK_MODE)
   ============================================================================ */
:root {
	/* Farben */
	--scb-red:        #C42119;
	--scb-red-dark:   #A01A14;
	--scb-red-bg:     rgba(196, 33, 25, 0.286);
	--scb-text:       #353238;
	--scb-text-soft:  #50575e;
	--scb-bg:         #ffffff;
	--scb-bg-soft:    #f6f6f6;
	--scb-line:       #e2e4e7;
	--scb-accent:     #869791;
	--scb-overlay:    rgba(255, 255, 255, 0.85);

	/* Schriften */
	--scb-font-body:    "Barlow Semi Condensed", "Helvetica Neue", Arial, sans-serif;
	--scb-font-display: "Barlow Condensed", "Helvetica Neue", Arial, sans-serif;

	/* Layout */
	/* Max-Width des Content-Containers. Bewusst groß, damit auf breiten Screens
	   kaum weiße Ränder bleiben. Sidebar-Layouts halten ihre Lesbarkeit über
	   `--scb-wrap--narrow` (800px) für reine Textseiten. */
	--scb-max:          1700px;
	--scb-gap:          24px;
	--scb-radius:       0px;
	--scb-shadow:       0 2px 12px rgba(0,0,0,0.08);

	/* Schriftgrößen */
	--scb-fs-base:      17px;
	--scb-fs-small:     14px;
	--scb-fs-lead:      20px;
	--scb-fs-h1:        clamp(36px, 5vw, 64px);
	--scb-fs-h2:        clamp(28px, 3.5vw, 40px);
	--scb-fs-h3:        clamp(22px, 2.5vw, 28px);

	/* Theme-Schalter-Status (für CSS-Animationen) */
	color-scheme: light;
}

/* ----------------------------------------------------------------------------
   Dark-Modus – seit 0.9.0 ausgelagert nach assets/dark.css (wird nur geladen,
   wenn SCB_THEME_DARK_MODE aktiv ist; Standard: aus = immer hell).
   ---------------------------------------------------------------------------- */

/* Nur hell (SCB_THEME_DARK_MODE aus → header.php setzt data-scb-dark-mode="off"):
   „only" verbietet dem Browser einen erzwungenen Dunkelmodus (z. B. Chrome
   „Auto Dark Mode"). Ändert das helle Design nicht. */
:root[data-scb-dark-mode="off"] {
	color-scheme: only light;
}

/* ============================================================================
   2. Reset / Basis
   ============================================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: var(--scb-font-body);
	font-size: var(--scb-fs-base);
	line-height: 1.55;
	color: var(--scb-text);
	background: var(--scb-bg);
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--scb-red); text-decoration: none; }
a:hover, a:focus { color: var(--scb-red-dark); text-decoration: underline; }

h1, h2, h3, h4, h5 {
	font-family: var(--scb-font-display);
	font-weight: 700;
	line-height: 1.1;
	margin: 0 0 .5em;
	color: var(--scb-text);
	letter-spacing: -0.005em;
}
h1 { font-size: var(--scb-fs-h1); }
h2 { font-size: var(--scb-fs-h2); }
h3 { font-size: var(--scb-fs-h3); }

p { margin: 0 0 1em; }

blockquote {
	border-left: 4px solid var(--scb-red);
	padding: .25em 1em;
	margin: 1em 0;
	color: var(--scb-text-soft);
	font-style: italic;
}

hr { border: 0; border-top: 1px solid var(--scb-line); margin: 2em 0; }

/* ============================================================================
   3. Layout-Hilfsklassen
   ============================================================================ */
.scb-wrap { max-width: var(--scb-max); margin: 0 auto; padding: 0 var(--scb-gap); }
.scb-wrap--wide { max-width: 1440px; }
.scb-wrap--narrow { max-width: 900px; } /* 0.10.0: Textspalte ≈ 850 px wie ClubDesk (vorher 800) */

.scb-section { padding: clamp(40px, 6vw, 72px) 0; }
.scb-section--soft { background: var(--scb-bg-soft); }

/* ============================================================================
   4. Header / Navigation
   ============================================================================ */
/* === Header (B-Bold) === */
.scb-header {
	position: relative;
	background: var(--c-surface);
	border-bottom: 1px solid var(--c-line);
	z-index: 20;
}
.scb-header__topbar {
	height: 5px;
	background: var(--scb-red);
}
.scb-header__inner {
	max-width: var(--scb-container, 1700px);
	margin: 0 auto;
	padding: 0 var(--gutter, 24px);
	height: clamp(72px, 9vw, 92px);
	min-height: 72px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	/* Polish: kein overflow:hidden mehr — clippte sonst die Dropdown-Submenüs.
	   Das Logo wird stattdessen direkt via max-width/max-height begrenzt. */
}
.scb-header__logo {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	color: var(--c-text);
	text-decoration: none;
}
/* Logo: deckt sowohl unseren eigenen Markup-Pfad ab als auch den von
   the_custom_logo() (Klasse `.custom-logo` direkt am img und `.custom-logo-link`
   am a). Wichtig: `height` mit !important überschreibt das HTML-`height="520"`-
   Attribut, das WP fest in den img-Tag schreibt. */
.scb-header__logo,
.scb-header__logo .custom-logo-link {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	color: var(--c-text);
	text-decoration: none;
	line-height: 0;
}
.scb-header__logo img,
.scb-header__logo .custom-logo {
	height: clamp(36px, 5vw, 52px) !important;
	width: auto !important;
	max-width: min(260px, 50vw);
	max-height: clamp(36px, 5vw, 52px);
	object-fit: contain;
	display: block;
	filter: invert(var(--c-logo-invert, 0));
	transition: filter .2s ease;
}
@media (max-width: 900px) {
	.scb-header__logo img,
	.scb-header__logo .custom-logo {
		height: 40px !important;
		max-width: 50vw;
	}
}
@media (max-width: 600px) {
	.scb-header__logo img,
	.scb-header__logo .custom-logo {
		height: 34px !important;
		max-width: 48vw;
	}
}
@media (max-width: 380px) {
	.scb-header__logo img,
	.scb-header__logo .custom-logo {
		height: 30px !important;
		max-width: 44vw;
	}
}
.scb-header__logo-text {
	font-family: var(--scb-font-display);
	font-size: clamp(22px, 2.5vw, 28px);
	font-weight: 700;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}
.scb-header__actions { display: inline-flex; align-items: center; gap: 24px; }

/* B-Bold Nav */
.scb-nav { display: flex; align-items: center; }
.scb-nav > div > ul,
.scb-nav > ul {
	list-style: none; padding: 0; margin: 0;
	display: flex; align-items: center; gap: 26px;
}
.scb-nav__item { position: relative; }
.scb-nav__link {
	display: inline-flex; align-items: center; gap: 5px;
	flex-wrap: nowrap;          /* Text + Caret bleiben in einer Zeile */
	white-space: nowrap;        /* "Bewerbe ⌄" wird nicht umgebrochen */
	font-family: var(--scb-font-body);
	font-weight: 600; font-size: 14px;
	letter-spacing: 0.08em; text-transform: uppercase;
	text-decoration: none;
	color: var(--c-text);
	padding-bottom: 2px;
	border-bottom: 2px solid transparent;
	transition: color .15s ease, border-color .15s ease;
}
.scb-nav__link:hover { color: var(--scb-red); }
.scb-nav__item.is-active > .scb-nav__link {
	color: var(--scb-red);
	border-bottom-color: var(--scb-red);
}
.scb-nav__caret { flex: 0 0 auto; transition: transform .15s ease; }
.scb-nav__item.has-children:hover .scb-nav__caret,
.scb-nav__item.has-children:focus-within .scb-nav__caret { transform: rotate(180deg); }

/* Dropdown — Hover-Gap-Bug-Fix (Theme-Polish 7):
 * Vorher: margin-top:8px erzeugte einen 8px-Spalt zwischen Trigger-Item und
 * Submenü. Beim Runterfahren mit der Maus verlor das Item den :hover-Status
 * (Cursor in der Lücke = nichts gehovered), Submenü klappte zu.
 * Jetzt: padding-top:8px + background-clip:content-box hält den visuellen
 * Abstand erhalten, aber das Submenü-Element reicht bis an den Trigger ran.
 * Zusätzlich ::before als unsichtbare Hover-Bridge + .sub-menu:hover damit
 * das Submenü sich selbst offen hält wenn der Cursor drin ist.
 */
.scb-nav .sub-menu {
	position: absolute; top: 100%; left: -16px;
	margin-top: 0;
	padding: 8px 0;
	min-width: 280px;
	list-style: none;
	background-color: var(--c-surface);
	background-clip: padding-box;
	border: 1px solid var(--c-line);
	border-top-width: 9px;            /* 1px Linie + 8px transparent statt margin-top */
	border-top-color: transparent;     /* Bridge unsichtbar */
	box-shadow: var(--scb-shadow-card);
	z-index: 30;
	opacity: 0; visibility: hidden;
	transition: opacity .15s ease, visibility 0s linear .15s;
}
.scb-nav__item.has-children:hover > .sub-menu,
.scb-nav__item.has-children:focus-within > .sub-menu,
.scb-nav .sub-menu:hover {
	opacity: 1; visibility: visible;
	transition: opacity .15s ease, visibility 0s;
}
.scb-nav .sub-menu li { display: block; }
.scb-nav .sub-menu .scb-nav__link {
	display: block;
	padding: 11px 20px;
	font-size: 15px; font-weight: 500;
	letter-spacing: 0; text-transform: none;
	border-bottom: 0;
}
.scb-nav .sub-menu .scb-nav__link:hover { background: var(--c-surface-2); }

/* Header-Actions: Toggle-Switches rechts gruppiert */
.scb-header__actions {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

/* Light/Dark-Theme-Toggle (B-Bold: 42×42 mit border-radius 2) */
.scb-theme-toggle {
	width: 42px; height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1.5px solid var(--c-line);
	border-radius: 2px;
	color: var(--c-text);
	cursor: pointer;
	flex: 0 0 auto;
	padding: 0;
	transition: border-color .15s ease;
}
.scb-theme-toggle:hover, .scb-theme-toggle:focus-visible {
	border-color: var(--scb-red);
}
/* Mond im Light-Modus, Sonne im Dark-Modus (man toggelt zum Gegenteil) */
[data-theme="light"] .scb-theme-toggle__sun,
:root:not([data-theme="dark"]) .scb-theme-toggle__sun { display: none; }
[data-theme="dark"] .scb-theme-toggle__moon { display: none; }

/* Hamburger (b1-burger) */
.scb-menu-toggle {
	width: 44px; height: 44px;
	display: none; /* erst ab tablet sichtbar via scb-b1.css */
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1.5px solid var(--c-line);
	border-radius: 2px;
	color: var(--c-text);
	cursor: pointer;
	flex: 0 0 auto;
	padding: 0;
}
.scb-menu-toggle__close { display: none; }
.scb-menu-toggle[aria-expanded="true"] .scb-menu-toggle__bars { display: none; }
.scb-menu-toggle[aria-expanded="true"] .scb-menu-toggle__close { display: inline-block; }

/* Tablet/Mobile: Nav verstecken, Burger zeigen.
   b1.css macht das bereits über display:none für b1-nav.
   Mobile-Drawer: wenn .is-open auf .scb-nav, dann als full-width-Overlay zeigen. */
@media (max-width: 992px) {
	.scb-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0; right: 0;
		background: var(--c-surface);
		border-top: 1px solid var(--c-line);
		padding: 8px var(--gutter, 16px) 16px;
		z-index: 30;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	}
	/* Wichtig: b1.css hat .b1-nav { display:none !important } für ≤992px.
	   Der Drawer-Open-State muss daher mit höherer Spezifität + !important
	   den b1-nav-Override schlagen — die Nav hat beide Klassen
	   (`<nav class="b1-nav scb-nav">`). */
	.scb-nav.is-open,
	.b1-nav.scb-nav.is-open { display: block !important; }
	.scb-nav > div > ul, .scb-nav > ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}
	.scb-nav__item { width: 100%; }
	.scb-nav__link {
		display: flex;
		justify-content: space-between;
		padding: 14px 4px;
		border-bottom: 1px solid var(--c-line);
		font-size: 17px;
	}
	.scb-nav .sub-menu {
		position: static;
		opacity: 1; visibility: visible;
		border: 0; box-shadow: none;
		padding: 4px 0 8px 16px;
		background: transparent;
		min-width: 0;
	}
}

/* Menü-Toggle (mobile) */
.scb-menu-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: 0;
	padding: 10px 14px;
	cursor: pointer;
	font-family: var(--scb-font-display);
	font-size: 18px;
	color: var(--scb-text);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.scb-menu-toggle__icon { display: inline-block; width: 22px; height: 14px; position: relative; }
.scb-menu-toggle__icon::before, .scb-menu-toggle__icon::after, .scb-menu-toggle__icon span {
	content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor;
}
.scb-menu-toggle__icon::before { top: 0; }
.scb-menu-toggle__icon span { top: 6px; }
.scb-menu-toggle__icon::after { bottom: 0; }

/* Legacy-Navigation entfernt (vor B-Bold-Refactor).
   Die alten `.scb-nav a {display:block}` + `.scb-nav .sub-menu a` Regeln
   überschrieben mit höherer Spezifizität die neuen `.scb-nav__link`
   Regeln (B-Bold ab Phase 4d). Das produzierte den Caret-Umbruch
   "Bewerbe⌄" → Caret in nächste Zeile.
   Die aktuelle Navigation wird komplett über die `.scb-nav__link` /
   `.scb-nav .sub-menu` Regeln weiter oben in dieser Datei sowie
   `b1.css` (Responsive) gesteuert. */

/* 0.11.13: Hauptmenü zwischen 993 und 1140 px – vorher lief es über (Seite seitlich scrollbar).
   Engere Abstände, damit alle Menüpunkte in eine Zeile passen. */
@media (min-width: 993px) and (max-width: 1140px) {
	.scb-nav > div > ul,
	.scb-nav > ul { gap: 14px; }
	.scb-nav__link { letter-spacing: 0.04em; }
}
/* 0.11.13: Am Desktop kein Burger-Knopf neben dem Menü (dort ohne Funktion, der Toggle oben
   setzte ihn auf allen Breiten sichtbar). Passt das Menü trotzdem nicht in eine Zeile (z. B. mehr
   Menüpunkte), setzt theme.js `.is-nav-collapsed` am Header → Burger-Menü wie am Tablet.
   :where() hält die Spezifität gleich wie in der Tablet-Regel oben, damit aktive Menüpunkte und
   Untermenü-Links genauso aussehen. */
@media (min-width: 993px) {
	.scb-menu-toggle { display: none; }
	:where(.scb-header.is-nav-collapsed) .scb-menu-toggle { display: inline-flex; }
	:where(.scb-header.is-nav-collapsed) .scb-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0; right: 0;
		background: var(--c-surface);
		border-top: 1px solid var(--c-line);
		padding: 8px var(--gutter, 16px) 16px;
		z-index: 30;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	}
	:where(.scb-header.is-nav-collapsed) .scb-nav.is-open { display: block; }
	:where(.scb-header.is-nav-collapsed) .scb-nav > div > ul,
	:where(.scb-header.is-nav-collapsed) .scb-nav > ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}
	:where(.scb-header.is-nav-collapsed) .scb-nav__item { width: 100%; }
	:where(.scb-header.is-nav-collapsed) .scb-nav__link {
		display: flex;
		justify-content: space-between;
		padding: 14px 4px;
		border-bottom: 1px solid var(--c-line);
		font-size: 17px;
		letter-spacing: 0.08em;
	}
	:where(.scb-header.is-nav-collapsed) .scb-nav .sub-menu {
		position: static;
		opacity: 1; visibility: visible;
		border: 0; box-shadow: none;
		padding: 4px 0 8px 16px;
		background: transparent;
		min-width: 0;
	}
}

/* ============================================================================
   5. Hero – B-Bold-Layout aus claude.ai/design

   Struktur:
   .scb-hero                       → Sektion mit Container-Padding
     .scb-hero__container          → max-width 1200, gutter
       .scb-hero__notices          → optional rote Notice-Banner
       .b1-hero-grid               → 2-Spalter (auf Mobile 1-Spalter, scb-b1.css)
         .scb-hero__col            → linke Text-Spalte
           .scb-hero__eyebrow      → kleine rote Überschrift
           .scb-hero__display      → riesige Display-Headline ("WILLKOMMEN.")
             .scb-hero__period     → roter Punkt
           .scb-hero__subline      → Subtext
           .scb-hero__ctas         → Buttons
         .scb-hero__col--media     → rechte Bild-Spalte
           .scb-hero__media        → Wrapper
             .scb-hero__photo      → Beitragsbild
             .scb-hero__badge      → "1968 / gegründet" roter Klotz
   ============================================================================ */
.scb-hero {
	background: var(--c-bg);
	color: var(--c-text);
}
.scb-hero__container {
	max-width: var(--scb-container, 1200px);
	margin: 0 auto;
	padding: 0 var(--gutter, 24px);
}

/* Notice-Banner (über dem Hero-Grid) */
.scb-hero__notices {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 28px;
}
.scb-notice-inline {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--scb-red-bg);
	border-left: 4px solid var(--scb-red);
	padding: 12px 18px;
}
.scb-notice-inline__text {
	font-family: var(--scb-font-body);
	font-weight: 800;
	font-size: 22px;
	color: var(--c-text);
	line-height: 1.25;
	letter-spacing: 0;
}
.scb-notice-inline__text strong { color: var(--scb-red); }

@media (max-width: 900px) {
	.scb-notice-inline__text { font-size: 20px; }
}

@media (max-width: 640px) {
	.scb-notice-inline { align-items: flex-start; }
	.scb-notice-inline__text {
		font-size: 18px;
		line-height: 1.3;
	}
}

/* Hero-Grid */
.b1-hero-grid, .scb-hero__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
	padding: 52px 0 64px;
}

/* Linke Spalte (Text) */
.scb-hero__eyebrow {
	display: inline-block;
	font-family: var(--scb-font-body);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--scb-red);
	margin-bottom: 18px;
}
/* Höhere Spezifität als `.scb h1` aus tokens.css */
.scb h1.scb-hero__display {
	font-family: var(--scb-font-display);
	font-weight: 700;
	font-size: clamp(58px, 11vw, 116px);
	line-height: 0.85;
	letter-spacing: 0.005em;
	text-transform: uppercase;
	color: var(--c-text);
	margin: 0;
}
.scb-hero__period {
	color: var(--scb-red);
}
.scb-hero__subline {
	font-family: var(--scb-font-body);
	font-size: 21px;
	line-height: 1.35;
	color: var(--c-text-soft);
	margin: 22px 0 0;
	max-width: 440px;
}
.scb-hero__ctas {
	display: flex;
	gap: 12px;
	margin-top: 30px;
	flex-wrap: wrap;
}

/* Rechte Spalte (Foto + Badge) */
.scb-hero__col--media { display: block; }
.scb-hero__media {
	position: relative;
	overflow: hidden;
	background: var(--c-surface-2);
}
.scb-hero__photo {
	display: block;
	width: 100%;
	height: clamp(280px, 40vw, 480px);
	object-fit: cover;
	object-position: center;
}
.scb-hero__photo--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--c-text-soft);
	font-family: monospace;
	font-size: 14px;
	background:
		repeating-linear-gradient(
			135deg,
			var(--c-surface-2) 0 12px,
			var(--c-surface) 12px 24px
		);
}
.scb-hero__badge {
	position: absolute;
	bottom: -1px;
	left: -1px;
	background: var(--scb-red);
	color: #fff;
	padding: 14px 20px;
}
.scb-hero__badge-year {
	font-family: var(--scb-font-display);
	font-weight: 700;
	font-size: 38px;
	line-height: 0.9;
}
.scb-hero__badge-label {
	font-family: var(--scb-font-body);
	font-size: 12.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* ============================================================================
   Page-Hero (Unter-Seiten) – B-Bold-Look
   Mit Beitragsbild + Eyebrow + Display-Headline + Breadcrumb.
   ============================================================================ */
.scb-page-hero {
	position: relative;
	overflow: hidden;
	min-height: clamp(280px, 42vh, 480px);
	display: flex;
	align-items: flex-end;
	color: #fff;
	background: var(--c-footer, #1B1A20);
}

/* Variant: ohne Bild → helle Variante. So kompakt wie möglich. */
.scb-page-hero--solid {
	background: var(--c-surface-2, #ECECEC);
	color: var(--c-text, #353238);
	min-height: 0;
	align-items: center;
	padding: clamp(14px, 2vw, 24px) 0;
}
/* Solid-Variante: kein doppeltes Padding über das innere Element. */
.scb-page-hero--solid .scb-page-hero__inner {
	padding-top: 0;
	padding-bottom: 0;
}

/* Beitragsbild als Layer */
.scb-page-hero__bg {
	position: absolute;
	inset: 0;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	z-index: 0;
}

/* Dunkler Verlauf von unten für Lesbarkeit */
.scb-page-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.15) 0%,
		rgba(0, 0, 0, 0.35) 45%,
		rgba(0, 0, 0, 0.75) 100%
	);
}

.scb-page-hero__inner {
	position: relative;
	z-index: 2;
	padding: clamp(28px, 4vw, 52px) var(--gutter, 24px);
	max-width: var(--scb-max, 1500px);
	width: 100%;
	margin: 0 auto;
}

/* Breadcrumb */
.scb-breadcrumb {
	margin: 0 0 clamp(16px, 2vw, 24px);
}
.scb-breadcrumb__list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 0;
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.02em;
}
.scb-breadcrumb__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.scb-page-hero--with-image .scb-breadcrumb__item { color: rgba(255, 255, 255, 0.85); }
.scb-page-hero--solid       .scb-breadcrumb__item { color: var(--c-text-soft, #50575E); }

.scb-breadcrumb__item a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.15s ease;
}
.scb-breadcrumb__item a:hover {
	border-bottom-color: currentColor;
}
.scb-breadcrumb__item--current {
	font-weight: 700;
}
.scb-page-hero--with-image .scb-breadcrumb__item--current { color: #fff; }
.scb-page-hero--solid       .scb-breadcrumb__item--current { color: var(--c-text, #353238); }

.scb-breadcrumb__sep {
	opacity: 0.6;
}

/* Eyebrow (kleine rote Überschrift über dem Display-Titel) */
.scb-page-hero__eyebrow {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--scb-red, #C42119);
	margin: 0 0 14px;
}
.scb-page-hero--with-image .scb-page-hero__eyebrow {
	color: #FF6E66; /* hellere Variante auf Foto */
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

/* Display-Titel: groß, kondensiert, UPPERCASE */
.scb-page-hero__title {
	font-family: var(--scb-font-display, "Barlow Condensed", "Helvetica Neue", Arial, sans-serif);
	font-weight: 700;
	font-size: 65px;
	line-height: 0.92;
	letter-spacing: 0.005em;
	text-transform: uppercase;
	margin: 0;
	color: inherit;
	overflow-wrap: anywhere;
	hyphens: auto;
}
.scb-page-hero--with-image .scb-page-hero__title {
	color: #fff;
	text-shadow: 0 4px 32px rgba(0, 0, 0, 0.55);
}

@media (max-width: 992px) {
	.scb-page-hero__title {
		font-size: 54px;
	}
}

@media (max-width: 576px) {
	.scb-page-hero__title {
		font-size: 42px;
		line-height: 1;
	}
}

@media (max-width: 380px) {
	.scb-page-hero__title {
		font-size: 36px;
	}
}

/* Roter Punkt-Akzent am Ende des Titels (wie auf der Startseite) */
.scb-page-hero__dot {
	color: var(--scb-red, #C42119);
	margin-left: 2px;
}
.scb-page-hero--with-image .scb-page-hero__dot {
	color: #FF6E66;
	text-shadow: 0 4px 32px rgba(0, 0, 0, 0.55);
}

/* ============================================================================
   6. Buttons / Tasten
   ============================================================================ */
.scb-btn {
	/* inline-flex + nowrap: SVG-Pfeil bleibt am Text, kein Umbruch */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: -moz-fit-content;
	width: fit-content;
	white-space: nowrap;
	padding: 14px 28px;
	border: 0;
	background: var(--scb-red);
	color: #fff !important;
	font-family: var(--scb-font-display);
	font-size: 18px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-decoration: none !important;
	cursor: pointer;
	transition: background .15s ease;
}
.scb-btn svg { flex-shrink: 0; }
.scb-btn:hover, .scb-btn:focus { background: var(--scb-red-dark); }
.scb-btn--ghost { background: transparent; color: var(--scb-red) !important; border: 2px solid var(--scb-red); padding: 12px 26px; }
.scb-btn--ghost:hover { background: var(--scb-red); color: #fff !important; }
.scb-btn--lg {
	padding: 18px 36px;
	font-size: clamp(18px, 2vw, 22px);
	letter-spacing: 0.06em;
}

/* ============================================================================
   7. Inhalts-Sektionen / Cards
   ============================================================================ */
.scb-card {
	background: var(--scb-bg);
	border: 1px solid var(--scb-line);
	padding: 24px;
	margin: 16px 0;
}
.scb-card h3 { margin-top: 0; color: var(--scb-red); }

.scb-grid { display: grid; gap: var(--scb-gap); }
.scb-grid--2 { grid-template-columns: 1fr; }
.scb-grid--3 { grid-template-columns: 1fr; }
@media (min-width: 700px)  { .scb-grid--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .scb-grid--3 { grid-template-columns: 1fr 1fr 1fr; } }

/* ============================================================================
   8. Sponsoren-Streifen + Footer (B-Bold)
   ============================================================================ */

/* Sponsoren-Streifen (über Footer, immer dunkel) */
.scb-sponsors-strip {
	background: var(--c-surface-2);
	border-top: 1px solid var(--c-line);
	border-bottom: 1px solid var(--c-line);
	padding: clamp(40px, 5vw, 56px) var(--gutter, 24px);
}
.scb-sponsors-strip__container { max-width: var(--scb-max, 1500px); margin: 0 auto; }
.scb-sponsors-strip__kicker {
	color: var(--c-text-soft);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin-bottom: 30px;
	text-align: center;
}
.scb-sponsors-strip__row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(28px, 5vw, 56px);
	flex-wrap: wrap;
}
.scb-sponsors-strip__item {
	height: 44px;
	display: inline-flex;
	align-items: center;
	color: rgba(255,255,255,0.72);
	font-family: var(--scb-font-display);
	font-weight: 700;
	font-size: 22px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	transition: opacity .15s ease;
}
.scb-sponsors-strip__item:hover { opacity: 0.85; }
.scb-sponsors-strip__item img {
	max-height: 56px;
	width: auto;
	display: block;
	/* Original-Farben der Sponsor-Logos beibehalten (kein Filter). */
}

/* Footer Hauptbereich (B-Bold) */
.scb-footer {
	background: var(--c-footer);
	color: var(--c-on-footer-soft);
	padding: clamp(40px, 5vw, 56px) var(--gutter, 24px) 28px;
	margin: 0;
}
.scb-footer__container {
	max-width: var(--scb-max, 1500px);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: 36px;
}
.scb-footer__brand { }
.scb-footer__logo-plaque {
	display: inline-block;
	background: #fff;
	padding: 14px 18px;
	border-radius: 2px;
	margin-bottom: 16px;
}
.scb-footer__logo-plaque img {
	display: block;
	height: 50px;
	width: auto;
	/* Plakette ist immer weiß → Logo immer dunkel, KEIN invert */
	filter: none;
}
.scb-footer__logo-text {
	font-family: var(--scb-font-display);
	font-weight: 700;
	font-size: 22px;
	color: var(--c-text);
	text-transform: uppercase;
}
.scb-footer__address {
	font-style: normal;
	font-size: 15.5px;
	line-height: 1.5;
	color: var(--c-on-footer-soft);
}

.scb-footer__col { }
.scb-footer__heading {
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 14px;
}
.scb-footer__link {
	display: block;
	font-size: 15.5px;
	margin-bottom: 9px;
	color: var(--c-on-footer-soft);
	text-decoration: none;
	transition: color .15s ease;
}
.scb-footer__link:hover { color: #fff; }

.scb-footer__copyright {
	max-width: var(--scb-max, 1500px);
	margin: 28px auto 0;
	padding-top: 20px;
	border-top: 1px solid rgba(255,255,255,0.1);
	font-size: 13.5px;
	color: var(--c-on-footer-soft);
}

@media (max-width: 768px) {
	.scb-footer__container { grid-template-columns: 1fr 1fr; gap: 28px 24px; }
}
@media (max-width: 380px) {
	.scb-footer__container { grid-template-columns: 1fr; }
}

/* ============================================================================
   9. WordPress-Klassen-Kompatibilität
   ============================================================================ */
.alignleft  { float: left; margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { display: block; margin: 1em auto; }
.alignwide  { max-width: 1100px; margin-left: auto; margin-right: auto; }
.alignfull  { max-width: none; }

/* Top-Level-Gutenberg-Blöcke in der Page/Post-Content-Area sollen
 * standardmäßig wie .alignwide zentriert sein (nicht von der vollen
 * Viewport-Breite ausgehen). Betrifft v.a. nackte Spalten-Blöcke,
 * Galerien, Cover, Tabellen und Medien-Text die im Editor ohne
 * Alignment eingefügt wurden. Ausnahmen via :not() halten
 * alignfull / alignwide / alignleft / alignright unverändert. */
.entry-content > [class*="wp-block-"]:not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright),
.scb-entry__content > [class*="wp-block-"]:not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright) {
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
	/* 0.10.0: Seiteneinzug als Variable (in schmalen Textspalten 0, siehe unten);
	   Listen addieren ihren Einzug (--scb-list-pad aus assets/content.css),
	   damit die Aufzählungspunkte nicht auf der Textkante hängen. */
	padding-left: calc(var(--scb-block-pad, clamp(16px, 4vw, 32px)) + var(--scb-list-pad, 0px));
	padding-right: var(--scb-block-pad, clamp(16px, 4vw, 32px));
	box-sizing: border-box;
}
/* Schmale Textspalte (Beiträge, Seiten): Spalte hat schon Innenabstand → kein
   zusätzlicher Einzug je Block, Text/Bilder/Listen beginnen an einer Kante. */
.scb-wrap--narrow :is(.entry-content, .scb-entry__content) { --scb-block-pad: 0px; }

.wp-block-image figcaption { font-size: var(--scb-fs-small); color: var(--scb-text-soft); }
.screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px; width: 1px; overflow: hidden;
	word-wrap: normal !important;
}
.screen-reader-text:focus {
	background: var(--scb-bg);
	color: var(--scb-text);
	clip: auto !important;
	display: inline-block;
	height: auto;
	left: 8px;
	line-height: normal;
	padding: 10px 14px;
	text-decoration: none;
	top: 8px;
	width: auto;
	z-index: 100000;
}

/* ============================================================================
   10. Titelbalken / Meta / Entry
   (Page-Hero ist in Sektion 5 definiert)
   ============================================================================ */
.scb-page-hero__meta { color: rgba(255,255,255,0.85); margin: 0; }

.scb-page-title-bar { padding: clamp(24px, 4vw, 40px) 0; }
.scb-page-title { margin: 0; }

.scb-meta {
	font-family: var(--scb-font-body);
	font-size: var(--scb-fs-small);
	color: var(--scb-text-soft);
	letter-spacing: .02em;
}

.scb-entry { margin: 0; }
.scb-entry__content { font-size: var(--scb-fs-base); }
.scb-entry__content > * + * { margin-top: 1em; }
.scb-entry__content a { text-decoration: underline; }
.scb-entry__footer { margin-top: 2em; padding-top: 1em; border-top: 1px solid var(--scb-line); }

.scb-post-nav { margin-top: 2em; }
.scb-post-nav .nav-links {
	display: grid; gap: var(--scb-gap);
	grid-template-columns: 1fr;
}
@media (min-width: 700px) {
	.scb-post-nav .nav-links { grid-template-columns: 1fr 1fr; }
	.scb-post-nav .nav-next  { text-align: right; }
}

.scb-link-pages { margin-top: 1em; font-size: var(--scb-fs-small); }

/* ============================================================================
   11. Suche
   ============================================================================ */
.scb-search { display: flex; gap: 8px; margin: 1em 0; }
.scb-search__input {
	flex: 1; padding: 12px 14px;
	border: 1px solid var(--scb-line);
	background: var(--scb-bg);
	font: inherit;
}
.scb-search__input:focus { outline: 2px solid var(--scb-red); outline-offset: 1px; }
.scb-search__submit { white-space: nowrap; }

/* ============================================================================
   12. Footer-Erweiterungen (Sponsoren-Titel, Footer-Nav)
   ============================================================================ */
.scb-sponsors-section { padding: 24px 0; }
.scb-sponsors-title {
	color: #fff;
	text-align: center;
	font-family: var(--scb-font-display);
	font-size: clamp(20px, 2.5vw, 28px);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 0 0 16px;
}
.scb-footer__nav ul {
	list-style: none; padding: 0; margin: 16px 0 0;
	display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px;
	font-family: var(--scb-font-display);
	font-size: var(--scb-fs-small);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.scb-footer__nav a { color: rgba(255,255,255,0.9); }
.scb-footer__nav a:hover { color: #fff; }

/* ============================================================================
   12b. Galerie / Alben (Phase 4b – /fotos-Seite)
   ============================================================================ */
.scb-album { margin: 2em 0; }
.scb-album h2 {
	margin: 0 0 16px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--scb-red);
	font-size: var(--scb-fs-h3);
}
.scb-album__grid {
	display: grid;
	gap: 8px;
	/* Defaults; per Block überschreibbar über --scb-album-cols-* */
	grid-template-columns: repeat(var(--scb-album-cols-mobile, 2), 1fr);
}
@media (min-width: 577px)  {
	.scb-album__grid {
		grid-template-columns: repeat(var(--scb-album-cols-tablet, 3), 1fr);
	}
}
@media (min-width: 993px) {
	.scb-album__grid {
		grid-template-columns: repeat(var(--scb-album-cols-desktop, 5), 1fr);
	}
}

.scb-album__item {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--scb-bg-soft);
	border: 1px solid var(--scb-line);
	transition: transform .15s ease;
}
.scb-album__item:hover, .scb-album__item:focus { transform: scale(1.02); }
.scb-album__item img {
	width: 100%; height: 100%;
	object-fit: cover; object-position: center;
	display: block;
	transition: opacity .15s ease;
}
.scb-album__item:hover img { opacity: .9; }

/* ============================================================================
   13. WP-Pagination
   ============================================================================ */
.pagination, .nav-links {
	display: flex; flex-wrap: wrap; gap: 6px;
	margin-top: 2em;
	font-family: var(--scb-font-display);
}
.page-numbers {
	display: inline-block;
	padding: 8px 12px;
	border: 1px solid var(--scb-line);
	color: var(--scb-text);
	text-decoration: none;
}
.page-numbers:hover { background: var(--scb-bg-soft); text-decoration: none; }
.page-numbers.current { background: var(--scb-red); color: #fff; border-color: var(--scb-red); }

/* 0.11.12: Beitragsübersicht „News“ (home.php) – Blättern mittig unter den Karten,
   „Weiter“ als roter Rahmen-Knopf, der dezent pulsiert, damit weitere Seiten auffallen.
   Bei „Bewegung reduzieren“ (Betriebssystem) ohne Animation (Design-System: bewegung). */
/* Kartentitel sind hier h2 (unter der H1 „News“) – gleiche Größe wie die h3-Titel der
   News-Cards auf der Startseite (tokens.css: .scb h3). */
.scb-news-archive .scb-news__title { font-size: 24px; letter-spacing: normal; }
@media (max-width: 576px) {
	.scb-news-archive .scb-news__title { font-size: 20px; }
}
.scb-news-archive .pagination { justify-content: center; margin-top: 44px; }
.scb-news-archive .nav-links { justify-content: center; margin-top: 0; }
.scb-news-archive .page-numbers { background: var(--c-surface); }
.scb-news-archive .page-numbers.current { background: var(--scb-red); }
.scb-news-archive .page-numbers.prev,
.scb-news-archive .page-numbers.next {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.scb-news-archive .page-numbers.next {
	border-color: var(--scb-red);
	color: var(--scb-red);
	animation: scb-weiter-puls 2.4s ease-out infinite;
}
.scb-news-archive .page-numbers.next:hover,
.scb-news-archive .page-numbers.next:focus-visible {
	background: var(--scb-red);
	color: #fff;
	animation: none;
}
@keyframes scb-weiter-puls {
	0%   { transform: scale(1);    box-shadow: 0 0 0 0 color-mix(in srgb, var(--scb-red) 50%, transparent); }
	15%  { transform: scale(1.06); }
	30%  { transform: scale(1); }
	70%  { box-shadow: 0 0 0 12px color-mix(in srgb, var(--scb-red) 0%, transparent); }
	100% { transform: scale(1);    box-shadow: 0 0 0 0 color-mix(in srgb, var(--scb-red) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
	.scb-news-archive .page-numbers.next { animation: none; }
}

/* ============================================================================
   PAGE-TEMPLATE: Bewerb-Detail (Phase 4e.5)
   ============================================================================ */
.scb-bewerb { padding: clamp(40px, 5vw, 64px) var(--gutter, 24px); }
.scb-bewerb__container { max-width: var(--scb-max, 1500px); margin: 0 auto; }
/* 0.11.4: Artikelaufbau – Überschrift (volle Breite), darunter links Einleitung und rechts
   die Box „Auf einen Blick", danach der übrige Text über die volle Breite (Bilder nicht
   mehr schmal). Handy: Überschrift → Box → Einleitung → Text. Aufteilung serverseitig
   (scb_theme_bewerb_split_content in functions.php). */
.scb-bewerb__article {
	max-width: 1140px;
	margin: 0 auto;
}
/* Text, Box und Bilder an einer Kante (wie .scb-wrap--narrow, kein zusätzlicher Blockeinzug). */
.scb-bewerb__article :is(.entry-content, .scb-entry__content) { --scb-block-pad: 0px; }
.scb-bewerb__lead {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: clamp(28px, 4vw, 48px);
	align-items: start;
	margin: 14px 0 var(--scb-flow-block, 24px);
}
.scb-bewerb__head + .scb-bewerb__lead { margin-top: 14px; }
.scb-bewerb__article > .scb-bewerb__lead:first-child { margin-top: 0; }
.scb-bewerb__lead--solo { grid-template-columns: minmax(0, 1fr); }
/* Ohne Einleitung: Box als Leiste – Eckdaten nebeneinander. */
.scb-bewerb__lead--solo .scb-bewerb__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 6px clamp(20px, 3vw, 40px);
	border-left: 4px solid var(--scb-red);
}
.scb-bewerb__lead--solo .scb-bewerb__facts-kicker { width: 100%; margin-bottom: 4px; }
.scb-bewerb__lead--solo .scb-bewerb__fact { border-top: 0; padding: 0; }
.scb-bewerb__rest { margin-top: var(--scb-flow-block, 24px); }
@media (max-width: 900px) {
	.scb-bewerb__lead {
		display: flex;
		flex-direction: column;
		align-items: stretch; /* Box volle Breite (Desktop-Raster nutzt „start") */
		gap: 20px;
	}
	.scb-bewerb__lead > .scb-bewerb__sidebar { order: -1; } /* Handy: Box vor der Einleitung */
}
.scb-bewerb__main .scb-entry__content {
	font-size: 17px;
	line-height: 1.6;
	color: var(--c-text);
}

.scb-bewerb__sidebar { display: flex; flex-direction: column; gap: 20px; }
.scb-bewerb__facts {
	background: var(--c-surface-2);
	border: 1px solid var(--c-line);
	border-radius: 2px;
	padding: 22px 24px 24px;
}
.scb-bewerb__facts-kicker,
.scb-bewerb__downloads-kicker {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--scb-red);
	margin-bottom: 14px;
}
.scb-bewerb__fact {
	display: flex;
	flex-direction: column;
	padding: 10px 0;
	border-top: 1px solid var(--c-line);
}
.scb-bewerb__fact:first-of-type { border-top: 0; padding-top: 0; }
.scb-bewerb__fact-label {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--c-text-soft);
}
.scb-bewerb__fact-value {
	font-family: var(--scb-font-display);
	font-weight: 700;
	font-size: 19px;
	color: var(--c-text);
	margin-top: 2px;
	line-height: 1.2;
}
.scb-bewerb__cta { align-self: stretch; text-align: center; }
.scb-bewerb__downloads {
	border-top: 1px solid var(--c-line);
	padding-top: 20px;
}
.scb-bewerb__download {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: 2px;
	color: var(--c-text);
	text-decoration: none;
	font-size: 14.5px;
	font-weight: 500;
	margin-bottom: 8px;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.scb-bewerb__download:hover {
	border-color: var(--scb-red);
	background: var(--c-surface-2);
}
.scb-bewerb__download svg { color: var(--scb-red); flex-shrink: 0; }

/* ============================================================================
   PAGE-TEMPLATE: Galerie-Detail (Phase 4e.5)
   ============================================================================ */
.scb-galerie { padding: clamp(40px, 5vw, 64px) var(--gutter, 24px); }
.scb-galerie__container { max-width: var(--scb-max, 1500px); margin: 0 auto; }
.scb-galerie__facts {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(20px, 3vw, 32px);
	padding: 18px 22px;
	background: var(--c-surface-2);
	border-left: 4px solid var(--scb-red);
	margin-bottom: 28px;
}
.scb-galerie__fact { display: flex; flex-direction: column; }
.scb-galerie__fact-label {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--c-text-soft);
}
.scb-galerie__fact-value {
	font-family: var(--scb-font-display);
	font-weight: 700;
	font-size: 18px;
	color: var(--c-text);
	margin-top: 2px;
}
.scb-galerie__lead {
	max-width: 720px;
	margin: 0 0 32px;
	color: var(--c-text);
	font-size: 16.5px;
	line-height: 1.55;
}
.scb-galerie__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 12px;
}
.scb-galerie__item {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--c-surface-2);
	border-radius: 2px;
}
.scb-galerie__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.25s ease;
}
.scb-galerie__item:hover img { transform: scale(1.04); }
.scb-galerie__empty {
	padding: 32px;
	background: var(--c-surface-2);
	border: 1px dashed var(--c-line);
	color: var(--c-text-soft);
	text-align: center;
}

/* ============================================================================
   SCB Album – Caption-Overlay + Inline-Captions
   ============================================================================ */
.scb-album__item { position: relative; overflow: hidden; }

/* Inline-Caption (Caption-Overlay = AUS) */
.scb-album:not(.scb-album--caption-overlay) .scb-album__caption {
	display: block;
	padding: 8px 10px;
	font-size: 13px;
	line-height: 1.3;
	color: var(--c-text-soft);
	background: var(--c-surface);
}

/* Overlay-Caption (Caption-Overlay = AN) */
.scb-album--caption-overlay .scb-album__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 14px 16px 12px;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	background: linear-gradient(to top, rgba(0,0,0,0.78), rgba(0,0,0,0));
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .2s ease, transform .2s ease;
	pointer-events: none;
}
.scb-album--caption-overlay .scb-album__item:hover .scb-album__caption,
.scb-album--caption-overlay .scb-album__item:focus .scb-album__caption {
	opacity: 1;
	transform: translateY(0);
}

/* Captions weglassen wenn showCaptions=AUS */
.scb-album:not(.scb-album--has-captions) .scb-album__caption { display: none; }

/* ============================================================================
   GLightbox-Slideshow-Controls (Play/Pause-Button im Toolbar)
   ============================================================================ */
.scb-glightbox-playbtn {
	position: fixed;
	top: 18px;
	right: 70px;
	z-index: 999999;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background .15s ease;
}
.scb-glightbox-playbtn:hover { background: rgba(255, 255, 255, 0.3); }
.scb-glightbox-playbtn svg { width: 18px; height: 18px; }

/* ============================================================================
   SCB Album – Slider-Modus (eine Zeile, horizontaler Scroll mit Pfeilen)
   ============================================================================ */
.scb-album--mode-slider .scb-album__slider-frame {
	position: relative;
}
.scb-album--mode-slider .scb-album__grid {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	gap: 10px;
	padding: 4px 0;
}
.scb-album--mode-slider .scb-album__grid::-webkit-scrollbar { display: none; }
.scb-album--mode-slider .scb-album__item {
	flex: 0 0 calc((100% - (var(--scb-album-cols-mobile, 2) - 1) * 10px) / var(--scb-album-cols-mobile, 2));
	scroll-snap-align: start;
}
@media (min-width: 577px) {
	.scb-album--mode-slider .scb-album__item {
		flex: 0 0 calc((100% - (var(--scb-album-cols-tablet, 3) - 1) * 10px) / var(--scb-album-cols-tablet, 3));
	}
}
@media (min-width: 993px) {
	.scb-album--mode-slider .scb-album__item {
		flex: 0 0 calc((100% - (var(--scb-album-cols-desktop, 5) - 1) * 10px) / var(--scb-album-cols-desktop, 5));
	}
}

/* Slider-Pfeil-Buttons */
.scb-album__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	border-radius: 999px;
	background: var(--c-surface, #fff);
	color: var(--c-text, #353238);
	border: 1px solid var(--c-line, #E2E4E7);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	z-index: 5;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
	transition: background .15s ease, color .15s ease, transform .15s ease;
}
.scb-album__nav:hover {
	background: var(--scb-red, #C42119);
	color: #fff;
	transform: translateY(-50%) scale(1.05);
}
.scb-album__nav:disabled {
	opacity: 0.35;
	cursor: not-allowed;
	transform: translateY(-50%);
	background: var(--c-surface, #fff);
	color: var(--c-text, #353238);
}
.scb-album__nav--prev { left: -10px; }
.scb-album__nav--next { right: -10px; }
@media (max-width: 600px) {
	.scb-album__nav { width: 40px; height: 40px; }
	.scb-album__nav--prev { left: 4px; }
	.scb-album__nav--next { right: 4px; }
}

/* ============================================================================
   SCB Album – Zeilen-Begrenzung im Grid-Modus
   Bilder ab der N+1-Zeile werden serverseitig schon weggelassen (Limit), aber
   wenn der User nur per CSS clippen will (z.B. Animations-Reveal), nutzen wir
   --scb-album-rows-* für klassisches grid-template-rows.
   ============================================================================ */
.scb-album--mode-grid .scb-album__grid {
	display: grid;
	grid-template-columns: repeat(var(--scb-album-cols-mobile, 2), 1fr);
	gap: 10px;
}
@media (min-width: 577px) {
	.scb-album--mode-grid .scb-album__grid {
		grid-template-columns: repeat(var(--scb-album-cols-tablet, 3), 1fr);
	}
}
@media (min-width: 993px) {
	.scb-album--mode-grid .scb-album__grid {
		grid-template-columns: repeat(var(--scb-album-cols-desktop, 5), 1fr);
	}
}