/*
 * Schall AI – Gestaltung (Richtung A „Signal“).
 * Hell, präzise, technisch: Signalblau auf Weiß, feine Linien, Monospace-Etiketten.
 * Bausteine heißen sa-*, damit sie sich nicht mit GeneratePress oder GenerateBlocks überschneiden.
 */

:root {
	--sa-signal: #2347f0;
	--sa-signal-dark: #1530b8;
	--sa-signal-soft: #eaeeff;
	--sa-signal-line: #c9d3ff;
	--sa-ink: #0b1220;
	--sa-slate: #4b5563;
	--sa-line: #dfe4ec;
	--sa-line-strong: #c5cdd9;
	--sa-fog: #f4f6f9;
	--sa-white: #ffffff;
	--sa-ok: #16a34a;
	--sa-local: #15803d; /* lokale KI: eigener Computer */
	--sa-local-soft: #e9f6ee;
	--sa-local-line: #a9dbbb;
	--sa-footer-text: #c9d1dc;
	--sa-footer-muted: #8c97a8;
	--sa-footer-link: #e6eaf0;
	--sa-footer-line: #243047;
	--sa-signal-on-dark: #8ea2ff;
	--sa-font: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--sa-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
	--sa-max: 1200px;
	--sa-gutter: 24px;
	--sa-radius: 12px;
	--sa-section: 96px;
}

/* ---------- Grundlagen ---------- */

body,
button,
input,
select,
textarea {
	font-family: var(--sa-font);
}

body {
	color: var(--sa-ink);
	background: var(--sa-white);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--sa-font);
	color: var(--sa-ink);
	font-weight: 700;
	letter-spacing: -0.02em;
}

a {
	color: var(--sa-signal);
}

a:hover,
a:focus {
	color: var(--sa-signal-dark);
}

:focus-visible {
	outline: 2px solid var(--sa-signal);
	outline-offset: 2px;
}

code, kbd, pre, samp {
	font-family: var(--sa-mono);
}

/* ---------- Kopfbereich ---------- */

.site-header {
	background: var(--sa-white);
	border-bottom: 1px solid var(--sa-line);
}

.site-header .inside-header {
	max-width: var(--sa-max);
	padding: 14px var(--sa-gutter);
	margin: 0 auto;
}

.sa-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--sa-ink);
	text-decoration: none;
}

.sa-brand:hover,
.sa-brand:focus {
	color: var(--sa-ink);
}

.sa-brand__mark {
	color: var(--sa-signal);
	flex: 0 0 auto;
}

.sa-brand__word {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1;
}

.sa-brand__ai {
	color: var(--sa-signal);
}

.main-title {
	margin: 0;
	line-height: 1;
}

.main-navigation {
	background: transparent;
}

.main-navigation .main-nav ul li a {
	color: var(--sa-ink);
	font-size: 15px;
	font-weight: 500;
	padding-left: 14px;
	padding-right: 14px;
	line-height: 60px;
}

.main-navigation .main-nav ul li:not(.sa-menu-button):hover > a,
.main-navigation .main-nav ul li:not(.sa-menu-button):focus-within > a,
.main-navigation .main-nav ul li.current-menu-item:not(.sa-menu-button) > a,
.main-navigation .main-nav ul li.current-page-ancestor:not(.sa-menu-button) > a {
	color: var(--sa-signal);
	background: transparent;
}

.main-navigation .main-nav ul li.sa-menu-button > a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	line-height: 1;
	margin-left: 10px;
	padding: 0 18px;
	border-radius: 8px;
	background: var(--sa-signal);
	color: var(--sa-white);
	font-weight: 600;
}

.main-navigation .main-nav ul li.sa-menu-button > a:hover,
.main-navigation .main-nav ul li.sa-menu-button > a:focus {
	background: var(--sa-signal-dark);
	color: var(--sa-white);
}

.main-navigation .main-nav ul li.sa-lang-switch {
	display: flex;
	align-items: center;
	margin-left: 8px;
}

.main-navigation .main-nav ul li.sa-lang-switch a {
	padding: 0 6px;
	font-family: var(--sa-mono);
	font-size: 13px;
	font-weight: 400;
	color: var(--sa-slate);
}

.main-navigation .main-nav ul li.sa-lang-switch a[aria-current] {
	color: var(--sa-ink);
	font-weight: 500;
}

.main-navigation .main-nav ul li.sa-lang-switch a:hover,
.main-navigation .main-nav ul li.sa-lang-switch a:focus {
	color: var(--sa-signal);
}

/* Pulldowns (Plugins, Lokale KI, Handbücher) */
.main-navigation:not(.toggled) ul ul {
	width: 372px;
	padding: 8px;
	border: 1px solid var(--sa-line);
	border-radius: 12px;
	background: var(--sa-white);
	box-shadow: 0 16px 40px rgba(11, 18, 32, 0.12);
}

.main-navigation .main-nav ul ul li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 12px;
	border-radius: 8px;
	font-size: 14px;
	line-height: 1.35;
	color: var(--sa-ink);
}

.main-navigation .main-nav ul ul li:not(.sa-menu-button):hover > a,
.main-navigation .main-nav ul ul li:not(.sa-menu-button):focus-within > a {
	background: var(--sa-fog);
	color: var(--sa-signal);
}

/* Im Pulldown nur die aktuelle Seite hervorheben: nicht die Übersicht darüber („Alle Plugins“)
   und nicht die Sprungmarken, die für WordPress alle als aktuell gelten */
