/* GewinnRadar – eigenes Layout (nicht 1:1 kopiert) */

:root{
  --bg: #0b1020;
  --panel: rgba(18, 24, 44, .92);
  --panel2: rgba(22, 30, 54, .94);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.68);
  --border: rgba(255,255,255,.12);
  --shadow: 0 18px 55px rgba(0,0,0,.35);
  --radius: 18px;
  --radius2: 26px;
  --accent: #7c5cff;
  --accent2: #23d5ab;
  --accent3: #ffcc70;
}

*{ box-sizing: border-box; }
html, body{overflow-x:hidden; background:#071428;}

body{ height:100%; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: #071428; background-image: none;
}

a{ color: inherit; text-decoration: none; }
img{ display:block; max-width:100%; height:auto; }
code{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: .92em; }

.container{ width:min(1120px, 92vw); margin: 0 auto; }

.skip{
  position:absolute; left:-999px; top: 14px;
  background: #fff; color:#000; padding: 10px 12px; border-radius: 10px;
}
.skip:focus{ left: 14px; z-index: 9999; }

.header{
  position: sticky; top:0; z-index: 50;
  backdrop-filter: blur(14px);
  background: rgba(11,16,32,.7);
  border-bottom: 1px solid var(--border);
}
.header__inner{
  display:flex; align-items:center; gap: 14px;
  padding: 14px 0;
}

.brand{ display:flex; align-items:center; gap: 10px; }
.brand__logo{
  width: 34px; height: 34px; object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.22));
}
.brand__name{ font-weight: 800; letter-spacing: .2px; }

.search{
  flex: 1;
  display:flex; align-items:center; gap: 10px;
  padding: 10px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
}
.search__input{
  flex:1;
  outline: none;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 14px;
}
.search__input::placeholder{ color: rgba(255,255,255,.55); }
.search__btn{
  border: none;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  color: #061018;
  font-weight: 800;
  padding: 10px 14px;
  border-radius: 999px;
  cursor: pointer;
}
.search__btn:active{ transform: translateY(1px); }

.cta{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  font-weight: 650;
  white-space: nowrap;
}
.cta:hover{ background: rgba(255,255,255,.07); }

.header__menu{ display:none; }

.icon-btn{
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  cursor: pointer;
  align-items:center; justify-content:center;
}
.icon-btn span{
  display:block;
  width: 18px; height: 2px;
  background: rgba(255,255,255,.84);
  border-radius: 2px;
  margin: 3px auto;
}

/* nav chips */
.nav{ border-top: 1px solid var(--border); }
.nav__inner{
  display:flex; gap: 10px;
  padding: 10px 0 12px;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}
.nav__inner::-webkit-scrollbar{ height: 8px; }
.nav__inner::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.12); border-radius: 20px; }

.chip{
  display:inline-flex; align-items:center; gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.86);
  cursor:pointer;
  transition: background .15s ease, transform .15s ease;
  white-space: nowrap;
}
.chip img{ width: 18px; height: 18px; object-fit: contain; opacity: .95; }
.chip:hover{ background: rgba(255,255,255,.07); transform: translateY(-1px); }
.chip--active{
  background: linear-gradient(90deg, rgba(124,92,255,.28), rgba(35,213,171,.22));
  border-color: rgba(255,255,255,.18);
}

/* hero */
.hero{ padding: 28px 0 12px; }
.hero__grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
  align-items: start;
}
.badge{
  display:inline-flex;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.82);
  font-weight: 600;
  width: fit-content;
}

.hero h1{
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.05;
  margin: 12px 0 10px;
  letter-spacing: -0.02em;
}
.accent{
  background: linear-gradient(90deg, var(--accent3), var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__sub{ color: var(--muted); margin: 0 0 16px; max-width: 60ch; }

.hero__actions{ display:flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 0; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  color: #061018;
  font-weight: 850;
  border: none;
  cursor: pointer;
}
.btn:hover{ filter: brightness(1.03); }
.btn:active{ transform: translateY(1px); }

.btn--ghost{
  background: rgba(255,255,255,.05);
  color: var(--text);
  border: 1px solid var(--border);
  font-weight: 750;
}

.stats{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  margin-top: 14px;
}
.stat{
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  padding: 12px 12px 10px;
}
.stat__k{ margin:0; color: rgba(255,255,255,.7); font-size: 12px; }
.stat__v{ margin: 6px 0 0; font-weight: 900; font-size: 16px; }

/* hero card */
.hero__card{
  border-radius: var(--radius2);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035));
  box-shadow: var(--shadow);
  overflow:hidden;
}
.hero__cardTop{
  padding: 16px 16px 10px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.hero__cardTop h2{ margin:0; font-size: 18px; }
.hero__cardTop p{ margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.highlights{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 14px 16px 10px;
}
.hl{
  display:flex; gap: 12px; align-items:center;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.14);
  cursor:pointer;
}
.hl:hover{ background: rgba(0,0,0,.18); }
.hl img{ width: 38px; height: 38px; object-fit: contain; }
.hl__title{ margin:0; font-weight: 850; font-size: 14px; }
.hl__meta{ margin: 4px 0 0; color: var(--muted); font-size: 12px; }

.miniNote{
  display:flex; align-items:center; gap: 10px;
  padding: 12px 16px 16px;
  color: rgba(255,255,255,.72);
  font-size: 12px;
}
.dot{
  width: 10px; height: 10px; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent3), var(--accent2));
  box-shadow: 0 0 0 4px rgba(255,255,255,.06);
}

/* sections */
.section{ padding: 28px 0; }
.section--soft{ background: none; }
.section__head{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.section__head h2{ margin:0; font-size: 22px; }
.muted{ color: var(--muted); margin: 0; }

.select{
  display:flex; align-items:center; gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
}
.select__label{ color: rgba(255,255,255,.72); font-size: 12px; font-weight: 650; }
select{
  background: transparent;
  border: none;
  color: var(--text);
  outline: none;
  font-weight: 650;
}
select option{ color: #0b1020; }

/* category grid */
.grid{ display:grid; gap: 12px; }
.cats{ grid-template-columns: repeat(4, minmax(0,1fr)); }

.cat{
  width: 100%;
  display:flex; gap: 12px; align-items:center;
  padding: 14px;
  border-radius: var(--radius2);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  cursor:pointer;
  text-align: left;
  transition: transform .15s ease, background .15s ease;
}
.cat:hover{ transform: translateY(-2px); background: rgba(255,255,255,.06); }
.cat img{ width: 44px; height: 44px; object-fit: contain; }
.cat__title{ margin:0; font-weight: 900; }
.cat__meta{ margin: 4px 0 0; color: var(--muted); font-size: 12px; }

/* cards */
.cards{ display:grid; gap: 12px; }
.card{
  border-radius: var(--radius2);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.035);
  padding: 14px;
  display:grid;
  grid-template-columns: 52px 1fr auto;
  gap: 12px;
  align-items: center;
}
.card__icon{
  width: 52px; height: 52px;
  border-radius: 16px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.12);
  display:grid; place-items: center;
}
.card__icon img{ width: 30px; height: 30px; object-fit: contain; }
.card__title{ margin:0; font-weight: 900; }
.card__meta{ margin: 6px 0 0; color: var(--muted); font-size: 12px; display:flex; flex-wrap: wrap; gap: 10px; }
.tag{
  display:inline-flex; align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.14);
  font-weight: 650;
  font-size: 12px;
}
.card__actions{
  display:flex; align-items:center; gap: 10px;
}
.card__link{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  font-weight: 800;
  white-space: nowrap;
}
.card__link:hover{ background: rgba(255,255,255,.07); }
.save{
  width: 42px; height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  cursor: pointer;
  color: rgba(255,255,255,.92);
}
.save[data-saved="true"]{
  background: linear-gradient(90deg, rgba(255,204,112,.22), rgba(35,213,171,.16));
}

.empty{
  margin-top: 14px;
  border: 1px dashed rgba(255,255,255,.22);
  border-radius: var(--radius2);
  padding: 18px;
  background: rgba(255,255,255,.03);
}

/* footer */
.footer{
  padding: 24px 0 34px;
  border-top: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.82);
}
.footer__grid{
  display:flex; align-items:flex-start; justify-content: space-between;
  gap: 16px;
}
.brand--footer .brand__logo{ width: 30px; height: 30px; }
.footer__links{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}
.footer__links a{
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
}
.footer__links a:hover{ background: rgba(255,255,255,.06); }

