/* Christoph 17 – Stile der Bausteine (Patterns und Theme-Blöcke).
   Vorlage: webseite/assets/css/site.css. Nur Rollen-Variablen aus tokens.css verwenden. */

/* ---------- Diagramm „Einsätze pro Jahr“ ---------- */
.c17-diagramm {
	background: var(--c17-surface); color: var(--c17-text); padding: 28px; margin: 0;
	display: flex; flex-direction: column; gap: var(--c17-space-12);
}
.c17-diagramm__zeilen {
	display: grid; grid-template-columns: 56px 1fr 70px; gap: 10px 14px; align-items: center; margin: 0;
	font-family: var(--wp--preset--font-family--ibm-plex-mono); font-size: var(--c17-data-size); font-weight: 500;
}
.c17-diagramm__zeilen dt, .c17-diagramm__zeilen dd { margin: 0; }
.c17-diagramm__balken { height: 14px; background: var(--c17-brand); }
.c17-diagramm__balken--aktuell { background: var(--c17-info-line); }
.c17-diagramm__balken--fehlt { background: transparent; border: 1px dashed var(--c17-text-muted); }
.c17-diagramm__wert { text-align: right; }
.c17-diagramm--fehlt { color: var(--c17-text-muted); }
.c17-diagramm__hinweis { margin: 0; font-size: var(--c17-small-size); color: var(--c17-text-muted); }

/* ---------- Gemeinsame Grundlagen der Bausteine ---------- */
/* Bausteine sind ganze Abschnitte: kein Abstand dazwischen, Innenabstand wie im Entwurf. */
.wp-block-group:is(.c17-abschnitt, .c17-hero, .c17-seitenkopf, .c17-kennzahlen, .c17-banner, .c17-partner) { margin-block: 0; }
.c17-abschnitt { padding-block: var(--c17-space-96); }
.c17-abschnitt--eng { padding-block: var(--c17-space-64); }
.c17-abschnitt--flaeche { background: var(--c17-surface); }
@media (max-width: 820px) {
	.c17-abschnitt { padding-block: var(--c17-space-64); }
	.c17-abschnitt--eng { padding-block: var(--c17-space-48); }
}
/* Innerhalb der Bausteine regelt „gap“ die Abstände, nicht die Blockabstände von WordPress */
.wp-block-group:is(.c17-hero__text, .c17-stapel, .c17-karte, .c17-karte__text, .c17-kachel, .c17-box, .c17-hinweis, .c17-info, .c17-banner__text, .c17-seitenkopf__innen, .c17-kennzahl, .c17-zweispaltig, .c17-karten, .c17-kacheln, .c17-boxen, .c17-kennzahlen__raster, .c17-partner__logos, .c17-kennzahlpaar, .c17-kennzahlfeld, .c17-aufzaehlung-huelle, .c17-personen, .c17-person, .c17-zeitleiste, .c17-ereignis, .c17-ereignis__inhalt, .c17-bank) > * { margin-block: 0; }

/* Direkte Kinder der Abschnitte ohne zusätzlichen Blockabstand */
:is(.c17-abschnitt, .c17-hero, .c17-seitenkopf, .c17-kennzahlen, .c17-banner, .c17-partner) > * { margin-block: 0; }

/* In beiden Modi dunkle Abschnitte (wie Kopf- und Fußbereich) */
.c17-dunkel { background: var(--c17-nacht); color: var(--c17-weiss); --c17-focus: var(--c17-navy-hell); }
.c17-dunkel p, .c17-dunkel li { color: var(--c17-grau-200); }
.c17-dunkel a:not(.wp-element-button) { color: var(--c17-orange-60); }
.c17-dunkel .c17-label { color: var(--c17-grau-400); }
.c17-dunkel .wp-block-button.is-style-outline .wp-element-button { color: var(--c17-weiss); }
.c17-dunkel .wp-block-button.is-style-outline .wp-element-button:hover { color: var(--c17-orange-60); }

