/* allsmartllm.com landing — extracted from the design template.
 *
 * Palette + font choices are the brand's identity; the components
 * (cards, pills, sheet, table) are consumed by both index.html and
 * later by the zentrale/dashboard. Do not fork styles per page — add
 * to this file and keep the class names shared. */

:root {
  --bg: #0A0B10;
  --surface: #111320;
  --surface-2: #151827;
  --border: rgba(129, 140, 248, .14);
  --border-strong: rgba(129, 140, 248, .28);
  --indigo: #6366F1;
  --indigo-light: #818CF8;
  --indigo-glow: rgba(99, 102, 241, .16);
  --text: #E8EAF2;
  --muted: #8A90A6;
  --ok: #34D399;
  --display: 'Space Grotesk', system-ui, sans-serif;
  --body: 'Inter', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ---------- eyebrow tags: the "<" of the logo opens each section ---------- */
.tag-eyebrow { font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--indigo-light); letter-spacing: .02em; }
.tag-eyebrow::before { content: '<'; opacity: .55; margin-right: 1px; }
.tag-eyebrow::after { content: '>'; opacity: .55; margin-left: 1px; }

/* ---------- nav ---------- */
nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10, 11, 16, .82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-inner { display: flex; align-items: center; gap: 32px; height: 64px; }
.brand { display: flex; align-items: center; gap: 11px; margin-right: auto; }
.brand-name { font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -.01em; }
.brand-by { font-family: var(--mono); font-size: 11px; color: var(--muted); border: 1px solid var(--border); border-radius: 99px; padding: 2px 9px; margin-left: 2px; }
.nav-links { display: flex; gap: 26px; font-size: 14.5px; font-weight: 500; color: var(--muted); }
.nav-links a:hover { color: var(--text); }
.lang-switch {
  font-family: var(--mono); font-size: 12.5px; font-weight: 500;
  color: var(--muted); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 12px;
  transition: color .15s ease, border-color .15s ease;
}
.lang-switch:hover { color: var(--text); border-color: var(--border-strong); }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 14.5px;
  border-radius: 10px; padding: 10px 18px;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  cursor: pointer; border: none; font-family: var(--body);
}
.btn-primary { background: var(--indigo); color: #fff; box-shadow: 0 0 0 0 var(--indigo-glow); }
.btn-primary:hover { background: var(--indigo-light); transform: translateY(-1px); box-shadow: 0 6px 24px var(--indigo-glow); }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border-strong); }
.btn-ghost:hover { border-color: var(--indigo-light); }

/* logo mark */
.mark {
  width: 34px; height: 34px; border-radius: 9px;
  background: linear-gradient(135deg, #6A6DF4, #5A5CE6);
  display: grid; place-items: center; flex: none;
}
.mark svg { display: block; }

/* ---------- hero ---------- */
.hero { padding: 84px 0 56px; position: relative; overflow: hidden; }
.hero::before {
  content: ''; position: absolute; top: -220px; left: 50%;
  transform: translateX(-50%);
  width: 900px; height: 520px;
  background: radial-gradient(closest-side, var(--indigo-glow), transparent 70%);
  pointer-events: none;
}
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; position: relative; }
h1 { font-family: var(--display); font-size: 52px; line-height: 1.08; font-weight: 700; letter-spacing: -.02em; }
h1 .accent { color: var(--indigo-light); }
.hero-sub { margin-top: 20px; font-size: 17.5px; color: var(--muted); max-width: 52ch; }
.hero-sub strong { color: var(--text); font-weight: 500; }
.hero-ctas { margin-top: 30px; display: flex; gap: 14px; flex-wrap: wrap; }

