/* Aussehen aller Seiten. Farben und Schrift einer Seite setzt dist/<id>/theme.css darüber
   (tools/build-seiten.mjs aus site.theme), die Werte hier sind die Vorgabe.
   Leitidee: ein Schaukasten. Grüner Filz, weißes Papier, rotes Plakat als Logo.
   Farbig ist nur das Plakat; die Oberfläche drumherum hält sich zurück. */

@font-face {
  font-family: 'Bricolage';
  src: url('/site-fonts/bricolage.woff2') format('woff2');
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
}

/* Schrift des Logos, für „kostenlos“ an den Formaten und Ähnliches */
@font-face {
  font-family: 'Anton';
  src: url('/fonts/Anton-Regular.ttf') format('truetype');
  font-display: swap;
}

:root {
  --felt: #24483c;
  --felt-deep: #1b382e;
  --wall: #eef1ee;
  --paper: #ffffff;
  --ink: #1b1d22;
  --muted: #575e66;
  --line: #cfd6d1;
  --pin: #e0352b;
  --pin-deep: #b3241c;
  --marker: #ffd84a;
  --font: 'Bricolage', 'Segoe UI', system-ui, sans-serif;
  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.3rem;
  --step-2: 1.75rem;
  --step-3: clamp(2rem, 1.2rem + 3vw, 3.25rem);
  --step-4: clamp(2.4rem, 1.5rem + 3.4vw, 4.1rem);
  --gutter: clamp(1rem, 0.4rem + 2.6vw, 2.5rem);
  /* Überschriften, große Knöpfe, Preise, Vorlagennamen, Fragen */
  --font-display: var(--font);
  /* Rahmen um die Arbeitsfläche */
  --frame: #d9dedb;
  /* Hauptknopf beim Darüberfahren */
  --pin-hover: #cf2c23;
  /* helle Schrift auf dem Filz, und die etwas hellere in Bibliothek, Filzband und Zettelreihen */
  --on-felt: #e6efe9;
  --on-felt-light: #f1f5f2;
  /* Logo im Kopf: Höhe (am Rechner und am Handy) und Drehung beim Anfassen */
  --logo-h: 3.5rem;
  --logo-h-handy: 3.5rem;
  --logo-dreh: 4deg;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Kein Vergrößern durch Doppeltipp (passiert auf dem Handy beim schnellen Tippen auf Knöpfe); zwei Finger gehen weiter. */
  touch-action: manipulation;
}

body {
  margin: 0;
  background: var(--wall);
  color: var(--ink);
  font: 400 var(--step-0) / 1.5 var(--font);
  font-optical-sizing: auto;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-stretch: 75%;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: var(--step-4);
}
h2 {
  font-size: var(--step-3);
}
h3 {
  font-size: var(--step-1);
  line-height: 1.15;
}

p {
  margin: 0;
  max-width: 62ch;
}

a {
  color: inherit;
  text-underline-offset: 0.18em;
}

:focus-visible {
  outline: 3px solid var(--pin);
  outline-offset: 2px;
}

.wrap {
  max-width: 78rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- Kopf ---------- */

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.8rem;
}

.brand {
  display: block;
  flex: none;
}

/* Das Logo hängt schief (so ist es gezeichnet) und rückt sich beim Anfassen gerade. */
.brand img {
  display: block;
  height: var(--logo-h);
  width: auto;
  transition: transform 0.18s ease;
}
.brand:hover img,
.brand:focus-visible img {
  transform: rotate(var(--logo-dreh));
}

/* „Meine Plakate“ (public/meine.js): die gekauften Plakate dieses Browsers, ein Zettel zum Aufklappen */
.mine {
  position: relative;
}

.mine summary {
  list-style: none;
  cursor: pointer;
  padding: 0.1rem 0.5rem;
  margin-block: -0.1rem;
  background: var(--marker);
  border-radius: 3px;
  box-shadow: 2px 2px 0 var(--ink);
  white-space: nowrap;
}

.mine summary::-webkit-details-marker {
  display: none;
}

.mine-list {
  position: absolute;
  right: 0;
  top: calc(100% + 0.7rem);
  z-index: 30;
  width: min(22rem, calc(100vw - 2 * var(--gutter)));
  padding: 0.5rem;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  box-shadow: 4px 4px 0 var(--ink);
  font-weight: 400;
}

.mine-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: min(24rem, 60vh);
  overflow-y: auto;
}

.mine-list li {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.mine-list li + li {
  border-top: 1px solid var(--line);
}

.top nav .mine-list a {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.45rem;
  border-radius: 3px;
  text-decoration: none;
}

.top nav .mine-list a:hover {
  background: var(--wall);
  text-decoration: none;
}

.mine-list img,
.mine-blank {
  flex: none;
  width: 2.2rem;
  height: 3.1rem;
  object-fit: cover;
  background: var(--wall);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.35);
}

.mine-list a span {
  display: grid;
  min-width: 0;
  line-height: 1.25;
}

.mine-list b {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mine-list small,
.mine-list p {
  font-size: 0.8rem;
  color: var(--muted);
}

.mine-list p {
  margin: 0.4rem 0.45rem 0.2rem;
}

.mine-drop {
  flex: none;
  width: 2.2rem;
  height: 2.2rem;
  font: inherit;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
}

.mine-drop:hover {
  color: var(--pin);
  background: var(--wall);
}

/* Startseite: Kopf so breit wie die Arbeitsfläche */
.top-wide {
  max-width: 104rem;
}

.top nav {
  display: flex;
  gap: 1.4rem;
  font-size: var(--step--1);
  font-weight: 600;
}

.top nav a {
  text-decoration: none;
}
.top nav a:hover {
  text-decoration: underline;
}

/* ---------- Editor: die Arbeitsfläche ----------
   Ein Schaukasten im Alurahmen. Oben die Leiste, links die Reiter, daneben das Feld
   zum Ausfüllen, rechts das Brett mit dem Plakat. Auf breiten Bildschirmen füllt die
   Arbeitsfläche das Fenster und nur das mittlere Feld scrollt. */

.editor {
  max-width: 104rem;
  margin: 0 auto;
  padding: 0 var(--gutter) 1.2rem;
  height: calc(100dvh - 4.1rem);
  min-height: 40rem;
  display: flex;
  flex-direction: column;
}

.intro {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 2rem;
  padding-block: 0.2rem 0.9rem;
}

.intro h1 {
  font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.1rem);
}

.intro p {
  color: var(--muted);
  max-width: 56ch;
}

.workspace {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 5rem minmax(19rem, 27rem) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: 'bar bar bar' 'rail form board';
  background: var(--paper);
  border: 0.6rem solid var(--frame);
  border-radius: 8px;
  box-shadow: 0 0 0 1px #b4bdb7, 0 1px 0 1px #fff, 0 22px 40px -28px rgb(0 0 0 / 0.5);
  overflow: hidden;
}

/* Vollbild (web/editor.jsx, useAppMode): Die Arbeitsfläche füllt den Bildschirm, die Seite dahinter ruht. */
.is-app body {
  overflow: hidden;
}

.is-app .editor {
  position: fixed;
  inset: 0;
  z-index: 40;
  max-width: none;
  height: 100dvh;
  min-height: 0;
  padding: 0;
  background: var(--wall);
}

.is-app .intro {
  display: none;
}

.is-app .workspace {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.tool-app[aria-pressed='true'] {
  background: var(--wall);
}

.editor-loading {
  grid-column: 1 / -1;
  padding: 3rem 1.5rem;
  color: var(--muted);
}

/* Brett und Reiter gehören auf dem Handy zusammen (sie bleiben oben stehen), sonst liegen sie einzeln im Raster. */
.deck {
  display: contents;
}

/* Leiste */

.toolbar {
  grid-area: bar;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.45rem 0.6rem;
  border-bottom: 1.5px solid var(--line);
  background: var(--paper);
}

.tool-group {
  display: flex;
  gap: 0.15rem;
}

.tool {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

.tool:hover:not(:disabled) {
  background: var(--wall);
}

.tool:disabled {
  opacity: 0.3;
  cursor: default;
}

.save-state {
  margin-right: auto;
  font-size: var(--step--1);
  color: var(--muted);
  max-width: none;
}

.toolbar .btn-main {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--step-0);
  min-height: 2.75rem;
  padding: 0.45rem 1.1rem;
  box-shadow: 0 2px 0 var(--pin-deep);
}

.toolbar .btn-main svg {
  flex: none;
  width: 1.15em;
  height: 1.15em;
}

/* Logo über der Formatleiste: nur am Handy, wo das feste Brett den Kopf der Seite verdeckt */
.board-logo {
  display: none;
}

/* Reiter */

.rail {
  grid-area: rail;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.7rem 0 0.7rem 0.45rem;
  background: var(--felt-deep);
}

.rail button {
  display: grid;
  justify-items: center;
  gap: 0.25rem;
  padding: 0.75rem 0.2rem 0.65rem;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 650;
  line-height: 1.1;
  color: #d3e2d9;
  background: none;
  border: 0;
  border-radius: 6px 0 0 6px;
  cursor: pointer;
}

.rail button:hover {
  background: rgb(255 255 255 / 0.09);
}

.rail button.is-on {
  background: var(--paper);
  color: var(--ink);
}

.rail button:focus-visible {
  outline-color: var(--marker);
  outline-offset: -3px;
}

/* Feld zum Ausfüllen */

.form {
  grid-area: form;
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  --pane-pad: 1.3rem;
  padding: var(--pane-pad) 1.1rem 2.5rem 1.3rem;
}

.form fieldset {
  border: 0;
  margin: 0 0 1.4rem;
  padding: 0;
  min-width: 0;
}

.form fieldset + fieldset {
  border-top: 1.5px solid var(--line);
  padding-top: 1.2rem;
}

.form legend {
  font-family: var(--font-display);
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: 0.8rem;
  font-size: var(--step-1);
  font-weight: 800;
  font-stretch: 75%;
  line-height: 1.1;
}

.form legend + * {
  clear: both;
}

.pane-title,
.current h2 {
  font-size: var(--step-2);
}

.pane-title {
  margin-bottom: 0.5rem;
}

.pane-lead {
  margin: 0 0 1rem;
}

.pane-next {
  border-top: 1.5px solid var(--line);
  padding-top: 1rem;
  font-size: var(--step--1);
  color: var(--muted);
}

.pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-top: 2px solid var(--ink);
  margin: 1.5rem 0 0.8rem;
  padding-top: 1rem;
}

