/* ------------------------------------------------------------------
   VUB Portal – Oberfläche
   Mobil zuerst. Farben stehen als Variablen an einer Stelle.
   ------------------------------------------------------------------ */

:root {
	--vub-accent: #f18700;
	--vub-accent-dunkel: color-mix(in srgb, var(--vub-accent) 82%, black);
	--vub-accent-hauch: color-mix(in srgb, var(--vub-accent) 8%, white);
	--vub-text: #1a1d21;
	--vub-text-leise: #5c6570;
	--vub-linie: #e3e6ea;
	--vub-flaeche: #ffffff;
	--vub-grund: #f5f6f8;
	--vub-gut: #146c43;
	--vub-fehler: #b42318;
	--vub-radius: 14px;
	--vub-schatten: 0 1px 2px rgba(16, 24, 40, .06), 0 6px 16px -8px rgba(16, 24, 40, .12);
	--vub-schatten-hoch: 0 2px 4px rgba(16, 24, 40, .07), 0 14px 28px -10px rgba(16, 24, 40, .18);
}

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

html { -webkit-text-size-adjust: 100%; }

body.vub-body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--vub-grund);
	color: var(--vub-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

a { color: var(--vub-accent); }

.vub-icon { width: 1.25em; height: 1.25em; flex: none; }

/* --- Kopfbereich --------------------------------------------------- */

.vub-kopf {
	background: var(--vub-flaeche);
	border-bottom: 1px solid var(--vub-linie);
	position: sticky;
	top: 0;
	z-index: 20;
}

.vub-kopf__innen {
	max-width: 1180px;
	margin: 0 auto;
	padding: 10px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.vub-marke { display: inline-flex; align-items: center; text-decoration: none; min-height: 44px; }
.vub-marke img { max-height: 34px; width: auto; display: block; }
.vub-marke__text { font-weight: 700; font-size: 17px; color: var(--vub-text); letter-spacing: -.01em; }

.vub-konto { position: relative; }

.vub-konto__knopf {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 4px 8px;
	background: none;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	font: inherit;
	color: var(--vub-text);
}
.vub-konto__knopf:hover { background: var(--vub-grund); }

.vub-konto__kreis {
	width: 32px; height: 32px;
	border-radius: 50%;
	background: var(--vub-accent);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 14px;
}
.vub-konto__name { display: none; }
.vub-konto__pfeil { width: 1em; height: 1em; color: var(--vub-text-leise); }

.vub-konto__menue {
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	min-width: 235px;
	background: var(--vub-flaeche);
	border: 1px solid var(--vub-linie);
	border-radius: var(--vub-radius);
	box-shadow: var(--vub-schatten-hoch);
	padding: 6px;
	z-index: 30;
}
.vub-konto__menue[hidden] { display: none; }
.vub-konto__menue a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 12px;
	border-radius: 9px;
	text-decoration: none;
	color: var(--vub-text);
	font-size: 15px;
}
.vub-konto__menue a:hover { background: var(--vub-grund); }
.vub-konto__menue .vub-icon { color: var(--vub-text-leise); }

/* --- Rahmen -------------------------------------------------------- */

.vub-inhalt { flex: 1 0 auto; width: 100%; }

/* Breite Tabellen scrollen in ihrem eigenen Kasten. Trotzdem ließ sich die
   ganze Seite auf dem Telefon nach rechts in leeren Raum schieben. „clip"
   statt „hidden": Es erzeugt keinen neuen Scrollbereich und lässt damit
   position: sticky im Kopf und in Tabellen unangetastet. */
html, .vub-body { overflow-x: clip; }
.vub-inhalt--mitte { display: flex; align-items: center; justify-content: center; padding: 24px 16px; }

.vub-bereich {
	max-width: 1180px;
	margin: 0 auto;
	padding: 24px 16px 56px;
}
.vub-bereich--schmal { max-width: 660px; }


.vub-fuss {
	padding: 18px 16px 26px;
	text-align: center;
	color: var(--vub-text-leise);
	font-size: 13px;
}

/* --- Begrüßung und Kacheln ----------------------------------------- */

.vub-begruessung { margin-bottom: 22px; }
.vub-begruessung h1 { font-size: 26px; line-height: 1.2; margin: 0; letter-spacing: -.02em; }
.vub-begruessung__zeile { margin: 6px 0 0; color: var(--vub-text-leise); }

.vub-kacheln {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}

.vub-kachel {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 84px;
	padding: 18px;
	background: var(--vub-flaeche);
	border: 1px solid var(--vub-linie);
	border-radius: var(--vub-radius);
	box-shadow: var(--vub-schatten);
	text-decoration: none;
	color: var(--vub-text);
	transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.vub-kachel:hover {
	box-shadow: var(--vub-schatten-hoch);
	border-color: color-mix(in srgb, var(--vub-accent) 35%, var(--vub-linie));
	transform: translateY(-1px);
}
.vub-kachel:focus-visible { outline: 3px solid var(--vub-accent); outline-offset: 2px; }

.vub-kachel__symbol {
	width: 46px; height: 46px;
	flex: none;
	border-radius: 12px;
	background: var(--vub-accent-hauch);
	color: var(--vub-accent);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.vub-kachel__symbol .vub-icon { width: 24px; height: 24px; }

.vub-kachel__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vub-kachel__titel { font-weight: 650; font-size: 17px; display: inline-flex; align-items: center; gap: 6px; }
.vub-kachel__extern .vub-icon { width: 14px; height: 14px; color: var(--vub-text-leise); }
.vub-kachel__zeile { color: var(--vub-text-leise); font-size: 14px; }

.vub-kachel__zahl {
	margin-left: auto;
	flex: none;
	background: var(--vub-accent);
	color: #fff;
	border-radius: 999px;
	padding: 3px 11px;
	font-size: 13px;
	font-weight: 650;
}

.vub-leer {
	background: var(--vub-flaeche);
	border: 1px solid var(--vub-linie);
	border-radius: var(--vub-radius);
	padding: 32px 22px;
	text-align: center;
	box-shadow: var(--vub-schatten);
}
.vub-leer h1, .vub-leer h2 { margin-top: 0; font-size: 20px; }
.vub-leer p { color: var(--vub-text-leise); }

/* --- Modul- und Unterseiten ---------------------------------------- */

.vub-pfad {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--vub-text-leise);
	margin-bottom: 10px;
}
.vub-pfad a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
	min-height: 44px;
}
.vub-pfad a:hover { text-decoration: underline; }
.vub-pfad .vub-icon { width: 1em; height: 1em; }
.vub-pfad__hier { color: var(--vub-text); font-weight: 600; }

.vub-titel { font-size: 24px; margin: 0 0 18px; letter-spacing: -.02em; }
.vub-einleitung { color: var(--vub-text-leise); max-width: 70ch; margin-top: -6px; }

.vub-modul, .vub-karte {
	background: var(--vub-flaeche);
	border: 1px solid var(--vub-linie);
	border-radius: var(--vub-radius);
	box-shadow: var(--vub-schatten);
	padding: 20px 18px;
}
.vub-karte { margin-top: 20px; }
.vub-karte h2 { font-size: 17px; margin: 22px 0 12px; }
.vub-karte h2:first-child { margin-top: 0; }

.vub-aufklapp summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }

/* --- Formulare ----------------------------------------------------- */

.vub-feld { margin-bottom: 15px; }
.vub-feld label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 5px; }

.vub-feld input[type="text"],
.vub-feld input[type="email"],
.vub-feld input[type="url"],
.vub-feld input[type="password"],
.vub-formular select,
.vub-klein {
	width: 100%;
	min-height: 46px;
	padding: 10px 12px;
	border: 1px solid var(--vub-linie);
	border-radius: 10px;
	background: #fff;
	font: inherit;
	color: var(--vub-text);
}
.vub-feld input:focus, .vub-klein:focus {
	outline: none;
	border-color: var(--vub-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--vub-accent) 18%, transparent);
}
.vub-feld input:disabled { background: var(--vub-grund); color: var(--vub-text-leise); }

/* 150px statt 130px: die meisten Namen („Gleißner, Andreas") passen damit
   vollständig hinein, ohne dass die Rechtetabelle über die Seitenbreite
   hinauswächst. Die zwei längsten Namen werden gekürzt dargestellt – beim
   Aufklappen stehen sie vollständig da. */
.vub-klein { min-height: 40px; min-width: 150px; font-size: 14px; }

.vub-notiz { font-size: 13px; color: var(--vub-text-leise); margin: 5px 0 0; font-weight: 400; }
/* Hinweis, der eine Fehlkonfiguration meldet – darf nicht wie Fließtext aussehen. */
.vub-notiz--warnung { color: var(--vub-fehler); }

