/* Web-Anbau – bewegte Grafiken
   Drei Ideen in derselben Welt wie die Seite: Papier, eine Druckfarbe, Fotos in echten Farben.
   Ohne Skript und bei reduzierter Bewegung steht jeweils das fertige Bild da; „wartet“ setzt das Skript nur,
   solange eine Grafik noch nicht gespielt hat. */

.bw-nochmal { margin-top: 1.75rem; color: var(--tinte); font-weight: 500; }
.bw-nochmal[hidden] { display: none; }

/* ---------- Telefon, gemeinsam für „Keksfrei“ und „Nach Ladenschluss“ ---------- */
.handy { width: clamp(13.5rem, 21vw, 17.5rem); aspect-ratio: 9 / 18.5; container-type: inline-size; }
.handy-koerper { height: 100%; padding: 2.6cqi; border-radius: 13cqi; background: var(--text); }
.handy-schirm { position: relative; height: 100%; overflow: hidden; border-radius: 10.5cqi; background: #f4f4f1; font-size: 4.3cqi; }

/* Die Mini-Seite gehört zur erfundenen Backstube, nicht zum Studio: eigene Farben wie die Studien im Rahmen */
.mini { color: #1b1714; font-family: var(--font); line-height: 1.35; }
.mini p { hyphens: manual; }
.mini-kopf { display: flex; justify-content: space-between; align-items: baseline; padding: 3.1em 1.3em 0.9em; }
.mini-kopf b { font-weight: 800; letter-spacing: -0.02em; text-transform: uppercase; }
.mini-bild { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; }
.mini-titel { margin-top: 0.75em; padding: 0 1.15em; font-size: 1.85em; font-weight: 800; line-height: 0.95; letter-spacing: -0.04em; }
.mini-offen { display: flex; align-items: center; gap: 0.5em; margin-top: 0.9em; padding: 0 1.3em; font-weight: 600; }
.mini-offen i { width: 0.6em; height: 0.6em; border-radius: 50%; background: #2e8b57; }
.mini-text { margin-top: 0.7em; padding: 0 1.3em; }
.mini-knopf { position: relative; display: grid; place-items: center; min-height: 3.4em; margin: 1em 1.3em 0; padding: 0.5em 1em; text-align: center; background: #b3261e; color: #fff; font-weight: 600; }
.mini-knopf > span { grid-area: 1 / 1; }
.mini-liste { margin: 1.1em 1.3em 0; padding: 0; list-style: none; }
.mini-liste li { display: flex; justify-content: space-between; gap: 1em; margin-bottom: 0.4em; padding: 0.75em 0.9em; background: #e6e5e0; }
.tipp { position: absolute; width: 3.2em; height: 3.2em; margin: -1.6em 0 0 -1.6em; border-radius: 50%; background: rgb(27 23 20 / 0.28); pointer-events: none; opacity: 0; }

/* ---------- Idee 1: Keksfrei ---------- */
.bw-keks { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; padding: var(--section) var(--margin) 0; }
.keks-text { grid-column: 1 / 6; }
.keks-titel { font-size: var(--step-head); }
.keks-satz { max-width: 28ch; margin-top: 1.5rem; font-size: var(--step-lead); line-height: 1.38; hyphens: manual; }
.keks-klein { max-width: 40ch; margin-top: 1rem; color: var(--text-2); }
.keks-buehne { grid-column: 7 / 13; display: grid; place-items: center; padding: clamp(2.5rem, 5vw, 4.5rem) 0; background: var(--raster); overflow: clip; }
.keks-geraet { position: relative; }
/* Die Bühne ist Dekoration (aria-hidden): unsichtbare Lagen wie das Banner vor seinem Auftritt dürfen nichts abfangen */
.keks-buehne, .keks-buehne * { pointer-events: none; }

/* Das Banner ist mit Absicht fremd: Systemschrift, Grau, runde Ecken, Schatten */
.keks-schleier { position: absolute; inset: 0; background: rgb(20 18 16 / 0.5); opacity: 0; }
.keks-banner { position: absolute; left: 0.8em; right: 0.8em; bottom: 0.8em; padding: 1.15em 1.15em 1.05em; border-radius: 1em; background: #fff; color: #2b2b2b; box-shadow: 0 0.6em 2em rgb(0 0 0 / 0.3); font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 0.92em; line-height: 1.35; opacity: 0; }  /* taste-skill-ignore: das fremde Cookie-Banner schwebt über der Seite */
.keks-banner p { hyphens: manual; }
.kb-kopf { display: flex; align-items: center; gap: 0.7em; }
.kb-kopf img { width: 3.6em; height: auto; }
.kb-titel { font-size: 1.15em; font-weight: 700; }
.kb-text { margin-top: 0.6em; color: #5b5b5b; font-size: 0.86em; }
.kb-knoepfe { display: grid; gap: 0.45em; margin-top: 0.95em; }
.kb-knoepfe span { display: grid; place-items: center; min-height: 2.7em; border-radius: 0.6em; font-weight: 600; }
.kb-ja { background: #3a3a3a; color: #fff; }
.kb-nein { background: #ececec; color: #3a3a3a; }
.keks-scherbe { opacity: 1; box-shadow: none; }  /* taste-skill-ignore: hebt den Schatten auf */
.keks-krume { position: absolute; border-radius: 42% 58% 50% 46%; background: url('../img/keks-240.webp') 50% 50% / 14em auto no-repeat; }

.keks-stempel { position: absolute; right: -5.6rem; bottom: 3%; width: clamp(7rem, 10vw, 9rem); aspect-ratio: 1; color: var(--tinte); transform: rotate(-12deg); }
.keks-stempel svg { width: 100%; height: 100%; overflow: visible; }
.keks-stempel text { fill: currentColor; font-family: var(--font); }
.bw-keks.wartet .keks-stempel { opacity: 0; }

@media (max-width: 63.99em) {
  .bw-keks { grid-template-columns: 1fr; }
  .keks-text, .keks-buehne { grid-column: 1; }
  .keks-buehne { margin: 2.5rem calc(var(--margin) * -1) 0; }
}
@media (max-width: 47.99em) {
  .handy { width: min(15rem, 62vw); }
  .keks-stempel { right: -3.6rem; width: 6.5rem; }
}

/* ---------- Idee 2: Nach Ladenschluss ---------- */
.bw-laden { position: relative; }
.laden-buehne { position: relative; height: 100svh; min-height: 38rem; max-height: 62rem; overflow: clip; background: var(--raster); }
.laden-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.laden-satz { position: absolute; z-index: 2; top: var(--margin); left: var(--margin); max-width: 10em; font-size: var(--step-head); line-height: 1.12; rotate: -2deg; }
.laden-satz span { padding: 0.04em 0.2em 0.1em; background: var(--papier); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Türschild an einer Schnur, zwei Seiten */
.laden-schild { position: absolute; z-index: 2; top: 0; left: 62%; width: clamp(11rem, 17vw, 15rem); transform-origin: 50% 0; }
.schild-schnur { display: block; width: 100%; height: auto; overflow: visible; }
.schild-schnur path { fill: none; stroke: var(--text); stroke-width: 2.5; }
.schild-schnur circle { fill: var(--text); }
.schild-karte { position: relative; display: grid; margin-top: -2px; transform-style: preserve-3d; transform: rotateY(180deg); }
.schild-seite { grid-area: 1 / 1; display: grid; place-items: center; padding: 0.55em 0.4em 0.65em; background: var(--papier); color: var(--tinte); font-size: clamp(1.5rem, 2.4vw, 2.1rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.schild-seite small { display: block; margin-top: 0.35em; font-size: 0.42em; font-weight: 500; letter-spacing: 0; color: var(--text-2); }
.schild-hinten { background: var(--tinte); color: var(--auf-tinte); transform: rotateY(180deg); }
.schild-hinten small { color: var(--auf-tinte-2); }
.bw-laden.wartet .schild-karte { transform: none; }

/* Uhr als Etikett: die Ziffern rollen von 17:59 auf 18:00 */
.laden-uhr { position: absolute; z-index: 2; top: clamp(9rem, 26svh, 15rem); left: calc(62% + clamp(11rem, 17vw, 15rem) + 1.5rem); display: flex; padding: 0.1em 0.25em 0.14em; background: var(--tinte); color: var(--auf-tinte); font-size: clamp(1.6rem, 2.6vw, 2.4rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums lining-nums; rotate: 3deg; }
.uhr-stelle { display: block; height: 1.1em; overflow: hidden; }
.uhr-rolle { display: grid; transform: translateY(-50%); }
.bw-laden.wartet .uhr-rolle { transform: none; }

.laden-handy { position: absolute; z-index: 3; right: clamp(1.5rem, 8vw, 9rem); bottom: -3.5rem; }
.bw-laden.wartet .laden-handy { transform: translateY(120%); }
.laden-handy .mini-titel { font-size: 2.1em; }
.knopf-vorher { opacity: 0; }
.bw-laden.wartet .knopf-vorher { opacity: 1; }
.bw-laden.wartet .knopf-nachher { opacity: 0; }

.laden-notiz { position: absolute; z-index: 2; left: var(--margin); bottom: var(--margin); max-width: 34ch; padding: 1rem 1.25rem 1.1rem; background: var(--papier); color: var(--text); line-height: 1.45; }
.laden-notiz .bw-nochmal { margin-top: 0.75rem; }

@media (max-width: 47.99em) {
  .laden-buehne { height: 86svh; min-height: 34rem; }
  .laden-satz { font-size: 2.1rem; max-width: 8em; }
  /* unter der Überschrift, wie an einem Saugnapf an der Glastür */
  .laden-schild { top: 11.5rem; left: auto; right: 1.25rem; width: 9.5rem; }
  .laden-uhr { top: auto; bottom: 46%; left: var(--margin); font-size: 1.5rem; }
  .laden-handy { right: 50%; translate: 50% 0; bottom: -4rem; }
  .laden-handy .handy { width: 13rem; }
  .laden-notiz { position: static; max-width: none; margin: 0; padding: 1.25rem var(--margin) 0; background: none; }
}

/* ---------- Idee 3: Frisch gesetzt ---------- */
.bw-satz { padding: var(--section) var(--margin); }
.satz-buehne { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: clamp(26rem, 66svh, 42rem); background: var(--raster); }
.satz-kasten { position: relative; overflow: hidden; }
.satz-kasten img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Kein Abschneiden: die Lettern fliegen aus dem Setzkasten herüber */
.satz-tisch { position: relative; display: grid; align-content: center; justify-items: center; gap: clamp(2rem, 6svh, 3.5rem); padding: clamp(2rem, 4vw, 3.5rem) var(--margin); }

/* Die Zeile im Winkelhaken: Lettern aus Papier, Bild in der Druckfarbe, spiegelverkehrt wie echter Satz */
.satz-zeile { position: relative; display: flex; align-items: flex-end; gap: 0.04em; padding: 0 0.12em 0.14em; font-size: clamp(0.95rem, 2.9vw, 2.8rem); font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.satz-zeile::before { content: ''; position: absolute; left: -0.18em; bottom: 0; width: 0.14em; height: 1.55em; background: var(--text-2); }
.satz-zeile::after { content: ''; position: absolute; left: -0.18em; right: -0.05em; bottom: -0.12em; height: 0.12em; background: var(--text-2); }
.sorte { display: block; padding: 0.06em 0.03em 0.12em; background: var(--papier); }
.sorte > span { display: block; transform: scaleX(-1); color: var(--tinte); }
.sorte-leer { width: 0.28em; height: 0.8em; }
.bw-satz.wartet .sorte { opacity: 0; }
.bw-satz.wartet .sorte > span { color: var(--text-2); }
.satz-walze { position: absolute; top: -0.25em; bottom: -0.05em; left: 0; width: 0.5em; background: var(--tinte); opacity: 0; }

/* Der Abzug: ein Bogen Papier, darauf der Druck mit leicht unruhigen Kanten */
/* Der Bogen ist breiter als die Zeile, damit er sie beim Andrücken ganz bedeckt */
.satz-bogen { padding: 0.55em 1.6em 0.6em; background: var(--papier); font-size: clamp(0.95rem, 2.9vw, 2.8rem); text-align: center; }
.satz-druck { color: var(--tinte); font-size: 1em; font-weight: 800; line-height: 1; letter-spacing: -0.02em; filter: url(#druck-farbe); }
.satz-unter { margin-top: 0.7rem; color: var(--text-2); font-size: var(--step-small); }
.bw-satz.wartet .satz-druck, .bw-satz.wartet .satz-unter { opacity: 0; }

.satz-text { max-width: 44ch; margin-top: 2rem; font-size: var(--step-lead); line-height: 1.38; hyphens: manual; }

/* ---------- Übersichtsseite der Ideen (bewegung.html, nicht für den Server) ---------- */
.galerie-kopf { padding: clamp(2rem, 6vw, 5rem) var(--margin) var(--section); }
.galerie-titel { font-size: var(--step-display); line-height: 0.88; letter-spacing: -0.045em; }
.galerie-einleitung { max-width: 46ch; margin-top: 2rem; font-size: var(--step-lead); line-height: 1.38; hyphens: manual; }
.galerie-liste { display: grid; gap: 1.25rem; max-width: 62ch; margin-top: 2.5rem; padding-left: 1.4em; }
.galerie-liste a { color: var(--tinte); font-weight: 650; }
.idee { padding: 0 var(--margin); color: var(--text-2); font-size: var(--step-small); }
.idee strong { color: var(--tinte); }
.idee + .bw-keks { padding-top: 1.5rem; }
.idee + .bw-satz { padding-top: 1.5rem; }
.idee-laden { padding-top: var(--section); padding-bottom: 1.5rem; }
.idee-satz { padding-top: var(--section); }

@media (max-width: 47.99em) {
  .satz-buehne { grid-template-columns: 1fr; }
  .satz-kasten { aspect-ratio: 16 / 10; }
  .satz-tisch { min-height: 20rem; }
}