/* =============================================================================
   Tsunami Waisenkinderhilfe — Basis-Styles
   Entspricht dem „Tsunami Waisenkinderhilfe“-Design-System.
   Ocean (Vertrauen, Struktur) + Sunrise (Wärme, Hoffnung, Spendenaufruf),
   zusammengehalten von warmen Sand-Neutraltönen.
   Token-Namen unpräfixt aus dem Design-System übernommen.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   WEBFONTS — lokal ausgeliefert (SIL OFL 1.1, siehe assets/fonts/README.md)
   Bewusst NICHT ueber fonts.googleapis.com: bei CDN-Einbindung geht die IP jedes
   Besuchers an Google, was fuer eine deutsche Seite ohne Einwilligung angreifbar
   ist (LG Muenchen I, 3 O 17493/20). Variable Schnitte liegen als eine Datei je
   Familie/Stil/Subset vor, Weight-Range statt einer Datei pro Schnitt.
   Aendern: nicht von Hand, sondern Dateien und Regeln neu erzeugen.
   ----------------------------------------------------------------------------- */

@font-face {
	font-family: 'Hanken Grotesk';
	src: url('../fonts/hanken-grotesk-latin-normal-variable.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Hanken Grotesk';
	src: url('../fonts/hanken-grotesk-latin-ext-normal-variable.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'IBM Plex Mono';
	src: url('../fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'IBM Plex Mono';
	src: url('../fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'IBM Plex Mono';
	src: url('../fonts/ibm-plex-mono-latin-ext-400-normal.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'IBM Plex Mono';
	src: url('../fonts/ibm-plex-mono-latin-ext-500-normal.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Spectral';
	src: url('../fonts/spectral-latin-400-italic.woff2') format('woff2');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Spectral';
	src: url('../fonts/spectral-latin-600-italic.woff2') format('woff2');
	font-weight: 600;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Spectral';
	src: url('../fonts/spectral-latin-ext-400-italic.woff2') format('woff2');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Spectral';
	src: url('../fonts/spectral-latin-ext-600-italic.woff2') format('woff2');
	font-weight: 600;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Spectral';
	src: url('../fonts/spectral-latin-400-normal.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Spectral';
	src: url('../fonts/spectral-latin-600-normal.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Spectral';
	src: url('../fonts/spectral-latin-700-normal.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Spectral';
	src: url('../fonts/spectral-latin-ext-400-normal.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Spectral';
	src: url('../fonts/spectral-latin-ext-600-normal.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Spectral';
	src: url('../fonts/spectral-latin-ext-700-normal.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

*, *::before, *::after { box-sizing: border-box; }

/* -----------------------------------------------------------------------------
   ROOT TOKENS
   Das Design-System ist einmodig hell. Dunkle Flächen sind Ocean-Bänder, kein
   eigener Dunkelmodus — deshalb color-scheme: light.
   ----------------------------------------------------------------------------- */
:root {
	/* ---- Ocean / Primär ---- */
	--ocean-950: #082530;
	--ocean-900: #0b2e3b;
	--ocean-800: #0d3e4d;
	--ocean-700: #0e4c5e;
	--ocean-600: #0f6e85;
	--ocean-500: #1792a8;
	--ocean-400: #3aa9bd;
	--ocean-300: #7fc5d3;
	--ocean-200: #b6e0e8;
	--ocean-100: #dbeff3;
	--ocean-50:  #eff8fa;

	/* ---- Sunrise / Akzent ---- */
	--sun-700: #cf522c;
	--sun-600: #e8663c;
	--sun-500: #f27a4e;
	--sun-400: #f79571;
	--sun-300: #f9b79a;
	--sun-200: #fcd3c1;
	--sun-100: #fce7dc;
	--sun-50:  #fef3ee;

	/* ---- Gold ---- */
	--gold-600: #d99521;
	--gold-500: #f2b138;
	--gold-100: #fcedcb;

	/* ---- Warme Neutrale ---- */
	--ink-950:  #101a20;
	--ink-900:  #17222a;
	--ink-800:  #22333c;
	--ink-700:  #37474f;
	--ink-600:  #4b5c64;
	--ink-500:  #5c6b73;
	--ink-400:  #7d8a90;
	--ink-300:  #9aa7ad;
	--sand-300: #d8cfc1;
	--sand-200: #e7e0d6;
	--sand-100: #f6f1ea;
	--sand-50:  #fbf8f3;
	--white:    #ffffff;

	/* ---- Status ---- */
	--success-600: #2f8f5b;
	--success-100: #dcf1e5;
	--warning-600: #cf8a1a;
	--danger-600:  #c8452f;

	/* ---- Semantische Aliase ---- */
	--brand:        var(--ocean-600);
	--brand-strong: var(--ocean-800);
	--brand-deep:   var(--ocean-900);
	--accent:       var(--sun-600);
	--accent-hover: var(--sun-700);
	--accent-soft:  var(--sun-100);

	--text-strong:     var(--ink-900);
	--text-body:       var(--ink-700);
	--text-muted:      var(--ink-500);
	--text-invert:     var(--sand-50);
	--text-invert-mut: var(--ocean-200);
	--text-brand:      var(--ocean-700);
	--text-accent:     var(--sun-700);

	--surface-page:   var(--sand-50);
	--surface-card:   var(--white);
	--surface-tint:   var(--ocean-50);
	--surface-sand:   var(--sand-100);
	--surface-deep:   var(--ocean-900);
	--surface-accent: var(--sun-600);

	--border-subtle: var(--sand-200);
	--border-strong: var(--sand-300);
	--border-brand:  var(--ocean-200);

	--link:       var(--ocean-600);
	--link-hover: var(--ocean-800);
	--focus-ring: var(--ocean-500);

	/* ---- Abstände (4px-Raster) ---- */
	--space-1:  4px;
	--space-2:  8px;
	--space-3:  12px;
	--space-4:  16px;
	--space-5:  20px;
	--space-6:  24px;
	--space-7:  32px;
	--space-8:  40px;
	--space-9:  48px;
	--space-10: 64px;
	--space-11: 80px;
	--space-12: 104px;

	/* ---- Radien — weich und menschlich, nie 0 ---- */
	--radius-xs:   4px;
	--radius-sm:   8px;
	--radius-md:   12px;
	--radius-lg:   18px;
	--radius-xl:   28px;
	--radius-pill: 999px;

	/* ---- Schatten — weich und warm getönt, nie hartes Grau ---- */
	--shadow-xs:     0 1px 2px rgba(11,46,59,.06);
	--shadow-sm:     0 2px 8px rgba(11,46,59,.07);
	--shadow-md:     0 8px 24px rgba(11,46,59,.09);
	--shadow-lg:     0 18px 44px rgba(11,46,59,.12);
	--shadow-accent: 0 10px 26px rgba(207,82,44,.28);

	/* ---- Bewegung — ruhig, keine Sprünge ---- */
	--ease-out:    cubic-bezier(.22, .61, .36, 1);
	--ease-in-out: cubic-bezier(.45, 0, .25, 1);
	--dur-fast:    120ms;
	--dur-base:    200ms;
	--dur-slow:    360ms;

	/* ---- Layout ---- */
	--container:        1180px;
	--container-narrow: 760px;
	--gutter:           24px;

	color-scheme: light;
}

/* -----------------------------------------------------------------------------
   BASE
   ----------------------------------------------------------------------------- */
html { background-color: var(--surface-page); }

body {
	background-color: var(--surface-page);
	color: var(--text-body);
	font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a { text-underline-offset: .15em; }

.mono {
	font-family: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
	font-variant-numeric: tabular-nums;
}

/* -----------------------------------------------------------------------------
   HEADER — einziges fixiertes Element, mattierte Glasfläche beim Scrollen
   ----------------------------------------------------------------------------- */
header.wp-block-template-part,
header.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
}

.site-header {
	background: color-mix(in srgb, var(--surface-page) 88%, transparent);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--border-subtle);
}
.site-header__brand-row,
.site-header__nav-row {
	max-width: 1180px;
	margin-inline: auto;
	padding-inline: var(--space-6);
}
.site-header__brand-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-5);
	padding-block: var(--space-4);
}
.site-header__brand-row .wp-block-buttons {
	flex: 0 0 auto;
}
.site-header__brand-row .is-style-tsunami-donate .wp-block-button__link {
	padding: 10px 18px;
	font-size: 15px;
}
.site-header__nav-row {
	display: flex;
	justify-content: center;
	border-top: 1px solid var(--border-subtle);
	padding-block: var(--space-3);
	overflow-x: auto;
	scrollbar-width: thin;
}
.site-header__nav-row .wp-block-navigation {
	width: 100%;
	justify-content: center;
	min-width: max-content;
}
.site-header__nav-row .wp-block-navigation__container {
	justify-content: center;
	column-gap: clamp(18px, 2vw, 32px);
	row-gap: var(--space-3);
	flex-wrap: nowrap;
}
.site-header .wp-block-navigation a {
	color: var(--text-body) !important;
	text-decoration: none !important;
}
.site-header .wp-block-navigation a:hover,
.site-header .wp-block-navigation .current-menu-item > a,
.site-header .wp-block-navigation .current-menu-ancestor > a {
	color: var(--brand) !important;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--surface-page) !important;
	color: var(--text-strong) !important;
	padding: var(--space-6);
}
.site-header .wp-block-navigation__responsive-container.is-menu-open a {
	color: var(--text-strong) !important;
	font-size: 17px;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	min-height: 44px;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > a,
.site-header .wp-block-navigation__responsive-container.is-menu-open .current-menu-ancestor > a {
	box-shadow: inset 3px 0 0 var(--accent);
	padding-left: 12px;
}
.site-header .wp-block-navigation__responsive-container-open,
.site-header .wp-block-navigation__responsive-container-close {
	color: var(--text-strong) !important;
	display: none !important;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
}

.site-logo {
	display: inline-flex;
	align-items: center;
}
.site-logo img,
.wp-block-site-logo img {
	height: 46px;
	width: auto;
	display: block;
}

/* -----------------------------------------------------------------------------
   BUTTONS — sanftes Anheben beim Hover, kein Stauchen beim Klick
   ----------------------------------------------------------------------------- */
.wp-block-button__link,
.wp-element-button {
	transition: background var(--dur-base) var(--ease-out),
	            transform var(--dur-fast) var(--ease-out),
	            box-shadow var(--dur-base) var(--ease-out);
}
.wp-block-button:not(.is-style-outline):not(.is-style-tsunami-donate) .wp-block-button__link:hover {
	background: var(--brand-strong) !important;
	transform: translateY(-1px);
}
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent !important;
	color: var(--brand) !important;
	border: 1.5px solid var(--border-brand) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--ocean-50) !important;
	border-color: var(--brand) !important;
}

/* Sekundärvariante auf dunklen Ocean-Bändern */
.on-deep .wp-block-button.is-style-outline .wp-block-button__link {
	color: var(--white) !important;
	background: rgba(255,255,255,.08) !important;
	border-color: rgba(255,255,255,.28) !important;
}
.on-deep .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: rgba(255,255,255,.16) !important;
	border-color: rgba(255,255,255,.5) !important;
}

/* -----------------------------------------------------------------------------
   DUNKLE OCEAN-BÄNDER
   ----------------------------------------------------------------------------- */
.band-deep {
	background: var(--surface-deep);
	background-image: radial-gradient(90% 120% at 15% 0%, rgba(23,146,168,.28), rgba(11,46,59,0) 60%);
	color: var(--text-invert);
}
.on-deep,
.on-deep p,
.on-deep li {
	color: var(--ocean-100) !important;
}
.on-deep h1,
.on-deep h2,
.on-deep h3,
.on-deep h4 {
	color: var(--white) !important;
}
.on-deep .eyebrow {
	color: var(--ocean-300) !important;
}

.band-sand { background: var(--surface-sand); }
.band-tint { background: var(--surface-tint); }

.eyebrow {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--text-brand);
	margin: 0 0 var(--space-4);
}

/* -----------------------------------------------------------------------------
   HERO (patterns/hero.php)
   Foto hinter dunklem Ocean-Scrim. Das Foto wird per Inline-Style im Pattern
   gesetzt, damit es leicht austauschbar bleibt.
   ----------------------------------------------------------------------------- */
.hero {
	position: relative;
	overflow: hidden;
	background: var(--surface-deep);
}
.hero-media {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: .34;
}
.hero-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(8,37,48,.94) 20%, rgba(8,37,48,.55) 70%, rgba(15,110,133,.35) 100%);
}
.hero-inner {
	position: relative;
	z-index: 1;
	max-width: 760px;
	margin-inline: auto;
	padding: var(--space-12) var(--space-6);
	text-align: center;
}
.hero-title {
	margin: var(--space-6) 0 0;
	font-size: clamp(38px, 5vw, 58px);
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: -.02em;
}
.hero-copy {
	max-width: 680px;
	margin: var(--space-6) auto 0;
	font-size: 20px;
	line-height: 1.6;
}
.hero-actions {
	justify-content: center;
	gap: 14px;
	margin-top: var(--space-7);
}
.hero-actions .wp-block-button__link {
	padding: 15px 28px;
	font-size: 17px;
}
.hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--gold-500);
	color: var(--ink-900);
	font-size: 13px;
	font-weight: 700;
	padding: 7px 15px;
	border-radius: var(--radius-pill);
}
.hero-assurance {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: var(--ocean-200);
	font-size: 14px;
}

/* -----------------------------------------------------------------------------
   ZAHLEN-BAND (patterns/impact-band.php)
   Große Serifen-Zahlen als Beleg — nur echte Zahlen verwenden.
   ----------------------------------------------------------------------------- */
.impact-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--space-8);
}
.stat-value {
	display: block;
	font-family: 'Spectral', Georgia, serif;
	font-weight: 700;
	font-size: 52px;
	line-height: 1.05;
	letter-spacing: -.02em;
	color: var(--white);
}
.stat-label {
	display: block;
	font-weight: 700;
	font-size: 16px;
	color: var(--ocean-100);
	margin-top: var(--space-2);
}
.stat-sublabel {
	display: block;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ocean-300);
	margin-top: 2px;
}

