/* =============================================================
   MCT – css/style.css
   Themes über body.theme-light / body.theme-gray / body.theme-dark
   Default: theme-light (Klasse wird per JS gesetzt, Fallback über :root)
   ============================================================= */

/* -------------------------------------------------------------
   CSS-Variablen: theme-light (Default / Fallback)
   ------------------------------------------------------------ */
:root,
body,
body.theme-light {
	--bg-page:        #f5f5f5;
	--bg-panel:       #ffffff;
	--bg-nav:         #1e293b;
	--bg-header:      #1e293b;
	--bg-footer:      #1e293b;
	--bg-input:       #ffffff;
	--bg-hover:       #3b82f6;
	--bg-table-head:  #e2e8f0;
	--bg-table-alt:   #f8fafc;
	--bg-container-edit: #eff6ff;

	--text-base:      #1a1a1a;
	--text-muted:     #64748b;
	--text-nav:       #e2e8f0;
	--text-nav-hover: #ffffff;
	--text-header:    #f1f5f9;
	--text-footer:    #94a3b8;

	--border:         #cbd5e1;
	--border-input:   #94a3b8;
	--border-focus:   #3b82f6;

	--btn-bg:         #3b82f6;
	--btn-text:       #ffffff;
	--btn-hover:      #2563eb;
	--btn-sec-bg:     #e2e8f0;
	--btn-sec-text:   #1e293b;
	--btn-sec-hover:  #cbd5e1;

	--msg-ok-bg:      #dcfce7;
	--msg-ok-text:    #166534;
	--msg-err-bg:     #fee2e2;
	--msg-err-text:   #991b1b;

	--shadow-sm:      0 1px 3px rgba(0,0,0,.10);
	--shadow-md:      0 2px 8px rgba(0,0,0,.12);
	--radius:         4px;
	--transition:     .15s ease;
}

body.theme-gray {
	--bg-page:        #d1d5db;
	--bg-panel:       #e5e7eb;
	--bg-nav:         #111827;
	--bg-header:      #111827;
	--bg-footer:      #111827;
	--bg-input:       #f3f4f6;
	--bg-table-head:  #d1d5db;
	--bg-table-alt:   #e5e7eb;

	--text-base:      #111827;
	--text-muted:     #4b5563;
	--border:         #9ca3af;
	--border-input:   #6b7280;
}

body.theme-dark {
	--bg-page:        #0f172a;
	--bg-panel:       #1e293b;
	--bg-nav:         #0f172a;
	--bg-header:      #0f172a;
	--bg-footer:      #0f172a;
	--bg-input:       #334155;
	--bg-table-head:  #1e293b;
	--bg-table-alt:   #263348;

	--text-base:      #e2e8f0;
	--text-muted:     #94a3b8;
	--text-nav:       #cbd5e1;
	--text-header:    #e2e8f0;
	--text-footer:    #64748b;

	--border:         #334155;
	--border-input:   #475569;
	--border-focus:   #60a5fa;

	--btn-bg:         #3b82f6;
	--btn-hover:      #2563eb;
	--btn-sec-bg:     #334155;
	--btn-sec-text:   #e2e8f0;
	--btn-sec-hover:  #475569;

	--msg-ok-bg:      #14532d;
	--msg-ok-text:    #bbf7d0;
	--msg-err-bg:     #7f1d1d;
	--msg-err-text:   #fecaca;

	--shadow-sm:      0 1px 3px rgba(0,0,0,.40);
	--shadow-md:      0 2px 8px rgba(0,0,0,.50);
}

/* ===================================================== */
/* Schriften */
/* ===================================================== */

@font-face {
	font-family: 'GabrielaRegular'; 
		src: url('../fonts/Gabriela-Regular.ttf');
}


/* -------------------------------------------------------------
   Reset / Basis
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; }

body {
	font-family: 'Helvetica', 'Arial', serif;
	background: var(--bg-page);
	color: var(--text-base);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	transition: background var(--transition), color var(--transition);
}

a { color: var(--btn-bg); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: 1.6rem; margin-bottom: .75rem; }
h2 { font-size: 1.3rem; margin-bottom: .65rem; }
h3 { font-size: 1.1rem; margin-bottom: .5rem; }
h4 { font-size: 1rem;   margin-bottom: .4rem; }

p  { margin-bottom: .6rem; line-height: 1.55; }
ul, ol { margin: .4rem 0 .6rem 1.4rem; }
li { margin-bottom: .2rem; }

hr {
	border: none;
	border-top: 1px solid var(--border);
	margin: 1.2rem 0;
}

/* -------------------------------------------------------------
   Header
   ------------------------------------------------------------ */
