/* visper fasnacht — kern aller seiten. bewegung nur transform/opacity, still bei
 * reduced-motion, im editor und ohne js. warum: README */

/* ——— schriften ——— */

/* bitter 700 selbst gehostet (ofl), nur latin, per preload */
@font-face {
  font-family: "Bitter";
  src: url("/assets/fonts/bitter-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* rückfall mit den massen der echten schriften (kein sprung) */
@font-face {
  font-family: "Bitter Fallback";
  src: local("Georgia Bold"), local("Georgia-Bold"), local("Georgia");
  font-weight: 700;
  size-adjust: 90.76%;
  ascent-override: 102.47%;
  descent-override: 28.65%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "komet Fallback";
  src: local("Arial"), local("ArialMT");
  font-weight: 400;
  size-adjust: 100.39%;
  ascent-override: 99.61%;
  descent-override: 24.9%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "komet Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 700;
  size-adjust: 95.24%;
  ascent-override: 105%;
  descent-override: 26.25%;
  line-gap-override: 0%;
}

/* ——— tokens ——— */

:root {
  --rot: #fb2c31;        /* flächen, linien, grossschrift */
  --rot-text: #e30e13;   /* weiss darauf 4.8:1, kleiner roter text */
  --rot-tief: #b00809;   /* beizen, wortmarke */
  --weinrot: #7e0204;    /* fliesstext, fokus */
  --weiss: #fff;
  --rosa: #fdeceb;       /* ruhige flächen */
  --rosa-kraeftig: #f8cfcc; /* linien auf rosa */
  --rot-auf-rosa: #c90a0f;  /* kleiner roter text auf rosa (5.2:1) */
  --knopf: #e30e13;      /* knopf-fläche, überall gleich */

  --schrift-titel: "Bitter", "Bitter Fallback", Georgia, serif;
  --schrift-text: "komet", "komet Fallback", Arial, sans-serif;

  --text: 1rem;
  --text-gross: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  --text-klein: .9375rem;
  --titel-seite: clamp(2.2rem, 1.35rem + 3.4vw, 3.9rem);
  --titel-abschnitt: clamp(1.9rem, 1.2rem + 2.6vw, 3.25rem);
  --titel-karte: clamp(1.35rem, 1rem + 1.2vw, 1.9rem);

  --rahmen: 1140px;
  --rand: clamp(16px, 4vw, 40px);
  --rand-voll: clamp(16px, 5vw, 96px);
  /* --kopf-h: echte höhe, misst site.js */
  --kopf-basis: 64px;
  --kopf-h: var(--kopf-basis);
  --abstand: clamp(56px, 4rem + 4vw, 120px);
  --radius: 6px;
  --radius-gross: 20px;

  --kurve: cubic-bezier(.2, .7, .2, 1);
  --kurve-raus: cubic-bezier(.22, 1, .36, 1);
  --schnell: 180ms;

  --z-kopf: 100;
  --z-oben: 200;
}
@media (min-width: 768px) {
  :root { --kopf-basis: 72px; }
}

/* ——— grundlagen ——— */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--kopf-h) + 16px);
  overflow-x: clip;
}
/* weich erst nach dem rendern, sonst hebt die animation den ankersprung auf */
@media (prefers-reduced-motion: no-preference) {
  html:is([data-geladen], [data-ohne-cms]) { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--weiss);
  color: var(--weinrot);
  font: 400 var(--text)/1.55 var(--schrift-text);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 1200px) {
  body { font-size: 1.0625rem; }
}

:where(h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote, dl, dd) { margin: 0; }
:where(h1, h2, h3, h4, h5, h6) { font-weight: 700; }
:where(ul, ol) { padding: 0; }

img, svg, video, picture { display: block; max-width: 100%; }
img { height: auto; }

:where(a) { color: inherit; }

button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }

::selection { background: var(--rot-text); color: var(--weiss); }

