/* =============================================================================
   Anne B. — Custom Styles

   Methodik:  BEM  ->  .ab-block  /  .ab-block__element  /  .ab-block--modifier
   Tokens:    eigene CSS Custom Properties in :root (selbsttragend)
              Farben    --ab-*            Schriften --ab-font-*
              Layout    --ab-content / --ab-wide
   Aufbau:    1. Tokens + Basis  2. Layout  3. Buttons  4..n eine Sektion = eine Komponente

   WICHTIG — Etch entfernt WordPress' global-styles (theme.json-Output) per
   WpDefaultsRemover aus dem Frontend. Deshalb definiert dieses Stylesheet ALLE
   Design-Tokens und Basis-Stile selbst und haengt NICHT von --wp--preset--* ab.
   theme.json bleibt nur fuer die Editor-Palette/-Presets relevant.

   Hinweis zu WordPress-Core-Blocks:
   Wo Core-Markup feststeht (.wp-block-button__link, .wp-block-code) wird es
   innerhalb der BEM-Komponente gezielt angesprochen. Alle eigenen Klassen
   folgen strikt BEM. Unser CSS ist ungelayert und schlaegt damit Etchs
   @layer etch-reset / etch-defaults sicher.
   ============================================================================= */


/* =============================================================================
   0. FONTS (self-hosted, DSGVO — kein Google-CDN)
   Pfade ROOT-RELATIV, da custom.css inline ueber Etchs Main-Stylesheet ausgegeben
   wird (relative url() wuerden sonst gegen die Seiten-URL aufloesen).
   Alle drei sind Variable Fonts (eine Datei deckt den Gewichtsbereich 400–700 ab),
   latin-Subset (deckt Deutsch inkl. Umlaute/ß/€ vollstaendig ab).
     Caveat        = Brush-Display (Headlines)
     IBM Plex Sans = ruhige Sans (Fliesstext)
     JetBrains Mono = Coding-Mono (Akzent: FAQ-Fragen, Angebotsnamen, Terminal)
   ============================================================================= */

@font-face {
	font-family: "Caveat";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("/assets/fonts/caveat-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "IBM Plex Sans";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("/assets/fonts/ibm-plex-sans-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("/assets/fonts/jetbrains-mono-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* =============================================================================
   1. TOKENS + BASIS
   ============================================================================= */

:root {
	color-scheme: light;

	/* Farben (CI — Akzente vorerst Platzhalter) */
	--ab-background: #FFF9F0;
	--ab-surface: #EDEAE4;
	--ab-card: #FFFFFF;        /* erhabene Kartenflaeche (Steps, Pricing) */
	--ab-text: #1A1A1A;
	--ab-text-muted: #6B6B6B;
	--ab-accent-1: #C4713B;
	--ab-accent-2: #3B7C8A;
	--ab-white: #FFFFFF;       /* KONSTANT weiss: Vordergrund auf Akzent/Buttons */

	/* Schriften — Brueckenkonzept: handgeschriebener Brush (Headlines), ruhige Sans (Fliesstext),
	   Coding-Mono als Akzent (FAQ-Fragen, Angebotsnamen, Terminal). IBM Plex Sans + JetBrains Mono passen
	   als Paar zusammen. Design-Runde via Google Fonts; final selbst-hosten (siehe launch-todo.md). */
	--ab-font-heading: "Caveat", "Segoe Script", cursive;
	--ab-font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--ab-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;

	/* Layout-Breiten */
	--ab-content: 740px;
	--ab-wide: 1200px;

	/* Radius / Schatten / Rahmen */
	--ab-radius-sm: 4px;
	--ab-radius-md: 12px;
	--ab-radius-lg: 22px;
	--ab-radius-pill: 999px;

	--ab-shadow-sm: 0 1px 3px rgba(26, 26, 26, 0.06);
	--ab-shadow-md: 0 10px 34px rgba(26, 26, 26, 0.09);
	--ab-shadow-lg: 0 22px 55px rgba(26, 26, 26, 0.16);

	/* Akzent-Glow fuer primaere CTAs — folgt der Akzentfarbe (color-mix),
	   gilt in Light + Dark gleich, da --ab-accent-1 konstant bleibt. */
	--ab-shadow-accent: 0 8px 22px color-mix(in srgb, var(--ab-accent-1) 32%, transparent);
	--ab-shadow-accent-strong: 0 12px 30px color-mix(in srgb, var(--ab-accent-1) 46%, transparent);

	--ab-border: 1px solid rgba(26, 26, 26, 0.08);
	--ab-border-strong: 1px solid rgba(26, 26, 26, 0.14);

	--ab-grain-opacity: 0.3;    /* Film-Grain-Intensitaet (dezent) */
}

/* Dark Theme — aktiv per data-theme="dark" auf <html> (JS: no-FOUC-Init + Header-Toggle).
   Nur Flaechen/Text/Rahmen/Schatten kippen; Akzent-Farben + konstantes Weiss bleiben (Markenkonstanz). */
:root[data-theme="dark"] {
	color-scheme: dark;

	--ab-background: #1A1510;
	--ab-surface: #241D16;
	--ab-card: #2C231B;
	--ab-text: #F2EBE0;
	--ab-text-muted: #ADA191;

	--ab-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.40);
	--ab-shadow-md: 0 10px 34px rgba(0, 0, 0, 0.50);
	--ab-shadow-lg: 0 22px 55px rgba(0, 0, 0, 0.60);

	--ab-border: 1px solid rgba(255, 255, 255, 0.10);
	--ab-border-strong: 1px solid rgba(255, 255, 255, 0.18);

	--ab-grain-opacity: 0.4;
}

/* Basis-Stile (ersetzen die von Etch entfernten theme.json-Global-Styles) */
html {
	scroll-behavior: smooth;       /* sanftes Springen zu #kontakt-Anker */
}

body {
	background-color: var(--ab-background);
	color: var(--ab-text);
	font-family: var(--ab-font-body);
	font-size: 1.0625rem;
	line-height: 1.65;
	letter-spacing: -0.006em;
	font-optical-sizing: auto;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3 {
	font-family: var(--ab-font-heading);
	color: var(--ab-text);
	text-wrap: balance;
}

/* Brush-Script (Caveat): groesser als eine Serife, ohne negatives Tracking,
   kraeftiges Gewicht fuer Headline-Praesenz. */
h1 {
	font-size: clamp(3rem, 7vw, 5.5rem);
	line-height: 1.04;
	font-weight: 700;
	letter-spacing: 0;
}

h2 {
	font-size: clamp(2.3rem, 5vw, 3.6rem);
	line-height: 1.08;
	font-weight: 700;
	letter-spacing: 0;
}

h3 {
	font-size: clamp(1.5rem, 3vw, 2rem);
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: 0;
}

p {
	text-wrap: pretty;
}

a {
	color: var(--ab-accent-1);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

a:hover {
	color: var(--ab-text);
}


/* =============================================================================
   2. LAYOUT — Container & Sektionen
   ============================================================================= */

.ab-container {
	width: 100%;
	max-width: var(--ab-wide);
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

.ab-container--narrow {
	max-width: var(--ab-content);
}

/* Spalten einer 2-Spalten-Sektion visuell tauschen (nur Desktop via direction).
   Mobile = 1 Spalte -> Stapelreihenfolge bleibt DOM-/order-gesteuert, kein Einfluss. */
.ab-flip {
	direction: rtl;
}

.ab-flip > * {
	direction: ltr;
}

.ab-section {
	padding-block: clamp(4rem, 10vw, 8rem);
}

.ab-section--surface {
	background-color: var(--ab-surface);
}

.ab-section--accent {
	background-color: var(--ab-accent-1);
}

.ab-section--accent,
.ab-section--accent :where(h1, h2, h3, p) {
	color: var(--ab-white);
}


/* =============================================================================
   3. BUTTONS — .ab-btn (auf WordPress-Button-Block angewendet)
   ============================================================================= */

.ab-btn .wp-block-button__link {
	display: inline-block;
	border: none;
	border-radius: var(--ab-radius-sm);
	padding: 0.9rem 2rem;
	font-family: var(--ab-font-body);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.ab-btn--primary .wp-block-button__link {
	background-color: var(--ab-accent-1);
	color: var(--ab-white);
	box-shadow: var(--ab-shadow-accent);
}

.ab-btn--primary .wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: var(--ab-shadow-accent-strong);
}

.ab-btn--inverted .wp-block-button__link {
	background-color: var(--ab-white);
	color: var(--ab-accent-1);
	box-shadow: var(--ab-shadow-sm);
}

.ab-btn--inverted .wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 34px rgba(0, 0, 0, 0.22);
}

.ab-btn--large .wp-block-button__link {
	padding: 1.1rem 2.5rem;
	font-size: 1.0625rem;
}

/* Pfeil als Conversion-Cue auf den Buchungs-CTAs (primary + inverted).
   Wandert bei Hover nach rechts; unter reduced-motion ruhiggestellt (Sektion 18). */
.ab-btn--primary .wp-block-button__link::after,
.ab-btn--inverted .wp-block-button__link::after {
	content: "\2192";
	display: inline-block;
	margin-inline-start: 0.5em;
	transition: transform 0.2s ease;
}

.ab-btn--primary .wp-block-button__link:hover::after,
.ab-btn--inverted .wp-block-button__link:hover::after {
	transform: translateX(0.2em);
}


/* =============================================================================
   4. SHARED — Eyebrow-Label (komponentenübergreifend)
   ============================================================================= */

.ab-hero__eyebrow,
.ab-about__eyebrow,
.ab-proof__eyebrow,
.ab-statement__eyebrow {
	margin: 0;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ab-accent-1);
}


/* =============================================================================
   5. SITE HEADER — .ab-site-header
   ============================================================================= */

.ab-site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--ab-background);
	border-block-end: var(--ab-border);
}

.ab-site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: 1.1rem;
}

