/* ---------------------------------------------------------------------------
   RAWCaptureBooth Bilderserver - Gestaltung des Backends
   ---------------------------------------------------------------------------
   Farben und Grundmasse sind dieselben wie im Kunden-Portal: #0f172a als Grund,
   #d89904 als Akzent, alles Weitere daraus abgeleitet. Wer beide Oberflaechen
   bedient, soll sie nicht als zwei Programme erleben.

   Der Aufbau ist von der kleinen Ansicht her gedacht - die Regeln gelten
   zuerst fuer das Telefon, groessere Fenster bekommen ihre Abweichungen in den
   Medienabfragen am Ende.
   ------------------------------------------------------------------------ */

:root {
    --bg: #0f172a;
    --bg-tief: #0a1122;
    --card: #1a2438;
    --card-hoch: #212d45;
    --feld: #0b1324;
    --linie: rgba(148, 163, 184, 0.16);
    --linie-stark: rgba(148, 163, 184, 0.32);
    --text: #e8edf6;
    --muted: #94a3b8;
    --accent: #d89904;
    --accent-hell: #f0b52a;
    --accent-dark: #af7d08;
    --accent-weich: rgba(216, 153, 4, 0.14);
    --danger: #f87171;
    --warn: #fb923c;
    --ok: #86efac;
    --info: #60a5fa;
    --lila: #c084fc;
    --radius: 16px;
    --radius-klein: 11px;
    --schatten: 0 18px 40px rgba(2, 8, 23, 0.45);
    --breite: 1320px;
    --rand: 1.1rem;
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    min-height: 100vh;
    font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
    font-size: 16px;
    line-height: 1.55;
    color: var(--text);
    background-color: var(--bg);
    /* Zwei sehr weiche Lichtpunkte nehmen der grossen dunklen Flaeche die
       Haerte, ohne dass ein Bild geladen werden muss. */
    background-image:
        radial-gradient(1100px 620px at 12% -12%, rgba(216, 153, 4, 0.12), transparent 60%),
        radial-gradient(900px 520px at 100% 0%, rgba(96, 165, 250, 0.08), transparent 55%);
    background-attachment: fixed;
    display: flex;
    flex-direction: column;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hell); }

h1, h2, h3, h4 { line-height: 1.25; letter-spacing: -0.01em; }
h1 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); }
h2 { font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.9rem); }
h3 { font-size: clamp(1.08rem, 1rem + 0.5vw, 1.25rem); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

code, .mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
    background: rgba(11, 19, 36, 0.7);
    border: 1px solid var(--linie);
    border-radius: 6px;
    padding: 0.1rem 0.35rem;
    overflow-wrap: anywhere;
}

/* --- Kopfleiste ---------------------------------------------------------- */

.topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(11, 18, 34, 0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--linie);
    padding-top: env(safe-area-inset-top);
}
.topbar-innen {
    max-width: var(--breite);
    margin: 0 auto;
    padding: 0.6rem var(--rand);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.marke { display: inline-flex; align-items: center; margin-right: auto; min-height: 44px; }
.marken-logo {
    display: block;
    width: auto;
    height: 30px;
    max-width: min(62vw, 260px);
    object-fit: contain;
}
.marken-logo-gross { height: 46px; max-width: min(78vw, 340px); }

/* Das Kaestchen traegt allein den Zustand des Menues und bleibt unsichtbar -
   damit klappt das Menue auf dem Telefon ohne eine Zeile JavaScript auf. */
input.nav-schalter {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
}
.nav-burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0 10px;
    border-radius: var(--radius-klein);
    border: 1px solid var(--linie);
    background: rgba(148, 163, 184, 0.08);
    cursor: pointer;
}
.nav-burger span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: var(--text);
    transition: transform 0.18s ease, opacity 0.18s ease;
}
.nav-schalter:focus-visible + .nav-burger { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav-schalter:checked + .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-schalter:checked + .nav-burger span:nth-child(2) { opacity: 0; }
.nav-schalter:checked + .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-links {
    display: none;
    width: 100%;
    flex-direction: column;
    gap: 0.25rem;
    padding-bottom: 0.4rem;
}
.nav-schalter:checked ~ .nav-links { display: flex; }

.nav-link {
    display: block;
    padding: 0.7rem 0.85rem;
    border-radius: var(--radius-klein);
    color: var(--text);
    font-weight: 600;
}
.nav-link:hover { background: rgba(148, 163, 184, 0.12); color: var(--text); }
.nav-link.ist-aktiv { background: var(--accent-weich); color: var(--accent-hell); }

.sprachwahl {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: 999px;
    border: 1px solid var(--linie);
    background: rgba(148, 163, 184, 0.08);
    align-self: flex-start;
    margin-top: 0.35rem;
}
.sprach-link {
    display: inline-block;
    min-width: 2.4rem;
    padding: 0.3rem 0.5rem;
    border-radius: 999px;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--muted);
}
.sprach-link:hover { color: var(--text); }
.sprach-link.ist-aktiv { background: var(--accent); color: #17202f; }

/* --- Kopf der Anmeldung -------------------------------------------------- */

.marken-kopf {
    max-width: 460px;
    margin: 0 auto;
    padding: 2.5rem var(--rand) 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.marken-kopf .sprachwahl { margin-top: 0; }

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

.inhalt {
    flex: 1;
    width: 100%;
    max-width: var(--breite);
    margin: 0 auto;
    padding: 1.4rem var(--rand) 2.5rem;
}
.inhalt-schmal { max-width: 460px; }

.seiten-kopf { margin-bottom: 1.2rem; }
.seiten-kopf h1, .seiten-kopf h2 { margin: 0 0 0.3rem 0; }
.seiten-kopf .hint { margin-top: 0; }
.zurueck-link { margin: 0 0 0.9rem 0; font-weight: 600; }

/* --- Karten -------------------------------------------------------------- */

.card,
.form-section {
    background: linear-gradient(180deg, var(--card-hoch), var(--card));
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1.1rem;
    box-shadow: var(--schatten);
}
.card > h2:first-child,
.card > h3:first-child,
.form-section > h2:first-child,
.form-section > h3:first-child { margin-top: 0; }

.card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.1rem;
    margin-bottom: 1.1rem;
}

/* Zugeklappte Kaesten fuer seltene Handgriffe. */
details.card > summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 1.05rem;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 32px;
}
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::before {
    content: '+';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    flex: none;
    border-radius: 50%;
    background: var(--accent-weich);
    color: var(--accent);
    font-weight: 700;
}
details.card[open] > summary::before { content: '\2212'; }
details.card[open] > summary { margin-bottom: 0.9rem; }

