/* Spiel & Kultur – schlichtes Layout für alle drei Seiten.
   Fokus auf dem Text, keine Seitenleisten (Kundenwunsch). */
:root {
  --text: #1d1d1f;
  --leise: #6b6b70;
  --linie: #e4e4e7;
  --flaeche: #f6f6f4;
  /* Hauptfarbe aller Seiten (Kunde): Flächen, Knöpfe, Icons. Für Text auf Weiß zu hell (3,3:1),
     darum Links und kleine Schrift in --akzent-text (4,5:1). */
  --akzent: #ff408c;
  --akzent-text: #d63575;
  --anthrazit: #384349;
  /* Schriften wie im Referenz-Theme Alia, selbst gehostet (fonts/fonts.css) */
  --schrift: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --titel: "Poppins", "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --breit: 1100px;
  --schmal: 720px;
  --rundung: 7px; /* Bilder und Videos, wie im Referenz-Theme Alia */
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font: 17px/1.75 var(--schrift); color: var(--text); background: #fff; }
a { color: var(--akzent-text); }
img { max-width: 100%; height: auto; display: block; }

/* Seitenwechsler */
.wechsler { display: flex; justify-content: center; gap: .6rem; padding: .5rem 1rem;
  background: var(--flaeche); border-bottom: 1px solid var(--linie); font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; }
/* Aktuelle Seite in der Hauptfarbe mit Haken, die anderen in Anthrazit. Die Hover-Fläche hat Innenabstand,
   den ein negativer Außenabstand ausgleicht – die Leiste bleibt so hoch wie vorher. */
.wechsler { align-items: center; }
.wechsler a { display: inline-flex; align-items: center; gap: .35em; color: var(--anthrazit); text-decoration: none; font-weight: 500;
  padding: .2rem .65rem; margin-block: -.2rem; border-radius: 999px; transition: background-color .2s ease, color .2s ease; }
.wechsler a:hover { background: color-mix(in srgb, var(--anthrazit) 8%, transparent); }
.wechsler a[aria-current] { color: var(--akzent); font-weight: 700; }
.wechsler a[aria-current]:hover { background: color-mix(in srgb, var(--akzent) 10%, transparent); }
/* „· zuspieler.de“ hinter dem Namen: normale Schreibung, etwas leiser; mobil ausgeblendet */
.wechsler__zusatz { text-transform: none; letter-spacing: 0; font-weight: 400; opacity: .75; }
.wechsler__haken { display: inline-grid; width: 1.05em; height: 1.05em; }
.wechsler__haken svg { width: 100%; height: 100%; }
.wechsler a:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* Kopf */
.kopf { max-width: var(--breit); margin: 0 auto; padding: 2rem 1rem 0; text-align: center; }
.kopf__leiste { display: flex; justify-content: center; align-items: center; }
.kopf__logo { display: inline-block; text-decoration: none; color: var(--text); }
.kopf__logo img { height: 70px; width: auto; }
.kopf__name { font: 700 2.4rem/1.1 var(--titel); }
.kopf__unterzeile { margin: .4rem 0 0; color: var(--leise); font-size: .95rem; }
.kopf__menueknopf { display: none; }

/* Menü (Desktop): eine Zeile, Untermenüs als Dropdown */
.menue { margin-top: 1.4rem; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.menue__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 .4rem; }
.menue__punkt { position: relative; }
.menue a, .menue summary { display: block; padding: .75rem .7rem; color: var(--text); text-decoration: none; font-size: .95rem; cursor: pointer; white-space: nowrap; word-spacing: .15em; }
.menue summary { list-style: none; }
.menue summary::-webkit-details-marker { display: none; }
.menue summary::after { content: ""; display: inline-block; width: .38em; height: .38em; margin-left: .45em; vertical-align: .2em;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .15s; }
.menue details[open] > summary::after { transform: rotate(-135deg); vertical-align: -.05em; }
.menue a:hover, .menue summary:hover, .menue a[aria-current] { color: var(--akzent-text); }
/* Flyout wie im Referenz-Theme Alia: Pfeil, heller Rahmen, knapper Schatten, gestrichelte Trenner.
   Schwebt mit Abstand unter der Leiste und gleitet beim Öffnen sanft von oben ein. Öffnet per Klick und (Maus) per Hover, siehe site.js. */
.menue__unter { list-style: none; margin: 0; padding: .25rem 0; position: absolute; left: 50%; top: calc(100% + 14px); transform: translateX(-50%);
  width: max-content; min-width: 12rem; max-width: 20rem; background: #fff; border: 1px solid #ececec; border-radius: var(--rundung); z-index: 20; text-align: left;
  box-shadow: 0 6px 20px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.04); }
.menue__unter::before, .menue__unter::after { content: ""; position: absolute; left: 50%; margin-left: -9px;
  border: 9px solid transparent; border-top: 0; }
