/*
 * Designer-Baukasten, Ebene 2 Familie Poster (ADR 012): die Bühne mit dem Blatt, die
 * Kartenknöpfe daneben, das Formular aus designer.css im Kleid des Shops und der Knopf im
 * Theme-Block. Vollbild, Reiter, Fußleiste und Produkt-Bausteine sind Ebene 1 und kommen aus
 * huelle.css (@import unten; dort steht nichts Posterspezifisches, Änderungen dort treffen jeden
 * Designer). Geladen **nach** designer.css. Regeln: docs/designer-css.md — kein rem, Längen in
 * --u, Klassen unter twk-pd, Container-Anfragen an den Container der Hülle (twk-bk).
 *
 * Der Shop-Block setzt die Variablen aus seinen Einstellungen auf das Vollbild; eigenes CSS
 * aus dem Feld „Eigenes CSS“ kommt danach und gewinnt bei gleicher Spezifität.
 */
@import url("../baukasten/huelle.css");

.twk-pd {
  /* Platz für die Kartenknöpfe neben dem Blatt, links wie rechts: Das Blatt bleibt mittig. */
  --twk-pd-knopfspalte: var(--twk-pd-kartenknoepfe, calc(var(--u) * 2.6));
}

/* ---- Bühne: schmal so breit wie die Spalte, breit so groß, wie Breite und Höhe es erlauben ---- */
.twk-pd__flaeche {
  container-type: inline-size;
  width: 100%;
  display: grid;
  place-items: center;
}
.twk-pd__blattrahmen {
  position: relative;
  /* Nie höher als der größte Teil des Fensters: Darunter soll der Anfang der Auswahl sichtbar
     bleiben, und zwar über der stehenden Fußleiste (etwa 14em für Fußleiste und erstes Feld;
     mit 78svh sah ein Tablet hochkant vom Formular nur die Überschrift). */
  --twk-pd-blatthoehe-schmal: var(
    --twk-pd-blatthoehe,
    min(72svh, calc(100svh - var(--u) * 14))
  );
  width: min(
    100cqw,
    calc(var(--twk-pd-blatthoehe-schmal) * var(--twk-pd-seiten, 0.707))
  );
}
.twk-pd__blattrahmen:has(> .twk-pd__werkzeuge) {
  width: min(
    calc(100cqw - 2 * var(--twk-pd-knopfspalte)),
    calc(var(--twk-pd-blatthoehe-schmal) * var(--twk-pd-seiten, 0.707))
  );
}
@container twk-bk (min-width: 60em) or ((min-width: 40em) and (orientation: landscape)) {
  .twk-pd__flaeche {
    /* Größe statt nur Breite: Das Blatt rechnet mit cqw und cqh. */
    container-type: size;
    height: 100%;
  }
  .twk-pd__blattrahmen {
    width: min(100cqw, calc(100cqh * var(--twk-pd-seiten, 0.707)));
  }
  .twk-pd__blattrahmen:has(> .twk-pd__werkzeuge) {
    width: min(
      calc(100cqw - 2 * var(--twk-pd-knopfspalte)),
      calc(100cqh * var(--twk-pd-seiten, 0.707))
    );
  }
}
.twk-pd__blatt {
  width: 100%;
  background: #ffffff;
  box-shadow: var(
    --twk-pd-schatten,
    0 calc(var(--u) * 0.3) calc(var(--u) * 1.4) rgba(0, 0, 0, 0.18)
  );
  touch-action: none;
}
.twk-pd__blatt > svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* Beim ersten Zeigen schwebt die Karte aus der Übergröße auf ihre Zielgröße: beim Öffnen des
   Designers, nach dem Neuladen und wenn der erste Ort gesetzt wird. Danach bleibt die Gruppe
   stehen, Zoomen und Ziehen laufen ohne diese Bewegung. */