.btn-small {
  min-height: 2.4rem;
  padding: 0.3rem 0.8rem;
  font-size: var(--step--1);
}

/* Die gewählte Vorlage mit ihren Farben */

.current {
  display: grid;
  grid-template-columns: 6.2rem minmax(0, 1fr);
  gap: 1.1rem;
  align-items: start;
}

.current img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.25), 0 8px 14px -8px rgb(0 0 0 / 0.5);
}

.current p {
  font-size: var(--step--1);
  color: var(--muted);
  margin: 0.3rem 0 0.8rem;
}

.current .palettes {
  margin-bottom: 0;
}

/* Vorlagen suchen und filtern */

/* Suchfeld mit Lupe. Doppelte Klasse, damit die Regel die allgemeine für Eingabefelder überstimmt. */
input.search.search {
  padding-left: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23575e66' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L21 21'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0.7rem 50%;
  background-size: 1.15rem;
}

/* Im schmalen Feld eine Zeile zum Wischen, damit die Vorlagen oben bleiben; im großen Fenster umbrechend. */
.chips {
  display: flex;
  gap: 0.35rem;
  margin: 0.6rem -1.1rem 0.2rem 0;
  padding: 2px 1.1rem 2px 2px;
  overflow-x: auto;
  scrollbar-width: none;
  mask-image: linear-gradient(to left, transparent, #000 2.2rem);
}

.chip {
  flex: none;
  white-space: nowrap;
}

.library .chips {
  flex-wrap: wrap;
  margin-right: 0;
  padding-right: 2px;
  mask-image: none;
}

.chip {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid #9aa39d;
  border-radius: 99px;
  padding: 0.32rem 0.7rem;
  cursor: pointer;
}

.chip small {
  font-size: inherit;
  font-weight: 500;
  opacity: 0.6;
  margin-left: 0.15rem;
}

.chip:hover {
  border-color: var(--ink);
}

.chip[aria-pressed='true'] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* Suche und Filter bleiben beim Blättern durch viele Vorlagen oben stehen. */
.finder {
  position: sticky;
  /* bis an den oberen Rand des scrollenden Felds, über dessen Innenabstand hinweg */
  top: calc(var(--pane-pad, 0rem) * -1);
  z-index: 2;
  background: var(--paper);
  padding: 0.5rem 4px 0.4rem;
  margin: -0.5rem -4px 0;
  transition: box-shadow 0.2s ease;
}

/* Suchfeld, in der Bibliothek am Handy daneben der Schließen-Knopf */
.finder-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.finder-row .search {
  flex: 1;
  min-width: 0;
}

.finder-close {
  display: none;
  flex: none;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--paper);
  background: var(--ink);
  cursor: pointer;
}

.finder-close:active {
  transform: scale(0.94);
}

/* Sobald Vorlagen darunter durchlaufen (web/vorlagen.jsx setzt is-stuck), hebt sich der Bereich mit Kante und Schatten ab. */
.finder.is-stuck {
  box-shadow: 0 1.5px 0 var(--line), 0 12px 16px -12px rgb(0 0 0 / 0.4);
}

.pane-reset {
  display: none;
}

.grid-note {
  margin: 0.6rem 0 0.5rem;
}

.empty {
  margin-top: 1rem;
  padding: 1rem;
  background: var(--wall);
  border-radius: 4px;
  font-size: var(--step--1);
  max-width: none;
}

/* Raster der Vorlagen. Kacheln außer Sicht kosten den Browser nichts (content-visibility). */

.styles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.4rem, 1fr));
  gap: 0.5rem 0.3rem;
  margin-inline: -4px;
}

.style-cell {
  position: relative;
  align-self: start;
  min-width: 0;
}

.style {
  position: relative;
  display: block;
  width: 100%;
  font: inherit;
  font-size: var(--step--1);
  font-weight: 650;
  line-height: 1.2;
  color: inherit;
  background: none;
  border: 0;
  padding: 4px;
  cursor: pointer;
  text-align: left;
  content-visibility: auto;
  contain-intrinsic-size: auto 11.5rem;
}

.style img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 220 / 311;
  background: #e3e8e4;
  outline: 1.5px solid var(--line);
  margin-bottom: 0.4rem;
}

.style:hover img {
  outline-color: var(--ink);
}

/* „Gestalten“ liegt auf der gewählten Kachel der Bibliothek, unten in der Mitte */
.btn.style-go {
  font-family: var(--font-display);
  position: absolute;
  left: 50%;
  bottom: 0.9rem;
  z-index: 2;
  transform: translateX(-50%);
  min-height: 2.6rem;
  padding: 0.4rem 1.1rem;
  white-space: nowrap;
  box-shadow: 0 2px 0 var(--pin-deep), 0 6px 16px rgb(0 0 0 / 0.45);
  font-size: var(--step-0);
  animation: style-go-in 0.16s ease-out;
}

.btn.style-go:active {
  transform: translate(-50%, 2px);
}

@keyframes style-go-in {
  from {
    opacity: 0;
    transform: translate(-50%, 0.4rem);
  }
}

/* Die gewählte Vorlage ist rot umrandet. */
.style.is-on img {
  outline: 3px solid var(--pin);
}

.palettes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.3rem;
}

.palette {
  display: flex;
  width: 2.7rem;
  height: 2.4rem;
  padding: 0;
  border: 0;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  outline: 1.5px solid var(--line);
}

.palette i {
  flex: 1;
}

.palette.is-on {
  outline: 3px solid var(--pin);
  outline-offset: 2px;
}

.motifs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.3rem, 1fr));
  gap: 0.5rem;
  margin-top: 0.8rem;
}

.motif {
  display: grid;
  align-content: start;
  gap: 0.15rem;
  padding: 0.3rem 0.25rem 0.4rem;
  border: 1.5px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  cursor: pointer;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.15;
  color: inherit;
  text-align: center;
  hyphens: auto;
}

.motif:hover {
  border-color: var(--ink);
}

.motif i {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  background-image: url('/img/motive.webp');
  background-size: auto 100%;
  background-repeat: no-repeat;
}

/* „Ohne Motiv“: ein leeres Blatt mit Schrägstrich */
.motif-none i {
  background: linear-gradient(to top right, transparent calc(50% - 1px), var(--line) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
}

.motif.is-on {
  border-color: var(--pin);
  box-shadow: 0 0 0 2px var(--pin);
}

/* ---------- Das Brett mit dem Plakat ---------- */

.board {
  grid-area: board;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0.5rem;
  padding: 0.8rem 0.9rem 0.6rem;
  background: var(--felt);
  background-image: radial-gradient(rgb(255 255 255 / 0.05) 1px, transparent 1.4px), radial-gradient(rgb(0 0 0 / 0.1) 1px, transparent 1.4px);
  background-size: 7px 7px, 11px 11px;
  background-position: 0 0, 3px 5px;
  box-shadow: inset 0 6px 18px rgb(0 0 0 / 0.35), inset 6px 0 14px -6px rgb(0 0 0 / 0.35);
}

/* Formatleiste links, daneben die Bühne */
.board-main {
  position: relative;
  min-height: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.6rem;
}

/* Die Bühne misst sich selbst aus (Container-Einheiten): Das Plakat wird so groß, wie Platz ist, mal Lupe. */
.stage {
  container-type: size;
  display: flex;
  overflow: auto;
  padding: 0.9rem 0.5rem 0.6rem;
  scrollbar-color: rgb(255 255 255 / 0.45) transparent;
}

.stage:focus-visible {
  outline-color: var(--marker);
}

.sheet {
  position: relative;
  background: var(--paper);
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.3), 0 10px 22px -6px rgb(0 0 0 / 0.55);
}

.stage .sheet {
  flex: none;
  margin: auto;
  width: calc(min(100cqw, 100cqh * var(--ratio, 0.707)) * var(--zoom, 1));
}

.stage-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.5rem;
}

.stage-info {
  color: var(--on-felt);
  font-size: var(--step--1);
  font-weight: 600;
  max-width: none;
}

/* Nur am Handy, siehe dort */
.zoom-back,
.pinch-hint {
  display: none;
}

.zoom {
  flex: none;
  display: flex;
  background: rgb(0 0 0 / 0.22);
  border-radius: 4px;
}

.zoom button {
  font: inherit;
  font-size: var(--step-1);
  line-height: 1;
  color: var(--on-felt);
  background: none;
  border: 0;
  border-radius: 4px;
  min-width: 2.5rem;
  min-height: 2.5rem;
  cursor: pointer;
}

.zoom button:hover:not(:disabled) {
  background: rgb(255 255 255 / 0.12);
}

.zoom button:disabled {
  opacity: 0.35;
  cursor: default;
}

.zoom button:focus-visible {
  outline-color: var(--marker);
}

.zoom .zoom-value {
  font-size: var(--step--1);
  font-weight: 650;
  min-width: 8rem;
}

/* ---------- Felder und Knöpfe ---------- */
.field {
  display: block;
  margin-bottom: 0.95rem;
}

.field-label {
  display: block;
  font-weight: 650;
  font-size: var(--step--1);
  margin-bottom: 0.3rem;
}

.field-hint {
  display: block;
  font-size: var(--step--1);
  color: var(--muted);
  margin-top: 0.3rem;
  max-width: none;
}

input:not([type='checkbox'], [type='radio'], [type='file']),
textarea {
  width: 100%;
  font: inherit;
  color: inherit;
  background: var(--paper);
  border: 1.5px solid #9aa39d;
  border-radius: 4px;
  padding: 0.6rem 0.7rem;
  min-height: 2.9rem;
}

