/*!
 * Kundenportal – Frontend
 * (c) 2026 ROSE IT Management UG (haftungsbeschränkt) – https://itrose.de
 * Gestaltung nach dem ROSE-Plugin-Baukasten. Farben kommen aus den Einstellungen (--kp-primary, --kp-accent).
 * Schriften: Montserrat & Poppins (SIL Open Font License 1.1, lokal eingebunden – kein Google-Abruf).
 */
@font-face { font-family: "KP Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/montserrat-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "KP Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/montserrat-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "KP Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/poppins-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "KP Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/poppins-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "KP Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/poppins-latin-600-normal.woff2) format("woff2"); }

.kp {
	--kp-primary: #1a2148;
	--kp-on-primary: #ffffff;
	--kp-accent: #0070b6;
	--kp-on-accent: #ffffff;
	--kp-ink: #1a2148;
	--kp-text: #1b2335;
	--kp-muted: #626c85;
	--kp-line: #e1e7f0;
	--kp-bg: #f3f5fa;
	--kp-surface: #ffffff;
	--kp-soft: #f6f8fc;
	--kp-ok: #1f8a5b;
	--kp-ok-bg: #e6f5ee;
	--kp-warn: #a86a12;
	--kp-warn-bg: #fdf3e1;
	--kp-bad: #c8374a;
	--kp-bad-bg: #fce9ec;
	--kp-radius: 14px;
	--kp-shadow: 0 1px 2px rgba(15, 27, 51, .05), 0 8px 24px rgba(15, 27, 51, .06);
	--kp-head: "KP Montserrat", "Montserrat", system-ui, sans-serif;
	--kp-body: "KP Poppins", "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

body.kp {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--kp-bg);
	color: var(--kp-text);
	font: 15px/1.6 var(--kp-body);
	-webkit-font-smoothing: antialiased;
}
.kp a { color: var(--kp-ink); }
.kp h1, .kp h2, .kp h3 { font-family: var(--kp-head); letter-spacing: -.01em; color: var(--kp-text); line-height: 1.25; }
.kp h1 { font-size: clamp(22px, 3vw, 28px); font-weight: 700; margin: 0; }
.kp h2 { font-size: 17px; font-weight: 700; margin: 0; }
.kp-wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.kp-muted { color: var(--kp-muted); }
.kp-skip { position: absolute; left: -9999px; top: 8px; background: #fff; padding: 8px 14px; border-radius: 8px; z-index: 10; }
.kp-skip:focus { left: 16px; }

/* ---------- Kopfleiste ---------- */
.kp-top {
	color: var(--kp-on-primary);
	background:
		radial-gradient(120% 160% at 100% 0%, color-mix(in srgb, var(--kp-accent) 45%, transparent) 0%, transparent 55%),
		linear-gradient(135deg, var(--kp-primary), color-mix(in srgb, var(--kp-primary) 70%, var(--kp-accent)));
	box-shadow: 0 6px 24px rgba(15, 27, 51, .16);
}
.kp-top__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; min-height: 72px; padding-top: 12px; padding-bottom: 12px; }
.kp .kp-brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; min-width: 0; }
.kp-brand__logo { flex: none; width: 44px; height: 44px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0, 0, 0, .15); overflow: hidden; }
.kp-brand__logo img { max-width: 34px; max-height: 34px; display: block; }
.kp-brand__logo span { font-family: var(--kp-head); font-weight: 700; font-size: 20px; color: var(--kp-primary); }
.kp-brand__text { display: grid; line-height: 1.2; }
.kp-brand__text strong { font-family: var(--kp-head); font-size: 17px; font-weight: 700; }
.kp-brand__text small { font-size: 12.5px; opacity: .72; }

.kp-nav { display: flex; gap: 6px; flex-wrap: wrap; }
.kp .kp-nav__item {
	color: inherit; text-decoration: none; font-weight: 500; font-size: 14px;
	padding: 8px 16px; border-radius: 10px; border: 1px solid transparent; opacity: .9; transition: background .15s, opacity .15s;
}
.kp .kp-nav__item:hover { background: rgba(255, 255, 255, .12); opacity: 1; }
.kp .kp-nav__item.is-active { background: #fff; color: var(--kp-primary); opacity: 1; font-weight: 600; box-shadow: 0 4px 12px rgba(0, 0, 0, .12); }
.kp .kp-nav__item--outline { border-color: rgba(255, 255, 255, .35); }
.kp .kp-nav__item:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- Inhalt ---------- */
.kp-main { flex: 1; padding-top: 28px; padding-bottom: 48px; }
.kp-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.kp-pagehead p { margin: 4px 0 0; color: var(--kp-muted); }
.kp-kicker { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--kp-muted); margin-bottom: 4px; }

