/* ========== BRAND TOKENS (CSC JÄKLECHEMIE) ========== */
:root {
	/* Farben (aus deinem Farbschema) */
	--cg-navy: #003a63; /* PANTONE 541C */
	--cg-cobalt: #0075bf; /* PANTONE 7461C */
	--cg-sky: #add2f1;
	--cg-grey: #575756;
	--cg-white: #ffffff;
	/* Fluent-Akzent */
	--accent-fill-rest: var(--cg-cobalt);
	--accent-fill-hover: #006aad;
	--accent-fill-active: #005b93;
	/* Flächen / Layer */
	--neutral-layer-1: #ffffff;
	--neutral-layer-2: #f4f7fb;
	--neutral-layer-3: #e7eef7;
	/* Gradients & Shadow */
	--brand-gradient: linear-gradient(120deg,var(--cg-cobalt) 0%,var(--cg-navy) 70%);
	--elev-1: 0 8px 24px rgba(0,0,0,.08);
	--elev-2: 0 14px 40px rgba(0,0,0,.12);
	/* Maße */
	--header-h: 56px;
	--footer-h: 44px;
	--page-max: 1680px;
}

/* ========== LAYOUT-BASIS ========== */
.container {
	max-width: var(--page-max);
	margin-inline: auto;
	padding-inline: clamp(12px,2vw,24px);
}

.container--fluid {
	max-width: none;
}

.section {
	padding-block: clamp(24px,4vw,56px);
}

/* Shell: genau 1 Scrollbar – der Content scrollt */
.ibc-page-shell {
	height: calc(100vh - var(--header-h) - var(--footer-h));
}

/* Linke Rail/AppBar */
.ibc-rail {
	width: 86px;
	height: 100%;
	background: var(--neutral-layer-2);
	border-right: 1px solid var(--neutral-layer-3);
	width: auto;
}

.ibc-appbar {
	width: 86px;
	height: 100%;
	background: var(--neutral-layer-2);
}

fluent-app-bar {
	height: 100%;
}

/* Content */
.ibc-content {
	flex: 1;
	overflow: auto;
	padding: 18px 20px;
}

.ibc-content-inner {
	margin: 0;
}

/* Header / Login auf Blau gut lesbar */
.ibc-header {
	background: var(--brand-gradient);
	color: #fff;
	box-shadow: inset 0 -1px 0 rgba(255,255,255,.08), 0 2px 12px rgba(0,0,0,.12);
}

.ibc-login-outlined {
	color: #fff !important;
	border-color: rgba(255,255,255,.65) !important;
	background: transparent !important;
}

	.ibc-login-outlined:hover {
		border-color: #fff !important;
		background: rgba(255,255,255,.14) !important;
	}

/* Footer */
.ibc-footer {
	background: var(--neutral-layer-2);
	border-top: 1px solid var(--neutral-layer-3);
}

	/* Grid-Container im Footer */
	.ibc-footer .footer-grid {
		display: grid;
		grid-template-columns: 1fr auto 1fr; /* links – mitte – rechts */
		align-items: center;
		width: 100%;
		gap: 12px;
		padding: 0 12px;
	}

	/* Grid-Items */
	.ibc-footer .left {
		justify-self: start;
		display: flex;
		align-items: center;
		gap: 12px;
	}

	.ibc-footer .center {
		justify-self: center;
	}

	.ibc-footer .right {
		justify-self: end;
	}

/* ========== HERO: Split (links Bild, rechts Text) – volle Breite ========== */
.hero-split {
	display: grid;
	grid-template-columns: minmax(520px,45vw) 1fr;
	min-height: clamp(420px,52vh,640px);
	border-radius: 0 0 18px 18px;
	background: var(--neutral-layer-2);
	box-shadow: var(--elev-1);
	overflow: hidden;
}

.hero-split__media {
	position: relative;
	isolation: isolate;
	background: center/cover no-repeat;
}

	.hero-split__media::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 0;
		background: linear-gradient(0deg, rgba(0,0,0,.08), rgba(0,0,0,.08));
	}

