/*
 * Tatakte Theme — Haupt-Stylesheet
 * Mobile-First, Akten-Optik, Schreibmaschinen-Typo
 */

/* =========================================================
   1. CSS-Variablen (über Customizer überschreibbar)
   ========================================================= */
:root {
	--tatakte-accent: #8B0000;
	--tatakte-accent-dark: #6B0000;
	--tatakte-stamp: #C0392B;
	--tatakte-dark: #2C3E50;
	--tatakte-darker: #1A1A1A;
	--tatakte-beige: #F0EDE5;
	--tatakte-paper: #FAFAF7;
	--tatakte-ink: #1A1A1A;
	--tatakte-muted: #6B7280;
	--tatakte-border: #D1CFC8;
	--tatakte-border-light: #E8E5DD;

	--tatakte-font-typewriter: 'Special Elite', 'Courier New', Courier, monospace;
	--tatakte-font-handwriting: 'Caveat', 'Brush Script MT', cursive;
	--tatakte-font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;

	--tatakte-radius-sm: 4px;
	--tatakte-radius-md: 8px;
	--tatakte-radius-lg: 16px;

	--tatakte-shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.06);
	--tatakte-shadow-md: 0 4px 12px rgba(26, 26, 26, 0.08);
	--tatakte-shadow-lg: 0 12px 32px rgba(26, 26, 26, 0.12);

	--tatakte-content-max: 1200px;
	--tatakte-content-narrow: 760px;

	--tatakte-header-height: 72px;
}

/* =========================================================
   2. Reset / Base
   ========================================================= */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--tatakte-font-ui);
	font-size: 16px;
	line-height: 1.6;
	color: var(--tatakte-ink);
	background: var(--tatakte-paper);
	background-image:
		repeating-linear-gradient(0deg, transparent 0, transparent 24px, rgba(139, 0, 0, 0.015) 24px, rgba(139, 0, 0, 0.015) 25px),
		linear-gradient(180deg, #FAFAF7 0%, #F4F0E8 100%);
	min-height: 100vh;
	overflow-x: hidden;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--tatakte-accent); text-decoration: none; }
a:hover, a:focus { color: var(--tatakte-accent-dark); text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--tatakte-font-typewriter);
	font-weight: 400;
	color: var(--tatakte-darker);
	margin: 0 0 0.6em;
	line-height: 1.2;
	letter-spacing: -0.01em;
}
h1 { font-size: clamp(1.875rem, 4vw, 2.75rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.125rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
h4 { font-size: 1.125rem; }

p, ul, ol { margin: 0 0 1.2em; }

button { font: inherit; cursor: pointer; }
input, textarea, select {
	font: inherit;
	font-family: var(--tatakte-font-ui);
	color: var(--tatakte-ink);
	background: var(--tatakte-paper);
	border: 1px solid var(--tatakte-border);
	border-radius: var(--tatakte-radius-sm);
	padding: 0.7rem 0.9rem;
	width: 100%;
	max-width: 100%;
}
input:focus, textarea:focus, select:focus {
	outline: 2px solid var(--tatakte-accent);
	outline-offset: 2px;
	border-color: var(--tatakte-accent);
}

/* Die beiden folgenden Bloecke sind die einzigen Stellen, an denen
   !important hier bleibt — und zwar zu Recht:

   1. .screen-reader-text ist der Standardbaustein von WordPress. Er muss
      sich gegen jede Regel durchsetzen, die ein Plugin auf denselben
      Knoten legt. Setzt er sich nicht durch, wird versteckter Text
      sichtbar oder sichtbarer Text verschwindet.
   2. prefers-reduced-motion muss jede Animation abschalten koennen, auch
      die eines Plugins. Genau dafuer ist !important gedacht. */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px; width: 1px;
	overflow: hidden;
	word-wrap: normal !important;
}
.screen-reader-text:focus {
	background: var(--tatakte-paper);
	clip: auto !important;
	color: var(--tatakte-darker);
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

.tatakte-skip-link { left: -9999rem; }
.tatakte-skip-link:focus {
	left: 1rem; top: 1rem;
	background: var(--tatakte-darker);
	color: var(--tatakte-paper);
	padding: 0.6rem 1rem;
	border-radius: var(--tatakte-radius-sm);
	z-index: 9999;
}

/* =========================================================
   3. Layout-Container
   ========================================================= */
.tatakte-container {
	width: 100%;
	max-width: var(--tatakte-content-max);
	margin: 0 auto;
	padding: 0 1.25rem;
}
@media (min-width: 768px) {
	.tatakte-container { padding: 0 2rem; }
}

/* =========================================================
   4. Header
   ========================================================= */
.tatakte-site-header {
	background: var(--tatakte-darker);
	color: var(--tatakte-paper);
	border-bottom: 3px solid var(--tatakte-accent);
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: var(--tatakte-shadow-md);
}
.tatakte-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: var(--tatakte-header-height);
	gap: 1rem;
}

/* Logo */
.tatakte-header-logo .tatakte-logo-text,
.tatakte-footer-brand .tatakte-logo-text {
	font-family: var(--tatakte-font-typewriter);
	font-size: 1.75rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	text-decoration: none;
	display: inline-block;
	transition: opacity 0.2s;
}
.tatakte-header-logo .tatakte-logo-text { color: var(--tatakte-paper); }
.tatakte-header-logo .tatakte-logo-tat { color: var(--tatakte-paper); }
.tatakte-header-logo .tatakte-logo-akte { color: var(--tatakte-accent); }
.tatakte-footer-brand .tatakte-logo-tat { color: var(--tatakte-darker); }
.tatakte-footer-brand .tatakte-logo-akte { color: var(--tatakte-accent); }
.tatakte-logo-text:hover { opacity: 0.85; text-decoration: none; }

.custom-logo { max-height: 48px; width: auto; }

/* Burger-Menu (Mobile) */
.tatakte-menu-toggle {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: transparent;
	border: 1px solid rgba(250, 250, 247, 0.2);
	border-radius: var(--tatakte-radius-sm);
	width: 44px;
	height: 44px;
	padding: 0;
	cursor: pointer;
}
.tatakte-burger,
.tatakte-burger::before,
.tatakte-burger::after {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--tatakte-paper);
	border-radius: 2px;
	transition: transform 0.3s, opacity 0.2s;
}
.tatakte-burger { position: relative; }
.tatakte-burger::before, .tatakte-burger::after {
	content: '';
	position: absolute;
	left: 0;
}
.tatakte-burger::before { top: -7px; }
.tatakte-burger::after  { top: 7px; }
.tatakte-menu-toggle[aria-expanded="true"] .tatakte-burger { background: transparent; }
.tatakte-menu-toggle[aria-expanded="true"] .tatakte-burger::before {
	top: 0; transform: rotate(45deg);
}
.tatakte-menu-toggle[aria-expanded="true"] .tatakte-burger::after {
	top: 0; transform: rotate(-45deg);
}

/* Primary Nav */
.tatakte-primary-nav {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--tatakte-darker);
	border-top: 1px solid rgba(250, 250, 247, 0.1);
	border-bottom: 3px solid var(--tatakte-accent);
	padding: 1rem 1.25rem;
}
.tatakte-primary-nav.is-open { display: block; }

.tatakte-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}
.tatakte-menu li a {
	display: block;
	padding: 0.75rem 0.5rem;
	color: var(--tatakte-paper);
	text-decoration: none;
	border-radius: var(--tatakte-radius-sm);
	transition: background 0.15s;
	font-weight: 500;
}
.tatakte-menu li a:hover,
.tatakte-menu li.current-menu-item a {
	background: rgba(250, 250, 247, 0.06);
	color: var(--tatakte-paper);
}

.tatakte-account-link {
	display: none;
	color: var(--tatakte-paper);
	border: 1px solid rgba(250, 250, 247, 0.3);
	padding: 0.5rem 1rem;
	border-radius: var(--tatakte-radius-sm);
	font-weight: 500;
	font-size: 0.9375rem;
	transition: all 0.2s;
}
.tatakte-account-link:hover {
	background: var(--tatakte-accent);
	border-color: var(--tatakte-accent);
	color: var(--tatakte-paper);
	text-decoration: none;
}

@media (min-width: 880px) {
	.tatakte-menu-toggle { display: none; }
	.tatakte-primary-nav {
		display: flex;
		position: static;
		background: transparent;
		padding: 0;
		border: 0;
		flex: 1;
		justify-content: center;
	}
	.tatakte-menu { flex-direction: row; gap: 0.5rem; }
	.tatakte-account-link { display: inline-flex; align-items: center; }
}

/* =========================================================
   5. Buttons
   ========================================================= */
/* a.tatakte-button statt .tatakte-button: schlaegt die allgemeine
   Link-Regel ueber die Spezifitaet, ohne !important. */
a.tatakte-button,
.tatakte-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.875rem 1.5rem;
	font-family: var(--tatakte-font-ui);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
	border: 2px solid transparent;
	border-radius: var(--tatakte-radius-sm);
	cursor: pointer;
	transition: all 0.2s;
	min-height: 44px;
}
.tatakte-button-primary {
	background: var(--tatakte-accent);
	color: var(--tatakte-paper);
	border-color: var(--tatakte-accent);
}
.tatakte-button-primary:hover,
.tatakte-button-primary:focus {
	background: var(--tatakte-accent-dark);
	border-color: var(--tatakte-accent-dark);
	color: var(--tatakte-paper);
	transform: translateY(-1px);
	box-shadow: var(--tatakte-shadow-md);
}
.tatakte-button-ghost {
	background: transparent;
	color: var(--tatakte-darker);
	border-color: var(--tatakte-darker);
}
.tatakte-button-ghost:hover,
.tatakte-button-ghost:focus {
	background: var(--tatakte-darker);
	color: var(--tatakte-paper);
}

/* =========================================================
   6. Hero
   ========================================================= */
.tatakte-hero {
	padding: 3rem 0 4rem;
	position: relative;
	overflow: hidden;
}
.tatakte-hero .tatakte-container {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	align-items: center;
}
@media (min-width: 880px) {
	.tatakte-hero { padding: 5rem 0 6rem; }
	.tatakte-hero .tatakte-container { grid-template-columns: 1.5fr 1fr; gap: 4rem; }
}

.tatakte-hero-kicker {
	display: inline-block;
	font-family: var(--tatakte-font-typewriter);
	font-size: 0.875rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--tatakte-accent);
	background: rgba(139, 0, 0, 0.06);
	padding: 0.4rem 0.9rem;
	border-radius: var(--tatakte-radius-sm);
	margin: 0 0 1.25rem;
	border: 1px dashed var(--tatakte-accent);
}
.tatakte-hero-title {
	font-size: clamp(2.25rem, 6vw, 4rem);
	margin: 0 0 1rem;
	line-height: 1.05;
}
.tatakte-hero-subtitle {
	font-size: clamp(1.0625rem, 1.75vw, 1.25rem);
	color: var(--tatakte-muted);
	max-width: 50ch;
	margin: 0 0 2rem;
}
.tatakte-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

/* Hero-Visual: Stempel */
.tatakte-hero-visual {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 260px;
}

/* =========================================================
   Akten-Visual — gealterte Mappe mit aufgedruecktem Stempel

   Kein Bild, keine Schriftart, keine externe Datei. Die Alterung
   entsteht aus drei Zutaten:

   1. Stockflecken: mehrere radiale Verlaeufe mit sehr geringer
      Deckkraft, ungleichmaessig verteilt.
   2. Randverdunkelung: inset-Schatten, weil Papier an den Kanten
      zuerst vergilbt und Fett aufnimmt.
   3. Krumme Winkel: jeder Bogen und die Mappe sind unterschiedlich
      gedreht. Nichts liegt exakt aufeinander.

   Die Farben liegen als eigene Custom Properties vor, damit ein
   Branchen-Preset spaeter eine andere Papiersorte setzen kann,
   ohne die Regeln anzufassen.
   ========================================================= */

.tatakte-akte {
	--akte-papier: #f2ece0;
	--akte-papier-tief: #e4dac6;
	--akte-mappe: #d9c9a4;
	--akte-mappe-tief: #c4b189;
	--akte-tinte: rgba(90, 70, 45, 0.55);
	--akte-fleck: rgba(122, 96, 58, 0.10);

	position: relative;
	width: 250px;
	height: 280px;
	flex: none;
}

/* --- Papierstapel hinter der Mappe --- */

.tatakte-akte-blatt {
	position: absolute;
	top: 26px;
	right: 14px;
	bottom: 22px;
	left: 14px;
	display: block;
	border-radius: 2px;
	background-color: var(--akte-papier);
	background-image:
		radial-gradient(circle at 22% 18%, var(--akte-fleck) 0 10px, transparent 14px),
		radial-gradient(circle at 78% 62%, var(--akte-fleck) 0 14px, transparent 20px),
		radial-gradient(circle at 46% 88%, var(--akte-fleck) 0 8px, transparent 12px);
	box-shadow:
		inset 0 0 22px rgba(120, 95, 60, 0.16),
		0 1px 2px rgba(0, 0, 0, 0.10);
}

.tatakte-akte-blatt-1 { transform: rotate(-2.5deg); }
.tatakte-akte-blatt-2 { transform: rotate(1.8deg) translateX(4px); opacity: 0.9; }
.tatakte-akte-blatt-3 { transform: rotate(5deg) translate(9px, 3px); opacity: 0.78; }

/* --- Die Mappe --- */

.tatakte-akte-mappe {
	position: absolute;
	top: 34px;
	right: 0;
	bottom: 0;
	left: 0;
	display: block;
	border-radius: 3px 3px 2px 2px;
	transform: rotate(-1.5deg);
	background-color: var(--akte-mappe);
	background-image:
		/* Stockflecken */
		radial-gradient(circle at 16% 26%, var(--akte-fleck) 0 12px, transparent 18px),
		radial-gradient(circle at 84% 44%, var(--akte-fleck) 0 16px, transparent 24px),
		radial-gradient(circle at 62% 80%, var(--akte-fleck) 0 10px, transparent 16px),
		radial-gradient(circle at 30% 66%, var(--akte-fleck) 0 7px, transparent 11px),
		/* Faserstruktur des Kartons */
		repeating-linear-gradient(
			92deg,
			rgba(255, 255, 255, 0.05) 0 2px,
			transparent 2px 5px
		),
		/* leichter Verlauf: oben abgegriffener als unten */
		linear-gradient(170deg, var(--akte-mappe-tief), var(--akte-mappe) 38%);
	box-shadow:
		inset 0 0 30px rgba(105, 80, 45, 0.22),
		inset 0 2px 0 rgba(255, 255, 255, 0.22),
		0 10px 24px rgba(40, 30, 15, 0.18);
}