[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid var(--weinrot);
  outline-offset: 2px;
}
/* auf rosa (und im durchscheinenden kopf) ist --rot-text dunkler */
:is(.abschnitt--rosa, .seitenkopf--rosa, .mitmachen, .leer, .hinweis, .pdf, .beiz__motto, .kopf, .tag__blatt) { --rot-text: var(--rot-auf-rosa); }

:is(.auf-rot, .abschnitt--rot, .karte--rot) :focus-visible { outline-color: var(--weiss); }

/* ——— hilfsmittel ——— */

.nur-fuer-screenreader {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.sprungmarke {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: calc(var(--z-oben) + 10);
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--weinrot);
  color: var(--weiss);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
}
.sprungmarke:focus { transform: none; outline-color: var(--rot); }

/* deko: im editor nicht tauschbar */
.hero__bg { pointer-events: none; }

/* platzhalter der partials; der des kopfs hält seine höhe frei */
[data-include] { display: contents; }
[data-include="nav"] { display: block; min-height: var(--kopf-h); }

/* ——— satzspiegel ——— */

.rahmen {
  width: 100%;
  max-width: calc(var(--rahmen) + 2 * var(--rand));
  margin-inline: auto;
  padding-inline: var(--rand);
}
.rahmen--schmal { max-width: calc(760px + 2 * var(--rand)); }

.abschnitt { padding-block: var(--abstand); }
/* sektionen mit innenabstand ohne die luft von scroll-padding */
.abschnitt[id] { scroll-margin-top: -16px; }
.abschnitt--rosa { background: var(--rosa); }
.abschnitt--rot { background: var(--rot-tief); color: var(--weiss); }

.abschnitt__kopf {
  display: grid;
  gap: .6rem;
  max-width: 46rem;
  margin-bottom: clamp(28px, 1.5rem + 1.5vw, 48px);
}

.knopfreihe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}

/* ——— typo ——— */

.seitentitel,
.abschnitt__titel,
.kartentitel {
  font-family: var(--schrift-titel);
  font-weight: 700;
  line-height: 1.15;
  color: var(--rot);
  text-wrap: balance;
  /* anywhere: lange wörter bestimmen die mindestbreite nicht */
  overflow-wrap: anywhere;
}
.seitentitel { font-size: var(--titel-seite); line-height: 1.08; letter-spacing: -.01em; }
.abschnitt__titel { font-size: var(--titel-abschnitt); letter-spacing: -.005em; }
.kartentitel { font-size: var(--titel-karte); }
.abschnitt--rot .abschnitt__titel { color: var(--weiss); }

.abschnitt__untertitel,
.einleitung {
  font-size: var(--text-gross);
  line-height: 1.5;
  color: var(--weinrot);
  text-wrap: pretty;
}
.abschnitt--rot .abschnitt__untertitel { color: rgb(255 255 255 / .88); }

.kicker {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rot-text);
}

/* impressum, datenschutz */
.fliesstext { max-width: 58ch; }
.fliesstext > * + * { margin-top: 1em; }
.fliesstext :is(h2, h3) {
  font-family: var(--schrift-titel);
  color: var(--rot-text);
  line-height: 1.2;
  text-wrap: balance;
}
.fliesstext h2 { margin-top: 2.2em; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); }
.fliesstext h3 { margin-top: 1.6em; font-size: 1.2rem; }
.fliesstext :is(ul, ol) { padding-left: 1.25em; }
.fliesstext li + li { margin-top: .35em; }
.fliesstext :is(p, li) { text-wrap: pretty; }
.fliesstext a { color: var(--rot-text); text-decoration-thickness: 1px; text-underline-offset: .2em; }
.fliesstext a:hover { color: var(--weinrot); }
.fliesstext strong { font-weight: 700; }

