/* Hood Barber – Abschnitte der Startseite */

.abschnitt {
  padding: 48px var(--rand);
}

.abschnitt__innen {
  max-width: 720px;
  margin: 0 auto;
}

/* Platzhalter für Abschnitte, die noch gebaut werden */
.baustelle {
  min-height: 40vh;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--sandstein);
  color: var(--grau);
  font: 700 11px/1.4 'Inter Tight', sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
}

/* Hero H3 – Turm hinter dem Titel. Bild gemalt (Gemini), in Ebenen: Himmel, Gebäude, Vordergrund */
.hero {
  --himmel-oben: #A3B5C3;
  --himmel-unten: #C4CED1;
  --himmel-bis: 57%;
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: var(--himmel-oben);
  border-bottom: 2px solid var(--schwarz);
}

.hero__bild,
.hero__ebene {
  position: absolute;
  inset: 0;
}

.hero__ebene--himmel {
  background: linear-gradient(var(--himmel-oben), var(--himmel-unten) var(--himmel-bis));
}

/* Reserve rundum für die Tiefe (Ebenen verschieben sich bei Maus/Neigen um bis zu 20 px) */
.hero__ebene--gebaeude,
.hero__ebene--vordergrund,
.hero__ebene--schatten { inset: -24px; }

/* Stuhl und Schatten erst zeigen, wenn der Stuhl fällt (W1) */
.hero--auftritt:not(.hero--gelandet) .hero__stuhl-knopf img,
.hero--auftritt:not(.hero--gelandet) .hero__ebene--schatten picture { opacity: 0; }

/* Handy: Bild endet über dem festen Termin-Knopf, damit der Stuhl nicht verdeckt wird.
   Darunter die Grasfarbe vom unteren Bildrand. */
