/* =============================================================================
   Irina erklärt — Basis-Styles
   Entspricht dem „Irina erklärt“-Design-System (Fraunces + Source Sans 3)
   ============================================================================= */

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

/* -----------------------------------------------------------------------------
   ROOT TOKENS — HELLES THEME (Standard)
   ----------------------------------------------------------------------------- */
:root {
	/* ---- Basis-Palette (in jedem Theme gleich) ---- */
	--olive:        #3F4A2F;
	--olive-deep:   #333C26;
	--olive-soft:   #6E7D45;
	--sage:         #A7B59B;
	--sage-light:   #DDE5D4;
	--ivory:        #F7F2E8;
	--sand:         #E7DCC7;
	--ink:          #252823;
	--copper:       #9A5A3B;
	--copper-deep:  #844A2E;
	--petrol:       #1F4E5F;
	--petrol-soft:  #2C6577;
	--aubergine:    #5A3E4D;

	/* ---- Kategorie-Farben ---- */
	--cat-gesundheit:   var(--olive);
	--cat-politik:      var(--petrol);
	--cat-pflege:       var(--sage);
	--cat-krankenhaus:  var(--sand);
	--cat-rettung:      var(--copper);
	--cat-faktencheck:  var(--aubergine);
	--cat-praevention:  var(--sage-light);

	/* ---- Semantische Aliase — hell (Standard) ---- */
	--bg:            var(--ivory);
	--bg-subtle:     #EFE9DA;
	--surface:       #FFFDF7;
	--surface-card:  var(--sand);
	--surface-info:  var(--sage-light);

	--text:          var(--ink);
	--text-muted:    #54564A;
	--text-faint:    #7C7E6F;
	--heading:       var(--olive);
	--link:          var(--petrol);
	--link-hover:    var(--olive);
	--accent:        var(--copper);

	--border:        rgba(63,74,47,.14);
	--border-strong: rgba(63,74,47,.28);

	--btn-bg:        var(--olive);
	--btn-bg-hover:  var(--olive-deep);
	--btn-fg:        var(--ivory);
	--btn-outline:   var(--olive);

	--focus-ring:    rgba(31,78,95,.55);

	/* ---- Radien ---- */
	--radius-sm:   8px;
	--radius-md:   13px;
	--radius-lg:   18px;
	--radius-xl:   24px;
	--radius-pill: 30px;
	--radius-full: 9999px;

	/* ---- Schatten (warm getönt, nie reines Schwarz) ---- */
	--shadow-sm:   0 1px 2px rgba(37,40,35,.06);
	--shadow-card: 0 6px 20px rgba(37,40,35,.08);
	--shadow-pop:  0 18px 44px rgba(37,40,35,.16);

	color-scheme: light;
}

/* ---- DUNKLES THEME — per Systemeinstellung oder manuellem Toggle ---- */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg:            #1E211A;
		--bg-subtle:     #23271E;
		--surface:       #2A2E22;
		--surface-card:  #31362A;
		--surface-info:  #2F3A2E;

		--text:          #ECE7D7;
		--text-muted:    #ADAF99;
		--text-faint:    #888A76;
		--heading:       #C7D2B0;
		--link:          #88B4C2;
		--link-hover:    #C7D2B0;
		--accent:        #C98A63;

		--border:        rgba(236,231,215,.14);
		--border-strong: rgba(236,231,215,.26);

		--btn-bg:        #C7D2B0;
		--btn-bg-hover:  #D6DFC2;
		--btn-fg:        #1E211A;
		--btn-outline:   #C7D2B0;

		--focus-ring:    rgba(136,180,194,.6);

		color-scheme: dark;
	}
}

[data-theme="dark"] {
	--bg:            #1E211A;
	--bg-subtle:     #23271E;
	--surface:       #2A2E22;
	--surface-card:  #31362A;
	--surface-info:  #2F3A2E;

	--text:          #ECE7D7;
	--text-muted:    #ADAF99;
	--text-faint:    #888A76;
	--heading:       #C7D2B0;
	--link:          #88B4C2;
	--link-hover:    #C7D2B0;
	--accent:        #C98A63;

	--border:        rgba(236,231,215,.14);
	--border-strong: rgba(236,231,215,.26);

	--btn-bg:        #C7D2B0;
	--btn-bg-hover:  #D6DFC2;
	--btn-fg:        #1E211A;
	--btn-outline:   #C7D2B0;

	--focus-ring:    rgba(136,180,194,.6);

	color-scheme: dark;
}

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

