/* Werkbank aller ZOK-Werkzeuge: Listen bearbeiten, Aussehen, Gespeichertes verwalten.
   Am Handy ein Blatt, das von unten hereinfährt; am großen Bildschirm eine
   feste Spalte rechts neben dem Rad. */

.werkbank {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: min(82dvh, 720px);
  display: flex;
  flex-direction: column;
  border-radius: 28px 28px 0 0;
  background: rgba(246, 244, 255, .88);
  -webkit-backdrop-filter: var(--glas-blur);
  backdrop-filter: var(--glas-blur);
  box-shadow: 0 -10px 40px rgba(80, 60, 160, .18);
  transform: translateY(105%);
  transition: transform .28s cubic-bezier(.3, .9, .3, 1);
  z-index: 40;
  visibility: hidden;
}
body.werkbank-offen .werkbank { transform: none; visibility: visible; }
body.werkbank-offen::after {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(80, 60, 160, .3);
  backdrop-filter: blur(2px);
  z-index: 30;
}

.werkbank-kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 12px 10px;
}
/* Reiter als eingelassene Leiste, der gewählte schwimmt weiß darauf. */
.reiter { flex: 1; display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--papier-2); }
/* Nur EIN Reiter (Finger-Wahl, SSP, Pro & Contra): als Überschrift, nicht als Knopf, der nichts tut (A.14.4.0) */
.reiter.einzeln { padding: 0; background: none; }
.reiter.einzeln button { flex: 0 1 auto; padding: 0 4px; background: none !important; box-shadow: none !important; color: var(--tusche); font-size: 1.15rem; font-weight: 700; cursor: default; }
.reiter button {
  flex: 1;
  min-height: 38px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--tusche-weich);
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.reiter button[aria-selected="true"] { background: #fff; color: var(--tusche); box-shadow: 0 4px 12px rgba(80, 60, 160, .12); }

.werkbank-inhalt {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px calc(24px + env(safe-area-inset-bottom));
  overscroll-behavior: contain;
}
.werkbank-inhalt h3 { margin: 20px 0 8px; font-size: 1.02rem; }
.werkbank-inhalt h3:first-child { margin-top: 4px; }

/* ---------- Seitengerüst der Werkzeuge: Bühne, am Rechner + Werkbank rechts ---------- */
.werkzeug-seite { display: flex; flex-direction: column; }
.rad-bereich, .werkzeug-bereich { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); }

/* ---------- Kopfzeile der Werkzeuge ---------- */
.kopf-titel {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  max-width: 46vw;
  min-height: 44px;
  padding: 0 6px;
  border: 0;
  background: none;
  font-family: var(--schrift-titel);
  font-weight: 600;
  font-size: 1.25rem;
  cursor: pointer;
}
.kopf-titel span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kopf-titel svg { width: 18px; height: 18px; flex: none; }

/* Am Handy: „Bearbeiten“ nur als Symbol, damit der Radname Platz hat. */
@media (max-width: 520px) {
  .werkbank-oeffner { width: 48px; padding: 0; }
  .werkbank-oeffner .knopf-text { display: none; }
  .kopf-titel { max-width: none; flex: 1; font-size: 1.05rem; line-height: 1.15; text-align: left; }
  /* Lieber zwei Zeilen als „Flasche d…“. */
  .kopf-titel span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
    overflow-wrap: break-word;
    /* A.14.4.0: nur noch an weichen Trennstellen (­) — „auto“ machte „Was es-sen wir?“; zu lange
       Einzelwörter bricht overflow-wrap trotzdem. */
    hyphens: manual;
  }
  .kopf .platz { display: none; }
  .werkzeug-seite .kopf { gap: 7px; padding-inline: 10px; }
}

/* ---------- Felder ---------- */
.felder-kopf { display: flex; align-items: center; justify-content: space-between; min-height: 36px; font-weight: 600; color: var(--tusche-weich); }
.felder { list-style: none; margin: 6px 0 14px; padding: 0; display: grid; gap: 10px; }