.hero-split__content {
	display: grid;
	align-content: center;
	gap: 14px;
	padding: clamp(20px,4vw,56px);
}

.hero-split h1 {
	margin: 0;
	font-weight: 800;
	letter-spacing: .2px;
	line-height: 1.15;
	color: var(--cg-navy);
}

.lead {
	margin: 0;
	max-width: 70ch;
	color: #2f3a44;
}

/* Buttons im Hero: Outline auf hellem Grund */
.btn-hero-outline::part(control) {
	border-color: var(--cg-cobalt);
}

/* ========== FEATURE-CARDS (mit Bildern) ========== */
.grid {
	display: grid;
	grid-template-columns: repeat(12,minmax(0,1fr));
	gap: 18px;
}

.card {
	grid-column: span 4;
	border-radius: 16px;
	overflow: hidden;
	background: var(--neutral-layer-1);
	box-shadow: var(--elev-1);
	transition: transform .18s, box-shadow .18s;
}

	.card:hover {
		transform: translateY(-3px);
		box-shadow: var(--elev-2);
	}

.card__media {
	aspect-ratio: 16/9;
	background: var(--neutral-layer-3) center/cover no-repeat;
}

.card__body {
	padding: 16px 16px 18px;
}

.card h3 {
	margin: 6px 0;
}

.card p {
	margin: 0 0 10px;
	color: #4a5568;
}

/* spezifische Bilder */
.card--customer .card__media {
	background-image: url("/images/hq_front.jpg");
}

.card--carrier .card__media {
	background-image: url("/images/truck.jpg");
}

.card--recon .card__media {
	background-image: url("/images/hq_angle.jpg");
}

/* ========== VALUE PROPS & QUICK LINKS ========== */
.value-grid {
	display: grid;
	grid-template-columns: repeat(12,minmax(0,1fr));
	gap: 18px;
}

.value {
	grid-column: span 3;
	padding: 16px;
	border-radius: 14px;
	background: var(--neutral-layer-1);
	box-shadow: var(--elev-1);
}

	.value h4 {
		margin: 8px 0 6px;
	}

	.value p {
		margin: 0;
		color: #4a5568;
	}

.quick-links {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(12,minmax(0,1fr));
}

.quick-link {
	grid-column: span 3;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	border-radius: 12px;
	background: var(--neutral-layer-1);
	box-shadow: var(--elev-1);
	text-decoration: none;
	color: inherit;
	transition: transform .15s, box-shadow .15s;
}

	.quick-link:hover {
		transform: translateY(-2px);
		box-shadow: var(--elev-2);
	}

/* CTA-Band (unten) */
.cta-band {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	padding: 18px 20px;
	border-radius: 16px;
	color: #fff;
	background: var(--brand-gradient);
	box-shadow: var(--elev-1);
}

/* ========== RESPONSIVE ========== */
@media (max-width:1200px) {
	.card {
		grid-column: span 6;
	}

	.value, .quick-link {
		grid-column: span 6;
	}
}

@media (max-width:820px) {
	.hero-split {
		grid-template-columns: 1fr;
	}
}

@media (max-width:680px) {
	.card {
		grid-column: span 12;
	}

	.value, .quick-link {
		grid-column: span 12;
	}
}
/* === HEADER FIX (nach allen anderen Regeln einfügen) ================== */

/* Kompat: alte Variablennamen weiterreichen */
:root {
	--ibc-header-h: var(--header-h);
	--ibc-footer-h: var(--footer-h);
}

