/* Werk · nora.how · Stylesheet. CI: Papier, Tinte, Glut. Dünne Linien, keine Schatten, keine Verläufe. */
@font-face { font-family: 'IBM Plex Sans'; font-weight: 400; font-display: swap; src: url('/fonts/ibm-plex-sans/ibm-plex-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 500; font-display: swap; src: url('/fonts/ibm-plex-sans/ibm-plex-sans-500.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 600; font-display: swap; src: url('/fonts/ibm-plex-sans/ibm-plex-sans-600.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-display: swap; src: url('/fonts/ibm-plex-mono/ibm-plex-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-display: swap; src: url('/fonts/ibm-plex-mono/ibm-plex-mono-500.woff2') format('woff2'); }

:root {
  --papier: #FFFFFF; --tinte: #0E0E10; --glut: #C8502E; --text: #33333A; --leise: #5E5E68; --linie: #D9D9DE; --flaeche: #F6F6F8;
  --tom: #C8502E; --lukas: #2E6FC8; --nora: #0E0E10; --ok: #2E8B57; --warn: #B8860B;
  --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --s12: 12px; --s15: 15px; --s19: 19px; --s24: 24px; --s31: 31px;
  --rand: 16px; --ecke: 2px; --nav-hoehe: 52px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --papier: #0B0B0D; --tinte: #F4F4F6; --glut: #E0633E; --text: #C9C9D1; --leise: #9A9AA3; --linie: #2A2A30; --flaeche: #141418; --tom: #E0633E; --lukas: #5B8FE0; --nora: #F4F4F6; }
}
:root[data-theme="dark"] { --papier: #0B0B0D; --tinte: #F4F4F6; --glut: #E0633E; --text: #C9C9D1; --leise: #9A9AA3; --linie: #2A2A30; --flaeche: #141418; --tom: #E0633E; --lukas: #5B8FE0; --nora: #F4F4F6; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papier); color: var(--text); font: 400 var(--s15)/1.5 var(--sans); min-height: 100dvh; display: flex; flex-direction: column; overflow-x: hidden; }
h1, h2, h3 { color: var(--tinte); font-weight: 600; line-height: 1.2; margin: 0 0 8px; letter-spacing: -0.01em; }
h1 { font-size: var(--s31); } h2 { font-size: var(--s24); } h3 { font-size: var(--s19); }
p { margin: 0 0 12px; } a { color: var(--tinte); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--linie); }
a:hover { text-decoration-color: var(--glut); }
small, .leise { color: var(--leise); font-size: var(--s12); }
.mono { font-family: var(--mono); font-size: var(--s12); letter-spacing: 0.01em; }
hr { border: 0; border-top: 1px solid var(--linie); margin: 16px 0; }
code { font-family: var(--mono); font-size: 0.92em; background: var(--flaeche); padding: 1px 4px; border-radius: var(--ecke); }

/* Seite */
.seite { flex: 1; width: 100%; max-width: 1120px; margin: 0 auto; padding: 20px var(--rand) 96px; }
.seite.breit { max-width: 1400px; }
.kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.fuss { font-family: var(--mono); font-size: var(--s12); color: var(--leise); border-top: 1px solid var(--linie); padding: 10px var(--rand); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* Navigation */
.nav { position: sticky; top: 0; z-index: 20; background: var(--papier); border-bottom: 1px solid var(--linie); height: var(--nav-hoehe); display: flex; align-items: center; gap: 4px; padding: 0 var(--rand); }
.nav .marke { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--tinte); text-decoration: none; margin-right: 12px; }
.nav .marke svg { width: 22px; height: 22px; }
.nav .marke .punkt { color: var(--glut); }
.nav a.eintrag { text-decoration: none; color: var(--leise); padding: 8px 10px; border-radius: var(--ecke); font-weight: 500; display: flex; align-items: center; gap: 6px; min-height: 44px; }
.nav a.eintrag:hover { color: var(--tinte); background: var(--flaeche); }
.nav a.eintrag.aktiv { color: var(--tinte); }
.nav a.eintrag.aktiv::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--glut); }
.nav a.eintrag.nur-handy { display: none; }
.nav .rechts { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--leise); font-size: var(--s12); font-family: var(--mono); }
.nav .rechts button { min-height: 32px; padding: 4px 8px; }
@media (max-width: 760px) {
  .nav { position: fixed; left: 0; right: 0; top: auto; bottom: 0; border-top: 1px solid var(--linie); border-bottom: 0; padding: 0 4px; height: calc(60px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); }
  .nav a.eintrag.nur-handy { display: flex; }
  .nav .marke, .nav .rechts { display: none; }
  .nav a.eintrag { flex: 1; flex-direction: column; justify-content: center; gap: 2px; padding: 4px 2px; font-size: 11px; min-height: 52px; }
  .nav a.eintrag.aktiv::before { position: absolute; top: 4px; }
  .nav a.eintrag { position: relative; }
  .seite { padding-top: 16px; padding-bottom: 150px; }
  .fuss { display: none; }
}

