/* ===================================================================
   FARBEN & GRUNDEINSTELLUNGEN
   Willst du die Farben ändern? Einfach die Werte hier oben anpassen,
   der Rest der Datei benutzt diese Variablen.
   =================================================================== */
:root {
  --farbe-hintergrund: #ffffff; /* Hintergrundfarbe der ganzen Seite */
  --farbe-text: #000000;        /* schwarze Schrift */

  /* Farbpalette für Farbverlauf ("!") und den fluiden Hintergrund */
  --farbe-orange: #eb5b0d;
  --farbe-gelb: #e3e14c;
  --farbe-rot: #b3231a;
  --farbe-blau: #2d55e6;

  /* --schrift-fett: nur noch für das Logo und die "!"-Grafiken
     (Pfeile, Klick-Effekt, Intro-Loch) - die sollen weiterhin zum
     "!" im Logo passen. Alle normalen Texte nutzen --schrift-normal. */
  --schrift-fett: "Archivo Black", Arial, sans-serif;
  --schrift-normal: "Inter", Arial, sans-serif;
}

/* ===================================================================
   GRUNDLAYOUT
   =================================================================== */
body {
  margin: 0;
  background-color: var(--farbe-hintergrund);
  font-family: var(--schrift-normal);
  font-weight: 600; /* etwas dicker als normal (400) */
  color: var(--farbe-text);
}

/* Der Inhaltsbereich der Seite (Innenabstand zum Bildschirmrand) */
.page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 60px;
  min-height: 100vh;
}

/* ===================================================================
   EU-FÖRDERLOGO: unten links, bündig mit dem "kunstk!ez"-Button oben.
   Gleiche max-width/margin/padding wie .page, damit die linke Kante
   exakt übereinstimmt - auf jeder Seite gleich eingebunden.
   =================================================================== */
.eu-logo-wrapper {
  position: fixed;
  bottom: 20px;
  left: 0;
  right: 0;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 60px;
  z-index: 5; /* über dem Hintergrund, unter Intro-Maske/Klick-Effekt */
  pointer-events: none; /* rein dekorativ, blockiert keine Klicks */
}

.eu-logo {
  display: block;
  height: 44px; /* Größe hier anpassen */
  width: auto;
}

/* ===================================================================
   HINTERGRUND-VIDEO: läuft in Dauerschleife hinter allem anderen
   (z-index: -1), object-fit: cover füllt immer den ganzen Bildschirm.
   =================================================================== */
.fluid-hintergrund {
  position: fixed;
  inset: 0;
  z-index: -1; /* immer im Hintergrund, hinter dem Inhalt */
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 0.5s ease;
}

/* Wird per JS gesetzt, sobald ein Pfeil geklickt wurde: Video wird
   schwarz-weiß und pausiert (siehe event-slider.js - das Pausieren
   selbst passiert dort per video.pause(), CSS kann das nicht) */
.fluid-hintergrund--pausiert {
  filter: grayscale(1);
}

/* ===================================================================
   INTRO-MASKE (Scroll-Effekt beim Landen auf der Seite)
   Rundherum bleibt die Fläche schwarz. Nur das "!" in der Mitte
   ist ein "Loch", durch das man den Farbverlauf sieht. Beim
   Scrollen wächst das "!" und der Farbverlauf wird durchsichtiger,
   bis man komplett "hindurchgeflogen" ist. Größe/Durchsichtigkeit
   werden per JavaScript (script.js) gesteuert.
   =================================================================== */
.intro-mask {
  position: fixed;
  inset: 0; /* füllt den ganzen Bildschirm */
  /* 100dvh statt 100vh: auf dem Handy blendet der Browser beim Scrollen
     die Adressleiste ein/aus, wodurch sich die sichtbare Höhe ändert.
     Mit normalem "vh" bleibt die Maske dann zu klein und man sieht am
     unteren Rand einen Streifen Hintergrund durchschimmern. "dvh"
     (dynamic viewport height) passt sich dem automatisch an. */
  height: 100vh;
  height: 100dvh;
  z-index: 9999;
  overflow: hidden; /* falls das "!" beim Wachsen über den Rand geht */
  transition: opacity 0.3s ease; /* sanftes Verschwinden ganz am Ende */
}

