/* =========================================================================
   Companion — Designsprache Fassung 1.0
   Erst Form, dann Farbe. Zwei Schriften, mehr nicht.
   ========================================================================= */

/* --- Grundwerte ---------------------------------------------------------- */

:root {
	/* Neutrale Töne */
	--co-ink: #14181C;
	--co-paper: #F4F5F6;
	--co-grafit: #3A424A;
	--co-dark-surface: #1E2429;

	/* Abgeleitete Flächen für den Hellmodus */
	--co-bg: #E7E9EB;
	--co-surface: #FFFFFF;
	--co-surface-2: #F4F5F6;
	--co-line: #D7DADD;
	--co-line-soft: #E7E9EB;
	--co-text: var(--co-ink);
	--co-text-muted: #5F686F;

	/* Produktfarben — Tag und Nacht */
	--co-companion-day: #3A5CD8;
	--co-companion-night: #93AEFF;
	--co-atrium-day: #6B3FD4;
	--co-atrium-night: #B49BFF;
	--co-fact-day: #0B7A6A;
	--co-fact-night: #4FD8BE;
	--co-learn-day: #C0341A;
	--co-learn-night: #FF8A6B;
	--co-school-day: #3D7A2E;
	--co-school-night: #8FD07A;

	/* Aktive Applikationsfarbe. Innerhalb einer Applikation erscheint nur
	   deren Farbe; mehrere nebeneinander gibt es nur im Portfolio. */
	--co-accent: var(--co-companion-day);
	--co-accent-wash: #E5E9F4;

	/* Zeichenfarben — companion_mark() greift auf diese zu */
	--co-mark-ring: var(--co-ink);
	--co-mark-accent: var(--co-accent);

	/* Raster */
	--co-shell: 1200px;
	--co-shell-eng: 760px;
	--co-gutter: clamp(1.25rem, 5vw, 3.5rem);

	/* Bewegung */
	--co-ease: cubic-bezier(.22, 1, .36, 1);
	--co-dur: 550ms;

	/* Erhebung */
	--co-shadow-card: 0 1px 2px rgba(20, 24, 28, .05), 0 8px 24px -12px rgba(20, 24, 28, .14);
	--co-shadow-high: 0 2px 4px rgba(20, 24, 28, .06), 0 24px 48px -20px rgba(20, 24, 28, .22);

	color-scheme: light dark;
}

/* Der Dunkelmodus tauscht die Flächen und schaltet auf die Nachttöne.
   Gleicher Farbton, andere Helligkeit — die Marke bleibt in beiden
   Modi dieselbe, der Kontrast stimmt in beiden. */
@media (prefers-color-scheme: dark) {
	:root {
		--co-bg: #0F1214;
		--co-surface: var(--co-dark-surface);
		--co-surface-2: #171C21;
		--co-line: #2C343B;
		--co-line-soft: #232A30;
		--co-text: var(--co-paper);
		--co-text-muted: #9AA4AC;
		--co-accent: var(--co-companion-night);
		--co-accent-wash: #1B2233;
		--co-mark-ring: var(--co-paper);
		--co-shadow-card: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 28px -14px rgba(0, 0, 0, .7);
		--co-shadow-high: 0 2px 6px rgba(0, 0, 0, .55), 0 28px 56px -24px rgba(0, 0, 0, .8);
	}
}

