/* ============================================================
   scoremark — Zusatz-CSS
   Konvention: NUR was theme.json (noch) nicht kann. Alles Übrige
   (Farben, Schriftgrößen, Abstände, Radien) kommt aus den Tokens.
   Klassenpräfix durchgehend `sm-`.
   ============================================================ */

/* ---------- Kopfzeile ---------- */

/*
 * Kleben muss der Template-Part-WRAPPER, nicht die Gruppe darin.
 *
 * `wp:template-part` erzeugt ein zusätzliches <header class="wp-block-template-part">
 * um den eigentlichen Block. `position: sticky` wirkt aber nur INNERHALB des
 * Elternelements — und dieser Wrapper ist exakt so hoch wie der Header selbst.
 * Die Gruppe hatte darin also keinen Raum zum Kleben und scrollte mitsamt dem
 * Wrapper weg (Fund 29.07.2026: Header stand nach 600 px Scrollen bei −600 px).
 */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
}

.sm-header {
	background: rgba(255, 255, 255, .88);
	backdrop-filter: saturate(1.6) blur(12px);
	border-bottom: 1px solid var(--wp--preset--color--line-soft);
}

/*
 * Anmelden — der Knopf in der Kopfzeile. Übernimmt die Optik der
 * Themenknöpfe (gefüllt, Pillenform), damit die Seite eine Sprache spricht.
 */
.sm-login-btn {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	background: var(--wp--preset--color--blue);
	color: #fff;
	font-size: .92rem;
	font-weight: 600;
	line-height: 1;
	border-radius: var(--wp--custom--radius--pill);
	padding: .72rem 1.35rem;
	text-decoration: none;
	white-space: nowrap;
	transition: background .15s ease;
}

.sm-login-btn:hover,
.sm-login-btn:focus {
	background: var(--wp--preset--color--blue-dark);
	color: #fff;
	text-decoration: none;
}

/*
 * Auf schmalen Geräten teilen sich Logo, Menüknopf und dieser Knopf eine
 * Zeile. Dort bleibt nur das Türsymbol — als Anmeldung geläufig, und ein
 * umbrechender Kopf sieht schlechter aus als ein Wort weniger.
 */
@media (max-width: 460px) {
	.sm-login-btn {
		font-size: 0;
		gap: 0;
		padding: .6rem .7rem;
	}

	.sm-login-btn svg {
		width: 18px;
		height: 18px;
	}
}

/*
 * Sprungziele nicht unter die Kopfzeile schieben: Beim Klick auf „Ablauf",
 * „App" & Co. muss die Überschrift sichtbar bleiben, nicht hinter dem
 * klebenden Header landen.
 */
:target,
[id] {
	scroll-margin-top: 6.5rem;
}

/*
 * Sanft zum Sprungziel rollen statt hart zu springen. Der Weg zeigt, wohin es
 * geht — beim harten Sprung steht man unvermittelt woanders und muss sich neu
 * orientieren.
 *
 * Nur wenn das Betriebssystem keine reduzierte Bewegung verlangt: Wer diese
 * Einstellung setzt, tut das meist wegen Schwindel oder Migräne. Für diese
 * Besucher ist der harte Sprung die richtige Antwort, nicht die schlechtere.
 */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* ---------- Abschnitte ohne Fuge aneinandersetzen ---------- */
/*
 * WordPress setzt zwischen zwei Blöcken den blockGap als margin-top — hier
 * 1,25 rem. Bei vollflächigen Abschnitten mit eigener Hintergrundfarbe wird
 * daraus ein 20 px hoher weißer Streifen zwischen je zwei Abschnitten
 * (Fund 29.07.2026). Sichtbar wurde es am Übergang vom Kopfbereich zum grauen
 * Band, wo der Verlauf sichtbar abriss und nach der Fuge wieder anfing.
 *
 * Vollflächige Abschnitte tragen ihren Abstand selbst als Innenabstand; ein
 * Außenabstand hat dort nichts zu suchen. Der blockGap gilt weiterhin für alle
 * anderen Blöcke.
 *
 * Die Fuge sitzt auf zwei Ebenen: zwischen den Abschnitten INNERHALB von main
 * und zwischen Kopfzeile, main und Fuß. Deshalb beide Ebenen. Am Fuß fiel es
 * besonders auf — ein weißer Streifen vor der dunklen Fläche.
 */