.callout{
  display:flex; align-items:center; justify-content: space-between; gap: 14px;
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 18px;
}

/* responsive */
@media (max-width: 980px){
  .hero__grid{ grid-template-columns: 1fr; }
  .cats{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .card{ grid-template-columns: 52px 1fr; }
  .card__actions{ grid-column: 1 / -1; justify-content:flex-end; }
}
@media (max-width: 720px){
  .search{ display:none; }
  .header__menu{ display:inline-flex; }
  .cta{ display:none; }
  .nav{ display:none; }
  .nav.nav--open{ display:block; }
  .stats{ grid-template-columns: 1fr; }
  .cats{ grid-template-columns: 1fr; }
  .footer__grid{ flex-direction: column; }
}




/* --- v3: Ein Design (Dark), weniger Leerraum, Kategorie-Ansicht im selben Stil --- */
:root{
  --danger: #d32f2f;
}

/* Hero: Top + Split (Liste links, Highlights rechts) */
.hero{ padding: 22px 0 18px; }
.heroTop{ max-width: 980px; }

.heroSplit{
  margin-top: 18px;
  display:grid;
  grid-template-columns: 1.2fr .85fr;
  gap: 18px;
  align-items:start;
}

.section__head--tight{
  margin: 0 0 10px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 10px;
}

.heroLeft .cards{
  grid-template-columns: 1fr;
}

.heroRight .hPanel{
  margin: 0 0 12px;
  padding: 14px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
}

@media (max-width: 980px){
  .heroSplit{ grid-template-columns: 1fr; }
  .heroRight{ order: -1; }
}

/* Kategorien-Ansicht: gleicher Dark-Style, rote Akzente wie Screenshot */
.catView{
  padding: 22px 0 40px;
}
.catView__inner{ max-width: 1040px; }

.catBack{
  appearance:none;
  border:1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  padding:10px 12px;
  border-radius: 12px;
  font-weight: 700;
  cursor:pointer;
}
.catBack:hover{ background: var(--panel2); }

.catTitle{
  margin: 14px 0 8px;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.1;
  position: relative;
  padding-bottom: 10px;
}
.catTitle::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width: min(420px, 92%);
  height:4px;
  background: var(--danger);
  border-radius: 999px;
}

.catTop{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 18px;
  align-items:start;
  margin-top: 14px;
}

.catLead{ font-size: 1.12rem; margin: 0 0 8px; color: var(--text); }
.catText{
  margin: 0;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.55;
}

.catSide{
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: var(--radius);
  padding: 12px;
  display:flex;
  justify-content:center;
  align-items:center;
}
.catSide img{
  width: 100%;
  height: auto;
  max-width: 360px;
  border-radius: 14px;
  display:block;
}

.catCards{
  margin-top: 18px;
  display:flex;
  flex-direction:column;
  gap: 14px;
}

.catCard{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  box-shadow: var(--shadow);
  overflow:hidden;
}

.catCard__title{
  margin: 0;
  padding: 14px 16px 12px;
  color: rgba(255,255,255,.92);
  font-size: 1.15rem;
  font-weight: 900;
  border-bottom: 1px solid var(--border);
}

.catCard__title span{
  color: var(--danger);
}

.catCard__body{
  display:grid;
  grid-template-columns: 1fr 130px;
  gap: 14px;
  padding: 14px 16px 16px;
  align-items:start;
}

.rankBadge{
  width: 92px;
  height: 92px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(211,47,47,.25), rgba(211,47,47,.06));
  border: 2px solid rgba(211,47,47,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  font-size: 1.8rem;
  color: rgba(255,255,255,.92);
}

.catCard__h{ margin: 10px 0 6px; font-size: 1.02rem; font-weight: 900; color: rgba(255,255,255,.92); }
.catCard__ul{ margin: 0 0 6px 18px; padding:0; color: var(--muted); }
.catCard__ul li{ margin: 2px 0; }

.catMeta{
  margin-top: 10px;
  display:grid;
  gap: 6px;
  color: rgba(255,255,255,.88);
}
.catMeta b{ font-weight: 900; }
.catMeta span{ color: var(--muted); font-weight: 700; }

.catCard__footer{
  display:flex;
  justify-content:flex-end;
  padding: 0 16px 16px;
}

.catGo{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  border:none;
  background: var(--danger);
  color:#fff;
  padding: 12px 18px;
  border-radius: 10px;
  font-weight: 900;
  cursor:pointer;
  text-decoration:none;
}
.catGo::after{ content:"›"; font-size: 1.35rem; line-height: 1; transform: translateY(-1px); }
.catGo:hover{ filter: brightness(.98); }

@media (max-width: 860px){
  .catTop{ grid-template-columns: 1fr; }
  .catCard__body{ grid-template-columns: 1fr; }
  .catCard__rank{ justify-content:flex-start; }
  .rankBadge{ width: 78px; height: 78px; font-size: 1.55rem; }
}


/* --- v4: Kategorie-Grid wie Screenshot (aber im Dark Theme) --- */
.catGrid--large{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.catTile{
  position: relative;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  padding: 10px;
  cursor: pointer;
  min-height: 150px;
  overflow: hidden;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.catTile:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.18);
}
.catTile img{
  width: 100%;
  height: 140px;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
}
.catTile__label{
  position:absolute;
  left: 12px;
  bottom: 10px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
  font-weight: 800;
  font-size: .95rem;
  backdrop-filter: blur(6px);
}

@media (max-width: 520px){
  .catGrid--large{ grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .catTile{ min-height: 130px; padding: 8px; }
  .catTile img{ height: 110px; }
  .catTile__label{ font-size: .9rem; }
}

/* v4: alte Cat-Card Styles neutralisieren (falls vorhanden) */
.cat{
  display:block;
  text-align:left;
}


/* =========================
   v5 – Kategorie als eigene Seite (gleiches Dark-Design)
   + weniger Leerraum am Desktop
   ========================= */

.newPreview{ margin-top: 18px; }
.subhead{ margin: 0 0 10px; font-size: 1.05rem; opacity: .9; }
.newGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 980px){
  .newGrid{ grid-template-columns: 1fr; }
}

.newMini{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius: 14px;
  padding: 10px 10px;
  display:flex;
  gap: 10px;
  align-items:center;
}
.newMini img{
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: 12px;
  flex: 0 0 auto;
}
.newMini__t{
  font-weight: 800;
  font-size: .95rem;
  line-height: 1.2;
}
.newMini__m{
  font-size: .78rem;
  opacity: .75;
  margin-top: 2px;
}

/* Chips bar for category page */
.header__chips{
  padding: 10px 0 14px;
  display:flex;
  gap: 8px;
  flex-wrap: nowrap;
  overflow:auto;
  scrollbar-width: thin;
}
.header__chips::-webkit-scrollbar{ display:none; }

/* Category page layout (dark) */
.page-category .catPage{ padding: 28px 0 46px; }
.page-category .catPage__inner{ max-width: 1080px; }

.catBackLink{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
  color: rgba(255,255,255,.82);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 700;
}
.catBackLink:hover{ filter: brightness(1.05); }

.page-category .catTitle{
  margin: 16px 0 10px;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.1;
  position: relative;
  padding-bottom: 10px;
}
.page-category .catTitle::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width: min(420px, 92%);
  height: 4px;
  background: var(--accent, #6d5efc);
  border-radius: 999px;
  opacity: .9;
}

.page-category .catTop{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 16px;
  align-items:start;
  margin-top: 16px;
}
@media (max-width: 860px){
  .page-category .catTop{ grid-template-columns: 1fr; }
}

.page-category .catLead{
  margin: 0 0 8px;
  font-size: 1.15rem;
  opacity: .92;
}
.page-category .catText{
  margin: 0;
  opacity: .76;
  line-height: 1.55;
}

.page-category .catSide{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  border-radius: 16px;
  padding: 12px;
  display:flex;
  justify-content:center;
  align-items:center;
}
.page-category .catSide img{
  width: 100%;
  height: auto;
  max-width: 420px;
  border-radius: 14px;
  display:block;
}

/* Cards like the “external page” structure but dark */
.page-category .catCards{
  margin-top: 18px;
  display:flex;
  flex-direction:column;
  gap: 14px;
}

.page-category .catCard{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
  overflow:hidden;
}

