/* Kontakt: der Bon aus der Kasse und das Türschild an der Kordel.
   Ausgelagert aus werkstatt.css (dort bleiben Über uns + Kasse). */
/* ---------- Der Bon ---------- */
/* Ein Kassenbon aus der alten Lade: Thermodruck auf Rollenpapier, oben
   und unten mit Abrisskante. Gesetzt in Schreibmaschine; das Gedruckte
   trägt ein feines Zeilenraster wie vom Thermokopf. Papier auf .bon,
   Druck in .bon__druck — so färbt der Raster nur die Schrift. */
.bon {
  --bon-papier: #fcf9f2;
  --bon-tinte: #2f2620;
  --bon-tinte-leise: #6a5b50;
  position: relative;
  max-width: 440px;
  margin-inline: auto;
  padding: 30px 30px 26px;
  /* Papier mit Gebrauchsspuren — aus der Lade, nicht frisch von der
     Rolle. bon-knick.svg (assets/img/) = zwei Falten mit Schattenband
     und hellem Grat, leicht wellig. Darunter Glanzbahn, Papierkorn,
     leicht angegilbte Ränder. (Flecken/Griffstellen bewusst raus —
     Abra, 18.08.: nur Falten, kein Schmutz.) */
  background:
    url("../img/bon-knick.svg") center / 100% 100% no-repeat,
    radial-gradient(130% 100% at 50% 50%, transparent 58%, rgba(150, 118, 76, 0.08) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.035) 0%, transparent 18%, transparent 82%, rgba(0, 0, 0, 0.035) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23p)' opacity='0.07'/%3E%3C/svg%3E"),
    var(--bon-papier);
  background-blend-mode: normal, multiply, normal, multiply, normal;
  color: var(--bon-tinte);
  box-shadow: 0 24px 40px -20px rgba(0, 0, 0, 0.7), 0 2px 4px rgba(0, 0, 0, 0.25);
  transform: rotate(-0.6deg);
}
@media (min-width: 840px) {
  .bon { margin-top: 8px; }  /* sitzt direkt unter der Kasse */
}
.bon::before,
.bon::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 10px;
  background:
    linear-gradient(-45deg, transparent 7px, var(--bon-papier) 0) 0 0 / 14px 100% repeat-x,
    linear-gradient(45deg, transparent 7px, var(--bon-papier) 0) 0 0 / 14px 100% repeat-x;
}
.bon::before { top: -10px; transform: scaleY(-1); }
.bon::after { bottom: -10px; }

/* Eingang: der Bon rutscht heraus — vorher (wartet) steckt er noch im
   Drucker, sonst stünde er da und würde beim Startschuss zurückspringen */
.bon.wartet { opacity: 0; }
.bon.ist-da { animation: bon-kommt 0.9s var(--kurve) both; }
@keyframes bon-kommt {
  from { transform: translateY(-40px) rotate(-0.6deg); opacity: 0; }
  to   { transform: translateY(0) rotate(-0.6deg); opacity: 1; }
}

/* Das Gedruckte: Schreibmaschine, Tinte nicht ganz schwarz. Zwei Masken
   übereinander (Kind × Eltern multipliziert sich von selbst):
   – auf .bon__druck senkrechte Schlieren — Rauschen mit hoher Frequenz
     quer, fast keiner längs: der Thermokopf hat müde Elemente, die
     Dichte schwankt in Bahnen (Alpha 0,66–1);
   – auf jedem Kind das 3-px-Zeilenraster der Druckzeilen. */
.bon__druck {
  font-family: var(--schrift-bon);
  font-size: 1.0625rem;
  line-height: 1.45;
  letter-spacing: 0.01em;
  --schlieren: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='s' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55 0.004' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.34 0.66'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23s)'/%3E%3C/svg%3E");
  -webkit-mask-image: var(--schlieren);
  mask-image: var(--schlieren);
  -webkit-mask-size: 320px 320px;
  mask-size: 320px 320px;
}
.bon__druck > * {
  -webkit-mask-image: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.98) 0 1px, rgba(0, 0, 0, 0.8) 1px 2px, rgba(0, 0, 0, 0.92) 2px 3px);
  mask-image: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.98) 0 1px, rgba(0, 0, 0, 0.8) 1px 2px, rgba(0, 0, 0, 0.92) 2px 3px);
}
/* Getippte Trennzeilen statt Linien */
.bon__kopf::after,
.bon__zusagen::before,
.bon__dank::before {
  content: "- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -";
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--bon-tinte-leise);
}
.bon__kopf::after { margin-top: 10px; }
.bon__zusagen::before,
.bon__dank::before { margin-bottom: 12px; }

