/* =====================================================================
   jupi - kleidungswerkstatt/styles.css            (Naehstube, v10)
   ---------------------------------------------------------------------
   Eigene Stile der Kleidungs-Werkstatt. Praefix: kw_ (KleidungsWerkstatt).

   GUI-Richtlinien 3.13 (Typ 3 - Werkzeug mit Arbeitsflaeche):
     Kopfzeile   Drei Zonen (3.13.2), im Naehstuben-Material (Holz/Leinen),
                 KEIN Schul- oder jupi-Logo, keine zweite Titelzeile.
     Menue       Direkt unter der Leiste: Modus, Aktionen, Ton (3.13.3).
     Werkzeuge   oben ueber der Buehne, Optionen im Panel oben.
     Buehne      Naehtisch: 3D-Puppe bzw. Stofftisch im Holzrahmen,
                 KEIN weisser Kasten auf gruenem Grund (3.13.6).
     Kulisse     EINE gestreckte Naehstube (kulisse.svg / kulisse-nacht.svg,
                 cover/no-repeat/fixed, 3.13.7 Weg A).
     Unter dem Tisch steht NICHTS Erklaerendes (3.13.4) - die Entwurfszeile
     ist eine Statuszeile des Tisches, keine Infobox.

   Farben: alles ueber die --kw-Variablen unten. Hell = Leinenpapier mit
   Nussbaum und Messing, Dunkel = dieselbe Stube bei Nacht (Schneiderlampe).
   Bedienziele sind mindestens 40 px hoch (3.13.5), Fokusring 3 px.
   ===================================================================== */

:root {
  /* ---- Naehstube: Papier, Holz, Messing, Stoff ---- */
  --kw-bg: #efe4d0;              /* Leinenwand (Seitenhintergrund) */
  --kw-flaeche: #fffaf0;         /* Buehnen- und Kartenpapier */
  --kw-flaeche2: #f6eddc;        /* eingelassene Flaechen, Kacheln */
  --kw-flaeche3: #e8dbc4;        /* gedrueckt / Spur */
  --kw-linie: #ddcbb0;
  --kw-linie-stark: #c4ab88;
  --kw-text: #33291f;            /* Tinte */
  --kw-leise: #6b5b46;           /* Nebentext: 5,1:1 auf Leinenpapier */
  --kw-akzent: #b2553c;          /* Terrakotta der Naehstube (Naehzwirn) */
  --kw-akzent-stark: #8d3d29;
  --kw-akzent-weich: #f7e2d8;
  --kw-auf-akzent: #fffaf4;
  --kw-holz: #8a6136;            /* Nussbaum */
  --kw-holz-dunkel: #5d3f22;
  --kw-holz-hell: #c9a271;
  --kw-gelb: #e0b23c;            /* Massband */
  --kw-rot: #b23a2c;
  --kw-rot-weich: #f9e3dd;
  --kw-gold-weich: #fdf0d2;
  --kw-schatten: 0 1px 2px rgba(74, 54, 28, .10), 0 14px 34px -18px rgba(74, 54, 28, .45);
  --kw-schatten-klein: 0 1px 2px rgba(74, 54, 28, .14);
  --kw-radius: 18px;
  --kw-radius-klein: 12px;

  /* Alt-Namen (schneiden.js liest --kw-tisch fuer den Stofftisch) */
  --kw-tisch: #e3d3b8;
  --kw-stoff: #f2e8d5;
  --kw-tisch-kante: var(--kw-linie-stark);
  --kw-panel: var(--kw-flaeche);
  --kw-schnitt: #c0392b;
  --kw-fadenlauf: #2e6f8e;
  --kw-naht: #d9a227;
}

html[data-theme="dark"] {
  --kw-bg: #1a1612;
  --kw-flaeche: #262019;
  --kw-flaeche2: #2f2820;
  --kw-flaeche3: #3a3127;
  --kw-linie: #41372b;
  --kw-linie-stark: #5b4c3a;
  --kw-text: #f2e9d9;
  --kw-leise: #b4a487;
  --kw-akzent: #e08a63;          /* Naehzwirn im Lampenlicht */
  --kw-akzent-stark: #f0a982;
  --kw-akzent-weich: #45291f;
  --kw-auf-akzent: #22150d;
  --kw-holz: #6b4a2a;
  --kw-holz-dunkel: #332417;
  --kw-holz-hell: #a88456;
  --kw-gelb: #e8bf52;
  --kw-rot: #ff8b78;
  --kw-rot-weich: #3d231d;
  --kw-gold-weich: #3a2f1a;
  --kw-schatten: 0 1px 2px rgba(0, 0, 0, .55), 0 16px 36px -18px rgba(0, 0, 0, .85);
  --kw-schatten-klein: 0 1px 2px rgba(0, 0, 0, .55);
  --kw-tisch: #221b14;
  --kw-stoff: #322a20;
}

