/*
 * Tounsi – Komponenten-CSS („Atelier Carthage").
 * Farben ausschliesslich ueber die theme.json-Presets (--wp--preset--color--*).
 * Reihenfolge: Basis · Header · Hero · Bausteine · Magazin · Footer · A11y.
 */

/* ── Basis ─────────────────────────────────────────────────────────────── */

:root {
	--tounsi-radius-hero: 24px 24px 80px 24px;
	--tounsi-radius-card: 18px;
	--tounsi-shadow-hero: 0 12px 24px -6px rgba(201, 90, 60, 0.10);
	--tounsi-gutter: clamp(1rem, 4vw, 2.25rem);
	--tounsi-zellige: url("../icons/zellige.svg");
}

html {
	scroll-behavior: smooth;
	overflow-x: hidden;
}

body {
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img {
	max-width: 100%;
	height: auto;
}

.tounsi-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-soft);
	margin: 0 0 0.25rem;
}

.tounsi-eyebrow--on-primary {
	display: inline-block;
	color: var(--wp--preset--color--accent-soft);
	background: var(--wp--preset--color--accent);
	border-radius: 999px;
	padding: 0.35rem 0.8rem;
}

.tounsi-khatim {
	display: inline-flex;
	color: var(--wp--preset--color--primary);
	line-height: 0;
}

.tounsi-wordmark {
	text-transform: uppercase;
}

.tounsi-page-title {
	max-width: 18ch;
}

.tounsi-lead {
	max-width: 46ch;
}

/* Sektionsköpfe laufen in der Wide-Spalte (bündig mit den Karten-Grids),
   die Zeilenlänge bleibt aber lesbar begrenzt. */
.tounsi-sectionhead > .wp-block-heading {
	max-width: 30ch;
}

.tounsi-sectionhead > p:not(.tounsi-eyebrow) {
	max-width: 56ch;
}

/* ── Header ────────────────────────────────────────────────────────────── */

.tounsi-header {
	position: sticky;
	top: 0;
	z-index: 40;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.tounsi-header__inner {
	max-width: 1200px;
	margin-inline: auto;
	padding: 0.75rem var(--tounsi-gutter);
	gap: 1rem;
}

.tounsi-brand {
	gap: 0.55rem;
}

.tounsi-header__nav {
	gap: clamp(0.75rem, 2vw, 1.75rem);
}

.tounsi-nav .wp-block-navigation-item__content {
	padding-block: 0.35rem;
}

.tounsi-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	padding: 1.5rem var(--tounsi-gutter) 3rem;
}

.tounsi-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	/* Core richtet die Overlay-Liste an der Desktop-Justierung (rechts) aus – im Overlay linksbündig. */
	--navigation-layout-justification-setting: flex-start;
	align-items: flex-start;
	gap: 1rem;
	padding-top: 2rem;
}

.tounsi-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: flex-start;
	gap: 0.25rem;
}

.tounsi-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1.75rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	padding-block: 0.5rem;
}

/* „App laden" erscheint nur im Mobile-Overlay (Desktop hat den Header-Button). */
.tounsi-nav .tounsi-nav__cta {
	display: none;
}

.tounsi-nav .wp-block-navigation__responsive-container.is-menu-open .tounsi-nav__cta {
	display: block;
	margin-top: 1.25rem;
}

.tounsi-nav .wp-block-navigation__responsive-container.is-menu-open .tounsi-nav__cta .wp-block-navigation-item__content {
	display: inline-block;
	background: var(--wp--preset--color--primary-strong);
	color: var(--wp--preset--color--surface);
	font-size: 1.125rem;
	padding: 0.85rem 1.4rem;
	border-radius: 14px;
	text-decoration: none;
}

.tounsi-nav .wp-block-navigation__responsive-container-open,
.tounsi-nav .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--ink);
}

@media (max-width: 599px) {
	.tounsi-header .tounsi-header__cta {
		display: none;
	}

	/* Unter 600 px klappt die Navigation zum Menue-Symbol zusammen – das gehoert
	   ganz nach rechts, der Sprachwechsel davor. */
	.tounsi-header__nav > .wp-block-tounsi-language-switcher {
		order: -1;
	}
}

/* ── Sprachhinweis (deutsche Startseite, inc/i18n.php) ─────────────────── */

.tounsi-langhint {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 0.55rem var(--tounsi-gutter);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-soft);
	font-size: 0.9375rem;
	line-height: 1.4;
}

/* display:flex oben wuerde das hidden-Attribut sonst aushebeln. */
.tounsi-langhint[hidden] {
	display: none;
}

.tounsi-langhint__text {
	margin: 0;
}

.tounsi-langhint__text a {
	color: var(--wp--preset--color--surface);
	font-weight: 600;
	text-underline-offset: 0.2em;
}

