/* Landing-Seite.
   ------------------------------------------------------------------
   DIE SEITE SIEHT AUS WIE DAS HUD. Das ist keine Anlehnung, sondern
   dieselbe Zeichenvorschrift: was in cl_paint.lua T.PaintWindow und
   T.PaintHeader machen, machen hier .holo und .holo-kopf.

     Aussenschein   drei Konturen mit fallender Deckkraft (T.Glow)
     Flaeche        C.body, Radius 6 (T.Radius.win)
     Abtastzeilen   1 px Weiss mit Deckkraft 4/255, alle 3 px
     Rahmen         1 px in C.frame
     Titelbalken    Verlauf hdrTop -> hdrBot, Lichtkante obenauf

   Die Werte stehen nicht hier, sondern in tokens.css -- derselben
   Quelle, aus der auch sh_theme.lua erzeugt wird. Wer die Farbe des
   Spiels aendert, aendert damit die Seite mit.

   SCHRIFTEN wie im HUD: Saira Semi Condensed fuer Beschriftungen,
   Barlow fuer Zahlen. Keine Monoschrift -- das Spiel hat keine, und
   Mono ist ausserdem die Optik von Entwicklerwerkzeugen. */

:root {
  --marke-a: #2b1ce4;
  --marke-b: #9b10f5;
  /* Zahlen wie im HUD: Barlow mit gleichbreiten Ziffern. */
  --f-zahl: var(--f-num);
  /* Sobald es ein Bild aus dem Spiel gibt, kommt es hier hinein --
     url("/bilder/held.jpg"). Der Rest der Seite bleibt, wie er ist. */
  --held-bild: none;
}

* { box-sizing: border-box; }

body {
  position: relative; margin: 0;
  background: var(--c-void); color: var(--c-bone);
  font-family: var(--f-num); font-size: 15px; line-height: 1.65;
}

/* ================= KOPF =================
   Logo mittig und AUF dem Held, in den abgeschraegten Ecken die Kanaele. */
.tor {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 12px;
}
.ecke {
  display: flex; gap: 18px; align-items: center;
  background: linear-gradient(180deg, rgba(29,75,102,.85), rgba(10,31,46,.85));
  border-bottom: 1px solid var(--c-frame-in);
  padding: 9px 26px;
}
.ecke.links  { justify-self: start; clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 0 100%); padding-right: 40px; }
.ecke.rechts { justify-self: end;   clip-path: polygon(22px 0, 100% 0, 100% 100%, 0 100%);          padding-left: 40px; }
.ecke a {
  font-family: var(--f-ui); text-transform: uppercase; letter-spacing: .14em;
  font-size: 11px; font-weight: 500; color: var(--c-ash);
  text-decoration: none; white-space: nowrap;
}
.ecke a:hover { color: var(--c-bone); }

.logo { display: flex; align-items: center; gap: 13px; text-decoration: none; padding: 13px 26px 0; }
.logo img { display: block; }
.wortmarke {
  font-family: Poppins, Montserrat, var(--f-ui), sans-serif;
  font-weight: 600; font-size: 40px; letter-spacing: -.01em; line-height: 1;
  background: linear-gradient(100deg, var(--marke-a), var(--marke-b));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ================= HELD =================
   Kein Farbverlauf ueber die ganze Flaeche: eine ruhige dunkle Flaeche,
   ein feines technisches Raster und die Marke gross und angeschnitten
   am Rand. Verlaufswolken waren das, was die Seite beliebig gemacht hat. */
.held {
  position: relative; overflow: hidden;
  padding: 128px 20px 40px;
  background: var(--held-bild), var(--c-void);
  background-size: cover; background-position: center;
  border-bottom: 1px solid var(--c-frame-in);
}
/* Abtastzeilen ueber die ganze Flaeche, dazu ein kalter Schein von
   oben -- so, wie eine Projektion im Spiel aussieht. Das karierte
   Raster von vorher war Technik-Deko und stand in keinem Bezug zum
   Spiel. */
.held::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.022) 0 1px, transparent 1px 3px),
    radial-gradient(80% 55% at 50% -10%, rgba(79,180,221,.16), transparent 70%);
}
/* Die Marke gross und angeschnitten, weit hinten. Sie soll das Bild
   tragen, solange es kein Bild gibt -- aber nicht mit dem Status um
   Aufmerksamkeit streiten. Deshalb hinter ihm und sehr blass. */
