/* Klopfwerk — Design Tokens & Komponenten
   Palette, Typo und das Puls-Signaturelement an einem Ort. */


/* Big Shoulders Display */
@font-face {
  font-family: 'Big Shoulders';
  src: url("/assets/BigShoulders-Bold-a5c0f104.woff2") format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Big Shoulders';
  src: url("/assets/BigShoulders-ExtraBold-f39c9de0.woff2") format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* IBM Plex Sans */
@font-face {
  font-family: 'IBM Plex Sans';
  src: url("/assets/IBMPlexSans-Regular-cd592da6.woff2") format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: url("/assets/IBMPlexSans-Medium-5a93fa32.woff2") format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: url("/assets/IBMPlexSans-SemiBold-b90481d1.woff2") format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* IBM Plex Mono */
@font-face {
  font-family: 'IBM Plex Mono';
  src: url("/assets/IBMPlexMono-Regular-387df202.woff2") format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url("/assets/IBMPlexMono-Medium-a53827a6.woff2") format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}






:root {
  /* Die App ist durchgehend dunkel; so zeichnen Browser auch Scrollbalken,
     Formularelemente und die Auswahl in der passenden Helligkeit. */
  color-scheme: dark;

  --ink: #12151a;
  --panel: #1a1f26;
  --panel-raised: #20262e;
  --hairline: #262d36;
  --fg: #e7ebef;
  --fg-muted: #8993a1;
  --brass: #c89b4a;
  --brass-dim: #8a6f3c;
  --up: #3fd68c;
  --down: #f0555c;
  --pending: #8993a1;
  --unverifiable: #e0a33e;

  --font-display: 'Big Shoulders', sans-serif;
  --font-body: 'IBM Plex Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: inherit; text-decoration: none; }

/* Sprungmarke: außerhalb des Bildes, bis sie per Tab den Fokus bekommt. */
.kw-skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  transform: translateY(-200%);
  padding: 10px 14px;
  border-radius: 6px;
  background: var(--brass);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 13px;
}
.kw-skip-link:focus { transform: none; }

/* Einheitlicher Fokusring für alles, was per Tastatur erreichbar ist. */
.kw-primary-nav a:focus-visible,
.kw-button:focus-visible,
.kw-button-secondary:focus-visible,
.kw-button-danger:focus-visible,
.kw-segment:focus-visible,
.kw-pill:focus-visible,
.kw-reset-order:focus-visible,
.kw-back:focus-visible,
.kw-account-trigger:focus-visible,
.kw-avatar-remove:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}
/* Der Skip-Link setzt den Fokus auf den Inhaltsbereich; der Rahmen dort wäre
   nur Lärm, weil das Ziel keine Bedienung ist. */
.kw-content:focus { outline: none; }

/* ---------- Topbar ---------- */

.kw-topbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 20px 32px;
  border-bottom: 1px solid var(--hairline);
}

.kw-wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--fg);
}

.kw-wordmark span { color: var(--brass); }

.kw-summary {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg-muted);
  display: flex;
  gap: 18px;
}
@media (max-width: 640px) {
  .kw-summary {
    display:none;
  }
}  

.kw-summary .dot { margin-right: 5px; }

/* ---------- Layout ---------- */

.kw-main {
  max-width: 920px;
  margin: 0 auto;
  padding: 32px;
}

.kw-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg-muted);
  margin-bottom: 20px;
}
.kw-back:hover { color: var(--brass); }

/* ---------- Status dot ---------- */

.status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.status-dot.up { background: var(--up); box-shadow: 0 0 8px color-mix(in srgb, var(--up) 60%, transparent); }
.status-dot.down { background: var(--down); box-shadow: 0 0 8px color-mix(in srgb, var(--down) 60%, transparent); }
.status-dot.pending { background: var(--pending); }
/* Nicht überprüfbar: weder OK noch Störung, sondern eine fehlende Messung.
   Deshalb weder grün noch rot, sondern ein eigenes Warnsignal. */
.status-dot.unverifiable { background: var(--unverifiable); box-shadow: 0 0 8px color-mix(in srgb, var(--unverifiable) 60%, transparent); }
/* Inaktiv (paused): gleiche Farbe wie pending, aber als hohler Ring — der
   Zustand ist "wird nicht geprüft", nicht "noch nie geprüft". */
.status-dot.paused { background: transparent; box-shadow: inset 0 0 0 1.5px var(--pending); }

/* ---------- Monitor-Liste ---------- */

.kw-monitor-list {
  border: 1px solid var(--hairline);
  border-radius: 10px;
  overflow: hidden;
  background: var(--panel);
}

.kw-monitor-row {
  display: grid;
  grid-template-columns: 16px 1fr 140px 90px 130px 16px;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--hairline);
  transition: background 0.15s ease;
}
.kw-monitor-row:last-child { border-bottom: none; }
.kw-monitor-row:hover { background: var(--panel-raised); }

.kw-monitor-name {
  font-weight: 600;
  font-size: 15px;
}
.kw-monitor-type {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 2px;
}

/* Typ-Badge in Werkbank und Störungsleiste. --type-color setzt die Zeile aus
   der Mitgliedschaft des Betrachters; ohne Wert bleibt das Label gedämpft. */
.kw-type-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--type-color, var(--fg-muted));
  background: color-mix(in srgb, var(--type-color, var(--fg-muted)) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--type-color, var(--fg-muted)) 30%, transparent);
}

.kw-uptime {
  font-family: var(--font-mono);
  font-size: 13px;
  text-align: right;
}
.kw-uptime.low { color: var(--down); }

.kw-timestamp {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-muted);
  text-align: right;
}

.kw-chevron { color: var(--fg-muted); text-align: right; }

/* ---------- Schlichte Check-Zeile ---------- */

/* Für Listen, die nur Checks zeigen: Gruppe, Wartungsfenster, Statuspage. Kein
   Raster wie die Werkbank — hier stehen nur Zustand, Name, Art und der letzte
   Check, und die Zeile ist selbst der Link (siehe checks/_row). */
.kw-check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--hairline);
  color: inherit;
  transition: background 0.15s ease;
}
.kw-check-row:last-child { border-bottom: none; }
.kw-check-row:hover { background: var(--panel-raised); }

/* Der Name gibt nach, die Zeile nicht: lange Namen bekommen eine Ellipse, der
   volle Name steht im title-Attribut. */
