/* TCAWRestRemoteControl - Projektseite
   Keine Abhaengigkeiten, keine Webfonts, kein Nachladen von aussen. */

:root {
  --blau: #1a74c3;
  --blau-hell: #7fd0ff;
  --blau-dunkel: #0f4677;
  --text: #1c2430;
  --text-leise: #5b6673;
  --linie: #dde3ea;
  --flaeche: #f5f7fa;
  --weiss: #ffffff;
  --warn: #fdf6e8;
  --warn-linie: #e0b96a;
  --warn-text: #7a5410;
  --breite: 1020px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  background: var(--weiss);
}

.huelle { max-width: var(--breite); margin: 0 auto; padding: 0 24px; }

code {
  font-family: "Cascadia Mono", Consolas, "Courier New", monospace;
  font-size: 0.9em;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 4px;
  padding: 1px 5px;
}

pre {
  background: #0f1b26;
  color: #d8e4ee;
  border-radius: 8px;
  padding: 18px 20px;
  overflow-x: auto;
  font-family: "Cascadia Mono", Consolas, "Courier New", monospace;
  font-size: 0.87rem;
  line-height: 1.6;
}

pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }
pre .komm { color: #7f97ab; }
pre .lit { color: #9fd39f; }
pre .schl { color: #7fd0ff; }

/* --- Kopf --------------------------------------------------------------- */

header {
  background: linear-gradient(155deg, #0b3556, var(--blau-dunkel) 55%, #1a6bb0);
  color: var(--weiss);
  padding: 40px 0 60px;
}

.kopfzeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}

.kopfzeile img { height: 44px; }

header h1 {
  font-size: 2.5rem;
  line-height: 1.16;
  margin: 0 0 16px;
  font-weight: 650;
  max-width: 26ch;
}

/* Der helle Standardhintergrund von code waere im dunklen Kopf kaum
   lesbar - dort eine eigene, gedeckte Variante. */
header code {
  background: rgba(255, 255, 255, .13);
  border-color: rgba(255, 255, 255, .22);
  color: #cfe8ff;
}

header .anriss {
  font-size: 1.18rem;
  max-width: 60ch;
  margin: 0 0 12px;
  color: rgba(255, 255, 255, 0.92);
}

header .beiwerk {
  font-size: 0.96rem;
  color: rgba(255, 255, 255, 0.66);
  margin: 0;
}

/* --- Sprachumschalter ---------------------------------------------------- */

.sprachen { display: flex; gap: 4px; background: rgba(255,255,255,.14); padding: 4px; border-radius: 999px; }

.sprachen button {
  border: 0; background: transparent; color: var(--weiss); font: inherit;
  font-size: 0.93rem; padding: 6px 16px; border-radius: 999px; cursor: pointer;
  transition: background .15s, color .15s;
}

.sprachen button:hover { background: rgba(255,255,255,.16); }

.sprachen button[aria-pressed="true"] {
  background: var(--weiss); color: var(--blau-dunkel); font-weight: 600;
}

/* --- Abschnitte ---------------------------------------------------------- */

section { padding: 54px 0; }
section.getoent { background: var(--flaeche); }
section.dunkel { background: #0f1b26; color: #c6d4e0; }
section.dunkel h2 { color: var(--weiss); }
section.dunkel .untertitel { color: #8ea3b5; }

h2 { font-size: 1.75rem; margin: 0 0 8px; font-weight: 650; }

h2 + .untertitel { color: var(--text-leise); margin: 0 0 30px; max-width: 68ch; }

h3 { font-size: 1.1rem; margin: 0 0 6px; font-weight: 620; }

p { margin: 0 0 16px; }

.text-breit { max-width: 72ch; }

figure { margin: 0 0 12px; }
figure img { width: 100%; height: auto; display: block; }
figcaption { font-size: 0.85rem; color: var(--text-leise); margin-top: 10px; }

/* --- Raster -------------------------------------------------------------- */

.raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 22px;
}

.karte {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: 10px;
  padding: 20px 22px;
}

section.getoent .karte { background: var(--weiss); }
.karte p { margin: 0; color: var(--text-leise); font-size: 0.96rem; }
.karte p + p { margin-top: 10px; }

/* --- Kennzahlen ---------------------------------------------------------- */

.zahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 28px;
}

.zahl .wert {
  display: block;
  font-size: 2rem;
  font-weight: 650;
  color: var(--blau-hell);
  line-height: 1.1;
}

.zahl .bezeichnung { display: block; font-size: 0.88rem; color: #8ea3b5; margin-top: 4px; }

/* --- Endpunktliste ------------------------------------------------------- */

.endpunkte { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 8px 32px; }

.endpunkt {
  display: flex; gap: 12px; align-items: baseline;
  padding: 7px 0; border-bottom: 1px solid var(--linie);
}

.endpunkt code { flex: 0 0 auto; background: none; border: 0; padding: 0; color: var(--blau-dunkel); font-weight: 600; }
.endpunkt span { color: var(--text-leise); font-size: 0.93rem; }

/* --- Hinweiskasten ------------------------------------------------------- */

.hinweis {
  background: var(--warn);
  border: 1px solid var(--warn-linie);
  border-left-width: 4px;
  border-radius: 8px;
  padding: 20px 24px;
}

.hinweis h3 { color: var(--warn-text); }
.hinweis p { color: #6b4f19; margin-bottom: 10px; }
.hinweis p:last-child { margin-bottom: 0; }

/* --- Fuss ---------------------------------------------------------------- */

footer { background: var(--text); color: rgba(255,255,255,.7); padding: 30px 0; font-size: .92rem; }
footer p { margin: 0 0 6px; }
footer p:last-child { margin: 0; }

/* --- Sprachsteuerung ------------------------------------------------------
   Englisch ist die Vorgabe; body.de schaltet auf Deutsch um.

   Die Selektoren beginnen bei body: Ohne das trifft [lang="de"] auch das
   html-Element, in dem das Skript die Sprache setzt, und blendet die ganze
   Seite aus. !important, weil die Sprachauswahl jede Darstellungsregel
   ueberstimmen muss - sonst gewinnt etwa .zahl .bezeichnung { display: block }
   nach Spezifitaet und beide Fassungen stehen uebereinander. */

body [lang="de"] { display: none !important; }

body.de [lang="en"] { display: none !important; }
body.de [lang="de"] { display: revert !important; }

/* --- Schmale Bildschirme --------------------------------------------------- */

@media (max-width: 760px) {
  header { padding: 28px 0 40px; }
  header h1 { font-size: 1.8rem; max-width: none; }
  section { padding: 38px 0; }
}

@media print {
  .sprachen { display: none; }
  section.dunkel { background: #fff; color: #000; }
  section.dunkel h2 { color: #000; }
  .zahl .wert { color: var(--blau-dunkel); }
}