.marke-gross {
  position: absolute; right: -150px; bottom: -120px;
  width: 560px; opacity: .05; pointer-events: none;
}

.held-innen {
  position: relative; z-index: 1;
  max-width: 1120px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0,1.15fr) minmax(330px,.85fr);
  gap: 56px; align-items: center;
}

/* Die Zeile "GARRY'S MOD · STAR WARS · ROLLENSPIEL IM AUFBAU" ist raus:
   Versalien, durch Mittelpunkte getrennt, ueber einer grossen
   Ueberschrift -- das haeufigste Erkennungszeichen erzeugter Seiten.
   Was sie sagte, sagt jetzt der erste Satz im Fliesstext. */
.held h1 {
  font-family: var(--f-ui); font-weight: 600;
  font-size: clamp(34px, 5vw, 60px); line-height: 1.04;
  letter-spacing: -.005em; margin: 0 0 20px; color: var(--c-bone);
}
.lede { color: var(--c-ash); margin: 0; max-width: 52ch; }

.aktion { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin: 30px 0 0; }
.knopf {
  font-family: var(--f-ui); text-transform: uppercase; letter-spacing: .12em;
  font-size: 12px; font-weight: 500; color: var(--c-bone); text-decoration: none;
  background: rgba(79,180,221,.08);
  border: 1px solid var(--c-frame); border-radius: var(--r-sm);
  padding: 12px 24px;
}
.knopf:hover { background: rgba(79,180,221,.18); }
.leise {
  font-family: var(--f-ui); text-transform: uppercase; letter-spacing: .12em;
  font-size: 12px; color: var(--c-ash); text-decoration: none;
  border-bottom: 1px solid var(--c-frame-in); padding-bottom: 3px;
}
.leise:hover { color: var(--c-beam); border-color: var(--c-beam); }

/* --- Das Fenster aus dem Spiel -------------------------------------
   Eins zu eins aus T.PaintWindow uebersetzt. Wer das im Spiel
   wiedererkennt, sieht dieselbe Oberflaeche und nicht zwei Entwuerfe,
   die zufaellig dieselben Farben haben. */
.holo {
  position: relative;
  background: var(--c-body);
  border: 1px solid var(--c-frame);
  border-radius: var(--r-win);
  /* T.Glow: drei Ringe, Deckkraft 0.30 / i */
  box-shadow:
    0 0 0 1px rgba(79,180,221,.30),
    0 0 0 2px rgba(79,180,221,.15),
    0 0 0 3px rgba(79,180,221,.10),
    0 18px 46px rgba(0,0,0,.55);
}
/* Die feine waagerechte Struktur: 1 px Weiss, Deckkraft 4/255, alle 3 px. */
.holo::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.016) 0 1px, transparent 1px 3px);
}

.konsole {
  padding: 0 0 16px;
  opacity: 0; translate: 0 5px;
  transition: opacity .25s ease, translate .25s ease;
}
.konsole.da { opacity: 1; translate: 0 0; }
/* T.PaintHeader: Verlauf, Lichtkante auf der obersten Pixelreihe,
   Trennlinie zum Inhalt. */