/* FluentHeader selbst (und evtl. gerendertes <header>) auf Brand-Gradient setzen */
fluent-header.ibc-header,
.ibc-header {
	background: var(--brand-gradient) !important;
	color: #fff;
	height: var(--header-h);
	min-height: var(--header-h);
	display: flex;
	align-items: center;
	position: sticky; /* oben fixiert */
	top: 0;
	z-index: 100; /* über Content */
	box-shadow: inset 0 -1px 0 rgba(255,255,255,.08), 0 2px 12px rgba(0,0,0,.12);
	margin: 0;
	border: 0;
}

	/* Inhalt im Header: links – mitte – rechts wirklich zentriert */
	.ibc-header .header-grid {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		width: 100%;
		gap: 12px;
		padding: 0 12px 0 0;
	}

	.ibc-header .left {
		justify-self: start;
		display: flex;
		align-items: center;
		gap: 8px;
	}

	.ibc-header .center {
		justify-self: center;
	}

	.ibc-header .right {
		justify-self: end;
	}

	.ibc-header .brand-logo {
		max-height: 24px;
		object-fit: contain;
	}

/* Outline-Login auf Blau gut lesbar */
.ibc-login-outlined::part(control) {
	color: #fff;
	border-color: rgba(255,255,255,.65);
	background: transparent;
}

	.ibc-login-outlined::part(control):hover {
		border-color: #fff;
		background: rgba(255,255,255,.14);
	}

/* Weißes Band unter dem Header entfernen (Phantom-Padding/-Border) */
body > header,
fluent-header {
	margin: 0;
	border: 0;
}

.hero-split {
	margin-top: 0;
}

/* AppBar bleibt volle Höhe */
.ibc-appbar, fluent-app-bar {
	height: 100%;
}

.brand-logo {
	display: inline-block;
	height: 28px;
	object-fit: contain;
}

html, body, #app {
	height: 100%;
}

html, body {
	overflow: hidden;
}
/* <- Body-Scrollbar aus */

/* 1) Der Bereich zwischen Header und Footer bekommt eine feste Höhe */
.ibc-page-shell {
	height: calc(100dvh - var(--header-h) - var(--footer-h));
	min-height: 0; /* wichtig bei Flex-Verschachtelung */
}

/* 2) Der DIREKTE Flex-Parent von .ibc-rail + .ibc-content muss selbst 100% hoch sein */
.ibc-main { /* <FluentStack Class="ibc-main" Orientation="Horizontal"> */
	height: 100%;
	min-height: 0; /* verhindert „verschlucken“ des Scrolls */
}

.ibc-content {
	flex: 1 1 auto;
	min-height: 0; /* ohne das entsteht gern ein versteckter Overflow */
	min-width: 0;
	overflow: auto !important; /* HIER ist die einzige Scrollbar */
}

/* 4) Falls FluentBodyContent selbst scrolled → ausschalten */
fluent-body-content, .body-content {
	height: auto !important;
}

/* Auth-Dialog braucht nix extra. Für Vollseite: */
.auth-page {
	min-height: calc(100dvh - var(--header-h) - var(--footer-h));
	display: grid;
	place-items: center;
}

.auth-hero {
	width: min(980px, 92vw);
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 0;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: var(--elev-2);
	background: var(--neutral-layer-1);
}

	.auth-hero::before {
		content: "";
		background: url("/images/hq_angle.jpg") center/cover no-repeat;
		filter: brightness(0.9);
	}

	.auth-hero::before,
	.auth-panel {
		min-height: 460px;
	}

	.auth-hero::before {
		grid-column: 1;
	}

.auth-panel {
	grid-column: 2;
	padding: clamp(20px, 4vw, 36px);
}

@media (max-width: 900px) {
	.auth-hero {
		grid-template-columns: 1fr;
	}

		.auth-hero::before {
			display: none;
		}
}
/* Dialog-/Seiten-Layout */
.auth-grid {
	display: grid;
	grid-template-columns: 1.2fr 1fr; /* Bild | Form */
	gap: 0;
	min-height: 420px;
}

.auth-illustration {
	min-height: 420px;
	background: center/cover no-repeat;
}

/* Panel & Typografie */
.auth-panel {
	padding: clamp(20px, 4vw, 32px);
}

.auth-title {
	margin: 0 0 6px;
}

