/*
 * Poster-Designer: Formular und Zeichenfläche.
 *
 * Dieselbe Datei für Studio und Shop, ausgeliefert über /extension/designer.css.
 * Regeln und Begründungen: docs/designer-css.md. Kurz:
 *
 *   1. Kein rem — Themes setzen html auf 62,5 %. Längen über --u (= 1em an der Wurzel).
 *   2. Farben erben (currentColor, color-mix), Gegenfarbe über --twk-grund.
 *   3. @container statt @media: Die Spaltenbreite bestimmt das Theme, nicht das Fenster.
 *   4. Alles unter dem Präfix twk-.
 *   5. Überschreibbare Werte mit dem Standard als Rückfall, nie als eigene Regel.
 *
 * Die Operator-Werkzeuge (Zoomleiste, Ebenenliste, Mockups) sind bewusst nicht hier:
 * Der Shop zeigt sie nie, sie bleiben im Studio-Stylesheet.
 */

.twk-designer {
  --u: 1em;

  /* Brücke ins Theme wie im Konfigurator; fehlt sie, greifen die Rückfallwerte. */
  --twk-grund: rgb(var(--color-background, 255, 255, 255));
  --twk-akzent: rgb(var(--color-button, var(--color-foreground, 26, 21, 17)));
  --twk-linie: color-mix(in srgb, currentColor 18%, transparent);
  --twk-flaeche: color-mix(in srgb, currentColor 5%, transparent);
  --twk-radius: calc(var(--u) * 0.5);

  /* Nur Container, nichts weiter: Eine Container-Anfrage kann ihren eigenen Container
     nicht gestalten. Das Raster liegt deshalb eine Ebene tiefer, wie im Konfigurator. */
  container-type: inline-size;
  container-name: twk-designer;
}

.twk-designer__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--u) * 1.5);
  align-items: start;
}

@container twk-designer (min-width: 46em) {
  .twk-designer__raster {
    grid-template-columns: minmax(18em, 24em) minmax(0, 1fr);
  }
}

.twk-designer__spalte {
  display: grid;
  gap: var(--u);
  min-width: 0;
  align-content: start;
}

.twk-formular {
  display: grid;
  gap: calc(var(--u) * 0.75);
  padding: calc(var(--u) * 1.25);
  border: 1px solid var(--twk-linie);
  border-radius: calc(var(--twk-radius) * 1.5);
  background: var(--twk-grund);
}

.twk-formular__titel {
  margin: 0;
  font-size: inherit;
  font-weight: 600;
}

.twk-formular__felder {
  display: grid;
  gap: var(--u);
}

/* --- Ein Feld ------------------------------------------------------------------- */

.twk-feld {
  display: grid;
  gap: calc(var(--u) * 0.4);
}

.twk-feld__name {
  font-size: calc(var(--u) * 0.875);
  font-weight: 500;
}

.twk-feld__wert {
  font-weight: 400;
  opacity: 0.7;
}

.twk-feld__hinweis {
  font-size: calc(var(--u) * 0.75);
  opacity: 0.7;
}

