/* ==========================================================================
   KI.kannste – Theme-Stile
   Ergänzt theme.json. Keine externen Ressourcen, keine Bilder, keine
   Animationsbibliothek. Alle Effekte sind CSS-Verläufe und Masken.
   ========================================================================== */

:root {
	--kk-grund: #050A16;
	--kk-sektion: #0A1326;
	--kk-karte: #0F1B33;
	--kk-linie: #1E2D4D;
	--kk-text: #E8EEF9;
	--kk-gedaempft: #A7B4CC;
	--kk-cyan: #22D3EE;
	--kk-blau: #3B82F6;
	--kk-violett: #8B5CF6;
	--kk-verlauf: linear-gradient(120deg, #22D3EE, #3B82F6, #8B5CF6);
	--kk-r-s: 8px;
	--kk-r-m: 14px;
	--kk-r-l: 22px;
}

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

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

/* Kastenmodell – die Ursache, nicht das Symptom
   --------------------------------------------------------------------------
   Ohne diese Regel gilt der Standardwert content-box: Der Browser rechnet
   Innenabstand und Rahmen ZUSAETZLICH zu einer Breitenangabe. Die
   Eingabefelder im Anmeldeformular stehen auf width:100% und haben 1em
   Innenabstand plus 1px Rahmen. Auf dem Handy waren das gemessen 329 Pixel
   in einer Karte mit 296 Pixel Innenbreite – die Felder ragten 34 Pixel
   nach rechts heraus, „Vorname" und „E-Mail-Adresse" sichtbar ueber den
   Kartenrand hinaus.

   Die Regel gehoert nach ganz oben und gilt fuer das ganze Theme. Sie an
   den Eingabefeldern allein zu setzen, haette denselben Fehler beim
   naechsten Element mit width und Innenabstand wieder erzeugt.

   Das Muster mit inherit ist Absicht: Wer fuer einen einzelnen Teilbaum
   content-box braucht, setzt es dort einmal, und der Teilbaum erbt es. */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

@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;
	}
}

body {
	background-color: var(--kk-grund);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/* Leiterbahn-Raster über der gesamten Seite, sehr dezent. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		linear-gradient(to right, rgba(30, 45, 77, 0.5) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(30, 45, 77, 0.5) 1px, transparent 1px);
	background-size: 64px 64px;
	-webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 0%, transparent 75%);
	mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 0%, transparent 75%);
	opacity: 0.65;
}

.wp-site-blocks { position: relative; z-index: 1; }

::selection { background: var(--kk-cyan); color: #050A16; }

:where(a, button, input, textarea, select, summary):focus-visible {
	outline: 2px solid var(--kk-cyan);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Sprunglink für Tastaturnutzer */
.kk-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--kk-cyan);
	color: #050A16;
	font-weight: 700;
	border-radius: 0 0 var(--kk-r-s) 0;
}
.kk-skip:focus { left: 0; }

/* --------------------------------------------------------------------------
   Kopf- und Fußbereich
   -------------------------------------------------------------------------- */

.kk-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(5, 10, 22, 0.82);
	-webkit-backdrop-filter: saturate(150%) blur(10px);
	backdrop-filter: saturate(150%) blur(10px);
	border-bottom: 1px solid var(--kk-linie);
}

.kk-header .wp-block-site-title a { letter-spacing: -0.03em; }

.kk-marke-punkt {
	display: inline-block;
	width: 0.55em;
	height: 0.55em;
	border-radius: 999px;
	background: var(--kk-verlauf);
	margin-inline-end: 0.5em;
	vertical-align: baseline;
}

.kk-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.kk-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	color: var(--kk-text);
}

/* Mobiles Menue
   ----------------------------------------------------------------------
   Der Kopfbereich traegt backdrop-filter. Ein Element mit backdrop-filter
   wird zum Bezugsrahmen fuer alles, was position:fixed ist. Das mobile
   Overlay von WordPress ist genau das – es klebte deshalb in der 53 Pixel
   hohen Kopfzeile fest, statt den Bildschirm zu fuellen: sichtbar war nur
   der erste Menuepunkt. Solange das Overlay offen ist, traegt <html> die
   Klasse has-modal-open. Dann wird der Filter abgeschaltet, der
   Bezugsrahmen verschwindet und das Menue deckt die ganze Seite. */
html.has-modal-open .kk-header {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--kk-sektion) !important;
	padding-top: 4rem;
}