/* ---------- Seite: Huelle, Kulisse, Fuss ---------- */
/* Sprungmarke fuer Screenreader: unsichtbar, erst bei Tastaturfokus sichtbar.
   Das Paket laedt die Plattform-CSS nicht mehr, deshalb steht sie hier. */
.kw_app .bypass {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 60;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.kw_app .bypass:focus-within,
.kw_app .bypass:focus {
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  padding: .5rem .8rem;
  background: var(--kw-flaeche);
  border: 2px solid var(--kw-akzent);
  border-radius: 0 0 10px 0;
}
.kw_app .bypass a { color: var(--kw-text); font-weight: 700; }

html { background: var(--kw-bg); }
body.jupi.kw_app {
  margin: 0;
  padding: 0;
  background-color: var(--kw-bg);
  /* Weg A (3.13.7): eine gestreckte Naehstube, Mittagslicht */
  background-image:
    linear-gradient(180deg, rgba(255, 250, 240, .28), rgba(255, 250, 240, 0) 46%),
    url("kulisse.svg");
  background-position: center top, center top;
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
  color: var(--kw-text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.kw_app *,
.kw_app *::before,
.kw_app *::after { box-sizing: border-box; }
.kw_app h1, .kw_app h2, .kw_app h3, .kw_app p, .kw_app ol, .kw_app ul { margin-top: 0; }
.kw_app img, .kw_app svg, .kw_app canvas { max-width: 100%; }
.kw_app dialog { margin: auto; }
html[data-theme="dark"] body.jupi.kw_app {
  /* Dieselbe Stube bei Nacht: eigene Szene mit Lampenlicht */
  background-image:
    radial-gradient(ellipse at 78% 18%, rgba(255, 196, 120, .16), transparent 58%),
    url("kulisse-nacht.svg");
}
.kw_app .jupi_container {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100dvh;
  background: transparent;
}
.kw_app .jupi_container > .jupi_main,
.kw_app .jupi_container > .jupi_footer { background: transparent; }
.kw_app .jupi_main {
  flex: 1 0 auto;
  width: 100%;
  max-width: 120rem;
  margin: 0 auto;
  padding: .7rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.kw_app .jupi_footer {
  margin-top: auto;
  border-top: 0;
  border-radius: 0;
  width: 100%;
  max-width: 120rem;
  margin-left: auto;
  margin-right: auto;
  padding: .7rem 1rem 1.1rem;
  color: var(--kw-leise);
}
.kw_app .jupi_footer p {
  margin: 0;
  font-size: .8rem;
  text-align: center;
  color: var(--kw-leise);
  text-shadow: 0 1px 0 rgba(255, 250, 240, .65);
}
html[data-theme="dark"] .kw_app .jupi_footer p { text-shadow: 0 1px 2px rgba(0, 0, 0, .7); }

.kw_app :is(button, select, input, summary):focus-visible {
  outline: 3px solid var(--kw-akzent);
  outline-offset: 2px;
}

/* ---------- Kopfzeile: drei Zonen im Naehstuben-Material (3.13.2) ---------- */
.kw_app .neu_header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .6rem;
  min-height: 58px;
  margin: 0;
  padding: .35rem 1rem;
  border-radius: 0;
  border-bottom: 4px solid var(--kw-holz-dunkel);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(0, 0, 0, .12)),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .045) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, #8a6136, #6d4a28 62%, #5d3f22);
  color: #fffaf0;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .18), 0 10px 24px -18px rgba(0, 0, 0, .8);
  box-sizing: border-box;
}
html[data-theme="dark"] .kw_app .neu_header {
  background:
    linear-gradient(180deg, rgba(255, 220, 170, .08), rgba(0, 0, 0, .45)),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .12) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, #4a3220, #2d1f14 62%, #1f150d);
  border-bottom-color: #120c07;
}
.kw_app .neu_header .jupi_nav_back {
  justify-self: start;
  border-radius: 999px;
  background: #fffaf0;
  color: #6d4a28;
  padding: .5rem .9rem;
  min-height: 40px;
  border: 1px solid rgba(93, 63, 34, .35);
  box-shadow: var(--kw-schatten-klein);
  text-decoration: none;
  font-weight: 700;
  display: flex;
  align-items: center;
  font-size: .9rem;
}
.kw_app .neu_header .jupi_nav_back:hover { background: #fff; color: #4a3018; }
html[data-theme="dark"] .kw_app .neu_header .jupi_nav_back {
  background: #2a1e13;
  color: #f0d3a8;
  border-color: #7d5c35;
}
.kw_app .neu_marke {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-width: 0;
  text-align: center;
}
.kw_app .neu_marke img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  flex: none;
  border-radius: 10px;
  background: #fffaf0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
.kw_app .neu_marke strong {
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: .01em;
  color: #fff6e6;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kw_app .neu_header .jupi_werkzeuge {
  justify-self: end;
  display: flex;
  gap: .45rem;
  align-items: center;
  min-width: 0;
}
.kw_app .jupi_sprachen_select {
  width: 13rem;
  max-width: 100%;
  height: 40px;
  min-height: 40px;
  border: 1px solid rgba(255, 250, 240, .45);
  border-radius: 999px;
  background: rgba(255, 250, 240, .16);
  color: #fff6e6;
  font: inherit;
  font-size: .85rem;
  padding: .3rem .7rem;
}
.kw_app .jupi_sprachen_select option { color: #33291f; background: #fffaf0; }
.kw_app #jupi_theme_toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  width: 74px;
  height: 40px;
  min-width: 74px;
  min-height: 40px;
  border: 1px solid rgba(255, 250, 240, .5);
  border-radius: 24px;
  padding: 0 9px;
  box-sizing: border-box;
  background: rgba(255, 250, 240, .16);
  box-shadow: none;
}
.kw_app .jts_icon { font-size: 12px; line-height: 1; z-index: 1; }
.kw_app .jts_thumb {
  position: absolute;
  left: 4px;
  top: 3px;
  width: 32px;
  height: 32px;
  min-height: 0;
  border-radius: 50%;
  background: #fffaf0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
  transition: transform .15s;
}
.kw_app [aria-checked="true"] .jts_thumb { transform: translateX(32px); }

/* ---------- Menueleiste: Modus + Aktionen (Typ 3: Aktionen oben) ---------- */
.kw_leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .55rem;
  padding: .3rem 0 .1rem;
}