.kw-check-row .kw-monitor-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Art und Marken stehen neben dem Namen, nicht darunter — die Zeile ist einreihig. */
.kw-check-row .kw-monitor-type { display: inline; margin: 0; }
/* Der letzte Check sitzt rechts außen. */
.kw-check-row .kw-timestamp { margin-left: auto; padding-left: 10px; }

@media (max-width: 640px) {
  /* Umbrechen statt quetschen: der letzte Check bekommt eine eigene Zeile, der
     Name dafür die ganze Breite darüber. */
  .kw-check-row { flex-wrap: wrap; row-gap: 2px; }
  .kw-check-row .kw-timestamp {
    margin-left: 0;
    padding-left: 0;
    flex-basis: 100%;
    text-align: left;
  }
}

/* ---------- Puls-Hero (Startseite) ---------- */

.kw-pulse-hero {
  width: 100%;
  height: 140px;
  background: var(--panel-raised);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  margin: 20px 0 28px;
}

/* ---------- Hourly Chart (36h Up-Down-Balken) ---------- */

.kw-hourly-chart {
  width: 100%;
  height: 100%;
  display: block;
}

.kw-hourly-chart .kw-bar-up      { fill: var(--up); }
.kw-hourly-chart .kw-bar-down    { fill: var(--down); }
.kw-hourly-chart .kw-bar-unknown { fill: var(--pending); opacity: 0.35; }
.kw-hourly-chart .kw-chart-tick  { stroke: var(--hairline); stroke-width: 0.25; }
.kw-hourly-chart .kw-chart-label {
  fill: var(--fg-muted);
  font-family: var(--font-mono);
  font-size: 5px;        /* viewBox-Einheiten, kein px */
  text-anchor: middle;
}
.kw-hourly-chart .kw-chart-empty {
  fill: var(--fg-muted);
  font-family: var(--font-mono);
  font-size: 7px;
}

/* ---------- Detail-Header ---------- */

.kw-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.kw-detail-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 34px;
  letter-spacing: 0.01em;
}

.kw-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
}
.kw-status-pill.up { color: var(--up); border-color: color-mix(in srgb, var(--up) 40%, var(--hairline)); }
.kw-status-pill.down { color: var(--down); border-color: color-mix(in srgb, var(--down) 40%, var(--hairline)); }
.kw-status-pill.pending { color: var(--pending); border-color: color-mix(in srgb, var(--pending) 40%, var(--hairline)); }
.kw-status-pill.unverifiable { color: var(--unverifiable); border-color: color-mix(in srgb, var(--unverifiable) 40%, var(--hairline)); }

/* Angabe des Kunden, ob die Slack-Daten in der EU liegen. Grün nur bei
   bestätigter EU-Residenz; sonst konservativ gedämpft. */
.kw-residency-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
}
.kw-residency-badge.eu {
  color: var(--up);
  background: color-mix(in srgb, var(--up) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--up) 30%, transparent);
}
.kw-residency-badge.outside {
  color: var(--pending);
  background: color-mix(in srgb, var(--pending) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pending) 30%, transparent);
}






/* ---------- Stat-Grid ---------- */

.kw-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 32px;
}

.kw-stat {
  background: var(--panel);
  padding: 18px 20px;
}

.kw-stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
  margin-bottom: 6px;
}

.kw-stat-value {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 500;
}
.kw-stat-value.low { color: var(--down); }

/* ---------- Vorfälle ---------- */


/* ---------- Incidence-Grid ---------- */

.kw-incidence-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  border-radius: 10px;
  overflow: hidden;
}

.kw-incidence-cell {

  padding: 18px 20px;
}


.kw-section-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--fg-muted);
  margin: 0 0 12px;
}

.kw-incident-list {
  border: 1px solid var(--hairline);
  border-radius: 10px;
  overflow: hidden;
  background: var(--panel);
}

.kw-incident {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  align-items: baseline;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--hairline);
  font-size: 14px;
}
.kw-incident:last-child { border-bottom: none; }

.kw-incident-time {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-muted);
  flex-shrink: 0;
  width: 130px;
}

.kw-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--fg-muted);
  font-size: 14px;
}

/* ---------- Responsive ---------- */

@media (max-width: 640px) {
  .kw-monitor-row {
    grid-template-columns: 16px 1fr 16px;
    grid-template-areas:
      "dot name chevron"
      "pulse pulse pulse"
      "uptime uptime timestamp";
  }
  .kw-stat-grid { grid-template-columns: repeat(2, 1fr); }

  /* Vorfallszeilen passen mit drei festen Spuren nicht auf 375 px: Zeit,
     Meldung und Status stehen dort untereinander. */
  .kw-incidence-grid { grid-template-columns: 1fr; }
  .kw-incident {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .kw-incident-time { width: auto; }
}

/* ---------- Auth (Login / Passwort) ---------- */

.kw-auth {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 90px);
}

/* Eigenes Auth-Layout: Kopfzeile und Footer übernehmen den Platz, die
   zentrierte Box füllt nur den Rest. Die alte 90px-Rechnung ging von der
   App-Topbar aus und würde hier über den Viewport hinauslaufen. */
.kw-auth-page .kw-auth {
  flex: 1 0 auto;
  min-height: 0;
}

.kw-auth-flashes {
  width: 100%;
  max-width: 360px;
  margin: 24px auto 0;
  padding: 0 16px;
}

.kw-auth-panel {
  width: 100%;
  max-width: 360px;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 32px;
}

.kw-auth-hint {
  color: var(--fg-muted);
  font-size: 13px;
  margin: -8px 0 20px;
}

.kw-auth-link {
  display: block;
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg-muted);
  text-align: center;
}
.kw-auth-link:hover { color: var(--brass); }

.kw-form { display: flex; flex-direction: column; }

.kw-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-muted);
  margin-bottom: 6px;
}

.kw-input {
  background: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 14px;
  padding: 10px 12px;
  margin-bottom: 18px;
  width: 100%;
}
.kw-input:focus {
  outline: none;
  border-color: var(--brass);
}

/* Dateiauswahl: der native Knopf erbt sonst das helle System-Theme. */
.kw-file-input { padding: 8px 12px; }
.kw-file-input::file-selector-button {
  margin-right: 12px;
  padding: 6px 12px;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  background: var(--panel-raised);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
}
.kw-file-input::file-selector-button:hover { border-color: var(--brass); }