/* von site.js aus data-format gebaut */
.text-formatiert { overflow-wrap: anywhere; }
.text-formatiert > * + * { margin-top: .85em; }
.text-formatiert strong { font-weight: 700; }
.text-formatiert a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  overflow-wrap: anywhere;
}
.text-formatiert a:hover { text-decoration-thickness: 2px; }
.punkte { list-style: none; padding: 0; }
.punkte > li {
  position: relative;
  padding-left: 1.15em;
  text-wrap: pretty;
}
.punkte > li + li { margin-top: .4em; }
/* raute statt punkt */
.punkte > li::before {
  content: "";
  position: absolute;
  left: .1em;
  top: .62em;
  width: .42em;
  height: .42em;
  background: var(--rot);
  transform: rotate(45deg);
}
/* eigener zähler (start setzt site.js) */
ol.punkte { counter-reset: punkt; }
ol.punkte > li { counter-increment: punkt; padding-left: 1.6em; }
ol.punkte--breit > li { padding-left: 2.2em; }
ol.punkte > li::before {
  content: counter(punkt) ".";
  top: 0;
  width: auto;
  height: auto;
  background: none;
  transform: none;
  color: var(--rot-text);
  font-weight: 700;
}
/* uhrzeit vorne im listenpunkt */
.zeit {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--rot-text);
  white-space: nowrap;
}

/* leere felder weg (im editor nur in sammlungen, sonst füllt man sie) */
html:not([data-modus="bearbeiten"]) [data-format]:empty,
[data-render] :is([data-field], [data-format]):empty { display: none; }

/* ——— links ——— */

/* textlink mit linie, auch .textknopf */
.linie, .textknopf {
  color: var(--rot-text);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  transition: color var(--schnell) ease, text-decoration-thickness var(--schnell) ease;
}
.linie:hover, .textknopf:hover { color: var(--weinrot); text-decoration-thickness: 2px; }
.linie { overflow-wrap: anywhere; }

/* ——— knöpfe ——— */

/* pille: rot, --rahmen, --weiss (auf rot), --klein (kopf) */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  min-height: 48px;
  padding: .7em 1.35em;
  border: 2px solid var(--knopf);
  border-radius: 999px;
  background: var(--knopf);
  color: var(--weiss);
  font: 700 1rem/1.2 var(--schrift-text);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--schnell) ease, border-color var(--schnell) ease, color var(--schnell) ease, transform var(--schnell) ease;
  -webkit-tap-highlight-color: transparent;
}
.knopf:hover { background: var(--weinrot); border-color: var(--weinrot); }
.knopf:active { transform: translateY(1px); }

.knopf--rahmen {
  background: var(--weiss);
  color: var(--knopf);
}
.knopf--rahmen:hover { background: var(--knopf); border-color: var(--knopf); color: var(--weiss); }

.knopf--weiss {
  border-color: var(--weiss);
  background: var(--weiss);
  color: var(--weinrot);
}
.knopf--weiss:hover { background: var(--rosa); border-color: var(--rosa); color: var(--weinrot); }

.knopf--klein {
  min-height: 44px;
  padding: .55em 1.1em;
  font-size: .9375rem;
}
.knopf__icon { width: 1.25em; height: 1.25em; flex: none; }
.knopf[aria-disabled="true"], .knopf:disabled { opacity: .55; cursor: not-allowed; }

.textknopf {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
}
.textknopf__icon { width: 1.3em; height: 1.3em; flex: none; }

/* ——— abzeichen ——— */

.abzeichen {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .2em .7em;
  border-radius: 999px;
  background: var(--rosa);
  color: var(--weinrot);
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .02em;
  white-space: nowrap;
}
.abzeichen--rot { background: var(--rot-text); color: var(--weiss); }

/* ——— karten ——— */

/* weiss mit dickem rotem rahmen; --klein 3 px, --rot fläche */
.karte {
  position: relative;
  padding: clamp(20px, 1rem + 1.2vw, 32px);
  border: 5px solid var(--rot);
  border-radius: var(--radius);
  background: var(--weiss);
  color: var(--weinrot);
}
.karte--klein { border-width: 3px; padding: clamp(18px, .9rem + .6vw, 24px); }
.karte--rot { border-color: var(--rot-text); background: var(--rot-text); color: var(--weiss); }