/* Fuehrungslinien auf der Mappe — wie auf einem Aktendeckel */
.tatakte-akte-mappe::before {
	content: '';
	position: absolute;
	top: 54px;
	right: 26px;
	left: 26px;
	height: 86px;
	background-image: repeating-linear-gradient(
		to bottom,
		var(--akte-tinte) 0 1px,
		transparent 1px 21px
	);
	opacity: 0.30;
}

/* Abgegriffene Ecke unten rechts */
.tatakte-akte-mappe::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	width: 34px;
	height: 34px;
	background: linear-gradient(315deg, var(--akte-papier) 48%, transparent 50%);
	box-shadow: -1px -1px 2px rgba(60, 45, 25, 0.16);
}

/* --- Reiter mit Aktenzeichen --- */

.tatakte-akte-reiter {
	position: absolute;
	top: -24px;
	left: 20px;
	display: flex;
	align-items: center;
	height: 26px;
	padding: 0 14px;
	border-radius: 4px 6px 0 0;
	background: linear-gradient(180deg, var(--akte-mappe), var(--akte-mappe-tief));
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.28),
		0 -2px 6px rgba(40, 30, 15, 0.12);
}

.tatakte-akte-ref {
	color: var(--akte-tinte);
	font-family: var(--tatakte-font-typewriter);
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	white-space: nowrap;
}

/* --- Heftklammer oben links --- */

.tatakte-akte-klammer {
	position: absolute;
	top: 16px;
	left: 20px;
	width: 26px;
	height: 9px;
	border: 2px solid rgba(90, 90, 96, 0.55);
	border-bottom-color: transparent;
	border-radius: 3px 3px 0 0;
	transform: rotate(-7deg);
}

/* --- Eselsohr oben rechts --- */

.tatakte-akte-eselsohr {
	position: absolute;
	top: 0;
	right: 0;
	width: 30px;
	height: 30px;
	background: linear-gradient(225deg, var(--akte-papier-tief) 49%, transparent 51%);
	opacity: 0.85;
}

/* --- Der Stempel sitzt auf der Mappe --- */

.tatakte-akte .tatakte-stamp-circle {
	position: absolute;
	top: 52%;
	left: 50%;
	z-index: 3;
	width: 178px;
	height: 178px;
	border-width: 6px;
	transform: translate(-50%, -50%) rotate(-14deg);
}

.tatakte-akte .tatakte-stamp-circle::before {
	top: 9px;
	right: 11px;
	bottom: 11px;
	left: 9px;
	border-width: 2px;
}

.tatakte-akte .tatakte-stamp-circle::after { inset: 18px; }
.tatakte-akte .tatakte-stamp-text { font-size: 1.05rem; }

/* Auf der hellen Mappe ist multiply immer richtig — auch wenn die
   Section einen dunklen Hintergrund hat. Ueberschreibt die
   Section-Regel weiter unten. */
.tatakte-dyn-bg-dark .tatakte-akte .tatakte-stamp-circle,
.tatakte-dyn-bg-accent .tatakte-akte .tatakte-stamp-circle {
	mix-blend-mode: multiply;
	opacity: 0.78;
}

@media (min-width: 880px) {
	.tatakte-akte { width: 310px; height: 346px; }
	.tatakte-akte-mappe::before { top: 66px; height: 108px; }
	.tatakte-akte .tatakte-stamp-circle {
		width: 222px;
		height: 222px;
		border-width: 8px;
	}
	.tatakte-akte .tatakte-stamp-text { font-size: 1.35rem; }
}

@media (max-width: 479px) {
	.tatakte-akte { width: 210px; height: 236px; }
	.tatakte-akte .tatakte-stamp-circle { width: 150px; height: 150px; border-width: 5px; }
	.tatakte-akte .tatakte-stamp-text { font-size: 0.9rem; }
	.tatakte-akte-mappe::before { top: 46px; height: 64px; }
}
/* Akten-Stempel — aufgedrueckt, nicht gezeichnet.

   Ein echter Gummistempel traegt die Farbe ungleichmaessig auf: der Rand
   bricht auf, die Mitte deckt staerker, einzelne Stellen bleiben blass.
   Nachgebaut ohne Bilddatei:

   - mask-image aus mehreren radialen Verlaeufen frisst unregelmaessige
     Loecher in Ring und Schrift (abgeplatzte Tinte)
   - mix-blend-mode: multiply laesst den Stempel in den Papiergrund
     einsinken statt darauf zu liegen
   - der zweite Ring sitzt leicht versetzt, weil kein Stempel exakt
     mittig aufgesetzt wird
   - die Schrift bekommt einen minimalen Versatz-Schatten (Tintenrand) */

