/* ==========================================================================
   Godz Casino – Globale Stile
   ========================================================================== */
body {
  font-family: var(--font-main);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  color: var(--color-text);
  background-color: var(--color-bg-primary);
}

/* ---- Container ---- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

/* ---- Skip-Link ---- */
.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -3rem;
  z-index: 1000;
  background: var(--color-accent);
  color: var(--color-white);
  padding: 0.6rem 1rem;
  font-weight: var(--fw-semibold);
  transition: top var(--transition);
  clip-path: var(--clip-corner);
}
.skip-link:focus { top: 0.5rem; }

/* ---- Fokus sichtbar ---- */
:focus-visible {
  outline: 3px solid var(--color-heading);
  outline-offset: 2px;
}

/* ---- Überschriften ---- */
h1, h2, h3 { color: var(--color-white); line-height: 1.2; font-weight: var(--fw-bold); }

h1 { font-size: var(--fs-h1); font-weight: var(--fw-extrabold); }
h2 {
  font-size: var(--fs-h2);
  color: var(--color-heading);
  font-weight: var(--fw-extrabold);
  position: relative;
  padding-bottom: 0.5rem;
}
h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 3px;
  background: var(--color-heading);
}
h3 {
  font-size: var(--fs-h3);
  color: var(--color-white);
  font-weight: var(--fw-bold);
}

/* ---- Fließtext ---- */
main p { margin-bottom: var(--space-paragraph); }
main a:not([class]) {
  color: var(--color-heading);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition);
}
main a:not([class]):hover { color: var(--color-accent); }

strong { color: var(--color-white); font-weight: var(--fw-semibold); }

/* ---- Interne Textlinks (kontextbezogene Verlinkung) ---- */
.ilink {
  color: #37c7d4;                 /* helles Marken-Türkis, hebt sich vom Grau ab */
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--transition), text-decoration-color var(--transition);
}
.ilink:hover,
.ilink:focus-visible { color: var(--color-heading); }   /* Hover: Gold */

/* ---- Listen im Fließtext ---- */
.content-list {
  list-style: none;
  margin: 0 0 var(--space-paragraph);
  padding: 0;
  display: grid;
  gap: 0.6rem;
}
.content-list li {
  position: relative;
  padding-left: 1.6rem;
}
.content-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  background: var(--color-accent);
  transform: rotate(45deg);
}

/* ---- Tabellen ---- */
.data-table-wrap { overflow-x: auto; margin-bottom: var(--space-paragraph); }
.data-table {
  width: 100%;
  border: 1px solid var(--color-cool);
  background: var(--color-card);
  font-size: 0.95rem;
}
.data-table th,
.data-table td {
  padding: 0.85rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--color-cool);
  vertical-align: top;
}
.data-table thead th {
  background: var(--color-card-2);
  color: var(--color-heading);
  font-weight: var(--fw-bold);
}
.data-table tbody tr:nth-child(even) { background: rgba(57, 73, 80, 0.15); }
.data-table tbody td:first-child { color: var(--color-white); font-weight: var(--fw-medium); }
.table-note { font-size: 0.9rem; color: var(--color-text); margin-top: 0.5rem; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.6rem;
  font-weight: var(--fw-bold);
  color: var(--color-btn-text);
  text-align: center;
  line-height: 1.2;
  clip-path: var(--clip-corner);
  transition: transform var(--transition), filter var(--transition);
}
.btn:hover { filter: brightness(1.12); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--btn-primary); }
.btn--secondary { background: var(--btn-secondary); }
.btn--block { width: 100%; }

/* ---- Sektionsabstände ---- */
main { display: block; }
.section { padding-block: calc(var(--space-section) / 2); }
.section--tight { padding-block: calc(var(--space-section) / 3); }

/* ---- Intro ---- */
.intro { margin-bottom: var(--space-section); }
.intro__lead { font-size: 1.05rem; }

/* ---- Karten-Grid Utility ---- */
.grid { display: grid; gap: var(--space-card-gap); }

/* ---- Breadcrumb ---- */
.breadcrumb { font-size: 0.9rem; color: var(--color-text); margin-bottom: 1rem; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; }
.breadcrumb li::after { content: "›"; margin-left: 0.4rem; color: var(--color-cool); }
.breadcrumb li:last-child::after { content: ""; }
.breadcrumb a { color: var(--color-heading); }
.breadcrumb [aria-current="page"] { color: var(--color-text); }

/* ---- Merkmal-Karten (Feature/Rating) ---- */
.chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.25rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.9rem;
  background: var(--color-card);
  color: var(--color-white);
  border: 1px solid var(--color-cool);
  font-size: 0.85rem;
  font-weight: var(--fw-semibold);
  clip-path: var(--clip-corner);
}
.chip__value { color: var(--color-heading); }

/* ---- Inline CTA nach Blöcken ---- */
.section-cta { margin: 1.5rem 0 var(--space-section); }

/* ---- Sektion mit Bild (content-section wird separat gestylt) ---- */
.section-heading-wrap { margin-bottom: var(--space-h2-text); }

/* ---- Animation Fade-in ---- */
/* Nur wenn JS aktiv ist (html.js), wird der Startzustand versteckt.
   Ohne JS bleibt der Inhalt immer sichtbar. */
.js .animate-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.js .animate-in.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .animate-in { opacity: 1; transform: none; transition: none; }
}

/* ---- 404-Seite ---- */
.error-404 { display: grid; place-items: center; min-height: 60dvh; text-align: center; padding-block: var(--space-section); }
.error-404__code {
  font-size: clamp(5rem, 18vw, 11rem);
  font-weight: var(--fw-extrabold);
  line-height: 1;
  color: var(--color-heading);
  margin: 0;
}
.error-404__title { color: var(--color-white); margin: 0.5rem 0 1rem; }
.error-404__text { color: var(--color-text); max-width: 52ch; margin: 0 auto 1.75rem; }