.page-category .catCard__title{
  margin: 0;
  padding: 14px 16px 12px;
  color: rgba(255,255,255,.92);
  font-size: 1.18rem;
  font-weight: 900;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.page-category .catCard__body{
  display:grid;
  grid-template-columns: 1fr 140px;
  gap: 12px;
  padding: 14px 16px 14px;
  align-items:start;
}
@media (max-width: 860px){
  .page-category .catCard__body{ grid-template-columns: 1fr; }
}

.page-category .catCard__h{
  margin: 10px 0 6px;
  font-size: .98rem;
  font-weight: 900;
  opacity: .92;
}
.page-category .catCard__ul{ margin: 0 0 6px 18px; padding: 0; opacity: .88; }
.page-category .catCard__ul li{ margin: 3px 0; }

.page-category .catMeta{
  margin-top: 10px;
  display:grid;
  gap: 6px;
  opacity: .9;
}
.page-category .catMeta b{ font-weight: 900; }
.page-category .catMeta span{ opacity: .78; font-weight: 700; }

.page-category .catCard__rank{
  display:flex;
  justify-content:center;
  align-items:center;
}
.page-category .rankBadge{
  width: 96px;
  height: 96px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(109,94,252,.26), rgba(28,255,214,.06));
  border: 1px solid rgba(255,255,255,.14);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  font-size: 1.8rem;
  color: rgba(255,255,255,.92);
}

.page-category .catCard__footer{
  display:flex;
  justify-content:flex-end;
  padding: 0 16px 16px;
}
.page-category .catGo{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  border:none;
  background: linear-gradient(90deg, rgba(109,94,252,1), rgba(28,255,214,1));
  color:#041019;
  padding: 11px 16px;
  border-radius: 12px;
  font-weight: 900;
  cursor:pointer;
  text-decoration:none;
}
.page-category .catGo::after{ content:"›"; font-size: 1.25rem; }


/* =========================
   v6 – Header wie Screenshot 2 (größer) + Legal/Verwalten Seiten
   ========================= */

.brand{
  gap: 10px;
}
.brand__name{
  font-size: 1.08rem;
  font-weight: 900;
}

/* Nav links im Header auf Desktop zurücknehmen (wir wollen die Chips als Hauptnavigation) */
@media (min-width: 860px){
  .nav{ display:none; }
  .menuBtn{ display:none; }
}

/* Chips größer (wie Screenshot 2, nur größer) */
.chips{
  gap: 10px;
  padding: 10px 0 14px;
}
.chip{
  font-size: .95rem;
  padding: 10px 14px;
  border-radius: 999px;
}

/* Manage / Legal pages */
.manage{ padding: 28px 0 56px; }
.manage__inner{ max-width: 980px; }
.manage__title{
  margin: 16px 0 8px;
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  line-height: 1.1;
}
.manage__sub{ opacity: .78; margin: 0 0 18px; }

.manageGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 900px){
  .manageGrid{ grid-template-columns: 1fr; }
}

.manageCard{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  border-radius: 16px;
  padding: 16px;
  text-decoration:none;
  color: rgba(255,255,255,.92);
  display:block;
}
.manageCard:hover{ filter: brightness(1.05); }
.manageCard__h{ font-weight: 900; font-size: 1.05rem; }
.manageCard__p{ opacity: .78; margin-top: 6px; line-height: 1.45; }
.manageCard--ghost{ opacity: .85; }

.legal{ padding: 28px 0 56px; }
.legal__inner{ max-width: 980px; }
.legal__title{
  margin: 16px 0 12px;
  font-size: clamp(1.9rem, 3vw, 2.6rem);
}
.legal__card{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  border-radius: 16px;
  padding: 16px;
}

/* ===== v7: GewinnHai Branding (nur Logo, größer) ===== */
.brand__logo{
  width: 64px;
  height: 64px;
  border-radius: 14px;
}
@media (max-width: 720px){
  .brand__logo{ width: 56px; height: 56px; }
}
.brand__name{
  font-size: 1.2rem;
  font-weight: 900;
}

/* ===== v8: Footer Links als Buttons (wie Screenshot 2) ===== */
.footer__links{
  display:flex;
  gap: 12px;
  justify-content:flex-end;
  flex-wrap: wrap;
}
.pillLink{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  text-decoration:none;
  font-weight: 800;
  color: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
  cursor:pointer;
}
.pillLink:hover{ filter: brightness(1.07); }


/* ===== v9: Kategorien-Leiste oben (wie Screenshot 2) + kein Verwalten ===== */
.topNav{
  display:flex;
  gap: 12px;
  align-items:center;
  color: rgba(255,255,255,.82);
}
.topNav a{
  text-decoration:none;
  color: rgba(255,255,255,.78);
  font-weight: 800;
}
.topNav a:hover{ color: rgba(255,255,255,.92); }

.chips--header{
  padding: 12px 0 16px;
  display:flex;
  gap: 10px;
  flex-wrap: nowrap;
  overflow:auto;
  scrollbar-width: thin;
}


/* Desktop: TopNav sichtbar, Burger weg */
@media (min-width: 860px){
  .menuBtn{ display:none; }
  .topNav{ display:flex; }
}
/* Mobile: TopNav als Drawer über burger (optional) */
@media (max-width: 859px){
  .topNav{ display:none; }
  .topNav.is-open{
    display:flex;
    flex-direction:column;
    position:absolute;
    right: 16px;
    top: 70px;
    background: rgba(10,14,25,.92);
    border: 1px solid rgba(255,255,255,.12);
    padding: 10px;
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0,0,0,.5);
    z-index: 50;
  }
}

/* Chips bigger, icon+text inline */
.chip{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  font-size: .98rem;
  white-space: nowrap;
}
.chip img{
  width: 22px;
  height: 22px;
  border-radius: 6px;
}

/* ===== v10: Header minimal (nur Logo+Name) ===== */
.topNav{ display:none !important; }
.menuBtn{ display:none !important; }

.chips--header{
  padding: 12px 0 16px;
  display:flex;
  gap: 10px;
  flex-wrap: nowrap;
  overflow:auto;
  scrollbar-width: thin;
}


.chip{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  font-size: .98rem;
  white-space: nowrap;
  text-decoration:none;
}
.chip:hover{ filter: brightness(1.07); }

/* ===== v11: Highlights immer mit Kategorie-Bild ===== */
.hCard__img{
  width: 100%;
  height: auto;
  display:block;
  border-radius: 14px;
}

/* Cat tiles are links now */
.catTile{ text-decoration:none; color: inherit; }

/* ===== v14 tweaks ===== */
.panel__head p{ display:none; } /* Sicherheitsnetz: falls irgendwo noch Highlight-Text steht */
.footer__left p{ display:none; } /* Sicherheitsnetz: Frontend-Template Zeile ausblenden */
/* ===== v16: Kategorie-Slider mit Pfeilen ===== */
.chipsScroller{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 0;
}
.chipsNav{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.9);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex: 0 0 auto;
}
.chipsNav:disabled{
  opacity: .35;
  cursor: default;
}
.chipsNav:hover:not(:disabled){
  filter: brightness(1.08);
}

/* Der Scrollbereich selbst */
.chips--header{
  flex: 1 1 auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
}
.chips--header .chip{ scroll-snap-align: start; }

