/* Event-Galerie: Gäste-Oberfläche. Farben, Schriften und Hintergründe kommen aus assets/marke.css (vom Bau erzeugt).
   Ruhige, großzügige Fotogalerie: Bühne mit Titel, typografische Kapitel, Blocksatz-Raster, schwebende Aktionsleiste. */

@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("schriften/unbounded-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url("schriften/unbounded-latin-200-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Italiana";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("schriften/italiana-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("schriften/open-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("schriften/open-sans-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("schriften/open-sans-latin-600-normal.woff2") format("woff2");
}

:root {
  --f-grund: var(--grund, #101418);
  --f-flaeche: var(--flaeche, #1a2026);
  --f-text: var(--text, #f2f2f2);
  --f-leise: var(--text-leise, #b8bfc6);
  --f-akzent: var(--akzent, #d8b48a);
  --f-akzent-text: var(--akzent-text, #101418);
  --f-rahmen: var(--rahmen, #2c3640);
  --f-fehler: #ffb4a8;
  --f-schleier: rgba(255, 255, 255, 0.06);
  --schatten: 0 24px 60px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.25);
  --s-titel: var(--schrift-titel, Georgia, serif);
  --s-text: var(--schrift-text, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  --rand: clamp(16px, 4.2vw, 64px);
  --breite: 1760px;
  --luecke: 4px;
  /* --rund kommt aus marke.css (stil.knopfEcken), sonst Pille. Karten höchstens leicht gerundet. */
  --f-rund: var(--rund, 999px);
  --karte-rund: min(var(--f-rund), 14px);
  --bild-rund: min(var(--f-rund), 2px);
  --dauer: 180ms;
  --gleiten: cubic-bezier(0.22, 0.61, 0.36, 1);
  color-scheme: dark;
}

/* Helle Marken (setzt app.js aus --grund) */
:root[data-hell] {
  color-scheme: light;
  --f-fehler: #a3271b;
  --f-schleier: rgba(0, 0, 0, 0.05);
  --schatten: 0 24px 60px rgba(30, 25, 15, 0.16), 0 2px 8px rgba(30, 25, 15, 0.08);
}

@media (min-width: 600px) {
  :root {
    --luecke: 6px;
  }
}

@media (min-width: 1000px) {
  :root {
    --luecke: 8px;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--f-grund);
}

html.ansicht-offen {
  overflow: hidden;
}

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: transparent;
  color: var(--f-text);
  font-family: var(--s-text);
  font-size: 1rem;
  line-height: 1.55;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

/* Ruhiger Marken-Hintergrund hinter der ganzen Seite (marke.json "hintergrund.muster").
   Fest stehend über position: fixed (iOS kennt background-attachment: fixed nicht).
   Ohne Muster bleibt die Fläche einfarbig. */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  height: 100lvh;
  z-index: -2;
  pointer-events: none;
  background-image: var(--hintergrund-muster, none);
  background-size: cover;
  background-position: center;
  opacity: 0.42;
}

/* --leiste-hoehe misst app.js an der festen Leiste (enthält schon den sicheren Bereich unten) */
body.mit-leiste {
  padding-bottom: calc(var(--leiste-hoehe, 132px) + 28px);
}

img {
  max-width: 100%;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
}

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

[hidden] {
  display: none !important;
}

.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.versteckt {
  position: absolute;
  width: 1px;
  height: 1px;
  border: 0;
  opacity: 0;
  pointer-events: none;
  left: -10px;
  top: -10px;
}

.sprunglink {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 50;
  padding: 10px 16px;
  background: var(--f-akzent);
  color: var(--f-akzent-text);
  border-radius: min(var(--f-rund), 6px);
  font-weight: 600;
  text-decoration: none;
}

.sprunglink:focus {
  top: 12px;
}

.titel {
  font-family: var(--s-titel);
  font-weight: var(--titel-gewicht, 400);
  letter-spacing: var(--titel-laufweite, 0);
  text-transform: var(--titel-schreibung, none);
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}

/* Titel mit tabindex="-1" bekommen nur per Skript den Fokus (Zustandswechsel), kein Rahmen */
.titel[tabindex="-1"]:focus {
  outline: none;
}

/* ---------- Bühnenbild ---------- */

/* Liegt hinter Kopf und Galerie-Kopf. Höhe setzt app.js in der Galerie (--buehne-h), sonst Bildschirmhöhe. */
.buehnenbild {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--buehne-h, 100vh);
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

/* Marken-Kopf (marke.json "hintergrund.kopf"): Medaillon rechts, am Handy angeschnitten, aber sichtbar.
   Steht direkt im CSS (nicht erst nach dem Skript), damit der Browser das Bild sofort lädt. */
.buehnenbild {
  background-image: var(--hintergrund-kopf, none);
  background-size: cover;
  background-position: 78% 40%;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 240px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 240px), transparent 100%);
}

@media (min-width: 761px) {
  .buehnenbild {
    background-position: 100% 42%;
  }
}

/* Die Prägung hat helle Kanten. Hinter der Schrift dunkelt ein Schleier in Grundfarbe sie ab,
   rechts bleibt das Medaillon frei (Kontrast gemessen in oberflaeche.spec.mjs, Pixel für Pixel). */
html.mit-kopfbild .buehnenbild::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  background: color-mix(in srgb, var(--f-grund) 50%, transparent);
}

@media (min-width: 761px) {
  html.mit-kopfbild .buehnenbild::after {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.45) 0, rgba(0, 0, 0, 0.38) 60%, rgba(0, 0, 0, 0.2) 76%, transparent 92%);
    background: linear-gradient(to right, color-mix(in srgb, var(--f-grund) 66%, transparent) 0, color-mix(in srgb, var(--f-grund) 58%, transparent) 60%, color-mix(in srgb, var(--f-grund) 30%, transparent) 76%, transparent 92%);
  }
}

/* Ohne Marken-Kopf: erstes Foto der Galerie, oben sichtbar, hinter dem Text fast ganz ausgeblendet.
   Hinter Schrift höchstens 10 % Foto, damit der Kontrast auch über einem weißen Bild hält. */
.titelbild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
  opacity: 0;
  transition: opacity 1400ms var(--gleiten);
  filter: saturate(0.85);
  --maske: linear-gradient(to bottom, rgba(0, 0, 0, 0.44) 0, rgba(0, 0, 0, 0.34) calc(var(--text-oben, 60%) * 0.5), rgba(0, 0, 0, 0.18) calc(var(--text-oben, 60%) * 0.85), rgba(0, 0, 0, 0.1) var(--text-oben, 60%), rgba(0, 0, 0, 0.05) calc(100% - 60px), transparent 100%);
  -webkit-mask-image: var(--maske);
  mask-image: var(--maske);
}

.titelbild.da {
  opacity: 1;
}

body:not([data-zustand="galerie"]) .titelbild,
html.mit-kopfbild .titelbild {
  display: none;
}

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

.kopf {
  width: 100%;
  max-width: var(--breite);
  margin: 0 auto;
  padding: calc(20px + env(safe-area-inset-top, 0px)) var(--rand) 0;
}

.kopf-logo {
  display: block;
  height: 30px;
  width: auto;
}

@media (min-width: 760px) {
  .kopf {
    padding-top: 36px;
  }
  .kopf-logo {
    height: 42px;
  }
}

main {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0 var(--rand);
}

main:focus {
  outline: none;
}

/* ---------- Hinweis für App-Browser ---------- */

.app-hinweis {
  max-width: 40rem;
  margin: 20px 0 0;
  padding: 18px 20px 16px;
  border: 1px solid var(--f-rahmen);
  border-radius: var(--karte-rund);
  background: var(--f-flaeche);
  box-shadow: var(--schatten);
}

body[data-zustand="z-code"] .app-hinweis,
body[data-zustand="z-meldung"] .app-hinweis {
  margin-left: auto;
  margin-right: auto;
}

.app-hinweis-titel {
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: 600;
}

.app-hinweis-text,
.app-hinweis-code {
  margin: 0 0 10px;
  color: var(--f-leise);
  font-size: 0.95rem;
}

.app-hinweis-code {
  color: var(--f-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.app-hinweis-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.app-hinweis-feld {
  display: grid;
  gap: 4px;
  margin-top: 12px;
  font-size: 0.875rem;
  color: var(--f-leise);
}

.app-hinweis-feld input {
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--f-leise);
  border-radius: min(var(--f-rund), 8px);
  background: var(--f-grund);
  color: var(--f-text);
  font: inherit;
}

.app-hinweis-status {
  margin: 8px 0 0;
  font-size: 0.9rem;
  color: var(--f-leise);
}

.app-hinweis-status:empty {
  display: none;
}

/* ---------- Zustände ---------- */

.zustand {
  min-height: 64vh;
  max-width: 30rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
  padding: 48px 0;
}

/* Beim Laden steht der Fuß unterhalb des Bildschirms, sonst springt er, wenn die Galerie erscheint */
#z-laedt {
  min-height: calc(100vh - 120px);
  min-height: calc(100svh - 120px);
}

.zustand-titel {
  font-size: calc(clamp(1.9rem, 3vw + 1.1rem, 2.9rem) * var(--titel-faktor, 1));
}

.zustand-text {
  margin: 0;
  color: var(--f-leise);
  max-width: 28rem;
}

.lader {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--f-rahmen);
  border-top-color: var(--f-akzent);
  animation: drehen 900ms linear infinite;
}

