/* =========================================================================
   0. Farb-Variablen
   ========================================================================= */
:root {
  --white:      #ffffff;
  --orange:     #f07c00;
  --bg-main:    #262626;
  --bg-panel:   #333;
  --text-light: #f4f4f4;
  --text-mid:   #bbb;
  --text-dark:  #888;
  --desktop-nav-h: 56px;

  /* Mobile Headerhöhe für exakte Ausrichtung Logo/Lupe/Burger */
  --mobile-header-h: 92px;   /* minimal höher = Icons nicht am oberen Rand */
}
/* =========================================================================
   1. Grundlayout
   ========================================================================= */
body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  /*font-family: 'Literata', Georgia, serif;*/
  background-color: var(--bg-main);
  color: #e5e5e5;
  font-size: 0.9rem;
  font-weight: 300;
  font-style: normal;
  line-height: 1.55; /* etwas luftiger für Lesen in Serif */
}


/* kleine Hilfs-Variable fürs mobile Logo */
@media (max-width: 768px){
  :root {
    --mobile-logo-h: 72px;   /* Logo größer */
    --mobile-icon-h: 32px;   /* Lupe/Hamburger etwas kleiner */
  }
}


html { background-color: var(--bg-main); }

.save-banner {
  position: fixed;
  top: 0;
  width: 100%;
  background: #3598a6;
  color: #ffffff;
  text-align: center;
  padding: 0.8em;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 0.95rem;
  z-index: 13100;
  cursor: pointer;
}

.title-link h1 {
  font-family: 'Literata', sans-serif;
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1.1;
  margin: 0;
  margin-top: -0.75rem;
  color: #f0f0f0;
  padding: 0;
}

.logo-text-image {
  height: 120px;
  width: auto;
  display: block;
  margin-left: -2.5rem;  /* näher an das Mumin-Logo */
}

h2, h3, h4 {
  /*font-family: 'Montserrat', 'Oswald', 'Helvetica Neue', Arial, sans-serif;*/
  font-family: 'Poppins', sans-serif;
  font-size: 1.3rem;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.02em;
  line-height: 1.2;  /* wieder auf lesbaren Wert setzen */
}
/* =========================================================================
   2. Header & Logo
   ========================================================================= */
header {
  background-color: var(--bg-main);
  padding: 1rem 0;
  text-align: center;
}

/* Desktop: Titel wieder mittig – Spaltenlayout nur dort */
@media (min-width: 769px){
  .logo-row{
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
  }
  .title-link{ display:flex; align-items:center; justify-content:center; }
}

/* ======= MOBILE: Header und Nav auf eine Linie bringen ======= */
@media (max-width: 768px){
  /* Header fixieren (immer oben sichtbar) */
  header{
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 13000;
    background: var(--bg-main);
    padding: 0;
    height: var(--mobile-header-h);
    display: flex; align-items: center;
    /* GPU-Layer, um Flickern beim Schließen zu vermeiden (Chrome/Android) */
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
  }

  header .logo-row {
    height: 100%;
    display:flex; align-items:center;
    gap: .9rem;
    padding: 0 1.2rem;        /* etwas mehr Abstand zwischen Logo und Icons */
  }
  .title-link { display: none !important; }                       /* Titel weg */
  /* Logo exakt auf Headerhöhe */
  .logo-row > a:first-child {
    height: var(--mobile-logo-h);
    position: relative;
    z-index: 13003;        /* über der fixen nav */
    pointer-events: auto;  /* Klicks sicher durchlassen */
  }
  .logo-row > a:first-child img.logo { max-height: var(--mobile-logo-h); height: auto; }
}

 /* Container für das Mumin‑Logo (erstes <a> in .logo-row) */
 .logo-row > a:first-child {
   position: relative;
   display: inline-block;
   height: 130px;       /* exakt wie das Original-Logo */
   width: auto;
   background-position: center bottom;
   background-image: url("/static/img/Muminlogo2.png");
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center center
 }
 
/* Logo-Größe mobil deutlich kleiner */
@media (max-width: 768px){
  .logo-row > a:first-child {
    height: var(--mobile-logo-h);
    position: relative;
    z-index: 13001;                  /* über der fixen nav */
    pointer-events: auto;            /* Klicks sicher durchlassen */
  }
  .logo-row > a:first-child img.logo { max-height: var(--mobile-logo-h); }
}


.logo-row > a:first-child img.logo {
   max-height: 100%;
   height: auto;
   display: block;
   z-index: 0;
 }

/* ───────────────────────────────────────────────────────────────────────── */
/* Mumin‑Logo beim Hover tauschen                                            */
/* ───────────────────────────────────────────────────────────────────────── */
 /* nur den ersten Link (das Logo), nicht den Titel betreffen */
 .logo-row > a:first-child:hover img.logo {
   opacity: 0;
 }

.logo-row > a:first-child:hover {
  background: url("/static/img/Muminlogo2.png") no-repeat center center;
  background-size: contain;
  /* entfernt pointer-events, sonst verschwindet Hover-Zustand */
}

.title-link {
  margin: 0;
  display: flex;
  align-items: center;
  text-decoration: none;
  color: white;
}

/* =========================================================================
   3. Navigation (Desktop)
   ========================================================================= */

nav {
  background-color: #f07c00;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.6em 0;
}

/* ======= NAV-MOBILE: im Header ausrichten (Logo, Lupe, Burger auf einer Linie) ======= */
@media (max-width: 768px){

  /* Logo in mobiler Ansicht anklickbar halten */
  .logo a, .logo-link {
    display: inline-block;
    position: relative;
    z-index: 13000; /* über allen Overlays */
    pointer-events: auto; /* Klicks zulassen */
  }


  /* Header bleibt FIXED: Hintergrund + Logo kleben oben */
  header { position: fixed; top: 0; left: 0; right: 0; z-index: 13000; }
  /* Nav-Icons im fixen Header rechts andocken */
  nav {
    position: fixed;
    top: 0;
    right: 0;
    left: auto;                      /* keine linke Kante -> schrumpft */
    width: auto;              /* nur so breit wie der Inhalt */
    height: var(--mobile-header-h);
    background: transparent !important;
    padding: 0;
    display: flex;
    align-items: center;             /* vertikal zu Logo ausmitteln */
    transform: none !important;
    z-index: 13002;
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
  }

  /* Icons rechtsbündig, mit Abstand zum Rand und zueinander */
  nav ul.navbar {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2.6rem;
    padding: 0 1.25rem;
    margin: 0;
    width: auto;          /* ← nur so breit wie die Icons */
    max-width: none;
    margin-left: auto;    /* rechts andocken */
  }

  /* Icons exakt vertikal mittig und größer (ohne line-height Tricks) */
  nav ul.navbar .icon-button,
  nav ul.navbar .hamburger{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height: var(--mobile-logo-h);   /* exakt wie Logo-Container */
    line-height: normal;
    transform: translateY(-1px);    /* optische 1px-Korrektur für SVGs */
  }

  /* Icon-Größe konsistent über Variable */
  nav ul.navbar .icon-button svg{ width: var(--mobile-icon-h); height: var(--mobile-icon-h); } 

  /* alle Reiter weg: Themen/Regionen/Quellen/Merkliste */
  nav ul.navbar > li:not(.search-icon):not(.hamburger-icon) { display: none !important; }
  /* Reihenfolge: erst Lupe, dann Burger */
  nav ul.navbar .search-icon { order: 1; }
  nav ul.navbar .hamburger-icon { order: 2; }
  /* ältere Mobile-Regeln übersteuern: Icons NICHT strecken */
  nav ul.navbar li { flex: 0 0 auto !important; margin: 0 !important; }
  nav ul.navbar { overflow: visible !important; white-space: normal !important; }
}