.kw_modi {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  margin: 0;
  background: color-mix(in srgb, var(--kw-flaeche) 94%, transparent);
  border: 1px solid var(--kw-linie);
  border-radius: 999px;
  box-shadow: var(--kw-schatten-klein);
  backdrop-filter: blur(3px);
}

.kw_modi_knopf {
  font: inherit;
  font-size: .92rem;
  font-weight: 700;
  min-height: 40px;
  padding: 0 1.15rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--kw-leise);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.kw_modi_knopf:hover { color: var(--kw-text); background: var(--kw-flaeche2); }
.kw_modi_knopf_aktiv,
.kw_modi_knopf_aktiv:hover {
  background: linear-gradient(145deg, var(--kw-akzent), var(--kw-akzent-stark));
  color: var(--kw-auf-akzent);
  box-shadow: var(--kw-schatten-klein);
}

.kw_aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  margin: 0;
}

.kw_aktion,
.kw_sound {
  font: inherit;
  font-size: .88rem;
  font-weight: 700;
  min-height: 40px;
  min-width: 40px;
  padding: 0 .95rem;
  border: 1px solid var(--kw-linie-stark);
  border-radius: 999px;
  background: color-mix(in srgb, var(--kw-flaeche) 92%, transparent);
  color: var(--kw-text);
  cursor: pointer;
  box-shadow: var(--kw-schatten-klein);
  backdrop-filter: blur(3px);
  transition: transform .12s ease, border-color .15s ease, background .15s ease;
}
.kw_aktion:hover,
.kw_sound:hover { border-color: var(--kw-akzent); transform: translateY(-1px); }
.kw_aktion:active,
.kw_sound:active { transform: none; background: var(--kw-flaeche3); }
.kw_sound { padding: 0; width: 40px; font-size: 1.05rem; }
.kw_sound_stumm { opacity: .6; }

