/* ════════════════════════════════════════════════════════════════════════════════════════
   impressum.css — das Lesebild des EINEN Impressums der Terminal Tribune (#1066).

   ⚠ HIER STEHT KEINE FARBE. Die Palette ist das Hologlobe-Schema INSTRUMENT und liegt in
     css/tuer.css (Herkunft sites/hologlobe/v1/js/themes.js:159-190). Diese Datei wird NACH
     tuer.css geladen und benutzt nur deren Variablen. Eine zweite Farbtabelle wäre eine
     zweite Wahrheit — CHR 15.09.: „modern, Hologlobe-Farbschema".

   ⚠ KEINE KENNUNGEN DER TÜR. tuer.css bindet Höhe und Raster an #tuer, #dach, #blatt, #fuss
     (`#tuer { height: 100svh }`). Eine lange Textseite, die eine davon trägt, wird auf einen
     Schirm gezwungen. Hier heißt deshalb alles `.imp-*`.

   ⚠ WAS WIEDERVERWENDET WIRD, OHNE KOPIE: `.schalter` (Sprachwahl), `.haus`/`.hkopf`/`.bew`/
     `.nr`/`.adr` und die Bandfarben `.f-*` (Häuserliste), `:focus-visible`, `.bl`.
   ════════════════════════════════════════════════════════════════════════════════════════ */

:root {
  /* Lesetext: System-Schrift ohne Webfont. Die Tür fährt System-Monospace (konfig.js des
     Hologlobe: „keine fremden Assets"); für fortlaufenden Rechtstext trägt eine
     Grotesk besser. Etiketten, Adressen und Schlüssel bleiben in --mono. */
  --lesen: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

/* ── Die Sprache ────────────────────────────────────────────────────────────────────────
   riegel.js setzt <html data-sprache>. Deutsch ist die Vorgabe im Markup, also steht ohne
   JavaScript die vollständige deutsche Fassung da. Alles, was nicht Deutsch ist (en, und
   es als nächstliegende), liest die englische Fassung. */
html[data-sprache="de"] .sprache-en,
html:not([data-sprache="de"]) .sprache-de { display: none; }
.imp-nur-hinweis:empty { display: none; }

/* ── Der Grund ──────────────────────────────────────────────────────────────────────────
   ⚠ EINFARBIG, UND DAS IST KEIN VERZICHT. Hier lag bis zum Hologlobe ein Schimmer und ein
     feines Gitter. Die WebGL-Leinwand ist mit Bloom UNDURCHSICHTIG (OutputPass schreibt
     Alpha 1, siehe tuer.mjs) — sie malt den Seitengrund nach (`umkehrung`), aber nur EINE
     Farbe. Jedes Muster im Grund endete an ihrem Rand und zeichnete einen Kasten. */
body.impressum {
  font: 15px/1.68 var(--lesen);
  color: var(--schrift);
  background: var(--grund);
  -webkit-text-size-adjust: 100%;
}

/* ── Der Hologlobe ──────────────────────────────────────────────────────────────────────
   Leinwand und Standbild liegen deckungsgleich in der Bühne; die Bühne hat die Grösse. */
.imp-globus {
  position: relative;
  width: 100%;
  height: clamp(240px, 42vh, 440px);
  margin: 18px 0 0;
}
.imp-globus canvas,
.imp-globus img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.imp-kopf { margin-top: 4px; }

.imp {
  width: min(100% - 32px, 78ch);
  margin: 0 auto;
  padding: 22px 0 56px;
}

/* ── Kopf ───────────────────────────────────────────────────────────────────────────── */
.imp-leiste {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  font: 11px/1.4 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--schrift-d);
}
.imp-leiste a:hover { color: var(--schrift); }
.imp-sprache { margin: 0; display: flex; align-items: center; gap: 8px; }

.imp-kopf {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 6px;
  margin: 34px 0 10px;
}

.imp-marke {
  margin: 8px 0 0;
  font: 11px/1.4 var(--mono);
  letter-spacing: .34em;
  color: var(--schrift-d);
}

.imp-titel {
  margin: 0;
  font-weight: 300;
  font-size: clamp(34px, 7vw, 56px);
  line-height: 1.1;
  letter-spacing: .01em;
  color: var(--schrift);
}
.imp-titel::after {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  margin: 16px auto 0;
  background: var(--gold);
}
.imp-lead {
  margin: 14px auto 0;
  max-width: 56ch;
  color: var(--schrift-d);
  text-align: center;
}

/* ── Abschnitte ─────────────────────────────────────────────────────────────────────── */
.imp-abschnitt {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--hud-rand);
}
.imp-h {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 14px;
  font: 11px/1.45 var(--mono);
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
}
.imp-nr {
  color: var(--gitter);
  opacity: .7;
  font-variant-numeric: tabular-nums;
}
.imp-h3 {
  margin: 20px 0 6px;
  font: 11px/1.45 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--schrift-d);
}