.wp-site-blocks > header,
.wp-site-blocks > main,
.wp-site-blocks > footer,
.wp-site-blocks > main > .alignfull,
.entry-content > .alignfull {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* ---------- Kopfbereich der Startseite ---------- */
/*
 * Der Verlauf des Themes geht von Weiß nach Fast-Weiß und ist auf dem
 * Bildschirm nicht zu erkennen. Die Startseite begann dadurch als schwarzer
 * Text auf weißer Fläche. Hier liegen drei Ebenen übereinander: zwei weiche
 * Farbwolken in den Markenfarben und darunter der Grundverlauf.
 */
.sm-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background:
		radial-gradient(60% 72% at 86% 6%, rgba(14, 165, 233, .26) 0%, rgba(14, 165, 233, 0) 64%),
		radial-gradient(54% 64% at 4% 92%, rgba(37, 99, 235, .20) 0%, rgba(37, 99, 235, 0) 62%),
		linear-gradient(180deg, #FFFFFF 0%, #E9F2FD 100%);
}

/*
 * Der Ring aus dem Markenzeichen, groß und rechts angeschnitten. Er sitzt
 * hinter dem Inhalt (z-index -1 innerhalb der eigenen Stapelebene, daher das
 * isolation oben) und bleibt blass genug, dass der Text seinen Kontrast behält.
 */
.sm-hero::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: -30%;
	right: -20%;
	width: min(980px, 78vw);
	aspect-ratio: 1;
	background: url(../img/hero-ring.svg) center / contain no-repeat;
	/*
	 * Bewusst schwach: Bei kräftigerer Zeichnung liest sich der angeschnittene
	 * Bogen als versehentlicher Strich am Bildrand statt als Fläche, die den
	 * Blick trägt. Die Farbe kommt aus den Verläufen, der Ring gibt nur die Form.
	 */
	opacity: .3;
	pointer-events: none;
}

/*
 * Auf schmalen Geräten wandert der Ring nach oben hinter die Überschrift.
 * Dort stört er das Lesen, deshalb kleiner und deutlich zurückgenommen.
 */
@media (max-width: 781px) {
	.sm-hero::before {
		top: -8%;
		right: -28%;
		width: 78vw;
		opacity: .3;
	}
}

/* ---------- Rechtstexte (AGB, Impressum, Datenschutz) ---------- */
/*
 * Ein Dokument mit neunzehn nummerierten Abschnitten braucht andere
 * Überschriften als eine Startseite mit fünf: Die Nummerierung soll gliedern,
 * nicht rufen. h2 trägt im Theme die Größe „Headline" (bis 40 px) — hier eine
 * Stufe kleiner, dafür mit mehr Luft davor, damit die Gliederung trotzdem auf
 * einen Blick erkennbar bleibt.
 */
.sm-rechtstext h2 {
	font-size: var(--wp--preset--font-size--x-large);
	margin-top: var(--wp--preset--spacing--50);
	margin-bottom: var(--wp--preset--spacing--30);
}

/*
 * Keine eigene Textbreite hier — der Abschnitt gibt mit 1160 px die Breite der
 * Startseite vor, und Text wie Überschriften nutzen sie gleichermaßen.
 *
 * Ein Versuch, nur den Fließtext schmaler zu setzen, ging schief: WordPress
 * zentriert die Kinder eines constrained-Layouts mit `margin-inline: auto
 * !important`. Eine engere max-width löst das Element damit aus dem Raster —
 * es zentriert sich dann im vollen Fensterbereich statt im 1160er-Rahmen und
 * stand um gut hundert Pixel gegen seine eigene Überschrift versetzt.
 */