#kopf {
	background: var(--bg-header);
	color: var(--text-header);
	padding: .6rem 1.2rem;
	display: flex;
	align-items: center;
	gap: 1rem;
	box-shadow: var(--shadow-sm);
	flex-shrink: 0;
}

#kopf-titel {
	font-size: 1.1rem;
	font-weight: bold;
	letter-spacing: .02em;
}

/* Hamburger-Button im Header: nur < 768px sichtbar (siehe Media Query unten) */
#hauptnav-toggle {
	display: none;
}

/* -------------------------------------------------------------
   Navigation
   ------------------------------------------------------------ */
#hauptnav {
	background: var(--bg-nav);
	padding: .35rem 1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: .2rem;
	box-shadow: var(--shadow-sm);
	flex-shrink: 0;
}

#nav-username {
	color: var(--text-muted);
	font-size: .85rem;
	margin-right: .5rem;
	white-space: nowrap;
}

/* Nur die direkten Kindlisten von #hauptnav (#nav-module, #nav-aktionen) –
   bewusst kein Nachfahren-Selektor, damit dies NICHT auf die
   verschachtelten .nav-untermenue-Listen der Dropdowns durchschlägt
   (ein ID-Selektor würde deren eigene Regeln sonst per Spezifität
   überstimmen, siehe .nav-untermenue weiter unten). */
#hauptnav > ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .15rem;
	margin: 0;
	padding: 0;
}

#hauptnav ul li a {
	display: inline-block;
	padding: .35rem .75rem;
	color: var(--text-nav);
	font-size: .9rem;
	border-radius: var(--radius);
	transition: background var(--transition), color var(--transition);
	text-decoration: none;
}

#hauptnav ul li a:hover,
#hauptnav ul li a.aktiv {
	background: var(--bg-hover);
	color: var(--text-nav-hover);
}

/* Globale Aktionen (Kontext wechseln / Abmelden): rechts, optisch
   von der eigentlichen Modul-Navigation abgesetzt */
#nav-aktionen {
	margin-left: 1rem;
	padding-left: .75rem;
	border-left: 1px solid rgba(255, 255, 255, .15);
}

#nav-aktionen #nav-logout {
	color: #fca5a5;
}

#nav-aktionen #nav-logout:hover {
	background: #7f1d1d;
	color: #fecaca;
}

/* Menügruppen (Dropdown Desktop / Akkordeon Smartphone) –
   dieselbe Markup-/Klassenstruktur, das Erscheinungsbild
   unterscheidet sich ausschließlich per Media Query */
.nav-gruppe {
	position: relative;
}

.nav-gruppe-btn {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .35rem .75rem;
	background: none;
	border: none;
	color: var(--text-nav);
	font-family: inherit;
	font-size: .9rem;
	border-radius: var(--radius);
	cursor: pointer;
	transition: background var(--transition), color var(--transition);
}

.nav-gruppe-btn:hover,
.nav-gruppe.offen > .nav-gruppe-btn {
	background: var(--bg-hover);
	color: var(--text-nav-hover);
}

.nav-gruppe.aktiv > .nav-gruppe-btn {
	color: var(--text-nav-hover);
	background: rgba(255, 255, 255, .1);
}

.nav-pfeil {
	font-size: .7em;
}

.nav-untermenue {
	display: none;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Bewusst vollständig eigene, von #hauptnav > ul entkoppelte Flex-Regeln
   (nicht nur flex-direction), damit hier nichts von anderswo geerbt
   werden kann: genau eine Spalte, kein Umbruch, volle Breite je Zeile. */
.nav-gruppe.offen > .nav-untermenue {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: stretch;
}

/* Desktop (ab 768px): Untermenü als Dropdown-Panel */
@media (min-width: 768px) {
	.nav-untermenue {
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 200px;
		background: var(--bg-nav);
		border-radius: var(--radius);
		box-shadow: var(--shadow-md);
		padding: .3rem;
		gap: .1rem;
		z-index: 50;
	}

	.nav-untermenue a.nav-link {
		white-space: nowrap;
	}
}

/* Smartphone (< 768px): Hamburger + vertikales Overlay-Menü,
   Gruppen als Akkordeon. Eigener Nav-Breakpoint (768px statt der
   sonst im MCT üblichen 640px), da bereits der mod_test-Hamburger-
   Platzhalter auf 768px vorbereitet ist (siehe mod_test.css). */
@media (max-width: 767px) {
	#hauptnav-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2.4rem;
		height: 2.4rem;
		margin-left: auto;
		background: transparent;
		border: none;
		color: var(--text-header);
		font-size: 1.3rem;
		cursor: pointer;
		border-radius: var(--radius);
	}

	#hauptnav-toggle:hover {
		background: rgba(255, 255, 255, .1);
	}

	#hauptnav {
		display: none;
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, .45);
		z-index: 900;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: flex-end;
		padding: 0;
	}

	body.nav-offen #hauptnav {
		display: flex;
	}

	#nav-module,
	#nav-aktionen {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: 85%;
		max-width: 320px;
		background: var(--bg-nav);
		margin: 0;
		padding: .5rem;
	}

	#nav-module {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
	}

	#nav-aktionen {
		flex: 0 0 auto;
		margin-left: 0;
		padding-left: .5rem;
		border-left: none;
		border-top: 1px solid rgba(255, 255, 255, .15);
	}

	#nav-aktionen li + li {
		border-top: 1px solid rgba(255, 255, 255, .1);
	}

	#hauptnav ul li a,
	.nav-gruppe-btn {
		display: block;
		width: 100%;
		padding: .8rem .9rem;
		font-size: 1rem;
		text-align: left;
	}

	.nav-gruppe-btn {
		justify-content: space-between;
	}

	.nav-untermenue {
		padding-left: 1rem;
	}
}

