/* =========================================================================
   ALL-INKL.COM  ·  Monitoring
   Modernes Stylesheet im Design der Webseite all-inkl.com
   Design-Tokens uebernommen aus /css/global_defs.less
   ========================================================================= */

/* ---------- Webfonts (geteilt mit all-inkl.com, /public/fonts) ---------- */
@font-face {
	font-display: swap;
	font-family: ProximaNova;
	font-style: normal;
	font-weight: 400;
	src: url(/fonts/ProximaNova-Regular.woff2) format("woff2");
}
@font-face {
	font-display: swap;
	font-family: ProximaNova;
	font-style: normal;
	font-weight: 600;
	src: url(/fonts/ProximaNova-Semibold.woff2) format("woff2");
}
@font-face {
	font-display: swap;
	font-family: ProximaNova;
	font-style: normal;
	font-weight: 700;
	src: url(/fonts/ProximaNova-Bold.woff2) format("woff2");
}
@font-face {
	font-display: swap;
	font-family: ProximaNova;
	font-style: italic;
	font-weight: 400;
	src: url(/fonts/ProximaNova-RegularIt.woff2) format("woff2");
}

/* Icon-Font der Webseite (Telefon, Kontakt, Sprache) */
@font-face {
	font-display: swap;
	font-family: "webfont";
	src: url("/fonts/webfont_d80cf22f47eb00a9492512255ffdfd51.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
}

/* ---------------------------- Design-Tokens ---------------------------- */
:root {
	/* Markenfarben (global_defs.less) */
	--aik-primary:        #e4003a;   /* --primary-color-600 */
	--aik-primary-dark:   #ac1334;   /* --primary-color-800 */
	--aik-primary-soft:   #fdeaef;

	/* Text */
	--aik-text:           #333333;   /* --dark-gray-800 */
	--aik-text-muted:     #666666;   /* --text-color-200 */
	--aik-text-subtle:    #707070;   /* --dark-gray-default */
	--aik-text-invert:    #ffffff;
	--aik-text-1000:      #000000;   /* --text-color-1000, Headerlinks */

	/* Flaechen */
	--aik-bg:             #f5f5f5;   /* --clr-tarifbox-bg */
	--aik-surface:        #ffffff;
	--aik-surface-alt:    #fcfcfc;   /* --light-gray-100 */
	--aik-surface-sunken: #f3f3f3;   /* --light-gray-300 */

	/* Linien */
	--aik-border:         #e5e5e5;   /* --gray-200 */
	--aik-border-strong:  #d0d5dd;   /* --outline-light-color */
	--aik-divider:        #c8c9cb;   /* --text-color-150 */

	/* Status */
	--aik-ok:             #2cbb2c;   /* --check-green */
	--aik-warn:           #f5a623;
	--aik-error:          #e4003a;

	/* Diagramm-Palette */
	--aik-chart-1: #e4003a;
	--aik-chart-2: #0f6fc5;
	--aik-chart-3: #2cbb2c;
	--aik-chart-4: #f59e0b;
	--aik-chart-5: #7c3aed;
	--aik-chart-6: #06b6d4;

	/* Form */
	--aik-radius:      16px;   /* --tarifbox-radius: 1rem */
	--aik-radius-sm:   8px;
	--aik-radius-xs:   4px;
	--aik-shadow:      0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
	--aik-shadow-sm:   0 1px 2px rgba(0,0,0,.05), 0 2px 8px rgba(0,0,0,.04);

	--aik-font: ProximaNova, Arial, Helvetica, sans-serif;
	/* Zentrierte Lesebreite fuer Header, Menue, Inhalt und Footer. */
	--aik-maxwidth: 1120px;
	/* Nur die Prozesslisten der Statusseiten. Die Obergrenze verhindert,
	   dass Tabellenzeilen auf sehr breiten Monitoren auseinanderlaufen. */
	--aik-maxwidth-breit: 1900px;
}
/* Auf den Statusseiten waechst nur der Inhalt unter dem Menue. Menue, Titel
   und Hinweise bleiben in der Lesebreite, buendig mit Header und Footer;
   48px sind die seitlichen Innenabstaende von .aik-shell. */
body.aik-seite--breit .aik-shell { max-width: var(--aik-maxwidth-breit); }
body.aik-seite--breit .aik-notice,
body.aik-seite--breit .aik-nav,
body.aik-seite--breit .aik-main > h1 {
	width: 100%;
	max-width: calc(var(--aik-maxwidth) - 48px);
	margin-inline: auto;
}

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

/* Muss die display-Angaben der Komponenten unten schlagen (z. B. .aik-legend) */
[hidden] { display: none !important; }

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

body {
	margin: 0;
	background: var(--aik-bg);
	font-family: var(--aik-font);
	font-size: 15px;
	line-height: 1.6;
	color: var(--aik-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
	font-family: var(--aik-font);
	font-weight: 700;
	color: var(--aik-text);
	line-height: 1.25;
	margin: 0 0 16px;
	text-shadow: none;
	border: 0;
	width: auto;
	overflow: visible;
	text-overflow: clip;
}
h1 { font-size: 28px; letter-spacing: -.02em; }
h2 { font-size: 21px; }
h3 { font-size: 17px; }

p { margin: 0 0 14px; }
hr { border: 0; border-top: 1px solid var(--aik-border); margin: 24px 0; }

/* Links – Legacy-Klassen bewusst mit abgedeckt */
a,
a:link, a:visited, a:active, a:focus, a:hover,
a.rotfett:link, a.rotfett:visited, a.rotfett:active, a.rotfett:focus {
	font-family: var(--aik-font);
	font-size: inherit;
	font-weight: 600;
	font-style: normal;
	font-variant: normal;
	text-transform: none;
	line-height: inherit;
	color: var(--aik-primary);
	text-decoration: none;
	transition: color .15s ease;
}
a:hover, a.rotfett:hover { color: var(--aik-primary-dark); text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--aik-primary); outline-offset: 2px; border-radius: 2px; }

a.hgraufett:link, a.hgraufett:visited, a.hgraufett:active {
	color: var(--aik-text-muted);
	font-family: var(--aik-font);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}
a.hgraufett:hover { color: var(--aik-text); }

/* Legacy-Praesentationstags entschaerfen */
font { font-size: inherit !important; font-family: inherit !important; }
small { font-size: 13px; color: var(--aik-text-muted); }
u { text-decoration: none; }

/* ============================== Kopfbereich ============================= */
.aik-header {
	background: var(--aik-surface);
	border-bottom: 1px solid var(--aik-border);
	position: sticky;
	top: 0;
	z-index: 40;
}
.aik-header__inner {
	max-width: var(--aik-maxwidth);
	margin: 0 auto;
	padding: 14px 24px;
	display: flex;
	align-items: center;
	gap: 20px;
	min-height: 66px;
}
.aik-logo {
	display: block;
	width: 210px;
	height: 32px;
	flex: none;
	background: url("/images/all-inkl-logo.svg") no-repeat left center;
	background-size: contain;
	font: 0/0 a;
	color: transparent;
	text-indent: -999em;
}
.aik-logo:hover { opacity: .7; }
.aik-header__title {
	font-size: 15px;
	font-weight: 600;
	color: var(--aik-text-subtle);
	text-transform: uppercase;
	letter-spacing: .08em;
	padding-left: 20px;
	border-left: 1px solid var(--aik-divider);
	white-space: nowrap;
}
/* Supportkontakte und Sprachwahl – wie im Kopf von all-inkl.com */
.aik-header__support {
	margin-left: auto;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 26px;
	justify-content: flex-end;
}
.aik-header__support a.aik-header__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	font-weight: 600;
	color: var(--aik-text-1000, #000);
	white-space: nowrap;
	text-transform: uppercase;
	letter-spacing: .01em;
}
.aik-header__support a.aik-header__link:hover { color: var(--aik-primary); text-decoration: none; }
.aik-header__link::before {
	font-family: "webfont";
	font-weight: normal;
	font-style: normal;
	font-size: 19px;
	line-height: 1;
	color: var(--aik-primary);
	speak: none;
	-webkit-font-smoothing: antialiased;
}
.aik-icon--phone::before { content: "\f102"; }
.aik-icon--mail::before  { content: "\f103"; }

.aik-header__lang {
	display: flex;
	align-items: center;
	gap: 8px;
}
.aik-lang-select {
	position: relative;
	display: inline-block;
	padding-left: 28px;
}
/* Runde Flagge der aktiven Sprache – geteiltes Asset der Webseite */
.aik-lang-select::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	background: url("/images/languages-flags/DE.svg") no-repeat center;
	background-size: contain;
}
.aik-lang-select select {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	background: none;
	padding: 4px 18px 4px 2px;
	font-family: var(--aik-font);
	font-size: 15px;
	font-weight: 600;
	color: var(--aik-text-1000);
	text-transform: uppercase;
	cursor: pointer;
	border-radius: var(--aik-radius-xs);
}
.aik-lang-select::after {
	content: "";
	position: absolute;
	right: 4px;
	top: 50%;
	margin-top: -2px;
	border: 4px solid transparent;
	border-top-color: var(--aik-text-subtle);
	pointer-events: none;
}
.aik-lang-select select:hover { color: var(--aik-primary); }
.aik-lang-select select:focus-visible { outline: 2px solid var(--aik-primary); outline-offset: 2px; }