.tatakte-stamp-circle {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 210px;
	height: 210px;
	border: 7px solid var(--tatakte-stamp);
	border-radius: 50%;
	color: var(--tatakte-stamp);
	font-family: var(--tatakte-font-typewriter);
	letter-spacing: 0.16em;
	transform: rotate(-14deg);
	opacity: 0.78;
	mix-blend-mode: multiply;

	/* Abgeplatzte Tinte: helle Flecken fressen Teile des Rings weg. */
	-webkit-mask-image:
		radial-gradient(circle at 18% 22%, transparent 0 7px, #000 9px),
		radial-gradient(circle at 82% 34%, transparent 0 5px, #000 7px),
		radial-gradient(circle at 66% 88%, transparent 0 9px, #000 12px),
		radial-gradient(circle at 30% 79%, transparent 0 4px, #000 6px),
		radial-gradient(circle at 92% 66%, transparent 0 6px, #000 8px),
		radial-gradient(circle at 8% 55%, transparent 0 5px, #000 7px),
		linear-gradient(#000, #000);
	-webkit-mask-composite: source-in;
	mask-image:
		radial-gradient(circle at 18% 22%, transparent 0 7px, #000 9px),
		radial-gradient(circle at 82% 34%, transparent 0 5px, #000 7px),
		radial-gradient(circle at 66% 88%, transparent 0 9px, #000 12px),
		radial-gradient(circle at 30% 79%, transparent 0 4px, #000 6px),
		radial-gradient(circle at 92% 66%, transparent 0 6px, #000 8px),
		radial-gradient(circle at 8% 55%, transparent 0 5px, #000 7px),
		linear-gradient(#000, #000);
	mask-composite: intersect;
}

/* Innerer Ring — bewusst nicht konzentrisch. */
.tatakte-stamp-circle::before {
	content: '';
	position: absolute;
	top: 11px;
	right: 13px;
	bottom: 13px;
	left: 11px;
	border: 3px solid var(--tatakte-stamp);
	border-radius: 50%;
	opacity: 0.72;
}

/* Feiner Innenring als dritte Linie — bei echten Stempeln oft nur
   angedeutet, deshalb stark ausgeduennt. */
.tatakte-stamp-circle::after {
	content: '';
	position: absolute;
	inset: 22px;
	border: 1px solid var(--tatakte-stamp);
	border-radius: 50%;
	opacity: 0.3;
}

.tatakte-stamp-text {
	position: relative;
	z-index: 1;
	padding: 0 12px;
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1.1;
	text-align: center;
	text-transform: uppercase;
	/* Tintenrand: winziger Versatz, wie beim Abrollen des Stempels. */
	text-shadow: 0.5px 0.5px 0 rgba(0, 0, 0, 0.12);
}

@media (min-width: 880px) {
	.tatakte-stamp-circle { width: 272px; height: 272px; border-width: 9px; }
	.tatakte-stamp-circle::before { top: 15px; right: 17px; bottom: 17px; left: 15px; border-width: 4px; }
	.tatakte-stamp-circle::after { inset: 29px; }
	.tatakte-stamp-text { font-size: 1.7rem; }
}

/* Auf dunklem Grund wuerde multiply den Stempel verschlucken. */
.tatakte-dyn-bg-dark .tatakte-stamp-circle,
.tatakte-dyn-bg-accent .tatakte-stamp-circle {
	mix-blend-mode: screen;
	opacity: 0.85;
}

/* Kein Blend-Trick, wenn der Nutzer reduzierte Bewegung/Effekte will
   oder der Browser mask nicht kann — dann eben sauberer Stempel. */
@supports not (mask-image: radial-gradient(#000, #000)) {
	.tatakte-stamp-circle { opacity: 0.9; mix-blend-mode: normal; }
}

/* =========================================================
   7. Features Section
   ========================================================= */
.tatakte-features {
	padding: 4rem 0;
	background: var(--tatakte-beige);
	border-top: 1px solid var(--tatakte-border-light);
	border-bottom: 1px solid var(--tatakte-border-light);
}
.tatakte-section-heading {
	text-align: center;
	max-width: 720px;
	margin: 0 auto 3rem;
}
.tatakte-section-lead {
	font-size: 1.125rem;
	color: var(--tatakte-muted);
}
.tatakte-features-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}
@media (min-width: 760px) {
	.tatakte-features-grid { grid-template-columns: repeat(3, 1fr); }
}
.tatakte-feature {
	background: var(--tatakte-paper);
	border: 1px solid var(--tatakte-border-light);
	border-radius: var(--tatakte-radius-md);
	padding: 2rem;
	box-shadow: var(--tatakte-shadow-sm);
	transition: transform 0.2s, box-shadow 0.2s;
}
.tatakte-feature:hover {
	transform: translateY(-3px);
	box-shadow: var(--tatakte-shadow-md);
}
.tatakte-feature-num {
	font-family: var(--tatakte-font-typewriter);
	font-size: 2rem;
	color: var(--tatakte-accent);
	display: block;
	margin: 0 0 0.5rem;
	letter-spacing: 0.05em;
}
.tatakte-feature h3 {
	margin: 0 0 0.75rem;
	font-size: 1.375rem;
}
.tatakte-feature p {
	color: var(--tatakte-muted);
	margin: 0;
}

/* =========================================================
   8. CTA Band
   ========================================================= */
.tatakte-cta-band {
	background: var(--tatakte-darker);
	color: var(--tatakte-paper);
	padding: 3.5rem 0;
	text-align: center;
}
.tatakte-cta-band h2 {
	color: var(--tatakte-paper);
	margin: 0 0 1.5rem;
}
.tatakte-cta-band .tatakte-button-primary {
	background: var(--tatakte-accent);
	border-color: var(--tatakte-accent);
}

/* =========================================================
   9. Content Areas
   ========================================================= */
.tatakte-content-area,
.tatakte-account-area {
	padding: 3rem 1.25rem 4rem;
	max-width: var(--tatakte-content-narrow);
}
.tatakte-page-header { margin: 0 0 2rem; }
.tatakte-page-title { margin: 0 0 0.5rem; }
.tatakte-page-content { font-size: 1.0625rem; line-height: 1.7; }
.tatakte-page-content > * { max-width: 65ch; }
.tatakte-page-content > .alignwide { max-width: 100%; }

/* Posts / Cards */
.tatakte-post-list { display: grid; gap: 1.5rem; }
.tatakte-post-card {
	background: var(--tatakte-paper);
	border: 1px solid var(--tatakte-border-light);
	border-radius: var(--tatakte-radius-md);
	padding: 1.5rem;
	box-shadow: var(--tatakte-shadow-sm);
}
.tatakte-post-title { margin: 0 0 0.5rem; font-size: 1.5rem; }
.tatakte-post-title a { color: var(--tatakte-darker); }
.tatakte-post-meta { font-size: 0.875rem; color: var(--tatakte-muted); margin: 0 0 1rem; }
.tatakte-post-excerpt { margin: 0 0 1rem; }

/* =========================================================
   10. Footer
   ========================================================= */
.tatakte-site-footer {
	background: var(--tatakte-beige);
	border-top: 4px double var(--tatakte-border);
	padding: 3rem 0 1.5rem;
	margin-top: 4rem;
	color: var(--tatakte-darker);
}
.tatakte-footer-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	margin: 0 0 2rem;
}
@media (min-width: 760px) {
	.tatakte-footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}
.tatakte-footer-tagline { color: var(--tatakte-muted); margin: 1rem 0 0; max-width: 30ch; }
.tatakte-footer-heading {
	font-family: var(--tatakte-font-typewriter);
	font-size: 1rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0 0 1rem;
	color: var(--tatakte-darker);
}
.tatakte-footer-menu,
.tatakte-social-links {
	list-style: none;
	margin: 0;
	padding: 0;
}
.tatakte-footer-menu li,
.tatakte-social-links li { margin: 0 0 0.5rem; }
.tatakte-footer-menu a,
.tatakte-social-links a {
	color: var(--tatakte-darker);
	text-decoration: none;
	font-size: 0.9375rem;
	transition: color 0.2s;
}
.tatakte-footer-menu a:hover,
.tatakte-social-links a:hover {
	color: var(--tatakte-accent);
	text-decoration: underline;
}
.tatakte-footer-bottom {
	border-top: 1px solid var(--tatakte-border-light);
	padding-top: 1.5rem;
	font-size: 0.875rem;
	color: var(--tatakte-muted);
	text-align: center;
}
.tatakte-copyright { margin: 0; }

/* =========================================================
   11. Game Mode (Vollbild)
   ========================================================= */
body.tatakte-game-fullscreen {
	margin: 0;
	padding: 0;
	background: #0a0a0a;
	color: var(--tatakte-paper);
	overflow: hidden;
	height: 100vh;
	height: 100dvh;
	font-family: var(--tatakte-font-ui);
}
#tatakte-game-app {
	width: 100%;
	height: 100vh;
	height: 100dvh;
	overflow: auto;
	display: flex;
	flex-direction: column;
}
.tatakte-game-placeholder {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	min-height: 100dvh;
}
.tatakte-game-placeholder-inner {
	text-align: center;
	padding: 2rem;
}
.tatakte-game-placeholder h1 {
	font-family: var(--tatakte-font-typewriter);
	color: var(--tatakte-accent);
	font-size: 3rem;
	margin: 0 0 1rem;
	letter-spacing: 0.06em;
}
.tatakte-game-placeholder p { color: var(--tatakte-paper); }
.tatakte-game-placeholder-meta {
	font-family: var(--tatakte-font-typewriter);
	font-size: 0.8125rem;
	opacity: 0.5;
	margin-top: 2rem;
}

/* =========================================================
   12. Account Mode
   ========================================================= */
.tatakte-account-area {
	padding-top: 3rem;
	padding-bottom: 5rem;
}
.tatakte-account-placeholder {
	background: var(--tatakte-beige);
	border: 1px dashed var(--tatakte-border);
	border-radius: var(--tatakte-radius-md);
	padding: 2rem;
	text-align: center;
	color: var(--tatakte-muted);
}
.tatakte-account-placeholder-meta {
	font-family: var(--tatakte-font-typewriter);
	font-size: 0.8125rem;
	margin-top: 1rem;
}

/* =========================================================
   13. 404 Page
   ========================================================= */
.tatakte-error-area {
	max-width: var(--tatakte-content-narrow);
	padding: 5rem 1.25rem;
	text-align: center;
}
.tatakte-error-stamp {
	display: inline-block;
	font-family: var(--tatakte-font-typewriter);
	font-size: clamp(4rem, 12vw, 7rem);
	color: var(--tatakte-stamp);
	border: 6px solid var(--tatakte-stamp);
	padding: 1rem 2rem;
	transform: rotate(-7deg);
	margin: 0 0 2rem;
	letter-spacing: 0.06em;
	opacity: 0.85;
}
.tatakte-error-title { margin: 0 0 1rem; }
.tatakte-error-message { color: var(--tatakte-muted); font-size: 1.125rem; margin: 0 0 2rem; }
.tatakte-error-actions {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
	margin: 0 0 3rem;
}
.tatakte-error-search h2 { font-size: 1.25rem; margin: 0 0 1rem; }

/* =========================================================
   14. Search Form
   ========================================================= */
.tatakte-search-form {
	display: flex;
	gap: 0.5rem;
	max-width: 480px;
	margin: 0 auto;
}
.tatakte-search-form input { flex: 1; }

/* =========================================================
   15. Comments / Pagination / Misc
   ========================================================= */
.tatakte-no-posts { text-align: center; padding: 3rem 1rem; }
.pagination, .nav-links {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin: 2rem 0;
	flex-wrap: wrap;
}
.page-numbers {
	display: inline-flex;
	min-width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	padding: 0 0.75rem;
	border: 1px solid var(--tatakte-border);
	border-radius: var(--tatakte-radius-sm);
	color: var(--tatakte-darker);
	text-decoration: none;
	font-weight: 500;
}
.page-numbers.current,
.page-numbers:hover {
	background: var(--tatakte-accent);
	border-color: var(--tatakte-accent);
	color: var(--tatakte-paper);
	text-decoration: none;
}

/* WP-Standard-Klassen */
.alignleft { float: left; margin: 0.5em 1.5em 1em 0; }
.alignright { float: right; margin: 0.5em 0 1em 1.5em; }
.aligncenter { display: block; margin: 1.5em auto; }
.wp-caption-text { font-size: 0.875rem; color: var(--tatakte-muted); }

/* Noindex-Marker (Body-Klasse, optional sichtbarer Indikator nur für Eingeloggte) */
body.tatakte-noindex.logged-in::before {
	content: '🔒 Suchmaschinen blockiert';
	position: fixed;
	top: 32px;
	right: 0;
	background: #FFC107;
	color: #1a1a1a;
	padding: 0.4rem 0.8rem;
	font-size: 0.75rem;
	font-weight: 600;
	z-index: 99999;
	border-radius: 0 0 0 4px;
	pointer-events: none;
}

/* =========================================================
   ============== TATAKTE v1.1.0 ERWEITERUNGEN =============
   ========================================================= */

/* Container-Breiten-Varianten (Body-Klassen aus body_class) */
body.tatakte-container-narrow .tatakte-container { max-width: 960px; }
body.tatakte-container-normal .tatakte-container { max-width: 1200px; }
body.tatakte-container-wide   .tatakte-container { max-width: 1400px; }
body.tatakte-container-full   .tatakte-container { max-width: none; padding-left: 32px; padding-right: 32px; }

/* Pattern abschalten via Body-Klasse */
body.tatakte-no-pattern { background-image: none; background: var(--tatakte-paper); }

/* =========================================================
   Header-Stil-Varianten (dark / light / transparent)
   ========================================================= */
body.tatakte-header-dark .tatakte-site-header {
	background: var(--tatakte-darker);
	color: var(--tatakte-paper);
}
body.tatakte-header-dark .tatakte-site-header .tatakte-menu a,
body.tatakte-header-dark .tatakte-site-header .tatakte-account-link,
body.tatakte-header-dark .tatakte-site-header .tatakte-logo-text { color: var(--tatakte-paper); }

body.tatakte-header-light .tatakte-site-header {
	background: var(--tatakte-beige);
	color: var(--tatakte-ink);
	border-bottom: 1px solid var(--tatakte-border);
}
body.tatakte-header-light .tatakte-site-header .tatakte-menu a,
body.tatakte-header-light .tatakte-site-header .tatakte-account-link,
body.tatakte-header-light .tatakte-site-header .tatakte-logo-text { color: var(--tatakte-ink); }

body.tatakte-header-transparent .tatakte-site-header {
	background: transparent;
	color: var(--tatakte-paper);
	border-bottom: none;
	position: absolute; top: 0; left: 0; right: 0;
	z-index: 50;
}
body.tatakte-header-transparent .tatakte-site-header.is-scrolled {
	background: var(--tatakte-darker);
	position: fixed;
}
body.tatakte-header-transparent .tatakte-site-header .tatakte-menu a,
body.tatakte-header-transparent .tatakte-site-header .tatakte-account-link,
body.tatakte-header-transparent .tatakte-site-header .tatakte-logo-text { color: var(--tatakte-paper); }

/* Sticky-Header */
body.tatakte-header-sticky:not(.tatakte-header-transparent) .tatakte-site-header {
	position: sticky; top: 0;
	z-index: 50;
}

/* Logo-Höhe per Variable steuerbar */
.tatakte-header-logo .custom-logo,
.tatakte-header-logo img { max-height: var(--tatakte-logo-height, 40px); width: auto; }

/* =========================================================
   Hero — Layout-Varianten
   ========================================================= */
.tatakte-hero { position: relative; }
.tatakte-hero-overlay {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(26,26,26,0.55), rgba(26,26,26,0.75));
	z-index: 1;
}
.tatakte-hero-has-bg {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.tatakte-hero-has-bg .tatakte-hero-inner { position: relative; z-index: 2; }
.tatakte-hero-has-bg .tatakte-hero-title,
.tatakte-hero-has-bg .tatakte-hero-kicker,
.tatakte-hero-has-bg .tatakte-hero-subtitle { color: var(--tatakte-paper); }

/* Hero-Höhen */
.tatakte-hero-height-small      .tatakte-hero-inner { padding: 3rem 0; min-height: 280px; }
.tatakte-hero-height-medium     .tatakte-hero-inner { padding: 5rem 0; min-height: 420px; }
.tatakte-hero-height-large      .tatakte-hero-inner { padding: 7rem 0; min-height: 560px; }
.tatakte-hero-height-fullscreen .tatakte-hero-inner { padding: 5rem 0; min-height: calc(100vh - var(--tatakte-header-height, 72px)); display: flex; align-items: center; }
.tatakte-hero-height-fullscreen .tatakte-hero-inner > .tatakte-hero-content { width: 100%; }

/* Layout: split (Standard) — bereits via .tatakte-hero-content + .tatakte-hero-visual */
.tatakte-hero-layout-split .tatakte-hero-inner {
	display: grid; gap: 3rem; align-items: center;
}
@media (min-width: 880px) {
	.tatakte-hero-layout-split .tatakte-hero-inner { grid-template-columns: 1.3fr 1fr; }
}
.tatakte-hero-layout-split .tatakte-hero-visual-side { display: flex; justify-content: center; }

/* Layout: centered — Stempel über Text, alles mittig */
.tatakte-hero-layout-centered .tatakte-hero-inner {
	display: flex; flex-direction: column; align-items: center; text-align: center;
	gap: 2rem;
}
.tatakte-hero-layout-centered .tatakte-hero-content { max-width: 760px; }
.tatakte-hero-layout-centered .tatakte-hero-actions { justify-content: center; }
.tatakte-hero-layout-centered .tatakte-hero-visual-top { order: -1; }

/* Layout: minimal — nur Text, kein Stempel */
.tatakte-hero-layout-minimal .tatakte-hero-inner { display: block; max-width: 760px; }
/* Die Regel „.tatakte-hero-layout-minimal .tatakte-hero-visual { display:none }"
   ist seit v2.3.0 ueberfluessig: Bei Layout „minimal" erzeugt der Renderer das
   Visual gar nicht erst. Sie stand hier mit !important und verstiess damit
   gegen die Hausregel — entfernt statt entschaerft. */

/* =========================================================
   Features — Icon-Support
   ========================================================= */
.tatakte-feature { position: relative; }
.tatakte-feature-icon {
	display: inline-block;
	font-size: 2rem;
	line-height: 1;
	margin-bottom: 0.75rem;
}

/* =========================================================
   How-To Steps
   ========================================================= */
.tatakte-section-howto { background: var(--tatakte-beige); }
.tatakte-howto-list {
	list-style: none; padding: 0; margin: 0;
	display: grid; gap: 2rem;
}
@media (min-width: 720px) {
	.tatakte-howto-list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.tatakte-howto-list { grid-template-columns: repeat(4, 1fr); }
}
.tatakte-howto-step {
	background: var(--tatakte-paper);
	border: 1px solid var(--tatakte-border);
	border-radius: var(--tatakte-radius-md);
	padding: 1.5rem;
	display: flex; flex-direction: column; gap: 0.75rem;
	box-shadow: var(--tatakte-shadow-sm);
}
.tatakte-howto-num {
	font-family: var(--tatakte-font-typewriter);
	font-size: 2.25rem; line-height: 1;
	color: var(--tatakte-accent);
}
.tatakte-howto-title { margin: 0; font-size: 1.125rem; }
.tatakte-howto-text { margin: 0; color: var(--tatakte-muted); font-size: 0.95rem; }

/* =========================================================
   Stats
   ========================================================= */
.tatakte-section-stats { padding: 4rem 0; background: var(--tatakte-darker); color: var(--tatakte-paper); }
.tatakte-stats-grid {
	display: grid; gap: 2rem;
	grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 720px) {
	.tatakte-stats-grid { grid-template-columns: repeat(4, 1fr); }
}
.tatakte-stat { text-align: center; }
.tatakte-stat-value {
	font-family: var(--tatakte-font-typewriter);
	font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1;
	color: var(--tatakte-accent);
	margin-bottom: 0.5rem;
}
.tatakte-stat-label {
	font-size: 0.95rem; letter-spacing: 0.04em;
	text-transform: uppercase; opacity: 0.85;
}

/* =========================================================
   Testimonials
   ========================================================= */
.tatakte-section-testimonials { padding: 4rem 0; }
.tatakte-testimonials-grid {
	display: grid; gap: 2rem;
}
@media (min-width: 880px) {
	.tatakte-testimonials-grid { grid-template-columns: repeat(3, 1fr); }
}
.tatakte-testimonial {
	background: var(--tatakte-paper);
	border: 1px solid var(--tatakte-border);
	border-left: 4px solid var(--tatakte-accent);
	border-radius: var(--tatakte-radius-md);
	padding: 1.75rem;
	margin: 0;
	box-shadow: var(--tatakte-shadow-sm);
}
.tatakte-testimonial-quote { margin: 0 0 1rem; }
.tatakte-testimonial-quote p {
	margin: 0;
	font-family: var(--tatakte-font-handwriting);
	font-size: 1.25rem; line-height: 1.5;
	color: var(--tatakte-darker);
}
.tatakte-testimonial-cite { font-size: 0.875rem; color: var(--tatakte-muted); }
.tatakte-testimonial-author { display: block; font-weight: 600; color: var(--tatakte-ink); }
.tatakte-testimonial-role { display: block; font-style: italic; }

/* =========================================================
   FAQ — Akkordeon
   ========================================================= */
.tatakte-section-faq { padding: 4rem 0; background: var(--tatakte-beige); }
.tatakte-faq-list { max-width: 760px; margin: 0 auto; }
.tatakte-faq-item {
	background: var(--tatakte-paper);
	border: 1px solid var(--tatakte-border);
	border-radius: var(--tatakte-radius-md);
	margin-bottom: 1rem;
	overflow: hidden;
}
.tatakte-faq-question {
	display: flex; justify-content: space-between; align-items: center;
	padding: 1rem 1.25rem;
	cursor: pointer;
	font-weight: 600;
	list-style: none;
	font-family: var(--tatakte-font-typewriter);
	color: var(--tatakte-darker);
}
.tatakte-faq-question::-webkit-details-marker { display: none; }
.tatakte-faq-question::marker { content: ''; }
.tatakte-faq-icon {
	display: inline-block;
	width: 24px; height: 24px;
	border-radius: 50%;
	background: var(--tatakte-accent);
	color: var(--tatakte-paper);
	text-align: center; line-height: 24px;
	font-size: 1.1rem;
	transition: transform 0.2s ease;
	flex-shrink: 0;
	margin-left: 1rem;
}
.tatakte-faq-item[open] .tatakte-faq-icon { transform: rotate(45deg); }
.tatakte-faq-answer {
	padding: 0 1.25rem 1.25rem;
	color: var(--tatakte-ink);
	border-top: 1px dashed var(--tatakte-border);
	padding-top: 1rem;
}
.tatakte-faq-answer p { margin: 0 0 0.75em; }

/* =========================================================
   CTA-Band — Untertitel
   ========================================================= */
.tatakte-cta-band-subtitle { margin: 0.5rem 0 1.5rem; opacity: 0.85; max-width: 560px; margin-left: auto; margin-right: auto; }

/* =========================================================
   Footer-Modus: Widgets
   ========================================================= */
.tatakte-footer-mode-widgets .tatakte-footer-widgets-grid {
	display: grid; gap: 2rem;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	margin-bottom: 2rem;
}
.tatakte-footer-widgets-col .widget { margin-bottom: 1.5rem; }
.tatakte-footer-widgets-col .widget-title { color: var(--tatakte-paper); font-family: var(--tatakte-font-typewriter); }

/* Footer-Bottom-Layout (Copyright + Made-in) */
.tatakte-footer-bottom {
	display: flex; flex-wrap: wrap; gap: 1rem;
	justify-content: space-between; align-items: center;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	margin-top: 2rem;
	font-size: 0.875rem;
}
.tatakte-madein { margin: 0; opacity: 0.7; }
.tatakte-madein a { color: inherit; text-decoration: underline; }

/* =========================================================
   Plugin-fehlt-Hinweis (nur Admin sichtbar)
   ========================================================= */
.tatakte-plugin-missing {
	background: #FFF3CD;
	color: #856404;
	border: 1px solid #FFEEBA;
	border-left: 4px solid #FFB100;
	padding: 1rem 1.25rem;
	border-radius: var(--tatakte-radius-sm);
	margin: 1rem 0;
	font-size: 0.95rem;
}
.tatakte-plugin-missing strong { display: block; margin-bottom: 0.25rem; }

/* =========================================================
   Plugin-aktiv-Hinweis (Body-Klasse)
   ========================================================= */
body.tatakte-plugin-active .tatakte-cases-shop-wrap,
body.tatakte-plugin-active .tatakte-leaderboard-wrap { min-height: 100px; }

/* =========================================================
   Game-Page Fullscreen Anpassungen
   ========================================================= */
body.tatakte-game-mode { overflow: hidden; }

/* =========================================================
   Print-Optimierung (Akten-Look beibehalten, aber Tinten-sparend)
   ========================================================= */
@media print {
	body { background: white; color: black; }
	.tatakte-site-header, .tatakte-site-footer, .tatakte-hero-actions, .tatakte-cta-band { display: none; }
	.tatakte-hero { padding: 1rem 0; }
	a { color: black; text-decoration: underline; }
}

/* =========================================================
   Reduced Motion: Animationen abschalten
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
	* { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* =========================================================
   ============== TATAKTE v1.2.0 ERWEITERUNGEN =============
   ========================================================= */

/* =========================================================
   Features — Layout-Varianten (cards / iconleft / minimal)
   ========================================================= */
.tatakte-feature-body { display: contents; } /* Default: kein extra Wrapper */

/* Layout: cards (Default) — wie v1.1.0 */
.tatakte-features-layout-cards .tatakte-feature {
	display: flex;
	flex-direction: column;
}
.tatakte-features-layout-cards .tatakte-feature-icon { font-size: 2rem; margin-bottom: 0.75rem; }

/* Layout: iconleft — Icon links neben Text */
.tatakte-features-layout-iconleft .tatakte-feature {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1.25rem;
	align-items: start;
}
.tatakte-features-layout-iconleft .tatakte-feature-icon {
	font-size: 2.5rem;
	line-height: 1;
	flex-shrink: 0;
	margin: 0;
}
.tatakte-features-layout-iconleft .tatakte-feature-num {
	grid-column: 2;
	font-size: 1rem;
	margin-bottom: 0.25rem;
}
.tatakte-features-layout-iconleft .tatakte-feature-body {
	grid-column: 2;
	display: block;
}

/* Layout: minimal — nur Liste mit Nummer, kein Icon, kein Box */
.tatakte-features-layout-minimal .tatakte-features-grid {
	grid-template-columns: 1fr;
	max-width: 760px;
	margin: 0 auto;
}
.tatakte-features-layout-minimal .tatakte-feature {
	background: transparent;
	border: none;
	border-bottom: 1px dashed var(--tatakte-border);
	box-shadow: none;
	padding: 1.25rem 0;
	border-radius: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1.5rem;
	align-items: baseline;
}
.tatakte-features-layout-minimal .tatakte-feature:hover {
	transform: none;
	box-shadow: none;
}
.tatakte-features-layout-minimal .tatakte-feature-icon { display: none; }
.tatakte-features-layout-minimal .tatakte-feature-num {
	font-size: 1.5rem;
	margin: 0;
	min-width: 2.5rem;
}
.tatakte-features-layout-minimal .tatakte-feature h3 {
	margin: 0 0 0.25rem;
}

/* =========================================================
   Stats — Layout-Varianten (bold / compact)
   ========================================================= */
.tatakte-stats-layout-compact { padding: 2.5rem 0; }
.tatakte-stats-layout-compact .tatakte-stat-value {
	font-size: clamp(1.75rem, 3vw, 2.5rem);
}
.tatakte-stats-layout-compact .tatakte-stat-label {
	font-size: 0.8rem;
	letter-spacing: 0.06em;
}
.tatakte-stats-layout-compact .tatakte-stats-grid {
	gap: 1rem;
}

/* Counter-Animation: smooth font rendering */
[data-tatakte-counter] {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}

/* =========================================================
   Testimonials — Slider-Layout
   ========================================================= */
.tatakte-testimonials-layout-slider .tatakte-testimonials-grid {
	display: block;
	position: relative;
	max-width: 720px;
	margin: 0 auto;
	min-height: 220px;
}
.tatakte-testimonials-layout-slider .tatakte-testimonial {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.4s ease;
	pointer-events: none;
}
.tatakte-testimonials-layout-slider .tatakte-testimonial.is-active {
	opacity: 1;
	pointer-events: auto;
	position: relative;
}
.tatakte-testimonials-dots {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 1.5rem;
}
.tatakte-testimonials-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--tatakte-border);
	border: none;
	padding: 0;
	cursor: pointer;
	transition: background 0.2s;
}
.tatakte-testimonials-dot:hover { background: var(--tatakte-muted); }
.tatakte-testimonials-dot.is-active { background: var(--tatakte-accent); }

/* =========================================================
   News / Posts-Loop
   ========================================================= */
.tatakte-section-news { padding: 4rem 0; }
.tatakte-news-grid {
	display: grid;
	gap: 2rem;
}

/* Layout: grid (3 Spalten) */
.tatakte-news-layout-grid .tatakte-news-grid {
	grid-template-columns: 1fr;
}
@media (min-width: 720px) {
	.tatakte-news-layout-grid .tatakte-news-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.tatakte-news-layout-grid .tatakte-news-grid { grid-template-columns: repeat(3, 1fr); }
}
.tatakte-news-layout-grid .tatakte-news-item {
	background: var(--tatakte-paper);
	border: 1px solid var(--tatakte-border);
	border-radius: var(--tatakte-radius-md);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: var(--tatakte-shadow-sm);
}
.tatakte-news-layout-grid .tatakte-news-thumb { display: block; }
.tatakte-news-layout-grid .tatakte-news-thumb img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}
.tatakte-news-layout-grid .tatakte-news-body { padding: 1.5rem; }

/* Layout: list (Bild links, Text rechts) */
.tatakte-news-layout-list .tatakte-news-grid {
	grid-template-columns: 1fr;
}
.tatakte-news-layout-list .tatakte-news-item {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--tatakte-border);
}
@media (min-width: 720px) {
	.tatakte-news-layout-list .tatakte-news-item {
		grid-template-columns: 240px 1fr;
		align-items: start;
	}
}
.tatakte-news-layout-list .tatakte-news-thumb img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--tatakte-radius-md);
}
.tatakte-news-layout-list .tatakte-news-body { padding: 0; }

/* Gemeinsame News-Item-Styles */
.tatakte-news-title {
	font-family: var(--tatakte-font-typewriter);
	font-size: 1.25rem;
	margin: 0 0 0.5rem;
	line-height: 1.3;
}
.tatakte-news-title a {
	color: var(--tatakte-darker);
	text-decoration: none;
}
.tatakte-news-title a:hover { color: var(--tatakte-accent); }
.tatakte-news-meta {
	font-size: 0.85rem;
	color: var(--tatakte-muted);
	margin-bottom: 0.75rem;
}
.tatakte-news-excerpt {
	color: var(--tatakte-ink);
	margin-bottom: 1rem;
	font-size: 0.95rem;
}
.tatakte-news-excerpt p { margin: 0 0 0.5em; }
.tatakte-news-readmore {
	display: inline-block;
	font-weight: 600;
	color: var(--tatakte-accent);
	text-decoration: none;
}
.tatakte-news-readmore:hover { text-decoration: underline; }

/* =========================================================
   Custom-Slot-Sections
   ========================================================= */
.tatakte-section-custom { padding: 3.5rem 0; }
.tatakte-custom-bg-paper { background: var(--tatakte-paper); }
.tatakte-custom-bg-beige { background: var(--tatakte-beige); }
.tatakte-custom-bg-dark {
	background: var(--tatakte-darker);
	color: var(--tatakte-paper);
}
.tatakte-custom-bg-dark h1,
.tatakte-custom-bg-dark h2,
.tatakte-custom-bg-dark h3 { color: var(--tatakte-paper); }

.tatakte-custom-content {
	max-width: 760px;
	margin: 0 auto;
}
.tatakte-custom-content p { margin-bottom: 1em; }
.tatakte-custom-actions {
	text-align: center;
	margin-top: 1.5rem;
}

/* Callout-Variante: Akzent-Border, hervorgehoben */
.tatakte-custom-type-callout .tatakte-container {
	max-width: 720px;
	background: var(--tatakte-paper);
	border-left: 4px solid var(--tatakte-accent);
	border-radius: var(--tatakte-radius-md);
	padding: 2rem 2.5rem;
	box-shadow: var(--tatakte-shadow-md);
}
.tatakte-custom-bg-dark.tatakte-custom-type-callout .tatakte-container {
	background: rgba(255, 255, 255, 0.05);
}

/* =========================================================
   ============== TATAKTE v1.3.0 — DYNAMIC SECTIONS ========
   ========================================================= */

/* Wrapper-System: BG, Padding, Width */
.tatakte-dyn-section {
	position: relative;
	width: 100%;
}

/* Hintergründe */
.tatakte-dyn-bg-paper  { background: var(--tatakte-paper); color: var(--tatakte-ink); }
.tatakte-dyn-bg-beige  { background: var(--tatakte-beige); color: var(--tatakte-ink); }
.tatakte-dyn-bg-dark   { background: var(--tatakte-darker); color: var(--tatakte-paper); }
.tatakte-dyn-bg-accent { background: var(--tatakte-accent); color: #fff; }

.tatakte-dyn-bg-dark h1, .tatakte-dyn-bg-dark h2, .tatakte-dyn-bg-dark h3,
.tatakte-dyn-bg-accent h1, .tatakte-dyn-bg-accent h2, .tatakte-dyn-bg-accent h3 {
	color: inherit;
}

/* Padding */
/* v2.6.0: Abstaende um rund ein Drittel verkleinert. Vorher wirkten die
   Bloecke auseinandergerissen, besonders auf grossen Bildschirmen. */
.tatakte-dyn-pad-small  { padding-top: 1.4rem; padding-bottom: 1.4rem; }
.tatakte-dyn-pad-medium { padding-top: 2.6rem; padding-bottom: 2.6rem; }
.tatakte-dyn-pad-large  { padding-top: 4rem;   padding-bottom: 4rem; }

/* Container — zentriert, max-width je nach Width-Setting */
.tatakte-dyn-container {
	margin-left: auto;
	margin-right: auto;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}
.tatakte-dyn-width-narrow .tatakte-dyn-container { max-width: 700px;  }
.tatakte-dyn-width-normal .tatakte-dyn-container { max-width: 1000px; }
.tatakte-dyn-width-wide   .tatakte-dyn-container { max-width: 1200px; }
.tatakte-dyn-width-full   .tatakte-dyn-container { max-width: 100%;   }

/* Padding bei Section-mit-Divider etwas kompensieren */
.tatakte-dyn-section .tatakte-divider + .tatakte-dyn-container { padding-top: 1rem; }

/* ============== DIVIDERS ============== */
.tatakte-divider {
	display: block;
	width: 100%;
	color: var(--tatakte-border);
	line-height: 0;
	overflow: hidden;
	pointer-events: none;
}
.tatakte-divider-svg {
	display: block;
	width: 100%;
	height: 24px;
}
.tatakte-divider-stamp-svg { height: 60px; }
.tatakte-divider-torn-svg  { height: 30px; }

/* Stamp-Divider in Akzentfarbe */
.tatakte-divider-type-stamp { color: var(--tatakte-accent); }

/* Auf dunklem BG sichtbarer Divider */
.tatakte-dyn-bg-dark .tatakte-divider,
.tatakte-dyn-bg-accent .tatakte-divider {
	color: rgba(255, 255, 255, 0.35);
}
.tatakte-dyn-bg-dark .tatakte-divider-type-stamp,
.tatakte-dyn-bg-accent .tatakte-divider-type-stamp {
	color: rgba(255, 255, 255, 0.6);
}

/* ============== DYN HERO ============== */
.tatakte-dyn-hero { width: 100%; }
.tatakte-dyn-hero .tatakte-hero-inner { padding: 0; }

/* ============== DYN HEADING-TEXT ============== */
.tatakte-dyn-heading-text { width: 100%; }
.tatakte-dyn-heading-text.tatakte-align-center {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
.tatakte-dyn-heading-text.tatakte-align-center .tatakte-section-heading,
.tatakte-dyn-heading-text.tatakte-align-center .tatakte-dyn-text {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}
.tatakte-dyn-heading-text.tatakte-align-left { text-align: left; }
.tatakte-dyn-text p { margin: 0 0 1em; line-height: 1.6; }
.tatakte-dyn-actions {
	margin-top: 1.5rem;
	text-align: center;
}
.tatakte-dyn-heading-text.tatakte-align-left .tatakte-dyn-actions { text-align: left; }

/* ============== DYN STATS ============== */
.tatakte-dyn-stats { width: 100%; }
.tatakte-dyn-stats .tatakte-stats-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
	text-align: center;
}
@media (min-width: 720px) {
	.tatakte-dyn-stats .tatakte-stats-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ============== DYN TESTIMONIALS ============== */
.tatakte-dyn-testimonials { width: 100%; }

/* ============== DYN HOW-TO ============== */
.tatakte-dyn-howto .tatakte-howto-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 1.25rem;
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}
.tatakte-howto-item {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1.25rem;
	align-items: start;
	padding: 1rem 0;
	border-bottom: 1px dashed var(--tatakte-border);
}
.tatakte-howto-item:last-child { border-bottom: 0; }
.tatakte-howto-num {
	font-family: var(--tatakte-font-typewriter);
	font-size: 1.75rem;
	color: var(--tatakte-accent);
	font-weight: 700;
	min-width: 2.5rem;
}
.tatakte-howto-title {
	margin: 0 0 0.25rem;
	font-size: 1.15rem;
}
.tatakte-howto-text { margin: 0; line-height: 1.55; }

/* ============== DYN CTA-BAND ============== */
.tatakte-dyn-ctaband { text-align: center; }
.tatakte-ctaband-title  { font-size: clamp(1.5rem, 3vw, 2.25rem); margin: 0 0 0.5rem; }
.tatakte-ctaband-subtitle { font-size: 1.05rem; opacity: 0.85; margin: 0 0 1.5rem; max-width: 640px; margin-left: auto; margin-right: auto; }
.tatakte-ctaband-actions { margin-top: 1rem; }

.tatakte-ctaband-style-dark { background: var(--tatakte-darker); color: var(--tatakte-paper); padding: 1rem 0; }
.tatakte-ctaband-style-red  { background: var(--tatakte-accent); color: #fff; padding: 1rem 0; }
.tatakte-ctaband-style-soft { background: var(--tatakte-beige); padding: 1rem 0; }
/* WICHTIG: Wenn das CTA-Band selbst den Wrapper-BG nutzt, kein zusätzlicher Hintergrund. Das wird über Section-Wrapper-BG gesetzt. */
.tatakte-dyn-section .tatakte-ctaband-style-dark,
.tatakte-dyn-section .tatakte-ctaband-style-red,
.tatakte-dyn-section .tatakte-ctaband-style-soft {
	background: transparent;
	padding: 0;
}

/* ============== DYN IMAGE-TEXT ============== */
.tatakte-dyn-imagetext {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	align-items: center;
}
@media (min-width: 760px) {
	.tatakte-dyn-imagetext { grid-template-columns: 1fr 1fr; }
	.tatakte-dyn-imagetext.tatakte-imagetext-pos-left .tatakte-imagetext-image { order: 1; }
	.tatakte-dyn-imagetext.tatakte-imagetext-pos-left .tatakte-imagetext-text  { order: 2; }
}
.tatakte-imagetext-kicker {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tatakte-accent);
	border: 1px dashed var(--tatakte-accent);
	padding: 4px 10px;
	border-radius: 3px;
	margin-bottom: 1rem;
}
.tatakte-imagetext-title { margin: 0 0 1rem; }
.tatakte-imagetext-body p { line-height: 1.6; margin: 0 0 1em; }
.tatakte-imagetext-actions { margin-top: 1rem; }
.tatakte-imagetext-image img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--tatakte-radius-md);
	box-shadow: var(--tatakte-shadow-md);
}
/* Wenn kein Bild: Text nimmt volle Breite */
.tatakte-dyn-imagetext:not(:has(.tatakte-imagetext-image)) {
	grid-template-columns: 1fr;
}

/* ============== DYN CALLOUT ============== */
.tatakte-dyn-callout {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 1.25rem;
	align-items: center;
	max-width: 720px;
	margin: 0 auto;
	background: var(--tatakte-paper);
	border-left: 4px solid var(--tatakte-accent);
	border-radius: var(--tatakte-radius-md);
	padding: 1.25rem 1.5rem;
	box-shadow: var(--tatakte-shadow-sm);
}
.tatakte-dyn-bg-dark .tatakte-dyn-callout {
	background: rgba(255,255,255,0.04);
	color: var(--tatakte-paper);
}
.tatakte-callout-icon { font-size: 1.75rem; line-height: 1; }
.tatakte-callout-body {}
.tatakte-callout-title { margin: 0 0 0.25rem; font-size: 1.05rem; }
.tatakte-callout-text { margin: 0; line-height: 1.5; }
@media (max-width: 600px) {
	.tatakte-dyn-callout {
		grid-template-columns: auto 1fr;
	}
	.tatakte-callout-btn { grid-column: 1 / -1; justify-self: start; }
}

/* =========================================================
   ============== TATAKTE v1.4.0 — POLISH & NEUE TYPES =====
   ========================================================= */

/* ============== Akten-Reiter (oben am Hero) ============== */
.tatakte-section-hero,
.tatakte-dyn-type-hero {
	position: relative;
}
.tatakte-section-hero::before,
.tatakte-dyn-type-hero::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 220px;
	height: 12px;
	background:
		linear-gradient(to bottom, var(--tatakte-accent) 0, var(--tatakte-accent) 8px, transparent 8px, transparent 12px),
		linear-gradient(to right, transparent 0, transparent 8px, var(--tatakte-accent) 8px, var(--tatakte-accent) 212px, transparent 212px);
	clip-path: polygon(8px 0, 212px 0, 220px 12px, 0 12px);
	opacity: 0.85;
	pointer-events: none;
	z-index: 1;
}
@media (max-width: 600px) {
	.tatakte-section-hero::before,
	.tatakte-dyn-type-hero::before { width: 140px; clip-path: polygon(6px 0, 134px 0, 140px 12px, 0 12px); }
}

/* ============== Card-Polish: Schreibmaschinen-Schatten ============== */
.tatakte-feature,
.tatakte-news-item,
.tatakte-dyn-callout,
.tatakte-testimonial {
	position: relative;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.tatakte-feature:hover,
.tatakte-news-item:hover,
.tatakte-dyn-callout:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0,0,0,0.08), 0 0 0 1px var(--tatakte-accent);
}

/* ============== Buttons: Schreibmaschinen-Hover ============== */
.tatakte-button {
	transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
	position: relative;
}
.tatakte-button-primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(139, 0, 0, 0.32);
}
.tatakte-button-primary:active {
	transform: translateY(1px);
	box-shadow: 0 1px 4px rgba(139, 0, 0, 0.2);
}
.tatakte-button-ghost:hover {
	background: var(--tatakte-paper);
	border-color: var(--tatakte-accent);
	color: var(--tatakte-accent);
}

/* ============== CTA-Band: Stempel-Decoration ============== */
.tatakte-ctaband-style-dark .tatakte-ctaband-title::before,
.tatakte-ctaband-style-red .tatakte-ctaband-title::before {
	content: '✶';
	display: inline-block;
	margin-right: 0.6em;
	color: var(--tatakte-accent);
	font-size: 0.7em;
	transform: translateY(-4px);
	opacity: 0.7;
}
.tatakte-ctaband-style-red .tatakte-ctaband-title::before { color: rgba(255,255,255,0.8); }

/* ============== DYN NEWS ============== */
.tatakte-dyn-news .tatakte-news-grid {
	display: grid;
	gap: 2rem;
}
.tatakte-news-layout-grid .tatakte-news-grid { grid-template-columns: 1fr; }
@media (min-width: 720px)  { .tatakte-news-layout-grid .tatakte-news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tatakte-news-layout-grid .tatakte-news-grid { grid-template-columns: repeat(3, 1fr); } }
.tatakte-news-layout-grid .tatakte-news-item {
	background: var(--tatakte-paper);
	border: 1px solid var(--tatakte-border);
	border-radius: var(--tatakte-radius-md);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: var(--tatakte-shadow-sm);
}
.tatakte-news-layout-grid .tatakte-news-thumb img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
}
.tatakte-news-layout-grid .tatakte-news-body { padding: 1.5rem; }

.tatakte-news-layout-list .tatakte-news-grid { grid-template-columns: 1fr; }
.tatakte-news-layout-list .tatakte-news-item {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--tatakte-border);
}
@media (min-width: 720px) {
	.tatakte-news-layout-list .tatakte-news-item {
		grid-template-columns: 240px 1fr;
		align-items: start;
	}
}
.tatakte-news-layout-list .tatakte-news-thumb img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--tatakte-radius-md);
}

