/*
 * Verwaltungsseite – Aufbau und Bedienung nach dem Vorbild short.io
 * (ANFORDERUNGEN.md, „Gestaltung nach dem Vorbild short.io“).
 * Systemschrift, keine fremden Dateien. Alle Farben hier an einer Stelle.
 */
:root {
  /* Markenprofil qcas (03-medien/qcas/markenprofil.md, Cyan dort noch
   * vorläufig). Was im Profil fehlt, bleibt wie bisher (Michael, 2026-10-05). */
  --akzent: #00aeef;
  --akzent-hover: #11bfff;
  /* Schrift auf Akzentflächen: Schwarz, 8,3:1 */
  --akzent-auf: #000;
  /* Links und Kurzlinks als Text: Cyan wie die Hauptfarbe – nur 2,5:1 auf
   * Weiß, von Michael so entschieden. */
  --akzent-text: #00aeef;
  --akzent-zart: #e3f6fd;

  --text: #000;
  --leise: #5b6470;
  --linie: #e3e7ec;
  --linie-feld: #cfd5dc;
  --grund: #fff;
  /* leicht abgesetzte Flächen: Hover, Marken, Balkenbahn */
  --flaeche: #f4f6f8;
  --karte: #fff;
  --feld: #fff;
  --schatten-feld: 0 1px 2px rgba(16, 24, 40, .08);
  --schatten-karte: 0 1px 3px rgba(16, 24, 40, .06);
  --gut: #1b7a3e;
  --warn: #b45309;
  --fehler: #b3261e;
  --bot: #b45309;
  --bot-zart: #fdf1e3;
  --leiste-breite: 15rem;
  --rund: 10px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --akzent-text: #5cd3ff;
    --akzent-zart: #12313d;
    --text: #e6e9ed;
    --leise: #9aa3ad;
    --linie: #2d3239;
    --linie-feld: #3b424b;
    --grund: #181b20;
    --flaeche: #181b20;
    --karte: #21252b;
    --feld: #1b1e23;
    --schatten-feld: 0 1px 2px rgba(0, 0, 0, .5);
    --schatten-karte: 0 1px 3px rgba(0, 0, 0, .4);
    --gut: #81c995;
    --warn: #fbbf24;
    --fehler: #f28b82;
    --bot: #fbbf24;
    --bot-zart: #3a2c12;
  }
}

* { box-sizing: border-box; }
html { scroll-padding-top: 5rem; }
body {
  margin: 0;
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: var(--grund);
}
a { color: var(--akzent-text); }
h1 { font-size: 1.35rem; margin: 0 0 1rem; }
h2 { font-size: 1.05rem; margin: 0 0 .75rem; }
code, .codes, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
[hidden] { display: none !important; }
.js .nur-ohne-js { display: none; }

/* ─── Seitenleiste ─────────────────────────────────────────────── */
.leiste {
  position: fixed; inset: 0 auto 0 0; width: var(--leiste-breite); z-index: 30;
  display: flex; flex-direction: column; gap: .25rem;
  padding: 1.1rem .75rem; background: var(--karte); border-right: 1px solid var(--linie);
  overflow-y: auto;
}
.leiste .name { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: 1.15rem; padding: 0 .5rem .75rem; color: var(--text); text-decoration: none; }
.leiste .name .sym { color: var(--akzent); width: 1.4rem; height: 1.4rem; }
.leiste .gruppe { margin: .9rem .5rem .3rem; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--leise); }
.leiste nav a {
  display: flex; align-items: center; gap: .65rem; padding: .5rem .6rem; border-radius: 8px;
  color: var(--text); text-decoration: none; font-weight: 500;
}
.leiste nav a:hover { background: var(--flaeche); }
.leiste nav a[aria-current] { background: var(--akzent); color: var(--akzent-auf); font-weight: 600; }
.leiste nav a .sym { width: 1.15rem; height: 1.15rem; flex: none; }
.leiste .fuss { margin-top: auto; padding: .75rem .5rem 0; border-top: 1px solid var(--linie); font-size: .85rem; color: var(--leise); }
.leiste .fuss strong { color: var(--text); }
.leiste .fuss button { margin-top: .4rem; }