.aik-lang-select[data-lang-flag="englisch"]::before { background-image: url("/images/languages-flags/GB.svg"); }
.aik-lang-select[data-lang-flag="polnisch"]::before { background-image: url("/images/languages-flags/PL.svg"); }

.aik-header__meta {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: var(--aik-text-muted);
	min-width: 0;
}
.aik-header__server {
	font-weight: 600;
	color: var(--aik-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.aik-header__server::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 8px;
	border-radius: 50%;
	background: var(--aik-ok);
	vertical-align: middle;
}

/* ================================ Layout =============================== */
.aik-shell {
	max-width: var(--aik-maxwidth);
	margin: 0 auto;
	padding: 28px 24px 56px;
}
.aik-notice:not(:empty) {
	margin-bottom: 20px;
	padding: 14px 18px;
	border-radius: var(--aik-radius-sm);
	border: 1px solid var(--aik-primary);
	background: var(--aik-primary-soft);
	color: var(--aik-primary-dark);
	font-weight: 600;
}
/* Das Menue steht als Leiste ueber dem Inhalt, damit die ganze Fensterbreite
   fuer Tabellen und Diagramme frei bleibt. */
.aik-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	align-items: start;
}
.aik-layout--single { grid-template-columns: minmax(0, 1fr); }

/* -------------------------------- Menue -------------------------------- */
.aik-nav {
	background: var(--aik-surface);
	border: 1px solid var(--aik-border);
	border-radius: var(--aik-radius);
	padding: 8px 12px;
	box-shadow: var(--aik-shadow-sm);
	position: sticky;
	top: 66px;
	z-index: 30;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
}
.aik-nav__label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--aik-text-subtle);
	padding: 0;
	margin: 0;
	flex: none;
}
.aik-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px;
	flex: 1 1 auto;
	min-width: 0;
}
.aik-nav__list li + li { margin-top: 0; }
/* Schiebt den Abmeldepunkt ans rechte Ende der Leiste */
.aik-nav__sep {
	flex: 1 1 auto;
	height: 1px;
	background: none;
	margin: 0;
}

/* Restlaufzeit der Sitzung, direkt vor dem Abmeldepunkt */
.aik-nav__restzeit { flex: none; }
.aik-restzeit {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	padding: 6px 10px;
	border: 1px solid var(--aik-border);
	border-radius: var(--aik-radius);
	background: var(--aik-surface-sunken);
	color: var(--aik-text-subtle);
	font-size: 12px;
	white-space: nowrap;
	cursor: default;
}
.aik-restzeit__wort {
	letter-spacing: .06em;
	text-transform: uppercase;
	font-size: 10px;
}
.aik-restzeit__uhr {
	/* Feste Ziffernbreite, damit die Leiste im Sekundentakt nicht zuckt */
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	font-size: 13px;
	color: var(--aik-text);
}
.aik-restzeit.ist-knapp {
	border-color: var(--aik-warn);
	background: #fff6e5;
	color: #8a5a00;
}
.aik-restzeit.ist-knapp .aik-restzeit__uhr { color: #8a5a00; }
.aik-restzeit.ist-abgelaufen {
	border-color: var(--aik-error);
	background: var(--aik-primary-soft);
	color: var(--aik-error);
}
.aik-restzeit.ist-abgelaufen .aik-restzeit__uhr { color: inherit; }

/* Menuelinks – ueberschreibt die Legacy-Klassen .rotfett / .menu */
.aik-nav a,
.aik-nav a.rotfett,
.aik-nav a.menu {
	display: block;
	padding: 8px 13px 8px 28px;
	border-radius: var(--aik-radius-sm);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--aik-text);
	background: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	position: relative;
	transition: background-color .15s ease, color .15s ease;
}
.aik-nav a::before {
	content: "";
	position: absolute;
	left: 12px;
	top: 50%;
	width: 6px;
	height: 6px;
	margin-top: -3px;
	border-radius: 50%;
	background: var(--aik-border-strong);
	transition: background-color .15s ease, transform .15s ease;
}
.aik-nav a:hover {
	background: var(--aik-surface-sunken);
	color: var(--aik-text);
	text-decoration: none;
}
.aik-nav a:hover::before { background: var(--aik-text-subtle); }

/* Aktiver Punkt: zarte Tönung statt vollflächigem Rot – so bleibt die
   Signalfarbe den Aktionen vorbehalten. */
.aik-nav a.is-active,
.aik-nav a.is-active:hover {
	background: var(--aik-primary-soft);
	color: var(--aik-primary-dark);
	font-weight: 700;
}
.aik-nav a.is-active::before { background: var(--aik-primary); transform: scale(1.25); }
.aik-nav a.is-active b,
.aik-nav a.is-active u { font-weight: 700; text-decoration: none; }
.aik-nav a[target="_blank"]::after {
	content: "↗";
	margin-left: 6px;
	font-size: 12px;
	opacity: .55;
}

/* ------------------------------- Inhalt -------------------------------- */
.aik-main { min-width: 0; }
.aik-main > h1:first-child { margin-top: 0; }

.aik-card {
	background: var(--aik-surface);
	border: 1px solid var(--aik-border);
	border-radius: var(--aik-radius);
	box-shadow: var(--aik-shadow-sm);
	padding: 24px 26px;
	margin-bottom: 24px;
}
.aik-card__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: -4px 0 18px;
}
.aik-card__title {
	font-size: 16px;
	font-weight: 700;
	margin: 0;
}
.aik-card__hint { font-size: 13px; color: var(--aik-text-muted); }

/* Formularseiten: die Karte nur so breit wie ihr Inhalt */
.aik-card--kompakt { max-width: 720px; }
.aik-card--kompakt .aik-form { margin-top: 22px; }
.aik-card--kompakt > .aik-form:first-child { margin-top: 0; }

/* Erklaerung links, Formular rechts: fuellt die Breite unter dem Menue,
   ohne die Eingabefelder unnoetig in die Laenge zu ziehen. */
.aik-card--zweispaltig {
	display: grid;
	grid-template-columns: minmax(220px, 1fr) minmax(0, 560px);
	gap: 24px 56px;
	align-items: start;
}
.aik-card__erklaerung > :first-child { margin-top: 0; }
.aik-card__erklaerung > :last-child { margin-bottom: 0; }
/* Dieselbe Aufteilung fuer Formulare mit mehreren Themen: je Abschnitt
   die Erklaerung links, die Felder rechts. Der Speicherknopf steht unter
   der Feldspalte. */
.aik-form.aik-form--abschnitte { max-width: none; gap: 0; }
.aik-abschnitt,
.aik-form--abschnitte > .aik-actions {
	display: grid;
	grid-template-columns: minmax(220px, 1fr) minmax(0, 560px);
	gap: 16px 56px;
	align-items: start;
}
.aik-abschnitt { padding: 22px 0; border-top: 1px solid var(--aik-border); }
.aik-abschnitt:first-child { padding-top: 0; border-top: 0; }
.aik-abschnitt__erklaerung {
	margin: 0;
	line-height: 1.6;
	color: var(--aik-text-muted);
}
.aik-abschnitt__felder { display: grid; gap: 18px; }
.aik-abschnitt__felder select { width: 100%; }
.aik-form--abschnitte > .aik-actions { padding-top: 22px; border-top: 1px solid var(--aik-border); }
.aik-form--abschnitte > .aik-actions > * { grid-column: 2; justify-self: start; }
@media (max-width: 860px) {
	.aik-card--zweispaltig,
	.aik-abschnitt,
	.aik-form--abschnitte > .aik-actions { grid-template-columns: minmax(0, 1fr); }
	.aik-form--abschnitte > .aik-actions > * { grid-column: 1; }
}