/* ===== v16: Karten-Hintergründe nicht mehr "durchscheinend" ===== */
.panel, .hCard, .card, .catCard{
  background: linear-gradient(180deg, var(--panel2), var(--panel)) !important;
}
/* ===== v17: Chips-Leiste ohne Pfeile + scrollbar bar sichtbar ===== */
.chips--header{
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  cursor: grab;
}
.chips--header:active{ cursor: grabbing; }
.chips--header::-webkit-scrollbar{
  height: 8px;
}
.chips--header::-webkit-scrollbar-track{
  background: rgba(255,255,255,.06);
  border-radius: 999px;
}
.chips--header::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.18);
  border-radius: 999px;
}
/* ===== v17-fix3: smoother chips drag ===== */
.chips--header{
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.chips--header::-webkit-scrollbar{ display:none; }
.chips--header.is-dragging{
  cursor: grabbing;
  user-select: none;
}
.chips--header.is-dragging *{
  user-select: none;
}
/* ===== Chipbar (arrows) ===== */
.chipbar{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.chipbar .chips--header{
  flex:1;
  min-width:0;
  overflow:hidden;
  display:flex;
  gap:10px;
  padding: 8px 6px;
  border-radius: 999px;
  scroll-behavior: smooth;
}
.chipbar__arrow{
  width:38px;
  height:38px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  font-size: 20px;
  line-height: 1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.chipbar__arrow:hover{ background: rgba(255,255,255,.10); }
.chipbar__arrow:disabled{
  opacity:.35;
  cursor: default;
}
@media (max-width: 720px){
  .chipbar__arrow{ width:34px; height:34px; }
}


/* ===== fix7: smooth, clean arrows scrolling ===== */
.chips--header{
  scroll-behavior: smooth;
  scroll-snap-type: none;
}
.chips--arrow{
  transition: opacity .15s ease, transform .15s ease;
}
.chips--arrow:active{
  transform: scale(.96);
}

/* fix8 footer padding */
html, body { overflow-x: hidden; }
.footer .container { padding-left: 24px; padding-right: 24px; }

/* fix9 pagination */
.pager{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  padding:26px 0 10px;
}
.pager a{
  width:40px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background: transparent;
  border: 2px solid rgba(120, 140, 255, 0.65);
  color: rgba(255,255,255,0.9);
  text-decoration:none;
  font-weight:700;
  line-height:1;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.pager a:hover{ transform: translateY(-1px); border-color: rgba(120, 255, 210, 0.8); }
.pager .is-active{
  background: rgba(255, 80, 80, 0.18);
  border-color: rgba(255, 80, 80, 0.95);
  color: #fff;
}
.pager .is-disabled{
  opacity: .35;
  pointer-events:none;
}
@media (max-width: 520px){
  .pager{ gap:8px; padding:22px 0 6px; }
  .pager a{ width:34px; height:32px; border-radius:10px; font-size:14px; }
}


/* ===== Modal (Gewinnspiel-Details) ===== */
.modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:9999; padding:18px; }
.modal.is-open{ display:flex; }
.modal__backdrop{ position:absolute; inset:0; background: rgba(2,10,22,.78); backdrop-filter: blur(10px); }
.modal__panel{
  position:relative;
  width:min(920px, 100%);
  max-height:min(86vh, 920px);
  overflow:hidden;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(10,18,40,.92);
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
}
.modal__scroll{ max-height:min(86vh, 920px); overflow:auto; padding: 18px; }
.modal__head{
  display:flex; gap:16px; align-items:flex-start; justify-content:space-between;
  padding: 6px 2px 14px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.modal__title{ font-size: 22px; line-height:1.25; margin:0; }
.modal__meta{ margin-top:8px; color: rgba(255,255,255,.70); font-size: 13px; }
.modal__heroImg{
  width: 140px; height: 100px; object-fit: contain;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  padding: 10px;
  flex: 0 0 auto;
}
.modal__grid{ display:grid; grid-template-columns: 1.25fr .75fr; gap: 14px; padding-top: 14px; }

/* v17.10: stacked modal sections (like sc2) */
.modal__stack{ display:flex; flex-direction:column; gap:14px; padding-top:14px; }
.modal__card{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 14px;
}
.modal__card h4{ margin:0 0 8px; font-size: 14px; color: rgba(255,255,255,.86); letter-spacing:.2px; }
.modal__card p{ margin:0; color: rgba(255,255,255,.78); line-height:1.45; }

/* Text inside modal cards (dynamic content divs) */
.modal__card .modal__text{ margin:0; color: rgba(255,255,255,.78); line-height:1.45; white-space: pre-line; }
.modal__kv{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.modal__kv .kv{ padding:10px 12px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); }
.modal__kv .k{ font-size: 12px; color: rgba(255,255,255,.64); }
.modal__kv .v{ margin-top:4px; font-weight:800; }

/* stacked details list */
.modal__kv--list{ display:flex; flex-direction:column; gap:10px; }
.modal__kv--list .kvRow{ display:flex; justify-content:space-between; gap:12px; padding:10px 12px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); }
.modal__kv--list .kvRow .k{ font-size: 12px; color: rgba(255,255,255,.64); }
.modal__kv--list .kvRow .v{ font-weight:800; text-align:right; }
.modal__actions{
  display:flex; gap:10px; justify-content:space-between; align-items:center;
  padding-top: 14px; margin-top: 14px;
  border-top: 1px solid rgba(255,255,255,.10);
}
.modal__actions .btn{ flex:1; }
.modal__actions .btn--back{ background: rgba(255,255,255,.06); color:#fff; border:1px solid rgba(255,255,255,.14); }
.modal__actions .btn--take{ background: #e53b3b; color:#fff; border: none; }
.modal__actions .btn--take:hover{ filter: brightness(1.05); }
@media (max-width: 820px){
  .modal__grid{ grid-template-columns: 1fr; }
  .modal__heroImg{ width: 110px; height: 78px; }
  .modal__title{ font-size: 19px; }
}

/* ===== GewinnHai: Abgelaufen Styling ===== */
.is-expired{
  filter: grayscale(1);
  opacity: .55;
  position: relative;
}

.is-expired::after{
  content: "Abgelaufen";
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 6px 10px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .2px;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
}

/* ===== GewinnHai: Expired Styling ===== */
.card.is-expired,
.gh-card.is-expired,
.tile.is-expired {
  opacity: .55;
  filter: grayscale(1);
}

.expiredBadge{
  position:absolute;
  top:12px;
  left:12px;
  padding:6px 10px;
  border-radius:999px;
  font-weight:700;
  font-size:12px;
  letter-spacing:.2px;
  background: rgba(120,120,120,.35);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
}

/* ===== GewinnHai: Abgelaufen Styling ===== */
.is-expired{
  filter: grayscale(1);
  opacity: .55;
  position: relative;
}

.is-expired::after{
  content: "Abgelaufen";
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 6px 10px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 12px;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
}

/* ===== GewinnHai: Abgelaufen Styling ===== */
.is-expired{
  filter: grayscale(1);
  opacity: .55;
  position: relative;
}
.is-expired::after{
  content: "Abgelaufen";
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 6px 10px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .2px;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
}



/* ===== GH REDIRECT TOAST ===== */
.ghRedirectToast{
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  max-width: min(720px, calc(100vw - 24px));
  width: max-content;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(10,18,35,.72);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(255,255,255,.92);
  font-weight: 600;
  font-size: 14px;
  display: none;
  align-items: center;
  gap: 10px;
}
.ghRedirectToast.is-open{ display:flex; }
.ghRedirectDot{
  width: 10px; height: 10px;
  border-radius: 999px;
  background: #3ddc97;
  box-shadow: 0 0 0 6px rgba(61,220,151,.12);
  flex: 0 0 auto;
}
.ghRedirectSub{
  font-weight: 500;
  opacity: .9;
}

/* ===== GH_REDIRECT_NOTE ===== */
.ghRedirectNote{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  font-size: 14px;
  line-height: 1.35;
}
.ghRedirectNote strong{ font-weight: 700; }

/* ===== GH DETAILS PAGE STACK ===== */
/* PC soll wie Mobile aussehen: alles untereinander – nur auf Detail-Ansicht */
.page-details .container{ max-width: 900px; }

/* Alles untereinander (falls Grid/Flex aktiv ist) */
.page-details .detailsGrid,
.page-details .detailGrid,
.page-details .modal__grid,
.page-details .modal__fields,
.page-details .detailsFields,
.page-details .detailsTop,
.page-details .detailTop,
.page-details .giveawayTop{
  display: block !important;
}

/* Titel über dem Bild, mittig, fetter */
.page-details h1,
.page-details .detailsTitle,
.page-details .detailTitle,
.page-details .modal__title{
  text-align: center !important;
  font-weight: 800 !important;
  margin: 18px 0 12px !important;
}

/* Subline/meta mittig */
.page-details .detailsMeta,
.page-details .detailMeta,
.page-details .modal__meta{
  text-align: center !important;
}

/* Bild mittig */
.page-details img{
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Labels immer fett (Gewinne, Gesamtwert, …) */
.page-details .modal__label,
.page-details .label,
.page-details .kv__k,
.page-details .field__label{
  font-weight: 800 !important;
}

/* Weiterleitung-Box auf jeden Fall weg (falls doch noch vorhanden) */
.page-details .redirectNote,
.page-details .miniNote,
.page-details .note{
  display: none !important;
}
/* ===== END GH DETAILS PAGE STACK ===== */

/* ===== GH DETAIL FIX BEGIN ===== */
/* Nur Slug-Detailseite über #ghDetailMount */

#ghDetailMount .modal__head{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  text-align:center !important;
  gap:12px !important;
}

#ghDetailMount .modal__titlewrap{
  width:100% !important;
  text-align:center !important;
}

#ghDetailMount .modal__title{
  text-align:center !important;
  font-weight:800 !important;
}

#ghDetailMount .modal__thumb{
  width:100% !important;
  display:flex !important;
  justify-content:center !important;
}

#ghDetailMount .modal__thumb img{
  display:block !important;
  margin:0 auto !important;
}

/* PC wie Mobile: EINspaltig */
#ghDetailMount .modal__grid{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:14px !important;
}

