/* ============================================================
   Randori-Pro · Standortübersicht /standorte  (Hub · Bold-Stil)
   Baut auf tokens.css + standort.css auf. Eigene Komponenten mit
   Präfix .h- (Hub); geteilte Bausteine (.s-header, .s-btn, .s-kicker,
   .s-pin, .s-q, .s-final, .s-foot, .s-loc) werden wiederverwendet.
   Farbrhythmus: DUNKEL → HELL → DUNKEL → HELL → DUNKELROT.
   ============================================================ */

/* 2 · HERO  (Foto-Collage + dunkler Verlauf · Stil wie .b-hero Startseite)
   Seit Oktober 2026 echte Fotos aus den Standorten statt des KI-Bilds:
   .foto-collage (css/fotos.css) liegt absolut im Hero. Ihr Verlauf wird
   hier ersetzt: er läuft nach unten in volles Tiefschwarz aus, damit die
   Zahlenleiste .h-hero__stats auf derselben Fläche sitzt wie bisher.  */
.h-hero { position: relative; color: #fff; overflow: hidden; padding: 220px 0 120px;
  background: var(--rp-tiefschwarz); }
.h-hero .foto-collage::after {
  background:
    linear-gradient(90deg, rgba(26,20,20,0.55) 0%, rgba(26,20,20,0.18) 55%, transparent 80%),
    linear-gradient(180deg,
      rgba(26,20,20,0.70) 0%,
      rgba(26,20,20,0.42) 28%,
      rgba(26,20,20,0.58) 52%,
      rgba(26,20,20,0.95) 72%,
      var(--rp-tiefschwarz) 80%); }
/* Mobil liegt das rote „Eine Familie." auf Haar und Stirn im ersten
   Collage-Foto. Eine weiche, lokale Abdunklung hinter der Überschrift
   hält es lesbar; das Gesicht darunter bleibt hell. */
@media (max-width: 768px) {
  .h-hero .foto-collage::after {
    background:
      radial-gradient(ellipse 75% 16% at 22% 26%, rgba(20,16,15,0.80) 0%, rgba(20,16,15,0.55) 55%, rgba(20,16,15,0) 100%),
      linear-gradient(90deg, rgba(26,20,20,0.55) 0%, rgba(26,20,20,0.18) 55%, transparent 80%),
      linear-gradient(180deg,
        rgba(26,20,20,0.70) 0%,
        rgba(26,20,20,0.42) 28%,
        rgba(26,20,20,0.58) 52%,
        rgba(26,20,20,0.95) 72%,
        var(--rp-tiefschwarz) 80%); }
}
/* roter Schein oben rechts liegt über den Fotos */
.h-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse at 88% 8%, rgba(220,13,29,0.18), transparent 55%); pointer-events: none; }
.h-hero__inner { position: relative; z-index: 2; }
.h-hero__h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(44px, 8vw, 110px); line-height: 0.92; letter-spacing: -0.03em; color: #fff; margin: 0 0 36px; max-width: 16ch; text-wrap: balance; }
.h-hero__h1 em { font-style: normal; color: var(--rp-rot-akzent); }
.h-hero__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 56px; flex-wrap: wrap; }
.h-hero__lede { max-width: 56ch; font-size: 18px; line-height: 1.6; color: rgba(255,255,255,0.85); margin: 0; }
.h-hero__cta { flex-shrink: 0; }

/* Kennzahl-Zeile unter dem Hero ----------------------------- */
.h-hero__stats { margin-top: 80px; padding-top: 44px; border-top: 1px solid rgba(255,255,255,0.16); display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; position: relative; z-index: 2; }
.h-stat-inline { display: flex; flex-direction: column; gap: 10px; }
.h-stat-inline__n { font-family: var(--font-display); font-weight: 800; font-size: clamp(36px, 4.4vw, 60px); line-height: 0.95; letter-spacing: -0.02em; color: var(--rp-rot-akzent); }
.h-stat-inline__n .pre { color: rgba(255,255,255,0.55); font-weight: 700; font-size: 0.5em; letter-spacing: 0.02em; margin-right: 0.18em; vertical-align: middle; }
.h-stat-inline__l { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(212,201,181,0.78); }
@media (max-width: 900px){ .h-hero{ padding: 160px 0 90px; } .h-hero__row{ flex-direction: column; align-items: flex-start; gap: 32px; } .h-hero__stats{ grid-template-columns: 1fr 1fr; gap: 36px 24px; margin-top: 56px; } }

