/* Hood Zytig – fünf Stile (Entwurf design/ui-interview/zytig-stile.html, Mattia 25.10.2026).
   Ein Markup für Seite, Mini-Titelseite und Admin-Vorschau: .zb ist ein Container, alle Grössen im
   Blatt hängen an seiner Breite (cqi). Lesetext bleibt auf der Seite lesbar gross (clamp). */

.zb {
  container-type: inline-size;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.zb * { margin: 0; }
.zb__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 4.7cqi 4.7cqi 2cqi; }
.zb__kopf .laut { font-size: 6.7cqi; }
.zb__nr { font: 400 4.7cqi/1 'Anton', 'Impact', sans-serif; letter-spacing: .04em; }
.zb__linie { margin: 0 4.7cqi; border: 0; border-top: 3px double currentColor; height: 0; }
.zb__titel { font-weight: inherit; }
.zb__txt, .zb__liste { font-size: clamp(11px, 3.9cqi, 17px); }
.zb__txt p + p { margin-top: .8em; }
.zb__leer { background: url('../img/hero/quer-gebaeude.webp') center 35% / cover, var(--himmel); }
.zb__bild { display: block; width: 100%; object-fit: cover; }

/* 1 · Titelblatt – Zeitungs-Titelseite: Bodoni-Titel, Foto, Bildzeile, Text zweispaltig */
.zb--titelblatt { background: var(--papier); color: var(--schwarz); }
.zb--titelblatt .zb__datum { font: 700 3cqi/1.3 'Inter Tight', sans-serif; letter-spacing: .5cqi; text-transform: uppercase; padding: 2cqi 4.7cqi 0; opacity: .7; }
.zb--titelblatt .zb__titel { font-size: 12cqi; padding: 4.7cqi 4.7cqi 3.3cqi; text-wrap: balance; }
.zb--titelblatt .zb__fig { margin: 0 4.7cqi; }
.zb--titelblatt .zb__bild { aspect-ratio: 4 / 3; }
.zb--titelblatt .zb__unter { font: italic 500 clamp(11px, 3.7cqi, 16px)/1.3 'Bodoni Moda', serif; padding-top: 1.7cqi; color: var(--grau); }
.zb--titelblatt .zb__txt { padding: 3.3cqi 4.7cqi 6cqi; }
/* zweispaltig erst, wenn jede Spalte lesbar breit ist (am Handy einspaltig, UI/UX-Prüfung) */
@container (min-width: 480px) { .zb--titelblatt .zb__txt { columns: 2; column-gap: 4.7cqi; } }