/* Im Overlay ist die Navigation die Hauptsache und keine Kopfzeilenleiste:
   linksbuendig, groesser, mit Daumenflaeche statt Textlink-Hoehe. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: flex-start;
	justify-content: flex-start;
	width: 100%;
}

/* Die Navigation im Kopfbereich ist rechtsbuendig gesetzt. Im Overlay
   erbt die Liste diese Ausrichtung und die Punkte kleben am rechten
   Rand. Dort ist linksbuendig richtig, deshalb die Ueberschreibung. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	width: 100%;
	gap: 0;
	align-items: stretch;
	justify-content: flex-start;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	text-align: left;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 0.7rem 0;
	font-size: 1.3rem;
	font-weight: 600;
	color: var(--kk-text);
	border-bottom: 1px solid var(--kk-linie);
}

.kk-footer {
	border-top: 1px solid var(--kk-linie);
	background: linear-gradient(180deg, #050A16 0%, #0A1326 100%);
}

.kk-footer a { text-decoration: none; }
.kk-footer a:hover { text-decoration: underline; }

.kk-footer__zeile {
	color: var(--kk-gedaempft);
	font-size: 0.875rem;
}

/* Landingpage: Navigation ausblenden, falls doch ein Header geladen wird. */
.kk-landing .kk-header nav { display: none; }

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

.kk-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.kk-hero::after {
	content: "";
	position: absolute;
	inset: -30% -20% auto -20%;
	height: 120%;
	z-index: -1;
	background:
		radial-gradient(45% 45% at 20% 18%, rgba(34, 211, 238, 0.20), transparent 70%),
		radial-gradient(40% 40% at 78% 12%, rgba(139, 92, 246, 0.20), transparent 70%),
		radial-gradient(60% 50% at 50% 100%, rgba(59, 130, 246, 0.14), transparent 70%);
	pointer-events: none;
}

.kk-verlaufstext {
	background: var(--kk-verlauf);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	/* Fallback, falls background-clip nicht greift */
	padding-bottom: 0.08em;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
	.kk-verlaufstext { color: var(--kk-cyan); -webkit-text-fill-color: currentColor; }
}

.kk-augenbraue {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--kk-cyan);
	border: 1px solid rgba(34, 211, 238, 0.35);
	border-radius: 999px;
	padding: 0.45em 1em;
	background: rgba(34, 211, 238, 0.06);
}

.kk-lead {
	font-size: clamp(1.05rem, 1.6vw, 1.3rem);
	color: var(--kk-gedaempft);
	line-height: 1.65;
}

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

.kk-karte {
	position: relative;
	background: var(--kk-karte);
	border: 1px solid var(--kk-linie);
	border-radius: var(--kk-r-l);
	padding: clamp(1.4rem, 3vw, 2.1rem);
	height: 100%;
	transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.kk-karte::before {
	content: "";
	position: absolute;
	inset-inline: clamp(1.4rem, 3vw, 2.1rem);
	top: -1px;
	height: 2px;
	border-radius: 2px;
	background: var(--kk-verlauf);
	opacity: 0.9;
}

.kk-karte:hover {
	transform: translateY(-3px);
	border-color: rgba(34, 211, 238, 0.35);
	box-shadow: 0 24px 50px -30px rgba(34, 211, 238, 0.5);
}

.kk-karte h3 { margin-top: 0; }
.kk-karte p:last-child { margin-bottom: 0; }

.kk-karte__nummer {
	font-variant-numeric: tabular-nums;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	color: var(--kk-cyan);
	text-transform: uppercase;
}

/* Beitragsraster */
.kk-beitraege .wp-block-post {
	background: var(--kk-karte);
	border: 1px solid var(--kk-linie);
	border-radius: var(--kk-r-l);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.25s ease, border-color 0.25s ease;
}

.kk-beitraege .wp-block-post:hover {
	transform: translateY(-3px);
	border-color: rgba(59, 130, 246, 0.45);
}

.kk-beitraege .wp-block-post-featured-image img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
	width: 100%;
}

.kk-beitraege .wp-block-post-title a { text-decoration: none; }
.kk-beitraege .wp-block-post-title a:hover { text-decoration: underline; }

