/* ===========================================================================
   KRAKEN-9 · Startseite
   ===========================================================================
   Die Seite benutzt bewusst dieselbe Bildsprache wie das Spielmenue
   (client/src/field-menu.css): warmes Olivgruen, Papierweiss, Messinggelb,
   harte Schlagschatten ohne Weichzeichner. Das Menue sieht aus wie ein
   gedrucktes Feldhandbuch - die Startseite ist dessen Titelseite, nicht ein
   fremdes Marketing-Layout, das davor geklebt wurde.

   Drei Regeln, die das zusammenhaelt:
     1. Schatten sind versetzt und hart (0 4px 0 #776331), nie weich.
     2. Ueberschriften sind schwer und eng gesetzt, Daten stehen in Mono.
     3. Keine Farbverlaeufe ausser als Abdunkler ueber Bewegtbild.

   Schriften sind dieselben wie im Spiel und kommen aus dem System - die
   Seite laedt keine fremden Dateien und ist damit auch sofort da.
   =========================================================================== */

:root {
  --nacht:      #101614;   /* Seitengrund */
  --olive:      #17201f;   /* Abschnitte */
  --olive-hell: #202d23;   /* Karten */
  --olive-kante:#2a382d;
  --rahmen:     #52604b;
  --papier:     #eee9d9;
  --papier-matt:#b6bcaa;
  --papier-tief:#98a390;
  --gold:       #d5b95f;
  --gold-hell:  #efdb91;
  --gold-tief:  #776331;
  --gruen:      #66784f;
  --gruen-hell: #92a179;
  --gruen-tief: #33422c;
  --rost:       #e2703a;   /* KRAKEN-9 */
  --funk:       #7fd6ff;   /* Relais */
  --schrift:    "Inter", "Segoe UI", system-ui, sans-serif;
  --anzeige:    "Arial Black", "Bahnschrift", "Inter", system-ui, sans-serif;
  --mono:       "JetBrains Mono", "Consolas", ui-monospace, monospace;
  --gasse:      clamp(20px, 5vw, 76px);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--nacht);
  color: var(--papier);
  font: 16px/1.65 var(--schrift);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; }

.sprung {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  padding: 12px 18px; background: var(--gold); color: #202722; font-weight: 800;
}
.sprung:focus { left: 8px; top: 8px; }

:focus-visible { outline: 3px solid var(--gold-hell); outline-offset: 3px; }

/* --- Emblem ------------------------------------------------------------- */
.emblem {
  position: relative; display: grid; place-content: center;
  width: 38px; height: 40px; flex: none;
  background: var(--gold); color: #202722;
  font: 900 27px/1 var(--anzeige);
  box-shadow: 3px 3px 0 var(--gold-tief);
}
.emblem i { position: absolute; right: 3px; bottom: 1px; font: 900 12px/1 var(--anzeige); font-style: normal; }
.emblem--klein { width: 28px; height: 30px; font-size: 19px; box-shadow: 2px 2px 0 var(--gold-tief); }
.emblem--klein i { font-size: 9px; }

/* --- Kopfzeile ---------------------------------------------------------- */
.kopf {
  position: fixed; inset: 0 0 auto; z-index: 20;
  display: flex; align-items: center; gap: 24px;
  height: 72px; padding: 0 var(--gasse);
  transition: background .25s, border-color .25s;
  border-bottom: 1px solid transparent;
}
.kopf.ist-fest {
  background: rgba(19, 26, 24, .93);
  border-bottom-color: var(--olive-kante);
  backdrop-filter: blur(8px);
}
.marke { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.marke__text { font: 900 14px/1.1 var(--schrift); letter-spacing: .02em; }
.marke__text small { display: block; margin-top: 3px; font: 700 9px/1 var(--schrift); letter-spacing: .12em; color: var(--papier-matt); }

.kopf__nav { display: flex; gap: 26px; margin-left: auto; }
.kopf__nav a {
  position: relative; padding: 6px 0;
  font: 600 13px/1 var(--schrift); color: var(--papier-matt); text-decoration: none;
}
.kopf__nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: var(--gold); transition: right .18s;
}
.kopf__nav a:hover { color: var(--papier); }
.kopf__nav a:hover::after { right: 0; }