/* ---------- Stationsband: Massband unter den Stationen ---------- */
.kw_stationen {
  --kw-schritt: 0;
  --kw-schritte: 5;
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .2rem;
  padding: .5rem .6rem .8rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)),
    var(--kw-flaeche);
  border: 1px solid var(--kw-linie);
  border-radius: var(--kw-radius);
  box-shadow: var(--kw-schatten);
  backdrop-filter: blur(4px);
}
html[data-theme="dark"] .kw_stationen {
  background:
    linear-gradient(180deg, rgba(255, 230, 190, .06), rgba(0, 0, 0, .12)),
    var(--kw-flaeche);
}
/* Spur und Fortschritt wie ein aufgelegtes Massband */
.kw_stationen::before,
.kw_stationen::after {
  content: "";
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: .42rem;
  height: 5px;
  border-radius: 5px;
  background: var(--kw-flaeche3);
}
.kw_stationen::after {
  right: auto;
  width: calc((100% - 2rem) * var(--kw-schritt) / var(--kw-schritte));
  background: repeating-linear-gradient(90deg, var(--kw-gelb) 0 10px,
    color-mix(in srgb, var(--kw-gelb) 66%, #4a3018) 10px 12px);
  box-shadow: 0 1px 2px rgba(74, 54, 28, .35);
  transition: width .35s ease;
}

.kw_station {
  font: inherit;
  font-size: .92rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 44px;
  padding: .3rem .5rem;
  border: 0;
  border-radius: var(--kw-radius-klein);
  background: transparent;
  color: var(--kw-leise);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.kw_station:hover { background: var(--kw-flaeche2); color: var(--kw-text); }

.kw_station_nr {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--kw-flaeche3);
  color: var(--kw-leise);
  font-size: .82rem;
  font-weight: 800;
  border: 2px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
html[data-theme="dark"] .kw_station_nr { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }

.kw_station_fertig { color: var(--kw-text); }
.kw_station_fertig .kw_station_nr {
  background: var(--kw-akzent-weich);
  border-color: var(--kw-akzent);
  color: transparent;
  position: relative;
}
.kw_station_fertig .kw_station_nr::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--kw-akzent);
  font-size: .95rem;
}

.kw_station_aktiv,
.kw_station_aktiv:hover {
  background: var(--kw-akzent-weich);
  color: var(--kw-text);
  box-shadow: inset 0 0 0 1px var(--kw-akzent), var(--kw-schatten-klein);
}
.kw_station_aktiv .kw_station_nr {
  background: var(--kw-akzent);
  color: var(--kw-auf-akzent);
  border-color: var(--kw-akzent);
}
.kw_station_aktiv .kw_station_nr::after { content: none; }

/* ---------- Werkbank: Panel links, Naehtisch rechts ---------- */
.kw_werkbank {
  display: grid;
  grid-template-columns: minmax(20rem, 25rem) minmax(0, 1fr);
  gap: .8rem;
  align-items: start;
}
.kw_linke_spalte { min-width: 0; }

/* ---------- Buehne: der Naehtisch (Holzrahmen mit eingelegter Flaeche) ---------- */
.kw_tisch_bereich {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--kw-holz-hell), var(--kw-holz) 22%, var(--kw-holz-dunkel));
  border: 1px solid var(--kw-holz-dunkel);
  border-radius: var(--kw-radius);
  box-shadow: var(--kw-schatten), inset 0 1px 0 rgba(255, 240, 214, .35);
  padding: 6px;
  overflow: hidden;
  position: sticky;
  top: .75rem;
}
html[data-theme="dark"] .kw_tisch_bereich {
  background: linear-gradient(180deg, #4b3520, #2c1e12 24%, #180f08);
  border-color: #100a05;
  box-shadow: var(--kw-schatten), inset 0 1px 0 rgba(255, 210, 150, .16);
}

/* Werkzeugleiste ueber dem Tisch: liegt auf dem Holzrahmen */
.kw_werkzeugleiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .4rem;
  padding: .25rem .2rem .55rem;
}

.kw_werkzeug_gruppe {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(255, 240, 214, .22);
  border-radius: 999px;
  background: rgba(20, 12, 6, .30);
}
/* zweite Gruppe (Ansicht, Puppe, Figur, Drehen): einzelne Chips */
.kw_werkzeug_gruppe + .kw_werkzeug_gruppe {
  background: transparent;
  border-color: transparent;
  padding: 0;
  gap: .35rem;
}
.kw_werkzeug_gruppe + .kw_werkzeug_gruppe .kw_wkz {
  border: 1px solid rgba(255, 240, 214, .34);
  background: rgba(255, 246, 228, .12);
  color: #fff3df;
}
.kw_werkzeug_gruppe + .kw_werkzeug_gruppe .kw_wkz:hover {
  border-color: #fff3df;
  background: rgba(255, 246, 228, .2);
}

.kw_wkz {
  font: inherit;
  font-size: .84rem;
  font-weight: 700;
  min-height: 40px;
  min-width: 40px;
  padding: 0 .7rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 243, 223, .78);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.kw_wkz:hover { color: #fff7ea; background: rgba(255, 246, 228, .14); }
.kw_wkz_aktiv,
.kw_wkz_aktiv:hover {
  background: linear-gradient(145deg, var(--kw-akzent), var(--kw-akzent-stark));
  color: var(--kw-auf-akzent);
  box-shadow: var(--kw-schatten-klein);
}

/* Der eigentliche Tisch: eingelassene Flaeche mit Messingkante */
.kw_tisch {
  position: relative;
  width: 100%;
  height: clamp(400px, calc(100dvh - 330px), 860px);
  overflow: hidden;
  border-radius: var(--kw-radius-klein);
  background: var(--kw-tisch);
  box-shadow: inset 0 0 0 1px rgba(255, 240, 214, .18), inset 0 2px 14px rgba(0, 0, 0, .35);
}
.kw_tisch::after {
  /* Messingkante als feine Linie im Holzrahmen */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(224, 178, 60, .45);
  pointer-events: none;
}
.kw_tisch canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  border-radius: inherit;
}
.kw_unsichtbar { visibility: hidden; }

/* Meldung: Papierzettel auf dem Tisch */
.kw_meldung {
  position: absolute;
  left: 50%;
  bottom: .85rem;
  transform: translate(-50%, 8px);
  width: max-content;
  max-width: calc(100% - 1.4rem);
  padding: .55rem 1rem;
  border-radius: 999px;
  background: var(--kw-flaeche);
  color: var(--kw-text);
  border: 1px solid var(--kw-linie-stark);
  font-size: .9rem;
  font-weight: 700;
  box-shadow: var(--kw-schatten);
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
}
.kw_meldung_sichtbar { opacity: 1; transform: translate(-50%, 0); }