.tounsi-langhint__close {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
}

.tounsi-langhint__close:hover,
.tounsi-langhint__close:focus-visible {
	background: rgba(251, 245, 234, 0.14);
	outline: 2px solid var(--wp--preset--color--surface);
	outline-offset: 1px;
}

/* ── Hero ──────────────────────────────────────────────────────────────── */

.tounsi-hero__panel,
.tounsi-download__panel {
	position: relative;
	overflow: hidden;
	border-radius: var(--tounsi-radius-hero);
	box-shadow: var(--tounsi-shadow-hero);
	padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 3rem) clamp(2.5rem, 6vw, 4rem);
}

.tounsi-hero__panel::before,
.tounsi-download__panel::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--tounsi-zellige);
	background-size: 40px 40px;
	opacity: 0.16;
	pointer-events: none;
}

.tounsi-hero__watermark,
.tounsi-download__watermark {
	position: absolute;
	right: -7rem;
	bottom: -7rem;
	color: var(--wp--preset--color--surface);
	opacity: 0.16;
	line-height: 0;
	pointer-events: none;
}

.tounsi-brown-tab {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	margin: 0;
	padding: 0.5rem 1rem 0.5rem var(--tounsi-gutter);
	border-radius: 0 0 12px 0;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-soft);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	z-index: 2;
}

.tounsi-hero__columns,
.tounsi-hero__title,
.tounsi-hero__lead,
.tounsi-hero__download,
.tounsi-download__panel > :not(.tounsi-download__watermark) {
	position: relative;
	z-index: 1;
}

/* Download-Panel: Inhalte linksbuendig in einer gemeinsamen Spalte (wie im Hero),
   statt jedes Kind einzeln in der 720-px-Spalte zu zentrieren. */
.tounsi-download__panel > :where(:not(.alignfull):not(.tounsi-download__watermark)) {
	max-width: 40rem;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Auf Terracotta erben Ueberschriften und Eyebrows die Cream-Textfarbe. */
.tounsi-hero__panel :is(h1, h2, h3, h4, h5, h6),
.tounsi-download__panel :is(h1, h2, h3, h4, h5, h6) {
	color: inherit;
}

.tounsi-hero__title {
	max-width: 16ch;
	margin-block: 0 1rem;
}

/* Cream auf Terracotta erreicht 3.86:1 – daher Fliesstext hier immer >= 24px. */
.tounsi-hero__lead,
.tounsi-download__lead {
	font-size: clamp(1.5rem, 1.1rem + 1.2vw, 1.75rem);
	line-height: 1.4;
	max-width: 34ch;
	margin-block: 0 1.75rem;
}

/* Store-Badges direkt im Hero: der Sprungpunkt #download der Startseite. */
.tounsi-hero__download {
	position: relative;
	z-index: 1;
	margin-block-start: 1.5rem;
	scroll-margin-block-start: 5rem;
}

.tounsi-hero__media {
	display: flex;
	justify-content: center;
}

/* ── Phone-Frame ───────────────────────────────────────────────────────── */

.tounsi-phone {
	position: relative;
	width: min(380px, 78vw);
	padding: 8px;
	border-radius: 34px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	box-shadow: 0 18px 40px -18px rgba(35, 21, 16, 0.45);
}

.tounsi-phone--small {
	width: min(260px, 62vw);
	padding: 6px;
	border-radius: 26px;
}

.tounsi-phone__screen {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 26px;
	background: var(--wp--preset--color--base);
}

.tounsi-phone--small .tounsi-phone__screen {
	border-radius: 20px;
}

/* ── Karten & Raster ───────────────────────────────────────────────────── */

.tounsi-grid {
	gap: 1rem;
}

/* Drei Karten füllen die Wide-Spalte komplett (auto-fit statt WP-auto-fill,
   das bei 1200 px eine leere vierte Spalte stehen ließe). */
.tounsi-grid.tounsi-grid--3 {
	grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}

.tounsi-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--tounsi-radius-card);
	padding: clamp(1.1rem, 2.4vw, 1.6rem);
	height: 100%;
}

.tounsi-card--soft {
	background: var(--wp--preset--color--surface-soft);
	border-color: transparent;
}

.tounsi-card > :first-child {
	margin-block-start: 0;
}

.tounsi-card > :last-child {
	margin-block-end: 0;
}

.tounsi-card h3 {
	margin-block: 0.25rem 0.5rem;
}

.tounsi-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	margin-block-end: 0.75rem;
	border-radius: 10px;
	background: var(--wp--preset--color--primary-soft);
	color: var(--wp--preset--color--primary-strong);
}

/* ── App-Screens-Reihe ─────────────────────────────────────────────────── */

