/* ===================================================================
   DEMOKRATIEfest Brettorf — Aufsatz auf Quark 2
   Farben und Schrift aus der Folienvorlage Variante B (Editorial).
   =================================================================== */

/* ---------- Schriften, lokal (kein CDN) ----------
   Source Sans 3 als variable Schrift: eine Datei fuer alle Staerken von
   200 bis 900. Ersetzt fuenf Einzelschnitte und ist zusammen kleiner als
   zwei davon. Dieselbe Schrift, mit der die Plakate und Kacheln gesetzt
   sind — Ueberschriften unterscheiden sich ueber das Gewicht, nicht ueber
   eine zweite Familie.
   Bezogen ueber: npm pack @fontsource-variable/source-sans-3
   ---------- */
@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/source-sans-3/source-sans-3-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/source-sans-3/source-sans-3-latin-wght-italic.woff2') format('woff2-variations');
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

/* Nur fuer die hervorgehobene Zeile auf dem Zettel — der Duktus des
   Stempels "Das Original". */
@font-face { font-family:'Comic Neue'; src:url('../fonts/comic-neue/comic-neue-latin-700-normal.woff2') format('woff2');
             font-weight:700; font-style:normal; font-display:swap; }

/* ---------- Palette ---------- */
:root {
  --mc-rot:        #F68714;   /* Orange aus Logo und Plakaten */
  --mc-rot-dunkel: #A85504;   /* Links: 5,3:1 auf Weiss */
  --mc-schwarz:    #1C1B1A;
  --mc-grau:       #5A5654;
  --mc-papier:     #FFFFFF;   /* die Plakate sind weiss */
  --mc-beige:      #DDDAD6;
  --mc-beige-hell: #F7F6F4;
  --mc-weiss:      #FFFFFF;

  /* ---- Stellschrauben Startseiten-Logo ----
     Angaben relativ zur Bannerhöhe. Zwei getrennte Sätze, damit sich beide
     unabhängig im Inspektor drehen lassen — eine zweite :root-Regel in einer
     Medienabfrage würde die erste überstimmen und das Ändern blockieren. */
  --logo-groesse:  48%;    /* Durchmesser, bezogen auf die Bannerhöhe */
  --logo-drehung:  10deg;  /* im Uhrzeigersinn */
  --logo-links:    86%;    /* Abstand vom linken Bannerrand */
  --logo-unten:    66%;    /* Abstand vom unteren Bannerrand */

  /* Schmale Schirme (unter 700 px) */
  --logo-groesse-handy: 56%;
  --logo-links-handy:   84%;
  --logo-unten-handy:   52%;

  --q2-accent:          var(--mc-rot);
  --q2-accent-contrast: var(--mc-schwarz);  /* Weiss auf Orange waere 2,5:1 */
  --q2-link:            var(--mc-rot-dunkel);
  --q2-focus-ring:      color-mix(in oklab, var(--mc-rot) 45%, transparent);

  --mc-rand: 1px solid var(--mc-beige);
}

:root[data-theme='dark'] {
  --mc-papier: #1E1B1C;
  --mc-beige:  #3A3435;
  --mc-beige-hell: #2A2526;
  --mc-schwarz: #EDE7DC;
  --mc-grau:   #B3A99F;
  --q2-accent: color-mix(in oklab, var(--mc-rot) 78%, white 22%);
  --q2-link:   color-mix(in oklab, var(--mc-rot) 60%, white 40%);
}

body {
  font-family:'Source Sans 3', system-ui, -apple-system, sans-serif;
  background: var(--mc-papier);
  color: var(--mc-schwarz);
}

h1, h2, h3, h4, h5, h6 {
  font-family:'Source Sans 3', system-ui, sans-serif;
  font-weight:900; letter-spacing:-.015em; line-height:1.06;

  /* Keine Silbentrennung in Überschriften. Nur wenn ein einzelnes Wort
     breiter ist als die Spalte, bricht der Browser es notgedrungen um —
     dann ohne Trennstrich. */
  hyphens:none; -webkit-hyphens:none; -ms-hyphens:none;
  overflow-wrap:break-word;

  /* Verteilt mehrzeilige Überschriften gleichmäßig, statt ein einzelnes
     Wort auf der letzten Zeile stehen zu lassen. */
  text-wrap:balance;
}

a { color: var(--q2-link); }

.container--eng { max-width: 70ch; margin-inline:auto; }

/* Sichtbarer Fokus — Tastaturbedienung */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--mc-rot);
  outline-offset: 2px;
}

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

/* ===================================================================
   Startseite
   =================================================================== */

.start-kopf { text-align:center; padding:2.5rem 0 1rem; }

@media (max-width:700px) {
  .start-kopf { padding:.5rem 0 .5rem; }
}

/* ---------- Banner mit überlappendem Logo ---------- */
.start-banner {
  position:relative;
  max-width:1000px;
  margin-inline:auto;
}

.start-kopf .start-banner__bild { width:100%; height:auto; display:block; }

.start-kopf .start-banner__logo {
  position:absolute;
  left:var(--logo-links);
  bottom:var(--logo-unten);
  height:var(--logo-groesse);
  width:auto; max-width:none;
  aspect-ratio:1 / 1;
  margin:0;
  transform:rotate(var(--logo-drehung));
  transform-origin:center;
  filter:drop-shadow(0 4px 14px rgb(43 39 40 / .3));
  pointer-events:none;
}

/* Schmale Schirme: greift auf die eigenen Handy-Variablen zu, überschreibt
   also keine der :root-Werte und blockiert damit nichts. */
@media (max-width:700px) {
  .start-kopf .start-banner__logo {
    height: var(--logo-groesse-handy);
    left:   var(--logo-links-handy);
    bottom: var(--logo-unten-handy);
  }
}

.start-kopf p.start-kopf__claim {
  position:relative;
  max-width:640px; margin:4.8rem auto 1.5rem;   /* Luft zum Banner */
  padding:2.5rem clamp(1.5rem, 4vw, 2.7rem) 2.2rem;

  /* Papierstruktur aus dem DEMOKRATIEfest Brettorf-Bildmaterial, auf helles Papier gezogen */
  background:#F8F1E4 url('../images/papier-hell.jpg') center / cover;

  transform:rotate(-1.4deg);
  border:1px solid rgb(120 96 60 / .18);
  box-shadow:
    0 1px 1px rgb(43 39 40 / .10),
    0 8px 18px rgb(43 39 40 / .16),
    0 22px 40px rgb(43 39 40 / .10),
    inset 0 0 22px rgb(120 96 60 / .12);

  font-size:clamp(1.1rem, 2.3vw, 1.32rem);
  font-weight:600;
  line-height:1.5;
  color:var(--mc-schwarz);
  hyphens:none; -webkit-hyphens:none;
  text-wrap:pretty;
}

/* Durchscheinende Klebestreifen über zwei Ecken */
.start-kopf p.start-kopf__claim::before,
.start-kopf p.start-kopf__claim::after {
  content:''; position:absolute; width:118px; height:32px;
  background:rgba(222,205,170,.72);
  box-shadow:0 1px 3px rgb(43 39 40 / .18);
  border-left:1px dashed rgba(255,255,255,.5);
  border-right:1px dashed rgba(255,255,255,.5);
}
.start-kopf p.start-kopf__claim::before { top:-15px; left:-26px; transform:rotate(-27deg); }
.start-kopf p.start-kopf__claim::after  { bottom:-15px; right:-26px; transform:rotate(-27deg); }

/* Letzte Zeile als Bekenntnis */
.start-kopf__bekenntnis {
  display:block;
  font-family:'Comic Neue', 'Source Sans 3', cursive;
  font-weight:400;
  font-size:1.4em;
  line-height:1.28;
  color:var(--mc-rot-dunkel);
  margin-top:1rem;
}

/* Breite Schirme: die im Frontmatter vorgegebene Zeilenaufteilung gilt. */
.start-kopf__zeile { display:block; }

/* Schmale Schirme: linksbündig, freier Umbruch — sonst entstehen
   Zeilen, die aus dem Bild laufen. */
@media (max-width:700px) {
  .start-kopf p.start-kopf__claim {
    text-align:left;
    max-width:none;
    margin:2.6rem .4rem 1.2rem;
    padding:1.8rem 1.4rem 1.6rem;
    font-size:1.06rem;
    transform:rotate(-1deg);
  }
  .start-kopf p.start-kopf__claim::before { left:-14px; width:96px; }
  .start-kopf p.start-kopf__claim::after  { right:-14px; width:96px; }
  .start-kopf__zeile { display:inline; }
  .start-kopf__bekenntnis { margin-top:.8rem; font-size:1.3em; }

  .seiten-kopf__innen { gap:1rem; }
}

/* ---------- Zweizeilige Navigation ----------
   Quark 2 formatiert die Liste über `.dropmenu ul`. Dieser Selektor ist
   spezifischer als eine einzelne Klasse — deshalb hier durchgehend mit
   zwei Klassen bzw. Klasse + Element arbeiten, sonst gewinnt Quark 2. */

.dropmenu .mc-nav,
nav.mc-nav {
  display:flex; flex-direction:column;
  gap:.1rem; align-items:flex-end; width:100%;
}

.mc-nav ul.mc-nav__zeile {
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:row; flex-wrap:wrap;
  gap:.1rem .3rem; justify-content:flex-end; align-items:baseline;
}