/* Labels fett */
#ghDetailMount .modal__label{
  font-weight:800 !important;
}
/* ===== GH DETAIL FIX END ===== */

/* ===== GH DETAIL NO-INNER-SCROLL BEGIN ===== */
/* NUR Slug-Detailseite: keine innere Scrollbox, Seite scrollt normal */
#ghDetailMount .modal{
  position: static !important;
  inset: auto !important;
  display: block !important;
  padding: 0 !important;
}

#ghDetailMount .modal__dialog{
  position: static !important;
  transform: none !important;
  top: auto !important;
  left: auto !important;
  margin: 0 auto !important;
}

#ghDetailMount .modal__scroll{
  max-height: none !important;
  overflow: visible !important;
  padding: 18px !important;
}

/* Falls irgendwo noch panel-height greift: auf "auto" */
#ghDetailMount .modal__panel{
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
}
/* ===== GH DETAIL NO-INNER-SCROLL END ===== */


/* ===== GH CATEGORY HERO SMOOTH BEGIN ===== */
/* Kategorie-Seite: nichts "falsches" anzeigen, bis JS fertig ist */
body.page-category #catTitle,
body.page-category #catLead,
body.page-category #catIntro{
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 320ms ease, transform 320ms ease;
  will-change: opacity, transform;
}

/* Bild: Platz reservieren + weich einblenden */
body.page-category #catImage{
  opacity: 0;
  transition: opacity 420ms ease;
  will-change: opacity;
  min-height: 170px; /* verhindert Layout-Shift / Text-Flash */
}

/* Sobald JS "ready" sagt -> Text sichtbar */
body.page-category.gh-cat-ready #catTitle,
body.page-category.gh-cat-ready #catLead,
body.page-category.gh-cat-ready #catIntro{
  opacity: 1;
  transform: none;
}

/* Bild wird nach load freigegeben */
body.page-category #catImage.gh-ready{
  opacity: 1;
}
/* ===== GH CATEGORY HERO SMOOTH END ===== */



/* ===== GH HIDE HERO BADGE BEGIN ===== */
/* versteckt die "Neu • täglich frische Gewinnchancen" Blase (ohne Layout zu brechen) */
.hero__badge,
.hero__kicker,
.hero__pill,
.hero__tagline{
  display:none !important;
}
/* ===== GH HIDE HERO BADGE END ===== */


/* ===== GH HIDE NEW BADGE BEGIN ===== */
.hero__badge,
.hero__kicker,
.hero__pill,
.hero__tagline{
  display:none !important;
}
/* ===== GH HIDE NEW BADGE END ===== */






/* ===== GH HEADER LOGO BIG BEGIN ===== */
/* Header-Logo + "GewinnHai" größer machen (nur oben im Header) */

header.header a.brand{
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

header.header a.brand img.brand__logo{
  height: 72px;
  width: auto;
}

header.header a.brand .brand__name{
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
}

/* Mobile etwas kleiner */
@media (max-width: 520px){
  header.header a.brand img.brand__logo{ height: 52px; }
  header.header a.brand .brand__name{ font-size: 24px; }
}

/* ===== GH HEADER LOGO BIG END ===== */



/* ===== GH HOME BIG STAT BEGIN ===== */
/* Gewinnsumme-Box neu (Feature Box) */

.ghBigStat{
  grid-column: 1 / -1;
  width: 100%;
  position: relative;
  overflow: hidden;
}

/* sanfter Hintergrund-Glow (passt zum Dark-Design) */
.ghBigStat::before{
  content:"";
  position:absolute;
  inset:-60% -30%;
  background: radial-gradient(closest-side, rgba(255,255,255,.10), rgba(255,255,255,0));
  transform: rotate(-10deg);
  pointer-events:none;
}

/* Zahl richtig fett */
.ghBigStat #statSum{
  display:block;
  font-size: clamp(42px, 4.6vw, 72px);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: 0.5px;
  margin-top: 8px;
}

/* Meta-Zeile unten */
.statMeta{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-top: 12px;
  font-size: 14px;
  opacity: .88;
  flex-wrap: wrap;
}

.statMeta__dot{
  opacity: .7;
}

/* Mobile etwas kompakter */
@media (max-width: 520px){
  .ghBigStat #statSum{ font-size: 46px; }
  .statMeta{ font-size: 13px; }
}
/* ===== GH HOME BIG STAT END ===== */


/* ===== GH MOBILE STATS 2COL BEGIN ===== */
/* Mobile: Stat-Boxen nebeneinander (2 Spalten) */
@media (max-width: 520px){

  /* wir greifen robust: den direkten Container der stat__box Elemente */
  .stats,
  .hero__stats,
  .statsGrid,
  .heroStats,
  .statRow,
  .stat-grid,
  .stats-grid{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    align-items: stretch !important;
  }

  /* einzelne Box soll volle Breite ihrer Grid-Spalte nehmen */
  .stat__box,
  .statBox,
  .stat-card,
  .stats .box{
    width: 100% !important;
    min-width: 0 !important;
  }

  /* dein BigStat soll NICHT über beide Spalten gehen, sonst bleibt es wieder allein */
  .ghBigStat{
    grid-column: auto !important;
  }
}

/* super schmale Handys: lieber wieder untereinander */
@media (max-width: 360px){
  .stats,
  .hero__stats,
  .statsGrid,
  .heroStats,
  .statRow,
  .stat-grid,
  .stats-grid{
    grid-template-columns: 1fr !important;
  }
}
/* ===== GH MOBILE STATS 2COL END ===== */


/* ===== GH STATMETA STYLE BEGIN ===== */
.statMeta{
  margin-top: 10px;
  font-size: 14px;
  opacity: .85;
  letter-spacing: .2px;
}
/* ===== GH STATMETA STYLE END ===== */



/* ===== GH CHIPBAR ARROW STABLE BEGIN ===== */
/* Pfeile bleiben auf einer Höhe (kein Jump beim Switch) */

.header .chipbar{
  position: relative;
  display: flex;
  align-items: center;
}

/* Row stabil: keine Höhenänderung durch Active/Fonts */
.header .chipbar .chips--header{
  display: flex;
  align-items: center;
  flex-wrap: nowrap !important;
  white-space: nowrap;
  min-height: 52px;               /* feste Leistenhöhe */
  padding: 6px 46px;              /* Platz für die Overlays */
}

/* Chips: Border immer gleich dick -> kein Height-Shift */
.header .chipbar .chips--header .chip{
  border: 1px solid transparent;  /* wichtig */
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
.header .chipbar .chips--header .chip--active{
  border-color: rgba(255,255,255,.18);
}

/* Pfeile als Overlay -> unabhängig von Zeilenhöhe */
.header .chipbar .chipbar__arrow{
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  height: 38px;
  width: 38px;
  display: grid;
  place-items: center;
  z-index: 5;
  line-height: 1;
}

/* links/rechts fix */
.header .chipbar .chipbar__arrow--left{ left: 6px !important; }
.header .chipbar .chipbar__arrow--right{ right: 6px !important; }

/* ===== GH CHIPBAR ARROW STABLE END ===== */


/* ===== GH FORCE HIDDEN BEGIN ===== */
/* WICHTIG: verhindert Flash von #catView (hidden) beim Laden/Reload/Home */
[hidden]{
  display: none !important;
}

/* extra sicher */
#catView[hidden],
#homeView[hidden]{
  display: none !important;
}
/* ===== GH FORCE HIDDEN END ===== */


/* ===== GH CHIPBAR STABLE BEGIN ===== */
.chipbar{
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 10px;
}

.chipbar__arrow{
  height: 44px;
  width: 44px;
  display: grid;
  place-items: center;
  line-height: 1;
}