/* ---------- Textrollen ---------- */
.is-style-sm-eyebrow {
	font-size: .79rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--blue);
}

.is-style-sm-lead {
	font-size: 1.16rem;
	line-height: 1.6;
}

/* Tabellenziffern überall dort, wo Zahlen untereinander stehen */
.sm-num { font-feature-settings: "tnum"; }

/* ---------- Karten und Panels ---------- */
.is-style-sm-card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--large);
	box-shadow: var(--wp--custom--shadow--card);
}

.is-style-sm-panel {
	background: var(--wp--preset--gradient--panel);
	border: 1px solid #D8E6FB;
	border-radius: var(--wp--custom--radius--large);
}

/*
 * Karten in einer Spaltenreihe auf gleiche Höhe bringen.
 *
 * Spalten sind untereinander bereits gleich hoch — die Karte DARIN wächst aber
 * nur mit ihrem Text. Bei unterschiedlich langen Absätzen standen die Kacheln
 * deshalb unterschiedlich hoch (Fund 29.07.2026). Die Spalte als Flex-Container
 * zu setzen genügt: Die Karte streckt sich dann auf die volle Spaltenhöhe.
 */
.wp-block-columns > .wp-block-column > .is-style-sm-card,
.wp-block-columns > .wp-block-column.is-style-sm-card {
	height: 100%;
}

.wp-block-columns > .wp-block-column {
	display: flex;
	flex-direction: column;
}

/* ---------- Häkchenliste ---------- */
.is-style-sm-checks {
	list-style: none;
	padding-left: 0;
}

.is-style-sm-checks li {
	position: relative;
	padding-left: 32px;
	margin-bottom: .7rem;
}

.is-style-sm-checks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .45em;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #EAF1FB no-repeat center;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 12.5l4 4 8-9' stroke='%232563EB' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- Sekundärer Knopf ---------- */
.is-style-sm-ghost .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--line);
}

.is-style-sm-ghost .wp-block-button__link:hover {
	border-color: #C9D6E8;
	background: var(--wp--preset--color--mist);
}

/* ---------- Score-Ring ---------- */
.sm-ring {
	position: relative;
	width: 158px;
	height: 158px;
	flex: 0 0 158px;
}

.sm-ring svg { transform: rotate(-90deg); display: block; }

/* Zahl und Beschriftung liegen im freien Kreis INNERHALB des Rings.
   Der Innendurchmesser beträgt bei r=66 und 15px Strich rund 117px —
   die Zahl darf deshalb nicht größer als ~2rem werden, sonst stößt sie an. */
.sm-ring-val {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	text-align: center;
	line-height: 1;
}

.sm-ring-val b {
	font-size: 1.95rem;
	font-weight: 700;
	letter-spacing: -.04em;
	color: var(--wp--preset--color--ink);
	font-feature-settings: "tnum";
}

.sm-ring-val small {
	font-size: .72rem;
	color: var(--wp--preset--color--muted);
}

/* ---------- Score-Karte ---------- */
.sm-scorecard { padding: 26px; }

.sm-scorecard-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	font-size: .95rem;
}

.sm-scorecard-head strong { color: var(--wp--preset--color--ink); }
.sm-scorecard-head span { color: var(--wp--preset--color--muted); font-size: .84rem; }

.sm-ringrow {
	display: flex;
	align-items: center;
	gap: 26px;
	padding: 16px 0 20px;
}

.sm-bars { flex: 1; display: grid; gap: 13px; }

.sm-bar-top {
	display: flex;
	justify-content: space-between;
	font-size: .88rem;
	margin-bottom: 6px;
}

.sm-bar-top span:first-child { color: var(--wp--preset--color--ink); font-weight: 500; }
.sm-bar-top span:last-child { color: var(--wp--preset--color--muted); font-feature-settings: "tnum"; }