.kk-meta {
	font-size: 0.82rem;
	color: var(--kk-gedaempft);
	letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   Sektionen
   -------------------------------------------------------------------------- */

.kk-sektion { background: var(--kk-sektion); }

.kk-trennlinie {
	height: 1px;
	border: 0;
	background: linear-gradient(90deg, transparent, var(--kk-linie) 20%, var(--kk-linie) 80%, transparent);
	margin-block: clamp(2rem, 5vw, 3.5rem);
}

.kk-akzentlinie {
	height: 3px;
	width: 88px;
	border: 0;
	border-radius: 3px;
	background: var(--kk-verlauf);
	margin: 0 0 1.4rem;
}

/* --------------------------------------------------------------------------
   Anmeldeformular
   -------------------------------------------------------------------------- */

.kk-signup {
	background: linear-gradient(160deg, rgba(34, 211, 238, 0.10), rgba(139, 92, 246, 0.10)), var(--kk-karte);
	border: 1px solid var(--kk-linie);
	border-radius: var(--kk-r-l);
	padding: clamp(1.5rem, 4vw, 2.6rem);
}

.kk-signup__titel { margin-top: 0; }

.kk-signup__text { color: var(--kk-gedaempft); }

.kk-signup__form { margin-top: 1.4rem; }

.kk-feld { margin: 0 0 1rem; }

/* Labels umschliessen ihre Felder, damit auf Seiten mit mehreren
   Formularen keine doppelten IDs entstehen. Die Beschriftung sitzt
   in .kk-feld__text ueber dem Eingabefeld. */
.kk-feld label {
	display: block;
}

.kk-feld__text {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: var(--kk-gedaempft);
	margin-bottom: 0.4rem;
}

.kk-feld input[type="text"],
.kk-feld input[type="email"] {
	width: 100%;
	/* Doppelte Sicherung gegen den Ueberlauf: Selbst wenn ein Feld von
	   aussen wieder auf content-box gestellt wird, bleibt es damit in der
	   Karte. Browser geben Textfeldern ausserdem eine eigene Standardbreite
	   ueber das size-Attribut – max-width haelt auch die im Zaum. */
	max-width: 100%;
	min-width: 0;
	padding: 0.85em 1em;
	font: inherit;
	font-size: 1rem; /* verhindert das Zoomen auf iOS */
	color: var(--kk-text);
	background: rgba(5, 10, 22, 0.65);
	border: 1px solid var(--kk-linie);
	border-radius: var(--kk-r-m);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.kk-feld input::placeholder { color: #64748B; }

.kk-feld input:focus {
	border-color: var(--kk-cyan);
	box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.18);
	outline: none;
}

.kk-feld--check label {
	display: flex;
	gap: 0.7rem;
	align-items: flex-start;
	font-size: 0.92rem;
	line-height: 1.5;
	color: var(--kk-gedaempft);
	cursor: pointer;
}

.kk-feld--check input[type="checkbox"] { margin-top: 0.28rem; width: 1.05rem; height: 1.05rem; accent-color: #22D3EE; flex: 0 0 auto; }

/* Einwilligungstext und Link sind zusammen EIN Flex-Element und fuellen
   den Rest der Zeile. Sonst zerfaellt die Zeile in schmale Spalten. */
.kk-feld__checktext { flex: 1 1 auto; min-width: 0; }

.kk-feld--check label {
	margin: 0;
	font-weight: 400;
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--kk-gedaempft);
	text-transform: none;
	letter-spacing: 0;
}

.kk-signup__aktion { margin: 1.4rem 0 0; }

.kk-signup__aktion button {
	width: 100%;
	max-width: 100%;
	border: 0;
	cursor: pointer;
	background: var(--kk-verlauf);
	color: #050A16;
	font-weight: 700;
	font-size: 1.02rem;
	padding: 1em 1.6em;
	border-radius: 999px;
	transition: filter 0.2s ease, transform 0.2s ease;
}

.kk-signup__aktion button:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }

.kk-signup__aktion button:disabled {
	background: #24324D;
	color: #7C8BA6;
	cursor: not-allowed;
	filter: none;
	transform: none;
}

.kk-signup__hinweis {
	margin: 1rem 0 0;
	font-size: 0.8rem;
	line-height: 1.6;
	color: #7F8DA6;
}

.kk-signup__warnung {
	margin: 0 0 1.2rem;
	padding: 0.85rem 1rem;
	border-radius: var(--kk-r-m);
	border: 1px dashed var(--kk-violett);
	background: rgba(139, 92, 246, 0.10);
	font-size: 0.88rem;
	color: #D6C9FF;
}

.kk-signup--offline { opacity: 0.96; }

/* Honeypot */
.kk-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (min-width: 640px) {
	.kk-signup__aktion button { width: auto; min-width: 260px; }
}

/* --------------------------------------------------------------------------
   Mitgliederbereich
   -------------------------------------------------------------------------- */

.kk-gesperrt {
	border: 1px dashed var(--kk-linie);
	border-radius: var(--kk-r-l);
	padding: clamp(1.4rem, 3vw, 2rem);
	background: rgba(15, 27, 51, 0.6);
	text-align: center;
}

.kk-gesperrt p:first-child { color: var(--kk-gedaempft); margin-top: 0; }

.kk-preisschild {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4rem;
	font-weight: 800;
	font-size: clamp(2rem, 4vw, 2.8rem);
	color: #fff;
}

.kk-preisschild span {
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--kk-gedaempft);
}