.ab-site-header__actions {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 3vw, 2rem);
}

/* Theme-Toggle (Icon-Button) — fixiert oben rechts (kein Header mehr) */
.ab-theme-toggle {
	position: fixed;
	top: 1.25rem;
	right: 1.25rem;
	z-index: 95;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	color: var(--ab-text);
	background-color: var(--ab-card);
	border: var(--ab-border-strong);
	border-radius: var(--ab-radius-pill);
	box-shadow: var(--ab-shadow-sm);
	cursor: pointer;
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.ab-theme-toggle:hover {
	color: var(--ab-accent-1);
	background-color: var(--ab-surface);
}

.ab-theme-toggle:focus-visible {
	outline: 2px solid var(--ab-accent-1);
	outline-offset: 2px;
}

.ab-theme-toggle__icon {
	width: 1.25rem;
	height: 1.25rem;
}

/* Sonne im Dark-Theme, Mond im Light-Theme (Icon zeigt das Ziel des Klicks) */
.ab-theme-toggle__icon--sun {
	display: none;
}

:root[data-theme="dark"] .ab-theme-toggle__icon--sun {
	display: block;
}

:root[data-theme="dark"] .ab-theme-toggle__icon--moon {
	display: none;
}


/* =============================================================================
   6. SITE FOOTER — .ab-site-footer
   ============================================================================= */

.ab-site-footer {
	background-color: var(--ab-surface);
	border-block-start: var(--ab-border);
}

.ab-site-footer__inner {
	padding-block: 2rem;
	text-align: center;
}

.ab-site-footer__copy {
	margin: 0;
	font-size: 0.875rem;
	color: var(--ab-text-muted);
}

.ab-site-footer__copy a {
	color: inherit;
	text-decoration: none;
}

.ab-site-footer__copy a:hover {
	color: var(--ab-text);
}


/* =============================================================================
   7. HERO — .ab-hero
   ============================================================================= */

.ab-hero {
	overflow: hidden;
}

.ab-hero__grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: clamp(2rem, 6vw, 5rem);
	align-items: center;
	min-height: min(80vh, 760px);
}

.ab-hero__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.5rem;
}

.ab-hero__title {
	margin: 0;
}

.ab-hero__lead {
	margin: 0;
	max-width: 40ch;
	font-size: clamp(1.1rem, 2vw, 1.25rem);
	color: var(--ab-text-muted);
}

.ab-hero__actions {
	margin-block-start: 0.5rem;
}

.ab-hero__note {
	margin: 0;
	font-size: 0.9rem;
	color: var(--ab-text-muted);
}