.sm-bar {
	height: 7px;
	border-radius: var(--wp--custom--radius--pill);
	background: #EDF2F8;
	overflow: hidden;
}

.sm-bar i { display: block; height: 100%; border-radius: var(--wp--custom--radius--pill); }

.sm-scorecard-foot {
	border-top: 1px solid var(--wp--preset--color--line-soft);
	padding-top: 14px;
	display: flex;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	font-size: .85rem;
	color: var(--wp--preset--color--muted);
}

.sm-badge {
	display: inline-block;
	padding: 5px 12px;
	border-radius: var(--wp--custom--radius--pill);
	font-size: .79rem;
	font-weight: 600;
	background: #E8F7EE;
	color: #137A38;
}

/* ---------- Branchenzeile ---------- */
/* Darf die volle Breite nutzen, sonst bricht der letzte Eintrag um. */
.wp-block-group .sm-sectors { max-width: none; }

.sm-sectors {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 34px;
	font-size: .92rem;
	color: var(--wp--preset--color--muted);
}

.sm-sectors b { color: var(--wp--preset--color--ink); font-weight: 600; }

/* ---------- Schrittnummer ---------- */
/* Das Constrained-Layout von WordPress setzt auf JEDES Kind
   `margin-left/right: auto !important` und würde die 34-px-Nummer damit mittig
   stellen. Nur ein eigenes !important zieht sie zuverlässig nach links —
   die einzige Stelle im Theme, an der das nötig ist. */
.sm-step-n {
	width: 34px;
	height: 34px;
	margin-left: 0 !important;
	margin-right: auto !important;
	border-radius: var(--wp--custom--radius--small);
	background: var(--wp--preset--color--blue);
	color: #fff;
	display: grid;
	place-items: center;
	font-weight: 700;
	font-size: .95rem;
	font-feature-settings: "tnum";
}

/* ---------- Telefon ---------- */
/*
 * Telefon-Mockup — Seitenverhältnis wie ein aktuelles Android-Gerät
 * (9 : 19,5; Vorlage sind die App-Aufnahmen mit 1080 × 2400). Ohne
 * `aspect-ratio` war die Kachel nur so hoch wie ihr Inhalt und sah nicht nach
 * Gerät aus.
 */
.sm-phone {
	width: 300px;
	margin: 0 auto;
	border-radius: 38px;
	background: var(--wp--preset--color--ink);
	padding: 10px;
	box-shadow: 0 34px 70px -26px rgba(11, 17, 32, .5);
}

.sm-phone-in {
	position: relative;
	display: flex;
	flex-direction: column;
	aspect-ratio: 9 / 19.5;
	background: #F7FAFD;
	border-radius: 29px;
	overflow: hidden;
	padding: 10px 13px 0;
	font-size: .78rem;
	line-height: 1.4;
}

/* Statusleiste */
.sm-ph-status {
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: var(--wp--preset--color--ink);
	font-size: .68rem;
	font-weight: 600;
	padding: 2px 2px 8px;
}

.sm-ph-status-icons { display: flex; opacity: .75; }

/* Kopf: Vorlage, Standort, aktueller Stand */
.sm-ph-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 8px;
}

.sm-ph-title {
	margin: 0;
	font-weight: 700;
	font-size: .92rem;
	color: var(--wp--preset--color--ink);
}

.sm-ph-sub {
	margin: 1px 0 0;
	font-size: .68rem;
	color: var(--wp--preset--color--muted);
}

.sm-ph-score {
	flex-shrink: 0;
	background: #FEF3C7;
	color: #B45309;
	font-weight: 700;
	font-size: .74rem;
	border-radius: 999px;
	padding: 3px 9px;
}

.sm-ph-count {
	margin: 5px 0 0;
	font-size: .64rem;
	color: var(--wp--preset--color--muted);
}