/* Der Scroll-Container ist eigenstaendig fokussierbar (role=region + aria-label
   im Pattern), damit die Reihe auch per Tastatur gescrollt werden kann. */
.tounsi-screens__scroller {
	overflow-x: auto;
	padding-block-end: 0.75rem;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.tounsi-screens__row {
	display: flex;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tounsi-screens__item {
	flex: 0 0 auto;
	scroll-snap-align: start;
	text-align: center;
}

.tounsi-screens__caption {
	margin: 0.75rem 0 0;
}

@media (min-width: 900px) {
	.tounsi-screens__scroller {
		overflow-x: visible;
	}

	.tounsi-screens__row {
		justify-content: center;
	}
}

/* ── Beispielkarte ─────────────────────────────────────────────────────── */

.tounsi-example {
	background: var(--wp--preset--color--surface-soft);
	border-radius: 18px;
	padding: clamp(0.9rem, 2.4vw, 1.5rem);
	max-width: 32rem;
}

/* Mehrere kurze Sprachkarten nebeneinander statt untereinander.
   Wrapper-Klasse fuer die Seiten-Patterns; einzelne Karten funktionieren
   weiterhin ohne Wrapper. */
.tounsi-examples {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
	margin-block: var(--wp--preset--spacing--30);
}

.tounsi-examples > .tounsi-example {
	max-width: none;
	margin-block: 0;
}

@media (min-width: 360px) {
	.tounsi-examples {
		grid-template-columns: repeat(auto-fit, minmax(min(9.5rem, 100%), 1fr));
	}
}

@media (min-width: 782px) {
	.tounsi-examples {
		grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
		gap: 1rem;
	}
}

.tounsi-example__word {
	font-size: clamp(1.75rem, 5vw, 2.5rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.05;
	margin: 0 0 0.2rem;
	overflow-wrap: anywhere;
}

/* Typografie und Farbe der Sprachkarten kommen vollstaendig aus dieser Datei –
   die Patterns setzen nur noch die Klassen, keine Preset-Klassen mehr. */
.tounsi-example__de {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.3;
	color: var(--wp--preset--color--ink-soft);
	margin: 0;
}

.tounsi-example__chat {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--ink-soft);
	margin: 0.45rem 0 0;
}

.tounsi-example__note {
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--wp--preset--color--ink-soft);
	margin: 0.45rem 0 0;
}

.tounsi-example__arabic {
	font-family: var(--wp--preset--font-family--arabic);
	font-size: 1.375rem;
	color: var(--wp--preset--color--ink-soft);
	margin: 0.5rem 0 0;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */

.wp-block-button.is-style-tounsi-outline > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--primary-strong);
	box-shadow: inset 0 0 0 2px currentColor;
}

.wp-block-button.is-style-tounsi-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-tounsi-outline > .wp-block-button__link:focus {
	background: var(--wp--preset--color--primary-soft);
	color: var(--wp--preset--color--primary-strong);
}

.wp-block-button.is-style-tounsi-cream > .wp-block-button__link {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary-strong);
}

.wp-block-button.is-style-tounsi-cream > .wp-block-button__link:hover,
.wp-block-button.is-style-tounsi-cream > .wp-block-button__link:focus {
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--primary-strong);
}

.wp-block-button.tounsi-button--compact > .wp-block-button__link {
	padding: 0.6rem 1rem;
	font-size: 0.875rem;
}

/* ── Store-Buttons ─────────────────────────────────────────────────────── */

.tounsi-badges {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/* Schutzraum: Apple verlangt mindestens 1/4 der Badge-Höhe, Google bringt ihn im Asset mit. */
	gap: 0.75rem 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tounsi-badges li {
	margin: 0;
}

.tounsi-badges a {
	display: inline-block;
	line-height: 0;
	border-radius: 8px;
}

.tounsi-badges img {
	display: block;
	width: auto;
	/* Apple-Badge 48 px hoch (Minimum 40 px); Google-PNG enthält oben/unten transparenten
	   Schutzraum (250 px Datei, 192 px Badge) und wird so skaliert, dass beide gleich hoch wirken. */
	height: 48px;
}

.tounsi-badges img.tounsi-badge--google {
	height: 62.5px;
	margin-block: -7.25px;
}

/* ── Brotkrumen ────────────────────────────────────────────────────────── */

.tounsi-breadcrumbs {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	color: var(--wp--preset--color--ink-soft);
}

.tounsi-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tounsi-breadcrumbs__item + .tounsi-breadcrumbs__item::before {
	content: "›";
	margin-inline-end: 0.4rem;
	color: var(--wp--preset--color--ink-muted);
}

.tounsi-breadcrumbs a {
	color: inherit;
	text-decoration: none;
}

.tounsi-breadcrumbs a:hover,
.tounsi-breadcrumbs a:focus {
	color: var(--wp--preset--color--primary-strong);
	text-decoration: underline;
}

/* ── Magazin / Teaser ──────────────────────────────────────────────────── */

.tounsi-teasers__grid {
	gap: 1.25rem;
}

.tounsi-teaser {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--tounsi-radius-card);
	padding: clamp(1.1rem, 2.4vw, 1.5rem);
	height: 100%;
}