.haupt { margin-left: var(--leiste-breite); min-height: 100vh; display: flex; flex-direction: column; }
.ohne-leiste .haupt { margin-left: 0; }

/* ─── Kopfbereich ─────────────────────────────────────────────── */
.kopf {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .7rem 1.5rem; background: var(--karte); border-bottom: 1px solid var(--linie);
}
.kopf .domainwahl select { min-width: 11rem; font-weight: 600; }
.kopf .schnell { flex: 1 1 18rem; display: flex; gap: .5rem; max-width: 40rem; margin: 0 auto; }
.kopf .schnell input { flex: 1; }
.symbolknopf.menue-knopf { display: none; }

main { width: 100%; max-width: 78rem; padding: 1.5rem; flex: 1; }
.ohne-leiste main { max-width: 30rem; margin: 3rem auto 0; }
footer { padding: 1rem 1.5rem 1.5rem; color: var(--leise); font-size: .8rem; }

/* ─── Karten ─────────────────────────────────────────────────── */
.karte {
  background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund);
  box-shadow: var(--schatten-karte); padding: 1.25rem; margin-bottom: 1.25rem;
}
.karte.eng { padding: 0; overflow: hidden; }
.karte-innen { padding: 1rem 1.25rem .25rem; }
.tabellenkopf { margin: 0; }
.karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.25rem; margin-bottom: 1.25rem; }
.karten > .karte { margin: 0; }
.ueberschrift { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--leise); margin: 0 0 .35rem; }
.seitenkopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.seitenkopf h1 { margin: 0; }

/* ─── Formulare ──────────────────────────────────────────────── */
label { display: block; font-weight: 600; font-size: .9rem; margin: .9rem 0 .3rem; }
label.inline { display: inline-flex; gap: .4rem; align-items: center; font-weight: 400; margin: .25rem 1rem .25rem 0; }
input[type=text], input[type=url], input[type=search], select, textarea {
  width: 100%; padding: .5rem .65rem; font: inherit; color: inherit;
  background: var(--feld); border: 1px solid var(--linie-feld); border-radius: 8px;
  box-shadow: var(--schatten-feld);
}
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--akzent); outline-offset: 1px;
}
textarea { min-height: 4rem; }
.zeile { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; }
.zeile > * { flex: 1 1 10rem; }
.zeile > button, .zeile > .knopf { flex: 0 0 auto; }
.zeile label { margin-top: 0; }

button, .knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .5rem 1rem; font: inherit; font-weight: 600; line-height: 1.3;
  color: var(--akzent-auf); background: var(--akzent); border: 1px solid transparent; border-radius: 8px;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