.ab-hero__media {
	position: relative;
}

.ab-hero__photo {
	position: relative;
	z-index: 1;
	margin: 0;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--ab-radius-lg);
	/* Runde Karte, aber transparente Flaeche: die Transparenz/der Glow des
	   freigestellten Fotos laesst den Sektionshintergrund durchscheinen
	   (keine graue Fuellung mehr). */
	background-color: transparent;
}

.ab-hero__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* core/image-Wrapper (figure.wp-block-image) in Foto-Containern neutralisieren.
   Noetig, weil Etch wp-block-library strippt -> sonst greift der UA-Default-
   Rand von <figure>. Das innere <img> wird weiter ueber die jeweiligen
   .ab-*__photo img / .ab-*__media img / .ab-*__avatar img Regeln gestylt. */
.ab-hero__photo .wp-block-image,
.ab-about__photo .wp-block-image,
.ab-cta__photo .wp-block-image,
.ab-testimonials__avatar .wp-block-image {
	margin: 0;
	width: 100%;
	height: 100%;
	display: block;
}

.ab-automation__media .wp-block-image {
	margin: 0;
	display: block;
}

/* =============================================================================
   8. STATEMENT — .ab-statement  (Problem & Automatisierungen)
   ============================================================================= */

/* Kompakter als Standard-Sektionen — sonst wirkt das Tab-Visual zu einsam. */
.ab-statement {
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.ab-statement__inner {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.ab-statement__title {
	margin: 0;
}

.ab-statement__text {
	margin: 0;
	font-size: clamp(1.1rem, 2vw, 1.35rem);
	line-height: 1.6;
}

.ab-statement--left .ab-statement__inner {
	align-items: flex-start;
}


/* =============================================================================
   9. ABOUT — .ab-about  (Wer ich bin)
   ============================================================================= */

.ab-about__grid {
	display: grid;
	grid-template-columns: 0.85fr 1fr;
	gap: clamp(2rem, 6vw, 5rem);
	align-items: center;
}

.ab-about__photo {
	margin: 0;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--ab-radius-lg);
	background-color: var(--ab-surface);
}

.ab-about__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ab-about__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.1rem;
}

.ab-about__title,
.ab-about__text {
	margin: 0;
}

.ab-about__tags {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0.5rem 0 0;
	padding: 0;
}

.ab-about__tag {
	padding: 0.4rem 0.95rem;
	font-size: 0.85rem;
	font-weight: 600;
	border-radius: var(--ab-radius-pill);
	background-color: var(--ab-card);
	border: var(--ab-border-strong);
	color: var(--ab-text);
}


/* =============================================================================
   10. STEPS — .ab-steps  (Ablauf)
   ============================================================================= */

.ab-steps__head {
	margin-block-end: clamp(2rem, 5vw, 3.5rem);
}

.ab-steps__title {
	margin: 0 0 0.75rem;
}

.ab-steps__intro {
	margin: 0 auto;
	max-width: 48ch;
	color: var(--ab-text-muted);
}

.ab-steps__list {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.25rem, 3vw, 2rem);
}

/* Verbindungs-Spine zwischen den Schritten (in den Luecken sichtbar, hinter den Karten) */
.ab-steps__list::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 8%;
	right: 8%;
	height: 0;
	border-top: 2px dashed color-mix(in srgb, var(--ab-accent-1) 45%, transparent);
	z-index: 0;
}

.ab-steps__item {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background-color: var(--ab-card);
	border: var(--ab-border);
	border-radius: var(--ab-radius-md);
	box-shadow: var(--ab-shadow-sm);
}

.ab-steps__number {
	margin: 0;
	font-family: var(--ab-font-heading);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--ab-accent-1);
}

.ab-steps__item-title {
	margin: 0;
}

.ab-steps__text {
	margin: 0;
	color: var(--ab-text-muted);
}


/* =============================================================================
   11. PROOF — .ab-proof  (Live-Beweis, Terminal-Visual)
   ============================================================================= */

.ab-proof__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 6vw, 5rem);
	align-items: center;
}

.ab-proof__content {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.ab-proof__title,
.ab-proof__text {
	margin: 0;
}

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

.ab-proof__terminal {
	overflow: hidden;
	border-radius: var(--ab-radius-md);
	background-color: #1c1c1e;
	box-shadow: var(--ab-shadow-lg);
}

.ab-proof__terminal-bar {
	display: flex;
	gap: 0.5rem;
	padding: 0.85rem 1rem;
	background-color: #2a2a2d;
}

.ab-proof__dot {
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 50%;
	background-color: #5a5a5e;
}

.ab-proof__dot:nth-child(1) {
	background-color: #ff5f56;
}

.ab-proof__dot:nth-child(2) {
	background-color: #ffbd2e;
}

.ab-proof__dot:nth-child(3) {
	background-color: #27c93f;
}

.ab-proof__terminal-body {
	padding: 1.25rem 1.5rem;
}

.ab-proof__code {
	margin: 0;
	padding: 0;
	border: none;
	background: transparent;
	color: #e8e8e8;
	font-family: var(--ab-font-mono);
	font-size: 0.9rem;
	line-height: 1.7;
	white-space: pre-wrap;
}

/* JS-Terminal (Claude-Code-Style): tippt, denkt, fuellt sich, leert, wechselt.
   Stabile Mindesthoehe gegen Layout-Shift beim Fuellen/Leeren. Fallback ohne JS = .ab-proof__code. */
.ab-proof__terminal-body {
	min-height: 11rem;
}

.ab-term {
	font-family: var(--ab-font-mono);
	font-size: 0.9rem;
	line-height: 1.7;
	color: #e8e8e8;
	transition: opacity 0.3s ease;
}

.ab-term.is-clearing {
	opacity: 0;
}

.ab-term__line {
	white-space: pre-wrap;
	word-break: break-word;
}

.ab-term__line--prompt {
	color: #f5f5f5;
}

.ab-term__line--out {
	color: #cdcdcd;
}

.ab-term__bullet {
	color: var(--ab-accent-1);
}

.ab-term__status {
	color: #b6b6b6;
}

.ab-term__caret {
	display: inline-block;
	width: 0.55em;
	height: 1.05em;
	margin-left: 0.1em;
	vertical-align: -0.18em;
	background-color: #e8e8e8;
	animation: ab-caret-blink 1.1s step-end infinite;
}


/* =============================================================================
   12. CALLOUT — .ab-callout  (Check & Refactoring)
   ============================================================================= */

.ab-callout__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.25rem;
	padding: clamp(2rem, 5vw, 3.5rem);
	background-color: var(--ab-surface);
	border-radius: var(--ab-radius-lg);
	border-left: 4px solid var(--ab-accent-2);
}