.auth-lead {
	margin: 0 0 16px;
	color: #2f3a44;
}

/* Breite der Eingaben: 100% */
.auth-form fluent-text-field,
.auth-form fluent-button {
	width: 100%;
}

/* Buttons nebeneinander: nur der erste 160–200px */
.auth-form > fluent-stack > fluent-button:first-child {
	width: min(200px, 40%);
}

@media (max-width: 900px) {
	.auth-grid {
		grid-template-columns: 1fr;
	}

	.auth-illustration {
		display: none;
	}
}

/* --- Horizontaler Prozess-Flow (3 Kacheln) --- */
.hflow {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	margin-top: 12px;
}

.hstep {
	position: relative;
	border-radius: 14px;
	background: var(--neutral-layer-1);
	box-shadow: var(--elev-1);
	padding: 16px 16px 18px;
	transition: transform .15s ease, box-shadow .15s ease;
}

	.hstep:hover {
		transform: translateY(-2px);
		box-shadow: var(--elev-2);
	}

/* Icon-Kranz oben */
.hstep-icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: #fff;
	background: var(--brand-gradient);
	box-shadow: var(--elev-1);
	margin-bottom: 10px;
}

/* Verbinder-Linie zwischen den Kacheln */
.hflow .hstep::after {
	content: "";
	position: absolute;
	top: 40px; /* Mitte der Icon-Höhe */
	right: -9px;
	width: 18px;
	height: 2px;
	background: var(--neutral-layer-3);
}

.hflow .hstep:last-child::after {
	display: none;
}

/* Typografie in den Kacheln */
.hstep h3 {
	margin: 4px 0 6px;
}

.hstep p {
	margin: 0;
	color: #4a5568;
}

/* Responsive: unter 900px 1 Spalte, unter 1200px 2 Spalten */
@media (max-width: 1200px) {
	.hflow {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.hflow {
		grid-template-columns: 1fr;
	}

		.hflow .hstep::after {
			display: none;
		}
}
/* === FORM LAYOUT – FULL-WIDTH, 2 EQUAL COLUMNS ===================== */
:root {
	--col-min: 200px; /* min. Spaltenbreite */
	--col-gap: 20px;
}

.form-panel {
	width: 100%;
	padding: 24px;
	border-radius: 16px;
	background: var(--neutral-layer-1);
	box-shadow: var(--elev-1);
	position: relative;
	overflow: visible;
}

/* Zwei gleich breite, fluide Spalten über die komplette Panelbreite */

.grid-2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(420px, 1fr)); /* min 420px, sonst 1fr */
	gap: 20px;
	align-items: start;
}

	/* ganz wichtig: Grid-Items strecken */
	.grid-2 > * {
		min-width: 0;
		justify-self: stretch; /* statt auto */
	}

	/* Fluent-Blazor-Wrapper füllt die Spalte */
	.grid-2 > div.root,
	.grid-2 > .span-2 > div.root {
		width: 100% !important;
		max-width: none !important;
	}

		/* und das eigentliche Control im Wrapper auch */
		.grid-2 > div.root > *,
		.grid-2 > .span-2 > div.root > * {
			width: 100%;
		}

	/* Textarea über beide Spalten (wenn .span-2 drumrum) */
	.grid-2 .span-2 {
		grid-column: 1 / -1;
	}

	/* Hosts der Fluent-WebComponents sollen die Spalte zu 100% füllen */
	.grid-2 > * {
		width: 100%;
	}
	/* falls du Wrapper-Divs nutzt */

	.grid-2 > fluent-text-field,
	.grid-2 > fluent-number-field,
	.grid-2 > fluent-select,
	.grid-2 > fluent-text-area,
	.grid-2 > .span-2 > fluent-text-field,
	.grid-2 > .span-2 > fluent-number-field,
	.grid-2 > .span-2 > fluent-select,
	.grid-2 > .span-2 > fluent-text-area {
		width: 100%;
		max-width: none; /* Kappung entfernen */
	}