/* ——— hinweise ——— */

/* role/aria-live setzt die seite */
.hinweis {
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--rot-text);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--rosa);
  color: var(--weinrot);
}
.hinweis > * + * { margin-top: .5em; }
.hinweis--fehler { border-left-color: var(--weinrot); background: #fbe3e2; font-weight: 700; }
.hinweis--erfolg { border-left-color: var(--rot); background: var(--weiss); box-shadow: inset 0 0 0 1px var(--rosa-kraeftig); }

/* ——— kopf (partials/nav.html) ——— */

.kopf {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-kopf);
  min-height: var(--kopf-basis);
  background: rgb(255 255 255 / .97);
  transition: box-shadow 250ms ease;
}
html[data-gescrollt] .kopf {
  box-shadow: 0 1px 0 rgb(126 2 4 / .08), 0 10px 24px -14px rgb(126 2 4 / .35);
}
@supports (backdrop-filter: blur(1px)) {
  .kopf { background: rgb(255 255 255 / .9); backdrop-filter: saturate(1.4) blur(10px); }
}

.kopf__innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--kopf-basis);
  padding-inline: var(--rand-voll);
}

.kopf__marke {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  flex: none;
  text-decoration: none;
  transition: opacity 300ms var(--kurve), transform 300ms var(--kurve);
}
/* startseite: marke erst, wenn die im held weg ist (site.js) */
html[data-kopf-marke="aus"]:not([data-modus="bearbeiten"]) .kopf__marke {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 300ms, transform 300ms, visibility 0s 300ms;
}
.kopf__loewe { width: auto; height: 42px; }
.kopf__wortmarke { width: auto; height: 34px; }
@media (max-width: 559px) {
  .kopf__loewe { height: 38px; }
  .kopf__wortmarke { display: none; }
}
@media (min-width: 768px) {
  .kopf__loewe { height: 48px; }
  .kopf__wortmarke { height: 40px; }
}

.kopf__nav { min-width: 0; }
/* bricht bei grosser schrift um */
.kopf__liste {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: clamp(2px, 1.4vw, 18px);
  margin: 0;
  list-style: none;
}
.kopf__link {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-inline: clamp(6px, 1vw, 10px);
  color: var(--weinrot);
  font-size: .9375rem;
  font-weight: 700;
  text-decoration: none;
  transition: color var(--schnell) ease;
}
.kopf__link::after {
  content: "";
  position: absolute;
  left: clamp(6px, 1vw, 10px);
  right: clamp(6px, 1vw, 10px);
  bottom: 8px;
  height: 3px;
  border-radius: 2px;
  background: var(--rot);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 250ms var(--kurve);
}
.kopf__link:hover { color: var(--rot-text); }
.kopf__link:hover::after,
.kopf__link[aria-current]::after { transform: scaleX(1); }
.kopf__link[aria-current] { color: var(--rot-text); }
.kopf__knopf { margin-left: clamp(2px, 1vw, 10px); }
.kopf__knopf[aria-current="page"] { background: var(--weinrot); border-color: var(--weinrot); }
/* anmeldung zu: «Programm» wird der knopf, «Anmeldung» ein textlink */
html[data-anmeldung="zu"]:not([data-modus="bearbeiten"]) .kopf__link--programm {
  min-height: 44px;
  padding-inline: 1.1em;
  border-radius: 999px;
  background: var(--knopf);
  color: var(--weiss);
}
html[data-anmeldung="zu"]:not([data-modus="bearbeiten"]) .kopf__link--programm::after { content: none; }
html[data-anmeldung="zu"]:not([data-modus="bearbeiten"]) .kopf__link--programm:is(:hover, [aria-current]) { background: var(--weinrot); color: var(--weiss); }
html[data-anmeldung="zu"]:not([data-modus="bearbeiten"]) .kopf__knopf {
  padding-inline: clamp(6px, 1vw, 10px);
  border-color: transparent;
  background: none;
  color: var(--weinrot);
  text-decoration: underline 0 transparent;
  text-underline-offset: .35em;
}
html[data-anmeldung="zu"]:not([data-modus="bearbeiten"]) .kopf__knopf:is(:hover, [aria-current]) { color: var(--rot-text); text-decoration: underline 3px var(--rot); }
@media (min-width: 768px) {
  .kopf__link, html[data-anmeldung="zu"]:not([data-modus="bearbeiten"]) .kopf__knopf { font-size: 1rem; }
}
@media (max-width: 359px) {
  .kopf__liste { gap: 0; }
  .kopf__link { font-size: .875rem; padding-inline: 5px; }
  .kopf__knopf { padding-inline: .8em; font-size: .875rem; }
  html[data-anmeldung="zu"]:not([data-modus="bearbeiten"]) .kopf__link--programm { margin-right: 4px; padding-inline: .8em; }
}

