/* =====================================================================
   igtracker Panel — Design-System
   Stil: Data-Dense Dashboard (dunkel), abgeleitet aus ui-ux-pro-max.
   Dichte Spacing-Skala (8–32px), Bewegung dezent (150–250ms),
   Fokus immer sichtbar, keine Emoji als Icons (siehe /static/js/icons.js).
   ===================================================================== */

:root {
  /* Flächen — tiefes Indigo statt Neutralgrau. Der Ton kommt aus der
     Referenz (dashboard.png) und traegt die blauen Charts besser. */
  --bg: #0b0f1e;
  /* Derselbe Ton mit Deckkraft 0 — fuer Verlaeufe, die in die Flaeche
     auslaufen. Das Schluesselwort transparent blendet ueber Schwarz und
     hinterliesse dabei einen dunklen Saum. */
  --bg-fade: rgba(11, 15, 30, 0);
  --bg-elevated: #151c31;
  --card: #131a2e;
  --card-hover: #1a2236;
  --border: rgba(255, 255, 255, 0.07);
  --border-light: rgba(255, 255, 255, 0.13);

  /* Text — beide Stufen bleiben WCAG-AA gegen --card. */
  --text: #f8fafc;
  --muted: #cbd5e1;
  --muted-2: #94a3b8;

  --accent: #6366f1;
  --accent-hover: #4f46e5;
  --accent-soft: rgba(99, 102, 241, 0.14);
  --accent-2: #a78bfa;
  /* --accent traegt Flaechen; als Schrift auf --card kaeme es nur auf 3.9:1,
     deshalb fuer Links, Icons und Badges der hellere Ton. */
  --accent-text: #a5b4fc;
  /* Das Neonblau aus dem Logo — ausschliesslich fuer die Marke. */
  --brand: #38bdf8;
  --green: #22c55e;
  --green-soft: rgba(34, 197, 94, 0.14);
  --red: #ef4444;
  --red-soft: rgba(239, 68, 68, 0.14);
  /* --red auf --red-soft kommt nur auf 4.0:1 — fuer die kleine Schrift in
     den Delta-Pillen zu wenig, deshalb ein hellerer Ton fuer Text. */
  --red-text: #f87171;
  --orange: #f59e0b;
  --orange-soft: rgba(245, 158, 11, 0.14);
  --purple: #a855f7;
  --purple-soft: rgba(168, 85, 247, 0.14);

  /* Diagrammfarben — einmal hier, damit JS sie ueber cssVar() liest statt
     dieselben Hexwerte ein zweites Mal zu pflegen. */
  --chart-1: #6366f1;
  --chart-2: #a78bfa;
  --chart-3: #38bdf8;
  --chart-4: #f59e0b;
  --chart-5: #ec4899;
  --chart-6: #22c55e;
  --chart-rest: #475569;

  /* Abstände: dichte Skala für Dashboards */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.32);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.45);

  --ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
  --transition: 160ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Fuer Flaechen, die oben noch als feste Werte standen */
  --card-end: #10162a;
  --card-sheen: rgba(148, 163, 184, 0.22);
  --row-border: rgba(30, 38, 57, 0.7);
  --border-hover: #3d4a68;
  --hover-tint: rgba(148, 163, 184, 0.08);
  --placeholder: #64748b;
  --scrim: rgba(2, 6, 23, 0.72);
  --scrim-soft: rgba(11, 15, 30, 0.72);
  --sunken: rgba(21, 28, 49, 0.55);
  --nav-bg: rgba(21, 28, 49, 0.7);
  --nav-active-text: #ffffff;
  --item-open: #172038;
  --track: #26304a;
  --knob-off: #cbd5e1;
  --swatch-border: rgba(255, 255, 255, 0.18);
  --scroll-hover: rgba(255, 255, 255, 0.22);
  --cal-disabled: #3f4a63;
  --orange-text: #fbbf24;
  --green-text: #4ade80;
  --scheme: dark;

  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Sanfter Farbverlauf oben — nimmt der Fläche die Härte, ohne zu stören */
body::before {
  content: '';
  position: fixed;
  inset: 0 0 auto 0;
  height: 320px;
  background: radial-gradient(120% 100% at 50% 0%, rgba(99, 102, 241, 0.10) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

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

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--scroll-hover); }

:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-sm);
}

.layout {
  max-width: 1560px;
  margin: 0 auto;
  padding: var(--sp-4) var(--sp-5) 72px;
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------------------------
   Ladesequenz (siehe /static/js/splash.js)
   --------------------------------------------------------------------- */
.splash {
  position: fixed; inset: 0; z-index: 9000;
  display: grid; place-items: center;
  /* Derselbe Ton wie die Seitenflaeche: waehrend das Video noch dekodiert
     und waehrend es ausblendet, steht nie eine fremde Farbe im Bild. */
  /* Die Sequenz ist auf dunklen Grund gerendert — sie bleibt auch im hellen
     Modus dunkel, sonst stuende das Video als Rechteck auf der Flaeche. */
  --bg: #0b0f1e;
  --bg-fade: rgba(11, 15, 30, 0);
  background: var(--bg);
  overflow: hidden;
  transition: opacity 560ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Die Vorlage ist 1280x720 und wird als 1920er Datei ausgeliefert. Ueber
   diese Breite hinaus formatfuellend gezogen wird sie matschig, deshalb
   waechst die Sequenz nur bis dorthin und steht sonst mittig.

   Die Kante des Videos darf dabei nicht zu sehen sein, und das ist kniffliger
   als es klingt: derselbe Farbwert kommt aus dem Video um einen Zaehlwert
   dunkler heraus als aus CSS (YUV rundet). Gemessen ist der Videorand damit
   die staerkste gerade Kante im ganzen Bild — genau das, was das Auge als
   Rechteck sieht, obwohl der Unterschied nur 1 von 255 betraegt.

   Den Rand per CSS-Maske weich auszublenden waere der naheliegende Weg,
   greift aber nicht verlaesslich: Video laeuft in einer eigenen Ebene, und
   die Maske wird dort je nach Browser und Grafikpfad schlicht ignoriert
   (hier nachgemessen: eine Maske, die alles bis auf einen schmalen Streifen
   verdecken muesste, aenderte gar nichts).

   Deshalb liegt die weiche Kante als eigene Flaeche ueber dem Video: zwei
   Verlaeufe in --bg, waagerecht und senkrecht. Aussen decken sie voll und
   tragen exakt denselben Farbwert wie die Flaeche daneben — dieselbe
   CSS-Farbe, nicht eine, die nur aehnlich dekodiert — nach innen laufen sie
   auf null. Ob das Video einen Zaehlwert daneben liegt, spielt dann keine
   Rolle mehr: es gibt keine Kante, an der es auffallen koennte. */
.splash-frame {
  position: relative;
  display: inline-flex;
  max-width: 100%;
  max-height: 100%;
}
.splash-video {
  display: block;
  /* 16:9 auch ueber die Hoehe gerechnet, damit das Element genau so gross
     ist wie das Bild darin. Liesse man es einrasten (object-fit), saesse die
     weiche Kante am Elementrand statt am Bildrand. */
  width: min(100vw, 1920px, 177.78vh);
  height: auto;
  aspect-ratio: 16 / 9;
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.splash-feather {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Die ersten Prozent decken voll, erst danach beginnt der Verlauf: laeuft
     er schon im allerersten Pixel los, ist der dort nicht mehr ganz deckend
     und das Video schlaegt mit seinem einen Zaehlwert doch wieder durch. */
  background:
    linear-gradient(to right, var(--bg) 0%, var(--bg) 2%, var(--bg-fade) 10%,
                              var(--bg-fade) 90%, var(--bg) 98%, var(--bg) 100%),
    linear-gradient(to bottom, var(--bg) 0%, var(--bg) 2.5%, var(--bg-fade) 12%,
                               var(--bg-fade) 88%, var(--bg) 97.5%, var(--bg) 100%);
}

html.splash-leaving .splash { opacity: 0; }
html.splash-leaving .splash-video { transform: scale(1.04); }
html.splash-leaving .app-header,
html.splash-leaving .layout,
html.splash-leaving .hub-wrap {
  opacity: 1;
  transform: none;
  transition: opacity 620ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------------------------------------------------------------------
   Kopfzeile
   --------------------------------------------------------------------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.topbar h1 {
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.01em;
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
}

.topbar h1 .icon { color: var(--accent-text); flex-shrink: 0; }
.topbar .actions { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }

.muted { color: var(--muted); }
.muted-2 { color: var(--muted-2); }
.num, .value, table td { font-variant-numeric: tabular-nums; }

/* Icons: durchgehend SVG statt Emoji (Sprite in /static/js/icons.js) */
.icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-lg { width: 22px; height: 22px; }
.icon-xl { width: 28px; height: 28px; stroke-width: 1.5; }

/* ---------------------------------------------------------------------
   Schaltflächen
   --------------------------------------------------------------------- */
.btn {
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  color: var(--text);
  padding: 7px 13px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 500;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
  white-space: nowrap;
}
.btn:hover { background: var(--card-hover); border-color: var(--border-light); color: var(--text); }
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 2px 10px rgba(99, 102, 241, 0.32);
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.btn-danger { color: var(--red); }
.btn-danger:hover { background: var(--red-soft); border-color: rgba(239, 68, 68, 0.4); color: var(--red); }
.btn-sm { padding: 4px 9px; font-size: 11.5px; border-radius: var(--radius-sm); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:disabled:hover { background: var(--bg-elevated); border-color: var(--border-light); }

/* ---------------------------------------------------------------------
   Formularfelder
   --------------------------------------------------------------------- */
input[type="text"], input[type="password"], input[type="number"], input[type="url"],
input[type="email"], input[type="date"], select, textarea {
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  color: var(--text);
  padding: 7px 11px;
  border-radius: var(--radius);
  font-size: 12.5px;
  font-family: inherit;
  transition: border-color var(--transition), box-shadow var(--transition);
}
input::placeholder, textarea::placeholder { color: var(--placeholder); }
input:hover, select:hover, textarea:hover { border-color: var(--border-hover); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
select { cursor: pointer; }
input[type="checkbox"] { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; }
input[type="file"] { color: var(--muted-2); cursor: pointer; }
input[type="color"] {
  width: 44px; height: 30px; padding: 2px; cursor: pointer;
  background: var(--bg-elevated); border: 1px solid var(--border-light); border-radius: var(--radius-sm);
}
input[type="date"] { cursor: pointer; color-scheme: var(--scheme); }

/* ---------------------------------------------------------------------
   Kennzahlen-Karten
   --------------------------------------------------------------------- */
.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}

.card {
  background: linear-gradient(160deg, var(--card) 0%, var(--card-end) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  transition: border-color var(--transition), transform var(--transition);
  position: relative;
  overflow: hidden;
}
.card::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--card-sheen), transparent);
}
.card:hover { border-color: var(--border-light); }

.card .label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted-2);
  margin-bottom: 7px;
  font-weight: 550;
}
.card .value { font-size: 25px; font-weight: 680; letter-spacing: -0.02em; line-height: 1.15; }
.card .sub { font-size: 11.5px; margin-top: 6px; color: var(--muted-2); }

.up { color: var(--green); }
.down { color: var(--red); }

/* ---------------------------------------------------------------------
   Abschnitte
   --------------------------------------------------------------------- */
.section {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
}

.section h2 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: 0 0 var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--text);
}
.section h2 .icon { color: var(--muted-2); }

.toolbar {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  margin-bottom: var(--sp-3);
  flex-wrap: wrap;
}
.toolbar .spacer { flex: 1; }

/* ---------------------------------------------------------------------
   Tabellen
   --------------------------------------------------------------------- */
table { width: 100%; border-collapse: collapse; }
thead th {
  text-align: left;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-2);
  padding: var(--sp-2);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  user-select: none;
  font-weight: 600;
  position: sticky;
  top: 0;
  background: var(--card);
  z-index: 2;
}
thead th[data-sort] { cursor: pointer; transition: color var(--transition); }
thead th[data-sort]:hover { color: var(--text); }
thead th.active { color: var(--accent-text); }
th.num, td.num { text-align: right; }

tbody td {
  padding: 9px var(--sp-2);
  border-bottom: 1px solid var(--row-border);
  white-space: nowrap;
  font-size: 12.5px;
}
tbody tr { transition: background var(--transition); }
tbody tr:hover { background: rgba(99, 102, 241, 0.06); }
tbody tr:last-child td { border-bottom: none; }