/* --- Knoepfe ------------------------------------------------------------ */
.knopf {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px; border: 2px solid; border-radius: 3px;
  font: 800 14px/1 var(--schrift); text-decoration: none; white-space: nowrap;
  transition: transform .12s, background .12s;
}
.knopf b { font: 600 22px/0 var(--schrift); }
.knopf--gold {
  background: var(--gold); border-color: var(--gold-hell);
  border-bottom-color: #9c823e; color: #222a22;
  box-shadow: 0 4px 0 var(--gold-tief);
}
.knopf--gold:hover { background: #e5ca75; transform: translateY(-1px); }
.knopf--gold:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--gold-tief); }
.knopf--olive {
  background: var(--gruen); border-color: var(--gruen-hell);
  border-bottom-color: var(--gruen-tief); color: #f3efdf;
  box-shadow: 0 4px 0 var(--gruen-tief);
}
.knopf--olive:hover { background: #7a8b60; transform: translateY(-1px); }
.knopf--olive:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--gruen-tief); }
.knopf--gross { padding: 17px 26px; font-size: 16px; }
.kopf__cta { padding: 10px 17px; font-size: 13px; }

/* --- Aufmacher ---------------------------------------------------------- */
.held {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 100svh; padding: 120px var(--gasse) 0;
  overflow: hidden;
}
.held__film {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
}
/* Zwei Verlaeufe wie im Spielmenue: einer von links fuer die Schrift, einer
   von unten, damit die Eckdatenleiste auf Grund steht. */
