/* ============================================================ */
/* === Markdown Content Styles (assets/css/markdown.css) === */
/* ============================================================ */

/* --- Globale Variablen (Fallbacks) --- */
.page-content .markdown-section .markdown-content-container {
  --color-primary: #1b45c0;
  --color-text-dark-fallback: #333;
}

/* --- Äußerer Wrapper --- */
.markdown-section {
  position: relative;
  box-sizing: border-box;
  margin-bottom: 10px;
  color: var(--markdown-text-color, var(--color-text-dark-fallback));
}

.markdown-section.has-background::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100.3vw;
  height: 100%;
  background-color: var(--markdown-section-bg-color);
  z-index: -1;
  pointer-events: none;
}

.page-content > .markdown-section {
  /* max-width: none; */
}

.markdown-section.has-background {
    padding: 0 30px 0 30px;
    margin-top: 48px;
    margin-bottom: 48px;
}

.page-content .markdown-section .markdown-content-container {
  max-width: 1496px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--content-padding-default, 30px);
  padding-right: var(--content-padding-default, 30px);
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

@media (max-width: 767px) {
  .page-content .markdown-section .markdown-content-container {
    padding-left: var(--content-padding-mobile, 10px);
    padding-right: var(--content-padding-mobile, 10px);
  }
  .markdown-section.has-background {
    padding: 0 10px 0 10px;
    }
}

