/*
 * Designer-Baukasten, Ebene 1 (ADR 012): die Hülle jedes Shop-Designers. Vollbild, Raster,
 * Reiter, Werkzeugleiste, Fußleiste und die Bausteine des Produkt-Schritts. Was eine Familie
 * (Poster, Laser) oder ein Motiv eigen hat, steht nie hier, sondern in deren Stylesheet, das
 * diese Datei per @import zuerst lädt. Keine Klasse einer Familie (twk-pd, twk-lk …) in dieser
 * Datei; pruefe:baukasten hält das fest.
 *
 * Regeln: docs/designer-css.md — kein rem (Themes setzen html auf 62,5 %), Längen in --u,
 * Klassen unter twk-bk, Anordnung über Container-Anfragen, jeder Wert, den ein Theme ändern
 * darf, als Variable mit Rückfall. Die Variablen der Blöcke vor ADR 012 (--twk-pd-*,
 * --twk-lk-*) gelten als Rückfall weiter: Ein Block im Theme wird erst mit dem nächsten
 * `shopify app deploy` neu.
 */

.twk-bk {
  --u: 1em;
  /* Rückfall ist das Farbschema des Themes (Dawn-Variablen), dann feste Werte: So folgt die
     Hülle auch dem dunklen Register, ohne dass jemand eine Einstellung setzt. */
  --twk-bk-t: var(
    --twk-bk-text,
    var(
      --twk-pd-text,
      var(--twk-lk-text, rgb(var(--color-foreground, 29, 28, 26)))
    )
  );
  --twk-bk-l: color-mix(in srgb, var(--twk-bk-t) 10%, transparent);
  --twk-bk-a: var(
    --twk-bk-akzent,
    var(
      --twk-pd-akzent,
      var(--twk-lk-akzent, rgb(var(--color-button, 29, 28, 26)))
    )
  );
  --twk-bk-at: var(
    --twk-bk-akzent-text,
    var(
      --twk-pd-akzent-text,
      var(--twk-lk-akzent-text, rgb(var(--color-button-text, 255, 255, 255)))
    )
  );
  --twk-bk-p: var(
    --twk-bk-panel,
    var(
      --twk-pd-panel,
      var(--twk-lk-panel, rgb(var(--color-background, 255, 255, 255)))
    )
  );
  --twk-bk-r: var(
    --twk-bk-radius,
    var(--twk-pd-radius, var(--twk-lk-radius, calc(var(--u) * 0.625)))
  );
  /* Rand im Ruhezustand ruhig, gewählt kräftig im Akzent (nach momenterie). */
  --twk-bk-rand: color-mix(in srgb, var(--twk-bk-t) 17%, transparent);
  --twk-bk-wahlgrund: color-mix(in srgb, var(--twk-bk-a) 6%, var(--twk-bk-p));
  /* Gestaltungssystem der Auswahlspalte (ADR 017, Nachtrag 2, B1), am momenterie-Editor gemessen
     (01.10.2026, Grundschrift 16 px): Jede Familie nimmt diese Werte statt eigener Zahlen.
     Abstände in einer Skala, eine Überschriftenstufe, zwei Textgrößen darunter. */
  --twk-bk-a1: calc(var(--u) * 0.25); /*  4 px */
  --twk-bk-a2: calc(
    var(--u) * 0.5
  ); /*  8 px: Überschrift bis Inhalt, Chips, Kacheln innen */
  --twk-bk-a3: calc(var(--u) * 0.75); /* 12 px: zwischen Karten */
  --twk-bk-a4: var(--u); /* 16 px: Innenabstand von Feldern und Karten */
  --twk-bk-a5: calc(var(--u) * 1.5); /* 24 px: zwischen Abschnitten */
  --twk-bk-a6: calc(var(--u) * 2); /* 32 px */
  --twk-bk-rand-x: var(
    --twk-bk-spaltenrand,
    calc(var(--u) * 1.25)
  ); /* 20 px Spalte links und rechts */
  --twk-bk-fs-klein: calc(
    var(--u) * 0.75
  ); /* 12 px: Hinweise, Kachelnamen, Zähler */
  --twk-bk-fs-chip: calc(var(--u) * 0.875); /* 14 px: Chips und Nebenknöpfe */
  --twk-bk-grau: color-mix(in srgb, var(--twk-bk-t) 62%, var(--twk-bk-p));
  --twk-bk-r-klein: calc(var(--twk-bk-r) * 0.5);
  --twk-bk-hoehe-feld: calc(var(--u) * 3); /* 48 px */
  --twk-bk-hoehe-knopf: calc(var(--u) * 2.75); /* 44 px */
  /* Größe statt nur Breite: Ob Bühne und Spalte nebeneinander stehen, hängt auch am
     Seitenverhältnis (quer ab 40em). Die Hülle füllt immer das Vollbild, ihre Höhe hängt also
     nicht am Inhalt; eingebettet (nur Reiter) fragt sie nur die Breite, siehe unten. */
  container: twk-bk / size;
  position: relative;
  width: 100%;
  height: 100%;
  /* Schmal scrollt die ganze Ansicht; die Bühne klebt dabei mit ihrem unteren Teil oben (siehe Bühne). */
  overflow-y: auto;
  overscroll-behavior: contain;
  color: var(--twk-bk-t);
  background: var(
    --twk-bk-buehne,
    var(
      --twk-pd-buehne,
      var(
        --twk-lk-buehne,
        color-mix(in srgb, var(--twk-bk-t) 7%, var(--twk-bk-p))
      )
    )
  );
  font-family: var(--twk-bk-schrift, var(--twk-pd-schrift, inherit));
  font-size: var(
    --twk-bk-schriftgroesse,
    var(--twk-pd-schriftgroesse, var(--twk-lk-schriftgroesse, 1em))
  );
  line-height: 1.45;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
.twk-bk *,
.twk-bk *::before,
.twk-bk *::after {
  box-sizing: border-box;
}
/* Themes gestalten button und input global; im Konfigurator gilt nur das Eigene. Über :where()
   so schwach wie die Regel des Themes (und danach geladen): Klassen einer Familie behalten
   ihre Rundung und Mindestbreite. */
:where(.twk-bk) button {
  appearance: none;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: none;
  min-width: 0;
  min-height: 0;
  cursor: pointer;
}
:where(.twk-bk) button:disabled {
  cursor: default;
}
.twk-bk button:focus-visible,
.twk-bk input:focus-visible,
.twk-bk select:focus-visible,
.twk-bk textarea:focus-visible {
  outline: calc(var(--u) * 0.15) solid
    color-mix(in srgb, var(--twk-bk-a) 55%, transparent);
  outline-offset: calc(var(--u) * 0.1);
}
.twk-bk p,
.twk-bk fieldset {
  margin: 0;
}

/* ---- Anordnung: schmal eine Spalte, die als Ganzes scrollt; breit zwei feste Spalten ----
   Nebeneinander ab 60em oder quer ab 40em. Nur nach der Breite zu gehen ließ eine Lücke: Ein
   Tablet quer oder ein kleines Notebook (1024–1100 px, Theme-Schrift 19 px) bekam die gestapelte
   Telefonansicht ohne Telefonhöhe, die Auswahl lag ganz unter der Falz (Befund 27.09.2026). */
.twk-bk__raster {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
@container twk-bk (min-width: 60em) or ((min-width: 40em) and (orientation: landscape)) {
  .twk-bk__raster {
    display: grid;
    height: 100%;
    min-height: 0;
    /* Schmaler als die eingestellte Breite, wenn das Fenster knapp ist: Die Bühne behält
       mindestens gut die Hälfte. */
    grid-template-columns:
      minmax(0, 1fr)
      min(
        var(
          --twk-bk-panel-breite,
          var(
            --twk-pd-panel-breite,
            var(--twk-lk-panel-breite, calc(var(--u) * 23))
          )
        ),
        max(calc(var(--u) * 19), 42cqw)
      );
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas:
      "buehne panel"
      "buehne fuss";
  }
}

/* ---- Bühne: der Platz, den ein Designer füllt ---- */
.twk-bk__buehne {
  grid-area: buehne;
  position: relative;
  flex: none;
  padding: calc(var(--u) * 1.2) calc(var(--u) * 0.8);
}
/* Schmal: Die Bühne startet groß und klebt beim Scrollen oben, bis nur ihr unterer Teil stehen bleibt
   (`--twk-bk-buehne-sichtbar`, Standard 30 % der Höhe). So sieht der Kunde immer, dass seine Auswahl etwas am Poster
   ändert (Marcel, 01.10.2026, nach momenterie; ersetzt „Bühne wandert ganz mit“ vom 27.09.). Die Höhe misst die Hülle
   (`--twk-bk-buehne-h`); fehlt sie, ist `top` ungültig und die Bühne scrollt wie bisher. Die Auswahl läuft darunter
   durch, darum hat die Bühne hier den Grund der Ansicht. */
.twk-bk:not(.twk-bk--eingebettet) > .twk-bk__raster > .twk-bk__buehne {
  position: sticky;
  top: min(
    0px,
    calc(var(--twk-bk-buehne-sichtbar, 30cqh) - var(--twk-bk-buehne-h))
  );
  z-index: 1;
  background: var(
    --twk-bk-buehne,
    var(
      --twk-pd-buehne,
      var(
        --twk-lk-buehne,
        color-mix(in srgb, var(--twk-bk-t) 7%, var(--twk-bk-p))
      )
    )
  );
  box-shadow: 0 1px 0 var(--twk-bk-l);
}
@container twk-bk (min-width: 60em) or ((min-width: 40em) and (orientation: landscape)) {
  .twk-bk__buehne,
  .twk-bk:not(.twk-bk--eingebettet) > .twk-bk__raster > .twk-bk__buehne {
    position: relative;
    top: auto;
    z-index: auto;
    box-shadow: none;
    min-height: 0;
    overflow: hidden;
    padding: calc(var(--u) * 2.5);
  }
}

/* Weitere Ansichten (Produktfotos, 3D) liegen über „Live“; der Designer bleibt darunter
   stehen, damit Karte und Eingaben ihren Zustand behalten. */
/* Ohne eigenes Kästchen: Die Bühne des Designers misst sich an der Bühne der Hülle. */
.twk-bk__live {
  display: contents;
}
.twk-bk__live[data-verdeckt] {
  visibility: hidden;
}
.twk-bk__ansicht {
  position: absolute;
  inset: calc(var(--u) * 2.5);
  display: grid;
  place-items: center;
}
.twk-bk__ansicht > img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: calc(var(--twk-bk-r) * 0.5);
  box-shadow: 0 calc(var(--u) * 0.3) calc(var(--u) * 1.4) rgba(0, 0, 0, 0.12);
}
/* Leiste der Ansichten links der Bühne, nur am Rechner (nach momenterie): vorn „Live“,
   dahinter Produktfotos. Am Telefon zählt jeder Pixel Höhe für den Designer. */
.twk-bk__ansichten {
  display: none;
}
@container twk-bk (min-width: 60em) or ((min-width: 40em) and (orientation: landscape)) {
  .twk-bk__buehne[data-ansichten] {
    padding-left: calc(var(--u) * 7.5);
  }
  .twk-bk__buehne[data-ansichten] .twk-bk__ansicht {
    left: calc(var(--u) * 7.5);
  }
  .twk-bk__ansichten {
    position: absolute;
    top: 50%;
    left: calc(var(--u) * 1.6);
    z-index: 4;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: calc(var(--u) * 0.6);
    max-height: calc(100% - var(--u) * 3);
    overflow-y: auto;
    scrollbar-width: none;
  }
  .twk-bk .twk-bk__ansichten > button {
    flex: none;
    width: calc(var(--u) * 3.9);
    height: calc(var(--u) * 3.9);
    padding: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--twk-bk-rand);
    border-radius: calc(var(--twk-bk-r) * 0.75);
    background: var(--twk-bk-p);
    font-size: calc(var(--u) * 0.72);
  }
  .twk-bk .twk-bk__ansichten > button[aria-pressed="true"] {
    border-color: var(--twk-bk-a);
    box-shadow: inset 0 0 0 1px var(--twk-bk-a);
  }
  .twk-bk__ansichten img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* „Live“: Symbol oben, darunter ein Band im Akzent. */
  .twk-bk .twk-bk__ansichten > button:first-child {
    grid-template-rows: 1fr auto;
  }
  .twk-bk__ansichten > button:first-child svg {
    width: calc(var(--u) * 1.4);
    height: calc(var(--u) * 1.4);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
  }
  .twk-bk__ansichten > button:first-child span {
    align-self: stretch;
    width: 100%;
    padding: calc(var(--u) * 0.1) 0;
    background: var(--twk-bk-a);
    color: var(--twk-bk-at);
  }
}