/* Wird per JS gesetzt, sobald der Effekt fertig ist:
   blendet die komplette Maske aus und macht sie durchklickbar */
.intro-mask.intro-mask--hidden {
  opacity: 0;
  pointer-events: none;
}

/* Das weiße "!", das durch das Loch sichtbar ist.
   Liegt HINTER der schwarzen Fläche mit dem Loch (siehe .intro-loch) */
.intro-mark-farbe {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%) scale(1); /* Startgröße, wächst per JS */

  font-family: var(--schrift-fett);
  font-size: clamp(120px, 25vw, 500px);
  line-height: 1;

  color: #ffffff;
}

/* Die schwarze Fläche mit dem ausgeschnittenen "!"-Loch */
.intro-loch {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* Der Text in der SVG-Maske, der das Loch formt (wächst per JS mit).
   Die Skalierung passiert komplett in script.js über eine berechnete
   SVG-Transform-Matrix (kein transform-box/transform-origin hier) -
   auf manchen mobilen Browsern (v.a. Safari/iOS) war das Skalieren
   um die eigene Mitte per CSS transform-box:fill-box unzuverlässig
   und das "!" wuchs sichtbar aus der Mitte heraus. */
#introLochText {
  font-family: var(--schrift-fett);
  font-size: clamp(120px, 25vw, 500px);
}

/* Leerraum zum Scrollen, damit man Zeit hat, durch das "!" zu "fliegen" */
.intro-spacer {
  height: 200vh; /* größer = langsamerer Effekt, kleiner = schneller */
}

/* ===================================================================
   HEADER: Logo links, Navigation rechts
   =================================================================== */
.header {
  display: flex;
  justify-content: space-between;
  /* oben bündig, damit das Logo nicht mitwandert, wenn die Nav-Reihe
     durch "events" beim Hover höher wird */
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 20px;
}

/* Weiße Box mit schwarzem Rand - für Logo, jeden Nav-Link, die
   Namen auf der "über uns"-Seite (.team-name) und die "nächstes
   event:"-Überschrift. Rand ist dünner als bei den großen Boxen
   in der Mitte (dort 6px). */
.logo,
.nav a,
.team-name,
.event-title {
  display: inline-block; /* damit padding/Rand auf allen Seiten wirken */
  background-color: #ffffff;
  border: 3px solid var(--farbe-text);
  padding: 8px 18px;
  line-height: 1; /* macht die Boxhöhe berechenbar, siehe .events-menu > a */
  color: var(--farbe-text);
  text-decoration: none;
  /* harter, leicht versetzter Schatten (kein Weichzeichnen) = dezenter
     3D-/"aufgeklebt"-Effekt. Größe hier anpassen. */
  box-shadow: 4px 4px 0 var(--farbe-text);
}

.nav {
  display: flex;
  /* alle Boxen oben bündig statt gestreckt/zentriert - dadurch bleibt
     die Oberkante gleich, egal wie hoch "events" beim Hover wird */
  align-items: flex-start;
  gap: 20px;
  font-size: 1.6rem;
}

/* gleiche Schriftgröße wie die Nav-Boxen, damit alle Boxen oben
   gleich groß aussehen. Einzige Ausnahme von --schrift-normal:
   das Logo bleibt in der fetten Schrift. */
.logo {
  font-size: 1.6rem;
  font-family: var(--schrift-fett);
}

.nav a:hover,
.logo:hover {
  text-decoration: underline;
}

/* "events"-Dropdown: sitzt über dem Rest, damit die Liste unten
   frei ausfahren kann.

   --form-balken: die Trapez-Form des "!"-Balkens als eine Variable,
   damit die äußere UND innere Ebene (siehe .events-dropdown /
   .events-dropdown-inhalt) immer exakt dieselbe Form haben. */