/* «beizen» nur mit eingeschalteter sektion */
[data-nav-ziel="beizen"] { display: none; }
html:is([data-beizen="an"], [data-modus="bearbeiten"]) [data-nav-ziel="beizen"] { display: block; }
html[data-modus="bearbeiten"]:not([data-beizen="an"]) [data-nav-ziel="beizen"] { opacity: .45; }

/* ——— notnavigation und notfuss (ohne js oder cms.js) ——— */

.notnav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 18px;
  min-height: var(--kopf-h);
  padding: 8px var(--rand);
  border-bottom: 3px solid var(--rot);
}
.notnav a, .notfuss a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--rot-text);
  font-weight: 700;
}
.notnav a:first-child { margin-right: auto; font-family: var(--schrift-titel); font-size: 1.25rem; color: var(--rot); text-decoration: none; }
.notfuss {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 24px;
  margin: 0;
  padding: 32px var(--rand) 48px;
  border-top: 3px solid var(--rot);
}

/* ——— fuss (partials/footer.html) ——— */

/* dächerband: jede seite endet in visp (nicht mit kulisse). parallaxe: README «bewegung» */
.daecherband {
  display: block;
  height: clamp(200px, 30vw, 480px);
  margin-top: calc(-1 * clamp(20px, 3vw, 56px));
  overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 30%);
  mask-image: linear-gradient(transparent, #000 30%);
  view-timeline: --daecher;
}
.daecherband img {
  width: 100%;
  height: 150%;
  object-fit: cover;
  object-position: 50% 70%;
}
@keyframes daecher { from { transform: translateY(-33.3%); } }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-modus="bearbeiten"]) .daecherband img {
    animation: daecher linear both;
    animation-timeline: --daecher;
    animation-range: cover 0% cover 50%;
  }
}
.kein-js [data-spaet], body:has(.kulisse) .daecherband { display: none; }

.fuss {
  border-top: 3px solid var(--rot);
  background: var(--weiss);
  color: var(--weinrot);
}
.fuss__innen {
  max-width: calc(var(--rahmen) + 2 * var(--rand));
  margin-inline: auto;
  padding: clamp(40px, 2rem + 3vw, 72px) var(--rand) 0;
}
.fuss__raster {
  display: grid;
  gap: 36px 32px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .fuss__raster { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) {
  .fuss__raster { grid-template-columns: 1.15fr 1.25fr 1fr .7fr; }
}

.fuss__marke {
  display: flex;
  align-items: center;
  gap: 12px;
  align-self: start;
  justify-self: start;
  text-decoration: none;
}
.fuss__loewe { width: auto; height: 76px; }
.fuss__wortmarke { width: auto; height: 62px; }

.fuss__titel { margin-bottom: .7rem; }
.fuss__text { line-height: 1.5; }
.fuss__text + .fuss__text { margin-top: .8rem; }
.fuss__text .linie { display: inline-block; padding-block: 4px; }

.fuss__partner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin: 0;
  list-style: none;
}
.partner {
  display: grid;
  justify-items: start;
  gap: 8px;
  padding: 4px;
  border-radius: var(--radius);
  text-decoration: none;
  transition: transform var(--schnell) ease;
}
.partner:hover { transform: translateY(-2px); }
.partner__logo { width: auto; height: 68px; }
.partner__name {
  max-width: 9rem;
  color: var(--weinrot);
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.3;
}
.partner:hover .partner__name { text-decoration: underline; }

