/* ============================================
   Sunbloom — Konsole
   ============================================
   Warm und ruhig. Die Farbe gehoert dem Zustand: gruen, bernstein, rot. Alles
   andere bleibt zurueckhaltend, damit eine Stoerung auf einen Blick auffaellt
   und nicht zwischen dekorativen Akzenten untergeht. Das Sonnengelb steht nur
   am Logo und an der einen Hauptaktion.

   Keine externen Schriften: eine interne Konsole laedt nichts von fremden
   Servern. */

:root {
  --bg: #faf7f2;
  --surface: #ffffff;
  --surface-2: #f4efe7;
  --ink: #1e1a15;
  --muted: #6e655b;
  --faint: #a2988c;
  --line: #e8e1d6;

  --sun: #e39b2d;
  --sun-ink: #2a1c05;
  --bloom: #d45f55;

  --ok: #2e8b57;
  --warn: #b97b08;
  --down: #c23b2c;
  --unknown: #a2988c;

  --radius: 12px;
  --shadow: 0 1px 2px rgba(30, 26, 21, 0.05), 0 6px 18px rgba(30, 26, 21, 0.04);
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15120e;
    --surface: #1d1914;
    --surface-2: #26211a;
    --ink: #f3eee6;
    --muted: #b0a595;
    --faint: #7d7366;
    --line: #332c24;

    --sun: #f0b04a;
    --sun-ink: #1e1405;
    --bloom: #e57a6f;

    --ok: #4cb37a;
    --warn: #e0a73a;
    --down: #e35d4e;
    --unknown: #7d7366;

    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 var(--sans);
  font-variant-numeric: tabular-nums;
}

a { color: inherit; }

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ─── Kopf ─────────────────────────────────────── */

.top {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.top .wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 60px;
  flex-wrap: wrap;
  padding-top: 8px;
  padding-bottom: 8px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 650;
  font-size: 17px;
  letter-spacing: -0.01em;
}

.brand svg { width: 26px; height: 26px; flex: none; }

.top nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.who {
  color: var(--muted);
  font-size: 13px;
  margin-right: 6px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  font: 500 13.5px/1.2 var(--sans);
  cursor: pointer;
}

.btn:hover { background: var(--surface-2); }

.btn-primary {
  background: var(--sun);
  border-color: var(--sun);
  color: var(--sun-ink);
}

.btn-primary:hover { filter: brightness(0.96); background: var(--sun); }

/* ─── Lage ─────────────────────────────────────── */

.lage {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 28px 0 18px;
}

.lage h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.015em;
}

.lage .stand {
  color: var(--muted);
  font-size: 13px;
}

.banner {
  margin: 18px 0;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--down);
  background: color-mix(in srgb, var(--down) 8%, var(--surface));
  font-size: 14px;
}

.banner pre {
  margin: 6px 0 0;
  white-space: pre-wrap;
  font: 12.5px/1.5 var(--mono);
}

.banner.info {
  border-color: var(--line);
  background: var(--surface-2);
  color: var(--muted);
}

/* ─── Zustandspunkte ───────────────────────────── */

.dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--unknown);
  flex: none;
}

.dot.ok { background: var(--ok); }
.dot.warn { background: var(--warn); }
.dot.down { background: var(--down); box-shadow: 0 0 0 3px color-mix(in srgb, var(--down) 22%, transparent); }
.dot.unknown { background: transparent; border: 1.5px solid var(--unknown); }

.t-ok { color: var(--ok); }
.t-warn { color: var(--warn); }
.t-down { color: var(--down); }
.t-unknown, .t-muted { color: var(--muted); }

/* ─── Karten ───────────────────────────────────── */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: 14px;
  margin-bottom: 40px;
}

.card {
  display: block;
  position: relative;
  padding: 16px 16px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  text-decoration: none;
  transition: border-color 0.15s ease;
}

.card:hover { border-color: var(--faint); }

/* Eine Stoerung bekommt eine farbige Kante. Nur dann -- eine Uebersicht, in
   der alles farbig ist, zeigt nichts mehr an. */
.card.down { border-color: color-mix(in srgb, var(--down) 55%, var(--line)); }
.card.down::before {
  content: "";
  position: absolute;
  inset: -1px auto -1px -1px;
  width: 4px;
  border-radius: var(--radius) 0 0 var(--radius);
  background: var(--down);
}

.card-head {
  display: flex;
  align-items: center;
  gap: 9px;
}

.card h2 {
  margin: 0;
  font-size: 16.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.phase {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  background: var(--surface-2);
  color: var(--muted);
  white-space: nowrap;
}

.phase.live {
  background: color-mix(in srgb, var(--ok) 14%, var(--surface));
  color: var(--ok);
}

.phase.aufbau {
  background: color-mix(in srgb, var(--sun) 18%, var(--surface));
  color: color-mix(in srgb, var(--sun) 55%, var(--ink));
}

.tagline {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13.5px;
}

.summary {
  margin: 12px 0 8px;
  font-size: 13.5px;
  font-weight: 600;
}

.domains {
  list-style: none;
  margin: 0;
  padding: 10px 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 6px;
}

.domains li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  min-width: 0;
}