.vub-haken { display: flex; align-items: center; gap: 9px; min-height: 44px; font-size: 15px; }
.vub-haken input { width: 18px; height: 18px; accent-color: var(--vub-accent); }

.vub-knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 46px;
	padding: 11px 20px;
	border: 0;
	border-radius: 10px;
	background: var(--vub-accent);
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
}
.vub-knopf:hover { background: var(--vub-accent-dunkel); }
.vub-knopf:focus-visible { outline: 3px solid var(--vub-text); outline-offset: 2px; }
.vub-knopf--voll { width: 100%; }

.vub-leiste { margin-top: 18px; display: flex; gap: 12px; }

/* --- Hinweise ------------------------------------------------------ */

.vub-hinweis {
	border-radius: 10px;
	padding: 12px 14px;
	margin: 0 0 16px;
	font-size: 15px;
	border: 1px solid transparent;
}
.vub-hinweis--fehler { background: #fdf2f1; color: var(--vub-fehler); border-color: #f5c6c2; }
.vub-hinweis--gut { background: #eef8f2; color: var(--vub-gut); border-color: #bfe3ce; }
.vub-hinweis--info { background: var(--vub-accent-hauch); color: var(--vub-accent-dunkel); border-color: color-mix(in srgb, var(--vub-accent) 25%, white); }

/* --- Anmeldung ----------------------------------------------------- */

.vub-anmeldung {
	width: 100%;
	max-width: 400px;
	background: var(--vub-flaeche);
	border: 1px solid var(--vub-linie);
	border-radius: 18px;
	box-shadow: var(--vub-schatten-hoch);
	padding: 32px 24px 26px;
}
.vub-anmeldung__marke { text-align: center; margin-bottom: 14px; }
.vub-anmeldung__marke img { max-height: 46px; width: auto; }
.vub-anmeldung__wortmarke { font-weight: 700; font-size: 19px; letter-spacing: -.01em; }
.vub-anmeldung__titel { font-size: 18px; text-align: center; font-weight: 600; margin: 0 0 22px; color: var(--vub-text-leise); }
.vub-anmeldung__hilfe { text-align: center; margin: 16px 0 0; font-size: 14px; }
.vub-anmeldung .vub-knopf { margin-top: 8px; }

/* --- Rechtetabelle ------------------------------------------------- */

.vub-tabelle-huelle {
	margin-top: 18px;
	background: var(--vub-flaeche);
	border: 1px solid var(--vub-linie);
	border-radius: var(--vub-radius);
	box-shadow: var(--vub-schatten);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.vub-tabelle { border-collapse: collapse; width: 100%; min-width: 620px; }
.vub-tabelle th, .vub-tabelle td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--vub-linie); vertical-align: middle; }
.vub-tabelle thead th {
	font-size: 12.5px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--vub-text-leise);
	background: var(--vub-grund);
	position: sticky;
	top: 0;
	white-space: normal;
}
/* Lange Einzelwörter wie „Nachfragezahlen" müssen umbrechen dürfen,
   sonst stehen sie abgeschnitten über der Spalte. */
/* break-word statt anywhere: Nur ein Wort, das allein nicht in die Spalte
   passt, wird getrennt. „anywhere" würde auch „Leads sehen" zerlegen, weil es
   in die Spaltenbreitenberechnung eingeht. */
.vub-tabelle__cap { max-width: 128px; overflow-wrap: break-word; hyphens: auto; }
.vub-tabelle tbody tr:last-child th, .vub-tabelle tbody tr:last-child td { border-bottom: 0; }
.vub-tabelle__name { min-width: 180px; }
.vub-tabelle__name .vub-notiz { display: block; }
.vub-tabelle__haken { text-align: center; }

/* Die Namensspalte bleibt beim Scrollen stehen. Ohne sie weiß beim neunten
   Häkchen von links niemand mehr, in wessen Zeile er gerade klickt. */
.vub-tabelle__name {
	position: sticky;
	left: 0;
	z-index: 2;
	background: var(--vub-flaeche);
}
.vub-tabelle thead .vub-tabelle__name { z-index: 3; background: var(--vub-grund); }

/* Kante an der Namensspalte und Schatten am Rand: beides zeigt, dass rechts
   (oder links) noch etwas steht. */
.vub-tabelle-huelle.is-mehr-rechts .vub-tabelle__name { box-shadow: 6px 0 8px -6px rgba(16, 24, 40, .25); }
.vub-tabelle-huelle { position: relative; }
.vub-tabelle-huelle.is-mehr-rechts { background-image: linear-gradient(to left, rgba(16, 24, 40, .06), transparent 24px); background-repeat: no-repeat; background-position: right; background-attachment: local; }