/* Auflösung des Kundenfotos als Ampel; Farben überschreibbar, Rückfall wie beim Fehlertext. */
.twk-dpi {
  font-size: calc(var(--u) * 0.75);
  font-weight: 600;
}
.twk-dpi::before {
  content: "\25CF";
  margin-right: 0.4em;
}
.twk-dpi[data-ampel="gruen"] {
  color: var(--twk-dpi-gruen, #2f7d32);
}
.twk-dpi[data-ampel="gelb"] {
  color: var(--twk-dpi-gelb, #a16207);
}
.twk-dpi[data-ampel="rot"] {
  color: var(--twk-dpi-rot, rgb(var(--color-error, 185, 28, 28)));
}

.twk-feld__fehler {
  font-size: calc(var(--u) * 0.75);
  color: rgb(var(--color-error, 185, 28, 28));
}

.twk-eingabe {
  width: 100%;
  padding: calc(var(--u) * 0.45) calc(var(--u) * 0.6);
  border: 1px solid var(--twk-linie);
  border-radius: var(--twk-radius);
  background: var(--twk-grund);
  color: inherit;
  font: inherit;
}

.twk-eingabe:focus-visible {
  outline: 2px solid var(--twk-akzent);
  outline-offset: 1px;
}

.twk-eingabe[aria-invalid="true"] {
  border-color: rgb(var(--color-error, 185, 28, 28));
}

/*
 * Textfeld mit Kursiv (`kursiv-feld.tsx`): ein Eingabefeld, das mehrere Zeilen und Absätze zeigt,
 * darüber zwei Knöpfe. Der Text bricht um wie in der Vorschau, nicht in einer Zeile.
 */
.twk-kursiv__werkzeuge {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 0.4);
}

.twk-kursiv__knopf {
  padding: calc(var(--u) * 0.25) calc(var(--u) * 0.7);
  border: 1px solid var(--twk-linie);
  border-radius: var(--twk-radius);
  background: var(--twk-grund);
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.twk-kursiv__knopf[aria-pressed="true"] {
  border-color: var(--twk-akzent);
  box-shadow: 0 0 0 1px var(--twk-akzent);
}

.twk-kursiv__knopf:disabled {
  opacity: 0.5;
  cursor: default;
}

.twk-kursiv__knopf:focus-visible {
  outline: 2px solid var(--twk-akzent);
  outline-offset: 1px;
}

.twk-kursiv__feld {
  min-height: calc(var(--u) * 7);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.4;
}

/*
 * Geschlossen ist ein Kachelfeld eine Zeile wie jedes Eingabefeld: der gewählte Wert als
 * Text, ein Pfeil rechts. Keine Miniatur — die Vorschau daneben zeigt dasselbe größer,
 * und zweimal dasselbe Bild macht das Formular unförmig (Marcel, 23.09.2026).
 */
.twk-ausloeser {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 0.5);
  text-align: start;
  cursor: pointer;
}

.twk-ausloeser__leer {
  opacity: 0.6;
}

.twk-ausloeser__pfeil {
  flex: none;
  width: 0;
  height: 0;
  border-inline: calc(var(--u) * 0.28) solid transparent;
  border-top: calc(var(--u) * 0.3) solid currentColor;
  opacity: 0.6;
}

.twk-ausloeser[aria-expanded="true"] {
  border-color: var(--twk-akzent);
}

.twk-ausloeser[aria-expanded="true"] .twk-ausloeser__pfeil {
  transform: rotate(180deg);
}

/* --- Kachel --------------------------------------------------------------------- */

/*
 * Eine Kachel ist immer ein Quadrat mit Namen darunter — als Auslöser wie als Option.
 * Das Maß ist überschreibbar: Ein Theme setzt --twk-kachel-kante an irgendeinem
 * Vorfahren und gewinnt, ohne Spezifitätskampf.
 */
.twk-kachel {
  position: relative;
  flex: none;
  display: grid;
  justify-items: center;
  gap: calc(var(--u) * 0.3);
  padding: calc(var(--u) * 0.25);
  border: 1px solid var(--twk-linie);
  border-radius: var(--twk-radius);
  background: var(--twk-grund);
  color: inherit;
  font: inherit;
  cursor: pointer;
  scroll-snap-align: start;
}

.twk-kachel:hover {
  border-color: var(--twk-akzent);
}

.twk-kachel:has(input:checked),
.twk-kachel[aria-expanded="true"] {
  border-color: var(--twk-akzent);
  box-shadow: 0 0 0 1px var(--twk-akzent);
}

.twk-kachel:has(input:focus-visible),
.twk-kachel:focus-visible {
  outline: 2px solid var(--twk-akzent);
  outline-offset: 2px;
}

.twk-kachel__bild,
.twk-kachel__farbe {
  width: var(--twk-kachel-kante, calc(var(--u) * 5));
  height: var(--twk-kachel-kante, calc(var(--u) * 5));
  border-radius: calc(var(--twk-radius) * 0.6);
  overflow: hidden;
}

.twk-kachel__bild {
  background: var(--twk-flaeche);
}

.twk-kachel__farbe {
  border: 1px solid var(--twk-linie);
}

/* Form ohne Farbe: Das Feld daneben wählt die Farbe, hier zählt nur der Schnitt. */
.twk-kachel__bild--monochrom {
  filter: grayscale(1);
}

/*
 * Zweizeilig und breiter als das Quadrat: Seit die Frisur ihren Klartext trägt
 * („1 · Lange Wellen, offen“) reichte eine Zeile in Kachelbreite für „1 · Lang…“ — das
 * ist weniger Auskunft als die nackte Ziffer. Die Kachel selbst bleibt quadratisch.
 */
.twk-kachel__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  max-width: calc(var(--twk-kachel-kante, calc(var(--u) * 5)) * 1.6);
  overflow: hidden;
  font-size: calc(var(--u) * 0.75);
  line-height: 1.2;
  text-align: center;
}