.chips--header{
  min-height: 48px;          /* feste Höhe -> kein Jump */
  display: flex;
  align-items: center;
  flex-wrap: nowrap !important;
  white-space: nowrap;
}
/* ===== GH CHIPBAR STABLE END ===== */


/* ===== GH HIGHLIGHTS CARD V1 BEGIN ===== */
/* Top 3 Gewinnspiele: mehr Raum + Meta + Button unten rechts */

.heroRight .highlights{
  display: grid;
  gap: 14px;
}

.heroRight .highlights .card,
.heroRight .highlights .hCard{
  overflow: hidden;
}

.hCard{
  border-radius: 18px;
}

/* Bildbereich */
.hCard__media{
  padding: 12px 12px 0 12px;
}
.hCard__media img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
}

/* Body mit Luft */
.hCard__body{
  padding: 12px 14px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Titel */
.hCard__title{
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
}

/* Meta-Zeilen */
.hCard__meta{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  opacity: .9;
}
.hCard__meta .dot{
  opacity: .5;
}
.hCard__meta2{
  font-size: 12px;
  opacity: .8;
}

/* Button unten rechts */
.hCard__btn{
  margin-top: auto;
  align-self: flex-end;
  padding: 8px 12px;
  border-radius: 12px;
}
/* ===== GH HIGHLIGHTS CARD V1 END ===== */


/* ===== GH HIGHLIGHTS CARD V3 BEGIN ===== */
/* Top 3 Gewinnspiele: Raum, saubere Meta, Button immer unten rechts */

.heroRight .highlights{
  display: grid;
  gap: 14px;
}

.ghHLCard{
  border-radius: 16px;
  overflow: hidden;
}

.ghHLCard__pad{
  padding: 14px 14px 12px 14px;
  min-height: 132px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
}

.ghHLCard__title{
  margin: 0;
  font-size: 16px;
  line-height: 1.2;
}

.ghHLCard__meta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  opacity: .9;
  font-size: 13px;
  margin-top: 6px;
}

.ghHLCard__pill{
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  opacity: .95;
}

.ghHLCard__dot{
  opacity: .6;
}

.ghHLCard__bottom{
  display: flex;
  justify-content: flex-end; /* unten rechts */
  align-items: flex-end;
}

.ghHLCard__bottom .btn{
  margin-top: 4px;
}

/* etwas mehr Luft am rechten Rand im Highlight-Panel */
.heroRight{
  padding-left: 6px;
}

/* Mobile: nicht zu eng */
@media (max-width: 520px){
  .ghHLCard__pad{ min-height: 124px; padding: 12px; }
  .ghHLCard__title{ font-size: 15px; }
}
/* ===== GH HIGHLIGHTS CARD V3 END ===== */


/* ===== GH HIGHLIGHTS IMG V1 BEGIN ===== */
/* Bild oben in der Top-3 Karte (passt zum Dark-Design) */

.ghHLCard__media{
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 16px;
  margin: 0 0 10px 0;
  background: rgba(255,255,255,.04);
}

.ghHLCard__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
}

@media (max-width: 520px){
  .ghHLCard__media{ aspect-ratio: 16 / 9; }
}
/* ===== GH HIGHLIGHTS IMG V1 END ===== */


/* ===== GH HIGHLIGHTS UI V3 BEGIN ===== */
/* Top 3 Gewinnspiele: Bild oben, mehr Abstand, Button immer unten rechts */

.heroRight .highlights{
  display: grid;
  gap: 14px;
}

.heroRight .hCard{
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
}

.heroRight .hImgWrap{
  padding: 14px 14px 0 14px;
}

.heroRight .hImg{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  background: rgba(0,0,0,.15);
}