/* Unter 640 px zoomt iOS beim Fokussieren in Felder unter 16 px hinein. */
@media (max-width: 640px) {
  .kw-input,
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea {
    font-size: 16px;
  }
}

.kw-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 18px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-muted);
  cursor: pointer;
}
.kw-consent input[type="checkbox"],
.kw-consent input[type="radio"] {
  margin-top: 3px;
  accent-color: var(--brass);
  flex-shrink: 0;
}
.kw-consent a { color: var(--brass); }

.kw-button {
  background: var(--brass);
  border: none;
  border-radius: 6px;
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  padding: 11px 16px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.kw-button:hover { background: var(--brass-dim); }

.kw-flash {
  font-size: 13px;
  padding: 10px 14px;
  border-radius: 6px;
  margin-bottom: 18px;
}
.kw-flash-alert {
  background: color-mix(in srgb, var(--down) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--down) 40%, var(--hairline));
  color: var(--down);
}
.kw-flash-notice {
  background: color-mix(in srgb, var(--up) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--up) 40%, var(--hairline));
  color: var(--up);
}
/* su-Modus: bleibt auf jeder Seite sichtbar, damit der Plattform-Admin nicht unbemerkt
   als Kunde weiterarbeitet. */
.kw-su-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding: 10px 14px;
  font-size: 13px;
  border: 1px solid var(--brass-dim);
  border-radius: 6px;
  background: color-mix(in srgb, var(--brass) 10%, transparent);
  color: var(--fg);
}
.kw-su-banner .kw-button-secondary { white-space: nowrap; }

@media (max-width: 640px) {
  .kw-su-banner { flex-direction: column; align-items: flex-start; }
}

/* Zwischen "alles gut" und "Störung": geprüft wird gerade nicht. */
.kw-flash-warning {
  background: color-mix(in srgb, var(--pending) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--pending) 45%, var(--hairline));
  color: var(--fg-muted);
}

.kw-preview-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 13px;
  background: color-mix(in srgb, var(--pending) 18%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--pending) 45%, var(--hairline));
  color: var(--fg-muted);
}
.kw-preview-bar a {
  color: var(--fg);
  text-decoration: underline;
}

.kw-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: var(--fg-muted);
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.kw-divider::before, .kw-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hairline);
}

.kw-button-secondary {
  display: block;
  width: 100%;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  color: var(--fg);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  padding: 10px 16px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.kw-button-secondary:hover { border-color: var(--up); }

.kw-button-danger,
.kw-button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;
  min-height: 2.5rem;

  padding: 0.5rem 0.9rem;
  border: 1px solid var(--hairline);
  border-radius: 6px;

  font: inherit;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}






/* ---------- Account-Menü (Dropdown) ---------- */

.kw-topbar-right {
  display: flex;
  align-items: center;
  gap: 24px;
}

.kw-account-menu {
  position: relative;
}

.kw-account-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  padding: 4px 8px 4px 4px;
  border-radius: 8px;
  transition: background 0.15s ease;
}
.kw-account-trigger::-webkit-details-marker { display: none; }
.kw-account-trigger::marker { display: none; content: ""; }
.kw-account-trigger { list-style: none; }
.kw-account-trigger:hover { background: var(--panel-raised); }

.kw-account-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

.kw-account-avatar-fallback {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--panel-raised);
  border: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12px;
  color: var(--brass);
}

.kw-account-name {
  font-size: 13px;
  font-weight: 500;
}
@media (max-width: 640px) {
  .kw-account-name {
    display:none;
  }
  .kw-account-chevron {
    display:none;
  }
}

.kw-account-chevron {
  font-size: 10px;
  color: var(--fg-muted);
}

.kw-account-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 20;
}

.kw-account-dropdown-header {
  padding: 8px 10px 12px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kw-account-email {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg);
}

.kw-account-org {
  font-size: 11px;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.kw-account-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--fg);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
}
.kw-account-item:hover { background: var(--panel-raised); }

.kw-account-item-button { color: var(--down); }

.kw-account-divider {
  height: 1px;
  background: var(--hairline);
  margin: 8px 4px;
}

/* Dropdown schließt beim Klick daneben — natives <details>-Verhalten,
   nur das Overlay verhindert Layout-Sprünge beim Öffnen. */
.kw-account-menu[open] .kw-account-trigger { background: var(--panel-raised); }

/* ---------- Settings ---------- */

.kw-settings-panel {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 28px;
  max-width: 480px;
  margin-bottom: 28px;
}

/* Datenlisten mit Spalten, z. B. die Zahlungsübersicht in der Plattform-Admin-Ansicht. */
.kw-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.kw-data-table th,
.kw-data-table td {
  padding: 8px 6px;
  border-bottom: 1px solid var(--hairline);
  text-align: center;
}

.kw-data-table th:first-child,
.kw-data-table td:first-child { text-align: left; }

.kw-data-table th {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  color: var(--fg-muted);
}

.kw-data-table tr:last-child td { border-bottom: none; }

.kw-data-table tr.kw-overdue td { color: var(--down); }

/* Monitorfarben: eine Zeile je Check-Typ. Das Badge ist dieselbe Komponente
   wie in der Übersicht, damit die Vorschau nichts anderes zeigt als die Liste. */
.kw-color-list { display: flex; flex-direction: column; }

.kw-color-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px 82px 96px;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--hairline);
}
.kw-color-row:last-child { border-bottom: none; }

.kw-color-input {
  width: 44px;
  height: 30px;
  padding: 2px;
  background: var(--panel-raised);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  cursor: pointer;
}

.kw-color-hex {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-muted);
}

.kw-color-reset {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 5px 8px;
  cursor: pointer;
}
.kw-color-reset:hover { color: var(--fg); border-color: var(--brass-dim); }

@media (max-width: 640px) {
  .kw-color-row {
    grid-template-columns: 44px minmax(0, 1fr);
    row-gap: 6px;
  }
  .kw-color-row .kw-type-badge { grid-column: 1 / -1; }
  .kw-color-input { grid-column: 1; }
  .kw-color-hex { grid-column: 2; }
  .kw-color-reset { grid-column: 1 / -1; justify-self: start; }
}