.main-navigation .main-nav ul ul li.current-page-ancestor:not(:hover) > a,
.main-navigation .main-nav ul ul li.menu-item-type-custom.current-menu-item:not(:hover) > a {
	color: var(--sa-ink);
}

/* Erster Punkt „Alle …“ als Übersicht, durch eine Linie abgesetzt */
.main-navigation .main-nav ul ul li.sa-menu-overview {
	margin-bottom: 6px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--sa-line);
}

.main-navigation .main-nav ul ul li.sa-menu-overview > a {
	font-weight: 600;
}

.sa-menu-tag {
	flex: 0 0 auto;
	padding: 2px 8px;
	border: 1px solid var(--sa-line);
	border-radius: 999px;
	background: var(--sa-fog);
	font-family: var(--sa-mono);
	font-size: 11px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--sa-slate);
}

.main-navigation .main-nav ul ul li.sa-menu-soon > a {
	color: var(--sa-slate);
}

.main-navigation .menu-toggle,
.site-header .mobile-menu-control-wrapper .menu-toggle,
.site-header .mobile-menu-control-wrapper .menu-toggle:hover,
.site-header .mobile-menu-control-wrapper .menu-toggle:focus {
	color: var(--sa-ink);
	background: transparent;
	font-weight: 600;
}

@media (max-width: 768px) {
	.main-navigation .main-nav ul li a {
		line-height: 48px;
	}

	.main-navigation .main-nav ul li.sa-menu-button > a {
		margin: 8px 14px 16px;
	}

	/* Im Handy-Menü klappen die Unterpunkte eingerückt auf */
	.main-navigation.toggled .main-nav ul ul {
		padding: 0 0 8px 14px;
		border-bottom: 0;
		background: transparent;
	}

	.main-navigation.toggled .main-nav ul ul li a {
		line-height: 1.35;
		padding-top: 10px;
		padding-bottom: 10px;
	}
}

.sa-group[id] {
	scroll-margin-top: 24px;
}

/* ---------- Seitenrahmen ---------- */

.site-content {
	padding: 0;
}

.sa-landing .site-content,
.sa-landing .site.grid-container {
	max-width: none;
}

.sa-landing .inside-article,
.sa-landing.one-container .site-content {
	padding: 0;
}

.sa-landing .entry-content,
.sa-landing .entry-content:not(:first-child) {
	margin-top: 0;
}

.sa-landing .site-main {
	margin: 0;
}

.sa-landing .entry-content > * {
	margin-bottom: 0;
}

/* Gewöhnliche Seiten (Impressum, Datenschutz …) */
body:not(.sa-landing) .site-content {
	max-width: 880px;
	margin: 0 auto;
	padding: 64px var(--sa-gutter) 96px;
}

body:not(.sa-landing) .inside-article {
	padding: 0;
}

body:not(.sa-landing) .entry-title {
	font-size: clamp(32px, 4vw, 44px);
	letter-spacing: -0.03em;
}

/* ---------- Abschnitte ---------- */

.sa-section {
	padding: var(--sa-section) var(--sa-gutter);
}

.sa-section--tight {
	padding-top: 72px;
	padding-bottom: 72px;
}

.sa-section--top {
	padding-top: 40px;
}

.sa-section--fog {
	background: var(--sa-fog);
	border-top: 1px solid var(--sa-line);
	border-bottom: 1px solid var(--sa-line);
}

.sa-section--line {
	border-top: 1px solid var(--sa-line);
}