.fuss__sozial {
  display: flex;
  gap: 10px;
  margin: 0;
  list-style: none;
}
.sozial {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--rosa);
  color: var(--rot-text);
  transition: background-color var(--schnell) ease, color var(--schnell) ease, transform var(--schnell) ease;
}
.sozial svg { width: 24px; height: 24px; }
.sozial:hover { background: var(--rot-text); color: var(--weiss); transform: translateY(-2px); }

.fuss__unten {
  margin-top: clamp(32px, 1.5rem + 2vw, 56px);
  padding-block: 18px calc(24px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--rosa-kraeftig);
}
.fuss__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
  margin: 0;
  list-style: none;
}
.fuss__links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 400; }

/* ——— links ohne adresse ——— */

/* leeres feld → kein href → weg (im editor gedimmt, zum füllen) */
html:not([data-modus="bearbeiten"]) a[data-href="url"]:not([href]),
html:not([data-modus="bearbeiten"]) li:has(> a[data-href="url"]:not([href])) { display: none; }
html[data-modus="bearbeiten"] a[data-href="url"]:not([href]) { opacity: .45; }

/* in sammlungen auch im editor */
[data-render] a:is([data-field-attr*="href:"], [data-href]):not([href]) { display: none; }

/* ——— sammlungen: versteckte einträge ——— */

/* versteckt bzw. über 7 tage vorbei: live weg, im editor gedimmt */
html:not([data-modus="bearbeiten"]) [data-render] > :is([data-versteckt="true"], [data-weg]) { display: none; }
html[data-modus="bearbeiten"] [data-render] > :is([data-versteckt="true"], [data-weg]) {
  opacity: .5;
  outline: 2px dashed var(--weinrot);
  outline-offset: 3px;
}
html[data-modus="bearbeiten"] [data-render] > :is([data-versteckt="true"], [data-weg])::before {
  content: "Live ausgeblendet";
  position: absolute;
  top: -14px;
  right: 12px;
  z-index: 1;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--weinrot);
  color: var(--weiss);
  font: 700 .75rem/1.6 var(--schrift-text);
}
html[data-modus="bearbeiten"] [data-render] > [data-weg]::before { content: "Vorbei – live ausgeblendet"; }
html[data-modus="bearbeiten"] [data-render] > [data-versteckt="true"]::before { content: "Versteckt – live ausgeblendet"; }

/* datum nicht lesbar: im editor ein hinweis am datum */
html[data-modus="bearbeiten"] [data-datum-fehler]::after {
  content: "Datum «" attr(data-datum-fehler) "» nicht erkannt – TT.MM.JJJJ";
  display: inline-block;
  margin-left: .5em;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--weinrot);
  color: var(--weiss);
  font: 700 .75rem/1.6 var(--schrift-text);
}
html[data-modus="bearbeiten"] [data-datum-fehler=""]::after { content: "Ohne Datum – steht am Ende (TT.MM.JJJJ)"; margin-left: 0; }

/* ——— anmeldung offen/zu (site.js) ——— */

