#ds{
  --ds-ink:#0f0f11; --ds-muted:#52525b; --ds-soft:#5f5f69; --ds-line:#1b1d1e14;
  --ds-edge:#ffffff8c; --ds-fill:#3546c4; --ds-text:#2c3bb0; --ds-glass:#3546c41f;
  --ds-gut:#15803d; --ds-warn:#b45309; --ds-schlecht:#b91c1c;

  position:relative; color:var(--ds-ink); line-height:1.5;
  font-family:'Inter Tight','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(60% 40% at 10% 2%,  #e6e9ff 0%, transparent 60%),
    radial-gradient(55% 35% at 90% 1%,  #ffeef6 0%, transparent 62%),
    radial-gradient(70% 45% at 50% 100%,#e7f6ff 0%, transparent 65%), #fdfdfd;
}
#ds *{box-sizing:border-box}
#ds button{font:inherit}
#ds :focus-visible{outline:3px solid var(--ds-fill); outline-offset:2px; border-radius:8px}

.ds-wrap{max-width:1180px; margin:0 auto; padding:0 24px}
/* Die Webflow-Navigation liegt fest über der Seite und ist 96 px hoch. */
.ds-head{padding:136px 0 0}
.ds-eyebrow{font-size:12px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--ds-text); margin:0 0 12px}
.ds-h1{margin:0 0 10px; font-size:38px; line-height:1.08; letter-spacing:-1px; font-weight:700}
.ds-lead{margin:0; font-size:16.5px; line-height:1.55; color:var(--ds-muted); max-width:620px}
.ds-lead b{color:var(--ds-ink); font-weight:600}

/* minmax(0,1fr) statt 1fr: der Token-Block ist ein <pre> mit white-space:pre.
   Seine längste Zeile zählt als Mindestbreite und zieht die Spalte auf 560 px
   auf — auch mit overflow:auto, denn das ändert die Mindestbreite nur bei
   Flex- und Grid-Kindern, nicht bei einem Block weiter unten im Baum. */
.ds-grid{display:grid; grid-template-columns:400px minmax(0,1fr); gap:30px;
  align-items:start; padding:26px 0 110px}

.ds-karte{border:1px solid var(--ds-line); background:#ffffff59; backdrop-filter:blur(20px);
  box-shadow:inset 0 1px 0 0 var(--ds-edge), 0 4px 20px 0 #0000001a;
  border-radius:20px; padding:20px; margin-bottom:16px}
.ds-karte h2{margin:0 0 3px; font-size:17px; letter-spacing:-.3px}
.ds-hint{margin:0 0 14px; font-size:13px; color:var(--ds-soft); line-height:1.5}