/* ---------------------------------------------------------------------
   Statusmarken
   --------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
}
.badge-live, .badge-active { background: var(--green-soft); color: var(--green); border-color: rgba(34,197,94,0.25); }
.badge-appeal, .badge-pending { background: var(--orange-soft); color: var(--orange); border-color: rgba(245,158,11,0.25); }
.badge-banned, .badge-error { background: var(--red-soft); color: var(--red); border-color: rgba(239,68,68,0.25); }
.badge-page, .badge-dns_ok { background: var(--accent-soft); color: var(--accent-text); border-color: rgba(99,102,241,0.3); }
.badge-redirect { background: var(--purple-soft); color: var(--purple); border-color: rgba(168,85,247,0.25); }
.badge-confirm { background: rgba(56, 189, 248, 0.12); color: var(--brand); border-color: rgba(56, 189, 248, 0.28); }
.badge-auto {
  opacity: 0.75; font-size: 8.5px; padding: 1px 5px;
  border: 1px solid currentColor; margin-left: 3px; cursor: pointer;
}

.status-select {
  background: transparent;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  font-size: 10.5px;
  padding: 3px 8px;
  cursor: pointer;
}

.tag-pill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  font-size: 10.5px;
  color: var(--muted);
}

.sparkline { width: 90px; height: 24px; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }

.movers-list { list-style: none; margin: 0; padding: 0; }
.movers-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  padding: 8px 0;
  border-bottom: 1px solid var(--row-border);
  font-size: 12.5px;
}
.movers-list li:last-child { border-bottom: none; }

/* ---------------------------------------------------------------------
   Login
   --------------------------------------------------------------------- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--sp-4); }
.login-box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--sp-6);
  width: 340px;
  max-width: 100%;
  box-shadow: var(--shadow-lg);
  position: relative;
}
.login-box::before {
  content: '';
  position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
  background: linear-gradient(160deg, rgba(99,102,241,0.4), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.login-logo { display: block; width: 64px; height: 64px; margin: 0 auto var(--sp-4);
  filter: drop-shadow(0 0 20px rgba(56, 189, 248, 0.3)); }
.login-box h1 { font-variant-ligatures: none; }
.login-box h1 { font-size: 17px; margin: 0 0 6px; letter-spacing: -0.01em; }
/* Kopf der Anmeldung: Bildmarke, Wortmarke und Unterzeile mittig */
.login-head { text-align: center; }
.login-head h1.wordmark { font-size: 22px; margin-bottom: 8px; }
.login-brand { display: inline-block; color: inherit; text-decoration: none; }
.login-brand:hover { color: inherit; }
.login-box p { color: var(--muted-2); font-size: 12.5px; margin: 0 0 var(--sp-5); }
.login-box input { width: 100%; margin-bottom: var(--sp-3); padding: 9px 12px; }
.login-box button { width: 100%; padding: 10px; justify-content: center; margin-top: var(--sp-1); }
.login-error { color: var(--red); font-size: 12px; margin-top: var(--sp-2); min-height: 16px; }

/* ---------------------------------------------------------------------
   Detailseiten
   --------------------------------------------------------------------- */
.detail-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--sp-4); margin-bottom: var(--sp-4); flex-wrap: wrap;
}
.detail-header h1 { font-size: 19px; margin: 0 0 4px; display: flex; align-items: center; gap: 10px; letter-spacing: -0.01em; }
.detail-stats { display: flex; gap: var(--sp-5); margin-top: var(--sp-3); flex-wrap: wrap; }
.detail-stats .item .label { font-size: 10px; color: var(--muted-2); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 550; }
.detail-stats .item .value { font-size: 17px; font-weight: 650; letter-spacing: -0.01em; }

.chart-tabs { display: flex; gap: 6px; margin-bottom: var(--sp-2); }
.chart-tabs button.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.reel-row {
  display: grid; grid-template-columns: 110px 1fr 90px 90px 90px 100px;
  gap: var(--sp-2); padding: 8px 0; border-bottom: 1px solid var(--row-border);
  font-size: 12px; align-items: center;
}
.reel-row.header { color: var(--muted-2); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.reel-row:last-child { border-bottom: none; }

/* ---------------------------------------------------------------------
   Modale Dialoge
   --------------------------------------------------------------------- */
.modal-backdrop {
  position: fixed; inset: 0; background: var(--scrim);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; z-index: 100;
  padding: var(--sp-4);
  animation: fade-in 140ms ease-out;
}
.modal {
  background: var(--card); border: 1px solid var(--border-light); border-radius: var(--radius-xl);
  padding: var(--sp-5); width: 480px; max-width: 100%; max-height: 88vh; overflow-y: auto;
  box-shadow: var(--shadow-lg);
  animation: modal-in 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.modal h2 { margin-top: 0; font-size: 15px; }
.modal textarea { width: 100%; min-height: 170px; resize: vertical; }
.modal .row { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }
.modal .row label { font-size: 11.5px; color: var(--muted-2); display: block; margin-bottom: 4px; }
.modal .actions { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-4); }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }

.hidden { display: none !important; }
/* Das hidden-Attribut wirkt ueber die UA-Vorgabe display:none — und die
   verliert gegen jede Klasse, die selbst ein display setzt. Sichtbar wurde
   das am „Jetzt bezahlen"-Knopf der Sperrseite: .btn ist inline-flex, also
   stand er auch dann da, wenn es nichts zu bezahlen gab. */
[hidden] { display: none !important; }

.toast {
  position: fixed; bottom: var(--sp-5); left: 50%; transform: translateX(-50%);
  background: var(--bg-elevated); border: 1px solid var(--border-light);
  color: var(--text); padding: 10px 18px; border-radius: 999px;
  font-size: 12.5px; z-index: 200; box-shadow: var(--shadow-lg);
  animation: toast-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }

.filter-inline { display: flex; gap: 6px; align-items: center; cursor: pointer; }

/* ---------------------------------------------------------------------
   Hub (Produktauswahl nach dem Login)
   --------------------------------------------------------------------- */
.hub-wrap {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: var(--sp-6) var(--sp-4); gap: var(--sp-5);
  position: relative; z-index: 1;
}
/* Auf dem Einstieg stehen Bildmarke und Schriftzug untereinander — hier ist
   Platz dafuer, in der Kopfleiste der Unterseiten nur fuer die Bildmarke. */
.brand-lockup { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); }
.hub-logo { display: block; width: 112px; max-width: 40vw; height: auto;
  filter: drop-shadow(0 0 28px rgba(56, 189, 248, 0.28)); }
.brand-name {
  font-size: 19px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--text);
}
.hub-wrap h1 { font-size: 19px; font-weight: 600; margin: 0; letter-spacing: -0.01em; }
.hub-wrap h1 span { color: var(--accent-text); }
.hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: var(--sp-4); width: 100%; max-width: 720px; }

.hub-card {
  background: linear-gradient(160deg, var(--card) 0%, var(--card-end) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--sp-6) var(--sp-5);
  text-align: center;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
  display: block;
}
.hub-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  color: inherit;
}
.hub-card .icon-wrap {
  width: 52px; height: 52px; border-radius: var(--radius-lg);
  background: var(--accent-soft); color: var(--accent-text);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--sp-4);
}
.hub-card h2 { font-size: 15px; margin: 0 0 6px; font-weight: 650; }
.hub-card p { color: var(--muted-2); font-size: 12.5px; margin: 0; line-height: 1.6; }
.hub-card .stat {
  margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--border);
  font-size: 11.5px; color: var(--muted);
}

/* ---------------------------------------------------------------------
   Modul-Navigation
   --------------------------------------------------------------------- */
.subnav {
  display: flex; gap: var(--sp-1); margin-bottom: var(--sp-4);
  background: var(--bg-elevated); border: 1px solid var(--border);
  padding: var(--sp-1); border-radius: var(--radius-lg); width: fit-content;
  max-width: 100%; overflow-x: auto;
}
.subnav a {
  padding: 6px 14px; font-size: 12.5px; color: var(--muted-2);
  border-radius: var(--radius); white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}
.subnav a:hover { color: var(--text); background: var(--hover-tint); }
.subnav a.active { color: var(--text); background: var(--card-hover); font-weight: 600; box-shadow: var(--shadow-sm); }

/* ---------------------------------------------------------------------
   Link-Modul
   --------------------------------------------------------------------- */
.bar-list { display: flex; flex-direction: column; gap: 7px; }
.bar-row { display: grid; grid-template-columns: 130px 1fr 64px; gap: var(--sp-3); align-items: center; font-size: 12px; }
.bar-row .bar-track { background: var(--bg-elevated); border-radius: 999px; height: 18px; overflow: hidden; }
.bar-row .bar-fill {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  height: 100%; border-radius: 999px; min-width: 3px;
  transition: width 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
.bar-row .bar-value { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.bar-row .bar-label { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.field { margin-bottom: var(--sp-3); }
.field label { display: block; font-size: 11.5px; color: var(--muted-2); margin-bottom: 5px; font-weight: 500; }
.field input[type="text"], .field input[type="url"], .field input[type="number"], .field textarea, .field select { width: 100%; }
.field textarea { min-height: 76px; resize: vertical; }
.field-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.field-row .field { flex: 1; min-width: 120px; }
.field .hint, .designer-card > .hint, .tab-panel > .hint { font-size: 11px; color: var(--muted-2); margin-top: 5px; line-height: 1.5; }

.avatar-preview {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--border-light); background: var(--bg-elevated);
}

.sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important;
}

/* =====================================================================
   Seiten Designer (siehe Pictures/Seiten Designer.png)
   Zwei Spalten Einstellungskarten, rechts die Vorschau ueber drei Zeilen.
   ===================================================================== */
.crumbs {
  display: flex; align-items: center; gap: 4px;
  margin: 0 0 1px; min-height: 17px;
  font-size: 12.5px; font-weight: 500; color: var(--muted-2);
}
.crumbs a { color: var(--muted-2); transition: color var(--transition); }
.crumbs a:hover { color: var(--accent-text); }
.crumbs .icon { width: 13px; height: 13px; }

.save-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 550; font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
}
.save-pill:empty { display: none; }
.save-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.save-pill[data-state="dirty"] { background: var(--orange-soft); color: var(--orange-text); border-color: rgba(245, 158, 11, 0.28); }
.save-pill[data-state="saved"] { background: var(--green-soft); color: var(--green-text); border-color: rgba(34, 197, 94, 0.28); }

.designer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(340px, 400px);
  gap: var(--sp-4);
  align-items: stretch;
}
.designer-grid > .section { margin-bottom: 0; }
.designer-card { min-width: 0; animation: rise-in 320ms cubic-bezier(0.16, 1, 0.3, 1) backwards; }
.designer-grid > :nth-child(2) { animation-delay: 40ms; }
.designer-grid > :nth-child(4) { animation-delay: 80ms; }
.designer-grid > :nth-child(5) { animation-delay: 120ms; }
.designer-grid > :nth-child(6) { animation-delay: 160ms; }
.designer-grid > :nth-child(7) { animation-delay: 200ms; }

.designer-card .panel-head { align-items: center; flex-wrap: wrap; row-gap: var(--sp-2); }
.designer-card .panel-head h2 .icon, .preview-card .panel-head h2 .icon { color: var(--accent-text); }
.card-intro { font-size: 12px; color: var(--muted-2); margin: 0 0 var(--sp-3); line-height: 1.55; }
.tab-panel > .switch, .tab-panel > .dropzone, .tab-panel > .color-grid, .tab-panel > .range-field { margin-bottom: var(--sp-4); }
.tab-panel { animation: fade-in 160ms ease-out; }

.designer-preview { grid-column: 3; grid-row: 1 / span 3; min-width: 0; }
.preview-card {
  position: sticky; top: calc(var(--top-bars-h, 0px) + 62px + var(--sp-4));
  margin-bottom: 0;
  animation: rise-in 320ms cubic-bezier(0.16, 1, 0.3, 1) 60ms backwards;
}
.preview-note { font-size: 11px; color: var(--muted-2); margin: var(--sp-3) 0 0; text-align: center; }

.preview-frame { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.preview-shell {
  border: 1px solid var(--border-light); overflow: hidden;
  background: #fff; margin: 0 auto; box-shadow: var(--shadow-lg);
  transition: max-width 220ms cubic-bezier(0.4, 0, 0.2, 1), border-radius 220ms ease;
}
/* Mobil als Geraeterahmen: dunkler Rand wie ein Telefon */
.preview-shell.mobile {
  max-width: 330px; height: min(680px, calc(100vh - 220px)); min-height: 520px;
  border-radius: 34px; border: 8px solid #05070f;
  box-shadow: 0 0 0 1px var(--border-light), var(--shadow-lg);
}
.preview-shell.desktop { max-width: 100%; height: min(680px, calc(100vh - 220px)); min-height: 520px; border-radius: var(--radius-lg); }

/* ---------------------------------------------------------------------
   Segment-Tabs (Kartenkopf, Vorschau-Umschalter)
   --------------------------------------------------------------------- */
.seg-tabs {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: 999px; max-width: 100%; overflow-x: auto;
}
.seg-tabs button {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 28px; padding: 4px 12px;
  background: transparent; border: 0; border-radius: 999px;
  color: var(--muted-2); font: inherit; font-size: 12px; font-weight: 500;
  white-space: nowrap; cursor: pointer;
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}
.seg-tabs button .icon { width: 14px; height: 14px; }
.seg-tabs button:hover { color: var(--text); }
.seg-tabs button[aria-selected="true"], .seg-tabs button[aria-pressed="true"] {
  background: var(--accent-soft); color: var(--text); font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.35);
}
.seg-tabs .count {
  min-width: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--border-light); color: var(--muted);
  font-size: 10.5px; font-weight: 600; line-height: 16px; text-align: center;
}
.seg-tabs .count:empty { display: none; }