button:hover, .knopf:hover { background: var(--akzent-hover); }
button.leise, .knopf.leise { color: var(--text); background: var(--karte); border-color: var(--linie-feld); }
button.leise:hover, .knopf.leise:hover { background: var(--flaeche); }
button.gefahr { color: #fff; background: var(--fehler); }
button.link { color: var(--akzent-text); background: none; padding: 0; font-weight: 400; border: 0; }
button.gross, .knopf.gross { padding: .7rem 1.4rem; font-size: 1.05rem; }
.sym { width: 1.1rem; height: 1.1rem; flex: none; }
.symbolknopf {
  display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; padding: 0;
  color: var(--leise); background: transparent; border: 1px solid transparent; border-radius: 8px;
}
.symbolknopf:hover { color: var(--akzent-text); background: var(--akzent-zart); }
.symbolknopf.kopiert { color: var(--gut); }
.symbole { display: inline-flex; gap: .1rem; align-items: center; white-space: nowrap; }
.symbole form { display: inline; }
form.inline { display: inline; }
.aktionen { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-top: 1.25rem; }

.hinweis { color: var(--leise); font-size: .85rem; margin: .3rem 0; }
.ok { color: var(--gut); }
.warn { color: var(--warn); }
.fehler { color: var(--fehler); }
.meldung { padding: .65rem .9rem; border-radius: 8px; background: var(--akzent-zart); border-left: 4px solid var(--akzent); margin: 0 0 1rem; }
.meldung.fehler { background: transparent; border: 1px solid var(--fehler); border-left-width: 4px; color: inherit; }
.marke { display: inline-block; font-size: .72rem; line-height: 1.5; padding: 0 .45rem; border-radius: 999px; background: var(--flaeche); border: 1px solid var(--linie-feld); color: var(--leise); font-weight: 600; white-space: nowrap; }
.marke.affiliate { background: var(--bot-zart); border-color: transparent; color: var(--bot); }
.marke.bot { background: var(--bot-zart); border-color: transparent; color: var(--bot); }
.marke.mensch { background: var(--akzent-zart); border-color: transparent; color: var(--akzent-text); }

/* ─── Tabellen ───────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--linie); vertical-align: middle; }
th { font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--leise); }
tr:last-child td { border-bottom: 0; }
td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; }
.kurzlink { color: var(--akzent-text); font-weight: 600; text-decoration: none; overflow-wrap: break-word; }
.kurzlink:hover { text-decoration: underline; }
.ziel { display: block; color: var(--leise); font-size: .8rem; overflow-wrap: anywhere; }
.datum { color: var(--leise); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Kurzlink-Liste: Reiter, Suche, Filter */
.reiterleiste { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 0 1.25rem; border-bottom: 1px solid var(--linie); }
.reiter { display: flex; gap: .25rem; overflow-x: auto; flex: 1 1 auto; }
.reiter a {
  padding: .85rem .6rem .7rem; color: var(--leise); text-decoration: none; font-weight: 600; white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.reiter a:hover { color: var(--text); }
.reiter a[aria-current] { color: var(--text); border-bottom-color: var(--akzent); }
.reiter .anzahl { font-weight: 400; color: var(--leise); margin-left: .2rem; }
.listensuche { display: flex; gap: .5rem; align-items: center; padding: .6rem 0; }
.listensuche input { width: 14rem; }
.filter-auswahl { position: relative; }
.filter-auswahl > summary { list-style: none; cursor: pointer; }
.filter-auswahl > summary::-webkit-details-marker { display: none; }
.filter-auswahl .feld {
  position: absolute; right: 0; top: calc(100% + .4rem); z-index: 15; width: 16rem;
  background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund); box-shadow: 0 8px 24px rgba(16, 24, 40, .14); padding: .25rem 1rem 1rem;
}
.liste-fuss { padding: .75rem 1.25rem; color: var(--leise); font-size: .85rem; border-top: 1px solid var(--linie); }
.liste td.klicks { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.liste td.klicks small { display: block; font-weight: 400; color: var(--leise); font-size: .75rem; white-space: nowrap; }
.liste td.aktionen-zelle { width: 1%; white-space: nowrap; }
.liste td.marken { line-height: 1.9; }
.liste tr.archiviert td { opacity: .65; }
.leer { padding: 2rem 1.25rem; text-align: center; color: var(--leise); }

/* ─── Dialog „Neuer Kurzlink“ ────────────────────────────────── */
dialog {
  width: min(40rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 0;
  color: var(--text); background: var(--karte); border: 1px solid var(--linie); border-radius: 14px;
  box-shadow: 0 20px 50px rgba(16, 24, 40, .25);
}
dialog::backdrop { background: rgba(16, 24, 40, .45); }
dialog[open]:not(:modal) { position: relative; margin: 0 auto 1.25rem; }
.dialogkopf { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--linie); }
.dialogkopf h2 { margin: 0; font-size: 1.15rem; }
.dialoginhalt { padding: .25rem 1.25rem 1.25rem; }
.praefix { display: flex; align-items: stretch; border: 1px solid var(--linie-feld); border-radius: 8px; background: var(--feld); box-shadow: var(--schatten-feld); }
.praefix span { display: flex; align-items: center; padding: 0 .1rem 0 .65rem; color: var(--leise); white-space: nowrap; }
.praefix input { border: 0; box-shadow: none; padding-left: .1rem; }
.praefix select { width: auto; max-width: 55%; border: 0; box-shadow: none; background: transparent; font-weight: 600; padding-right: .2rem; }
.praefix select:focus-visible { outline: none; }
.praefix:focus-within { outline: 2px solid var(--akzent); outline-offset: 1px; }
.praefix input:focus-visible { outline: none; }
.vorschlaege { margin: .5rem 0 .25rem; }
.vorschlag-zeile, .vorschlag-liste { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
button.vorschlag {
  display: inline-block; text-align: left; max-width: 100%;
  padding: .25rem .7rem; font-size: .88rem; font-weight: 600; line-height: 1.4; white-space: normal; overflow-wrap: anywhere;
  color: var(--akzent-text); background: var(--akzent-zart); border: 1px solid transparent; border-radius: 999px;
}
button.vorschlag small { font-size: .7rem; font-weight: 400; color: var(--leise); margin-left: .35rem; white-space: nowrap; }
button.vorschlag:hover, button.vorschlag:focus-visible { border-color: var(--akzent); background: var(--akzent-zart); }
button.neu-vorschlagen { padding: .2rem .55rem; font-size: .8rem; font-weight: 500; }
#ziel-abruf button { margin-right: .5rem; }
.ergebnis { text-align: center; padding-top: 1rem; }
.ergebnis .gross-link { display: block; font-size: 1.35rem; font-weight: 700; color: var(--akzent-text); text-decoration: none; margin: .25rem 0 1rem; overflow-wrap: anywhere; }
.ergebnis .aktionen { justify-content: center; }
.ergebnis .qr svg { width: 11rem; height: 11rem; }

/* ─── Detailansicht ──────────────────────────────────────────── */
.detailkopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.detailkopf .gross-link { font-size: 1.5rem; font-weight: 700; color: var(--akzent-text); text-decoration: none; overflow-wrap: anywhere; }
.detailkopf .unter { color: var(--leise); margin: .25rem 0 0; }
.karte .reiter { margin: 1rem -1.25rem -1.25rem; padding: 0 1.25rem; border-top: 1px solid var(--linie); }
.qr-karte { display: flex; gap: 1.5rem; flex-wrap: wrap-reverse; justify-content: space-between; align-items: flex-start; }
.qr-gross { text-align: center; padding: 1rem; border: 1px solid var(--linie); border-radius: var(--rund); background: #fff; }
.qr-gross svg { width: 16rem; height: 16rem; display: block; }
.qr svg { display: block; margin: 0 auto; }
.kopieren { display: flex; gap: .5rem; }
.kopieren input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.angaben { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; }
.angaben dt { color: var(--leise); }
.angaben dd { margin: 0; overflow-wrap: anywhere; }
form .angaben { margin-top: 1.25rem; }
.codes { columns: 2; background: var(--flaeche); padding: .75rem 1rem; border-radius: 8px; font-size: 1.05rem; }

/* ─── Statistik ──────────────────────────────────────────────── */
.zeitraum { display: inline-flex; border: 1px solid var(--linie-feld); border-radius: 8px; overflow: hidden; background: var(--karte); }
.zeitraum a { padding: .4rem .8rem; color: var(--text); text-decoration: none; font-weight: 600; font-size: .85rem; border-left: 1px solid var(--linie-feld); }
.zeitraum a:first-child { border-left: 0; }
.zeitraum a[aria-current] { background: var(--akzent); color: var(--akzent-auf); }
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.kennzahl { margin: 0; padding: 1rem 1.25rem; }
.kennzahl p { margin: 0; }
.kennzahl .wert { font-size: 1.9rem; font-weight: 700; line-height: 1.3; margin: .2rem 0; font-variant-numeric: tabular-nums; }
.kennzahl .zusatz { color: var(--leise); font-size: .8rem; }
.verlauf svg { width: 100%; height: auto; max-height: 16rem; display: block; }
.verlauf .saeule { fill: var(--akzent); }
.verlauf .saeule:hover { fill: var(--akzent-hover); }
.verlauf .achse { stroke: var(--linie); }
.verlauf text { fill: var(--leise); font-size: 13px; }
.balkenliste { list-style: none; margin: 0; padding: 0; }
.balkenliste li { display: grid; grid-template-columns: 1fr auto; gap: .1rem .75rem; padding: .35rem 0; align-items: center; }
.balkenliste .name { overflow-wrap: anywhere; font-size: .9rem; }
.balkenliste .zahl { font-weight: 600; font-variant-numeric: tabular-nums; }
.balkenliste svg { grid-column: 1 / -1; width: 100%; height: 6px; display: block; }
.balkenliste .bahn { fill: var(--flaeche); }
.balkenliste .balken { fill: var(--akzent); }
.balkenliste.bots .balken { fill: var(--bot); }

/* ─── Klickverlauf ───────────────────────────────────────────── */
.flagge { font-size: 1.1rem; }
td .marke + .quelle { margin-left: .35rem; color: var(--leise); font-size: .8rem; }

/* ─── Domains ────────────────────────────────────────────────── */
.domainkarte .detailkopf h2 { font-size: 1.2rem; margin: 0; }
.domainkarte .angaben { margin-top: .75rem; grid-template-columns: 1fr; gap: 0; }
.domainkarte .angaben dt { font-size: .8rem; margin-top: .5rem; }
.domainen { grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); align-items: start; }
.domainkarte details > summary { list-style: none; display: inline-flex; margin-top: 1rem; }
.domainkarte details > summary::-webkit-details-marker { display: none; }
.domainkarte details[open] > summary { margin-bottom: .25rem; }
details.neu-domain > summary { list-style: none; display: inline-flex; }
details.neu-domain > summary::-webkit-details-marker { display: none; }

/* ─── Handy ──────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .leiste { transform: translateX(-100%); transition: transform .15s ease-out; box-shadow: 0 0 40px rgba(16, 24, 40, .25); }
  body.menue-offen .leiste { transform: none; }
  .haupt { margin-left: 0; }
  .symbolknopf.menue-knopf { display: inline-flex; }
  .kopf { padding: .6rem 1rem; gap: .5rem; }
  .kopf .domainwahl { flex: 1 1 auto; }
  .kopf .domainwahl select { min-width: 0; }
  .kopf .schnell { order: 3; flex-basis: 100%; }
  main { padding: 1rem; }
  .kennzahlen { grid-template-columns: 1fr 1fr; gap: .75rem; }
  .kennzahl { padding: .8rem 1rem; }
  .kennzahl .wert { font-size: 1.5rem; }
  .listensuche input { width: 100%; }
  .listensuche { flex: 1 1 100%; }
  /* Liste als gestapelte Zeilen */
  .liste thead { display: none; }
  .liste tr { display: grid; grid-template-columns: 1fr auto; gap: .15rem .75rem; padding: .75rem 1rem; border-bottom: 1px solid var(--linie); }
  .liste td { display: block; padding: 0; border: 0; }
  .liste td.datum { grid-column: 1; grid-row: 1; font-size: .78rem; }
  .liste td.link { grid-column: 1 / -1; }
  .liste td.titel { grid-column: 1 / -1; }
  .liste td.klicks { grid-column: 2; grid-row: 1; }
  .liste td.marken { grid-column: 1; }
  .liste td.aktionen-zelle { grid-column: 2; justify-self: end; width: auto; }
  .tabelle-rollen { overflow-x: auto; }
}
@media (prefers-reduced-motion: reduce) { .leiste { transition: none; } }