/* Einzelne Rueckfrage wie die Abmeldung, im Zuschnitt der Loginkarte */
.aik-card--bestaetigung {
	max-width: 440px;
	margin-inline: auto;
	padding: 30px 32px 32px;
	text-align: center;
}
.aik-card--bestaetigung form { margin: 0; }
.aik-card--bestaetigung button { width: 100%; margin-top: 8px; }

/* ---------------------------- Status-Kacheln --------------------------- */
/* Die Kacheln teilen sich die Zeile und schliessen buendig mit den Karten
   darunter ab. Die begrenzte Seitenbreite haelt sie kompakt. */
.aik-statusgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
	gap: 12px;
	margin-bottom: 24px;
}
.aik-stat {
	background: var(--aik-surface);
	border: 1px solid var(--aik-border);
	border-radius: var(--aik-radius-sm);
	box-shadow: var(--aik-shadow-sm);
	padding: 14px 16px;
	min-width: 0;
}
.aik-stat__label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--aik-text-subtle);
	margin-bottom: 6px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.aik-stat__label a {
	color: inherit;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
.aik-stat__label a:hover { color: var(--aik-primary); }
/* Zeigt an, dass die Kachel zur Detailansicht weiterfuehrt */
.aik-stat__mehr {
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: .65;
}
.aik-stat__label a:hover .aik-stat__mehr { opacity: 1; transform: translateX(1px); }
.aik-stat__mehr { transition: opacity .15s ease, transform .15s ease; }
.aik-stat__value {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--aik-text);
	white-space: nowrap;
}
.aik-stat__value small,
.aik-stat__unit {
	font-size: 13px;
	font-weight: 600;
	color: var(--aik-text-muted);
}
.aik-dot {
	flex: none;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--aik-ok);
	box-shadow: 0 0 0 3px rgba(44,187,44,.16);
}
.aik-dot--error {
	background: var(--aik-error);
	box-shadow: 0 0 0 3px rgba(228,0,58,.16);
}
.aik-help { cursor: help; border-bottom: 1px dotted var(--aik-border-strong); }

/* --------------------------- Ressourcen-Balken ------------------------- */
.aik-resources { display: grid; gap: 18px; }
.aik-resource {
	display: grid;
	grid-template-columns: 190px minmax(0, 1fr);
	gap: 20px;
	align-items: center;
}
.aik-resource__label {
	font-size: 14px;
	line-height: 1.45;
	color: var(--aik-text);
}
.aik-resource__label strong { display: block; font-size: 15px; }
.aik-resource__label span { color: var(--aik-text-muted); font-size: 13px; }
.aik-resource__chart { min-width: 0; }
.aik-resource__chart canvas { display: block; width: 100%; height: 54px; }

/* ------------------------------ Diagramme ------------------------------ */
.aik-chart {
	position: relative;
	width: 100%;
	min-width: 0;
	/* Platz fuer die Bedienleiste, damit sie die Achsen nicht ueberdeckt */
	padding-top: 34px;
}
.aik-chart canvas {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: var(--aik-radius-sm);
	/* pan-y statt none: senkrechtes Scrollen der Seite muss ueber dem Diagramm
	   moeglich bleiben, sonst haengt man auf dem Handy in der Grafik fest. */
	touch-action: pan-y;
	cursor: crosshair;
}
.aik-chart__toolbar {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	gap: 6px;
	z-index: 3;
}
.aik-chart__btn {
	appearance: none;
	border: 1px solid var(--aik-border-strong);
	background: rgba(255,255,255,.92);
	color: var(--aik-text-muted);
	border-radius: var(--aik-radius-xs);
	font: 600 12px/1 var(--aik-font);
	letter-spacing: .04em;
	padding: 6px 10px;
	cursor: pointer;
	text-indent: 0;
	text-transform: none;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.aik-chart__btn:hover {
	background: var(--aik-primary);
	border-color: var(--aik-primary);
	color: #fff;
}
.aik-chart__tip {
	position: absolute;
	z-index: 5;
	pointer-events: none;
	background: rgba(255,255,255,.97);
	border: 1px solid var(--aik-border-strong);
	border-radius: var(--aik-radius-sm);
	box-shadow: var(--aik-shadow);
	padding: 10px 12px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--aik-text);
	white-space: nowrap;
	opacity: 0;
	transition: opacity .12s ease;
}
.aik-chart__tip.is-visible { opacity: 1; }
.aik-chart__tip-time {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--aik-text-subtle);
	margin-bottom: 6px;
}
.aik-chart__tip-row { display: flex; align-items: center; gap: 8px; }
.aik-chart__tip-row + .aik-chart__tip-row { margin-top: 3px; }
.aik-chart__tip-swatch { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.aik-chart__tip-value { margin-left: auto; font-weight: 700; padding-left: 14px; }

/* Legende / Serienauswahl */
.aik-legend {
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.aik-legend__item { margin: 0; }
.aik-legend__item input { position: absolute; opacity: 0; pointer-events: none; }
.aik-legend__item label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	border: 1px solid var(--aik-border);
	border-radius: 999px;
	background: var(--aik-surface-sunken);
	font-size: 13px;
	font-weight: 600;
	color: var(--aik-text-muted);
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.aik-legend__item label::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--aik-border-strong);
}
.aik-legend__item input:checked + label {
	background: var(--aik-surface);
	border-color: var(--aik-border-strong);
	color: var(--aik-text);
	box-shadow: var(--aik-shadow-sm);
}
.aik-legend__item input:checked + label::before { background: var(--aik-series-color, var(--aik-primary)); }
.aik-legend__item input:focus-visible + label { outline: 2px solid var(--aik-primary); outline-offset: 2px; }
.aik-legend__item label:hover { border-color: var(--aik-border-strong); color: var(--aik-text); }

.aik-chart-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: var(--aik-text-muted);
	font-size: 14px;
}

/* ------------------------------ Munin ---------------------------------- */
.aik-munin {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 16px;
	margin-bottom: 24px;
}
.aik-munin__grafik {
	margin: 0;
	padding: 14px 16px 16px;
	background: var(--aik-surface);
	border: 1px solid var(--aik-border);
	border-radius: var(--aik-radius-sm);
	box-shadow: var(--aik-shadow-sm);
	overflow: hidden;
}
.aik-munin__grafik figcaption {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--aik-text-subtle);
	margin-bottom: 10px;
}
/* Die Grafik kommt vom Kundenserver - Groesse geben wir vor */
.aik-munin__grafik img {
	display: block;
	width: 100%;
	height: auto;
	background: var(--aik-surface-sunken);
	border-radius: var(--aik-radius-xs);
}