/* -----------------------------------------------------------------------------
   KARTEN
   Weiße Fläche, 1px warme Kante, 18px Radius, weicher warmer Schatten.
   Nie eine farbige linke Akzentkante — laut Design-System ausgeschlossen.
   ----------------------------------------------------------------------------- */
.card,
.post-card {
	background: var(--surface-card);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	padding: var(--space-7);
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--dur-base) var(--ease-out),
	            transform var(--dur-base) var(--ease-out);
}
.post-card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

/* Projektkarte: Foto oben, Ortsmarke als solides Badge darüber */
.project-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--space-7);
}
.project-card {
	background: var(--surface-card);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	color: inherit;
	text-decoration: none;
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	display: flex;
	flex-direction: column;
	transition: box-shadow var(--dur-base) var(--ease-out),
	            transform var(--dur-base) var(--ease-out);
}
.project-card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}
.project-card:focus-visible {
	outline-offset: 4px;
}
.project-card:hover .project-media { transform: scale(1.04); }
.project-media-wrap {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 10;
}
.project-media {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: transform var(--dur-slow) var(--ease-out);
}
.project-badge {
	position: absolute;
	left: 14px;
	bottom: 14px;
	background: var(--brand);
	color: var(--white);
	font-size: 13px;
	font-weight: 700;
	padding: 5px 12px;
	border-radius: var(--radius-pill);
}
.project-body { padding: var(--space-7); }
.project-title {
	display: block;
	font-family: 'Spectral', Georgia, serif;
	font-weight: 700;
	font-size: 22px;
	line-height: 1.25;
	letter-spacing: -.01em;
	color: var(--text-strong);
	margin-bottom: var(--space-3);
}
.project-text {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--text-muted);
}
.project-overview-card {
	margin-top: var(--space-6);
	padding: var(--space-7);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	background: var(--surface-card);
	box-shadow: var(--shadow-sm);
}
.project-overview-card h2 a {
	color: var(--text-strong);
}