/* Bon-Kopf: wie der Aufdruck oben auf der Rolle — Versalien, gesperrt */
.bon__kopf {
  margin: 0 0 8px;
  font-size: 1.05rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
}
.bon__kopf span {
  display: block;
  margin-top: 4px;
  font-family: var(--schrift-bon-klein);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--bon-tinte-leise);
}
/* Ort links, Bon-Nummer rechts — wie Datum und Bon-Nr. auf dem Zettel */
.bon__zeile {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 var(--raum-3);
  font-family: var(--schrift-bon-klein);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bon-tinte-leise);
}
.bon__nr b { font-weight: 700; color: var(--bon-tinte); }
.bon__adresse {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.4;
}
.bon__klein {
  display: block;
  margin-top: 6px;
  font-family: var(--schrift-bon-klein);
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--bon-tinte-leise);
}
.bon__telefon {
  display: block;
  margin-top: var(--raum-3);
  font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: 0.04em;
  color: var(--bon-tinte);
}
.bon__telefon:hover { text-decoration: underline; text-underline-offset: 6px; }
.bon__zusagen {
  margin: var(--raum-3) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  font-size: 1.05rem;
  line-height: 1.4;
}
.bon__zusagen li::before { content: "* "; color: var(--bon-tinte-leise); }
.bon__wege {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--raum-3);
}
/* Die Wege sind Links, aber auf dem Bon getippt: eckige Klammern statt Knopf */
.bon .knopf--leise {
  padding: 12px 14px;
  font-family: var(--schrift-bon-klein);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--bon-tinte);
  background: transparent;
  border: 1.5px dashed rgba(47, 38, 32, 0.45);
  border-radius: 3px;
}
.bon .knopf--leise:hover { border-color: var(--bon-tinte); border-style: solid; }
.bon__dank {
  margin-top: var(--raum-3);
  font-family: var(--schrift-bon-klein);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--bon-tinte-leise);
}


/* ---------- Das Türschild ---------- */
/* Wie an der Glastür: ein Schild an der Kordel. Beim Reinscrollen
   pendelt es kurz — und dreht sich auf „Geöffnet", wenn offen ist. */
.tuerschild {
  position: relative;
  width: 300px;   /* schmal und hoch, wie ein Schild an der Glastür */
  margin: var(--raum-2) 0 0 24px;
  padding-top: 70px;
}
.tuerschild__haken {
  position: absolute;
  top: 0;
  left: 50%;
  width: 14px;
  height: 14px;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 3px solid #b8bec7;
  border-bottom-color: transparent;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.tuerschild__koerper {
  position: relative;
  transform-origin: 50% -62px;
  perspective: 900px;
}
/* Eingang: schwingt an der Kordel aus */
.tuerschild.ist-da .tuerschild__koerper {
  animation: schild-pendelt 2.4s cubic-bezier(0.3, 0.6, 0.3, 1) both;
}
@keyframes schild-pendelt {
  0%   { transform: rotate(-6deg); }
  35%  { transform: rotate(3.5deg); }
  65%  { transform: rotate(-1.5deg); }
  100% { transform: rotate(0deg); }
}
/* Die Kordel: zwei Fäden vom Haken zu den Ösen */
.tuerschild__kordel {
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 0;
  height: 62px;
}
.tuerschild__kordel::before,
.tuerschild__kordel::after {
  content: "";
  position: absolute;
  top: 0;
  left: -1px;
  width: 2px;
  height: 138px;
  background: var(--faden-hell);
  transform-origin: 50% 0;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.45);
}
.tuerschild__kordel::before { transform: rotate(63deg); }
.tuerschild__kordel::after  { transform: rotate(-63deg); }

.tuerschild__flip {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1.3s cubic-bezier(0.4, 0, 0.2, 1) 0.9s;
}
.tuerschild.ist-da.ist-offen .tuerschild__flip {
  transform: rotateY(180deg);
}
.tuerschild__seite {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 46px 26px 42px;
  background: linear-gradient(180deg, #f6f0e4 0%, #ebe3d3 100%);
  color: var(--tinte);
  text-align: center;
  border-radius: 12px;
  outline: 1.5px dashed rgba(74, 44, 24, 0.4);
  outline-offset: -9px;
  box-shadow: 0 22px 34px -18px rgba(0, 0, 0, 0.75), 0 2px 4px rgba(0, 0, 0, 0.3);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.tuerschild__seite--offen {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
}
.tuerschild__oese {
  position: absolute;
  top: 12px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #f2f4f6 0%, #b8bec7 45%, #6c737d 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.tuerschild__oese::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--seide);
}
.tuerschild__oese--l { left: 26px; }
.tuerschild__oese--r { right: 26px; }
/* Das Wort ist das ganze Schild: die ruhige Antiqua des Hauses, wie
   gemalt aufs Emaille-Schild — nicht die Schreibmaschine, die gehört
   dem Bon (Abra, 20.08.: zurück zur Antiqua, Schildmaße bleiben).
   Die genähte Schrift des Hauses geht hier nicht: der Glyphensatz
   kennt nur die Buchstaben aus „Verflixt und zugenäht". */
.tuerschild__wort {
  font-family: var(--schrift-serif);
  font-size: 2.1rem;
  line-height: 1.1;
  color: var(--tinte-leise);
}
.tuerschild__seite--offen .tuerschild__wort {
  color: var(--akzent);
}
.tuerschild__detail {
  font-size: var(--t-klein);
  color: var(--tinte-leise);
}
.tuerschild__zeiten {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px dashed rgba(74, 44, 24, 0.35);
  display: grid;
  gap: 5px;
  font-size: var(--t-klein);
  white-space: nowrap;
  line-height: 1.35;
  color: var(--tinte-leise);
}
.tuerschild__zeiten b {
  font-weight: 600;
  color: var(--tinte);
}
.tuerschild .nur-entwurf {
  margin: 12px 0 0;
  text-align: center;
}
@media (max-width: 839px) {
  .tuerschild { margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .tuerschild__flip { transition: none; }
}