* {
	margin:0;
	padding:0;
	box-sizing:border-box;
}

html {
	scroll-behavior:smooth;
	scroll-padding-top:80px;
}

body {
	font-family:Arial,sans-serif;
	background:#111827;
	color:white;
	overflow-x:hidden;
}

img {
	max-width:100%;
	display:block;
}

a {
	color:white;
	text-decoration:none;
}

button {
	font:inherit;
}

.header {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:80px;
	z-index:1000;
	background:rgba(0,0,0,.65);
	backdrop-filter:blur(12px);
}

.navbar {
	height:100%;
	width:min(calc(100% - 80px),1200px);
	margin:auto;
	display:flex;
	align-items:center;
	justify-content:space-between;
}

.nav-menu {
	position:relative;
	display:flex;
	gap:35px;
	list-style:none;
}

.nav-menu li {
	position:relative;
}

.nav-menu a {
	position:relative;
	display:inline-block;
	color:rgba(255,255,255,.55);
	transition:color .25s ease;
}

.nav-menu a:hover {
	color:#fff;
}

/* Statt fester Einzelfarbe pro Menüpunkt (was bei mehr als 4 Punkten
   dazu führte, dass ab dem 5. Punkt alle wieder blau wurden, weil es
   dafür keine eigene Regel mehr gab) bekommt jeder Unterstrich densel­ben
   Verlauf blau -> grau -> lila gestreckt über seine eigene Breite - so
   sieht es bei jeder Anzahl an Menüpunkten konsistent aus. */
