/* ============================================================
   gta6karte.de — Atmosphärische Region-Cards (nur /regionen/)
   ------------------------------------------------------------
   Reines CSS, keine externen Assets, kein JS.
   - Grundgeruest (Panel/Border/Text) folgt den Theme-Tokens.
   - Jede Region hat eine eigene Akzentfarbe via --rc / --rc2
     (R,G,B-Tripel -> rgb()/rgba() mit variabler Deckkraft).
   - Theme-Harmonisierung ueber Glow-Deckkraft + dezente Overlays.
   prefers-reduced-motion wird respektiert (nur Hover-Effekte).
   ============================================================ */

/* Abschnitts-Ueberschrift + Grid */
.regions-h2{font-size:19px;color:#fff;margin:26px 0 4px;letter-spacing:-.01em}
.regions{display:grid;grid-template-columns:repeat(auto-fill,minmax(244px,1fr));
  gap:14px;margin:14px 0 30px}

/* ---------- Card ---------- */
.rcard{position:relative;overflow:hidden;display:block;text-decoration:none;
  --rc:130,160,185;--rc2:130,160,185;--rc-glow:.12;
  border:1px solid var(--line);border-radius:14px;padding:17px 16px 15px;
  background:
    linear-gradient(90deg,rgb(var(--rc)),rgb(var(--rc2))) top left/100% 3px no-repeat,
    var(--panel);
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
.rcard>*{position:relative;z-index:1}
/* Region-Glow (Ecke) */
.rcard::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 85% at 100% 0%,rgba(var(--rc),var(--rc-glow)),transparent 62%)}
/* Theme-Overlay (leer im Standard) */
.rcard::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none}
.rcard:hover{transform:translateY(-3px);border-color:rgba(var(--rc),.55);
  box-shadow:0 10px 30px rgba(0,0,0,.28),0 0 0 1px rgba(var(--rc),.22)}
.rcard:focus-visible{outline:2px solid rgb(var(--rc));outline-offset:2px}

.rc-ic{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:9px;
  background:rgba(var(--rc),.15);color:rgb(var(--rc));margin-bottom:11px}
.rc-ic svg{width:19px;height:19px}
.rc-tag{position:absolute;top:13px;right:13px;z-index:1;font-size:10px;font-weight:800;
  text-transform:uppercase;letter-spacing:.05em;padding:3px 9px;border-radius:99px;
  background:rgba(var(--rc),.15);color:rgb(var(--rc))}