.held__schleier {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, #17201ff2 0%, #17201fe0 34%, #17201f70 58%, #17201f18 100%),
    linear-gradient(0deg, var(--nacht) 0%, #17201fd0 16%, transparent 46%),
    linear-gradient(180deg, #10161499 0%, transparent 24%);
}
.held__inhalt { max-width: 680px; padding-bottom: 46px; }

.vorspann {
  margin: 0 0 14px; font: 800 11px/1 var(--schrift);
  letter-spacing: .22em; text-transform: uppercase; color: var(--gold);
}
.titel {
  /* Der Name bricht nie um - "KRAKEN-" ueber "9" waere eine andere Marke.
     Deshalb nowrap und eine Groesse, die an der Breite haengt. */
  margin: 0; white-space: nowrap;
  font: 1000 clamp(46px, 9.4vw, 104px)/.92 var(--anzeige);
  letter-spacing: -.055em; color: #f0e9d5;
  text-shadow: 0 5px 0 #7b8068, 0 10px 0 #121c17;
}
.titel span { color: var(--gold); }
.anriss {
  max-width: 34ch; margin: 24px 0 30px;
  font-size: clamp(17px, 2.2vw, 21px); line-height: 1.5; color: #dfe3d3;
}
.held__knoepfe { display: flex; flex-wrap: wrap; gap: 14px; }
.held__knoepfe--mitte { justify-content: center; }

.eckdaten {
  display: flex; flex-wrap: wrap; gap: 0;
  margin: 0 0 8px; padding: 0; list-style: none;
  border-top: 1px solid var(--olive-kante);
}
.eckdaten li {
  flex: 1 1 150px; padding: 18px 20px 18px 0;
  border-right: 1px solid var(--olive-kante);
}
.eckdaten li:last-child { border-right: 0; }
.eckdaten li:not(:first-child) { padding-left: 22px; }
.eckdaten strong { display: block; font: 800 27px/1 var(--mono); color: var(--gold); letter-spacing: -.02em; }
.eckdaten span { display: block; margin-top: 5px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--papier-tief); }

.held__quelle {
  margin: 0; padding-bottom: 20px;
  font: 500 10px/1 var(--mono); letter-spacing: .1em; color: #6f7c6b;
}

/* --- Zierband ----------------------------------------------------------- */
.band {
  height: 10px;
  background: repeating-linear-gradient(-45deg, var(--gold) 0 14px, #17201f 14px 28px);
  opacity: .55;
}

/* --- Abschnitte --------------------------------------------------------- */
.block { padding: clamp(64px, 9vw, 116px) var(--gasse); }
.block--dunkel { background: var(--olive); }

.kapitel {
  display: flex; align-items: center; gap: 12px; margin: 0 0 16px;
  font: 800 11px/1 var(--schrift); letter-spacing: .22em; text-transform: uppercase; color: var(--papier-tief);
}
.kapitel i {
  font: 800 11px/1 var(--mono); font-style: normal; color: #222a22;
  background: var(--gold); padding: 5px 6px;
}
.kapitel--mitte { justify-content: center; }

h2 {
  margin: 0 0 22px;
  font: 900 clamp(29px, 4.4vw, 50px)/1.08 var(--anzeige);
  letter-spacing: -.04em; color: #f0e9d5;
}
.mitte { text-align: center; }
h2.mitte { margin-left: auto; margin-right: auto; max-width: 20ch; }

.fliess { margin: 0 0 18px; font-size: 16.5px; line-height: 1.75; color: #c6cdba; max-width: 58ch; }
.fliess b { color: var(--papier); font-weight: 700; }
.fliess--eng { max-width: 62ch; }
.fliess.mitte { margin-left: auto; margin-right: auto; }
.textlink { color: var(--gold); text-underline-offset: 3px; }

/* --- Zweispalter -------------------------------------------------------- */
.spalten { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 70px); align-items: start; }
/* Umgedreht steht die Karte links und der Text rechts - dann braucht der
   Text die breitere Spalte, sonst bricht die Ueberschrift dreimal um. */
.spalten--umgekehrt { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
.spalten--umgekehrt .spalten__text { order: 2; }

.ablauf { display: grid; gap: 4px; margin: 34px 0 0; padding: 0; list-style: none; }
.ablauf li { display: flex; gap: 16px; padding: 16px 0; border-top: 1px solid var(--olive-kante); }
.ablauf__nr {
  flex: none; display: grid; place-content: center; width: 30px; height: 30px;
  border: 2px solid var(--rahmen); font: 800 13px/1 var(--mono); color: var(--gold);
}
.ablauf h3 { margin: 4px 0 4px; font: 800 15px/1.2 var(--schrift); letter-spacing: .01em; }
.ablauf p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--papier-matt); }

/* --- Bewegtbild in Rahmen ----------------------------------------------- */
.film-karte { margin: 0; background: var(--olive-hell); border: 2px solid var(--rahmen); box-shadow: 0 6px 0 #101a15; }
.film-karte video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #0c110f; }
.film-karte figcaption { padding: 16px 18px; font-size: 13px; line-height: 1.6; color: var(--papier-matt); border-top: 2px solid var(--rahmen); }
.film-karte figcaption strong { display: block; margin-bottom: 3px; font-size: 13px; letter-spacing: .04em; color: var(--papier); }

.film-breit { margin: 34px 0 44px; }
.film-breit video {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #0c110f;
  border: 2px solid var(--rahmen); box-shadow: 0 8px 0 #101a15;
}
.film-breit figcaption { margin-top: 14px; text-align: center; font: 500 11px/1 var(--mono); letter-spacing: .1em; color: #6f7c6b; }

/* --- Viererraster ------------------------------------------------------- */
.raster-vier { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px; background: var(--olive-kante); border: 1px solid var(--olive-kante); }
.raster-vier article { padding: 24px 22px; background: var(--olive); }
.raster-vier h3 { margin: 0 0 8px; font: 800 14px/1.3 var(--schrift); letter-spacing: .04em; color: var(--gold); }
.raster-vier p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--papier-matt); }

/* --- Die zwei Seiten ---------------------------------------------------- */
.seiten { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 20px; margin-top: 34px; }
.seite {
  display: flex; flex-direction: column;
  padding: 28px clamp(20px, 2.4vw, 32px) 30px;
  background: var(--olive-hell); border: 2px solid var(--rahmen);
  border-top-width: 5px; box-shadow: 0 6px 0 #101a15;
}
.seite--boss { border-top-color: var(--rost); }
.seite--trupp { border-top-color: var(--gruen-hell); }
.seite__rolle { margin: 0 0 6px; font: 800 10px/1 var(--schrift); letter-spacing: .2em; text-transform: uppercase; color: var(--papier-tief); }
.seite h3 { margin: 0; font: 900 clamp(26px, 3vw, 34px)/1 var(--anzeige); letter-spacing: -.03em; }
.seite--boss h3 { color: #ff9a72; }
.seite--trupp h3 { color: #c8dcab; }
.seite__satz { margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: #cdd4c2; }

.werte { display: grid; gap: 0; margin: 22px 0 0; }
.werte div { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--olive-kante); }
.werte dt { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--papier-tief); }
.werte dd { margin: 0; font: 700 14px/1.3 var(--mono); color: var(--papier); text-align: right; }
.werte em { display: block; font: 500 11px/1.4 var(--schrift); font-style: normal; color: var(--papier-tief); }

.faehigkeiten { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.faehigkeiten li { padding-left: 14px; border-left: 3px solid var(--rost); }
.faehigkeiten strong { display: block; font: 800 13px/1.3 var(--schrift); letter-spacing: .06em; text-transform: uppercase; }
.faehigkeiten span { font-size: 13.5px; line-height: 1.55; color: var(--papier-matt); }

.ausruestung { width: 100%; margin: 20px 0 0; border-collapse: collapse; }
.ausruestung caption { margin-bottom: 10px; text-align: left; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--papier-tief); }
.ausruestung th, .ausruestung td { padding: 8px 0; border-bottom: 1px solid var(--olive-kante); text-align: left; font-size: 14px; }
.ausruestung th { font-weight: 700; letter-spacing: .02em; }
.ausruestung td { color: var(--papier-matt); }
.ausruestung .preis { width: 4.5em; text-align: right; font-family: var(--mono); font-weight: 700; color: var(--gold); }

.schwaeche {
  margin: 22px 0 0; padding: 14px 16px;
  background: #1a2620; border-left: 3px solid var(--gold);
  font-size: 14px; line-height: 1.65; color: var(--papier-matt);
}
.schwaeche strong { color: var(--papier); }
.schwaeche b { color: var(--gold); }
.seite { margin-bottom: 6px; }

/* --- Schauplaetze ------------------------------------------------------- */
.karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; margin-top: 34px; }
.karte { background: var(--olive-hell); border: 2px solid var(--rahmen); box-shadow: 0 6px 0 #101a15; overflow: hidden; }
.karte img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.karte__text { padding: 20px 22px 24px; }
.karte h3 { margin: 0 0 10px; font: 900 24px/1 var(--anzeige); letter-spacing: -.03em; color: #f0e9d5; }
.karte__daten { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.karte__daten span { padding: 4px 8px; background: #17211c; border: 1px solid var(--olive-kante); font: 600 11px/1 var(--mono); color: var(--gold); }
.karte__text p:last-child { margin: 0; font-size: 14px; line-height: 1.65; color: var(--papier-matt); }

/* --- Beitrittskarte ----------------------------------------------------- */
.beitritt { padding: 26px clamp(20px, 2.4vw, 30px) 28px; background: #344530; border: 2px solid #7a8761; box-shadow: 0 6px 0 #18271d; }
.beitritt__label { margin: 0 0 12px; font: 800 10px/1 var(--schrift); letter-spacing: .2em; text-transform: uppercase; color: #b5c2a6; }
.beitritt__url { margin: 0; font: 800 clamp(19px, 2.3vw, 26px)/1.25 var(--mono); letter-spacing: -.01em; color: #dddcc3; word-break: break-all; }
.beitritt__url span { color: var(--gold); }
.beitritt__hinweis { margin: 14px 0 0; font-size: 14px; line-height: 1.6; color: #c3cdb6; }
.beitritt hr { margin: 22px 0; border: 0; border-top: 1px solid #55684b; }
.beitritt__daten { display: grid; gap: 0; margin: 0; }
.beitritt__daten div { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid #4a5c42; }
.beitritt__daten div:last-child { border-bottom: 0; }
.beitritt__daten dt { font-size: 12.5px; color: #bcc8ae; }
.beitritt__daten dd { margin: 0; font: 700 13px/1.3 var(--mono); color: #f0ead7; }

.haken { margin: 26px 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.haken li { position: relative; padding-left: 26px; font-size: 14.5px; line-height: 1.65; color: var(--papier-matt); }
.haken li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 11px; height: 6px; border: 2px solid var(--gold); border-top: 0; border-right: 0;
  transform: rotate(-45deg);
}
.haken strong { color: var(--papier); }

/* --- Schluss ------------------------------------------------------------ */
.schluss {
  padding: clamp(70px, 10vw, 130px) var(--gasse);
  background: var(--olive) url("./media/hero.jpg") center/cover;
  background-blend-mode: luminosity;
  position: relative;
}
.schluss::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--nacht), #17201fe8 55%, #17201fd6); }
.schluss__inhalt { position: relative; text-align: center; }
.schluss .vorspann { text-align: center; }
.schluss h2 { margin-inline: auto; }

/* --- Fusszeile ---------------------------------------------------------- */
.fuss { padding: 34px var(--gasse) 44px; background: var(--nacht); border-top: 1px solid var(--olive-kante); }
.fuss__zeile { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--papier-matt); }
.fuss__zeile strong { color: var(--papier); }
.fuss__zeile nav { display: flex; gap: 20px; margin-left: auto; }
.fuss__zeile nav a { font-size: 13px; color: var(--papier-matt); text-decoration: none; }
.fuss__zeile nav a:hover { color: var(--gold); }
.fuss__klein { margin: 18px 0 0; max-width: 66ch; font-size: 12px; line-height: 1.7; color: #77836f; }

/* --- Einblenden beim Scrollen ------------------------------------------- */
.zeigt { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.zeigt.ist-da { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .zeigt { opacity: 1; transform: none; transition: none; }
}

/* --- Schmale Bildschirme ------------------------------------------------ */
@media (max-width: 980px) {
  .kopf__nav { display: none; }
  .kopf__cta { margin-left: auto; }
  .spalten { grid-template-columns: 1fr; }
  .spalten--umgekehrt .spalten__text { order: 0; }
}

@media (max-width: 620px) {
  .kopf { height: 62px; }
  .held { padding-top: 96px; min-height: 92svh; }
  .held__inhalt { padding-bottom: 32px; }
  .anriss { font-size: 16px; margin-bottom: 24px; }
  .held__knoepfe .knopf { width: 100%; justify-content: space-between; }
  .eckdaten li { flex-basis: 50%; border-right: 0; padding: 14px 0; border-bottom: 1px solid var(--olive-kante); }
  .eckdaten li:not(:first-child) { padding-left: 0; }
  .eckdaten li:nth-child(odd) { padding-right: 16px; }
  .eckdaten li:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--olive-kante); }
  .eckdaten strong { font-size: 22px; }
  /* Die Vorspannzeile darf nicht mit einem einzelnen Wort umbrechen. */
  .vorspann { font-size: 10px; letter-spacing: .14em; }
  .marke__text small { display: none; }
  .fuss__zeile nav { margin-left: 0; width: 100%; }
}