/* -----------------------------------------------------------------------------
   ZUSAGEN-LISTE (patterns/mission.php, patterns/donation-box.php)
   ----------------------------------------------------------------------------- */
.assurance {
	display: flex;
	gap: var(--space-4);
	align-items: flex-start;
	margin-bottom: var(--space-5);
}
.assurance-icon {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-md);
	background: var(--ocean-50);
	color: var(--brand);
	display: flex;
	align-items: center;
	justify-content: center;
}
.assurance-icon.is-accent {
	background: var(--sun-100);
	color: var(--accent);
}
.assurance-title {
	display: block;
	font-weight: 700;
	font-size: 17px;
	color: var(--text-strong);
	margin-bottom: 2px;
}
.assurance-text {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--text-muted);
}

/* -----------------------------------------------------------------------------
   SPENDENKONTO (patterns/donation-box.php)
   IBAN/BIC in IBM Plex Mono mit tabellarischen Ziffern.
   ----------------------------------------------------------------------------- */
.donation-box {
	background: var(--surface-deep);
	background-image: radial-gradient(90% 120% at 15% 0%, rgba(23,146,168,.28), rgba(11,46,59,0) 60%);
	color: var(--ocean-100);
	border-radius: var(--radius-xl);
	padding: var(--space-9);
	box-shadow: var(--shadow-lg);
}
.donation-box .donation-title {
	display: block;
	font-family: 'Spectral', Georgia, serif;
	font-weight: 700;
	font-size: 26px;
	color: var(--white);
	margin-bottom: var(--space-6);
}
.donation-row {
	display: flex;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-3) 0;
	border-bottom: 1px solid rgba(255,255,255,.14);
	font-size: 15px;
}
.donation-row:last-of-type { border-bottom: none; }
.donation-label {
	color: var(--ocean-300);
	white-space: nowrap;
}
.donation-value {
	color: var(--white);
	font-weight: 600;
	text-align: right;
}
.donation-note {
	margin: var(--space-6) 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--ocean-200);
}

