/* ============================================================
   pz.slapstick.be — Komponenten
   Header, Hero, Kacheln, Footer.

   Reihenfolge folgt dem Dokument von oben nach unten.
   ============================================================ */

/* ============================================================
   Hero — linksbuendig, Typografie traegt die Flaeche
   ============================================================ */

/* Enger gezogen am 14.08.2026 (vorher --s7/--s6, also 96/64).
   Mit dem RAM-Billboard ist der groesste Block der Seite weggefallen;
   die alten Abstaende waren fuer eine laengere Seite gerechnet und
   liessen den Rest auseinanderfallen. */
.hero {
  padding-block: var(--s6) var(--s5);
  border-bottom: 1px solid var(--border);
}

.hero-kicker {
  display: inline-flex;
  /* flex-start statt center: auf schmalen Viewports bricht der
     Text zweizeilig um, und ein mittig zentrierter Punkt saesse
     dann zwischen den Zeilen statt neben der ersten. */
  align-items: flex-start;
  gap: var(--s1);
  margin-bottom: var(--s3);
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.hero-kicker .dot {
  width: 7px;
  height: 7px;
  /* Auf die Mitte der ERSTEN Zeile gesetzt, nicht auf die des
     gesamten Blocks: (line-height 1.5em - 7px) / 2 */
  margin-top: 0.58em;
  background: var(--terminal-green);
  flex-shrink: 0;
}

.hero h1 {
  max-width: 16ch;
  color: var(--text);
}

.hero h1 em {
  font-style: normal;
  color: var(--accent-orange);
}

.hero-lead {
  margin-top: var(--s3);
  max-width: 58ch;
  font-size: var(--step-1);
  color: var(--muted);
}

/* Kennzahlen als Zeile, nicht als Karten-Grid.
   Trennstriche statt Boxen — weniger Elemente, gleiche
   Information. */
.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  margin-top: var(--s5);
  padding: 0;
  list-style: none;
}

.hero-facts li {
  display: flex;
  align-items: baseline;
  /* Bangers-Ziffern haben kaum rechte Seitenlage — mit einem
     ch-basierten Abstand klebt das Label an der Zahl. Fester
     Wert aus dem 8pt-Raster statt schriftabhaengiger Einheit. */
  gap: var(--s2);
  padding-left: var(--s2);
  border-left: 1px solid var(--border);
}

.hero-facts b {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 400;
  color: var(--accent-gold);
  line-height: 1;
}

.hero-facts span {
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Der RAM-Hinweis als Zeile statt als Kasten (14.08.2026).

   Vorher stand darunter ein Billboard ueber die halbe Bildschirmhoehe.
   Es war das Erste nach dem Hero und damit das Erste, was jemand ueber
   diesen Server erfuhr — eine Java-Einstellung. Der Text ist unveraendert
   wichtig, nur nicht an dieser Stelle: Er sitzt jetzt im Overlay, das
   sowohl dieser Knopf als auch das Warnzeichen im Kopf oeffnen. */
.hero-ram {
  margin-top: var(--s4);
  max-width: 58ch;
  font-size: var(--step--1);
  color: var(--muted);
}

/* Ein Knopf, der wie Fliesstext liest, aber wie ein Schalter reagiert.
   Kein <a href="#">: Es fuehrt nirgendwo hin, es oeffnet etwas — das
   gehoert einem <button>, sonst versprechen wir der Tastatur und dem
   Screenreader einen Seitenwechsel, den es nicht gibt. */
.linkish {
  /* Kein `display: inline` hier — Chrome setzt es bei <button> auf
     inline-block zurueck (im CSSOM steht die Regel, computed bleibt
     inline-block). Der Knopf belegt dadurch die volle Zeilenbreite.
     Deshalb steht der Satzpunkt IM Knopf und nicht dahinter, sonst
     rutscht er allein in die naechste Zeile. */
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--accent-orange);
  text-align: left;
  cursor: pointer;
  /* Gepunktet im Ruhezustand, durchgezogen bei Beruehrung: der
     Unterschied zwischen "hier steht was" und "hier passiert was".
     text-decoration statt border-bottom, damit der Umbruch ueber
     mehrere Zeilen jede Zeile mitnimmt. */
  text-decoration: underline dotted;
  text-underline-offset: 0.22em;
  transition: color 140ms ease, text-decoration-color 140ms ease;
}

.linkish::before {
  content: "▸ ";
  color: var(--accent-gold);
}

.linkish:hover,
.linkish:focus-visible {
  color: var(--accent-gold);
  text-decoration: underline solid;
}

/* Sichtbar und ohne Layoutsprung: outline statt border. */
.linkish:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .linkish { transition: none; }
}

