/* =========================================================
   Hero: dalmatinischer Steinbogen, Glut, Schachbrett
   ========================================================= */
.hero {
  position: relative;
  min-height: calc(100svh - 5.25rem);
  display: flex; flex-direction: column;
  overflow: hidden;
}
/* Ganz leises Schachbrett im Hintergrund, nur oben rechts */
.hero::before {
  content: ""; position: absolute; top: -10%; right: -8%; width: 55%; height: 80%;
  background: repeating-conic-gradient(rgba(18, 48, 77, .045) 0 25%, transparent 0 50%) 0 0 / 64px 64px;
  -webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 20%, transparent 100%);
  pointer-events: none;
}
.hero-grid {
  position: relative; flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: center;
  width: 100%;
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3rem) var(--gutter) clamp(2rem, 4vw, 3.5rem);
}

/* ---------- Titel ---------- */
.hero-title { color: var(--adriatic); }
.hero-word {
  display: block;
  font-size: clamp(3.4rem, 0.6rem + 8.4vw, 8.4rem);
  line-height: .95; letter-spacing: -0.04em;
  padding: .04em 0 .2em; margin-bottom: -.12em; /* Platz für das j */
  overflow: hidden;
  white-space: nowrap;
}
.hero-word .char { display: inline-block; transform-origin: 50% 100%; will-change: transform; }
.hero-sub {
  display: flex; align-items: center; gap: .75rem;
  margin-top: 1.1rem;
  font-family: var(--sans); font-weight: 500;
  font-size: var(--step-1); letter-spacing: 0; color: var(--red);
}
.hero-sub::before {
  content: ""; flex: none; width: 2.5rem; height: 2px; background: var(--red);
  transform-origin: left;
}
.hero-lede { margin-top: 1.5rem; max-width: 36ch; font-size: 1.15rem; color: var(--muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; }

/* Buttons mit Füllung, die von unten hereinwischt */
.btn-fill { position: relative; isolation: isolate; overflow: hidden; }
.btn-fill > span { position: relative; z-index: 1; }
.btn-fill::before {
  content: ""; position: absolute; left: -10%; right: -10%; top: 100%; height: 140%; z-index: 0;
  background: var(--adriatic);
  border-radius: 50% 50% 0 0;
  transition: transform .6s var(--ease-inout, cubic-bezier(.65, 0, .35, 1)), border-radius .6s;
}
.btn-fill:hover::before, .btn-fill:focus-visible::before { transform: translateY(-100%); border-radius: 0; }
.btn.btn-fill:hover { background: var(--red); border-color: var(--red); }
.btn-ghost.btn-fill::before { background: var(--adriatic); }
.btn-ghost.btn-fill:hover { background: transparent; color: #fff; border-color: var(--adriatic); }

/* ---------- Steinbogen mit Bild ---------- */
.hero-media {
  position: relative; margin: 0;
  width: 100%; max-width: 520px; justify-self: end;
  padding: 16px; /* Platz für die Bogenlinie */
}
.arch {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 999px 999px 10px 10px;
  overflow: hidden; isolation: isolate;
  background: #0b1520;
  container-type: inline-size;
  -webkit-mask-image: -webkit-radial-gradient(white, black); /* Safari: Rundung beim Transform halten */
}
.arch img {
  position: absolute; inset: -4%;
  width: 108%; height: 108%; max-width: none;
  object-fit: cover; object-position: 55% 62%;
  will-change: transform;
}
/* Warme Glut von unten, dunkler Rand oben */
.arch::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(120% 60% at 50% 105%, rgba(255, 120, 30, .28), transparent 60%),
    linear-gradient(to bottom, rgba(5, 12, 20, .35), transparent 30%);
  mix-blend-mode: screen;
}
.embers { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; }

.arch-line {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none;
}
.arch-line path {
  fill: none; stroke: var(--red); stroke-width: 1.5;
  stroke-dasharray: 1; stroke-dashoffset: 0;
  vector-effect: non-scaling-stroke;
}
.js-anim .arch-line path { stroke-dashoffset: 1; }

/* Schachbrett-Schleier für die Eröffnung */
.checker-veil { position: absolute; inset: 0; z-index: 4; display: none; pointer-events: none; }
.js-anim .checker-veil {
  display: grid;
  background: repeating-conic-gradient(var(--red) 0 25%, var(--paper) 0 50%) 0 0 / calc(200cqw / 7) calc(200cqw / 7);
}
.js-anim .checker-veil.has-tiles { background: none; }
.checker-veil span { display: block; transform-origin: center; }
.checker-veil span.r { background: var(--red); }
.checker-veil span.w { background: var(--paper); }

/* ---------- Bewertungs-Siegel ---------- */
.rating-badge {
  position: absolute; z-index: 5;
  left: -3.25rem; bottom: 2.5rem;
  width: 8.5rem; height: 8.5rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--paper); color: var(--adriatic);
  text-decoration: none;
  box-shadow: 0 18px 40px -18px rgba(18, 48, 77, .55);
  transition: transform .5s var(--ease-premium, cubic-bezier(.22, 1, .36, 1));
}
.rating-badge:hover { transform: scale(1.06) rotate(-4deg); }
.badge-ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: badge-spin 26s linear infinite; }
.rating-badge:hover .badge-ring { animation-duration: 8s; }
.badge-ring text { font: 600 15.5px/1 var(--sans); fill: var(--adriatic); letter-spacing: .06em; }
.badge-core { position: relative; display: grid; place-items: center; line-height: 1; }
.badge-core strong { font-family: var(--serif); font-weight: 400; font-size: 2.1rem; color: var(--adriatic); font-variant-numeric: tabular-nums; }
.badge-stars {
  margin-top: .25rem; font-size: .7rem; letter-spacing: .08em;
  background: linear-gradient(90deg, var(--red) 94%, var(--line) 94%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@keyframes badge-spin { to { transform: rotate(360deg); } }

/* ---------- Laufband mit Gerichten ---------- */
.hero-marquee {
  position: relative;
  border-top: 1px solid var(--line);
  padding: 1.1rem 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track { display: flex; align-items: center; gap: 2rem; width: max-content; will-change: transform; }
.marquee-track span {
  font-family: var(--serif); font-size: clamp(1.6rem, 1rem + 2.4vw, 2.8rem); line-height: 1.1;
  color: var(--adriatic); white-space: nowrap;
}
.marquee-track span.o { color: transparent; -webkit-text-stroke: 1.2px var(--adriatic); }
.marquee-track i {
  flex: none; width: 14px; height: 14px;
  background: repeating-conic-gradient(var(--red) 0 25%, var(--paper) 0 50%) 0 0 / 7px 7px;
  border: 1px solid var(--red);
  transform: rotate(45deg);
}

/* ---------- Startzustand vor der Animation ---------- */
.js-anim .hero-copy > *, .js-anim .rating-badge, .js-anim .hero-marquee { visibility: hidden; }

/* ---------- Responsiv ---------- */
@media (max-width: 960px) {
  .hero { min-height: 0; }
  .hero-grid { grid-template-columns: 1fr; padding-top: .75rem; }
  .hero-media { order: -1; justify-self: center; max-width: 440px; }
  .arch { aspect-ratio: 1 / 1; }
  .rating-badge { left: auto; right: -.25rem; bottom: 1rem; width: 7rem; height: 7rem; }
  .badge-core strong { font-size: 1.7rem; }
  .js-anim .checker-veil { background-size: calc(200cqw / 6) calc(200cqw / 6); }
}
@media (max-width: 640px) {
  .hero-media { padding: 10px; }
  .rating-badge { width: 6.25rem; height: 6.25rem; right: 0; bottom: .5rem; }
  .badge-ring text { font-size: 17px; }
  .badge-core strong { font-size: 1.5rem; }
  .hero-sub::before { width: 1.5rem; }
  .hero-actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .badge-ring { animation: none; }
  .checker-veil, .embers { display: none !important; }
  .btn-fill::before { transition: none; }
}