textarea {
  resize: vertical;
  line-height: 1.4;
  display: block;
}

input::placeholder,
textarea::placeholder {
  color: #8b929a;
}

input:focus-visible,
textarea:focus-visible {
  outline-offset: 0;
  border-color: var(--pin);
}

.row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.8rem;
}

.check {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  font-size: var(--step--1);
  margin: -0.2rem 0 1rem;
}

input[type='checkbox'],
input[type='radio'] {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--pin);
  flex: none;
}

.logos {
  list-style: none;
  padding: 0;
  margin: 0 0 0.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.logos li {
  display: grid;
  gap: 0.2rem;
  justify-items: center;
  align-content: start;
  font-size: var(--step--1);
}

/* Frei gesetztes Logo: eigene Zeile mit seinen Einstellungen daneben */
.logos li.is-free {
  flex-basis: 100%;
  grid-template-columns: auto 1fr;
  justify-items: start;
  align-items: center;
  column-gap: 0.9rem;
}

.logos li.is-free img {
  grid-row: span 3;
}

.logos .check {
  margin: 0;
}

.logos img {
  height: 3.4rem;
  max-width: 7rem;
  object-fit: contain;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 4px;
  padding: 0.3rem;
}

/* Knöpfe */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font: inherit;
  font-weight: 700;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  padding: 0.6rem 1rem;
  min-height: 2.9rem;
  cursor: pointer;
  text-decoration: none;
}

.btn:hover {
  background: #f3f5f3;
}

.btn-main {
  font-family: var(--font-display);
  background: var(--pin);
  border-color: var(--pin);
  color: #fff;
  font-size: var(--step-1);
  padding: 0.8rem 1.4rem;
  min-height: 3.5rem;
  box-shadow: 0 3px 0 var(--pin-deep);
}

.btn-main:hover {
  background: var(--pin-hover);
}
.btn-main:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--pin-deep);
}

.btn:disabled {
  opacity: 0.55;
  cursor: progress;
}

.file {
  position: relative;
}
.file input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.file:focus-within {
  outline: 3px solid var(--pin);
  outline-offset: 2px;
}

.link {
  font: inherit;
  font-size: var(--step--1);
  color: inherit;
  background: none;
  border: 0;
  padding: 0.3rem 0;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
}

.msg {
  background: var(--marker);
  border-radius: 4px;
  padding: 0.7rem 0.9rem;
  margin-bottom: 1.2rem;
  font-size: var(--step--1);
  font-weight: 600;
  max-width: none;
}

.msg-ok {
  background: #cfe9d6;
}

.fine {
  font-size: var(--step--1);
  color: var(--muted);
}

/* Formatwahl: eine Leiste links neben dem Plakat (FormatRail in web/editor.jsx).
   Druck rot mit hartem Schatten wie das Logo, die Bildformate zusammen auf einem gelben Block mit einem „kostenlos“.
   Gewählt ist immer das weiße Blatt. */
.formats {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.1rem;
  width: 5.4rem;
  padding: 0.2rem 0.3rem 0.2rem 0;
}

.fmt {
  position: relative;
}

.fmt > button {
  width: 100%;
  display: grid;
  justify-items: center;
  gap: 0.2rem;
  padding: 0.55rem 0.2rem 0.5rem;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--on-felt);
  background: rgb(0 0 0 / 0.22);
  border: 0;
  border-radius: 3px;
  cursor: pointer;
}

.fmt > button:hover {
  background: rgb(255 255 255 / 0.12);
}

.fmt > button:focus-visible {
  outline-color: var(--marker);
}

.fmt-price {
  font-size: 0.68rem;
  font-weight: 600;
  opacity: 0.9;
}

.fmt-brands {
  display: flex;
  gap: 0.25rem;
  margin-top: 0.1rem;
}

.brand-icon {
  display: block;
  width: 0.8rem;
  height: 0.8rem;
  fill: currentColor;
}

.fmt.is-print > button {
  background: var(--pin);
  color: #fff;
  box-shadow: 3px 3px 0 var(--ink);
}

.fmt-group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.fmt-group.is-free {
  padding: 0.3rem 0.3rem 0.35rem;
  background: var(--marker);
  border-radius: 3px;
  box-shadow: 3px 3px 0 var(--ink);
}

.fmt-group.is-free > .fmt > button {
  color: var(--ink);
  background: none;
}

.fmt-group.is-free > .fmt > button:hover {
  background: rgb(0 0 0 / 0.08);
}

/* „kostenlos“ in der Schrift des Logos */
.fmt-free {
  display: block;
  padding: 0.1rem 0 0.05rem;
  font: 400 1rem / 1 'Anton', var(--font);
  font-style: normal;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--ink);
  rotate: -3deg;
}

.fmt.is-on > button,
.fmt-group.is-free > .fmt.is-on > button,
.fmt.is-print.is-on > button {
  background: var(--paper);
  color: var(--ink);
}

.fmt.is-print.is-on > button svg {
  color: var(--pin);
}

.fmt-group.is-free > .fmt.is-on > button {
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.3);
}

/* i mit Erklärung: Darüberfahren, Tastatur oder Antippen */
.fmt-info {
  position: absolute;
  top: 3px;
  right: 3px;
  display: grid;
  place-items: center;
  width: 1rem;
  height: 1rem;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-size: 0.6rem;
  font-weight: 800;
  line-height: 1;
  color: color-mix(in srgb, var(--on-felt) 70%, transparent);
  cursor: help;
}

.fmt.is-print .fmt-info {
  color: rgb(255 255 255 / 0.8);
}

.fmt-group.is-free .fmt-info,
.fmt.is-on .fmt-info {
  color: color-mix(in srgb, var(--ink) 65%, transparent);
}

.fmt-info:hover,
.fmt-info:focus-visible,
.fmt-info.is-open {
  color: inherit;
}

.fmt-info:focus-visible {
  outline: 2px solid var(--marker);
  outline-offset: 1px;
}

.fmt-tip {
  position: absolute;
  z-index: 10;
  left: calc(100% + 0.8rem);
  top: 50%;
  translate: 0 -50%;
  width: 15rem;
  padding: 0.65rem 0.8rem;
  background: var(--paper);
  color: var(--ink);
  border-radius: 4px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.3);
  font-size: var(--step--1);
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
  cursor: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s, visibility 0.12s;
  pointer-events: none;
}

.fmt-tip::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 50%;
  translate: 0 -50%;
  border: 6px solid transparent;
  border-left: 0;
  border-right-color: var(--paper);
}

.fmt-tip b {
  display: block;
  font-weight: 700;
  margin-bottom: 0.1rem;
}

.fmt-info:hover .fmt-tip,
.fmt-info:focus-visible .fmt-tip,
.fmt-info.is-open .fmt-tip {
  opacity: 1;
  visibility: visible;
}

.sheet-svg,
.sheet-svg svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Warten auf eine Vorlage: Das bisherige Plakat bleibt blass stehen, darauf steckt ein Zettel. */
.sheet-svg {
  transition: opacity 0.3s ease, filter 0.3s ease;
}

.sheet-svg.is-fresh {
  animation: sheet-in 0.22s ease-out;
}

@keyframes sheet-in {
  from {
    opacity: 0.2;
  }
}

.sheet-svg.is-waiting {
  opacity: 0.4;
  filter: grayscale(0.7);
}

.sheet-wait {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.pin-note {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.55rem;
  width: min(15rem, 100%);
  margin: 0;
  padding: 1.35rem 1.1rem 1.05rem;
  background: var(--paper);
  color: var(--ink);
  text-align: center;
  font-size: var(--step--1);
  line-height: 1.35;
  rotate: -1.5deg;
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.25), 0 8px 16px -6px rgb(0 0 0 / 0.45);
  animation: pin-in 0.25s ease-out;
}

/* Die Nadel */
.pin-note::before {
  content: '';
  position: absolute;
  top: -0.4rem;
  left: 50%;
  width: 0.9rem;
  height: 0.9rem;
  margin-left: -0.45rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff8a80 0 18%, var(--pin) 32%, var(--pin-deep) 100%);
  box-shadow: 1px 2px 2px rgb(0 0 0 / 0.35);
}

.pin-note strong {
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-stretch: 75%;
  font-weight: 800;
  line-height: 1.1;
}

.pin-note span {
  color: var(--muted);
}

/* Ein Markerstrich, der übers Papier fährt */
.pin-stroke {
  position: relative;
  display: block;
  width: 7.5rem;
  height: 0.4rem;
  overflow: hidden;
  border-radius: 0.2rem;
  background: var(--wall);
}

.pin-stroke::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 45%;
  border-radius: inherit;
  background: var(--marker);
  animation: pin-stroke 1.3s ease-in-out infinite alternate;
}