.rcard .sub{display:block;font-size:11.5px;color:var(--muted);font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;margin:0 0 3px}
.rcard h3{margin:0 0 6px;color:#fff;font-size:17px;letter-spacing:-.01em}
.rcard p{margin:0;color:var(--muted);font-size:13px;line-height:1.5}
.rc-go{display:inline-flex;align-items:center;gap:5px;margin-top:12px;
  font-size:12.5px;font-weight:700;color:rgb(var(--rc))}
.rc-go svg{width:13px;height:13px;transition:transform .15s ease}
.rcard:hover .rc-go svg{transform:translateX(3px)}

/* ---------- Region-Akzente (R,G,B) ---------- */
.r-vice{--rc:255,62,136;--rc2:34,211,238}    /* Neon: Pink -> Cyan       */
.r-keys{--rc:45,212,191;--rc2:255,176,87}    /* Wasser: Tuerkis -> Sunset */
.r-grass{--rc:78,168,107;--rc2:143,174,62}   /* Sumpf: Gruen -> Moos      */
.r-port{--rc:201,113,62;--rc2:59,130,196}    /* Hafen: Rost -> Blau       */
.r-ambrosia{--rc:224,165,43;--rc2:138,109,59}/* Industrie: Amber -> Asphalt*/
.r-kalaga{--rc:63,174,143;--rc2:74,134,176}  /* Wildnis: Gruen -> Bergblau */

/* ---------- Theme-Harmonisierung ---------- */
/* Dark = ruhig (Basis .12); grassrivers/police-Regeln entfernt
   (Themes seit Step 7 nicht mehr vorhanden) */
html[data-theme="vice-city"] .rcard{--rc-glow:.24}
html[data-theme="vice-city"] .rcard:hover{
  box-shadow:0 12px 34px rgba(0,0,0,.35),0 0 0 1px rgba(var(--rc),.42),0 0 22px rgba(var(--rc),.22)}

/* ---------- R1: Uebersicht auf content-surface-Niveau ----------
   Diese Datei laedt NUR auf Regionen-Seiten -> .mapcta/.regions
   sind hier faktisch gescoped (Guides nutzen .map-cta, andere
   Seiten laden diese Datei nicht). */
.mapcta{position:relative;overflow:hidden;border-radius:var(--r-l,16px);
  border:1px solid var(--teal-dim);box-shadow:var(--glow-soft,0 0 14px rgba(31,182,166,.15));
  background:radial-gradient(120% 160% at 0% 50%,rgba(31,182,166,.13),transparent 55%),
             linear-gradient(135deg,var(--panel2),var(--panel))}
.mapcta a{transition:filter var(--dur-fast,.14s),box-shadow var(--dur-fast,.14s)}
.mapcta a:hover{filter:brightness(1.08);box-shadow:var(--glow-mid,0 0 16px rgba(31,182,166,.24))}
@media(min-width:1100px){
  /* 6 Cards als 3x2-Dashboard auf der 1140px-Buehne (content-surface) */
  html[data-surface="content"] .regions{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
}

/* ---------- Mobile ---------- */
@media(max-width:560px){
  .regions{grid-template-columns:1fr;gap:12px}
}

/* ---------- Reduced Motion ---------- */
@media(prefers-reduced-motion:reduce){
  .rcard,.rc-go svg{transition:none}
  .rcard:hover{transform:none}
  .rcard:hover .rc-go svg{transform:none}
}

/* ============================================================
   R2: REGION-DETAIL-SKIN — Scope: html[data-region="..."]
   Nur die 6 Detailseiten (laden diese Datei seit R2). Nutzt das
   --rc / --rc2 Farbsystem: jede Seite traegt ihre Regionsfarbe
   auf Hero, Steckbrief, FAQ, Portal und Navigation.
   Deko via Background-Layer statt Pseudos (weniger L23-Risiko).
   Diakritika: .hero h1-Muster kommt aus site.css und bleibt.
   ============================================================ */
html[data-region]{--rc:130,160,185;--rc2:130,160,185}
html[data-region="vice-city"]{--rc:255,62,136;--rc2:34,211,238}
html[data-region="leonida-keys"]{--rc:45,212,191;--rc2:255,176,87}
html[data-region="grassrivers"]{--rc:78,168,107;--rc2:143,174,62}
html[data-region="port-gellhorn"]{--rc:201,113,62;--rc2:59,130,196}
html[data-region="ambrosia"]{--rc:224,165,43;--rc2:138,109,59}
html[data-region="mount-kalaga"]{--rc:63,174,143;--rc2:74,134,176}

/* Hero -> Regionen-Panel: Farb-Topline + Corner-Glow in Regionsfarbe */
html[data-region] .hero{border-bottom:0;margin:16px 0 28px;padding:26px 24px 22px;
  border-radius:var(--r-l,16px);border:1px solid var(--line2);
  background:
    linear-gradient(90deg,rgb(var(--rc)),rgb(var(--rc2))) top left/100% 2px no-repeat,
    radial-gradient(120% 90% at 100% 0%,rgba(var(--rc),.13),transparent 60%),
    linear-gradient(180deg,rgba(255,255,255,.03),transparent 30%),var(--panel)}
html[data-region] .hero .tag{background:rgba(var(--rc),.14);color:rgb(var(--rc))}

/* Abschnitts-H2: Farb-Dash (nur direkte article-Kinder, wie Guide) */
html[data-region] article>h2{display:flex;align-items:center;gap:10px}
html[data-region] article>h2::before{content:"";flex:none;width:16px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,rgb(var(--rc)),rgb(var(--rc2)))}

/* Steckbrief -> Dossier-Panel mit Regions-Rail */
html[data-region] .fact{border-left:3px solid rgb(var(--rc));
  background:linear-gradient(180deg,rgba(var(--rc),.05),transparent 55%),var(--panel)}
html[data-region] .fact h3{color:rgb(var(--rc))}

/* FAQ-Politur: Sheen, Open-Akzent, Hover, Focus */
html[data-region] .rfaq details{border-radius:var(--r-m,12px);
  background:linear-gradient(180deg,rgba(255,255,255,.015),transparent 40%),var(--panel);
  transition:border-color var(--dur-fast,.14s)}
html[data-region] .rfaq details[open]{border-color:rgba(var(--rc),.5)}
html[data-region] .rfaq summary:hover,html[data-region] .rfaq summary::after{color:rgb(var(--rc))}
html[data-region] .rfaq summary:focus-visible{outline:2px solid rgb(var(--rc));outline-offset:-2px;border-radius:var(--r-s,8px)}

/* Portal + Quellen-Notiz in Regionsfarbe */
html[data-region] .mapcta{border-color:rgba(var(--rc),.45);
  background:radial-gradient(120% 160% at 0% 50%,rgba(var(--rc),.12),transparent 55%),
             linear-gradient(135deg,var(--panel2),var(--panel));
  box-shadow:0 0 18px -8px rgba(var(--rc),.35)}
html[data-region] .note{border-left-color:rgba(var(--rc),.55)}

/* Vor/Zurueck -> Region-Navigations-Panels */
html[data-region] .prevnext a{background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-m,12px);padding:12px 16px;
  transition:border-color var(--dur-fast,.14s),box-shadow var(--dur-fast,.14s),color var(--dur-fast,.14s)}
