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

/* ---------- Open Sans, lokal (kein Google-CDN) ---------- */
@font-face { font-family:'Open Sans'; src:url('../fonts/open-sans/open-sans-latin-300-normal.woff2') format('woff2');
             font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Open Sans'; src:url('../fonts/open-sans/open-sans-latin-400-normal.woff2') format('woff2');
             font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Open Sans'; src:url('../fonts/open-sans/open-sans-latin-400-italic.woff2') format('woff2');
             font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Open Sans'; src:url('../fonts/open-sans/open-sans-latin-600-normal.woff2') format('woff2');
             font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Open Sans'; src:url('../fonts/open-sans/open-sans-latin-700-normal.woff2') format('woff2');
             font-weight:700; font-style:normal; font-display:swap; }

@font-face { font-family:'Patrick Hand'; src:url('../fonts/patrick-hand/patrick-hand-latin-400-normal.woff2') format('woff2');
             font-weight:400; font-style:normal; font-display:swap; }

/* ---------- Palette ---------- */
:root {
  --mc-rot:        #BF3A3F;
  --mc-rot-dunkel: #9E2C33;
  --mc-schwarz:    #2B2728;
  --mc-grau:       #5A5350;
  --mc-papier:     #F2E7D3;   /* helle Abstufung des Kachel-Papiers #E3CEAF */
  --mc-beige:      #D9C7A6;
  --mc-beige-hell: #F8F1E4;
  --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: #ffffff;
  --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:'Open Sans', system-ui, -apple-system, sans-serif;
  background: var(--mc-papier);
  color: var(--mc-schwarz);
}

h1, h2, h3, h4, h5, h6 {
  font-weight:700; letter-spacing:-.01em;

  /* 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:3rem auto 1.5rem;
  padding:2.5rem clamp(1.5rem, 4vw, 2.7rem) 2.2rem;

  /* Papierstruktur aus dem MiCOU-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:'Patrick Hand', 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:1.2rem .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));
}

@media (max-width:700px) { .rubriken { margin:1.5rem 0 2.5rem; } }
@media (min-width:560px) { .rubriken { grid-template-columns:repeat(2, 1fr); } }
@media (min-width:900px) { .rubriken { grid-template-columns:repeat(3, 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;
}

.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:.35rem 0 0;
  color:var(--mc-beige-hell);
  font-style:italic;
  font-size:1.02rem;
  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));
}

/* Die alten Regeln für den Monatskalender (`.kalender…`) und die
   Terminkarten (`.termin…`, `.wahlleiste…`) sind mit MiCOU-Update 31
   entfallen — seit dem Bündniskalender zeichnet sie keine Vorlage mehr. */

/* 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:#fff; }
.btn--rot:hover { background:var(--mc-rot-dunkel); }
.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
   =================================================================== */

.mc-fuss {
  background:var(--mc-schwarz); color:var(--mc-papier);
  margin-top:4rem; padding:2.5rem 0 1.5rem;
}
:root[data-theme='dark'] .mc-fuss { background:#151314; }
.mc-fuss a { color:var(--mc-beige); }
.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(246 241 230 / .25); color:var(--mc-papier); }
.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(246 241 230 / .18); opacity:.75;
}

@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;
  }
}

/* =====================================================================
   Aktuelles — der Bündniskalender von DEMOKRATIEfest im MiCOU-Kleid

   Raster, Liste, Zeitraum und Abo kommen als Bausteine aus dem Plugin
   `dfest-ics`, ihr Stilblatt `kalender.css` ebenso. Es nennt seine
   Hausfarben über Variablen mit Ersatzwert (`--kal-haus-*`); hier
   bekommen sie die MiCOU-Farben. Die Art-Farben bleiben, wie sie sind —
   dieselbe Farbe heißt auf beiden Websites dieselbe Art.
   ===================================================================== */

