:root {
    --side: #181a26; --bg: #0b0e1a; --card: #1c1e2b; --line: #2c2f42; --input: #12141e;
    --text: #e6e8ee; --muted: #9a9eb0; --blue: #8a4fe6; --red: #c24848; --ghost: #2a2d42;
    --error: #ff8a8a; --ok: #7bd9a0; --font: "Segoe UI", system-ui, sans-serif;
    color-scheme: dark;
}
html[data-theme="light"] {
    --side: #ffffff; --bg: #f2f4fa; --card: #ffffff; --line: #dde1ee; --input: #f3f5fb;
    --text: #1b1f2e; --muted: #5f657b; --ghost: #e6e9f4; --error: #b3261e; --ok: #1d7a44;
    color-scheme: light;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); line-height: 1.5; }
a { color: var(--blue); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.shell { display: grid; grid-template-columns: 256px 1fr; grid-template-rows: 68px 1fr 44px; grid-template-areas: "side top" "side main" "side foot"; min-height: 100vh; }
body.collapsed .shell { grid-template-columns: 0 1fr; }
.side { grid-area: side; background: var(--side); border-right: 1px solid var(--line); overflow: hidden; }
.brand { height: 68px; display: flex; align-items: center; justify-content: center; font-weight: 700; border-bottom: 1px solid var(--line); white-space: nowrap; }
.side nav { padding: .5rem; }
.side nav a { display: block; padding: .6rem .9rem; border-radius: 8px; color: var(--text); text-decoration: none; white-space: nowrap; }
.side nav a:hover { background: var(--ghost); }
.side nav a.active { background: color-mix(in srgb, var(--blue) 18%, transparent); color: var(--blue); font-weight: 600; }
.top { grid-area: top; display: flex; align-items: center; justify-content: flex-end; gap: .9rem; padding: 0 1.25rem; background: var(--side); border-bottom: 1px solid var(--line); }
.top a { color: var(--text); text-decoration: none; }
.menu, .theme { background: none; border: 1px solid var(--line); border-radius: 8px; color: var(--text); font: inherit; padding: .25rem .7rem; cursor: pointer; }
.menu { margin-right: auto; font-size: 1.2rem; }
.main { grid-area: main; padding: 2rem; min-width: 0; }
.foot { grid-area: foot; display: flex; align-items: center; justify-content: flex-end; padding: 0 1.25rem; border-top: 1px solid var(--line); background: var(--side); color: var(--muted); font-size: .85rem; }

h1 { margin: 0 0 1.25rem; font-size: 1.7rem; }
h2 { margin: 0 0 .75rem; font-size: 1.1rem; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 1.5rem; margin-bottom: 1.5rem; }
.login { max-width: 26rem; margin: 2rem auto; padding: 2rem; }
.hint, .empty { color: var(--muted); font-size: .9rem; }
.msg { margin-bottom: 1rem; }
.msg p { margin: .5rem 0 0; }

label { display: block; margin: 1rem 0 .35rem; font-size: .85rem; color: var(--muted); }
input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]), select, textarea {
    width: 100%; padding: .6rem .8rem; border: 1px solid var(--line); border-radius: 8px;
    background: var(--input); color: var(--text); font: inherit; transition: border-color .15s, box-shadow .15s;
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 25%, transparent); }
::placeholder { color: var(--muted); opacity: .7; }
input[type=color] { width: 3rem; height: 2.5rem; padding: 3px; border: 1px solid var(--line); border-radius: 8px; background: var(--input); cursor: pointer; }
input[type=file] { width: 100%; padding: .4rem; border: 1px dashed var(--line); border-radius: 8px; background: var(--input); color: var(--muted); font: inherit; font-size: .9rem; }
input[type=file]::file-selector-button { margin-right: .8rem; padding: .4rem .9rem; border: 0; border-radius: 6px; background: var(--ghost); color: var(--text); font: inherit; cursor: pointer; }
input[type=file]::file-selector-button:hover { background: var(--blue); color: #fff; }
input[type=checkbox], input[type=radio] { accent-color: var(--blue); width: 1rem; height: 1rem; }
.check { display: flex; gap: .5rem; align-items: center; margin-top: 1.9rem; color: var(--text); }

.btn { display: inline-block; margin-top: 1rem; padding: .55rem 1.1rem; border: 0; border-radius: 8px; background: var(--blue); color: #fff; font: inherit; text-decoration: none; cursor: pointer; }
.btn:hover { filter: brightness(1.1); }
.btn.ghost { background: var(--ghost); color: var(--text); }
.btn.danger { background: var(--red); color: #fff; }
.row { display: flex; flex-wrap: wrap; gap: 0 1.5rem; align-items: flex-start; }
.row > div { flex: 1 1 14rem; }
.row > div:has(input[type=color]) { flex: 0 0 auto; }

.message { margin: 0 0 1.25rem; padding: .7rem .9rem; border-radius: 8px; list-style: none; }
.message.error { background: color-mix(in srgb, var(--error) 14%, transparent); color: var(--error); }
.message.ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }

/* Fraktions-/Unternehmensfarbe nur dezent: feiner Akzent am Rand und getöntes Logo */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.25rem; }
.org { margin: 0; text-align: center; border-left: 3px solid color-mix(in srgb, var(--c) 55%, var(--line)); }
.logo { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin: 0 auto .75rem; border-radius: 12px; background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); font-size: 1.6rem; font-weight: 700; object-fit: contain; }
img.logo { background: none; }
.actions { display: flex; gap: .4rem; justify-content: center; flex-wrap: wrap; }
.actions .btn { margin-top: .4rem; padding: .4rem .8rem; font-size: .9rem; }