.c17-stapel { display: flex; flex-direction: column; gap: var(--c17-space-24); }
.c17-stapel--weit { gap: var(--c17-space-32); }
.c17-stapel--eng { gap: 14px; }
.c17-zweispaltig { display: flex; gap: var(--c17-space-64); align-items: center; }
.c17-zweispaltig--oben { align-items: flex-start; }
.c17-zweispaltig > * { flex: 1 1 0; min-width: 0; margin: 0; }
.c17-zweispaltig > .c17-hochformat { flex: 0 1 440px; }
@media (max-width: 820px) {
	.c17-zweispaltig { flex-direction: column; align-items: stretch; gap: var(--c17-space-32); }
	.c17-zweispaltig > .c17-hochformat { flex-basis: auto; }
}
.c17-textbreite { max-width: 560px; }
.c17-textbreite-weit { max-width: 760px; }
.c17-akzentlinie { border-top: var(--c17-accent-line) solid var(--c17-brand); padding-top: var(--c17-space-12); align-self: flex-start; width: fit-content; }
.c17-mehr { font-weight: 600; }
.c17-hochformat img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.c17-querformat img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
:is(.c17-hochformat, .c17-querformat) figcaption {
	margin: var(--c17-space-8) 0 0; font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 13px; line-height: 1.4; color: var(--c17-text-muted); text-align: left;
}

/* ---------- Hero mit 12°-Schräge ----------
   Bildkante und oranger Streifen sind parallel: Versatz = Höhe × tan 12° (0,2126). */
.c17-hero {
	position: relative; overflow: hidden; background: var(--c17-nacht); color: var(--c17-weiss);
	--h: 640px; --streifen: 28px; --teilung: 46%; height: var(--h); --c17-focus: var(--c17-navy-hell);
}
.c17-hero--seite { --h: 420px; --streifen: 24px; }
.c17-hero--seite .c17-hero__bild img { object-position: 50% 40%; }
@media (max-width: 1100px) { .c17-hero { --teilung: 54%; } }
.c17-hero .c17-hero__bild { position: absolute; inset: 0; margin: 0; }
.c17-hero__bild img {
	width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%;
	clip-path: polygon(calc(var(--teilung) + var(--h) * 0.2126) 0, 100% 0, 100% 100%, var(--teilung) 100%);
}
.c17-hero__bild::after {
	content: ""; position: absolute; inset: 0; background: var(--c17-brand); pointer-events: none;
	clip-path: polygon(
		calc(var(--teilung) + var(--h) * 0.2126 - var(--streifen)) 0,
		calc(var(--teilung) + var(--h) * 0.2126) 0,
		var(--teilung) 100%,
		calc(var(--teilung) - var(--streifen)) 100%);
}
.c17-hero__text {
	position: relative; box-sizing: border-box; height: 100%; width: calc(var(--teilung) - 2%);
	display: flex; flex-direction: column; justify-content: center; gap: 22px;
	padding: var(--c17-space-48) var(--c17-space-48) var(--c17-space-48) max(var(--c17-gutter), calc((100% - var(--wp--style--global--wide-size)) / 2));
}
.c17-hero--seite .c17-hero__text { gap: 18px; }
.c17-hero__kicker {
	font-family: var(--wp--preset--font-family--ibm-plex-mono); font-size: 13px; letter-spacing: 0.12em;
	text-transform: uppercase; color: var(--c17-grau-300);
}
.c17-hero .c17-hero__titel { font-size: clamp(56px, 6vw, 84px); line-height: 0.92; color: var(--c17-weiss); }
.c17-hero--seite .c17-hero__titel { font-size: clamp(48px, 5vw, 72px); }
.c17-hero__einleitung { font-size: 20px; line-height: 1.5; color: var(--c17-grau-200); max-width: 460px; }
.c17-hero--seite .c17-hero__einleitung { font-size: 19px; max-width: 440px; }
.c17-hero .wp-block-button.is-style-outline .wp-element-button { color: var(--c17-weiss); }
.c17-hero .wp-block-button.is-style-outline .wp-element-button:hover { color: var(--c17-orange-60); }