.imp-text p { margin: 0 0 .85em; }
.imp-text p:last-child { margin-bottom: 0; }
.imp-text strong { font-weight: 600; color: var(--schrift); }
.imp-text a {
  color: var(--gitter);
  border-bottom: 1px solid rgba(127, 216, 255, .32);
}
.imp-text a:hover { color: var(--schrift); border-bottom-color: var(--schrift); }
.imp-text code {
  font: 12.5px/1.4 var(--mono);
  color: var(--schrift);
  background: rgba(127, 216, 255, .07);
  padding: 1px 5px;
  white-space: nowrap;
}
.imp-text ul { margin: 0 0 .85em; padding-left: 1.1em; }
.imp-text li { margin: 0 0 .35em; }
.imp-text li::marker { color: var(--gitter); }

/* ── Die Angaben: Etikett links, Inhalt rechts ──────────────────────────────────────── */
.imp-angaben { margin: 0; display: grid; gap: 10px; }
.imp-angaben > div {
  display: grid;
  grid-template-columns: 16ch minmax(0, 1fr);
  column-gap: 18px;
  align-items: baseline;
}
.imp-angaben dt {
  font: 10.5px/1.5 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--schrift-d);
}
.imp-angaben dd { margin: 0; }
.imp-name { font-size: 18px; letter-spacing: .01em; }

/* ── Die Zielklammer — ein Kasten wie im Instrument, vier Ecken statt Rahmen ───────── */
.imp-klammer {
  position: relative;
  margin: 16px 0 0;
  padding: 14px 18px;
  background: var(--hud-bg);
}
.imp-klammer::before,
.imp-klammer::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border: 1px solid var(--gitter);
  opacity: .7;
}
.imp-klammer::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.imp-klammer::after  { right: 0; bottom: 0; border-left: 0; border-top: 0; }

/* ── Die Häuser — Markup und Farben der Tür, nur in Lesegröße ───────────────────────── */
.imp-haeuser { display: grid; gap: 12px; margin-top: 16px; }
.imp-haeuser .hkopf b { font-size: 13px; }
.imp-haeuser .nr { font-size: 15px; }
.imp-haeuser .bew b { font-size: 12px; }
.imp-haeuser .adr { font-size: 13px; opacity: 1; white-space: normal; overflow-wrap: anywhere; }
/* ⚠ tuer.css setzt `.bew.selbst .adr` (drei Klassen) mit vmin-Maß — auf dem Telefon 9 px. Ohne die
   gleich starke Regel hier standen bei ① und ④ die einzigen Adressen ihres Hauses winzig da
   (Sichtprobe 15.09., 390 px). */
.imp-haeuser .bew.selbst .adr { font-size: 13px; }
.imp-haeuser a.bew:hover .adr, .imp-haeuser a.bew:focus-visible .adr { color: var(--farbe); }

/* ── Datenschutz je Haus: eine Karte je Haus, auf dem Telefon untereinander ────────── */
.imp-karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 12px;
  margin-top: 14px;
}
.imp-karte {
  border-left: 2px solid var(--farbe, var(--gitter));
  background: var(--hud-bg);
  padding: 12px 14px 12px 16px;
}
.imp-karte h4 {
  margin: 0 0 8px;
  font: 11px/1.4 var(--mono);
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--farbe, var(--gitter));
}
.imp-karte dl { margin: 0; display: grid; gap: 6px; }
.imp-karte dt {
  font: 10px/1.4 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--schrift-d);
}
.imp-karte dd { margin: 0; font-size: 14px; line-height: 1.55; }

/* ── Fuß ────────────────────────────────────────────────────────────────────────────── */
.imp-fuss {
  margin-top: 44px;
  padding-top: 16px;
  border-top: 1px solid var(--hud-rand);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 18px;
  font: 11px/1.5 var(--mono);
  letter-spacing: .1em;
  color: var(--schrift-d);
}
.imp-fuss p { margin: 0; }
.imp-fuss a:hover { color: var(--schrift); }
.imp-stand { font-variant-numeric: tabular-nums; }

/* ══ TELEFON ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 560px) {
  body.impressum { font-size: 15.5px; }
  .imp-kopf { margin-top: 4px; }
  .imp-globus { height: clamp(220px, 34vh, 320px); }
  .imp-angaben > div { grid-template-columns: 1fr; row-gap: 2px; }
  .imp-text code { white-space: normal; overflow-wrap: anywhere; }
}
@media (pointer: coarse) {
  .imp-leiste a { min-height: 34px; display: inline-flex; align-items: center; }
}

/* ══ RUHE ═══════════════════════════════════════════════════════════════════════════════
   Bei `prefers-reduced-motion` baut impressum-globus.mjs gar keine Leinwand, sondern setzt
   das Standbild ein — dieselbe Regel wie auf der Tür (kugel.mjs: ruhigGewuenscht). */

/* ══ DRUCK — ein Impressum wird auch ausgedruckt ════════════════════════════════════════ */
@media print {
  body.impressum { background: #fff; color: #000; font-size: 11pt; }
  .imp { width: auto; padding: 0; }
  .imp-leiste, .imp-globus { display: none; }
  .imp-titel, .imp-text strong, .imp-name { color: #000; }
  .imp-lead, .imp-marke, .imp-angaben dt, .imp-karte dt, .imp-h3, .imp-fuss { color: #444; }
  .imp-h, .imp-karte h4 { color: #000; }
  .imp-text a { color: #000; border-bottom: 0; }
  .imp-klammer, .imp-karte { background: none; border-color: #999; }
  .imp-abschnitt { break-inside: avoid-page; border-top-color: #bbb; }
}