.konsolenkopf {
  position: relative; display: flex; align-items: center; gap: 9px;
  margin: 0 0 6px; padding: 11px 20px 10px;
  background: linear-gradient(180deg, var(--c-hdr-top), var(--c-hdr-bot));
  border-bottom: 1px solid var(--c-frame-in);
  border-radius: var(--r-win) var(--r-win) 0 0;
  font-family: var(--f-ui); text-transform: uppercase; letter-spacing: .16em;
  font-size: 11px; color: var(--c-bone);
}
.konsolenkopf::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: var(--c-hdr-edge);
}
.statusliste { width: 100%; border-collapse: collapse; margin: 0 20px; width: calc(100% - 40px); }
.statusliste th, .statusliste td { text-align: left; padding: 9px 0; vertical-align: baseline; }
.statusliste tr + tr th, .statusliste tr + tr td { border-top: 1px solid var(--c-recess); }
.statusliste th {
  font-family: var(--f-ui); text-transform: uppercase; letter-spacing: .1em;
  font-size: 11px; font-weight: 500; color: var(--c-bone); white-space: nowrap; padding-right: 16px;
}
/* Klassenwahl mit dem Tabellenelement zusammen, sonst gewinnt die
   Regel ".statusliste td" darueber und der Abstand faellt weg -- der
   Punkt klebte dann an der Adresse. */
.statusliste .adresse {
  font-family: var(--f-zahl); font-variant-numeric: tabular-nums;
  font-size: 13px; color: var(--c-beam);
  white-space: nowrap; padding: 9px 24px 9px 0;
}
.statusliste .zustand {
  font-family: var(--f-zahl); font-variant-numeric: tabular-nums;
  font-size: 13px; color: var(--c-ash); white-space: nowrap;
}
.trenner { color: var(--c-frame-in); margin: 0 7px; }
.konsolenfuss {
  margin: 14px 20px 0; padding-top: 12px; border-top: 1px solid var(--c-recess);
  font-size: 12.5px; color: var(--c-ash2); max-width: 46ch;
}

.punkt { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; margin-right: 8px; }
.punkt.an    { background: var(--c-q-prototype); box-shadow: 0 0 0 3px rgba(79,191,122,.14); animation: atmen 3.2s ease-in-out infinite; }
.punkt.aus   { background: var(--c-imperial);    box-shadow: 0 0 0 3px rgba(224,70,75,.12); }
.punkt.warte { background: var(--c-ash2); }
@keyframes atmen { 0%,100% { opacity: 1 } 50% { opacity: .45 } }
@media (prefers-reduced-motion: reduce) {
  .punkt.an { animation: none }
  .konsole { transition: none }
}

/* ================= MENUEBAND ================= */
.band {
  position: relative;
  display: flex; justify-content: center; gap: 4px; flex-wrap: wrap;
  background: linear-gradient(180deg, var(--c-hdr-top), var(--c-hdr-bot));
  border-bottom: 1px solid var(--c-frame-in); padding: 0 16px;
}
/* Dieselbe Lichtkante wie am Titelbalken im Spiel. */
.band::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: var(--c-hdr-edge);
}
.band a, .band .bald {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--f-ui); text-transform: uppercase; letter-spacing: .15em;
  font-size: 12px; font-weight: 500; text-decoration: none;
  color: var(--c-ash); padding: 13px 22px;
}
.band a:hover { color: var(--c-bone); background: rgba(79,180,221,.08); }
.band .bald { color: var(--c-ash2); cursor: default; }
.band .bald b {
  font-family: var(--f-zahl); font-weight: 400; font-size: 9.5px; letter-spacing: .08em;
  border: 1px solid var(--c-frame-in); border-radius: 2px; padding: 1px 5px; color: var(--c-ash2);
}

/* ================= INHALT ================= */
.inhalt {
  max-width: 1120px; margin: 0 auto; padding: 46px 20px 64px;
  display: grid; grid-template-columns: minmax(0,1.9fr) minmax(250px,.75fr); gap: 58px;
}

/* Beschriftung statt Ueberschrift: klein, gesperrt, mit Haarlinie.
   Ein Rautensymbol vor jedem Abschnitt war Zierrat -- es hat nichts
   ueber den Inhalt gesagt. */