/* -----------------------------------------------------------------------------
   ZITAT (QuoteBlock)
   ----------------------------------------------------------------------------- */
.wp-block-quote {
	background: var(--surface-card);
	border-radius: var(--radius-lg);
	padding: var(--space-7) var(--space-8);
	margin-left: 0;
	margin-right: 0;
	box-shadow: var(--shadow-xs);
}

/* -----------------------------------------------------------------------------
   THEME-FARBEN GEGEN WORDPRESS-KERN ABSICHERN
   Core vergibt jedem Block mit eigener Textfarbe automatisch .has-text-color
   und erzwingt darüber `color: var(--wp--preset--color--text) !important`. Die
   Palette enthält bewusst KEINEN Preset-Slug "text" (stattdessen "ink"), damit
   diese Variable leer bleibt. Die Regeln hier sichern zusätzlich ab.
   ----------------------------------------------------------------------------- */
.wp-block-post-date.has-text-color,
.wp-block-post-date.has-text-color a {
	color: var(--text-muted) !important;
}
.wp-block-post-excerpt.has-text-color,
.wp-block-post-excerpt.has-text-color p {
	color: var(--text-muted) !important;
}
.wp-block-post-author-name.has-text-color,
.wp-block-post-author-name.has-text-color a {
	color: var(--text-muted) !important;
}
.wp-block-post-terms.has-text-color {
	color: var(--text-brand) !important;
}
.wp-block-post-navigation-link.has-text-color {
	color: var(--text-muted) !important;
}
.wp-block-term-description.has-text-color,
.wp-block-term-description.has-text-color p {
	color: var(--text-muted) !important;
}
.wp-block-breadcrumbs.has-text-color,
.wp-block-breadcrumbs.has-text-color a {
	color: var(--text-muted) !important;
}
.wp-block-query-total.has-text-color {
	color: var(--text-muted) !important;
}
.wp-block-accordion-panel.has-text-color,
.wp-block-accordion-panel.has-text-color p {
	color: var(--text-muted) !important;
}
.wp-block-footnotes.has-text-color,
.wp-block-footnotes.has-text-color li {
	color: var(--text-muted) !important;
}
.wp-block-term-count.has-text-color {
	color: var(--text-muted) !important;
}
.wp-block-comment-date.has-text-color {
	color: var(--text-muted) !important;
}
.wp-block-comment-content.has-text-color,
.wp-block-comment-content.has-text-color p {
	color: var(--text-body) !important;
}