html[data-region] .prevnext a:hover{border-color:rgba(var(--rc),.55);color:var(--ink);
  box-shadow:0 0 14px rgba(var(--rc),.15)}
html[data-region] .prevnext .lbl{color:rgb(var(--rc));font-weight:800;text-transform:uppercase;
  letter-spacing:.06em;font-size:10px;margin-bottom:3px}

/* Vice City: Neon-Verstaerkung in Regionsfarbe */
html[data-theme="vice-city"][data-region] .hero{border-color:rgba(var(--rc),.35);
  box-shadow:0 0 44px -20px rgba(var(--rc),.5)}
html[data-theme="vice-city"][data-region] .fact{box-shadow:0 0 24px -14px rgba(var(--rc),.4)}
html[data-theme="vice-city"][data-region] .mapcta{box-shadow:0 0 30px -12px rgba(var(--rc),.45)}
html[data-theme="vice-city"][data-region] .rfaq details[open]{border-color:rgba(var(--rc),.6)}

/* Desktop: 1140px-Buehne, Prosa auf Lese-Breite */
@media(min-width:1100px){
  html[data-region] .wrap{max-width:1140px}
  html[data-region] article>p,html[data-region] article>ul,
  html[data-region] .fact,html[data-region] .note,html[data-region] .related{max-width:760px}
  html[data-region] .hero{padding:36px 40px 32px;margin:20px 0 34px}
  html[data-region] .hero h1{font-size:50px} /* Diakritika-Padding (site.css, em) skaliert mit */
  html[data-region] .hero p{font-size:17px;max-width:70ch}
  html[data-region] article>h2{font-size:24px;margin:44px 0 12px}
  html[data-region] .rfaq h2{font-size:24px}
  html[data-region] .rfaq p{max-width:80ch}
}

/* Mobile kompakt */
@media(max-width:560px){
  html[data-region] .hero{padding:20px 16px 18px;margin:10px 0 22px}
}

@media(prefers-reduced-motion:reduce){
  html[data-region] .rfaq details,html[data-region] .prevnext a{transition:none}
}