/* -------------------------------------------------------------
   Haupt-Content
   ------------------------------------------------------------ */
#inhalt {
	flex: 1;
	padding: 1.2rem 1.4rem;
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
}

/* -------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */
#fuss {
	background: var(--bg-footer);
	color: var(--text-footer);
	font-size: .8rem;
	padding: .55rem 1.2rem;
	text-align: center;
	flex-shrink: 0;
}

#fuss a {
	color: var(--text-footer);
	margin: 0 .4rem;
}

#fuss a:hover { color: var(--text-nav-hover); }

/* -------------------------------------------------------------
   Login
   ------------------------------------------------------------ */
#login-bereich {
	max-width: 380px;
	margin: 3rem auto 0;
	background: var(--bg-panel);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 2rem;
	box-shadow: var(--shadow-md);
}

#login-bereich h1 {
	font-size: 1.2rem;
	margin-bottom: 1.2rem;
	text-align: center;
}

#login-form div {
	margin-bottom: .8rem;
}

#login-form label {
	display: block;
	font-size: .85rem;
	margin-bottom: .25rem;
	color: var(--text-muted);
}

#login-footer {
	margin-top: 1.2rem;
	text-align: center;
	font-size: .82rem;
	color: var(--text-muted);
	border-top: 1px solid var(--border);
	padding-top: .8rem;
}

#login-footer a { margin: 0 .4rem; }

/* -------------------------------------------------------------
   Panels / Sektionen
   ------------------------------------------------------------ */
section {
	background: var(--bg-panel);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 1rem 1.2rem;
	margin-bottom: 1.2rem;
	box-shadow: var(--shadow-sm);
}

/* -------------------------------------------------------------
   Formulare
   ------------------------------------------------------------ */
table.form-tabelle,
form table {
	border-collapse: collapse;
	width: 100%;
	max-width: 560px;
}

table.form-tabelle th,
form table th {
	text-align: left;
	padding: .4rem .6rem .4rem 0;
	font-weight: normal;
	color: var(--text-muted);
	font-size: .9rem;
	width: 38%;
	vertical-align: middle;
}

table.form-tabelle td,
form table td {
	padding: .35rem 0;
	vertical-align: middle;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="url"],
select,
textarea {
	width: 100%;
	padding: .4rem .6rem;
	border: 1px solid var(--border-input);
	border-radius: var(--radius);
	background: var(--bg-input);
	color: var(--text-base);
	font-size: .9rem;
	font-family: inherit;
	transition: border-color var(--transition), box-shadow var(--transition);
}

input:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var(--border-focus);
	box-shadow: 0 0 0 2px rgba(59,130,246,.20);
}

/* Inline-Inputs in Tabellenzellen */
td input[type="text"],
td input[type="email"],
td input[type="url"],
td input[type="date"],
td select {
	width: auto;
	min-width: 120px;
	padding: .25rem .4rem;
}

/* -------------------------------------------------------------
   Buttons
   ------------------------------------------------------------ */
button,
input[type="submit"] {
	display: inline-block;
	padding: .4rem .9rem;
	background: var(--btn-bg);
	color: var(--btn-text);
	border: none;
	border-radius: var(--radius);
	font-size: .88rem;
	font-family: inherit;
	cursor: pointer;
	transition: background var(--transition);
	/*margin-top: .4rem;*/
	margin-top: 0px;
	margin-right: .3rem;
}

button:hover,
input[type="submit"]:hover {
	background: var(--btn-hover);
}

button:disabled {
	opacity: .55;
	cursor: not-allowed;
}

/* Sekundär-Buttons */
button.btn-sec,
.btn-abbrechen,
.btn-benutz-abbrechen,
#benutzer-suche-reset,
.btn-rollen-zeile-entfernen,
.btn-benutz-pw-abbrechen {
	background: var(--btn-sec-bg);
	color: var(--btn-sec-text);
}

