/* Trajan-Pro-Webfonts: ab v1.8.7 auf Latin-1 + Latin Extended-A
   verkleinert (deckt Deutsch inkl. Umlaute/ß sowie gängige weitere
   europäische Zeichen ab), statt des vollen Glyphensatzes des
   Original-Fonts. Regular: 138KB -> 50KB, Bold: 42KB -> 30KB.
   Eine echte WOFF2-Konvertierung (nochmal spuerbar kleiner) war in der
   verwendeten Build-Umgebung ohne Internetzugriff nicht möglich; WOFF
   bleibt bis dahin das Ausgabeformat. */
@font-face{
  font-family:'Cure Trajan';
  font-style:normal;
  font-weight:400;
  src:url('TrajanPro-Regular.woff') format('woff');
  font-display:swap;
}
@font-face{
  font-family:'Cure Trajan';
  font-style:normal;
  font-weight:700;
  src:url('TrajanPro-Bold.woff') format('woff');
  font-display:swap;
}

/* =========================================================
   A Strange Night – App Shell 1.7.0
   Mobile-first. Bestehende Plugin-Daten/-Funktionen unverändert.

   Diese Datei konsolidiert alle über die Versionen 1.2.0–1.6.9
   gewachsenen, sich teils überschreibenden Regelblöcke (u.a.
   Hamburger-Button und untere Navigation lagen zuletzt in bis zu
   drei Schichten vor) zu je EINER Definition pro Selektor.
   ========================================================= */

/* Cross-Document View Transitions (1.7.18): sanfter Fade zwischen
   kompletten Seitenaufrufen statt hartem weißen Wechsel. Native
   Browser-Funktion (Chrome/Edge 126+, Safari 18.2+); Browser ohne
   Unterstützung (aktuell Firefox) ignorieren die Regel einfach und
   zeigen weiterhin den gewohnten Wechsel - kein Fallback nötig.
   Header und untere Navigation bekommen eigene view-transition-name,
   damit sie beim Wechsel ruhig stehen bleiben statt mitzublenden. */
@view-transition{ navigation:auto; }
::view-transition-old(root),
::view-transition-new(root){ animation-duration:.22s; }
.cure-app-header{ view-transition-name:cure-vt-header; }

/* 1.7.34 — Mobile Header-Shrink (Verhalten/Transitions).
   Die tatsächliche Geometrie (Höhen, Safe-Area) steht gebündelt im Abschnitt
   "Final mobile shell geometry" weiter unten - hier wird nur noch definiert,
   WIE der Wechsel sich anfühlt, nicht WOHIN er geht. Der große Header bleibt
   am Seitenanfang sichtbar; beim Abwärtsscrollen wird er kompakt: der
   Untertitel blendet aus, der Titel wird spürbar kleiner (vorher blieb er
   fälschlich gleich groß bzw. wurde sogar größer) und der Hamburger bleibt
   gut erreichbar. Beim Hochscrollen kommt die große Variante zurück. */
@media (max-width:767px){
  .cure-app-header{
    transition:height .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s ease;
    will-change:height;
  }
  .cure-app-header__inner{
    transition:transform .28s cubic-bezier(.22,.61,.36,1), height .28s ease;
  }
  .cure-app-brand strong{
    transition:font-size .22s ease, letter-spacing .22s ease;
  }
  .cure-app-brand small{
    transition:opacity .16s ease, max-height .22s ease, transform .22s ease;
    max-height:20px;
  }
  .cure-app-header--compact{
    box-shadow:0 4px 18px rgba(0,0,0,.18);
  }
  .cure-app-header--compact .cure-app-brand small{
    opacity:0;
    max-height:0;
    transform:translateY(-4px);
    overflow:hidden;
  }
  body.cure-app-shell-active .rr-app,
  body.cure-app-shell-active .cpm{
    scroll-margin-top:16px;
  }
}

/* 1.7.30 — Scroll reveal für Event-Karten/Bilder. Kein Zoom, nur ein
   dezentes Hochgleiten mit kurzem Fade. */
@media (max-width:767px){
  body.cure-app-shell-active .cure-scroll-reveal{
    opacity:0;
    transform:translate3d(0,28px,0);
    transition:opacity .5s ease, transform .55s cubic-bezier(.22,.61,.36,1);
    will-change:opacity,transform;
  }
  body.cure-app-shell-active .cure-scroll-reveal.cure-scroll-reveal--visible{
    opacity:1;
    transform:none;
  }
}

.cure-app-bottom{ view-transition-name:cure-vt-bottom; }

:root{
  /* Farben */
  --cure-bg:#eeedeb;
  --cure-surface:#ffffff;
  --cure-surface-soft:#f6f5f4;
  --cure-text:#171717;
  --cure-muted:#666666;
  --cure-line:#d8d5d2;
  --cure-dark:#140808;
  --cure-dark-2:#160909;
  --cure-red:#b20e0a;
  /* 1.10.0: Rot als SCHRIFTFARBE (Links, Kicker). Im Hellen identisch mit
     --cure-red, im Dunkelmodus aufgehellt, damit es lesbar bleibt.
     Rote FLAECHEN (Buttons, Navigation) nutzen weiter --cure-red. */
  --cure-accent:var(--cure-red);
  --cure-text-soft:#222222;
  --cure-muted-strong:#555555;
  --cure-chrome-text:#ffffff;
  --cure-border-dark:rgba(255,255,255,.14);

  /* Einheitliche Schriftgrößen-Skala – überall dieselben Werte,
     egal ob Header, Drawer, untere Navigation oder Inhalt. */
  --fs-caption:14px;   /* Metatext, "small", Fußnoten */
  --fs-body:16px;      /* Fließtext, Links, Buttons, Navigationspunkte, Formularfelder */
  --fs-label:16px;     /* Untere Navigation, Brand-Titel im Header/Drawer */
  --fs-h3:18px;
  --fs-h2:22px;
  --fs-h1-mobile:32px;
  --fs-h1-desktop:36px;

  /* Abstände / Radien für ein einheitliches, ruhigeres Erscheinungsbild */
  --cure-radius:10px;
  --cure-header-h:64px;
  --cure-header-h-desktop:72px;
}

html.cure-app-menu-open{ overflow:hidden; }

body.cure-app-shell-active{
  background:var(--cure-bg) !important;
  color:var(--cure-text) !important;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,Helvetica,sans-serif !important;
  font-size:var(--fs-body) !important;
  line-height:1.55 !important;
  padding-top:calc(var(--cure-header-h) + 10px) !important;
  padding-bottom:82px !important;
}

/* Bestehende CPM-Navigation wird nur innerhalb dieser Shell versteckt;
   Daten/Funktion des Plugins bleiben unberührt. */
body.cure-app-shell-active .cpm-sticky-navigation,
body.cure-app-shell-active .cpm-sticky-navigation-wrap{
  display:none !important;
}

body.cure-app-shell-active a,
body.cure-app-shell-active a:visited,
body.cure-app-shell-active a:hover,
body.cure-app-shell-active a:focus-visible{
  color:var(--cure-accent) !important;
}

body.cure-app-shell-active p,
body.cure-app-shell-active li,
body.cure-app-shell-active label,
body.cure-app-shell-active input,
body.cure-app-shell-active textarea,
body.cure-app-shell-active select,
body.cure-app-shell-active button{
  font-family:inherit;
  font-size:var(--fs-body);
  line-height:1.55;
}

body.cure-app-shell-active h1{ font-size:var(--fs-h1-mobile) !important; line-height:1.1; font-weight:900; color:var(--cure-text) !important; margin:0 0 12px; }
body.cure-app-shell-active h2{ font-size:var(--fs-h2) !important; line-height:1.2; font-weight:800; color:var(--cure-text) !important; margin:0; }
body.cure-app-shell-active h3{ font-size:var(--fs-h3) !important; line-height:1.25; font-weight:800; color:var(--cure-text) !important; margin:0; }

@media (min-width:768px){
  body.cure-app-shell-active h1{ font-size:var(--fs-h1-desktop) !important; }
}