.tatakte-news-title {
	font-family: var(--tatakte-font-typewriter);
	font-size: 1.25rem;
	margin: 0 0 0.5rem;
	line-height: 1.3;
}
.tatakte-news-title a { color: var(--tatakte-darker); text-decoration: none; }
.tatakte-news-title a:hover { color: var(--tatakte-accent); }
.tatakte-news-meta { font-size: 0.85rem; color: var(--tatakte-muted); margin-bottom: 0.75rem; }
.tatakte-news-excerpt { color: var(--tatakte-ink); margin-bottom: 1rem; font-size: 0.95rem; }
.tatakte-news-excerpt p { margin: 0 0 0.5em; }
.tatakte-news-readmore { display: inline-block; font-weight: 600; color: var(--tatakte-accent); text-decoration: none; }
.tatakte-news-readmore:hover { text-decoration: underline; }

/* ============== DYN FAQ ============== */
.tatakte-dyn-faq {
	max-width: 760px;
	margin: 0 auto;
}
.tatakte-dyn-faq .tatakte-faq-item {
	background: var(--tatakte-paper);
	border: 1px solid var(--tatakte-border);
	border-radius: var(--tatakte-radius-md);
	margin-bottom: 0.75rem;
	overflow: hidden;
	transition: border-color 0.15s;
}
.tatakte-dyn-faq .tatakte-faq-item[open] { border-color: var(--tatakte-accent); }
.tatakte-dyn-faq .tatakte-faq-q {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.25rem;
	cursor: pointer;
	font-weight: 600;
	font-family: var(--tatakte-font-typewriter);
	list-style: none;
	user-select: none;
}
.tatakte-dyn-faq .tatakte-faq-q::-webkit-details-marker { display: none; }
.tatakte-dyn-faq .tatakte-faq-toggle {
	font-size: 1.4rem;
	color: var(--tatakte-accent);
	transition: transform 0.2s;
	line-height: 1;
}
.tatakte-dyn-faq .tatakte-faq-item[open] .tatakte-faq-toggle { transform: rotate(45deg); }
.tatakte-dyn-faq .tatakte-faq-a {
	padding: 0 1.25rem 1.25rem;
	color: var(--tatakte-ink);
	line-height: 1.6;
}
.tatakte-dyn-faq .tatakte-faq-a p { margin: 0 0 0.75em; }