.nav-menu a::after {
	content:"";
	position:absolute;
	left:0;
	bottom:-10px;
	width:100%;
	height:2px;
	border-radius:2px;
	background:linear-gradient(90deg,#38bdf8 0%,#7a8aa0 50%,#9d4edd 100%);
	transform:scaleX(0);
	transform-origin:left;
	transition:transform .3s ease;
}

.nav-menu a:hover::after {
	transform:scaleX(1);
}

.login-button {
	background:linear-gradient(
		135deg,
		#4f7a92 0%,
		#48484f 22%,
		#414148 50%,
		#48484f 78%,
		#6b4c86 100%
	);
	color:#fff;
	text-shadow:0 1px 2px rgba(0,0,0,.35);
	padding:10px 30px;
	border-radius:50px;
	transition:transform .25s ease,filter .25s ease;
}

.login-button:hover {
	filter:brightness(1.2) saturate(1.3);
	transform:translateY(-2px);
}

.menu-toggle {
	display:none;
	background:none;
	border:0;
	color:white;
	font-size:32px;
	cursor:pointer;
}

.mobile-login {
	display:none;
}

.page-section {
	--diagonal:100px;
	--ink:#ffffff;
	--shadow-strong:rgba(0,0,0,.85);
	--shadow-mid:rgba(0,0,0,.6);
	--shadow-soft:rgba(0,0,0,.5);
	--stroke-color:rgba(0,0,0,.6);
	position:relative;
	min-height:clamp(600px,80vh,900px);
	height:auto;
	margin-top:calc((var(--diagonal) + 2px) * -1);
	padding:calc(var(--diagonal) + 80px) 0 140px;
	display:flex;
	align-items:center;
	overflow:hidden;
}

.section-background {
	position:absolute;
	inset:-80px 0;
	background:var(--section-bg);
	background-size:cover;
	background-position:center;
	z-index:0;
}

.page-section:nth-child(1) {
	--section-bg:linear-gradient(to bottom left,#eceef1 0%,#d3d6db 55%,#b6bac1 100%);
	--ink:#26262b;
	--shadow-strong:rgba(255,255,255,.9);
	--shadow-mid:rgba(255,255,255,.6);
	--shadow-soft:rgba(255,255,255,.45);
	--stroke-color:rgba(255,255,255,.7);
}

.page-section:nth-child(2) {
	--section-bg:linear-gradient(to top right,#ffffff 0%,#f2f2f4 55%,#dfe0e4 100%);
	--ink:#242429;
	--shadow-strong:rgba(255,255,255,.95);
	--shadow-mid:rgba(255,255,255,.65);
	--shadow-soft:rgba(255,255,255,.45);
	--stroke-color:rgba(255,255,255,.75);
}

.page-section:nth-child(3) {
	--section-bg:linear-gradient(to bottom left,#6b6b74 0%,#3f3f46 55%,#232327 100%);
}

.page-section:nth-child(4) {
	--section-bg:linear-gradient(to top right,#9d4edd 0%,#7b2cbf 50%,#2a0f42 100%);
}

.page-section:nth-child(5) {
	--section-bg:linear-gradient(to bottom left,#1c1c1e 0%,#0a0a0b 55%,#000000 100%);
}

/* Mit ".page-section" verkettet, damit die Spezifität (0,2,0) die
   positionsbasierten ":nth-child"-Regeln zuverlässig überstimmt - egal
   an welcher Position eine Sektion tatsächlich steht. */
.page-section.section-hellgrau {
	--section-bg:linear-gradient(to bottom left,#eceef1 0%,#d3d6db 55%,#b6bac1 100%);
	--ink:#26262b;
	--shadow-strong:rgba(255,255,255,.9);
	--shadow-mid:rgba(255,255,255,.6);
	--shadow-soft:rgba(255,255,255,.45);
	--stroke-color:rgba(255,255,255,.7);
}

.page-section.section-weiss {
	--section-bg:linear-gradient(to top right,#ffffff 0%,#f2f2f4 55%,#dfe0e4 100%);
	--ink:#242429;
	--shadow-strong:rgba(255,255,255,.95);
	--shadow-mid:rgba(255,255,255,.65);
	--shadow-soft:rgba(255,255,255,.45);
	--stroke-color:rgba(255,255,255,.75);
}

/* Plain <a>-Links ohne eigene Farbregel (z.B. "Laufende Verträge" in
   einem Fließtext-Absatz, "Filter zurücksetzen" in .suchmaske, "Kunden"
   in einem Leer-Hinweis) übernehmen sonst die globale "a { color:white; }"
   ganz oben - auf hellen Sektionen (helle nth-child-Position bzw.
   .section-hellgrau/.section-weiss) dadurch weiße Schrift auf hellem
   Hintergrund, kaum lesbar. Deshalb hier auf den Marken-Lila-Ton
   (#9d4edd, siehe .nav-badge/accent-color weiter unten) statt Weiß
   umgestellt - dasselbe "auf heller Sektion sichtbar machen"-Prinzip wie
   beim select-option-Fix weiter unten in dieser Datei.
   Bewusst in ":where(...)" verpackt (Spezifität 0) statt normaler
   Verschachtelung: eine normale ".page-section:nth-child(1) a"-Regel
   hätte Spezifität (0,2,1) und würde spezifischere, aber "leichtere"
   Regeln wie ".admin-table a" (0,1,1) überstimmen, obwohl die eigentlich
   gewinnen sollen (eigene Linkfarbe/-unterstreichung in Tabellen). Mit
   ":where()" bleibt hier effektiv nur die Spezifität von "a" (0,0,1)
   übrig, ".admin-table a"/".suchmaske a"/".footer-col a"/".nav-menu a"
   gewinnen also weiterhin normal. */
:where(.page-section:nth-child(1), .page-section:nth-child(2), .page-section.section-hellgrau, .page-section.section-weiss) a {
	color:#9d4edd;
}

/* section-hellgrau/section-weiss (oben) setzen --ink mit, weil das
   Original-Design das für "helle Sektion an dunkler Position" schon
   vorsah. Bei den drei dunklen Klassen hier fehlte das bisher - lag so
   eine dunkle Sektion an einer eigentlich hellen nth-child-Position
   (z.B. .section-lila als 2. Sektion, siehe pages/supportnachrichten.php),
   blieb --ink auf dem dunklen Wert der hellen Position stehen -> dunkler
   Text auf dunklem/lila Hintergrund, kaum lesbar. Deshalb jetzt auch hier
   --ink (+ Schatten/Stroke fürs Text-Glow) explizit auf "helle Schrift"
   gesetzt, unabhängig von der tatsächlichen Position. */
.page-section.section-grau {
	--section-bg:linear-gradient(to bottom left,#6b6b74 0%,#3f3f46 55%,#232327 100%);
	--ink:#ffffff;
	--shadow-strong:rgba(0,0,0,.85);
	--shadow-mid:rgba(0,0,0,.6);
	--shadow-soft:rgba(0,0,0,.5);
	--stroke-color:rgba(0,0,0,.6);
}

.page-section.section-lila {
	--section-bg:linear-gradient(to top right,#9d4edd 0%,#7b2cbf 50%,#2a0f42 100%);
	--ink:#ffffff;
	--shadow-strong:rgba(0,0,0,.85);
	--shadow-mid:rgba(0,0,0,.6);
	--shadow-soft:rgba(0,0,0,.5);
	--stroke-color:rgba(0,0,0,.6);
}

.page-section.section-schwarz {
	--section-bg:linear-gradient(to bottom left,#1c1c1e 0%,#0a0a0b 55%,#000000 100%);
	--ink:#ffffff;
	--shadow-strong:rgba(0,0,0,.85);
	--shadow-mid:rgba(0,0,0,.6);
	--shadow-soft:rgba(0,0,0,.5);
	--stroke-color:rgba(0,0,0,.6);
}

.page-section.section-hellgrau .text-box h1,
.page-section.section-hellgrau .text-box h2,
.page-section.section-weiss .text-box h2 {
	-webkit-text-stroke:.6px var(--stroke-color);
	paint-order:stroke fill;
}

.element-tag {
	display:inline-block;
	font-size:.8rem;
	letter-spacing:.25em;
	text-transform:uppercase;
	font-weight:700;
	margin-bottom:14px;
	opacity:.85;
	color:var(--ink);
	text-shadow:0 0 10px var(--shadow-mid);
}

.page-section:first-child {
	margin-top:0;
	padding-top:160px;
	clip-path:polygon(
		0 0,
		100% 0,
		100% calc(100% - var(--diagonal)),
		0 100%
	);
}

.page-section:nth-child(even) {
	clip-path:polygon(
		0 var(--diagonal),
		100% 0,
		100% 100%,
		0 calc(100% - var(--diagonal))
	);
}

.page-section:nth-child(odd):not(:first-child) {
	clip-path:polygon(
		0 0,
		100% var(--diagonal),
		100% calc(100% - var(--diagonal)),
		0 100%
	);
}

.page-section:nth-child(4) {
	flex-direction:column;
}

.content-layout {
	position:relative;
	z-index:2;
	width:min(calc(100% - 80px),1200px);
	margin:auto;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:80px;
}

.text-box,
.image-box,
.logo-box {
	flex:1 1 0;
	min-width:0;
}

.text-box h1,
.text-box h2,
.full-text h2 {
	font-size:clamp(2rem,4vw,3.5rem);
	margin-bottom:20px;
	color:var(--ink);
	text-shadow:0 0 3px var(--shadow-strong),0 0 14px var(--shadow-mid),0 4px 20px var(--shadow-soft);
	/* Bewusst KEIN overflow-wrap/word-break/hyphens mehr hier - Headlines
	   sollen ausschließlich an Leerzeichen umbrechen, nie mitten im Wort
	   und nie mit Trennstrich. Bei einem einzelnen, sehr langen
	   zusammengeschriebenen Wort ohne Leerzeichen (z.B. "Kontakt-
	   informationen" als EIN Wort) kann das auf sehr schmalen Handy-
	   Breiten wieder über den Container hinauslaufen - dann von Hand ein
	   Leerzeichen in den Text einfügen, siehe Absprache. */
}

.text-box p,
.full-text p {
	font-size:1.2rem;
	line-height:1.7;
	color:var(--ink);
	text-shadow:0 0 2px var(--shadow-strong),0 0 10px var(--shadow-mid),0 2px 10px var(--shadow-soft);
}

.page-section:nth-child(1) .text-box h1,
.page-section:nth-child(1) .text-box h2,
.page-section:nth-child(2) .text-box h2 {
	-webkit-text-stroke:.6px var(--stroke-color);
	paint-order:stroke fill;
}

.logo-box {
	display:flex;
	justify-content:center;
}

.logo-box img {
	width:min(240px,100%);
}

.page-section:nth-child(1) .logo-box img {
	filter:invert(1) brightness(.8);
}

/* NUR wenn an Position 5 wirklich eine .logo-box steckt (aktuell nur die
   Startseite, letzte Sektion "Abschluss") - sonst würde diese Regel auf
   JEDER Seite greifen, deren LETZTE Sektion zufällig die fünfte ist (z.B.
   leistungen.php: dort landet die SEO-Sektion mit .image-box statt
   .logo-box an Position 5). Ohne :has() hier hätte ".text-box{flex:none;
   width:auto}" das Bild dort komplett verdrängt (width:auto + kein
   Schrumpfen lässt den Textblock auf seine volle, unumbrochene Breite
   wachsen und der .image-box bleibt kein Platz mehr - Bild optisch
   "verschwunden", siehe Diagnose vom 2026-08-16). */
.page-section:nth-child(5):has(.logo-box) .content-layout {
	justify-content:center;
	gap:50px;
}

.page-section:nth-child(5):has(.logo-box) .logo-box,
.page-section:nth-child(5):has(.logo-box) .text-box {
	flex:none;
	width:auto;
}

.page-section:nth-child(5):has(.logo-box) .logo-box img {
	width:280px;
	max-width:60vw;
}

.image-box img {
	width:100%;
	height:auto;
}

.full-text {
	position:relative;
	z-index:2;
	width:min(calc(100% - 80px),1000px);
	margin:auto;
	text-align:center;
}

.logo-slider {
	width:100%;
	overflow:hidden;
	margin-top:60px;
	mask-image:linear-gradient(
		to right,
		transparent,
		black 10%,
		black 90%,
		transparent
	);
	-webkit-mask-image:linear-gradient(
		to right,
		transparent,
		black 10%,
		black 90%,
		transparent
	);
}

.logo-track {
	display:flex;
	align-items:center;
	gap:80px;
	width:max-content;
	will-change:transform;
}

.logo-track img {
	width:180px;
	height:180px;
	object-fit:contain;
	filter:brightness(0) invert(1);
	flex:none;
}

.footer {
	--diagonal:100px;
	position:relative;
	background:linear-gradient(160deg,#1c1c1e 0%,#241a2e 45%,#182029 100%);
	color:rgba(255,255,255,.85);
	margin-top:calc((var(--diagonal) + 2px) * -1);
	padding-top:40px;
	padding-bottom:20px;
	overflow:hidden;
	clip-path:polygon(
		0 var(--diagonal),
		100% 0,
		100% 100%,
		0 100%
	);
}

/* Die letzte .page-section VOR dem Footer kann je nach Gesamtanzahl der
   Sektionen (ungerade/gerade Positionierung) in zwei unterschiedliche
   Richtungen geneigt enden - siehe :nth-child(odd)/:nth-child(even)
   weiter oben. Der Footer hatte bisher immer nur eine feste Neigung
   passend zur "odd"-Variante, wodurch bei einer geraden Sektionsanzahl
   ein sichtbarer Knick im Übergang entstand. Diese Regel lässt den
   Footer die Neigung übernehmen, die zur tatsächlich letzten Sektion passt. */
main:has(.page-section:last-child:nth-child(even)) + .footer {
	clip-path:polygon(
		0 0,
		100% var(--diagonal),
		100% 100%,
		0 100%
	);
}

.footer-decor {
	position:absolute;
	inset:0;
	z-index:0;
	pointer-events:none;
	background:
		radial-gradient(600px 420px at 12% 12%,rgba(123,44,191,.32),transparent 70%),
		radial-gradient(700px 520px at 92% 88%,rgba(56,189,248,.16),transparent 70%);
}

.footer-inner {
	position:relative;
	z-index:2;
	width:min(calc(100% - 80px),1200px);
	margin:auto;
	padding-top:80px;
	padding-bottom:0px;
	display:grid;
	grid-template-columns:1fr 1fr 1fr auto;
	gap:35px;
	align-items:stretch;
}

.footer-col {
	list-style:none;
	text-align:left;
	position:relative;
}

.footer-col h3 {
	margin:0 0 18px;
	font-size:13px;
	font-weight:600;
	color:rgba(255,255,255,.85);
}

.footer-col li {
	margin-bottom:10px;
}

.footer-col a {
	font-size:12px;
	font-weight:400;
	color:rgba(255,255,255,.55);
	text-decoration:none;
	transition:.2s ease;
}

.footer-col a:hover {
	color:white;
}

@media(min-width:901px) {

	.footer-col:nth-child(1)::after,
	.footer-col:nth-child(2)::after {
		content:"";
		position:absolute;
		right:-18px;
		top:0;
		bottom:0;
		width:1px;
		background:rgba(255,255,255,.12);
	}

}

.footer-branding {
	display:flex;
	justify-content:flex-end;
	align-items:flex-end;
}

.footer-brand {
	width:150px;
	opacity:.85;
}

.footer-bottom {
	position:relative;
	z-index:2;
	width:min(calc(100% - 80px),1200px);
	margin:20px auto 0;
	padding:20px 0;
	border-top:1px solid rgba(255,255,255,.10);
	display:flex;
	justify-content:space-between;
	font-size:11px;
	color:rgba(255,255,255,.45);
}

@media(max-width:900px) {

	.footer {
		--diagonal:45px;
	}

	.footer-inner {
		grid-template-columns:1fr 1fr;
		gap:35px;
		padding-top:35px;
	}

	.footer-col:nth-child(1) {
		grid-column:1;
		grid-row:1;
	}

	.footer-col:nth-child(3) {
		grid-column:2;
		grid-row:1;
	}

	.footer-col:nth-child(2) {
		grid-column:1;
		grid-row:2;
	}

	.footer-branding {
		grid-column:2;
		grid-row:2;
		justify-content:flex-end;
		align-items:flex-end;
	}

	.footer-col:nth-child(1)::after {
		content:"";
		position:absolute;
		right:-18px;
		top:0;
		bottom:0;
		width:1px;
		background:rgba(255,255,255,.12);
	}

	.footer-col:nth-child(2)::after {
		display:none;
	}

}

@media(max-width:520px) {

	.footer-inner {
		width:calc(100% - 40px);
		grid-template-columns:1fr 1fr;
	}

	.footer-bottom {
		width:calc(100% - 40px);
		flex-direction:column;
		gap:8px;
	}

}

.animate-left,
.animate-right,
.animate-up,
.animate-down,
.animate-zoom,
.animate-fade {
	opacity:0;
	transition:
		opacity 1.2s ease,
		transform 1.2s ease;
}

.animate-left {
	transform:translateX(-80px);
}

.animate-right {
	transform:translateX(80px);
}

.animate-up {
	transform:translateY(70px);
}

.animate-down {
	transform:translateY(-70px);
}

.animate-zoom {
	transform:scale(.88);
}

.animate-fade {
	transform:none;
}

.animate-left.show,
.animate-right.show,
.animate-up.show,
.animate-down.show,
.animate-zoom.show,
.animate-fade.show {
	opacity:1;
	transform:translate(0) scale(1);
}

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

	.animate-left,
	.animate-right,
	.animate-up,
	.animate-down,
	.animate-zoom,
	.animate-fade {
		opacity:1;
		transform:none;
		transition:none;
	}

}

@media(max-width:900px) {

	html {
		scroll-padding-top:70px;
	}

	.header {
		height:70px;
	}

	.navbar {
		width:calc(100% - 40px);
	}

	.nav-menu {
		display:none;
		position:absolute;
		top:70px;
		left:0;
		width:100%;
		padding:40px 20px;
		background:rgba(0,0,0,.94);
		flex-direction:column;
		align-items:center;
		gap:25px;
	}

	.nav-menu.active {
		display:flex;
	}

	.mobile-login {
		display:block;
	}

	/* NUR den Login/Logout-Link im Header ausblenden (der wandert ja ins
	   aufklappbare Menü über .mobile-login) - ".login-button" ist aber
	   auch die allgemeine Klasse für so ziemlich jeden Haupt-Button auf
	   der Seite (Absenden, Speichern, Einloggen, Rechnung anlegen usw.).
	   Die bisherige Regel ".login-button { display:none; }" hat dadurch
	   ALLE diese Buttons auf dem Handy komplett unsichtbar gemacht - kein
	   Formular war mobil absendbar. Deshalb hier gezielt nur den Link im
	   Header treffen, nicht jeden Button mit dieser Klasse. */
	.navbar > a.login-button {
		display:none;
	}

	.menu-toggle {
		display:block;
	}

	.page-section {
		--diagonal:45px;
		min-height:0;
		margin-top:calc((var(--diagonal) + 2px) * -1);
		padding:calc(var(--diagonal) + 70px) 0 100px;
	}

	.page-section:first-child {
		margin-top:0;
		padding-top:130px;
	}

	.page-section:first-child .content-layout {
		flex-direction:column-reverse;
	}

	.content-layout {
		width:calc(100% - 40px);
		flex-direction:column;
		gap:40px;
		text-align:center;
	}

	.text-box,
	.image-box,
	.logo-box {
		width:100%;
		flex:none;
	}

	.text-box h1 {
		font-size:42px;
	}

	.text-box h2,
	.full-text h2 {
		font-size:32px;
	}

	.text-box p,
	.full-text p {
		font-size:17px;
	}

	.logo-box img {
		width:180px;
		margin:auto;
	}

	.full-text {
		width:calc(100% - 40px);
	}

	.animate-left {
		transform:translateX(-35px);
	}

	.animate-right {
		transform:translateX(35px);
	}

	.animate-up {
		transform:translateY(35px);
	}

	.animate-down {
		transform:translateY(-35px);
	}

	.animate-zoom {
		transform:scale(.94);
	}

}

.form-box {
	flex:1 1 100%;
	max-width:420px;
	margin:0 auto;
}

.form-field {
	margin-bottom:20px;
	text-align:left;
}

.form-field label {
	display:block;
	margin-bottom:8px;
	font-size:.85rem;
	color:var(--ink);
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="password"],
.form-field input[type="date"],
.form-field select,
.form-field textarea {
	width:100%;
	padding:12px 16px;
	border-radius:8px;
	border:1px solid rgba(128,128,128,.4);
	background:rgba(128,128,128,.14);
	color:var(--ink);
	font:inherit;
}

/* Betrifft ALLE <select> der Seite (Formularfelder, .tabellen-mini-input
   in den Inline-Editier-Tabellen wie Produkte/Mitarbeiter usw.): die
   aufgeklappte Options-Liste wird vom Browser nativ gerendert und
   übernimmt "color" (bei uns meist --ink, oft weiß) OHNE automatisch
   einen dazu passenden Hintergrund zu setzen - der Options-Hintergrund
   bleibt browserseitig oft weiß, was dann weißen Text auf weißem
   Hintergrund ergibt (unlesbar). Deshalb hier fest auf lesbare Farben
   setzen, unabhängig vom Theme des geschlossenen Auswahlfelds selbst.
   Muss unspezifisch auf "option" bleiben (nicht nur .tabellen-mini-input
   o.ä.), weil der Browser das nur so zuverlässig auf die Popup-Liste
   anwendet. */
select option {
	color:#1a1a1a;
	background:#ffffff;
}

.form-field textarea {
	resize:vertical;
	min-height:130px;
}

/* Auge-Button zum Anzeigen/Verbergen von Passwort-Feldern, siehe
   assets/js/password-toggle.js - baut sich automatisch um jedes
   type="password"-Feld herum. */
.password-field-wrapper {
	position:relative;
}

.password-field-wrapper input.password-input-toggleable {
	padding-right:46px;
}

.password-toggle {
	position:absolute;
	top:50%;
	right:6px;
	transform:translateY(-50%);
	display:flex;
	align-items:center;
	justify-content:center;
	width:34px;
	height:34px;
	padding:0;
	border:0;
	border-radius:6px;
	background:none;
	color:var(--ink);
	opacity:.6;
	cursor:pointer;
	transition:opacity .2s ease;
}

.password-toggle:hover,
.password-toggle:focus-visible {
	opacity:1;
}

/* Formularfelder auf dunklen Sektionen (lila/schwarz): die normale,
   sehr transparente Feld-Füllung (rgba(128,128,128,.14)) lässt den
   dunklen Sektionshintergrund fast unverändert durchscheinen, dadurch
   wirken die Felder selbst "lila"/dunkel statt wie ein Eingabefeld.
   Deshalb hier ein deutlich hellerer, fast weißer Feld-Hintergrund mit
   dunkler Schrift - unabhängig von der Sektionsfarbe gut erkennbar. */
.page-section.section-lila .form-field input,
.page-section.section-lila .form-field select,
.page-section.section-lila .form-field textarea,
.page-section.section-schwarz .form-field input,
.page-section.section-schwarz .form-field select,
.page-section.section-schwarz .form-field textarea {
	background:rgba(255,255,255,.92);
	border-color:rgba(255,255,255,.5);
	color:#1a1a1a;
}

.page-section.section-lila .form-field label,
.page-section.section-schwarz .form-field label {
	color:#ffffff;
}

/* Das Auge-Icon sitzt direkt auf dem (absichtlich fast weißen) Feld-
   Hintergrund von oben, nicht auf dem Sektionshintergrund - braucht hier
   also dieselbe dunkle Farbe wie der eingegebene Text im Feld, nicht das
   normale (auf lila/schwarz weiße) --ink. */
.page-section.section-lila .form-field .password-toggle,
.page-section.section-schwarz .form-field .password-toggle {
	color:#1a1a1a;
}

/* Fehlerhafte Formularfelder (Klasse "feld-fehler", wird serverseitig
   gesetzt, wenn genau dieses Feld beim Speichern abgelehnt wurde) - roter
   Hintergrund macht sofort sichtbar, welches Feld das Problem war. Beim
   Bearbeiten (Hover/Fokus) wechselt der Hintergrund kurz auf Weiß, damit
   der eingegebene Text dabei gut lesbar bleibt. Gilt in allen Sektionen
   gleich (daher dieselben Regeln nochmal mit den lila/schwarz-Präfixen,
   um die Sektionsfarben oben zu übersteuern). */
.form-field input.feld-fehler,
.form-field select.feld-fehler,
.form-field textarea.feld-fehler,
.page-section.section-lila .form-field input.feld-fehler,
.page-section.section-lila .form-field select.feld-fehler,
.page-section.section-lila .form-field textarea.feld-fehler,
.page-section.section-schwarz .form-field input.feld-fehler,
.page-section.section-schwarz .form-field select.feld-fehler,
.page-section.section-schwarz .form-field textarea.feld-fehler {
	background:#fca5a5;
	border-color:#b91c1c;
	color:#7f1d1d;
}

.form-field input.feld-fehler:hover,
.form-field select.feld-fehler:hover,
.form-field textarea.feld-fehler:hover,
.form-field input.feld-fehler:focus,
.form-field select.feld-fehler:focus,
.form-field textarea.feld-fehler:focus,
.page-section.section-lila .form-field input.feld-fehler:hover,
.page-section.section-lila .form-field select.feld-fehler:hover,
.page-section.section-lila .form-field textarea.feld-fehler:hover,
.page-section.section-lila .form-field input.feld-fehler:focus,
.page-section.section-lila .form-field select.feld-fehler:focus,
.page-section.section-lila .form-field textarea.feld-fehler:focus,
.page-section.section-schwarz .form-field input.feld-fehler:hover,
.page-section.section-schwarz .form-field select.feld-fehler:hover,
.page-section.section-schwarz .form-field textarea.feld-fehler:hover,
.page-section.section-schwarz .form-field input.feld-fehler:focus,
.page-section.section-schwarz .form-field select.feld-fehler:focus,
.page-section.section-schwarz .form-field textarea.feld-fehler:focus {
	background:#ffffff;
	color:#1a1a1a;
}

.form-field-checkbox label {
	display:flex;
	align-items:center;
	gap:10px;
	font-size:.85rem;
	margin:0;
}

.form-field-checkbox input {
	width:18px;
	height:18px;
	accent-color:#9d4edd;
}

.form-note {
	margin-top:16px;
	font-size:.85rem;
}

/* Erfolgs-/Fehlermeldungen als abgerundete Kästen mit eigenem
   Hintergrund (statt nur eingefärbtem Text) - dadurch überall auf der
   Seite gleich gut lesbar, egal ob die Sektion hell, lila oder schwarz
   ist (macht die früheren Sonderfälle für hellere/dunklere Textfarben
   je Sektion überflüssig - gilt jetzt einheitlich für die ganze Seite,
   Login/Support/Kontaktinformationen/Admin/... eingeschlossen).
   Bewusst OHNE text-shadow/Glow - nur ein dezenter Verlauf im
   Kasten-Hintergrund selbst, die Schrift bleibt durchgehend weiß auf
   kräftigem Grund für klaren Kontrast. */
.form-note.form-note-success,
.form-note.form-note-error {
	display:flex;
	align-items:center;
	gap:10px;
	padding:10px 16px;
	margin-bottom:10px;
	border-radius:12px;
	color:#ffffff;
	text-shadow:none;
	font-weight:600;
}

.form-note.form-note-success {
	background:linear-gradient(135deg,#22c55e 0%,#15803d 100%);
}

.form-note.form-note-error {
	background:linear-gradient(135deg,#f87171 0%,#b91c1c 100%);
}

.form-note.form-note-success::before,
.form-note.form-note-error::before {
	content:"";
	flex:none;
	width:18px;
	height:18px;
	background-repeat:no-repeat;
	background-position:center;
	background-size:contain;
}

.form-note.form-note-success::before {
	background-image: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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 13 9.5 18.5 20 6'/%3E%3C/svg%3E");
}

.form-note.form-note-error::before {
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 L22 20.5 L2 20.5 Z'/%3E%3Cline x1='12' y1='10' x2='12' y2='15'/%3E%3Ccircle cx='12' cy='17.6' r='0.6' fill='%23ffffff' stroke='none'/%3E%3C/svg%3E");
}

.honeypot-field {
	position:absolute;
	left:-9999px;
	width:1px;
	height:1px;
	overflow:hidden;
}

.cookie-overlay {
	position:fixed;
	inset:0;
	z-index:3000;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:20px;
	background:rgba(0,0,0,.6);
	backdrop-filter:blur(4px);
}

.cookie-modal {
	position:relative;
	width:min(100%,480px);
	max-height:90vh;
	overflow:auto;
	padding:36px 32px;
	border-radius:20px;
	background:linear-gradient(160deg,#1c1c1e 0%,#241a2e 45%,#182029 100%);
	color:rgba(255,255,255,.9);
	box-shadow:0 20px 60px rgba(0,0,0,.5);
}

.cookie-modal h2 {
	font-size:1.4rem;
	margin-bottom:16px;
}

.cookie-modal p {
	font-size:.9rem;
	line-height:1.6;
	color:rgba(255,255,255,.7);
}

.cookie-modal a {
	color:#fff;
	text-decoration:underline;
}

.cookie-options[hidden],
.cookie-actions[hidden],
.cookie-actions-save[hidden] {
	display:none;
}

.cookie-options {
	margin-top:24px;
	display:flex;
	flex-direction:column;
	gap:14px;
}

.cookie-toggle {
	display:flex;
	align-items:center;
	justify-content:space-between;
	font-size:.9rem;
	padding:10px 16px;
	border-radius:10px;
	background:rgba(255,255,255,.06);
}

.cookie-toggle input {
	width:20px;
	height:20px;
	accent-color:#9d4edd;
}

.cookie-actions {
	margin-top:28px;
	display:flex;
	flex-wrap:wrap;
	gap:12px;
	justify-content:flex-end;
}

.cookie-actions-save {
	margin-top:20px;
	display:flex;
	justify-content:flex-end;
}

.cookie-btn {
	font:inherit;
	border:0;
	padding:10px 24px;
	border-radius:50px;
	cursor:pointer;
	transition:transform .25s ease,filter .25s ease,background .25s ease;
}

.cookie-btn-ghost {
	background:rgba(255,255,255,.08);
	color:rgba(255,255,255,.85);
}

.cookie-btn-ghost:hover {
	background:rgba(255,255,255,.16);
}

.cookie-btn-accept {
	background:linear-gradient(135deg,#4f7a92 0%,#48484f 22%,#414148 50%,#48484f 78%,#6b4c86 100%);
	color:#fff;
}

.cookie-btn-accept:hover {
	filter:brightness(1.2) saturate(1.3);
	transform:translateY(-2px);
}

@media(max-width:520px) {

	.cookie-modal {
		padding:28px 22px;
	}

	.cookie-actions {
		flex-direction:column-reverse;
	}

	.cookie-btn {
		width:100%;
		text-align:center;
	}

}

.form-box-wide {
	flex:1 1 100%;
	max-width:680px;
	margin:0 auto;
}

.wide-box {
	flex:1 1 100%;
	width:100%;
}

.form-grid {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:0 20px;
}

.admin-table {
	width:100%;
	border-collapse:collapse;
	margin-top:20px;
	font-size:.85rem;
}

.admin-table th,
.admin-table td {
	text-align:left;
	padding:10px 14px;
	color:var(--ink);
	border-bottom:1px solid rgba(128,128,128,.3);
}

.admin-table th {
	font-size:.75rem;
	text-transform:uppercase;
	letter-spacing:.05em;
	opacity:.7;
}

.admin-table a {
	color:var(--ink);
	text-decoration:underline;
}

.status-badge {
	display:inline-block;
	padding:3px 10px;
	border-radius:20px;
	font-size:.75rem;
}

/* Rechnungs-Status-Badges (pages/rechnungen.php, rechnungen-uebersicht.php)
   - diese Tabellen stehen immer auf hellen Sektionen. Die Farben sind
   deshalb bewusst dunkel/kräftig (nicht die helleren Pastelltöne, die
   auf dunklem Hintergrund gut aussähen, auf Weiß/Hellgrau aber kaum
   lesbar wären). */
.status-offen {
	background:rgba(245,158,11,.18);
	color:#92400e;
}

.status-bezahlt {
	background:rgba(34,197,94,.18);
	color:#166534;
}

.status-storniert {
	background:rgba(100,116,139,.15);
	color:#475569;
}

/* Aktiv/Pausiert-Badges (monatliche-rechnungen.php) - eigene, kräftige
   Farben statt der pastelligen Rechnungs-Status-Farben oben, da hier die
   Lesbarkeit bemängelt wurde. */
.status-aktiv {
	background:#16a34a;
	color:#ffffff;
}

.status-pausiert {
	background:#facc15;
	color:#1a1a1a;
}

.link-button {
	color:var(--ink);
	text-decoration:underline;
	background:none;
	border:0;
	font:inherit;
	cursor:pointer;
	padding:0;
}

/* Kleines Formular direkt in einer Tabellenzelle (z.B. Rolle ändern in
   pages/mitarbeiter.php) - Auswahlfeld + Button nebeneinander statt
   untereinander. */
.inline-form {
	display:flex;
	align-items:center;
	gap:8px;
}

.inline-form select {
	padding:6px 8px;
	border-radius:6px;
	border:1px solid rgba(128,128,128,.4);
	background:rgba(128,128,128,.14);
	color:var(--ink);
	font:inherit;
	font-size:.85rem;
}

/* Direkt in einer Tabellenzelle editierbares Feld (z.B. Mitarbeiter
   bearbeiten in pages/mitarbeiter.php, Produkte bearbeiten in
   pages/produkte.php) - kompakter als ein normales .form-field-
   Eingabefeld, da mehrere davon in einer Tabellenzeile nebeneinander
   stehen. */
.tabellen-mini-input {
	width:100%;
	max-width:140px;
	padding:6px 8px;
	border-radius:6px;
	border:1px solid rgba(128,128,128,.4);
	background:rgba(128,128,128,.14);
	color:var(--ink);
	font:inherit;
	font-size:.85rem;
}

.tabellen-mini-input.feld-fehler {
	background:#fca5a5;
	border-color:#b91c1c;
	color:#7f1d1d;
}

.tabellen-mini-input.feld-fehler:hover,
.tabellen-mini-input.feld-fehler:focus {
	background:#ffffff;
	color:#1a1a1a;
}

/* Produkte-Spalte in der Kundenübersicht (pages/admin.php): Liste der
   zugewiesenen Produkte + "Produkt zuweisen"-Aufklapper. */
.kunde-produkte-zelle {
	min-width:220px;
}

.kunde-produkt-eintrag {
	padding:8px 0;
	border-bottom:1px solid rgba(128,128,128,.25);
	font-size:.85rem;
}

.kunde-produkt-eintrag:last-of-type {
	border-bottom:0;
}

.kunde-produkt-eintrag form {
	display:flex;
	align-items:center;
	gap:6px;
	margin-top:4px;
}

.kunde-produkt-zuweisen {
	margin-top:8px;
	font-size:.85rem;
}

.kunde-produkt-zuweisen summary {
	cursor:pointer;
	color:var(--accent, inherit);
}

.kunde-produkt-zuweisen form {
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	gap:6px;
	margin-top:6px;
}

/* Suchmaske (pages/laufende-vertraege.php, pages/rechnungen-uebersicht.php)
   - dieselben .form-grid/.form-field-Bausteine wie normale Formulare,
   nur mit weniger Abstand nach unten, weil direkt danach die
   Ergebnistabelle folgt statt eines weiteren Abschnitts. */
.suchmaske {
	margin-bottom:24px;
}

.suchmaske .form-field {
	margin-bottom:12px;
}

.suchmaske a {
	margin-left:12px;
	font-size:.9rem;
}

@media(max-width:600px) {

	.form-grid {
		grid-template-columns:1fr;
	}

	/* Rechnungen-/Monatliche-Rechnungen-/Jahresbilanz-Tabellen haben zu
	   viele Spalten für schmale Handy-Breiten - statt gequetschtem Text
	   oder abgeschnittenem Rand lieber die Tabelle als Ganzes seitlich
	   scrollbar machen (Inhalt bleibt lesbar, nichts läuft über). */
	.admin-table {
		display:block;
		overflow-x:auto;
		-webkit-overflow-scrolling:touch;
		white-space:nowrap;
	}

}

/* Akkordion (z.B. Kontaktinformationen, Admin-Startseite) - jeder
   Eintrag lässt sich einzeln auf-/zuklappen. Der Hintergrund wechselt
   leicht abwechselnd (even/odd), damit sich die Einträge gerade auf
   hellen (weißen) Sektionen sichtbar voneinander abheben. */
.accordion {
	width:100%;
	border-top:1px solid rgba(128,128,128,.25);
	margin-top:10px;
}

.accordion-item {
	border-bottom:1px solid rgba(128,128,128,.25);
	background:rgba(128,128,128,.05);
}

.accordion-item:nth-child(even) {
	background:rgba(128,128,128,.14);
}

.accordion-header {
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:20px;
	width:100%;
	padding:18px 20px;
	background:none;
	border:0;
	font:inherit;
	text-align:left;
	color:var(--ink);
	cursor:pointer;
}

.accordion-header h3 {
	font-size:1.05rem;
	margin:0;
}

.accordion-arrow {
	flex:none;
	width:10px;
	height:10px;
	border-right:2px solid var(--ink);
	border-bottom:2px solid var(--ink);
	transform:rotate(45deg);
	transition:transform .25s ease;
	opacity:.7;
}

.accordion-item.open .accordion-arrow {
	transform:rotate(-135deg);
}

.accordion-body {
	display:grid;
	grid-template-rows:0fr;
	transition:grid-template-rows .3s ease;
}

.accordion-item.open .accordion-body {
	grid-template-rows:1fr;
}

.accordion-body-inner {
	overflow:hidden;
	padding:0 20px;
}

.accordion-item.open .accordion-body-inner {
	padding:0 20px 24px;
}

/* Support-Chat (pages/support.php, pages/supportnachrichten.php) */

.support-status {
	display:inline-flex;
	align-items:center;
	gap:6px;
	color:var(--ink);
	font-size:.85rem;
	font-weight:600;
}

.support-status::before {
	content:"";
	width:8px;
	height:8px;
	border-radius:50%;
	flex:none;
}

.support-status-offen::before {
	background:#f97316;
}

.support-status-beantwortet::before {
	background:#22c55e;
}

.support-ticket-meta {
	display:flex;
	align-items:center;
	gap:16px;
	flex-wrap:wrap;
}

.kategorie-picker {
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	margin:12px 0 20px;
}

.kategorie-picker input[type="radio"] {
	position:absolute;
	opacity:0;
	width:1px;
	height:1px;
}

.kategorie-picker label {
	padding:10px 18px;
	border-radius:50px;
	border:1px solid var(--stroke-color);
	color:var(--ink);
	cursor:pointer;
	font-size:.9rem;
	transition:background .2s ease, transform .2s ease;
}

.kategorie-picker input[type="radio"]:checked + label {
	background:rgba(56,189,248,.25);
	border-color:#38bdf8;
	transform:translateY(-1px);
}

.chat-thread {
	display:flex;
	flex-direction:column;
	gap:12px;
	margin:16px 0;
}

.chat-bubble {
	max-width:85%;
	padding:12px 16px;
	border-radius:14px;
	background:rgba(128,128,128,.14);
	border:1px solid rgba(128,128,128,.25);
	color:var(--ink);
}

.chat-bubble p {
	margin:0;
	white-space:pre-wrap;
	word-break:break-word;
}

.chat-bubble-kunde {
	align-self:flex-end;
	background:#e6e6e6;
	border-color:#d0d0d0;
	color:#1a1a1a;
}

.chat-bubble-admin {
	align-self:flex-start;
	background:#3a3a3a;
	border-color:#4c4c4c;
	color:#ffffff;
}

/* ".text-box p" (weiter oben in der Datei) setzt für JEDEN <p> in einer
   .text-box "color:var(--ink)" - das schlägt die von .chat-bubble-kunde/
   -admin nur vererbte Textfarbe, weil eine direkte Regel immer vor einer
   geerbten gewinnt. Deshalb hier dieselbe Farbe nochmal explizit auf die
   <p> selbst, damit die Chat-Bubbles unabhängig von --ink immer korrekt
   hell/dunkel bleiben. */
.chat-bubble-kunde p {
	color:#1a1a1a;
	/* ".text-box p" (weiter oben) setzt allen Fließtext-Absätzen ein
	   Leucht-Glow (text-shadow) für Lesbarkeit auf Bild-/Farbverläufen -
	   auf der schlicht grauen Chat-Bubble sieht das nur unsauber/verwaschen
	   aus, deshalb hier explizit deaktiviert. */
	text-shadow:none;
}

.chat-bubble-admin p {
	color:#ffffff;
}

.chat-bubble-kunde .chat-meta,
.chat-bubble-admin .chat-meta {
	opacity:.75;
}

.chat-bubble-kunde .chat-meta {
	color:#1a1a1a;
}

.chat-bubble-admin .chat-meta {
	color:#ffffff;
}

.chat-meta {
	display:block;
	margin-top:6px;
	color:var(--ink);
	font-size:.75rem;
	opacity:.65;
}

.chat-reply-form {
	display:flex;
	flex-direction:column;
	gap:10px;
	margin-top:16px;
}

.chat-reply-form textarea {
	min-height:80px;
}

.ticket-actions {
	display:flex;
	gap:12px;
	flex-wrap:wrap;
	margin-top:16px;
	align-items:center;
}

.delete-button {
	background:rgba(220,70,70,.9);
	border:1px solid rgba(220,70,70,1);
	color:#ffffff;
	padding:8px 18px;
	border-radius:50px;
	cursor:pointer;
	font-size:.85rem;
	font-weight:600;
}

.delete-button:hover {
	background:rgba(190,50,50,.95);
}

/* Kleine runde Zähler-Badge in der Navigation - offene Support-Tickets
   (Admin) bzw. neu beantwortete Tickets (Kunde). */
.nav-badge {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:18px;
	height:18px;
	padding:0 5px;
	margin-left:6px;
	border-radius:50%;
	background:#9d4edd;
	color:#ffffff;
	font-size:.7rem;
	font-weight:700;
	line-height:1;
	vertical-align:middle;
}