/* -----------------------------------------------------------------------------
   ARTIKELINHALT
   ----------------------------------------------------------------------------- */
.wp-block-post-content,
.entry-content {
	color: var(--text-body);
	font-size: 17px;
	line-height: 1.65;
}

.wp-block-post-featured-image img {
	display: block;
	width: 100%;
	object-fit: cover;
	border-radius: var(--radius-lg);
}

/* -----------------------------------------------------------------------------
   GALERIEN UND VIDEOS
   Der Core-Galerieblock bleibt die redaktionelle Grundlage. Ohne JavaScript
   führen Bildlinks weiterhin direkt zum Originalbild. Mit JavaScript öffnet
   sich eine schlanke, per Tastatur bedienbare Dialogansicht.
   ----------------------------------------------------------------------------- */
.wp-block-gallery {
	gap: var(--space-4);
	margin-block: var(--space-8);
}
.wp-block-gallery .wp-block-image {
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-xs);
}
.wp-block-gallery .wp-block-image a {
	display: block;
	line-height: 0;
}
.wp-block-gallery .wp-block-image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform var(--dur-slow) var(--ease-out);
}
.wp-block-gallery .wp-block-image a:hover img {
	transform: scale(1.03);
}
.wp-block-gallery figcaption {
	background: linear-gradient(0deg, rgba(8,37,48,.78), rgba(8,37,48,0));
	color: var(--white);
	font-size: 13px;
	padding: var(--space-5) var(--space-3) var(--space-3);
}