/* ohne entscheid gilt «offen»; im editor beide, das inaktive gedimmt */
html:not([data-anmeldung="zu"], [data-modus="bearbeiten"]) [data-wenn-anmeldung="zu"],
html[data-anmeldung="zu"]:not([data-modus="bearbeiten"]) [data-wenn-anmeldung="offen"] { display: none; }
html[data-modus="bearbeiten"][data-anmeldung="zu"] [data-wenn-anmeldung="offen"],
html[data-modus="bearbeiten"]:not([data-anmeldung="zu"]) [data-wenn-anmeldung="zu"] {
  padding: 6px 14px 14px;
  border: 2px dashed var(--weinrot);
  border-radius: var(--radius);
  opacity: .6;
}
html[data-modus="bearbeiten"][data-anmeldung="zu"] [data-wenn-anmeldung="offen"]::before,
html[data-modus="bearbeiten"]:not([data-anmeldung="zu"]) [data-wenn-anmeldung="zu"]::before {
  content: "Live ausgeblendet (Anmeldung offen/zu in «site»)";
  display: block;
  margin-bottom: 4px;
  font-size: .75rem;
  font-weight: 700;
}

/* ——— löwe (marke/loewe-inline.html) ——— */

/* der «drunk lion» schwankt beim laden einmal (held, 404) */
.loewe { width: 100%; height: auto; overflow: visible; color: var(--rot); fill: currentColor; }
@keyframes schwanken {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-3deg); }
  75% { transform: rotate(3deg); }
}
@keyframes schein {
  0%, 100% { transform: none; }
  30% { transform: translate(-1.5px, .5px) rotate(-6deg); }
  70% { transform: translate(1.5px, -.5px) rotate(5deg); }
}
@media (prefers-reduced-motion: no-preference) {
  html:not(.kein-js, [data-modus="bearbeiten"]) .loewe--schwankt {
    transform-origin: 50% 95%;
    animation: schwanken 4.8s ease-in-out;
  }
  html:not(.kein-js, [data-modus="bearbeiten"]) .loewe--schwankt .loewe__schein {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: schein 4.4s ease-in-out .3s;
  }
}

/* ——— trompete (marke/trompete-inline.html) ——— */

/* nachbau des lottie: drei noten je eintritt (.blaest) */
.trompete { width: 100%; height: auto; overflow: visible; color: var(--rot); fill: currentColor; }
/* weisse scheibe um die trompete */
.trompete-scheibe {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--weiss);
  box-shadow: 0 24px 50px -30px rgb(126 2 4 / .45);
}
.trompete-scheibe > .trompete { width: 70%; }
.trompete__note { transform-box: view-box; transform-origin: 0 0; }
@keyframes trompete-note {
  0% { transform: translate(45.06px, 32.06px) scale(.0123) translate(-171px, -279.5px); opacity: 1; }
  6.47% { transform: translate(45.29px, 31.74px) scale(.0133) translate(-171px, -279.5px); opacity: 1; }
  12.9% { transform: translate(45.94px, 30.84px) scale(.0158) translate(-171px, -279.5px); opacity: 1; }
  19.37% { transform: translate(46.98px, 29.47px) scale(.0196) translate(-171px, -279.5px); opacity: 1; }
  25.8% { transform: translate(48.36px, 27.73px) scale(.024) translate(-171px, -279.5px); opacity: 1; }
  32.27% { transform: translate(50.07px, 25.74px) scale(.0287) translate(-171px, -279.5px); opacity: 1; }
  40.34% { transform: translate(52.61px, 23.1px) scale(.0343) translate(-171px, -279.5px); opacity: 1; }
  48.41% { transform: translate(55.56px, 20.53px) scale(.0388) translate(-171px, -279.5px); opacity: 1; }
  59.81% { transform: translate(60.27px, 17.58px) scale(.0416) translate(-171px, -279.5px); opacity: 1; }
  67.73% { transform: translate(63.65px, 16.32px) scale(.0416) translate(-171px, -279.5px); opacity: .9; }
  75.8% { transform: translate(66.8px, 15.64px) scale(.0416) translate(-171px, -279.5px); opacity: .65; }
  83.86% { transform: translate(69.3px, 15.15px) scale(.0416) translate(-171px, -279.5px); opacity: .35; }
  91.93% { transform: translate(70.88px, 14.58px) scale(.0416) translate(-171px, -279.5px); opacity: .1; }
  100% { transform: translate(71.41px, 14.27px) scale(.0416) translate(-171px, -279.5px); opacity: 0; }
}
@keyframes trompete-stoss {
  0%, 100% { transform: rotate(0); }
  16.67% { transform: rotate(-5deg); }
  50% { transform: rotate(1.5deg); }
}
@media (prefers-reduced-motion: no-preference) {
  html:not(.kein-js, [data-modus="bearbeiten"]) .blaest .trompete__note { animation: trompete-note 2.07s linear forwards; }
  html:not(.kein-js, [data-modus="bearbeiten"]) .blaest .trompete__note.n2 { animation-delay: 1.24s; }
  html:not(.kein-js, [data-modus="bearbeiten"]) .blaest .trompete__note.n3 { animation-delay: 2.67s; }
  html:not(.kein-js, [data-modus="bearbeiten"]) .blaest .trompete {
    transform-origin: 30% 72%;
    animation: trompete-stoss 1.2s ease-in-out;
  }
}