/* --------------------------------------------------------------------------
   Inhalt
   -------------------------------------------------------------------------- */

.wp-block-post-content > * + * { margin-block-start: 1.15em; }

.wp-block-post-content h2 { margin-block-start: 2.2em; }
.wp-block-post-content h3 { margin-block-start: 1.8em; }

.wp-block-post-content ul,
.wp-block-post-content ol { padding-inline-start: 1.3em; }

.wp-block-post-content li + li { margin-block-start: 0.4em; }

.wp-block-post-content img { border-radius: var(--kk-r-m); }

.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}

.wp-block-table th {
	background: var(--kk-karte);
	color: #fff;
	text-align: start;
	font-weight: 700;
}

.wp-block-table th,
.wp-block-table td {
	border: 1px solid var(--kk-linie);
	padding: 0.7em 0.9em;
}

.wp-block-table { overflow-x: auto; }

.wp-block-quote { color: var(--kk-text); }

.wp-block-details summary { cursor: pointer; font-weight: 600; }

.wp-block-details {
	border: 1px solid var(--kk-linie);
	border-radius: var(--kk-r-m);
	padding: 1rem 1.2rem;
	background: var(--kk-karte);
}

/* Kopierbare Prompt-Box im Beitrag: Absatz mit Klasse "prompt" */
.prompt,
.wp-block-code.prompt {
	position: relative;
	background: #0B1425;
	border: 1px solid var(--kk-linie);
	border-inline-start: 3px solid var(--kk-cyan);
	border-radius: var(--kk-r-m);
	padding: 1.1rem 1.2rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9rem;
	line-height: 1.65;
	white-space: pre-wrap;
	overflow-x: auto;
}

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

.wp-block-search__input {
	background: rgba(5, 10, 22, 0.65);
	border: 1px solid var(--kk-linie);
	border-radius: var(--kk-r-m);
	color: var(--kk-text);
	padding: 0.8em 1em;
	font-size: 1rem;
}

/* Buttons
   ----------------------------------------------------------------------
   Der Markenverlauf gehoert in theme.json unter elements.button in
   color.gradient. Stand er dort faelschlich unter color.background,
   erzeugte WordPress "background-color: <linear-gradient(...)>". Das ist
   ungueltiges CSS, der Browser verwirft es, und der Button stand mit
   dunkler Schrift (#050A16) unsichtbar auf dunklem Grund. Die folgende
   Regel ist die Absicherung dagegen: Sie faellt nicht aus, egal wie
   WordPress elements.button in Zukunft ausgibt. Outline-Buttons bleiben
   ausgenommen, sie leben von ihrer Rahmenlinie. */
.wp-block-button:not(.is-style-outline) > .wp-block-button__link {
	background-image: var(--kk-verlauf);
	color: #050A16;
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	background-image: none;
}

.wp-block-search__button {
	background: var(--kk-verlauf);
	color: #050A16;
	border: 0;
	border-radius: 999px;
	font-weight: 700;
	padding: 0.8em 1.5em;
	cursor: pointer;
}

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

