/* ============================================================
   cosmotrail (ct) — "Celestial Editorial" Theme-Overrides.
   Wird nach style.min.css geladen (gewinnt bei gleicher Spezifitaet).
   Basis-Layout = wl (.site-weloveurlaub). Hier: Papier/Indigo/Gold,
   dunkle Topbar/Newsletter/Footer, Hairline-Borders, ruhige Schatten.
   Palette: Papier #FCFAF4 · Cream #F6EFDF · Night #16182C · Gold #C19A45.
   ============================================================ */

body.site-cosmotrail {
  /* Flächen */
  --bg-page: #FCFAF4; --bg-soft: #F6EFDF; --bg-card: #FFFFFF;
  --bg-inverse: #16182C; --bg-primary: #16182C;
  /* Text */
  --text-primary: #16182C; --text-secondary: #56535E; --text-muted: #8C8678;
  --text-on-dark: #F6EFDF; --text-on-primary: #FFFFFF; --text-on-accent: #16182C;
  /* Akzent (gedecktes Gold) */
  --action-primary: #16182C; --action-primary-hover: #0F1020; --action-primary-active: #0A0B16;
  --action-accent: #C19A45; --action-accent-hover: #A8842F;
  --bg-accent: #C19A45; --breaking-accent: #B0667F; --focus-ring: #C19A45;
  /* Links (Bronze auf hell, AA) */
  --text-link: #8A6A23; --text-link-hover: #16182C; --link: #8A6A23; --link-hover: #16182C;
  /* Rahmen (feine Hairlines) */
  --border-subtle: #E4DDCB; --border-default: #CFC6B2; --border-strong: #8C8678;
  /* Celestial-Hilfsvariablen */
  --ct-night: #16182C; --ct-night-2: #1E2138; --ct-gold: #C19A45;
  --ct-gold-bright: #E0C173; --ct-paper: #FCFAF4; --ct-cream: #F6EFDF;
  --ct-line: rgba(20,18,40,.13);
  background: var(--bg-page);
  /* Das Layout setzt body{display:flex; gap:12px} -> zwischen Header/Ticker/Main
     entstehen 12px helle Balken (Paper-Bg). Fuer ct (dunkle Topbar+Ticker) weg. */
  gap: 0 !important;
}

