/* ===========================================================================
   Anderheyden Secret Pusher – Gestaltung.

   Farbwelt, Topbar, Karten und Knöpfe folgen dem eCharge-Manager, damit sich
   beide Anwendungen gleich anfühlen. Übernommen ist nur die Optik – die
   Anwendung bleibt eigenständig.

   Eigen ist hier die Ampel der Verfallszustände: Grün, solange ein Link offen
   ist, Gelb bei angebrochenen Abrufen, Rot beim Vernichten. Farbe erscheint
   nur dort, wo sie etwas aussagt.

   Keine externen Schriften, keine CDN-Aufrufe: die Anwendung läuft unter
   einer strengen CSP und soll nichts nachladen.
   =========================================================================== */

:root {
  --bg:#0b1120; --bg2:#131c31; --card:#16203a; --card2:#1d2a47;
  --ink:#e2e8f0; --muted:#94a3b8; --line:#2b3a58;
  --accent:#38bdf8; --accent2:#22d3ee;
  --good:#34d399; --warn:#fbbf24; --bad:#f87171;
  --grad:linear-gradient(135deg,#38bdf8,#34d399);
  --radius:14px;
  --topbar-h:3.75rem;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}

* { box-sizing:border-box }
html,body { margin:0; padding:0 }

body {
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(52,211,153,.10), transparent 60%),
    radial-gradient(900px 520px at -10% -5%, rgba(56,189,248,.14), transparent 60%),
    linear-gradient(180deg,#0d1526 0%, var(--bg) 45%);
  background-attachment:fixed;
  color:var(--ink); line-height:1.55; min-height:100vh;
}

a { color:var(--accent); text-decoration:none }
a:hover { text-decoration:underline }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:4px }