/* .events-menu selbst hat eine FESTE Größe (wie "events" im
   Ruhezustand) und bleibt immer so groß - dadurch verschieben sich
   Header/restliche Seite nicht, wenn die Box beim Hover größer wird.
   Die Box wächst per position:absolute nur "über" die Seite hinweg,
   ohne den Platz im Layout zu beeinflussen. */
.events-menu {
  position: relative;
  --events-box-groesse: 120px; /* Breite der Box - hier anpassen */
  --events-box-hoehe: calc(1.6rem + 2 * 8px + 2 * 3px); /* Ruhe-Höhe, wie "über uns"/"kontakt" */
  width: var(--events-box-groesse);
  height: var(--events-box-hoehe);
  --form-balken: polygon(35% 0%, 65% 0%, 92% 100%, 8% 100%);

  /* drop-shadow statt box-shadow: wirkt auf die Box UND das Dropdown
     darunter zusammen und folgt dabei der Trapez-Form (clip-path),
     nicht dem unsichtbaren rechteckigen Kasten drumherum. Deshalb
     bekommt .events-menu > a weiter unten kein eigenes box-shadow -
     sonst gäbe es zwei Schatten übereinander. */
  filter: drop-shadow(4px 4px 0 var(--farbe-text));
}

/* "events": Breite bleibt IMMER gleich. Im Ruhezustand ist die Box
   normal flach; beim Hover wächst nur die Höhe, bis sie der Breite
   entspricht = Quadrat. Die Schrift ist dank flex/center in beiden
   Zuständen exakt mittig. position:absolute, damit das Wachsen die
   restliche Seite nicht verschiebt (siehe .events-menu oben). */
.events-menu > a {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: var(--events-box-groesse);
  height: var(--events-box-hoehe);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: height 0.2s ease;
  box-shadow: none; /* Schatten kommt vom drop-shadow auf .events-menu */
}

/* Erst beim Hover wächst die Höhe bis zum Quadrat und wird schwarz
   mit weißer Schrift - wie das Dropdown darunter */
.events-menu:hover > a {
  height: var(--events-box-groesse);
  background-color: var(--farbe-text);
  color: #ffffff;
}

/* Unsichtbare "Brücke" genau über der Lücke zwischen Box und
   Dropdown (gleiche Höhe wie .events-dropdown margin-top unten).
   Ohne sie verlässt die Maus beim Rüberfahren kurz den Hover-Bereich
   und es klappt zu, bevor man das Dropdown erreicht - die Lücke
   selbst soll aber sichtbar bleiben, deshalb dieser Trick. */
.events-bruecke {
  position: absolute;
  /* unter der ausgewachsenen (quadratischen) Box, nicht unter der
     kleinen Ruhe-Höhe von .events-menu */
  top: var(--events-box-groesse);
  left: 0;
  width: 100%;
  height: 10px; /* muss zum margin-top von .events-dropdown passen */
}

/* Die Liste darunter - wie der Balken vom "!": Trapez-Form, oben
   schmaler, unten breiter (per clip-path zugeschnitten), komplett
   schwarz mit weißer Schrift. Standardmäßig unsichtbar und
   eingeklappt, fährt beim Hover aus. */
.events-dropdown {
  position: absolute;
  /* unter der ausgewachsenen (quadratischen) Box, nicht unter der
     kleinen Ruhe-Höhe von .events-menu */
  top: var(--events-box-groesse);
  left: 50%;
  margin-top: 10px; /* sichtbare Lücke - siehe .events-bruecke oben */
  transform: translateX(-50%) translateY(-8px);

  min-width: 260px;

  background-color: var(--farbe-text);
  clip-path: var(--form-balken);

  opacity: 0;
  max-height: 0;
  overflow: hidden;
  pointer-events: none;
  /* diese Zeile gilt fürs ZUKLAPPEN (wenn die Maus weggeht) -
     bewusst langsamer/entspannter als das Aufklappen */
  transition: opacity 0.6s ease, transform 0.6s ease, max-height 0.6s ease;
}

.events-menu:hover .events-dropdown {
  opacity: 1;
  max-height: 500px;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
  /* diese Zeile gilt fürs AUFKLAPPEN - schneller/knackiger */
  transition: opacity 0.25s ease, transform 0.25s ease, max-height 0.25s ease;
}