/* 3 · KARTE  (Hell · Beige-deep) ---------------------------- */
.h-map-sec { background: var(--rp-beige-deep); color: var(--rp-tiefschwarz); padding: 150px 0; }
.h-map-sec__head { max-width: 760px; margin: 0 0 60px; }
.h-map-sec__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 5vw, 68px); line-height: 1.0; letter-spacing: -0.03em; color: var(--rp-rot-anker); margin: 0; max-width: 14ch; }

.h-map { position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 2348 / 1372; box-shadow: 0 30px 80px -42px rgba(0,0,0,0.5); border: 1px solid var(--rp-border); background: #e9e4da; }
.h-map__live { position: absolute; inset: 0; }
/* Fremde POI-Farben des Kartenbilds zurücknehmen — die roten Pins führen */
.h-map__img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.55) contrast(1.03) brightness(1.02); }

/* Sanftes Einblenden der Karte (nur mit JS-Motion; ohne JS sofort sichtbar) */
.js-motion .h-map__live { opacity: 0; transition: opacity 420ms var(--ease-standard); }
.js-motion .h-map.is-loaded .h-map__live { opacity: 1; }

.h-map__label { position: absolute; top: 18px; left: 18px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; color: #fff; background: rgba(20,16,15,0.7); padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18); z-index: 4; }
/* Pins erben .s-pin / .s-pin__tip aus standort.css           */
.h-map .s-pin { z-index: 5; }
/* Touch-Ziel ≥ 44px: unsichtbare Trefferfläche um den 26px-Punkt */
.h-map .s-pin::before { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); border-radius: 50%; }
/* Labels dauerhaft sichtbar — dunkle Chips; die Pins bleiben das rote Signal.
   Modifier legen die Label-Seite fest: Standard unten, --n oben, --w links, --e rechts */
.h-map .s-pin__tip { opacity: 1; pointer-events: none; background: rgba(20,16,15,0.78); border: 1px solid rgba(255,255,255,0.18); font-size: 11px; letter-spacing: 0.05em; padding: 5px 11px; white-space: nowrap; bottom: auto; top: calc(100% + 10px); transform: translateX(-50%); transition: none; }
.h-map .s-pin:hover .s-pin__tip { transform: translateX(-50%); }
.h-map .s-pin--n .s-pin__tip { top: auto; bottom: calc(100% + 10px); }
.h-map .s-pin--w .s-pin__tip, .h-map .s-pin--w:hover .s-pin__tip { top: 50%; left: auto; right: calc(100% + 10px); transform: translateY(-50%); }
.h-map .s-pin--e .s-pin__tip, .h-map .s-pin--e:hover .s-pin__tip { top: 50%; left: calc(100% + 10px); transform: translateY(-50%); }
@media (max-width: 900px){ .h-map-sec{ padding: 90px 0; } .h-map-sec__head{ margin-bottom: 40px; } .h-map{ aspect-ratio: 3 / 4; } .h-map__img{ object-position: 56% 40%; } .h-map .s-pin__tip{ font-size: 10px; padding: 4px 9px; } }

/* 4 · STANDORT-KACHELN  (Hell · Beige) ---------------------- */
.h-grid-sec { background: var(--rp-beige); color: var(--rp-tiefschwarz); padding: 150px 0 160px; }
.h-grid-sec__head { max-width: 760px; margin: 0 0 64px; }
.h-grid-sec__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 5vw, 68px); line-height: 1.0; letter-spacing: -0.03em; color: var(--rp-rot-anker); margin: 0; max-width: 14ch; }