/* --- Bedienelemente ------------------------------------------------------ */

input, select, textarea, button {
    font: inherit;
    width: 100%;
    padding: 0.72rem 0.9rem;
    border-radius: var(--radius-klein);
    border: 1px solid var(--linie);
    margin-top: 0.45rem;
    background: var(--feld);
    color: var(--text);
    min-height: 44px;
}
input[type="checkbox"], input[type="radio"] {
    width: auto;
    min-height: 0;
    padding: 0;
    margin-top: 0;
    accent-color: var(--accent);
}
input[type="file"] { padding: 0.5rem 0.6rem; }
input::placeholder, textarea::placeholder { color: rgba(148, 163, 184, 0.75); }
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-weich);
}
/* Der eingebaute Kalender und die Pfeile der Zahlenfelder sind auf hellem
   Grund gezeichnet - auf dunklem Feld waeren sie sonst schwarz auf schwarz. */
input[type="datetime-local"], input[type="date"], input[type="number"] { color-scheme: dark; }
label { display: block; margin-top: 0.85rem; font-weight: 600; }
form > label:first-child { margin-top: 0; }
form { margin: 0; }
textarea { min-height: 6rem; resize: vertical; }

button, .button, a.button {
    cursor: pointer;
    border: 1px solid transparent;
    background: var(--accent);
    color: #17202f;
    font-weight: 700;
    text-align: center;
    /* In einer Tabellenzelle bricht der Browser sonst mitten in der
       Beschriftung um - aus "Oeffnen" wird "Oeffne n". */
    white-space: nowrap;
    transition: transform 0.12s ease, background-color 0.15s ease, filter 0.15s ease;
}
button:hover, .button:hover, a.button:hover { background: var(--accent-hell); color: #17202f; }
button:active, .button:active { transform: translateY(1px); }
button:disabled, button:disabled:hover {
    cursor: not-allowed;
    filter: grayscale(0.55);
    opacity: 0.55;
    transform: none;
}
/* Verweise, die wie Knoepfe aussehen sollen, brauchen die Masse eigens: die
   Grundregel oben gilt nur fuer <button>, <input> und <select>. */
a.button, .button.frontend, .button.create {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-height: 44px;
    padding: 0.6rem 1rem;
    border-radius: var(--radius-klein);
}

/* Die Farbklassen stehen doppelt - einmal fuer sich, einmal mit .button davor.
   Ein <a class="button button-finalize"> traegt sonst die Grundfarbe, weil
   'a.button' aus der Regel darueber staerker waere als '.button-finalize'. */
.button-delete, .button-danger,
.button.button-delete, .button.button-danger { background: var(--danger); color: #2a0d0d; }
.button-delete:hover, .button-danger:hover,
.button.button-delete:hover, .button.button-danger:hover { background: #fca5a5; color: #2a0d0d; }

.button-regen, .button-warning,
.button.button-regen, .button.button-warning { background: var(--warn); color: #331603; }
.button-regen:hover, .button-warning:hover,
.button.button-regen:hover, .button.button-warning:hover { background: #fdba74; color: #331603; }

.button-finalize, .button-save-note, .button.frontend,
.button.button-finalize, .button.button-save-note { background: var(--info); color: #0b1c33; }
.button-finalize:hover, .button-save-note:hover, .button.frontend:hover,
.button.button-finalize:hover, .button.button-save-note:hover { background: #93c5fd; color: #0b1c33; }

.button-save-readme, .button.create,
.button.button-save-readme { background: var(--ok); color: #08301a; }
.button-save-readme:hover, .button.create:hover,
.button.button-save-readme:hover { background: #bbf7d0; color: #08301a; }

.button-organizer, .button.button-organizer { background: var(--lila); color: #2c0b3f; }
.button-organizer:hover, .button.button-organizer:hover { background: #d8b4fe; color: #2c0b3f; }

.button-outline, .button.button-outline {
    background: transparent;
    border: 1px solid var(--linie-stark);
    color: var(--text);
}
.button-outline:hover, .button.button-outline:hover { background: rgba(148, 163, 184, 0.14); color: var(--text); }

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.9rem;
}
.button-row button, .button-row .button, .button-row a.button {
    flex: 0 1 auto;
    width: auto;
    margin-top: 0;
}
form.inline { display: inline-block; }
form.inline button { width: auto; margin-top: 0; }
/* Ein Formular endet mit seinen Knoepfen. Folgt in derselben Karte noch etwas -
   Zahlen, eine Meldung, ein zweites Formular -, klebt es sonst am Knopf. */
.card > form + .status-items,
.card > form + .flash,
.card > form + form,
.card > .status-items + form,
.card > .flash + form { margin-top: 1.6rem; }

.input-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: stretch;
}
.input-group input { flex: 1 1 12rem; margin-top: 0; }
.input-group .button, .input-group button { flex: 0 0 auto; margin-top: 0; }

.checkbox-inline {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: 0.6rem;
    font-weight: 600;
}
.checkbox-inline input { width: 1.15rem; height: 1.15rem; flex: none; }
.checkbox-inline span { flex: 1; font-weight: 400; }

/* --- Texte und Meldungen ------------------------------------------------- */

.hint {
    margin: 0.5rem 0 0 0;
    font-size: 0.88rem;
    color: var(--muted);
    line-height: 1.5;
}
.field-hint {
    display: block;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 400;
    margin-top: 0.35rem;
}

.flash, .message, .error {
    padding: 0.8rem 1rem;
    border-radius: var(--radius-klein);
    margin-bottom: 1rem;
    background: rgba(134, 239, 172, 0.14);
    border: 1px solid rgba(134, 239, 172, 0.32);
    color: var(--text);
}
.flash.error, .error {
    background: rgba(248, 113, 113, 0.16);
    border-color: rgba(248, 113, 113, 0.4);
}
.flash.info { background: rgba(96, 165, 250, 0.14); border-color: rgba(96, 165, 250, 0.32); }

/* --- Kennzeichen --------------------------------------------------------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.24rem 0.65rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    background: rgba(148, 163, 184, 0.16);
    color: var(--muted);
    border: 1px solid transparent;
}
.badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.badge-online { background: rgba(134, 239, 172, 0.16); border-color: rgba(134, 239, 172, 0.35); color: var(--ok); }
.badge-offline { background: rgba(148, 163, 184, 0.16); color: var(--muted); }
.badge-warn { background: rgba(251, 146, 60, 0.16); border-color: rgba(251, 146, 60, 0.35); color: var(--warn); }
.badge-danger { background: rgba(248, 113, 113, 0.16); border-color: rgba(248, 113, 113, 0.4); color: var(--danger); }

.finalized-yes { color: var(--ok); font-weight: 700; }
.finalized-no { color: var(--muted); }
.organizer-pin {
    display: inline-block;
    background: rgba(192, 132, 252, 0.18);
    border: 1px solid rgba(192, 132, 252, 0.4);
    color: var(--lila);
    padding: 0.1rem 0.5rem;
    border-radius: 6px;
    font-weight: 700;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* --- Zustandswerte ------------------------------------------------------- */

/* Gruppen innerhalb einer Zustandskarte. Ohne sie stand alles in einer
   langen Reihe, und "seit Start" und "gesamt" wechselten sich paarweise ab. */
.status-grid {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}
.status-group h4 {
    margin: 0 0 0.6rem 0;
    font-size: 0.78rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.09em;
}
.status-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
    gap: 0.6rem;
}
.status-item {
    background: rgba(11, 19, 36, 0.55);
    border: 1px solid var(--linie);
    border-radius: var(--radius-klein);
    padding: 0.7rem 0.85rem;
}
.status-item span:first-child {
    display: block;
    color: var(--muted);
    font-size: 0.78rem;
}
.status-item strong { display: block; margin-top: 0.15rem; font-size: 1.02rem; overflow-wrap: anywhere; }
.status-item small { color: var(--muted); }

/* --- Tabellen ------------------------------------------------------------ */

.tabellen-rahmen {
    overflow-x: auto;
    border-radius: var(--radius);
    border: 1px solid var(--linie);
    margin-bottom: 1.1rem;
}
table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card);
}
/* Zwoelf Spalten passen in kein Fenster. Ohne Mindestbreite quetscht der
   Browser die letzte Spalte auf ein Wort je Zeile - lieber schiebt man die
   Tabelle seitwaerts. */
.tabellen-rahmen table { min-width: 62rem; }
th, td {
    padding: 0.7rem 0.85rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--linie);
    overflow-wrap: anywhere;
}
th {
    background: rgba(11, 19, 36, 0.75);
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: rgba(148, 163, 184, 0.06); }

/* --- Bilderraster -------------------------------------------------------- */

.image-list {
    margin-top: 1.1rem;
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.9rem;
}
.image-list li {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2.4rem 0.6rem 0.6rem;
    text-align: center;
    font-size: 0.82rem;
    background: rgba(11, 19, 36, 0.55);
    border: 1px solid var(--linie);
    border-radius: var(--radius-klein);
}
.image-list img,
.image-list video {
    max-width: 100%;
    height: auto;
    display: block;
    margin-bottom: 0.5rem;
    border-radius: 8px;
    background: rgba(148, 163, 184, 0.1);
}
.image-list span { display: block; overflow-wrap: anywhere; margin-bottom: 0.5rem; flex-grow: 1; }
.image-list button { margin-top: auto; }
.image-card-select { position: absolute; top: 0.6rem; right: 0.6rem; }
.image-card-select .image-checkbox { cursor: pointer; }
.raw-badge {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    background: rgba(251, 146, 60, 0.2);
    border: 1px solid rgba(251, 146, 60, 0.45);
    color: var(--warn);
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}
.qr-only-badge {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    background: rgba(192, 132, 252, 0.2);
    border: 1px solid rgba(192, 132, 252, 0.45);
    color: var(--lila);
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}
.raw-file-hint { display: block; font-size: 0.72rem; color: var(--warn); margin-bottom: 0.4rem; }

/* --- Abschnitte je Bildsorte --------------------------------------------- */

.image-section + .image-section { margin-top: 1.6rem; }
.image-section-title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--linie);
    font-size: 1rem;
}
.image-section-count {
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    background: var(--accent-weich);
    color: var(--accent-hell);
    font-size: 0.75rem;
    font-weight: 700;
}
.image-section-hint { margin: 0.45rem 0 0; font-size: 0.82rem; }
.image-section .image-list { margin-top: 0.7rem; }

/* --- Loeschdialog -------------------------------------------------------- */

body.modal-open { overflow: hidden; }

.dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.1rem;
    background: rgba(2, 8, 23, 0.8);
}
.dialog-overlay[hidden] { display: none; }

.delete-dialog {
    /* Breiter als eine Karte: Die Knopfbeschriftungen nennen den Umfang
       vollstaendig ("Ganze Aufnahme loeschen (Layout, Animation, Roh- und
       bearbeitete Bilder)"). Auf 34rem stand davon je Knopf eine gequetschte
       Zeile. */
    width: min(100%, 48rem);
    max-height: calc(100vh - 2.2rem);
    overflow-y: auto;
    padding: 1.4rem;
    background: var(--card);
    border: 1px solid var(--linie-stark);
    border-top: 4px solid var(--danger);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
}
.delete-dialog h3 { margin: 0 0 0.7rem; }
.delete-dialog p { margin: 0 0 0.7rem; }
.delete-dialog-hint { color: var(--danger); font-size: 0.88rem; }
.delete-dialog-scope-hint {
    color: var(--muted);
    font-size: 0.84rem;
    border-left: 3px solid var(--linie-stark);
    padding-left: 0.7rem;
}
.delete-dialog-scope-hint[hidden] { display: none; }
.delete-dialog-actions { display: grid; gap: 0.5rem; margin-top: 1.1rem; }
/* Die Grundregel setzt 'white-space: nowrap', damit in einer Tabellenzelle
   nicht mitten in der Beschriftung umgebrochen wird. Hier ist das falsch: Die
   Knoepfe sitzen untereinander und tragen ganze Saetze. */
.delete-dialog-actions button {
    width: 100%;
    margin-top: 0;
    white-space: normal;
    line-height: 1.35;
    text-align: left;
}
.delete-dialog-action-title { display: block; font-weight: 700; }
.delete-dialog-action-note {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.82rem;
    font-weight: 400;
    opacity: 0.85;
}
.delete-dialog-actions button[hidden] { display: none; }

/* --- Rueckmeldung der Fotobox -------------------------------------------- */

.command-result {
    margin-top: 0.9rem;
    padding: 0.75rem 0.9rem;
    border-radius: var(--radius-klein);
    border: 1px solid var(--linie);
    background: rgba(11, 19, 36, 0.55);
    font-size: 0.88rem;
}
.command-result-ok { border-left: 3px solid var(--ok); }
.command-result-error { border-left: 3px solid var(--danger); }
.command-result-label { display: block; color: var(--muted); font-size: 0.78rem; }
.command-result-message { margin: 0.35rem 0 0; }
.command-result-time { margin: 0.35rem 0 0; color: var(--muted); font-size: 0.78rem; }
.image-bulk-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.9rem;
}
.image-bulk-actions button { width: auto; margin-top: 0; }
.select-all-control {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0;
    cursor: pointer;
}

/* --- Geloeschte Bilder --------------------------------------------------- */

.deleted-images-log { border-color: rgba(251, 146, 60, 0.4); }
.deleted-images-log h3 { color: var(--warn); }
.deleted-images-hint { color: var(--muted); font-size: 0.88rem; margin-top: 0; }
.deleted-images-list { margin: 0.8rem 0 0; padding-left: 1.1rem; }
.deleted-images-list li + li { margin-top: 0.45rem; }
.deleted-images-list .deleted-file { font-weight: 600; }
.deleted-images-list .deleted-time { display: block; font-size: 0.78rem; color: var(--muted); }

/* --- Verbrauchte Codes --------------------------------------------------- */

.used-codes-list {
    list-style: none;
    padding: 0;
    margin-top: 0.8rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: 0.55rem;
    font-size: 0.9rem;
}
.used-codes-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
    background: rgba(11, 19, 36, 0.55);
    border: 1px solid var(--linie);
    border-radius: var(--radius-klein);
    padding: 0.5rem 0.7rem;
}
.used-codes-list li div { flex-grow: 1; min-width: 0; }
.used-codes-list li .code-part { font-weight: 700; }
.used-codes-list li .note-part { display: block; margin-top: 0.15rem; font-size: 0.82rem; color: var(--muted); overflow-wrap: anywhere; }
.used-codes-list li button { width: auto; margin-top: 0; }