@keyframes drehen {
  to {
    transform: rotate(360deg);
  }
}

.code-form {
  width: 100%;
  display: grid;
  gap: 12px;
  margin-top: 8px;
}

.code-label {
  font-size: 0.875rem;
  color: var(--f-leise);
  text-align: left;
}

.code-feld {
  width: 100%;
  min-height: 60px;
  padding: 10px 14px;
  border-radius: min(10px, var(--f-rund));
  border: 1px solid var(--f-leise);
  background: var(--f-flaeche);
  color: var(--f-text);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 1.5rem;
  letter-spacing: 0.24em;
  text-align: center;
  text-transform: uppercase;
}

.code-feld[aria-invalid="true"] {
  border-color: var(--f-fehler);
  box-shadow: 0 0 0 1px var(--f-fehler);
}

.code-meldung {
  min-height: 1.55em;
  margin: 0;
  color: var(--f-fehler);
  font-size: 0.95rem;
}

.code-meldung:empty {
  min-height: 0;
}

.code-uhr {
  margin: -4px 0 0;
  color: var(--f-leise);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

/* ---------- Knöpfe ---------- */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 22px;
  border-radius: var(--f-rund);
  border: 1px solid transparent;
  background: transparent;
  font-weight: var(--knopf-gewicht, 600);
  font-size: 0.925rem;
  line-height: 1.2;
  text-transform: var(--knopf-schreibung, none);
  letter-spacing: var(--knopf-laufweite, normal);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dauer), color var(--dauer), border-color var(--dauer), opacity var(--dauer), filter var(--dauer);
  -webkit-tap-highlight-color: transparent;
}