.label {
  display: flex; align-items: center; gap: 14px; margin: 0 0 26px;
  font-family: var(--f-ui); text-transform: uppercase; letter-spacing: .2em;
  font-size: 11px; font-weight: 600; color: var(--c-ash2);
}
.label::after { content: ""; flex: 1; height: 1px; background: var(--c-recess); }
.label.zweit { margin-top: 40px; }

/* Der Log: Datum in der Spalte links, damit die Reihenfolge sichtbar
   ist -- das Datum traegt hier wirklich Information, es ist ein
   Bautagebuch. */
.eintrag {
  display: grid; grid-template-columns: 108px minmax(0,1fr); gap: 24px;
  padding: 0 0 22px; margin: 0 0 22px;
  border-bottom: 1px solid var(--c-recess);
}
.eintrag:last-child { border-bottom: 0; }
.wann {
  margin: 4px 0 0; font-family: var(--f-zahl); font-variant-numeric: tabular-nums;
  font-size: 12.5px; color: var(--c-frame); white-space: nowrap;
}
.was h3 {
  font-family: var(--f-ui); font-weight: 600; font-size: 20px;
  margin: 0 0 7px; color: var(--c-bone);
}
.was p { margin: 0; color: var(--c-ash); max-width: 64ch; }

.rail .klein { font-size: 13.5px; color: var(--c-ash2); max-width: 40ch; }
.befehl {
  font-family: var(--f-zahl); font-variant-numeric: tabular-nums;
  font-size: 13px; color: var(--c-beam);
  background: var(--c-recess); border: 1px solid var(--c-frame-in);
  border-radius: var(--r-sm); padding: 12px 14px; margin: 12px 0;
  overflow-x: auto; line-height: 1.7;
}
.nowrap { white-space: nowrap; }

/* ================= FUSS ================= */
.fuss {
  max-width: 1120px; margin: 0 auto; padding: 24px 20px 48px;
  border-top: 1px solid var(--c-recess); color: var(--c-ash2);
}
.fuss p { margin: 0 0 6px; }
.klein { font-size: 13px; }

a:focus-visible, .knopf:focus-visible { outline: 2px solid var(--c-beam); outline-offset: 3px; }

/* ================= SCHMALE SCHIRME ================= */
@media (max-width: 940px) {
  .held-innen { grid-template-columns: 1fr; gap: 34px; }
  .inhalt { grid-template-columns: 1fr; gap: 34px; }
  .marke-gross { width: 330px; right: -110px; opacity: .05; }
}
@media (max-width: 720px) {
  .tor { position: static; grid-template-columns: auto auto; justify-content: center; gap: 0; }
  .logo { grid-row: 1; grid-column: 1 / -1; justify-self: center; padding: 18px 20px 6px; }
  .ecke.links  { grid-row: 2; grid-column: 1; }
  .ecke.rechts { grid-row: 2; grid-column: 2; }
  .ecke, .ecke.links, .ecke.rechts { clip-path: none; border-bottom: 0; background: transparent; padding: 4px 14px 12px; }
  .held { padding-top: 30px; }
  .eintrag { grid-template-columns: 1fr; gap: 6px; }
  .wann { margin: 0; }

  /* Die Statustabelle passt auf einem Handy nicht in drei Spalten --
     nowrap zwang die ganze Seite in die Waagerechte und schnitt den
     Fliesstext ab. Deshalb hier gestapelt statt Tabelle. */
  .statusliste, .statusliste tbody, .statusliste tr,
  .statusliste th, .statusliste td { display: block; }
  .statusliste tr { padding: 11px 0; }
  .statusliste tr + tr { border-top: 1px solid var(--c-recess); }
  .statusliste tr + tr th, .statusliste tr + tr td { border-top: 0; }
  .statusliste th { padding: 0 0 4px; }
  .statusliste .adresse { padding: 0 0 4px; }
  .statusliste .zustand { white-space: normal; }
}