/* DropzoneCut Cloud – schlankes Stylesheet für Cockpit, Admin und Medienseite.
   Ziel: auf einem 13"-Tablet (≈1280×800) ist alles Wichtige ohne Scrollen sichtbar;
   Listen scrollen innerhalb ihres Bereichs. */

:root {
  --bg: #f4f6f8; --flaeche: #ffffff; --text: #1d2530; --leise: #5c6773; --linie: #d9dee4;
  --akzent: #0b6bcb; --akzent-dunkel: #094f96; --ok: #1a7f37; --warn: #b54708; --fehler: #b42318;
  --radius: 8px; --schatten: 0 1px 2px rgba(16, 24, 40, .08);
  font-size: 15px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); line-height: 1.4; }
a { color: var(--akzent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.35rem; margin: 0 0 .6rem; }
h2 { font-size: 1.05rem; margin: 0 0 .5rem; }
small, .leise { color: var(--leise); }
code { background: #eef1f4; padding: .1em .35em; border-radius: 4px; font-size: .9em; }

/* Kopfzeile */
.kopf { display: flex; align-items: center; gap: 1rem; padding: .45rem 1rem; background: var(--flaeche); border-bottom: 1px solid var(--linie); position: sticky; top: 0; z-index: 5; }
.marke a { font-weight: 700; color: var(--text); }
.marke span { color: var(--akzent); }
.marke small { margin-left: .5rem; }
.nav { display: flex; gap: .15rem; flex-wrap: wrap; flex: 1; }
.nav a { padding: .35rem .6rem; border-radius: 6px; color: var(--text); }
.nav a.aktiv, .nav a:hover { background: #e8f0fb; color: var(--akzent-dunkel); text-decoration: none; }
.abmelden { display: flex; align-items: center; gap: .5rem; margin: 0; }
.abmelden .wer { font-size: .85rem; color: var(--leise); }

.inhalt { padding: .8rem 1rem 1.2rem; max-width: 1400px; margin: 0 auto; }

/* Karten & Hinweise */
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: .8rem 1rem; box-shadow: var(--schatten); }
.karte + .karte { margin-top: .8rem; }
.hinweis { padding: .5rem .8rem; border-radius: 6px; margin-bottom: .6rem; }
.hinweis.ok { background: #e6f4ea; color: var(--ok); }
.hinweis.fehler { background: #fde8e8; color: var(--fehler); }
.hinweis.warn { background: #fff3e0; color: var(--warn); }

/* Formulare */
label { font-size: .85rem; color: var(--leise); display: block; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=tel], input[type=file], select, textarea {
  width: 100%; padding: .4rem .5rem; border: 1px solid var(--linie); border-radius: 6px; font: inherit; background: #fff; color: var(--text);
}
input:focus, select:focus, textarea:focus { outline: 2px solid #bcd7f5; border-color: var(--akzent); }
.zeile { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; }
.zeile > * { flex: 1 1 140px; min-width: 0; }
.zeile > .kurz { flex: 0 1 110px; }
.zeile > .fest { flex: 0 0 auto; }
.feld { margin-bottom: .55rem; }
.knopf { display: inline-block; padding: .42rem .8rem; border: 1px solid var(--akzent); background: var(--akzent); color: #fff; border-radius: 6px; font: inherit; cursor: pointer; white-space: nowrap; }
.knopf:hover { background: var(--akzent-dunkel); }
.knopf.leise { background: #fff; color: var(--text); border-color: var(--linie); }
.knopf.leise:hover { background: #f0f3f6; }
.knopf.klein { padding: .2rem .5rem; font-size: .85rem; }
.knopf.gefahr { background: #fff; color: var(--fehler); border-color: #f1b8b4; }
.knopf.gefahr:hover { background: #fde8e8; }
.knopf.ok { background: var(--ok); border-color: var(--ok); }
.knopf:disabled { opacity: .5; cursor: default; }
.aktionen { display: flex; gap: .3rem; flex-wrap: wrap; }

/* Tabellen */
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: .4rem .5rem; border-bottom: 1px solid var(--linie); vertical-align: middle; }
th { font-weight: 600; color: var(--leise); font-size: .8rem; text-transform: uppercase; letter-spacing: .02em; position: sticky; top: 0; background: var(--flaeche); }
tr:hover td { background: #f7f9fb; }
td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; }
.scrollbereich { overflow: auto; max-height: calc(100vh - 235px); border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); }

/* Abzeichen */
.abz { display: inline-block; padding: .1rem .45rem; border-radius: 999px; font-size: .78rem; background: #eef1f4; color: var(--text); }
.abz.video { background: #e8f0fb; color: var(--akzent-dunkel); }
.abz.foto { background: #f3e8fb; color: #6b21a8; }
.abz.komplett { background: #e6f4ea; color: var(--ok); }
.abz.frei { background: #e6f4ea; color: var(--ok); }
.abz.warn { background: #fff3e0; color: var(--warn); }
.abz.grau { color: var(--leise); }

/* Kopfbereich der Tagesliste */
.tagkopf { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; margin-bottom: .6rem; }
.guthaben-abz { font-size: 1.05rem; font-weight: 600; padding: .3rem .7rem; border-radius: 6px; background: #e8f0fb; color: var(--akzent-dunkel); }
.guthaben-abz.knapp { background: #fff3e0; color: var(--warn); }

/* Dialog (HTMX lädt das Formular in #dialog) */
#dialog:empty { display: none; }
.dialog-hintergrund { position: fixed; inset: 0; background: rgba(16, 24, 40, .45); display: flex; align-items: center; justify-content: center; z-index: 20; padding: 1rem; }
.dialog { background: var(--flaeche); border-radius: var(--radius); padding: 1rem 1.2rem; width: min(680px, 100%); max-height: 95vh; overflow: auto; box-shadow: 0 10px 30px rgba(16, 24, 40, .25); }

/* Anmeldeseiten */
.mitte { max-width: 420px; margin: 8vh auto; }
.mitte h1 { text-align: center; }

.grosszahl { font-size: 2rem; font-weight: 700; }
.token-box { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: #fff8e1; border: 1px dashed var(--warn); padding: .6rem .8rem; border-radius: 6px; word-break: break-all; }

/* Medienseite (Gäste, mobil zuerst) */
body.medien { background: #0f1720; color: #e8eef5; }
.medien .inhalt { max-width: 720px; padding: 1rem; }
.medien-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .8rem; }
.medien-kopf h1 { color: #fff; font-size: 1.3rem; }
.medien .sprachen a { color: #9fb3c8; margin-left: .5rem; }
.medien .sprachen a.aktiv { color: #fff; font-weight: 600; }
.medium { background: #18232f; border: 1px solid #263340; border-radius: 10px; padding: .9rem; margin-bottom: .8rem; }
.medium h2 { color: #fff; display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.medium video { width: 100%; border-radius: 8px; background: #000; margin: .4rem 0; }
.medium .gesperrt { color: #9fb3c8; }
.medien .knopf { background: #2f81f7; border-color: #2f81f7; }
.medien .knopf.leise { background: transparent; color: #cfe0f5; border-color: #3a4b5e; }
.medien .hinweis.ok { background: #143d24; color: #9ee2b2; }
.medien .hinweis.warn { background: #3d2a12; color: #f6c98b; }
.medien .fuss { color: #7f93a8; font-size: .85rem; margin-top: 1rem; }

@media (max-width: 800px) {
  .kopf { flex-wrap: wrap; }
  .tagkopf { grid-template-columns: 1fr; }
  .scrollbereich { max-height: none; }
}