/*
 * Site Core - Komponenten (Stand 2026-10-05). Wiederverwendbare Klassen fuer Gutenberg-Inhalte
 * ("Zusaetzliche CSS-Klasse(n)" im Block). Ausschliesslich Tokens aus tokens.css - keine
 * eigenen Hex-/Pixelwerte, kein Inline-Style und keine Custom-HTML-Bloecke im Seiteninhalt.
 *
 *   hero-cover   -> wp:cover  (Foto-Hintergrund, zentrierter weisser Text)
 *   badge        -> wp:paragraph (kleine Pille); badge--on-dark auf Fotos (im hero-cover automatisch)
 *   card         -> wp:group/wp:column (weisse Karte); card--hover (Hover-Lift)
 *   card-grid    -> wp:columns, deren Spalten "card" tragen
 *   card__media  -> wp:group als Bild-Platzhalter in einer Karte
 *   step-card    -> wp:group (nummerierter Schritt) mit step-card__nr / __title / __text
 *   box-note     -> wp:group (heller Hinweiskasten, z. B. Haftungshinweis)
 *   box-cta      -> wp:group (weisse Aktionsbox mit Button)
 *   box-panel    -> wp:group (grosse weisse Flaeche, 48px Rundung)
 *   article-*    -> Bausteine fuer Blogartikel (Muster "Blog-Artikel Grundgeruest")
 */

/* ---------- Seitenaufbau (Sektionen) ---------- */
/*
 *   section          -> wp:group (Abschnitt mit Luft oben/unten, Inhalt 760px)
 *   section--wide    -> breiterer Inhalt (1080px)
 *   section--surface -> weisse Flaeche
 *   section-title    -> wp:heading H2 (zentriert)
 *   section-lead     -> wp:paragraph (zentrierte Einleitung unter dem Titel)
 *   buttons-center   -> wp:buttons (Buttons zentriert)
 *   text-center      -> beliebiger Block, Text zentriert
 */
.section {
	padding: var(--space-xl) var(--space-md);
}
.section > * {
	max-width: var(--width-text);
	margin-left: auto;
	margin-right: auto;
}
.section--wide > * {
	max-width: var(--width-content);
}
.section--surface {
	background: var(--color-surface);
}
.section-title {
	font-size: 1.65rem;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	color: var(--color-heading);
}
.section-lead {
	text-align: center;
	font-size: 0.95rem;
	margin-bottom: var(--space-lg);
}
.buttons-center {
	justify-content: center;
}
.text-center {
	text-align: center;
}
.text-accent {
	color: var(--color-primary);
	font-weight: 500;
}
/* Fliesstext in Sektionen/Panels: direkte Absaetze, ausser Lead/zentrierte Zeilen (WP setzt wp-block-paragraph an jeden Absatz) */
.section > p:not(.section-lead):not(.text-center):not(.lead-statement),
.box-panel > p,
.section > ul,
.section > ol {
	font-size: 1.06rem;
	line-height: 1.75;
}
/* Portraet: schmales Bild, stark gerundet, zentriert */
.section .portrait,
.portrait {
	max-width: 380px;
	margin-left: auto;
	margin-right: auto;
}
.wp-block-image.portrait img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-panel);
}

/* ---------- Buttons (Pillen-Glas), generisch fuer jeden Gutenberg-Button ---------- */
.wp-block-button__link {
	position: relative;
	padding: 13px 28px;
	border-radius: var(--radius-pill) !important;
	background-color: var(--color-primary);
	color: var(--color-on-primary);
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 55%);
	-webkit-backdrop-filter: blur(10px) saturate(160%);
	backdrop-filter: blur(10px) saturate(160%);
	border: 1px solid rgba(255, 255, 255, 0.4);
	box-shadow: 0 6px 16px rgba(15, 65, 50, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(0, 0, 0, 0.08);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(15, 65, 50, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(0, 0, 0, 0.08);
}
.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--color-primary);
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 60%);
}