.aik-munin__label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--aik-text);
	margin-bottom: 8px;
}
.aik-munin__wahl { display: flex; flex-wrap: wrap; gap: 8px; }
.aik-munin__wahl a.aik-munin__knopf {
	display: inline-block;
	padding: 7px 14px;
	border: 1px solid var(--aik-border);
	border-radius: 999px;
	background: var(--aik-surface-sunken);
	font-size: 14px;
	font-weight: 600;
	color: var(--aik-text-muted);
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.aik-munin__wahl a.aik-munin__knopf:hover {
	background: var(--aik-surface);
	border-color: var(--aik-border-strong);
	color: var(--aik-text);
	text-decoration: none;
}
.aik-munin__wahl a.aik-munin__knopf.is-active {
	background: var(--aik-primary-soft);
	border-color: var(--aik-primary);
	color: var(--aik-primary-dark);
}

/* ------------------------- Vollbild (Modal) ---------------------------- */
.aik-munin__flaeche {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	border-radius: var(--aik-radius-xs);
	background: none;
	background-image: none;
	cursor: zoom-in;
	overflow: hidden;
}
.aik-munin__flaeche:hover:not([disabled]) {
	background: none;
	background-image: none;
}
.aik-munin__flaeche:hover img { opacity: .85; }
.aik-munin__flaeche:focus-visible { outline: 2px solid var(--aik-primary); outline-offset: 2px; }
.aik-munin__flaeche img { transition: opacity .15s ease; }

.aik-modal {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(20, 20, 22, .72);
}
.aik-modal__box {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: min(1500px, 96vw);
	max-width: 100%;
	max-height: 94vh;
	padding: 18px 20px 16px;
	background: var(--aik-surface);
	border-radius: var(--aik-radius);
	box-shadow: 0 12px 48px rgba(0,0,0,.35);
}
.aik-modal__kopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.aik-modal__titel {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--aik-text);
}
.aik-modal__inhalt {
	min-height: 0;
	overflow: auto;
	text-align: center;
	background: var(--aik-surface-sunken);
	border-radius: var(--aik-radius-sm);
	padding: 12px;
}
/*
 Die konkrete Breite setzt aik-vollbild.js: dynamische Munin-Grafiken werden
 in der passenden Groesse nachgeladen, statische nur begrenzt hochskaliert -
 sonst werden sie unscharf.
*/
.aik-modal__inhalt img {
	display: block;
	margin: 0 auto;
	width: auto;
	max-width: 100%;
	max-height: calc(94vh - 170px);
	height: auto;
}
.aik-modal__fuss {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
}
.aik-modal__zaehler {
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	color: var(--aik-text-muted);
	min-width: 60px;
	text-align: center;
}
.aik-modal .aik-modal__knopf {
	appearance: none;
	width: 36px;
	height: 36px;
	padding: 0;
	flex: none;
	border: 1px solid var(--aik-border);
	border-radius: var(--aik-radius-xs);
	background: var(--aik-surface);
	background-image: none;
	color: var(--aik-text-muted);
	font: 400 22px/1 var(--aik-font);
	cursor: pointer;
}
.aik-modal .aik-modal__knopf:hover:not([disabled]) {
	background: var(--aik-surface-sunken);
	background-image: none;
	border-color: var(--aik-border-strong);
	color: var(--aik-text);
}
.aik-modal .aik-modal__knopf:focus-visible { outline: 2px solid var(--aik-primary); outline-offset: 2px; }

@media (max-width: 700px) {
	.aik-modal { padding: 12px; }
	.aik-modal__box { padding: 14px; }
}

/* --------------------------- Clusterserver ----------------------------- */
.aik-cluster {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 12px;
}
/*
 Die Auswahlkarten sind teils <button>, teils <span>. Die Regeln haengen am
 Wrapper, sonst gewinnt die allgemeine Buttonregel (gleiche Spezifitaet,
 steht aber spaeter im Stylesheet) und faerbt alles rot.
*/
.aik-cluster .aik-server {
	display: grid;
	justify-items: start;
	/* Die allgemeine Buttonregel zentriert - hier soll linksbuendig gelten */
	justify-content: start;
	align-content: start;
	gap: 3px;
	width: 100%;
	text-align: left;
	padding: 14px 16px;
	border: 1px solid var(--aik-border);
	border-radius: var(--aik-radius-sm);
	background: var(--aik-surface);
	background-image: none;
	color: var(--aik-text);
	font: 400 14px/1.4 var(--aik-font);
	letter-spacing: 0;
	text-transform: none;
	transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.aik-cluster button.aik-server { cursor: pointer; }
.aik-cluster button.aik-server:hover:not([disabled]) {
	background: var(--aik-surface);
	background-image: none;
	border-color: var(--aik-primary);
	color: var(--aik-text);
	box-shadow: var(--aik-shadow-sm);
}
.aik-cluster button.aik-server:focus-visible { outline: 2px solid var(--aik-primary); outline-offset: 2px; }

.aik-cluster .aik-server__name {
	font-size: 15px;
	font-weight: 700;
	color: var(--aik-text);
	overflow-wrap: anywhere;
}
.aik-cluster .aik-server__ip {
	font-size: 13px;
	color: var(--aik-text-muted);
	font-variant-numeric: tabular-nums;
}
.aik-cluster .aik-server__extra { font-size: 12px; color: var(--aik-text-subtle); }

/* Der gerade dargestellte Server */
.aik-cluster .aik-server.is-active {
	border-color: var(--aik-primary);
	background: var(--aik-primary-soft);
	cursor: default;
}
.aik-cluster .aik-server__status {
	margin-top: 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--aik-primary-dark);
}
.aik-cluster .aik-server__status::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 6px;
	border-radius: 50%;
	background: var(--aik-primary);
	vertical-align: middle;
}

/* --------------------------------- Reiter ------------------------------ */
.aik-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 0 20px;
	border-bottom: 1px solid var(--aik-border);
}
/* Reiter sind mal Schalter (Diagramm/Tabelle), mal Links (Serverwahl) */
.aik-tabs a.aik-tabs__tab { text-decoration: none; }
.aik-tabs a.aik-tabs__tab:hover { text-decoration: none; }
.aik-tabs__tab,
.aik-tabs a.aik-tabs__tab {
	appearance: none;
	background: none;
	background-image: none;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	margin-bottom: -1px;
	padding: 10px 16px;
	font: 600 15px/1.3 var(--aik-font);
	color: var(--aik-text-muted);
	cursor: pointer;
	transition: color .15s ease, border-color .15s ease;
}
.aik-tabs__tab:hover:not([disabled]),
.aik-tabs a.aik-tabs__tab:hover {
	background: none;
	background-image: none;
	color: var(--aik-text);
}
.aik-tabs__tab.is-active,
.aik-tabs a.aik-tabs__tab.is-active,
.aik-tabs__tab.is-active:hover:not([disabled]) {
	color: var(--aik-primary);
	border-bottom-color: var(--aik-primary);
	background: none;
	background-image: none;
}
.aik-tabs__tab:focus-visible { outline: 2px solid var(--aik-primary); outline-offset: -2px; }

/* ----------------------------- Kurvenauswahl ---------------------------- */
.aik-auswahl__kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 16px;
	margin-bottom: 14px;
}
.aik-auswahl__zaehler { font-size: 14px; color: var(--aik-text-muted); }

.aik-auswahl__name { font-weight: 600; white-space: nowrap; }
.aik-auswahl__spalte { text-align: center; width: 1%; white-space: nowrap; }
.aik-auswahl thead th.aik-auswahl__spalte { text-align: center; }

/* Schalter mit Farbpunkt der zugehoerigen Kurve */
.aik-kurve {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 26px;
	border-radius: var(--aik-radius-xs);
	cursor: pointer;
}
.aik-kurve input { position: absolute; opacity: 0; pointer-events: none; }
.aik-kurve__punkt {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 2px solid var(--aik-border-strong);
	background: var(--aik-surface);
	transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.aik-kurve:hover .aik-kurve__punkt { border-color: var(--aik-text-subtle); }
.aik-kurve input:checked + .aik-kurve__punkt {
	background: var(--aik-series-color, var(--aik-primary));
	border-color: var(--aik-series-color, var(--aik-primary));
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--aik-series-color, #e4003a) 22%, transparent);
}
.aik-kurve input:focus-visible + .aik-kurve__punkt {
	outline: 2px solid var(--aik-primary);
	outline-offset: 2px;
}

/* ------------------------------- Tabellen ------------------------------ */
table { border-collapse: collapse; border-spacing: 0; max-width: 100%; }
td, th {
	font-family: var(--aik-font);
	font-size: 15px;
	font-weight: 400;
	font-style: normal;
	line-height: 1.55;
	color: var(--aik-text);
	text-transform: none;
	text-decoration: none;
	vertical-align: top;
}
th { font-weight: 700; text-align: left; }

/* Datentabellen im modernen Look */
.aik-table { width: 100%; }
.aik-table th {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--aik-text-subtle);
	padding: 10px 14px;
	background: var(--aik-surface-sunken);
	border-bottom: 1px solid var(--aik-border);
	white-space: nowrap;
}
.aik-table th:first-child { border-top-left-radius: var(--aik-radius-sm); }
.aik-table th:last-child  { border-top-right-radius: var(--aik-radius-sm); }
.aik-table td {
	padding: 11px 14px;
	border-bottom: 1px solid var(--aik-border);
	vertical-align: middle;
}
.aik-table tr:last-child td { border-bottom: 0; }
.aik-table tbody tr:hover td { background: var(--aik-surface-alt); }