:root {
  --kal-haus-akzent:        #BF3A3F;   /* Fokusring, Balken */
  --kal-haus-akzent-hover:  #A8333A;
  --kal-haus-akzent-rand:   #9E2C33;
  --kal-haus-akzent-text:   #9E2C33;   /* Schrift und Linie, 7,6:1 auf Weiß */
  --kal-haus-akzent-dunkel: #86242A;   /* „heute" im Raster */
  /* Seit MiCOU-Update 45: der Pfeil im runden Klappzeichen — weiß auf Rot
     wie die Schrift der Knöpfe (auf demokratiefest.org dunkel auf Orange,
     die Vorgabe in kalender.css). */
  --kal-klapp-pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9.5l6 6 6-6' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --kal-haus-text:          #2B2728;
  --kal-haus-grau:          #5A5350;   /* 7,4:1 auf Weiß */
  --kal-haus-linie:         #D9C7A6;
  --kal-haus-hell:          #F8F1E4;

  /* Wochentag und Datum auf dunkelroter Fläche (Update 176), wie die
     Datumskästen der Terminkarten auf der Startseite. Weiß auf #9E2C33:
     7,9:1; die leise Schrift (Wochentag, Jahr) mit 85 % Deckkraft: 6,4:1. */
  --kal-haus-datum-grund:   #9E2C33;
  --kal-haus-datum-text:    #FFFFFF;
  --kal-haus-datum-leise:   rgb(255 255 255 / .85);
  --kal-haus-datum-linie:   rgb(255 255 255 / .35);
  --kal-haus-datum-polster: .5rem .55rem .45rem;
  --kal-haus-datum-rund:    4px;
}

.mc-kalender { margin-bottom:3rem; }

/* ---- Welche Termine: drei Umfänge ---------------------------------- */

.mc-umfang { display:block; margin:0 0 1.6rem; }
.mc-umfang__wahl {
  display:flex; flex-wrap:wrap; gap:.4rem;
  list-style:none; margin:0 0 .6rem; padding:0;
}
.mc-umfang__wahl a {
  display:inline-block; padding:.45rem 1rem;
  border:1px solid var(--mc-beige); border-radius:999px;
  background:var(--mc-weiss); color:var(--mc-schwarz);
  font-weight:600; font-size:.95rem; text-decoration:none;
}
.mc-umfang__wahl a:hover { background:var(--mc-beige-hell); }
.mc-umfang__wahl a[aria-current] {
  background:var(--mc-rot); border-color:var(--mc-rot); color:#fff;
}
.mc-umfang__wahl a:focus-visible { outline:3px solid var(--mc-rot); outline-offset:2px; }
.mc-umfang__satz { margin:0; color:var(--mc-grau); font-size:.95rem; }

.mc-kalender__fehlt,
.mc-kalender__leer {
  padding:1rem 1.2rem; border-left:4px solid var(--mc-rot);
  background:var(--mc-beige-hell);
}

/* ---- Dunkelmodus: der Kalender bleibt Papier ------------------------

   Die Zellen des Rasters sind auf jeder Website weiß; gegen Weiß sind
   die Art-Farben gemessen. Im Dunkelmodus wird der ganze Kalender
   deshalb eine helle Karte — und innerhalb der Karte gelten wieder die
   hellen Werte, sonst stünde helle Überschrift auf weißem Grund. */

:root[data-theme='dark'] .mc-kalender {
  --mc-papier: #FFFFFF;
  --mc-beige:  #D9C7A6;
  --mc-beige-hell: #F8F1E4;
  --mc-schwarz: #2B2728;
  --mc-grau:   #5A5350;
  --q2-bg: #fbfbfc;
  --q2-bg-elev: #ffffff;
  --q2-bg-muted: #f2f2f4;
  --q2-text: #242424;
  --q2-text-strong: #111111;
  --q2-text-muted: #6b6b6b;
  --q2-border-ring: rgba(34, 42, 53, 0.08);
  --q2-border-strong: rgba(34, 42, 53, 0.14);
  --q2-divider: rgba(34, 42, 53, 0.08);
  --q2-accent: var(--mc-rot);
  --q2-link: var(--mc-rot-dunkel);
  color-scheme: light;
  background:#FFFFFF; color:var(--mc-schwarz);
  padding:1.4rem 1.2rem; border-radius:10px;
}

