/*
Theme Name: 6P Marketing
Theme URI: https://6p-marketing.de/
Author: 6P Marketing
Author URI: https://6p-marketing.de/
Description: Eigenes Theme für 6p-marketing.de nach der Positionierung vom 14.10.2026, Gestaltung nach Entwurf A mit Einstieg 5 (gewählt 15.10.2026), CI Richtung A mit Nachtblau und Orange.
Version: 0.2.0
Requires at least: 6.3
Requires PHP: 7.4
Text Domain: 6p
License: Alle Rechte vorbehalten
*/

/* Gestaltung aus build/richtungen/a/style.css und einstieg-varianten.css (Einstieg 5), dazu Seitenkopf, Kalender und Fließtext.
   Farben und Kontraste nur aus ci-vorschlag.md Abschnitt 3 (Richtung A). Orange trägt nur das eine Wort je
   Überschrift, den Hauptknopf und den Balken des Kunden; nie Schrift auf hellem Grund, nie Fläche hinter Weiß.
   Ecken: Schale 1.75rem, Kern darin 1.25rem (Schale minus .5rem Rand), kleine Teile .75rem, Knöpfe voll rund. */

@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/fira-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/fira-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/fira-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/fira-sans-latin-700-normal.woff2") format("woff2"); }

/* Tokens wörtlich aus ci-vorschlag.md, Abschnitt 3; Erfolg, Warnung und Display gehören zu Berichten und Motiven, nicht zur Website. */
:root {
	--c-dunkel: #14213A; --c-text2: #4A5670; --c-grund: #F5F7FA; --c-flaeche: #E8EDF4;
	--c-karte: #FFFFFF; --c-linie: #C9D2DF; --c-feldrand: #7B879C; --c-hell2: #B8C3D6;
	--c-akzent: #F39200; --c-balken: #7D8BA3; --c-erfolg: #17804E; --c-warnung: #B42318;
	--f-text: "Fira Sans", system-ui, sans-serif;
	--f-display: "Fira Sans Extra Condensed", "Fira Sans", sans-serif;

	--r-schale: 1.75rem;
	--r-karte: 1.25rem;
	--r-klein: .75rem;
	--r-voll: 999px;

	/* Schatten in Nachtblau getönt, nie Schwarz */
	--schatten: 0 1px 2px rgba(20, 33, 58, .06), 0 24px 48px -24px rgba(20, 33, 58, .28);
	--schatten-tief: 0 2px 6px rgba(20, 33, 58, .10), 0 48px 96px -32px rgba(20, 33, 58, .55);
	--ease: cubic-bezier(.32, .72, 0, 1);

	--rand: clamp(1rem, 4vw, 2.5rem);
	--abstand: clamp(4.5rem, 3rem + 5vw, 8rem);

	/* Überhang der Bühnen-Karte in den Zahlen-Abschnitt; --einstieg-unten ist der Innenabstand unten im Einstieg */
	--einstieg-unten: 3rem;
	--ueberhang: 6rem;
}
@media (min-width: 640px) { :root { --ueberhang: 8rem; } }
@media (min-width: 1024px) { :root { --ueberhang: 13rem; } }

/* Grundlagen */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 1.5rem; }
body {
	margin: 0; background: var(--c-grund); color: var(--c-dunkel);
	font-family: var(--f-text); font-size: 1.0625rem; line-height: 1.6; font-weight: 400;
	-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
	overflow-wrap: break-word;
}
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
strong { font-weight: 700; }

h1, h2, h3 { font-weight: 600; line-height: 1.1; letter-spacing: -.015em; text-wrap: balance; }
h1 { font-weight: 700; font-size: clamp(2.125rem, 1.25rem + 3.4vw, 4rem); line-height: 1.05; letter-spacing: -.025em; }
h2 { font-size: clamp(1.875rem, 1.25rem + 2.2vw, 3rem); max-width: 24ch; }
h3 { font-size: 1.3125rem; line-height: 1.25; letter-spacing: -.01em; }
@media (max-width: 599.98px) { p, li, dd { hyphens: auto; } }

.huelle { width: 100%; max-width: calc(75rem + 2 * var(--rand)); margin-inline: auto; padding-inline: var(--rand); }
.lead { font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); line-height: 1.55; color: var(--c-text2); max-width: 38rem; text-wrap: pretty; }