.feld {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto auto;
  grid-template-areas: "farbe text bild weg" "unten unten unten unten";
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-radius: 18px;
  background: var(--flaeche);
  box-shadow: var(--schatten-klein);
}
.feld.aus { background: transparent; box-shadow: inset 0 0 0 2px var(--linie); }
.feld.aus .feld-text, .feld.aus .feld-farbe { opacity: .45; }

.feld-farbe {
  grid-area: farbe;
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .15);
  overflow: hidden;
  cursor: pointer;
}
.feld-farbe input { position: absolute; inset: -8px; width: 56px; height: 56px; border: 0; padding: 0; opacity: 0; cursor: pointer; }
.feld-text {
  grid-area: text;
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 6px 12px;
  border: 2px solid transparent;
  border-radius: 12px;
  background: var(--papier-2);
  /* feine Kante: sonst las sich das Feld als bloße Beschriftung (Münze „Kopf“/„Zahl“) */
  box-shadow: inset 0 0 0 1px rgba(30, 27, 58, .1);
  font-weight: 550;
}
.feld-text:focus { outline: none; border-color: var(--akzent); background: #fff; }
.feld-bild { grid-area: bild; }
.feld-bild img { width: 100%; height: 100%; object-fit: cover; border-radius: 7px; }
.feld-bild.hat-bild { padding: 2px; overflow: hidden; }
.feld-weg { grid-area: weg; }

.feld-unten {
  grid-area: unten;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .9rem;
  font-weight: 550;
}
.feld-an {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px 0 8px;
  border: 0;
  border-radius: 999px;
  background: var(--papier-2);
  color: var(--tusche-weich);
  font-weight: 600;
  cursor: pointer;
}
.feld-an svg { width: 18px; height: 18px; }
.gewicht { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.gewicht button {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 10px;
  background: var(--papier-2);
  font-weight: 550;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.gewicht button:disabled { opacity: .35; cursor: not-allowed; }
.gewicht output { min-width: 2.2em; text-align: center; font-weight: 550; }
.chance { min-width: 3.4em; text-align: right; color: var(--tusche-weich); }

.felder-aktionen, .rad-aktionen, .mitte-wahl { display: flex; flex-wrap: wrap; gap: 8px; }

/* Namensliste (js/namen-tafel.js: Reihenfolge, Turnier) */
.namen-liste { list-style: none; margin: 10px 0 14px; padding: 0; display: grid; gap: 8px; }
.namen-liste li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.namen-liste .platz-nr { font-weight: 550; text-align: center; color: var(--tusche-weich); }
.namen-liste .feld-text { grid-area: auto; }


/* ---------- Aussehen ---------- */
.schemata { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.schema-wahl {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 12px 6px 10px;
  border: 0;
  border-radius: 18px;
  background: var(--flaeche);
  box-shadow: var(--schatten-klein);
  font-weight: 600;
  font-size: .85rem;
  cursor: pointer;
  transition: box-shadow .15s ease;
}
.schema-wahl[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--akzent), var(--schatten-klein); }
.schema-scheibe { width: 46px; height: 46px; border-radius: 50%; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .14), 0 2px 6px rgba(80, 60, 160, .2); }

/* Segmentwahl wie die Reiter: eingelassen, Auswahl schwimmt weiß. */
.segmente { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--papier-2); }
.segmente button {
  flex: 1;
  min-height: 38px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--tusche-weich);
  font-weight: 600;
  cursor: pointer;
}
.segmente button[aria-pressed="true"] { background: #fff; color: var(--tusche); box-shadow: 0 4px 12px rgba(80, 60, 160, .12); }

.schalter { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; font-weight: 600; cursor: pointer; }
.schalter input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--tomate); flex: none; }
.schalter small { display: block; font-weight: 600; color: var(--tusche-weich); }