@media print {
	body::before, .kk-header, .kk-footer, .kk-signup { display: none !important; }
	body { background: #fff; color: #000; }
	a { color: #000; }
}

/* Hinweis: E-Book noch nicht freigegeben ------------------------------- */
.kk-hinweis {
	margin: 1.4rem 0 0;
	padding: 1rem 1.15rem;
	border-radius: var(--kk-r-m);
	border: 1px solid var(--kk-linie);
	border-left: 3px solid var(--kk-cyan);
	background: rgba(34, 211, 238, 0.07);
}

.kk-hinweis p {
	margin: 0;
	font-size: 0.94rem;
	line-height: 1.6;
}

.kk-hinweis__titel {
	margin-bottom: 0.35rem !important;
	color: var(--kk-cyan);
}

.kk-signup__warnung--admin {
	border-style: solid;
	border-color: var(--kk-linie);
	background: rgba(255, 255, 255, 0.04);
	color: var(--kk-gedaempft);
}

/* Suchfeld: Das Label bleibt im Markup, ist aber nur für Screenreader da.
   Ohne Label hatte das Feld nur einen Platzhalter und damit keinen
   zugänglichen Namen – auf der 404- und der Suchseite. */
.kk-suche-label-versteckt .wp-block-search__label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   Startseite – Abschnitte
   Alles reines CSS. Keine Bibliothek, keine externe Schrift, kein Bild
   ausser dem Buchcover.
   ========================================================================== */

/* Feine Aufzaehlung in Karten: schmaler, ruhiger, ohne Standardpunkt. */
.kk-liste-fein { list-style: none; padding-left: 0; margin: 0; font-size: 0.95rem; line-height: 1.65; }
.kk-liste-fein li { position: relative; padding-left: 1.1em; margin-bottom: 0.45em; }
.kk-liste-fein li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 5px;
	height: 5px;
	border-radius: 999px;
	background: var(--kk-cyan);
	opacity: 0.85;
}

/* Haken und Kreuz. Bewusst als ::before und nicht als Zeichen im Text –
   ein Screenreader liest sonst bei jedem Punkt "Haken" mit vor. */
.kk-liste-haken, .kk-liste-kreuz, .kk-liste-warnung, .kk-liste-nummer {
	list-style: none;
	padding-left: 0;
	margin: 0;
	line-height: 1.65;
}
.kk-liste-haken li, .kk-liste-kreuz li, .kk-liste-warnung li, .kk-liste-nummer li {
	position: relative;
	padding-left: 1.7em;
	margin-bottom: 0.55em;
}
.kk-liste-haken li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--kk-cyan);
	font-weight: 700;
}
.kk-liste-kreuz li::before {
	content: "×";
	position: absolute;
	left: 0;
	color: #8896B0;
	font-weight: 700;
	font-size: 1.15em;
	line-height: 1.25;
}
.kk-liste-warnung li::before {
	content: "!";
	position: absolute;
	left: 0;
	top: 0.05em;
	width: 1.15em;
	height: 1.15em;
	line-height: 1.15em;
	text-align: center;
	border-radius: 999px;
	border: 1px solid var(--kk-violett);
	color: var(--kk-violett);
	font-size: 0.78em;
	font-weight: 700;
}
.kk-liste-nummer { counter-reset: kk; }
.kk-liste-nummer li { counter-increment: kk; }
.kk-liste-nummer li::before {
	content: counter(kk);
	position: absolute;
	left: 0;
	top: 0.1em;
	width: 1.4em;
	height: 1.4em;
	line-height: 1.4em;
	text-align: center;
	border-radius: 999px;
	background: rgba(34, 211, 238, 0.12);
	color: var(--kk-cyan);
	font-size: 0.78em;
	font-weight: 700;
}

/* Weiterweg am Fuss einer Karte.
   ----------------------------------------------------------------------
   Die Karte wird zur Flex-Spalte, damit der Link mit margin-top:auto
   unten kleben bleibt und alle Karten einer Reihe gleich hoch enden.

   Nebenwirkung, die einmal teuer war: Das constrained-Layout von
   WordPress gibt jedem direkten Kind margin-left:auto und
   margin-right:auto mit. In einer normalen Box faellt das nicht auf – in
   einer Flex-Spalte zentriert es jedes Kind. Ueberschriften und Listen
   standen dadurch mittig in der Karte. Die zweite Regel nimmt die
   automatischen Aussenabstaende wieder zurueck. */
.kk-karte { display: flex; flex-direction: column; height: 100%; align-items: stretch; }
.kk-karte.kk-karte > *,
.kk-beispiel.kk-beispiel > * { margin-left: 0; margin-right: 0; max-width: none; }
.kk-karte__link { margin-top: auto; padding-top: 0.4rem; font-weight: 600; }
.kk-karte__link a { color: var(--kk-cyan); text-decoration: none; }
.kk-karte__link a:hover { text-decoration: underline; }
.kk-karte--nein { border-color: rgba(136, 150, 176, 0.35); }
.kk-karte--ja { border-color: rgba(34, 211, 238, 0.35); }