.sa-section--grid {
	border-bottom: 1px solid var(--sa-line);
	background-image:
		linear-gradient(#eef1f5 1px, transparent 1px),
		linear-gradient(90deg, #eef1f5 1px, transparent 1px);
	background-size: 48px 48px;
}

.sa-section--dark {
	background: var(--sa-ink);
	color: var(--sa-footer-text);
}

.sa-section--dark h2,
.sa-section--dark h3 {
	color: var(--sa-white);
}

.sa-section--dark .sa-eyebrow {
	color: var(--sa-signal-on-dark);
}

.sa-section--dark .sa-lead,
.sa-section--dark .sa-text {
	color: var(--sa-footer-text);
}

.sa-inner {
	max-width: var(--sa-max);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.sa-inner--narrow {
	max-width: 880px;
}

.sa-inner--wide-gap {
	gap: 88px;
}

.sa-stack {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 720px;
}

.sa-stack--loose {
	gap: 22px;
}

.sa-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
}

.sa-split {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 40px 56px;
}

.sa-split--top {
	align-items: flex-start;
}

.sa-split--reverse {
	flex-wrap: wrap-reverse;
}

.sa-split__text {
	flex: 1 1 380px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.sa-split__media {
	flex: 1.3 1 480px;
	min-width: 0;
}

/* Kopf ohne Screenshot: Zeilen nicht über die ganze Breite laufen lassen */
.sa-split > .sa-split__text:only-child {
	max-width: 760px;
}

/* ---------- Typografie-Bausteine ---------- */

.sa-eyebrow {
	margin: 0;
	font-family: var(--sa-mono);
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sa-signal);
}

.sa-h1 {
	margin: 0;
	font-size: clamp(40px, 5.2vw, 60px);
	line-height: 1.04;
	font-weight: 700;
	letter-spacing: -0.035em;
}

/* Startseite: etwas kleiner und ausgewogen umbrochen, damit „nachvollziehbar“ nicht allein steht */
.home .sa-h1 {
	font-size: clamp(36px, 3.4vw, 48px);
	text-wrap: balance;
}

.sa-h1--product {
	font-size: clamp(44px, 6vw, 64px);
	line-height: 1;
	letter-spacing: -0.04em;
}

.sa-h2 {
	margin: 0;
	font-size: clamp(30px, 3.6vw, 40px);
	line-height: 1.1;
	font-weight: 700;
	letter-spacing: -0.03em;
}

.sa-h3 {
	margin: 0;
	font-size: clamp(24px, 2.6vw, 30px);
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.sa-h4 {
	margin: 0;
	font-size: 20px;
	line-height: 1.3;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.sa-claim {
	margin: 0;
	font-size: clamp(19px, 2vw, 22px);
	line-height: 1.45;
	font-weight: 500;
	letter-spacing: -0.01em;
}

.sa-lead {
	margin: 0;
	font-size: 19px;
	line-height: 1.55;
	color: var(--sa-slate);
}

.sa-text {
	margin: 0;
	font-size: 16px;
	line-height: 1.65;
	color: var(--sa-slate);
}

.sa-label {
	margin: 0;
	font-family: var(--sa-mono);
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--sa-slate);
}

.sa-note {
	margin: 0;
	font-family: var(--sa-mono);
	font-size: 13px;
	color: var(--sa-slate);
}

.sa-link {
	font-weight: 600;
	font-size: 16px;
	text-decoration: none;
}

/* ---------- Schaltflächen und Etiketten ---------- */

.sa-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.sa-button {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 0 22px;
	border-radius: 8px;
	border: 1px solid var(--sa-signal);
	background: var(--sa-signal);
	color: var(--sa-white);
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.sa-button:hover,
.sa-button:focus {
	background: var(--sa-signal-dark);
	border-color: var(--sa-signal-dark);
	color: var(--sa-white);
}

.sa-button--ghost {
	background: var(--sa-white);
	border-color: var(--sa-line-strong);
	color: var(--sa-ink);
}

.sa-button--ghost:hover,
.sa-button--ghost:focus {
	background: var(--sa-fog);
	border-color: var(--sa-slate);
	color: var(--sa-ink);
}

.sa-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.sa-tag {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 99px;
	border: 1px solid var(--sa-line-strong);
	font-family: var(--sa-mono);
	font-size: 12px;
	color: var(--sa-slate);
}

.sa-tag--accent,
.sa-badge {
	border-color: transparent;
	background: var(--sa-signal-soft);
	color: var(--sa-signal-dark);
}

.sa-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 99px;
	font-family: var(--sa-mono);
	font-size: 12px;
	letter-spacing: 0.04em;
}

.sa-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 0;
	font-family: var(--sa-mono);
	font-size: 13px;
	color: var(--sa-slate);
}

.sa-live::before {
	content: '';
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 8px;
	border-radius: 50%;
	background: var(--sa-ok);
	vertical-align: 1px;
}

/* ---------- Bilder ---------- */

.sa-frame {
	border: 1px solid var(--sa-line-strong);
	border-radius: var(--sa-radius);
	background: var(--sa-white);
	overflow: hidden;
}

.sa-frame__bar {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding: 10px 16px;
	border-bottom: 1px solid var(--sa-line);
	background: var(--sa-fog);
	font-family: var(--sa-mono);
	font-size: 12px;
	color: var(--sa-slate);
}

.sa-frame img,
.sa-shot img,
img.sa-shot {
	display: block;
	width: 100%;
	height: auto;
}

.sa-shot img,
img.sa-shot {
	border: 1px solid var(--sa-line);
	border-radius: var(--sa-radius);
	background: var(--sa-white);
}

.sa-shot,
.entry-content .sa-shot {
	margin: 0;
}

/* Schmale App-Fenster im Hochformat (Local Connector): nicht auf Spaltenbreite aufziehen */
.sa-frame--app {
	max-width: 420px;
	margin-inline: auto;
}

img.sa-shot--app {
	max-width: 400px;
	margin-inline: auto;
}

.sa-shot figcaption,
.sa-shot .wp-element-caption {
	margin: 10px 0 0;
	font-family: var(--sa-mono);
	font-size: 12px;
	color: var(--sa-slate);
	text-align: left;
}

.sa-shots {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.sa-shots__main {
	flex: 2 1 520px;
	min-width: 0;
}

.sa-shots__side {
	flex: 1 1 320px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* ---------- Raster und Karten ---------- */

.sa-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: 16px;
}

.sa-grid--small {
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
	gap: 12px;
}

.sa-grid--loose {
	gap: 32px 40px;
}

.sa-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 24px;
	border: 1px solid var(--sa-line);
	border-radius: var(--sa-radius);
	background: var(--sa-white);
	color: var(--sa-ink);
	text-decoration: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

a.sa-card:hover,
a.sa-card:focus {
	border-color: var(--sa-signal);
	box-shadow: 0 1px 0 var(--sa-signal);
	color: var(--sa-ink);
}

.sa-card > .sa-label {
	text-transform: none; /* Versionsnummern bleiben klein: v1.22 */
}

.sa-card--dashed {
	border-style: dashed;
	border-color: var(--sa-line-strong);
	background: var(--sa-fog);
}

.sa-card__title {
	margin: 0;
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

.sa-card__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--sa-slate);
}

.sa-card__more {
	margin: auto 0 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--sa-signal);
}

.sa-mini {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 18px 20px;
	border: 1px solid var(--sa-line);
	border-radius: 10px;
}

.sa-mini__title {
	margin: 0;
	font-weight: 600;
	font-size: 16px;
}

.sa-mini__text {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--sa-slate);
}