/* Zeilen ohne eigene Listen-Komponente (Team, Einladungen). Die Trennlinie
   kommt aus der Klasse statt aus einem Inline-Style. */
.kw-list-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline);
}
.kw-list-row:last-child { border-bottom: none; }
.kw-list-row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* ---------- Rechtstexte ---------- */

.kw-legal {
  max-width: 760px;
  line-height: 1.7;
}
.kw-legal h2 {
  font-size: 18px;
  margin: 32px 0 10px;
}
.kw-legal h2:first-of-type { margin-top: 8px; }
.kw-legal p { margin-bottom: 14px; }
.kw-legal ul { margin: 0 0 14px 20px; }
.kw-legal li { margin-bottom: 6px; }
.kw-legal a { color: var(--brass); }
.kw-legal-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-muted);
  margin-bottom: 20px;
}
.kw-legal-note {
  border-left: 2px solid var(--brass);
  padding-left: 14px;
  color: var(--fg-muted);
  font-size: 13px;
}
.kw-legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 20px;
  font-size: 14px;
}
.kw-legal-table th,
.kw-legal-table td {
  border-bottom: 1px solid var(--hairline);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}
.kw-legal-table th {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

@media (max-width: 640px) {
  .kw-legal-table { display: block; overflow-x: auto; }
}

.kw-avatar-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 22px;
}

.kw-avatar-preview {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--hairline);
}

.kw-avatar-fallback {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--panel-raised);
  border: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--brass);
}

.kw-field-error {
  color: var(--down);
  font-size: 12px;
  margin: 4px 0 0;
}

.kw-avatar-remove {
  background: none;
  border: none;
  color: var(--fg-muted);
  font-size: 12px;
  font-family: var(--font-mono);
  cursor: pointer;
  padding: 0;
  margin-top: 8px;
}
.kw-avatar-remove:hover { color: var(--down); }

.kw-danger-zone {
  background: var(--panel);
  border: 1px solid color-mix(in srgb, var(--down) 35%, var(--hairline));
  border-radius: 10px;
  padding: 24px 28px;
  max-width: 480px;
}

.kw-button-danger {
  background: transparent;
  border: 1px solid var(--down);
  color: var(--down);
}
.kw-button-danger:hover { background: color-mix(in srgb, var(--down) 15%, transparent); }

/* ---------- Primary Nav (Checks / Gruppen) ---------- */

.kw-layout {
  display: grid;
  /* Standardbreite Sidebar, schmaler auf kleinen Screens — siehe Media-Queries */
  grid-template-columns: var(--kw-sidebar-width, 220px) 1fr;
  align-items: start;
  padding: 24px 32px;
  gap: 32px;
  width: 100%;
  margin: 0 auto;
  flex: 1 0 auto;
}

.kw-sidebar {
  position: sticky;
  top: 24px;
  align-self: start;
}

.kw-content { 
  min-width: 0; 
  max-width: 1200px;
}


.kw-button-right {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
  margin-bottom: 16px;
}

/* Aktionsleisten auf Detailseiten. Die Buttons behalten ihre natürliche
   Breite; auf schmalen Screens rutschen sie in die nächste Zeile, statt über
   den Rand zu laufen. */
.kw-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.kw-actions > * { width: auto; }


/* Wenn kw-main innerhalb des neuen Grid-Layouts liegt, übernimmt das
   Layout das Padding; kw-main soll dann nicht nochmal paddings setzen. */
.kw-content > .kw-main {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Panels füllen die Inhaltsspalte; Formulare darin bleiben lesbar. */
.kw-content .kw-settings-panel,
.kw-content .kw-danger-zone {
  max-width: none;
}

.kw-content .kw-settings-panel .kw-form,
.kw-content .kw-danger-zone .kw-form {
  max-width: 760px;
}

.kw-primary-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-right: 1px solid var(--hairline);
  padding-right: 20px;
}

.kw-nav-item a {
  display: block;
  color: var(--fg-muted);
  padding: 8px 10px;
  border-radius: 6px;
  transition: background 0.15s ease, color 0.15s ease;
}
.kw-nav-item a:hover {
  color: var(--fg);
  background: var(--panel-raised);
}

/* Der aktive Bereich bleibt auch nach dem späteren `color: inherit` sichtbar:
   höhere Spezifität als .kw-nav-item a. */
.kw-nav-item a.kw-nav-link.is-active {
  color: var(--fg);
  background: var(--panel-raised);
  box-shadow: inset 2px 0 0 var(--brass);
}

/* svg test */ 

.kw-nav-item a {
  display: flex;
  align-items: center;       /* vertikal zentrieren */
  gap: 0.5rem;               /* Abstand zwischen Icon und Text */
  text-decoration: none;
  /* Nicht `inherit`: sonst erbt der Link die Farbe des Nav-Containers (--fg)
     und inaktive Einträge sehen aus wie aktive. */
  color: var(--fg-muted);
}

/* Optional: Icon-Größe explizit steuern */
.kw-nav-item a svg {
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;            /* Icon soll nicht schrumpfen */
}

.icon {
  display: inline-block;
  vertical-align: middle;
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
}

/* Optional: größere Variante */
.icon-lg {
  width: 1.5em;
  height: 1.5em;
}

/* Optional: kleinere Variante */
.icon-sm {
  width: 0.75em;
  height: 0.75em;
}

.kw-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
}

/* Icon: immer sichtbar, feste Größe */
.kw-nav-icon {
  width: 1.5em;
  height: 1.5em;
  flex-shrink: 0;
}

/* Text: standardmäßig sichtbar */
.kw-nav-text {
  opacity: 1;
  width: auto;
  overflow: hidden;
  transition:
    opacity 0.2s ease,
    width 0.2s ease;
}

/* Kleiner Bildschirm: Die vier Ziele stehen als 2×2-Raster mit Beschriftung
   untereinander. Vier Symbole allein sind nicht selbsterklärend, und ein
   ausklappbares Menü wäre für vier feste Ziele zu viel Mechanik. */
@media (max-width: 640px) {
  .kw-primary-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    border-right: none;
    border-bottom: 1px solid var(--hairline);
    padding: 0 0 12px;
  }
  .kw-nav-item a {
    min-height: 44px;
    padding: 10px 12px;
  }
  /* Waagerechter Indikator, solange die Navigation waagerecht steht. */
  .kw-nav-item a.kw-nav-link.is-active {
    box-shadow: inset 0 -2px 0 var(--brass);
  }
  .kw-nav-text {
    opacity: 1;
    width: auto;
  }
}
