.twk-pd .twk-kartenlagen {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: twk-pd-karte-auf 0.9s cubic-bezier(0.2, 0.75, 0.25, 1) both;
}
@keyframes twk-pd-karte-auf {
  from {
    transform: scale(var(--twk-pd-karte-start, 1.35));
  }
}
@media (prefers-reduced-motion: reduce) {
  .twk-pd .twk-kartenlagen {
    animation: none;
  }
}
/* Über der Karte zeigt der Zeiger, dass sie sich ziehen lässt. */
.twk-pd__blatt [data-karte] {
  cursor: grab;
}
.twk-pd__blatt [data-standortzeiger] {
  cursor: move;
}
/* Geldschein-Simulation: ganzseitig mit Anschnitt, darum über jede Kante hinaus; nie im Druck. */
.twk-pd__blatt .twk-pd__simulation {
  position: absolute;
  max-width: none;
  pointer-events: none;
}
/* Foto-Platzhalter der Kartenvorlagen mit Foto (Nachtrag 1, A6): blass, nur in der Vorschau, nie im Druck. */
.twk-pd__blatt .twk-pd__foto-platzhalter {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3em;
  color: color-mix(in srgb, #000 45%, transparent);
  background: color-mix(in srgb, #000 7%, #fff);
  border: 1px dashed color-mix(in srgb, #000 25%, transparent);
  font: 500 clamp(9px, 1.6cqi, 14px) / 1.2 system-ui, sans-serif;
  pointer-events: none;
}
.twk-pd__foto-platzhalter svg {
  width: 28%;
  max-width: 3em;
  height: auto;
}
/* Textbilder, die noch laden, stehen blass: Der Kunde sieht, dass sein Text gleich kommt. */
.twk-pd__flaeche[data-laedt] [data-textbild] image {
  opacity: 0.55;
  transition: opacity 0.2s;
}
/* Die Kartenknöpfe (Werkzeugleiste der Hülle) stehen oben rechts neben dem Blatt, nicht darauf:
   Der Rahmen hält ihnen links und rechts dieselbe Spalte frei (--twk-pd-knopfspalte), die Seite
   wandert nicht. */
.twk-pd .twk-pd__werkzeuge {
  position: absolute;
  top: 0;
  left: 100%;
  margin-left: calc(var(--u) * 0.5);
}

/* ---- Formular aus designer.css im Kleid des Shops (Feinschliff nach momenterie) ----
   Das Formular trägt .twk-designer (Variablen und Kachelraster aus designer.css); seine
   Gegenfarbe und sein Akzent sind hier die der Hülle. */
.twk-pd .twk-bk__inhalt {
  --twk-grund: var(--twk-bk-p);
  --twk-akzent: var(--twk-bk-a);
  --twk-radius: var(--twk-bk-r);
}
.twk-pd .twk-formular__felder {
  gap: var(--twk-bk-a5);
}
/* Werte aus dem Gestaltungssystem der Hülle (ADR 017, Nachtrag 2): eine Überschriftenstufe,
   Hinweise klein und grau, Felder 48 px hoch. */
.twk-pd .twk-feld__name {
  font-size: var(--u);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: var(--twk-bk-a2);
}
.twk-pd legend.twk-feld__name {
  padding: 0;
}
.twk-pd .twk-feld__hinweis {
  margin-top: var(--twk-bk-a2);
  font-size: var(--twk-bk-fs-klein);
  line-height: 1.4;
  color: var(--twk-bk-grau);
  opacity: 1;
}
/* Eingaben und Auswahllisten so hoch wie die Karten. */
.twk-pd .twk-eingabe,
.twk-pd select.twk-eingabe {
  min-height: var(--twk-bk-hoehe-feld);
  padding: var(--twk-bk-a3) var(--twk-bk-a4);
  border: 1px solid var(--twk-bk-rand);
  border-radius: var(--twk-bk-r);
  font-size: var(--u);
}
/* Vorlagentext im leeren Feld: so grau wie auf der Bühne, geerbt statt fest (Themes färben Text um). */
.twk-pd .twk-eingabe::placeholder {
  color: color-mix(in srgb, currentColor 45%, transparent);
  opacity: 1;
}
.twk-pd .twk-eingabe:focus-visible {
  outline: 0;
  border-color: var(--twk-bk-a);
  box-shadow: inset 0 0 0 1px var(--twk-bk-a);
}

/* „Ohne Rahmen“: ein leeres Blatt als Andeutung, kein Foto. */
.twk-pd-ohne-rahmen {
  background:
    linear-gradient(#ffffff, #ffffff) center / 58% 72% no-repeat,
    color-mix(in srgb, var(--twk-bk-t) 6%, transparent);
}

/* ---- Knopf im Theme-Block ---- */
.twk-pd-block {
  --u: 1em;
  container-type: inline-size;
}
.twk-pd-block .twk-pd-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 0.6);
  width: var(--twk-pd-cta-breite, 100%);
  min-height: calc(var(--u) * 3.2);
  padding: 0 calc(var(--u) * 1.4);
  border: 0;
  border-radius: var(--twk-pd-radius, calc(var(--u) * 0.625));
  background: var(--twk-pd-akzent, rgb(var(--color-button, 29, 28, 26)));
  color: var(
    --twk-pd-akzent-text,
    rgb(var(--color-button-text, 255, 255, 255))
  );
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.twk-pd-block:not([data-bereit]) .twk-pd-cta {
  opacity: 0.6;
  pointer-events: none;
}
.twk-pd-block__hinweis {
  margin: calc(var(--u) * 0.5) 0 0;
  font-size: calc(var(--u) * 0.85);
  opacity: 0.75;
}

/* Shop-Karte: Quellen außerhalb des Druckblatts, auch auf schmalen Bildschirmen lesbar. */
.twk-pd__flaeche:has(.twk-pd__quellen) {
  padding-bottom: calc(var(--u) * 2.5);
  box-sizing: border-box;
  position: relative;
}
.twk-pd__quellen {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  font-size: calc(var(--u) * 0.65);
  color: color-mix(in srgb, var(--twk-bk-t) 28%, var(--twk-bk-p));
}
.twk-pd__quellen a {
  color: inherit;
  text-underline-offset: 0.15em;
}
.twk-pd__quellen small {
  font-size: inherit;
}
.twk-pd__quellen [role="alert"] {
  display: block;
}
/* Mobil steht die Quelle im vorhandenen oberen Bühnenrand statt zwischen Blatt und Formular. */
@container twk-bk (width < 60em) and ((width < 40em) or (orientation: portrait)) {
  .twk-pd .twk-bk__buehne:has(.twk-pd__quellen) {
    padding-bottom: calc(var(--u) * 0.3);
  }
  .twk-pd__flaeche:has(.twk-pd__quellen) {
    padding-bottom: 0;
  }
  .twk-pd__quellen {
    top: calc(var(--u) * -1.6);
    bottom: auto;
    margin: 0;
    padding: 0;
    line-height: 1.2;
  }
}
.twk-pd-formate,
.twk-pd-stile {
  display: grid;
  gap: calc(var(--u) * 0.65);
}
.twk-pd .twk-pd-format,
.twk-pd .twk-pd-stil,
.twk-formular .twk-pd-stil {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.8);
  padding: calc(var(--u) * 0.9);
  border: 1px solid var(--twk-bk-rand);
  border-radius: var(--twk-bk-r);
  cursor: pointer;
  margin: 0;
}
.twk-pd-format:has(input:checked),
.twk-pd-stil:has(input:checked) {
  outline: 2px solid var(--twk-bk-a);
  outline-offset: -2px;
  background: color-mix(in srgb, var(--twk-bk-a) 5%, var(--twk-bk-p));
}
.twk-pd-format:has(input:focus-visible),
.twk-pd-stil:has(input:focus-visible) {
  outline: 2px solid var(--twk-bk-a);
  outline-offset: 3px;
}
/* Im Studio steht die Stilwahl ohne Hülle (kein twk-bk): dieselben Kacheln mit Rückfallwerten. */
.twk-formular .twk-pd-stil {
  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  border-radius: 0.6em;
}
.twk-formular .twk-pd-stil:has(input:checked) {
  outline: 2px solid var(--twk-akzent, currentColor);
  background: color-mix(in srgb, var(--twk-akzent, currentColor) 5%, transparent);
}
.twk-formular .twk-pd-stil:has(input:focus-visible) {
  outline: 2px solid var(--twk-akzent, currentColor);
}
.twk-pd-format input,
.twk-pd-stil input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.twk-pd-format small {
  font-size: 0.8em;
  color: color-mix(in srgb, currentColor 65%, var(--twk-bk-p));
}
.twk-pd-format__preis {
  margin-left: auto;
  white-space: nowrap;
}
/*
 * Nachtrag 1 zu ADR 017: Stile und Designvorlagen als Raster, Maße nach momenterie (gemessen 01.10.2026 bei 16 px:
 * Abstand 10, Kachel-Innenabstand 6, Radius 10/5, Name 12/500 unter der Kachel). In em, damit die Werte mit der
 * Schrift des Themes gehen; die gemeinsamen Variablen (`--twk-bk-*`, Nachtrag 2 B1) ersetzen sie später.
 */
.twk-pd-raster {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.625em;
}
.twk-pd .twk-pd-raster .twk-pd-stil,
.twk-formular .twk-pd-raster .twk-pd-stil {
  flex-direction: column;
  align-items: stretch;
  gap: 0.375em;
  padding: 0;
  border: 0;
  outline: 0;
  background: none;
  text-align: center;
}
.twk-pd-raster .twk-pd-kachel {
  display: block;
  padding: 0.375em;
  border-radius: 0.625em;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 20%, transparent);
}
.twk-pd-raster .twk-pd-stil:has(input:checked) .twk-pd-kachel {
  box-shadow: inset 0 0 0 2px var(--twk-bk-a, var(--twk-akzent, currentColor));
  background: color-mix(in srgb, var(--twk-bk-a, var(--twk-akzent, currentColor)) 6%, transparent);
}
.twk-pd-raster .twk-pd-stil:has(input:focus-visible) .twk-pd-kachel {
  outline: 2px solid var(--twk-bk-a, var(--twk-akzent, currentColor));
  outline-offset: 2px;
}
.twk-pd-raster .twk-pd-stil > span:last-child:not(.twk-pd-kachel) {
  font-size: 0.75em;
  font-weight: 500;
  line-height: 1.25;
  color: color-mix(in srgb, currentColor 55%, transparent);
}
.twk-pd-raster .twk-pd-stil:has(input:checked) > span:last-child:not(.twk-pd-kachel) {
  color: var(--twk-bk-a, var(--twk-akzent, currentColor));
}
.twk-pd-raster .twk-pd-kachel > img,
.twk-pd-raster .twk-pd-kachel > svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 0.3125em;
  box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 12%, transparent);
}
.twk-pd-raster .twk-pd-design .twk-pd-kachel > svg {
  aspect-ratio: 70 / 100;
}
.twk-pd-design[data-laedt] {
  opacity: 0.6;
  cursor: progress;
}
/* Aufklapper wie momenterie „Farbe anpassen (optional)“: Titel links, Plus/Minus rechts, Linie darüber und darunter. */
.twk-pd-aufklapper {
  margin-top: 1.5em;
  border-top: 1px solid var(--twk-bk-rand, color-mix(in srgb, currentColor 14%, transparent));
  border-bottom: 1px solid var(--twk-bk-rand, color-mix(in srgb, currentColor 14%, transparent));
}
.twk-pd-aufklapper > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: 1.5em 0;
  cursor: pointer;
  list-style: none;
  font-size: 1em;
  font-weight: 500;
}
.twk-pd-aufklapper > summary::-webkit-details-marker {
  display: none;
}
.twk-pd-aufklapper > summary::after {
  content: "+";
  font-size: 1.25em;
  line-height: 1;
  font-weight: 300;
}
.twk-pd-aufklapper[open] > summary::after {
  content: "\2212";
}
.twk-pd-aufklapper[open] .twk-pd-aufklapper__zusatz {
  display: none;
}
.twk-pd-aufklapper__zusatz {
  font-weight: 400;
  color: color-mix(in srgb, currentColor 65%, transparent);
}
.twk-pd-aufklapper > summary:focus-visible {
  outline: 2px solid var(--twk-bk-a, currentColor);
  outline-offset: 2px;
}
.twk-pd-aufklapper > fieldset {
  margin: 0;
  padding: 0 0 1.5em;
  border: 0;
}
.twk-pd-unsichtbar {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.twk-pd-foto-knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: calc(var(--u, 1em) * 0.8);
  padding: 0.6em 1em;
  font: inherit;
  color: inherit;
  background: color-mix(in srgb, var(--twk-bk-a, currentColor) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--twk-bk-a, currentColor) 35%, transparent);
  border-radius: var(--twk-bk-r, 0.6em);
  cursor: pointer;
}
.twk-pd-foto-knopf svg {
  width: 1.3em;
  height: 1.3em;
}
.twk-pd .twk-bk-zusatz__reihe {
  scrollbar-width: none;
  padding-bottom: calc(var(--u) * 0.2);
}
.twk-pd-rahmensteuerung {
  display: flex;
  justify-content: center;
  gap: calc(var(--u) * 0.5);
  margin-top: calc(var(--u) * 0.5);
}
.twk-pd-rahmensteuerung button {
  font: inherit;
  color: inherit;
  background: var(--twk-bk-p);
  border: 1px solid var(--twk-bk-rand);
  border-radius: var(--twk-bk-r);
  width: calc(var(--u) * 6);
  min-height: calc(var(--u) * 2.1);
  cursor: pointer;
}