.ab-callout__title {
	margin: 0;
}

.ab-callout__text {
	margin: 0;
	max-width: 60ch;
}


/* =============================================================================
   13. TESTIMONIALS — .ab-testimonials  (Referenzen)
   ============================================================================= */

/* Referenzen-Sektion ausgeblendet (2026-07-06).
   Anne meldet sich, sobald sie 3+ echte Referenzen hat -> dann NUR diese eine Regel
   entfernen und `bash projekte/Website/deploy/design-deploy.sh` erneut ausfuehren. */
.ab-testimonials {
	display: none !important;
}

.ab-testimonials__title {
	margin: 0 0 clamp(2rem, 5vw, 3.5rem);
}

/* Karussell: horizontaler Scroll-Snap-Track + Pfeile (JS) */
.ab-testimonials__viewport {
	position: relative;
}

.ab-testimonials__track {
	display: flex;
	gap: clamp(1.25rem, 3vw, 2rem);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	padding-block: 0.5rem;            /* Platz fuer Hover-Lift */
	scrollbar-width: none;
}

.ab-testimonials__track::-webkit-scrollbar {
	display: none;
}

.ab-testimonials__item {
	flex: 0 0 auto;
	width: clamp(270px, 82%, 420px);
	scroll-snap-align: center;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	padding: clamp(1.75rem, 3vw, 2.25rem);
	background-color: var(--ab-surface);
	border-radius: var(--ab-radius-md);
	border-left: 3px solid var(--ab-accent-1);
}

.ab-testimonials__quote {
	margin: 0;
	font-size: 1.1rem;
	font-style: italic;
}

.ab-testimonials__person {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	margin-top: auto;                 /* Person an die Kartenunterkante */
}

.ab-testimonials__avatar {
	flex: none;
	width: 4.25rem;
	height: 4.25rem;
	border-radius: 50%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--ab-card);
	border: var(--ab-border-strong);
	font-family: var(--ab-font-mono);
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--ab-accent-1);
}

.ab-testimonials__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ab-testimonials__avatar svg {
	width: 2rem;
	height: 2rem;
	color: var(--ab-text-muted);
}

.ab-testimonials__author {
	margin: 0;
	font-size: 0.9rem;
	font-weight: 600;
	font-style: normal;
	color: var(--ab-text-muted);
}

.ab-testimonials__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	color: var(--ab-text);
	background-color: var(--ab-card);
	border: var(--ab-border-strong);
	border-radius: var(--ab-radius-pill);
	box-shadow: var(--ab-shadow-sm);
	cursor: pointer;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.ab-testimonials__arrow:hover {
	color: var(--ab-accent-1);
	background-color: var(--ab-surface);
}

.ab-testimonials__arrow:focus-visible {
	outline: 2px solid var(--ab-accent-1);
	outline-offset: 2px;
}

.ab-testimonials__arrow[hidden] {
	display: none;
}

.ab-testimonials__arrow[disabled] {
	opacity: 0.35;
	cursor: default;
}

.ab-testimonials__arrow svg {
	width: 1.1rem;
	height: 1.1rem;
}

.ab-testimonials__arrow--prev { left: -0.5rem; }
.ab-testimonials__arrow--next { right: -0.5rem; }


/* =============================================================================
   14. PRICING — .ab-pricing  (Angebot: Erstgespräch / Workshop / Individuell)
   ============================================================================= */

.ab-pricing__head {
	margin-block-end: clamp(2rem, 5vw, 3.5rem);
}

.ab-pricing__title {
	margin: 0 0 0.75rem;
}

.ab-pricing__intro {
	margin: 0 auto;
	max-width: 48ch;
	color: var(--ab-text-muted);
}

/* Ein Grid mit drei gleichwertigen Karten: Erstgespräch / Workshop / Individuell.
   Spalten direkt an .ab-pricing__grid (der Live-Block nutzt die Klasse ohne Modifier). */
.ab-pricing__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
	align-items: stretch;
}

@media (max-width: 720px) {
	.ab-pricing__grid {
		grid-template-columns: 1fr;
	}
}

.ab-pricing__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 1.85rem 1.6rem;
	background-color: var(--ab-card);
	border: var(--ab-border);
	border-radius: var(--ab-radius-md);
	box-shadow: var(--ab-shadow-sm);
}

.ab-pricing__card--free {
	background-color: transparent;
	border-style: dashed;
	box-shadow: none;
}

.ab-pricing__name {
	margin: 0;
	font-family: var(--ab-font-mono);   /* Name in Mono (System-Akzent) */
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.ab-pricing__price {
	margin: 0.25rem 0 0;
	font-family: var(--ab-font-body);   /* Preise in normaler Sans */
	font-size: 1.6rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--ab-accent-1);
}

.ab-pricing__duration {
	margin: 0;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ab-text-muted);
}

.ab-pricing__desc {
	margin: 0.5rem 0 0;
	font-size: 0.95rem;
}

.ab-pricing__actions {
	margin-block-start: clamp(2rem, 4vw, 3rem);
}


/* =============================================================================
   15. FAQ — .ab-faq  (native details/summary, ohne JS)
   ============================================================================= */

.ab-faq__title {
	margin: 0 0 clamp(1.5rem, 4vw, 2.5rem);
}

.ab-faq__list {
	display: flex;
	flex-direction: column;
}

.ab-faq__item {
	border-block-end: var(--ab-border-strong);
}

.ab-faq__item:first-child {
	border-block-start: var(--ab-border-strong);
}

.ab-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 1.5rem;
	cursor: pointer;
	list-style: none;
	font-family: var(--ab-font-mono);   /* FAQ-Fragen in Mono (System-Akzent) */
	font-weight: 600;
	font-size: 1.05rem;
	letter-spacing: -0.02em;
}

