/* maodi — gemeinsame Chrome (Topbar + Ticker + 18+-Leiste) fuer ALLE md-Seiten
   (Startseite UND Unterseiten). Eigenstaendig + hartkodierte Farben, damit es
   ohne md-home.css-Variablen auch auf Unterseiten funktioniert. Laedt nach
   md-theme.css/md-home.css -> gewinnt bei Konflikten (z.B. Ticker-Abstand). */

/* ------------ TOP BAR ------------ */
.topbar { background: rgba(10,6,18,.82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #F2ECFF; position: sticky; top: 0; z-index: 50; border-bottom: 1px solid rgba(255,255,255,.09); }
.topbar__inner { display: flex; align-items: center; gap: 28px; padding: 14px 0; max-width: 1200px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
.topbar__logo { flex-shrink: 0; display: inline-flex; align-items: center; }
.topbar__logo img { height: 32px; width: auto; display: block; filter: drop-shadow(0 0 14px rgba(255,46,136,.55)); }
.topbar__nav { display: flex; gap: 24px; flex: 1; }
.topbar__nav a { font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 1.6px; color: #9C90BC; text-decoration: none; transition: color .18s ease, text-shadow .18s ease; }
.topbar__nav a:hover, .topbar__nav a.is-active { color: #1FE3E0; text-shadow: 0 0 14px rgba(31,227,224,.6); }
.topbar__actions { display: flex; gap: 10px; align-items: center; }
.topbar__pill { background: linear-gradient(120deg,#FF2E88,#9D4EDD); color: #fff; font-weight: 700; font-size: 11px; letter-spacing: 1.2px; padding: 7px 13px; border-radius: 50px; box-shadow: 0 0 18px -3px rgba(255,46,136,.7); }
.topbar__icon { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.09); display: flex; align-items: center; justify-content: center; color: #F2ECFF; text-decoration: none; transition: all .18s ease; }
.topbar__icon:hover { border-color: #1FE3E0; color: #1FE3E0; box-shadow: 0 0 16px -3px rgba(31,227,224,.6); }
.topbar__burger { display: flex; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.09); border-radius: 10px; background: transparent; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; flex-shrink: 0; }
.topbar__burger:hover { border-color: #1FE3E0; }
.topbar__burger span { width: 18px; height: 2px; background: #fff; border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.topbar__burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.topbar__burger.is-open span:nth-child(2) { opacity: 0; }
.topbar__burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
/* Mobilmenü: gemeinsames Standard-Menue (.mobile-nav, openMobileNav()) aus
   main.php/style.css — kein eigenes md-Drawer mehr. */

/* ------------ TICKER (eigene mdc-Klassen statt .ticker, um Kollisionen mit dem
   generischen Breaking-Ticker UND site-weloveurlaub-Regeln zu vermeiden) ------- */
.mdc-ticker { position: relative; margin: 0; background: rgba(20,11,36,.9); color: #F2ECFF; display: flex; align-items: center; height: 42px; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,.09); }
.mdc-ticker__badge { position: relative; z-index: 2; background: linear-gradient(120deg,#FF2E88,#9D4EDD); color: #fff; font-weight: 700; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; padding: 5px 12px; margin: 0 16px; border-radius: 50px; flex-shrink: 0; box-shadow: 0 0 16px -3px rgba(255,46,136,.7); white-space: nowrap; }
.mdc-ticker__scroll { overflow: hidden; flex: 1; min-width: 0; white-space: nowrap; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 40px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 40px), transparent 100%); }
.mdc-ticker__inner { display: inline-flex; animation: mdTickerScroll 50s linear infinite; gap: 44px; }
.mdc-ticker__item { font-size: 13px; font-weight: 500; color: #7BF4F2; letter-spacing: .2px; text-decoration: none; transition: color .15s ease; }
.mdc-ticker__item:hover { color: #fff; }
.mdc-ticker__item .mdc-sep { color: #FF2E88; margin-left: 44px; }
@keyframes mdTickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ------------ 18+ RESPONSIBILITY STRIP (buendig unter dem Ticker) ------------ */
.respo { background: rgba(10,6,18,.7); color: #F2ECFF; border-bottom: 1px solid rgba(255,255,255,.09); margin: 0 !important; }
.respo--fun { box-shadow: inset 3px 0 0 #27E39B; }
.respo--fun .respo__text b { color: #6cf0bd; }
.respo__inner { display: flex; align-items: center; gap: 14px; padding: 10px 0; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
.respo__badge { background: #FF9E2C; color: #2A1600; font-weight: 800; font-size: 12px; letter-spacing: .5px; padding: 4px 10px; border-radius: 6px; flex-shrink: 0; box-shadow: 0 0 16px -4px rgba(255,158,44,.8); }
.respo__text { font-size: 12px; font-weight: 500; letter-spacing: .2px; color: #9C90BC; }
.respo__text b { color: #F2ECFF; font-weight: 700; }
.respo__link { margin-left: auto; font-weight: 700; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: #1FE3E0; text-decoration: none; border: 1px solid rgba(31,227,224,.5); padding: 6px 13px; border-radius: 50px; white-space: nowrap; transition: all .18s ease; }
.respo__link:hover { box-shadow: 0 0 18px -3px rgba(31,227,224,.7); border-color: #1FE3E0; }

@media (max-width: 960px) {
  .topbar__nav { display: none; }
  .topbar__burger { display: flex; }
}
@media (max-width: 560px) {
  .topbar__inner, .respo__inner { padding-left: 20px; padding-right: 20px; }
  .respo__link { margin-left: 0; }
}