/* Regeln der Seite. Farben, Formen, Schatten, Schriften und Maße stehen als Variablen im gewählten Theme
   (assets/css/themes, wird vorher geladen). Feste Farben gibt es hier nur für die Spiele (Minecraft-Pixelgrafiken und MOTD, Hytale- und
   Valheim-Balken) und die Markenfarben von PlayStation und Xbox. */
* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
}

.container {
    width: min(1100px, calc(100% - 32px));
    margin-inline: auto;
}

.site-header {
    color: var(--white);
}

.logo {
    font-size: 1.4rem;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: -.02em;
}

.portfolio-header {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 24px;
}

.portfolio-header h1,
.portfolio-header p {
    margin: 0;
}

.portfolio-name { display: inline-flex; align-items: center; gap: 0; }
/* Alter hinter dem Namen, "Flux (45)": kleiner Abstand, dichter als ein Leerzeichen (Leerraum zwischen Flex-Elementen fällt weg). */
.portfolio-age { margin-left: .4ch; }
.portfolio-country-flag { position: relative; display: inline-block; width: 36px; height: 24px; margin-left: 12px; overflow: hidden; border-radius: var(--radius-flag); }
.portfolio-country-flag img { position: absolute; top: -14px; left: -14px; width: 63px; height: 350px; max-width: none; }

.portfolio-status {
    border-radius: var(--radius-pill);
    font-weight: 700;
}

.portfolio-status-active {
    background: var(--green-pale);
    color: var(--green-dark);
}

.portfolio-status-banned {
    background: var(--red-pale);
    color: var(--red-dark);
}

.portfolio-quote {
    font-style: italic;
}

main.container {
    padding: 40px 0;
}

.card {
    margin: 0 auto;
    padding: 28px;
    box-shadow: var(--shadow-card);
}

.profile-birthdate-row {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--form-columns-gap);
}

.contact-details-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--form-columns-gap);
}

.contact-details-row > div {
    display: grid;
    gap: var(--field-gap);
}

.profile-birthdate-field {
    flex: 1 1 220px;
}

.profile-show-age {
    flex: 0 1 auto;
    padding-bottom: 16px;
    white-space: nowrap;
}

/* Geburtsdatum als drei Auswahlfelder, jedes so breit wie sein Inhalt. Beim Datumsformat JJ.MM.TT steht das Jahr vorne und
   der Tag hinten. */
.birth-date-selects { display: flex; gap: 8px; min-width: 0; }
.birth-date-selects select { flex: 0 0 auto; width: auto; }
.birth-date-year-first #birth_year { order: -1; }
.birth-date-year-first #birth_day { order: 1; }

/* Theme-Auswahl hinter dem Geburtsdatum: so breit wie ihr längster Name, mit demselben Abstand nach unten wie das
   Datumsfeld, damit beide auf einer Linie stehen. */
.profile-theme-field { flex: 0 0 auto; }
/* Mit [aria-describedby], sonst gewinnt die Regel für Felder mit Hinweis darunter (margin-bottom: 0). */
.profile-theme-field select[aria-describedby] { margin-bottom: var(--field-space); }

form {
    display: grid;
    gap: var(--field-gap);
}

label { font-weight: 600; }

/* Beschriftungen von Checkboxen und Radiobuttons: normale Schrift, Feld und Text auf einer Linie (überall gleich). */
label:where(:has(> input[type="checkbox"], > input[type="radio"])) {
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    font-weight: 400;
}

/* Felder mit Hinweis: Der Hinweis folgt direkt unter dem Feld (gilt in allen Formularen). */
form :is(input, select, textarea)[aria-describedby] { margin-bottom: 0; }
form :is(p.hint, p.form-hint) { margin: -4px 0 var(--field-space); }
.profile-locale-row > div { min-width: 0; align-content: start; }
/* Land, Datumsformat und Sprache nebeneinander; mittelbreit zwei Spalten, schmal untereinander. Doppelte Klasse, weil
   .profile-account-row (weiter unten) sonst die Spalten vorgibt. */
.profile-account-row.profile-locale-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .profile-account-row.profile-locale-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .profile-account-row.profile-locale-row { grid-template-columns: 1fr; } }
/* Steam-Konto: Steam-Logo, dahinter die SteamID als Link zum Steam-Profil und der Knopf (Verknüpfen oder Lösen) in
   Inhaltsbreite. Das Logo steht wie im Portfolio dicht vor der SteamID bzw. dem Knopf. */
.profile-steam { display: grid; gap: var(--field-gap); margin-bottom: var(--field-space); }
.profile-steam-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--form-columns-gap); }
.profile-steam-row button { width: auto; }
.profile-steam-icon,
.profile-steam-row .steam-avatar { margin-right: calc(8px - var(--form-columns-gap)); }
.profile-steam-icon { width: 32px; height: 32px; flex: 0 0 auto; }
/* Steam-Profilbild des verknüpften Kontos (Profil und Portfolio) zwischen Steam-Logo und SteamID, wie in den
   Spielerlisten der Serverdetails. */
.steam-avatar { width: 32px; height: 32px; flex: 0 0 auto; border-radius: var(--radius-small); }
.country-picker { position: relative; min-width: 0; }
.country-picker #country { width: 100%; margin-bottom: 0; padding-right: 36px; }
.country-picker .country-toggle,
.country-picker .country-toggle:hover,
.country-picker .country-toggle:focus { position: absolute; right: 2px; top: 2px; bottom: 2px; width: 30px; min-height: 0; padding: 0; justify-content: flex-end; border: 0; border-radius: 0 calc(var(--field-radius) - 2px) calc(var(--field-radius) - 2px) 0; background: transparent; color: var(--text-bright); box-shadow: none; outline-offset: -2px; }
/* Pfeil wie bei den anderen Auswahlfeldern: kleiner Winkel in Textfarbe, rechts innerhalb des Rahmens. */
.country-picker .country-toggle::after { content: ""; width: 10px; height: 6px; margin-right: 4px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.country-picker .country-options,
.country-picker .country-options:focus { position: absolute; z-index: 10; top: 100%; left: 0; box-sizing: border-box; margin: 4px 0 0; padding: 4px; width: 100%; height: 220px; overflow-y: auto; box-shadow: var(--shadow-dropdown); }
.country-options option { padding: 7px 8px; border-radius: var(--radius-tile); white-space: normal; }
.country-options option:hover,
.country-options option:checked { color: var(--text-bright); background: var(--surface-hover) linear-gradient(var(--surface-hover), var(--surface-hover)); }
.country-empty { display: block; }
.country-picker [hidden] { display: none; }

input,
select,
textarea {
    width: 100%;
    padding: var(--field-padding);
    margin-bottom: var(--field-space);
    border: 1px solid var(--border-light);
    border-radius: var(--field-radius);
    font: inherit;
}

textarea {
    min-height: var(--textarea-min-height);
    resize: vertical;
}

input[type="checkbox"] {
    width: auto;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}

input[type="checkbox"]:disabled {
    opacity: .65;
    cursor: not-allowed;
}

.form-hint {
    margin: -2px 0 6px;
    font-size: .9rem;
}

button, .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: 10px 16px;
    font: inherit;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.message {
    margin-bottom: 18px;
    padding: 12px;
    border-radius: var(--radius-window);
}

.debug {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.status-warning {
    display: inline-grid;
    width: 18px;
    height: 18px;
    margin-left: 5px;
    place-items: center;
    border-radius: var(--radius-round);
    background: var(--amber);
    color: var(--white);
    font-size: .75rem;
    font-weight: 800;
}

.delete-dialog {
    width: min(440px, calc(100% - 32px));
    border: 1px solid var(--border);
    border-radius: var(--radius-dialog);
    padding: 28px;
    background: var(--surface-dialog);
    color: var(--text);
    overflow: hidden;
    box-shadow: var(--shadow-dialog);
}

.delete-dialog h2 { color: var(--text-bright); }
.delete-dialog p { margin: 12px 0; padding: 10px 12px; border: 1px solid var(--red); border-radius: var(--field-radius); background: var(--red-surface); color: var(--red); white-space: normal; overflow-wrap: anywhere; word-break: break-word; }

.delete-dialog::backdrop {
    background: var(--backdrop);
}

.delete-dialog-image {
    width: 64px;
    height: 64px;
    margin-bottom: 14px;
    border-radius: var(--radius-round);
    background: var(--red-pale);
}

.dialog-actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

/* Löschdialoge verwenden immer die große Formular-Buttongröße – auch innerhalb von Tabellen. */
.delete-dialog .dialog-actions button {
    min-height: 40px;
    height: auto;
    padding: 10px 16px;
    font-size: .9rem;
}
.delete-dialog .dialog-actions .button-delete-icon { width: 18px; height: 18px; }
.admin-table .delete-dialog .dialog-actions button { min-height: 40px; height: auto; padding: 10px 16px; }
.delete-dialog .dialog-actions :is(.button-secondary, .button-delete) { white-space: nowrap; width: auto; background: transparent; }
.delete-dialog .dialog-actions { justify-content: space-between; }
.delete-dialog .dialog-actions .button-secondary { border-color: var(--blue-light); color: var(--blue-light); }
.delete-dialog .dialog-actions .button-secondary { min-width: 160px; }
.delete-dialog .dialog-actions .button-secondary:hover:not(:disabled) { border-color: var(--button-blue) !important; background: var(--button-blue) !important; color: var(--bg) !important; }
.delete-dialog .dialog-actions .button-delete { border-color: var(--red); color: var(--red); }
.delete-dialog .dialog-actions .button-delete:hover:not(:disabled) { border-color: var(--button-red) !important; background: var(--button-red) !important; color: var(--bg) !important; }

.hint {
    font-size: .9em;
    font-weight: 400;
}

/* Kopf der Profilseite: Überschrift und Einleitung links, der Avatar rechts oben in der Ecke des Fensters. */
.profile-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--form-columns-gap);
    margin-bottom: 20px;
}

.profile-avatar {
    flex: 0 0 auto;
    line-height: 0;
}

/* Die Überschrift steht im Kopf statt direkt im Fenster -- oben ohne Abstand wie dort (.site-main .card > h1). */
.profile-head h1 { margin-top: 0; }

.avatar {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: var(--radius-round);
    object-fit: cover;
    background: var(--surface-avatar);
    color: var(--white);
    font-weight: 700;
}

.avatar-small {
    width: 32px;
    height: 32px;
    font-size: .75rem;
}

.avatar-large {
    width: 96px;
    height: 96px;
    font-size: 1.6rem;
}

.fun_img {
    width: 220px;
    height: 64px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-window);
}

.verification-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.verification-refresh svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.settings-form {
    margin-top: 18px;
    row-gap: var(--field-row-gap);
}

.smtp-settings {
    display: grid;
    gap: var(--field-row-gap);
}

.smtp-settings .form-hint {
    display: grid;
    grid-template-columns: var(--settings-label-column) minmax(0, 2.1fr);
    column-gap: var(--form-columns-gap);
    margin: -2px 0 0;
}
.smtp-settings .form-hint em { grid-column: 2; }

.settings-row {
    display: grid;
    grid-template-columns: var(--settings-label-column) minmax(0, 2.1fr);
    align-items: center;
    gap: var(--form-columns-gap);
}
.settings-inline-fields { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--form-columns-gap); }
.settings-inline-fields .settings-row { grid-template-columns: var(--settings-label-column) minmax(0, 1fr); align-items: start; gap: var(--form-columns-gap); }
.settings-inline-fields .settings-row:first-child select { margin-left: -10px; width: calc(100% - 6px); }
/* Seitentitel mit Theme dahinter in einer Zeile: die Theme-Auswahl ist so breit wie ihr längster Name, das Titelfeld nimmt
   den restlichen Platz. Schmal bricht die Auswahl unter das Titelfeld um. */
.settings-title-theme { display: flex; flex-wrap: wrap; align-items: center; gap: 10px var(--form-columns-gap); min-width: 0; }
.settings-title-theme > * { margin: 0; }
.settings-title-theme > input { flex: 1 1 220px; min-width: 0; }
.settings-title-theme > select { flex: 0 0 auto; width: auto; }
/* Datumsformat mit der Standardsprache dahinter in einer Zeile (wie Seitentitel und Theme): das Datumsformat nimmt den Platz,
   die Sprachauswahl ist so breit wie ihr längster Name. */
.settings-row-date label .hint { display: block; }
.server-name-fields input { margin: 0; }
.server-admin-page .settings-row:not(.server-name-fields):not(.server-address-port-row) { grid-template-columns: 180px minmax(0, 1fr); }
.server-name-fields { grid-template-columns: 180px minmax(0, 3fr) auto minmax(0, 2fr); }
.server-address-port-row { grid-template-columns: 180px minmax(0, 1fr); align-items: center; }
.server-address-port-row > label { transform: translateY(14px); }
/* IP-Feld teilt sich den Rest mit den fünf gleich breiten Ports (Game, Query, RCON, Web, API). Port-Breite: fünf Ziffern
   (5ch) plus Innenabstand (2 x 12px), Rahmen und die Pfeile des Zahlenfelds -- auf der ganzen Seite, weil sich die Zeilen
   darunter daran ausrichten. */