.tounsi-teaser__title {
	margin-block: 0.4rem 0.6rem;
	line-height: 1.2;
}

.tounsi-teaser__title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.tounsi-teaser__title a:hover,
.tounsi-teaser__title a:focus {
	color: var(--wp--preset--color--primary-strong);
	text-decoration: underline;
}

.tounsi-teaser__excerpt {
	margin-block-end: 0;
}

.tounsi-teasers__more {
	margin-block-start: 1.5rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8125rem;
}

.tounsi-article__meta {
	color: var(--wp--preset--color--ink-soft);
}

.tounsi-article__meta .tounsi-eyebrow {
	margin: 0;
}

.tounsi-article__meta a {
	color: inherit;
}

.tounsi-related {
	border-block-start: 1px solid var(--wp--preset--color--border);
	padding-block-start: 2rem;
}

.tounsi-related__heading {
	margin-block: 0 1rem;
	font-size: 0.6875rem;
}

.tounsi-related__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tounsi-related__link {
	display: block;
	height: 100%;
	padding: 1.1rem 1.25rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--tounsi-radius-card);
	background: var(--wp--preset--color--surface);
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}

.tounsi-related__link:hover,
.tounsi-related__link:focus {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--ink);
}

.tounsi-related__title {
	display: block;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.02em;
}

.tounsi-pagination {
	margin-block-start: 2.5rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8125rem;
}

.tounsi-linklist {
	padding-inline-start: 1.1rem;
}

.tounsi-linklist li {
	margin-block: 0.4rem;
}

/* ── FAQ ───────────────────────────────────────────────────────────────── */

.tounsi-faq .wp-block-details summary {
	font-weight: 700;
	cursor: pointer;
}

.tounsi-faq .wp-block-details[open] summary {
	margin-block-end: 0.5rem;
}

/* ── Footer ────────────────────────────────────────────────────────────── */

.tounsi-footer {
	border-block-start: 1px solid var(--wp--preset--color--border);
}

.tounsi-footer__claim {
	margin-block-start: 0.75rem;
	max-width: 34ch;
}

.tounsi-footer__list {
	list-style: none;
	margin: 0.75rem 0 0;
	padding: 0;
	font-size: 0.9375rem;
}

.tounsi-footer__list li {
	margin-block: 0.4rem;
}

.tounsi-footer__list a {
	color: var(--wp--preset--color--ink-soft);
	text-decoration: none;
}

.tounsi-footer__list a:hover,
.tounsi-footer__list a:focus {
	color: var(--wp--preset--color--primary-strong);
	text-decoration: underline;
}

.tounsi-footer .tounsi-eyebrow {
	margin-block-end: 0;
}

.tounsi-footer__rule {
	margin-block: 2.5rem 1.25rem;
	border: 0;
	border-block-start: 1px solid var(--wp--preset--color--border);
}

.tounsi-footer__copyright {
	font-family: var(--wp--preset--font-family--mono);
	letter-spacing: 0.08em;
	margin: 0;
}

/* ── Zugänglichkeit ────────────────────────────────────────────────────── */

:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
	border-radius: 4px;
}

.skip-link:focus {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	outline: 2px solid var(--wp--preset--color--primary);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ── Editor ────────────────────────────────────────────────────────────── */

.editor-styles-wrapper .tounsi-hero__panel,
.editor-styles-wrapper .tounsi-download__panel {
	color: var(--wp--preset--color--surface);
}

/* == Seiten-Patterns (Subagent C) == */

/* /app/ zeigt acht Screens statt vier – die Reihe bleibt auch auf breiten
   Displays ein horizontaler Scroller, statt zu zentrieren und dadurch
   die Seite zu verbreitern (überschreibt die 4er-Regel oben gezielt). */
.tounsi-screens--all .tounsi-screens__scroller {
	overflow-x: auto;
}

@media (min-width: 900px) {
	.tounsi-screens--all .tounsi-screens__row {
		justify-content: flex-start;
	}
}

/* ── Bald in weiteren Sprachen (Pattern languages-soon) ── */

.tounsi-langs__panel {
	display: grid;
	gap: clamp(1rem, 3vw, 2.5rem);
	align-items: center;
}

@media (min-width: 782px) {
	.tounsi-langs__panel {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	}
}

/* Der Kartenpanel ist ein Grid – der globale blockGap soll hier nicht greifen. */
.tounsi-langs__panel > * {
	margin-block: 0;
}

.tounsi-langs__text > :first-child {
	margin-block-start: 0;
}

.tounsi-langs__text > :last-child {
	margin-block-end: 0;
}

.tounsi-langs__text .wp-block-heading {
	margin-block: 0.25rem 0.6rem;
}

.tounsi-langs__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}