/* Legacy-Tabellen (bgcolor / border / cellpadding im Markup) abfangen */
.aik-main table[border="1"],
.aik-main table[border="1"] td,
.aik-main table[border="1"] th { border: 0; }
.aik-main table[border="1"] { width: 100%; }
.aik-main table[border="1"] td,
.aik-main table[border="1"] th { padding: 10px 14px; border-bottom: 1px solid var(--aik-border); }
.aik-main td[bgcolor="#dadadc"],
.aik-main table[bgcolor="#dadadc"] > tbody > tr > td:first-child {
	background: var(--aik-surface-sunken) !important;
	font-weight: 700;
	color: var(--aik-text-subtle);
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.aik-main table[bgcolor="#dadadc"] {
	background: var(--aik-surface-sunken) !important;
	border-radius: var(--aik-radius-sm);
	width: 100%;
}
.erstezeile { border: 0; }

.aik-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Pfeiltasten neben einer waagerecht scrollbaren Tabelle. Der Rahmen liegt
   nur dann an, wenn das Skript ihn eingezogen hat; ohne Javascript bleibt es
   beim gewohnten Scrollbalken. */
.aik-querlauf { position: relative; }
.aik-querlauf__taste {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 26px;
	padding: 0;
	margin: 0;
	border: 1px solid var(--aik-border);
	border-radius: var(--aik-radius-xs);
	background: var(--aik-surface);
	color: var(--aik-text-subtle);
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	opacity: .9;
	z-index: 2;
}
.aik-querlauf__taste[hidden] { display: none; }
.aik-querlauf__taste--zurueck { left: 0; }
.aik-querlauf__taste--vor { right: 0; }
.aik-querlauf__taste:hover:not([disabled]) {
	background: var(--aik-surface-sunken);
	color: var(--aik-text);
	opacity: 1;
}
.aik-querlauf__taste[disabled] { opacity: .3; cursor: default; }
/* Platz fuer die Tasten, damit sie keine Zellen verdecken */
.aik-querlauf.ist-scrollbar > .aik-scroll { padding: 0 30px; }

/* Auswahlspalte der Sammelaktion */
.aik-table__check {
	width: 1%;
	white-space: nowrap;
	padding-right: 0 !important;
}
.aik-table__check input[type=checkbox] {
	width: 17px;
	height: 17px;
	margin: 0;
	vertical-align: middle;
	cursor: pointer;
}

/* Aktionsspalte: Buttons nebeneinander, rechtsbuendig */
.aik-table__actions {
	text-align: right;
	white-space: nowrap;
}
.aik-table__actions form { display: inline-block; margin: 0 0 0 8px; }
.aik-table__actions form:first-child { margin-left: 0; }

.aik-card__note {
	margin: 16px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--aik-text-muted);
}
.aik-legende {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 20px;
}
.aik-legende p { margin: 0; }

/* ------------------------- Formulare / Buttons ------------------------- */
input[type=text], input[type=password], input[type=email], input[type=number],
input:not([type]), select, textarea,
.form, .form2, .form3 {
	font-family: var(--aik-font);
	font-size: 15px;
	line-height: 1.4;
	color: var(--aik-text);
	background: var(--aik-surface);
	border: 1px solid var(--aik-border-strong);
	border-style: solid;
	border-radius: var(--aik-radius-sm);
	padding: 10px 12px;
	max-width: 100%;
	transition: border-color .15s ease, box-shadow .15s ease;
}
input[type=text]:focus, input[type=password]:focus, input:not([type]):focus,
select:focus, textarea:focus, .form:focus, .form3:focus {
	outline: 0;
	border-color: var(--aik-primary);
	box-shadow: 0 0 0 3px rgba(228,0,58,.12);
}
input::placeholder, textarea::placeholder { color: #c0c0c0; }

/* Autofill des Browsers auf die eigenen Farben zwingen */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 1000px var(--aik-surface) inset;
	box-shadow: 0 0 0 1000px var(--aik-surface) inset;
	-webkit-text-fill-color: var(--aik-text);
	caret-color: var(--aik-text);
}
input:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 1000px var(--aik-surface) inset, 0 0 0 3px rgba(228,0,58,.12);
	box-shadow: 0 0 0 1000px var(--aik-surface) inset, 0 0 0 3px rgba(228,0,58,.12);
}

label { cursor: pointer; }
input[type=radio], input[type=checkbox] { accent-color: var(--aik-primary); margin-right: 6px; }

.aik-form { display: grid; gap: 18px; max-width: 560px; }
/* Erklaerender Vorspann ueber einem Feld – gehoert optisch zum Feld darunter */
.aik-form__intro {
	margin: 0;
	max-width: 62ch;
	line-height: 1.6;
	color: var(--aik-text-muted);
}
.aik-form__intro--weit { margin-top: 14px; }
.aik-form__intro + .aik-field { margin-top: -8px; }
.aik-field { display: grid; gap: 6px; }
.aik-field > label { font-size: 14px; font-weight: 600; color: var(--aik-text); }
.aik-field small { color: var(--aik-text-muted); }
.aik-field input { width: 100%; }
.aik-actions { display: flex; gap: 12px; align-items: center; }

/* Buttons – Legacy-Grafikbutton wird komplett ersetzt */
button,
button[type=submit],
input[type=submit] {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--aik-font);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	text-indent: 0;
	color: var(--aik-text-invert);
	background: var(--aik-primary);
	background-image: none;
	border: 1px solid var(--aik-primary);
	border-radius: var(--aik-radius-sm);
	padding: 11px 22px;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
button:hover:not([disabled]),
input[type=submit]:hover:not([disabled]) {
	background: var(--aik-primary-dark);
	background-image: none;
	border-color: var(--aik-primary-dark);
}
button:focus-visible { outline: 2px solid var(--aik-primary); outline-offset: 2px; }
button[disabled] { cursor: default; opacity: .45; }

button.aik-btn--ghost,
button.link-button {
	background: transparent;
	background-image: none;
	color: var(--aik-primary);
	border-color: transparent;
	padding: 0;
	font-weight: 600;
	text-align: left;
}
button.aik-btn--ghost:hover:not([disabled]),
button.link-button:hover:not([disabled]) {
	background: transparent;
	background-image: none;
	border-color: transparent;
	color: var(--aik-primary-dark);
	text-decoration: underline;
}
button.aik-btn--sm {
	font-size: 14px;
	padding: 8px 16px;
}
button.aik-btn--secondary {
	background: var(--aik-surface);
	background-image: none;
	color: var(--aik-text);
	border-color: var(--aik-border-strong);
}
button.aik-btn--secondary:hover:not([disabled]) {
	background: var(--aik-surface-sunken);
	background-image: none;
	border-color: var(--aik-text-subtle);
	color: var(--aik-text);
}

/* --------------------------- Auswahlkarten ----------------------------- */
/* Radiogruppen als anklickbare Karten statt nackter Radiobuttons. */
.aik-choices {
	display: grid;
	gap: 10px;
	border: 0;
	margin: 0 0 22px;
	padding: 0;
}
.aik-choices legend {
	padding: 0;
	margin-bottom: 14px;
	font-size: 16px;
	font-weight: 700;
	color: var(--aik-text);
}
.aik-choice { position: relative; }
.aik-choice > input {
	position: absolute;
	top: 20px;
	left: 20px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}