nav ul.navbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    list-style: none;
    margin: 0 auto;
    padding: 0.5rem 1rem;
    max-width: 900px;
    justify-content: center;
    position: relative;
}
nav ul.navbar li {
  position: relative;
}
/* Desktop: Such-Icon rechts neben Merkliste, nicht absolut positioniert */
@media (min-width: 769px) {
  nav ul.navbar li.search-icon {
    margin-left: auto;
    position: relative;
    top: 2px;
  }
}
nav ul.navbar li a {
  color: white;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
nav ul.navbar li a:hover {
  color: #ddd;
}

nav ul.navbar li button.dropdown-toggle:hover {
  color: #ddd;
}

/* Android: Wenn Dropdown offen, Text NIEMALS ausgrauen */
html.android body.dropdown-open nav ul.navbar li a,
html.android body.dropdown-open nav ul.navbar li button.dropdown-toggle {
  color: #fff !important;
}
html.android body.dropdown-open nav ul.navbar li a:hover,
html.android body.dropdown-open nav ul.navbar li a:focus,
html.android body.dropdown-open nav ul.navbar li button.dropdown-toggle:hover,
html.android body.dropdown-open nav ul.navbar li button.dropdown-toggle:focus {
  color: #fff !important;
}
html.android body.dropdown-open .dropdown-content li a,
html.android body.dropdown-open .dropdown-content li a:hover,
html.android body.dropdown-open .dropdown-content li a:focus,
html.android body.dropdown-open .dropdown-content li a:active {
  color: #fff !important;
}

/* ─── Dropdown-Trigger als Button stylen wie Link ───────────────────────── */
.dropdown > button.dropdown-toggle {
  background: none;
  border: none;
  color: white;
  font: inherit;
  cursor: pointer;
  padding: 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  /* Touch-Verbesserungen (Android) */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  width: 100%;   /* stört Desktop-Layout nicht, weil <li> die Breite vorgibt */
}

/* 1) Nur Top‑Level‑Nav‑Links uppercase */
nav ul.navbar > li > a {
  text-transform: uppercase;
}

nav ul.navbar > li > a,
nav ul.navbar > li > button.dropdown-toggle {
  font-size: 1rem;
}

/* 2) Dropdown‑Einträge wieder “normal case” */
nav ul.navbar li .dropdown-content li a {
  text-transform: none;
}

/* Dropdown (keine Bullets) */
.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  margin-top: 4px;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  background-color: var(--orange);
  min-width: 180px;
  max-height: 80vh;            /* ↑ höher auf Desktop */
  overflow-y: auto;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  z-index: 999;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Sichtbar, wenn JS die Klasse .show auf <li class="dropdown"> setzt */
.dropdown.show > .dropdown-content {
  display: block !important;
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Android: Dropdown fix stabilisieren (eigene Ebene, kein Transition-Flicker) */
html.android .dropdown-content {
  transition: none !important;         /* keine Opacity/Transform-Transition */
  transform: none !important;
  will-change: auto !important;
  backface-visibility: hidden;
  contain: layout paint;               /* isoliert Repaints */
  isolation: isolate;
  box-shadow: none !important;         /* kein Abdunkeln durch Shadow */
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* Mobile: Dropdowns höher machen */
@media (max-width: 768px) {
  .dropdown-content { max-height: 85vh; }
}

/* Nur vertikales Scrollen erlauben (global) */
html, body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

/* Während des Öffnen-Zeitfensters: keine Klicks auf Einträge zulassen */
.dropdown.opening .dropdown-content {
  pointer-events: none !important;
}

.dropdown.opening, .dropdown.opening * {
  -webkit-tap-highlight-color: transparent;
}

/* Hover-Öffnen nur auf Geräten mit Hover (Desktop) */
@media (hover: hover) {
  .dropdown:hover > .dropdown-content,
  .dropdown-content:hover {
    display: block !important;
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
}
 
.dropdown-content li a {
  display: block;
  padding: 0.4rem 1rem;
  color: white;
  text-decoration: none;
}
.dropdown-content li a:hover {
  background-color: #d45500;
}

/* =========================================================================
   4. Hauptinhalt & Artikel-Layouts
   ========================================================================= */
main {
  max-width: 900px;
  margin: 2rem auto;
  padding: 0 1rem;
}
.legal-content {
  line-height: 1.6;
}
.legal-content a {
  color: var(--text-light);
}
.legal-content a:hover,
.legal-content a:focus {
  color: var(--white);
}
.legal-content h1 {
  margin-bottom: 1rem;
}
.legal-content section {
  margin-bottom: 1.5rem;
}
.article-wrapper {
  display: flex;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 2rem;
  position: relative;
  background-color: var(--bg-panel);
  align-items: stretch;
}

/* =====================================================================
   Hover‑Effekte für Artikel‑Karten (Desktop)
   ===================================================================== */
@media (hover: hover) and (min-width: 769px) {
  .article-wrapper {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    will-change: transform;
  }
  .article-wrapper:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
  }
}

/* --- Nur TEXT-ARTIKEL: fixe Höhe + quadratisches Logo --- */
.article-wrapper:not(.image-top) {
  height: 240px;
  flex-direction: row;
}
.article-wrapper:not(.image-top) .source-panel-link {
  flex: 0 0 240px;  /* quadratisch */
  text-decoration: none;
  display: block;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.article-wrapper:not(.image-top) .source-panel-link:hover {
  opacity: 0.9;
}
.article-wrapper:not(.image-top) .source-panel {
  width: 100%;
  height: 100%;
  background-color: #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}
.article-wrapper:not(.image-top) .article-card {
  flex: 1;
  padding: 1.2em 1.6em 3em;
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Summary füllt verfügbaren Platz und wird bei Bedarf abgeschnitten (nur Desktop) */
@media (min-width: 769px) {
  .article-wrapper:not(.image-top) .article-card .summary {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }
}

/* Bookmark-Icon im Text-Artikel */
.merken-bottom-right {
  position: absolute;
  bottom: 0.8em;
  right: 0.5em;
}

/* Logo in Text-Artikel */
.source-panel-logo {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  display: block;
  /* GPU-Beschleunigung gegen Wobble beim Hover */
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Audio-Overlay im Source-Panel (Desktop-Kachel ohne Bild) */
.source-panel-link.has-audio {
  color: #fff;
}

.source-panel-link.has-audio .audio-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  color: currentColor;
}

.source-panel-link.has-audio:hover .audio-overlay,
.source-panel-link.has-audio:focus-visible .audio-overlay {
  opacity: 1;
}

.source-panel-link.has-audio .audio-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.source-panel-link.has-audio .audio-icon-pause {
  display: none;
}

.source-panel-link.has-audio.audio-playing .audio-icon-play {
  display: none;
}

.source-panel-link.has-audio.audio-playing .audio-icon-pause {
  display: flex;
}

/* Audio-Playerleiste unter der Navbar (Desktop) */
.audio-player-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1.25rem;
  background: #1f1f1f;
  color: #f2f2f2;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.audio-player-toggle,
.audio-player-close {
  background: transparent;
  border: 0;
  color: #fff; /* Icons immer weiß */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0.2rem;
}

.audio-player-toggle:focus-visible,
.audio-player-close:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.audio-player-icon {
  display: none;
}

.audio-player-bar.is-playing .audio-player-icon-pause,
.audio-player-bar.is-paused .audio-player-icon-play {
  display: inline-flex;
}

.audio-player-text {
  flex: 1;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  color: #999; /* Grauer Text */
}

.audio-player-content {
  display: flex;
  flex: 1;
}

.audio-player-bar--mobile {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 0.65rem 0.75rem;
  z-index: 200;
  border-bottom: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  transform: translateY(100%);
  transition: transform 220ms ease;
}

.audio-player-bar--mobile.is-open {
  transform: translateY(0);
}

.audio-player-bar--mobile .audio-player-text {
  font-size: 0.85rem;
}

.audio-player-bar--mobile .player-title-viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.audio-player-bar--mobile .player-title-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  will-change: transform;
}

.audio-player-bar--mobile .player-title-text.is-scrolling {
  overflow: visible;
  text-overflow: clip;
  animation: player-title-marquee var(--player-title-duration, 32s) ease-in-out infinite;
}

.audio-player-bar--mobile .audio-player-toggle,
.audio-player-bar--mobile .audio-player-close {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
}

.audio-player-bar--mobile .audio-player-close svg {
  width: 20px;
  height: 20px;
}

.audio-player-bar--mobile .audio-player-close:hover {
  color: #dcdcdc;
}

.audio-player-bar--mobile .audio-player-close:active {
  color: #cfcfcf;
}

.audio-player-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
  cursor: pointer;
}

.audio-player-progress-bar {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--orange);
  transition: width 120ms linear;
}

.mobile-audio-toggle {
  background: transparent;
  border: 0;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem;
  cursor: pointer;
  position: relative;
  z-index: 2;
  pointer-events: auto;
}

.mobile-audio-toggle.invert-icon {
  color: #262626 !important;
}

.mobile-audio-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.audio-svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  stroke: none;
}

.audio-svg path {
  fill: currentColor;
  stroke: none;
}

@keyframes player-title-marquee {
  0%,
  10% {
    transform: translateX(0);
  }
  50%,
  60% {
    transform: translateX(calc(-1 * var(--player-title-offset, 0px)));
  }
  100% {
    transform: translateX(0);
  }
}

/* --- Nur BILD-ARTIKEL: unbeschränkte Höhe --- */
.article-wrapper.image-top {
  flex-direction: column;
  height: auto;
}
.article-header-image {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}
.article-card.full-width {
  flex: 1;
  padding: 1.5em 1.5em 3.5em;
  position: relative;
  height: auto;
}

@media (min-width: 769px) {
  .article-card.full-width.no-summary {
    padding-bottom: 2.2em;
  }
  /* Summary vertikal zentrieren zwischen Autor und Footer */
  .article-card.full-width {
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
  }
  .article-card.full-width .summary {
    flex: 1;
    display: flex;
    align-items: center;
    margin: 0.2em 0 0;
  }
}

/* Artikel-Texte (gemeinsam) */
.article-card h2 {
  margin: 0 0 0.25em;
  font-size: clamp(1.2rem, 1.6vw, 1.4rem);
  font-weight: 500;
  line-height: 1.35;
}

/* Mobil: etwas kleinere, leichtere Überschriften */
@media (max-width: 768px) {
  .article-card h2 {
    font-size: 1.15rem;
    font-weight: 500;
    line-height: 1.4;
  }
}

/* ----- Augen-Icon und Autor vertikal zentrieren ----- */
.read-meta-row {
  display: flex;
  align-items: center;
  gap: 0.5em;
  /* Optische Mitte zwischen Titel und Summary */
  margin: 0;
}

.read-meta-row .icon-spacer {
  width: 4px;
  height: 22px;
  flex-shrink: 0;
}

.read-meta-row .author {
  margin: 0;        /* entferne den unteren Margin */
  /* falls du noch etwas Abstand links vom Text möchtest: */
  /* margin-left: 0.25em; */
}

.article-card h2 a {
  color: white;
  text-decoration: none;
}
.article-card h2 a:hover {
  color: #ccc;
}
.article-card .author,
.article-card .meta {
  font-family: 'Inter', sans-serif;
  font-variation-settings: 'wght' 300, 'slnt' 0;
  text-transform: uppercase;   /* Versalien */
  letter-spacing: 0.06em;      /* etwas mehr Laufweite */
  font-size: 0.9rem;
  color: var(--text-mid);
  margin-bottom: 0.4em;
}

.article-card .byline {
  font-family: 'Inter', sans-serif;
  font-variation-settings: 'wght' 350, 'slnt' 0;
  font-size: 0.78rem;
  color: var(--text-mid);
  opacity: 0.75;
  margin: 0.2em 0 0.4em;
  letter-spacing: 0.02em;
}

.read-meta-row .author,
.read-meta-row .meta {
  margin: 0 !important;
}

/* ----- Translate Toggle (Connectas) ----- */
.article-card {
  position: relative;
}
.translate-toggle {
  position: absolute;
  top: 1.2em;
  right: 1.1em;
  padding: 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-mid);
  opacity: 0.6;
  transition: opacity 0.2s ease, color 0.2s ease;
  z-index: 10;
}
/* Mobile: weniger Abstand */
@media (max-width: 768px) {
  .translate-toggle {
    right: 0.5em;
  }
}
.translate-toggle:hover {
  opacity: 1;
  color: var(--text-light);
}
.translate-toggle.showing-original {
  color: var(--orange);
  opacity: 0.85;
}
.translate-toggle.showing-original:hover {
  opacity: 1;
}
.translate-icon {
  display: block;
  width: 22px;
  height: 22px;
}
/* Titel mit Platz für Icon rechts */
.article-card:has(.translate-toggle) h2 {
  padding-right: 2.2em;
}

.article-card .summary {
  margin: 0.25em 0 0;
  font-family: 'Source Serif 4', 'Merriweather', serif;
  font-weight: 300;
  font-style: normal;
  font-size: 1rem;      /* kleinerer Fließtext */
  line-height: 1.6;       /* großzügigerer Zeilenabstand */
  overflow: hidden;
}

/* =========================================================================
   5. Desktop-Footer für Bild-Artikel
   ========================================================================= */
.source-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5em 1.5em;
  box-sizing: border-box;
  background-color: var(--source-color, #444);
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}
.source-footer .footer-logo-link {
  display: block;
  flex-shrink: 0;
}
.source-footer .footer-logo {
  height: 1.5em;
  max-width: 250px;  /* Erhöht von 120px für bessere Lesbarkeit */
  object-fit: contain;
  display: block;
  flex-shrink: 0;
  /* GPU-Beschleunigung gegen Wobble beim Hover */
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: opacity 0.15s ease;
}
.source-footer .footer-logo-link:hover .footer-logo {
  opacity: 0.8;
}
.source-footer .merken-toggle {
  margin-right: 0;
}

/* =========================================================================
   Bianet-Sonderfall: Bookmark immer weiß, auch in Footern
   ========================================================================= */
[data-source="bianet"] .source-footer .merken-toggle,
[data-source="bianet"] .merken-bottom-right .merken-toggle {
  color: #fff !important;
}
[data-source="bianet"] .source-footer .merken-toggle svg,
[data-source="bianet"] .merken-bottom-right .merken-toggle svg {
  stroke: currentColor !important;
  fill: none !important;
}
[data-source="bianet"] .source-footer .merken-toggle.marked svg,
[data-source="bianet"] .merken-bottom-right .merken-toggle.marked svg {
  fill: currentColor !important;
  stroke: none !important;
}

/* Financial Times: Merkfähnchen dunkelbraun, Footer bleibt hell */
[data-source="financial-times"] :is(.source-footer, .mobile-footer, .merken-bottom-right) .merken-toggle {
  color: #33302e !important;
}

/* Jamhoor: Merkfähnchen rostrot/orange */
[data-source="jamhoor"] :is(.source-footer, .mobile-footer, .merken-bottom-right) .merken-toggle {
  color: #af3700 !important;
}

/* iStories: Merkfähnchen weiß (dunkler Footer) */
[data-source="istories"] :is(.source-footer, .mobile-footer, .merken-bottom-right) .merken-toggle {
  color: #ffffff !important;
}

/* Forbidden Stories: Merkfähnchen dunkelgrau */
[data-source="forbidden-stories"] :is(.source-footer, .mobile-footer, .merken-bottom-right) .merken-toggle {
  color: #363940 !important;
}

/* =========================================================================
   6. Icon-Buttons & SVGs
   ========================================================================= */
.icon-button,
.sort-toggle-icon,
.search-form-inline button {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  color: white !important;
}

.icon-button svg:not(.audio-svg),
.sort-toggle-icon svg,
.search-form-inline button svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5 !important;
  width: 22px;
  height: 22px;
}