.tounsi-langs__item {
	background: var(--wp--preset--color--surface);
	border: 1px dashed var(--wp--preset--color--border);
	border-radius: 14px;
	padding: 0.75rem 1rem;
}

.tounsi-langs__item.is-live {
	border-style: solid;
	border-color: var(--wp--preset--color--primary-soft);
}

/* .tounsi-langs__row traegt das Flex-Layout, damit sowohl die verlinkten
   Eintraege (tounsi/language-status: EN/FR) als auch der unverlinkte,
   aktuelle Sprach-Eintrag (Deutsch) dieselbe Ausrichtung bekommen. */
.tounsi-langs__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

a.tounsi-langs__link {
	text-decoration: none;
	color: inherit;
}

a.tounsi-langs__link:hover .tounsi-langs__name,
a.tounsi-langs__link:focus-visible .tounsi-langs__name {
	color: var(--wp--preset--color--primary-strong);
}

.tounsi-langs__name {
	font-weight: 700;
	font-size: 1.0625rem;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--ink);
}

.tounsi-langs__status {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--accent-soft);
	border-radius: 999px;
	padding: 0.3rem 0.7rem;
}

/* Terracotta tief statt Terracotta: 11-px-Text braucht ≥ 4,5 : 1 auf Cream. */
.tounsi-langs__item.is-live .tounsi-langs__status {
	color: var(--wp--preset--color--surface);
	background: var(--wp--preset--color--primary-strong);
}

/* ── Sprachwechsler (tounsi/language-switcher) ────────────────────────────
 * Dezent, keine Flaggen: kleine Mono-Kürzel (DE · EN · FR) im Header/Footer.
 * Der volle Sprachname steht als aria-label am Link, sichtbar bleibt nur
 * das Kürzel. */

.tounsi-langswitch__list {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tounsi-langswitch__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.9rem;
	padding: 0.3rem 0.5rem;
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: var(--wp--preset--color--ink-soft);
	text-decoration: none;
}

.tounsi-langswitch__link:hover,
.tounsi-langswitch__link:focus-visible {
	color: var(--wp--preset--color--primary-strong);
	background: var(--wp--preset--color--surface-soft);
}

.tounsi-langswitch__link[aria-current="page"] {
	color: var(--wp--preset--color--primary-strong);
	background: var(--wp--preset--color--primary-soft);
}

/* Im Footer der deutschen und der Sprachversion-Seiten sitzt der Wechsler auf
   Cream/Surface – dieselben Tokens reichen dort ebenfalls fuer AA-Kontrast. */

/* ── Sprachversionen /en/ und /fr/ (tounsi/locale-header, -footer, -cta) ──
 * Der Kopf-/Fussbereich und die Terracotta-Panels der Pre-Launch-Seiten
 * nutzen bewusst dieselben Klassen wie der deutsche Header/Footer/Hero
 * (.tounsi-header, .tounsi-footer, .tounsi-hero__panel, .tounsi-download__panel) –
 * hier stehen nur die zusaetzlichen Regeln, die es dafuer braucht. */