.pin-note.is-failed::before {
  background: radial-gradient(circle at 35% 30%, #9aa3ab 0 18%, var(--muted) 32%, var(--ink) 100%);
}

.pin-note .btn {
  margin-top: 0.2rem;
}

@keyframes pin-stroke {
  to {
    translate: 122% 0;
  }
}

@keyframes pin-in {
  from {
    opacity: 0;
    translate: 0 -0.4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sheet-svg,
  .pin-note {
    transition: none;
    animation: none;
  }
  .pin-stroke::after {
    animation: none;
    width: 100%;
    opacity: 0.6;
  }
}

/* ---------- Dialog ---------- */

.dialog {
  width: min(44rem, calc(100vw - 1.5rem));
  max-height: calc(100dvh - 1.5rem);
  border: 0;
  border-radius: 6px;
  padding: clamp(1.2rem, 4vw, 2.2rem);
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 30px 80px rgb(0 0 0 / 0.45);
}

.dialog::backdrop {
  background: rgb(18 36 30 / 0.72);
}

.dialog h2:focus {
  outline: none;
}

.dialog h2 {
  font-size: var(--step-2);
  margin-bottom: 1.2rem;
  padding-right: 2.5rem;
}

.dialog h3 {
  margin-bottom: 0.4rem;
}

.dialog-close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
}

.dialog-close button {
  font: inherit;
  font-size: 1.8rem;
  line-height: 1;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 4px;
}

.dl-paid > p,
.dl-free > p {
  font-size: var(--step--1);
  margin-bottom: 1rem;
}

.products {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.product {
  display: grid;
  grid-template-columns: auto 1fr auto;
  column-gap: 0.7rem;
  align-items: center;
  border: 1.5px solid var(--line);
  border-radius: 4px;
  padding: 0.7rem 0.9rem;
  cursor: pointer;
}

.product.is-on {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.product-name {
  font-weight: 750;
}
.product-price {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 75%;
  font-size: var(--step-1);
  /* im Rot des Logos, wie das Preisschild am Druckformat */
  background: var(--pin);
  color: #fff;
  padding: 0 0.4rem;
}
.product-note {
  grid-column: 2 / -1;
  font-size: var(--step--1);
  color: var(--muted);
}

.consent {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: var(--step--1);
  margin-bottom: 1rem;
}
.consent input {
  margin-top: 0.15rem;
}
.consent .required {
  color: var(--pin);
  font-weight: 700;
}
.consent.is-missing {
  outline: 2px solid var(--pin);
  outline-offset: 0.4rem;
  border-radius: 4px;
  margin-bottom: 0.6rem;
}
.consent-hint {
  color: var(--pin-deep);
  font-size: var(--step--1);
  font-weight: 600;
  margin: 0.8rem 0 1rem;
}

.dl-paid .btn-main {
  width: 100%;
  margin-bottom: 0.6rem;
}

.code-row {
  margin-top: 1.3rem;
  font-size: var(--step--1);
}
.code-row label {
  font-weight: 650;
  display: block;
  margin-bottom: 0.3rem;
}
.code-row div,
.copy-row {
  display: flex;
  gap: 0.5rem;
}

/* Zwischen den beiden Teilen eine Linie, egal welcher oben steht */
.dl-paid + .dl-free,
.dl-free + .dl-paid {
  margin-top: 1.8rem;
}

/* Kostenloser Teil im Fenster: dieselbe Sprache wie die Formatleiste am Brett (gelber Block, harter Schatten,
   „kostenlos“ in der Logoschrift, gleiche Zeichen). */
.dl-free {
  padding: 0.8rem 1rem 1rem;
  background: var(--marker);
  border-radius: 3px;
  box-shadow: 4px 4px 0 var(--ink);
}

.dl-free .fmt-free {
  display: inline-block;
  font-size: 1.15rem;
  margin-bottom: 0.3rem;
}

.dl-free > p {
  margin-bottom: 0.8rem;
}

.free-buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.fmt-pick {
  display: grid;
  justify-items: center;
  gap: 0.25rem;
  padding: 0.7rem 0.3rem 0.6rem;
  font: inherit;
  font-size: var(--step--1);
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink);
  background: rgb(255 255 255 / 0.5);
  border: 0;
  border-radius: 3px;
  cursor: pointer;
}

.fmt-pick:hover:not(:disabled) {
  background: var(--paper);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.3);
}

.fmt-pick:disabled {
  opacity: 0.65;
  cursor: progress;
}

.fmt-pick .brand-icon {
  width: 0.95rem;
  height: 0.95rem;
}

/* Druck im Fenster: der rote Block mit Drucker wie an der Leiste */
.dl-print-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.dl-print-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  color: #fff;
  background: var(--pin);
  border-radius: 3px;
  box-shadow: 3px 3px 0 var(--ink);
}

/* Das fertige kostenlose Bild: Vorschau, Teilen, Speichern */
.dl-ready-main {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: 1.4rem;
  align-items: start;
}

.dl-ready-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 55vh;
  object-fit: contain;
  object-position: top;
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.3), 0 10px 22px -6px rgb(0 0 0 / 0.45);
}

/* Solange das Bild entsteht: ein Blatt im richtigen Format auf dem Filz des Bretts */
.dl-ready-img.is-loading {
  display: grid;
  place-items: center;
  padding: 1rem;
  text-align: center;
  font-size: var(--step--1);
  font-weight: 650;
  color: var(--on-felt);
  background: var(--felt);
  background-image: radial-gradient(rgb(255 255 255 / 0.05) 1px, transparent 1.4px), radial-gradient(rgb(0 0 0 / 0.1) 1px, transparent 1.4px);
  background-size: 7px 7px, 11px 11px;
  animation: dl-wait 1.1s ease-in-out infinite alternate;
}

img.dl-ready-img {
  animation: dl-in 0.25s ease-out;
}

@keyframes dl-wait {
  to {
    opacity: 0.7;
  }
}

@keyframes dl-in {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dl-ready-img.is-loading,
  img.dl-ready-img {
    animation: none;
  }
}

.dl-ready-for {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.dl-ready-for .brand-icon {
  width: 1.1rem;
  height: 1.1rem;
}

.dl-ready-side > p:not(.dl-ready-for) {
  margin-bottom: 1.1rem;
}

.dl-ready-actions {
  display: grid;
  gap: 0.5rem;
}

.dl-ready-actions .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
}

.dl-back {
  margin-top: 1rem;
}

@media (max-width: 34rem) {
  .dl-ready-main {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .dl-ready-img {
    width: auto;
    max-width: 100%;
    max-height: 42vh;
    justify-self: center;
  }

  .dl-ready-img.is-loading {
    height: 42vh;
  }
}

.dialog .msg {
  margin: 1.2rem 0 0;
}

/* Bibliothek im großen Fenster: links alle Vorlagen, rechts die gewählte mit dem eigenen Text */

.library {
  width: min(88rem, calc(100vw - 1.5rem));
  height: calc(100dvh - 1.5rem);
  padding: 0;
  overflow: hidden;
}

.library[open] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 24rem);
  grid-template-rows: minmax(0, 1fr);
}

.library-list {
  overflow-y: auto;
  overscroll-behavior: contain;
  --pane-pad: clamp(1.1rem, 3vw, 2rem);
  padding: var(--pane-pad);
}

.library-list h2 {
  margin-bottom: 1rem;
}

.library-list h2:focus {
  outline: none;
}

/* Im Feld des Editors ebenfalls von Rand zu Rand (Innenabstand von .form) */
.form .finder {
  margin-inline: -1.3rem -1.1rem;
  padding-inline: 1.3rem 1.1rem;
}

.library .finder {
  /* über die ganze Breite der Liste, auch über ihren Innenabstand */
  margin-inline: calc(var(--pane-pad) * -1);
  padding-inline: var(--pane-pad);
  padding-bottom: 0.8rem;
}

.library .finder > * {
  max-width: 46rem;
}

.library .styles {
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 1rem 0.6rem;
}

.library .style {
  contain-intrinsic-size: auto 15rem;
}

/* Kacheln ohne Namen: nur das Bild */
.library .style img {
  margin-bottom: 0;
}

.library-side {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 1.2rem;
  padding: 3.6rem 1.4rem 1.4rem;
  color: var(--on-felt-light);
  background: var(--felt);
  background-image: radial-gradient(rgb(255 255 255 / 0.05) 1px, transparent 1.4px), radial-gradient(rgb(0 0 0 / 0.1) 1px, transparent 1.4px);
  background-size: 7px 7px, 11px 11px;
  background-position: 0 0, 3px 5px;
  box-shadow: inset 8px 0 16px -8px rgb(0 0 0 / 0.45);
}

.library-sheet {
  container-type: size;
  display: grid;
  place-items: center;
  min-height: 0;
}

.library-sheet .sheet {
  width: min(100cqw, 100cqh * 0.707);
}

.library-pick h3 {
  font-size: var(--step-2);
}

.library-blurb {
  font-size: var(--step--1);
  margin: 0.3rem 0 0.9rem;
  opacity: 0.9;
}

.library-pick .palettes {
  margin-bottom: 1.1rem;
}

.library-pick .palette {
  outline-color: rgb(255 255 255 / 0.35);
}

.library-pick .palette.is-on {
  outline-color: #fff;
}

.library-pick .btn-main {
  width: 100%;
}

.library .dialog-close {
  z-index: 3;
}

.library .dialog-close button {
  color: #fff;
}

.library :focus-visible {
  outline-color: var(--marker);
}

.library-list :focus-visible {
  outline-color: var(--pin);
}

/* ---------- Abschnitte unter dem Editor ---------- */

.band {
  padding-block: clamp(3rem, 8vw, 6.5rem);
}

.band > .wrap > h2 {
  max-width: 18ch;
  margin-bottom: 1.2rem;
}

.band-felt {
  background: var(--felt);
  background-image: radial-gradient(rgb(255 255 255 / 0.05) 1px, transparent 1.4px), radial-gradient(rgb(0 0 0 / 0.1) 1px, transparent 1.4px);
  background-size: 7px 7px, 11px 11px;
  background-position: 0 0, 3px 5px;
  color: var(--on-felt-light);
  box-shadow: inset 0 14px 24px -14px rgb(0 0 0 / 0.5), inset 0 -14px 24px -14px rgb(0 0 0 / 0.5);
}

.gallery {
  list-style: none;
  padding: 0;
  margin: 2.5rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: clamp(1.4rem, 3vw, 2.6rem) clamp(1rem, 2.4vw, 2rem);
}

.gallery button {
  position: relative;
  display: block;
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.gallery img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.3), 0 12px 22px -8px rgb(0 0 0 / 0.6);
  transition: transform 0.18s ease;
}

.gallery li:nth-child(odd) img {
  transform: rotate(-0.9deg);
}
.gallery li:nth-child(even) img {
  transform: rotate(0.7deg);
}
.gallery button:hover img,
.gallery button:focus-visible img {
  transform: rotate(0) translateY(-4px);
}

.gallery strong {
  font-family: var(--font-display);
  display: block;
  margin-top: 0.9rem;
  font-size: var(--step-1);
  font-stretch: 75%;
  font-weight: 800;
}

.gallery span {
  font-size: var(--step--1);
  opacity: 0.85;
}