/* Inhaltsbreite von RR / CPM innerhalb der Shell vereinheitlichen */
body.cure-app-shell-active .rr-app,
body.cure-app-shell-active .cpm{
  max-width:1180px;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* =========================================================
   Kopfzeile mit Hamburger-Button
   ========================================================= */
.cure-app-header{
  position:fixed; top:0; left:0; right:0;
  height:var(--cure-header-h);
  z-index:100000;
  background:rgba(17,17,20,.97);
  border-bottom:1px solid var(--cure-border-dark);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  color:#fff;
}
.cure-app-header__inner{
  height:100%; max-width:1180px; margin:0 auto; padding:0 14px;
  display:grid; grid-template-columns:minmax(0,1fr) 52px; align-items:center; gap:10px;
}
.cure-app-header__spacer{ display:none; }

.cure-app-brand{
  min-width:0; color:#fff !important; text-decoration:none !important;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  line-height:1.15; text-align:center; gap:3px;
}
.cure-app-brand strong{ font-family:'Cure Trajan',Georgia,serif !important; font-size:clamp(16px,2.2vw,24px); letter-spacing:.08em; font-weight:700 !important; color:#fff !important; white-space:nowrap; }
.cure-app-brand small{
  color:#9a9a9f; font-size:var(--fs-caption); letter-spacing:.02em; font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:70vw;
}
/* Fortschrittslinie unter dem Header (1.7.34) - Kind des Headers, damit sie
   sich beim Schrumpfen automatisch mitbewegt statt separat berechnet werden
   zu müssen. scaleX wird per JS anhand des Scrollfortschritts gesetzt. */
.cure-app-header__progress{
  position:absolute; left:0; bottom:0; width:100%; height:2px;
  background:var(--cure-red); transform:scaleX(0); transform-origin:0 50%;
  pointer-events:none;
}

/* Hamburger-Button. Konsolidiert aus drei zuvor übereinanderliegenden
   Fassungen (Basis, 1.6.7 "final overrides"); Button ist ein SVG-Icon,
   keine <span>-Linien mehr – die alten span-Regeln dafür entfernt. */
.cure-app-menu-button{
  width:46px !important; height:46px !important;
  justify-self:end;
  padding:0 !important;
  display:flex !important; flex-direction:column; align-items:center !important; justify-content:center !important; gap:5px;
  border:1px solid rgba(255,255,255,.45) !important;
  background:transparent !important;
  color:#fff !important;
  cursor:pointer; border-radius:8px !important;
  box-shadow:none !important;
  transition:background-color .18s ease,border-color .18s ease;
}
.cure-app-menu-button:hover,
.cure-app-menu-button:focus-visible{
  background:rgba(255,255,255,.08) !important;
  border-color:#fff !important;
  outline:none;
}
/* Sofortiges "Aufleuchten" bei Berührung (1.7.18), wie native Apps. */
.cure-app-menu-button:active{
  background:rgba(255,255,255,.16) !important;
  transform:scale(.94);
}
.cure-app-menu-button svg{ display:block; width:28px; height:28px; fill:none; overflow:visible; }
.cure-app-menu-button svg path{ fill:none; stroke:#fff; stroke-width:1.8; stroke-linecap:round; vector-effect:non-scaling-stroke; }

/* =========================================================
   Menü-Drawer – bewusst reduziert und elegant
   ========================================================= */
.cure-app-drawer{ position:fixed; inset:0; z-index:100001; }
.cure-app-drawer[hidden]{ display:none; }
.cure-app-drawer__backdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(2px);
}
.cure-app-drawer__panel{
  position:absolute; left:0; top:0; bottom:0;
  width:min(88vw,380px);
  background:var(--cure-dark);
  color:#fff;
  box-shadow:22px 0 60px rgba(0,0,0,.38);
  overflow:auto; overscroll-behavior:contain;
  animation:cureDrawerIn .2s ease-out;
  display:flex; flex-direction:column;
}
@keyframes cureDrawerIn{ from{ transform:translateX(-24px); opacity:0; } to{ transform:none; opacity:1; } }

.cure-app-drawer__top{
  min-height:78px; padding:20px 18px 16px;
  border-bottom:1px solid var(--cure-border-dark);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex:0 0 auto;
}
.cure-app-drawer__top b{ display:block; font-family:'Cure Trajan',Georgia,serif !important; font-size:clamp(15px,2vw,22px); font-weight:700 !important; letter-spacing:.06em; color:#fff !important; }
.cure-app-drawer__top small{ display:block; margin-top:5px; color:#fff; opacity:.72; font-size:var(--fs-caption); font-weight:500; }

.cure-app-close{
  border:0; background:rgba(255,255,255,.06); color:#fff;
  font-size:22px; line-height:1; width:38px; height:38px; border-radius:var(--cure-radius);
  cursor:pointer; transition:background-color .15s ease;
}
.cure-app-close:hover,
.cure-app-close:focus-visible{ background:rgba(255,255,255,.14); outline:none; }

.cure-app-drawer__nav{ padding:10px; flex:1 1 auto; }
.cure-app-drawer__nav a{
  display:flex; align-items:center; gap:14px;
  min-height:52px; padding:9px 14px; margin:2px 0; text-decoration:none !important;
  border-radius:var(--cure-radius);
  font-size:var(--fs-label);
  transition:background-color .15s ease;
}
.cure-app-drawer__nav a:hover,
.cure-app-drawer__nav a:focus-visible{
  background:rgba(255,255,255,.07);
  outline:none;
}
.cure-app-drawer__nav a:active{
  background:rgba(255,255,255,.16);
}
.cure-app-drawer__nav a.is-active{
  font-weight:700;
}
.cure-app-drawer__nav a.is-active svg{ stroke:#fff; }
.cure-app-drawer__nav svg{
  width:20px; height:20px; flex:0 0 20px;
  fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.cure-app-drawer__nav a:first-child{ margin-bottom:8px; }

/* Musikdienste: nur beim aktiven Navigationspunkt „Hören“ sichtbar. */
.cure-app-media-buttons[hidden]{display:none !important;}
.cure-app-media-buttons{
  position:fixed !important; left:50% !important; bottom:calc(96px + env(safe-area-inset-bottom)) !important;
  transform:translateX(-50%) !important; z-index:100001 !important;
  display:flex !important; align-items:center !important; justify-content:center !important; gap:10px !important;
  width:max-content !important; max-width:calc(100% - 24px) !important;
  padding:0 !important; margin:0 !important; background:transparent !important;
  pointer-events:auto !important;
}
.cure-app-media-button{
  display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:8px !important;
  min-width:128px !important; min-height:38px !important; padding:8px 16px !important;
  border-radius:999px !important; text-decoration:none !important;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif !important;
  font-size:15px !important; line-height:1 !important; font-weight:700 !important;
  box-sizing:border-box !important; box-shadow:0 5px 18px rgba(0,0,0,.28) !important;
  transition:transform .15s ease,filter .15s ease !important;
}
.cure-app-media-button:hover,.cure-app-media-button:focus-visible{transform:translateY(-1px) !important;filter:brightness(1.08) !important;outline:none !important;}
.cure-app-media-button--spotify{background:#191414 !important;color:#fff !important;border:1px solid rgba(255,255,255,.18) !important;}
.cure-app-media-button--spotify svg{stroke:#1DB954 !important;color:#1DB954 !important;}
.cure-app-media-button--tidal{background:#050505 !important;color:#fff !important;border:1px solid rgba(255,255,255,.42) !important;}
.cure-app-media-button--tidal svg{stroke:#fff !important;color:#fff !important;}
/* 1.8.12 — Schrift weiß: die seitenweite Linkfarbe (body.cure-app-shell-active a,
   rot) war spezifischer und hat das Weiß der Buttons überschrieben. */
body.cure-app-shell-active a.cure-app-media-button,
body.cure-app-shell-active a.cure-app-media-button:visited,
body.cure-app-shell-active a.cure-app-media-button:hover,
body.cure-app-shell-active a.cure-app-media-button:focus-visible,
body.cure-app-shell-active a.cure-app-media-button span{color:#fff !important;}
.cure-app-media-button svg{width:19px !important;height:19px !important;display:block !important;fill:none !important;stroke-width:1.9 !important;stroke-linecap:round !important;stroke-linejoin:round !important;flex:0 0 19px !important;}
@media(min-width:768px){
  .cure-app-media-buttons{bottom:calc(104px + env(safe-area-inset-bottom)) !important;}
  .cure-app-media-button{min-width:142px !important;min-height:42px !important;padding:10px 18px !important;font-size:16px !important;}
  .cure-app-media-button svg{width:20px !important;height:20px !important;flex-basis:20px !important;}
}
@media(max-width:767px){
  .cure-app-media-buttons{bottom:calc(78px + env(safe-area-inset-bottom)) !important;gap:8px !important;max-width:calc(100% - 20px) !important;}
  .cure-app-media-button{min-width:112px !important;min-height:36px !important;padding:8px 12px !important;font-size:14px !important;}
  .cure-app-media-button svg{width:18px !important;height:18px !important;flex-basis:18px !important;}
}

/* =========================================================
   Untere App-Navigation. Konsolidiert aus drei zuvor
   übereinanderliegenden Fassungen (Basis, 1.6.6-Fix, 1.6.7 "final
   overrides") zu einer Quelle. !important bleibt bewusst erhalten:
   einige Themes/Elementor-Regeln vergrößern sonst Höhe/Padding der
   Items. background ist deckend (#b20e0a, kein Alphakanal) – ein
   backdrop-filter dahinter wäre unsichtbar und nur unnötige
   GPU-Last, deshalb entfernt.
   Fix ggü. vorher: padding:0 hat env(safe-area-inset-bottom) bisher
   überschrieben, wodurch die Leiste auf iPhones mit Home-Indicator
   den Inhalt/die Gesten-Leiste überdeckte. Jetzt wächst die äußere
   Leiste inklusive Safe-Area, die Icons bleiben in den oberen 68px
   zentriert. */
.cure-app-bottom{
  position:fixed; left:50% !important; right:auto !important; bottom:12px !important; z-index:100000;
  width:min(820px,calc(100% - 24px)) !important;
  height:calc(72px + env(safe-area-inset-bottom)) !important;
  min-height:calc(72px + env(safe-area-inset-bottom)) !important;
  max-height:calc(72px + env(safe-area-inset-bottom)) !important;
  transform:translateX(-50%) !important;
  background:#b20e0a !important;
  border:1px solid rgba(255,255,255,.32) !important;
  border-radius:18px !important;
  padding:0 !important;
  padding-bottom:env(safe-area-inset-bottom) !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
  box-shadow:0 10px 35px rgba(0,0,0,.35) !important;
}
.cure-app-bottom__inner{
  width:100% !important; height:72px !important; min-height:72px !important;
  max-width:760px; margin:0 auto !important;
  /* War fest auf repeat(4,...) verdrahtet - passend zu den bisher immer
     genau 4 Einträgen (3 Wünsche-Ziele + "Mehr"). Sobald render_footer()
     zusätzliche Seiten aus dem Backend einblendet, muss sich die
     Spaltenzahl mitziehen, sonst rutscht "Mehr" in eine zweite Zeile
     oder die Spalten werden zu schmal. flex verteilt beliebig viele
     Einträge gleichmäßig, ohne dass hier eine Zahl gepflegt werden muss. */
  display:flex !important;
  padding:0 !important; box-sizing:border-box !important;
}
.cure-app-bottom__item{
  position:relative !important; width:100% !important; min-width:0;
  flex:1 1 0 !important;
  height:72px !important; min-height:72px !important; max-height:72px !important;
  padding:7px 4px 5px !important; margin:0 !important;
  display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important;
  gap:4px !important; border:0 !important; border-radius:0 !important; background:transparent !important;
  color:#fff !important; text-decoration:none !important;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif !important;
  font-size:16px !important; font-weight:600 !important; line-height:1 !important;
  cursor:pointer; box-sizing:border-box !important;
  transition:color .15s ease,background-color .12s ease,transform .12s ease;
}
.cure-app-bottom__item:hover,
.cure-app-bottom__item:focus-visible{ color:#fff !important; background:rgba(0,0,0,.10) !important; outline:none; }
.cure-app-bottom__item:active{ background:rgba(0,0,0,.18) !important; transform:scale(.96); }
.cure-app-bottom__item.is-active{ font-weight:700 !important; }
.cure-app-bottom__item.is-active:after{
  content:""!important; position:absolute !important; left:50% !important; bottom:4px !important;
  transform:translateX(-50%) !important; width:30px !important; height:3px !important;
  background:#fff !important; border-radius:3px !important;
}
.cure-app-bottom__item svg,
.cure-app-bottom__item svg path,
.cure-app-bottom__item svg rect,
.cure-app-bottom__item svg circle{
  fill:none !important; stroke:#fff !important;
}
.cure-app-bottom__item svg{
  display:block !important; width:24px !important; height:24px !important; flex:0 0 24px !important;
  stroke-width:1.8 !important;
}
/* 1.8.0 — Icon steckt jetzt in einem eigenen Wrapper-Span
   (.cure-app-bottom__icon), damit die mobile Compact-Navigation weiter
   unten ausschließlich das Label einklappen kann, nie das Icon selbst. Der
   Wrapper braucht dieselbe feste Flex-Box wie vorher die SVG direkt, sonst
   würde er als normaler Inline-Span in der Spalte falsch sitzen. */
.cure-app-bottom__icon{
  display:flex !important; align-items:center !important; justify-content:center !important;
  width:24px !important; height:24px !important; flex:0 0 24px !important;
}
.cure-app-bottom__item span:last-child{
  color:#fff !important; font-size:16px !important; line-height:1.05 !important;
  /* font-size wird von app-shell.js pro Button anhand der tatsächlich
     verfügbaren Breite dynamisch verkleinert (setProperty(...,'important')
     überschreibt dieses !important gezielt). overflow:hidden + ellipsis
     sind nur das Sicherheitsnetz, falls JS deaktiviert ist oder ein Label
     trotz Minimalschrift noch nicht passt - dann wird abgeschnitten statt
     dass der Text in den Nachbar-Button läuft. */
  display:block !important; width:100% !important; text-align:center !important;
  white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
  box-sizing:border-box !important;
}
.cure-app-more-dots{ color:#fff !important; font-size:20px !important; line-height:18px !important; height:23px !important; flex:0 0 23px !important; letter-spacing:3px !important; }
/* Auf dem Handy volle Breite, am unteren Rand angedockt, inkl. Safe-Area
   für den Home-Indicator (siehe Erklärung oben). */
/* Mobile Geometrie (Höhen, Radien, Safe-Area) ist bewusst NICHT hier
   definiert - siehe "Final mobile shell geometry" weiter unten. Das ist die
   einzige Stelle, die die Bottom-Navigation unter 768px bemaßt; frühere
   Versionen hatten dafür drei sich teils widersprechende Blöcke. */

/* =========================================================
   Bestehende Wünsche-/Release-Rewind-Inhalte an die Shell
   angleichen – gleiche Schriftgrößen wie überall sonst.
   ========================================================= */
body.cure-app-shell-active .cpm-main-nav,
body.cure-app-shell-active .cpm-live-stats,
body.cure-app-shell-active .cpm-live-stats--mobile,
body.cure-app-shell-active .cpm-stats-filter,
body.cure-app-shell-active .cpm-stats-sections,
body.cure-app-shell-active .cpm-stat-section,
body.cure-app-shell-active .cpm-ranking-list,
body.cure-app-shell-active .cpm-dna-list,
body.cure-app-shell-active .cpm-hours,
body.cure-app-shell-active .cpm-music-listen-standalone,
body.cure-app-shell-active .cpm-music-listen-embed{
  color:var(--cure-text) !important;
  background:transparent !important;
  font-size:var(--fs-body) !important;
}
body.cure-app-shell-active .cpm-live-stats,
body.cure-app-shell-active .cpm-live-stats--mobile,
body.cure-app-shell-active .cpm-stats-filter,
body.cure-app-shell-active .cpm-stats-sections,
body.cure-app-shell-active .cpm-stat-section,
body.cure-app-shell-active .cpm-ranking-list,
body.cure-app-shell-active .cpm-dna-list,
body.cure-app-shell-active .cpm-hours{
  background:var(--cure-surface) !important;
}
body.cure-app-shell-active .cpm-live-stats--mobile,
body.cure-app-shell-active .cpm-hero{
  max-width:1000px !important;
  margin:0 auto 28px !important;
  padding:0 14px !important;
  box-sizing:border-box !important;
}

body.cure-app-shell-active .cpm-hero .cpm-kicker,
body.cure-app-shell-active .cpm-kicker{
  color:var(--cure-accent) !important;
  font-size:var(--fs-body) !important;
  font-weight:800 !important;
  letter-spacing:.08em !important;
  margin:0 0 10px !important;
}
body.cure-app-shell-active .cpm-hero h1,
body.cure-app-shell-active .cpm-hero .cpm-title{
  font-size:var(--fs-h1-mobile) !important;
  margin:0 0 12px !important;
}
@media (min-width:768px){
  body.cure-app-shell-active .cpm-hero h1,
  body.cure-app-shell-active .cpm-hero .cpm-title{ font-size:var(--fs-h1-desktop) !important; }
}
body.cure-app-shell-active .cpm-hero .cpm-intro{
  color:var(--cure-text-soft) !important;
  font-size:var(--fs-body) !important;
  margin:0 !important;
}
body.cure-app-shell-active .cpm-hero .cpm-intro a{ color:var(--cure-accent) !important; }

body.cure-app-shell-active .cpm-main-nav__link{
  color:var(--cure-muted-strong) !important;
  font-size:var(--fs-caption) !important;
}
body.cure-app-shell-active .cpm-main-nav__link:hover,
body.cure-app-shell-active .cpm-main-nav__link.is-active{ color:var(--cure-accent) !important; }

body.cure-app-shell-active .cpm-live-stats--mobile .cpm-filter-pills button,
body.cure-app-shell-active .cpm-live-stats--mobile .cpm-filter-custom button{
  font-size:var(--fs-body) !important;
  border-color:var(--cure-text) !important;
  color:var(--cure-text) !important;
  background:var(--cure-surface) !important;
  border-radius:6px !important;
}
body.cure-app-shell-active .cpm-live-stats--mobile .cpm-filter-pills button.is-active{
  background:var(--cure-red) !important;
  border-color:var(--cure-red) !important;
  color:#fff !important;
}
body.cure-app-shell-active .cpm-live-stats--mobile .cpm-filter-datetime input{
  font-size:var(--fs-body) !important;
  color:var(--cure-text) !important;
  background:var(--cure-surface) !important;
}
body.cure-app-shell-active .cpm-live-stats--mobile .cpm-filter-active{
  border-left-color:var(--cure-red) !important;
  background:var(--cure-surface-soft) !important;
  font-size:var(--fs-body) !important;
}
body.cure-app-shell-active .cpm-live-stats--mobile .cpm-section-heading small,
body.cure-app-shell-active .cpm-live-stats--mobile .cpm-section-heading span{
  color:var(--cure-accent) !important;
}
body.cure-app-shell-active .cpm-live-stats--mobile .cpm-section-heading h2{ font-size:var(--fs-h2) !important; }
body.cure-app-shell-active .cpm-live-stats--mobile .cpm-section-note,
body.cure-app-shell-active .cpm-live-stats--mobile .cpm-stats-footer{
  font-size:var(--fs-caption) !important;
  color:var(--cure-muted) !important;
}
body.cure-app-shell-active .cpm-live-stats--mobile .cpm-ranking-row,
body.cure-app-shell-active .cpm-live-stats--mobile .cpm-dna-row,
body.cure-app-shell-active .cpm-live-stats--mobile .cpm-hour-row,
body.cure-app-shell-active .cpm-live-stats--mobile .cpm-ranking-row strong,
body.cure-app-shell-active .cpm-live-stats--mobile .cpm-dna-row strong,
body.cure-app-shell-active .cpm-live-stats--mobile .cpm-song-title{
  font-size:var(--fs-body) !important;
}
body.cure-app-shell-active .cpm-live-stats--mobile .cpm-rank{ color:var(--cure-accent) !important; font-weight:800 !important; }
body.cure-app-shell-active .cpm-live-stats--mobile .cpm-song-title{ font-weight:800 !important; }
body.cure-app-shell-active .cpm-live-stats--mobile .cpm-song-artist,
body.cure-app-shell-active .cpm-live-stats--mobile .cpm-song-metrics{ font-size:var(--fs-caption) !important; }
body.cure-app-shell-active .cpm-live-stats--mobile .cpm-hour-row i{ background:var(--cure-red) !important; }

body.cure-app-shell-active .cpm button,
body.cure-app-shell-active .cpm a.button,
body.cure-app-shell-active .cpm input[type="submit"],
body.cure-app-shell-active .cpm .button{
  font-family:inherit !important;
  font-size:var(--fs-body) !important;
}
body.cure-app-shell-active .cpm button.is-active,
body.cure-app-shell-active .cpm input[type="submit"]{
  background:var(--cure-red) !important;
  border-color:var(--cure-red) !important;
  color:#fff !important;
}

/* Innerhalb der dunklen App-Chrome keine Unterstreichungen */
.cure-app-header a,
.cure-app-drawer a,
.cure-app-bottom a{ text-decoration:none !important; }

@media (prefers-reduced-motion:reduce){
  .cure-app-drawer__panel,
  .cure-app-menu-button{ animation:none; transition:none; }
}

/* =========================================================
   Responsive: kleine Screens
   ========================================================= */
@media (max-width:480px){
  .cure-app-drawer__panel{ width:min(92vw,380px); }
}

/* =========================================================
   Responsive: ab Tablet
   ========================================================= */
@media (min-width:768px){
  :root{ --cure-header-h-active:var(--cure-header-h-desktop); }
  body.cure-app-shell-active{
    padding-top:calc(var(--cure-header-h-desktop) + 12px) !important;
    padding-bottom:28px !important;
  }
  .cure-app-header{ height:var(--cure-header-h-desktop); }
  .cure-app-header__inner{ padding:0 24px; }
  .cure-app-drawer__panel{ width:380px; }
  /* .cure-app-bottom / __item werden ab hier bereits vollständig
     durch den konsolidierten !important-Block oben gesteuert
     (Fenster, Radius, Höhe etc.) – hier ist nichts mehr zu setzen. */
}

/* =========================================================
   Startseite mit Club-Video
   ========================================================= */
.cure-app-start-video{
  position:fixed; inset:0; z-index:0; overflow:hidden; background:#120707;
}
.cure-app-start-video video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:saturate(.82) contrast(1.02) brightness(.68);
}
.cure-app-start-video__shade{
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.48) 0%,rgba(0,0,0,.14) 42%,rgba(0,0,0,.72) 100%);
}
.cure-app-start-video__content{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(92vw,900px); text-align:center; color:#fff;
  text-shadow:0 2px 20px rgba(0,0,0,.55);
}
.cure-app-start-video__content span{ display:block; font-family:'Cure Trajan',Georgia,serif !important; font-size:clamp(12px,2vw,18px); line-height:1.2; letter-spacing:.28em; font-weight:400; margin-bottom:14px; text-transform:uppercase; }
.cure-app-start-video__content strong{ display:block; font-family:'Cure Trajan',Georgia,serif !important; font-size:clamp(34px,7vw,76px); line-height:1; letter-spacing:.025em; font-weight:700; white-space:nowrap; text-transform:uppercase; }
.cure-app-start-video__content small{ display:block; margin-top:18px; font-family:'Cure Trajan',Georgia,serif !important; font-size:clamp(11px,1.7vw,18px); line-height:1.3; letter-spacing:.16em; font-weight:400; color:rgba(255,255,255,.9); text-transform:none; }
body.cure-app-shell-active:has(.cure-app-start-video){ background:#120707 !important; }
/* Auf der Startseite ist das Video wirklich der Hintergrund. Die vorhandene
   WordPress/Elementor-Seite darf es nicht mit einer weißen Fläche überdecken. */
body.cure-app-shell-active:has(.cure-app-start-video) > *:not(.cure-app-header):not(.cure-app-drawer):not(.cure-app-bottom):not(.cure-app-start-video):not(script){
  background:transparent !important;
}
body.cure-app-shell-active:has(.cure-app-start-video) main,
body.cure-app-shell-active:has(.cure-app-start-video) .site-content,
body.cure-app-shell-active:has(.cure-app-start-video) .elementor,
body.cure-app-shell-active:has(.cure-app-start-video) .elementor-section,
body.cure-app-shell-active:has(.cure-app-start-video) .elementor-container,
body.cure-app-shell-active:has(.cure-app-start-video) .elementor-widget-wrap{
  background:transparent !important;
}
/* Der Startseiteninhalt liegt hinter dem Video; Header/Drawer/Bottom-Navigation
   behalten ihre hohen z-index-Werte und bleiben klickbar. */
body.cure-app-shell-active:has(.cure-app-start-video) .cure-app-start-video{
  z-index:10;
}
body.cure-app-shell-active:has(.cure-app-start-video) .cure-app-header,
body.cure-app-shell-active:has(.cure-app-start-video) .cure-app-drawer,
body.cure-app-shell-active:has(.cure-app-start-video) .cure-app-bottom{
  z-index:100000 !important;
}

/* =========================================================
   Backend / Admin-Einstellungsseite
   ========================================================= */
.cure-app-admin{ max-width:1180px; }
.cure-app-admin .description{ max-width:980px; }
.cure-admin-card{
  margin:20px 0; padding:20px; background:#fff;
  border:1px solid #dcdcde; border-radius:10px; box-shadow:0 1px 2px rgba(0,0,0,.03);
}
.cure-admin-card h2{ margin-top:0; font-size:18px; }
.cure-admin-checks{ display:flex; gap:28px; flex-wrap:wrap; }
.cure-admin-checks label{ font-weight:600; }
.cure-page-table .col-check{ width:65px; text-align:center; }
.cure-page-table td{ vertical-align:middle; }
.cure-auto{ color:#2271b1; font-weight:600; }
.cure-sortable-list{ max-width:780px; margin:14px 0 10px; }
.cure-sortable-row{
  display:flex; align-items:center; gap:12px; min-height:48px; padding:7px 10px; margin:5px 0;
  background:#f6f7f7; border:1px solid #dcdcde; border-radius:7px; cursor:grab;
}
.cure-sortable-row:hover{ background:#f0f0f1; }
.cure-sortable-row.is-dragging{ opacity:.45; }
.cure-sortable-row span{ flex:1; font-weight:600; }
.cure-sortable-row a{ text-decoration:none; }
.cure-icon-picker{ width:150px; min-height:38px; flex:0 0 150px; }
.cure-drag{ border:0; background:transparent; color:#50575e; font-size:18px; padding:5px 7px; cursor:grab; border-radius:5px; }
.cure-drag:focus-visible{ outline:2px solid #2271b1; outline-offset:1px; }
.cure-page-picker{ display:block; min-width:min(780px,100%); max-width:780px; margin:12px 0; }
.cure-empty{ color:#646970; font-style:italic; }
.cure-add-pages{ margin-bottom:4px !important; }

@media (max-width:782px){
  .cure-admin-card{ padding:14px; }
  .cure-sortable-row{ gap:8px; flex-wrap:wrap; }
  .cure-icon-picker{ flex:0 0 145px; width:145px; }
  .cure-sortable-row a{ font-size:12px; }
  .cure-page-picker{ width:100%; }
}

.cure-video-picker{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.cure-video-picker #cure-start-video-name{color:#555;}

@media (max-width:520px){.cure-app-start-video__content{width:96vw}.cure-app-start-video__content strong{font-size:clamp(28px,9vw,48px);white-space:normal}.cure-app-start-video__content span{font-size:11px;letter-spacing:.2em}.cure-app-start-video__content small{font-size:10px;letter-spacing:.11em}}

/* 1.6.8 – Hamburger-Menü: weißer Trajan-Text, rote Drei-Punkt-Indikatoren. */
.cure-app-drawer__nav a,
.cure-app-drawer__nav a:visited,
.cure-app-drawer__nav a:hover,
.cure-app-drawer__nav a:focus-visible{
  color:#fff !important;
  font-family:'Cure Trajan',Georgia,serif !important;
  font-size:clamp(17px,4.3vw,22px) !important;
  font-weight:400 !important;
  letter-spacing:.01em !important;
}
.cure-app-drawer__nav a > span{color:#fff !important;}
.cure-app-drawer__nav a > svg{color:#b20e0a !important;stroke:#b20e0a !important;flex:0 0 28px;width:28px;height:28px;}
.cure-app-drawer__nav a:first-child > svg{color:#fff !important;stroke:#fff !important;}
.cure-app-drawer__nav a.is-active{background:#b20e0a !important;box-shadow:none !important;}
.cure-app-drawer__nav a.is-active > span{color:#fff !important;}
.cure-app-drawer__nav a.is-active > svg{color:#fff !important;stroke:#fff !important;}
.cure-app-drawer__nav a > svg circle{fill:currentColor !important;stroke:currentColor !important;}
.cure-app-drawer__nav a > svg path{stroke:currentColor !important;}
.cure-label-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px;max-width:780px;}
.cure-label-grid label{display:flex;flex-direction:column;gap:5px;font-weight:600;}
.cure-label-grid input,
.cure-sortable-row input{width:100%;box-sizing:border-box;min-height:38px;padding:7px 9px;border:1px solid #c3c4c7;border-radius:6px;background:#fff;color:#1d2327;}
.cure-sortable-row > span{flex:1;}
.cure-sortable-row input{font-weight:600;}
@media(max-width:600px){.cure-label-grid{grid-template-columns:1fr}.cure-app-drawer__nav a{font-size:18px !important;gap:12px;min-height:56px;padding:9px 10px}.cure-app-drawer__nav a > svg{flex-basis:28px;width:28px;height:28px}}


/* 1.6.9 – „Weitere Optionen“ bewusst fast unsichtbar, sekundär und grau. */
.cure-app-extra{
  margin:30px 10px 8px !important;
  padding-top:12px !important;
  border-top:1px solid rgba(255,255,255,.07) !important;
}
.cure-app-extra__toggle{
  appearance:none !important;
  -webkit-appearance:none !important;
  width:100% !important;
  min-height:26px !important;
  padding:2px !important;
  margin:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  border:0 !important;
  background:transparent !important;
  color:#555 !important;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif !important;
  font-size:12px !important;
  font-weight:400 !important;
  letter-spacing:.01em !important;
  line-height:1.2 !important;
  text-align:left !important;
  opacity:.78 !important;
  cursor:pointer !important;
  box-shadow:none !important;
}
.cure-app-extra__toggle:hover,.cure-app-extra__toggle:focus-visible{
  color:#777 !important; opacity:1 !important; background:transparent !important; outline:none !important;
}
.cure-app-extra__chevron{color:#555 !important;font-size:13px !important;line-height:1 !important;transition:transform .18s ease,color .18s ease !important;}
.cure-app-extra__toggle[aria-expanded="true"] .cure-app-extra__chevron{transform:rotate(180deg) !important;color:#777 !important;}
.cure-app-extra__panel{padding:7px 2px 0 !important;}
.cure-app-extra__link,.cure-app-extra__link:visited{
  display:block !important;padding:5px 0 !important;color:#555 !important;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif !important;
  font-size:12px !important;font-weight:400 !important;line-height:1.35 !important;text-decoration:none !important;opacity:.78 !important;
}
.cure-app-extra__link:hover,.cure-app-extra__link:focus-visible,.cure-app-extra__link.is-active{color:var(--cure-red) !important;opacity:1 !important;text-decoration:none !important;}


/* =========================================================
   1.7.2 – ZENTRALES TYPOGRAFIE-SYSTEM
   Für Elementor + Cure Party App Shell.
   Mobile-first: Trajan Pro für sämtliche Überschriften und
   Zwischenüberschriften, #b20e0a für Links und Akzente.
   ========================================================= */

/* Elementor soll innerhalb der Cure-Shell dieselbe Typografie
   verwenden wie die nativen Cure-Komponenten. */
body.cure-app-shell-active .elementor h1,
body.cure-app-shell-active .elementor h2,
body.cure-app-shell-active .elementor h3,
body.cure-app-shell-active .elementor h4,
body.cure-app-shell-active .elementor h5,
body.cure-app-shell-active .elementor h6,
body.cure-app-shell-active .elementor .elementor-heading-title,
body.cure-app-shell-active .elementor .cure-subtitle,
body.cure-app-shell-active .elementor .cure-section-title,
body.cure-app-shell-active .elementor .cure-label,
body.cure-app-shell-active .elementor .elementor-widget-heading,
body.cure-app-shell-active .elementor .elementor-widget-heading * {
  font-family:'Cure Trajan',Georgia,'Times New Roman',serif !important;
}

/* Einheitliche Größen und Abstände – Elementor-Theme-Werte werden
   bewusst überschrieben, damit alle Cure-Seiten identisch wirken. */
body.cure-app-shell-active .elementor h1,
body.cure-app-shell-active .elementor .elementor-heading-title.elementor-size-xxl {
  font-size:clamp(30px,7vw,48px) !important;
  line-height:1.18 !important;
  font-weight:700 !important;
  letter-spacing:.015em !important;
  margin:0 0 .55em !important;
  color:var(--cure-text) !important;
}

body.cure-app-shell-active .elementor h2,
body.cure-app-shell-active .elementor .elementor-heading-title.elementor-size-xl {
  font-size:clamp(24px,5vw,36px) !important;
  line-height:1.22 !important;
  font-weight:700 !important;
  letter-spacing:.02em !important;
  margin:1.45em 0 .55em !important;
  color:var(--cure-text) !important;
}

body.cure-app-shell-active .elementor h3,
body.cure-app-shell-active .elementor .elementor-heading-title.elementor-size-large {
  font-size:clamp(20px,4vw,29px) !important;
  line-height:1.25 !important;
  font-weight:700 !important;
  letter-spacing:.025em !important;
  margin:1.3em 0 .5em !important;
  color:var(--cure-text) !important;
}

body.cure-app-shell-active .elementor h4,
body.cure-app-shell-active .elementor h5,
body.cure-app-shell-active .elementor h6 {
  font-size:clamp(17px,3.5vw,23px) !important;
  line-height:1.3 !important;
  font-weight:700 !important;
  letter-spacing:.04em !important;
  margin:1.15em 0 .45em !important;
  color:var(--cure-text) !important;
}

/* Elementor Text Editor / normal content */
body.cure-app-shell-active .elementor,
body.cure-app-shell-active .elementor-widget-text-editor,
body.cure-app-shell-active .elementor-widget-text-editor .elementor-widget-container {
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,Helvetica,sans-serif;
  color:var(--cure-text);
  font-size:16px;
  line-height:1.65;
}

body.cure-app-shell-active .elementor p,
body.cure-app-shell-active .elementor li {
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,Helvetica,sans-serif !important;
  font-size:16px !important;
  line-height:1.65 !important;
}

/* Zwischenüberschriften, die nicht als H1–H6 angelegt wurden */
body.cure-app-shell-active .elementor .cure-subtitle,
body.cure-app-shell-active .elementor .cure-section-title,
body.cure-app-shell-active .elementor .cure-label,
body.cure-app-shell-active .elementor .cure-kicker {
  font-family:'Cure Trajan',Georgia,'Times New Roman',serif !important;
  font-weight:700 !important;
  letter-spacing:.045em !important;
}

/* Sämtliche Links und redaktionellen Akzente in genau einem Rot. */
body.cure-app-shell-active .elementor a,
body.cure-app-shell-active .elementor a:visited,
body.cure-app-shell-active .elementor a:hover,
body.cure-app-shell-active .elementor a:focus-visible,
body.cure-app-shell-active .elementor .elementor-icon-list-text,
body.cure-app-shell-active .elementor .cure-accent,
body.cure-app-shell-active .elementor .accent,
body.cure-app-shell-active .elementor .highlight {
  --cure-accent-color:var(--cure-red);
}

body.cure-app-shell-active .elementor a,
body.cure-app-shell-active .elementor a:visited {
  color:var(--cure-accent) !important;
}

/* Nicht jeder Icon-List-Text ist ein Link: nur als Akzent markierte
   Elemente werden rot, normale Inhalte bleiben schwarz. */
body.cure-app-shell-active .elementor .cure-accent,
body.cure-app-shell-active .elementor .accent,
body.cure-app-shell-active .elementor .highlight {
  color:var(--cure-accent) !important;
}

/* Elementor Buttons: hochwertig und zurückhaltend, ohne riesige
   Theme-Abstände auf kleinen Displays. */
body.cure-app-shell-active .elementor .elementor-button {
  font-family:'Cure Trajan',Georgia,'Times New Roman',serif !important;
  font-size:15px !important;
  line-height:1.2 !important;
  letter-spacing:.045em !important;
  padding:13px 18px !important;
  background:var(--cure-red) !important;
  border-color:var(--cure-red) !important;
  color:#fff !important;
  border-radius:6px !important;
}

body.cure-app-shell-active .elementor .elementor-button:hover,
body.cure-app-shell-active .elementor .elementor-button:focus-visible {
  background:var(--cure-red) !important;
  border-color:var(--cure-red) !important;
  color:#fff !important;
}

/* Elementor Icon List / Menütexte: Trajan, aber nur die typografischen
   Elemente; die eigentlichen Fließtexte bleiben Sans-Serif. */
body.cure-app-shell-active .elementor .elementor-icon-list-text {
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,Helvetica,sans-serif !important;
}

/* Große Desktop-H1 vermeiden: die Hierarchie bleibt auch auf Monitoren
   elegant statt plakativ. */
@media (min-width:768px){
  body.cure-app-shell-active .elementor h1,
  body.cure-app-shell-active .elementor .elementor-heading-title.elementor-size-xxl {
    font-size:clamp(38px,4vw,48px) !important;
  }
}

@media (max-width:767px){
  body.cure-app-shell-active .elementor .elementor-widget-heading {
    margin-bottom:4px;
  }

  body.cure-app-shell-active .elementor h1 {
    letter-spacing:.01em !important;
  }

  body.cure-app-shell-active .elementor h2 {
    margin-top:1.35em !important;
  }

  body.cure-app-shell-active .elementor h3 {
    margin-top:1.2em !important;
  }
}


/* Admin: Medien-Buttons separat sortierbar. */
.cure-media-sortable-list{display:flex;flex-direction:column;gap:8px;max-width:1000px;}
.cure-media-sortable-row{display:grid;grid-template-columns:auto 72px minmax(150px,220px) minmax(260px,1fr);align-items:center;gap:10px;}
.cure-media-sortable-row label{display:flex;flex-direction:column;gap:4px;font-weight:600;}
.cure-media-sortable-row label span{font-size:12px;color:#555;}
.cure-media-sortable-row input{width:100%;box-sizing:border-box;}
@media(max-width:700px){
  .cure-media-sortable-row{grid-template-columns:auto 1fr;}
  .cure-media-sortable-row label{grid-column:2;}
}


/* 1.7.21 — endgültiger 5-Punkte-Fix. Ältere Fassungen enthielten am
   Dateiende noch einen 3-Spalten-Guard, der die neue Navigation wieder
   auf drei Spalten zwang. Dieser Override gewinnt bewusst gegen diese
   Altregel. Die Icon-Größe wird nicht mehr hier ein zweites Mal
   gesetzt (stand vorher im Widerspruch zur Regel weiter oben) — die
   einzige gültige Größe steht jetzt bei .cure-app-bottom__item svg
   weiter oben in dieser Datei. */
.cure-app-bottom__inner > .cure-app-bottom__item{
  width:20% !important;
  flex:0 0 20% !important;
}
/* Geometrie für <767px auch hier bewusst nicht mehr dupliziert - siehe
   "Final mobile shell geometry" weiter unten (einzige gültige Quelle). */

.cure-bottom-url-note{display:block;padding:8px 10px;color:#666;background:#f3f3f3;border:1px solid #ddd;border-radius:4px;font-size:13px;}
.cure-sortable-row > span{min-width:0;}
.cure-sortable-row > span input[type=url]{width:100%;box-sizing:border-box;}
@media(max-width:700px){.cure-sortable-row{grid-template-columns:auto 1fr;}.cure-sortable-row > span,.cure-sortable-row > a,.cure-sortable-row > button:not(.cure-drag){grid-column:2;}.cure-sortable-row > .cure-drag{grid-column:1;grid-row:1 / span 6;}}


/* =========================================================
   1.8.0 — Mobile Bottom-Navigation, technisch neu aufgebaut.

   Ersetzt komplett die bisherigen Versuche aus 1.7.21–1.7.34
   (transform/opacity-"hidden", Höhen-Overrides an drei verschiedenen
   Stellen, SVG-Attribut-Hardening), die trotz mehrfacher Korrektur
   immer wieder zu verschwindenden Icons führten.

   Prinzip: Die Leiste wird beim Scrollen NIE versteckt, entfernt oder
   auf opacity/visibility 0 gesetzt — sie hat nur zwei Höhen-Zustände:
     • normal  (58px): Icon + Label sichtbar
     • compact (40px): nur Icon sichtbar, Label eingeklappt
   Gesteuert wird das ausschließlich über eine einzige Klasse,
   .cure-app-bottom--compact, die app-shell.js beim Scrollen auf
   <nav class="cure-app-bottom"> togglet — dieselbe Technik, mit der
   der Header oben bereits zuverlässig zwischen groß/kompakt wechselt.

   Damit ein Icon niemals wieder verschwinden kann, hat es jetzt eine
   eigene, fest bemaßte Box (.cure-app-bottom__icon, siehe "Final
   mobile shell geometry" weiter unten) und wird von keiner einzigen
   Regel in dieser Datei per display/visibility/opacity gesteuert —
   nur .cure-app-bottom__label darf einklappen. */
@media (max-width:767px){
  .cure-app-bottom{
    transition:height .32s cubic-bezier(.22,.61,.36,1) !important;
    will-change:height;
  }
  .cure-app-bottom__label{
    display:block !important;
    max-height:13px !important;
    opacity:1 !important;
    margin-top:3px !important;
    transition:max-height .26s ease, opacity .18s ease, margin-top .26s ease !important;
  }
  .cure-app-bottom--compact .cure-app-bottom__label{
    max-height:0 !important;
    opacity:0 !important;
    margin-top:0 !important;
  }
  /* Die tatsächlichen Höhen (normal/compact) stehen bewusst nur an EINER
     Stelle: unten bei "Final mobile shell geometry", direkt neben den
     58px/20px/etc.-Werten, die sie ersetzen — damit es wie schon beim
     Header nicht wieder zwei widersprüchliche Zahlen für dieselbe Sache
     gibt. */
}
@media (prefers-reduced-motion:reduce){
  @media (max-width:767px){
    .cure-app-bottom,
    .cure-app-bottom__label{transition:none !important;}
    .cure-app-header{transition:none !important;}
    .cure-app-header__inner,.cure-app-brand strong,.cure-app-brand small{transition:none !important;}
    body.cure-app-shell-active .cure-scroll-reveal{opacity:1 !important;transform:none !important;transition:none !important;}
  }
}

/* =========================================================
   1.7.34 — Final mobile shell geometry (einzige gültige Quelle)
   - Header deutlich kompakter: 76px offen / 52px beim Scrollen
     (vorher 104px / 64px) - und der Titel wird beim Schrumpfen jetzt
     tatsächlich kleiner statt größer.
   - iOS Safe Area wird im Header berücksichtigt; Inhalt rutscht nie
     unter Statusleiste/Uhr.
   - Content-Abstand folgt der tatsächlichen Headerhöhe.
   - Bottom-Navigation ist ein kleines, filigranes Dock (58px statt
     76px), fünf feste 20%-Spalten, Icon/Label sitzen exakt mittig.
   - Die äußere Bottom-Hülle bleibt transparent.
   ========================================================= */
@media (max-width:767px){
  body.cure-app-shell-active{
    padding-top:calc(76px + env(safe-area-inset-top, 0px) + 8px) !important;
    padding-bottom:82px !important;
  }

  .cure-app-header{
    top:0 !important;
    height:calc(76px + env(safe-area-inset-top, 0px)) !important;
    min-height:calc(76px + env(safe-area-inset-top, 0px)) !important;
    max-height:calc(76px + env(safe-area-inset-top, 0px)) !important;
    padding-top:env(safe-area-inset-top, 0px) !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }
  .cure-app-header__inner{
    height:76px !important;
    min-height:76px !important;
    max-height:76px !important;
    box-sizing:border-box !important;
    padding:0 14px !important;
  }
  .cure-app-brand{
    padding-top:0 !important;
    min-height:0 !important;
    gap:2px !important;
  }
  .cure-app-brand strong{
    font-size:17px !important;
    letter-spacing:.06em !important;
  }
  .cure-app-brand small{
    font-size:clamp(9.5px,2.6vw,10.5px) !important;
    letter-spacing:.01em !important;
    max-width:none !important;
    /* Bewusst kein Abschneiden: die Schrift ist so bemessen, dass der
       vollständige Untertitel auch auf 320px-Displays passt. overflow/
       ellipsis bleiben nur als Sicherheitsnetz stehen (siehe Basisregel
       weiter oben), greifen im Normalfall aber nicht mehr. */
  }
  .cure-app-menu-button{
    width:42px !important;
    height:42px !important;
    flex:0 0 42px !important;
  }

  /* Kompakter Header: Safe Area bleibt erhalten, der nutzbare
     Navigationsbereich schrumpft von 76px auf 52px, und der Titel wird
     dabei spürbar kleiner statt größer. */
  .cure-app-header.cure-app-header--compact{
    height:calc(52px + env(safe-area-inset-top, 0px)) !important;
    min-height:calc(52px + env(safe-area-inset-top, 0px)) !important;
    max-height:calc(52px + env(safe-area-inset-top, 0px)) !important;
  }
  .cure-app-header--compact .cure-app-header__inner{
    height:52px !important;
    min-height:52px !important;
    max-height:52px !important;
  }
  .cure-app-header--compact .cure-app-brand strong{
    font-size:14.5px !important;
    letter-spacing:.045em !important;
  }
  .cure-app-header--compact .cure-app-menu-button{
    width:36px !important;
    height:36px !important;
    flex:0 0 36px !important;
  }
  body.cure-app-shell-active.cure-app-shell-header-compact{
    padding-top:calc(52px + env(safe-area-inset-top, 0px) + 8px) !important;
  }

  /* Bottom-Bar: kleines, filigranes Dock. Nur die gerundete sichtbare
     Leiste ist rot.
     1.8.0 — Normal (58px) und Compact (40px) sind hier die einzigen
     beiden gültigen Höhen. .cure-app-bottom__inner und die einzelnen
     .cure-app-bottom__item folgen mit height:100% automatisch mit -
     dadurch gibt es für die Bar-Höhe nur noch EINE Zahl zum Pflegen statt
     bisher bis zu drei (Außenhülle/Inner/Item), die leicht auseinanderlaufen
     konnten. Icon-Box und Label sind eigene Kinder mit fixer bzw.
     einklappbarer Größe (siehe unten) - das Item selbst wird nie geclippt. */
  .cure-app-bottom{
    left:50% !important;
    right:auto !important;
    transform:translate3d(-50%,0,0) !important;
    background:transparent !important;
    border:0 !important;
    border-radius:20px !important;
    padding:0 !important;
    overflow:visible !important;
    box-shadow:none !important;
    box-sizing:border-box !important;
  }
  /* Höhere Spezifität (zwei Klassen) statt bloß Reihenfolge im Stylesheet -
     so gewinnt der Compact-Zustand zuverlässig, unabhängig davon, wo im
     File diese Regel steht. */
  .cure-app-bottom.cure-app-bottom--compact{
  }
  .cure-app-bottom__inner{
    display:flex !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    background:#b20e0a !important;
    border:1px solid rgba(255,255,255,.32) !important;
    border-radius:20px !important;
    overflow:hidden !important;
    box-shadow:0 10px 30px rgba(0,0,0,.35) !important;
    box-sizing:border-box !important;
  }
  .cure-app-bottom__inner > .cure-app-bottom__item{
    position:relative !important;
    flex:0 0 20% !important;
    width:20% !important;
    min-width:20% !important;
    max-width:20% !important;
    /* Wie bei .cure-app-bottom (siehe oben): die unbedingte Basisregel
       weiter oben in dieser Datei setzt min-height/max-height fest auf
       72px !important. Ohne diese drei Zeilen bliebe jedes Item trotz
       height:100% optisch auf 72px hängen (nur durch overflow:hidden der
       __inner-Box unsichtbar zugeschnitten) - genau das ist beim ersten
       Testlauf dieser Version aufgefallen. */
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;
    margin:0 !important;
    padding:0 2px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    box-sizing:border-box !important;
    text-align:center !important;
    color:#fff !important;
    overflow:hidden !important;
  }
  /* Icon-Box: fest bemaßtes, eigenständiges Kind mit FESTEM Abstand zum
     Item-Rand (margin-top), der sich zwischen normal/compact nicht
     ändert. Vorher saß das Icon (wie das Label) in einem per
     justify-content:center automatisch zentrierten Flex-Block - dadurch
     verschob sich das Icon während der Label-Einklapp-Animation für
     einen Moment sichtbar nach unten (das Item schneidet per
     overflow:hidden ab, sobald der Inhalt kurzzeitig über den Rand
     hinausragt). Mit fixem margin-top bleibt das Icon in jedem Frame der
     Animation exakt an derselben Stelle, unabhängig vom Label. */
  .cure-app-bottom__icon{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
  .cure-app-bottom__icon svg,
  .cure-app-bottom__icon svg path,
  .cure-app-bottom__icon svg rect,
  .cure-app-bottom__icon svg circle{
    fill:none !important;
    stroke:#fff !important;
  }
  .cure-app-bottom__icon svg{
    display:block !important;
    stroke-width:1.8 !important;
  }
  .cure-app-bottom__label{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif !important;
    font-size:10.5px !important;
    color:#fff !important;
    box-sizing:border-box !important;
    /* max-height/opacity/margin-top (einklappen im Compact-Zustand) und
       die Transition dafür stehen weiter oben im Abschnitt "1.8.0 —
       Mobile Bottom-Navigation" - hier nur noch Typografie/Geometrie. */
  }
  .cure-app-bottom__item.is-active:after{
    left:50% !important;
    transform:translateX(-50%) !important;
  }
  .cure-app-bottom--compact .cure-app-bottom__item.is-active:after{
    bottom:5px !important;
  }

  /* Härtungs-Override: dieselbe Geometrie nochmal mit höherer Spezifität
     (body.cure-app-shell-active .cure-app-bottom statt nur
     .cure-app-bottom). Grund: andere, sehr umfangreiche Plugin-CSS auf
     dieser Seite lädt teils NACH dieser Datei und hatte in der
     Vergangenheit schon einmal generische Klassennamen wie diese mit
     eigenen !important-Regeln überschrieben (siehe Kommentar zu den
     Icon-Problemen weiter oben in dieser Datei). Eine reine Klasse gegen
     eine reine Klasse gewinnt nur über die Reihenfolge im Stylesheet -
     das ist zerbrechlich, sobald fremdes CSS irgendwann nach dieser
     Datei geladen wird. Zwei Klassen (Body + Bottom) gewinnen praktisch
     immer, unabhängig von der Ladereihenfolge. */
  body.cure-app-shell-active .cure-app-bottom{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    padding:0 !important;
    height:58px !important;
    min-height:58px !important;
    max-height:58px !important;
  }
  body.cure-app-shell-active .cure-app-bottom.cure-app-bottom--compact{
    height:40px !important;
    min-height:40px !important;
    max-height:40px !important;
  }
  body.cure-app-shell-active .cure-app-bottom__inner{
    background:#b20e0a !important;
    border-radius:20px !important;
  }

  /* Fortschrittslinie folgt automatisch der Headerhöhe, da sie dessen
     Kind ist; hier nur die Übergangsdämpfung für die Scale. */
  .cure-app-header__progress{
    transition:transform .12s linear;
  }
}

@media (prefers-reduced-motion:reduce){
  .cure-app-header,
  .cure-app-header__inner,
  .cure-app-brand strong,
  .cure-app-brand small,
  .cure-app-bottom{
    transition:none !important;
  }
  body.cure-app-shell-active .cure-scroll-reveal{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}


/* =========================================================
   1.8.2 — Responsive Bottom-Navigation
   Ausschließlich die mobile Bottom-Navigation.
   Die fünf vorhandenen Punkte, Reihenfolge und Funktionen bleiben unverändert.
   Ziel: gute Lesbarkeit und Touch-Bedienung auf allen Smartphone-Breiten.
   ========================================================= */
@media (max-width:767px){
  .cure-app-bottom{
    width:calc(100% - 20px) !important;
    max-width:820px !important;
    height:62px !important;
    min-height:62px !important;
    max-height:62px !important;
    bottom:max(10px, env(safe-area-inset-bottom, 0px)) !important;
  }

  .cure-app-bottom__inner{
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;
  }

  .cure-app-bottom__icon{
    width:22px !important;
    height:22px !important;
    flex:0 0 22px !important;
    margin-top:9px !important;
  }

  .cure-app-bottom__icon svg{
    width:22px !important;
    height:22px !important;
    flex:0 0 22px !important;
  }

  .cure-app-bottom__label{
    width:100% !important;
    min-width:0 !important;
    padding:0 2px !important;
    font-size:clamp(10.5px, 3.05vw, 13px) !important;
    line-height:14px !important;
    font-weight:600 !important;
    letter-spacing:-0.01em !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .cure-app-bottom__item{
    min-width:0 !important;
    max-width:none !important;
    padding:0 2px !important;
    gap:2px !important;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }

  .cure-app-bottom__item.is-active{
    font-weight:700 !important;
  }

  .cure-app-bottom__item.is-active:after{
    bottom:3px !important;
    width:24px !important;
    height:2px !important;
  }

  /* Sehr schmale Geräte: etwas mehr Platz für die fünf Labels. */
  @media (max-width:340px){
    .cure-app-bottom{
      width:calc(100% - 12px) !important;
    }
    .cure-app-bottom__label{
      font-size:10.5px !important;
    }
  }

  /* Compact-Zustand beim Scrollen bleibt funktional erhalten. */
  .cure-app-bottom.cure-app-bottom--compact{
    height:40px !important;
    min-height:40px !important;
    max-height:40px !important;
  }

  .cure-app-bottom.cure-app-bottom--compact .cure-app-bottom__icon{
    margin-top:9px !important;
  }
}

/* =========================================================
   1.8.3 — Bottom-Navigation: Labels vollständig sichtbar
   Ausschließlich die mobile Bottom-Navigation.
   Keine Ellipsen/Abkürzungen: insbesondere „Wünsche“ muss auf
   kleinen Smartphones vollständig lesbar bleiben.
   ========================================================= */
@media (max-width:767px){
  body.cure-app-shell-active .cure-app-bottom__label{
    display:block !important;
    width:auto !important;
    max-width:100% !important;
    min-width:0 !important;
    padding:0 !important;
    margin-left:auto !important;
    margin-right:auto !important;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif !important;
    font-size:clamp(9px, 2.7vw, 12px) !important;
    line-height:14px !important;
    font-weight:600 !important;
    letter-spacing:-0.025em !important;
    white-space:nowrap !important;
    overflow:visible !important;
    text-overflow:clip !important;
  }

  body.cure-app-shell-active .cure-app-bottom__item{
    min-width:0 !important;
    padding-left:1px !important;
    padding-right:1px !important;
  }

  /* Auf sehr schmalen Geräten bleibt genug Breite für alle fünf Labels. */
  @media (max-width:340px){
    body.cure-app-shell-active .cure-app-bottom__label{
      font-size:9px !important;
      letter-spacing:-0.035em !important;
    }
  }

  /* Verhindert, dass eine fremde globale Regel die Labelgröße wieder hochsetzt. */
  body.cure-app-shell-active .cure-app-bottom__label,
  body.cure-app-shell-active .cure-app-bottom__label *{
    box-sizing:border-box !important;
  }
}


/* 1.8.9 — Termin-Countdown-Button: rundes Badge, ersetzt den frueheren
   Musik-FAB (jetzt in cure-party-mixtape entfernt). Standardmaessig
   vertikal mittig am rechten Rand (deutlich sichtbarer als in einer Ecke),
   per Ziehen frei verschiebbar (siehe app-shell.js). Terminnaehe wird nur
   ueber Rahmen/Hintergrundfarbe signalisiert - die Schrift bleibt bewusst
   in jeder Stufe weiss/hellgrau, damit sie gut lesbar bleibt. */
.cure-app-next-event{
  position:fixed !important;
  left:auto;
  right:16px;
  top:50%;
  bottom:auto;
  transform:translateY(-50%);
  z-index:9998 !important;
  width:72px;
  height:72px;
  border-radius:50% !important;
  background:#111 !important;
  border:3px solid rgba(255,255,255,.28) !important;
  color:#fff !important;
  display:flex !important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  text-decoration:none !important;
  box-shadow:0 8px 24px rgba(0,0,0,.34);
  line-height:1.05;
  font-family:inherit;
  cursor:grab;
  touch-action:none;
  -webkit-tap-highlight-color:transparent;
  transition:box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.cure-app-next-event:active{ cursor:grabbing; }
.cure-app-next-event:hover,
.cure-app-next-event:focus-visible{
  box-shadow:0 10px 28px rgba(0,0,0,.4);
}
/* Sobald der Button gezogen wurde, setzt app-shell.js links/oben statt
   rechts/mittig - die Transform-Mittelung darf dann nicht mehr greifen. */
.cure-app-next-event.is-positioned{
  transform:none !important;
}
.cure-app-next-event__number{
  font-size:22px;
  font-weight:900;
  letter-spacing:.02em;
  color:#fff;
}
.cure-app-next-event__unit{
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#eee;
  margin-top:1px;
}
.cure-app-next-event__tag{
  position:absolute;
  bottom:-17px;
  left:50%;
  transform:translateX(-50%);
  font-size:8px;
  font-weight:800;
  letter-spacing:.09em;
  color:#ccc;
  white-space:nowrap;
  text-transform:uppercase;
}
.cure-app-next-event__today{
  font-size:15px;
  font-weight:900;
  letter-spacing:.03em;
  color:#fff;
}

/* Stufe 2: 1-3 Tage - kraeftiger roter Rand statt neutralem Grau; Schrift
   bleibt weiss/hellgrau, nur der Rahmen signalisiert die Naehe zum Termin. */
.cure-app-next-event--soon{
  border-color:var(--cure-red) !important;
}

/* Stufe 3: heute - volle rote Flaeche statt schwarzem Kreis */
.cure-app-next-event--today{
  background:var(--cure-red) !important;
  border-color:var(--cure-red) !important;
}

@media(prefers-reduced-motion:reduce){
  .cure-app-next-event{ transition:none; }
}

@media(max-width:767px){
  .cure-app-next-event{ width:64px; height:64px; right:14px; }
  .cure-app-next-event__number{ font-size:19px; }
}


/* 1.8.10 — Startseite (Club-Video): Countdown-Button wieder horizontal
   mittig, vertikal zwischen dem Schriftzug in der Bildmitte und der unteren
   Navigation (72px + Safe-Area). Der Schriftzug endet ca. 70px unter der
   Bildmitte; die Mitte bis zur Navigation liegt damit bei ~75% der Hoehe.
   Die zusaetzlichen 8px nach oben gleichen die Beschriftung unter dem
   Kreis aus. Nach dem Ziehen greift wie ueberall .is-positioned. */
body.cure-app-shell-active:has(.cure-app-start-video) .cure-app-next-event{
  left:50%;
  right:auto;
  top:calc(75% - 8px - env(safe-area-inset-bottom, 0px) / 2);
  transform:translate(-50%,-50%);
}
body.cure-app-shell-active:has(.cure-app-start-video) .cure-app-next-event.is-positioned{
  transform:none !important;
}

/* =========================================================
   1.9.0 — App-Gefühl
   ========================================================= */
/* Seitenübergang: alte Seite blendet kurz aus, neue gleitet 8px hoch ein.
   Header, untere Navigation und Countdown bleiben stehen (eigene Namen).
   Nur transform/opacity, 180–260 ms. */
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){ animation:160ms cubic-bezier(.4,0,1,1) both cure-vt-out; }
  ::view-transition-new(root){ animation:240ms cubic-bezier(0,0,.2,1) 20ms both cure-vt-in; }
}
@keyframes cure-vt-out{ to{ opacity:0; } }
@keyframes cure-vt-in{ from{ opacity:0; transform:translate3d(0,8px,0); } }
.cure-app-next-event{ view-transition-name:cure-vt-next; }
/* Reduzierte Bewegung: gar keine Seitenübergänge. */
@media (prefers-reduced-motion:reduce){
  @view-transition{ navigation:none; }
}

/* Dezente Ladeleiste, nur wenn ein Seitenwechsel länger als ~150 ms dauert. */
.cure-app-nav-progress{
  position:fixed; left:0; right:0; top:env(safe-area-inset-top,0px); height:2px;
  z-index:100003; pointer-events:none;
  background:var(--cure-red,#b20e0a);
  box-shadow:0 0 6px rgba(178,14,10,.55);
  transform:scaleX(0); transform-origin:0 50%; opacity:0;
  transition:opacity .18s ease;
}
.cure-app-nav-progress.is-active{ opacity:1; animation:cure-nav-progress 8s cubic-bezier(.08,.8,.2,1) forwards; }
@keyframes cure-nav-progress{ 0%{ transform:scaleX(0); } 15%{ transform:scaleX(.4); } 100%{ transform:scaleX(.94); } }
@media (prefers-reduced-motion:reduce){
  .cure-app-nav-progress.is-active{ animation:none; transform:scaleX(.6); }
}

/* Touch: kein Doppeltipp-Zoom (Pinch-Zoom bleibt erhalten), keine
   Tipp-Verzögerung; Menü-Button bekommt eine unsichtbar größere Tippfläche
   (mind. 44×44 px, auch im kompakten Header). */
body.cure-app-shell-active{ touch-action:manipulation; }
.cure-app-menu-button{ position:relative; }
.cure-app-menu-button::after{ content:''; position:absolute; inset:-6px; }
.cure-app-close{ position:relative; }
.cure-app-close::after{ content:''; position:absolute; inset:-6px; }
/* Herz-Button (Abstimmen) ist optisch 30–34px hoch - unsichtbar auf
   mindestens 44px Tippfläche erweitert, Optik unverändert. */
body.cure-app-shell-active .cpm__vote{ position:relative; }
body.cure-app-shell-active .cpm__vote::after{ content:''; position:absolute; left:-2px; right:-2px; top:-7px; bottom:-7px; }

/* =========================================================
   1.10.0 — Dunkelmodus
   Aktiv, sobald das Inline-Skript im <head> html[data-cure-theme="dark"]
   setzt (Handy-Einstellung, Wahl im Menü oder Backend "Immer dunkel").
   Kopfzeile, Menü, rote Navigation, Countdown und Startseiten-Video sind
   ohnehin dunkel und bleiben unverändert. Hier werden nur die hellen
   Inhaltsflächen umgefärbt - über dieselben Farb-Variablen, die auch
   Release Rewind und cure-party-mixtape lesen.
   ========================================================= */
html[data-cure-theme="dark"]{
  --cure-bg:#170a08;
  --cure-surface:#170a08;
  --cure-surface-soft:#221110;
  --cure-text:#ececec;
  --cure-text-soft:#d6d6d6;
  --cure-muted:#a3a3a3;
  --cure-muted-strong:#b3b3b3;
  --cure-line:#3a2420;
  --cure-accent:#f7913a;
  background:#170a08;
  color-scheme:dark;
}
/* Elementor-Texte ohne eigene Farbe folgen der Seitenfarbe. */
html[data-cure-theme="dark"] body.cure-app-shell-active .elementor-widget-text-editor,
html[data-cure-theme="dark"] body.cure-app-shell-active .elementor-widget-text-editor .elementor-widget-container{
  color:var(--cure-text);
}
/* Theme-Kopf/Seitentitel (Hello Elementor), falls sichtbar. */
html[data-cure-theme="dark"] body.cure-app-shell-active .page-header .entry-title,
html[data-cure-theme="dark"] body.cure-app-shell-active .site-header,
html[data-cure-theme="dark"] body.cure-app-shell-active .site-footer{
  color:var(--cure-text);
  background:transparent;
}
/* Formularfelder, denen das Theme eine feste weiße Fläche gibt. */
html[data-cure-theme="dark"] body.cure-app-shell-active input[type="text"],
html[data-cure-theme="dark"] body.cure-app-shell-active input[type="search"],
html[data-cure-theme="dark"] body.cure-app-shell-active input[type="email"],
html[data-cure-theme="dark"] body.cure-app-shell-active input[type="url"],
html[data-cure-theme="dark"] body.cure-app-shell-active input[type="date"],
html[data-cure-theme="dark"] body.cure-app-shell-active input[type="time"],
html[data-cure-theme="dark"] body.cure-app-shell-active input[type="number"],
html[data-cure-theme="dark"] body.cure-app-shell-active textarea,
html[data-cure-theme="dark"] body.cure-app-shell-active select{
  background-color:var(--cure-surface);
  color:var(--cure-text);
  border-color:#3a3a3d;
}
html[data-cure-theme="dark"] body.cure-app-shell-active ::placeholder{ color:#8a8a8a; opacity:1; }
/* Textauswahl gut sichtbar */
html[data-cure-theme="dark"] body.cure-app-shell-active ::selection{ background:#b20e0a; color:#fff; }
/* Schwarze Logo-Grafik "A Strange Night" (Kopf von Flyer-/Playlist-/Termin-
   Seiten) im Dunkeln hell darstellen; Rottöne bleiben dabei rot. */
html[data-cure-theme="dark"] body.cure-app-shell-active .cpm__graphic img{ filter:invert(1) hue-rotate(180deg); }
/* 1.10.2: helle Hintergründe in ::before/::after (Elementor-Overlays), per
   app-shell.js markiert. */
html[data-cure-theme="dark"] .cure-dm-before::before,
html[data-cure-theme="dark"] .cure-dm-after::after{ background-color:#221110 !important; background-image:none !important; }
/* Countdown-Button hebt sich im Dunkeln durch einen etwas helleren Rand ab. */
html[data-cure-theme="dark"] .cure-app-next-event--calm{ border-color:rgba(255,255,255,.34) !important; }

/* Schalter "Darstellung" im Menü (Menü ist in beiden Varianten dunkel). */
.cure-app-theme{ margin:26px 10px 0 !important; padding-top:14px !important; border-top:1px solid rgba(255,255,255,.07) !important; }
/* 1.10.1: Schalter steht jetzt direkt im Menü, daher "Weitere Optionen" ohne eigene Trennlinie darüber. */
.cure-app-theme + .cure-app-extra{ margin-top:18px !important; border-top:0 !important; }
.cure-app-theme__label{
  display:block !important; margin:0 0 8px !important;
  color:#a8a8ad !important; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif !important;
  font-size:12px !important; line-height:1.2 !important;
}
.cure-app-theme__options{
  display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:0 !important;
  border:1px solid rgba(255,255,255,.18) !important; border-radius:9px !important; overflow:hidden !important;
}
.cure-app-theme__option{
  appearance:none !important; -webkit-appearance:none !important;
  min-height:40px !important; margin:0 !important; padding:6px 4px !important;
  border:0 !important; border-radius:0 !important; box-shadow:none !important;
  background:transparent !important; color:#c9c9cc !important;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif !important;
  font-size:13px !important; font-weight:600 !important; line-height:1.1 !important;
  cursor:pointer !important; -webkit-tap-highlight-color:transparent;
}
.cure-app-theme__option + .cure-app-theme__option{ border-left:1px solid rgba(255,255,255,.18) !important; }
.cure-app-theme__option:hover,
.cure-app-theme__option:focus-visible{ background:rgba(255,255,255,.08) !important; color:#fff !important; outline:none !important; }
.cure-app-theme__option[aria-pressed="true"]{ background:#b20e0a !important; color:#fff !important; }

/* Backend */
.cure-admin-radios{ display:flex; flex-direction:column; gap:8px; margin:6px 0 10px; }

/* =========================================================
   1.10.6 — PUSH-ERINNERUNG
   Golden pulsierendes Glocken-Icon im Push-Punkt der unteren
   Navigation + schmales, schliessbares Banner unter dem Header.
   Beides wird von app-shell.js nur dann sichtbar gemacht
   (hidden-Attribut entfernt / Klasse gesetzt), wenn Geraet,
   Push-Status und Erinnerungsdatum das hergeben.
   ========================================================= */

/* 1.10.7 — Eine bereits bestehende Regel weiter oben setzt auf allen Icons
   der unteren Navigation "fill:none !important" (svg, svg path, svg rect,
   svg circle). Eine CSS-Animation kann eine !important-Deklaration prinzipiell
   nicht ueberschreiben, egal wie spezifisch die animierende Regel ist - das
   ist eine feste Browser-/Spec-Regel. Der erste Versuch, die Fuellfarbe zu
   animieren, wurde dadurch wirkungslos; nur die statische Umrissfarbe kam
   durch (goldene, aber eingefrorene Glocke). Animiert wird deshalb stattdessen
   die Deckkraft des Icon-Wrappers (.cure-app-bottom__icon) - dort liegt
   nirgends ein !important auf opacity, also greift die Animation zuverlaessig.
   Die goldene Umrissfarbe bleibt wie zuvor eine statische !important-Regel. */
@keyframes cure-push-pulse{
  0%,100%{ opacity:1; }
  50%{ opacity:.4; }
}
.cure-app-bottom__item[data-cure-nav-key="known:push"].is-push-pending svg,
.cure-app-bottom__item[data-cure-nav-key="known:push"].is-push-pending svg path,
.cure-app-bottom__item[data-cure-nav-key="known:push"].is-push-pending svg circle,
.cure-app-bottom__item[data-cure-nav-key="known:push"].is-push-pending svg rect{
  stroke:#ffb800 !important;
}
.cure-app-bottom__item[data-cure-nav-key="known:push"].is-push-pending .cure-app-bottom__icon{
  animation:cure-push-pulse 2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .cure-app-bottom__item[data-cure-nav-key="known:push"].is-push-pending .cure-app-bottom__icon{
    animation:none !important;
    opacity:1 !important;
  }
}

.cure-push-reminder{
  display:flex !important; align-items:center !important; gap:10px !important;
  width:calc(100% - 24px) !important; max-width:720px !important;
  margin:12px auto !important; padding:11px 14px !important;
  background:var(--cure-surface-soft) !important;
  border:0 !important; border-left:4px solid var(--cure-red) !important;
  border-radius:6px !important;
  color:var(--cure-text) !important;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif !important;
  font-size:14px !important; line-height:1.4 !important;
}
.cure-push-reminder[hidden]{ display:none !important; }
.cure-push-reminder__icon{
  display:flex !important; flex:0 0 20px !important; width:20px !important; height:20px !important;
  color:#b20e0a !important;
}
.cure-push-reminder__icon svg{
  width:100% !important; height:100% !important;
  fill:none !important; stroke:currentColor !important; stroke-width:1.8 !important;
}
.cure-push-reminder__text{ flex:1 1 auto !important; color:var(--cure-text) !important; }
.cure-push-reminder__cta{
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  flex:0 0 auto !important;
  padding:7px 14px !important; border-radius:6px !important;
  font-size:13px !important; font-weight:700 !important; line-height:1.3 !important;
  text-decoration:none !important; white-space:nowrap !important;
}
/* 1.10.8 — Hintergrund- UND Textfarbe zusaetzlich unter dem Eltern-Element
   verschachtelt (.cure-push-reminder .cure-push-reminder__cta statt nur
   .cure-push-reminder__cta). Eine einfache Klassenregel war im Hellmodus
   gegen eine offenbar gleich spezifische, aber spaeter geladene a{color:...}
   -Regel der Website (Theme/Elementor-Standardfarbe fuer Links) unterlegen -
   im Dunkelmodus gewann die Regel nur deshalb, weil der dortige Selektor
   durch "html[data-cure-theme='dark']" ohnehin schon spezifischer war.
   Diese Verschachtelung hebt die Spezifitaet gleichermassen fuer Hell- und
   Dunkelmodus an, ganz ohne zusaetzliche HTML-Klassen. */
.cure-push-reminder .cure-push-reminder__cta,
.cure-push-reminder .cure-push-reminder__cta:link,
.cure-push-reminder .cure-push-reminder__cta:visited{
  background:var(--cure-red) !important;
  color:#fff !important;
}
.cure-push-reminder__cta:hover,
.cure-push-reminder__cta:focus-visible{ opacity:.9 !important; }
.cure-push-reminder__close{
  flex:0 0 auto !important; appearance:none !important; -webkit-appearance:none !important;
  border:0 !important; background:none !important; padding:4px !important; margin:0 !important;
  color:var(--cure-muted) !important; font-size:20px !important; line-height:1 !important;
  cursor:pointer !important; -webkit-tap-highlight-color:transparent;
}
.cure-push-reminder__close:hover,
.cure-push-reminder__close:focus-visible{ color:var(--cure-red) !important; outline:none !important; }

html[data-cure-theme="dark"] .cure-push-reminder{
  background:#1c1c20 !important; color:#e7e7ea !important;
}
html[data-cure-theme="dark"] .cure-push-reminder__text{ color:#e7e7ea !important; }
html[data-cure-theme="dark"] .cure-push-reminder__icon{ color:#f7913a !important; }
html[data-cure-theme="dark"] .cure-push-reminder__cta,
html[data-cure-theme="dark"] .cure-push-reminder__cta:link,
html[data-cure-theme="dark"] .cure-push-reminder__cta:visited{
  background:#f7913a !important; color:#fff !important;
}
html[data-cure-theme="dark"] .cure-push-reminder__close{ color:#9a9aa0 !important; }
html[data-cure-theme="dark"] .cure-push-reminder__close:hover,
html[data-cure-theme="dark"] .cure-push-reminder__close:focus-visible{ color:#f7913a !important; }

/* =========================================================
   1.10.9 — HÖREN-EFFEKT
   Beim Antippen von „Hören“ federn Spotify und TIDAL nacheinander
   aus der Navigation nach oben, das Hören-Icon gibt einen kurzen
   Impuls, danach leuchten die Buttons zweimal in ihrer Markenfarbe
   und bleiben ruhig. Rein CSS: Die Animationen starten von selbst,
   sobald das Panel (hidden entfernt) sichtbar wird.
   Hinweis: box-shadow/transform der Buttons sind weiter oben mit
   !important gesetzt und lassen sich nicht animieren. Deshalb läuft
   der Glow auf einem ::before-Element, das Hochfedern auf
   opacity/translate.
   ========================================================= */
.cure-app-media-button{ position:relative; }
.cure-app-media-button--spotify{ --cure-media-glow:rgba(29,185,84,.75); }
.cure-app-media-button--tidal{ --cure-media-glow:rgba(125,230,255,.65); }
.cure-app-media-button::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:0 0 0 0 transparent;
}
@keyframes cure-media-rise{
  from{ opacity:0; translate:0 34px; scale:.88; }
  to{ opacity:1; translate:0 0; scale:1; }
}
@keyframes cure-media-glow{
  0%,100%{ box-shadow:0 0 0 0 transparent; }
  50%{ box-shadow:0 0 22px 5px var(--cure-media-glow); }
}
@keyframes cure-hear-pop{
  0%{ scale:1; }
  40%{ scale:1.2; }
  100%{ scale:1; }
}
@keyframes cure-media-fade{
  from{ opacity:0; }
  to{ opacity:1; }
}
.cure-app-media-buttons:not([hidden]) .cure-app-media-button{
  animation:cure-media-rise .55s cubic-bezier(.34,1.56,.64,1) both;
}
.cure-app-media-buttons:not([hidden]) .cure-app-media-button:nth-child(2){ animation-delay:.12s; }
.cure-app-media-buttons:not([hidden]) .cure-app-media-button::before{
  animation:cure-media-glow 1.3s ease-in-out .6s 2;
}
.cure-app-media-buttons:not([hidden]) .cure-app-media-button:nth-child(2)::before{ animation-delay:.72s; }
.cure-app-bottom__item[data-cure-action="media"].is-active .cure-app-bottom__icon{
  animation:cure-hear-pop .5s cubic-bezier(.34,1.56,.64,1) both;
}
@media (prefers-reduced-motion:reduce){
  .cure-app-media-buttons:not([hidden]) .cure-app-media-button{
    animation:cure-media-fade .2s ease-out both;
  }
  .cure-app-media-buttons:not([hidden]) .cure-app-media-button:nth-child(2){ animation-delay:0s; }
  .cure-app-media-buttons:not([hidden]) .cure-app-media-button::before,
  .cure-app-media-buttons:not([hidden]) .cure-app-media-button:nth-child(2)::before{ animation:none; }
  .cure-app-bottom__item[data-cure-action="media"].is-active .cure-app-bottom__icon{ animation:none; }
}

/* 1.10.12 — Startvideo: Titel ist jetzt eine H1. Theme-/Elementor-H1-Stile neutralisieren, damit
   die Optik exakt wie vorher bleibt (das <strong> darin traegt weiterhin die Schrift). */
html body .cure-app-start-video__content h1.cure-app-start-video__title{display:block!important;margin:0!important;padding:0!important;border:0!important;font-size:inherit!important;line-height:inherit!important;font-weight:inherit!important;letter-spacing:inherit!important;text-transform:inherit!important;color:inherit!important;background:none!important;text-shadow:inherit!important}

/* 1.11.5 — Startseite: Titel immer mittig; Schrift passt sich ab Tablet-Breite an, damit „A Strange Night XXIII“ nicht rechts herausragt. */
.cure-app-start-video .cure-app-start-video__content{width:min(94vw,1180px);display:flex;flex-direction:column;align-items:center}
@media (min-width:768px){.cure-app-start-video .cure-app-start-video__content strong{font-size:clamp(34px,6.2vw,76px)}}