@charset "UTF-8";
/* DYH Gambia - seite.css
   Farben und Schriften der Wix-Seite (Farbpalette des Wix-Themes):
     Marineblau  #213472  Ueberschriften, Menue, Fusszeile   (Wix color_18/41/45)
     Creme       #FFF5ED  Kopfzeile, Kaesten                  (Wix color_42)
     Rost        #C34B13  Menue beim Ueberfahren, Akzent      (Wix color_24)
     Orange      #F97338  Zierlinien                          (Wix color_43)
     Grau        #414141  Fliesstext                          (Wix color_37)
   Schriften: Georgia fuer Ueberschriften (wie Wix), Damion fuer die
   Begruessung, fuer Fliesstext eine Systemschrift (die Wix-Schriften DIN Next
   und Brandon Grotesque sind lizenzpflichtig). */

@font-face {
  font-family: "Damion";
  src: url("../schrift/damion-latin.woff2") format("woff2");
  font-display: swap;
}

:root {
  --navy: #213472;
  --navy-tief: #182757;
  --navy-nacht: #111a39;
  --navy-hell: #bfcae4;
  --creme: #fff5ed;
  --pfirsich: #ffcfae;
  --orange: #f97338;
  --rost: #c34b13;
  --text: #414141;
  --text-leise: #66625f;
  --linie: #e8e6e6;
  --linie-stark: #c7c7c7;
  --grund: #ffffff;
  --schatten: 0 1px 3px rgba(17, 26, 57, .10), 0 6px 18px rgba(17, 26, 57, .08);

  --schrift-titel: Georgia, Palatino, "Book Antiqua", "Palatino Linotype", serif;
  --schrift-text: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --schrift-hand: "Damion", "Segoe Script", cursive;

  --breite-text: 46rem;
  --breite-weit: 72rem;
  --rand: clamp(1rem, 4vw, 2rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 1rem; }
body {
  margin: 0; background: var(--grund); color: var(--text);
  font: 400 1.0625rem/1.7 var(--schrift-text);
  overflow-wrap: break-word;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--rost); }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--schrift-titel); font-weight: 400; color: var(--navy); line-height: 1.25; margin: 1.6em 0 .5em; }