.knopf-primaer {
  background-color: var(--f-akzent);
  background-image: var(--knopf-verlauf, none);
  color: var(--f-akzent-text);
}

.knopf-leise {
  border-color: var(--f-leise);
  color: var(--f-text);
}

/* Hover nur mit echtem Zeiger: auf Touch-Geräten bliebe er nach dem Antippen hängen */
@media (hover: hover) and (pointer: fine) {
  .knopf-primaer:hover:not(:disabled) {
    filter: brightness(1.08);
  }
  .knopf-leise:hover:not(:disabled) {
    border-color: var(--f-text);
    background-color: var(--f-schleier);
  }
  .knopf-symbol:hover {
    background: var(--f-schleier);
  }
  .kapitel-link:hover {
    color: var(--f-text);
  }
  .fuss-links a:hover {
    color: var(--f-text);
  }
  .leiste-nebenlink:hover {
    color: var(--f-text);
  }
  .ansicht-pfeil:hover {
    background: rgba(0, 0, 0, 0.72);
  }
  .kachel:hover .kachel-bild img {
    transform: scale(1.03);
  }
}

.knopf-leise[aria-pressed="true"] {
  border-color: var(--f-akzent);
}

.knopf-klein {
  min-height: 40px;
  padding: 0 16px;
  font-size: 0.85rem;
}

.knopf:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.knopf-symbol {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  flex: none;
}

.knopf-symbol svg,
.ansicht-pfeil svg,
.knopf-aufheben svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