/* Plugin-Gruppen nach Aufgaben */
.sa-groups {
	display: flex;
	flex-direction: column;
	gap: 48px;
}

.sa-group {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

.sa-group__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px 24px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--sa-ink);
}

.sa-group__title {
	margin: 0;
	font-size: 24px;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.sa-group__note {
	margin: 0;
	font-family: var(--sa-mono);
	font-size: 13px;
	color: var(--sa-slate);
}

.sa-groups__pair {
	display: flex;
	flex-wrap: wrap;
	gap: 48px 16px;
}

.sa-groups__pair > .sa-group:first-child {
	flex: 1 1 360px;
}

.sa-groups__pair > .sa-group:last-child {
	flex: 2 1 620px;
}

.sa-groups__pair .sa-card {
	flex: 1 1 auto;
}

/* Grundsätze mit Linie oben */
.sa-principle {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-top: 20px;
	border-top: 2px solid var(--sa-ink);
}

.sa-principle__num {
	margin: 0;
	font-family: var(--sa-mono);
	font-size: 13px;
	color: var(--sa-signal);
}

.sa-principle__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--sa-slate);
}

/* Chips (KI-Anbieter u. a.) */
.sa-panel {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 28px;
	border: 1px solid var(--sa-line);
	border-radius: var(--sa-radius);
	font-family: var(--sa-mono);
	font-size: 14px;
}

.sa-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.sa-chip {
	margin: 0;
	padding: 8px 14px;
	border-radius: 8px;
	border: 1px solid var(--sa-line);
	background: var(--sa-fog);
	font-family: var(--sa-mono);
	font-size: 14px;
}

.sa-chip--accent {
	background: var(--sa-signal-soft);
	border-color: var(--sa-signal-line);
	color: var(--sa-signal-dark);
}

/* ---------- Plugin-Seite ---------- */

.sa-crumbs {
	margin: 0;
	font-family: var(--sa-mono);
	font-size: 13px;
	color: var(--sa-slate);
}

.sa-crumbs a {
	color: var(--sa-slate);
	text-decoration: none;
}

.sa-crumbs a:hover {
	color: var(--sa-signal);
}

.sa-subnav {
	border-bottom: 1px solid var(--sa-line);
	background: var(--sa-white);
	padding: 0 var(--sa-gutter);
	position: sticky;
	top: 0;
	z-index: 20;
}

.admin-bar .sa-subnav {
	top: 32px;
}

.sa-subnav__inner {
	max-width: var(--sa-max);
	margin: 0 auto;
	display: flex;
	gap: 4px 28px;
	overflow-x: auto;
	scrollbar-width: none;
}

.sa-subnav a {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	min-height: 52px;
	font-family: var(--sa-mono);
	font-size: 13px;
	color: var(--sa-ink);
	text-decoration: none;
}

.sa-subnav a:hover,
.sa-subnav a:focus {
	color: var(--sa-signal);
}

[id] {
	scroll-margin-top: 72px;
}

.sa-specs {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--sa-line);
}

.sa-spec {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 24px;
	padding: 16px 0;
	border-bottom: 1px solid var(--sa-line);
}

.sa-spec__key {
	flex: 0 0 180px;
	margin: 0;
	font-family: var(--sa-mono);
	font-size: 13px;
	color: var(--sa-slate);
}

.sa-spec__value {
	flex: 1 1 280px;
	margin: 0;
	font-size: 15px;
}

.sa-langs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 10px;
}

.sa-lang {
	display: flex;
	justify-content: space-between;
	align-items: center;
	min-height: 48px;
	padding: 0 16px;
	border-radius: 8px;
	border: 1px solid #2b3850;
	color: var(--sa-white);
	font-size: 15px;
	text-decoration: none;
}

.sa-lang::after {
	content: 'PDF';
	font-family: var(--sa-mono);
	font-size: 11px;
	color: var(--sa-footer-muted);
}

.sa-lang:hover,
.sa-lang:focus {
	border-color: var(--sa-signal-on-dark);
	color: var(--sa-white);
}

.sa-langs--light .sa-lang {
	border-color: var(--sa-line-strong);
	color: var(--sa-ink);
}

.sa-langs--light .sa-lang::after {
	color: var(--sa-slate);
}

.sa-langs--light .sa-lang:hover,
.sa-langs--light .sa-lang:focus {
	border-color: var(--sa-signal);
	color: var(--sa-signal);
}

.sa-section--dark .sa-link {
	color: var(--sa-signal-on-dark);
}

/* Ablauf in Schritten */
.sa-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
	gap: 16px;
}

.sa-step {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 22px;
	border: 1px solid var(--sa-line);
	border-radius: var(--sa-radius);
	background: var(--sa-white);
}

.sa-step__num {
	margin: 0;
	font-family: var(--sa-mono);
	font-size: 13px;
	color: var(--sa-signal);
}

/* Vollständige Funktionsliste */
.sa-featuregroup {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-top: 18px;
	border-top: 2px solid var(--sa-ink);
}

.entry-content ul.sa-checklist,
ul.sa-checklist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