.aik-choice > label {
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr);
	gap: 4px 14px;
	align-items: start;
	padding: 16px 20px;
	border: 1px solid var(--aik-border);
	border-radius: var(--aik-radius-sm);
	background: var(--aik-surface);
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
/* Der Auswahlpunkt wird selbst gezeichnet, damit er zur Karte passt. */
.aik-choice > label::before {
	content: "";
	grid-row: 1 / span 2;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	border: 2px solid var(--aik-border-strong);
	border-radius: 50%;
	background: var(--aik-surface);
	box-shadow: inset 0 0 0 20px var(--aik-surface);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.aik-choice > label:hover {
	border-color: var(--aik-border-strong);
	background: var(--aik-surface-alt);
}
.aik-choice > input:checked + label {
	border-color: var(--aik-primary);
	background: var(--aik-primary-soft);
}
.aik-choice > input:checked + label::before {
	border-color: var(--aik-primary);
	box-shadow: inset 0 0 0 4px var(--aik-surface), inset 0 0 0 20px var(--aik-primary);
}
.aik-choice > input:focus-visible + label {
	outline: 2px solid var(--aik-primary);
	outline-offset: 2px;
}
.aik-choice > input:disabled + label {
	cursor: default;
	background: var(--aik-surface-sunken);
	border-color: var(--aik-border);
	box-shadow: none;
	opacity: .6;
}
.aik-choice > input:disabled + label:hover { background: var(--aik-surface-sunken); }

.aik-choice__title {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--aik-text);
}
.aik-choice__desc {
	grid-column: 2;
	font-size: 13px;
	line-height: 1.5;
	color: var(--aik-text-muted);
}

/* Zusatzeinstellung zur gewaehlten Option: eigenstaendiger Kasten in der
   Breite der Auswahlkarten darueber. */
.aik-choice-detail {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 12px;
	/* Buendig zu den Auswahlkarten darueber */
	margin: -12px 0 22px;
	padding: 14px 18px;
	border: 1px solid var(--aik-border);
	border-radius: var(--aik-radius-sm);
	background: var(--aik-surface-alt);
	font-size: 14px;
	color: var(--aik-text-muted);
}
.aik-choice-detail select { padding: 8px 10px; font-size: 14px; }

/* -------------------------- Faelligkeitskalender ----------------------- */
.aik-due {
	display: flex;
	flex-wrap: wrap;
	gap: 28px 40px;
	align-items: flex-start;
}
.aik-cal {
	/* Waechst mit: neben der Seitenspalte teilt er sich den Platz, bricht sie
	   darunter um, fuellt er die Karte. Die Tageszellen skalieren per Grid mit. */
	flex: 1 1 280px;
	min-width: 0;
	max-width: 460px;
	border: 1px solid var(--aik-border);
	border-radius: var(--aik-radius-sm);
	background: var(--aik-surface);
	padding: 14px;
}
.aik-cal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 10px;
}
.aik-cal__title {
	font-size: 15px;
	font-weight: 700;
	color: var(--aik-text);
}
.aik-cal__nav {
	appearance: none;
	width: 30px;
	height: 30px;
	padding: 0;
	flex: none;
	border: 1px solid var(--aik-border);
	border-radius: var(--aik-radius-xs);
	background: var(--aik-surface);
	background-image: none;
	color: var(--aik-text-muted);
	font: 700 17px/1 var(--aik-font);
	cursor: pointer;
}
.aik-cal__nav:hover:not([disabled]) {
	background: var(--aik-surface-sunken);
	background-image: none;
	border-color: var(--aik-border-strong);
	color: var(--aik-text);
}
.aik-cal__nav[disabled] { opacity: .3; cursor: default; }

.aik-cal__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
}
.aik-cal__weekday {
	text-align: center;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--aik-text-subtle);
	padding-bottom: 6px;
}
.aik-cal__day {
	appearance: none;
	/* Quadratisch, aber gedeckelt: sonst wird der Kalender auf breiten Karten
	   unnoetig hoch. */
	aspect-ratio: 1 / 1;
	min-height: 30px;
	max-height: 48px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: var(--aik-radius-xs);
	background: var(--aik-surface-sunken);
	background-image: none;
	color: var(--aik-text);
	font: 600 clamp(14px, 1.2vw + 8px, 16px)/1 var(--aik-font);
	cursor: pointer;
	transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.aik-cal__day:hover:not([disabled]) {
	background: var(--aik-primary-soft);
	background-image: none;
	border-color: var(--aik-primary);
	color: var(--aik-primary-dark);
}
/* Tage ausserhalb des verbleibenden Zeitfensters */
.aik-cal__day.is-blocked,
.aik-cal__day.is-empty {
	background: transparent;
	background-image: none;
	color: var(--aik-border-strong);
	cursor: default;
	font-weight: 400;
}
.aik-cal__day.is-empty { pointer-events: none; }
.aik-cal__day.is-today { box-shadow: inset 0 0 0 1px var(--aik-border-strong); }
/* Letztmoeglicher Termin – danach spielen wir das Update selbst ein */
.aik-cal__day.is-deadline:not(.is-selected) {
	border-color: var(--aik-primary);
	border-style: dashed;
	color: var(--aik-primary);
}
.aik-cal__day.is-selected,
.aik-cal__day.is-selected:hover {
	background: var(--aik-primary);
	background-image: none;
	border-color: var(--aik-primary);
	color: var(--aik-text-invert);
	font-weight: 700;
}

.aik-due__side {
	display: grid;
	gap: 8px;
	align-content: start;
	flex: 1 1 240px;
	min-width: 0;
}
/* Gewaehlter Termin im Klartext */
.aik-due__value {
	font-size: 19px;
	font-weight: 700;
	color: var(--aik-text);
}
.aik-due__label {
	font-size: 14px;
	font-weight: 600;
	color: var(--aik-text);
}
.aik-due__time {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 15px;
	color: var(--aik-text-muted);
}
.aik-due__time select { padding: 9px 10px; }
.aik-due__note {
	margin: 6px 0 0;
	padding: 12px 14px;
	border-radius: var(--aik-radius-sm);
	background: var(--aik-primary-soft);
	border: 1px solid rgba(228,0,58,.25);
	font-size: 13px;
	line-height: 1.5;
	color: var(--aik-primary-dark);
}
/* Schalter fuer den spaetestmoeglichen Termin – das gestrichelte Feld
   entspricht der Markierung im Kalender. */
button.aik-due__legend {
	display: inline-flex;
	align-items: center;
	justify-self: start;
	gap: 8px;
	padding: 6px 12px 6px 8px;
	background: none;
	background-image: none;
	border: 1px solid var(--aik-border);
	border-radius: var(--aik-radius-xs);
	font-size: 13px;
	font-weight: 600;
	color: var(--aik-text-muted);
}
button.aik-due__legend::before {
	content: "";
	width: 16px;
	height: 16px;
	flex: none;
	border: 1px dashed var(--aik-primary);
	border-radius: var(--aik-radius-xs);
}
button.aik-due__legend:hover:not([disabled]) {
	background: var(--aik-primary-soft);
	background-image: none;
	border-color: var(--aik-primary);
	color: var(--aik-primary-dark);
}

/* --------------------------- Meldungen / Tags -------------------------- */
p.error, p.warning, p.success, .aik-msg {
	width: auto;
	max-width: 640px;
	font-weight: 600;
	border-radius: var(--aik-radius-sm);
	padding: 12px 16px 12px 44px;
	position: relative;
	margin: 0 0 14px;
	border: 1px solid transparent;
	background-image: none;
}
p.error::before, p.warning::before, p.success::before {
	position: absolute;
	left: 16px;
	top: 12px;
	font-weight: 700;
}
p.error {
	color: var(--aik-primary-dark);
	background-color: var(--aik-primary-soft);
	border-color: rgba(228,0,58,.35);
}
p.error::before { content: "!"; }
p.warning {
	color: #7a4a00;
	background-color: #fff6e2;
	border-color: rgba(245,166,35,.4);
}
p.warning::before { content: "!"; }
p.success {
	color: #17761a;
	background-color: #eaf8ea;
	border-color: rgba(44,187,44,.4);
}
p.success::before { content: "✓"; }

p.paket_normal, p.paket_reboot {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	background: var(--aik-surface-sunken);
	background-image: none;
	border: 1px solid var(--aik-border);
	border-radius: 999px;
	color: var(--aik-text-muted);
	padding: 4px 12px 4px 10px;
	margin: 0 6px 6px 0;
	width: auto;
}
p.paket_normal::before, p.paket_reboot::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex: none;
	background: var(--aik-ok);
}
p.paket_reboot::before { background: var(--aik-warn); }

/* Zeile eines Jobs, in dem mindestens ein Paket einen Reboot ausloest.
   Bewusst dezent - der Chip traegt die Aussage, die Zeile nimmt sie nur auf. */
.aik-table tbody tr.aik-table__row--reboot > td {
	background: color-mix(in srgb, var(--aik-warn) 7%, transparent);
}
.aik-table tbody tr.aik-table__row--reboot > td:first-child {
	box-shadow: inset 3px 0 0 var(--aik-warn);
}

