/*
 * Varianten von Core-Blöcken (inc/blocks.php → register_block_style) und
 * gemeinsame Bausteine. Gilt im Editor und auf der Seite.
 * Farben nur über theme.json-Tokens (--wp--preset--color--…).
 */

/*
 * Nur zwei Schriften im ganzen Projekt (Chris, 03.10.2026): Schibsted Grotesk
 * (Titel) und Atkinson Hyperlegible Next (Text). Formularfelder erben sonst die
 * Browser-Schrift (Arial) — deshalb hier ausdrücklich die Textschrift.
 */
input, button, select, textarea, optgroup { font-family: var(--wp--preset--font-family--text); }

/* Gruppe → „Hinweis“: für Termine, Fristen, Wichtiges. */
.wp-block-group.is-style-hinweis {
	background: var(--wp--preset--color--hinweis);
	padding: var(--wp--custom--box--innen);
	border-radius: var(--wp--custom--radius--kachel);
}
.wp-block-group.is-style-hinweis > :first-child { margin-top: 0; }
.wp-block-group.is-style-hinweis > :last-child { margin-bottom: 0; }

/* Gruppe → „Hervorgehoben“: ruhige Fläche für einen Abschnitt. */
.wp-block-group.is-style-hervorgehoben {
	background: var(--wp--preset--color--primaer-hell);
	padding: var(--wp--custom--box--innen);
	border-radius: var(--wp--custom--radius--kachel);
}
.wp-block-group.is-style-hervorgehoben > :first-child { margin-top: 0; }

/* Absatz → „Einleitung“: der erste, etwas größere Absatz einer Seite. */
p.is-style-einleitung { font-size: var(--wp--preset--font-size--gross); line-height: 1.5; color: var(--wp--preset--color--text); }

/* Liste → „Haken“ */
ul.is-style-haken { list-style: none; padding-left: 0; }
ul.is-style-haken > li { position: relative; padding-left: 2rem; margin-bottom: .35rem; }
ul.is-style-haken > li::before { content: "✓"; position: absolute; left: .25rem; font-weight: 700; color: var(--wp--preset--color--primaer); }

/* Tabellen: lesbar auf dem Handy (waagerecht scrollen statt quetschen). */
.wp-block-table { overflow-x: auto; }
.wp-block-table th { text-align: left; }
.wp-block-table td, .wp-block-table th { padding: .6rem .75rem; border-color: var(--wp--preset--color--linie); }

/*
 * Mitgliederlogo (wir_mitglied_logo): feste Box, Bild mit echten Maßen,
 * object-fit: contain — NIE verzerren, nie beschneiden (Vorgabe Chris).
 */
/* EIN Format für alle Logos: 3:2 quer (Chris, 03.10.2026). Quadratische und hohe
   Logos sitzen zentriert mit Weißraum; die Box wächst nie mit dem Bild. */