.kp-card {
	background: var(--kp-surface); border: 1px solid var(--kp-line); border-radius: var(--kp-radius);
	box-shadow: var(--kp-shadow); padding: 22px 26px; margin: 0 0 18px;
}
.kp-card__head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.kp-card__icon { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--kp-accent) 10%, white); color: var(--kp-ink); }
.kp-card__icon svg { width: 22px; height: 22px; }
.kp-card__sub { margin: 2px 0 0; color: var(--kp-muted); font-size: 14px; }

.kp-notice { border-radius: 12px; padding: 12px 16px; margin-bottom: 18px; background: var(--kp-surface); border: 1px solid var(--kp-line); border-left: 4px solid; box-shadow: var(--kp-shadow); }
.kp-notice p { margin: 0; }
.kp-notice--success { border-left-color: var(--kp-ok); }
.kp-notice--error { border-left-color: var(--kp-bad); }
.kp-notice--info { border-left-color: var(--kp-accent); }

/* ---------- Kennzahlen ---------- */
.kp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 22px; }
.kp-stat { background: var(--kp-surface); border: 1px solid var(--kp-line); border-radius: var(--kp-radius); box-shadow: var(--kp-shadow); padding: 14px 18px; }
.kp-stat__label { display: block; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--kp-muted); }
.kp-stat__value { display: block; font-family: var(--kp-head); font-size: 20px; font-weight: 700; color: var(--kp-ink); margin-top: 2px; line-height: 1.3; }

/* ---------- Pills ---------- */
.kp-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; line-height: 1; padding: 6px 11px; border-radius: 99px; white-space: nowrap; background: var(--kp-soft); color: var(--kp-muted); }
.kp-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.kp-pill--anfrage { background: var(--kp-warn-bg); color: var(--kp-warn); }
.kp-pill--angebot, .kp-pill--fotografiert, .kp-pill--bearbeitung { background: color-mix(in srgb, var(--kp-accent) 12%, white); color: var(--kp-ink); }
.kp-pill--gebucht { background: var(--kp-ok-bg); color: var(--kp-ok); }
.kp-pill--auswahl, .kp-pill--ausgeliefert { background: var(--kp-accent); color: var(--kp-on-accent); }
.kp-pill--abgelaufen { background: var(--kp-bad-bg); color: var(--kp-bad); }

/* ---------- Projektliste ---------- */
.kp-projects { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.kp .kp-project {
	display: flex; flex-direction: column; gap: 10px; height: 100%; text-decoration: none; color: inherit;
	background: var(--kp-surface); border: 1px solid var(--kp-line); border-radius: var(--kp-radius); box-shadow: var(--kp-shadow);
	padding: 20px 22px; transition: transform .15s, border-color .15s, box-shadow .15s;
}
.kp .kp-project:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--kp-accent) 50%, var(--kp-line)); box-shadow: 0 12px 30px rgba(15, 27, 51, .1); }
.kp .kp-project:focus-visible { outline: 3px solid var(--kp-accent); outline-offset: 2px; }
.kp-project__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.kp-project__nr { font-family: ui-monospace, Consolas, monospace; font-size: 12px; font-weight: 600; color: var(--kp-muted); }
.kp-project__title { font-family: var(--kp-head); font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--kp-text); }
.kp-project__meta { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--kp-muted); }
.kp-project__meta span { display: flex; align-items: center; gap: 8px; }
.kp-project__meta svg { flex: none; width: 16px; height: 16px; color: var(--kp-ink); }
.kp-project__hint { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--kp-line); font-size: 14px; }
.kp-project__more { font-weight: 600; color: var(--kp-ink); font-size: 14px; }

.kp-empty { text-align: center; padding: 40px 24px; }
.kp-empty .kp-card__icon { margin: 0 auto 14px; width: 56px; height: 56px; border-radius: 50%; }