.mc-nav ul.mc-nav__zeile li {
  display:inline-block; margin:0; padding:0; float:none;
}

.mc-nav ul.mc-nav__zeile li a {
  display:block; text-decoration:none; color:var(--mc-schwarz);
  border-bottom:2px solid transparent; white-space:nowrap;
}
.mc-nav ul.mc-nav__zeile li a:hover { color:var(--mc-rot); }
.mc-nav ul.mc-nav__zeile li a.aktiv { color:var(--mc-rot); border-bottom-color:var(--mc-rot); }

.mc-nav ul.mc-nav__zeile--haupt li a {
  font-size:1rem; font-weight:600; padding:.3rem .55rem;
}

.mc-nav ul.mc-nav__zeile--klein li a {
  font-size:.76rem; font-weight:400; padding:.05rem .55rem;
  color:var(--mc-grau); letter-spacing:.02em;
}
.mc-nav ul.mc-nav__zeile--klein li a:hover,
.mc-nav ul.mc-nav__zeile--klein li a.aktiv { color:var(--mc-rot); }

@media (max-width:720px) {
  .dropmenu .mc-nav, nav.mc-nav { align-items:center; }
  .mc-nav ul.mc-nav__zeile { justify-content:center; }
}

/* ---------- Vier Rubrikkacheln ---------- */
.rubriken {
  display:grid; gap:1.1rem; margin:2.5rem 0 3.5rem;
  grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
}

/* Acht Kacheln, gedacht als zwei Reihen zu vier. Unterhalb von 1150 px
   wird daraus 2 x 4 hochkant, unter 560 px eine Spalte — vier Kacheln
   nebeneinander waeren dort je 80 px breit und die Beschriftung unlesbar. */
@media (max-width:700px)  { .rubriken { margin:1.5rem 0 2.5rem; gap:.8rem; } }
@media (min-width:560px)  { .rubriken { grid-template-columns:repeat(2, 1fr); } }
@media (min-width:1150px) { .rubriken { grid-template-columns:repeat(4, 1fr); } }

.rubrik {
  position:relative; display:flex; flex-direction:column; justify-content:flex-end;
  aspect-ratio:1 / 1; text-decoration:none;
  background:var(--mc-beige-hell); border:var(--mc-rand);
  overflow:hidden; transition:transform 180ms ease, box-shadow 180ms ease;
}
/* Nur Platzhalterkacheln brauchen Innenabstand für ihren Text */
.rubrik--ohne-bild { padding:1.25rem; }
.rubrik:hover, .rubrik:focus-visible {
  transform:translateY(-3px); box-shadow:0 10px 26px rgb(43 39 40 / .18);
}