/* Segment-Auswahl im Formular (versteckter <select> dahinter) */
.seg {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px;
  padding: 3px; background: var(--bg-elevated);
  border: 1px solid var(--border-light); border-radius: var(--radius);
}
.seg button {
  min-height: 32px; padding: 5px 10px;
  background: transparent; border: 0; border-radius: 7px;
  color: var(--muted-2); font: inherit; font-size: 12px; font-weight: 500;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.seg button:hover { color: var(--text); background: var(--hover-tint); }
.seg button[aria-checked="true"] { background: var(--accent); color: #fff; font-weight: 600; box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3); }

/* Grosse Auswahlkarten (Verhalten beim Klick) */
.seg.seg-cards { grid-auto-flow: row; grid-template-columns: 1fr; padding: 0; gap: var(--sp-2); background: none; border: 0; }
.seg.seg-cards button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 11px 14px 11px 40px; position: relative; text-align: left;
  background: var(--bg-elevated); border: 1px solid var(--border-light); border-radius: var(--radius);
  color: var(--text); font-size: 12.5px; font-weight: 600;
}
.seg.seg-cards button::before {
  content: ''; position: absolute; left: 14px; top: 13px;
  width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid var(--muted-2); transition: border var(--transition);
}
.seg.seg-cards button small { font-size: 11.5px; font-weight: 400; color: var(--muted-2); }
.seg.seg-cards button:hover { border-color: var(--border-hover); background: var(--card-hover); }
.seg.seg-cards button[aria-checked="true"] { background: var(--accent-soft); border-color: var(--accent); box-shadow: none; }
.seg.seg-cards button[aria-checked="true"]::before { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 0 3.5px, transparent 4px); }

/* ---------------------------------------------------------------------
   Links-Liste (/links/slugs)
   --------------------------------------------------------------------- */
.page-sub { margin: 4px 0 0; font-size: 12.5px; color: var(--muted-2); }
.links-list { padding: 0; overflow: hidden; }
.links-toolbar {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border);
}
.search-box {
  position: relative; display: flex; align-items: center; flex: 1 1 240px; max-width: 340px;
}
.search-box .icon { position: absolute; left: 11px; width: 14px; height: 14px; color: var(--muted-2); pointer-events: none; }
.search-box input { width: 100%; padding-left: 32px; }
.type-filter { margin-left: auto; grid-auto-columns: auto; }
.type-filter button { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; white-space: nowrap; }
.type-filter .count {
  min-width: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--border-light); color: var(--muted);
  font-size: 10.5px; font-weight: 600; line-height: 16px; text-align: center;
}
.type-filter button[aria-checked="true"] .count { background: rgba(255, 255, 255, 0.22); color: #fff; }

.links-table thead th { padding: 10px var(--sp-3); background: var(--card); }
.links-table thead th:first-child, .links-table tbody td:first-child { padding-left: var(--sp-4); }
.links-table thead th:last-child, .links-table tbody td:last-child { padding-right: var(--sp-4); }
.links-table tbody td { padding: 12px var(--sp-3); vertical-align: middle; }
.links-table tbody tr.lt-empty:hover { background: none; }

.lt-slug { display: flex; align-items: center; gap: 6px; }
.lt-slug a { font-weight: 600; font-size: 13px; color: var(--text); }
.lt-slug a:hover { color: var(--accent-text); }
.lt-meta { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 11px; color: var(--muted-2); }
.lt-chip {
  display: inline-flex; align-items: center; gap: 3px; padding: 0 7px; border-radius: 999px;
  background: var(--bg-elevated); border: 1px solid var(--border); color: var(--muted);
  font-size: 10.5px; line-height: 17px; white-space: nowrap;
}
.lt-target {
  display: inline-flex; align-items: center; gap: 7px; max-width: 280px;
  color: var(--muted); font-size: 12.5px;
}
a.lt-target:hover { color: var(--text); }
.lt-target .icon { width: 14px; height: 14px; flex-shrink: 0; color: var(--muted-2); }
.lt-target span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-account a { color: var(--muted); }
.lt-account a:hover { color: var(--accent-text); }

.lt-clicks { min-width: 96px; }
.lt-clicks strong { font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; }
.lt-bar { display: block; height: 3px; margin: 6px 0 0 auto; width: 72px; border-radius: 2px; background: var(--border); overflow: hidden; }
.lt-bar span { display: block; height: 100%; margin-left: auto; border-radius: 2px; background: var(--accent); opacity: 0.8; }

.lt-actions { text-align: right; width: 1%; }
.lt-actions .btn-icon { margin-left: 4px; opacity: 0.55; transition: opacity var(--transition), background var(--transition), color var(--transition); }
.links-table tbody tr:hover .lt-actions .btn-icon, .lt-actions .btn-icon:focus-visible { opacity: 1; }
.btn-icon-sm { width: 30px; height: 30px; border-radius: var(--radius-sm); }
.btn-icon-sm .icon { width: 14px; height: 14px; }
.btn-icon-danger:hover:not(:disabled) { color: var(--red); background: var(--red-soft); border-color: rgba(239, 68, 68, 0.4); }

/* Schmale Fenster: aus jeder Zeile wird eine Karte. */
@media (max-width: 760px) {
  .links-toolbar { padding: var(--sp-3); }
  .search-box { max-width: none; flex-basis: 100%; }
  .type-filter { margin-left: 0; max-width: 100%; grid-auto-columns: max-content; overflow-x: auto; scrollbar-width: none; }
  .type-filter button { padding: 5px 10px; }
  .links-table thead { display: none; }
  .links-table, .links-table tbody { display: block; }
  .links-table tbody tr {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px 10px;
    padding: 14px var(--sp-3); border-bottom: 1px solid var(--row-border);
  }
  .links-table tbody tr:last-child { border-bottom: none; }
  .links-table tbody td, .links-table tbody td:first-child, .links-table tbody td:last-child { display: block; padding: 0; border: 0; white-space: normal; }
  .links-table tbody tr.lt-empty { display: block; }
  .lt-link { grid-column: 1 / 3; grid-row: 1; min-width: 0; }
  .lt-clicks { grid-column: 3; grid-row: 1; min-width: 0; }
  .lt-type { grid-column: 1; grid-row: 2; align-self: center; }
  .lt-target-cell { grid-column: 2 / 4; grid-row: 2; min-width: 0; align-self: center; }
  .lt-target { max-width: 100%; }
  .lt-creator { grid-column: 1 / 3; grid-row: 3; align-self: center; }
  .lt-account { grid-column: 1 / 3; align-self: center; }
  .lt-account.is-empty { display: none !important; }
  .lt-actions { grid-column: 3; grid-row: 3; align-self: center; width: auto; white-space: nowrap; }
  .lt-actions .btn-icon { opacity: 1; }
  .lt-meta { flex-wrap: wrap; }
}

/* ---------------------------------------------------------------------
   Auswahllisten im Panel-Stil (enhanceSelect in common.js)
   --------------------------------------------------------------------- */
select.cselect-native { display: none !important; }
.cselect { position: relative; width: 100%; }
.cselect-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; min-height: 34px; padding: 7px 11px; text-align: left; cursor: pointer;
  background: var(--bg-elevated); border: 1px solid var(--border-light); border-radius: var(--radius);
  color: var(--text); font: inherit; font-size: 12.5px;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.cselect-btn:hover:not(:disabled) { border-color: var(--border-hover); }
.cselect-btn:focus-visible, .cselect.is-open .cselect-btn { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.cselect-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.cselect-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cselect.is-empty .cselect-label { color: var(--muted-2); }
.cselect-btn .icon { width: 14px; height: 14px; flex-shrink: 0; color: var(--muted-2); transition: transform var(--transition); }
.cselect.is-open .cselect-btn .icon { transform: rotate(180deg); }
.cselect-pop {
  position: fixed; z-index: 300; max-width: calc(100vw - 16px); overflow-y: auto;
  padding: 5px; background: var(--card); border: 1px solid var(--border-light);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  animation: rise-in 140ms cubic-bezier(0.16, 1, 0.3, 1);
}
.cselect-opt {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer;
  font-size: 12.5px; color: var(--muted); white-space: nowrap;
}
.cselect-opt.is-active { background: var(--hover-tint); color: var(--text); }
.cselect-opt.is-selected { color: var(--text); font-weight: 600; }
.cselect-opt .icon { width: 14px; height: 14px; color: var(--accent-text); visibility: hidden; }
.cselect-opt.is-selected .icon { visibility: visible; }
.cselect-opt.is-disabled { opacity: 0.45; cursor: not-allowed; }

/* ---------------------------------------------------------------------
   Link erstellen: Formular links, Telefon-Vorschau rechts
   --------------------------------------------------------------------- */
.modal.slug-modal { width: 820px; padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.slug-modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border);
}
.slug-modal-head h2 { margin: 0; }
.slug-modal-body {
  display: grid; grid-template-columns: minmax(0, 1fr) 248px; gap: var(--sp-5);
  padding: var(--sp-5); overflow-y: auto; min-height: 0;
}
.slug-modal .actions { margin: 0; padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--border); }
.slug-step { margin-bottom: var(--sp-4); }
.slug-step:empty { display: none; }
.slug-step .field { margin-bottom: 0; }
.slug-step-label { font-size: 11.5px; color: var(--muted-2); font-weight: 500; margin-bottom: 8px; }