@media (hover: hover) {
  .icon-button:hover svg {
    color: #bbb;
    transform: scale(1.1);
    transition: color 0.2s, transform 0.2s;
  }
}
/* Auf Touch-Geräten nie im :hover-Zustand steckenbleiben */
@media (hover: none) {
  .icon-button:hover svg {
    color: inherit;
    transform: none;
  }
}

/* Lesezeichen-Icon */
.merken-toggle svg {
  fill: none !important;
  stroke: currentColor !important;
}
.merken-toggle.marked svg {
  fill: currentColor !important;
  stroke: none !important;
}

/* Mobile Auto-Reset-Effekt via Animation (robust auf Android) */
@keyframes flashFade {
  0%   { opacity: .5; }
  100% { opacity: 1; }
}
.merken-toggle.flash-reset {
  animation: flashFade 1.2s ease forwards;
  will-change: opacity; /* eigener Layer – flüssiger */
}

/* Android: :active nicht abdunkeln / festhalten */
.icon-button { touch-action: manipulation; }
.icon-button:active { opacity: 1 !important; }

/* ───────────────────────────────────────────────────────────────
   MOBILE: Merk-Icon NIE ausgrauen (fix für klebendes :hover/:active)
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .merken-toggle,
  .mobile-footer .merken-toggle {
    -webkit-tap-highlight-color: transparent !important;
  }
  /* Farbe/Transform im Hover/Active/Focus explizit neutralisieren */
  .merken-toggle:hover svg,
  .merken-toggle:active svg,
  .merken-toggle:focus svg,
  .mobile-footer .merken-toggle:hover svg,
  .mobile-footer .merken-toggle:active svg,
  .mobile-footer .merken-toggle:focus svg {
    color: inherit !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
  .merken-toggle:focus { outline: none !important; }
  /* Falls ein Hover in alten WebViews „klebt“, über JS gesetzte Klasse */
  .merken-toggle.nohover:hover svg { 
    color: inherit !important; 
    transform: none !important; 
  }
}

/* =========================================================================
   7. Suche & Sortierung
   ========================================================================= */
.filter-toggle {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  margin: 0rem 0 1.5rem;
}

#search-flyout {
  display: none;
}

/* =========================================================================
   Sticky Hauptnavigation (Desktop)
   ===================================================================== */
@media (min-width: 769px) {
  
  /* Pagination über volle Breite */
  .pagination {
    width: 100%;
  }
  nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--orange);
  }
}
/* Desktop-Suchleiste Wrapper - fährt aus der Nav-Bar heraus */
@media (min-width: 769px) {
  .desktop-search-wrapper {
    /* Äußerer Container: volle Breite, Block-Display */
    display: block;
    position: sticky;
    top: var(--desktop-nav-h);
    left: 0;
    right: 0;
    z-index: 90;
    box-sizing: border-box;
    width: 100%;
    background: var(--bg-main);
    /* Geschlossen: hinter Nav versteckt via negativem margin */
    margin-top: -60px;
    visibility: hidden;
    transition: margin-top 220ms ease-out, visibility 0ms 220ms;
  }

  .desktop-search-wrapper.is-open {
    /* Offen: sichtbar, fährt nach unten heraus */
    margin-top: 0;
    visibility: visible;
    transition: margin-top 220ms ease-out, visibility 0ms 0ms;
  }

  /* Inner container: volle Breite */
  .desktop-search-wrapper > .search-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: 0.8rem 1rem 0.5rem 1rem;
  }

  .desktop-search-wrapper .search-form-inline {
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
  }

  .search-form-inline {
    display: flex;
    align-items: stretch; /* Button füllt volle Höhe */
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    width: 100%;
  }

  .search-form-inline input[type="text"] {
    flex: 1;
    min-width: 0; /* Wichtig für flex items */
    border: none;
    outline: none;
    padding: 0.7rem 1rem;
    font-family: "Montserrat", sans-serif;
    font-size: 1rem;
    color: #000;
    caret-color: #000;
    height: auto;
  }

  .search-form-inline input[type="text"]::placeholder {
    color: #888;
  }

  .search-form-inline .search-submit-btn {
    flex-shrink: 0;
    align-self: stretch; /* Volle Höhe des Containers */
    background: var(--orange) !important;
    border: none !important;
    padding: 0 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff !important;
    transition: background 0.2s;
  }

  .search-form-inline .search-submit-btn:hover {
    background: #d66a00 !important;
  }

  .search-form-inline .search-submit-btn svg {
    stroke: #fff !important;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
  }

  .search-form-inline .search-submit-btn.loading svg {
    display: none;
  }

  .search-form-inline .search-submit-btn.loading::after {
    content: '';
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
  }
}
.sort-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* =========================================================================
   8. Pagination
   ========================================================================= */
.pagination {
  display: flex !important;
  justify-content: space-between;
  margin: 2rem auto;
  width: 100%;
}
.pagination a {
  flex: 1;
  text-align: center;
  padding: 0.4em 0.8em;
  margin: 0 0.25em;
  background: var(--orange);
  color: white;
  border-radius: 6px;
  text-decoration: none;
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
}

.pagination a:hover,
.pagination a:focus {
  color: #ddd !important;
}
.pagination {
  display: flex !important;
}

/* =========================================================================
   9. Footer
   ========================================================================= */
footer {
  text-align: center;
  margin: 2rem 0;
  font-size: 0.85rem;
  color: var(--text-dark);
}
footer.legal-footer {
  text-align: left;
  max-width: 900px;
  margin: 2rem auto;
  padding: 0 1rem;
}
footer .footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}
footer .footer-bottom p {
  margin: 0;
}
body.source-page .pagination {
  display: none;
}
footer .footer-rights {
  color: #999;
  margin-top: 0.5em;
}
footer .footer-links {
  margin-top: 0.4em;
}
footer .footer-links a {
  color: inherit;
  text-decoration: none;
  font-weight: 500;
}
footer .footer-links a:hover,
footer .footer-links a:focus {
  text-decoration: underline;
}

/* =========================================================================
   10. Responsive (bis 768px)
   ========================================================================= */
