/* Anlehnung an elem-ent.com: dunkler Grund, Hausschrift DIN Next in Light,
   Orange sparsam als Akzent, scharfe Ecken statt Rundungen, Ghost-Buttons.

   Bewusst nur ein Farbschema statt Light/Dark-Umschaltung: die Wortmarke
   liegt als weisses PNG auf transparentem Grund vor und waere auf hellem
   Hintergrund unsichtbar. */

@font-face {
	font-family: "DIN Next LT Pro";
	src: url("/assets/fonts/DINNextLTPro-Light.ttf") format("truetype");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
    ascent-override: 94%; descent-override: 26%;
}

@font-face {
	font-family: "DIN Next LT Pro";
	src: url("/assets/fonts/DINNextLTPro-Bold.ttf") format("truetype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
    ascent-override: 94%; descent-override: 26%;
}

:root {
	--bg: #141414;
	--surface: #1c1a1c;
	--surface-hover: #232123;
	--border: #3a373a;
	--text: #ffffff;
	--text-muted: #a8a4a8;
	--accent: #f04e2a;          /* Hausfarbe, direkt aus elem-ent.com */
	--accent-hover: #ff5f3b;
	--danger-border: #7a2a1a;
	--danger-bg: #2a1512;
	--danger-text: #ff9d85;

	/* Zustandsfarben fuer Betriebsanzeigen. Bewusst getrennt von --accent: Die
	   Hausfarbe bedeutet "anklickbar", nicht "achtung". Wuerden beide dasselbe
	   Orange benutzen, liesse sich eine Warnung nicht mehr von einer normalen
	   Kachel unterscheiden. */
	--ok-text: #6fcf8b;
	--warn-text: #e8b84b;

	--font: "DIN Next LT Pro", "DIN Next", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	min-height: 100vh;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

/* ---------- Logo ---------- */

.logo {
	display: block;
	width: 100%;
	max-width: 260px;
	height: auto;
	margin: 0 auto;
}

/* ---------- Formularelemente ---------- */

label {
	display: block;
	margin-bottom: 8px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--text-muted);
}

input[type="text"],
input[type="password"] {
	width: 100%;
	padding: 12px 14px;
	margin-bottom: 20px;
	border: 1px solid var(--border);
	border-radius: 0;
	background: transparent;
	color: var(--text);
	font: inherit;
}

input::placeholder { color: #6f6b6f; }

input:focus {
	outline: none;
	border-color: var(--accent);
}

button {
	padding: 13px 22px;
	border: 1px solid var(--accent);
	border-radius: 0;
	background: var(--accent);
	color: #fff;
	font-family: var(--font);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .12em;
	cursor: pointer;
	transition: background .15s, border-color .15s, color .15s;
}

button:disabled { opacity: .5; cursor: default; }
button:not(:disabled):hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* Ghost-Variante wie die Buttons auf der Website */
.ghost {
	background: transparent;
	border-color: var(--border);
	color: var(--text-muted);
	padding: 8px 16px;
	font-size: 11px;
}

.ghost:not(:disabled):hover {
	background: transparent;
	border-color: var(--accent);
	color: var(--accent);
}

/* Der Verwaltungs-Link steht neben den Ghost-Buttons und soll aussehen wie
   sie. Die Grundform (Rahmen, Versalien, Sperrung) steckt aber in der
   button-Regel, und die greift bei einem <a> nicht. */
a.ghost {
	display: inline-block;
	border: 1px solid var(--border);
	text-decoration: none;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .12em;
	transition: background .15s, border-color .15s, color .15s;
}

/* ---------- Login ---------- */

.login-wrap {
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: 32px 24px;
}

.login-inner { width: 100%; max-width: 400px; }

.login-inner .logo { margin-bottom: 48px; }

.login-card {
	border: 1px solid var(--border);
	background: var(--surface);
	padding: 36px;
}

.login-card h1 {
	margin: 0 0 6px;
	font-size: 20px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
}

.login-card .sub {
	margin: 0 0 32px;
	color: var(--text-muted);
	font-size: 15px;
}

.login-card button[type="submit"] { width: 100%; }

.error {
	margin-bottom: 20px;
	padding: 12px 14px;
	border: 1px solid var(--danger-border);
	background: var(--danger-bg);
	color: var(--danger-text);
	font-size: 14px;
}

.hint {
	margin: 24px 0 0;
	color: var(--text-muted);
	font-size: 13px;
	text-align: center;
}

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

header { border-bottom: 1px solid var(--border); }

.utility {
	max-width: 1060px;
	margin: 0 auto;
	padding: 12px 24px 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;
}

.who {
	color: var(--text-muted);
	font-size: 13px;
	letter-spacing: .02em;
}

.masthead { padding: 20px 24px 32px; }

/* ---------- Inhalt ---------- */

main {
	max-width: 1060px;
	margin: 0 auto;
	padding: 48px 24px 80px;
}

.clock { margin-bottom: 48px; }

.clock .time {
	font-size: 52px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -.01em;
	font-variant-numeric: tabular-nums;
}

.clock .date {
	color: var(--text-muted);
	font-size: 16px;
}

h2 {
	margin: 0 0 20px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .18em;
	color: var(--text-muted);
}

/* Jede weitere Rubrik braucht Luft nach oben. Die erste nicht -- darueber steht
   schon die Uhr mit eigenem Abstand. */
.tiles + h2,
.tile + h2 { margin-top: 56px; }

/* Einzeln umrandete Kacheln statt eines durchgehenden Rasters mit
   1px-Abstand: bei dem Trick scheint in unbesetzten Zellen die
   Containerfarbe als grosser Block durch, sobald die Kachelzahl kein
   Vielfaches der Spaltenzahl ist. */
.tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 16px;
}

.tile {
	display: block;
	padding: 28px 24px;
	background: var(--surface);
	border: 1px solid var(--border);
	color: inherit;
	text-decoration: none;
	transition: background .15s, border-color .15s;
}

a.tile:hover {
	background: var(--surface-hover);
	border-color: var(--accent);
}

.tile .name {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 6px;
}

a.tile:hover .name { color: var(--accent); }

.tile .desc {
	color: var(--text-muted);
	font-size: 15px;
}

.tile .tag {
	display: inline-block;
	margin-top: 18px;
	padding: 3px 10px;
	border: 1px solid var(--border);
	color: var(--text-muted);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .1em;
}

.tile.soon { opacity: .45; }

/* ---------- Betriebsanzeige ---------- */

/* Der Zustand steht als Wort da, nicht nur als Farbe. Ein Punkt allein waere
   fuer Farbfehlsichtige und im Sonnenlicht auf dem Tablet wertlos. */
.tile .zustand {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 2px 0 8px;
	font-size: 15px;
	font-weight: 700;
}

.tile .zustand .punkt {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: currentColor;
	flex: none;
}

.zustand-aktuell        { color: var(--ok-text); }
.zustand-unvollstaendig { color: var(--warn-text); }
.zustand-veraltet       { color: var(--warn-text); }
.zustand-fehlgeschlagen { color: var(--danger-text); }
.zustand-unbekannt      { color: var(--text-muted); }

/* Faellt die Sicherung aus, soll die Kachel nicht aussehen wie jede andere. */
.tile.status.warnung { border-color: var(--warn-text); }
.tile.status.stoerung {
	border-color: var(--danger-border);
	background: var(--danger-bg);
}

/* Der Zustand behaelt seine Farbe, auch wenn die Kachel ein Link ist -- sonst
   faerbte a.tile:hover .name ihn in die Hausfarbe und "Fehlgeschlagen" saehe
   beim Ueberfahren aus wie eine normale Kachel. */
a.tile.status:hover .zustand-aktuell        { color: var(--ok-text); }
a.tile.status:hover .zustand-unvollstaendig,
a.tile.status:hover .zustand-veraltet       { color: var(--warn-text); }
a.tile.status:hover .zustand-fehlgeschlagen { color: var(--danger-text); }

/* ---------- Detailseite Sicherungen ---------- */

.zurueck {
	display: inline-block;
	margin-bottom: 24px;
	color: var(--text-muted);
	text-decoration: none;
	font-size: 14px;
}

.zurueck:hover { color: var(--accent); }

h1 {
	margin: 0 0 24px;
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -.01em;
}

.hinweis {
	color: var(--text-muted);
	font-size: 14px;
	margin: 0 0 20px;
	max-width: 68ch;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Breite Inhalte scrollen in ihrem eigenen Kasten, damit die Seite selbst
   niemals seitlich wandert. */
.tabelle-rahmen {
	overflow-x: auto;
	border: 1px solid var(--border);
	background: var(--surface);
	margin-bottom: 40px;
}

table.saetze {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

table.saetze th,
table.saetze td {
	padding: 12px 16px;
	text-align: left;
	border-bottom: 1px solid var(--border);
	white-space: nowrap;
}

table.saetze thead th {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--text-muted);
}

table.saetze tbody tr:last-child td { border-bottom: none; }
table.saetze .num { text-align: right; font-variant-numeric: tabular-nums; }
table.saetze .leer { color: var(--text-muted); }
table.saetze .fehlt { color: var(--warn-text); }

.marke {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 7px;
	border: 1px solid var(--border);
	color: var(--text-muted);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .08em;
}

.anleitung { margin-top: 8px; }

.warnbox {
	border: 1px solid var(--danger-border);
	background: var(--danger-bg);
	color: var(--danger-text);
	padding: 14px 16px;
	font-size: 14px;
	margin: 0 0 16px;
	max-width: 68ch;
}

.befehle {
	border: 1px solid var(--border);
	background: var(--surface);
	margin-bottom: 32px;
}

.befehle-kopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--border);
	font-family: var(--mono, ui-monospace, "SF Mono", Consolas, monospace);
	font-size: 13px;
	color: var(--text-muted);
	word-break: break-all;
}