.tsunami-gallery-dialog {
	width: min(1100px, calc(100% - 32px));
	max-width: none;
	max-height: calc(100% - 32px);
	margin: auto;
	padding: var(--space-7);
	background: var(--ocean-950);
	border: 1px solid rgba(255,255,255,.16);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-lg);
	color: var(--white);
}
.tsunami-gallery-dialog::backdrop {
	background: rgba(8,37,48,.88);
}
.tsunami-gallery-dialog__figure {
	display: grid;
	place-items: center;
	gap: var(--space-3);
	margin: 0;
}
.tsunami-gallery-dialog__figure img {
	display: block;
	max-width: 100%;
	max-height: min(72vh, 760px);
	width: auto;
	height: auto;
	border-radius: var(--radius-md);
}
.tsunami-gallery-dialog__figure figcaption {
	color: var(--ocean-100);
	font-size: 15px;
	text-align: center;
}
.tsunami-gallery-dialog__close,
.tsunami-gallery-dialog__previous,
.tsunami-gallery-dialog__next {
	min-width: 44px;
	min-height: 44px;
	border: 1px solid rgba(255,255,255,.24);
	border-radius: var(--radius-md);
	background: rgba(255,255,255,.1);
	color: var(--white);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}
.tsunami-gallery-dialog__close {
	display: block;
	margin: 0 0 var(--space-4) auto;
	padding-inline: var(--space-4);
}
.tsunami-gallery-dialog__previous,
.tsunami-gallery-dialog__next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	padding-inline: var(--space-3);
}
.tsunami-gallery-dialog__previous { left: var(--space-4); }
.tsunami-gallery-dialog__next { right: var(--space-4); }
.tsunami-gallery-dialog__close:hover,
.tsunami-gallery-dialog__previous:hover,
.tsunami-gallery-dialog__next:hover {
	background: var(--ocean-600);
}

.tsunami-video-consent .wp-block-embed__wrapper {
	position: relative;
	aspect-ratio: 16 / 9;
	display: grid;
	place-items: center;
	padding: var(--space-7);
	background: var(--ocean-900);
	border-radius: var(--radius-lg);
	overflow: hidden;
}
.tsunami-video-consent .wp-block-embed__wrapper::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 75% 20%, rgba(23,146,168,.32), transparent 45%);
}
.tsunami-video-consent__inner {
	position: relative;
	max-width: 560px;
	text-align: center;
	color: var(--ocean-100);
}
.tsunami-video-consent__title {
	margin: 0 0 var(--space-2);
	color: var(--white);
	font-family: 'Spectral', Georgia, serif;
	font-size: 26px;
	font-weight: 700;
}
.tsunami-video-consent__inner p {
	margin: 0 auto var(--space-5);
}
.tsunami-video-consent__inner button,
.tsunami-video-consent__inner a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	border-radius: var(--radius-md);
	font: inherit;
	font-weight: 700;
}
.tsunami-video-consent__inner button {
	padding: 10px var(--space-5);
	border: 0;
	background: var(--brand);
	color: var(--white);
	cursor: pointer;
}
.tsunami-video-consent__inner button:hover { background: var(--ocean-700); }
.tsunami-video-consent__inner a {
	margin-left: var(--space-3);
	padding: 10px 0;
	color: var(--white) !important;
	text-underline-offset: .18em;
}
.tsunami-video-consent .wp-block-embed__wrapper.is-loaded {
	display: block;
	padding: 0;
}
.tsunami-video-consent .wp-block-embed__wrapper.is-loaded::before { content: none; }
.tsunami-video-consent iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.wp-block-post-terms a {
	display: inline-block;
	background: var(--ocean-50);
	color: var(--text-brand) !important;
	padding: 4px 11px;
	border-radius: var(--radius-pill);
	text-decoration: none !important;
}
.wp-block-post-terms a:hover {
	background: var(--brand);
	color: var(--white) !important;
}