/* 2 · Plakat – Foto füllt alles, riesiger Anton-Titel unten */
.zb--plakat { background: var(--schwarz); color: var(--weiss); }
.zb--plakat .zb__flaeche { position: relative; aspect-ratio: 1 / 2; display: flex; flex-direction: column; justify-content: space-between; }
.zb--seite.zb--plakat .zb__flaeche, .zb--vorschau.zb--plakat .zb__flaeche { aspect-ratio: 3 / 4.6; }
.zb--plakat .zb__bild { position: absolute; inset: 0; height: 100%; z-index: -1; filter: grayscale(.2) contrast(1.05); }
.zb--plakat .zb__flaeche::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(transparent 35%, rgb(30 30 28 / .92) 78%); }
.zb--plakat .zb__oben { padding-bottom: 8cqi; background: linear-gradient(rgb(30 30 28 / .55), transparent); }
.zb--plakat .zb__unten { padding: 0 4.7cqi 6cqi; }
.zb--plakat .zb__titel { font-size: 17cqi; line-height: .88; text-wrap: balance; }
.zb--plakat .zb__titel .fr { display: block; font-size: 11cqi; color: var(--himmel); text-transform: none; letter-spacing: 0; margin-top: 1cqi; }
.zb--plakat .zb__mehr { padding: 6cqi 4.7cqi 8cqi; color: #ddd; }

/* 3 · Story – Video hochkant, startet erst auf Tipp */
.zb--story { background: #111; color: var(--weiss); }
.zb--story .zb__flaeche { position: relative; aspect-ratio: 9 / 16; }
.zb--story .zb__bild { position: absolute; inset: 0; height: 100%; z-index: -1; background-color: #000; }
.zb--story video.zb__bild { object-fit: contain; }
.zb--story .zb__leer { background-image: url('../img/hero/hoch-gebaeude.webp'); background-position: center 20%; }
.zb--story .zb__flaeche::before { content: ''; position: absolute; inset: 0 0 auto; height: 30%; z-index: -1; background: linear-gradient(rgb(0 0 0 / .5), transparent); }
.zb--story .zb__balken { position: absolute; top: 3.3cqi; left: 4cqi; right: 4cqi; display: flex; gap: 1.3cqi; }
.zb--story .zb__balken i { flex: 1; height: 3px; border-radius: 2px; background: rgb(255 255 255 / .4); }
.zb--story .zb__balken i:first-child { background: var(--weiss); }
.zb--story .zb__kopf { padding-top: 7.3cqi; text-shadow: 0 1px 6px rgb(0 0 0 / .5); }
.zb--story .zb__linie { display: none; }
.zb__play {
  position: absolute; left: 50%; top: 45%;
  width: 21cqi; height: 21cqi; min-width: 56px; min-height: 56px;
  translate: -50% -50%;
  display: grid; place-items: center;
  border: 0; border-radius: 50%; padding: 0;
  background: rgb(244 242 236 / .92); color: var(--schwarz);
  box-shadow: 0 10px 30px rgb(0 0 0 / .3);
  cursor: pointer;
  transition: scale 160ms cubic-bezier(.23, 1, .32, 1), opacity 200ms ease-out;
}
.zb__play svg { width: 44%; height: 44%; margin-left: 8%; fill: currentColor; }
.zb__play:active { scale: .92; }
@media (hover: hover) and (pointer: fine) { button.zb__play:hover { scale: 1.06; } }
/* ruhiger Ring, damit der Knopf als Knopf gelesen wird – nur auf der Seite */
@media (prefers-reduced-motion: no-preference) {
  .zb--seite button.zb__play { animation: zb-puls 2.4s ease-out 1.2s infinite; }
}
@keyframes zb-puls {
  0% { box-shadow: 0 0 0 0 rgb(244 242 236 / .45), 0 10px 30px rgb(0 0 0 / .3); }
  70%, 100% { box-shadow: 0 0 0 18px rgb(244 242 236 / 0), 0 10px 30px rgb(0 0 0 / .3); }
}
.zb--story .zb__unten { position: absolute; left: 0; right: 0; bottom: 0; padding: 13cqi 4.7cqi 6cqi; background: linear-gradient(transparent, rgb(0 0 0 / .75)); transition: opacity 200ms ease-out; }
.zb--story .zb__titel { font-size: 10cqi; text-wrap: balance; }
.zb--story .zb__unter { font-size: 6cqi; color: var(--himmel); margin-top: 1.5cqi; }
.zb--story .zb__mehr { padding: 6cqi 4.7cqi 8cqi; color: #ddd; }
/* läuft das Video, gehören Fläche und Steuerung dem Video */
.zb--story.laeuft .zb__unten, .zb--story.laeuft .zb__play, .zb--story.laeuft .zb__kopf, .zb--story.laeuft .zb__balken { opacity: 0; pointer-events: none; }
.zb--story .zb__kopf, .zb--story .zb__balken { transition: opacity 200ms ease-out; }
/* ohne JS: native Steuerung, Text darunter statt darüber */
html:not(.js) .zb--story .zb__play { display: none; }
html:not(.js) .zb--story .zb__unten { position: static; background: none; padding-top: 6cqi; }

/* 4 · Tafle – nur Text, Kreide auf schwarzer Tafel */
.zb--tafle { background: var(--schwarz); color: var(--papier); }
.zb--tafle .zb__inhalt { padding: 8.7cqi 6cqi 10cqi; }
.zb--tafle .zb__titel { font-size: 14.7cqi; color: var(--weiss); margin: 1.3cqi 0 3cqi; text-wrap: balance; }
.zb--tafle .zb__titel .fr { display: block; font-size: 11cqi; color: var(--himmel); text-transform: none; letter-spacing: 0; margin-top: 1cqi; }
.zb--tafle .zb__txt { color: #cfccc3; }
.zb__striche { margin: 6cqi 0; height: 2px; background: repeating-linear-gradient(90deg, rgb(244 242 236 / .35) 0 3px, transparent 3px 7px); }
.zb__liste div { display: flex; justify-content: space-between; gap: 12px; padding: 2cqi 0; border-bottom: 1px solid rgb(244 242 236 / .12); }
.zb__liste dd { font-weight: 700; text-align: right; }

/* 5 · Billett – wie die Termin-Billetts: grosse Zahl, Stempel, Risslinie, Knopf zum Buchen */
.zb--billett { background: var(--himmel); color: var(--schwarz); padding-bottom: 6cqi; }
.zb__ticket { position: relative; margin: 6cqi 5.3cqi 0; padding: 6cqi 5.3cqi; background: var(--weiss); border-radius: 8px; box-shadow: 0 10px 24px rgb(30 30 28 / .15); rotate: -1.5deg; }
.zb__gilt { font-size: 3cqi; letter-spacing: .6cqi; }
.zb__gross { font-size: 24cqi; line-height: 1; margin-top: 2.7cqi; }
.zb--billett .zb__titel { font-size: 8cqi; margin-top: 1.3cqi; text-wrap: balance; }
.zb__riss { position: relative; margin: 5.3cqi -5.3cqi; border-top: 1.5px dashed var(--sandstein); }
.zb__riss::before, .zb__riss::after { content: ''; position: absolute; top: -3cqi; width: 6cqi; height: 6cqi; border-radius: 50%; background: var(--himmel); }
.zb__riss::before { left: -3cqi; }
.zb__riss::after { right: -3cqi; }
.zb__stempel { position: absolute; right: 4.7cqi; top: 5.3cqi; rotate: 12deg; border: 2px solid var(--hofgruen); color: var(--hofgruen); border-radius: 4px; padding: 1cqi 2.3cqi; font-size: 4.3cqi; letter-spacing: .06em; }
.zb__knopf { display: flex; width: 100%; margin-top: 5cqi; }

/* Mini-Titelseite (Startseite): feste Hochkant-Form, Text gekürzt */
.zb--mini { aspect-ratio: 1 / 2; }
/* Winziges weglassen statt unleserlich verkleinern: Datum und „Gilt“ nur auf der Seite; sonst mindestens 11–12 px */
.zb--mini .zb__datum, .zb--mini .zb__gilt { display: none; }
.zb--mini .zb__nr { font-size: max(12px, 4.7cqi); }
.zb--mini .zb__stempel { font-size: max(11px, 4.3cqi); }
.zb--mini .zb__txt { font-size: max(12px, 3.9cqi); }
.zb--mini.zb--titelblatt .zb__txt, .zb--mini.zb--tafle .zb__txt, .zb--mini.zb--billett .zb__txt {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; columns: auto;
}
.zb--mini.zb--billett { display: flex; flex-direction: column; }
.zb--mini .zb__ticket { margin-block: auto; }
.zb--mini.zb--story .zb__flaeche, .zb--mini.zb--plakat .zb__flaeche { aspect-ratio: auto; height: 100%; }

/* ---------- Ausgabe-Seite /zytig/{nr} ---------- */
.zytig-seite { --ease-out: cubic-bezier(.23, 1, .32, 1); min-height: 100svh; overflow-x: clip; }
.zytig-seite--titelblatt { background: var(--sandstein); }
.zytig-seite--plakat, .zytig-seite--tafle { background: var(--schwarz); }
.zytig-seite--story { background: #111; }
.zytig-seite--billett { background: var(--himmel); }
.zytig-seite ::selection { background: var(--himmel); color: var(--schwarz); }
.zytig-blatt {
  max-width: 600px; margin: 0 auto; touch-action: pan-y;
  translate: var(--dx, 0px) 0; rotate: calc(var(--dx, 0px) / 60px * 1deg);
  transition: translate 380ms var(--ease-out), rotate 380ms var(--ease-out);
}
.zytig-blatt.wischt { transition: none; }
.zytig-blatt .zb--story .zb__flaeche { max-height: 100svh; margin-inline: auto; width: min(100%, calc(100svh * 9 / 16)); }
@media (min-width: 640px) {
  .zytig-blatt { margin: 32px auto; box-shadow: 0 2px 4px rgb(0 0 0 / .08), 0 24px 60px rgb(0 0 0 / .22); border-radius: 6px; overflow: hidden; }
}

/* Auftritt beim Laden – einmal, wie frisch aus der Druckerei: Doppellinie läuft durch, Titel steigt auf */
@media (prefers-reduced-motion: no-preference) {
  .zb--seite .zb__linie { transform-origin: left; animation: zb-linie 700ms var(--ease-out) 80ms both; }
  .zb--seite .zb__titel, .zb--seite .zb__datum { animation: zb-steigt 600ms var(--ease-out) 180ms both; }
  .zb--seite .zb__gross { animation: zb-steigt 600ms var(--ease-out) 260ms both; }
  .zb--seite .zb__fig, .zb--seite .zb__txt, .zb--seite .zb__liste, .zb--seite .zb__unter { animation: zb-blendet 500ms var(--ease-out) 320ms both; }
  .zb--seite .zb__ticket { animation: zb-billett 650ms var(--ease-out) 60ms both; }
  .zb--seite .zb__stempel { animation: zb-stempel 380ms var(--ease-out) 560ms both; }
  .zb--seite.zb--plakat .zb__bild, .zb--seite.zb--story .zb__bild { animation: zb-zoom 1400ms var(--ease-out) both; }
}
@keyframes zb-linie { from { transform: scaleX(0); } }
@keyframes zb-steigt { from { opacity: 0; translate: 0 18px; } }
@keyframes zb-blendet { from { opacity: 0; } }
@keyframes zb-billett { from { opacity: 0; translate: 0 -24px; rotate: -4deg; } }
@keyframes zb-stempel { from { opacity: 0; scale: 1.5; } }
@keyframes zb-zoom { from { scale: 1.06; } }

/* Wischen: Wink am Rand zeigt, wohin es geht (JS setzt Deckkraft, .bereit ab Schwelle) */
.zytig-wink {
  position: fixed; top: 50%; z-index: 40; translate: 0 -50%;
  display: grid; place-items: center; gap: 4px; min-width: 64px; padding: 12px 10px;
  border-radius: 999px; background: var(--schwarz); color: var(--papier);
  font: 400 15px/1 'Anton', 'Impact', sans-serif; letter-spacing: .04em; text-transform: uppercase;
  box-shadow: 0 8px 24px rgb(0 0 0 / .3);
  opacity: 0; pointer-events: none;
  transition: background-color 150ms ease, color 150ms ease, scale 200ms var(--ease-out);
}
.zytig-wink svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.zytig-wink--aelter { right: 10px; }
.zytig-wink--aelter svg { rotate: 180deg; }
.zytig-wink--neuer { left: 10px; }
.zytig-wink.bereit { background: var(--himmel); color: var(--schwarz); scale: 1.08; }

/* Vor/Zurück unter dem Blatt: Nummer plus Titel der Nachbar-Ausgabe */
.zytig-nav {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  max-width: 600px; margin: 0 auto; padding: 20px var(--rand) calc(var(--fixknopf-hoehe) + 40px);
}
.zytig-seite--billett .zytig-nav { padding-bottom: 40px; }
.zytig-seite--plakat .zytig-nav, .zytig-seite--tafle .zytig-nav, .zytig-seite--story .zytig-nav { color: var(--papier); }
.zytig-nav__aelter, .zytig-nav__neuer {
  display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 10px 14px;
  border-radius: 6px; text-decoration: none;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, currentColor 22%, transparent);
  transition: background-color 160ms ease, scale 120ms var(--ease-out);
}
a.zytig-nav__aelter:active, a.zytig-nav__neuer:active { scale: .97; }
.zytig-nav span { display: grid; gap: 3px; min-width: 0; }
.zytig-nav b { font-size: 19px; font-weight: 400; }
.zytig-nav small { font-size: 13px; line-height: 1.25; opacity: .75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zytig-nav__pfeil { flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; transition: translate 200ms var(--ease-out); }
.zytig-nav__aelter { flex-direction: row-reverse; text-align: right; }
.zytig-nav__aelter .zytig-nav__pfeil { rotate: 180deg; }
.zytig-nav__leer { justify-content: center; font-size: 13px; opacity: .45; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, currentColor 12%, transparent); }
.zytig-nav__mitte {
  grid-column: 1 / -1; justify-self: center; display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px;
  font: 700 12px/1 'Inter Tight', sans-serif; letter-spacing: 2px; text-transform: uppercase;
  text-decoration: none; text-underline-offset: 5px; opacity: .75;
}
@media (hover: hover) and (pointer: fine) {
  a.zytig-nav__aelter:hover, a.zytig-nav__neuer:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
  .zytig-nav__neuer:hover .zytig-nav__pfeil { translate: -3px 0; }
  .zytig-nav__aelter:hover .zytig-nav__pfeil { translate: 3px 0; }
  .zytig-nav__mitte:hover { text-decoration: underline; opacity: 1; }
}

/* Seitenwechsel: gleitet in Wischrichtung (wo der Browser View Transitions kann) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 280ms; animation-timing-function: cubic-bezier(.23, 1, .32, 1); }
html:active-view-transition-type(aelter)::view-transition-old(root) { animation-name: zb-raus-links; }
html:active-view-transition-type(aelter)::view-transition-new(root) { animation-name: zb-rein-rechts; }
html:active-view-transition-type(neuer)::view-transition-old(root) { animation-name: zb-raus-rechts; }
html:active-view-transition-type(neuer)::view-transition-new(root) { animation-name: zb-rein-links; }
@keyframes zb-raus-links { to { translate: -24% 0; opacity: 0; } }
@keyframes zb-rein-rechts { from { translate: 24% 0; opacity: 0; } }
@keyframes zb-raus-rechts { to { translate: 24% 0; opacity: 0; } }
@keyframes zb-rein-links { from { translate: -24% 0; opacity: 0; } }
/* nach Wischen/Blättern gleitet die ganze Seite – der Druck-Auftritt käme doppelt */
html.blaettert .zb--seite * { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .zb__play, .zb--story .zb__unten, .zytig-blatt, .zytig-nav__aelter, .zytig-nav__neuer, .zytig-nav__pfeil, .zytig-wink { transition: none; }
}

/* ---------- Startseite #zytig: Zytigsständer mit den neuesten Ausgaben ---------- */
.zytig { --ease-out: cubic-bezier(.23, 1, .32, 1); padding: 56px 0 48px; background: var(--papier); }
.zytig__kopf { padding: 0 var(--rand); max-width: 1100px; margin: 0 auto; }
.zytig__titel { font-size: clamp(48px, 13vw, 96px); font-weight: 400; margin: 6px 0 8px; }
.zytig__titel .laut, .zytig__titel .fr { font-size: inherit; }
.zytig__reihe {
  display: flex; gap: 18px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--rand);
  padding: 28px var(--rand) 40px; margin: 0; list-style: none;
  scrollbar-width: none;
  /* Stange des Zytigsständers, auf der die Blätter stehen */
  background: linear-gradient(var(--sandstein), var(--sandstein)) 0 calc(100% - 26px) / 100% 3px no-repeat;
  /* rechter Rand blendet aus: es geht weiter */
  mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
}
.zytig__reihe::-webkit-scrollbar { display: none; }
.zytig__reihe li { flex: 0 0 min(62vw, 230px); scroll-snap-align: start; }
.zytig__karte {
  display: block; text-decoration: none; color: inherit; border-radius: 4px; overflow: hidden;
  rotate: -1.1deg;
  box-shadow: 0 1px 2px rgb(30 30 28 / .12), 0 10px 24px rgb(30 30 28 / .16);
  transition: rotate 260ms var(--ease-out), translate 260ms var(--ease-out), box-shadow 260ms ease;
}
.zytig__reihe li:nth-child(even) .zytig__karte { rotate: .9deg; }
.zytig__reihe li .zytig__karte:active { rotate: 0deg; translate: 0 -3px; }
.zytig__reihe li .zytig__karte:focus-visible { rotate: 0deg; translate: 0 -8px; outline-offset: 5px; }
@media (hover: hover) and (pointer: fine) {
  .zytig__reihe li .zytig__karte:hover { rotate: 0deg; translate: 0 -8px; box-shadow: 0 2px 4px rgb(30 30 28 / .1), 0 22px 40px rgb(30 30 28 / .22); }
}
@media (min-width: 1100px) {
  .zytig__reihe { justify-content: center; mask-image: none; }
}
/* erscheinen nacheinander beim Reinscrollen (tafel.mjs setzt .tafel--wartet / .ist-sichtbar) */
.zytig__reihe.tafel--wartet li { opacity: 0; translate: 0 28px; }
.zytig__reihe.tafel--wartet.ist-sichtbar li { opacity: 1; translate: 0 0; transition: opacity 420ms ease-out, translate 560ms var(--ease-out); transition-delay: calc(var(--i) * 70ms); }
@media (prefers-reduced-motion: reduce) { .zytig__karte, .zytig__reihe li .zytig__karte { transition: none; rotate: 0deg; } }

/* Raus aus der Zytig: „Zrugg“ oben links (wie Impressum/Datenschutz), Tastenhinweis am Computer */
.zytig-oben { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 600px; margin: 0 auto; padding: max(6px, env(safe-area-inset-top)) var(--rand) 6px; }
.zytig-seite--plakat .zytig-oben, .zytig-seite--tafle .zytig-oben, .zytig-seite--story .zytig-oben { color: var(--papier); }
.zytig-zrugg {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px 0 8px; margin-left: -8px;
  border-radius: 999px; font-weight: 700; text-decoration: none;
  transition: background-color 150ms ease;
}
.zytig-zrugg .zytig-nav__pfeil { width: 20px; height: 20px; }
.zytig-tasten { display: none; font-size: 13px; opacity: .7; }
.zytig-tasten kbd { display: inline-block; min-width: 24px; margin-right: 3px; padding: 2px 6px; border-radius: 4px; font: 600 12px/1.4 'Inter Tight', sans-serif; text-align: center; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 35%, transparent), 0 1px 0 color-mix(in srgb, currentColor 35%, transparent); }
@media (hover: hover) and (pointer: fine) {
  .zytig-zrugg:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
  .zytig-tasten { display: inline; }
}
@media (min-width: 640px) { .zytig-oben { padding-top: 20px; } .zytig-blatt { margin-top: 12px; } }

/* Grosse Pfeile neben dem Blatt – nur wo Platz ist und mit Maus */
.zytig-seite-pfeil { display: none; }
@media (min-width: 900px) and (hover: hover) {
  .zytig-seite-pfeil {
    position: fixed; top: 50%; z-index: 30; translate: 0 -50%;
    display: grid; place-items: center; gap: 6px; width: 76px; padding: 16px 0;
    border-radius: 999px; text-decoration: none;
    background: var(--papier); color: var(--schwarz);
    box-shadow: 0 2px 4px rgb(0 0 0 / .08), 0 12px 30px rgb(0 0 0 / .18);
    transition: translate 200ms var(--ease-out), background-color 150ms ease;
  }
  .zytig-seite-pfeil .zytig-nav__pfeil { width: 28px; height: 28px; }
  .zytig-seite-pfeil span { font-size: 14px; letter-spacing: .04em; }
  .zytig-seite-pfeil--neuer { left: max(24px, calc(50% - 300px - 120px)); }
  .zytig-seite-pfeil--aelter { right: max(24px, calc(50% - 300px - 120px)); }
  .zytig-seite-pfeil--aelter .zytig-nav__pfeil { rotate: 180deg; }
  .zytig-seite-pfeil:hover { background: var(--weiss); }
  .zytig-seite-pfeil--neuer:hover { translate: -4px -50%; }
  .zytig-seite-pfeil--aelter:hover { translate: 4px -50%; }
}
@media (prefers-reduced-motion: reduce) { .zytig-seite-pfeil, .zytig-zrugg { transition: none; } }

/* Karte ↔ Seite (Wow 1): dieselbe Ausgabe trägt auf beiden Seiten den Namen zytig-blatt und wächst bzw.
   schrumpft; der Rest blendet. Ohne Bewegung reduzieren: sofort. */
html.zytig-morph .zytig-blatt { view-transition-name: zytig-blatt; }
html.zytig-morph .zb--seite * { animation: none !important; }
::view-transition-group(zytig-blatt) { animation-duration: 420ms; animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
::view-transition-old(zytig-blatt), ::view-transition-new(zytig-blatt) { height: 100%; object-fit: cover; overflow: clip; }
/* Karte blendet rasch aus, das Blatt rasch ein – sonst steht die Schrift kurz doppelt */
::view-transition-old(zytig-blatt) { animation-duration: 140ms; }
::view-transition-new(zytig-blatt) { animation-duration: 220ms; }
html:active-view-transition-type(karte)::view-transition-old(root),
html:active-view-transition-type(karte)::view-transition-new(root) { animation-duration: 300ms; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(zytig-blatt), ::view-transition-old(zytig-blatt), ::view-transition-new(zytig-blatt) { animation: none; }
}