.domains .host {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.domains .meta {
  margin-left: auto;
  color: var(--muted);
  font-size: 12.5px;
  white-space: nowrap;
}

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12.5px;
}

.facts code {
  font: 12px var(--mono);
  color: var(--ink);
}

/* ─── Detailseite ──────────────────────────────── */

.crumbs {
  margin: 22px 0 0;
  font-size: 13px;
  color: var(--muted);
}

.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

.detail-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 10px 0 4px;
}

.detail-head h1 {
  margin: 0;
  font-size: 26px;
  font-weight: 680;
  letter-spacing: -0.02em;
}

.detail-head .dot { width: 12px; height: 12px; }
.detail-head .phase { margin-left: 0; }

.section {
  margin: 22px 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.section h2 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 650;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.table-wrap {
  overflow-x: auto;
  margin: 0 -16px;
  padding: 0 16px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

th {
  text-align: left;
  font-weight: 600;
  color: var(--muted);
  font-size: 12px;
  padding: 0 12px 8px 0;
  white-space: nowrap;
}

td {
  padding: 9px 12px 9px 0;
  border-top: 1px solid var(--line);
  vertical-align: top;
}

td.num { white-space: nowrap; }

td code, .mono { font: 12.5px var(--mono); }

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

.findings li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 13.5px;
}

.findings .dot { transform: translateY(1px); }

.kv {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 18px;
  margin: 0;
  font-size: 13.5px;
}

.kv dt { color: var(--muted); }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

.notes {
  white-space: pre-wrap;
  font-size: 13.5px;
  margin: 0;
}

/* Innerhalb des Rasters fallen Raender nicht zusammen; der Abstand kommt darum
   vom Raster selbst, sonst stuende hier das Doppelte wie ueberall sonst. */
.columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 22px 18px;
  margin: 22px 0;
}

.columns .section { margin: 0; }

/* ─── Neues Projekt ────────────────────────────── */

.form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 14px 18px;
}

.field label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 5px;
}

.field input[type="text"],
.field input[type="number"] {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  font: 14px var(--sans);
}

.field input:focus {
  outline: 2px solid color-mix(in srgb, var(--sun) 60%, transparent);
  outline-offset: 1px;
}

.field .hint {
  margin: 4px 0 0;
  color: var(--faint);
  font-size: 12px;
}

.checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  align-items: center;
  grid-column: 1 / -1;
  font-size: 14px;
}

.checks label { display: inline-flex; gap: 7px; align-items: center; }

.form-actions { grid-column: 1 / -1; }

.code {
  position: relative;
  margin: 0;
  padding: 14px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  overflow-x: auto;
  font: 12.5px/1.55 var(--mono);
  white-space: pre;
}

.code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 8px;
}

.code-head h3 {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
}

/* Der Pfad nimmt den Rest der Zeile und bricht notfalls mitten im Wort um.
   Ohne min-width: 0 schrumpft ein Flex-Kind nie unter seine Textbreite, und ein
   Pfad ohne Bindestrich schob auf dem Handy den Knopf aus dem Kasten. */
.code-head h3,
.code-head .btn { flex: none; }

.code-head .path {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--muted);
  font: 12px var(--mono);
}

ol.steps {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 6px;
  font-size: 14px;
}

.empty {
  color: var(--muted);
  font-size: 13.5px;
  margin: 0;
}

/* ─── Anmeldung ────────────────────────────────── */

form.inline { display: inline; margin: 0; }

.login {
  max-width: 380px;
  margin: 12vh auto 40px;
  text-align: center;
}

.login-mark { display: block; margin: 0 auto 10px; }

.login h1 {
  margin: 0 0 22px;
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.015em;
}

.login .banner { text-align: left; }

.login-form {
  display: grid;
  gap: 14px;
  text-align: left;
}

.login-form .field input {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  font: 15px var(--sans);
}

.login-form .field input:focus {
  outline: 2px solid color-mix(in srgb, var(--sun) 60%, transparent);
  outline-offset: 1px;
}

.login-form #code {
  font: 20px/1.2 var(--mono);
  letter-spacing: 0.18em;
  text-align: center;
}

.login-form .btn { justify-content: center; padding: 10px 12px; font-size: 14.5px; }

footer {
  margin: 40px 0 28px;
  color: var(--faint);
  font-size: 12px;
}

@media (max-width: 560px) {
  .lage { margin-top: 20px; }
  .detail-head h1 { font-size: 22px; }
  .who { display: none; }
}