/* ============== DYN LOGOS ============== */
.tatakte-dyn-logos {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2rem;
	align-items: center;
	justify-items: center;
}
@media (min-width: 600px) { .tatakte-dyn-logos { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .tatakte-dyn-logos { grid-template-columns: repeat(4, 1fr); } }
.tatakte-dyn-logos[data-count="5"],
.tatakte-dyn-logos[data-count="6"],
.tatakte-dyn-logos[data-count="7"],
.tatakte-dyn-logos[data-count="8"] {
	grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 600px) {
	.tatakte-dyn-logos[data-count="5"],
	.tatakte-dyn-logos[data-count="6"] { grid-template-columns: repeat(3, 1fr); }
	.tatakte-dyn-logos[data-count="7"],
	.tatakte-dyn-logos[data-count="8"] { grid-template-columns: repeat(4, 1fr); }
}
.tatakte-logo-item {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 160px;
	width: 100%;
	transition: opacity 0.2s;
	filter: grayscale(100%);
	opacity: 0.7;
}
.tatakte-logo-item:hover {
	filter: grayscale(0%);
	opacity: 1;
}
.tatakte-logo-item img {
	max-width: 100%;
	height: auto;
	max-height: 60px;
	display: block;
}

/* ============== DYN VIDEO ============== */
.tatakte-dyn-video {
	max-width: 960px;
	margin: 0 auto;
	position: relative;
}
.tatakte-video-cover {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--tatakte-darker) center/cover no-repeat;
	border-radius: var(--tatakte-radius-md);
	overflow: hidden;
	cursor: pointer;
}
.tatakte-video-cover::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.32);
	transition: background 0.2s;
}
.tatakte-video-cover:hover::after { background: rgba(0,0,0,0.18); }
.tatakte-video-play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
	z-index: 2;
	transition: transform 0.2s;
}
.tatakte-video-play:hover { transform: translate(-50%, -50%) scale(1.08); }
.tatakte-video-iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--tatakte-radius-md);
}
.tatakte-video-consent {
	margin: 0.75rem 0 0;
	font-size: 0.8rem;
	color: var(--tatakte-muted);
	text-align: center;
	line-height: 1.5;
	font-style: italic;
}

/* ============== DYN SPACER ============== */
.tatakte-dyn-spacer { min-height: 1px; }

/* ============== Footer-Polish: Akten-Stempel am Ende ============== */
.tatakte-footer-mode-classic .tatakte-footer-bottom::after,
.tatakte-footer-mode-widgets .tatakte-footer-bottom::after {
	content: 'AKTE GESCHLOSSEN';
	display: block;
	margin-top: 1rem;
	font-family: var(--tatakte-font-typewriter);
	font-size: 0.75rem;
	letter-spacing: 0.3em;
	color: rgba(255,255,255,0.18);
	text-align: center;
	padding: 6px 0;
	border-top: 1px dashed rgba(255,255,255,0.1);
	border-bottom: 1px dashed rgba(255,255,255,0.1);
}