/* Das eine hervorgehobene Wort (p6_ueberschrift macht es aus **wort**): orange Fläche, dunkle Schrift (6,81 zu 1) */
.wort {
	background: var(--c-akzent); color: var(--c-dunkel);
	padding: 0 .16em; margin: 0 -.02em; border-radius: .14em;
	-webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* Barrierefreiheit */
.unsichtbar { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sprunglink {
	position: absolute; left: 1rem; top: -10rem; z-index: 10;
	padding: .75rem 1.25rem; background: var(--c-karte); color: var(--c-dunkel);
	border-radius: var(--r-voll); font-weight: 500; text-decoration: none;
}
.sprunglink:focus { top: 1rem; }
main:focus { outline: none; }
:focus-visible { outline: 3px solid var(--c-dunkel); outline-offset: 3px; }
.dunkel :focus-visible, .kopf :focus-visible, .kachel--dunkel :focus-visible, .kalender :focus-visible, .fuss :focus-visible { outline-color: #FFFFFF; }
/* Video und Kalender liegen in Rahmen mit overflow: hidden, deshalb liegt ihr Ring innen; der geladene Kalender ist weiß */
.video__innen video:focus-visible, .kalender iframe:focus-visible { outline-offset: -3px; }
.kalender--geladen :focus-visible { outline-color: var(--c-dunkel); }

/* Knöpfe und Textlinks */
.knopf {
	display: inline-flex; align-items: center; justify-content: center; gap: .875rem;
	min-height: 3.25rem; max-width: 100%; padding: .375rem .375rem .375rem 1.5rem;
	border-radius: var(--r-voll); font-weight: 500; font-size: 1rem; line-height: 1.2; text-align: center; text-decoration: none;
	transition: transform .5s var(--ease), background-color .3s var(--ease), color .3s var(--ease);
}
.knopf--haupt { background: var(--c-akzent); color: var(--c-dunkel); }
.knopf__pfeil { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--c-dunkel); display: grid; place-items: center; transition: transform .5s var(--ease); }
.knopf__pfeil::before { content: ""; width: .5rem; height: .5rem; border-top: 2px solid #FFFFFF; border-right: 2px solid #FFFFFF; transform: translateX(-1px) rotate(45deg); }
.knopf:hover { transform: translateY(-1px); }
.knopf:hover .knopf__pfeil { transform: translateX(3px); }
.knopf:active { transform: scale(.98); }
/* Heller Knopf nur auf Nachtblau (Kopf, Seitenkopf, Kalender) */
.knopf--hell { min-height: 2.75rem; padding: 0 1.25rem; color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); font-size: .9375rem; }
.knopf--hell:hover { background: #FFFFFF; color: var(--c-dunkel); }
@media (max-width: 359.98px) { .knopf__pfeil { display: none; } .knopf--haupt { padding: .375rem 1.25rem; } }

.textlink {
	display: inline-flex; align-items: center; gap: .625rem; min-height: 2.75rem; align-self: flex-start;
	font-weight: 500; color: var(--c-dunkel);
	text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em;
}
.textlink::after { content: ""; flex: none; width: .4rem; height: .4rem; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .4s var(--ease); }
.textlink:hover::after { transform: translateX(3px) rotate(45deg); }
.dunkel .textlink, .kachel--dunkel .textlink { color: #FFFFFF; }

/* Schale: Doppelrand um Karten, die man prüfen soll (Befund, Zusagen, Video, Preis) */
.schale {
	padding: .5rem; border-radius: var(--r-schale); background: var(--c-flaeche);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 0 0 1px rgba(20, 33, 58, .06), var(--schatten);
}
.abschnitt--flaeche .schale { background: rgba(255, 255, 255, .55); }


/* Kopf */
.kopf { background: var(--c-dunkel); color: #FFFFFF; }
.kopf__innen { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1rem; min-height: 4.5rem; }
.kopf__logo { display: inline-flex; align-items: center; min-height: 2.75rem; margin-right: auto; color: #FFFFFF; }
.logo { width: auto; height: 1.25rem; aspect-ratio: 374.89 / 52.9; }
.kopf__nav { width: 100%; }
.kopf__nav ul { display: flex; flex-wrap: wrap; gap: 0 .25rem; padding-bottom: .5rem; margin-inline: -.75rem; }
.kopf__nav a {
	display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .75rem;
	border-radius: var(--r-voll); font-weight: 500; font-size: .9375rem; color: #FFFFFF; text-decoration: none;
	transition: background-color .3s var(--ease);
}
.kopf__nav a:hover { background: rgba(255, 255, 255, .08); }
.kopf__nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .4em; }
.kopf__knopf { display: none; }
.kopf__menue { display: none; }
.js .kopf__menue {
	display: inline-flex; align-items: center; gap: .625rem; min-height: 2.75rem; padding: 0 1.125rem;
	border: 0; border-radius: var(--r-voll); background: transparent; color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45);
	font: inherit; font-size: .9375rem; font-weight: 500; cursor: pointer;
}
.kopf__menue-zeichen { position: relative; width: 1rem; height: .625rem; }
.kopf__menue-zeichen::before, .kopf__menue-zeichen::after {
	content: ""; position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor;
	transition: transform .4s var(--ease), top .4s var(--ease);
}
.kopf__menue-zeichen::before { top: 0; }
.kopf__menue-zeichen::after { top: calc(100% - 2px); }
.kopf__menue[aria-expanded="true"] .kopf__menue-zeichen::before { top: calc(50% - 1px); transform: rotate(45deg); }
.kopf__menue[aria-expanded="true"] .kopf__menue-zeichen::after { top: calc(50% - 1px); transform: rotate(-45deg); }
.js .kopf__nav { display: none; }
.js .kopf__nav.ist-offen { display: block; }
.js .kopf__nav.ist-offen ul { flex-direction: column; padding: .25rem 0 1.25rem; }
.js .kopf__nav.ist-offen + .kopf__knopf { display: inline-flex; margin-bottom: 1.5rem; } /* Check-Knopf auch im offenen Handy-Menü (Philipp 23.10.) */
@media (min-width: 480px) { .logo { height: 1.5rem; } }
@media (min-width: 1024px) {
	.kopf__innen { flex-wrap: nowrap; gap: 1.5rem; min-height: 4.75rem; }
	.js .kopf__menue { display: none; }
	.kopf__nav, .js .kopf__nav { display: block; width: auto; }
	.kopf__nav ul { padding: 0; margin: 0; flex-wrap: nowrap; }
	.kopf__knopf { display: inline-flex; white-space: nowrap; }
}

/* Einstieg und Seitenkopf: dunkle Bühne. Der Lichtkegel liegt hinter der Karte und läuft vor den Rändern aus. */
.einstieg, .seitenkopf {
	background:
		radial-gradient(55% 65% at 78% 64%, rgba(184, 195, 214, .16), rgba(184, 195, 214, 0) 72%),
		var(--c-dunkel);
	color: #FFFFFF;
}
.einstieg { padding-block: clamp(2.5rem, 1rem + 5vw, 5rem) var(--einstieg-unten); }
.einstieg__raster, .seitenkopf__raster { display: grid; gap: 3rem; }
.einstieg__satz, .seitenkopf__satz { margin-top: 1.5rem; max-width: 32rem; font-size: clamp(1.125rem, 1rem + .4vw, 1.3125rem); line-height: 1.55; color: var(--c-hell2); text-wrap: pretty; }
.einstieg__aktionen, .seitenkopf__aktionen, .abschnitt__aktion { margin-top: 2.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.einstieg__buehne { position: relative; z-index: 2; margin-bottom: calc(-1 * var(--ueberhang)); }
.einstieg__buehne--innen { margin-bottom: 0; }
.schale--buehne {
	background: var(--c-flaeche);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 0 0 1px rgba(20, 33, 58, .1), var(--schatten-tief);
}
/* Einstieg 5: kleine H1 mit Ort und Leistung, darüber steht groß der Wunsch des Kunden */
.einstieg h1.einstieg__ort { margin-bottom: 1rem; font-size: clamp(1rem, .9rem + .3vw, 1.125rem); font-weight: 600; line-height: 1.4; letter-spacing: .01em; color: var(--c-hell2); }
.einstieg__gross { font-weight: 700; font-size: clamp(2.125rem, 1.4rem + 2.4vw, 3.25rem); line-height: 1.08; letter-spacing: -.025em; text-wrap: balance; color: #FFFFFF; }
@media (min-width: 640px) { .einstieg__buehne, .seitenkopf__raster > .schale, .seitenkopf__raster > .kachel { width: 100%; max-width: 34rem; justify-self: end; } }
@media (min-width: 1024px) {
	.einstieg__raster, .seitenkopf__raster { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; column-gap: clamp(2rem, 4vw, 4rem); }
	.einstieg__buehne { align-self: end; max-width: 33rem; }
	.seitenkopf__raster > .ap__bild { justify-self: center; }
}

/* Seitenkopf der Unterseiten, Rechtstexte und 404: dasselbe Band ohne Überhang, ein zweites Kind im Raster steht rechts */
.seitenkopf { padding-block: clamp(2.5rem, 1rem + 5vw, 5rem); }
.seitenkopf h1 { max-width: 20ch; }
/* Auf Nachtblau setzt sich die dunkle Kachel wie die Chips mit heller Fläche und Haarlinie ab */
.seitenkopf .kachel--dunkel { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(184, 195, 214, .22); }
.schale__bild { width: 100%; border-radius: var(--r-karte); }

/* Videokarte mit Zitat (Einstieg 5): Keitens Video oben, darunter Zitat und Name auf Weiß */
.video__innen { overflow: hidden; border-radius: var(--r-karte); background: var(--c-dunkel); }
.video__innen video { width: 100%; aspect-ratio: 16 / 9; }
.stimme-karte { margin: 0; overflow: hidden; border-radius: var(--r-karte); background: var(--c-karte); color: var(--c-dunkel); }
.stimme-karte .video__innen { border-radius: 0; }
.stimme-karte__text { padding: 1.25rem 1.5rem 1.5rem; }
.stimme-karte blockquote p { font-size: clamp(1.0625rem, 1rem + .45vw, 1.3125rem); line-height: 1.35; font-weight: 500; letter-spacing: -.01em; text-wrap: pretty; }
.stimme-karte__name { margin-top: .875rem; font-size: .875rem; line-height: 1.5; color: var(--c-text2); }
.stimme-karte__name strong { display: block; font-size: .9375rem; font-weight: 600; color: var(--c-dunkel); }
/* Dieselbe Karte für den Ansprechpartner im Ablauf (21.10.): Vortragsfoto statt Video, darunter „Ihr Ansprechpartner“ */
.stimme-karte__bild { overflow: hidden; }
.stimme-karte__foto { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 22%; transition: transform 1.6s var(--ease) .1s; }
.stimme-karte__titel { font-size: clamp(1.0625rem, 1rem + .45vw, 1.3125rem); line-height: 1.35; font-weight: 600; letter-spacing: -.01em; hyphens: manual; }

/* Befund-Karte: weiße Berichtsseite, Kopfband in Nachtblau, Balken ohne Hintergrundspur */
.befund { overflow: hidden; border-radius: var(--r-karte); background: var(--c-karte); color: var(--c-dunkel); }
.befund__kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: 1rem 1.25rem; background: var(--c-dunkel); color: #FFFFFF; }
.befund__logo { height: 1.125rem; }
.befund__titel { font-size: .875rem; font-weight: 600; line-height: 1.35; }
.befund__titel span { display: block; font-size: .8125rem; font-weight: 400; color: var(--c-hell2); }
.befund__inhalt { padding: 1.5rem 1.25rem 1.25rem; }
.befund__label { font-size: .875rem; font-weight: 500; color: var(--c-text2); }
.befund__satz { margin-top: .5rem; font-size: clamp(1.1875rem, 1rem + .6vw, 1.4375rem); line-height: 1.3; font-weight: 600; letter-spacing: -.01em; text-wrap: pretty; }
.befund__diagramm-titel { margin-top: 1.5rem; font-size: .875rem; font-weight: 500; color: var(--c-text2); }
.balken { margin-top: .875rem; display: grid; gap: .75rem; }
.balken li { display: grid; gap: .25rem; }
.balken__name { font-size: .875rem; line-height: 1.3; color: var(--c-text2); }
.balken__spur { display: flex; align-items: center; gap: .625rem; }
.balken__balken { flex: none; width: calc((100% - 2.25rem) * var(--anteil) / 100); height: .75rem; border-radius: 0 3px 3px 0; background: var(--c-balken); }
.balken__wert { font-size: .9375rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.balken__kunde .balken__name { color: var(--c-dunkel); font-weight: 600; }
/* Kunde: Orange mit dunklem Rand 1,5 px, weil Orange auf Weiß als Fläche nur 2,35 zu 1 hat */
.balken__kunde .balken__balken { background: var(--c-akzent); box-shadow: inset 0 0 0 1.5px var(--c-dunkel); }
.befund__quelle { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--c-linie); font-size: .8125rem; line-height: 1.45; color: var(--c-text2); }
@media (min-width: 480px) {
	.befund__kopf { padding: 1.125rem 2rem; }
	.befund__titel { text-align: right; }
	.befund__inhalt { padding: 1.75rem 2rem 1.5rem; }
}

/* Zahlen: die eigene Messung als ruhige Leiste; der Abschnitt nimmt den Überhang der Bühnen-Karte auf */
.zahlen { padding-block: calc(var(--ueberhang) - var(--einstieg-unten) + 3.5rem) 4rem; }
.zahlen__reihe { margin-top: 3rem; display: grid; gap: 1.75rem; }
.zahl { padding-top: 1.5rem; border-top: 1px solid var(--c-linie); }
.zahl dt { white-space: nowrap; }
.zahl__gross { font-size: clamp(3rem, 2rem + 3vw, 4.5rem); font-weight: 600; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums lining-nums; }
.zahl__klein { margin-left: .125rem; font-size: clamp(1.125rem, 1rem + .5vw, 1.5rem); font-weight: 500; color: var(--c-text2); }
.zahl dd { margin-top: .75rem; max-width: 22rem; font-size: 1rem; line-height: 1.5; color: var(--c-text2); }
@media (min-width: 768px) { .zahlen__reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 2rem; } }
@media (min-width: 1024px) {
	.zahlen { padding-top: 5rem; }
	.zahlen__raster { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: clamp(2rem, 4vw, 4rem); }
	.zahlen__kopf { grid-column: 1; }
	.zahlen__reihe { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 4.5rem; }
	.zahl { padding: 0 1.75rem; border-top: 0; border-left: 1px solid var(--c-linie); }
	.zahl:first-child { padding-left: 0; border-left: 0; }
}
.zahlen__kopf .lead { margin-top: 1.25rem; }

/* Kundenlogos: keine Einblende-Bewegung, weil Transparenz die Mischung mit dem Grund aufheben würde */
.logos { padding-bottom: 3rem; }
/* Folgt ein weißer Abschnitt, steht zwischen Logos und Überschrift genau ein Abschnittsabstand statt zwei */
.logos + .abschnitt:not(.abschnitt--flaeche) { padding-top: calc(var(--abstand) - 3rem); }
.logos__innen { padding-top: 2.5rem; border-top: 1px solid var(--c-linie); }
.einstieg + .logos .logos__innen, .seitenkopf + .logos .logos__innen { padding-top: 3rem; border-top: 0; }
.logos__titel { max-width: none; font-size: .9375rem; font-weight: 500; letter-spacing: 0; color: var(--c-text2); text-align: center; }
.logos__liste { margin-top: 1.5rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.5rem; }
.logos__liste li { flex: 0 0 calc((100% - 3rem) / 3); max-width: 9.5rem; }
.logos__liste img { width: 100%; filter: grayscale(1) invert(1) contrast(1.1); mix-blend-mode: multiply; opacity: .78; transition: opacity .4s var(--ease); }
.logos__liste li:hover img { opacity: 1; }
@media (min-width: 640px) { .logos__liste li { flex-basis: calc((100% - 4.5rem) / 4); } }
@media (min-width: 1024px) { .logos__liste { flex-wrap: nowrap; justify-content: space-between; } .logos__liste li { flex: 1 1 0; max-width: 10rem; } }

/* Abschnitte */
.abschnitt { padding-block: var(--abstand); }
.abschnitt--flaeche { background: var(--c-flaeche); }
.kopfzeile { max-width: 46rem; }
.kopfzeile .lead { margin-top: 1.25rem; }

/* Leistung als ein Plan: Kacheln mit eigener Fläche; auf der Startseite zwei gleich große Karten (plan--gleich) */
/* ChatGPT-Szene (21.10.): Telefonrahmen in Nachtblau, Schritte nummeriert; breit bleibt das Telefon stehen und wechselt sanft den Screenshot */
.szene { position: relative; }
.szene__text { min-width: 0; }
.szene__raster { display: grid; gap: 3rem; }
.szene__schritte { margin-top: 2.5rem; display: grid; gap: 3rem; counter-reset: szene; }
.szene__schritt { position: relative; padding-left: 3.5rem; counter-increment: szene; }
.szene__schritt::before { content: counter(szene); position: absolute; left: 0; top: -.125rem; width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.0625rem; font-weight: 700; line-height: 1; color: var(--c-dunkel); background: var(--c-karte); box-shadow: inset 0 0 0 2px var(--c-dunkel); }
.szene__schritt h3 { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); }
.szene__schritt p { margin-top: .625rem; max-width: 32rem; color: var(--c-text2); }
.szene__mobil { margin-top: 1.5rem; }
.szene__mobil .telefon { width: min(100%, 15rem); }
.szene__aktion { margin-top: 3rem; padding: clamp(1.5rem, 1rem + 2vw, 2.25rem); border-radius: var(--r-karte); background: var(--c-karte); box-shadow: var(--schatten); }
.szene__aktion p { max-width: 32rem; font-size: 1.0625rem; font-weight: 500; line-height: 1.5; }
.szene__punkte { margin-top: 1rem; display: grid; gap: .625rem; }
.szene__punkte li { position: relative; padding-left: 2.25rem; line-height: 1.45; }
.szene__punkte li::before { content: ""; position: absolute; left: 0; top: .05rem; width: 1.375rem; height: 1.375rem; border-radius: 50%; background: var(--c-flaeche); }
.szene__punkte li::after { content: ""; position: absolute; left: .5rem; top: .3rem; width: .375rem; height: .65rem; border-right: 2px solid var(--c-dunkel); border-bottom: 2px solid var(--c-dunkel); transform: rotate(45deg); }
.szene__aktion .knopf { margin-top: 1.5rem; }
.szene__buehne { display: none; margin: 0; }
.telefon { position: relative; width: min(100%, 18rem); aspect-ratio: 750 / 1624; border-radius: 2.75rem; background: var(--c-dunkel); box-shadow: var(--schatten-tief); }
.telefon img { position: absolute; inset: .5rem; width: calc(100% - 1rem); height: calc(100% - 1rem); object-fit: cover; border-radius: 2.25rem; }
@media (min-width: 1024px) {
	.szene__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); column-gap: clamp(3rem, 7vw, 7rem); align-items: start; }
	.szene__mobil { display: none; }
	.szene__buehne { display: block; position: sticky; top: 5rem; justify-self: center; width: 100%; }
	/* Das Telefon passt immer ganz in die Höhe des Fensters: Breite = (Höhe minus Rand) mal 750/1624 */
	.szene__buehne .telefon { width: min(100%, 22rem, calc((100vh - 8rem) * .4618)); margin-inline: auto; }
	.szene__schritt { min-height: 46vh; }
	.js .szene__schritt { transition: opacity .6s var(--ease); }
	.js .szene__schritt:not(.ist-aktiv) { opacity: .35; }
	.szene__buehne :is(.telefon, .blatt) img + img { display: none; }
	.js .szene__buehne :is(.telefon, .blatt) img { display: block; opacity: 0; transform: translateY(.75rem) scale(.985); transition: opacity .7s var(--ease), transform .9s var(--ease); }
	.js .szene__buehne :is(.telefon, .blatt) img.ist-aktiv { opacity: 1; transform: none; }
	/* Check-Seite: das Blatt ist breiter als das Telefon, deshalb bekommt die Bühne mehr Platz als der Text */
	.szene--blatt .szene__raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2.5rem, 5vw, 5rem); }
	.szene--blatt .szene__buehne { top: max(5rem, calc(50vh - 18rem)); }
}
/* Blatt: Ausschnitt des Beispiel-Befunds (Check-Seite), gleiche Mechanik wie das Telefon, aber hell und im Querformat */
.blatt { position: relative; width: 100%; aspect-ratio: 1468 / 1101; overflow: hidden; border-radius: var(--r-karte); background: var(--c-grund); box-shadow: 0 0 0 1px rgba(20, 33, 58, .08), var(--schatten-tief); }
.blatt img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Einstieg der Check-Seite: das ganze Blatt, oben angeschnitten und nach unten ausgeblendet */
.befund-vorschau { aspect-ratio: 1; overflow: hidden; }
.befund-vorschau img { display: block; width: 100%; height: auto; border-radius: var(--r-karte); -webkit-mask-image: linear-gradient(var(--c-dunkel) 62%, transparent 96%); mask-image: linear-gradient(var(--c-dunkel) 62%, transparent 96%); }