.type-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.type-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 12px; text-align: left; cursor: pointer;
  background: var(--bg-elevated); border: 1px solid var(--border-light); border-radius: var(--radius);
  color: var(--text); font: inherit;
  transition: border-color var(--transition), background var(--transition);
}
.type-card > .icon { width: 18px; height: 18px; color: var(--muted-2); }
.type-card-text { display: flex; flex-direction: column; gap: 2px; }
.type-card strong { font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.type-card small { font-size: 11px; color: var(--muted-2); line-height: 1.35; }
.type-card:hover:not(:disabled) { border-color: var(--border-hover); background: var(--card-hover); }
.type-card[aria-checked="true"] { background: var(--accent-soft); border-color: var(--accent); }
.type-card[aria-checked="true"] > .icon { color: var(--accent-text); }
.type-card:focus-visible { outline: none; box-shadow: var(--ring); }
.type-card.locked { opacity: 0.45; cursor: not-allowed; }
.type-card { position: relative; }
.type-card-flag {
  position: absolute; top: 10px; right: 10px;
  padding: 1px 7px; border-radius: 999px;
  background: var(--orange-soft); color: var(--orange);
  font-size: 10px; font-weight: 600; line-height: 16px; white-space: nowrap;
}
.redirect-warn {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; padding: 8px 10px;
  border-radius: var(--radius-sm); background: var(--orange-soft); color: var(--muted);
  font-size: 11px; line-height: 1.45;
}
.redirect-warn .icon { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; color: var(--orange); }

.type-lock {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  margin-top: var(--sp-2); padding: 10px 12px;
  border: 1px dashed var(--border-light); border-radius: var(--radius);
  font-size: 11.5px; color: var(--muted); line-height: 1.45;
}
.type-lock .btn { flex-shrink: 0; }

.link-addr {
  display: flex; align-items: stretch;
  background: var(--bg-elevated); border: 1px solid var(--border-light); border-radius: var(--radius);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.link-addr:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.field .link-addr input[type="text"] {
  flex: 1; width: auto; min-width: 0; padding-left: 2px;
  border: 0; background: transparent; box-shadow: none; border-radius: 0;
}
.link-addr .cselect { width: auto; flex: 0 1 auto; min-width: 0; max-width: 60%; }
.link-addr .cselect-btn { border: 0; background: transparent; box-shadow: none; color: var(--muted); padding-right: 8px; }
.link-addr .cselect-btn:hover { color: var(--text); background: var(--hover-tint); }
.link-addr-sep { display: grid; place-items: center; color: var(--muted-2); padding: 0 2px; }

.more-opts { border-top: 1px solid var(--border); padding-top: var(--sp-4); }
.more-opts .slug-step-label { margin-bottom: var(--sp-3); }
.slug-form .notice { margin-top: var(--sp-3); }

/* Das Telefon hat eine feste Groesse, damit sich die Seite im iframe rein
   per CSS verkleinern laesst: 390px Handybreite auf 224px Bildschirm. */
.slug-preview { display: flex; flex-direction: column; align-items: center; position: sticky; top: 0; align-self: start; }
.slug-preview .slug-step-label { align-self: stretch; }
.phone {
  width: 240px; padding: 8px; border-radius: 30px;
  background: #0a0a0d; border: 1px solid var(--border-light); box-shadow: var(--shadow);
}
.phone-bar {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  margin: 2px 4px 7px; padding: 5px 10px; border-radius: 999px;
  background: #1c1c21; color: #d4d4d8; font-size: 10.5px;
}
.phone-bar .icon { width: 11px; height: 11px; flex-shrink: 0; color: #22c55e; }
.phone-bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phone-screen { position: relative; width: 224px; height: 400px; border-radius: 22px; overflow: hidden; background: #0f0f12; }
.phone-frame-wrap, .phone-mock { position: absolute; inset: 0; }
.phone-frame-wrap iframe {
  width: 390px; height: 696px; border: 0; display: block; background: #fff;
  transform: scale(0.5744); transform-origin: 0 0; pointer-events: none;
}
.phone-mock { display: flex; align-items: center; justify-content: center; padding: 14px; color: #e7e7ea; }
.mock-gate {
  width: 100%; padding: 20px 14px 14px; text-align: center;
  background: #17171b; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px;
}
.mock-gate svg { width: 28px; height: 28px; fill: rgba(255, 255, 255, 0.9); margin-bottom: 10px; }
.mock-gate-title { font-size: 13px; font-weight: 650; margin-bottom: 5px; }
.mock-gate-msg { font-size: 10.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.62); margin-bottom: 14px; }
.mock-gate-btn { padding: 9px; border-radius: 9px; background: #fff; color: #111; font-size: 11px; font-weight: 650; }
.mock-hop { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.mock-hop-icon {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(99, 102, 241, 0.18); color: #a5b4fc;
}
.mock-hop-icon .icon { width: 20px; height: 20px; }
.mock-hop-label { font-size: 11px; color: rgba(255, 255, 255, 0.6); }
.mock-hop-host { font-size: 13px; font-weight: 600; word-break: break-all; }
.preview-target { margin-top: var(--sp-3); font-size: 11.5px; text-align: center; max-width: 240px; word-break: break-all; }
.preview-target:empty { display: none; }

@media (max-width: 760px) {
  .slug-modal-body { grid-template-columns: minmax(0, 1fr); padding: var(--sp-4); }
  .slug-preview { position: static; }
  .slug-modal-head, .slug-modal .actions { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .phone-screen { height: 320px; }
}
@media (max-width: 520px) {
  .type-cards { grid-template-columns: 1fr; }
  .type-card { flex-direction: row; align-items: center; gap: 12px; }
  .type-lock { flex-direction: column; align-items: flex-start; }
}

/* ---------------------------------------------------------------------
   Upload-Flaechen
   --------------------------------------------------------------------- */
.dropzone {
  position: relative;
  border: 1.5px dashed var(--border-light); border-radius: var(--radius-lg);
  background: var(--sunken);
  transition: border-color var(--transition), background var(--transition);
}
.dropzone:hover, .dropzone.is-drag { border-color: var(--accent); background: var(--accent-soft); }
.dropzone.is-drag { border-style: solid; }
.dropzone.has-image { border-style: solid; border-color: var(--border); background: var(--bg-elevated); }
.dropzone.has-image.is-drag { border-color: var(--accent); background: var(--accent-soft); }

.dz-empty {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%; padding: var(--sp-4);
  background: none; border: 0; border-radius: inherit;
  color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.dz-wide .dz-empty { flex-direction: column; justify-content: center; text-align: center; gap: var(--sp-2); padding: var(--sp-5) var(--sp-4); }
.dz-icon {
  width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-text);
  box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.3);
  transition: transform var(--transition), background var(--transition);
}
.dz-icon .icon { width: 18px; height: 18px; }
.dz-empty:hover .dz-icon, .dropzone.is-drag .dz-icon { transform: translateY(-2px); background: rgba(99, 102, 241, 0.24); }
.dz-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dz-title { font-size: 12.5px; font-weight: 600; color: var(--text); }
.dz-sub { font-size: 11.5px; color: var(--muted-2); }
.dz-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-2); }

.dz-filled { display: none; align-items: center; gap: var(--sp-4); padding: var(--sp-3); }
.dropzone.has-image .dz-empty { display: none; }
.dropzone.has-image .dz-filled { display: flex; }
.dz-preview { display: block; object-fit: cover; background: var(--card); border: 1px solid var(--border-light); }
.dz-avatar .dz-preview { width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0; }
.dz-wide .dz-filled { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
.dz-wide .dz-preview { width: 100%; aspect-ratio: 3 / 1; border-radius: var(--radius); }
.dz-wide .dz-actions { margin-top: 0; justify-content: flex-end; }

.dz-busy {
  position: absolute; inset: 0; display: none; place-items: center;
  border-radius: inherit; background: var(--scrim-soft); color: var(--accent-text);
}
.dropzone.is-busy .dz-busy { display: grid; }
.spinning { animation: spin 700ms linear infinite; transform-origin: 50% 50%; }

/* ---------------------------------------------------------------------
   Schalter
   --------------------------------------------------------------------- */
.switch { position: relative; display: inline-flex; align-items: center; gap: var(--sp-3); cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.switch-track {
  position: relative; flex-shrink: 0;
  width: 36px; height: 20px; border-radius: 999px;
  background: var(--track); box-shadow: inset 0 0 0 1px var(--border-light);
  transition: background var(--transition);
}
.switch-track::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--knob-off); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1), background var(--transition);
}
.switch input:checked + .switch-track { background: var(--accent); box-shadow: none; }
.switch input:checked + .switch-track::after { transform: translateX(16px); background: #fff; }
.switch input:focus-visible + .switch-track { box-shadow: var(--ring); }
.switch:hover .switch-track { box-shadow: inset 0 0 0 1px var(--border-hover); }
.switch:hover input:checked + .switch-track { background: var(--accent-hover); }
.switch-label { display: flex; flex-direction: column; font-size: 12.5px; font-weight: 500; color: var(--text); line-height: 1.35; }
.switch-label small { font-size: 11px; font-weight: 400; color: var(--muted-2); }
.field label.switch, .item-grid label.switch { display: inline-flex; margin: 0; font-size: inherit; color: inherit; }
.switch-sm { gap: var(--sp-2); }
.switch-sm .switch-label { font-size: 12px; color: var(--muted); }

/* Kleines „i" mit Hinweistext — Hover, Tastaturfokus und Antippen. */
.info-tip { position: relative; display: inline-flex; margin-left: calc(var(--sp-2) * -1); }
.info-tip-btn {
  display: grid; place-items: center; width: 22px; height: 22px; padding: 0;
  background: none; border: 0; border-radius: 50%; color: var(--muted-2); cursor: help;
  transition: color var(--transition);
}
.info-tip-btn .icon { width: 15px; height: 15px; }
.info-tip-btn:hover, .info-tip-btn:focus-visible { color: var(--text); }
.info-tip-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.info-tip-text {
  position: absolute; right: -6px; bottom: calc(100% + 8px); z-index: 30;
  width: max-content; max-width: min(280px, 80vw); padding: 8px 10px;
  font-size: 12px; line-height: 1.45; color: var(--text);
  background: var(--card); border: 1px solid var(--border-light); border-radius: var(--radius);
  box-shadow: var(--shadow); pointer-events: none;
  opacity: 0; transform: translateY(4px); visibility: hidden;
  transition: opacity 120ms, transform 120ms, visibility 120ms;
}
.info-tip:hover .info-tip-text, .info-tip-btn:focus + .info-tip-text {
  opacity: 1; transform: none; visibility: visible;
}
.field.field-switch { flex: 0 1 auto; display: flex; align-items: flex-end; padding-bottom: 20px; }
.field-row-center .field.field-switch { padding-bottom: 6px; }

/* ---------------------------------------------------------------------
   Farbfelder
   --------------------------------------------------------------------- */
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: var(--sp-2); margin-bottom: var(--sp-3); }
.color-field {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px 6px 6px; min-height: 44px;
  background: var(--bg-elevated); border: 1px solid var(--border-light); border-radius: var(--radius);
  cursor: pointer; transition: border-color var(--transition), background var(--transition);
}
.color-field:hover { border-color: var(--border-hover); background: var(--card-hover); }
.color-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.color-field input[type="color"] {
  width: 30px; height: 30px; padding: 0; flex-shrink: 0;
  border: 0; border-radius: 8px; background: none; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.color-field input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.color-field input[type="color"]::-webkit-color-swatch { border: 1px solid var(--swatch-border); border-radius: 8px; }
.color-field input[type="color"]::-moz-color-swatch { border: 1px solid var(--swatch-border); border-radius: 8px; }
.color-field input[type="color"]:focus { box-shadow: none; }
.cf-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.cf-name { font-size: 11.5px; color: var(--muted-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-hex { font-family: var(--font-mono); font-size: 12px; color: var(--text); }

/* ---------------------------------------------------------------------
   Schieberegler
   --------------------------------------------------------------------- */
.range-field { margin-bottom: var(--sp-3); flex: 1; min-width: 140px; }
.range-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.range-head label { font-size: 11.5px; color: var(--muted-2); font-weight: 500; }
.range-head output {
  font-size: 11.5px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums;
  padding: 1px 7px; border-radius: 999px; background: var(--bg-elevated); border: 1px solid var(--border);
}
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 20px; margin: 0; background: transparent; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 5px; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2)) 0 / var(--pct, 50%) 100% no-repeat, var(--track);
}
input[type="range"]::-moz-range-track { height: 5px; border-radius: 999px; background: var(--track); }
input[type="range"]::-moz-range-progress { height: 5px; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; margin-top: -5.5px; border-radius: 50%;
  background: #fff; border: 0; box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.35), 0 2px 6px rgba(0, 0, 0, 0.4);
  transition: box-shadow var(--transition), transform var(--transition);
}
input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%; border: 0;
  background: #fff; box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.35), 0 2px 6px rgba(0, 0, 0, 0.4);
}
input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.1); }
input[type="range"]:focus { outline: none; box-shadow: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--bg), 0 0 0 5px var(--accent); }
input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px var(--bg), 0 0 0 5px var(--accent); }

.input-prefix {
  display: flex; align-items: stretch;
  background: var(--bg-elevated); border: 1px solid var(--border-light); border-radius: var(--radius);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.input-prefix:hover { border-color: var(--border-hover); }
.input-prefix:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.input-prefix span { display: grid; place-items: center; padding: 0 2px 0 11px; color: var(--muted-2); font-size: 12.5px; }
.field .input-prefix input { border: 0; background: transparent; box-shadow: none; padding-left: 2px; }

/* ---------------------------------------------------------------------
   Kartenstile
   --------------------------------------------------------------------- */
.style-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: var(--sp-2); }
.style-chip {
  display: flex; flex-direction: column; align-items: stretch; gap: 6px;
  padding: 6px; background: var(--bg-elevated);
  border: 1px solid var(--border-light); border-radius: var(--radius);
  color: var(--muted); font: inherit; cursor: pointer;
  transition: border-color var(--transition), transform var(--transition), background var(--transition);
}
.style-chip:hover { transform: translateY(-1px); border-color: var(--border-hover); }
.style-swatch {
  display: grid; place-items: center; height: 30px; border-radius: 7px;
  font-size: 12px; font-weight: 700;
  border: 1px solid var(--swatch-border);
  background: var(--swatch-bg);
}
/* Glas und Umrandet sind durchsichtig — erst vor einem Seitenhintergrund
   erkennt man, wie sie wirken. */
.style-swatch.on-backdrop {
  background: linear-gradient(var(--swatch-bg), var(--swatch-bg)), linear-gradient(135deg, #6366f1, #ec4899);
  border-color: rgba(255, 255, 255, 0.55);
}
.style-name { font-size: 11.5px; font-weight: 500; text-align: center; }
.style-chip.active { border-color: var(--accent); background: var(--accent-soft); color: var(--text); box-shadow: 0 0 0 1px var(--accent); }

/* ---------------------------------------------------------------------
   Link- und Icon-Zeilen
   --------------------------------------------------------------------- */
.item-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.item-card {
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 6px 8px 6px 4px;
  transition: border-color var(--transition), opacity var(--transition), background var(--transition);
}
.item-card:hover { border-color: var(--border-light); }
.item-card.is-open { border-color: var(--border-light); background: var(--item-open); }
.item-card.dragging { opacity: 0.45; border-style: dashed; border-color: var(--accent); }
.item-card.is-off .item-head > input, .item-card.is-off .item-head > select { opacity: 0.55; }
.item-head { display: flex; gap: var(--sp-2); align-items: center; }
.item-head > input, .item-head > select { font-size: 12px; padding: 6px 9px; }
.item-head .item-label { flex: 1; min-width: 0; background: transparent; border-color: transparent; font-weight: 550; }
.item-head .item-label:hover { border-color: var(--border-light); }
.item-head .item-label:focus { background: var(--card); border-color: var(--accent); }
.item-card.social .item-head > select { width: 128px; flex-shrink: 0; }
.item-card.social .item-head > input[type="url"] { flex: 1; min-width: 0; }
.item-card.social .social-title { width: 110px; flex-shrink: 1; min-width: 70px; }
.item-card .drag {
  display: grid; place-items: center; width: 22px; height: 30px; flex-shrink: 0;
  color: var(--muted-2); cursor: grab; border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
}
.item-card .drag:hover { color: var(--text); background: var(--hover-tint); }
.item-card .drag:active { cursor: grabbing; }

.btn-icon.btn-icon-sm { width: 30px; height: 30px; border-radius: var(--radius-sm); background: transparent; border-color: transparent; flex-shrink: 0; }
.btn-icon.btn-icon-sm:hover { background: var(--card-hover); border-color: var(--border-light); }
.btn-icon.is-danger:hover { color: var(--red-text); background: var(--red-soft); border-color: rgba(239, 68, 68, 0.35); }
.item-toggle .icon { transition: transform var(--transition); }
.item-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }

.item-body { padding: var(--sp-2) 6px 4px 30px; }
.item-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-3); }
.item-grid .field { margin-bottom: var(--sp-2); }
.item-grid input, .item-grid select { font-size: 12px; padding: 6px 9px; }
.item-foot {
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  padding-top: var(--sp-2); margin-top: 2px; border-top: 1px solid var(--border);
}

.thumb { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.thumb-drop { position: relative; width: 44px; height: 44px; flex-shrink: 0; }
.thumb-pick {
  width: 100%; height: 100%; padding: 0; overflow: hidden;
  display: grid; place-items: center;
  background: var(--card); color: var(--muted-2);
  border: 1.5px dashed var(--border-light); border-radius: var(--radius);
  cursor: pointer; transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.thumb-pick:hover { border-color: var(--accent); color: var(--accent-text); background: var(--accent-soft); }
.thumb-drop.has-image .thumb-pick { border-style: solid; border-color: var(--border-light); }
.thumb-pick img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-remove {
  position: absolute; top: -6px; right: -6px;
  width: 20px; height: 20px; padding: 0; display: grid; place-items: center;
  background: var(--card); color: var(--muted); border: 1px solid var(--border-light); border-radius: 50%;
  cursor: pointer; transition: background var(--transition), color var(--transition);
}
.thumb-remove .icon { width: 12px; height: 12px; stroke-width: 2.2; }
.thumb-remove:hover { background: var(--red); border-color: var(--red); color: #fff; }
.thumb-drop.is-busy .thumb-pick { opacity: 0.4; pointer-events: none; }
.thumb-drop.is-busy::after {
  content: ''; position: absolute; inset: 12px; border-radius: 50%;
  border: 2px solid var(--accent-text); border-right-color: transparent;
  animation: spin 700ms linear infinite;
}
.thumb-text { display: flex; flex-direction: column; line-height: 1.3; }
.thumb-text b { font-size: 12px; font-weight: 550; }
.thumb-text span { font-size: 11px; color: var(--muted-2); }

.item-empty {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--sp-5) var(--sp-4); text-align: center;
  color: var(--muted-2); font-size: 12px;
  border: 1px dashed var(--border); border-radius: var(--radius);
}
.item-empty .icon { color: var(--border-light); margin-bottom: 6px; }
.item-empty b { color: var(--text); font-size: 12.5px; font-weight: 600; }

.add-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; min-height: 40px; margin-top: var(--sp-2);
  background: transparent; color: var(--accent-text);
  border: 1.5px dashed rgba(99, 102, 241, 0.4); border-radius: var(--radius);
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.add-btn:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--text); }
.add-btn:active { transform: translateY(1px); }

.slug-url { font-family: var(--font-mono); font-size: 11.5px; color: var(--accent-text); }
.copy-btn { cursor: pointer; }

.dns-table { font-family: var(--font-mono); font-size: 11.5px; }
.dns-table td { padding: 7px 10px; }

.steps { counter-reset: step; padding-left: 0; list-style: none; margin: 0; }
.steps li {
  position: relative; padding-left: 32px; margin-bottom: var(--sp-3);
  font-size: 12.5px; color: var(--muted); line-height: 1.6;
}
.steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 1px;
  width: 21px; height: 21px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-text); border: 1px solid rgba(99,102,241,0.3);
  font-size: 11px; font-weight: 650;
  display: flex; align-items: center; justify-content: center;
}
.steps li strong { color: var(--text); font-weight: 600; }

.notice {
  padding: 11px 14px; border-radius: var(--radius); font-size: 12.5px;
  margin-bottom: var(--sp-3); display: flex; gap: var(--sp-2); align-items: flex-start; line-height: 1.55;
}
.notice .icon { margin-top: 1px; }
.notice-warn { background: var(--orange-soft); border: 1px solid rgba(245,158,11,0.3); color: var(--orange-text); }
.notice-error { background: var(--red-soft); border: 1px solid rgba(239,68,68,0.3); color: var(--red-text); }
.notice-info { background: var(--accent-soft); border: 1px solid rgba(99,102,241,0.3); color: var(--accent-text); }

.empty-state { text-align: center; padding: var(--sp-6) var(--sp-4); color: var(--muted-2); }
.empty-state .icon-xl { color: var(--border-light); margin-bottom: var(--sp-3); }
.empty-state h3 { color: var(--text); font-size: 14px; margin: 0 0 6px; }
.empty-state p { margin: 0; font-size: 12.5px; line-height: 1.6; }

/* ---------------------------------------------------------------------
   Bewegung: dezent, gestaffelt beim Laden
   --------------------------------------------------------------------- */
.grid-cards .card { animation: rise-in 320ms cubic-bezier(0.16, 1, 0.3, 1) backwards; }
.grid-cards .card:nth-child(1) { animation-delay: 0ms; }
.grid-cards .card:nth-child(2) { animation-delay: 40ms; }
.grid-cards .card:nth-child(3) { animation-delay: 80ms; }
.grid-cards .card:nth-child(4) { animation-delay: 120ms; }
.grid-cards .card:nth-child(5) { animation-delay: 160ms; }
.grid-cards .card:nth-child(6) { animation-delay: 200ms; }
@keyframes rise-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* =====================================================================
   App-Kopfzeile (heremysocials)
   Eine Leiste statt Topbar + separater Subnav-Zeile: Marke, Modulnavigation
   und Konto liegen zusammen, darunter beginnt direkt der Seiteninhalt.
   ===================================================================== */
.app-header {
  position: sticky;
  top: var(--top-bars-h, 0px); /* unter den Bannern, siehe mountTopBar() */
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: 10px var(--sp-5);
  margin-bottom: var(--sp-5);
  background: color-mix(in srgb, var(--card) 88%, transparent);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  flex-wrap: wrap;
}

.app-header .brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
  color: var(--text);
}
.app-header .brand:hover { color: var(--text); }
.app-header .brand img {
  width: 30px; height: 30px;
  display: block;
  /* Die Bildmarke ist freigestellt und steht direkt auf der Leiste. Der
     Schimmer liegt deshalb an ihrer Silhouette, nicht an einer Platte. */
  filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.28));
}
/* Wortmarke: Outfit (geometrisch, wie die Dashboard-Referenz) statt
   gesperrter Versalien. „socials" traegt das Neonblau aus dem Logo. */
.wordmark {
  font-family: 'Outfit', var(--font-ui);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1;
  white-space: nowrap;
  color: var(--text);
}
.wordmark span {
  background: linear-gradient(90deg, var(--brand), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Modulnavigation als Pillen-Leiste */
.header-nav {
  display: flex; gap: 4px; align-items: center; min-width: 0;
  padding: 4px;
  background: var(--nav-bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  max-width: 100%; overflow-x: auto; scrollbar-width: none;
}
.header-nav::-webkit-scrollbar { display: none; }
.header-nav a {
  display: inline-flex; align-items: center;
  min-height: 36px;
  padding: 7px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted-2);
  transition: background 220ms cubic-bezier(0.4, 0, 0.2, 1), color 220ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 220ms cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}
.header-nav a:hover { color: var(--text); background: var(--hover-tint); }
.header-nav a.active {
  color: var(--nav-active-text); font-weight: 600;
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.34), rgba(99, 102, 241, 0.2));
  box-shadow: inset 0 0 0 1px rgba(129, 140, 248, 0.45), 0 4px 14px rgba(99, 102, 241, 0.22);
}
.header-nav a:focus-visible { border-radius: 999px; }

.header-panel { border-radius: 999px; padding: 6px 12px; font-size: 12.5px; }
.header-panel .icon { width: 15px; height: 15px; color: var(--accent-text); }

.header-actions { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; flex-wrap: wrap; }