.twk-kachel:has(input:checked) .twk-kachel__name {
  color: var(--twk-akzent);
  font-weight: 600;
}

/* --- Direkt sichtbare Bild- und Farbauswahl --------------------------------------- */

/* Auch in schmalen Shop-Spalten umbrechen alle Optionen ins Raster. Kein Aufklappen
 * und keine horizontal oder in einem zweiten Scrollbereich versteckten Optionen. */
.twk-auswahl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--twk-kachel-kante, calc(var(--u) * 5)) + var(--u))), 1fr));
  gap: calc(var(--u) * 0.5);
  margin-top: calc(var(--u) * 0.4);
  padding: calc(var(--u) * 0.25);
}

/* Ein Haken ergänzt den Rahmen: Auswahl bleibt auch ohne Farberkennung eindeutig. */
.twk-auswahl .twk-kachel__haken {
  display: none;
  position: absolute;
  top: calc(var(--u) * 0.2);
  right: calc(var(--u) * 0.2);
  padding: 0 calc(var(--u) * 0.2);
  border-radius: 50%;
  background: var(--twk-akzent);
  color: var(--twk-grund);
  font-weight: 700;
}

.twk-auswahl .twk-kachel:has(input:checked) .twk-kachel__haken {
  display: block;
}

.twk-auswahl[aria-invalid="true"] .twk-kachel {
  border-color: rgb(var(--color-error, 185, 28, 28));
}