@media (max-width: 768px) {
   .mobile-search-wrapper {
     display: flex;
     justify-content: center;
     align-items: center;
     margin-top: 0.3rem;   /* Abstand zur Nav-Bar minimal halten */
     margin-bottom: 0.3rem; /* Abstand zu den Artikelkarten minimal halten */
     padding: 0;           /* Innenabstand entfernen, falls vorhanden */
   }
   .mobile-search-wrapper .search-form-inline {
     display: flex;
     width: 90%;
     max-width: 500px;
   }
   .mobile-search-wrapper .search-form-inline input[type="text"] {
     flex: 1;
     padding: 0 0.6rem;    /* etwas schmalerer horizontaler Innenabstand */
     font-size: 0.9rem;
     height: 2.2rem;       /* etwas flacher */
   }
  .search-form-inline {
    display: flex;
    align-items: center; /* vertikal zentrieren */
    justify-content: center; /* optional horizontal zentrieren */
    margin: 1rem 0; /* Abstand zu Header & Cards */
  }

  /* Text-Artikel: Höhe wegnehmen */
  .article-wrapper:not(.image-top) {
    height: auto !important;
  }
  /* Bild-Artikel: bleibt auto */
  .article-wrapper.image-top {
    height: auto !important;
  }

  .title-link h1 {
    font-size: 2.2rem;    /* optional: Schriftgröße anpassen */
    line-height: 1.1;     /* hier reduzierter Zeilenabstand */
    margin: 0.2rem 0;     /* evtl. etwas weniger Abstand oben/unten */
  }

  /* Summary-Abstand vor der Mobile-Fußleiste vergrößern */
  .article-card.full-width,
  .article-wrapper:not(.image-top) .article-card {
    padding-bottom: 4.5em;
  }

  /* NEU: nur Lupe & Burger, rechtsbündig, vertikal mittig */
  nav ul.navbar {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end !important;
    overflow: visible !important;
    white-space: normal !important;
    padding: 0 .9rem !important;
    margin: 0;
    width: 100%;        /* auch in diesem Block sicherstellen */
    max-width: none;    /* Max-Width der Desktop-Nav entfernen */
    margin-left: auto;  /* ganz nach rechts */
    margin-right: 0;
    gap: .9rem !important;
  }

  /* NEU: Icons nicht aufspannen */
  nav ul.navbar li {
    flex: 0 0 auto !important;
    margin: 0;
  }

  nav ul.navbar li a,
  nav ul.navbar li button.dropdown-toggle {
    display: block;
    padding: 0.25rem 0;       /* vertikal etwas Puffer, horizontal wird durch flex verteilt */
    font-size: 0.75rem;       /* noch kleinere Schrift */
    line-height: 1;           /* engerer Zeilenabstand */
    text-align: center;
    letter-spacing: 0.01em;   /* etwas weniger Laufweite */
    white-space: normal;      /* bei sehr langen Wörtern umbrechen */
    font-weight: 500;
    width: 100%;  
  }

  /* Desktop-Panels & -Footer ausblenden */
  .source-panel-link,
  .source-panel,
  .source-footer {
    display: none !important;
  }

  /* Mobile-Footer im Wrapper */
  .mobile-footer {
    display: flex !important;
    position: absolute !important;
    bottom: 0; left: 0; right: 0;
    width: 100% !important;
    justify-content: space-between;
    align-items: center;
    padding: 0.6em 0.8em 0.6em 0.5em;
    gap: 0.4em;
    background-color: inherit;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    z-index: 1;
    pointer-events: auto;
  }
  .card-footer {
    padding-left: 1em;
    padding-right: 0.5em;
  }
  /* Audio-Artikel: Play-Icon näher am linken Rand */
  .mobile-footer:has(.mobile-audio-toggle) {
    padding-left: 0.5em !important;
  }
  .mobile-footer .footer-left {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .mobile-footer .footer-right {
    display: flex;
    align-items: center;
  }
  .mobile-footer .footer-logo {
    height: 1.3em;
    max-width: 200px;  /* Erhöht von 120px für bessere Lesbarkeit */
    margin-left: 0;
    display: block;
    flex-shrink: 0;
    /* GPU-Beschleunigung gegen Wobble beim Hover */
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
  }

  .mobile-footer[data-source="Deutschlandfunk"] .footer-left {
    gap: 4px;
  }

  .mobile-footer .merken-toggle {
    position: relative !important;
    margin-right: 0;
  }
  /* Nur Icons mit .invert-icon werden in dunklem Farbton gezeigt */
  .mobile-footer .merken-toggle.invert-icon {
    color: #262626 !important;             /* invert-Icon dunkel */
  }
  .mobile-footer .merken-toggle.invert-icon svg {
    stroke: currentColor !important;
    fill: none !important;
  }
  .mobile-footer .merken-toggle.invert-icon.marked svg {
    fill: currentColor !important;
    stroke: none !important;
  }

  .mobile-footer .merken-toggle svg {
    fill: none !important;
    stroke: currentColor !important;
  }
  .mobile-footer .merken-toggle.marked svg {
    fill: currentColor !important;
    stroke: none !important;
  }

  .mobile-footer .mobile-audio-toggle {
    margin-left: 0.35em;
  }

  /* Quellen mit hellem Footer: dunkles Merkfähnchen in Mobile-Ansicht */
  .mobile-footer.le-monde-diplomatique .merken-toggle,
  .mobile-footer.emrawi .merken-toggle {
    color: #262626 !important;
  }
  .mobile-footer.le-monde-diplomatique .merken-toggle svg,
  .mobile-footer.emrawi .merken-toggle svg {
    stroke: currentColor !important;
    fill: none !important;
  }
  .mobile-footer.le-monde-diplomatique .merken-toggle.marked svg,
  .mobile-footer.emrawi .merken-toggle.marked svg {
    fill: currentColor !important;
    stroke: none !important;
  }

.icon-button {
  -webkit-tap-highlight-color: transparent; /* iOS Tap-Highlight aus */
}

.icon-button:focus { outline: none; }
.icon-button:focus svg { color: inherit; }

  /* altes bottom-right-Icon auf Mobile komplett ausblenden */
  .merken-bottom-right {
    display: none !important;
  }

  /* Suche zentrieren */
  .filter-toggle {
    justify-content: center !important;
  }
  .search-form-inline {
    margin: 0.5em auto;
    border-radius: 10px !important;
  }
  .search-form-inline input[type="text"] {
    width: 100%;
  }

  /* Mobile: bei der Pagination keine weißen Striche */
  .pagination {
    margin: 0;                          /* keine Außenabstände */
    width: 100%;                        /* Containerbreite */
    margin-left: calc(50% - 50vw);      /* full-bleed links */
    margin-right: calc(50% - 50vw);     /* full-bleed rechts */
    width: 100vw;                       /* über gesamte Viewportbreite */
  }
  .pagination a {
    margin: 0 !important;               /* keine Lücken zwischen den Buttons */
    border-radius: 0 !important;        /* Ecken eckig */
    padding: 0.6rem 0;    
    background: var(--orange);          /* durchgehende Leiste */
    flex: 1 1 50%;
  }

  .dropdown-content {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 90vw !important;
  max-width: 96vw !important;
  max-height: 70vh !important;
  z-index: 9999 !important;
  text-align: center;
  font-size: 1rem !important;
  /* Horizontal-Scroll verhindern */
  overflow-x: hidden !important;
  box-sizing: border-box !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

  /* Alle Kinder auf Viewport-Breite begrenzen und harte Umbrüche erlauben */
  .dropdown-content ul,
  .dropdown-content li,
  .dropdown-content a {
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    white-space: normal;       /* keine Zeile in eins durchziehen */
    word-break: break-word;    /* lange URLs/Wörter umbrechen */
    overflow-wrap: anywhere;   /* zusätzliche Absicherung */
  }

  /* Während der Android-Sperre: keine Interaktion & kein Highlight */
  .dropdown.opening .dropdown-content,
  .dropdown.opening .dropdown-content a {
    pointer-events: none !important;
    -webkit-tap-highlight-color: transparent;
  }

  /* ─── Mobile: Dropdown-Links zentrieren ───────────────────────── */
  .dropdown-content li a {
    display: block;
    text-align: center !important;
    font-size: 1rem !important;
    padding: 0.6rem 1rem !important;
  }

  /* Verhindert, dass das darunter liegende scrollt, wenn Menü offen */
  body.dropdown-open {
    overflow: hidden;
    width: 100vw;                 /* Sicherheitsnetz gegen Seitwärts-Scroll */
    max-width: 100vw;
  }
}

@media (max-width: 768px) {
  .audio-player-bar--desktop {
    display: none !important;
  }
}

@media (min-width: 769px) {
  .audio-player-bar--desktop {
    /* Äußerer Container: sticky unter der Nav */
    display: flex;
    flex-direction: column;
    position: sticky;
    top: var(--desktop-nav-h);
    left: 0;
    right: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 95;
    background: #1f1f1f;
    /* Geschlossen: hinter Nav versteckt via negativem margin */
    margin-top: -40px;
    visibility: hidden;
    pointer-events: none;
    transition: margin-top 220ms ease-out, visibility 0ms 220ms;
  }

  .audio-player-bar--desktop.is-open {
    margin-top: 0;
    visibility: visible;
    pointer-events: auto;
    transition: margin-top 220ms ease-out, visibility 0ms 0ms;
  }

  /* Wenn Nav aus Viewport: Player wechselt zu fixed und klebt oben */
  .audio-player-bar--desktop.is-scrolled {
    position: fixed;
    top: 0;
    margin-top: 0;
  }

  /* Zeile 1: Controls (Play, Text, Close) */
  .audio-player-bar--desktop > .player-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    height: 40px;
    flex-shrink: 0;
  }

  .audio-player-bar--desktop .audio-player-toggle {
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
  }

  .audio-player-bar--desktop .audio-player-close {
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
  }

  .audio-player-bar--desktop .audio-player-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    min-width: 0; /* Wichtig für text-overflow */
    max-width: 700px;
    padding: 0 4rem;
  }

  .audio-player-bar--desktop .audio-player-text {
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #999;
  }

  /* Zeile 2: Progress-Bar (volle Breite, am unteren Rand) */
  .audio-player-bar--desktop > .audio-player-progress {
    display: block;
    width: 100%;
    height: 3px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.12);
    cursor: pointer;
  }

  .audio-player-bar--desktop > .audio-player-progress .audio-player-progress-bar {
    display: block;
    height: 100%;
    width: 0%;
    background: var(--orange);
    transition: width 120ms linear;
  }

  .audio-player-bar--mobile {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .audio-player-bar--desktop,
  .desktop-search-wrapper,
  #search-flyout {
    transition: none;
  }
}