.befehle pre {
	margin: 0;
	padding: 16px;
	overflow-x: auto;
	font-family: var(--mono, ui-monospace, "SF Mono", Consolas, monospace);
	font-size: 13px;
	line-height: 1.6;
	tab-size: 2;
}

.gruende {
	max-width: 68ch;
	font-size: 15px;
	line-height: 1.6;
	color: var(--text-muted);
	padding-left: 20px;
}

.gruende li { margin-bottom: 10px; }
.gruende strong { color: var(--text); }

h3 {
	margin: 0 0 12px;
	font-size: 16px;
	font-weight: 700;
}

/* ---------- Verwaltung ---------- */

.fehlerbox {
	border: 1px solid var(--danger-border);
	background: var(--danger-bg);
	color: var(--danger-text);
	padding: 12px 16px;
	font-size: 14px;
	margin: 0 0 24px;
	max-width: 68ch;
}

table.saetze td.mono {
	font-family: var(--mono, ui-monospace, "SF Mono", Consolas, monospace);
	font-size: 13px;
	color: var(--text-muted);
}

/* Die Kachelliste darf umbrechen; alle anderen Spalten bleiben einzeilig,
   damit die Tabelle nicht zerfaellt. */
table.saetze td.umbruch {
	white-space: normal;
	max-width: 32ch;
}