/* Sidebar schrumpft auf Tablets, wird horizontal auf Phones. */
@media (max-width: 900px) {
  .kw-layout {
    --kw-sidebar-width: 160px;
    padding: 20px 24px;
    gap: 20px;
  }
  .kw-primary-nav { font-size: 12px; padding-right: 14px; min-width: 0; }
  .kw-nav-item a { padding: 6px 8px; }
}

@media (max-width: 640px) {
  .kw-layout {
    grid-template-columns: 1fr;
    padding: 16px;
    gap: 16px;
  }
  .kw-sidebar {
    position: static;
  }
  /* Nach dem Tablet-Block, der das Padding verkleinert: im Raster brauchen die
     Ziele wieder Luft für den Daumen. */
  .kw-nav-item a { padding: 10px 12px; }
}

/* Auf sehr breiten Screens darf die Sidebar etwas mehr Platz bekommen. */
@media (min-width: 1400px) {
  .kw-layout {
    --kw-sidebar-width: 260px;
    gap: 40px;
  }
}

/* ---------- Checkliste (Gruppen-Formular) ---------- */

.kw-checklist {
  border: 1px solid var(--hairline);
  border-radius: 8px;
  max-height: 280px;
  overflow-y: auto;
}

.kw-checklist-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--hairline);
  font-size: 14px;
  cursor: pointer;
}
.kw-checklist-item:last-child { border-bottom: none; }
.kw-checklist-item:hover { background: var(--panel-raised); }

/* ---------- Freigabe (Grants) ---------- */

.kw-grant-list {
  border: 1px solid var(--hairline);
  border-radius: 10px;
  overflow: hidden;
  background: var(--panel);
}

.kw-grant-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--hairline);
}
.kw-grant-row:last-child { border-bottom: none; }

.kw-grant-account {
  font-weight: 600;
  font-size: 14px;
  display: block;
}

.kw-grant-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-muted);
}

/* ---------- Benachrichtigungen nach Kanal ---------- */

.kw-channel-card {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 24px;
  margin-bottom: 24px;
}

.kw-channel-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.kw-channel-card-title {
  font-size: 16px;
  font-weight: 600;
}

.kw-channel-hint {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg-muted);
}
.kw-channel-hint a { color: var(--brass); }

/* Ein Link in Button-Optik bleibt ein Button. Ohne die Ausnahme färbt die
   Hinweisregel oben die Schrift wie den Buttonhintergrund — der Text
   verschwindet (Slack/SMS: „Integration hinzufügen“, „Nummer bestätigen“). */
.kw-channel-hint a.kw-button,
.kw-form-hint a.kw-button,
.kw-notification-meta a.kw-button { color: var(--ink); }

.kw-channel-rows { border-top: 1px solid var(--hairline); }

.kw-notification-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
}
.kw-notification-row:last-child { border-bottom: none; }

.kw-notification-row-default {
  background: var(--panel-raised);
  margin: 0 -24px;
  padding: 14px 24px;
}

.kw-notification-identity {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kw-notification-address {
  font-weight: 600;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.kw-notification-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-muted);
}
.kw-notification-meta a { color: var(--brass); }

.kw-notification-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.kw-switch-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.kw-switch-form { display: inline-flex; margin: 0; }

.kw-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-muted);
  cursor: pointer;
  white-space: nowrap;
}
.kw-switch input[type="checkbox"] { accent-color: var(--brass); margin: 0; }
.kw-switch-readonly { opacity: 0.65; cursor: default; }

.kw-notification-empty {
  padding: 14px 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-muted);
}

.kw-channel-add-form { margin-top: 18px; }

.kw-channel-add {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px 16px;
}

.kw-channel-add-field { flex: 1 1 240px; min-width: 0; }
.kw-channel-add-field .kw-label { margin-bottom: 4px; }
.kw-channel-add-field .kw-input { margin-bottom: 0; }

/* ---------- Slug-Anzeige (Account-Settings) ---------- */

.kw-slug-display code {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--brass);
  background: var(--panel-raised);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 6px 12px;
}

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

/* Flash außerhalb des App-Layouts, z. B. auf öffentlichen Statusseiten. */
.kw-public-flashes {
  max-width: 720px;
  margin: 24px auto 0;
  padding: 0 16px;
}

.kw-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  justify-content: center;
  padding: 24px 32px 32px;
  font-family: var(--font-mono);
  font-size: 12px;
  flex-shrink: 0;
  margin-top: auto;
}
.kw-footer a { color: var(--fg-muted); }
.kw-footer a:hover { color: var(--brass); }

/* ---------- Wartungsfenster ---------- */

.status-dot.maintenance {
  background: #5b8def; /* eigene, neutrale Farbe — weder up-grün noch down-rot */
}

.kw-status-pill.maintenance {
  color: #5b8def;
  border-color: color-mix(in srgb, #5b8def 40%, var(--hairline));
}

.kw-maintenance-tag {
  color: #5b8def;
  font-weight: 600;
  margin-left: 6px;
}

.kw-inactive-tag {
  color: var(--pending);
  font-weight: 600;
  margin-left: 6px;
}

/* ---------- Monitor-Übersicht: Werkbank und Störungsleiste ---------- */

/* Muss stehen: die Panels der beiden Darstellungen tragen display:grid aus ihrer
   eigenen Regel, und das gewinnt sonst gegen das hidden-Attribut. */
[hidden] { display: none !important; }

/* Nur für Vorlesehilfen — die Rückmeldung beim Verschieben per Tastatur. */
.kw-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.kw-missing-target-tag {
  color: var(--fg-muted);
  font-weight: 600;
  margin-left: 6px;
}

/* Werkzeugleiste: Umschalter links, "Neuer Monitor" rechts. */
.kw-toolbar {
  justify-content: space-between;
  align-items: center;
  gap: 12px 16px;
  flex-wrap: wrap;
}
.kw-toolbar-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  min-width: 0;
}
.kw-toolbar .kw-button-secondary { flex: 0 0 auto; }
.kw-toolbar-right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  min-width: 0;
}
/* Clientsuche über die bereits gerenderten Zeilen — kein Request, keine
   zusätzliche Ladezeit. */