.server-admin-page { --server-port-width: calc(5ch + 50px); --server-select-width: 230px; }
.server-address-port-fields { grid-template-columns: minmax(140px, 1fr) 10px repeat(5, var(--server-port-width)); gap: 10px; }
/* Mittlere Breiten: IP über die ganze Zeile, darunter die fünf Ports gleich breit (unter 600px alles untereinander). */
@media (max-width: 1100px) {
    .server-address-port-fields { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .server-address-port-fields > div:first-child { grid-column: 1 / -1; }
    .server-address-port-separator { display: none; }
}
.server-address-port-fields label { display: block; margin-bottom: 6px; }
.server-address-port-fields :is(input, select, textarea) { margin: 0; }
.server-address-port-fields input::placeholder { color: var(--text-muted); opacity: .45; font-style: italic; }
.server-address-port-separator { align-self: end; padding-bottom: 10px; color: var(--text-soft); font-weight: 700; }
/* RCON-Passwort schließt bündig mit dem Game-Portfeld oben ab: hinter Game folgen noch Query, RCON, Web und API (je eine
   Portbreite) mit je 10px Abstand davor. */
.server-rcon-type-fields { grid-template-columns: calc(100% - 4 * var(--server-port-width) - 40px) minmax(0, 1fr); }
.server-rcon-type-fields .settings-row { align-items: center; }
/* Rechte Felder (Servertyp, API-Passwort mit Auge, Ingameadmin) einheitlich 230px breit und rechts bündig mit dem API-Port
   oben; die Beschriftung steht rechtsbündig davor und nimmt den Rest. */
.server-admin-page .server-rcon-type-fields .settings-row:last-child { grid-template-columns: minmax(0, 1fr) var(--server-select-width); }
.server-rcon-type-fields .settings-row:last-child label { white-space: nowrap; text-align: right; }
/* Adminmanagement-Box exakt so groß wie und bündig unter der Servertyp-Box: Label bleibt "auto" (kann beliebig lang sein, wird nie abgeschnitten), die Auswahl bekommt dieselbe Breite wie Servertyp (230px) und rutscht dadurch automatisch an dieselbe Position. */
.server-admin-management-fields { grid-template-columns: minmax(0, 1fr) auto auto; }
.server-admin-management-fields .settings-row { align-items: center; }
.server-admin-page .server-admin-management-fields .settings-row:last-child { grid-template-columns: auto var(--server-select-width); }
.server-admin-management-fields .settings-row:last-child label { white-space: nowrap; }
.server-admin-page .server-admin-management-fields .settings-row.server-os-row { grid-template-columns: auto 140px; }
.server-os-row label { white-space: nowrap; }
.server-flags { display: flex; align-items: center; gap: 18px; }
/* Serverlisten (Admin und öffentlich): kurze Spalten (IP:Port, Status, Spieler, Version) nicht umbrechen --
   die Name-Spalte nimmt den Rest. */
.server-list-table .server-cell-nowrap { white-space: nowrap; }
/* Serverlisten: Spiel-Icon näher an den Namen, Aktions-Buttons näher an die Version. */
.server-list-table :is(.server-col-game, .server-col-version) { padding-right: 2px; }

/* Öffentliche Server-Übersicht: je Server eine Zeile -- Icon, Name mit Map/Adresse/Status/Links, Spieler, Mapbild.
   Anordnung nach der alten Homepage, Farben aus dem aktuellen Design. Hover-Regeln mit .server-overview davor, damit sie
   den globalen Button-Hover (weiter unten, gleiche Spezifität) schlagen. */
/* Map-Spalte 24px breiter als das Bild: Abstand zwischen Spielern und Mapbild, Bild und Überschrift rechtsbündig darin. */
.server-overview { --server-overview-columns: 96px minmax(0, 1fr) 136px 124px; margin-top: 18px; }
.server-overview-head,
.server-overview-row { display: grid; grid-template-columns: var(--server-overview-columns); gap: 16px; align-items: center; }
/* Kopfzeile wie die Tabellenköpfe der Admin-Listen (.admin-table th). */
.server-overview-head { padding: 10px; border-bottom: 1px solid var(--border-divider); color: var(--yellow); font-size: .84rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.server-overview-head span:nth-child(n + 3) { text-align: center; }
.server-overview-head span:nth-child(4) { padding-left: 4px; }
.server-overview-row { padding: 14px 10px; border-bottom: 1px solid var(--border-divider); }
/* Ganze Zeile öffnet die Serverdetails (servers.js); Hover wie die Admin-Serverliste (.server-row-expandable). */
.server-overview-row[data-details-href] { cursor: pointer; }
.server-overview-row[data-details-href]:hover { background: var(--surface); }
.server-overview-icon { width: 96px; height: 96px; object-fit: contain; }
.server-overview-name { margin: 0 0 6px; color: var(--text-bright); font-size: 1.4rem; line-height: 1.2; overflow-wrap: anywhere; }
.server-overview-line { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: center; min-height: 26px; }
/* Status-Pillen und Links mit etwas Abstand unter Map und Adresse. */
.server-overview-line + .server-overview-line { margin-top: 6px; }
.server-overview-map { overflow: hidden; color: var(--text-muted); text-overflow: ellipsis; white-space: nowrap; }
.server-overview-address { color: var(--text-soft); white-space: nowrap; }
.server-overview-status { white-space: nowrap; }
.server-overview-links { display: flex; flex-wrap: wrap; gap: 4px 24px; }
/* "Details" ist ein Link, "Connect" (noch) ein Button -- beide gleich, fett wie die globalen Buttons. */
.server-list-page .server-overview-link { text-decoration: none; padding: 0; border: 0; background: none; box-shadow: none; color: var(--blue-light); font-weight: 600; }
.server-list-page .server-overview-link:hover { border: 0; background: none; color: var(--yellow); }
/* Spielerzahl mit Füllbalken darunter (.server-player-bar, siehe Designvarianten). */
.server-overview-players { display: grid; justify-items: center; gap: 8px; color: var(--text-dim); font-size: 2.4rem; font-weight: 700; text-align: center; white-space: nowrap; }
.server-overview-players-online { color: var(--green); }
.server-overview-players .server-player-bar { width: 100px; }
.server-overview-map-image { justify-self: end; width: 120px; height: 90px; overflow: hidden; border: 1px solid var(--border-strong); border-radius: var(--radius-small); }
.server-overview-map-image img { width: 100%; height: 100%; object-fit: cover; }
.server-overview-map-placeholder { display: grid; place-items: center; background: var(--surface-input); }
.server-overview-map-placeholder img { width: 64%; height: auto; object-fit: contain; opacity: .35; }
.server-overview-map-icon { background: var(--surface-input); }
.server-overview-map-icon img { object-fit: contain; }
/* Wie in den Serverdetails: Kartenbilder und Minecraft-Icons laufen nach links in den Hintergrund aus, bei nicht laufenden
   Servern (dann die letzte bekannte Map) grau. Der Keks-Platzhalter bleibt unverändert. */
.server-overview-map-image:not(.server-overview-map-placeholder) { -webkit-mask-image: linear-gradient(to right, transparent, #000 55%); mask-image: linear-gradient(to right, transparent, #000 55%); }
:is(.server-state-offline, .server-state-inactive) .server-overview-map-image:not(.server-overview-map-placeholder) img { filter: grayscale(1); opacity: .45; }
@media (max-width: 700px) {
    .server-overview { --server-overview-columns: 48px minmax(0, 1fr) auto; }
    .server-overview-head,
    .server-overview-map-image { display: none; }
    .server-overview-icon { width: 48px; height: 48px; }
    .server-overview-name { font-size: 1.15rem; }
    .server-overview-line { grid-template-columns: 1fr; gap: 4px; }
    .server-overview-players { font-size: 1.3rem; }
}
/* Öffentliche Serverdetails (pages/server.php), Anordnung nach der alten Homepage: Kopf mit Spiel-Icon, Name, Abfragestand und
   Status; darunter die Angaben als Zeilen wie in der Admin-Tabelle, rechts das Kartenbild, unten die Server-Einstellungen
   (Rules) zum Aufklappen. */
.server-details-topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-bottom: 14px; }
/* Serverwechsel oben rechts: Aussehen global, hier nur Breite und Lage. */
.server-details-switch { display: flex; gap: 8px; min-width: 0; max-width: 100%; margin: 0 0 0 auto; }
.server-details-switch select { width: auto; max-width: 100%; margin: 0; }
.server-details-back { display: inline-flex; align-items: center; gap: 4px; color: var(--blue-light); font-size: 1rem; font-weight: 600; text-decoration: none; }
.server-details-back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.server-details-back:hover { color: var(--yellow); }
.server-details-head { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--border-divider); }
.server-details-game-icon { width: 64px; height: 64px; object-fit: contain; }
.server-details-title h1 { margin: 0 0 4px; color: var(--text-bright); font-size: 1.9rem; line-height: 1.2; overflow-wrap: anywhere; }
.server-details-query { margin: 0; color: var(--text-dim); font-size: .82rem; }
.server-details-query-live { color: var(--green); }
.server-details-head > .status-tag { padding: 10px 18px; font-size: 1.1rem; }
/* Ein Raster für Angaben und Kartenbild (wie auf der alten Homepage): Das Bild steht rechts neben den ersten fünf Zeilen,
   alle Zeilen darunter laufen über die volle Breite. Spalten: Beschriftung, Wert, Abstand, Bild. Das dl ist display:
   contents, damit dt/dd direkt im Raster liegen. */
.server-details-body { display: grid; grid-template-columns: 130px minmax(0, 1fr) 8px 300px; }
.server-details-facts { display: contents; }
.server-details-facts > dt { grid-column: 1; }
/* Die Zeilen neben dem Bild enden 8 px (Abstandsspalte) vor ihm, alle darunter laufen über die volle Breite. */
.server-details-facts > dd { grid-column: 2; }
.server-details-facts > dd:nth-of-type(n + 6) { grid-column: 2 / -1; }
.server-details-facts > :is(dt, dd) { display: flex; align-items: center; min-height: 42px; padding: 7px 10px; border-bottom: 1px solid var(--border-divider); }
/* Game, Type und Details so hoch wie die Zeilen mit 32-px-Icons (Adresse, Type mit OS-Icon): 32 + 2 x 7 + 1 px. */
.server-details-facts > :is(.server-details-game, .server-details-inline) { min-height: 47px; }
.server-details-facts > dt { color: var(--text-muted); font-weight: 600; }
.server-details-facts > dd { flex-wrap: wrap; gap: 6px; margin: 0; color: var(--text-soft); overflow-wrap: anywhere; }
.server-details-facts small { color: var(--text-dim); }
/* Pillen in den Angaben (Version, VAC/EAC/PvE) etwas größer als in den Listen, ebenso Ping- und BOT-Pille der Spielerliste;
   die Online-Pille im Kopf hat ihre eigene Größe. */
.server-details-facts .status-tag,
.server-details-player-list .server-player-ping { min-height: 24px; padding: 4px 10px; font-size: .8rem; }
/* Nachtmaps ("night" im Namen): Mond hinter dem Mapnamen. */
.server-details-night { width: 18px; height: 18px; fill: var(--gold); stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Adresse mit Kopieren und Verbinden: technische Icon-Buttons in Tabellengröße (wie die Developer-Demo). */
.server-details-address { gap: 8px; }
/* Etwas Luft zwischen Adresse und Buttons; zwischen den Buttons bleibt es bei 8 px. */
.server-details-address .server-overview-address { margin-right: 8px; }
.server-details-address .technical-action-button svg { width: 20px; height: 20px; }
/* Minecraft: Button zur Live-Karte (dynmap) hinter dem Weltnamen, Abstand und Icon wie hinter der Adresse. */
.server-details-map-live { margin-right: 10px; }
.server-details-facts .server-details-map-live ~ .technical-action-button svg { width: 20px; height: 20px; }
.server-details-facts .server-os-icon { width: 32px; height: 32px; }
/* Minecraft-MOTD wie in der Serverliste des Spiels: dunkles Feld, Grau als Grundfarbe, die 16 Farbcodes (§0-§f) und die
   Formate (§l fett, §o kursiv, §n unterstrichen, §m durchgestrichen, §k "verschleiert" -- hier nur abgeblendet). */
.mc-motd { display: inline-block; padding: 6px 12px; border: 1px solid var(--border-strong); border-radius: 4px; background: #111418; color: #aaaaaa; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; line-height: 1.5; text-shadow: 1px 1px 0 rgba(0, 0, 0, .7); white-space: pre-wrap; }
/* Als eigener Block unter den Angaben (Serverdetails): "Message of the Day" mit der MOTD über die restliche Breite, mittig
   wie ein Banner, dahinter "Server Icon" mit dem Icon (64 px, pixelgenau wie im Spiel). Die Beschriftungen im Stil der
   Zeilen darüber (dt), einzeilig und so breit wie nötig. */
.server-details-motd { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.server-details-motd-label { padding: 0 10px; color: var(--text-muted); font-weight: 600; white-space: nowrap; }
.server-details-motd-icon { flex: none; width: 64px; height: 64px; border-radius: var(--radius-small); image-rendering: pixelated; }
.server-details-motd .mc-motd { display: block; flex: 1; min-width: 0; padding: 12px 16px; font-size: 1.05rem; text-align: center; }
.mc-0 { color: #000000; text-shadow: 1px 1px 0 rgba(255, 255, 255, .15); }
.mc-1 { color: #0000aa; }
.mc-2 { color: #00aa00; }
.mc-3 { color: #00aaaa; }
.mc-4 { color: #aa0000; }
.mc-5 { color: #aa00aa; }
.mc-6 { color: #ffaa00; }
.mc-7 { color: #aaaaaa; }
.mc-8 { color: #555555; }
.mc-9 { color: #5555ff; }
.mc-a { color: #55ff55; }
.mc-b { color: #55ffff; }
.mc-c { color: #ff5555; }
.mc-d { color: #ff55ff; }
.mc-e { color: #ffff55; }
.mc-f { color: #ffffff; }
.mc-l { font-weight: 700; }
.mc-o { font-style: italic; }
.mc-n { text-decoration: underline; }
.mc-m { text-decoration: line-through; }
.mc-n.mc-m { text-decoration: underline line-through; }
.mc-k { opacity: .5; }
/* Schloss wie in der Übersicht; den Abstand übernimmt hier der Zeilenabstand (gap). */
.server-details-facts .server-password-icon { width: 20px; height: 20px; margin-left: 0; }
/* Spielerzahl mit Füllbalken darunter, wie in der Übersicht; der Balken ist so breit wie der Text darüber. */
.server-details-players-box { display: inline-grid; gap: 6px; }
/* contain: Der Balken selbst gibt keine Breite vor (Browser-Standard ca. 10em), nur der Text bestimmt sie. */
.server-details-players-box .server-player-bar { contain: inline-size; }
.server-details-players-box > span { font-size: 1.15rem; }
/* Hytale: Spielerzahl und Mem (Heap) in einem Grid -- die beiden 1fr-Spalten werden gleich breit (so breit wie der längere
   Text), damit beide Balken gleich lang sind; dazwischen die Beschriftung "Mem" mit dem Abstand wie bei den Zusatzwerten. */
.server-details-players-mem { display: inline-grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.server-details-players-mem > .server-details-inline-label { margin-left: 28px; }
/* Weitere Werte mit Balken (Satisfactory: Progress, Space Elevator) im selben Grün wie die Spielerzahl eines
   Online-Servers. */
.server-details-players-online .server-details-players-box > span,
.server-details-fact-box > span { color: var(--green); font-weight: 700; }
/* Sprache hinter der Spielerzahl (senkrecht mittig in der Zeile), Space Elevator hinter Progress (Satisfactory) und
   Ingame-Tag (ARK:SA) hinter der Map; die Beschriftung wie die der Zeilen (dt), als stünde dort eine weitere Zeile. */
.server-details-language,
.server-details-fact-extra { margin-left: 28px; }
.server-details-fact-extra { display: inline-flex; align-items: center; }
/* Sonne bzw. Mond hinter der Minecraft-Uhrzeit (Tag/Nacht), in der Farbe des Monds der Nachtmaps. */
.server-details-fact-extra .server-details-night,
.server-details-mc-time .server-details-night { margin-left: 6px; }
/* Minecraft: Uhrzeit vorne in der Zeile "Time", Sonne bzw. Mond dahinter mittig. */
.server-details-mc-time { display: inline-flex; align-items: center; }
.server-details-sun { width: 18px; height: 18px; margin-left: 6px; fill: var(--gold); stroke: var(--gold); stroke-width: 2; stroke-linecap: round; }
/* Map-Zeile: Mapname (mit Nachtmond und Zusätzen), dahinter Day, Description, Played und Tags im gleichen Abstand. Der
   Abstand ist ein gap statt margin, damit umgebrochene Teile (neben dem Kartenbild ist wenig Platz) links bündig beginnen. */
.server-details-facts > .server-details-map-row { column-gap: 28px; }
.server-details-map-name { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* Passwortschloss rechts neben der Spielerzahl. */
.server-details-facts .server-details-game-lock { margin-right: 4px; }
.server-details-inline-label { margin-right: 10px; color: var(--text-muted); font-weight: 600; }
.server-details-game { gap: 16px; }
/* Valheim: Uhrzeit (Sonne/Mond, Paused) und Tag hinter dem Schloss statt in einer eigenen Zeile "Time". */
.server-details-game-time { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* Pille mit Logo davor (Minecraft: Server-Software wie Paper); das Logo so hoch wie die Pille. */
.server-details-pill-with-icon { display: inline-flex; align-items: center; gap: 6px; }
.server-details-pill-icon { width: 24px; height: 24px; }
/* Plattformen (ARK:SA): Icons in gleichen Abständen, auch mehrere einer Plattform (PC: Steam und Epic). */
.server-details-facts > .server-details-platforms { gap: 16px; }
.server-platform { display: inline-flex; align-items: center; gap: 16px; }
.server-platform img { width: 32px; height: 32px; object-fit: contain; }
/* Tags als einfache Auswahlliste rechtsbündig am Ende der Map-Zeile (Aussehen global, hier nur Breite und
   Lage). Genau so hoch wie die Icon-Buttons der Adresszeile (32 px), passend zu den 47 px hohen Zeilen. */
.server-details-facts .server-details-tags { width: auto; max-width: 240px; height: 32px; margin: 0 0 0 auto; padding: 0 10px; font-size: .88rem; }
/* Das Kartenbild richtet sich nach den fünf Zeilen daneben statt umgekehrt: Es ist absolut positioniert, gibt dem Raster
   also keine Höhe vor, füllt die Höhe der Zeilen und die ganze Bildspalte (beschnitten statt fest 4:3) -- so bleiben die
   Zeilen normal hoch und enden immer gleich weit vor dem Bild. */
/* Die Bildspalte umfasst auch die 8-px-Lücke und trägt unten dieselbe Trennlinie wie die Zeilen, damit die Linie unter der
   fünften Zeile ohne Unterbrechung bis zum Rand durchläuft; das Bild selbst beginnt nach der Lücke. */
.server-details-map { position: relative; grid-column: 3 / -1; grid-row: 1 / span 5; margin: 0; border-bottom: 1px solid var(--border-divider); }
/* Mit .server-details-map davor, sonst gewinnt das spätere .server-media { position: relative }. */
.server-details-map .server-details-media { position: absolute; inset: 6px 0 6px 8px; border: 1px solid var(--border-strong); border-radius: var(--radius-panel); }
/* Kartenbilder und Minecraft-Icons laufen nach links in den Fensterhintergrund aus (wie die Kacheln der Designvariante 2,
   dort nach unten); die Maske nimmt den Rahmen mit. Der Keks-Platzhalter bleibt ohne Übergang. */
.server-details-map .server-details-media:not(.server-media-placeholder) { -webkit-mask-image: linear-gradient(to right, transparent, #000 55%); mask-image: linear-gradient(to right, transparent, #000 55%); }
/* Spielerliste (live abgefragte Server): eigene Kachel unter den Details mit Players- und Spectators-Tabelle, Tabellen wie
   in der Admin-Serverliste (.admin-table); hier nur Abstände, Überschriften und Spalten. */
.server-details-player-list { margin-top: 24px; }
.server-details-player-list h2 { margin: 0; color: var(--text-bright); font-size: 1.3rem; }
.server-details-player-list h2 small { color: var(--text-dim); font-size: .9rem; font-weight: 600; }
/* Überschriften der weiteren Tabellen (Teams, Zuschauer); direkt unter "Players" mit weniger Abstand. Mit .site-main davor,
   sonst gewinnt das spätere .site-main .card > h2 { margin-top: 0 }. */
.site-main .server-details-player-list > h2.server-details-player-group { margin-top: 40px; }
.site-main .server-details-player-list > h2 + h2.server-details-player-group { margin-top: 16px; }
/* Teamfarben: Team 2 rot, Team 3 blau (CS:S: Terrorists / Counter-Terrorists). */
.server-details-player-list h2.server-details-player-group-team2 { color: var(--red); }
.server-details-player-list h2.server-details-player-group-team3 { color: var(--blue-light); }
/* Namen in den Teamtabellen in der Teamfarbe. */
.server-details-team.server-details-player-group-team2 .server-player-name { color: var(--red); }
.server-details-team.server-details-player-group-team3 .server-player-name { color: var(--blue-light); }
/* Teams nebeneinander, auf schmalen Bildschirmen untereinander; die Tabellen darunter (Zuschauer) wieder mit Abstand. */
.server-details-teams { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 28px; margin-top: 16px; }
.site-main .server-details-teams + h2.server-details-player-group { margin-top: 40px; }
/* Ohne "Players"-Überschrift davor beginnen die Teams oben in der Kachel. */
.server-details-player-list > .server-details-teams:first-child { margin-top: 0; }
@media (max-width: 900px) {
    .server-details-teams { grid-template-columns: 1fr; }
}
.server-details-player-list > .hint { margin: 12px 0 0; }
/* Feste Spaltenbreiten (aus dem Tabellenkopf), damit die Spalten beider Tabellen untereinander stehen; Name nimmt den
   Rest. Mindestbreite, damit der Name auf schmalen Bildschirmen nicht zerquetscht wird -- .table-scroll scrollt dann
   seitlich. */
.server-details-player-list .admin-table { table-layout: fixed; min-width: 480px; margin-bottom: 0; }
.server-details-player-list td { overflow-wrap: anywhere; }
/* Teamtabellen nebeneinander sind schmaler als die Mindestbreite -- dort ohne, sonst scrollt jede Tabelle seitlich; der
   Name nimmt den Rest und bricht notfalls um. */
.server-details-team .admin-table { min-width: 0; }
/* Zahlenspalten zentriert in (fast) gleich breiten, schmalen Spalten (wenig Innenabstand), damit die Werte gleichmäßig
   verteilt stehen und der Name Platz hat; Zombies breiter für die Überschrift, Time für Zeiten ab einer Stunde
   ("01:13:28"), Ping breit genug für die BOT-Pille. */
.server-details-player-list .server-player-num { padding-inline: 4px; text-align: center; white-space: nowrap; }
.server-details-player-list :is(.server-col-level, .server-col-kills, .server-col-deaths, .server-col-score, .server-col-ping) { width: 60px; }
.server-details-player-list .server-col-zombies { width: 68px; }
.server-details-player-list .server-col-time { width: 88px; }
/* Minecraft und Hytale: laufende Nummer (1, 2, …) vor dem Namen, schmal und gedämpft. */
.server-details-player-list .server-col-position { width: 36px; }
/* Minecraft: Leisten (162 px) samt Wert daneben brauchen feste Breiten, sonst teilt die feste Tabelle den Platz gleichmäßig. */
.server-details-player-list .server-col-health { width: 260px; }
.server-details-player-list .server-col-food { width: 260px; }
/* Hytale: Welt des Spielers als Pille, nie breiter als die Spalte (lange Namen brechen um). */
.server-details-player-list .server-col-hy-world { width: 120px; }
.server-details-player-list .server-player-world { max-width: 100%; }
/* Hytale: Health, Stamina und Oxygen mit Symbol, Balken (80 px) und Wert. */
.server-details-player-list :is(.server-col-hy-health, .server-col-hy-stamina, .server-col-hy-oxygen) { width: 160px; }
/* Valheim: Health mit Symbol, Balken (480 px) und "aktuell / maximal". */
.server-details-player-list .server-col-vh-health { width: 660px; }
.server-details-player-list .server-player-position { color: var(--text-muted); }
/* Minecraft: EXP-Level grün wie die Levelzahl im Spiel. */
.server-details-player-list .mc-exp-value { color: #80ff20; }
/* EOS-ID (ARK, nur für Operatoren, 32 Hex-Zeichen): feste Breite, zu lang mit "…" -- ganz im title. */
.server-details-player-list .server-col-eos { width: 300px; }
.server-details-player-list .server-player-eos { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Pokale der ersten drei Plätze vor dem Namen (Tabler "trophy", MIT); ohne Pokal ein gleich breiter Platzhalter, damit die
   Namen untereinander stehen. */
.server-details-player-list .server-player-trophy { display: inline-block; width: 20px; height: 20px; margin-right: 10px; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.server-details-player-list .server-player-trophy-cup { fill: currentColor; fill-opacity: .35; }
.server-details-player-list .server-player-trophy-gold { color: var(--trophy-gold); }
.server-details-player-list .server-player-trophy-silver { color: var(--trophy-silver); }
.server-details-player-list .server-player-trophy-bronze { color: var(--trophy-bronze); }
/* Überschrift "Name" bündig mit dem Namen: um das eingerückt, was in den Zeilen davor steht -- Pokal (20 + 10 px), Flagge
   (24 + 10 px) und Profilbild (32 + 16 px); 10 px ist der normale Innenabstand der Zelle. */
.server-details-player-list th.server-col-name-trophies { padding-left: 40px; }
.server-details-player-list th.server-col-name-avatars { padding-left: 92px; }
.server-details-player-list th.server-col-name-trophies.server-col-name-avatars { padding-left: 122px; }
/* Minecraft: nur der Kopf (32 + 10 px), keine Flagge. */
.server-details-player-list th.server-col-name-heads { padding-left: 52px; }
/* Tote Spieler (status_plus: alive = 0) abgeblendet. */
.server-details-player-list .server-player-dead > td { opacity: .45; }
/* Länderflagge vor dem Profilbild: Ausschnitt aus den Flaggen-Sprites (94×524, Flagge bei 20/20 mit 54×36) wie im
   Portfolio, hier auf 24×16 verkleinert (Faktor 24/54). */
.server-details-player-list .server-player-flag { position: relative; display: inline-block; width: 24px; height: 16px; margin-right: 10px; overflow: hidden; border-radius: var(--radius-flag); vertical-align: middle; }
.server-details-player-list .server-player-flag img { position: absolute; top: -8.9px; left: -8.9px; width: 41.8px; height: 232.9px; max-width: none; }
/* Steam-Profilbild vor dem Namen; Bots/ohne Bild bekommen einen Platzhalter mit "?", damit die Namen fluchten. */
.server-details-player-list .server-player-avatar { display: inline-block; width: 32px; height: 32px; margin-right: 16px; border-radius: var(--radius-small); vertical-align: middle; }
/* Pillen hinter dem Namen (Minecraft: Dimension, Spielmodus). Bei Minecraft stehen sie unter dem Namen, bündig mit ihm:
   Kopf links über beide Zeilen, Name oben, Pillen darunter; ohne Pillen steht der Name mittig neben dem Kopf. */
.server-details-player-list .server-player-pills { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 6px; vertical-align: middle; }
.server-details-player-list-mc .server-player-name-inner { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-items: start; }
.server-details-player-list-mc .server-player-name-inner > .server-player-avatar { grid-row: 1 / span 2; margin-right: 10px; }
.server-details-player-list-mc .server-player-pills { margin: 3px 0 0; }
.server-details-player-list .server-player-avatar-none { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-dim); font-size: 1rem; font-weight: 700; font-style: normal; }
/* Minecraft mit dynmap: Leben als 10 Herzen wie in der Lebensanzeige des Spiels (ein SVG, 81×9 Pixel, doppelt so groß,
   scharfe Kanten). Farben aus dem Original: Rot, dunkleres Rot für die Schattenpixel, rosa Glanzpunkt, leer Dunkelgrau. */
.mc-hearts { display: inline-block; line-height: 0; vertical-align: middle; }
.mc-hearts > svg { width: 162px; height: 18px; shape-rendering: crispEdges; }
/* Rüstung als Brustpanzer-Symbole, Farben aus der Rüstungsanzeige des Spiels. */
.mc-armor-B { fill: #000; }
.mc-armor-g { fill: #b8b9c4; }
.mc-armor-w { fill: #e6e7f2; }
.mc-armor-d { fill: #696a70; }
.mc-armor-e { fill: #3d3d3d; }
.mc-armor-value { margin-left: 10px; vertical-align: middle; white-space: nowrap; }
/* Aktive Effekte (Minecraft per RCON) als Icons nebeneinander (18×18, doppelt so groß, scharfe Kanten), bei vielen
   umbrochen; Name, Stufe und Restdauer im Tooltip. Ohne Icon der Name als Text. */
.server-details-player-list .server-col-effects { width: 200px; }
/* Effekte bis an den rechten Rand der Tabelle: ohne Innenabstand rechts, die Spalte dafür 10 px schmaler (gleich viel
   Platz); Überschrift und Inhalt linksbündig untereinander. */
.server-details-player-list :is(.server-col-effects, .server-player-effects) { padding-right: 0; }
.server-details-player-list .server-player-effects { color: var(--text-soft); }
.mc-effects { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; vertical-align: middle; }
/* Ein Effekt mit Text: Icon und Text bleiben in einer Zeile, der Name wird notfalls mit "…" gekürzt. */
.mc-effects:has(.mc-effect-text) { flex-wrap: nowrap; }
.mc-effect-icon { flex: none; width: 36px; height: 36px; image-rendering: pixelated; }
.mc-effect-name { color: var(--text-soft); font-size: .85rem; }
/* Nur ein Effekt: rechts neben dem Icon zwei Zeilen in der Schriftgröße der Liste -- oben der Name (weiß), unten die
   Restdauer (grau); zu lange Namen (z. B. "Breath of the Nautilus") enden mit "…", ganz im Tooltip. */
.mc-effect-text { display: flex; flex: 0 1 auto; flex-direction: column; min-width: 0; margin-left: 6px; line-height: 1.15; }
.mc-effect-text .mc-effect-name { color: #fff; font-size: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-effect-time { color: #a0a0a0; font-variant-numeric: tabular-nums; }
/* Luftblasen über den Keulen, Farben aus der Anzeige des Spiels; volle innen durchsichtig, leere klein und dunkel. */
.mc-air-B { fill: #000; }
.mc-air-b { fill: #0094ff; }
.mc-air-l { fill: #56b8ff; }
.mc-air-h { fill: #d1ebff; }
.mc-air-e { fill: #282828; }
.mc-air-g { fill: #406580; }
.mc-air-value { color: #56b8ff; white-space: nowrap; }
/* Rüstung/Herzen links, Luft/Hunger rechts; die Spalten so breit wie "Armor / Health" (260 px) und "Food" darüber. Leere
   Plätze (fehlender Wert) halten das Raster. */
.mc-status { display: grid; grid-template-columns: 162px 68px 162px auto; column-gap: 10px; row-gap: 2px; align-items: center; justify-items: start; }
/* Hunger als Keulen, Farben aus der Hungerleiste des Spiels. */
.mc-food-B { fill: #000; }
.mc-food-e { fill: #282828; }
.mc-food-0 { fill: #b21818; }
.mc-food-1 { fill: #e8c4a4; }
.mc-food-2 { fill: #d42a2a; }
.mc-food-3 { fill: #d7977a; }
.mc-food-4 { fill: #b88458; }
.mc-food-5 { fill: #9d6d43; }
.mc-food-6 { fill: #613c1b; }
.mc-food-7 { fill: #7b512d; }
.mc-food-8 { fill: #e2d5aa; }
.mc-food-9 { fill: #fff7dc; }
.mc-food-a { fill: #dfb18f; }
.mc-food-value { color: #b88458; white-space: nowrap; }
/* Rüstung über den Herzen wie im Spiel (1 Pixel Abstand, linksbündig), rechts daneben jeweils der Wert. */
.mc-vitals { display: inline-grid; grid-template-columns: auto auto; align-items: center; justify-items: start; gap: 2px 10px; vertical-align: middle; }
.mc-vitals > :is(.mc-health-value, .mc-armor-value),
.mc-status > :is(.mc-health-value, .mc-armor-value) { margin-left: 0; }
/* Zahl vor dem Schrägstrich rechtsbündig in fester Breite (höchstens zweistellig), damit die Schrägstriche untereinander
   stehen. */
.mc-value-points { display: inline-block; min-width: 2ch; text-align: right; }
/* Dahinter der Wert als Zahl ("15 / 20"), rot wie die Herzen. */
.mc-health-value { margin-left: 10px; color: var(--red); vertical-align: middle; white-space: nowrap; }
.mc-heart-outline { fill: #000; }
:is(.mc-heart-full, .mc-heart-half, .mc-heart-empty) > :is(.mc-heart-left, .mc-heart-left-shade, .mc-heart-right, .mc-heart-right-shade, .mc-heart-shine) { fill: #282828; }
.mc-heart-full > :is(.mc-heart-left, .mc-heart-right),
.mc-heart-half > .mc-heart-left { fill: #fe0000; }
.mc-heart-full > :is(.mc-heart-left-shade, .mc-heart-right-shade),
.mc-heart-half > .mc-heart-left-shade { fill: #cc0000; }
.mc-heart-full > .mc-heart-shine,
.mc-heart-half > .mc-heart-shine { fill: #ffc6c6; }
/* Hytale: Leben, Ausdauer und Luft als Balken in den Farben des Spiels (rosa mit Herz, gelb mit Blitz, blau mit Blase),
   dahinter die Zahl. Valheim nutzt dieselben Balken für das Leben. */
.hy-stat { --hy-stat-color: #e65a7a; --hy-stat-edge: #f79ab0; display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.hy-stat-icon { flex: none; width: 16px; height: 16px; fill: var(--hy-stat-color); }
.hy-stat-bar { display: block; width: 80px; height: 10px; overflow: hidden; border: 1px solid var(--hy-stat-edge); border-radius: 2px; background: rgba(0, 0, 0, .35); -webkit-appearance: none; appearance: none; }
.hy-stat-bar::-webkit-progress-bar { background: rgba(0, 0, 0, .35); }
.hy-stat-bar::-webkit-progress-value { background: linear-gradient(to bottom, var(--hy-stat-edge), var(--hy-stat-color) 45%); }
.hy-stat-bar::-moz-progress-bar { background: linear-gradient(to bottom, var(--hy-stat-edge), var(--hy-stat-color) 45%); }
.hy-stat-value { min-width: 4ch; color: var(--hy-stat-color); text-align: right; }
.hy-stat-stamina { --hy-stat-color: #e9b95f; --hy-stat-edge: #f8dc9c; }
.hy-stat-stamina .hy-stat-icon { fill: #f5a524; }
.hy-stat-oxygen { --hy-stat-color: #4ea6e8; --hy-stat-edge: #a3d4f7; }
/* Valheim: rot wie im Spiel und sechsmal so lang (nur eine Wertespalte); dahinter "aktuell / maximal", die aktuelle Zahl
   rechtsbündig in fester Breite, damit die Schrägstriche untereinander stehen. */
.hy-stat-valheim { --hy-stat-color: #d9412f; --hy-stat-edge: #f08a7a; }
.hy-stat-valheim .hy-stat-bar { width: 480px; }
.hy-stat-valheim .hy-stat-value { min-width: 13ch; text-align: left; white-space: nowrap; }
.hy-stat-points { display: inline-block; min-width: 5ch; text-align: right; }
/* Minecraft-Köpfe (Pixelgrafik) scharf statt weichgezeichnet. */
.server-details-player-list img.server-player-avatar { image-rendering: pixelated; }
/* Avatar der Seite (verknüpftes Mitglied): Foto, also weich verkleinern und quadratisch zuschneiden. */
.server-details-player-list img.server-player-avatar-member { image-rendering: auto; object-fit: cover; }
/* Valheim meldet keine Namen: "Unknown" grau und kursiv. */
.server-details-player-list .server-details-player-unnamed { color: var(--text-dim); font-style: italic; }
/* Spielername als Link zum Steam-Profil: in der Farbe des Namens (Teamfarbe), ohne Unterstrich, beim Hover fett. */
.server-details-player-list .server-player-link { color: inherit; text-decoration: none; }
.server-details-player-list .server-player-link:hover { font-weight: 700; }
/* Server Settings (Rules) zum Aufklappen, Hintergrund wie die Textfelder (input, select, textarea). Rules in zwei
   Spalten (Raster statt CSS-Spalten, die bei fester Höhe seitlich überlaufen), senkrecht scrollbar -- CS:S meldet weit
   über 100 Einträge. Kopf wie die Tabellenköpfe der Admin-Listen. */
.server-details-rules { margin-top: 22px; overflow: hidden; border: 1px solid var(--border-blue); border-radius: var(--radius-panel); background: var(--surface-sunken); }
.server-details-rules > summary { padding: 10px 14px; color: var(--yellow); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.server-details-rules > summary small { color: var(--text-dim); font-weight: 600; }
.server-details-rules > summary:hover,
.server-details-rules[open] > summary { background: var(--surface); }
.server-details-rules > dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; column-gap: 28px; max-height: 440px; margin: 0; padding: 6px 14px 12px; overflow-y: auto; font-size: .84rem; }
.server-details-rules dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--border-divider); }
/* Der Name behält seine Breite (höchstens die Hälfte), lange Werte wie sv_tags brechen stattdessen um. */
.server-details-rules dt { flex: none; max-width: 50%; color: var(--text-muted); overflow-wrap: anywhere; }
.server-details-rules dd { min-width: 0; margin: 0; color: var(--text-soft); text-align: right; overflow-wrap: anywhere; }
/* Schalter ("True"/"False"): an grün, aus rot. */
.server-details-rules dd.server-rule-true { color: var(--green); }
.server-details-rules dd.server-rule-false { color: var(--red); }
/* Sandbox Settings (7 Days to Die ab V3, aus dem SandboxCode): wie die Server Settings, nach Kategorien gruppiert und
   gemeinsam scrollbar; vom Standard abweichende Werte gelb. */
.server-details-sandbox-body { max-height: 440px; padding: 0 14px 12px; overflow-y: auto; font-size: .84rem; }
.server-details-sandbox-body > h3 { margin: 14px 0 2px; color: var(--text-bright); font-size: .84rem; letter-spacing: .04em; text-transform: uppercase; }
/* Mit .site-main davor, sonst gewinnt das spätere .site-main h3::before (das "#" vor Überschriften). */
.site-main .server-details-sandbox-body > h3::before { content: none; }
.server-details-sandbox-body > dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; margin: 0; }
.server-details-sandbox .is-changed dd { color: var(--yellow); font-weight: 700; }
/* Mods: der Name bekommt mehr Platz, rechts steht nur die kurze Mod-ID. */
.server-details-mods dt { max-width: 80%; }
/* Debug-Blöcke (nur Developer mit globalem Debug): eigene Kacheln ganz unten, zugeklappt; die Überschrift (wie die der
   Spielerliste) klappt auf. Blau statt im gelben Standard-Debug. */
.server-details-debug-card { margin-top: 24px; }
.server-details-debug-card > summary { color: var(--text-bright); font-size: 1.3rem; font-weight: 700; cursor: pointer; }
.server-details-debug-card > summary:hover { color: var(--yellow); }
.server-details-debug { margin: 12px 0 0; overflow-x: auto; font-family: monospace; font-size: .8rem; }
.debug.debug-blue { background: var(--blue-surface); color: var(--info-text); }
@media (max-width: 700px) {
    .server-details-head { grid-template-columns: 44px minmax(0, 1fr); }
    .server-details-game-icon { width: 44px; height: 44px; }
    .server-details-title h1 { font-size: 1.4rem; }
    .server-details-head > .status-tag { grid-column: 2; justify-self: start; }
    .server-details-body { grid-template-columns: 105px minmax(0, 1fr); grid-auto-rows: auto; }
    .server-details-facts > dd:nth-of-type(n) { grid-column: 2; }
    .server-details-map { grid-column: 1 / -1; grid-row: auto; margin: 16px 0 0; border-bottom: 0; }
    .server-details-map .server-details-media { position: static; width: 100%; aspect-ratio: 4 / 3; }
    .server-details-rules > dl,
    .server-details-sandbox-body > dl { grid-template-columns: 1fr; }
    /* MOTD: umbrechen, die Box in eine eigene Zeile. */
    .server-details-motd { flex-wrap: wrap; }
    .server-details-motd .mc-motd { flex-basis: 100%; }
}
/* Designvarianten der öffentlichen Server-Übersicht, aufbewahrt im Developer-Bereich (partials/server_list_variants.html).
   Gemeinsam: Zustandsklasse je Server (server-state-online/-offline/-unknown/-inactive), Statuspunkt, Spielerbalken und
   Kartenbild mit den Sonderfällen Minecraft-Icon und Keks-Platzhalter. Trennlinie und Kopf wie bei der Layout-Demo. */
.server-variants { margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--border-pale); }
.server-variants-intro { font-size: 1rem; }
.server-variant { margin-top: 32px; }
.server-variant-title { margin: 0 0 12px; color: var(--text); font-size: 1.1rem; }
.server-variant-hint { margin: -6px 0 18px; }
.server-status-dot { display: inline-block; flex: 0 0 auto; width: 9px; height: 9px; border-radius: var(--radius-round); background: var(--text-disabled); }
.server-state-online .server-status-dot { background: var(--green); box-shadow: var(--shadow-online); }
.server-state-offline .server-status-dot { background: var(--red); }
/* Spielerbalken: <progress>, weil die CSP keine Inline-Breiten erlaubt. Farbe über die Variable, damit sie auch in den
   Browser-Pseudoelementen ankommt. */
.server-player-bar { --server-bar-color: var(--green); display: block; width: 100%; height: 6px; overflow: hidden; border: 0; border-radius: var(--radius-pill); background: var(--border); -webkit-appearance: none; appearance: none; }
.server-player-bar::-webkit-progress-bar { border-radius: var(--radius-pill); background: var(--border); }
.server-player-bar::-webkit-progress-value { border-radius: var(--radius-pill); background: var(--server-bar-color); }
.server-player-bar::-moz-progress-bar { border-radius: var(--radius-pill); background: var(--server-bar-color); }
.server-player-bar-high { --server-bar-color: var(--gold); }
.server-player-bar-full { --server-bar-color: var(--red); }
/* Kartenbild füllt die Fläche; das Minecraft-Icon (64 px) höchstens in Originalgröße, der Platzhalter klein und mittig. */
.server-media { position: relative; overflow: hidden; background: var(--surface-input); }
.server-media > img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Kartenausschnitt aus dynmap (Minecraft) als Link zur Live-Karte. */
.server-media > .server-details-map-link { display: block; width: 100%; height: 100%; }
.server-details-map-link > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.server-media-icon > img { object-fit: scale-down; }
.server-media-placeholder > img { object-fit: contain; transform: scale(.5); opacity: .3; }
:is(.server-state-offline, .server-state-inactive) .server-media:not(.server-media-placeholder) > img { filter: grayscale(1); opacity: .45; }

/* Variante 2: Kacheln mit Kartenbild. */
.server-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 14px; }
.server-tile { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--bg); transition: border-color .15s ease, transform .15s ease; }
.server-tile:hover { border-color: var(--border-blue-hover); transform: translateY(-2px); }
.server-tile-media { aspect-ratio: 5 / 2; }
.server-tile-media::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, var(--bg)); }
.server-tile-media .status-tag { position: absolute; top: 10px; right: 10px; z-index: 1; }
.server-tile-body { display: flex; flex: 1; flex-direction: column; gap: 12px; padding: 0 14px 14px; }
.server-tile-head { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: start; }
.server-tile-game { position: relative; z-index: 1; width: 44px; height: 44px; margin-top: -22px; padding: 5px; border: 1px solid var(--border-strong); border-radius: var(--radius-icon); background: var(--surface); object-fit: contain; }
.server-tile-name { display: -webkit-box; margin: 4px 0 3px; overflow: hidden; color: var(--text-bright); font-size: 1rem; line-height: 1.25; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.server-tile-map { display: block; overflow: hidden; color: var(--text-muted); font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.server-tile-body > .status-tags:empty { display: none; }
.server-tile-players { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: baseline; }
.server-tile-players span { color: var(--text-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.server-tile-players strong { color: var(--text-dim); font-size: 1.15rem; }
.server-state-online .server-tile-players strong { color: var(--green); }
.server-tile-players .server-player-bar { grid-column: 1 / -1; }
.server-tile-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border-divider); font-size: .85rem; }

/* Server-Browser-Zeilen (Variante 5): Status als Punkt vor dem Namen, Spielerzahl mit schmalem Balken. */
.server-browser-name { display: inline-flex; align-items: center; gap: 9px; color: var(--text-bright); font-weight: 600; }
.server-browser-name .server-password-icon { margin-left: 0; }
.server-browser-map { display: block; max-width: 190px; overflow: hidden; color: var(--text-muted); text-overflow: ellipsis; white-space: nowrap; }
.server-browser-players { display: grid; gap: 5px; min-width: 64px; }
.server-browser-players strong { color: var(--text-dim); }
.server-state-online .server-browser-players strong { color: var(--green); }
.server-browser-players .server-player-bar { height: 4px; }

/* Suche und Filter über den Serverlisten (Original, Variante 5); servers.js blendet Einträge per hidden aus --
   die Regel mit [hidden] schlägt deren eigenes display (z. B. grid). */
.server-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 18px; }
.server-filter :is(input[type="search"], select) { width: auto; margin: 0; }
.server-filter input[type="search"] { flex: 1 1 260px; }
.server-filter select { flex: 0 1 240px; }
.server-list-page [data-server][hidden] { display: none; }
.server-os-icon { width: 15px; height: 15px; opacity: .85; }
/* Adresse kopieren: kleiner Icon-Button (globale Variante, nur kleiner), Rückmeldung als grüne Pille darüber. */
.server-address-copy { position: relative; display: inline-flex; align-items: center; gap: 8px; }
.color-icon-button.server-copy-button { width: 28px; height: 28px; border-radius: var(--radius-box); }
.color-icon-button.server-copy-button svg { width: 15px; height: 15px; }
.server-address-copy::after { content: "✓ kopiert"; position: absolute; right: 0; bottom: calc(100% + 4px); padding: 3px 8px; border-radius: var(--radius-pill); background: var(--green-surface); color: var(--green); font-size: .72rem; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s ease; }
.server-address-copy.is-copied::after { opacity: 1; }

/* Variante 5: Zeilen zum Aufklappen (<details>), Details mit Kartenbild, Fakten und Aktionen. */
.server-expand-list { --server-expand-columns: 32px minmax(0, 1.6fr) minmax(0, 1fr) 96px 170px 16px; }
.server-expand-head,
.server-expand-line { display: grid; grid-template-columns: var(--server-expand-columns); gap: 14px; align-items: center; }
.server-expand-head { padding: 10px 12px; border-bottom: 1px solid var(--border-divider); color: var(--yellow); font-size: .84rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.server-expand { border-bottom: 1px solid var(--border-divider); }
.server-expand-line { padding: 9px 12px; cursor: pointer; list-style: none; transition: background-color .15s ease; }
.server-expand-line::-webkit-details-marker { display: none; }
.server-expand-line:hover,
.server-expand[open] > .server-expand-line { background: var(--surface); }
.server-expand-line:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
.server-expand-chevron::before { content: ""; display: block; width: 8px; height: 8px; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: translateY(-2px) rotate(45deg); transition: transform .15s ease; }
.server-expand[open] .server-expand-chevron::before { transform: translateY(2px) rotate(-135deg); }
.server-expand-panel { display: grid; grid-template-columns: 176px minmax(0, 1fr) auto; gap: 20px; align-items: start; padding: 6px 12px 16px 58px; background: var(--surface); }
.server-expand-media { width: 176px; height: 99px; border: 1px solid var(--border-strong); border-radius: var(--radius-small); }
.server-expand-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px 16px; align-items: center; margin: 0; font-size: .88rem; }
.server-expand-facts dt { color: var(--text-muted); }
.server-expand-facts dd { margin: 0; color: var(--text-soft); }
.server-expand-actions { display: grid; justify-items: end; gap: 12px; }
.server-os-label { display: inline-flex; align-items: center; gap: 6px; }
/* Admin-Serverliste: Zeilen zum Aufklappen (app.js, data-expand), Details wie Variante 5 der öffentlichen Übersicht. */
.server-row-expandable { cursor: pointer; }
.server-row-expandable:hover > td,
.server-row-expandable.is-expanded > td { background: var(--surface); }
.server-row-expandable.is-expanded > td { border-bottom-color: transparent; }
.server-details-row > td { padding: 0; }
/* Kartenbild bündig mit dem Spiel-Icon (Zellenabstand der Tabelle), die Angaben rücken mit. */
/* Bildspalte breiter als das Kartenbild (176 px): Platz für lange Mapnamen darunter. */
.server-details-row .server-expand-panel { grid-template-columns: 240px minmax(0, 1fr); padding-left: 10px; }
/* Angaben, Adresse und Buttons in einem Raster: Die Adresse belegt oben die Spalten 3-4, die Buttons darunter nur Spalte 4.
   So läuft die zweite Angabe bis an den Button, alle weiteren über die volle Breite -- der Servername steht darum ganz
   unten. Das dl ist display: contents, damit dt/dd direkt im Raster liegen. */
/* Gleichmäßige Zeilen: jede mindestens so hoch wie der Kopier-Button (28 px). */
.server-expand-info { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-auto-rows: minmax(28px, auto); gap: 7px 16px; align-items: center; font-size: .88rem; }
.server-expand-info > .server-expand-facts { display: contents; }
.server-expand-info dt { grid-column: 1; }
.server-expand-info dd { grid-column: 2 / -1; overflow-wrap: anywhere; }
.server-expand-info dd:first-of-type { grid-column: 2; }
.server-expand-info dd:nth-of-type(2) { grid-column: 2 / 4; }
.server-expand-info > .server-address-copy { grid-row: 1; grid-column: 3 / 5; justify-self: end; }
/* Konsole und Verbinden nebeneinander; die Buttons (in der Tabelle ca. 31 px hoch) ragen mit negativem Rand leicht in die
   Zeilenabstände, statt ihre Zeile höher zu machen. */
.server-expand-info > .server-expand-buttons { display: flex; grid-row: 2; grid-column: 4; justify-self: end; gap: 8px; margin-block: -4px; }
/* Icons in den Textbuttons (Konsole, Verbinden mit Tabler "plug") 16 px statt der 20 px für Tabellen-Icons -- so bleiben
   die Buttons so flach wie ohne Icon. */
.server-expand-info .server-expand-buttons svg { width: 16px; height: 16px; }
/* Kartenbild mittig in seiner Spalte, der Mapname zentriert darunter über die ganze Spaltenbreite; sehr lange Namen werden
   gekürzt (voller Name im Tooltip). Das Bild hat das Format der Kartenbilder (4:3), damit nichts abgeschnitten wird, und ist
   mit der Unterschrift so hoch wie die vier Zeilen daneben (4 x 28 px + 3 x 7 px Abstand). */
.server-expand-map { display: grid; justify-items: center; gap: 6px; min-width: 0; margin: 0; }
.server-expand-map .server-expand-media { width: 148px; height: 111px; }
.server-expand-map figcaption { max-width: 100%; overflow: hidden; color: var(--text-soft); font-size: .82rem; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.server-expand-map figcaption small { color: var(--text-dim); }
.technical-action-details svg { transition: transform .15s ease; }
.technical-action-details[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Variante 3: Banner mit auslaufendem Kartenbild rechts und Statusfarbe am linken Rand. */
.server-banners { display: grid; gap: 10px; }
.server-banner { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) 110px auto; gap: 18px; align-items: center; min-height: 104px; padding: 14px 18px; overflow: hidden; border: 1px solid var(--border); border-left: 3px solid var(--text-disabled); border-radius: var(--radius-panel); background: var(--bg); transition: border-color .15s ease; }
.server-banner.server-state-online { border-left-color: var(--green); }
.server-banner.server-state-offline { border-left-color: var(--red); }
.server-banner:hover { border-top-color: var(--border-blue-hover); border-right-color: var(--border-blue-hover); border-bottom-color: var(--border-blue-hover); }
.server-banner > :not(.server-banner-media) { position: relative; }
.server-banner-media { position: absolute; inset: 0 0 0 auto; width: 58%; background: none; opacity: .4; transition: opacity .15s ease; -webkit-mask-image: linear-gradient(to right, transparent, #000 75%); mask-image: linear-gradient(to right, transparent, #000 75%); }
.server-banner:hover .server-banner-media { opacity: .55; }
.server-banner-media.server-media-icon > img,
.server-banner-media.server-media-placeholder > img { object-position: 80% center; }
.server-banner-game { width: 44px; height: 44px; object-fit: contain; }
.server-banner-main { display: grid; gap: 7px; min-width: 0; }
.server-banner-name { margin: 0; color: var(--text-bright); font-size: 1.2rem; line-height: 1.2; overflow-wrap: anywhere; }
.server-banner-meta { display: flex; flex-wrap: wrap; gap: 2px 8px; min-width: 0; color: var(--text-muted); font-size: .85rem; }
.server-banner-meta > span + span::before { content: "·"; margin-right: 8px; color: var(--text-disabled); }
.server-banner-players { display: grid; gap: 4px; justify-items: center; text-align: center; }
.server-banner-players strong { color: var(--text-dim); font-size: 1.6rem; line-height: 1; white-space: nowrap; }
.server-state-online .server-banner-players strong { color: var(--green); }
.server-banner-players small { color: var(--text-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.server-banner-players .server-player-bar { margin-top: 4px; }
.server-banner-actions { display: grid; gap: 8px; }
.server-banner-actions button { width: 100%; }

/* Variante 4: Mini-Liste, Fläche und Aufbau wie die Startseiten-Kacheln (.home-tile). */
.server-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 10px; }
.server-chip { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; min-height: 58px; padding: 9px 12px 9px 9px; border-radius: var(--radius-tile); background: var(--surface-tile); }
.server-chip img { grid-row: 1 / span 2; width: 30px; height: 30px; object-fit: contain; }
.server-chip strong { overflow: hidden; color: var(--text); font-size: .88rem; text-overflow: ellipsis; white-space: nowrap; }
.server-chip small { overflow: hidden; color: var(--text-subtle); font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.server-chip-players { display: flex; grid-row: 1 / span 2; grid-column: 3; align-items: center; gap: 7px; color: var(--text-dim); font-size: .85rem; font-weight: 700; white-space: nowrap; }
.server-state-online .server-chip-players { color: var(--green); }

@media (max-width: 700px) {
    .server-banner { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; }
    .server-banner-game { width: 40px; height: 40px; }
    .server-banner-name { font-size: 1.05rem; }
    .server-banner-media { width: 100%; opacity: .2; }
    .server-banner-players strong { font-size: 1.2rem; }
    .server-banner-actions { display: flex; grid-column: 1 / -1; flex-wrap: wrap; }
    .server-expand-list { --server-expand-columns: 32px minmax(0, 1fr) auto 16px; }
    .server-expand-head,
    .server-expand-line > :is(.server-browser-map, .server-overview-address) { display: none; }
    .server-expand-panel { grid-template-columns: 1fr; padding-left: 12px; }
    .server-expand-actions { justify-items: start; }
    .server-details-row .server-expand-panel { grid-template-columns: 1fr; }
    .server-expand-info { grid-template-columns: auto minmax(0, 1fr); }
    .server-expand-info dd:is(:first-of-type, :nth-of-type(2)) { grid-column: 2 / -1; }
    .server-expand-info > :is(.server-address-copy, .server-expand-buttons) { grid-row: auto; grid-column: 1 / -1; justify-self: start; margin-block: 0; }
}
.server-game-icon { display: block; width: auto; height: 24px; max-width: none; object-fit: contain; }
.server-game-icon[src$=".svg"] { height: 32px; }
.server-game-icon[src$=".png"]:not([src*="_24x24.png"]) { height: 32px; }
.server-password-icon { display: inline-block; width: 16px; height: 16px; margin-left: 5px; vertical-align: middle; }
.password-field { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: stretch; }
.settings-inline-fields label .hint { display: block; }
/* Discord-Server mit Footer-Startjahr und Datumsformat mit Standardsprache: hintere Beschriftung und hinteres Feld sind in
   beiden Zeilen gleich breit, damit Discord-Feld und Datumsformat gleich breit sind. Das Startjahr per ID, weil
   "form input:not(...)" (Formularfelder allgemein) sonst mit höherer Spezifität 100 % Breite setzt. */
.settings-pair > label { flex: 0 0 9em; white-space: nowrap; }
.settings-pair > :first-child { flex: 1 1 180px; min-width: 0; }
.settings-pair > select:last-child,
#footer-start-year { flex: 0 0 8.5rem; width: 8.5rem; }
/* Aufbewahrung des Spielerverlaufs (Stunden): kurzes Feld, per ID aus demselben Grund wie das Footer-Startjahr. */
#playercounter-retention { width: 8.5rem; justify-self: start; }

.admin-layout { grid-template-columns: 190px minmax(0, 1fr); gap: 20px; display: block; }
.admin-content { margin: 0; max-width: none; }
.admin-page-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.admin-page-heading h1 { margin-top: 0; }
/* Icon-Button direkt hinter der Überschrift (Serverformular: Lupe "Serverdetails öffnen"), senkrecht mittig. Die Überschrift
   bleibt ein normaler Block -- als Flexbox würde das vorangestellte "#" (::before) ein eigenes Element mit Abstand. Die
   negativen Ränder oben/unten halten die Zeile so hoch wie ohne Button. */
.admin-page-heading h1 .form-icon-button { margin: -4px 0 -4px 14px; vertical-align: middle; }
/* Serverauswahl im Formular "Server bearbeiten" direkt rechts neben der Überschrift (mit Lupe) statt ganz rechts. Die
   Überschrift schrumpft nie (sonst bricht sie um), die Auswahl dafür schon; oben ausgerichtet und leicht angehoben, damit
   sie mittig zur Lupe steht (die Überschrift hat unten Abstand). */
.admin-page-heading:has(.server-edit-switch) { align-items: flex-start; justify-content: flex-start; gap: 14px; }
.admin-page-heading:has(.server-edit-switch) h1 { flex: none; }
.server-edit-switch { flex: 0 1 auto; margin: -4px 0 0; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; }
.admin-table { width: 100%; border-collapse: collapse; margin: 18px 0; }
.admin-table th, .admin-table td { padding: 10px; text-align: left; border-bottom: 1px solid var(--border-pale); }

.ui-demo > h3 { margin: 28px 0 12px; }
.ui-demo-heading h2 { margin: 0; }
.demo-badge { display: inline-flex; width: fit-content; padding: 3px 8px; border-radius: var(--radius-pill); font-size: .78rem; font-weight: 700; }
.demo-positive { color: var(--positive-text); }
.demo-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.demo-stat-card { display: grid; gap: 4px; }
.demo-buttons button:disabled { opacity: .55; cursor: not-allowed; }
.table-scroll { overflow-x: auto; }

@media (max-width: 700px) {
    .demo-cards { grid-template-columns: 1fr; }
}
/* Einheitliche Unterseiten der Benutzer- und Gruppenverwaltung: volle Kartenbreite wie Mein Bereich und Settings. */
.admin-edit-page { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-pale); }
.admin-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-actions form { display: contents; }
@media (max-width: 700px) { .admin-layout { grid-template-columns: 1fr; } }

/* In Zeilen mit Beschriftung links sitzt der Abstand in der Zeile, nicht unter dem Feld. */
.settings-row :is(input, select, textarea) {
    margin: 0;
}
.settings-panels .form-actions { justify-content: flex-start; }
.settings-row label[for="setting-smtp_encryption"] { white-space: pre-line; }

@media (max-width: 600px) {
    .settings-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .settings-inline-fields { grid-template-columns: 1fr; gap: var(--field-row-gap); }
    .server-address-port-row { grid-template-columns: 1fr; }
    .server-address-port-fields { grid-template-columns: 1fr; }
    .server-address-port-separator { display: none; }
    .server-name-fields { grid-template-columns: 1fr; }
    .server-rcon-type-fields { grid-template-columns: 1fr; }
    .server-admin-management-fields { grid-template-columns: 1fr; }

    .settings-inline-fields .settings-row:first-child select { margin-left: 0; width: 100%; }

    .settings-panels :is(input, select, textarea) {
        width: 100%;
        margin-left: 0;
    }

    .contact-details-row {
        grid-template-columns: 1fr;
    }

    .profile-birthdate-row {
        align-items: stretch;
        flex-direction: column;
        gap: 0;
    }

    .profile-show-age {
        padding-bottom: 0;
    }
}

.footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.footer-inner p { margin: 0; }

.footer-links {
    display: flex;
    gap: 8px;
}

/* Kompaktes, technisches Layout ohne externe Abhaengigkeiten: Grundfarbe und Schrift (lokal, ohne Webfont-Download). */
:root {
    color: var(--text-base);
    font-family: var(--font-main);
}
/* Überschriften in eigener Schrift, soweit das Theme eine setzt (CoolBlue: dieselbe wie der Text). */
h1, h2, h3 { font-family: var(--font-heading); }

a { color: var(--link); }

.site-header {
    padding: 20px 0;
}

.navigation {
    border-bottom-color: var(--border-blue);
}

.navigation a { text-decoration: none; font-weight: 600; color: var(--text-nav-link); }
.navigation a:hover,

.form-hint,
.hint { color: var(--text-hint); }

input,
select,
textarea {
    color: var(--text-bright);
    background: var(--surface-sunken);
    border-color: var(--border-blue-soft);
}

input:focus,
select:focus,
textarea:focus {
    outline: 2px solid var(--orange);
    outline-offset: 1px;
    border-color: var(--orange);
}

.error { background: var(--error-surface); color: var(--error-text); }
.success { background: var(--teal-surface); color: var(--success-text); }
.warning,
.debug { background: var(--warning-surface); color: var(--warning-text); }

.admin-table th,
.admin-table td { border-bottom-color: var(--border-divider); }
.admin-table th {
    font-size: .84rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.demo-stat-card {
    border-color: var(--border-blue);
}
.site-footer { margin-top: 40px; padding: 24px 0; color: var(--text-footer); }

/* Markenbereich der Startseite */
.site-branding {
    align-items: center;
    justify-content: center;
    min-height: 154px;
}

.site-logo-link {
    display: inline-flex;
    flex: 0 0 auto;
    line-height: 0;
    flex-shrink: 0;
}

.site-logo {
    display: block;
    object-fit: contain;
    width: 154px;
    height: 154px;
    aspect-ratio: 1 / 1;
}

.site-logo-link:focus-visible,
.logo-gradient:focus-visible {
    outline: 2px solid var(--link);
    outline-offset: 5px;
    border-radius: var(--radius-small);
}

@media (max-width: 520px) {
    .site-branding {
        min-height: 116px;
        gap: 14px;
    }

}

.site-header {
    border-bottom-color: var(--border-header);
}

.site-title-group {
    display: grid;
    gap: 9px;
    transform: translateY(-13px);
    flex-shrink: 0;
}

@media (max-width: 520px) {
    .site-title-group { gap: 5px; transform: translateY(-7px); }
}

.site-tagline {
    margin: 0;
    color: var(--text-nav);
    line-height: 1.25;
    letter-spacing: .015em;
    max-width: none;
    white-space: nowrap;
    transform: none;
    /* Header: Markenbereich und Profil-Link. */
    font-size: 1rem;
    text-align: center;
}

@media (max-width: 520px) {
    .site-tagline {
        max-width: 22ch;
        white-space: normal;
    }
}

@media (max-width: 520px) {
    .site-logo {
        width: 98px;
        height: 98px;
    }
}

.logo-gradient {
    font-size: clamp(2.6rem, 8vw, 5.4rem);
    text-decoration: none;
    background: var(--logo-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Der Markenname ist bewusst rund und breit; die Begleittexte bleiben Monospace. */
    font-family: var(--font-logo);
    font-weight: 800;
    letter-spacing: -.055em;
    display: block;
    overflow: visible;
    line-height: 1.1;
    padding-bottom: .18em;
    paint-order: stroke fill;
    -webkit-text-stroke: initial;
    text-shadow: none;
}

/* Neutrale Blau-Grau-Flaechen wie in der Referenz. */

.card,
.demo-stat-card {
    border: 0;
}

.navigation {
    border-bottom: 0;
}

/* Startseite: breite Aktions- und Informationsfenster. */
.home-overview {
    display: grid;
    width: min(var(--window-width), 100%);
    max-width: var(--window-width);
    gap: 16px;
    margin: 50px auto 0;
}

.home-action-card,
.home-info-card {
    border: 0;
}

.home-action-card {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) minmax(140px, .82fr);
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 12px 14px;
}

.home-action-icon {
    display: block;
    width: 25px;
    height: 25px;
}

.home-action-card h1,
.home-info-card h2 {
    margin: 0;
    color: var(--text);
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.15;
}

.home-action-card p {
    margin: 0;
    color: var(--text-subtle);
    font-size: .67rem;
    line-height: 1.25;
}

.home-info-card {
    padding: 15px 10px 16px;
}

.home-info-card h2 {
    margin-bottom: 14px;
}

.home-section-marker {
    color: var(--yellow);
    font-size: .95em;
}

.home-info-card p {
    margin: 0 0 12px;
    color: var(--text-soft);
    font-size: .72rem;
    line-height: 1.38;
}

.home-info-card p:last-child { margin-bottom: 0; }

@media (max-width: 520px) {
    .home-overview { margin-top: 28px; }
    .home-action-card {
        grid-template-columns: 28px minmax(0, 1fr);
    }
    .home-action-card p { grid-column: 2; }
}

/* Grosses "Über"-Fenster nach dem Referenzaufbau. */
.home-about-card {
    padding: 22px;
}

.home-about-card h2 {
    margin-bottom: 24px;
    font-size: 1.7rem;
}

.home-about-card .home-section-marker {
    color: var(--yellow);
}

.home-about-intro,
.home-about-card p {
    color: var(--text);
    line-height: 1.35;
}

.home-about-intro {
    margin-bottom: 28px !important;
}

.home-about-item {
    display: grid;
    grid-template-columns: 145px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    margin: 0 0 28px;
}

.home-about-item img {
    width: 78px;
    height: 78px;
    justify-self: center;
}

.home-about-item h3 {
    margin: 0 0 2px;
    color: var(--yellow);
    line-height: 1.2;
}

.home-about-item p {
    margin: 0;
}

.home-about-outro {
    margin: 4px 0 0 !important;
}

@media (max-width: 520px) {
    .home-about-card { padding: 18px 14px; }
    .home-about-card h2 { font-size: 1.3rem; }
    .home-about-item {
        grid-template-columns: 54px minmax(0, 1fr);
        gap: 12px;
    }
    .home-about-item img {
        width: 46px;
        height: 46px;
    }
}

/* Viertes Startseitenfenster im Aufbau des Viewer-Bereichs. */
.home-viewer-card {
    padding: 20px 10px 14px;
}

.home-viewer-card h2 {
    margin-bottom: 17px;
    font-size: 1.18rem;
}

.home-viewer-card p,
.home-viewer-card ol {
    color: var(--text);
    line-height: 1.35;
}

.home-viewer-card p { margin: 0 0 10px; }
.home-viewer-card ol { margin: 0 0 12px; padding-left: 22px; }

.home-viewer-placeholder {
    display: grid;
    min-height: 65px;
    padding: 12px;
    place-items: center;
    border: 1px dashed var(--border-placeholder);
    color: var(--text-placeholder);
    font-size: .75rem;
    text-align: center;
}

.home-viewer-note {
    margin: 11px 0 0 !important;
    color: var(--text-muted) !important;
    font-size: 1rem !important;
}

/* Wiederverwendbare Startseiten-Bausteine. */
.home-components-card,
.home-changes-card,
.home-links-card {
    padding: 20px 10px 16px;
}

.home-components-card h2,
.home-changes-card h2,
.home-links-card h2 {
    margin-bottom: 14px;
    font-size: 1.18rem;
}

.home-components-card > p,
.home-components-note {
    color: var(--text-soft);
    line-height: 1.35;
}

.home-components-card > p { margin: 0 0 14px; }
.home-components-note { margin: 14px 0 0 !important; color: var(--text-note) !important; }

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

.home-tile {
    display: grid;
    grid-template-columns: 35px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 8px;
    align-items: center;
    min-height: 58px;
    padding: 9px;
    background: var(--surface-tile);
    border-radius: var(--radius-tile);
}

.home-tile img {
    grid-row: 1 / span 2;
    width: 30px;
    height: 30px;
}

.home-tile strong { color: var(--text); }
.home-tile small { color: var(--text-subtle); }

.home-changes-table {
    width: 100%;
    border-collapse: collapse;
    color: var(--text-soft);
    font-size: .78rem;
}

.home-changes-table td {
    padding: 5px 0;
    border-bottom: 1px solid var(--border-strong);
}

.home-changes-table td:first-child { width: 27%; color: var(--red-light); }
.home-changes-table td:last-child { width: 18%; color: var(--text-muted); text-align: right; }

.home-link-columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.home-link-columns h3 {
    margin: 0 0 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-strong);
    color: var(--text);
}

.home-link-columns ul {
    margin: 0;
    padding-left: 17px;
    color: var(--red-light);
    line-height: 1.55;
}

@media (max-width: 520px) {
    .home-tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-link-columns { grid-template-columns: 1fr; gap: 16px; }
}

/* Linke Hauptnavigation im Stil der Download- und Dokumentationskarten. */
.site-shell {
    display: grid;
    align-items: start;
    gap: 42px;
    padding-top: 36px;
    /* Rechte Kacheln für Community-Informationen. */
    width: min(1680px, calc(100% - 32px));
    /* Die Mitte ist höchstens so breit wie die Fenster und schrumpft, wenn neben den Seitenleisten weniger Platz ist. */
    grid-template-columns: 220px minmax(0, var(--window-width)) 220px;
    justify-content: center;
}

.site-main {
    min-width: 0;
    width: 100%;
    max-width: var(--window-width);
    margin-inline: auto;
    padding-bottom: 40px;
}

.navigation {
    display: grid;
    gap: 9px;
    position: sticky;
    top: 18px;
    padding: 0;
    background: transparent;
}

.navigation-links {
    display: grid;
    border-radius: var(--radius-tile);
    /* Jeder Navigationspunkt erhaelt eine eigene Karte. */
    gap: 9px;
    margin-top: 0;
    padding: 0;
    background: transparent;
}

.navigation-links a:hover {
    color: var(--white);
    background: var(--surface-hover);
}

@media (max-width: 760px) {
    .site-shell {
        gap: 20px;
        padding-top: 20px;
    }

    .navigation {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .navigation-links {
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.navigation-links a {
    align-items: center;
    margin: 0;
    text-decoration: none;
    font-size: .76rem;
    font-weight: 600;
    min-height: 50px;
    padding: 10px 12px;
    color: var(--text);
    display: grid;
    grid-template-columns: 29px minmax(0, 1fr);
    gap: 10px;
    background: var(--surface);
}

.navigation-menu-icon {
    width: 25px;
    height: 25px;
    object-fit: contain;
}

.navigation-entry-text {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.navigation-entry-text strong { font-size: .88rem; }
.navigation-entry-text small { color: var(--text-nav); font-size: .83rem; font-weight: 600; }

.navigation-links a:hover .navigation-entry-text small { color: var(--text-nav); }

.admin-template-cards {
    display: grid;
    gap: 10px;
    max-width: 540px;
    margin: 22px 0 8px;
}

.admin-template-cards .home-action-card h2 {
    margin: 0;
    color: var(--text);
    font-size: 1.08rem;
}

.home-overview {
    margin-top: 0;
}

/* Finale Farbpalette */
:root,
body {
    background: var(--bg);
}

.site-header {
    background: var(--surface-header);
}

.demo-stat-card,
.home-action-card,
.home-info-card {
    background: var(--surface-card);
}

/* Hauptfenster: dunkler als die Kacheln darin. */
.card {
    background: var(--surface-window);
}

.site-header {
    border-bottom: 0;
}

/* Profil-Kachel im Header. */
.site-branding { position: relative; }

.header-profile-tile {
    display: grid;
    align-items: center;
    top: 14px;
    right: 0;
    color: var(--text);
    text-decoration: none;
}

.header-profile-tile > span:last-child {
    display: grid;
    gap: 2px;
}

.header-profile-tile:hover { color: var(--white); background: transparent; }

@media (max-width: 760px) {
    .header-profile-tile {
        position: static;
        margin-left: auto;
        grid-column: 1;
        justify-self: center;
        margin: 0 0 12px;
    }
}

/* Markenbereich und Profil liegen gemeinsam im Header-Rahmen. */
.site-branding {
    display: grid;
    gap: 0;
}

.site-brand-main {
    display: flex;
    grid-column: 2;
    align-items: center;
    gap: 22px;
}

.header-profile-tile {
    position: static;
}

@media (max-width: 850px) {
    .site-branding {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .site-brand-main { grid-column: 1; }
    .header-profile-tile {
        grid-column: 1;
        justify-self: center;
        margin: 0 0 12px;
    }
}

/* Doppelte Profil-Kachel mit eigenem Abstand zum Markenschriftzug. */

@media (max-width: 1000px) {
    .site-branding {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .site-brand-main { grid-column: 1; }
    .header-profile-tile {
        grid-column: 1;
        justify-self: center;
        margin: 0 0 12px;
    }
}

/* Profil-Kachel: 25 % kleiner als die vorherige doppelte Variante. */

.header-profile-tile strong { font-size: 1.17rem; }
.header-profile-tile small { color: var(--text-muted); font-size: .89rem; }

@media (max-width: 920px) {
    .site-branding {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .site-brand-main { grid-column: 1; }
    .header-profile-tile {
        grid-column: 1;
        justify-self: center;
        margin: 0 0 12px;
    }
}

.site-title-group,
.logo-gradient {
    white-space: nowrap;
}

/* Der Markenbereich bleibt unabhängig von der Profil-Kachel mittig. */
.site-header .container {
    width: min(1400px, calc(100% - 32px));
}

.site-branding {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.header-profile-tile {
    grid-column: 3;
    justify-self: end;
}

@media (max-width: 1260px) {
    .site-branding {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .site-brand-main { grid-column: 1; }
    .header-profile-tile {
        grid-column: 1;
        justify-self: center;
        margin: 0 0 12px;
    }
}

.card,
.demo-stat-card,
.home-action-card,
.home-info-card,
.navigation-links a,
.header-profile-tile {
    border-radius: var(--radius-window);
}

/* Kompakter Profil-Link statt einer eigenen Header-Kachel. */
.header-profile-tile {
    padding: 0;
    background: transparent;
    border-radius: 0;
}

.header-profile-tile {
    align-self: center;
}

.header-profile-text {
    display: grid;
    gap: 2px;
}

.header-profile-text strong {
    color: var(--text);
    font-size: 1.13rem;
}

.header-profile-text small {
    color: var(--text-muted);
    font-size: .78rem;
}

.header-profile-tile:hover .header-profile-text strong { color: var(--white); }

/* Profilbereich 25 % groesser. */
.header-profile-tile {
    gap: 11px;
}

/* Gemeinsame Administrations-Kachel in der linken Hauptnavigation. */
.navigation-admin-card {
    display: grid;
    gap: 10px;
    padding: 12px;
    background: var(--surface);
    border-radius: var(--radius-window);
}

.navigation-admin-card h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--text);
    font-size: .88rem;
}

.navigation-admin-card h2 :is(img, .theme-icon) {
    width: 25px;
    height: 25px;
}

/* Menü-Icons in der Farbe des Themes: die SVG-Datei gibt nur die Form vor (Maske), die Farbe kommt aus den Variablen. */
.theme-icon {
    display: inline-block;
    flex: none;
    background-color: currentColor;
    -webkit-mask: center / contain no-repeat;
    mask: center / contain no-repeat;
}
.theme-icon-home { -webkit-mask-image: url(../images/icon-home.svg); mask-image: url(../images/icon-home.svg); background-color: var(--yellow); }
.theme-icon-login { -webkit-mask-image: url(../images/icon-login.svg); mask-image: url(../images/icon-login.svg); background-color: var(--green); }
.theme-icon-settings { -webkit-mask-image: url(../images/icon-settings.svg); mask-image: url(../images/icon-settings.svg); background-color: var(--green); }
.theme-icon-server { -webkit-mask-image: url(../images/icon-server.svg); mask-image: url(../images/icon-server.svg); background-color: var(--blue); }
.theme-icon-admin { -webkit-mask-image: url(../images/icon-admin.svg); mask-image: url(../images/icon-admin.svg); background-color: var(--violet); }
.theme-icon-about { -webkit-mask-image: url(../images/icon-about.svg); mask-image: url(../images/icon-about.svg); background-color: var(--red); }
.theme-icon-about-member { background-color: var(--cyan); }
.theme-icon-logout { -webkit-mask-image: url(../images/icon-logout.svg); mask-image: url(../images/icon-logout.svg); background-color: var(--red); }

.navigation-admin-card > div {
    display: grid;
    gap: 2px;
}

.navigation-admin-card a {
    padding: 7px 8px;
    border-radius: var(--radius-tile);
    color: var(--text-nav);
    font-weight: 600;
    text-decoration: none;
}

.navigation-admin-card a:hover {
    background: var(--surface-hover);
    color: var(--white);
}

.admin-shell-content { min-width: 0; }

/* Logout bildet immer den letzten Eintrag der linken Navigation. Er ist ein geschütztes POST-Formular, sieht im Menü aber aus wie die anderen Einträge. */
.navigation-logout-form {
    grid-column: 1 / -1;
    margin: 0;
}

button.navigation-logout {
    display: grid;
    grid-template-columns: 29px minmax(0, 1fr);
    width: 100%;
    gap: 10px;
    min-height: 50px;
    padding: 10px 12px;
    border: 0;
    border-radius: var(--radius-window);
    background: var(--surface);
    color: var(--text);
    text-align: left;
}

/* Hover wie bei den Menülinks: weißer Text; die Fläche kommt aus der globalen Button-Hover-Regel. */
button.navigation-logout:hover { color: var(--white); }
button.navigation-logout:hover .navigation-entry-text small { color: var(--text-nav); }
/* Zweite Kachelgruppe unten (About über Logout): auf dem Handy einspaltig und so breit wie Logout. */
@media (max-width: 760px) {
    .navigation-links-bottom { grid-template-columns: 1fr; }
}

.navigation-admin-card { grid-column: 1 / -1; }

.navigation-admin-card a {
    font-size: .83rem;
}

.home-about-item h3 {
    font-size: 1.12rem;
}

/* Einheitlich besser lesbare Texte in den weiteren Inhaltsfenstern. */

.home-tile strong { font-size: .9rem; }
.home-tile small { font-size: .68rem; }
.home-link-columns h3 { font-size: .9rem; }
.home-link-columns ul { font-size: .78rem; }

.ui-demo { padding-top: 24px; border-top: 1px solid var(--border-pale); font-size: .9rem; /* Eigenstaendige, technische Gestaltung der Dashboard-Komponenten-Demo. */ margin-top: 34px; padding: 24px 0 0; border-top-color: var(--border-strong); }

.ui-demo-heading {
    display: flex;
    gap: 10px;
    align-items: baseline;
}

.ui-demo-heading h2,
.ui-demo > h3 {
    color: var(--text);
    font-weight: 700;
}

.ui-demo-heading h2::before,
.ui-demo > h3::before {
    content: '#';
    margin-right: 9px;
    color: var(--yellow);
}

.ui-demo-heading h2 { font-size: 1.35rem; }
/* Nur die Abschnittsüberschriften der Demo, nicht die h3 in eingebetteten Kopien (About-Seite). */
.ui-demo > h3 { margin-top: 32px; font-size: 1rem; }
/* Kopie der About-Seite in der Demo: so breit wie das Admin-Fenster statt der festen Fensterbreite der echten Seite. */
.demo-about-preview .home-overview { width: auto; max-width: none; margin: 0; }

.demo-badge {
    padding: 2px 7px;
    border: 1px solid var(--border-badge);
    background: transparent;
    border-radius: var(--radius-tile);
    color: var(--text-muted);
    font-size: .66rem;
}

.demo-stat-card {
    padding: 15px;
    background: var(--surface);
    border: 0;
    border-radius: var(--radius-window);
}
.demo-stat-card span,
.demo-stat-card small { color: var(--text-muted); }
.demo-stat-card strong { color: var(--yellow); font-size: 1.65rem; }

.demo-buttons { display: flex; flex-wrap: wrap; gap: 8px; }

.component-panel,
.card.component-panel {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-panel);
    background: var(--bg);
}

.settings-panels {
    display: grid;
    gap: 16px;
}

.settings-panels > h2 {
    margin: 28px 0 0;
}

.settings-panels > h1 {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-pale);
}

.settings-panels > .component-panel > p {
    font-size: .9em;
}

.component-panel h4 {
    margin: 0;
    color: var(--text);
    font-size: .9rem;
}

.component-panel h2 {
    margin: 20px 0 10px;
    color: var(--text);
    font-size: 1.1rem;
}

.component-panel h2:first-child {
    margin-top: 0;
}

.component-panel > .settings-form:first-child {
    margin-top: 0;
}

.component-panel h2::before {
    content: none;
}

.component-panel > p {
    margin: 0;
    color: var(--text-dim);
    font-size: .76rem;
    line-height: 1.35;
}

.component-panel-buttons {
    border: 1px solid var(--border-strong);
}

.component-panel-buttons h4 {
    font-size: .92rem;
}

.component-panel-buttons p {
    margin: 5px 0 12px;
    color: var(--text-muted);
    font-size: .78rem;
}

.admin-edit-page h2 {
    margin-top: 0;
}

/* Konsolidierte Layout-Ergänzungen. */
.home-about-intro,
.home-about-card p,
.home-about-item p,
.home-viewer-card p,
.home-viewer-card ol,
.home-components-card > p,
.home-components-note,
.admin-content > p,
.admin-template-cards .home-action-card p,
.ui-demo > p {
    font-size: 1rem;
}

/* Einheitliche Überschriften in allen Inhaltsfenstern. */
.site-main h1::before,
.site-main h2::before,
.site-main h3::before {
    content: '#';
    display: inline-block;
    margin-right: .25em;
    color: var(--yellow);
}

/* Die Startseite enthält das Zeichen bereits im HTML. */
.site-main .home-info-card h2::before {
    content: none;
    margin-right: 0;
}

.site-main .home-section-marker {
    font-size: 1em;
}

/* Einheitliche Innenabstände und Fensterbreiten. */
.card {
    max-width: 900px;
    padding-top: 28px;
}

/* Allgemeine Fenster 20 % breiter; Login-/Authentifizierungsfenster bleiben kompakt. */
.card:not(.login-card) {
    width: min(var(--window-width), 100%);
    max-width: var(--window-width);
}

.login-card {
    width: min(675px, 100%);
    max-width: 675px;
}

/* Registrierung: Benutzername und Sprache im Verhältnis 2:1, schmal untereinander. */
.register-name-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 0 var(--form-columns-gap); }
.register-password-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--form-columns-gap); }
.register-name-row > div,
.register-password-row > div { display: grid; align-content: start; gap: var(--field-gap); min-width: 0; }
.register-verification-row { display: grid; grid-template-columns: minmax(0, calc((100% - var(--form-columns-gap)) / 2)) minmax(0, 1fr) 42px; column-gap: var(--form-columns-gap); margin-bottom: var(--field-space); }
.register-verification-row > input { min-width: 0; margin-bottom: 0; }
.register-verification-row > .fun_img { max-width: 100%; }
@media (max-width: 600px) {
    .register-name-row,
    .register-password-row { grid-template-columns: 1fr; row-gap: 10px; }
    .register-verification-row { grid-template-columns: minmax(0, 1fr) 42px; }
    .register-verification-row > input { grid-column: 1 / -1; }
}

/* Kontaktformular so breit wie der Schriftzug mit beiden Logos im Header (von Logo zu Logo); die Breiten folgen den
   Logo-Größen im Kopfbereich (154 px, unter 1541 px 90 px, 1321-1420 px 64 px). */
.login-card.contact-card { width: min(997px, 100%); max-width: 997px; }
@media (max-width: 1540px) { .login-card.contact-card { width: min(853px, 100%); max-width: 853px; } }
@media (min-width: 1321px) and (max-width: 1420px) { .login-card.contact-card { width: min(789px, 100%); max-width: 789px; } }

.home-info-card,
.home-viewer-card,
.home-components-card,
.home-changes-card,
.home-links-card {
    padding-top: 10px;
}

.home-about-card {
    padding-top: 22px;
}

.site-main .card > h1,
.site-main .card > h2,
.site-main .card > h3 {
    margin-top: 0;
}

@media (max-width: 520px) {
    .home-about-card {
        padding-top: 14px;
    }
}

/* Kontodaten im Profil: zweispaltig, mobil untereinander. */
.profile-account-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--form-columns-gap);
}

/* Einheitlicher Abstand von Feldbeschriftung zu Eingabe im Profil. */
.profile-account-row > div,
.profile-birthdate-field {
    display: grid;
    gap: var(--field-gap);
}

.profile-community-row {
    grid-template-columns: 40fr 60fr;
}

@media (max-width: 600px) {
    .profile-account-row,
    .profile-community-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

.header-actions {
    grid-column: 3;
    display: flex;
    align-items: center;
    justify-self: end;
    gap: 0;
    margin: 0;
}

.site-logo-link-right .site-logo {
    width: 154px;
    height: 154px;
}

.header-profile-tile {
    grid-template-columns: 56px minmax(0, 1fr);
    min-width: 210px;
    margin: 0;
}

.header-profile-tile > img,
.header-profile-tile > .avatar {
    width: 56px;
    height: 56px;
}

.header-profile-text strong,
.header-profile-text small,
.header-profile-username {
    white-space: nowrap;
}

.header-profile-username {
    color: var(--text);
    font-size: 1.13rem;
    font-weight: 700;
    line-height: normal;
}

@media (min-width: 1101px) {
    .site-branding {
        grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
        column-gap: 50px;
        justify-items: stretch;
    }

    .site-brand-main {
        grid-column: 2;
    }
}

@media (min-width: 761px) and (max-width: 1100px) {
    .site-branding {
        grid-template-columns: minmax(0, 1fr) auto 220px;
        justify-items: stretch;
    }

    .site-brand-main {
        grid-column: 2;
        gap: 14px;
    }

    .header-actions {
        grid-column: 3;
        justify-self: end;
    }

    .site-logo,
    .site-logo-link-right .site-logo {
        width: 90px;
        height: 90px;
    }
}

@media (min-width: 900px) and (max-width: 1100px) {
    .site-branding {
        grid-template-columns: minmax(0, 1fr) auto 260px;
    }
}

@media (max-width: 760px) {
    .site-branding {
        flex-wrap: wrap;
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .site-brand-main,
    .header-actions {
        grid-column: 1;
    }

    .header-actions {
        justify-self: center;
        margin: 0 0 12px;
    }
}

@media (max-width: 520px) {
    .header-actions {
        gap: 14px;
    }

    .site-logo-link-right .site-logo {
        width: 98px;
        height: 98px;
    }
}

/* Kopfbereich im selben Raster wie Navigation, Inhalt und rechte Seitenleiste (.site-shell): die rechte Spalte (Profil bzw.
   Sprachauswahl) steht bündig über der rechten Seitenleiste, der Schriftzug steht mittig über dem Inhalt. Ist er
   breiter als die Mitte (1321-1540 px), ragt er gleichmäßig in die Abstände. Darunter stapelt sich der Kopfbereich. */
@media (min-width: 1321px) {
    .site-header .container.site-branding {
        width: min(1680px, calc(100% - 32px));
        grid-template-columns: 220px minmax(0, var(--window-width)) 220px;
        column-gap: 42px;
        justify-content: center;
    }

    .site-header .site-brand-main { justify-self: center; }
    /* Profil bzw. Sprachauswahl beginnen an der linken Kante der rechten Seitenleiste. */
    .site-header .header-actions { justify-self: start; }
}

/* Knapp über 1320 px ist die Mitte schmaler als der Schriftzug: kleinere Logos, damit Platz zu Profil bzw. Sprachauswahl bleibt. */
@media (min-width: 1321px) and (max-width: 1420px) {
    .site-header .site-brand-main { gap: 8px; }

    .site-header .site-logo-link .site-logo {
        width: 64px;
        height: 64px;
    }
}

/* Sprachauswahl im Header für Gäste (an der Stelle des Profils): Flagge und Auswahlliste. */
.lang-switch { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
/* Ausschnitt aus dem Flaggen-Sprite (94×524, Flagge bei 20/20 mit 54×36) wie bei Banliste und Portfolio, hier 30×20. */
.lang-switch-flag { position: relative; display: inline-block; flex: none; width: 30px; height: 20px; overflow: hidden; border-radius: var(--radius-flag); }
.lang-switch-flag img { position: absolute; top: -11.1px; left: -11.1px; width: 52.2px; height: 291.1px; max-width: none; }
.lang-switch select { width: auto; min-height: 0; margin: 0; padding: 6px 10px; font-size: .9rem; cursor: pointer; }

/* Kopfbereich nach gemessenen Breiten (stehen nach den Regeln oben und überschreiben sie):
   Logos 154 px, Schriftzug und Profil nebeneinander brauchen rund 1540 px; darunter kleinere Logos, unter 1321 px steht
   das Profil mittig unter dem Schriftzug, auf schmalen Bildschirmen entfällt das rechte Logo. */
@media (max-width: 1540px) {
    .site-branding { column-gap: 24px; }
    .site-brand-main { gap: 14px; }

    .site-logo,
    .site-logo-link-right .site-logo {
        width: 90px;
        height: 90px;
    }
}

@media (min-width: 1321px) and (max-width: 1540px) {
    .site-branding { grid-template-columns: minmax(210px, 1fr) auto minmax(210px, 1fr); }
}

@media (max-width: 1320px) {
    .site-branding {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .site-brand-main,
    .header-actions { grid-column: 1; }

    .header-actions {
        justify-self: center;
        margin: 0 0 12px;
    }
}

@media (max-width: 640px) {
    .site-logo-link-right { display: none; }

    .site-logo {
        width: 64px;
        height: 64px;
    }
}

.site-right-sidebar {
    grid-column: 3;
    position: sticky;
    top: 18px;
    display: grid;
    gap: 9px;
    align-self: start;
}

.site-right-sidebar :is(dt, dd, li, p) {
    font-size: .83rem;
}

.site-statistics,
.site-side-card {
    position: static;
    padding: 12px;
    background: var(--surface);
    border-radius: var(--radius-window);
    color: var(--text);
}

.site-statistics h2,
.site-side-card h2 {
    margin: 0;
    font-size: .88rem;
}

.site-statistics h2 span,
.site-side-card h2 span {
    margin-right: .25em;
    color: var(--yellow);
}

.site-statistics dl {
    display: grid;
    gap: 7px;
    margin: 12px 0 0;
}

.site-statistics dl > div {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding-top: 7px;
    border-top: 1px solid var(--border-strong);
}

.site-statistics dt,
.site-statistics dd {
    margin: 0;
    font-size: .83rem;
    font-weight: 600;
}

.site-statistics dt,
.site-side-card p {
    color: var(--text-muted);
}

.site-statistics dd {
    color: var(--yellow);
    font-weight: 700;
}

.site-side-card p {
    margin: 12px 0 0;
    font-size: .83rem;
    font-weight: 600;
}

/* Last Bans und Last Blocks: je Zeile Spiel-Icon und Name (gekürzt mit …), Trennlinien zwischen den Zeilen. */
.site-side-card h2 a { color: inherit; text-decoration: none; }
.site-side-card h2 a:hover { color: var(--yellow); }
/* Icon hinter der Überschrift, wie im linken Menü (Bans, Blocks). */
.site-side-card-icon-bans { color: var(--red); }
.site-side-card-icon-blocks { color: var(--yellow); }
.site-side-card-icon { width: 21px; height: 21px; margin-left: 6px; vertical-align: -5px; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.site-last-bans { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; margin: 12px 0 0; padding: 0; list-style: none; }
.site-last-bans li { display: flex; align-items: center; gap: 8px; padding-top: 5px; border-top: 1px solid var(--border-strong);
    color: var(--text-muted); font-size: .83rem; font-weight: 600; }
.site-last-bans img { flex: none; width: 16px; height: 16px; object-fit: contain; }
.site-last-bans a { flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--text-muted); text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.site-last-bans a:hover { color: var(--yellow); }

@media (max-width: 1280px) {
    .site-shell {
        grid-template-columns: 220px minmax(0, 1fr);
    }

    .site-right-sidebar {
        position: static;
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .site-shell,
    .site-right-sidebar {
        grid-template-columns: 1fr;
    }

    .site-right-sidebar {
        grid-column: auto;
    }
}

/* Kleine Status-, Versions- und Hinweisbausteine für die Dashboard-Demo. */
.demo-info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.info-panel {
    display: grid;
    align-content: start;
    gap: 11px;
    min-height: 146px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-panel);
    background: var(--bg);
}

.info-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.info-title h4 {
    margin: 0;
    color: var(--text);
    font-size: .9rem;
}

.info-count,
.status-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-size: .68rem;
    font-weight: 600;
    line-height: 1;
}

.info-count {
    min-width: 20px;
    min-height: 20px;
    padding: 3px 6px;
    background: var(--border);
    color: var(--text);
}

.info-count-warning { background: var(--yellow-surface); color: var(--orange-light); }

.release-row {
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

.release-icon {
    width: 18px;
    height: 18px;
    margin-top: 1px;
    flex: 0 0 auto;
    color: var(--green-icon);
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.release-row div { display: grid; gap: 5px; }
.release-row strong { color: var(--text); font-size: .84rem; }
.release-row small,
.info-panel p { margin: 0; color: var(--text-dim); font-size: .74rem; }

.status-tag {
    min-height: 21px;
    padding: 3px var(--pill-padding-x);
    border-color: var(--pill-border);
    font-weight: var(--pill-font-weight);
    text-align: center;
}

/* Schrift optisch mittig: Durch die Ober-/Unterlängen der Schrift sitzt sie in den Pillen sonst zu hoch (Monospace des
   Themes CoolBlue: rund .12em, nachgemessen; Wert je Theme in --pill-text-shift). Mehr Innenabstand oben als unten schiebt
   sie um genau diese Strecke nach unten, die Pillen bleiben gleich hoch. (text-box-trim hilft hier nicht: Es wirkt nicht
   auf Flex-Container wie die Pillen.) */
.status-tag { padding-top: calc(3px + var(--pill-text-shift)); padding-bottom: calc(3px - var(--pill-text-shift)); }
.server-details-facts .status-tag,
.server-details-player-list .server-player-ping { padding-top: calc(4px + var(--pill-text-shift)); padding-bottom: calc(4px - var(--pill-text-shift)); }
.server-details-head > .status-tag { padding-top: calc(7px + var(--pill-text-shift)); padding-bottom: calc(7px - var(--pill-text-shift)); }

.status-tag-latest {
    margin-left: 4px;
    border-color: var(--green-strong);
    background: var(--green-surface);
    color: var(--green);
}
.status-tag-online { background: var(--green-surface); color: var(--green); }
.status-tag-blue { background: var(--pill-blue-surface); color: var(--pill-blue-text); }
.status-tag-neutral { background: var(--pill-neutral-surface); color: var(--text-soft); }

.info-link {
    width: fit-content;
    color: var(--link);
    font-size: .74rem;
    text-decoration: none;
}
.info-link:hover { color: var(--link-hover); text-decoration: underline; }

/* Externer Link: kleines Pfeil-Symbol dahinter (Tabler "external-link", MIT), folgt der Linkfarbe inkl. Hover.
   Farben und Hover wie die Namen in der Benutzerverwaltung (.admin-user-name-link). */
.external-link { color: var(--blue-light); font-weight: inherit; text-decoration: none; }
.external-link:hover { color: var(--yellow); font-weight: 700; text-decoration: none; }
.external-link::after { content: ""; display: inline-block; width: .85em; height: .85em; margin-left: .3em; vertical-align: -.05em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6'/%3E%3Cpath d='M11 13l9 -9'/%3E%3Cpath d='M15 4h5v5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6'/%3E%3Cpath d='M11 13l9 -9'/%3E%3Cpath d='M15 4h5v5'/%3E%3C/svg%3E") center / contain no-repeat; }

.status-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ticket-user-read-checks { width: 24px; height: 16px; color: var(--blue-icon); stroke: currentColor; stroke-width: 2.4; fill: none; flex: 0 0 auto; }

.notice {
    padding-left: 8px;
    border-left: 2px solid;
    color: var(--text-soft);
    font-size: .74rem;
    line-height: 1.35;
}
.notice-warning { border-left-color: var(--amber-border); }
.notice-danger { border-left-color: var(--red-notice); }

@media (max-width: 760px) {
    .demo-info-grid { grid-template-columns: 1fr; }
}

/* Weitere native HTML-Elemente in der Komponenten-Demo. */
.demo-control-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.demo-control-panel {
    display: grid;
    align-content: start;
    gap: 9px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-panel);
    background: var(--bg);
}

.demo-control-panel h4 {
    margin: 0 0 2px;
    color: var(--text);
    font-size: .9rem;
}

.demo-control-panel > label,
.form-radio-group > span,
.progress-label {
    color: var(--text-soft);
    font-size: .74rem;
    font-weight: 600;
}

.form-radio-group label {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--text-soft);
    font-size: .78rem;
}

.form-radio-group input {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--orange);
}

.form-radio-group {
    display: grid;
    gap: 7px;
    padding: 9px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.demo-choice-form {
    display: grid;
    gap: 9px;
    margin: 0;
}

.form-switch {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-soft);
    font-size: .78rem;
    cursor: pointer;
}

.form-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.form-switch span {
    position: relative;
    width: 31px;
    height: 18px;
    border: 1px solid var(--border-input);
    border-radius: var(--radius-pill);
    background: var(--border);
}

.form-switch span::after {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: var(--radius-round);
    background: var(--text-soft);
    content: "";
    transition: transform .15s ease, background-color .15s ease;
}

.form-switch input:checked + span { border-color: var(--amber-border); background: var(--switch-on-surface); }
.form-switch input:checked + span::after { transform: translateX(13px); background: var(--orange-light); }
.form-switch input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: 2px; }

.form-range {
    width: 100%;
    margin: 0;
    accent-color: var(--orange);
}

.progress-label {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}
.progress-label strong { color: var(--orange-light); }

.progress-bar {
    width: 100%;
    height: 8px;
    overflow: hidden;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--border);
}
.progress-bar::-webkit-progress-bar { background: var(--border); }
.progress-bar::-webkit-progress-value { background: var(--orange); }
.progress-bar::-moz-progress-bar { background: var(--orange); }

.form-details {
    margin-top: 12px;
    padding: 11px 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius-panel);
    background: var(--bg);
}
.form-details summary { color: var(--text); font-size: .8rem; font-weight: 600; cursor: pointer; }
.form-details p { margin: 10px 0 0; color: var(--text-dim); font-size: .76rem; }

@media (max-width: 760px) {
    .demo-control-grid { grid-template-columns: 1fr; }
}
/* Projektweite Formularfelder: technische RCON-Variante. */
form input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]),
form textarea,
form select {
    width: 100%;
    font: inherit;
    border: 1px solid var(--border-input);
    border-radius: var(--field-radius);
    background: var(--surface-input);
    color: var(--text-bright);
    box-shadow: var(--shadow-field);
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

form input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):hover,
form textarea:hover,
form select:hover {
    border-color: var(--focus-border);
}

form input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):focus,
form textarea:focus,
form select:focus {
    outline: none;
    border-width: 1px;
    border-color: var(--orange);
    outline: 2px solid var(--orange);
    outline-offset: 1px;
    box-shadow: none;
}

form input[type="checkbox"],
form input[type="radio"] {
    accent-color: var(--orange);
}

form input[type="file"] {
    width: 100%;
    color: var(--text-muted);
}

form input[type="file"]::file-selector-button {
    margin-right: 8px;
    padding: 6px 9px;
    border: 1px solid var(--border-input);
    border-radius: var(--radius-tile);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    cursor: pointer;
}

form input[type="file"]::file-selector-button:hover {
    border-color: var(--focus-border);
    background: var(--surface-hover);
}

form select:disabled,
form input:disabled,
form textarea:disabled {
    border-color: var(--border);
    background: var(--surface-disabled);
    color: var(--text-disabled);
    cursor: not-allowed;
}

/* Projektweite Checkboxen im technischen Formularstil. */
form input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: inline-grid;
    width: 17px;
    height: 17px;
    margin: 0;
    padding: 0;
    place-content: center;
    vertical-align: -3px;
    border: 1px solid var(--border-input);
    border-radius: var(--radius-small);
    background: var(--surface-input);
    outline: none;
    box-shadow: none;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

form input[type="checkbox"]:hover {
    border-color: var(--focus-border);
}

form input[type="checkbox"]::after {
    width: 4px;
    height: 8px;
    border: solid var(--checkbox-mark);
    border-width: 0 2px 2px 0;
    content: "";
    opacity: 0;
    transform: rotate(45deg) translate(-1px, -1px);
}

form input[type="checkbox"]:checked {
    border-color: var(--orange);
    background: var(--orange);
}

form input[type="checkbox"]:checked::after {
    opacity: 1;
}

form input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
}

form input[type="checkbox"]:disabled {
    border-color: var(--border);
    background: var(--surface-disabled);
    cursor: not-allowed;
}

form input[type="checkbox"]:disabled:checked {
    background: var(--checkbox-disabled-checked);
}

/* Projektweite Buttons: GitHub-artige Outline-Form mit bestehenden Aktionsfarben. */
button,
.button {
    border: 1px solid var(--border-button);
    border-radius: var(--radius-button);
    background: transparent;
    color: var(--blue);
    box-shadow: var(--shadow-button);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}

/* Grundform im Ruhezustand. Steht vor allen Varianten und hat niedrige Spezifität: Varianten überschreiben sie ohne :not-Ketten, bei Links wie bei Buttons. */
.button,
button:where(:not(.verification-refresh, .color-text-button, .color-icon-button)) {
    border-color: var(--button-border);
    background: var(--button-surface);
}

/* Aktionsvarianten setzen nur die Textfarbe; Rahmen und Fläche kommen aus der Grundregel, der Hover aus dem Block „Hover aller Buttons". */
.success-button { color: var(--button-green); }
.button-secondary { color: var(--text-muted); }
.danger-button { color: var(--button-red); }

button:focus-visible,
.button:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
}

button:disabled,
.button[aria-disabled="true"] {
    border-color: var(--border);
    background: var(--surface-disabled);
    color: var(--text-disabled);
    box-shadow: none;
    cursor: not-allowed;
    opacity: .55;
}

/* Große Aktionen in Formularen, kompakte Aktionen in Listen und Tabellen. */
.form-actions button,
.form-actions .button {
    padding: 10px 16px;
    font-size: .9rem;
}

.admin-actions button,
.admin-actions .button,
.admin-table button,
.admin-table .button {
    padding: 7px 10px;
    font-size: .85rem;
}

/* Portfolio-Status im Stil der Release-Informationen. */
.portfolio-status-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-top: 7px;
}

.portfolio-status {
    display: flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    margin-top: 0 !important;
    padding: 0;
    background: transparent;
    font-size: .84rem;
}

.portfolio-status strong { color: var(--text); }

.portfolio-status-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border-radius: var(--radius-round);
    background: var(--green);
}

.portfolio-status-banned .portfolio-status-dot { background: var(--red); }

.portfolio-status-badge {
    display: inline-block;
    margin-left: 4px;
    padding: 3px 7px;
    border-radius: var(--radius-pill);
    font-size: .74rem;
    line-height: 1;
}

.portfolio-status-latest {
    border: 1px solid transparent;
    background: var(--green-surface);
    color: var(--green);
}

.portfolio-status-banned strong { color: var(--text); }
.portfolio-status-banned-label {
    border: 1px solid transparent;
    background: var(--red-surface);
    color: var(--red);
}

.demo-pill-examples {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.demo-pill-example {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    padding: 8px 9px;
    border: 1px solid var(--border);
    border-radius: var(--radius-box);
    color: var(--text);
    font-size: .78rem;
}

.demo-pill-example strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: var(--radius-round); background: currentColor; }

.status-pill {
    margin-left: auto;
    padding: 3px 7px;
    border: 1px solid currentColor;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, currentColor 14%, transparent);
    color: inherit;
    font-size: .7rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.status-accent-green { color: var(--green); }
.status-accent-yellow { color: var(--gold); }
.status-accent-red { color: var(--red); }
.status-accent-violet { color: var(--violet-light); }
.status-accent-cyan { color: var(--cyan); }
.status-accent-magenta { color: var(--magenta); }
.status-accent-blue { color: var(--blue-light); }
.status-accent-neutral { color: var(--text-muted); }

/* Portfolio-Status-Pillen: aktiv und Fine immer grün darstellen. */
.portfolio-status-badge.portfolio-status-latest {
    border-color: var(--green-strong);
    background: var(--green-surface);
    color: var(--green);
}

@media (max-width: 620px) { .demo-pill-examples { grid-template-columns: 1fr; } }

/* Kommentar im Portfolio passend zum dunklen Seitenlayout. */
.portfolio-quote {
    margin: 20px 0;
    padding: 14px 18px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--orange);
    border-radius: var(--radius-box);
    background: var(--bg);
    color: var(--text);
}

/* Verknüpftes Steam-Konto im Portfolio: Steam-Logo vor der SteamID (Link zum Steam-Profil). */
.portfolio-steam { display: flex; align-items: center; gap: 8px; }
.portfolio-steam-icon { width: 32px; height: 32px; flex: 0 0 auto; }

/* Kompakte, freistehende Status-Tags wie unter dem Serverstatus. */
.status-tag-color-examples { gap: 8px; }
.status-tag-color-examples .status-tag { padding: 4px 8px; font-size: .72rem; }

.status-tag-yellow { background: var(--yellow-surface); color: var(--orange-light); }
.status-tag-red { background: var(--red-surface); color: var(--red); }
.status-tag-violet { background: var(--pill-violet-surface); color: var(--violet-light); }
.status-tag-cyan { background: var(--pill-cyan-surface); color: var(--cyan); }
.status-tag-magenta { background: var(--pill-magenta-surface); color: var(--magenta); }
/* Kräftiges Gelb und Orange (z. B. Ping-Stufen) -- .status-tag-yellow ist eher pfirsichfarben. */
.status-tag-bright-yellow { background: var(--warning-surface); color: var(--yellow); }
.status-tag-orange { background: var(--yellow-surface); color: var(--orange); }
/* Kräftiges Blau gefüllt mit weißer Schrift (PlayStation-Blau wie im Icon). */
.status-tag-deep-blue { background: #004699; color: #fff; }
/* Kräftiges Grün gefüllt mit weißer Schrift (Xbox-Grün wie im Icon). */
.status-tag-deep-green { background: #107c0f; color: #fff; }
/* Gelb gefüllt (wie das "#" vor den Überschriften) mit dunkler Schrift. */
.status-tag-yellow-fill { background: var(--yellow); color: var(--text-on-light); }
/* Schwarz mit weißer Schrift; der Rand hebt die Pille vom dunklen Hintergrund ab. */
.status-tag-black { border-color: var(--border-strong); background: var(--black); color: var(--white); }
/* Grau gefüllt mit weißer Schrift (z. B. Minecraft-Server-Software wie Paper). */
.status-tag-gray { background: var(--pill-gray-surface); color: var(--white); }
/* Weiß gefüllt mit dunkler Schrift (z. B. Minecraft-Whitelist). */

/* Kleines Plus-Symbol für grüne Hinzufügen- und Anlegen-Aktionen. */
.button-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.button-add-icon,
.button-delete-icon,
.button-edit-icon,
.button-permissions-icon,
.button-members-icon,
.button-ticket-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 2.5;
}

/* SVG-Buttons sind im gesamten Projekt einheitlich ausgerichtet. */
button:has(> svg),
.button:has(> svg) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Optischer Ausgleich der Monospace-Schrift, ohne die Symbole zu verschieben. */
.button-label {
    display: inline-block;
    transform: translateY(1px);
}

/* Einheitliches, gut erkennbares X für alle Löschaktionen außerhalb der Demo. */
.button-delete-icon:not(.demo-delete-icon) {
    transform: scale(1.15);
}

.button-delete-icon:not(.demo-delete-icon) path {
    stroke-width: 4;
}

/* Ersetzt das frühere style-Attribut am Pfad (Inline-Styles sind per CSP nicht erlaubt). */
svg.demo-delete-icon > path {
    stroke-width: 4;
}

/* Kleines X-Symbol für direkte Löschaktionen. */
.button-delete {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Stift-Symbol für Bearbeiten-Aktionen. */
.button-edit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Gruppennamen in Verwaltungslisten klar hervorheben. */
.group-name { font-weight: 700; }

/* Einheitliches Rauten-Gelb für Tabellenüberschriften. */
.admin-table th {
    color: var(--yellow);
}

/* Kleine Symbole für die Unterpunkte der Administration. */
.navigation-admin-card a {
    display: flex;
    align-items: center;
    gap: 6px;
}

.admin-navigation-icon {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

/* Die Button-Demo zeigt die echten Projektgrößen: Tabelle klein, Formular groß. */
.demo-button-groups { /* Vergleichbare, eigenständig umgesetzte Button-Stile für die Dashboard-Demo. */ display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.demo-button-groups > .component-panel:nth-child(1),
.demo-button-groups > .component-panel:nth-child(2) { grid-column: 1 / -1; }
@media (max-width: 720px) { .demo-button-groups { grid-template-columns: 1fr; } }

/* Kleine Aktionssymbole in Tabellen. */
.admin-table :is(.button-add-icon, .button-delete-icon, .button-edit-icon, .button-permissions-icon, .button-members-icon, .button-ticket-icon),
.admin-actions :is(.button-add-icon, .button-delete-icon, .button-edit-icon, .button-permissions-icon, .button-members-icon, .button-ticket-icon) {
    width: 20px;
    height: 20px;
}

/* Vergleichskarte: nur Abstände, die Buttons nutzen die globalen technical-action-Klassen. */
.group-management-comparison { margin-top: 24px; }
.group-management-comparison .technical-actions { gap: 7px; }

.technical-action-button svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

/* Große Variante der technischen Icon-Buttons: für Formulare, neben 42px hohen Feldern. */
.form-icon-button.technical-action-button {
    width: 42px;
    height: 42px;
}

.form-icon-button.technical-action-button svg {
    width: 20px;
    height: 20px;
}
.technical-actions .technical-action-button svg { width: 20px; height: 20px; }

.technical-action-create { color: var(--green); }
.technical-action-edit { color: var(--yellow); }
.technical-action-permissions { color: var(--violet); }
.technical-action-members { color: var(--cyan); }
.technical-action-delete { color: var(--red); }
.technical-action-details { color: var(--cyan); }
.technical-action-favorite { color: var(--yellow); }
.technical-action-map { color: var(--blue); }

/* Größenvergleich für Iconbuttons: Formulare groß, Tabellen kompakt. */
.demo-icon-size-label {
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 600;
}

.demo-icon-table-buttons { gap: 6px; }
.demo-icon-table-button {
    width: 32px;
    height: 32px;
}
.demo-icon-table-button svg {
    width: 20px;
    height: 20px;
}
/* Textbutton-Größenvergleich und dunkle technische Variante. */
.demo-text-table-button {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    height: 32px;
    box-sizing: border-box;
    padding: 7px 10px;
    font-size: .85rem;
}

.technical-text-button {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: var(--surface);
    font-size: .9rem;
}
.technical-text-button svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}
.technical-text-yellow { color: var(--yellow); }
.technical-text-cyan { color: var(--cyan); }
.technical-text-blue { color: var(--blue-light); }
.technical-text-violet { color: var(--violet); }
.technical-text-green { color: var(--green); }
.technical-text-red { color: var(--red); }
/* Kompakt für Tabellen wie in der Benutzerverwaltung: 32 px hoch, Symbole 20 px. Steht nach .technical-text-button, damit es dessen Formularmaße überschreibt. */
.technical-text-button.demo-text-table-button {
    min-height: 32px;
    padding: 7px 10px;
    font-size: .85rem;
}
.demo-text-table-button svg {
    width: 20px;
    height: 20px;
}

/* Einheitliche Zeilenhöhe für Tabellenaktionen in allen Gruppenvergleichsvarianten. */
.admin-table td { vertical-align: middle; }
.admin-table td.admin-actions {
    display: table-cell;
    white-space: nowrap;
}
.admin-table .admin-actions .button {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    height: 32px;
    box-sizing: border-box;
    margin-right: 6px;
}
.admin-table .admin-actions .button:last-child { margin-right: 0; }

/* Reine Tabellen-Iconbuttons bleiben wie in der Developer-Demo exakt zentriert. */
.admin-table .admin-actions .technical-action-button {
    display: inline-grid;
    padding: 0;
    place-items: center;
}

/* Technische Varianten funktionieren gleich für Buttons und Links. */
.technical-action-button {
    display: inline-grid;
    width: 32px;
    height: 32px;
    padding: 0;
    place-items: center;
    background: var(--surface);
}

/* CAPTCHA-Aktualisierung im technischen Demo-Stil. */
.verification-refresh {
    display: grid;
    width: 42px;
    height: 42px;
    padding: 0;
    place-items: center;
    border-radius: var(--radius-round);
    border-color: var(--button-border);
    background: var(--surface);
    color: var(--green);
}

/* Globale farbige Textbutton-Variante für klar getrennte Aktionen. */
.color-text-button {
    border-color: currentColor;
    background: transparent;
}

/* Globale farbige Icon-Button-Variante ohne Textabstand. */
.color-icon-button {
    display: inline-grid;
    width: 42px;
    height: 42px;
    padding: 0 !important;
    place-items: center;
    border-color: currentColor;
    background: transparent;
}

.color-icon-button svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.color-icon-button.demo-icon-table-button {
    width: 32px;
    height: 32px;
}

.color-icon-button.demo-icon-table-button svg {
    width: 20px;
    height: 20px;
}

.color-text-blue { color: var(--button-blue); }
.color-text-green { color: var(--button-green); }
.color-text-yellow { color: var(--button-yellow); }
.color-text-cyan { color: var(--button-cyan); }
.color-text-violet { color: var(--button-violet); }
.color-text-red { color: var(--button-red); }

.color-text-button:hover:not(:disabled),
.color-icon-button:hover:not(:disabled) {
    color: var(--bg);
}

.color-text-blue:hover:not(:disabled) { border-color: var(--button-blue); background: var(--button-blue); }
.color-text-green:hover:not(:disabled) { border-color: var(--button-green); background: var(--button-green); }
.color-text-yellow:hover:not(:disabled) { border-color: var(--button-yellow); background: var(--button-yellow); }
.color-text-cyan:hover:not(:disabled) { border-color: var(--button-cyan); background: var(--button-cyan); }
.color-text-violet:hover:not(:disabled) { border-color: var(--button-violet); background: var(--button-violet); }
.color-text-red:hover:not(:disabled) { border-color: var(--button-red); background: var(--button-red); }

/* Hover aller Buttons an einer Stelle. Die Grundregel (Spezifität 0,2,0) färbt Fläche und Rahmen; die Textfarbe bleibt wie im Ruhezustand,
   deshalb brauchen die technischen Varianten keine eigenen Hover-Farben. Die Varianten darunter (0,3,0) gewinnen ohne !important. */
:where(button, .button):hover:not(:disabled, [aria-disabled="true"]) {
    border-color: currentColor;
    background: var(--surface-hover);
}
.success-button:hover:not(:disabled, [aria-disabled="true"]) { border-color: var(--green); }
.danger-button:hover:not(:disabled, [aria-disabled="true"]) { border-color: var(--red); }
.button-secondary:hover:not(:disabled, [aria-disabled="true"]) { border-color: var(--border-blue-hover); }

/* Ticket-Komponenten: für Nutzerbereich und spätere Administration wiederverwendbar. */
.tickets-page > :nth-child(n + 3) { margin-top: 16px; }
.tickets-page > .ticket-back-link { display: inline-block; }
.ticket-user-link { color: var(--blue-light); font-weight: inherit; text-decoration: none; }
.ticket-user-link:hover { color: var(--yellow); font-weight: 700; text-decoration: none; }
.admin-user-name-link { color: var(--blue-light); font-weight: inherit; text-decoration: none; }
.admin-user-name-link:hover { color: var(--yellow); font-weight: 700; text-decoration: none; }
.group-members-list a { color: var(--blue-light); font-weight: inherit; text-decoration: none; }
.group-members-list a:hover { color: var(--yellow); font-weight: 700; text-decoration: none; }
.group-name-highlight { color: var(--yellow); }
.ticket-info { display: flex; flex-wrap: wrap; gap: 12px 24px; margin: 0 0 20px; }
.ticket-info dt { color: var(--text-dim); font-size: .78rem; }
.ticket-info dd { margin: 4px 0 0; overflow-wrap: anywhere; }
.ticket-admin-page .admin-page-heading h1 { margin-bottom: 0; }
.ticket-admin-actions { display: flex; align-items: center; gap: 6px; }
.ticket-admin-actions form { margin: 0; }
.ticket-admin-table .ticket-subject { min-width: 180px; overflow-wrap: anywhere; }
.ticket-admin-table .ticket-subject a { text-decoration: none; }
.ticket-admin-table .ticket-subject a:hover { color: var(--yellow); font-weight: 700; }
.ticket-admin-table .ticket-date { white-space: nowrap; }
.ticket-list { display: grid; gap: 7px; }
.ticket-new-action { justify-content: flex-end; }
.ticket-reply-form .technical-text-red { margin-left: auto; }
.ticket-reply-actions .technical-text-red { margin-left: auto; }
.ticket-mark-read-form { display: flex; justify-content: flex-end; margin: 16px 0 0; }
.ticket-create-mode .admin-page-heading,
.ticket-create-mode .ticket-list,
.ticket-create-mode > .hint { display: none; }
/* Ohne Kopf und Liste steht "Neues Ticket" ganz oben: kein Abstand wie vor einer Zwischenüberschrift. */
.ticket-create-mode > h2 { margin-top: 0; }
.tickets-page button[name="action"][value="create"] .button-label::before { content: "+ "; }
.ticket-list-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--surface-input); color: var(--text); text-decoration: none; }
.ticket-list-item:hover { border-color: var(--focus-border); background: var(--surface-list-hover); }
.ticket-list-item > span:first-child { display: grid; gap: 3px; }
.ticket-list-item small { color: var(--text-dim); font-size: .78rem; }
.ticket-back-link { width: fit-content; color: var(--blue-light); text-decoration: none; }
.ticket-back-link:hover { color: var(--link-hover); text-decoration: underline; }
.ticket-detail-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.ticket-detail-heading h2 { margin: 0 0 5px; }
.tickets-page .ticket-detail-heading > .status-tag { display: none; }
.ticket-thread { display: grid; gap: 10px; }
.ticket-reply-form { margin-top: 24px; }
.ticket-reply-actions { flex-wrap: wrap; }
.ticket-close-option { display: inline-flex; align-items: center; gap: 8px; }
.ticket-message { padding: 13px; border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--surface-input); }
.ticket-message header { display: flex; justify-content: space-between; gap: 12px; color: var(--text); }
.ticket-message header small { color: var(--text-dim); font-size: .76rem; }
.ticket-message p { margin: 10px 0 0; white-space: pre-wrap; }
@media (max-width: 600px) { .ticket-detail-heading, .ticket-list-item { align-items: stretch; flex-direction: column; } }

/* About-Seite ("Über uns"): Begrüßung mit Keks-Maskottchen, Zahlen (Stat-Karten wie im Demo-Board), Werte als Kacheln
   mit farbigen Symbolen, Spiele der Server und Abschluss mit Slogan im Logo-Verlauf. Nur Theme-Variablen. */
.about-page p { font-size: 1rem; line-height: 1.55; }
.home-info-card.about-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px;
    align-items: center;
    gap: 28px;
    padding: 30px 32px;
    background: radial-gradient(circle at 88% 45%, color-mix(in srgb, var(--yellow) 16%, transparent), transparent 55%), var(--surface-card);
}
.about-hero h2 { margin: 2px 0 18px; font-size: 1.9rem; line-height: 1.2; }
.about-hero p { color: var(--text-soft); }
.about-hero .about-lead { margin-bottom: 14px; color: var(--text-bright); font-size: 1.12rem; }
.about-kicker { margin: 0 !important; color: var(--text-muted) !important; font-size: .78rem !important; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.about-hero-logo { width: 180px; height: auto; justify-self: center; transform: rotate(-6deg); transition: transform .3s ease; }
.about-hero:hover .about-hero-logo { transform: rotate(4deg) scale(1.04); }

.about-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.about-stat { padding: 18px 22px; }
.about-stat strong { font-size: 2.2rem; line-height: 1.1; }
.about-stat .about-stat-of { color: var(--text-muted); font-size: 1rem; font-weight: 600; }

.home-info-card.about-card { padding: 24px 26px; }
.about-card h2 { margin-bottom: 18px; font-size: 1.25rem; }

.about-values { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.about-value {
    --about-accent: var(--cyan);
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 14px;
    padding: 22px 14px 20px;
    border: 1px solid transparent;
    border-radius: var(--radius-tile);
    background: var(--surface-tile);
    text-align: center;
    transition: border-color .15s ease, transform .15s ease;
}
.about-value:hover { border-color: color-mix(in srgb, var(--about-accent) 45%, transparent); transform: translateY(-3px); }
.about-value-icon { display: grid; width: 64px; height: 64px; place-items: center; border-radius: var(--radius-round); background: color-mix(in srgb, var(--about-accent) 15%, transparent); color: var(--about-accent); }
.about-value-icon svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.about-value strong { color: var(--text); font-size: .95rem; line-height: 1.3; }
.about-value-cyan { --about-accent: var(--cyan); }
.about-value-green { --about-accent: var(--green); }
.about-value-yellow { --about-accent: var(--yellow); }
.about-value-orange { --about-accent: var(--orange); }
.about-value-violet { --about-accent: var(--violet); }

/* Spiele in Reihen gleich breiter Kacheln, eine unvollständige letzte Reihe steht mittig. */
.about-games { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0; padding: 0; list-style: none; }
.about-games li { flex: 0 0 128px; }
.about-game {
    display: grid;
    justify-items: center;
    gap: 10px;
    height: 100%;
    padding: 16px 8px 14px;
    border: 1px solid transparent;
    border-radius: var(--radius-tile);
    background: var(--surface-tile);
    color: var(--text-soft);
    font-size: .82rem;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease;
}
a.about-game:hover { border-color: var(--border-blue-hover); color: var(--text-bright); text-decoration: none; }
.about-game img { width: 52px; height: 52px; object-fit: contain; border-radius: var(--radius-icon); }
.about-page .about-games-more { margin: 16px 0 0; color: var(--text-muted); font-style: italic; text-align: center; }

.home-info-card.about-cta {
    display: grid;
    justify-items: center;
    gap: 12px;
    padding: 34px 26px 30px;
    background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--yellow) 12%, transparent), transparent 65%), var(--surface-card);
    text-align: center;
}
.about-cta-logo { width: 76px; height: auto; }
.about-cta p { margin: 0; color: var(--text-soft); }
.about-cta .about-slogan { color: var(--text); font-family: var(--font-logo); font-size: 1.35rem; font-weight: 800; line-height: 1.35; }
.about-slogan-text { background: var(--logo-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Keks und Gamepad hinter dem Slogan als eigene Symbole (statt Emojis aus der Systemschrift) im Logo-Verlauf. */
.about-slogan-icons { display: inline-flex; gap: .2em; margin-left: .2em; vertical-align: -.2em; }
.about-slogan-icon { display: inline-block; width: 1.25em; height: 1.25em; background: var(--logo-gradient); }
.about-slogan-cookie { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 1 0 9 9a3 3 0 0 1 -3.5 -3.5a3 3 0 0 1 -5.5 -5.5z'/%3E%3Cpath d='M8 9h.01M7.5 14h.01M12 12h.01M11.5 17h.01M16 15.5h.01'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 1 0 9 9a3 3 0 0 1 -3.5 -3.5a3 3 0 0 1 -5.5 -5.5z'/%3E%3Cpath d='M8 9h.01M7.5 14h.01M12 12h.01M11.5 17h.01M16 15.5h.01'/%3E%3C/svg%3E") center / contain no-repeat; }
.about-slogan-gamepad { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12.5a4.5 4.5 0 0 1 7.8 -3.1l.9 .9h2.6l.9 -.9a4.5 4.5 0 0 1 7.8 3.1v3a4.5 4.5 0 0 1 -7.8 3.1l-.9 -.9h-2.6l-.9 .9A4.5 4.5 0 0 1 2 15.5z'/%3E%3Cpath d='M7 12v3M5.5 13.5h3M17 13h.01M19 15h.01'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12.5a4.5 4.5 0 0 1 7.8 -3.1l.9 .9h2.6l.9 -.9a4.5 4.5 0 0 1 7.8 3.1v3a4.5 4.5 0 0 1 -7.8 3.1l-.9 -.9h-2.6l-.9 .9A4.5 4.5 0 0 1 2 15.5z'/%3E%3Cpath d='M7 12v3M5.5 13.5h3M17 13h.01M19 15h.01'/%3E%3C/svg%3E") center / contain no-repeat; }
.about-actions { justify-content: center; margin-top: 10px; }

@media (max-width: 760px) {
    .home-info-card.about-hero { grid-template-columns: 1fr; padding: 24px 20px; }
    .about-hero-logo { grid-row: 1; width: 120px; }
    .about-hero h2 { font-size: 1.5rem; }
    .about-stats { grid-template-columns: 1fr; }
}

/* Banliste (Seite "bans"): schmale Spalten für Spiel, Land, Datum und Länge, der Name nimmt den Rest. Zeilen klappen wie
   in der Admin-Serverliste auf (app.js, data-expand) und zeigen Grund, Server und Ende. Nicht mehr wirksame
   Bans (abgelaufen, entbannt) sind abgeblendet. Flaggen wie in den Spielerlisten aus dem Flaggenbild geschnitten. */
/* Mindestbreite so, dass für den Namen genug Platz bleibt (die festen Spalten brauchen 550 px); schmaler wird gewischt. */
.ban-table { table-layout: fixed; min-width: 760px; }
.ban-table .ban-col-toggle { width: 56px; text-align: right; }
/* Aufklapp-Knopf wie der Details-Knopf in den anderen Tabellen: ohne den Innenabstand von .admin-table button, Pfeil 20 px. */
.ban-col-toggle .technical-action-button { display: inline-grid; padding: 0; place-items: center; }
.ban-col-toggle .technical-action-button svg { width: 20px; height: 20px; }
/* Detailzeile bündig an die aufgeklappte Zeile (sonst gewinnt der Zellenabstand von .admin-table td). */
.ban-table .server-details-row > td { padding: 0; }
/* Aufgeklappt wie die Server Settings (CVARs) der Serverdetails: abgesenkter Hintergrund (ohne Rahmen), zwei Spalten, je Zeile
   Bezeichnung links (gelb) und Wert rechts, feine Trennlinien; schmal einspaltig. Links der Ban (die ersten vier: Reason,
   Server, Server IP, Ends), rechts die übrigen (Steam ID, Steam profile, Total bans, Blocked, Member); "dense" füllt jede
   Spalte von oben. */
.ban-expand { padding: 6px 26px 12px; background: var(--surface-sunken); }
.ban-expand-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense;
    align-content: start; column-gap: 28px; margin: 0; font-size: .84rem; }
.ban-expand-facts > div:nth-child(-n+4) { grid-column: 1; }
.ban-expand-facts > div:nth-child(n+5) { grid-column: 2; }
.ban-expand-facts > div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--border-divider); }
.ban-expand-facts dt { flex: none; max-width: 50%; color: var(--yellow); }
.ban-expand-facts dd { min-width: 0; margin: 0; color: var(--text-soft); text-align: right; overflow-wrap: anywhere; }
/* Schmal: eine Spalte, Wert unter der Bezeichnung und linksbündig -- sonst stünde er am rechten Ende der wischbaren
   Tabelle außerhalb des Bildschirms. */
@media (max-width: 760px) {
    .ban-expand-facts { grid-template-columns: 1fr; grid-auto-flow: row; }
    .ban-expand-facts > div:nth-child(n) { grid-column: auto; }
    .ban-expand-facts > div { flex-direction: column; gap: 2px; }
    .ban-expand-facts dt { max-width: none; }
    .ban-expand-facts dd { text-align: left; }
}
.ban-table td { vertical-align: middle; overflow-wrap: anywhere; }
.ban-table .ban-col-game { width: 64px; text-align: center; }
.ban-table .ban-col-country { width: 90px; text-align: center; }
.ban-table .ban-col-date { width: 150px; white-space: nowrap; }
.ban-table .ban-col-length { width: 190px; }
.ban-table .block-col-server { width: 330px; }
.ban-game-icon { display: block; width: 28px; height: 28px; margin: 0 auto; object-fit: contain; }
.ban-flag { position: relative; display: inline-block; width: 24px; height: 16px; overflow: hidden; border-radius: var(--radius-flag); vertical-align: middle; }
.ban-flag img { position: absolute; top: -8.9px; left: -8.9px; width: 41.8px; height: 232.9px; max-width: none; }
.ban-inactive td { color: var(--text-muted); }
.ban-inactive :is(.ban-game-icon, .ban-flag) { opacity: .55; }
.ban-pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin-top: 18px; }
.ban-pager .technical-text-button { min-height: 34px; padding: 6px 12px; }
.ban-pager .ban-pager-current { border-color: var(--yellow); color: var(--yellow); cursor: default; }
.ban-pager-gap { padding: 0 4px; color: var(--text-muted); }
/* Ban-Protest und Spieler melden oben rechts neben der Überschrift; schmal darunter. */
.ban-list-page .admin-page-heading { flex-wrap: wrap; margin-bottom: 12px; }
.ban-list-page .admin-page-heading h1 { margin-bottom: 0; }
.ban-ticket-actions { display: flex; flex-wrap: wrap; gap: 10px; }
/* Keks Bans: Token-Bereich in der Serverbearbeitung. */
.ban-api-token { margin-top: 28px; }
.ban-api-token-new input { font-family: monospace; }
/* Banverwaltung (Admin): Steam-ID/IP und Admin als eigene Spalten, Formular in einem flexiblen Raster. */
.ban-admin-table { min-width: 900px; }
.ban-admin-table .ban-admin-col-id { width: 210px; }
.ban-admin-table .ban-admin-muted { color: var(--text-muted); }
.ban-admin-table .ban-admin-col-admin { width: 140px; }
.ban-admin-table .ban-col-toggle { width: 56px; }
.ban-admin-table tr[data-row-href] { cursor: pointer; }
.ban-admin-table tr[data-row-href]:hover td { background: var(--surface); }
.ban-admin-table .ban-admin-name { color: var(--text); text-decoration: none; }
.ban-admin-table .ban-admin-name:hover { color: var(--yellow); }
.ban-admin-info { margin-top: 16px; }
.ban-admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 var(--form-columns-gap); }
.ban-admin-section { margin-top: 28px; }
.ban-admin-section .ticket-thread { margin-bottom: 16px; }
.ban-note-edit { margin-top: 8px; }
.ban-note-edit summary { color: var(--blue-light); cursor: pointer; font-size: .85rem; }
.ban-note-edit form { margin-top: 8px; }
/* Zusammenfassung über der Liste: etwas größer, die Gesamtzahl gelb. */
.ban-summary { font-size: 1.05rem; }
.ban-summary strong { color: var(--yellow); }
/* Suche über der Liste in einer Zeile: Auswahllisten dürfen schmaler werden als ihr längster Eintrag, schmal umbrechen. */
.ban-filter { gap: 10px; margin-bottom: 10px; }
.ban-table { margin-top: 0; }
.ban-filter input[type="search"] { flex: 3 1 260px; }
.ban-filter select { flex: 1 1 150px; min-width: 0; }
/* Spielauswahl so breit wie ihr längster Eintrag (auf schmalen Bildschirmen höchstens zeilenbreit). */
.ban-filter select[name="game"] { flex: 0 1 auto; max-width: 100%; }
.ban-filter-actions { display: flex; flex: none; gap: 10px; }
.ban-filter [hidden] { display: none; }
.ban-filter-result { margin: 0 0 6px; }

/* Neues Ticket: Betreff und Grund nebeneinander, der Grund so breit wie sein längster Eintrag; schmal untereinander. */
.ticket-create-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--form-columns-gap); }
.ticket-create-row > div { display: grid; gap: var(--field-gap); align-content: start; min-width: 0; }
/* Auswahlfeld ist von sich aus 2 px höher als das Textfeld -- beide gleich hoch, damit die Unterkanten fluchten. */
.ticket-create-row :is(input, select) { height: 44px; }
@media (max-width: 600px) { .ticket-create-row { grid-template-columns: 1fr; } }

/* Serverregeln: Kurzübersicht als Kasten, Absätze je Paragraph als Aufzählungspunkte, Cheat-Paragraph rot. */
.rules-summary { margin: 18px 0; padding: 14px 18px; border: 1px solid var(--border-strong); border-radius: var(--radius-panel); background: var(--surface-sunken); }
.site-main .rules-summary > h2 { margin-top: 0; }
.rules-summary ul { display: grid; gap: 4px; margin: 10px 0 0; padding-left: 20px; }
.rules-paragraphs { display: grid; gap: 8px; margin: 10px 0 0; padding-left: 20px; }
.rules-paragraphs li::marker { color: var(--yellow); }
.rules-warning { color: var(--red); }
.rules-signature { margin-top: 24px; color: var(--text-muted); }
/* Mehr Luft vor jedem Paragraphen (sonst setzt .site-main .card > h2 den Abstand auf 0). */
.site-main .card.rules-page > h2 { margin-top: 30px; }
/* Spielspezifische Regeln: je Spiel ein Kasten mit Spiel-Icon in der Überschrift. */
.rules-game { margin-top: 14px; padding: 14px 18px; border: 1px solid var(--border-strong); border-radius: var(--radius-panel); }
.site-main .rules-game > h3 { display: flex; align-items: center; gap: 8px; margin: 0; }
.rules-game-icon { width: 24px; height: 24px; object-fit: contain; }
/* Mit .site-main davor, sonst gewinnt .site-main h3::before (das "#"); vor dem Spiel steht das Icon. */
.site-main .rules-game > h3::before { content: none; }

/* Platzhalter für Seiten in Arbeit (z. B. Ranking): mittig mit großem Icon. */
.coming-soon { display: grid; justify-items: center; gap: 6px; padding: 40px 16px; text-align: center; }
.coming-soon-icon { width: 192px; height: 192px; color: var(--yellow); stroke-width: 1.5; }
.site-main .coming-soon > h2 { margin: 8px 0 0; }
.site-main .coming-soon > h2::before { content: none; }
.coming-soon p { margin: 0; color: var(--text-muted); }
.coming-soon .button { margin-top: 12px; }

/* Discord-Seite: Banner, Icon mit Name und Mitgliederzahlen, Beschreibung, Knopf zum Beitreten. */
.discord-banner { display: block; width: 100%; max-height: 260px; margin-top: 16px; object-fit: cover; border-radius: var(--radius-panel); }
.discord-head { display: flex; align-items: center; gap: 16px; margin-top: 18px; }
.discord-icon { flex: none; width: 72px; height: 72px; border-radius: var(--radius-round); object-fit: cover; }
.site-main .discord-head h2.discord-name { margin: 0; }
.site-main .discord-head h2.discord-name::before { content: none; }
.discord-stats { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 6px 0 0; color: var(--text-muted); font-weight: 600; }
.discord-online { display: inline-flex; align-items: center; gap: 6px; color: var(--green); }
.discord-description { margin-top: 16px; white-space: pre-line; }
/* Discord-Liveliste: links die öffentlichen Sprachkanäle mit den Leuten darin, rechts wer in nicht öffentlichen Kanälen sitzt. */
.discord-head .discord-join { margin-left: auto; }
.discord-live { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 24px; margin-top: 24px; }
.discord-live > .hint { grid-column: 1 / -1; }
.site-main .discord-live-column > h2 { margin: 0 0 10px; font-size: 1.05rem; }
.discord-channels { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.discord-channel { display: grid; gap: 4px; padding: 8px 10px; border-radius: var(--radius-panel); background: var(--surface-sunken); }
.discord-channel.is-empty { opacity: .55; }
.discord-channel-name { display: flex; align-items: center; gap: 6px; font-weight: 600; overflow-wrap: anywhere; }
.discord-channel-name svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--text-muted); }
.discord-member { display: flex; align-items: center; gap: 10px; min-width: 0; }
.discord-member-compact { gap: 8px; padding-left: 22px; }
.discord-member-compact .discord-avatar, .discord-avatar.discord-avatar-small { width: 22px; height: 22px; }
.discord-avatar { display: block; width: 32px; height: 32px; border-radius: var(--radius-round); object-fit: cover; }
.discord-member-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) {
    .discord-live { grid-template-columns: 1fr; }
    .discord-head { flex-wrap: wrap; }
    .discord-head .discord-join { margin-left: 0; }
}