/* Statuszeile am Tischfuss (keine Erklarbox, 3.13.4) */
.kw_entwurf_info {
  margin: 6px 0 0;
  padding: .5rem .9rem;
  font-size: .84rem;
  line-height: 1.4;
  font-weight: 600;
  color: #f3e4c9;
  background: rgba(20, 12, 6, .45);
  border-radius: 999px;
  border: 1px solid rgba(255, 240, 214, .2);
  overflow-wrap: anywhere;
  text-align: center;
}
html[data-theme="dark"] .kw_entwurf_info {
  color: #e8d5b3;
  background: rgba(0, 0, 0, .45);
}

/* ---------- Panel (Werkzeugkasten): Papier mit Nussbaumkante ---------- */
.kw_panel {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 180px),
    var(--kw-flaeche);
  border: 1px solid var(--kw-linie);
  border-top: 4px solid var(--kw-holz);
  border-radius: var(--kw-radius);
  box-shadow: var(--kw-schatten);
  padding: 1.05rem 1.1rem 1.25rem;
  max-height: calc(100dvh - 215px);
  overflow-y: auto;
  scrollbar-gutter: stable;
  scroll-padding-top: 3.5rem;
  position: sticky;
  top: .75rem;
  scrollbar-color: var(--kw-linie-stark) var(--kw-flaeche2);
  scrollbar-width: thin;
}
html[data-theme="dark"] .kw_panel {
  background:
    linear-gradient(180deg, rgba(255, 230, 190, .05), rgba(0, 0, 0, 0) 180px),
    var(--kw-flaeche);
  border-top-color: var(--kw-holz-hell);
}

.kw_panel > h2 {
  margin: 0 0 .5rem;
  padding-bottom: .6rem;
  border-bottom: 1px dashed var(--kw-linie-stark);
  font-size: 1.24rem;
  line-height: 1.25;
  letter-spacing: .005em;
  color: var(--kw-text);
}
.kw_panel > h2:not(:first-child) { margin-top: 1rem; }
.kw_panel h3 {
  margin: 1.15rem 0 .45rem;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--kw-akzent);
}
.kw_panel p {
  margin: .4rem 0;
  font-size: .94rem;
  line-height: 1.55;
  color: var(--kw-text);
}
.kw_panel > h2 + p { color: var(--kw-leise); }

/* ---------- Auftrag kurz (ueber den Stationen 2-6): Auftragszettel ---------- */
.kw_auftrag_kurz {
  margin: 0 0 1rem;
  padding: .7rem .85rem;
  border: 1px solid var(--kw-linie-stark);
  border-left: 5px solid var(--kw-gelb);
  border-radius: var(--kw-radius-klein);
  background: var(--kw-gold-weich);
}
.kw_auftrag_kurz strong { font-size: 1rem; }
.kw_auftrag_kurz .kw_chips { margin: .45rem 0 0; }
.kw_auftrag_kurz .kw_chip { font-size: .78rem; padding: .22rem .55rem; }

/* ---------- Knoepfe ---------- */
.kw_knopf {
  font: inherit;
  font-size: .94rem;
  font-weight: 800;
  line-height: 1.3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 42px;
  padding: .45rem 1.05rem;
  margin: .3rem .35rem .3rem 0;
  border: 1px solid transparent;
  border-radius: var(--kw-radius-klein);
  background: linear-gradient(145deg, var(--kw-akzent), var(--kw-akzent-stark));
  color: var(--kw-auf-akzent);
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .18), 0 8px 16px -10px color-mix(in srgb, var(--kw-akzent) 70%, #000);
  transition: transform .12s ease, filter .15s ease, box-shadow .15s ease;
}
.kw_knopf:hover { filter: brightness(1.07); transform: translateY(-1px); }
.kw_knopf:active { transform: none; filter: brightness(.95); }

.kw_knopf_grau {
  background: var(--kw-flaeche2);
  color: var(--kw-text);
  border-color: var(--kw-linie-stark);
  box-shadow: var(--kw-schatten-klein);
}
.kw_knopf_warn { background: var(--kw-rot); color: #fff; }
.kw_knopf:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
  filter: none;
  box-shadow: none;
}
.kw_knopf_block { width: 100%; margin-right: 0; }

/* der erste Block-Knopf (Weiter zur naechsten Station) klebt oben im Panel */
.kw_panel > .kw_knopf_block:first-of-type {
  position: sticky;
  top: -1.05rem;
  z-index: 3;
  margin-top: .2rem;
  margin-bottom: .7rem;
  min-height: 46px;
}

/* ---------- Eingabefelder ---------- */
.kw_zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  align-items: center;
  gap: .6rem;
  margin: .55rem 0;
  font-size: .93rem;
}
.kw_zeile label { overflow-wrap: anywhere; font-weight: 700; }
.kw_zeile select,
.kw_zeile input[type="number"],
.kw_masszeile input {
  font: inherit;
  font-size: .93rem;
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: .3rem .6rem;
  border: 1px solid var(--kw-linie-stark);
  border-radius: 10px;
  background: var(--kw-flaeche2);
  color: var(--kw-text);
}
.kw_zeile select:hover,
.kw_masszeile input:hover { border-color: var(--kw-akzent); }