.heroRight .hBody{
  padding: 12px 14px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.heroRight .hTitle{
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
}

.heroRight .hMeta{
  margin: 0;
  font-size: 12px;
  color: rgba(255,255,255,.72);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.heroRight .hMeta .tag{
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.06);
  color: rgba(255,255,255,.82);
}

.heroRight .hMeta .sep{
  opacity: .5;
}

.heroRight .hActions{
  margin-top: auto;              /* drückt nach unten */
  display: flex;
  justify-content: flex-end;     /* rechts */
  padding-top: 6px;
}

/* ===== GH HIGHLIGHTS UI V3 END ===== */






/* ===== GH NEWEST CARDS STYLE V4 BEGIN ===== */
/* Neue Gewinnspiele: Titel fett/weiß, Meta darunter, Icon größer, Button unten rechts mit Abstand */

.ghNewestCard{
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
}

.ghNewestCard__icon{
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 10px 22px rgba(0,0,0,.28);
}

.ghNewestCard__body{
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ghNewestCard__title{
  margin: 0;
  font-size: 14px;
  line-height: 1.25;
  font-weight: 800;
  color: rgba(255,255,255,.95);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ghNewestCard__meta{
  margin: 0;
  font-size: 12px;
  color: rgba(255,255,255,.70);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Button unten rechts, aber nicht "angeklatscht" */
.ghNewestCard__btn{
  align-self: flex-end;
  margin-top: 6px;
}

/* Mobile */
@media (max-width: 520px){
  .ghNewestCard{
    padding: 12px;
  }
  .ghNewestCard__icon{
    width: 46px;
    height: 46px;
    flex-basis: 46px;
  }
}

/* Extra-klein: Button darf nicht am Rand "abgeschnitten" wirken */
@media (max-width: 420px){
  #cards .ghNewestCard__btn{
    padding: 10px 14px;
    font-size: 14px;
    border-radius: 999px;
    max-width: 100%;
  }
}

/* ===== GH NEWEST CARDS STYLE V4 END ===== */


/* ===== GH NEWEST OVERRIDES BEGIN ===== */
/* Neue Gewinnspiele: Icon etwas größer + Button unten rechts mit Luft */

.card--newest{
  align-items: stretch; /* erlaubt Button unten */
}

.card--newest .card__icon img{
  width: 38px;
  height: 38px;
}

.card--newest .card__btn--newest{
  justify-self: end;
  align-self: end;
  margin: 0 6px 6px 0; /* nicht angeklatscht */
}
/* ===== GH NEWEST OVERRIDES END ===== */

/* ===== GH MOBILE UI FIX BEGIN ===== */
/* Mobile-Optimierung: Neue Gewinnspiele + Top3 (kein Overflow, saubere Abstände, Button unten rechts) */

@media (max-width: 820px){
  /* insgesamt etwas mehr Luft in der rechten Spalte */
  .heroSplit{
    gap: 16px;
  }
}

@media (max-width: 640px){

  /* Spalten untereinander */
  .heroSplit{
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Panels nicht an den Rand kleben */
  .heroLeft,
  .heroRight{
    margin-top: 10px;
  }

  /* =========================
     Neue Gewinnspiele (links)
     ========================= */

  /* Kartenabstände */
  #cards,
  .cards{
    gap: 12px !important;
  }

  /* Card Layout stabilisieren */
  .ghNewestCard{
    display: grid !important;
    grid-template-columns: 56px 1fr !important;  /* Icon + Content */
    gap: 12px !important;
    align-items: start !important;
    padding: 12px 12px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
  }

  /* Icon größer + sauber zentriert */
  .ghNewestCard__icon{
    width: 52px !important;
    height: 52px !important;
    border-radius: 14px !important;
    object-fit: cover !important;
    display: block !important;
    margin-top: 2px !important;
  }

  /* Body: Titel + Meta + Button unten rechts */
  .ghNewestCard__body{
    display: grid !important;
    grid-template-rows: auto auto 1fr !important;
    gap: 6px !important;
    min-width: 0 !important;
  }

  .ghNewestCard__title{
    font-size: 14px !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    font-weight: 800 !important;
    color: #fff !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }

  .ghNewestCard__meta{
    font-size: 12px !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    opacity: .9 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Button unten rechts, mit Luft */
  .ghNewestCard__btn{
    justify-self: end !important;
    align-self: end !important;
    margin-top: 8px !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
  }

  /* =========================
     Top 3 (rechts)
     ========================= */

  .heroRight .highlights{
    gap: 12px !important;
  }

  /* Card mehr padding, damit nichts klebt */
  .hCard{
    padding: 12px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
  }

  /* Bild bleibt groß und sauber */
  .hCard__imgWrap{
    border-radius: 18px !important;
    overflow: hidden !important;
  }

  .hCard__img{
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  .hCard__body{
    gap: 8px !important;
    padding-top: 10px !important;
  }

  .hCard__title{
    font-size: 14px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
  }

  .hCard__meta{
    font-size: 12px !important;
    line-height: 1.25 !important;
    opacity: .9 !important;
  }

  /* Button unten rechts */
  .hCard__btn,
  .hCard .btn{
    justify-self: end !important;
    align-self: end !important;
    margin-top: 10px !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
  }
}

/* super schmale Handys: noch kompakter */
@media (max-width: 420px){
  .ghNewestCard{
    grid-template-columns: 52px 1fr !important;
    padding: 11px 11px !important;
    border-radius: 18px !important;
  }
  .ghNewestCard__icon{
    width: 48px !important;
    height: 48px !important;
    border-radius: 14px !important;
  }
  .ghNewestCard__title{
    font-size: 13px !important;
  }
  .ghNewestCard__meta{
    font-size: 11.5px !important;
  }
}
/* ===== GH MOBILE UI FIX END ===== */

/* ===== GH TOP3 IMG MOBILE FIX BEGIN ===== */
/* Mobile: Top3 Bild nicht oben abschneiden -> mehr Padding + keine festen Höhen */
@media (max-width: 640px){

  /* Bild-Container darf nicht "zu klein" sein */
  .hCard__imgWrap{
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;          /* rund bleibt rund */
    padding: 12px 12px 0 12px !important; /* oben Luft, damit nix abgeschnitten wird */
    box-sizing: border-box !important;
  }

  /* Bild selbst: nicht cover, eher "contain", damit oben nix abgesäbelt wird */
  .hCard__img{
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center top !important;
  }
}
/* ===== GH TOP3 IMG MOBILE FIX END ===== */


/* ===== GH TOP3 MOBILE IMG FIX V1 BEGIN ===== */
/* Top 3 Gewinnspiele: Bild auf Mobile NICHT abschneiden */

.ghHLCard__media{
  overflow: hidden;
}

/* Default: lieber nicht croppen */
.ghHLCard__img{
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center center !important;
}

/* Mobile: Container darf nicht feste Höhe erzwingen -> kein Cut */
@media (max-width: 520px){
  .ghHLCard__media{
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 4 / 3 !important;   /* schöner Kasten, aber ohne Crop */
    display: block !important;
  }

  .ghHLCard__img{
    width: 100% !important;
    height: 100% !important;          /* füllt den 4/3 Rahmen */
    object-fit: contain !important;   /* KEIN Abschneiden */
    object-position: center !important;
  }
}

/* sehr kleine Displays: etwas höher, damit nix gequetscht wirkt */
@media (max-width: 360px){
  .ghHLCard__media{
    aspect-ratio: 5 / 4 !important;
  }
}
/* ===== GH TOP3 MOBILE IMG FIX V1 END ===== */


/* ===== GH HERO ACTIONS 2COL V1 BEGIN ===== */
/* Mobile: "Kategorien entdecken" + "Neue Gewinnspiele" nebeneinander */

@media (max-width: 520px){
  .hero__actions{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    align-items: stretch !important;
    margin-top: 10px !important;
  }

  .hero__actions .btn{
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;

    /* kompakter */
    padding: 10px 10px !important;
    font-size: 13px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }
}

/* super kleine Handys: wieder untereinander */
@media (max-width: 360px){
  .hero__actions{
    grid-template-columns: 1fr !important;
  }

  .hero__actions .btn{
    white-space: normal !important;
  }
}
/* ===== GH HERO ACTIONS 2COL V1 END ===== */


/* ===== GH CHIPBAR TOUCH + ARROWS V1 BEGIN ===== */
/* Mobile: Chipbar mit Finger ziehen + Pfeile sichtbar */

.header .chipbar{
  position: relative;
}

/* Finger-Scroll (native) */
.header .chipbar .chips--header{
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-behavior: smooth;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
  white-space: nowrap;
}

/* Scrollbar ausblenden (optional) */
.header .chipbar .chips--header::-webkit-scrollbar{ display:none; }
.header .chipbar .chips--header{ scrollbar-width: none; }

/* Pfeile IMMER sichtbar + klickbar */
.header .chipbar__arrow{
  display: grid !important;
  place-items: center !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Mobile: Pfeile etwas kompakter, aber sichtbar */
@media (max-width: 520px){
  .header .chipbar{
    grid-template-columns: 40px 1fr 40px;
    gap: 8px;
  }

  .header .chipbar__arrow{
    width: 40px !important;
    height: 40px !important;
    font-size: 18px !important;
    line-height: 1 !important;
    border-radius: 12px !important;
  }
}
/* ===== GH CHIPBAR TOUCH + ARROWS V1 END ===== */


/* ===== GH CHIPBAR ARROWS DESIGN V1 BEGIN ===== */
/* Pfeile: sichtbar + Theme-Box + weißes Symbol (überschreibt "unsichtbar") */

.header .chipbar__arrow,
#chipPrev,
#chipNext{
  display: grid !important;
  place-items: center !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;

  /* Look */
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  color: #fff !important;

  border-radius: 14px !important;
  width: 44px !important;
  height: 44px !important;
  line-height: 1 !important;
  font-size: 20px !important;
  font-weight: 800 !important;

  box-shadow: 0 10px 24px rgba(0,0,0,0.25) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  cursor: pointer;
  user-select: none;
}

/* Hover/Active */
@media (hover:hover){
  .header .chipbar__arrow:hover,
  #chipPrev:hover,
  #chipNext:hover{
    background: rgba(255,255,255,0.14) !important;
    border-color: rgba(255,255,255,0.22) !important;
    transform: translateY(-1px);
  }
}
.header .chipbar__arrow:active,
#chipPrev:active,
#chipNext:active{
  transform: translateY(0);
  background: rgba(255,255,255,0.08) !important;
}

/* Disabled (falls du das per JS setzt) */
.header .chipbar__arrow[disabled],
#chipPrev[disabled],
#chipNext[disabled]{
  opacity: .35 !important;
  cursor: default;
}

/* Mobile etwas kleiner */
@media (max-width: 520px){
  .header .chipbar__arrow,
  #chipPrev,
  #chipNext{
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    font-size: 18px !important;
  }
}
/* ===== GH CHIPBAR ARROWS DESIGN V1 END ===== */


/* ===== GH STAT BAR WIDTH BEGIN ===== */
/* 43k-Box: nicht über die ganze Breite ziehen (Desktop), Mobile bleibt 100% */
@media (min-width: 900px){
  /* wir treffen die Box robust über die Summe */
  .ghBigStat{
    max-width: 780px;     /* <- hier kannst du später 720/820 etc. machen */
    width: 100%;
  }
}

/* falls ghBigStat mal nicht gesetzt wird: Fallback über Stat-Container */
@media (min-width: 900px){
  .heroLeft .stat,
  .heroLeft .hero__stat,
  .heroLeft .statCard,
  .heroLeft .metric{
    max-width: 780px;
  }
}

/* Mobile: wieder volle Breite */
@media (max-width: 899px){
  .ghBigStat,
  .heroLeft .stat,
  .heroLeft .hero__stat,
  .heroLeft .statCard,
  .heroLeft .metric{
    max-width: 100%;
  }
}
/* ===== GH STAT BAR WIDTH END ===== */






/* ===== GH STAT AUTO WIDTH V2 BEGIN ===== */
/* Ziel:
   - Box richtet sich primär nach der Zahl (nowrap)
   - darf NIE über den Viewport rauslaufen (safe max)
   - auf sehr schmalen Geräten wird sie "sanft" 100% breit, statt zu brechen/zu clippen
   - Typo/Padding/Radius fluid via clamp()
*/

:root{
  --gh-page-pad: clamp(12px, 4vw, 24px);
}

.heroTop .stats{
  display: flex;
  justify-content: flex-start;
}

/* die große Stat-Box (JS: .ghBigStat) */
.heroTop .stats .ghBigStat{
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(8px, 2vw, 12px);

  /* shrink-to-fit, aber sicher */
  width: fit-content;
  max-width: min(100%, calc(100vw - (var(--gh-page-pad) * 2)));

  padding: clamp(14px, 3.2vw, 22px);
  border-radius: clamp(16px, 3.5vw, 28px);
}

/* Label/Meta: dürfen umbrechen, sollen nicht die Box verbreitern */
.heroTop .stats .ghBigStat > *{
  max-width: min(42ch, 100%);
  white-space: normal;
}

/* Zahl bestimmt die Breite, bleibt immer 1 Zeile */
.heroTop .stats .ghBigStat #statSum{
  max-width: none;
  white-space: nowrap;

  /* fluid Größe – funktioniert auf allen Geräten sauber */
  font-size: clamp(44px, 9vw, 86px);
  line-height: 1.05;
}

/* Meta unter der Zahl etwas fluid */
.heroTop .stats .ghBigStat #statMeta{
  font-size: clamp(12px, 3.2vw, 16px);
}

/* Wenn’s richtig eng wird: lieber 100% breit statt komisch zu clippen */
@media (max-width: 520px){
  .heroTop .stats{
    display: block;
  }
  .heroTop .stats .ghBigStat{
    width: 100%;
    max-width: 100%;
  }
  .heroTop .stats .ghBigStat > *{
    max-width: 100%;
  }
}

/* Extra-Schutz für Geräte mit kleinen Höhen/komischen Viewports */
@media (max-width: 420px), (max-height: 740px){
  .heroTop .stats .ghBigStat{
    padding: clamp(12px, 3vw, 18px);
  }
  .heroTop .stats .ghBigStat #statSum{
    font-size: clamp(40px, 10vw, 78px);
  }
}

