/* =====================================================================
   Holger Neubauer – Tai Chi Chuan & Qigong
   Stylesheet im Tai-Chi-Stil  (pixCMS)
   Senior Web Programmer: Daniel Beck / Pixlwerk

   Gestaltungsidee: Tusche auf Reispapier. Viel Leere (Wu), ruhige
   Serifen-Überschriften, Enso-Kreise, Haarlinien statt Schlagschatten,
   keine sprunghaften Bewegungen. Akzent: Jade & ein sparsames Siegel-Rot.

   Die alten Klassen-Hooks (bento-card, icon-box, btn-ci, badge-ci,
   termin-card …) bleiben erhalten – nur ihr Look wurde neu gedacht.
   Farben lassen sich später über die CMS-Einstellungen überschreiben.
   ===================================================================== */

/* ----------------------------------------------------------------------
   1. Design-Tokens
   ---------------------------------------------------------------------- */
:root {
	/* Tusche / Papier */
	--ink:        #232821;   /* Tusche – Text & Überschriften   */
	--ink-soft:   #51584d;   /* gedämpfter Fließtext            */
	--ink-faint:  #8b9082;   /* feine Sekundärtexte             */
	--paper:      #f4f1e9;   /* Reispapier – Seitengrund        */
	--paper-2:    #ece7d9;   /* zweite, tiefere Papierfläche     */
	--paper-card: #faf8f2;   /* heller Papierbogen (Karten)     */

	/* Akzente */
	--jade:       #3c7a5e;
	--jade-deep:  #27543f;
	--jade-mist:  #e4ece5;   /* zarter Jade-Schleier            */
	--seal:       #b4462e;   /* Siegel-Rot, sehr sparsam        */

	--line:        rgba(35, 40, 33, 0.14);
	--line-strong: rgba(35, 40, 33, 0.30);

	/* Kompatibilität mit Bestandsklassen (keine knalligen Verläufe mehr) */
	--primary-ci:       var(--jade);
	--primary-dark:     var(--jade-deep);
	--primary-light:    var(--jade-mist);
	--primary-gradient: var(--jade);
	--accent-warm:      var(--seal);
	--body-color:       var(--ink-soft);
	--heading-color:    var(--ink);
	--bg-soft:          var(--paper-2);
	--card-radius:      14px;
	--shadow-soft:      none;
	--shadow-hover:     none;

	--font-base:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--font-display: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, 'Times New Roman', serif;

	/* Höhe der fixierten Navigation im Ruhezustand – Hero und Seiten-Hero
	   rechnen damit, statt eine Zahl zu raten. */
	--nav-h: 80px;
}

/* ----------------------------------------------------------------------
   2. Grundlayout
   ---------------------------------------------------------------------- */
* { scroll-behavior: smooth; }

body {
	font-family: var(--font-base);
	color: var(--body-color);
	background-color: var(--paper);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
	line-height: 1.75;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	color: var(--heading-color);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.22;
}

p { line-height: 1.8; }

a {
	color: var(--jade-deep);
	transition: color .25s ease, border-color .25s ease, opacity .25s ease;
}
a:hover { color: var(--seal); }

main { min-height: 60vh; }

::selection { background: var(--jade-mist); color: var(--ink); }

/* Utilities ---------------------------------------------------------- */
.text-primary-ci { color: var(--jade) !important; }
.bg-primary-ci   { background-color: var(--jade) !important; }
.bg-soft         { background-color: var(--paper-2) !important; }
.text-warm       { color: var(--seal) !important; }
.section-soft    { background-color: var(--paper-2); }
.text-dark       { color: var(--ink) !important; }

/* Skip-Link ---------------------------------------------------------- */
.skip-link {
	position: absolute;
	left: -999px; top: 0; z-index: 2000;
	background: var(--ink);
	color: var(--paper);
	padding: .75rem 1.25rem;
	text-decoration: none;
	font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ----------------------------------------------------------------------
   3. Wiederkehrende Stilfiguren: Augenbraue, Enso, Pinselstrich
   ---------------------------------------------------------------------- */
/* Augenbraue / Label (ersetzt die alte gefüllte Badge) */
.section-eyebrow,
.badge-ci {
	display: inline-flex;
	align-items: center;
	gap: .65rem;
	font-family: var(--font-base);
	text-transform: uppercase;
	letter-spacing: .2em;
	font-size: .72rem;
	font-weight: 600;
	color: var(--jade-deep);
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	margin-bottom: .9rem;
}
.section-eyebrow::before,
.badge-ci::before {
	content: "";
	width: 26px; height: 1px;
	background: var(--jade);
	display: inline-block;
}

/* Pinselstrich-Trenner zwischen Abschnitten */
.brush-divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin: 1rem auto 0;
	color: var(--jade);
}
.brush-divider::before,
.brush-divider::after {
	content: "";
	height: 1px;
	width: clamp(40px, 12vw, 130px);
	background: linear-gradient(90deg, transparent, var(--line-strong));
}
.brush-divider::after { background: linear-gradient(90deg, var(--line-strong), transparent); }
.brush-divider i { font-size: .9rem; opacity: .8; }

/* Enso – handgezogener Tuschekreis als ruhiger Blickfang */
.enso-wrap { position: relative; max-width: 420px; margin-inline: auto; }
.enso-caption {
	text-align: center;
	margin-top: 1.25rem;
	font-size: .85rem;
	letter-spacing: .04em;
	color: var(--ink-soft);
}
.enso-caption strong { color: var(--ink); font-weight: 600; }

/* ----------------------------------------------------------------------
   4. Navigation
   ---------------------------------------------------------------------- */
.navbar {
	--nav-pad: 1rem;
	padding: var(--nav-pad) 0;
	background-color: rgba(244, 241, 233, 0.78);
	backdrop-filter: saturate(160%) blur(12px);
	-webkit-backdrop-filter: saturate(160%) blur(12px);
	border-bottom: 1px solid transparent;
	transition: padding .35s ease, background-color .35s ease, border-color .35s ease;
}
.navbar-scrolled {
	--nav-pad: .55rem;
	background-color: rgba(244, 241, 233, 0.96);
	border-bottom-color: var(--line);
}

/* Marke: kleiner Enso + Serifen-Namenszug, Slogan als gesperrte Kapitälchen */
.navbar-brand {
	display: flex;
	align-items: center;
	gap: .8rem;
	padding: 0;
	margin-right: 2rem;
	color: var(--ink);
	text-decoration: none;
}
.brand-enso {
	flex: 0 0 auto;
	color: var(--jade-deep);
	--taiji-b: var(--paper);
	transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.navbar-brand:hover .brand-enso { transform: rotate(-14deg); }
/* Wortmarke aus dem CMS: Höhe führt, Breite folgt. multiply lässt den weißen
   Bildgrund auf dem Papierton verschwinden – nur die Tusche bleibt. */
.brand-logo {
	display: block;
	height: 46px; width: auto;
	mix-blend-mode: multiply;
	transition: height .35s ease;
}
.navbar-scrolled .brand-logo { height: 38px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name {
	font-family: var(--font-display);
	font-size: 1.18rem;
	font-weight: 600;
	color: var(--ink);
	letter-spacing: .005em;
}
.brand-slogan {
	margin-top: .3rem;
	font-size: .64rem;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--ink-faint);
}

/* Punkte: ruhig, der aktive bekommt einen Jade-Strich, der unter dem Wort einzieht */
.navbar .nav-link {
	position: relative;
	color: var(--ink-soft);
	font-weight: 500;
	font-size: .92rem;
	letter-spacing: .02em;
	padding: .55rem .95rem !important;
	border-radius: 0;
	transition: color .25s ease;
}
.navbar .nav-link::after {
	content: "";
	position: absolute;
	left: .95rem; right: .95rem; bottom: .22rem;
	height: 1px;
	background: var(--jade);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .38s cubic-bezier(.2, .7, .2, 1);
}
.navbar .nav-link:hover,
.navbar .nav-link:focus-visible { color: var(--jade-deep); }
.navbar .nav-link:hover::after,
.navbar .nav-link:focus-visible::after,
.navbar .nav-link.active::after { transform: scaleX(1); }
.navbar .nav-link.active { color: var(--ink); background: transparent; }
.nav-num { display: none; }                       /* nur im Vollbild-Menü sichtbar */
.nav-cta { margin-left: 1.25rem; }
.btn-nav { padding: .62rem 1.3rem; font-size: .8rem; }
.menu-foot { display: none; }

/* Umschalter: drei Tuschestriche, die sich zum Kreuz drehen */
.navbar-toggler {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: .65rem;
	border: 0;
	padding: .45rem .25rem;
	color: var(--ink);
}
.navbar-toggler:focus { box-shadow: none; }
.navbar-toggler:focus-visible { outline: 2px solid var(--jade); outline-offset: 4px; }
.toggler-bars { position: relative; display: block; width: 26px; height: 16px; }
.toggler-bars i {
	position: absolute; left: 0;
	width: 100%; height: 1.5px;
	background: currentColor;
	transition: transform .38s cubic-bezier(.2, .7, .2, 1), opacity .25s ease, top .38s cubic-bezier(.2, .7, .2, 1), width .3s ease;
}
.toggler-bars i:nth-child(1) { top: 0; }
.toggler-bars i:nth-child(2) { top: 7px; }
.toggler-bars i:nth-child(3) { top: 14px; width: 68%; }
.navbar-toggler[aria-expanded="true"] .toggler-bars i:nth-child(1) { top: 7px; transform: rotate(45deg); }
.navbar-toggler[aria-expanded="true"] .toggler-bars i:nth-child(2) { opacity: 0; }
.navbar-toggler[aria-expanded="true"] .toggler-bars i:nth-child(3) { top: 7px; width: 100%; transform: rotate(-45deg); }
.toggler-label { font-size: .68rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }

/* ----------------------------------------------------------------------
   5. Buttons – flach, ruhig, editoriell
   ---------------------------------------------------------------------- */
.btn-pill {
	border-radius: 2px;
	padding: .72rem 1.7rem;
	font-weight: 600;
	font-size: .86rem;
	letter-spacing: .06em;
	font-family: var(--font-base);
	transition: background-color .28s ease, color .28s ease, border-color .28s ease;
}
.btn-pill:hover { transform: none; }
.btn-pill.btn-sm { padding: .5rem 1.15rem; font-size: .8rem; }

.btn-ci {
	background: var(--jade);
	border: 1px solid var(--jade);
	color: #fbfdfb;
	box-shadow: none;
}
.btn-ci:hover, .btn-ci:focus {
	background: var(--jade-deep);
	border-color: var(--jade-deep);
	color: #fff;
	box-shadow: none;
}

.btn-outline-ci {
	border: 1px solid var(--ink);
	color: var(--ink);
	background: transparent;
}
.btn-outline-ci:hover, .btn-outline-ci:focus {
	background: var(--ink);
	color: var(--paper);
}

/* ----------------------------------------------------------------------
   6. Hero-Bereiche
   ---------------------------------------------------------------------- */
.hero-section {
	/* Bild zentral hinterlegt – Dateinamen hier bei Bedarf anpassen */
	--hero-image: url('/p_assets/hero/hero1.webp');   /* hero.jpg gab es nie – jeder Seitenaufruf holte sich ein 404 */
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	min-height: 88vh;
	padding: 9rem 0 5rem;                  /* oben Platz für die fixierte Navbar */
	background-color: var(--jade-deep);    /* Fallback, falls noch kein Bild hinterlegt ist */
	color: #fff;
}
/* Vollflächiges Hintergrundbild: links dunkel für die Lesbarkeit, sanft nach
   unten geerdet – das Foto bleibt überall als ruhige Stimmung sichtbar. */
.hero-section::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		linear-gradient(95deg,
			rgba(20, 24, 19, 0.92) 0%,
			rgba(24, 29, 22, 0.72) 46%,
			rgba(26, 32, 24, 0.42) 100%),
		linear-gradient(0deg,
			rgba(20, 24, 19, 0.55) 0%,
			rgba(20, 24, 19, 0) 42%),
		var(--hero-image) center / cover no-repeat;
}
.hero-section > .container { position: relative; z-index: 1; width: 100%; }

.hero-title {
	font-family: var(--font-display);
	font-size: clamp(2.4rem, 5.2vw, 3.7rem);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.005em;
}
.lead { font-weight: 400; }

/* Helle Schrift auf dem Bild-Hero – überschreibt die dunklen Standardfarben */
.hero-section .hero-title { color: #fff; text-shadow: 0 1px 24px rgba(0, 0, 0, 0.22); }
.hero-section .lead,
.hero-section .text-muted { color: rgba(244, 241, 233, 0.90) !important; }
.hero-section .enso-caption,
.hero-section .enso-caption strong { color: rgba(244, 241, 233, 0.92); }
.hero-section .text-primary-ci { color: #9fd3b8 !important; }   /* Akzentwort & Häkchen */
.hero-section .badge-ci { color: #fff; }
.hero-section .badge-ci::before { background: rgba(255, 255, 255, 0.7); }
.hero-section .btn-outline-ci {
	border-color: rgba(255, 255, 255, 0.75);
	color: #fff;
}
.hero-section .btn-outline-ci:hover,
.hero-section .btn-outline-ci:focus {
	background: var(--paper);
	border-color: var(--paper);
	color: var(--ink);
}

/* Weicher, mittiger Tusche-Halo hinter dem Tai-Chi-Logo: hebt es klar vom Foto
   ab, läuft durch die Unschärfe aber sanft aus – keine harte Kante. */
.hero-section .enso-figure { position: relative; }
.hero-section .enso-figure::before {
	content: "";
	position: absolute;
	inset: 10%;
	z-index: -1;
	border-radius: 50%;
	background: radial-gradient(circle,
		rgba(16, 20, 15, 0.60) 0%,
		rgba(16, 20, 15, 0.30) 50%,
		transparent 72%);
	filter: blur(12px);
}

/* ----------------------------------------------------------------------
   6b. Startseiten-Hero (.hero-home) – setzt auf .hero-section auf
   ---------------------------------------------------------------------- */
/* Ein festes Motiv als <img> (bessere Ladepriorität als ein CSS-Hintergrund),
   darüber ein Tusche-Verlauf, der links Lesbarkeit schafft und das Foto
   rechts als ruhige Stimmung stehen lässt. Nach unten endet der Hero mit
   klarer Kante am Reispapier – ein heller Verlauf lag wie Rauch über dem
   dunklen Foto und wirkte wie ein Fehler. */
.hero-home {
	min-height: clamp(560px, 92vh, 920px);
	padding: calc(var(--nav-h) + 3.5rem) 0 5rem;
	background-color: #151a15;
	color: var(--paper);
	isolation: isolate;
}
.hero-home::before { content: none; }              /* generisches Hintergrundbild der .hero-section aus */
.hero-home > .container { z-index: 2; }

.hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-media img {
	position: absolute; inset: 0;
	display: block;
	width: 100%; height: 100%;
	object-fit: cover; object-position: center;
	transform: scale(1.06);
	opacity: 0;
	transition: opacity 1.6s ease;
}
/* Das aktive Bild atmet kaum merklich – kein Effekt-Feuerwerk. Bei der
   Überblendung startet der Drift mit jedem Bild neu. */
.hero-media img.is-active { opacity: 1; animation: heroDrift 28s ease-out forwards; }
@keyframes heroDrift { to { transform: scale(1) translateY(-1.5%); } }
@media (prefers-reduced-motion: reduce) {
	.hero-media img { transition: none; transform: none; }
	.hero-media img.is-active { animation: none; }
}
.hero-media::after {
	content: "";
	position: absolute; inset: 0;
	background:
		linear-gradient(100deg, rgba(14, 18, 14, 0.94) 0%, rgba(16, 21, 16, 0.80) 38%, rgba(18, 24, 18, 0.46) 70%, rgba(18, 24, 18, 0.30) 100%),
		linear-gradient(0deg, rgba(14, 18, 14, 0.72) 0%, rgba(14, 18, 14, 0) 45%);
}
.hero-home .hero-eyebrow {
	display: inline-flex; align-items: center; gap: .75rem;
	font-size: .7rem; font-weight: 600;
	letter-spacing: .24em; text-transform: uppercase;
	color: #cfe6d8;
}
.hero-home .hero-eyebrow::before { content: ""; width: 28px; height: 1px; background: #9fd3b8; }
.hero-home .hero-title {
	font-size: clamp(2.5rem, 5.6vw, 4.2rem);
	line-height: 1.08;
	letter-spacing: -.01em;
	color: #fbfaf6;
	text-shadow: 0 2px 30px rgba(0, 0, 0, 0.28);
	max-width: 13ch;
}
.hero-home .hero-title em { font-style: italic; font-weight: 500; color: #9fd3b8; }
.hero-home .hero-lead {
	font-size: clamp(1.02rem, 1.4vw, 1.18rem);
	line-height: 1.75;
	color: rgba(244, 241, 233, 0.86);
	max-width: 52ch;
}

/* Knöpfe auf dem dunklen Grund: Papier als Primärfarbe, Haarlinie als Zweitwahl */
.hero-home .btn-ci { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.hero-home .btn-ci:hover, .hero-home .btn-ci:focus { background: #fff; border-color: #fff; color: var(--jade-deep); }
.hero-home .btn-outline-ci { border-color: rgba(244, 241, 233, 0.55); color: #fbfaf6; }
.hero-home .btn-outline-ci:hover, .hero-home .btn-outline-ci:focus { background: rgba(244, 241, 233, 0.12); border-color: #fbfaf6; color: #fff; }

/* Vertrauenszeile: gesperrte Kapitälchen mit Jade-Punkt statt Häkchen-Icons */
.hero-trust {
	display: flex; flex-wrap: wrap; gap: .6rem 1.6rem;
	list-style: none; padding: 0; margin: 0;
	font-size: .76rem; font-weight: 600;
	letter-spacing: .08em; text-transform: uppercase;
	color: rgba(244, 241, 233, 0.72);
}
.hero-trust li { display: flex; align-items: center; gap: .6rem; }
.hero-trust li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #9fd3b8; flex: 0 0 auto; }

/* Siegel-Zeile: BVTQ-Siegel + Vereinslogo als runde Medaillons auf Papier-Ring,
   daneben zwei Zeilen Text; die Erfahrungs-Zeile hängt als Kapitälchen dahinter */
.hero-siegel {
	display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem;
	list-style: none; padding: 0; margin: 0;
}
.hero-siegel li { display: flex; align-items: center; gap: .85rem; }
.hero-siegel-bild {
	flex: 0 0 auto;
	width: 68px; height: 68px; border-radius: 50%;
	padding: 3px; background: var(--paper);
	box-shadow: 0 0 0 1px rgba(244, 241, 233, 0.35), 0 10px 24px rgba(0, 0, 0, 0.28);
	overflow: hidden;
}
.hero-siegel-bild img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; background: #fff; }
.hero-siegel-text { display: flex; flex-direction: column; gap: .1rem; line-height: 1.3; }
.hero-siegel-text b { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: #fbfaf6; letter-spacing: .01em; }
.hero-siegel-text > span { font-size: .78rem; color: rgba(244, 241, 233, 0.72); }
.hero-siegel-hinweis {
	flex-basis: 100%;
	font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
	color: rgba(244, 241, 233, 0.62);
}
.hero-siegel-hinweis::before { content: ""; width: 28px; height: 1px; background: #9fd3b8; flex: 0 0 auto; }
@media (max-width: 575.98px) {
	.hero-siegel { gap: .9rem 1.25rem; }
	.hero-siegel-bild { width: 56px; height: 56px; }
	.hero-siegel-text b { font-size: .92rem; }
	.hero-siegel-text > span { font-size: .74rem; }
}

/* Karte „Nächster Kurs" – ein Papierbogen, der auf dem Foto liegt */
.hero-card {
	position: relative;
	max-width: 430px;
	margin-left: auto;
	background: var(--paper-card);
	color: var(--ink);
	border: 1px solid rgba(35, 40, 33, 0.12);
	border-radius: var(--card-radius);
	padding: 1.9rem 2rem 1.75rem;
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.hero-card::before {
	content: "";
	position: absolute; left: -1px; top: 1.6rem; bottom: 1.6rem;
	width: 2px; background: var(--jade);
}
.hero-card-label {
	display: flex; justify-content: space-between; align-items: center;
	margin-bottom: 1.1rem;
	font-size: .68rem; font-weight: 600;
	letter-spacing: .2em; text-transform: uppercase;
	color: var(--jade-deep);
}
.taiji { display: block; }
.hero-card-enso { width: 34px; height: 34px; color: var(--jade); opacity: .9; --taiji-b: var(--paper-card); }
.hero-card-date { display: flex; align-items: baseline; gap: .8rem; font-family: var(--font-display); }
.hero-card-date .day { font-size: 3.2rem; font-weight: 600; line-height: 1; color: var(--ink); }
.hero-card-date .rest { display: flex; flex-direction: column; line-height: 1.15; }
.hero-card-date .rest b { font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.hero-card-date .rest span {
	margin-top: .25rem;
	font-family: var(--font-base);
	font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
	color: var(--ink-faint);
}
.hero-card h2 { font-size: 1.28rem; line-height: 1.3; margin: 1.05rem 0 .55rem; }
.hero-card-meta { list-style: none; padding: 0; margin: 0 0 1.2rem; font-size: .9rem; color: var(--ink-soft); }
.hero-card-meta li { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: .3rem; }
.hero-card-meta i { color: var(--jade); width: 15px; text-align: center; margin-top: .3rem; }
.hero-card-foot {
	display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap;
	border-top: 1px solid var(--line);
	padding-top: 1.1rem;
}
/* In der Karte gelten wieder die Papier-Knöpfe, nicht die Hero-Varianten */
.hero-card .btn-ci { background: var(--jade); border-color: var(--jade); color: #fbfdfb; }
.hero-card .btn-ci:hover, .hero-card .btn-ci:focus { background: var(--jade-deep); border-color: var(--jade-deep); color: #fff; }
.hero-card .btn-outline-ci { border-color: var(--ink); color: var(--ink); }
.hero-card .btn-outline-ci:hover, .hero-card .btn-outline-ci:focus { background: var(--ink); color: var(--paper); }

/* Leiser Hinweis nach unten: ein Faden aus Tusche */
.hero-scroll {
	position: absolute; left: 50%; bottom: 1.5rem;
	transform: translateX(-50%);
	z-index: 3;
	display: flex; flex-direction: column; align-items: center; gap: .55rem;
	font-size: .64rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
	color: rgba(244, 241, 233, 0.7);
	text-decoration: none;
}
.hero-scroll::after {
	content: "";
	width: 1px; height: 38px;
	background: linear-gradient(180deg, rgba(244, 241, 233, 0.75), transparent);
	transform-origin: top center;
	animation: heroCue 2.6s ease-in-out infinite;
}
@keyframes heroCue { 0%, 100% { transform: scaleY(1); opacity: .85; } 50% { transform: scaleY(.55); opacity: .4; } }
.hero-scroll:hover { color: #fff; }

/* Schlanker Seiten-Hero für Unterseiten */
.page-hero {
	position: relative;
	overflow: hidden;
	margin-top: var(--nav-h);
	padding: 5rem 0 3rem;
	background-color: var(--paper);
	border-bottom: 1px solid var(--line);
}
.page-hero .hero-title { font-size: clamp(2.1rem, 4.6vw, 3.1rem); }
.page-hero .hero-title .hero-em { font-style: italic; font-weight: 500; color: var(--jade-deep); }

/* dezenter Enso-Schatten als Wasserzeichen */
.bg-blob {
	position: absolute;
	top: -90px; right: -70px;
	width: 320px; height: 320px;
	background: var(--jade);
	opacity: .09;
	z-index: 0;
	transform: rotate(-12deg);
	/* dasselbe Taijitu wie in _modules/p_taiji.php, hier als Maske */
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 3 A47 47 0 0 1 50 97 A23.5 23.5 0 0 1 50 50 A23.5 23.5 0 0 0 50 3 Z'/><circle cx='50' cy='26.5' r='6.5'/><circle cx='50' cy='50' r='47' fill='none' stroke='black' stroke-width='2.5'/></svg>") center / contain no-repeat;
	        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 3 A47 47 0 0 1 50 97 A23.5 23.5 0 0 1 50 50 A23.5 23.5 0 0 0 50 3 Z'/><circle cx='50' cy='26.5' r='6.5'/><circle cx='50' cy='50' r='47' fill='none' stroke='black' stroke-width='2.5'/></svg>") center / contain no-repeat;
}

/* ----------------------------------------------------------------------
   7. Flächen / „Karten" – Papierbögen mit Haarlinie statt Bento-Schatten
   ---------------------------------------------------------------------- */
.bento-card {
	background: var(--paper-card);
	border: 1px solid var(--line);
	border-radius: var(--card-radius);
	padding: 2.1rem;
	box-shadow: none;
	transition: border-color .3s ease, background-color .3s ease;
}
.bento-card:hover {
	transform: none;
	box-shadow: none;
	border-color: var(--jade);
	background: #fff;
}
.bento-card h3, .bento-card h4 { font-family: var(--font-display); }

/* Icon im Enso-Ring (kein gefülltes App-Icon mehr) */
.icon-box {
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	margin-bottom: 1.35rem;
	font-size: 1.3rem;
	color: var(--jade-deep);
	background: transparent;
	border: 1.5px solid var(--jade);
	flex-shrink: 0;
}
.icon-box.icon-soft {
	background: var(--jade-mist);
	border-color: transparent;
	color: var(--jade-deep);
}

/* ----------------------------------------------------------------------
   8. Terminübersicht / Kursplan – wie ein gedrucktes Programm
   ---------------------------------------------------------------------- */
.termine-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem 1rem;
	justify-content: center;
	margin-bottom: 1rem;
}
.termine-toolbar + .termine-toolbar { margin-bottom: 2.5rem; }

/* Filter als zurückhaltende Reiter mit Tusche-Unterstrich */
.filter-pill {
	border: 0;
	border-bottom: 2px solid transparent;
	background: transparent;
	color: var(--ink-soft);
	padding: .4rem .15rem;
	border-radius: 0;
	font-weight: 600;
	font-size: .86rem;
	letter-spacing: .04em;
	cursor: pointer;
	transition: color .25s ease, border-color .25s ease;
}
.filter-pill:hover { color: var(--jade-deep); border-color: var(--line-strong); }
.filter-pill.active {
	background: transparent;
	color: var(--ink);
	border-bottom-color: var(--jade);
	box-shadow: none;
}

/* Ein Termin als Papierbogen */
.termin-card {
	display: flex;
	gap: 1.4rem;
	background: var(--paper-card);
	border: 1px solid var(--line);
	border-left: 2px solid var(--jade);
	border-radius: var(--card-radius);
	padding: 1.5rem 1.6rem;
	box-shadow: none;
	height: 100%;
	transition: border-color .3s ease, background-color .3s ease;
}
.termin-card:hover {
	transform: none;
	box-shadow: none;
	border-color: var(--line-strong);
	border-left-color: var(--jade-deep);
	background: #fff;
}
.termin-card.is-qigong { border-left-color: var(--jade); }
.termin-card.is-taichi { border-left-color: var(--ink); }

/* Datum als offene Serifen-Zahl mit Haarlinie */
.termin-date {
	flex-shrink: 0;
	min-width: 58px;
	text-align: center;
	background: transparent;
	border-right: 1px solid var(--line);
	padding: .1rem 1.2rem .1rem 0;
	align-self: flex-start;
}
.termin-date .day {
	display: block;
	font-family: var(--font-display);
	font-size: 2.1rem;
	font-weight: 600;
	line-height: 1;
	color: var(--ink);
}
.termin-date .mon {
	display: block;
	font-size: .7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--jade-deep);
	margin-top: .35rem;
}
.termin-date .dow {
	display: block;
	font-size: .66rem;
	color: var(--ink-faint);
	margin-top: .1rem;
}

.termin-body { min-width: 0; flex: 1; }
.termin-body h3 { font-family: var(--font-display); font-size: 1.2rem; margin-bottom: .3rem; }
.termin-cat {
	display: inline-block;
	font-size: .68rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .16em;
	color: var(--jade-deep);
	background: transparent;
	padding: 0;
	border-radius: 0;
	margin-bottom: .45rem;
}
.termin-meta {
	list-style: none;
	padding: 0;
	margin: .55rem 0 0;
	font-size: .9rem;
	color: var(--ink-soft);
}
.termin-meta li { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: .3rem; }
.termin-meta li i { color: var(--jade); width: 15px; text-align: center; margin-top: .3rem; }

.termin-plaetze {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .02em;
	background: transparent;
	border-radius: 0;
	padding: 0;
}
.termin-plaetze.frei       { color: var(--jade-deep); }
.termin-plaetze.wenige     { color: var(--seal); }
.termin-plaetze.ausgebucht { color: var(--ink-faint); }

/* Merkmal-Badges („VHS-Kurs" …) – Siegel in Tusche, Farbe optional über --badge */
.termin-badges { display: inline-flex; flex-wrap: wrap; gap: .35rem; vertical-align: middle; }
.termin-badge {
	display: inline-flex; align-items: center; gap: .35rem;
	font-family: var(--font-base);
	font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	color: #fbfaf6; background: var(--badge, var(--ink));
	padding: .28rem .6rem; border-radius: 2px; line-height: 1;
	white-space: nowrap;
}
.termin-badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .75; }
.termin-cat + .termin-badges { margin-left: .6rem; }
.hero-card .termin-badges { margin: -.1rem 0 .8rem; }

/* Sprungleiste im Seiten-Hero: zwei Reiter mit Zähler */
.plan-jump { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin-top: 2.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.plan-jump a { display: inline-flex; align-items: center; gap: .55rem; color: var(--ink-soft); text-decoration: none; font-weight: 600; font-size: .86rem; letter-spacing: .03em; transition: color .25s ease; }
.plan-jump a i { color: var(--jade); font-size: .8rem; }
.plan-jump a span { font-size: .7rem; font-weight: 600; color: var(--jade-deep); background: var(--jade-mist); border-radius: 50px; padding: .15rem .5rem; }
.plan-jump a:hover { color: var(--jade-deep); }

/* Abschnitte Wochenplan / Besondere Termine */
.plan-section { margin-top: 2.5rem; }
.plan-section + .plan-section { margin-top: 4.5rem; }
.plan-section-head { max-width: 640px; margin-bottom: 1.75rem; }
.plan-section-head h2 { font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2rem); margin: .35rem 0 .5rem; }
.plan-section-head p { color: var(--ink-soft); margin: 0; }

/* Ein Wochentag: Kopf mit Serife und Haarlinie, darunter die Zeilen */
.plan-day + .plan-day { margin-top: 2rem; }
.plan-day-head {
	display: flex; align-items: baseline; gap: .8rem;
	font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; color: var(--ink);
	margin: 0 0 .75rem; padding-bottom: .55rem; border-bottom: 1px solid var(--line-strong);
}
.plan-day-head::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--jade); align-self: center; flex: 0 0 auto; }
.plan-day.is-today .plan-day-head::before { background: var(--jade); }
.plan-day-head em { font-family: var(--font-base); font-style: normal; font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--jade-deep); }

/* Die Zeile: Zeit/Datum | Inhalt | Plätze + Anmelden */
.plan-rows { display: flex; flex-direction: column; gap: .6rem; }
.plan-row {
	display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 1.25rem 1.5rem; align-items: center;
	background: var(--paper-card);
	border: 1px solid var(--line); border-left: 2px solid var(--jade);
	border-radius: var(--card-radius);
	padding: 1.15rem 1.4rem 1.15rem 1.25rem;
	transition: border-color .3s ease, background-color .3s ease;
}
.plan-row:hover { background: #fff; border-color: var(--line-strong); border-left-color: var(--jade-deep); }
.plan-row.is-taichi { border-left-color: var(--ink); }
.plan-row.is-taichi:hover { border-left-color: var(--ink); }
.plan-rows-datum .plan-row { grid-template-columns: 64px minmax(0, 1fr) auto; }

.plan-time { display: flex; flex-direction: column; line-height: 1.15; border-right: 1px solid var(--line); padding-right: 1rem; align-self: stretch; justify-content: center; }
.plan-time .von { font-family: var(--font-display); font-size: 1.55rem; font-weight: 600; color: var(--ink); }
.plan-time .bis { font-size: .74rem; color: var(--ink-faint); margin-top: .2rem; letter-spacing: .02em; white-space: nowrap; }
.plan-date { text-align: center; border-right: 1px solid var(--line); padding-right: 1rem; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.plan-date .day { font-family: var(--font-display); font-size: 1.9rem; font-weight: 600; line-height: 1; color: var(--ink); }
.plan-date .mon { font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--jade-deep); margin-top: .3rem; }
.plan-date .dow { font-size: .64rem; color: var(--ink-faint); margin-top: .05rem; }

.plan-body { min-width: 0; }
.plan-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; margin-bottom: .2rem; }
.plan-kicker .termin-cat { margin-bottom: 0; }
.plan-kicker .termin-badges { margin-left: 0; }
.plan-body h3 { font-family: var(--font-display); font-size: 1.18rem; margin: 0 0 .3rem; }
.plan-meta { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; font-size: .88rem; color: var(--ink-soft); }
.plan-meta li { display: flex; align-items: baseline; gap: .5rem; }
.plan-meta li i { color: var(--jade); font-size: .8rem; }
.plan-desc { font-size: .86rem; color: var(--ink-soft); margin: .5rem 0 0; max-width: 60ch; }

.plan-side { display: flex; flex-direction: column; align-items: flex-end; gap: .55rem; text-align: right; }
.plan-side .termin-plaetze { font-size: .76rem; }

/* Abschluss: Hinweiszeile mit Kontakt */
.plan-foot {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem;
	margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--line);
}
.plan-foot > div { display: flex; flex-direction: column; gap: .2rem; max-width: 56ch; }
.plan-foot b { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; color: var(--ink); }
.plan-foot span { color: var(--ink-soft); font-size: .92rem; }

@media (max-width: 767.98px) {
	.plan-row, .plan-rows-datum .plan-row { grid-template-columns: 72px minmax(0, 1fr); gap: .75rem 1rem; padding: 1rem 1.1rem 1rem 1rem; }
	.plan-rows-datum .plan-row { grid-template-columns: 56px minmax(0, 1fr); }
	.plan-time .von { font-size: 1.3rem; }
	.plan-side { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; text-align: left; padding-top: .75rem; border-top: 1px solid var(--line); }
	.plan-jump { gap: .5rem 1.25rem; }
}
@media (max-width: 400px) {
	.plan-row, .plan-rows-datum .plan-row { grid-template-columns: 60px minmax(0, 1fr); }
	.plan-rows-datum .plan-row { grid-template-columns: 50px minmax(0, 1fr); }
	.plan-time { padding-right: .6rem; }
	.plan-time .von { font-size: 1.15rem; }
	.plan-body h3 { font-size: 1.05rem; }
}

/* Hinweis bei leerer Liste */
.termine-empty {
	text-align: center;
	border: 1px solid var(--line);
	border-radius: var(--card-radius);
	padding: 3.5rem 1.5rem;
	background: var(--paper-card);
	color: var(--ink-soft);
}

/* ----------------------------------------------------------------------
   8b. Über mich – Bild links im Doppelrahmen, rechts läuft das Papier in Jade aus
   ---------------------------------------------------------------------- */
.ueber-section {
	position: relative;
	padding: 5.5rem 0;
	background:
		radial-gradient(60% 80% at 100% 50%, rgba(60, 122, 94, 0.16), transparent 70%),
		linear-gradient(100deg, var(--paper-2) 0%, var(--paper-2) 40%, var(--jade-mist) 100%);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	overflow: hidden;
}
.ueber-figure {
	position: relative;
	margin: 0 1.25rem 2.5rem 0;           /* Platz für den versetzten Rahmen + Bildzeile */
	max-width: 460px;
}
.ueber-figure img {
	display: block;
	width: 100%; height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 68% 50%;               /* das Mondtor bleibt im Ausschnitt */
	border-radius: var(--card-radius);
	filter: saturate(.85) contrast(1.02);
	box-shadow: 0 30px 60px -30px rgba(35, 40, 33, 0.35);
}
/* zweiter, versetzter Rahmen – die klassische „Passepartout"-Figur */
.ueber-figure::before {
	content: "";
	position: absolute; inset: 1.1rem -1.1rem -1.1rem 1.1rem;
	border: 1px solid var(--jade);
	border-radius: var(--card-radius);
	opacity: .55;
	pointer-events: none;
}
.ueber-seal {
	position: absolute; top: -1.1rem; right: -1.1rem;
	width: 66px; height: 66px; padding: 10px;
	border-radius: 50%;
	background: var(--paper);
	box-shadow: 0 0 0 1px var(--line-strong), 0 12px 28px rgba(35, 40, 33, 0.14);
	color: var(--jade-deep);
	--taiji-b: var(--paper);
}
.ueber-figure figcaption {
	position: absolute; left: 1.1rem; bottom: -1.6rem;
	display: flex; flex-direction: column; gap: .1rem;
	background: var(--paper-card);
	border: 1px solid var(--line);
	border-left: 2px solid var(--jade);
	border-radius: var(--card-radius);
	padding: .8rem 1.1rem;
	box-shadow: 0 14px 30px rgba(35, 40, 33, 0.10);
}
.ueber-figure figcaption b { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.ueber-figure figcaption span { font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--jade-deep); }

.ueber-title { font-family: var(--font-display); font-size: clamp(1.8rem, 3.2vw, 2.5rem); font-weight: 600; line-height: 1.15; margin: .6rem 0 1.1rem; text-wrap: balance; }
.ueber-title em { font-style: italic; font-weight: 500; color: var(--jade-deep); }
.ueber-text { color: var(--ink-soft); font-size: 1.04rem; max-width: 58ch; margin-bottom: 1.9rem; }

/* drei Kennzahlen als Serifen-Ziffern mit Haarlinie darüber */
.ueber-zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem 2rem; margin: 0 0 1.75rem; }
.ueber-zahlen div { border-top: 1px solid var(--line-strong); padding-top: .8rem; }
.ueber-zahlen dt { font-family: var(--font-display); font-size: 2rem; font-weight: 600; line-height: 1; color: var(--ink); }
.ueber-zahlen dt span { color: var(--jade); font-weight: 500; }
.ueber-zahlen dd { margin: .35rem 0 0; font-size: .82rem; color: var(--ink-soft); line-height: 1.45; }

.ueber-liste { list-style: none; padding: 0; margin: 0 0 1.75rem; display: flex; flex-direction: column; gap: .45rem; color: var(--ink-soft); }
.ueber-liste li { display: flex; align-items: baseline; gap: .7rem; }
.ueber-liste li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--jade); flex: 0 0 auto; transform: translateY(-2px); }

.ueber-link { display: inline-flex; align-items: center; gap: .6rem; color: var(--ink); text-decoration: none; font-weight: 600; font-size: .92rem; letter-spacing: .02em; border-bottom: 1px solid var(--line-strong); padding-bottom: .2rem; transition: color .25s ease, border-color .25s ease; }
.ueber-link i { color: var(--jade); transition: transform .3s ease; }
.ueber-link:hover { color: var(--jade-deep); border-color: var(--jade); }
.ueber-link:hover i { transform: translateX(4px); }

@media (max-width: 991.98px) {
	.ueber-section { padding: 4rem 0; background: linear-gradient(170deg, var(--paper-2) 0%, var(--paper-2) 45%, var(--jade-mist) 100%); }
	.ueber-figure { margin: 0 auto 3rem; max-width: 420px; }
}
@media (max-width: 575.98px) {
	.ueber-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ueber-zahlen dt { font-size: 1.7rem; }
	.ueber-figure { margin-right: 1.1rem; }
	.ueber-figure figcaption { left: .8rem; right: 0; padding: .65rem .9rem; }
}

/* ----------------------------------------------------------------------
   9. Weisheiten – Kalligrafie auf Papier
   ---------------------------------------------------------------------- */
.weisheit {
	position: relative;
	background: transparent;
	border: 0;
	border-top: 1px solid var(--line);
	border-radius: 0;
	box-shadow: none;
	padding: 2.25rem 1.25rem 1.5rem;
	text-align: center;
	height: 100%;
}
.weisheit::before {
	content: "";
	position: absolute;
	top: -1px; left: 50%;
	transform: translateX(-50%);
	width: 38px; height: 2px;
	background: var(--seal);
}
.weisheit p {
	font-family: var(--font-display);
	font-style: italic;
	color: var(--ink);
	font-size: 1.32rem;
	line-height: 1.6;
	margin-bottom: .85rem;
}
.weisheit cite {
	color: var(--ink-faint);
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .04em;
	font-style: normal;
}

/* ----------------------------------------------------------------------
   10. Formular (Kontakt / Anmeldung)
   ---------------------------------------------------------------------- */
/* Formularbogen – Papier mit Haarlinie, Jade-Strich links wie an der Hero-Karte */
.form-card {
	position: relative;
	background: var(--paper-card);
	border: 1px solid var(--line);
	border-radius: var(--card-radius);
	box-shadow: none;
	padding: 2.6rem 2.6rem 2.4rem;
}
.form-card::before {
	content: "";
	position: absolute; left: -1px; top: 2rem; bottom: 2rem;
	width: 2px; background: var(--jade);
}
.form-card h2 { font-family: var(--font-display); }
.form-card .req { color: var(--seal); font-weight: 700; }
.form-card .opt { font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-left: .35rem; }

.form-control, .form-select {
	border-radius: 2px;
	border: 1px solid var(--line-strong);
	background: #fff;
	padding: .8rem 1rem;
	color: var(--ink);
	transition: border-color .2s ease, box-shadow .2s ease;
}
.form-control::placeholder { color: #a9aea6; }
.form-control:focus, .form-select:focus {
	border-color: var(--jade);
	box-shadow: 0 0 0 .18rem rgba(60, 122, 94, 0.14);
}
.form-label { font-weight: 600; color: var(--ink); margin-bottom: .45rem; font-size: .9rem; }

/* Anliegen als Reiter mit Tusche-Unterstrich – dieselbe Figur wie der Terminfilter */
.anliegen { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }
.anliegen-chip { position: relative; cursor: pointer; margin: 0; }
.anliegen-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.anliegen-chip span {
	display: inline-flex; align-items: center; gap: .55rem;
	padding: .6rem 1.05rem;
	border: 1px solid var(--line-strong);
	border-radius: 2px;
	background: #fff;
	font-size: .86rem; font-weight: 600; letter-spacing: .02em;
	color: var(--ink-soft);
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.anliegen-chip span i { color: var(--jade); font-size: .8rem; }
.anliegen-chip:hover span { border-color: var(--jade); color: var(--ink); }
.anliegen-chip input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.anliegen-chip input:checked + span i { color: #9fd3b8; }
.anliegen-chip input:focus-visible + span { outline: 2px solid var(--jade); outline-offset: 2px; }

/* „Ab diesem Termin regelmäßig" – eine schlanke Häkchenzeile, kein Kasten */
.regelm-zeile { padding-top: .35rem; }   /* Luft zwischen Termin-Feld und Häkchen (Bootstrap-g-3 kommt obendrauf) */
.regelm-check { display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; margin: 0; font-size: .86rem; color: var(--ink-soft); }
.regelm-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--jade); flex: 0 0 auto; }
.regelm-check:hover span { color: var(--ink); }
.form-send { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: .5rem; }
.form-hint { flex: 1 1 260px; font-size: .78rem; line-height: 1.55; color: var(--ink-faint); }
.form-hint a { color: var(--jade-deep); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.form-note {
	display: flex; gap: .75rem; align-items: flex-start;
	padding: .95rem 1.1rem;
	border: 1px solid var(--line);
	border-left: 2px solid var(--jade);
	border-radius: var(--card-radius);
	background: #fff;
	color: var(--ink);
	font-size: .92rem;
}
.form-note i { margin-top: .15rem; color: var(--jade-deep); }
.form-note.err { border-left-color: var(--seal); }
.form-note.err i { color: var(--seal); }

/* Kontaktdaten als ruhiger Bogen – Zeilen mit Enso-Ring und Haarlinie */
.contact-card {
	background: var(--paper-card);
	border: 1px solid var(--line);
	border-radius: var(--card-radius);
	padding: 1.9rem 2rem 1.2rem;
	margin-bottom: 1.5rem;
}
.contact-rows { list-style: none; padding: 0; margin: 0; }
.contact-rows li { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 0; border-top: 1px solid var(--line); }
.contact-rows li:first-child { border-top: 0; padding-top: .25rem; }
.contact-rows .icon-box { width: 44px; height: 44px; font-size: 1rem; margin: 0; flex: 0 0 auto; }
.contact-txt { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.contact-txt b { font-family: var(--font-base); font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--jade-deep); }
.contact-txt address { margin: 0; font-style: normal; color: var(--ink); line-height: 1.5; }
.contact-txt a { color: var(--ink); text-decoration: none; border-bottom: 1px solid transparent; transition: color .25s ease, border-color .25s ease; }
.contact-txt a:hover { color: var(--jade-deep); border-bottom-color: var(--jade); }
.contact-txt > span { color: var(--ink-soft); font-size: .93rem; }

/* Karte – Zwei-Klick: bis zum Klick nur Papier, Reispapier-Raster und Adresse */
.map-card { background: var(--paper-card); border: 1px solid var(--line); border-radius: var(--card-radius); overflow: hidden; }
.map-chips { display: flex; flex-wrap: wrap; gap: .25rem 1rem; padding: .9rem 1.25rem .35rem; border-bottom: 1px solid var(--line); }
.map-chip {
	border: 0; border-bottom: 2px solid transparent; background: transparent;
	padding: .4rem .1rem; border-radius: 0;
	font-size: .82rem; font-weight: 600; letter-spacing: .04em;
	color: var(--ink-soft); cursor: pointer;
	transition: color .25s ease, border-color .25s ease;
}
.map-chip:hover { color: var(--jade-deep); border-color: var(--line-strong); }
.map-chip.active { color: var(--ink); border-bottom-color: var(--jade); }
.map-frame { position: relative; min-height: 320px; background: var(--paper-2); }
.map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.map-placeholder {
	position: absolute; inset: 0;
	display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
	padding: 1.5rem;
	color: var(--ink-soft);
	background:
		repeating-linear-gradient(0deg,  transparent 0 39px, rgba(35, 40, 33, 0.07) 39px 40px),
		repeating-linear-gradient(90deg, transparent 0 39px, rgba(35, 40, 33, 0.07) 39px 40px),
		var(--paper-2);
}
.map-pin { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--jade); background: var(--paper-card); color: var(--jade-deep); font-size: 1.2rem; margin-bottom: .9rem; }
.map-placeholder b { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--ink); }
.map-placeholder > span { font-size: .9rem; margin-top: .15rem; }
.map-placeholder small { display: block; margin-top: .9rem; font-size: .72rem; color: var(--ink-faint); max-width: 34ch; line-height: 1.5; }
.map-placeholder small a { color: var(--jade-deep); }
.map-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; padding: .85rem 1.25rem; border-top: 1px solid var(--line); font-size: .82rem; }
.map-foot a { color: var(--ink-soft); text-decoration: none; font-weight: 600; transition: color .25s ease; }
.map-foot a:hover { color: var(--jade-deep); }
.map-foot i { color: var(--jade); }

/* Umsetzungs-Badge im Impressum (badge/pixlwerk-badge-remote.php) – nur Abstand,
   das Badge bringt seine Gestaltung gekapselt selbst mit. */
.legal-badge-wrap { margin-top: 44px; margin-bottom: 3rem; }

/* ----------------------------------------------------------------------
   11. Stilles Band (CTA) – Tuschefläche
   ---------------------------------------------------------------------- */
.cta-band {
	position: relative;
	overflow: hidden;
	background: var(--ink);
	border-radius: var(--card-radius);
	color: var(--paper);
	padding: 3.5rem 3.25rem;
	box-shadow: inset 0 0 0 1px rgba(244, 241, 233, 0.08);
}
/* Jade-Strich links wie an der Hero-Karte – hier in der dunklen Fassung */
.cta-band::before {
	content: "";
	position: absolute; left: 0; top: 2.25rem; bottom: 2.25rem;
	width: 2px; background: var(--jade);
}
/* großer Enso als Wasserzeichen, ruht rechts an der Kante */
.cta-enso {
	--taiji-b: var(--ink);            /* helle Hälfte = Untergrund, sonst grauer Punkt */
	position: absolute; right: -60px; top: 50%;
	width: 340px; height: 340px;
	transform: translateY(-50%) rotate(-12deg);
	color: var(--jade);
	opacity: .28;
	pointer-events: none;
}
.cta-eyebrow {
	display: inline-flex; align-items: center; gap: .75rem;
	font-size: .7rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
	color: #9fd3b8;
	margin-bottom: 1rem;
}
.cta-eyebrow::before { content: ""; width: 28px; height: 1px; background: #9fd3b8; }
.cta-title {
	font-family: var(--font-display);
	font-size: clamp(1.8rem, 3.4vw, 2.6rem);
	font-weight: 600; line-height: 1.15;
	color: #fbfaf6;
	margin: 0 0 .9rem;
	text-wrap: balance;
}
.cta-title em { font-style: italic; font-weight: 500; color: #9fd3b8; }
.cta-lead { color: rgba(244, 241, 233, 0.78); font-size: 1.02rem; max-width: 46ch; margin: 0 0 1.4rem; }
.cta-trust {
	display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
	list-style: none; padding: 0; margin: 0;
	font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
	color: rgba(244, 241, 233, 0.62);
}
.cta-trust li { display: flex; align-items: center; gap: .55rem; }
.cta-trust li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #9fd3b8; flex: 0 0 auto; }

/* rechts: Knöpfe untereinander, Telefon als eigene Zeile mit Ring */
.cta-actions { display: flex; flex-direction: column; align-items: stretch; gap: .75rem; max-width: 340px; margin-left: auto; }
.cta-band .btn-light {
	background: var(--paper);
	border: 1px solid var(--paper);
	color: var(--ink);
	font-weight: 600;
	justify-content: center;
}
.cta-band .btn-light:hover { background: #fff; border-color: #fff; color: var(--jade-deep); }
.cta-band .btn-outline-light {
	border: 1px solid rgba(244, 241, 233, 0.45);
	color: var(--paper);
	justify-content: center;
}
.cta-band .btn-outline-light:hover { background: rgba(244, 241, 233, 0.1); border-color: #fbfaf6; color: #fff; }
.cta-band .btn-pill { display: inline-flex; align-items: center; }
.cta-tel {
	display: flex; align-items: center; gap: .9rem;
	margin-top: .6rem; padding-top: 1rem;
	border-top: 1px solid rgba(244, 241, 233, 0.14);
	color: var(--paper); text-decoration: none;
	transition: color .25s ease;
}
.cta-tel:hover { color: #fff; }
.cta-tel-ring {
	width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto;
	display: flex; align-items: center; justify-content: center;
	border: 1.5px solid var(--jade); color: #9fd3b8; font-size: .85rem;
	transition: background-color .25s ease, color .25s ease;
}
.cta-tel:hover .cta-tel-ring { background: var(--jade); color: #fff; }
.cta-tel-text { display: flex; flex-direction: column; line-height: 1.25; }
.cta-tel-text b { font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(244, 241, 233, 0.6); }
.cta-tel-text > span { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: #fbfaf6; }

@media (max-width: 991.98px) {
	.cta-actions { margin-left: 0; max-width: none; }
	.cta-enso { width: 260px; height: 260px; right: -90px; top: auto; bottom: -70px; transform: rotate(-12deg); opacity: .2; }
}

/* ----------------------------------------------------------------------
   12. Footer
   ---------------------------------------------------------------------- */
/* Fuß als tieferer Papierbogen mit Haarlinie oben; Enso als Wasserzeichen rechts */
.site-footer {
	position: relative;
	overflow: hidden;
	background-color: var(--paper-2);
	border-top: 1px solid var(--line);
	padding: 4.5rem 0 2rem;
	color: var(--ink-soft);
}
.footer-enso {
	--taiji-b: var(--paper-2);
	position: absolute;
	right: -70px; bottom: -90px;
	width: 340px; height: 340px;
	color: var(--jade);
	opacity: .09;
	pointer-events: none;
}

/* Marke – Wortmarke aus dem CMS wie in der Leiste, sonst Namenszug */
.footer-brand { display: inline-block; text-decoration: none; color: var(--ink); margin-bottom: 1.25rem; }
/* Im Fuß darf die Marke groß stehen – sie ist der ruhige Abschluss der Seite.
   clamp: 52 px am Handy, bis 76 px auf dem Desktop; max-width fängt schmale
   Spalten ab, bevor die breite Wortmarke aus dem Raster läuft. */
.footer-brand-logo { display: block; height: clamp(52px, 6vw, 76px); width: auto; max-width: 100%; mix-blend-mode: multiply; }
.footer-brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.footer-brand-name { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; color: var(--ink); }
.footer-brand-slogan { margin-top: .3rem; font-size: .66rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); }
.footer-claim { max-width: 34ch; font-size: .92rem; line-height: 1.75; color: var(--ink-soft); margin-bottom: 1.25rem; }
.footer-orte {
	display: flex; flex-wrap: wrap; gap: .4rem 1.1rem;
	list-style: none; padding: 0; margin: 0;
	font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
	color: var(--ink-faint);
}
.footer-orte li { display: flex; align-items: center; gap: .55rem; }
.footer-orte li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--jade); }

/* Spaltenköpfe als Augenbraue, Listen ruhig mit einziehendem Jade-Strich */
.footer-head {
	display: inline-flex; align-items: center; gap: .6rem;
	margin-bottom: 1.1rem;
	font-family: var(--font-base);
	font-size: .7rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
	color: var(--jade-deep);
}
.footer-head::before { content: ""; width: 18px; height: 1px; background: var(--jade); }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: .55rem; }
.footer-links a,
.footer-contact a {
	position: relative;
	color: var(--ink-soft);
	text-decoration: none;
	font-size: .93rem;
	transition: color .25s ease;
}
.footer-links a::after {
	content: "";
	position: absolute; left: 0; right: 0; bottom: -2px;
	height: 1px; background: var(--jade);
	transform: scaleX(0); transform-origin: left center;
	transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}
.footer-links a:hover, .footer-links a:focus-visible,
.footer-contact a:hover, .footer-contact a:focus-visible { color: var(--jade-deep); }
.footer-links a:hover::after, .footer-links a:focus-visible::after { transform: scaleX(1); }

.footer-contact { list-style: none; padding: 0; margin: 0 0 1.25rem; font-size: .93rem; }
.footer-contact li { display: flex; gap: .75rem; align-items: flex-start; margin-bottom: .6rem; }
.footer-contact i { width: 16px; text-align: center; margin-top: .3rem; color: var(--jade); font-size: .85rem; }

/* Social als kleine Enso-Ringe */
.footer-social { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0 0 1.4rem; }
.footer-social a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; border-radius: 50%;
	border: 1.5px solid var(--jade);
	color: var(--jade-deep);
	font-size: .95rem;
	text-decoration: none;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.footer-social a:hover, .footer-social a:focus-visible { background: var(--jade); border-color: var(--jade); color: #fff; }
.footer-cta { display: inline-flex; align-items: center; }

/* Unterste Zeile: Haarlinie, Copyright, Credit, Nach-oben */
.footer-bottom {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem;
	margin-top: 3.25rem; padding-top: 1.4rem;
	border-top: 1px solid var(--line);
	font-size: .8rem; color: var(--ink-faint);
}
.footer-credit i { color: var(--seal); margin: 0 .1rem; }   /* das Siegel-Rot – einmal, hier */
.footer-credit a { color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--line-strong); transition: color .25s ease, border-color .25s ease; }
.footer-credit a:hover { color: var(--jade-deep); border-color: var(--jade); }
.footer-top {
	display: inline-flex; align-items: center; gap: .5rem;
	color: var(--ink-soft); text-decoration: none;
	font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
	transition: color .25s ease;
}
.footer-top i { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-strong); border-radius: 50%; font-size: .7rem; transition: transform .3s ease, border-color .25s ease; }
.footer-top:hover { color: var(--jade-deep); }
.footer-top:hover i { transform: translateY(-3px); border-color: var(--jade); }

@media (max-width: 767.98px) {
	.site-footer { padding: 3.25rem 0 1.5rem; }
	.footer-enso { width: 240px; height: 240px; right: -60px; bottom: -70px; }
	.footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ----------------------------------------------------------------------
   13. Reduced Motion
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ----------------------------------------------------------------------
   14. Responsive Feinschliff
   ---------------------------------------------------------------------- */
@media (max-width: 991.98px) {
	/* Kein backdrop-filter am Handy: er würde zum Bezugsrahmen für das
	   position:fixed des Vollbild-Menüs und es an die Leiste fesseln.
	   Die Leiste ist hier ohnehin nahezu deckend. */
	.navbar {
		background-color: rgba(244, 241, 233, 0.98);
		border-bottom: 1px solid var(--line);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
	.navbar-brand { position: relative; z-index: 2; margin-right: 0; }
	.brand-name { font-size: 1.05rem; }
	.brand-logo, .navbar-scrolled .brand-logo { height: 36px; }
	body.menu-open { overflow: hidden; }

	/* Das Bootstrap-Collapse wird zum Vollbild-Papierbogen. Die Klassen
	   .collapsing/.show setzt Bootstrap weiterhin – nur die Optik ist neu. */
	.navbar-collapse,
	.navbar-collapse.collapsing,
	.navbar-collapse.show {
		display: flex !important;
		flex-direction: column;
		position: fixed; inset: 0;
		z-index: 1;
		height: auto !important;
		overflow-y: auto;
		padding: calc(var(--nav-h) + 1.5rem) 1.75rem 2rem;
		background: var(--paper);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity .38s ease, transform .45s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .45s;
	}
	.navbar-collapse.show {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: opacity .38s ease, transform .45s cubic-bezier(.2, .7, .2, 1), visibility 0s;
	}
	.navbar-nav { margin: auto 0; gap: .15rem; }
	.navbar .nav-link {
		display: flex; align-items: baseline; gap: 1rem;
		padding: .35rem 0 !important;
		font-family: var(--font-display);
		font-size: clamp(1.9rem, 7.5vw, 2.6rem);
		font-weight: 600;
		letter-spacing: 0;
		color: var(--ink);
		opacity: 0;
		transform: translateY(14px);
		transition: opacity .5s ease, transform .6s cubic-bezier(.2, .7, .2, 1), color .25s ease;
		transition-delay: calc(var(--i, 1) * 60ms);
	}
	.navbar-collapse.show .nav-link { opacity: 1; transform: none; }
	.navbar .nav-link::after { display: none; }
	.navbar .nav-link.active { color: var(--jade-deep); }
	.nav-num {
		display: inline-block; min-width: 2.2em;
		font-family: var(--font-base);
		font-size: .68rem; font-weight: 600; letter-spacing: .2em;
		color: var(--jade);
	}
	.nav-cta {
		margin: 1.6rem 0 0;
		opacity: 0; transform: translateY(14px);
		transition: opacity .5s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
		transition-delay: calc(var(--i, 6) * 60ms);
	}
	.navbar-collapse.show .nav-cta { opacity: 1; transform: none; }
	.btn-nav { width: 100%; justify-content: center; padding: .9rem 1.4rem; font-size: .86rem; }
	.menu-foot {
		display: flex; flex-direction: column; gap: .35rem;
		margin-top: auto; padding-top: 1.75rem;
		border-top: 1px solid var(--line);
		font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
		color: var(--ink-faint);
	}

	.hero-section { min-height: auto; padding: 7.5rem 0 3.5rem; }
	.hero-section::before {
		background:
			linear-gradient(180deg, rgba(20, 24, 19, 0.74) 0%, rgba(24, 29, 22, 0.86) 100%),
			var(--hero-image) center / cover no-repeat;
	}

	/* Startseiten-Hero: Text oben, Karte darunter, Foto gleichmäßig abgedunkelt */
	.hero-home { min-height: auto; padding: calc(var(--nav-h) + 2.25rem) 0 4.5rem; }
	.hero-media::after {
		background: linear-gradient(180deg, rgba(14, 18, 14, 0.78) 0%, rgba(14, 18, 14, 0.88) 100%);
	}
	.hero-home .hero-title { max-width: none; }
	.hero-card { max-width: none; margin: 0; }
	.hero-scroll { display: none; }
}
@media (max-width: 575.98px) {
	.hero-card { padding: 1.5rem 1.35rem 1.4rem; }
	.hero-card-date .day { font-size: 2.6rem; }
	.hero-home .hero-lead { font-size: 1rem; }
	.toggler-label { display: none; }
	/* 320 px: neben dem Umschalter muss Luft bleiben – die Wortmarke ist breit */
	.brand-logo, .navbar-scrolled .brand-logo { height: 30px; }
}
@media (max-width: 575.98px) {
	.termin-card { padding: 1.2rem 1.25rem; gap: 1rem; }
	.termin-date { min-width: 50px; padding-right: .9rem; }
	.termin-date .day { font-size: 1.8rem; }
	.cta-band { padding: 2.25rem 1.5rem 2rem; }
	.cta-band::before { top: 1.5rem; bottom: 1.5rem; }
	.form-card { padding: 1.75rem 1.4rem; }
}

/* ----------------------------------------------------------------------
   15. Cookie-Banner des Kerns (#cookieBanner.pcc) als Papierbogen
   Seit 10.09.2026 rendert _integration/i_cookie.php den Kern-Banner 2.8.2
   (Kategorien, „Auswahl speichern", Einwilligungsprotokoll, erneut öffnen
   über [data-cookie-einstellungen]). Der Kern bringt eigene Stile per
   <style> im BODY mit – also NACH dieser Datei und mit `#cookieBanner.pcc
   .pcc-card` (ID + 2 Klassen). Deshalb steht hier überall `body
   #cookieBanner.pcc …`: gleiche Spezifität plus `body`, gewinnt ohne
   !important. Die Positionsklasse bleibt außen vor – sie ist im Admin
   umstellbar, der Papier-Look soll in jeder Position gelten.
   ---------------------------------------------------------------------- */
body #cookieBanner.pcc { --pcc-accent: var(--jade); font-family: var(--font-base); }
body #cookieBanner.pcc.pcc-unten { padding: 1.25rem; }
body #cookieBanner.pcc.pcc-unten .pcc-card { max-width: 760px; padding: 1.5rem 1.7rem; }
body #cookieBanner.pcc .pcc-card {
	background: var(--paper-card);
	color: var(--ink-soft);
	border: 1px solid var(--line);
	border-radius: var(--card-radius);
	box-shadow: 0 12px 40px rgba(35, 40, 33, 0.16);
	font-family: var(--font-base);
	line-height: 1.55;
}
/* Titel ist ein <h2>: hier die Serife der Seite, nicht die fette Systemschrift des Kerns */
body #cookieBanner.pcc .pcc-head,
body #cookieBanner.pcc h2 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.25rem;
	letter-spacing: 0;
	color: var(--ink);
	margin-bottom: .5rem;
}
/* Cookie-Symbol als Jade-Siegel statt heller Kachel */
body #cookieBanner.pcc .pcc-ico { background: var(--jade-mist); color: var(--jade-deep); border-radius: 50%; }
body #cookieBanner.pcc .pcc-text { color: var(--ink-soft); font-size: .92rem; }
body #cookieBanner.pcc .pcc-text a { color: var(--jade-deep); font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: 2px; }
body #cookieBanner.pcc .pcc-cat { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; }
body #cookieBanner.pcc .pcc-cat label { color: var(--ink); font-weight: 600; }
body #cookieBanner.pcc .pcc-cat input { accent-color: var(--jade); }
body #cookieBanner.pcc .pcc-cat .pcc-serv { color: var(--ink-faint); font-weight: 500; }
/* Knöpfe wie der Rest der Seite: Pillen, Tusche als Primär, Haarlinie als Zweitwahl */
body #cookieBanner.pcc .pcc-btn { border-radius: 999px; font-weight: 600; font-size: .88rem; padding: .7rem 1.35rem; transform: none; }
body #cookieBanner.pcc .pcc-btn:hover { transform: none; }
body #cookieBanner.pcc .pcc-btn.pcc-accept { background: var(--ink); color: var(--paper); box-shadow: none; }
body #cookieBanner.pcc .pcc-btn.pcc-accept:hover { background: var(--jade-deep); }
body #cookieBanner.pcc .pcc-btn.pcc-save { background: var(--jade-mist); color: var(--jade-deep); }
body #cookieBanner.pcc .pcc-btn.pcc-save:hover { background: var(--jade); color: var(--paper); }
body #cookieBanner.pcc .pcc-btn.pcc-decline { background: transparent; color: var(--ink-soft); border: 1px solid var(--line-strong); }
body #cookieBanner.pcc .pcc-btn.pcc-decline:hover { color: var(--ink); border-color: var(--ink); }
body #cookieBanner.pcc .pcc-btn:focus-visible { outline: 2px solid var(--jade); outline-offset: 2px; }
@media (max-width: 575.98px) {
	body #cookieBanner.pcc.pcc-unten { padding: 0; }
	body #cookieBanner.pcc.pcc-unten .pcc-card { border-radius: 14px 14px 0 0; padding: 1.2rem 1.25rem; }
}

/* Knopf, der wie ein Link aussieht (Footer „Cookie-Einstellungen") – ein
   Link mit href="#" würde mit <base href="/"> zur Startseite springen. */
.btn-linklike { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.footer-links .btn-linklike { position: relative; color: var(--ink-soft); font-size: .93rem; transition: color .25s ease; }
.footer-links .btn-linklike::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--jade);
	transform: scaleX(0); transform-origin: left center; transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}
.footer-links .btn-linklike:hover, .footer-links .btn-linklike:focus-visible { color: var(--jade-deep); }
.footer-links .btn-linklike:hover::after, .footer-links .btn-linklike:focus-visible::after { transform: scaleX(1); }
/* Derselbe Knopf im Fließtext der Datenschutzerklärung */
.legal-inline-btn { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--jade-deep); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.legal-inline-btn:hover { color: var(--seal); }

/* ----------------------------------------------------------------------
   16. pixSelect – Auswahlfelder als Papierbogen (seit 10.09.2026)
   Das Kern-Skript assets/js/pixselect.js baut um jedes <select>:
     <div class="pixsel">  (.is-open beim Aufklappen)
       <select class="… pixsel-native">   unsichtbar, bleibt Submit-Quelle
       <button class="pixsel-trigger">    .is-placeholder solange nichts gewählt
         <span class="pixsel-value"> <svg class="pixsel-arrow">
     <div class="pixsel-panel">  hängt am <body>, position:fixed (.is-visible)
       <div class="pixsel-opt is-active|is-selected|is-disabled">
   ⚠️ Panel NICHT unter .pixsel verschachteln, position:fixed lassen.
   ⚠️ Findet das Skript keine Gestaltung, schreibt es Grundstile per <style>
      in den <head> – NACH dieser Datei. Regeln, die es selbst kennt, stehen
      deshalb mit `body` davor. Maße wie .form-control: 2px Radius, Haarlinie,
      Jade-Fokus.
   ---------------------------------------------------------------------- */
body .pixsel { position: relative; width: 100%; }
select.pixsel-native { opacity: 0; pointer-events: none; }
.pixsel-trigger {
	display: flex; align-items: center; gap: .5rem; width: 100%;
	border: 1px solid var(--line-strong); border-radius: 2px;
	background: #fff; color: var(--ink);
	padding: .8rem 1rem; font: inherit; font-size: .95rem; text-align: left; cursor: pointer;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.pixsel-value { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pixsel-trigger.is-placeholder .pixsel-value { color: #a9aea6; }
.pixsel-arrow { flex: 0 0 auto; display: block; width: 14px; height: 14px; color: var(--jade); transition: transform .2s ease; }
.pixsel.is-open .pixsel-arrow { transform: rotate(180deg); }
.pixsel-trigger:hover { border-color: var(--ink); }
.pixsel-trigger:focus-visible,
.pixsel.is-open .pixsel-trigger { outline: none; border-color: var(--jade); box-shadow: 0 0 0 .18rem rgba(60, 122, 94, 0.14); }
.pixsel-trigger:disabled { opacity: .6; cursor: not-allowed; }

body .pixsel-panel {
	position: fixed; z-index: 2000; min-width: 160px;
	margin: 0; padding: .35rem; list-style: none;
	background: var(--paper-card); color: var(--ink);
	border: 1px solid var(--line-strong); border-radius: 4px;
	box-shadow: 0 14px 36px rgba(35, 40, 33, .18);
	max-height: 280px; overflow-y: auto; overscroll-behavior: contain;
	font: inherit; font-size: .93rem;
	opacity: 0; transform: translateY(-6px);
	transition: opacity .14s ease, transform .14s ease;
}
body .pixsel-panel.is-visible { opacity: 1; transform: translateY(0); }
body .pixsel-opt {
	display: flex; align-items: center; gap: .5rem;
	padding: .6rem .8rem; border-radius: 3px;
	font-weight: 400; color: var(--ink); cursor: pointer;
	transition: background .12s ease;
}
body .pixsel-opt.is-active { background: var(--jade-mist); }
body .pixsel-opt.is-selected { color: var(--jade-deep); font-weight: 600; }
body .pixsel-opt.is-selected::after { content: "\2713"; margin-left: auto; color: var(--jade); }
body .pixsel-opt.is-disabled { opacity: .5; cursor: not-allowed; }
body .pixsel-optgroup-label { padding: .5rem .8rem .25rem; font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint); }
body .pixsel-empty { padding: .9rem .8rem; text-align: center; color: var(--ink-faint); font-size: .85rem; }