.user-chip {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-elevated);
  max-width: 190px;
}
.user-chip .avatar {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--accent), var(--accent-2));
  color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
  flex-shrink: 0;
}
.user-chip .who { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; text-align: left; }
.user-chip .who b { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chip .who span { font-size: 10px; color: var(--muted-2); }

/* ---------------------------------------------------------------------
   Konto-Menue
   ---------------------------------------------------------------------
   Abrechnung, Einstellungen, Sprache, Darstellung und Abmelden liegen
   unter dem Namen statt nebeneinander in der Leiste — vorher standen dort
   fuenf Bedienelemente nebeneinander und draengten die Navigation um.

   Geoeffnet wird beim Ueberfahren; .open kommt vom Klick dazu und traegt
   Tastatur und Touch, wo es kein Ueberfahren gibt (public/js/common.js). */
.user-menu { position: relative; flex-shrink: 0; }

button.user-chip {
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
button.user-chip:hover { border-color: var(--border-hover); background: var(--card-hover); }
.user-chip .caret {
  width: 14px; height: 14px;
  color: var(--muted-2);
  flex-shrink: 0;
  transition: transform var(--transition);
}
.user-menu:hover .caret,
.user-menu.open .caret { transform: rotate(180deg); }

.user-pop {
  position: absolute;
  top: 100%; right: 0;
  margin-top: 8px;
  min-width: 240px;
  padding: 6px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
/* Zwischen Chip und Menue liegen 8 Pixel Luft. Ohne diese Bruecke faellt
   der Mauszeiger auf dem Weg nach unten kurz heraus und das Menue klappt
   unter der Hand zu. */
.user-pop::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: -10px;
  height: 10px;
}
.user-menu:hover > .user-pop,
.user-menu.open > .user-pop { opacity: 1; visibility: visible; transform: none; }

.user-pop-head {
  display: flex; flex-direction: column; gap: 1px;
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
  min-width: 0;
}
.user-pop-head b { font-size: 12.5px; font-weight: 650; }
.user-pop-head span {
  font-size: 11px; color: var(--muted-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.user-pop-item {
  display: flex; align-items: center; gap: var(--sp-2);
  width: 100%;
  padding: 8px 10px;
  border: 0; border-radius: var(--radius-sm);
  background: none;
  font-family: inherit; font-size: 12.5px; font-weight: 500;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.user-pop-item:hover { background: var(--hover-tint); color: var(--text); }
.user-pop-item .icon { width: 15px; height: 15px; color: var(--muted-2); flex-shrink: 0; }
.user-pop-item:hover .icon { color: var(--accent-text); }
.user-pop-item.danger { color: var(--red-text); }
.user-pop-item.danger:hover { background: var(--red-soft); color: var(--red-text); }
.user-pop-item.danger .icon,
.user-pop-item.danger:hover .icon { color: var(--red-text); }

.user-pop-sep { height: 1px; background: var(--border); margin: 6px 0; }

.user-pop-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: 4px 10px 4px;
  font-size: 12.5px; font-weight: 500;
  color: var(--muted);
}

/* ---------------------------------------------------------------------
   Seitenkopf (Titel + Steuerung)
   --------------------------------------------------------------------- */
.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  flex-wrap: wrap;
}
.page-head h1 { font-size: 22px; font-weight: 680; letter-spacing: -0.02em; margin: 0; }
.page-head .head-text { min-width: 0; }

/* Tagesgruss ueber der Ueberschrift. Er steht vor dem Laden des Kontos
   nicht da — die Ueberschrift darf deshalb nicht springen, also traegt der
   Absatz seine Hoehe auch leer (min-height statt Einblenden von oben). */
.greeting {
  margin: 0 0 1px;
  min-height: 17px;
  font-size: 12.5px; font-weight: 500;
  color: var(--muted-2);
}
.greeting b { color: var(--text); font-weight: 600; }
.page-head .controls { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.page-head .stamp { font-size: 11px; color: var(--muted-2); font-variant-numeric: tabular-nums; }

/* Die Merkmale eines Links unter der Ueberschrift — Typ, Tag, Seite, Ziel,
   IG-Account, Geo-Regel. Als Pillen nebeneinander statt als eine mit
   Punkten getrennte Zeile, in der alles ineinander lief. */
.page-head .slug-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 7px; }
.page-head .slug-chips:empty { display: none; }
.page-head .slug-chips a { color: inherit; }
.page-head h1 .slug-url { font-size: 18px; }

/* =====================================================================
   Zeitraumwahl — Knopf in der Kopfzeile, darunter Vorauswahl + Kalender
   ===================================================================== */
.range-picker { position: relative; }

.range-trigger {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 10px 5px 11px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: 999px;
  color: var(--text);
  font-family: inherit; font-size: 12.5px; font-weight: 500;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.range-trigger:hover { background: var(--card-hover); border-color: var(--border-hover); }
.range-trigger > .icon { color: var(--muted-2); }
.range-trigger .range-label { font-variant-numeric: tabular-nums; }
.range-trigger .chev { width: 14px; height: 14px; color: var(--muted-2); transition: transform var(--transition); }
.range-trigger[aria-expanded="true"] { border-color: var(--accent); background: var(--card-hover); }
.range-trigger[aria-expanded="true"] .chev { transform: rotate(180deg); }

.range-pop {
  display: none;
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  width: 290px; max-width: calc(100vw - 32px);
  padding: var(--sp-3);
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  text-align: left;
}
.range-pop.is-open { display: block; animation: rise-in 160ms cubic-bezier(0.16, 1, 0.3, 1); }

.range-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.range-preset {
  padding: 7px 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--muted);
  font-family: inherit; font-size: 12px; font-weight: 500;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.range-preset:hover { background: var(--card-hover); color: var(--text); border-color: var(--border-light); }
.range-preset.active {
  background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text);
}

/* Kalender */
.cal-head {
  display: flex; align-items: center; justify-content: space-between;
  margin: var(--sp-3) 0 var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}
.cal-title { font-size: 12.5px; font-weight: 600; letter-spacing: -0.01em; }
.cal-nav {
  width: 26px; height: 26px; padding: 0;
  display: inline-grid; place-items: center;
  background: transparent; border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted); cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.cal-nav:hover:not(:disabled) { background: var(--card-hover); color: var(--text); }
.cal-nav:disabled { opacity: 0.3; cursor: not-allowed; }
.cal-nav .icon { width: 15px; height: 15px; }

.cal-dow, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-dow {
  margin-bottom: 4px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--muted-2); text-align: center;
}
.cal-grid { row-gap: 2px; }

.cal-blank { height: 32px; }
.cal-day {
  height: 32px; padding: 0;
  background: transparent; border: 0;
  color: var(--muted);
  font-family: inherit; font-size: 12px; font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.cal-day:hover:not(:disabled) { background: var(--card-hover); color: var(--text); }
.cal-day:disabled { color: var(--cal-disabled); cursor: not-allowed; }
/* Heute bleibt auch innerhalb der Auswahl erkennbar */
.cal-day.is-today { color: var(--accent-text); font-weight: 700; }
/* Kein Spaltenabstand: die Auswahl soll als durchgehendes Band lesbar sein */
.cal-day.in-range { background: var(--accent-soft); color: var(--text); border-radius: 0; }
.cal-day.is-start { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.cal-day.is-end { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.cal-day.is-start.is-end { border-radius: var(--radius-sm); }
.cal-day.is-start, .cal-day.is-end {
  background: var(--accent); color: #fff; font-weight: 600;
}
.cal-day.is-start:hover, .cal-day.is-end:hover { background: var(--accent-hover); color: #fff; }

.range-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  margin-top: var(--sp-3); padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}
.range-hint { font-size: 11px; color: var(--muted-2); font-variant-numeric: tabular-nums; }

/* Creator-Filter: nutzt Knopf und Aufklapper der Zeitraumwahl */
.creator-filter .range-trigger { max-width: 220px; }
.creator-filter .range-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.creator-filter .range-trigger.is-filtered { border-color: var(--accent); }
.creator-trigger-icon { display: inline-flex; color: var(--muted-2); }
.creator-stack { display: inline-flex; }
.creator-stack .creator-avatar { box-shadow: 0 0 0 2px var(--bg-elevated); }
.creator-stack .creator-avatar + .creator-avatar { margin-left: -7px; }
.creator-pop { width: 260px; padding: var(--sp-2); }
.creator-options { max-height: 320px; overflow-y: auto; }
.creator-option {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 8px;
  border-radius: var(--radius-sm);
  font-size: 12.5px; color: var(--text);
  cursor: pointer;
}
.creator-option:hover { background: var(--card-hover); }
.creator-option input { margin: 0; accent-color: var(--accent); flex-shrink: 0; }
.creator-option-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.creator-divider { height: 1px; margin: 4px 0; background: var(--border); }
.creator-empty { margin: 0; padding: 8px; font-size: 11.5px; color: var(--muted-2); }
.creator-pop .range-foot { margin-top: var(--sp-2); padding: var(--sp-2) 8px 2px; }
.creator-pop .range-foot a:hover { color: var(--text); text-decoration: underline; }

.creator-avatar {
  display: inline-grid; place-items: center; flex-shrink: 0;
  width: 24px; height: 24px; border-radius: 50%;
  object-fit: cover;
  background: linear-gradient(140deg, var(--accent), var(--accent-2));
  color: #fff; font-weight: 700; line-height: 1;
}
.creator-avatar.is-icon { background: var(--card); color: var(--muted-2); border: 1px solid var(--border); font-size: 11px; }
.creator-avatar.is-icon .icon { width: 13px; height: 13px; }
.creator-inline { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }

/* Upload-Fortschritt als Ring um das Profilbild. --progress (0..1) setzt
   das Skript; ohne Angabe dreht sich ein Viertelbogen. */
.creator-upload { position: relative; flex-shrink: 0; line-height: 0; }
.creator-upload-ring { display: none; }
.creator-upload.is-busy #avatarPreview { opacity: 0.55; transition: opacity var(--transition); }
.creator-upload.is-busy .creator-upload-ring {
  display: block; position: absolute; inset: -5px; border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--progress, 0) * 360deg), var(--border) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  transition: background 200ms linear;
}
.creator-upload.is-indeterminate .creator-upload-ring {
  background: conic-gradient(var(--accent) 90deg, var(--border) 0);
  animation: spin 900ms linear infinite;
}
#modalSave { display: inline-flex; align-items: center; gap: 7px; font-variant-numeric: tabular-nums; }
#modalSave:disabled { opacity: 0.85; cursor: progress; }

.creator-edit-avatar { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.creator-edit-avatar .hint { font-size: 11px; color: var(--muted-2); margin-top: 6px; line-height: 1.5; }
.creator-edit-buttons { display: flex; gap: var(--sp-2); }
.creator-edit-buttons label.btn { cursor: pointer; }
.creator-edit-avatar:has(#fAvatar:disabled) label.btn { opacity: 0.5; pointer-events: none; }

/* Schmale Fenster: die Kopfzeile bricht um, der Knopf steht dann links —
   rechts verankert liefe das Fenster aus dem Bild heraus. */
@media (max-width: 560px) {
  .range-pop { width: 280px; left: 0; right: auto; }
}
.btn-icon {
  width: 32px; height: 32px; padding: 0;
  display: inline-grid; place-items: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.btn-icon:hover:not(:disabled) { background: var(--card-hover); color: var(--text); border-color: var(--border-light); }
.btn-icon:disabled { opacity: 0.5; cursor: progress; }
.btn-icon .spinning { animation: spin 700ms linear infinite; transform-origin: 50% 50%; }
@keyframes spin { to { transform: rotate(360deg); } }

/* =====================================================================
   Dashboard-Raster (12 Spalten, siehe Dashboard_Aufbau.png)
   ===================================================================== */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--sp-4);
  /* stretch statt start: Panels einer Zeile sollen gleich hoch abschliessen,
     sonst steht unter dem Kachelblock eine Luecke neben dem Laender-Panel. */
  align-items: stretch;
}
.dash-grid > .section { display: flex; flex-direction: column; }
.dash-grid > .section > .donut-panel { flex: 1; align-content: center; }
.dash-grid > .span-3 { grid-column: span 3; }
.dash-grid > .span-6 { grid-column: span 6; }
.dash-grid > .span-12 { grid-column: 1 / -1; }

/* Die vier festen Kacheln: 2x2, gleich hoch wie das Laender-Panel daneben */
.dash-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); align-content: stretch; }
/* Vier Kacheln nebeneinander statt im Zweierblock: im Link-Dashboard steht
   der Block in einer halben Rasterspalte, auf einer vollbreiten Seite
   waeren zwei Kacheln je Zeile absurd breit. */
.dash-kpis.four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .dash-kpis.four { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .dash-kpis.four { grid-template-columns: 1fr; } }
.dash-kpis .card { animation: rise-in 320ms cubic-bezier(0.16, 1, 0.3, 1) backwards; display: flex; flex-direction: column; }
.dash-kpis .card:nth-child(1) { animation-delay: 0ms; }
.dash-kpis .card:nth-child(2) { animation-delay: 40ms; }
.dash-kpis .card:nth-child(3) { animation-delay: 80ms; }
.dash-kpis .card:nth-child(4) { animation-delay: 120ms; }

.card-kpi { position: relative; padding-right: 54px; }
.card-kpi .chip {
  position: absolute; top: var(--sp-4); right: var(--sp-4);
  width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-text);
}
.card-kpi .value { margin-top: 2px; }
/* Top-Creator-Kachel: Treppchen in der Reihenfolge 2 – 1 – 3. Die Stufen
   liegen auf einer gemeinsamen Grundlinie, die unterschiedliche Hoehe hebt
   den ersten Platz nach oben — der Rang ist so auch ohne Zahl zu sehen. */
.card-podium { padding-right: var(--sp-4); }
.card-podium .label { padding-right: 42px; }
.podium {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end; gap: var(--sp-2);
  margin-top: auto; padding-top: 10px;
}
.podium-step { display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center; }
.podium-step .creator-avatar { box-shadow: 0 0 0 2px var(--bg-elevated); }
.podium-name {
  margin-top: 6px; max-width: 100%;
  font-size: 11.5px; font-weight: 640; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.podium-clicks { font-size: 10.5px; color: var(--muted-2); margin-bottom: 6px; }
.podium-block {
  width: 100%; border-radius: 5px 5px 0 0;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700; color: rgba(0, 0, 0, 0.55);
}
.podium-step.is-1 .podium-block { height: 30px; background: linear-gradient(180deg, #f4c85a, #d9a026); }
.podium-step.is-2 .podium-block { height: 20px; background: linear-gradient(180deg, #ccd2da, #a6adb8); }
.podium-step.is-3 .podium-block { height: 13px; background: linear-gradient(180deg, #ddA97f, #b97f52); }

.card-kpi .sub { margin-top: auto; padding-top: 6px; }

.delta {
  display: inline-flex; align-items: center; gap: 3px;
  margin-top: 7px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  width: fit-content;
}
.delta.up { background: var(--green-soft); color: var(--green); }
.delta.down { background: var(--red-soft); color: var(--red-text); }
.delta.flat { background: var(--bg-elevated); color: var(--muted-2); }
.delta .icon { width: 12px; height: 12px; stroke-width: 2.4; }

/* Panel-Kopf: Titel links, Zusatzinfo rechts */
.panel-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3); margin-bottom: var(--sp-4);
}
.panel-head h2 {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--muted-2); font-weight: 600; margin: 0;
  display: flex; align-items: center; gap: 7px;
}
.panel-head .meta { font-size: 11px; color: var(--muted-2); font-weight: 400; }

/* =====================================================================
   Ringdiagramm — eine Bauform fuer Laender, Geraete und Ziele
   ===================================================================== */
.donut-panel { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--sp-5); align-items: center; }
.donut-panel.stacked { grid-template-columns: 1fr; gap: var(--sp-4); justify-items: center; }
.donut-panel.is-empty { grid-template-columns: 1fr; }
.donut-panel.stacked .donut-legend { width: 100%; }
.donut-wrap { position: relative; width: 100%; aspect-ratio: 1; }
.donut-panel.stacked .donut-wrap { max-width: 160px; }

.donut-legend { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.donut-legend button {
  display: grid; grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center; gap: var(--sp-2);
  width: 100%; min-height: 32px;
  padding: 4px 8px;
  background: transparent; border: 0; border-radius: var(--radius-sm);
  color: var(--muted); font: inherit; font-size: 12px; text-align: left;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.donut-legend button:hover, .donut-legend button.active { background: var(--card-hover); color: var(--text); }
.donut-legend .dot { width: 10px; height: 10px; border-radius: 3px; }
.donut-legend .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.donut-legend .name small { color: var(--muted-2); font-size: 11px; }
.donut-legend .pct { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text); font-size: 12px; }

/* =====================================================================
   Rangliste (Top-Links)
   ===================================================================== */
.rank-list { display: flex; flex-direction: column; gap: 2px; }
.rank-row {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) 96px;
  align-items: center; gap: var(--sp-3);
  padding: 7px 8px; border-radius: var(--radius-sm);
  transition: background var(--transition);
}
.rank-row:hover { background: var(--card-hover); }
.rank-row .rank { font-size: 11px; font-weight: 700; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.rank-row .main { min-width: 0; }
/* Nur die Beschriftung kuerzen — der Balken darunter ist ebenfalls ein span
   und wuerde mit ellipsis/nowrap nichts anfangen koennen. */
.rank-row .main > a, .rank-row .main > .name { display: block; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-row .track { display: block; height: 5px; border-radius: 999px; background: var(--border-light); margin-top: 7px; overflow: hidden; }
/* display:block ist hier nicht optional: als inline-Element haette der
   Fuellbalken weder Hoehe noch Breite. */
.rank-row .fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); min-width: 3px; transition: width 400ms cubic-bezier(0.16, 1, 0.3, 1); }
.rank-row .figures { text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; }
.rank-row .figures b { font-weight: 650; }
.rank-row .figures span { color: var(--muted-2); font-size: 11px; display: block; }

/* Eigene Legende fuer den Verlaufschart statt der von Chart.js */
.chart-legend { display: flex; gap: var(--sp-4); align-items: center; }
.chart-legend span { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); }
.chart-legend i { width: 9px; height: 9px; border-radius: 3px; display: block; }

/* =====================================================================
   Live-Ansicht — Globus mit Klicks, Seitenaufrufe, Besucherverhalten
   ===================================================================== */
.live-section .panel-head { flex-wrap: wrap; row-gap: var(--sp-2); align-items: center; }
.live-pulse {
  width: 8px; height: 8px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); animation: live-pulse 1.8s ease-out infinite;
}
@keyframes live-pulse { to { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); } }
.live-legend { flex-wrap: wrap; gap: var(--sp-3); }
.live-legend i { border-radius: 50%; }
.live-legend b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }

.live-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
  gap: var(--sp-4); align-items: stretch;
}
.live-globe-wrap {
  position: relative; height: 260px; border-radius: var(--radius); overflow: hidden;
}
.live-globe { position: absolute; inset: 0; cursor: grab; }
.live-globe:active { cursor: grabbing; }
.live-hint {
  position: absolute; left: var(--sp-3); bottom: var(--sp-2); font-size: 10.5px;
  color: var(--muted-2); pointer-events: none;
}
.live-empty { margin: 0; padding: var(--sp-5); color: var(--muted-2); font-size: 12px; text-align: center; }
.live-tip {
  display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; line-height: 1.4;
  font-family: inherit; color: var(--text);
}
.live-tip span { display: flex; align-items: center; gap: 6px; }
.live-tip i { width: 8px; height: 8px; border-radius: 50%; display: block; }
/* Tooltip-Huelle, die globe.gl selbst anlegt */
.float-tooltip-kap {
  background: var(--bg-elevated) !important; border: 1px solid var(--border-light);
  border-radius: var(--radius-sm) !important; padding: 7px 9px !important; box-shadow: var(--shadow);
}

.live-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.live-card {
  display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--sp-3);
}
.live-card-head { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; font-weight: 600; }
.live-chip {
  font-size: 10.5px; font-weight: 500; color: var(--muted-2); background: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1px 6px;
}
.live-card-value { display: flex; align-items: baseline; gap: var(--sp-2); font-size: 11px; }
.live-card-value strong { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.live-pv-chart { position: relative; height: 150px; margin-top: auto; }
.live-axis { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--muted-2); }

