/* devartec Hub — Stylesheet.
   Struktur 1:1 aus der CHP-Vorlage (`quellcode/client/interview.css`) übernommen,
   damit ein Vergleich später möglich bleibt. Getauscht sind nur die Farbtoken:
   statt Navy/Gelb die Palette der devartec-Site (ink, accent, line, bg).
   Klassenpräfix `iv-` für alles Interview-Bezogene, `hub-` für die App-Shell. */

:root {
  --ink: #1f2327;
  --ink-soft: #4a4f55;
  --ink-mute: #6b7077;
  --line: #dfe2e6;
  --line-strong: #c7ccd1;
  --bg: #f5f6f7;
  --bg-page: #fbfbfc;
  --accent: #5d7d9a;
  --accent-soft: #8ea9c4;
  --dark: #161516;
  --success: #2f7d5b;

  --iv-surface: var(--bg);
  --iv-fg: var(--ink);
  --iv-muted: var(--ink-soft);
  --iv-subtle: var(--ink-mute);
  --iv-border: var(--line);
  --iv-r-md: 8px;
  --iv-r-lg: 16px;
  --iv-r-pill: 999px;
  --iv-sh1: 0 1px 2px rgba(31, 35, 39, 0.06), 0 1px 1px rgba(31, 35, 39, 0.04);
  --iv-sh2: 0 4px 16px rgba(31, 35, 39, 0.09);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  color: var(--ink);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
}

/* ===== App-Shell (nur hinter dem Login) ===== */

.hub-shell { min-height: 100vh; display: flex; flex-direction: column; }