ul.sa-checklist li {
	position: relative;
	margin: 0;
	padding-left: 26px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--sa-slate);
}

ul.sa-checklist li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 3px;
	width: 16px;
	height: 16px;
	border-radius: 4px;
	background: var(--sa-signal-soft);
}

ul.sa-checklist li::after {
	content: '';
	position: absolute;
	left: 5px;
	top: 6px;
	width: 5px;
	height: 8px;
	border: solid var(--sa-signal);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* Galerie (Kern-Galerie mit Lightbox) */
/* Spezifischer als die Layout-Klasse .wp-block-gallery-N, die den Abstand sonst auf 0.5em setzt. */
.entry-content .wp-block-gallery.has-nested-images.sa-gallery {
	--wp--style--unstable-gallery-gap: 20px;
	gap: 20px;
	margin: 0;
}

.wp-block-gallery.sa-gallery.has-nested-images figure.wp-block-image:not(#individual-image) img {
	flex: 0 0 auto;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	/* contain statt cover: Die Lightbox übernimmt die Einpassung und zeigt sonst nur den Ausschnitt. */
	object-fit: contain;
	box-sizing: border-box;
	padding: 10px;
	border: 1px solid var(--sa-line);
	border-radius: 10px;
	background: var(--sa-fog);
}

.wp-block-gallery.sa-gallery--tall.has-nested-images figure.wp-block-image:not(#individual-image) img {
	aspect-ratio: 3 / 4;
}

/* Letzte Reihe nicht aufziehen: Hochformat-Kacheln bleiben gleich groß */
.wp-block-gallery.sa-gallery--tall.has-nested-images figure.wp-block-image:not(#individual-image) {
	flex-grow: 0;
}

.wp-block-gallery.sa-gallery.has-nested-images figure.wp-block-image figcaption {
	position: static;
	padding: 10px 0 0;
	background: none;
	color: var(--sa-ink);
	font-size: 14px;
	font-weight: 600;
	text-align: left;
	text-shadow: none;
	max-height: none;
	overflow: visible;
}

.wp-block-gallery.sa-gallery.has-nested-images figure.wp-block-image:has(figcaption)::before {
	display: none;
}

.wp-block-gallery.sa-gallery.has-nested-images figure.wp-block-image {
	flex-direction: column;
}

/* Häufige Fragen (Kern-Details) */
.sa-faqs {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--sa-line);
}

.wp-block-details.sa-faq {
	margin: 0;
	border-bottom: 1px solid var(--sa-line);
}

.wp-block-details.sa-faq summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	min-height: 64px;
	font-size: 18px;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

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

.wp-block-details.sa-faq summary::after {
	content: '+';
	flex: 0 0 auto;
	font-size: 24px;
	font-weight: 400;
	color: var(--sa-signal);
	transition: transform 0.15s ease;
}

.wp-block-details.sa-faq[open] summary::after {
	transform: rotate(45deg);
}

.wp-block-details.sa-faq p {
	margin: 0 0 20px;
	font-size: 16px;
	line-height: 1.65;
	color: var(--sa-slate);
}

/* Kontaktformular (Forminator ohne eigene Gestaltung) */
.sa-form .forminator-ui {
	margin: 0;
}

.sa-form .forminator-row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 0 0 18px;
}

.sa-form .forminator-col {
	flex: 1 1 220px;
	min-width: 0;
	padding: 0;
}

.sa-form .forminator-col-12 {
	flex-basis: 100%;
}

.sa-form .forminator-label {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--sa-ink);
}

.sa-form .forminator-input,
.sa-form .forminator-textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	border: 1px solid var(--sa-line-strong);
	border-radius: 8px;
	background: var(--sa-white);
	color: var(--sa-ink);
	font: inherit;
	font-size: 16px;
}

.sa-form .forminator-textarea {
	min-height: 170px;
	resize: vertical;
}

.sa-form .forminator-input:focus,
.sa-form .forminator-textarea:focus {
	border-color: var(--sa-signal);
	outline: 2px solid var(--sa-signal-soft);
	outline-offset: 0;
}

.sa-form .forminator-checkbox {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 14px;
	line-height: 1.55;
	color: var(--sa-slate);
}

.sa-form .forminator-button-submit {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 0 22px;
	border: 0;
	border-radius: 8px;
	background: var(--sa-signal);
	color: var(--sa-white);
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
}

.sa-form .forminator-button-submit:hover,
.sa-form .forminator-button-submit:focus {
	background: var(--sa-signal-dark);
}

.sa-form .forminator-error-message {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	color: #b42318;
}

.sa-form .forminator-response-message:not(:empty) {
	margin-bottom: 18px;
	padding: 12px 16px;
	border-radius: 8px;
	background: var(--sa-fog);
	font-size: 15px;
}

/* Platzhalter für Inhalte, die noch folgen */
.sa-todo {
	margin: 0;
	padding: 16px 20px;
	border: 1px dashed var(--sa-line-strong);
	border-radius: 10px;
	background: var(--sa-fog);
	font-family: var(--sa-mono);
	font-size: 13px;
	color: var(--sa-slate);
}

/* ---------- KI-Schicht (interaktiv, [schall_ai_layer]) ---------- */

.sa-layer {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.sa-layer [hidden] {
	display: none !important;
}

.sa-layer__modes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
}

.sa-layer__modes-label {
	margin: 0;
	font-family: var(--sa-mono);
	font-size: 13px;
	color: var(--sa-slate);
}