/* Innere Ebene nur noch für Layout/Abstand der Liste zuständig
   (kein eigener Hintergrund mehr nötig, da außen schon schwarz ist).
   Oben viel Platz: der Text soll erst da anfangen, wo die Trapez-Form
   schon so breit ist, dass der Randabstand ungefähr dem der
   "events"-Box entspricht - nicht direkt an der schmalen Spitze. */
.events-dropdown-inhalt {
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 170px 16px 26px;
}

.events-dropdown a {
  background: none;
  border: none;
  padding: 2px;
  color: #ffffff;
  font-size: 0.85rem;
  text-align: center;
}

/* ===================================================================
   NÄCHSTES EVENT: Titel + Farbverlauf-Kasten mit Datum
   =================================================================== */
.event-section {
  margin-top: 70px;
  text-align: center;
}

.event-title {
  font-size: 2rem;
  margin-top: 0;
  margin-bottom: 20px;
}

/* Reihe: Pfeil links - Box - Pfeil rechts, mit ein paar Pixeln
   Abstand zum Rahmen der Box, als Gruppe mittig auf der Seite */
.event-reihe {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0px;
}

/* Breite so begrenzt, dass die Box (im 2:1-Format) inklusive Header,
   Überschrift und den (jetzt größeren) Pfeilen daneben immer ohne
   Scrollen komplett ins Fenster passt */
.event-box {
  width: min(1000px, 72vw, 80vh);
  box-sizing: border-box; /* Rand zählt zur Breite dazu, nicht extra */
  flex-shrink: 0;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;

  border: 6px solid var(--farbe-text);
  background-color: #ffffff;
  box-shadow: 6px 6px 0 var(--farbe-text); /* etwas größer als bei den kleinen Boxen, passend zum dickeren Rand */
}

.event-date {
  font-size: 6rem;
  color: var(--farbe-text);
}

/* Box bleibt 16:9, Video behält sein eigenes Format (4:3) - object-fit:
   contain zeigt das Video komplett, ohne etwas zuzuschneiden oder zu
   verzerren. Da das Video "höher" ist als die 16:9-Box breit, wird es
   an der Höhe ausgerichtet: oben/unten bündig mit dem Rahmen, links/
   rechts bleiben dafür schwarze Balken (Originalproportionen). */
.event-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background-color: #000000;
  display: block;
}

/* Pfeile links/rechts neben der Box - wiederverwendetes "!" aus der
   Schrift, per rotate() zu Pfeilen gedreht. Zum Ändern der Größe:
   font-size anpassen.

   width/height + display:flex: das "!" ist von Haus aus schmal und
   hoch. Ohne festes, quadratisches Kästchen drumherum würde das
   Drehen (rotate) den Gap-Abstand zur Box durcheinanderbringen,
   weil die Drehung nur das Aussehen dreht, nicht den Platz, den
   das Element im Layout einnimmt.

   margin: 0 -8px gleicht nur den Leerraum aus, den die Schriftart
   automatisch um das "!" herum lässt (für den Zeilenabstand) - der
   wird nach dem Drehen zu sichtbarem Abstand. Das ist NUR ein
   Ausgleich, nicht der Regler für die Position (siehe unten). */
.pfeil {
  cursor: pointer;
  user-select: none;
  font-family: var(--schrift-fett);
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  width: 1em;
  height: 1em;
  margin: 0 240px;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: var(--farbe-text);
}

/* gespiegelt zueinander, damit sie wie ein linker/rechter Pfeil
   in Gegenrichtung wirken.

   DER REGLER für die Position zur Mitte/Box: margin-right beim
   linken Pfeil bzw. margin-left beim rechten Pfeil (nur die Seite,
   die zur Box zeigt!). Negativere Zahl = näher zur Box/Mitte,
   weniger negativ oder positiv = weiter weg zum Rand hin.
   (Beide Seiten gleichzeitig zu verändern funktioniert nicht gut,
   weil die "äußere" Seite den Pfeil selbst nach außen schiebt.) */