/* Großzügige Bühne: Text unten bündig, darüber Luft für Marken-Hintergrund oder Titelfoto */
.galerie-kopf {
  min-height: clamp(250px, 44vh, 400px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  padding: 32px 0 30px;
}

@media (min-width: 760px) {
  .galerie-kopf {
    min-height: clamp(340px, 52vh, 600px);
    gap: 14px;
    padding-bottom: 44px;
  }
}

.galerie-oberzeile {
  margin: 0;
  color: var(--f-text);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.galerie-titel {
  font-size: calc(clamp(2.2rem, 4.6vw + 1rem, 5rem) * var(--titel-faktor, 1));
  max-width: 18ch;
}

.galerie-info {
  margin: 0;
  color: var(--f-leise);
  font-variant-numeric: tabular-nums;
}

/* Jede Angabe bleibt zusammen ("online bis 3. Januar 2027" bricht nicht mitten im Datum) */
.galerie-info span {
  white-space: nowrap;
}

.galerie-werkzeuge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  margin-top: 10px;
}

.galerie-tipp {
  margin: 0;
  font-size: 0.875rem;
  color: var(--f-leise);
}

body.waehlt .galerie-tipp {
  visibility: hidden;
}

/* ---------- Kapitel-Navigation ---------- */

.kapitelleiste {
  position: sticky;
  top: 0;
  z-index: 5;
  margin: 0 calc(var(--rand) * -1);
  background: var(--f-grund);
  border-top: 1px solid var(--f-rahmen);
  border-bottom: 1px solid var(--f-rahmen);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) and (background: color-mix(in srgb, red 50%, transparent)) {
  .kapitelleiste {
    background: color-mix(in srgb, var(--f-grund) 86%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(1.15);
    backdrop-filter: blur(16px) saturate(1.15);
  }
}

/* Verlauf an den Rändern zeigt, dass die Leiste weiterläuft (Klassen setzt app.js) */
.kapitelleiste::before,
.kapitelleiste::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 44px;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dauer);
  z-index: 1;
}

.kapitelleiste::before {
  left: 0;
  background: linear-gradient(to right, var(--f-grund) 25%, transparent);
}

.kapitelleiste::after {
  right: 0;
  background: linear-gradient(to left, var(--f-grund) 25%, transparent);
}

.kapitelleiste.mehr-links::before,
.kapitelleiste.mehr-rechts::after {
  opacity: 1;
}

.kapitelliste {
  display: flex;
  gap: 4px 32px;
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0 var(--rand);
  list-style: none;
  white-space: nowrap;
  overflow-x: auto;
  scroll-padding-inline: var(--rand);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.kapitelliste::-webkit-scrollbar {
  display: none;
}

.kapitel-link {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 15px 0 13px;
  border-bottom: 2px solid transparent;
  color: var(--f-leise);
  text-decoration: none;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  transition: color var(--dauer), border-color var(--dauer);
}

.kapitel-link-nr {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

.kapitel-link[aria-current="true"] {
  color: var(--f-text);
  border-bottom-color: var(--f-akzent);
}

/* ---------- Kapitel ---------- */

.kapitel {
  padding-top: clamp(36px, 5vw, 72px);
  scroll-margin-top: 56px;
}

.kapitel-kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 6px 16px;
  margin-bottom: clamp(14px, 2vw, 24px);
}

.kapitel-kopftext {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  min-width: 0;
}

.kapitel-nr {
  flex: 1 0 100%;
  color: var(--f-leise);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  font-variant-numeric: tabular-nums;
}

.kapitel-titel {
  font-size: calc(clamp(1.5rem, 1.8vw + 1rem, 2.4rem) * var(--titel-faktor, 1));
}

.kapitel-anzahl {
  color: var(--f-leise);
  font-size: 0.9rem;
}

.kapitel-alle {
  white-space: nowrap;
}

/* Am Handy: Titel über die ganze Breite, darunter Anzahl und Knopf in einer Zeile */
@media (max-width: 640px) {
  .kapitel {
    padding-top: 30px;
  }
  .kapitel-kopf {
    margin-bottom: 12px;
    row-gap: 2px;
    align-items: center;
  }
  .kapitel-kopftext {
    display: contents;
  }
  .kapitel-nr,
  .kapitel-titel {
    grid-column: 1 / -1;
  }
  .kapitel-anzahl {
    grid-column: 1;
  }
  .kapitel-alle {
    grid-column: 2;
  }
  .kapitel-link {
    padding: 12px 0 10px;
  }
}

/* ---------- Raster im Blocksatz ----------
   Jede Kachel wächst im Verhältnis ihres Seitenverhältnisses (--v). Dadurch sind alle Fotos einer
   Zeile gleich hoch und füllen die Breite exakt, ohne Skript und ohne Neuberechnung beim Drehen.
   Der unsichtbare Füller am Ende hält die letzte Zeile in Normalhöhe. --zeile ist die Zielhöhe. */
.raster {
  --zeile: calc((100vw - 2 * var(--rand)) / 2.8);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--luecke);
}