/* ============================================================
   Bereiche — asymmetrisches Raster

   Vier Kacheln, aber nicht vier gleiche. Das 12-Spalten-
   Raster laesst sie 7/5 und 5/7 laufen, damit keine Reihe
   wie die vorige aussieht.
   ============================================================ */

/* --s5 statt --s6 (14.08.2026): Zwei benachbarte Sektionen addieren ihr
   Innenabstand, aus 64 wurden also 128px Luft zwischen zwei Ueberschriften.
   Jetzt 96px — noch deutlich getrennt, aber als eine Seite lesbar.
   `main.css` laedt nur die Startseite, die generierten Seiten sind davon
   nicht betroffen. */
.section {
  padding-block: var(--s5);
}

.section-head {
  margin-bottom: var(--s4);
}

.section-head h2::before {
  content: "// ";
  color: var(--accent-orange);
}

.section-head p {
  margin-top: var(--s1);
  color: var(--muted);
}

.tiles {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--s2);
}

.tile {
  grid-column: span 12;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s3);
  background: var(--bg-board);
  border: 1px solid var(--border);
}

@media (min-width: 720px) {
  .tile:nth-child(4n + 1) { grid-column: span 7; }
  .tile:nth-child(4n + 2) { grid-column: span 5; }
  .tile:nth-child(4n + 3) { grid-column: span 5; }
  .tile:nth-child(4n + 4) { grid-column: span 7; }
}

/* Verlinkte Kachel: die ganze Flaeche ist das Ziel */
a.tile {
  text-decoration: none;
  color: inherit;
  background: var(--bg-elevated);
  transition:
    border-color var(--t-fast) var(--ease),
    background   var(--t-fast) var(--ease);
}

a.tile:hover {
  border-color: var(--accent-orange);
  background: var(--accent-orange-08);
  color: inherit;
}

a.tile:hover .tile-go { translate: 4px 0; }

.tile-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s2);
}

.tile h3 {
  color: var(--text);
}

a.tile:hover h3 { color: var(--accent-orange); }

.tile p {
  margin: 0;
  color: var(--muted);
  font-size: var(--step--1);
  line-height: 1.6;
}

.tile-go {
  align-self: flex-start;
  margin-top: auto;
  padding-top: var(--s1);
  color: var(--accent-orange);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: translate var(--t-base) var(--ease);
}

/* Belegzeile am Fuss einer Kachel: der Wert, auf dem die Aussage
   darueber beruht. Gleiche Rolle wie .side__mod auf der Server-Seite,
   aber mit --muted statt deren #4a4a46 — der Rohwert liegt unter dem
   AA-Schwellwert, --muted erreicht 6.4:1. */
.tile-fact {
  margin: auto 0 0;
  padding-top: var(--s1);
  border-top: 1px dashed var(--border);
  color: var(--muted);
  font-size: var(--step--1);
}

/* Vanilla-Kachel: was Build 42 selbst mitbringt, nicht ein Mod.
   Goldene Oberkante wie .side--vanilla drueben, damit die Zuordnung
   ueber beide Seiten hinweg dieselbe bleibt. */
.tile--vanilla { border-top: 1px solid var(--accent-gold); }
.tile--vanilla h3 { color: var(--accent-gold); }

/* Volle Breite. Das Kachelraster laeuft in Vierergruppen (7|5, 5|7); eine
   fuenfte Kachel stuende sonst allein in einer halbleeren Zeile. Statt sie
   dort haengen zu lassen, nimmt sie die ganze Breite — was inhaltlich
   passt, wenn es das Langzeitziel ist, ueber dem alles andere steht.

   **Nicht loeschen, auch wenn die Suche nur Kommentare findet.** Seit dem
   14.08.2026 hat der erste Kachelblock sechs Eintraege, das Raster geht
   damit auf (7|5, 5|7, 7|5) und keine der drei Startseiten setzt die
   Klasse noch. `v2/index.html` steht aber weiter auf fuenf Kacheln und
   braucht sie — v2 laedt genau diese Datei, nur mit eigener Palette. */
@media (min-width: 720px) {
  .tile--wide { grid-column: span 12 !important; }
}

/* ---------- Polaroids ------------------------------------- */

/* Bis zum 07.08.2026 trug die Startseite kein einziges Bild. Die drei
   Screenshots liegen selbst gehostet unter assets/screenshots/ — kein
   fremder Host, kein Nachladen von Steam.

   Der Polaroid-Effekt entsteht aus dem ASYMMETRISCHEN Padding: ringsum
   8px, unten mehr, weil dort die Bildunterschrift sitzt — wie auf dem
   Steg eines echten Polaroids beschriftet. Dieselbe Bauweise wie .snap
   und .sys__shot auf der Server-Seite.

   Kein Weiss: Ein echtes Polaroid ist weiss, aber keine Flaeche darf
   heller sein als bg-elevated. Die Anmutung traegt ueber Form, Winkel
   und harten Schatten, nicht ueber Helligkeit.

   Die Winkel haengen an nth-child, sind also pro Position fest. Zufall
   waere hier falsch: Das Layout wuerde bei jedem Neuladen anders sitzen. */
.shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s3);
}

.shot {
  margin: 0;
  padding: 8px 8px 0;
  background: #141414;
  border: 1px solid var(--border);
  box-shadow: 3px 4px 0 rgba(0, 0, 0, 0.55);
  transform: rotate(-0.9deg);
  transition:
    transform    var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    box-shadow   var(--t-fast) var(--ease);
}

.shot:nth-child(even) { transform: rotate(0.8deg); }
.shot:nth-child(3n)   { transform: rotate(-0.4deg); }

/* width/height stehen im Markup, damit der Browser den Platz vor dem
   Laden kennt und die Seite beim Nachladen nicht springt. */
.shot img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--bg-deepest);
}

.shot figcaption {
  padding: 9px 2px 11px;
  color: var(--muted);
  font-size: var(--step--1);
  line-height: 1.4;
}

@media (prefers-reduced-motion: no-preference) {
  .shot:hover { transform: rotate(0) translateY(-3px); }
}

.shot:hover { border-color: var(--accent-orange); }

/* ---------- Status-Marker --------------------------------- */

.badge {
  flex-shrink: 0;
  padding: 2px var(--s1);
  border: 1px solid var(--border);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.badge[data-state="live"] {
  border-color: var(--terminal-green);
  color: var(--terminal-green);
}

.badge[data-state="wip"] {
  border-color: var(--accent-gold);
  color: var(--accent-gold);
}

/* ---------- Plakatwand: der RAM-Hinweis -------------------- */
/*
   Neonroehre auf einer Tafel, quer durch die Roehre ein Riss.

   KEINE ANIMATION, und das ist eine Entscheidung, keine Auslassung:
   Flackern faellt unter WCAG 2.3.1 (Photosensibilitaet). Der Riss erzaehlt
   dasselbe -- hier ist was kaputt -- und kostet niemanden etwas. Das Glimmen
   der Roehre ist ein statischer text-shadow, kein Puls.
*/

.billboard-wrap {
  position: relative;
  margin: var(--s6) 0;
}

/* Steht das Billboard als erstes in seiner Sektion, addiert sich sein
   Aussenabstand auf den Innenabstand der Sektion — und darueber liegt
   schon der untere Abstand der Hero. Drei Werte hintereinander:
   `.hero` 64px unten, `.section` 64px oben, `.billboard-wrap` 64px oben
   = 192px Leerraum unter der Trennlinie. Der obere Wert faellt deshalb
   weg, der Abstand kommt von der Sektion. */
.section > .billboard-wrap:first-child {
  margin-top: 0;
}

/* Und die Sektion selbst darf hier schmaler ansetzen: ueber ihr steht
   keine Ueberschrift, sondern die Trennlinie der Hero. Betrifft nur
   den RAM-Hinweis, nicht das Sektionsraster der uebrigen Seite. */
#ram {
  padding-top: var(--s4);
}

.billboard {
  position: relative;
  overflow: hidden;
  padding: var(--s5) var(--s4);
  background: var(--bg-board);
  border: 2px solid var(--border);
  box-shadow: var(--shadow-hard), inset 0 0 80px rgba(0, 0, 0, .8);
}

/* Die Streben, an denen so ein Ding haengt. */
.billboard::before,
.billboard::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border);
}
.billboard::before { left: 8%; }
.billboard::after  { right: 8%; }

.billboard-inner { position: relative; z-index: 2; }

.billboard-kicker {
  font-size: var(--step--1);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}


/* Die Szene sitzt in der freien rechten Haelfte, HINTER dem Text und mit
   festem Seitenverhaeltnis. Zwei Zwischenstaende, beide im Browser verworfen:
   ueber inset: 0 gestreckt wurde ein Riss zu zufaelligen Diagonalen, und
   mittig platziert lag er quer ueber der Schrift. */
.billboard-scene {
  position: absolute;
  z-index: 1;                 /* HINTER den Text, nicht darueber */
  right: 0;
  bottom: 0;
  width: clamp(260px, 38%, 480px);
  aspect-ratio: 46 / 22;
  opacity: .9;
  pointer-events: none;
}

/* Unter 900px ist keine freie Haelfte mehr da -- dann waere der Riss nur
   noch Krims hinter dem Text. */
@media (max-width: 900px) {
  .billboard-scene { display: none; }
}

/* Der Comic-Pfeil zeigt von aussen auf die Tafel. */
/* ---------- Ausrufezeichen, Schalter, Pfeil ---------------- */

.billboard-head {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
}