/* Typografie & Höhe der Controls */
fluent-text-field::part(label),
fluent-number-field::part(label),
fluent-select::part(label),
fluent-text-area::part(label) {
	font-size: 15px;
	font-weight: 400 !important;
}

fluent-text-field::part(control),
fluent-number-field::part(control),
fluent-select::part(control),
fluent-text-area::part(control) {
	min-height: 46px;
	font-size: 15px;
	font-weight: 400 !important;
}

fluent-text-area::part(control) {
	padding-top: 10px;
}

/* Actions unten rechts, über beide Spalten */
.form-actions {
	grid-column: 1 / -1;
	display: flex;
	justify-content: flex-end;
	margin-top: 14px;
}

/* Responsiv: unter 800px 1 Spalte – Controls nutzen volle Breite */
@media (max-width: 800px) {
	.grid-2 {
		grid-template-columns: 1fr;
	}
}

.scan-box {
	background: var(--neutral-layer-2);
	border-radius: 12px;
}

.scan-list {
	display: grid;
	gap: 10px;
}

.scan-item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 8px 10px;
	border-radius: 10px;
	background: var(--neutral-layer-1);
	box-shadow: var(--elev-1);
	word-break: break-word;
	width: 100%;
	box-sizing: border-box;
}

	.scan-item .ibc {
		font-weight: 600;
		min-width: unset;
		width: 100%;
	}

.qual-card {
	border-radius: 12px;
	background: var(--neutral-layer-1);
	box-shadow: var(--elev-1);
	padding: 12px 14px;
}

.complete-photo {
	display: block;
	margin-top: 10px;
	max-width: 100%;
	border-radius: 12px;
	box-shadow: var(--elev-1);
}

.fluent-label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
}
/* Einheitliche Feld-Breiten in der Grid-Spalte */
.grid-2 > fluent-text-field,
.grid-2 > fluent-number-field,
.grid-2 > fluent-select,
.grid-2 > fluent-text-area {
	width: 100%;
	min-width: 0; /* verhindert Überlauf */
}

/* Mehr Luft unten – vermeidet optisches „Überlappen“ */
.grid-2 > fluent-text-field,
.grid-2 > fluent-number-field,
.grid-2 > fluent-select,
.grid-2 > fluent-text-area {
	margin-bottom: 2px;
}

/* Fluent Select: Popup/Listbox exakt so breit wie das Feld + scrollbar begrenzen */
fluent-select::part(listbox) {
	box-sizing: border-box;
	min-width: 100%;
	max-width: 100%;
	max-height: 320px;
	overflow: auto;
	box-shadow: var(--elev-2);
}

/* (Failsafe) Manche Versionen nutzen noch eine Positionierungs-Region */
fluent-select::part(positioning-region) {
	min-width: 100%;
	max-width: 100%;
}

/* Optik der Unterstreichung etwas ruhiger machen */
fluent-text-field::part(control),
fluent-number-field::part(control),
fluent-select::part(control),
fluent-text-area::part(control) {
	min-height: 46px;
	font-size: 12px;
	border-radius: 10px;
	padding: 0px;
}

/* Erfolgs-/Fehler-„Panel“ nach Submit */
.result-panel.success {
	padding: 18px;
	border-radius: 14px;
	background: var(--neutral-layer-1);
	box-shadow: var(--elev-1);
}

/* Eine Position als eigene Karte */
.line-card {
	background: var(--neutral-layer-1);
	border-radius: 14px;
	box-shadow: var(--elev-1);
	padding: 14px 16px 16px;
}

	.line-card + .line-card {
		margin-top: 14px;
	}

.line-card-padding {
	padding: 4px 5px 5px;
}

/* Aktionen am Kartenende */
.line-actions {
	display: flex;
	justify-content: flex-end;
	margin-top: 10px;
}

/* Abweichende Adresse optisch absetzen */
.alt-address {
	border-top: 1px solid var(--neutral-layer-3);
	padding-top: 12px;
	margin-top: 6px;
}