/* ---- Werkzeugleiste: senkrechte Segmentleiste, gerundet nur an den äußeren Enden. Wo sie
   steht, entscheidet die Bühne. ---- */
.twk-bk-werkzeuge {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: var(--twk-bk-r);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.twk-bk .twk-bk-werkzeuge > button {
  flex: none;
  width: calc(var(--u) * 2);
  height: calc(var(--u) * 1.9);
  padding: 0;
  border: 1px solid var(--twk-bk-l);
  border-radius: 0;
  background: var(--twk-bk-p);
  line-height: 1;
}
.twk-bk .twk-bk-werkzeuge > button:hover {
  background: color-mix(in srgb, var(--twk-bk-t) 6%, var(--twk-bk-p));
}
.twk-bk .twk-bk-werkzeuge > button:disabled {
  color: color-mix(in srgb, var(--twk-bk-t) 30%, var(--twk-bk-p));
  background: var(--twk-bk-p);
}
.twk-bk .twk-bk-werkzeuge > button[aria-pressed="true"] {
  background: var(--twk-bk-a);
  color: var(--twk-bk-at);
}
.twk-bk .twk-bk-werkzeuge > button + button {
  margin-top: -1px;
}
.twk-bk .twk-bk-werkzeuge > button:first-child {
  border-radius: var(--twk-bk-r) var(--twk-bk-r) 0 0;
}
.twk-bk .twk-bk-werkzeuge > button:last-child {
  border-radius: 0 0 var(--twk-bk-r) var(--twk-bk-r);
}

/* Umschalter 2D/3D (AnsichtUmschalter): links oben an der Bühne, waagerecht, Werte wie die Schichtkarte. */
.twk-bk-werkzeuge--ansichten {
  position: absolute;
  top: calc(var(--u) * 0.75);
  left: calc(var(--u) * 0.75);
  z-index: 3;
  flex-direction: row;
}
.twk-bk .twk-bk-werkzeuge--ansichten > button {
  width: auto;
  min-width: calc(var(--u) * 2.75);
  padding: 0 calc(var(--u) * 0.6);
  font-size: var(--twk-bk-fs-chip);
  font-weight: 500;
}

/* ---- Auswahl: Reiter, Inhalt, Fußleiste ---- */
.twk-bk__panel {
  grid-area: panel;
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  background: var(--twk-bk-p);
  border-top: 1px solid var(--twk-bk-l);
}
@container twk-bk (min-width: 60em) or ((min-width: 40em) and (orientation: landscape)) {
  .twk-bk__panel {
    min-height: 0;
    border-top: 0;
    border-left: 1px solid var(--twk-bk-l);
  }
}
.twk-bk__kopf {
  flex: none;
}
/* Logo des Shops oben in der Spalte, nur am Rechner. */
.twk-bk__logo {
  display: none;
}
@container twk-bk (min-width: 60em) or ((min-width: 40em) and (orientation: landscape)) {
  .twk-bk__logo {
    display: grid;
    place-items: center;
    padding: var(--twk-bk-a4) var(--twk-bk-rand-x);
    border-bottom: 1px solid var(--twk-bk-l);
  }
  /* Breite Wortmarke; Seitenverhältnis erhalten und in schmalen Desktop-Spalten einpassen. */
  .twk-bk__logo img {
    display: block;
    max-width: 85%;
    height: var(--twk-bk-logo-hoehe, auto);
    width: min(100%, calc(var(--u) * 15));
    max-height: calc(var(--u) * 4);
    object-fit: contain;
  }
}
/* Reiter als Segmentleiste: gleich breit, dicht an dicht, gerundet nur ganz links und ganz
   rechts, in der Farbe des Akzents getönt; zu viele scrollen seitlich. */
.twk-bk__reiter {
  /* Bezugsrahmen für offsetLeft der Reiter (Einrücken des aktiven Reiters). */
  position: relative;
  display: flex;
  gap: 1px;
  margin: calc(var(--u) * 0.6) calc(var(--u) * 0.8) 0;
  overflow-x: auto;
  scrollbar-width: none;
  border-radius: var(--twk-bk-r);
}
.twk-bk .twk-bk__reiter button {
  /* Gleich breit, solange Platz ist; sonst so breit wie der Name, und die Leiste scrollt. */
  flex: 1 0 auto;
  min-width: max-content;
  padding: calc(var(--u) * 0.6) calc(var(--u) * 0.5);
  border: 0;
  border-radius: 0;
  background: color-mix(in srgb, var(--twk-bk-a) 8%, transparent);
  color: color-mix(in srgb, var(--twk-bk-t) 75%, transparent);
  font-size: calc(var(--u) * 0.98);
  white-space: nowrap;
}
.twk-bk .twk-bk__reiter button:first-child {
  border-radius: var(--twk-bk-r) 0 0 var(--twk-bk-r);
}
.twk-bk .twk-bk__reiter button:last-child {
  border-radius: 0 var(--twk-bk-r) var(--twk-bk-r) 0;
}
.twk-bk .twk-bk__reiter button[aria-selected="true"] {
  background: var(--twk-bk-a);
  color: var(--twk-bk-at);
}
/* Offene Angabe in diesem Schritt: ein Punkt im Akzent. */
.twk-bk .twk-bk__reiter button[data-markiert]::after {
  content: "";
  display: inline-block;
  width: calc(var(--u) * 0.4);
  height: calc(var(--u) * 0.4);
  margin-left: calc(var(--u) * 0.35);
  vertical-align: middle;
  border-radius: 50%;
  background: var(--twk-bk-fehler, #9b2c1f);
}
/* Ausgegraut am Ende (Studio: „Produkt“ kommt aus Shopify). */
.twk-bk .twk-bk__reiter button:disabled {
  opacity: 0.45;
}
/* Nur die Reiterleiste, ohne Vollbild (Studio-Maske): Die Hülle trägt dann keine Höhe, keinen
   Hintergrund und keine eigene Rolle. */
.twk-bk.twk-bk--eingebettet {
  container-type: inline-size;
  height: auto;
  overflow: visible;
  background: none;
}
.twk-bk--eingebettet .twk-bk__reiter {
  margin: 0 0 calc(var(--u) * 1.2);
}
.twk-bk .twk-bk__inhalt {
  flex: 1 0 auto;
  padding: var(--twk-bk-a5) var(--twk-bk-rand-x);
  font-size: var(--u);
}
@container twk-bk (min-width: 60em) or ((min-width: 40em) and (orientation: landscape)) {
  .twk-bk .twk-bk__inhalt {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--twk-bk-a5) var(--twk-bk-rand-x);
  }
}

/* Knopfleiste: großer Hauptknopf, Zurück als getöntes Quadrat. Sie ist das einzige Mittel, durch
   die Schritte zu gehen (keine Reiter, Marcel 27.09.2026), und muss darum immer im Bild sein.
   Schmal steht sie unten fest, während die Ansicht darüber scrollt; sie hängt dafür am Raster,
   nicht an der Spalte, sonst klebte sie erst, wenn die Spalte schon ins Bild gescrollt ist. */
.twk-bk .twk-bk__fuss {
  grid-area: fuss;
  container: twk-bk-fuss / inline-size;
  display: flex;
  flex-wrap: wrap;
  gap: var(--twk-bk-a3);
  padding: var(--twk-bk-a3) var(--twk-bk-rand-x)
    calc(var(--twk-bk-a3) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--twk-bk-l);
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: var(--twk-bk-p);
}
@container twk-bk (min-width: 60em) or ((min-width: 40em) and (orientation: landscape)) {
  .twk-bk .twk-bk__fuss {
    border-left: 1px solid var(--twk-bk-l);
  }
}
.twk-bk__meldung {
  flex-basis: 100%;
  font-size: var(--twk-bk-fs-klein);
  color: var(--twk-bk-fehler, var(--twk-pd-fehler, #9b2c1f));
}
.twk-bk .twk-bk__zurueck {
  width: calc(var(--u) * 3.5);
  height: var(--twk-bk-hoehe-knopf);
  padding: 0;
  border: 0;
  display: grid;
  place-items: center;
  border-radius: var(--twk-bk-r);
  background: color-mix(in srgb, var(--twk-bk-a) 8%, var(--twk-bk-p));
  color: var(--twk-bk-a);
}
.twk-bk .twk-bk__zurueck:disabled {
  opacity: 0.35;
}
.twk-bk .twk-bk__zurueck svg {
  width: 45%;
  height: 45%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}
.twk-bk .twk-bk__weiter {
  flex: 1;
  min-height: var(--twk-bk-hoehe-knopf);
  padding: 0 var(--twk-bk-a4);
  border: 0;
  border-radius: var(--twk-bk-r);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 0.55);
  background: var(--twk-bk-a);
  color: var(--twk-bk-at);
  font-size: var(--u);
  font-weight: 500;
  /* Eine Zeile, auch mit Preis; schmal erst kleiner, erst dann umgebrochen (unten). */
  white-space: nowrap;
}
/* Gemessen an der Fußleiste, nicht an der Hülle: Neben der Bühne ist die Spalte schmal, auch wenn
   das Fenster breit ist. Reicht die Breite auch dann nicht, bricht der Preis lieber um, als
   abgeschnitten zu werden. */
/* Erst unter rund 290 px Inhalt (sehr schmale Telefone): Die Spalte neben der Bühne hat 327 px,
   dort bleibt der Knopf bei 16 px wie bei momenterie. */
@container twk-bk-fuss (max-width: 18em) {
  .twk-bk .twk-bk__weiter {
    font-size: var(--twk-bk-fs-chip);
    padding: calc(var(--u) * 0.3) calc(var(--u) * 0.6);
    white-space: normal;
    text-wrap: balance;
    line-height: 1.15;
  }
}
.twk-bk .twk-bk__weiter:disabled {
  opacity: 0.45;
}
.twk-bk .twk-bk__weiter svg {
  width: calc(var(--u) * 1.25);
  height: calc(var(--u) * 1.25);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.twk-bk .twk-bk__nebenzeile {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--twk-bk-a3);
  margin-top: calc(var(--u) * -0.2);
}
.twk-bk .twk-bk__reset {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: calc(var(--u) * 2.2);
  height: calc(var(--u) * 2.2);
  padding: calc(var(--u) * 0.45);
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--twk-bk-grau);
  cursor: pointer;
}
.twk-bk .twk-bk__reset svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.twk-bk .twk-bk__reset:hover,
.twk-bk .twk-bk__reset:focus-visible {
  color: color-mix(in srgb, var(--twk-bk-t) 76%, transparent);
  background: color-mix(in srgb, var(--twk-bk-t) 6%, transparent);
}
/* Hover-Tooltip über dem Icon; die Fußleiste liegt unten, darum nach oben. */
.twk-bk .twk-bk__reset::after {
  content: attr(data-hinweis);
  position: absolute;
  bottom: calc(100% + var(--u) * 0.3);
  right: 0;
  padding: calc(var(--u) * 0.3) calc(var(--u) * 0.6);
  border-radius: calc(var(--twk-bk-r) * 0.6);
  background: var(--twk-bk-t);
  color: var(--twk-bk-p);
  font-size: var(--twk-bk-fs-klein);
  line-height: 1.25;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s;
}
.twk-bk .twk-bk__reset:hover::after,
.twk-bk .twk-bk__reset:focus-visible::after {
  opacity: 1;
}
.twk-bk .twk-bk__resetfrage {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--twk-bk-a2) var(--twk-bk-a3);
  font-size: var(--twk-bk-fs-klein);
}
.twk-bk .twk-bk__resetfrage span {
  flex-basis: 100%;
  text-align: center;
}
.twk-bk .twk-bk__resetja,
.twk-bk .twk-bk__resetnein {
  padding: calc(var(--u) * 0.3) calc(var(--u) * 0.8);
  border: 1px solid color-mix(in srgb, var(--twk-bk-t) 25%, transparent);
  border-radius: var(--twk-bk-r);
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.twk-bk .twk-bk__resetja {
  border-color: var(--twk-bk-fehler, #9b2c1f);
  color: var(--twk-bk-fehler, #9b2c1f);
}
.twk-bk .twk-bk__abbrechen {
  flex: none;
  margin: 0;
  color: var(--twk-bk-grau);
  font-size: var(--twk-bk-fs-klein);
  line-height: 1.25;
  text-align: center;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.twk-bk .twk-bk__abbrechen:hover,
.twk-bk .twk-bk__abbrechen:focus-visible {
  color: color-mix(in srgb, var(--twk-bk-t) 76%, transparent);
}

/* ---- Produkt-Schritt: Gruppen, Auswahlkarten, Zusatzkacheln, Zusammenfassung ---- */
.twk-bk-felder {
  display: grid;
  gap: var(--twk-bk-a5);
}
.twk-bk-gruppe {
  display: grid;
  gap: var(--twk-bk-a2);
  min-width: 0;
  padding: 0;
  border: 0;
}
/* Eine Überschriftenstufe für jeden Abschnitt: klein, mittlere Stärke, keine Versalien. */
.twk-bk-titel {
  margin-bottom: 0;
  padding: 0;
  font-size: var(--u);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
}
/* Als legend steht der Titel außerhalb des Rasters der Gruppe: Abstand dort selbst. */
legend.twk-bk-titel {
  margin-bottom: var(--twk-bk-a2);
}
.twk-bk-hinweis {
  font-size: var(--twk-bk-fs-klein);
  line-height: 1.4;
  color: var(--twk-bk-grau);
}

/* Auswahlkarten: gewählt wie bei momenterie, Rand und ein Hauch Akzent, kein Radiopunkt. */
.twk-bk .twk-bk-wahl__eintrag {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--twk-bk-a3);
  min-height: var(--twk-bk-hoehe-feld);
  padding: var(--twk-bk-a4);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--twk-bk-rand);
  border-radius: var(--twk-bk-r);
  font-size: var(--u);
  font-weight: 500;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background-color 0.15s;
}
.twk-bk .twk-bk-wahl__eintrag + .twk-bk-wahl__eintrag {
  margin-top: var(--twk-bk-a3);
}
.twk-bk .twk-bk-wahl__eintrag:has(input:checked) {
  box-shadow: inset 0 0 0 2px var(--twk-bk-a);
  background: var(--twk-bk-wahlgrund);
}
.twk-bk .twk-bk-wahl__eintrag:has(input:focus-visible),
.twk-bk .twk-bk-zusatz__kachel:has(input:focus-visible) {
  outline: calc(var(--u) * 0.15) solid
    color-mix(in srgb, var(--twk-bk-a) 55%, transparent);
  outline-offset: calc(var(--u) * 0.1);
}
.twk-bk .twk-bk-wahl__eintrag input,
.twk-bk .twk-bk-zusatz__kachel input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.twk-bk-wahl__preis {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

/* Zusatzprodukte als Raster ohne Scrollen (nach momenterie): Bild, Name, Aufpreis. Der Rand liegt als
   Überzug über dem Bild (::after), sonst deckt das Bild ihn oben, links und rechts zu. Gewählt: 2 px Akzent,
   getönter Grund und ein Haken im Bild. Nicht bestellbare Kacheln bleiben stehen, grau und gesperrt. */
.twk-bk-zusatz {
  margin-top: var(--twk-bk-a5);
}
.twk-bk .twk-bk-zusatz__hinweis {
  margin: 0 0 var(--twk-bk-a2);
}
.twk-bk-zusatz__reihe {
  display: grid;
  grid-template-columns: repeat(
    var(--twk-bk-zusatz-spalten, 2),
    minmax(0, 1fr)
  );
  gap: var(--twk-bk-a3);
}
.twk-bk .twk-bk-zusatz__kachel {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 0;
  border-radius: var(--twk-bk-r);
  overflow: hidden;
  background: var(--twk-bk-p);
  cursor: pointer;
  transition: background-color 0.15s;
}
.twk-bk .twk-bk-zusatz__kachel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--twk-bk-rand);
  pointer-events: none;
  transition: box-shadow 0.15s;
}
.twk-bk .twk-bk-zusatz__kachel:has(input:checked) {
  background: var(--twk-bk-wahlgrund);
}
.twk-bk .twk-bk-zusatz__kachel:has(input:checked)::after {
  box-shadow: inset 0 0 0 2px var(--twk-bk-a);
}
.twk-bk .twk-bk-zusatz__kachel:has(input:checked)::before {
  content: "✓";
  position: absolute;
  z-index: 3;
  top: var(--twk-bk-a2);
  right: var(--twk-bk-a2);
  display: grid;
  place-items: center;
  width: calc(var(--u) * 1.5);
  height: calc(var(--u) * 1.5);
  border-radius: 50%;
  background: var(--twk-bk-a);
  color: var(--twk-bk-at);
  font-size: var(--twk-bk-fs-klein);
  line-height: 1;
}
.twk-bk .twk-bk-zusatz__kachel:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.55;
}
.twk-bk-zusatz__bild {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: color-mix(in srgb, var(--twk-bk-t) 6%, transparent);
}
.twk-bk .twk-bk-zusatz__name {
  padding: var(--twk-bk-a3) var(--twk-bk-a3) 0;
  font-size: var(--twk-bk-fs-chip);
  font-weight: 500;
  line-height: 1.25;
}
.twk-bk .twk-bk-zusatz__preis {
  margin-top: auto;
  padding: var(--twk-bk-a1) var(--twk-bk-a3) var(--twk-bk-a3);
  font-size: var(--twk-bk-fs-klein);
  line-height: 1.3;
  color: var(--twk-bk-grau);
  font-variant-numeric: tabular-nums;
}
.twk-bk .twk-bk-zusatz__kachel:has(input:checked) .twk-bk-zusatz__name {
  color: var(--twk-bk-a);
}