button.btn-sec:hover,
.btn-abbrechen:hover,
.btn-benutz-abbrechen:hover,
#benutzer-suche-reset:hover,
.btn-rollen-zeile-entfernen:hover,
.btn-benutz-pw-abbrechen:hover {
	background: var(--btn-sec-hover);
}

/* -------------------------------------------------------------
   Datentabellen (Verwaltung)
   ------------------------------------------------------------ */
.table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-bottom: .6rem;
}

table#benutzer-tabelle,
table#schule-tabelle,
table.data-tabelle {
	border-collapse: collapse;
	width: 100%;
	font-size: .88rem;
}

table#benutzer-tabelle th,
table#schule-tabelle th,
table.data-tabelle th {
	background: var(--bg-table-head);
	border: 1px solid var(--border);
	padding: .45rem .6rem;
	text-align: left;
	font-weight: bold;
	white-space: nowrap;
}

table#benutzer-tabelle td,
table#schule-tabelle td,
table.data-tabelle td {
	border: 1px solid var(--border);
	padding: .4rem .6rem;
	vertical-align: top;
}

table#benutzer-tabelle tbody tr:nth-child(even),
table#schule-tabelle tbody tr:nth-child(even),
table.data-tabelle tbody tr:nth-child(even) {
	background: var(--bg-table-alt);
}

table#benutzer-tabelle tbody tr:hover,
table#schule-tabelle tbody tr:hover,
table.data-tabelle tbody tr:hover {
	background: rgba(59,130,246,.07);
}

/* -------------------------------------------------------------
   Feld-Hilfe (Info-Icon mit Tooltip neben Formular-Labels)
   Anzeige per :hover UND :focus (rein CSS) – funktioniert damit
   einheitlich für Maus-Hover, Tastaturfokus und Touch/Tap (ein Tap
   fokussiert das Icon), ohne zusätzliches JS.
   ------------------------------------------------------------ */
.feld-hilfe {
	position: relative;
	display: inline-block;
	margin-left: .3rem;
	vertical-align: middle;
}
.feld-hilfe-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: hanging;
	width: 1.5rem;
	height: 1.5rem;
	padding: 0;
	margin: 0;
	border: none;
	background: transparent;
	color: var(--text-muted);
	font-size: .75rem;
	font-weight: bold;
	line-height: 1;
	cursor: help;
}
.feld-hilfe-icon:hover,
.feld-hilfe-icon:focus {
	background: transparent;
	color: var(--btn-bg);
	outline: none;
}
.feld-hilfe-text {
	display: none;
	position: absolute;
	left: 0;
	top: 135%;
	z-index: 50;
	width: max-content;
	max-width: 240px;
	padding: .4rem .6rem;
	background: var(--text-base);
	color: var(--bg-panel);
	font-size: .78rem;
	font-weight: normal;
	line-height: 1.35;
	border-radius: var(--radius);
	box-shadow: var(--shadow-md);
	white-space: normal;
}
.feld-hilfe-icon:hover + .feld-hilfe-text,
.feld-hilfe-icon:focus + .feld-hilfe-text {
	display: block;
}

/* -------------------------------------------------------------
   Meldungen
   ------------------------------------------------------------ */
.mod-meldung {
	display: none;
	padding: .45rem .75rem;
	border-radius: var(--radius);
	font-size: .88rem;
	margin-top: .5rem;
}

.fehler,
.mod-meldung.fehler {
	display: block;
	background: var(--msg-err-bg);
	color: var(--msg-err-text);
	padding: .4rem .9rem;
	border-radius: var(--radius);
	font-size: .88rem;
	margin-top: .4rem;
}

.erfolg,
.mod-meldung.erfolg {
	display: block;
	background: var(--msg-ok-bg);
	color: var(--msg-ok-text);
	padding: .4rem .9rem;
	border-radius: var(--radius);
	font-size: .88rem;
	margin-top: .4rem;
}

#login-fehler {
	background: var(--msg-err-bg);
	color: var(--msg-err-text);
	padding: .4rem .65rem;
	border-radius: var(--radius);
	font-size: .88rem;
	margin-bottom: .5rem;
}

#lade-indikator {
	position: fixed;
	top: .6rem;
	right: 1rem;
	background: var(--btn-bg);
	color: #fff;
	padding: .3rem .8rem;
	border-radius: var(--radius);
	font-size: .82rem;
	box-shadow: var(--shadow-sm);
	z-index: 999;
}