@media (max-width: 767px) {
  .hero { background: #37422C; }
  .hero__bild { bottom: calc(var(--fixknopf-hoehe) + 24px); }
}

/* Alle Ebenen haben dieselbe Bildgrösse: gleiches Zuschneiden hält sie deckungsgleich */
.hero__ebene picture,
.hero__ebene img {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__ebene img {
  object-fit: cover;
  object-position: 50% 100%;
}

@media (min-width: 768px) {
  .hero {
    --himmel-oben: #A4B6C5;
    --himmel-unten: #BEC7CB;
    --himmel-bis: 55%;
  }
}

/* Auftritt (Paket C). Ohne JS oder mit „Bewegung reduzieren“ bleibt alles stehen.
   Die Dauer-Animation wird in Schritt 3 neu gebaut. */
/* Vorschau: winziges, unscharfes Gesamtbild, sofort da. Nach dem Laden ausgeblendet. */
.hero__ebene--himmel::after {
  content: "";
  position: absolute;
  inset: -24px;
  background: url("data:image/webp;base64,UklGRpYDAABXRUJQVlA4WAoAAAAgAAAAFwAAKgAASUNDUMgBAAAAAAHIAAAAAAQwAABtbnRyUkdCIFhZWiAH4AABAAEAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAACRyWFlaAAABFAAAABRnWFlaAAABKAAAABRiWFlaAAABPAAAABR3dHB0AAABUAAAABRyVFJDAAABZAAAAChnVFJDAAABZAAAAChiVFJDAAABZAAAAChjcHJ0AAABjAAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEJYWVogAAAAAAAAb6IAADj1AAADkFhZWiAAAAAAAABimQAAt4UAABjaWFlaIAAAAAAAACSgAAAPhAAAts9YWVogAAAAAAAA9tYAAQAAAADTLXBhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACAAAAAcAEcAbwBvAGcAbABlACAASQBuAGMALgAgADIAMAAxADZWUDggqAEAANAIAJ0BKhgAKwA+tVSjTackoyIlaZjgFolAFqNuVOBTnacE+U/5DoG83eoL0h0yRLeNPGER04i4FDc/bVNLwA7gs3XPgwSkmArB5hSldwAA/u02lSd/bmXp8AB0bWj0p5EdLlyUPqPnJN1b0wfQn9nYhVXZGxiQMUJPxxJKh+mq0e8ADTI4qmZP8buhf8ZeofmKHdeWPvk/uaodrKn5GcKFrnMY3X7ouVvVUXdS1R+Myt4zjEMWPUNMvrP+HkPjU3O5h64ikbQyO4VsqWQjD643CbEOiauvz8aXSzZm073Vna5iz9HbfXnuWnfV5U9wFAR+vs5D0B9q6lrGBGz4SgDH65r9YJbLFkrMYlZwrMoD09baV4dY91KQSqo+2nwbuKRtLFkf6uX8tlihzWnH59QkUdrHQmnx3Yle1QAwZYf6CreJscv9PDvSrTh2gS7tV1JmjTnWtR/B17OqdhiPE4K5zfs2GG8X0Ra2sg3UTFib7KKyRRT+p/C1I3iNgWQU22o1WzhzW4ctndfpnRrDALLDI9W9P3hNIUxwAbPXF8Jk416r1d4AAAA=") 50% 100% / cover no-repeat;
  filter: blur(12px);
  transition: opacity .6s ease-out;
}
@media (min-width: 768px) {
  .hero__ebene--himmel::after { background-image: url("data:image/webp;base64,UklGRhIDAABXRUJQVlA4WAoAAAAgAAAAJwAAFQAASUNDUMgBAAAAAAHIAAAAAAQwAABtbnRyUkdCIFhZWiAH4AABAAEAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAACRyWFlaAAABFAAAABRnWFlaAAABKAAAABRiWFlaAAABPAAAABR3dHB0AAABUAAAABRyVFJDAAABZAAAAChnVFJDAAABZAAAAChiVFJDAAABZAAAAChjcHJ0AAABjAAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEJYWVogAAAAAAAAb6IAADj1AAADkFhZWiAAAAAAAABimQAAt4UAABjaWFlaIAAAAAAAACSgAAAPhAAAts9YWVogAAAAAAAA9tYAAQAAAADTLXBhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACAAAAAcAEcAbwBvAGcAbABlACAASQBuAGMALgAgADIAMAAxADZWUDggJAEAABAHAJ0BKigAFgA+tUqbSqckIiGwFV1Q4BaJZQC2yy6eAGlQZ8IIJshMaK6YhT7RbW2sLDwyDjxDb7PgSx2tlElgAP7ebzYFOHWxzLJJCp0CjVeKmVWyXoUIBx2KqPr17LrDTgGKIQPEEMWlJTS0/ZsbTG5OZMx21x/iKDV1LgH/kOKIypNgLb9nvNcXFXqq+laAkPQxUXyHavxAAX4giKsyXnY2fEoTr64XYX4ZSjjOU4onLyUbCk14yDcoKHnIqRxCaL2dx0EduiRwCh9ZXzlG+wIbdaGiyFWxQTfcZ/U/heGyysPEZtJLbF+bXFCNG1Qd02fjr8Y73HR7553GGlEqfGq9YDbmW1bzB0XJZ3BSJBxOMp1rD5tdyjMEoWmvIAgUAAA="); }
}
.hero--bereit .hero__ebene--himmel::after { opacity: 0; }

/* Mit JS: Ebenen erst zeigen, wenn die Bilder geladen sind (vorher steht die Vorschau). */
.js .hero:not(.hero--bereit) .hero__ebene--gebaeude,
.js .hero:not(.hero--bereit) .hero__ebene--vordergrund,
.js .hero:not(.hero--bereit) .hero__ebene--schatten,
.js .hero:not(.hero--bereit) .hero__titel,
.js .hero:not(.hero--bereit) .standort { visibility: hidden; }
/* Ohne Animation (Bewegung reduzieren) sofort alles zeigen */
@media (prefers-reduced-motion: reduce) {
  .js .hero:not(.hero--bereit) .hero__titel,
  .js .hero:not(.hero--bereit) .standort { visibility: visible; }
}

/* Auftritt B · Kamerafahrt (Mattia, 24.10.2026): alles da, die Szene zoomt heraus,
   der Vordergrund stärker als der Turm – das gibt Tiefe. Nichts wird durchsichtig. */
.hero--auftritt .hero__ebene--gebaeude    { transform-origin: 50% 100%; animation: hero-zoom 2.2s cubic-bezier(.2,.7,.2,1) both; }
/* Stuhl und Schatten stehen auf der Wiese: gleiche Bewegung wie der Vordergrund.
   Beim Stuhl-Knopf setzt hero.mjs den Drehpunkt auf die Bildmitte unten. */
.hero--auftritt .hero__ebene--vordergrund,
.hero--auftritt .hero__ebene--schatten { transform-origin: 50% 100%; animation: hero-zoom-nah 2.2s cubic-bezier(.2,.7,.2,1) both; }
.hero--auftritt .hero__stuhl-knopf { animation: hero-zoom-nah 2.2s cubic-bezier(.2,.7,.2,1) both; }
@keyframes hero-zoom { from { transform: scale(1.08); } }
@keyframes hero-zoom-nah { from { transform: scale(1.22); } }

.hero--auftritt .standort            { animation: hero-ein .6s ease-out .6s both; }
.hero--auftritt .hero__titel .laut   { animation: hero-titel .7s cubic-bezier(.2,.8,.2,1) .7s both; }
.hero--auftritt .hero__titel .fr     { animation: hero-fr .9s cubic-bezier(.2,.8,.2,1) .95s both; }

@keyframes hero-ein { from { opacity: 0; } }
@keyframes hero-titel { from { transform: translateY(-30px); opacity: 0; } }
@keyframes hero-fr { from { transform: translateX(-18px) skewX(-8deg); opacity: 0; } }

.hero__titel {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: max(68px, calc(env(safe-area-inset-top) + 56px)) var(--rand) 0;   /* Platz für das Standort-Schild */
  text-align: center;
  font-weight: 400;
}

.hero__titel .laut { display: block; font-size: clamp(56px, 17vw, 132px); }
.hero__titel .fr { display: block; font-size: clamp(54px, 16.5vw, 128px); }

/* Der Stuhl (einzeln gemalt, 2,5D) als Knopf; Lage und Grösse aus hero.mjs */
.hero__stuhl-knopf {
  position: absolute;
  z-index: 2;
  display: none;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hero__stuhl-knopf.ist-platziert { display: block; }
.hero__stuhl-knopf img { display: block; width: 100%; height: auto; transform-origin: 50% 100%; }
.hero__stuhl-knopf:focus-visible { outline: 3px solid var(--weiss); outline-offset: 4px; }

/* Standort-Schild P3: schwarz wie der Termin-Knopf, Anton, oben rechts; Tipp öffnet Maps */
.standort {
  position: absolute;
  z-index: 3;
  top: max(14px, env(safe-area-inset-top));
  right: var(--rand);
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 6px 8px 6px 14px;
  border-radius: 999px;
  background: var(--schwarz);
  color: var(--himmel);
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.standort__ort {
  color: var(--weiss);
  font: 400 15px/1 'Anton', 'Impact', sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.standort__pfeil {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--himmel);
  color: var(--schwarz);
  font: 800 13px/1 'Inter Tight', sans-serif;
  transition: transform .2s ease-out;
}
.standort:active .standort__pfeil { transform: scale(.9); }
@media (hover: hover) {
  .standort:hover .standort__pfeil { transform: translate(2px, -2px); }
}
.standort:focus-visible { outline: 3px solid var(--weiss); outline-offset: 3px; }

@media (min-width: 768px) {
  .standort { top: 24px; right: 24px; }
  .hero__titel { padding-top: 88px; }
}

/* Footer FA – Plakat-Schluss */
.fuss {
  background: var(--schwarz);
  color: var(--weiss);
  padding: 40px var(--rand) calc(var(--fixknopf-hoehe) + 48px);
}

.fuss__innen {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.fuss__marke {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 14px;
  margin: 0;
  color: inherit;
  text-decoration: none;
}

.fuss__stuhl {
  width: clamp(56px, 16vw, 84px);
  height: auto;
  flex: none;
}

.fuss__wort { display: block; text-align: left; }
.fuss__wort .laut { display: block; font-size: clamp(58px, 17vw, 96px); }
.fuss__wort .fr { display: block; font-size: clamp(48px, 14vw, 80px); }

.fuss__linie {
  height: 1px;
  background: #3A3A38;
  margin: 24px 0 16px;
  border: 0;
}

.fuss__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fuss__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;   /* Tippfläche (Stresstest 25.10.) */
  padding: 0 4px;
  color: var(--himmel);
  text-decoration: none;
}

.fuss__links a:hover { color: var(--weiss); }

.fuss__signatur {
  margin-top: 20px;
  color: var(--grau);
}

.fuss__signatur a { text-decoration: none; }

/* Leichter Effekt auf Titel und Knöpfen (Mattia, 24.10.2026: E1 + E3).
   Titel: weicher Schatten und hauchdünner Druckversatz wie beim Plakat.
   Knöpfe: Unterkante wie eine Taste plus weicher Schatten; beim Drücken sinken sie ein. */
.hero__titel { text-shadow: 2px 2px 0 rgb(30 30 28 / .14), 0 2px 14px rgb(30 30 28 / .16); }

.knopf,
.standort {
  box-shadow: 0 3px 0 #0b0b0a, 0 8px 16px rgb(0 0 0 / .18);
  transition: transform .08s ease-out, box-shadow .08s ease-out;
}
.knopf:active,
.standort:active { transform: translateY(2px); box-shadow: 0 1px 0 #0b0b0a, 0 3px 8px rgb(0 0 0 / .18); }
/* Der feste Termin-Knopf behält seinen hellen Ring als Abstand zum Bild */
.knopf--fix { box-shadow: 0 0 0 2px var(--papier), 0 4px 0 2px #0b0b0a, 0 10px 20px rgb(0 0 0 / .2); }
.knopf--fix:active { transform: translateY(2px); box-shadow: 0 0 0 2px var(--papier), 0 2px 0 2px #0b0b0a; }
@media (prefers-reduced-motion: reduce) {
  .knopf, .standort { transition: none; }
}

/* T3 · Der Stuhl redet (Mattia, 24.10.2026): Sprechblase oben rechts am Stuhl, erscheint nach dem Fall */
.hero__blase {
  position: absolute;
  left: 62%;
  bottom: 100%;
  margin-bottom: 4px;
  padding: 7px 11px;
  border-radius: 14px 14px 14px 3px;
  background: var(--papier);
  color: var(--schwarz);
  font: 700 13px/1.2 'Inter Tight', system-ui, sans-serif;
  white-space: nowrap;
  box-shadow: 0 2px 0 rgb(0 0 0 / .22), 0 6px 14px rgb(0 0 0 / .16);
  transform-origin: 0 100%;
  pointer-events: none;
}
/* Mit Animation: erst nach der Landung, mit kleinem Aufploppen */
.hero--auftritt:not(.hero--blase) .hero__blase { opacity: 0; transform: scale(.6); }
.hero--blase .hero__blase { animation: blase-auf .35s cubic-bezier(.23, 1, .32, 1) both; }
@keyframes blase-auf { from { opacity: 0; transform: scale(.6); } }
@media (min-width: 768px) {
  .hero__blase { font-size: 15px; padding: 8px 13px; }
}/* Schmale Handys: Blase links vom Stuhl, sonst ragt sie über den Rand */
@media (max-width: 379px) {
  .hero__blase { left: auto; right: 62%; border-radius: 14px 14px 3px 14px; transform-origin: 100% 100%; }
}

/* Übergang Hero → Termine (Mattia, 25.10.2026): keine Linie, kein hartes Band.
   Das Gras läuft weich ins Himmelblau des Termin-Abschnitts über. */
.hero { border-bottom: 0; }
.hero::after {
  content: '';
  position: absolute;
  z-index: 1;
  left: 0; right: 0; bottom: 0;
  height: 90px;
  background: linear-gradient(rgb(185 199 207 / 0), var(--himmel));
  pointer-events: none;
}
@media (max-width: 767px) {
  .hero { background: linear-gradient(#37422C calc(100% - var(--fixknopf-hoehe) - 24px), var(--himmel)); }
  .hero::after { display: none; }
  /* Bild läuft unten weich ins Gras-Band aus statt mit harter Kante.
     overflow: die Tiefen-Reserve der Ebenen (24 px) darf unten nicht unter dem Verlauf hervorschauen. */
  .hero__bild { overflow: hidden; }
  .hero__bild::after {
    content: '';
    position: absolute;
    z-index: 1;
    left: 0; right: 0; bottom: 0;
    height: 70px;
    background: linear-gradient(rgb(55 66 44 / 0), #37422C);
    pointer-events: none;
  }
}

/* Termine V2 · Nummere-Automat (Mattia, 25.10.2026): Billett-Stapel je Gruppe,
   Popout mit Drehrad, am Schluss druckt der Automat das Billett. */
.termine {
  --auf: 1;
  background: var(--himmel);
  scroll-margin-top: 0;
}
.termine__buehne { padding: 40px var(--rand) 56px; }
.termine__innen { max-width: 1080px; margin: 0 auto; }
.termine__titel { margin: 6px 0 18px; font-size: clamp(40px, 12vw, 64px); font-weight: 400; line-height: .9; outline: none; }
.termine__titel .laut, .termine__titel .fr { font-size: inherit; }
.termine__halteweg { display: none; }

/* Handy: Abschnitt bleibt stehen, solange der Stapel auffächert (buchung-ui.mjs setzt --auf) */
.termine--halten .termine__buehne {
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: max(28px, env(safe-area-inset-top));
}
.termine--halten .termine__innen { width: 100%; flex: 1; display: flex; flex-direction: column; }
/* Variante A (Mattia 31.10.2026): Titel oben, Stapel mittig im freien Raum statt Leerfläche unten.
   translate (Auffächern) ändert die Layout-Höhe nicht, deshalb springt nichts. */
.termine--halten .stapel-reihe { margin-block: auto; }
.termine--halten .termine__halteweg { display: block; height: 15svh; }

/* Gruppen-Knöpfe: Herre · Fraue · Bart · Chind */
.gruppen { display: flex; gap: 8px; margin: 0 0 16px; overflow-x: auto; scrollbar-width: none; }
.gruppen::-webkit-scrollbar { display: none; }
.gruppe {
  flex: none;
  min-height: 40px;
  padding: 0 16px;
  border: 1.5px solid var(--schwarz);
  border-radius: 999px;
  background: none;
  color: var(--schwarz);
  font: 700 15px/1 'Inter Tight', sans-serif;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.gruppe[aria-pressed="true"] { background: var(--schwarz); color: var(--weiss); }
.gruppe[hidden] { display: none; }

/* Stapel nebeneinander; am Handy seitlich wischen, ein Stapel pro Breite */
.stapel-reihe {
  display: flex;
  margin: 0 calc(-1 * var(--rand));
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.stapel-reihe::-webkit-scrollbar { display: none; }
.stapel-reihe[hidden] { display: none; }
.stapel {
  isolation: isolate;   /* Ebenen der Billetts bleiben im Stapel */
  flex: 0 0 100%;
  scroll-snap-align: start;
  list-style: none;
  margin: 0;
  padding: 6px var(--rand) 18px;
  display: grid;
  gap: 12px;
  align-content: start;
}
@media (min-width: 900px) {
  .gruppen { display: none; }
  .stapel-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 8px; overflow: visible; margin: 0; }
  .stapel { padding: 6px 0 18px; }
  .stapel::before {
    content: attr(aria-label);
    font: 700 11px/1.3 'Inter Tight', sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--grau);
  }
}

/* Ein Billett: liegt leicht schief; zusammengeschoben überlappen sie wie ein Stapel.
   translate = Auffächern (--auf), rotate = Schieflage und Wackeln (getrennt, damit beides geht). */
.stapel li {
  --schief: -2deg;
  position: relative;
  z-index: calc(500 - var(--i));   /* oberstes Billett vorne; bleibt positiv auch bei vielen Leistungen (Stresstest) */
  /* zusammengeschoben bleibt von jedem Billett der Name sichtbar (Kopf ca. 40 px) */
  translate: 0 calc((1 - var(--auf)) * var(--i) * -50px);
  rotate: calc(var(--schief) * (.4 + .6 * var(--auf)));
}
.stapel li:nth-child(2n) { --schief: 1.5deg; }
.stapel li:nth-child(3n) { --schief: -1deg; }
.stapel li:nth-child(4n) { --schief: 2deg; }

.karte {
  position: relative;
  display: block;
  width: 100%;
  min-height: 78px;
  padding: 14px 64px 14px 20px;
  border: 0;
  border-radius: 8px;
  background: var(--weiss);
  color: var(--schwarz);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 2px 0 rgb(30 30 28 / .08), 0 8px 20px rgb(30 30 28 / .13);
  transition: transform .15s cubic-bezier(.23, 1, .32, 1), box-shadow .15s, opacity .2s;
}
/* gestrichelte Abrisskante links, wie bei einer Wartnummer */
.karte::before {
  content: '';
  position: absolute;
  left: 8px; top: 10px; bottom: 10px;
  border-left: 1.5px dashed var(--sandstein);
}
.karte__nr { position: absolute; right: 14px; top: 50%; translate: 0 -50%; font: 400 32px/1 'Anton', sans-serif; color: var(--sandstein); }
.karte__name { display: block; font-size: 22px; overflow-wrap: anywhere; }
.karte__info { display: block; margin-top: 5px; font-size: 13.5px; color: var(--grau); }
.karte:not(:disabled):hover { transform: translateY(-3px); box-shadow: 0 2px 0 rgb(30 30 28 / .08), 0 14px 28px rgb(30 30 28 / .18); }
.karte:not(:disabled):active { transform: scale(.97); }
.karte:disabled { cursor: default; opacity: .55; }
.karte.ist-weg { opacity: 0; }
.karte:focus-visible { outline: 3px solid var(--schwarz); outline-offset: 3px; }
.ist-am-lade .karte__naechste::after { content: ' · …'; }

/* Oberstes Billett jedes Stapels wackelt ab und zu: „nimm mich“ */
/* Das Wackeln dreht zusätzlich per transform (wirkt auf die Schieflage in rotate obendrauf): feste Werte ohne var(),
   damit es auf der Grafikkarte läuft. Ausser Sicht pausiert es (buchung-ui.mjs setzt ist-im-bild). */
.stapel li:first-child { animation: billett-wackel 6s ease-in-out 2s infinite; }
.js #termine:not(.ist-im-bild) .stapel li:first-child { animation-play-state: paused; }
@keyframes billett-wackel {
  0%, 88%, 100% { transform: none; }
  91% { transform: rotate(-3deg); }
  94% { transform: rotate(2deg); }
  97% { transform: rotate(-1deg); }
}

/* ---------- Popout ---------- */
.popout {
  width: min(380px, calc(100vw - 2 * var(--rand)));
  max-width: none;
  max-height: calc(100svh - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  background: none;
  overflow: visible;
}
.popout::backdrop { background: rgb(30 30 28 / .55); animation: dunkel .25s ease-out both; }
@keyframes dunkel { from { opacity: 0; } }
.popout__karte {
  position: relative;
  max-height: calc(100svh - 32px);
  overflow-y: auto;
  padding: 18px 18px 20px;
  border-radius: 12px;
  background: var(--weiss);
  color: var(--schwarz);
  box-shadow: 0 24px 60px rgb(0 0 0 / .35);
  transform-origin: 0 0;
}
.popout__zue {
  position: absolute;
  top: 8px; right: 8px;
  width: 44px; height: 44px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--grau);
  font-size: 18px;
  cursor: pointer;
}
.popout__name { margin: 4px 0; font-size: 32px; font-weight: 400; }
.popout__info { margin: 0 0 12px; font-size: 14px; color: var(--grau); }
.popout__teil[hidden] { display: none; }
.popout__weiter { width: 100%; margin-top: 14px; }

/* Drehrad wie beim Wecker: zwei Walzen, die Mitte ist gewählt */
.rad {
  position: relative;
  display: flex;
  gap: 8px;
  height: 160px;
  perspective: 600px;
}
/* Spaltentitel und kompakteres Rad: höchstens eine leere Zeile über dem ersten Eintrag (UI/UX-Prüfung) */
.rad__titel { display: flex; gap: 8px; margin: 18px 0 6px; text-align: center; }
.rad__titel span { flex: 1; }
.rad::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 0;
  height: 40px;
  border: 1.5px solid var(--schwarz);
  border-radius: 6px;
  background: var(--papier);
  pointer-events: none;
}
.rad__spalte {
  position: relative;
  flex: 1;
  height: 160px;
  padding: 0 0 120px;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  overscroll-behavior: contain;
  outline: none;
  /* gewählte Zeile steht oben, die nächsten laufen nach unten aus – keine leere Hälfte mehr */
  -webkit-mask-image: linear-gradient(#000 45%, transparent);
          mask-image: linear-gradient(#000 45%, transparent);
}
.rad__spalte::-webkit-scrollbar { display: none; }
.rad__spalte:focus-visible { box-shadow: inset 0 0 0 2px var(--schwarz); border-radius: 6px; }
.rad__eintrag {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
  font: 400 22px/1 'Anton', sans-serif;
  color: var(--schwarz);
  cursor: pointer;
  user-select: none;
}

/* ---------- Formular (im Popout) ---------- */
.billett__zrugg {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-height: 44px;
  margin: 0 0 4px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--grau);
  font: 700 14px/1 'Inter Tight', sans-serif;
  cursor: pointer;
}
.feld { display: block; margin-bottom: 14px; }
.feld input {
  display: block;
  width: 100%;
  min-height: 48px;
  margin-top: 6px;
  padding: 0 12px;
  border: 1.5px solid var(--grau);
  border-radius: 4px;
  background: var(--weiss);
  color: var(--schwarz);
  font: 500 17px/1 'Inter Tight', sans-serif;   /* ≥ 16 px: iOS zoomt sonst */
}
.feld input:focus { outline: 3px solid var(--himmel); outline-offset: 1px; border-color: var(--schwarz); }
.feld--weg { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.billett__senden { width: 100%; margin-top: 4px; }
.billett__senden:disabled { opacity: .6; cursor: progress; }
/* Fehler ohne Rot (nicht in B3): fett, wellig unterstrichen wie eine Korrektur (Entwurf C) */
.billett__fehler { margin: 10px 0 0; font-weight: 700; font-size: 15px; line-height: 1.7; }
.billett__fehler:empty { display: none; }
.billett__fehler:not(:empty) { text-decoration: underline wavy var(--schwarz) 1.5px; text-underline-offset: 5px; text-decoration-skip-ink: none; }

/* ---------- Automat: das Billett wird gedruckt ---------- */
.automat { max-width: 420px; margin: 8px auto 0; }
.automat[hidden] { display: none; }
.automat__schlitz {
  position: relative;
  z-index: 2;
  height: 18px;
  border-radius: 9px;
  background: var(--schwarz);
  box-shadow: inset 0 -5px 0 #0b0b0a, 0 3px 0 rgb(0 0 0 / .15);
}
/* Papier kommt unter dem Schlitz hervor: oben abgeschnitten */
.automat__papier { margin: -9px 0 0; overflow: hidden; padding: 0 14px 34px; }
.billett {
  background: var(--weiss);
  border-radius: 0 0 8px 8px;
  padding: 26px 18px 22px;
  box-shadow: 0 6px 14px rgb(30 30 28 / .12);
}
.billett--fertig { text-align: center; }
.billett__zeit--gross { margin: 10px 0 4px; font-size: clamp(72px, 24vw, 104px); line-height: 1; }
.billett__was { margin: 0; font-size: 22px; }
.billett__riss {
  position: relative;
  margin: 16px -18px;
  border: 0;
  border-top: 1.5px dashed var(--sandstein);
  overflow: visible;
}
.billett__riss::before, .billett__riss::after {
  content: '';
  position: absolute;
  top: -10px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--himmel);
}
.billett__riss::before { left: -9px; }
.billett__riss::after { right: -9px; }
.billett__unterwegs { margin: 0; font-weight: 800; font-size: 17px; }
.billett__klein { margin: 8px auto 0; max-width: 32ch; color: var(--grau); font-size: 14px; line-height: 1.4; }
.automat__nomol {
  display: block;
  margin: 4px auto 0;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  background: none;
  color: var(--schwarz);
  font: 700 14px/1 'Inter Tight', sans-serif;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* Druck: ruckweise heraus (wie ein Bon-Drucker), Schlitz zittert mit, am Schluss fällt
   das Billett ein kleines Stück und liegt schief. Danach erscheint der Text. */
.ist-am-drucke .billett { animation: drucke 1.7s linear both, abriss .45s cubic-bezier(.23, 1, .32, 1) 1.75s both; }
.ist-am-drucke .automat__schlitz { animation: ratter .12s linear 0s 14; }
.ist-am-drucke .billett__unterwegs,
.ist-am-drucke .billett__klein,
.ist-am-drucke .automat__nomol { animation: ein .4s ease-out 2.1s both; }
@keyframes drucke {
  0%   { transform: translateY(-100%); }
  12%  { transform: translateY(-88%); }  20% { transform: translateY(-88%); }
  32%  { transform: translateY(-70%); }  40% { transform: translateY(-70%); }
  52%  { transform: translateY(-50%); }  60% { transform: translateY(-50%); }
  72%  { transform: translateY(-28%); }  80% { transform: translateY(-28%); }
  92%  { transform: translateY(-6%); }
  100% { transform: translateY(0); }
}
@keyframes abriss { from { translate: 0 0; rotate: 0deg; } to { translate: 0 6px; rotate: -1.5deg; } }
@keyframes ratter { 50% { transform: translateX(1px); } }
@keyframes ein { from { opacity: 0; transform: translateY(6px); } }

.termine__meldung {
  margin: 0;
  padding: 18px;
  border-radius: 6px;
  background: var(--weiss);
  font-weight: 700;
  font-size: 17px;
}

/* Fester Termin-Knopf blendet aus, solange der Termin-Abschnitt sichtbar ist */
.knopf--fix { transition: opacity .2s ease-out, transform .2s ease-out, box-shadow .08s ease-out; }
.knopf--fix.ist-weg, .knopf--fix.ist-versteckt { opacity: 0; transform: translateY(12px); pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .knopf--fix, .karte, .gruppe { transition: none; }
  .stapel li:first-child,
  .popout::backdrop,
  .ist-am-drucke .billett, .ist-am-drucke .automat__schlitz,
  .ist-am-drucke .billett__unterwegs, .ist-am-drucke .billett__klein, .ist-am-drucke .automat__nomol { animation: none; }
}

/* Tafel (Mattia, 25.10.2026): schwarz wie die Tafel an der Wand im Laden.
   Fröge & Antworte: nummerierte Fragen mit Punktlinie; beim Öffnen dreht das + zum ×
   und die Antwort erscheint, als würde sie mit Kreide hingeschrieben. */
.tafel {
  background: var(--schwarz);
  color: var(--papier);
  padding: 56px var(--rand) 72px;
}
.tafel__innen { max-width: 1080px; margin: 0 auto; }
.tafel .ueber { color: var(--sandstein); }
.tafel__linie {
  align-self: end;
  min-width: 16px;
  margin-bottom: 8px;
  border-bottom: 2px dotted rgb(244 242 236 / .28);
  transform-origin: 0 50%;
  transition: border-color .2s;
}

.fragen { display: grid; gap: 28px; }
.fragen > * { min-width: 0; }
@media (min-width: 900px) {
  .fragen { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
  .fragen__kopf { position: sticky; top: 32px; }
  /* zweispaltig: Titel nach Spaltenbreite statt Bildschirmbreite, sonst ragt „Antworte.“ bei 1024 px raus */
  .fragen .fragen__titel { font-size: clamp(56px, 6.4vw, 96px); }
}
.fragen__titel { margin: .3em 0 0; font-weight: 400; color: var(--weiss); font-size: clamp(48px, 13vw, 96px); line-height: .9; }
.fragen__titel .laut, .fragen__titel .fr { display: block; font-size: inherit; }
.fragen__titel .fr { color: var(--himmel); }

.frage { border-bottom: 1px solid rgb(244 242 236 / .12); }
.frage summary, .frage--mehr {
  display: grid;
  grid-template-columns: auto 1fr 22px;
  align-items: baseline;
  column-gap: 10px;
  min-height: 56px;
  padding: 14px 0;
  list-style: none;
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}
.frage summary::-webkit-details-marker { display: none; }
.frage__nr { font: 400 15px/1 'Anton', sans-serif; letter-spacing: .04em; color: #77756e; transition: color .2s; }
.frage__text { min-width: 0; font-weight: 600; font-size: 17px; line-height: 1.3; overflow-wrap: anywhere; }   /* lange Wörter brechen (Stresstest) */
/* Lange Fragen: Text bricht um, die Linie füllt nur den Rest der letzten Zeile */
@media (max-width: 599px) {
  .frage summary, .frage--mehr { grid-template-columns: 1fr 22px; }
  .frage .tafel__linie { display: none; }
}
.frage__plus { position: relative; width: 16px; height: 16px; align-self: center; justify-self: end; transition: transform .3s cubic-bezier(.23, 1, .32, 1); }
.frage__plus::before, .frage__plus::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 7px;
  height: 2px;
  border-radius: 1px;
  background: var(--himmel);
}
.frage__plus::after { transform: rotate(90deg); }
.frage[open] .frage__plus { transform: rotate(135deg); }
.frage[open] .frage__nr, .frage summary:hover .frage__nr { color: var(--himmel); }
.frage summary:hover .tafel__linie { border-color: rgb(244 242 236 / .5); }
.frage summary:focus-visible, .frage--mehr:focus-visible { outline: 3px solid var(--himmel); outline-offset: 2px; border-radius: 4px; }

.frage__antwort {
  margin: -2px 0 18px;
  max-width: 56ch;
  overflow-wrap: anywhere;
  color: #cfccc3;
  font-size: 16px;
  line-height: 1.55;
}
@media (max-width: 599px) { .frage__antwort { padding-left: 0; } }
/* Kreide: Antwort wird von links nach rechts „hingeschrieben“ */
.frage[open] .frage__antwort { animation: kreide .55s cubic-bezier(.3, .6, .2, 1) both; }
@keyframes kreide {
  from { clip-path: inset(0 100% 0 0); opacity: .3; translate: -4px 0; }
  to   { clip-path: inset(0 0 0 0); opacity: 1; translate: 0 0; }
}

.frage--mehr { border-bottom: 0; }
.frage--mehr .frage__text { color: var(--himmel); }
.frage__pfeil { color: var(--himmel); justify-self: end; transition: transform .15s; }
.frage--mehr:hover .frage__pfeil { transform: translate(2px, -2px); }

/* Auftritt beim ersten Reinscrollen (tafel.mjs) */
.tafel--wartet .frage { opacity: 0; translate: 0 12px; }
.tafel--wartet .tafel__linie { transform: scaleX(0); }
.tafel--wartet.ist-sichtbar .frage {
  opacity: 1;
  translate: 0 0;
  transition: opacity .35s ease-out calc(var(--z, 8) * 40ms), translate .35s cubic-bezier(.2, .8, .2, 1) calc(var(--z, 8) * 40ms);
}
.tafel--wartet.ist-sichtbar .tafel__linie {
  transform: scaleX(1);
  transition: transform .6s cubic-bezier(.3, .7, .2, 1) calc(var(--z, 8) * 40ms + 150ms), border-color .2s;
}
@media (prefers-reduced-motion: reduce) {
  .frage[open] .frage__antwort { animation: none; }
  .frage__plus, .frage__pfeil { transition: none; }
}

/* Fröge-Tafel T1 (Mattia, 25.10.2026): Strichliste, Filter mit Wisch, Schilder, eigene Frage. */
.fragen__zaehler { display: flex; align-items: center; gap: 12px; margin: 22px 0 0; color: #9a988f; font-size: 14px; }
.fragen__zaehler b { font: 400 22px/1 'Anton', sans-serif; color: var(--weiss); margin-right: 4px; }
.strichliste { flex: none; overflow: visible; }
.strichliste path {
  fill: none;
  stroke: var(--papier);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  opacity: .9;
}
.tafel--wartet .strichliste path { stroke-dashoffset: 1; }
.tafel--wartet.ist-sichtbar .strichliste path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .22s ease-out calc(var(--s) * 110ms + 300ms);
}

.fragen__filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.fragen__chip {
  min-height: 40px;
  padding: 0 16px;
  border: 1.5px solid rgb(244 242 236 / .35);
  border-radius: 999px;
  background: none;
  color: var(--papier);
  font: 700 14px/1 'Inter Tight', sans-serif;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.fragen__chip[aria-pressed="true"] { background: var(--himmel); border-color: var(--himmel); color: var(--schwarz); }
.fragen__chip:focus-visible { outline: 3px solid var(--himmel); outline-offset: 2px; }

/* Wisch: ein heller Kreidestaub-Streifen fährt über die Liste, die Zeilen verblassen kurz */
.fragen__zeilen { position: relative; }
.fragen__zeilen::after {
  content: '';
  position: absolute;
  inset: 0 -12px;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, rgb(244 242 236 / .10) 40%, rgb(244 242 236 / .16) 50%, rgb(244 242 236 / .10) 60%, transparent 100%);
  transform: translateX(-110%);
  opacity: 0;
}
.fragen__zeilen.ist-am-wische::after { animation: wisch .6s cubic-bezier(.45, .1, .3, 1) both; }
.fragen__zeilen.ist-am-wische .frage { animation: verblasse .6s ease-in-out both; }
@keyframes wisch { 0% { opacity: 1; transform: translateX(-110%); } 100% { opacity: 1; transform: translateX(110%); } }
@keyframes verblasse { 40%, 50% { opacity: .08; filter: blur(1px); } }

.frage__schild {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgb(185 199 207 / .16);
  color: var(--himmel);
  font: 700 10px/1.3 'Inter Tight', sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  vertical-align: 2px;
}
.frage__schild--neu { background: var(--himmel); color: var(--schwarz); }

/* Eigene Frage direkt auf der Tafel: Felder sind nur Kreidelinien */
.frage--eigene { border-bottom: 0; }
.frage--eigene .frage__nr, .frage--eigene .frage__text { color: var(--himmel); }
.eigene { padding: 0 0 8px; max-width: 34rem; }
@media (max-width: 599px) { .eigene { padding-left: 0; } }
.eigene__feld { position: relative; display: block; margin-bottom: 14px; }
.eigene textarea, .eigene__feld input {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 10px 56px 8px 0;
  border: 0;
  border-bottom: 2px dashed rgb(244 242 236 / .4);
  border-radius: 0;
  background: transparent;
  color: var(--papier);
  font: 500 17px/1.4 'Inter Tight', sans-serif;   /* ≥ 16 px: iOS zoomt sonst */
  resize: none;
  transition: border-color .2s;
}
.eigene textarea::placeholder, .eigene__feld input::placeholder { color: #8f8d85; }
.eigene textarea:focus, .eigene__feld input:focus { outline: none; border-bottom-color: var(--himmel); border-bottom-style: solid; }
.eigene__rest {
  position: absolute;
  right: 0;
  bottom: 8px;
  font-size: 20px;
  color: #77756e;
  transition: color .2s;
}
.eigene__rest.ist-knapp { color: var(--himmel); }
.eigene__senden { width: 100%; margin-top: 6px; background: var(--himmel); color: var(--schwarz); box-shadow: 0 3px 0 #7d8c94, 0 8px 16px rgb(0 0 0 / .2); }
.eigene__senden:active { box-shadow: 0 1px 0 #7d8c94; }
.eigene__senden:disabled { opacity: .6; cursor: progress; }
.eigene__fehler { margin: 10px 0 0; font-weight: 700; font-size: 15px; line-height: 1.7; color: var(--weiss); }
.eigene__fehler:empty { display: none; }
.eigene__fehler:not(:empty) { text-decoration: underline wavy var(--himmel) 1.5px; text-underline-offset: 5px; text-decoration-skip-ink: none; }
.eigene__hinweis { margin: 10px 0 0; color: #9a988f; font-size: 13.5px; line-height: 1.45; }

/* Danach: Haken wird mit Kreide gezeichnet */
.eigene__fertig { display: flex; align-items: center; gap: 14px; padding: 4px 0 18px calc(15px * 2.4); font-size: 17px; }
@media (max-width: 599px) { .eigene__fertig { padding-left: 0; } }
.eigene__fertig[hidden] { display: none; }
.eigene__fertig p { margin: 0; }
.kreidehaken { flex: none; width: 54px; height: 44px; }
.kreidehaken path {
  fill: none;
  stroke: var(--himmel);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: haken .6s cubic-bezier(.5, 0, .3, 1) .1s forwards;
}
@keyframes haken { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .kreidehaken path { animation: none; stroke-dashoffset: 0; }
  .fragen__zeilen.ist-am-wische::after, .fragen__zeilen.ist-am-wische .frage { animation: none; }
}

/* B08 (Mattia, 25.10.2026: Variante A): Ohne JavaScript kein Online-Buchen und keine Fragen-Formulare,
   stattdessen ein klarer Hinweis. Die Billetts bleiben als Preisliste sichtbar. html.js setzt index.php. */
.ohne-js { display: none; }
html:not(.js) .ohne-js {
  display: block;
  margin: 0 0 16px;
  padding: 14px 16px;
  border-radius: 6px;
  background: var(--weiss);
  color: var(--schwarz);
  font-weight: 700;
}
html:not(.js) .eigene__ohne-js { background: rgb(244 242 236 / .08); color: var(--papier); }
html:not(.js) .eigene,
html:not(.js) .gruppen,
html:not(.js) .fragen__filter { display: none; }
html:not(.js) .karte { cursor: default; }

/* O1 · Ortstafle, überarbeitet (Mattia, 25.10.2026: „mehr Leben“). Ein Schilderpfosten wie an der
   Strasse: Ortsschild, Zusatztafel OFFE/ZUE an zwei Ketten, Wegweiser-Pfeile als Links.
   Daneben die Woche als Zeitbalken mit Jetzt-Strich. Nur Farben aus B3; Pfosten-Grau aus Grau/Sandstein. */
.ort {
  background: var(--hofgruen);
  color: var(--papier);
  padding: 64px var(--rand) 88px;
  overflow: hidden;
}
.ort__innen {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  gap: 40px;
  grid-template-areas: "kopf" "pfosten" "woche";
}
.ort__innen > * { min-width: 0; }
@media (min-width: 900px) {
  .ort__innen {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-areas: "kopf woche" "pfosten woche";
    column-gap: 72px;
    align-items: start;
  }
}
.ort__kopf { grid-area: kopf; }
.ort .ueber { color: var(--sandstein); }
.ort__titel { margin: .3em 0 0; font-weight: 400; color: var(--weiss); font-size: clamp(56px, 16vw, 104px); line-height: .9; }
.ort__titel .laut, .ort__titel .fr { font-size: inherit; }
.ort__titel .fr { color: var(--himmel); }

/* ---------- Der Pfosten ---------- */
.pfosten {
  grid-area: pfosten;
  position: relative;
  display: grid;
  justify-items: center;
  padding: 0 0 34px;
}
/* Stange: Grau mit Lichtkante, steht im Rasen */
.pfosten::before {
  content: '';
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 24px;
  bottom: 10px;
  width: 11px;
  translate: -50% 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--grau), var(--sandstein) 42%, var(--grau));
  transform-origin: 50% 100%;
}
.pfosten::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 140px;
  height: 18px;
  translate: -50% 0;
  border-radius: 50%;
  background: rgb(30 30 28 / .35);
  filter: blur(6px);
}
.pfosten > * { position: relative; z-index: 1; }

.ortsschild {
  display: grid;
  justify-items: center;
  width: min(100%, 360px);
  padding: 16px 20px 14px;
  border-radius: 7px;
  background: var(--weiss);
  color: var(--hofgruen);
  text-align: center;
  box-shadow: inset 0 0 0 5px var(--weiss), inset 0 0 0 8px var(--hofgruen), 0 16px 30px rgb(0 0 0 / .32);
  transform-origin: 50% 0;
  container-type: inline-size;
}
.ortsschild__plz, .ortsschild__adresse {
  font: 700 12px/1.4 'Inter Tight', sans-serif;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--grau);
  overflow-wrap: anywhere;
}
/* Schriftgrösse nach Schildbreite, nicht nach Bildschirm: „Emmebrügg“ füllt das Schild immer */
.ortsschild__ort { font-size: 18.5cqi; line-height: 1.02; color: var(--hofgruen); }

/* Zusatztafel an zwei Ketten: OFFE schwarz, ZUE papier */
.zusatztafel {
  display: grid;
  justify-items: center;
  width: min(74%, 250px);
  margin-top: 26px;
  padding: 10px 14px 12px;
  border-radius: 6px;
  background: var(--papier);
  color: var(--schwarz);
  text-align: center;
  box-shadow: 0 12px 22px rgb(0 0 0 / .28);
  transform-origin: 50% -26px;
}
.zusatztafel::before, .zusatztafel::after {
  content: '';
  position: absolute;
  top: -26px;
  height: 26px;
  border-left: 3px dotted var(--sandstein);
}
.zusatztafel::before { left: 22%; }
.zusatztafel::after { right: 22%; }
.zusatztafel__wort { font-size: 46px; line-height: 1; }
.zusatztafel__info { margin-top: 4px; font: 700 15px/1.3 'Inter Tight', sans-serif; }
.zusatztafel.ist-offen { background: var(--schwarz); color: var(--weiss); }
.zusatztafel.ist-offen .zusatztafel__info { color: var(--himmel); }

/* Wegweiser: Pfeilschilder am Pfosten, abwechselnd nach rechts und links */
.wegweiser { display: grid; gap: 12px; width: min(100%, 360px); margin-top: 26px; }
.wegweiser__pfeil {
  justify-self: end;
  width: 78%;
  color: inherit;
  text-decoration: none;
  filter: drop-shadow(0 7px 10px rgb(0 0 0 / .3));
  transition: transform .2s cubic-bezier(.2, .8, .2, 1);
}
.wegweiser__pfeil span {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 0 40px 2px 20px;
  background: var(--weiss);
  color: var(--hofgruen);
  font-size: 21px;
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 50%, calc(100% - 28px) 100%, 0 100%);
}
.wegweiser__pfeil--links { justify-self: start; }
.wegweiser__pfeil--links span {
  justify-content: flex-end;
  padding: 0 20px 2px 40px;
  clip-path: polygon(28px 0, 100% 0, 100% 100%, 28px 100%, 0 50%);
}
.wegweiser__pfeil--dunkel span { background: var(--schwarz); color: var(--weiss); }
.wegweiser__pfeil:hover { transform: translateX(6px); }
.wegweiser__pfeil--links:hover { transform: translateX(-6px); }
.wegweiser__pfeil:active { transform: scale(.97); }
.wegweiser__pfeil:focus-visible { outline: 3px solid var(--himmel); outline-offset: 4px; border-radius: 4px; }

/* ---------- Woche als Zeitbalken ---------- */
.woche { grid-area: woche; }
.woche__titel { margin: 0 0 14px; font: 800 24px/1.1 'Inter Tight', sans-serif; letter-spacing: -.02em; color: var(--weiss); }
@media (min-width: 900px) { .woche { padding-top: 64px; } }
.woche__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.woche__tag {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 14px;
  align-items: center;
  margin: 0 -12px;
  padding: 10px 12px;
  border-radius: 8px;
}
.woche__kurz { grid-row: 1 / 3; font-size: 24px; color: var(--papier); }
.woche__balken {
  position: relative;
  height: 12px;
  border-radius: 6px;
  background: rgb(244 242 236 / .12);
}
.woche__balken i { position: absolute; top: 0; bottom: 0; border-radius: 6px; background: var(--himmel); }
.woche__zeit { margin-top: 6px; font: 600 14px/1.3 'Inter Tight', sans-serif; color: rgb(244 242 236 / .78); font-variant-numeric: tabular-nums; }
.woche__tag.ist-zue .woche__kurz, .woche__tag.ist-zue .woche__zeit { opacity: .5; }
.woche__tag.ist-heute { background: rgb(244 242 236 / .1); }
.woche__tag.ist-heute .woche__kurz, .woche__tag.ist-heute .woche__zeit { color: var(--weiss); opacity: 1; }
.woche__tag.ist-heute .woche__zeit { font-weight: 800; }
.woche__tag.ist-heute .woche__balken i { background: var(--weiss); }
/* Jetzt-Strich: wo der Tag gerade steht (ort.mjs setzt left) */
.woche__jetzt {
  position: absolute;
  top: -7px;
  bottom: -7px;
  width: 3px;
  translate: -50% 0;
  border-radius: 2px;
  background: var(--schwarz);
  box-shadow: 0 0 0 2px var(--weiss);
}

/* ---------- Auftritt: Pfosten wächst, Schild fällt drauf, Tafel schwingt, Pfeile fahren aus ---------- */
.ort.tafel--wartet .pfosten::before { scale: 1 0; }
.ort.tafel--wartet .ortsschild,
.ort.tafel--wartet .zusatztafel,
.ort.tafel--wartet .wegweiser__pfeil { opacity: 0; }
.ort.tafel--wartet .woche__tag { opacity: 0; translate: 0 10px; }
.ort.tafel--wartet.ist-sichtbar .pfosten::before { scale: 1 1; transition: scale .55s cubic-bezier(.2, .8, .2, 1); }
/* Verzögerungen gekürzt (Mattia 31.10.2026, Variante A): früher kam der letzte Pfeil erst nach 1,8 s */
.ort.tafel--wartet.ist-sichtbar .ortsschild { opacity: 1; animation: schild-fall .9s cubic-bezier(.3, .7, .3, 1) .15s both; }
.ort.tafel--wartet.ist-sichtbar .zusatztafel { opacity: 1; animation: tafel-schwing .9s ease-out .5s both; }
.ort.tafel--wartet.ist-sichtbar .wegweiser__pfeil { opacity: 1; animation: pfeil-raus .5s cubic-bezier(.2, .8, .2, 1) both; }
.ort.tafel--wartet.ist-sichtbar .wegweiser__pfeil:nth-child(1) { animation-delay: .6s; }
.ort.tafel--wartet.ist-sichtbar .wegweiser__pfeil:nth-child(2) { animation-delay: .68s; --raus: 1; }
.ort.tafel--wartet.ist-sichtbar .wegweiser__pfeil:nth-child(3) { animation-delay: .76s; }
.ort.tafel--wartet.ist-sichtbar .woche__tag {
  opacity: 1;
  translate: 0 0;
  transition: opacity .4s ease-out calc(var(--z) * 50ms + 150ms), translate .4s cubic-bezier(.2, .8, .2, 1) calc(var(--z) * 50ms + 150ms);
}
@keyframes schild-fall {
  0%   { opacity: 0; transform: translateY(-46px) rotate(-5deg); }
  45%  { opacity: 1; transform: translateY(0) rotate(2.5deg); }
  70%  { transform: rotate(-1deg); }
  100% { opacity: 1; transform: none; }
}
/* ruhiger (UI/UX-Prüfung: Ort war nahe am Zuviel): ein Ausschlag, dann steht die Tafel */
@keyframes tafel-schwing {
  0%   { opacity: 0; transform: rotate(-8deg); }
  35%  { opacity: 1; transform: rotate(3deg); }
  70%  { transform: rotate(-1deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes pfeil-raus {
  from { opacity: 0; transform: translateX(calc(-28px + var(--raus, 0) * 56px)); }
  to   { opacity: 1; transform: none; }
}
/* Status wechselt (z. B. um 12:00 von OFFE auf ZUE): Tafel schwingt nochmals */
.zusatztafel.ist-neu { animation: tafel-schwing .9s ease-out both; }
@media (prefers-reduced-motion: reduce) {
  .zusatztafel.ist-neu { animation: none; }
  .wegweiser__pfeil { transition: none; }
}


/* Ort: Hover und Tipp (Mattia, 25.10.2026: „bisschen UX und Animationen“).
   Wegweiser: Rückmeldung (nur echte Maus für Hover). Tag antippen: genaue Zeiten über den Balken.
   Ortsschild/Zusatztafel antippen: wackelt bzw. pendelt wie loses Blech. Jetzt-Strich pulsiert ruhig. */
.ort { --ease-out: cubic-bezier(0.23, 1, 0.32, 1); }

/* Wegweiser: Hover nur mit Maus (Touch löst sonst falsche Hover aus), Drücken sinkt ein */
.wegweiser__pfeil { transition: transform 160ms var(--ease-out); }
.wegweiser__pfeil:hover, .wegweiser__pfeil--links:hover { transform: none; }
@media (hover: hover) and (pointer: fine) {
  .wegweiser__pfeil:hover { transform: translateX(6px); }
  .wegweiser__pfeil--links:hover { transform: translateX(-6px); }
}
.wegweiser__pfeil:active { transform: scale(.97); transition-duration: 100ms; }

/* Ortsschild und Zusatztafel: antippbar, kleine Neigung unter der Maus */
.ortsschild, .zusatztafel { cursor: pointer; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) and (pointer: fine) {
  .ortsschild { transition: rotate 250ms var(--ease-out); }
  .ortsschild:hover { rotate: -1.5deg; }
  .zusatztafel { transition: rotate 250ms var(--ease-out); }
  .zusatztafel:hover { rotate: 3deg; }
}
/* stärker als die Auftritts-Animation (.ort.tafel--wartet.ist-sichtbar …), sonst bliebe sie stehen */
.ortsschild.ist-wackel, .ort.ist-sichtbar .ortsschild.ist-wackel { animation: schild-wackel 700ms var(--ease-out); }
.zusatztafel.ist-wackel, .ort.ist-sichtbar .zusatztafel.ist-wackel,
.ort.ist-sichtbar .zusatztafel.ist-neu { animation: tafel-pendel 1100ms var(--ease-out); }
@keyframes schild-wackel {
  0% { transform: none; }
  20% { transform: rotate(-3deg) translateY(2px); }
  45% { transform: rotate(2deg); }
  70% { transform: rotate(-1deg); }
  100% { transform: none; }
}
@keyframes tafel-pendel {
  0% { transform: none; }
  15% { transform: rotate(12deg); }
  35% { transform: rotate(-8deg); }
  55% { transform: rotate(4.5deg); }
  75% { transform: rotate(-2deg); }
  100% { transform: none; }
}

/* Woche: Tag antippen bzw. mit Maus darüber → genaue Zeiten erscheinen über den Blöcken */
.woche__tag[tabindex] { cursor: pointer; transition: background-color 150ms ease; }
.woche__tag[tabindex]:focus-visible { outline: 3px solid var(--himmel); outline-offset: 2px; }
.woche__balken i { transition: background-color 150ms ease; }
.woche__balken i::after {
  content: attr(data-zeit);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  padding: 3px 7px;
  border-radius: 4px;
  background: var(--papier);
  color: var(--hofgruen);
  font: 800 12px/1.2 'Inter Tight', sans-serif;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 4px 10px rgb(0 0 0 / .25);
  opacity: 0;
  transform: translate(-50%, 4px);
  transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out);
  pointer-events: none;
}
.woche__tag.ist-aktiv { background: rgb(244 242 236 / .14); }
.woche__tag.ist-aktiv .woche__balken i,
.woche__tag:focus-visible .woche__balken i { background: var(--weiss); }
.woche__tag.ist-aktiv .woche__balken i::after,
.woche__tag:focus-visible .woche__balken i::after { opacity: 1; transform: translate(-50%, 0); }
@media (hover: hover) and (pointer: fine) {
  .woche__tag[tabindex]:hover { background: rgb(244 242 236 / .14); }
  .woche__tag[tabindex]:hover .woche__balken i { background: var(--weiss); }
  .woche__tag[tabindex]:hover .woche__balken i::after { opacity: 1; transform: translate(-50%, 0); }
}
/* Beschriftung darf über den Balken hinausragen, die Zeile braucht dafür oben Luft */
.woche__liste { gap: 8px; }
.woche__tag { padding-top: 22px; }

/* Jetzt-Strich: ruhiger Puls zeigt, dass es live ist */
.woche__jetzt::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--weiss);
  opacity: 0;
  animation: jetzt-puls 2.4s var(--ease-out) infinite;
}
@keyframes jetzt-puls {
  0% { opacity: .5; transform: scale(.4); }
  100% { opacity: 0; transform: scale(2); }
}

@media (prefers-reduced-motion: reduce) {
  .ortsschild.ist-wackel, .ort.ist-sichtbar .ortsschild.ist-wackel,
  .ort.ist-sichtbar .zusatztafel.ist-neu, .ort.ist-sichtbar .zusatztafel.ist-wackel, .zusatztafel.ist-wackel { animation: none; }
  .ortsschild:hover, .zusatztafel:hover { rotate: none; }
  .woche__jetzt::after { animation: none; }
  .wegweiser__pfeil:hover, .wegweiser__pfeil--links:hover { transform: none; }
}

/* Impressum und Datenschutz: ruhige Leseseite im Papier-Ton, Titel wie die Abschnitte der Startseite */
.recht {
  max-width: 44rem;
  margin: 0 auto;
  padding: max(20px, env(safe-area-inset-top)) var(--rand) 72px;
}
.recht__zrugg {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--grau);
  font-weight: 700;
  text-decoration: none;
}
.recht__zrugg:hover { color: var(--schwarz); }
.recht__titel {
  margin: 28px 0 32px;
  font-weight: 400;
  font-size: clamp(44px, 12vw, 88px);
  line-height: .9;
}
.recht__titel .laut, .recht__titel .fr { font-size: inherit; }
.recht__zeile { display: block; }
.recht__text { font-size: 17px; line-height: 1.6; }
.recht__text h2 { margin: 2.2em 0 .5em; font: 800 22px/1.2 'Inter Tight', sans-serif; letter-spacing: -.01em; }
.recht__text p, .recht__text ul { margin: 0 0 1em; max-width: 68ch; }
.recht__text ul { padding-left: 1.2em; }
.recht__text li { margin-bottom: .5em; }
.recht__lead { padding: 16px 18px; border-radius: 8px; background: var(--weiss); font-weight: 500; }
.recht__daten {
  display: grid;
  grid-template-columns: minmax(7.5rem, auto) 1fr;
  gap: 10px 20px;
  margin: 0;
}
.recht__daten dt { color: var(--grau); font-weight: 700; }
.recht__daten dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 420px) {
  .recht__daten { grid-template-columns: 1fr; gap: 2px; }
  .recht__daten dd { margin-bottom: 10px; }
}
.recht__stand { margin-top: 2.5em; color: var(--grau); font-size: 14px; }

/* UI/UX-Prüfung 25.10.2026: gezeichnete Symbole statt Zeichen, Vertrauenssatz im Formular */
.popout__zue svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; }
.billett__zrugg .pfeil { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.popout__vertrauen { margin: 2px 0 14px; color: var(--grau); font-size: 14px; line-height: 1.45; }
.popout__vertrauen a { color: var(--schwarz); font-weight: 700; text-underline-offset: 3px; }
/* Tippflächen mindestens 44 px, Fuss-Signatur lesbar (UI/UX-Prüfung 25.10.2026) */
.gruppe, .fragen__chip, .standort { min-height: 44px; }
.fuss__signatur { color: #9a988f; }
.termine__frei { display: inline-flex; align-items: center; gap: 8px; margin: -6px 0 14px; font-weight: 700; font-size: 15px; }
.termine__frei::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--hofgruen); box-shadow: 0 0 0 3px rgb(47 74 58 / .2); }
.termine__frei[hidden] { display: none; }
/* Zue-Tage kompakt: kein leerer Balken, weniger Höhe (UI/UX-Prüfung) */
.woche__tag.ist-zue { padding-block: 4px; }
.woche__tag.ist-zue .woche__balken { display: none; }
.woche__tag.ist-zue .woche__zeit { margin-top: 0; }
.woche__tag.ist-zue .woche__kurz { font-size: 18px; }
.woche__tag { padding-block: 7px; }
.woche__zeit { margin-top: 4px; }
.woche__kurz { font-size: 21px; }
/* Längere Sätze (z. B. „Ab Di 17.11. isch dä Stuehl frei.“) umbrechen statt aus dem Bild laufen */
.hero__blase { left: 48%; width: max-content; max-width: min(40vw, 200px); white-space: normal; text-wrap: balance; }

/* Stuhl besetzt (Wow 4): grüner Live-Punkt vor dem Satz, atmet ruhig */
.hero__blase--bsetzt::before {
  content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 7px; vertical-align: 1px;
  border-radius: 50%; background: var(--hofgruen); box-shadow: 0 0 0 0 rgb(47 74 58 / .45);
}
@media (prefers-reduced-motion: no-preference) {
  .hero__blase--bsetzt::before { animation: bsetzt-puls 2s ease-out infinite; }
}
@keyframes bsetzt-puls { 70%, 100% { box-shadow: 0 0 0 7px rgb(47 74 58 / 0); } }

/* Hero → Termine (Wow 2, hero-kamera.mjs): Kamerafahrt über eigene `scale`-Eigenschaft, Titel steigt weg,
   Himmelblau fliesst von unten herein. Ursprung wie beim Auftritt (Ebenenfuss), damit Stuhl und Wiese deckungsgleich bleiben. */
.hero--kamera { border-bottom-color: transparent; }
/* Werte setzt hero-kamera.mjs direkt auf die Elemente; während der Fahrt eigene Grafik-Layer */
.hero--faehrt .hero__ebene--gebaeude, .hero--faehrt .hero__ebene--vordergrund, .hero--faehrt .hero__ebene--schatten,
.hero--faehrt .hero__stuhl-knopf, .hero--faehrt .hero__fluss { will-change: scale, translate; }
.hero__fluss {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: linear-gradient(rgb(185 199 207 / 0), var(--himmel) 45%);
  transform-origin: 50% 100%;
  translate: 0 100%;
}

/* Billett abreissen (Wow): Stummel an der Lochung mit gerissener Kante */
.karte__stummel {
  position: absolute; left: 0; top: 0; z-index: 600; width: 13px;
  background: var(--weiss); border-radius: 8px 0 0 8px; pointer-events: none;
  clip-path: polygon(0 0, 100% 0, 70% 6%, 100% 12%, 65% 18%, 100% 24%, 70% 30%, 100% 36%, 65% 42%, 100% 48%, 70% 54%, 100% 60%, 65% 66%, 100% 72%, 70% 78%, 100% 84%, 65% 90%, 100% 96%, 100% 100%, 0 100%);
  box-shadow: inset -1.5px 0 0 var(--sandstein);
}

/* Hero-Figuren (hero-figuren.mjs): Leinwand der Gemini-Bilder neben dem Stuhl. Masse relativ zum Stuhl:
   der Barber ist gut doppelt so hoch wie der Stuhl, Füsse auf derselben Linie, rechts daneben. */
.hero__leinwand { position: absolute; aspect-ratio: 1536 / 2752; pointer-events: none; }
/* Rauchen: Barber rechts neben dem Stuhl, gut doppelt so hoch wie der Stuhl */
.hero__leinwand--rauchen { left: 31.8%; top: -87.4%; height: 213%; }   /* 15 % kleiner (Mattia 25.10.2026), Füsse bleiben unten am Stuhl */
/* Schneiden: Leinwand so gross, dass der Kunde auf dem Stuhl sitzt (Füsse unten am Stuhl, Gesäss auf der Sitzfläche);
   der Barber steht dahinter (unter dem Stuhl gezeichnet), der Kunde davor */
.hero__leinwand--szene { left: var(--szene-x, 4%); top: var(--szene-y, -77%); height: var(--szene-h, 179%); }
.hero__leinwand--hinten { z-index: -1; }
.hero__leinwand--vorne { z-index: 1; }
.hero__barber, .hero__kunde { position: absolute; inset: 0; transform-origin: 56% 88%; }
/* Outfit-Farbe setzt hero-figuren.mjs (Liste OUTFITS) */
.hero:not(.hero--schneidet) .hero__leinwand--szene,
.hero:not(.hero--raucht) .hero__leinwand--rauchen { visibility: hidden; }
.hero__figur { position: absolute; height: auto; max-width: none; opacity: 0; filter: saturate(.88) brightness(.97); }
.hero__figur.ist-an { opacity: 1; }
.hero__rauch {
  position: absolute; width: 6%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  /* hellgrau statt weiss, damit er auch vor der hellen Fassade sichtbar ist; weicher Rand, dichter Kern */
  background: radial-gradient(circle, rgb(228 230 232 / .9) 0 25%, rgb(214 217 220 / .5) 52%, rgb(214 217 220 / 0) 72%);
  filter: blur(1.4px); pointer-events: none; opacity: 0;
  /* Bewegung macht hero-figuren.mjs mit el.animate() (feste Zahlen, läuft auf der Grafikkarte) */
}
/* Glut an der Zigarettenspitze: glimmt ruhig, leuchtet beim Ziehen auf */
.hero__glut {
  position: absolute; width: 1.6%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #ffd58a 0 25%, #f06a2a 55%, rgb(240 106 42 / 0) 75%);
  opacity: .55; scale: .8; transition: opacity .35s ease, scale .35s ease;
}
.hero__glut.ist-heiss { opacity: 1; scale: 1.5; animation: glut-flackert .5s ease-in-out infinite alternate; }
@keyframes glut-flackert { to { opacity: .8; scale: 1.25; } }
.hero:not(.hero--raucht) .hero__glut { display: none; }
@media (prefers-reduced-motion: reduce) { .hero__glut { animation: none; transition: none; } }
/* Steht der Barber rechts vom Stuhl, spricht der Stuhl nach links (Blase nicht hinter ihm) */
.hero--figuren .hero__blase { z-index: 2; left: auto; right: 72%; border-radius: 14px 14px 3px 14px; transform-origin: 100% 100%; }

/* Blattseiten (Absage /a/…, 404): ein Billett auf Himmelblau, wie im Termin-Automaten (UI-Prüfung 25.10.2026) */
.blattseite { min-height: 100svh; background: var(--himmel); }
.blattseite__innen { display: grid; justify-items: center; gap: 28px; max-width: 26rem; margin: 0 auto; padding: max(28px, env(safe-area-inset-top)) var(--rand) 48px; }
.blattseite__marke { justify-self: start; display: inline-flex; align-items: baseline; gap: 6px; min-height: 44px; font-size: 30px; text-decoration: none; }
.blattseite__marke .laut, .blattseite__marke .fr { font-size: inherit; }
.absage-billett {
  position: relative; width: 100%; padding: 26px 22px 24px; border-radius: 10px; background: var(--weiss);
  box-shadow: 0 2px 4px rgb(30 30 28 / .08), 0 18px 40px rgb(30 30 28 / .16); rotate: -1deg;
}
.absage-billett::before { content: ''; position: absolute; left: 10px; top: 14px; bottom: 14px; border-left: 1.5px dashed var(--sandstein); }
.absage-billett__wann { margin: 6px 0 0; font-size: clamp(34px, 11vw, 46px); }
.absage-billett__was { margin: 4px 0 0; color: var(--grau); font-weight: 600; }
.absage-billett__riss { position: relative; margin: 20px -22px; border-top: 1.5px dashed var(--sandstein); }
.absage-billett__riss::before, .absage-billett__riss::after { content: ''; position: absolute; top: -10px; width: 20px; height: 20px; border-radius: 50%; background: var(--himmel); }
.absage-billett__riss::before { left: -10px; }
.absage-billett__riss::after { right: -10px; }
.absage-billett__titel { margin: 0 0 6px; font: 800 24px/1.15 'Inter Tight', sans-serif; letter-spacing: -.01em; text-wrap: balance; }
.absage-billett__text { margin: 0 0 18px; color: var(--grau); }
.absage-billett__fehler { margin: 0 0 14px; font-weight: 700; line-height: 1.7; text-decoration: underline wavy var(--schwarz) 1.5px; text-underline-offset: 5px; text-decoration-skip-ink: none; }
.absage-billett__nei { display: flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 8px; font-weight: 700; text-underline-offset: 4px; }
.absage-billett__stempel {
  position: absolute; right: 18px; top: 22px; padding: 4px 12px; border: 2.5px solid var(--hofgruen); border-radius: 4px;
  color: var(--hofgruen); font-size: 22px; letter-spacing: .06em; rotate: 10deg;
}
@media (prefers-reduced-motion: no-preference) {
  .absage-billett { animation: billett-rein .5s cubic-bezier(.23, 1, .32, 1) both; }
  .absage-billett__stempel { animation: stempel-drauf .38s cubic-bezier(.23, 1, .32, 1) .35s both; }
}
@keyframes billett-rein { from { opacity: 0; translate: 0 18px; rotate: -4deg; } }
@keyframes stempel-drauf { from { opacity: 0; scale: 1.7; rotate: 2deg; } }
.ist-abgseit .absage-billett__wann, .ist-abgseit .absage-billett__was { text-decoration: line-through; text-decoration-thickness: 2px; opacity: .55; }
.absage-billett .knopf { width: 100%; }