/* ===========================================
   Farb-Inversion nur für Weiß, Hellgrün, Hellgelb, Hellblau, Hellrot
   =========================================== */
.mobile-footer[style*="#ffffff"] .merken-toggle,
.mobile-footer[style*="#fefefe"] .merken-toggle,
.mobile-footer[style*="#e0f7da"] .merken-toggle,
.mobile-footer[style*="#ffeed4"] .merken-toggle,
.mobile-footer[style*="#fff9c4"] .merken-toggle,
.mobile-footer[style*="#fff22a"] .merken-toggle,
.mobile-footer[style*="#f2f8f8"] .merken-toggle,
.mobile-footer[style*="#ff675f"] .merken-toggle {  /* European Alternatives */
  color: #262626 !important;
}
.mobile-footer[style*="#ffffff"] .mobile-audio-toggle,
.mobile-footer[style*="#fefefe"] .mobile-audio-toggle,
.mobile-footer[style*="#e0f7da"] .mobile-audio-toggle,
.mobile-footer[style*="#ffeed4"] .mobile-audio-toggle,
.mobile-footer[style*="#fff9c4"] .mobile-audio-toggle,
.mobile-footer[style*="#fff22a"] .mobile-audio-toggle,
.mobile-footer[style*="#f2f8f8"] .mobile-audio-toggle,
.mobile-footer[style*="#ff675f"] .mobile-audio-toggle {
  color: #262626 !important;
}
.mobile-footer[style*="#ffffff"] .merken-toggle svg,
.mobile-footer[style*="#e0f7da"] .merken-toggle svg,
.mobile-footer[style*="#ffeed4"] .merken-toggle svg,
.mobile-footer[style*="#fff9c4"] .merken-toggle svg,
.mobile-footer[style*="#fff22a"] .merken-toggle svg,
.mobile-footer[style*="#f2f8f8"] .merken-toggle svg,
.mobile-footer[style*="#ff675f"] .merken-toggle svg {
  stroke: currentColor !important;
  fill: none !important;
}
.mobile-footer[style*="#ffffff"] .merken-toggle.marked svg,
.mobile-footer[style*="#e0f7da"] .merken-toggle.marked svg,
.mobile-footer[style*="#ffeed4"] .merken-toggle.marked svg,
.mobile-footer[style*="#fff9c4"] .merken-toggle.marked svg,
.mobile-footer[style*="#fff22a"] .merken-toggle.marked svg,
.mobile-footer[style*="#f2f8f8"] .merken-toggle.marked svg,
.mobile-footer[style*="#ff675f"] .merken-toggle.marked svg {
  fill: currentColor !important;
  stroke: none !important;
}