.vub-scrollhinweis {
	margin: 18px 0 -6px;
	font-size: 13.5px;
	color: var(--vub-text-leise);
}
.vub-scrollhinweis strong { color: var(--vub-text); }

.vub-marker {
	display: inline-block;
	margin-top: 4px;
	font-size: 11.5px;
	font-weight: 600;
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--vub-accent-hauch);
	color: var(--vub-accent-dunkel);
}

.vub-schalter { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; cursor: pointer; }
.vub-schalter input { width: 20px; height: 20px; accent-color: var(--vub-accent); cursor: pointer; }
.vub-schalter--fest { cursor: default; opacity: .55; }
.vub-schalter--fest input { cursor: not-allowed; }

/* --- Ab Tablet ----------------------------------------------------- */

@media (min-width: 640px) {
	.vub-konto__name { display: inline; font-size: 15px; }
	.vub-kacheln { grid-template-columns: repeat(2, 1fr); gap: 16px; }
	.vub-begruessung h1 { font-size: 30px; }
	.vub-titel { font-size: 28px; }
	.vub-bereich { padding: 32px 24px 64px; }
	.vub-kopf__innen { padding: 12px 24px; }
	.vub-modul, .vub-karte { padding: 26px 24px; }
	.vub-knopf--voll { width: auto; min-width: 200px; }
	.vub-anmeldung { padding: 40px 34px 30px; }
}

@media (min-width: 1000px) {
	.vub-kacheln { grid-template-columns: repeat(3, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
	.vub-kachel { transition: none; }
	.vub-kachel:hover { transform: none; }
}

/* ------------------------------------------------------------------
   Vollflächige Module ('layout' => 'voll', z. B. das Kanban-Board):
   ganze Fensterbreite und -höhe, keine Fußzeile, kein Seitenscrollen –
   gescrollt wird innerhalb des Moduls.
   Bewusst am Dateiende, damit die Regeln die Breakpoints oben schlagen.
   ------------------------------------------------------------------ */

.vub-body--voll .vub-bereich--voll {
	max-width: none;
	padding: 12px 14px 0;
}

/* Auch der Kopfbereich läuft dann über die volle Breite, damit Logo und
   Pfad auf derselben Fluchtlinie stehen. */
.vub-body--voll .vub-kopf__innen { max-width: none; }

.vub-body--voll .vub-fuss { display: none; }
.vub-body--voll .vub-pfad { margin-bottom: 4px; }

.vub-body--voll .vub-modul {
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
}

/* Volle Breite, aber die Seite scrollt normal weiter. */
.vub-body--voll .vub-bereich--voll { padding-bottom: 40px; }

/* Nur 'voll-fix': Das Modul bringt sein eigenes Scrollen mit (Kanban-Board),
   deshalb wird die Seitenhöhe festgenagelt. Ohne diese Klasse bleibt das
   Seitenscrollen erhalten – sonst wären lange Listen nicht erreichbar. */
.vub-body--fix .vub-bereich--voll { padding-bottom: 0; }

@media (min-width: 900px) {
	.vub-body--voll .vub-bereich--voll { padding-left: 20px; padding-right: 20px; }
	.vub-body--fix { height: 100vh; height: 100dvh; overflow: hidden; }
	.vub-body--fix .vub-kopf { position: static; }
	.vub-body--fix .vub-inhalt { min-height: 0; }
}

/* --- Mehrfachauswahl in der Rechtetabelle ---------------------------- */

.vub-mehrfach {
	border: 1px solid var(--vub-linie);
	border-radius: 10px;
	background: #fff;
	min-width: 175px;
}
.vub-mehrfach > summary {
	cursor: pointer;
	padding: 10px 12px;
	min-height: 40px;
	display: flex;
	align-items: center;
	font-size: 14px;
	list-style-position: inside;
}
.vub-mehrfach > summary:focus-visible { outline: 3px solid var(--vub-accent); outline-offset: 2px; }
.vub-mehrfach[open] > summary { border-bottom: 1px solid var(--vub-linie); font-weight: 600; }
.vub-mehrfach__liste {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 8px 12px 10px;
	max-height: 240px;
	overflow-y: auto;
}
.vub-mehrfach__liste label {
	display: flex;
	gap: 8px;
	align-items: center;
	font-size: 14px;
	padding: 4px 0;
	cursor: pointer;
}