/* ---------- Räder ---------- */
.name-feld {
  width: 100%;
  min-height: 46px;
  padding: 8px 12px;
  margin-bottom: 10px;
  border: 2px solid transparent;
  border-radius: 14px;
  background: var(--flaeche);
  box-shadow: var(--schatten-klein);
  font-weight: 600;
  font-size: 1.1rem;
}
.klein-hinweis { margin: 8px 0 0; font-size: .85rem; font-weight: 600; color: var(--tusche-weich); }
.raeder { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.raeder button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 6px 12px;
  border: 0;
  border-radius: 16px;
  background: var(--flaeche);
  box-shadow: var(--schatten-klein);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.raeder button[aria-current="true"] { box-shadow: 0 0 0 2px var(--akzent), var(--schatten-klein); }
.raeder small { margin-left: auto; color: var(--tusche-weich); font-weight: 550; white-space: nowrap; }
.mini-rad { width: 26px; height: 26px; flex: none; border-radius: 50%; box-shadow: 0 1px 3px rgba(80, 60, 160, .3); }
.vorlagen { display: flex; flex-wrap: wrap; gap: 8px; }
.vorlagen .knopf { min-height: 40px; padding: .4em .9em; font-size: .95rem; }
/* ---------- Vorlagen nach Gruppen (A.9.2.0 Würfel, A.9.3.0 auch Rad) ---------- */
.vorlagen-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.vorlage {
  display: grid;
  align-content: start;
  gap: 3px;
  min-height: 44px;
  padding: 10px 12px;
  border: 0;
  border-radius: 14px;
  background: var(--flaeche);
  box-shadow: var(--schatten-klein);
  color: var(--tusche);
  text-align: left;
  cursor: pointer;
}
.vorlage strong { font-size: .95rem; line-height: 1.2; }
.vorlage small { font-size: .78rem; line-height: 1.3; color: var(--tusche-weich); font-weight: 500; }
.vorlage:not(:disabled):hover { background: rgba(255, 255, 255, .85); }
.vorlage:active { transform: scale(.98); }
.vorlage:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* Vorlagen-Fenster (A.9.4.0, js/vorlagen-wahl.js): Suche, Kategorie-Chips, Kacheln; scrollt nur die Liste. */
.vorlagen-dialog { width: min(96vw, 900px); max-height: min(90dvh, 860px); padding: 20px 20px 0; }
.vorlagen-dialog[open] { display: flex; flex-direction: column; }
.vw-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vw-kopf h2 { margin: 0 !important; }
.vorlagen-dialog .vw-text { margin: 4px 0 10px !important; color: var(--tusche-weich); }
.vorlagen-dialog .vw-suche { margin: 6px 0 10px; }
.vw-gruppen { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 10px; scrollbar-width: thin; flex: none; }
.vw-chip {
  flex: none;
  min-height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: rgba(139, 92, 246, .1);
  color: #5b21b6;
  font-weight: 650;
  font-size: .9rem;
  white-space: nowrap;
  cursor: pointer;
}
.vw-chip[aria-pressed="true"] { background: var(--verlauf); color: #fff; }
.vw-chip:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.vw-liste { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 2px 20px; overscroll-behavior: contain; }
.vw-liste h4 { margin: 14px 0 8px; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tusche-weich); }
.vw-liste h4:first-child { margin-top: 2px; }
.vw-leer { color: var(--tusche-weich); }
.vorlagen-dialog .vorlage { background: rgba(255, 255, 255, .78); }
@media (pointer: coarse) { .vw-chip { min-height: 44px; } }
@media (min-width: 700px) { .vw-gruppen { flex-wrap: wrap; overflow: visible; } }
@media (max-width: 520px) {
  /* feste Höhe: beim Filtern springt das Blatt sonst auf und ab */
  .vorlagen-dialog { width: 100vw; max-width: 100vw; height: 88dvh; max-height: 88dvh; margin: auto 0 0; border-radius: 26px 26px 0 0; padding: 18px 14px 0; }
  .vw-liste .vorlagen-raster { grid-template-columns: 1fr 1fr; }
}

/* ---------- Finger statt Maus: Tippziele mindestens 44 px ---------- */
@media (pointer: coarse) {
  .reiter button, .segmente button { min-height: 44px; }
  .ikon-knopf.klein { width: 44px; height: 44px; }
  .gewicht button { width: 44px; height: 44px; }
  .feld-text, .name-feld { min-height: 44px; } /* A.14.4.0: Felder am Touch-Gerät auf 44 px */
  .feld-an { min-height: 44px; }
  .feld-farbe { width: 44px; height: 44px; }
  .feld { grid-template-columns: 44px minmax(0, 1fr) auto auto; }
  .vorlagen .knopf { min-height: 44px; }
}

/* Griff oben am Blatt: zeigt, dass man es nach unten wegwischen kann */
.werkbank::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  width: 40px;
  height: 5px;
  translate: -50% 0;
  border-radius: 999px;
  background: rgba(30, 27, 58, .18);
}
.werkbank.zieht { transition: none; }