h1 {
  font-size:1.5rem; margin:.2rem 0 .6rem;
  background:linear-gradient(90deg,#e2e8f0,#7dd3fc);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
h2 { font-size:1.15rem; margin:.2rem 0 .8rem }
h3, h2.sub { font-size:1rem; margin:1.8rem 0 .6rem; font-weight:600 }
.muted, .dim { color:var(--muted) }

/* --- Topbar --------------------------------------------------------------
   backdrop-filter liegt auf ::before, nicht auf .topbar selbst. Sonst wird
   die Topbar zum Bezugsrahmen für fest positionierte Kinder und klemmt die
   mobile Schublade auf Kopfzeilenhöhe ein. Derselbe Grund wie im
   eCharge-Manager – die Falle soll hier nicht neu entdeckt werden. */

.topbar { background:transparent; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:60 }
.topbar::before {
  content:""; position:absolute; inset:0; z-index:-1; background:rgba(15,23,42,.86);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.topbar::after { content:""; display:block; height:2px; background:var(--grad); opacity:.65 }
.topbar-inner { display:flex; align-items:center; gap:.6rem; padding:.55rem .9rem; max-width:1280px; margin:0 auto }

.brand { font-weight:700; font-size:1.05rem; color:var(--ink); white-space:nowrap; display:flex; align-items:center; gap:.5rem }
.brand:hover { text-decoration:none }
.brand span.leicht { font-weight:400; color:var(--muted) }
.brandlogo {
  width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  background:var(--card2); border:1px solid var(--line); color:var(--accent); flex:none;
}
.claim { color:var(--muted); font-size:.85rem; margin-left:.4rem }

.burger { display:none; flex-direction:column; gap:4px; background:transparent; border:0; cursor:pointer; padding:.35rem; border-radius:8px }
.burger span { width:22px; height:2px; background:var(--ink); border-radius:2px; transition:.25s }
.burger[aria-expanded=true] span:nth-child(1) { transform:translateY(6px) rotate(45deg) }
.burger[aria-expanded=true] span:nth-child(2) { opacity:0 }
.burger[aria-expanded=true] span:nth-child(3) { transform:translateY(-6px) rotate(-45deg) }

.profile { position:relative; margin-left:auto }
.profile-btn {
  display:inline-flex; align-items:center; gap:.45rem; background:var(--card2); border:1px solid var(--line);
  border-radius:999px; padding:.25rem .6rem .25rem .3rem; color:var(--ink); cursor:pointer; font-size:.9rem;
}
.profile-btn:hover { border-color:var(--accent) }
.avatar {
  width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#04293a; font-weight:800; display:flex; align-items:center; justify-content:center; font-size:.95rem;
}
.caret { color:var(--muted); font-size:.8rem }
.profile-menu {
  position:absolute; right:0; top:calc(100% + .4rem); min-width:200px; background:var(--card);
  border:1px solid var(--line); border-radius:12px; box-shadow:0 14px 40px rgba(0,0,0,.5); padding:.4rem;
  display:none; flex-direction:column; gap:.15rem; z-index:60;
}
.profile-menu.open { display:flex }
.pm-head { padding:.5rem .6rem; border-bottom:1px solid var(--line); margin-bottom:.2rem; font-size:.9rem }
.pm-item { display:block; text-align:left; width:100%; background:transparent; border:0; color:var(--ink);
  padding:.55rem .6rem; border-radius:8px; font-size:.92rem; cursor:pointer; font-family:inherit }
.pm-item:hover { background:var(--card2); text-decoration:none }

/* --- Gerüst -------------------------------------------------------------- */

.shell { display:flex; align-items:flex-start; gap:1.2rem; max-width:1280px; margin:0 auto }

.mainnav {
  display:flex; flex-direction:column; gap:.1rem; flex:0 0 232px; width:232px;
  position:sticky; top:var(--topbar-h); max-height:calc(100vh - 4.4rem);
  overflow-y:auto; padding:1.2rem .5rem 1rem;
}
.mainnav a { display:flex; align-items:flex-start; gap:.5rem; color:var(--muted); font-size:.92rem;
  padding:.45rem .6rem; border-radius:8px; line-height:1.3 }
.mainnav a .ic { width:1.4rem; text-align:center; flex:0 0 auto }
.mainnav a:hover { color:var(--ink); background:var(--card2); text-decoration:none }
.mainnav a.active { color:var(--ink); font-weight:600;
  background:linear-gradient(90deg,rgba(56,189,248,.22),rgba(52,211,153,.16)) }
.navgruppe { font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
  opacity:.75; padding:.9rem .65rem .25rem }
.navgruppe:first-child { padding-top:.2rem }
.navscrim { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:50 }
.navscrim.show { display:block }

.wrap { flex:1 1 auto; min-width:0; max-width:780px; margin:0 auto; padding:1.5rem 1rem 3rem }
.wrap--breit { max-width:1000px }
.lede { color:var(--muted); margin:0 0 1.8rem; max-width:62ch }
.foot { text-align:center; color:var(--muted); padding:1.5rem 1rem 2.5rem; font-size:.82rem;
  display:flex; flex-wrap:wrap; gap:.3rem 1.2rem; justify-content:center }

/* --- Karten und Tafeln ---------------------------------------------------- */

.panel {
  background:linear-gradient(165deg,rgba(56,189,248,.05) 0%,transparent 30%),var(--card);
  border:1px solid var(--line); border-radius:var(--radius); padding:1.1rem;
  box-shadow:0 10px 30px rgba(2,8,23,.30);
}

.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.8rem; margin:0 0 1.8rem }
.card {
  background:linear-gradient(160deg,var(--card2) 0%,var(--card) 55%);
  border:1px solid var(--line); border-radius:var(--radius); padding:.85rem 1rem;
  box-shadow:0 8px 24px rgba(2,8,23,.35);
}
.card-label { color:var(--muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.05em }
.card-value { font-size:1.6rem; font-weight:700; margin-top:.2rem; font-variant-numeric:tabular-nums }

/* --- Formular ------------------------------------------------------------- */

.field { margin-bottom:1.6rem }
.field > label, .legend { display:block; margin:0 0 .45rem; font-size:.9rem; color:var(--muted) }

textarea, input[type=text], input[type=password], input[type=number], select {
  width:100%; padding:.65rem .75rem; background:var(--bg); color:var(--ink);
  border:1px solid var(--line); border-radius:9px; font-size:1rem; font-family:inherit;
}
textarea { min-height:9.5rem; resize:vertical; display:block; font-family:var(--mono); font-size:.95rem; line-height:1.55 }
textarea:focus, input:focus, select:focus { outline:2px solid var(--accent); border-color:var(--accent) }
::placeholder { color:var(--muted); opacity:.75 }

.counter { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-top:.5rem;
  font-size:.82rem; color:var(--muted) }
.counter b { font-family:var(--mono); font-weight:600 }
.counter--over b { color:var(--bad) }

.drop {
  border:2px dashed var(--line); border-radius:var(--radius); background:var(--card);
  padding:1.3rem 1rem; text-align:center; color:var(--muted); font-size:.92rem; cursor:pointer;
  transition:border-color .2s ease, background .2s ease;
}
.drop:hover, .drop.is-over { border-color:var(--accent); background:var(--card2) }
.drop b { color:var(--ink); font-weight:600 }
.drop input[type=file] { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none }

.filelist { list-style:none; margin:.7rem 0 0; padding:0; display:grid; gap:.4rem }
.filelist li { display:flex; align-items:center; gap:.75rem; background:var(--card); border:1px solid var(--line);
  border-radius:10px; padding:.5rem .75rem; font-size:.88rem }
.filelist .name { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--mono) }
.filelist .size { color:var(--muted); font-variant-numeric:tabular-nums }
.filelist .drop-one { border:0; background:none; padding:.1rem .3rem; cursor:pointer; color:var(--muted);
  font:inherit; line-height:1; border-radius:4px }
.filelist .drop-one:hover { color:var(--bad) }

.dials { display:grid; gap:1.1rem }
.dial { display:grid; grid-template-columns:1fr auto; align-items:center; gap:.3rem 1rem }
.dial label { font-size:.9rem; color:var(--muted) }
.dial output { font-family:var(--mono); font-size:.95rem; font-variant-numeric:tabular-nums;
  color:var(--accent); justify-self:end; font-weight:600 }
.dial input[type=range] { grid-column:1/-1; width:100%; margin:0; accent-color:var(--accent) }

.checks { display:grid; gap:1rem }
.check { display:grid; grid-template-columns:auto 1fr; gap:.15rem .6rem }
.check input { margin:.3rem 0 0; accent-color:var(--accent); width:1rem; height:1rem }
.check label { font-size:.92rem }
.check .hint { grid-column:2; margin:0 }

.hint { margin:.4rem 0 0; color:var(--muted); font-size:.82rem; line-height:1.5; max-width:66ch }
.hint code, code { background:var(--bg); border:1px solid var(--line); border-radius:5px;
  padding:.05rem .3rem; font-size:.85em; font-family:var(--mono) }

details.extra > summary { cursor:pointer; font-size:.92rem; padding:.3rem 0; list-style:none; color:var(--accent) }
details.extra > summary::-webkit-details-marker { display:none }
details.extra > summary::before { content:"+"; display:inline-block; width:1.1rem; font-family:var(--mono) }
details.extra[open] > summary::before { content:"–" }
details.extra > div { padding:.8rem 0 0 1.1rem }

.rule { border:0; border-top:1px solid var(--line); margin:1.8rem 0 }
.remember { margin-top:1.2rem }
.remember label { display:inline-flex; align-items:center; gap:.45rem; cursor:pointer }
.remember input { accent-color:var(--accent); margin:0 }

/* --- Knöpfe --------------------------------------------------------------- */

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  background:var(--grad); color:#04293a; border:0; border-radius:9px;
  padding:.6rem 1.1rem; font:700 .95rem/1.2 inherit; cursor:pointer;
  box-shadow:0 4px 14px rgba(56,189,248,.25);
  transition:filter .15s ease, transform .15s ease; text-decoration:none;
}
.btn:hover { filter:brightness(1.08); transform:translateY(-1px); text-decoration:none; color:#04293a }
.btn:active { transform:translateY(0) }
.btn[disabled] { opacity:.45; cursor:default; transform:none; filter:none }
.btn--off, .btn { }
.btn--off { background:transparent; color:var(--ink); border:1px solid var(--line); box-shadow:none }
.btn--off:hover { border-color:var(--accent); color:var(--ink) }
.btn--burn { background:linear-gradient(135deg,#f87171,#fb923c); color:#3a0a0a; box-shadow:0 4px 14px rgba(248,113,113,.25) }
.btn--burn:hover { color:#3a0a0a }
.btn--mini { padding:.32rem .7rem; font-size:.82rem; box-shadow:none }
.btn--wide { width:100%; padding-block:.8rem; font-size:1rem }
.actions { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center }
.actions form { margin:0 }

/* --- Fortschritt und Meldungen -------------------------------------------- */

.progress { margin-top:1rem; display:none }
.progress.is-on { display:block }
.progress__track { height:5px; background:var(--card2); border-radius:99px; overflow:hidden }
.progress__bar { height:100%; width:0; background:var(--grad); transition:width .15s linear }
.progress__label { margin:.5rem 0 0; font-size:.82rem; color:var(--muted); font-variant-numeric:tabular-nums }

.note {
  border-left:3px solid var(--line); padding:.7rem 0 .7rem .9rem; margin:0 0 1.6rem;
  font-size:.92rem; color:var(--muted); background:var(--card); border-radius:0 10px 10px 0;
}
.note--bad { border-left-color:var(--bad); color:var(--ink) }
.note--warn { border-left-color:var(--warn); color:var(--ink) }

.toast {
  position:fixed; left:50%; bottom:1.4rem; transform:translate(-50%,2rem); opacity:0; pointer-events:none;
  background:var(--card2); border:1px solid var(--line); color:var(--ink); padding:.7rem 1.1rem;
  border-radius:999px; box-shadow:0 12px 34px rgba(2,8,23,.5); font-size:.9rem; z-index:80;
  transition:opacity .25s ease, transform .25s ease; max-width:90vw; text-align:center;
}
.toast.show { opacity:1; transform:translate(-50%,0) }
.toast.stoerung { border-color:rgba(248,113,113,.5); color:#fecaca }

/* --- Der fertige Link ------------------------------------------------------ */

.linkbox { display:flex; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--bg) }
.linkbox input { border:0; border-radius:0; background:transparent; font-family:var(--mono); font-size:.88rem; min-width:0 }
.linkbox input:focus { outline-offset:-2px }
.linkbox .btn { border-radius:0; box-shadow:none; flex:0 0 auto }

.stamp { border:1px solid var(--line); border-radius:12px; padding:.5rem; background:#fff; line-height:0; flex:0 0 auto }
.stamp svg { width:8.5rem; height:auto; display:block }
.slip__body { display:flex; gap:1.4rem; align-items:flex-start; flex-wrap:wrap }
.slip__body > div:first-child { flex:1 1 18rem; min-width:0 }

/* --- Geheimnis -------------------------------------------------------------- */

.veil { position:relative; margin-bottom:1.2rem }
.veil__content {
  background:var(--bg); border:1px solid var(--line); border-radius:var(--radius); padding:1.1rem;
  font:.95rem/1.65 var(--mono); white-space:pre-wrap; word-break:break-word; margin:0; min-height:3.5rem;
}
.veil.is-hidden .veil__content { filter:blur(8px); user-select:none }
.veil__reveal { position:absolute; inset:0; width:100%; border:0; background:transparent; cursor:pointer;
  font:600 .95rem inherit; color:var(--ink); border-radius:var(--radius) }
.veil:not(.is-hidden) .veil__reveal { display:none }

.files { list-style:none; margin:1.2rem 0 0; padding:0; display:grid; gap:.5rem }
.files li { display:flex; align-items:center; gap:.9rem; background:var(--card); border:1px solid var(--line);
  border-radius:10px; padding:.65rem .85rem }
.files .name { flex:1 1 auto; min-width:0; font-family:var(--mono); font-size:.88rem; overflow-wrap:anywhere }
.files .size { color:var(--muted); font-size:.82rem; font-variant-numeric:tabular-nums; white-space:nowrap }

.tally { margin:1.8rem 0 0; padding-top:1.2rem; border-top:1px solid var(--line); color:var(--muted); font-size:.92rem }
.tally b { color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums }

/* --- Zustandsmarken --------------------------------------------------------- */

.state { white-space:nowrap; font-size:.85rem }
.state::before { content:""; display:inline-block; width:.55rem; height:.55rem; margin-right:.45rem;
  border-radius:50%; background:var(--muted); vertical-align:.05em }
.state--offen::before { background:var(--good); box-shadow:0 0 8px rgba(52,211,153,.6) }
.state--teilweise-abgerufen::before { background:var(--warn) }
.state--abgerufen::before, .state--abgelaufen::before { background:var(--muted) }
.state--gelöscht::before { background:var(--bad) }

.marke { display:inline-block; font-size:.7rem; font-weight:700; padding:.1rem .55rem; border-radius:999px;
  background:rgba(148,163,184,.15); color:var(--muted); vertical-align:1px }
.tag { display:inline-block; margin-left:.4rem; padding:.05rem .45rem; border-radius:999px; font-size:.68rem;
  background:rgba(56,189,248,.16); color:var(--accent); border:1px solid rgba(56,189,248,.35) }

/* --- Verwaltung ------------------------------------------------------------- */

.admin-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.4rem }
.admin-head h1 { margin:0 }
.admin-head form { margin:0 }

.filterbar { display:flex; gap:.5rem; margin-bottom:1.2rem; flex-wrap:wrap }
.filterbar input[type=text] { flex:1 1 12rem; font-family:inherit }
.filterbar .btn { flex:0 0 auto }

.tablewrap { overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--card) }
.grid { border-collapse:collapse; width:100%; font-size:.87rem }
.grid th, .grid td { padding:.6rem .75rem; text-align:left; border-bottom:1px solid var(--line) }
.grid thead th { background:var(--card2); font-weight:600; font-size:.78rem; color:var(--muted);
  white-space:nowrap; text-transform:uppercase; letter-spacing:.04em }
.grid tbody tr:last-child td { border-bottom:0 }
.grid tbody tr:hover td { background:var(--card2) }
.grid .num { font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap }
.grid .pick { width:2.2rem }
.grid .pick input { accent-color:var(--accent); margin:0 }
.grid .note-cell { min-width:12rem }

.tablefoot { display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; margin-top:1rem }
.pager { display:flex; gap:.35rem; margin-top:1rem; flex-wrap:wrap }
.pager a, .pager__now { display:inline-block; min-width:2rem; padding:.3rem .5rem; text-align:center;
  border:1px solid var(--line); border-radius:8px; font-family:var(--mono); font-size:.82rem; text-decoration:none }
.pager__now { background:var(--grad); color:#04293a; border-color:transparent; font-weight:700 }

.facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); gap:.6rem; margin:0 0 1rem }
.facts > div { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:.7rem .9rem }
.facts dt { color:var(--muted); font-size:.73rem; text-transform:uppercase; letter-spacing:.04em; margin-bottom:.15rem }
.facts dd { margin:0; font-size:.92rem }

.liste { display:grid; gap:.6rem }
.leer { color:var(--muted) }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
  clip-path:inset(50%); white-space:nowrap }
.slip-actions { margin-top:1.5rem }

/* --- Schmale Anzeigen -------------------------------------------------------- */

@media (max-width:980px) {
  .burger { display:flex }
  .claim { display:none }
  .shell { display:block }
  .mainnav {
    position:fixed; top:calc(var(--topbar-h) + env(safe-area-inset-top,0px)); left:0; bottom:0;
    width:80vw; max-width:300px; flex:0 0 auto; background:var(--bg2); border-right:1px solid var(--line);
    max-height:none; padding:.9rem .6rem calc(1.5rem + env(safe-area-inset-bottom,0px));
    transform:translateX(-100%); transition:transform .28s ease; z-index:50; overflow-y:auto;
  }
  .mainnav.open { transform:translateX(0) }
  .mainnav a { font-size:1rem; padding:.7rem }
}
@media (max-width:560px) {
  .wrap { padding:1.2rem .8rem 3rem }
  .cards { grid-template-columns:repeat(2,1fr) }
  .slip__body { flex-direction:column }
  .actions .btn, .slip-actions .btn { width:100% }
}
@media (prefers-reduced-motion:reduce) { * { transition:none !important } }

/* --- Druck --------------------------------------------------------------------
   Der Übergabeschein soll auf Papier lesbar sein, nicht dunkel. */

@media print {
  body { background:#fff; color:#000 }
  .topbar, .mainnav, .foot, .toast, .no-print { display:none !important }
  .wrap { max-width:none; padding:0 }
  .panel, .veil__content, .stamp { background:#fff; border-color:#666; color:#000; box-shadow:none }
  h1 { -webkit-text-fill-color:#000; color:#000 }
  .hint, .muted, .tally { color:#333 }
}