/* Produktfärbung. Nur eine Applikationsfarbe je Seite. */
.co-produkt--companion { --co-accent: var(--co-companion-day); --co-accent-wash: #E5E9F4; }
.co-produkt--atrium { --co-accent: var(--co-atrium-day); --co-accent-wash: #E9E6F3; }
.co-produkt--fact { --co-accent: var(--co-fact-day); --co-accent-wash: #E1EBEB; }
.co-produkt--learn { --co-accent: var(--co-learn-day); --co-accent-wash: #F0E6E4; }
.co-produkt--school { --co-accent: var(--co-school-day); --co-accent-wash: #E5EBE6; }

@media (prefers-color-scheme: dark) {
	.co-produkt--companion { --co-accent: var(--co-companion-night); --co-accent-wash: #1B2233; }
	.co-produkt--atrium { --co-accent: var(--co-atrium-night); --co-accent-wash: #211B33; }
	.co-produkt--fact { --co-accent: var(--co-fact-night); --co-accent-wash: #102A28; }
	.co-produkt--learn { --co-accent: var(--co-learn-night); --co-accent-wash: #2E1B16; }
	.co-produkt--school { --co-accent: var(--co-school-night); --co-accent-wash: #1A2718; }
}

/* Im Portfolio-Zusammenhang darf jede Karte ihre eigene Farbe tragen. */
.co-tint--companion { --co-accent: var(--co-companion-day); --co-accent-wash: #E5E9F4; }
.co-tint--atrium { --co-accent: var(--co-atrium-day); --co-accent-wash: #E9E6F3; }
.co-tint--fact { --co-accent: var(--co-fact-day); --co-accent-wash: #E1EBEB; }
.co-tint--learn { --co-accent: var(--co-learn-day); --co-accent-wash: #F0E6E4; }
.co-tint--school { --co-accent: var(--co-school-day); --co-accent-wash: #E5EBE6; }

@media (prefers-color-scheme: dark) {
	.co-tint--companion { --co-accent: var(--co-companion-night); --co-accent-wash: #1B2233; }
	.co-tint--atrium { --co-accent: var(--co-atrium-night); --co-accent-wash: #211B33; }
	.co-tint--fact { --co-accent: var(--co-fact-night); --co-accent-wash: #102A28; }
	.co-tint--learn { --co-accent: var(--co-learn-night); --co-accent-wash: #2E1B16; }
	.co-tint--school { --co-accent: var(--co-school-night); --co-accent-wash: #1A2718; }
}

/* --- Zurücksetzen -------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

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

body {
	margin: 0;
	background: var(--co-bg);
	color: var(--co-text);
	font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
	font-size: 1.0625rem;
	line-height: 1.55;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	font-variant-numeric: tabular-nums;
}

img, svg, video { max-width: 100%; height: auto; }
svg.co-mark { height: auto; }

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 .5em;
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -.025em;
	color: var(--co-text);
	text-wrap: balance;
}

h1 { font-size: clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem); font-weight: 700; line-height: 1.04; letter-spacing: -.032em; }
h2 { font-size: clamp(1.75rem, 1.25rem + 2vw, 2.5rem); letter-spacing: -.028em; }
h3 { font-size: clamp(1.3125rem, 1.1rem + .8vw, 1.625rem); }
h4 { font-size: 1.1875rem; }

p, ul, ol, dl, figure, table, pre, blockquote { margin: 0 0 1.15em; }
p { max-width: 68ch; text-wrap: pretty; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

a { color: var(--co-accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, currentColor 32%, transparent); transition: color .18s ease, border-color .18s ease; }
a:hover, a:focus-visible { color: var(--co-text); border-bottom-color: currentColor; }

:focus-visible {
	outline: 2px solid var(--co-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

hr { border: 0; border-top: 1px solid var(--co-line); margin: 3rem 0; }

strong, b { font-weight: 600; }

code, kbd, samp, pre {
	font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
	font-size: .875em;
}

::selection { background: var(--co-accent); color: #fff; }

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

.co-shell {
	width: 100%;
	max-width: var(--co-shell);
	margin-inline: auto;
	padding-inline: var(--co-gutter);
}

.co-shell--eng { max-width: calc(var(--co-shell-eng) + 2 * var(--co-gutter)); }

.co-section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.co-section--knapp { padding-block: clamp(2.5rem, 5vw, 4rem); }
.co-section--tinte { background: var(--co-ink); color: var(--co-paper); --co-mark-ring: var(--co-paper); --co-text: var(--co-paper); --co-text-muted: #98A1A8; --co-line: #2C343B; }
.co-section--tinte h1, .co-section--tinte h2, .co-section--tinte h3 { color: var(--co-paper); }
.co-section--flaeche { background: var(--co-surface); }

/* Sektionsmarke: Mono, Versalien, weite Laufweite. Nie für Fließtext. */
.co-label {
	margin: 0 0 .9rem;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: .6875rem;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--co-text-muted);
}

.co-lead {
	font-size: clamp(1.25rem, 1.05rem + .7vw, 1.5rem);
	line-height: 1.45;
	color: var(--co-text);
	max-width: 56ch;
	letter-spacing: -.012em;
}

/* Markenzeile: ein Satz aus der Voice Matrix, höchstens einer je Marke.
   Steht in der Größe zwischen Titel und Abschnittsüberschrift — sie soll
   nach dem Namen gelesen werden und vor dem, was die Seite erklärt.

   Der Strich darüber trägt die Produktfarbe, die Zeile selbst nicht:
   Als eingefärbter Fließtext säße sie unter 4,5:1, sobald ein Kunde
   seine eigene Farbe hinterlegt. Farbe ist hier Zierde, nicht Träger. */
.co-claim {
	margin: 0;
	max-width: 24ch;
	font-size: clamp(1.625rem, 1.1rem + 2.3vw, 2.75rem);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -.03em;
	text-wrap: balance;
}

.co-claim::before {
	content: "";
	display: block;
	width: 2.75rem;
	height: 3px;
	margin-bottom: 1.35rem;
	border-radius: 2px;
	background: var(--co-accent);
}

.co-muted { color: var(--co-text-muted); }

.co-kicker { max-width: 62ch; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

.co-skip {
	position: absolute;
	left: 1rem; top: -4rem;
	z-index: 200;
	padding: .8rem 1.2rem;
	background: var(--co-ink); color: var(--co-paper);
	border-radius: 10px; border: 0;
	transition: top .2s var(--co-ease);
}
.co-skip:focus { top: 1rem; }

/* --- Zeichen und Wortmarken ---------------------------------------------- */

.co-mark { display: block; overflow: visible; }
/* KEIN `.co-mark circle { fill: none }` — eine CSS-Regel schlägt das
   fill-Attribut am Element, und damit wäre der Kern von fact und
   learn unsichtbar. Das `fill="none"` am <svg> vererbt sich ohnehin
   an alle Kreise, die keinen eigenen Wert tragen. */
.co-mark__core { stroke: none; }

/* Schutzraum: rundum zweimal die Strichstärke, also 18 Einheiten.
   Kein Text, keine Kante, kein Bild ragt hinein. */
.co-mark--schutzraum { padding: calc(var(--co-mark-size, 64px) * .18); }

.co-wordmark {
	display: inline-flex;
	align-items: center;
	gap: calc(var(--co-wordmark-size, 40px) * .4);
	border: 0;
	color: inherit;
	text-decoration: none;
}
.co-wordmark:hover { color: inherit; }

.co-wordmark__name {
	font-family: "Space Grotesk", system-ui, sans-serif;
	font-weight: 600;
	font-size: calc(var(--co-wordmark-size, 40px) * .62);
	letter-spacing: -.025em;
	text-transform: lowercase;
	line-height: 1;
	color: var(--co-text);
}

.co-wordmark--stacked {
	flex-direction: column;
	gap: calc(var(--co-wordmark-size, 40px) * .3);
	text-align: center;
}

/* Der Zusatz zur Dachmarke — nur dort, wo Herkunft erklärt werden muss. */
.co-endorsement {
	display: inline-block;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: .6875rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--co-text-muted);
	padding-top: .85rem;
	border-top: 1px solid var(--co-line);
}

/* --- Bewegung: vier Zustände, mehr nicht --------------------------------- */

@keyframes coRingCW { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes coRingCCW { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
@keyframes coCorePulse { 0%, 100% { opacity: 1; } 50% { opacity: .28; } }
@keyframes coAppear {
	0% { opacity: 0; transform: rotate(-34deg) scale(.84); }
	60% { opacity: 1; }
	100% { opacity: 1; transform: rotate(0deg) scale(1); }
}

/* 1 — Laden. Außenring 4 s im Uhrzeigersinn, Innenring 2,6 s dagegen,
   linear, ohne Ein- und Ausschwingen. */
.co-mark--laden .co-mark__outer { animation: coRingCW 4s linear infinite; transform-origin: 50px 50px; transform-box: view-box; }
.co-mark--laden .co-mark__inner { animation: coRingCCW 2.6s linear infinite; transform-origin: 50px 50px; transform-box: view-box; }
.co-mark--laden .co-mark__core { animation: coCorePulse 1.6s ease-in-out infinite; }

/* 2 — Erscheinen. Einmal je Sitzung, nie bei Navigation innerhalb der App. */
.co-mark--erscheinen { animation: coAppear 700ms var(--co-ease) both; transform-origin: 50% 50%; }

/* 3 — Mouseover. Nur auf klickbaren Flächen. */
.co-hover-mark .co-mark__outer,
.co-hover-mark .co-mark__inner {
	transition: transform var(--co-dur) var(--co-ease);
	transform-origin: 50px 50px;
	transform-box: view-box;
}
.co-hover-mark:hover .co-mark__outer { transform: rotate(14deg); }
.co-hover-mark:hover .co-mark__inner { transform: rotate(-14deg); }
.co-hover-mark:hover .co-mark__core { transition: r var(--co-dur) var(--co-ease); }

/* 4 — Fortschritt. Der Außenring wird zur Skala, der Innenring bleibt stehen. */
.co-mark--fortschritt .co-mark__scale { transition: stroke-dasharray 400ms var(--co-ease); }

/* Reduzierte Bewegung: keine Rotation. Ladezustände zeigen den
   pulsierenden Kern, Erscheinen wird zur reinen Einblendung. */
@media (prefers-reduced-motion: reduce) {
	.co-mark--laden .co-mark__outer,
	.co-mark--laden .co-mark__inner,
	.co-hover-mark:hover .co-mark__outer,
	.co-hover-mark:hover .co-mark__inner { animation: none; transform: none; }
	.co-mark--laden .co-mark__inner { animation: coCorePulse 1.8s ease-in-out infinite; }
	.co-mark--erscheinen { animation: none; opacity: 1; }
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
	.co-mark--laden .co-mark__inner, .co-mark--laden .co-mark__core { animation-duration: 1.8s !important; animation-iteration-count: infinite !important; }
}

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

.co-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: color-mix(in srgb, var(--co-bg) 88%, transparent);
	backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid transparent;
	transition: border-color .2s ease, background .2s ease;
}
.co-header.is-scrolled { border-bottom-color: var(--co-line); }

.co-header__inner {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	min-height: 72px;
	/* Die Kopfzeile ist Rahmen, kein Inhalt — sie darf breiter sein als
	   die Textschale. Sonst bricht die Navigation auf einem gewöhnlichen
	   Notebook in eine zweite Zeile, und eine umbrechende Navigation
	   sieht nach Panne aus. */
	max-width: 1440px;
}

.co-header__brand { margin-right: auto; flex: none; }
.co-header__inner > .co-nav { min-width: 0; }

.co-nav { display: flex; align-items: center; gap: .25rem; min-width: 0; }
.co-nav ul { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; flex-wrap: nowrap; }
.co-nav li { position: relative; }

.co-nav a {
	display: block;
	padding: .55rem .7rem;
	border: 0;
	border-radius: 9px;
	font-size: .875rem;
	font-weight: 500;
	letter-spacing: -.01em;
	color: var(--co-text);
	white-space: nowrap;
}
.co-nav a:hover { background: color-mix(in srgb, var(--co-text) 7%, transparent); color: var(--co-text); }
.co-nav .current-menu-item > a,
.co-nav .current-menu-ancestor > a { color: var(--co-accent); }

/* Untermenü: eine Karte je Produkt, mit Zeichen und Versprechen.
   Drei graue Zeilen untereinander verlangen, dass man sich die
   Unterschiede merkt — genau dafür gibt es die Zeichen. */
.co-nav .sub-menu {
	position: absolute;
	top: calc(100% + .35rem);
	left: -.6rem;
	min-width: 320px;
	flex-direction: column;
	align-items: stretch;
	flex-wrap: nowrap;
	gap: 2px;
	padding: .5rem;
	background: var(--co-surface);
	border: 1px solid var(--co-line);
	border-radius: 18px;
	box-shadow: var(--co-shadow-high);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .18s ease, transform .18s var(--co-ease), visibility .18s;
}
.co-nav li:hover > .sub-menu,
.co-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }

/* Die Lücke zwischen Eintrag und Klappe überbrücken — sonst schließt sie
   sich, während der Zeiger sie überquert. */
.co-nav__mit-unter > a::after {
	content: "";
	position: absolute;
	inset: 100% 0 -.6rem;
}

.co-nav__mit-unter > a {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .35rem;
}
.co-nav__mit-unter > a::before {
	content: "";
	order: 2;
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translate(-1px, -1px);
	opacity: .45;
	transition: transform .2s var(--co-ease), opacity .2s ease;
}
.co-nav__mit-unter:hover > a::before { opacity: .9; transform: rotate(225deg) translate(-2px, -2px); }

.co-nav .sub-menu a {
	padding: .6rem .7rem;
	border-radius: 12px;
	font-size: .9375rem;
	white-space: normal;
}

/* `.co-nav a` setzt display:block und ist mit 0,1,1 spezifischer als eine
   einzelne Klasse — ohne den Elternselektor stünde das Zeichen über dem
   Namen statt daneben. */
.co-nav .co-nav__karte {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: .8rem;
	text-align: left;
}
.co-nav__zeichen { display: flex; width: 30px; flex: none; }
.co-nav__zeichen svg { width: 100%; height: auto; }
.co-nav__text { display: block; min-width: 0; }

.co-nav__name {
	display: block;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1.2;
	text-transform: lowercase;
	color: var(--co-text);
}
.co-nav__claim {
	display: block;
	margin-top: .1rem;
	font-size: .8125rem;
	line-height: 1.35;
	color: var(--co-text-muted);
}

/* Beim Überfahren tritt die Produktfarbe hervor — und nur dort. */
.co-nav__produkt > a:hover { background: var(--co-accent-wash); }
.co-nav__produkt > a:hover .co-nav__claim { color: var(--co-accent); }
.co-nav__produkt > a:hover .co-mark__outer { transform: rotate(14deg); }
.co-nav__produkt > a:hover .co-mark__inner { transform: rotate(-14deg); }
.co-nav__produkt .co-mark__outer,
.co-nav__produkt .co-mark__inner {
	transition: transform var(--co-dur) var(--co-ease);
	transform-origin: 50px 50px;
	transform-box: view-box;
}

/* Einträge ohne Produkt — etwa „Übersicht“ oder „Apps für iOS“ — bleiben
   schlicht, rücken aber auf dieselbe Textkante ein. */
.co-nav .sub-menu li:not(.co-nav__produkt) > a {
	padding-left: 3.2rem;
	text-align: left;
	color: var(--co-text-muted);
	font-weight: 500;
}
.co-nav .sub-menu li:not(.co-nav__produkt) > a:hover { color: var(--co-text); }

/* Eine Haarlinie über den Einträgen ohne Produkt trennt „die drei“ von
   allem Übrigen. */
.co-nav .sub-menu .co-nav__produkt + li:not(.co-nav__produkt) {
	margin-top: .35rem;
	padding-top: .35rem;
	border-top: 1px solid var(--co-line-soft);
}

/* Bereichsmarken im Untermenü: „Wirtschaft · Hochschule“ über fact und
   atrium, „Schule · Unterricht“ über learn und school. Dieselbe Weiche
   wie auf der Startseite, nur als Beschriftung. */
.co-nav .sub-menu .co-nav__bereich {
	padding: .45rem .7rem .15rem;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: .625rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--co-text-muted);
}

.co-header__actions { display: flex; align-items: center; gap: .6rem; flex: none; }

.co-burger {
	display: none;
	width: 44px; height: 44px;
	align-items: center; justify-content: center;
	background: none; border: 1px solid var(--co-line);
	border-radius: 11px; cursor: pointer; color: inherit;
}
.co-burger span { display: block; width: 17px; height: 1.5px; background: currentColor; position: relative; transition: background .2s; }
.co-burger span::before, .co-burger span::after { content: ""; position: absolute; left: 0; width: 17px; height: 1.5px; background: currentColor; transition: transform .25s var(--co-ease); }
.co-burger span::before { top: -5px; }
.co-burger span::after { top: 5px; }
.co-burger[aria-expanded="true"] span { background: transparent; }
.co-burger[aria-expanded="true"] span::before { transform: translateY(5px) rotate(45deg); }
.co-burger[aria-expanded="true"] span::after { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 1120px) {
	.co-burger { display: flex; }
	.co-nav {
		position: fixed;
		inset: 72px 0 auto;
		display: block;
		max-height: calc(100dvh - 72px);
		overflow-y: auto;
		padding: 1rem var(--co-gutter) 2.5rem;
		background: var(--co-bg);
		border-bottom: 1px solid var(--co-line);
		transform: translateY(-8px);
		opacity: 0; visibility: hidden;
		transition: opacity .2s ease, transform .2s var(--co-ease), visibility .2s;
	}
	.co-nav.is-open { opacity: 1; visibility: visible; transform: none; }
	.co-nav ul { display: block; flex-wrap: wrap; }
	.co-nav a { padding: .8rem .25rem; font-size: 1.0625rem; border-radius: 0; border-bottom: 1px solid var(--co-line-soft); }
	.co-nav .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 0 1rem; background: none; min-width: 0; border-radius: 0; }
	.co-nav .sub-menu li:not(.co-nav__produkt) > a { padding-left: .25rem; }
	.co-nav .sub-menu a { padding: .7rem .25rem; }
	.co-nav__karte { gap: .7rem; }
	.co-nav__mit-unter > a::after { content: none; }
	.co-header__actions .co-btn--stark { display: none; }
}

/* --- Knöpfe -------------------------------------------------------------- */

.co-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	min-height: 44px;
	padding: .78rem 1.4rem;
	border: 1px solid transparent;
	border-radius: 11px;
	font-family: inherit;
	font-size: .9375rem;
	font-weight: 600;
	letter-spacing: -.008em;
	line-height: 1.2;
	cursor: pointer;
	text-align: center;
	transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s var(--co-ease);
}
.co-btn:hover { transform: translateY(-1px); }
.co-btn:active { transform: none; }

.co-btn--stark { background: var(--co-ink); color: var(--co-paper); }
.co-btn--stark:hover { background: var(--co-accent); color: #fff; }

.co-btn--leise { background: transparent; color: var(--co-text); border-color: var(--co-line); }
.co-btn--leise:hover { border-color: var(--co-text); color: var(--co-text); background: color-mix(in srgb, var(--co-text) 5%, transparent); }

.co-btn--akzent { background: var(--co-accent); color: #fff; }

.co-section--tinte .co-btn--stark { background: var(--co-paper); color: var(--co-ink); }
.co-section--tinte .co-btn--stark:hover { background: var(--co-accent); color: var(--co-ink); }
.co-section--tinte .co-btn--leise { border-color: #39424A; color: var(--co-paper); }
.co-section--tinte .co-btn--leise:hover { border-color: var(--co-paper); background: rgba(255, 255, 255, .06); }

.co-btn[disabled], .co-btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

.co-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

/* --- Hero ---------------------------------------------------------------- */

.co-hero { padding-block: clamp(3rem, 8vw, 7rem) clamp(2.5rem, 6vw, 5rem); }

.co-hero__grid {
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
}
@media (max-width: 900px) { .co-hero__grid { grid-template-columns: 1fr; } }

.co-hero h1 { margin-bottom: 1rem; }
.co-hero .co-lead { margin-bottom: 0; }

.co-hero__mark { display: grid; place-items: center; }
.co-hero__mark .co-mark { width: clamp(180px, 26vw, 300px); }

/* --- Karten -------------------------------------------------------------- */

.co-grid { display: grid; gap: 1.25rem; }
.co-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.co-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.co-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

.co-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .55rem;
	padding: 1.75rem;
	background: var(--co-surface);
	border-radius: 18px;
	box-shadow: var(--co-shadow-card);
	transition: transform .3s var(--co-ease), box-shadow .3s var(--co-ease);
}
@media (prefers-color-scheme: dark) {
	/* Im Dunkeln trägt der Schatten nicht — dort braucht die Karte eine Kante. */
	.co-card { border: 1px solid var(--co-line); }
}

.co-card--produkt { padding: 2rem; }
.co-card--produkt:hover { transform: translateY(-3px); box-shadow: var(--co-shadow-high); }
.co-card--produkt:hover .co-mark__outer { transform: rotate(14deg); }
.co-card--produkt:hover .co-mark__inner { transform: rotate(-14deg); }
.co-card--produkt .co-mark__outer,
.co-card--produkt .co-mark__inner { transition: transform var(--co-dur) var(--co-ease); transform-origin: 50px 50px; transform-box: view-box; }

.co-card__mark { margin-bottom: 1rem; }

.co-card__name {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: -.025em;
	text-transform: lowercase;
}

.co-card__claim { margin: 0; font-size: 1.0625rem; font-weight: 500; color: var(--co-accent); }
.co-card__lead { margin: .35rem 0 0; color: var(--co-text-muted); font-size: .9375rem; line-height: 1.55; }

.co-card__apps { list-style: none; margin: 1rem 0 0; padding: .9rem 0 0; border-top: 1px solid var(--co-line-soft); display: grid; gap: .5rem; }
/* Die Fußzeile der App-Karte ist ein Satz, keine Liste. `.co-card__apps`
   ist `display: grid` — daran gesetzt, rutschte der Name der Applikation
   in eine eigene Zeile und der Unterstrich lief über die ganze Karte. */
/* Kennzeichnung „Vorschau“ — an Karte, Untermenü und Seitenkopf.
   Sie trägt eine Umrandung statt einer Füllung: Ein gefülltes Etikett
   in der Produktfarbe liest sich wie eine Auszeichnung, und das ist
   das Gegenteil dessen, was sie sagt. */
.co-pille {
	display: inline-block;
	margin-left: .5rem;
	padding: .1em .55em .15em;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: .625rem;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	vertical-align: middle;
	white-space: nowrap;
	color: var(--co-text-muted);
}
.co-tint .co-pille { color: var(--co-accent); }

/* Im Seitenkopf sitzt sie neben einer sehr großen Zeile — dort darf sie
   nicht mitwachsen, sonst wird aus der Fußnote eine zweite Überschrift. */
.co-pagehead h1 .co-pille {
	font-size: .625rem;
	vertical-align: .55em;
	color: var(--co-accent);
}

.co-card__gehoert {
	margin: 1rem 0 0;
	padding-top: .9rem;
	border-top: 1px solid var(--co-line-soft);
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: .75rem;
	letter-spacing: .04em;
	color: var(--co-text-muted);
}
.co-card__gehoert a { color: var(--co-accent); }

.co-card__apps li { display: flex; align-items: center; gap: .6rem; font-family: "IBM Plex Mono", monospace; font-size: .75rem; letter-spacing: .04em; color: var(--co-text-muted); }

.co-card__link { margin-top: auto; padding-top: 1.25rem; font-weight: 600; font-size: .9375rem; border: 0; align-self: flex-start; }
.co-card__link span[aria-hidden] { display: inline-block; transition: transform .25s var(--co-ease); }
.co-card--produkt:hover .co-card__link span[aria-hidden] { transform: translateX(4px); }

/* Die Karte als Ganzes klickbar, ohne den Link zu verschlucken. */
.co-card--produkt .co-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

/* Tinte-Karte: der stärkste Akzent, höchstens einmal je Bildschirm. */
.co-card--tinte {
	background: var(--co-ink);
	color: var(--co-paper);
	border: 0;
	--co-mark-ring: var(--co-paper);
	--co-text-muted: #98A1A8;
	--co-line-soft: #2C343B;
}
.co-card--tinte h2, .co-card--tinte h3, .co-card--tinte .co-card__name { color: var(--co-paper); }

/* --- Zwei Bereiche: die Weiche ------------------------------------------- */
/* Die Schwarz-Weiß-Trennung der Rollups als Baustein: eine harte Kante,
   links die Tinte (Wirtschaft, Hochschule), rechts das Papier (Schule).
   Die Flächen sind FEST und folgen nicht dem Farbschema des Geräts —
   der Kontrast der beiden Hälften IST die Aussage, und er wechselt auch
   auf dem Rollup nicht die Seite. */

.co-bereiche {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-radius: 24px;
	overflow: hidden;
	box-shadow: var(--co-shadow-high);
}

.co-bereich {
	display: flex;
	flex-direction: column;
	padding: clamp(2rem, 4.5vw, 3.5rem);
}

.co-bereich--tinte {
	background: var(--co-ink);
	color: var(--co-paper);
	--co-text: var(--co-paper);
	--co-text-muted: #98A1A8;
	--co-line: #2C343B;
	--co-line-soft: #232A30;
	--co-mark-ring: var(--co-paper);
}

.co-bereich--papier {
	background: var(--co-paper);
	color: var(--co-ink);
	--co-text: var(--co-ink);
	--co-text-muted: #5F686F;
	--co-line: #D7DADD;
	--co-line-soft: #E2E4E7;
	--co-mark-ring: var(--co-ink);
}

.co-bereich__titel {
	margin: 0 0 .5rem;
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
	letter-spacing: -.025em;
	color: var(--co-text);
}

.co-bereich__lead {
	margin: 0 0 2rem;
	color: var(--co-text-muted);
	font-size: .9375rem;
	max-width: 44ch;
}

/* Die Karten sitzen an der Unterkante — so stehen sie in beiden Hälften
   auf derselben Höhe, auch wenn die Vorspänne verschieden lang sind. */
.co-bereich__karten { display: grid; gap: .8rem; margin-top: auto; }

.co-bereich__karte {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 1.1rem;
	padding: 1.05rem 1.3rem;
	border-radius: 16px;
	color: inherit;
	border: 1px solid transparent;
	transition: transform .3s var(--co-ease), border-color .18s ease, background .18s ease;
}
.co-bereich--tinte .co-bereich__karte { background: var(--co-dark-surface); border-color: #2C343B; }
.co-bereich--papier .co-bereich__karte { background: #FFFFFF; border-color: #E2E4E7; box-shadow: var(--co-shadow-card); }
.co-bereich__karte:hover { transform: translateY(-2px); color: inherit; }
.co-bereich--tinte .co-bereich__karte:hover { border-color: #39424A; }
.co-bereich--papier .co-bereich__karte:hover { border-color: var(--co-line); }

/* Produktfarben je Hälfte fest verdrahtet: auf der Tinte die Nachttöne,
   auf dem Papier die Tagtöne — unabhängig vom Farbschema, denn die
   Flächen wechseln ja auch nicht. Die Spezifität (0,2,0) schlägt die
   .co-tint-Regeln samt ihrer Dunkelmodus-Fassung. */
.co-bereich--tinte .co-tint--fact { --co-accent: var(--co-fact-night); }
.co-bereich--tinte .co-tint--atrium { --co-accent: var(--co-atrium-night); }
.co-bereich--tinte .co-tint--learn { --co-accent: var(--co-learn-night); }
.co-bereich--tinte .co-tint--school { --co-accent: var(--co-school-night); }
.co-bereich--papier .co-tint--fact { --co-accent: var(--co-fact-day); }
.co-bereich--papier .co-tint--atrium { --co-accent: var(--co-atrium-day); }
.co-bereich--papier .co-tint--learn { --co-accent: var(--co-learn-day); }
.co-bereich--papier .co-tint--school { --co-accent: var(--co-school-day); }

.co-bereich__zeichen { display: flex; width: 40px; flex: none; }
.co-bereich__zeichen svg { width: 100%; height: auto; }

.co-bereich__name {
	display: block;
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: -.02em;
	text-transform: lowercase;
	line-height: 1.2;
	color: var(--co-text);
}

.co-bereich__claim {
	display: block;
	margin-top: .15rem;
	font-size: .875rem;
	font-weight: 500;
	color: var(--co-accent);
}

.co-bereich__pfeil {
	color: var(--co-text-muted);
	font-weight: 600;
	transition: transform .25s var(--co-ease), color .18s ease;
}
.co-bereich__karte:hover .co-bereich__pfeil { transform: translateX(4px); color: var(--co-text); }

/* Mouseover dreht das Zeichen — dieselbe Bewegung wie auf den Produktkarten. */
.co-bereich__karte .co-mark__outer,
.co-bereich__karte .co-mark__inner {
	transition: transform var(--co-dur) var(--co-ease);
	transform-origin: 50px 50px;
	transform-box: view-box;
}
.co-bereich__karte:hover .co-mark__outer { transform: rotate(14deg); }
.co-bereich__karte:hover .co-mark__inner { transform: rotate(-14deg); }

/* Untereinander bleibt die Kante zwischen den Hälften — jetzt waagrecht. */
@media (max-width: 880px) {
	.co-bereiche { grid-template-columns: 1fr; }
}

/* --- Kantenbündige Listen ------------------------------------------------ */
/* Kartenlisten sind der Standardfehler. Eine Aufzählung ist eine Liste. */

.co-list { list-style: none; margin: 0; padding: 0; }
.co-list > li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1rem;
	padding: 1.15rem 0;
	border-top: 1px solid var(--co-line-soft);
	align-items: start;
}
.co-list > li:last-child { border-bottom: 1px solid var(--co-line-soft); }

.co-list__num {
	font-family: "IBM Plex Mono", monospace;
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .1em;
	color: var(--co-accent);
	padding-top: .3em;
	min-width: 2.5ch;
}

.co-list__title { margin: 0 0 .25rem; font-size: 1.0625rem; font-weight: 600; letter-spacing: -.012em; }
.co-list__text { margin: 0; color: var(--co-text-muted); font-size: .9375rem; }

/* --- Kennzahlen ---------------------------------------------------------- */
/* Eine Zahl allein ist eine Behauptung. Sie nennt ihren Nenner und den
   Satz, der sie begründet. */

.co-stat { display: flex; flex-direction: column; gap: .35rem; }
.co-stat__value {
	font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem);
	font-weight: 700;
	letter-spacing: -.035em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.co-stat__unit { font-size: .5em; font-weight: 500; letter-spacing: -.01em; color: var(--co-text-muted); }
.co-stat__statement { margin: 0; font-size: .9375rem; color: var(--co-text-muted); max-width: 34ch; }

/* --- Vergleichstabelle --------------------------------------------------- */

.co-compare-wrap { overflow-x: auto; margin-inline: calc(var(--co-gutter) * -1); padding-inline: var(--co-gutter); }

.co-compare {
	width: 100%;
	min-width: 720px;
	border-collapse: collapse;
	font-size: .9375rem;
}
.co-compare th, .co-compare td { text-align: left; padding: 1.1rem 1.25rem; vertical-align: top; border-bottom: 1px solid var(--co-line-soft); }
.co-compare thead th { border-bottom: 1px solid var(--co-line); padding-bottom: 1.5rem; }
.co-compare tbody th {
	width: 22%;
	font-family: "IBM Plex Mono", monospace;
	font-size: .6875rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--co-text-muted);
	padding-top: 1.35rem;
}
.co-compare__head { display: flex; align-items: center; gap: .7rem; }
.co-compare__head span { font-size: 1.25rem; font-weight: 600; letter-spacing: -.025em; text-transform: lowercase; }
.co-compare tbody tr:hover td { background: color-mix(in srgb, var(--co-text) 3%, transparent); }

/* --- Zeichen-Galerie (Designsprache) ------------------------------------- */

.co-marks { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }

.co-marktile {
	display: flex; flex-direction: column; align-items: center; gap: 1rem;
	padding: 2rem 1.25rem 1.5rem;
	background: var(--co-surface);
	border-radius: 18px;
	box-shadow: var(--co-shadow-card);
	text-align: center;
}
@media (prefers-color-scheme: dark) { .co-marktile { border: 1px solid var(--co-line); } }

.co-marktile__name { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.02em; text-transform: lowercase; }
.co-marktile__axis {
	font-family: "IBM Plex Mono", monospace;
	font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase;
	color: var(--co-accent);
}

.co-swatch { display: flex; align-items: center; gap: .7rem; font-family: "IBM Plex Mono", monospace; font-size: .8125rem; }
.co-swatch__chip { width: 26px; height: 26px; border-radius: 7px; flex: none; border: 1px solid rgba(20, 24, 28, .12); }

/* --- Vorher/Nachher, Zitate ---------------------------------------------- */

.co-quote {
	margin: 0;
	padding: 2rem 2.25rem;
	background: var(--co-surface);
	border-radius: 18px;
	border-left: 3px solid var(--co-accent);
	box-shadow: var(--co-shadow-card);
}
.co-quote blockquote { margin: 0; font-size: 1.25rem; line-height: 1.45; letter-spacing: -.015em; }
.co-quote figcaption { margin-top: 1.1rem; font-family: "IBM Plex Mono", monospace; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--co-text-muted); }

/* --- Aufklappbares ------------------------------------------------------- */
/* Sichtbar ist, was zum Handeln nötig ist; die Begründung liegt dahinter. */

.co-faq { border-top: 1px solid var(--co-line-soft); }
.co-faq details { border-bottom: 1px solid var(--co-line-soft); }
.co-faq summary {
	display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
	padding: 1.35rem 0;
	font-size: 1.0625rem; font-weight: 600; letter-spacing: -.015em;
	cursor: pointer; list-style: none;
}
.co-faq summary::-webkit-details-marker { display: none; }
.co-faq summary::after {
	content: "+";
	font-family: "IBM Plex Mono", monospace; font-size: 1.25rem; font-weight: 400;
	color: var(--co-accent); flex: none; transition: transform .3s var(--co-ease);
}
.co-faq details[open] summary::after { transform: rotate(45deg); }
.co-faq details > div { padding-bottom: 1.5rem; color: var(--co-text-muted); max-width: 66ch; }

/* --- Fußzeilen-Aufruf ---------------------------------------------------- */

.co-footercta { background: var(--co-ink); color: var(--co-paper); --co-mark-ring: var(--co-paper); }
.co-footercta__inner {
	display: grid; gap: 2rem; align-items: center;
	grid-template-columns: minmax(0, 1fr) auto;
	padding-block: clamp(3rem, 6vw, 4.5rem);
}
@media (max-width: 820px) { .co-footercta__inner { grid-template-columns: 1fr; } }
.co-footercta h2 { color: var(--co-paper); margin-bottom: .6rem; }
.co-footercta p { color: #98A1A8; max-width: 52ch; margin: 0; }
.co-footercta .co-label { color: #7E888F; }
.co-footercta__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.co-footercta .co-btn--stark { background: var(--co-paper); color: var(--co-ink); }
.co-footercta .co-btn--stark:hover { background: var(--co-companion-night); }
.co-footercta .co-btn--leise { border-color: #39424A; color: var(--co-paper); }
.co-footercta .co-btn--leise:hover { border-color: var(--co-paper); background: rgba(255, 255, 255, .06); }

/* --- Fußzeile ------------------------------------------------------------ */

.co-footer { background: var(--co-surface); border-top: 1px solid var(--co-line); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }

.co-footer__grid {
	display: grid; gap: 2.5rem;
	grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) { .co-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .co-footer__grid { grid-template-columns: 1fr; } }

.co-footer__col h3 { font-size: .6875rem; font-family: "IBM Plex Mono", monospace; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--co-text-muted); margin-bottom: 1rem; }
.co-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }

/* Die Applikationen in der Fußzeile stehen unter ihrer Bereichsmarke —
   dieselbe Zweiteilung wie überall, kleiner gesetzt als der Spaltenkopf,
   damit die Hierarchie stimmt. */
.co-footer__bereich {
	margin: 0 0 .5rem;
	font-family: "IBM Plex Mono", monospace;
	font-size: .625rem;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--co-text-muted);
	opacity: .75;
}
.co-footer__col ul + .co-footer__bereich { margin-top: 1.1rem; }
.co-footer__col .co-footer__mehr {
	margin-top: 1.1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--co-line-soft);
}
.co-footer__col a { color: var(--co-text); border: 0; font-size: .9375rem; }
.co-footer__col a:hover { color: var(--co-accent); }

.co-footer__brand p { color: var(--co-text-muted); font-size: .9375rem; margin: 1.1rem 0 1.25rem; max-width: 34ch; }

.co-footer__bottom {
	display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between;
	margin-top: 3rem; padding-top: 1.75rem; border-top: 1px solid var(--co-line);
	font-size: .8125rem; color: var(--co-text-muted);
}
.co-footer__bottom ul { display: flex; flex-wrap: wrap; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.co-footer__bottom a { color: var(--co-text-muted); border: 0; }
.co-footer__bottom a:hover { color: var(--co-text); }

/* --- Brotkrumen ---------------------------------------------------------- */

.co-crumbs { padding-block: 1.5rem 0; }
.co-crumbs ol { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; font-family: "IBM Plex Mono", monospace; font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--co-text-muted); }
.co-crumbs li + li::before { content: "/"; margin-right: .5rem; opacity: .5; }
.co-crumbs a { color: var(--co-text-muted); border: 0; }
.co-crumbs a:hover { color: var(--co-text); }

/* --- Kernblöcke ---------------------------------------------------------- */
/* Spalten und Knöpfe bekommen ihr Layout hier, nicht aus den mitgelieferten
   Blockstilen von WordPress. Sonst steht die Seite gestapelt da, sobald
   jemand `wp-block-styles` abschaltet — und das tun Optimierungs-Plugins
   ungefragt. */

.wp-block-columns {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	align-items: flex-start;
	margin-bottom: 1.5rem;
}
.wp-block-column {
	flex: 1 1 min(100%, 260px);
	min-width: 0;
}
@media (max-width: 700px) {
	.wp-block-columns { gap: 2rem; }
	.wp-block-column { flex-basis: 100%; }
}

.wp-block-buttons { display: flex; flex-wrap: wrap; gap: .75rem; }
.wp-block-button__link { display: inline-block; text-decoration: none; border: 0; }
.wp-block-separator { border: 0; border-top: 1px solid var(--co-line); margin-block: 3rem; }
.wp-block-separator.is-style-wide { width: 100%; }

/* --- Inhaltsfluss (Blockeditor) ------------------------------------------ */

.co-content { padding-inline: var(--co-gutter); }
.co-content > * { margin-inline: auto; max-width: var(--co-shell-eng); }
.co-content > .alignwide { max-width: var(--co-shell); }
/* Volle Breite bricht aus dem Innenabstand aus, statt ihn zu erben —
   sonst ist „alignfull“ eine Behauptung. Den Abstand bekommt der Abschnitt
   dann selbst zurück, und die Kinder werden auf die Schale begrenzt.

   Die Kinder direkt ansprechen und nicht über
   `.wp-block-group__inner-container`: Diesen Zwischen-Container gibt es
   in aktuellen WordPress-Fassungen nicht mehr. Eine Regel, die nur ihn
   trifft, greift nirgends — und der Inhalt läuft auf dem Telefon aus dem
   Bildschirm. */
.co-content > .alignfull {
	max-width: none;
	width: auto;
	margin-inline: calc(var(--co-gutter) * -1);
	padding-inline: var(--co-gutter);
}
.co-content > .alignfull > *,
.co-content > .alignfull > .wp-block-group__inner-container > * {
	max-width: var(--co-shell);
	margin-inline: auto;
}
/* Abschnitte beginnen an einer Kante.

   In einem Abschnitt steht der Fließtext auf Lesebreite (760 px aus
   theme.json), die Raster und Spalten stehen breit (1200 px). WordPress
   zentriert die Lesebreite im breiten Band — dadurch begann die
   Überschrift 220 px weiter rechts als die Karten darunter, und das
   sieht nach Versehen aus, nicht nach Absicht. Der Text behält seine
   Breite, rückt aber an dieselbe Kante. */
/* Erstens: Die Gruppe im Abschnitt hält das breite Band (1200 px) —
   ausdrücklich hier, nicht über die Blocklayout-Regeln von WordPress.
   Deren Regel ist spezifitätslos und verlor gegen die Theme-Regel, die
   Vorschau-Regel dagegen gewann. Dieselbe Seite sah in beiden
   Umgebungen anders aus. */
.co-content .co-section.wp-block-group > :where(:not(.alignfull)) {
	max-width: var(--co-shell);
	margin-inline: auto;
}

/* Zweitens: Der Fließtext darin behält seine Lesebreite, beginnt aber
   an der Kante des Bandes. */
.co-content .co-section .wp-block-group > :where(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, figure) {
	max-width: var(--co-shell-eng);
	margin-inline: 0;
}

.co-content > h2 { margin-top: 2.5em; }
.co-content > h3 { margin-top: 2em; }
.co-content > h2:first-child, .co-content > h3:first-child { margin-top: 0; }
.co-content ul, .co-content ol { padding-left: 1.35rem; }
.co-content li { margin-bottom: .4rem; }
.co-content li::marker { color: var(--co-accent); }
.co-content figure { margin-block: 2.5rem; }
.co-content img { border-radius: 14px; }

.wp-block-group.has-background { border-radius: 20px; padding: clamp(1.75rem, 4vw, 3rem); }

/* --- Beiträge ------------------------------------------------------------ */

.co-posts { display: grid; gap: 0; }
.co-post-item { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 2rem; padding: 2rem 0; border-top: 1px solid var(--co-line-soft); align-items: start; }
.co-post-item:last-child { border-bottom: 1px solid var(--co-line-soft); }
@media (max-width: 700px) { .co-post-item { grid-template-columns: 1fr; gap: .75rem; } }
.co-post-item__meta { font-family: "IBM Plex Mono", monospace; font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--co-text-muted); padding-top: .4rem; }
.co-post-item h2 { font-size: 1.5rem; margin-bottom: .4rem; }
.co-post-item h2 a { color: var(--co-text); border: 0; }
.co-post-item h2 a:hover { color: var(--co-accent); }
.co-post-item p { color: var(--co-text-muted); font-size: .9375rem; margin: 0; }

.co-entry__header { padding-block: clamp(2.5rem, 6vw, 4rem) 2rem; }
.co-entry__meta { font-family: "IBM Plex Mono", monospace; font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--co-text-muted); margin-bottom: 1rem; }

/* --- Seitenkopf ---------------------------------------------------------- */

.co-pagehead { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 3vw, 2.5rem); }
.co-pagehead__grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (max-width: 720px) { .co-pagehead__grid { grid-template-columns: 1fr; } }
.co-pagehead h1 { margin-bottom: .75rem; }

/* --- Formulare ----------------------------------------------------------- */

.co-form { display: grid; gap: 1.25rem; }
.co-field { display: grid; gap: .45rem; }
.co-field label, .co-legend {
	font-size: .8125rem; font-weight: 600; letter-spacing: -.005em; color: var(--co-text);
}
.co-field__hint { font-size: .8125rem; color: var(--co-text-muted); }
.co-req { color: var(--co-accent); }

.co-form input[type="text"],
.co-form input[type="email"],
.co-form input[type="tel"],
.co-form input[type="url"],
.co-form select,
.co-form textarea {
	width: 100%;
	min-height: 46px;
	padding: .7rem .9rem;
	font-family: inherit;
	font-size: 1rem;
	color: var(--co-text);
	background: var(--co-surface);
	border: 1px solid var(--co-line);
	border-radius: 11px;
	transition: border-color .18s ease, box-shadow .18s ease;
	-webkit-appearance: none;
	appearance: none;
}
.co-form textarea { min-height: 150px; resize: vertical; line-height: 1.55; }
.co-form select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%233A424A' stroke-width='1.6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	padding-right: 2.5rem;
}
.co-form input:focus, .co-form select:focus, .co-form textarea:focus {
	outline: none;
	border-color: var(--co-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--co-accent) 18%, transparent);
}
.co-form input[aria-invalid="true"], .co-form textarea[aria-invalid="true"] { border-color: var(--co-learn-day); }

.co-row { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }

.co-check { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start; }
.co-check input[type="checkbox"] {
	width: 20px; height: 20px; margin: 2px 0 0;
	accent-color: var(--co-accent);
	flex: none;
}
.co-check label { font-size: .875rem; font-weight: 400; color: var(--co-text-muted); line-height: 1.5; }
.co-check a { color: var(--co-accent); }

/* Der Honigtopf. Für Menschen unsichtbar, für Formularroboter verlockend.
   Kein display:none — manche Roboter überspringen ausgeblendete Felder. */
.co-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px; height: 1px;
	overflow: hidden;
}

.co-notice { padding: 1.1rem 1.35rem; border-radius: 13px; font-size: .9375rem; border: 1px solid; }
.co-notice--ok { background: color-mix(in srgb, var(--co-fact-day) 8%, var(--co-surface)); border-color: color-mix(in srgb, var(--co-fact-day) 30%, transparent); }
.co-notice--fehler { background: color-mix(in srgb, var(--co-learn-day) 8%, var(--co-surface)); border-color: color-mix(in srgb, var(--co-learn-day) 30%, transparent); }
.co-notice--hinweis { background: var(--co-surface-2); border-color: var(--co-line); color: var(--co-text-muted); }

/* --- Zwei-Spalten-Seiten (Kontakt, Termin) ------------------------------- */

.co-split { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: minmax(0, 1fr) minmax(0, 380px); align-items: start; }
@media (max-width: 980px) { .co-split { grid-template-columns: 1fr; } }
.co-split__aside { position: sticky; top: 100px; display: grid; gap: 1.25rem; }
@media (max-width: 980px) { .co-split__aside { position: static; } }

.co-aside-card { padding: 1.75rem; background: var(--co-surface); border-radius: 18px; box-shadow: var(--co-shadow-card); }
@media (prefers-color-scheme: dark) { .co-aside-card { border: 1px solid var(--co-line); } }
.co-aside-card h3 { font-size: 1.0625rem; margin-bottom: .6rem; }
.co-aside-card p { font-size: .9375rem; color: var(--co-text-muted); margin: 0; }
.co-aside-card ul { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .5rem; font-size: .9375rem; }
.co-aside-card li { display: grid; grid-template-columns: auto 1fr; gap: .6rem; color: var(--co-text-muted); }
.co-aside-card li::before { content: "—"; color: var(--co-accent); }

/* --- Sprachumschaltung --------------------------------------------------- */

.co-lang { display: flex; gap: .25rem; align-items: center; font-family: "IBM Plex Mono", monospace; font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; }
.co-lang a, .co-lang span { padding: .35rem .5rem; border: 0; border-radius: 7px; color: var(--co-text-muted); }
.co-lang a:hover { color: var(--co-text); background: color-mix(in srgb, var(--co-text) 7%, transparent); }
.co-lang [aria-current="true"] { color: var(--co-text); font-weight: 500; }

/* --- 404 und Suche ------------------------------------------------------- */

.co-searchform { display: flex; gap: .6rem; max-width: 480px; }
.co-searchform input[type="search"] {
	flex: 1; min-height: 46px; padding: .7rem .9rem;
	font-family: inherit; font-size: 1rem; color: var(--co-text);
	background: var(--co-surface); border: 1px solid var(--co-line); border-radius: 11px;
}
.co-searchform input:focus { outline: none; border-color: var(--co-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--co-accent) 18%, transparent); }

/* --- Druck --------------------------------------------------------------- */

@media print {
	.co-header, .co-footercta, .co-burger, .co-actions, .co-footer__grid { display: none !important; }
	body { background: #fff; color: #000; }
	.co-card, .co-aside-card { box-shadow: none; border: 1px solid #ccc; }
	a { color: #000; border: 0; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .75em; color: #555; }
}

/* --- Nachträge ----------------------------------------------------------- */

/* Sanftes Einblenden beim Scrollen. Ohne JavaScript und bei reduzierter
   Bewegung ist alles sofort sichtbar — nie hängt Inhalt an einem Skript. */
[data-reveal] {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .6s var(--co-ease), transform .6s var(--co-ease);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	[data-reveal] { opacity: 1; transform: none; }
}

/* Eine Lücke, die man sieht. Ein leeres Impressum sieht sonst aus wie
   ein vollständiges. */
.co-luecke {
	background: color-mix(in srgb, var(--co-learn-day) 14%, transparent);
	color: var(--co-text);
	padding: .1em .45em;
	border-radius: 5px;
	font-family: "IBM Plex Mono", monospace;
	font-size: .8125em;
}

/* Knöpfe aus dem Blockeditor an die Designsprache angleichen. */
.wp-block-button.co-btn-block .wp-block-button__link {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	padding: .78rem 1.4rem;
	border-radius: 11px;
	font-size: .9375rem;
	font-weight: 600;
	letter-spacing: -.008em;
	border: 1px solid transparent;
	transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s var(--co-ease);
}
.wp-block-button.co-btn-block .wp-block-button__link:hover { transform: translateY(-1px); }
.co-btn-block--stark .wp-block-button__link { background: var(--co-ink); color: var(--co-paper); }
.co-btn-block--stark .wp-block-button__link:hover { background: var(--co-accent); color: #fff; }
.co-btn-block--leise .wp-block-button__link { background: transparent; color: var(--co-text); border-color: var(--co-line); }
.co-btn-block--leise .wp-block-button__link:hover { border-color: var(--co-text); background: color-mix(in srgb, var(--co-text) 5%, transparent); }

.co-section--tinte .co-btn-block--stark .wp-block-button__link { background: var(--co-paper); color: var(--co-ink); }
.co-section--tinte .co-btn-block--leise .wp-block-button__link { border-color: #39424A; color: var(--co-paper); }

/* Beitragsbild über der Seite. */
.co-pagethumb { margin: 0 auto 2rem; padding-inline: var(--co-gutter); max-width: var(--co-shell); }
.co-pagethumb img { width: 100%; border-radius: 18px; display: block; }

/* Blättern. */
.wp-block-post-terms, .co-pagination, .navigation.pagination {
	margin-top: 3rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--co-line-soft);
}
.navigation.pagination .nav-links { display: flex; flex-wrap: wrap; gap: .4rem; }
.navigation.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 .75rem;
	border: 1px solid var(--co-line);
	border-radius: 10px;
	font-size: .9375rem;
	color: var(--co-text);
}
.navigation.pagination .page-numbers:hover { border-color: var(--co-text); }
.navigation.pagination .page-numbers.current { background: var(--co-ink); color: var(--co-paper); border-color: var(--co-ink); }

/* Vor und zurück im Journal. */
.co-postnav { margin-top: 2.5rem; }
.co-postnav .nav-links { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.co-postnav a { display: block; border: 0; color: var(--co-text); font-size: 1.0625rem; font-weight: 600; letter-spacing: -.015em; }
.co-postnav a:hover { color: var(--co-accent); }
.co-postnav .co-label { display: block; margin-bottom: .35rem; }
.co-postnav .nav-next { text-align: right; }

/* Widgets in der Fußzeile. */
.co-footer__widgets { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--co-line); }
.co-footer__social { display: flex; flex-wrap: wrap; gap: 1rem; list-style: none; margin: 1.25rem 0 0; padding: 0; font-size: .9375rem; }

/* Auf sehr großen Schriftgraden bricht der Kopf in eine Spalte. */
@media (max-width: 420px) {
	.co-wordmark__name { font-size: calc(var(--co-wordmark-size, 40px) * .56); }
	.co-header__inner { gap: .75rem; }
}

/* Ein Spaltensatz nach einer Textgruppe braucht Luft — sonst klebt die
   erste Zwischenüberschrift am Vorspann darüber. */
.co-section .wp-block-group + .wp-block-columns,
.co-section .wp-block-group + .co-grid,
.co-section .wp-block-group + .co-marks,
.co-section .wp-block-group + .co-compare-wrap,
.co-section .wp-block-group + .co-faq,
.co-section .wp-block-group + .co-list,
.co-section .wp-block-group + .co-fluss { margin-top: clamp(2rem, 4vw, 3rem); }

.co-section .wp-block-columns + .wp-block-buttons { margin-top: 2.5rem; }

/* --- Ansichten aus den Applikationen ------------------------------------- */

.co-screen { margin: clamp(2.5rem, 6vw, 4rem) auto; }

/* Eine einzelne Telefonaufnahme bleibt schmal — auf 1200 px Breite
   gezogen wäre sie ein Turm. */
.co-screen--telefon:not(.co-screen--paar) { max-width: 300px; }
.co-screenrow .co-screen--telefon:not(.co-screen--paar) { max-width: none; }

/* Schreibtisch und Telefon nebeneinander: Der Vergleich ist die Aussage.
   Untereinander müsste man scrollen, um ihn zu sehen — dann ist er weg. */
.co-screen__buehne {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.25rem, 3vw, 2rem);
	align-items: end;
}
.co-screen--paar .co-screen__buehne { grid-template-columns: minmax(0, 1fr) minmax(190px, 250px); }

@media (max-width: 760px) {
	.co-screen--paar .co-screen__buehne { grid-template-columns: 1fr; justify-items: center; }
	.co-screen--paar .co-screen__frame--telefon { max-width: 260px; }
}

.co-screen__frame {
	border-radius: 16px;
	overflow: hidden;
	background: var(--co-surface);
	box-shadow: var(--co-shadow-high);
	border: 1px solid var(--co-line);
	min-width: 0;
}

.co-screen__bar {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: .7rem 1rem;
	background: color-mix(in srgb, var(--co-text) 5%, var(--co-surface));
	border-bottom: 1px solid var(--co-line);
}

.co-screen__dots { display: flex; gap: 6px; flex: none; }
.co-screen__dots i {
	width: 10px; height: 10px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--co-text) 18%, transparent);
}

.co-screen__url {
	flex: 1;
	padding: .25rem .8rem;
	background: var(--co-surface);
	border-radius: 7px;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: .75rem;
	letter-spacing: .02em;
	color: var(--co-text-muted);
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.co-screen__frame img { display: block; width: 100%; height: auto; }

/* Eine Aufnahme ist ein Ausschnitt, kein Poster.
   Ohne Deckel füllt ein 1400 px hoher Bildschirmabzug eine ganze
   Bildschirmseite und drückt den Text, der ihn erklärt, aus dem Blick.
   Beschnitten wird von unten — oben steht, worum es geht. */
.co-screen__frame--browser img {
	max-height: clamp(300px, 38vh, 460px);
	object-fit: cover;
	object-position: top center;
}
/* Beim Telefon wird die BREITE gedeckelt, nicht die Höhe.

   Ein Telefonabzug ist hoch und schmal. In einer 500 px breiten Spalte
   wurde daraus ein 500 px breites Gerät, das es nicht gibt — und der
   Höhendeckel schnitt danach fünf Sechstel des Bildschirms weg, sodass
   nur die Kopfzeile übrig blieb. Mit gedeckelter Breite steht das ganze
   Bild da und sieht dabei aus wie ein Telefon. */
.co-screen__frame--telefon {
	max-width: 268px;
	margin-inline: auto;
}

/* In einer Reihe zu dritt darf es noch weniger sein. */
.co-screenrow .co-screen__frame--browser img { max-height: clamp(200px, 24vh, 300px); }
.co-screenrow .co-screen__frame--telefon { max-width: 232px; }

/* Telefon: Gerätrand statt Fensterleiste, mit angedeutetem Ausschnitt. */
.co-screen__frame--telefon {
	position: relative;
	border: 0;
	border-radius: 30px;
	padding: 9px;
	background: var(--co-ink);
	box-shadow: var(--co-shadow-high);
	justify-self: center;
	width: 100%;
}
.co-screen__frame--telefon img { border-radius: 22px; }
.co-screen__notch {
	position: absolute;
	top: 9px; left: 50%;
	transform: translateX(-50%);
	width: 34%; height: 16px;
	background: var(--co-ink);
	border-radius: 0 0 11px 11px;
	z-index: 2;
}

.co-screen figcaption {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .5rem 1.5rem;
	margin-top: 1rem;
	padding-top: .8rem;
	border-top: 1px solid var(--co-line-soft);
}
.co-screen__caption { font-size: .9375rem; font-weight: 500; letter-spacing: -.01em; }
.co-screen__origin {
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: .6875rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--co-text-muted);
	flex: none;
}

/* Zwei oder drei Ansichten in einer Reihe. */
.co-screenrow {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	margin-block: clamp(2.5rem, 6vw, 4rem);
}
.co-screenrow .co-screen { margin: 0; }
.co-screenrow .co-screen figcaption { flex-direction: column; gap: .3rem; }

.co-screen__luecke { margin-block: 2rem; }