body {
	background-color: var(--bg);
	color: var(--text);
	font-family: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transition: background-color .2s ease, color .2s ease;
}

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

/* -----------------------------------------------------------------------------
   HEADER
   ----------------------------------------------------------------------------- */
.wp-block-template-part.header {
	position: sticky;
	top: 0;
	z-index: 100;
}

.site-header {
	background: color-mix(in srgb, var(--bg) 88%, transparent);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--border);
}

/* -----------------------------------------------------------------------------
   THEME-TOGGLE
   ----------------------------------------------------------------------------- */
.ie-theme-toggle {
	width: 38px;
	height: 38px;
	border-radius: var(--radius-full);
	border: 1px solid var(--border-strong);
	background: var(--surface);
	color: var(--text);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	transition: background .15s ease, color .15s ease;
}
.ie-theme-toggle:hover {
	background: var(--surface-card);
}
.ie-theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .ie-theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .ie-theme-toggle .icon-moon { display: inline-flex; }

/* -----------------------------------------------------------------------------
   BUTTONS — Ghost/Outline-Variante des Core-Button-Blocks
   ----------------------------------------------------------------------------- */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent !important;
	color: var(--btn-outline) !important;
	border: 1.5px solid var(--btn-outline) !important;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.wp-element-button:hover {
	background: var(--btn-bg-hover) !important;
}
.wp-block-button__link,
.wp-element-button {
	transition: background .15s ease, transform .12s ease;
}
.wp-block-button__link:active,
.wp-element-button:active {
	transform: translateY(1px);
}

/* -----------------------------------------------------------------------------
   KATEGORIE-BADGES (post-terms) — Farbcodierung je Themenrubrik
   Feste Vorgabe je Body-Klasse (Single-/Archiv-Seiten); für gemischte
   Beitragslisten übernimmt render_block_core/post-terms in functions.php
   die Einfärbung pro Beitrag.
   ----------------------------------------------------------------------------- */
.wp-block-post-terms a,
.category-badge {
	display: inline-block;
	background: var(--cat-gesundheit);
	color: var(--ivory);
	padding: 5px 11px;
	border-radius: var(--radius-pill);
	text-decoration: none !important;
}

body.category-gesundheit  .wp-block-post-terms a { background: var(--cat-gesundheit);  color: var(--ivory); }
body.category-politik     .wp-block-post-terms a { background: var(--cat-politik);     color: var(--ivory); }
body.category-pflege      .wp-block-post-terms a { background: var(--cat-pflege);      color: #2b3326; }
body.category-krankenhaus .wp-block-post-terms a { background: var(--cat-krankenhaus); color: var(--olive); }
body.category-rettung     .wp-block-post-terms a { background: var(--cat-rettung);     color: var(--ivory); }
body.category-faktencheck .wp-block-post-terms a { background: var(--cat-faktencheck); color: var(--ivory); }
body.category-praevention .wp-block-post-terms a { background: var(--cat-praevention); color: var(--olive); }

/* -----------------------------------------------------------------------------
   THEME-FARBEN GEGEN WORDPRESS-KERN ABSICHERN
   Core registriert für jeden Block mit eigener Textfarbe automatisch die Klasse
   .has-text-color und erzwingt darüber `color: var(--wp--preset--color--text)
   !important`. Falls die Palette je einen Preset "text" bekommt, würde das sonst
   unsere Hell/Dunkel-Variablen bei post-date, post-excerpt, post-terms und
   post-author-name überschreiben. Höhere Spezifität + !important gewinnt.
   ----------------------------------------------------------------------------- */
.wp-block-post-date.has-text-color {
	color: var(--accent) !important;
}
.wp-block-post-excerpt.has-text-color,
.wp-block-post-excerpt.has-text-color p {
	color: var(--text-muted) !important;
}
.wp-block-post-terms.has-text-color {
	color: var(--ivory) !important;
}
.wp-block-post-author-name.has-text-color,
.wp-block-post-author-name.has-text-color a {
	color: var(--accent) !important;
}

/* -----------------------------------------------------------------------------
   BEITRAGSKARTE (ArticleCard)
   ----------------------------------------------------------------------------- */
.post-card,
.wp-block-post {
	background: var(--surface-card);
	border-radius: var(--radius-md);
	padding: var(--wp--preset--spacing--6);
	transition: transform .15s ease, box-shadow .15s ease;
}
.post-card:hover,
.wp-block-post:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-card);
}

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