.ab-faq__question::-webkit-details-marker {
	display: none;
}

.ab-faq__question p {
	margin: 0;
}

.ab-faq__question::after {
	content: "+";
	flex: none;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--ab-accent-1);
	transition: transform 0.2s ease;
}

.ab-faq__item[open] .ab-faq__question::after {
	content: "\2013"; /* en dash */
}

.ab-faq__answer {
	padding-block: 0 1.5rem;
}

.ab-faq__answer p {
	margin: 0;
	color: var(--ab-text-muted);
}


/* =============================================================================
   16. FINAL CTA — .ab-cta  (auf Akzent-Sektion)
   ============================================================================= */

/* Zweispaltig: Foto links (Platzhalter) + CTA-Text rechts */
.ab-cta__grid {
	display: grid;
	grid-template-columns: 0.85fr 1fr;
	gap: clamp(2rem, 6vw, 5rem);
	align-items: center;
}

.ab-cta__photo {
	width: 100%;
	max-width: 340px;            /* Quadrat gedeckelt -> Sektion bleibt flach */
	aspect-ratio: 1 / 1;
	margin-inline: auto;
	border-radius: var(--ab-radius-lg);
	overflow: hidden;
}

.ab-cta__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 38% 28%;    /* Ausschnitt: etwas nach unten + nach rechts */
}

.ab-cta__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.25rem;
	text-align: left;
}

.ab-cta__title {
	margin: 0;
}

.ab-cta__text {
	margin: 0;
	max-width: 50ch;
	opacity: 0.92;
}

.ab-cta__note {
	margin: 0;
	font-size: 0.9rem;
	opacity: 0.8;
}


/* =============================================================================
   17. RESPONSIVE
   ============================================================================= */

@media (max-width: 880px) {
	.ab-hero__grid,
	.ab-about__grid,
	.ab-proof__grid,
	.ab-cta__grid {
		grid-template-columns: 1fr;
	}

	.ab-hero__grid {
		min-height: auto;
	}

	.ab-hero__media,
	.ab-about__media,
	.ab-cta__media {
		order: -1;
	}

	.ab-about__photo {
		aspect-ratio: 3 / 2;
	}

	/* Hero-Foto (freigestellt) auf Mobile KOMPLETT zeigen — kein Crop, Kopf bleibt drauf. */
	.ab-hero__photo {
		aspect-ratio: auto;
	}

	.ab-hero__photo img {
		height: auto;
		object-fit: contain;
	}

	.ab-steps__list {
		grid-template-columns: 1fr;
	}

	.ab-steps__list::before {
		display: none;
	}
}


/* =============================================================================
   18. ACCESSIBILITY — reduzierte Bewegung
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {

	.ab-btn .wp-block-button__link,
	.ab-faq__question::after,
	.ab-steps__item,
	.ab-pricing__card,
	.ab-testimonials__item {
		transition: none;
	}

	.ab-btn .wp-block-button__link:hover,
	.ab-steps__item:hover,
	.ab-pricing__card:hover,
	.ab-testimonials__item:hover {
		transform: none;
	}

	.ab-btn--primary .wp-block-button__link::after,
	.ab-btn--inverted .wp-block-button__link::after {
		transition: none;
	}

	.ab-btn--primary .wp-block-button__link:hover::after,
	.ab-btn--inverted .wp-block-button__link:hover::after {
		transform: none;
	}

	.ab-contact .wpcf7-submit:hover {
		transform: none;
	}

	html {
		scroll-behavior: auto;
	}
}


/* =============================================================================
   19. TEXTUR & ORGANISCHE AKZENTE (Anti-Generisch / "Human Touch")
   ============================================================================= */

/* Feiner Film-Grain ueber der ganzen Seite — bricht die "perfekte" digitale Flachheit. */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	opacity: var(--ab-grain-opacity);
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.8'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Handgezeichnete Unterstreichung unter zentralen Titeln (Mask -> Akzentfarbe, theme-aware). */
.ab-steps__title,
.ab-cta__title {
	position: relative;
}

.ab-steps__title::after,
.ab-cta__title::after {
	content: "";
	display: block;
	width: clamp(120px, 22vw, 200px);
	height: 0.45em;
	margin: 0.3rem auto 0;
	-webkit-mask: center / 100% 100% no-repeat url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%2018'%3E%3Cpath%20d='M5%2012%20C50%203%20120%2017%20195%207'%20fill='none'%20stroke='black'%20stroke-width='5'%20stroke-linecap='round'/%3E%3C/svg%3E");
	mask: center / 100% 100% no-repeat url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%2018'%3E%3Cpath%20d='M5%2012%20C50%203%20120%2017%20195%207'%20fill='none'%20stroke='black'%20stroke-width='5'%20stroke-linecap='round'/%3E%3C/svg%3E");
}

.ab-steps__title::after {
	background-color: var(--ab-accent-1);
}

.ab-cta__title::after {
	margin-inline: 0;            /* linksbuendig (zweispaltiger CTA) */
	background-color: var(--ab-white);
	opacity: 0.9;
}


/* =============================================================================
   20. MOTION
   Hover-Micro-Interactions (immer) + Scroll-Driven Animationen (progressive
   enhancement: nur bei Support UND ohne reduced-motion). Keine JS-Lib.
   ============================================================================= */