.menue__unter::before { top: -10px; border-bottom: 10px solid #e2e2e2; }
.menue__unter::after { top: -9px; border-bottom: 10px solid #fff; }
.menue__unter a { display: flex; align-items: flex-start; margin: 0 1.1rem; padding: .7rem 0; border-bottom: 1px dashed #e0e0e0; white-space: normal;
  line-height: 1.45; font-size: .875rem; letter-spacing: .01em; color: #323232; transition: color .15s ease-in; }
.menue__unter li:last-child a { border-bottom: 0; }
.menue__unter .menue__icon { margin-top: .05em; }
/* Unsichtbare Brücke über den Abstand, damit das Flyout beim Hinüberfahren offen bleibt */
.menue__gruppe[open] > summary::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 16px; }
/* Mit JS (Desktop): ein- und ausblenden, leicht von oben (Klasse aus site.js) */
@media (min-width: 801px) {
  .mit-js .menue__unter { opacity: 0; transform: translateX(-50%) translateY(-8px); transition: opacity .25s ease, transform .25s ease; }
  .mit-js .menue__gruppe--sichtbar > .menue__unter { opacity: 1; transform: translateX(-50%); }
  /* Startzustand beim Öffnen: Solange <details> zu ist, hat das Flyout keinen Stil, von dem es überblenden könnte. */
  @starting-style { .mit-js .menue__gruppe--sichtbar > .menue__unter { opacity: 0; transform: translateX(-50%) translateY(-8px); } }
}
@media (min-width: 801px) and (prefers-reduced-motion: reduce) { .mit-js .menue__unter { transition: none; } }
/* Icons (Phosphor Duotone): Strich in Textfarbe, Fläche in der Akzentfarbe – nur bei Hover/Fokus,
   beim aktuellen Menüpunkt und bei offenem Untermenü */
.menue__icon { display: inline-block; width: 1.2em; height: 1.2em; margin-right: .45em; vertical-align: -.25em; flex: none; }
.menue__icon svg { display: block; width: 100%; height: 100%; }
.menue__icon [opacity] { fill: var(--akzent); opacity: 0; transition: opacity .2s ease; }
.menue a:hover .menue__icon [opacity], .menue summary:hover .menue__icon [opacity],
.menue a:focus-visible .menue__icon [opacity], .menue summary:focus-visible .menue__icon [opacity],
.menue a[aria-current] .menue__icon [opacity], .menue__gruppe[open] > summary .menue__icon [opacity],
.menue__gruppe:has(a[aria-current]) > summary .menue__icon [opacity] { opacity: .3; }
/* Liegt die aktuelle Seite im Untermenü, ist auch der Hauptpunkt markiert (Bereich erkennbar). */
.menue__gruppe:has(a[aria-current]) > summary { color: var(--akzent-text); }

/* Desktop (mit JS): Kopf bleibt beim Scrollen stehen und wird ab etwas Scrollweg sanft kleiner
   (.oben--klein, gesetzt in site.js). Er liegt fixiert über der Seite; der Platz dafür wird als
   padding-top am body reserviert (--oben-hoehe), damit das Schrumpfen nichts verschiebt. */
@media (min-width: 801px) {
  .mit-js body { padding-top: var(--oben-hoehe, 0px); }
  .mit-js .oben { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: #fff;
    transition: box-shadow .3s ease; }
  .mit-js .oben--klein { box-shadow: 0 4px 18px rgba(0,0,0,.06); }
  .mit-js { scroll-padding-top: 9rem; }

  .mit-js .wechsler, .mit-js .kopf, .mit-js .kopf__logo img, .mit-js .kopf__name, .mit-js .menue,
  .mit-js .menue__liste > .menue__punkt > a, .mit-js .menue__liste > .menue__punkt summary, .mit-js .kopf__unterzeile {
    transition: padding .3s ease, height .3s ease, margin .3s ease, font-size .3s ease, opacity .2s ease, max-height .3s ease, border-color .3s ease; }
  .mit-js .kopf__unterzeile { max-height: 2em; overflow: hidden; }

  .oben--klein .wechsler { padding-block: .3rem; }
  .oben--klein .kopf { padding-top: .6rem; }
  .oben--klein .kopf__logo img { height: 40px; }
  .oben--klein .kopf__name { font-size: 1.6rem; }
  .oben--klein .kopf__unterzeile { max-height: 0; margin: 0; opacity: 0; }
  .oben--klein .menue { margin-top: .45rem; border-bottom-color: transparent; }
  /* Linien über und unter dem Menü laufen bis zum Rand (Kunde 12.10.) – als Fläche hinter dem Menü, die bis an den
     Bildschirmrand reicht; .oben schneidet seitlich ab, damit nichts quer scrollt. */
  .oben { overflow-x: clip; }
  .menue { position: relative; border-color: transparent; }
  .menue::before { content: ""; position: absolute; inset: -1px calc(50% - 50vw); border-block: 1px solid var(--linie); pointer-events: none;
    transition: border-color .3s ease; }
  .oben--klein .menue::before { border-bottom-color: transparent; }
  .oben--klein .menue__liste > .menue__punkt > a, .oben--klein .menue__liste > .menue__punkt summary { padding-block: .5rem; }
}
@media (min-width: 801px) and (prefers-reduced-motion: reduce) {
  .mit-js .oben, .mit-js .oben * { transition: none !important; }
}

/* Suche: Feld (Kopf, mobil im Menü, Suchseite) */
/* „Weiterlesen“ unter Teasern */
.weiterlesen { margin: .5rem 0 0; font-size: .9rem; font-weight: 600; }
.weiterlesen a { color: var(--akzent-text); text-decoration: none; }
.weiterlesen a:hover { text-decoration: underline; }
.aufmacher .weiterlesen a { color: #fff; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.suchformular { display: flex; align-items: center; background: #fff; border: 1px solid var(--linie); border-radius: var(--rundung); transition: border-color .2s ease, box-shadow .2s ease; }
.suchformular:focus-within { border-color: var(--akzent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--akzent) 15%, transparent); }
.suchformular input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: .95rem; padding: .6rem 0 .6rem .9rem; color: var(--text); outline: none; }
.suchformular input::-webkit-search-cancel-button { cursor: pointer; }
.suchformular__knopf { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border: 0; background: none; color: var(--akzent-text); cursor: pointer; }
.suchformular__knopf svg { width: 1.2rem; height: 1.2rem; }
.suchformular__knopf [opacity] { opacity: 0; }
/* Desktop: Lupe am Ende des Menüs, Feld schwebt darunter wie die Flyouts */
.menue__suche-mobil { display: none; }
.menue__punkt--suche { position: relative; }
.menue__suchlink { cursor: pointer; }
.menue__suchlink .menue__icon { margin-right: 0; }
.suchfeld { position: absolute; right: 0; top: calc(100% + 14px); z-index: 20; width: 21rem; padding: .6rem; background: #fff;
  border: 1px solid #ececec; border-radius: var(--rundung); box-shadow: 0 6px 20px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.04);
  transition: opacity .25s ease, transform .25s ease; }
@starting-style { .suchfeld { opacity: 0; transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .suchfeld { transition: none; } }
.menue__suchlink[aria-expanded="true"] { color: var(--akzent-text); }
.menue__suchlink[aria-expanded="true"] .menue__icon [opacity] { opacity: .3; }
/* Ergebnisseite */
.sortierung { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .4rem; margin: -.4rem 0 1.4rem; font-size: .85rem; }
.sortierung__label { color: var(--leise); margin-right: .2rem; }
.sortierung a { padding: .25rem .8rem; border: 1px solid var(--linie); border-radius: 999px; color: var(--text); text-decoration: none; transition: border-color .2s, color .2s; }
.sortierung a:hover { border-color: var(--akzent); color: var(--akzent-text); }
.sortierung a[aria-current] { border-color: var(--akzent); color: var(--akzent-text); font-weight: 600; }
.suchseite { max-width: var(--schmal); margin: 0 auto; }
.suchseite .suchformular { margin-bottom: 1.4rem; }
.suchseite__anzahl { color: var(--leise); font-size: .9rem; margin: 0 0 2rem; }
.suchseite .liste { gap: 1.8rem; }
.suchseite .karte { display: grid; grid-template-columns: 11rem 1fr; gap: 1.2rem; align-items: start; }
.suchseite .karte__bild img { aspect-ratio: 4 / 3; }
.suchseite .karte__text { padding-top: 0; grid-column: 2; }
.suchseite .karte__titel { font-size: 1.1rem; }
.suchseite .karte__teaser { font-size: .9rem; }
@media (max-width: 600px) { .suchseite .karte { grid-template-columns: 6.5rem 1fr; gap: .9rem; } .suchseite .karte__teaser { display: none; } }

/* Mobil: Seitenwechsler klebt oben; Logo + Menü-Knopf als Leiste unten (Daumenreichweite),
   das Menü öffnet sich darüber als Blatt. Ohne JS bleibt der Kopf oben und das Menü sichtbar. */
@media (max-width: 800px) {
  .oben { position: sticky; top: 0; z-index: 50; background: #fff; }
  .wechsler { gap: .3rem; font-size: .75rem; }
  .wechsler__zusatz { display: none; }
  .kopf { padding: .6rem 1rem; text-align: left; }
  .kopf__leiste { justify-content: space-between; gap: 1rem; }
  .kopf__logo img { height: 38px; }
  .kopf__name { font-size: 1.5rem; }
  .kopf__unterzeile { display: none; }

  .mit-js { --leiste: calc(3.9rem + env(safe-area-inset-bottom, 0px)); }
  .mit-js body { padding-bottom: var(--leiste); }
  .mit-js .kopf { padding: 0; }
  .mit-js .kopf__leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; height: var(--leiste);
    padding: 0 1rem env(safe-area-inset-bottom, 0px); background: #fff; border-top: 1px solid var(--linie);
    box-shadow: 0 -6px 20px rgba(0,0,0,.05); }

  /* Menü-Knopf in der Akzentfarbe, Icon (Phosphor Bold) wechselt zu „Schließen“ */
  .mit-js .kopf__menueknopf { display: inline-flex; align-items: center; gap: .45rem; font: 600 .95rem/1 var(--schrift);
    padding: .65rem .8rem .65rem .95rem; border: 1px solid color-mix(in srgb, var(--akzent) 30%, #fff); border-radius: 10px;
    background: color-mix(in srgb, var(--akzent) 9%, #fff); color: var(--akzent-text); cursor: pointer; }
  .kopf__menueknopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
  .kopf__knopficon { width: 1.35em; height: 1.35em; }
  .kopf__knopficon svg { display: block; width: 100%; height: 100%; }
  .kopf__knopficon--zu, [aria-expanded="true"] .kopf__knopficon--auf { display: none; }
  [aria-expanded="true"] .kopf__knopficon--zu { display: block; }

  .menue { margin-top: .6rem; border-bottom: 0; }
  .mit-js .menue { display: none; }
  /* Offenes Menü: Blatt über der Leiste, scrollt in sich; Seite dahinter abgedunkelt und gesperrt. */
  .mit-js .kopf--offen::before { content: ""; position: fixed; inset: 0; z-index: 55; background: rgba(20, 20, 22, .35); }
  .mit-js .kopf--offen .menue { display: block; position: fixed; left: 0; right: 0; bottom: var(--leiste); z-index: 58; margin: 0;
    max-height: calc(100dvh - var(--leiste) - 3.5rem); overflow-y: auto; overscroll-behavior: contain;
    background: #fff; border: 0; border-radius: 16px 16px 0 0; padding: .4rem 1rem 0; animation: blatt .18s ease-out; }
  .menue__liste { display: block; padding: .3rem 0 .8rem; }
  .menue__punkt { border-bottom: 1px solid var(--linie); }
  .menue__punkt:last-child { border-bottom: 0; }
  .menue a, .menue summary { padding: .85rem .2rem; font-size: 1.05rem; white-space: normal; }
  .menue summary { display: flex; align-items: center; }
  .menue summary::after { margin-left: auto; }
  .menue__gruppe[open] > summary::before { display: none; }
  .menue__punkt--suche { display: none; }
  .menue__suche-mobil { display: block; padding: .8rem 0 .4rem; }
  .menue__unter { position: static; transform: none; width: auto; border: 0; box-shadow: none; border-radius: 0; padding: 0 0 .5rem .9rem; background: transparent; }
  .menue__unter::before, .menue__unter::after { display: none; }
  .menue__unter a { display: block; margin: 0; border: 0; padding: .55rem .2rem; font-size: 1rem; letter-spacing: 0; color: #3a3a3d; }
}
@keyframes blatt { from { transform: translateY(1.5rem); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .kopf--offen .menue { animation: none; } }

/* Inhalt */
.inhalt { max-width: var(--breit); margin: 0 auto; padding: 2rem 1rem 4rem; }
.seitentitel { font: 700 1.8rem/1.3 var(--titel); text-align: center; margin: 0 0 2rem; }
.meta { margin: 0 0 .4rem; color: var(--leise); font-size: .85rem; }
.meta a { color: inherit; }
/* Hervorgehobene Beiträge der Startseite */
.lesetipp { display: inline-block; margin-right: .7em; padding: .05rem .55rem; border-radius: 999px; background: var(--akzent-text); color: #fff;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: .08em; }
.titelliste .lesetipp { margin: 0 0 0 .4em; }
/* Datum, Kategorie, Autor*in mit Icon (Phosphor, ohne Duotone-Fläche) */
.meta__teil { display: inline-flex; align-items: center; gap: .3em; margin-right: .9em; }
.meta__teil:last-child { margin-right: 0; }
.meta__icon { display: inline-grid; flex: none; width: 1.05em; height: 1.05em; opacity: .8; }
.meta__icon svg { width: 100%; height: 100%; }
.meta__icon [opacity] { display: none; }

/* Karten */
.hervorgehoben { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 3rem;
  padding-bottom: 3rem; border-bottom: 1px solid var(--linie); }
.liste { display: grid; gap: 2.5rem; max-width: var(--schmal); margin: 0 auto; }
.karte__bild img { aspect-ratio: 900 / 350; object-fit: cover; width: 100%; border-radius: var(--rundung); }
.karte__text { padding-top: .9rem; }
.karte__titel { font: 700 1.3rem/1.4 var(--titel); margin: 0 0 .4rem; }
.karte__titel a { color: var(--text); text-decoration: none; }
.karte__titel a:hover { color: var(--akzent-text); }
.karte__teaser { margin: 0; color: #3a3a3d; font-size: .95rem; }
.karte--gross { grid-column: 1 / -1; }
.karte--gross .karte__titel { font-size: 1.7rem; }
@media (max-width: 760px) { .hervorgehoben { grid-template-columns: 1fr; } }

/* Startseite aus Bausteinen (Einleitung, Text, Knöpfe, Beitragsliste, Instagram, Trennlinie) */
.bausteine { max-width: var(--schmal); margin: 0 auto; display: grid; gap: 2rem; }
/* Zwei Bausteine mit halber Breite nebeneinander (zuspieler.de: PR-Meldungen | Angebote) */
.bausteine { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.6rem; }
.bausteine > * { grid-column: 1 / -1; }
.bausteine > .baustein--halb { grid-column: auto; }
@media (max-width: 700px) { .bausteine > .baustein--halb { grid-column: 1 / -1; } }
.baustein--kasten { background: var(--flaeche); border-radius: var(--rundung); padding: 1.2rem 1.4rem; text-align: center; }
.baustein--kasten .baustein__titel { margin-top: 0; }
.baustein--kasten p { margin: 0 0 .8rem; }
.baustein--kasten .baustein--knoepfe { justify-content: center; margin: 0; }
.baustein--feeds { display: grid; grid-template-rows: auto 1fr auto; gap: 1rem; }
.baustein--feeds .baustein__titel { margin: 0; }
.baustein--feeds .knopf--breit { justify-self: stretch; justify-content: center; text-align: center; margin: 0; }
.baustein--feeds .feeds__raster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem 1rem; }
.baustein--feeds .feed__titel { font-size: .95rem; }
.baustein--halb .feeds__raster { grid-template-columns: 1fr; }
@media (max-width: 700px) { .baustein--feeds .feeds__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } .baustein--halb .feeds__raster { grid-template-columns: 1fr; } }
.baustein--quellentipp { margin: 0; }
.baustein--quellentipp svg { width: 1.1em; height: 1.1em; vertical-align: -.15em; color: var(--akzent-text); }
.baustein { margin: 0; }
.baustein--einleitung { text-align: center; }
.baustein--einleitung .seitentitel { margin-bottom: .6rem; }
.baustein__lead { margin: 0; font-size: 1.1rem; color: #3a3a3d; }
.baustein__titel { font: 700 1.3rem/1.35 var(--titel); margin: 0 0 .6rem; }
.baustein--text .text > :first-child { margin-top: 0; }
.baustein--text .text > :last-child { margin-bottom: 0; }
.baustein--knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.baustein a.knopf { text-decoration: none; }
.baustein--kasten { background: var(--flaeche); border-radius: var(--rundung); padding: 1.4rem 1.6rem; }
.titelliste { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.titelliste a { color: var(--text); text-decoration: none; font-weight: 500; }
.titelliste a:hover { color: var(--akzent-text); }
.titelliste li { padding-left: 1.1rem; position: relative; }
.titelliste li::before { content: ""; position: absolute; left: 0; top: .7em; width: .4rem; height: .4rem; border-radius: 50%; background: var(--akzent); }
.baustein__mehr { margin: .9rem 0 0; font-size: .9rem; }
.baustein--trenner { border: 0; border-top: 1px solid var(--linie); width: 100%; }
.baustein__knopf { margin: 1.4rem 0 0; text-align: center; }
/* Aufmacher (wie auf der alten Journal-Startseite: dunkle Fläche, großes Bild) */
.aufmacher { background: #2f3b3f; color: #f2f4f4; border-radius: var(--rundung); overflow: hidden; }
.aufmacher .mini__bild img { width: 100%; aspect-ratio: 1400 / 580; object-fit: cover; border-radius: 0; }
.aufmacher__text { padding: 1.1rem 1.4rem 1.4rem; }
.aufmacher .meta { color: #b9c4c6; }
.aufmacher__titel { font: 700 1.6rem/1.3 var(--titel); margin: 0 0 .5rem; }
.aufmacher__titel a { color: #fff; text-decoration: none; }
.aufmacher__titel a:hover { text-decoration: underline; }
.aufmacher p:last-child { margin: 0; font-size: .95rem; }
/* Spalten mit kleinen Beitragskarten */
.spalten { display: grid; gap: 1.6rem; margin-top: 1.6rem; }
.spalten--2 { grid-template-columns: repeat(2, 1fr); }
.spalten--3 { grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 0; }
.mini__bild img { width: 100%; aspect-ratio: 840 / 350; object-fit: cover; border-radius: var(--rundung); margin-bottom: .6rem; }
.mini .meta { margin-bottom: .2rem; }
.mini__titel { font: 700 1.1rem/1.4 var(--titel); margin: 0 0 .4rem; }
.mini__titel--klein { font-size: .95rem; }
.mini__titel a { color: var(--text); text-decoration: none; }
.mini__titel a:hover { color: var(--akzent-text); }
.mini__anriss { margin: 0; font-size: .9rem; color: #3a3a3d; }
@media (max-width: 700px) { .spalten--2, .spalten--3 { grid-template-columns: 1fr; } .aufmacher__titel { font-size: 1.25rem; } .aufmacher__text { padding: 1rem 1.1rem 1.2rem; } }
/* Schlagwort-Wolke */
.wolke { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .9rem; line-height: 1.4; }
.wolke a { color: var(--akzent-text); text-decoration: none; }
.wolke a:hover { text-decoration: underline; }

/* Termine: Datumsblatt + Text; regelmäßige Treffen als Karten; Kalender-Abo */
.termine { display: grid; gap: 2.6rem; margin-top: 2rem; }
.termine__liste { display: grid; gap: 1.1rem; }
.termine__monat { margin: 1rem 0 0; font: 600 .78rem/1.3 var(--schrift); text-transform: uppercase; letter-spacing: .1em; color: var(--leise); }
.termine__monat:first-of-type { margin-top: 0; }
.termin { display: grid; grid-template-columns: 4.2rem 1fr; gap: 1.1rem; align-items: start; }
.termin__blatt { display: grid; justify-items: center; padding: .45rem 0 .55rem; border: 1px solid var(--linie); border-radius: var(--rundung);
  background: #fff; line-height: 1.1; text-align: center; }
.termin__blatt::before { content: ""; display: block; width: 100%; height: 5px; margin: -.45rem 0 .4rem; background: var(--akzent); border-radius: var(--rundung) var(--rundung) 0 0; }
.termin__wochentag { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--leise); }
.termin__tag { font: 700 1.55rem/1.15 var(--titel); }
.termin__monat { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--leise); }
.termin__zeit { margin: 0; font-size: .85rem; color: var(--leise); }
.termin__titel { margin: .1rem 0 .25rem; font: 700 1.1rem/1.35 var(--titel); }
.termin__titel a { color: var(--text); text-decoration: none; }
.termin__titel a:hover { color: var(--akzent-text); }
.termin__meta { margin: 0; display: flex; flex-wrap: wrap; gap: .2rem .8rem; font-size: .85rem; color: #3a3a3d; }
.termin__marke { display: inline-block; padding: .05rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 600; letter-spacing: .03em;
  background: color-mix(in srgb, var(--akzent) 12%, #fff); color: var(--akzent-text); }
.termin__marke--abgesagt { background: #fbe9e7; color: #b3261e; }
.termin__marke--tickets { background: var(--akzent-text); color: #fff; text-decoration: none; }
.termin--abgesagt .termin__titel a { text-decoration: line-through; color: var(--leise); }
.termin--hinweis .termin__blatt::before { background: var(--linie); }
.termin__teaser { margin: .4rem 0 0; font-size: .9rem; color: #3a3a3d; }
.termine__fuss { margin: 0; font-size: .9rem; }
.termine__liste .sortierung { margin: -.3rem 0 .4rem; }
.termine__hinweis { margin-top: .4rem; }
/* Einzelne Daten der regelmäßigen Treffen: kompakte Zeile, eingerückt wie der Text neben dem Datumsblatt */
.treffen { display: grid; grid-template-columns: 4.2rem 1fr; gap: 1.1rem; align-items: baseline; padding: .15rem 0; }
.treffen p { margin: 0; }
.treffen__datum { text-align: center; font-size: .8rem; font-weight: 600; color: var(--leise); white-space: nowrap; }
.treffen__text { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .7rem; font-size: .92rem; }
.treffen__zeit { color: var(--leise); font-variant-numeric: tabular-nums; }
.treffen__titel { font-weight: 600; color: var(--text); text-decoration: none; }
a.treffen__titel:hover { color: var(--akzent-text); }
.treffen__ort { color: var(--leise); font-size: .85rem; }
.termin__marke--regel { background: var(--flaeche); color: var(--leise); }
.treffen--abgesagt .treffen__titel, .treffen--abgesagt .treffen__zeit { text-decoration: line-through; color: var(--leise); }
.regeltermin__ausfall { margin: .5rem 0 0; font-size: .85rem; color: #b3261e; }
.regeltermine__liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.regeltermin { background: var(--flaeche); border-radius: var(--rundung); padding: 1.1rem 1.3rem; }
.regeltermin__titel { margin: 0 0 .3rem; font: 700 1.1rem/1.3 var(--titel); }
.regeltermin__zeit { margin: 0; font-weight: 600; }
.regeltermin__ort { margin: .3rem 0 0; font-size: .9rem; }
.regeltermin__hinweis { margin: .5rem 0 0; font-size: .85rem; padding: .4rem .6rem; background: #fff7e0; border-radius: calc(var(--rundung) - 2px); }
.regeltermin__link { margin: .6rem 0 0; font-size: .9rem; }
.abo { border-top: 1px solid var(--linie); padding-top: 1.8rem; }
.abo p { margin: 0 0 .8rem; }
.abo__adresse { font-size: .8rem; color: var(--leise); }
.abo__adresse code { word-break: break-all; }
.abo .knopf .menue__icon [opacity], .termin-seite__knoepfe .menue__icon [opacity] { opacity: .3; }
.baustein--termine { display: grid; gap: 1rem; }
.baustein--termine .baustein__titel { margin-bottom: .2rem; }
.baustein--kasten .termin__blatt { background: #fff; }
.eckdaten { display: grid; gap: .45rem; margin: 0 0 2rem; padding: 1.2rem 1.4rem; background: var(--flaeche); border-radius: var(--rundung);
  border-left: 5px solid var(--akzent); }
.eckdaten p { margin: 0; }
.eckdaten__zeile { display: flex; align-items: center; gap: .6rem; }
.eckdaten__icon { display: inline-grid; flex: none; width: 1.3em; height: 1.3em; color: var(--akzent-text); }
.eckdaten__icon svg { width: 100%; height: 100%; }
.eckdaten__icon [opacity] { opacity: .25; fill: var(--akzent); }
.eckdaten__datum { font: 700 1.3rem/1.35 var(--titel); }
.eckdaten__uhrzeit { font: 700 1.3rem/1.35 var(--titel); }
.eckdaten__ort { font-size: 1rem; }
.eckdaten__knopf { margin-top: .5rem !important; }
.eckdaten__knopf .knopf { background: #fff; text-decoration: none; }
.eckdaten--abgesagt .eckdaten__datum, .eckdaten--abgesagt .eckdaten__uhrzeit { text-decoration: line-through; color: var(--leise); }
@media (max-width: 600px) { .eckdaten__datum, .eckdaten__uhrzeit { font-size: 1.1rem; } }
.termin-seite__teaser { font-size: 1.1rem; color: #3a3a3d; }
.termin-seite__knoepfe { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2rem; }
.termin-seite__knoepfe a.knopf { text-decoration: none; }
.abo a.knopf { text-decoration: none; }

/* Beitrag */
.beitrag { max-width: var(--schmal); margin: 0 auto; }
.beitrag__kopf { text-align: center; margin-bottom: 1.6rem; }
.beitrag__kopf h1 { font: 700 2rem/1.35 var(--titel); margin: .3rem 0 0; }
.beitrag__bild { width: 100%; aspect-ratio: 900 / 350; object-fit: cover; margin-bottom: 2rem; border-radius: var(--rundung); }
.text { line-height: 1.85; }
@media (max-width: 600px) { .beitrag__kopf h1 { font-size: 1.6rem; } .karte--gross .karte__titel, .seitentitel { font-size: 1.45rem; } }
.text h2, .text h3, .text h4, .text h5, .text h6 { font-family: var(--titel); font-weight: 700; line-height: 1.4; margin: 2rem 0 .6rem; }
.text h2 { font-size: 1.45rem; }
.text h3 { font-size: 1.2rem; }
.text h4, .text h5, .text h6 { font-size: 1.05rem; }
@media (max-width: 600px) { .text h2 { font-size: 1.25rem; } .text h3 { font-size: 1.1rem; } .text h4, .text h5, .text h6 { font-size: 1rem; } }
/* Formate aus dem Editor (und dem WP-Import): Kasten grau / in der Hauptfarbe, Textfarben mit Bedeutung */
.text .kasten { padding: 1rem 1.2rem; background: var(--flaeche); border-radius: var(--rundung); margin: 1.6rem 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.text .kasten--farbe { background: var(--akzent); color: #fff; }
.text .kasten--farbe a { color: #fff; }
.text h2.kasten, .text h3.kasten, .text h4.kasten { padding: .5rem 1rem; }
.text-rot { color: #b8323f; }
.text-gruen { color: #1d7a45; }
.text-blau { color: #1f5f8b; }
.text-grau { color: var(--leise); }
.text .klein { font-size: .85rem; line-height: 1.6; }
.text .knopf { color: #fff; text-decoration: none; }
/* Spieltitel (Format „Spieltitel“ im Editor = <cite>): kursiv; Kapitälchen wären font-variant: small-caps */
.text cite { font-style: italic; }
/* Code/Prompt: Zeilen umbrechen statt seitlich aus dem Text zu laufen */
.text pre { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--flaeche); padding: 1rem 1.2rem; border-radius: var(--rundung);
  font: .9rem/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.text pre code { font: inherit; }
.text blockquote { margin: 1.6rem 0; padding: .2rem 0 .2rem 1.2rem; border-left: 3px solid var(--akzent); font-style: italic; color: #3a3a3d; }
.text figure { margin: 1.6rem 0; }
.text img { border-radius: var(--rundung); }
.text figcaption { color: var(--leise); font-size: .85rem; margin-top: .4rem; }
.text table { border-collapse: collapse; width: 100%; font-size: .95rem; }
.text td, .text th { border: 1px solid var(--linie); padding: .4rem .6rem; }
/* Aktualisierungen am Ende des Beitrags (Feld „Aktualisierungen“) */
.aktualisierungen { display: grid; gap: 1rem; margin-top: 2.4rem; }
.aktualisierung { padding: 1.1rem 1.3rem; border-left: 4px solid var(--akzent); background: var(--flaeche); border-radius: 0 var(--rundung) var(--rundung) 0;
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.aktualisierung__titel { display: flex; align-items: center; gap: .45rem; margin: 0 0 .3rem; font: 700 1rem/1.4 var(--titel); color: var(--akzent-text); }
.aktualisierung__titel svg { width: 1.15em; height: 1.15em; flex: none; }
.aktualisierung__titel svg [opacity] { opacity: .25; fill: var(--akzent); }
.aktualisierung .text > :first-child { margin-top: 0; }
.aktualisierung .text > :last-child { margin-bottom: 0; }
.beitrag__fuss { margin-top: 3rem; padding-top: 1.2rem; border-top: 1px solid var(--linie); }
.schlagwoerter { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .85rem; color: var(--leise); }
.druck-quelle { display: none; }

/* Knöpfe, Embeds */
.knopf { display: inline-block; font: inherit; font-size: .9rem; padding: .5rem 1.1rem; border: 0; border-radius: 999px;
  background: var(--akzent); color: #fff; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease; }
.knopf:hover { background: color-mix(in srgb, var(--akzent) 82%, #000); transform: translateY(-1px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--akzent) 30%, transparent); }
.knopf:active { transform: none; box-shadow: none; }
.knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.knopf--leise { background: transparent; color: var(--akzent-text); border: 1px solid var(--akzent); }
.knopf--leise:hover { background: color-mix(in srgb, var(--akzent) 10%, #fff); }
@media (prefers-reduced-motion: reduce) { .knopf, .knopf:hover { transition: none; transform: none; } }
.embed { margin: 2rem 0; }
.embed__hinweis { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rundung); padding: 1.6rem; text-align: center; }
.embed__klein { color: var(--leise); font-size: .85rem; margin: .3rem 0 1rem; }
.embed iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--rundung); }
.embed__start { display: none; }
/* Mit Vorschaubild (lokal gespeichert): Bild 16:9, Play-Knopf mittig, Hinweis unten auf dunklem Verlauf */
.embed--vorschau { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--rundung); background: #111; }
.embed__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.embed--vorschau .embed__hinweis { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  padding: 1rem 1.2rem; border: 0; border-radius: 0; color: #fff; font-size: .9rem; line-height: 1.45;
  background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.45) 45%, rgba(0,0,0,.08) 100%); }
.embed--vorschau .embed__klein { color: rgba(255,255,255,.75); margin: .1rem 0 .7rem; }
.embed__titel { font: 600 1.05rem/1.35 var(--titel); margin-bottom: .35rem; text-wrap: balance; }
.embed--vorschau .embed__start { display: block; position: absolute; left: 50%; top: 40%; width: 68px; height: 48px; margin: -24px 0 0 -34px;
  border: 0; border-radius: 14px; background: rgba(20,20,20,.75); cursor: pointer; transition: background-color .2s ease, transform .2s ease; }
.embed--vorschau .embed__start::after { content: ""; position: absolute; left: 50%; top: 50%; margin: -10px 0 0 -6px;
  border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent #fff; }
.embed--vorschau:hover .embed__start, .embed__start:focus-visible { background: #e62117; transform: scale(1.06); }
.embed__start:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Schmal (nach Breite des Platzhalters): Titel (max. 2 Zeilen), Datenschutz-Hinweis, Knopf */
.embed--vorschau { container-type: inline-size; }
@container (max-width: 520px) {
  .embed--vorschau .embed__hinweis > div:not(.embed__titel):not(.embed__klein) { display: none; }
  .embed--vorschau .embed__klein { font-size: .75rem; margin: 0 0 .5rem; }
  .embed__titel { font-size: .9rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: .5rem; }
  .embed--vorschau .embed__start { top: 28%; transform: scale(.85); }
  .embed--vorschau .knopf { font-size: .85rem; padding: .4rem .9rem; }
}

.blaettern { display: flex; justify-content: space-between; align-items: center; max-width: var(--schmal);
  margin: 3rem auto 0; font-size: .9rem; color: var(--leise); }
/* Fußbereich: Widgets in Spalten (wie die alten WP-Seiten), darunter die untere Leiste */
.fuss { margin-top: 2rem; background: var(--flaeche); border-top: 1px solid var(--linie); font-size: .9rem; color: #3a3a3d; }
.fuss a { color: var(--text); text-decoration: none; }
.fuss a:hover { color: var(--akzent-text); }
.fuss__widgets { max-width: var(--breit); margin: 0 auto; padding: 3.6rem 1rem 2.8rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 3rem 3.6rem; }
.fuss__spalte { display: grid; gap: 2.8rem; align-content: start; }
.fuss__titel { margin: 0 0 1.2rem; font: 600 .75rem/1.3 var(--schrift); text-transform: uppercase; letter-spacing: .1em; color: var(--leise); }
.fuss__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; line-height: 1.45; }
.fuss__liste ul { list-style: none; margin: .6rem 0 .3rem; padding-left: 1.65rem; display: grid; gap: .55rem; font-size: .85rem; }
.fuss__beitraege { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; }
.fuss__beitraege li { display: flex; gap: 1rem; align-items: flex-start; line-height: 1.4; }
.fuss__beitraege li > div { display: grid; gap: .15rem; }
.fuss__beitraege time { font-size: .78rem; color: var(--leise); }
.fuss__bild { flex: none; }
.fuss__bild img { width: 80px; height: 55px; object-fit: cover; border-radius: calc(var(--rundung) - 2px); }
.fuss__name { font-weight: 600; }
.fuss__kommentare a { color: var(--akzent-text); }
.fuss__logo { display: block; max-width: 200px; border-radius: calc(var(--rundung) - 2px); margin-bottom: .3rem; }
.fuss__links span { font-size: .8rem; color: var(--leise); }
.fuss__text p { margin: 0 0 .8rem; line-height: 1.7; }
.fuss__text a { color: var(--akzent-text); }
.fuss__leiste { border-top: 1px solid var(--linie); padding: 1.5rem 1rem 1.7rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1.4rem;
  font-size: .82rem; color: var(--leise); }
.fuss__leiste a { color: var(--leise); }
/* Icons im Fußbereich: Linie, Fläche erst bei Hover (wie im Menü) */
.fuss__gruppe { font-weight: 600; color: var(--text); }
.fuss .menue__icon { margin-right: .55em; color: var(--leise); transition: color .2s ease; }
.fuss a:hover .menue__icon, .fuss a:focus-visible .menue__icon { color: var(--akzent-text); }
.fuss a:hover .menue__icon [opacity], .fuss a:focus-visible .menue__icon [opacity] { opacity: .3; }
.baustein a.knopf .menue__icon { margin-right: .4em; }
.fuss__leiste a:hover { color: var(--akzent-text); }

/* Druckansicht (Kundenwunsch: Medien als Link, Quelle/URL ja, Logo nicht nötig) */
/* Druck / PDF: eigene Kopfzeile (Name + vollständige Adresse) statt Logo, großzügige Ränder oben und unten */
.druck-kopf { display: none; }
@page { margin: 22mm 18mm 24mm; }
@media print {
  .oben, .wechsler, .kopf, .menue, .kopf__menueknopf, .fuss, .knopf, .embed__hinweis, .embed__bild { display: none !important; }
  body { padding: 0 !important; font-size: 11pt; }
  .druck-kopf { display: block; margin: 0 0 8mm; padding-bottom: 3mm; border-bottom: .5pt solid #999; font-size: 8.5pt; line-height: 1.5; color: #555; overflow-wrap: anywhere; }
  .embed--vorschau { aspect-ratio: auto; background: none; }
  .druck-quelle { display: block; font-size: 9pt; color: #555; overflow-wrap: anywhere; }
  .text a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .embed[data-yt-id]::after { content: "Video: https://www.youtube.com/watch?v=" attr(data-yt-id); font-size: 9pt; }
}

/* Kommentare (kulturgutspiel.de) */
.kommentare { max-width: var(--schmal); margin: 3rem auto 0; padding-top: 2rem; border-top: 1px solid var(--linie); }
.kommentare h2 { font: 700 1.4rem/1.35 var(--titel); margin: 0 0 1.4rem; }
.kommentare__liste { list-style: none; margin: 0; padding: 0; }
.kommentare__liste .kommentare__liste { margin-left: 1.6rem; padding-left: 1rem; border-left: 2px solid var(--linie); }
.kommentar { margin: 0 0 1.4rem; }
.kommentar--redaktion > .kommentar__text { background: var(--flaeche); padding: .6rem .8rem; border-radius: 8px; }
.kommentar__text { font-size: .95rem; }
.kommentar__antworten { font: inherit; font-size: .8rem; background: none; border: 0; padding: 0; color: var(--akzent-text); cursor: pointer; }
.kommentarformular { display: grid; gap: .9rem; margin-top: 2rem; padding: 1.4rem; background: var(--flaeche); border-radius: 12px; }
.kommentarformular h3 { margin: 0; font-family: var(--titel); }
.kommentarformular label { display: grid; gap: .3rem; font-size: .9rem; }
.kommentarformular input, .kommentarformular textarea { font: inherit; padding: .5rem .7rem; border: 1px solid #cfcfd4; border-radius: 6px; background: #fff; }
.kommentarformular .knopf { justify-self: start; }
.leise { color: var(--leise); font-size: .85rem; margin: 0; }
.fehler { color: #b3261e; font-size: .85rem; }
.hinweis { background: #eef6ef; border: 1px solid #b9dcc0; padding: .7rem 1rem; border-radius: 8px; }
.antwort-auf { font: .9rem var(--schrift); color: var(--leise); }
@media print { .kommentarformular, .kommentar__antworten { display: none !important; } }
/* Ab der vierten Ebene nicht weiter einrücken, sonst wird es auf dem Handy zu schmal. */
.kommentare__liste .kommentare__liste .kommentare__liste .kommentare__liste { margin-left: 0; padding-left: 0; border-left: 0; }

/* Linkverzeichnis */
.linkverzeichnis { margin-top: 2rem; }
.linkverzeichnis h2 { font: 700 1.3rem/1.3 var(--titel); margin: 2rem 0 .6rem; }
.linkverzeichnis ul { margin: 0; padding-left: 1.1rem; }
.linkverzeichnis li { margin: .2rem 0; }

/* Orga-Bereich (/orga): Anmeldung, Kennwort, Übersicht mit Kacheln */
.orga { max-width: var(--schmal); margin: 0 auto; }
.orga--schmal { max-width: 28rem; }
.orga__dach { margin: 0 0 .2rem; text-align: center; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--akzent-text); }
.orga .seitentitel { margin-bottom: 1rem; }
.orga__lead { text-align: center; color: var(--leise); margin: -0.4rem 0 1.6rem; }
.orga__karte { background: #fff; border: 1px solid var(--linie); border-radius: var(--rundung); padding: 1.5rem; box-shadow: 0 6px 20px rgba(0,0,0,.04); }
.orga__karte > p:first-child { margin-top: 0; }
.orga__karte a.knopf, .orga__kachel { text-decoration: none; }
.orga__kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.orga__kachel { display: block; background: #fff; border: 1px solid var(--linie); border-radius: var(--rundung); padding: 1.4rem 1.5rem; color: var(--text);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.orga__kachel:hover { border-color: var(--akzent); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.06); }
.orga__kachel h2 { margin: 0 0 .4rem; font: 700 1.2rem/1.3 var(--titel); }
.orga__kachel p { margin: 0 0 .8rem; font-size: .9rem; color: #3a3a3d; }
.orga__oeffnen { font-weight: 600; color: var(--akzent-text); font-size: .9rem; }
.orga__fuss { margin-top: 2rem; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem 1rem; font-size: .88rem; color: var(--leise); }
.orga__fuss p { margin: 0; }
.orga__fuss strong { color: var(--text); }
.orga__link { font: inherit; background: none; border: 0; padding: 0; color: var(--akzent-text); text-decoration: underline; cursor: pointer; }
/* Formulare im Orga-Bereich */
.formular { display: grid; gap: .45rem; }
.formular label { font-size: .9rem; font-weight: 600; margin-top: .5rem; }
.formular input[type=email], .formular input[type=password], .formular input[type=text] { font: inherit; padding: .65rem .8rem; border: 1px solid #cfcfd4;
  border-radius: var(--rundung); background: #fff; width: 100%; }
.formular input:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--akzent) 15%, transparent); }
.formular__haken { display: flex !important; gap: .6rem; align-items: flex-start; font-weight: 400 !important; margin-top: .8rem !important; cursor: pointer; }
.formular__haken[hidden] { display: none !important; }
.formular__haken input { margin-top: .3rem; accent-color: var(--akzent); }
.formular__haken small { color: var(--leise); }
.formular .knopf { margin-top: 1rem; justify-self: stretch; padding: .7rem 1.2rem; font-size: 1rem; }
.formular__unten { margin: .6rem 0 0; text-align: center; font-size: .88rem; }
/* Hinweismeldungen */
.meldung { border-radius: var(--rundung); padding: .8rem 1rem; margin: 0 0 1.2rem; font-size: .95rem; }
.meldung--erfolg { background: color-mix(in srgb, var(--akzent) 10%, #fff); border: 1px solid color-mix(in srgb, var(--akzent) 30%, #fff); }
.meldung--fehler { background: #fbe9e7; border: 1px solid #f3c2bc; color: #8c1d18; }

/* Cafeteria (öffentlich hinter geheimem Link + Orga-Bereich) */
.cafe { max-width: var(--breit); margin: 0 auto; --suess: #e0a33b; --herzhaft: var(--akzent); }
.cafe__kopf { text-align: center; margin-bottom: 1.6rem; }
.cafe__dach { margin: 0 0 .2rem; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--akzent-text); }
.cafe__dach a { color: inherit; text-decoration: none; }
.cafe__lead { margin: -.6rem auto 0; max-width: 40rem; color: var(--leise); }
.cafe__hinweis, .cafe__info { border-radius: var(--rundung); padding: .9rem 1.1rem; margin: 0 0 1.4rem; font-size: .95rem; }
.cafe__hinweis { background: #fff7e0; border: 1px solid #f1dfaa; }
.cafe__info { background: var(--flaeche); }
.cafe__kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.2rem; max-width: 52rem; margin: 0 auto; }
.cafe__kachel { display: block; background: #fff; border: 1px solid var(--linie); border-radius: var(--rundung); padding: 1.6rem; color: var(--text); text-decoration: none;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.cafe__kachel:hover { border-color: var(--akzent); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.06); }
.cafe__kachel h2 { margin: .6rem 0 .4rem; font: 700 1.3rem/1.3 var(--titel); }
.cafe__kachel p { margin: 0 0 .6rem; color: #3a3a3d; font-size: .95rem; }
.cafe__kachelicon { display: inline-grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: color-mix(in srgb, var(--akzent) 12%, #fff); color: var(--akzent-text); }
.cafe__kachelicon svg { width: 1.5rem; height: 1.5rem; }
.cafe__kachelicon [opacity] { fill: var(--akzent); opacity: .3; }
.cafe__zahl { color: var(--leise) !important; font-size: .88rem !important; margin: 0 !important; }
.cafe__frei { color: var(--akzent-text); font-weight: 600; }
.cafe__spalten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 1.6rem; align-items: start; }
@media (max-width: 900px) { .cafe__spalten { grid-template-columns: 1fr; } }
.cafe__rechts { display: grid; gap: 1.6rem; }
.cafe__karte { background: #fff; border: 1px solid var(--linie); border-radius: var(--rundung); padding: 1.4rem 1.5rem; }
.cafe__karte > .baustein__titel { margin-top: 0; }
.cafe__zwischen { margin: 1.4rem 0 .6rem; font: 600 .78rem/1.3 var(--schrift); text-transform: uppercase; letter-spacing: .1em; color: var(--leise); }
.cafe__liste { list-style: none; margin: 0; padding: 0; }
.cafe__liste li { display: grid; grid-template-columns: 7rem 1fr auto; gap: .2rem .8rem; padding: .55rem 0; border-top: 1px solid var(--linie); font-size: .92rem; align-items: baseline; }
.cafe__wer { font-weight: 600; }
.cafe__wann { grid-column: 2 / -1; font-size: .8rem; color: var(--leise); }
/* Ring und Balken der Auswertung */
.ring { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.ring svg { width: 8.5rem; height: 8.5rem; flex: none; }
.ring__suess { stroke: var(--suess); }
.ring__herzhaft { stroke: var(--herzhaft); }
.ring__zahl { font: 700 26px var(--titel); fill: var(--text); }
.ring__wort { font-size: 10px; fill: var(--leise); }
.ring__legende p { margin: .3rem 0; display: flex; gap: .45rem; align-items: center; }
.punkt { display: inline-block; width: .75rem; height: .75rem; border-radius: 50%; }
.punkt--suess { background: var(--suess); }
.punkt--herzhaft { background: var(--herzhaft); }
.balken { margin: .5rem 0 .8rem; }
.balken__zeile { margin: 0 0 .25rem; display: flex; justify-content: space-between; gap: 1rem; font-size: .88rem; }
.balken__zeile span:last-child { color: var(--leise); white-space: nowrap; }
.balken__spur { display: flex; height: .55rem; border-radius: 999px; background: var(--flaeche); overflow: hidden; }
.balken__teil { height: 100%; background: var(--akzent); }
.balken__teil.punkt--suess { background: var(--suess); border-radius: 0; }
.balken__teil.punkt--herzhaft { background: var(--herzhaft); border-radius: 0; }
.balken__klein { margin: .25rem 0 0; font-size: .78rem; color: var(--leise); }
/* Marken (Status, Art, frei/voll) */
.marke { display: inline-block; padding: .08rem .55rem; border-radius: 999px; font-size: .74rem; font-weight: 600; background: var(--flaeche); color: var(--leise); white-space: nowrap; text-decoration: none; }
.marke--suess { background: #fbefd7; color: #8a5a10; }
.marke--herzhaft { background: color-mix(in srgb, var(--akzent) 12%, #fff); color: var(--akzent-text); }
.marke--frei, .marke--offen { background: color-mix(in srgb, var(--akzent) 12%, #fff); color: var(--akzent-text); }
a.marke--frei:hover { background: var(--akzent); color: #fff; }
.marke--voll { background: var(--flaeche); color: var(--leise); }
.marke--entwurf { background: #fff7e0; color: #8a5a10; }
.marke--geschlossen { background: #f0f0f2; color: var(--leise); }
/* Schichtplan */
.schichten { list-style: none; margin: 0; padding: 0; }
.schicht { display: grid; grid-template-columns: minmax(8rem, 1.1fr) 1.4fr auto; gap: .3rem 1rem; align-items: center; padding: .65rem 0; border-top: 1px solid var(--linie); font-size: .92rem; }
.schicht__zeit small { display: block; color: var(--leise); font-size: .78rem; }
.schicht--voll .schicht__zeit { color: var(--leise); }
@media (max-width: 520px) { .schicht { grid-template-columns: 1fr auto; } .schicht__namen { grid-column: 1 / -1; grid-row: 2; font-size: .85rem; } }
/* Formular-Ergänzungen */
.formular select, .formular textarea, .formular input[type=number], .formular input[type=date], .formular input[type=time] { font: inherit; padding: .6rem .7rem; border: 1px solid #cfcfd4; border-radius: var(--rundung); background: #fff; width: 100%; }
.formular textarea { resize: vertical; }
.formular select:focus, .formular textarea:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--akzent) 15%, transparent); }
.formular small { font-weight: 400; }
.formular__zwei { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .2rem 1rem; }
.formular__zwei > div { display: grid; gap: .45rem; align-content: start; }
.formular__wahl { border: 0; padding: 0; margin: .6rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.formular__wahl legend { font-size: .9rem; font-weight: 600; margin-bottom: .45rem; padding: 0; }
.formular__wahl label { margin: 0 !important; font-weight: 400 !important; cursor: pointer; }
.formular__wahl input { position: absolute; opacity: 0; pointer-events: none; }
.formular__wahl label > span { display: inline-flex; align-items: center; gap: .1rem; padding: .5rem .9rem; border: 1px solid #cfcfd4; border-radius: 999px; transition: border-color .15s, background-color .15s; }
.formular__wahl input:checked + span { border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 10%, #fff); color: var(--akzent-text); font-weight: 600; }
.formular__wahl input:focus-visible + span { outline: 2px solid var(--akzent); outline-offset: 2px; }
.formular__wahl .menue__icon { margin-right: .4em; }
.formular__wahl .menue__icon [opacity] { fill: var(--akzent); opacity: .3; }
.formular__klein { font-size: .82rem; margin: .4rem 0 0; }
.formular--zeile { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)) auto; align-items: end; gap: .8rem; }
.formular--zeile > div { display: grid; gap: .4rem; }
.formular--zeile .knopf, .formular--raster .knopf { margin-top: 0; justify-self: start; padding: .6rem 1.2rem; font-size: .95rem; }
.formular--raster { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .7rem 1rem; align-items: end; }
.formular--raster > div { display: grid; gap: .35rem; }
.formular--raster label, .formular--zeile label { margin: 0; font-size: .8rem; }
.formular__knopfzelle { align-self: end; }
/* Orga: breiter, Unterkarten, aufklappbare Zeilen, Tabelle */
.orga--breit { max-width: 60rem; }
.orga--breit > .orga__karte, .orga--breit > form.orga__karte, .orga--breit > section { margin-bottom: 1.4rem; }
.orga__pfad { font-size: .85rem; color: var(--leise); margin-bottom: .6rem; }
.orga__pfad a { color: var(--leise); }
.orga--breit .seitentitel { text-align: left; margin-bottom: .3rem; }
.orga--breit .orga__lead { text-align: left; margin: 0 0 1.4rem; }
.orga__karte > .baustein__titel { margin-top: 0; }
.orga__karte--gefahr { border-color: #f3c2bc; }
.orga__zwei { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1rem; margin-top: 1.2rem; }
.orga__unterkarte { background: var(--flaeche); border-radius: var(--rundung); padding: 1rem 1.1rem; }
.orga__unterkarte .cafe__zwischen { margin-top: 0; }
.orga__knoepfe { display: flex; flex-wrap: wrap; gap: .6rem; margin: .6rem 0 1.2rem; }
.orga__knoepfe a.knopf { text-decoration: none; }
.orga__knoepfe .menue__icon, .loeschen .menue__icon { margin-right: .4em; }
.orga__link-feld { width: 100%; font: .9rem ui-monospace, Menlo, monospace; padding: .65rem .8rem; border: 1px solid #cfcfd4; border-radius: var(--rundung); background: var(--flaeche); }
.aufklapp { margin-top: 1rem; }
.aufklapp > summary { cursor: pointer; font-weight: 600; color: var(--akzent-text); }
.aufklapp > *:not(summary) { margin-top: .8rem; }
.zeile { border-top: 1px solid var(--linie); }
.zeile > summary { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; padding: .65rem 0; cursor: pointer; list-style: none; font-size: .93rem; }
.zeile > summary::-webkit-details-marker { display: none; }
.zeile > summary::after { content: ""; width: .4em; height: .4em; margin-left: auto; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); color: var(--leise); }
.zeile[open] > summary::after { transform: rotate(-135deg); }
.zeile__haupt { flex: 1 1 14rem; }
.zeile[open] { padding-bottom: 1rem; }
.zeile > form + form { margin-top: .6rem; }
.loeschen { font: inherit; font-size: .85rem; background: none; border: 0; padding: .3rem 0; color: #b3261e; cursor: pointer; display: inline-flex; align-items: center; }
.loeschen:hover { text-decoration: underline; }
.loeschen [opacity] { fill: #b3261e; opacity: .25; }
.tabelle { overflow-x: auto; }
.tabelle table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabelle th { text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--leise); font-weight: 600; padding: .4rem .6rem .5rem 0; border-bottom: 1px solid var(--linie); }
.tabelle td { padding: .65rem .6rem .65rem 0; border-bottom: 1px solid var(--linie); vertical-align: top; }
.orga-schicht { border-top: 1px solid var(--linie); padding: .5rem 0; }
.orga-schicht__kopf { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: center; margin: .2rem 0 .3rem; }
.orga-schicht__kopf .marke { margin-left: auto; }
.orga-schicht .zeile { border-top: 0; padding-left: 1rem; }
.orga-schicht__leer { margin: 0 0 .3rem 1rem; font-size: .88rem; }

/* Galerien (aus WordPress: figure > figure): Raster statt Bilder untereinander */
.text figure:has(> figure) { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
.text figure > figure { margin: 0; }
.text figure > figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.text figure > figure figcaption { font-size: .8rem; line-height: 1.4; }
@media (max-width: 520px) { .text figure:has(> figure) { grid-template-columns: 1fr 1fr; gap: .7rem; } }
/* Pressebilder: ganzes Motiv zeigen (auch Logos), Hinweis auf Download beim Überfahren */
.text--downloads figure > figure img { object-fit: contain; background: var(--flaeche); padding: .4rem; transition: box-shadow .2s, transform .2s; }
.text--downloads figure > figure a:hover img { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.08); }

/* Lightbox (site.js): Bilder im Text vergrößern */
.text img.zoombar { cursor: zoom-in; }
.text img.zoombar:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }
.lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(20, 22, 24, .94); }
.lightbox::backdrop { background: transparent; }
.lightbox[open] { display: grid; place-items: center; animation: lightbox-ein .2s ease; }
@keyframes lightbox-ein { from { opacity: 0; } }
.lightbox__bild { margin: 0; display: grid; justify-items: center; gap: .6rem; padding: 3.5rem 4rem; max-width: 100%; max-height: 100%; }
.lightbox__bild img { max-width: 100%; max-height: calc(100dvh - 9rem); width: auto; height: auto; object-fit: contain; border-radius: var(--rundung); background: #fff; }
.lightbox__bild figcaption { color: #e8e8e8; font-size: .9rem; text-align: center; max-width: 60ch; }
.lightbox__zu, .lightbox__pfeil { position: fixed; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.12); color: #fff; font: 400 2rem/1 var(--schrift); cursor: pointer; transition: background-color .2s; }
.lightbox__zu:hover, .lightbox__pfeil:hover { background: rgba(255,255,255,.25); }
.lightbox__zu:focus-visible, .lightbox__pfeil:focus-visible, .lightbox__original:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.lightbox__zu { top: calc(1rem + env(safe-area-inset-top)); right: 1rem; }
.lightbox__pfeil { top: 50%; transform: translateY(-50%); }
.lightbox__pfeil--zurueck { left: 1rem; }
.lightbox__pfeil--weiter { right: 1rem; }
.lightbox__original { position: fixed; bottom: calc(1rem + env(safe-area-inset-bottom)); right: 1.2rem; color: #ddd; font-size: .85rem; }
@media (max-width: 600px) {
  .lightbox__bild { padding: 3.5rem .6rem 3rem; }
  .lightbox__pfeil { top: auto; bottom: calc(.6rem + env(safe-area-inset-bottom)); transform: none; }
  .lightbox__pfeil--zurueck { left: .6rem; } .lightbox__pfeil--weiter { right: auto; left: 3.8rem; }
}
@media print { .lightbox { display: none !important; } }

/* ── Tickets (modules/tickets) ───────────────────────────────────────────── */
/* Kasten auf der Termin-Seite: groß und eindeutig, auch für ältere Leute (Kundenwunsch) */
.tickets { margin: 0 0 2.2rem; padding: 1.4rem 1.5rem 1.6rem; border: 2px solid var(--akzent); border-radius: var(--rundung); background: #fff; }
.tickets__titel { display: flex; align-items: center; gap: .5rem; margin: 0 0 .6rem; font: 700 1.35rem/1.3 var(--titel); }
.tickets__titel svg { width: 1.4em; height: 1.4em; color: var(--akzent-text); }
.tickets__titel svg [opacity] { fill: var(--akzent); opacity: .25; }
.tickets__lead { margin: 0 0 .8rem; }
.tickets__hinweis { margin: 0 0 .8rem; padding: .6rem .8rem; background: var(--flaeche); border-radius: calc(var(--rundung) - 2px); font-size: .95rem; }
.tickets__zu { margin: 0; font-size: 1.05rem; }
.tickets__formular { font-size: 1.05rem; }
.tickets__formular input[type=text], .tickets__formular input[type=email] { font-size: 1.1rem; padding: .8rem .9rem; }
.tickets__arten { border: 0; margin: 0; padding: 0; display: grid; gap: .6rem; }
.tickets__arten legend { font-weight: 600; font-size: 1rem; margin-bottom: .4rem; padding: 0; }
.tickets__art { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; }
.tickets__artname { flex: 1 1 10rem; margin: 0 !important; }
.tickets__artname small { display: block; font-weight: 400; color: var(--leise); }
.tickets__preis { color: var(--leise); font-size: .95rem; }
.tickets__weitere { border: 0; margin: .4rem 0 0; padding: .8rem 1rem 1rem; background: var(--flaeche); border-radius: var(--rundung); display: grid; gap: .5rem; }
.tickets__weitere legend { float: left; width: 100%; padding: 0; font-weight: 600; font-size: 1rem; margin-bottom: .2rem; }
.tickets__person { display: grid; gap: .3rem; }
.tickets__person label { margin: 0 !important; font-weight: 400 !important; font-size: .9rem; }
.mit-js .ohne-js-nur { display: none; }
.tickets__knopf { font-size: 1.15rem !important; padding: .9rem 1.4rem !important; font-weight: 700; }
.zaehler { display: inline-flex; align-items: stretch; border: 1px solid #cfcfd4; border-radius: 999px; overflow: hidden; background: #fff; }
.zaehler__knopf { width: 3.2rem; min-height: 3.2rem; border: 0; background: var(--flaeche); color: var(--text); font: 600 1.6rem/1 var(--schrift); cursor: pointer; }
.zaehler__knopf:hover { background: color-mix(in srgb, var(--akzent) 12%, #fff); color: var(--akzent-text); }
.zaehler__knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; }
.zaehler input { width: 3.6rem; border: 0 !important; text-align: center; font: 700 1.4rem/1 var(--titel) !important; padding: 0 !important; -moz-appearance: textfield; appearance: textfield; box-shadow: none !important; }
.zaehler input::-webkit-outer-spin-button, .zaehler input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Das Ticket (/ticket/<code>) */
.ticketseite { max-width: 30rem; margin: 0 auto; }
.ticket { border: 1px solid var(--linie); border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.07); }
.ticket__kopf { background: var(--akzent); color: #fff; padding: 1.2rem 1.4rem 1.3rem; }
.ticket__dach { margin: 0 0 .2rem; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .9; }
.ticket__titel { margin: 0 0 .4rem; font: 700 1.45rem/1.25 var(--titel); color: #fff; }
.ticket__zeit { margin: 0; font-weight: 700; font-size: 1.05rem; }
.ticket__ort { margin: .2rem 0 0; font-size: .95rem; }
.ticket__qr { display: grid; place-items: center; padding: 1.4rem 1rem .4rem; }
.ticket__qr svg { width: min(16rem, 70vw); height: auto; }
.ticket__vorzeigen { margin: 0 0 .6rem; text-align: center; font-size: .9rem; color: var(--leise); }
.ticket__status { margin: 1.2rem 1.4rem .4rem; padding: .8rem 1rem; background: var(--flaeche); border-radius: var(--rundung); }
.ticket__daten { margin: 0; padding: .6rem 1.4rem 1.2rem; border-top: 1px dashed var(--linie); display: grid; gap: .5rem; }
.ticket__daten div { display: flex; justify-content: space-between; gap: 1rem; }
.ticket__daten dt { color: var(--leise); font-size: .9rem; white-space: nowrap; }
.ticket__daten dd { margin: 0; font-weight: 600; text-align: right; }
.ticket__code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9rem; letter-spacing: .03em; }
.ticket--storniert .ticket__kopf { background: var(--leise); }
.ticket--warteliste .ticket__kopf { background: var(--anthrazit); }
/* Kostenpflichtig: noch nicht bezahlt (Plätze reserviert) bzw. Frist abgelaufen */
.ticket--offen .ticket__kopf { background: var(--anthrazit); }
.ticket--abgelaufen .ticket__kopf { background: var(--leise); }
.ticket__zahlung { display: grid; justify-items: center; gap: .6rem; padding: 0 0 1.2rem; text-align: center; }
.ticket__zahlung .ticket__status, .ticket__zahlung .meldung { justify-self: stretch; text-align: left; }
.ticket__zahlung .meldung { margin: 1.2rem 1.4rem 0; }
.ticket__zahlung .formular__klein { margin: 0 1.4rem; }
.tickets__summe { margin: .2rem 0 1rem; font-size: 1.05rem; }
.tickets__arten .tickets__preis { min-width: 5.2rem; text-align: right; }
.tickets__bedingungen { margin-top: 1rem; }
.ticket__aktionen { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin: 1.4rem 0; }
.ticket__aktionen .knopf { text-decoration: none; }
.ticket__aktionen .menue__icon { margin-right: .4em; }
.ticket__absagen { margin: 1.5rem 0 0; text-align: center; }
.ticket__absagen > summary { cursor: pointer; color: var(--leise); font-size: .95rem; }
.ticket__absagen form { margin-top: .8rem; padding: 1rem; background: var(--flaeche); border-radius: var(--rundung); }
.ticket__absagen p { margin: 0 0 .8rem; }
.knopf--warnung { background: #b3261e; }
.knopf--warnung:hover { background: #8f1e18; box-shadow: none; }
@media print { .ticket__aktionen, .ticket__absagen { display: none !important; } .ticket { box-shadow: none; } }

/* Orga: Zahlen, Aktionen, Listen */
.ticketzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .8rem; margin: 0 0 1rem; }
.ticketzahlen div { background: #fff; border: 1px solid var(--linie); border-radius: var(--rundung); padding: .9rem 1rem; }
.ticketzahlen strong { display: block; font: 700 1.8rem/1.1 var(--titel); }
.ticketzahlen span { font-size: .85rem; color: var(--leise); }
.ticketaktionen { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1.4rem; }
.ticketaktionen .knopf, .ticketaktionen a.knopf { text-decoration: none; }
.ticketaktionen .menue__icon { margin-right: .4em; }
.ticketsuche { width: 100%; font: inherit; padding: .6rem .8rem; border: 1px solid #cfcfd4; border-radius: var(--rundung); margin: 0 0 .8rem; }
.tabelle__aktion { text-align: right; white-space: nowrap; }
.aufklapp--klein { margin: 0; text-align: left; white-space: normal; }
.aufklapp--klein > summary { font-size: .85rem; }
.aufklapp--klein[open] { min-width: 16rem; }
.aufklapp--klein form { margin: .5rem 0; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .8rem; }
.knopfreihe .knopf { margin-top: 0 !important; justify-self: auto; }
.protokoll { margin: 0; padding-left: 1.1rem; font-size: .9rem; }
.protokoll li { margin: .3rem 0; }

/* Einlass am Abend (Handy) */
.einlass { max-width: 32rem; margin: 0 auto; }
.einlass__zaehler { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 2.4rem); z-index: 5; background: #fff; padding: .8rem 0 .9rem; border-bottom: 1px solid var(--linie); margin-bottom: 1rem; }
.einlass__zaehler p { margin: 0 0 .4rem; display: flex; align-items: baseline; gap: .5rem; }
.einlass__zaehler strong { font: 700 2.8rem/1 var(--titel); color: var(--akzent-text); }
.einlass__zaehler span { color: var(--leise); }
.einlass__balken { height: .6rem; background: var(--flaeche); border-radius: 999px; overflow: hidden; }
.einlass__balken span { display: block; height: 100%; background: var(--akzent); transition: width .3s ease; }
.einlass__scanner { display: grid; gap: .7rem; margin-bottom: 1.4rem; }
.einlass__kamera { font-size: 1.1rem; padding: .9rem 1rem; }
.einlass__kamera .menue__icon { margin-right: .4em; }
.einlass__video { position: relative; border-radius: var(--rundung); overflow: hidden; background: #000; aspect-ratio: 1; }
.einlass__video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.einlass__rahmen { position: absolute; inset: 18%; border: 3px solid rgba(255,255,255,.85); border-radius: 12px; box-shadow: 0 0 0 999px rgba(0,0,0,.25); }
.einlass__code { display: flex; gap: .5rem; }
.einlass__code input { flex: 1; min-width: 0; font: 1.05rem ui-monospace, SFMono-Regular, Menlo, monospace; padding: .6rem .8rem; border: 1px solid #cfcfd4; border-radius: var(--rundung); text-transform: uppercase; }
.einlass__code .knopf { margin: 0; }
.einlass__ergebnis { padding: 1rem 1.1rem; border-radius: var(--rundung); color: #fff; }
.einlass__ergebnis p { margin: 0; }
.einlass__meldung { font: 700 1.4rem/1.2 var(--titel); margin-bottom: .3rem !important; }
.einlass__wer { font-size: 1.1rem; font-weight: 600; }
.einlass__ergebnis--ok { background: #1d7a45; }
.einlass__ergebnis--schon { background: #b26a00; }
.einlass__ergebnis--fehler { background: #b3261e; }
.einlass__liste ul { list-style: none; margin: 0; padding: 0; }
.einlass__person { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .7rem 0; border-bottom: 1px solid var(--linie); }
.einlass__name small { display: block; color: var(--leise); }
.einlass__person--drin .einlass__name { color: var(--leise); }
.einlass__person--drin .einlass__name strong::before { content: "✓ "; color: #1d7a45; }
.einlass__stepper { display: flex; align-items: center; gap: .4rem; flex: none; }
.einlass__stepper button { width: 2.8rem; height: 2.8rem; border-radius: 50%; border: 1px solid #cfcfd4; background: #fff; font: 600 1.4rem/1 var(--schrift); cursor: pointer; }
.einlass__stepper button:active { background: var(--flaeche); }
.einlass__stepper span { min-width: 3rem; text-align: center; font-variant-numeric: tabular-nums; }

/* ── zuspieler.de: Feed-Übersicht (modules/feeds) ─────────────────────────── */
.feeds { max-width: var(--breit); margin: 0 auto; }
.feeds__titel { text-align: left; margin-bottom: 1rem; }
.feeds__filter { display: grid; gap: .6rem; margin: 0 0 1.4rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--linie); }
.feeds__chips { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.feeds__chips a { display: inline-flex; align-items: center; gap: .35em; padding: .38rem .85rem; border: 1px solid var(--linie); border-radius: 999px;
  color: var(--text); text-decoration: none; font-size: .9rem; background: #fff; transition: border-color .15s, background-color .15s, color .15s; }
.feeds__chips--klein a { font-size: .82rem; padding: .28rem .7rem; }
.feeds__chips a:hover { border-color: var(--akzent); color: var(--akzent-text); }
.feeds__chips a[aria-current] { background: var(--akzent-text); border-color: var(--akzent-text); color: #fff; font-weight: 600; }
.feeds__chips svg { width: 1.1em; height: 1.1em; }
.feeds__chips svg [opacity] { opacity: 0; }
.feeds__zeile { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .8rem 1.6rem; }
.feeds__gruppe { display: grid; gap: .35rem; }
.feeds__gruppe--rechts { margin-left: auto; }
.feeds__label { margin: 0; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--leise); }
.feeds__label span { font-weight: 400; letter-spacing: 0; text-transform: none; }
@media (max-width: 700px) { .feeds__gruppe--rechts { margin-left: 0; } }
.feeds__suche { display: flex; gap: .5rem; max-width: 30rem; }
.feeds__suche input { flex: 1; min-width: 0; font: inherit; padding: .5rem .8rem; border: 1px solid #cfcfd4; border-radius: var(--rundung); }
.feeds__suche .knopf { margin: 0; }
.feeds__anzahl { margin: 0 0 .8rem; font-size: .85rem; }
.feeds__tipps { margin: 0 0 2rem; padding: 1.2rem; background: color-mix(in srgb, var(--akzent) 7%, #fff); border-radius: var(--rundung); }
.feeds__tipps .baustein__titel, .beliebt__teil .baustein__titel { display: flex; align-items: center; gap: .4rem; }
.feeds__tipps .baustein__titel svg, .beliebt__teil .baustein__titel svg { width: 1.2em; height: 1.2em; color: var(--akzent-text); }
.feeds__raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 1.4rem 1.2rem; }
/* Handy, Raster einspaltig: flacheres Querformat 12:5 wie auf der alten zuspieler.de – mehr Beiträge je Bildschirm (Kunde 13.10.).
   Nicht im zweispaltigen Feed-Baustein der Startseite (dort wären die Bilder zu niedrig). */
@media (max-width: 540px) {
  .feeds__raster .feed__bild { aspect-ratio: 12 / 5; }
  .baustein--feeds:not(.baustein--halb) .feed__bild { aspect-ratio: 16 / 9; }
}
.feeds__liste { display: grid; gap: 0; }

.feed { display: grid; gap: .6rem; align-content: start; position: relative; }
.feed__bild { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--rundung); overflow: hidden; background: var(--flaeche); }
.feed__bild img { width: 100%; height: 100%; object-fit: cover; }
.feed__platzhalter { display: grid; place-items: center; height: 100%; color: #c4c4c8; }
.feed__platzhalter svg { width: 2.6rem; height: 2.6rem; }
.feed__play { position: absolute; inset: 50% auto auto 50%; width: 2.6rem; height: 2.6rem; margin: -1.3rem 0 0 -1.3rem; border-radius: 50%; background: rgba(0,0,0,.55); }
.feed__play::after { content: ""; position: absolute; left: 1.05rem; top: .78rem; border-left: .75rem solid #fff; border-top: .52rem solid transparent; border-bottom: .52rem solid transparent; }
.feed__text { display: grid; gap: .3rem; }
.feed__meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .5rem; font-size: .8rem; color: var(--leise); }
.feed__medium svg { width: 1.05em; height: 1.05em; display: block; }
.feed__medium [opacity] { opacity: 0; }
.feed__quelle { color: inherit; text-decoration: none; }
/* Trenner zwischen Quelle und Datum wie auf der alten Seite (Kunde 12.10.) */
.feed__trenner { color: var(--leise); opacity: .5; }
.feed__quelle:hover { color: var(--akzent-text); text-decoration: underline; }
/* wie „Lesetipp“ im Journal: vor dem Icon der Quelle */
.feed__tipp { padding: .05rem .55rem; border-radius: 999px; background: var(--akzent-text); color: #fff;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.feed__titel { margin: 0; font: 600 1.02rem/1.35 var(--titel); }
.feed__titel a { color: var(--text); text-decoration: none; }
.feed__titel a:hover { color: var(--akzent-text); }
.feed__anriss { margin: 0; font-size: .88rem; line-height: 1.55; color: #3a3a3d; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.feed__aktionen { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.feed__stimme { margin: .1rem 0 0; }
.feed__redaktion { margin: .1rem 0 0; }
.feed__redaktion button { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .6rem; border: 1px dashed var(--akzent); border-radius: 999px;
  background: #fff; color: var(--akzent-text); font: 600 .8rem/1.4 var(--schrift); cursor: pointer; }
.feed__redaktion button[aria-pressed="true"] { background: var(--akzent-text); border-style: solid; color: #fff; }
.feed__redaktion svg { width: 1.05em; height: 1.05em; }
.feed__redaktion [opacity] { opacity: 0; }
.feed__stimme button { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .6rem; border: 1px solid var(--linie); border-radius: 999px;
  background: #fff; color: var(--leise); font: inherit; font-size: .8rem; cursor: pointer; transition: border-color .15s, color .15s; }
.feed__stimme button:hover:not([disabled]) { border-color: var(--akzent); color: var(--akzent-text); }
.feed__stimme button[aria-pressed="true"] { border-color: var(--akzent); color: var(--akzent-text); }
.feed__stimme svg { width: 1.1em; height: 1.1em; }
.feed__stimme [opacity] { opacity: 0; fill: var(--akzent); }
.feed__stimme button[aria-pressed="true"] [opacity] { opacity: .35; }
/* Liste: kleines Bild links, kein Anriss */
/* Raster (Kunde 13.10., wie die alte Startseite): Bild, Überschrift, dann Quelle | Datum mit dem Daumen rechts in derselben Zeile.
   Wird die Meta-Zeile zu lang, bricht sie in sich um – der Daumen bleibt rechts. */
.feed--raster .feed__text { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "titel titel" "meta aktionen"; align-items: center; column-gap: .6rem; }
.feed--raster .feed__titel { grid-area: titel; }
.feed--raster .feed__meta { grid-area: meta; flex-wrap: nowrap; min-width: 0; white-space: nowrap; }
.feed--raster .feed__meta > * { flex-shrink: 0; }
.feed--raster .feed__meta > .feed__quelle { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.feed--raster .feed__aktionen { grid-area: aktionen; justify-content: flex-end; }
.feed--raster .feed__stimme, .feed--raster .feed__redaktion { margin: 0; }
.feed--liste { grid-template-columns: 1fr; gap: .9rem; padding: .8rem 0; border-bottom: 1px solid var(--linie); }
.feed--liste .feed__titel { font-size: .98rem; }
.feed--liste .feed__text { display: grid; grid-template-columns: 1fr auto; column-gap: 1rem; align-items: center; }
.feed--liste .feed__meta { grid-column: 1 / -1; }
.feed--liste .feed__titel { margin: 0; }
.feed--liste .feed__play { transform: scale(.7); }

/* Quellenseite, Woche, Quellenverzeichnis */
.quellenkopf { max-width: var(--schmal); margin: 0 auto 1.6rem; text-align: center; }
.quellenkopf__text { color: #3a3a3d; }
.quellenkopf__marken { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
.beliebt__teil { margin: 1.8rem 0; }
/* Blättern nach Monaten: ← Vormonat | Monat Jahr | Folgemonat → */
.beliebt__monat { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .6rem; margin: 0 0 1rem; }
.beliebt__monat h2 { margin: 0; font: 700 1.3rem/1.3 var(--titel); text-align: center; white-space: nowrap; }
.beliebt__monat > :first-child, .beliebt__monat > :last-child { font-size: .9rem; min-width: 0; }
.beliebt__monat > :last-child { text-align: right; }
@media (max-width: 480px) { .beliebt__monat h2 { font-size: 1.05rem; } .beliebt__monat > :first-child, .beliebt__monat > :last-child { font-size: .8rem; } }
.quellen__gruppe { margin: 1.8rem 0; }
.quellen__liste { list-style: none; margin: 0; padding: 0; columns: 2 18rem; column-gap: 2rem; }
.quellen__liste li { break-inside: avoid; padding: .35rem 0; border-bottom: 1px dotted var(--linie); }
.quellen__liste a { text-decoration: none; color: var(--text); }
.quellen__liste a:hover strong { color: var(--akzent-text); }
.listensuche { width: 100%; font: inherit; padding: .6rem .8rem; border: 1px solid #cfcfd4; border-radius: var(--rundung); margin: 0 0 .8rem; }

/* Social-Media-Wall (Elfsight, Zwei-Klick) */
.sozialwand { margin: 1.6rem 0; }
/* Geladenes Widget breiter als die Textspalte (bis zur Breite des Kopfs), damit Elfsight 3 Spalten zeigt */
.sozialwand--geladen { --w: min(calc(var(--breit) - 2rem), calc(100vw - 2rem)); width: var(--w); margin-inline: calc((100% - var(--w)) / 2); }
.sozialwand__hinweis { display: grid; gap: .4rem; justify-items: center; text-align: center; padding: 2.2rem 1.2rem; background: var(--flaeche); border: 1px dashed #cfcfd4; border-radius: var(--rundung); }
.sozialwand__titel { font: 700 1.2rem/1.3 var(--titel); }
.sozialwand .knopf { margin-top: .6rem; }

/* Einwilligung externe Inhalte (_partials/zustimmung.twig, site.js) – Karte unten links, mobil über der Leiste */
.zustimmung { position: fixed; z-index: 70; left: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); width: min(30rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem); overflow-y: auto; padding: 1.2rem 1.3rem 1.3rem; background: #fff; border: 1px solid var(--linie);
  border-radius: var(--rundung); box-shadow: 0 10px 40px rgba(0,0,0,.18); font-size: .9rem; line-height: 1.5; }
.zustimmung p { margin: 0 0 .6rem; }
.zustimmung__titel { font: 700 1.05rem/1.3 var(--titel); margin: 0 0 .5rem; }
.zustimmung .knopfreihe .knopf { flex: 1 1 auto; text-align: center; }
@media (max-width: 800px) { .mit-js .zustimmung { bottom: calc(var(--leiste) + .6rem); left: .6rem; width: calc(100vw - 1.2rem); max-height: calc(100dvh - var(--leiste) - 4rem); } }
.fuss__einstellungen { font: inherit; color: var(--leise); background: none; border: 0; padding: 0; cursor: pointer; }
.fuss__einstellungen:hover { color: var(--akzent-text); }
.ohne-js .fuss__einstellungen { display: none; }
.embed__immer { display: block; margin: .7rem auto 0; font: inherit; font-size: .8rem; background: none; border: 0; padding: 0; color: inherit; opacity: .8; text-decoration: underline; cursor: pointer; }
.embed__immer:hover { opacity: 1; }
.embed__start ~ .embed__immer, .embed--vorschau .embed__immer { margin-top: .5rem; }

/* Beitragsbild mit Bildunterschrift (_partials/beitragsbild.twig) */
.beitrag__figur { margin: 0 0 2rem; }
.beitrag__figur .beitrag__bild { margin-bottom: 0; }
.beitrag__unterschrift { color: var(--leise); font-size: .85rem; margin-top: .4rem; }

/* Freie Plätze im Ticket-Kasten */
.tickets__frei { margin: 0 0 1rem; }
.tickets__frei p { margin: 0 0 .35rem; }
.tickets__balken { display: block; height: 6px; border-radius: 3px; background: var(--linie); overflow: hidden; }
.tickets__balken span { display: block; height: 100%; background: var(--akzent); }