/* -----------------------------------------------------------------------------
   POST-CONTENT — Lesbarkeit
   ----------------------------------------------------------------------------- */
.wp-block-post-content,
.entry-content {
	color: var(--text);
	font-size: 19px;
	line-height: 1.6;
}
.wp-block-post-content p {
	color: var(--text);
}

/* Zitat — an QuoteBox angelehnt: Sandbeige-Fläche, Kupfer-Akzentlinie */
.wp-block-quote {
	background: var(--surface-card);
	border-left: 3px solid var(--accent);
	border-radius: var(--radius-md);
	padding: 24px 32px;
	margin-left: 0;
	margin-right: 0;
}
.wp-block-quote p {
	color: var(--heading) !important;
}
.wp-block-quote cite {
	font-family: 'Source Sans 3', sans-serif;
	font-weight: 600;
	font-size: 15px;
	color: var(--accent);
	letter-spacing: .03em;
	font-style: normal;
}

/* Code */
.wp-block-code, pre, code {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: .03em;
	color: var(--text);
}
code { padding: 2px 6px; border-radius: 6px; }

/* Trenner */
.wp-block-separator {
	border: none;
	border-top: 1px solid var(--border);
	margin: 2.5rem 0;
}

/* -----------------------------------------------------------------------------
   SUCHE
   ----------------------------------------------------------------------------- */