/* --- Hover: Karten-Lift --- */
.ab-steps__item,
.ab-pricing__card,
.ab-testimonials__item {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ab-steps__item:hover,
.ab-pricing__card:hover,
.ab-testimonials__item:hover {
	transform: translateY(-4px);
	box-shadow: var(--ab-shadow-md);
}

/* --- Hover: Link-Underline (a11y: Unterstreichung bleibt, verstaerkt sich) --- */
a:not(.wp-block-button__link) {
	transition: text-decoration-thickness 0.2s ease, text-underline-offset 0.2s ease, color 0.2s ease;
}

a:not(.wp-block-button__link):hover {
	text-decoration-thickness: 2px;
	text-underline-offset: 0.22em;
}

/* --- Terminal-Cursor (Signature) --- */
.ab-proof__code::after {
	content: "";
	display: inline-block;
	width: 0.55em;
	height: 1.05em;
	margin-left: 0.15em;
	vertical-align: -0.18em;
	background-color: #e8e8e8;
	opacity: 0.75;
}

/* --- Scroll-Driven: nur mit Support + ohne reduced-motion --- */
@media (prefers-reduced-motion: no-preference) {

	@supports (animation-timeline: view()) {

		/* Duenne Scroll-Progress-Leiste oben */
		body::before {
			content: "";
			position: fixed;
			inset: 0 0 auto 0;
			height: 3px;
			z-index: 10000;
			transform: scaleX(0);
			transform-origin: left;
			background-color: var(--ab-accent-1);
			animation-name: ab-scroll-progress;
			animation-fill-mode: both;
			animation-timeline: scroll(root);
		}

		/* Handgezeichnete Unterstreichung zeichnet sich beim Reinscrollen (links -> rechts) */
		.ab-steps__title::after,
		.ab-cta__title::after {
			clip-path: inset(0 100% 0 0);
			animation-name: ab-underline-draw;
			animation-fill-mode: both;
			animation-timeline: view();
			animation-range: entry 15% cover 35%;
		}
	}

	/* Terminal-Cursor blinkt (zeitbasiert) */
	.ab-proof__code::after {
		animation: ab-caret-blink 1.1s step-end infinite;
	}
}

@keyframes ab-scroll-progress {
	to { transform: scaleX(1); }
}

@keyframes ab-caret-blink {
	50% { opacity: 0; }
}

@keyframes ab-underline-draw {
	to { clip-path: inset(0 0 0 0); }
}


/* =============================================================================
   21. STICKY CTA — .ab-sticky-cta  (Conversion: dauerhafter Buchungs-Anker)
   Globales Chrome (eigener Template-Part, nicht im Seiteninhalt). Wird per JS
   eingeblendet, sobald der Hero aus dem Viewport ist, und wieder ausgeblendet,
   sobald der Schluss-CTA sichtbar wird (kein doppelter CTA). Ohne JS unsichtbar.
   ============================================================================= */

.ab-sticky-cta {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 90;
	display: flex;
	justify-content: flex-end;
	padding: clamp(1rem, 3vw, 2rem);
	pointer-events: none;          /* nur der Button selbst faengt Klicks */
	opacity: 0;
	visibility: hidden;
	transform: translateY(120%);
	transition: opacity 0.25s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}

.ab-sticky-cta.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 0.25s ease, transform 0.3s ease;
}

.ab-sticky-cta .wp-block-buttons,
.ab-sticky-cta .wp-block-button {
	pointer-events: auto;
	margin: 0;
}

/* Der primaere Button wird hier zur schwebenden Pille mit kraeftigerem Schatten. */
.ab-sticky-cta .wp-block-button__link {
	border-radius: var(--ab-radius-pill);
	box-shadow: var(--ab-shadow-lg);
}

@media (max-width: 600px) {
	.ab-sticky-cta {
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ab-sticky-cta,
	.ab-sticky-cta.is-visible {
		transform: none;
		transition: opacity 0.2s ease, visibility 0s;
	}
}


/* =============================================================================
   22. KONTAKT — .ab-contact  (Calendly-Einbettung + Kontaktformular CF7)
   Zwei Spalten: Kalender + Formular; auf Mobile gestapelt. CF7-Markup wird an
   das ab-CI angeglichen (einzige bewusste Ausnahme vom strikten BEM, analog
   zu .wp-block-button__link).
   ============================================================================= */

.ab-contact {
	scroll-margin-top: 6rem;       /* sticky Header nicht ueber dem #kontakt-Anker */
}

.ab-contact__head {
	margin-block-end: clamp(2rem, 5vw, 3.5rem);
}

.ab-contact__title {
	margin: 0 0 0.75rem;
}

.ab-contact__intro {
	margin: 0 auto;
	max-width: 52ch;
	color: var(--ab-text-muted);
}

.ab-contact__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}

.ab-contact__col-title {
	margin: 0 0 1.25rem;
}

.ab-contact__calendly {
	min-width: 0;
	height: 680px;
	border-radius: var(--ab-radius-md);
	overflow: hidden;
	background-color: var(--ab-card);   /* Platzhalterflaeche, bis Calendly laedt */
	border: var(--ab-border);
}

/* Calendly Click-to-load — Einwilligungs-Box (vor dem Laden) */
.ab-calendly__consent {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.85rem;
	text-align: center;
	padding: clamp(1.5rem, 4vw, 2.5rem);
}

.ab-calendly__icon {
	width: 2.5rem;
	height: 2.5rem;
	color: var(--ab-accent-1);
}

.ab-calendly__title {
	margin: 0;
	font-family: var(--ab-font-mono);
	font-size: 1.05rem;
	font-weight: 500;
	color: var(--ab-text);
}

.ab-calendly__text {
	margin: 0;
	max-width: 34ch;
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--ab-text-muted);
}

.ab-calendly__text a {
	color: var(--ab-accent-1);
	text-decoration: underline;
}

.ab-calendly__load {
	margin-top: 0.35rem;
	padding: 0.85rem 1.6rem;
	border: 0;
	border-radius: var(--ab-radius-pill);
	background-color: var(--ab-accent-1);
	color: var(--ab-white);
	font-family: var(--ab-font-body);
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	box-shadow: var(--ab-shadow-accent);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ab-calendly__load:hover {
	transform: translateY(-2px);
	box-shadow: var(--ab-shadow-accent-strong);
}

.ab-calendly__note {
	margin: 0;
	font-size: 0.85rem;
	color: var(--ab-text-muted);
}

.ab-calendly.is-loading .ab-calendly__load {
	opacity: 0.6;
	pointer-events: none;
}

.ab-calendly__widget {
	min-width: 320px;
	height: 680px;
}

@media (max-width: 880px) {
	.ab-contact__grid {
		grid-template-columns: 1fr;
	}

	.ab-contact__calendly,
	.ab-calendly__widget {
		height: 600px;
	}
}

/* --- Contact Form 7 an das ab-CI angleichen --- */
.ab-contact .wpcf7 {
	margin: 0;
}

.ab-contact .wpcf7-form p {
	margin: 0 0 1.1rem;
}

.ab-contact .wpcf7-form label {
	display: block;
	font-weight: 600;
	font-size: 0.95rem;
}

.ab-contact input[type="text"],
.ab-contact input[type="email"],
.ab-contact textarea {
	width: 100%;
	margin-top: 0.4rem;
	padding: 0.85rem 1rem;
	font-family: var(--ab-font-body);
	font-size: 1rem;
	color: var(--ab-text);
	background-color: var(--ab-card);
	border: var(--ab-border-strong);
	border-radius: var(--ab-radius-sm);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ab-contact textarea {
	min-height: 150px;
	resize: vertical;
}

.ab-contact input[type="text"]:focus,
.ab-contact input[type="email"]:focus,
.ab-contact textarea:focus {
	outline: none;
	border-color: var(--ab-accent-1);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ab-accent-1) 22%, transparent);
}