.h-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.h-tile { display: flex; flex-direction: column; background: var(--rp-white); border: 1px solid var(--rp-border); border-radius: 20px; overflow: hidden; transition: transform 240ms var(--ease-standard), box-shadow 240ms var(--ease-standard), border-color 240ms var(--ease-standard); }
.h-tile:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -28px rgba(26,20,20,0.4); border-color: var(--rp-rot-anker); }

.h-tile__photo { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 14px),
    linear-gradient(160deg, #2a2120 0%, #1a1414 100%); }
.h-tile__photo::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 45%, rgba(20,16,15,0.55) 100%); }
.h-tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms cubic-bezier(0.16,1,0.3,1); }
.h-tile:hover .h-tile__img { transform: scale(1.045); }
.h-tile__ph-label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.5); text-align: center; line-height: 1.7; z-index: 1; white-space: nowrap; }
.h-tile__ph-label .s-ph { display: block; }
.h-tile__badge { position: absolute; top: 14px; right: 14px; z-index: 2; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; background: rgba(20,16,15,0.62); border: 1px solid rgba(255,255,255,0.16); padding: 6px 12px; border-radius: 999px; white-space: nowrap; }
.h-tile__badge--new { background: var(--rp-rot-akzent); border-color: var(--rp-rot-akzent); }

.h-tile__body { display: flex; flex-direction: column; gap: 10px; padding: 28px 28px 26px; flex: 1; }
.h-tile__bezirk { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rp-grau-muted); margin: 0; }
.h-tile__name { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.0; letter-spacing: -0.02em; color: var(--rp-rot-anker); margin: 2px 0 0; }
.h-tile__addr { font-family: var(--font-body); font-size: 15px; line-height: 1.5; color: var(--rp-grau-7012); margin: 0; }
.h-tile__disc { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; line-height: 1.7; color: var(--rp-grau-muted); margin: 6px 0 0; text-transform: uppercase; }
.h-tile__go { margin-top: auto; padding-top: 20px; display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rp-rot-akzent); }
.h-tile__go::after { content: "→"; transition: transform 220ms var(--ease-standard); }
.h-tile:hover .h-tile__go::after { transform: translateX(6px); }
@media (max-width: 1100px){ .h-tiles{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px){
  .h-grid-sec{ padding: 90px 0 100px; }
  .h-grid-sec__head{ margin-bottom: 44px; }
  /* Kompakte Zeilen statt voller Karten — 7 Standorte ohne Mammut-Scroll */
  .h-tiles{ grid-template-columns: 1fr; gap: 14px; }
  .h-tile{ display: grid; grid-template-columns: 104px 1fr; align-items: stretch; border-radius: 16px; }
  .h-tile__photo{ aspect-ratio: auto; height: 100%; min-height: 128px; }
  .h-tile__photo::after{ background: linear-gradient(180deg, transparent 55%, rgba(20,16,15,0.35) 100%); }
  .h-tile__badge{ display: none; }
  .h-tile__ph-label{ font-size: 8px; letter-spacing: 0.08em; white-space: normal; width: 84%; }
  .h-tile__body{ min-width: 0; padding: 16px 18px 14px; gap: 5px; }
  .h-tile__name{ font-size: 22px; }
  .h-tile__addr{ font-size: 13px; }
  .h-tile__disc{ margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .h-tile__go{ padding-top: 10px; font-size: 11px; }
  .h-tile__meta{ padding-top: 12px; }
}

/* 5 · CAPE CORAL · stille 8. Kachel im Grid (kein Link) -----
   Für Cape Coral gibt es noch kein Foto in assets/ (CLAUDE.md §8),
   deshalb trägt die Kachel dieselbe 16:9-Fläche wie die sieben
   anderen — gefüllt mit dem Randori-Kanji auf Beige statt mit einem
   Bildpfad ins Leere.
   SPÄTER TAUSCHEN: sobald assets/standort-cape-coral.jpg vorliegt,
   nur die beiden Variablen unten ändern —
     --cape-media: url('../assets/standort-cape-coral.jpg');
     --cape-media-size: cover;                                     */
.h-tile--cape { background: var(--rp-beige-deep);
  --cape-media: url('../assets/kanji-randori-beige.webp');
  --cape-media-size: auto 72%; }
.h-tile--cape::before { content: ""; display: block; flex: 0 0 auto; aspect-ratio: 16 / 9; border-bottom: 1px solid var(--rp-border); background:
    var(--cape-media) center / var(--cape-media-size) no-repeat,
    repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 14px),
    linear-gradient(160deg, color-mix(in oklab, var(--rp-beige) 82%, var(--rp-tiefschwarz)) 0%, color-mix(in oklab, var(--rp-beige) 68%, var(--rp-tiefschwarz)) 100%); }
.h-tile--cape .h-tile__addr { max-width: 30ch; }
/* Kompakte Zeile: Cape Coral läuft im selben Rhythmus wie die sieben anderen.
   (Muss NACH der Basisregel stehen, sonst gewinnt deren aspect-ratio.)      */
@media (max-width: 720px){
  .h-tile--cape::before{ aspect-ratio: auto; height: 100%; min-height: 128px; }
}
.h-tile__meta { margin-top: auto; padding-top: 20px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rp-grau-muted); }