.tounsi-locale-header__inner {
	max-width: 1200px;
	margin-inline: auto;
	padding: 0.75rem var(--tounsi-gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

/* Wie der deutsche Kopf (Flex-Gruppe aus dem Site Editor): Padding zaehlt zur
   Breite, damit die Inhaltskante bei 1200 px buendig mit dem Seiteninhalt ist. */
.tounsi-locale-header__inner {
	box-sizing: border-box;
}

.tounsi-locale-header__brand,
.tounsi-locale-footer .tounsi-brand {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
}

.tounsi-locale-header__brand .wp-block-site-title,
.tounsi-locale-footer .wp-block-site-title {
	margin: 0;
}

/* Die Site-Title-Typografie aus theme.json laedt WordPress nur, wenn der echte
   core/site-title-Block auf der Seite steht. Die Sprachseiten rendern Kopf und
   Fuss per PHP – deshalb hier dieselben Werte (theme.json → core/site-title). */
.tounsi-locale-header .wp-block-site-title,
.tounsi-locale-footer .wp-block-site-title {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: inherit;
}

.tounsi-locale-header .wp-block-site-title a,
.tounsi-locale-footer .wp-block-site-title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.tounsi-locale-header .wp-block-site-title a:hover,
.tounsi-locale-footer .wp-block-site-title a:hover {
	color: var(--wp--preset--color--primary);
}

.tounsi-locale-header__nav {
	display: flex;
	align-items: center;
	gap: clamp(0.75rem, 2vw, 1.5rem);
}

.tounsi-locale-header__nav .tounsi-header__cta {
	margin: 0;
}

/* Wie im deutschen Fuss: Inhalt auf die globale Inhaltsbreite (720 px). */
.tounsi-locale-footer__top {
	box-sizing: content-box;
	max-width: var(--wp--style--global--content-size, 720px);
	margin-inline: auto;
	padding-inline: var(--tounsi-gutter);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
}

.tounsi-locale-footer__claim {
	max-width: 46ch;
	color: var(--wp--preset--color--ink-soft);
	margin: 0;
}

.tounsi-locale-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.tounsi-locale-footer__legal a {
	color: var(--wp--preset--color--ink-soft);
	text-decoration: none;
}

.tounsi-locale-footer__legal a:hover,
.tounsi-locale-footer__legal a:focus-visible {
	color: var(--wp--preset--color--primary-strong);
	text-decoration: underline;
}

.tounsi-locale-footer .tounsi-footer__rule {
	width: 100%;
	margin-block: 1.5rem 1rem;
}

/* Ehrlicher Satz unter dem Hero-CTA: kleiner Text auf Terracotta braucht die
   Kaffeebraun-Flaeche fuer AA (siehe .tounsi-eyebrow--on-primary). */
.tounsi-hero__honest {
	position: relative;
	z-index: 1;
	display: inline-block;
	margin-block-start: 1rem;
	padding: 0.35rem 0.8rem;
	border-radius: 999px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-soft);
	font-size: 0.8125rem;
}

.tounsi-locale-cta__buttons {
	margin: 0 0 0.75rem;
}

/* Lange Beschriftungen (FR) duerfen umbrechen – als Block statt Inline,
   sonst zerreisst der Umbruch Hintergrund und Innenabstand. */
.tounsi-locale-cta__buttons > .wp-block-button__link {
	display: inline-block;
	max-width: 100%;
	white-space: normal;
	text-align: center;
	line-height: 1.3;
	/* Auf Terracotta klar als Hauptaktion erkennbar – die Hinweise darunter
	   sind kaffeebraun, der Button daher Cream mit tiefem Terracotta. */
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary-strong);
}

.tounsi-locale-cta__buttons > .wp-block-button__link:hover,
.tounsi-locale-cta__buttons > .wp-block-button__link:focus {
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--accent);
}

/* Wie .tounsi-eyebrow--on-primary: eigene Kaffeebraun-Flaeche statt Cream/
   Accent-Soft direkt auf Terracotta (das waere < 4,5:1 fuer 13-px-Text). */
.tounsi-locale-cta__note {
	display: inline-block;
	max-width: 30rem;
	margin: 0;
	padding: 0.55rem 0.9rem;
	border-radius: 12px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-soft);
	font-size: 0.8125rem;
	line-height: 1.5;
}

.tounsi-locale-cta__note a {
	color: inherit;
	text-decoration: underline;
}

/* Im Schluss-Panel (variant panel) liegt die CTA-Notiz auf derselben
   Terracotta-Flaeche wie im Hero – dieselbe Regel gilt dort ebenfalls. */

/* ── Mobile-Pass (≤ 781 px) ────────────────────────────────────────────────
 *
 * Ziel: weniger vertikale Laenge, weniger Kartengefuehl, CTA frueher sichtbar.
 * Das Desktop-Layout bleibt unangetastet – alle Regeln hier stehen in einer
 * Media Query. `!important` steht ausschliesslich dort, wo der Block-Editor
 * Inline-Styles (Spacing-Presets in den Patterns) oder Core-Preset-Klassen
 * (`.has-*-font-size`, Spaltenumbruch) selbst mit `!important` setzt.
 */