/* datasheet terminal — signature element */
.sheet {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.sheet-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  font-family: var(--mono); font-size: 12.5px; color: var(--muted);
}
.dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ok); box-shadow: 0 0 8px rgba(52, 211, 153, .7); flex: none;
}
.sheet-head .path { margin-left: auto; opacity: .7; }
.sheet-body { padding: 18px 16px 20px; font-family: var(--mono); font-size: 13px; line-height: 1.85; min-height: 238px; }
.sheet-body .c { color: #5B6178; }
.sheet-body .k { color: var(--indigo-light); }
.sheet-body .v { color: var(--text); }
.sheet-body .g { color: var(--ok); }
.caret {
  display: inline-block; width: 7px; height: 15px;
  background: var(--indigo-light); vertical-align: -2px;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* counters */
.counters {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--border); border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden; margin-top: 64px;
}
.counter { background: var(--surface); padding: 22px 24px; }
.counter .num { font-family: var(--mono); font-size: 27px; font-weight: 600; letter-spacing: -.01em; }
.counter .lbl { font-size: 13px; color: var(--muted); margin-top: 4px; }
.counters-note { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-top: 12px; opacity: .85; }
.counters-note .g { color: var(--ok); }

/* ---------- sections ---------- */
section { padding: 88px 0; }
.sec-head { max-width: 640px; margin-bottom: 44px; }
h2 { font-family: var(--display); font-size: 34px; font-weight: 700; letter-spacing: -.015em; line-height: 1.15; margin-top: 10px; }
.sec-head p { color: var(--muted); margin-top: 12px; font-size: 16.5px; }

/* feature cards */
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 26px 26px 24px;
  transition: transform .18s ease, border-color .18s ease;
}
.card:hover { transform: translateY(-3px); border-color: var(--border-strong); }
.card h3 { font-family: var(--display); font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.card p { color: var(--muted); font-size: 15px; margin-top: 8px; }
.card .viz {
  margin-top: 20px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 11px;
  padding: 16px; font-family: var(--mono); font-size: 12.5px;
  line-height: 1.9; overflow: hidden;
}

/* viz: alias routing */
.route { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.chip { border: 1px solid var(--border-strong); border-radius: 8px; padding: 3px 9px; color: var(--text); }
.chip.alias { border-color: var(--indigo); color: var(--indigo-light); background: rgba(99, 102, 241, .08); }
.arrow { color: #5B6178; flex: none; }
.route .old { text-decoration: line-through; color: #5B6178; border-color: var(--border); }
.route-note { color: #5B6178; margin-top: 6px; }

/* viz: privacy stages */
.stage-row { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.stage { border: 1px solid var(--border); border-radius: 99px; padding: 3px 11px; color: var(--muted); font-size: 12px; }
.stage.active { border-color: var(--indigo); color: var(--indigo-light); background: rgba(99, 102, 241, .08); }
.masked { color: var(--indigo-light); background: rgba(99, 102, 241, .1); border-radius: 5px; padding: 1px 5px; }

/* viz: EU path */
.path-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.node { border: 1px solid var(--border-strong); border-radius: 8px; padding: 5px 11px; }
.node.home { border-color: var(--ok); color: var(--ok); }
.node.blocked { color: #5B6178; border-style: dashed; }
.shield { color: var(--indigo-light); }

/* viz: measured bars */
.bar-row { display: grid; grid-template-columns: 120px 1fr 64px; gap: 10px; align-items: center; margin: 7px 0; }
.bar-label { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { height: 7px; background: rgba(129, 140, 248, .09); border-radius: 99px; overflow: hidden; }
.bar-fill { height: 100%; background: linear-gradient(90deg, var(--indigo), var(--indigo-light)); border-radius: 99px; width: 0; transition: width 1s cubic-bezier(.2, .7, .2, 1); }
.bar-val { color: var(--text); font-size: 12px; text-align: right; }
.viz-foot { color: #5B6178; font-size: 11.5px; margin-top: 10px; }

/* ---------- steps ---------- */
.steps { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 20px; }
.step {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 26px;
}
.step-no { font-family: var(--mono); font-size: 12.5px; color: var(--indigo-light); margin-bottom: 10px; }
.step h3 { font-family: var(--display); font-size: 19px; font-weight: 600; }
.step p { color: var(--muted); font-size: 14.5px; margin-top: 8px; }
.keyline {
  margin-top: 18px; font-family: var(--mono); font-size: 12.5px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 9px; padding: 10px 12px; color: var(--muted);
  display: flex; justify-content: space-between; gap: 10px;
}
.keyline .v { color: var(--text); }
pre {
  margin-top: 18px; background: #0C0E17;
  border: 1px solid var(--border); border-radius: 11px;
  padding: 14px 16px; font-family: var(--mono); font-size: 12.5px;
  line-height: 1.75; overflow-x: auto; color: var(--muted);
}
pre .k { color: var(--indigo-light); }
pre .s { color: var(--ok); }
.steps-note { margin-top: 18px; font-size: 14px; color: var(--muted); }
.steps-note b { color: var(--text); font-weight: 600; }

/* ---------- models teaser ---------- */
.table-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
th {
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  color: var(--muted); text-align: left;
  padding: 14px 20px; border-bottom: 1px solid var(--border);
  letter-spacing: .03em;
}
td { padding: 14px 20px; border-bottom: 1px solid var(--border); }
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: rgba(129, 140, 248, .04); }
.mono { font-family: var(--mono); font-size: 13px; }
.pill { font-family: var(--mono); font-size: 11.5px; border-radius: 99px; padding: 2px 10px; border: 1px solid var(--border-strong); }
.pill.loaded { color: var(--ok); border-color: rgba(52, 211, 153, .4); }
.pill.od { color: var(--muted); }
.alias-pill {
  color: var(--indigo-light); background: rgba(99, 102, 241, .08);
  border: 1px solid var(--indigo); border-radius: 8px;
  padding: 2px 9px; font-family: var(--mono); font-size: 12px;
}
.table-foot {
  padding: 16px 20px; font-size: 14px; color: var(--muted);
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap;
}
.link { color: var(--indigo-light); font-weight: 500; }
.link:hover { text-decoration: underline; }

/* ---------- CTA ---------- */
.cta { border-top: 1px solid var(--border); text-align: center; padding: 96px 0; }
.cta h2 { font-size: 38px; }
.cta p { color: var(--muted); margin-top: 14px; font-size: 16.5px; }
.cta .hero-ctas { justify-content: center; }

/* ---------- footer ---------- */
footer { border-top: 1px solid var(--border); padding: 44px 0 56px; font-size: 14px; color: var(--muted); }
.foot-grid { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
.foot-family { font-family: var(--mono); font-size: 12.5px; margin-top: 10px; }
.foot-family a:hover { color: var(--text); }
.foot-links { display: flex; gap: 22px; flex-wrap: wrap; }
.foot-links a:hover { color: var(--text); }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  h1 { font-size: 40px; }
  .counters { grid-template-columns: 1fr 1fr; }
  .cards { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .nav-links { display: none; }
}
@media (max-width: 560px) {
  h1 { font-size: 33px; }
  .counters { grid-template-columns: 1fr 1fr; }
  .counter { padding: 16px 18px; }
  .counter .num { font-size: 21px; }
  th:nth-child(3), td:nth-child(3) { display: none; }
}
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--indigo-light);
  outline-offset: 2px;
  border-radius: 8px;
}

/* ============================================================================
 * Login page — split layout with brand pane + form card.
 *
 * Kept in this same file so the palette variables + shared components
 * (btn, brand mark, tag-eyebrow, dot) travel together. If the login
 * page ever gets its own bundle, extract this block to login.css and
 * @import the palette rules.
 * ==========================================================================*/

body.login-page { min-height: 100vh; margin: 0; }
.login-page .split { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }

/* ----- left brand pane ----- */
.login-page .pane {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 44px 52px; border-right: 1px solid var(--border);
  background:
    radial-gradient(1000px 600px at -10% -10%, rgba(99,102,241,.14), transparent 60%),
    var(--bg);
}
.login-page .pane::after {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 56px 56px; opacity: .22;
  mask-image: radial-gradient(720px 480px at 20% 15%, #000, transparent 75%);
  pointer-events: none;
}
.login-page .pane > * { position: relative; z-index: 1; }

.login-page .pane-mid { max-width: 440px; }
.login-page .pane-mid h1 {
  font-family: var(--display); font-size: 34px; line-height: 1.14;
  font-weight: 700; letter-spacing: -.02em; margin-top: 12px;
}
.login-page .pane-mid h1 .accent { color: var(--indigo-light); }
.login-page .pane-mid p { color: var(--muted); margin-top: 14px; font-size: 15.5px; }

.login-page .ticker {
  margin-top: 28px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 13px;
  overflow: hidden; max-width: 400px;
}
.login-page .ticker-head {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 14px; border-bottom: 1px solid var(--border);
  font-family: var(--mono); font-size: 11.5px; color: var(--muted);
}
.login-page .ticker-body {
  padding: 12px 14px; font-family: var(--mono);
  font-size: 12px; line-height: 1.9; color: var(--muted);
}
.login-page .ticker-body .k { color: var(--indigo-light); }
.login-page .ticker-body .g { color: var(--ok); }
.login-page .pane-foot { font-size: 12.5px; color: #5B6178; }
.login-page .pane-foot a:hover { color: var(--muted); }

/* ----- right form side ----- */
.login-page .form-side { display: grid; place-items: center; padding: 44px 24px; }
.login-page .card { width: 100%; max-width: 400px; }

.login-page .seg {
  display: flex; background: var(--surface);
  border: 1px solid var(--border); border-radius: 11px;
  padding: 4px; gap: 4px; margin-bottom: 26px;
}
.login-page .seg button {
  flex: 1; background: none;
  border: 1px solid transparent; border-radius: 8px;
  padding: 9px 10px; font-size: 14px; font-weight: 600;
  color: var(--muted); transition: background .15s, color .15s;
  font-family: var(--body); cursor: pointer;
}
.login-page .seg button.on {
  background: #1A1E30; color: var(--text); border-color: var(--border-strong);
}

.login-page h2 {
  font-family: var(--display); font-size: 23px;
  font-weight: 700; letter-spacing: -.015em;
}
.login-page .sub {
  color: var(--muted); font-size: 14px;
  margin-top: 5px; margin-bottom: 24px;
}
.login-page .sub b { color: var(--text); font-weight: 600; }
.login-page .sub .free { font-family: var(--mono); font-size: 12.5px; color: var(--ok); }

.login-page .field { margin-bottom: 16px; }
.login-page .field label {
  display: block; font-size: 12.5px; font-weight: 600;
  color: var(--muted); margin-bottom: 7px;
}
.login-page .inp { position: relative; }
.login-page .inp input {
  width: 100%; background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: 10px;
  padding: 11px 13px; color: var(--text);
  font-size: 14.5px; font-family: var(--body);
}
.login-page .inp input::placeholder { color: #5B6178; }
.login-page .inp input:focus { outline: 2px solid var(--indigo-light); outline-offset: 1px; }
.login-page .inp .peek {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: #5B6178;
  font-family: var(--mono); font-size: 11.5px;
  padding: 5px 8px; border-radius: 7px; cursor: pointer;
}
.login-page .inp .peek:hover { color: var(--text); }

.login-page .row-between {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: var(--muted); margin: -4px 0 18px;
}
.login-page .row-between a:hover { color: var(--indigo-light); }

.login-page .check {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 13px; color: var(--muted); margin-bottom: 18px;
}
.login-page .check input { margin-top: 3px; accent-color: var(--indigo); }
.login-page .check a { color: var(--indigo-light); }
.login-page .check a:hover { text-decoration: underline; }

/* Full-width buttons for the login form. Overrides the default
   inline-flex button width from the shared .btn definition. */
.login-page .btn { width: 100%; padding: 12px 18px; justify-content: center; }

.login-page .fine {
  margin-top: 22px; font-size: 12.5px;
  color: #5B6178; line-height: 1.65;
}
.login-page .fine .k { font-family: var(--mono); color: var(--indigo-light); }
.login-page .switch-hint {
  margin-top: 22px; text-align: center;
  font-size: 13.5px; color: var(--muted);
}
.login-page .switch-hint button {
  background: none; border: none;
  color: var(--indigo-light); font-weight: 600; font-size: 13.5px;
  font-family: var(--body); cursor: pointer;
}
.login-page .switch-hint button:hover { text-decoration: underline; }

/* Error + flash slots — server-rendered messages above the submit. */
.login-page .msg {
  padding: 11px 14px; border-radius: 10px;
  font-size: 13.5px; margin-bottom: 18px;
  border: 1px solid transparent;
}
.login-page .msg.err {
  color: #FCA5A5; background: rgba(239, 68, 68, .08);
  border-color: rgba(239, 68, 68, .32);
}
.login-page .msg.ok {
  color: var(--ok); background: rgba(52, 211, 153, .08);
  border-color: rgba(52, 211, 153, .32);
}
.login-page .msg .mono {
  font-family: var(--mono); font-size: 12.5px;
  color: var(--text); font-weight: 500;
}

.login-page .hidden { display: none; }

@media (max-width: 920px) {
  .login-page .split { grid-template-columns: 1fr; }
  .login-page .pane { display: none; }
  .login-page .form-side { padding-top: 56px; align-items: start; }
  .login-page .card { max-width: 420px; }
  .login-page .m-brand { display: flex !important; justify-content: center; margin-bottom: 30px; }
}
.login-page .m-brand { display: none; }

/* ============================================================================
 * Switchboard — interaktive "was ist das eigentlich?" Sektion.
 *
 * Sitzt auf der Landing zwischen Hero und Feature-Cards. User klickt
 * Ziel (own/ext) + Datenschutz (none/pseudonymize/strict), das
 * Flow-Diagramm + der Vorher/Nachher-Vergleich reagieren live. Alle
 * Text-Strings kommen aus dem i18n-Dict — das JS hier ist reine
 * DOM-Manipulation.
 * ==========================================================================*/

/* Ergänzung des Palette-Sets: warn (für "Achtung: extern = mask
 * Pflicht") und ext (für externe Provider-Farbe). Werden bewusst nur
 * hier ergänzt statt oben ins :root — sie sind Switchboard-spezifisch. */
:root {
  --switchboard-warn: #FBBF24;
  --switchboard-ext:  #F0ABFC;
  --switchboard-surface-3: #1A1E30;
  --switchboard-faint: #5B6178;
  /* Datenschutz-Schicht farblich abgesetzt vom Alias-Layer (indigo).
     Die drei Stufen sind eine visuelle Skala von "aus" (Warnfarbe) über
     "pseudonymize" (deutlich sichtbar aktiv) bis "strict" (satter, aber
     nicht zu grell für den dunklen Hintergrund). */
  --priv-off:    #FB923C;   /* orange-400 */
  --priv-pseudo: #A3E635;   /* lime-400 */
  --priv-strict: #22C55E;   /* green-500 */
}

.what {
  padding: 76px 0 84px;
  border-top: 1px solid var(--border);
}
.what h2 {
  font-family: var(--display);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.15;
  margin-top: 10px;
  max-width: 20ch;
}
.what .lede {
  color: var(--muted);
  margin-top: 12px;
  font-size: 16.5px;
  max-width: 62ch;
}

/* ---- Schaltpult ---- */
.switchboard {
  margin-top: 34px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
}
.sb-head {
  display: flex; gap: 22px; align-items: center;
  padding: 14px 20px; border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.sb-group { display: flex; align-items: center; gap: 10px; }
.sb-label {
  font-family: var(--mono); font-size: 11.5px;
  color: var(--switchboard-faint);
  letter-spacing: .04em; text-transform: uppercase;
}
.what .seg {
  display: flex;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px; gap: 3px;
  margin: 0;
}
.what .seg button {
  background: none; border: 1px solid transparent;
  border-radius: 7px; padding: 6px 12px;
  font-family: var(--mono); font-size: 12.5px; font-weight: 500;
  color: var(--muted); cursor: pointer;
  transition: background .14s, color .14s, border-color .14s;
  white-space: nowrap;
}
.what .seg button:hover { color: var(--text); }
.what .seg button.on {
  background: var(--switchboard-surface-3);
  color: var(--text); border-color: var(--border-strong);
}
/* Datenschutz-Buttons: jede Stufe bekommt ihre eigene Farbe. Das
   Ziel-Segment daneben bleibt neutral (indigo als Layer-Farbe wird
   nur an der Alias-Station verwendet, nicht am Datenschutz). */
.what .seg button.on[data-v="none"] {
  color: #fff; background: var(--priv-off);    border-color: var(--priv-off);
}
.what .seg button.on[data-v="pseudonymize"] {
  color: #0A0B10; background: var(--priv-pseudo); border-color: var(--priv-pseudo);
}
.what .seg button.on[data-v="strict"] {
  color: #fff; background: var(--priv-strict); border-color: var(--priv-strict);
}
.sb-hint {
  margin-left: auto; font-size: 12.5px;
  color: var(--switchboard-faint);
}

/* ---- Diagramm ---- */
.flow {
  display: grid;
  grid-template-columns: 150px 1fr 220px;
  gap: 0; align-items: stretch;
  padding: 26px 20px 22px;
}
.flow .col {
  display: flex; flex-direction: column;
  justify-content: center; gap: 10px;
}
.flow .node {
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 12px; padding: 13px 15px;
}
.flow .node .n-t { font-family: var(--mono); font-size: 12.5px; font-weight: 600; }
.flow .node .n-s { font-size: 12px; color: var(--switchboard-faint); margin-top: 3px; line-height: 1.45; }
.flow .node.app .n-t { color: var(--text); }

.layer {
  position: relative;
  border: 1px solid var(--indigo);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(99,102,241,.09), rgba(99,102,241,.03));
  padding: 14px; margin: 0 18px;
}
.layer-cap {
  position: absolute; top: -10px; left: 14px;
  background: var(--bg); padding: 0 8px;
  font-family: var(--mono); font-size: 11.5px;
  color: var(--indigo-light);
}
.stations { display: flex; flex-direction: column; gap: 9px; }
.station {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 13px;
  display: flex; align-items: center; gap: 11px;
  transition: border-color .18s, opacity .18s;
}
.station.dim { opacity: .42; }
/* Default "hot" bleibt der Alias-Layer (indigo). Die Datenschutz-
   Station überschreibt das je nach Stufe unten. */
.station.hot { border-color: var(--indigo); box-shadow: 0 0 0 1px rgba(99,102,241,.25); }
.station.priv-off    { opacity: 1; border-color: var(--priv-off);
                       box-shadow: 0 0 0 1px rgba(251,146,60,.25); }
.station.priv-pseudo { opacity: 1; border-color: var(--priv-pseudo);
                       box-shadow: 0 0 0 1px rgba(163,230,53,.28); }
.station.priv-strict { opacity: 1; border-color: var(--priv-strict);
                       box-shadow: 0 0 0 1px rgba(34,197,94,.28); }
.st-no {
  font-family: var(--mono); font-size: 11px;
  color: var(--indigo-light); width: 14px; flex: none;
}
.st-body { flex: 1; min-width: 0; }
.st-t { font-family: var(--mono); font-size: 12.5px; font-weight: 600; }
.st-s {
  font-size: 11.5px; color: var(--switchboard-faint);
  margin-top: 2px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.st-state {
  font-family: var(--mono); font-size: 11px;
  padding: 2px 9px; border-radius: 99px;
  border: 1px solid var(--border);
  color: var(--switchboard-faint);
  white-space: nowrap;
}
.st-state.on {
  color: var(--indigo-light); border-color: var(--indigo);
  background: rgba(99,102,241,.1);
}
.st-state.own { color: var(--ok); border-color: rgba(52,211,153,.4); }
/* Datenschutz-Badges — jede Stufe ihre Farbe. */
.st-state.priv-off    { color: var(--priv-off);
                        border-color: var(--priv-off);
                        background: rgba(251,146,60,.10); }
.st-state.priv-pseudo { color: var(--priv-pseudo);
                        border-color: var(--priv-pseudo);
                        background: rgba(163,230,53,.10); }
.st-state.priv-strict { color: var(--priv-strict);
                        border-color: var(--priv-strict);
                        background: rgba(34,197,94,.10); }

.what .arr {
  display: grid; place-items: center;
  font-family: var(--mono); color: var(--switchboard-faint);
  font-size: 15px; letter-spacing: -2px;
}

.target {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px; padding: 13px 15px;
  transition: border-color .18s, opacity .18s, background .18s;
}
.target.off { opacity: .35; }
.target.on.own {
  border-color: rgba(52,211,153,.5);
  background: rgba(52,211,153,.06);
}
.target.on.ext {
  border-color: rgba(240,171,252,.5);
  background: rgba(240,171,252,.05);
}
.t-head {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12.5px; font-weight: 600;
}
.t-head .dotc {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
}
.own .dotc {
  background: var(--ok);
  box-shadow: 0 0 7px rgba(52,211,153,.6);
}
.ext .dotc {
  background: var(--switchboard-ext);
  box-shadow: 0 0 7px rgba(240,171,252,.5);
}
.t-sub {
  font-size: 12px; color: var(--switchboard-faint);
  margin-top: 4px; line-height: 1.5;
}

/* ---- Prompt-Vorher/Nachher ---- */
.payload {
  border-top: 1px solid var(--border);
  padding: 18px 20px 20px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.pl {
  background: #0C0E17;
  border: 1px solid var(--border);
  border-radius: 12px; padding: 13px 15px;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.9;
  /* Feste Mindesthöhe verhindert Layout-Shift beim Wechsel zwischen
     ,,aus" / ,,pseudonymize" (3 Zeilen Prompt) und ,,strict" (4 Zeilen
     mit Zusatzhinweis). Der Footer variiert ebenfalls in der Höhe
     zwischen ein- und mehrzeilig — großzügig kalkuliert. */
  min-height: 220px;
}
.pl-foot {
  /* Mindesthöhe reserviert den Platz für die zwei-zeilige
     pseudonymize/strict-Erklärung auch dann, wenn ,,aus" (eine Zeile)
     aktiv ist. Ohne das würde die Payload-Box beim Klick zwischen
     Modi hüpfen. */
  min-height: 40px;
}
.pl-cap {
  font-size: 11px; color: var(--switchboard-faint);
  letter-spacing: .04em; text-transform: uppercase;
  margin-bottom: 8px;
}
.pl-cap b { color: var(--muted); font-weight: 500; text-transform: none; letter-spacing: 0; }
.ph {
  color: var(--indigo-light);
  background: rgba(99,102,241,.12);
  border-radius: 5px; padding: 1px 5px;
}
.sec {
  color: var(--switchboard-warn);
  background: rgba(251,191,36,.1);
  border-radius: 5px; padding: 1px 5px;
}
.pl-foot {
  font-size: 11.5px;
  color: var(--switchboard-faint);
  margin-top: 11px; line-height: 1.6;
}
.pl-foot .g { color: var(--ok); }

/* ---- drei Säulen ---- */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px; margin-top: 22px;
}
.pillar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px; padding: 20px 22px;
  transition: transform .16s, border-color .16s;
}
.pillar:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.pillar.mid {
  border-color: var(--border-strong);
  background: linear-gradient(180deg, rgba(99,102,241,.06), transparent);
}
.p-no { font-family: var(--mono); font-size: 11.5px; color: var(--indigo-light); }
.pillar h3 {
  font-family: var(--display); font-size: 18.5px;
  font-weight: 600; letter-spacing: -.01em; margin-top: 8px;
}
.pillar p { color: var(--muted); font-size: 14.5px; margin-top: 7px; }
.p-meta {
  font-family: var(--mono); font-size: 11.5px;
  color: var(--switchboard-faint);
  margin-top: 12px; padding-top: 11px;
  border-top: 1px solid var(--border);
}
.p-meta .g { color: var(--ok); }
.p-meta .i { color: var(--indigo-light); }
.p-meta .e { color: var(--switchboard-ext); }

@media (max-width: 940px) {
  .flow { grid-template-columns: 1fr; gap: 14px; }
  .layer { margin: 0; }
  .what .arr { transform: rotate(90deg); padding: 2px 0; }
  .payload { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: 1fr; }
  .what h2 { font-size: 27px; }
}

/* ============================================================================
 * Switchboard v2 — Header entfällt, Dropdowns wandern in den Gateway-Kasten.
 *
 * Klassen-Neuheiten:
 *   .sb-v2                         — Marker-Klasse für den neuen Frame-Look
 *   .client-node, .client-alias    — der prominente Client-Kasten links
 *   .gw, .gw-cap, .gw-block, .gw-row, .gw-label, .gw-model, .gw-priv-desc
 *   .sb-dd, .sb-dd-menu, .dd-arrow — Custom-Dropdown (kein <select>)
 *   .priv-pill                     — die farbige Datenschutz-Dropdown-Pill
 *   .gw-warn                       — kurze Warn-Meldung "extern → mask Pflicht"
 *
 * Die alten Klassen (.sb-head, .station, .st-*, .stations) bleiben in
 * dieser Datei liegen, werden vom neuen Markup aber nicht mehr erreicht.
 * ==========================================================================*/

/* --- Frame catchy machen --- */
.switchboard.sb-v2 {
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, .35),
    0 0 0 1px rgba(129, 140, 248, .08);
  background:
    radial-gradient(650px 400px at 50% -20%, rgba(99,102,241,.10), transparent 60%),
    var(--surface);
  overflow: visible;   /* dropdown menus dürfen aus dem Kasten ragen */
}
.switchboard.sb-v2 .flow {
  grid-template-columns: 210px 1fr 230px;
  padding: 32px 24px 24px;
  gap: 24px;
  align-items: start;
}

/* --- Client-Node prominent --- */
.client-col { align-self: stretch; }
.client-node {
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  padding: 18px 16px;
  height: 100%;
  display: flex; flex-direction: column;
  gap: 8px;
  position: relative;
}
/* Verbindungspfeil zum Gateway rechts. */
.client-node::after {
  content: '';
  position: absolute;
  top: 50%; right: -28px;
  width: 24px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--indigo));
  transform: translateY(-50%);
  border-radius: 2px;
  opacity: .55;
  pointer-events: none;
}
.client-lbl {
  font-family: var(--mono); font-size: 11.5px;
  color: var(--switchboard-faint);
  letter-spacing: .04em; text-transform: uppercase;
}
.client-alias {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 600;
  color: var(--indigo-light);
  line-height: 1.2;
  margin: 4px 0 2px;
  letter-spacing: -.01em;
  word-break: break-all;
}
.client-note {
  font-size: 11.5px; color: var(--switchboard-faint);
  margin-top: auto;
}

/* --- Gateway-Kasten (Zentrum) --- */
.gw {
  position: relative;
  border: 1.5px solid var(--indigo);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(99,102,241,.10), rgba(99,102,241,.03));
  padding: 22px 20px 20px;
  box-shadow:
    inset 0 0 0 1px rgba(129,140,248,.06),
    0 8px 24px rgba(99,102,241,.10);
}
.gw-cap {
  position: absolute; top: -12px; left: 16px;
  background: var(--bg);
  padding: 2px 10px;
  font-family: var(--display);
  font-size: 13px; font-weight: 700;
  color: var(--indigo-light);
  letter-spacing: -.01em;
}
.gw-block {
  padding: 12px 0;
  position: relative;   /* für absolute .sb-dd-menu */
}
.gw-block + .gw-block {
  border-top: 1px solid rgba(129,140,248,.14);
  margin-top: 2px;
}
.gw-row {
  display: flex; align-items: center;
  gap: 12px;
}
.gw-label {
  font-family: var(--mono); font-size: 11.5px;
  color: var(--switchboard-faint);
  letter-spacing: .04em; text-transform: uppercase;
  width: 90px; flex: none;
}
.gw-label-small {
  font-family: var(--mono); font-size: 11px;
  color: var(--switchboard-faint);
  width: 90px; flex: none;
  padding-left: 12px;
}
.gw-resolves {
  display: flex; align-items: center;
  gap: 12px;
  margin-top: 10px;
}
.gw-model {
  font-family: var(--mono); font-size: 14px;
  color: var(--text);
  background: rgba(52,211,153,.08);
  border: 1px solid rgba(52,211,153,.28);
  border-radius: 7px;
  padding: 4px 10px;
}
.gw-priv-desc {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 10px;
  padding-left: 12px;
  line-height: 1.55;
  min-height: 34px;   /* verhindert Layout-Shift beim Wechsel */
}
.gw-warn {
  font-size: 11.5px;
  color: var(--switchboard-warn);
  margin-top: 6px;
  min-height: 16px;
  padding-left: 12px;
  opacity: 0;
  transition: opacity .18s ease;
}
.gw-warn.show { opacity: 1; }

/* --- Custom-Dropdown --- */
.sb-dd {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 7px 12px;
  font-family: var(--mono); font-size: 13px; font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease;
  min-width: 190px;
  justify-content: space-between;
}
.sb-dd:hover { border-color: var(--indigo-light); }
.sb-dd.open { border-color: var(--indigo); }
.dd-arrow {
  font-size: 10px;
  color: var(--switchboard-faint);
  transition: transform .18s ease;
}
.sb-dd.open .dd-arrow { transform: rotate(180deg); color: var(--indigo-light); }

/* Farbige Priv-Pill: dieselbe priv-<mode> Klasse steuert die Border-
   und Text-Farbe. */
.priv-pill.priv-off    { border-color: var(--priv-off); }
.priv-pill.priv-off    #sb_privLabel { color: var(--priv-off); }
.priv-pill.priv-pseudo { border-color: var(--priv-pseudo); }
.priv-pill.priv-pseudo #sb_privLabel { color: var(--priv-pseudo); }
.priv-pill.priv-strict { border-color: var(--priv-strict); }
.priv-pill.priv-strict #sb_privLabel { color: var(--priv-strict); }

.sb-dd-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 102px;    /* rechts vom label sitzen */
  min-width: 210px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 4px;
  list-style: none;
  margin: 0;
  z-index: 20;
  box-shadow: 0 12px 32px rgba(0,0,0,.4);
  display: none;
}
.sb-dd-menu.open { display: block; }
.sb-dd-menu li {
  padding: 8px 12px;
  border-radius: 6px;
  font-family: var(--mono); font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.sb-dd-menu li:hover { background: var(--surface); color: var(--text); }
.sb-dd-menu li.active {
  background: rgba(99,102,241,.10);
  color: var(--indigo-light);
}
/* Farbige Priv-Optionen im Menü. */
.sb-dd-menu li.priv-off.active    { background: rgba(251,146,60,.14);  color: var(--priv-off); }
.sb-dd-menu li.priv-pseudo.active { background: rgba(163,230,53,.14);  color: var(--priv-pseudo); }
.sb-dd-menu li.priv-strict.active { background: rgba(34,197,94,.14);   color: var(--priv-strict); }

/* --- Target-Column (rechts) — kompakter jetzt --- */
.switchboard.sb-v2 .col.targets { gap: 12px; }
.switchboard.sb-v2 .target {
  padding: 14px 15px;
  border-radius: 12px;
}
.switchboard.sb-v2 .t-sub { margin-top: 6px; }

/* --- Responsive --- */
@media (max-width: 940px) {
  .switchboard.sb-v2 .flow { grid-template-columns: 1fr; }
  .client-node::after { display: none; }
  .sb-dd-menu { left: 0; }
}