/* Größen als Segmentraster: Zellen dicht an dicht, außen gerundet, gewählt 2 px im Akzent. */
.twk-bk-raster {
  display: grid;
  grid-template-columns: repeat(var(--twk-bk-spalten, 3), minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--twk-bk-rand);
  border-radius: var(--twk-bk-r);
  overflow: hidden;
  background: var(--twk-bk-rand);
}
.twk-bk .twk-bk-raster__zelle {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: calc(var(--u) * 0.1);
  min-height: calc(var(--u) * 3.75);
  padding: var(--twk-bk-a2) var(--twk-bk-a1);
  background: var(--twk-bk-p);
  text-align: center;
  cursor: pointer;
  transition: background-color 0.15s;
}
.twk-bk .twk-bk-raster__zelle:has(input:checked) {
  box-shadow: inset 0 0 0 2px var(--twk-bk-a);
  background: var(--twk-bk-wahlgrund);
}
.twk-bk .twk-bk-raster__zelle:has(input:focus-visible) {
  outline: calc(var(--u) * 0.15) solid
    color-mix(in srgb, var(--twk-bk-a) 55%, transparent);
  outline-offset: calc(var(--u) * -0.3);
}
.twk-bk .twk-bk-raster__zelle input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.twk-bk-raster__name {
  font-size: var(--twk-bk-fs-chip);
  font-weight: 500;
}
.twk-bk-raster__preis {
  font-size: var(--twk-bk-fs-klein);
  color: var(--twk-bk-grau);
  font-variant-numeric: tabular-nums;
}
.twk-bk-raster__abzeichen {
  font-size: var(--twk-bk-fs-klein);
  font-weight: 500;
  color: var(--twk-bk-abzeichen, #2f7a4a);
}

/* Was der Shop unter die Auswahl stellt: Lieferung, Info-Kasten, Vertrauenszeile. */
.twk-bk-hinweise {
  display: grid;
  gap: var(--twk-bk-a3);
  margin-top: var(--twk-bk-a5);
}
.twk-bk-hinweise__lieferung {
  display: flex;
  align-items: center;
  gap: var(--twk-bk-a2);
  font-size: var(--twk-bk-fs-chip);
  color: var(--twk-bk-grau);
}
.twk-bk-hinweise__lieferung svg {
  flex: none;
  width: calc(var(--u) * 1.2);
  height: calc(var(--u) * 1.2);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}
.twk-bk-hinweise__kasten {
  padding: var(--twk-bk-a4);
  border-radius: var(--twk-bk-r);
  background: color-mix(in srgb, var(--twk-bk-t) 5%, var(--twk-bk-p));
  font-size: var(--twk-bk-fs-chip);
}
.twk-bk-hinweise__titel {
  font-weight: 500;
  margin-bottom: calc(var(--u) * 0.35);
}
.twk-bk-hinweise__kasten ul {
  margin: 0;
  padding-left: calc(var(--u) * 1.1);
}
.twk-bk-hinweise__vertrauen {
  text-align: center;
  font-size: var(--twk-bk-fs-klein);
  color: var(--twk-bk-grau);
}

/* Zusammenfassung neutral grau, nicht fett, mit Gesamtzeile. */
.twk-bk .twk-bk-summe {
  display: grid;
  gap: var(--twk-bk-a1);
  margin-top: var(--twk-bk-a5);
  padding: var(--twk-bk-a4);
  border-radius: var(--twk-bk-r);
  background: color-mix(in srgb, var(--twk-bk-t) 5%, var(--twk-bk-p));
  font-size: var(--twk-bk-fs-chip);
}
.twk-bk-summe__zeile {
  display: flex;
  justify-content: space-between;
  gap: calc(var(--u) * 1);
}
.twk-bk-summe__zeile--gesamt {
  margin-top: var(--twk-bk-a1);
  padding-top: var(--twk-bk-a2);
  border-top: 1px solid var(--twk-bk-l);
  font-size: var(--u);
  font-weight: 500;
}
.twk-bk-summe__preis {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---- Gemeinsame Bausteine der Auswahlspalte (ADR 017, Nachtrag 2, B1) ----
   Kachelraster, Aufklapper, Chips und Feld mit Zähler. Familien bauen ihre Auswahl daraus, statt
   eigene Größen zu setzen. Maße nach momenterie: 4 Spalten, Kachel mit 6 px Innenrand, Name
   darunter klein und grau, gewählt 2 px im Akzent, Name im Akzent. */
.twk-bk-kacheln {
  display: grid;
  grid-template-columns: repeat(
    var(--twk-bk-kachel-spalten, 4),
    minmax(0, 1fr)
  );
  gap: calc(var(--u) * 0.625);
}
.twk-bk .twk-bk-kachel {
  position: relative;
  display: grid;
  gap: var(--twk-bk-a1);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: center;
  cursor: pointer;
}
.twk-bk-kachel__rahmen {
  display: block;
  padding: calc(var(--u) * 0.375);
  border-radius: var(--twk-bk-r);
  box-shadow: inset 0 0 0 1px var(--twk-bk-rand);
  transition:
    box-shadow 0.15s,
    background-color 0.15s;
}
.twk-bk-kachel__bild {
  display: block;
  width: 100%;
  aspect-ratio: var(--twk-bk-kachel-format, 3 / 4);
  object-fit: cover;
  border-radius: var(--twk-bk-r-klein);
  box-shadow: 0 0 0 1px var(--twk-bk-rand);
  background: #fff;
}
/* Freistehendes Motiv (Symbol, Zeichnung) ohne eigenen Bildrand. */
.twk-bk-kachel__bild--frei {
  box-shadow: none;
  background: none;
}
.twk-bk-kachel__name {
  font-size: var(--twk-bk-fs-klein);
  font-weight: 500;
  line-height: 1.2;
  color: var(--twk-bk-grau);
}
.twk-bk .twk-bk-kachel:has(input:checked) .twk-bk-kachel__rahmen,
.twk-bk .twk-bk-kachel[aria-pressed="true"] .twk-bk-kachel__rahmen {
  box-shadow: inset 0 0 0 2px var(--twk-bk-a);
  background: var(--twk-bk-wahlgrund);
}
.twk-bk .twk-bk-kachel:has(input:checked) .twk-bk-kachel__name,
.twk-bk .twk-bk-kachel[aria-pressed="true"] .twk-bk-kachel__name {
  color: var(--twk-bk-a);
}
.twk-bk .twk-bk-kachel:has(input:focus-visible) .twk-bk-kachel__rahmen {
  outline: calc(var(--u) * 0.15) solid
    color-mix(in srgb, var(--twk-bk-a) 55%, transparent);
  outline-offset: calc(var(--u) * 0.1);
}
.twk-bk .twk-bk-kachel input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

/* Aufklapper: Titel links, Plus/Minus rechts, Linie darüber und darunter. */
.twk-bk-aufklapper {
  border-top: 1px solid var(--twk-bk-l);
  border-bottom: 1px solid var(--twk-bk-l);
}
.twk-bk-aufklapper + .twk-bk-aufklapper {
  border-top: 0;
}
.twk-bk .twk-bk-aufklapper > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--twk-bk-a3);
  padding: var(--twk-bk-a5) 0;
  font-size: var(--u);
  font-weight: 500;
  line-height: 1.25;
  list-style: none;
  cursor: pointer;
}
.twk-bk-aufklapper > summary::-webkit-details-marker {
  display: none;
}
.twk-bk-aufklapper > summary::after {
  content: "+";
  flex: none;
  width: calc(var(--u) * 1.25);
  text-align: center;
  font-size: calc(var(--u) * 1.25);
  font-weight: 300;
  line-height: 1;
  color: var(--twk-bk-grau);
}
.twk-bk-aufklapper[open] > summary::after {
  content: "\2212";
}
.twk-bk-aufklapper[open] > summary {
  padding-bottom: var(--twk-bk-a4);
}
.twk-bk-aufklapper__inhalt {
  padding-bottom: var(--twk-bk-a5);
}
.twk-bk-aufklapper__zusatz {
  font-weight: 400;
  color: var(--twk-bk-grau);
}
.twk-bk .twk-bk-aufklapper > summary:focus-visible {
  outline: calc(var(--u) * 0.15) solid
    color-mix(in srgb, var(--twk-bk-a) 55%, transparent);
  outline-offset: calc(var(--u) * 0.1);
}