.twk-pd .twk-bk-zusatz__reihe::-webkit-scrollbar {
  display: none;
}
.twk-pd .twk-ort__suche {
  position: relative;
}
.twk-pd .twk-ort__suche:has(.twk-ort__suchpin) > input {
  padding-left: calc(var(--u) * 3);
}
.twk-ort__suchpin {
  position: absolute;
  top: calc(var(--u) * 0.9);
  left: var(--twk-bk-a4, calc(var(--u) * 0.85));
  width: calc(var(--u) * 1.2);
  height: calc(var(--u) * 1.2);
  color: color-mix(in srgb, currentColor 65%, transparent);
  pointer-events: none;
}
.twk-pd .twk-ort__tipp {
  display: flex;
  align-items: baseline;
  gap: var(--twk-bk-a2);
  font-size: var(--twk-bk-fs-klein);
  line-height: 1.4;
  color: var(--twk-bk-grau);
}
.twk-ort__info {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  width: 1.3em;
  height: 1.3em;
  flex-shrink: 0;
  font-style: normal;
}
/* Standortzeiger als Kachelraster der Hülle (twk-bk-kacheln), quadratisch. */
.twk-pd-symbole__reihe {
  --twk-bk-kachel-format: 1 / 1;
}

/* ---- Fotofeld: Hochladen; bearbeitet wird am Bogen (foto-bedienung.tsx) ---- */
.twk-pd-foto__hochladen {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  margin-top: calc(var(--u, 1em) * 0.5);
  padding: calc(var(--u, 1em) * 0.4) calc(var(--u, 1em) * 0.9);
  border: 1px solid var(--twk-linie, currentColor);
  border-radius: calc(var(--u, 1em) * 0.3);
  cursor: pointer;
}
/* Als Knopf (Auflösung verbessern): Schrift und Farbe erben wie beim Etikett. */
button.twk-pd-foto__hochladen {
  background: none;
  color: inherit;
  font: inherit;
}
button.twk-pd-foto__hochladen:disabled {
  opacity: 0.6;
  cursor: progress;
}
.twk-pd-foto__hochladen:focus-within {
  outline: 2px solid var(--twk-akzent, currentColor);
}
.twk-pd-foto__hochladen[data-laedt] {
  opacity: 0.6;
  cursor: progress;
}