/* ---------- Kleider-Vorlagen ---------- */
.kw_vorlagen_liste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
  max-height: 320px;
  overflow-y: auto;
  padding: .25rem;
  margin: .4rem 0 .8rem;
  scrollbar-gutter: stable;
  border-radius: var(--kw-radius-klein);
}
.kw_vorlage_btn {
  font: inherit;
  font-size: .84rem;
  font-weight: 700;
  line-height: 1.3;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .25rem;
  min-width: 0;
  padding: .6rem .5rem;
  border: 1px solid var(--kw-linie);
  border-radius: 14px;
  background: var(--kw-flaeche2);
  color: var(--kw-text);
  cursor: pointer;
  box-shadow: 0 2px 4px #00000008;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.kw_vorlage_btn svg { width: 100%; height: 90px; color: #4a3c2c; }
html[data-theme="dark"] .kw_vorlage_btn svg { color: #e3d6bd; }
.kw_vorlage_btn:hover {
  border-color: var(--kw-akzent);
  background: var(--kw-flaeche);
  transform: translateY(-2px);
  box-shadow: var(--kw-schatten);
}
.kw_vorlage_btn[aria-pressed="true"] {
  border-color: var(--kw-akzent);
  background: var(--kw-akzent-weich);
  box-shadow: inset 0 0 0 1px var(--kw-akzent);
}

/* ---------- Kachelgruppen (Schnitt) ---------- */
.kw_gruppe {
  margin: .75rem 0;
  padding: .7rem .75rem .8rem;
  border: 1px solid var(--kw-linie);
  border-top: 1px dashed var(--kw-linie-stark);
  border-radius: 14px;
  background: var(--kw-flaeche2);
}
.kw_panel .kw_gruppe_kopf,
.kw_gruppe_kopf {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .55rem !important;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--kw-text) !important;
}
.kw_gruppe_symbol {
  display: inline-grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--kw-akzent-weich);
  font-size: 1rem;
}
.kw_gruppe_kopf small {
  margin-left: auto;
  font-size: .76rem;
  font-weight: 500;
  color: var(--kw-leise);
}
.kw_kacheln { display: flex; flex-wrap: wrap; gap: .4rem; }
.kw_kachel {
  font: inherit;
  font-size: .85rem;
  line-height: 1.2;
  min-height: 40px;
  padding: .4rem .8rem;
  border: 1.5px solid var(--kw-linie-stark);
  border-radius: 999px;
  background: var(--kw-flaeche);
  color: var(--kw-text);
  cursor: pointer;
  box-shadow: 0 2px 4px #00000008;
  transition: transform .1s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.kw_kachel:hover { border-color: var(--kw-akzent); transform: translateY(-1px); }
.kw_kachel[aria-pressed="true"] {
  border-color: var(--kw-akzent);
  background: var(--kw-akzent-weich);
  box-shadow: inset 0 0 0 1px var(--kw-akzent);
  font-weight: 700;
}
.kw_kachel[aria-pressed="true"]::before { content: "✓ "; color: var(--kw-akzent); }
.kw_kachel_ohne { border-style: dashed; opacity: .85; }

/* ---------- Wunsch-Chips ---------- */
.kw_chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0; }
.kw_chip {
  font-size: .84rem;
  font-weight: 600;
  padding: .28rem .7rem;
  border-radius: 999px;
  background: var(--kw-flaeche);
  color: var(--kw-text);
  border: 1px solid var(--kw-linie);
}
.kw_chip_erfuellt {
  background: var(--kw-akzent-weich);
  border-color: var(--kw-akzent);
}
.kw_chip_offen {
  background: var(--kw-gold-weich);
  border-color: var(--kw-gelb);
}

/* ---------- Stoffwahl und Farben ---------- */
.kw_stoffwahl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
  margin: .5rem 0;
}
.kw_stoffkachel {
  font: inherit;
  font-size: .85rem;
  text-align: left;
  min-height: 44px;
  padding: .6rem .7rem;
  border: 2px solid var(--kw-linie);
  border-radius: 14px;
  background: var(--kw-flaeche2);
  color: var(--kw-text);
  cursor: pointer;
  box-shadow: 0 2px 4px #00000008;
  transition: transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.kw_stoffkachel:hover { border-color: var(--kw-linie-stark); transform: translateY(-1px); }
.kw_stoffkachel_aktiv,
.kw_stoffkachel_aktiv:hover {
  border-color: var(--kw-akzent);
  background: var(--kw-akzent-weich);
  box-shadow: inset 0 0 0 1px var(--kw-akzent),
    0 6px 16px -10px color-mix(in srgb, var(--kw-akzent) 40%, transparent);
}
.kw_stoffkachel strong { display: block; font-size: .92rem; margin-bottom: .15rem; }
.kw_stoffkachel small { color: var(--kw-leise); line-height: 1.35; display: block; }

.kw_farben { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0; }
.kw_farbe {
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 0;
  border: 3px solid var(--kw-flaeche);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--kw-linie-stark), var(--kw-schatten-klein);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.kw_farbe:hover { transform: scale(1.08); }
.kw_farbe_aktiv,
.kw_farbe_aktiv:hover {
  box-shadow: 0 0 0 3px var(--kw-akzent), var(--kw-schatten-klein);
  transform: scale(1.1);
}

/* ---------- Massband ---------- */
.kw_massband { display: grid; gap: .6rem; margin: .7rem 0; }
.kw_masszeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4.6rem 2rem;
  align-items: center;
  gap: .5rem;
}
.kw_masszeile label { font-size: .92rem; font-weight: 700; }
.kw_band { grid-column: 1 / -1; width: 100%; height: auto; }
.kw_masszahl {
  font-size: .88rem;
  font-weight: 800;
  color: var(--kw-akzent);
  min-width: 0;
  text-align: left;
}