/* Fußzeile: Quark 2 gibt jedem <p> und <li> die Textfarbe der Seite
   (`p, li { color: var(--q2-text) }`) — auf dem dunklen Fuß wurde der
   Absatz unter „MiCOU Wildeshausen" dadurch dunkel auf dunkel. Seit
   Update 174 erben beide die helle Farbe des Fußes.

   IM DUNKELMODUS werden `--mc-papier` und `--mc-beige` selbst dunkel —
   Schrift und Verweise im Fuß stünden dann dunkel auf fast Schwarz. Dort
   bekommen sie deshalb die hellen Werte fest. */
.mc-fuss p, .mc-fuss li { color:inherit; }
/* Pico setzt die Aufzählungszeichen am <li>, nicht am <ul> — bisher
   unsichtbar, weil dunkel auf dunkel; mit heller Schrift kämen sie hervor. */
.mc-fuss li { list-style:none; }
:root[data-theme='dark'] .mc-fuss { color:#F2E7D3; }
:root[data-theme='dark'] .mc-fuss a { color:#D9C7A6; }

/* ---- Woher die Termine kommen (MiCOU-Update 02) --------------------- */

.mc-herkunft {
  margin:2.5rem 0 0; padding:1.1rem 1.3rem;
  border:1px solid var(--mc-beige); border-left:4px solid var(--mc-rot);
  border-radius:4px; background:var(--mc-beige-hell);
}
.mc-herkunft__titel { margin:0 0 .5rem; font-size:1.1rem; }
.mc-herkunft p { margin:0 0 .5rem; }
.mc-herkunft p:last-child { margin-bottom:0; }
.mc-herkunft__klein { font-size:.9rem; color:var(--mc-grau); }
.mc-herkunft__adresse { display:none; }   /* auf Papier statt des Verweises */

/* ---- Drucken (MiCOU-Update 02) ---------------------------------------

   Auf Papier bleibt, was man lesen kann: Kopf, Raster, Liste, und woher
   die Termine kommen. Was man nur anklicken kann, fällt weg — die
   Umfang-Knöpfe samt ihrem Satz (die Überschrift der Liste sagt schon
   „mit MiCOU"), der Hinweis zum Melden von Fehlern.

   Die Namen der Bündnisse führen auf demokratiefest.org; der Kalender
   druckt hinter jeden Verweis nach draußen seine Adresse. Bei den
   Bündnissen steht der Name schon da — die Adresse wäre nur Rauschen. */

@media print {
  .theme-toggle,
  .mc-umfang,
  .mc-herkunft__klein { display:none !important; }

  .kal-liste__wer a::after,
  .mc-herkunft a::after { content:none !important; }

  .mc-herkunft__adresse { display:inline; }
  .mc-herkunft {
    margin-top:1.5rem; padding:.6rem 0 0;
    border:0; border-top:1px solid #999; border-radius:0; background:none;
    font-size:.85rem; break-inside:avoid;
  }
  .mc-herkunft__titel { font-size:.95rem; margin-bottom:.2rem; }
  .mc-kalender { padding:0 !important; background:none !important; }
}
.mc-herkunft { scroll-margin-top:6rem; }

/* ---- Drucken: Kopfleiste und Menü (MiCOU-Update 03) ------------------

   Auf jeder Seite, nicht nur bei Aktuelles. Gedruckt wurden bisher die
   Navigationsleiste und — bei schmalem Fenster — der runde Menüknopf
   von Quark 2 (der leere Kreis oben rechts), dazu der Sprunglink. Auf
   Papier kann man nichts davon bedienen. Dieselben Regeln wie auf
   demokratiefest.org.

   DER ROTE BALKEN MIT DER ÜBERSCHRIFT BLEIBT und wird mitgedruckt,
   auch wenn der Browser Hintergründe sonst weglässt — wie auf
   demokratiefest.org seit dessen Update 162: Das Blatt soll aussehen
   wie die Seite. Wer Tinte sparen will, nimmt die zwei Zeilen
   `print-color-adjust` heraus; dann steht die Überschrift weiß auf
   weiß, also bitte zugleich `color` auf Schwarz setzen. */

@media print {
  #header,
  .mobile-menu,
  .mobile-container,
  .button_container,
  .overlay,
  .desktop-menu,
  .sprunglink { display:none !important; }

  .seiten-kopf {
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
    margin-bottom:1.4rem;
  }

  /* Verweise sind auf Papier Text: schwarz, nicht unterstrichen, und
     ohne das Pfeil-Zeichen „nach draußen" — anklicken kann man es nicht.
     Wie auf demokratiefest.org. */
  .seiten-kopf ~ * a, main a { color:#000; text-decoration:none; }
  .kal-liste__wer .kal-liste__extern { display:none; }
}


/* ---- Rückblick und Startseite in der Form der Terminliste
        (MiCOU-Update 05) -------------------------------------------------

   Der Rückblick nimmt die Klassen der Terminliste von Aktuelles; nur der
   Datumsblock ist GRAU statt dunkelrot — vergangen, nicht vorbei an
   Bedeutung. Weiß auf #5A5350: 7,4:1.

   Die alten Kartenregeln (`.termin…`, `.wahlleiste…`) sind mit
   MiCOU-Update 31 herausgenommen, die Auswahlleiste in `lupe.js` auch. */

.kal-liste--rueckblick { --kal-haus-datum-grund:var(--mc-grau); }
.kal-liste--rueckblick .kal-liste__titel a { color:inherit; text-decoration:none; }
.kal-liste--rueckblick .kal-liste__titel a:hover { color:var(--mc-rot); text-decoration:underline; }

/* Der Titel ist im Rückblick ein <h3> und ein Verweis auf die Seite
   der Aktion — er soll trotzdem aussehen wie in der Terminliste, nicht
   wie eine Zwischenüberschrift der Website. */
.kal-liste--rueckblick .kal-liste__titel {
  font-family:inherit; letter-spacing:normal; font-size:1.05rem;
}

/* Die Lücke links auf dem Telefon bei Listen ohne Kästchen behebt seit
   Update 177 das Plugin selbst (kalender.css); die eigene Regel von
   MiCOU-Update 05 ist entfallen. */

/* ---- Tinte sparen: der Seitenkopf (MiCOU-Update 11) ----------------

   Ist unter Aktuelles „Tinte sparen" angekreuzt (Plugin-Update 182),
   steht die Überschrift auf Papier dunkel auf Weiß, mit einem roten
   Strich darunter statt des Balkens. Datumsfeld und Art-Schilder regelt
   das Plugin, ebenso das Weglassen der Sharepics. Feste Farbwerte statt
   `--mc-*`: Die Variablen haben eine dunkle Fassung, und Papier ist
   immer hell. Ohne Haken bleibt alles wie bisher. */

@media print {
  :root:has(.kal-drucken__tinte:checked) .seiten-kopf {
    background:none;
    color:#2B2728;
    border-bottom:3px solid #BF3A3F;
    padding:.4rem 0 .9rem;
  }
  :root:has(.kal-drucken__tinte:checked) .seiten-kopf h1 { color:#2B2728; }
  :root:has(.kal-drucken__tinte:checked) .seiten-kopf p.seiten-kopf__unter { color:#5A5350; }
}

/* ---- Rückblick aus den Veranstaltungsseiten (MiCOU-Update 12) --------

   Der Rückblick zeichnet seit Update 12 mit dem Listenbaustein des
   Plugins. Der blasst vergangene Termine ab (`--vorbei`) — im Rückblick
   ist alles vergangen, und abgeblasst wäre die ganze Seite. Der graue
   Datumsblock sagt es schon. */
.kal-liste--rueckblick .kal-liste__eintrag--vorbei { opacity:1; }

/* Eckdaten auf der Seite einer Veranstaltung: dieselben Klassen wie in
   der Liste, hier untereinander mit etwas Luft. */
.mc-eckdaten { margin:0 0 1.6rem; }
.mc-eckdaten > p { margin:0 0 .45rem; }
.mc-eckdaten .kal-liste__mit { font-size:1rem; }
.mc-eckdaten__flyer { display:block; width:max-content; max-width:min(100%, 15rem); margin:.7rem 0 .3rem; }
.mc-eckdaten__flyer img { display:block; width:100%; height:auto; }

@media print {
  .mc-eckdaten__flyer { display:none; }
}

/* ===================================================================
   Artikel — seit Update 188 (DEMOKRATIEfest) / MiCOU-Update 16
   ===================================================================

   Ein selbst geschriebener Text ohne den farbigen Seitenkopf: oben die
   Erläuterung mit dem Balken in der Hausfarbe, darunter groß und fett der
   Titel, darunter Autor und Datum. Bilder im Text als <figure> (siehe
   den Filter `artikel_bilder` im Theme), wahlweise links, rechts oder
   über die ganze Breite. */

.artikel { padding-top: 2.6rem; padding-bottom: 1rem; }

.artikel__erlaeuterung {
  margin: 0 0 1.1rem;
  padding-left: 1rem;
  border-left: 4px solid var(--mc-rot);
  font-size: clamp(1.08rem, 1rem + .4vw, 1.25rem);
  font-weight: 300;
  line-height: 1.55;
}

/* Doppelte Klasse: Das Grundgerüst gibt Überschriften nach einem Absatz
   viel Luft nach oben (gemessen 78px) — hier gehört der Titel zur
   Erläuterung darüber. */
.artikel .artikel__titel {
  margin: 0 0 .8rem;
  font-size: clamp(1.9rem, 1.3rem + 2.6vw, 2.8rem);
  line-height: 1.08;
  hyphens: none; -webkit-hyphens: none;
  overflow-wrap: break-word;
  text-wrap: balance;
}

.artikel__meta {
  display: flex; flex-wrap: wrap; gap: .35rem 1.4rem;
  margin: 0 0 2rem;
  font-size: .9rem;
  color: var(--mc-grau, #5A5654);
}
.artikel__meta > span { display: inline-flex; align-items: center; gap: .4rem; }
.artikel__meta svg { width: 1.05em; height: 1.05em; flex: 0 0 auto; }

.artikel__text::after { content: ''; display: block; clear: both; }

.artikel-bild { margin: 1.6rem 0; }
.artikel-bild img { display: block; width: 100%; height: auto; border-radius: 3px; }
.artikel-bild figcaption {
  margin-top: .45rem;
  font-size: .88rem; line-height: 1.4;
  color: var(--mc-grau, #5A5654);
}
.artikel__text img { max-width: 100%; height: auto; }

@media (min-width: 621px) {
  .artikel-bild--rechts { float: right; width: 45%; margin: .3rem 0 1rem 1.5rem; }
  .artikel-bild--links  { float: left;  width: 45%; margin: .3rem 1.5rem 1rem 0; }
}
/* „breit" geht über die Textspalte hinaus, soweit Platz ist. */
@media (min-width: 900px) {
  .artikel-bild--breit { margin-left: -4rem; margin-right: -4rem; }
}

.artikel__zurueck { margin: 2.5rem 0 1rem; }

@media print {
  .artikel__zurueck { display: none; }
  .artikel-bild { break-inside: avoid; }
}

/* ===================================================================
   Artikel, nachgebessert — Update 189 (DEMOKRATIEfest) / MiCOU-Update 17
   ===================================================================

   AM RECHNER BREITER: Die Textspalte eines Artikels ist nicht mehr die
   schmale Lesespalte (70 Zeichen), sondern fast die volle Seitenbreite —
   65rem statt 75rem. Auf dem Telefon ändert sich nichts.

   TITEL, AUTOR UND DATUM MITTIG. Die Erläuterung bleibt links mit ihrem
   Balken, rückt näher an die Kopfzeile der Website und hat mehr Luft zum
   Titel.

   „breit" ragt nur noch über die Spalte hinaus, wenn das Fenster dafür
   Platz hat (ab 1200px). */

.artikel.container--eng { max-width: 65rem; padding-top: 1.2rem; }

.artikel .artikel__erlaeuterung { margin-bottom: 2.4rem; }

.artikel .artikel__titel { text-align: center; }
.artikel .artikel__meta { justify-content: center; }

@media (min-width: 900px) {
  .artikel-bild--breit { margin-left: 0; margin-right: 0; }
}
@media (min-width: 1200px) {
  .artikel-bild--breit { margin-left: -3rem; margin-right: -3rem; }
}
@media (min-width: 621px) {
  .artikel-bild--rechts,
  .artikel-bild--links { width: 40%; }
}

/* ---- Autor im roten Kopf (MiCOU-Update 18) ---------------------------

   Eine Mitteilung kann einen Autor haben; er steht im roten Kopf unter
   dem Datum, etwas kleiner und dicht darunter. */
.seiten-kopf p.seiten-kopf__unter--zwei { margin-top:.15rem; font-size:.95rem; }

/* ---- Artikel im roten Seitenkopf; Mitteilung breiter (MiCOU-Update 21)

   Der Titel eines Artikels steht seit Update 21 im roten Seitenkopf wie
   auf allen MiCOU-Seiten; darunter, ebenfalls im Kopf, Datum und Autor
   mit Symbolen. Die Erläuterung steht unter dem Kopf, vor dem Text.

   Der Textblock einer Mitteilung ist am Rechner so breit wie der eines
   Artikels (65rem). */

.seiten-kopf p.seiten-kopf__meta {
  display:flex; flex-wrap:wrap; gap:.3rem 1.4rem;
  margin:.55rem 0 0;
  color:var(--mc-beige-hell);
  font-size:1rem;
}
.seiten-kopf__meta > span { display:inline-flex; align-items:center; gap:.45rem; }
.seiten-kopf__meta svg { width:1.05em; height:1.05em; flex:0 0 auto; }

.artikel.container--eng { padding-top:0; }
.artikel .artikel__erlaeuterung { margin-bottom:1.8rem; }

.container--eng.mc-breit { max-width:65rem; }

@media print {
  :root:has(.kal-drucken__tinte:checked) .seiten-kopf p.seiten-kopf__meta { color:#5A5350; }
}

/* ---- Veranstaltung mit Bilderwand (MiCOU-Update 36) ------------------

   Die Seite ist so breit wie ein Artikel (65rem, Klasse `mc-breit`). Oben
   die Kurzbeschreibung mit dem Balken in der Hausfarbe, darunter — oder
   unter dem Text, oder gar nicht — die Bilderwand nach dem Vorbild von
   demokratiefest.org („Bilder aus Brettorf“): Mauerwerk, Pinnwand oder
   Raster.

   Mauerwerk läuft SPALTENWEISE (CSS-Spalten, kein JavaScript): erst
   Spalte eins von oben nach unten, dann Spalte zwei. Wer eine Abfolge
   zeigen will, nimmt das Raster — gleich große Felder, zeilenweise, dafür
   zugeschnitten.

   Der Streifen mit dem Bildtext hat eine feste dunkle Farbe: --mc-schwarz
   ist im dunklen Modus hell, darauf wäre weiße Schrift unlesbar. */

.mc-veranstaltung__kurz {
  margin:0 0 1.8rem; padding-left:1rem;
  border-left:4px solid var(--mc-rot);
  font-size:clamp(1.08rem, 1rem + .4vw, 1.25rem);
  font-weight:300; line-height:1.55;
}
.mc-galerie { margin:0 0 2.2rem; }
.mc-veranstaltung .prose + .mc-galerie,
.mc-veranstaltung p + .mc-galerie { margin-top:2.2rem; }
.mc-galerie__titel { margin:0 0 1rem; }

.bw { columns:3 240px; column-gap:1rem; }
.bw--raster {
  columns:unset; display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
}
.bw--raster .bw__stueck { display:block; 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 {
  display:inline-block; width:100%; vertical-align:top;
  break-inside:avoid; margin:0 0 1rem; position:relative;
  background:var(--mc-beige-hell); border:1px solid var(--mc-beige);
}
.bw__knopf {
  display:block; width:100%; height:auto; padding:0; border:0;
  background:none; cursor:zoom-in; color:inherit;
}
.bw__stueck img { display:block; width:100%; height:auto; }
.bw__knopf:focus-visible { outline:3px solid var(--mc-rot); outline-offset:3px; }

.bw__text {
  padding:.55rem .7rem; font-size:.84rem; line-height:1.4; color:var(--mc-grau);
}
@media (hover:hover) and (pointer:fine) {
  .bw__text {
    position:absolute; left:0; right:0; bottom:0;
    background:rgb(28 25 26 / .86); 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; }
}

.bw--pinnwand .bw__stueck {
  box-shadow:0 2px 10px rgba(0, 0, 0, .16);
  padding:.75rem .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:-3px; 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 (hover:hover) and (pointer:fine) {
  .bw--pinnwand .bw__text { left:.5rem; right:.5rem; }
}

.bw__stueck--video .bw__knopf { position:relative; cursor:pointer; }
.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 25 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__ohnebild { display:block; width:100%; aspect-ratio:16 / 9; background:var(--mc-beige); }

@media (max-width:700px) {
  .bw { columns:2 150px; column-gap:.6rem; }
  .bw__stueck { margin-bottom:.6rem; }
  .bw--raster { grid-template-columns:repeat(2, 1fr); gap:.6rem; }
  .bw--pinnwand .bw__stueck { transform:none; }
}
@media print {
  .bw { columns:3; }
  .bw__stueck { break-inside:avoid; }
  .bw__text { position:static; opacity:1; transform:none; background:none; color:#5A5350; }
  .bw__abspielen { display:none; }
}

/* ---- Infokasten im Text (MiCOU-Update 38) ---------------------------

   Ein Zitat in Markdown (Zeilen mit „> “ davor) wird im Text zum Kasten
   in Hausfarbe: roter Rahmen, links breiter, heller Grund. Fettes darin
   steht in der Titelschrift.

   Ein CODEBLOCK (Zeilen mit vier Leerzeichen davor, oder zwischen ```)
   sieht genauso aus. Auf micou.org gibt es keinen Programmcode — solche
   Blöcke entstehen fast immer versehentlich, durch eingerückte Zeilen
   beim Einfügen aus einer Mail oder einem anderen Programm. Bisher
   standen sie in Schreibmaschinenschrift und wurden NICHT umbrochen; am
   Telefon lief der Text rechts aus dem Kasten. Jetzt: normale Schrift,
   Umbruch, die Zeilen bleiben Zeilen. */

.prose blockquote,
.prose pre {
  margin:1.6rem 0; padding:1rem 1.25rem;
  border:2px solid var(--mc-rot); border-left-width:6px; border-radius:4px;
  background:var(--mc-beige-hell); color:inherit; box-shadow:none;
  font-size:1.05rem; line-height:1.6;
}
.prose blockquote > :last-child { margin-bottom:0; }
.prose blockquote > :first-child { margin-top:0; }
.prose blockquote li::marker { color:var(--mc-rot); }
/* Quark setzt Zitate in die Titelschrift; im Kasten steht der Text in der
   Lesschrift, nur Fettes in der Titelschrift — wie eine Zwischenzeile. */
.prose blockquote { font-family:var(--pico-font-family-sans-serif); letter-spacing:normal; }
.prose blockquote strong { font-family:var(--pico-font-family-display); font-weight:700; }
.prose pre {
  font-family:inherit; white-space:pre-wrap; overflow-wrap:anywhere; overflow-x:visible;
}
.prose pre code {
  font:inherit; color:inherit; background:none; padding:0; white-space:inherit;
}
@media (max-width:620px) {
  .prose blockquote, .prose pre { padding:.85rem 1rem; border-left-width:5px; font-size:1rem; }
}