.ab-contact .wpcf7-submit {
	display: inline-block;
	padding: 1rem 2.25rem;
	font-family: var(--ab-font-body);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--ab-white);
	background-color: var(--ab-accent-1);
	border: none;
	border-radius: var(--ab-radius-sm);
	box-shadow: var(--ab-shadow-accent);
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.ab-contact .wpcf7-submit:hover {
	transform: translateY(-2px);
	box-shadow: var(--ab-shadow-accent-strong);
}

/* CF7-Statusmeldungen + Validierung */
.ab-contact .wpcf7-response-output {
	margin: 1rem 0 0;
	padding: 0.85rem 1rem;
	border-radius: var(--ab-radius-sm);
	font-size: 0.95rem;
}

.ab-contact .wpcf7 form.sent .wpcf7-response-output {
	border: 1px solid var(--ab-accent-2);
}

.ab-contact .wpcf7 form.invalid .wpcf7-response-output,
.ab-contact .wpcf7 form.unaccepted .wpcf7-response-output,
.ab-contact .wpcf7 form.failed .wpcf7-response-output {
	border: 1px solid #C0492B;
}

.ab-contact .wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.85rem;
	color: #C0492B;
}

.ab-contact .wpcf7-spinner {
	margin: 0 0 0 0.75rem;
}

.ab-contact__formnote {
	margin: 0.9rem 0 0;
	font-size: 0.85rem;
	color: var(--ab-text-muted);
}

/* Honeypot-Feld (Spamschutz) — fuer Menschen unsichtbar, fuer Bots ein Koeder */
.ab-contact .ab-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* CF7 Einwilligungs-Checkbox (Datenschutz) */
.ab-contact .wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}

.ab-contact .wpcf7-acceptance label {
	display: flex;
	gap: 0.55rem;
	align-items: flex-start;
	font-weight: 400;
	font-size: 0.85rem;
	line-height: 1.45;
	color: var(--ab-text-muted);
}

.ab-contact .wpcf7-acceptance input[type="checkbox"] {
	margin-top: 0.15rem;
	flex: none;
	accent-color: var(--ab-accent-1);
}

.ab-contact .wpcf7-acceptance a {
	color: var(--ab-accent-1);
	text-decoration: underline;
}

/* FAQ-Abschluss: dezenter Text-Link (kein Button — CTA folgt direkt darunter) */
.ab-faq__more {
	margin: clamp(2rem, 4vw, 2.75rem) 0 0;
	color: var(--ab-text-muted);
	font-size: 1rem;
}


/* =============================================================================
   23. PLATZHALTER — .ab-placeholder  (Boxen, bis echte Bilder/Grafiken da sind)
   ============================================================================= */

.ab-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 1.5rem;
	color: var(--ab-text-muted);
	font-family: var(--ab-font-mono);
	font-size: 0.8rem;
	letter-spacing: -0.01em;
	border: 2px dashed color-mix(in srgb, var(--ab-text) 22%, transparent);
}


/* =============================================================================
   24. HERO-PANEL — .ab-hero__panel  ("Claude denkt"-Chip ueber dem Foto)
   ============================================================================= */

.ab-hero__panel {
	position: absolute;
	left: clamp(-1.25rem, -2vw, -0.5rem);
	bottom: 1.5rem;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.7rem 1rem;
	font-family: var(--ab-font-mono);
	font-size: 0.85rem;
	letter-spacing: -0.01em;
	color: var(--ab-text);
	background-color: var(--ab-card);
	border: var(--ab-border-strong);
	border-radius: var(--ab-radius-md);
	box-shadow: var(--ab-shadow-md);
}

.ab-hero__panel-spin {
	color: var(--ab-accent-1);
	font-weight: 700;
}

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


/* =============================================================================
   25. SECOND BRAIN — .ab-brain  (vernetztes Wissen, animiertes Knotennetz)
   ============================================================================= */

.ab-brain__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 6vw, 5rem);
	align-items: center;
}

.ab-brain__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.1rem;
}

.ab-brain__title,
.ab-brain__text {
	margin: 0;
}

.ab-brain__text {
	color: var(--ab-text-muted);
	font-size: clamp(1.05rem, 1.6vw, 1.2rem);
}

.ab-brain__visual {
	position: relative;
	aspect-ratio: 1 / 1;
	/* transparent — das Knotennetz liegt direkt auf dem Seitenhintergrund */
}

.ab-brain__canvas {
	display: block;
	width: 100%;
	height: 100%;
}


/* =============================================================================
   26. AUTOMATISIERUNGEN — .ab-automation  (zweispaltig: Text + Grafik-Slot)
   ============================================================================= */

.ab-automation__grid {
	display: grid;
	grid-template-columns: 1fr 0.9fr;
	gap: clamp(2rem, 6vw, 5rem);
	align-items: center;
}

.ab-automation__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
}

.ab-automation__title,
.ab-automation__text {
	margin: 0;
}

.ab-automation__text {
	font-size: clamp(1.05rem, 1.8vw, 1.25rem);
	line-height: 1.6;
}

.ab-automation__media {
	aspect-ratio: 16 / 11;
	border-radius: var(--ab-radius-lg);
	overflow: hidden;
}

/* Echte Illustration: natuerliche Hoehe, kein Beschnitt */
.ab-automation__media:has(img) {
	aspect-ratio: auto;
}

.ab-automation__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--ab-radius-lg);
}


/* =============================================================================
   27b. LEGAL — .ab-legal  (Impressum / Datenschutz — sachliche, lesbare Typografie)
   ============================================================================= */

