/* Studioseite Brackwater.
   Layout: eine Straße von oben. Die Fahrbahn ist der Kopf, der Gehweg der Seitengrund,
   Inhalte sitzen auf Tafeln wie die Spielanzeige: flache Farben, dicke dunkle Konturen.
   Farben aus den Zielbildern und tools/blender/mockups/beutezug (gemeinsam.py, hud.ps1).
   Keine fremden Schriften: Bahnschrift ist die Schrift der Spielanzeige und unter Windows vorhanden,
   sonst greifen ähnliche Systemschriften. */

:root {
  --tinte: #11151a;        /* Konturen, Text auf hell (Spielanzeige INK) */
  --tafel: #1a1f25;        /* Tafeln der Spielanzeige */
  --tafel-hell: #262c34;
  --papier: #f6f1e4;       /* Text auf dunkel (Spielanzeige TXT) */
  --matt: #aab4c0;         /* Nebentext auf dunkel (Spielanzeige DIM) */
  --gelb: #ffd24a;         /* Marker und Aufträge (Spielanzeige YEL) */
  --rot: #e2503f;          /* Gefahr (Spielanzeige RED) */
  --asphalt: #575d65;      /* Fahrbahn */
  --asphalt-tief: #3e434a;
  --bordstein: #cfc9b8;
  --gehweg: #e9e5da;       /* Seitengrund */
  --fuge: #dedacd;         /* Fugen der Gehwegplatten */
  --schatten: #c9c3b2;
  --mauer: #f1e2bf;        /* Hauswand */
  --dach: #d9583a;         /* Dachziegel */
  --tuer: #2c6c68;         /* Haustür, für Text abgedunkelt */
  --text-matt: #4a525b;    /* Nebentext auf hell */

  --schrift-anzeige: Bahnschrift, "DIN Alternate", "DIN Condensed", "Roboto Condensed", "Arial Narrow", sans-serif;
  --schrift-text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --kontur: 3px solid var(--tinte);
  --rund: 14px;
  --breite: 1120px;
  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--gehweg);
  background-image:
    linear-gradient(var(--fuge) 2px, transparent 2px),
    linear-gradient(90deg, var(--fuge) 2px, transparent 2px);
  background-size: 96px 96px;
  color: var(--tinte);
  font: 400 1.0625rem/1.6 var(--schrift-text);
  -webkit-text-size-adjust: 100%;
}

[hidden] {
  display: none !important;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--tuer);
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--gelb);
  outline-offset: 3px;
  border-radius: 6px;
}

h1,
h2,
h3 {
  font-family: var(--schrift-anzeige);
  font-weight: 700;
  text-wrap: balance;
  margin: 0;
}

p {
  margin: 0;
}