.sa-layer__switch {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 4px;
	border: 1px solid var(--sa-line);
	border-radius: 10px;
	background: var(--sa-white);
}

.sa-layer button {
	appearance: none;
	margin: 0;
	font-family: var(--sa-font);
	cursor: pointer;
}

.sa-layer button:focus-visible {
	outline: 2px solid var(--sa-signal);
	outline-offset: 2px;
}

.sa-layer__switch button {
	padding: 9px 14px;
	border: 0;
	border-radius: 7px;
	background: transparent;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--sa-slate);
}

.sa-layer__switch button:hover,
.sa-layer__switch button:focus {
	background: var(--sa-fog);
	color: var(--sa-ink);
}

.sa-layer__switch button[aria-pressed="true"] {
	background: var(--sa-ink);
	color: var(--sa-white);
}

/* Bühne: gestapelt; ab 960 px nebeneinander mit gezeichneten Linien (JS liest --sa-layer-flow) */
.sa-layer__stage {
	--sa-layer-flow: column;
	position: relative;
	display: grid;
	gap: 36px;
}

.sa-layer__wires {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}

.sa-layer__sources,
.sa-layer__kit,
.sa-layer__targets {
	position: relative;
	z-index: 1;
}

.sa-layer__label {
	margin: 0 0 10px;
	font-family: var(--sa-mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sa-slate);
}

.sa-layer__small {
	margin: 0;
	font-size: 13px;
	line-height: 1.45;
	color: var(--sa-slate);
}

.sa-layer__plugins {
	display: grid;
	gap: 6px;
}

.sa-layer__plugin {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px 10px;
	width: 100%;
	padding: 9px 12px;
	border: 1px solid var(--sa-line);
	border-radius: 9px;
	background: var(--sa-white);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.25;
	color: var(--sa-ink);
	text-align: left;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.sa-layer button.sa-layer__plugin:hover,
.sa-layer button.sa-layer__plugin:focus {
	border-color: var(--sa-line-strong);
	background: var(--sa-white);
	color: var(--sa-ink);
}

.sa-layer button.sa-layer__plugin[aria-pressed="true"] {
	border-color: var(--sa-signal);
	background: var(--sa-signal-soft);
}

.sa-layer__plugin--later {
	border-style: dashed;
	color: var(--sa-slate);
}

.sa-layer__plugin--all {
	flex-direction: column;
	align-items: flex-start;
	padding: 16px;
}

.sa-layer__name {
	font-weight: 600;
}

.sa-layer__badge {
	display: none;
	padding: 2px 8px;
	border-radius: 999px;
	font-family: var(--sa-mono);
	font-size: 11px;
	font-weight: 400;
	line-height: 1.4;
}

.sa-layer__plugin[data-route="cloud"] .sa-layer__badge--cloud,
.sa-layer__plugin[data-route="local"] .sa-layer__badge--local,
.sa-layer__badge--later {
	display: inline-block;
}

.sa-layer__badge--cloud {
	background: var(--sa-signal-soft);
	color: var(--sa-signal-dark);
}

.sa-layer__badge--local {
	background: var(--sa-local-soft);
	color: var(--sa-local);
}

.sa-layer__badge--later {
	border: 1px dashed var(--sa-line-strong);
	color: var(--sa-slate);
}

/* Das Kit: die gemeinsame Schicht als dunkle Karte */
.sa-layer__kit {
	padding: 22px;
	border-radius: 14px;
	background: var(--sa-ink);
	color: var(--sa-white);
	box-shadow: 0 18px 40px rgba(11, 18, 32, 0.18);
}

.sa-layer__kit .sa-layer__label {
	color: var(--sa-signal-on-dark);
}

.sa-layer__kit-title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 4px;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

.sa-layer__kit-title .sa-brand__mark {
	color: var(--sa-signal-on-dark);
}

.sa-layer__kit .sa-layer__small {
	color: var(--sa-footer-muted);
}

.sa-layer__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.sa-layer__pills li {
	margin: 0;
	padding: 5px 9px;
	border: 1px solid var(--sa-footer-line);
	border-radius: 7px;
	font-family: var(--sa-mono);
	font-size: 12px;
	line-height: 1.3;
	color: var(--sa-footer-link);
}

/* Ziele: Cloud-Anbieter und eigener Computer */
.sa-layer__targets {
	display: grid;
	gap: 20px;
}

.sa-layer__target {
	padding: 18px;
	border: 1px solid var(--sa-line);
	border-radius: 12px;
	background: var(--sa-white);
	transition: opacity 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.sa-layer.is-ready .sa-layer__target {
	opacity: 0.45;
}

.sa-layer.is-ready .sa-layer__target.is-active {
	opacity: 1;
}

.sa-layer__target--cloud.is-active {
	border-color: var(--sa-signal-line);
	box-shadow: 0 0 0 4px var(--sa-signal-soft);
}

.sa-layer__target--local.is-active {
	border-color: var(--sa-local-line);
	box-shadow: 0 0 0 4px var(--sa-local-soft);
}

.sa-layer__target--local .sa-layer__label {
	color: var(--sa-local);
}

.sa-layer__target--cloud .sa-layer__label {
	color: var(--sa-signal-dark);
}

.sa-layer__device {
	margin: 0 0 10px;
	font-size: 15px;
	font-weight: 600;
}

.sa-layer__device span {
	margin-left: 6px;
	font-family: var(--sa-mono);
	font-size: 11px;
	font-weight: 400;
	color: var(--sa-slate);
}

.sa-layer__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 10px;
	padding: 0;
	list-style: none;
}

.sa-layer__chips li {
	margin: 0;
	padding: 5px 9px;
	border: 1px solid var(--sa-line);
	border-radius: 7px;
	background: var(--sa-fog);
	font-family: var(--sa-mono);
	font-size: 12px;
	line-height: 1.3;
}

/* Linien: Cloud blau, lokal grün; aktive Wege laufen als Signal */
.sa-wire {
	fill: none;
	stroke: var(--sa-line);
	stroke-width: 1.5;
	transition: stroke 0.2s ease;
}

.sa-wire.is-active {
	stroke-dasharray: 3 7;
	animation: sa-flow 1.4s linear infinite;
}

.sa-wire--cloud.is-active,
.sa-wire--mix.is-active {
	stroke: #a3b3ff;
}

.sa-wire--local.is-active {
	stroke: #86c99d;
}

.sa-wire--cloud.is-selected,
.sa-wire--mix.is-selected {
	stroke: var(--sa-signal);
	stroke-width: 2.5;
}

.sa-wire--local.is-selected {
	stroke: var(--sa-local);
	stroke-width: 2.5;
}

.sa-wire--later {
	stroke: var(--sa-line-strong);
	stroke-dasharray: 2 6;
}

@keyframes sa-flow {
	to {
		stroke-dashoffset: -20;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sa-wire.is-active {
		animation: none;
	}
}

/* Erklärung unter der Grafik */
.sa-layer__explain {
	display: grid;
	gap: 20px 48px;
	padding-top: 24px;
	border-top: 1px solid var(--sa-line);
}

.sa-layer__captions p {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--sa-slate);
}

.sa-layer__captions strong {
	color: var(--sa-ink);
}

.sa-layer__detail {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.sa-layer__detail p {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--sa-slate);
}

.sa-layer__detail .sa-layer__detail-title {
	font-size: 18px;
	font-weight: 700;
	color: var(--sa-ink);
}

.sa-layer__detail .sa-layer__status {
	font-family: var(--sa-mono);
	font-size: 12px;
}

.sa-layer__status::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 8px;
	border-radius: 50%;
	background: var(--sa-line-strong);
	vertical-align: 1px;
}