@media (max-width: 820px) {
	/* Mobil: Bild oben, waagerechte 12°-Schräge über die volle Breite */
	.c17-hero { height: auto; --schnitt: calc(100vw * 0.2126); --streifen: 14px; }
	.c17-hero .c17-hero__bild { position: relative; height: 300px; }
	.c17-hero--seite .c17-hero__bild { height: 260px; }
	.c17-hero__bild img { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--schnitt)), 0 100%); }
	.c17-hero__bild::after {
		clip-path: polygon(0 calc(100% - var(--streifen)), 100% calc(100% - var(--schnitt) - var(--streifen)), 100% calc(100% - var(--schnitt)), 0 100%);
	}
	.c17-hero__text { width: 100%; height: auto; padding: var(--c17-space-8) var(--c17-gutter) var(--c17-space-48); gap: var(--c17-space-16); }
	.c17-hero .c17-hero__titel { font-size: 56px; }
	.c17-hero--seite .c17-hero__titel { font-size: 44px; }
	.c17-hero__einleitung, .c17-hero--seite .c17-hero__einleitung { font-size: 17px; }
	:is(.c17-hero, .c17-banner) .wp-block-buttons { flex-direction: column; align-items: stretch; }
	:is(.c17-hero, .c17-banner) .wp-block-button { width: 100%; }
	:is(.c17-hero, .c17-banner) .wp-element-button { width: 100%; }
}

/* ---------- Seitenkopf ohne Bild ---------- */
.c17-seitenkopf { padding-block: var(--c17-space-64) var(--c17-space-48); }
.c17-seitenkopf__innen { display: flex; flex-direction: column; gap: 14px; }
.c17-seitenkopf .c17-seitenkopf__titel { font-size: clamp(44px, 5vw, 72px); line-height: 0.92; color: var(--c17-weiss); }
.c17-seitenkopf__text { font-size: 19px; max-width: 560px; }
@media (max-width: 820px) {
	.c17-seitenkopf { padding-block: var(--c17-space-48) var(--c17-space-32); }
	.c17-seitenkopf__text { font-size: 17px; }
}

/* ---------- Kennzahlen-Leiste ---------- */
.c17-kennzahlen { border-bottom: 1px solid var(--c17-line); }
.c17-kennzahlen__raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.c17-kennzahl { padding: 28px 28px 24px; border-right: 1px solid var(--c17-line); }
.c17-kennzahl:last-child { border-right: 0; }
.c17-kennzahl--marke { background: var(--c17-brand); color: var(--c17-on-brand); border-right: 0; }
.c17-kennzahl__wert { font-family: var(--wp--preset--font-family--barlow-condensed); font-weight: 800; font-size: 60px; line-height: 0.9; }
.c17-kennzahl .c17-kennzahl__beschriftung {
	margin-top: var(--c17-space-8); font-family: var(--wp--preset--font-family--ibm-plex-mono); font-size: var(--c17-label-size);
	line-height: var(--c17-label-lh); font-weight: var(--c17-label-weight); letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--c17-text-muted);
}
.c17-kennzahl--marke .c17-kennzahl__beschriftung.c17-kennzahl__beschriftung { color: var(--c17-on-brand); }
@media (max-width: 820px) {
	.c17-kennzahlen.has-global-padding { padding-inline: 0; }
	.c17-kennzahlen__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.c17-kennzahl { padding: 20px var(--c17-gutter); border-bottom: 1px solid var(--c17-line); }
	.c17-kennzahl:nth-child(2n) { border-right: 0; }
	.c17-kennzahl__wert { font-size: 44px; }
}