/* Radios tragen die Auswahl; sichtbar ist die Kachel. */
.twk-nur-lesbar {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------- Ortseingabe

   Das Ortsfeld einer Karte: Suche mit Vorschlagsliste, darunter die Regler für
   Ausschnitt und Zeigergröße. Der Ausschnitt selbst wird am Vorschaubild gezogen;
   im Formular steht nur, was sich nicht ziehen lässt. */

.twk-ort {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.6);
}
.twk-ort__suche {
  position: relative;
}
.twk-ort__vorschlaege {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  margin-top: calc(var(--u) * 0.15);
  padding: calc(var(--u) * 0.2);
  list-style: none;
  border: 1px solid var(--twk-linie);
  border-radius: var(--twk-radius);
  background: var(--twk-grund);
  box-shadow: 0 6px 20px color-mix(in srgb, #000 12%, transparent);
  max-height: calc(var(--u) * 15);
  overflow-y: auto;
}
/* Im Formular ohne Schweben: Darunter steht der gedruckte Ortsname, der nicht verdeckt werden darf. */
.twk-ort__vorschlaege--flach {
  position: static;
  margin-top: 0;
  max-height: none;
  box-shadow: none;
}
.twk-ort__vorschlag {
  display: block;
  width: 100%;
  padding: calc(var(--u) * 0.45) calc(var(--u) * 0.55);
  border: 0;
  border-radius: calc(var(--twk-radius) * 0.7);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  line-height: 1.3;
  cursor: pointer;
}
.twk-ort__vorschlag:hover,
.twk-ort__vorschlag:focus-visible {
  background: var(--twk-flaeche);
}
/* Der Treffer fett, die Anschrift dahinter leise — wie man es von Adressfeldern kennt. */
.twk-ort__name {
  font-weight: 600;
}
.twk-ort__zusatz {
  color: color-mix(in srgb, currentColor 65%, transparent);
}

.twk-regler {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.5);
}
.twk-regler__name {
  flex: none;
  width: calc(var(--u) * 7);
  font-size: calc(var(--u) * 0.9);
}
.twk-regler__bahn {
  flex: 1;
  min-width: 0;
  accent-color: var(--twk-akzent);
}
.twk-regler__wert {
  flex: none;
  width: calc(var(--u) * 3);
  /* „100 %“ bleibt eine Zeile, auch wenn ein Theme Buchstaben sperrt. */
  white-space: nowrap;
  font-size: calc(var(--u) * 0.78);
  text-align: right;
  color: color-mix(in srgb, currentColor 65%, transparent);
}
.twk-knopf {
  flex: none;
  min-width: calc(var(--u) * 2);
  padding: calc(var(--u) * 0.25) calc(var(--u) * 0.5);
  border: 1px solid var(--twk-linie);
  border-radius: calc(var(--twk-radius) * 0.7);
  background: var(--twk-grund);
  color: inherit;
  font: inherit;
  line-height: 1;
  cursor: pointer;
}
.twk-knopf:hover {
  background: var(--twk-flaeche);
}

/* Kartenknöpfe an der oberen rechten Ecke des Blatts: vergrößern, verkleinern, Standort
   in die Mitte. Außerhalb des Blatts, damit sie nichts vom Motiv verdecken; auf schmalen
   Geräten rutschen sie darüber, weil daneben kein Platz mehr ist. */
/* Bezugspunkt der Ecke. Aus dieser Datei, nicht aus einer Utility: Der Shop-Block hat
   keine, und ohne Bezugspunkt landen die Knöpfe am Fensterrand. */
.twk-blatt {
  position: relative;
  /* Wer die Karte über den Titel hinauszieht, markierte sonst dessen Text; Chrome zeigt eine
     inaktive Auswahl als graues Rechteck (25.09.2026). Im Blatt gibt es nichts zu markieren. */
  -webkit-user-select: none;
  user-select: none;
}
/* Bildkacheln der Karte blenden ein, sobald sie geladen sind (karten.ts setzt sie erst nach
   dem Dekodieren ein); darunter liegt bis dahin der vorige Kachelsatz. Keine Bildschirmfrage,
   sondern ein Bewegungswunsch: darum hier `@media`, nicht `@container`. */
.twk-kachel {
  animation: twk-kachel-ein 0.15s ease-out;
}
@keyframes twk-kachel-ein {
  from {
    opacity: 0;
  }
}
/* Nur für Screenreader: Beschriftet eine Gruppe, deren Regler sich selbst benennt. */
.twk-nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Kartenkacheln ruhiger: Unter der ersten Karte liegt Weiß, sie blenden von Weiß zum Bild. Die
   Grundfarbe des Stils kommt weich dazu, sobald der Satz komplett ist (`komplett`). */
image.twk-kachel {
  animation-duration: 0.45s;
}
.twk-kartengrund {
  transition: fill 0.4s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .twk-kachel {
    animation: none;
  }
  .twk-kartengrund {
    transition: none;
  }
}
.twk-kartenecke {
  position: absolute;
  top: 0;
  left: 100%;
  margin-left: calc(var(--u) * 0.4);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.3);
}
/* Schmale Spalte: Neben dem Blatt ist kein Platz, die Knöpfe rutschen hinein. Die Spalte
   fragt, nicht das Fenster (docs/designer-css.md). */