/* ---- Foto hochskalieren (foto-hochskalieren-bereich.tsx): nur Icons, Erklärungen stehen im Tooltip ---- */
.twk-pd-hs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--u, 1em) * 0.6);
  margin-top: calc(var(--u, 1em) * 0.5);
}
.twk-pd-hs__gruppe {
  display: inline-flex;
  gap: calc(var(--u, 1em) * 0.2);
  padding: calc(var(--u, 1em) * 0.15);
  border: 1px solid var(--twk-linie, currentColor);
  border-radius: calc(var(--u, 1em) * 0.4);
}
.twk-pd-hs__ico {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--u, 1em) * 2);
  height: calc(var(--u, 1em) * 2);
  padding: 0;
  border: 1px solid transparent;
  border-radius: calc(var(--u, 1em) * 0.3);
  background: none;
  color: inherit;
  font: inherit;
  font-size: calc(var(--u, 1em) * 1.3);
  cursor: pointer;
}
.twk-pd-hs__ico:hover:not(:disabled) {
  background: color-mix(in srgb, currentColor 10%, transparent);
}
.twk-pd-hs__ico[aria-checked="true"] {
  border-color: var(--twk-akzent, currentColor);
  box-shadow: 0 0 0 1px var(--twk-akzent, currentColor);
  color: var(--twk-akzent, inherit);
}
.twk-pd-hs__ico:disabled {
  opacity: 0.55;
  cursor: progress;
}
.twk-pd-hs__ico:focus-visible {
  outline: 2px solid var(--twk-akzent, currentColor);
  outline-offset: 1px;
}
/* Nummer der hochskalierten Fassung, wenn es mehrere gibt */
.twk-pd-hs__ico[data-nr]::after {
  content: attr(data-nr);
  position: absolute;
  right: 1px;
  bottom: 0;
  font-size: calc(var(--u, 1em) * 0.6);
  line-height: 1;
}
/* Fassung reicht für den Druck (mindestens 200 dpi) */
.twk-pd-hs__ico[data-reicht]::before {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: calc(var(--u, 1em) * 0.45);
  height: calc(var(--u, 1em) * 0.45);
  border-radius: 50%;
  background: var(--twk-akzent, currentColor);
}
.twk-pd-hs__block {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u, 1em) * 0.4);
}
.twk-pd-hs__etikett {
  opacity: 0.75;
}
.twk-pd-hs__los {
  border-color: var(--twk-linie, currentColor);
}
/* Platzhalter für einen Durchgang, der noch läuft: kein Knopf, nur das drehende Symbol */
.twk-pd-hs__wartet {
  cursor: progress;
  opacity: 0.75;
}
.twk-pd-hs__dreher {
  animation: twk-pd-hs-dreh 0.9s linear infinite;
}
@keyframes twk-pd-hs-dreh {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .twk-pd-hs__dreher {
    animation-duration: 3s;
  }
}
.twk-pd-hs > .twk-feld__fehler {
  flex-basis: 100%;
}