.wp-block-separator {
	border: none;
	border-top: 1px solid var(--border-subtle);
	margin: var(--space-9) 0;
}

code {
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	background: var(--surface-sand);
	border-radius: var(--radius-xs);
	padding: 2px 6px;
	font-size: .9em;
}

/* -----------------------------------------------------------------------------
   NEUE CORE-BLÖCKE (WP 6.9 / 7.0)
   ----------------------------------------------------------------------------- */
.wp-block-accordion-item {
	overflow: hidden;
	box-shadow: var(--shadow-xs);
}
.wp-block-accordion-heading button,
.wp-block-accordion-heading__toggle {
	color: var(--text-strong);
	background: transparent;
	cursor: pointer;
	width: 100%;
	text-align: left;
	transition: color var(--dur-fast) var(--ease-out);
}
.wp-block-accordion-heading button:hover,
.wp-block-accordion-heading__toggle:hover {
	color: var(--brand);
}

.wp-block-breadcrumbs ol,
.wp-block-breadcrumbs ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.wp-block-breadcrumbs li + li::before {
	content: "→";
	color: var(--border-strong);
	margin-right: 8px;
}

.wp-block-footnotes {
	border-top: 1px solid var(--border-subtle);
	padding-top: var(--space-6);
}

/* -----------------------------------------------------------------------------
   SUCHE UND FORMULARE
   Rahmen/Flächen kommen ab WP 7.0 aus styles.elements.textInput bzw. select in
   theme.json. Fokus-Ring und die Such-Schaltfläche bleiben hier.
   ----------------------------------------------------------------------------- */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus,
.wp-block-search__input:focus {
	border-color: var(--focus-ring) !important;
	box-shadow: 0 0 0 3px rgba(23,146,168,.16) !important;
	outline: none;
}

.wp-block-search__input {
	background: var(--surface-card);
	border: 1px solid var(--border-subtle) !important;
	border-radius: var(--radius-md) !important;
	color: var(--text-strong) !important;
	padding: 11px 16px !important;
}
.wp-block-search__button {
	background: var(--brand) !important;
	color: var(--white) !important;
	border: none !important;
	border-radius: var(--radius-md) !important;
	font-weight: 700 !important;
}

.comment-form input:not([type="submit"]),
.comment-form textarea {
	background: var(--surface-card);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-md);
	color: var(--text-strong);
	font-family: 'Hanken Grotesk', sans-serif;
	font-size: 17px;
	padding: 12px 16px;
	width: 100%;
}

/* -----------------------------------------------------------------------------
   PAGINATION
   ----------------------------------------------------------------------------- */
.wp-block-query-pagination a,
.wp-block-query-pagination-numbers a,
.wp-block-query-pagination-numbers .current {
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-md);
	background: var(--surface-card);
	color: var(--text-muted);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background var(--dur-fast) var(--ease-out),
	            color var(--dur-fast) var(--ease-out);
}
.wp-block-query-pagination a:hover,
.wp-block-query-pagination-numbers a:hover {
	background: var(--ocean-50);
	border-color: var(--border-brand);
	color: var(--text-brand);
}
.wp-block-query-pagination-numbers .current {
	background: var(--brand);
	border-color: var(--brand);
	color: var(--white);
}

/* -----------------------------------------------------------------------------
   FOOTER
   ----------------------------------------------------------------------------- */