/* Vorher/Nachher-Beispiel. */
.kk-beispiel {
	border-radius: var(--kk-r-l);
	padding: 1.4rem 1.5rem;
	height: 100%;
	border: 1px solid var(--kk-linie);
	background: rgba(5, 10, 22, 0.45);
}
.kk-beispiel--schlecht { border-color: rgba(136, 150, 176, 0.35); }
.kk-beispiel--gut { border-color: rgba(34, 211, 238, 0.4); }
.kk-beispiel__marke {
	font-size: 0.76rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--kk-gedaempft);
	margin: 0 0 0.7rem;
}
.kk-beispiel--gut .kk-beispiel__marke { color: var(--kk-cyan); }
.kk-beispiel__text {
	font-family: var(--wp--preset--font-family--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
	font-size: 0.92rem;
	line-height: 1.6;
	color: var(--kk-text);
	background: rgba(5, 10, 22, 0.6);
	border-left: 3px solid var(--kk-linie);
	border-radius: 0 var(--kk-r-s) var(--kk-r-s) 0;
	padding: 0.85rem 1rem;
	margin: 0 0 0.8rem;
}
.kk-beispiel--gut .kk-beispiel__text { border-left-color: var(--kk-cyan); }

/* Schrittfolge.
   ----------------------------------------------------------------------
   auto-fit mit minmax statt fester Spaltenzahl: Das Raster nimmt so viele
   Spalten, wie bei der aktuellen Breite hineinpassen, und braucht keine
   Haltepunkte.

   min-width:0 auf den Schritten ist der eigentliche Punkt. Raster- und
   Flex-Elemente haben von sich aus min-width:auto und schrumpfen deshalb
   NICHT unter die Breite ihres laengsten Wortes. Bei fuenf festen Spalten
   sprengte "Automatisieren" die Spalte, und die Startseite lief bei
   1200 Pixeln 85 Pixel ueber den Rand hinaus. */
.kk-schritte {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Breite selbst setzen statt sie WordPress zu ueberlassen.
   ----------------------------------------------------------------------
   Die Gruppe traegt alignwide und liegt in einem constrained-Abschnitt.
   Nach der Theorie muesste sie damit 1180 Pixel bekommen; gemessen waren
   es 659 – also Inhaltsbreite minus Innenabstand. Aus fuenf Schritten
   wurden dadurch zwei Spalten, und zwar ausgerechnet auf dem breiten
   Bildschirm, waehrend auf dem Tablet drei standen.

   Statt der Ursache in den Layout-Regeln von WordPress hinterherzujagen,
   steht die Breite hier direkt. Zwei Klassen schlagen die eine Klasse der
   Kernregel, damit gilt dieser Wert. */
.kk-schritte.alignwide {
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 1180px);
	margin-left: auto;
	margin-right: auto;
}

/* Das constrained-Layout von WordPress setzt zwischen Geschwistern einen
   oberen Aussenabstand. In einem Raster verschiebt der die Karten
   gegeneinander – sie standen sichtbar treppenfoermig versetzt. */
.kk-schritte > * { margin-block-start: 0; }
.kk-schritt { min-width: 0; }

/* Lange Zusammensetzungen trennen statt hart umbrechen. "Automatisieren"
   stand sonst als "Automatisiere / n" da. */
.kk-schritt h3 { hyphens: auto; overflow-wrap: normal; }
.kk-schritt {
	border: 1px solid var(--kk-linie);
	border-radius: var(--kk-r-l);
	padding: 1.2rem 1.2rem 1.3rem;
	background: rgba(15, 27, 51, 0.45);
	position: relative;
}
.kk-schritt__nummer {
	font-size: 2.1rem;
	font-weight: 800;
	line-height: 1;
	margin: 0 0 0.5rem;
	background: var(--kk-verlauf);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.kk-schritt h3 { margin: 0 0 0.4rem; font-size: 1.05rem; }
.kk-schritt h3 a { color: var(--kk-text); text-decoration: none; }
.kk-schritt h3 a:hover { color: var(--kk-cyan); }
.kk-schritt p { margin: 0; font-size: 0.92rem; }

/* Zahlenband beim Buch. */
.kk-zahlen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.6rem;
	margin: 1.2rem 0 1.6rem;
	padding: 0.9rem 0;
	border-top: 1px solid var(--kk-linie);
	border-bottom: 1px solid var(--kk-linie);
}
.kk-zahl { margin: 0; display: flex; align-items: baseline; gap: 0.4rem; }
.kk-zahl strong {
	font-size: 1.5rem;
	font-weight: 800;
	background: var(--kk-verlauf);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.kk-zahl span { font-size: 0.85rem; color: var(--kk-gedaempft); }

/* Buchcover. */
.kk-buch__bild { margin: 0; }
.kk-buch__bild img {
	width: 100%;
	height: auto;
	border-radius: var(--kk-r-m);
	border: 1px solid var(--kk-linie);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
@media (min-width: 782px) {
	.kk-buch__bild { max-width: 340px; }
}

/* Beispiel-Prompts. */
.kk-prompts { display: grid; gap: 1rem; margin-top: 2rem; }
@media (min-width: 700px) { .kk-prompts { grid-template-columns: repeat(2, 1fr); } }
.kk-prompt {
	border: 1px solid var(--kk-linie);
	border-radius: var(--kk-r-l);
	background: rgba(15, 27, 51, 0.5);
	padding: 1.2rem 1.3rem 1.1rem;
	display: flex;
	flex-direction: column;
}
.kk-prompt__marke {
	font-size: 0.74rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--kk-cyan);
	margin: 0 0 0.65rem;
}
.kk-prompt__text {
	font-family: var(--wp--preset--font-family--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
	font-size: 0.88rem;
	line-height: 1.6;
	color: var(--kk-text);
	margin: 0 0 1rem;
	white-space: pre-wrap;
	word-break: break-word;
}
.kk-prompt__kopie {
	align-self: flex-start;
	margin-top: auto;
	/*
	 * Fingerkuppen sind ungenau. Unter etwa 44 Pixeln Hoehe trifft man
	 * einen Knopf am Telefon nur noch mit Glueck. Die Polsterung allein
	 * kaeme bei dieser Schriftgroesse nur auf 36 Pixel, deshalb die
	 * ausdrueckliche Mindesthoehe – und inline-flex, damit die Schrift
	 * darin mittig bleibt statt oben zu kleben.
	 */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	border: 1px solid var(--kk-linie);
	background: transparent;
	color: var(--kk-gedaempft);
	border-radius: 999px;
	padding: 0.45em 1.4em;
	font: inherit;
	font-size: 0.82rem;
	font-weight: 600;
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease;
}
.kk-prompt__kopie:hover { color: var(--kk-text); border-color: var(--kk-cyan); }
.kk-prompt__kopie.ist-kopiert { color: var(--kk-cyan); border-color: var(--kk-cyan); }

/* Haeufige Fragen. */
.kk-faq {
	border: 1px solid var(--kk-linie);
	border-radius: var(--kk-r-m);
	padding: 0.2rem 1.1rem;
	margin-top: 0.7rem;
	background: rgba(15, 27, 51, 0.35);
}
.kk-faq summary {
	cursor: pointer;
	padding: 0.85rem 0;
	font-weight: 600;
	color: var(--kk-text);
	list-style-position: outside;
}
.kk-faq summary:hover { color: var(--kk-cyan); }
.kk-faq[open] summary { color: var(--kk-cyan); }
.kk-faq p { margin: 0 0 0.9rem; color: var(--kk-gedaempft); }

/* Auf schmalen Geraeten stapeln die WordPress-Spalten ohnehin. Diese Regel
   sorgt dafuer, dass die Karten dabei nicht auf halber Breite kleben
   bleiben – das war beim Vier-Karten-Raster sonst der Fall. */
@media (max-width: 781px) {
	.wp-block-columns .wp-block-column { flex-basis: 100% !important; }
	.kk-zahlen { gap: 0.5rem 1.1rem; }
	.kk-zahl strong { font-size: 1.3rem; }
}

/* Lange Woerter duerfen keine Karte sprengen. Betrifft vor allem
   zusammengesetzte deutsche Substantive in schmalen Spalten. */
.kk-karte, .kk-beispiel, .kk-prompt, .kk-schritt { min-width: 0; overflow-wrap: break-word; }
.wp-block-column { min-width: 0; }