.sm-ph-crumb {
	margin: 9px 0 6px;
	font-size: .68rem;
	font-weight: 600;
	color: var(--wp--preset--color--blue);
}

/* Fragekarte */
.sm-ph-card {
	background: #fff;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 14px;
	padding: 13px;
}

.sm-phone .sm-q {
	margin: 0;
	font-weight: 700;
	font-size: .86rem;
	line-height: 1.3;
	color: var(--wp--preset--color--ink);
}

.sm-ph-hint {
	margin: 3px 0 8px;
	font-size: .64rem;
	color: var(--wp--preset--color--muted);
}

.sm-ph-opt {
	display: flex;
	align-items: center;
	gap: 7px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	padding: 10px 10px;
	margin-bottom: 7px;
	font-size: .76rem;
	color: var(--wp--preset--color--ink);
}

.sm-ph-opt em {
	margin-left: auto;
	font-style: normal;
	font-size: .62rem;
	color: var(--wp--preset--color--muted);
}

.sm-ph-opt.is-sel {
	border-color: var(--wp--preset--color--blue);
	background: #F2F7FE;
}

.sm-ph-box {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	border: 1.5px solid #94A3B8;
	border-radius: 3px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .6rem;
	color: #fff;
}

.sm-ph-box.is-on {
	background: var(--wp--preset--color--blue);
	border-color: var(--wp--preset--color--blue);
}

.sm-ph-note,
.sm-ph-attach {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	padding: 10px;
	font-size: .72rem;
	color: var(--wp--preset--color--muted);
}

.sm-ph-note { margin-top: 10px; }

.sm-ph-attach {
	margin-top: 8px;
	display: inline-block;
	color: var(--wp--preset--color--blue);
	border-color: #C7DAF6;
}

.sm-ph-last {
	margin: 10px 0 0;
	font-size: .64rem;
	color: var(--wp--preset--color--muted);
}

/* Fußleiste sitzt unten fest, wie in der App */
.sm-ph-bar {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	border-top: 1px solid var(--wp--preset--color--line);
	padding: 9px 0 12px;
	font-size: .7rem;
	font-weight: 600;
	color: var(--wp--preset--color--blue);
}

.sm-ph-bar .is-primary {
	background: var(--wp--preset--color--blue);
	color: #fff;
	border-radius: 8px;
	padding: 6px 13px;
}

.sm-phone .sm-chip {
	display: inline-block;
	background: #EAF1FB;
	color: var(--wp--preset--color--blue);
	font-size: .68rem;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: var(--wp--custom--radius--pill);
}

.sm-phone .sm-q {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
	font-size: .95rem;
	line-height: 1.35;
}

.sm-phone .sm-opt {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 11px;
	padding: 11px 13px;
	font-size: .87rem;
	color: var(--wp--preset--color--blue);
	font-weight: 600;
	background: #fff;
	margin-bottom: 9px;
}

.sm-phone .sm-opt.is-sel {
	background: var(--wp--preset--color--blue);
	color: #fff;
	border-color: var(--wp--preset--color--blue);
}

.sm-phone .sm-meta {
	font-size: .72rem;
	color: var(--wp--preset--color--muted);
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid var(--wp--preset--color--line-soft);
}

.sm-progress {
	height: 5px;
	border-radius: var(--wp--custom--radius--pill);
	background: #E6EDF6;
	margin: 12px 0 14px;
}

.sm-progress i {
	display: block;
	height: 100%;
	width: 38%;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--blue);
}

/* ---------- Verlaufskarte ---------- */
.sm-trend { padding: 26px; }

.sm-trend-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 18px;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.sm-pill {
	margin-left: auto;
	background: #E8F7EE;
	color: #137A38;
	font-size: .76rem;
	font-weight: 600;
	padding: 4px 11px;
	border-radius: var(--wp--custom--radius--pill);
}

.sm-trend-row {
	display: flex;
	justify-content: space-between;
	padding: 10px 0;
	font-size: .92rem;
	border-top: 1px solid var(--wp--preset--color--line-soft);
	font-feature-settings: "tnum";
}