/* FAQ-Head (Hub): Sub direkt unter der H2 statt rechts unten */
.s-faq--light .s-faq__head { display: block; }
.s-faq--light .s-faq__sub { margin: 18px 0 0; max-width: 54ch; }
/* Inline-Anker in FAQ-Antworten sichtbar machen */
.s-faq--light .s-q__a-inner a { color: var(--rp-rot-akzent); text-decoration: underline; text-underline-offset: 3px; }
.s-faq--light .s-q__a-inner a:hover { color: var(--rp-rot-anker); }

/* 6 · KENNZAHLEN  (Dunkler Anker · Tiefschwarz) ------------- */
.h-stats-sec { background: var(--rp-tiefschwarz); color: #fff; padding: 160px 0; position: relative; overflow: hidden; }
.h-stats-sec::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 15% 12%, rgba(220,13,29,0.16), transparent 55%); pointer-events: none; }
.h-stats-sec__inner { position: relative; z-index: 2; }
.h-stats-sec__head { max-width: 720px; margin: 0 0 80px; }
.h-stats-sec__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(36px, 5vw, 76px); line-height: 0.98; letter-spacing: -0.03em; color: #fff; margin: 0; max-width: 14ch; }
.h-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; border-top: 1px solid rgba(255,255,255,0.2); padding-top: 56px; }
.h-stats-cell__n { font-family: var(--font-display); font-weight: 900; font-size: clamp(40px, 5.2vw, 72px); line-height: 0.9; letter-spacing: -0.03em; color: var(--rp-rot-akzent); }
.h-stats-cell__n .pre { display: block; font-family: var(--font-mono); font-weight: 500; font-size: 0.26em; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 0.5em; }
.h-stats-cell__n .u { font-size: 0.42em; font-weight: 800; margin-left: 0.1em; }
.h-stats-cell__l { margin-top: 18px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rp-beige); line-height: 1.6; }
.h-stats-foot { margin-top: 56px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
@media (max-width: 900px){ .h-stats-sec{ padding: 100px 0; } .h-stats-sec__head{ margin-bottom: 56px; } .h-stats-grid{ grid-template-columns: 1fr 1fr; gap: 48px 24px; } }

/* TODO-Marker auf hellen Hub-Flächen ------------------------ */
.h-map-sec .s-ph, .h-grid-sec .s-ph, .s-faq--light .s-ph { color: var(--rp-rot-akzent); }

/* KI-Hinweis auf dem kleinen Hochkant-Thumbnail der Mariendorf-Karte:
   mobil kompakter, damit das Label nicht ein Zehntel des Bildes bedeckt. */
@media (max-width: 768px){
  .h-tile__photo.ki-bild .ki-hinweis{ font-size: 9px; padding: 2px 6px; right: 4px; bottom: 4px; }
}