/*
Theme Name: Miriam Göbel
Template: twentytwentyfive
Description: Child-Theme von Twenty Twenty-Five im Look von miriamgoebel.de (Fraunces + IBM Plex, Farbtyp Weicher Sommer: Salbei/Anthrazit/kühles Weiß, Akzente Beere/Petrol). Schriften lokal eingebunden, keine Google-Fonts-Verbindung.
Version: 1.6.0
Requires at least: 6.7
Author: Miriam Göbel
Text Domain: miriam-goebel
License: GNU General Public License v2 or later
*/

/* Kleine Ergänzungen, die theme.json nicht abdeckt. */
:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 3px;
	border-radius: 2px;
}

a {
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

/* Kicker-Zeile wie auf der Website: Absatz markieren, dann unter Erweitert > Zusätzliche CSS-Klasse "kicker" eintragen. */
.kicker {
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--braun);
}

/* Kopf- und Fußzeile: feine Linie wie auf der Website. */
.mg-header {
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
}

.mg-footer {
	border-top: 1px solid var(--wp--preset--color--accent-6);
	margin-top: var(--wp--preset--spacing--70);
	color: var(--wp--preset--color--accent-4);
}

/* Startseite: dunkler Hero im Look des Alltag-Check-Covers. */
.mg-hero-titel {
	font-size: clamp(2.1rem, 5vw, 3.2rem);
	max-width: 16ch;
}

.mg-hero .lede {
	color: #dadde0;
	font-size: 1.08rem;
	max-width: 46ch;
}

.mg-hero .mission {
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 0.85rem;
	color: #9cad98;
	border-top: 1px solid #4a4852;
	padding-top: 1rem;
	max-width: 42ch;
}

.countdown {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-1);
}

.countdown .zahl {
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: 2.4rem;
	line-height: 1;
	letter-spacing: 0;
	color: var(--wp--preset--color--base);
}

.mg-portrait img,
.mg-foto img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 6px;
}

.mg-portrait img {
	max-width: 24rem;
	margin-left: auto;
	filter: grayscale(0.15) contrast(1.03);
}

/* Startseite: jede Sektion hat einen gemeinsamen linken Rand (wie .wrap auf der Astro-Seite). */
.mg-section {
	border-top: 1px solid var(--wp--preset--color--accent-6);
}

.mg-wrap h2 {
	font-size: clamp(1.5rem, 3vw, 2rem);
	max-width: 22ch;
}

.pull {
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: clamp(1.4rem, 3.4vw, 2rem);
	line-height: 1.35;
	max-width: 26ch;
	padding-left: 1.2rem;
	border-left: 3px solid var(--wp--preset--color--accent-3);
}

.lead {
	color: var(--wp--preset--color--accent-4);
	font-size: 1.05rem;
	max-width: 60ch;
}

/* Karten (vier Bewegungen, Kanäle): Fläche mit feinem Rahmen. */
.wp-block-group.mg-moves,
.wp-block-group.mg-links {
	margin-top: var(--wp--preset--spacing--40);
	gap: 1rem;
}

.mg-card {
	background: var(--wp--preset--color--accent-5);
	border: 1px solid var(--wp--preset--color--accent-6);
	border-radius: 4px;
	padding: 1.1rem 1.2rem;
}

.mg-card > * {
	margin-block: 0;
}

.mg-card > * + * {
	margin-block-start: 0.4rem;
}

.mg-card h3 {
	font-size: 1.05rem;
}

.mg-card p:not(.kicker) {
	font-size: 0.93rem;
	color: var(--wp--preset--color--accent-4);
}

.mg-links .mg-card {
	border-radius: 6px;
	padding: 1.3rem 1.4rem;
}

.mg-links .mg-card h3 {
	font-size: 1.2rem;
}

.mg-card .mg-go {
	margin-block-start: 0.8rem;
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 0.75rem;
}

/* Proof-Zyklus: Text links, zwei Fotos eng nebeneinander rechts. */
.wp-block-columns.mg-prozess {
	margin-top: var(--wp--preset--spacing--50);
	gap: 1.2rem 2rem;
}

.mg-prozess h3 {
	font-size: 1.25rem;
	margin-block: 0.4rem 0.5rem;
}

.mg-prozess p:not(.kicker) {
	color: var(--wp--preset--color--accent-4);
	max-width: 40ch;
}

.wp-block-group.mg-bilder {
	gap: 0.7rem;
}

.mg-bilder > .wp-block-image {
	margin: 0;
}

.mg-foto-45 img {
	aspect-ratio: 4 / 5;
}

/* FAQ als aufklappbare Fragen mit + und –. */
.wp-block-details {
	border-top: 1px solid var(--wp--preset--color--accent-6);
	padding: 0;
	margin: 0;
}

.mg-faq {
	margin-top: var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
}

.mg-faq > .wp-block-details + .wp-block-details {
	margin-block-start: 0;
}

.wp-block-details summary {
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.1rem 0.1rem;
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: 1.1rem;
	cursor: pointer;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::after {
	content: "+";
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	color: var(--wp--preset--color--accent-3);
}

.wp-block-details[open] summary::after {
	content: "–";
}

.wp-block-details > p {
	margin: 0 0.1rem 1.1rem;
	max-width: 68ch;
	color: var(--wp--preset--color--accent-4);
}