.rahmen {
  width: 100%;
  max-width: calc(var(--breite) + 64px);
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

@media (min-width: 720px) {
  .rahmen {
    padding-left: max(32px, env(safe-area-inset-left, 0px));
    padding-right: max(32px, env(safe-area-inset-right, 0px));
  }
}

.nur-vorleser {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ------------------------------------------------------------ Marken, Chips, Knöpfe */

.marke {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  background: var(--tafel);
  color: var(--gelb);
  border: 2px solid var(--tinte);
  border-radius: 8px;
  padding: 0.2rem 0.6rem;
  font: 700 0.78rem/1.3 var(--schrift-anzeige);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.raute {
  font-size: 0.8em;
}

.chip {
  display: inline-block;
  border: 2px solid var(--tinte);
  border-radius: 999px;
  padding: 0.05rem 0.55rem;
  font: 700 0.72rem/1.4 var(--schrift-anzeige);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}

.chip--vorlaeufig {
  background: var(--mauer);
  color: var(--tinte);
}

.chip--bald {
  background: var(--rot);
  color: var(--papier);
}

.knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--gelb);
  color: var(--tinte);
  border: var(--kontur);
  border-radius: 12px;
  padding: 0.7rem 1.1rem;
  font: 700 1.05rem/1.2 var(--schrift-anzeige);
  letter-spacing: 0.02em;
  text-decoration: none;
  box-shadow: 0 4px 0 var(--tinte);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.knopf:hover {
  transform: translateY(1px);
  box-shadow: 0 3px 0 var(--tinte);
}

.knopf--klein {
  font-size: 0.92rem;
  padding: 0.45rem 0.8rem;
  border-radius: 10px;
  box-shadow: 0 3px 0 var(--tinte);
}

.knopf--zweit {
  background: var(--tafel);
  color: var(--papier);
}

.knopf[aria-disabled="true"],
.knopf:disabled {
  background: var(--bordstein);
  color: var(--tinte);
  cursor: not-allowed;
}

.knopf[aria-disabled="true"]:hover,
.knopf:disabled:hover {
  transform: none;
  box-shadow: 0 4px 0 var(--tinte);
}

button.knopf {
  cursor: pointer;
  text-align: left;
}

.knopf svg {
  flex: none;
}

/* Lücken, die Kai vor der Veröffentlichung füllen muss */
.luecke {
  display: inline;
  background: repeating-linear-gradient(-45deg, rgba(226, 80, 63, 0.14) 0 8px, transparent 8px 16px);
  border: 2px dashed var(--rot);
  border-radius: 6px;
  padding: 0.05em 0.45em;
  font-weight: 600;
  color: var(--tinte);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.luecke::before {
  content: "Lücke · ";
  color: var(--rot);
  font-weight: 700;
}

/* ------------------------------------------------------------ Kopf: die Fahrbahn */

.kopf {
  background: var(--asphalt);
  color: var(--papier);
}

.leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-block: 18px;
}

.studio-zeichen {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--papier);
  text-decoration: none;
  font: 700 1.35rem/1 var(--schrift-anzeige);
  letter-spacing: 0.02em;
}

.studio-zeichen img {
  width: 38px;
  height: 38px;
}

.navi {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  font: 600 0.9rem/1.2 var(--schrift-anzeige);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.navi a {
  color: var(--papier);
  text-decoration: none;
  padding-block: 6px;
  border-bottom: 3px solid transparent;
}

.navi a:hover {
  border-bottom-color: var(--gelb);
}

.held {
  display: grid;
  gap: 32px 48px;
  align-items: center;
  padding-block: 24px 44px;
}

@media (min-width: 900px) {
  .held {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    padding-block: 28px 56px;
  }
}

.held__text {
  display: grid;
  gap: 20px;
  justify-items: start;
  min-width: 0;
}

.studio-name {
  font-size: clamp(3.4rem, 11vw, 6.4rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  color: var(--mauer);
  -webkit-text-stroke: 10px var(--tinte);
  paint-order: stroke fill;
  text-shadow: 0 7px 0 var(--tinte);
  overflow-wrap: anywhere;
}

.held__satz {
  font-size: clamp(1.15rem, 2.4vw, 1.35rem);
  line-height: 1.45;
  max-width: 30ch;
}

.auftrag {
  display: grid;
  gap: 10px;
  justify-items: start;
  background: var(--tafel);
  border: var(--kontur);
  border-radius: var(--rund);
  padding: 16px 18px 18px;
  max-width: 440px;
  width: 100%;
}

.auftrag__kopf {
  display: flex;
  align-items: center;
  gap: 0.45em;
  color: var(--gelb);
  font: 700 0.8rem/1.2 var(--schrift-anzeige);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.auftrag__ziel {
  font: 700 1.2rem/1.3 var(--schrift-anzeige);
  color: var(--papier);
}

.auftrag__hinweis {
  color: var(--matt);
  font-size: 0.9rem;
  line-height: 1.5;
}

.held__discord {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  color: var(--matt);
  font-size: 0.95rem;
}

/* Fahrbahnmarkierung und Bordstein als unterer Rand des Kopfes */
.spur {
  height: 8px;
  background: repeating-linear-gradient(90deg, var(--papier) 0 64px, transparent 64px 128px);
  opacity: 0.9;
}

.kopf__unten {
  padding-block: 18px;
}

.bordstein {
  height: 16px;
  background: var(--bordstein);
  border-top: 4px solid var(--tinte);
  border-bottom: 3px solid var(--tinte);
}

/* ------------------------------------------------------------ Zielbilder */

.zielbild {
  margin: 0;
  display: grid;
  gap: 10px;
  min-width: 0;
}

.zielbild__rahmen {
  border: var(--kontur);
  border-radius: var(--rund);
  overflow: hidden;
  background: var(--tafel);
  box-shadow: 6px 6px 0 var(--schatten);
}

.kopf .zielbild__rahmen {
  box-shadow: 6px 6px 0 var(--asphalt-tief);
}

.zielbild__band {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  padding: 7px 12px;
  border-bottom: var(--kontur);
  background: var(--gelb);
  color: var(--tinte);
  font: 700 0.8rem/1.3 var(--schrift-anzeige);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.zielbild__band span:last-child {
  text-transform: none;
  letter-spacing: 0.01em;
  font-weight: 600;
  font-size: 0.88rem;
}

.zielbild img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.zielbild figcaption {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-matt);
}

.kopf .zielbild figcaption {
  color: var(--matt);
}

.zielbild figcaption b {
  font-family: var(--schrift-anzeige);
  color: var(--tinte);
}

.kopf .zielbild figcaption b {
  color: var(--papier);
}

/* ------------------------------------------------------------ Abschnitte auf dem Gehweg */

.abschnitt {
  padding-block: 64px 8px;
}

.abschnitt__kopf {
  display: grid;
  gap: 12px;
  justify-items: start;
  margin-bottom: 24px;
}

.abschnitt h2 {
  font-size: clamp(2.1rem, 5vw, 3rem);
  line-height: 1.05;
}

.lesetext {
  display: grid;
  gap: 14px;
  max-width: 64ch;
}

.lesetext--gross {
  font-size: 1.15rem;
}

.spiel {
  display: grid;
  gap: 28px;
}

.merkmale {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px 32px;
}

@media (min-width: 760px) {
  .merkmale {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.merkmale li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.merkmale li::before {
  content: "";
  width: 14px;
  height: 14px;
  margin-top: 0.42em;
  background: var(--dach);
  border: 2px solid var(--tinte);
  transform: rotate(45deg);
}

.stand {
  font-size: 0.95rem;
  color: var(--text-matt);
}

.stand b {
  color: var(--tinte);
}

.hinweis {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  background: var(--gelb);
  border: var(--kontur);
  border-radius: var(--rund);
  padding: 14px 18px;
  max-width: 820px;
}

.hinweis img {
  width: 40px;
  height: 40px;
}

.hinweis p {
  font-size: 0.98rem;
  line-height: 1.5;
}

.galerie {
  display: grid;
  gap: 28px;
}

@media (min-width: 760px) {
  .galerie {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ------------------------------------------------------------ Discord */

.discord {
  display: grid;
  gap: 28px;
  align-items: start;
}

@media (min-width: 900px) {
  .discord {
    grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
    gap: 48px;
  }
}

.discord__vorschau {
  display: grid;
  gap: 12px;
  justify-items: start;
  background: var(--tafel);
  color: var(--papier);
  border: var(--kontur);
  border-radius: var(--rund);
  padding: 18px;
  font-size: 0.95rem;
  line-height: 1.5;
  min-width: 0;
}

.discord__vorschau a {
  color: var(--gelb);
}

.discord__rahmen {
  width: 100%;
  height: 460px;
  border: 2px solid var(--tinte);
  border-radius: 10px;
  background: var(--tafel-hell);
}

/* ------------------------------------------------------------ Presse: eine Tafel wie das Inventar */

.tafel {
  background: var(--tafel);
  color: var(--papier);
  border: var(--kontur);
  border-radius: 18px;
  padding: 22px 18px;
  display: grid;
  gap: 28px;
}

@media (min-width: 900px) {
  .tafel {
    padding: 30px 32px;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 40px;
  }
}

.tafel h3 {
  color: var(--gelb);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.tafel .luecke {
  color: var(--papier);
}

.eckdaten {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr);
  gap: 0;
}

.eckdaten dt,
.eckdaten dd {
  margin: 0;
  padding-block: 9px;
  border-top: 1px solid var(--tafel-hell);
}

.eckdaten dt {
  color: var(--matt);
  font: 600 0.8rem/1.6 var(--schrift-anzeige);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-right: 12px;
}

.eckdaten dd {
  font-size: 0.98rem;
  line-height: 1.5;
  min-width: 0;
}

@media (max-width: 460px) {
  .eckdaten {
    grid-template-columns: minmax(0, 6.8rem) minmax(0, 1fr);
  }

  .eckdaten dt {
    font-size: 0.72rem;
  }
}

@media (max-width: 340px) {
  .eckdaten {
    grid-template-columns: minmax(0, 1fr);
  }

  .eckdaten dd {
    border-top: 0;
    padding-top: 0;
  }
}

.pressebilder {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.pressebild {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  background: var(--tafel-hell);
  border: 2px solid var(--tinte);
  border-radius: 12px;
  padding: 10px;
}

.pressebild img {
  width: 128px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 2px solid var(--tinte);
  border-radius: 8px;
}

.pressebild__text {
  display: grid;
  gap: 6px;
  justify-items: start;
  min-width: 0;
}

.pressebild__name {
  font: 700 1rem/1.3 var(--schrift-anzeige);
}

.pressebild__daten {
  color: var(--matt);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 420px) {
  .pressebild {
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .pressebild img {
    width: 96px;
  }
}

.presse__hinweis {
  margin-top: 14px;
  color: var(--matt);
  font-size: 0.9rem;
}

/* ------------------------------------------------------------ Kontakt und Fuß */

.kontakt {
  padding-bottom: 72px;
}

.kontakt__zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: baseline;
  font-size: 1.1rem;
}

.kontakt__zeile b {
  font-family: var(--schrift-anzeige);
}

.fuss {
  background: var(--asphalt-tief);
  color: var(--papier);
  border-top: 4px solid var(--tinte);
}

.fuss__innen {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  justify-content: space-between;
  align-items: center;
  padding-block: 24px 28px;
  font-size: 0.9rem;
}

.fuss a {
  color: var(--papier);
}

.fuss__links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  font-family: var(--schrift-anzeige);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.fuss__klein {
  color: var(--matt);
  max-width: 60ch;
}

/* ------------------------------------------------------------ Rechtstexte (Impressum, Datenschutz) */

.recht {
  padding-block: 48px 72px;
}

.recht__blatt {
  background: var(--papier);
  border: var(--kontur);
  border-radius: 18px;
  padding: 24px 18px 30px;
  max-width: 820px;
  display: grid;
  gap: 18px;
  box-shadow: 6px 6px 0 var(--schatten);
}

@media (min-width: 720px) {
  .recht__blatt {
    padding: 36px 40px 40px;
  }
}

.recht__blatt h1 {
  font-size: clamp(2.1rem, 5vw, 2.8rem);
  line-height: 1.05;
}

.recht__blatt h2 {
  font-size: 1.3rem;
  line-height: 1.25;
  margin-top: 10px;
}

.recht__blatt p,
.recht__blatt li {
  max-width: 68ch;
}

.recht__blatt ul {
  margin: 0;
  padding-left: 1.2em;
  display: grid;
  gap: 6px;
}

.recht__warnung {
  background: var(--gelb);
  border: var(--kontur);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 0.95rem;
}

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

  .knopf {
    transition: none;
  }
}