/* -------------------------------------------------------------
   Zentrale Meldungsroutine (siehe js/mct.js: meldung_ausgeben()).
   Ziel-Container ist normalerweise ausgeblendet und wird nur bei
   sichtbarer Meldung per .meldung-sichtbar auf flex geschaltet, damit
   Text und ×-Icon nebeneinander stehen.
   ------------------------------------------------------------ */
.meldung {
	display: none;
	align-items: baseline;
	gap: .5rem;
	padding: .3rem .7rem;
	border-radius: var(--radius);
	font-size: .85rem;
	line-height: 1.3;
}

.meldung.meldung-sichtbar {
	display: flex;
}

.meldung-text {
	/* Umbruch erlaubt, aber nie innerhalb eines Worts (z. B.
	   Benutzername/Passwort) – das ist bereits das Standardverhalten,
	   solange hier kein word-break/overflow-wrap:break-word gesetzt
	   wird; Text bleibt dadurch außerdem problemlos markier-/kopierbar. */
	white-space: normal;
	word-break: normal;
	overflow-wrap: normal;
}

.meldung.meldung-ok {
	background: var(--msg-ok-bg);
	color: var(--msg-ok-text);
}

.meldung.meldung-error {
	background: var(--msg-err-bg);
	color: var(--msg-err-text);
}

.meldung-schliessen {
	flex: 0 0 auto;
	cursor: pointer;
	font-size: .9rem;
	line-height: 1;
	padding: 0 .1rem;
	opacity: .65;
}

.meldung-schliessen:hover {
	opacity: 1;
}

/* -------------------------------------------------------------
   Rollen-Zeile (Benutzer anlegen)
   ------------------------------------------------------------ */

/* -------------------------------------------------------------
   Datenschutz / Impressum
   ------------------------------------------------------------ */
#datenschutz-text h4,
#mod-datenschutz h4,
#mod-impressum h4 {
	margin-top: .9rem;
	margin-bottom: .25rem;
}

#impressum-inhalt h3 {
	margin-top: .9rem;
	margin-bottom: .25rem;
}

/* -------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
@media (max-width: 640px) {

	#inhalt { padding: .8rem .75rem; }

	#login-bereich {
		margin-top: 1.5rem;
		padding: 1.4rem 1rem;
	}

	/* Formulartabellen auf kleinen Screens umbrechen */
	table.form-tabelle,
	form table {
		display: block;
	}

	table.form-tabelle tbody,
	form table tbody,
	table.form-tabelle tr,
	form table tr {
		display: block;
	}

	table.form-tabelle th,
	form table th {
		display: block;
		width: 100%;
		padding-bottom: .1rem;
	}

	table.form-tabelle td,
	form table td {
		display: block;
		width: 100%;
		padding-bottom: .5rem;
	}

	table.form-tabelle td input,
	form table td input,
	table.form-tabelle td select,
	form table td select {
		width: 100%;
	}

	/* Datentabellen scrollen horizontal */
	table#benutzer-tabelle,
	table#schule-tabelle,
	table.data-tabelle {
		min-width: 600px;
	}

	button,
	input[type="submit"] {
		padding: .45rem .85rem;
		font-size: .9rem;
	}
}

/* -------------------------------------------------------------
   Header: Kontext-Anzeige
   ------------------------------------------------------------ */
#kopf-kontext {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin-left: auto;
	font-size: .85rem;
}

#kopf-user   { color: var(--text-header); font-weight: bold; }
#kopf-schule { color: #94a3b8; }
#kopf-rolle  {
	color: var(--text-nav-hover);
	background: var(--bg-hover);
	padding: .15rem .5rem;
	border-radius: var(--radius);
	font-size: .8rem;
}

/* -------------------------------------------------------------
   Kontext-Dialog (Overlay)
   ------------------------------------------------------------ */
#kontext-dialog {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.45);
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
}

#kontext-dialog-innen {
	background: var(--bg-panel);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 1.5rem;
	width: 100%;
	max-width: 400px;
	box-shadow: var(--shadow-md);
}

#kontext-dialog-innen h3 {
	margin-bottom: 1rem;
}

/* Login: Kontext-Select immer sichtbar, kein Springen */
#login-kontext {
	width: 100%;
}

@media (max-width: 640px) {
	#kopf-kontext { flex-wrap: wrap; gap: .3rem; }
	#kopf-schule  { display: none; }
}

/* -------------------------------------------------------------
   Zweispaltiges Formular-Layout (Benutzer anlegen)
   ------------------------------------------------------------ */
.form-zweispaltig {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	align-items: flex-start;
}

.form-links {
	flex: 1 1 300px;
	min-width: 260px;
}

.form-rechts {
	flex: 1 1 280px;
	min-width: 240px;
	border-left: 1px solid var(--border);
	padding-left: 1.2rem;
}