.ab-legal__back {
	display: inline-block;
	margin-block-end: 2rem;
	font-family: var(--ab-font-mono);
	font-size: 0.85rem;
	letter-spacing: -0.01em;
}

.ab-legal h1,
.ab-legal h2,
.ab-legal h3,
.ab-legal h4 {
	font-family: var(--ab-font-body);   /* Sans statt Brush -> seriös + lesbar */
	color: var(--ab-text);
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.ab-legal h1 {
	font-size: clamp(2rem, 4vw, 2.6rem);
	line-height: 1.15;
	margin: 0 0 1.5rem;
}

.ab-legal h2 {
	font-size: 1.4rem;
	line-height: 1.25;
	margin: 2.4rem 0 0.8rem;
}

.ab-legal h3 {
	font-size: 1.1rem;
	margin: 1.6rem 0 0.5rem;
}

.ab-legal h4 {
	font-size: 1rem;
	margin: 1.2rem 0 0.4rem;
}

.ab-legal p,
.ab-legal li {
	font-size: 0.95rem;
	line-height: 1.7;
	color: var(--ab-text-muted);
}

.ab-legal p {
	margin: 0 0 1rem;
}

.ab-legal ul {
	margin: 0 0 1rem 1.25rem;
}

.ab-legal li {
	margin-bottom: 0.4rem;
}


/* =============================================================================
   27. TAB-CHAOS — .ab-tabstack  (Problem-Visual: ChatGPT/Claude/Notion ueberlappend)
   Drei verdrehte Fake-Browserfenster -> macht "kein System" sichtbar. Reines CSS.
   ============================================================================= */

.ab-statement__visual {
	position: relative;
	width: 100%;
	max-width: 560px;
	height: clamp(280px, 44vw, 350px);
	margin-block-start: clamp(1.75rem, 4vw, 2.75rem);
}

.ab-tabstack {
	position: absolute;
	inset: 0;
}

.ab-tabwin {
	position: absolute;
	width: clamp(230px, 56%, 320px);
	background-color: var(--ab-card);
	border: var(--ab-border-strong);
	border-radius: var(--ab-radius-md);
	box-shadow: var(--ab-shadow-md);
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ab-tabwin__bar {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.55rem 0.8rem;
	background-color: var(--ab-surface);
	border-block-end: var(--ab-border);
}

.ab-tabwin__dots {
	display: inline-flex;
	gap: 0.3rem;
	flex: none;
}

.ab-tabwin__dots i {
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	background-color: color-mix(in srgb, var(--ab-text) 22%, transparent);
}

.ab-tabwin__app {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-family: var(--ab-font-mono);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--ab-text);
}

.ab-tabwin__fav {
	width: 0.85rem;
	height: 0.85rem;
	border-radius: 0.25rem;
	display: inline-block;
	flex: none;
}

.ab-tabwin__body {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1rem 0.9rem 1.25rem;
}

.ab-tabwin__line {
	height: 0.5rem;
	width: 100%;
	border-radius: var(--ab-radius-pill);
	background-color: color-mix(in srgb, var(--ab-text) 12%, transparent);
}

.ab-tabwin__line--short {
	width: 60%;
}

/* Chaotische Lage: Versatz + Rotation + Stapelreihenfolge */
.ab-tabwin--notion  { top: 0;    left: 4%;  transform: rotate(-5deg); z-index: 1; }
.ab-tabwin--chatgpt { top: 16%;  right: 2%; transform: rotate(4deg);  z-index: 2; }
.ab-tabwin--claude  { top: 40%;  left: 12%; transform: rotate(-2deg); z-index: 3; }

/* App-Favicons (dezente Wiedererkennung) */
.ab-tabwin--chatgpt .ab-tabwin__fav { background-color: #10A37F; }
.ab-tabwin--claude  .ab-tabwin__fav { background-color: var(--ab-accent-1); }
.ab-tabwin--notion  .ab-tabwin__fav { background-color: var(--ab-text); }

/* Hover: Fenster richtet sich kurz auf + hebt sich (kleiner "wenn es doch Ordnung gaebe"-Moment) */
.ab-tabwin:hover {
	transform: rotate(0deg) translateY(-4px);
	box-shadow: var(--ab-shadow-lg);
	z-index: 4;
}

@media (prefers-reduced-motion: reduce) {
	.ab-tabwin { transition: none; }
	.ab-tabwin:hover { transform: none; }
}

@media (max-width: 880px) {
	.ab-brain__grid,
	.ab-automation__grid {
		grid-template-columns: 1fr;
	}

	.ab-brain__visual {
		order: -1;
	}

	.ab-hero__panel {
		left: 1rem;
		bottom: 1rem;
		font-size: 0.78rem;
	}
}


/* =============================================================================
   28. SOCIAL — LinkedIn (About-Sektion + Footer)
   ============================================================================= */

/* About: beschrifteter Pill-Button */
.ab-about__linkedin {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-block-start: 0.25rem;
	padding: 0.6rem 1.15rem;
	font-family: var(--ab-font-body);
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--ab-text);
	background-color: var(--ab-card);
	border: var(--ab-border-strong);
	border-radius: var(--ab-radius-pill);
	text-decoration: none;
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.ab-about__linkedin:hover {
	color: var(--ab-accent-1);
	border-color: var(--ab-accent-1);
	transform: translateY(-2px);
	box-shadow: var(--ab-shadow-sm);
	text-decoration: none;
}

.ab-about__linkedin svg {
	width: 1.1rem;
	height: 1.1rem;
	flex: none;
}

/* Footer: Icon-Button */
.ab-site-footer__social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	margin-block-end: 1rem;
	color: var(--ab-text);
	border: var(--ab-border-strong);
	border-radius: var(--ab-radius-pill);
	text-decoration: none;
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.ab-site-footer__social:hover {
	color: var(--ab-accent-1);
	background-color: var(--ab-card);
	border-color: var(--ab-accent-1);
	text-decoration: none;
}

.ab-site-footer__social svg {
	width: 1.2rem;
	height: 1.2rem;
}

@media (prefers-reduced-motion: reduce) {
	.ab-about__linkedin { transition: color 0.2s ease, background-color 0.2s ease; }
	.ab-about__linkedin:hover { transform: none; }
}