/* ---------- Projektseite ---------- */
.kp-back { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; text-decoration: none; margin-bottom: 14px; }
.kp-back:hover { text-decoration: underline; }
.kp-back svg { flex: none; width: 18px; height: 18px; }

.kp-hero {
	border-radius: 18px; padding: 26px 28px; margin-bottom: 18px; color: var(--kp-on-primary);
	background:
		radial-gradient(120% 160% at 100% 0%, color-mix(in srgb, var(--kp-accent) 40%, transparent) 0%, transparent 55%),
		linear-gradient(135deg, var(--kp-primary), color-mix(in srgb, var(--kp-primary) 72%, var(--kp-accent)));
	box-shadow: 0 10px 30px rgba(15, 27, 51, .18);
}
.kp-hero__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.kp .kp-hero h1 { color: inherit; margin-top: 4px; }
.kp-hero .kp-kicker { color: inherit; opacity: .72; margin: 0; }
.kp-hero .kp-pill { background: rgba(255, 255, 255, .16); color: inherit; }

.kp-progress { margin-top: 24px; }
.kp-progress__bar { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.kp-progress__bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgba(255, 255, 255, .7), #fff); }
.kp-progress__labels { list-style: none; display: flex; justify-content: space-between; gap: 6px; margin: 10px 0 0; padding: 0; font-size: 12.5px; }
.kp-progress__labels li { opacity: .6; }
.kp-progress__labels .is-done { opacity: .9; }
.kp-progress__labels .is-current { opacity: 1; font-weight: 600; }
.kp-hero__hint { margin: 18px 0 0; padding: 12px 16px; border-radius: 12px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); }

.kp-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 0; }
.kp-facts > div { background: var(--kp-soft); border-radius: 10px; padding: 12px 16px; min-width: 0; }
.kp-facts dt { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--kp-muted); font-weight: 600; }
.kp-facts dd { margin: 2px 0 0; font-weight: 500; word-break: break-word; }
.kp-description { margin-top: 16px; }
.kp-description p { margin: 0 0 10px; }
.kp-description p:last-child { margin: 0; }

.kp-soon { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.kp-soon > div { border: 1.5px dashed var(--kp-line); border-radius: 12px; padding: 16px 18px; color: var(--kp-muted); font-size: 14px; }
.kp-soon strong { display: block; color: var(--kp-text); font-family: var(--kp-head); font-size: 15px; margin-bottom: 2px; }

/* ---------- Unterlagen & Rechnungen ---------- */
.kp-subhead { font-size: 12px !important; text-transform: uppercase; letter-spacing: .06em; color: var(--kp-muted) !important; margin: 18px 0 6px !important; font-family: var(--kp-body) !important; font-weight: 600 !important; }
.kp-subhead:first-of-type { margin-top: 0 !important; }
.kp-docs { list-style: none; margin: 0; padding: 0; }
.kp-doc { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--kp-line); margin: 0; }
.kp-doc:last-child { border-bottom: 0; }
.kp-doc.is-hidden { opacity: .6; }
.kp-doc__icon { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--kp-soft); color: var(--kp-ink); }
.kp-doc__icon svg { width: 20px; height: 20px; }
.kp-doc__main { flex: 1; min-width: 0; display: grid; }
.kp-doc__main strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-doc__main .kp-muted { font-size: 13px; }
.kp-doc__amount { display: grid; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kp-doc__amount small { font-weight: 400; font-size: 12px; }
.kp .kp-doc__dl { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--kp-line); text-decoration: none; font-weight: 600; font-size: 14px; color: var(--kp-ink); }
.kp .kp-doc__dl:hover { border-color: var(--kp-ink); }
.kp-doc__dl svg { width: 17px; height: 17px; }
.kp-small { font-size: 13px; }
@media (max-width: 640px) {
	.kp-doc { flex-wrap: wrap; gap: 8px 12px; }
	.kp-doc__main { flex-basis: calc(100% - 54px); }
	.kp-doc__amount { margin-left: 54px; text-align: left; }
	.kp-doc .kp-pill { margin-left: auto; }
	.kp-doc__dl span { display: none; }
}