/* Chips: Filter oder Nebenaktion, getönt; gewählt gefüllt im Akzent. */
.twk-bk-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--twk-bk-a2);
}
.twk-bk .twk-bk-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--twk-bk-a1);
  padding: var(--twk-bk-a2) var(--twk-bk-a3);
  border: 0;
  border-radius: calc(var(--u) * 1.125);
  background: color-mix(in srgb, var(--twk-bk-a) 8%, var(--twk-bk-p));
  font-size: var(--twk-bk-fs-chip);
  font-weight: 500;
  line-height: 1.2;
}
.twk-bk .twk-bk-chip[aria-pressed="true"] {
  background: var(--twk-bk-a);
  color: var(--twk-bk-at);
}
/* Nebenknopf unter einem Feld („Inspiration für deinen Titel“): getönt, eckiger als ein Chip. */
.twk-bk .twk-bk-nebenknopf {
  justify-self: start;
  min-height: calc(var(--u) * 2.25);
  padding: 0 var(--twk-bk-a3);
  border: 0;
  border-radius: calc(var(--twk-bk-r) * 0.8);
  background: color-mix(in srgb, var(--twk-bk-a) 8%, var(--twk-bk-p));
  color: var(--twk-bk-a);
  font-size: var(--twk-bk-fs-chip);
}

