/* ============================================================
   malenki.ch — Typografie fuer die Artikelseiten.
   Reines CSS, kein Tailwind-Build noetig. Die Reviews bringen
   ihre eigenen Regeln fuer .lc-toc, .shot, .steps und .offers
   mit; hier steht nur die Basis darunter.
   ============================================================ */

.article-body {
  color: #403b34;
  font-size: 1.0625rem;
  line-height: 1.75;
}

.article-body h1 {
  margin: 0 0 1.25rem;
  color: #141418;
  font-size: clamp(1.8rem, 1.2rem + 2.2vw, 2.6rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.article-body h2 {
  margin: 2.1rem 0 .8rem;
  padding-top: 0;
  color: #141418;
  font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.8rem);
  font-weight: 700;
  line-height: 1.3;
  scroll-margin-top: 90px;
}

.article-body h3 {
  margin: 1.6rem 0 .6rem;
  color: #141418;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.35;
}

.article-body p { margin: 0 0 1.15rem; }

.article-body a {
  color: #2955ae;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.article-body a:hover { color: #1d3f80; }

.article-body strong { color: #141418; font-weight: 700; }
.article-body em { font-style: italic; }

/* ============================================================
   HERO / EINLEITUNG — volle Bandbreite, Text links, Bild rechts
   ============================================================ */
.page-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(820px 420px at 80% 16%, rgba(212, 160, 23, .24), transparent 64%),
    radial-gradient(620px 380px at 10% 94%, rgba(41, 85, 174, .09), transparent 66%),
    linear-gradient(135deg, #fffaf1 0%, #f6ebd5 100%);
  border-bottom: 1px solid #ecdcb6;
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 4px;
  background: linear-gradient(90deg, #d4a017 0%, #ae2997 34%, #2955ae 64%, #298e3a 100%);
}

.page-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: 3rem;
  max-width: 1180px;
  margin: 0 auto;
  padding: 2.3rem 1.5rem 2.5rem;
}

.page-hero__dash {
  display: block;
  width: 56px;
  height: 3px;
  margin-bottom: .85rem;
  border-radius: 2px;
  background: #d4a017;
}

.page-hero__title {
  margin: 0 0 .9rem;
  color: #141418;
  font-size: clamp(1.9rem, 1.15rem + 2.4vw, 2.85rem);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -.018em;
}

/* ---------- Meta: Byline + Datum ---------- */
.page-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .7rem 1rem;
  margin-bottom: 1.1rem;
}
.page-hero__byline {
  color: #2955ae;
  font-size: .92rem;
  font-weight: 600;
}
.page-hero__date {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .42rem .85rem;
  border: 1px solid #d8cdb8;
  border-radius: 999px;
  background: #fff;
  color: #403b34;
  font-size: .88rem;
  font-weight: 600;
  white-space: nowrap;
}
.page-hero__date svg { color: #2955ae; flex: 0 0 auto; }

/* ---------- Lead ---------- */
.page-hero__lead p {
  margin: 0 0 .85rem;
  max-width: 60ch;
  color: #57534c;
  font-size: 1.06rem;
  line-height: 1.68;
}
.page-hero__lead p:last-child { margin-bottom: 0; }
.page-hero__lead p:first-child { color: #403b34; }
.page-hero__lead strong { color: #141418; font-weight: 700; }
.page-hero__lead a { color: #2955ae; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Bild rechts ---------- */
.page-hero__art {
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-hero__art img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 330px;
  object-fit: contain;
}
/* Screenshots bekommen einen Rahmen; Logos und Emblem bleiben frei */
.page-hero__art img:not([src$=".svg"]):not([src*="/images/hero-"]) {
  border: 1px solid #d8cdb8;
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(20, 20, 24, .18);
  object-fit: cover;
}

/* ---------- Responsiv ---------- */
@media (max-width: 960px) {
  .page-hero__inner {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1.8rem 1.25rem 2rem;
  }
  .page-hero__art { order: -1; justify-content: flex-start; }
  .page-hero__art img { max-height: 210px; width: auto; max-width: 100%; }
}
@media (max-width: 560px) {
  .page-hero__inner { padding: 1.5rem 1rem 1.7rem; }
  .page-hero__lead p { font-size: 1.0rem; }
  .page-hero__art img { max-height: 160px; }
}

.article-body ul,
.article-body ol { margin: 0 0 1.15rem; padding-left: 1.4rem; }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li { margin: 0 0 .4rem; }
.article-body li::marker { color: #78706a; }

/* Schritt-fuer-Schritt-Listen bringen ihre eigenen Nummernkreise mit
   (counter + ::before). Die native ol-Nummerierung muss hier weg,
   sonst steht jede Zahl doppelt da. */
.article-body ol.steps,
.article-body ul.steps {
  list-style: none;
  padding-left: 0;
}
.article-body ol.steps > li,
.article-body ul.steps > li { margin: 0; }
.article-body ol.steps > li::marker,
.article-body ul.steps > li::marker { content: ""; }

/* ---------- Tabellen ---------- */
.article-body table {
  width: 100%;
  margin: 1.5rem 0 2rem;
  border-collapse: collapse;
  font-size: .95rem;
  line-height: 1.5;
}
.article-body thead th {
  background: #141418;
  color: #fff;
  font-weight: 700;
  text-align: left;
}
.article-body th,
.article-body td {
  padding: .65rem .8rem;
  border: 1px solid #e9e0d0;
  vertical-align: top;
}
.article-body tbody tr:nth-child(even) { background: #faf6ee; }
.article-body td ul { margin: 0; padding-left: 1.1rem; }

/* Auf schmalen Schirmen horizontal scrollen statt umbrechen */
@media (max-width: 720px) {
  .article-body table { display: block; overflow-x: auto; white-space: nowrap; }
  .article-body table.offers { display: block; white-space: normal; }
}

/* ============================================================
   VERGLEICHSTABELLE (table.offers) — Kartenlayout
   Die generischen Tabellenregeln oben werden hier komplett
   zurueckgesetzt: jede Zeile ist eine eigene Karte, kein Gitter.
   ============================================================ */

.article-body table.offers,
.article-body table.offers thead,
.article-body table.offers tbody,
.article-body table.offers tr,
.article-body table.offers th,
.article-body table.offers td {
  display: block;
  border: 0;
  padding: 0;
  margin: 0;
  background: none;
  color: inherit;
  text-align: left;
  white-space: normal;
  vertical-align: baseline;
}

.article-body table.offers {
  width: 100%;
  margin: 1.5rem 0 1.9rem;
  border-collapse: separate;
  font-size: 1rem;
}

/* Auf breiten Schirmen aus der schmalen Textspalte ausbrechen */
/* Ausbruch nicht mehr noetig: der Artikelcontainer ist so breit wie die Tabelle */

/* ---------- Spaltenraster ---------- */
.article-body .offers tr.card_thead_top,
.article-body .offers tr.card {
  display: grid;
  grid-template-columns: 68px minmax(150px, 180px) minmax(140px, 1.1fr) 84px minmax(180px, 1.7fr) minmax(140px, 168px);
  align-items: center;
  column-gap: 1rem;
}

/* ---------- Kopfzeile ---------- */
.article-body .offers tr.card_thead_top { padding: 0 1.25rem .6rem; }
.article-body .offers tr.card_thead_top th {
  text-align: center;
  color: #78706a;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ---------- Karte ---------- */
.article-body .offers tr.card {
  margin-bottom: 1rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid #e9e0d0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(20, 20, 24, .05);
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.article-body .offers tr.card:hover {
  border-color: #d8cdb8;
  box-shadow: 0 10px 28px rgba(20, 20, 24, .09);
  transform: translateY(-2px);
}
.article-body .offers tbody tr.card:nth-child(1) { border-left: 4px solid #d4a017; }
.article-body .offers tbody tr.card:nth-child(2) { border-left: 4px solid #9aa5b1; }
.article-body .offers tbody tr.card:nth-child(3) { border-left: 4px solid #b06c3a; }

/* ---------- Rang ---------- */
.article-body .offers td.col-rank { display: flex; justify-content: center; }
.article-body .offers .rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.35rem;
  height: 2.35rem;
  padding: 0 .4rem;
  border-radius: 999px;
  background: #e9e0d0;
  color: #403b34;
  font-size: .85rem;
  font-weight: 800;
  line-height: 1;
}
.article-body .offers tbody tr.card:nth-child(1) .rank-badge { background: #d4a017; color: #fff; }
.article-body .offers tbody tr.card:nth-child(2) .rank-badge { background: #9aa5b1; color: #fff; }
.article-body .offers tbody tr.card:nth-child(3) .rank-badge { background: #b06c3a; color: #fff; }

/* ---------- Casino: Logo + Name ---------- */
.article-body .offers td.col-casino {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  text-align: center;
}
.article-body .offers td.col-casino img {
  display: block;
  width: 100%;
  max-width: 148px;
  height: auto;
}
.article-body .offers td.col-casino a {
  color: #141418;
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
}
.article-body .offers td.col-casino a:hover { color: #2955ae; text-decoration: underline; }

/* ---------- Bonus ---------- */
.article-body .offers td.col-bonus {
  color: #141418;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.35;
}

/* ---------- Bewertung ---------- */
.article-body .offers td.col-rating {
  display: block;
  text-align: center;
  white-space: nowrap;
  color: #57534c;
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
}
.article-body .offers td.col-rating .stars {
  display: inline;
  color: #141418;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1;
}
.article-body .offers td.col-rating .stars::before {
  content: "\2605";
  margin-right: .18rem;
  color: #f0b429;
  font-size: 1.1rem;
}

/* ---------- Vorteile ---------- */
.article-body .offers td.col-advantages ul { margin: 0; padding: 0; list-style: none; }
.article-body .offers td.col-advantages li {
  position: relative;
  margin: 0 0 .34rem;
  padding-left: 1.4rem;
  color: #57534c;
  font-size: .9rem;
  line-height: 1.45;
}
.article-body .offers td.col-advantages li:last-child { margin-bottom: 0; }
.article-body .offers td.col-advantages li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .4em;
  width: .78rem;
  height: .42rem;
  border-left: 2px solid #298e3a;
  border-bottom: 2px solid #298e3a;
  transform: rotate(-45deg);
}

/* ---------- CTA ---------- */
.article-body .offers td.col-play { text-align: center; }
.article-body .offers .btn-claim {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: .72rem 1rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #f0b429 0%, #d4a017 100%);
  color: #141418;
  font-size: .92rem;
  font-weight: 800;
  text-decoration: none;
  transition: background .18s ease, box-shadow .18s ease;
}
.article-body .offers .btn-claim:hover {
  background: linear-gradient(135deg, #ffc742 0%, #e0aa12 100%);
  color: #141418;
  box-shadow: 0 6px 18px rgba(212, 160, 23, .45);
}

/* ---------- Tablet: erst stapeln, wenn 6 Spalten nicht mehr passen ---------- */
@media (max-width: 960px) {
  .article-body .offers tr.card_thead_top { display: none; }
  .article-body .offers tr.card {
    grid-template-columns: 68px minmax(130px, 170px) 1fr;
    grid-template-areas:
      "rank casino bonus"
      "rank casino rating"
      "adv  adv    adv"
      "play play   play";
    row-gap: .8rem;
    align-items: start;
  }
  .article-body .offers td.col-rank       { grid-area: rank; align-self: center; }
  .article-body .offers td.col-casino     { grid-area: casino; }
  .article-body .offers td.col-bonus      { grid-area: bonus; align-self: end; }
  .article-body .offers td.col-rating     { grid-area: rating; text-align: left; align-self: start; }
  .article-body .offers td.col-rating .stars { display: inline; font-size: 1.05rem; }
  .article-body .offers td.col-advantages { grid-area: adv; padding-top: .55rem; border-top: 1px solid #f3eee4; }
  .article-body .offers td.col-play       { grid-area: play; }
  .article-body .offers .btn-claim        { width: auto; min-width: 220px; }
}

/* ---------- Telefon ---------- */
@media (max-width: 560px) {
  .article-body table.offers { font-size: .95rem; }
  .article-body .offers tr.card {
    grid-template-columns: 1fr;
    grid-template-areas: "rank" "casino" "bonus" "rating" "adv" "play";
    text-align: center;
    padding: 1.1rem 1rem;
  }
  .article-body .offers td.col-bonus,
  .article-body .offers td.col-rating,
  .article-body .offers td.col-advantages { text-align: left; }
  .article-body .offers td.col-rank { justify-content: flex-start; }
  .article-body .offers .btn-claim { width: 100%; min-width: 0; }
}

/* ---------- Bilder / Figuren ---------- */
.article-body img { max-width: 100%; height: auto; }
.article-body figure { margin: 1.5rem 0 2rem; }

/* ---------- Navigation: aktiver Punkt ---------- */
.nav-link.is-active { color: #2955ae; font-weight: 600; }

/* ---------- Karten "Weitere Testberichte" ---------- */
.related-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.related-card {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid #e9e0d0;
  border-left: 4px solid #d4a017;
  border-radius: 10px;
  background: #fff;
  text-decoration: none;
  transition: box-shadow .18s ease, transform .18s ease;
}
.related-card:hover {
  box-shadow: 0 6px 18px rgba(20, 20, 24, .08);
  transform: translateY(-2px);
}
.related-card__title {
  color: #141418;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.35;
}
.related-card__desc {
  color: #78706a;
  font-size: .875rem;
  line-height: 1.5;
}


/* ============================================================
   ABSTAENDE — Blockkanten enger zusammenruecken
   ============================================================ */
.article-body { padding-top: 2rem; padding-bottom: 2.25rem; }
.article-body > :first-child { margin-top: 0; }
.article-body > h2:first-of-type { margin-top: 0; }
.article-body > :last-child { margin-bottom: 0; }

/* ============================================================
   FAQ-BLOCK
   ============================================================ */
.page-faq {
  border-top: 1px solid #e9e0d0;
  background:
    radial-gradient(760px 340px at 15% 0%, rgba(212, 160, 23, .13), transparent 60%),
    #f3ece0;
  scroll-margin-top: 90px;
}
.page-faq__inner {
  max-width: 820px;
  margin: 0 auto;
  padding: 2.4rem 1.25rem 2.8rem;
}
.page-faq__kicker {
  margin: 0 0 .4rem;
  color: #ae2997;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.page-faq__title {
  margin: 0 0 1.4rem;
  color: #141418;
  font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.85rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.012em;
}

.page-faq__list { display: flex; flex-direction: column; gap: .6rem; }

.faq-item {
  border: 1px solid #e9e0d0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(20, 20, 24, .04);
  overflow: hidden;
}
.faq-item[open] { border-color: #d8cdb8; }

.faq-item__q {
  position: relative;
  display: block;
  cursor: pointer;
  padding: .95rem 3rem .95rem 1.15rem;
  color: #141418;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.4;
  list-style: none;
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q:hover { color: #ae2997; }

/* Plus/Minus rechts */
.faq-item__q::after,
.faq-item__q::before {
  content: "";
  position: absolute;
  right: 1.2rem;
  top: 50%;
  width: .78rem;
  height: 2px;
  border-radius: 2px;
  background: #d4a017;
  transform: translateY(-50%);
  transition: transform .2s ease, opacity .2s ease;
}
.faq-item__q::before { transform: translateY(-50%) rotate(90deg); }
.faq-item[open] .faq-item__q::before { transform: translateY(-50%) rotate(0deg); opacity: 0; }

.faq-item__a {
  padding: 0 1.15rem 1.05rem;
  border-top: 1px solid #f3eee4;
  padding-top: .9rem;
}
.faq-item__a p {
  margin: 0 0 .7rem;
  color: #57534c;
  font-size: .98rem;
  line-height: 1.65;
}
.faq-item__a p:last-child { margin-bottom: 0; }
.faq-item__a strong { color: #141418; font-weight: 700; }
.faq-item__a a { color: #2955ae; text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 560px) {
  .page-faq__inner { padding: 1.8rem 1rem 2.1rem; }
  .faq-item__q { font-size: .97rem; padding: .85rem 2.6rem .85rem 1rem; }
}

/* ============================================================
   AUTORENBOX — steht unter dem FAQ auf jeder Seite
   ============================================================ */
.page-author {
  border-top: 1px solid #e9e0d0;
  background: #fff;
}
.page-author__inner {
  max-width: 820px;
  margin: 0 auto;
  padding: 2rem 1.25rem 2.2rem;
}

.page-author__card {
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr);
  align-items: start;
  gap: 1.5rem;
  margin: 0;
  padding: 1.4rem 1.6rem;
  border: 1px solid #e9e0d0;
  border-left: 4px solid #d4a017;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #fdfaf3 100%);
  box-shadow: 0 1px 2px rgba(20, 20, 24, .05);
}

.page-author__photo {
  display: block;
  width: 124px;
  height: 124px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 4px 16px rgba(20, 20, 24, .16);
  object-fit: cover;
  object-position: center top;
}

.page-author__body { margin: 0; }

.page-author__name {
  margin: 0 0 .15rem;
  color: #141418;
  font-size: 1.18rem;
  font-weight: 800;
  line-height: 1.3;
  scroll-margin-top: 90px;
}
.page-author__role {
  margin: 0 0 .7rem;
  color: #ae2997;
  font-size: .9rem;
  font-weight: 600;
}
.page-author__bio {
  margin: 0;
  color: #57534c;
  font-size: .98rem;
  line-height: 1.65;
}

@media (max-width: 620px) {
  .page-author__inner { padding: 1.6rem 1rem 1.8rem; }
  .page-author__card {
    grid-template-columns: 1fr;
    gap: .9rem;
    padding: 1.25rem 1.1rem;
    text-align: center;
  }
  .page-author__photo { width: 104px; height: 104px; margin: 0 auto; }
  .page-author__bio { text-align: left; }
}


/* ============================================================
   SEITENBREITE — alle Bloecke auf dieselbe Spur
   ============================================================ */
:root { --shell: 1160px; }

.max-w-6xl { max-width: var(--shell); }

.article-body {
  max-width: var(--shell);
  padding-left: 1rem;
  padding-right: 1rem;
}

.page-hero__inner,
.page-faq__inner,
.page-author__inner {
  max-width: var(--shell);
  padding-left: 1rem;
  padding-right: 1rem;
}


/* Logo im Hero: ohne Rahmen, etwas mehr Hoehe */
.page-hero__art img[src*="/images/hero-"] {
  width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: contain;
  filter: drop-shadow(0 10px 26px rgba(20, 20, 24, .22));
}
@media (max-width: 960px) {
  .page-hero__art img[src*="/images/hero-"] { max-height: 190px; }
}
@media (max-width: 560px) {
  .page-hero__art img[src*="/images/hero-"] { max-height: 150px; }
}


/* ============================================================
   LOGO in Kopf- und Fusszeile
   ============================================================ */
.site-logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  line-height: 0;
}
.site-logo img {
  display: block;
  width: auto;
  height: 48px;
}
.site-logo--footer {
  display: inline-flex;
  margin-bottom: 1rem;
}
.site-logo--footer img { height: 58px; }

@media (max-width: 860px) {
  .site-logo img { height: 40px; }
}
@media (max-width: 560px) {
  .site-logo img { height: 34px; }
  .site-logo--footer img { height: 46px; }
}


/* ============================================================
   TOP-3: animierter Rang + Lichtschweif ueber der Karte
   ============================================================ */
.article-body .offers tbody tr.card:nth-child(-n+3) { position: relative; overflow: hidden; }

/* Lichtschweif */
.article-body .offers tbody tr.card:nth-child(-n+3)::after {
  content: "";
  position: absolute;
  top: 0;
  left: -40%;
  width: 34%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.72) 50%, transparent 100%);
  animation: offerSheen 5.5s ease-in-out infinite;
}
.article-body .offers tbody tr.card:nth-child(2)::after { animation-delay: .9s; }
.article-body .offers tbody tr.card:nth-child(3)::after { animation-delay: 1.8s; }

@keyframes offerSheen {
  0%, 62%  { left: -40%; opacity: 0; }
  68%      { opacity: 1; }
  96%      { left: 112%; opacity: 0; }
  100%     { left: 112%; opacity: 0; }
}

/* Rang-Plakette pulsiert leicht und traegt ein SVG-Abzeichen */
.article-body .offers td.col-rank { position: relative; }
.article-body .offers tbody tr.card:nth-child(-n+3) .rank-badge {
  animation: rankPulse 3.4s ease-in-out infinite;
}
.article-body .offers tbody tr.card:nth-child(2) .rank-badge { animation-delay: .5s; }
.article-body .offers tbody tr.card:nth-child(3) .rank-badge { animation-delay: 1s; }

@keyframes rankPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212,160,23,.55); }
  55%      { box-shadow: 0 0 0 9px rgba(212,160,23,0); }
}
.article-body .offers tbody tr.card:nth-child(2) .rank-badge { animation-name: rankPulseSilver; }
.article-body .offers tbody tr.card:nth-child(3) .rank-badge { animation-name: rankPulseBronze; }
@keyframes rankPulseSilver {
  0%, 100% { box-shadow: 0 0 0 0 rgba(154,165,177,.55); }
  55%      { box-shadow: 0 0 0 9px rgba(154,165,177,0); }
}
@keyframes rankPulseBronze {
  0%, 100% { box-shadow: 0 0 0 0 rgba(176,108,58,.55); }
  55%      { box-shadow: 0 0 0 9px rgba(176,108,58,0); }
}

@media (prefers-reduced-motion: reduce) {
  .article-body .offers tbody tr.card::after,
  .article-body .offers .rank-badge,
  .article-body .offers td.col-rank::before { animation: none !important; }
  .article-body .offers tbody tr.card:nth-child(-n+3)::after { display: none; }
}

/* ============================================================
   TABELLE + KRITERIEN als <figure>
   ============================================================ */
.article-body .offers-figure { margin: 1.5rem 0 2rem; }
.article-body .offers-figure table.offers { margin-bottom: .9rem; }
.article-body .offers-figure__note {
  padding: 1rem 1.2rem;
  border: 1px solid #e9e0d0;
  border-left: 4px solid #2955ae;
  border-radius: 12px;
  background: #fff;
  color: #57534c;
  font-size: .95rem;
  line-height: 1.6;
}
.article-body .offers-figure__title {
  display: block;
  margin-bottom: .45rem;
  color: #141418;
  font-size: 1.02rem;
  font-weight: 700;
}
.article-body .offers-figure__note p { margin: 0 0 .7rem; font-size: .95rem; }
.article-body .offers-figure__note p:last-child { margin-bottom: 0; }

/* ============================================================
   INHALTSVERZEICHNIS als eigener Streifen (Markenreviews)
   ============================================================ */
.page-toc { background: #fbf7f0; border-bottom: 1px solid #e9e0d0; }
.page-toc__inner { max-width: var(--shell); margin: 0 auto; padding: 1.4rem 1rem 1.6rem; }
.page-toc .lc-toc { margin: 0; }

/* ============================================================
   HERO-META: Autorin mit Avatar + Datum
   ============================================================ */
.page-hero__meta {
  gap: .6rem .8rem;
}
.page-hero__author {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .3rem .9rem .3rem .3rem;
  border: 1px solid #d8cdb8;
  border-radius: 999px;
  background: #fff;
  text-decoration: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.page-hero__author:hover {
  border-color: #d4a017;
  box-shadow: 0 4px 14px rgba(212, 160, 23,.18);
}
.page-hero__avatar {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}
.page-hero__author-text { display: flex; flex-direction: column; line-height: 1.15; }
.page-hero__author-role {
  color: #78706a;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.page-hero__author-name { color: #141418; font-size: .92rem; font-weight: 700; }

/* ============================================================
   CTA-BLOCK in den Markenreviews
   ============================================================ */
.article-body .cta-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.6rem 0 1.8rem;
  padding: 1.15rem 1.35rem;
  border: 1px solid #141418;
  border-radius: 14px;
  background: linear-gradient(135deg, #141418 0%, #26262e 100%);
}
.article-body .cta-box__text {
  flex: 1 1 260px;
  margin: 0;
  color: #e9e0d0;
  font-size: .98rem;
  line-height: 1.5;
}
.article-body .cta-box__text strong { color: #fff; }
.article-body .cta-box__btn {
  flex: 0 0 auto;
  padding: .72rem 1.6rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #f0b429 0%, #d4a017 100%);
  color: #141418;
  font-size: .95rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: background .18s ease, box-shadow .18s ease;
}
.article-body .cta-box__btn:hover {
  background: linear-gradient(135deg, #ffc742 0%, #e0aa12 100%);
  color: #141418;
  box-shadow: 0 8px 22px rgba(212,160,23,.45);
}

/* ============================================================
   KOPFZEILE: Plaette "Top Casinos"
   ============================================================ */
.top-casinos { position: relative; margin-left: .35rem; }
.top-casinos__btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .95rem;
  border: 1px solid #141418;
  border-radius: 999px;
  background: #141418;
  color: #fff;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .18s ease, box-shadow .18s ease;
}
.top-casinos__btn:hover { background: #26262e; box-shadow: 0 6px 16px rgba(20, 20, 24,.2); }
.top-casinos__star { color: #f0b429; }
.top-casinos__chev { transition: transform .2s ease; }
.top-casinos.is-open .top-casinos__chev { transform: rotate(180deg); }

.top-casinos__menu {
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  z-index: 60;
  min-width: 210px;
  padding: .4rem;
  border: 1px solid #e9e0d0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(20, 20, 24,.14);
}
.top-casinos__item {
  display: block;
  padding: .55rem .8rem;
  border-radius: 8px;
  color: #141418;
  font-size: .92rem;
  font-weight: 600;
  text-decoration: none;
}
.top-casinos__item:hover { background: #f3eee4; color: #2955ae; }

.mobile-group {
  margin: .6rem 0 .2rem;
  padding: 0 .75rem;
  color: #78706a;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.nav-link--sub { padding-left: 1.5rem !important; }


/* ============================================================
   PAPIER STATT WEISS — die Seite als Folge warmer Baender
   ============================================================ */
.site-body {
  background: #f3ece0;
  color: #403b34;
}

/* Kopfzeile bleibt hell, bekommt aber eine Goldkante */
.site-header {
  position: relative;
  border-bottom: 1px solid #e9e0d0;
  background: #fff;
}
.site-header::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px 0;
  height: 2px;
  background: linear-gradient(90deg, #d4a017 0%, #ae2997 30%, #2955ae 58%, #298e3a 82%, transparent 100%);
  opacity: .75;
}

/* Brotkrumen */
.crumbs {
  border-bottom: 1px solid #e9e0d0;
  background: #fbf7f0;
}

/* Artikelband: warmes Papier, Karten darin bleiben weiss */
.article-sheet {
  border-bottom: 1px solid #e9e0d0;
  background: #fbf7f0;
}

/* Autorenband liegt auf demselben Papier */
.page-author {
  border-top: 1px solid #e9e0d0;
  background: #fbf7f0;
}

/* Weitere Testberichte: etwas tieferer Sandton als Abschluss */
.related-section {
  border-top: 1px solid #e4dac6;
  background: #efe7d9;
}

/* Akzentstrich unter jeder H2 — gliedert die langen Texte */
.article-body h2 {
  position: relative;
  padding-bottom: .55rem;
}
.article-body h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #d4a017 0%, #ae2997 100%);
}
/* In den FAQ-Karten und im Inhaltsverzeichnis stoert der Strich */
.page-faq h2::after,
.page-toc h2::after { content: none; }

/* Karten im Artikel heben sich jetzt durch Weiss ab */
.article-body .lc-toc,
.article-body .offers tr.card { background: #fff; }
.article-body .shot img { background: #fff; }

/* ============================================================
   INHALTSVERZEICHNIS: Nummerierung wiederherstellen
   Auf den Markenseiten steht das Verzeichnis seit dem Umbau
   ausserhalb von .article-body. Dort greift der Tailwind-Reset
   (ol { list-style: none }) und die Zahlen verschwinden.
   ============================================================ */
.lc-toc__list {
  list-style: decimal;
  padding-left: 1.6rem;
}
.lc-toc__list > li::marker {
  color: #d4a017;
  font-weight: 700;
}


/* ============================================================
   QUADRAT-SCHEMA — verankert am Hero-Creme hsl(40, 65%, 90%)
     40  Gold    #d4a017  Marke, Hauptaktionen
    130  Gruen   #298e3a  Bestaetigung, Vorteile
    220  Blau    #2955ae  Information, Links
    310  Magenta #ae2997  redaktionelle Akzente
   ============================================================ */
:root {
  --c-gold: #d4a017;
  --c-gold-ink: #8a6508;
  --c-green: #298e3a;
  --c-green-ink: #1f6e2c;
  --c-blue: #2955ae;
  --c-blue-dark: #1d3f80;
  --c-magenta: #ae2997;
  --c-gold-tint: #f8f1e0;
  --c-green-tint: #e9f4eb;
  --c-blue-tint: #e8edf7;
  --c-magenta-tint: #f6e9f3;
}

/* Kriterienkasten: Titel in der Informationsfarbe */
.article-body .offers-figure__title { color: var(--c-blue); }

/* Vorteilsspalte traegt jetzt durchgehend Gruen */
.article-body .offers td.col-advantages li::before { border-color: var(--c-green); }

/* FAQ: Plus/Minus redaktionell */
.faq-item__q::after,
.faq-item__q::before { background: var(--c-magenta); }
.faq-item[open] .faq-item__q { color: var(--c-magenta); }

/* Autorenkarte und FAQ-Karten bekommen ihre eigene Kante */
.page-author__card { border-left-color: var(--c-magenta); }

/* "Weitere Testberichte": die vier Farben rotieren durch die Karten */
.related-card:nth-child(4n+1) { border-left-color: var(--c-gold); }
.related-card:nth-child(4n+2) { border-left-color: var(--c-green); }
.related-card:nth-child(4n+3) { border-left-color: var(--c-blue); }
.related-card:nth-child(4n+4) { border-left-color: var(--c-magenta); }

/* Brotkrumen: Pfad informativ, aktuelle Seite neutral */
.crumbs a { color: var(--c-blue); }
.crumbs a:hover { color: var(--c-blue-dark); }

/* Footer-Links reagieren in Gold, damit die Marke unten fuehrt */
footer a:hover { color: var(--c-gold); }


/* ============================================================
   HERO OHNE BILD — eine Spalte, Textbreite begrenzt
   ============================================================ */
.page-hero--plain .page-hero__inner {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
.page-hero--plain .page-hero__text { max-width: 880px; }
.page-hero--plain .page-hero__lead p { max-width: 72ch; }


/* ============================================================
   EINE FARBE JE BLOCKTYP — statt vier Farben quer ueber die Seite
     Gold  #d4a017  Marke: Knoepfe, Rang 1, Inhaltsverzeichnis,
                    Bildunterschriften, H2-Strich, Verwandtes
     Blau  #2955ae  alles Anklickbare im Text: Links, Menue, Pfad
     Gruen #298e3a  Bestaetigung: Haken in der Vorteilsspalte
     Rot   #c1121f  Redaktion: FAQ und Autorenkasten
   ============================================================ */

/* --- Rang: keine Krone mehr, Plaketten liegen auf einer Linie --- */
.article-body .offers td.col-rank {
  flex-direction: row;
  gap: 0;
  align-items: center;
}
.article-body .offers tbody tr.card td.col-rank::before { content: none; }

/* --- Goldband statt Regenbogen --- */
.page-hero::after {
  background: linear-gradient(90deg, #d4a017 0%, #c1121f 48%, #141418 100%);
}
.site-header::after {
  background: linear-gradient(90deg, #d4a017 0%, #c1121f 46%, transparent 100%);
}
.article-body h2::after { background: #d4a017; }

/* --- Verwandte Beitraege: durchgehend Gold --- */
.related-card,
.related-card:nth-child(4n+1),
.related-card:nth-child(4n+2),
.related-card:nth-child(4n+3),
.related-card:nth-child(4n+4) { border-left-color: #d4a017; }

/* --- Redaktionszone FAQ + Autor: Rot --- */
.page-faq__kicker { color: #c1121f; }
.faq-item__q:hover { color: #c1121f; }
.faq-item__q::after,
.faq-item__q::before { background: #c1121f; }
.faq-item[open] .faq-item__q { color: #c1121f; }
.page-author__card { border-left-color: #c1121f; }
.page-author__role { color: #c1121f; }

/* --- Datum gehoert zur Marke, nicht zu den Links --- */
.page-hero__date svg { color: #d4a017; }

/* ============================================================
   BILDUNTERSCHRIFTEN — ein Satzbild fuer alle Artikel
   Der Kriterienkasten der Ranglisten lief bisher als Karte mit
   eigener Schriftgroesse. Er bekommt jetzt genau die Typografie
   der .shot-Bildunterschriften aus den Markenreviews.
   ============================================================ */
.article-body .offers-figure__note {
  padding: 0 0 0 .7rem;
  border: 0;
  border-left: 3px solid #ffcc00;
  border-radius: 0;
  background: none;
  color: #5d5d66;
  font-size: .9rem;
  line-height: 1.4;
}
.article-body .offers-figure__note p {
  margin: 0 0 .55rem;
  color: #5d5d66;
  font-size: .9rem;
  line-height: 1.4;
}
.article-body .offers-figure__note p:last-child { margin-bottom: 0; }
.article-body .offers-figure__title {
  display: block;
  margin-bottom: .35rem;
  color: #141418;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.4;
}