/* ===== GH STAT AUTO WIDTH V2 END ===== */

/* ===== GH NEWEST DESKTOP SCALE V1 BEGIN ===== */
/* Ziel: PC/Laptop größer & luftiger – Mobile bleibt unverändert */

@media (min-width: 900px){
  /* Gesamte linke Spalte etwas mehr Luft */
  #cards .ghNewestCard{
    padding: 18px 20px;
    border-radius: 22px;
  }

  /* Icon links größer */
  #cards .ghNewestCard__icon{
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }

  /* Titel + Meta größer */
  #cards .ghNewestCard__title{
    font-size: 18px;
    line-height: 1.2;
  }

  #cards .ghNewestCard__meta{
    font-size: 14px;
    line-height: 1.3;
    opacity: .95;
  }

  /* Button größer + mehr Padding */
  #cards .ghNewestCard__btn{
    font-size: 14px;
    padding: 10px 16px;
    border-radius: 999px;
  }
}

@media (min-width: 1200px){
  /* Auf großen Screens nochmal minimal hoch */
  #cards .ghNewestCard__title{ font-size: 19px; }
  #cards .ghNewestCard__meta{ font-size: 14.5px; }
  #cards .ghNewestCard__icon{ width: 48px; height: 48px; }
  #cards .ghNewestCard__btn{ font-size: 14.5px; padding: 11px 18px; }
}
/* ===== GH NEWEST DESKTOP SCALE V1 END ===== */




/* ===== GH CHIPBAR ARROWS V4 BEGIN ===== */
/* Ziel: Pfeile NICHT transparent (schwarz), Pfeil immer weiß, sichtbar auf jedem Handy */

.chipbar{
  position: relative;
}

/* universal selector: alles was irgendwie Arrow in der chipbar ist */
.chipbar .chipbar__arrow,
.chipbar .chipsArrow,
.chipbar .chips__arrow,
.chipbar .chipArrow,
.chipbar [class*="arrow"],
.chipbar [class*="Arrow"],
.chipbar #chipPrev,
.chipbar #chipNext,
.chipbar #chipsPrev,
.chipbar #chipsNext,
.chipbar #prev,
.chipbar #next{
  opacity: 1 !important;
  visibility: visible !important;
  display: inline-flex !important;

  align-items: center !important;
  justify-content: center !important;

  width: 44px !important;
  height: 44px !important;

  border-radius: 14px !important;

  background: #0b0f19 !important;           /* NICHT transparent */
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.55) !important;

  color: #ffffff !important;                 /* Text/Icon weiß */
  fill: #ffffff !important;                  /* SVG fill */
  stroke: #ffffff !important;                /* SVG stroke */

  font-size: 22px !important;
  font-weight: 900 !important;

  cursor: pointer !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;

  z-index: 9999 !important;
}

/* falls im Button ein <img> oder <svg> steckt: ebenfalls weiß und sichtbar */
.chipbar .chipbar__arrow img,
.chipbar .chipsArrow img,
.chipbar .chips__arrow img,
.chipbar .chipArrow img,
.chipbar [class*="arrow"] img,
.chipbar [class*="Arrow"] img,
.chipbar .chipbar__arrow svg,
.chipbar .chipsArrow svg,
.chipbar .chips__arrow svg,
.chipbar .chipArrow svg,
.chipbar [class*="arrow"] svg,
.chipbar [class*="Arrow"] svg{
  opacity: 1 !important;
  filter: none !important;
  color: #fff !important;
  fill: #fff !important;
  stroke: #fff !important;
}

/* wenn Pfeil über pseudo element kommt */
.chipbar .chipbar__arrow::before,
.chipbar .chipbar__arrow::after,
.chipbar .chipsArrow::before,
.chipbar .chipsArrow::after,
.chipbar .chips__arrow::before,
.chipbar .chips__arrow::after,
.chipbar .chipArrow::before,
.chipbar .chipArrow::after{
  opacity: 1 !important;
  color: #fff !important;
  filter: none !important;
}

/* mobile tweaks */
@media (max-width: 720px){
  .chipbar .chipbar__arrow,
  .chipbar .chipsArrow,
  .chipbar .chips__arrow,
  .chipbar .chipArrow,
  .chipbar [class*="arrow"],
  .chipbar [class*="Arrow"],
  .chipbar #chipPrev,
  .chipbar #chipNext,
  .chipbar #chipsPrev,
  .chipbar #chipsNext,
  .chipbar #prev,
  .chipbar #next{
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    font-size: 20px !important;
  }
}

/* ===== GH CHIPBAR ARROWS V4 END ===== */

/* ===== GH LEGAL PAGE CARD V1 BEGIN ===== */
body.page-legal{ background:#071428; }
.page-legal .legal{ padding: 46px 0 80px; }
.page-legal .legal__inner{ width: min(980px, 92vw); margin: 0 auto; }
.page-legal .legalCard{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 20px;
  padding: clamp(18px, 3vw, 34px);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.page-legal .legalCard h1{ margin:0 0 14px; font-size: clamp(26px, 3.2vw, 44px); }
.page-legal .legalCard h2{ margin: 26px 0 10px; font-size: clamp(18px, 2vw, 24px); }
.page-legal .legalCard p, .page-legal .legalCard li{
  color: rgba(255,255,255,.86);
  line-height: 1.55;
  font-size: 16px;
}
.page-legal .legalCard ul{ padding-left: 20px; margin: 10px 0; }
.page-legal .legalBack{
  display:inline-flex; align-items:center; gap:10px;
  margin: 0 0 18px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
  text-decoration:none;
}
.page-legal .legalBack:hover{ background: rgba(255,255,255,.06); }
/* ===== GH LEGAL PAGE CARD V1 END ===== */



/* ===== Stability fixes: prevent layout shifts on load ===== */
.ghHLCard--placeholder{ visibility:hidden; }
.chipbar{ min-height: 54px; }

/* GH_CHIP_LOCK_START */
/* Prevent chip bar "jumping" on click/focus by keeping box size constant */
.chips--header .chip{
  box-sizing: border-box;
  border: 1px solid transparent; /* reserve border space always */
  outline: none;
  transform: none !important;     /* prevent scale/translate effects */
}
.chips--header .chip:focus,
.chips--header .chip:focus-visible{
  outline: none !important;
  border-color: rgba(255,255,255,0.18); /* subtle but same thickness */
}
.chips--header .chip:active{
  transform: none !important; /* no press-down movement */
}
/* If active state uses different border/shadow, keep geometry stable */
.chips--header .chip.chip--active{
  border-color: rgba(255,255,255,0.22);
}
/* Also prevent layout shift from font-weight changes (if any) */
.chips--header .chip{
  font-weight: 500;
}
.chips--header .chip.chip--active{
  font-weight: 500;
}
/* GH_CHIP_LOCK_END */


/* GH CHIPBAR LOCKED INTERACTION: verhindert "Wackeln" beim Hover/Klick */
.header .chipbar .chips--header .chip:hover,
.header .chipbar .chips--header .chip:active{
  transform: none !important;
}