.raster::after {
  content: "";
  flex: 100000 1 0px;
}

/* Sobald app.js die Zeilen berechnet hat (bessere Umbrüche, gleichmäßigere Höhen): feste Breiten,
   die letzte Kachel jeder vollen Zeile nimmt den Rundungsrest auf. */
.raster.blocksatz .kachel {
  flex: 0 0 var(--w);
}

.raster.blocksatz .kachel.zeilenende {
  flex-grow: 1;
}

.raster.blocksatz::after {
  content: none;
}

@media (min-width: 600px) {
  .raster {
    --zeile: 190px;
  }
}

@media (min-width: 1000px) {
  .raster {
    --zeile: 236px;
  }
}

@media (min-width: 1500px) {
  .raster {
    --zeile: 280px;
  }
}

.kachel {
  position: relative;
  flex: var(--v, 1.5) 1 calc(var(--v, 1.5) * var(--zeile));
  min-width: 0;
  aspect-ratio: var(--v, 1.5);
  border-radius: var(--bild-rund);
  overflow: hidden;
  background: var(--f-flaeche);
  /* Kacheln außerhalb des Bildschirms rechnet der Browser nicht durch (700 Fotos bleiben flüssig).
     Die Größe steht über aspect-ratio fest, darum springt nichts. */
  content-visibility: auto;
  contain-intrinsic-size: auto calc(var(--v, 1.5) * var(--zeile)) auto var(--zeile);
}

.kachel-bild {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: var(--f-flaeche);
  cursor: zoom-in;
}

.kachel-bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 600ms var(--gleiten), transform 700ms var(--gleiten);
}

/* Weich einblenden, sobald das Foto geladen ist (Klasse setzt app.js) */
.kachel.da .kachel-bild img {
  opacity: 1;
}

.kachel-bild::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--bild-rund);
  box-shadow: inset 0 0 0 0 var(--f-akzent);
  transition: box-shadow var(--dauer);
  pointer-events: none;
}

.kachel-bild:focus-visible {
  outline: none;
}

/* Fokus als Rahmen im Bild, mit dunkler Kante, auf jedem Foto sichtbar */
.kachel-bild:focus-visible::after {
  box-shadow: inset 0 0 0 3px var(--f-akzent), inset 0 0 0 6px rgba(0, 0, 0, 0.75);
}

body.waehlt .kachel-bild {
  cursor: pointer;
}

.kachel.fehlt .kachel-bild img {
  opacity: 0;
}

.kachel-wahl {
  position: absolute;
  top: 0;
  right: 0;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.kachel-wahl:focus-visible {
  outline: none;
}

.kachel-wahl:focus-visible .kachel-kreis {
  opacity: 1;
  outline: 3px solid var(--f-akzent);
  outline-offset: 2px;
  box-shadow: 0 0 0 7px rgba(0, 0, 0, 0.7);
}

.kachel-kreis {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: rgba(0, 0, 0, 0.38);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  transition: background-color var(--dauer), border-color var(--dauer), opacity var(--dauer), transform var(--dauer);
}

.kachel-kreis svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: transparent;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Am Rechner dezent sichtbar, damit der Tipp "Klick auf den Kreis" stimmt */
@media (hover: hover) and (pointer: fine) {
  .kachel-kreis {
    opacity: 0.7;
  }
  .kachel:hover .kachel-kreis,
  .kachel:focus-within .kachel-kreis,
  body.waehlt .kachel-kreis {
    opacity: 1;
  }
}

.kachel.gewaehlt .kachel-kreis {
  opacity: 1;
  background: var(--f-akzent);
  border-color: var(--f-akzent);
  transform: scale(1.06);
}

.kachel.gewaehlt .kachel-kreis svg {
  stroke: var(--f-akzent-text);
}

.kachel.gewaehlt .kachel-bild::after {
  box-shadow: inset 0 0 0 3px var(--f-akzent);
}

.kachel.da.gewaehlt .kachel-bild img {
  opacity: 0.84;
}

/* ---------- Fuß ---------- */

.fuss {
  width: 100%;
  max-width: var(--breite);
  margin: clamp(72px, 9vw, 120px) auto 0;
  padding: 28px var(--rand) calc(32px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--f-rahmen);
  color: var(--f-leise);
  font-size: 0.875rem;
}

.fuss-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
}