table.saetze td.aktionen {
	text-align: right;
	white-space: nowrap;
}

table.saetze td.aktionen button { margin-left: 8px; }

button.ghost.gefahr:not(:disabled):hover {
	border-color: var(--danger-text);
	color: var(--danger-text);
}

.formular {
	border: 1px solid var(--border);
	background: var(--surface);
	padding: 28px 24px;
	margin-bottom: 40px;
	max-width: 68ch;
}

.formular h2 { margin-top: 0; }

/* .feld ist selbst ein <label>, und die globale label-Regel oben setzt
   Grossbuchstaben, Fettung und Sperrung. Das ist fuer die Feldueberschrift
   richtig, nicht fuer Hilfetexte und Kachelnamen darin -- also hier
   zuruecknehmen und unten gezielt wieder auftragen. */
.feld {
	display: block;
	margin-bottom: 20px;
	border: none;
	padding: 0;
	text-transform: none;
	letter-spacing: normal;
	font-weight: 400;
	font-size: 15px;
	color: var(--text);
}

.feld > span,
.feld > legend {
	display: block;
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--text-muted);
	padding: 0;
}

.feld input[type="text"],
.feld select {
	width: 100%;
	box-sizing: border-box;
}

.feld small {
	display: block;
	margin-top: 6px;
	color: var(--text-muted);
	font-size: 13px;
}

.kachelwahl {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 10px;
}

/* Ebenfalls ein <label>: dieselbe Ruecknahme wie bei .feld. */
.kachelwahl-eintrag {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	border: 1px solid var(--border);
	padding: 10px 12px;
	cursor: pointer;
	font-size: 14px;
	text-transform: none;
	letter-spacing: normal;
	font-weight: 400;
	color: var(--text);
	margin-bottom: 0;
}

.kachelwahl-eintrag:hover { border-color: var(--accent); }
.kachelwahl-eintrag input { margin-top: 3px; flex: none; }
.kachelwahl-eintrag strong { display: block; font-weight: 600; }

.kachelwahl-eintrag small {
	display: block;
	margin-top: 2px;
	color: var(--text-muted);
	font-size: 12px;
}

.formular-knoepfe {
	display: flex;
	gap: 12px;
	align-items: center;
}

@media (max-width: 520px) {
	.clock .time { font-size: 40px; }
	main { padding-top: 32px; }
}