.gallery-more {
  margin: clamp(2.2rem, 5vw, 3.4rem) 0 0;
  max-width: none;
  text-align: center;
}

.compare {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--gutter);
  align-items: center;
}

.compare-text p + p {
  margin-top: 1rem;
}

.compare-pics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.8rem, 2vw, 1.5rem);
  align-items: start;
}

.compare figure {
  margin: 0;
}

.compare img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 8px 20px -8px rgb(0 0 0 / 0.4);
}

.compare figcaption {
  font-size: var(--step--1);
  color: var(--muted);
  margin-top: 0.6rem;
}

.prices {
  width: 100%;
  border-collapse: collapse;
  margin-top: 2rem;
}

.prices th,
.prices td {
  text-align: left;
  vertical-align: top;
  padding: 1.1rem 1rem 1.1rem 0;
  border-top: 2px solid var(--ink);
}

.prices th {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-stretch: 75%;
  font-weight: 800;
  line-height: 1.05;
  width: 13rem;
}

.prices .amount {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-stretch: 75%;
  font-weight: 800;
  line-height: 1.05;
  white-space: nowrap;
  width: 8rem;
}

.prices .amount span {
  background: var(--marker);
  padding: 0 0.35rem;
}

.prices-note {
  margin-top: 1.5rem;
  color: var(--muted);
  font-size: var(--step--1);
}

.faq {
  max-width: 46rem;
  margin-top: 2rem;
}

.faq details {
  border-top: 2px solid var(--ink);
}

.faq summary {
  font-family: var(--font-display);
  cursor: pointer;
  font-weight: 750;
  font-size: var(--step-1);
  line-height: 1.25;
  padding: 1rem 2rem 1rem 0;
  list-style: none;
  position: relative;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: '+';
  position: absolute;
  right: 0.2rem;
  top: 0.8rem;
  font-size: 1.6rem;
  line-height: 1;
}

.faq details[open] summary::after {
  content: '−';
}

.faq details p {
  padding-bottom: 1.2rem;
}

.foot {
  border-top: 2px solid var(--ink);
  padding-block: 1.6rem 2.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  font-size: var(--step--1);
}

.foot span {
  margin-right: auto;
}

/* Hinweis zu KI-erzeugten Inhalten (Art. 50 KI-Verordnung): eigene Zeile, zentriert, zurückhaltend */
.foot-ki {
  flex-basis: 100%;
  max-width: none;
  margin: 0.8rem 0 0;
  text-align: center;
  color: var(--muted);
  font-size: 0.8rem;
}

/* Widerrufsfunktion nach § 356a BGB: gut sichtbar und von den Rechtstexten abgesetzt */
.foot-withdraw {
  font-weight: 700;
  color: var(--pin-deep);
  border: 1.5px solid currentColor;
  border-radius: 4px;
  padding: 0.15rem 0.6rem;
  text-decoration: none;
}
.foot-withdraw:hover {
  background: var(--paper);
}

.withdraw-form {
  margin-top: 2rem;
  max-width: 34rem;
}
.withdraw-form .required {
  color: var(--pin);
}
.withdraw-form [aria-invalid='true'] {
  border-color: var(--pin);
}
.withdraw-form .btn-main {
  margin-top: 0.4rem;
}

/* ---------- Seite nach dem Kauf, Textseiten ---------- */

.done {
  padding-block: clamp(1rem, 4vw, 3rem) 5rem;
}

/* Meldungen ohne Raster (lädt, nicht gefunden, noch nicht bezahlt) */
.done > p {
  margin-top: 0.9rem;
}

.done h1 {
  font-size: var(--step-3);
  text-align: center;
}

.done h2 {
  font-size: var(--step-2);
}

/* Der Link ist der Schlüssel zum Plakat: ein gelber Zettel, mittig über allem, mit dem harten Schatten
   der Formatleiste. Lauter wird auf der Seite nichts. */
.keep {
  max-width: 44rem;
  margin: 1.6rem auto 0;
  padding: 1.2rem 1.4rem 1.4rem;
  text-align: center;
  background: var(--marker);
  border-radius: 3px;
  box-shadow: 4px 4px 0 var(--ink);
}

.keep p {
  margin: 0.5rem auto 0.9rem;
  max-width: 52ch;
  font-size: var(--step--1);
  font-weight: 500;
}

.copy-row input {
  flex: 1;
  min-width: 0;
}

.keep input {
  border-color: var(--ink);
  font-weight: 600;
}

.copy-row .btn {
  flex: none;
}

.copy-row .btn svg,
.done-main > .btn svg {
  flex: none;
  width: 1.15em;
  height: 1.15em;
}

.copy-row .code {
  font-weight: 800;
  letter-spacing: 0.08em;
  font-size: var(--step-1);
}

.done-cols {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--gutter);
  align-items: start;
  margin-top: clamp(1.8rem, 4vw, 3rem);
}

/* Das Plakat hängt am Filz wie im Editor, direkt darunter der Knopf zum Ändern. */
.done-board {
  display: grid;
  justify-items: center;
  gap: 1rem;
  padding: clamp(1rem, 3vw, 1.8rem);
  border-radius: 8px;
  background: var(--felt);
  background-image: radial-gradient(rgb(255 255 255 / 0.05) 1px, transparent 1.4px), radial-gradient(rgb(0 0 0 / 0.1) 1px, transparent 1.4px);
  background-size: 7px 7px, 11px 11px;
  background-position: 0 0, 3px 5px;
  box-shadow: inset 0 6px 18px rgb(0 0 0 / 0.35);
}

.done-board img,
.done-wait {
  display: block;
  width: 100%;
  max-width: 21rem;
  height: auto;
  background: var(--paper);
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.3), 0 10px 22px -6px rgb(0 0 0 / 0.55);
}

.done-wait {
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: var(--step--1);
}

.done-board .btn-main {
  width: 100%;
  max-width: 21rem;
  margin-top: 0.3rem;
}

.done-board .btn-main svg {
  flex: none;
  width: 1.1em;
  height: 1.1em;
}

.done-board .btn-main:focus-visible {
  outline-color: var(--marker);
}

.done-until {
  max-width: 21rem;
  text-align: center;
  font-size: var(--step--1);
  color: var(--on-felt);
}

.done-main h2 + p {
  margin-top: 0.6rem;
}

.done-main p + .copy-row {
  margin-top: 0.9rem;
}

.done-main > h2 ~ h2 {
  margin-top: 2.4rem;
}

/* Dateien: jede Zeile ein ganzer Knopf. Links das Zeichen des Formats (PDF rot, Bilder gelb, wie an der
   Formatleiste), rechts die Dienste, zu denen das Bild passt, und der Pfeil zum Herunterladen. */
.files {
  list-style: none;
  padding: 0;
  margin: 0.9rem 0 1rem;
  display: grid;
  gap: 0.55rem;
}

.file-row {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.9rem;
  padding: 0.6rem 0.9rem 0.6rem 0.6rem;
  font: inherit;
  text-align: left;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  cursor: pointer;
}

.file-row:hover:not(:disabled) {
  background: #f3f5f3;
}

.file-row:disabled {
  opacity: 0.55;
  cursor: progress;
}

.file-icon {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  background: var(--marker);
  border-radius: 3px;
  box-shadow: 3px 3px 0 var(--ink);
}

.file-row.is-pdf .file-icon {
  color: #fff;
  background: var(--pin);
}

.file-text {
  display: grid;
  line-height: 1.25;
}

.file-text b {
  font-weight: 700;
}

.file-text small {
  font-size: var(--step--1);
  color: var(--muted);
}

.file-row .fmt-brands {
  margin: 0;
  gap: 0.4rem;
  color: var(--muted);
}

.file-row .brand-icon {
  width: 1rem;
  height: 1rem;
}

.file-get {
  display: grid;
  color: var(--muted);
}

.file-row:hover:not(:disabled) .file-get {
  color: var(--pin);
}

/* Der Editor auf dieser Seite (web/plakat.jsx): außerhalb des Vollbilds gibt es ihn nicht. */
html:not(.is-app) .editor-embed {
  display: none;
}

.text {
  max-width: 44rem;
  padding-block: clamp(1rem, 4vw, 3rem) 5rem;
}

.text h1 {
  font-size: var(--step-3);
  margin-bottom: 1.5rem;
}

.text h2 {
  font-size: var(--step-2);
  margin: 2.2rem 0 0.6rem;
}

.text h3 {
  font-size: var(--step-1);
  margin: 1.6rem 0 0.4rem;
}

.text h2[id],
.text h3[id] {
  scroll-margin-top: 1rem;
}

.text p,
.text ul {
  margin-top: 0.8rem;
}

.text ul {
  padding-left: 1.2rem;
}

.text li + li {
  margin-top: 0.4rem;
}

.text mark {
  background: var(--marker);
  padding: 0 0.2rem;
}

/* ---------- Schmale Bildschirme ---------- */