.topnav {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 14px clamp(16px, 4vw, 28px);
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { height: 26px; width: auto; display: block; }
.brand .wm {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.topnav nav { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.topnav nav a,
.topnav nav span {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-mute);
  text-decoration: none;
}
.topnav nav a:hover { color: var(--ink); }
.topnav nav .active { color: var(--ink); }
.topnav nav .logout {
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-mute);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.topnav nav .logout:hover { color: var(--ink); }

.hub-wrap { flex: 1; width: 100%; max-width: 1020px; margin: 0 auto; padding: 30px clamp(16px, 4vw, 28px) 60px; }

/* ===== gemeinsame Bausteine ===== */

.iv-title {
  display: block;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--ink);
}
.iv-sub { display: block; font-size: 13px; color: var(--iv-muted); font-weight: 500; margin-top: 4px; }
.iv-section-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  color: var(--iv-subtle);
  margin-bottom: 10px;
}
.iv-card {
  background: #fff;
  border: 1px solid var(--iv-border);
  border-radius: var(--iv-r-lg);
  box-shadow: var(--iv-sh1);
  padding: 20px 22px;
  margin-bottom: 16px;
}
.iv-btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
  padding: 11px 22px;
  border-radius: var(--iv-r-pill);
  border: none;
  cursor: pointer;
  transition: 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.iv-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.iv-btn-primary { background: var(--ink); color: #fff; }
.iv-btn-primary:hover:not(:disabled) { background: var(--dark); }
.iv-btn-ghost { background: #fff; color: var(--iv-muted); border: 1px solid var(--iv-border); }
.iv-btn-ghost:hover:not(:disabled) { border-color: var(--line-strong); color: var(--ink); }
.iv-btn-danger { background: #fff; color: #a33; border: 1px solid #e7c9c9; }
.iv-btn-danger:hover:not(:disabled) { background: #fdf5f5; }
.iv-btn-sm { font-size: 12.5px; padding: 7px 14px; }
.iv-btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
/* Ein Hinweis direkt vor einer Knopfreihe klebte sonst an den Knöpfen. */
.iv-hint + .iv-btn-row { margin-top: 12px; }

.iv-label {
  display: block;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--iv-subtle);
  margin-bottom: 6px;
}
.iv-hint { font-size: 12px; color: var(--iv-subtle); font-weight: 500; margin-top: 5px; }
.iv-input,
.iv-textarea {
  width: 100%;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--iv-border);
  border-radius: var(--iv-r-md);
  padding: 10px 13px;
  transition: 0.15s;
}
.iv-textarea { line-height: 1.55; resize: vertical; min-height: 92px; }
.iv-input:focus,
.iv-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(93, 125, 154, 0.14);
}
.iv-field { margin-bottom: 14px; }

.iv-notice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border-radius: var(--iv-r-md);
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.55;
  font-weight: 500;
  margin-bottom: 11px;
}
.iv-notice b { font-weight: 800; }
.iv-notice-warn { background: rgba(93, 125, 154, 0.1); color: #3c5468; border: 1px solid rgba(93, 125, 154, 0.32); }
.iv-notice-info { background: var(--iv-surface); color: var(--iv-muted); border: 1px solid var(--iv-border); }
.iv-notice-error { background: #fdf3f3; color: #8c2f2f; border: 1px solid #edcccc; }
.iv-notice[hidden] { display: none !important; }

.iv-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: var(--iv-r-pill);
  background: rgba(93, 125, 154, 0.16);
  color: #3c5468;
  white-space: nowrap;
}
.iv-status {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 9px;
  border-radius: var(--iv-r-pill);
  white-space: nowrap;
}
.iv-status-open { background: var(--iv-surface); color: var(--iv-muted); }
.iv-status-running { background: rgba(93, 125, 154, 0.2); color: #33485a; }
.iv-status-done { background: rgba(47, 125, 91, 0.13); color: var(--success); }
.iv-status-expired { background: #f4eaea; color: #8c6a6a; }

/* ===== Login ===== */

.hub-login { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.hub-login-box { width: 100%; max-width: 380px; }
.hub-login .brand { margin-bottom: 26px; }
.hub-login .brand img { height: 30px; }

/* ===== Liste ===== */

.iv-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.iv-tablecard {
  background: #fff;
  border: 1px solid var(--iv-border);
  border-radius: var(--iv-r-lg);
  box-shadow: var(--iv-sh1);
  overflow: hidden;
}
.iv-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.iv-table thead th {
  background: var(--iv-surface);
  text-align: left;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  color: var(--iv-subtle);
  padding: 11px 16px;
  border-bottom: 1px solid var(--iv-border);
  white-space: nowrap;
}
.iv-table tbody td { padding: 12px 16px; border-bottom: 1px solid var(--iv-border); vertical-align: middle; }
.iv-table tbody tr:last-child td { border-bottom: none; }
.iv-table tbody tr { transition: background 0.12s; }
.iv-table tbody tr:hover { background: var(--iv-surface); }
.iv-row-name { font-weight: 800; color: var(--ink); letter-spacing: -0.01em; }
.iv-row-link { color: inherit; text-decoration: none; }
.iv-row-link:hover .iv-row-name { text-decoration: underline; }
.iv-muted { color: var(--iv-muted); }
.iv-cell-label { display: none; }
.iv-empty { padding: 34px 20px; text-align: center; color: var(--iv-subtle); font-size: 13.5px; font-weight: 500; }
.iv-row-meta { display: block; margin-top: 3px; font-size: 12px; font-weight: 500; color: var(--iv-subtle); }

.iv-linkbox {
  display: flex;
  gap: 8px;
  align-items: center;
  background: var(--iv-surface);
  border: 1px solid var(--iv-border);
  border-radius: var(--iv-r-md);
  padding: 9px 12px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12.5px;
  color: var(--iv-muted);
  word-break: break-all;
}
.iv-linkbox span { flex: 1; min-width: 0; }

.iv-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.iv-check {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.iv-check input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
.iv-check input:disabled { cursor: not-allowed; }
.iv-check input:disabled + span { color: var(--iv-subtle); }

/* ===== Detail: Ergebnis ===== */

.iv-result {
  background: #fff;
  border: 1px solid var(--iv-border);
  border-radius: var(--iv-r-lg);
  box-shadow: var(--iv-sh1);
  overflow: hidden;
}
.iv-result-body { padding: 6px 24px 20px; }
.iv-entry { padding: 16px 0; border-bottom: 1px solid var(--iv-border); }
.iv-entry:last-child { border-bottom: none; }
.iv-entry-q {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.45;
  margin-bottom: 7px;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.iv-entry-n { color: var(--iv-subtle); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.iv-entry-a { font-size: 14.5px; line-height: 1.62; color: var(--iv-muted); font-weight: 500; padding-left: 20px; white-space: pre-wrap; }
.iv-entry-extra {
  background: rgba(93, 125, 154, 0.05);
  border-left: 3px solid var(--accent);
  margin: 0 -24px;
  padding-left: 21px;
  padding-right: 24px;
}
.iv-md {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--iv-muted);
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--iv-surface);
  border: 1px solid var(--iv-border);
  border-radius: var(--iv-r-md);
  padding: 14px 16px;
  max-height: 460px;
  overflow: auto;
}
.iv-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 12px; }
.iv-tab {
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--iv-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 7px 12px;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
}
.iv-tab:hover:not(:disabled) { color: var(--ink); }
.iv-tab-on { color: var(--ink); border-bottom-color: var(--ink); }
.iv-tab:disabled { opacity: 0.45; cursor: not-allowed; }

/* ===== Öffentliche Seite ===== */

.iv-public { background: var(--bg-page); min-height: 100vh; }
.iv-public-wrap { max-width: 760px; margin: 0 auto; padding: 32px clamp(16px, 4vw, 28px) 56px; }

/* Eigene Maße für die Kopfzeile: die Shell-Werte des Hubs machten die Seite auf
   dem Handy breiter als den Viewport. */
.iv-public .topnav { padding: 14px clamp(16px, 4vw, 28px); gap: 12px; flex-wrap: wrap; }
.iv-public .topnav nav { margin-left: auto; min-width: 0; }
/* Hier steht bewusst die devartec-Wortmarke: wer einen Interview-Link bekommt,
   soll den Absender erkennen und nicht auf einer namenlosen Seite landen. */
.iv-public .topnav .brand img { height: 24px; }
.iv-public .topnav nav span { font-size: 11.5px; white-space: normal; text-align: right; }
.iv-public .iv-title { font-size: clamp(25px, 5vw, 33px); letter-spacing: -0.03em; }

.iv-lead { font-size: 15.5px; line-height: 1.6; color: var(--iv-muted); font-weight: 500; margin: 13px 0 24px; }
.iv-lead b { color: var(--ink); font-weight: 700; }
.iv-kicker {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 800;
  color: var(--iv-subtle);
  margin-bottom: 9px;
}
.iv-briefing { font-size: 14.5px; line-height: 1.65; color: var(--iv-fg); font-weight: 500; white-space: pre-wrap; }
.iv-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 11px; margin-bottom: 16px; }
.iv-fact { background: #fff; border: 1px solid var(--iv-border); border-radius: var(--iv-r-md); padding: 13px 15px; }
.iv-fact-k {
  display: block;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 800;
  color: var(--iv-subtle);
  margin-bottom: 4px;
}
.iv-fact-v { display: block; font-size: 14px; font-weight: 700; color: var(--ink); }

/* Chat */
.iv-chat-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.iv-chat-title { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.iv-progress {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--iv-subtle);
  white-space: nowrap;
}
.iv-bar { width: 104px; height: 6px; border-radius: 3px; background: var(--iv-border); overflow: hidden; }
.iv-bar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.4s ease; }

.iv-thread { display: flex; flex-direction: column; gap: 16px; margin-bottom: 22px; }
.iv-msg { display: flex; gap: 11px; max-width: 100%; }
.iv-av {
  width: 31px;
  height: 31px;
  border-radius: 50%;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
}
.iv-av-ai { background: var(--ink); color: #fff; }
.iv-av-me { background: var(--accent-soft); color: var(--ink); }
.iv-bubble {
  border-radius: var(--iv-r-lg);
  padding: 13px 16px;
  font-size: 14.5px;
  line-height: 1.6;
  font-weight: 500;
  white-space: pre-wrap;
  word-break: break-word;
}
.iv-msg-ai .iv-bubble {
  background: #fff;
  border: 1px solid var(--iv-border);
  box-shadow: var(--iv-sh1);
  border-top-left-radius: 5px;
  color: var(--iv-fg);
}
.iv-msg-me { flex-direction: row-reverse; }
.iv-msg-me .iv-bubble { background: var(--ink); color: #fff; border-top-right-radius: 5px; }
.iv-typing { display: flex; gap: 4px; padding: 5px 2px; }
.iv-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--iv-subtle); animation: iv-blink 1.2s infinite; }
.iv-typing i:nth-child(2) { animation-delay: 0.2s; }
.iv-typing i:nth-child(3) { animation-delay: 0.4s; }
@keyframes iv-blink {
  0%, 60%, 100% { opacity: 0.25; }
  30% { opacity: 1; }
}

.iv-composer {
  position: sticky;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(251, 251, 252, 0), var(--bg-page) 22%);
  padding: 16px 0 0;
}
.iv-composer-in {
  background: #fff;
  border: 1px solid var(--iv-border);
  border-radius: var(--iv-r-lg);
  box-shadow: var(--iv-sh2);
  padding: 11px 13px;
}
.iv-composer-in:focus-within { border-color: var(--accent); }
.iv-composer textarea {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.55;
  font-weight: 500;
  color: var(--ink);
  border: none;
  resize: none;
  outline: none;
  min-height: 54px;
  background: transparent;
}
.iv-composer textarea::placeholder { color: var(--iv-subtle); }
.iv-composer-foot { display: flex; align-items: center; gap: 10px; margin-top: 5px; }
.iv-waiting { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--iv-muted); }
.iv-waiting .iv-typing { padding: 0; }
.iv-composer-foot .iv-btn { margin-left: auto; }

/* Abschluss */
.iv-sum-block { margin-bottom: 18px; }
.iv-sum-q {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 5px;
  display: flex;
  align-items: flex-start;
  gap: 7px;
  flex-wrap: wrap;
}
.iv-sum-a {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--iv-muted);
  font-weight: 500;
  padding-left: 22px;
  border-left: 2px solid var(--iv-border);
  margin-left: 4px;
  white-space: pre-wrap;
}
.iv-sum-extra .iv-sum-a { border-left-color: var(--accent); }
.iv-divider { height: 1px; background: var(--iv-border); margin: 20px 0; }

.iv-center { text-align: center; padding: 60px 20px; }
.iv-center .iv-title { margin-bottom: 12px; }

@media (max-width: 700px) {
  .iv-bar { width: 64px; }
  .iv-row2 { grid-template-columns: 1fr; }
  .iv-public-wrap { padding-top: 22px; }
  .iv-composer-foot .iv-hint { display: none; }
  .iv-btn { justify-content: center; }
  .iv-head .iv-btn { width: 100%; }

  .iv-table thead { display: none; }
  .iv-table,
  .iv-table tbody,
  .iv-table tr,
  .iv-table td { display: block; width: 100%; }
  .iv-table tbody tr { padding: 13px 15px; border-bottom: 1px solid var(--iv-border); }
  .iv-table tbody td { padding: 0 0 7px; border: none; }
  .iv-table tbody td:last-child { padding-bottom: 0; }
  .iv-cell-label {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 800;
    color: var(--iv-subtle);
    margin-bottom: 3px;
  }
  .iv-row-name { font-size: 15.5px; }
  .iv-entry-extra { margin: 0 -18px; padding-left: 15px; padding-right: 18px; }
  .iv-result-body { padding: 6px 18px 18px; }
}