/* ---------- Bilder: weiche Ecken, Schatten, Glaskante ---------- */
.wp-block-image img {
	border-radius: var(--radius-medium);
	border: 1px solid rgba(255, 255, 255, 0.5);
	box-shadow: var(--shadow-image), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* ---------- Cover / Hero ---------- */
.wp-block-cover {
	overflow: hidden;
}
/* Scroll-Parallax (Bild mit Ueberhang, Verschiebung per Snippet-JS) */
.wp-block-cover__image-background {
	top: -12% !important;
	height: 124% !important;
	will-change: transform;
}
.hero-cover .wp-block-cover__inner-container {
	text-align: center;
	color: var(--color-on-primary);
}
.hero-cover h1 {
	color: var(--color-on-primary);
	font-size: clamp(2rem, 4.5vw, 2.8rem);
	font-weight: 700;
	line-height: 1.2;
}
.hero-cover .wp-block-buttons {
	margin-top: var(--space-md);
	justify-content: center;
}
.hero-cover p.hero-note {
	font-size: 0.9rem;
	margin-top: 22px;
}
.lead-statement {
	font-size: 1.2rem;
	font-weight: 500;
	line-height: 1.6;
	text-align: center;
	color: var(--color-heading);
}
.hero-cover p:not(.badge):not(.hero-note) {
	color: var(--color-on-primary);
	font-size: 1.1rem;
	line-height: 1.6;
	margin-top: var(--space-sm);
}

/* ---------- Badge ---------- */
.badge {
	display: inline-block;
	padding: 6px 18px;
	border-radius: var(--radius-pill);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.05em;
	background: var(--color-tint);
	color: var(--color-primary);
}
.badge--center {
	display: table;
	margin: 0 auto var(--space-sm);
}
.badge--on-dark,
.hero-cover .badge {
	background: rgba(255, 255, 255, 0.18);
	color: var(--color-on-primary);
}
.hero-cover .badge {
	display: table;
	margin: 0 auto 14px;
}

/* ---------- Karten ---------- */
/*
 * GreenShift-Reihen: per MCP/REST eingefuegte Bloecke haben kein _gspb_post_css, GreenShift
 * liefert dann kein Grundlayout (Spalten stapeln sich). Das Grundlayout steht deshalb hier,
 * zentral und einmalig - der Seiteninhalt braucht dafuer keine Inline-Styles.
 */
.gspb_row__content {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
}
.gspb_row__col--4,
.gspb_row__col--6 {
	background: var(--color-surface);
	border-radius: var(--radius-card);
	padding: var(--space-md);
	min-width: 240px;
}
.gspb_row__col--4 {
	flex: 1 1 calc(33.333% - var(--space-md));
}
.gspb_row__col--6 {
	flex: 1 1 calc(50% - var(--space-md));
}
.card,
.gspb_row__col--4,
.gspb_row__col--6 {
	box-shadow: var(--shadow-soft);
}
.card {
	background: var(--color-surface);
	border-radius: var(--radius-card);
	padding: var(--space-md);
	box-shadow: var(--shadow-card);
}
.card--hover,
.gspb_row__col--4,
.gspb_row__col--6 {
	transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
}
.card--hover:hover,
.gspb_row__col--4:hover,
.gspb_row__col--6:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-hover);
}
.card-grid {
	gap: var(--space-md);
}
.card__media {
	aspect-ratio: 16 / 10;
	background: var(--color-tint);
	border-radius: var(--radius-small);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-primary);
	font-size: 13px;
	margin-bottom: var(--space-sm);
}
.card__media p {
	margin: 0;
}
.card__title {
	font-weight: 600;
	font-size: 1.06rem;
	color: var(--color-heading);
	margin: 0 0 6px;
}
.card__text {
	font-size: 0.9rem;
	line-height: 1.7;
}

/* Iconlist-Haekchen in Sekundaerfarbe (GreenShift setzt fill mit !important) */
.gspb_iconsList .gspb_iconsList__item {
	align-items: flex-start !important;
}
.gspb_iconsList .gspb_iconsList__item svg {
	margin-top: 2px !important;
	flex-shrink: 0;
}
.gspb_iconsList .gspb_iconsList__item svg path {
	fill: var(--color-secondary) !important;
}

/* ---------- Programm-Schritte ---------- */
.step-card {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	background: var(--color-surface);
	border: 1px solid rgba(255, 255, 255, 0.7);
	border-radius: var(--radius-card);
	padding: var(--space-md) 30px;
	box-shadow: var(--shadow-card);
	margin-bottom: var(--space-sm);
}
.step-card__nr {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--color-tint);
	color: var(--color-primary);
	font-size: 15px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
}
.step-card__title {
	font-weight: 600;
	font-size: 1.06rem;
	color: var(--color-heading);
	margin: 0 0 6px;
}
.step-card__text {
	margin: 0;
	line-height: 1.7;
}

@media (max-width: 689.98px) {
	.step-card {
		flex-direction: column;
		gap: 12px;
		padding: var(--space-md);
	}
}