@media (max-width: 56rem) {
  /* Die Seite lässt sich nie seitlich schieben, auch wenn irgendwo ein Pixel übersteht.
     clip statt hidden, damit die festen Teile (sticky) weiter funktionieren. */
  html,
  body {
    overflow-x: clip;
    overscroll-behavior-x: none;
  }

  /* Auf dem Handy scrollt die Seite. Brett und Reiter bleiben oben stehen, die Leiste unten. */
  .editor {
    display: block;
    height: auto;
    min-height: 0;
    padding: 0;
  }

  .intro {
    padding-inline: var(--gutter);
  }

  /* Im Editor scrollt er selbst, nicht die Seite: nur nach oben und unten, nie seitlich,
     und zwei Finger gehören dem Plakat (touch-action ohne Zoom). */
  .is-app .editor {
    height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-x pan-y;
    padding-top: env(safe-area-inset-top, 0px);
    background: var(--paper);
  }

  .workspace {
    display: flex;
    flex-direction: column;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
  }

  .deck {
    display: block;
    position: relative;
  }

  /* Erst im gestarteten Editor (is-app) bleiben Brett und Reiter oben stehen, die Leiste unten. */
  .is-app .deck {
    position: sticky;
    top: 0;
    z-index: 5;
    box-shadow: 0 6px 10px -6px rgb(0 0 0 / 0.35);
  }

  /* Vor dem Start ist der Editor ein Stück Seite: das Plakat groß, darunter „Plakat gestalten“.
     Nichts klebt, man scrollt ganz normal an ihm vorbei. */
  html:not(.is-app) .rail,
  html:not(.is-app) .form,
  html:not(.is-app) .toolbar,
  html:not(.is-app) .formats,
  html:not(.is-app) .pinch-hint,
  html:not(.is-app) .zoom-back {
    display: none;
  }

  /* Plakate zum Durchwischen (Teaser in web/editor.jsx): eine Karte in der Mitte, die nächste schaut am Rand hervor */
  .teaser {
    padding-top: 0.9rem;
    background: var(--felt);
    background-image: radial-gradient(rgb(255 255 255 / 0.05) 1px, transparent 1.4px), radial-gradient(rgb(0 0 0 / 0.1) 1px, transparent 1.4px);
    background-size: 7px 7px, 11px 11px;
    background-position: 0 0, 3px 5px;
    box-shadow: inset 0 6px 18px rgb(0 0 0 / 0.35);
  }

  .teaser-track {
    display: flex;
    gap: 0.9rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding: 0.3rem 15% 0.9rem;
    scrollbar-width: none;
  }

  .teaser-track::-webkit-scrollbar {
    display: none;
  }

  /* 100 % der Spur, also gut zwei Drittel der Breite: Der Rand der Spur lässt die Nachbarn hervorschauen */
  .teaser-slide {
    flex: 0 0 100%;
    max-width: 21rem;
    scroll-snap-align: center;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }

  .teaser-slide .sheet {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2480 / 3508;
    background: var(--paper);
    box-shadow: 0 1px 1px rgb(0 0 0 / 0.3), 0 10px 22px -6px rgb(0 0 0 / 0.55);
  }

  .teaser-slide .sheet {
    position: relative;
  }

  /* Wer schon eigene Texte hat: gelber Knopf auf dem eigenen Plakat. Die ganze Karte ist der Knopf, das hier ist sein Schild. */
  .teaser-go {
    position: absolute;
    left: 50%;
    bottom: 1.1rem;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 1.1rem;
    border-radius: 4px;
    font: 750 var(--step-0) / 1.2 var(--font-display);
    white-space: nowrap;
    color: var(--ink);
    background: var(--marker);
    box-shadow: 0 2px 0 #b8941a, 0 8px 18px rgb(0 0 0 / 0.5);
  }

  .teaser-go svg {
    width: 1.15em;
    height: 1.15em;
  }

  .teaser-slide:active .teaser-go {
    transform: translate(-50%, 2px);
    box-shadow: 0 0 0 #b8941a, 0 4px 10px rgb(0 0 0 / 0.5);
  }

  .teaser-slide:focus-visible {
    outline: 3px solid var(--marker);
    outline-offset: 4px;
  }

  .teaser-name {
    margin: 0 auto;
    padding-inline: var(--gutter);
    text-align: center;
    font-size: var(--step--1);
    font-weight: 650;
    color: var(--on-felt);
  }

  .teaser-dots {
    display: flex;
    justify-content: center;
    padding-top: 0.15rem;
  }

  .teaser-dots button {
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }

  .teaser-dots span {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.35);
    transition: background 0.15s, transform 0.15s;
  }

  .teaser-dots .is-on span {
    background: var(--marker);
    transform: scale(1.3);
  }

  .editor-start {
    padding: 0.4rem var(--gutter) 1.1rem;
    background: var(--felt);
  }

  .editor-start .btn-main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 3.1rem;
    font-size: var(--step-1);
    box-shadow: 0 2px 0 var(--pin-deep);
  }

  .editor-start svg {
    width: 1.2em;
    height: 1.2em;
  }

  .board {
    padding: 0.5rem 0.7rem 0.3rem;
    gap: 0.2rem;
  }

  /* Die Formatzeile über dem Plakat ist weg, ihr Platz geht ans Plakat. Die Leiste steht links im ohnehin freien Rand. */
  .board-main {
    height: calc(31vh + 3rem);
    gap: 0.3rem;
  }

  .stage {
    padding: 0.5rem 0.3rem 0.4rem;
    /* Zwei Finger zoomen hier das Plakat, nicht die Seite (usePinchZoom in web/editor.jsx) */
    touch-action: pan-x pan-y;
    overscroll-behavior: contain;
  }

  .zoom-back,
  .pinch-hint {
    display: block;
    position: absolute;
    right: 0.3rem;
    bottom: 0.4rem;
    z-index: 3;
    padding: 0.35rem 0.7rem;
    border-radius: 99px;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 650;
    line-height: 1.2;
    color: #fff;
    background: rgb(20 40 33 / 0.88);
    border: 0;
    box-shadow: 0 2px 6px rgb(0 0 0 / 0.3);
  }

  .zoom-back {
    min-height: 2.25rem;
    cursor: pointer;
  }

  .pinch-hint {
    pointer-events: none;
  }

  .formats {
    width: 3.5rem;
    gap: 0.6rem;
    padding-right: 0.2rem;
  }

  .fmt > button {
    gap: 0.1rem;
    padding: 0.3rem 0.1rem 0.25rem;
    font-size: 0.62rem;
  }

  .fmt > button svg {
    width: 18px;
    height: 18px;
  }

  .formats .fmt-brands,
  .fmt-price,
  .fmt-info {
    display: none;
  }

  .fmt-group.is-free {
    padding: 0.2rem;
    gap: 0.15rem;
  }

  .fmt.is-print > button,
  .fmt-group.is-free {
    box-shadow: 2px 2px 0 var(--ink);
  }

  .formats .fmt-free {
    font-size: 0.64rem;
    letter-spacing: 0;
  }

  .stage-foot {
    display: none;
  }

  /* Mit zwei Fingern vergrößert (web/editor.jsx setzt die Klasse): Nichts bleibt stehen,
     sonst verdecken Brett und Leiste den ganzen Bildschirm. */
  .is-pinched .deck,
  .is-pinched .toolbar {
    position: static;
  }

  .rail {
    flex-direction: row;
    padding: 0.4rem 0.5rem 0;
  }

  .rail button {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.6rem 0.2rem;
    font-size: 0.85rem;
    border-radius: 6px 6px 0 0;
  }

  .rail svg {
    width: 1.1rem;
    height: 1.1rem;
  }

  .form {
    overflow: visible;
    min-height: 55vh;
    padding: 1.3rem var(--gutter) 1.6rem;
  }

  .toolbar {
    order: 9;
    position: sticky;
    bottom: 0;
    z-index: 6;
    gap: 0.5rem;
    border-bottom: 0;
    border-top: 1.5px solid var(--line);
    padding-bottom: max(0.45rem, env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -6px 10px -6px rgb(0 0 0 / 0.2);
  }

  .save-state {
    visibility: hidden;
    width: 0;
    height: 0;
    overflow: hidden;
  }

  .toolbar-reset {
    display: none;
  }

  .pane-reset {
    display: inline;
    float: right;
  }

  .toolbar .tool-group {
    margin-right: auto;
  }

  .toolbar .btn-main {
    white-space: nowrap;
  }

  /* Hier scrollt die ganze Seite, und oben steht schon das Brett. */
  .finder {
    position: static;
  }

  .form .finder {
    margin-inline: -4px;
    padding-inline: 4px;
  }

  /* Die Filter laufen genau bis an den Bildschirmrand, keinen Pixel weiter */
  .form .chips {
    margin-right: calc(var(--gutter) * -1);
    padding-right: var(--gutter);
  }

  .toolbar .btn-main {
    padding-inline: 0.8rem;
  }

  .chip {
    padding-block: 0.5rem;
  }

  /* Bibliothek: Die Liste füllt das ganze Fenster. Oben bleiben Suche, Schließen-Knopf und Anlässe stehen,
     gewählt wird über „Gestalten“ auf der Kachel (oder einen zweiten Tipp darauf). */
  .library {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }

  .library[open] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }

  .library-list {
    padding-bottom: max(var(--pane-pad), env(safe-area-inset-bottom, 0px));
  }

  /* Die Überschrift bleibt für Vorleseprogramme, das Suchfeld sagt am Handy schon, wo man ist */
  .library-list h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .library .finder {
    position: sticky;
    padding-top: 0.7rem;
    margin-top: calc(var(--pane-pad) * -1);
    padding-bottom: 0.5rem;
  }

  .library .finder-close {
    display: grid;
  }

  .library .dialog-close {
    display: none;
  }

  .library .styles {
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: 0.7rem 0.4rem;
  }

  .library .chips {
    flex-wrap: nowrap;
    margin-right: -1.1rem;
    padding-right: 1.1rem;
    mask-image: linear-gradient(to left, transparent, #000 2.2rem);
  }

  .top nav {
    gap: 1rem;
  }
  .top nav > a:first-child {
    display: none;
  }
  /* Ein breites Logo lässt die Navigation in die nächste Zeile rutschen, statt die Seite seitlich zu verschieben */
  .top {
    flex-wrap: wrap;
    row-gap: 0.3rem;
  }
  .brand img {
    height: var(--logo-h-handy);
  }

  .compare,
  .done-cols {
    grid-template-columns: 1fr;
  }

  .done h1 {
    text-align: left;
  }

  .keep {
    padding: 1rem;
    text-align: left;
  }

  .done .copy-row {
    flex-direction: column;
  }

  .file-row {
    gap: 0.7rem;
  }

  .file-row .fmt-brands {
    display: none;
  }

  .prices th,
  .prices td {
    display: block;
    width: auto;
    padding: 0.2rem 0;
    border: 0;
  }
  .prices tr {
    display: block;
    border-top: 2px solid var(--ink);
    padding: 1rem 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .gallery img,
  .brand img {
    transition: none;
  }
}

@media print {
  .top nav,
  .board,
  .foot {
    display: none;
  }
}

/* ---------- Ergänzungen: Vollbild-Logo, Zurücksetzen, QR-Code, Anlass-Pfeile, Motiv-Kennzeichen ---------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Im Vollbild steht oben links das App-Symbol über den Reitern. Ein Klick beendet das Vollbild. */
.app-home {
  display: grid;
  place-items: center;
  flex: none;
  /* so breit wie die Reiterleiste darunter (erste Spalte von .workspace) */
  width: 5rem;
  margin: -0.45rem 0 -0.45rem -0.6rem;
  align-self: stretch;
  padding: 0;
  border: 0;
  background: var(--felt-deep);
  cursor: pointer;
}

.app-home img {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9px;
  transition: rotate 0.18s ease;
}

.app-home:hover img,
.app-home:focus-visible img {
  rotate: -6deg;
}

.app-home:focus-visible {
  outline-color: var(--marker);
  outline-offset: -3px;
}

/* Rückfrage vor dem Zurücksetzen */
.confirm {
  width: min(31rem, calc(100vw - 1.5rem));
  border-top: 0.45rem solid var(--pin);
}

.confirm h2 {
  font-size: var(--step-2);
  margin-bottom: 0.7rem;
}

.confirm p {
  margin: 0 0 1.4rem;
}

.confirm-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.9rem;
}