/* ---- Wunschtext (Slice 0008): Schriftwahl als Bildknöpfe; bewegt wird am Bogen ---- */
.twk-pd-schriften {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.twk-pd-schriften__liste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--u, 1em) * 0.4);
}
.twk-pd-schriften__knopf {
  padding: calc(var(--u, 1em) * 0.3);
  border: 1px solid var(--twk-linie, currentColor);
  border-radius: calc(var(--u, 1em) * 0.3);
  background: #fff;
  cursor: pointer;
}
.twk-pd-schriften__knopf[data-gewaehlt] {
  outline: 2px solid var(--twk-akzent, currentColor);
  outline-offset: -1px;
}
.twk-pd-schriften__knopf img {
  display: block;
  width: 100%;
  height: auto;
}
.twk-pd-schriften__name {
  display: block;
  margin-top: calc(var(--u, 1em) * 0.2);
  font-size: 0.8em;
  text-align: center;
  /* Der Knopf ist immer weiß (das Muster ist schwarze Tinte), auch im dunklen Studio. */
  color: #444;
}

/* ---- Ausrichtung: Hoch-/Querformat als Vorschaukacheln unter dem Foto-Upload ---- */
.twk-pd-lage {
  border: 0;
  margin: 0;
  padding: 0;
}
.twk-pd-lage__liste {
  display: flex;
  gap: calc(var(--u, 1em) * 0.6);
  align-items: flex-end;
}
.twk-pd-lage__kachel {
  display: grid;
  justify-items: center;
  gap: calc(var(--u, 1em) * 0.3);
  padding: calc(var(--u, 1em) * 0.5);
  border: 1px solid var(--twk-linie, currentColor);
  border-radius: calc(var(--u, 1em) * 0.3);
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.twk-pd-lage__kachel[data-gewaehlt] {
  outline: 2px solid var(--twk-akzent, currentColor);
  outline-offset: -1px;
}
.twk-pd-lage__blatt {
  display: block;
  height: calc(var(--u, 1em) * 7);
  background: #fff;
  box-shadow: 0 1px 4px #00000030;
}
.twk-pd-lage__blatt svg {
  display: block;
  height: 100%;
  width: 100%;
}
.twk-pd-lage__name {
  font-size: 0.85em;
}

/* ---- Rahmen in 3D (rahmen-3d.tsx): Im Produkt-Schritt mit gewähltem Rahmen kippt das Blatt
   nach hinten, danach schiebt sich der Rahmen von vorn darauf (nach momenterie). Ohne Rahmen
   oder in jedem anderen Schritt steht das Blatt flach und bleibt bedienbar. Maße in mm über
   --twk-pd-mm (Pixel je mm, von der Bühne gemessen). Kein opacity/filter auf den Gruppen: Das
   machte die 3D-Szene flach, darum blenden nur die einzelnen Flächen. ---- */
.twk-pd__raum {
  width: 100%;
}
.twk-pd__koerper {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.75s cubic-bezier(0.3, 0.7, 0.2, 1);
}
.twk-pd__raum[data-gerahmt] .twk-pd__koerper {
  transform: scale(var(--twk-pd-rahmen-mass, 0.85))
    rotateY(var(--twk-pd-kipp-y, -30deg)) rotateX(var(--twk-pd-kipp-x, 0deg));
}
.twk-pd__koerper > .twk-pd__blatt {
  transition: box-shadow 0.5s;
}
.twk-pd__raum[data-gerahmt] .twk-pd__blatt {
  box-shadow: none;
  pointer-events: none;
}
.twk-pd-r3d {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--twk-pd-mm) * 90));
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.9, 0.6);
}
.twk-pd__raum[data-gerahmt] .twk-pd-r3d {
  transform: none;
  transition: transform 0.8s 0.25s cubic-bezier(0.2, 0.7, 0.25, 1);
}
.twk-pd-r3d__flaeche {
  position: absolute;
  --r3d-tonbild: linear-gradient(var(--r3d-ton), var(--r3d-ton));
  background-color: var(--r3d-grund);
  background-image: var(--r3d-tonbild);
  opacity: 0;
  transition: opacity 0.35s, background-color 0.35s;
}
.twk-pd__raum[data-gerahmt] .twk-pd-r3d__flaeche {
  opacity: 1;
  transition: opacity 0.3s 0.25s, background-color 0.35s;
}
/* Rückwand: nur ihr Schatten an der Wand ist zu sehen, links oben vom Licht weg. Sie fliegt mit
   dem Rahmen und läge im Anflug vor dem Blatt; darum erscheint sie erst, wenn er aufsitzt, und
   geht beim Abwählen als Erste. */