/* --- Wartende Befehle ---------------------------------------------------- */

.pending-command-param summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.pending-command-param pre {
    max-height: 16rem;
    overflow: auto;
    white-space: pre-wrap;
    margin: 0.5rem 0 0;
    padding: 0.7rem;
    font: 0.78rem/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    background: rgba(11, 19, 36, 0.7);
    border: 1px solid var(--linie);
    border-radius: 8px;
}

/* --- Verknuepfung -------------------------------------------------------- */

.link-form-grid { display: grid; grid-template-columns: 1fr; gap: 0.9rem; }

/* --- Anmeldung ----------------------------------------------------------- */

.login-card { margin-bottom: 0; }
.login-card button { margin-top: 1.2rem; }
.login-error { margin: 1rem 0 0 0; }

/* --- Vor der Anmeldung: Pruefung und Einrichtung ------------------------- */

/* Der Markenkopf ist fuer die schmale Anmeldung gemacht; die beiden Seiten
   davor brauchen die volle Breite des Inhalts. */
.marken-kopf-breit { max-width: var(--breite); }

/* Neben Erfolg und Fehler fehlte der Ton dazwischen: Es geht, aber mit
   Einschraenkungen. Genau das ist bei gemietetem Webspace der Regelfall. */
.flash.warn {
    background: rgba(251, 146, 60, 0.14);
    border-color: rgba(251, 146, 60, 0.35);
}