.kw-search {
  width: 220px;
  max-width: 100%;
  margin: 0;
}
.kw-search-empty {
  padding: 24px 20px;
  text-align: center;
  color: var(--fg-muted);
  font-size: 14px;
}
@media (max-width: 640px) {
  .kw-toolbar-right { width: 100%; }
  .kw-search { width: 100%; }
}

/* Beide Darstellungen stehen im DOM, gewechselt wird nur die Sichtbarkeit —
   also ein segmented control und keine Links. */
.kw-segmented {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--panel);
}
.kw-segment {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-muted);
  background: transparent;
  border: 0;
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease, background 0.15s ease;
}
.kw-segment:hover { color: var(--fg); }
/* aria-selected statt einer eigenen Klasse: das Attribut muss für die
   Vorlesehilfe ohnehin gepflegt werden, eine zweite Wahrheit daneben wäre
   eine Fehlerquelle. */
.kw-segment[aria-selected="true"] {
  color: var(--fg);
  background: var(--panel-raised);
  box-shadow: inset 0 0 0 1px var(--brass-dim);
}

/* Erscheint nur, wenn überhaupt eine eigene Reihenfolge gespeichert ist — ein
   Knopf ohne Wirkung wäre schlimmer als keiner. */
.kw-reset-order {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-muted);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.kw-reset-order:hover { color: var(--brass); }

/* Die ganze Zeile bleibt klickbar: der Name trägt den Link, der sich per ::after
   über die Zeile legt. Deshalb muss der Griff darüberliegen — ein button innerhalb
   eines a wäre ungültiges HTML und würde beim Klick den Monitor mit öffnen. */
.kw-monitor-list .kw-monitor-row { position: relative; }
.kw-monitor-link { color: inherit; }
.kw-monitor-link::after { content: ""; position: absolute; inset: 0; }

/* Griff zum Verschieben, links in jeder Zeile. */
.kw-drag-handle {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--fg-muted);
  opacity: 0;
  cursor: grab;
  /* Ohne das scrollt auf dem Handy die Seite, statt die Zeile zu ziehen. Nur hier,
     nicht auf der Zeile: sonst lässt sich die Liste nicht mehr scrollen. */
  touch-action: none;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.kw-monitor-row:hover .kw-drag-handle,
.kw-monitor-row:focus-within .kw-drag-handle { opacity: 1; color: var(--fg); }
.kw-drag-handle:active { cursor: grabbing; }
.kw-drag-handle:focus-visible { opacity: 1; color: var(--fg); outline: 2px solid var(--brass); outline-offset: 2px; }
/* Geräte ohne Hover haben kein "Überfahren" — dort muss der Griff stehen. */
@media (hover: none) {
  .kw-drag-handle { opacity: 0.55; }
}

/* Die gezogene Zeile liegt über den anderen, damit man sieht, was man trägt. */
.kw-monitor-row.dragging {
  background: var(--panel-raised);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  position: relative;
  z-index: 2;
  opacity: 0.9;
}

/* ---------- Werkbank ---------- */

.kw-main > div > .kw-monitor-list,
.kw-list-head { min-width: 0; }

.kw-list-head {
  display: grid;
  grid-template-columns: 32px 96px minmax(0, 1fr) 92px 74px 124px;
  gap: 16px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
}
.kw-list-head .kw-num { text-align: right; }

.a-row { grid-template-columns: 32px 96px minmax(0, 1fr) 92px 74px 124px; }

.kw-status {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.kw-status-word {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.kw-status-word.up          { color: var(--up); }
.kw-status-word.down        { color: var(--down); }
.kw-status-word.pending     { color: var(--pending); }
.kw-status-word.unverifiable { color: var(--unverifiable); }
.kw-status-word.maintenance { color: #5b8def; }

/* Lange Namen: .kw-monitor-name bricht sonst um. Eine Zeile mit Ellipse, der
   volle Name steht im title-Attribut. */
.kw-name { min-width: 0; }
.kw-name .kw-monitor-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kw-mini {
  display: block;
  width: 92px;
  position: relative;
}
.kw-flat {
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  border-radius: 1px;
  background: var(--hairline);
}

/* ---------- Störungsleiste ---------- */

.kw-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 22px;
}
.kw-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-muted);
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
  /* Die Pillen umbrechen als ganze, nicht mitten in der Beschriftung. */
  white-space: nowrap;
  flex: 0 0 auto;
}
.kw-pill:hover { color: var(--fg); }
.kw-pill.active {
  color: var(--fg);
  border-color: var(--brass-dim);
  background: var(--panel-raised);
}

.kw-section { margin-bottom: 26px; }
.kw-section-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--fg-muted);
  margin: 0 0 10px;
}
.kw-count {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0;
}
/* Erklärt den Zähler. Ohne ihn steht "Störungen 3" neben einem Kopf, der "1 down"
   meldet — beides richtig, aber unterschiedlich gezählt, und das sieht ohne
   Erklärung nach Fehler aus. */
.kw-note {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg-muted);
}
.kw-section-down .kw-section-head { color: var(--down); }
.kw-section-unverifiable .kw-section-head { color: var(--unverifiable); }
.kw-section-inactive .kw-section-head { color: var(--pending); }

/* Wichtig: dasselbe Spaltenraster wie die volle Zeile, nur ohne Inhalt in den
   letzten beiden Spuren. Sonst steht der Verlauf in jedem Abschnitt woanders und
   die Spalte lässt sich nicht mehr von oben nach unten lesen. */
.b-row, .b-compact { grid-template-columns: 32px 16px minmax(0, 1fr) 92px 74px 124px; }

.b-compact {
  min-height: 34px;
  padding: 8px 20px;
}
.b-compact .kw-monitor-name { font-size: 14px; font-weight: 500; }
.b-compact .kw-monitor-type { display: inline; margin: 0 0 0 8px; }

/* ---------- Fremde Listen (Probes, Vorlagen, Wartung, Statusseiten) ---------- */

/* Eigene Raster statt Inline-Styles: nur so greifen die Mobil-Regeln und
   lassen sich Spalten an einer Stelle ändern. */