.site-footer {
	background: var(--ocean-950);
	color: var(--ocean-200);
}
.site-footer .wp-block-site-title,
.site-footer .wp-block-site-title a {
	color: var(--white) !important;
}
.site-footer .wp-block-navigation a {
	color: var(--ocean-100) !important;
}
.site-footer .wp-block-navigation a:hover {
	color: var(--white) !important;
}
.site-footer .wp-block-site-logo img {
	height: 46px;
}
.site-footer .footer-heading {
	color: var(--ocean-300);
}
.site-footer .footer-bank {
	color: var(--ocean-100);
}
.site-footer .footer-contact,
.site-footer .footer-contact a {
	color: var(--ocean-100);
}
.site-footer .footer-contact a:hover {
	color: var(--white);
}
.site-footer .footer-description {
	color: var(--ocean-200);
}
.site-footer .footer-copy {
	color: var(--ocean-300);
}
.site-footer .footer-copy a {
	color: var(--ocean-100);
}
.site-footer .footer-copy a:hover {
	color: var(--white);
}
/* Haarlinie im Footer steht hell auf Ocean-Nacht — eigene Farbe statt der
   warmen --border-subtle des Standard-Separators. Bewusst per Nachfahren-
   Selektor und nicht per Klasse am Block: so bleibt das Separator-Markup
   attributfrei und damit kanonisch (siehe CLAUDE.md, Kanonisierung). */
.site-footer .wp-block-separator {
	border-top-color: rgba(255,255,255,.1);
}
.two-col {
	gap: var(--space-10);
}
.site-footer-columns {
	gap: var(--space-8);
}

/* -----------------------------------------------------------------------------
   TEXT-HILFSKLASSEN
   Farben gehören nicht als color.text ins Block-Markup — WordPress vergibt dort
   zusätzlich .has-text-color, was handgeschriebene Vorlagen nicht mitschreiben
   (Editor-Meldung „unerwarteter oder ungültiger Inhalt", solange die Vorlage aus
   der Datei rendert). Deshalb Farbe per Klasse, Typografie bleibt Block-Attribut.
   ----------------------------------------------------------------------------- */
.page-lead {
	color: var(--text-muted);
}
.meta-sep {
	color: var(--border-strong);
}
.empty-notice {
	color: var(--text-muted);
}
.error-page {
	min-height: 60vh;
}

/* Attribute für Rahmen und Abstände werden nicht in das handgeschriebene
   Kommentar-Markup serialisiert; der Editor kann sie sonst abweichend speichern. */
.tsunami-comments {
	padding-top: var(--space-9);
	border-top: 1px solid var(--border-subtle);
}
.tsunami-comment {
	margin-top: var(--space-7);
	padding-top: var(--space-6);
	border-top: 1px solid var(--border-subtle);
}
.post-navigation {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-4);
}
.post-navigation .post-navigation-link-next {
	margin-inline-start: auto;
}
.post-meta {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 8px;
	margin-top: var(--space-5);
}

/* -----------------------------------------------------------------------------
   FOKUS / A11Y
   ----------------------------------------------------------------------------- */
:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
	border-radius: var(--radius-xs);
}

/* -----------------------------------------------------------------------------
   RESPONSIVE
   ----------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.two-col { grid-template-columns: 1fr !important; }
	.stat-value { font-size: 42px; }
	.site-header__brand-row,
	.site-header__nav-row { padding-inline: var(--space-5); }
}

@media (max-width: 767px) {
	.project-grid { grid-template-columns: 1fr; }
	.article-grid { grid-template-columns: 1fr !important; }
	.donation-box { padding: var(--space-7); }
	.donation-row { flex-direction: column; gap: 2px; }
	.donation-value { text-align: left; }
	h1, .wp-block-post-title { font-size: 34px; }
	.site-header__brand-row { padding-block: var(--space-3); }
	.site-header__brand-row .site-logo img { height: 40px; }
	.site-header__nav-row { justify-content: flex-start; }
	.site-header__nav-row .wp-block-navigation__container { justify-content: flex-start; }
	.hero-inner { padding-block: var(--space-10); }
	.hero-copy { font-size: 18px; }
	.hero-actions .wp-block-button__link { padding: 13px 22px; }
	.tsunami-gallery-dialog { padding: var(--space-4); }
	.tsunami-gallery-dialog__previous,
	.tsunami-gallery-dialog__next {
		top: auto;
		bottom: var(--space-4);
		transform: none;
	}
	.tsunami-video-consent .wp-block-embed__wrapper { padding: var(--space-5); }
	.tsunami-video-consent__inner a {
		display: flex;
		margin: var(--space-2) auto 0;
	}
}

/* -----------------------------------------------------------------------------
   BEWEGUNG REDUZIEREN
   ----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}