/* Feld mit Zähler rechts im Feld („9/25“) statt einer Zeile darunter. */
.twk-bk-feld {
  position: relative;
}
/* Stärker als die Eingaberegeln der Familien, damit der Zähler Platz behält. Steht das Feld ohne
   Hülle (Studio), gelten die Rückfallwerte in `designer.css`. */
.twk-bk .twk-bk-feld > input {
  padding-right: 4.5em;
}
.twk-bk-feld__zaehler {
  position: absolute;
  top: 50%;
  right: var(--twk-bk-a4, 1em);
  transform: translateY(-50%);
  font-size: var(--twk-bk-fs-klein, 0.75em);
  font-variant-numeric: tabular-nums;
  color: var(--twk-bk-grau, color-mix(in srgb, currentColor 62%, transparent));
  opacity: 0.7;
  pointer-events: none;
}
/* Mehrzeilig: Das Feld trägt Rahmen und Streifen unten (`designer.css`), der Zähler sitzt unten rechts im Streifen. */
.twk-bk-feld:has(> textarea) .twk-bk-feld__zaehler {
  top: auto;
  bottom: 0.5em;
  transform: none;
}
.twk-bk .twk-bk-feld:has(> textarea) {
  border-color: var(--twk-bk-rand);
  border-radius: var(--twk-bk-r);
}
.twk-bk .twk-bk-feld:has(> textarea) > textarea {
  padding: var(--twk-bk-a3) var(--twk-bk-a4);
  border: 0;
  border-radius: var(--twk-bk-r) var(--twk-bk-r) 0 0;
  outline: 0;
}
.twk-bk .twk-bk-feld:has(> textarea):focus-within {
  outline: 0;
  border-color: var(--twk-bk-a);
}
/* Nur für Vorleser (Zählerstand, der sich ändert). */
.twk-bk-unsichtbar {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- Vollbild im Shop ---- */
.twk-bk-overlay {
  /* Eigene Grundschrift statt der des Themes: Im Papierschmiede-Theme sind das 19,2 px, alles
     geriet rund ein Fünftel größer als bei momenterie. Die Prozentangabe der Blöcke
     (`--twk-*-schriftgroesse`) gilt jetzt gegenüber diesen 16 px. */
  font-size: var(--twk-bk-grundschrift, 16px);
  position: fixed;
  inset: 0;
  z-index: var(--twk-bk-ebene, var(--twk-pd-ebene, 2147483000));
  height: 100dvh;
  animation: twk-bk-auf 0.22s ease-out;
}
@keyframes twk-bk-auf {
  from {
    opacity: 0;
    transform: translateY(calc(var(--u, 1em) * 1));
  }
}
@media (prefers-reduced-motion: reduce) {
  .twk-bk-overlay {
    animation: none;
  }
}
/* Solange der Konfigurator offen ist, steht die Seite darunter still. */
html.twk-bk-offen,
html.twk-bk-offen body {
  overflow: hidden !important;
}
/* Deep-Link: Das Seitenmaterial neben dem Designer bleibt verborgen, bis er steht (vollbild.ts, 4 s
   Sicherung). Nur Geschwister des Overlays, der Designer selbst bleibt sichtbar. */
html.twk-bk-direkt body > :not(.twk-bk-overlay) {
  visibility: hidden !important;
}
.twk-bk-overlay__fehler {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 2em;
  background: var(
    --twk-bk-buehne,
    var(--twk-pd-buehne, rgb(var(--color-background, 238, 237, 233)))
  );
  color: var(
    --twk-bk-text,
    var(--twk-pd-text, rgb(var(--color-foreground, 29, 28, 26)))
  );
  text-align: center;
}

/* ---- Popup (popup.tsx): natives <dialog>, klein für Listen, groß für Karten ---- */
.twk-bk-popup {
  box-sizing: border-box;
  width: min(calc(100vw - var(--twk-bk-a4) * 2), calc(var(--u) * 28));
  max-height: calc(100dvh - var(--twk-bk-a4) * 2);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: calc(var(--twk-bk-r) * 1.6);
  background: var(--twk-bk-p);
  color: var(--twk-bk-t);
  box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 3) rgb(0 0 0 / 0.25);
  font-size: var(--u);
  overflow: hidden;
}
.twk-bk-popup[open] {
  display: flex;
  flex-direction: column;
}
.twk-bk-popup[data-groesse="gross"] {
  width: min(calc(100vw - var(--twk-bk-a4) * 2), calc(var(--u) * 52));
  height: min(calc(100dvh - var(--twk-bk-a4) * 2), calc(var(--u) * 46));
}
.twk-bk-popup::backdrop {
  background: rgb(20 20 20 / 0.45);
}
.twk-bk-popup__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--twk-bk-a3);
  padding: var(--twk-bk-a4) var(--twk-bk-a4) var(--twk-bk-a2) var(--twk-bk-a5);
}
.twk-bk .twk-bk-popup__titel,
.twk-bk-popup__titel {
  margin: 0;
  font-size: calc(var(--u) * 1.1);
  font-weight: 500;
  line-height: 1.3;
}
.twk-bk .twk-bk-popup__zu {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(var(--u) * 2.5);
  height: calc(var(--u) * 2.5);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--twk-bk-t) 7%, var(--twk-bk-p));
  color: inherit;
  cursor: pointer;
}
.twk-bk-popup__zu svg {
  width: 45%;
  height: 45%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.twk-bk-popup__inhalt {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: var(--twk-bk-a2) var(--twk-bk-a5) var(--twk-bk-a5);
}
.twk-bk-popup__inhalt > * + * {
  margin-top: var(--twk-bk-a4);
}
.twk-bk-popup__fuss {
  display: flex;
  justify-content: center;
  padding: var(--twk-bk-a4) var(--twk-bk-a5);
  border-top: 1px solid var(--twk-bk-l);
}
.twk-bk-popup__fuss .twk-bk__weiter {
  flex: 0 1 calc(var(--u) * 14);
}

/* ---- Orientierungskarte (karte/orientierungs-karte.tsx): MapLibre mit Ortsnamen im Marker-Dialog ----
   Nur die Grundregeln von maplibre-gl.css, die die Leinwand braucht; Bedienknöpfe zeichnet die Hülle selbst. */
.twk-bk-orientierung {
  position: relative;
  flex: 1 1 auto;
  min-height: calc(var(--u) * 16);
  overflow: hidden;
  border-radius: var(--twk-bk-r);
  background: #edece6;
  touch-action: none;
}
.twk-bk-orientierung__karte,
.twk-bk-orientierung .maplibregl-canvas-container,
.twk-bk-orientierung .maplibregl-canvas {
  position: absolute;
  inset: 0;
}
.twk-bk-orientierung .maplibregl-canvas {
  width: 100%;
  height: 100%;
  outline: none;
  cursor: crosshair;
}
.twk-bk-orientierung
  .maplibregl-canvas-container.maplibregl-interactive:active
  .maplibregl-canvas {
  cursor: grabbing;
}
.twk-bk-orientierung__punkt {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.3));
}
.twk-bk-orientierung__zoom {
  position: absolute;
  right: calc(var(--u) * 0.6);
  bottom: calc(var(--u) * 1.6);
  z-index: 3;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--twk-bk-r-klein);
  background: var(--twk-bk-p);
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.16);
}
.twk-bk .twk-bk-orientierung__zoom button {
  width: calc(var(--u) * 2.4);
  height: calc(var(--u) * 2.2);
  padding: 0;
  border: 0;
  background: none;
  font-size: calc(var(--u) * 1.2);
  cursor: pointer;
}
.twk-bk-orientierung__quelle {
  position: absolute;
  right: calc(var(--u) * 0.5);
  bottom: calc(var(--u) * 0.3);
  z-index: 2;
  margin: 0;
  font-size: calc(var(--u) * 0.65);
  color: #555;
  pointer-events: none;
}
.twk-bk-orientierung__meldung {
  position: absolute;
  inset: auto calc(var(--u) * 0.75) calc(var(--u) * 2) calc(var(--u) * 0.75);
  z-index: 3;
  margin: 0;
  padding: var(--twk-bk-a2) var(--twk-bk-a3);
  border-radius: var(--twk-bk-r-klein);
  background: var(--twk-bk-p);
  font-size: var(--twk-bk-fs-chip);
}