.kw-row-probe           { grid-template-columns: 16px minmax(0, 1fr) 140px 130px 16px; }
.kw-row-email-template  { grid-template-columns: 16px minmax(0, 1fr) 140px 100px; }
.kw-row-window          { grid-template-columns: 16px minmax(0, 1fr) 160px 16px; }
.kw-row-status-page     { grid-template-columns: 16px minmax(0, 1fr) 100px 16px; }
.kw-public-monitor-row  { grid-template-columns: 16px minmax(0, 1fr) auto; cursor: default; }
.kw-incident-probe      { grid-template-columns: 90px 120px 180px minmax(0, 1fr); align-items: center; }

/* ---------- Monitor-Übersicht bei 640 px ---------- */

@media (max-width: 640px) {
  .kw-list-head { display: none; }

  /* Der Griff läuft über alle Zeilen: er gehört zur ganzen Zeile und bleibt so
     auch dann erreichbar, wenn die Zeile hoch wird. */
  .a-row {
    grid-template-columns: 32px auto minmax(0, 1fr);
    grid-template-areas:
      "grip status name"
      "grip bars   bars"
      "grip uptime stamp";
    row-gap: 10px;
  }
  .a-row .kw-grip   { grid-area: grip; align-self: center; }
  .a-row .kw-status { grid-area: status; }
  .a-row .kw-name   { grid-area: name; text-align: right; }
  .a-row .kw-bars   { grid-area: bars; }
  .a-row .kw-uptime { grid-area: uptime; text-align: left; }
  .a-row .kw-timestamp { grid-area: stamp; }
  /* Die Zeile bekommt die volle Breite: 24 Balken auf 328 px sind dort besser
     lesbar als auf 92 px, nicht schlechter. */
  .a-row .kw-mini { width: 100%; }

  .b-row {
    grid-template-columns: 32px auto minmax(0, 1fr);
    grid-template-areas:
      "grip dot  name"
      "grip bars bars";
    row-gap: 8px;
  }
  .b-row .kw-grip      { grid-area: grip; align-self: center; }
  .b-row .status-dot   { grid-area: dot; }
  .b-row .kw-name      { grid-area: name; }
  .b-row .kw-bars      { grid-area: bars; }
  .b-row .kw-uptime, .b-row .kw-timestamp { display: none; }
  .b-row .kw-mini { width: 100%; }

  .kw-note { display: none; }

  /* Die festen Spalten dieser Listen laufen auf 375 px über den Rand. Auf dem
     Handy werden sie zu umbrechenden Zeilen: Name oben, Zeit und Aktion
     darunter. */
  .kw-row-probe,
  .kw-row-email-template,
  .kw-row-window,
  .kw-row-status-page,
  .kw-public-monitor-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
  }
  .kw-row-probe > span:nth-child(2),
  .kw-row-email-template > span:nth-child(2),
  .kw-row-window > span:nth-child(2),
  .kw-row-status-page > span:nth-child(2) {
    flex: 1 1 calc(100% - 28px);
    min-width: 0;
  }
  .kw-row-probe > .kw-timestamp,
  .kw-row-email-template > .kw-timestamp,
  .kw-row-window > .kw-timestamp,
  .kw-row-status-page > .kw-monitor-type {
    text-align: left;
  }
  .kw-row-probe > .kw-auth-link,
  .kw-row-email-template > .kw-auth-link,
  .kw-row-window > .kw-chevron,
  .kw-row-status-page > .kw-chevron,
  .kw-public-monitor-row > .kw-status-word {
    margin-left: auto;
  }
  .kw-row-probe > span:last-child:empty { display: none; }

  .kw-incident-probe {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 12px;
  }
  .kw-incident-probe > :last-child { flex-basis: 100%; }

  /* Bedienziele auf Daumengröße. */
  .kw-back,
  .kw-pill,
  .kw-segment,
  .kw-avatar-remove,
  .kw-reset-order { min-height: 44px; }
  .kw-pill { padding: 10px 14px; }
  .kw-segment { padding: 10px 12px; }
  .kw-avatar-remove { padding: 8px 0; }
  .kw-drag-handle { width: 32px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Marketing / Verkaufsfunnel ---------- */

.kw-marketing-main {
  flex: 1 0 auto;
}

.kw-public-header {
  position: sticky;
  top: 0;
  z-index: 20;
  align-items: center;
  background: var(--ink);
}

.kw-public-nav {
  display: flex;
  align-items: center;
  gap: 20px;
}

.kw-public-nav-links {
  display: flex;
  gap: 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
}

.kw-public-nav-links a:hover { color: var(--brass); }

.kw-public-login {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
}
.kw-public-login:hover { color: var(--brass); }

.kw-public-header .kw-button {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0 14px;
  font-size: 13px;
}

.kw-marketing-flashes {
  max-width: 1120px;
  margin: 16px auto 0;
  padding: 0 32px;
}

.kw-hero {
  padding: 84px 32px 72px;
  scroll-margin-top: 90px;
}

.kw-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 56px;
  align-items: center;
}

.kw-eyebrow {
  margin: 0 0 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--brass);
}

.kw-display-xl {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(42px, 6vw, 72px);
  line-height: 0.98;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.kw-display-lg {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.kw-marketing-lead {
  margin: 20px 0 0;
  max-width: 680px;
  font-size: 18px;
  line-height: 1.65;
  color: var(--fg-muted);
}

.kw-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.kw-hero-actions .kw-button,
.kw-hero-actions .kw-button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 2.5rem;
}

.kw-hero-note {
  margin: 20px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-muted);
}

.kw-hero-panel {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 24px;
}

.kw-hero-panel .kw-pulse-hero {
  height: 120px;
  margin: 0 0 18px;
  border: none;
  background: transparent;
}

.kw-hero-monitors {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.kw-hero-monitor {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-muted);
}

.kw-hero-monitor strong {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
}

.kw-hero-monitor span:last-child { margin-left: auto; }

.kw-hero-caption {
  margin: 14px 0 0;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
}

.kw-marketing-section {
  padding: 72px 32px;
  border-top: 1px solid var(--hairline);
  scroll-margin-top: 90px;
}

.kw-marketing-section--alt {
  background: color-mix(in srgb, var(--panel) 45%, var(--ink));
}

.kw-marketing-inner {
  max-width: 1120px;
  margin: 0 auto;
}

.kw-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 32px;
}