@media (max-width: 781px) {
	/* Hero mobil: Store-Badges zentriert (Desktop bleibt linksbuendig). */
	.tounsi-badges--hero {
		justify-content: center;
	}

	/*
	 * Ein Hebel fuer alle Abstaende: Die Patterns setzen ihre Margins als
	 * Spacing-Presets. Werden die Presets selbst kleiner, schrumpfen saemtliche
	 * Sektionsabstaende mit – ohne jede einzelne Inline-Regel zu ueberschreiben.
	 */
	:root {
		--wp--preset--spacing--40: 1.5rem;
		--wp--preset--spacing--50: 2.25rem;
		--wp--preset--spacing--60: 2.75rem;
		--wp--preset--spacing--70: 3.5rem;
	}

	/* ── Hero: H1, Subline und Badges in den ersten Viewport ── */
	.tounsi-hero {
		margin-block-start: 0 !important;
	}

	.tounsi-hero__panel {
		border-radius: 20px 20px 56px 20px;
		padding: 2.9rem 1.25rem 2rem;
	}

	.tounsi-hero__columns {
		gap: 1.5rem;
	}

	.tounsi-hero__title,
	.tounsi-hero__lead {
		max-width: none;
	}

	.tounsi-hero__title {
		font-size: 2.125rem;
		line-height: 1.06;
		margin-block-end: 0.75rem;
	}

	/* 1.5rem = 24 px ist die Untergrenze fuer Cream auf Terracotta (AA). */
	.tounsi-hero__lead {
		font-size: 1.5rem;
		line-height: 1.35;
		margin-block-end: 0;
	}

	.tounsi-hero__download {
		margin-block-start: 1.25rem;
	}

	/*
	 * Beide Badges in eine Zeile: Die Terracotta-Panels haben auf Mobil nur
	 * ~287 px Innenbreite, bei 48 px Badge-Hoehe (144 + 16 + 162 px) bricht die
	 * Reihe um. Auf 40 px sichtbarer Hoehe (Apples Minimum) passen sie nebeneinander.
	 */
	.tounsi-badges {
		gap: 0.5rem 0.75rem;
	}

	.tounsi-badges img {
		height: 40px;
	}

	.tounsi-badges img.tounsi-badge--google {
		height: 52px;
		margin-block: -6px;
	}

	.tounsi-hero__watermark {
		right: -9rem;
		bottom: -9rem;
	}

	.tounsi-hero__media {
		margin-block-start: 0.5rem;
	}

	.tounsi-hero .tounsi-phone {
		width: min(300px, 62vw);
	}

	/* ── Download-Panel ── */
	.tounsi-download__panel {
		border-radius: 20px 20px 56px 20px;
		padding: 1.75rem 1.25rem 2rem;
	}

	.tounsi-download__lead {
		font-size: 1.5rem;
		line-height: 1.35;
		margin-block-end: 1.25rem;
	}

	/* ── Drei Kernargumente: Rows statt Panels ── */
	.tounsi-benefits .tounsi-grid {
		gap: 0;
	}

	.tounsi-benefits .tounsi-card {
		background: transparent;
		border: 0;
		border-block-end: 1px solid var(--wp--preset--color--border);
		border-radius: 0;
		padding: 0.9rem 0;
	}

	.tounsi-benefits .tounsi-card:first-child {
		padding-block-start: 0;
	}

	.tounsi-benefits .tounsi-card:last-child {
		border-block-end: 0;
		padding-block-end: 0;
	}

	.tounsi-benefits .tounsi-card h3 {
		font-size: 1.1875rem;
		line-height: 1.2;
		margin-block: 0.15rem 0.3rem;
	}

	.tounsi-benefits .tounsi-card p:not(.tounsi-eyebrow) {
		font-size: 0.875rem;
		line-height: 1.5;
		margin-block-start: 0;
	}

	/* ── Für wen? / App-Funktionen: kompakte Zweispalter ── */
	.tounsi-usecases .tounsi-grid,
	.tounsi-features .tounsi-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.65rem;
	}

	.tounsi-usecases .tounsi-card,
	.tounsi-features .tounsi-card {
		padding: 0.85rem 0.9rem;
		border-radius: 14px;
	}

	/* Core setzt .has-*-font-size mit !important – daher hier ebenfalls. */
	.tounsi-usecases .tounsi-card h3,
	.tounsi-features .tounsi-card h3 {
		font-size: 1rem !important;
		line-height: 1.2;
		letter-spacing: -0.015em;
		margin-block: 0 0.3rem;
	}

	/* Der globale blockGap (1,5 rem) laesst die kompakten Kacheln auseinanderfallen. */
	.tounsi-usecases .tounsi-card p,
	.tounsi-features .tounsi-card p {
		font-size: 0.8125rem !important;
		line-height: 1.45;
		margin-block-start: 0;
	}

	.tounsi-usecases .tounsi-card p:last-child {
		margin-block-start: 0.45rem;
	}

	.tounsi-features .tounsi-ico {
		width: 1.75rem;
		height: 1.75rem;
		margin-block-end: 0.5rem;
		border-radius: 8px;
	}

	.tounsi-features .tounsi-ico svg {
		width: 16px;
		height: 16px;
	}

	/* ── App-Screens: Scroll-Snap mit Peek auf den naechsten Screen ── */
	.tounsi-screens__row {
		gap: 0.85rem;
		padding-inline-end: 1.5rem;
	}

	.tounsi-screens .tounsi-phone--small {
		width: min(260px, 70vw);
	}

	.tounsi-screens__caption {
		margin-block-start: 0.5rem;
	}

	/* ── Ratgeber-Teaser ── */
	.tounsi-teasers__grid {
		gap: 0.75rem;
	}

	.tounsi-teaser {
		padding: 0.9rem 1rem;
		border-radius: 14px;
	}

	.tounsi-teaser__title {
		font-size: 1.0625rem !important;
		margin-block: 0 0.35rem;
	}

	.tounsi-teaser__excerpt {
		font-size: 0.875rem !important;
		line-height: 1.5;
		margin-block-start: 0;
	}

	.tounsi-example > * + * {
		margin-block-start: 0.3rem;
	}

	.tounsi-example__de {
		font-size: 1.0625rem;
	}

	/* Aufeinanderfolgende Sprachkarten lesen sich als Liste, nicht als Stapel
	   einzelner Panels – der globale blockGap waere hier zu gross. */
	.tounsi-example + .tounsi-example {
		margin-block-start: 0.6rem !important;
	}

	/* Im Raster uebernimmt der Grid-Gap die Abstaende. */
	.tounsi-examples > .tounsi-example + .tounsi-example {
		margin-block-start: 0 !important;
	}

	.tounsi-examples {
		gap: 0.5rem;
		/* Mobil sind die Karten sehr unterschiedlich hoch (Note, zwei Spalten);
		   oben buendig liest sich das ruhiger als gestreckte Panels. */
		align-items: start;
	}

	/* Zwei Karten nebeneinander: Wort und Note eine Spur kleiner, damit
	   lange Formen nicht ueber drei Zeilen laufen. */
	.tounsi-examples .tounsi-example__word {
		font-size: 1.375rem;
	}

	.tounsi-examples .tounsi-example__de {
		font-size: 0.9375rem;
	}

	.tounsi-examples .tounsi-example__note,
	.tounsi-examples .tounsi-example__chat {
		font-size: 0.75rem;
		margin-block-start: 0.3rem;
	}

	.tounsi-teasers__more {
		margin-block-start: 1rem;
	}

	/* ── Weiterlesen (verwandte Artikel) ── */
	.tounsi-related {
		padding-block-start: 1.5rem;
	}

	.tounsi-related__grid {
		grid-template-columns: 1fr;
		gap: 0.65rem;
	}

	.tounsi-related__link {
		padding: 0.85rem 1rem;
	}

	.tounsi-related__title {
		font-size: 1.0625rem;
	}

	/* ── FAQ ── */
	.tounsi-faq .wp-block-details {
		padding: 0.85rem 1rem !important;
	}

	/* ── Footer: zwei Spalten statt fuenf gestapelter Bloecke ── */
	.tounsi-footer__columns {
		gap: 1.25rem !important;
		row-gap: 1.5rem !important;
	}

	/* Core erzwingt unter 782 px flex-basis:100% mit !important und der
	   Spezifitaet 0-2-1 – die Regeln hier muessen darueber liegen. */
	.tounsi-footer .tounsi-footer__columns > .wp-block-column {
		flex-basis: calc(50% - 0.625rem) !important;
		flex-grow: 0;
	}

	.tounsi-footer .tounsi-footer__columns > .wp-block-column:first-child {
		flex-basis: 100% !important;
	}

	.tounsi-footer__list {
		margin-block-start: 0.5rem;
		font-size: 0.875rem;
	}

	.tounsi-footer__list li {
		margin-block: 0.3rem;
	}

	.tounsi-footer__rule {
		margin-block: 1.5rem 1rem;
	}

	/* ── Beispielkarten ── */
	.tounsi-example {
		border-radius: 14px;
	}
}

/* Sehr schmale Geraete: „Fuer wen?" als Liste, Feature-Kacheln einspaltig. */
@media (max-width: 359px) {
	/* Unter 360 px passen zwei Feature-Kacheln nicht mehr ohne Wortumbruch-Clipping. */
	.tounsi-usecases .tounsi-grid,
	.tounsi-features .tounsi-grid {
		grid-template-columns: 1fr;
	}

	.tounsi-usecases .tounsi-card {
		background: transparent;
		border: 0;
		border-block-end: 1px solid var(--wp--preset--color--border);
		border-radius: 0;
		padding: 0.7rem 0;
	}

	.tounsi-usecases .tounsi-card:last-child {
		border-block-end: 0;
	}
}

/* Der Header-CTA taucht ab 600 px auf; darunter uebernimmt der Link im
   Mobile-Overlay. Der Sprung zum Hero-Anker braucht Luft unter dem
   sticky Header. */
:target {
	scroll-margin-block-start: 5rem;
}