/* Geführter Ablauf, ausdrücklich vom Aufrufer gewählt. Die vollständige Bühne bleibt sichtbar. */
.twk-bk--gefuehrt {
  overflow: hidden;
  /* Nicht per Skript scrollbar (`scrollIntoView`, Fokus): sonst fehlt oben ein Stück, das niemand zurückscrollt. */
  overflow: clip;
  /* Genau über dem sichtbaren Bereich: iOS verschiebt ihn (Tastatur, ein- und ausfahrende Leisten), sonst ragt die
     Bühne oben unter die Statusleiste und die Fußleiste unten unter die Browserleiste. Außerhalb jeder
     Container-Abfrage: Die trifft den Container (.twk-bk) selbst nicht. Am Rechner ist der Versatz 0. */
  position: relative;
  top: var(--twk-bk-sichtoben, 0px);
  height: min(100%, var(--twk-bk-sichthoehe, 100dvh));
  --twk-bk-fs-klein: calc(var(--u) * 0.8125);
  --twk-bk-grau: color-mix(in srgb, var(--twk-bk-t) 76%, var(--twk-bk-p));
}
.twk-bk--gefuehrt > .twk-bk__raster {
  display: grid;
  height: 100%;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "buehne" "panel" "fuss";
}
.twk-bk.twk-bk--gefuehrt > .twk-bk__raster > .twk-bk__buehne {
  position: relative;
  top: auto;
  padding: var(--twk-bk-a2);
}
.twk-bk--gefuehrt .twk-bk__panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
.twk-bk--gefuehrt.twk-bk__kopf {
  min-width: 0;
}
.twk-bk--gefuehrt .twk-bk__inhalt {
  min-height: 0;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.twk-bk--gefuehrt .twk-bk__fuss {
  min-width: 0;
}
.twk-bk--gefuehrt .twk-bk__nebenzeile {
  flex-wrap: wrap;
  gap: var(--twk-bk-a1) var(--twk-bk-a4);
  min-width: 0;
}
.twk-bk--gefuehrt .twk-bk__abbrechen {
  flex: 0 1 auto;
  overflow-wrap: anywhere;
  min-height: var(--twk-bk-hoehe-knopf);
  display: inline-flex;
  align-items: center;
}
.twk-bk--gefuehrt .twk-bk__weiter {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  padding-block: var(--twk-bk-a2);
}
.twk-bk--gefuehrt .twk-bk__weiter svg {
  flex: none;
}
.twk-bk--gefuehrt .twk-bk__fuss {
  position: relative;
  padding-bottom: max(var(--twk-bk-a2), env(safe-area-inset-bottom));
}
.twk-bk__schritte {
  display: flex;
  flex-wrap: wrap;
  gap: var(--twk-bk-a1);
  padding: var(--twk-bk-a2);
  background: var(--twk-bk-p);
  border-bottom: 1px solid var(--twk-bk-rand);
}
.twk-bk .twk-bk__schritte button {
  position: relative;
  isolation: isolate;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--twk-bk-a1);
  min-height: calc(var(--u) * 3.5);
  padding: var(--twk-bk-a2) 0;
  border: 0;
  border-radius: var(--twk-bk-r-klein);
  background: transparent;
  color: var(--twk-bk-grau);
  line-height: 1.15;
  letter-spacing: normal;
}
/* Freie Operator-Reiter: niemals elf winzige Schaltflächen in eine Zeile quetschen. */
.twk-bk__schritte[data-mehrzeilig] {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.twk-bk__schrittname {
  font-size: calc(var(--u) * 0.75);
  font-weight: 550;
  overflow-wrap: anywhere;
}
.twk-bk__schritte svg {
  width: calc(var(--u) * 1.2);
  height: calc(var(--u) * 1.2);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
/* Wenige Schritte nutzen den freien Platz für erkennbare Symbole (ADR 012). */
.twk-bk__schritte[data-wenige] svg {
  width: calc(var(--u) * 1.75);
  height: calc(var(--u) * 1.75);
}
.twk-bk__schritte[data-wenige] .twk-bk__schrittname {
  font-size: calc(var(--u) * 0.875);
}
/* Wie momenterie (Marcel, 04.11.2026): Der aktive Schritt trägt die Akzentfarbe als Fläche, Symbol und Name weiß;
   erledigte (vor dem aktiven) sind hell in der Akzentfarbe hinterlegt, Symbol und Name in der Akzentfarbe. */
.twk-bk .twk-bk__schritte button:hover {
  background: var(--twk-bk-wahlgrund);
}
.twk-bk .twk-bk__schritte button[data-erledigt] {
  color: var(--twk-bk-a);
  background: color-mix(in srgb, var(--twk-bk-a) 12%, var(--twk-bk-p));
}
.twk-bk .twk-bk__schritte button[aria-current],
.twk-bk .twk-bk__schritte button[aria-current]:hover {
  color: var(--twk-bk-at);
  background: var(--twk-bk-a);
}
.twk-bk--gefuehrt .twk-bk__reset {
  width: auto;
  display: flex;
  gap: var(--twk-bk-a2);
  align-items: center;
  min-width: calc(var(--u) * 2.75);
  min-height: calc(var(--u) * 2.75);
}
@container twk-bk (min-width: 60em) or ((min-width: 40em) and (orientation: landscape)) {
  .twk-bk--gefuehrt > .twk-bk__raster {
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas: "buehne panel" "buehne fuss";
  }
  .twk-bk.twk-bk--gefuehrt > .twk-bk__raster > .twk-bk__buehne {
    padding: calc(var(--u) * 2.5);
  }
}

.twk-bk--gefuehrt .twk-bk__reset svg {
  width: calc(var(--u) * 1.25);
  height: calc(var(--u) * 1.25);
  flex: none;
}

@container twk-bk (max-height: 40em) and (max-width: 40em) {
  .twk-bk__schritte button {
    min-height: calc(var(--u) * 2.75);
  }
  .twk-bk .twk-bk__schritte button {
    gap: 0;
    padding-block: var(--twk-bk-a1);
  }
}

.twk-bk-titel--aktion {
  width: 100%;
}
.twk-bk-titel--aktion > span {
  display: inline-block;
  padding-block: var(--twk-bk-a2);
}

/* Theme-Versalien und Buchstabenabstände dürfen Bedienelemente nicht verbreitern. */
.twk-bk.twk-bk--gefuehrt button {
  letter-spacing: normal;
  text-transform: none;
}
@container twk-bk (width < 60em) and ((width < 40em) or (orientation: portrait)) {
  .twk-bk--gefuehrt .twk-bk__kopf,
  .twk-bk.twk-bk--gefuehrt .twk-bk__fuss {
    font-size: 0.875em;
  }
  .twk-bk--gefuehrt .twk-bk__schritte button {
    min-height: calc(var(--u) * 3.2);
  }
}
.twk-bk .twk-bk__mehr {
  flex: none;
  min-width: var(--twk-bk-hoehe-knopf);
  min-height: var(--twk-bk-hoehe-knopf);
  border: 0;
  border-radius: var(--twk-bk-r);
  background: var(--twk-bk-wahlgrund);
  color: var(--twk-bk-a);
}
.twk-bk-popup .twk-bk__nebenzeile {
  flex-direction: column;
  align-items: stretch;
}
.twk-bk-popup .twk-bk__abbrechen,
.twk-bk-popup .twk-bk__reset {
  justify-content: center;
}

/* Mobil: Bühne oben voll, beim Scrollen kompakt, Wischen nach unten holt sie voll zurück, beim Tippen weg. */
@container twk-bk (width < 60em) and ((width < 40em) or (orientation: portrait)) {
  .twk-bk--gefuehrt > .twk-bk__raster {
    --twk-bk-gestapelt: 1;
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: var(--twk-bk-fusshoehe, calc(var(--u) * 9));
    scrollbar-width: thin;
  }
  .twk-bk.twk-bk--gefuehrt > .twk-bk__raster > .twk-bk__buehne {
    position: sticky;
    /* Lage aus huelle.tsx: voll/kompakt −scrollweg, offen 0, beim Tippen ganz weg. */
    top: var(--twk-bk-buehne-oben, calc(-1 * var(--twk-bk-scrollweg, 0px)));
    z-index: 10;
  }
  .twk-bk--gefuehrt > .twk-bk__raster[data-vorschau-gleitet] > .twk-bk__buehne,
  .twk-bk--gefuehrt > .twk-bk__raster[data-vorschau-gleitet] .twk-bk__kopf {
    transition: top 0.28s ease;
  }
  /* Beim Tippen geht die Fußleiste aus dem Weg, sonst steht sie wie ein Teil der Tastatur mitten im Bild; beim
     Runterscrollen gleitet sie nach unten weg und kommt beim Hochscrollen und am Ende wieder. */
  .twk-bk.twk-bk--gefuehrt[data-tastatur] .twk-bk__fuss {
    display: none;
  }
  .twk-bk.twk-bk--gefuehrt .twk-bk__fuss {
    transition: transform 0.22s ease;
  }
  .twk-bk.twk-bk--gefuehrt[data-fuss-weg] .twk-bk__fuss {
    transform: translateY(100%);
  }
  /* Beim Tippen ist die Bühne aus dem Fluss (Maße bleiben, nichts misst neu); huelle.tsx gleicht den Scrollstand aus. */
  .twk-bk.twk-bk--gefuehrt[data-tastatur] > .twk-bk__raster > .twk-bk__buehne {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    visibility: hidden;
  }
  /* Platz unten, damit auch das letzte Feld eines kurzen Schritts bis unter die Schrittleiste rücken kann. */
  .twk-bk--gefuehrt[data-tastatur] > .twk-bk__raster {
    padding-bottom: var(--twk-bk-sichthoehe, 50dvh);
  }
  .twk-bk--gefuehrt .twk-bk__panel {
    display: block;
    overflow: visible;
    min-height: 0;
  }
  .twk-bk--gefuehrt .twk-bk__kopf {
    position: sticky;
    top: var(--twk-bk-kopf-oben, var(--twk-bk-vorschau-klein, 0px));
    z-index: 11;
    background: var(--twk-bk-p);
  }
  .twk-bk--gefuehrt .twk-bk__inhalt {
    overflow: visible;
    scrollbar-gutter: auto;
  }
  /* An der Hülle, nicht am Fenster: Die Hülle liegt über dem sichtbaren Bereich, das Fenster reicht auf dem iPhone
     unter die Browserleiste. Der Raster ist nicht positioniert, die Leiste scrollt also nicht mit. */
  .twk-bk.twk-bk--gefuehrt .twk-bk__fuss {
    position: absolute;
    inset: auto 0 0;
    z-index: 12;
  }
}

.twk-bk-popup[data-inhalt="flaeche"] > .twk-bk-popup__inhalt {
  overflow: hidden;
  display: flex;
}

.twk-bk-orientierung__maske {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Schritt mit offener Pflichtangabe (verlassen oder übersprungen): kleines „!“ oben rechts, sperrt nichts. */
.twk-bk__schritt-offen {
  position: absolute;
  top: calc(var(--u) * 0.3);
  right: calc(var(--u) * 0.45);
  display: grid;
  place-items: center;
  width: calc(var(--u) * 1.05);
  height: calc(var(--u) * 1.05);
  border-radius: 50%;
  background: var(--twk-bk-fehler, #c0392b);
  color: #fff;
  font-size: calc(var(--u) * 0.72);
  font-weight: 700;
  line-height: 1;
}