/* ============ Topbar: dunkler Sternenhimmel statt weiss ============ */
body.site-cosmotrail .header {
  background: var(--ct-night) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
body.site-cosmotrail .header__nav-link { color: rgba(255,255,255,.80) !important; }
body.site-cosmotrail .header__nav-link:hover { color: var(--ct-gold-bright) !important; }
body.site-cosmotrail .header__logo { color: #fff !important; }
/* ct-Logo um 50% groesser (36->54 / mobil 40->60). */
body.site-cosmotrail .header__logo--image img { height: 54px; }
@media (max-width: 768px){ body.site-cosmotrail .header__logo--image img { height: 60px; } }

/* F10: Aszendent-Kombi-Verlinkung auf den Sternzeichen-Profilseiten. */
body.site-cosmotrail .ct-asz-links { margin: 32px 0; }
body.site-cosmotrail .ct-asz-links__intro { font-size: 15px; line-height: 1.6; color: var(--text-muted, #6E6A60); margin: 0 0 14px; }
body.site-cosmotrail .ct-asz-links__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 20px; }
body.site-cosmotrail .ct-asz-links__grid a { display: inline-flex; align-items: baseline; gap: 8px; font-size: 14px; font-weight: 600; color: var(--text-primary, #16182C); text-decoration: none; padding: 7px 0; border-bottom: 1px solid var(--ct-line, rgba(20,18,40,.08)); }
body.site-cosmotrail .ct-asz-links__grid a:hover { color: var(--ct-gold, #C19A45); }
body.site-cosmotrail .ct-asz-links__arrow { color: var(--ct-gold, #C19A45); font-weight: 800; }
@media (max-width: 700px){ body.site-cosmotrail .ct-asz-links__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px){ body.site-cosmotrail .ct-asz-links__grid { grid-template-columns: 1fr; } }
body.site-cosmotrail .header__burger span { background: #fff !important; }
body.site-cosmotrail .favorites-link,
body.site-cosmotrail .header__search-btn { color: rgba(255,255,255,.85) !important; }
body.site-cosmotrail .header__search-btn:hover { background: rgba(255,255,255,.10) !important; color: #fff !important; }
body.site-cosmotrail .header__login-btn,
body.site-cosmotrail .header__user-btn { background: var(--ct-gold) !important; color: var(--ct-night) !important; }
body.site-cosmotrail .header__flyout { background: var(--ct-night-2) !important; border: 1px solid rgba(255,255,255,.12) !important; }
body.site-cosmotrail .header__flyout-link { color: rgba(255,255,255,.82) !important; }
body.site-cosmotrail .header__flyout-link:hover { color: var(--ct-gold-bright) !important; background: rgba(255,255,255,.05) !important; }

/* Ticker: Indigo-Variante mit Gold-Chip */
body.site-cosmotrail .ticker { background: var(--ct-night-2) !important; }
body.site-cosmotrail .ticker__badge { background: var(--ct-gold) !important; color: var(--ct-night) !important; box-shadow: 16px 0 0 var(--ct-night-2), -4px 0 0 var(--ct-night-2) !important; }
body.site-cosmotrail .ticker__item a { color: rgba(255,255,255,.9) !important; }

/* H1 + Akzent-Buttons in Indigo/Gold statt wl-Blau */
body.site-cosmotrail h1 { color: var(--text-primary) !important; }
/* Ausnahme: dunkle Celestial-Heroes (Horoskop-/Sternzeichen-Unterseiten) — der
   weisse Titel darf NICHT von der h1-Regel oben dunkel gefaerbt werden. */
body.site-cosmotrail .ct-hero__title { color: #fff !important; }
body.site-cosmotrail .ct-hero__title em { color: var(--ct-gold-bright) !important; }
body.site-cosmotrail .btn--primary,
body.site-cosmotrail .btn-primary { background: var(--ct-night) !important; color: #fff !important; border-color: var(--ct-night) !important; }
body.site-cosmotrail .btn--primary:hover { background: var(--action-primary-hover) !important; }
body.site-cosmotrail .btn--accent { background: var(--ct-gold) !important; color: var(--ct-night) !important; border-color: var(--ct-gold) !important; }

/* Karten: feine Hairline + ruhiger Schatten (kein Pop-Art-Hard-Offset) */
body.site-cosmotrail .card,
body.site-cosmotrail .article-card,
body.site-cosmotrail .post-card {
  border: 1px solid var(--ct-line) !important;
  box-shadow: 0 10px 24px -16px rgba(18,20,40,.30) !important;
  border-radius: 16px !important;
}

/* ============ Newsletter-Band: dunkler Nachthimmel ============ */
body.site-cosmotrail .newsletter,
body.site-cosmotrail .newsletter-section { background: var(--ct-night) !important; color: #fff !important; }
body.site-cosmotrail .newsletter h2,
body.site-cosmotrail .newsletter-section h2,
body.site-cosmotrail .newsletter__title { color: #fff !important; }
body.site-cosmotrail .newsletter__subtitle { color: rgba(255,255,255,.85) !important; }
body.site-cosmotrail .newsletter__input { background: #fff; color: var(--ct-night); border: none; }
body.site-cosmotrail .newsletter .btn--primary,
body.site-cosmotrail .newsletter__form button { background: var(--ct-gold) !important; color: var(--ct-night) !important; border: none; }
body.site-cosmotrail .newsletter__hint { color: rgba(255,255,255,.6) !important; }
body.site-cosmotrail .newsletter__hint a { color: var(--ct-gold-bright) !important; }

/* ============ Footer: Indigo statt reinem Schwarz ============ */
body.site-cosmotrail .footer,
body.site-cosmotrail .site-footer { background: var(--ct-night) !important; color: rgba(255,255,255,.82) !important; }
body.site-cosmotrail .footer__col-title { color: var(--ct-gold) !important; }
body.site-cosmotrail .footer__link { color: rgba(255,255,255,.78) !important; }
body.site-cosmotrail .footer__link:hover { color: var(--ct-gold-bright) !important; }

/* ============ Mobile-Navigation: Nachthimmel + Gold ============ */
body.site-cosmotrail .mobile-nav { background: var(--ct-night) !important; }
body.site-cosmotrail .mobile-nav__logo { color: var(--ct-gold) !important; }
body.site-cosmotrail .mobile-nav__close { background: var(--ct-gold) !important; color: var(--ct-night) !important; }
body.site-cosmotrail .mobile-nav__link,
body.site-cosmotrail .mobile-nav__sublink { color: rgba(255,255,255,.85) !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; }
body.site-cosmotrail .mobile-nav__link:hover,
body.site-cosmotrail .mobile-nav__sublink:hover { color: var(--ct-gold-bright) !important; }
body.site-cosmotrail .mobile-nav__link-dot,
body.site-cosmotrail .mobile-nav__sublink-dot { background: var(--ct-gold) !important; }
body.site-cosmotrail .mobile-nav__login { background: var(--ct-gold) !important; color: var(--ct-night) !important; }

/* ============================================================
   Horoskop-/Sternzeichen-Komponenten (HoroscopeController-Views).
   Eigene ct-* Klassen — celestial gestylt.
   ============================================================ */
.ct-hero {
  position: relative; background: var(--ct-night); color: #fff;
  border-radius: 20px; overflow: hidden; padding: 64px 48px;
  /* Nicht ueber die volle Breite: auf Content-Breite zentriert (wie .ct-wrap). */
  width: min(1100px, calc(100% - 48px)); margin: 32px auto 48px;
  background-image: radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.5), transparent),
                    radial-gradient(1px 1px at 70% 20%, rgba(255,255,255,.4), transparent),
                    radial-gradient(1.5px 1.5px at 40% 70%, rgba(255,255,255,.35), transparent),
                    radial-gradient(1px 1px at 85% 60%, rgba(255,255,255,.45), transparent),
                    radial-gradient(1px 1px at 55% 85%, rgba(255,255,255,.3), transparent);
}
.ct-hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--ct-gold-bright); margin-bottom: 18px; }
.ct-hero__title { font-weight: 900; font-size: clamp(30px, 4vw, 52px); letter-spacing: -1.5px; line-height: 1.04; margin: 0 0 16px; color: #fff; }
.ct-hero__title em { font-style: normal; color: var(--ct-gold-bright); }
.ct-hero__sub { font-size: 17px; line-height: 1.6; max-width: 34em; color: rgba(255,255,255,.74); margin: 0; }

/* ============================================================
   "Am Himmel heute"-Ticker (echte Planetenstaende) — site-weit auf ct,
   aus dem Layout gerendert (nicht .cthome-gescoped).
   ============================================================ */
body.site-cosmotrail .ct-skyticker { background: var(--ct-night-2, #1E2138); color: rgba(255,255,255,.9); display: flex; align-items: center; height: 42px; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,.08); }
body.site-cosmotrail .ct-skyticker__badge { background: transparent; color: var(--ct-gold-bright, #E0C173); font-weight: 800; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; padding: 0 16px; margin-right: 4px; flex-shrink: 0; white-space: nowrap; border-right: 1px solid rgba(255,255,255,.14); align-self: stretch; display: flex; align-items: center; }
body.site-cosmotrail .ct-skyticker__scroll { overflow: hidden; flex: 1; white-space: nowrap; }
body.site-cosmotrail .ct-skyticker__inner { display: inline-flex; animation: ct-skyscroll 60s linear infinite; }
body.site-cosmotrail .ct-skyticker__scroll:hover .ct-skyticker__inner { animation-play-state: paused; }
body.site-cosmotrail .ct-skyticker__item { font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,.82); padding-right: 44px; text-decoration: none; transition: color .15s; }
body.site-cosmotrail a.ct-skyticker__item { cursor: pointer; }
body.site-cosmotrail a.ct-skyticker__item:hover { color: #fff; }
body.site-cosmotrail .ct-skyticker__item .glyph { color: var(--ct-gold-bright, #E0C173); margin-right: 7px; font-family: 'Noto Sans Symbols2','Segoe UI Symbol','Noto Sans Symbols','DejaVu Sans', sans-serif; font-variant-emoji: text; }
body.site-cosmotrail .ct-skyticker__sep { color: rgba(255,255,255,.3); font-weight: 700; }
@keyframes ct-skyscroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ===== Kategorie-Seite (ct): Hero mit Bild + straffere, durchgaengige Abstaende ===== */
/* Hero-Banner mit Kategorie-Bild bekommt Hero-Hoehe (sonst duenner Streifen). */
body.site-cosmotrail .page-hero--image { min-height: 300px; display: flex; align-items: flex-end; }
body.site-cosmotrail .page-hero--image .page-hero__inner { width: 100%; padding-top: 40px; padding-bottom: 40px; }
/* Spezifitaet (0,4,2) noetig, um die wl-Regel body.site-weloveurlaub .page-hero h1.page-hero__title (var(--ink-900)!important) zu schlagen. */
body.site-cosmotrail .page-hero.page-hero--image h1.page-hero__title { color: #fff !important; text-shadow: 0 2px 20px rgba(0,0,0,.6); }
body.site-cosmotrail .page-hero--image .page-hero__count-num,
body.site-cosmotrail .page-hero--image .page-hero__count-label { color: #fff; }
@media (max-width: 600px){ body.site-cosmotrail .page-hero--image { min-height: 220px; } }
/* bg-cream durchgaengig: leerer Ad-Slot (ct hat keine Ads) erzeugte eine weisse
   Luecke zwischen Hero und Ergebnis-Section; entfernen + Abstaende straffen. */
body.site-cosmotrail .content-wrap:empty,
body.site-cosmotrail .page-hero + .content-wrap { padding-top: 0; padding-bottom: 0; }
body.site-cosmotrail #ergebnisse.bg-cream .section-pad { padding-top: 36px; }

/* Tierkreis-Glyphen: Symbol-Font, monochrom (kein Emoji-Rendering) */
.ct-glyph, .ct-sign__glyph, .ct-horo-card__glyph, .ct-type-card__glyph {
  font-family: 'Noto Sans Symbols2','Segoe UI Symbol','Noto Sans Symbols','DejaVu Sans', var(--font-body, sans-serif);
  font-variant-emoji: text; line-height: 1;
}

/* Sternzeichen-Grid */
.ct-signs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin: 32px 0; }
@media (max-width: 860px){ .ct-signs { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px){ .ct-signs { grid-template-columns: repeat(2, 1fr); } }
.ct-sign {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center; padding: 22px 12px 16px; background: var(--bg-card);
  border: 1px solid var(--ct-line); border-radius: 16px;
  box-shadow: 0 10px 24px -18px rgba(18,20,40,.3);
  transition: transform .2s cubic-bezier(.2,.8,.2,1), border-color .2s;
}
.ct-sign:hover { transform: translateY(-3px); border-color: var(--ct-gold); }
.ct-sign__glyph { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--ct-line); display: flex; align-items: center; justify-content: center; font-size: 30px; color: var(--ct-night); }
.ct-sign:hover .ct-sign__glyph { border-color: var(--ct-gold); color: var(--ct-gold); }
.ct-sign__name { font-weight: 900; font-size: 15px; letter-spacing: -.3px; color: var(--text-primary); }
.ct-sign__date { font-size: 11px; color: var(--text-muted); }
.ct-sign__el { font-size: 9px; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ct-gold); }

/* Element-Akzentfarben (dezent) */
.ct-sign.el-feuer:hover { border-color: #C0843C; }
.ct-sign.el-erde:hover  { border-color: #5E857E; }
.ct-sign.el-luft:hover  { border-color: #C19A45; }
.ct-sign.el-wasser:hover{ border-color: #3E4C78; }
/* #15: vorhandenes Sternzeichen-Bild als Card-Banner (Horoskop-Typ-Hubs). */
.ct-sign--img { padding-top: 0; overflow: hidden; }
.ct-sign__img { display: block; width: calc(100% + 24px); margin: 0 -12px 6px; height: 110px; overflow: hidden; }
.ct-sign__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* #15: Sternzeichen-Bild im Horoskop-Card-Kopf (statt Glyph). */
.ct-horo-card__glyph--img { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; padding: 0; border: 1px solid var(--ct-gold); flex-shrink: 0; }
.ct-horo-card__glyph--img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ct-Artikel mobil im td-Stil: Headline → Subline → Meta → Bild → Breadcrumbs
   (Default-Landscape-Hero zeigt mobil Bild zuerst + Breadcrumbs oben). Nur ct. */
@media (max-width: 768px){
  body.site-cosmotrail .article-hero-band__inner { display: flex; flex-direction: column; }
  body.site-cosmotrail .article-hero-band__inner > .article-hero-landscape { order: 1; }
  body.site-cosmotrail .article-hero-band__inner > .breadcrumbs { order: 2; margin-top: 14px; }
  body.site-cosmotrail .article-hero-landscape { display: flex; flex-direction: column; }
  body.site-cosmotrail .article-hero-landscape__header { order: 1; margin-top: 0; }
  body.site-cosmotrail .article-hero-landscape__media { order: 2; margin-top: 18px; }
}

/* "Zeichen des Tages" / Horoskop-Karte */
.ct-horo-card {
  background: var(--bg-card); border: 1px solid var(--ct-line);
  border-radius: 18px; padding: 28px 30px; margin: 0 0 24px;
  box-shadow: 0 18px 40px -24px rgba(18,20,40,.34);
}
.ct-horo-card__hero { margin: -28px -30px 22px; border-radius: 18px 18px 0 0; overflow: hidden; aspect-ratio: 1200 / 630; background: var(--bg-soft); }
.ct-horo-card__hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ct-horo-card__head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--ct-line); }
.ct-horo-card__glyph { width: 64px; height: 64px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--ct-gold); color: var(--ct-gold); display: flex; align-items: center; justify-content: center; font-size: 36px; }
.ct-horo-card__name { font-weight: 900; font-size: 26px; letter-spacing: -.5px; color: var(--text-primary); }
.ct-horo-card__meta { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.ct-horo-card__period { display: inline-block; font-weight: 800; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ct-gold); margin-bottom: 6px; }
.ct-horo-section { margin-top: 20px; }
.ct-horo-section h3 { font-weight: 900; font-size: 17px; letter-spacing: -.2px; color: var(--text-primary); margin: 0 0 6px; }
.ct-horo-section p { font-size: 15.5px; line-height: 1.65; color: var(--text-secondary); margin: 0; }

/* Themen-Tabs / Zeitraum-Wechsel */
.ct-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.ct-tab {
  font-weight: 800; font-size: 12px; letter-spacing: .5px; padding: 9px 18px;
  border-radius: 999px; border: 1px solid var(--ct-line); color: var(--text-secondary);
  background: var(--bg-card); transition: all .15s;
}
.ct-tab:hover { border-color: var(--ct-gold); color: var(--text-primary); }
.ct-tab.is-active { background: var(--ct-night); color: #fff; border-color: var(--ct-night); }

/* Layout-Wrapper + Breadcrumb */
.ct-wrap { max-width: 1100px; margin: 0 auto; padding: 32px 24px 72px; }
.ct-crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: 18px; }
.ct-crumbs a { color: var(--ct-gold-bright); }
.ct-crumbs__sep { opacity: .4; }
.ct-hero .ct-crumbs { color: rgba(255,255,255,.6); }

/* Horoskop-Typ-Karten (Hub) */
.ct-types { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 8px 0 40px; }
@media (max-width: 760px){ .ct-types { grid-template-columns: repeat(2, 1fr); } }
.ct-type-card {
  display: flex; flex-direction: column; gap: 6px; padding: 22px 20px;
  background: var(--bg-card); border: 1px solid var(--ct-line); border-radius: 16px;
  box-shadow: 0 10px 24px -18px rgba(18,20,40,.3); transition: transform .2s, border-color .2s;
}
.ct-type-card:hover { transform: translateY(-3px); border-color: var(--ct-gold); }
.ct-type-card__glyph { font-size: 26px; color: var(--ct-gold); }
.ct-type-card__title { font-weight: 900; font-size: 17px; color: var(--text-primary); letter-spacing: -.3px; }
.ct-type-card__desc { font-size: 13px; color: var(--text-muted); line-height: 1.5; }

/* Section-Heading (Editorial) */
.ct-sec-head { display: flex; align-items: baseline; gap: 16px; margin: 36px 0 14px; }
.ct-sec-head__t { font-weight: 900; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; white-space: nowrap; color: var(--text-primary); }
.ct-sec-head__line { flex: 1; height: 1px; background: var(--ct-line); }
.ct-intro { font-size: 16px; line-height: 1.65; color: var(--text-secondary); max-width: 62ch; margin: 0 0 20px; }

/* Lucky-/Glücksfaktor-Leiste */
.ct-lucky { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--ct-line); }
.ct-lucky__item { display: flex; flex-direction: column; gap: 2px; }
.ct-lucky__label { font-size: 10px; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ct-gold); }
.ct-lucky__value { font-size: 15px; font-weight: 700; color: var(--text-primary); }

/* "wird erstellt"-Hinweis */
.ct-pending { padding: 18px 20px; border: 1px dashed var(--border-default); border-radius: 14px; background: var(--bg-soft); color: var(--text-secondary); font-size: 14.5px; line-height: 1.6; }

/* "Weitere Horoskope"-Buttons */
.ct-more { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--ct-line); }
.ct-more__btn {
  font-weight: 700; font-size: 12.5px; padding: 10px 18px; border-radius: 999px;
  border: 1px solid var(--ct-line); color: var(--text-primary); background: var(--bg-soft);
  transition: all .15s;
}
.ct-more__btn:hover { background: var(--ct-gold); border-color: var(--ct-gold); color: var(--ct-night); }
.ct-more__btn.is-active { background: var(--ct-night); border-color: var(--ct-night); color: #fff; }