/* Formularfelder nebeneinander, solange Platz ist. */
.feld-gitter {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: 0.9rem;
}
.feld-gitter label { display: block; }
.feld-gitter input { margin-top: 0.3rem; }
.feld-fehler {
    display: block;
    color: var(--danger);
    font-size: 0.8rem;
    margin-top: 0.35rem;
}
.feld-hat-fehler input { border-color: var(--danger); }

/* Ein Befund der Webspace-Pruefung: Kennzeichen links, Text rechts, der Rat
   darunter auf gleicher Flucht. */
.pruef-punkt {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.35rem 0.7rem;
    align-items: baseline;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--linie);
}
.pruef-punkt:last-child { border-bottom: 0; }
.pruef-titel { font-weight: 600; }
.pruef-wert {
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 400;
    margin-left: 0.5rem;
    overflow-wrap: anywhere;
}
.pruef-rat {
    grid-column: 2;
    margin: 0;
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.5;
}

/* Eine Stufe des Belastungstests. Untereinander gelesen ergeben sie die
   Treppe, auf der der Upload stehen bleibt - deshalb gleiche Schriftbreite,
   damit die Groessenangaben eine Flucht bilden. */
.pruef-stufe {
    margin: 0.15rem 0;
    color: var(--muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85rem;
}
.pruef-stufe-fehler { color: var(--danger); }

/* --- Fuss ---------------------------------------------------------------- */

.backend-fuss {
    border-top: 1px solid var(--linie);
    background: rgba(10, 17, 34, 0.6);
    padding-bottom: env(safe-area-inset-bottom);
}
.backend-fuss-innen {
    max-width: var(--breite);
    margin: 0 auto;
    padding: 1.1rem var(--rand);
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.2rem;
    justify-content: space-between;
    align-items: center;
    color: var(--muted);
    font-size: 0.85rem;
}

/* --- Kleine Fenster: Tabellen als Kaesten -------------------------------- */

/* Unter 768px passt keine Tabelle mit acht Spalten mehr nebeneinander. Jede
   Zeile wird zu einem Kasten, die Spaltenueberschrift wandert per data-label
   vor den Wert. */
@media (max-width: 768px) {
    .tabellen-rahmen { border: 0; overflow: visible; }
    /* Als Kaesten untereinander braucht die Tabelle keine Mindestbreite mehr -
       mit ihr stuenden die Werte weit rechts ausserhalb des Fensters. */
    .tabellen-rahmen table { min-width: 0; }
    table { background: transparent; }
    table thead { display: none; }
    table tbody { display: block; }
    table tr {
        display: block;
        margin-bottom: 0.9rem;
        background: linear-gradient(180deg, var(--card-hoch), var(--card));
        border: 1px solid var(--linie);
        border-radius: var(--radius-klein);
    }
    table td {
        display: block;
        text-align: right;
        padding-left: 45%;
        position: relative;
        border-bottom: 1px solid var(--linie);
    }
    table td:last-child { border-bottom: 0; }
    table td:before {
        content: attr(data-label);
        position: absolute;
        left: 0.85rem;
        width: calc(45% - 1.2rem);
        text-align: left;
        font-weight: 700;
        font-size: 0.78rem;
        color: var(--muted);
    }
    tbody tr:hover td { background: transparent; }
    .image-list { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
}

/* --- Groessere Fenster --------------------------------------------------- */

@media (min-width: 640px) {
    :root { --rand: 1.5rem; }
    .card, .form-section { padding: 1.5rem; }
    .card-grid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
    .link-form-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
}

@media (min-width: 860px) {
    .topbar-innen { flex-wrap: nowrap; padding: 0.7rem var(--rand); }
    .nav-burger { display: none; }
    .nav-links {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.35rem;
        width: auto;
        padding-bottom: 0;
    }
    .nav-links .sprachwahl { margin-top: 0; margin-left: 0.5rem; }
    .marken-logo { height: 34px; max-width: 260px; }
    .inhalt { padding-top: 1.9rem; }
}

/* Wer Bewegung abbestellt hat, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}

/* --- Zusatzangaben in Tabellenzeilen ------------------------------------- */

/* Name und Notiz stehen unter dem Zugangscode statt in eigenen Spalten - bei
   zwanzig Veranstaltungen ist die Zeile sonst nicht mehr zu ueberblicken. */
.zeilen-zusatz {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.82rem;
    color: var(--muted);
}

/* --- Kacheln der Fotoboxen ----------------------------------------------- */

.device-tile {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    transition: transform 0.15s ease, border-color 0.15s ease;
}
.device-tile:hover { transform: translateY(-2px); border-color: var(--linie-stark); }
.device-tile-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
}
.device-tile-head h3 { margin: 0; }
.device-tile-head h3 a { color: var(--text); }
.device-tile-head h3 a:hover { color: var(--accent); }
.device-marks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.6rem 0 0;
}
.device-marks:empty { margin: 0; }
.device-tile .status-items { margin: 0.9rem 0; }
/* Der Knopf sitzt unten buendig, auch wenn die Kacheln unterschiedlich viel
   Text tragen - sonst tanzen die Knoepfe im Raster. */