@container twk-designer (max-width: 40em) {
  .twk-kartenecke {
    left: auto;
    right: calc(var(--u) * 0.4);
    top: calc(var(--u) * 0.4);
    margin-left: 0;
  }
}

/* Spardose: Materialansicht und maßhaltige Fertigungsansicht aus demselben Satz. */
.twk-spardose__ansichten {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 0.375);
}
.twk-spardose__ansichten button {
  font: inherit;
  font-size: calc(var(--u) * 0.8125);
  border: 1px solid var(--twk-linie);
  border-radius: var(--twk-radius);
  padding: calc(var(--u) * 0.5) calc(var(--u) * 0.75);
  color: inherit;
  background: transparent;
  cursor: pointer;
}
.twk-spardose__ansichten button[aria-pressed="true"] {
  background: var(--twk-akzent);
  color: var(--twk-grund);
  border-color: transparent;
}
.twk-spardose__ansichten button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
.twk-spardose__ansichten button:disabled { opacity: 0.45; cursor: default; }
.twk-spardose__vorschau { margin: 0; }
.twk-spardose__vorschau img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--twk-radius);
}
.twk-spardose__vorschau figcaption {
  font-size: calc(var(--u) * 0.75);
  line-height: 1.5;
  opacity: 0.7;
  margin-top: calc(var(--u) * 0.5);
}

.twk-spardose input { box-sizing: border-box; }

.twk-spardose__stile { margin: 0 0 calc(var(--u) * 1.25); padding: 0; border: 0; min-width: 0; }
.twk-spardose__stile legend { font-weight: 600; margin-bottom: calc(var(--u) * .75); }
.twk-spardose__kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * .5); }
.twk-spardose__kachel { position: relative; display: grid; gap: calc(var(--u) * .4); text-align: center; cursor: pointer; font-size: calc(var(--u) * .75); }
.twk-spardose__kachel input, .twk-spardose__toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.twk-spardose__kachelbild { display: block; overflow: hidden; border: 2px solid transparent; border-radius: var(--twk-radius, 8px); }
.twk-spardose__kachel img { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.twk-spardose__kachel input:checked + .twk-spardose__kachelbild { border-color: currentColor; }
.twk-spardose__kachel input:focus-visible + .twk-spardose__kachelbild { outline: 2px solid currentColor; outline-offset: 3px; }
.twk-spardose__toggle { position: relative; display: flex; align-items: center; gap: calc(var(--u) * .625); cursor: pointer; margin-block: calc(var(--u) * 1); }
.twk-spardose__schalter { width: calc(var(--u) * 2.5); height: calc(var(--u) * 1.5); border-radius: calc(var(--u) * 2); background: color-mix(in srgb, currentColor 22%, transparent); padding: calc(var(--u) * .2); box-sizing: border-box; flex-shrink: 0; }
.twk-spardose__schalter::after { content: ""; display: block; width: calc(var(--u) * 1.1); height: calc(var(--u) * 1.1); border-radius: 50%; background: var(--twk-grund, white); }
.twk-spardose__toggle input:checked + .twk-spardose__schalter { background: var(--twk-akzent, currentColor); }
.twk-spardose__toggle input:checked + .twk-spardose__schalter::after { transform: translateX(calc(var(--u) * 1)); }
.twk-spardose__toggle input:focus-visible + .twk-spardose__schalter { outline: 2px solid currentColor; outline-offset: 3px; }
.twk-spardose__initiale { margin-block: calc(var(--u) * .75); font-size: calc(var(--u) * .875); }

/* Die Operator-Zeichenfläche wächst nicht mit breiten Browserfenstern mit. */
.twk-spardose--operator .twk-spardose__vorschau img {
  width: 100%;
  height: min(640px, 65dvh);
  object-fit: contain;
}