.sm-trend-row span:first-child { color: var(--wp--preset--color--muted); }
.sm-trend-row span:last-child { font-weight: 600; }

/* ---------- Formular ---------- */
/*
 * Der Kasten um das Formular. Ohne ihn standen weiße Felder mit sehr hellem
 * Rand auf weißem Grund — kaum zu erkennen. Auf dem grauen Grund heben sich
 * die Felder von selbst ab.
 */
.sm-formbox {
	background: var(--wp--preset--color--mist);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--large);
	padding: clamp(20px, 4vw, 34px);
}

/*
 * Abstände: 24 px zwischen den Zeilen, aber nur 6 px zwischen einem Label und
 * seinem Feld. Dieses Gefälle ordnet jedes Label eindeutig zu — bei gleichen
 * Abständen wirkte es, als gehörte es zum Feld darüber.
 */
.sm-form { display: grid; gap: 24px; }

.sm-form-row { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; }

.sm-form label { display: block; font-size: .9rem; font-weight: 500; margin-bottom: 6px; color: var(--wp--preset--color--ink); }

.sm-form input,
.sm-form textarea {
	/*
	 * Ohne border-box zählt "width: 100%" nur den Textbereich — Innenabstand
	 * und Rand kommen obendrauf. Die Felder ragten dadurch 32 px über den
	 * Kasten hinaus: links stand das volle Padding, rechts keines. Ein
	 * Block-Theme bringt für Formularelemente keinen eigenen Reset mit.
	 */
	box-sizing: border-box;
	width: 100%;
	padding: 13px 15px;
	border: 1px solid #CBD8E8;
	border-radius: var(--wp--custom--radius--medium);
	font: inherit;
	color: var(--wp--preset--color--ink);
	background: #fff;
}

.sm-form input::placeholder,
.sm-form textarea::placeholder { color: #94A3B8; }

.sm-form input:focus,
.sm-form textarea:focus {
	outline: 2px solid var(--wp--preset--color--blue);
	outline-offset: 1px;
	border-color: transparent;
}

.sm-form textarea { min-height: 150px; resize: vertical; }

.sm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.sm-submit {
	justify-self: start;
	background: var(--wp--preset--color--blue);
	color: #fff;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	padding: .9rem 1.85rem;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.sm-submit:hover { background: var(--wp--preset--color--blue-dark); }

.sm-formmeldung {
	padding: 13px 16px;
	border-radius: var(--wp--custom--radius--medium);
	font-size: .96rem;
}

.sm-formmeldung.is-ok { background: #E8F7EE; color: #137A38; }
.sm-formmeldung.is-fail { background: #FEECEC; color: #A21B1B; }

/* ---------- Fuß ---------- */
.sm-footer a { color: #94A3BC; }
.sm-footer a:hover { color: #fff; }

/* Die Spaltenlisten sind Navigation, keine Aufzählung — ohne Punkte. */
.sm-footer .wp-block-list {
	list-style: none;
	padding-left: 0;
	margin-top: 0;
}

.sm-footer .wp-block-list li { margin-bottom: .5rem; }

.sm-footer h4 { margin-bottom: 1rem; }

/* ---------- Barrierefreiheit ---------- */
.sm-skip {
	position: absolute;
	left: -9999px;
	background: var(--wp--preset--color--ink);
	color: #fff;
	padding: 12px 20px;
	border-radius: 0 0 var(--wp--custom--radius--medium) 0;
	z-index: 100;
}

.sm-skip:focus { left: 0; top: 0; }

@media (prefers-reduced-motion: reduce) {
	* { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- Umbrüche ---------- */
@media (max-width: 781px) {
	.sm-ringrow { flex-direction: column; align-items: flex-start; }
	.sm-form-row { grid-template-columns: 1fr; }
	.sm-sectors { gap: 18px; }
}