.device-tile a.button-outline { margin-top: auto; width: 100%; }
.status-item-full { grid-column: 1 / -1; }

/* --- Befehlsgruppen ------------------------------------------------------ */

.command-group + .command-group { margin-top: 1.2rem; }
/* Ein Erklaerungstext endet ohne unteren Abstand, die Gruppenueberschrift
   beginnt ohne oberen - beides zusammen klebt der Text an der Ueberschrift. */
.hint + .command-group { margin-top: 1.3rem; }
.command-group h4 {
    margin: 0 0 0.6rem 0;
    font-size: 0.78rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.09em;
}
.command-group .button-row { margin-top: 0; }

/* Ein offener Fernzugriff soll auffallen, ohne wie ein Fehler auszusehen. */
.remote-access-open-card {
    border-color: rgba(251, 146, 60, 0.55);
    box-shadow: var(--schatten), 0 0 0 1px rgba(251, 146, 60, 0.25);
}
/* Ein wartender Befehl ist kein Fehler - es ist nur noch nichts geschehen. */
.wartender-befehl-karte {
    border-color: rgba(251, 146, 60, 0.45);
    background: linear-gradient(180deg, var(--card-hoch), var(--card));
}

/* ---------------------------------------------------------------------------
   Gestaltung der Galerie
   ---------------------------------------------------------------------------
   Die Vorschau zeigt im Kleinen dieselben Flaechen wie die Galerie: Leiste,
   Hinweiszettel und Bilderraster. Sie faerbt sich ueber eigene Variablen
   ('--v-...'), die 'assets/gestaltung.js' setzt - die Farben des Backends
   bleiben davon unberuehrt, obwohl beide auf derselben Seite stehen.
   ------------------------------------------------------------------------ */