.kw-card {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 24px;
}

.kw-card-icon {
  color: var(--brass);
  margin-bottom: 14px;
}

.kw-card-title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.kw-card-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--fg-muted);
}

.kw-check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 32px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  overflow: hidden;
}

.kw-check-item {
  background: var(--panel);
  padding: 18px 20px;
}

.kw-check-name {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brass);
}

.kw-check-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg-muted);
}

.kw-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 44px;
  margin-top: 32px;
}

.kw-feature {
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
}

.kw-feature-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.kw-feature-title .icon {
  flex: 0 0 auto;
  color: var(--brass);
}

.kw-feature-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--fg-muted);
}

.kw-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 32px;
  counter-reset: kw-step;
}

.kw-step {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 26px 24px 24px;
}

.kw-step::before {
  counter-increment: kw-step;
  content: "0" counter(kw-step);
  display: block;
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--brass);
}

.kw-plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 32px;
}

.kw-plan-card {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 28px;
}

.kw-plan-card--featured {
  border-color: color-mix(in srgb, var(--brass) 55%, var(--hairline));
}

.kw-plan-badge {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brass);
}

.kw-plan-name {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.kw-plan-price {
  margin: 6px 0 2px;
  font-family: var(--font-mono);
  font-size: 14px;
}

.kw-plan-limits {
  margin: 0 0 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-muted);
}

.kw-plan-list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  gap: 9px;
  font-size: 14px;
  color: var(--fg-muted);
}

.kw-plan-list li {
  position: relative;
  padding-left: 20px;
}

.kw-plan-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 1px;
  font-size: 12px;
  color: var(--up);
}

.kw-plan-card .kw-button,
.kw-plan-card .kw-button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
}

.kw-faq {
  max-width: 820px;
  margin-top: 24px;
  border-top: 1px solid var(--hairline);
}

.kw-faq-item {
  border-bottom: 1px solid var(--hairline);
}

.kw-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

.kw-faq-item summary::-webkit-details-marker { display: none; }

.kw-faq-item summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--brass);
}

.kw-faq-item[open] summary::after { content: "−"; }

.kw-faq-answer {
  margin: 0;
  padding: 0 0 18px;
  max-width: 720px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--fg-muted);
}

.kw-cta-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  gap: 40px;
  align-items: start;
  background: color-mix(in srgb, var(--brass) 8%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--brass) 35%, var(--hairline));
  border-radius: 12px;
  padding: 40px;
}

.kw-launch-panel {
  background: var(--panel-raised);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 22px;
}

.kw-launch-panel .kw-label {
  display: block;
  margin-bottom: 10px;
}

.kw-form-hint {
  margin: 16px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--fg-muted);
}

.kw-form-hint a { color: var(--brass); }
.kw-form-hint a:hover { text-decoration: underline; }

.kw-marketing a:focus-visible,
.kw-marketing summary:focus-visible,
.kw-public-header a:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}

@media (max-width: 900px) {
  .kw-public-nav-links { display: none; }

  .kw-hero { padding: 64px 24px 56px; }
  .kw-marketing-section { padding: 56px 24px; }
  .kw-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .kw-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kw-feature-grid,
  .kw-steps,
  .kw-plan-grid,
  .kw-cta-band { grid-template-columns: 1fr; }
  .kw-cta-band { padding: 32px; gap: 28px; }
}

@media (max-width: 640px) {
  .kw-public-header { padding: 14px 16px; }
  .kw-public-login { display: none; }
  .kw-hero { padding: 44px 16px 40px; }
  .kw-marketing-section { padding: 44px 16px; }
  .kw-marketing-flashes { padding: 0 16px; }
  .kw-display-xl { font-size: clamp(36px, 11vw, 48px); }
  .kw-display-lg { font-size: clamp(28px, 8vw, 36px); }
  .kw-card-grid,
  .kw-check-grid { grid-template-columns: 1fr; }
  .kw-plan-card { padding: 22px; }
  .kw-cta-band { padding: 24px; }
  .kw-hero-actions .kw-button,
  .kw-hero-actions .kw-button-secondary { width: 100%; }
}

/* ---------- Zwei-Faktor-Authentifizierung ---------- */

/* Einrichtung und Codeseite brauchen etwas mehr Breite als das Login-Formular. */
.kw-auth-panel-wide { max-width: 440px; }

/* App-Auswahl auf der Einrichtungsseite: gleiche Optik wie die FAQ auf der
   Startseite, nur kompakter und ohne Außenabstand im schmalen Panel. */
.kw-mfa-apps {
  margin: 0 0 20px;
  border-top: 1px solid var(--hairline);
}
.kw-mfa-apps summary { padding: 12px 0; font-size: 14px; }
.kw-mfa-apps .kw-faq-answer { padding-bottom: 6px; font-size: 13px; }

/* Weißer Grund ist Pflicht: ein QR-Code auf dunklem Panel ist unlesbar. */
.kw-mfa-qr {
  display: flex;
  justify-content: center;
  padding: 14px;
  margin-bottom: 18px;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 8px;
}
.kw-mfa-qr img { display: block; }

.kw-mfa-secret {
  display: block;
  padding: 10px 12px;
  background: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-align: center;
  word-break: break-all;
  user-select: all;
}

.kw-mfa-codes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}
.kw-mfa-codes code {
  display: block;
  padding: 10px 12px;
  background: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 14px;
  text-align: center;
  letter-spacing: 0.06em;
  user-select: all;
}

@media (max-width: 480px) {
  .kw-mfa-codes { grid-template-columns: 1fr; }
}

/* ---------- Änderungsverlauf ---------- */

/* Der Diff steht als vorformatierter Block: Zeilenumbrüche und Einrückung
   sind Teil der Aussage. Farben nur als Hintergrund, damit der Text lesbar
   bleibt — Zeichen (+/-) stehen ohnehin davor. */
.kw-diff {
  margin: 0;
  padding: 10px 12px;
  background: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre;
}

.kw-diff-add { display: block; color: var(--up); background: color-mix(in srgb, var(--up) 10%, transparent); }
.kw-diff-del { display: block; color: var(--down); background: color-mix(in srgb, var(--down) 10%, transparent); }
.kw-diff-hunk { display: block; color: var(--fg-muted); }
.kw-diff-context { display: block; color: var(--fg-muted); }