/* ---------- Galerie ---------- */
.kp-expiry { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-radius: 12px; background: var(--kp-soft); margin-bottom: 16px; }
.kp-expiry svg { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--kp-ink); }
.kp-expiry small { color: var(--kp-muted); }
.kp-expiry--soon { background: var(--kp-warn-bg); }
.kp-expiry--soon svg { color: var(--kp-warn); }
.kp-expiry--over { background: var(--kp-bad-bg); }
.kp-expiry--over svg { color: var(--kp-bad); }

.kp-downloads { display: flex; align-items: flex-start; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 20px; }
.kp-btn svg { width: 19px; height: 19px; flex: none; }
.kp-parts { padding-top: 12px; font-size: 14px; }
.kp-parts summary { cursor: pointer; font-weight: 600; color: var(--kp-ink); }
.kp-parts ul { margin: 10px 0 6px; padding-left: 18px; }
.kp-parts li { margin: 4px 0; }
.kp-parts p { margin: 0; font-size: 13px; }

.kp-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.kp-grid li { margin: 0; }
.kp-grid a { display: block; border-radius: 10px; overflow: hidden; background: var(--kp-soft); aspect-ratio: 1; }
.kp-grid img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s, opacity .2s; }
.kp-grid a:hover img { transform: scale(1.04); }
.kp-grid a:focus-visible { outline: 3px solid var(--kp-accent); outline-offset: 2px; }

.kp-noscroll { overflow: hidden; }
.kp-lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(10, 14, 26, .94); display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; }
.kp-lightbox[hidden] { display: none; }
.kp-lightbox__figure { margin: 0; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 56px 0 16px; min-width: 0; }
.kp-lightbox__figure img { max-width: 100%; max-height: calc(100vh - 140px); object-fit: contain; border-radius: 6px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); transition: opacity .2s; }
.kp-lightbox.is-loading img { opacity: .4; }
.kp-lightbox__bar { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; justify-content: center; margin-top: 16px; color: rgba(255, 255, 255, .8); font-size: 14px; }
.kp .kp-lightbox__dl { display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-weight: 600; padding: 8px 16px; border-radius: 10px; background: rgba(255, 255, 255, .12); }
.kp .kp-lightbox__dl:hover { background: rgba(255, 255, 255, .2); }
.kp-lightbox__dl svg { width: 18px; height: 18px; }
.kp-lightbox__nav, .kp-lightbox__close { border: 0; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; border-radius: 50%; display: grid; place-items: center; }
.kp-lightbox__nav { width: 48px; height: 48px; justify-self: center; }
.kp-lightbox__nav svg { width: 24px; height: 24px; }
.kp-lightbox__nav:hover, .kp-lightbox__close:hover { background: rgba(255, 255, 255, .22); }
.kp-lightbox__close { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; font-size: 28px; line-height: 1; z-index: 2; }
.kp-lightbox button:focus-visible, .kp-lightbox a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 640px) {
	.kp-grid { grid-template-columns: repeat(3, 1fr); gap: 4px; }
	.kp-grid a { border-radius: 4px; }
	.kp-lightbox { grid-template-columns: 1fr; }
	.kp-lightbox__nav { position: absolute; bottom: 18px; width: 44px; height: 44px; }
	.kp-lightbox__nav--prev { left: 16px; }
	.kp-lightbox__nav--next { right: 16px; }
	.kp-lightbox__figure { padding: 60px 8px 80px; }
	.kp-lightbox__figure img { max-height: calc(100vh - 220px); }
	.kp-downloads .kp-btn { width: 100%; }
}

/* ---------- Formulare ---------- */
.kp-form-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px 18px; }
.kp-col-12 { grid-column: span 12; } .kp-col-8 { grid-column: span 8; } .kp-col-6 { grid-column: span 6; } .kp-col-4 { grid-column: span 4; } .kp-col-3 { grid-column: span 3; }
.kp-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kp-field label { font-weight: 600; font-size: 14px; }
.kp-field small { color: var(--kp-muted); font-size: 12.5px; }
.kp input[type="text"], .kp input[type="email"], .kp input[type="tel"] {
	width: 100%; font: inherit; color: inherit; background: #fff;
	border: 1.5px solid var(--kp-line); border-radius: 10px; padding: 11px 13px; min-height: 46px; transition: border-color .2s, box-shadow .2s;
}
.kp input:focus { outline: none; border-color: var(--kp-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--kp-ink) 18%, transparent); }
.kp input[readonly] { background: var(--kp-soft); color: var(--kp-muted); }