/* ---------- Karten (Teaser) ---------- */
.c17-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.c17-karte {
	position: relative; display: flex; flex-direction: column; background: var(--c17-surface-raised);
	color: var(--c17-text); border: 1px solid var(--c17-line);
}
.c17-karte .c17-karte__bild { margin: 0; }
.c17-karte__bild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.c17-karte__text { padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.c17-karte__text p { font-size: 16px; color: var(--c17-text-muted); }
.c17-karte h3 a { color: inherit; text-decoration: none; }
/* Ganze Karte klickbar (Link der Überschrift deckt die Karte ab) */
.c17-karte h3 a::after { content: ""; position: absolute; inset: 0; }
.c17-karte:hover h3 a, .c17-karte h3 a:focus-visible { color: var(--c17-accent-text); }
.c17-karte:has(a:focus-visible) { outline: 3px solid var(--c17-focus); outline-offset: 2px; }
.c17-karte h3 a:focus-visible { outline: none; }
@media (max-width: 820px) {
	.c17-karten { grid-template-columns: 1fr; gap: 12px; }
	.c17-karte { flex-direction: row; align-items: center; }
	.c17-karte .c17-karte__bild { width: 120px; flex: none; }
	.c17-karte__text p { display: none; }
}

/* ---------- Kacheln ---------- */
.c17-kacheln {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
	background: var(--c17-line); border: 1px solid var(--c17-line);
}
.c17-kachel { background: var(--c17-surface-raised); padding: var(--c17-space-24); display: flex; flex-direction: column; gap: 8px; }
.c17-kachel p { font-size: 16px; color: var(--c17-text-muted); }
.c17-kachel--marke { background: var(--c17-brand); color: var(--c17-on-brand); }
.c17-kachel--marke.c17-kachel--marke p { color: var(--c17-on-brand); }
@media (max-width: 1000px) { .c17-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .c17-kacheln { grid-template-columns: 1fr; } }

/* ---------- Boxen ---------- */
.c17-boxen { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.c17-box {
	background: var(--c17-surface-raised); border-top: var(--c17-accent-line) solid var(--c17-brand);
	padding: 22px 28px 28px 22px; display: flex; flex-direction: column; gap: var(--c17-space-12);
}
.c17-box p { color: var(--c17-text-muted); font-size: 16px; }
.c17-box .c17-box__titel { font-size: 28px; line-height: 1.1; font-weight: 800; letter-spacing: normal; }

/* ---------- Hinweis / Info ---------- */
.c17-hinweis {
	background: var(--c17-surface); box-shadow: inset 0 0 0 2px var(--c17-tint-line);
	padding: 22px 24px; display: flex; flex-direction: column; gap: 10px;
}
.c17-hinweis--breit { padding: 28px 32px; }
.c17-info { background: var(--c17-info); color: var(--c17-on-info); padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; }
.c17-info p, .c17-info a, .c17-info .c17-label { color: var(--c17-on-info); }

/* ---------- Spendenbanner ---------- */
.c17-banner { position: relative; overflow: hidden; }
.c17-banner .c17-banner__bild { position: absolute; inset: 0; margin: 0; max-width: none; }
.c17-banner__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.c17-banner::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(90deg, rgb(14 22 30 / 0) 30%, rgb(14 22 30 / .92) 70%);
}
.c17-banner .c17-banner__innen { position: relative; z-index: 1; display: flex; justify-content: flex-end; padding-block: 120px; }
.c17-banner__text { max-width: 460px; display: flex; flex-direction: column; gap: 18px; }
.c17-banner .c17-banner__titel { font-size: clamp(40px, 4.5vw, 52px); line-height: .95; color: var(--c17-weiss); }
@media (max-width: 820px) {
	.c17-banner.has-global-padding { padding-inline: 0; }
	.c17-banner .c17-banner__bild { position: relative; height: 240px; width: 100%; }
	.c17-banner::after { display: none; }
	.c17-banner .c17-banner__innen { padding: var(--c17-space-32) var(--c17-gutter) var(--c17-space-48); }
}

/* Editor: Der Bild-Block setzt am Bild „height: auto“ – bei Hero und Banner muss es die Fläche füllen */
:is(.c17-hero__bild, .c17-banner__bild) img { height: 100% !important; }

/* ---------- Ergänzende Hilfsklassen (3.3c) ---------- */
.c17-stapel--klein { gap: var(--c17-space-16); }
.c17-stapel--mittel { gap: 20px; }
.c17-zweispaltig--strecken { align-items: stretch; }
.c17-zweispaltig > .c17-seitenspalte { flex: 0 1 380px; }
.c17-zweispaltig > .c17-hochformat--schmal { flex-basis: 380px; }
.c17-hochformat--hoch img { aspect-ratio: 3 / 4; }
.c17-titel-gross.c17-titel-gross { font-size: clamp(40px, 4.5vw, 52px); line-height: .95; }
.c17-klein { font-size: var(--c17-small-size); line-height: var(--c17-small-lh); color: var(--c17-text-muted); }
.c17-gedaempft { color: var(--c17-text-muted); }
.c17-unsichtbar {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Partnerlogos ---------- */
.c17-partner { border-top: 1px solid var(--c17-line); padding-block: 56px; }
.c17-partner__logos { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; }
.c17-partner .c17-partner__logo { margin: 0; }
.c17-partner__logo img { height: 52px; width: auto !important; background: var(--c17-weiss); padding: 8px; box-sizing: content-box; }

/* ---------- Kennzahl-Paar ---------- */
.c17-kennzahlpaar { display: flex; gap: var(--c17-space-16); flex-wrap: wrap; }
.c17-kennzahlfeld { padding: 16px 22px; }
.c17-kennzahlfeld--info { background: var(--c17-info); color: var(--c17-on-info); }
.c17-kennzahlfeld--umriss { box-shadow: inset 0 0 0 2px var(--c17-weiss); }
.c17-dunkel .c17-kennzahlfeld .c17-kennzahlfeld__wert, .c17-kennzahlfeld__wert {
	font-family: var(--wp--preset--font-family--barlow-condensed); font-weight: 800; font-size: 44px; line-height: 1; color: inherit;
}
.c17-dunkel .c17-kennzahlfeld .c17-label, .c17-kennzahlfeld .c17-label { color: inherit; font-size: 11px; }
.c17-dunkel .c17-kennzahlfeld--umriss { color: var(--c17-weiss); }

/* ---------- Datenliste ---------- */
.c17-daten.wp-block-table { margin: 0; }
.c17-daten table { border-collapse: collapse; width: 100%; table-layout: auto; }
.c17-daten :is(th, td) { border: 0; border-bottom: 1px solid var(--c17-line); text-align: left; vertical-align: baseline; }
.c17-daten th {
	font-family: var(--wp--preset--font-family--ibm-plex-mono); font-size: 12px; font-weight: 500; letter-spacing: .1em;
	text-transform: uppercase; color: var(--c17-text-muted); padding: 14px var(--c17-space-24) 14px 0; width: 42%;
}
.c17-daten td { font-family: var(--wp--preset--font-family--ibm-plex-mono); font-size: 16px; font-weight: 500; padding: 12px 0; }
@media (max-width: 820px) {
	.c17-daten :is(tr, th, td) { display: block; width: auto; }
	.c17-daten th { border-bottom: 0; padding: 14px 0 0; }
}

/* ---------- Aufzählung ---------- */
.c17-aufzaehlung { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.c17-aufzaehlung li { display: flex; gap: 12px; align-items: baseline; margin: 0; }
.c17-aufzaehlung li::before { content: ""; width: 10px; height: 10px; background: var(--c17-brand); flex: none; }

/* ---------- Team-Raster ---------- */
.c17-personen { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--c17-space-16); }
.c17-person .c17-person__bild { margin: 0 0 8px; }
.c17-person__bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.c17-person p { font-size: 15px; line-height: 1.4; }
.c17-person .c17-person__name { font-weight: 600; }
.c17-person .c17-person__rolle { color: var(--c17-text-muted); }

/* ---------- Zeitleiste ---------- */
.c17-ereignis { display: grid; grid-template-columns: 160px 24px minmax(0, 1fr); column-gap: var(--c17-space-24); }
/* Achse und Punkt liegen in der mittleren Spalte */
.c17-ereignis::before { content: ""; grid-column: 2; grid-row: 1; justify-self: center; width: 2px; background: var(--c17-line); }
.c17-ereignis:last-child::before { display: none; }
.c17-ereignis::after { content: ""; grid-column: 2; grid-row: 1; align-self: start; width: 24px; height: 24px; background: var(--c17-brand); position: relative; }
.c17-ereignis--gedenken::after { background: var(--c17-text); }
.c17-ereignis .c17-ereignis__jahr {
	grid-column: 1; grid-row: 1; font-family: var(--wp--preset--font-family--barlow-condensed); font-weight: 800;
	font-size: 40px; line-height: 1; text-align: right;
}
.c17-ereignis--gedenken .c17-ereignis__jahr { color: var(--c17-text-muted); }
.c17-ereignis--aktuell .c17-ereignis__jahr { color: var(--c17-accent-text); }
.c17-ereignis__inhalt { grid-column: 3; grid-row: 1; padding-bottom: var(--c17-space-48); }
.c17-ereignis__inhalt h3 { font-size: 28px; margin: 4px 0 6px !important; }
.c17-ereignis__inhalt p { max-width: 620px; }
.c17-ereignis .c17-ereignis__datum { font-family: var(--wp--preset--font-family--ibm-plex-mono); font-size: 13px; color: var(--c17-text-muted); }
.c17-ereignis__datum:empty { display: none; }
.c17-ereignis .c17-ereignis__bild { margin: var(--c17-space-16) 0 0; max-width: 420px; }
.c17-ereignis__bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
@media (max-width: 820px) {
	.c17-ereignis { grid-template-columns: 64px 16px minmax(0, 1fr); column-gap: var(--c17-space-12); }
	.c17-ereignis .c17-ereignis__jahr { font-size: 26px; }
	.c17-ereignis::after { width: 16px; height: 16px; }
	.c17-ereignis__inhalt h3 { font-size: 24px; }
}

/* ---------- Bankverbindung ---------- */
.c17-bank {
	background: var(--c17-nacht); color: var(--c17-weiss); padding: 32px 36px;
	display: flex; flex-direction: column; gap: 6px; --c17-focus: var(--c17-navy-hell);
}
.c17-bank .c17-label { color: var(--c17-orange-60); }
[data-effective-theme="dark"] .c17-bank { box-shadow: inset 0 0 0 1px var(--c17-grau-700); }
.c17-bank .c17-bank__feld {
	font-family: var(--wp--preset--font-family--ibm-plex-mono); font-size: 12px; letter-spacing: .1em;
	text-transform: uppercase; color: var(--c17-grau-400); padding-top: 14px;
}
.c17-bank .c17-bank__wert { font-family: var(--wp--preset--font-family--ibm-plex-mono); font-size: 20px; font-weight: 500; color: var(--c17-weiss); }
.c17-bank .c17-bank__wert--text { font-family: var(--wp--preset--font-family--barlow); font-size: 18px; font-weight: 400; }
.c17-bank .wp-block-buttons { margin-top: 20px; }
.c17-bank .c17-bank__status { min-height: 1.5em; font-size: 15px; color: var(--c17-grau-200); }
@media (max-width: 820px) { .c17-bank { padding: 24px 20px; } .c17-bank .c17-bank__wert { font-size: 16px; } }