/* Kompakte Formular-Tabelle (weniger vertikaler Abstand) */
table.form-tabelle-kompakt {
	border-collapse: collapse;
	width: 100%;
}

table.form-tabelle-kompakt th {
	text-align: left;
	padding: .25rem .5rem .25rem 0;
	font-weight: normal;
	color: var(--text-muted);
	font-size: .88rem;
	width: 36%;
	vertical-align: middle;
	white-space: nowrap;
}

table.form-tabelle-kompakt td {
	padding: .2rem 0;
	vertical-align: middle;
}

table.form-tabelle-kompakt input,
table.form-tabelle-kompakt select {
	padding: .3rem .5rem;
	font-size: .88rem;
}

/* Rollen-Zeilen im rechten Bereich */

.form-rechts .neu-lul-klassen-select,
.form-rechts .neu-klasse-select {
	width: 100%;
}

.form-rechts .neu-klassen-label {
	display: block;
	font-size: .82rem;
	color: var(--text-muted);
	margin-top: .25rem;
}

.form-rechts .neu-schule-label {
	font-size: .88rem;
	font-weight: bold;
}

/* Auf schmalen Screens: rechter Bereich ohne Trennlinie */
@media (max-width: 640px) {
	.form-rechts {
		border-left: none;
		border-top: 1px solid var(--border);
		padding-left: 0;
		padding-top: .8rem;
	}
}

/* -------------------------------------------------------------
   Benutzer-Filterkasten (gemeinsamer Filter: Schule + Suche + Inaktiv)
   ------------------------------------------------------------ */
#benutzer-filterkasten {
	padding: .6rem .8rem;
}

#benutzer-filter-zeile {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
}

#benutzer-filter-zeile form {
	display: flex;
	align-items: center;
	gap: .3rem;
	margin: 0;
}

#benutzer-filter-zeile form label {
	font-size: .88rem;
	color: var(--text-muted);
	white-space: nowrap;
}

#benutzer-schulfilter {
	width: auto;
}

#benutzer-filter {
	flex: 1 1 180px;
	max-width: 300px;
}

#benutzer-filter-inaktiv-label {
	font-size: .88rem;
	color: var(--text-muted);
	display: flex;
	align-items: center;
	gap: .3rem;
	cursor: pointer;
	white-space: nowrap;
}

#benutzer-filter-inaktiv {
	width: auto;
}

#benutzer-filter-anzahl {
	font-size: .82rem;
	color: var(--text-muted);
	margin-left: auto;
	white-space: nowrap;
}

/* Sortierbare Spaltenköpfe */
#benutzer-tabelle .sortierbar {
	cursor: pointer;
	user-select: none;
}

#benutzer-tabelle .sortierbar:hover {
	background: var(--bg-hover);
	color: var(--text-nav-hover);
}

#benutzer-tabelle .sort-asc::after  { content: ' ▲'; font-size: .75em; }
#benutzer-tabelle .sort-desc::after { content: ' ▼'; font-size: .75em; }

/* -------------------------------------------------------------
   Icon-Buttons (kompakt, nur Symbol)
   ------------------------------------------------------------ */
button.btn-icon {
	padding: .25rem .4rem;
	font-size: 1rem;
	line-height: 1;
	background: transparent;
	color: inherit;
	border: 1px solid var(--border);
	margin-top: 0;
	margin-right: .2rem;
	border-radius: var(--radius);
	cursor: pointer;
	transition: background var(--transition), border-color var(--transition);
}

button.btn-icon:hover {
	background: var(--bg-hover);
	border-color: var(--bg-hover);
}

.td-aktionen {
	white-space: nowrap;
}

/* -------------------------------------------------------------
   Benutzer-Import-Zeile
   ------------------------------------------------------------ */
#benutzer-import-zeile {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin-top: .6rem;
	padding-top: .6rem;
	border-top: 1px solid var(--border);
}

#benutzer-import-klasse {
	flex: 1 1 180px;
	max-width: 280px;
}

#benutzer-import-csv {
	flex: 1 1 160px;
}

#btn-benutzer-csv-import {
	white-space: nowrap;
}

#benutzer-import-meldung {
	font-size: .85rem;
}

/* -------------------------------------------------------------
   Feldhinweise (Verfügbarkeitsprüfung)
   ------------------------------------------------------------ */
.feld-hinweis {
	display: block;
	font-size: .8rem;
	margin-top: .15rem;
}

.hinweis-ok    { color: #166534; }
.hinweis-fehler { color: #991b1b; }

/* -------------------------------------------------------------
   Schulen-Aktionsleiste
   ------------------------------------------------------------ */
#schule-aktion-bereich {
	display: flex;
	align-items: center;
	gap: .5rem;
	flex-wrap: wrap;
	padding: .6rem .8rem;
}

#schule-meldung {
	font-size: .88rem;
}