/* ---------- Teile-Liste (Naehen), Auftragskarten ---------- */
.kw_teileliste { display: grid; gap: .5rem; margin: .6rem 0; }
.kw_teil {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  padding: .6rem .75rem;
  border: 1px solid var(--kw-linie);
  border-radius: var(--kw-radius-klein);
  background: var(--kw-flaeche2);
  font-size: .9rem;
}
.kw_teil_fertig { background: var(--kw-akzent-weich); border-color: var(--kw-akzent); }
.kw_teil_status { margin-left: auto; font-size: .8rem; color: var(--kw-leise); }

.kw_auftrag_karte {
  display: block;
  padding: 1rem;
  margin: .65rem 0;
  border-radius: 14px;
  border-left: 3px solid var(--kw-linie-stark);
  background: linear-gradient(135deg, var(--kw-flaeche), var(--kw-flaeche2));
  transition: transform .12s ease, box-shadow .15s ease, border-color .12s ease;
}
.kw_auftrag_karte:hover {
  transform: translateY(-2px);
  border-color: var(--kw-akzent);
  border-left-color: var(--kw-akzent);
  box-shadow: var(--kw-schatten);
}
.kw_auftrag_kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .5rem;
  padding-bottom: .5rem;
  border-bottom: 1px dashed var(--kw-linie-stark);
}
.kw_auftrag_kopf strong { font-size: 1.02rem; line-height: 1.35; }
.kw_auftrag_kopf div { font-size: .8rem; letter-spacing: .08rem; white-space: nowrap; }
.kw_auftrag_karte .kw_chips { margin: .5rem 0; }
.kw_auftrag_karte .kw_teil_status {
  display: inline-block;
  margin: .25rem .6rem 0 0;
  padding: .15rem .55rem;
  border-radius: 999px;
  background: var(--kw-flaeche3);
}
.kw_auftrag_karte .kw_knopf { float: right; margin: 0; }
.kw_auftrag_karte::after { content: ""; display: table; clear: both; }

/* ---------- Bewertung ---------- */
.kw_sterne { font-size: 1.8rem; letter-spacing: .18rem; margin: .3rem 0; }
.kw_stern_an { color: var(--kw-gelb); text-shadow: 0 1px 0 rgba(0, 0, 0, .18); }
.kw_stern_aus { color: var(--kw-linie-stark); }

.kw_mangel {
  font-size: .9rem;
  line-height: 1.45;
  padding: .5rem .7rem;
  margin: .35rem 0;
  border-left: 5px solid var(--kw-rot);
  border-radius: 0 var(--kw-radius-klein) var(--kw-radius-klein) 0;
  background: var(--kw-rot-weich);
}
.kw_gut { border-left-color: var(--kw-akzent); background: var(--kw-akzent-weich); }

/* ---------- Rechenwege, Info, Hilfe ---------- */
.kw_rechnung {
  font-size: .85rem;
  border-left: 4px solid #2e6f8e;
  padding-left: .7rem;
  margin-top: .3rem;
  color: var(--kw-leise);
}
.kw_info_rechnung {
  font-size: .92rem;
  border-left: 4px solid #2e6f8e;
  padding-left: .7rem;
}
.kw_hilfe_extra,
.kw_hilfe_tasten { font-size: .92rem; line-height: 1.55; }

/* ---------- Dialoge: Papier auf dem Naehtisch ---------- */
/* Groesse und Scrollen des Fensters standen frueher in rahmen.css (aus dem
   Paket entfernt) - ohne diese Zeile lief das Hilfe-Fenster fast bildschirmbreit. */