/* Weltkarte (seit 23.10. im Seitenkopf von Über 6P, mit der Zahl darüber) */
[data-zaehlen] .wort { font-variant-numeric: tabular-nums lining-nums; }
.karte { margin: 0; }
.karte__flaeche { position: relative; }
.karte__flaeche img, .karte__flaeche svg { display: block; width: 100%; height: auto; }
.karte__legende { margin-top: 1rem; display: flex; align-items: center; gap: .625rem; font-size: .875rem; line-height: 1.4; color: var(--c-text2); }
.karte__punkt { flex: none; width: .875rem; height: .875rem; border-radius: 3px; background: var(--c-dunkel); }
.karte__land { cursor: pointer; transition: fill .3s var(--ease); }
/* Beim Zeigen wird das Land orange (Philipp 21.10.): Orange markiert hier wie beim Balken des Kunden die eine Stelle, um die es gerade geht */
.karte__land:hover { fill: var(--c-akzent); }
.karte__tip { position: absolute; left: 0; top: 0; z-index: 1; transform: translate(-50%, calc(-100% - .75rem)); padding: .375rem .75rem; border-radius: var(--r-klein); background: var(--c-karte); color: var(--c-dunkel); box-shadow: var(--schatten-tief); font-size: .875rem; font-weight: 600; white-space: nowrap; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
	.karte.ist-inline.ist-da .karte__land { animation: karte-an .8s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms + .2s); }
}
@keyframes karte-an { from { fill: var(--c-linie); } to { fill: var(--c-dunkel); } }
.plattformen { display: flex; gap: .875rem; }
.plattformen svg { display: block; width: 1.75rem; height: 1.75rem; }
.kachel { display: flex; flex-direction: column; gap: 1rem; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-radius: var(--r-schale); }
.kachel h3 { font-size: clamp(1.3125rem, 1.1rem + .6vw, 1.625rem); }
.kachel p { max-width: 34rem; }
.kachel > .textlink { margin-top: auto; }
/* Zwei Wege (21.10.): zwei gleich große weiße Karten, oben je ein kleines Bild aus HTML; beim Hinscrollen erscheinen
   Suchfeld und Treffer, dann schwebt Ihre Anzeige oben ein, im Chat folgt auf die Frage die Antwort mit Ihrem Namen;
   beim Zeigen hebt sich die Karte wie die Bewertungen */