/* ---------- Boxen ---------- */
.box-note {
	background: var(--color-tint);
	border-radius: var(--radius-card);
	padding: var(--space-md) 32px;
	font-size: 0.85rem;
	line-height: 1.6;
	color: var(--color-text);
}
.box-cta {
	background: var(--color-surface);
	border-radius: var(--radius-card);
	padding: 32px 36px;
	box-shadow: var(--shadow-card);
}
.box-panel {
	background: var(--color-surface);
	border-radius: var(--radius-panel);
	padding: 55px var(--space-lg);
	margin-top: var(--space-md);
	margin-bottom: var(--space-md);
}

/* ---------- Blog-Archiv: ovale Glas-Kacheln ---------- */
.blog .hero-section .page-title {
	color: var(--color-primary) !important;
}
.blog .entries .entry-card {
	background: rgba(255, 255, 255, 0.78) !important;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.7);
	border-radius: var(--radius-xl) !important;
	overflow: hidden;
	box-shadow: var(--shadow-card) !important;
	transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
}
.blog .entries .entry-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-hover) !important;
}
.blog .entry-card .ct-media-container {
	border-radius: 26px;
	overflow: hidden;
	aspect-ratio: auto !important;
	height: auto !important;
}
/* Titelbilder komplett zeigen (kein Zuschnitt). Chrome setzt bei Lazy-Bildern mit sizes="auto"
   eine Platzhaltergroesse (contain-intrinsic-size 3000x1500) -> zuruecksetzen. */
.blog .entry-card .ct-media-container img {
	position: static !important;
	display: block;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 16 / 9 !important;
	object-fit: contain !important;
	contain-intrinsic-size: none !important;
	background: var(--color-tint);
}
.blog .entry-card .entry-meta a {
	display: inline-block;
	background: var(--color-tint);
	color: var(--color-primary);
	padding: 4px 14px;
	border-radius: var(--radius-pill);
	font-size: 0.8rem;
	font-weight: 600;
	text-decoration: none;
}
.blog .entry-card .entry-title a {
	color: var(--color-heading);
}
.blog .entry-card .entry-title a:hover {
	color: var(--color-secondary);
}
.blog .entry-card .entry-button,
.blog .entry-card .ct-button {
	border-radius: var(--radius-pill);
	background: var(--color-primary);
	color: var(--color-on-primary);
}

/* ---------- Einzelartikel ---------- */
.single-post .hero-section {
	max-width: 820px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.single-post .hero-section .page-title {
	color: var(--color-primary);
	font-weight: 700;
	font-size: clamp(1.9rem, 4vw, 2.6rem);
	line-height: 1.2;
}
.single-post .hero-section .entry-meta {
	justify-content: center;
}
.single-post .hero-section .entry-meta .meta-categories a {
	display: inline-block;
	background: var(--color-tint);
	color: var(--color-primary);
	padding: 4px 14px;
	border-radius: var(--radius-pill);
	font-size: 0.8rem;
	font-weight: 600;
	text-decoration: none;
}
.single-post .entry-content {
	font-size: 1.06rem;
	line-height: 1.8;
}
.single-post .entry-content > *:not(.alignfull):not(.alignwide) {
	max-width: var(--width-text);
	margin-left: auto;
	margin-right: auto;
}
.single-post .entry-content h2 {
	font-size: 1.65rem;
	line-height: 1.3;
	font-weight: 600;
	margin-top: 2.2em;
	margin-bottom: 0.6em;
}
.single-post .entry-content h3 {
	font-weight: 600;
	margin-top: 1.8em;
}
.single-post .entry-content a:not(.wp-block-button__link) {
	color: var(--color-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.single-post .entry-content ul li::marker,
.single-post .entry-content ol li::marker {
	color: var(--color-secondary);
}
.single-post .entry-content blockquote {
	border: 0;
	border-left: 4px solid var(--color-secondary);
	background: var(--color-tint);
	border-radius: 0 var(--radius-large) var(--radius-large) 0;
	padding: 22px var(--radius-large);
}
.single-post .entry-content img {
	border-radius: var(--radius-large);
}
.single-post .entry-content .wp-block-post-featured-image img {
	border-radius: var(--radius-xl);
	width: 100%;
	height: auto !important;
	aspect-ratio: auto !important;
	object-fit: contain !important;
}

/* Bausteine des Musters "Blog-Artikel Grundgeruest" */
.article-lead {
	font-size: 1.2rem;
	line-height: 1.7;
	color: var(--color-heading);
}
.article-sources-title {
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-top: 2.5em;
}
.article-sources {
	font-size: 0.8rem;
	line-height: 1.6;
	color: var(--color-text);
}