/* Kreise und Verbindungen oben buendig, der Trichter als Ganzes mittig in der Karte */
.funnel { display: flex; align-items: flex-start; justify-content: space-between; margin-block: auto; }
.funnel-step { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 52px; }
.funnel-dot-wrap { height: 58px; display: flex; align-items: center; justify-content: center; }
.funnel-dot {
  border-radius: 50%; transition: width var(--transition), height var(--transition);
  background: radial-gradient(circle at 35% 30%, var(--border-light), var(--card) 75%);
  border: 1px solid var(--border-light); position: relative;
}
.funnel-dot::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px;
  margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: var(--muted-2);
}
.funnel-step.final .funnel-dot {
  background: radial-gradient(circle at 35% 30%, rgba(34, 197, 94, 0.45), var(--green-soft) 75%);
  border-color: rgba(34, 197, 94, 0.5);
}
.funnel-step.final .funnel-dot::after { background: var(--green); }
.funnel-value { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.funnel-label { font-size: 10.5px; color: var(--muted-2); }
.funnel-link {
  flex: 1; height: 58px; display: flex; align-items: center; justify-content: center; position: relative;
  min-width: 24px;
}
.funnel-link::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed var(--border-light); }
.funnel-link span {
  position: relative; font-size: 10px; color: var(--muted); background: var(--bg-elevated);
  padding: 0 3px; font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* Trichter als waagerechte Stufen — sechs Stationen mit Beschriftung
   passen nicht als Kreisreihe nebeneinander (.funnel oben), und gelesen
   wird hier ohnehin der Absprung von Stufe zu Stufe. */
.funnel-row { padding: 9px 0; border-bottom: 1px solid var(--border); }
.funnel-row:last-child { border-bottom: 0; }
.funnel-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.funnel-row-label { font-size: 12.5px; font-weight: 550; display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.funnel-row-label .muted-2 { font-weight: 400; font-size: 11px; }
.funnel-row-value { font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.funnel-row-track { background: var(--bg-elevated); border-radius: 999px; height: 10px; overflow: hidden; margin: 6px 0 5px; }
.funnel-row-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width var(--transition);
}
.funnel-row.is-final .funnel-row-fill { background: linear-gradient(90deg, var(--accent-2), var(--green)); }
.funnel-row.is-final .funnel-row-value { color: var(--green); }
.funnel-row-foot {
  display: flex; justify-content: space-between; gap: var(--sp-3);
  font-size: 11px; color: var(--muted-2); font-variant-numeric: tabular-nums; flex-wrap: wrap;
}

@media (max-width: 1100px) {
  .live-grid { grid-template-columns: 1fr; }
  .live-globe-wrap { height: 280px; }
}
@media (max-width: 640px) {
  .live-cards { grid-template-columns: 1fr; }
  .live-pv-chart { height: 110px; }
}

.sort-caret { display: inline-block; margin-left: 4px; font-size: 9px; vertical-align: 1px; }

/* ---------------------------------------------------------------------
   Responsiv
   --------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .designer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .designer-preview { grid-column: 1 / -1; grid-row: auto; order: 10; }
  .preview-card { position: static; }
  .dash-grid > .span-6 { grid-column: 1 / -1; }
  .dash-grid > .span-3 { grid-column: span 6; }
}
@media (max-width: 900px) {
  .two-col { grid-template-columns: 1fr; }
  .designer-grid { grid-template-columns: minmax(0, 1fr); }
  .item-grid { grid-template-columns: 1fr; }
  .item-body { padding-left: 6px; }
  .item-card.social .item-head { flex-wrap: wrap; }
  .item-card.social .item-head > input[type="url"] { flex-basis: calc(100% - 180px); }
  .dash-grid > .span-3 { grid-column: 1 / -1; }
  .donut-panel { grid-template-columns: 1fr; justify-items: center; }
  .donut-panel .donut-wrap { max-width: 200px; }
  .donut-panel .donut-legend { width: 100%; }
  .app-header { gap: var(--sp-3); padding: 10px var(--sp-4); }
  .header-nav { order: 3; width: 100%; justify-content: space-between; }
  .header-nav a { flex: 1; justify-content: center; padding: 7px 12px; }
}
@media (max-width: 640px) {
  .layout { padding: var(--sp-3) var(--sp-3) 56px; }
  .topbar { align-items: flex-start; }
  .topbar h1 { font-size: 15px; }
  .grid-cards { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-2); }
  .card { padding: var(--sp-3); }
  .card .value { font-size: 21px; }
  .dash-kpis { grid-template-columns: 1fr; }
  .dash-grid { gap: var(--sp-3); }
  .page-head h1 { font-size: 19px; }
  .user-chip .who { display: none; }
  .user-chip { padding: 4px; }
  .user-pop { right: 0; min-width: 220px; max-width: calc(100vw - 32px); }
  .rank-row { grid-template-columns: 18px minmax(0, 1fr) 78px; gap: var(--sp-2); }
  .detail-stats { gap: var(--sp-4); }
  .reel-row { grid-template-columns: 90px 1fr 70px 70px; }
  .reel-row > :nth-child(5), .reel-row > :nth-child(6) { display: none; }
}

/* Tabellen dürfen scrollen, die Seite nicht */
.table-scroll { overflow-x: auto; margin: 0 calc(var(--sp-4) * -1); padding: 0 var(--sp-4); }

/* =====================================================================
   Heller Modus — gleiche Tokens, helle Werte. Umschalter in der Kopfzeile,
   gesetzt ueber data-theme auf <html> (siehe /static/js/theme.js).
   ===================================================================== */
:root[data-theme="light"] {
  --bg: #f3f5fb;
  --bg-fade: rgba(243, 245, 251, 0);
  --bg-elevated: #f5f7fb;
  --card: #ffffff;
  --card-hover: #f1f4fa;
  --border: rgba(15, 23, 42, 0.08);
  --border-light: rgba(15, 23, 42, 0.14);

  --text: #0f172a;
  --muted: #334155;
  --muted-2: #5b6b82;

  --accent: #6366f1;
  --accent-hover: #4f46e5;
  --accent-soft: rgba(99, 102, 241, 0.1);
  --accent-2: #8b5cf6;
  --accent-text: #4f46e5;
  --brand: #0ea5e9;
  --green: #16a34a;
  --green-soft: rgba(22, 163, 74, 0.1);
  --red: #dc2626;
  --red-soft: rgba(220, 38, 38, 0.08);
  --red-text: #dc2626;
  --orange: #d97706;
  --orange-soft: rgba(217, 119, 6, 0.1);
  --purple: #9333ea;
  --purple-soft: rgba(147, 51, 234, 0.1);

  --chart-rest: #cbd5e1;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.12);

  --card-end: #fbfcff;
  --card-sheen: rgba(255, 255, 255, 0.9);
  --row-border: rgba(15, 23, 42, 0.06);
  --border-hover: #aab4c8;
  --hover-tint: rgba(15, 23, 42, 0.05);
  --placeholder: #8a96a8;
  --scrim: rgba(15, 23, 42, 0.38);
  --scrim-soft: rgba(255, 255, 255, 0.78);
  --sunken: #f8f9fd;
  --nav-bg: #eef1f8;
  --nav-active-text: #312e81;
  --item-open: #f7f8fe;
  --track: #dde3ee;
  --knob-off: #ffffff;
  --swatch-border: rgba(15, 23, 42, 0.16);
  --scroll-hover: rgba(15, 23, 42, 0.25);
  --cal-disabled: #c3cad6;
  --orange-text: #b45309;
  --green-text: #15803d;
  --scheme: light;
}
:root[data-theme="light"] body::before {
  background: radial-gradient(120% 100% at 50% 0%, rgba(99, 102, 241, 0.08) 0%, transparent 70%);
}
:root[data-theme="light"] .card,
:root[data-theme="light"] .section,
:root[data-theme="light"] .hub-card { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 18px rgba(15, 23, 42, 0.04); }
:root[data-theme="light"] .app-header { background: color-mix(in srgb, #ffffff 82%, transparent); }
:root[data-theme="light"] .header-nav a.active {
  background: linear-gradient(180deg, #ffffff, #f3f3ff);
  box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.35), 0 4px 14px rgba(99, 102, 241, 0.16);
}
:root[data-theme="light"] .switch-track::after { box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25); }
/* Die Bildmarke ist weiss mit Neon-Schimmer und verschwaende auf heller
   Flaeche — im hellen Modus steht sie deshalb auf einer dunklen Kachel. */
:root[data-theme="light"] .login-logo,
:root[data-theme="light"] .hub-logo,
:root[data-theme="light"] .app-header .brand img {
  box-sizing: content-box;
  background: radial-gradient(120% 120% at 30% 20%, #1e2748 0%, #0b0f1e 70%);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  filter: none;
}
:root[data-theme="light"] .app-header .brand img { width: 26px; height: 26px; padding: 3px; border-radius: 9px; }
:root[data-theme="light"] .login-logo { width: 52px; height: 52px; padding: 6px; border-radius: 16px; }
:root[data-theme="light"] .hub-logo { width: 88px; padding: 12px; border-radius: 26px; }
:root[data-theme="light"] .btn-primary { box-shadow: 0 2px 10px rgba(99, 102, 241, 0.25); }

/* Weicher Wechsel nur waehrend des Umschaltens, nicht bei jedem Hover */
html.theme-switching, html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after {
  transition: background-color 260ms ease, border-color 260ms ease, color 260ms ease, box-shadow 260ms ease, fill 260ms ease, transform 280ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Umschalter Hell / Dunkel */
.theme-toggle {
  position: relative;
  width: 58px; height: 32px; padding: 0; flex-shrink: 0;
  background: var(--nav-bg); border: 1px solid var(--border-light); border-radius: 999px;
  cursor: pointer; color: var(--muted-2);
  transition: border-color var(--transition), background var(--transition);
}
.theme-toggle:hover { border-color: var(--border-hover); }
.theme-toggle .knob {
  position: absolute; top: 3px; left: 3px;
  width: 24px; height: 24px; border-radius: 50%;
  background: linear-gradient(140deg, var(--accent), var(--accent-2));
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1), background 280ms ease;
}
:root[data-theme="light"] .theme-toggle .knob {
  transform: translateX(26px);
  background: linear-gradient(140deg, #fbbf24, #f59e0b);
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
}
.theme-toggle .icon { position: absolute; top: 8px; width: 14px; height: 14px; stroke-width: 2; transition: color 200ms ease; }
.theme-toggle .i-moon { left: 8px; color: #fff; }
.theme-toggle .i-sun { right: 8px; }
:root[data-theme="light"] .theme-toggle .i-moon { color: var(--muted-2); }
:root[data-theme="light"] .theme-toggle .i-sun { color: #fff; }

/* Sprachumschalter in der Kopfzeile — gleiche Bauform wie der Schalter fuer
   Hell/Dunkel daneben, nur mit zwei beschrifteten Haelften statt Symbolen.
   Der Zustand haengt am lang-Attribut von <html> (siehe /static/js/lang.js),
   nicht an einer eigenen Klasse. */
.lang-toggle {
  position: relative; display: flex; align-items: center;
  width: fit-content; height: 32px; padding: 3px; flex-shrink: 0;
  background: var(--nav-bg); border: 1px solid var(--border-light); border-radius: 999px;
  transition: border-color var(--transition), background var(--transition);
}
.lang-toggle:hover { border-color: var(--border-hover); }
.lang-toggle button {
  position: relative; z-index: 1;
  width: 28px; height: 24px; padding: 0; margin: 0; border: 0; background: none;
  border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.03em;
  color: var(--muted-2);
  transition: color 200ms ease;
}
.lang-toggle button:hover { color: var(--text); }
.lang-toggle button[aria-pressed="true"] { color: #fff; }
.lang-toggle button[aria-pressed="true"]:hover { color: #fff; }
.lang-toggle .knob {
  position: absolute; top: 3px; left: 3px;
  width: 28px; height: 24px; border-radius: 999px;
  background: linear-gradient(140deg, var(--accent), var(--accent-2));
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
:root[lang="en"] .lang-toggle .knob { transform: translateX(28px); }

@media (prefers-reduced-motion: reduce) {
  .btn-icon .spinning, .spinning { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------------------------------------------------------------------
   E-Mail-Bestaetigung
   --------------------------------------------------------------------- */
/* Eingabefeld fuer den 6-stelligen Code. Gross und weit gesperrt, damit
   sich beim Abtippen aus der Mail keine Ziffer verliert. */
.verify-box { margin-top: var(--sp-4); text-align: left; }
.verify-hint { color: var(--muted-2); font-size: 12.5px; margin: 0 0 var(--sp-3); line-height: 1.6; }
.verify-hint b { color: var(--text); font-weight: 600; }
.verify-form { display: flex; gap: var(--sp-2); align-items: stretch; }
.verify-code {
  flex: 1; min-width: 0; padding: 9px 12px; text-align: center;
  font-size: 20px; letter-spacing: 6px; font-weight: 650;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.verify-form button { white-space: nowrap; }
.verify-resend { color: var(--muted-2); font-size: 11.5px; margin: var(--sp-2) 0 0 !important; }
.verify-resend a { font-weight: 600; }
/* Auf den schmalen Anmeldekarten stehen Feld und Knopf untereinander,
   beide volle Breite wie im restlichen Formular. Die Kartenregeln fuer
   input/button bringen eigene Abstaende mit — die fallen hier weg. */
.login-box .verify-box { text-align: center; }
.login-box .verify-form { flex-direction: column; gap: var(--sp-3); }
.login-box .verify-code { width: 100%; margin: 0; padding: 12px; }
.login-box .verify-form button { width: 100%; margin: 0; }

/* Behaelter fuer die Banner oben. Es kann mehr als einen geben (offene
   Adresse und faellige Verlaengerung zugleich) — zwei eigene sticky-
   Streifen laegen uebereinander, ein gemeinsamer klebender Stapel nicht.
   Gefuellt wird er von mountTopBar() in public/js/common.js. */
.top-bar-stack { position: sticky; top: 0; z-index: 60; }
/* Auf dem Handy bricht der Kopf schon zweizeilig um — Banner und Kopf
   zusammen fraessen zu viel vom Bildschirm. Dort scrollt der Banner weg. */
@media (max-width: 640px) {
  .top-bar-stack { position: static; }
  :root { --top-bars-h: 0px !important; }
}

/* Banner auf allen Panelseiten, solange die Adresse offen ist. */
.verify-bar {
  background: var(--orange-soft); border-bottom: 1px solid rgba(245, 158, 11, 0.3);
  color: var(--orange-text); padding: 10px var(--sp-4);
}
.verify-bar-inner {
  display: flex; align-items: center; gap: var(--sp-2);
  max-width: 1180px; margin: 0 auto; font-size: 12.5px;
}
.verify-bar-text { flex: 1; min-width: 0; }
.verify-bar-form { max-width: 420px; margin: var(--sp-3) auto 4px; }
.verify-bar-form .verify-hint { color: inherit; opacity: 0.85; }

/* Verlaengerung faellig. Dieselbe Geometrie wie oben; rot wird der
   Streifen erst, wenn die Sperre in Sichtweite ist. */
.renew-bar {
  background: var(--orange-soft); border-bottom: 1px solid rgba(245, 158, 11, 0.3);
  color: var(--orange-text); padding: 10px var(--sp-4);
}
.renew-bar.is-urgent {
  background: var(--red-soft); border-bottom-color: rgba(239, 68, 68, 0.35);
  /* --red-text statt --red: die kleine Schrift braucht den helleren Ton,
     sonst bleibt der Kontrast unter 4.5:1 (siehe Tokenblock oben). */
  color: var(--red-text);
}
.renew-bar-inner {
  display: flex; align-items: center; gap: var(--sp-2);
  max-width: 1180px; margin: 0 auto; font-size: 12.5px;
}
.renew-bar-text { flex: 1; min-width: 0; }
/* Der Knopf darf beim Umbruch auf schmalen Geraeten nicht zerdrueckt
   werden — der Streifen ist sonst zwar zu lesen, aber nicht zu benutzen. */
.renew-bar .btn { flex: none; }
@media (max-width: 560px) {
  .renew-bar-inner { flex-wrap: wrap; }
  .renew-bar-text { flex: 1 0 100%; }
}

/* Probezeit. Solange sie laeuft, ein freundlicher Hinweis in der
   Akzentfarbe statt Orange — noch ist nichts faellig. Die letzten zwei
   Tage uebernimmt .is-urgent von oben. */
.trial-bar:not(.is-urgent) {
  background: var(--accent-soft); border-bottom-color: rgba(99, 102, 241, 0.3);
  color: var(--accent-text);
}
.trial-bar b { font-weight: 650; }

/* ---------------------------------------------------------------------
   Paketauswahl im Hub
   --------------------------------------------------------------------- */
/* Ohne gebuchtes Paket bleiben die Kacheln sichtbar, aber unscharf und
   ohne Ziel: was es zu holen gibt, soll erkennbar bleiben. */
.hub-grid.locked {
  filter: blur(6px); pointer-events: none; user-select: none;
  opacity: 0.6; transition: filter 0.2s ease;
}
.plan-gate { width: 100%; max-width: 860px; text-align: center; }
.plan-gate h2 { font-size: 16px; margin: 0 0 6px; font-weight: 650; }
.plan-gate > p { color: var(--muted-2); font-size: 12.5px; margin: 0 0 var(--sp-4); line-height: 1.6; }
.plan-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--sp-3); }
.plan-card {
  position: relative; text-align: left;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: var(--sp-4);
  display: flex; flex-direction: column; gap: 6px;
}
.plan-card.featured { border-color: rgba(99, 102, 241, 0.45); }
.plan-badge {
  position: absolute; top: -9px; right: var(--sp-4);
  background: var(--accent-soft); border: 1px solid rgba(99, 102, 241, 0.3);
  color: var(--accent-text); border-radius: 999px;
  padding: 2px 9px; font-size: 10.5px; font-weight: 650; letter-spacing: 0.02em;
}
.plan-card h3 { font-size: 13.5px; margin: 0; font-weight: 650; }
.plan-price { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.plan-price span { font-size: 11.5px; font-weight: 500; color: var(--muted-2); margin-left: 4px; }
.plan-meta { font-size: 11.5px; color: var(--muted-2); }
.plan-card p { font-size: 12px; color: var(--muted-2); margin: 0; line-height: 1.55; flex: 1; }
.plan-card button { width: 100%; justify-content: center; margin-top: var(--sp-2); }
/* Das gebuchte Paket in der Wechselauswahl: ruhig, aber erkennbar — es ist
   kein Angebot, sondern der Ausgangspunkt. */
.plan-card.is-current { border-color: var(--border-light); background: var(--sunken); }
/* Kostenloser Test im Hub: das Angebot ueber den Karten, die Turnstile-
   Pruefung (falls eingeschaltet) darunter. */
.trial-offer {
  background: var(--accent-soft); border: 1px solid rgba(99, 102, 241, 0.3); color: var(--accent-text);
  border-radius: 10px; padding: 10px 14px; font-size: 12.5px; line-height: 1.6; margin: 0 0 var(--sp-4);
}
.trial-offer b { font-weight: 650; }
.trial-check { display: flex; justify-content: center; margin-top: var(--sp-3); }
.plan-card button + button { margin-top: 6px; }

/* ---------------------------------------------------------------------
   Abrechnung
   --------------------------------------------------------------------- */
/* Kopf des Abonnements: links Paket, Preis und Umfang, rechts die
   Schaltflaechen. Auf schmalen Schirmen rutschen sie untereinander. */
.sub-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.sub-plan {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  font-size: 16px; font-weight: 650; letter-spacing: -0.01em;
}
.sub-price {
  font-size: 30px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.2;
  margin-top: 2px;
}
.sub-price span { font-size: 12.5px; font-weight: 500; color: var(--muted-2); margin-left: 5px; }
.sub-actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.sub-hero + .detail-stats { margin-top: var(--sp-5); }

/* Die Streifen ueber der Seite stehen mehrfach untereinander, wenn mehr
   als eine Besonderheit zutrifft. */
#notices .notice { margin-bottom: var(--sp-3); }
#notices .notice b { font-weight: 650; }

.method-head { margin-bottom: var(--sp-2); }

/* Der Countdown auf der Sperrseite: .notice legt seine Kinder nebeneinander,
   hier gehoeren Beschriftung, Uhr und Datum untereinander. */
#countdownBox { display: block; }

/* Verbrauchszeilen. Die Balkenliste aus dem Dashboard traegt sie, nur der
   Wert braucht mehr Platz: „0 of 100 MB" passt nicht in die 64 Pixel, die
   dort fuer reine Zahlen reichen. Und bei null Belegung soll gar nichts
   stehen — der 3-Pixel-Rest des Balkens sieht sonst nach „ein bisschen"
   aus, wo nichts ist. */
.bar-row.usage { grid-template-columns: 130px 1fr auto; }
.bar-row.usage .bar-value { white-space: nowrap; }
.bar-row.usage .bar-fill.is-empty { min-width: 0; }

/* Auge-Schalter in Passwortfeldern (public/js/pwtoggle.js). Die
   Spezifitaet ueber .login-box muss sein, sonst greift dort die
   volle Breite der Formularknoepfe. */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 40px; }
.login-box .pw-wrap .pw-toggle,
.pw-wrap .pw-toggle {
  position: absolute; top: 0; right: 0; height: 100%; width: 38px;
  margin: 0; padding: 0; display: flex; align-items: center; justify-content: center;
  background: none; border: 0; box-shadow: none; color: var(--muted-2); cursor: pointer;
}
.login-box .pw-wrap { margin-bottom: var(--sp-3); }
.login-box .pw-wrap input { margin-bottom: 0; }
.pw-wrap .pw-toggle:hover { color: var(--text); }
.pw-wrap .pw-toggle:focus-visible { outline: 2px solid var(--accent, currentColor); outline-offset: -4px; border-radius: 6px; }

/* Einstellungen → API & KI */
.api-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--sp-4); }
.api-grid > div { min-width: 0; }
@media (max-width: 860px) { .api-grid { grid-template-columns: 1fr; } }
.api-sub { font-size: 12px; font-weight: 600; color: var(--muted); margin: var(--sp-3) 0 var(--sp-2); }
.api-endpoint { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: 6px; min-width: 0; }
.api-endpoint .api-label { font-size: 11.5px; color: var(--muted-2); width: 84px; flex-shrink: 0; }
.api-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  background: var(--bg-2, rgba(127,127,127,0.08));
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 8px;
  overflow-x: auto;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}
pre.api-code { white-space: pre; margin: 0 0 var(--sp-2); }
.api-row { display: flex; align-items: center; gap: var(--sp-2); padding: 8px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.api-row:last-child { border-bottom: 0; }
.api-row .api-row-main { flex: 1; min-width: 160px; }
.api-row .api-row-meta { font-size: 11px; color: var(--muted-2); }
.api-new-key { border: 1px solid rgba(34,197,94,0.35); background: var(--green-soft); border-radius: var(--radius-lg); padding: var(--sp-3); margin: var(--sp-3) 0; }
.api-new-key p { margin: 0 0 6px; font-size: 12px; }
.api-locked { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.api-form { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: flex-end; }
.api-form .field { margin-bottom: 0; flex: 1; min-width: 140px; }