.kp-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-family: var(--kp-head); font-weight: 700; font-size: 15px;
	padding: 13px 26px; border-radius: 10px; border: 2px solid var(--kp-accent); background: var(--kp-accent); color: var(--kp-on-accent);
	cursor: pointer; text-decoration: none; transition: transform .15s, box-shadow .2s, filter .2s;
}
.kp-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(16, 32, 60, .18); filter: brightness(1.05); color: var(--kp-on-accent); }
/* Links als Button: Textfarbe immer passend zur Buttonfarbe (sonst greift die allgemeine Linkfarbe). */
.kp a.kp-btn, .kp a.kp-btn:hover, .kp a.kp-btn:visited { color: var(--kp-on-accent); text-decoration: none; }
.kp-btn:focus-visible { outline: 3px solid var(--kp-ink); outline-offset: 2px; }
.kp-btn--block { width: 100%; }
.kp-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--kp-line); }

/* ---------- Login ---------- */
.kp--guest .kp-main { display: grid; place-items: center; padding-top: 48px; }
.kp-auth { width: 100%; max-width: 440px; text-align: center; }
.kp-auth .kp-card { padding: 34px 32px; text-align: left; }
.kp-auth__icon { width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 16px; display: grid; place-items: center; background: color-mix(in srgb, var(--kp-accent) 12%, white); color: var(--kp-ink); }
.kp-auth__icon svg { width: 26px; height: 26px; }
.kp-auth h1 { text-align: center; font-size: 24px; }
.kp-auth p.kp-lead { text-align: center; color: var(--kp-muted); margin: 8px 0 24px; }
.kp-auth .kp-field { margin-bottom: 16px; }
.kp-auth__foot { margin-top: 16px; font-size: 13px; color: var(--kp-muted); }

/* ---------- Fuß ---------- */
.kp-footer { border-top: 1px solid var(--kp-line); background: var(--kp-surface); padding: 18px 0; font-size: 13px; color: var(--kp-muted); }
.kp-footer__inner { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.kp-footer__links { display: flex; gap: 18px; }
.kp-footer a { color: var(--kp-muted); text-decoration: none; }
.kp-footer a:hover { color: var(--kp-text); text-decoration: underline; }

@media (max-width: 640px) {
	.kp-top__inner { padding-top: 14px; padding-bottom: 14px; }
	.kp-nav { width: 100%; }
	.kp .kp-nav__item { flex: 1; text-align: center; padding: 8px 10px; }
	.kp-card { padding: 18px; }
	.kp-hero { padding: 20px; }
	.kp-progress__labels li:not(.is-current) { display: none; }
	.kp-progress__labels { justify-content: center; }
	.kp-form-grid > [class*="kp-col-"] { grid-column: span 12; }
	.kp-actions .kp-btn { width: 100%; }
	.kp-auth .kp-card { padding: 24px 20px; }
}
@media (prefers-reduced-motion: reduce) {
	.kp * { transition: none !important; }
}

/* ---------- Verträge ---------- */
.kp-contract { padding: clamp(22px, 4vw, 40px); }
.kp-contract h2.kp-contract__title { font-size: clamp(20px, 2.6vw, 26px); margin: 0 0 18px; }
.kp-contract h3 { font-family: var(--kp-head); font-size: 16px; margin: 24px 0 8px; color: var(--kp-text); }
.kp-contract p { margin: 0 0 12px; }
.kp-contract ul { margin: 0 0 12px; padding-left: 20px; }
.kp-contract li { margin: 4px 0; }
.kp-cfield { display: inline-block; font-weight: 600; background: var(--kp-soft); border-radius: 6px; padding: 1px 8px; }
.kp-req { color: var(--kp-bad); }
.kp-label { font-weight: 600; font-size: 14px; }
.kp-cinput { margin: 6px 0 16px; }
.kp textarea { width: 100%; font: inherit; color: inherit; background: #fff; border: 1.5px solid var(--kp-line); border-radius: 10px; padding: 11px 13px; transition: border-color .2s, box-shadow .2s; resize: vertical; }
.kp textarea:focus { outline: none; border-color: var(--kp-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--kp-ink) 18%, transparent); }
.kp-ccheck { display: flex; gap: 12px; align-items: flex-start; margin: 10px 0 16px; padding: 14px 16px; border-radius: 12px; background: var(--kp-soft); cursor: pointer; font-weight: 500; }
.kp-ccheck input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--kp-ink); }
.kp-cchoice { border: 0; margin: 10px 0 16px; padding: 0; }
.kp-cchoice legend { font-weight: 600; margin-bottom: 8px; padding: 0; }
.kp-cchoice label { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border: 1.5px solid var(--kp-line); border-radius: 12px; margin-bottom: 8px; cursor: pointer; transition: border-color .15s, background .15s; }
.kp-cchoice label:hover { border-color: color-mix(in srgb, var(--kp-ink) 40%, var(--kp-line)); }
.kp-cchoice label:has(input:checked) { border-color: var(--kp-ink); background: color-mix(in srgb, var(--kp-ink) 6%, white); }
.kp-cchoice input { width: 18px; height: 18px; flex: none; accent-color: var(--kp-ink); }
.kp-ccheck.is-invalid, .kp-cchoice.is-invalid label { border: 1.5px solid var(--kp-bad); }
.kp-field-error { display: block; color: var(--kp-bad); font-size: 13px; margin: -8px 0 12px; }
.kp-field .kp-field-error { margin: 2px 0 0; }