.tablewrap { overflow-x: auto; padding: .5rem 1rem; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .7rem .5rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
/* Schlüssel-Wert-Tabellen (Zeile beginnt mit th): Linie unter der letzten Zeile über die ganze Breite */
tbody tr:last-child > th:first-child ~ td { border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: 600; font-size: .85rem; }
.inline { display: flex; gap: .4rem; }
.inline .btn { margin-top: 0; white-space: nowrap; padding: .4rem .8rem; }
.inline input { min-width: 8rem; }

@media (max-width: 800px) {
    .shell { grid-template-columns: 0 1fr; }
    body.collapsed .shell { grid-template-columns: 200px 1fr; }
    .main { padding: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Navigation mit Kategorien, Icon-Buttons, Ränge */
.navhead { padding: 1rem .9rem .3rem; color: var(--muted); font-size: .8rem; font-weight: 600; }
.navhead:first-child { padding-top: .4rem; }
.iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: none; color: var(--text); cursor: pointer; }
.iconbtn:hover { background: var(--ghost); }
.iconbtn.logout { color: #e5484d; border-color: color-mix(in srgb, #e5484d 40%, var(--line)); }
.iconbtn.logout:hover { background: color-mix(in srgb, #e5484d 14%, transparent); }
.who { font-weight: 600; }
.orghead { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 1rem; }
.orghead .logo { margin: 0; flex: none; }
.orghead h1 { margin: 0; }
.orghead p { margin: 0; }
.rank { display: inline-block; padding: .1rem .7rem; border-radius: 999px; background: color-mix(in srgb, var(--c, var(--blue)) 16%, transparent); color: var(--c, var(--blue)); font-size: .9rem; font-weight: 600; }
.narrow { max-width: 24rem; }
/* Feste Breite nur für Beschriftungsspalten (z. B. "Benutzername" in der Übersicht), nicht für Spaltenköpfe von Listen */
.card table tbody th { width: 11rem; }

/* Punkte, Schalter, Ticket-Elemente */
.dot { display: inline-block; width: 9px; height: 9px; margin-left: .5rem; border-radius: 50%; background: #e5484d; vertical-align: middle; }
.switch { display: flex; align-items: center; gap: .6rem; margin-top: 1.9rem; color: var(--text); font-size: .95rem; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.track { position: relative; flex: none; width: 42px; height: 24px; border-radius: 999px; background: var(--line); transition: background .15s; }
.track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; }
.switch input:checked + .track { background: var(--blue); }
.switch input:checked + .track::after { transform: translateX(18px); }
.switch input:focus-visible + .track { outline: 2px solid var(--blue); outline-offset: 2px; }
.pagehead { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.newticket { flex: 1 1 100%; order: 3; }
.newticket > summary { list-style: none; }
.newticket > summary::-webkit-details-marker { display: none; }
.plus { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #2fa75a; color: #fff; font-size: 1.7rem; line-height: 1; cursor: pointer; user-select: none; position: absolute; top: 0; right: 0; }
.newticket[open] > summary { background: #23814a; }
.newticket > .card { margin-top: .5rem; }
.btn.green { background: #2fa75a; }
.filters { display: flex; flex-wrap: wrap; gap: 0 1.25rem; align-items: flex-end; padding-top: .5rem; padding-bottom: 1.25rem; }
.filters > div { flex: 1 1 10rem; }
.status { display: inline-block; padding: .1rem .65rem; border-radius: 999px; font-size: .85rem; font-weight: 600; }
.status.open { background: color-mix(in srgb, var(--blue) 18%, transparent); color: var(--blue); }
.status.in_progress { background: color-mix(in srgb, #d9a21b 20%, transparent); color: #d9a21b; }
.status.closed { background: var(--ghost); color: var(--muted); }
.invite { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .5rem 0; }
.invite .btn { margin-top: 0; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1.5rem; }
.catrow { justify-content: space-between; align-items: center; padding: .4rem 0; border-top: 1px solid var(--line); }
.main { position: relative; }
.req { color: #e5484d; font-weight: 700; }

/* Symbol-Buttons in Tabellen (Stop, Haken, Stift, Mülltonne) */
.iconrow { display: flex; gap: .35rem; justify-content: flex-end; align-items: center; margin: 0; }
.iconrow.left { justify-content: flex-start; margin-bottom: 1rem; }
.ib { --ic: var(--muted); display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid color-mix(in srgb, var(--ic) 35%, var(--line)); border-radius: 8px; background: none; color: var(--ic); cursor: pointer; text-decoration: none; }
.ib:hover { background: color-mix(in srgb, var(--ic) 15%, transparent); }
.ib.red { --ic: #e5484d; }
.ib.green { --ic: #2fa75a; }
.ib.orange { --ic: #f08c1a; }
th.right { text-align: right; }
/* Aktionsspalten nur so breit wie ihre Symbole */
.card table th.right { width: 1%; white-space: nowrap; }
tr.inactive td { color: var(--muted); }
.orgname { display: inline-flex; align-items: center; gap: .6rem; font-weight: 600; }
.logo.sm { width: 30px; height: 30px; margin: 0; border-radius: 8px; font-size: .95rem; }
h3 { margin: 1.5rem 0 .25rem; font-size: 1rem; }
.modules { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 0 1.5rem; }
.modules .switch { margin-top: 1rem; align-items: flex-start; } /* Schalter auf Höhe des Titels, nicht mittig zu Titel + Beschreibung */
.modules .switch .track { margin-top: .1rem; }
/* Symbole und Schilder in Tabellenzeilen auf einer Höhe mit dem Text (z. B. Regeln bearbeiten, Fraktionen bearbeiten) */
td > .ib, td > form.inline { vertical-align: middle; }
td > form.inline { display: inline-flex; margin: 0 0 0 .35rem; }
td > .orgname { vertical-align: middle; }

/* Ausgegraute Kategorien in der Seitenleiste */
.navhead { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.navhead.off, .navoff { opacity: .45; }
.navoff { display: block; padding: .6rem .9rem; color: var(--muted); cursor: not-allowed; white-space: nowrap; }

/* Fenster über der Seite */
.modal { width: min(42rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--text); box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
/* offenes Fenster: die Seite dahinter scrollt nicht (auch nicht, wenn im Fenster am Ende weitergescrollt wird);
   scrollbar-gutter hält den Platz der Scrollleiste frei, damit die Seite dabei nicht seitlich springt */
html:has(dialog.modal[open]) { overflow: hidden; scrollbar-gutter: stable; }
.modal { overscroll-behavior: contain; }
.modal::backdrop { background: rgba(5, 7, 15, .6); backdrop-filter: blur(2px); }
.modalbox { padding: 1.25rem 1.5rem 1.5rem; }
.modalhead { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .25rem; }
.modalhead h2 { margin: 0; }
.x { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 8px; background: none; color: var(--muted); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.x:hover { background: var(--ghost); color: var(--text); }
.modal h3 { border-top: 1px solid var(--line); padding-top: 1rem; }
button.plus { border: 0; font: inherit; font-size: 1.7rem; }
.plus:hover { background: #23814a; }

/* Übersicht und Mitgliederliste einer Fraktion / eines Unternehmens */
.tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.tabs a { padding: .4rem .9rem; border-radius: 999px; background: var(--ghost); color: var(--text); text-decoration: none; font-size: .9rem; }
.tabs a.active { background: color-mix(in srgb, var(--blue) 18%, transparent); color: var(--blue); font-weight: 600; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1.25rem; margin-bottom: 1.5rem; }
.stats .card { margin: 0; }
.big { font-size: 1.6rem; font-weight: 700; }
.motd { white-space: pre-line; margin: 0; }
.cardhead { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.cardhead h2 { margin: 0; }
.rankcell { display: inline-flex; align-items: center; gap: .35rem; }
.ib.sm { width: 26px; height: 26px; border-radius: 6px; }
.soon { display: inline-block; padding: .1rem .6rem; border-radius: 999px; background: var(--ghost); color: var(--muted); font-size: .8rem; font-weight: 600; }
.plus.static { position: static; flex: none; }

/* Buttons auf einer Höhe mit den Eingabefeldern: Ein Button allein in einer Formularzeile
   sitzt unten bündig mit den Feldern daneben und ist genauso hoch wie sie. */
.row.bottom { align-items: flex-end; }
.row > div:has(> .btn:only-child) { flex: 0 0 auto; align-self: flex-end; }
.row.bottom .btn, .filters .btn, .row > div > .btn:only-child { margin-top: 0; padding: .62rem 1.1rem; line-height: 1.5; border: 1px solid transparent; }
input[type=color] { font: inherit; height: calc(1.5em + 1.2rem + 2px); }
.cardhead .ib { width: 40px; height: 40px; }

/* Ränge, Logs, Mitgliederlisten-Bild */
.ranklogo { width: 28px; height: 28px; object-fit: contain; vertical-align: middle; }
table.ranks th:first-child, table.ranks td:first-child { width: 4rem; }
table.ranks input:not([type=checkbox]) { min-width: 10rem; }
.logocell { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.logocell .check { margin: 0; }
.logocell input[type=file] { flex: 1 1 14rem; width: auto; }
.nowrap { white-space: nowrap; }
.preview img { max-width: 100%; height: auto; border-radius: 8px; }
.modal .row > div { flex-basis: 10rem; }

/* Teilnehmer-Auswahl (links Teilnehmer, rechts Mitglieder) */
.picker { display: grid; grid-template-columns: 1fr auto 1fr; gap: .75rem; align-items: end; }
.picker select { height: 12rem; padding: .3rem; }
.picker option { padding: .25rem .4rem; border-radius: 4px; }
.picker label { display: flex; align-items: center; gap: .5rem; min-height: 2.4rem; }
.picker .pick-filter { flex: 1; min-width: 0; padding: .3rem .6rem; font-size: .85rem; }
.pick-buttons { display: flex; flex-direction: column; gap: .4rem; padding-bottom: 2.5rem; }
.pick-buttons .ib { font-size: 1.1rem; }
.picker + .hint { margin: .3rem 0 0; }
@media (max-width: 600px) { .picker { grid-template-columns: 1fr; } .pick-buttons { flex-direction: row; justify-content: center; padding: 0; } }

/* Ja/Nein-Auswahl als Segment-Schalter (gleiche Höhe wie Eingabefelder) */
.seg { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--input); }
.seg label { position: relative; flex: 1; margin: 0; color: var(--text); font-size: 1rem; cursor: pointer; }
/* versteckter Auswahlknopf: klein halten (allgemeine input-Regeln machen ihn sonst 100 % breit → Scrollleiste im Fenster) */
.seg input, .modal .seg input { position: absolute; top: 0; left: 0; opacity: 0; width: 1px; height: 1px; margin: 0; padding: 0; }
.seg span { display: block; padding: .6rem .8rem; line-height: 1.5; text-align: center; }
.seg label + label span { box-shadow: inset 1px 0 var(--line); }
.seg input:checked + span { background: color-mix(in srgb, var(--blue) 20%, transparent); color: var(--blue); font-weight: 600; }
.seg input[value="0"]:checked + span { background: color-mix(in srgb, #e5484d 18%, transparent); color: #e5484d; }
.seg input[value="1"]:checked + span { background: color-mix(in srgb, #2fa75a 18%, transparent); color: #2fa75a; }
.seg input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: -2px; }

/* Werte, Ergebnisse */
.pos { color: #2fa75a; }
.neg { color: #e5484d; }
.status.won { background: color-mix(in srgb, #2fa75a 18%, transparent); color: #2fa75a; }
.status.lost { background: color-mix(in srgb, #e5484d 16%, transparent); color: #e5484d; }
td.comment { max-width: 22rem; font-size: .9rem; }
.swatch { display: inline-block; width: 12px; height: 12px; margin-right: .5rem; border-radius: 3px; background: var(--c); vertical-align: middle; }
.modal:has(.picker) { width: min(52rem, calc(100vw - 2rem)); }
.coords > div { flex-basis: 6rem; }

/* Gangwar-Karte */
/* Kartenbreite: so groß wie möglich, aber die ganze Karten-Box passt in die Bildschirmhöhe
   (ca. 300 px für Kopfleiste, Überschrift, Ausschnitt-Buttons, Legende, Hinweis) und rechts bleiben mind. 31rem für die Listen. */
.gwlayout { --mapw: clamp(18rem, min(calc(100vh - 300px), calc(100vw - 256px - 4rem - 1.5rem - 31rem)), 50rem);
    display: grid; grid-template-columns: var(--mapw) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.gwlayout .card { margin-bottom: 1.5rem; }
@media (max-width: 1260px) { .gwlayout { grid-template-columns: 1fr; } .gwlayout > .card:first-child { max-width: clamp(18rem, calc(100vh - 300px), 50rem); } }
.gwmap { position: relative; }
.gwmap svg { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 8px; background: #1b3a4b; }
.gw-sea { fill: #1b3a4b; }
.gw-grid { stroke: rgba(255, 255, 255, .08); stroke-width: 6; }
.gw-city { fill: rgba(255, 255, 255, .35); font: 700 150px var(--font); text-anchor: middle; }
.gw-note { fill: rgba(255, 255, 255, .35); font: 90px var(--font); text-anchor: middle; }
.gw-area rect { fill: color-mix(in srgb, var(--ac) 65%, transparent); stroke: var(--ac); stroke-width: 12; }
.gw-area.off rect { fill: rgba(150, 150, 150, .45); stroke: #888; stroke-dasharray: 40 30; }
.mappick .gw-area, .mapdraw .gw-area { cursor: pointer; }
.mappick .gw-area:hover rect, .mapdraw .gw-area:hover rect { fill: color-mix(in srgb, var(--ac) 90%, transparent); }
.mapdraw svg { cursor: crosshair; user-select: none; }
.gw-draw { fill: rgba(59, 130, 246, .3); stroke: #3b82f6; stroke-width: 12; stroke-dasharray: 40 20; }
.gw-coords { position: absolute; right: .5rem; bottom: .5rem; padding: .15rem .5rem; border-radius: 6px; background: rgba(0, 0, 0, .6); color: #fff; font-size: .8rem; pointer-events: none; }
.gw-coords:empty { display: none; }
.gwviews { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .6rem; }
.gwviews button { padding: .3rem .75rem; border: 1px solid var(--line); border-radius: 999px; background: var(--ghost); color: var(--text); font: inherit; font-size: .85rem; cursor: pointer; }
.gwviews button.active { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 18%, transparent); color: var(--blue); font-weight: 600; }
/* Gebiete ohne Besitzer: weiß; Legende unter der Karte */
.gw-area.free rect { fill: rgba(255, 255, 255, .8); stroke: rgba(0, 0, 0, .75); } /* dunkler Rand: hebt sich auch auf hellen Straßen ab */
.swatch.free { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.gwlegend { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin-top: .6rem; font-size: .85rem; color: var(--muted); }
.gwlegend .swatch { margin-right: .35rem; }

/* Symbole in der Seitenleiste: Kategorien klein und gedämpft, Einträge in Textfarbe */
.side nav a, .navoff { display: flex; align-items: center; gap: .7rem; }
.side nav a > span:not(.dot), .navoff > span, .navhead > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.side nav a svg, .navoff svg { flex: none; width: 18px; height: 18px; opacity: .75; }
.side nav a.active svg, .side nav a:hover svg { opacity: 1; }
.navhead { display: flex; align-items: center; gap: .45rem; }
.navhead svg { flex: none; width: 14px; height: 14px; }
.side nav a .dot { margin-left: auto; flex: none; }

/* Unter-Tabs eines Moduls (Übersicht / Statistiken) */
.subtabs { display: flex; gap: .25rem; margin: 0 0 1.25rem; border-bottom: 1px solid var(--line); }
.subtabs a { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 1rem; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--muted); text-decoration: none; font-weight: 600; }
.subtabs a:hover { color: var(--text); }
.subtabs a.active { color: var(--blue); border-bottom-color: var(--blue); }
.subtabs svg { width: 16px; height: 16px; }

/* Zeitraum-Auswahl und Quoten-Balken in den Statistiken */
.daysform > div:first-child { flex: 0 1 14rem; }
.daysform .quick { display: flex; flex-wrap: wrap; gap: .3rem; flex: 1 1 16rem; align-self: flex-end; padding-bottom: .4rem; }
.daysform .quick a { padding: .3rem .75rem; border: 1px solid var(--line); border-radius: 999px; background: var(--ghost); color: var(--text); font-size: .85rem; text-decoration: none; }
.daysform .quick a.active { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 18%, transparent); color: var(--blue); font-weight: 600; }
.bar { display: inline-block; width: 4.5rem; height: 8px; border-radius: 999px; vertical-align: middle; background: linear-gradient(90deg, #2fa75a var(--p), var(--line) var(--p)); }
.bar.wide { width: 100%; }
.logdetails table th { width: 9rem; }
.logdetails h3 { margin-top: 1.25rem; }

/* Tickets: "Öffnen"-Button in der Liste, Statusänderungen im Verlauf */
td.right { text-align: right; }
.btn.open { margin: 0; padding: .35rem .9rem; white-space: nowrap; }
.ticketevent { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin: -.5rem 0 1rem; padding: .5rem 1rem; border-left: 3px solid var(--line); color: var(--muted); font-size: .9rem; }
.ticketevent svg { flex: none; width: 16px; height: 16px; }
.ticketevent strong { color: var(--text); }
.ticketevent .hint { margin-left: auto; }


/* ---------- Tickets (Liste und Ansicht nach Vorlage) ---------- */
.cardtitle { margin: -1.5rem -1.5rem 1.25rem; padding: 1rem 1.5rem; border-bottom: 1px solid var(--line); font-size: 1rem; font-weight: 600; }
.tablewrap .cardtitle { margin: -.5rem -1rem 1rem; padding: 1rem 1.5rem; }

/* Liste: Filterleisten, Aktionen, Suche */
.ticketbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem; }
.ticketfilters { display: flex; flex-direction: column; gap: .5rem; }
.segbtns { display: inline-flex; flex-wrap: wrap; border-radius: 8px; overflow: hidden; background: var(--ghost); }
.segbtns a { padding: .5rem .9rem; color: var(--text); text-decoration: none; font-size: .95rem; }
.segbtns a + a { box-shadow: inset 1px 0 var(--line); }
.segbtns a:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
.segbtns a.active { background: color-mix(in srgb, var(--blue) 22%, transparent); color: var(--blue); font-weight: 600; }
.ticketactions { display: flex; gap: .5rem; align-items: center; }
.ticketactions .btn { margin: 0; }
.ticketactions .iconbtn { width: 40px; height: 40px; }
.ticketsearch { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1.5rem; }
.searchgroup { display: flex; max-width: 34rem; }
.searchgroup input { border-radius: 8px 0 0 8px !important; }
.searchgroup .btn { margin: 0; border-radius: 0 8px 8px 0; padding: .62rem 1.1rem; line-height: 1.5; border: 1px solid transparent; }
.ticketlist .uname { color: var(--blue); }
.ticketlist td.ttitle { min-width: 14rem; }
.btn.open { margin: 0; padding: .35rem .9rem; white-space: nowrap; }

/* Ansicht: Chat links, Details rechts */
.tickettitle { display: flex; align-items: center; gap: .6rem; margin: 0; }
.ticketlayout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, 30rem); gap: 1.5rem; align-items: start; margin-top: 1rem; }
@media (max-width: 1100px) { .ticketlayout { grid-template-columns: 1fr; } }
.chat { display: flex; flex-direction: column; gap: .75rem; max-height: 60vh; overflow-y: auto; padding: .25rem .25rem .5rem; }
.bubble { align-self: flex-start; max-width: min(36rem, 80%); padding: .6rem .9rem; border-radius: 10px; background: var(--input); border: 1px solid var(--line); }
.bubble.mine { align-self: flex-end; }
.bubble.mine { border-color: color-mix(in srgb, var(--blue) 70%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 18%, transparent); } /* eigene Nachrichten: blau umrandet */
.bubble.event { align-self: center; max-width: 90%; padding: .45rem .9rem; background: color-mix(in srgb, var(--input) 60%, transparent); color: var(--muted); font-size: .9rem; text-align: center; }
.bubble.event strong { color: var(--text); }
.bubble.event .when { display: block; }
.bubblehead { display: flex; align-items: center; gap: .75rem; }
.bubblehead strong { color: var(--blue); }
.bubbletools { display: flex; gap: .25rem; margin: 0 0 0 auto; opacity: 0; transition: opacity .15s; }
.bubble:hover .bubbletools, .bubbletools:focus-within { opacity: 1; }
.bubblebody { margin-top: .2rem; white-space: normal; word-break: break-word; }
.when { color: var(--muted); font-size: .8rem; }
.when.edited { margin-top: .25rem; font-style: italic; }
.chatform { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: .25rem; }
.chatform .btn { margin-top: .75rem; }
.chatclosed { margin: 1rem 0 0; text-align: center; }
table.details th { width: 11rem; font-weight: 500; color: var(--text); font-size: .95rem; vertical-align: top; }
.person { display: flex; align-items: center; gap: .5rem; min-height: 1.9rem; }
.person > span:first-child { color: var(--blue); }
.person svg { width: 16px; height: 16px; color: var(--muted); }
.person form { margin: 0 0 0 auto; }
.info { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: auto; border-radius: 50%; background: var(--text); color: var(--card); font-size: .7rem; font-weight: 700; font-style: italic; cursor: help; }
.person form + .info, .person .info + form { margin-left: .25rem; }
.x.sm { width: 24px; height: 24px; font-size: 1rem; }
.btn.tiny { margin-top: .35rem; padding: .25rem .6rem; font-size: .8rem; }
.detailbuttons { display: flex; flex-direction: column; gap: .5rem; margin-top: 1rem; }
.btngroup { display: flex; flex-wrap: wrap; }
.btngroup form { margin: 0; display: contents; }
.btngroup .btn { margin: 0; border-radius: 0; }
.btngroup > :first-child .btn, .btngroup > .btn:first-child { border-radius: 8px 0 0 8px; }
.btngroup > :last-child .btn, .btngroup > .btn:last-child { border-radius: 0 8px 8px 0; }
.btngroup > :only-child .btn, .btngroup > .btn:only-child { border-radius: 8px; }
.btn.danger.soft { background: color-mix(in srgb, var(--red) 75%, #fff 10%); }
.btn.wide { width: 100%; margin: 0; }
.chatform .right { text-align: right; }
.pagehead:has(.tickettitle) { align-items: center; margin-bottom: 0; }
.pagehead:has(.tickettitle) > .btn { margin: 0; }

/* Popups (unten rechts, verschwinden nach 15 Sekunden) */
.toasts { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1000; display: flex; flex-direction: column; gap: .6rem; width: min(24rem, calc(100vw - 2.5rem)); }
.toast { position: relative; display: flex; align-items: flex-start; gap: .75rem; padding: .85rem 2.4rem .95rem .9rem; overflow: hidden; border: 1px solid var(--line); border-left: 4px solid var(--blue); border-radius: 10px; background: var(--card); color: var(--text); text-decoration: none; box-shadow: 0 12px 32px rgba(0, 0, 0, .4); animation: toastin .25s ease-out; transition: opacity .3s, transform .3s; }
.toast.out { opacity: 0; transform: translateX(1rem); }
.toast.invite_faction, .toast.invite_company { border-left-color: #2fa75a; }
.toast.ticket_reply { border-left-color: #d9a21b; }
.toast:hover { border-color: color-mix(in srgb, var(--blue) 50%, var(--line)); }
.toasticon { flex: none; font-size: 1.3rem; line-height: 1.2; }
.toasttext { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.toasttext span { color: var(--muted); font-size: .9rem; overflow-wrap: anywhere; }
.toastclose { position: absolute; top: .4rem; right: .4rem; width: 26px; height: 26px; border: 0; border-radius: 6px; background: none; color: var(--muted); font-size: 1.2rem; cursor: pointer; }
.toastclose:hover { background: var(--ghost); color: var(--text); }
.toastbar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: color-mix(in srgb, var(--blue) 60%, transparent); transform-origin: left; animation: toastbar 15s linear forwards; }
@keyframes toastin { from { opacity: 0; transform: translateY(.75rem); } }
@keyframes toastbar { to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .toast, .toastbar { animation: none; } }

/* Übersicht: Einstellungen, Verwarnungen */
.settinglist { display: flex; flex-direction: column; }
.switch.setting { margin-top: 1rem; align-items: flex-start; }
.switch.setting .track { margin-top: .1rem; }
.switch.setting small { display: block; margin-top: .1rem; }
.warncount { display: inline-flex; align-items: center; justify-content: center; min-width: 1.6rem; height: 1.6rem; padding: 0 .45rem; border-radius: 999px; background: color-mix(in srgb, #e5484d 18%, transparent); color: #e5484d; font-weight: 700; font-size: .9rem; }
button.warncount { border: 0; cursor: pointer; font: inherit; font-weight: 700; }
button.warncount.zero { background: var(--ghost); color: var(--muted); }

/* Badges und Verwarnungen in der Mitgliederliste */
.membername { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .35rem; }
.badgeicon { width: 22px; height: 22px; object-fit: contain; vertical-align: middle; }
.badgeicon.big { width: 40px; height: 40px; }
.badgetag { display: inline-block; padding: .05rem .5rem; border-radius: 999px; background: color-mix(in srgb, var(--blue) 16%, transparent); color: var(--blue); font-size: .75rem; font-weight: 600; }
.badgelegend { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--line); font-size: .9rem; }
.badgelegend > span { display: inline-flex; align-items: center; gap: .4rem; }
.badgechoice { display: inline-flex; align-items: center; gap: .4rem; }
.warnlist { list-style: none; margin: .5rem 0 0; padding: 0; }
.warnlist li { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.warnlist form { margin: 0; }
/* Schild vor dem Namen: rot = Administrator, orange = Leader (bei Leadertickets) */
.shield { display: inline-flex; vertical-align: -2px; margin-right: .3rem; }
.shield svg { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.shield.admin { color: #e5484d; }
.shield.leader { color: #f08c1a; }
.person .shield svg { width: 15px; height: 15px; color: inherit; }

/* Mitgliederliste nach Rängen: Rang als Zwischenüberschrift, Pfeile neben dem Namen */
table.memberlist .rankhead th { width: auto; padding: 1.25rem .5rem .5rem; border-bottom: 2px solid color-mix(in srgb, var(--c) 55%, var(--line)); color: var(--text); font-size: 1rem; font-weight: 700; }
table.memberlist tbody:first-of-type .rankhead th { padding-top: .5rem; }
table.memberlist .rankhead th > * { vertical-align: middle; }
table.memberlist .rankhead .ranklogo { margin-right: .4rem; }
table.memberlist .rankhead .hint { margin-left: .5rem; font-weight: 400; }
table.memberlist tbody tr:last-child td { border-bottom: 0; }
table.memberlist td:first-child { padding-left: 1rem; }
.membername .mname { font-weight: 600; }
.rankarrows { display: inline-flex; gap: .25rem; margin: 0 .2rem; }
.motdcard .motd { font-size: 1.02rem; }
/* Seitenleiste: kleiner grauer Zusatz "(Leader)" */
.navtag { margin-left: .35rem; color: var(--muted); font-size: .78rem; font-weight: 400; opacity: .8; }
/* Fraktionen/Unternehmen bearbeiten: Symbole direkt an Name und Mitgliederzahl */
.orgname .ib, .countcell .ib { width: 30px; height: 30px; }
.countcell { display: inline-flex; align-items: center; gap: .6rem; }
/* Tickets: Filterleisten nur so breit wie ihre Schaltflächen */
.ticketfilters { align-items: flex-start; }

/* Ticket-Kategorien: Bereiche als Mehrfachauswahl (Chips) */
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0 .25rem; }
.chip { position: relative; margin: 0; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: inline-block; padding: .35rem .8rem; border: 1px solid var(--line); border-radius: 999px; background: var(--input); color: var(--muted); font-size: .88rem; }
.chip input:checked + span { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 18%, transparent); color: var(--blue); font-weight: 600; }
.chip input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
#dlg-cats .catrow { display: grid; grid-template-columns: minmax(7rem, 10rem) 1fr auto; align-items: center; gap: .75rem; padding: .6rem 0; border-top: 1px solid var(--line); }
#dlg-cats .catrow .chips { margin: 0; }
@media (max-width: 600px) { #dlg-cats .catrow { grid-template-columns: 1fr; } }
/* Leader-Einstellungen: Speichern-Leiste bleibt beim Scrollen unten sichtbar, endet vor dem Badges-Bereich */
.savebar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: flex-end; gap: 1rem; flex-wrap: wrap; margin: 0 0 2.5rem; padding: .85rem 1.25rem; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: blur(6px); box-shadow: 0 -8px 24px rgba(0, 0, 0, .25); }
.savebar .btn { margin: 0; }
.badgesettings { border-top: 3px solid color-mix(in srgb, var(--blue) 35%, var(--line)); }

/* Spaltenbreiten: .wide nimmt den restlichen Platz, .shrink nur so viel wie nötig */
table th.wide { min-width: 12rem; }
table th.shrink, table td.shrink { width: 1%; white-space: nowrap; }
.coordhint { font-size: .8rem; }

/* Herkunft: InGame (aus dem Spiel übernommen) oder Lokal */
.srctag { display: inline-block; margin-left: .35rem; padding: .02rem .45rem; border-radius: 999px; font-size: .7rem; font-weight: 600; vertical-align: middle; }
.srctag.game { background: color-mix(in srgb, #2fa75a 16%, transparent); color: #2fa75a; }
.srctag.local { background: var(--ghost); color: var(--muted); }
.ingamehint { padding: .5rem .75rem; border-left: 3px solid #2fa75a; background: color-mix(in srgb, #2fa75a 8%, transparent); border-radius: 6px; }
input[readonly] { opacity: .7; cursor: not-allowed; }
.plainlist { margin: .25rem 0 1rem; padding-left: 1.2rem; }
.plainlist li { margin: .35rem 0; }
code { padding: .05rem .35rem; border-radius: 4px; background: var(--input); font-size: .9em; }
.card table .grouphead th { width: auto; padding: 1.1rem .5rem .45rem; border-bottom: 2px solid var(--line); color: var(--text); font-size: .95rem; font-weight: 700; text-transform: none; letter-spacing: 0; }
.card table tbody:first-of-type .grouphead th { padding-top: .4rem; }
.card table .grouphead .hint { margin-left: .4rem; font-weight: 400; }
.subhead { margin: .9rem 0 .35rem; font-size: .85rem; font-weight: 600; color: var(--muted); }
a.brand { color: var(--text); text-decoration: none; padding: 0 .75rem; }
a.brand img { max-height: 58px; max-width: 100%; display: block; }
.loginrow { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .5rem; }
.loginrow .btn { margin: 0; }
.login .check { margin-top: .75rem; }
.commits { list-style: none; margin: 0 0 .75rem; padding: 0; }
.commits li { display: flex; align-items: center; gap: .8rem; padding: .65rem .25rem; border-bottom: 1px solid var(--line); }
.commits li:last-child { border-bottom: 0; }
.commits .avatar { width: 36px; height: 36px; border-radius: 8px; flex: none; background: var(--ghost); }
.commits .cbody { flex: 1; min-width: 0; }
.commits .cmsg { font-weight: 600; overflow-wrap: anywhere; }
.commits .cmsg.hidden { color: var(--muted); letter-spacing: -.05em; }
.commits .sha { flex: none; text-decoration: none; }
.subtabs .hint { font-weight: 400; font-size: .8rem; }

/* Bug Reports und Vorschläge */
.introline { margin: -.5rem 0 1rem; }
.status.accepted { background: color-mix(in srgb, #8b5cf6 20%, transparent); color: #a78bfa; }
.status.done { background: color-mix(in srgb, #2fa75a 18%, transparent); color: #2fa75a; }
.status.rejected { background: var(--ghost); color: var(--muted); }
.prio { display: inline-block; padding: .05rem .55rem; border-radius: 6px; font-size: .8rem; font-weight: 600; background: var(--ghost); color: var(--muted); }
.prio.high { background: color-mix(in srgb, #f08c1a 20%, transparent); color: #f08c1a; }
.prio.critical { background: color-mix(in srgb, #e5484d 20%, transparent); color: #e5484d; }
.locktag { display: inline-flex; align-items: center; gap: .25rem; margin-left: .35rem; padding: .02rem .5rem; border-radius: 999px; background: color-mix(in srgb, #f08c1a 16%, transparent); color: #f08c1a; font-size: .72rem; font-weight: 600; vertical-align: middle; }
.locktag svg { width: 12px; height: 12px; }
.switch.setting svg { width: 14px; height: 14px; vertical-align: -2px; }
.votes { display: inline-flex; gap: .35rem; margin: 0; }
.vote { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .55rem; border: 1px solid var(--line); border-radius: 999px; background: var(--input); color: var(--muted); font: inherit; font-size: .85rem; cursor: pointer; }
.vote svg { width: 14px; height: 14px; }
.vote.down svg { transform: scaleY(-1); }
button.vote:hover { border-color: var(--blue); color: var(--text); }
.vote.on { border-color: #2fa75a; background: color-mix(in srgb, #2fa75a 16%, transparent); color: #2fa75a; font-weight: 600; }
.vote.down.on { border-color: #e5484d; background: color-mix(in srgb, #e5484d 16%, transparent); color: #e5484d; }
.vote.ro { cursor: default; }
.bubble.opening { align-self: stretch; max-width: none; border-left: 3px solid var(--blue); }
.tickettitle > svg { width: 24px; height: 24px; color: var(--muted); }
.detailbuttons .row { gap: 0 .75rem; align-items: flex-end; }
.detailbuttons .row label { margin-top: 0; }
.detailbuttons .row .btn { margin: 0; }
.detailbuttons .row > div:last-child { flex: 0 0 auto; }

/* Marktplatz */
.marketsearch .row { gap: 0 .75rem; max-width: 34rem; }
.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.25rem; }
.mcard { display: flex; flex-direction: column; margin: 0; padding: 0; overflow: hidden; color: var(--text); text-decoration: none; transition: border-color .15s, transform .15s; }
.mcard:hover { border-color: color-mix(in srgb, var(--blue) 60%, var(--line)); transform: translateY(-2px); }
.mpic { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--input); }
.mpic.none { display: flex; align-items: center; justify-content: center; color: var(--muted); }
.mpic.none svg { width: 44px; height: 44px; opacity: .6; }
.mpic.big { aspect-ratio: 16 / 9; border-radius: 8px; margin-bottom: 1rem; object-fit: contain; }
.mbody { display: flex; flex-direction: column; gap: .2rem; padding: .9rem 1rem 1rem; flex: 1; }
.mtitle { font-weight: 600; overflow-wrap: anywhere; }
.mprice { margin-top: .35rem; font-size: 1.15rem; font-weight: 700; }
.mbuy { display: flex; align-items: center; gap: .3rem; color: #2fa75a; font-size: .9rem; font-weight: 600; }
.mbuy svg, .mfoot svg { width: 14px; height: 14px; }
.mfoot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; margin-top: auto; padding-top: .5rem; }
.mfoot .hint { display: inline-flex; align-items: center; gap: .3rem; }
.marketlayout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, 28rem); gap: 1.5rem; align-items: start; margin-top: 1rem; }
@media (max-width: 1000px) { .marketlayout { grid-template-columns: 1fr; } }
.mcat { display: inline-flex; align-items: center; gap: .35rem; padding: .1rem .65rem; border-radius: 999px; background: var(--ghost); font-size: .85rem; }
.mcat svg { width: 14px; height: 14px; }
.mdesc { margin: .75rem 0 1rem; overflow-wrap: anywhere; }
.buybox > p:first-child { margin-top: 0; }
.buybox .ok { color: var(--ok); font-weight: 600; }
.pricerow { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; margin-top: .75rem; }
.pricerow.buynow { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.bigprice { font-size: 1.6rem; font-weight: 700; }
.buybox .row { gap: 0 .75rem; align-items: flex-end; }
.buybox .row > div:last-child { flex: 0 0 auto; }
.buybox .btn svg, .btn.green.wide svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: .2rem; }
.buybox .btn.wide { margin-top: .75rem; }
.buybox form + form .btn.danger, .buybox > form:last-child .btn.danger { margin-top: 1.25rem; }
.row > div.small { flex: 0 1 7rem; }
.mpic.none.big { aspect-ratio: 16 / 5; }
.ticketlist td .status { white-space: nowrap; }

/* Spiel- und Admin-Seiten aus dem alten ControlPanel */
.mono { font-family: Consolas, "Cascadia Mono", monospace; font-size: .85rem; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 0 .25rem; }
.pager .btn { margin: 0; }
.statgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .75rem; }
.stat { display: flex; flex-direction: column; gap: .15rem; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: 10px; background: var(--input); }
.stat strong { font-size: 1.35rem; }
.statgrid.tiles { margin-bottom: 1.5rem; }
.statgrid.tiles .stat { margin: 0; background: var(--card); color: var(--text); text-decoration: none; }
a.stat:hover { border-color: color-mix(in srgb, var(--blue) 60%, var(--line)); }
.boardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 1.25rem; margin-bottom: 1rem; }
.boardgrid > .card { margin: 0; }
.board tr.me td { background: color-mix(in srgb, var(--blue) 14%, transparent); font-weight: 600; }
.board td { padding: .45rem .5rem; }
.orglink { display: block; color: var(--text); text-decoration: none; }
.orglink:hover { border-color: color-mix(in srgb, var(--c) 60%, var(--line)); }
.orglink p { margin: .4rem 0 0; }
.orglink.inactive { opacity: .55; }
.subtabs.logtabs { flex-wrap: wrap; }
.onlinecount { margin: 0 0 1rem; }
.onlinecount .chip span { color: var(--text); }
.texactions { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; }
.texactions .btn { margin: 0; }
.pollcard h2 { font-size: 1.3rem; margin-bottom: .25rem; }
.pollbar { display: flex; height: 10px; margin: 1rem 0 .5rem; overflow: hidden; border-radius: 999px; background: var(--ghost); }
.pollbar .yes { background: #2fa75a; }
.pollbar .no { background: #e5484d; }
.ok { color: var(--ok); }
.bad { color: #e5484d; }
.btn.on { box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 35%, transparent); }
.console { max-height: 22rem; overflow: auto; margin: 1rem 0 0; padding: .75rem; border-radius: 8px; background: #05070d; color: #c9d1d9; font-size: .8rem; white-space: pre-wrap; }
.maps2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 1100px) { .maps2 { grid-template-columns: 1fr; } }
.inline select { min-width: 9rem; padding: .35rem .5rem; }
.subtabs { flex-wrap: wrap; }

/* Links: blau, ohne Unterstreichung (beim Drüberfahren schon) */
a { text-decoration: none; }
a:hover { text-decoration: underline; }
a.btn:hover, .side nav a:hover, a.card:hover, a.mcard:hover, a.stat:hover, .subtabs a:hover, .segbtns a:hover, a.brand:hover, .top a:hover, a.toast:hover { text-decoration: none; }

/* Tabellen: Spalten nehmen sich den Platz, den der Inhalt braucht; lange Texte brechen um */
table { table-layout: auto; }
td { overflow-wrap: break-word; }
td a[href^="player.php"] { white-space: nowrap; }
td.nowrap, .nowrap { overflow-wrap: normal; }

/* Seitenleiste: Kategorien einklappbar */
.navgroup { margin-bottom: .1rem; }
button.navhead { display: flex; align-items: center; gap: .45rem; width: 100%; border: 0; background: none; font: inherit; font-size: .8rem; font-weight: 600; color: var(--muted); text-align: left; cursor: pointer; border-radius: 6px; }
button.navhead:hover { color: var(--text); background: color-mix(in srgb, var(--ghost) 50%, transparent); }
.navhead svg { width: 15px; height: 15px; flex: none; }
.navhead .chev { margin-left: auto; font-size: .8rem; transition: transform .15s; }
.navgroup.closed .chev { transform: rotate(-90deg); }
.navgroup.closed .navitems { display: none; }
.navhead .groupdot { display: none; margin-left: .3rem; }
.navgroup.closed .groupdot { display: inline-block; }
.navgroup:first-child .navhead { padding-top: .4rem; }

/* Bilder aus dem Spiel: Skins, Fahrzeuge, Waffen */
.who { display: inline-flex; align-items: center; gap: .5rem; }
img.avatar { width: 30px; height: 30px; flex: none; border-radius: 50%; object-fit: cover; background: var(--ghost); }
td img.avatar { width: 28px; height: 28px; }
.vehcell { display: flex; align-items: center; gap: .65rem; }
.vehthumb { width: 64px; height: 40px; flex: none; border-radius: 6px; object-fit: cover; background: var(--input); }
.vehthumb.none { display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
.mcard .vehthumb { width: 46px; height: 28px; }
.vehgrid .mpic { object-fit: cover; }
.vehcounts { display: grid; grid-template-columns: auto 1fr; gap: .15rem .75rem; margin: .5rem 0 0; font-size: .9rem; }
.vehcounts dt { color: var(--muted); }
.vehcounts dd { margin: 0; text-align: right; font-weight: 600; }
.weapon { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.weapon img { width: 28px; height: 28px; object-fit: contain; }
.skinfull { width: 110px; height: 230px; flex: none; object-fit: cover; object-position: center top; border-radius: 10px; background: var(--input); }
.profilecard { display: flex; gap: 1.5rem; align-items: flex-start; }
.profilecard table { flex: 1; }
@media (max-width: 600px) { .profilecard, .charhead { flex-direction: column; } }

/* Charakter */
.charhead { display: flex; gap: 1.5rem; align-items: flex-start; }
.charhead h1 { margin: 0 0 .25rem; }
.charhead > div { flex: 1; min-width: 0; }
.infogrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.25rem; margin-bottom: 1.5rem; }
.infogrid > .card { margin: 0; }
.infobox dl { display: grid; grid-template-columns: auto 1fr; gap: .55rem 1rem; margin: 0; }
.infobox dt { color: var(--muted); }
.infobox dd { margin: 0; text-align: right; font-weight: 600; }
.itemlist { list-style: none; margin: 0; padding: 0; }
.itemlist li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--line); }
.itemlist li:last-child { border-bottom: 0; }
.itemlist li.bag { padding-top: .9rem; border-bottom: 0; color: var(--muted); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.itemlist li.bag:first-child { padding-top: 0; }

/* Mehr Luft auf Statistik-, Dashboard- und Achievement-Seiten */
.boardgrid { gap: 1.5rem; margin-bottom: 2rem; }
.board td { padding: .6rem .75rem; }
.board td.shrink { color: var(--muted); }
.board .hint { margin: .75rem .25rem .25rem; }
h2.subhead { margin: 2rem 0 .9rem; font-size: 1rem; color: var(--text); }
.statgrid { gap: 1rem; }
.statgrid.tiles { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 1.25rem; margin-bottom: 2rem; }
.statgrid.tiles .stat { padding: 1.1rem 1.25rem; gap: .35rem; }
.stat strong { font-size: 1.5rem; line-height: 1.2; }
.stat .statsub { color: var(--muted); font-size: .85rem; line-height: 1.35; }
.achlist td { padding: .85rem .75rem; }
.achlist td strong { display: inline-block; margin-bottom: .2rem; }
.tablewrap td, .tablewrap th { padding-left: .75rem; padding-right: .75rem; }
.mgrid { gap: 1.5rem; }

/* Seitenleiste: leichte Abstände und Trennlinie zwischen den Kategorien */
.side nav .navgroup + .navgroup { margin-top: .55rem; padding-top: .45rem; border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.side nav .navgroup .navhead { padding-top: .45rem; padding-bottom: .35rem; }
.side nav .navitems { padding-bottom: .15rem; }

/* Menü am Namen oben rechts */
.usermenu { position: relative; }
.usermenu > summary { list-style: none; cursor: pointer; padding: .3rem .55rem; border-radius: 8px; user-select: none; }
.usermenu > summary::-webkit-details-marker { display: none; }
.usermenu > summary:hover, .usermenu[open] > summary { background: var(--ghost); }
.usermenu .chev { font-size: .75rem; color: var(--muted); transition: transform .15s; }
.usermenu[open] .chev { transform: rotate(180deg); }
.usermenulist { position: absolute; right: 0; top: calc(100% + .4rem); z-index: 50; min-width: 12rem; padding: .35rem; border: 1px solid var(--line); border-radius: 10px; background: var(--card); box-shadow: 0 12px 32px rgba(0, 0, 0, .35); }
.usermenulist a { display: flex; align-items: center; gap: .6rem; padding: .55rem .75rem; border-radius: 6px; color: var(--text); }
.usermenulist a:hover { background: var(--ghost); text-decoration: none; }
.usermenulist a.danger, .usermenulist button.danger { color: #e5484d; }
.usermenulist svg { width: 16px; height: 16px; color: var(--muted); }
.usermenulist a.danger svg, .usermenulist button.danger svg { color: inherit; }

/* Fahrzeugkarten wie im alten ControlPanel */
.vehcards { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.vehpic { position: relative; }
.vehpic .mpic { display: block; aspect-ratio: 16 / 10; object-fit: cover; }
.vtag { position: absolute; padding: .15rem .55rem; color: #fff; font-size: .85rem; font-weight: 600; line-height: 1.4; }
.vtag.left { top: 0; left: 0; border-radius: 0 0 6px 0; }
.vtag.right { top: 0; right: 0; border-radius: 0 0 0 6px; }
.vtag.leftbottom { bottom: 0; left: 0; border-radius: 0 6px 0 0; }
.vtag.premium { background: #3d9a5c; }
.vtag.unique { background: #c9534f; }
.vtag.ultra { background: #d98b1a; }
.vtag.rare { background: #3d8fd9; }
.vehtitle { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.vehtitle .mtitle { font-size: 1.1rem; }
.vehbtns { display: flex; align-items: center; gap: .35rem; flex: none; }
.vehbtns form { display: contents; }
.infobtn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-top: .2rem; padding: 0; border: 0; border-radius: 50%; background: var(--muted); color: var(--card); font: italic 700 .75rem/1 Georgia, serif; cursor: pointer; }
.infobtn:hover { background: var(--text); }
.vehinfo { margin: .75rem 0 0; }
.vehinfo dt { font-weight: 700; font-size: .9rem; }
.vehinfo dd { margin: .1rem 0 .6rem; }
.paint { display: inline-flex; gap: 2px; vertical-align: middle; }
.paint span { width: 22px; height: 22px; border: 1px solid rgba(255, 255, 255, .25); }
.vehmodal { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; }
.vehmodal h3 { margin: .5rem 0 0; font-size: 1.3rem; }
.vehdetailpics { display: flex; flex-direction: column; gap: .6rem; }
.vehdetailpics .mpic { border-radius: 6px; aspect-ratio: 16 / 10; object-fit: cover; }
.vehmap { width: 100%; aspect-ratio: 1; border-radius: 6px; background: var(--input); }
.modalfoot { display: flex; justify-content: flex-end; margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.modalfoot .btn { margin: 0; }
@media (max-width: 600px) { .vehmodal { grid-template-columns: 1fr; } }

/* Spielerprofil: online/offline, Menü „MTA Server“, Strafen */
.onlinetag { display: inline-block; margin-left: .35rem; padding: .05rem .5rem; border-radius: 4px; font-size: 1rem; font-weight: 700; vertical-align: middle; color: #fff; }
.onlinetag.on { background: #3d9a5c; }
.onlinetag.off { background: #c9534f; }
.pagehead h1 .shield { margin-left: .5rem; }
.pageactions { display: flex; align-items: center; gap: .5rem; }
.pageactions .btn { margin: 0; }
.mtamenu > summary.btn { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem 1rem; color: #fff; }
.mtamenu > summary.btn:hover, .mtamenu[open] > summary.btn { background: var(--red); filter: brightness(1.1); }
.mtamenu .chev { color: #fff; }
.mtamenu > summary.btn svg { width: 16px; height: 16px; }
.mtamenu.green > summary.btn:hover, .mtamenu.green[open] > summary.btn { background: #2fa75a; filter: brightness(1.1); }
.mtamenu .usermenulist svg { flex: none; width: 16px; height: 16px; color: var(--muted); }
.mtamenu .usermenulist button { white-space: nowrap; }
.usermenulist button { display: flex; width: 100%; align-items: center; gap: .6rem; padding: .55rem .75rem; border: 0; border-radius: 6px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.usermenulist button:hover { background: var(--ghost); }
.tableactions { display: flex; justify-content: flex-end; padding: .5rem 0 .75rem; }
.tableactions .btn { margin: 0; }
tr.struck td { text-decoration: line-through; color: var(--muted); }
.inputunit { display: flex; }
.inputunit input { border-radius: 8px 0 0 8px !important; }
.inputunit span { display: flex; align-items: center; padding: 0 .9rem; border: 1px solid var(--line); border-left: 0; border-radius: 0 8px 8px 0; background: var(--ghost); color: var(--muted); white-space: nowrap; }
.modalfoot .btn + .btn { margin-left: .5rem; }
.modal h3 { margin: 1.25rem 0 .25rem; }
img.shot { max-width: 220px; border-radius: 6px; display: block; }

/* Statistiken wie im alten ControlPanel: Reiter als Pillen, Tabellen in zwei Spalten */
.pills { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.5rem; }
.pills a { padding: .5rem 1rem; border-radius: 8px; color: var(--blue); font-weight: 600; }
.pills a:hover { background: var(--ghost); text-decoration: none; }
.pills a.active { background: var(--blue); color: #fff; }
.statcols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.statcols > .card { margin: 0; }
.stackcol { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
.stackcol > .card { margin: 0; }
.gprop { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0 0 .4rem; }
.gprop svg { width: 18px; height: 18px; flex: none; }
.grplimits { list-style: none; margin: 0; padding: 0; }
.grplimits li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem 0; border-top: 1px solid var(--line); }
.grplimits li:first-child { border-top: 0; padding-top: 0; }
.grplimits li > div { min-width: 0; }
.grplimits .status { flex: none; }
@media (max-width: 1000px) { .statcols { grid-template-columns: 1fr; } }
.board tr.sep td { border-top: 2px solid var(--line); }

/* Ticket-Statistiken */
.tablefilter { padding: .25rem 0 .5rem; }
.tablefilter .switch { margin-top: 0; }
table.tstats td, table.tstats th { padding: .5rem .45rem; text-align: center; }
table.tstats td:first-child, table.tstats th:first-child { text-align: left; }
table.tstats td.none { color: var(--muted); opacity: .5; }
table.tstats td.hit { color: var(--blue); font-weight: 700; }
.tchart { width: 100%; height: 160px; display: block; }
.tchart polyline { fill: none; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.tchart .resolved { stroke: #3b82f6; }
.tchart .consulted { stroke: #2fa75a; }
.tchart .axis { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.tlegend { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-top: .5rem; font-size: .85rem; }
.tlegend span.resolved::before, .tlegend span.consulted::before { content: ""; display: inline-block; width: 12px; height: 3px; margin-right: .35rem; vertical-align: middle; background: #3b82f6; }
.tlegend span.consulted::before { background: #2fa75a; }
.tlegend .hint { margin-left: auto; }

/* Devmode */
.devbar { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin: -1rem 0 1.25rem; padding: .6rem .9rem; border-radius: 8px; background: color-mix(in srgb, #e5484d 18%, transparent); border: 1px solid color-mix(in srgb, #e5484d 50%, transparent); color: var(--text); font-size: .9rem; }
.devbar strong { color: #e5484d; text-transform: uppercase; letter-spacing: .05em; }
.devbar svg { color: #e5484d; }
.devbar.local { background: color-mix(in srgb, #3e93ff 16%, transparent); border-color: color-mix(in srgb, #3e93ff 50%, transparent); }
.devbar.local strong, .devbar.local svg { color: #3e93ff; }
.usermenulist form { margin: 0; }
.usermenulist button.devon { color: #e5484d; }

/* Spielerakte verwalten */
.orgmanage { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 1rem; }
.orgmanage > div { display: flex; flex-direction: column; gap: .35rem; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 10px; background: var(--input); }
.orgmanage .btngroup { margin-top: .4rem; }
.btn[disabled] { opacity: .45; cursor: not-allowed; filter: none; }
.modalfoot .btn.danger.soft:first-child { margin-right: auto; }

/* Abzeichen vor Namen: VIP-Stern, Leader-L */
.pname { display: inline-flex; align-items: center; gap: .1rem; white-space: nowrap; }
.vipstar { display: inline-flex; margin-right: .3rem; color: #f5c518; font-size: 1rem; line-height: 1; text-shadow: 0 0 6px rgba(245, 197, 24, .35); }
.leaderbadge { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-right: .3rem; border-radius: 4px; background: #f08c1a; color: #fff; font-size: .7rem; font-weight: 800; line-height: 1; vertical-align: 1px; }

/* Spieler-Übersicht im Design des alten ControlPanels: Skin links, daneben Spalten */
.playerhead h1 { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.playerhead h1 .onlinetag { margin-left: 0; }
.rankname { padding: .1rem .6rem; border-radius: 6px; background: color-mix(in srgb, var(--c) 22%, transparent); color: var(--c); font-size: 1rem; font-weight: 700; }
.overview { display: grid; grid-template-columns: 110px repeat(auto-fill, minmax(13.5rem, 1fr)); gap: 1rem; align-items: start; margin-bottom: 1.5rem; }
.overview > .card { margin: 0; }
.ovskin { padding: 0; overflow: hidden; height: 100%; min-height: 230px; display: flex; }
.ovskin .skinfull { width: 100%; height: 100%; border-radius: 0; }
.ovcard { padding: 1.1rem 1.25rem; }
.ovcard dl { margin: 0; }
.ovcard dt { font-weight: 700; font-size: .9rem; }
.ovcard dd { margin: .1rem 0 .7rem; }
.ovcard dd:last-child { margin-bottom: 0; }
.ovcard h3 { margin: 0 0 .5rem; font-size: .95rem; }
.ovlist .itemlist li { padding: .3rem 0; font-size: .9rem; }
.ovlist .weapon img { width: 22px; height: 22px; }
.ovinv { max-height: 22rem; overflow-y: auto; }
@media (max-width: 600px) { .overview { grid-template-columns: 1fr; } .ovskin { min-height: 0; justify-content: center; } .ovskin .skinfull { width: 110px; } }

/* Modul Fahrzeuge & Skins */
.rankskins { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 1rem; }
.rankskin, .skincard { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .75rem .5rem; border: 1px solid var(--line); border-radius: 10px; background: var(--input); text-align: center; }
.skinthumb { width: 72px; height: 150px; object-fit: cover; object-position: center top; border-radius: 6px; background: var(--ghost); }
.skinthumb.none { display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 1.5rem; }
.skingrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: .9rem; }
.skincard.used { border-color: color-mix(in srgb, var(--blue) 55%, var(--line)); }

/* Modul Besprechungsprotokoll */
.meetingform h3, .topic h3 { margin: 0 0 .6rem; font-size: 1rem; }
.attgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; }
.attgrid > div { display: flex; flex-direction: column; gap: .15rem; padding: .75rem .9rem; border: 1px solid var(--line); border-radius: 10px; background: var(--input); }
.attgrid .check { margin: .2rem 0 0; }
.rowsbox { display: flex; flex-direction: column; gap: .6rem; margin-bottom: .6rem; }
.rowitem { display: grid; grid-template-columns: minmax(10rem, 1fr) minmax(14rem, 2fr) auto; gap: .5rem; align-items: start; }
.rowitem.change { grid-template-columns: minmax(10rem, 1.2fr) minmax(8rem, .8fr) minmax(10rem, 1.5fr) auto; }
@media (max-width: 700px) { .rowitem, .rowitem.change { grid-template-columns: 1fr; } }
.topic { padding: .75rem 0; border-bottom: 1px solid var(--line); }
.topic:last-child { border-bottom: 0; }
.topic p { margin: 0; }
.savebar .btn.danger.soft { margin-right: auto; }
.nameedit { display: inline-flex; align-items: center; gap: .45rem; }
.orgtag { display: inline-flex; align-items: center; gap: .4rem; color: var(--text); font-weight: 600; }
.orgtag::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent); }
.orgtag:hover { color: var(--c); text-decoration: none; }
.orgchip span { border-color: var(--c) !important; background: color-mix(in srgb, var(--c) 18%, transparent) !important; }
/* Übersicht: Skin fest links, Karten fließen daneben und brechen gleichmäßig um */
.overview { display: flex; flex-wrap: wrap; align-items: stretch; }
.overview > .ovskin { flex: 0 0 110px; min-height: 230px; }
.overview > .ovcard { flex: 1 1 13.5rem; max-width: 22rem; }
.overview > .ovlist { align-self: flex-start; }
@media (max-width: 600px) { .overview > .ovskin { flex-basis: 100%; } .overview > .ovcard { max-width: none; } }
/* Inventar & Waffenbox */
/* Inventar / Waffenbox: Kästchen so breit wie ihr Inhalt (mind. 15rem), lange Einträge machen das Kästchen breiter statt umzubrechen */
.invgrid { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
.invgrid > .card { flex: 1 1 auto; min-width: min(15rem, 100%); max-width: 100%; }
.invgrid > .card { margin: 0; }
.card.invedit { margin-top: 1.5rem; }
.invslot { display: flex; flex-direction: column; gap: .35rem; }
.infinite { font-size: 1.25rem; font-weight: 700; line-height: 1; vertical-align: -2px; }

/* Tabellenzellen mit Bild + Name (Avatar, Fahrzeug): Zelle bleibt eine Tabellenzelle, damit die Trennlinien der Zeilen gerade bleiben */
td.vehcell { display: table-cell; white-space: nowrap; }
td.vehcell > img, td.vehcell > .vehthumb, td.vehcell > .avatar { display: inline-block; vertical-align: middle; margin-right: .6rem; }
td.vehcell > span, td.vehcell > .pname { vertical-align: middle; }

/* Online-Status hinter Namen; gesperrte Symbol-Knöpfe grau */
.statustag { display: inline-block; margin-left: .45rem; padding: .02rem .45rem; border-radius: 999px; font-size: .72rem; font-weight: 700; vertical-align: middle; }
.statustag.on { background: color-mix(in srgb, #2fa75a 20%, transparent); color: #2fa75a; }
.statustag.off { background: var(--ghost); color: var(--muted); }
.statustag.unknown { background: var(--ghost); color: var(--muted); }
.ib[disabled] { --ic: var(--muted); opacity: .45; cursor: not-allowed; }
.ib[disabled]:hover { background: none; }

/* Gruppen: sortierbare Spalten, Balkendiagramme */
a.sortlink { color: var(--blue); }
.barchart { width: 100%; height: 160px; display: block; }
.barchart .axis { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.barlabels { display: flex; justify-content: space-around; margin-top: .25rem; color: var(--muted); font-size: .7rem; }
.tlegend span i { display: inline-block; width: 10px; height: 10px; margin-right: .35rem; border-radius: 2px; vertical-align: middle; }

/* Tankstand bei Fahrzeugen */
.fuel { display: inline-flex; align-items: center; gap: .5rem; font-variant-numeric: tabular-nums; }
.fuelbar { display: inline-block; width: 90px; height: 8px; border-radius: 999px; background: var(--ghost); overflow: hidden; }
.fuelbar > span { display: block; height: 100%; border-radius: 999px; background: #2fa75a; }
.fuel.mid .fuelbar > span { background: #d9a21b; }
.fuel.low .fuelbar > span { background: #e5484d; }
.fuel.stock.mid .fuelbar > span { background: #e8902f; } /* Lager eines Geschäfts: orange bis 50 % */
.ranknum { display: inline-flex; align-items: center; justify-content: center; min-width: 1.35rem; height: 1.35rem; margin-left: .45rem; padding: 0 .35rem; border-radius: 6px; background: color-mix(in srgb, var(--c, var(--blue)) 22%, transparent); color: var(--c, var(--blue)); font-size: .75rem; font-weight: 700; vertical-align: middle; }

/* Dashboard: farbige Kennzahl-Kacheln, Liniendiagramme */
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.kpi { display: flex; flex-direction: column; gap: .2rem; padding: 1.1rem 1.25rem; border-radius: 10px; color: #fff; text-decoration: none; background: linear-gradient(135deg, var(--k1), var(--k2)); box-shadow: 0 6px 18px rgba(0, 0, 0, .25); transition: transform .15s; }
.kpi strong { font-size: 1.8rem; line-height: 1.1; }
.kpi span { font-size: .9rem; opacity: .9; }
a.kpi:hover { transform: translateY(-2px); text-decoration: none; }
.kpi.blue { --k1: #2f8fe8; --k2: #1d6fd0; }
.kpi.violet { --k1: #4b2bd6; --k2: #3218a8; }
.kpi.orange { --k1: #e8902f; --k2: #c56b12; }
.kpi.green { --k1: #2fa75a; --k2: #1d7f42; }
.kpi.red { --k1: #d9534f; --k2: #a8322e; }
.kpi.gray { --k1: #4a5068; --k2: #33384c; }
.linechart { width: 100%; height: auto; display: block; }
.linechart .grid { stroke: var(--line); stroke-width: 1; }
.linechart .ylab { fill: var(--muted); font-size: 11px; text-anchor: end; }
.linechart .xlab { fill: var(--muted); font-size: 10px; text-anchor: middle; }
.linechart polyline { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chartlegend { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin-bottom: .6rem; font-size: .8rem; }
.chartlegend i { display: inline-block; width: 14px; height: 4px; margin-right: .35rem; border-radius: 2px; vertical-align: middle; }
.cardtitle a.hint { margin-left: .5rem; font-weight: 400; }
.kpis { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .kpis { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .kpis { grid-template-columns: repeat(6, 1fr); } }
table.compact th, table.compact td { padding: .5rem .55rem; }
table.compact .pname { white-space: nowrap; }
.statcols + .statcols, .statcols + .card { margin-top: 1.5rem; }
@media (max-width: 1500px) { .statcols.tablecols { grid-template-columns: 1fr; } }
.kvgrid { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1.25rem; }
.kvgrid dt, .kvgrid dd { margin: 0; }
.kvgrid dt { color: var(--muted); font-weight: 600; }

/* Kasse direkt in der Mitgliederliste (Organisationen und Gruppen) */
.kassebar { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem 1rem; margin: 0 0 1rem; padding: .6rem .9rem; border: 1px solid var(--line); border-left: 3px solid #2fa75a; border-radius: 8px; background: rgba(47, 167, 90, .08); }
.kassebar > span:first-child { display: inline-flex; align-items: center; gap: .45rem; color: var(--muted); font-weight: 600; }
.kassebar strong { font-size: 1.1rem; }
/* Message of the Day: kompakter */
.motdcard { padding: .8rem 1.1rem; }
.motdcard .cardhead { margin-bottom: .3rem; }
.motdcard h2 { font-size: 1rem; margin: 0; }
.motdcard .motd { font-size: .92rem; }
/* eigene Organisationen oben auf „Organisationen“ */
.mineorgs { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.orglink.mine { border-color: var(--c); background: color-mix(in srgb, var(--c) 8%, var(--card)); }
.orglink.mine .hint { display: block; margin-top: .3rem; font-size: .8rem; }
/* Bereichsüberschrift („Deine Fraktion“, „Alle Fraktionen“) – eine Stufe über den Kategorien (h2.subhead) */
h2.sectionhead { margin: 0 0 1rem; font-size: 1.15rem; }
h2.sectionhead + h2.subhead { margin-top: .5rem; }
.subtabs a .dot { margin-left: .35rem; }

/* Ticket-Kategorien: Zusatzfelder beim Erstellen und Angaben im Ticket */
.catfields { border: 1px solid var(--line); border-radius: 8px; padding: .75rem 1rem .25rem; margin: .5rem 0 1rem; }
.catfield { margin-bottom: .75rem; }
.catfield label { margin-top: 0; }
.fieldhint { margin: .25rem 0 0; font-size: .82rem; }
.multinames { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .4rem; }
.ticketfields { margin-bottom: 1.25rem; }
.ticketfields .kvgrid dd { white-space: normal; overflow-wrap: anywhere; }
.catinfo { display: block; font-weight: 400; font-size: .8rem; }
.importrow { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 1rem 0; }
.importrow .hint { flex: 1 1 16rem; }

/* Kategorien bei Bug Reports (orange wie im alten ControlPanel) und Vorschlägen (dunkel) */
.cattag { display: inline-block; padding: .1rem .45rem; border-radius: 4px; font-size: .78rem; font-weight: 600; color: #fff; background: #3a3f4b; white-space: nowrap; }
.cattag.bug { background: #d2691e; }

/* Stimmen einer Meldung (Team ab Administrator): Teammitglieder oben */
.votecols { gap: 1.25rem; }
.votehead { display: flex; align-items: center; gap: .4rem; margin: 0 0 .5rem; font-size: 1rem; }
.votehead.up svg { color: #2fa75a; }
.votehead.down svg { color: #e5484d; transform: rotate(180deg); }
.voterlist { list-style: none; margin: 0; padding: 0; }
.voterlist li { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .35rem 0; border-bottom: 1px solid var(--line); }
.voterlist li.team + li:not(.team) { border-top: 2px solid var(--line); }

/* Posteingang oben rechts (zwischen Lampe und Profil) und Seite inbox.php */
.inboxmenu > summary.iconbtn { position: relative; padding: 0; }
.inboxcount { position: absolute; top: -6px; right: -7px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #e5484d; color: #fff; font-size: .7rem; font-weight: 700; line-height: 18px; text-align: center; }
.inboxdrop { width: min(23rem, calc(100vw - 2rem)); padding: 0; overflow: hidden; }
.inboxhead { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .7rem .9rem; border-bottom: 1px solid var(--line); }
.inboxhead form { margin: 0; }
.linkbtn { padding: 0; border: 0; background: none; color: var(--blue); font: inherit; font-size: .85rem; cursor: pointer; }
.linkbtn:hover { text-decoration: underline; }
.inboxlist { list-style: none; margin: 0; padding: 0; }
.inboxlist.compact { max-height: 22rem; overflow-y: auto; }
.inboxlist li + li { border-top: 1px solid var(--line); }
.inboxlist a, .usermenulist .inboxlist a { display: flex; align-items: flex-start; gap: .7rem; padding: .65rem .9rem; border-radius: 0; color: var(--text); }
.inboxlist a:hover { background: var(--ghost); text-decoration: none; }
.inboxlist li.unread { background: color-mix(in srgb, var(--blue) 9%, transparent); }
.inboxlist li.unread strong::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: .4rem; border-radius: 50%; background: var(--blue); vertical-align: middle; }
.inboxicon { flex: none; color: var(--muted); padding-top: .1rem; }
.inboxtext { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1; }
.inboxtext strong { font-weight: 600; font-size: .9rem; overflow-wrap: anywhere; }
.inboxtext span { color: var(--muted); font-size: .85rem; }
.inboxlist li:not(.unread) strong { font-weight: 400; color: var(--muted); }
.inboxlist .when { color: var(--muted); font-size: .8rem; white-space: nowrap; }
.inboxdrop .empty { padding: 1rem .9rem; margin: 0; }
.inboxall, .usermenulist a.inboxall { display: block; padding: .6rem .9rem; border-top: 1px solid var(--line); border-radius: 0; text-align: center; color: var(--blue); font-size: .88rem; }
.inboxpage { padding: 0; overflow: hidden; }
.inboxpage .pager { padding: .75rem 1rem; }
/* Liste am rechten Rand der Kopfzeile ausrichten (nicht am Symbol), damit sie auf schmalen Bildschirmen nicht übersteht */
.top { position: relative; }
.inboxmenu { position: static; }
.inboxmenu .inboxdrop { right: 1rem; top: calc(100% + .3rem); }
.usermenulist .linkbtn { width: auto; padding: 0; color: var(--blue); background: none; }

/* Personalentscheidungen: Mitglied, Art, neuer Rang (nur bei Beförderung/Degradierung), Grund */
.rowitem.change { display: flex; flex-wrap: wrap; }
.rowitem.change > select[data-change-user] { flex: 1.4 1 13rem; }
.rowitem.change > select[data-change-kind] { flex: .8 1 9rem; }
.rowitem.change > select[data-change-rank] { flex: .9 1 9rem; }
.rowitem.change > select[data-change-rank][hidden] { display: none; }
.rowitem.change > input { flex: 1.5 1 12rem; }
.changelist li { align-items: flex-start; }

/* Kasse als kleine Box über der Message of the Day */
.kassebox { display: inline-flex; align-items: center; gap: 1rem; padding: .65rem 1.1rem; border-left: 3px solid #2fa75a; }
.kassebox > span { display: inline-flex; align-items: center; gap: .45rem; color: var(--muted); font-weight: 600; }
.kassebox strong { font-size: 1.15rem; }

/* Item-Bilder (aus dem Gamemode) im Inventar und Marktplatz */
.itemimg { width: 32px; height: 32px; object-fit: contain; flex: none; }
.itemimg.noimg { display: inline-block; border-radius: 6px; background: var(--ghost); }
.itemlist.items .itemname { display: inline-flex; align-items: center; gap: .6rem; }

/* Marktplatz: Bild aus dem Spiel (Fahrzeug, Waffe, Item) und Vorschau beim Einstellen */
.mpic.refpic { display: flex; align-items: center; justify-content: center; background: var(--ghost); }
.mpic.refpic img { width: 100%; height: 100%; object-fit: cover; }
.mpic.refpic.item img, .mpic.refpic.weapon img { width: 60%; height: 60%; object-fit: contain; }
.refpreview { display: flex; align-items: center; gap: .75rem; margin: .5rem 0; padding: .5rem .75rem; border: 1px solid var(--line); border-radius: 8px; }
.refpreview img { width: 72px; height: 48px; object-fit: contain; }
.refpreview[hidden] { display: none; } /* sonst überschreibt display:flex das Ausblenden (Kategorie gewechselt) */
.warn { color: #e8902f; }

/* Online-Punkt am eigenen Avatar oben rechts */
.avatarwrap { position: relative; display: inline-flex; }
.presence { position: absolute; top: -1px; right: -1px; width: 10px; height: 10px; border: 2px solid var(--side); border-radius: 50%; }
.presence.on { background: #2fa75a; }
.presence.off { background: #7c8293; }

/* Team-Dashboard-Tabs, Abstimmungen, Bewerbungen */
.teamtabs { flex-wrap: wrap; margin-bottom: 1.25rem; }
.pollvote { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0; }
.pollvote .btn.chosen { outline: 2px solid var(--text); outline-offset: 2px; }
.pollbar { display: grid; grid-template-columns: 6.5rem 1fr 2.5rem 3rem; align-items: center; gap: .6rem; margin: .45rem 0; }
.pollbarbg { height: 10px; border-radius: 5px; background: var(--ghost); overflow: hidden; }
.pollbarfill { height: 100%; border-radius: 5px; background: var(--blue); }
.pollbarfill.v1 { background: #2fa75a; }
.pollbarfill.v0 { background: #e5484d; }
.pollbarfill.v2 { background: #7c8293; }
/* Abstimmungen: Kreisdiagramm (Ja / Nein) und Balken (Single / Multiple Choice), app/polls.php */
.pollpiewrap { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin: .75rem 0; }
.pollpie { width: 9rem; height: 9rem; flex: none; transform: none; }
.pollpie circle { transition: stroke-dasharray .3s; }
.pollpietotal { font-size: 8px; font-weight: 700; text-anchor: middle; fill: var(--text); }
.pollpielabel { font-size: 3.2px; text-anchor: middle; fill: var(--muted); }
.pollpielegend { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: auto 1fr auto auto; gap: .45rem .75rem; align-items: center; min-width: 12rem; }
.pollpielegend li { display: contents; }
.pollpielegend .swatch { width: .8rem; height: .8rem; border-radius: 3px; }
.pollchoicebars { display: grid; gap: .7rem; margin: .5rem 0; }
.pollchoicehead { display: flex; justify-content: space-between; gap: .75rem; margin-bottom: .25rem; }
.pollchoice.leading .pollbarfill { background: #2fa75a; }
.pollchoice.leading .pollchoicehead > span:first-child { font-weight: 600; }
.pollchoices { display: grid; gap: .4rem; margin: .5rem 0 .75rem; }
.pollopt { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-weight: 400; margin: 0; }
.pollopt:has(input:checked) { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 10%, transparent); }
.pollopt input { margin: 0; width: auto; }
.pollnames { margin-top: .75rem; }
.appdecide { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: .75rem; }
.appdecide .btngroup { margin-top: .6rem; }
.appdata h3 { margin-top: 0; }
.requirements { margin: .75rem 0; padding: .75rem 1rem; border: 1px solid var(--line); border-left: 3px solid var(--blue); border-radius: 8px; }
.visquick { margin: .3rem 0 .4rem; }

/* Moderne Kontrollkästchen (Anmelden, „entfernen“, Anwesende …) passend zu Schaltern und Chips */
.check input[type=checkbox] { appearance: none; -webkit-appearance: none; flex: none; display: inline-grid; place-content: center; width: 1.15rem; height: 1.15rem; margin: 0; border: 1.5px solid var(--line); border-radius: 5px; background: var(--input); cursor: pointer; transition: background .15s, border-color .15s; }
.check input[type=checkbox]::after { content: ''; width: .32rem; height: .6rem; margin-top: -.12rem; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .12s; }
.check input[type=checkbox]:checked { background: var(--blue); border-color: var(--blue); }
.check input[type=checkbox]:checked::after { transform: rotate(45deg) scale(1); }
.check input[type=checkbox]:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 25%, transparent); }
.check { cursor: pointer; }

/* Geldlogs beim Charakter: Eingänge grün, Ausgänge rot */
tr.moneyin td { background: color-mix(in srgb, #2fa75a 32%, transparent); }
tr.moneyout td { background: color-mix(in srgb, #c0392b 32%, transparent); }
tr.moneyin td, tr.moneyout td { border-color: color-mix(in srgb, var(--line) 60%, transparent); }

/* Bewerbungen: Prüfliste der Voraussetzungen, Posten */
.rulelist { list-style: none; margin: .5rem 0 0; padding: 0; }
.rulelist li { padding: .2rem 0; }
.rulelist li.ok { color: #2fa75a; }
.rulelist li.bad { color: #e5484d; font-weight: 600; }
.requirements.failed { border-left-color: #e5484d; }
.poscard { margin: 0 0 1rem; padding: .5rem 1rem 1rem; border: 1px solid var(--line); border-radius: 8px; }
.poscard legend { padding: 0 .4rem; font-weight: 600; }

/* Berechtigungen je Rang */
.permtable th.center, .permtable td.center { text-align: center; }
.permtable th { font-size: .78rem; white-space: nowrap; }
.permtable td.ok { color: #2fa75a; font-weight: 700; }

/* Fußzeile: Impressum und Datenschutz links, Version rechts */
.foot { justify-content: space-between; gap: 1rem; }
.footlinks { display: flex; gap: 1.1rem; }
.footlinks a { color: var(--muted); text-decoration: none; }
.footlinks a:hover { color: var(--text); text-decoration: underline; }
.legaltext h2 { margin: 1.4rem 0 .5rem; font-size: 1.2rem; }
.legaltext h2:first-child { margin-top: 0; }
.legaltext h3 { margin: 1.1rem 0 .4rem; font-size: 1rem; }
.legaltext p { line-height: 1.6; }

/* Verwaltung → Berechtigungen */
.permsearch { max-width: 24rem; margin-bottom: 1rem; }
.permsection > summary { list-style: none; cursor: pointer; }
.permsection > summary::-webkit-details-marker { display: none; }
.permsection > summary h2 { display: inline; margin: 0; font-size: 1.05rem; }
.permsection > summary::before { content: '▸'; margin-right: .5rem; color: var(--muted); }
.permsection[open] > summary::before { content: '▾'; }
.permedit select { min-width: 11rem; }
.permedit .switch { margin: 0; }
.permedit tr.custom td:first-child { box-shadow: inset 3px 0 0 #e8902f; }
.permedit tr.changed td:first-child { box-shadow: inset 3px 0 0 var(--blue); }
/* Berechtigungen → Anordnung */
.orderhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.orderhead p { flex: 1 1 20rem; margin-top: 0; }
.ordergrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.25rem; align-items: start; margin-bottom: 1.25rem; }
.ordergrid > .card { margin: 0; }
.orderlist { list-style: none; margin: 0; padding: 0; }
.orderlist li { display: flex; align-items: center; gap: .4rem; padding: .35rem .5rem; border-bottom: 1px solid var(--line); }
.orderlist li:last-child { border-bottom: 0; }
.orderlist li > span { flex: 1 1 auto; min-width: 0; }
.orderlist li.changed { box-shadow: inset 3px 0 0 var(--blue); }
.orderlist li:first-child [data-dir=up], .orderlist li:last-child [data-dir=down] { visibility: hidden; }
.savebar[hidden], .permsearch[hidden], .vouchersum[hidden] { display: none; }
.vouchersum { align-items: center; margin: .25rem 0 .75rem; }
.vouchersum .vsum { color: var(--muted); }
/* Logs → Berechtigungen */
.logpermgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 25rem), 1fr)); gap: 1.25rem; align-items: start; margin-bottom: 1.25rem; }
.logpermgrid > .card { margin: 0; min-width: 0; }
.logperms { list-style: none; margin: 0; padding: 0; }
.logperms li { display: flex; align-items: center; gap: .75rem; padding: .55rem .6rem; border-bottom: 1px solid var(--line); }
.logperms li:last-child { border-bottom: 0; }
.logperms li.custom { box-shadow: inset 3px 0 0 #e8902f; }
.logperms .lpname { flex: 1 1 auto; min-width: 0; }
.logperms .lpname label { display: block; margin: 0; font-size: .95rem; color: var(--text); overflow-wrap: anywhere; }
.logperms .lpname small { display: block; margin-top: .1rem; }
.logperms select { flex: 0 0 11.5rem; width: 11.5rem; margin: 0; }
.logperms .lplocked { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .35rem; color: var(--muted); font-size: .9rem; white-space: nowrap; }
.logperms .lplocked svg { width: 1em; height: 1em; }
@media (max-width: 480px) {
    .logperms li { flex-wrap: wrap; gap: .4rem; }
    .logperms select { flex: 1 1 100%; width: 100%; }
}

/* Bewerbungen: Posten-Editor und Bildanhänge */
.poslist { display: flex; flex-direction: column; gap: .9rem; }
.poscard { padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--input) 60%, transparent); }
.poshead { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.1rem; }
.poshead .posname { flex: 1 1 14rem; font-weight: 600; }
.poshead .switch { margin: 0; }
.poshead [data-pos-remove] { margin-left: auto; }
.posrules { margin-top: .75rem; }
.posrules > summary { cursor: pointer; color: var(--muted); font-size: .9rem; }
.appfiles { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.appfiles img { width: 140px; height: 100px; object-fit: cover; border: 1px solid var(--line); border-radius: 8px; }

/* Berechtigungen: Untertabs */
.permtoggle { display: inline-flex; align-items: center; gap: .35rem; padding: 0; border: 0; background: none; color: var(--text); font: inherit; cursor: pointer; text-align: left; }
.permtoggle .chev { display: inline-block; width: 1rem; color: var(--muted); }
.permedit tr.child td:first-child { padding-left: 2.2rem; }
.permedit tr.child { background: color-mix(in srgb, var(--input) 45%, transparent); }
.childmark { color: var(--muted); }

/* Ankündigung oben auf jeder Seite */
.announce { display: flex; align-items: flex-start; gap: .8rem; margin: 0 0 1.25rem; padding: .85rem 1rem; border: 1px solid color-mix(in srgb, var(--c) 45%, var(--line)); border-left: 4px solid var(--c); border-radius: 10px; background: color-mix(in srgb, var(--c) 14%, var(--card)); }
.announce[hidden] { display: none; }
.announceicon { flex: none; color: var(--c); padding-top: .1rem; }
.announcetext { flex: 1; min-width: 0; }
.announcetext strong { display: block; margin-bottom: .15rem; }
.announcetext p { margin: .2rem 0 0; }
.announcetext a { color: var(--c); }
.announcetext .inline { flex-wrap: wrap; } /* Knöpfe brechen auf schmalen Bildschirmen um statt aus dem Kasten zu ragen */
.announceclose { flex: none; width: 28px; height: 28px; border: 0; border-radius: 6px; background: none; color: var(--muted); font-size: 1.3rem; cursor: pointer; }
.announceclose:hover { background: var(--ghost); color: var(--text); }
.announce.preview { margin: .5rem 0 1rem; }
.colorpick { display: flex; align-items: center; gap: .6rem; }
.colorpick .check { margin: 0; }
.switchrow { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: .75rem; }
.evsym { font-size: 1.2rem; }

/* Events: dekorativ, klickt nicht im Weg (pointer-events: none) */
.eventdeco, .evfx { position: fixed; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; }
.eventdeco .deco { position: absolute; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35)); }
.evfx .fx { position: absolute; left: 0; top: 0; will-change: transform, opacity; }
/* Halloween: Kürbisse auf der Fußzeile (Gesicht flackert), Spinnennetz mit Spinne oben rechts, Nebel unten – beim Scrollen am Bildschirmrand (--dtop, --dbot);
   zufällig: Fledermausschwärme, Geister, Hexe, leuchtende Augen */
body.event-halloween .top { box-shadow: inset 0 -2px 0 #ef7f23; }
body.event-halloween .brand img { filter: drop-shadow(0 0 10px rgba(239, 127, 35, .55)); }
.halloween .pumpkin { bottom: max(0px, calc(var(--dbot, 44px) - 14px)); filter: drop-shadow(0 0 12px rgba(239, 127, 35, .45)) drop-shadow(0 4px 8px rgba(0, 0, 0, .4)); }
.halloween .pumpkin .face { fill: #ffcf5c; animation: candle 2.8s ease-in-out infinite; }
.halloween .p1 { right: 230px; }
.halloween .p2 { right: 282px; animation-delay: -1s; }
.halloween .p2 .face { animation-delay: -1.1s; }
.halloween .p3 { left: 262px; }
.halloween .p3 .face { animation-delay: -2s; }
@keyframes candle { 0%, 100% { opacity: 1; } 18% { opacity: .78; } 22% { opacity: .95; } 47% { opacity: .7; } 53% { opacity: 1; } 76% { opacity: .82; } }
.halloween .web { top: var(--dtop, 68px); right: 0; color: color-mix(in srgb, var(--text) 30%, transparent); filter: none; }
.halloween .spider { top: var(--dtop, 68px); right: 58px; display: flex; flex-direction: column; align-items: center; }
.halloween .spider .thread { display: block; width: 1px; height: 100px; transform-origin: top; animation: spider 14s ease-in-out infinite; background: color-mix(in srgb, var(--text) 35%, transparent); }
.halloween .spider svg { margin-top: -2px; animation: swing 3s ease-in-out infinite, spiderdrop 14s ease-in-out infinite; transform-origin: top center; }
/* der Faden wird länger und kürzer (nur transform, damit der Browser nicht bei jedem Bild neu berechnet), sein oberes Ende bleibt am Netz */
@keyframes spider { 0%, 100% { transform: scaleY(.3); } 35%, 55% { transform: scaleY(1); } 70% { transform: scaleY(.6); } }
@keyframes spiderdrop { 0%, 100% { translate: 0 -70px; } 35%, 55% { translate: 0 0; } 70% { translate: 0 -40px; } }
@keyframes swing { 0%, 100% { rotate: -6deg; } 50% { rotate: 6deg; } }
.halloween .fog { position: absolute; left: 256px; right: 0; bottom: var(--dbot, 44px); height: 90px; opacity: .55;
    background: radial-gradient(60% 100% at 20% 100%, rgba(140, 110, 190, .22), transparent 70%), radial-gradient(50% 90% at 75% 100%, rgba(239, 127, 35, .12), transparent 70%);
    animation: fog 18s ease-in-out infinite alternate; transform-origin: left center; }
body.collapsed .halloween .fog { left: 0; }
@media (max-width: 800px) { .halloween .fog { left: 0; } } /* schmal: Seitenleiste liegt als Overlay über dem Inhalt */
/* nur nach rechts „atmen“ (vom linken Rand aus), damit der Nebel nicht über die Seitenleiste wandert */
@keyframes fog { to { transform: scaleX(1.04); opacity: .8; } }
.evfx.halloween .bat svg { display: block; animation: flap var(--flap, .22s) ease-in-out infinite alternate; transform-origin: center; filter: drop-shadow(0 0 4px rgba(239, 127, 35, .35)); }
@keyframes flap { to { transform: scaleY(.45); } }
.evfx.halloween .ghost { filter: drop-shadow(0 0 14px rgba(220, 220, 255, .55)); }
.evfx.halloween .witch { filter: drop-shadow(0 0 8px rgba(120, 255, 140, .25)); }
.evfx.halloween .eyes { display: flex; gap: 10px; }
.evfx.halloween .eyes span { width: 10px; height: 6px; border-radius: 50% 50% 45% 45%; background: #ffcf3d; box-shadow: 0 0 10px #ff9a1f, 0 0 2px #fff; }
/* Weihnachten */
body.event-christmas .top { box-shadow: inset 0 -2px 0 #2fa75a; }
.christmas .snow span { position: absolute; top: -2rem; left: var(--x); color: #fff; opacity: .7; font-size: calc(1rem * var(--s)); animation: snowfall var(--d) linear infinite; animation-delay: var(--delay); }
@keyframes snowfall { to { transform: translateY(105vh) rotate(180deg); } }
.christmas .tree { right: 230px; bottom: max(0px, calc(var(--dbot, 44px) - 18px)); font-size: 2rem; }
.christmas .gift { right: 272px; bottom: max(0px, calc(var(--dbot, 44px) - 16px)); font-size: 1.3rem; }
/* Silvester: funkelnde Sterne, Sektglas mit Perlen, Countdown bzw. Neujahrsgruß; zufällig: Raketen mit Funken (um Mitternacht ein Feuerwerk) */
body.event-newyear .top { box-shadow: inset 0 -2px 0 #f5c542; }
body.event-newyear .brand img { filter: drop-shadow(0 0 10px rgba(245, 197, 66, .5)); }
.newyear .stars span { position: absolute; left: var(--x); top: calc(var(--dtop, 68px) + var(--y)); color: #f5d77a; font-size: .8rem; animation: twinkle 3.2s ease-in-out infinite; animation-delay: var(--delay); }
@keyframes twinkle { 0%, 100% { opacity: .15; transform: scale(.6); } 50% { opacity: .9; transform: scale(1.1); } }
.newyear .glass { right: 230px; bottom: max(0px, calc(var(--dbot, 44px) - 20px)); width: 34px; height: 54px; }
.newyear .glass svg { position: absolute; inset: 0; }
.newyear .glass i { position: absolute; left: var(--l); bottom: 26px; width: 3px; height: 3px; border-radius: 50%; background: #fff6d0; animation: bubble 2.4s ease-in infinite; animation-delay: var(--delay); }
@keyframes bubble { from { transform: translateY(0); opacity: .9; } to { transform: translateY(-18px); opacity: 0; } }
.newyear .nycount { position: absolute; right: 274px; bottom: max(8px, calc(var(--dbot, 44px) - 35px)); padding: .15rem .6rem; border: 1px solid color-mix(in srgb, #f5c542 45%, var(--line)); border-radius: 999px;
    background: color-mix(in srgb, #f5c542 12%, var(--side)); color: #f5c542; font-size: .8rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.newyear .nycount:empty { display: none; }
.newyear .nycount.soon { animation: pulse 1s ease-in-out infinite; }
.newyear .nycount.happy { background: linear-gradient(90deg, #f5c542, #ff8a3d, #e5484d, #a855f7, #3b82f6, #f5c542); background-size: 300% 100%; color: #1b1405; border-color: transparent; animation: shine 6s linear infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 14px rgba(245, 197, 66, .6); } }
@keyframes shine { to { background-position: 300% 0; } }
.evfx.newyear .rocket { width: 3px; height: 14px; border-radius: 2px; background: linear-gradient(var(--c), transparent); box-shadow: 0 0 6px var(--c); }
.evfx.newyear .spark { width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: var(--c); box-shadow: 0 0 6px var(--c), 0 0 2px #fff; }
.evfx.newyear .flash { width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: radial-gradient(var(--c), transparent 70%); }
/* Silvester-Finale: großer Gruß in der Mitte (einmal, blendet sich selbst wieder aus) */
.nygreet { position: fixed; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; pointer-events: none; text-align: center; padding: 0 16px;
    animation: nygreet 8.5s ease-in-out forwards; }
.nygreet span, .nygreet b { background: linear-gradient(90deg, #f5c542, #fff3c4, #ff8a3d, #f5c542); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 0 18px rgba(245, 197, 66, .55)) drop-shadow(0 4px 12px rgba(0, 0, 0, .6)); animation: shine 3s linear infinite; }
.nygreet span { font-size: clamp(2rem, 7vw, 5rem); font-weight: 800; letter-spacing: .02em; line-height: 1.1; }
.nygreet b { font-size: clamp(1.6rem, 5vw, 3.4rem); font-weight: 800; letter-spacing: .25em; }
@keyframes nygreet { 0% { opacity: 0; transform: scale(.6); } 12% { opacity: 1; transform: scale(1.06); } 18% { transform: scale(1); } 82% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.08); } }
html.a11y-motion .nygreet { animation: nygreetfade 8.5s linear forwards !important; }
@media (prefers-reduced-motion: reduce) { .nygreet { animation: nygreetfade 8.5s linear forwards; } }
@keyframes nygreetfade { 0%, 100% { opacity: 0; } 8%, 90% { opacity: 1; } }
@media (max-width: 900px) {
    .halloween .p3, .halloween .web, .halloween .spider, .newyear .stars span:nth-child(odd) { display: none; }
    .halloween .p1, .christmas .tree, .newyear .glass { right: 12px; }
    .halloween .p2 { right: 60px; } .christmas .gift { right: 52px; }
    .newyear .nycount { right: 54px; }
}
@media (prefers-reduced-motion: reduce) { .eventdeco *, .eventdeco { animation: none !important; } .christmas .snow, .halloween .spider { display: none; } }
html.a11y-motion .christmas .snow, html.a11y-motion .halloween .spider { display: none; }

/* Eigene Auswahlmenüs: Knopf mit Liste vor dem (unsichtbaren) select, s. assets/js/select.js */
.csel { position: relative; display: block; width: 100%; }
.csel + select { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; border: 0 !important; opacity: 0; pointer-events: none; }
.cselbtn { display: flex; align-items: center; width: 100%; padding: .6rem 2rem .6rem .8rem; border: 1px solid var(--line); border-radius: 8px; background: var(--input); color: var(--text); font: inherit; text-align: left; cursor: pointer; position: relative; }
.cselbtn::after { content: ""; position: absolute; right: .8rem; top: 50%; width: .45rem; height: .45rem; border: solid var(--muted); border-width: 0 2px 2px 0; transform: translateY(-70%) rotate(45deg); }
.cselbtn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cselbtn:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 25%, transparent); }
.cselbtn:disabled { opacity: .6; cursor: not-allowed; }
.csellist { display: none; position: fixed; z-index: 1000; max-height: 260px; overflow-y: auto; margin: 0; padding: .25rem; list-style: none;
    border: 1px solid var(--line); border-radius: 8px; background: var(--card); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.csel.open .csellist { display: block; }
.csellist li { padding: .4rem .6rem; border-radius: 6px; cursor: pointer; }
.csellist li:hover { background: var(--ghost); }
.csellist li.on { background: color-mix(in srgb, var(--blue) 22%, transparent); }
.csellist li.off { opacity: .45; cursor: not-allowed; }
.csellist li.cselgroup { padding-top: .5rem; color: var(--muted); font-size: .8rem; font-weight: 600; cursor: default; }
.csellist li.cselgroup:hover { background: none; }
/* Benutzersuche: Verdacht auf Multiaccount (rot) bzw. freigegeben (grau) */
.multitag { display: inline-block; margin-left: .3rem; padding: .05rem .45rem; border: 1px solid color-mix(in srgb, var(--error) 55%, transparent); border-radius: 6px; background: color-mix(in srgb, var(--error) 16%, transparent); color: var(--error); font-size: .75rem; font-weight: 600; white-space: nowrap; cursor: help; }
.multitag.ok { border-color: var(--line); background: var(--ghost); color: var(--muted); font-weight: 500; }

/* Anticheat: Hinweise je Art, Details aufklappbar */
.multitag.ip { border-color: color-mix(in srgb, #e8902f 55%, transparent); background: color-mix(in srgb, #e8902f 14%, transparent); color: #e8902f; }
.multitag.range { border-color: var(--line); background: var(--ghost); color: var(--muted); }
.acfind > summary { display: flex; flex-wrap: wrap; gap: .35rem; cursor: pointer; list-style: none; }
.acfind > summary::-webkit-details-marker { display: none; }
.acfind ul { margin: .5rem 0 0; padding-left: 1.1rem; font-size: .88rem; }
.acfind li { margin: .15rem 0; }
.acchip { display: inline-block; padding: .05rem .5rem; border-radius: 6px; font-size: .78rem; font-weight: 600; white-space: nowrap;
    background: color-mix(in srgb, var(--error) 16%, transparent); color: var(--error); }
.acchip b { margin-left: .15rem; }
.acchip.range, .acchip.jump { background: color-mix(in srgb, #e8902f 16%, transparent); color: #e8902f; }
.acchip.money { background: color-mix(in srgb, #d4a72c 18%, transparent); color: #d4a72c; }
.acchip.connection, .acchip.system { background: var(--ghost); color: var(--muted); }
.acevidence { margin: .4rem 0 0; padding: .5rem .6rem; border-radius: 6px; background: var(--input); font-size: .8rem; white-space: pre-wrap; }
/* Debug / Fix → Interaktive Karte (assets/js/worldmap.js) */
.worldmap .gwmap svg { cursor: grab; touch-action: none; }
.worldmap .gwmap svg.dragging { cursor: grabbing; }
.worldmap circle { r: var(--wmr, 14px); stroke: rgba(0, 0, 0, .55); stroke-width: calc(var(--wmr, 14px) * .25); cursor: pointer; }
.worldmap circle.on { stroke: #fff; stroke-width: calc(var(--wmr, 14px) * .45); }
.worldmap { display: grid; grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.worldmap .gwmap svg { width: 100%; max-width: min(100%, 68vh, 720px); margin: 0 auto; }
.wm-layers { display: flex; flex-direction: column; gap: .7rem; }
.wm-toggle.switch { margin: 0; font-size: .92rem; }
.wm-name { display: flex; flex-direction: column; line-height: 1.25; }
.wm-name small { font-size: .78rem; }
@media (max-width: 900px) { .worldmap { grid-template-columns: 1fr; } .wm-layers { flex-direction: row; flex-wrap: wrap; gap: .6rem 1.2rem; } }
.wm-swatch { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; flex: none; }
.wm-info { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin-top: 1.25rem; padding: .6rem .8rem; border-radius: 8px; background: var(--input); }
.wm-info[hidden] { display: none; }
.wm-info .wm-text { flex: 1 1 100%; font-size: .9rem; }
/* Berechtigungen → Teamränge: Filter nach Art, Reihenfolge der Ränge, Art und Bereich je Punkt */
.permteambar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin: .5rem 0 1rem; }
.permteambar .pills { margin: 0; }
.permsort { display: flex; align-items: center; gap: .5rem; margin: 0; white-space: nowrap; }
.permsort select, .permsort .csel { width: auto; min-width: 15rem; }
.permkind { display: inline-block; padding: 0 .4rem; border-radius: 5px; background: var(--ghost); color: var(--muted); font-size: .72rem; font-weight: 600; vertical-align: 1px; }

/* Spielerprofil → Fahrzeuge: Slots, Garage */
.slotgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .6rem; }
.slotgrid > div { display: flex; flex-direction: column; gap: .15rem; padding: .6rem .8rem; border: 1px solid var(--line); border-radius: 10px; background: var(--input); }
.slotgrid strong { font-size: 1.15rem; }
.slotgrid strong .hint { font-size: .8rem; font-weight: 400; }
.slotgrid strong.over { color: var(--error); }

/* Anmeldesperre */
.message.warn { background: color-mix(in srgb, #e8902f 14%, transparent); color: #e8902f; }
.blockedlist { margin: 0 0 1.25rem; }
.blockedlist .message { margin: 0 0 .5rem; }
.blockedlist .hint { margin: .25rem 0 0; }
.card.lockon { border-color: color-mix(in srgb, #e5484d 50%, var(--line)); box-shadow: inset 4px 0 0 #e5484d; }

/* Updates (Changelog) */
.updatelist { display: flex; flex-direction: column; gap: .75rem; }
.olderupdates { margin-top: 1.25rem; }
.olderupdates > summary { cursor: pointer; color: var(--blue); font-weight: 600; margin-bottom: .75rem; }
.updateitem { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 1.2rem; color: var(--text); text-decoration: none; }
.updateitem:hover { border-color: color-mix(in srgb, var(--blue) 45%, var(--line)); }
.updateitem.unread { border-left: 3px solid var(--blue); }
.updateitem.draft { opacity: .8; border-style: dashed; }
.updateicon { flex: none; display: inline-flex; padding: .55rem; border-radius: 10px; background: color-mix(in srgb, var(--blue) 16%, transparent); color: var(--blue); }
.updatebody { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.updatebody strong { font-size: 1.05rem; }
.changecounts { display: flex; flex-wrap: wrap; gap: .35rem; }
.updatemeta { margin: .25rem 0 1rem; }
.savebar .schedbox { display: inline-flex; gap: .4rem; align-items: center; }
.savebar .schedbox input { width: auto; }
.updatepost .updateintro { margin-bottom: 1.2rem; }
.changegroup { margin-top: 1rem; }
.changegroup h2 { font-size: 1rem; margin: 0 0 .4rem; }
.changegroup ul { margin: 0; padding-left: 1.3rem; }
.changegroup li { margin: .3rem 0; line-height: 1.5; }
.changerow { display: grid; grid-template-columns: 9rem 1fr auto; gap: .5rem; align-items: center; margin-bottom: .45rem; }
@media (max-width: 600px) { .changerow { grid-template-columns: 1fr auto; } .changerow select { grid-column: 1 / -1; } }

/* Update-Beitrag wie im Forum: zentriert, Logo, große Überschriften, Bilder, Trennlinien */
.updatepost { text-align: center; padding: 1.5rem 1.25rem 2rem; }
.uplogo img { max-width: min(320px, 70%); height: auto; }
.updivider { width: min(520px, 80%); margin: 2rem auto; border: 0; height: 2px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--blue) 70%, #a855f7), transparent); }
.upsection h2 { margin: 0 0 1rem; font-size: 1.6rem; font-weight: 800; }
.uptext { max-width: 760px; margin: 0 auto; line-height: 1.7; }
.uptext p { margin: 0 0 .9rem; }
.upimages { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: 1.2rem; }
.upimages img { max-width: min(100%, 640px); max-height: 420px; height: auto; border-radius: 10px; border: 1px solid var(--line); }
.upimages a:only-child img { max-width: min(100%, 860px); max-height: 520px; }
.upchanges { list-style: none; margin: 0 auto; padding: 0; max-width: 760px; line-height: 1.8; }
.upchanges li::before { content: '- '; }
.upthumb { flex: none; width: 96px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.upheads { font-weight: 600; color: var(--text); }
.seccard .posname { font-size: 1.05rem; }
.secimgs { display: flex; flex-wrap: wrap; gap: .6rem; }
.secimg { display: flex; flex-direction: column; align-items: center; gap: .3rem; margin: 0; }
.secimg img { width: 130px; height: 85px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }
.secimg .check { margin: 0; font-size: .82rem; }
.changerow { grid-template-columns: 1fr auto; }
.savebar { z-index: 8; } /* über der Event-Deko (z-index 5) */

/* Seitenleiste mit eigenem Scrollbereich: bleibt stehen, während der Inhalt scrollt (Position wird beim Seitenwechsel gemerkt) */
.side { position: sticky; top: 0; align-self: start; height: 100vh; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--muted) 45%, transparent) transparent; }
.side .brand { position: sticky; top: 0; z-index: 2; background: var(--side); }
.orgtag.group { --c: #7c8293; }

/* Interaktive Diagramme (assets/js/charts.js) */
.ichart-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; margin-bottom: .6rem; }
.ichart-key { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .6rem; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--text); font: inherit; font-size: .8rem; cursor: pointer; }
.ichart-key i { width: 14px; height: 4px; border-radius: 2px; }
.ichart-key:hover { background: var(--ghost); }
.ichart-key.off { opacity: .45; text-decoration: line-through; }
.ichart-all { font-size: .8rem; }
.ichart-area { position: relative; width: 100%; }
.ichart-area svg { display: block; width: 100%; height: auto; touch-action: pan-y; }
.ichart .grid { stroke: var(--line); stroke-width: 1; }
.ichart .ylab { fill: var(--muted); font-size: 11px; text-anchor: end; }
.ichart .xlab { fill: var(--muted); font-size: 10px; text-anchor: middle; }
.ichart .line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.ichart .guide { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 4 3; }
.ichart-tip { position: absolute; z-index: 3; min-width: 9rem; padding: .5rem .65rem; border: 1px solid var(--line); border-radius: 8px; background: var(--card); box-shadow: 0 10px 24px rgba(0, 0, 0, .35); font-size: .82rem; pointer-events: none; white-space: nowrap; }
.ichart-tip strong { display: block; margin-bottom: .25rem; }
.ichart-tip div { display: flex; align-items: center; gap: .4rem; }
.ichart-tip i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.playercharts { margin-top: 1.25rem; }

/* Positionsicon neben Orten (Logs) – öffnet das Kartenfenster */
.mappin { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; margin-left: .15rem; vertical-align: middle; border: 0; border-radius: 6px; background: transparent; color: var(--blue); cursor: pointer; }
.mappin:hover, .mappin:focus-visible { background: color-mix(in srgb, var(--blue) 16%, transparent); }
.mappin svg { width: 16px; height: 16px; }
.mapwide .vehmap { width: 100%; max-width: 520px; display: block; margin: 0 auto; }
.mapcoords { text-align: center; margin-top: .5rem; }

/* Bewerbung: Daten aus dem Spiel */
.appdata .apph { margin: 1.1rem 0 .5rem; }
.licrow { display: flex; flex-wrap: wrap; gap: .4rem; }
.lic { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .65rem; border-radius: 999px; font-size: .85rem; font-weight: 600; }
.lic.yes { background: color-mix(in srgb, #2fa75a 18%, transparent); color: var(--ok); }
.lic.no { background: var(--ghost); color: var(--muted); }
.kvgrid.penalties dd { display: flex; align-items: center; }
.applevels { margin: 1rem 0; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); }

/* Knöpfe nebeneinander (z. B. Bearbeiten + Zurück im Seitenkopf) */
.btnrow { display: inline-flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

/* Wer ist online: Schnellaktionen */
.quickacts .ib + .ib { margin-left: .25rem; }

.plus svg { width: 20px; height: 20px; }

/* ausgegraute Eingaben (z. B. Tage bei dauerhaftem VIP, Soundvan außer beim Slamvan) */
input:disabled, select:disabled, textarea:disabled { opacity: .5; cursor: not-allowed; }
.switch:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.vehdetailpics .center { text-align: center; margin: .35rem 0 0; }

/* Skin-Fenster (Kleidung) und „i“ in Item-Listen */
/* 3D-Vorschau für Texturen (assets/js/tex3d.js) */
#dlg-tex3d { width: min(56rem, calc(100vw - 2rem)); }
.tex3dview { position: relative; height: min(60vh, 520px); border-radius: 10px; background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--line) 70%, var(--input)), var(--input)); overflow: hidden; }
.tex3dview canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.tex3dview canvas:active { cursor: grabbing; }
.tex3dmsg { position: absolute; left: 50%; bottom: .75rem; transform: translateX(-50%); margin: 0; padding: .35rem .8rem; border-radius: 999px; background: color-mix(in srgb, var(--bg) 80%, transparent); font-size: .85rem; white-space: nowrap; max-width: calc(100% - 1.5rem); overflow: hidden; text-overflow: ellipsis; }
.mfoot .btn.tiny svg { width: 14px; height: 14px; }
.skinview { display: flex; justify-content: center; }
.skinview img { max-width: 100%; max-height: 60vh; border-radius: 10px; background: var(--input); }
.itemname .infobtn { margin: 0 0 0 .35rem; vertical-align: middle; }
.itemlist .hint { white-space: nowrap; }

/* Ticket-Kategorie bearbeiten */
.switches { display: flex; flex-direction: column; gap: .5rem; justify-content: flex-end; padding-bottom: .35rem; }

/* Serverstatus unter dem Logo */
/* bleibt wie das Logo beim Scrollen der Seitenleiste stehen (direkt unter dem Logo) */
.side .srvstatus { position: sticky; top: 68px; z-index: 2; background: var(--side); }
.srvstatus { display: flex; align-items: center; justify-content: center; gap: .45rem; padding: .45rem .75rem; border-bottom: 1px solid var(--line); font-size: .85rem; color: var(--muted); }
.srvstatus a { color: var(--text); }
.srvstatus a:hover { color: var(--blue); text-decoration: none; }
/* Verwaltung → Server: Titel mit Steuer-Symbolen, darunter Status wie in der Seitenleiste */
.boardgrid > .card:has(.srvhead) { position: relative; }
.srvhead h2 { margin: 0; padding-right: 6.5rem; }
.srvctl { position: absolute; top: .9rem; right: .9rem; display: flex; gap: .35rem; margin: 0; }
.srvctl .ib svg { width: 14px; height: 14px; }
.srvctl .ib.green svg { fill: currentColor; }
.srvline { display: flex; align-items: center; gap: .5rem; margin: .6rem 0 .25rem; color: var(--muted); font-size: .9rem; }
.srvline strong { color: var(--text); }
.srvline { flex-wrap: wrap; }
.srvline .srvjoin { margin: 0 0 0 auto; white-space: nowrap; }
.srvline .srvjoin svg { width: 12px; height: 12px; fill: currentColor; }
.srvtop { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1.5rem; }
.srvtop .card { margin: 0; }
.srvtop .stat strong { font-size: 1.5rem; }
.sdot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex: none; }
.sdot.on { background: #2fa75a; box-shadow: 0 0 0 3px color-mix(in srgb, #2fa75a 25%, transparent); }

/* Inhaltsseiten: Regeln, Mitwirkende, Events, Lexikon (rich_html) */
.richtext { line-height: 1.6; overflow-wrap: anywhere; }
.richtext h2 { margin: 1.25rem 0 .5rem; font-size: 1.3rem; }
.richtext h3 { margin: 1.1rem 0 .4rem; font-size: 1.08rem; }
.richtext h4 { margin: 1rem 0 .3rem; font-size: 1rem; }
.richtext > :first-child { margin-top: 0; }
.richtext ol, .richtext ul { margin: .35rem 0 .75rem; padding-left: 1.6rem; }
.richtext li { margin: .25rem 0; }
.richtext .richnote { font-size: .85rem; color: var(--muted); }
.richtext hr { border: 0; border-top: 1px solid var(--line); margin: 1.25rem 0; }
.richimg { max-width: 100%; border-radius: 8px; display: block; margin: .5rem 0; }
/* Daten & Mitwirkende: zentriert wie im Forum */
.credits { text-align: center; }
.credits h2 { font-size: 1.45rem; margin-top: 1.75rem; }
.credits h3 { font-size: 1.05rem; margin-top: 1.1rem; }
.credits p { margin: .25rem 0; }
.credits h3 .shield { vertical-align: -3px; }
.creditslogo { display: block; max-height: 90px; margin: .5rem auto 1rem; }
.rulelist .ruletitle { font-size: 1.05rem; }
@media (max-width: 640px) { /* Regeln am Handy: Reihenfolge ausblenden, Datum darf umbrechen */
    table.rulelist .sortcol { display: none; }
    table.rulelist td.nowrap, table.rulelist th.nowrap { white-space: normal; }
    table.rulelist th, table.rulelist td { padding-left: .35rem; padding-right: .35rem; }
    table.rulelist td.hint { font-size: .8rem; }
}

/* Events */
.eventlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.eventcard { display: flex; flex-direction: column; padding: 0; overflow: hidden; margin: 0; }
.eventcard.running.admin { box-shadow: 0 0 0 2px #e5484d; }
.eventcard.running.sannews { box-shadow: 0 0 0 2px var(--blue); }
.eventcard.past { opacity: .75; }
.eventimg { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; display: block; }
.eventbody { padding: 1rem 1.25rem; }
.eventbody h2 { margin: .5rem 0 .25rem; font-size: 1.2rem; }
.eventhead { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.eventtools { margin-left: auto; }
.eventmeta { display: flex; align-items: center; gap: .35rem; color: var(--muted); font-size: .9rem; margin: 0 0 .5rem; }
.eventmeta svg { width: 15px; height: 15px; }

/* Lexikon */
.lexlayout { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: 1.25rem; align-items: start; }
@media (max-width: 900px) { .lexlayout { grid-template-columns: 1fr; } .lexcats { order: -1; } }
.lexgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: 1rem; }
.lexcard { display: flex; flex-direction: column; padding: 0; overflow: hidden; margin: 0; color: var(--text); }
.lexcard img, .lexnoimg { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; display: flex; align-items: center; justify-content: center; background: var(--input); color: var(--muted); }
.lexnoimg svg { width: 34px; height: 34px; }
.lexcardbody { display: flex; flex-direction: column; gap: .3rem; padding: .85rem 1rem; flex: 1; }
.lexcardfoot { padding: .6rem 1rem; border-top: 1px solid var(--line); font-size: .85rem; color: var(--muted); }
.lexcats { margin: 0; }
.lexcats h2 { margin: 0 0 .75rem; font-size: 1.1rem; }
.lexcats ul { list-style: none; margin: .5rem 0 0; padding: 0; }
.lexcats li a { display: flex; justify-content: space-between; gap: .5rem; padding: .45rem .5rem; border-radius: 6px; color: var(--text); }
.lexcats li a:hover, .lexcats li a.active { background: var(--ghost); text-decoration: none; }
.lexcount { min-width: 1.6rem; text-align: center; border-radius: 6px; background: var(--input); font-size: .8rem; padding: .05rem .4rem; color: var(--muted); }
.lexreset { display: inline-block; margin-top: .75rem; font-size: .9rem; }
.lexhero { width: 100%; max-height: 320px; object-fit: cover; border-radius: 8px; margin-bottom: .75rem; }
.lexarticle { margin: 0; }
.lexcurimg { display: flex; align-items: center; gap: 1rem; margin: .5rem 0; }
.lexcurimg img { width: 140px; aspect-ratio: 16 / 7; object-fit: cover; border-radius: 6px; }
.lexcattable td { vertical-align: middle; }
.lexcattable input { margin: 0; }
.lexcattable .sortinput { width: 5.5rem; }

/* Sprache des CPs (Menü oben, DeepL) und Hinweis bei übersetzten Regeln */
.langmenu > summary.iconbtn { width: auto; gap: .3rem; padding: 0 .55rem; }
.langmenu > summary.iconbtn svg { width: 18px; height: 18px; }
.langmenu .langcode { font-size: .72rem; font-weight: 700; letter-spacing: .03em; }
.langmenu .usermenulist { min-width: 13rem; }
.langmenu .usermenulist a { justify-content: space-between; }
.langmenu .usermenulist a.active { background: var(--ghost); font-weight: 600; }
.langmenu .langnote { margin: .35rem .75rem .25rem; font-size: .78rem; }
.tlnotice { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .6rem .9rem; border: 1px solid color-mix(in srgb, var(--blue) 35%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--blue) 10%, transparent); font-size: .9rem; }
.tlnotice svg { width: 17px; height: 17px; color: var(--blue); flex: none; }
.tlnotice span { flex: 1; min-width: 12rem; }
.tlnotice.warn { border-color: color-mix(in srgb, #d9a21b 40%, var(--line)); background: color-mix(in srgb, #d9a21b 10%, transparent); }
.tlnotice.warn svg { color: #d9a21b; }

/* Verwaltung → Übersetzungen */
.trtable td { vertical-align: top; }
.trtable .trsrc { width: 42%; overflow-wrap: anywhere; }
.trtable .trmarkup { display: block; margin-top: .3rem; padding: .35rem .5rem; border-radius: 6px; background: var(--input); color: var(--muted); font-size: .8rem; white-space: pre-wrap; }
.trtable textarea { width: 100%; min-height: 2.4rem; margin: 0; }
.trtable tr.manual td { background: color-mix(in srgb, #2fa75a 7%, transparent); }

/* Fehlerseite (404.php) */
body.errorpage { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; margin: 0; }
.errorbox { width: 100%; max-width: 30rem; text-align: center; padding: 2.25rem 1.75rem; border: 1px solid var(--line); border-radius: 16px; background: var(--card); box-shadow: 0 20px 50px rgba(0, 0, 0, .35); }
.errorlogo { display: block; max-width: 220px; max-height: 90px; margin: 0 auto 1rem; }
.errorlogo.text { font-size: 1.6rem; font-weight: 700; }
.errorcode { font-size: clamp(4rem, 18vw, 6.5rem); font-weight: 800; line-height: 1; letter-spacing: .04em; background: linear-gradient(135deg, #8b5cf6, #3b82f6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.errorbox h1 { margin: .5rem 0 .4rem; font-size: 1.35rem; }
.errorbox p { color: var(--muted); margin: 0 0 1.4rem; }
.errorbtns { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.errorbtns .btn { margin: 0; }

/* Übersicht: Was hast du verpasst */
.missedcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 1rem 1.5rem; }
.missedcols h3 { display: flex; align-items: center; gap: .45rem; margin: 0 0 .5rem; font-size: 1rem; }
.missedcols h3 svg { width: 17px; height: 17px; color: var(--muted); }
.missedlist { list-style: none; margin: 0 0 .5rem; padding: 0; }
.missedlist li { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .45rem; padding: .45rem 0; border-bottom: 1px solid var(--line); }
.missedlist li:last-child { border-bottom: 0; }
.missedwhen { margin-left: auto; white-space: nowrap; }
.missedmore { font-size: .9rem; }

/* Regeln: Änderungsprotokoll */
.rulechange { margin-bottom: .75rem; }
.rulechangehead { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; margin-bottom: .5rem; }
.rulechangehead .ib { margin-left: auto; }
.rclist { list-style: none; margin: 0; padding: 0; }
.rclist li { display: flex; gap: .6rem; align-items: baseline; padding: .4rem 0; border-top: 1px solid var(--line); }
.rclist li:first-child { border-top: 0; }
.rclist .status { flex: none; min-width: 6.5rem; text-align: center; }
.rctext { overflow-wrap: anywhere; }
.rctext del { color: var(--muted); }

/* Anmerkungen des Teams (Updates, Events) */
.teamcomments { margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--line); }
.teamcomments h3 { display: flex; align-items: center; gap: .4rem; margin: 0 0 .5rem; font-size: .95rem; }
.teamcomments h3 svg { width: 16px; height: 16px; color: var(--muted); }
.teamcomment { padding: .6rem .8rem; margin-bottom: .5rem; border-left: 3px solid var(--blue); border-radius: 6px; background: color-mix(in srgb, var(--blue) 7%, transparent); }
.teamcomment .richtext p { margin: .25rem 0 0; }
.tchead { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .9rem; }
.tchead .ib { margin-left: auto; }
.tcform { display: flex; gap: .5rem; align-items: flex-end; }
.tcform textarea { flex: 1; margin: 0; min-height: 2.6rem; }
.tcform .btn { margin: 0; }

/* Handy-Ansicht am PC (Benutzermenü, ab rank.mobile_view): Seite im Rahmen mit Handy-Breite */
.mobileview { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 14px; background: color-mix(in srgb, var(--bg) 92%, black); overflow: auto; }
.mvbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem; padding: .45rem .75rem; border: 1px solid var(--line); border-radius: 999px; background: var(--card); }
.mvbar select { width: auto; margin: 0; padding: .25rem .5rem; }
.mvbar .btn { margin: 0; }
.mvphone { padding: 10px; border: 1px solid var(--line); border-radius: 34px; background: #05060b; box-shadow: 0 20px 60px rgba(0, 0, 0, .55); }
.mvphone iframe { display: block; border: 0; border-radius: 24px; background: var(--bg); }
html.hasmobileview, html.hasmobileview body { overflow: hidden; }
html.inmobileview .mobileviewbtn { display: none; }
@media (max-width: 800px) { .mobileviewbtn { display: none !important; } }

/* --- Handy (schmale Bildschirme) --- */
.pageactions { flex-wrap: wrap; }
@media (max-width: 640px) {
    /* lange Werte (E-Mail, Serial …) in Kartenlisten umbrechen statt die Seite zu verbreitern. Nicht für alle Tabellen:
       „anywhere“ macht jeden Buchstaben zur Mindestbreite, dann werden kurze Spalten („Gang“) zerquetscht. Andere
       Tabellen umbrechen nur an Wortgrenzen und scrollen bei Bedarf innerhalb der Karte. */
    .card table.stack td { overflow-wrap: anywhere; }
    .card:has(> table:not(.stack)) { overflow-x: auto; }
    /* Aufklappmenüs oben (Posteingang, Sprache, Benutzer) über die ganze Breite statt seitlich aus dem Bild */
    .top .usermenulist { position: fixed; left: 8px; right: 8px; top: 58px; min-width: 0; max-height: calc(100vh - 80px); overflow-y: auto; }
    .pageactions .usermenulist { left: 0; right: auto; }
    .pagehead { flex-wrap: wrap; gap: .6rem; }
    /* Kopfleiste passt auch auf 360 px (verbreitete Android-Breite): engere Abstände, langer Name wird gekürzt */
    .top { gap: .35rem; padding: 0 .6rem; }
    .usermenu > summary { padding: .3rem .4rem; }
    /* Übersetzungen: Original über dem Eingabefeld, Schaltflächen darunter */
    .trtable thead { display: none; }
    .trtable, .trtable tbody, .trtable tr, .trtable td { display: block; width: auto !important; }
    .trtable tr { padding: .6rem 0; border-bottom: 1px solid var(--line); }
    .trtable td { padding: .2rem 0; border: 0; }
    .trtable td.right { text-align: left; }
    .top .who > .notranslate { display: inline-block; max-width: 7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
    /* Listen als Karten: Kopfzeile aus, jede Zeile eine Karte, jede Zelle „Beschriftung: Wert“ */
    table.stack thead { display: none; }
    table.stack, table.stack tbody { display: block; }
    table.stack tr { display: block; padding: .6rem .2rem; border-bottom: 1px solid var(--line); }
    table.stack tr:last-child { border-bottom: 0; }
    table.stack td { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .2rem 0 !important; border: 0; text-align: right; }
    table.stack td::before { content: attr(data-label); flex: none; color: var(--muted); font-size: .82rem; font-weight: 600; text-align: left; }
    table.stack td:not([data-label]), table.stack td[data-label=""] { justify-content: flex-end; }
    table.stack td:first-child { justify-content: flex-start; text-align: left; font-weight: 600; font-size: 1rem; }
    table.stack td:first-child::before { display: none; }
    table.stack td.empty { justify-content: center; }
    table.stack td.wide, table.stack td.nowrap { white-space: normal; }
}
@media (max-width: 640px) {
    /* zweispaltige Tabellen „Beschriftung | Wert“ (z. B. Dein Konto): Beschriftung über dem Wert */
    .card table:not(.stack) tr:has(> th:first-child + td:last-child) { display: block; padding: .45rem 0; border-bottom: 1px solid var(--line); }
    .card table:not(.stack) tr:has(> th:first-child + td:last-child) > th,
    .card table:not(.stack) tr:has(> th:first-child + td:last-child) > td { display: block; padding: 0 .25rem; border: 0; }
    .card table:not(.stack) tr:has(> th:first-child + td:last-child) > th { font-size: .78rem; }
    .card table:not(.stack) tbody tr:last-child:has(> th:first-child + td:last-child) { border-bottom: 0; }
}
@media (max-width: 640px) {
    /* lange Werte in Karten umbrechen statt abschneiden */
    table.stack td > * { min-width: 0; overflow-wrap: anywhere; }
    table.stack td { flex-wrap: nowrap; }
}
.punishhead { font-size: 1rem; margin: 1rem 0 .5rem; display: flex; align-items: center; gap: .5rem; }
.tableactions + .punishhead { margin-top: 0; }
.badgetag.bad { background: color-mix(in srgb, #e5484d 16%, transparent); color: #e5484d; }
.histhead { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.histhead h2 { margin: 0; font-size: inherit; }
#dlg-confirm { width: min(28rem, calc(100vw - 2rem)); }
#dlg-confirm .confirmtext { margin: 0; line-height: 1.5; white-space: pre-line; }
#dlg-confirm .confirminput { width: 100%; margin-top: .75rem; }
.livetag { display: inline-block; margin-left: .35rem; padding: 0 .4rem; border-radius: 4px; background: color-mix(in srgb, #3d9a5c 20%, transparent); color: #3d9a5c; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; vertical-align: middle; }
.editgrid > div { flex-basis: 9rem; }
.editlist li { display: flex; align-items: center; gap: .5rem; }
.editlist li form.inline { margin-left: auto; }
.statustag.afk { background: color-mix(in srgb, #e0a100 22%, transparent); color: #c98f00; }
.onlinetag.afk { background: #c98f00; }
/* Itemliste: die Anzahl bleibt immer rechts neben dem Namen (das Kästchen wächst mit, siehe .invgrid) */
.itemlist li > .itemname { white-space: nowrap; }
.itemlist li > .hint:last-child { flex: none; }
/* Ticket-System im Spiel (F2, ingame.php): ohne Seitenleiste, Kopf- und Fußzeile; Links auf andere Seiten (Namen, Profile …) nicht anklickbar */
.embed .side, .embed .top, .embed .foot { display: none; }
.embed .shell { grid-template-columns: 1fr; grid-template-rows: 1fr; grid-template-areas: "main"; }
.embed main a[href]:not([href^="tickets.php"]):not([href^="rules.php"]):not([href^="lexicon.php"]):not([href^="uploads/"]):not([href^="#"]) { pointer-events: none; color: inherit; text-decoration: none; cursor: default; }
.embed .devbar { display: none; }
.permsection > h2 { margin: 0 0 .75rem; font-size: 1.05rem; }
[data-ppane="team"] .permsection + .permsection { margin-top: 1rem; }
.pills a.active { background: color-mix(in srgb, var(--blue) 16%, transparent); }
.permsubtabs { margin-bottom: 1rem; }
/* Berechtigungen auf dem Handy: jede Zeile als kompakte Karte (Name + Schalter oben, Auswahl darunter), Unterreiter als
   wischbare Leiste, schmale Speichern-Leiste */
@media (max-width: 760px) {
    .permedit thead { display: none; }
    .permedit, .permedit tbody { display: block; width: 100%; }
    .permedit tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .45rem .75rem; align-items: center; padding: .7rem .2rem; border-bottom: 1px solid var(--line); }
    .permedit tr[hidden] { display: none; }
    .permedit td { display: block; padding: 0; border: 0; }
    .permedit td:first-child { grid-column: 1; }
    .permedit td:nth-child(2) { grid-column: 2; grid-row: 1; }
    .permedit td:nth-child(n+3) { grid-column: 1 / -1; }
    .permedit td:empty { display: none; }
    .permedit select { width: 100%; min-width: 0; }
    .permedit td.hint { font-size: .78rem; }
    .permedit td.hint::before { content: 'Standard: '; }
    .permedit tr.child td:first-child { padding-left: 1.2rem; }
    .permedit tr.custom td:first-child, .permedit tr.changed td:first-child { box-shadow: none; }
    .permedit tr.custom { box-shadow: inset 3px 0 0 #e8902f; }
    .permedit tr.changed { box-shadow: inset 3px 0 0 var(--blue); }
    .permform .tablewrap { overflow: visible; }
    .permsubtabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -.25rem; margin-right: -.25rem; padding-bottom: .25rem; }
    .permsubtabs a { flex: none; white-space: nowrap; }
    .permform .savebar { padding: .55rem .75rem; margin-bottom: 1rem; }
    .permform .savebar .hint { display: none; }
    .permform .savebar .btn { width: 100%; }
}
/* Bild vergrößert (Fußzeile, dlg-img) */
#dlg-img { width: min(70rem, calc(100vw - 2rem)); }
.lightbox { display: flex; align-items: center; justify-content: center; background: #000; border-radius: 10px; overflow: hidden; }
.lightbox img { display: block; max-width: 100%; max-height: calc(100vh - 12rem); object-fit: contain; image-rendering: auto; }
/* Team-Dashboard → Transaktionen */
.txgrid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 1rem; align-items: start; margin-bottom: 1rem; }
.txside select, .txside input { width: 100%; margin-bottom: .5rem; }
.txside [hidden] { display: none; }
.txarrow { align-self: center; font-size: 1.6rem; color: var(--muted); padding-top: 1.2rem; }
.txbalance { margin: 0; }
td.neg { color: var(--error); }
@media (max-width: 700px) { .txgrid { grid-template-columns: 1fr; } .txarrow { transform: rotate(90deg); justify-self: center; padding: 0; } }
.loantoggle { border: 0; background: none; cursor: pointer; font-size: 1rem; padding: .1rem .35rem; border-radius: 6px; }
.loantoggle:hover { background: var(--ghost); }
.loantoggle.ok { color: var(--ok); }
.loantoggle.bad { color: var(--error); }
.subpills { margin-top: -.5rem; }
.loantable .inputunit { max-width: 10rem; }
.memberperms tr.own td { background: color-mix(in srgb, var(--blue) 8%, transparent); }
.memberperms .badgetag { font-size: .68rem; }

/* Reiter in Dialogen (Knöpfe wie .pills a) */
.pills button { padding: .5rem 1rem; border: 0; border-radius: 8px; background: none; color: var(--blue); font: inherit; font-weight: 600; cursor: pointer; }
.pills button:hover { background: var(--ghost); }
.pills button.active { background: color-mix(in srgb, var(--blue) 16%, transparent); }
.dtabs .pills { margin-bottom: 1rem; }
/* Gehalt je Rang: Eingabefeld breit genug für vierstellige Beträge */
.loantable .inputunit { width: 9rem; max-width: none; }
.loantable .inputunit input { width: 100%; min-width: 0; }
/* Mitgliederliste am Handy: jedes Mitglied als kompakte Karte – Name oben, Werte als Kacheln in zwei Spalten, Aktionen unten */
@media (max-width: 640px) {
    table.memberlist.stack tr:not(.rankhead) { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; padding: .75rem .1rem; }
    table.memberlist.stack tr:not(.rankhead) td { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: .1rem; padding: .35rem .55rem !important;
        border-radius: 8px; background: var(--ghost); text-align: left; font-size: .9rem; }
    table.memberlist.stack tr:not(.rankhead) td::before { font-size: .72rem; }
    table.memberlist.stack tr:not(.rankhead) td:first-child { grid-column: 1 / -1; padding: 0 0 .2rem !important; background: none; }
    table.memberlist.stack tr:not(.rankhead) td:last-child:has(.iconrow) { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; background: none; padding: .2rem 0 0 !important; }
    table.memberlist.stack tr:not(.rankhead) td:last-child:has(.iconrow)::before { font-size: .82rem; }
    table.memberlist.stack .rankhead { display: block; padding: 0; border: 0; }
    table.memberlist.stack .rankhead th { display: block; padding: 1rem .2rem .4rem; }
    table.memberlist.stack td:first-child { padding-left: 0; }
}
/* Rechte eines Mitglieds (Dialog): passt auch am Handy in den Dialog */
table.memberperms { width: 100%; }
table.memberperms th, table.memberperms td { padding: .45rem .4rem; }
table.memberperms td:first-child { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 640px) {
    table.memberperms th, table.memberperms td { padding: .4rem .25rem; font-size: .85rem; }
    table.memberperms th.shrink { white-space: normal; }
    table.memberperms .badgetag { display: block; width: max-content; margin: .15rem auto 0; }
}
/* Reiter mit Symbol (z. B. Benutzer & Organisationen, Berechtigungen) */
.pills a:has(svg) { display: inline-flex; align-items: center; gap: .45rem; }
.pills a svg { flex: none; }
/* Server: Schloss am Servernamen (Passwort), Kopierzeile im Dialog */
.srvhead h2 { display: flex; align-items: center; gap: .5rem; }
.pwlock { color: #e0a100; }
.pwlock.off { color: var(--muted); opacity: .7; }
.copyline { display: flex; gap: .5rem; margin-bottom: 1rem; }
.copyline input { flex: 1; min-width: 0; margin: 0; }
.copyline .btn { flex: none; display: inline-flex; align-items: center; gap: .4rem; }
[data-copy].copied { color: var(--ok); }
/* Autohäuser: Banner der Autohäuser (355 × 75 aus dem Gamemode) als Logo, Kopf mit Standortkarte */
.shopgrid { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.shopcard { display: flex; flex-direction: column; padding: 0; overflow: hidden; color: var(--text); text-decoration: none; transition: border-color .15s, transform .15s; }
.shopcard:hover { border-color: color-mix(in srgb, var(--blue) 60%, var(--line)); transform: translateY(-2px); text-decoration: none; }
.shoplogo { display: block; width: 100%; aspect-ratio: 355 / 75; object-fit: cover; background: var(--input); }
.shoplogo.none { display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--muted); }
.shoplogo.big { border-radius: 8px; margin-bottom: 1rem; }
.shopbody { padding: .9rem 1rem 1rem; }
.shopbody strong { font-size: 1.05rem; }
.shopbody .hint { margin: .3rem 0 0; }
.shophead { max-width: 34rem; margin-bottom: 1.5rem; }
.shophead .card { margin: 0; }
.mcard.soldout .mpic { filter: grayscale(.8); opacity: .7; }
/* Autohaus: Position des Ausstellungsfahrzeugs im Dialog „Fahrzeug hinzufügen“ */
.posfield { min-width: 0; margin: .5rem 0 0; padding: .75rem .9rem; border: 1px solid var(--line); border-radius: 8px; }
.posfield .row > div input { width: 100%; min-width: 0; }
.posfield legend { padding: 0 .35rem; color: var(--muted); font-size: .85rem; font-weight: 600; }
.posfield .row > div { flex: 1 1 5rem; }
/* Überschrift mit Knopf daneben (z. B. Autohaus: „Fahrzeuge“ + Hinzufügen) */
.subheadrow { display: flex; align-items: center; gap: .75rem; margin: 2rem 0 .9rem; }
.subheadrow h2.subhead { margin: 0; }
/* Farb-Vorgabe (Fraktions-/Unternehmensfarben) im Fahrzeug-Formular; Limits je Fahrzeug */
.swatch { display: inline-block; width: .9rem; height: .9rem; margin-right: .2rem; border: 1px solid var(--line); border-radius: 3px; vertical-align: -.1rem; }
[data-colors] .swatch:last-of-type { margin-right: .45rem; }
.limitrow > div { flex: 1 1 12rem; }
.limittable .limitinput { width: 6rem; min-width: 6rem; margin: 0; text-align: right; }
.limittable td:nth-child(2), .limittable th:nth-child(2) { white-space: nowrap; text-align: right; }
.limittable input[list] { margin: 0; }
.btn.limadd { margin-top: .6rem; }
/* Waffen- & Itemlager: je Waffe eine Karte mit Bestand / Maximum */
.depotgrid { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); margin-bottom: 1.25rem; }
.depotcard { display: flex; flex-direction: column; gap: .6rem; margin: 0; }
.depotcard.inactive { opacity: .7; }
.depothead { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-weight: 600; min-width: 0; }
.depothead .weapon { min-width: 0; white-space: normal; overflow-wrap: anywhere; line-height: 1.25; }
.depothead .weapon img { flex: none; }
.depotmeter { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: .25rem .5rem; }
.depotmeter .bar { grid-column: 1 / -1; }
.depotmeter strong.full { color: #e8902f; }
/* Händlerkarten: Werte bleiben sichtbar; Handling als i-Symbol mit Tooltip (Hover oder Antippen) */
.vehcounts { grid-template-columns: auto minmax(0, 1fr); }
.vehcounts dd { overflow-wrap: anywhere; }
.infotip { position: relative; display: inline-flex; color: var(--muted); cursor: help; border-radius: 50%; }
.infotip svg { width: 1rem; height: 1rem; }
.infotip:hover, .infotip:focus-visible { color: var(--text); outline: none; }
.infotip .tipbox { display: none; position: absolute; right: -.4rem; bottom: calc(100% + .45rem); z-index: 20; width: max-content; max-width: 15rem;
    padding: .45rem .6rem; background: var(--bg, #12141c); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
    color: var(--text); font-size: .78rem; font-weight: 400; line-height: 1.45; text-align: left; white-space: normal; overflow-wrap: anywhere; }
.infotip:hover .tipbox, .infotip:focus .tipbox { display: block; }
/* Fahrzeuge respawnen: orangener Knopf (wie „Neustarten“ beim Server) */
.btn.orange { background: #e8902f; color: #fff; }
.btn.orange:hover { background: #d47d1c; }
.btn.orange svg { width: 15px; height: 15px; }
.respawntable td.right { white-space: nowrap; }
.respawntable .btn { display: inline-flex; align-items: center; gap: .35rem; margin: 0; padding: .35rem .75rem; font-size: .85rem; }
/* Skins bearbeiten: Vorschau im Fenster, Stift neben der Skin-ID */
.skinpreview { display: flex; justify-content: center; margin-bottom: .75rem; }
.skincard strong .ib { vertical-align: middle; margin-left: .2rem; }
/* Fischdatenbank: je Fisch eine Karte mit Bild, Fanginfos und Schwierigkeit */
.fishgrid { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.fishcard { display: flex; flex-direction: column; gap: .6rem; margin: 0; }
.fishcard.offseason { opacity: .72; }
.fishhead { display: flex; align-items: center; gap: .75rem; }
.fishhead > div { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .45rem; min-width: 0; }
.fishhead > div strong { flex-basis: 100%; font-size: 1.05rem; }
.fishimg { flex: none; width: 64px; height: 64px; object-fit: contain; border-radius: 10px; background: var(--input); padding: .3rem; }
.fishimg.none { display: grid; place-items: center; color: var(--muted); font-weight: 700; }
/* Übersicht: Liste der wöchentlichen Initiativen */
.initlist { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .5rem; }
.initlist li { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: .6rem .75rem; border: 1px solid var(--line); border-radius: 8px; }
.initlist li.active { border-color: color-mix(in srgb, #2fa75a 60%, var(--line)); background: color-mix(in srgb, #2fa75a 8%, transparent); }
/* Spieleinstellungen: Auswahl „sofort / beim Neustart“ als Kacheln */
.syncopts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin: 1rem 0 0; padding: 0; border: 0; min-width: 0; }
.syncopts legend { grid-column: 1 / -1; padding: 0; margin-bottom: .45rem; font-weight: 600; font-size: .92rem; }
.syncopt { position: relative; margin: 0; cursor: pointer; }
.syncopt input { position: absolute; opacity: 0; pointer-events: none; }
.syncopt > span { display: flex; flex-direction: column; gap: .3rem; height: 100%; padding: .75rem .85rem; border: 1px solid var(--line); border-radius: 10px; background: var(--input); transition: border-color .15s, background .15s; }
.syncopt strong { display: flex; align-items: center; gap: .4rem; font-size: .95rem; }
.syncopt strong svg { width: 1rem; height: 1rem; flex: none; }
.syncopt small { color: var(--muted); font-size: .82rem; line-height: 1.4; }
.syncopt:hover > span { border-color: color-mix(in srgb, var(--blue) 50%, var(--line)); }
.syncopt input:checked + span { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 12%, var(--input)); box-shadow: 0 0 0 1px var(--blue); }
.syncopt input:checked + span strong { color: var(--blue); }
.syncopt input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.syncopt.off { cursor: not-allowed; }
.syncopt.off > span { opacity: .55; }
@media (max-width: 560px) { .syncopts { grid-template-columns: 1fr; } }
/* gesperrte Auswahl (z. B. „Team“ beim Bewerben für Teammitglieder): ausgegraut, durchgestrichen, Verbotszeichen beim Drüberfahren */
.chip.blocked { cursor: not-allowed; }
.chip.blocked span { opacity: .5; text-decoration: line-through; }
/* Gruppenimmobilien: Koordinaten als einzelne Felder (x / y / z bzw. Kamera mit Ziel) */
.coordset { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: .5rem .75rem; margin: .75rem 0 0; padding: .6rem .8rem .7rem; border: 1px solid var(--line); border-radius: 8px; min-width: 0; }
.coordset legend { padding: 0 .3rem; font-weight: 600; font-size: .92rem; }
.coordset label { margin-top: 0; }
.coordset input { margin: 0; }
details.advanced { margin: .9rem 0 0; }
details.advanced summary { cursor: pointer; color: var(--blue); font-weight: 600; }
details.advanced textarea { width: 100%; }
/* Strafenkatalog: Auswahl in den Sanktions-Fenstern, Vorschlag, Katalog-Tabelle */
.sanctionpick { margin-bottom: .6rem; }
.sanctionpick select { width: 100%; }
.sanctionsugg { margin: .5rem 0 .2rem; padding: .55rem .75rem; border: 1px solid color-mix(in srgb, #e8902f 50%, var(--line)); border-radius: 8px; background: color-mix(in srgb, #e8902f 8%, transparent); }
.sanctionsugg p { margin: 0 0 .25rem; }
.sanctionsugg p:last-child { margin-bottom: 0; }
.nickresult .nickpaid { color: #e8902f; font-weight: 600; }
.sanctiontable { font-size: .82rem; }
.sanctiontable th[scope="row"] { min-width: 12rem; text-align: left; font-weight: 600; }
.sanctiontable td { min-width: 7rem; vertical-align: top; }
.sanctiontable td.sanfor { min-width: 10rem; background: color-mix(in srgb, #e8902f 8%, transparent); }
dialog#dlg-sanctions { width: min(96vw, 90rem); }
.sangrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem .75rem; }
@media (max-width: 640px) { .sangrid { grid-template-columns: 1fr; } }
/* Strafenkatalog als Karten: je Verstoß die Stufen nebeneinander, Farbe nach Schwere, aktuelle Stufe des Spielers markiert */
.sancat { display: grid; gap: .65rem; }
.sanbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; position: sticky; top: 0; z-index: 2; padding: .2rem 0 .4rem; background: var(--card); }
.sanbar input[type="search"] { flex: 1 1 14rem; margin: 0; }
.sanbar .pills { margin: 0; }
.sancard { padding: .7rem .85rem; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.sancard[hidden] { display: none; }
.sancard header { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; margin-bottom: .55rem; }
.sancard h3 { margin: 0; font-size: .98rem; flex: 1 1 auto; min-width: 0; }
.sancard .sanedit { display: inline-flex; gap: .25rem; margin-left: auto; }
.sanstages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; }
.sanstages.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sanstage { display: flex; flex-direction: column; gap: .2rem; padding: .45rem .55rem; border-radius: 8px; background: var(--input); border-left: 3px solid var(--line); font-size: .86rem; line-height: 1.35; overflow-wrap: anywhere; }
.sanstage small { color: var(--muted); font-size: .76rem; margin-right: .2rem; }
.sanlvl { color: var(--muted); font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.sanstage.sev-prison { border-left-color: #e8902f; }
.sanstage.sev-ban { border-left-color: #e5484d; }
.sanstage.sev-perm { border-left-color: #b4232a; background: color-mix(in srgb, #e5484d 10%, var(--input)); }
.sanstage.current { outline: 2px solid var(--blue); outline-offset: -1px; }
.sanstage.current .sanlvl { color: var(--blue); }
.sancard .sanfor { margin: .5rem 0 0; font-size: .88rem; }
dialog#dlg-sanctions { width: min(96vw, 70rem); }
@media (max-width: 760px) { .sanstages { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .sanstages, .sanstages.two { grid-template-columns: 1fr; } }
.sanstage.current span.on { font-weight: 700; }
.sanstage.current:has(.on) span:not(.on):not(.sanlvl) { opacity: .55; } /* nur bei zwei Zeilen (bis / ab 100 h) */
/* Team-Dashboard → Gangwar: Karte links, Liste rechts; Gebiet anklicken öffnet „Ändern“, Zeile / Gebiet gegenseitig hervorgehoben */
.gwadmin { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.gwadmin .gwmapcard { position: sticky; top: 1rem; margin: 0; }
.gwadmin .gwlist { margin: 0; }
.gwa { cursor: pointer; outline: none; }
.gwa.attacked { cursor: not-allowed; }
.gwa.open rect { stroke-dasharray: none; }
.gwa.attacked rect { stroke: #e5484d; stroke-width: 26; animation: gwpulse 1.2s ease-in-out infinite; }
@keyframes gwpulse { 50% { stroke-opacity: .25; } }
.gwa:hover rect, .gwa:focus-visible rect, .gwa.hl rect { stroke: #fff; stroke-width: 30; fill: color-mix(in srgb, var(--ac) 85%, transparent); }
.gwlist tr.hl td { background: color-mix(in srgb, var(--blue) 12%, transparent); }
.gwlist td .swatch { margin-right: .45rem; }
.swatch.gwopen { background: transparent; box-shadow: inset 0 0 0 2px #2fa75a; }
.swatch.gwhot { background: transparent; box-shadow: inset 0 0 0 2px #e5484d; }
.gwa.open:not(.attacked) rect { stroke: #2fa75a; stroke-width: 22; }
@media (max-width: 1100px) { .gwadmin { grid-template-columns: 1fr; } .gwadmin .gwmapcard { position: static; } }
/* Übersicht → Einstellungen: Kartenwahl mit Vorschau */
.mapchoice { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1rem 0; padding: .6rem .8rem .8rem; border: 1px solid var(--line); border-radius: 8px; min-width: 0; }
.mapchoice legend { padding: 0 .3rem; font-weight: 600; }
.mapchoice label { position: relative; display: flex; flex-direction: column; align-items: center; gap: .35rem; margin: 0; cursor: pointer; }
.mapchoice input { position: absolute; opacity: 0; }
.mapchoice img { width: 7.5rem; height: 7.5rem; object-fit: cover; border-radius: 8px; border: 2px solid var(--line); }
.mapchoice input:checked + img { border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 30%, transparent); }
.mapchoice input:focus-visible + img { outline: 2px solid var(--blue); outline-offset: 2px; }
.mapchoice input:checked ~ span { color: var(--blue); font-weight: 600; }
/* ===== Bedienungshilfen (Kopfzeile → Bedienungshilfen; Klassen am <html>, Cookie cp_a11y) ===== */
.skiplink { position: absolute; left: .75rem; top: -3rem; z-index: 1000; padding: .55rem .9rem; border-radius: 8px; background: var(--blue); color: #fff; font-weight: 700; text-decoration: none; transition: top .15s; }
.skiplink:focus { top: .75rem; }
main:focus { outline: none; }
.a11ylist { width: min(92vw, 22rem); max-height: 80vh; overflow-y: auto; padding: .8rem .9rem; display: grid; gap: .45rem; }
.a11ylist > strong { font-size: 1rem; }
.a11ylist .setting { margin: 0; }
.a11yfont { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.a11yfont > span { flex-basis: 100%; font-weight: 600; font-size: .9rem; }
.a11yfont label { margin: 0; cursor: pointer; }
.a11yfont input { position: absolute; opacity: 0; }
.a11yfont input + span { display: inline-block; padding: .25rem .55rem; border: 1px solid var(--line); border-radius: 6px; font-size: .85rem; }
.a11yfont input:checked + span { border-color: var(--blue); color: var(--blue); font-weight: 700; }
.a11yfont input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.a11yfoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .2rem; font-size: .85rem; }
/* Schriftgröße: alles in rem wächst mit */
html.a11y-font-1 { font-size: 115%; }
html.a11y-font-2 { font-size: 130%; }
html.a11y-font-3 { font-size: 150%; }
/* LRS-Modus: gut lesbare serifenlose Schrift, mehr Abstand, kein Blocksatz, keine Kursivschrift */
html.a11y-lrs body, html.a11y-lrs input, html.a11y-lrs textarea, html.a11y-lrs select, html.a11y-lrs button { font-family: Verdana, Tahoma, "Segoe UI", Arial, sans-serif; letter-spacing: .04em; word-spacing: .14em; }
html.a11y-lrs body { line-height: 1.8; }
html.a11y-lrs p, html.a11y-lrs li, html.a11y-lrs dd, html.a11y-lrs td { text-align: left !important; }
html.a11y-lrs em, html.a11y-lrs i, html.a11y-lrs cite { font-style: normal; font-weight: 600; }
html.a11y-lrs p, html.a11y-lrs .legaltext, html.a11y-lrs .motd { max-width: 75ch; }
/* Lesehilfe */
.a11yguide { display: none; position: fixed; left: 0; right: 0; height: 36px; pointer-events: none; z-index: 9999; background: color-mix(in srgb, #ffd54a 18%, transparent); border-top: 2px solid #ffd54a; border-bottom: 2px solid #ffd54a; }
html.a11y-guide .a11yguide { display: block; }
/* Hoher Kontrast */
html.a11y-contrast { --text: #ffffff; --muted: #d8dbe6; --line: #8a90a8; --blue: #b394ff; }
html.a11y-contrast[data-theme="light"] { --text: #000000; --muted: #2b2f3a; --line: #4a4f60; --blue: #5b21b6; }
html.a11y-contrast .card, html.a11y-contrast .usermenulist, html.a11y-contrast dialog { border: 2px solid var(--line); }
html.a11y-contrast .hint, html.a11y-contrast small { color: var(--muted); opacity: 1; }
html.a11y-contrast .btn { border: 2px solid currentColor; }
/* Links unterstreichen */
html.a11y-links a { text-decoration: underline !important; text-underline-offset: .15em; }
/* Deutlicher Fokus */
html.a11y-focus *:focus-visible { outline: 3px solid #ffd54a !important; outline-offset: 2px !important; box-shadow: 0 0 0 6px rgba(0, 0, 0, .6) !important; }
/* Bewegung reduzieren (auch bei „Bewegung reduzieren“ im Betriebssystem) */
html.a11y-motion *, html.a11y-motion *::before, html.a11y-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
/* Größere Bedienelemente (Zielgröße mind. 44 px) */
html.a11y-spacing .btn, html.a11y-spacing .ib, html.a11y-spacing .iconbtn, html.a11y-spacing input, html.a11y-spacing select, html.a11y-spacing textarea, html.a11y-spacing .side nav a { min-height: 44px; }
html.a11y-spacing .ib, html.a11y-spacing .iconbtn { min-width: 44px; }
html.a11y-spacing .side nav a { padding-top: .6rem; padding-bottom: .6rem; }

/* Shop: Ergebnis beim Einlösen, neue Codes, Item-/Fahrzeugzeilen im Gutschein-Formular */
.shopredeem form { margin-top: .5rem; }
.shoplines { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .3rem; }
.shoplines li { display: flex; align-items: center; gap: .4rem; }
.shoplines li svg { width: 1rem; height: 1rem; flex: none; }
.shoplines li.ok svg { color: var(--ok); }
.shoplines li.ticket svg { color: #e8a33d; }
.shopcodes { margin: .5rem 0 0; padding: .6rem .8rem; border-radius: 8px; background: var(--input); font-size: .95rem; user-select: all; white-space: pre-wrap; }
.shoprows { display: grid; gap: .25rem; }
.voucherform h4 { margin: 1rem 0 .25rem; font-size: .92rem; }
.voucherform [data-addrow] { margin: .35rem 0 0; }
.codecopy { display: inline-flex; align-items: center; gap: .3rem; }
.codecopy .ib { width: 1.8rem; height: 1.8rem; }
.codecopy .ib.copied { width: auto; padding: 0 .45rem; font-size: .78rem; }
.rewardform .switch.off { opacity: .45; cursor: not-allowed; }
/* Stammspielershop: Stufen nach Spielstunden */
.regularhead .big { margin: .25rem 0; }
.shoppills { margin: -.5rem 0 1.25rem; }
.shoppills a { display: inline-flex; align-items: center; gap: .35rem; }
.shoppills svg { width: 1rem; height: 1rem; }
.regulargrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; margin-top: 1rem; }
.regulartier { display: flex; flex-direction: column; gap: .4rem; margin: 0; }
.regulartier h3 { display: flex; align-items: center; gap: .4rem; margin: 0; font-size: 1rem; }
.regulartier h3 svg { width: 1.05rem; height: 1.05rem; flex: none; }
.regulartier.open { border-color: var(--ok); box-shadow: 0 0 0 1px var(--ok); }
.regulartier.open h3 svg, .regulartier.claimed h3 svg { color: var(--ok); }
.regulartier.locked h3 svg { color: var(--muted); }
.regulartier.inactive { opacity: .6; }
.regulartier form { margin-top: auto; }
.regularlist { margin: 0; padding-left: 1.1rem; }
.shopbalance .big { display: flex; align-items: center; gap: .5rem; margin: .25rem 0 0; }
.shopbalance .big svg { width: 1.6rem; height: 1.6rem; color: var(--blue); }
/* Events: lange Texte in der Liste gekürzt, ganzer Text in der Detailansicht */
.eventcard .richtext.clamped { max-height: 18rem; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
/* VIP-Funktionen ohne VIP: sichtbar, aber nicht anklickbar */
.subtabs .taboff { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 1rem; color: var(--muted); font-weight: 600; opacity: .45; cursor: not-allowed; }
/* Ergebnis nach dem Einlösen / Abholen: bleibt bis × (data-dismiss), Seitenwechsel oder Neuladen */
.shopresult { position: relative; padding-right: 2.5rem; }
.shopresult .x { position: absolute; top: .35rem; right: .45rem; width: 1.8rem; height: 1.8rem; border: 0; border-radius: 6px; background: none; color: inherit; font-size: 1.3rem; line-height: 1; cursor: pointer; opacity: .7; }
.shopresult .x:hover { opacity: 1; background: color-mix(in srgb, currentColor 12%, transparent); }
/* Event-Details: großes Fenster mit dem ganzen Text */
.modal:has(.eventdetail) { width: min(64rem, calc(100vw - 2rem)); }
.eventdetail .eventimg { width: 100%; max-height: 22rem; object-fit: cover; border-radius: 10px; margin-bottom: .75rem; }
.eventdetail .richtext { font-size: 1rem; line-height: 1.6; }
.eventdetail .richtext h3 { border-top: 0; padding-top: 0; }
.eventdetail .richimg { max-width: 100%; border-radius: 8px; }
.latesttag { margin-left: .4rem; font-size: .72rem; vertical-align: middle; }
/* Gutscheine verwalten: Filter und Suche */
.voucherfilter { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 .75rem; }
.voucherfilter .pills { margin: 0; }
.voucherfilter input[type="search"] { flex: 1 1 12rem; max-width: 20rem; margin: 0; }
/* Shop-Tabellen auf dem Handy: Inhalt in voller Breite (Bezeichnung oben, Text darunter) statt neben der Bezeichnung zusammengequetscht */
@media (max-width: 640px) {
    table.stack.shoptx td.wide, .cponline table.stack td.wide { display: block; text-align: left; }
    table.stack.shoptx td.wide::before, .cponline table.stack td.wide::before { display: block; margin-bottom: .15rem; }
}
/* Übersicht → Einstellungen: Zeile mit Knopf (z. B. Popup-Benachrichtigungen → eigenes Fenster) */
.settingrow { display: flex; align-items: center; gap: .75rem; }
.settingrow > svg { width: 1.2rem; height: 1.2rem; flex: none; color: var(--muted); }
.settingrow > span { flex: 1; display: flex; flex-direction: column; }
.settingrow .btn { flex: none; }
/* Abschnittsbalken zwischen zwei Bereichen einer Seite (z. B. Wer ist online: Spiel | Control Panel) */
.sectionbar { display: flex; align-items: center; gap: .9rem; margin: 2.25rem 0 1rem; color: var(--muted); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sectionbar::before, .sectionbar::after { content: ""; flex: 1; height: 2px; border-radius: 2px; background: var(--line); }
.sectionbar span { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .8rem; border: 1px solid var(--line); border-radius: 999px; background: var(--card); }
.sectionbar svg { width: .95rem; height: .95rem; }
/* Teamstruktur bearbeiten (ab rank.admin_rank): je Mitglied Befördern / Degradieren / Bearbeiten */
.teamedit { list-style: none; margin: 0 0 1rem; padding: 0; text-align: center; }
/* Name immer mittig unter dem Rang, Knöpfe rechts daneben (linke Spalte bleibt gleich breit wie die rechte) */
.credits .teamedit { padding: 0; } /* .richtext ul rückt sonst links ein – die Namen stünden nicht mittig */
.teamedit li { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .6rem; padding: .15rem 0; }
.teamedit li > :first-child { grid-column: 2; }
.teamedit li > :not(:first-child) { grid-column: 3; justify-self: start; }
.teamedit .iconrow form { display: inline-flex; gap: .35rem; margin: 0; }
.teamedit .ib[disabled] { opacity: .35; cursor: not-allowed; }
.credits .cardhead { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .6rem; margin-top: 1.75rem; } /* Überschrift mittig, + rechts daneben */
.credits .cardhead > h2 { grid-column: 2; } .credits .cardhead > .plus { grid-column: 3; justify-self: start; }
.credits .cardhead h2 { margin: 0; } /* sonst schiebt der Abstand von .credits h2 die Überschrift unter das + */
.credits .cardhead .plus { width: 30px; height: 30px; font-size: 1.3rem; }
.leaveteam { margin-top: 0; padding: .2rem .6rem; font-size: .8rem; } .leaveteam svg { width: .9rem; height: .9rem; }
/* Modus im Spiel (DM-Halle, Snipermode, Color Cars …) neben dem Namen – nur fürs Team, wie AFK */
.statustag.activity { background: color-mix(in srgb, #8b5cf6 22%, transparent); color: #a78bfa; }
.onlinetag.activity { background: #7c3aed; }
/* Übersicht → Dein Konto: letzte Breaking News (Aktionen | Gangwars) */
.newshead { display: flex; align-items: center; gap: .45rem; margin: 1.25rem 0 .5rem; font-size: 1rem; }
.newshead svg { width: 1.1rem; height: 1.1rem; color: var(--red); }
.newscols { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; }
.newscols h4 { margin: 0 0 .35rem; font-size: .88rem; color: var(--muted); }
.newslist { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; font-size: .88rem; line-height: 1.4; }
.newslist li { padding-left: .6rem; border-left: 2px solid var(--line); }
/* Teamstruktur → Änderungen */
.changelist { list-style: none; margin: 0; padding: 0; }
.changelist li { display: flex; align-items: center; gap: .6rem; padding: .4rem 0; border-bottom: 1px solid var(--line); }
.changelist li:last-child { border-bottom: 0; }
.changelist .chgicon { display: inline-flex; width: 1.6rem; height: 1.6rem; flex: none; align-items: center; justify-content: center; border-radius: 50%; background: color-mix(in srgb, currentColor 14%, transparent); }
.changelist .chgicon svg { width: .95rem; height: .95rem; }

/* QR-Easteregg (Team-Dashboard) */
.qrbox { max-width: 260px; margin: .75rem 0; }
.qrbox svg { width: 100%; height: auto; display: block; border-radius: 6px; }

/* Server → Datenbank-Backups */
.bkstatus { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .75rem; margin: 0 0 1rem; }
.bkstatus > div { display: flex; flex-direction: column; gap: .2rem; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: 10px; }
.bkstatus .status { align-self: flex-start; }
.bkfiles { display: flex; flex-wrap: wrap; gap: .35rem; }
.bkfile { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .55rem; border: 1px solid var(--line); border-radius: 999px; font-size: .85rem; text-decoration: none; white-space: nowrap; }
.bkfile:hover { border-color: var(--blue); }
.bkfile { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
#backups .cardhead .btn { white-space: nowrap; }
.bkfile svg { width: .9rem; height: .9rem; }
.bkerr { font-size: .85rem; margin-top: .3rem; }
.bkhelp { margin-top: 1rem; }
.bkhelp summary { cursor: pointer; color: var(--muted); }
.bkhelp code { overflow-wrap: anywhere; }
.teamchanges .chgtext { flex: 1; min-width: 0; }
.evfx.newyear .spark.logo { width: 4px; height: 4px; margin: -2px 0 0 -2px; box-shadow: 0 0 6px var(--c), 0 0 1px #fff; }
.ticketto { margin: 0; line-height: 1.35; }
.announce.banned .baninfo { display: grid; grid-template-columns: max-content 1fr; gap: .15rem .9rem; margin: .45rem 0 .3rem; }
.announce.banned .baninfo dt { color: var(--muted); }
.announce.banned .baninfo dd { margin: 0; overflow-wrap: anywhere; }
.announce.banned .btn { margin-top: .35rem; }
.announce.banned .banbtns { display: flex; flex-wrap: wrap; gap: .5rem; }
.announce.banned .banbtns .btn { color: #fff; text-decoration: none; } .announce.banned .banbtns .btn.ghost { color: var(--text); }
.punishlift { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; margin-top: .3rem; font-size: .85rem; }
.logtag { display: inline-block; margin: .1rem 0 0 .2rem; padding: 0 .4rem; border-radius: 999px; font-size: .72rem; line-height: 1.5; white-space: nowrap; vertical-align: middle; }
.logtag.duty { background: color-mix(in srgb, var(--blue) 18%, transparent); color: var(--blue); }
.logtag.nodm { background: color-mix(in srgb, #2fa75a 18%, transparent); color: #2fa75a; }

/* Commits nach Tagen */
.commitday { position: relative; margin: 0 0 1.1rem; padding-left: 1rem; border-left: 2px solid color-mix(in srgb, var(--blue) 45%, var(--line)); }
.commitday:last-of-type { margin-bottom: .5rem; }
.commitdate { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .55rem; margin: 0 0 .25rem; font-size: 1rem; }
.commitdate::before { content: ''; position: absolute; left: -7px; top: .35rem; width: 12px; height: 12px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px var(--card); }
.commitdate time { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.commitdate .hint { margin-left: auto; font-weight: 400; font-size: .85rem; }
.commitday .commits { margin-bottom: 0; }

/* Sanktion vergeben (Spielerprofil): Warn, Prison, Bann, Kick in einem Fenster */
.sanparts { display: grid; gap: .45rem; border: 0; padding: 0; margin: .9rem 0 .4rem; }
.sanparts legend { margin-bottom: .45rem; padding: 0; color: var(--muted); font-size: .85rem; }
.sanpart { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; min-height: 3.1rem; padding: .45rem .8rem; border: 1px solid var(--line); border-radius: 10px; background: var(--input); transition: border-color .15s, background .15s; }
.sanpart .switch { min-width: 8rem; margin: 0; }
.sanpart .switch strong { font-weight: 600; }
.sanpart .inputunit { max-width: 11rem; transition: opacity .15s; }
.sanpart:has(.switch input:checked) { border-color: color-mix(in srgb, #e5484d 60%, var(--line)); background: color-mix(in srgb, #e5484d 9%, var(--input)); }
.sanpart .switch input:checked + .track { background: #e5484d; }
.sanpart:not(:has(.switch input:checked)) .inputunit { opacity: .55; }
.sanpart.off { opacity: .5; }
.sanpart.off .switch { cursor: not-allowed; }
.sanwarns { margin-top: 1rem; }
.sanwarns > summary { cursor: pointer; color: var(--blue); font-weight: 600; }

/* Verwaltung → Server: breitere Karten und größere Konsole (wie im alten CP), dazu das große Konsolenfenster */
.srvgrid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); }
.srvgrid .console { height: 28rem; max-height: none; font-family: ui-monospace, Consolas, monospace; overflow-wrap: anywhere; }
.modal:has(.consolebig) { width: min(80rem, calc(100vw - 2rem)); }
.consolebig .console { height: calc(100vh - 12rem); max-height: none; margin: 0; font-family: ui-monospace, Consolas, monospace; font-size: .85rem; overflow-wrap: anywhere; }

/* Verwaltung → Server: Fortschritt des laufenden Backups */
.bkprogress { margin: 1rem 0; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: 10px; }
.bkprogresshead { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .45rem; }
.bkbar { height: .7rem; border-radius: 999px; background: var(--line); overflow: hidden; }
.bkbar span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--blue); transition: width .6s ease; }
.bkprogress [data-bk-detail] { display: block; margin-top: .45rem; overflow-wrap: anywhere; }
.devbar.branch { background: color-mix(in srgb, #f5a524 16%, transparent); border-color: color-mix(in srgb, #f5a524 50%, transparent); }
.devbar.branch strong, .devbar.branch svg { color: #f5a524; }
/* Shop → Punkteshop: Level des Spielers und Mindestlevel */
.shoplevels { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .6rem; margin-top: .8rem; }
.shoplevels .stat { display: flex; flex-direction: column; gap: .15rem; padding: .55rem .8rem; border: 1px solid var(--line); border-radius: 10px; }
.shopmin { margin-top: .8rem; }
.shopmin > summary { cursor: pointer; color: var(--blue); }
.warnlist li.expired > div { opacity: .55; }
.tplbox { margin-top: .6rem; border: 1px solid var(--line); border-radius: 10px; padding: .55rem .9rem; }
.tplbox > summary { cursor: pointer; font-weight: 600; }
/* Credits (pages/community/wallet.php) und Casino (wallet_casino.php, assets/js/casino.js) */
.walletbal { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .9rem; border-radius: 999px; background: color-mix(in srgb, #e0b12a 18%, transparent); color: #c99a12; font-weight: 700; }
.walletbal svg { width: 1.1em; height: 1.1em; }
.card.narrow { max-width: 34rem; }
.walletform { display: grid; gap: .4rem; }
.walletform .btn { justify-self: start; margin-top: .4rem; }
.walletsettings .stats { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.walletsettings label { display: block; margin-top: .55rem; }
.formfoot { margin: 0 0 1.5rem; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
.casino { overflow: hidden; }
.rlayout { display: grid; grid-template-columns: minmax(14rem, 20rem) 1fr; gap: 1.25rem; align-items: center; }
@media (max-width: 900px) { .rlayout { grid-template-columns: 1fr; } .rwheelwrap { max-width: 18rem; margin: 0 auto; } }
.rwheel { width: 100%; height: auto; display: block; filter: drop-shadow(0 6px 14px rgba(0,0,0,.35)); }
.rwheelspin { transform-origin: 0 0; }
.rwnum { fill: #fff; font: 700 11px/1 system-ui, sans-serif; text-anchor: middle; dominant-baseline: middle; }
.rball { transition: opacity .3s; }
.rresult { text-align: center; margin: .6rem 0 0; min-height: 2rem; transition: opacity .3s; }
.rresult.pending { opacity: 0; }
.rnum { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; color: #fff; font-weight: 700; margin-right: .4rem; }
.rnum.red { background: #c8202b; } .rnum.black { background: #15171c; } .rnum.green { background: #1f8a3b; }
.rtable { width: 100%; height: auto; display: block; border-radius: 22px; box-shadow: inset 0 0 0 10px #6b3414, 0 6px 14px rgba(0,0,0,.25); user-select: none; }
.rcell { fill: transparent; stroke: #fff; stroke-width: 1.5; }
.rbet { cursor: pointer; outline: none; }
.rbet:hover .rcell, .rbet:focus-visible .rcell { fill: rgba(255,255,255,.14); }
.rbet text { fill: #fff; font: 700 18px/1 system-ui, sans-serif; text-anchor: middle; pointer-events: none; }
.rchip { stroke: #fff; stroke-width: 3; stroke-dasharray: 5 4; pointer-events: none; filter: drop-shadow(0 2px 2px rgba(0,0,0,.4)); }
.rchiptext { fill: #fff; font: 800 13px/1 system-ui, sans-serif; text-anchor: middle; pointer-events: none; }
.rcontrols { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1rem; }
.chiprow { display: flex; gap: .4rem; }
.chiprow .chip input { position: absolute; opacity: 0; pointer-events: none; }
.chiprow .chip span { display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; padding: 0; line-height: 1; font-variant-numeric: tabular-nums; border-radius: 50%; background: var(--chip); color: #fff; font-weight: 800; cursor: pointer;
    border: 3px dashed rgba(255,255,255,.85); box-shadow: 0 2px 4px rgba(0,0,0,.3); transition: transform .12s; }
.chiprow .chip input:checked + span { transform: translateY(-3px) scale(1.08); box-shadow: 0 0 0 3px var(--blue), 0 4px 8px rgba(0,0,0,.35); }
.chiprow .chip input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.rtotal { font-variant-numeric: tabular-nums; }
.bjtable { min-height: 17rem; padding: 1.2rem; border-radius: 18px; background: #0f5a2c url(../img/casino/felt.jpg) center / cover; box-shadow: inset 0 0 0 8px #6b3414, inset 0 0 40px rgba(0,0,0,.45);
    display: grid; gap: 1rem; align-content: center; color: #fff; }
.bjrow { display: grid; gap: .45rem; }
.bjlabel { font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.bjlabel b { display: inline-block; min-width: 2rem; padding: 0 .45rem; margin-left: .3rem; border-radius: 999px; background: rgba(0,0,0,.45); text-align: center; }
.bjcards { display: flex; flex-wrap: wrap; gap: .5rem; }
.bjcard { width: clamp(4.2rem, 9vw, 6.2rem); height: auto; border-radius: 6px; box-shadow: 0 4px 10px rgba(0,0,0,.4); background: #fff; }
.bjempty { text-align: center; opacity: .9; margin: 0; }
.bjcontrols { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 1rem 0 .4rem; }
.bjcontrols input { width: 6rem; }
/* Credits → Spiele gegen Freunde (wallet_games.php) */
.pvpcard { padding: .8rem 0; border-top: 1px solid var(--line); display: grid; gap: .5rem; }
.pvpcard:first-of-type { border-top: 0; }
.pvpcard p { margin: 0; }
.pvpbtns { display: flex; flex-wrap: wrap; gap: .5rem; }
.rpsrow { display: flex; flex-wrap: wrap; gap: .4rem; }
.rpsopt input { position: absolute; opacity: 0; pointer-events: none; }
.rpsopt span { display: inline-block; padding: .4rem .75rem; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; background: var(--input); }
.rpsopt input:checked + span { border-color: var(--blue); box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 40%, transparent); }
.rpsopt input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.ttt { display: grid; grid-template-columns: repeat(3, 4.5rem); gap: .4rem; margin: .5rem 0 1rem; }
.tttcell { width: 4.5rem; height: 4.5rem; border-radius: 10px; border: 1px solid var(--line); background: var(--input); font-size: 2.2rem; font-weight: 700; line-height: 1; cursor: pointer; color: var(--text); }
.tttcell:not(:disabled):hover { background: color-mix(in srgb, var(--blue) 14%, var(--input)); }
.tttcell:disabled { cursor: default; }
.tttcell.x { color: #e5484d; } .tttcell.o { color: #2f6fd6; }
/* Achtung-Box E-Mail: Symbol und Text in den Knöpfen auf einer Höhe */
.announce .btn { display: inline-flex; align-items: center; gap: .35rem; vertical-align: middle; }
.announce .btn svg { flex: none; width: 1em; height: 1em; }
[data-limits] .limitpills { margin: .2rem 0 .8rem; }
[data-limits] .pills button.active { background: color-mix(in srgb, var(--blue) 16%, transparent); }
[data-limits] caption { text-align: left; padding: 0 0 .4rem; caption-side: top; }
/* Täglicher Login (pages/general/daily.php): Monatskalender */
.dailycal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .45rem; }
.dailywd { text-align: center; font-size: .78rem; font-weight: 600; color: var(--muted); }
.dailyday { display: grid; gap: .1rem; justify-items: center; padding: .55rem .2rem; border-radius: 10px; border: 1px solid var(--line); background: var(--input); min-height: 4.6rem; }
.dailyday .dnum { font-weight: 700; }
.dailyday .damt { font-size: .9rem; font-weight: 600; }
.dailyday .dtxt { font-size: .7rem; color: var(--muted); }
.dailyday.done { background: color-mix(in srgb, #2fa75a 16%, var(--input)); border-color: color-mix(in srgb, #2fa75a 55%, var(--line)); }
.dailyday.done .damt { color: #2fa75a; }
.dailyday.missed { opacity: .55; background: color-mix(in srgb, #e5484d 8%, var(--input)); }
.dailyday.today { border: 2px solid var(--blue); }
.dailyday.future { border-style: dashed; }
.dailyday.bonus .damt { color: #c99a12; }
.dailyday.bonus:not(.done)::after { content: '★'; font-size: .7rem; color: #e0b12a; }
.dailylegend { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; margin-top: .9rem; }
.dailylegend .dl { display: inline-block; width: .9rem; height: .9rem; border-radius: 4px; border: 1px solid var(--line); background: var(--input); vertical-align: middle; margin-right: -.4rem; }
.dailylegend .dl.done { background: color-mix(in srgb, #2fa75a 30%, var(--input)); }
.dailylegend .dl.missed { background: color-mix(in srgb, #e5484d 20%, var(--input)); }
.dailylegend .dl.today { border: 2px solid var(--blue); }
.dailylegend .dl.future { border-style: dashed; }
.dailylegend .dl.bonus { background: color-mix(in srgb, #e0b12a 35%, var(--input)); }
@media (max-width: 600px) { .dailycal { gap: .25rem; } .dailyday { min-height: 3.6rem; padding: .35rem .1rem; } .dailyday .dtxt { display: none; } }
a.walletbal:hover { text-decoration: none; filter: brightness(1.1); }
.countdown { display: inline-block; min-width: 2.6rem; padding: .05rem .45rem; border-radius: 999px; background: var(--ghost); font-size: .8rem; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.countdown.low { background: color-mix(in srgb, #e5484d 20%, transparent); color: #e5484d; }
.tabnote { margin-left: .3rem; font-size: .72rem; font-weight: 400; color: var(--muted); }
/* Credits → Spiele gegen Freunde → Schach (wallet_games.php, assets/js/chess.js) */
.chesswrap { display: grid; grid-template-columns: minmax(0, 34rem) minmax(10rem, 1fr); gap: 1.2rem; align-items: start; }
@media (max-width: 800px) { .chesswrap { grid-template-columns: 1fr; } }
.chessboard { display: grid; grid-template-columns: repeat(8, 1fr); aspect-ratio: 1; border-radius: 8px; overflow: hidden; box-shadow: 0 0 0 6px #6b3414, 0 6px 16px rgba(0,0,0,.35); }
.csq { position: relative; display: grid; place-items: center; aspect-ratio: 1; padding: 0; border: 0; font: inherit; cursor: pointer; }
.csq:disabled { cursor: default; }
.csq.light { background: #eedcb3; } .csq.dark { background: #b07d4f; }
.csq.last.light { background: #f3e08a; } .csq.last.dark { background: #d1b24f; }
.csq.incheck { background: radial-gradient(circle, #ff5a5a 0%, #e5484d 45%, transparent 80%), #b07d4f; }
.csq.sel { box-shadow: inset 0 0 0 4px #2f6fd6; }
.csq.target::after { content: ''; position: absolute; width: 30%; height: 30%; border-radius: 50%; background: rgba(47,111,214,.55); }
.csq.target:has(.cp)::after { width: 88%; height: 88%; background: transparent; border: 5px solid rgba(47,111,214,.6); }
.csq:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; z-index: 1; }
.cp { font-size: clamp(1.4rem, 5.2vw, 2.9rem); line-height: 1; pointer-events: none; user-select: none; }
.cp.w { color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000, 0 1px 3px rgba(0,0,0,.6); }
.cp.b { color: #15171c; text-shadow: 0 0 1px #fff8; }
.crank, .cfile { position: absolute; font-size: .62rem; font-weight: 700; opacity: .7; pointer-events: none; color: #3b2410; }
.crank { top: 2px; left: 3px; } .cfile { bottom: 1px; right: 3px; }
.chessboard.busy { opacity: .7; pointer-events: none; }
.chesspromo { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .8rem; }
.chesspromo .btn { margin-top: 0; }
.chessside h3 { margin: 0 0 .4rem; }
.chessmoves { max-height: 22rem; overflow: auto; margin: 0 0 .8rem; padding-left: 2.4rem; font-family: ui-monospace, monospace; font-size: .85rem; }
.chessmoves li { display: grid; grid-template-columns: 8rem 8rem; align-items: center; }
.cmv { display: inline-block; min-width: 3.4rem; }
.ccap { display: inline-block; margin-left: .15rem; padding: 0 .3rem; border-radius: 5px; background: color-mix(in srgb, #e5484d 16%, transparent); color: #e5484d; font-family: var(--font); font-size: .8rem; line-height: 1.5; }
.ccap .cg { font-size: .95rem; }
.ccap.w .cg { color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000; } .ccap.b .cg { color: #15171c; text-shadow: 0 0 2px #fff, 0 0 1px #fff; }
.chesspromo[hidden] { display: none; }
/* Casino und Spiele gegen Freunde: nicht in der mobilen Ansicht (pages/community/wallet.php) */
.onlymobile { display: none; }
@media (max-width: 800px) { .nomobile { display: none !important; } .onlymobile { display: block; } }
/* Einladung zu einem Spiel (Popup unten rechts, layouts/footer.php) */
.toast.gameinvite { border-left-color: #c247a8; }
.invitecontrols { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .5rem; }
.invitecontrols .btn { margin-top: 0; }
.invitenum { width: 5.5rem; padding: .25rem .4rem; }
/* Blaue Box mit Gesamtbetrag inkl. Gebühren (Credits) */
.message.infobox { background: color-mix(in srgb, var(--blue) 14%, transparent); color: var(--blue); }
.feebox { margin: .5rem 0 0; font-size: .9rem; }
.rcontrols .feebox { flex-basis: 100%; margin: 0; }
/* Blackjack: der Dealer aus dem Spiel (files/images/BlackJack/dealer_e_*.png), blinzelt ab und zu */
.bjtable { position: relative; }
.bjdealer { position: absolute; top: .9rem; right: 1rem; display: grid; justify-items: center; gap: .2rem; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.bjgnome { position: relative; width: 4.2rem; height: 4.2rem; border-radius: 50%; overflow: hidden; background: #f1efe6; box-shadow: 0 0 0 3px #e0b12a, 0 4px 10px rgba(0,0,0,.4); }
.bjgnome img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bjgnome .blink { opacity: 0; animation: bjblink 5s steps(1) infinite; }
@keyframes bjblink { 0%, 92% { opacity: 0; } 93%, 97% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bjgnome .blink { animation: none; } }
@media (max-width: 600px) { .bjdealer { position: static; justify-self: end; } }
/* Credits: Limit-Balken (grün, ab der Hälfte orange, ausgeschöpft rot), kleine Limits-Box über den Tabs, Kontostand grün */
.bar.low { --c: #2fa75a; } .bar.mid { --c: #e8902f; } .bar.full { --c: #e5484d; }
.bar.low, .bar.mid, .bar.full { background: linear-gradient(90deg, var(--c) var(--p), color-mix(in srgb, var(--c) 28%, var(--line)) var(--p)); }
.limitbox { padding: .8rem 1rem; }
.limitbox h3 { margin: 0 0 .5rem; font-size: .9rem; }
.limitbox ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.limitbox li { display: grid; grid-template-columns: minmax(0, 1fr) 7rem auto; align-items: center; gap: .8rem; font-size: .88rem; }
.limitbox .bar { width: 100%; }
@media (max-width: 600px) { .limitbox li { grid-template-columns: 1fr auto; } .limitbox .bar { grid-column: 1 / -1; } }
.walletbal { background: color-mix(in srgb, #2fa75a 18%, transparent); color: #2fa75a; }
.balancecard { border-color: color-mix(in srgb, #2fa75a 55%, var(--line)); background: color-mix(in srgb, #2fa75a 12%, var(--card)); }
.balancecard .big { color: #2fa75a; }
.bjcontrols .feebox { flex-basis: 100%; order: 9; margin: 0; }
.message.feebox { display: block; width: auto; }
.limitbox .limitpills { margin: 0 0 .5rem; }
.limitbox .pills button { padding: .3rem .8rem; font-size: .85rem; }
/* Täglicher Login: heute direkt im Kalender abholen, vom Team wiederhergestellte Tage */
.dailyclaim { display: contents; }
.dailyday.claim { width: 100%; font: inherit; color: var(--text); cursor: pointer; border: 2px solid #2fa75a; background: color-mix(in srgb, #2fa75a 22%, var(--input)); animation: dailypulse 1.6s ease-in-out infinite; }
.dailyday.claim .dtxt { color: #2fa75a; font-weight: 700; text-transform: uppercase; }
.dailyday.claim:hover { background: color-mix(in srgb, #2fa75a 34%, var(--input)); }
@keyframes dailypulse { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, #2fa75a 35%, transparent); } }
@media (prefers-reduced-motion: reduce) { .dailyday.claim { animation: none; } }
.dailyday.restored { background: color-mix(in srgb, var(--blue) 14%, var(--input)); border-color: color-mix(in srgb, var(--blue) 45%, var(--line)); }
.dailyday.restored .damt { color: var(--blue); }
.dailylegend .dl.restored { background: color-mix(in srgb, var(--blue) 30%, var(--input)); }
a.balancecard { color: inherit; } a.balancecard:hover { text-decoration: none; filter: brightness(1.06); }
.restoredays { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: .5rem 0 .8rem; }
/* Limits: Balken und Zahlen direkt hinter der Beschreibung (Spalten nach der längsten Beschreibung ausgerichtet) */
.limitbox ul { grid-template-columns: max-content 8rem max-content; column-gap: 1rem; }
.limitbox ul[hidden] { display: none; }
.limitbox li { display: contents; }
.limitbox li > span:first-child { align-self: center; }
@media (max-width: 600px) { .limitbox ul { grid-template-columns: 1fr auto; } .limitbox li { display: contents; } .limitbox .bar { grid-column: 1 / -1; } }
[data-limits]:not(.limitbox) table.stack { width: auto; }
[data-limits]:not(.limitbox) table.stack td { padding-right: 1.2rem; }
[data-limits]:not(.limitbox) .bar { width: 8rem; }
.ticketmail { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.ticketmail p { margin: 0; display: inline-flex; align-items: center; gap: .35rem; }
.ticketmail .btn { margin-top: 0; }
/* Credits: Kontostand direkt hinter der Überschrift */
.pagehead.walletlead { justify-content: flex-start; align-items: center; gap: .8rem; }
.pagehead.walletlead h1 { margin-bottom: 0; }
/* Limits: Beschreibung, Balken und Zahlen in einer Zeile senkrecht mittig */
.limitbox ul { align-items: center; }
.limitbox .bar { align-self: center; vertical-align: middle; margin: 0; }
.limitbox li > span { line-height: 1.4; }
/* Täglicher Login: Monate blättern */
.dailynav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .6rem; }
.dailynav h2 { margin: 0; text-align: center; display: inline-flex; align-items: center; gap: .6rem; justify-self: center; }
.dailynav h2 .btn, .dailynav > .btn { margin-top: 0; }
.dailynav > :last-child { justify-self: end; }
.dailynav > :first-child { justify-self: start; }
@media (max-width: 600px) { .dailynav { grid-template-columns: 1fr 1fr; } .dailynav h2 { grid-column: 1 / -1; grid-row: 1; } }
/* Symbole in Knöpfen (icon() vor dem Text) mittig zur Schrift – gilt überall; die 3D-Vorschau-Knöpfe bleiben bewusst wie sie sind */
.btn:not(#t_prev):not([data-tex3d-model]) > svg:first-child { width: 1.15em; height: 1.15em; vertical-align: -.22em; flex: none; }
/* Knopf unter einem kurzen Formular: rechtsbündig, ohne eigene Box (statt der mitlaufenden .savebar langer Formulare) */
.formactions { display: flex; justify-content: flex-end; margin-top: 1rem; }
.formactions .btn { margin-top: 0; }
/* Spielerakte → Fraktion & Unternehmen verwalten: Karten füllen die Breite, Befördern / Degradieren / Uninvite in einer Zeile */
.orgmanage { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.orgmanage .btngroup { flex-wrap: nowrap; }
.orgmanage .btngroup .btn { flex: 1 1 auto; white-space: nowrap; }
/* Knopfgruppen mit verstecktem Feld davor (z. B. CSRF): runde Ecken trotzdem am ersten und letzten Knopf */
.btngroup > .btn:first-of-type:not(:only-of-type) { border-radius: 8px 0 0 8px; }
.btngroup > .btn:last-of-type:not(:only-of-type) { border-radius: 0 8px 8px 0; }
@media (max-width: 480px) { .orgmanage .btngroup .btn { flex: 1 1 0; padding-left: .4rem; padding-right: .4rem; font-size: .85rem; } }
.message.deletedacc.pending { border-color: color-mix(in srgb, #e8902f 50%, var(--line)); background: color-mix(in srgb, #e8902f 12%, transparent); color: inherit; }

/* Anticheat → Einstellungen (orl_anticheat): Werte im Raster */
.acsetgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .5rem 1.25rem; }
.acsetgrid > div { display: flex; flex-direction: column; min-width: 0; }
.acsetgrid > div > .hint { font-size: .75rem; margin-top: .15rem; }
.acexthead { font-size: .95rem; margin: 1.25rem 0 .5rem; }

/* Seitenleiste: Box „Neu“ (blau) statt Punkt, „Aktiv“ (grün) z. B. bei laufendem Event; zugeklappte Kategorie: blauer Punkt */
.side nav a > .navbadge { margin-left: auto; flex: none; overflow: visible; padding: .1rem .45rem; border-radius: 6px; background: var(--blue); color: #fff;
    font-size: .68rem; font-weight: 700; line-height: 1.35; letter-spacing: .02em; text-transform: uppercase; }
.side nav a > .navbadge.active { background: #1f9d55; }
.navhead .groupdot { background: var(--blue); }

/* Anticheat → Einstellungen: Bereiche zugeklappt, + im Kopf, Suche bei den Serials */
.acsec > summary { display: flex; align-items: center; gap: .75rem; cursor: pointer; list-style: none; }
.acsec > summary::-webkit-details-marker { display: none; }
.acsec > summary::before { content: "▸"; color: var(--muted); transition: transform .15s; }
.acsec[open] > summary::before { transform: rotate(90deg); }
.acsec > summary h2 { margin: 0; flex: 1; font-size: 1.05rem; }
.acsec[open] > summary { margin-bottom: .75rem; }
.acsearch { margin: 0 0 .75rem; max-width: 360px; }
.acactions { display: flex; gap: .35rem; justify-content: flex-end; }

/* Limits-Box mit Inhalt rechts (Casino: Statistik für Admins) */
.limitbox.withside { display: grid; grid-template-columns: max-content minmax(16rem, 1fr); gap: 1.5rem; } /* linke Spalte so breit wie die Limits (sonst laufen die Zahlen in den Trennstrich) */
.limitside { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; padding-left: 1.5rem; border-left: 1px solid var(--line); }
.casinoside dl { display: grid; grid-template-columns: auto auto; justify-content: start; gap: .3rem 1.25rem; margin: 0; font-size: .88rem; }
.casinoside dt { color: var(--muted); }
.casinoside dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
/* zu schmal für beides nebeneinander (nach Breite der Box, nicht des Fensters): Admin-Teil unter die Limits */
.nomobile:has(> .limitbox.withside) { container-type: inline-size; }
@container (max-width: 940px) { .limitbox.withside { grid-template-columns: 1fr; } .limitside { padding-left: 0; padding-top: 1rem; border-left: 0; border-top: 1px solid var(--line); } }

/* Kopfzeile (Profil, Postfach …) bleibt beim Scrollen oben stehen wie die Seitenleiste mit dem Logo; Sprungziele landen darunter */
.top { position: sticky; top: 0; z-index: 30; }
html { scroll-padding-top: 76px; }
.gwadmin .gwmapcard { top: calc(68px + 1rem); }
.stats[data-pvp-new][hidden] { display: none; } /* Spiele gegen Freunde: Herausfordern ausgeblendet, solange ein Spiel läuft */

/* Spiele gegen Freunde: Ergebnis-Animation (Schere, Stein, Papier und „Wer ist näher“), wallet_games.php */
.pvpanim { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; padding: 16px; background: rgba(8, 9, 14, .62); backdrop-filter: blur(3px); animation: pa-in .2s ease-out; }
.pvpanim.out { opacity: 0; transition: opacity .25s; }
.pa-box { width: min(30rem, 100%); padding: 1.4rem 1.5rem 1.2rem; border: 1px solid var(--line); border-radius: 16px; background: var(--card); text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.pa-title { margin: 0 0 1rem; color: var(--muted); font-size: .9rem; }
.pa-hands { display: flex; align-items: center; justify-content: center; gap: 1.5rem; }
.pa-side { display: flex; flex-direction: column; align-items: center; gap: .4rem; min-width: 7rem; transition: transform .35s, opacity .35s; }
.pa-side b { font-size: .85rem; max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-hand { font-size: 4.2rem; line-height: 1; display: inline-block; }
.pa-side.opp .pa-hand { transform: scaleX(-1); }
.pa-vs { color: var(--muted); font-weight: 700; }
.pvpanim.shake .pa-side.me .pa-hand { animation: pa-shake .43s ease-in-out 3; }
.pvpanim.shake .pa-side.opp .pa-hand { animation: pa-shake-r .43s ease-in-out 3; }
@keyframes pa-shake { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-22px) rotate(-12deg); } }
@keyframes pa-shake-r { 0%, 100% { transform: scaleX(-1) translateY(0) rotate(0); } 50% { transform: scaleX(-1) translateY(-22px) rotate(-12deg); } }
.pvpanim.done .pa-hand { animation: pa-pop .35s ease-out; }
.pvpanim.done.win .pa-side.me, .pvpanim.done.lose .pa-side.opp { transform: scale(1.12); }
.pvpanim.done.win .pa-side.opp, .pvpanim.done.lose .pa-side.me { opacity: .45; }
@keyframes pa-pop { 0% { scale: .6; } 70% { scale: 1.15; } 100% { scale: 1; } }
.pa-num { display: flex; flex-direction: column; align-items: center; margin-bottom: 1.6rem; }
.pa-roll { font-size: 3.6rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pa-num small { color: var(--muted); }
.pa-line { position: relative; height: 6px; margin: 2.4rem .8rem 3rem; border-radius: 3px; background: var(--ghost); }
.pa-mark { position: absolute; top: 50%; translate: -50% -50%; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--card); }
.pa-mark::after { content: attr(data-n); position: absolute; left: 50%; translate: -50% 0; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.pa-mark b { position: absolute; left: 50%; translate: -50% 0; font-size: .7rem; font-weight: 600; white-space: nowrap; max-width: 7rem; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.pa-mark.me { background: var(--blue); } .pa-mark.me::after { top: 16px; } .pa-mark.me b { top: 30px; }
.pa-mark.opp { background: #f08c1a; } .pa-mark.opp::after { bottom: 16px; } .pa-mark.opp b { bottom: 30px; }
.pa-mark.target { display: none; width: 4px; height: 26px; border: 0; border-radius: 2px; background: var(--text); }
.pa-mark.target::after { display: none; }
.pvpanim.done .pa-mark.target { display: block; animation: pa-pop .35s ease-out; }
.pa-dist { min-height: 1.2em; margin: 0 0 .4rem; color: var(--muted); font-size: .85rem; }
.pa-verdict { display: flex; flex-direction: column; align-items: center; gap: .15rem; min-height: 3.6rem; margin: 1rem 0 .4rem; visibility: hidden; }
.pa-verdict strong { font-size: 1.9rem; }
.pvpanim.done .pa-verdict { visibility: visible; animation: pa-pop .4s ease-out; }
.pvpanim.win .pa-verdict strong { color: #2fa75a; } .pvpanim.lose .pa-verdict strong { color: #e5484d; } .pvpanim.draw .pa-verdict strong { color: var(--muted); }
.pa-box .btn { margin-top: .4rem; }
@keyframes pa-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pvpanim, .pvpanim * { animation: none !important; } }

/* Spiele gegen Freunde: Endstand einer eben beendeten Partie (Tic-Tac-Toe, Schach) mit Ergebnis, bis man ihn schließt */
.pvpend { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; padding: .6rem .9rem; border-radius: 10px; background: var(--ghost); }
.pvpend strong { font-size: 1.15rem; }
.pvpend.win { background: color-mix(in srgb, #2fa75a 18%, transparent); } .pvpend.win strong { color: #2fa75a; }
.pvpend.lose { background: color-mix(in srgb, #e5484d 16%, transparent); } .pvpend.lose strong { color: #e5484d; }
.pvpend .btn { margin: 0 0 0 auto; }
[data-finished] .tttcell, [data-finished] .csq { cursor: default; }

/* Fehlerfenster (dlg-error, footer.php): Meldungen ohne eigenen Rahmen */
#dlg-error .errorbody .message, #dlg-success .errorbody .message { margin: 0; }
/* Tickets: Vorschläge für @Name / @@Name unter dem Antwortfeld */
.mentionwrap { position: relative; }
.mentionbox { position: absolute; left: 0; top: 100%; z-index: 30; min-width: 14rem; max-width: 100%; margin: .25rem 0 0; padding: .25rem; list-style: none; background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.mentionbox li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .35rem .6rem; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.mentionbox li.active, .mentionbox li:hover { background: var(--hover, rgba(127,127,127,.12)); }
.mentionbox li .hint { font-size: .8rem; }

/* Charakter → Übersicht: Level mit Höchststand (erreicht = grün); Balken mit „Anzahl / Max“ im Balken (Collectables, Fischerlevel), voll = grün */
.lvl { font-variant-numeric: tabular-nums; }
.lvl.lvmax { color: #2fa75a; font-weight: 700; }
.tbar { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 9rem; height: 1.25rem; margin-left: .35rem; overflow: hidden; vertical-align: middle;
    border-radius: 999px; background: linear-gradient(90deg, var(--blue) var(--p), color-mix(in srgb, var(--blue) 18%, var(--line)) var(--p)); }
.tbar.full { background: #2fa75a; }
.tbar > span { position: relative; color: #fff; font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px rgba(0,0,0,.55); white-space: nowrap; }
.ovcard dd > .tbar:first-child { margin-left: 0; }

/* Akzentfarbe (Bedienungshilfen-Menü): Farbkreise und eigene Farbe */
.accentpick { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line); }
.accentpick > span { flex-basis: 100%; font-size: .85rem; color: var(--muted); }
.accentpick label { position: relative; display: inline-flex; cursor: pointer; }
.accentpick input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.accentpick label > span { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 2px rgba(255,255,255,.15); }
.accentpick input:checked + span { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--text); }
.accentpick input:focus-visible + span { outline: 2px solid var(--text); outline-offset: 3px; }
.accentcustom input[type="color"] { width: 1.6rem; height: 1.6rem; padding: 0; border: 0; border-radius: 50%; background: conic-gradient(#e5484d, #ef7f23, #f5c542, #22a35a, #14a8b8, #3b82f6, #8a4fe6, #e04f9a, #e5484d); cursor: pointer; overflow: hidden; }
.accentcustom input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; } .accentcustom input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 50%; opacity: 0; }
.accentcustom input[type="color"]::-moz-color-swatch { border: 0; border-radius: 50%; opacity: 0; }
.accentcustom input.on { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--text); }
.accentcustom input.on::-webkit-color-swatch { opacity: 1; } .accentcustom input.on::-moz-color-swatch { opacity: 1; }

/* Daten & Mitwirkende → Serverteam: je Rang eine Trennlinie in der Rangfarbe links und rechts vom Rangnamen; Namen ohne eigenes Schild */
.rankbox { max-width: 36rem; margin: 1.4rem auto 0; }
.rankbox h3 { display: flex; align-items: center; gap: .7rem; margin: 0 0 .5rem; }
.rankbox h3::before, .rankbox h3::after { content: ""; flex: 1; height: 2px; border-radius: 2px; }
.rankbox h3::before { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--rc) 70%, transparent)); }
.rankbox h3::after { background: linear-gradient(90deg, color-mix(in srgb, var(--rc) 70%, transparent), transparent); }
.rankbox .teamedit { margin: 0; }
.rankbox p { margin: 0; }
.rankbox .pname .shield { display: none; }

/* Reiter eines zusammengelegten Punkts der Seitenleiste (Feedback, Neuigkeiten, Sanktionen, Werkzeuge) oben auf der Seite */
.navmerged { margin: 0 0 1rem; }
.navmerged a { display: inline-flex; align-items: center; gap: .45rem; }
.navmerged .navbadge { padding: .05rem .4rem; border-radius: 6px; background: var(--blue); color: #fff; font-size: .62rem; font-weight: 700; text-transform: uppercase; }
.navmerged .navbadge.active { background: #1f9d55; }

/* Daten & Mitwirkende → Änderungen: + direkt neben der Überschrift; ältere Monate und Jahre zum Aufklappen */
.teamchanges .cardhead { justify-content: flex-start; }
.teamchanges .cardhead .plus { width: 30px; height: 30px; font-size: 1.3rem; }
.chgmonth, .chgyear { border-top: 1px solid var(--line); }
.chgmonth > summary, .chgyear > summary { padding: .55rem 0; cursor: pointer; font-weight: 600; }
.chgyear > summary { font-size: 1.02rem; }
.chgyear > .chgmonth { margin-left: 1.1rem; }
.chgmonth > .changelist { margin-bottom: .4rem; }
/* Rang als Kästchen in der Rangfarbe (Änderungen): alter Rang gedämpft und durchgestrichen, neuer kräftig */
.rankchip { display: inline-block; padding: .05rem .45rem; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--rc) 55%, transparent); background: color-mix(in srgb, var(--rc) 22%, transparent); color: var(--text); font-weight: 600; font-size: .88rem; line-height: 1.4; }
.rankchip.old { background: transparent; border-style: dashed; color: var(--muted); font-weight: 400; text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 70%, transparent); }
.rankarrow { color: var(--muted); font-weight: 700; margin: 0 .1rem; }

/* Anticheat → Spam-E-Mails: Accounts untereinander mit Ändern/Löschen; wohin gespeichert wird (Dev, Live & Forum, CP-Konto) */
.spamaccs { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.spamaccs li { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.spamacts { display: inline-flex; gap: .3rem; margin-left: auto; }
.envtag { display: inline-block; padding: .05rem .45rem; border-radius: 6px; background: color-mix(in srgb, var(--blue) 18%, transparent); color: var(--text); font-size: .78rem; font-weight: 600; }

/* Shop: Adminansicht Ø Verdienst pro Monat */
.earnbox .statgrid { margin: .5rem 0 .6rem; }
.earnbox h2 .hint { font-size: .8rem; font-weight: 400; }

/* Platzierte Objekte: Schalter je Zeile, Schloss bei Einrichtung, Knöpfe unten nebeneinander */
.wiswitch { margin: 0; }
.wilock { display: inline-flex; color: var(--muted); } .wilock svg { width: 16px; height: 16px; }
.wibtns { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.wibtns .btn { margin-top: 0; }

/* Handy / schmale Fenster: Seitenleiste als Overlay über dem Inhalt (statt ihn zur Seite zu schieben – sonst wird die Seite breiter
   als der Bildschirm); dahinter abgedunkelt, ein Tipp daneben schließt sie (footer.php) */
@media (max-width: 800px) {
    body.collapsed .shell { grid-template-columns: 0 1fr; }
    .side { position: fixed; top: 0; bottom: 0; left: 0; z-index: 60; width: min(280px, 85vw); height: 100vh; height: 100dvh; transform: translateX(-105%);
        transition: transform .2s ease-out; box-shadow: 8px 0 24px rgba(0, 0, 0, .45); }
    body.collapsed .side { transform: none; }
    body.collapsed::before { content: ""; position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, .5); }
    body.collapsed { overflow: hidden; }
}
@media (max-width: 800px) and (prefers-reduced-motion: reduce) { .side { transition: none; } }
/* Platzierte Objekte: Knöpfe in den Tabellen ohne Abstand nach oben, auf einer Linie mit dem Text */
.wiowners td .btn, .wilist td .btn { margin-top: 0; vertical-align: middle; }
.wiowners td:last-child { white-space: nowrap; }
.wiowners td:last-child > * { vertical-align: middle; margin-left: .4rem; }
.wiowners td:last-child .inline { display: inline-block; }
.wilist td .wimap svg, .wilist td [data-wi-interior] svg { width: 15px; height: 15px; }

/* Anticheat: Suchleiste unter den Untertabs */
.acfilters > div { flex: 1 1 12rem; }
.acfilters > div.acfbtns { flex: 0 0 auto; display: flex; gap: .5rem; }

/* Live zuschauen (spectate.php) */
.spechead { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-bottom: .8rem; }
.spechead form, .spechead .btn { margin: 0 0 0 auto; }
.spechead .btn + .btn, .spechead form + .btn { margin-left: 0; }
.speclive { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: #e5484d; letter-spacing: .05em; }
.speclive .dot { width: .7rem; height: .7rem; border-radius: 50%; background: currentColor; animation: specblink 1s steps(2, start) infinite; }
.speclive.paused { color: var(--muted); } .speclive.paused .dot { animation: none; }
@keyframes specblink { to { visibility: hidden; } }
.specview { background: #000; border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; }
.specview img { display: block; width: 100%; height: 100%; object-fit: contain; }
.specview img[hidden], .specview p[hidden] { display: none; }
.specview p { color: #bbb; }
.spec input[type=range] { width: 100%; margin-top: .6rem; }
.specfiles { list-style: none; margin: 0 0 1rem; padding: 0; }
.specfiles li { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.specfiles li > span:first-child { flex: 1 1 14rem; }
.specfiles .btn { margin: 0; }
.specgif { padding: 0; }
.spechead form .btn { margin: 0; }
.spechead .btn + form { margin-left: 0; }

/* Mobil: Chips in gestapelten Tabellenzellen nicht zusammenquetschen */
.acchip, .status, .envtag, .rankchip { flex-shrink: 0; }

/* Kopfzeilen und Zeilen mit Schalter, Pills oder Knopf: Abstände für Formulare hier aufheben, damit alles auf einer Linie steht */
.cardhead > .cardtitle, .cardhead > nav.pills, .cardhead > label.switch, .cardhead > .btn, .cardhead > form .btn { margin: 0; }
.settingrow .btn, .voucherfilter .btn { margin-top: 0; }
/* Charakter → Rüstung & Leben: zwei Balken untereinander (Farben wie im Spiel: Rüstung Color.HUD_Grey, Leben Color.HUD_Red) */
.statbars { display: inline-flex; flex-direction: column; gap: .3rem; vertical-align: middle; }
.ovcard dd .statbars .tbar { margin-left: 0; }
.tbar.statbar.armor { --c: #9e9e9e; } .tbar.statbar.health { --c: #a12f2f; }
.tbar.statbar { background: linear-gradient(90deg, var(--c) var(--p), color-mix(in srgb, var(--c) 22%, var(--line)) var(--p)); }
/* E-Mail-Versand (pages/admin/mail.php): Vorlage links, Vorschau rechts; Details einer Aussendung */
.tplgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem 1.5rem; align-items: start; margin-top: .6rem; }
.tplgrid .tplfields > label:first-of-type, .tplgrid .tplfields > h3:first-of-type { margin-top: 0; }
.tplgrid .tplfields .btngroup .btn { margin-top: .5rem; }
.tplarea { margin: 1.4rem 0 .2rem; font-size: .95rem; color: var(--muted); }
.mailprev { min-width: 0; }
.mailprevhead { display: flex; flex-wrap: wrap; gap: .25rem .5rem; margin: 0 0 .35rem; }
.mailprevhead .mailsubj { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.mailframe { display: block; width: 100%; height: 560px; border: 1px solid var(--line); border-radius: 10px; background: #eef0f5; }
.campaignform .tplgrid { margin-bottom: 1rem; }
.campaignform .campused { margin-top: 0; }
.status.ok { background: color-mix(in srgb, #2fa75a 18%, transparent); color: #2fa75a; }
.status.fail { background: color-mix(in srgb, #e5484d 18%, transparent); color: #e5484d; }
.campstats { grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: .6rem; margin: .75rem 0 1rem; }
.campstats .stat { padding: .6rem .75rem; min-width: 0; }
.campstats .stat strong { font-size: 1.35rem; }
.campstats .stat span { color: var(--muted); font-size: .85rem; }
.camppast td, .camprecip td { vertical-align: middle; }
.camppast .btn.tiny { margin-top: 0; white-space: nowrap; }
@media (max-width: 900px) { .tplgrid { grid-template-columns: minmax(0, 1fr); } .mailframe { height: 480px; } }
.campvoucher { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .3rem .4rem; }
@media (max-width: 640px) { .campstats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .campstats .stat span { font-size: .78rem; } }
.campsubj { margin: 0 0 .2rem; overflow-wrap: anywhere; }
/* Live zuschauen → Aufnahmen: Knopf ohne Abstand oben, damit die Zeile auf einer Linie steht */
.speclist td .btn { margin: 0; }
/* Spielerprofil: Auge neben „Sanktionieren“ (Screenshot, Live zuschauen) – nur Symbol, Akzentfarbe beim Öffnen */
.mtamenu.eyemenu > summary.btn { padding: .55rem .75rem; color: var(--text); }
.mtamenu.eyemenu .chev { color: var(--muted); }
.mtamenu.eyemenu > summary.btn:hover, .mtamenu.eyemenu[open] > summary.btn { background: var(--blue); color: #fff; }
.mtamenu.eyemenu > summary.btn:hover .chev, .mtamenu.eyemenu[open] > summary.btn .chev { color: #fff; }
/* „● LIVE“ am Auge: rote, blinkende Box (ohne Blinken bei „Bewegung reduzieren“) */
.livebadge { display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .4rem; border-radius: 4px; background: #e5484d; color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .06em; line-height: 1.3; animation: liveblink 1.2s ease-in-out infinite; }
.livebadge .dot { width: .45rem; height: .45rem; border-radius: 50%; background: #fff; }
@keyframes liveblink { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .livebadge { animation: none; } }
html.a11y-motion .livebadge { animation: none; }
/* Live zuschauen: Vollbild (schwarz, Bild so groß wie möglich) und Hinweis auf eine laufende Aufnahme */
.specview { cursor: zoom-in; }
.specview:fullscreen { aspect-ratio: auto; width: 100vw; height: 100vh; border-radius: 0; cursor: zoom-out; }
.specbusy { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; }
.specbusy .btn { margin: 0; }
/* Live zuschauen → Aufnahmen: „Ansehen“ und „Löschen“ nebeneinander auf einer Linie */
.specacts { display: inline-flex; align-items: center; justify-content: flex-end; gap: .4rem; }
.specacts form { display: contents; }
.specacts .btn { margin: 0; }
/* Spielerprofil → Screenshots: Löschen-Knopf ohne Abstand oben (auf einer Linie mit der Zeile) */
td > form.inline .btn.tiny { margin: 0; }
/* Server & Storage → Storage: Bereiche als Karten (Klick filtert), Liste mit Vorschaubild */
.storegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.storearea { display: flex; flex-direction: column; gap: .45rem; margin: 0; color: inherit; text-decoration: none; border: 1px solid transparent; }
.storearea:hover { border-color: var(--line); }
.storearea.active { border-color: var(--blue); }
.storehead { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.storearea .bar { --c: var(--blue); background: linear-gradient(90deg, var(--c) var(--p), color-mix(in srgb, var(--c) 18%, var(--line)) var(--p)); }
.storefilter { margin: 0 0 .8rem; }
.storelist td { vertical-align: middle; }
.storethumb { width: 3.4rem; }
.storethumb img { display: block; width: 3rem; height: 3rem; object-fit: cover; border-radius: 6px; background: #000; }
.storeicon { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 6px; background: var(--ghost); color: var(--muted); }
.storename { overflow-wrap: anywhere; }
@media (max-width: 700px) { .storethumb { width: auto; } }
/* Live zuschauen: mehrere Formulare in der Aktionszeile nebeneinander; Herunterladen mit Reitern */
.spechead form + form { margin-left: 0; }
.specdl .cardhead { flex-wrap: wrap; gap: .5rem 1rem; }
.specfiles li.empty { display: block; }
.spechead > .hint { flex: 1 1 16rem; min-width: 0; }
.spechead > .btn, .spechead > form { flex: none; }
/* Kartenfenster: Zoomstufen und Fahrzeugumriss (vehicle_map_pin) */
.mapzoom { margin-bottom: .5rem; }
.mapveh .mapvehbody { fill: color-mix(in srgb, #ff3b3b 55%, transparent); stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.mapveh .mapvehnose { fill: #fff; }
.mapveh .mapvehring { fill: none; stroke: #ff3b3b; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 4 3; }
.mapdrag svg { cursor: grab; touch-action: none; } .mapdrag svg:active { cursor: grabbing; }
/* Beschwerden (Tickets): Bearbeitungsstatus als Box und Buttons – Abgewiesen rot, teilweise berechtigt hellgrün, in Bearbeitung gelb, zurückgezogen orange, berechtigt dunkelgrün */
.status.cp-rejected, .btn.cp-rejected { --cp: #e5484d; }
.status.cp-partial, .btn.cp-partial { --cp: #6fcf7f; }
.status.cp-progress, .btn.cp-progress { --cp: #e0b324; }
.status.cp-withdrawn, .btn.cp-withdrawn { --cp: #ef7f23; }
.status.cp-justified, .btn.cp-justified { --cp: #1d8a45; }
.status[class*="cp-"] { background: color-mix(in srgb, var(--cp) 20%, transparent); color: var(--cp); border: 1px solid color-mix(in srgb, var(--cp) 45%, transparent); }
.cpbtns { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.cpbtns .btn { background: color-mix(in srgb, var(--cp) 16%, transparent); color: var(--cp); border: 1px solid color-mix(in srgb, var(--cp) 50%, transparent); }
.cpbtns .btn:hover { background: color-mix(in srgb, var(--cp) 28%, transparent); }
.cpbtns .btn.on { background: var(--cp); color: #fff; border-color: var(--cp); }
/* FUV: Bewertung als Balken mit Note, Meldungen mit Notieren / Erledigt */
.fuvscore { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; }
.fuvscore .bar { width: 4rem; }
.fuvscore strong { min-width: 1.6rem; text-align: right; }
.fuvreps { list-style: none; margin: 0; padding: 0; }
.fuvrep { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.fuvrep:last-child { border-bottom: 0; }
.fuvrep.unseen .fuvreptext { font-weight: 600; }
.fuvrepacts { display: flex; align-items: flex-start; gap: .35rem; flex: none; }
.fuvpin { position: relative; }
.fuvpin > summary { list-style: none; cursor: pointer; }
.fuvpin > summary::-webkit-details-marker { display: none; }
.fuvpin[open] > form { position: absolute; right: 0; top: calc(100% + .3rem); z-index: 20; display: flex; gap: .35rem; width: 18rem; padding: .5rem; background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.2); }
.fuvnote { margin-top: .3rem; padding: .35rem .6rem; border-left: 3px solid #e0b324; background: color-mix(in srgb, #e0b324 10%, transparent); border-radius: 4px; font-weight: 400; }
.fuvpinned { border-color: color-mix(in srgb, #e0b324 50%, var(--line)); }
@media (max-width: 700px) { .fuvrep { flex-direction: column; } }
.fuvorgs { flex-wrap: wrap; }
.fuvgroup td { padding-top: 1rem; font-weight: 700; border-bottom: 2px solid var(--line); }
.fuvnotetext { margin: .3rem 0; font-weight: 400; }
.fuvlogdet { margin-top: .35rem; font-size: .9rem; }
/* Kopfleiste auf schmalen Handys (360–400 px): nur das Profilbild, der Name steht im Menü – sonst ragt die Leiste über den Rand */
@media (max-width: 400px) { .top .who > .notranslate { display: none; } .foot { gap: .6rem; padding: 0 .75rem; } .footlinks { gap: .7rem; } .settingrow { flex-wrap: wrap; } .settingrow > span { min-width: 9rem; } }
.fuvidm { display: none; }
@media (max-width: 1300px) { td.fuvid, th.fuvid { display: none !important; } .fuvidm { display: inline; } }
.fuvstand { display: inline-flex; align-items: center; gap: .5rem; }
/* FUV: auf mittleren Bildschirmen nur Balken und Zahl (Note steht im Tooltip), damit die Tabellen ohne Scrollen passen */
@media (min-width: 641px) and (max-width: 1500px) { .fuvscore .status { display: none; } }
/* FUV: zwischen Handy und großem Bildschirm Karten statt breiter Tabelle (zwei oder mehr nebeneinander) */
@media (min-width: 641px) and (max-width: 1300px) {
    table.fuvtable thead { display: none; }
    table.fuvtable, table.fuvtable tbody { display: block; }
    table.fuvtable tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .75rem 1.5rem; }
    table.fuvtable tr { display: block; padding: .6rem .2rem; border-bottom: 1px solid var(--line); }
    table.fuvtable tr.fuvgroup { grid-column: 1 / -1; border-bottom: 2px solid var(--line); }
    table.fuvtable td { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .2rem 0 !important; border: 0; text-align: right; }
    table.fuvtable td::before { content: attr(data-label); flex: none; color: var(--muted); font-size: .82rem; font-weight: 600; text-align: left; }
    table.fuvtable td:not([data-label]) { justify-content: flex-start; text-align: left; font-weight: 600; font-size: 1rem; }
    table.fuvtable td:not([data-label])::before { display: none; }
    table.fuvtable td.empty { justify-content: center; }
}
.tcomplaint { margin-top: .25rem; }
.ticketlist td .tcomplaint .status, .tcomplaint .status { white-space: normal; }
/* Fadenkreuze: Vorschau aus vier gespiegelten Vierteln (wie im Spiel), Kacheln zur Auswahl */
.xhair { display: inline-grid; grid-template-columns: 1fr 1fr; width: 5rem; height: 5rem; flex: none; padding: .35rem; border-radius: 8px; background: radial-gradient(circle, #6d7a86 0%, #3c4650 100%); }
.xhair.sniper { width: 6rem; height: 6rem; background: #4f5b45; }
.xhair.big { width: 9rem; height: 9rem; }
.xhair img { width: 100%; height: 100%; object-fit: fill; image-rendering: auto; }
.xhair img.fx { transform: scaleX(-1); }
.xhair img.fy { transform: scaleY(-1); }
.xhair img.fxy { transform: scale(-1, -1); }
.xhair.empty { display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; letter-spacing: .05em; }
.xhgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .75rem; margin: .5rem 0 1rem; }
.xhtile { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .7rem .5rem; border: 1px solid var(--line); border-radius: 10px; text-align: center; font-weight: 400; margin: 0; }
.xhtile strong { font-size: .92rem; word-break: break-word; }
.xhtile.off { opacity: .55; }
.xhpick { cursor: pointer; position: relative; }
.xhpick input { position: absolute; opacity: 0; pointer-events: none; }
.xhpick:has(input:checked) { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 12%, transparent); box-shadow: 0 0 0 1px var(--blue); }
.xhpick:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
.xhcat { margin: .75rem 0 0; font-size: .95rem; color: var(--muted); }
summary.xhcat { cursor: pointer; font-weight: 600; width: fit-content; }
.xhcatbox:not([open]) { margin-bottom: .25rem; }
.xhfav { position: absolute; top: .4rem; left: .4rem; display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--card); color: var(--muted); cursor: pointer; }
.xhfav svg { width: 15px; height: 15px; }
.xhfav:hover, .xhfav:focus-visible { color: #f5b942; border-color: #f5b942; }
.xhfav.on { color: #f5b942; border-color: #f5b942; }
.xhfav.on svg { fill: currentColor; }.xhsuggest { margin-top: 1rem; }
.xhsuggest > summary { cursor: pointer; font-weight: 600; }
.xhsugs { list-style: none; margin: 0; padding: 0; }
.xhsugs li { display: flex; gap: 1rem; align-items: flex-start; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.xhsugs li:last-child { border-bottom: 0; }
.xhsugtext { flex: 1; min-width: 0; }
.xhsugtext .hint a { word-break: break-all; }
.xhsugform { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.xhsugform input, .xhsugform select, .xhsugform .csel { width: auto; flex: 1 1 9rem; min-width: 0; }
/* Kategorie-Zeilen (Fadenkreuze, FAQ): Name breit, Reihenfolge schmal, Knöpfe daneben – auf schmalen Bildschirmen umgebrochen */
.xhcatrow { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .4rem 0; }
.xhcatrow > input { flex: 1 1 10rem; width: auto; min-width: 0; margin: 0; }
.xhcatrow > input[type="number"] { flex: 0 0 4.5rem; width: 4.5rem; }
.xhcatrow > .btn { flex: none; margin: 0; white-space: nowrap; }
.xhedithead { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .5rem; }
/* Fadenkreuz vergrößern: Lupe oben rechts an der Kachel öffnet das zusammengesetzte Bild im Bildfenster (wie Screenshots) */
.xhtile { position: relative; }
.xhzoom { position: absolute; top: .4rem; right: .4rem; display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--card); color: var(--muted); cursor: zoom-in; }
.xhzoom:hover, .xhzoom:focus-visible { color: var(--text); border-color: var(--blue); }
.xhzoom svg { width: 15px; height: 15px; }
.xhsugprev { position: relative; flex: none; }
.xhsugprev .xhzoom { top: -.4rem; right: -.4rem; }
.xhair.full { display: inline-flex; align-items: center; justify-content: center; }
.xhair.full img { width: 100%; height: 100%; object-fit: contain; }
.xhair.full canvas { width: 100%; height: 100%; }
.xhscale { margin: .25rem 0 .5rem; }
.xhscalerow { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.xhscalerow input[type=range] { flex: 0 1 13rem; min-width: 6rem; }
.xhpct { width: 7.5rem; flex: none; }
.xhpct input { width: 100%; min-width: 0; padding-right: .3rem; }
.xhpct span { padding: 0 .6rem; }
.xhscalemine { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.xhscalemine[hidden] { display: none; }
.xhscalemine .grow { flex: 1 1 14rem; min-width: 0; }
.lightbox:has(img[src*="crosshairs/"]) { padding: 1.5rem; background: radial-gradient(circle, #6d7a86 0%, #3c4650 100%); }
.lightbox img[src*="crosshairs/"] { width: min(24rem, 72vw); height: auto; }
/* Fadenkreuze: Vorschläge von Spielern zugeklappt, damit sie nicht gleich Platz einnehmen (Kopf wie .cardtitle) */
.xhsugbox > summary { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: -1.5rem; padding: 1rem 1.5rem; cursor: pointer; list-style: none; }
.xhsugbox > summary::-webkit-details-marker { display: none; }
.xhsugbox > summary::before { content: "▸"; color: var(--muted); transition: transform .15s; }
.xhsugbox[open] > summary { margin-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.xhsugbox[open] > summary::before { transform: rotate(90deg); }
.xhsumtitle { font-size: 1rem; font-weight: 600; }
.xhsugtoggle { margin-left: auto; }
.xhsugbox[open] .xhsugtoggle { display: none; }
/* FAQ: Fragen zum Aufklappen je Kategorie, Suche, Freigaben (vorher / nachher) */
.faqsearch { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; max-width: 34rem; margin-bottom: 1.25rem; }
.faqsearch input { flex: 1 1 14rem; min-width: 0; margin: 0; padding: 0 .8rem; }
.faqsearch input, .faqsearch .btn { height: 2.5rem; box-sizing: border-box; }
.faqsearch .btn { display: inline-flex; align-items: center; margin: 0; padding-top: 0; padding-bottom: 0; }
.faqitem { border-bottom: 1px solid var(--line); }
.faqitem:last-of-type { border-bottom: 0; }
.faqitem > summary { display: flex; align-items: center; gap: .6rem; padding: .8rem 0; cursor: pointer; list-style: none; font-weight: 600; }
.faqitem > summary::-webkit-details-marker { display: none; }
.faqitem > summary::before { content: "▸"; flex: none; color: var(--muted); transition: transform .15s; }
.faqitem[open] > summary::before { transform: rotate(90deg); }
.faqitem > summary > span:first-child { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.faqitem > summary .hint { font-weight: 400; text-align: right; }
.faqbody { padding: 0 0 1rem 1.3rem; }
.faqbody .richtext { overflow-wrap: anywhere; }
.faqactions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .75rem; }
.faqactions .hint { flex: 1 1 12rem; }
.faqactions form { margin: 0; }
.faqchange { padding: 1rem 0; border-bottom: 1px solid var(--line); }
.faqchange:last-child { border-bottom: 0; }
.faqchangehead { margin-bottom: .6rem; }
.faqdiff { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); gap: 1rem; margin-bottom: .75rem; }
.faqdiff > div { min-width: 0; padding: .75rem 1rem; border: 1px solid var(--line); border-radius: 8px; overflow-wrap: anywhere; }
.faqold { opacity: .75; }
.faqnew { border-color: color-mix(in srgb, #2fa75a 50%, var(--line)) !important; }
.faqdiff h3 { margin: .25rem 0 .5rem; font-size: 1rem; }
@media (max-width: 340px) { .top { gap: .25rem; } .top .langcode { display: none; } }
.modalfoot { flex-wrap: wrap; }
.ratelimits input { width: 7.5rem; min-width: 7.5rem; margin: 0; }
/* Ticket ohne Anmeldung (ticket.php): Eingabe von Ticket-ID und Code, Kopf mit Status, Verlauf links und Angaben rechts */
.tkaccess input.mono { font-family: ui-monospace, monospace; letter-spacing: .04em; }
.tkaccess .tkfoot { margin-top: 1rem; }
.tkhead { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.tkhead h1 { margin: 0; }
.tkmeta { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; margin: .5rem 0 1rem; color: var(--muted); font-size: .9rem; }
.tkmeta b { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.tkmeta .mono, .guestinfo .mono { font-family: ui-monospace, monospace; }
.tkgrid { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: 1.5rem; align-items: start; }
@media (max-width: 900px) { .tkgrid { grid-template-columns: 1fr; } }
.tkgrid > .card { margin: 0; }
.setpw { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; margin: 0 0 1rem; padding: .9rem 1rem; border: 1px solid color-mix(in srgb, #2fa75a 55%, var(--line)); border-radius: 10px; background: color-mix(in srgb, #2fa75a 12%, transparent); }
.setpw .btn { margin: 0; }
.tkside dl { display: grid; grid-template-columns: auto 1fr; gap: .35rem .75rem; margin: 0 0 .75rem; font-size: .9rem; }
.tkside dt { color: var(--muted); }
.tkside dd { margin: 0; overflow-wrap: anywhere; }
.tkside .btn { margin: .25rem 0 .5rem; }
.tkside form { margin: 0; }
/* Spielerprofil → Account (player_account_view.php): Karten im Raster, Einstellungen als Liste, Fadenkreuz mit Vorschau, Kalender zum Wiederherstellen */
.accgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1rem; align-items: start; }
.accgrid > .card { margin: 0; }
.accgrid .btnrow { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.accgrid .btnrow form { margin: 0; }
.accgrid .btnrow .btn { margin: 0; }
.accsettings { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; font-size: .9rem; }
.accsettings li { display: flex; justify-content: space-between; gap: .75rem; align-items: center; }
.accxhrow { display: flex; gap: .75rem; align-items: center; }
.accxhrow select { flex: 1; min-width: 0; }
.accxhimg { flex: none; width: 3rem; height: 3rem; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: #000; overflow: hidden; }
.accxhimg img { max-width: 100%; max-height: 100%; }
.accxhimg .hint { font-size: .65rem; }
.accxh input[type=number] { max-width: 8rem; }
.dailyday.pick { cursor: pointer; position: relative; }
.dailyday.pick input { position: absolute; opacity: 0; pointer-events: none; }
.dailyday.pick:has(input:checked) .damt::before { content: "✓ "; color: var(--blue); }
.dailyday.pick:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
.dailyday.pick:has(input:checked) { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 18%, var(--input)); }
.dailyrestore { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.dailyrestore input { flex: 1; min-width: 12rem; }
.dailyrestore .btn { margin: 0; }
.limitbox .limithead { margin: .75rem 0 .25rem; font-size: .9rem; color: var(--muted); }
.limitbox .cardhead form { margin: 0; }
td.pos { color: #2fa75a; }
/* Shoutbox (footer.php, assets/js/shoutbox.js): runder Knopf unten rechts fliegt ein, Punkt bei neuen Nachrichten, Fenster darüber;
   Popups (Toasts) rutschen über den Knopf */
.shout { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 999; }
body:has(#shout) .toasts { bottom: 5.25rem; }
/* Popups bei offener Shoutbox links neben dem Fenster statt darüber (schmal: oben, siehe unten) */
body:has(#shout.open) .toasts { right: calc(1.25rem + min(24rem, 100vw - 2.5rem) + .75rem); }
@media (max-width: 960px) { body:has(#shout.open) .toasts { right: 1.25rem; top: 1.25rem; bottom: auto; } }
.shoutbtn { position: relative; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border: 0; border-radius: 50%; background: var(--blue); color: #fff; cursor: pointer;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .45); animation: shoutin .7s cubic-bezier(.2, .9, .3, 1.3) .4s both; transition: transform .15s; }
.shoutbtn:hover { transform: scale(1.06); }
.shoutbtn svg { width: 24px; height: 24px; }
.shoutbtn.nudge { animation: shoutnudge .6s ease-in-out; }
.shout.open .shoutbtn { background: var(--ghost); color: var(--text); }
.shoutdot { position: absolute; top: .15rem; right: .15rem; width: .8rem; height: .8rem; border: 2px solid var(--bg); border-radius: 50%; background: #e5484d; }
@keyframes shoutin { from { opacity: 0; transform: translateX(160%) rotate(25deg); } }
@keyframes shoutnudge { 0%, 100% { transform: none; } 25% { transform: rotate(-12deg) scale(1.08); } 50% { transform: rotate(10deg) scale(1.08); } 75% { transform: rotate(-6deg); } }
@media (prefers-reduced-motion: reduce) { .shoutbtn, .shoutbtn.nudge { animation: none; } }
.shoutpanel { position: absolute; right: 0; bottom: 4.1rem; width: min(24rem, calc(100vw - 2.5rem)); height: min(32rem, calc(100vh - 7rem)); display: flex; flex-direction: column;
    border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: 0 18px 48px rgba(0, 0, 0, .5); overflow: hidden; animation: toastin .2s ease-out; }
.shoutpanel[hidden] { display: none; }
.shouthead { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem .75rem .6rem 1rem; border-bottom: 1px solid var(--line); }
.shouttools { display: flex; gap: .25rem; }
.shoutlist { flex: 1; min-height: 0; overflow-y: auto; padding: .6rem .75rem; display: flex; flex-direction: column; gap: .45rem; }
.shoutlist[hidden] { display: none; }
.shoutmore { align-self: center; border: 0; background: none; color: var(--blue); font: inherit; font-size: .85rem; cursor: pointer; }
.shoutempty { text-align: center; margin: auto 0; }
/* Chatbubbles: andere links, eigene rechts und hervorgehoben; die Ecke zur Seite des Absenders bleibt spitz */
.shoutmsg { align-self: flex-start; max-width: 85%; min-width: 9rem; padding: .45rem .7rem .5rem; border-radius: 14px 14px 14px 4px; background: var(--input); border: 1px solid var(--line); }
/* eigene: dezent in der Akzentfarbe getönt und umrandet (passt zu jeder Akzentfarbe, nicht grell) */
.shoutmsg.mine { align-self: flex-end; border-radius: 14px 14px 4px 14px; border-color: color-mix(in srgb, var(--blue) 65%, transparent);
    background: color-mix(in srgb, var(--blue) 14%, var(--card)); }
.shoutmsg.mine .shoutmeta { flex-direction: row-reverse; }
.shoutmsg.mine .shoutmsgtools { margin-left: 0; margin-right: auto; }
.shoutmsg.mine .shoutname { color: color-mix(in srgb, var(--blue) 70%, var(--text)); }
.shoutmeta { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .5rem; font-size: .8rem; }
.shoutname { font-weight: 700; color: var(--text); }
.shoutbadges { display: inline-flex; align-items: center; gap: .15rem; margin-right: -.3rem; }
.shoutbadges .shield svg { width: 14px; height: 14px; }
.shoutwhen { color: var(--muted); }
.shoutmsgtools { margin-left: auto; display: flex; gap: .15rem; opacity: .55; }
.shoutmsg:hover .shoutmsgtools, .shoutmsgtools:focus-within { opacity: 1; }
.shoutmsgtools .ib { width: 24px; height: 24px; }
.shoutmsgtools .ib svg { width: 14px; height: 14px; }
.shoutbody { margin-top: .15rem; font-size: .92rem; overflow-wrap: anywhere; white-space: pre-wrap; }
.shoutedited { margin-top: .15rem; color: var(--muted); font-size: .72rem; font-style: italic; }
.shoutedit { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .3rem; }
.shoutedit input { flex: 1; min-width: 8rem; }
.shoutedit .btn { margin: 0; }
.shoutbans { flex: 1; min-height: 0; overflow-y: auto; padding: .6rem .75rem; }
.shoutbans[hidden] { display: none; }
.shoutbans ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; font-size: .85rem; }
.shoutbans li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem; padding: .45rem .6rem; border: 1px solid var(--line); border-radius: 10px; }
.shoutbans li .btn { margin: 0; }
.shoutbanned { margin: 0; padding: .65rem .9rem; border-top: 1px solid var(--line); color: #f0b067; background: color-mix(in srgb, #e8902f 12%, transparent); font-size: .85rem; }
.shoutbanned[hidden] { display: none; }
.shoutform { display: flex; gap: .4rem; padding: .6rem .75rem; border-top: 1px solid var(--line); }
.shoutform[hidden] { display: none; }
.shoutform input { flex: 1; min-width: 0; }
.shoutform .btn { margin: 0; padding: .5rem .9rem; }
@media (max-width: 600px) {
    .shout { right: .75rem; bottom: .75rem; }
    body:has(#shout) .toasts { bottom: 4.5rem; }
    body:has(#shout.open) .toasts { top: .75rem; right: .75rem; bottom: auto; width: calc(100vw - 1.5rem); }
    .shoutpanel { position: fixed; left: .5rem; right: .5rem; bottom: 4.5rem; width: auto; height: min(30rem, calc(100vh - 6rem)); }
}
@media print { .shout { display: none; } }
/* Spielerprofil → Logs → Shoutbox: gelöschte Nachrichten blasser */
.sblog tr.sbdeleted td:not(:last-child) { opacity: .65; }
/* Shoutbox: Spieler direkt in der Sperrliste sperren (Name, Dauer, Grund) */
.shoutbanadd { display: grid; grid-template-columns: 1fr auto; gap: .4rem; margin-bottom: .9rem; padding-bottom: .9rem; border-bottom: 1px solid var(--line); }
.shoutbanadd .hint { grid-column: 1 / -1; margin: 0; }
.shoutbanadd [name=reason] { grid-column: 1 / -1; }
.shoutbanadd .btn { grid-column: 1 / -1; margin: 0; }
.shoutbanadd input, .shoutbanadd select { min-width: 0; }
/* Fehlerseiten: Hinweis für Betreiber (z. B. PHP-Version) */
.errorbox .errorhint { font-size: .85rem; }
.errorbox code { overflow-wrap: anywhere; }
/* Erfolgsmeldung mit mehreren Zeilen (z. B. Moduswechsel): Überschrift, darunter Bezeichnung und Wert je Zeile */
.message.flashlist { display: grid; gap: .45rem; }
.message.flashlist strong { font-size: 1.02rem; }
.flashrow { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .6rem; }
.flashrow > span { min-width: 6.5rem; color: var(--muted); font-size: .88rem; }
.flashrow code { padding: .1rem .45rem; border-radius: 6px; background: color-mix(in srgb, currentColor 12%, transparent); font-size: .88rem; overflow-wrap: anywhere; }
/* Shoutbox: Knopf Smileys an/aus (aus = grau) */
.shoutsmile span { font-size: 1rem; line-height: 1; transition: filter .15s, opacity .15s; }
.shoutsmile[aria-pressed="false"] span { filter: grayscale(1); opacity: .45; }
/* Shoutbox: Symbol „Bearbeitungen ansehen“ hinter „bearbeitet“ */
.shoutedited { display: flex; align-items: center; gap: .3rem; }
.shoutedited .shouthist { width: 20px; height: 20px; font-style: normal; }
.shoutedited .shouthist svg { width: 12px; height: 12px; }
/* Shoutbox: Suche in den Sperren, Nachrichten Gesperrter (nur fürs Team sichtbar) */
.shoutbansearch { width: 100%; margin: 0 0 .5rem; }
.shoutbansearch[hidden], .shoutbans li[hidden] { display: none; }
.shoutmsg.banned { opacity: .7; border-style: dashed; }
.shoutbannedmark { color: #f0b067; font-size: .72rem; }
/* Strafen → Shoutbox-Sperren: Knopf „Aufheben“ neben „Bearbeiten“ */
td form.inline { display: inline-flex; }
/* Fraktion / Unternehmen: Kasse und Verwarnungen nebeneinander, der Balken wächst mit den Einträgen */
.ovtopbars { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; gap: .75rem; margin-bottom: 1rem; }
@media (max-width: 700px) { .ovtopbars { grid-template-columns: 1fr; } }
.ovtopbars .card { margin: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align: left; gap: .35rem; padding: .65rem 1.1rem; width: auto; }
.ovtopbars .kassebox { border-left: 3px solid #2fa75a; }
.ovtopbars .kassebox strong { font-size: 1.25rem; }
.topbarhead { display: inline-flex; align-items: center; gap: .45rem; color: var(--muted); font-weight: 600; }
.topbarhead svg { width: 18px; height: 18px; }
.warnbar { font-size: .88rem; border-left: 3px solid #2fa75a; }
.warnbar.warn { border-left-color: #e8902f; } .warnbar.bad { border-left-color: #e5484d; }
.badgetag.ok { background: color-mix(in srgb, #2fa75a 16%, transparent); color: #2fa75a; }
.badgetag.warn { background: color-mix(in srgb, #e8902f 18%, transparent); color: #e8902f; }
.warnbar ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.warnbar li { overflow-wrap: anywhere; }
/* Reiter „Statistiken“: Einnahmen / Ausgaben mit Anteilen */
.moneysplit { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1rem; }
.moneysplit .card { margin: 0; }
.moneytotal { margin: 0 0 .75rem; font-size: 1.5rem; font-weight: 700; }
.moneytotal.moneyin, strong.moneyin { color: #2fa75a; } .moneytotal.moneyout, strong.moneyout { color: #e5484d; }
.sharelist { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.sharelist li { display: grid; grid-template-columns: minmax(7rem, 1fr) 2fr auto; align-items: center; gap: .6rem; font-size: .9rem; }
.sharebar { height: .55rem; border-radius: 99px; background: linear-gradient(90deg, var(--blue) var(--p), var(--line) var(--p)); }
.shareval { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .sharelist li { grid-template-columns: 1fr auto; } .sharelist .sharebar { grid-column: 1 / -1; grid-row: 2; } }
/* Diagramme: Summe im Tooltip gestapelter Balken */
.tipsum { margin-top: .25rem; padding-top: .25rem; border-top: 1px solid var(--line); font-weight: 700; }
/* Fraktion / Unternehmen: Reiterleiste mit Symbolen, Verwaltung rechts abgesetzt; am Handy eine Zeile zum Wischen */
.subtabs.orgtabs { flex-wrap: nowrap; justify-content: space-between; align-items: flex-start; gap: .5rem 1rem; font-size: .93rem; }
.orgtabsmain, .orgtabsadmin { display: flex; flex-wrap: wrap; gap: .1rem; }
.orgtabsmain { flex: 1 1 auto; min-width: 0; }
.orgtabsadmin { flex: 0 0 auto; }
.orgtabsadmin { padding-left: .75rem; border-left: 1px solid var(--line); }
.orgtabs a { padding: .55rem .5rem; gap: .3rem; }
.orgtabsadmin a { padding: .55rem .5rem; }
.orgtabs a svg { width: 16px; height: 16px; opacity: .75; }
.orgtabs a.active svg { opacity: 1; }
.orgtabs .tablock svg { width: 12px; height: 12px; opacity: .55; }
@media (max-width: 700px) {
    .subtabs.orgtabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); padding-right: 3rem; }
    .subtabs.orgtabs::-webkit-scrollbar { display: none; }
    .orgtabsmain, .orgtabsadmin { flex-wrap: nowrap; flex: 0 0 auto; }
    .orgtabs a { white-space: nowrap; padding: .55rem .7rem; }
}
/* Kasse: Betrag und Knopf „Geld-Logs“ in einer Zeile */
.kasserow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; width: 100%; }
.kasserow .btn { margin: 0; display: inline-flex; align-items: center; gap: .35rem; }
.kasserow .btn svg { width: 14px; height: 14px; }
/* Mitgliederliste: Suche, Zeitraum, sortierbare Spalten, einklappbare Ränge, Status als Symbole */
.memberbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: 0 0 .75rem; }
.memberbar .membersearch { flex: 1 1 14rem; max-width: 20rem; margin: 0; }
.memberbar .pills { margin: 0; }
.memberbar .memberunsort { margin: 0; display: inline-flex; align-items: center; gap: .35rem; }
.memberbar .memberunsort svg { width: 14px; height: 14px; }
.memberbar .memberunsort[hidden] { display: none; }
table.memberlist[data-period="7"] .p30, table.memberlist[data-period="30"] .p7 { display: none; }
table.memberlist th[data-sort] { cursor: pointer; user-select: none; white-space: nowrap; }
table.memberlist th[data-sort]:hover { color: var(--text); }
table.memberlist th[data-sort]::after { content: '↕'; margin-left: .3rem; opacity: .3; font-size: .8em; }
table.memberlist th[data-dir="asc"]::after { content: '▲'; opacity: .9; }
table.memberlist th[data-dir="desc"]::after { content: '▼'; opacity: .9; }
table.memberlist tbody[hidden] { display: none; }
table.memberlist tr.mrow[hidden], table.memberlist tbody.folded tr.mrow { display: none !important; }
table.memberlist .rankhead { cursor: pointer; }
.rankfold { border: 0; background: none; color: var(--muted); font-size: .9rem; padding: 0 .35rem 0 0; cursor: pointer; transition: transform .15s; }
tbody.folded .rankfold { transform: rotate(-90deg); }
.statuscell { white-space: nowrap; }
.statuscell form.inline { display: inline-flex; }
.sticon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 6px; vertical-align: middle; }
.sticon svg { width: 15px; height: 15px; }
.sticon.ok { color: var(--ok); } .sticon.bad { color: #e5484d; opacity: .75; }
.loantoggle.sticon { padding: 0; }
@media (max-width: 800px) {
    table.memberlist.stack tr:not(.rankhead) td.statuscell { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; }
    table.memberlist.stack tr:not(.rankhead) td.statuscell::before { flex-basis: 100%; }
}
/* Symbole in Untertabs (app/tab_icons.php) */
.pills button:has(svg) { display: inline-flex; align-items: center; gap: .45rem; }
.pills svg { width: 16px; height: 16px; flex: none; }
/* Teamliste: Online-Markierung und Knöpfe rechts neben dem Namen, der Name bleibt mittig */
.teamextra { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.teamextra .leaveteam { margin: 0; }
/* Lexikon: aus dem Spiel verlinktes Thema ohne Eintrag */
.lexmissing { text-align: center; display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: 2.5rem 1.25rem; }
.lexmissing .lexnoimg { width: 4rem; height: 4rem; aspect-ratio: auto; border-radius: 50%; }
.lexmissing h2 { margin: .4rem 0 0; }
.lexmissing p { max-width: 32rem; margin: 0; }
.lexmissing .btnrow { justify-content: center; flex-wrap: wrap; margin-top: .6rem; }
.lexlayout:has(.lexmissing) .lexcats { order: 0; } /* Hinweis zuerst, auch auf schmalen Bildschirmen */
/* Dashboard: kompakte Kennzahlen (Symbol links, Zahl und Beschriftung rechts) und Adminansage in einer Zeile */
.kpis.compact { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.kpis.compact .kpi { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .75rem; row-gap: 0; align-items: center; padding: .7rem .9rem; box-shadow: 0 3px 10px rgba(0, 0, 0, .2); }
.kpis.compact .kpi svg { grid-row: span 2; width: 26px; height: 26px; opacity: .85; }
.kpis.compact .kpi strong { font-size: 1.35rem; }
.kpis.compact .kpi span { font-size: .8rem; line-height: 1.25; }
@media (max-width: 1300px) { .kpis.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .kpis.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; } .kpis.compact .kpi { padding: .6rem .7rem; column-gap: .55rem; } .kpis.compact .kpi svg { width: 22px; height: 22px; } }
.annbar { display: flex; align-items: center; gap: .75rem; padding: .7rem 1rem; }
.annbar label { margin: 0; display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; font-weight: 600; }
.annbar label svg { width: 18px; height: 18px; color: var(--orange, #e8902f); }
.annbar input[name="text"] { flex: 1; min-width: 0; margin: 0; }
.annbar .btn { margin: 0; }
@media (max-width: 560px) { .annbar { flex-wrap: wrap; } .annbar label { flex-basis: 100%; } }
@media (max-width: 700px) { .dashhead { flex-direction: column; align-items: flex-start; gap: .5rem; } .dashhead nav.pills { flex-wrap: wrap; } } /* Dashboard: Umschalter unter dem Titel */
.kpis.compact.three { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); } /* Täglicher Login: drei Kennzahlen */
/* Discord-Bridge (Verwaltung → Discord): Rollen-Auswahl passt in die Spalte, Fehlertext der Verknüpfung umbricht */
table.droles { table-layout: fixed; }
table.droles th:first-child { width: 34%; min-width: 0; }
table.droles select, table.droles input { width: 100%; min-width: 0; text-overflow: ellipsis; }
table.dlinks .dlerr { display: block; max-width: 18rem; overflow-wrap: anywhere; }
/* Logs: Filter einklappbar, Spielersuche oben rechts, Einträge pro Seite, mobil Auswahlliste statt Knöpfen */
.filterbox > summary { cursor: pointer; display: flex; align-items: center; gap: .5rem; font-weight: 600; list-style: none; }
.filterbox > summary::-webkit-details-marker { display: none; }
.filterbox > summary svg { width: 16px; height: 16px; color: var(--muted); }
.filterbox[open] > summary { margin-bottom: .75rem; }
.filterbox > .filters { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
.loggoto { display: flex; gap: .4rem; align-items: center; }
.loggoto input { margin: 0; min-width: 0; width: 14rem; }
.loggoto .btn { margin: 0; }
.logfoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.logfoot .perpage { margin: 0; align-items: center; }
.lognavselect { display: none; }
@media (max-width: 700px) {
    .lognav { display: none; }
    .lognavselect { display: block; margin-bottom: 1rem; }
    .loggoto { flex-basis: 100%; }
    .loggoto input { flex: 1; width: auto; }
}
/* Shop: Kontostand als schmale Zeile, Admin-Statistik einklappbar */
.shopbalance.compact { padding: .7rem 1rem; }
.shopbalance .balline { display: flex; align-items: center; gap: .45rem; margin: 0; flex-wrap: wrap; }
.shopbalance .balline svg { width: 18px; height: 18px; color: var(--accent); }
.shopbalance .balline strong { font-size: 1.15rem; }
.shopbalance .shoplevels { margin-top: .6rem; }
.earnbox > summary { cursor: pointer; list-style: none; }
.earnbox > summary::-webkit-details-marker { display: none; }
.earnbox > summary h2 { margin: 0; display: inline; }
.earnbox > summary::before { content: '\25B8  '; color: var(--muted); }
.earnbox[open] > summary::before { content: '\25BE  '; }
.earnbox[open] > summary { margin-bottom: .75rem; }
/* Formatierte Texte: Tabellen, Tasten, Inhaltsverzeichnis (rich_html) */
.richtext .richtable { overflow-x: auto; margin: .5rem 0 1rem; }
.richtext table { width: 100%; border-collapse: collapse; }
.richtext th, .richtext td { padding: .55rem .75rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.richtext th { font-weight: 600; }
.richtext td .richimg { max-height: 3rem; width: auto; margin: 0; display: block; }
.richtext kbd { display: inline-block; padding: .05rem .4rem; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; background: var(--input); font: inherit; font-size: .88em; line-height: 1.35; white-space: nowrap; }
.richtext .richtoc { float: right; margin: 0 0 1rem 1.5rem; padding: .75rem 1rem; border: 1px solid var(--line); border-radius: 8px; max-width: 18rem; font-size: .92rem; }
.richtext .richtoc strong { display: block; margin-bottom: .35rem; }
.richtext .richtoc ol { margin: 0; padding-left: 1.2rem; }
.richtext .richtoc ol ol { list-style: lower-alpha; }
.richtext .richtoc li { margin: .15rem 0; }
.richtext::after { content: ''; display: table; clear: both; }
.richtext [id^="h-"] { scroll-margin-top: 5rem; }
@media (max-width: 700px) { .richtext .richtoc { float: none; margin: 0 0 1rem; max-width: none; } }
/* Lexikon: Fischdatenbank in der Artikelspalte, kompakter Kopf */
.lexmain { min-width: 0; display: grid; gap: 1rem; align-content: start; }
.lexmain > .lexarticle { margin: 0; }
.fishdb { display: grid; gap: .9rem; }
.fishdb > * { margin: 0; }
.fishdb .statgrid.tiles { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .6rem; }
.fishdb .statgrid.tiles .stat { padding: .65rem .9rem; margin: 0; }
.fishdb .filters { margin: 0; }
.fishdb .introline { margin: 0; }
.fishdb .fishgrid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); margin: 0; }
.fishdb .filters { display: grid; grid-template-columns: minmax(10rem, 1.6fr) repeat(3, minmax(7.5rem, 1fr)) auto; gap: .75rem; align-items: end; }
.fishdb .filters > div { margin: 0; min-width: 0; }
.fishdb .filters .btn { margin: 0; }
@media (max-width: 1100px) { .fishdb .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fishdb .filters > div:last-child { grid-column: 1 / -1; } }
.fishdb .fishcard dd { overflow-wrap: normal; word-break: normal; }
/* Ostern: Eier im Gras auf der Fußzeile (wackeln), Hase mit zuckenden Ohren (hüpft ab und zu), Blumen */
body.event-easter .top { box-shadow: inset 0 -2px 0 #f6a5c0; }
body.event-easter .brand img { filter: drop-shadow(0 0 10px rgba(246, 165, 192, .5)); }
.easter .grass { right: 210px; bottom: max(0px, calc(var(--dbot, 44px) - 6px)); width: 150px; height: 16px; filter: none; opacity: .9; }
.easter .egg { bottom: max(0px, calc(var(--dbot, 44px) - 10px)); transform-origin: 50% 90%; animation: eggwobble 7s ease-in-out infinite; }
.easter .e1 { right: 232px; }
.easter .e2 { right: 262px; animation-delay: -2.3s; }
.easter .e3 { right: 318px; width: 22px; height: 29px; animation-delay: -4.1s; }
.easter .e4 { left: 280px; animation-delay: -5.2s; }
.easter .bunny { right: 286px; bottom: max(0px, calc(var(--dbot, 44px) - 12px)); animation: bunnyhop 9s ease-in-out infinite; }
.easter .bunny .earl, .easter .bunny .earr { transform-box: fill-box; transform-origin: 50% 100%; animation: eartwitch 5s ease-in-out infinite; }
.easter .bunny .earr { animation-delay: -1.7s; }
.easter .flower { bottom: max(0px, calc(var(--dbot, 44px) - 14px)); font-size: 1.3rem; filter: none; }
.easter .f1 { right: 214px; } .easter .f2 { left: 256px; font-size: 1.1rem; }
body.collapsed .easter .e4 { left: 24px; } body.collapsed .easter .f2 { left: 0; }
@keyframes eggwobble { 0%, 86%, 100% { rotate: 0deg; } 89% { rotate: -9deg; } 92% { rotate: 7deg; } 95% { rotate: -4deg; } }
@keyframes bunnyhop { 0%, 70%, 100% { translate: 0 0; } 74% { translate: -4px -16px; } 78% { translate: -8px 0; } 82% { translate: -12px -10px; } 86% { translate: -14px 0; } 93% { translate: 0 0; } }
@keyframes eartwitch { 0%, 88%, 100% { rotate: 0deg; } 91% { rotate: -14deg; } 94% { rotate: 6deg; } }
@media (max-width: 900px) {
    .easter .e3, .easter .e4, .easter .f2, .easter .grass { display: none; }
    .easter .e1 { right: 12px; } .easter .e2 { right: 40px; } .easter .bunny { right: 66px; } .easter .f1 { right: 116px; }
}
/* Aprilscherz: die ganze Seite steht auf dem Kopf; der Knopf unten (nicht mitgedreht) dreht sie für diesen Tab zurück */
html:not(.aprilfix) body.event-aprilfools .shell, html:not(.aprilfix) body.flipjoke .shell { transform: rotate(180deg); }
body.event-aprilfools .top { box-shadow: inset 0 -2px 0 #a855f7; }
.aprilfools { position: fixed; left: 50%; bottom: 14px; translate: -50% 0; z-index: 30; }
.aprilfools .aprilbtn { margin: 0; box-shadow: 0 6px 22px rgba(0, 0, 0, .45); white-space: nowrap; gap: .5rem; }
.aprilfools .aprilbtn span { font-weight: 400; opacity: .9; }
@media (max-width: 560px) { .aprilfools .aprilbtn span { display: none; } }
/* Ankündigung & Events: Schalter, Felder, Status und Vorschau in einer Linie */
.evtable td { vertical-align: middle; }
.evtable .switch { margin: 0; }
.evtable input { margin: 0; }
.evtable .btn { white-space: nowrap; margin: 0; }
/* User werben User: Stufen als Karten mit Fortschritt, Voraussetzungen im Dialog */
.refstages { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr)); gap: .75rem; margin-bottom: 1rem; }
.refstage { position: relative; display: flex; flex-direction: column; gap: .4rem; margin: 0; padding-bottom: 1.1rem; overflow: hidden; }
.refstage .cardhead { margin: 0; }
.refstage h3 { margin: 0; font-size: 1.4rem; }
.refstage h3 .hint { font-size: .8rem; font-weight: 400; }
.refstage .regularlist { margin: 0; }
.refstage.inactive { opacity: .75; }
.refstage.reached { border-color: color-mix(in srgb, #2fa75a 55%, var(--line)); }
.refstage.claimed { border-color: color-mix(in srgb, #2fa75a 35%, var(--line)); }
.refstagefoot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.refstagefoot form { margin: 0; }
.refbar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--line); }
.refbar::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--p); background: #2fa75a; }
.reflist { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.reflist li { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; border-bottom: 1px solid var(--line); }
.reflist li:last-child { border-bottom: 0; }
.refreqs { display: grid; gap: .5rem; }
.refreq { display: grid; grid-template-columns: minmax(0, 1fr) 9rem 8rem; gap: .6rem; align-items: center; }
.refreq .switch, .refreq input, .refreq select, .refreq .inputunit { margin: 0; }
@media (max-width: 600px) { .refreq { grid-template-columns: 1fr 1fr; } .refreq .switch { grid-column: 1 / -1; } }
@media (max-width: 600px) { .refstages { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; } .refstage h3 { font-size: 1.15rem; } .refstage h3 .hint { display: block; } .refstagefoot { flex-direction: column; align-items: flex-start; } }
/* Spielerprofil: Namen ändern / Spieler bearbeiten als Symbole direkt hinter dem Namen */
.playerhead .nametools { display: inline-flex; gap: .3rem; margin-left: .15rem; vertical-align: middle; }
.playerhead .nametools .ib { width: 30px; height: 30px; }
.playerhead .nametools .ib svg { width: 15px; height: 15px; }
.reftable .refmiss { margin: .15rem 0 0; padding-left: 1rem; font-size: .85rem; } /* User werben User: was Geworbenen noch fehlt */
.reftable .refmiss li { margin: .05rem 0; }
@media (min-width: 801px) { .reftable td[data-label="Fehlt noch"] { min-width: 15rem; } }