.rubrik__bild {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0;
}
.rubrik__schleier {
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgb(43 39 40 / .12) 0%, rgb(43 39 40 / .78) 100%);
}
.rubrik__text { position:relative; z-index:2; color:#fff; }
.rubrik__titel { margin:0; font-size:1.35rem; line-height:1.2; }
.rubrik__unter { margin:.3rem 0 0; font-size:.92rem; opacity:.9; }

/* Platzhalter, solange keine Kachelbilder da sind: helle Fläche, dunkle Schrift */
.rubrik--ohne-bild {
  background:var(--mc-beige-hell);
  justify-content:center; text-align:center;
}
.rubrik--ohne-bild .rubrik__text { color:var(--mc-schwarz); }
.rubrik--ohne-bild .rubrik__titel { color:var(--mc-rot-dunkel); }
.rubrik--ohne-bild .rubrik__unter { color:var(--mc-grau); opacity:1; }
.rubrik--ohne-bild:hover { background:var(--mc-weiss); }

/* Eckwinkel nur bei Platzhalterkacheln — die gestalteten Kacheln
   bringen ihren eigenen roten Rahmen bereits mit. */
.rubrik--ohne-bild::before, .rubrik--ohne-bild::after {
  content:''; position:absolute; z-index:2; width:18px; height:18px;
  border-color:var(--mc-rot); border-style:solid; border-width:0;
}
.rubrik--ohne-bild::before { top:10px; left:10px;  border-top-width:4px; border-left-width:4px; }
.rubrik--ohne-bild::after  { bottom:10px; right:10px; border-bottom-width:4px; border-right-width:4px; }

/* ===================================================================
   Seitenkopf allgemein
   =================================================================== */

.seiten-kopf {
  background:var(--mc-rot); color:#fff;
  padding:1.9rem 0; margin-bottom:2.5rem;
}

.seiten-kopf__innen {
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  /* Ohne Untertitel — Impressum, Datenschutz — war der Balken so niedrig,
     dass das Logo unten heraushing. Eine Mindesthoehe haelt ihn stabil. */
  min-height:5.4rem;
}

.seiten-kopf__text { min-width:0; }

.seiten-kopf h1 { margin:0; color:#fff; font-size:clamp(1.7rem, 4vw, 2.4rem); }

/* Farbe muss ausdrücklich gesetzt werden — sonst greift die dunkle
   Textfarbe von Quark 2 und der Kontrast auf Rot reicht nicht. */
.seiten-kopf p.seiten-kopf__unter {
  margin:.5rem 0 0;
  color:var(--mc-beige-hell);
  font-style:italic;
  font-size:clamp(1.15rem, 1rem + .7vw, 1.5rem);
  font-weight:300;
  line-height:1.25;
  opacity:1;
}

.seiten-kopf__logo {
  flex:0 0 auto; width:clamp(74px, 12vw, 128px); height:auto;
  filter:drop-shadow(0 3px 10px rgb(43 39 40 / .35));
  /* Das Logo sitzt etwas ueber der Mitte des Balkens — es soll aufliegen,
     nicht heraushaengen. Der eine Wert steuert das. */
  transform:translateY(-12%);
  position:relative; z-index:2;
}

/* ===================================================================
   Kalender
   =================================================================== */

.kalender {
  background:var(--mc-weiss); border:var(--mc-rand);
  padding:1.25rem; margin-bottom:2.5rem;
}
:root[data-theme='dark'] .kalender { background:var(--mc-beige-hell); }

.kalender__kopf {
  display:flex; align-items:center; justify-content:space-between;
  gap:.6rem; margin-bottom:1rem;
}
.kalender__monat {
  margin:0; font-size:1.15rem; text-align:center;
  flex:1 1 auto; hyphens:none; white-space:nowrap;
}
.kalender__blaettern {
  flex:0 0 auto; display:inline-flex; align-items:center; gap:.3rem;
  white-space:nowrap;
}

/* Schmale Schirme: Monat in eigener Zeile, darunter die beiden Pfeile
   nebeneinander mit Luft dazwischen. */
@media (max-width:620px) {
  .kalender__kopf { flex-wrap:wrap; row-gap:.8rem; }
  .kalender__monat { flex:1 0 100%; order:-1; font-size:1.1rem; }
  .kalender__blaettern { flex:1 1 0; justify-content:center; }
  .kalender__monatsname { display:inline; }
}

.kalender__gitter {
  display:grid; grid-template-columns:repeat(7, 1fr);
  gap:2px; background:var(--mc-beige);
  border:1px solid var(--mc-beige);
}
.kalender__wochentag {
  background:var(--mc-beige-hell); text-align:center;
  padding:.4rem 0; font-size:.75rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; color:var(--mc-grau);
}
.kalender__tag {
  background:var(--mc-weiss); min-height:4.4rem; padding:.3rem;
  font-size:.85rem; position:relative;
}
:root[data-theme='dark'] .kalender__tag { background:var(--mc-papier); }
.kalender__tag--leer { background:var(--mc-beige-hell); }
.kalender__tag--heute { outline:2px solid var(--mc-grau); outline-offset:-2px; }

.kalender__tag--termin { background:var(--mc-rot); }
.kalender__tag--termin a { color:#fff; font-weight:700; text-decoration:none;
  display:block; width:100%; height:100%; }
.kalender__tag--termin:hover { background:var(--mc-rot-dunkel); }

.kalender__punkt {
  display:none; width:6px; height:6px; border-radius:50%;
  background:#fff; margin-top:.2rem;
}

.kalender__zahl { font-weight:700; }

/* Kurztext in der Tageszelle: höchstens zwei Zeilen, dann abgeschnitten.
   Der vollständige Titel steht im title-Attribut des Links. */
.kalender__label {
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; margin-top:.12rem;
  font-size:.68rem; font-weight:400; line-height:1.2;
  overflow-wrap:anywhere; hyphens:none;
}

.kalender__zeit { font-weight:700; margin-right:.25rem; }
.kalender__mehr { opacity:.85; }

/* Schmale Schirme: kein Platz für Text — zurück zum Punkt */
@media (max-width:700px) {
  .termin__bild { width:72px; height:72px; margin-left:0; }
  .kalender__tag { min-height:2.9rem; }
  .kalender__label { display:none; }
  .kalender__punkt { display:block; }
}

/* ===================================================================
   Veranstaltungen
   =================================================================== */

.termin-liste { display:flex; flex-direction:column; gap:1rem; }

.termin {
  display:flex; gap:1.1rem; align-items:flex-start; flex-wrap:wrap;
  background:var(--mc-weiss); border:var(--mc-rand);
  border-left:5px solid var(--mc-rot); padding:1rem 1.15rem;
}
:root[data-theme='dark'] .termin { background:var(--mc-beige-hell); }
.termin--vergangen { border-left-color:var(--mc-grau); opacity:.94; }

.termin__datum {
  flex:0 0 auto; width:66px; text-align:center;
  background:var(--mc-rot); color:#fff; padding:.45rem 0;
}
.termin--vergangen .termin__datum { background:var(--mc-grau); }
.termin__tag   { font-size:1.55rem; font-weight:700; line-height:1; }
.termin__monat { font-size:.72rem; text-transform:uppercase; letter-spacing:.07em; }
.termin__jahr  { font-size:.7rem; opacity:.8; }

/* Vorschaubild am rechten Ende der Karte */
.termin__bild {
  flex:0 0 auto; display:block; width:104px; height:104px;
  margin-left:auto;
  overflow:hidden;
}
.termin__bild img { width:100%; height:100%; object-fit:contain; display:block;
  transition:transform 220ms ease; }
.termin:hover .termin__bild img { transform:scale(1.06); }

.termin__inhalt { flex:1 1 240px; min-width:0; }

/* ---------- Auswahl mehrerer Termine ---------- */
.termin__wahl {
  flex:0 0 auto; display:flex; align-items:center;
  align-self:stretch; padding-right:.2rem; cursor:pointer;
}
.termin__haken { width:20px; height:20px; accent-color:var(--mc-rot); cursor:pointer; }

.wahlleiste {
  display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
  padding:.75rem 1rem; margin-bottom:1rem;
  background:var(--mc-beige-hell); border:var(--mc-rand);
}
:root[data-theme='dark'] .wahlleiste { background:color-mix(in oklab, var(--mc-schwarz) 20%, transparent); }

.wahlleiste__alle { display:flex; align-items:center; gap:.45rem; cursor:pointer; font-size:.92rem; }
.wahlleiste__alle input { width:18px; height:18px; accent-color:var(--mc-rot); cursor:pointer; }

.wahlleiste__zaehler { font-size:.88rem; color:var(--mc-grau); margin-right:auto; }

.wahlleiste .btn:disabled { background:var(--mc-beige); color:var(--mc-grau); cursor:default; }

.termin__titel { margin:0 0 .35rem; font-size:1.15rem; }
.termin__titel a { text-decoration:none; color:inherit; }
.termin__titel a:hover { color:var(--mc-rot); }

.termin__meta {
  display:flex; flex-wrap:wrap; gap:.3rem 1rem;
  font-size:.88rem; color:var(--mc-grau); margin-bottom:.45rem;
}
.termin__meta span { display:inline-flex; align-items:center; gap:.35rem; }

.termin__aktionen { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.6rem; }

/* Zeile aus mehreren Schaltflächen — bricht mit Abstand um */
.knopfzeile {
  display:flex; flex-wrap:wrap; gap:.6rem;
  margin:0 0 2rem;
}

/* ---------- Schaltflächen ---------- */
.btn {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.5rem 1rem; font-size:.9rem; text-decoration:none;
  border:1px solid transparent; cursor:pointer; font-family:inherit;
}
.btn--rot { background:var(--mc-rot); color:var(--mc-schwarz); font-weight:600; }
.btn--rot:hover { background:var(--mc-schwarz); color:#fff; }
.btn--linie { background:transparent; color:var(--mc-schwarz); border-color:var(--mc-beige); }
.btn--linie:hover { background:var(--mc-beige-hell); }
.btn--klein { padding:.35rem .8rem; font-size:.84rem; }

/* ===================================================================
   Galerie
   =================================================================== */

.galerie { columns:3 240px; column-gap:.85rem; margin:1.5rem 0; }
.galerie figure {
  margin:0 0 .85rem; break-inside:avoid;
  border:var(--mc-rand); background:var(--mc-weiss);
}
.galerie img { width:100%; height:auto; display:block; cursor:zoom-in; }
.galerie figcaption {
  font-size:.82rem; color:var(--mc-grau);
  padding:.45rem .6rem; border-top:var(--mc-rand);
}

/* ===================================================================
   Geschichte — Tafelpaare
   =================================================================== */

.tafel-navi {
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; margin-bottom:1.5rem;
  padding-bottom:1rem; border-bottom:2px solid var(--mc-beige);
}
.tafel-punkte { display:flex; gap:.4rem; flex-wrap:wrap; }
.tafel-punkte button {
  width:11px; height:11px; border-radius:50%; padding:0;
  border:0; background:var(--mc-beige); cursor:pointer;
}


.tafelpaar {
  display:grid; gap:1.5rem; background:var(--mc-weiss);
  border:var(--mc-rand); padding:1.5rem;
}
:root[data-theme='dark'] .tafelpaar { background:var(--mc-beige-hell); }

/* Ab Tablet die beiden Originaltafeln nebeneinander, der Text darunter
   über die volle Breite. */
@media (min-width:820px) {
  .tafelpaar {
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:1.75rem 2rem;
  }
  .tafelpaar .tafel-text { grid-column:1 / -1; }
}

.tafelpaar[hidden] { display:none; }

.tafel-bild { position:relative; }
.tafel-bild img {
  width:100%; height:auto; display:block;
  border:var(--mc-rand); cursor:zoom-in;
}
.tafel-bild__lupe {
  position:absolute; right:.6rem; bottom:.6rem;
  display:inline-flex; align-items:center; gap:.35rem;
  background:rgb(43 39 40 / .78); color:#fff;
  font-size:.8rem; padding:.35rem .65rem; pointer-events:none;
}

.tafel-jahr {
  display:inline-block; background:var(--mc-rot); color:#fff;
  font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:.28rem .75rem; font-size:.8rem; margin-bottom:.85rem;
}
.tafel-titel { margin:0 0 .25rem; font-size:1.5rem; line-height:1.25; }
.tafel-unter { margin:0 0 1.1rem; color:var(--mc-rot-dunkel); font-style:italic; font-size:1.05rem; }
:root[data-theme='dark'] .tafel-unter { color:var(--q2-accent); }
.tafel-text p { margin:0 0 .9rem; }

/* ===================================================================
   Lupe / Vollbild
   =================================================================== */

.lupe {
  position:fixed; inset:0; z-index:9999;
  background:rgb(20 18 19 / .96);
  display:none; touch-action:none; overscroll-behavior:contain;
}
.lupe[open], .lupe.auf { display:block; }

.lupe__buehne {
  position:absolute; inset:0; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.lupe__bild {
  max-width:100%; max-height:100%;
  transform-origin:0 0; will-change:transform;
  user-select:none; -webkit-user-drag:none;
}
.lupe__video {
  display:none; max-width:min(96vw, 1100px); max-height:88vh;
  width:auto; height:auto; background:#000;
}
.lupe--video .lupe__buehne { padding:1rem; }

.lupe__zu {
  position:absolute; top:.75rem; right:.75rem; z-index:2;
  background:var(--mc-rot); color:#fff; border:0;
  width:44px; height:44px; font-size:1.5rem; line-height:1; cursor:pointer;
}
.lupe__hinweis {
  position:absolute; bottom:1rem; left:50%; transform:translateX(-50%);
  background:rgb(43 39 40 / .8); color:#fff;
  font-size:.82rem; padding:.4rem .9rem; pointer-events:none;
  transition:opacity 400ms ease;
}
.lupe__hinweis.weg { opacity:0; }

/* ===================================================================
   Soziale Netzwerke — einfache Links, keine Widgets
   =================================================================== */

.sozial { display:flex; gap:.75rem; align-items:center; flex-wrap:wrap; }
.sozial a {
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.45rem .85rem; text-decoration:none;
  border:var(--mc-rand); color:var(--mc-schwarz); font-size:.9rem;
}
.sozial a:hover { background:var(--mc-beige-hell); color:var(--mc-rot); }
.sozial svg { width:18px; height:18px; fill:currentColor; }

/* ===================================================================
   Fußzeile
   =================================================================== */

/* Die Fusszeile haengt bewusst NICHT an --mc-schwarz/--mc-papier.
   Im dunklen Modus tauschen die beiden ihre Werte, der Hintergrund wird aber
   per Sonderregel dunkel gehalten — Ergebnis waren dunkle Schrift auf dunklem
   Grund, 1,01:1. Deshalb hier feste Werte, unabhaengig vom Modus. */
.mc-fuss {
  background:#1C1B1A; color:#F3F1EE;
  margin-top:4rem; padding:2.5rem 0 1.5rem;
}
:root[data-theme='dark'] .mc-fuss { background:#151314; color:#F3F1EE; }
.mc-fuss p { color:#F3F1EE; }                    /* 15,3:1 */
.mc-fuss a { color:#DDDAD6; }                    /* 12,3:1 */
.mc-fuss a:hover { color:#fff; }
.mc-fuss__gitter {
  display:grid; gap:1.75rem;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
}
.mc-fuss h3 {
  font-size:.82rem; text-transform:uppercase; letter-spacing:.1em;
  color:var(--mc-rot); margin:0 0 .6rem;
}
.mc-fuss ul { list-style:none; margin:0; padding:0; }
.mc-fuss li { margin-bottom:.35rem; }
.mc-fuss .sozial a { border-color:rgb(243 241 238 / .3); color:#F3F1EE; }
.mc-fuss .sozial a:hover { background:rgb(246 241 230 / .1); color:#fff; }
.mc-fuss__zurueck {
  margin-top:.6rem; padding-top:.6rem;
  border-top:1px solid rgb(246 241 230 / .18);
}
.mc-fuss__zurueck a { font-weight:600; }

.mc-fuss__unten {
  margin-top:2rem; padding-top:1rem; font-size:.84rem;
  border-top:1px solid rgb(243 241 238 / .22);
  color:#B9B4B0;                                 /* 8,4:1 statt opacity */
}

@media print {
  .tafel-navi, .lupe, .mc-fuss, .rubriken { display:none; }
  .tafelpaar[hidden] { display:grid; }
}

/* ===================================================================
   Schlanker Seitenkopf für Kontakt, Impressum, Datenschutz
   =================================================================== */

.seiten-kopf--schlank {
  padding:.85rem 0;
  margin-bottom:2.6rem;
}

.seiten-kopf--schlank h1 {
  font-size:clamp(1.3rem, 3vw, 1.75rem);
}

.seiten-kopf--schlank .seiten-kopf__innen {
  align-items:center;
  min-height:2.6rem;
}

/* Logo höher als der Balken — steht oben und unten über */
.seiten-kopf--schlank .seiten-kopf__logo {
  width:clamp(74px, 11vw, 118px);
  margin:-1.5rem -0.2rem -2.4rem 0;
  position:relative; z-index:2;
}

/* Fließtext auf diesen Seiten etwas größer */
.seiten-kopf--schlank + .container .prose {
  font-size:1.06rem;
  line-height:1.7;
}

/* ===================================================================
   Überschriften im Fließtext: Linien von Quark 2 abschalten
   =================================================================== */

/* Quark 2 setzt über jedes h2 einen kurzen Akzentbalken (h2::before,
   28x3 px). Der wirkt hier wie ein versehentlicher Strich — global weg. */
h2::before, h2::after,
h3::before, h3::after {
  content:none !important;
  display:none !important;
}

h1, h2, h3, h4 {
  border-top:0; border-bottom:0;
  background-image:none;
}

/* Überschriften einheitlich dunkel */
h2, h3, h4,
.prose h2, .prose h3, .prose h4 {
  color:var(--mc-schwarz);
}

.prose h2 { margin-top:2rem; }

/* Ausnahme: der weiße Titel im roten Balken bleibt weiß */
.seiten-kopf h1 { color:#fff; }

@media (max-width:700px) {
  .seiten-kopf--schlank .seiten-kopf__logo {
    width:66px; margin:-1rem 0 -1.6rem 0;
  }
}

.quelle-hinweis {
  margin:1.5rem 0 0; padding:.6rem .9rem;
  background:var(--mc-beige-hell); border-left:4px solid var(--mc-beige);
  font-size:.9rem;
}

/* ---------- Medienkacheln über dem Text ---------- */
.medien-kacheln {
  display:grid; gap:.9rem; margin:0 0 2rem;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
}
@media (min-width:820px) {
  .medien-kacheln { grid-template-columns:repeat(3, 1fr); }
}

.medien-kachel {
  margin:0; position:relative;
  aspect-ratio:var(--kachel-verhaeltnis, 1 / 1);
  overflow:hidden; border:1px solid var(--mc-beige);
  background:var(--mc-beige-hell);
}
.medien-kachel img {
  width:100%; height:100%; object-fit:contain; display:block;
  background:var(--mc-weiss); cursor:zoom-in; transition:transform 260ms ease;
}
:root[data-theme='dark'] .medien-kachel img { background:var(--mc-papier); }
.medien-kachel:hover img { transform:scale(1.04); }

.medien-kachel--video a { display:block; width:100%; height:100%; position:relative; }
.medien-kachel--video img { cursor:pointer; }

.medien-kachel__spielen {
  position:absolute; inset:0; margin:auto;
  width:62px; height:62px; border-radius:50%;
  background:rgb(191 58 63 / .92); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgb(43 39 40 / .35);
}
.medien-kachel__spielen svg { width:30px; height:30px; margin-left:3px; }
.medien-kachel--video:hover .medien-kachel__spielen { background:var(--mc-rot-dunkel); }

/* ===================================================================
   Mitteilungen
   =================================================================== */

.mitteilungs-liste { display:flex; flex-direction:column; gap:1.1rem; }

.mitteilung {
  background:var(--mc-weiss); border:var(--mc-rand);
  border-left:5px solid var(--mc-rot);
  transition:box-shadow 180ms ease, transform 180ms ease;
}
:root[data-theme='dark'] .mitteilung { background:var(--mc-beige-hell); }
.mitteilung:hover { box-shadow:0 6px 18px rgb(43 39 40 / .12); transform:translateY(-2px); }

.mitteilung__link {
  display:flex; gap:1.2rem; align-items:stretch;
  text-decoration:none; color:inherit; padding:1rem 1.15rem;
}

.mitteilung__bild {
  flex:0 0 auto; width:130px; height:130px; overflow:hidden;
  border:1px solid var(--mc-beige); background:var(--mc-beige-hell);
}
.mitteilung__bild img { width:100%; height:100%; object-fit:contain; display:block;
  background:var(--mc-weiss); }

.mitteilung__text { flex:1 1 auto; min-width:0; }

.mitteilung__datum {
  display:block; font-size:.82rem; letter-spacing:.05em;
  text-transform:uppercase; color:var(--mc-grau); margin-bottom:.25rem;
}

.mitteilung__titel { margin:0 0 .45rem; font-size:1.2rem; line-height:1.3; }
.mitteilung:hover .mitteilung__titel { color:var(--mc-rot-dunkel); }

.mitteilung__anriss { margin:0 0 .6rem; }

.mitteilung__mehr { font-size:.9rem; color:var(--mc-rot-dunkel); font-weight:600; }

@media (max-width:640px) {
  .mitteilung__link { flex-direction:column; gap:.85rem; }
  .mitteilung__bild { width:100%; height:170px; }
}

/* ===================================================================
   Downloads
   =================================================================== */

.download-gruppen { display:flex; flex-direction:column; gap:2.5rem; }

.download-gruppe__titel {
  display:flex; align-items:center; gap:.6rem;
  padding-bottom:.5rem; margin-bottom:1rem;
  border-bottom:2px solid var(--mc-beige);
}
.download-gruppe__zahl {
  font-size:.78rem; font-weight:400; color:#fff;
  background:var(--mc-rot); border-radius:999px;
  padding:.1rem .55rem;
}

/* Bilder als Raster */
.download-bilder {
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
}
.download-bild {
  margin:0; border:var(--mc-rand); background:var(--mc-weiss);
  display:flex; flex-direction:column;
}
:root[data-theme='dark'] .download-bild { background:var(--mc-beige-hell); }
.download-bild img {
  width:100%; aspect-ratio:4 / 3; object-fit:contain;
  background:var(--mc-weiss); display:block; cursor:zoom-in;
}
.download-bild figcaption {
  padding:.6rem .7rem; border-top:var(--mc-rand);
  display:flex; flex-direction:column; gap:.5rem; align-items:flex-start;
}
.download-bild__name {
  font-size:.8rem; color:var(--mc-grau);
  overflow-wrap:anywhere; line-height:1.35;
}

/* Videos, Audio, Dokumente als Liste */
.download-liste { list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:.6rem; }

.download-eintrag {
  display:flex; align-items:center; gap:.9rem; flex-wrap:wrap;
  background:var(--mc-weiss); border:var(--mc-rand);
  border-left:4px solid var(--mc-sage, var(--mc-beige));
  padding:.7rem .9rem;
}
:root[data-theme='dark'] .download-eintrag { background:var(--mc-beige-hell); }

.download-eintrag__art {
  flex:0 0 auto; min-width:52px; text-align:center;
  background:var(--mc-schwarz); color:var(--mc-papier);
  font-size:.7rem; letter-spacing:.06em; font-weight:700;
  padding:.28rem .45rem;
}
.download-eintrag__name { flex:1 1 220px; min-width:0; overflow-wrap:anywhere; }
.download-eintrag__groesse { font-size:.85rem; color:var(--mc-grau); }

/* ---------- Text zum Mitlesen ---------- */
.tafel-mitlesen {
  margin-top:1.25rem;
  border:1px solid var(--mc-beige);
  background:var(--mc-beige-hell);
  padding:0 1rem;
}
.tafel-mitlesen summary {
  cursor:pointer; padding:.75rem 0; font-weight:600;
  color:var(--mc-rot-dunkel); list-style:none;
  display:flex; align-items:center; gap:.5rem;
}
.tafel-mitlesen summary::-webkit-details-marker { display:none; }
.tafel-mitlesen summary::after {
  content:''; width:8px; height:8px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg); transition:transform 180ms ease;
}
.tafel-mitlesen[open] summary::after { transform:rotate(-135deg); }
.tafel-mitlesen__inhalt { padding-bottom:1.25rem; max-width:70ch; }
.tafel-mitlesen__inhalt p { margin:0 0 .9rem; }

.download-gruppe__text { margin:-.4rem 0 1.2rem; max-width:70ch; }
.download-gruppe__text p { margin:0 0 .7rem; }

.download-bild__meta {
  font-size:.75rem; color:var(--mc-grau); letter-spacing:.03em;
}

/* ---------- Download-Karten für Video, Audio, Dokumente ---------- */
.download-karten {
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
}

.download-karte {
  display:flex; flex-direction:column;
  border:var(--mc-rand); background:var(--mc-weiss);
}
:root[data-theme='dark'] .download-karte { background:var(--mc-beige-hell); }

.download-karte__bild {
  position:relative; display:block; aspect-ratio:16 / 10;
  background:var(--mc-beige-hell); overflow:hidden;
}
.download-karte__bild img { width:100%; height:100%; object-fit:cover; display:block; }

.download-karte__symbol {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--mc-rot); opacity:.55;
}
.download-karte__symbol svg { width:52px; height:52px; }

.download-karte__endung {
  position:absolute; left:.5rem; bottom:.5rem;
  background:var(--mc-schwarz); color:var(--mc-papier);
  font-size:.68rem; font-weight:700; letter-spacing:.06em;
  padding:.2rem .45rem;
}

.download-karte__text {
  padding:.75rem .85rem 1rem;
  display:flex; flex-direction:column; gap:.45rem; align-items:flex-start;
}
.download-karte__name {
  margin:0; font-size:1rem; line-height:1.3; overflow-wrap:anywhere;
}
.download-karte__meta { margin:0; font-size:.8rem; color:var(--mc-grau); }

/* ===================================================================
   Barrierefreiheit
   =================================================================== */

/* Sprunglink: unsichtbar, bis er den Fokus bekommt */
.sprunglink {
  position:absolute; left:-9999px; top:0; z-index:10000;
  background:var(--mc-rot); color:#fff;
  padding:.75rem 1.25rem; font-weight:600; text-decoration:none;
}
.sprunglink:focus {
  left:.75rem; top:.75rem;
  outline:3px solid var(--mc-schwarz); outline-offset:2px;
}

/* Bilder, die sich vergrößern lassen, sind Schaltflächen — sie müssen
   mit der Tastatur erreichbar sein und dürfen dabei nicht anders aussehen. */
.lupe-knopf {
  display:block; width:100%; height:100%;
  padding:0; margin:0; border:0; background:none;
  cursor:zoom-in; font:inherit; color:inherit;
}
.lupe-knopf img { display:block; }
.lupe-knopf:focus-visible {
  outline:3px solid var(--mc-rot); outline-offset:3px;
}

/* In quadratischen Kacheln muss die Schaltfläche die Fläche füllen */
.medien-kachel .lupe-knopf,
.download-bild .lupe-knopf,
.galerie .lupe-knopf { height:100%; }
.medien-kachel .lupe-knopf img,
.download-bild .lupe-knopf img { width:100%; height:100%; object-fit:contain; }

/* Fokus im Überlagerer sichtbar machen */
.lupe__zu:focus-visible {
  outline:3px solid #fff; outline-offset:2px;
}

/* Punkte der Tafelnavigation: gedrückter Zustand erkennbar */
.tafel-punkte button[aria-pressed='true'] { background:var(--mc-rot); }
.tafel-punkte button:focus-visible {
  outline:3px solid var(--mc-schwarz); outline-offset:2px;
}

/* Wer weniger Bewegung eingestellt hat, bekommt weniger Bewegung */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}


/* ===================================================================
   Schraegband — das Leitmotiv der Plakate
   Laeuft an beiden Seiten ueber den Rand hinaus, wie im Druck.
   =================================================================== */

.df-band {
  position:relative;
  overflow:hidden;
  padding-block:3.2rem;
}
.df-band::before {
  content:'';
  position:absolute; left:-12%; right:-12%; top:50%;
  height:5.5rem; margin-top:-2.75rem;
  background:var(--mc-rot);
  transform:rotate(-11deg);
  z-index:0;
}
.df-band > * { position:relative; z-index:1; }

/* Auf orangem Grund steht Text schwarz — nicht weiss. */
.df-band, .df-band a { color:var(--mc-schwarz); }

/* Verantwortlich im Sinne des Presserechts — steht im Fuss, klein und ruhig. */
.mc-fuss__viisdp {
  margin:1.2rem 0 0;
  font-size:.78rem;
  line-height:1.5;
  color:#B9B4B0;        /* --mc-grau waeren hier nur 2,4:1 gewesen */
}

/* ===================================================================
   Bilderwand — Mauerwerk und Pinnwand
   Umgesetzt mit CSS-Spalten statt Gitter: beliebige Bildhoehen ohne
   eine Zeile JavaScript. Lesereihenfolge laeuft spaltenweise, was bei
   einer Fotowand niemanden stoert.
   =================================================================== */

/* Mehrspaltensatz: Die Bilder fliessen SPALTENWEISE — erst Spalte eins von
   oben nach unten, dann Spalte zwei. Das sieht lueckenlos aus, aber die
   Reihenfolge liest sich nicht von links nach rechts. Wer eine Abfolge
   erzaehlen will, nimmt die Anordnung „Raster" (siehe unten). */
.bw { columns: 3 260px; column-gap: 1rem; }

/* Raster: gleich grosse Felder, Reihenfolge zeilenweise von links nach
   rechts. Der Preis: Die Bilder werden auf ein einheitliches Format
   zugeschnitten. Dafuer stimmt die Abfolge mit der im Admin ueberein. */
.bw--raster {
  columns: unset;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}
.bw--raster .bw__stueck { margin: 0; break-inside: auto; }
.bw--raster .bw__stueck img,
.bw--raster .bw__ohnebild {
  width: 100%; height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.bw__stueck {
  break-inside: avoid;
  margin: 0 0 1rem;
  position: relative;
  background: var(--mc-weiss);
  border: 1px solid var(--mc-beige);
}

.bw__knopf {
  display: block; width: 100%; padding: 0; border: 0;
  background: none; cursor: zoom-in;
}

.bw__stueck img { display: block; width: 100%; height: auto; }

.bw__text {
  padding: .55rem .7rem;
  font-size: .84rem;
  line-height: 1.4;
  color: var(--mc-grau);
}

.bw__leer { color: var(--mc-grau); font-style: italic; }

/* Zeigergeraete: Text liegt als Streifen ueber dem Bild und erscheint beim
   Ueberfahren. Beruehrungsgeraete koennen nicht ueberfahren — dort bleibt der
   Text dauerhaft unter dem Bild stehen (Regel weiter unten). */
@media (hover: hover) and (pointer: fine) {
  .bw__text {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: color-mix(in oklab, var(--mc-schwarz) 88%, transparent);
    color: #fff;
    opacity: 0; transform: translateY(.4rem);
    transition: opacity .16s ease, transform .16s ease;
    pointer-events: none;
  }
  .bw__stueck:hover .bw__text,
  .bw__stueck:focus-within .bw__text { opacity: 1; transform: none; }
}

/* Pinnwand: leicht verdreht, mit Reisszwecke */
.bw--pinnwand .bw__stueck {
  box-shadow: 0 2px 10px rgba(0, 0, 0, .16);
  padding: .5rem .5rem 0;
  transform: rotate(var(--dreh, -1.2deg));
}
.bw--pinnwand .bw__stueck:nth-child(2n)  { --dreh:  1.6deg; }
.bw--pinnwand .bw__stueck:nth-child(3n)  { --dreh: -2.1deg; }
.bw--pinnwand .bw__stueck:nth-child(5n)  { --dreh:  .8deg; }
.bw--pinnwand .bw__stueck::before {
  content: ''; position: absolute; top: -7px; left: 50%; margin-left: -7px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--mc-rot);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
  z-index: 2;
}
.bw--pinnwand .bw__text { text-align: center; }

@media (max-width: 700px) {
  .bw { columns: 2 150px; column-gap: .6rem; }
  .bw__stueck { margin-bottom: .6rem; }
  .bw--pinnwand .bw__stueck { transform: none; }
}

/* Beschriftung in der Lupe — auf dem Telefon der einzige Weg zum Text */
.lupe__text {
  margin: .8rem auto 0; max-width: 60ch; padding: 0 1rem;
  text-align: center; color: #fff; font-size: .92rem; line-height: 1.5;
}
.lupe__text[hidden] { display: none; }

/* ===================================================================
   Zeitplan auf einem Zehn-Minuten-Raster

   Die Zeilen sind minmax(…, auto): Sie halten das Zehn-Minuten-Mass ein,
   duerfen aber wachsen, wenn ein Eintrag mehr Platz braucht. Vorher waren
   sie starr, und ein Dreissig-Minuten-Auftritt hatte 4,3 rem fuer drei
   Zeilen Text — der Rest wurde abgeschnitten.

   Weil die Zeilen nun ungleich hoch sein koennen, sind die Stundenlinien
   keine Hintergrundstreifen mehr, sondern eigene Gitterelemente. Sie
   sitzen dadurch immer auf der Hoehe ihrer Uhrzeit.
   =================================================================== */

.zplan__hinweis { color: var(--mc-grau); margin-top: -.4rem; }

.zplan {
  display: grid;
  /* Erste Spalte die Zeitachse, danach eine Spalte je Buehne. Bei einer
     Buehne ist das genau die bisherige Aufteilung. */
  grid-template-columns: 4.6rem repeat(var(--spalten, 1), minmax(0, 1fr));
  grid-template-rows: repeat(var(--zeilen), minmax(1.4rem, auto));
  column-gap: 1rem;
  margin-top: 1.2rem;
}

/* Buehnennamen: eigene Zeile ueber dem Raster, mit derselben
   Spaltenaufteilung, damit die Namen ueber ihren Spalten sitzen. */
.zplan-kopf {
  display: grid;
  grid-template-columns: 4.6rem repeat(var(--spalten, 1), minmax(0, 1fr));
  column-gap: 1rem;
  margin-top: 1.2rem;
}
.zplan__buehne {
  margin: 0;
  font-weight: 700; font-size: 1rem;
  padding-bottom: .3rem;
  border-bottom: 3px solid var(--mc-rot);
}
.zplan-kopf + .zplan { margin-top: .5rem; }

.zplan__marke {
  grid-column: 1; grid-row: var(--r);
  align-self: start;
  font-size: .85rem; font-weight: 700;
  color: var(--mc-grau);
  text-align: right;
  transform: translateY(-.3rem);
}

.zplan__linie {
  grid-column: 2 / -1; grid-row: var(--r);
  align-self: start;
  height: 1px; width: 100%;
  background: var(--mc-beige);
}

.zplan__punkt {
  grid-column: var(--s, 2);
  grid-row: var(--start) / span var(--span);
  z-index: 1;
  background: var(--mc-rot);
  color: var(--mc-schwarz);
  border-left: 4px solid var(--mc-schwarz);
  padding: .45rem .8rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.zplan__punkt--kleinkunst {
  background: var(--mc-beige); border-left-color: var(--mc-schwarz);
}
.zplan__punkt--wort  { background: var(--mc-beige-hell); border-left-color: var(--mc-rot); }
.zplan__punkt--pause { background: transparent; border: 1px dashed var(--mc-beige); border-left-width: 4px; }

/* Kurze Punkte einzeilig: Uhrzeit und Titel nebeneinander */
.zplan__punkt--kurz {
  flex-direction: row; align-items: baseline; gap: .7rem;
  padding-block: .25rem;
}
.zplan__punkt--kurz .zplan__bis { display: none; }
.zplan__punkt--kurz .zplan__titel { font-size: .98rem; }

.zplan__zeit {
  margin: 0; font-size: .74rem; font-weight: 700; letter-spacing: .04em;
  white-space: nowrap; opacity: .75;
}
.zplan__titel {
  margin: 0; font-size: 1.05rem; line-height: 1.15;
}
.zplan__titel a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.zplan__zusatz { margin: .1rem 0 0; font-size: .82rem; line-height: 1.3; }

/* Schmale Schirme: das Raster traegt nicht mehr, es wird eine Liste */
/* Zwei Spalten brauchen mehr Platz als eine. Unter 900 px wird auch der
   mehrspurige Plan zur Liste — die Buehnennamen bleiben als Zwischen-
   ueberschriften stehen, damit die Zuordnung erhalten bleibt. */
@media (max-width: 900px) {
  .zplan-kopf { display: none; }
  .zplan--mehrspurig { display: block; }
  .zplan--mehrspurig .zplan__marke,
  .zplan--mehrspurig .zplan__linie { display: none; }
  .zplan--mehrspurig .zplan__buehne {
    margin: 1.8rem 0 .6rem; font-size: 1.1rem;
  }
  .zplan--mehrspurig .zplan__buehne:first-of-type { margin-top: .4rem; }
  .zplan--mehrspurig .zplan__punkt {
    margin-bottom: .5rem; padding: .6rem .8rem;
    flex-direction: column; align-items: stretch;
  }
  .zplan--mehrspurig .zplan__punkt--kurz .zplan__bis { display: inline; }
}

@media (max-width: 640px) {
  .zplan { display: block; }
  .zplan__marke, .zplan__linie { display: none; }
  .zplan__punkt {
    margin-bottom: .5rem; padding: .6rem .8rem;
    flex-direction: column; align-items: stretch;
  }
  .zplan__punkt--kurz .zplan__bis { display: inline; }
}

/* ===================================================================
   Wer auftritt
   =================================================================== */

.kliste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1.2rem;
  margin-top: 1rem;
}

.kkarte { display: block; text-decoration: none; color: inherit; }
.kkarte__bild {
  display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border: 1px solid var(--mc-beige);
}
.kkarte__bild--leer { background: var(--mc-beige-hell); }
.kkarte__text { display: block; margin-top: .5rem; }
.kkarte__name {
  display: block;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-weight: 900; font-size: 1.15rem; line-height: 1.05;
}
.kkarte__rolle, .kkarte__ort {
  display: block; font-size: .82rem; color: var(--mc-grau);
}
.kkarte:hover .kkarte__name { color: var(--mc-rot-dunkel); }

.kprofil { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 2rem; }
.kprofil__bild { margin: 0; }
.kprofil__bild img { display: block; width: 100%; height: auto; border: 1px solid var(--mc-beige); }
.kprofil__kurz { font-size: 1.1rem; line-height: 1.55; }

@media (max-width: 760px) {
  .kprofil { grid-template-columns: 1fr; gap: 1.2rem; }
}

/* Anspieler: laedt erst auf Klick (preload="none"), Datei vom eigenen Server */
.kton { margin: 1.5rem 0; padding: .9rem 1rem; background: var(--mc-beige-hell); }
.kton__titel { margin: 0 0 .5rem; font-weight: 700; }
.kton audio { width: 100%; }
.kton__hinweis { margin: .5rem 0 0; font-size: .8rem; color: var(--mc-grau); }

/* Verweise — nur ausgefuellte Felder erzeugen hier ueberhaupt ein Element */
.kkanaele { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; }

.kkanal {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .38rem .8rem;
  border: 2px solid var(--mc-schwarz);
  color: var(--mc-schwarz);
  text-decoration: none;
  font-size: .9rem; font-weight: 600;
}
.kkanal:hover { background: var(--mc-rot); }
.kkanal__symbol { display: inline-flex; width: 1.1rem; height: 1.1rem; }
.kkanal__symbol svg { width: 100%; height: 100%; }

/* Bandlogo auf der Künstlerseite — nur so groß, dass es die Überschrift
   im Seitenkopf nicht verdrängt. */
.kprofil__logo {
  display: block;
  max-width: 210px; height: auto;
  margin: 0 0 1.1rem;
}
@media (max-width: 760px) {
  .kprofil__logo { max-width: 160px; }
}

/* ===================================================================
   Abschnitte mit Bild — Kinderaktionen
   =================================================================== */

.aktion {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.8rem;
  align-items: center;
  margin: 2.5rem 0;
}

/* Jeder zweite Abschnitt spiegelverkehrt — sonst entsteht eine Rinne */
.aktion:nth-child(even) .aktion__bild { order: 2; }

.aktion--ohne-bild { grid-template-columns: 1fr; }

.aktion__bild { margin: 0; }
.aktion__bild img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--mc-beige);
}

.aktion__text h2 { margin-top: 0; }

.bildhinweis {
  margin: 2.5rem 0 0;
  font-size: .82rem;
  color: var(--mc-grau);
  border-top: 1px solid var(--mc-beige);
  padding-top: .8rem;
}

@media (max-width: 760px) {
  .aktion { grid-template-columns: 1fr; gap: .9rem; margin: 2rem 0; }
  .aktion:nth-child(even) .aktion__bild { order: 0; }
}


/* ===================================================================
   Ankündigungstext auf der Startseite

   Größer und leichter als der übrige Fließtext: Das ist der eine Absatz,
   den fast alle lesen. Gewicht 300 statt 400 hält ihn trotz der Größe
   ruhig — die variable Schrift macht das ohne zusätzliche Datei.
   =================================================================== */

.ankuendigung { margin-bottom: 4.5rem; }

.prose--gross {
  font-size: clamp(1.06rem, .95rem + .55vw, 1.32rem);
  font-weight: 300;
  line-height: 1.62;
  letter-spacing: .003em;
}
.prose--gross p { margin-bottom: 1.15em; }
.prose--gross::after { content: ''; display: block; clear: both; }

/* ---- Zettel mit Zitaten -------------------------------------------
   Angeheftet wirkende Notizen, vom Text umflossen. Die Drehung ist je
   Seite unterschiedlich, damit keine zwei gleich aussehen.
   ------------------------------------------------------------------- */

.zettel {
  margin: .2rem 0 .8rem;
  width: clamp(150px, 30%, 232px);
  filter: drop-shadow(0 4px 10px rgb(0 0 0 / .18));
}
.zettel img { display: block; width: 100%; height: auto; }
.zettel .bw__knopf { cursor: zoom-in; }

.zettel--rechts { float: right; margin-left: 1.6rem; transform: rotate(2.2deg); }
.zettel--links  { float: left;  margin-right: 1.6rem; transform: rotate(-2.6deg); }

/* Unter 620 px trägt der Umfluss nicht mehr — bei 150 px Bildbreite bleiben
   sonst vier Wörter je Zeile. Dann stehen die Zettel mittig für sich. */
@media (max-width: 620px) {
  .zettel {
    float: none; width: min(78%, 260px);
    margin: 1.6rem auto; transform: rotate(-1.5deg);
  }
  .zettel--links { transform: rotate(1.8deg); }
}


/* ===================================================================
   Anfahrt
   =================================================================== */

.wege {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.2rem;
  margin-top: 1rem;
}

.weg {
  border: 1px solid var(--mc-beige);
  border-top: 5px solid var(--mc-rot);
  padding: 1rem 1.1rem 1.2rem;
}
.weg--rad  { border-top-color: var(--mc-rot); }
.weg--bahn { border-top-color: var(--mc-schwarz); }
.weg--bus  { border-top-color: var(--mc-grau); }
.weg--auto { border-top-color: var(--mc-beige); }

.weg__art {
  margin: 0; font-size: .74rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--mc-grau);
}
.weg__von { margin: .15rem 0 .6rem; font-size: 1.15rem; line-height: 1.1; }
.weg__dauer {
  margin: .6rem 0 0; font-size: .84rem; font-weight: 600; color: var(--mc-grau);
}

.prose--klein { font-size: .93rem; line-height: 1.55; }
.prose--klein p:last-child { margin-bottom: 0; }

.karte { margin: 0; }
.karte img { display: block; width: 100%; height: auto; border: 1px solid var(--mc-beige); }
.karte__text { margin-top: .5rem; font-size: .84rem; color: var(--mc-grau); }

/* ===================================================================
   Bündnisse
   =================================================================== */

.bliste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.4rem;
  margin-top: 1rem;
}

.bkarte {
  border: 1px solid var(--mc-beige);
  padding: 1.2rem 1.3rem 1.4rem;
  display: flex; flex-direction: column;
}

.bkarte__kopf {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: .8rem;
}
/* Die Logos sind unterschiedlich geschnitten: quadratische Kreise neben
   breiten Schriftzügen. Ein festes Quadrat haette die breiten auf Briefmarken-
   groesse gestaucht. Deshalb begrenzte Breite UND Hoehe, das Bild nimmt sich,
   was es braucht. */
.bkarte__logo {
  width: auto; max-width: 132px;
  height: auto; max-height: 76px;
  object-fit: contain;
  flex: 0 0 auto;
}
.bkarte__name { margin: 0; font-size: 1.3rem; line-height: 1.1; }
.bkarte__ort  { margin: .15rem 0 0; font-size: .86rem; color: var(--mc-grau); }

.bkarte .kkanaele { margin-top: auto; padding-top: 1rem; }
.bkarte .kkanal { font-size: .84rem; padding: .3rem .65rem; border-width: 1px; }

/* ===================================================================
   Chronik und Quellen
   =================================================================== */

.chronik { list-style: none; margin: 1.2rem 0 0; padding: 0; }

/* Linie und Punkt haengen am Inhalt selbst — als Rahmen und als
   Pseudo-Element darauf. Vorher waren beide absolut neben der Datumsspalte
   gesetzt und rutschten auf die Jahreszahl. So kann das nicht passieren:
   Der Rahmen gehoert zu dem Element, an dem er entlanglaeuft. */
.chronik__punkt {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  column-gap: 1.5rem;
}

.chronik__datum {
  margin: 0; text-align: right;
  font-weight: 700; font-size: .92rem; line-height: 1.5;
  color: var(--mc-grau);
}

.chronik__inhalt {
  position: relative;
  border-left: 2px solid var(--mc-beige);
  padding: 0 0 1.6rem 1.4rem;
}
.chronik__punkt:last-child .chronik__inhalt {
  border-left-color: transparent;
  padding-bottom: 0;
}

.chronik__inhalt::before {
  content: '';
  position: absolute;
  left: -6.5px; top: .32rem;
  width: 11px; height: 11px;
  background: var(--mc-rot);
  border-radius: 50%;
}

.chronik__titel { margin: 0 0 .3rem; font-size: 1.12rem; line-height: 1.25; }

/* Schmal: Datum ueber den Text, Linie bleibt am Inhalt */
@media (max-width: 620px) {
  .chronik__punkt { grid-template-columns: 1fr; }
  .chronik__datum {
    text-align: left;
    padding-left: 1.4rem;
    margin-bottom: .1rem;
  }
  .chronik__inhalt { padding-bottom: 1.4rem; }
}

.quellen { margin: 1rem 0 0; padding-left: 1.1rem; font-size: .9rem; line-height: 1.6; }
.quellen li { margin-bottom: .45rem; }
.quellen__medium, .quellen__datum { color: var(--mc-grau); }
.quellen__medium::before { content: ' · '; }
.quellen__datum::before  { content: ' · '; }
.quellen__hinweis {
  margin-top: 1.2rem; font-size: .84rem; color: var(--mc-grau);
  border-top: 1px solid var(--mc-beige); padding-top: .8rem;
}


/* ===================================================================
   Listenpunkte abschalten

   Quark 2 zeichnet Aufzaehlungspunkte nicht ueber list-style, sondern
   ueber ein Pseudo-Element am li. `list-style: none` allein greift
   deshalb nicht — in den Verweisleisten und im Fuss standen dadurch
   kleine schwarze Quadrate zwischen den Elementen.
   =================================================================== */

.kkanaele, .kkanaele li,
.mc-fuss ul, .mc-fuss li,
.chronik, .chronik__punkt,
.download-liste, .download-liste li,
.rubriken, .sozial {
  list-style: none;
}

.kkanaele li::before, .kkanaele li::marker,
.mc-fuss li::before,  .mc-fuss li::marker,
.chronik__punkt::marker,
.download-liste li::before, .download-liste li::marker {
  content: none;
  display: none;
}


/* ===================================================================
   Beiträge
   =================================================================== */

.beitragsliste { list-style: none; margin: 0; padding: 0; }
.beitragsliste li::before, .beitragsliste li::marker { content: none; display: none; }
.beitragsliste__punkt { margin-bottom: 1rem; }

.beitragskarte {
  display: block;
  border: 1px solid var(--mc-beige);
  border-left: 5px solid var(--mc-rot);
  padding: 1.1rem 1.3rem;
  text-decoration: none; color: inherit;
}
.beitragskarte:hover { border-color: var(--mc-schwarz); border-left-color: var(--mc-rot); }

.beitragskarte__art {
  display: block; font-size: .74rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--mc-grau);
}
.beitragskarte__titel {
  display: block; margin-top: .15rem;
  font-size: 1.35rem; font-weight: 900; line-height: 1.15;
  letter-spacing: -.015em;
}
.beitragskarte__unter {
  display: block; font-size: 1rem; color: var(--mc-grau); font-style: italic;
}
.beitragskarte__text { display: block; margin-top: .5rem; line-height: 1.55; }
.beitragskarte__mehr {
  display: block; margin-top: .7rem;
  font-weight: 600; color: var(--mc-rot-dunkel);
}

.beitrag__kurz { font-size: 1.15rem; line-height: 1.6; font-weight: 300; }
.beitrag__pdf { margin: 2rem 0 0; }

/* Hinweiskasten — steht über dem Text, nicht darunter */
.hinweis {
  border: 1px solid var(--mc-beige);
  border-top: 4px solid var(--mc-rot);
  background: var(--mc-beige-hell);
  padding: 1rem 1.2rem .6rem;
  margin: 0 0 1.8rem;
}
.hinweis__titel {
  margin: 0 0 .4rem; font-weight: 700;
  font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
}

.quellen-block { margin-top: 3rem; }
.quellen-block h2 { padding-top: .8rem; border-top: 3px solid var(--mc-rot); }

/* ===================================================================
   Belegzeilen im Fließtext

   Sie stehen direkt unter der Aussage, auf die sie sich beziehen.
   Kleiner und eingerückt, damit sie den Lesefluss nicht zerhacken —
   aber nicht grau bis zur Unsichtbarkeit: Wer sie sucht, soll sie
   finden, und ein Link muss anklickbar aussehen.
   =================================================================== */

.prose p.belege {
  margin: -.4rem 0 1.5rem;
  padding: .35rem 0 .35rem .9rem;
  border-left: 3px solid var(--mc-rot);
  font-size: .84rem;
  line-height: 1.55;
  color: var(--mc-grau);
}
.prose p.belege span {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .74rem;
  margin-right: .25rem;
}
.prose p.belege a {
  color: var(--mc-rot-dunkel);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.prose p.belege a:hover { color: var(--mc-schwarz); }

/* Tabelle im Beitrag — auf schmalen Schirmen waagerecht schiebbar */
.prose table {
  width: 100%; border-collapse: collapse; margin: 1.5rem 0;
  font-size: .92rem;
}
.prose thead th {
  text-align: left; vertical-align: bottom;
  border-bottom: 3px solid var(--mc-rot);
  padding: .5rem .7rem; font-weight: 700;
}
.prose tbody td {
  vertical-align: top;
  border-bottom: 1px solid var(--mc-beige);
  padding: .7rem;
}
@media (max-width: 700px) {
  .prose table { display: block; overflow-x: auto; white-space: normal; }
}

/* Ohne Social-Kanäle hat der Fuß nur drei Spalten — dann nicht auf vier
   Bahnen auseinanderziehen. */
.mc-fuss__gitter--drei {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  max-width: 60rem;
}

/* Sprungmarke „Direkt zu den Bildern" ------------------------------- */

.sprungmarke { margin: 1.6rem 0 0; }

/* Damit die Überschrift beim Springen nicht unter der Kopfleiste
   verschwindet — und damit der Sprung nicht ruckt. */
#bilder { scroll-margin-top: 5rem; }
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Bühnenname im Plan — nur auf schmalen Schirmen sichtbar, dort ersetzt
   er die weggefallene Kopfzeile. */
.zplan__spurname { display: none; }

@media (max-width: 900px) {
  .zplan--mehrspurig .zplan__spurname {
    display: block;
    margin: 1.8rem 0 .6rem;
    font-weight: 700; font-size: 1.1rem;
    padding-bottom: .3rem;
    border-bottom: 3px solid var(--mc-rot);
  }
  .zplan--mehrspurig .zplan__spurname:first-child { margin-top: .4rem; }
}

/* ===================================================================
   Tastaturbedienung

   Sichtbarer Fokus auch auf Elementen, die keine Schaltflächen sind —
   die Lupenknöpfe in den Bilderwänden etwa liegen um ein Bild herum
   und hätten sonst nur den Standardrahmen des Browsers.
   =================================================================== */

.bw__knopf:focus-visible,
.beitragskarte:focus-visible,
.kkarte:focus-visible,
.rubrik:focus-visible,
.zplan__titel a:focus-visible {
  outline: 3px solid var(--mc-rot);
  outline-offset: 3px;
}

/* Ein Programmpunkt mit Verweis soll beim Anspringen als Ganzes
   hervortreten, nicht nur die Textzeile darin. */
.zplan__punkt:focus-within {
  outline: 3px solid var(--mc-schwarz);
  outline-offset: 2px;
}

/* ===================================================================
   Verweise auf andere Seiten (Rubrik „Politisches")
   =================================================================== */

.verweise { list-style: none; margin: 1.4rem 0 0; padding: 0; }
.verweise li::before, .verweise li::marker { content: none; display: none; }
.verweise__punkt { margin-bottom: 1rem; }

/* Die ganze Karte ist der Verweis — wie bei den Beitragskarten darueber.
   Deshalb ist sie ein <a>, und alles darin sind <span>-Elemente, die per
   CSS zu Bloecken werden. */
.verweiskarte {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 1.2rem;
  align-items: start;
  border: 1px solid var(--mc-beige);
  border-left: 5px solid var(--mc-rot);
  padding: 1rem 1.2rem;
  text-decoration: none;
  color: inherit;
  transition: border-color .12s;
}
.verweiskarte:hover { border-color: var(--mc-schwarz); border-left-color: var(--mc-rot); }
.verweiskarte:focus-visible {
  outline: 3px solid var(--mc-rot);
  outline-offset: 3px;
}
.verweiskarte--ohne-bild { grid-template-columns: 1fr; }

/* Freigestelltes Logo ohne Grund und Rahmen, passt sich ein statt
   beschnitten zu werden. */
.verweiskarte__bild {
  width: 110px; height: 110px;
  object-fit: contain;
  background: none;
}

.verweiskarte__text { display: block; }

.verweiskarte__titel {
  display: block;
  font-size: 1.2rem; font-weight: 900; line-height: 1.2;
  letter-spacing: -.01em;
}
.verweiskarte:hover .verweiskarte__titel { color: var(--mc-rot-dunkel); }

/* Die Adresse sichtbar: Wer auf eine fremde Seite geschickt wird,
   soll vorher sehen, wohin. */
.verweiskarte__adresse {
  display: block;
  margin: .2rem 0 .55rem;
  font-size: .82rem; color: var(--mc-grau);
}

.verweiskarte__warum { display: block; line-height: 1.55; }

/* Sagt, wohin die Karte fuehrt — dasselbe Muster wie „Lesen →" bei den
   Beitragskarten, damit beides gleich zu bedienen ist. */
.verweiskarte__mehr {
  display: block;
  margin-top: .7rem;
  font-weight: 600;
  color: var(--mc-rot-dunkel);
}
.verweiskarte:hover .verweiskarte__mehr { color: var(--mc-schwarz); }

.verweise__hinweis {
  margin-top: 1.2rem; font-size: .84rem; color: var(--mc-grau);
  border-top: 1px solid var(--mc-beige); padding-top: .8rem;
}

@media (max-width: 560px) {
  .verweiskarte { grid-template-columns: 1fr; }
  .verweiskarte__bild { width: 90px; height: 90px; }
}

/* Die Verweise stehen unter dem eigenen Material — der Strich macht den
   Wechsel sichtbar: Was darunter folgt, stammt nicht von uns. */
.verweise__titel {
  padding-top: 1rem;
  border-top: 3px solid var(--mc-rot);
}

/* Schaltfläche unter dem Zettel auf der Startseite */
.start-kopf__knopf { margin: 2rem 0 0; }

.btn--gross {
  font-size: 1.15rem;
  padding: .8rem 1.8rem;
}

/* ===================================================================
   Spenden — Kontoverbindung mit Übernahme
   =================================================================== */

.konto {
  margin-top: 2rem;
  border: 1px solid var(--mc-beige);
  border-left: 5px solid var(--mc-rot);
  padding: 1.4rem 1.6rem;
}
.konto h2 { margin-top: 0; }

.konto__liste { margin: 1.2rem 0 0; }

.konto__zeile {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: .4rem 1rem;
  align-items: baseline;
  padding: .6rem 0;
  border-bottom: 1px solid var(--mc-beige);
}
.konto__zeile:last-child { border-bottom: none; }

.konto__name {
  margin: 0;
  font-weight: 700; font-size: .9rem;
  color: var(--mc-grau);
}

/* Wert links, Schaltflaeche rechts — in einem Gitter statt in einem
   Flex-Fluss. Sonst sprang die Schaltflaeche je nach Laenge des Wertes
   mal daneben, mal darunter, und die Zeilen liefen nicht mehr auf. */
.konto__wert {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .8rem;
  align-items: start;
}

/* Feste Zeichenbreite: In einer IBAN muss man Ziffern vergleichen können,
   und bei Proportionalschrift verrutscht das Auge.

   `overflow-wrap: anywhere` statt `word-break: break-all`: bricht nur,
   wenn es sein muss, und bevorzugt Wortgrenzen. Sonst wird aus
   „Kirchhatten e.V." ein „Kirchhatte / n e.V." */
.konto__text {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: .98rem;
  overflow-wrap: anywhere;
  line-height: 1.45;
}
.konto__text--gross { font-size: 1.08rem; letter-spacing: .02em; }

.konto__kopieren {
  justify-self: end;
  white-space: nowrap;
  border: 2px solid var(--mc-schwarz);
  background: none;
  color: var(--mc-schwarz);
  font: inherit; font-size: .82rem; font-weight: 600;
  padding: .2rem .7rem;
  cursor: pointer;
}
.konto__kopieren:hover { background: var(--mc-schwarz); color: var(--mc-papier); }
.konto__kopieren:focus-visible {
  outline: 3px solid var(--mc-rot); outline-offset: 2px;
}
.konto__kopieren--fertig {
  background: var(--mc-rot); border-color: var(--mc-rot);
  color: var(--mc-schwarz);
}

.konto__meldung {
  margin: 1rem 0 0;
  font-weight: 600;
  color: var(--mc-rot-dunkel);
}

.konto__hinweis { margin-top: 1.2rem; }

.wofuer { margin: 1rem 0 0; padding-left: 1.2rem; line-height: 1.7; }
.wofuer li { margin-bottom: .4rem; }

@media (max-width: 560px) {
  .konto { padding: 1.1rem 1.2rem; }
  .konto__zeile { grid-template-columns: 1fr; gap: .2rem; }
  .konto__text { font-size: .92rem; }
}

/* Video in der Bilderwand ------------------------------------------ */

.bw__stueck--video .bw__knopf { position: relative; display: block; }

.bw__abspielen {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 62px; height: 62px;
  display: flex; align-items: center; justify-content: center;
  background: rgb(28 27 26 / .72);
  border-radius: 50%;
  pointer-events: none;
}
.bw__abspielen svg { fill: #fff; margin-left: 3px; }

.bw__stueck--video .bw__knopf:hover .bw__abspielen,
.bw__stueck--video .bw__knopf:focus-visible .bw__abspielen {
  background: var(--mc-rot);
}
.bw__stueck--video .bw__knopf:hover .bw__abspielen svg,
.bw__stueck--video .bw__knopf:focus-visible .bw__abspielen svg {
  fill: var(--mc-schwarz);
}

/* Video ohne Vorschaubild: schlichtes Feld statt kaputtem Bildsymbol */
.bw__ohnebild {
  display: block;
  width: 100%; aspect-ratio: 16 / 9;
  background: var(--mc-beige);
}

/* Neue Verweisarten auf Künstlerseiten */
.kkanal--linktree:hover   { border-color: #43e660; }
.kkanal--soundcloud:hover { border-color: #ff5500; }

/* ===================================================================
   Politisches: Beiträge und Verweise dreispaltig

   Dasselbe Raster wie bei den Bündnissen — auto-fit mit 300 px
   Mindestbreite. Auf breiten Schirmen drei Spalten, darunter zwei,
   auf dem Telefon eine. Keine feste Spaltenzahl: Sie würde auf
   mittleren Breiten Karten zusammenquetschen.
   =================================================================== */

.beitragsliste,
.verweise {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.4rem;
  margin-top: 1rem;
  align-items: start;
}

.beitragsliste__punkt,
.verweise__punkt { margin-bottom: 0; }

/* Karten füllen die Zellenhöhe, damit die Reihen bündig abschließen */
.beitragsliste__punkt { display: flex; }
.beitragskarte { display: flex; flex-direction: column; width: 100%; }
.beitragskarte__mehr { margin-top: auto; padding-top: .7rem; }

.verweise__punkt { display: flex; }
.verweiskarte { width: 100%; margin-bottom: 0; }
.verweiskarte__mehr { margin-top: auto; padding-top: .7rem; }

/* Im Dreispaltigen ist neben dem Bild wenig Platz — dort untereinander */
@media (min-width: 900px) {
  .verweiskarte { grid-template-columns: 1fr; }
  .verweiskarte__bild { width: 92px; height: 92px; margin-bottom: .6rem; }
}