/* -------------------------------------------------------------
   Benutzer-Aktionsbereich
   ------------------------------------------------------------ */
#benutzer-aktion-bereich {
	padding: .5rem .8rem;
}

#benutzer-aktion-zeile {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
}

#benutzer-aktion-meldung {
	font-size: .88rem;
}

/* Rollen-Zeile kompakter */

.neu-lul-klassen-select {
	width: 100%;
	min-width: 160px;
}

/* -------------------------------------------------------------
   Benutzer-Formular: Layout-Korrekturen
   ------------------------------------------------------------ */

/* 1. Gleiche Feldbreite links (Stammdaten) */
.form-links table.form-tabelle-kompakt input,
.form-links table.form-tabelle-kompakt select {
	width: 100%;
	box-sizing: border-box;
}

/* 2. Links 1/3, rechts 2/3 */
#benutzer-form-bereich .form-links  { flex: 1 1 220px; }
#benutzer-form-bereich .form-rechts { flex: 2 1 440px; }

/* 3. Rollen-Zeile: Entfernen-Button ganz rechts */

/* Klassen-Container auf voller Breite unter Schule/Rolle */
.neu-klasse-container,
.neu-lul-klassen-container {
	width: 100%;
	order: 10;
}

/* -------------------------------------------------------------
   Rollen-Zeile: obere Zeile (Schule, Rolle, Entfernen)
   ------------------------------------------------------------ */

/* Klassen-Container volle Breite unter der oberen Zeile */

/* -------------------------------------------------------------
   Rollen-Zeile: Button immer ganz rechts
   ------------------------------------------------------------ */

/* Schule-Select oder Schule-Label: Spalte 1 */

/* Rolle-Select: Spalte 2 */

/* Klassen-Container: Spalte 3, nimmt freien Raum */

/* Entfernen-Button: Spalte 4, immer rechts */

/* hidden input belegt keine Spalte */

/* -------------------------------------------------------------
   Rollen-Zeile (Schule/Rolle/Klassen-Zuweisung im Benutzerformular)
   Grid: [Schule] [Rolle] [Klassen – freier Raum] [–-Button]
   ------------------------------------------------------------ */
.neu-rollen-zeile {
	display: grid;
	grid-template-columns: minmax(0, max-content) minmax(0, max-content) minmax(0, 1fr) auto;
	align-items: start;
	gap: .35rem;
	margin-bottom: .4rem;
	padding: .4rem .5rem;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--bg-page);
}

.neu-rollen-zeile input[type="hidden"] { display: none; }

.neu-rollen-zeile .neu-schule-select,
.neu-rollen-zeile .neu-schule-label {
	grid-column: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.neu-rollen-zeile .neu-rolle-select {
	grid-column: 2;
	min-width: 0;
}

.neu-rollen-zeile .neu-klasse-container,
.neu-rollen-zeile .neu-lul-klassen-container {
	grid-column: 3;
	grid-row: 1;
	min-width: 0;
	width: 100%;
	align-self: start;
}

.neu-rollen-zeile .neu-klasse-container select,
.neu-rollen-zeile .neu-lul-klassen-container select {
	width: 100%;
	min-width: 0;
}

.neu-rollen-zeile .btn-rollen-zeile-entfernen {
	grid-column: 4;
	margin: 0;
	flex-shrink: 0;
}

.neu-rollen-zeile select {
	width: auto;
	min-width: 0;
	padding: .28rem .4rem;
	font-size: .87rem;
}

/* ── Feedback-Icon im Footer ───────────────────────────────────── */
#feedback-icon {
	position:        fixed;
	bottom:          1.2rem;
	right:           1.2rem;
	z-index:         900;
	font-size:       1.5rem;
	line-height:     1;
	padding:         0.4rem 0.5rem;
	border-radius:   var(--radius);
	background:      var(--btn-bg);
	color:           var(--btn-text);
	border:          none;
	cursor:          pointer;
	box-shadow:      var(--shadow-md);
	transition:      var(--transition);
}
#feedback-icon:hover {
	background: var(--btn-hover);
}