.kachel--weg { padding: 0; gap: 0; overflow: hidden; background: var(--c-karte); box-shadow: var(--schatten); transition: translate .5s var(--ease), box-shadow .5s var(--ease); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .kachel--weg:hover { translate: 0 -4px; box-shadow: var(--schatten-tief); } }
.kachel__text { flex: 1; display: flex; flex-direction: column; gap: 1rem; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.kachel__text > .textlink { margin-top: auto; }
.weg__bild { height: 18.5rem; padding: 1.75rem max(1.25rem, calc((100% - 27rem) / 2)); display: flex; flex-direction: column; gap: .625rem; background: var(--c-flaeche); font-size: .9375rem; line-height: 1.35; }
.weg__tippen.ist-tippend::after { content: ""; display: inline-block; width: 1px; height: 1.05em; margin-left: 1px; vertical-align: -.15em; background: currentColor; animation: weg-marke 1s steps(2, start) infinite; }
@keyframes weg-marke { to { visibility: hidden; } }
.weg__frage:empty { visibility: hidden; }
.weg__bild > * { flex: none; }
.weg__suche { display: flex; align-items: center; gap: .625rem; padding: .625rem 1rem; border-radius: 999px; background: var(--c-karte); color: var(--c-text2); box-shadow: var(--schatten); }
.weg__suche svg { flex: none; width: 1rem; height: 1rem; color: var(--c-dunkel); }
.weg__zeile { display: grid; gap: .375rem; padding: .75rem 1rem; border-radius: var(--r-klein); background: var(--c-karte); }
.weg__zeile--frei { padding: .25rem 0; background: none; }
.weg__zeile--ihr { box-shadow: inset 0 0 0 2px var(--c-dunkel), var(--schatten-tief); }
.weg__zeile--ihr strong { font-size: .9375rem; font-weight: 700; color: var(--c-dunkel); }
.weg__marke { font-size: .75rem; font-weight: 700; color: var(--c-dunkel); }
.weg__strich { display: block; width: 78%; height: .5rem; border-radius: .25rem; background: var(--c-linie); }
.weg__strich--kurz { width: 48%; }
.weg__frage { align-self: flex-end; max-width: 85%; padding: .625rem .875rem; border-radius: 1rem 1rem .25rem 1rem; background: var(--c-dunkel); color: #FFFFFF; }
.weg__antwort { display: flex; align-items: flex-start; gap: .75rem; }
.weg__absender { flex: none; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--c-karte); color: var(--c-dunkel); box-shadow: var(--schatten); }
.weg__absender svg { width: 1.125rem; height: 1.125rem; }
.weg__liste { flex: 1; display: grid; gap: .5rem; }
.weg__bild--chat .weg__zeile { padding: .5rem .875rem; }
.weg__bild--chat .weg__zeile--frei { padding: .25rem 0; }
@media (prefers-reduced-motion: no-preference) {
	.js .weg__teil { opacity: 0; transform: translateY(.5rem); transition: opacity .5s var(--ease) calc(var(--i, 0) * .3s - .2s), transform .7s var(--ease) calc(var(--i, 0) * .3s - .2s), box-shadow .5s var(--ease); }
	.js .weg__zeile--ihr.weg__teil { transform: translateY(-1rem) scale(.96); }
	.js .ist-getippt .weg__teil { opacity: 1; transform: none; }
}
.kachel__text p { color: var(--c-text2); }
.kachel--dunkel { background: var(--c-dunkel); color: #FFFFFF; }
.kachel--dunkel p { color: var(--c-hell2); }
.kachel--dunkel .kachel__klein { margin-top: .5rem; font-size: .875rem; font-weight: 500; }
.chips { display: grid; gap: .5rem; }
.chips li { padding: .625rem .875rem; border-radius: var(--r-klein); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(184, 195, 214, .22); font-size: .9375rem; line-height: 1.4; color: #FFFFFF; }
.kachel--flaeche { background: var(--c-flaeche); }
.kachel--flaeche p { color: var(--c-dunkel); }

/* Zeitleiste: senkrecht bis 1023 px, waagrecht darüber; die Schritte tragen ihre Nummer, damit man beim Scrollen die Reihenfolge sieht (21.10.) */
.zeitleiste { margin-top: 3.5rem; display: grid; gap: 2rem; max-width: 40rem; counter-reset: schritt; }
.zeitleiste li { position: relative; padding-left: 3.5rem; counter-increment: schritt; }
.zeitleiste li::before {
	content: counter(schritt); position: absolute; left: 0; top: 0; width: 2.25rem; height: 2.25rem; border-radius: 50%;
	display: grid; place-items: center; font-size: 1.0625rem; font-weight: 700; line-height: 1; color: var(--c-dunkel);
	background: var(--c-karte); box-shadow: inset 0 0 0 2px var(--c-dunkel);
}
.zeitleiste li::after { content: ""; position: absolute; left: calc(1.125rem - 1px); top: 2.75rem; bottom: -1.5rem; width: 2px; background: var(--c-linie); }
.zeitleiste li:last-child::after { display: none; }
.zeitleiste__wann { font-size: .875rem; font-weight: 500; color: var(--c-text2); }
.zeitleiste h3 { margin-top: .375rem; }
.zeitleiste h3 + p { margin-top: .625rem; font-size: 1rem; color: var(--c-text2); }
@media (min-width: 1024px) {
	.zeitleiste { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; max-width: none; margin-top: 4.5rem; }
	.zeitleiste li { padding: 3.5rem 0 0; }
	.zeitleiste li::after { left: 2.75rem; right: -1.5rem; top: calc(1.125rem - 1px); bottom: auto; width: auto; height: 2px; }
	.zeitleiste li::before { top: 0; }
}

/* Ablauf der Startseite (21.10.): links wer, rechts wie. Breit bleibt das Vortragsfoto stehen, während die Schritte senkrecht
   vorbeiziehen; der Schritt in der Bildmitte ist hervorgehoben (seite.js setzt ist-aktiv), die anderen treten zurück */
.ablauf__raster { margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); display: grid; gap: 2.5rem; }
.ablauf__person { max-width: 34rem; }
.ablauf__schritte .zeitleiste { margin-top: 0; }
.ablauf__schritte .abschnitt__aktion { margin-top: 3rem; }
.zeitleiste li::before { transition: background-color .4s var(--ease), color .4s var(--ease); }
.zeitleiste li.ist-aktiv::before { background: var(--c-dunkel); color: #FFFFFF; }
@media (prefers-reduced-motion: no-preference) {
	.js .ablauf__person .stimme-karte__foto { transform: scale(1.1); }
	.js .ablauf__person.ist-da .stimme-karte__foto { transform: none; }
	.js .ablauf .zeitleiste.hat-aktiv li.ist-da:not(.ist-aktiv) { opacity: .35; }
}
@media (min-width: 1024px) {
	.ablauf__raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; column-gap: clamp(3rem, 5vw, 5rem); }
	.ablauf__person { position: sticky; top: 6rem; }
	.ablauf__schritte { padding-block: 1rem 2rem; }
	.ablauf__schritte .zeitleiste { grid-template-columns: none; gap: 4.5rem; max-width: 36rem; }
	.ablauf__schritte .zeitleiste li { padding: 0 0 0 4rem; }
	.ablauf__schritte .zeitleiste li::before { width: 2.75rem; height: 2.75rem; font-size: 1.25rem; }
	.ablauf__schritte .zeitleiste li::after { left: calc(1.375rem - 1px); right: auto; top: 3.5rem; bottom: -3.75rem; width: 2px; height: auto; }
	.ablauf__schritte .zeitleiste h3 { font-size: clamp(1.375rem, 1.1rem + .8vw, 1.75rem); }
	.ablauf__schritte .zeitleiste h3 + p { font-size: 1.0625rem; }
	.ablauf__schritte .abschnitt__aktion { padding-left: 4rem; }
}

/* Kasten mit den drei Zusagen (Garantie auf den Monatsbericht gestrichen 21.10.) */
.garantie { margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); }
.garantie__innen { display: grid; gap: 2rem; padding: clamp(1.5rem, 1rem + 2.5vw, 3rem); border-radius: var(--r-karte); background: var(--c-karte); }
.garantie__titel { font-size: .9375rem; font-weight: 500; letter-spacing: 0; color: var(--c-text2); }
.zusagen { display: grid; gap: 1rem; }
.zusagen li { position: relative; display: flex; align-items: center; min-height: 1.75rem; padding-left: 2.75rem; font-size: 1.0625rem; font-weight: 500; }
.zusagen li::before { content: ""; position: absolute; left: 0; top: 50%; width: 1.75rem; height: 1.75rem; margin-top: -.875rem; border-radius: 50%; background: var(--c-flaeche); }
.zusagen li::after { content: ""; position: absolute; left: .625rem; top: 50%; width: .45rem; height: .8rem; margin-top: -.5rem; border-right: 2px solid var(--c-dunkel); border-bottom: 2px solid var(--c-dunkel); transform: rotate(45deg); }
@media (min-width: 768px) {
	.zusagen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
}

/* Beweis: Bewertung mit Link zum Google-Profil */
/* Fallstudie Keiten (21.10.): wenig Text, links der Weg zum Termin, rechts die große Zahl über den Säulen. Beim Hinscrollen
   erscheinen die Zeichen nacheinander, die Linie dazwischen zeichnet sich, die Säulen wachsen und die Zahl zählt hoch;
   die gezeigte Säule wird orange wie der Balken des Kunden, die übrigen treten zurück. */
.fall__h2 .wort { white-space: nowrap; }
.fall__raster { margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); display: grid; gap: 2.5rem; }
.fall__text .lead { max-width: 30rem; }
.fall__weg { margin-top: 2rem; display: grid; gap: 1.25rem; }
.fall__weg li { position: relative; display: flex; align-items: center; gap: 1rem; }
.fall__weg li + li::before { content: ""; position: absolute; left: calc(1.5rem - 1px); bottom: 100%; width: 2px; height: 1.25rem; background: var(--c-linie); transform-origin: top; }
.fall__symbol { flex: none; width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; background: var(--c-dunkel); color: #FFFFFF; box-shadow: var(--schatten); }
.fall__symbol svg { width: 1.375rem; height: 1.375rem; }
.fall__schritt { line-height: 1.35; color: var(--c-text2); }
.fall__schritt strong { display: block; font-size: 1.0625rem; font-weight: 600; color: var(--c-dunkel); }
.fall__video { margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid var(--c-linie); display: flex; align-items: center; gap: 1.25rem; text-decoration: none; color: inherit; }
.fall__vorschau { position: relative; flex: none; width: 9rem; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-klein); background: var(--c-dunkel); box-shadow: var(--schatten); }
.fall__vorschau img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.fall__vorschau::after { content: ""; position: absolute; left: 50%; top: 50%; width: 0; height: 0; margin: -.5rem 0 0 -.3rem; border-style: solid; border-width: .5rem 0 .5rem .8rem; border-color: transparent transparent transparent #FFFFFF; filter: drop-shadow(0 1px 3px rgba(20, 33, 58, .5)); }
.fall__video:hover .fall__vorschau img { transform: scale(1.06); }
.fall__dauer { position: absolute; right: .375rem; bottom: .375rem; padding: .0625rem .375rem; border-radius: .25rem; background: rgba(20, 33, 58, .8); color: #FFFFFF; font-size: .75rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.fall__video-text { display: grid; gap: .25rem; }
.fall__video-satz { font-size: .9375rem; line-height: 1.4; color: var(--c-text2); }
/* Fenster für Keitens Video: groß über der Seite, Klick daneben oder Schließen beendet es */
.video-fenster { width: min(60rem, calc(100% - 2rem)); max-width: none; max-height: none; padding: 0; border: 0; background: none; overflow: visible; }
.video-fenster::backdrop { background: rgba(20, 33, 58, .88); }
.video-fenster video { display: block; width: 100%; height: auto; border-radius: var(--r-karte); background: var(--c-dunkel); }
.video-fenster form { margin-top: 1rem; display: flex; justify-content: flex-end; }
.video-fenster button { border: 0; background-color: transparent; font-family: inherit; cursor: pointer; }
.fall__video:hover .textlink::after { transform: translateX(3px) rotate(45deg); }
.fall__karte { margin: 0; order: -1; } /* schmal steht das Diagramm direkt unter der Überschrift, für alle, die nur scrollen */
.fall__innen { padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-radius: var(--r-karte); background: var(--c-karte); }
.fall__anzeige { display: grid; gap: .375rem; }
.fall__zahl { font-size: clamp(3rem, 2.25rem + 3vw, 4.5rem); font-weight: 700; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums lining-nums; color: var(--c-dunkel); }
.fall__was { font-size: .9375rem; font-weight: 500; color: var(--c-text2); }
.fall__chart { margin-top: 1.75rem; height: clamp(11rem, 8rem + 10vw, 15rem); display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); align-items: end; gap: clamp(.375rem, .2rem + .8vw, .875rem); }
.fall__saeule { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .375rem; cursor: default; }
.fall__wert { font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--c-text2); transition: color .3s var(--ease); }
.fall__balken { width: 100%; max-width: 2.75rem; height: calc(var(--anteil) * .78); min-height: .5rem; border-radius: .5rem .5rem .1875rem .1875rem; background: var(--c-dunkel); transform-origin: bottom; transition: background-color .3s var(--ease), opacity .3s var(--ease); }
.fall__saeule.ist-aktiv .fall__balken { background: var(--c-akzent); }
.fall__saeule.ist-aktiv .fall__wert { color: var(--c-dunkel); }
.fall__chart.hat-aktiv .fall__saeule:not(.ist-aktiv) .fall__balken { opacity: .3; }
.fall__monat { font-size: .75rem; color: var(--c-text2); }
@media (prefers-reduced-motion: no-preference) {
	.js .fall__symbol { opacity: 0; transform: scale(.5); transition: opacity .4s var(--ease) calc(var(--i, 0) * .3s + .2s), transform .6s var(--ease) calc(var(--i, 0) * .3s + .2s); }
	.js .ist-da .fall__symbol { opacity: 1; transform: none; }
	.js .fall__weg li + li::before { transform: scaleY(0); transition: transform .3s var(--ease) calc(var(--i, 0) * .3s); }
	.js .ist-da .fall__weg li + li::before { transform: none; }
	.js .fall__karte .fall__balken { transform: scaleY(0); transition: transform .9s var(--ease) calc(var(--i, 0) * 70ms + .2s), background-color .3s var(--ease), opacity .3s var(--ease); }
	.js .fall__karte.ist-da .fall__balken { transform: none; }
	.js .fall__karte .fall__wert { opacity: 0; transition: opacity .5s var(--ease) calc(var(--i, 0) * 70ms + .7s), color .3s var(--ease); }
	.js .fall__karte.ist-da .fall__wert { opacity: 1; }
}
@media (min-width: 1024px) {
	/* beide Spalten gleich hoch: der Video-Link sitzt unten auf der Linie der Karte, die Säulen füllen die Karte */
	.fall__raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(3rem, 5vw, 5rem); }
	.fall__text { display: flex; flex-direction: column; }
	.fall__weg { margin-bottom: 2rem; }
	.fall__text .fall__video { margin-top: auto; }
	.fall__karte { order: 0; display: flex; }
	.fall__innen { flex: 1; display: flex; flex-direction: column; }
	.fall__chart { flex: 1; height: auto; min-height: 13rem; }
}