.aik-list { list-style: none; margin: 0; padding: 0; }
.aik-list li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	padding: 11px 0;
	border-bottom: 1px solid var(--aik-border);
}
.aik-list li:last-child { border-bottom: 0; }
.aik-list li span { color: var(--aik-text-muted); font-size: 13px; }

/* -------------------------------- Login -------------------------------- */
.aik-login {
	max-width: 440px;
	margin: 8px auto 40px;
	background: var(--aik-surface);
	border: 1px solid var(--aik-border);
	border-radius: var(--aik-radius);
	box-shadow: var(--aik-shadow);
	padding: 34px 36px 36px;
}
.aik-login__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 22px;
	margin-bottom: 26px;
	border-bottom: 1px solid var(--aik-border);
}
.aik-login h1 {
	font-size: 21px;
	letter-spacing: -.01em;
	margin: 0;
}
.aik-login__intro {
	margin: 2px 0 0;
	font-size: 14px;
	color: var(--aik-text-subtle);
	letter-spacing: .1em;
	text-transform: uppercase;
}
.aik-login__head .aik-lang-select { margin-top: 2px; }
.aik-login .aik-form { gap: 20px; max-width: none; }
.aik-login .aik-actions { margin-top: 6px; }
.aik-login button { width: 100%; padding: 13px 22px; }
/* Hilfslinks unter dem Formular: sichtbar, aber ohne dem Login die Schau zu stehlen */
.aik-login__hilfe {
	margin: 0;
	text-align: center;
	font-size: 14px;
}
.aik-login__hilfe a,
.aik-login .aik-form__intro a {
	color: var(--aik-text-subtle);
	text-decoration: underline;
}
.aik-login__hilfe a:hover,
.aik-login .aik-form__intro a:hover { color: var(--aik-primary); }

/* ------------------------- Statusansichten ----------------------------- */
/* Technischer Zuschnitt: engere Zeilen, Tabellenziffern, damit mehr Werte
   gleichzeitig lesbar sind und Zahlen spaltenweise untereinander stehen. */
.aik-table--technisch {
	font-size: 12.5px;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}
.aik-table--technisch th,
.aik-table--technisch td {
	padding: 5px 10px;
	white-space: nowrap;
}
.aik-table--technisch th {
	font-size: 11px;
	letter-spacing: .04em;
}
.aik-table--technisch tr:nth-child(even) td { background: var(--aik-surface-alt); }
.aik-table--technisch tr:hover td { background: var(--aik-surface-sunken); }

.aik-status .aik-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
/* Tabellen, Scrolltasten und sticky Gruppenkoepfe bleiben unter dem Menue.
   Im Vollbild ueberschreibt dessen position/z-index diese Stapelreihenfolge. */
.aik-status {
	position: relative;
	z-index: 0;
}
.aik-status__vollbild { flex: none; width: auto; }

/* Prozesslisten bleiben in der normalen Seitenbreite. Sie ruecken dafuer
   enger zusammen, damit die vielen Spalten auch ohne Vollbild hineinpassen. */
.aik-status--breit .aik-table--technisch {
	font-size: 11.5px;
	table-layout: auto;
}
.aik-status--breit .aik-table--technisch th,
.aik-status--breit .aik-table--technisch td {
	padding: 4px 7px;
	white-space: nowrap;
}

/* Ersatzvollbild fuer Browser ohne Fullscreen-API */
.aik-status.ist-vollbild {
	position: fixed;
	inset: 0;
	z-index: 900;
	margin: 0;
	border-radius: 0;
	overflow: auto;
	max-width: none;
}
body.hat-vollbild { overflow: hidden; }

/* Echtes Vollbild: die Karte fuellt den Bildschirm und behaelt ihr Weiss */
.aik-status:fullscreen {
	overflow: auto;
	padding: 24px 28px;
	background: var(--aik-surface);
}
.aik-status:-webkit-full-screen {
	overflow: auto;
	padding: 24px 28px;
	background: var(--aik-surface);
}

/* Werkzeugleiste ueber der grossen Prozessliste */
.aik-tabwerk {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px;
	/* Luft zur Uebersichtstabelle darueber */
	margin: 16px 0 10px;
}
/* Alle Bedienelemente auf dieselbe Hoehe: Knoepfe, Eingabe und Auswahl
   bringen von Haus aus unterschiedliche Innenabstaende mit. */