/* ——— auftritte ——— */

/* von unten, einmalig; listeneinträge erst mit .wartet (site.js) */
@media (prefers-reduced-motion: no-preference) {
  html:not(.kein-js, [data-modus="bearbeiten"]) [data-auftritt] {
    transition: opacity 600ms var(--kurve), transform 600ms var(--kurve);
  }
  html:not(.kein-js, [data-modus="bearbeiten"]) [data-auftritt]:not(.sichtbar) {
    opacity: 0;
    transform: translateY(24px);
  }
  html:not(.kein-js, [data-modus="bearbeiten"]) [data-auftritt-liste] > .wartet {
    transition: opacity 550ms var(--kurve) calc(var(--i, 0) * 70ms), transform 550ms var(--kurve) calc(var(--i, 0) * 70ms);
  }
  html:not(.kein-js, [data-modus="bearbeiten"]) [data-auftritt-liste] > .wartet:not(.da) {
    opacity: 0;
    transform: translateY(28px);
    /* sprung zur karte: sie steht noch tiefer */
    scroll-margin-top: 28px;
  }
}

/* ——— edit-modus: alles sichtbar, nichts bewegt sich ——— */

html[data-modus="bearbeiten"] [data-auftritt],
html[data-modus="bearbeiten"] [data-auftritt-liste] > * {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}
/* der editor liest mehrzeiliges mit innerText zurück (folgt text-transform) */
html[data-modus="bearbeiten"] :is([data-multiline], [data-multiline] *):not([data-render] *) { text-transform: none !important; }
html[data-modus="bearbeiten"] [contenteditable]:empty {
  display: inline-block;
  min-width: 3ch;
  min-height: 1em;
}
html[data-modus="bearbeiten"] [contenteditable]:empty::before {
  content: "…";
  opacity: .5;
}
/* der fuss rückt über die editor-leiste (--leiste misst site.js) */
html[data-modus="bearbeiten"] { --leiste: 94px; }
@media (min-width: 1200px) {
  html[data-modus="bearbeiten"] { --leiste: 53px; }
}
@media (max-width: 767px) {
  html[data-modus="bearbeiten"] { --leiste: 135px; }
}
@media (max-width: 479px) {
  html[data-modus="bearbeiten"] { --leiste: 180px; }
}
html[data-modus="bearbeiten"] .fuss__unten { padding-bottom: calc(var(--leiste) + 24px); }

/* ——— bewegung abbestellt ——— */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
}

/* ——— druck: alles sichtbar, nichts fest ——— */
@media print {
  html [data-auftritt],
  html [data-auftritt-liste] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .sprungmarke, .daecherband { display: none; }
  .kopf { position: static; }
  .programm__liste > li { break-inside: avoid; }
}