/* ============================================================
   Nextime – Oberfläche
   Dunkel zuerst (unterwegs, nachts), einhändig, große Flächen.
   Keine style-Attribute im Markup (CSP), alles über Klassen.
   ============================================================ */

@font-face { font-family: 'Figtree'; font-weight: 400; font-display: swap; src: url('fonts/figtree-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-weight: 500; font-display: swap; src: url('fonts/figtree-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-weight: 600; font-display: swap; src: url('fonts/figtree-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Bricolage'; font-weight: 500; font-display: swap; src: url('fonts/bricolage-grotesque-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Bricolage'; font-weight: 700; font-display: swap; src: url('fonts/bricolage-grotesque-latin-700-normal.woff2') format('woff2'); }

:root {
  --bg: #101318;
  --bg-deep: #0B0D11;
  --surface: #1A1F27;
  --surface-2: #161A21;
  --line: #2A313C;
  --text: #EDEFF2;
  --text-2: #C4CAD3;
  --muted: #9AA3B0;
  --accent: #F2A541;
  --accent-ink: #101318;
  --accent-soft: rgba(242, 165, 65, 0.12);
  --teal: #5CC8C2;
  --red: #F08A7A;
  --purple: #9D8CF2;
  --radius: 18px;
  --display: 'Bricolage', 'Figtree', system-ui, sans-serif;
  --body: 'Figtree', system-ui, -apple-system, sans-serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}
a { color: var(--accent); }
a:hover { color: #FFC57A; }
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--display); margin: 0; letter-spacing: -0.01em; }
h1 { font-size: 28px; font-weight: 700; line-height: 1.15; }
h2 { font-size: 20px; font-weight: 700; }
h3 { font-size: 13px; font-weight: 600; font-family: var(--body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
p { margin: 0; }
.hidden { display: none !important; }
.center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.tiny { font-size: 12px; }
.pre { white-space: pre-wrap; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Gerüst ------------------------------------------------ */

#app { min-height: 100vh; min-height: 100dvh; }
.screen {
  max-width: 560px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  padding: calc(16px + var(--safe-top)) 20px calc(104px + var(--safe-bottom));
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.screen.ohne-nav { padding-bottom: calc(32px + var(--safe-bottom)); }
.stack { display: flex; flex-direction: column; gap: 12px; }
.stack-lg { display: flex; flex-direction: column; gap: 20px; }
.row { display: flex; align-items: center; gap: 10px; }
.row.between { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }

.loading { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--accent); animation: drehen 0.9s linear infinite; }
.spinner.klein { width: 18px; height: 18px; border-width: 2px; }
@keyframes drehen { to { transform: rotate(360deg); } }

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

.topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; }
.marke { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text); }
.marke span { font-family: var(--display); font-weight: 700; font-size: 24px; letter-spacing: -0.02em; }
.marke svg { width: 28px; height: 28px; }
.powered { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); text-align: center; }
.powered b { color: var(--text); font-weight: 600; }

.icon-btn {
  width: 44px; height: 44px; border-radius: 22px; border: none;
  background: var(--surface); color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  cursor: pointer; text-decoration: none;
}
.icon-btn:hover { color: var(--text); }
.icon-btn svg { width: 20px; height: 20px; }
.offline { font-size: 12px; font-weight: 600; color: var(--accent); background: var(--accent-soft); padding: 6px 10px; border-radius: 12px; }

/* ---------- Navigation unten -------------------------------------- */

.nav {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(12px + var(--safe-bottom));
  width: calc(100% - 32px); max-width: 528px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px;
  background: rgba(26, 31, 39, 0.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line); border-radius: 24px; padding: 6px; z-index: 20;
}
.nav a {
  min-height: 50px; border-radius: 18px; color: var(--muted); text-decoration: none;
  font-size: 12px; font-weight: 500;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.nav a svg { width: 20px; height: 20px; }
.nav a.aktiv { background: #2A313C; color: var(--text); font-weight: 600; }

/* ---------- Aufnahme-Button --------------------------------------- */

.festhalten { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 12px 0; }
.festhalten .frage { color: var(--muted); font-size: 15px; }
.ring { width: 248px; height: 248px; border-radius: 50%; background: rgba(242, 165, 65, 0.08); display: flex; align-items: center; justify-content: center; }
.rec-btn {
  width: 200px; height: 200px; border-radius: 50%; border: none;
  background: var(--accent); color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  box-shadow: 0 10px 40px rgba(242, 165, 65, 0.25);
  transition: transform 0.15s ease;
}
.rec-btn:active { transform: scale(0.96); }
.rec-btn svg { width: 72px; height: 72px; }
.festhalten .hinweis { font-family: var(--display); font-weight: 500; font-size: 22px; }
.link-btn { background: none; border: none; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 10px; min-height: 44px; font-size: 15px; }
.link-btn:hover { color: var(--text); }

/* ---------- Aufnahme läuft (Overlay) ------------------------------ */

.overlay {
  position: fixed; inset: 0; z-index: 50; background: var(--bg);
  display: flex; flex-direction: column;
  padding: calc(20px + var(--safe-top)) 24px calc(32px + var(--safe-bottom));
  gap: 22px;
}
.overlay .kopf { display: flex; align-items: center; justify-content: space-between; max-width: 560px; width: 100%; margin: 0 auto; }
.live { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--accent); }
.live i { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); animation: puls 1.2s ease-in-out infinite; }
@keyframes puls { 50% { opacity: 0.3; } }
.timer { font-family: var(--display); font-weight: 500; font-size: 64px; text-align: center; letter-spacing: -0.02em; margin-top: 4vh; font-variant-numeric: tabular-nums; }
.pegel { height: 96px; display: flex; align-items: center; justify-content: center; gap: 5px; }
.pegel span { width: 5px; height: 8px; border-radius: 3px; background: var(--accent); transition: height 0.08s linear; }
.ziel-info { max-width: 560px; margin: 0 auto; width: 100%; background: var(--surface); border-radius: var(--radius); padding: 14px 16px; font-size: 15px; color: var(--text-2); }
.ziel-info b { color: var(--text); }
.stopp { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.stopp-btn { width: 92px; height: 92px; border-radius: 50%; border: 3px solid var(--accent); background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.stopp-btn i { width: 30px; height: 30px; border-radius: 8px; background: var(--accent); }

/* ---------- Karten, Listen ---------------------------------------- */

.card { background: var(--surface); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.card.flach { background: var(--surface-2); }
.card.akzent { background: var(--accent-soft); border: 1px solid #5A3E1A; }
.card.warn { background: rgba(240, 138, 122, 0.08); border: 1px solid #5A2E28; }
.card h3 { margin-bottom: 2px; }
.card-link { text-decoration: none; color: var(--text); display: block; }
.card-link:hover .card { background: #20262F; }

.liste { display: flex; flex-direction: column; gap: 8px; }
.eintrag {
  display: flex; align-items: center; gap: 12px; min-height: 56px;
  padding: 12px 14px; border-radius: 16px; background: var(--surface-2);
  color: var(--text); text-decoration: none; border: none; width: 100%; text-align: left; cursor: pointer;
}
.eintrag:hover { background: #1D222A; }
.eintrag .titel { font-weight: 600; font-size: 15px; }
.eintrag .unter { font-size: 13px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.eintrag .pfeil { color: var(--muted); flex-shrink: 0; }
.punkt { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; background: var(--muted); }
.pin { color: var(--accent); font-size: 12px; }

.status { font-size: 12px; font-weight: 600; padding: 4px 8px; border-radius: 10px; background: var(--line); color: var(--text-2); white-space: nowrap; }
.status.laeuft { background: var(--accent-soft); color: var(--accent); }
.status.fehler { background: rgba(240, 138, 122, 0.14); color: var(--red); }
.status.ok { background: rgba(92, 200, 194, 0.14); color: var(--teal); }

/* ---------- Chips ------------------------------------------------- */

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px;
  padding: 8px 12px; border-radius: 18px; background: var(--surface);
  font-size: 14px; color: var(--text); text-decoration: none; border: 1px solid transparent; cursor: pointer;
}
.chip.akzent { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.chip.aktiv { border-color: var(--accent); }
.chip.art-ergaenzt, .chip.art-gleiche_situation, .chip.art-folge, .chip.art-voraussetzung { border-color: #2E5654; color: var(--teal); background: transparent; }
.chip.art-widerspricht { border-color: #5A2E28; color: var(--red); background: transparent; }
.chip.vorschlag { border-style: dashed; }
.chip small { color: var(--muted); font-size: 12px; }

/* Themenfarben */
.f0 { --f: #F2A541; } .f1 { --f: #5CC8C2; } .f2 { --f: #9D8CF2; } .f3 { --f: #F08A7A; }
.f4 { --f: #7FC97A; } .f5 { --f: #E8C547; } .f6 { --f: #6FA8F2; } .f7 { --f: #9AA3B0; }
.punkt.f0, .punkt.f1, .punkt.f2, .punkt.f3, .punkt.f4, .punkt.f5, .punkt.f6, .punkt.f7 { background: var(--f); }

/* ---------- Erkenntnis -------------------------------------------- */

.kopfzeile { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lead { font-size: 17px; color: var(--text-2); line-height: 1.5; }
.abschnitt { display: flex; flex-direction: column; gap: 10px; }
.punkte { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; cursor: pointer; padding: 4px 0; }
.check input { width: 22px; height: 22px; margin: 0; accent-color: var(--accent); flex-shrink: 0; }
.check input:checked + span { color: var(--muted); text-decoration: line-through; }
.warnbox { border: 1px solid #5A3E1A; background: rgba(242, 165, 65, 0.07); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.warnbox b { color: var(--accent); }
.widerbox { border: 1px solid #5A2E28; background: rgba(240, 138, 122, 0.07); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.widerbox b { color: var(--red); }
.verbindung { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.verbindung .chip { flex: 1 1 auto; }
.mini-btn { min-height: 36px; min-width: 36px; padding: 0 12px; border-radius: 18px; border: none; background: var(--surface); color: var(--text); cursor: pointer; font-size: 14px; }
.mini-btn svg { width: 16px; height: 16px; }
.mini-btn.ja { color: var(--teal); }
.mini-btn.nein { color: var(--red); }
.aktionsleiste {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(12px + var(--safe-bottom)); width: calc(100% - 32px); max-width: 528px;
  display: flex; gap: 10px; z-index: 20;
}
.versionen .eintrag { min-height: 48px; }
details.klapp { background: var(--surface-2); border-radius: 16px; padding: 4px 14px; }
details.klapp summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; font-size: 15px; list-style: none; }
details.klapp summary::-webkit-details-marker { display: none; }
details.klapp summary::after { content: '›'; margin-left: auto; color: var(--muted); transition: transform 0.15s; }
details.klapp[open] summary::after { transform: rotate(90deg); }
details.klapp > div { padding: 4px 0 14px; display: flex; flex-direction: column; gap: 10px; }

/* ---------- Buttons ----------------------------------------------- */

.btn {
  min-height: 52px; padding: 0 20px; border-radius: 26px; border: none;
  background: var(--surface); color: var(--text); font-weight: 600; font-size: 16px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  cursor: pointer; text-decoration: none;
}
.btn:hover { background: #222833; color: var(--text); }
.btn svg { width: 20px; height: 20px; }
.btn.primaer { background: var(--accent); color: var(--accent-ink); }
.btn.primaer:hover { background: #F5B35C; color: var(--accent-ink); }
.btn.gefahr { color: var(--red); }
.btn.klein { min-height: 40px; font-size: 14px; padding: 0 14px; }
.btn.breit { width: 100%; }
.btn[disabled] { opacity: 0.5; cursor: default; }
.btn-reihe { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-reihe .btn { flex: 1 1 140px; }

/* ---------- Formulare --------------------------------------------- */

.form { display: flex; flex-direction: column; gap: 14px; }
.feld { display: flex; flex-direction: column; gap: 6px; }
.feld label, .feld .label { font-size: 14px; font-weight: 600; color: var(--text-2); }
.feld .hilfe { font-size: 13px; color: var(--muted); }
input[type=text], input[type=email], input[type=password], input[type=search], input[inputmode=numeric], textarea, select {
  width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font-size: 16px;
}
textarea { min-height: 120px; resize: vertical; line-height: 1.45; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); }
.code-input { font-family: var(--display); font-size: 28px !important; letter-spacing: 0.3em; text-align: center; }
.schalter { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; cursor: pointer; }
.schalter input { appearance: none; -webkit-appearance: none; width: 50px; height: 30px; border-radius: 15px; background: var(--line); position: relative; cursor: pointer; flex-shrink: 0; margin: 0; transition: background 0.15s; }
.schalter input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform 0.15s; }
.schalter input:checked { background: var(--accent); }
.schalter input:checked::after { transform: translateX(20px); }
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fehlertext { color: var(--red); font-size: 14px; }
.suche { display: flex; align-items: center; gap: 8px; background: var(--surface); border-radius: 22px; padding: 6px 6px 6px 16px; }
.suche input { border: none; background: transparent; min-height: 44px; padding: 0; }
.suche input:focus { border: none; }

/* ---------- Anmeldung --------------------------------------------- */

.auth { max-width: 420px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; padding: calc(40px + var(--safe-top)) 24px calc(32px + var(--safe-bottom)); display: flex; flex-direction: column; gap: 24px; }
.auth .logo-gross { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 2vh 0 8px; }
.auth .logo-gross .row { gap: 10px; }
.auth .logo-gross svg { width: 52px; height: 52px; }
.auth .logo-gross span { font-family: var(--display); font-weight: 700; font-size: 46px; letter-spacing: -0.03em; }
.auth .claim { color: var(--muted); text-align: center; }
.auth .unten { margin-top: auto; display: flex; flex-direction: column; gap: 14px; align-items: center; }

/* ---------- Netz -------------------------------------------------- */

.netz-flaeche { background: var(--surface-2); border-radius: 22px; overflow: hidden; touch-action: pan-y; }
.netz-flaeche svg { display: block; width: 100%; height: auto; }
.netz-flaeche .kante { stroke: var(--teal); stroke-opacity: 0.55; stroke-width: 1.4; }
.netz-flaeche .kante.widerspricht { stroke: var(--red); stroke-opacity: 0.9; stroke-dasharray: 4 4; }
.netz-flaeche .kante.vorschlag { stroke-opacity: 0.25; stroke-dasharray: 2 4; }
.netz-flaeche .wolke { fill: var(--f); fill-opacity: 0.07; }
.netz-flaeche .knoten { fill: var(--f); cursor: pointer; }
.netz-flaeche .knoten:hover { stroke: #fff; stroke-width: 2; }
.netz-flaeche .zentrum { fill: var(--f); }
.netz-flaeche text { fill: var(--text); font-family: var(--body); font-size: 13px; font-weight: 600; }
.netz-flaeche text.klein { font-size: 11px; font-weight: 500; fill: var(--text-2); }

/* ---------- QR, Toast, Sonstiges ---------------------------------- */

.qr { width: 200px; height: 200px; border-radius: 12px; align-self: center; }
.mono { font-family: ui-monospace, Menlo, monospace; font-size: 14px; word-break: break-all; }
.toast {
  position: fixed; left: 50%; bottom: calc(96px + var(--safe-bottom)); transform: translate(-50%, 20px);
  max-width: calc(100% - 40px); width: max-content;
  background: #EDEFF2; color: #101318; font-weight: 600; font-size: 15px;
  padding: 12px 18px; border-radius: 16px; opacity: 0; pointer-events: none;
  transition: opacity 0.2s, transform 0.2s; z-index: 60; box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}
.toast.zeigen { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast a { color: #101318; }
.leer { text-align: center; color: var(--muted); padding: 32px 12px; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.leer svg { width: 48px; height: 48px; opacity: 0.6; }
.trenner { height: 1px; background: var(--line); margin: 4px 0; }
.dialog-hintergrund { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 40; display: flex; align-items: flex-end; justify-content: center; }
.dialog { width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto; background: var(--bg); border-radius: 24px 24px 0 0; padding: 20px 20px calc(24px + var(--safe-bottom)); display: flex; flex-direction: column; gap: 14px; }
.player { display: flex; align-items: center; gap: 10px; }
.player audio { width: 100%; height: 40px; }
.geteilt-kopf { display: flex; flex-direction: column; gap: 6px; }
.faustregel { font-family: var(--display); font-weight: 500; font-size: 19px; line-height: 1.3; }

@media (min-width: 700px) {
  .screen { padding-top: calc(28px + var(--safe-top)); }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* iOS: langes Drücken startet sonst die Textauswahl bzw. die Lupe */
.festhalten, .overlay, .aktionsleiste, [data-rec] {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
html.nimmt-auf, html.nimmt-auf * { -webkit-user-select: none !important; user-select: none !important; -webkit-touch-callout: none !important; }