/* ============== 404-Page Polish ============== */
.tatakte-404 {
	max-width: 720px;
	margin: 4rem auto;
	padding: 3rem 2rem;
	text-align: center;
	background: var(--tatakte-paper);
	border: 2px dashed var(--tatakte-accent);
	border-radius: var(--tatakte-radius-md);
}
.tatakte-404-stamp {
	display: inline-block;
	font-family: var(--tatakte-font-typewriter);
	font-size: 1rem;
	letter-spacing: 0.25em;
	color: var(--tatakte-accent);
	border: 2px solid var(--tatakte-accent);
	padding: 8px 20px;
	margin-bottom: 1.5rem;
	transform: rotate(-3deg);
	font-weight: 700;
}
.tatakte-404 h1 {
	font-size: clamp(2rem, 4vw, 3rem);
	margin: 0.5rem 0;
}
.tatakte-404 p { line-height: 1.6; max-width: 520px; margin: 1rem auto; }

/* =========================================================
   ============== v1.4.1 — SPACING HOTFIX ==================
   "Überschriften kleben am oberen Container-Rand" — global
   mehr Atemraum für Sections und Cards.
   ========================================================= */

/* Alle Sections bekommen mehr Padding oben/unten */
.tatakte-features,
.tatakte-section-cases,
.tatakte-section-howto,
.tatakte-section-stats,
.tatakte-section-testimonials,
.tatakte-section-faq,
.tatakte-section-news,
.tatakte-section-leaderboard,
.tatakte-section-custom {
	padding-top: 5.5rem;
	padding-bottom: 5.5rem;
}

/* Section-Heading: mehr Luft nach unten */
.tatakte-section-heading {
	margin-bottom: 3.5rem;
}

/* Feature-Cards: mehr Padding oben (Titel kleben sonst) */
.tatakte-feature {
	padding: 2.5rem 2rem 2rem;
}

/* News-Cards Body braucht etwas mehr Top */
.tatakte-news-layout-grid .tatakte-news-body { padding: 1.75rem 1.5rem 1.5rem; }

/* Howto-Cards: Nummer braucht oben Atemluft */
.tatakte-howto-step {
	padding-top: 2rem;
}

/* Cases-Cards (Plugin-gerendert): Body bekommt mehr Top — über generische
   Selektoren, die typische Card-Body-Klassen abdecken */
.tatakte-cases-shop-wrap [class*="-body"],
.tatakte-cases-shop-wrap [class*="-content"],
.tatakte-cases-shop-wrap article > * + * {
	margin-top: 1rem;
}
.tatakte-cases-shop-wrap article {
	padding-top: 1rem;
}

/* Dynamische Builder-Sections: Pad-Medium großzügiger */
.tatakte-dyn-pad-small  { padding-top: 1.8rem; padding-bottom: 1.8rem; }
.tatakte-dyn-pad-medium { padding-top: 3.2rem; padding-bottom: 3.2rem; }
.tatakte-dyn-pad-large  { padding-top: 4.8rem; padding-bottom: 4.8rem; }

/* Dyn-Section-Heading: gleiche margin-bottom wie Fixed */
.tatakte-dyn-section .tatakte-section-heading {
	margin-bottom: 3.5rem;
}

/* Section-Heading: erstes Kind innerhalb tatakte-container bekommt
   keinen oberen Margin-Collapse — dezent oben hervorheben */
.tatakte-container > .tatakte-section-heading:first-child,
.tatakte-dyn-container > .tatakte-section-heading:first-child {
	padding-top: 0.5rem;
}

/* Feature-Body bei iconleft/cards: sicherstellen dass h3 oben Luft hat */
.tatakte-features-layout-iconleft .tatakte-feature h3,
.tatakte-features-layout-cards .tatakte-feature h3 {
	margin-top: 0.25rem;
}

/* Mobile: Sections nicht zu groß */
@media (max-width: 600px) {
	.tatakte-features,
	.tatakte-section-cases,
	.tatakte-section-howto,
	.tatakte-section-stats,
	.tatakte-section-testimonials,
	.tatakte-section-faq,
	.tatakte-section-news,
	.tatakte-section-leaderboard,
	.tatakte-section-custom {
		padding-top: 3.5rem;
		padding-bottom: 3.5rem;
	}
	.tatakte-section-heading { margin-bottom: 2.5rem; }
	.tatakte-dyn-pad-medium { padding-top: 2rem;   padding-bottom: 2rem; }
	.tatakte-dyn-pad-large  { padding-top: 2.6rem; padding-bottom: 2.6rem; }
}

/* =========================================================
   v1.8.0 — Tatakte-Spezial-Templates
   ========================================================= */

/* ============== Pricing-Karte ============== */
.tatakte-dyn-pricing {
	display: flex;
	justify-content: center;
}
.tatakte-pricing-card {
	max-width: 460px;
	width: 100%;
	background: var(--tatakte-paper);
	border: 2px solid var(--tatakte-accent);
	border-radius: var(--tatakte-radius-md);
	padding: 2.5rem 2rem;
	text-align: center;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
	position: relative;
}
.tatakte-pricing-badge {
	display: inline-block;
	background: var(--tatakte-accent);
	color: #fff;
	font-family: var(--tatakte-font-typewriter);
	font-size: 0.75rem;
	letter-spacing: 0.16em;
	padding: 6px 16px;
	border-radius: 20px;
	margin-bottom: 1rem;
	text-transform: uppercase;
}
.tatakte-pricing-title {
	margin: 0 0 1.25rem;
	font-size: 1.4rem;
	line-height: 1.3;
	color: var(--tatakte-darker);
}
.tatakte-pricing-price {
	display: flex;
	justify-content: center;
	align-items: baseline;
	gap: 0.25rem;
	margin: 0 0 0.25rem;
}
.tatakte-pricing-currency {
	font-size: 1.5rem;
	color: var(--tatakte-muted);
	font-weight: 600;
}
.tatakte-pricing-amount {
	font-family: var(--tatakte-font-typewriter);
	font-size: 4rem;
	line-height: 1;
	color: var(--tatakte-accent);
	font-weight: 700;
}
.tatakte-pricing-period {
	color: var(--tatakte-muted);
	font-size: 0.95rem;
	margin-bottom: 1.5rem;
}
.tatakte-pricing-features {
	list-style: none;
	padding: 0;
	margin: 0 0 1.5rem;
	text-align: left;
}
.tatakte-pricing-features li {
	padding: 8px 0;
	border-bottom: 1px dashed var(--tatakte-border);
	display: flex;
	align-items: center;
	gap: 10px;
}
.tatakte-pricing-features li:last-child { border-bottom: 0; }
.tatakte-pricing-check {
	color: var(--tatakte-accent);
	font-weight: 700;
	font-size: 1.1rem;
}
.tatakte-pricing-btn {
	width: 100%;
	display: block;
	padding: 14px 24px;
	font-size: 1.05rem;
	margin-bottom: 0.75rem;
}
.tatakte-pricing-note {
	font-size: 0.8rem;
	color: var(--tatakte-muted);
	font-style: italic;
}

/* ============== Newsletter ============== */
.tatakte-dyn-newsletter {
	display: flex;
	justify-content: center;
}
.tatakte-newsletter-card {
	max-width: 640px;
	width: 100%;
	text-align: center;
	background: var(--tatakte-paper);
	padding: 2.5rem 2rem;
	border-radius: var(--tatakte-radius-md);
	border: 1px dashed var(--tatakte-accent);
	box-shadow: var(--tatakte-shadow-sm);
}
.tatakte-newsletter-kicker {
	display: inline-block;
	font-family: var(--tatakte-font-typewriter);
	font-size: 0.75rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--tatakte-accent);
	border: 1px dashed var(--tatakte-accent);
	padding: 4px 10px;
	border-radius: 3px;
	margin-bottom: 1rem;
}
.tatakte-newsletter-title { margin: 0 0 0.75rem; }
.tatakte-newsletter-lead { margin: 0 0 1.5rem; color: var(--tatakte-ink); }
.tatakte-newsletter-form { margin: 1.5rem 0; }
.tatakte-newsletter-fallback {
	padding: 16px;
	background: rgba(139, 0, 0, 0.04);
	border-radius: 4px;
	color: var(--tatakte-muted);
	font-style: italic;
	font-family: monospace;
	font-size: 0.85rem;
}
.tatakte-newsletter-consent {
	margin: 1rem 0 0;
	font-size: 0.8rem;
	color: var(--tatakte-muted);
	font-style: italic;
}

/* ============== Trust-Strip ============== */
.tatakte-dyn-trust-strip {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2.5rem;
	align-items: center;
	justify-content: center;
}
.tatakte-trust-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--tatakte-ink);
	font-size: 0.95rem;
}
.tatakte-trust-icon {
	font-size: 1.4rem;
	line-height: 1;
}
.tatakte-trust-text { font-weight: 500; }

.tatakte-dyn-bg-dark .tatakte-trust-item { color: var(--tatakte-paper); }

