/* =====================================================================
   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-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-bottom: 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; }
.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; }

.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(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); }

/* ---------------------------------------------------------------------
   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); }
.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: 0;
  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; }
.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); }

/* ---------------------------------------------------------------------
   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; }

/* =====================================================================
   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; }
.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; }
/* Der Top-Link traegt einen Namen statt einer Zahl — 25px wuerde umbrechen. */
.card-kpi.card-text .value { font-size: 17px; font-weight: 640; line-height: 1.3; word-break: break-all; }
.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;
}

@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; }
  .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; }

@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;
  }
}