/*
 * mcp-gateway Landing-Page — „Sammelschiene“ (DIN-Anlagenschema).
 * 100 % JS-frei; jede Linie ist Schiene, Stich, Klemmpunkt, Blockrand
 * oder Kennzeilen-Kante — keine Dekoration.
 */

/* ------------------------------------------------------------------ */
/* Design-Tokens                                                       */
/* ------------------------------------------------------------------ */

:root {
  --papier: #eef1f5;
  --klemme: #ffffff;
  --leitung: #0058a3;
  --leitung-tief: #003e75;
  --tinte: #16324a;
  --nebentext: #5b6b7a;
  --klemmenrand: #c9d4de;
  --kennzeile-grund: #f4f8fc;
  --betrieb: #1a7f37;

  /* Leitungs-Kanal + Klemmpunkt-Durchmesser (mobil überschrieben) */
  --kanal: 2.75rem;
  --punkt: 10px;

  --font-display: "Bahnschrift", "DIN Alternate", "Franklin Gothic Medium", "Segoe UI", sans-serif;
  --font-body: "Segoe UI", -apple-system, Roboto, "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papier: #0e1822;
    --klemme: #16232f;
    --leitung: #6db3e8;
    --leitung-tief: #8fc4ef;
    --tinte: #d5e2ee;
    --nebentext: #8fa1b3;
    --klemmenrand: #2a3a49;
    --kennzeile-grund: #0f1d2a;
    --betrieb: #3fb950;
  }
}

/* ------------------------------------------------------------------ */
/* Grundgerüst                                                         */
/* ------------------------------------------------------------------ */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
}

.anlage {
  max-width: calc(46rem + var(--kanal) + 2px);
  margin-inline: auto;
  padding: 1.5rem 1rem 3rem;
}

@media (min-width: 640px) {
  .anlage {
    padding: 2.5rem 2rem 4rem;
  }
}

a {
  color: var(--leitung);
  transition: color 120ms;
}

a:hover,
a:active {
  color: var(--leitung-tief);
}

a:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--leitung);
  outline-offset: 2px;
}

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

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ */
/* Wiederkehrende Rollen                                               */
/* ------------------------------------------------------------------ */

.feld-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--nebentext);
  font-variant-numeric: tabular-nums;
}

.klemmen-name {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tinte);
}

.sektionstitel {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--nebentext);
  margin-bottom: 1.25rem;
}

/* ------------------------------------------------------------------ */
/* Kopfblock („Einspeisung“)                                           */
/* ------------------------------------------------------------------ */

.einspeisung {
  background: var(--klemme);
  border: 1px solid var(--klemmenrand);
  border-radius: 3px;
  padding: 1rem 1.25rem;
}

.einspeisung-kopf {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem 1.5rem;
}

.einspeisung h1 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.5vw, 2.125rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
  color: var(--tinte);
  margin-top: 0.25rem;
}

.einspeisung h1 .host {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--leitung);
  overflow-wrap: anywhere;
}

.status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.status-punkt {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--betrieb);
  flex: none;
}

.these {
  margin-top: 0.75rem;
  color: var(--tinte);
}

/* ------------------------------------------------------------------ */
/* Signature-Element: die Sammelschiene                                */
/* ------------------------------------------------------------------ */

.schiene {
  position: relative;
  border-left: 2px solid var(--leitung);
  padding-left: var(--kanal);
  padding-top: 3rem;
  padding-bottom: 3rem;
}

/* Abschluss: gefüllter Punkt am Schienenende, direkt über dem Schriftfeld */
.schiene::after {
  content: "";
  position: absolute;
  left: calc(-1 * var(--punkt) / 2 - 1px);
  bottom: calc(-1 * var(--punkt) / 2);
  width: var(--punkt);
  height: var(--punkt);
  border-radius: 50%;
  background: var(--leitung);
}

.sektion + .sektion,
.hinweis {
  margin-top: 4rem;
}

.klemmen {
  display: grid;
  gap: 1.5rem;
}

/* ------------------------------------------------------------------ */
/* Klemme: Block + Stichleitung + Klemmpunkt                           */
/* ------------------------------------------------------------------ */

.klemme {
  position: relative;
  background: var(--klemme);
  border: 1px solid var(--klemmenrand);
  border-radius: 3px;
  padding: 1rem 1.25rem;
}

/* Stichleitung: horizontale 2px-Linie von der Schiene zum Block */
.klemme::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--kanal));
  top: 1.6rem;
  width: var(--kanal);
  height: 2px;
  background: var(--leitung);
}

/* Klemmpunkt: runder Anschlusspunkt AUF der Schiene */
.klemme::after {
  content: "";
  position: absolute;
  left: calc(-1 * var(--kanal) - var(--punkt) / 2 - 1px);
  top: calc(1.6rem + 1px - var(--punkt) / 2);
  width: var(--punkt);
  height: var(--punkt);
  border-radius: 50%;
  background: var(--papier);
  border: 2px solid var(--leitung);
}

.beschreibung {
  font-size: 0.9rem;
  color: var(--nebentext);
  margin-top: 0.25rem;
}

.klemme .feld-label {
  margin-top: 0.75rem;
  margin-bottom: 0.25rem;
}

/* ------------------------------------------------------------------ */
/* Kennzeile: das kopierbare URL-Feld                                  */
/* ------------------------------------------------------------------ */