/* ── Logo ─────────────────────────────────────────────── */
.ds-drop{border:1.5px dashed #b4b4c0; border-radius:14px; padding:18px; text-align:center;
  background:#ffffff8c; cursor:pointer; transition:.15s; display:block; width:100%}
.ds-drop:hover,.ds-drop.ds-ueber{border-color:var(--ds-fill); background:var(--ds-glass)}
.ds-drop b{display:block; font-size:14px; margin-bottom:3px}
.ds-drop small{font-size:12px; color:var(--ds-soft); line-height:1.45; display:block}
.ds-logo{display:flex; gap:12px; align-items:center; margin-bottom:12px}
.ds-logo img{max-width:96px; max-height:56px; object-fit:contain;
  border:1px solid var(--ds-line); border-radius:10px; padding:6px; background:#fff}
.ds-logo div{flex:1; min-width:0; font-size:12.5px; color:var(--ds-soft); line-height:1.45}
.ds-logo button{border:0; background:none; color:var(--ds-text); font-size:12.5px;
  font-weight:600; cursor:pointer; padding:0}

/* ── Farbwahl ─────────────────────────────────────────── */
.ds-reihe{display:flex; gap:7px; flex-wrap:wrap; align-items:center}
.ds-tupf{width:34px; height:34px; border-radius:10px; border:2px solid transparent;
  outline:1px solid #00000014; cursor:pointer; padding:0; position:relative}
.ds-tupf[aria-pressed="true"]{border-color:var(--ds-ink)}
.ds-tupf[aria-pressed="true"]::after{content:"✓"; position:absolute; inset:0; display:grid;
  place-items:center; color:#fff; font-size:13px; text-shadow:0 1px 3px #00000073}
.ds-eigen{display:flex; gap:9px; align-items:center; margin-top:11px}
.ds-eigen input[type=color]{width:38px; height:34px; padding:0; border:1px solid var(--ds-line);
  border-radius:9px; background:#fff; cursor:pointer}
.ds-eigen input[type=text]{flex:1; min-width:0; border:1px solid var(--ds-line); border-radius:9px;
  padding:8px 11px; font:inherit; font-size:13.5px; background:#fff; text-transform:uppercase}
.ds-eigen label{font-size:12px; color:var(--ds-soft)}

/* ── Wahlknöpfe ───────────────────────────────────────── */
.ds-al{font-size:10.5px; text-transform:uppercase; letter-spacing:.9px; color:var(--ds-soft);
  margin:0 0 6px; font-weight:600}
.ds-al:not(:first-of-type){margin-top:14px}
.ds-wahl{display:grid; gap:7px}
.ds-w{display:flex; gap:11px; align-items:flex-start; width:100%; text-align:left;
  border:1px solid var(--ds-line); background:#ffffff8c; border-radius:12px;
  padding:11px 13px; cursor:pointer; transition:.15s}
.ds-w:hover{border-color:#00000022}
.ds-w[aria-pressed="true"]{border-color:var(--ds-fill); background:var(--ds-glass)}
.ds-mark{flex:0 0 17px; height:17px; margin-top:2px; border-radius:50%; border:1.5px solid #9b9ba6;
  background:#fff; display:grid; place-items:center; font-size:10px; color:#fff}
.ds-w[aria-pressed="true"] .ds-mark{background:var(--ds-fill); border-color:var(--ds-fill)}
.ds-w[aria-pressed="true"] .ds-mark::after{content:"✓"}
.ds-wn{font-size:14.5px; font-weight:600; display:block}
.ds-wd{font-size:12.5px; color:var(--ds-muted); line-height:1.45; display:block}

/* ── Kontrollzeile ────────────────────────────────────── */
.ds-pruef{border:1px solid var(--ds-line); border-radius:12px; padding:11px 13px; margin-top:12px;
  background:#ffffffb3; font-size:12.5px; line-height:1.5}
.ds-pz{display:flex; gap:8px; justify-content:space-between; align-items:baseline; padding:3px 0}
.ds-pz b{font-weight:600; white-space:nowrap}
.ds-gut{color:var(--ds-gut)} .ds-warn{color:var(--ds-warn)} .ds-schlecht{color:var(--ds-schlecht)}
.ds-fix{border:0; background:none; color:var(--ds-text); font-weight:600; cursor:pointer;
  font-size:12.5px; padding:0; margin-top:6px}

/* ── Vorschau ─────────────────────────────────────────── */
.ds-vor{position:sticky; top:18px}
.ds-vkopf{display:flex; align-items:center; gap:10px; margin:0 0 10px}
.ds-vkopf h2{margin:0; font-size:15px; letter-spacing:-.2px}
.ds-vkopf span{font-size:12px; color:var(--ds-soft); margin-left:auto}

/* Alles darunter benutzt NUR die erzeugten Token — was hier zu sehen ist,
   ist genau das, was später im Bau gilt. */
.ds-buehne{
  --marke:#3546c4; --marke-flaeche:#2c3bb0; --marke-schrift:#2c3bb0; --marke-tint:#eef0fb;
  --grund:#ffffff; --text:#18181b; --text-leise:#52525b; --linie:#e4e4e9;
  --radius:12px; --abstand:24px; --schatten:0 4px 16px #0000001a;
  --schrift-titel:'Inter Tight',Inter,sans-serif; --schrift-text:'Inter Tight',Inter,sans-serif;
  border:1px solid var(--ds-line); border-radius:18px; overflow:hidden; background:var(--grund);
  box-shadow:inset 0 1px 0 0 var(--ds-edge), 0 8px 30px 0 #00000024; color:var(--text);
  font-family:var(--schrift-text)}
.ds-b-chrome{display:flex; align-items:center; gap:6px; padding:9px 13px; background:#f4f4f6;
  border-bottom:1px solid var(--ds-line)}
.ds-punkt{width:8px; height:8px; border-radius:50%; background:#d4d4d8}
.ds-b-url{flex:1; margin-left:8px; background:#fff; border-radius:6px; padding:4px 9px;
  font-size:10.5px; color:var(--ds-soft); border:1px solid var(--ds-line);
  font-family:'Inter Tight',Inter,sans-serif}
.ds-seite{padding:0 0 var(--abstand)}
.ds-nav{display:flex; align-items:center; gap:14px; padding:14px var(--abstand);
  border-bottom:1px solid var(--linie)}
.ds-marke{font-family:var(--schrift-titel); font-weight:700; font-size:15px; letter-spacing:-.3px}
.ds-nav a{font-size:12.5px; color:var(--text-leise); text-decoration:none}
.ds-nav .ds-knopf{margin-left:auto}
.ds-knopf{display:inline-block; border:0; border-radius:calc(var(--radius) * .75);
  background:var(--marke-flaeche); color:#fff; font-family:var(--schrift-text); font-weight:600;
  font-size:13px; padding:9px 16px; cursor:pointer; box-shadow:var(--schatten); transition:.15s}
.ds-knopf:hover{filter:brightness(1.08)}
.ds-knopf.ds-zweit{background:transparent; color:var(--marke-schrift);
  border:1.5px solid var(--marke); box-shadow:none}
.ds-hero{padding:calc(var(--abstand) * 1.6) var(--abstand); background:var(--marke-tint)}
.ds-hero h1{font-family:var(--schrift-titel); margin:0 0 8px; font-size:26px; line-height:1.15;
  letter-spacing:-.6px}
.ds-hero p{margin:0 0 16px; font-size:14px; color:var(--text-leise); max-width:46ch; line-height:1.55}
.ds-knopfreihe{display:flex; gap:10px; flex-wrap:wrap}
.ds-abschnitt{padding:var(--abstand)}
.ds-abschnitt h2{font-family:var(--schrift-titel); margin:0 0 12px; font-size:18px; letter-spacing:-.4px}
.ds-karten{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.ds-k{border:1px solid var(--linie); border-radius:var(--radius); padding:14px;
  box-shadow:var(--schatten); background:var(--grund)}
.ds-k h3{font-family:var(--schrift-titel); margin:0 0 5px; font-size:14px}
.ds-k p{margin:0; font-size:12.5px; color:var(--text-leise); line-height:1.5}
.ds-etikett{display:inline-block; font-size:10.5px; font-weight:700; color:var(--marke-schrift);
  background:var(--marke-tint); border-radius:999px; padding:3px 9px; margin-bottom:8px}
.ds-form{display:grid; gap:9px; max-width:320px}
.ds-feld{border:1px solid var(--linie); border-radius:calc(var(--radius) * .7); padding:10px 12px;
  font-size:12.5px; color:var(--text-leise); background:var(--grund)}
.ds-fuss{border-top:1px solid var(--linie); padding:14px var(--abstand); font-size:11.5px;
  color:var(--text-leise); display:flex; gap:12px; flex-wrap:wrap}

/* ── Ergebnis ─────────────────────────────────────────── */
.ds-ergebnis{margin-top:16px}
.ds-code{border:1px solid var(--ds-line); border-radius:14px; background:#0f0f11; color:#e8e8ef;
  padding:14px 16px; font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace; font-size:11.5px;
  line-height:1.65; overflow:auto; max-height:260px; white-space:pre; margin:0}
.ds-tun{display:flex; gap:9px; flex-wrap:wrap; margin-top:12px}
.ds-btn{border:0; border-radius:10px; padding:11px 18px; font-size:14.5px; font-weight:600;
  color:#fff; background:var(--ds-fill); cursor:pointer;
  box-shadow:inset 0 1px 0 0 #ffffff59, 0 4px 16px 0 #3546c440}
.ds-btn.ds-still{background:#ffffffb3; color:var(--ds-muted); border:1px solid var(--ds-line);
  box-shadow:none}
.ds-fuss-hint{margin:12px 0 0; font-size:12px; color:var(--ds-soft); line-height:1.5}

@media(max-width:960px){
  .ds-grid{grid-template-columns:minmax(0,1fr); padding-bottom:60px}
  .ds-head{padding-top:120px}
  .ds-h1{font-size:29px; letter-spacing:-.7px}
  .ds-wrap{padding:0 16px}
  .ds-vor{position:static; order:-1}
  .ds-karten{grid-template-columns:1fr}
  .ds-nav a{display:none}
}
@media(max-width:400px){
  .ds-wrap{padding:0 12px}
  .ds-h1{font-size:26px}
}
@media(prefers-reduced-motion:reduce){ #ds *{transition:none !important} }