.fuss-links a {
  display: inline-block;
  padding: 8px 0;
  color: var(--f-leise);
  text-underline-offset: 3px;
}

body.mit-event-knopf #link-event {
  display: none;
}

.fuss-hinweis {
  margin: 10px 0 0;
  max-width: 44rem;
}

/* ---------- Aktionsleiste ---------- */

/* Am Handy volle Breite unten, am Rechner eine schwebende Karte. */
.leiste {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  background: var(--f-flaeche);
  border-top: 1px solid var(--f-rahmen);
  box-shadow: var(--schatten);
  padding: 12px max(var(--rand), env(safe-area-inset-left, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(var(--rand), env(safe-area-inset-right, 0px));
  animation: hochgleiten 320ms var(--gleiten) both;
}

@keyframes hochgleiten {
  from {
    transform: translateY(16px);
    opacity: 0;
  }
}

@media (min-width: 761px) {
  .leiste {
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    width: min(calc(100% - 2 * var(--rand)), 940px);
    margin: 0 auto;
    padding: 14px 16px 14px 24px;
    border: 1px solid var(--f-rahmen);
    border-radius: var(--karte-rund);
  }
}

.leiste-zeile {
  max-width: var(--breite);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
}

.zaehler {
  margin: 0;
  min-width: 0;
  flex: 1 1 16rem;
  font-variant-numeric: tabular-nums;
}

.zaehler-zahl {
  font-weight: 600;
}

.zaehler-rest {
  color: var(--f-leise);
}

.zaehler-rest::before {
  content: " · ";
}

.leiste-knoepfe {
  display: flex;
  gap: 10px;
  flex: 0 1 auto;
}

.leiste.arbeitet .leiste-knoepfe {
  display: none;
}

.leiste-nebenlink {
  display: block;
  margin: 2px auto 0;
  min-height: 44px;
  padding: 6px 4px;
  border: 0;
  background: none;
  color: var(--f-leise);
  font-size: 0.875rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.knopf-aufheben svg {
  display: none;
}

.text-kurz {
  display: none;
}

.leiste .knopf {
  white-space: nowrap;
}

/* Am Handy eine Zeile: Zähler, Aufheben als Kreuz, Hauptknopf. Spart Höhe für Fotos. */
@media (max-width: 640px) {
  .leiste {
    padding-top: 10px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .leiste-zeile {
    flex-wrap: nowrap;
    gap: 8px;
  }
  .zaehler {
    flex: 1 1 auto;
    font-size: 0.875rem;
    line-height: 1.3;
  }
  .zaehler-zahl,
  .zaehler-rest {
    display: block;
  }
  .zaehler-rest::before {
    content: none;
  }
  .leiste-knoepfe {
    flex: 0 0 auto;
    gap: 8px;
    align-items: center;
  }
  .leiste-knoepfe .knopf {
    min-height: 48px;
    padding: 0 16px;
  }
  .leiste-knoepfe .knopf-aufheben {
    width: 48px;
    padding: 0;
    border-radius: 50%;
  }
  .knopf-aufheben svg {
    display: block;
  }
  .knopf-aufheben .knopf-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

@media (max-width: 380px) {
  .zaehler-wort {
    display: none;
  }
  .text-lang {
    display: none;
  }
  .text-kurz {
    display: inline;
  }
  .leiste-knoepfe .knopf {
    padding: 0 14px;
  }
}

.panel {
  max-width: var(--breite);
  margin: 0 auto 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--f-rahmen);
  max-height: 55vh;
  overflow-y: auto;
  animation: einblenden 240ms var(--gleiten) both;
}

@keyframes einblenden {
  from {
    opacity: 0;
  }
}

.panel-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.panel-titel {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
}

.panel-text {
  margin: 2px 0 12px;
  color: var(--f-leise);
  max-width: 48rem;
}

.fortschritt {
  display: block;
  width: 100%;
  height: 4px;
  margin: 0 0 14px;
  border: 0;
  border-radius: 2px;
  background: var(--f-rahmen);
  overflow: hidden;
  -webkit-appearance: none;
  appearance: none;
}

.fortschritt::-webkit-progress-bar {
  background: var(--f-rahmen);
}

.fortschritt::-webkit-progress-value {
  background: var(--f-akzent);
  transition: width var(--dauer);
}

.fortschritt::-moz-progress-bar {
  background: var(--f-akzent);
}

.panel-liste {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: grid;
  gap: 8px;
}

.panel-liste:empty {
  display: none;
}

.panel-eintrag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 8px 0;
  border-top: 1px solid var(--f-rahmen);
}

.panel-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 640px) {
  .panel-knoepfe .knopf {
    flex: 1 1 100%;
    min-height: 52px;
    white-space: normal;
  }
}

/* ---------- Großansicht ---------- */

.ansicht {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #060708;
  background: color-mix(in srgb, var(--f-grund) 20%, #050505);
  color: #fff;
  overflow: hidden;
  color-scheme: dark;
}

.ansicht[open] {
  display: flex;
  flex-direction: column;
  animation: einblenden 220ms var(--gleiten) both;
}

.ansicht::backdrop {
  background: #000;
}

.ansicht-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  padding: calc(8px + env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px));
  position: relative;
  z-index: 2;
}

.ansicht-titel {
  margin: 0;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  min-width: 0;
}

.ansicht-kapitel {
  color: #c9cfd2;
}

.ansicht-knoepfe {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.ansicht .knopf {
  white-space: nowrap;
}

@media (max-width: 360px) {
  .ansicht .knopf-klein {
    padding: 0 12px;
  }
  .ansicht-knoepfe {
    gap: 6px;
  }
}

.ansicht .knopf-leise {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
}

.ansicht .knopf-leise[aria-pressed="true"] {
  background: var(--f-akzent);
  border-color: var(--f-akzent);
  color: var(--f-akzent-text);
}

@media (hover: hover) and (pointer: fine) {
  .ansicht .knopf-symbol:hover,
  .ansicht .knopf-leise:hover:not(:disabled):not([aria-pressed="true"]) {
    background: rgba(255, 255, 255, 0.1);
  }
}

.haken {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: none;
}

[aria-pressed="true"] > .haken {
  display: block;
}

.buehne {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 0 calc(8px + env(safe-area-inset-bottom, 0px));
  touch-action: pan-y pinch-zoom;
  user-select: none;
  -webkit-user-select: none;
  overflow: hidden;
}

.buehne-bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: translateX(var(--wisch, 0px));
  transition: transform 220ms var(--gleiten), opacity 260ms ease;
  -webkit-user-drag: none;
}

.buehne.wischt .buehne-bild {
  transition: none;
}

#ansicht-bild {
  opacity: 0;
}

.buehne.geladen #ansicht-bild {
  opacity: 1;
}

.buehne.geladen .buehne-platz {
  opacity: 0;
}

.ansicht-pfeil {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 52px;
  height: 52px;
  margin-top: -26px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  cursor: pointer;
}

@media (min-width: 641px) {
  .buehne-bild {
    left: 80px;
    right: 80px;
    width: calc(100% - 160px);
  }
}

.ansicht-pfeil-links {
  left: max(12px, env(safe-area-inset-left, 0px));
}

.ansicht-pfeil-rechts {
  right: max(12px, env(safe-area-inset-right, 0px));
}

@media (max-width: 640px) {
  .ansicht-pfeil {
    top: auto;
    margin-top: 0;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    width: 48px;
    height: 48px;
  }
}

/* ---------- Bewegung reduzieren ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .kachel:hover .kachel-bild img {
    transform: none !important;
  }
  .lader {
    animation: none;
    border-top-color: var(--f-rahmen);
  }
}

/* Hohe Kontraste: Bühnenbild und Muster weg, damit nichts hinter der Schrift liegt */
@media (forced-colors: active) {
  body::before,
  .buehnenbild {
    display: none;
  }
}