.sa-layer__status--proven::before {
	background: var(--sa-local);
}

.sa-layer__status--kit::before {
	background: var(--sa-local-line);
}

.sa-layer__route-switch {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	color: var(--sa-slate);
}

.sa-layer__route-switch span {
	margin-right: 4px;
}

.sa-layer__route-switch button {
	padding: 6px 11px;
	border: 1px solid var(--sa-line);
	border-radius: 7px;
	background: var(--sa-white);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--sa-ink);
}

.sa-layer__route-switch button:hover,
.sa-layer__route-switch button:focus {
	border-color: var(--sa-line-strong);
	background: var(--sa-white);
	color: var(--sa-ink);
}

.sa-layer__route-switch button[aria-pressed="true"] {
	border-color: var(--sa-ink);
	background: var(--sa-ink);
	color: var(--sa-white);
}

.sa-layer__more {
	font-size: 14px;
	font-weight: 600;
	color: var(--sa-signal);
	text-decoration: none;
}

.sa-layer__more:hover,
.sa-layer__more:focus {
	color: var(--sa-signal-dark);
	text-decoration: underline;
}

/* Gestapelt: Pfeile statt Linien */
.sa-layer__kit::before,
.sa-layer__targets::before {
	content: "↓";
	position: absolute;
	top: -30px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 18px;
	line-height: 1;
	color: var(--sa-line-strong);
}