.twk-pd-r3d .twk-pd-r3d__rueck {
  transition: opacity 0.1s;
  background: var(--r3d-grund);
  box-shadow: calc(var(--twk-pd-mm) * 10) calc(var(--twk-pd-mm) * 14) calc(var(--twk-pd-mm) * 26)
    rgba(0, 0, 0, 0.22);
}
.twk-pd-r3d .twk-pd-r3d__lippenschatten {
  background: none;
  box-shadow:
    inset calc(var(--twk-pd-mm) * 2.5) calc(var(--twk-pd-mm) * 3.5) calc(var(--twk-pd-mm) * 4)
      rgba(0, 0, 0, 0.16),
    inset 0 0 calc(var(--twk-pd-mm) * 1.2) rgba(0, 0, 0, 0.12);
}
.twk-pd-r3d .twk-pd-r3d__glas {
  background: linear-gradient(
    118deg,
    rgba(255, 255, 255, 0) 38%,
    rgba(255, 255, 255, 0.22) 47%,
    rgba(255, 255, 255, 0.05) 55%,
    rgba(255, 255, 255, 0) 64%
  );
}
.twk-pd__raum[data-gerahmt] .twk-pd-r3d__rueck {
  transition: opacity 0.4s 0.95s;
}
.twk-pd__raum[data-gerahmt] .twk-pd-r3d__glas {
  opacity: 0.9;
}
@media (prefers-reduced-motion: reduce) {
  .twk-pd__koerper,
  .twk-pd-r3d,
  .twk-pd__raum[data-gerahmt] .twk-pd-r3d,
  .twk-pd-r3d__flaeche,
  .twk-pd__raum[data-gerahmt] .twk-pd-r3d__flaeche {
    transition: none;
  }
}