.wir-logo {
	display: grid;
	place-items: center;
	width: var(--wir-logo-breite, 10rem);
	aspect-ratio: 3 / 2;
	overflow: hidden;
	padding: .5rem;
	background: #fff;
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: var(--wp--custom--radius--klein);
	box-sizing: border-box;
}
.wir-logo__bild { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.wir-logo--initialen {
	background: var(--wp--preset--color--primaer-hell);
	color: var(--wp--preset--color--primaer);
	font-weight: 700;
	font-size: 1.75rem; /* schrift-ok: groesse Initialen sind Logo-Ersatz (Grafik), Größe folgt der Logo-Box */
	letter-spacing: .05em;
}

/*
 * Notrufnummern (Seite /service/notrufnummern/): 112 und 110 als große Felder,
 * die man auch in Aufregung nicht verfehlt. Ganzes Feld tippbar über den Knopf
 * (ein Tab-Stopp, wie .wir-karte--pdf). 112 trägt, 110 steht ruhiger daneben.
 */
.wir-notruf {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--m);
	margin-block: var(--wp--preset--spacing--m) 0;
}
@media (min-width: 48em) { .wir-notruf { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.wir-notruf > .wir-notruf__feld { margin: 0; }
.wir-notruf__feld {
	position: relative;
	display: flex; flex-direction: column; align-items: flex-start;
	padding: var(--wp--custom--box--innen);
	border-radius: var(--wp--custom--radius--kachel);
	background: var(--wp--preset--color--flaeche);
	border: 1px solid var(--wp--preset--color--linie);
	color: var(--wp--preset--color--text);
}
.wir-notruf__feld > * { margin: 0; }
.wir-notruf__feld--112 { background: var(--wp--custom--verlauf--wald); border-color: transparent; color: var(--wp--preset--color--auf-dunkel); }
.wir-notruf__dienst { font-size: var(--wp--preset--font-size--gross); font-weight: 600; line-height: 1.3; }
.wir-notruf__nummer {
	font-family: var(--wp--preset--font-family--titel);
	font-size: var(--wp--preset--font-size--titel-2);
	font-weight: 700; line-height: 1; letter-spacing: -.01em;
	font-variant-numeric: tabular-nums;
	margin-block: .2em .6em !important;
	color: var(--wp--preset--color--wald);
}
.wir-notruf__feld--112 .wir-notruf__nummer { color: var(--wp--preset--color--flaeche); }
.wir-notruf__feld .wp-block-buttons { margin-top: auto !important; }
.wir-notruf__feld .wp-block-button__link { padding-inline: 1.5rem; }
.wir-notruf__feld .wp-block-button__link::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.wir-notruf__feld--112 .wp-block-button a.wp-block-button__link { background: var(--wp--preset--color--hellgruen); border-color: var(--wp--preset--color--hellgruen); color: var(--wp--preset--color--wald); }
.wir-notruf__feld--112 .wp-block-button a.wp-block-button__link:hover { background: var(--wp--preset--color--flaeche); border-color: var(--wp--preset--color--flaeche); color: var(--wp--preset--color--wald); }
.wir-notruf__feld--112 .wp-block-button a.wp-block-button__link:focus-visible { outline: 3px solid var(--wp--preset--color--flaeche); outline-offset: 3px; }

/* Weitere Notdienste: Liste statt Gitter – nur Linien zwischen den Zeilen, Nummer groß */
.wp-block-table.wir-notruf-liste table { border-collapse: collapse; width: 100%; border: 0; }
.wp-block-table.wir-notruf-liste td { border: 0; border-bottom: 1px solid var(--wp--preset--color--linie); padding: .9rem 0; vertical-align: baseline; }
.wp-block-table.wir-notruf-liste tr:first-child td { border-top: 1px solid var(--wp--preset--color--linie); }
.wp-block-table.wir-notruf-liste td:first-child { padding-right: 1.5rem; font-size: var(--wp--preset--font-size--gross); }
.wp-block-table.wir-notruf-liste td:last-child { color: var(--wp--preset--color--text-leise); }
.wp-block-table.wir-notruf-liste td a[href^="tel:"] {
	font-family: var(--wp--preset--font-family--titel);
	font-size: var(--wp--preset--font-size--titel-3);
	font-weight: 700; white-space: nowrap;
	color: var(--wp--preset--color--primaer);
}
@media (max-width: 34em) {
	.wp-block-table.wir-notruf-liste :is(tbody, tr, td) { display: block; }
	.wp-block-table.wir-notruf-liste td:first-child { border-bottom: 0; padding-bottom: 0; }
	.wp-block-table.wir-notruf-liste tr:first-child td:last-child { border-top: 0; }
	.wp-block-table.wir-notruf-liste td:last-child { padding-top: .1rem; }
}

/* Zahlentabelle (Blockstil core/table „zahlen“): Text links, Zahlen rechts und
   gleich breit, nur waagerechte Linien wie die Notruf-Liste. Einsatz: Statistik
   im Premium-Konto, jede Tabelle aus Beschriftung + Zahlen. */
.wp-block-table.is-style-zahlen table { width: 100%; border-collapse: collapse; border: 0; }
.wp-block-table.is-style-zahlen th, .wp-block-table.is-style-zahlen td { border: 0; border-bottom: 1px solid var(--wp--preset--color--linie); padding: .9rem 1rem .9rem 0; vertical-align: baseline; }
.wp-block-table.is-style-zahlen thead { border-bottom: 0; }
.wp-block-table.is-style-zahlen thead th { font-size: var(--wp--preset--font-size--klein); font-weight: 600; color: var(--wp--preset--color--text-leise); border-bottom-color: var(--wp--preset--color--linie-stark); white-space: nowrap; hyphens: manual; }
.wp-block-table.is-style-zahlen tbody th { font-weight: 400; hyphens: manual; }
.wp-block-table.is-style-zahlen td, .wp-block-table.is-style-zahlen thead th + th { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; width: 1%; }
.wp-block-table.is-style-zahlen tr > :last-child { padding-right: 0; }