@media (min-width: 600px) and (max-width: 959px) {
	.sa-layer__plugins {
		grid-template-columns: 1fr 1fr;
	}

	.sa-layer__targets {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 960px) {
	.sa-layer__stage {
		--sa-layer-flow: row;
		grid-template-columns: minmax(210px, 250px) minmax(250px, 280px) minmax(240px, 300px);
		justify-content: space-between;
		align-items: center;
		column-gap: 72px;
	}

	.sa-layer__kit::before,
	.sa-layer__targets::before {
		content: none;
	}

	.sa-layer--full .sa-layer__explain {
		grid-template-columns: 1fr 1fr;
	}
}

/* Zahlenleiste (Über Schall AI) */
@media (min-width: 700px) {
	.sa-stack > .sa-stats {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.sa-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px 32px;
	padding-top: 28px;
	border-top: 1px solid var(--sa-line);
}

.sa-stat__num {
	margin: 0;
	font-size: clamp(40px, 5vw, 56px);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1;
	color: var(--sa-ink);
	font-variant-numeric: tabular-nums;
}

.sa-stat__label {
	margin: 10px 0 0;
	max-width: 24ch;
	font-size: 14px;
	line-height: 1.5;
	color: var(--sa-slate);
}


/* Wer dahintersteht (Über Schall AI) */
.sa-person {
	display: grid;
	gap: 40px 64px;
	margin-top: 24px;
}

.sa-person__aside {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

img.sa-person__photo {
	display: block;
	width: 200px;
	height: 200px;
	margin-bottom: 8px;
	border: 1px solid var(--sa-line);
	border-radius: 50%;
	background: var(--sa-white);
	object-fit: cover;
	box-shadow: 0 12px 32px rgba(11, 18, 32, 0.1);
}

.sa-person__name {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.sa-person__role {
	margin: 0;
	font-family: var(--sa-mono);
	font-size: 13px;
	line-height: 1.5;
	color: var(--sa-slate);
}

.sa-person__aside .sa-chips {
	margin-top: 8px;
}

.sa-person__aside .sa-chip {
	padding: 6px 10px;
	background: var(--sa-white);
	font-size: 12px;
}

.sa-person__text {
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-width: 720px;
}

.sa-person__text .sa-h2 {
	margin-bottom: 4px;
}

.sa-quote {
	margin: 12px 0 4px;
	padding: 4px 0 4px 24px;
	border-left: 3px solid var(--sa-signal);
}

.sa-quote__text {
	margin: 0;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.01em;
	color: var(--sa-ink);
}

.sa-quote__by {
	margin: 10px 0 0;
	font-family: var(--sa-mono);
	font-size: 12px;
	color: var(--sa-slate);
}

.sa-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
}

@media (min-width: 900px) {
	.sa-person {
		grid-template-columns: 260px minmax(0, 1fr);
	}
}

/* ---------- Plugin-Icons (inc/icons.php) ---------- */

.sa-icon {
	--sa-icon-fg: var(--sa-signal);
	--sa-icon-bg: var(--sa-signal-soft);
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: 13px;
	background: var(--sa-icon-bg);
	color: var(--sa-icon-fg);
}

.sa-icon svg {
	width: 28px;
	height: 28px;
	fill: none;
	stroke-width: 1.75;
}

.sa-icon--blue { --sa-icon-fg: #2347f0; --sa-icon-bg: #eaeeff; }
.sa-icon--rose { --sa-icon-fg: #be185d; --sa-icon-bg: #fde7f1; }
.sa-icon--violet { --sa-icon-fg: #6d28d9; --sa-icon-bg: #f0eafe; }
.sa-icon--orange { --sa-icon-fg: #c2410c; --sa-icon-bg: #fff0e5; }
.sa-icon--green { --sa-icon-fg: #15803d; --sa-icon-bg: #e9f6ee; }

.sa-icon--lg {
	width: 64px;
	height: 64px;
	border-radius: 17px;
}

.sa-icon--lg svg {
	width: 38px;
	height: 38px;
	stroke-width: 1.6;
}

.sa-icon--sm {
	width: 26px;
	height: 26px;
	border-radius: 7px;
}

.sa-icon--sm svg {
	width: 16px;
	height: 16px;
	stroke-width: 2;
}

/* Karte: Icon oben links, Version oder „Demnächst“ oben rechts */
.sa-card:has(> .sa-card__icon) {
	position: relative;
}

.sa-card > .sa-card__icon + .sa-label {
	position: absolute;
	top: 24px;
	right: 24px;
	margin: 0;
}

/* Kopf einer Plugin-Seite: großes Icon neben dem Titel */
.sa-product-title {
	display: flex;
	align-items: center;
	gap: 20px;
}

@media (max-width: 600px) {
	.sa-product-title {
		gap: 14px;
	}

	.sa-product-title .sa-icon--lg {
		width: 52px;
		height: 52px;
		border-radius: 14px;
	}

	.sa-product-title .sa-icon--lg svg {
		width: 30px;
		height: 30px;
	}
}

/* Pulldown: Icon, Name, rechts der Hinweis */
.main-navigation .main-nav ul ul li a .sa-menu-name {
	flex: 1 1 auto;
}

.main-navigation .main-nav ul ul li a .sa-icon {
	margin-right: -2px;
}

.main-navigation .main-nav ul ul li.sa-menu-soon > a .sa-icon {
	opacity: 0.75;
}

/* ---------- Fußbereich ---------- */

.site-footer {
	background: var(--sa-ink);
}

.sa-footer {
	color: var(--sa-footer-text);
	padding: 64px var(--sa-gutter) 40px;
}

.sa-footer__inner {
	max-width: var(--sa-max);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.sa-footer__top {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 40px;
}

.sa-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 320px;
}

.sa-footer__brand p {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
}

.sa-brand--light,
.sa-brand--light:hover {
	color: var(--sa-white);
}

.sa-brand--light .sa-brand__ai {
	color: var(--sa-signal-on-dark);
}

.sa-footer__columns {
	display: flex;
	flex-wrap: wrap;
	gap: 40px 64px;
}

.sa-footer__label {
	margin: 0 0 12px;
	font-family: var(--sa-mono);
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--sa-footer-muted);
}

.sa-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 14px;
}

.sa-footer__menu a {
	color: var(--sa-footer-link);
	text-decoration: none;
}

.sa-footer__menu a:hover,
.sa-footer__menu a:focus {
	color: var(--sa-white);
	text-decoration: underline;
}

.sa-footer__legal {
	margin: 0;
	padding-top: 24px;
	border-top: 1px solid var(--sa-footer-line);
	font-family: var(--sa-mono);
	font-size: 12px;
	color: var(--sa-footer-muted);
}

/* ---------- Kleine Bildschirme ---------- */

@media (max-width: 768px) {
	:root {
		--sa-section: 64px;
	}

	.sa-section--tight {
		padding-top: 56px;
		padding-bottom: 56px;
	}

	.sa-spec__key {
		flex-basis: 100%;
	}

	.admin-bar .sa-subnav {
		top: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
	}
}