.wp-block-search__input {
	background: var(--surface);
	border: 1px solid var(--border) !important;
	border-radius: var(--radius-sm) !important;
	color: var(--text) !important;
	font-family: 'Source Sans 3', sans-serif;
	font-size: 15px;
	padding: 8px 14px !important;
	outline: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.wp-block-search__input:focus {
	border-color: var(--petrol) !important;
	box-shadow: 0 0 0 3px var(--focus-ring) !important;
}
.wp-block-search__button {
	background: var(--btn-bg) !important;
	color: var(--btn-fg) !important;
	border: none !important;
	border-radius: var(--radius-sm) !important;
	font-weight: 600 !important;
}

/* -----------------------------------------------------------------------------
   PAGINATION
   ----------------------------------------------------------------------------- */
.wp-block-query-pagination a,
.wp-block-query-pagination-numbers a {
	min-width: 34px;
	height: 34px;
	padding: 0 10px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--surface);
	color: var(--text-muted);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background .15s ease, color .15s ease;
}
.wp-block-query-pagination a:hover,
.wp-block-query-pagination-numbers a:hover {
	background: var(--olive);
	border-color: var(--olive);
	color: var(--ivory);
}
.wp-block-query-pagination-numbers .current {
	background: var(--olive);
	border-color: var(--olive);
	color: var(--ivory);
	border-radius: var(--radius-sm);
	min-width: 34px;
	height: 34px;
	padding: 0 10px;
	font-size: 13px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* -----------------------------------------------------------------------------
   KOMMENTARE
   ----------------------------------------------------------------------------- */
.comment-form input:not([type="submit"]),
.comment-form textarea {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	color: var(--text);
	font-family: 'Source Sans 3', sans-serif;
	font-size: 15px;
	padding: 8px 12px;
	width: 100%;
}
.comment-form input:focus,
.comment-form textarea:focus {
	border-color: var(--petrol);
	box-shadow: 0 0 0 3px var(--focus-ring);
	outline: none;
}

/* -----------------------------------------------------------------------------
   FOOTER
   ----------------------------------------------------------------------------- */
.site-footer {
	background: var(--olive);
	color: var(--ivory);
}
.site-footer .wp-block-site-title a,
.site-footer .wp-block-site-title {
	color: var(--ivory) !important;
}
.site-footer .wp-block-navigation a {
	color: rgba(247,242,232,.85) !important;
}
.site-footer .wp-block-navigation a:hover {
	color: var(--ivory) !important;
}

/* -----------------------------------------------------------------------------
   HERO (patterns/hero.php)
   ----------------------------------------------------------------------------- */
.hero-portrait {
	position: relative;
}
.hero-portrait .hero-portrait-frame {
	aspect-ratio: 4/5;
	border-radius: var(--radius-xl);
	overflow: hidden;
	box-shadow: var(--shadow-pop);
	background: var(--sand);
}
.hero-portrait .hero-portrait-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.hero-badge {
	position: absolute;
	left: -16px;
	bottom: 22px;
	background: var(--olive);
	color: var(--ivory);
	padding: 10px 18px;
	border-radius: var(--radius-pill);
	font-weight: 600;
	font-size: 14px;
	box-shadow: var(--shadow-card);
}

/* -----------------------------------------------------------------------------
   KATEGORIE-KACHELN (patterns/category-tiles.php)
   ----------------------------------------------------------------------------- */
.category-tile {
	border-radius: var(--radius-md);
	padding: 20px;
	min-height: 120px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	text-decoration: none !important;
	transition: filter .15s ease;
}
.category-tile:hover { filter: brightness(1.06); }
.category-tile .tile-index {
	font-weight: 600;
	font-size: 12px;
	letter-spacing: .14em;
	opacity: .75;
	margin-bottom: 8px;
	display: block;
}
.category-tile .tile-title {
	font-family: 'Fraunces', serif;
	font-weight: 600;
	font-size: 26px;
	line-height: 1.08;
	letter-spacing: -.01em;
	display: block;
}
.tile-gesundheit  { background: var(--cat-gesundheit);  color: var(--ivory); }
.tile-politik     { background: var(--cat-politik);     color: var(--ivory); }
.tile-pflege      { background: var(--cat-pflege);      color: #2b3326; }
.tile-krankenhaus { background: var(--cat-krankenhaus); color: var(--olive); }
.tile-rettung     { background: var(--cat-rettung);     color: var(--ivory); }
.tile-faktencheck { background: var(--cat-faktencheck); color: var(--ivory); }
.tile-praevention { background: var(--cat-praevention); color: var(--olive); }

/* -----------------------------------------------------------------------------
   ÜBER-MICH-STREIFEN (patterns/about-strip.php)
   ----------------------------------------------------------------------------- */
.about-strip { background: var(--bg-subtle); }
.about-portrait {
	border-radius: 50%;
	overflow: hidden;
	box-shadow: var(--shadow-card);
	border: 3px solid var(--surface);
	flex: none;
}
.about-portrait img { width: 100%; height: 100%; object-fit: cover; }

/* -----------------------------------------------------------------------------
   INFOBOXEN (patterns/infobox-*.php)
   ----------------------------------------------------------------------------- */
.info-box {
	border-radius: var(--radius-md);
	padding: 20px 24px;
	margin: 28px 0;
}
.info-box .info-box-title {
	font-family: 'Fraunces', serif;
	font-weight: 600;
	font-size: 26px;
	line-height: 1.2;
	margin: 0 0 8px;
	display: block;
}
.info-box .info-box-body {
	font-size: 19px;
	line-height: 1.55;
	margin: 0;
}
.info-box.is-kurz {
	background: var(--surface-info);
}
.info-box.is-kurz .info-box-title { color: var(--olive); }
.info-box.is-kurz .info-box-body { color: var(--text); }

.info-box.is-warum {
	background: var(--sand);
	border-left: 3px solid var(--copper);
}
.info-box.is-warum .info-box-title { color: var(--copper); }
.info-box.is-warum .info-box-body { color: var(--text); }

.info-box.is-einordnung {
	background: var(--bg);
	border: 1.5px solid var(--sage);
}
.info-box.is-einordnung .info-box-title { color: var(--petrol); }
.info-box.is-einordnung .info-box-body { color: var(--text-muted); }

.info-box.is-fakt {
	background: var(--petrol);
}
.info-box.is-fakt .info-box-title { color: #CFE1E6; }
.info-box.is-fakt .info-box-body { color: var(--ivory); }

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

/* -----------------------------------------------------------------------------
   RESPONSIVE
   ----------------------------------------------------------------------------- */
@media (max-width: 640px) {
	:root {
		--text-display: 40px;
	}
	.wp-block-post-featured-image img { height: 180px; }
	h1, .wp-block-post-title { font-size: 36px; }
}

@media (max-width: 767px) {
	.hero-grid { grid-template-columns: 1fr !important; }
	.category-tiles-grid { grid-template-columns: repeat(2, 1fr) !important; }
	.article-grid { grid-template-columns: 1fr !important; }
	.about-strip-inner { flex-direction: column; text-align: center; }
}