.kennzeile {
  background: var(--kennzeile-grund);
  border-left: 3px solid var(--leitung);
  border-radius: 0 3px 3px 0;
  padding: 0.625rem 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  -webkit-user-select: all;
  user-select: all;
  overflow-wrap: anywhere;
}

.url-host {
  color: var(--nebentext);
}

.url-mount {
  color: var(--leitung);
  font-weight: 600;
}

.url-ganz {
  color: var(--tinte);
}

.mikro {
  font-size: 0.78rem;
  color: var(--nebentext);
  margin-top: 0.375rem;
}

/* ------------------------------------------------------------------ */
/* Anleitungen (details/summary)                                       */
/* ------------------------------------------------------------------ */

.anleitung summary {
  cursor: pointer;
}

.anleitung summary::marker {
  color: var(--leitung);
}

.anleitung summary .klemmen-name {
  display: inline;
}

.anleitung .subzeile {
  display: block;
  /* Marker-Breite des summary-Disclosure-Dreiecks ausgleichen, damit die
     Subzeile bündig unter dem Client-Namen steht statt links versetzt. */
  margin-left: 1.1em;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--nebentext);
  text-transform: none;
  letter-spacing: normal;
}

.anleitung ol {
  margin-top: 1rem;
  padding-left: 1.5rem;
  display: grid;
  gap: 0.5rem;
}

/* Bewusste Degradation: Safari ignoriert font-family/font-variant in
   ::marker — dort greift nur die Farbe, die Ziffern fallen auf die
   Body-Schrift zurück. Mono-Treue in Safari bräuchte einen Custom-Counter
   (li::before mit counter(list-item)); für zwei Ziffern nicht gerechtfertigt. */
.anleitung ol li::marker {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--leitung);
}

/* ------------------------------------------------------------------ */
/* Hinweiskasten (Norm-Anmerkung: an der Schiene, KEIN Abgang)         */
/* ------------------------------------------------------------------ */

.hinweis {
  background: var(--klemme);
  border: 1px solid var(--klemmenrand);
  border-left: 3px solid var(--leitung);
  border-radius: 0 3px 3px 0;
  padding: 1rem 1.25rem;
}

.hinweis .feld-label {
  margin-bottom: 0.25rem;
}

/* ------------------------------------------------------------------ */
/* Footer-Schriftfeld                                                  */
/* ------------------------------------------------------------------ */

.schriftfeld {
  margin-top: 1.5rem;
  background: var(--klemme);
  border: 1px solid var(--klemmenrand);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: var(--nebentext);
  display: flex;
  flex-wrap: wrap;
}

.schriftfeld > span {
  padding: 0.625rem 1rem;
  overflow-wrap: anywhere;
}

.schriftfeld > span + span {
  border-left: 1px solid var(--klemmenrand);
}

/* ------------------------------------------------------------------ */
/* Mobil (< 640px): schmaler Kanal, kleinere Punkte, Stapel-Layouts    */
/* ------------------------------------------------------------------ */

@media (max-width: 639.98px) {
  :root {
    --kanal: 1.25rem;
    --punkt: 8px;
  }

  .schriftfeld {
    flex-direction: column;
  }

  .schriftfeld > span + span {
    border-left: none;
    border-top: 1px solid var(--klemmenrand);
  }
}

/* ------------------------------------------------------------------ */
/* Login-Maske (mcp_core.auth.oauth_proxy) — dieselbe Anlage, ein Blatt */
/* ------------------------------------------------------------------ */

main.card {
  max-width: 27rem;
  margin: clamp(2rem, 12vh, 6rem) auto 1rem;
  padding: 2rem 1.75rem 1.75rem;
  background: var(--klemme);
  border: 1px solid var(--klemmenrand);
  border-left: 3px solid var(--leitung);
}

main.card h1 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 0.35rem;
}

main.card .sub {
  color: var(--nebentext);
  font-size: 0.9rem;
  margin-bottom: 1.75rem;
}

main.card label {
  display: block;
  margin-top: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--nebentext);
}

main.card input[type="text"],
main.card input[type="password"] {
  display: block;
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.65rem 0.75rem;
  font: inherit;
  font-family: var(--font-mono);
  color: var(--tinte);
  background: var(--kennzeile-grund);
  border: 1px solid var(--klemmenrand);
  border-radius: 0;
}

main.card input:focus-visible {
  outline: 2px solid var(--leitung);
  outline-offset: 1px;
  border-color: var(--leitung);
}

main.card button[type="submit"] {
  display: inline-block;
  margin-top: 1.75rem;
  padding: 0.7rem 1.75rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--klemme);
  background: var(--leitung);
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: background 120ms;
}

main.card button[type="submit"]:hover,
main.card button[type="submit"]:focus-visible {
  background: var(--leitung-tief);
  outline: none;
}

.alert {
  margin-top: 1.25rem;
  padding: 0.65rem 0.8rem;
  font-size: 0.9rem;
  border-left: 3px solid;
}

.alert.error {
  color: #82071e;
  background: #ffeef0;
  border-color: #d1242f;
}

@media (prefers-color-scheme: dark) {
  .alert.error {
    color: #ffb3b8;
    background: #2d1417;
    border-color: #f85149;
  }
}

.footer {
  margin: 0 auto 2rem;
  max-width: 27rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--nebentext);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  main.card button[type="submit"] { transition: none; }
}