.kw_app .neu_dialog {
  box-sizing: border-box;
  width: min(48rem, calc(100vw - 24px));
  max-height: 88dvh;
  overflow: auto;
  line-height: 1.55;
  border: 1px solid var(--kw-linie-stark);
  border-top: 5px solid var(--kw-holz);
  border-radius: 22px;
  background: var(--kw-flaeche);
  color: var(--kw-text);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .55);
  padding: 1.25rem 1.4rem 1.4rem;
}
.kw_app .neu_schliessen {
  display: flex;
  justify-content: flex-end;
  margin: 0;
}
.kw_app .neu_schliessen button {
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: .3rem;
  border-radius: 50%;
  cursor: pointer;
}
.kw_app .neu_dialog::backdrop { background: rgba(20, 14, 8, .58); backdrop-filter: blur(3px); }
.kw_app .neu_dialog h2 { margin: 0 0 .9rem; font-size: 1.35rem; }
.kw_app .neu_dialog li { margin: .55rem 0; }
.kw_app .neu_schliessen button {
  border: 1px solid var(--kw-linie-stark);
  background: var(--kw-flaeche2);
  color: var(--kw-text);
  font-size: 1rem;
}
.kw_app .neu_schliessen button:hover { border-color: var(--kw-akzent); }
.kw_hilfe summary { font-weight: 700; cursor: pointer; }

#kw_export_inhalt .kw_knopf { margin: .4rem .35rem .4rem 0; }
#kw_export_inhalt .kw_zeile { max-width: 100%; }

/* ---------- Tablet und Handy ---------- */
@media (max-width: 1100px) {
  .kw_werkbank { grid-template-columns: minmax(18rem, 22rem) minmax(0, 1fr); }
  .kw_station { flex-direction: column; gap: .2rem; font-size: .8rem; }
}

@media (max-width: 900px) {
  .kw_app .jupi_main { padding: .5rem .55rem .8rem; gap: .55rem; }
  .kw_werkbank { grid-template-columns: minmax(0, 1fr); }
  .kw_linke_spalte { display: contents; }
  .kw_stationen { grid-row: 1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kw_tisch_bereich { grid-row: 2; order: 1; position: static; }
  .kw_panel { grid-row: 3; order: 2; max-height: none; position: static; overflow: visible; }
  .kw_panel > .kw_knopf_block:first-of-type { top: .5rem; }
  .kw_tisch { height: clamp(300px, 46dvh, 520px); }
  .kw_leiste { justify-content: center; }
  .kw_modi { margin: 0; }
  .kw_stationen { padding: .45rem .45rem .7rem; }
  .kw_station { flex-direction: row; gap: .35rem; }
  .kw_station_name { display: none; }
  .kw_station_aktiv .kw_station_name { display: inline; }
  .kw_stationen { display: flex; gap: .15rem; }
  .kw_station { flex: 0 0 auto; min-width: 0; }
  .kw_station_aktiv { flex: 1 1 auto; justify-content: center; }
  .kw_wkz { padding: 0 .6rem; font-size: .8rem; }
  .kw_werkzeugleiste { justify-content: center; }
  .kw_app .neu_header { grid-template-columns: 1fr 1fr; padding: .3rem .6rem; }
  .kw_app .neu_marke { grid-column: 1 / -1; grid-row: 1; justify-self: center; font-size: 1rem; }
  .kw_app .neu_header .jupi_nav_back { grid-row: 2; grid-column: 1; }
  .kw_app .neu_header .jupi_werkzeuge { grid-row: 2; grid-column: 2; }
  .kw_app .jupi_sprachen_select { width: 7.6rem; }
  .kw_app .neu_marke img { width: 34px; height: 34px; }
}

@media (max-width: 560px) {
  .kw_aktionen { justify-content: center; }
  .kw_modi_knopf { padding: 0 .85rem; font-size: .86rem; }
  .kw_aktion { padding: 0 .7rem; font-size: .82rem; }
  .kw_stoffwahl { grid-template-columns: minmax(0, 1fr); }
  .kw_werkzeugleiste { padding: .2rem .1rem .45rem; gap: .35rem; }
  .kw_zeile { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
  .kw_auftrag_karte .kw_knopf { float: none; width: 100%; margin-top: .4rem; }
  .kw_tisch_bereich { padding: 4px; }
  .kw_entwurf_info { font-size: .78rem; padding: .45rem .7rem; }
}

/* Sechs Stationen samt aktivem Namen passen bei 320 px nicht in eine Zeile. */
@media (max-width: 360px) {
  .kw_stationen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kw_station { flex-direction: column; min-height: 68px; font-size: .75rem; }
  .kw_station_name { display: inline; max-width: 100%; overflow-wrap: anywhere; }
  .kw_app .neu_header .jupi_nav_back { grid-column: 1 / -1; justify-self: center; }
  .kw_app .neu_header .jupi_werkzeuge { grid-column: 1 / -1; grid-row: 3; justify-self: center; }
}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
  .kw_app *,
  .kw_app *::before,
  .kw_app *::after {
    transition: none !important;
    animation: none !important;
  }
  .kw_app .kw_knopf:hover,
  .kw_app .kw_kachel:hover,
  .kw_app .kw_vorlage_btn:hover,
  .kw_app .kw_auftrag_karte:hover,
  .kw_app .kw_aktion:hover { transform: none; }
}