/* Bewertungen als Karten mit Foto (21.10.): die erste groß über die ganze Breite, darunter zwei nebeneinander */
.zitate { display: grid; gap: 1.25rem; }
.zitat { margin: 0; padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); border-radius: var(--r-karte); background: var(--c-karte); box-shadow: var(--schatten); transition: translate .5s var(--ease), box-shadow .5s var(--ease); }
.zitat .sterne { margin-bottom: .875rem; }
.zitat .sterne span { width: .875rem; height: .875rem; }
.zitat blockquote p { max-width: 40rem; font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); line-height: 1.45; font-weight: 500; letter-spacing: -.01em; text-wrap: pretty; }
.zitat--gross blockquote p { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); line-height: 1.35; letter-spacing: -.015em; }
.zitat figcaption { display: flex; align-items: center; gap: .875rem; margin-top: 1.25rem; font-size: .875rem; line-height: 1.45; color: var(--c-text2); }
.zitat figcaption strong { display: block; font-size: .9375rem; font-weight: 600; color: var(--c-dunkel); }
.zitat__bild { flex: none; width: 3rem; height: 3rem; overflow: hidden; border-radius: 50%; background: var(--c-flaeche); }
.zitat--gross .zitat__bild { width: 3.75rem; height: 3.75rem; }
.zitat__bild img { width: 100%; height: 100%; object-fit: cover; }
.zitat__bild--zoom img { transform: scale(1.22); }
@media (min-width: 640px) { .zitate { grid-template-columns: repeat(2, minmax(0, 1fr)); } .zitat--gross { grid-column: 1 / -1; } }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .zitat:hover { translate: 0 -4px; box-shadow: var(--schatten-tief); } }
.beweis { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); display: grid; gap: 2.5rem; }
.bewertung { padding-top: 2rem; border-top: 1px solid var(--c-linie); display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 1.25rem; row-gap: .375rem; }
.bewertung__wert { grid-row: span 2; font-size: 3.5rem; font-weight: 600; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.sterne { display: flex; gap: .2rem; }
.sterne span { width: 1rem; height: 1rem; background: var(--c-dunkel); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.bewertung__text { font-size: .9375rem; color: var(--c-text2); }
.bewertung .textlink { grid-column: 1 / -1; margin-top: .75rem; }
@media (min-width: 1024px) {
	.beweis { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: center; gap: 4rem; }
	.bewertung { padding: 0 0 0 3rem; border-top: 0; border-left: 1px solid var(--c-linie); }
}

/* Fester Ansprechpartner: Porträt nur rund beschnitten, weil am Rand des Bildes ein oranger Ring steckt */
.ap { display: grid; gap: 2.5rem; }
.ap__bild { width: 12rem; }
.ap__foto { width: min(100%, 26rem); }
.ap__bild img {
	width: 100%; aspect-ratio: 1; border-radius: 50%; object-fit: cover;
	box-shadow: 0 0 0 .5rem var(--c-karte), 0 0 0 calc(.5rem + 1px) var(--c-linie), var(--schatten-tief);
}
.ap__bild figcaption { margin-top: 1.25rem; width: 14rem; font-size: .9375rem; font-weight: 500; line-height: 1.4; }
.ap__text .lead { margin-top: 1.25rem; }
.ap__fakten { margin-top: 2rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1.5rem 3rem; }
.ap__fakten dt { font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); font-weight: 600; line-height: 1.1; letter-spacing: -.02em; }
.ap__fakten dd { margin-top: .25rem; font-size: .9375rem; color: var(--c-text2); }
.ap__text .textlink { margin-top: 1.5rem; }
@media (min-width: 768px) {
	.ap { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: clamp(3rem, 6vw, 6rem); }
	.ap__bild { width: 14rem; text-align: center; }
	.ap__bild figcaption { width: auto; margin-top: 1.75rem; }
}
/* Porträt höchstens 17,5rem breit, damit das 420-px-Bild auch bei doppelter Pixeldichte scharf genug bleibt */
@media (min-width: 1024px) { .ap__bild { width: 17.5rem; } }

/* Preis als Angebotsblatt (21.10., Hormozi: erst der Wert, dann der Preis). Beim Hinscrollen legt sich das Blatt gerade,
   die Posten erscheinen Zeile für Zeile, die Punktlinie läuft zum „inklusive“, und zuletzt setzt sich rechts die Summe in der dunklen Karte */
.preis { margin-top: 3rem; display: grid; gap: 2.5rem; }
.preis__innen { padding: clamp(1.5rem, 1rem + 3vw, 3.25rem); border-radius: var(--r-karte); background: var(--c-karte); }
.preis__kopf { padding-bottom: 1rem; border-bottom: 1px solid var(--c-linie); font-size: .9375rem; font-weight: 600; color: var(--c-text2); }
.preis__posten { margin-top: 1rem; display: grid; gap: .125rem; }
.preis__posten li { display: flex; align-items: flex-end; align-items: last baseline; gap: .75rem; margin-inline: -.75rem; padding: .625rem .75rem; border-radius: var(--r-klein); font-size: clamp(1rem, .95rem + .25vw, 1.125rem); line-height: 1.4; transition: background-color .3s var(--ease); }
.preis__posten li:hover { background: var(--c-grund); }
.preis__was { flex: 0 1 auto; hyphens: manual; }
.preis__linie { flex: 1 1 1.5rem; min-width: 1.5rem; margin-bottom: .3em; border-bottom: 2px dotted var(--c-linie); transform-origin: left center; }
.preis__wert { flex: none; font-weight: 600; color: var(--c-dunkel); }
.preis__summe { padding: clamp(1.75rem, 1rem + 3vw, 3rem); border-radius: var(--r-schale); background: radial-gradient(80% 60% at 0% 0%, rgba(184, 195, 214, .14), rgba(184, 195, 214, 0) 70%), var(--c-dunkel); color: #FFFFFF; box-shadow: var(--schatten-tief); }
.preis__betrag { display: grid; gap: .5rem; }
.preis__ab { font-size: 1.125rem; font-weight: 500; color: var(--c-hell2); }
.preis__zahl { font-size: clamp(2.75rem, 1rem + 4.5vw, 4.5rem); font-weight: 700; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums lining-nums; }
.preis__zusatz { font-size: 1.125rem; font-weight: 500; }
.preis__hinweis { margin-top: .875rem; font-size: .9375rem; color: var(--c-hell2); }
.preis__titel { margin-top: 1.75rem; padding-top: 1.75rem; border-top: 1px solid rgba(184, 195, 214, .25); font-size: 1.0625rem; }
.preis__summe .zusagen { margin-top: 1rem; }
.zusagen--spalte { grid-template-columns: none; gap: .875rem; }
.dunkel .zusagen li::before { background: rgba(255, 255, 255, .1); }
.dunkel .zusagen li::after { border-color: #FFFFFF; }
.preis__aktion { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
@media (min-width: 400px) { .preis__zahl { white-space: nowrap; } }
@media (prefers-reduced-motion: no-preference) {
	.js .preis__blatt[data-zeige] { transform: translateY(2rem) rotate(-1.5deg); }
	.js .preis__blatt[data-zeige].ist-da { transform: none; }
	.js .preis__posten li { opacity: 0; transform: translateY(.5rem); transition: opacity .5s var(--ease) calc(var(--i, 0) * .2s + .35s), transform .6s var(--ease) calc(var(--i, 0) * .2s + .35s), background-color .3s var(--ease); }
	.js .ist-da .preis__posten li { opacity: 1; transform: none; }
	.js .preis__linie { transform: scaleX(0); transition: transform .5s var(--ease) calc(var(--i, 0) * .2s + .5s); }
	.js .ist-da .preis__linie { transform: none; }
	.js .preis__wert { opacity: 0; transition: opacity .4s var(--ease) calc(var(--i, 0) * .2s + .85s); }
	.js .ist-da .preis__wert { opacity: 1; }
	.js .preis__betrag { opacity: 0; transform: scale(.92); transform-origin: left center; transition: opacity .6s var(--ease) calc(var(--i, 0) * .2s + .4s), transform .9s var(--ease) calc(var(--i, 0) * .2s + .4s); }
	.js .ist-da .preis__betrag { opacity: 1; transform: none; }
}
@media (min-width: 1024px) {
	/* links das Blatt, rechts die Summe, beide gleich hoch */
	.preis { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 1.5rem; }
	.preis__blatt { display: flex; }
	/* die Posten verteilen sich über die Höhe der dunklen Karte, damit das Blatt keine leere Unterkante hat */
	.preis__innen { flex: 1; display: flex; flex-direction: column; }
	.preis__posten { flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; }
}

/* Fragen: details/summary ohne JavaScript */
.fragen { display: grid; gap: 2.5rem; }
.fragen__kopf p { margin-top: 1.25rem; max-width: 26rem; color: var(--c-text2); }
.fragen__kopf a { font-weight: 500; color: var(--c-dunkel); }
.frage { border-bottom: 1px solid var(--c-linie); }
.frage:first-child { border-top: 1px solid var(--c-linie); }
.frage summary {
	display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 4rem; padding: 1rem 0;
	list-style: none; cursor: pointer; font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); font-weight: 500; line-height: 1.35;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after {
	content: ""; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%;
	background:
		linear-gradient(var(--c-dunkel), var(--c-dunkel)) center / .875rem 2px no-repeat,
		linear-gradient(var(--c-dunkel), var(--c-dunkel)) center / 2px .875rem no-repeat,
		var(--c-karte);
	transition: transform .4s var(--ease);
}
.frage[open] summary::after { transform: rotate(45deg); }
.frage__antwort { padding: 0 3.75rem 1.5rem 0; color: var(--c-text2); }
@media (min-width: 1024px) {
	.fragen { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: start; gap: 4rem; }
	.fragen__kopf { position: sticky; top: 2rem; }
}

.schmerz__ueberleitung { margin-top: 2rem; max-width: 40rem; font-size: clamp(1.125rem, 1rem + .4vw, 1.3125rem); font-weight: 500; text-wrap: pretty; }

/* Das 6P-Anfragesystem (Startseite, 23.10.): breit links die zwei Wege zu Ihnen, in der Mitte die Landingpage als Knoten, rechts der
   Termin; die Linien dazwischen bewegen sich wie ein Strom, solange Bewegung erlaubt ist. Schmal stehen die Bausteine untereinander */
.system { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); display: grid; gap: 1.75rem; }
.system__baustein { position: relative; padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); border-radius: var(--r-karte); background: var(--c-karte); box-shadow: var(--schatten); }
.system__baustein h3 { margin-top: 1rem; font-size: clamp(1.125rem, 1rem + .4vw, 1.3125rem); }
.system__baustein p { margin-top: .5rem; color: var(--c-text2); }
.system__zeichen { display: flex; gap: .625rem; color: var(--c-dunkel); }
.system__zeichen svg { width: 1.5rem; height: 1.5rem; }
.system__baustein--3 { box-shadow: inset 0 0 0 2px var(--c-dunkel), var(--schatten-tief); }
.system__baustein:not(:last-child)::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 1.75rem; background: repeating-linear-gradient(180deg, var(--c-dunkel) 0 .375rem, transparent .375rem .75rem); }
.system__baustein--1::after { display: none; }
.system__seite { display: grid; gap: .5rem; margin-bottom: 1.25rem; padding: .875rem; border-radius: var(--r-klein); background: var(--c-flaeche); }
.system__leiste { height: .5rem; width: 2.25rem; border-radius: .25rem; background: radial-gradient(circle at .25rem 50%, var(--c-linie) .2rem, transparent .22rem), radial-gradient(circle at 1.125rem 50%, var(--c-linie) .2rem, transparent .22rem), radial-gradient(circle at 2rem 50%, var(--c-linie) .2rem, transparent .22rem); }
.system__knopf { justify-self: start; margin-top: .25rem; padding: .375rem .875rem; border-radius: 999px; background: var(--c-dunkel); color: #FFFFFF; font-size: .8125rem; font-weight: 600; }
/* Auf den Leistungsseiten trägt nur der markierte Baustein den Rahmen, damit die Landingpage nicht mitmarkiert wirkt */
.system--markiert .system__baustein--3 { box-shadow: var(--schatten); }
.system__baustein.ist-hier { box-shadow: inset 0 0 0 2px var(--c-dunkel), var(--schatten-tief); }
.system__baustein.ist-hier .system__zeichen { margin-top: .5rem; }
.system__hier { position: absolute; top: 0; left: clamp(1.25rem, 1rem + 1vw, 1.75rem); transform: translateY(-50%); padding: .25rem .75rem; border-radius: 999px; background: var(--c-dunkel); color: #FFFFFF; font-size: .8125rem; font-weight: 600; }
.system__links { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem 2rem; }
@media (min-width: 1024px) {
	.system { grid-template-columns: minmax(0, 1fr) 3.5rem minmax(0, 1fr) 3.5rem minmax(0, 1fr); grid-template-rows: auto auto; gap: 1.5rem 0; align-items: stretch; }
	.system__baustein--1 { grid-column: 1; grid-row: 1; }
	.system__baustein--2 { grid-column: 1; grid-row: 2; }
	.system__baustein--3 { grid-column: 3; grid-row: 1 / 3; display: flex; flex-direction: column; justify-content: center; }
	.system__baustein--4 { grid-column: 5; grid-row: 1 / 3; align-self: center; }
	.system__baustein--1::after { display: block; }
	.system__baustein:not(:last-child)::after { left: 100%; top: 50%; width: 3.5rem; height: 2px; background: repeating-linear-gradient(90deg, var(--c-dunkel) 0 .375rem, transparent .375rem .75rem); }
}
@media (prefers-reduced-motion: no-preference) {
	.system__baustein:not(:last-child)::after { background-size: 200% 200%; animation: system-strom 1.6s linear infinite; }
}
@keyframes system-strom { from { background-position: 0 0; } to { background-position: .75rem .75rem; } }

/* Kommt Ihnen das bekannt vor? (Startseite, 23.10.): links Frage und unsere Antworten, rechts ein Chat mit der Agentur, der sich beim Hinscrollen abspielt */
.chat-abschnitt { display: grid; gap: 2rem; align-items: center; }
.chat-abschnitt__bei-uns { margin-bottom: 1rem; font-size: .9375rem; font-weight: 600; color: var(--c-text2); }
.chat { width: 100%; max-width: 26rem; justify-self: center; overflow: hidden; border-radius: 1.75rem; background: var(--c-karte); box-shadow: var(--schatten-tief); }
.chat__kopf { display: flex; align-items: center; gap: .75rem; padding: .875rem 1.25rem; border-bottom: 1px solid var(--c-linie); font-weight: 600; }
.chat__bild { width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; background: var(--c-flaeche); font-weight: 700; color: var(--c-text2); }
.chat__verlauf { display: grid; gap: .625rem; padding: 1.25rem; }
.chat__blase { max-width: 85%; padding: .625rem .875rem; border-radius: 1rem; font-size: .9375rem; line-height: 1.4; }
.chat__blase--sie { justify-self: end; border-bottom-right-radius: .25rem; background: var(--c-dunkel); color: #FFFFFF; }
.chat__blase--agentur { justify-self: start; border-bottom-left-radius: .25rem; background: var(--c-flaeche); color: var(--c-dunkel); }
.chat__tippt { display: none; justify-self: start; gap: .25rem; padding: .875rem 1rem; border-radius: 1rem; background: var(--c-flaeche); }
.chat__tippt span { width: .4rem; height: .4rem; border-radius: 50%; background: var(--c-text2); }
.js .chat.ist-spiel .chat__blase { opacity: 0; transform: translateY(.5rem); transition: opacity .4s var(--ease), transform .5s var(--ease); }
.js .chat.ist-spiel .chat__blase.ist-da { opacity: 1; transform: none; }
.js .chat.ist-spiel .chat__tippt.ist-da { display: inline-flex; }
@media (prefers-reduced-motion: no-preference) { .chat__tippt span { animation: chat-tippt 1s ease-in-out infinite; } .chat__tippt span:nth-child(2) { animation-delay: .15s; } .chat__tippt span:nth-child(3) { animation-delay: .3s; } }
@keyframes chat-tippt { 0%, 60%, 100% { opacity: .35; } 30% { opacity: 1; } }
@media (min-width: 1024px) { .chat-abschnitt { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-areas: "kopf chat" "text chat"; align-content: center; column-gap: clamp(3rem, 5vw, 5rem); row-gap: 0; } .chat-abschnitt__kopf { grid-area: kopf; align-self: end; } .chat-abschnitt__text { grid-area: text; align-self: start; margin-top: 1.25rem; } .chat { grid-area: chat; justify-self: end; } }

/* KI-Seite (23.10.): Zahl und Satz links, rechts tippt sich die Suche, und die Übersicht mit KI schiebt sich über die Treffer */
.geo { display: grid; gap: 2.5rem; }
.geo__text .lead { margin-top: 1.25rem; }
.geo__satz { margin-top: 1.25rem; max-width: 32rem; font-size: .9375rem; line-height: 1.55; color: var(--c-text2); }
@media (min-width: 1024px) { .geo { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; column-gap: clamp(3rem, 5vw, 5rem); } }
/* Anzeigen-Seite (23.10.): Geschichte in drei Bildern, vorher grau und leer gezeichnet, bei uns nachtblau und gefüllt, mit derselben Linie dazwischen */
.geschichte { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); display: grid; gap: 2rem; }
.geschichte li { position: relative; padding-left: 4.25rem; }
.geschichte__zeichen { position: absolute; left: 0; top: 0; width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; background: var(--c-karte); color: var(--c-text2); box-shadow: inset 0 0 0 1.5px var(--c-linie); }
.geschichte h3 { font-size: clamp(1.1875rem, 1.05rem + .5vw, 1.375rem); }
.geschichte p { margin-top: .5rem; max-width: 22rem; color: var(--c-text2); }
.geschichte--vorher h3 { color: var(--c-text2); }
.geschichte--nachher .geschichte__zeichen { background: var(--c-dunkel); color: #FFFFFF; box-shadow: var(--schatten); }
.geschichte + .schmerz__ueberleitung { margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
@media (min-width: 768px) {
	.geschichte { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
	.geschichte li { padding: 4.5rem 0 0; }
	.geschichte li::after { content: ""; position: absolute; left: 3.75rem; right: -1.75rem; top: 1.5rem; height: 2px; background: var(--c-linie); }
	.geschichte li:last-child::after { display: none; }
	.geschichte--vorher li::after { background: repeating-linear-gradient(90deg, var(--c-linie) 0 .5rem, transparent .5rem .875rem); }
	.geschichte--nachher li::after { background: var(--c-dunkel); }
}

/* Über 6P: die Weltkarte im Seitenkopf auf heller Schale, darüber die Zahl, die beim Hinscrollen hochzählt */
.karte-schale { padding: clamp(1rem, .5rem + 1.5vw, 1.75rem); }
/* Über 6P (23.10. abends): die Wibit-Geschichte links, die 700.000 Euro mit Weltkarte rechts; schmal untereinander */
.herkunft { display: grid; gap: 2.5rem; align-items: center; }
.herkunft .lead { margin-top: 1.25rem; }
@media (min-width: 1024px) { .herkunft { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(3rem, 5vw, 5rem); } }
.karte__zahl { font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--c-dunkel); font-variant-numeric: tabular-nums lining-nums; }
.karte__satz { margin: .375rem 0 1.25rem; max-width: 28rem; font-size: .9375rem; line-height: 1.5; color: var(--c-text2); }

/* Termin der Check-Seite: drei Zahlen in der Leiste der eigenen Messung, darunter ein Satz und der Kalender */
.termin .zahlen__reihe { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
.termin .zahlen__reihe + .kalender { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
@media (min-width: 768px) { .termin .zahlen__reihe { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; } .termin .zahl { padding: 0 1.75rem; border-top: 0; border-left: 1px solid var(--c-linie); } .termin .zahl:first-child { padding-left: 0; border-left: 0; } }

/* Kalender und Formular von HighLevel: das iframe füllt die Karte, ohne Klick davor (Philipp 23.10.) */
.kalender { display: grid; justify-items: start; gap: 1.5rem; max-width: 46rem; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-radius: var(--r-schale); background: var(--c-dunkel); color: #FFFFFF; }
.kalender--geladen { display: block; max-width: none; padding: 0; overflow: hidden; background: var(--c-karte); box-shadow: var(--schatten); }
.kalender iframe { display: block; width: 100%; min-height: 760px; border: 0; }
/* Datenschutz-Hinweis unten in der Kalender-Karte, statt im HighLevel-Formular (24.10.) */
.kalender__hinweis { padding: 0 1.25rem 1.25rem; font-size: .875rem; line-height: 1.5; text-align: center; color: var(--c-text2); }
.kalender__hinweis a { color: inherit; text-underline-offset: .2em; }

/* Kontakt (23.10. abends): Karte im Einstieg mit kleinem Porträt und den Wegen zu Philipp als große Zeilen */
.kontakt-karte { overflow: hidden; border-radius: var(--r-karte); background: var(--c-karte); color: var(--c-dunkel); }
.kontakt-karte__kopf { display: flex; align-items: center; gap: 1rem; padding: 1.5rem 1.5rem 1.25rem; }
.kontakt-karte__bild { flex: none; width: 3.75rem; height: 3.75rem; overflow: hidden; border-radius: 50%; box-shadow: 0 0 0 3px var(--c-karte), 0 0 0 4px var(--c-linie); }
.kontakt-karte__bild img { display: block; width: 100%; height: 100%; transform: scale(1.12); } /* der orange Ring am Rand des Porträts fällt so aus dem Kreis */
.kontakt-karte__kopf p { display: grid; gap: .125rem; font-size: .9375rem; line-height: 1.4; color: var(--c-text2); }
.kontakt-karte__kopf strong { font-size: 1.125rem; font-weight: 700; color: var(--c-dunkel); }
.kontakt-karte__wege { border-top: 1px solid var(--c-linie); }
.kontakt-karte__wege li + li { border-top: 1px solid var(--c-linie); }
.kontakt-karte__wege a { display: grid; grid-template-columns: 3rem minmax(0, 1fr); grid-template-areas: "zeichen was" "zeichen wert"; column-gap: 1rem; align-items: center; min-height: 4.5rem; padding: .875rem 1.5rem; color: inherit; text-decoration: none; transition: background-color .25s var(--ease); }
.kontakt-karte__wege a:hover { background: var(--c-flaeche); }
.kontakt-karte__zeichen { grid-area: zeichen; width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; background: var(--c-dunkel); color: #FFFFFF; }
.kontakt-karte__zeichen svg { width: 1.375rem; height: 1.375rem; }
.kontakt-karte__was { grid-area: was; font-size: 1.125rem; font-weight: 700; line-height: 1.3; }
.kontakt-karte__wert { grid-area: wert; font-size: .9375rem; line-height: 1.4; color: var(--c-text2); }
.kontakt-karte__ort { display: flex; align-items: center; gap: .625rem; padding: 1rem 1.5rem; border-top: 1px solid var(--c-linie); background: var(--c-flaeche); font-size: .9375rem; color: var(--c-text2); }
.kontakt-karte__ort .kontakt-karte__zeichen { width: auto; height: auto; background: none; color: var(--c-dunkel); }
.kontakt-karte__ort svg { width: 1.125rem; height: 1.125rem; }
/* Termin und Nachricht: links Text und HighLevel, rechts die Fakten; schmal untereinander */
.kontakt-raster { display: grid; gap: 2.5rem; }
.kontakt-raster .kalender { margin-top: 2rem; max-width: none; }
.kontakt-raster__innen { padding: clamp(1.5rem, 1rem + 1.5vw, 2rem); border-radius: var(--r-karte); background: var(--c-karte); }
.kontakt-raster .lead { margin-top: 1.25rem; }
.kontakt-raster .zahlen__reihe { margin-top: 0; grid-template-columns: none; gap: 1.25rem; }
.kontakt-raster .zahl { padding: 1.25rem 0 0; border-left: 0; border-top: 1px solid var(--c-linie); }
.kontakt-raster .zahl:first-child { padding-top: 0; border-top: 0; }
.kontakt-raster .zahl__gross { font-size: clamp(2.25rem, 1.75rem + 1.5vw, 3rem); }
.kontakt-raster .bewertung { margin-top: 1.5rem; padding: 1.5rem 0 0; border-top: 1px solid var(--c-linie); border-left: 0; }
@media (min-width: 1024px) {
	.kontakt-raster { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: clamp(3rem, 5vw, 5rem); align-items: start; }
	#nachricht .kontakt-raster > .kalender { margin-top: 0; }
}
.kopfzeile + .kalender { margin-top: 3.5rem; }

/* Terminseite (24.10.): breit links Nutzen und Belege, rechts der Kalender über beide Zeilen; schmal steht der Kalender direkt nach dem Satz */
.buchung { padding-bottom: clamp(3rem, 2rem + 4vw, 5rem); }
.buchung__raster { display: grid; gap: 2.5rem; grid-template-areas: "text" "kalender" "belege"; }
.buchung__text { grid-area: text; }
.buchung__text .einstieg__satz { max-width: 30rem; }
.buchung__kalender { grid-area: kalender; scroll-margin-top: 1.5rem; }
.buchung__belege { grid-area: belege; display: grid; gap: 2rem; align-content: start; max-width: 30rem; }
.buchung__person { display: flex; align-items: center; gap: 1rem; }
.buchung__person img { flex: none; width: 4rem; height: 4rem; border-radius: 50%; box-shadow: 0 0 0 2px rgba(184, 195, 214, .35); }
.buchung__person p { font-size: .9375rem; line-height: 1.45; color: var(--c-hell2); }
.buchung__person strong, .buchung__stimme figcaption strong { display: block; font-size: 1.0625rem; font-weight: 600; color: #FFFFFF; }
.buchung__stimme { padding-top: 2rem; border-top: 1px solid rgba(184, 195, 214, .25); }
.buchung__bewertung { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .75rem; margin-bottom: 1rem; font-size: .9375rem; color: var(--c-hell2); }
.buchung__bewertung strong { font-size: 1.25rem; font-weight: 600; color: #FFFFFF; }
.buchung .sterne span { background: #FFFFFF; }
.buchung__stimme blockquote p { font-size: 1.0625rem; line-height: 1.5; font-weight: 500; text-wrap: pretty; }
.buchung__stimme figcaption { margin-top: .75rem; font-size: .875rem; line-height: 1.5; color: var(--c-hell2); }
/* Selbst gefragt gegen den Check: zwei Karten nebeneinander, die Check-Karte mit nachtblauem Rand */
.vergleich { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); display: grid; gap: 1.5rem; }
.vergleich__spalte { padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-radius: var(--r-schale); background: var(--c-karte); box-shadow: inset 0 0 0 1px var(--c-linie); }
.vergleich__spalte--check { box-shadow: inset 0 0 0 2px var(--c-dunkel), var(--schatten); }
.vergleich__titel { padding-bottom: 1rem; border-bottom: 1px solid var(--c-linie); font-size: .9375rem; font-weight: 600; color: var(--c-text2); }
.vergleich__spalte--check .vergleich__titel { color: var(--c-dunkel); }
.vergleich .geschichte { margin-top: 1.75rem; }
@media (min-width: 768px) {
	.vergleich { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* in der halben Karte bleiben die drei Stellen untereinander wie schmal */
	.vergleich .geschichte { grid-template-columns: none; gap: 2rem; }
	.vergleich .geschichte li { padding: 0 0 0 4.25rem; }
	.vergleich .geschichte li::after { display: none; }
}
@media (min-width: 1024px) {
	.buchung__raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; grid-template-areas: "text kalender" "belege kalender"; column-gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
}

/* Fließtext aus dem Editor (page.php, index.php): Rechtstexte und Elementor-Altseiten ruhig in der linken Spalte des Rasters */
.inhalt { max-width: 36rem; }
.inhalt iframe, .inhalt embed, .inhalt object { max-width: 100%; }
.inhalt > * + * { margin-top: 1.25rem; }
.inhalt h2 { margin-top: 3rem; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
.inhalt h3 { margin-top: 2.25rem; }
.inhalt h4, .inhalt h5, .inhalt h6 { margin: 2rem 0 0; font-size: 1.0625rem; font-weight: 600; }
.inhalt > :first-child { margin-top: 0; }
.inhalt p, .inhalt li { text-wrap: pretty; }
.inhalt ul, .inhalt ol { padding-left: 1.25rem; }
.inhalt ul { list-style: disc; }
.inhalt ol { list-style: decimal; }
.inhalt li + li { margin-top: .5rem; }
.inhalt a { text-decoration-thickness: 1px; text-underline-offset: .2em; }
.inhalt img { border-radius: var(--r-klein); }
.inhalt table { width: 100%; border-collapse: collapse; }
.inhalt th, .inhalt td { padding: .5rem .75rem .5rem 0; border-bottom: 1px solid var(--c-linie); text-align: left; vertical-align: top; }

/* Abschluss und Fuß auf Nachtblau */
.abschluss {
	padding-block: var(--abstand);
	background: radial-gradient(50% 80% at 12% 0%, rgba(184, 195, 214, .12), rgba(184, 195, 214, 0) 70%), var(--c-dunkel);
	color: #FFFFFF;
}
/* Breit links Frage, Satz und Telefon, rechts der Kalender des Beratungsgesprächs wie auf der Terminseite; schmal untereinander */
.abschluss__raster { display: grid; gap: 2.5rem; }
.abschluss h2 { max-width: 21ch; font-size: clamp(2rem, 1.25rem + 3.2vw, 4rem); }
.abschluss .lead { margin-top: 1.25rem; max-width: 30rem; color: var(--c-hell2); }
.abschluss__alternativ { margin-top: 1.5rem; font-size: .9375rem; color: var(--c-hell2); }
.abschluss__alternativ a { font-weight: 500; color: #FFFFFF; white-space: nowrap; }
@media (min-width: 1024px) {
	.abschluss__raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
	.abschluss h2 { font-size: clamp(2rem, 1rem + 2vw, 3rem); } /* "Beratungsgespräch" passt so in die schmale Spalte */
}

.fuss { background: var(--c-dunkel); color: var(--c-hell2); font-size: .9375rem; }
.fuss__raster { display: grid; gap: 2.5rem; padding-block: 3.5rem 2.5rem; border-top: 1px solid rgba(184, 195, 214, .2); }
.fuss .logo { height: 1.75rem; color: #FFFFFF; }
.fuss__marke p { margin-top: 1.25rem; max-width: 22rem; }
.fuss__titel { font-weight: 600; color: #FFFFFF; }
.fuss__titel--abstand { margin-top: 1.5rem; }
.fuss ul { margin-top: .5rem; }
.fuss li a, .fuss li span, .fuss li button, .kontakt-liste a, .kontakt-liste span { display: inline-flex; align-items: center; min-height: 2.75rem; }
.fuss a, .fuss li button { color: #FFFFFF; text-decoration: underline; text-decoration-color: rgba(184, 195, 214, .5); text-underline-offset: .25em; }
.fuss .borlabs-cookie-open-dialog-preferences { padding: 0; border: 0; background-color: transparent; font: inherit; cursor: pointer; }
.fuss a:hover, .fuss li button:hover { text-decoration-color: currentColor; }
.fuss__unten { padding-block: 1.5rem 2rem; border-top: 1px solid rgba(184, 195, 214, .2); font-size: .875rem; }
@media (min-width: 768px) { .fuss__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .fuss__raster { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); } }

/* Bewegung nur mit Grund: Einstieg und Karte treten auf, Balken wachsen, Abschnitte blenden beim Scrollen ein */
@media (prefers-reduced-motion: no-preference) {
	.einstieg__text > *, .seitenkopf__text > * { animation: auftritt 1s var(--ease) both; }
	.einstieg__text > :nth-child(2), .seitenkopf__text > :nth-child(2) { animation-delay: .08s; }
	.einstieg__text > :nth-child(3), .seitenkopf__text > :nth-child(3) { animation-delay: .16s; }
	.schale--buehne, .seitenkopf__raster > :nth-child(2) { animation: auftritt 1.2s var(--ease) .2s both; }
	.balken__balken { transform-origin: left center; animation: wachsen 1.1s var(--ease) both; animation-delay: calc(.8s + var(--i, 0) * .09s); }
	.js [data-zeige] { opacity: 0; transform: translateY(1.75rem); transition: opacity .9s var(--ease) var(--verz, 0s), transform 1.1s var(--ease) var(--verz, 0s); }
	.js [data-zeige].ist-da { opacity: 1; transform: none; }
}
@keyframes auftritt { from { opacity: 0; transform: translateY(1.5rem); } }
@keyframes wachsen { from { transform: scaleX(0); } }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
	.knopf:hover, .knopf:active, .knopf:hover .knopf__pfeil { transform: none; }
	.textlink:hover::after { transform: rotate(45deg); }
}