.aik-tabwerk > * {
	height: 32px;
	box-sizing: border-box;
	font-size: 12.5px;
	margin: 0;
}
.aik-tabwerk button {
	width: auto;
	padding: 0 9px;
	line-height: 30px;
	white-space: nowrap;
}
.aik-tabwerk input,
.aik-tabwerk select {
	padding: 0 8px;
	line-height: 30px;
}
/* Die Suche gibt als erstes nach, damit die Leiste in einer Zeile bleibt */
.aik-tabwerk__suche {
	flex: 1 1 96px;
	min-width: 90px;
	max-width: 220px;
}
.aik-tabwerk__gruppe {
	flex: 0 1 auto;
	min-width: 0;
	max-width: 168px;
}
.aik-tabwerk__schnell.ist-aktiv {
	background: var(--aik-primary-soft);
	border-color: var(--aik-primary);
	color: var(--aik-primary-dark);
}
.aik-tabwerk__zaehler {
	margin-left: auto;
	flex: 0 0 auto;
	line-height: 32px;
	font-size: 11.5px;
	color: var(--aik-text-muted);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Sortierbare Spaltenkoepfe */
.aik-table--technisch th.ist-sortierbar {
	cursor: pointer;
	user-select: none;
	position: relative;
	padding-right: 18px;
}
.aik-table--technisch th.ist-sortierbar:hover { color: var(--aik-text); }
.aik-table--technisch th.ist-sortiert-auf::after,
.aik-table--technisch th.ist-sortiert-ab::after {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 9px;
	color: var(--aik-primary);
}
.aik-table--technisch th.ist-sortiert-auf::after { content: "\25B2"; }
.aik-table--technisch th.ist-sortiert-ab::after  { content: "\25BC"; }

/* Spaltenfilter direkt unter den Spaltenkoepfen */
.aik-tabwerk__filterzeile td {
	padding: 4px 6px !important;
	background: var(--aik-surface-alt);
}
.aik-tabwerk__filterzeile input,
.aik-tabwerk__filterzeile select {
	width: 100%;
	min-width: 54px;
	padding: 3px 4px;
	font-size: 11px;
	line-height: 1.35;
}
/* Kurze Kennungen und Laufzeiten brauchen nicht die volle Filterbreite.
   Die Prozentwerte beziehen sich auf die bisherige Breite der Spalte. */
.aik-tabwerk--apache .aik-tabwerk__filter--srv input,
.aik-tabwerk--apache .aik-tabwerk__filter--srv select {
	width: 34%;
	min-width: 28px;
}
.aik-tabwerk--apache .aik-tabwerk__filter--pid input,
.aik-tabwerk--apache .aik-tabwerk__filter--pid select,
.aik-tabwerk--apache .aik-tabwerk__filter--dur input,
.aik-tabwerk--apache .aik-tabwerk__filter--dur select,
.aik-tabwerk--apache .aik-tabwerk__filter--duration input,
.aik-tabwerk--apache .aik-tabwerk__filter--duration select {
	width: 67%;
	min-width: 36px;
}
.aik-tabwerk--apache .aik-tabwerk__filter--child input,
.aik-tabwerk--apache .aik-tabwerk__filter--child select {
	width: 67%;
	min-width: 36px;
}
.aik-tabwerk--apache .aik-tabwerk__filter--client input,
.aik-tabwerk--apache .aik-tabwerk__filter--client select {
	width: 75%;
	min-width: 42px;
}
.aik-tabwerk--mysql .aik-tabwerk__filter--pid input,
.aik-tabwerk--mysql .aik-tabwerk__filter--pid select,
.aik-tabwerk--mysql .aik-tabwerk__filter--id input,
.aik-tabwerk--mysql .aik-tabwerk__filter--id select {
	width: 34%;
	min-width: 28px;
}
.aik-tabwerk__leer td {
	text-align: center;
	color: var(--aik-text-muted);
	padding: 18px !important;
}

/* Gruppenansicht */
.aik-tabwerk__gruppenkopf th {
	background: var(--aik-surface-sunken);
	position: sticky;
	top: 0;
}
.aik-tabwerk__gruppenzeile td:first-child { font-weight: 600; }
.aik-tabwerk__gruppenzeile td:nth-child(2) { font-weight: 700; }

/* Statuszellen mit mehreren Angaben, z.B. der SSL/TLS Session Cache Status.
   Die Umbrueche der Quelle bleiben erhalten, statt alles aneinanderzureihen. */
.aik-table td.aik-status__mehrzeilig,
.aik-table th.aik-status__mehrzeilig {
	white-space: normal;
	line-height: 1.6;
	min-width: 260px;
}

/*
 Lange Werte werden umgebrochen, nicht abgeschnitten: ein Request oder eine
 Abfrage muss vollstaendig lesbar bleiben. Die Zeilenumbrueche der Quelle sind
 vorher zu Leerzeichen geworden, sonst waechse die Zeile wie frueher auf
 mehrere hundert Pixel Hoehe.
*/
.aik-table--technisch td.aik-zelle--lang {
	max-width: 560px;
	white-space: normal;
	overflow-wrap: anywhere;
}
.aik-status:fullscreen .aik-table--technisch td.aik-zelle--lang,
.aik-status:-webkit-full-screen .aik-table--technisch td.aik-zelle--lang,
.aik-status.ist-vollbild .aik-table--technisch td.aik-zelle--lang {
	max-width: 760px;
}

/* Die Zusammenfassung ueber der Prozessliste, z.B. Uptime und Threads. Sie
   darf umbrechen, statt hinter dem rechten Rand zu verschwinden. */
.aik-table--technisch tr.aik-status__kopfzeile td {
	white-space: normal;
	line-height: 1.6;
	color: var(--aik-text-muted);
	background: var(--aik-surface-sunken);
}

/* ---------------------- Passwortvorschlag und Staerke -------------------- */
.aik-pwhilfe {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: -6px 0 2px;
}
.aik-pwhilfe__leiste {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.aik-pwhilfe__leiste button {
	/* Die Loginkarte zieht Buttons auf volle Breite - hier nicht erwuenscht */
	width: auto;
}
.aik-pwhilfe__balken {
	height: 6px;
	border-radius: 999px;
	background: var(--aik-surface-sunken);
	overflow: hidden;
}
.aik-pwhilfe__balken span {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: var(--aik-text-subtle);
	transition: width .18s ease, background-color .18s ease;
}
.aik-pwhilfe__wert {
	margin: 6px 0 0;
	font-size: 13px;
	color: var(--aik-text-muted);
}
/* Die Farbe folgt der Stufe, nicht der Balkenlaenge */
.aik-pwhilfe[data-stufe="0"] .aik-pwhilfe__balken span,
.aik-pwhilfe[data-stufe="1"] .aik-pwhilfe__balken span { background: var(--aik-error); }
.aik-pwhilfe[data-stufe="2"] .aik-pwhilfe__balken span { background: var(--aik-warn); }
.aik-pwhilfe[data-stufe="3"] .aik-pwhilfe__balken span,
.aik-pwhilfe[data-stufe="4"] .aik-pwhilfe__balken span { background: var(--aik-ok); }

.aik-pwhilfe__regeln {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	font-size: 13px;
}
.aik-pwhilfe__regeln li {
	display: flex;
	align-items: center;
	gap: 7px;
	color: var(--aik-text-muted);
}
.aik-pwhilfe__regeln li::before {
	content: "";
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 1px solid var(--aik-border-strong);
	flex: none;
}
.aik-pwhilfe__regeln li.ist-erfuellt { color: var(--aik-text); }
.aik-pwhilfe__regeln li.ist-erfuellt::before {
	content: "\2713";
	font-size: 10px;
	line-height: 12px;
	text-align: center;
	color: var(--aik-text-invert);
	background: var(--aik-ok);
	border-color: var(--aik-ok);
}
.aik-pwhilfe__notiz {
	margin: 0;
	font-size: 13px;
	color: var(--aik-text-muted);
}

/* -------------------------------- Footer ------------------------------- */
.aik-footer {
	background: var(--aik-surface);
	border-top: 1px solid var(--aik-border);
	color: var(--aik-text-subtle);
	font-size: 14px;
	margin-top: auto;
}
.aik-footer__inner {
	max-width: var(--aik-maxwidth);
	margin: 0 auto;
	padding: 34px 24px 40px;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 20px 40px;
}
.aik-footer__brand {
	background: url("/images/all-inkl-logo-mono.svg") no-repeat left top;
	background-size: 220px 34px;
	height: 34px;
	width: 220px;
	flex: none;
	font: 0/0 a;
	color: transparent;
}
.aik-footer__content {
	flex: 1 1 420px;
	min-width: 0;
}

/* Zeilen mit "|" getrennt – wie .footer-list auf all-inkl.com */
.aik-footer__list {
	list-style: none;
	margin: 0 0 6px;
	padding: 0;
	line-height: 2;
}
.aik-footer__list:last-child { margin-bottom: 0; }
.aik-footer__list li { display: inline-block; }
.aik-footer__list li:not(:last-child)::after {
	content: "|";
	margin: 0 8px;
	color: var(--aik-divider);
}
.aik-footer__list a {
	font-size: 14px;
	font-weight: 400;
	color: var(--aik-text-subtle);
}
.aik-footer__list a:hover {
	color: var(--aik-primary);
	text-decoration: underline;
}

/* Social-Profile – gleiche SVG-Symbole wie im Fuss von all-inkl.com */
.aik-footer__social {
	display: inline-flex;
	gap: 20px;
	margin-top: 14px;
}
.aik-social {
	display: inline-block;
	width: 20px;
	height: 20px;
	background: no-repeat center;
	background-size: contain;
	/* Die Symbole liegen dunkel vor, im Fuss sollen sie gedaempft wirken */
	opacity: .55;
	transition: opacity .15s ease;
}
.aik-social:hover, .aik-social:focus-visible { opacity: 1; }
.aik-social--linkedin  { background-image: url("/images/icon-linkedin.svg"); }
.aik-social--instagram { background-image: url("/images/icon-instagram.svg"); }
.aik-social--tiktok    { background-image: url("/images/icon-tiktok.svg"); width: 17.4px; }
.aik-social--youtube   { background-image: url("/images/icon-youtube.svg"); }

/* Ab Desktopbreite steht der Block rechts neben dem Logo – wie im Vorbild */
@media (min-width: 1200px) {
	.aik-footer__content { text-align: right; }
}
@media print { .aik-footer__social { display: none; } }

body { display: flex; flex-direction: column; min-height: 100vh; }
.aik-shell { width: 100%; flex: 1 0 auto; }

/* ------------------------------ Responsive ----------------------------- */
@media (max-width: 980px) {
	/* Der Kopfbereich bricht hier um und waechst, eine klebende Menueleiste
	   auf fester Hoehe wuerde dann ueber dem Inhalt haengen. */
	.aik-nav { position: static; }
	.aik-nav__label, .aik-nav__sep { display: none; }
	.aik-resource { grid-template-columns: 1fr; gap: 8px; }
}
@media (max-width: 1080px) {
	.aik-header__link { font-size: 14px; }
	.aik-header__support { gap: 6px 16px; }
}
@media (max-width: 860px) {
	.aik-header__inner { flex-wrap: wrap; }
	.aik-header__support { margin-left: 0; width: 100%; justify-content: flex-start; }
}
@media (max-width: 700px) {
	.aik-header__inner { flex-wrap: wrap; min-height: 0; gap: 10px 16px; padding-bottom: 12px; }
	.aik-header__title { padding-left: 0; border-left: 0; font-size: 13px; }
	.aik-header__meta { margin-left: 0; width: 100%; }
	.aik-shell { padding: 20px 16px 40px; }
	.aik-card { padding: 20px 18px; border-radius: var(--aik-radius-sm); }
	h1 { font-size: 23px; }
	.aik-footer__inner { padding: 26px 16px 32px; }
}

@media print {
	.aik-nav, .aik-chart__toolbar, .aik-header__support { display: none; }
	body { background: #fff; }
	.aik-card { box-shadow: none; break-inside: avoid; }
}