.pfeil-links {
  transform: rotate(90deg);
  margin-right: -20px;
}

.pfeil-rechts {
  transform: rotate(-90deg);
  margin-left: -20px;
}

.pfeil-links:hover {
  transform: rotate(90deg) scale(1.2);
}

.pfeil-rechts:hover {
  transform: rotate(-90deg) scale(1.2);
}

/* ===================================================================
   "ÜBER UNS"-SEITE: großes, unscharfes Foto in Schwarz-Weiß im
   Hintergrund, Namen in einer Box mit dem Foto in Farbe.
   Kein Scroll-/Farbverlauf-Effekt hier (siehe ueber-uns.php).
   =================================================================== */

/* Das Team-Foto überall im Hintergrund: groß, unscharf, schwarz-weiß.
   Der Dateiname kommt jetzt aus der Datenbank (Tabelle "medien",
   seite='ueber-uns') und wird von ueber-uns.php als CSS-Variable
   --team-foto auf <body> gesetzt (siehe dort). Bild ändern = in der
   Datenbank den Dateinamen anpassen, nicht mehr hier im CSS. */
.foto-hintergrund {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden; /* damit die Unschärfe nicht über den Rand hinausragt */
}

.foto-hintergrund::before {
  content: "";
  position: absolute;
  /* etwas größer als der Bildschirm, damit die Unschärfe am Rand
     nicht die scharfe Bildkante durchscheinen lässt */
  inset: -60px;

  background-image: var(--team-foto);
  background-size: cover;
  background-position: center;

  filter: grayscale(1) blur(10px);
}

/* 70px wie .event-section + 74px, weil dort zusätzlich die
   Titel-Box (Höhe 54px + 20px Abstand) über der Box sitzt - hier
   gibt es keinen Titel, aber die Box soll trotzdem an derselben
   Position wie auf den anderen Seiten stehen. */
.team-section {
  margin-top: 144px;
  text-align: center;
}

/* Reihe mit den Namen, unterhalb der Box (nicht auf dem Foto).
   Gleiche Breite wie die Box, damit der erste/letzte Name exakt
   links/rechts bündig mit dem Bild abschließen. Bleibt IMMER eine
   einzige Reihe (nowrap) - werden die Namen zu breit, schrumpfen
   Schrift und Innenabstand automatisch mit (clamp), statt umzubrechen. */
.team-namen {
  width: min(1000px, 90vw, 80vh);
  margin: 20px auto 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 8px;
}

.team-namen .team-name {
  font-size: clamp(0.7rem, 2.2vw, 1.8rem);
  padding: clamp(4px, 1vw, 8px) clamp(6px, 2vw, 18px);
  white-space: nowrap;
}

/* Gleiche Box wie die Event-Box, aber statt Farbverlauf zeigt sie
   das Team-Foto in Farbe - wie ein Fenster in die "echte" Farbwelt,
   während drumherum alles schwarz-weiß bleibt. Breite so begrenzt,
   dass die Box immer ohne Scrollen komplett ins Fenster passt. */
.team-box {
  width: min(1000px, 90vw, 80vh);
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  /* border-box: der 6px-Rand wird INNERHALB der Breite gerechnet,
     nicht dazu addiert - sonst wäre die Box 12px breiter als die
     Namenreihe darunter und nicht mehr bündig */
  box-sizing: border-box;

  border: 6px solid var(--farbe-text);
  background-image: var(--team-foto); /* siehe --team-foto weiter oben */
  background-size: cover;
  background-position: center;
  box-shadow: 6px 6px 0 var(--farbe-text);
}

/* ===================================================================
   GALLERIE-SEITE: Bilder aus der Datenbank (Tabelle "medien",
   seite='gallerie', verwendung='galerie-bild'), siehe kunstkiez-gallerie.php.
   Solange dort keine Zeilen existieren, zeigt die Seite stattdessen
   die leere .event-box (Platzhalter, siehe dort).
   =================================================================== */
