.set-dot{
  width:30px;height:30px;border-radius:50%;flex:none;
  border:1px solid var(--line);
}
/* Jedes Design traegt drei Toene: Hintergrund, Karte, Akzent. Der runde
   Punkt in der Leiste zeigt zwei davon, die Kachel in der Liste alle drei. */
.theme-gedimmt{--g1:#EDDFD8;--g2:#FBF5F1;--g3:#9B6856;}
.theme-anthrazit{--g1:#2E3238;--g2:#434952;--g3:#93AEC9;}
.theme-bordeaux{--g1:#D2DCE7;--g2:#F7FAFD;--g3:#6E2328;}
.theme-leinen{--g1:#F0EEEA;--g2:#FCFBF9;--g3:#3C3A36;}
.theme-vanille{--g1:#FAF6EF;--g2:#FFFDFA;--g3:#86C5AE;}
.theme-petrol{--g1:#EFF3F1;--g2:#FBFCFB;--g3:#2F5D62;}
.theme-creme{--g1:#F1EBE1;--g2:#FBF8F2;--g3:#2A302B;}
.theme-weiss{--g1:#FFFFFF;--g2:#F3F5F9;--g3:#26324A;}
.theme-zentivo{--g1:#111215;--g2:#24262B;--g3:#C8CCD2;}
.theme-nacht{--g1:#15151A;--g2:#2C2C36;--g3:#D9B26A;}
.theme-terra{--g1:#1A2132;--g2:#2D3A55;--g3:#C9D0DA;}
.theme-glas{--g1:#12222A;--g2:#4A6572;--g3:#CFEAF2;}
.set-dot{background:linear-gradient(140deg,var(--g1) 0 50%,var(--g3) 50% 100%);}
/* Das Design steht offen auf der Seite, nicht hinter einem Abschnitt: alle
   Farbproben auf einen Blick, ein Tipp zeigt eines an. */
.set-design{margin-bottom:20px;}
.set-label{
  font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:9px;
}
.set-anzahl{margin-left:6px;font-weight:600;letter-spacing:.04em;text-transform:none;opacity:.8;}
/* Zwei Raster nebeneinander, links dunkel, rechts hell - alles auf einen
   Blick, nichts zum Wischen. So hat Evi es gewollt. */
.set-design{container:design / inline-size;}
.set-gruppen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;}
.set-gruppe{
  min-width:0;padding:9px 4px 10px;border-radius:16px;
  background:var(--surface);
  background:color-mix(in srgb, var(--surface) 70%, transparent);
  border:1px solid var(--line);
  border-color:color-mix(in srgb, var(--ink) 8%, transparent);
}
.set-gruppe > .set-art{margin:0 0 10px 4px;}
.set-gruppe .set-anzahl{margin-left:2px;}
.set-raster{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px 0;justify-items:center;
}
/* Eine Spalte braucht rund 60 px, sonst bricht „Champagner“ mitten im
   Wort. Wird es dafuer zu eng (schmales Handy mit grosser Schrift), stehen
   die beiden Gruppen untereinander, und jede nimmt so viele Spalten, wie
   Platz haben. */
@container design (max-width:261px){
  .set-gruppen{grid-template-columns:minmax(0,1fr);}
  .set-raster{grid-template-columns:repeat(auto-fill,minmax(62px,1fr));}
}
.set-farbe{
  flex:none;display:flex;flex-direction:column;align-items:center;gap:9px;
  width:100%;max-width:78px;min-width:0;background:none;border:none;padding:0;cursor:pointer;
  font-family:var(--font-body);color:var(--ink-soft);
}
.set-farbe .set-sw{
  width:46px;height:46px;border-radius:50%;
  border:1px solid var(--line);box-shadow:var(--shadow);
}
/* Zwei Zeilen, damit auch „Pastellblau & Burgunder“ lesbar bleibt - der
   zweite Teil rutscht unter den ersten. */
.set-farbe .set-fn{
  font-size:9.5px;font-weight:600;line-height:1.25;text-align:center;
  /* Feste Hoehe fuer zwei Zeilen: so stehen die Reihen im Raster bei allen
     Designs auf einer Linie. */
  height:2.5em;max-width:100%;overflow-wrap:break-word;hyphens:auto;
}
.set-farbe.on .set-sw{box-shadow:0 0 0 2.5px var(--accent);}
.set-farbe.on .set-fn{color:var(--accent-deep);font-weight:700;}
.set-farbe.vorschau .set-sw{box-shadow:0 0 0 2.5px var(--accent);border-style:dashed;}
.set-farbe:active{transform:scale(.94);}
/* Der Standard traegt eine kleine Pille auf dem unteren Rand der Farbprobe -
   so hat Evi es gewollt. */
.set-farbe .set-sw{position:relative;}
.set-std{
  position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);
  padding:2px 6px;border-radius:999px;white-space:nowrap;
  font-size:7.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;line-height:1.2;
  background:var(--ink);color:var(--ground);
  box-shadow:0 0 0 2px var(--surface);
}
/* Hell oder dunkel - ein kleiner Punkt in der Art und das Wort daneben,
   als Kopf ueber jeder der beiden Gruppen. */
.set-art{
  display:flex;align-items:center;gap:4px;
  font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-soft);opacity:.85;
}
.set-art i{width:7px;height:7px;border-radius:50%;flex:none;
  background:#F4F2EE;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);}
.set-art.dunkel i{background:#15161A;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);}

/* Die uebrigen Einstellungen als flache Zeilen - jede zeigt, was gerade
   eingestellt ist, und klappt auf, wo etwas zu tun ist. */
.set-liste .cat{
  background:none;border:none;border-radius:0;box-shadow:none;
  border-top:1px solid var(--line);margin:0;
}
.set-liste .cat:last-child{border-bottom:1px solid var(--line);}
.set-liste .cat-head{padding:2px 2px 2px 4px;}
.set-liste .cat-toggle{padding:13px 0;}
.set-liste .cat-toggle .t{
  font-size:14px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ink);
}
.set-liste .cat-wert{display:flex;}
.set-liste .cat-body{padding:0 2px 16px;}
.set-trenner{height:1px;background:var(--line);margin:20px 0 16px;}





.set-sw{
  height:46px;border-radius:11px;border:1px solid var(--line);
  background:linear-gradient(112deg,var(--g1) 0 44%,var(--g2) 44% 72%,var(--g3) 72% 100%);
}





/* Name und Abzeichen stehen nebeneinander, brechen aber um, wenn der Name
   lang ist - deshalb flex-wrap statt einer festen Zeile. */
.set-zeile{display:flex;align-items:center;flex-wrap:wrap;gap:6px;}















.vs-leiste{
  position:fixed;left:0;right:0;
  bottom:calc(78px + var(--leiste-unten, env(safe-area-inset-bottom, 0px)));
  z-index:45;display:flex;justify-content:center;
  padding:0 12px;pointer-events:none;
}
.vs-innen{
  pointer-events:auto;width:100%;max-width:540px;
  background:var(--surface);border:1.5px solid var(--accent);
  border-radius:20px;box-shadow:var(--shadow-lift);
  padding:12px 13px;display:flex;flex-direction:column;gap:10px;
  animation:leisteRein .18s ease-out;
}
@keyframes leisteRein{
  from{opacity:0;transform:translateY(12px);}
  to{opacity:1;transform:none;}
}
.vs-oben{display:flex;align-items:center;gap:10px;}
.vs-oben .set-dot{width:28px;height:28px;}
.vs-titel{flex:1;min-width:0;display:flex;flex-direction:column;}
.vs-titel .kl{
  font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent-deep);
}
.vs-titel .nm{font-size:14.5px;font-weight:700;line-height:1.25;}
.vs-chips{display:flex;flex-wrap:wrap;gap:6px;}
.vs-chip{
  border-radius:999px;padding:4px 10px;
  font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
}
.vs-chip.ok{background:var(--ok-soft);color:var(--ok);}
.vs-chip.offen{background:var(--wait-soft);color:var(--wait);}
.vs-chip.ab{background:var(--off-soft);color:var(--off);}
.vs-knoepfe{display:flex;gap:8px;align-items:stretch;}
.vs-knoepfe .btn{padding:12px 14px;white-space:nowrap;}
/* Der grosse Knopf nimmt den Platz, der uebrig bleibt; "Abbrechen" behaelt
   seine Breite. Wird es zu eng, faellt der Text des grossen Knopfes eine
   Spur kleiner aus, statt in zwei Zeilen zu brechen. */
.vs-knoepfe #themeKeep{flex:1 1 auto;min-width:0;}
.vs-knoepfe #themeDrop{flex:0 0 auto;}
@media (max-width:420px){
  .vs-knoepfe .btn{font-size:12.5px;padding:12px 9px;}
  .vs-knoepfe #themeDrop{padding:12px 13px;}
}
/* Auf den schmalsten Handys passt die Beschriftung nicht mehr neben
   "Abbrechen" - dort stehen die beiden Knoepfe untereinander. */
@media (max-width:345px){
  .vs-knoepfe{flex-direction:column;}
  .vs-knoepfe .btn{font-size:13px;padding:11px 12px;}
  html.leiste-offen #app{padding-bottom:326px;}
}
/* Solange die Leiste steht, endet die Liste weiter oben - sonst laege die
   letzte Zeile darunter. */
html.leiste-offen #app{padding-bottom:254px;}
@media (min-width:760px){
  .vs-leiste{bottom:18px;}
  html.leiste-offen #app{padding-bottom:178px;}
}

.set-zeile{margin:0;font-size:12.5px;line-height:1.45;color:var(--ink);}
.set-hint{font-size:12px;line-height:1.5;color:var(--ink-soft);margin:10px 2px 0;}
.set-zahlen{
  display:flex;flex-wrap:wrap;gap:7px;margin:11px 0 12px;
}
.set-zahlen span{
  background:var(--surface-2);border-radius:999px;padding:5px 11px;
  font-size:12px;color:var(--ink-soft);
}
.set-zahlen strong{color:var(--ink);font-weight:700;}
.set-stand{
  font-size:12px;line-height:1.5;color:var(--ink-soft);
  background:var(--surface-2);border-radius:var(--radius-sm);
  padding:9px 11px;margin:0 0 11px;
}
.set-stand strong{color:var(--ink);font-weight:700;}
/* Das zweite Feld eines Abschnitts steht mit Abstand unter dem Hinweis
   zum ersten, damit beide als eigene Einstellung lesbar bleiben. */
.set-zweit{margin-top:14px;}
.set-bak{display:flex;flex-direction:column;gap:8px;}
.set-bak .btn{width:100%;}