.kp-signbox .kp-field { margin-bottom: 16px; }
.kp-sigpad { position: relative; border: 2px dashed #c9d3e3; border-radius: 12px; background: #fff; overflow: hidden; touch-action: none; }
.kp-sigpad canvas { display: block; width: 100%; cursor: crosshair; touch-action: none; }
.kp-sigpad::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: 36px; border-bottom: 1px solid var(--kp-line); pointer-events: none; }
.kp-sigpad__hint { position: absolute; inset: 0; display: grid; place-items: center; color: var(--kp-muted); pointer-events: none; font-size: 14px; padding: 0 16px; text-align: center; }
.kp-sigpad__clear { position: absolute; top: 8px; right: 8px; border: 1px solid var(--kp-line); background: #fff; border-radius: 8px; padding: 4px 10px; font: inherit; font-size: 13px; color: var(--kp-muted); cursor: pointer; }
.kp-sigpad.is-signed { border-style: solid; border-color: var(--kp-ink); }
.kp-sigpad.is-invalid { border-color: var(--kp-bad); }
.kp-btn--sm { padding: 8px 16px; font-size: 14px; }
.kp-signed .kp-card__head { align-items: center; margin-bottom: 0; }
.kp-signed .kp-card__head .kp-btn { margin-left: auto; }
.kp-notice--action { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.kp-sigpad__hint[hidden], .kp-field-error[hidden] { display: none; }

/* Mehrere Felder nebeneinander (z. B. Adresse + Uhrzeit) */
.kp-crow { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 14px; }
.kp-crow > .kp-cinput { margin-bottom: 12px; }

/* Mehrere Unterzeichner */
.kp-signers--multi { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 8px 24px; }
.kp-signer__title { font-family: var(--kp-head); font-size: 15px; margin: 4px 0 10px; }

/* Anlagen */
.kp-annex h3 { font-family: var(--kp-head); font-size: 16px; margin: 0 0 10px; }
.kp-annex__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.kp-annex__list > li > a { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--kp-text); text-decoration: none; padding: 6px 0; }
.kp-annex__list > li > a:hover { text-decoration: underline; }
.kp-annex__list > li > a svg { width: 18px; height: 18px; flex: none; }
.kp-annex .kp-ccheck { margin: 4px 0 14px; }
.kp-contract h2.kp-contract__title:not(:first-child) { margin-top: 36px; }

/* Bilder erst nach Zahlung */
.kp-paylock { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; margin: 0 0 18px; border-radius: 14px; background: color-mix(in srgb, var(--kp-accent) 9%, white); border: 1px solid color-mix(in srgb, var(--kp-accent) 25%, white); }
.kp-paylock__icon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: #fff; color: var(--kp-ink); }
.kp-paylock__icon svg { width: 20px; height: 20px; }
.kp-paylock .kp-btn { margin-top: 10px; }
.kp-paylock strong { display: block; margin-bottom: 2px; }
.kp-grid--locked span { display: block; border-radius: 10px; overflow: hidden; background: var(--kp-soft); aspect-ratio: 1; }
.kp-grid--locked img { pointer-events: none; user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; }

/* Kundenansicht für Admins */
.kp-viewas { position: sticky; top: 0; z-index: 50; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; justify-content: center; padding: 9px 16px; background: #fff4d6; color: #5a4300; font-size: 14px; border-bottom: 1px solid #f0d78c; }
.kp-viewas a { color: #5a4300; font-weight: 600; }
.kp-paylock p { margin: 0 0 4px; }
.kp-sneak .kp-card__head { align-items: center; } .kp-sneak__dl { margin-left: auto; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.kp-langs { gap: 4px; }
.kp-langs .kp-nav__item { padding: 6px 12px; font-size: 13px; }

/* Lieferfortschritt */
.kp-delivery__bar { height: 10px; border-radius: 99px; background: var(--kp-line, #e6e9f0); overflow: hidden; margin: 6px 0 10px; }
.kp-delivery__bar span { display: block; height: 100%; border-radius: inherit; background: var(--kp-accent); transition: width .6s ease; }
.kp-delivery__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin: 0; font-size: 14px; color: var(--kp-muted, #626c85); }
.kp-delivery__meta span { opacity: .9; }

/* Eigenwerbung */
.kp-promo__form { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.kp-promo__opt { display: flex; gap: 10px; align-items: center; font-weight: 500; cursor: pointer; }
.kp-promo__opt input { width: 20px; height: 20px; accent-color: var(--kp-accent); }
.kp-promo__status { margin: 4px 0 6px; font-size: 14px; color: var(--kp-muted, #626c85); }

/* Gästegalerie */
.kp-btn--ghost, .kp a.kp-btn--ghost { background: transparent; color: var(--kp-ink); border-color: var(--kp-line); }
.kp-btn--ghost:hover { color: var(--kp-ink); border-color: var(--kp-accent); }
.kp-btn--ghost.is-done { border-color: var(--kp-ok); color: var(--kp-ok); }
.kp-link-more { font-weight: 600; text-decoration: none; }
.kp-grid li { position: relative; }
.kp-mark { position: absolute; top: 6px; right: 6px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: rgba(255,255,255,.88); color: #6b7280; box-shadow: 0 2px 8px rgba(0,0,0,.18); transition: transform .15s, background .15s, color .15s; padding: 0; }
.kp-mark svg { width: 18px; height: 18px; }
.kp-mark:hover { transform: scale(1.08); }
.kp-mark.is-on { background: var(--kp-accent); color: var(--kp-on-accent); }
.kp-mark.is-on svg { fill: currentColor; }
.kp-mark.is-fixed { cursor: default; opacity: .95; }
.kp-mark.is-busy { opacity: .5; }
.kp-mark:focus-visible { outline: 3px solid var(--kp-accent); outline-offset: 2px; }
.kp-mark-demo { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--kp-accent); color: var(--kp-on-accent); vertical-align: middle; }
.kp-mark-demo svg { width: 14px; height: 14px; fill: currentColor; }
.kp-guestbox__steps { margin: 0 0 12px; padding-left: 20px; }
.kp-guestbox__steps li { margin: 0 0 6px; }
.kp-guestbox__count { font-weight: 600; margin: 0 0 12px; }
.kp-guestbox__share { display: grid; gap: 10px; margin-bottom: 12px; }
.kp-guestbox__share > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border-radius: 10px; background: var(--kp-soft); }
.kp-guestbox__label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--kp-muted); min-width: 70px; }
.kp-guestbox__share code { font-size: 14px; background: none; word-break: break-all; flex: 1 1 200px; }
.kp-guest-login { max-width: 560px; margin: 40px auto; }
.kp-guest-login__title { font-size: 24px; margin: 0 0 4px; }
.kp-guest-login__form { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.kp-guest-login__form input { width: 100%; max-width: 320px; font-size: 18px; letter-spacing: .04em; }
.kp-guest-hero h1 { margin-bottom: 6px; }
.kp-guest-contact__form { display: grid; gap: 12px; max-width: 560px; }
.kp-guest-contact__form label { display: grid; gap: 4px; font-weight: 500; }
.kp-guest-contact__form .kp-guest-contact__consent { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 14px; }
.kp-guest-contact__consent input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--kp-accent); }
.kp-guest-contact__form button { justify-self: start; }
.kp-guestpage { width: 100%; align-self: stretch; }

/* Shop */
.kp-shop .kp-card__head { align-items: center; }
.kp-shop__cartbtn { margin-left: auto; }
.kp-products { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.kp-product a { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--kp-text); border: 1px solid var(--kp-line); border-radius: 12px; overflow: hidden; padding-bottom: 12px; transition: box-shadow .15s, transform .15s; height: 100%; }
.kp-product a:hover { box-shadow: 0 8px 22px rgba(16, 32, 60, .12); transform: translateY(-2px); }
.kp-product__img { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--kp-soft); color: var(--kp-muted); margin-bottom: 6px; }
.kp-product__img img { width: 100%; height: 100%; object-fit: cover; }
.kp-product__img svg { width: 34px; height: 34px; }
.kp-product strong, .kp-product__price { padding: 0 12px; }
.kp-product__price { color: var(--kp-muted); font-size: 14px; }
.kp-shop__h3 { font-size: 15px; margin: 22px 0 8px; }
.kp-orders { list-style: none; margin: 0; padding: 0; }
.kp-orders li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--kp-line); }
.kp-orders small { display: block; color: var(--kp-muted); }
.kp-pill--order-new { background: var(--kp-warn-bg); color: var(--kp-warn); }
.kp-pill--order-progress { background: color-mix(in srgb, var(--kp-accent) 14%, white); color: var(--kp-ink); }
.kp-pill--order-done { background: var(--kp-ok-bg); color: var(--kp-ok); }
.kp-shopform__head { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 14px; }
.kp-shopform__head h1 { margin: 0 0 8px; }
.kp-shopform__img { width: 220px; max-width: 100%; border-radius: 12px; object-fit: cover; aspect-ratio: 4 / 3; }
.kp-shopform__price { font-size: 20px; font-weight: 700; margin: 6px 0 0; }
.kp-shopform__opts { display: flex; flex-wrap: wrap; gap: 14px 20px; margin: 4px 0 18px; }
.kp-shopform__opts label, .kp-shopform__note { display: grid; gap: 4px; font-weight: 500; }
.kp-shopform__qty { width: 90px; }
.kp-shopform__note { margin: 18px 0; max-width: 640px; }
.kp-shopform__h2 { font-size: 17px; margin: 0 0 10px; }
.kp-pick { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.kp-pick label { position: relative; display: block; cursor: pointer; border-radius: 10px; overflow: hidden; aspect-ratio: 1; background: var(--kp-soft); }
.kp-pick img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .15s; }
.kp-pick input { position: absolute; opacity: 0; inset: 0; }
.kp-pick__check { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.85); color: transparent; font-weight: 700; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.kp-pick input:checked ~ .kp-pick__check { background: var(--kp-accent); color: var(--kp-on-accent); }
.kp-pick input:checked ~ img { opacity: .82; }
.kp-pick label:has(input:checked) { outline: 3px solid var(--kp-accent); outline-offset: -3px; }
.kp-pick input:focus-visible ~ .kp-pick__check { outline: 3px solid var(--kp-accent); outline-offset: 2px; }
.kp-cart__title { font-size: 22px; margin: 0; }
.kp-cart__items { list-style: none; margin: 0 0 10px; padding: 0; }
.kp-cart__items li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--kp-line); flex-wrap: wrap; }
.kp-cart__info { display: grid; gap: 4px; }
.kp-cart__thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.kp-cart__thumbs img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; }
.kp-cart__price { text-align: right; font-weight: 600; display: grid; gap: 6px; justify-items: end; }
.kp-cart__remove { background: none; border: 0; padding: 0; color: var(--kp-bad); font-size: 13px; text-decoration: underline; cursor: pointer; font-weight: 400; }
.kp-cart__total { display: flex; justify-content: space-between; border-top: 2px solid var(--kp-text); padding-top: 12px; font-size: 18px; }
.kp-cart__hint { font-size: 14px; }
.kp-shopform select, .kp-shopform input[type=number] { font: inherit; padding: 10px 12px; border: 1px solid var(--kp-line); border-radius: 10px; background: var(--kp-surface); color: var(--kp-text); min-height: 44px; }
.kp-shopform select { min-width: 220px; }