.confirm-actions .link {
  margin-left: auto;
}

/* QR-Code und Logos auf dem Brett verschieben und skalieren */
.place-handle {
  position: absolute;
  z-index: 3;
  cursor: move;
  touch-action: none;
  outline: 2px dashed var(--pin);
  outline-offset: 2px;
  border-radius: 3px;
}

.place-handle:focus-visible {
  outline-style: solid;
  outline-width: 3px;
}

.place-handle-size {
  position: absolute;
  right: -0.75rem;
  bottom: -0.75rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--pin);
  border: 3px solid var(--paper);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.4);
  cursor: nwse-resize;
  touch-action: none;
}

/* Ist der Reiter dazu nicht offen, zeigt sich der Rahmen erst unter dem Zeiger. Zugreifen öffnet den Reiter. */
.place-handle.is-quiet {
  outline-color: transparent;
  cursor: pointer;
}

.place-handle.is-quiet:hover {
  outline-color: var(--pin);
}

.place-handle.is-quiet .place-handle-size {
  display: none;
}

/* Texte am Plakat: Ein Klick führt zum Feld im Formular (web/editor.jsx, Stage). Alle Flächen eines Felds leuchten zusammen. */
.hit {
  position: absolute;
  z-index: 2;
  cursor: pointer;
  border-radius: 3px;
  outline: 2px dashed transparent;
  outline-offset: 1px;
}

.hit.is-hot {
  outline-color: var(--pin);
  background: rgb(255 216 74 / 0.16);
}

/* Das Feld, zu dem ein Klick aufs Plakat geführt hat, leuchtet kurz auf */
.field.is-picked input,
.field.is-picked textarea {
  animation: feld-zeigen 2.2s ease-out;
}

@keyframes feld-zeigen {
  0%,
  40% {
    background: #fff3c2;
    box-shadow: 0 0 0 4px var(--marker);
  }
  100% {
    background: var(--paper);
    box-shadow: 0 0 0 4px transparent;
  }
}

.qr-place {
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1.5px solid var(--line);
}

.qr-place h3 {
  font-size: var(--step-1);
  margin-bottom: 0.4rem;
}

.qr-place input[type='range'] {
  width: 100%;
  accent-color: var(--pin);
}

/* Anlass-Leiste: Pfeile zeigen, dass es seitlich weitergeht */
.chips-wrap {
  position: relative;
}

.chips-arrow {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  margin-top: 0.3rem;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.25);
  cursor: pointer;
}

.chips-arrow:hover {
  background: var(--ink);
  color: var(--paper);
}

.chips-arrow.is-left {
  left: -0.2rem;
}

.chips-arrow.is-right {
  right: -0.4rem;
}

/* Ausblenden nur dort, wo es weitergeht */
.chips-wrap:not(.more-right) .chips {
  mask-image: none;
}

.chips-wrap.more-left:not(.more-right) .chips {
  mask-image: linear-gradient(to right, transparent, #000 2.6rem);
}

.chips-wrap.more-left.more-right .chips {
  mask-image: linear-gradient(to right, transparent, #000 2.6rem, #000 calc(100% - 2.2rem), transparent);
}

/* Vorlagen, die ein Motiv nach Wahl zeigen */
/* Label „Neu“ oben links auf frisch veröffentlichten Vorlagen (Feld neu, web/vorlagen.jsx) */
.style-new {
  position: absolute;
  top: 0.55rem;
  left: 0.55rem;
  z-index: 1;
  padding: 0.12rem 0.4rem 0.14rem;
  border-radius: 3px;
  background: var(--pin);
  color: #fff;
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.35);
}

.style-motif {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  background: var(--marker);
  color: var(--ink);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.35);
}

.library .style-motif {
  width: 1.7rem;
  height: 1.7rem;
}

.motif-legend {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: 0.6rem;
  white-space: nowrap;
}

.motif-legend svg {
  padding: 2px;
  box-sizing: content-box;
  border-radius: 50%;
  background: var(--marker);
  color: var(--ink);
}

@media (max-width: 56rem) {
  /* Kein Vollbild am Handy: Brett und Leiste stehen dort ohnehin fest wie in einer App. */
  .app-home,
  .tool-app {
    display: none;
  }

  .formats {
    justify-content: flex-start;
  }

  .board-logo {
    display: block;
    padding: 0.15rem 0.1rem 0;
  }

  .board-logo img {
    display: block;
    width: 100%;
    height: auto;
  }
}

/* Kurzer Name eines Reiters für schmale Bildschirme */
.rail-short {
  display: none;
}

@media (max-width: 56rem) {
  .rail [data-short] .rail-long {
    display: none;
  }
  .rail [data-short] .rail-short {
    display: inline;
  }
}

/* Bibliothek am Handy: zwei Vorlagen in einer Reihe, groß genug zum Erkennen */
@media (max-width: 34rem) {
  .library .styles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .style-go {
    animation: none;
  }

  .sheet-svg.is-fresh {
    animation: none;
  }
}

/* ---------- Hinweis zur Statistik (public/analytics.js) ---------- */
.stat-note {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 50;
  max-width: min(22rem, calc(100vw - 2rem));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.8rem;
  padding: 0.7rem 0.9rem;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 6px 24px rgb(0 0 0 / 0.14);
  font-size: var(--step--1);
  line-height: 1.4;
}
.stat-note p {
  margin: 0;
}
.stat-note div {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.stat-note .btn {
  min-height: 0;
  padding: 0.3rem 0.9rem;
  font-size: var(--step--1);
  box-shadow: none;
}
.stat-note .stat-note-buttons {
  flex-wrap: wrap;
}
.stat-note-detail {
  flex-direction: column;
  align-items: stretch;
  max-width: min(24rem, calc(100vw - 2rem));
}
.cookie-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.cookie-row input {
  margin-top: 0.2rem;
  flex: none;
  accent-color: var(--ink);
}
.cookie-row b {
  display: block;
}

/* ---------- Blog (tools/build-blog.mjs) ----------
   Regel: Filz heißt, hier hängt eine Vorlage. Jede Vorlage im Blog liegt auf Filz und hat
   einen roten Pin, alles andere ist Papier und Linie wie bei den Fragen auf der Startseite. */

.top nav a[aria-current='page'] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

/* Filzfläche, dieselbe Struktur wie .band-felt */
.post-pin,
.pin-one,
.pin-row {
  background: var(--felt);
  background-image: radial-gradient(rgb(255 255 255 / 0.05) 1px, transparent 1.4px), radial-gradient(rgb(0 0 0 / 0.1) 1px, transparent 1.4px);
  background-size: 7px 7px, 11px 11px;
  background-position: 0 0, 3px 5px;
  color: var(--on-felt-light);
  box-shadow: inset 0 0 18px -6px rgb(0 0 0 / 0.55);
  border-radius: 6px;
}

.pin-poster {
  position: relative;
  display: block;
}
.pin-poster img {
  display: block;
  width: 100%;
  height: auto;
  transform: rotate(-1.2deg);
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.3), 0 12px 22px -8px rgb(0 0 0 / 0.6);
  transition: transform 0.18s ease;
}
/* der Pin, mit dem das Plakat im Schaukasten hängt */
.pin-poster::after {
  content: '';
  position: absolute;
  top: -0.35rem;
  left: 50%;
  width: 0.95rem;
  height: 0.95rem;
  margin-left: -0.47rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ff7a70, var(--pin) 45%, var(--pin-deep));
  box-shadow: 0 3px 4px rgb(0 0 0 / 0.45);
}
.pin-poster:hover img {
  transform: rotate(0) translateY(-3px);
}