h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 2.9rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; }
strong { font-weight: 650; color: #2e2e2e; }

.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprungmarke { position: absolute; left: 1rem; top: -4rem; z-index: 50; background: var(--navy); color: #fff; padding: .6rem 1rem; border-radius: 4px; }
.sprungmarke:focus { top: 1rem; }

/* ---------------------------------------------------------------- Kopf --- */
.kopf { background: var(--creme); border-top: 6px solid var(--navy); position: relative; z-index: 20; }
.kopf__inneres {
  max-width: var(--breite-weit); margin: 0 auto; padding: .5rem var(--rand);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
/* Sprachschalter DE | EN oben rechts */
.kopf__inneres { position: relative; }
.sprachschalter {
  position: absolute; top: .55rem; right: var(--rand); z-index: 2;
  display: inline-flex; align-items: center; gap: .45rem; padding: .25rem .35rem;
  font: 700 .78rem/1 var(--schrift-text); letter-spacing: .06em; color: var(--text-leise); text-decoration: none;
}
.sprachschalter__bahn {
  position: relative; width: 2.4rem; height: 1.3rem; border-radius: 99px; background: var(--navy);
  transition: background-color .25s;
}
.sprachschalter__knopf {
  position: absolute; top: .15rem; left: .15rem; width: 1rem; height: 1rem; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .25s;
}
.sprachschalter--en .sprachschalter__knopf { transform: translateX(1.1rem); }
.sprachschalter--en .sprachschalter__bahn { background: var(--rost); }
.sprachschalter:not(.sprachschalter--en) .sprachschalter__de,
.sprachschalter--en .sprachschalter__en { color: var(--navy); }
.sprachschalter:hover .sprachschalter__bahn { background: var(--orange); }
.kopf__logo img { width: clamp(120px, 18vw, 170px); height: auto; mix-blend-mode: multiply; }

.menue__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; }
.menue__punkt { position: relative; }
.menue a {
  display: block; padding: .7rem .85rem; color: var(--navy); text-decoration: none;
  font-size: 1.05rem; letter-spacing: .01em; transition: color .3s ease;
}
.menue a:hover, .menue a[aria-current="page"], .menue__punkt.ist-aktiv > a { color: var(--rost); }
.menue__punkt.ist-aktiv > a { box-shadow: inset 0 -2px 0 var(--orange); }
.menue__unter {
  list-style: none; margin: 0; padding: .35rem 0; position: absolute; left: 0; top: 100%; min-width: 14rem;
  background: var(--creme); box-shadow: var(--schatten); border-top: 2px solid var(--orange);
  opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .2s, transform .2s, visibility .2s;
}
.menue__unter a { padding: .45rem 1rem; font-size: .98rem; }
.menue__punkt:hover > .menue__unter, .menue__punkt:focus-within > .menue__unter { opacity: 1; visibility: visible; transform: none; }
.menue__punkt:last-child .menue__unter { left: auto; right: 0; }

.menueknopf { display: none; }

@media (max-width: 820px) {
  .sprachschalter { position: static; margin-left: auto; }
  .menueknopf {
    display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
    border: 0; background: transparent; color: var(--navy); cursor: pointer; border-radius: 6px;
  }
  .menueknopf__striche, .menueknopf__striche::before, .menueknopf__striche::after {
    display: block; width: 26px; height: 2px; background: currentColor; position: relative; transition: transform .2s;
  }
  .menueknopf__striche::before, .menueknopf__striche::after { content: ""; position: absolute; left: 0; }
  .menueknopf__striche::before { top: -8px; }
  .menueknopf__striche::after { top: 8px; }
  .menueknopf[aria-expanded="true"] .menueknopf__striche { background: transparent; }
  .menueknopf[aria-expanded="true"] .menueknopf__striche::before { transform: translateY(8px) rotate(45deg); }
  .menueknopf[aria-expanded="true"] .menueknopf__striche::after { transform: translateY(-8px) rotate(-45deg); }

  .menue { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--creme); box-shadow: var(--schatten); }
  .menue.ist-offen { display: block; }
  .menue__liste { flex-direction: column; padding: .5rem var(--rand) 1rem; }
  .menue a { padding: .65rem 0; font-size: 1.1rem; }
  .menue__punkt.ist-aktiv > a { box-shadow: none; }
  .menue__unter {
    position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none;
    border: 0; border-left: 2px solid var(--pfirsich); background: transparent; padding: 0 0 .3rem 1rem; min-width: 0;
  }
  .menue__unter a { padding: .4rem 0; }
}

/* ---------------------------------------------------------- Inhaltsfluss --- */
.inhalt { display: block; padding-bottom: 4rem; min-height: 50vh; }
.bloecke { display: flow-root; }
.block { max-width: var(--breite-text); margin: 0 auto; padding: 0 var(--rand); }
.block--galerie, .block--liste { max-width: calc(var(--breite-weit) + 2 * var(--rand)); }
.block--hero { max-width: none; padding: 0; }
.bloecke > .block:first-child:not(.block--hero) { padding-top: clamp(1.5rem, 4vw, 3rem); }
.bloecke > .block:first-child .fliesstext > :first-child { margin-top: 0; }

.fliesstext > :last-child { margin-bottom: 0; }
.block + .block { margin-top: 1.5rem; }
.fliesstext ul, .fliesstext ol { padding-left: 1.3em; margin: 0 0 1em; }
.fliesstext li { margin: .35em 0; }
.fliesstext ul li::marker { color: var(--orange); }
.fliesstext h1 { margin-top: 0; }
.fliesstext h1::after, .fliesstext > h2:first-child::after {
  content: ""; display: block; width: 3.5rem; height: 3px; background: var(--orange); margin-top: .45em;
}
.fliesstext--zentriert { text-align: center; }
.fliesstext--zentriert h1::after, .fliesstext--zentriert > h2:first-child::after { margin-left: auto; margin-right: auto; }
.fliesstext--kasten {
  background: var(--creme); border-left: 5px solid var(--orange); padding: 1.4rem 1.6rem; border-radius: 0 6px 6px 0;
}
.fliesstext--kasten h2 { margin-top: 0; }
.fliesstext--kasten h2::after { display: none !important; }

/* ------------------------------------------------------------- Titelbild --- */
.hero { position: relative; min-height: clamp(22rem, 62vh, 40rem); display: grid; overflow: hidden; background: var(--navy); }
.hero__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17, 26, 57, .05) 30%, rgba(17, 26, 57, .62)); }
.hero__inhalt {
  position: relative; z-index: 1; align-self: end; justify-self: center; text-align: center;
  padding: 2rem var(--rand) clamp(2rem, 6vw, 4rem); color: #fff; max-width: 60rem;
}
.hero__text { font-family: var(--schrift-hand); font-size: clamp(2.6rem, 1.6rem + 4.4vw, 4.8rem); line-height: 1.1; text-shadow: 0 2px 18px rgba(0, 0, 0, .45); }
.hero__text p, .hero__text h2, .hero__text h3 { margin: 0; font: inherit; color: inherit; }
.hero__text h2::after { display: none; }
.hero__knopf {
  display: inline-block; margin-top: 1.3rem; padding: .35rem 1.6rem; border-radius: 5px;
  background: #fff; color: #59514d; font: 400 clamp(1.4rem, 1.1rem + 1vw, 1.9rem)/1.4 var(--schrift-hand);
  text-decoration: none; box-shadow: 0 1px 4px rgba(0, 0, 0, .6); transition: background-color .4s, color .4s;
}
.hero__knopf:hover { background: #7b736f; color: #fff; }
.hero--ohne-bild { min-height: 16rem; }

/* ------------------------------------------------------- Bilder, Videos --- */
.bild { margin: 2rem 0; }
.bild img { border-radius: 4px; margin: 0 auto; max-height: 85vh; width: auto; }
.bild__zoom { display: block; cursor: zoom-in; }
.bild__unterschrift { font-size: .92rem; color: var(--text-leise); margin-top: .5rem; text-align: center; }
.bild__unterschrift:empty { display: none; }
/* Neben dem Text: das Bild schwebt im eigenen Block, der folgende Text
   (naechster Block, gleiche Spalte) fliesst darum herum. */
@media (min-width: 760px) {
  .bild--rechts { float: right; width: min(40%, 20rem); margin: .4rem 0 1.2rem 2rem; }
  .bild--links { float: left; width: min(40%, 20rem); margin: .4rem 2rem 1.2rem 0; }
  .bild--rechts img, .bild--links img { width: 100%; }
}

.video { margin: 2rem 0; }
.video video { width: 100%; border-radius: 4px; background: #000; }
.video--hochkant video { width: auto; max-height: 80vh; margin: 0 auto; }

/* --------------------------------------------------------------- Galerie --- */
.galerie {
  list-style: none; margin: 2rem 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: .9rem;
}
.galerie__eintrag figure { margin: 0; }
.galerie__medium { display: block; position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 4px; background: var(--linie); }
.galerie__medium img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.galerie__medium:hover img { transform: scale(1.04); }
.galerie__videoflaeche { position: absolute; inset: 0; background: var(--navy-tief); }
.abspielen {
  position: absolute; left: 50%; top: 50%; width: 3.4rem; height: 3.4rem; margin: -1.7rem 0 0 -1.7rem;
  border-radius: 50%; background: rgba(255, 255, 255, .92); box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
.abspielen::after {
  content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%);
  border-style: solid; border-width: .62rem 0 .62rem 1rem; border-color: transparent transparent transparent var(--navy);
}
.galerie__text { font-size: .9rem; line-height: 1.45; margin-top: .45rem; color: var(--text-leise); }
.galerie__text strong { display: block; color: var(--navy); font-weight: 600; }

/* ----------------------------------------------------- Datei, Knoepfe --- */
.datei {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 1rem; align-items: center;
  padding: .9rem 1.1rem; margin: 1.5rem 0; border: 1px solid var(--linie-stark); border-radius: 6px;
  text-decoration: none; color: var(--text); background: #fff; transition: border-color .2s, box-shadow .2s;
}
a.datei:hover { border-color: var(--navy); box-shadow: var(--schatten); color: var(--text); }
.datei__symbol {
  grid-row: span 2; display: grid; place-items: center; width: 3.2rem; height: 3.6rem; border-radius: 4px;
  background: var(--navy); color: #fff; font: 700 .78rem/1 var(--schrift-text); letter-spacing: .04em;
}
.datei__name { font-weight: 600; color: var(--navy); }
.datei__info { font-size: .88rem; color: var(--text-leise); }
.datei--fehlt { border-style: dashed; grid-template-columns: 1fr; }

.knopfzeile { margin: 1.5rem 0; }
.knopf {
  display: inline-block; padding: .7rem 1.4rem; border-radius: 5px; border: 2px solid var(--navy);
  background: var(--navy); color: #fff; text-decoration: none; font-weight: 600; line-height: 1.3; cursor: pointer;
  font-size: 1rem; font-family: var(--schrift-text); transition: background-color .3s, border-color .3s;
}
.knopf:hover { background: var(--rost); border-color: var(--rost); color: #fff; }
.knopf--hell { background: #fff; color: var(--navy); }
.knopf--hell:hover { background: var(--creme); color: var(--rost); border-color: var(--rost); }

/* ---------------------------------------------- Neuigkeiten: Chronik --- */
.block--liste { max-width: calc(60rem + 2 * var(--rand)); }
.chronik { margin-top: clamp(1.5rem, 4vw, 3rem); }
.chronik__jahr + .chronik__jahr { margin-top: 3rem; }
.chronik__jahreszahl {
  margin: 0 0 1rem; font-size: clamp(2rem, 1.5rem + 2vw, 2.8rem); color: var(--navy);
  display: flex; align-items: center; gap: 1rem;
}
.chronik__jahreszahl::after { content: ""; flex: 1; height: 2px; background: var(--pfirsich); }
.chronik__liste { list-style: none; margin: 0; padding: 0; }
.chronik__eintrag {
  position: relative; display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 0 2rem; padding-bottom: 1.6rem;
}
/* senkrechte Linie + Punkt */
.chronik__eintrag::before {
  content: ""; position: absolute; left: calc(8.5rem + 1rem - 1px); top: .4rem; bottom: -.4rem; width: 2px; background: var(--pfirsich);
}
.chronik__eintrag:last-child::before { bottom: auto; height: 1rem; }
.chronik__eintrag::after {
  content: ""; position: absolute; left: calc(8.5rem + 1rem - 7px); top: .45rem; width: 14px; height: 14px;
  border-radius: 50%; background: #fff; border: 3px solid var(--orange);
}
.chronik__datum { text-align: right; color: var(--rost); font-size: .95rem; padding-top: .15rem; }
.chronik__karte { padding: 0 0 0 .6rem; }
.chronik__titel { margin: 0 0 .35rem; font-size: 1.35rem; overflow-wrap: anywhere; }
.chronik__titel a { text-decoration: none; }
.chronik__text { margin: 0 0 .7rem; color: var(--text); }
.chronik__status { margin: 0 0 .4rem; font-size: .85rem; color: #6b5214; }
.chronik__eintrag--verborgen .chronik__karte { opacity: .7; }
.chronik__fotos { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; max-width: 34rem; margin-bottom: .6rem; }
.chronik__fotos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; transition: opacity .2s; }
.chronik__fotos:hover img { opacity: .88; }
.chronik__mehr { margin: 0; font-size: .95rem; font-weight: 600; }
.chronik__mehr a::after { content: " →"; }
@media (max-width: 640px) {
  .chronik__eintrag { grid-template-columns: minmax(0, 1fr); padding-left: 1.6rem; }
  .chronik__eintrag::before { left: .4rem; }
  .chronik__eintrag::after { left: calc(.4rem - 6px); }
  .chronik__datum { text-align: left; }
  .chronik__karte { padding: 0; }
}

/* -------------------------------------------- Beitrag: Zeitabschnitte --- */
.block--abschnitt { max-width: calc(60rem + 2 * var(--rand)); }
.block--abschnitt + .block--abschnitt { margin-top: 0; }
.abschnitt { position: relative; display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 0 2rem; padding: .3rem 0 2.2rem; }
.abschnitt::before {
  content: ""; position: absolute; left: calc(8.5rem + 1rem - 1px); top: 0; bottom: 0; width: 2px; background: var(--pfirsich);
}
.abschnitt__zeit { grid-column: 1; text-align: right; }
.abschnitt__zeitwert {
  position: sticky; top: 1rem; display: inline-block; font-family: var(--schrift-titel); color: var(--navy);
  font-size: 1.15rem; line-height: 1.3;
}
.abschnitt:not(.abschnitt--ohne-zeit)::after {
  content: ""; position: absolute; left: calc(8.5rem + 1rem - 7px); top: .55rem; width: 14px; height: 14px;
  border-radius: 50%; background: #fff; border: 3px solid var(--orange);
}
.abschnitt__inhalt { grid-column: 2; padding-left: .6rem; }
.abschnitt__inhalt > .fliesstext > :first-child { margin-top: 0; }
@media (max-width: 640px) {
  .abschnitt { grid-template-columns: minmax(0, 1fr); padding-left: 1.6rem; }
  .abschnitt::before { left: .4rem; }
  .abschnitt:not(.abschnitt--ohne-zeit)::after { left: calc(.4rem - 6px); top: .35rem; }
  .abschnitt__zeit, .abschnitt__inhalt { grid-column: 1; text-align: left; padding-left: 0; }
  .abschnitt__zeitwert { position: static; margin-bottom: .4rem; }
}

.fotoraster { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.fotoraster--1 { grid-template-columns: 1fr; max-width: 36rem; }
.fotoraster--2 { grid-template-columns: repeat(2, 1fr); }
.fotoraster--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 640px) { .fotoraster--4 { grid-template-columns: repeat(2, 1fr); } }
.fotoraster figure { margin: 0; }
.fotoraster .galerie__medium { aspect-ratio: 1; }
.fotoraster--1 .galerie__medium { aspect-ratio: auto; max-height: 30rem; }
.fotoraster--1 .galerie__medium img { height: auto; max-height: 30rem; object-fit: contain; background: var(--creme); }
.fotoraster--2 .galerie__medium { aspect-ratio: 4 / 3; }

/* --------------------------------------------------------------- Beitrag --- */
.beitrag__kopf { max-width: calc(60rem + 2 * var(--rand)); margin: 0 auto; padding: clamp(1.5rem, 4vw, 3rem) var(--rand) 1rem; }
.beitrag__zurueck { margin: 0 0 1rem; font-size: .95rem; }
.beitrag__zurueck a::before { content: "← "; }
.beitrag__meta { color: var(--rost); font-size: .92rem; margin: 0; }
.beitrag__titel { margin: .2em 0 .6em; }
.beitrag__titel::after { content: ""; display: block; width: 3.5rem; height: 3px; background: var(--orange); margin-top: .45em; }
.beitrag__hinweis { margin: .2rem 0 0; font-size: .9rem; color: var(--text-leise); font-style: italic; }
.blaettern {
  max-width: calc(60rem + 2 * var(--rand)); margin: 2.5rem auto 0; padding: 1.5rem var(--rand) 0; border-top: 1px solid var(--linie);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem;
}
.blaettern a { text-decoration: none; font-family: var(--schrift-titel); font-size: 1.05rem; line-height: 1.35; }
.blaettern span { display: block; font: .82rem/1.4 var(--schrift-text); color: var(--text-leise); margin-bottom: .2rem; }
.blaettern__neuer span::before { content: "← "; }
.blaettern__aelter { text-align: right; }
.blaettern__aelter span::after { content: " →"; }

/* ----------------------------------------------------------- Fusszeile --- */
.fuss { background: var(--navy); color: #dfe4f2; }
.fuss__inneres {
  max-width: var(--breite-weit); margin: 0 auto; padding: 2.2rem var(--rand);
  display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 2rem;
}
.fuss__logo { width: 80px; border-radius: 4px; background: #fff; padding: 3px; }
.fuss__text { margin: 0; flex: 1 1 14rem; font-size: .92rem; }
.fuss__links { margin: 0; font-size: .92rem; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.fuss__login { opacity: .75; }
.fuss__login:hover { opacity: 1; }
.fuss a { color: #fff; }
.fuss a:hover { color: var(--pfirsich); }

/* -------------------------------------------------------------- Sonstiges --- */
.fehlerseite, .anmeldung { max-width: 26rem; margin: 0 auto; padding: 4rem var(--rand); }
.anmeldung form { display: grid; gap: 1rem; }
.anmeldung label { display: grid; gap: .3rem; font-weight: 600; color: var(--navy); }
.anmeldung input {
  font: inherit; padding: .7rem .8rem; border: 1px solid var(--linie-stark); border-radius: 5px; min-height: 48px;
}
.anmeldung__fehler { background: #fde8e0; color: #8a2e0b; padding: .7rem 1rem; border-radius: 5px; }
.hinweis-admin { background: #fff4d6; border: 1px dashed #c8a03a; padding: .5rem .8rem; border-radius: 4px; font-size: .9rem; color: #6b5214; }

/* ---------------------------------------------------------------- Lightbox --- */
.lichtkasten {
  position: fixed; inset: 0; z-index: 100; background: rgba(17, 26, 57, .96);
  display: grid; grid-template-rows: 1fr auto; place-items: center; padding: 3.5rem 1rem 1rem;
}
.lichtkasten img, .lichtkasten video { max-width: 100%; max-height: calc(100vh - 8rem); width: auto; height: auto; border-radius: 3px; }
.lichtkasten__text { color: #fff; text-align: center; max-width: 50rem; font-size: .95rem; padding: .8rem 1rem 0; min-height: 2.5rem; }
.lichtkasten button {
  position: absolute; border: 0; background: rgba(255, 255, 255, .12); color: #fff; width: 48px; height: 48px;
  border-radius: 50%; font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.lichtkasten button:hover { background: rgba(255, 255, 255, .25); }
.lichtkasten__zu { top: .8rem; right: .8rem; }
.lichtkasten__zurueck { left: .8rem; top: 50%; }
.lichtkasten__vor { right: .8rem; top: 50%; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print {
  .kopf, .fuss, .blaettern, .menueknopf { display: none; }
  body { color: #000; }
}

/* Lange Titel ohne Leerzeichen (z. B. "GAMBIA…DYH…SKILLCENTER") duerfen umbrechen */
.blaettern a, .beitrag__titel, .fliesstext h1, .fliesstext h2 { overflow-wrap: anywhere; }