/* Bedienelemente */
button, .knopf { font: 500 var(--s15) var(--sans); color: var(--tinte); background: var(--papier); border: 1px solid var(--tinte); border-radius: var(--ecke); padding: 9px 14px; min-height: 44px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
button:hover, .knopf:hover { background: var(--flaeche); }
button.glut, .knopf.glut { background: var(--glut); border-color: var(--glut); color: #fff; }
button.glut:hover { filter: brightness(0.95); }
button.leise, .knopf.leise { border-color: var(--linie); color: var(--leise); }
button.klein { min-height: 32px; padding: 4px 10px; font-size: var(--s12); }
button:disabled { opacity: 0.5; cursor: default; }
input, textarea, select { font: 400 var(--s15) var(--sans); color: var(--tinte); background: var(--papier); border: 1px solid var(--linie); border-radius: var(--ecke); padding: 10px 12px; min-height: 44px; width: 100%; }
input:focus, textarea:focus, select:focus, button:focus-visible { outline: 2px solid var(--glut); outline-offset: 1px; border-color: var(--tinte); }
textarea { resize: vertical; min-height: 88px; }
label { display: block; font-size: var(--s12); color: var(--leise); margin-bottom: 4px; font-family: var(--mono); }
.feld { margin-bottom: 12px; }
.zeile { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.zeile > * { flex: 1 1 140px; }
.reihe { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Karten, Listen, Tabellen */
.karte { border: 1px solid var(--linie); border-radius: var(--ecke); padding: 14px 16px; background: var(--papier); }
.raster { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.liste { list-style: none; margin: 0; padding: 0; }
.liste > li { padding: 10px 0; border-top: 1px solid var(--linie); }
.liste > li:first-child { border-top: 0; }
table { width: 100%; border-collapse: collapse; font-size: var(--s15); }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--linie); vertical-align: top; }
th { font-family: var(--mono); font-size: var(--s12); font-weight: 500; color: var(--leise); }
td.zahl, th.zahl { text-align: right; font-family: var(--mono); }
.kennzahl { font-size: var(--s31); font-weight: 600; color: var(--tinte); line-height: 1.1; font-family: var(--mono); }
.chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: var(--s12); border: 1px solid var(--linie); border-radius: 999px; padding: 2px 10px; color: var(--leise); }
.chip.glut { border-color: var(--glut); color: var(--glut); }
.chip .punkt { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.reiter { display: flex; gap: 2px; border-bottom: 1px solid var(--linie); margin-bottom: 16px; overflow-x: auto; }
.reiter button { border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--leise); min-height: 40px; padding: 6px 12px; white-space: nowrap; }
.reiter button.aktiv { color: var(--tinte); border-bottom-color: var(--glut); }
.leer { color: var(--leise); padding: 24px 0; text-align: center; }
.hinweis { border-left: 2px solid var(--glut); padding: 6px 12px; color: var(--text); background: var(--flaeche); margin: 12px 0; }
.fehler { border-left: 2px solid var(--glut); padding: 6px 12px; color: var(--glut); margin: 12px 0; }

/* Balken (Aufwand, Anteile) */
.balken { display: flex; height: 14px; border: 1px solid var(--linie); border-radius: var(--ecke); overflow: hidden; background: var(--flaeche); }
.balken > span { display: block; height: 100%; }
.balken .tom { background: var(--tom); } .balken .lukas { background: var(--lukas); } .balken .nora { background: var(--nora); }
.legende { display: flex; gap: 14px; flex-wrap: wrap; font-family: var(--mono); font-size: var(--s12); color: var(--leise); margin-top: 6px; }
.legende i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: -1px; margin-right: 5px; }
.legende i.tom { background: var(--tom); } .legende i.lukas { background: var(--lukas); } .legende i.nora { background: var(--nora); }

/* Nachrichten */
.nachricht { display: grid; grid-template-columns: 36px 1fr; gap: 10px; padding: 8px 0; }
.nachricht .avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: var(--s12); font-weight: 500; color: #fff; background: var(--leise); }
.nachricht .avatar.tom { background: var(--tom); } .nachricht .avatar.lukas { background: var(--lukas); } .nachricht .avatar.nora { background: var(--nora); color: var(--papier); border: 1px solid var(--linie); } .nachricht .avatar.system { background: var(--flaeche); color: var(--leise); }
.nachricht .wer { font-weight: 600; color: var(--tinte); } .nachricht .wann { font-family: var(--mono); font-size: var(--s12); color: var(--leise); margin-left: 8px; }
.nachricht .text { white-space: pre-wrap; overflow-wrap: anywhere; }
.nachricht .text a { overflow-wrap: anywhere; }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); background: var(--tinte); color: var(--papier); padding: 10px 16px; border-radius: var(--ecke); font-size: var(--s15); z-index: 50; max-width: calc(100vw - 32px); }
@media (min-width: 761px) { .toast { bottom: 24px; } }

/* NORA-Widget (nora.js füllt das) */
.nora-widget { position: fixed; right: 16px; bottom: 76px; z-index: 30; }
@media (min-width: 761px) { .nora-widget { bottom: 24px; } }
.nora-widget .nora-knopf { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--tinte); background: var(--papier); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.nora-widget .nora-knopf .glut { width: 14px; height: 14px; border-radius: 50%; background: var(--glut); transition: transform 0.2s; }
.nora-widget .nora-knopf.spricht .glut { animation: puls 1s infinite; }
.nora-widget .nora-knopf.hoert { border-color: var(--glut); }
@keyframes puls { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.5); } }
@media (prefers-reduced-motion: reduce) { .nora-widget .nora-knopf.spricht .glut { animation: none; transform: scale(1.3); } * { scroll-behavior: auto !important; } }

.versteckt { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }