/* GEBAUT aus css/src/ mit php css/build.php, nicht von Hand aendern */
/* ==========================================================================
   billcreator — Oberflaeche nach dem Designsystem (Dark Mode, Akzent #00D09B)
   Tokens aus tokens/colors.css, typography.css und spacing.css des Systems.
   ========================================================================== */

:root {
	/* base */
	--green-500: #00D09B; --green-400: #39E0B4; --green-600: #00B586; --green-900: #06231B;
	--ink-950: #0A0C0B; --ink-900: #101413; --ink-850: #141A18; --ink-800: #1E2523; --ink-700: #2A332F;
	--gray-400: #8FA09B; --gray-300: #B9C6C2; --gray-100: #F2F5F4;
	--red-400: #F26D6D; --amber-400: #F5B950; --blue-400: #8AA2DB;
	/* semantic */
	--surface-page: var(--ink-950); --surface-card: var(--ink-900); --surface-raised: var(--ink-850);
	--surface-glass: rgba(16,20,19,.30); --blur-glass: blur(9px) saturate(1.15);
	--border-default: var(--ink-800); --border-strong: var(--ink-700);
	--text-primary: var(--gray-100); --text-secondary: var(--gray-300); --text-muted: var(--gray-400);
	--accent: var(--green-500); --accent-hover: var(--green-400); --accent-pressed: var(--green-600); --on-accent: var(--green-900);
	--focus-ring: 0 0 0 2px rgba(var(--accent-rgb),.45);
	--glow-accent: 0 0 18px rgba(var(--accent-rgb),.55);
	--glow-border: 0 0 10px rgba(var(--accent-rgb),.65), 0 0 26px rgba(var(--accent-rgb),.3), inset 0 0 8px rgba(var(--accent-rgb),.22);
	--glow-white: 0 0 10px rgba(var(--secondary-rgb),.5), 0 0 26px rgba(var(--secondary-rgb),.22), inset 0 0 8px rgba(var(--secondary-rgb),.18);
	--success: var(--green-500); --danger: var(--red-400); --warning: var(--amber-400);
	/* type */
	--font-display: 'Space Grotesk', ui-sans-serif, sans-serif;
	--font-body: 'Instrument Sans', ui-sans-serif, sans-serif;
	--font-mono: 'IBM Plex Mono', ui-monospace, monospace;
	--text-display: 600 44px/1.1 var(--font-display); --ls-display: -0.03em;
	--text-h1: 600 28px/1.2 var(--font-display); --ls-h1: -0.02em;
	--text-h2: 600 20px/1.3 var(--font-display); --ls-h2: -0.01em;
	--text-body: 400 15px/1.55 var(--font-body);
	--text-body-strong: 600 15px/1.55 var(--font-body);
	--text-small: 400 13px/1.45 var(--font-body);
	--text-label: 500 12px/1.2 var(--font-body); --ls-label: 0.04em;
	--text-num: 500 15px/1.4 var(--font-body);
	--text-code: 400 13px/1.5 var(--font-mono);
	/* spacing */
	--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
	--radius-s: 6px; --radius-m: 10px; --radius-l: 16px; --radius-tile: 22%;
	--shadow-card: 0 8px 30px rgba(0,0,0,.4); --shadow-pop: 0 20px 60px rgba(0,0,0,.5);
	/* abgeleitet, damit beide Modi dieselben Regeln nutzen */
	--accent-rgb: 0,208,155;
	--secondary-rgb: 242,245,244;
	--overlay-rgb: 10,12,11;
	--popover-bg: var(--ink-900);
	--modal-bg: var(--modal-bg);
	--tooltip-bg: rgba(6,35,27,.92);
	--tooltip-text: var(--green-500);
	--scrollbar: var(--ink-700);
	--disabled: var(--ink-700);
	--nav-glass: var(--nav-glass);
	--topbar-glass: var(--topbar-glass);
	--paper: #F5F5F2;
	--wave-alpha: 1;
	--scheme: dark;
	/* layout */
	--nav-width: 114px; --nav-width-collapsed: 114px;
	/* Aktiver Bereich der Navigation, mobil und Desktop: leichter Akzentverlauf
	   wie unter der Linie im Umsatz-Chart, feiner Akzentrand, kein Glow */
	--nav-active-bg: linear-gradient(180deg, rgba(0,208,155,.24), rgba(0,208,155,.06));
	--nav-active-edge: inset 0 0 0 1px rgba(0,208,155,.18);
	--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238FA09B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z'/%3E%3C/svg%3E");
	--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238FA09B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
	--icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306231B' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.75l6 6 9-13.5'/%3E%3C/svg%3E");
	--icon-chevron-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300D09B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
	--icon-dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Ccircle cx='12' cy='5' r='1.7'/%3E%3Ccircle cx='12' cy='12' r='1.7'/%3E%3Ccircle cx='12' cy='19' r='1.7'/%3E%3C/svg%3E");
	--icon-cloud-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16.5V9.75m0 0l3 3m-3-3l-3 3M6.75 19.5a4.5 4.5 0 01-1.41-8.775 5.25 5.25 0 0110.233-2.33 3 3 0 013.758 3.848A3.752 3.752 0 0118 19.5H6.75z'/%3E%3C/svg%3E");
	--icon-paperclip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01l-.01.01m5.699-9.941l-7.81 7.81a1.5 1.5 0 002.112 2.13'/%3E%3C/svg%3E");
}

/* Heller Modus, geschaltet ueber data-theme="light" auf <html>. Werte aus
   tokens/colors.css des Designsystems. */
[data-theme="light"] {
	--surface-page: #EEF2F1; --surface-card: #FFFFFF; --surface-raised: #F4F7F6;
	--surface-glass: rgba(255,255,255,.55);
	--border-default: #DCE4E1; --border-strong: #C3CFCA;
	--text-primary: #0F1513; --text-secondary: #33403B; --text-muted: #66756F;
	--accent: #00A87D; --accent-hover: #00B586; --accent-pressed: #008F6B; --on-accent: #FFFFFF;
	--focus-ring: 0 0 0 2px rgba(0,168,125,.4); --glow-accent: 0 0 18px rgba(0,168,125,.4);
	--glow-border: 0 0 10px rgba(0,168,125,.5), 0 0 26px rgba(0,168,125,.22), inset 0 0 8px rgba(0,168,125,.16);
	--glow-white: 0 0 10px rgba(15,21,19,.18), 0 0 26px rgba(15,21,19,.08), inset 0 0 8px rgba(15,21,19,.06);
	--success: #00A87D; --danger: #D9534F; --warning: #C98A1B; --blue-400: #5B78C7;
	--shadow-card: 0 8px 30px rgba(15,21,19,.10); --shadow-pop: 0 20px 60px rgba(15,21,19,.18);
	--accent-rgb: 0,168,125;
	--secondary-rgb: 15,21,19;
	--overlay-rgb: 238,242,241;
	--popover-bg: #FFFFFF;
	--modal-bg: rgba(255,255,255,.86);
	--tooltip-bg: rgba(255,255,255,.96);
	--tooltip-text: #008F6B;
	--scrollbar: #C3CFCA;
	--disabled: #C3CFCA;
	--nav-glass: rgba(238,242,241,.94);
	--topbar-glass: rgba(238,242,241,.85);
	--wave-alpha: .55;
	--scheme: light;
	--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2366756F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z'/%3E%3C/svg%3E");
	--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2366756F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
	--icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.75l6 6 9-13.5'/%3E%3C/svg%3E");
	--icon-chevron-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300A87D' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
}

/* entypo bleibt fuer die wenigen Glyphen, die das Skript noch setzt */
[class*="entypo-"]:before {
	font-family: 'entypo', sans-serif;
}

/* aus 020-grundgeruest.css */
html {
	height: 100%;
	min-width: 320px;
	overflow-x: hidden;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	color-scheme: var(--scheme);
}
body {
	margin: 0;
	padding: 0;
	min-height: 100%;
	min-width: 320px;
	background: var(--surface-page);
	color: var(--text-primary);
	font: var(--text-body);
	-webkit-font-smoothing: antialiased;
	box-sizing: border-box;
	overflow-x: hidden;
}
body * {
	box-sizing: border-box;
}
* {
	scrollbar-width: none;
}
::selection {
	background: rgba(var(--accent-rgb),.35);
	color: var(--text-primary);
}
#bg-waves {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
}
h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--text-primary);
	margin: 0;
}
h1 {
	font: var(--text-h1);
	letter-spacing: var(--ls-h1);
}
h2 {
	font: var(--text-h2);
	letter-spacing: var(--ls-h2);
}
h3 {
	font: 600 16px/1.3 var(--font-display);
	letter-spacing: -0.01em;
}
p {
	margin: 0 0 12px 0;
}
p:last-child {
	margin-bottom: 0;
}
a {
	cursor: pointer;
	text-decoration: none;
	color: var(--accent);
	transition: color .15s;
}
a:hover {
	color: var(--accent-hover);
}
ul, ol {
	padding-left: 24px;
}
/* aus 030-seitenleiste.css */
[data-theme="light"] #bg-waves {
	opacity: var(--wave-alpha);
}
/* aus 040-seite-kopf-fuss.css */
.wrapper {
	position: relative;
	width: 100%;
}
footer .wrapper {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
footer nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 16px;
}
footer nav ul li a,
footer .copyright p {
	font: var(--text-small);
	color: var(--text-muted);
	margin: 0;
}
footer nav ul li a:hover {
	color: var(--text-secondary);
}
footer .copyright {
	margin-left: auto;
}
/* Schmal: Navigation und Copyright passen nicht in eine Zeile, beides
   zentriert untereinander */
@media (max-width: 770px) {
	body:not(.static) footer .wrapper {
		flex-direction: column;
		justify-content: center;
		gap: 10px;
		text-align: center;
	}
	body:not(.static) footer nav ul {
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px 16px;
	}
	body:not(.static) footer .copyright {
		margin-left: 0;
	}
}
/* aus 050-ansicht-kopf.css */
.heading {
	margin-bottom: 24px;
}
.slide_navi {
	margin-bottom: 24px;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	touch-action: pan-x pan-y;
}
.slide_navi > ul {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 26px;
	width: max-content !important;
	min-width: 100%;
	white-space: nowrap;
	box-shadow: inset 0 -1px 0 var(--border-default);
}
.slide_navi .user_navi li {
	flex: 0 0 auto;
}
.slide_navi .user_navi li a {
	display: block;
	padding: 0 2px 11px;
	border-bottom: 2px solid transparent;
	color: var(--text-muted);
	font: 500 14px/1.2 var(--font-body);
	transition: color .15s, border-color .15s;
}
.slide_navi .user_navi li a:hover {
	color: var(--text-primary);
}
.slide_navi .user_navi li.active a {
	color: var(--accent);
	font-weight: 600;
	border-bottom-color: var(--accent);
	cursor: default;
}
.page-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.page-title {
	animation: bc-drop-in .45s cubic-bezier(.2,.8,.3,1) both;
}
.page-actions {
	animation: bc-drop-in .45s cubic-bezier(.2,.8,.3,1) .15s both;
}
.page-title .subline {
	margin: 4px 0 0;
	font: var(--text-small);
	color: var(--text-muted);
}
.page-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}
/* aus 060-schaltflaechen.css */
button,
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	white-space: nowrap;
	cursor: pointer;
	vertical-align: top;
	margin: 0;
	padding: 10px 16px;
	border-radius: var(--radius-m);
	border: 1px solid rgba(var(--secondary-rgb),.45);
	background: transparent;
	color: var(--text-secondary);
	font: 600 14px/1.2 var(--font-body);
	text-decoration: none;
	outline: none;
	transition: border-color .15s, color .15s, box-shadow .15s, background .15s;
}
button:hover,
.button:hover {
	border-color: var(--text-primary);
	color: var(--text-primary);
	box-shadow: var(--glow-white);
	text-decoration: none;
}
button.primary,
.button.primary,
.button.good,
#accept .button {
	border: 1px solid var(--accent);
	color: var(--accent);
}
button.primary:hover,
.button.primary:hover,
.button.good:hover,
#accept .button:hover {
	background: rgba(var(--accent-rgb),.08);
	box-shadow: var(--glow-border);
	color: var(--accent);
	border-color: var(--accent);
}
/* aus 070-eingaben.css */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="search"],
textarea {
	-webkit-appearance: none;
	appearance: none;
	height: 40px;
	width: 100%;
	padding: 0 12px;
	margin: 0;
	background: var(--surface-raised);
	color: var(--text-primary);
	font: 400 14px/1.4 var(--font-body);
	border-radius: var(--radius-m);
	border: 1px solid var(--border-strong);
	outline: none;
	vertical-align: top;
	transition: border-color .15s, box-shadow .2s;
}
textarea {
	height: auto;
	min-height: 90px;
	padding: 10px 12px;
	resize: vertical;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="search"]:focus,
textarea:focus {
	border-color: var(--accent);
	box-shadow: var(--glow-border);
}
::placeholder {
	color: var(--text-muted);
	opacity: 1;
}
:focus::placeholder {
	color: var(--disabled);
}
label {
	display: block;
	font: var(--text-label);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--text-muted);
}
/* aus 080-listen.css */
.content-card {
	background: var(--surface-glass);
	backdrop-filter: var(--blur-glass);
	-webkit-backdrop-filter: var(--blur-glass);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-l);
	overflow: hidden;
}
.content-card.text-page {
	padding: 28px;
	max-width: 760px;
}
.text-page .label {
	font: var(--text-label);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--text-muted);
	margin: 22px 0 6px;
}
.text-page .label:first-child {
	margin-top: 0;
}
.text-page p {
	color: var(--text-secondary);
}
/* Rechtstexte: links die Abschnittsnavigation (sticky), rechts die Karte,
   hoechstens 720px, Absaetze hoechstens 70 Zeichen. Nur mit .legal, der
   AVV-Dialog nutzt denselben Text ohne diese Regeln. */
.wrapper.legal {
	display: grid;
	grid-template-columns: 240px minmax(0,720px);
	gap: 40px;
	align-items: start;
}
.wrapper.legal.no_nav {
	grid-template-columns: minmax(0,720px);
}
.wrapper.legal.no_nav .legal_nav {
	display: none;
}
.legal_nav {
	position: sticky;
	top: 24px;
}
.legal_nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.legal_nav a {
	display: block;
	padding: 6px 12px;
	border-left: 2px solid var(--border-default);
	font: 500 13px/1.35 var(--font-body);
	color: var(--text-muted);
}
.legal_nav a:hover {
	color: var(--text-primary);
}
.legal_nav a.active {
	border-left-color: var(--accent);
	color: var(--accent);
}
.legal .content-card.text-page {
	max-width: 720px;
}
.legal .text-page p {
	max-width: 70ch;
	font: 400 15px/1.7 var(--font-body);
}
.legal .text-page .label {
	margin: 0;
	padding-top: 22px;
	border-top: 1px solid var(--border-default);
	font: 600 12px/1.3 var(--font-body);
	letter-spacing: .06em;
	color: var(--accent);
	scroll-margin-top: 24px;
}
.legal .text-page .label:first-child {
	padding-top: 0;
	border-top: none;
}
.legal .text-page .label + p {
	margin-top: 8px;
}
.legal .text-page p:not(.label) + .label {
	margin-top: 26px;
}
.legal .text-page mark {
	background: rgba(245,185,80,.25);
	color: var(--text-primary);
	padding: 0 3px;
	border-radius: 3px;
}
@media (max-width: 959px) {
	.wrapper.legal {
		grid-template-columns: minmax(0,1fr);
	}
	.legal_nav {
		display: none;
	}
}
@media (max-width: 599px) {
	.legal_print {
		display: none !important;
	}
	.legal .content-card.text-page {
		padding: 18px;
	}
}
@media print {
	.legal_nav {
		display: none !important;
	}
	.wrapper.legal {
		display: block;
	}
	.legal .content-card.text-page {
		max-width: none;
		padding: 0;
		border: none;
		background: #fff;
		box-shadow: none;
	}
	.legal .text-page p,
	.legal .text-page .label {
		color: #000;
	}
	.legal .text-page .label {
		border-top-color: #ccc;
		break-after: avoid;
		page-break-after: avoid;
	}
	.legal .text-page p {
		break-inside: avoid;
		page-break-inside: avoid;
	}
}
/* aus 130-agent-spalte.css */
:root {
	/* Schiene: 22 px Luft, 41 px Kreis, 36 px zum Fensterrand; mit den
	   16 px Innenabstand der Seite stehen auch zum Inhalt rund 36 px */
	--agent-rail: 99px;
	--agent-width: 370px;
	/* Oberkante von Avatar und Chat-Kopf: buendig mit Titel und
	   Schaltflaechen der Seite (.page-head beginnt bei 12px, Knopf 40px hoch) */
	/* 21 px: der Agent-Kreis steht auf einer Hoehe mit dem App-Icon links
	   und dem Lizenzbanner (ui_kits/app/agent.jsx) */
	--agent-top: 21px;
}
/* aus 220-startseite-abgemeldet.css */
.landing {
	flex: 1;
	min-height: calc(100vh - 200px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.landing-card {
	width: 420px;
	max-width: 100%;
	padding: 36px 32px;
	text-align: center;
	border-radius: var(--radius-l);
	background: var(--surface-glass);
	backdrop-filter: var(--blur-glass);
	-webkit-backdrop-filter: var(--blur-glass);
	border: 1px solid var(--border-default);
}
.landing-card h1 {
	margin: 0;
	font: 600 22px/1.3 var(--font-display);
	letter-spacing: -0.01em;
	color: var(--text-primary);
}
.landing-card h1.wordmark {
	font-size: 34px;
	letter-spacing: -0.03em;
}
.landing-card p {
	margin: 10px 0 24px;
	font: var(--text-body);
	color: var(--text-muted);
}
.landing-card .button {
	padding: 10px 18px;
}
/* 404: Startseite und App nebeneinander (php/helper.php, not_found_actions) */
.landing-card .not_found_actions {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}
/* aus 240-kleine-bildschirme.css */
@media (max-width: 770px) {
	body:not(.static) .page-actions {
		width: 100%;
	}
}

@media (max-width: 770px) {
	body:not(.static) .page-actions .button {
		flex: 1;
	}
}

@media (max-width: 770px) {
	/* rechts bis an den Bildschirmrand, damit angeschnittene Reiter
	   zeigen, dass die Leiste weitergeht */
	body:not(.static) .tab_bar {
		margin-right: -16px;
	}
	body:not(.static) .slide_navi > ul {
		padding-right: 16px;
	}
}
@media (max-width: 770px) {
	body:not(.static) h1 {
		font-size: 24px;
	}
}
/* aus 400-abrechnung.css */
@media (min-width: 771px) {
	.heading > .page-head:first-child {
		margin-top: -6px;
	}
	.heading > .page-head:first-child .page-title h1 {
		margin-top: 2px;
	}
}
/* aus 410-admin-agent.css */
.testsystem_bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100000;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #D63B3B;
	color: #fff;
	font: 700 11px/1 "Instrument Sans", system-ui, sans-serif;
	letter-spacing: .12em;
	text-transform: uppercase;
	pointer-events: none;
}
/* Testsystem: Platz fuer den Balken, alles oben Fixierte rueckt um die
   Balkenhoehe nach unten, volle Hoehen werden entsprechend kuerzer */
body.testsystem {
	--testbar: 22px;
	padding-top: var(--testbar);
}
body.testsystem aside.nav {
	top: var(--testbar);
	height: calc(100% - var(--testbar));
}
body.testsystem aside.agent {
	top: var(--testbar);
}
/* Das Panel liegt relativ in der Spalte: nur kuerzer, nicht noch einmal
   nach unten (sonst steht Bill offen 22 px tiefer als eingeklappt) */
body.testsystem aside.agent,
body.testsystem aside.agent .agent_panel {
	height: calc(100vh - var(--testbar));
	height: calc(100dvh - var(--testbar));
}
body.testsystem .page > header {
	top: var(--testbar);
}
body.testsystem .anchor_nav {
	top: calc(20px + var(--testbar));
}
body.testsystem .legal_nav {
	top: calc(24px + var(--testbar));
}
body.testsystem .live_hint {
	top: calc(18px + var(--testbar));
}
@media (max-width: 770px) {
	/* Auf dem Handy ist die Leiste unten, der Balken oben betrifft sie nicht */
	body.testsystem:not(.static) aside.nav {
		top: auto;
		height: 62px;
	}
	body.testsystem:not(.static) .agent_fab {
		top: calc(24px + var(--testbar) + env(safe-area-inset-top, 0px));
	}
	body.testsystem:not(.static) .mail_preview_card {
		top: var(--testbar);
	}
}
/* aus 420-benachrichtigungen.css */
@media (max-width: 770px) {
	body:not(.static) aside.nav li.notif_toggle {
		display: none;
	}
	body:not(.static) .notif_fab {
		position: fixed;
		z-index: 580;
		top: calc(24px + env(safe-area-inset-top, 0px));
		right: 16px;
		width: 42px;
		height: 42px;
		display: grid;
		place-items: center;
		border-radius: var(--radius-m);
		color: var(--text-secondary);
		cursor: pointer;
	}
	body:not(.static) .notif_fab.with_agent {
		right: 65px;
	}
	body.no-agent:not(.static) .notif_fab.with_agent {
		right: 16px;
	}
	body:not(.static) .notif_fab.open {
		background: rgba(var(--accent-rgb),.08);
		color: var(--accent);
	}
	body:not(.static) .notif_fab .notif_count {
		top: 3px;
		right: 1px;
	}
	body.testsystem:not(.static) .notif_fab {
		top: calc(24px + var(--testbar) + env(safe-area-inset-top, 0px));
	}
	body:not(.static).agent-open .notif_fab {
		display: none;
	}
	/* Platz fuer Glocke und Agent rechts neben dem Logo */
	body.signed_in:not(.static) .page > header {
		padding-right: 122px;
	}
}
/* aus 450-feedback.css */
html.fb_open { overflow: hidden; }
.fb_overlay {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(var(--overlay-rgb), .55);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	animation: bc-fade-in .2s ease both;
}
.fb_dialog {
	width: 600px;
	max-width: 100%;
	max-height: 92vh;
	overflow: auto;
	box-sizing: border-box;
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	text-align: left;
	background: var(--surface-glass);
	-webkit-backdrop-filter: var(--blur-glass);
	backdrop-filter: var(--blur-glass);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-l);
	box-shadow: var(--shadow-pop);
	color: var(--text-primary);
	font-family: var(--font-body);
	animation: bc-pop-in .25s cubic-bezier(.3,.9,.35,1.1) both;
}
.fb_head { display: flex; align-items: flex-start; gap: 16px; }
.fb_head > div { flex: 1; min-width: 0; }
.fb_head h2 { margin: 0; font: 600 19px var(--font-display); letter-spacing: -.01em; color: var(--text-primary); text-transform: none; }
.fb_head p { margin: 4px 0 0; font: var(--text-small); line-height: 1.5; color: var(--text-muted); }
.fb_x {
	width: 30px;
	height: 30px;
	flex-shrink: 0;
	display: grid;
	place-items: center;
	padding: 0;
	cursor: pointer;
	background: transparent;
	border: none;
	border-radius: var(--radius-s);
	color: var(--text-muted);
}
.fb_x:hover { color: var(--text-primary); }
.fb_form, .fb_shots, .fb_contact { display: flex; flex-direction: column; }
.fb_form { gap: 20px; }
.fb_shots { gap: 8px; }
.fb_field { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; }
.fb_label { font: 500 12px var(--font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.fb_label i { font-style: normal; color: var(--accent); }
.fb_dialog input[type=text],
.fb_dialog input[type=email],
.fb_dialog input[type=tel],
.fb_dialog textarea {
	width: 100%;
	box-sizing: border-box;
	height: 40px;
	margin: 0;
	padding: 0 12px;
	background: var(--surface-raised);
	color: var(--text-primary);
	font: 400 14px var(--font-body);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-m);
	outline: none;
	box-shadow: none;
}
.fb_dialog textarea { height: auto; min-height: 132px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.fb_dialog input:focus, .fb_dialog textarea:focus { border-color: var(--accent); box-shadow: var(--glow-border); }
.fb_field.invalid input, .fb_field.invalid textarea { border-color: var(--danger); }
.fb_error { display: none; font: 400 12px var(--font-body); letter-spacing: normal; text-transform: none; color: var(--danger); }
.fb_field.invalid .fb_error { display: block; }
.fb_drop {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 18px 14px;
	cursor: pointer;
	border: 1px dashed var(--border-strong);
	border-radius: var(--radius-m);
	color: var(--text-secondary);
	font: 500 13px/1.45 var(--font-body);
	text-align: center;
	transition: border-color .15s, background .15s;
}
.fb_drop em { font-style: normal; color: var(--accent); }
.fb_drop svg { flex-shrink: 0; }
.fb_drop:hover, .fb_drop:focus-visible { border-color: var(--accent); outline: none; }
.fb_drop.over { border-color: var(--accent); background: rgba(var(--accent-rgb), .06); color: var(--accent); }
.fb_hint { font: 400 12px var(--font-body); color: var(--text-muted); }
.fb_hint.warn { color: var(--warning); }
.fb_grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.fb_grid:empty { display: none; }
.fb_tile {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border: 1px solid var(--border-default);
	border-radius: var(--radius-s);
	background: var(--surface-raised);
}
.fb_tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fb_tile_x {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 22px;
	height: 22px;
	padding: 0;
	display: grid;
	place-items: center;
	cursor: pointer;
	border: none;
	border-radius: 50%;
	background: rgba(0,0,0,.6);
	color: #fff;
}
.fb_contact { gap: 12px; padding-top: 16px; border-top: 1px solid var(--border-default); }
.fb_contact_head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fb_contact_head > span:first-child { font: 600 14px var(--font-body); color: var(--text-primary); }
.fb_source { display: none; font: 400 12px var(--font-body); color: var(--text-muted); }
.fb_dialog.prefilled .fb_source { display: inline; }
.fb_row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.fb_note { font: 400 12px/1.5 var(--font-body); color: var(--text-muted); }
.fb_hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; opacity: 0; }
.fb_alert {
	display: none;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border: 1px solid rgba(255,69,58,.45);
	border-radius: var(--radius-m);
	background: rgba(255,69,58,.1);
	font: 500 13px/1.45 var(--font-body);
	color: var(--danger);
}
.fb_alert.show { display: flex; }
.fb_alert svg { flex-shrink: 0; }
.fb_foot { display: flex; justify-content: flex-end; align-items: center; gap: 12px; flex-wrap: wrap; }
.fb_foot .button { margin: 0; display: inline-flex; align-items: center; gap: 8px; }
.fb_foot .button[disabled] { opacity: .6; pointer-events: none; }
.fb_done { display: none; flex-direction: column; align-items: center; gap: 12px; padding: 18px 0 6px; text-align: center; }
.fb_done > svg { color: var(--accent); }
.fb_done > b { font: 600 16px var(--font-display); color: var(--text-primary); }
.fb_done > span { max-width: 420px; font: 400 14px/1.5 var(--font-body); color: var(--text-muted); }
.fb_done .fb_foot { align-self: stretch; margin-top: 8px; }
.fb_dialog.done .fb_form { display: none; }
.fb_dialog.done .fb_done { display: flex; }
@media (max-width: 600px) {
	.fb_dialog { padding: 22px 18px; max-height: calc(100vh - 32px); }
	.fb_row { grid-template-columns: 1fr; }
}
.reg_wrap { display: flex; justify-content: center; padding: 40px 16px 64px; }
.reg_card {
	width: 520px;
	max-width: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 36px 32px;
	background: var(--surface-glass);
	-webkit-backdrop-filter: var(--blur-glass);
	backdrop-filter: var(--blur-glass);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-l);
	text-align: left;
}
.reg_card h1 { margin: 0; font: 600 22px var(--font-display); letter-spacing: -.01em; color: var(--text-primary); }
.reg_sub { margin: -6px 0 4px; font: var(--text-body); color: var(--text-muted); }
/* Absaetze auf oeffentlichen Seiten haben sonst padding 0 (.landing .lp p) */
.reg_wrap .reg_card p.reg_coupon { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 14px; border: 1px solid rgba(var(--accent-rgb),.45); border-radius: var(--radius-m); background: rgba(var(--accent-rgb),.08); font: 500 13px var(--font-body); color: var(--text-secondary); }
.reg_coupon svg { color: var(--accent); flex-shrink: 0; }
.reg_coupon b { color: var(--text-primary); }
.reg_row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.reg_field { display: flex; flex-direction: column; gap: 6px; margin: 0; min-width: 0; }
.reg_field > span { font: 500 12px var(--font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.reg_field > span i { font-style: normal; color: var(--accent); }
.reg_card input[type=text],
.reg_card input[type=email],
.reg_card input[type=password] {
	width: 100%;
	box-sizing: border-box;
	height: 40px;
	margin: 0;
	padding: 0 12px;
	background: var(--surface-raised);
	color: var(--text-primary);
	font: 400 14px var(--font-body);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-m);
	outline: none;
}
.reg_card input:focus { border-color: var(--accent); box-shadow: var(--glow-border); }
.reg_field em, .reg_terms em { display: none; font: 400 12px var(--font-body); font-style: normal; color: var(--danger); }
.reg_field.invalid input { border-color: var(--danger); }
.reg_field.invalid em { display: block; }
.reg_terms { display: flex; align-items: flex-start; gap: 10px; margin: 0; font: 400 13px/1.5 var(--font-body); color: var(--text-secondary); text-transform: none; letter-spacing: normal; cursor: pointer; }
.reg_terms input { accent-color: var(--accent); width: 15px; height: 15px; margin: 3px 0 0; flex-shrink: 0; }
.reg_terms.invalid span { color: var(--danger); }
.reg_hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; opacity: 0; }
.reg_wrap .reg_card p.reg_alert { margin: 0; padding: 10px 14px; border: 1px solid rgba(255,69,58,.45); border-radius: var(--radius-m); background: rgba(255,69,58,.1); font: 500 13px/1.45 var(--font-body); color: var(--danger); }
.reg_card .reg_send { align-self: stretch; justify-content: center; margin: 4px 0 0; }
.reg_card .reg_send[disabled] { opacity: .6; pointer-events: none; }
.reg_gone { text-align: center; align-items: center; }
@media (max-width: 600px) { .reg_card { padding: 28px 20px; } }
/* Startseite billcreator.de (pages/templates/start.html, js/landing.js),
   nach dem Entwurf "Billcreator Marketingseite" in Claude Design.
   Nur was die Anwendung nicht braucht: Schriften, Farben, Schaltflaechen
   (.button), Reiter (.slide_navi), Eingabefelder und der Wellenhintergrund
   (#bg-waves) kommen aus css/fonts.css und css/index.css. Alles ist auf
   body.landing begrenzt. */

html:has(body.landing) {
	color-scheme: dark;
	scroll-behavior: smooth;
	scroll-padding-top: 84px;
}
/* index.css gibt .landing (fruehere Abmeldeseite) Innenabstand und ein
   zentrierendes Flex-Layout; die Startseite laeuft wie im Entwurf als Block */
body.landing {
	display: block;
	min-height: 0;
	padding: 0;
}
@keyframes lp-pulse {
	0%, 100% { box-shadow: 0 0 10px rgba(0,208,155,.55); }
	50% { box-shadow: 0 0 22px rgba(0,208,155,.85); }
}
.landing .lp {
	position: relative;
	z-index: 1;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	/* body ist aus index.css ein Flex-Container; ohne min-width:0 waechst
	   .lp auf die Breite des 1280 px breiten Videos und wird abgeschnitten */
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
}
.landing .lp p,
.landing .lp ul,
.landing .lp ol {
	margin: 0;
	padding: 0;
}
.landing .lp .accent {
	color: var(--accent);
}
.landing .lp svg {
	flex-shrink: 0;
}

/* Hell und dunkel ---------------------------------------------------------
   Die Startseite folgt dem Modus der App (data-theme auf <html>, Cookie
   theme). Feste Flaechen der Seite stehen hier als Variablen mit einem Wert
   je Modus, die Tokens selbst kommen aus css/index.css. */
.landing {
	--lp-head-bg: rgba(10,12,11,.55);
	--lp-menu-bg: rgba(10,12,11,.92);
	--lp-panel-bg: rgba(16,20,19,.85);
	--lp-pro-bg: #0C100F;
	--lp-tile-bg: #0E1312;
	--lp-form-bg: rgba(12,16,15,.9);
	--lp-seg-bar: rgba(242,245,244,.12);
	--lp-card-shadow: rgba(0,0,0,.55);
	--lp-film-shadow: 0 40px 120px rgba(0,0,0,.6),0 0 60px rgba(0,208,155,.08);
	--lp-shot-shadow: 0 40px 120px rgba(0,0,0,.55);
}
[data-theme="light"] .landing {
	--lp-head-bg: rgba(238,242,241,.75);
	--lp-menu-bg: rgba(238,242,241,.97);
	--lp-panel-bg: rgba(255,255,255,.88);
	--lp-pro-bg: #FFFFFF;
	--lp-tile-bg: var(--surface-raised);
	--lp-form-bg: rgba(255,255,255,.9);
	--lp-seg-bar: rgba(15,21,19,.12);
	--lp-card-shadow: rgba(15,21,19,.12);
	/* Ohne Schatten: er laege sonst ueber den Abschnittsbalken und Reitern */
	--lp-film-shadow: none;
	--lp-shot-shadow: none;
}
/* Dunkle Inseln: Film, Screenshots und Code-Beispiel zeigen die App dunkel,
   auch auf der hellen Seite. Die dunklen Tokens aus :root in index.css. */
.landing .lp_dark {
	color-scheme: dark;
	--surface-page: #0A0C0B; --surface-card: #101413; --surface-raised: #141A18;
	--surface-glass: rgba(16,20,19,.30);
	--border-default: #1E2523; --border-strong: #2A332F;
	--text-primary: #F2F5F4; --text-secondary: #B9C6C2; --text-muted: #8FA09B;
	--accent: #00D09B; --accent-hover: #39E0B4; --accent-pressed: #00B586; --on-accent: #06231B;
	--accent-rgb: 0,208,155;
	--glow-accent: 0 0 18px rgba(0,208,155,.55);
	--glow-border: 0 0 10px rgba(0,208,155,.65), 0 0 26px rgba(0,208,155,.3), inset 0 0 8px rgba(0,208,155,.22);
	--danger: #F26D6D; --warning: #F5B950;
	color: var(--text-primary);
}
/* Wellen: im hellen Modus daempft js/waves.js je Punkt (wie im Entwurf),
   die Daempfung des ganzen Canvas aus index.css entfaellt hier */
[data-theme="light"] body.landing #bg-waves {
	opacity: 1;
}
/* Schalter hell / dunkel im Kopf: breit vor "Zur App", schmal vor dem Menue */
.landing .lp_theme {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	margin-right: -20px;
	padding: 0;
	display: grid;
	place-items: center;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-m);
	background: transparent;
	color: var(--text-secondary);
	cursor: pointer;
	transition: border-color .15s, color .15s, box-shadow .15s;
}
.landing .lp_theme:hover {
	border-color: var(--accent);
	color: var(--accent);
	box-shadow: var(--glow-border);
}
.landing .lp_theme .moon,
[data-theme="light"] .landing .lp_theme .sun {
	display: none;
}
[data-theme="light"] .landing .lp_theme .moon {
	display: block;
}

/* Kopf ------------------------------------------------------------------ */
.landing .lp_head {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	background: var(--lp-head-bg);
	backdrop-filter: var(--blur-glass);
	-webkit-backdrop-filter: var(--blur-glass);
	border-bottom: 1px solid var(--border-default);
}
/* Inhalt 1200 px wie das Video (.lp_stage), Logo und Knoepfe fluchten
   links und rechts mit dem Videocontainer */
.landing .lp_head_in {
	max-width: 1248px;
	margin: 0 auto;
	height: 68px;
	padding: 0 24px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 32px;
}
.landing .lp_brand {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}
.landing .lp_brand img {
	display: block;
	border-radius: 9px;
}
.landing .lp_word {
	font: 600 20px var(--font-display);
	letter-spacing: -.03em;
	color: var(--text-primary);
}
.landing .lp_word span {
	color: var(--accent);
}
.landing .lp_nav {
	display: flex;
	gap: 28px;
	flex: 1;
}
.landing .lp_nav a,
.landing .lp_menu a.lp_menu_link {
	font: 500 14px var(--font-body);
	color: var(--text-secondary);
}
.landing .lp_nav a:hover,
.landing .lp_menu a.lp_menu_link:hover {
	color: var(--text-primary);
}
.landing .lp_actions {
	display: flex;
	gap: 12px;
	align-items: center;
	flex-wrap: wrap;
}
.landing .lp_burger {
	display: none;
	margin-left: auto;
	width: 44px;
	height: 44px;
	padding: 0;
	place-items: center;
	border: 1px solid var(--border-strong);
	color: var(--text-secondary);
}
.landing .lp_menu {
	display: none;
	flex-direction: column;
	gap: 4px;
	padding: 12px 24px 20px;
	border-top: 1px solid var(--border-default);
	background: var(--lp-menu-bg);
}
.landing .lp_menu a.lp_menu_link {
	padding: 12px 0;
	font-size: 16px;
}
.landing .lp_menu .lp_actions {
	margin-top: 12px;
}
@media (max-width: 979px) {
	.landing .lp_head_in > .lp_nav,
	.landing .lp_head_in > .lp_actions {
		display: none;
	}
	.landing .lp_burger {
		display: grid;
		margin-left: 0;
	}
	.landing .lp_theme {
		width: 44px;
		height: 44px;
		margin-left: auto;
	}
	.landing .lp_head.open .lp_menu {
		display: flex;
	}
}

/* Abschnitte ------------------------------------------------------------ */
.landing .lp_sec {
	padding: clamp(80px,10vw,128px) 24px 0;
}
.landing .lp_in {
	max-width: 1200px;
	margin: 0 auto;
}
.landing .lp_intro {
	max-width: 720px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 48px;
}
.landing .lp_kicker {
	font: 600 12px var(--font-body);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--accent);
}
.landing .lp h2.lp_h2 {
	font: 600 clamp(32px,4.4vw,52px)/1.06 var(--font-display);
	letter-spacing: -.03em;
	text-wrap: balance;
}
.landing .lp_glass {
	background: var(--surface-glass);
	backdrop-filter: var(--blur-glass);
	-webkit-backdrop-filter: var(--blur-glass);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-l);
}
.landing .lp_small {
	font: var(--text-small);
	color: var(--text-secondary);
}
.landing .lp_muted {
	font: var(--text-small);
	color: var(--text-muted);
}
.landing .lp_pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 6px 14px;
	border: 1px solid rgba(0,208,155,.35);
	border-radius: 999px;
	background: rgba(0,208,155,.06);
	font: 500 13px var(--font-body);
	color: var(--text-secondary);
}
.landing .lp_pill i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: var(--glow-accent);
}

/* Hero ------------------------------------------------------------------ */
.landing .lp_hero {
	padding: 148px 24px 40px;
	position: relative;
}
.landing .lp_hero_in {
	max-width: 960px;
	margin: 0 auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}
.landing .lp h1.lp_h1 {
	font: 600 clamp(40px,6.4vw,80px)/1.02 var(--font-display);
	letter-spacing: -.035em;
	text-wrap: balance;
}
.landing .lp_lead {
	max-width: 640px;
	font: 400 clamp(16px,1.6vw,19px)/1.55 var(--font-body);
	color: var(--text-secondary);
	text-wrap: pretty;
}
.landing .lp_cta {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 4px;
}
.landing .lp_stage {
	max-width: 1200px;
	margin: 64px auto 0;
	position: relative;
}
.landing .lp_stage_glow {
	position: absolute;
	left: 10%;
	right: 10%;
	top: -40px;
	height: 260px;
	background: radial-gradient(ellipse at center,rgba(0,208,155,.16),rgba(0,208,155,0) 70%);
	pointer-events: none;
}
.landing .lp_mock {
	position: relative;
	width: 100%;
	aspect-ratio: 1280/720;
	overflow: hidden;
	border: 1px solid var(--border-strong);
	border-radius: 18px;
	background: #0A0C0B;
	box-shadow: var(--lp-film-shadow);
}
.landing .lp_mock_in {
	position: absolute;
	left: 0;
	top: 0;
	width: 1280px;
	height: 720px;
	transform-origin: 0 0;
	text-align: left;
	overflow: hidden;
	background: #0A0C0B;
}
.landing .lp_segs {
	position: relative;
	margin-top: 14px;
	display: flex;
	gap: 6px;
	padding: 0 2px;
}
.landing .lp_segs button.lp_seg {
	position: relative;
	min-width: 0;
	height: 22px;
	padding: 0;
	border: none;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	display: flex;
	align-items: center;
}
.landing .lp_seg_bar {
	position: relative;
	display: block;
	width: 100%;
	height: 4px;
	border-radius: 2px;
	background: var(--lp-seg-bar);
	overflow: hidden;
}
.landing .lp_seg_fill {
	position: absolute;
	inset: 0;
	background: var(--accent);
	box-shadow: var(--glow-accent);
	transform-origin: left center;
	transform: scaleX(0);
}
.landing .lp_tip {
	position: absolute;
	opacity: 0;
	transition: opacity .3s ease-out;
	display: flex;
	align-items: center;
	gap: 10px;
	border-radius: 999px;
	background: rgba(10,12,11,.88);
	border: 1px solid rgba(0,208,155,.4);
	font-family: var(--font-body);
	font-weight: 600;
	color: var(--text-primary);
	white-space: nowrap;
	pointer-events: none;
	z-index: 45;
}
.landing .lp_tip b {
	font-family: var(--font-mono);
	font-weight: 500;
	color: var(--accent);
}
.landing .lp_mock [data-chip] {
	transition: filter .3s ease-out;
}

/* Vorteile -------------------------------------------------------------- */
.landing .lp_grid4 {
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
	gap: 20px;
}
.landing .lp_card {
	padding: 28px 24px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.landing .lp_icon {
	width: 44px;
	height: 44px;
	border-radius: var(--radius-m);
	display: grid;
	place-items: center;
	border: 1px solid rgba(0,208,155,.4);
	background: rgba(0,208,155,.06);
	color: var(--accent);
}
.landing .lp h3.lp_card_h {
	font: 600 20px/1.25 var(--font-display);
	letter-spacing: -.015em;
}
.landing .lp_card p {
	font: var(--text-body);
	color: var(--text-secondary);
}

/* Einblicke ------------------------------------------------------------- */
.landing #einblicke .slide_navi {
	margin-bottom: 24px;
}
.landing .lp_shot {
	position: relative;
	width: 100%;
	aspect-ratio: 16/9;
	overflow: hidden;
	border: 1px solid var(--border-strong);
	border-radius: 18px;
	background: #0A0C0B;
	box-shadow: var(--lp-shot-shadow);
}
.landing .lp_shot img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.landing .lp_shot_meta {
	margin-top: 16px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px 24px;
}
.landing .lp_shot_meta .lp_caption {
	font: var(--text-body);
	color: var(--text-secondary);
}

/* Funktionen ------------------------------------------------------------ */
.landing .lp_feats {
	display: grid;
	grid-template-columns: repeat(auto-fill,minmax(260px,1fr));
	gap: 1px;
	background: var(--border-default);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-l);
	overflow: hidden;
}
.landing .lp_feat {
	background: var(--surface-page);
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.landing .lp h3.lp_feat_h {
	font: 600 17px var(--font-display);
	letter-spacing: -.01em;
}

/* Spalten, Fliesstext und Punkt (frueher im Pro-Block, der am 17.10.2026 entfiel).
   lp_col und lp_text nutzt die Einladung, lp_orb die Bankanbindung. */
.landing .lp_col {
	display: flex;
	flex-direction: column;
	gap: 22px;
	min-width: 0;
}
.landing .lp_text {
	max-width: 460px;
	font: 400 17px/1.6 var(--font-body);
	color: var(--text-secondary);
	text-wrap: pretty;
}
.landing .lp_orb {
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	border-radius: 50%;
	background: radial-gradient(circle,#39E0B4 0 22%,rgba(0,208,155,.35) 23% 60%,rgba(0,208,155,0) 61%);
	border: 1px solid rgba(0,208,155,.5);
	animation: lp-pulse 2.4s ease-in-out infinite;
}
/* Ablauf ---------------------------------------------------------------- */
.landing .lp_tl {
	list-style: none;
	max-width: 720px;
	display: flex;
	flex-direction: column;
}
.landing .lp_tl li {
	position: relative;
	margin-left: 4px;
	padding: 0 0 36px 32px;
	border-left: 1px solid var(--border-strong);
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.landing .lp_tl li:last-child {
	padding-bottom: 0;
	border-left-color: transparent;
}
.landing .lp_tl [data-tl-fill] {
	position: absolute;
	left: -1px;
	top: 8px;
	bottom: -8px;
	width: 1px;
	background: var(--accent);
	box-shadow: 0 0 8px rgba(0,208,155,.7);
	transform-origin: center top;
	transform: scaleY(0);
}
.landing .lp_tl [data-tl-echo] {
	position: absolute;
	top: -1px;
	left: -10px;
	width: 19px;
	height: 19px;
	border-radius: 50%;
	border: 1.5px solid var(--accent);
	opacity: 0;
	pointer-events: none;
}
.landing .lp_tl [data-tl-dot] {
	position: absolute;
	top: 4px;
	left: -5px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: var(--glow-accent);
	z-index: 1;
}
.landing .lp_nr {
	font: 500 13px var(--font-mono);
	color: var(--accent);
}
.landing .lp h3.lp_tl_h {
	font: 600 19px var(--font-display);
	letter-spacing: -.01em;
}

/* Bill (frueher Agent) ----------------------------------------------------------------- */
.landing .lp_split {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(min(100%,420px),1fr));
	gap: 56px;
	align-items: center;
}
.landing .lp_checks b {
	color: var(--text-primary);
	font-weight: 600;
}

/* Bill: Chat mit drei Beispielen und Max-Block (Uebergabe 17.10.2026, js/landing.js bill_demo) */
.landing .lp_ag_panel{background:var(--surface-glass);backdrop-filter:var(--blur-glass);-webkit-backdrop-filter:var(--blur-glass);border:1px solid var(--border-strong);border-radius:var(--radius-l);padding:20px;box-shadow:0 30px 90px var(--lp-card-shadow);min-width:0}
.landing .lp_ag_head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.landing .lp_ag_tabs{display:flex;gap:4px;padding:3px;border-radius:999px;border:1px solid var(--border-default);background:var(--surface-raised)}
.landing .lp_ag_tab{position:relative;height:30px;padding:0 12px;border:none;border-radius:999px;background:transparent;cursor:pointer;font:600 12.5px var(--font-body);transition:color .2s}
.landing .lp_ag_tab{isolation:isolate}
/* Fortschritt als Füllung der aktiven Kapsel statt Linie unter der Schrift */
.landing .lp_ag_tab[aria-pressed="true"]{box-shadow:inset 0 0 0 1px rgba(0,208,155,.4)}
.landing .lp_ag_tabline{position:absolute;inset:0;z-index:-1;border-radius:inherit;overflow:hidden}
/* Fuellung setzt bill_demo per transform, gleitet zwischen den Schritten */
.landing .lp_ag_prog{display:block;height:100%;width:100%;background:rgba(0,208,155,.16);transform:scaleX(0);transform-origin:0 50%;transition:transform .25s linear}
.landing .lp_ag_tab[aria-pressed="false"] .lp_ag_tabline{display:none}
.landing .lp_ag_lead{margin:0;font:400 17px/1.6 var(--font-body);color:var(--text-secondary);text-wrap:pretty;animation:lp-ag-fade .5s ease both}
@keyframes lp-ag-fade{from{opacity:0}to{opacity:1}}
/* Max-Block: Terminal mit Claude Code und Key-Karte */
.landing .lp_max{box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,5vw,64px);align-items:center;padding:clamp(24px,4vw,44px);border-radius:24px;border:1px solid var(--border-strong);background:radial-gradient(ellipse 60% 80% at 100% 0%,rgba(0,208,155,.12),rgba(0,208,155,0) 60%),var(--surface-glass);backdrop-filter:var(--blur-glass);-webkit-backdrop-filter:var(--blur-glass)}
@media(max-width:900px){.landing .lp_max{grid-template-columns:minmax(0,1fr)}}
.landing .lp_term{border-radius:14px;overflow:hidden;background:#0A0C0B;border:1px solid #1E2523;box-shadow:0 24px 70px rgba(0,0,0,.45)}
.landing .lp_term_bar{display:flex;align-items:center;gap:7px;padding:10px 14px;border-bottom:1px solid #1E2523;font:500 12px var(--font-body);color:#8FA09B}
.landing .lp_term_bar i{width:10px;height:10px;border-radius:50%;background:#2A332F}.landing .lp_term_bar span{margin-left:8px}
.landing .lp_term_body{padding:16px 18px;overflow-x:auto;font:400 12.5px/1.75 var(--font-mono);color:#B9C6C2}
.landing .lp_term_body .l{white-space:pre}
.landing .lp_term .m{color:#8FA09B}.landing .lp_term .a{color:#00D09B}.landing .lp_term .y{color:#F5B950}
.landing .lp_key{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;border:1px solid var(--border-strong);background:var(--surface-raised)}
.landing .lp_key_ic{width:36px;height:36px;flex-shrink:0;border-radius:10px;display:grid;place-items:center;border:1px solid rgba(0,208,155,.45);background:rgba(0,208,155,.08);color:var(--accent)}
.landing .lp_key .w{flex:1;min-width:0;display:flex;flex-direction:column}.landing .lp_key .w b{font:600 14px var(--font-body)}.landing .lp_key .w small{font:400 12px var(--font-mono);color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.landing .lp_key_tag{flex-shrink:0;padding:4px 10px;border-radius:999px;border:1px solid var(--accent);color:var(--accent);font:600 11px var(--font-body)}
/* Agent-Chat wie im Designsystem (ui_kits/app/agent.jsx): Bill mit Puls-Punkt, Nutzer mit Avatar, Sprechblasen 13 px,
Tabellenzeilen unter einem Trennstrich, Dateien als Zeilen mit Vorschau, darunter Zeit, Dauer und Daumen.
Nachrichten erscheinen nacheinander (--d), vor jeder Antwort kurz „Bill arbeitet …“ */
.landing .lp_ag_chat{display:flex;flex-direction:column;height:470px;overflow-y:auto;scrollbar-width:none;padding:18px 0 12px 0;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 28px);mask-image:linear-gradient(to bottom,transparent 0,#000 28px)}
.landing .lp_ag_chat::-webkit-scrollbar{display:none}
.landing .lp_ag_m{display:flex;flex-shrink:0;gap:8px;align-items:flex-end;overflow:hidden;padding:0 6px 6px;animation:lp-ag-in .5s cubic-bezier(.3,.9,.35,1) var(--d) both}
.landing .lp_ag_m.u{flex-direction:row-reverse}
@keyframes lp-ag-in{0%{opacity:0;max-height:0;margin-top:0;transform:translateY(14px) scale(.97)}35%{max-height:600px;margin-top:12px}100%{opacity:1;max-height:600px;margin-top:12px;transform:none}}
.landing .lp_ag_col{max-width:82%;display:flex;flex-direction:column;align-items:flex-start}
.landing .lp_ag_col.u{align-items:flex-end}
.landing .lp_ag_b{width:100%;box-sizing:border-box;padding:10px 12px;border-radius:var(--radius-m);background:var(--surface-glass);border:1px solid var(--border-default)}
.landing .lp_ag_b.u{background:rgba(0,208,155,.07);border-color:rgba(0,208,155,.3)}
.landing .lp_ag_b .t{font:400 13px/1.5 var(--font-body);color:var(--text-secondary);text-align:left}
.landing .lp_ag_rows{margin-top:8px;border-top:1px solid var(--border-default);padding-top:6px}
.landing .lp_ag_rows div{display:flex;justify-content:space-between;gap:14px;font:400 12px/1.7 var(--font-body);color:var(--text-secondary)}
.landing .lp_ag_rows span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.landing .lp_ag_rows .v{font-variant-numeric:tabular-nums;color:var(--text-primary);white-space:nowrap}
.landing .lp_ag_files{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.landing .lp_ag_file{display:flex;align-items:center;gap:9px;padding:5px 8px 5px 5px;border:1px solid var(--border-default);border-radius:var(--radius-s);background:var(--surface-raised);min-width:0}
.landing .lp_ag_file .n{flex:1;min-width:0;font:500 12px var(--font-body);color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.landing .lp_ag_file .s{flex-shrink:0;font:400 11px var(--font-body);color:var(--text-muted)}
.landing .lp_ag_fz{width:26px;height:32px;flex-shrink:0;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:4px;border:1px solid var(--border-strong);background:var(--surface-raised);font:700 8px var(--font-body);letter-spacing:.04em}
.landing .lp_ag_fz.img{display:block;object-fit:cover;background:#fff}
.landing .lp_ag_fl{display:flex;align-items:center;gap:8px;margin-top:8px;border-top:1px solid var(--border-default);padding-top:8px;font:400 12px var(--font-body);color:var(--text-secondary)}
.landing .lp_ag_fl span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.landing .lp_ag_fl a{color:var(--accent);font-weight:600}
.landing .lp_ag_meta{display:flex;align-items:center;gap:10px;margin-top:4px;width:100%;font:400 10px var(--font-body);color:var(--text-muted)}
.landing .lp_ag_col.u .lp_ag_meta{justify-content:flex-end}
.landing .lp_ag_meta .dur{display:inline-flex;align-items:center;gap:3px}
.landing .lp_ag_thumbs{display:inline-flex;gap:2px;margin-left:auto}
.landing .lp_ag_thumbs button{width:20px;height:20px;display:grid;place-items:center;border:none;background:transparent;color:var(--text-muted);padding:0;border-radius:var(--radius-s)}
.landing .lp_ag_pulse{display:grid;place-items:center;box-sizing:border-box;border-radius:50%;background:var(--surface-raised);border:1px solid var(--accent);box-shadow:0 0 10px rgba(0,208,155,.25)}
.landing .lp_ag_pulse svg{display:block}
.landing .lp_ag_ring{transform-origin:60px 60px;animation:lp-ag-ringk 1.5s ease-out infinite}
@keyframes lp-ag-ringk{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(3.2)}}
.landing .lp_ag_av{width:26px;min-width:26px;height:26px;box-sizing:border-box;display:grid;place-items:center;border-radius:50%;background:var(--surface-raised);border:1px solid var(--border-strong);font:700 8.8px var(--font-display);letter-spacing:-.02em}
.landing .lp_ag_av b{color:var(--text-primary)}.landing .lp_ag_av i{font-style:normal;color:var(--accent)}
.landing .lp_ag_work{display:flex;flex-shrink:0;gap:8px;padding:0 6px 6px;align-items:flex-end;overflow:hidden;opacity:0;max-height:0;animation:lp-ag-workk 1.4s ease var(--d) both}
@keyframes lp-ag-workk{0%{opacity:0;max-height:0;margin-top:0}15%,88%{opacity:1;max-height:60px;margin-top:12px}100%{opacity:0;max-height:0;margin-top:0}}
.landing .lp_ag_b.w{width:auto;display:flex;align-items:center;gap:10px;font:400 13px var(--font-body);color:var(--text-secondary)}
.landing .lp_ag_b.w .dots{display:inline-flex;gap:3px}
.landing .lp_ag_b.w .dots i{width:5px;height:5px;border-radius:50%;background:var(--accent);animation:lp-ag-punkt 1.2s ease-in-out infinite}
.landing .lp_ag_b.w .dots i:nth-child(2){animation-delay:.15s}.landing .lp_ag_b.w .dots i:nth-child(3){animation-delay:.3s}
@keyframes lp-ag-punkt{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}
.landing .lp_ag_input{margin-top:14px;padding:10px 12px;border-radius:var(--radius-m);border:1px solid var(--border-default);background:var(--surface-glass)}
.landing .lp_ag_input .ph{height:39px;font:400 13px/1.5 var(--font-body);color:var(--text-muted)}
.landing .lp_ag_input .bar{display:flex;align-items:center;gap:6px;margin-top:6px}
.landing .lp_ag_input .chip{font:600 11px var(--font-body);color:var(--text-secondary);background:var(--surface-raised);border:1px solid var(--border-strong);border-radius:var(--radius-s);padding:3px 8px}
.landing .lp_ag_input .ic{width:28px;height:28px;display:grid;place-items:center;color:var(--text-muted)}.landing .lp_ag_input .ic.acc{color:var(--text-muted)}
/* Vorgemerkte Aktionen (row.agent_message.html, css/app.css .plan): Bestätigung über Ok, danach Status und Haken */
.landing .lp_pl{margin-top:10px;padding-top:10px;border-top:1px solid var(--border-default)}
.landing .lp_pl_g+.lp_pl_g{margin-top:10px}
.landing .lp_pl_h{display:flex;align-items:center;gap:8px;margin-bottom:4px;font:600 12px/1.4 var(--font-body);color:var(--text-primary)}
.landing .lp_pl_h .cnt{min-width:18px;padding:0 6px;border-radius:9px;background:rgba(0,208,155,.14);color:var(--accent);font:600 11px/18px var(--font-body);text-align:center}
.landing .lp_pl table{width:100%;border-collapse:collapse;table-layout:fixed;font:400 12px/1.45 var(--font-body)}
.landing .lp_pl td{padding:6px 0;border-bottom:1px solid var(--border-default);vertical-align:top}
.landing .lp_pl tr:last-child td{border-bottom:none}
.landing .lp_pl td.e span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.landing .lp_pl .l{color:var(--text-primary)}.landing .lp_pl .d{margin-top:1px;font-size:11px;line-height:1.4;color:var(--text-muted);white-space:normal}
.landing .lp_pl td.s{width:18px;padding-left:8px;text-align:right;color:var(--accent);opacity:0;transition:opacity .3s}
.landing .lp_pl.is-done td.s{opacity:1}
.landing .lp_pl_a{display:none;justify-content:flex-end;gap:8px;margin-top:12px}
.landing .lp_pl.is-pending .lp_pl_a{display:flex}
.landing .lp_pl_a .btn{padding:6px 16px;border-radius:var(--radius-m);border:1px solid rgba(242,245,244,.45);background:transparent;color:var(--text-secondary);font:600 13px var(--font-body);cursor:pointer;transition:border-color .15s,color .15s,box-shadow .15s,background .15s}
.landing .lp_pl_a .btn:hover{border-color:var(--text-primary);color:var(--text-primary);box-shadow:0 0 10px rgba(242,245,244,.5),0 0 26px rgba(242,245,244,.22),inset 0 0 8px rgba(242,245,244,.18)}
html[data-theme="light"] .landing .lp_pl_a .btn{border-color:var(--border-strong)}
html[data-theme="light"] .landing .lp_pl_a .btn:hover{border-color:var(--text-primary);box-shadow:none}
.landing .lp_pl_a .btn.p{border-color:var(--accent);color:var(--accent);animation:lp-pl-wait 2.4s ease-in-out 1.5s infinite}
.landing .lp_pl_a .btn.p:hover{background:rgba(0,208,155,.08);box-shadow:var(--glow-border);animation:none}
/* Ok lädt dezent zum Klicken ein */
@keyframes lp-pl-wait{0%,100%{box-shadow:0 0 0 rgba(0,208,155,0)}50%{box-shadow:0 0 14px rgba(0,208,155,.45)}}
.landing .lp_pl_st{display:none;margin-top:10px;font:500 12px var(--font-body);color:var(--text-muted);animation:lp-ag-fade .3s ease both}
.landing .lp_pl.is-run .lp_pl_st.run,.landing .lp_pl.is-done .lp_pl_st.done,.landing .lp_pl.is-cancel .lp_pl_st.cx{display:block}
@media(prefers-reduced-motion:reduce){.landing .lp_ag_m,.landing .lp_ag_lead{animation:none}.landing .lp_ag_m{margin-top:12px}.landing .lp_ag_work{display:none}.landing .lp_ag_ring{animation:none;opacity:0}.landing .lp_ag_tab[aria-pressed="true"]{background:rgba(0,208,155,.12)}.landing .lp_pl_a .btn.p{animation:none}}
/* Preise ---------------------------------------------------------------- */
.landing .lp_prices {
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(min(100%,340px),1fr));
	gap: 24px;
	align-items: stretch;
}
.landing .lp_price {
	padding: 32px 28px;
	display: flex;
	flex-direction: column;
	gap: 22px;
}
.landing .lp_price.pro {
	background: rgba(0,208,155,.04);
	border: 1.5px solid var(--accent);
	box-shadow: 0 0 40px rgba(0,208,155,.14);
}
.landing .lp_price_head {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.landing .lp_price_title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}
.landing .lp h3.lp_price_h {
	font: 600 24px var(--font-display);
	letter-spacing: -.02em;
}
.landing .lp_price.pro h3.lp_price_h {
	color: var(--accent);
}
.landing .lp_flag {
	font: 600 12px var(--font-body);
	color: var(--on-accent);
	background: var(--accent);
	border-radius: var(--radius-s);
	padding: 3px 10px;
}
.landing .lp_amount {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
}
.landing .lp_amount b {
	font: 600 34px var(--font-display);
	letter-spacing: -.03em;
	color: var(--text-primary);
}
.landing .lp_checks {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
	font: var(--text-body);
	color: var(--text-secondary);
}
.landing .lp_checks li {
	display: flex;
	gap: 10px;
}
.landing .lp_checks svg {
	margin-top: 3px;
}
.landing .lp_price .lp_bottom {
	margin-top: auto;
}
/* Schalter Monatlich / Jaehrlich unter der Ueberschrift; er blendet nur die
   Betraege der Karten um (#preise.jahr, js/landing.js). Der gruene Punkt
   liegt hinter den Knoepfen und gleitet beim Wechsel hinueber. Ueberfaehrt
   man den inaktiven Knopf, wird nur der Punkt 14 px breiter, zu der Seite,
   auf die er beim Klick fahren wuerde; die Knoepfe selbst haben keinen
   eigenen Mouseover. */
.landing .lp_billing {
	position: relative;
	display: grid;
	grid-template-columns: 120px 120px;
	padding: 4px;
	border-radius: 999px;
	border: 1px solid var(--border-strong);
	background: var(--surface-raised);
}
.landing .lp_billing_dot {
	position: absolute;
	top: 4px;
	bottom: 4px;
	left: 4px;
	width: 120px;
	border-radius: 999px;
	background: var(--accent);
	box-shadow: 0 0 14px rgba(0,208,155,.35);
	transition: left .32s cubic-bezier(.3,.9,.3,1), width .32s cubic-bezier(.3,.9,.3,1);
}
.landing .lp_billing.jahr .lp_billing_dot {
	left: 124px;
}
.landing .lp_billing:not(.jahr):has(button[data-period="jahr"]:hover) .lp_billing_dot {
	width: 134px;
}
.landing .lp_billing.jahr:has(button[data-period="monat"]:hover) .lp_billing_dot {
	left: 110px;
	width: 134px;
}
.landing .lp_billing button,
.landing .lp_billing button:hover,
.landing .lp_billing button:focus {
	position: relative;
	z-index: 1;
	height: 36px;
	padding: 0;
	border: none;
	border-radius: 999px;
	background: transparent;
	box-shadow: none;
	color: var(--text-secondary);
	font: 600 14px var(--font-body);
	cursor: pointer;
	transition: color .25s;
}
.landing .lp_billing button.on,
.landing .lp_billing button.on:hover {
	color: var(--on-accent);
}
.landing .lp_amount > span {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
}
.landing .lp_amount > span[data-period="jahr"],
.landing #preise.jahr .lp_amount > span[data-period="monat"] {
	display: none;
}
.landing #preise.jahr .lp_amount > span[data-period="jahr"] {
	display: flex;
}
/* Drei Pakete: nebeneinander auf der vollen Breite von .lp_in, bis 900 px
   untereinander, ebenfalls über die volle Breite */
.landing .lp_prices.three {
	grid-template-columns: repeat(3,minmax(0,1fr));
	gap: 24px;
	align-items: stretch;
}
@media (max-width: 900px) {
	.landing .lp_prices.three {
		grid-template-columns: minmax(0,1fr);
	}
}
.landing .lp_checks li.no {
	color: var(--text-muted);
}

/* Datenschutz ----------------------------------------------------------- */
.landing .lp_trust {
	display: grid;
	grid-template-columns: repeat(3,minmax(0,1fr));
	gap: 16px;
}
.landing .lp_trust > article {
	background: linear-gradient(140deg,rgba(0,208,155,.07),rgba(0,208,155,0) 50%),var(--surface-glass);
	padding: 28px 26px 30px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
/* Icon-Kachel eine Stufe groesser und mit Leuchten, nur hier; bei den
   Vorteilen bleibt .lp_icon 44 px */
.landing .lp_trust .lp_icon {
	width: 48px;
	height: 48px;
	border-color: rgba(0,208,155,.45);
	background: rgba(0,208,155,.08);
	box-shadow: 0 0 22px rgba(0,208,155,.16);
}
.landing .lp_trust h3.lp_card_h {
	margin-top: 4px;
}
.landing .lp_trust .lp_small {
	text-wrap: pretty;
}
@media (max-width: 900px) {
	.landing .lp_trust {
		grid-template-columns: repeat(2,minmax(0,1fr));
	}
}
@media (max-width: 600px) {
	.landing .lp_trust {
		grid-template-columns: minmax(0,1fr);
	}
}

/* FAQ ------------------------------------------------------------------- */
.landing .lp_faq {
	border-top: 1px solid var(--border-default);
}
.landing .lp_faq > div {
	border-bottom: 1px solid var(--border-default);
}
.landing .lp_faq button.lp_faq_q {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 22px 0;
	border: none;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	text-align: left;
	white-space: normal;
	font: 600 18px/1.35 var(--font-display);
	letter-spacing: -.01em;
	color: var(--text-primary);
}
.landing .lp_faq button.lp_faq_q:hover {
	color: var(--accent);
}
.landing .lp_faq button.lp_faq_q svg {
	color: var(--text-muted);
	transition: transform .2s;
}
.landing .lp_faq .open button.lp_faq_q svg {
	transform: rotate(180deg);
}
.landing .lp_faq p {
	display: none;
	padding: 0 40px 22px 0;
	font: var(--text-body);
	color: var(--text-secondary);
}
.landing .lp_faq .open p {
	display: block;
}

/* Einladung ------------------------------------------------------------- */
.landing .lp_invite {
	padding: clamp(96px,12vw,160px) 24px clamp(80px,10vw,128px);
}
.landing .lp_invite .lp_split {
	gap: clamp(40px,6vw,80px);
	grid-template-columns: repeat(auto-fit,minmax(min(100%,440px),1fr));
}
.landing .lp h2.lp_h2.big {
	font-size: clamp(36px,5vw,64px);
	line-height: 1.04;
	letter-spacing: -.035em;
}
.landing .lp_steps {
	list-style: none;
	margin-top: 8px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.landing .lp_steps li {
	display: grid;
	grid-template-columns: 40px minmax(0,1fr);
	gap: 4px 16px;
	align-items: start;
}
.landing .lp_steps li > i {
	grid-row: span 2;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	border: 1px solid rgba(0,208,155,.5);
	background: rgba(0,208,155,.08);
	font: normal 500 13px var(--font-mono);
	color: var(--accent);
}
.landing .lp_steps li > b {
	font: 600 18px var(--font-display);
	letter-spacing: -.01em;
	color: var(--text-primary);
	padding-top: 8px;
}
.landing .lp_formbox {
	position: relative;
	border-radius: 24px;
	border: 1px solid rgba(0,208,155,.4);
	background: radial-gradient(ellipse 80% 70% at 100% 0%,rgba(0,208,155,.14),rgba(0,208,155,0) 65%),var(--lp-form-bg);
	backdrop-filter: var(--blur-glass);
	-webkit-backdrop-filter: var(--blur-glass);
	box-shadow: 0 30px 100px var(--lp-card-shadow),0 0 50px rgba(0,208,155,.08);
	padding: clamp(24px,4vw,40px);
}
.landing .lp_form {
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.landing .lp_form[hidden],
.landing .lp_done[hidden] {
	display: none;
}
.landing .lp_form_title {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.landing .lp h3.lp_form_h {
	font: 600 24px var(--font-display);
	letter-spacing: -.02em;
}
.landing .lp_fields {
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
	gap: 16px;
}
.landing .lp_field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font: 500 12px var(--font-body);
	color: var(--text-muted);
}
.landing .lp_field > span {
	letter-spacing: .04em;
	text-transform: uppercase;
}
.landing .lp_field textarea {
	min-height: 88px;
	font: 400 14px/1.5 var(--font-body);
}
.landing .lp_hp {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.landing .lp_form_foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 4px;
}
.landing .lp_error {
	color: var(--danger);
	font: var(--text-small);
}
.landing .lp_done {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding: 24px 0;
}
.landing .lp_done i {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	border: 1px solid var(--accent);
	background: rgba(0,208,155,.1);
	box-shadow: var(--glow-border);
}
.landing .lp h3.lp_done_h {
	font: 600 26px var(--font-display);
	letter-spacing: -.02em;
}
.landing .lp_done p {
	font: var(--text-body);
	color: var(--text-secondary);
}

/* Fuss: Aufbau und Schrift wie in der App (footer in css/index.css), nur
   auf die Seitenbreite gesetzt */
.landing .lp_foot {
	margin-top: auto;
}
.landing .lp_foot .wrapper {
	max-width: 1248px;
	margin: 0 auto;
	padding: 28px 24px 30px;
	box-sizing: border-box;
}

/* Oberer Teil des Fusses, nur auf der Startseite: Marke mit Satz und drei
   Vertrauenszeilen, daneben drei Linkspalten. Die Raster in den Kreisen
   sind fest berechnet; im Dunkelmodus wird der Kreis hell und die Haken
   #F2F5F4 und #CFFFEF dunkel. */
.landing .lp_ft_wrap{max-width:1248px;margin:0 auto;padding:0 24px;box-sizing:border-box}
.landing .lp_ft_line{max-width:1200px;margin:0 auto;border-top:1px solid var(--border-default)}
.landing .lp_ft_brand{gap:16px}
.landing .lp_ft_top{position:relative;max-width:1200px;margin:0 auto;padding:64px 0 48px;display:grid;grid-template-columns:minmax(0,1.7fr) repeat(3,minmax(0,1fr));gap:40px 32px;border-top:1px solid var(--border-default)}
.landing .lp_ft_top::before{content:'';position:absolute;left:0;top:-1px;width:min(360px,40%);height:1px;background:linear-gradient(90deg,var(--accent),rgba(0,208,155,0))}
.landing .lp_ft_col{display:flex;flex-direction:column;gap:12px;min-width:0}
.landing .lp_ft_col h4{margin:0 0 4px;font:600 12px var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.landing .lp_ft_col a:not(.lp_brand){font:var(--text-small);color:var(--text-secondary);width:fit-content;transition:color .15s}
.landing .lp_ft_col a:not(.lp_brand):hover{color:var(--accent)}
.landing .lp_ft_trust{display:flex;flex-direction:column;gap:16px;margin-top:8px}
.landing .lp_ft_trust_i{display:flex;align-items:center;gap:14px}
.landing .lp_ft_trust_ic{width:44px;height:44px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;overflow:hidden}
html:not([data-theme="light"]) .landing .lp_ft_trust_ic{background:#E4EAE8!important}
html:not([data-theme="light"]) .landing .lp_ft_trust_ic [fill="#F2F5F4"]{fill:#0F1513}
html:not([data-theme="light"]) .landing .lp_ft_trust_ic [stroke="#F2F5F4"]{stroke:#0F1513}
html:not([data-theme="light"]) .landing .lp_ft_trust_ic [fill="#CFFFEF"]{fill:#006B50}
.landing .lp_ft_trust_i b{display:block;font:600 15px/1.3 var(--font-body);color:var(--text-primary)}
.landing .lp_ft_trust_i span span{display:block;font:var(--text-small);color:var(--text-muted)}
@media(max-width:900px){.landing .lp_ft_top{grid-template-columns:repeat(3,minmax(0,1fr))}.landing .lp_ft_brand{grid-column:1/-1}}
@media(max-width:600px){.landing .lp_ft_top{grid-template-columns:repeat(2,minmax(0,1fr));padding-top:48px}}
/* Bankanbindung (Uebergabe 16.10.2026) ------------------------------------
   Kreis mit Punkt in der Mitte und Logos auf zwei Bahnen, alles in Prozent
   der Flaeche. .lp_orb und .lp_split gibt es schon beim Agenten, deshalb
   hier nur unter .lp_orbit bzw. .lp_bank_split. Schatten im hellen Modus
   ueber --lp-card-shadow. */
.landing .lp_bank_split {
	grid-template-columns: minmax(0,1fr) minmax(0,1.05fr);
	gap: clamp(32px,5vw,72px);
	align-items: center;
}
@media (max-width: 900px) {
	.landing .lp_bank_split {
		grid-template-columns: minmax(0,1fr);
	}
}
.landing .lp_bank_text {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.landing .lp_bank_text .lp_checks {
	margin-top: 8px;
}
.landing .lp_brand_note {
	margin-top: 6px;
	font: 400 12px/1.5 var(--font-body);
	color: var(--text-muted);
}
.landing .lp_orbit {
	position: relative;
	width: 100%;
	max-width: 560px;
	aspect-ratio: 1;
	margin: 0 auto;
	container-type: inline-size;
	--px: 0px;
	--py: 0px;
}
.landing .lp_orbit::before {
	content: "";
	position: absolute;
	inset: 18%;
	border-radius: 50%;
	background: radial-gradient(circle,rgba(0,208,155,.18),rgba(0,208,155,0) 65%);
	pointer-events: none;
}
/* Parallax wie Parallax.js: drei Ebenen laufen gegen die Maus, Tiefe 1 / .5 / .33.
   Kein Uebergang, die Schleife in js/landing.js glaettet selbst */
.landing .lp_orb_layer {
	position: absolute;
	inset: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	transform: translate3d(calc(var(--px) * var(--d)),calc(var(--py) * var(--d)),0);
	will-change: transform;
}
.landing .lp_ring {
	position: absolute;
	left: 50%;
	top: 50%;
	width: var(--r);
	height: var(--r);
	transform: translate(-50%,-50%);
	border-radius: 50%;
	border: 1px dashed rgba(0,208,155,.28);
}
.landing .lp_core {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 11.2%;
	aspect-ratio: 1;
	transform: translate(-50%,-50%);
	border-radius: 50%;
	background: var(--surface-raised);
	border: 1px solid var(--accent);
	box-shadow: 0 0 0 6px rgba(0,208,155,.06),0 0 44px rgba(0,208,155,.4),0 20px 60px var(--lp-card-shadow);
}
.landing .lp_core_dot,
.landing .lp_core_ring {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 24%;
	aspect-ratio: 1;
	margin: -12% 0 0 -12%;
	border-radius: 50%;
}
.landing .lp_core_dot {
	background: var(--accent-hover);
	box-shadow: 0 0 18px rgba(0,208,155,.8);
}
.landing .lp_core_ring {
	background: var(--accent);
	animation: lp-pulsar 1.5s ease-out infinite;
}
@keyframes lp-pulsar {
	0% { opacity: .7; transform: scale(1); }
	100% { opacity: 0; transform: scale(3.4); }
}
.landing .lp_orbit .lp_orb {
	position: absolute;
	width: 10%;
	height: auto;
	aspect-ratio: 1;
	transform: translate(-50%,-50%);
	border: 0;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 1px rgba(0,0,0,.06),0 10px 30px var(--lp-card-shadow),0 0 18px rgba(0,208,155,.12);
	animation: lp-float 6s ease-in-out infinite;
}
.landing .lp_orbit .lp_orb img {
	display: block;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 22%;
	object-fit: contain;
}
/* Sparkasse: das Zeichen ist selbst eine Kachel */
.landing .lp_orbit .lp_orb_tile img {
	padding: 0;
	border-radius: 50%;
}
.landing .lp_orbit .lp_orb.on {
	box-shadow: 0 0 0 2px var(--accent),0 0 22px rgba(0,208,155,.55),0 10px 30px var(--lp-card-shadow);
}
@keyframes lp-float {
	0%,100% { transform: translate(-50%,-50%); }
	50% { transform: translate(-50%,calc(-50% - 7px)); }
}
/* Datenstrom: Anfang auf der Bank (Tiefe --ld), Ende im Punkt (Tiefe 1),
   Lage, Laenge und Winkel aus --px/--py ohne Script. Jedes Paket laeuft nur
   im ersten Fuenftel seines Zyklus */
.landing .lp_line {
	--dx: calc((50 - var(--ax)) * 1cqw + (1 - var(--ld)) * var(--px));
	--dy: calc((50 - var(--ay)) * 1cqw + (1 - var(--ld)) * var(--py));
	position: absolute;
	left: calc(var(--ax) * 1cqw + var(--ld) * var(--px));
	top: calc(var(--ay) * 1cqw + var(--ld) * var(--py));
	width: hypot(var(--dx),var(--dy));
	height: 1.5px;
	margin-top: -.75px;
	background: rgba(0,208,155,.45);
	transform-origin: 0 50%;
	transform: rotate(atan2(var(--dy),var(--dx)));
	pointer-events: none;
}
.landing .lp_line i {
	position: absolute;
	top: 50%;
	left: 0;
	width: 7px;
	height: 7px;
	margin: -3.5px 0 0 -3.5px;
	border-radius: 50%;
	background: var(--accent-hover);
	box-shadow: 0 0 10px rgba(0,208,155,.95),0 0 3px #fff;
	opacity: 0;
	animation: lp-packet var(--t) linear infinite;
}
@keyframes lp-packet {
	0% { left: 0; opacity: 0; }
	2% { opacity: 1; }
	19% { left: 100%; opacity: 1; }
	21% { left: 100%; opacity: 0; }
	100% { left: 100%; opacity: 0; }
}

/* Datev: zwei Stapel (Eingangs- und Ausgangsrechnungen) bündeln sich, bekommen ein Band und fliegen im Bogen zu Datev.
Ein Durchlauf 10 s, der zweite Stapel um 5 s versetzt. Der Bogen entsteht aus zwei Ebenen: außen x, innen y. */
.landing .lp_dv{position:relative;width:100%;max-width:560px;aspect-ratio:1;margin:0 auto;container-type:inline-size}
.landing .lp_dv_label{position:absolute;transform:translateX(-50%);font:600 1.9cqw/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);white-space:nowrap}
.landing .lp_pile{position:absolute;width:0;height:0;animation:lp-pile-x 10s var(--delay,0s) infinite}
.landing .lp_pile_fly{position:absolute;left:0;top:0;animation:lp-pile-y 10s var(--delay,0s) infinite}
.landing .lp_pile .lp_inv{position:absolute;left:0;top:0;width:18cqw;aspect-ratio:.72;margin:-12.5cqw 0 0 -9cqw;box-sizing:border-box;padding:2cqw 1.8cqw 1.8cqw 2.2cqw;display:flex;flex-direction:column;gap:.8cqw;background:#fff;color:#1d2220;border-radius:1.1cqw;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 1.6cqw 4cqw var(--lp-card-shadow);animation:lp-card 10s var(--delay,0s) infinite}
.landing .lp_pile .lp_inv::before{content:"";position:absolute;left:.8cqw;top:1.1cqw;bottom:1.1cqw;width:.5cqw;border-radius:1px;background:var(--danger)}
.landing .lp_pile .lp_inv.in::before{background:var(--accent)}
.landing .lp_inv_head{height:4.2cqw;display:flex;align-items:center}
.landing .lp_inv_head img{display:block;width:100%;height:100%;object-fit:contain;object-position:left center}
.landing .lp_inv_head{gap:1cqw}
.landing .lp_inv_ic{width:4.2cqw;height:4.2cqw;flex-shrink:0;border-radius:1cqw;background:#eef2f1;color:#1d2220;display:grid;place-items:center}
.landing .lp_inv_ic svg{width:62%;height:62%}
.landing .lp_inv_what{font:700 1.5cqw/1.1 var(--font-body);color:#1d2220;white-space:nowrap}
.landing .lp_inv_own{font:700 1.6cqw/1.1 var(--font-display);letter-spacing:-.02em;color:#1d2220;white-space:nowrap}
.landing .lp_inv_kind{margin-top:.5cqw;font:700 1.35cqw/1.2 var(--font-body);color:#1d2220}
.landing .lp_inv_nr{font:400 1.15cqw/1.3 var(--font-body);color:#6b7672;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.landing .lp_inv_bar{display:block;height:.6cqw;width:86%;border-radius:1px;background:#e7ecea}
.landing .lp_inv_sum{margin-top:auto;align-self:flex-end;font:700 1.85cqw/1 var(--font-display);letter-spacing:-.02em;color:var(--danger)}
.landing .lp_inv.in .lp_inv_sum{color:#00A87D}
.landing .lp-band{position:absolute;left:0;top:0;z-index:9;transform:translate(-50%,-50%);padding:1cqw 1.8cqw;border-radius:99px;background:var(--accent);color:var(--on-accent);font:700 1.5cqw/1 var(--font-body);white-space:nowrap;box-shadow:0 0 0 .5cqw rgba(0,208,155,.25),0 1cqw 3cqw rgba(0,0,0,.35);animation:lp-band 10s var(--delay,0s) infinite}
.landing .lp_dv_target{position:absolute;width:0;height:0}
.landing .lp_dv_tile{position:absolute;left:-5.6cqw;top:-5.6cqw;width:11.2cqw;aspect-ratio:1;border-radius:24%;background:#fff;display:grid;place-items:center;box-shadow:0 0 0 .3cqw #9BD547,0 0 4cqw rgba(155,213,71,.45),0 2cqw 5cqw var(--lp-card-shadow);animation:lp-dv-hit 10s infinite}
.landing .lp_dv_tile img{width:68%;height:68%;object-fit:contain}
.landing .lp-dv-ring{position:absolute;left:-5.6cqw;top:-5.6cqw;width:11.2cqw;aspect-ratio:1;border-radius:24%;border:.3cqw solid #9BD547;opacity:0;animation:lp-dv-ring 10s infinite}
.landing .lp_dv_cap{position:absolute;left:0;top:8cqw;transform:translateX(-50%);font:500 1.9cqw/1 var(--font-body);color:var(--text-muted);white-space:nowrap}
.landing .lp-dv-ok{position:absolute;left:0;top:12.5cqw;display:flex;align-items:center;gap:.8cqw;padding:1cqw 1.8cqw 1cqw 1.3cqw;border-radius:99px;border:1px solid rgba(0,208,155,.45);background:rgba(0,208,155,.1);color:var(--accent);font:600 1.75cqw/1 var(--font-body);white-space:nowrap;opacity:0;transform:translate(-50%,1cqw);animation:lp-dv-ok 10s infinite}
.landing .lp-dv-ok svg{width:2cqw;height:2cqw}
/* Fächer (0–10 %), bündeln (10–22 %), Band (22–28 %), Schwung holen (29–33 %), Flug (33–50 %), neue Belege fallen ein (56–68 %) */
@keyframes lp-card{0%,10%{transform:translate(var(--fx),var(--fy)) rotate(var(--fr));opacity:1;animation-timing-function:cubic-bezier(.5,0,.2,1)}
22%,50%{transform:translate(var(--sx),var(--sy)) rotate(var(--sr));opacity:1}
50.01%,56%{transform:translate(var(--fx),calc(var(--fy) - 7cqw)) rotate(var(--fr));opacity:0;animation-timing-function:cubic-bezier(.2,.9,.3,1.3)}
68%,100%{transform:translate(var(--fx),var(--fy)) rotate(var(--fr));opacity:1}}
@keyframes lp-band{0%,22%{opacity:0;scale:.3}26%{opacity:1;scale:1.14}29%,50%{opacity:1;scale:1}50.01%,100%{opacity:0;scale:.3}}
@keyframes lp-pile-x{0%,33%{translate:0 0;animation-timing-function:cubic-bezier(.35,0,.55,1)}50%{translate:var(--tx) 0}50.01%,100%{translate:0 0}}
@keyframes lp-pile-y{0%,29%{translate:0 0;scale:1;rotate:0deg;opacity:1}
33%{translate:0 1.2cqw;scale:.94;rotate:calc(var(--rot) * -.3);animation-timing-function:cubic-bezier(.15,.6,.35,1)}
41%{translate:0 var(--peak);scale:.68;rotate:calc(var(--rot) * .2);animation-timing-function:cubic-bezier(.55,0,.85,.45)}
47%{opacity:1}
50%{translate:0 var(--ty);scale:.2;rotate:var(--rot);opacity:0}
50.01%,100%{translate:0 0;scale:1;rotate:0deg;opacity:1}}
@keyframes lp-dv-hit{0%{scale:1.1}4%,49%{scale:1}50%{scale:1.1}54%,99%{scale:1}100%{scale:1.1}}
@keyframes lp-dv-ring{0%,49.9%{opacity:0;scale:1}50%{opacity:.9;scale:1}60%,100%{opacity:0;scale:1.55}}
@keyframes lp-dv-ok{0%,50%{opacity:0;transform:translate(-50%,1cqw)}53%,74%{opacity:1;transform:translate(-50%,0)}78%,100%{opacity:0;transform:translate(-50%,-.6cqw)}}

/* Kalender: Karten wie Datenschutz, statt Icon ein weisses Logofeld */
.landing .lp_cal_logo {
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-m);
	background: #fff;
	box-shadow: 0 0 0 1px rgba(0,0,0,.06),0 0 22px rgba(0,208,155,.16);
}
.landing .lp_cal_logo img {
	width: 28px;
	height: 28px;
	display: block;
}

@media (prefers-reduced-motion: reduce) {
	html:has(body.landing) {
		scroll-behavior: auto;
	}
	.landing .lp_orb,
	.landing .lp_core_ring {
		animation: none;
	}
	.landing .lp_orb_layer {
		transform: none;
	}
	.landing .lp_line i {
		display: none;
	}
	/* Datev: beide Stapel stehen gebuendelt mit Band still */
	.landing .lp_pile,
	.landing .lp_pile_fly,
	.landing .lp_pile .lp_inv,
	.landing .lp-band,
	.landing .lp_dv_tile,
	.landing .lp-dv-ring,
	.landing .lp-dv-ok {
		animation: none;
	}
	.landing .lp_pile .lp_inv {
		transform: translate(var(--sx),var(--sy)) rotate(var(--sr));
	}
	.landing .lp-band {
		opacity: 1;
	}
	.landing .lp-dv-ring,
	.landing .lp-dv-ok {
		display: none;
	}
}

/* Oeffentliche Textseiten (pages/templates/public.html): Kopf und Fuss der
   Startseite, Inhalt in der Breite des Videos unter dem festen Kopf */
.landing .lp_spacer {
	flex: 1;
}
.landing .lp_public {
	flex: 1;
	width: 100%;
	max-width: 1248px;
	margin: 0 auto;
	padding: 120px 24px 80px;
	box-sizing: border-box;
}
.landing .lp_public .page-head {
	margin-bottom: 28px;
}
@media (max-width: 979px) {
	/* ohne Menue: Anmelden bleibt sichtbar, die Einladung steht auf der Startseite */
	.landing.public .lp_head_in > .lp_actions {
		display: flex;
	}
	.landing.public .lp_public_invite {
		display: none;
	}
}
@media (max-width: 770px) {
	.landing .lp_public {
		padding-top: 100px;
	}
	.landing .lp_public .wrapper.legal {
		grid-template-columns: minmax(0,1fr);
	}
	.landing .lp_public .legal_nav {
		display: none;
	}
}
@media print {
	.landing.public .lp_head,
	.landing.public .lp_foot,
	.landing.public #bg-waves,
	.landing.public .legal_nav,
	.landing.public .page-head .button {
		display: none !important;
	}
	.landing.public .lp_public {
		padding: 0;
	}
}
/* Karte der 404-Seite im oeffentlichen Geruest: Abstand unter dem Titel,
   den .landing .lp p sonst auf 0 setzt */
.landing .lp .landing-card p {
	margin: 12px 0 0;
}
/* Einladung: Hinweis "optional" am Feldnamen */
.landing .lp_field > span .lp_optional {
	font-style: normal;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	opacity: .7;
	margin-left: 4px;
}

/* Hero als Video (css/landing/hero.mp4, hero-2x.mp4); darueber die Szenenmarke
   in Buehnenmassen (1280 x 720, skaliert wie die Buehne) */
.landing .lp_hero_mp4 {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	background: #0A0C0B;
}
.landing .lp_mock_in.lp_overlay {
	z-index: 2;
	background: transparent;
	pointer-events: none;
}
.landing .lp_chip {
	position: absolute;
	left: 30px;
	bottom: 30px;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 18px 10px 16px;
	border-radius: 999px;
	background: rgba(10,12,11,.88);
	border: 1px solid rgba(0,208,155,.4);
	font: 600 17px var(--font-body);
	color: var(--text-primary);
	opacity: 0;
	transition: filter .3s ease-out;
}
.landing .lp_chip span {
	font: 500 14px var(--font-mono);
	color: var(--accent);
}
.landing .lp_chip b {
	font-weight: 600;
}

/* Testsystem (dev.billcreator, Twig-Global testsystem): fixierter roter Balken oben */
.testsystem_bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100000;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #D63B3B;
	color: #fff;
	font: 700 11px/1 "Instrument Sans", system-ui, sans-serif;
	letter-spacing: .12em;
	text-transform: uppercase;
	pointer-events: none;
}
/* Testsystem: Kopf der Startseite unter dem Balken */
body.testsystem {
	--testbar: 22px;
	padding-top: var(--testbar);
}
body.testsystem.landing .lp_head {
	top: var(--testbar);
}
/* Seite "Über Billcreator" (/ueber, pages/templates/ueber.html), Regeln aus dem Entwurf
   ueber.html in Claude Design; der Footer kommt aus 150-fuss.css. */
:root{--mk-bar:rgba(10,12,11,.55)}
html[data-theme="light"]{--mk-bar:rgba(238,242,241,.75)}
.landing .ub-wrap{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column}
.landing .ub-in{max-width:1200px;margin:0 auto}
.landing .ub-eyebrow{font:600 12px var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.landing .ub-h2{margin:0;font:600 clamp(30px,4vw,46px)/1.08 var(--font-display);letter-spacing:-.03em;text-wrap:balance}
.landing .ub-lead{margin:0;font:400 clamp(17px,1.6vw,19px)/1.6 var(--font-body);color:var(--text-secondary);text-wrap:pretty}
.landing .ub-p{margin:0;font:var(--text-body);color:var(--text-secondary);text-wrap:pretty}
/* Kopf */
.landing .ub-head{position:fixed;top:0;left:0;right:0;z-index:50;background:var(--mk-bar);backdrop-filter:var(--blur-glass);-webkit-backdrop-filter:var(--blur-glass);border-bottom:1px solid var(--border-default)}
.landing .ub-head>div{max-width:1248px;margin:0 auto;height:68px;padding:0 24px;display:flex;align-items:center;gap:24px;box-sizing:border-box}
.landing .ub-brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.landing .ub-word{font:600 20px var(--font-display);letter-spacing:-.03em;color:var(--text-primary)}.landing .ub-word span{color:var(--accent)}
.landing .ub-back{margin-left:auto;font:500 14px var(--font-body);color:var(--text-secondary)}.landing .ub-back:hover{color:var(--text-primary)}
.landing .ub-btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;box-sizing:border-box;border:1px solid var(--accent);border-radius:var(--radius-m);font:600 14px var(--font-body);color:var(--accent);background:transparent;transition:background .15s,box-shadow .15s;white-space:nowrap}
.landing .ub-btn:hover{background:rgba(0,208,155,.08);box-shadow:var(--glow-border);color:var(--accent)}
.landing .ub-theme{width:40px;height:40px;display:grid;place-items:center;flex-shrink:0;border:1px solid var(--border-strong);border-radius:var(--radius-m);background:transparent;color:var(--text-secondary);cursor:pointer;transition:color .15s,border-color .15s,box-shadow .15s}
.landing .ub-theme:hover{color:var(--accent);border-color:var(--accent);box-shadow:var(--glow-border)}
html[data-theme="light"] .landing .ub-sun,html:not([data-theme="light"]) .landing .ub-moon{display:none}
/* Hero */
.landing .ub-hero{padding:clamp(128px,14vw,176px) 24px 0}
.landing .ub-hero .ub-in{display:flex;flex-direction:column;gap:20px;max-width:820px;margin:0}
.landing .ub-hero h1{margin:0;font:600 clamp(40px,6vw,72px)/1.02 var(--font-display);letter-spacing:-.035em;text-wrap:balance}
.landing .ub-hero h1 span{color:var(--accent)}
.landing .ub-hero-box{max-width:1200px;margin:0 auto}
/* Foto */
.landing .ub-photo{padding:clamp(48px,6vw,72px) 24px 0}
.landing .ub-photo figure{position:relative;max-width:1200px;margin:0 auto;border-radius:var(--radius-l);overflow:hidden;border:1px solid var(--border-default);aspect-ratio:2/1;background:var(--surface-raised)}
.landing .ub-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 46%}
.landing .ub-photo figcaption{position:absolute;left:20px;bottom:20px;display:flex;align-items:center;gap:10px;padding:9px 16px;border-radius:999px;background:rgba(10,12,11,.72);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);border:1px solid rgba(242,245,244,.14);font:500 14px var(--font-body);color:#F2F5F4}
.landing .ub-photo figcaption i{width:8px;height:8px;border-radius:50%;background:#00D09B;box-shadow:0 0 10px rgba(0,208,155,.8)}
@media(max-width:700px){.landing .ub-photo figure{aspect-ratio:4/3}.landing .ub-photo figcaption{left:12px;right:12px;bottom:12px;font-size:13px}}
/* Werdegang */
.landing .ub-story{padding:clamp(96px,11vw,144px) 24px 0}
.landing .ub-story .ub-in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(40px,6vw,96px);align-items:start}
.landing .ub-story-side{position:sticky;top:120px;display:flex;flex-direction:column;gap:16px}
.landing .ub-steps{position:relative;list-style:none;margin:0;padding:0 0 0 44px;display:flex;flex-direction:column;gap:34px}
.landing .ub-steps::before{content:'';position:absolute;left:11px;top:8px;bottom:8px;width:1px;background:linear-gradient(180deg,var(--border-strong),var(--accent))}
.landing .ub-steps li{position:relative;display:flex;flex-direction:column;gap:6px}
.landing .ub-steps li::before{content:'';position:absolute;left:-38px;top:5px;width:11px;height:11px;border-radius:50%;background:var(--surface-page);box-shadow:inset 0 0 0 1.5px var(--accent)}
.landing .ub-steps li.ub-now::before{background:var(--accent);box-shadow:0 0 0 4px rgba(0,208,155,.18),0 0 16px rgba(0,208,155,.7)}
.landing .ub-steps b{display:flex;align-items:baseline;gap:12px;font:600 19px/1.3 var(--font-display);letter-spacing:-.01em;color:var(--text-primary)}
.landing .ub-steps b em{flex-shrink:0;width:38px;font:500 13px var(--font-mono);font-style:normal;color:var(--accent)}
.landing .ub-steps p{margin:0;font:var(--text-small);font-size:15px;line-height:1.6;color:var(--text-secondary);max-width:520px}
/* 2026: groesserer Schritt mit den neuen Bausteinen als Kapseln */
.landing .ub-steps li.ub-big::before{width:15px;height:15px;left:-40px;top:3px;box-shadow:inset 0 0 0 1.5px var(--accent),0 0 0 4px rgba(0,208,155,.12)}
.landing .ub-steps li.ub-big b{font-size:22px}
.landing .ub-chips{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;max-width:560px}
.landing .ub-chips li{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:999px;border:1px solid rgba(0,208,155,.35);background:rgba(0,208,155,.07);font:500 13px var(--font-body);color:var(--text-primary);white-space:nowrap}
.landing .ub-steps .ub-chips li{flex-direction:row;gap:0;box-sizing:border-box;line-height:1}
.landing .ub-steps .ub-chips li::before{display:none}
@media(max-width:900px){.landing .ub-story .ub-in{grid-template-columns:minmax(0,1fr)}.landing .ub-story-side{position:static}}
/* Idee */
.landing .ub-idea{padding:clamp(96px,11vw,144px) 24px 0}
.landing .ub-idea-card{position:relative;overflow:hidden;max-width:1200px;margin:0 auto;box-sizing:border-box;padding:clamp(32px,5vw,64px);border-radius:var(--radius-l);border:1px solid var(--border-default);background:radial-gradient(120% 140% at 100% 0%,rgba(0,208,155,.14),rgba(0,208,155,0) 55%),var(--surface-glass);backdrop-filter:var(--blur-glass);-webkit-backdrop-filter:var(--blur-glass);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px)}
.landing .ub-idea-card::before{content:'';position:absolute;left:0;top:-1px;width:min(360px,40%);height:1px;background:linear-gradient(90deg,var(--accent),rgba(0,208,155,0))}
.landing .ub-idea-l{display:flex;flex-direction:column;gap:16px}
/* Impuls: Pulsar wie Bill oben rechts in der App (AgentPulse) */
.landing .ub-pulse{width:41px;height:41px;display:grid;place-items:center;box-sizing:border-box;border-radius:50%;background:var(--surface-raised);border:1px solid var(--accent);box-shadow:0 0 10px rgba(0,208,155,.25);margin-bottom:6px}
.landing .ub-pulse .r{transform-origin:60px 60px;animation:ub-ring 1.5s ease-out infinite}
@keyframes ub-ring{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(3.2)}}
@media(prefers-reduced-motion:reduce){.landing .ub-pulse .r{animation:none;opacity:0}}
.landing .ub-idea-r{display:flex;flex-direction:column;gap:18px;justify-content:center}
@media(max-width:900px){.landing .ub-idea-card{grid-template-columns:minmax(0,1fr)}}
/* Die ersten 100 */
.landing .ub-next{padding:clamp(96px,11vw,144px) 24px clamp(96px,11vw,144px)}
.landing .ub-next-head{max-width:720px;display:flex;flex-direction:column;gap:16px;margin-bottom:40px}
.landing .ub-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.landing .ub-card{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:12px;padding:28px;border-radius:var(--radius-l);border:1px solid var(--border-default);background:linear-gradient(140deg,rgba(0,208,155,.07),rgba(0,208,155,0) 50%),var(--surface-glass);backdrop-filter:var(--blur-glass);-webkit-backdrop-filter:var(--blur-glass)}
.landing .ub-card h3{margin:4px 0 0;font:600 20px/1.25 var(--font-display);letter-spacing:-.015em}
.landing .ub-card p{margin:0;font:var(--text-small);font-size:15px;line-height:1.6;color:var(--text-secondary);text-wrap:pretty}
.landing .ub-card .ub-ic{width:48px;height:48px;border-radius:var(--radius-m);display:grid;place-items:center;border:1px solid rgba(0,208,155,.45);background:rgba(0,208,155,.08);color:var(--accent);box-shadow:0 0 22px rgba(0,208,155,.16)}
.landing .ub-card .ub-ic-num{font:600 15px/1 var(--font-display);letter-spacing:-.02em}
@media(max-width:900px){.landing .ub-cards{grid-template-columns:minmax(0,1fr)}}
.landing .ub-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:40px}

/* Testsystem: Kopf unter dem roten Balken */
body.testsystem.landing .ub-head{top:var(--testbar)}
/* Schalter hell/dunkel: Symbole wie im Kopf der Startseite */
.landing .ub-theme{margin-right:0}
/* Schmal: "Zur Startseite" faellt weg (das Logo fuehrt zurueck), der Knopf passt in den Kopf */
@media(max-width:600px){.landing .ub-head>div{gap:10px;padding:0 16px}.landing .ub-back{display:none}.landing .ub-theme{margin-left:auto}.landing .ub-btn{padding:0 12px;font-size:13px}}