/* === BEGINN: Detaillierte Styles für Inhaltselemente === */
.markdown-content-container p {
  margin-top: 0;
  margin-bottom: 1em;
  line-height: 1.65;
  font-size: 1rem;
}
.markdown-content-container h1 + p,
.markdown-content-container h2 + p,
.markdown-content-container h3 + p,
.markdown-content-container h4 + p,
.markdown-content-container h5 + p,
.markdown-content-container h6 + p {
  margin-top: 0.6em;
}
.markdown-content-container h1,
.markdown-content-container h2,
.markdown-content-container h3,
.markdown-content-container h4,
.markdown-content-container h5,
.markdown-content-container h6 {
  margin-top: 1.8em; margin-bottom: 0.8em; line-height: 1.3; font-weight: 600;
  color: var(--markdown-text-color, var(--mdf-color-text-dark, #333));
}
.markdown-content-container h1 { font-size: 2.2rem; }
.markdown-content-container h2 { font-size: 1.8rem; }
.markdown-content-container h3 { font-size: 1.5rem; }
.markdown-content-container h4 { font-size: 1.2rem; font-weight: 500; }
.markdown-content-container h5 { font-size: 1.1rem; font-weight: 500; }
.markdown-content-container h6 { font-size: 1rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; }

.markdown-content-container ul, .markdown-content-container ol {
  margin-top: 0; margin-bottom: 1em; padding-left: 1.8em;
}
.markdown-content-container li { margin-bottom: 0.6em; line-height: 1.6; }
.markdown-content-container ul ul, .markdown-content-container ul ol,
.markdown-content-container ol ol, .markdown-content-container ol ul {
  margin-top: 0.5em; margin-bottom: 0.5em;
}
.markdown-content-container blockquote {
  margin: 1.5em 0; padding: 1em 1.5em; font-style: italic; opacity: 0.9;
  border-left: 4px solid var(--markdown-line-color, var(--mdf-line-color, #ccc));
  background-color: var(--markdown-callout-bg-color, var(--mdf-callout-bg, transparent));
  color: var(--markdown-text-color, var(--mdf-color-text-muted, #666));
}
.markdown-content-container blockquote p { margin-bottom: 0; }
.markdown-content-container code {
  padding: var(--mdf-chip-padding-y, 0.15em) 0.4em; margin: 0 0.1em; font-size: var(--mdf-chip-font-size, 0.8em);
  border-radius: 4px; font-family: var(--mdf-monospace-font, monospace);
  background-color: rgba(from var(--markdown-text-color, #000) r g b / 0.08);
  color: var(--markdown-text-color, var(--mdf-color-text-dark, #333));
}
.markdown-content-container pre {
  padding: 16px; overflow: auto; font-size: 85%; line-height: 1.45;
  border-radius: 6px; margin-bottom: 1em; font-family: var(--mdf-monospace-font, monospace);
  background-color: rgba(from var(--markdown-text-color, #000) r g b / 0.05);
  color: var(--markdown-text-color, var(--mdf-color-text-dark, #333));
  border: 1px solid rgba(from var(--markdown-text-color, #000) r g b / 0.1);
}
.markdown-content-container pre code {
  display: inline; padding: 0; margin: 0; overflow: visible;
  line-height: inherit; word-wrap: normal; background-color: transparent;
  border: 0; font-size: 100%; color: inherit;
}
.markdown-content-container hr {
  height: 1px; padding: 0; margin: 2.5em 0; border: 0;
  background-color: var(--markdown-line-color, var(--mdf-border-color-light, #dfe2e5));
}
.markdown-content-container a {
  text-decoration: none; transition: border-color 0.2s ease-in-out;
  color: var(--markdown-link-color, var(--markdown-text-color, var(--mdf-color-primary, #1b45c0)));
  border-bottom: 1px solid var(--markdown-line-color, var(--mdf-border-color-light, #dfe2e5));
}
.markdown-content-container a:hover {
  text-decoration: none;
  border-bottom-color: var(--markdown-link-color, var(--markdown-text-color, var(--mdf-color-primary, #1b45c0)));
}
.markdown-content-container .markdown-figure {
  margin: 2em auto; padding: 0; max-width: 100%;
}
.markdown-content-container .markdown-figure-centered { display: table; margin-left: auto; margin-right: auto; }
.markdown-content-container .markdown-figure img {
   display: block; margin-left: auto; margin-right: auto;
   margin-bottom: 0.5em; max-width: 100%; height: auto; border-radius: 8px;
}
.markdown-content-container .markdown-figure figcaption {
  display: block; font-size: 0.9em; text-align: center;
  line-height: 1.4; margin-top: 0.5em; opacity: 0.8;
  color: var(--markdown-text-color, var(--mdf-color-text-muted, #666));
}
.markdown-content-container > p > img:only-child {
    display: block; margin: 1.5em auto; max-width: 100%;
    width: 600px;
    height: auto; border-radius: 30px;
}

.markdown-content-container table {
  width: auto;
  min-width: 0;
  max-width: 100%;
  margin-left: 0;
  margin-right: auto;
  display: table;
  margin-bottom: 1em; /* Dein Standardabstand */
  border-collapse: collapse;
  /* WICHTIG: Radius und Overflow beibehalten, damit Zellinhalte/Hintergründe an den Ecken abgeschnitten werden */
  border-radius: 25px; /* Dein gewünschter Radius */
  overflow: hidden;   /* Sehr wichtig für diesen Effekt! */
}

.markdown-content-container th,
.markdown-content-container td {
  padding: 10px 14px;
  text-align: left;
  /* Die untere Linie dient als Trenner zwischen den Zeilen */
  border-bottom: 1px solid var(--markdown-line-color, var(--mdf-border-color-light, #dfe2e5));
  /* Keine seitlichen oder oberen Rahmen für die Zellen, da overflow:hidden auf der Tabelle die Kanten formt */
  border-left: none;
  border-right: none;
  border-top: none;
  background-color: var(--markdown-callout-bg-color, var(--mdf-callout-bg, transparent));
}


.markdown-content-container thead th {
  font-weight: 600; /* Fette Schrift für den Header */
}

/* Entferne die untere Linie von der letzten Datenzeile, da die Tabelle dort "endet" */
.markdown-content-container tbody tr:last-child td,
.markdown-content-container tbody tr:last-child th { /* Falls th im tbody vorkommt */
  border-bottom: none;
}

.markdown-content-container aside {
  padding: 1.5em 1.8em; margin: 2em auto;
  border-radius: 30px; border-width: 1px; border-style: solid;
  background-color: var(--markdown-callout-bg-color, var(--mdf-callout-bg, transparent));
  border-color: var(--markdown-callout-border-color, var(--mdf-callout-border, var(--markdown-text-color, #333)));
  position: relative;
  max-width: 100%;
}
.markdown-content-container aside p { margin-bottom: 0.8em; line-height: 1.5; }
.markdown-content-container aside p:last-child { margin-bottom: 0; }
.markdown-content-container aside strong,
.markdown-content-container aside b { font-weight: 600; }
.markdown-content-container aside.is-light {
    background-color: rgba(from var(--markdown-text-color, #000) r g b / 0.03);
    border-color: rgba(from var(--markdown-text-color, #000) r g b / 0.1);
}
.markdown-content-container .chip {
  display: inline-block; padding: var(--mdf-chip-padding-y, 0.18em) var(--mdf-chip-padding-x, 0.85em);
  font-size: var(--mdf-chip-font-size, 0.85em); font-weight: 300; line-height: 1.4;
  text-align: center; white-space: nowrap; vertical-align: baseline;
  border-radius: var(--mdf-chip-border-radius, 1em);
  border-width: var(--mdf-chip-border-width, 1px); border-style: solid;
  border-color: var(--markdown-line-color, currentColor);
  color: var(--markdown-text-color, currentColor);
  background-color: transparent;
  text-decoration: none; transition: var(--mdf-btn-transition, all 0.2s ease-in-out);
}
.markdown-content-container .chip.chip-blue { border-color: var(--mdf-color-primary, #1b45c0); color: var(--mdf-color-primary, #1b45c0); }
.markdown-content-container .chip.chip-green { border-color: var(--mdf-color-success, #198754); color: var(--mdf-color-success, #198754); }
.markdown-content-container .chip.chip-secondary { border-color: var(--mdf-color-secondary, #6c757d); color: var(--mdf-color-secondary, #6c757d); }
.markdown-content-container .chip:hover { filter: brightness(85%); }
.markdown-content-container a.chip:hover { filter: brightness(85%); text-decoration: none; border-bottom-style: solid; border-bottom-width:var(--mdf-chip-border-width, 2px); }
/* markdown.css oder deine globale CSS-Datei */

/* markdown.css oder deine globale CSS-Datei */

/* 1. Basis-Button (.btn) */
.markdown-content-container .btn {
  display: inline-block;
  padding: 0.6em 1.6em; /* Standard-Padding */
  font-family: inherit;
  font-size: 0.9em;     /* Standard-Schriftgröße */
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  text-decoration: none !important;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border-radius: 50em; /* Pillenform */
  outline: none !important;

  /* Standardmäßig transparenter Hintergrund und Rahmen */
  background-color: transparent;
  /* Rahmenstärke für alle Buttons gleich, Farbe wird von Modifikatoren gesetzt oder bleibt transparent */
  border: 1px solid transparent; /* Beispiel: 2px Rahmenstärke, anpassen nach Wunsch */

  /* Standardtextfarbe (wird von Farb-Modifikatoren überschrieben, wenn nötig) */
  color: var(--markdown-text-color, #333);

  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, filter 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* Standard Hover/Fokus für alle Buttons, die keinen eigenen definieren (z.B. für den Default-Button) */
.markdown-content-container .btn:hover:not(.outlined):not(.colored), /* Gilt nicht, wenn eine spezifischere Hover-Regel existiert */
.markdown-content-container .btn:focus:not(.outlined):not(.colored) {
  filter: brightness(90%); /* Fallback-Hover, wenn keine Farbe gesetzt ist */
}


/* 2. Größenmodifikator (.btn-large) */
.markdown-content-container .btn.large {
  padding: 0.9em 2.2em;  /* Größeres Padding */
  font-size: 1.05em;     /* Etwas größere Schrift */
}


/* 3. Farbiger Button (.btn-colored) - Beispiel mit Rot */
/* Diese Klasse setzt die Hintergrundfarbe, Textfarbe und Rahmenfarbe */
.markdown-content-container .btn.colored {
  background-color: #e74c3c; /* Beispielrot */
  color: white;
  border-color: #e74c3c; /* Rahmen in gleicher Farbe wie Hintergrund */
}
.markdown-content-container .btn.colored:hover,
.markdown-content-container .btn.colored:focus {
  background-color: #c0392b; /* Dunkleres Rot für Hover/Fokus */
  border-color: #c0392b;
  filter: none; /* Deaktiviere generischen Filter, da wir explizite Farben haben */
}

.markdown-content-container .btn.green {
  background-color: #2ecc71; color: white; border-color: #2ecc71;
}
.markdown-content-container .btn.green:hover,
.markdown-content-container .btn.green:focus {
  background-color: #27ae60; border-color: #27ae60; filter: none;
}

/* 4. Outline Button (.outlined) */
/* Diese Klasse macht den Hintergrund transparent und verwendet die Textfarbe für den Rahmen.
   Sie wird MIT einer Farbklasse kombiniert, um die Farbe zu bestimmen. */
.markdown-content-container .btn.outlined {
  background-color: transparent;
  /* Die Textfarbe und Rahmenfarbe wird von der kombinierten Farbklasse (z.B. .btn-colored) geerbt
     oder hier explizit gesetzt, wenn .btn-outline allein verwendet wird. */
  /* Beispiel: Wenn .btn-outline allein verwendet wird, nimmt es die Standard-Textfarbe */
  color: var(--markdown-text-color, #333); /* Wird von .btn-colored etc. überschrieben */
  border-color: currentColor; /* Rahmen nimmt die aktuelle Textfarbe an */
}

/* Hover/Fokus für Outline-Buttons: Füllt den Button mit der Farbe, die
   die kombinierte Farbklasse für ihren Hintergrund verwenden würde, und macht Text hell. */

/* Outline-Button kombiniert mit .btn-colored (Beispiel Rot) */
.markdown-content-container .btn.outlined.colored {
  color: #e74c3c; /* Textfarbe im Normalzustand ist die Akzentfarbe */
  border-color: #e74c3c; /* Rahmenfarbe ist die Akzentfarbe */
}
.markdown-content-container .btn.outlined.colored:hover,
.markdown-content-container .btn.outlined.colored:focus {
  background-color: #e74c3c; /* Füllt sich mit der Akzentfarbe */
  color: white; /* Text wird hell für Kontrast */
  border-color: #e74c3c; /* Rahmen bleibt in Akzentfarbe oder wird mit Hintergrund identisch */
}

/* Beispiel für Outline-Button kombiniert mit einer anderen hypothetischen Farbklasse .btn-blue */
/*
.markdown-content-container .btn.outlined.btn-blue {
  color: #3498db;
  border-color: #3498db;
}
.markdown-content-container .btn.outlined.btn-blue:hover,
.markdown-content-container .btn.outlined.btn-blue:focus {
  background-color: #3498db;
  color: white;
  border-color: #3498db;
}
*/

/* Standard-Button (dein ursprünglicher .btn-default, jetzt einfach nur .btn ohne weitere Farb/Stilklassen) */
/* Dieser Button verwendet die dynamische --markdown-callout-bg-color */
.markdown-content-container .btn:not(.colored):not(.outlined) { /* Gilt nur, wenn keine andere Farb- oder Stilklasse gesetzt ist */
  background-color: var(--markdown-callout-bg-color, transparent);
  color: var(--markdown-text-color, #333);
  border-color: transparent; /* Macht ihn effektiv rahmenlos */
}
.markdown-content-container .btn:not(.colored):not(.outlined):hover,
.markdown-content-container .btn:not(.colored):not(.outlined):focus {
  filter: brightness(90%); /* Standard-Hover für den "Default"-Look */
}


/* Focus-Visible für alle Buttons (Barrierefreiheit) */
.markdown-content-container .btn:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(var(--mdf-color-primary-rgb, 27, 69, 192), 0.4);
  /* outline: none !important; ist schon in .btn gesetzt */
}

/* Standard- Video mit Cover, Play-Button und Beschreibung */
.markdown-content-container .custom-video-container {
  max-width: 500px; /* WUNSCHBREITE: Setze hier die maximale Breite für dein Video */
  margin-left: auto;  /* Zentriert den Container */
  margin-right: auto; /* Zentriert den Container */
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}

.markdown-content-container .video-wrapper {
  position: relative;
  cursor: pointer;
  background-color: #000;
  border-radius: 30px; /* NEU: Abgerundete Ecken für den Wrapper (und damit das Video) */
  overflow: hidden;    /* Stellt sicher, dass Video und Poster die Rundung respektieren */
}

.markdown-content-container .video-wrapper video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit; /* Erbt den Radius vom Wrapper */
  /* NEU: Transition für das Video selbst, falls es "einblendet" nachdem das Poster weg ist */
  transition: opacity 0.5s ease-in-out;
}

.markdown-content-container .custom-play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: transparent;
  border: none;
  border-radius: 50%; /* Macht den Button-Hintergrund rund, falls er eine Farbe hätte */
  padding: 0;
  cursor: pointer;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, transform 0.2s ease;

  /* NEU: Fokus-Outline entfernen */
  outline: none !important; /* Entfernt die Standard-Browser-Outline */
  -webkit-tap-highlight-color: transparent; /* Für mobile Browser, um das Tipp-Feedback zu entfernen */
}

.markdown-content-container .custom-play-button:focus-visible {
  /* Optional: Ein alternativer Fokus-Stil, der nicht so aufdringlich ist */
  /* box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5); */ /* Beispiel: Heller Schein */
}

.markdown-content-container .custom-play-button svg {
  width: 60%;
  height: 60%;
  /* fill: white; /* Füllung wird jetzt direkt am Polygon gesetzt */
  /* opacity: 0.7; /* Opazität wird jetzt direkt am Polygon gesetzt */
}

.markdown-content-container .custom-play-button svg .play-arrow {
  fill: white;
  opacity: 0.75; /* Leicht höhere Opazität für bessere Sichtbarkeit */
  stroke: white; /* Strich in der gleichen Farbe wie die Füllung */
  stroke-width: 5; /* Experimentiere mit der Strichstärke (z.B. 3 bis 6) */
  stroke-linejoin: round; /* Rundet die "Ecken" des Strichs ab */
}

.markdown-content-container .custom-play-button:hover svg .play-arrow {
  opacity: 0.95;
  /* stroke-width bleibt gleich oder wird auch angepasst */
}

.markdown-content-container .custom-play-button:hover {
  /* background-color: transparent; /* Bleibt transparent */
  transform: translate(-50%, -50%) scale(1.15); /* Stärkerer Zoom-Effekt */
  opacity: 0.9; /* Pfeil wird beim Hover etwas deckender */
}
.markdown-content-container .custom-play-button:hover svg {
  opacity: 0.95;
}


/* Wenn das Video spielt, den benutzerdefinierten Play-Button SMOOTH ausblenden */
.markdown-content-container .video-wrapper.video-playing .custom-play-button {
  opacity: 0;
  visibility: hidden;
  pointer-events: none; /* Verhindert Interaktion, wenn unsichtbar */
}

/* Das Poster ist Teil des Video-Elements. Wenn das Video startet, wird das Poster automatisch
   durch den ersten Frame des Videos ersetzt. Wir können das Poster nicht separat ausblenden,
   aber wir können den Play-Button darüber ausblenden.
   Wenn das Video selbst einen "Fade-In" haben soll, nachdem das Poster weg ist,
   könnte man es initial auf opacity: 0 setzen und dann per JS ändern. Das wird aber komplexer.
   Der Übergang des Play-Buttons ist hier der primäre "Smooth"-Effekt.
*/

.markdown-content-container .video-description {
  font-size: 0.9em;
  color: var(--markdown-text-color, #555);
  text-align: center;
  margin-top: 0.8em;
  padding: 0 10px;
  line-height: 1.5;
}

/* =================================================== */
/* === Full Bleed Marquee Slider Styles === */
/* =================================================== */

.markdown-content-container .full-bleed-marquee-slider {
  width: 100vw; /* Volle Viewport-Breite */
  position: relative; /* Für die left/transform Zentrierung und absolute Kinder */
  left: 50%;
  transform: translateX(-50%);
  margin-top: 2em;    /* Vertikaler Abstand über dem Slider */
  margin-bottom: 2em; /* Vertikaler Abstand unter dem Slider */
  overflow: hidden;   /* WICHTIG: Schneidet die Slides an den Bildschirmkanten ab */
  cursor: grab;       /* Mauszeiger für "greifbar" */
  box-sizing: border-box;
}

.markdown-content-container .full-bleed-marquee-slider:active {
  cursor: grabbing; /* Mauszeiger während des Ziehens/Swipens */
}

.markdown-content-container .marquee-track {
  display: flex; /* Ordnet die Slides nebeneinander an */
  list-style: none;
  padding: 0;
  margin: 0;
  /* Die Breite ('width') des Tracks wird von JavaScript dynamisch gesetzt */
  /* Die Transformation ('transform') wird von JavaScript für die Bewegung gesetzt */
  will-change: transform; /* Performance-Hinweis für den Browser */
  /* Die 'transition'-Eigenschaft wird von JavaScript dynamisch gesetzt/entfernt */
  /* KEINE transition-Eigenschaft hier fest definieren! */
}

.markdown-content-container .marquee-slide {
  flex-shrink: 0; /* Verhindert, dass Slides schrumpfen, wenn nicht genug Platz ist */
  box-sizing: border-box;
  width: 280px; /* Feste Breite für Desktop-Slides (anpassen nach Wunsch) */
  margin-right: 20px; /* Abstand zwischen den Slides (anpassen nach Wunsch) */
  /* Keine Transition hier, der Hover-Effekt ist auf .slide-link oder img */
}

.markdown-content-container .marquee-slide .slide-link {
  display: block;
  position: relative; /* Für das Titel-Overlay */
  text-decoration: none;
  color: inherit;
  border-radius: 30px; /* Gewünschter Radius für die Boxen */
  overflow: hidden;    /* Stellt sicher, dass das gezoomte Bild die Rundung nicht sprengt */
  background-color: #e9e9e9; /* Fallback-Hintergrund, falls Bild nicht lädt */
  height: 200px; /* Feste Höhe für alle Slides (anpassen nach Wunsch) */
  /* Keine Transition für transform hier, der Zoom ist auf dem Bild */
}

/* Kein direkter Hover-Effekt auf .slide-link, wenn nur das Bild zoomen soll */
/*
.markdown-content-container .marquee-slide .slide-link:hover {
  z-index: 5; /* Kann bleiben, falls das gezoomte Bild über Nachbarn ragen soll, aber Zoom ist auf img */
/* }
*/

.markdown-content-container .marquee-slide img {
  display: block;
  width: 100%;
  height: 100%; /* Bild füllt die feste Höhe des .slide-link Containers */
  object-fit: cover; /* Skaliert das Bild, um die Fläche zu füllen, behält Seitenverhältnis bei, kann beschneiden */
  border-radius: inherit; /* Erbt den Radius vom .slide-link Container */
  pointer-events: none; /* Verhindert, dass das Bild Swipe-Events "schluckt" */
  transition: transform 0.3s ease-out; /* Transition für den Zoom des Bildes */
}

/* Hover-Zoom-Effekt NUR für das Bild */
.markdown-content-container .marquee-slide .slide-link:hover img {
  transform: scale(1.1); /* Zoomfaktor 10% */
}

/* =================================================== */
/* === Marquee Slider - Text Overlay Styles (Optimiert) === */
/* =================================================== */

/* Hauptcontainer für das Overlay */
.markdown-content-container .full-bleed-marquee-slider .marquee-slide .slide-link .slide-title-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: auto; /* Passt sich dem Inhalt an, wenn Kinder keine volle Breite erzwingen */
  max-width: calc(100% - 30px); /* Berücksichtigt 2x 15px Padding */
  padding: 15px;
  box-sizing: border-box;

  color: white; /* Standardtextfarbe für alle Kinder */
  text-shadow: 0px 1px 4px rgba(0,0,0,0.7);
  background-color: transparent;
  pointer-events: none; /* Wichtig, damit Klicks/Swipes auf den Link durchgehen */

  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Standard-Linksbündigkeit für Flex-Items */
  /* justify-content: flex-start; /* Standardmäßig obenbündig */
}

/* Styling für den Haupttitel (h3) im Overlay */
.markdown-content-container .full-bleed-marquee-slider .marquee-slide .slide-link .slide-title-overlay > .overlay-title {
  font-size: 1.2em;   /* Anpassen nach Wunsch */
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 0.25em 0; /* Abstand nur nach unten, wenn weitere Elemente folgen */
  color: inherit; /* Erbt 'white' vom Parent */
}

/* Styling für den Subtitel (p) im Overlay */
.markdown-content-container .full-bleed-marquee-slider .marquee-slide .slide-link .slide-title-overlay > .overlay-subtitle {
  font-size: 0.9em;
  font-weight: 400;
  line-height: 1.3;
  margin: 0 0 0.5em 0;
  opacity: 0.9;
  color: inherit; /* Erbt 'white' vom Parent */
}

/* Styling für zusätzliche Infos (span) im Overlay */
.markdown-content-container .full-bleed-marquee-slider .marquee-slide .slide-link .slide-title-overlay > .overlay-info {
  font-size: 0.8em;
  font-weight: 400;
  line-height: 1.3;
  margin: 0;
  opacity: 0.75;
  color: inherit; /* Erbt 'white' vom Parent */
}

/* --- Responsive Anpassungen für Slide-Breite und -Höhe --- */
@media (max-width: 768px) {
  .markdown-content-container .marquee-slide {
    width: 220px; /* Feste Breite für Tablets (anpassen) */
    margin-right: 15px; /* Abstand auf Tablets anpassen */
  }
  .markdown-content-container .marquee-slide .slide-link {
    height: 160px; /* Höhe auf Tablets anpassen */
    border-radius: 20px; /* Ggf. Radius auf Tablets anpassen */
  }
  .markdown-content-container .marquee-slide .slide-title-overlay {
    font-size: 1em; /* Schriftgröße des Overlays auf Tablets anpassen */
    padding: 10px;  /* Padding des Overlays auf Tablets anpassen */
    max-width: calc(100% - 20px); /* (2x 10px Padding) */
  }
}

@media (max-width: 480px) {
  .markdown-content-container .marquee-slide {
    width: 180px; /* Feste Breite für Mobile (anpassen) */
    margin-right: 10px; /* Abstand auf Mobile anpassen */
  }
  .markdown-content-container .marquee-slide .slide-link {
    height: 140px; /* Höhe auf Mobile anpassen */
    border-radius: 15px; /* Ggf. Radius auf Mobile anpassen */
  }
   .markdown-content-container .marquee-slide .slide-title-overlay {
    font-size: 0.9em; /* Schriftgröße des Overlays auf Mobile anpassen */
    padding: 8px;     /* Padding des Overlays auf Mobile anpassen */
    max-width: calc(100% - 16px); /* (2x 8px Padding) */
  }
}

/* --- Full Bleed Image Pair (von vorher) --- */
.markdown-content-container .full-bleed-image-pair {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 2em;
  margin-bottom: 2em;
  box-sizing: border-box;
  min-height: 80px; /* Mindesthöhe, an Bildhöhe anpassen */
}
.markdown-content-container .full-bleed-image-pair figure {
  margin: 0;
  padding: 0;
  width: 80px; /* Breite der einzelnen Bilder am Rand */
  height: auto;
  position: absolute;
  top: 50%; /* Vertikale Zentrierung */
  transform: translateY(-50%);
}
.markdown-content-container .full-bleed-image-pair .image-pair-left {
  left: 0;
}
.markdown-content-container .full-bleed-image-pair .image-pair-right {
  right: 0;
}
.markdown-content-container .full-bleed-image-pair img {
  display: block;
  width: 100%;
  height: auto; /* Oder feste Höhe + object-fit */
  object-fit: cover;
}
.markdown-content-container .full-bleed-image-pair figcaption {
  text-align: center;
  font-size: 0.8em;
  padding-top: 0.3em;
  color: var(--markdown-text-color, var(--markdown-text-color-fallback));
  line-height: 1.3;
}