.gestaltung-felder.ist-aus,
.gestaltung-vorschau.ist-aus {
    opacity: 0.45;
}

.gestaltung-felder input[type="color"] {
    width: 4.5rem;
    height: 2.6rem;
    padding: 0.2rem;
    cursor: pointer;
}

.gestaltung-felder input[type="range"] {
    width: 100%;
    accent-color: var(--accent);
}

.gestaltung-vorschau {
    position: relative;
    isolation: isolate;
    /* Die Schrift gehoert zum Thema; die Vorschau soll sie zeigen. */
    font-family: var(--v-schrift, sans-serif);
    margin-top: 1.4rem;
    border: 1px solid var(--linie);
    border-radius: var(--radius-klein);
    overflow: hidden;
    background: var(--v-seite, #000);
    min-height: 13rem;
}

.gestaltung-vorschau-bild,
.gestaltung-vorschau-schleier {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.gestaltung-vorschau-bild {
    z-index: 0;
    background-image: var(--v-bild, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.gestaltung-vorschau-schleier {
    z-index: 1;
    background: var(--v-seite, #000);
    opacity: var(--v-schleier, 0);
}

.gestaltung-vorschau-inhalt {
    position: relative;
    z-index: 2;
}

.gestaltung-vorschau-leiste {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.6rem 0.9rem;
    background: var(--v-flaeche, #1a1a1a);
    border-bottom: 2px solid var(--v-akzent, #d89904);
}

.gestaltung-vorschau-marke {
    display: inline-flex;
    align-items: center;
    font-weight: 700;
    color: var(--v-akzent, #d89904);
    letter-spacing: 0.04em;
}

/* Dasselbe Verhaeltnis wie in der Galerie: feste Hoehe, Breite nach
   Seitenverhaeltnis. So faellt hier schon auf, wenn ein Logo sehr breit ist. */
.gestaltung-vorschau-logo {
    display: block;
    height: 1.6rem;
    width: auto;
    max-width: 11rem;
    object-fit: contain;
}

.gestaltung-vorschau-knopf {
    background: var(--v-akzent, #d89904);
    color: var(--v-akzent-text, #000);
    border-radius: 5px;
    padding: 0.35rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 700;
}

.gestaltung-vorschau-hinweis {
    margin: 0.8rem 0.9rem 0;
    padding: 0.6rem 0.8rem;
    background: var(--v-flaeche-2, #2a2a2a);
    color: var(--v-text, #f0f0f0);
    border-left: 5px solid var(--v-akzent, #d89904);
    border-radius: 0 5px 5px 0;
    font-size: 0.82rem;
}

.gestaltung-vorschau-raster {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    padding: 0.8rem 0.9rem 1rem;
}

.gestaltung-vorschau-raster i {
    display: block;
    height: 2.6rem;
    /* Dieselbe Rundung wie die Kacheln der Galerie (--bild-radius). */
    border-radius: 8px;
    background: var(--v-flaeche, #1a1a1a);
    border: 1px solid var(--v-rahmen, #444);
}

.gestaltung-vorschau-raster i:nth-child(3n) {
    height: 3.6rem;
}
/* Der Verlauf der Event-Uebergaben.
 *
 * Zum Abbrechen stand hier ein roter Knopf je Zeile. Bei zwei wartenden
 * Paketen klebten zwei davon aneinander und zogen den Blick auf sich - dabei
 * ist das Abbrechen der seltene Handgriff und der Verlauf eine Liste zum
 * Lesen. Deshalb ein Verweis in der Zeile statt eines Knopfes darunter. */
.event-handover-log li {
    /* Knapp: Der Abstand stammt aus der Zeit der Knoepfe, die Platz zwischen
       sich brauchten. Der Verweis in der Zeile braucht ihn nicht mehr, und
       eng beieinander liest sich der Verlauf als eine Liste. */
    margin-bottom: 0.15rem;
}

.event-handover-log form.inline {
    display: inline;
    margin-left: 0.35rem;
}

.handover-abbrechen,
button.handover-abbrechen {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    /* Ohne diese Zeile bleibt der Knopf 44 Pixel hoch: Die Grundregel gibt
       jedem Bedienelement diese Mindesthoehe, damit man es mit dem Finger
       trifft. In einer Textzeile zieht das die Zeilen weit auseinander - und
       ein Verweis mitten im Satz wird nicht mit dem Finger gesucht. */
    min-height: 0;
    line-height: inherit;
    vertical-align: baseline;
    width: auto;
    color: var(--danger);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.handover-abbrechen:hover,
button.handover-abbrechen:hover {
    background: none;
    color: var(--danger);
    text-decoration: none;
}
/* Die Warteschlange einer Fotobox: eine Zeile je Befehl, das Verwerfen als
   Verweis dahinter - wie im Verlauf der Uebergaben. */
.befehls-warteschlange {
    margin: 0.35rem 0 0 1.1rem;
    padding: 0;
}

.befehls-warteschlange li {
    margin-bottom: 0.15rem;
}

.befehls-warteschlange form.inline {
    display: inline;
    margin-left: 0.35rem;
}

/* Der QR-Code fuer die Zwei-Faktor-Anmeldung. Heller Grund auch im dunklen
   Gewand: Ein Lesegeraet erwartet dunkel auf hell. */
.zweifaktor-qr {
    display: inline-block;
    margin: 0.6rem 0;
    padding: 12px;
    background: #fff;
    border-radius: 8px;
}

/* --- Hinweis auf eine neuere Ausgabe ------------------------------------
 *
 * Eine Karte statt zweier Kaesten: Meldung, Nummern und die Wege gehoeren
 * zusammen. Der Akzentstreifen links zieht den Blick hin, ohne nach Fehler
 * auszusehen - es ist eine gute Nachricht, keine Stoerung.
 */

.neue-ausgabe {
    background: linear-gradient(180deg, var(--card-hoch), var(--card));
    border: 1px solid var(--linie);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1.1rem;
    box-shadow: var(--schatten);
}

.neue-ausgabe-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.1rem;
}

.neue-ausgabe-kopf h2 {
    margin: 0 0 0.25rem 0;
    font-size: 1.15rem;
}

.neue-ausgabe-unterzeile {
    margin: 0;
    color: var(--text-leise);
    font-size: 0.92rem;
}

/* Die beiden Nummern sind die eigentliche Auskunft - sie gehoeren gross und
   nebeneinander, nicht in einen Satz eingebettet. */
.neue-ausgabe-fassungen {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    white-space: nowrap;
}

.fassung-alt,
.fassung-neu {
    font-variant-numeric: tabular-nums;
    font-size: 1.05rem;
    font-weight: 600;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
}

.fassung-alt {
    color: var(--text-leise);
    background: rgba(148, 163, 184, 0.12);
}

.fassung-neu {
    color: #17202f;
    background: var(--accent);
}

.fassung-pfeil {
    color: var(--text-leise);
}

/* Zwei gleich breite Kacheln; auf schmalen Schirmen untereinander. */
.neue-ausgabe-wege {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 0.9rem;
}

.weg {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    background: rgba(15, 23, 42, 0.35);
}

.weg-empfohlen {
    border-color: rgba(134, 239, 172, 0.45);
}

.weg-marke {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ok);
}

.weg-marke-leise {
    color: var(--text-leise);
}

.weg-text {
    margin: 0;
    color: var(--text-leise);
    font-size: 0.88rem;
    line-height: 1.45;
}

.weg form {
    margin: 0;
}

/* Kann der Server nicht selbst, steht der Grund zwischen Kopf und Weg -
   nicht als Kleingedrucktes unter einem Knopf, den es gar nicht gibt. */
.weg-gesperrt {
    margin: 0 0 1.1rem 0;
    padding: 0.7rem 0.9rem;
    border-radius: var(--radius);
    background: rgba(251, 146, 60, 0.12);
    border: 1px solid rgba(251, 146, 60, 0.35);
    color: var(--text);
    font-size: 0.9rem;
}

/* --- Demo-Betrieb --------------------------------------------------------
   Der Streifen steht auf jeder Seite ganz oben: Wer erst beim Absenden
   erfaehrt, dass nichts gespeichert wird, haelt den Server fuer kaputt. */
.demo-banner {
    padding: 0.7rem 1rem;
    margin-bottom: 1.2rem;
    border-radius: var(--radius-klein);
    background: rgba(251, 146, 60, 0.14);
    border: 1px solid rgba(251, 146, 60, 0.35);
    color: var(--text);
    font-weight: 600;
    text-align: center;
}

/* Die Testcodes auf den Anmeldeseiten. */
.demo-hinweis {
    padding: 0.8rem 1rem;
    margin-bottom: 1rem;
    border-radius: var(--radius-klein);
    background: rgba(96, 165, 250, 0.12);
    border: 1px solid rgba(96, 165, 250, 0.3);
    text-align: left;
}
.demo-hinweis p { margin: 0 0 0.4rem; }
.demo-hinweis ul { margin: 0; padding-left: 1.1rem; }
.demo-hinweis li { margin-bottom: 0.2rem; }
.demo-hinweis code {
    background: rgba(255, 255, 255, 0.08);
    padding: 0.05rem 0.3rem;
    border-radius: 4px;
}