.galerie-grid {
  width: min(1000px, 72vw, 80vh);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.galerie-bild {
  /* gleiche Optik wie .event-box (weiß, schwarzer Rand, Schatten),
     nur mehrere nebeneinander statt einer einzelnen großen Box */
  width: min(300px, 30vw);
  aspect-ratio: 16 / 9;
  box-sizing: border-box;
  border: 6px solid var(--farbe-text);
  box-shadow: 6px 6px 0 var(--farbe-text);
  object-fit: cover;
}

/* ===================================================================
   KLICK-EFFEKT: kurzes Ausrufezeichen an der Klickposition
   Wird per JavaScript (script.js) bei jedem Klick erzeugt und
   nach der Animation wieder entfernt.
   =================================================================== */
.klick-ausrufezeichen {
  position: fixed;
  z-index: 10000;
  pointer-events: none; /* darf keine Klicks blockieren */

  font-family: var(--schrift-fett);
  font-size: 34px;
  line-height: 1;
  color: var(--farbe-text);

  animation: klick-ausrufezeichen-animation 0.4s ease-out forwards;
}

@keyframes klick-ausrufezeichen-animation {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.4);
  }
  40% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.3);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* ===================================================================
   MOBILE ANPASSUNG (kleine Bildschirme)
   =================================================================== */
@media (max-width: 700px) {
  /* kunstk!ez, events, über uns, kontakt untereinander statt nebeneinander,
     alle mittig und gleich breit - auf schmalen Bildschirmen ist
     nebeneinander sonst zu eng/überlappt sich */
  .header {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .nav {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    font-size: 1.1rem;
  }

  /* gemeinsame Breite für alle Boxen im Header (Logo, über uns, kontakt).
     --events-box-groesse steuert die Breite von .events-menu bereits an
     mehreren Stellen (siehe dort) - hier einfach denselben Wert nutzen,
     damit "events" genauso breit ist wie die anderen Boxen. Breite hier
     anpassen, um alle Boxen gemeinsam schmaler/breiter zu machen. */
  .logo,
  .nav a {
    width: min(120px, 42vw);
    box-sizing: border-box;
    text-align: center;
  }
  .events-menu {
    --events-box-groesse: min(120px, 42vw);
    /* gleiche Höhe wie .logo/.nav a: dieselbe Formel wie in der
       Desktop-Ansicht, nur mit der mobilen Schriftgröße (1.1rem statt
       1.6rem) - sonst bleibt "events" wegen des festen 1.6rem in der
       Desktop-Formel höher als die anderen Boxen. */
    --events-box-hoehe: calc(1.1rem + 2 * 8px + 2 * 3px);
  }

  /* Dropdown-Trapez skaliert automatisch mit --events-box-groesse mit
     (statt fester Werte wie bei der Desktop-Ansicht), damit es zur
     schmaleren "events"-Box proportional passt. Die Faktoren (2.2 bzw.
     1.42) entsprechen dem Verhältnis der Desktop-Werte (260px/120px
     bzw. 170px/120px). */
  .events-dropdown {
    min-width: calc(var(--events-box-groesse) * 2.2);
  }
  .events-dropdown-inhalt {
    padding: calc(var(--events-box-groesse) * 1.42) 16px 26px;
  }

  .logo {
    font-size: 1.1rem;
  }
  .event-date {
    font-size: 3rem;
  }

  /* EU-Förderlogo mittig statt bündig mit dem kunstk!ez-Button */
  .eu-logo {
    margin: 0 auto;
  }

  /* Pfeile: der Desktop-Wert (margin: 0 240px) ist auf schmalen
     Bildschirmen viel zu groß und schiebt die Pfeile praktisch aus
     dem sichtbaren Bereich - hier ein eigener, kleinerer Basiswert.
     margin-right beim linken Pfeil / margin-left beim rechten Pfeil
     bleibt weiterhin DER REGLER für den Abstand zur Box: positiver
     Wert = weiter weg von der Box/nach außen (siehe Erklärung bei
     .pfeil-links weiter oben). */
  .pfeil {
    margin: 0 6px;
  }
  .pfeil-links {
    margin-right: 10px;
  }
  .pfeil-rechts {
    margin-left: 10px;
  }
}