/* ── Feedback-Overlay ──────────────────────────────────────────── */
#feedback-overlay {
	position:        fixed;
	inset:           0;
	z-index:         1000;
	background:      rgba(0, 0, 0, 0.45);
	display:         flex;
	align-items:     center;
	justify-content: center;
}
#feedback-box {
	background:      var(--bg-panel);
	color:           var(--text-base);
	border:          1px solid var(--border);
	border-radius:   var(--radius);
	box-shadow:      var(--shadow-md);
	padding:         1.5rem 2rem;
	width:           min(480px, 95vw);
	display:         flex;
	flex-direction:  column;
	gap:             1rem;
}
#feedback-box h3 {
	margin: 0;
}
#feedback-box select {
	width:      100%;
	box-sizing: border-box;
}
#feedback-box textarea {
	width:       100%;
	resize:      vertical;
	box-sizing:  border-box;
	line-height: 1.4;
	min-height:  calc(5  * 1.4em + 2 * .4rem); /* ca. 5 Zeilen */
	max-height:  calc(20 * 1.4em + 2 * .4rem); /* ca. 20 Zeilen */
}
#feedback-ov-aktion-zeile {
	overflow: hidden; /* Clearfix, da die Buttons gefloatet sind */
}
#btn-feedback-abbrechen {
	float: left;
}
#btn-feedback-senden {
	float: right;
}
#feedback-meldung {
	clear: both;
}

/* ── Session-Timeout-Overlay ───────────────────────────────────── */
#session-timeout-overlay {
	position:        fixed;
	inset:           0;
	z-index:         1001;
	background:      rgba(0, 0, 0, 0.45);
	display:         flex;
	align-items:     center;
	justify-content: center;
}
#session-timeout-box {
	background:      var(--bg-panel);
	color:           var(--text-base);
	border:          1px solid var(--border);
	border-radius:   var(--radius);
	box-shadow:      var(--shadow-md);
	padding:         1.5rem 2rem;
	width:           min(420px, 95vw);
	text-align:      center;
}
#session-timeout-box h3 {
	margin: 0 0 .75rem 0;
}
#session-timeout-box p {
	margin: 0 0 1rem 0;
}
#session-timeout-countdown {
	font-weight:          bold;
	font-variant-numeric: tabular-nums;
}

/* =============================================================
   Zentrale Ergebnis-Detailansicht (ausgabe_ergebnisse, mct.js)
   Wird von mod_ergebnisse, mod_aufgaben_sus, mod_aufgaben_lul
   verwendet. Farb-/Zustandsklassen der Items sind identisch zu
   screen4 in mod_test.css (test-3-marker-*, test-3-rahmen-*,
   test-3-antwortkarte, test-3-kernpunkte-liste); die Zusammenfassung
   nutzt dasselbe Tabellenlayout wie screen2b (test-2b-tabelle).
   Umschaltung Desktop <-> Smartphone: Breakpoint 640px, analog
   mod_aufgaben_sus.css (.as-desktop-only/.as-mobil-only).
   ============================================================= */
.ausgabe-ergebnisse-leer {
	color: var(--text-muted);
	font-style: italic;
	padding: 8px 0;
}

/* Smartphone: Zusammenfassung (immer sichtbar) + Item-Akkordeon */
#ausgabe-ergebnisse-smartphone { display: none; }

#ausgabe-ergebnisse-smartphone-zusammenfassung {
	background-color: var(--bg-panel);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 12px;
	margin-bottom: 12px;
}

#ausgabe-ergebnisse-smartphone-items {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ausgabe-ergebnisse-akkordeon {
	background-color: var(--bg-panel);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
}

.ausgabe-ergebnisse-akkordeon-kopf {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	cursor: pointer;
	font-weight: bold;
}

.ausgabe-ergebnisse-prozent {
	color: var(--text-muted);
	font-weight: 400;
}

.ausgabe-ergebnisse-akkordeon-inhalt {
	padding: 0 12px 12px;
}

/* Desktop: 40 % Zusammenfassung links, 60 % Items rechts */
#ausgabe-ergebnisse-desktop {
	display: flex;
	gap: 1.5rem;
	align-items: flex-start;
}

#ausgabe-ergebnisse-desktop-zusammenfassung {
	flex: 0 0 40%;
	background-color: var(--bg-panel);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 12px;
}

#ausgabe-ergebnisse-desktop-items {
	flex: 0 0 60%;
}

#ausgabe-ergebnisse-desktop-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 12px;
}

.ausgabe-ergebnisse-badge {
	display: inline-block;
	padding: 6px 10px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background-color: var(--bg-panel);
	cursor: pointer;
	font-size: 0.85rem;
	transition: var(--transition);
}

.ausgabe-ergebnisse-badge:hover {
	background-color: var(--bg-hover);
}

.ausgabe-ergebnisse-badge-aktiv {
	border-color: var(--btn-bg);
	box-shadow: 0 0 0 1px var(--btn-bg);
}

#ausgabe-ergebnisse-desktop-inhalt:empty {
	display: none;
}

#ausgabe-ergebnisse-desktop-inhalt:not(:empty) {
	background-color: var(--bg-panel);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 12px;
}

@media (max-width: 640px) {
	#ausgabe-ergebnisse-desktop    { display: none; }
	#ausgabe-ergebnisse-smartphone { display: block; }
}