/* Buttons über volle Breite der Grid-Spalte */
.btn-full::part(control) {
	width: 100%;
}

fluent-wizard::part(content) {
	overflow: visible;
}

/* Einheitliche Feldbreiten / kein Überlauf */
.grid-2 > fluent-text-field,
.grid-2 > fluent-number-field,
.grid-2 > fluent-select,
.grid-2 > fluent-text-area {
	width: 100%;
	min-width: 0;
	margin-bottom: 2px; /* sorgt dafür, dass Focus-Linie nicht „überlappt“ */
}

/* Select-Popup exakt so breit wie das Feld */
fluent-select::part(listbox),
fluent-select::part(positioning-region) {
	min-width: 100%;
	max-width: 100%;
	max-height: 320px;
	overflow: auto;
}

fluent-button.btn-green::part(control) {
	background-color: #16a34a;
	color: white;
	border: none;
}

.grid-inspection {
	display: grid;
	grid-template-columns: auto auto;
	gap: 20px;
}

.ibc-details {
	display: grid;
	gap: 12px;
}

.checklist-info {
	background: var(--neutral-layer-2);
	border-radius: 12px;
	padding: 14px 16px;
	font-size: 15px;
	color: var(--cg-grey);
}

	.checklist-info h5 {
		margin: 0 0 10px;
		font-weight: 600;
		color: var(--cg-navy);
	}

	.checklist-info ul {
		margin: 0;
		padding-left: 20px;
		list-style: none;
	}

	.checklist-info li::before {
		content: "✔ ";
		color: #0075bf; /* cobalt checkmark */
		font-weight: bold;
	}

.form-row {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 10px;
	width: 50%;
}

	.form-row label {
		width: 160px;
		font-weight: 500;
		color: var(--neutral-foreground-rest);
		white-space: nowrap;
	}

	.form-row fluent-text-field {
		width: 260px;
	}

/* shared button styling */
.btn-choice {
	transition: opacity .15s ease;
}

	/* greyed-out look when not selected */
	.btn-choice.ghost {
		opacity: .6;
	}

	/* make sure selected ones are fully visible */
	.btn-choice.selected {
		opacity: 1;
	}

	/* optional: if you want a subtle border on unselected */
	.btn-choice.ghost {
		box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
	}

/* optional helpers if you want to reuse the colors elsewhere */
.btn-green { /* colors applied via inline Style when selected */
}

.btn-red { /* colors applied via inline Style when selected */
}

.captured-photo {
	max-width: 100%;
	border-radius: 12px;
	box-shadow: 0 4px 16px rgba(0,0,0,.12);
	margin-top: 8px;
}

.padding-0 {
	padding: 0 !important;
}

.form-serial-grid {
	display: flex;
	flex-direction: column;
	gap: 15px;
	margin-bottom: 15px;
}

@media (max-width: 900px) {
	.ibc-rail {
		position: fixed;
		top: var(--header-h);
		left: 0;
		height: calc(100dvh - var(--header-h));
		z-index: 100;
		transform: translateX(-100%);
		transition: transform 0.3s ease;
		width: auto;
	}

		.ibc-rail.open {
			transform: translateX(0);
			box-shadow: var(--elev-2);
		}

	.menu-toggle {
		display: inline-flex;
	}
}

@media (min-width: 901px) {
	.menu-toggle {
		display: none !important;
	}
}

.note-block {
	display: block;
	max-width: 100%;
	padding: 8px 10px;
	border-radius: 10px;
	background: var(--neutral-layer-2);
	color: var(--neutral-foreground-rest);
	font-size: 13px;
	line-height: 1.45;
	white-space: normal;
	overflow-wrap: anywhere;
}

.ibc-appbar [part="label"] {
	white-space: normal !important;
	overflow: visible !important;
	text-overflow: clip !important;
	line-height: 1.2;
	text-align: center;
}