/* ---------- großer Bildschirm: Werkbank als feste Spalte ---------- */
@media (min-width: 980px) {
  .rad-bereich, .werkzeug-bereich { grid-template-columns: minmax(0, 1fr) 420px; align-items: start; }
  .werkbank {
    position: sticky;
    top: 10px;
    /* Ganz im ersten Bild: oben steht die Kopfleiste (~68 px). Vorher ragte die Spalte
       ~110 px unter den Fensterrand, und die ganze Seite scrollte. */
    height: calc(100dvh - 88px);
    margin: 0 14px 10px 0;
    border-radius: 28px;
    background: rgba(255, 255, 255, .6);
    box-shadow: var(--schatten), inset 0 0 0 1px rgba(255, 255, 255, .8);
    backdrop-filter: blur(12px);
    transform: none;
    visibility: visible;
    transition: none;
    z-index: 1;
  }
  .werkbank-oeffner, .werkbank-zu { display: none; }
  .werkbank::before { display: none; }
  body.werkbank-offen::after { display: none; }
}

/* ---------- Eigene Farbe: runder Regenbogen statt grauem Rechteck ----------
   Gilt für alle Farbreihen der Werkbank; im Ring steht die gewählte Farbe. */
.werkbank .farb-wahl input[type="color"],
.werkbank .eigene-farbe input[type="color"] {
  -webkit-appearance: none;
  appearance: none;
  width: 40px;
  height: 40px;
  padding: 5px;
  border: 0;
  border-radius: 50%;
  background: conic-gradient(#f43f5e, #f59e0b, #eab308, #22c55e, #06b6d4, #3b82f6, #8b5cf6, #ec4899, #f43f5e);
  box-shadow: 0 2px 6px rgba(80, 60, 160, .22);
  cursor: pointer;
}
.werkbank .farb-wahl.klein input[type="color"] { width: 32px; height: 32px; padding: 4px; }
.werkbank input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.werkbank input[type="color"]::-webkit-color-swatch { border: 2px solid #fff; border-radius: 50%; }
.werkbank input[type="color"]::-moz-color-swatch { border: 2px solid #fff; border-radius: 50%; }
@media (pointer: coarse) {
  .werkbank .farb-wahl.klein input[type="color"] { width: 40px; height: 40px; }
}

/* Lange Einträge enden mit „…“ statt mitten im Buchstaben (beim Tippen läuft der Text normal) */
.werkbank input[type="text"] { text-overflow: ellipsis; }

/* Teams: mehrere Namenslisten (A.14.11.0, teams/js/listen.js) */
.listen-wahl { display: grid; gap: 2px; margin-bottom: 6px; }
.listen-reihe { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.listen-chip {
  min-height: 40px;
  max-width: 100%;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .7);
  box-shadow: var(--schatten-klein);
  color: var(--tusche);
  font: inherit;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.listen-chip[aria-pressed="true"] { background: #6d28d9; color: #fff; }
.listen-chip:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.listen-tun { display: flex; flex-wrap: wrap; gap: 0 4px; }
.listen-tun .knopf.leise { min-height: 40px; padding: 0 8px; font-size: .92rem; }

/* Leere Bühne: „Namen eintragen“ + „Mit Beispielnamen ausprobieren“ (A.14.7.0) */
.leer-knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* ---------- Zeitnehmer (A.14.2.0, js/zeitnehmer.js: Karten, Flasche) ---------- */
.zeitnehmer { display: flex; align-items: center; justify-content: center; gap: 8px; }
.zeitnehmer[hidden] { display: none; }
.zn-ring {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  width: 92px;
  height: 92px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--flaeche);
  -webkit-backdrop-filter: var(--glas-blur);
  backdrop-filter: var(--glas-blur);
  box-shadow: var(--schatten-klein);
  color: var(--tusche);
  font: inherit;
  cursor: pointer;
}
.zn-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; }
.zn-spur { fill: none; stroke: rgba(139, 92, 246, .14); stroke-width: 7; }
.zn-rest { fill: none; stroke: #8b5cf6; stroke-width: 7; stroke-linecap: round; transition: stroke-dashoffset .1s linear, stroke .3s; }
.zn-zahl { position: relative; font-size: 1.7rem; font-weight: 750; line-height: 1; letter-spacing: -.03em; }
.zn-tat { position: relative; font-size: .7rem; font-weight: 650; color: var(--tusche-weich); text-transform: uppercase; letter-spacing: .05em; }
.zeitnehmer.knapp .zn-rest { stroke: #ec4899; }
.zeitnehmer.knapp .zn-zahl { color: #db2777; animation: zn-puls 1s ease-in-out infinite; }
.zeitnehmer[data-zustand="um"] .zn-ring { background: #fce7f3; box-shadow: 0 0 0 6px rgba(236, 72, 153, .2); animation: zn-wackeln .5s ease-in-out 2; }
.zeitnehmer[data-zustand="um"] .zn-tat { color: #be185d; }
.zn-ring:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }
@keyframes zn-puls { 50% { scale: 1.15; } }
@keyframes zn-wackeln { 25% { rotate: -6deg; } 75% { rotate: 6deg; } }
@media (prefers-reduced-motion: reduce) { .zeitnehmer * { animation: none !important; } }

/* Lange Listen (A.14.4.0): die Aktionszeile unter einer Liste bleibt am unteren Rand der Werkbank stehen
   (Karten mit 55 Einträgen: „+ Karte“ stand sonst 3000 px tiefer). */
.werkbank-inhalt > .felder-aktionen {
  position: sticky;
  /* bis an den Rand: die Werkbank hat unten 24 px Innenabstand, durch den sonst die Liste hervorschaute */
  bottom: calc(-24px - env(safe-area-inset-bottom));
  z-index: 2;
  margin-inline: -14px;
  padding: 10px 14px calc(38px + env(safe-area-inset-bottom));
  /* deckend (nur die Werkbank selbst ist Glas): sonst schien die Liste durch die Knöpfe */
  background: #f4f2fc;
  box-shadow: 0 -10px 16px -6px rgba(244, 242, 252, .95);
}

/* Querformat und starker Zoom (A.14.5.0): feste Mindestbreiten (80vw, 240 px) schoben die Seite quer. */
@media (orientation: landscape) and (max-height: 540px) and (min-width: 480px) {
  .knopf.haupt { min-width: min(100%, 260px); max-width: 100%; }
  .rad-rahmen, .trommel, .tisch-rahmen { min-width: 0; }
}