.post {
  padding-block: clamp(0.5rem, 2vw, 1.5rem) clamp(3rem, 7vw, 5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 clamp(2rem, 5vw, 5rem);
}

.crumbs ol {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0;
  font-size: var(--step--1);
  color: var(--muted);
}
.crumbs li + li::before {
  content: '/';
  margin: 0 0.5rem;
  opacity: 0.6;
}
.crumbs a {
  text-decoration: none;
}
.crumbs a:hover {
  text-decoration: underline;
}

.post-head h1 {
  font-size: var(--step-4);
  max-width: 20ch;
}

.post-meta {
  margin-top: 1rem;
  font-size: var(--step--1);
  color: var(--muted);
}

.post-lead {
  margin-top: 1.4rem;
  font-size: var(--step-1);
  line-height: 1.45;
  max-width: 38rem;
}

/* Hauptvorlage: auf dem Handy nach dem ersten Absatz, auf breiten Schirmen rechts daneben */
.post-pin {
  margin-top: 1.8rem;
  padding: 1.6rem 1.3rem 1.3rem;
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 1.2rem;
  align-items: start;
}
.post-pin strong,
.pin-one strong {
  font-family: var(--font-display);
  display: block;
  font-size: var(--step-1);
  font-stretch: 75%;
  font-weight: 800;
  line-height: 1.1;
}
.post-pin p,
.pin-one p {
  margin-top: 0.4rem;
  font-size: var(--step--1);
  line-height: 1.45;
}
.post-pin .btn-main,
.pin-one .btn-main {
  margin-top: 1rem;
  font-size: var(--step-0);
  min-height: 3rem;
  padding: 0.6rem 1rem;
}
.post-pin .post-pin-note {
  opacity: 0.8;
}

.post-body {
  font-size: 1.125rem;
  line-height: 1.65;
}
.post-body > p,
.post-body > ul,
.post-body > ol {
  margin: 1rem 0 0;
  max-width: 40rem;
}
.post-body > ul,
.post-body > ol {
  padding-left: 1.3rem;
}
.post-body li + li {
  margin-top: 0.35rem;
}
.post-body > h2 {
  font-size: var(--step-2);
  margin: 2.8rem 0 0;
  max-width: 34ch;
  scroll-margin-top: 1rem;
}
.post-body > h3 {
  font-size: var(--step-1);
  margin: 1.8rem 0 0;
  scroll-margin-top: 1rem;
}
.post-body > h3.faq-q {
  border-top: 2px solid var(--ink);
  padding-top: 1rem;
  margin-top: 1.4rem;
  max-width: 40rem;
}
.post-body > h2 + h3.faq-q {
  margin-top: 1.2rem;
}
.post-body a {
  text-decoration-thickness: 1px;
}
.post-body a:hover {
  text-decoration-thickness: 2px;
}

.table-wrap {
  margin: 1.4rem 0 0;
  max-width: 44rem;
  overflow-x: auto;
}
.post-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
  line-height: 1.4;
}
.post-body th,
.post-body td {
  text-align: left;
  vertical-align: top;
  padding: 0.6rem 0.9rem 0.6rem 0;
  border-top: 1px solid var(--line);
}
.post-body thead th {
  border-top: 0;
  border-bottom: 2px solid var(--ink);
  font-weight: 750;
}
.post-body tbody th {
  font-weight: 700;
  white-space: nowrap;
}

/* Plakattext zum Übernehmen: ein Blatt Papier, Zeile für Zeile */
.poster-text {
  margin: 1.4rem 0 0;
  max-width: 34rem;
  padding: 1.1rem 1.3rem;
  background: var(--paper);
  border-left: 4px solid var(--ink);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08), 0 8px 20px -12px rgb(0 0 0 / 0.35);
  font-size: var(--step-0);
  line-height: 1.45;
}
.poster-text p + p {
  margin-top: 0.35rem;
}

/* eine Vorlage mitten im Text */
.pin-one {
  margin: 2.2rem 0 0;
  max-width: 40rem;
  padding: 1.6rem 1.4rem 1.4rem;
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: 1.4rem;
  align-items: center;
}
.pin-one .pin-poster img {
  transform: rotate(1deg);
}
.pin-one figcaption p {
  font-size: var(--step-0);
}

/* mehrere Vorlagen nebeneinander */
.pin-row {
  margin: 2.2rem 0 0;
  max-width: 40rem;
  padding: 1.6rem 1.4rem 1.2rem;
}
.pin-row ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: 1.2rem;
}
.pin-row a {
  display: block;
  color: inherit;
  text-decoration: none;
}
.pin-row img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.3), 0 10px 18px -8px rgb(0 0 0 / 0.6);
  transition: transform 0.18s ease;
}
.pin-row li:nth-child(odd) img {
  transform: rotate(-0.9deg);
}
.pin-row li:nth-child(even) img {
  transform: rotate(0.7deg);
}
.pin-row a:hover img,
.pin-row a:focus-visible img {
  transform: rotate(0) translateY(-3px);
}
.pin-row strong {
  font-family: var(--font-display);
  display: block;
  margin-top: 0.6rem;
  font-stretch: 75%;
  font-weight: 800;
  line-height: 1.15;
}
.pin-row p {
  margin-top: 1.1rem;
  font-size: var(--step--1);
  opacity: 0.8;
}

/* Galerie am Ende der Artikel: Links statt Knöpfe */
.gallery a {
  display: block;
  color: inherit;
  text-decoration: none;
}
.gallery a:hover img,
.gallery a:focus-visible img {
  transform: rotate(0) translateY(-4px);
}
.post-band > .wrap > p {
  max-width: 44ch;
}

/* Artikellisten: Übersicht, Weiterlesen, Startseite */
.post-list {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
  gap: 0 clamp(1.5rem, 3vw, 2.5rem);
}
.post-list li {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4.6rem;
  gap: 1.1rem;
  align-items: start;
  border-top: 2px solid var(--ink);
  padding: 1rem 0 1.5rem;
}
.post-list a {
  color: inherit;
  text-decoration: none;
}
/* die ganze Zeile ist anklickbar */
.post-list a::after {
  content: '';
  position: absolute;
  inset: 0;
}
.post-list h3 {
  font-size: var(--step-1);
  line-height: 1.12;
}
.post-list p {
  margin-top: 0.45rem;
  font-size: var(--step--1);
  color: var(--muted);
}
.post-list li:hover h3 {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.15em;
}
.post-list a:focus-visible {
  outline: none;
}
.post-list li:has(a:focus-visible) {
  outline: 3px solid var(--pin);
  outline-offset: 4px;
}
.post-list img {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 0.2rem;
  transform: rotate(1.5deg);
  box-shadow: 0 6px 12px -6px rgb(0 0 0 / 0.5);
}

.post-more {
  padding-block: clamp(3rem, 7vw, 5rem);
}
.post-more h2 {
  font-size: var(--step-2);
}
.post-more > p {
  margin-top: 0.5rem;
  font-weight: 650;
}

/* Übersicht */
.blog {
  padding-block: clamp(1rem, 4vw, 3rem) clamp(3rem, 7vw, 5rem);
}
.blog-head h1 {
  max-width: 16ch;
}
.blog-head > p {
  margin-top: 1.2rem;
  font-size: var(--step-1);
  line-height: 1.45;
  max-width: 40rem;
}
.blog-topics {
  margin-top: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  font-weight: 650;
}
.blog-group {
  margin-top: clamp(2.6rem, 6vw, 4rem);
  scroll-margin-top: 1rem;
}
.blog-group h2 {
  font-size: var(--step-2);
}

/* Startseite */
.home-blog-more {
  margin-top: 1.6rem;
}

@media (min-width: 64rem) {
  .post {
    grid-template-columns: minmax(0, 42rem) 17rem;
    grid-template-areas: 'head pin' 'body pin';
    justify-content: space-between;
  }
  .post-head {
    grid-area: head;
  }
  .post-body {
    grid-area: body;
  }
  .post-pin {
    grid-area: pin;
    align-self: start;
    position: sticky;
    top: 1.5rem;
    margin-top: 3.2rem;
    grid-template-columns: minmax(0, 1fr);
    padding: 1.8rem 1.5rem 1.5rem;
  }
  .post-pin .pin-poster {
    width: 82%;
    margin: 0 auto 0.4rem;
  }
}

@media (max-width: 34rem) {
  .post-pin {
    grid-template-columns: 6rem minmax(0, 1fr);
    padding: 1.4rem 1rem 1rem;
  }
  .pin-one {
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: 1rem;
    padding: 1.4rem 1rem 1rem;
    align-items: start;
  }
  .post-pin .btn-main,
  .pin-one .btn-main {
    width: 100%;
  }
  .post-body > h3.faq-q,
  .post-body > h2 {
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pin-poster img,
  .pin-row img {
    transition: none;
  }
}

/* Übersicht aller Vorlagen (/vorlagen/) */
.vorlagen {
  padding-block: clamp(1rem, 4vw, 3rem) clamp(3rem, 7vw, 5rem);
}
.vorlagen .blog-head h1 {
  max-width: 18ch;
}
.vorlagen-group > p,
.vorlagen .blog-group > p {
  margin-top: 0.6rem;
  max-width: 44rem;
}
.vorlagen-group li {
  scroll-margin-top: 1rem;
}
/* Anlass mit wenigen Vorlagen: die Kacheln bleiben so groß wie in vollen Reihen */
.vorlagen-group .gallery {
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
}
.gallery-all {
  margin: 1rem 0 0;
  max-width: none;
  text-align: center;
  font-weight: 650;
}

/* ---------- Rückmeldungen: Vorlagenwunsch und „Hat alles geklappt?“ (web/lib/rueckmeldung.jsx) ---------- */

.wish,
.feedback {
  margin-top: 1.2rem;
  padding: 1rem 1.1rem;
  background: var(--paper);
  border: 1.5px dashed #9aa39d;
  border-radius: 6px;
  font-size: var(--step--1);
}

.wish p,
.feedback p {
  max-width: none;
  margin: 0 0 0.7rem;
}

.wish > p:last-child,
.feedback > p:last-child {
  margin-bottom: 0;
}

.wish-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  font-size: var(--step-0);
}

.wish label {
  display: block;
  font-weight: 650;
  margin-bottom: 0.8rem;
}

.wish label small {
  font-weight: 400;
  color: var(--muted);
}

.wish input,
.wish textarea,
.feedback textarea {
  margin-top: 0.3rem;
  font-weight: 400;
}

.wish .fine {
  margin: 0.7rem 0 0;
}

.wish.is-done,
.feedback[role='status'] {
  border-style: solid;
  border-color: #8cc49c;
  background: #eef8f1;
}

/* Fängt Formular-Roboter: für Menschen unsichtbar */
.wish .wish-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* In der leeren Trefferliste steht der Wunsch direkt unter dem Hinweis */
.empty .wish {
  margin-top: 0.8rem;
}

.feedback-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.thumb-down {
  display: inline-flex;
  transform: rotate(180deg);
}

.feedback textarea {
  margin-bottom: 0.7rem;
}

/* Die Seite /wunsch */
#wunsch .wish {
  margin-top: 1.6rem;
  max-width: 34rem;
}