/* Hammer & Hope: spezifische Fähnchen-Farbe überschreibt allgemeine helle Footer-Regel */
.mobile-footer[style*="#fefefe"].hammer-hope .merken-toggle { color: #2f2d2e !important; }

/* =========================================================================
   11. Desktop: Mobile-Footer wieder ausblenden ab 769px
   ========================================================================= */
@media (min-width: 769px) {
  .mobile-footer {
    display: none !important;
  }

  .article-wrapper:not(.image-top) .merken-bottom-right {
    right: 1.1em;
  }

  /* Desktop ohne Bild (Logo-Kacheln): Merkfähnchen IMMER weiß */
  .article-wrapper:not(.image-top) .merken-bottom-right .merken-toggle,
  .article-wrapper:not(.image-top) .merken-bottom-right .merken-toggle.invert-icon {
    color: #fff !important;
  }
  .article-wrapper:not(.image-top) .merken-bottom-right .merken-toggle svg,
  .article-wrapper:not(.image-top) .merken-bottom-right .merken-toggle.invert-icon svg {
    stroke: currentColor !important;
    fill: none !important;
  }
  .article-wrapper:not(.image-top) .merken-bottom-right .merken-toggle.marked svg,
  .article-wrapper:not(.image-top) .merken-bottom-right .merken-toggle.invert-icon.marked svg {
    fill: currentColor !important;
    stroke: none !important;
  }
}
/* =========================================================================
   12. Lesezeichen-Icon auf weißen Footern schwarz einfärben (global)
   ========================================================================= */
.source-footer .merken-toggle.invert-icon,
.merken-bottom-right .merken-toggle.invert-icon {
  color: #262626 !important;
}
.source-footer .merken-toggle.invert-icon svg,
.merken-bottom-right .merken-toggle.invert-icon svg {
  stroke: currentColor !important;
  fill: none !important;
}
.source-footer .merken-toggle.invert-icon.marked svg,
.merken-bottom-right .merken-toggle.invert-icon.marked svg {
  fill: currentColor !important;
  stroke: none !important;
}

/* ========================================================================
   Summary: rechts Platz für das Bookmark-Icon freihalten
   ======================================================================== */
/* 1) Standard (mobile): keine extra Einrückung, voller Platz nutzen */
.summary {
  padding-right: 0; /* oder entferne ganz, wenn du gar nichts setzt */
}

/* 2) Desktop: Text nicht unter das Bookmark-Icon laufen lassen */
@media (min-width: 769px) {
  .summary {
    /* Platz für Icon + Puffer (Icon ~22px + etwas Luft) */
    padding-right: 3em;

    /* optional: lange Worte sauber umbrechen */
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    word-break: break-word;
  }

  .pagination a {
    border-radius: 0 !important;
    margin: 0 !important;
  }
}


/* ========================================================================
   ERROR‑PAGES
   ======================================================================== */

/* Mobile (<769px) */
@media (max-width: 768px) {
  .error-page a:link,
  .error-page a:visited {
    color: #e2e2e2 !important;
    text-decoration: none !important;
  }

  .error-page a:hover,
  .error-page a:focus {
    color: #ffffff !important;
    text-decoration: none !important;
  }
} 

.error-page a:link,
.error-page a:visited {
  color: #e2e2e2 !important;
  text-decoration: none !important;
}

.error-page a:hover,
.error-page a:focus {
  color: #ffffff !important;
  text-decoration: none !important;
}

.error-page .error-gif {
  display: block;
  margin: 1rem auto;
  max-width: 150px;
  width: auto;
  background: transparent;
  border: none;
}

@media (max-width: 768px) {
  /* Merk-Icon für The New York Review of Books in Mobile view rot färben */
  .mobile-footer.the-new-york-review-of-books .merken-toggle {
    color: #990101 !important;
  }
  .mobile-footer.merkur .merken-toggle {
    color: #c43b23 !important;
  }
  .mobile-footer.alternet .merken-toggle {
    color: #fdbb63 !important;
  }
  .mobile-footer.lto .merken-toggle {
    color: #b7302f !important;
  }
  .mobile-footer.public-seminar .merken-toggle {
    color: #d94440 !important;
  }
  .mobile-footer.grist .merken-toggle {
    color: #3c3830 !important;
  }
  .mobile-footer.grist .merken-toggle svg {
    stroke: currentColor !important;
    fill: none !important;
  }
  .mobile-footer.grist .merken-toggle.marked svg {
    fill: currentColor !important;
    stroke: none !important;
  }
  .mobile-footer.balkan-insight .merken-toggle {
    color: #0b4068 !important;
  }
}

/* Desktop: färbe nur, wenn der Artikel ein Bild enthält */
@media (min-width: 769px) {
  /* Bild-Artikel haben .article-wrapper.image-top + .source-footer */
  .article-wrapper.image-top .source-footer.the-new-york-review-of-books .merken-toggle { color: #990101 !important; }
  .article-wrapper.image-top .source-footer.merkur .merken-toggle { color: #c43b23 !important; }
  .article-wrapper.image-top .source-footer.alternet .merken-toggle { color: #fdbb63 !important; }
  .article-wrapper.image-top .source-footer.lto .merken-toggle { color: #b7302f !important; }
  .article-wrapper.image-top .source-footer.public-seminar .merken-toggle { color: #d94440 !important; }
  .article-wrapper.image-top .source-footer.grist .merken-toggle { color: #3c3830 !important; }
  .article-wrapper.image-top .source-footer.grist .merken-toggle svg { stroke: currentColor !important; fill: none !important; }
  .article-wrapper.image-top .source-footer.grist .merken-toggle.marked svg { fill: currentColor !important; stroke: none !important; }
  .article-wrapper.image-top .source-footer.euobserver .merken-toggle { color: #ff3f3a !important; }
  .article-wrapper.image-top .source-footer.lower-class-magazine .merken-toggle { color: #9a1d2b !important; }
  .article-wrapper.image-top .source-footer.spitfire-news .merken-toggle { color: #0c0606 !important; }
  .article-wrapper.image-top .source-footer.occrp .merken-toggle { color: #d9242b !important; }
  .article-wrapper.image-top .source-footer.bildblog .merken-toggle { color: #525252 !important; }
  .article-wrapper.image-top .source-footer.rosa-luxemburg-stiftung .merken-toggle { color: #ff1100 !important; }
  .article-wrapper.image-top .source-footer.meduza .merken-toggle { color: #deac77 !important; }
  .article-wrapper.image-top .source-footer.hanno-hauenstein .merken-toggle { color: #6798ff !important; }
  .article-wrapper.image-top .source-footer.foreign-policy .merken-toggle { color: #ee361e !important; }
  .article-wrapper.image-top .source-footer.znetwork .merken-toggle { color: #ca130f !important; }
  .article-wrapper.image-top .source-footer.the-new-statesman .merken-toggle { color: #e26257 !important; }
  .article-wrapper.image-top .source-footer.red-pepper .merken-toggle { color: #e70616 !important; }
  .article-wrapper.image-top .source-footer.the-continent .merken-toggle { color: #5d5638 !important; }
  .article-wrapper.image-top .source-footer.stiftung-wissenschaft-und-politik .merken-toggle { color: #0d4c79 !important; }
  .article-wrapper.image-top .source-footer.dekoder .merken-toggle { color: #362a48 !important; }
  .article-wrapper.image-top .source-footer.hammer-hope .merken-toggle { color: #2f2d2e !important; }
  .article-wrapper.image-top .source-footer.tagesschau .merken-toggle { color: #001a4b !important; }
  .article-wrapper.image-top .source-footer.frag-den-staat .merken-toggle { color: #2a66b0 !important; }
  .article-wrapper.image-top .source-footer.balkan-insight .merken-toggle { color: #0b4068 !important; }
  .article-wrapper.image-top .source-footer.verso .merken-toggle { color: #ed0000 !important; }
}

/* =========================================================================
   Desktop: Suche in Navbar toggle
   ========================================================================= */
@media (min-width: 769px) {
  /* Lupen-Icon ganz rechts anzeigen */
  nav ul.navbar .search-icon {
    display: block;
    margin-left: auto;
  }

  /* Desktop-Suchleiste - Styles werden über .desktop-search-wrapper gesteuert */

  /* Lupen-Icon beim Hover skalieren (Farbe bleibt erhalten) */
  nav ul.navbar .search-icon .icon-button:hover svg {
    transform: scale(1.1);
    color: #ddd;
    transition: color 0.2s, transform 0.2s;
  }
}

/* =========================================================================
   Mobile: Lupen-Icon ausblenden
   ========================================================================= */
@media (max-width: 768px) {
  .desktop-search-wrapper { display: none !important; }
  .search-form-inline { display: none !important; } /* nur Flyout nutzen */

  /* Icons sichtbar */
  nav ul.navbar .search-icon { display: block !important; }
  nav ul.navbar .hamburger-icon { display: block !important; }

  /* Pop Zeitschrift und Boston Review in Mobile: schwarzes Merk-Fähnchen */
  .mobile-footer.pop-zeitschrift .merken-toggle,
  .mobile-footer.boston-review .merken-toggle {
    color: #000 !important;
  }
  .mobile-footer.pop-zeitschrift .merken-toggle svg,
  .mobile-footer.boston-review .merken-toggle svg {
    stroke: currentColor !important;
    fill: none !important;
  }
  .mobile-footer.pop-zeitschrift .merken-toggle.marked svg,
  .mobile-footer.boston-review .merken-toggle.marked svg {
    fill: currentColor !important;
    stroke: none !important;
  }

  /* Merkfähnchen-Farben für Mobile */
  .mobile-footer.euobserver .merken-toggle { color: #ff3f3a !important; }
  .mobile-footer.lower-class-magazine .merken-toggle { color: #9a1d2b !important; }
  .mobile-footer.spitfire-news .merken-toggle { color: #0c0606 !important; }
  .mobile-footer.occrp .merken-toggle { color: #d9242b !important; }
  .mobile-footer.bildblog .merken-toggle { color: #525252 !important; }
  .mobile-footer.rosa-luxemburg-stiftung .merken-toggle { color: #ff1100 !important; }
  .mobile-footer.meduza .merken-toggle { color: #deac77 !important; }
  .mobile-footer.hanno-hauenstein .merken-toggle { color: #6798ff !important; }
  .mobile-footer.foreign-policy .merken-toggle { color: #ee361e !important; }
  .mobile-footer.znetwork .merken-toggle { color: #ca130f !important; }
  .mobile-footer.the-new-statesman .merken-toggle { color: #e26257 !important; }
  .mobile-footer.red-pepper .merken-toggle { color: #e70616 !important; }
  .mobile-footer.the-continent .merken-toggle { color: #5d5638 !important; }
  .mobile-footer.stiftung-wissenschaft-und-politik .merken-toggle { color: #0d4c79 !important; }
  .mobile-footer.dekoder .merken-toggle { color: #362a48 !important; }
  .mobile-footer.tagesschau .merken-toggle { color: #001a4b !important; }
  .mobile-footer.frag-den-staat .merken-toggle { color: #2a66b0 !important; }
  .mobile-footer.opinio-juris .merken-toggle { color: #0ac0d3 !important; }
  .mobile-footer.verso .merken-toggle { color: #ed0000 !important; }
}


/* Sortier-Icon komplett ausblenden */
.sort-toggle-icon,
.sort-toggle-icon svg,
.base-url-latest,
.base-url-shuffle {
  display: none !important;
}

/* Android: Tap-Highlight global für kurze Zeit aus – rein funktional */
html.tap-block * { -webkit-tap-highlight-color: transparent !important; }

/* --- Optional: auf Android das Tap-Highlight und :active global deaktivieren --- */
html.android * {
  -webkit-tap-highlight-color: transparent !important;
}
html.android a:active,
html.android button:active,
html.android [role="button"]:active {
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ===========================================
   Android: während Dropdown offen ist, jegliches
   Tap-Highlight / Active-Darkening unterdrücken
   =========================================== */
html.android body.dropdown-open * {
  -webkit-tap-highlight-color: transparent !important;
}
html.android body.dropdown-open a:active,
html.android body.dropdown-open button:active,
html.android body.dropdown-open [role="button"]:active {
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Hover-Neutralisierung gezielt (nicht die Navbar “entfärben”) */
html.android body.dropdown-open a:hover,
html.android body.dropdown-open button:hover,
html.android body.dropdown-open .article-wrapper:hover,
html.android body.dropdown-open .article-card:hover {
  background: transparent !important;
  filter: none !important;
  opacity: 1 !important;
}

/* Während Dropdown offen: Navbar/Header nie transparent zeichnen */
html.android body.dropdown-open nav {
  background-color: var(--orange) !important;
}
html.android body.dropdown-open header {
  background-color: var(--bg-main) !important;
}

/* Klicks hinter dem Menü komplett unterbinden */
body.dropdown-open main,
body.dropdown-open header,
body.dropdown-open footer,
body.dropdown-open .article-wrapper,
body.dropdown-open .article-card {
  pointer-events: none !important;
}

/* >>> Mobile-Ausnahme: Header/Nav klickbar lassen, damit Burger-X schließt */
@media (max-width: 768px){
  body.dropdown-open header,
  body.dropdown-open nav {
    pointer-events: auto !important;
  }

  /* auch wenn Android-Block später erneut pointer-events setzt */
  html.android body.dropdown-open header,
  html.android body.dropdown-open nav {
    pointer-events: auto !important;
  }
}


/* Dropdown selbst weiter bedienbar lassen */
body.dropdown-open .dropdown,
body.dropdown-open .dropdown * {
  pointer-events: auto !important;
}

/* Während Menü offen ist: kein Overscroll-Glow / -Ziehen, keine Scroll-Chains */
html.android, html.android body {
  overscroll-behavior: contain;
}
html.android body.dropdown-open {
  overflow: hidden;
  overscroll-behavior: none;
}

/* Falls irgendein :active-Style auf Cards/Links greift: neutralisieren */
html.android body.dropdown-open .article-wrapper:active,
html.android body.dropdown-open .article-card:active {
  background: inherit !important;
}

html.tap-block * {
  -webkit-tap-highlight-color: transparent !important;
}
html.tap-block *:active {
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}
html.tap-block a:active,
html.tap-block button:active {
  color: inherit !important; /* falls Browser Farbe beim :active ändert */
}
@media (max-width: 768px) {
  /* Sicherheitsnetz: während der Opening-Phase keinerlei Interaktion im Menü */
  .dropdown.opening .dropdown-content,
  .dropdown.opening .dropdown-content * {
    pointer-events: none !important;
  }
}

/* Android: Dropdown ohne Schatten/Blend, volle Breite stabil */
html.android .dropdown-content {
  position: fixed !important;
  top: 12vh !important;              /* höher platzieren */
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  transform: none !important;
  margin: 0 auto !important;
  max-height: 85vh !important;
  z-index: 10000 !important;         /* über dem Tap-Shield (9998) */
  background-clip: padding-box;
  overflow-x: hidden !important;     /* Horizontal-Scroll strikt aus */
}

/* Android: auch alle Nachfahren horizontal einschränken */
html.android .dropdown-content * {
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

/* Such-Flyout sitzt jetzt direkt oben – kein zusätzlicher Abstand nötig */
@media (max-width: 768px){
  .search-flyout { top: 0; }
}

/* Während Menü offen: alles darunter “inert”, damit kein :active-Blinken */
html.android body.dropdown-open header,
html.android body.dropdown-open main,
html.android body.dropdown-open footer {
  pointer-events: none !important;
}

/* NEU: Mobile-Override NACH obigem Block, damit Burger/Lupe klickbar bleiben */
@media (max-width: 768px){
  html.android body.dropdown-open header,
  html.android body.dropdown-open nav {
    pointer-events: auto !important;
  }
}

/* ====== Hamburger, Mobile-Menü, Search-Flyout NUR auf Mobile aktivieren ====== */
@media (max-width: 768px){
  /* präzise, symmetrische X-Animation */
  .hamburger{
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 100%; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; padding: 0;
  }
  .hamburger .bar{
    position:absolute; left:6px; right:6px; height:2px; background:#fff; border-radius:2px;
    transform-origin:50% 50%; transition:transform .25s ease, opacity .25s ease, top .25s ease;
    backface-visibility:hidden; will-change:transform, top;
  }
  .hamburger .bar:nth-child(1){ top:calc(50% - 12px); }
  .hamburger .bar:nth-child(2){ top:50%; transform:translateY(-50%); }
  .hamburger .bar:nth-child(3){ top:calc(50% + 12px); }
  .hamburger.open .bar:nth-child(1){ top:50%; transform:translateY(-50%) rotate(45deg); }
  .hamburger.open .bar:nth-child(2){ opacity:0; }
  .hamburger.open .bar:nth-child(3){ top:50%; transform:translateY(-50%) rotate(-45deg); }
  .hamburger::after{ content:""; position:absolute; inset:-12px; }

  /* Such-Button exakt wie Hamburger dimensionieren */
  #search-toggle{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:48px; height:100%; }

  /* === CSS Lupe-zu-X Morph Animation === */
  /* Größe angepasst an Hamburger (36px Breite, gleiche Proportionen) */
  #search-toggle .icon-morph {
    position: relative;
    width: var(--mobile-icon-h, 32px);
    height: var(--mobile-icon-h, 32px);
  }

  .search-submit-btn .icon-search,
  .search-submit-btn .icon-morph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .search-submit-btn .icon-morph {
    position: relative;
    width: var(--mobile-icon-h, 32px);
    height: var(--mobile-icon-h, 32px);
  }

  /* Lupen-Kreis */
  #search-toggle .morph-circle {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(var(--mobile-icon-h, 32px) - 10px);
    height: calc(var(--mobile-icon-h, 32px) - 10px);
    border: 2px solid #fff;
    border-radius: 50%;
    transform-origin: center center;
    transition: transform .25s ease, opacity .25s ease;
  }

  .search-submit-btn .morph-circle {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(var(--mobile-icon-h, 32px) - 10px);
    height: calc(var(--mobile-icon-h, 32px) - 10px);
    border: 2px solid currentColor;
    border-radius: 50%;
    transform-origin: center center;
    transition: transform .25s ease, opacity .25s ease;
  }

  /* Lupen-Griff (wird zu einem X-Balken) */
  #search-toggle .morph-handle {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: calc(var(--mobile-icon-h, 32px) - 22px);
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transform: rotate(45deg);
    transform-origin: center center;
    transition: transform .25s ease, width .25s ease, bottom .25s ease, right .25s ease;
  }

  .search-submit-btn .morph-handle {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: calc(var(--mobile-icon-h, 32px) - 22px);
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transform: rotate(45deg);
    transform-origin: center center;
    transition: transform .25s ease, width .25s ease, bottom .25s ease, right .25s ease;
  }

  .search-submit-btn .morph-handle::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: currentColor;
    border-radius: 2px;
    transform: rotate(0deg);
    transform-origin: center center;
    transition: transform .25s ease;
  }

  /* Pseudo-Element für zweiten X-Balken (erscheint beim Morph) */
  #search-toggle .morph-handle::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 2px;
    transform: rotate(0deg);
    transform-origin: center center;
    transition: transform .25s ease;
  }

  /* === Active State: X === */
  #search-toggle.active .morph-circle {
    /* Kreis schrumpft und wird unsichtbar */
    opacity: 0;
    transform: scale(0);
  }

  #search-toggle.active .morph-handle {
    /* Griff wird zum ersten X-Balken (36px wie Hamburger) */
    width: calc(var(--mobile-icon-h, 32px) + 2px);
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%) rotate(45deg);
  }

  #search-toggle.active .morph-handle::after {
    /* Zweiter X-Balken (90° zum ersten) */
    transform: rotate(90deg);
  }

/* * Mobile Vollbild-Menü */
  /* Overlay-Container: beginnt UNTER dem Header (Icons bleiben frei) */
  .mobile-menu{
    position: fixed;
    left: 0;
    right: 0;
    top: var(--mobile-header-h);                       /* <— Offset unter den Header */
    height: calc(100dvh - var(--mobile-header-h));     /* <— volle Höhe unterhalb */
    z-index: 13010;  
    pointer-events: none;                              /* erst aktiv, wenn .show */
    overflow: hidden;
    /* Sichtbarkeit erst NACH der Schließ-Animation ausblenden
       → verhindert 1-Frame-Flash/Flicker */
    visibility: hidden;
    transition: visibility 0s linear .28s;
    /* eigene Compositor-Ebene */
    isolation: isolate;
    will-change: transform, opacity;
    backface-visibility: hidden;
    transform: translateZ(0);    
  }

  /* Dim-Backdrop */
  .mobile-menu::before{
    content:"";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.35);
    opacity: 0;
    transition: opacity .25s ease;
    will-change: opacity;
    backface-visibility: hidden;
    transform: translateZ(0);
  }
  /* Panel fährt von rechts ein – mobil volle Breite ist okay */
  .mobile-menu-inner{
    position:absolute; top:0; bottom:0; left:0; right:0;
    width:100vw; background:var(--header-bg, #262626);
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    transform:translate3d(100%,0,0); transition:transform .28s ease;
    padding:16px 20px 24px;
    /* keine Zwischenrepaints während der Animation */
    will-change: transform;
    backface-visibility: hidden;
    contain: layout paint;
  }

  /* aktiv: alles sichtbar und klickbar */
  .mobile-menu.show{
    pointer-events: auto;
    visibility: visible;
    transition-delay: 0s; /* sofort sichtbar beim Öffnen */
  }

  .mobile-menu.show::before{
    opacity: 1;
  }
  .mobile-menu.show .mobile-menu-inner{
    transform: translate3d(0,0,0);
  }

  /* Body-Scroll sperren, wenn Overlay offen */
  body.dropdown-open{ overflow: hidden; }

  /* Accordion-Inhalt im Panel hübsch */
  .mobile-menu .acc{ border-bottom: 1px solid rgba(255,255,255,.08); }
  .mobile-menu .acc-trigger{
    width: 100%;
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 0;
    font-size: 1.2rem; color: #fff;
  }
  .mobile-menu .acc-panel{
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease;
  }
  .mobile-menu .acc.open .acc-panel{ max-height: 500px; }
  .mobile-menu .acc-panel ul{ padding: 6px 0 12px; }
  .mobile-menu .acc-panel a{ display:block; padding:10px 0; color:#fff; }
  .mobile-menu .acc-link{ display:block; padding:14px 0; color:#fff; }
}

/* Accordion im Mobile-Menü */
.acc { border-bottom: 1px solid #444; }
.acc-trigger { width:100%; background:none; border:0; color:#fff;
  font-family: 'Poppins', sans-serif; font-size:1.1rem; font-weight:600; font-style:normal;
  display:flex; align-items:center; justify-content:space-between; padding:1rem 0; cursor:pointer; }
.acc .chev { transition: transform .2s ease; }
.acc.open .chev { transform: rotate(180deg); }
.acc-panel { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.acc-panel ul { list-style:none; margin:0 0 .75rem 0; padding:0 0 .75rem 0; display:grid; gap:.25rem; }
.acc-panel li a {
  color:#fff; text-decoration:none; display:block; padding:.4rem 0;
  font-family: 'Poppins', sans-serif;   /* serifenlos für Unterpunkte */
  font-weight:500; font-style:normal;
}
.acc-panel li a:hover { color:#ddd; }
.acc-link {
  display:block; color:#fff; text-decoration:none;
  font-family: 'Poppins', sans-serif; font-weight:600; font-style:normal;
  padding:1rem 0;
  font-size:1.2rem;                      /* gleiche Größe wie Reiter */
}

/* Desktop: Hamburger ausblenden */
@media (min-width: 769px){
  .hamburger-icon { display:none !important; }
}

@media (max-width: 768px){
  /* Platz unter fixem Header schaffen */
  main { margin: calc(var(--mobile-header-h) + 0.5rem) auto 0; }
}

/* ========== Mobile Search-Flyout: von rechts nach links, dunkler Hintergrund ========== */
@media (max-width: 768px){
  /* Logo ausblenden, während Suche offen ist */
  body.search-open .logo-row > a:first-child,
  body.search-open .logo-row .logo {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease;
  }

/* === Search-Flyout: Android-Flicker-Fix ===
   - Nur opacity animieren (kein transform beim Close)
   - Eigener Compositing-Layer für ruckelfreies Ausblenden
*/
#search-flyout.search-flyout {
  /* Stelle sicher, dass das Element einen eigenen Layer bekommt */
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: opacity;
  contain: paint;

  /* Ausgangszustand: unsichtbar, aber belegter Layer */
  opacity: 0;
  visibility: hidden; /* wird per .is-open überschrieben */

  /* WICHTIG: Keine transform-Transition! */
  transition: opacity 200ms ease-out, visibility 0s linear 200ms;
}
#search-flyout.search-flyout.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 200ms ease-out, visibility 0s linear 0s;
}

/* Motion-Preference respektieren */
@media (prefers-reduced-motion: reduce) {
  #search-flyout.search-flyout {
    transition: none;
  }
}

  /* Flyout-Grundform */
  #search-flyout{
    position: fixed;
    top: 0;
    right: 0;
    height: var(--mobile-header-h, 64px);
    width: 100%;
    display: flex;
    align-items: center;
    background: var(--header-bg, #262626);
    transform: translate3d(100%,0,0);       /* eigene Compositor-Ebene */
    transition: transform .25s ease, visibility 0s linear .25s;
    z-index: 13001;
    visibility: hidden;                      /* statt display:none */
    pointer-events: none;
    box-sizing: border-box;
    --logo-slot: 44px;        /* Platz links, wo vorher das Logo war */
    --icons-slot: 56px;       /* Platz rechts für Lupe/X & Hamburger */
    padding-left: calc(var(--logo-slot) + 12px);
    padding-right: calc(var(--icons-slot));
    box-shadow: none;
    will-change: transform;
    backface-visibility: hidden;
    contain: layout paint;
  }

#search-flyout.is-open{
  transform: translate3d(0,0,0);
  visibility: visible;
  pointer-events: auto;
  transition: transform .25s ease;
}

  /* Fallback: zusätzlich zum .is-open-Toggle auch Body-State akzeptieren.
     Verhindert, dass der Sticky-Header das Flyout verdeckt, falls .is-open
     aus irgendeinem Grund nicht gesetzt wurde. */
  body.search-open #search-flyout{
    transform: translate3d(0,0,0);
    visibility: visible;
    pointer-events: auto;
  }

  /* Formular/Alignment im Header */
  #search-flyout .search-flyout-form{
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    background: transparent !important;
    padding-inline: 0;                 /* KEIN zusätzlicher linker Puffer */
  }
  /* Input: exakt auf Icon-Höhe, ohne weißen Kasten */
  #search-flyout input[type="text"]{
    width: 100%;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #fff;
    font-size: 1.15rem;        /* etwas größer, harmoniert mit Icons */
    font-weight: 500;
    line-height: var(--mobile-header-h, 64px); /* auf eine Höhe mit Lupe/HM */
    padding: 0;                 /* nichts verschieben */
    caret-color: #fff;          /* sichtbarer Cursor */
  }
  #search-flyout input::placeholder{
    color: rgba(255,255,255,.6);
    font-size: 1.15rem;
  }

  /* Eingabefeld: keine weiße Fläche – nur Cursor sichtbar */
  #search-flyout .search-flyout-form {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    padding-inline: 0;
    background: transparent;   /* überschreibt .search-flyout-form { background:#fff } */
    border-radius: 0;          /* keine Kapsel-Kante */
    box-shadow: none !important;         /* keine Schattenkante */
  }
  #search-flyout input[type="text"]{ padding-left: 0; }
  #search-flyout input::placeholder{ color: rgba(255,255,255,.35); }
}

/* ========== Desktop: nur SVG-Lupe zeigen, icon-morph verstecken ========== */
#search-toggle .icon-morph { display: none; }
#search-toggle .icon-search { display: block; }

@media (max-width: 768px) {
  /* Mobile: icon-morph zeigen, SVG-Lupe verstecken */
  #search-toggle .icon-morph { display: block; }
  #search-toggle .icon-search { display: none; }

  .search-filter-searchbar .search-submit-btn .icon-morph { display: block; }
  .search-filter-searchbar .search-submit-btn .icon-search { display: none; }
}

/* Safety: Mobile nutzt ausschließlich das Flyout */
@media (max-width: 768px){
  .mobile-search-wrapper { display: none !important; }
  .search-form-inline   { display: none !important; }
}

/* Spinner im Search-Toggle (Mobile) */
#search-toggle .icon-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  transition: opacity 0.1s ease;
}

#search-toggle .spinner-ring {
  width: 28px;
  height: 28px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Wenn loading: Spinner zeigen, Lupe/X verstecken */
#search-toggle.loading .icon-spinner {
  opacity: 1;
}

#search-toggle.loading .icon-morph,
#search-toggle.loading .icon-search {
  opacity: 0 !important;
  transition: none !important;
}

/* ===== Nur Cursor „fett“ (2px) – Fake-Caret, bis der/die User:in tippt ===== */
@keyframes caretBlink { 0%,50% {opacity:1} 50.01%,100% {opacity:0} }
@media (max-width: 768px){
  /* Klasse wird beim Öffnen gesetzt (siehe JS) */
  #search-flyout.fake-caret input { caret-color: transparent; }
  #search-flyout.fake-caret::after{
    content:"";
    position: absolute;
    /* Cursor exakt da starten lassen, wo vorher das Logo war:
       entspricht dem linken Innenabstand des Flyouts */
    left: calc(var(--logo-slot, 56px) + 12px);
    top: 50%;
    width: 2px;                 /* „fetter“ Cursor wie HM/Lupe */
    height: 1.35em;             /* gut sichtbar */
    background: #fff;
    border-radius: 1px;
    transform: translateY(-50%);
    animation: caretBlink 1s step-end infinite;
    pointer-events: none;
    z-index: 1;
  }
  /* Sobald getippt wird → Fake-Caret weg, normaler Caret zurück */
  #search-flyout.fake-caret.typing input { caret-color: #fff; }
  #search-flyout.fake-caret.typing::after { display: none; }
}

/* ===== Erweiterte Suche ===== */
.search-filters {
  margin: 1rem 0 1.5rem;
  padding: 0;
  background: transparent;
}

.search-filter-form {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

/* Suchleiste wie auf Index-Seite */
.search-filter-searchbar {
  display: flex;
  align-items: stretch; /* Button füllt volle Höhe wie auf Index */
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
}

.search-filter-searchbar input[type="text"] {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  color: #000;
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  padding: 0.7rem 1rem;
  outline: none;
  caret-color: #000;
}

.search-filter-searchbar input[type="text"]::placeholder {
  color: #888;
}

.search-submit-btn {
  flex-shrink: 0;
  align-self: stretch; /* Volle Höhe des Containers */
  background: var(--orange);
  border: none;
  padding: 0 1rem; /* Nur horizontal, Höhe vom Container */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: background 0.2s;
  position: relative;
}

.search-submit-btn svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.search-submit-btn:hover {
  background: #d66a00;
}

/* Lade-Spinner */
.search-submit-btn.loading svg,
.search-submit-btn.loading .icon-morph,
.search-submit-btn.loading .icon-search {
  display: none;
}

.search-submit-btn.loading::after {
  content: '';
  width: 20px;
  height: 20px;
  display: block;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  box-sizing: border-box;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Filter-Tabs (horizontal, ausklappbar wie Zeit.de) */
.search-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.search-filter-tab {
  position: relative;
}

.filter-tab-toggle {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.7rem;
  background: #333;
  border: 1px solid #555;
  border-radius: 4px;
  color: #bbb;
  font-family: "Montserrat", sans-serif;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s;
}

.filter-tab-toggle:hover {
  background: #3a3a3a;
  border-color: #666;
  color: #fff;
}

.filter-tab-toggle .chevron {
  transition: transform 0.2s;
}

.search-filter-tab.open .filter-tab-toggle {
  background: #444;
  border-color: var(--orange);
  color: #fff;
}

.search-filter-tab.open .filter-tab-toggle .chevron {
  transform: rotate(180deg);
}

/* Aktiver Filter-Indikator */
.filter-tab-toggle.has-selection {
  border-color: var(--orange);
  color: var(--orange);
}

/* Dropdown - standardmäßig versteckt! */
.filter-tab-dropdown {
  display: none !important;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 160px;
  background: #1a1a1a;
  border: 1px solid #444;
  border-radius: 4px;
  padding: 0.4rem 0;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* Nur wenn Tab offen ist, Dropdown anzeigen */
.search-filter-tab.open .filter-tab-dropdown {
  display: block !important;
}

.filter-tab-dropdown-scroll {
  max-height: 280px;
  overflow-y: auto;
}

.filter-tab-dropdown label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.8rem;
  color: #bbb;
  font-family: "Montserrat", sans-serif;
  font-size: 0.8rem;
  cursor: pointer;
}

.filter-tab-dropdown label:hover {
  color: #fff;
}

.filter-tab-dropdown label:hover input[type="radio"],
.filter-tab-dropdown label:hover input[type="checkbox"] {
  border-color: #999;
}

/* Custom Radio Buttons für Filter-Tabs - ORANGE */
.filter-tab-dropdown input[type="radio"],
.search-filter-tab input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border: 2px solid #666;
  border-radius: 50%;
  background: #222;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
  margin: 0;
}

.filter-tab-dropdown input[type="radio"]:checked,
.search-filter-tab input[type="radio"]:checked {
  border-color: var(--orange);
  background: var(--orange);
  box-shadow: inset 0 0 0 2px #222;
}

.filter-tab-dropdown input[type="radio"]:hover,
.search-filter-tab input[type="radio"]:hover {
  border-color: #888;
}

/* Custom Checkboxes für Filter-Tabs - ORANGE */
.filter-tab-dropdown input[type="checkbox"],
.search-filter-tab input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border: 2px solid #666;
  border-radius: 3px;
  background: #222;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
  position: relative;
  margin: 0;
}

.filter-tab-dropdown input[type="checkbox"]:checked,
.search-filter-tab input[type="checkbox"]:checked {
  border-color: var(--orange);
  background: var(--orange);
}

.filter-tab-dropdown input[type="checkbox"]:checked::after,
.search-filter-tab input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 0px;
  left: 3px;
  width: 4px;
  height: 7px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.filter-tab-dropdown input[type="checkbox"]:hover,
.search-filter-tab input[type="checkbox"]:hover {
  border-color: #888;
}

/* Scrollbar für Dropdown */
.filter-tab-dropdown-scroll::-webkit-scrollbar {
  width: 5px;
}

.filter-tab-dropdown-scroll::-webkit-scrollbar-track {
  background: #1a1a1a;
}

.filter-tab-dropdown-scroll::-webkit-scrollbar-thumb {
  background: #444;
  border-radius: 2px;
}

.filter-tab-dropdown-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--orange);
}

@media (max-width: 768px) {
  /* Suchseite Mobile: Lupe in Navbar verstecken */
  .search-filters ~ * .search-icon,
  body:has(.search-filters) nav .search-icon {
    display: none !important;
  }

  .search-filters {
    padding: 0;
    margin: 0;
  }

  /* Suchleiste zentriert zwischen Header und Dropdowns */
  .search-filter-searchbar {
    background: var(--bg-main);
    border-radius: 0;
    height: var(--mobile-header-h, 50px);
    position: relative;
    margin: 0.5rem 0;
  }

  .search-filter-searchbar input[type="text"] {
    background: transparent;
    color: #fff;
    font-size: 1.1rem;
    padding: 0 1rem;
    padding-right: 60px;
    caret-color: #fff;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
  }

  .search-filter-searchbar input[type="text"]::placeholder {
    color: rgba(255, 255, 255, 0.6);
  }

  .search-filter-searchbar .search-submit-btn {
    background: transparent !important;
    color: #fff;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 48px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    outline: none;
  }

  .search-filter-searchbar .search-submit-btn:hover,
  .search-filter-searchbar .search-submit-btn:active,
  .search-filter-searchbar .search-submit-btn:focus {
    background: transparent !important;
    outline: none;
  }

  .search-filter-searchbar .search-submit-btn svg {
    stroke: #fff;
    width: var(--mobile-icon-h, 32px);
    height: var(--mobile-icon-h, 32px);
  }

  .search-filter-searchbar .search-submit-btn.loading::after {
    width: var(--mobile-icon-h, 32px);
    height: var(--mobile-icon-h, 32px);
  }

  .search-filter-tabs {
    flex-wrap: wrap;
    padding: 0 0.8rem 0.5rem;
  }

  .search-filter-form {
    gap: 0;
  }

  .search-filters {
    margin-bottom: 0.5rem;
  }

  .filter-tab-dropdown {
    position: absolute;
    min-width: 200px;
  }
}

@media (min-width: 769px) {
  #mobile-menu { display: none !important; }
}