/* ============== Multiplayer-Box ============== */
.tatakte-dyn-multiplayer { width: 100%; }
.tatakte-multiplayer-kicker {
	display: inline-block;
	font-family: var(--tatakte-font-typewriter);
	font-size: 0.75rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--tatakte-accent);
	border: 1px dashed var(--tatakte-accent);
	padding: 4px 10px;
	border-radius: 3px;
	margin-bottom: 0.75rem;
}
.tatakte-multiplayer-visual {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	align-items: center;
	justify-items: center;
	margin: 2rem 0 2.5rem;
	padding: 2rem 1rem;
	background: rgba(139, 0, 0, 0.03);
	border-radius: var(--tatakte-radius-md);
	border: 1px dashed var(--tatakte-border);
}
@media (min-width: 720px) {
	.tatakte-multiplayer-visual {
		grid-template-columns: auto auto 1fr;
		justify-items: start;
	}
}
.tatakte-multiplayer-host { text-align: center; }
.tatakte-multiplayer-circle {
	width: 70px;
	height: 70px;
	border-radius: 50%;
	background: var(--tatakte-paper);
	border: 2px solid var(--tatakte-accent);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.75rem;
	margin-bottom: 0.5rem;
}
.tatakte-multiplayer-host-circle {
	background: var(--tatakte-accent);
	color: #fff;
}
.tatakte-multiplayer-guest-circle {
	width: 48px;
	height: 48px;
	font-size: 1.25rem;
	margin-right: -8px;
	border-color: var(--tatakte-border);
	background: var(--tatakte-paper);
}
.tatakte-multiplayer-arrow {
	display: flex;
	align-items: center;
	color: var(--tatakte-accent);
	width: 80px;
	height: 24px;
	transform: rotate(90deg);
}
@media (min-width: 720px) {
	.tatakte-multiplayer-arrow { transform: none; }
}
.tatakte-multiplayer-guests {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.tatakte-multiplayer-label {
	flex-basis: 100%;
	font-size: 0.85rem;
	color: var(--tatakte-muted);
	margin-top: 0.5rem;
	text-align: center;
}
.tatakte-multiplayer-steps {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}
@media (min-width: 720px) {
	.tatakte-multiplayer-steps { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
}
.tatakte-multiplayer-steps li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	padding: 1rem;
	background: var(--tatakte-paper);
	border: 1px solid var(--tatakte-border);
	border-radius: var(--tatakte-radius-md);
	text-align: center;
}
.tatakte-multiplayer-step-num {
	font-family: var(--tatakte-font-typewriter);
	font-size: 1.5rem;
	color: var(--tatakte-accent);
	font-weight: 700;
}
.tatakte-multiplayer-step-label { font-weight: 500; }
.tatakte-multiplayer-cta { text-align: center; margin-top: 1.5rem; }

/* =========================================================
   v1.9.0 — Header-Builder
   ========================================================= */

/* ============== Top-Bar ============== */
.tatakte-topbar {
	font-size: 0.85rem;
	padding: 8px 0;
	text-align: center;
}
.tatakte-topbar-content { line-height: 1.4; }
.tatakte-topbar-content a {
	color: inherit;
	text-decoration: underline;
	font-weight: 600;
}
.tatakte-topbar-style-accent { background: var(--tatakte-accent); color: #fff; }
.tatakte-topbar-style-dark   { background: var(--tatakte-darker); color: var(--tatakte-paper); }
.tatakte-topbar-style-light  {
	background: var(--tatakte-paper);
	color: var(--tatakte-ink);
	border-bottom: 1px solid var(--tatakte-border);
}

/* ============== Header-Layouts ============== */

/* Default classic — bleibt wie bisher */

/* Centered: Logo zentriert, Navi darunter */
.tatakte-header-layout-centered .tatakte-header-inner {
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
}
.tatakte-header-layout-centered .tatakte-header-logo {
	order: 1;
	margin: 0 auto;
}
.tatakte-header-layout-centered .tatakte-primary-nav {
	order: 2;
	margin: 0 auto;
}
.tatakte-header-layout-centered .tatakte-header-meta {
	position: absolute;
	top: 50%;
	right: 1.5rem;
	transform: translateY(-50%);
}
.tatakte-header-layout-centered .tatakte-site-header {
	position: relative;
}
.tatakte-header-layout-centered .tatakte-menu-toggle {
	position: absolute;
	left: 1rem;
	top: 50%;
	transform: translateY(-50%);
}
@media (max-width: 880px) {
	.tatakte-header-layout-centered .tatakte-header-meta { right: 4rem; }
}

/* Split: Navi links, Logo zentriert, Account rechts */
@media (min-width: 881px) {
	.tatakte-header-layout-split .tatakte-header-inner {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		gap: 1.5rem;
	}
	.tatakte-header-layout-split .tatakte-header-logo { grid-column: 2; justify-self: center; }
	.tatakte-header-layout-split .tatakte-primary-nav { grid-column: 1; justify-self: start; }
	.tatakte-header-layout-split .tatakte-header-meta { grid-column: 3; justify-self: end; }
}

/* Compact: alles in einer Zeile, dichter */
.tatakte-header-layout-compact .tatakte-site-header { padding: 6px 0; }
.tatakte-header-layout-compact .tatakte-header-inner { gap: 1rem; }
.tatakte-header-layout-compact .tatakte-menu a { font-size: 0.9rem; padding: 6px 10px; }
.tatakte-header-layout-compact .tatakte-account-link { padding: 6px 14px; font-size: 0.85rem; }

/* ============== CTA-Button Styles ============== */
a.tatakte-cta-primary,
.tatakte-cta-primary {
	background: var(--tatakte-accent);
	color: #fff;
	padding: 8px 20px;
	border-radius: 4px;
	text-decoration: none;
	font-weight: 600;
	transition: background 0.15s, transform 0.12s;
}
.tatakte-cta-primary:hover { background: var(--tatakte-accent-dark); transform: translateY(-1px); }

a.tatakte-cta-ghost,
.tatakte-cta-ghost {
	background: transparent;
	color: var(--tatakte-ink);
	border: 1.5px solid var(--tatakte-ink);
	padding: 7px 20px;
	border-radius: 4px;
	text-decoration: none;
	font-weight: 600;
	transition: all 0.15s;
}
a.tatakte-cta-ghost:hover,
.tatakte-cta-ghost:hover {
	background: var(--tatakte-ink);
	color: var(--tatakte-paper);
}

a.tatakte-cta-pill,
.tatakte-cta-pill {
	background: var(--tatakte-accent);
	color: #fff;
	padding: 7px 22px;
	border-radius: 999px;
	text-decoration: none;
	font-weight: 600;
	font-family: var(--tatakte-font-typewriter);
	letter-spacing: 0.06em;
	font-size: 0.85rem;
	text-transform: uppercase;
	transition: all 0.15s;
	box-shadow: 0 2px 6px rgba(139, 0, 0, 0.2);
}
.tatakte-cta-pill:hover {
	background: var(--tatakte-accent-dark);
	box-shadow: 0 4px 12px rgba(139, 0, 0, 0.32);
	transform: translateY(-1px);
}

/* ============== Mobile: nur Logo + Burger ============== */
@media (max-width: 880px) {
	.tatakte-header-mobile-logo-only .tatakte-header-meta { display: none; }
}

/* =========================================================
 * v2.2.1 — Styling für Section-Typen aus v2.0.0
 * Diese Klassen wurden mit den neuen Typen eingeführt, hatten
 * aber bisher keine Regeln (Befund F7).
 * ========================================================= */

/* Plugin-Sections: Shop-Liste und Rangliste bekommen denselben
   Rahmen wie die übrigen Inhaltsblöcke. Das eigentliche Markup
   liefert das Tatakte-Plugin. */
.tatakte-dyn-cases,
.tatakte-dyn-leaderboard {
	width: 100%;
}

.tatakte-dyn-cases > *:last-child,
.tatakte-dyn-leaderboard > *:last-child {
	margin-bottom: 0;
}

/* Hinweis, wenn das Plugin fehlt (nur für Admins sichtbar) */
.tatakte-dyn-cases:empty::after,
.tatakte-dyn-leaderboard:empty::after {
	content: '';
	display: block;
}

/* Custom-HTML: freier Block. Bewusst zurückhaltend — der Inhalt
   bringt seine eigene Gestaltung mit. Nur Grundtypografie und
   ein Schutz gegen ausbrechende Medien. */
.tatakte-dyn-custom-html {
	width: 100%;
}

.tatakte-dyn-custom-html > *:first-child {
	margin-top: 0;
}

.tatakte-dyn-custom-html > *:last-child {
	margin-bottom: 0;
}

.tatakte-dyn-custom-html img,
.tatakte-dyn-custom-html iframe,
.tatakte-dyn-custom-html video,
.tatakte-dyn-custom-html table {
	max-width: 100%;
}

.tatakte-dyn-custom-html table {
	display: block;
	overflow-x: auto;
}

/* Wrapper aller Frontpage-Sections */
.tatakte-frontpage-sections {
	display: block;
}

/* How-To: Textkörper neben der Nummer */
.tatakte-howto-body {
	flex: 1;
	min-width: 0;
}

/* =========================================================
   Lebende Akte — blaetterbarer Kartenstapel

   Die Mappe bleibt wie gehabt Rahmen und Dekoration. Darin
   liegt ein Stapel Fallkarten, von denen immer genau eine
   sichtbar ist.

   Das Umblaettern ist bewusst keine Schiebe-, sondern eine
   Kippbewegung: die alte Karte dreht sich um ihre linke bzw.
   rechte Kante weg, wie ein umgeschlagenes Blatt. Deshalb
   perspective am Stapel und transform-origin an der Karte.
   ========================================================= */

.tatakte-akte-live {
	width: 290px;
	height: 360px;
}

.tatakte-akte-live .tatakte-akte-mappe {
	top: 30px;
}

/* Der Stapel liegt im Mappenkoerper. */
.tatakte-akte-stapel {
	position: absolute;
	top: 56px;
	right: 16px;
	bottom: 52px;
	left: 16px;
	z-index: 2;
	perspective: 1100px;
	outline-offset: 4px;
}

.tatakte-akte-stapel:focus-visible {
	outline: 2px solid var(--tatakte-accent);
}

/* --- Eine Fallkarte --- */

.tatakte-fallkarte {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0.85rem 0.9rem 0.75rem;
	border-radius: 2px;
	background: var(--akte-papier, #f2ece0);
	box-shadow:
		inset 0 0 18px rgba(120, 95, 60, 0.13),
		0 2px 6px rgba(40, 30, 15, 0.16);
	transform-origin: left center;
	backface-visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transform: rotateY(-14deg) translateZ(-30px);
	transition: opacity 0.3s ease, transform 0.42s ease;
}

.tatakte-fallkarte.is-aktiv {
	z-index: 3;
	opacity: 1;
	pointer-events: auto;
	transform: none;
}

/* Umgeschlagen: nach links bzw. rechts weggekippt. */
.tatakte-fallkarte.is-raus-links {
	z-index: 4;
	opacity: 0;
	transform: rotateY(-72deg) translateX(-14%);
	transform-origin: left center;
}

.tatakte-fallkarte.is-raus-rechts {
	z-index: 4;
	opacity: 0;
	transform: rotateY(72deg) translateX(14%);
	transform-origin: right center;
}

/* Ohne JavaScript ist die erste Karte sichtbar — sonst waere
   der Hero leer, obwohl alle Inhalte im Quelltext stehen. */
.tatakte-akte-live:not(.is-bereit) .tatakte-fallkarte {
	transition: none;
}

/* --- Bild --- */

.tatakte-fallkarte-bild {
	flex: none;
	height: 96px;
	overflow: hidden;
	border-radius: 1px;
	background: var(--akte-papier-tief, #e4dac6);
	/* Leicht schief eingeklebt, wie ein Polaroid in der Akte. */
	transform: rotate(-0.8deg);
	box-shadow: 0 1px 4px rgba(40, 30, 15, 0.22);
}

.tatakte-fallkarte-bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	/* Entfaerbt und kontrastiert — passt zur Aktenoptik und laesst
	   sehr unterschiedliche Fallbilder einheitlich wirken. */
	filter: grayscale(0.45) contrast(1.08) sepia(0.12);
}

/* --- Text --- */

.tatakte-fallkarte-text {
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
}

.tatakte-fallkarte-titel {
	margin: 0 0 0.3rem;
	font-family: var(--tatakte-font-typewriter);
	font-size: 0.98rem;
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: 0.01em;
}

.tatakte-fallkarte-titel a {
	color: var(--tatakte-ink);
	text-decoration: none;
	border-bottom: 1px solid rgba(139, 0, 0, 0.35);
}

.tatakte-fallkarte-titel a:hover,
.tatakte-fallkarte-titel a:focus-visible {
	color: var(--tatakte-accent);
	border-bottom-color: var(--tatakte-accent);
}

.tatakte-fallkarte-auszug {
	margin: 0;
	color: rgba(60, 48, 32, 0.86);
	font-size: 0.76rem;
	line-height: 1.45;
}

/* Ohne Bild darf der Text mehr Platz nehmen. */
.tatakte-fallkarte-text-voll .tatakte-fallkarte-auszug {
	font-size: 0.8rem;
	line-height: 1.5;
}

/* --- Metazeile --- */

.tatakte-fallkarte-meta {
	flex: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 0.6rem;
	margin: 0;
	padding: 0.45rem 0 0;
	border-top: 1px dashed rgba(122, 96, 58, 0.4);
	list-style: none;
	color: rgba(90, 70, 45, 0.85);
	font-family: var(--tatakte-font-typewriter);
	font-size: 0.66rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.tatakte-fallkarte-meta li {
	display: inline-flex;
	align-items: center;
	gap: 0.22rem;
}

.tatakte-fallkarte-fsk {
	padding: 0.05rem 0.34rem;
	border: 1px solid var(--tatakte-stamp);
	border-radius: 2px;
	color: var(--tatakte-stamp);
	font-weight: 700;
}

/* --- Steuerung --- */

.tatakte-akte-nav {
	position: absolute;
	right: 16px;
	bottom: 14px;
	left: 16px;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.tatakte-akte-pfeil {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 1px solid rgba(90, 70, 45, 0.4);
	border-radius: 50%;
	background: var(--akte-papier, #f2ece0);
	color: var(--tatakte-ink);
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.tatakte-akte-pfeil:hover,
.tatakte-akte-pfeil:focus-visible {
	border-color: var(--tatakte-accent);
	background: var(--tatakte-accent);
	color: #fff;
}

.tatakte-akte-zaehler {
	min-width: 3.2em;
	color: rgba(70, 55, 35, 0.9);
	font-family: var(--tatakte-font-typewriter);
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-align: center;
}

@media (min-width: 880px) {
	.tatakte-akte-live { width: 340px; height: 420px; }
	.tatakte-akte-stapel { top: 66px; bottom: 58px; right: 20px; left: 20px; }
	.tatakte-fallkarte { padding: 1rem 1.05rem 0.85rem; }
	.tatakte-fallkarte-bild { height: 120px; }
	.tatakte-fallkarte-titel { font-size: 1.12rem; }
	.tatakte-fallkarte-auszug { font-size: 0.84rem; }
	.tatakte-fallkarte-meta { font-size: 0.7rem; }
}

@media (max-width: 479px) {
	.tatakte-akte-live { width: 250px; height: 330px; }
	.tatakte-akte-stapel { top: 50px; bottom: 48px; right: 13px; left: 13px; }
	.tatakte-fallkarte-bild { height: 78px; }
	.tatakte-fallkarte-titel { font-size: 0.9rem; }
}

/* Reduzierte Bewegung: kein Kippen, nur ein weiches Ein- und
   Ausblenden. Das automatische Weiterblaettern laeuft ohnehin
   nicht (siehe tatakte-frontend.js). */
@media (prefers-reduced-motion: reduce) {
	.tatakte-fallkarte {
		transition: opacity 0.2s ease;
		transform: none;
	}
	.tatakte-fallkarte.is-raus-links,
	.tatakte-fallkarte.is-raus-rechts {
		transform: none;
	}
}

/* Zifferngleiche Breite, damit der Zaehler beim Wechsel von 9 auf 10
   nicht springt und die Pfeile stehen bleiben. */
.tatakte-akte-ist {
	display: inline-block;
	min-width: 1ch;
	font-variant-numeric: tabular-nums;
}

/* Altersempfehlung bekommt eine eigene Zeile: „Empfohlen ab 16" ist zu
   lang fuer die Aufzaehlung daneben und wuerde sonst umbrechen. */
.tatakte-fallkarte-meta-alter {
	flex-basis: 100%;
	margin-top: 0.1rem;
}

.tatakte-fallkarte-meta strong {
	color: var(--tatakte-accent);
	font-weight: 700;
}

/* --- Knopf auf der Fallkarte -------------------------------------- */

.tatakte-fallkarte-meta-alter {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

.tatakte-fallkarte-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.25em;
	flex: none;
	padding: 0.24rem 0.6rem;
	border-radius: var(--tatakte-radius-sm, 3px);
	background: var(--tatakte-accent);
	color: #fff;
	font-family: var(--tatakte-font-typewriter);
	font-size: 0.62rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.15s ease, transform 0.15s ease;
}

.tatakte-fallkarte-btn:hover,
.tatakte-fallkarte-btn:focus-visible {
	background: var(--tatakte-accent-dark);
	color: #fff;
	transform: translateX(1px);
}

.tatakte-fallkarte-btn span {
	transition: transform 0.15s ease;
}

.tatakte-fallkarte-btn:hover span {
	transform: translateX(2px);
}

/* Ist keine Altersangabe da, rutscht der Knopf nach rechts. */
.tatakte-fallkarte-meta-alter:not(:has(.tatakte-fallkarte-fsk)) {
	justify-content: flex-end;
}

@media (min-width: 880px) {
	.tatakte-fallkarte-btn { font-size: 0.66rem; padding: 0.28rem 0.7rem; }
}

/* --- Angesteuerte Shop-Karte -------------------------------------- */

.tatakte-shop-card-ankerbar {
	scroll-margin-top: 96px;
}

.tatakte-shop-card.is-angesteuert {
	animation: tatakte-anker-puls 2.4s ease-out;
}

@keyframes tatakte-anker-puls {
	0%   { box-shadow: 0 0 0 0 rgba(139, 0, 0, 0.55); }
	18%  { box-shadow: 0 0 0 7px rgba(139, 0, 0, 0.22); }
	100% { box-shadow: 0 0 0 0 rgba(139, 0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.tatakte-shop-card.is-angesteuert {
		animation: none;
		outline: 2px solid var(--tatakte-accent);
		outline-offset: 3px;
	}
	.tatakte-fallkarte-btn,
	.tatakte-fallkarte-btn span { transition: none; }
	.tatakte-fallkarte-btn:hover { transform: none; }
	.tatakte-fallkarte-btn:hover span { transform: none; }
}

/* =========================================================
   Deckblatt — die geschlossene Akte

   Erster Eindruck ist eine zugeklappte Akte, nicht sofort
   eine Fallliste. Das Deckblatt liegt als erste Karte im
   Stapel und traegt den grossen Stempel; beim Blaettern
   kippt es weg und gibt die Faelle frei.

   Solange es oben liegt, sieht die Mappe geschlossen aus:
   keine sichtbaren Innenkanten, kein Papierweiss. Deshalb
   deckt das Deckblatt den Stapelbereich vollflaechig ab und
   uebernimmt die Kartonfarbe der Mappe.
   ========================================================= */

.tatakte-fallkarte-deckblatt {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: stretch;
	gap: 0;
	padding: 0;
	background-color: var(--akte-mappe, #d9c9a4);
	background-image:
		radial-gradient(circle at 24% 30%, var(--akte-fleck, rgba(122,96,58,.1)) 0 13px, transparent 19px),
		radial-gradient(circle at 76% 58%, var(--akte-fleck, rgba(122,96,58,.1)) 0 17px, transparent 25px),
		radial-gradient(circle at 52% 86%, var(--akte-fleck, rgba(122,96,58,.1)) 0 10px, transparent 16px),
		repeating-linear-gradient(92deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 5px),
		linear-gradient(170deg, var(--akte-mappe-tief, #c4b189), var(--akte-mappe, #d9c9a4) 42%);
	box-shadow:
		inset 0 0 26px rgba(105, 80, 45, 0.2),
		inset 0 2px 0 rgba(255, 255, 255, 0.2),
		0 2px 6px rgba(40, 30, 15, 0.14);
}

/* Der Stempel liegt mittig auf dem Deckel. */
.tatakte-akte-live .tatakte-stamp-circle.tatakte-stamp-deckel {
	position: absolute;
	top: 46%;
	left: 50%;
	z-index: 2;
	width: 148px;
	height: 148px;
	border-width: 5px;
	transform: translate(-50%, -50%) rotate(-13deg);
}

.tatakte-akte-live .tatakte-stamp-deckel::before {
	top: 8px;
	right: 10px;
	bottom: 10px;
	left: 8px;
	border-width: 2px;
}

.tatakte-akte-live .tatakte-stamp-deckel::after { inset: 16px; }

.tatakte-akte-live .tatakte-stamp-deckel .tatakte-stamp-text {
	padding: 0 8px;
	font-size: 0.86rem;
	letter-spacing: 0.1em;
}

/* Fusszeile des Deckels: Aktenzeichen, Anzahl, Blaetter-Hinweis */
.tatakte-deckblatt-fuss {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding: 0.75rem 0.9rem 0.85rem;
	border-top: 1px dashed rgba(122, 96, 58, 0.45);
	font-family: var(--tatakte-font-typewriter);
	text-align: center;
}

.tatakte-deckblatt-ref {
	color: rgba(90, 70, 45, 0.75);
	font-size: 0.62rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.tatakte-deckblatt-anzahl {
	color: rgba(60, 48, 32, 0.92);
	font-size: 0.78rem;
	letter-spacing: 0.04em;
}

.tatakte-deckblatt-hinweis {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.3em;
	margin-top: 0.15rem;
	color: var(--tatakte-accent);
	font-size: 0.64rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Der Pfeil wippt dezent — ein Hinweis, dass hier etwas geht.
   Nur solange das Deckblatt oben liegt. */
.tatakte-akte-live:not(.is-geoeffnet) .tatakte-deckblatt-hinweis span {
	display: inline-block;
	animation: tatakte-wippen 1.9s ease-in-out infinite;
}

@keyframes tatakte-wippen {
	0%, 100% { transform: translateX(0); }
	50%      { transform: translateX(3px); }
}

/* Geschlossene Akte: die Innenkanten der Mappe treten zurueck,
   damit nichts durchscheint. */
.tatakte-akte-live:not(.is-geoeffnet) .tatakte-akte-blatt {
	opacity: 0.55;
}

@media (min-width: 880px) {
	.tatakte-akte-live .tatakte-stamp-circle.tatakte-stamp-deckel {
		width: 186px;
		height: 186px;
		border-width: 7px;
	}
	.tatakte-akte-live .tatakte-stamp-deckel .tatakte-stamp-text { font-size: 1.08rem; }
	.tatakte-deckblatt-fuss { padding: 0.9rem 1.05rem 1rem; }
	.tatakte-deckblatt-anzahl { font-size: 0.86rem; }
	.tatakte-deckblatt-ref,
	.tatakte-deckblatt-hinweis { font-size: 0.68rem; }
}

@media (max-width: 479px) {
	.tatakte-akte-live .tatakte-stamp-circle.tatakte-stamp-deckel {
		width: 118px;
		height: 118px;
		border-width: 4px;
	}
	.tatakte-akte-live .tatakte-stamp-deckel .tatakte-stamp-text { font-size: 0.7rem; }
	.tatakte-deckblatt-anzahl { font-size: 0.7rem; }
	.tatakte-deckblatt-ref,
	.tatakte-deckblatt-hinweis { font-size: 0.58rem; }
}

@media (prefers-reduced-motion: reduce) {
	.tatakte-akte-live:not(.is-geoeffnet) .tatakte-deckblatt-hinweis span {
		animation: none;
	}
}

/* Zaehler traegt jetzt Text („Akte", „2 / 5"), nicht nur Ziffern. */
.tatakte-akte-zaehler { min-width: 5em; }

/* =========================================================
   Pricing — schmale Darstellungen

   Die grosse Karte nimmt eine halbe Bildschirmhoehe ein. Fuer
   einen Preis, der nur nebenbei erwaehnt werden soll, ist das
   zu viel. Zwei schlankere Varianten:

   streifen — eine flache Zeile: Preis links, Merkmale rechts,
              Knopf am Ende. Nimmt volle Breite, wenig Hoehe.
   notiz    — ein kompakter, leicht schief angehefteter Zettel
              am Rand. Faellt auf, ohne den Fluss zu brechen.
   ========================================================= */

/* --- Streifen --- */

.tatakte-pricing-layout-streifen .tatakte-pricing-card {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 1.4rem;
	max-width: none;
	padding: 1rem 1.4rem;
	text-align: left;
}

.tatakte-pricing-layout-streifen .tatakte-pricing-badge {
	grid-column: 1 / -1;
	justify-self: start;
	margin: 0 0 0.2rem;
}

.tatakte-pricing-layout-streifen .tatakte-pricing-title {
	grid-column: 2;
	grid-row: 2;
	margin: 0;
	font-size: 1rem;
}

.tatakte-pricing-layout-streifen .tatakte-pricing-price {
	grid-column: 1;
	grid-row: 2;
	margin: 0;
}

.tatakte-pricing-layout-streifen .tatakte-pricing-amount { font-size: 2.1rem; }

.tatakte-pricing-layout-streifen .tatakte-pricing-period,
.tatakte-pricing-layout-streifen .tatakte-pricing-note {
	grid-column: 2;
	margin: 0;
	text-align: left;
}

.tatakte-pricing-layout-streifen .tatakte-pricing-features {
	grid-column: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 0.2rem 1.1rem;
	margin: 0.2rem 0 0;
}

.tatakte-pricing-layout-streifen .tatakte-pricing-features li {
	padding: 0;
	border: 0;
	font-size: 0.82rem;
}

.tatakte-pricing-layout-streifen .tatakte-pricing-btn {
	grid-column: 3;
	grid-row: 2;
	margin: 0;
	white-space: nowrap;
}

/* --- Randnotiz --- */

.tatakte-pricing-layout-notiz {
	display: flex;
	justify-content: flex-end;
}

.tatakte-pricing-layout-notiz .tatakte-pricing-card {
	max-width: 260px;
	padding: 0.9rem 1rem 1rem;
	transform: rotate(1.4deg);
	box-shadow: 0 6px 18px rgba(40, 30, 15, 0.16);
}

/* Heftklammer oben — greift die Aktenoptik auf. */
.tatakte-pricing-layout-notiz .tatakte-pricing-card::before {
	content: '';
	position: absolute;
	top: -7px;
	left: 50%;
	width: 30px;
	height: 12px;
	border: 2px solid rgba(90, 90, 96, 0.5);
	border-bottom-color: transparent;
	border-radius: 3px 3px 0 0;
	transform: translateX(-50%) rotate(-5deg);
}

.tatakte-pricing-layout-notiz .tatakte-pricing-title { font-size: 0.92rem; }
.tatakte-pricing-layout-notiz .tatakte-pricing-amount { font-size: 2.2rem; }
.tatakte-pricing-layout-notiz .tatakte-pricing-features { margin: 0.6rem 0; }
.tatakte-pricing-layout-notiz .tatakte-pricing-features li {
	padding: 0.2rem 0;
	border: 0;
	font-size: 0.78rem;
}
.tatakte-pricing-layout-notiz .tatakte-pricing-btn {
	width: 100%;
	padding: 0.5rem 0.8rem;
	font-size: 0.82rem;
}
.tatakte-pricing-layout-notiz .tatakte-pricing-note { font-size: 0.68rem; }

/* Links statt rechts, wenn die Section linksbuendig ausgerichtet ist. */
.tatakte-dyn-align-left .tatakte-pricing-layout-notiz {
	justify-content: flex-start;
}

@media (max-width: 767px) {
	.tatakte-pricing-layout-streifen .tatakte-pricing-card {
		grid-template-columns: 1fr;
		gap: 0.6rem;
	}
	.tatakte-pricing-layout-streifen .tatakte-pricing-title,
	.tatakte-pricing-layout-streifen .tatakte-pricing-price,
	.tatakte-pricing-layout-streifen .tatakte-pricing-btn,
	.tatakte-pricing-layout-streifen .tatakte-pricing-features,
	.tatakte-pricing-layout-streifen .tatakte-pricing-period {
		grid-column: 1;
		grid-row: auto;
	}
	.tatakte-pricing-layout-notiz { justify-content: center; }
	.tatakte-pricing-layout-notiz .tatakte-pricing-card { transform: none; max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.tatakte-pricing-layout-notiz .tatakte-pricing-card { transform: none; }
}

/* Textträger im Account-Button — das Skript tauscht nur diesen Knoten aus,
   damit umgebende Symbole oder Zusätze erhalten bleiben. */
.tatakte-account-label {
	display: inline;
}

/* =========================================================
   v2.9.1 — Footer-Spalten

   Diese drei Klassen standen seit jeher im Markup, hatten aber
   keine einzige Regel. Aufgefallen ist das erst, als der
   Klassen-Abgleich auch footer.php einbezogen hat.

   Die Spalten funktionierten bisher nur, weil der umgebende
   Grid-Container sie ohnehin verteilt hat. Damit hing die
   Darstellung an der Reihenfolge im Markup: Eine vierte Spalte
   oder eine verschobene h�tte das Raster zerlegt.
   ========================================================= */

.tatakte-footer-nav,
.tatakte-footer-legal,
.tatakte-footer-social {
	min-width: 0;
}

.tatakte-footer-nav ul,
.tatakte-footer-legal ul,
.tatakte-footer-social ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tatakte-footer-nav li,
.tatakte-footer-legal li,
.tatakte-footer-social li {
	margin-bottom: 0.45rem;
}

.tatakte-footer-nav li:last-child,
.tatakte-footer-legal li:last-child,
.tatakte-footer-social li:last-child {
	margin-bottom: 0;
}

/* Social-Links nebeneinander statt untereinander — es sind
   kurze Wörter, eine Spalte davon wirkt zerrupft. */
.tatakte-footer-social ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem 1rem;
}

.tatakte-footer-social li {
	margin-bottom: 0;
}

/* Hauptbereich zwischen Header und Footer. Trug bisher keine Regel —
   das Wachsen erledigte der Flex-Container am body. Explizit gesetzt,
   damit ein kurzer Seiteninhalt den Footer trotzdem nach unten drückt. */
.tatakte-site-main {
	flex: 1 0 auto;
	min-width: 0;
}

/* Video ohne eigenes Vorschaubild.

   Frueher stand hier das YouTube-Thumbnail von i.ytimg.com — geladen
   bei jedem Seitenaufruf, also lange vor dem Einwilligungsklick. Jetzt
   eine neutrale Flaeche aus Theme-Farben mit angedeuteter Filmstreifen-
   Perforation. Kein externer Aufruf. */
.tatakte-video-cover-leer {
	background-color: var(--tatakte-dark);
	background-image:
		repeating-linear-gradient(
			90deg,
			rgba(255, 255, 255, 0.09) 0 10px,
			transparent 10px 26px
		),
		linear-gradient(160deg, rgba(255, 255, 255, 0.06), transparent 60%);
	background-size: auto 22px, auto;
	background-position: center top, center;
	background-repeat: repeat-x, no-repeat;
}

.tatakte-video-cover-leer::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 22px;
	background: repeating-linear-gradient(
		90deg,
		rgba(255, 255, 255, 0.09) 0 10px,
		transparent 10px 26px
	);
}

/* =========================================================
   Sichtbarkeitsregeln je Abschnitt (v2.14.0)

   Geraet: reine Media Query, kein Skript noetig.
   Anmeldung: beide Varianten starten versteckt. Das Skript
   setzt die Klasse am <body> und gibt die passende frei.
   Andersherum — erst zeigen, dann verstecken — waere ein
   sichtbares Aufblitzen des falschen Inhalts.
   ========================================================= */

@media (max-width: 767px) {
	.tatakte-zeigen-wo-desktop { display: none; }
}

@media (min-width: 768px) {
	.tatakte-zeigen-wo-mobil { display: none; }
}

.tatakte-zeigen-wer-angemeldet,
.tatakte-zeigen-wer-abgemeldet {
	display: none;
}

.tatakte-anmeldung-bekannt.tatakte-ist-angemeldet .tatakte-zeigen-wer-angemeldet,
.tatakte-anmeldung-bekannt.tatakte-ist-abgemeldet .tatakte-zeigen-wer-abgemeldet {
	display: block;
}

/* Im Bearbeitungsmodus ist alles sichtbar — ein versteckter Abschnitt
   liesse sich sonst weder bearbeiten noch loeschen. Er wird stattdessen
   gekennzeichnet. */
.tatakte-editing .tatakte-zeigen-wer-angemeldet,
.tatakte-editing .tatakte-zeigen-wer-abgemeldet,
.tatakte-editing .tatakte-zeigen-wo-desktop,
.tatakte-editing .tatakte-zeigen-wo-mobil {
	display: block;
	outline: 2px dotted rgba(139, 0, 0, 0.45);
	outline-offset: -6px;
}