/* ---- Gestaltungssystem (ADR 017, Nachtrag 2, B1): Größenkarten und Rahmenpfeile ----
   Werte aus der Hülle statt eigener Zahlen; eigener Block, damit die Stil- und Designkacheln
   (Nachtrag 1) daneben unabhängig bleiben. */
.twk-pd-formate {
  gap: var(--twk-bk-a3);
}
.twk-pd .twk-pd-format {
  min-height: var(--twk-bk-hoehe-feld);
  padding: var(--twk-bk-a3) var(--twk-bk-a4);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--twk-bk-rand);
  font-weight: 500;
}
.twk-pd .twk-pd-format:has(input:checked) {
  outline: 0;
  box-shadow: inset 0 0 0 2px var(--twk-bk-a);
  background: var(--twk-bk-wahlgrund);
}
.twk-pd .twk-pd-format small {
  font-size: var(--twk-bk-fs-klein);
  font-weight: 400;
  color: var(--twk-bk-grau);
}
.twk-pd-rahmensteuerung {
  gap: var(--twk-bk-a2);
  margin-top: var(--twk-bk-a2);
}
.twk-pd-rahmensteuerung button {
  width: calc(var(--u) * 2.75);
  min-height: calc(var(--u) * 2.25);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--twk-bk-rand);
  border-radius: var(--twk-bk-r);
  font-size: var(--twk-bk-fs-chip);
}
/* Dasselbe Textfeld mit Zähler im Studio-Formular (ohne Hülle). */
.twk-formular .twk-bk-feld > input,
.twk-formular .twk-bk-feld > textarea {
  padding-right: 3.5em;
}