/* ============================================================
   Nährstoffkompass — Design-System v3 ("Tracker")
   Tokens + Komponenten unter den bestehenden .nk-* Klassennamen
   (keine Umbenennungen nötig), plus 10 wählbare Farbpaletten über
   [data-palette] auf <html>. Alle Paletten teilen sich Grün/Gold/Rot als
   Status-Farben (gut/Warnung/Gefahr) - das sind keine Markenfarben und
   bleiben überall gleich erkennbar.

   v3: clean/modernes "Tracker"-Erscheinungsbild (Whoop/Oura/Garmin-artig)
   statt des bisherigen warmen Editorial-Looks - reine Optik (Typografie,
   Flächen, Radien, Ring-/Kachel-Stil); alle Selektoren, Variablennamen und
   die Palette-/Dark-Mode-Mechanik bleiben unverändert kompatibel.
   ============================================================ */

:root{
  --ink:#0B0C0E; --ink-soft:#5B6560; --ink-faint:#8F9995;
  --paper:#F5F6F5; --paper-wash:#EDEFEC;
  --surface:#FFFFFF; --surface-2:#F1F2F0; --surface-hover:#EAF7F0;
  --line:rgba(11,14,12,0.09); --line-strong:rgba(11,14,12,0.18);
  --accent:#17B169; --accent-strong:#0F9D57; --accent-soft:#EAF7F0; --accent-ink:#FFFFFF;
  --gold:#9C6A1E; --gold-soft:#F2E3C6;
  --red:#9C3B32; --red-soft:#F4E1DE;
  --good:#2F7D4F; --good-soft:#DFEEE4;
  --shadow-sm:0 1px 2px rgba(11,14,12,0.05);
  --shadow-md:0 1px 2px rgba(11,14,12,0.04), 0 8px 20px -14px rgba(11,14,12,0.20);
  --shadow-lg:0 4px 10px -4px rgba(11,14,12,0.14), 0 22px 44px -24px rgba(11,14,12,0.26);
  --shadow:var(--shadow-md);
  --radius-md:16px; --radius-lg:22px; --radius-pill:999px;
  --font-family-base:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-family-mono:ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  --font-scale-base:1;
  --font-scale-mono:1;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#E8E5D9; --ink-soft:#B7C0B6; --ink-faint:#84907F;
    --paper:#12160F; --paper-wash:#181D15;
    --surface:#1B2018; --surface-2:#222820; --surface-hover:#26301F;
    --line:rgba(232,229,217,0.10); --line-strong:rgba(232,229,217,0.20);
    --accent:#78C39B; --accent-strong:#9BDBB6; --accent-soft:#1E3327; --accent-ink:#0E1512;
    --gold:#E0AE5B; --gold-soft:#2E2413;
    --red:#E39187; --red-soft:#301C19;
    --good:#7BCB9B; --good-soft:#173821;
    --shadow-sm:0 1px 2px rgba(0,0,0,0.4);
    --shadow-md:0 1px 2px rgba(0,0,0,0.4), 0 12px 26px -14px rgba(0,0,0,0.7);
    --shadow-lg:0 4px 14px -4px rgba(0,0,0,0.5), 0 28px 52px -24px rgba(0,0,0,0.8);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --ink:#E8E5D9; --ink-soft:#B7C0B6; --ink-faint:#84907F;
  --paper:#12160F; --paper-wash:#181D15;
  --surface:#1B2018; --surface-2:#222820; --surface-hover:#26301F;
  --line:rgba(232,229,217,0.10); --line-strong:rgba(232,229,217,0.20);
  --accent:#78C39B; --accent-strong:#9BDBB6; --accent-soft:#1E3327; --accent-ink:#0E1512;
  --gold:#E0AE5B; --gold-soft:#2E2413;
  --red:#E39187; --red-soft:#301C19;
  --good:#7BCB9B; --good-soft:#173821;
  --shadow-sm:0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:0 1px 2px rgba(0,0,0,0.4), 0 12px 26px -14px rgba(0,0,0,0.7);
  --shadow-lg:0 4px 14px -4px rgba(0,0,0,0.5), 0 28px 52px -24px rgba(0,0,0,0.8);
  color-scheme: dark;
}

/* ---- 9 weitere Paletten (10 insgesamt inkl. "Kompass Grün" oben) ---- */

:root[data-palette="petrol"]{
  --ink:#16232A; --ink-soft:#44565E; --ink-faint:#7C8B90;
  --paper:#F3F6F6; --paper-wash:#E8EEEE;
  --surface:#FFFFFF; --surface-2:#EDF2F2; --surface-hover:#E3EEEC;
  --line:rgba(22,35,42,0.12); --line-strong:rgba(22,35,42,0.22);
  --accent:#0E6E76; --accent-strong:#0A5760; --accent-soft:#DEEDEC; --accent-ink:#F3F6F6;
}
@media (prefers-color-scheme: dark){
  :root[data-palette="petrol"]:not([data-theme="light"]){
    --ink:#DCEAEA; --ink-soft:#A9BFC0; --ink-faint:#75898C;
    --paper:#0B1417; --paper-wash:#101B1E;
    --surface:#141F22; --surface-2:#1A272A; --surface-hover:#1E2F31;
    --line:rgba(220,234,234,0.10); --line-strong:rgba(220,234,234,0.20);
    --accent:#4FC4C9; --accent-strong:#8ADDE0; --accent-soft:#173538; --accent-ink:#08131A;
  }
}
:root[data-palette="petrol"][data-theme="dark"]{
  --ink:#DCEAEA; --ink-soft:#A9BFC0; --ink-faint:#75898C;
  --paper:#0B1417; --paper-wash:#101B1E;
  --surface:#141F22; --surface-2:#1A272A; --surface-hover:#1E2F31;
  --line:rgba(220,234,234,0.10); --line-strong:rgba(220,234,234,0.20);
  --accent:#4FC4C9; --accent-strong:#8ADDE0; --accent-soft:#173538; --accent-ink:#08131A;
}

:root[data-palette="bernstein"]{
  --ink:#2B2016; --ink-soft:#5C4C3A; --ink-faint:#8C7A64;
  --paper:#F7F1E6; --paper-wash:#EFE4CF;
  --surface:#FFFFFF; --surface-2:#F3E9D6; --surface-hover:#EFE0C4;
  --line:rgba(43,32,22,0.12); --line-strong:rgba(43,32,22,0.22);
  --accent:#9C5A1E; --accent-strong:#7A4415; --accent-soft:#F0E0C4; --accent-ink:#FBF6EC;
}
@media (prefers-color-scheme: dark){
  :root[data-palette="bernstein"]:not([data-theme="light"]){
    --ink:#F0E6D6; --ink-soft:#C7B79E; --ink-faint:#93826A;
    --paper:#1B140D; --paper-wash:#221A11;
    --surface:#251C13; --surface-2:#2C2217; --surface-hover:#34291B;
    --line:rgba(240,230,214,0.10); --line-strong:rgba(240,230,214,0.20);
    --accent:#E0A048; --accent-strong:#F0BC72; --accent-soft:#3A2A14; --accent-ink:#1B140D;
  }
}
:root[data-palette="bernstein"][data-theme="dark"]{
  --ink:#F0E6D6; --ink-soft:#C7B79E; --ink-faint:#93826A;
  --paper:#1B140D; --paper-wash:#221A11;
  --surface:#251C13; --surface-2:#2C2217; --surface-hover:#34291B;
  --line:rgba(240,230,214,0.10); --line-strong:rgba(240,230,214,0.20);
  --accent:#E0A048; --accent-strong:#F0BC72; --accent-soft:#3A2A14; --accent-ink:#1B140D;
}

:root[data-palette="lavendel"]{
  --ink:#241F29; --ink-soft:#544C5C; --ink-faint:#867D8F;
  --paper:#F6F3F6; --paper-wash:#EEE8EE;
  --surface:#FFFFFF; --surface-2:#F1ECF2; --surface-hover:#E9E2ED;
  --line:rgba(36,31,41,0.12); --line-strong:rgba(36,31,41,0.22);
  --accent:#6B5178; --accent-strong:#54405F; --accent-soft:#E9E1ED; --accent-ink:#F6F3F6;
}
@media (prefers-color-scheme: dark){
  :root[data-palette="lavendel"]:not([data-theme="light"]){
    --ink:#E7E1EA; --ink-soft:#B3A8BA; --ink-faint:#847890;
    --paper:#171319; --paper-wash:#1D1821;
    --surface:#211C27; --surface-2:#282230; --surface-hover:#302938;
    --line:rgba(231,225,234,0.10); --line-strong:rgba(231,225,234,0.20);
    --accent:#B79BC4; --accent-strong:#D2BADD; --accent-soft:#3A2E45; --accent-ink:#171319;
  }
}
:root[data-palette="lavendel"][data-theme="dark"]{
  --ink:#E7E1EA; --ink-soft:#B3A8BA; --ink-faint:#847890;
  --paper:#171319; --paper-wash:#1D1821;
  --surface:#211C27; --surface-2:#282230; --surface-hover:#302938;
  --line:rgba(231,225,234,0.10); --line-strong:rgba(231,225,234,0.20);
  --accent:#B79BC4; --accent-strong:#D2BADD; --accent-soft:#3A2E45; --accent-ink:#171319;
}

:root[data-palette="kobalt"]{
  --ink:#151E2B; --ink-soft:#43536A; --ink-faint:#78889E;
  --paper:#F4F6FA; --paper-wash:#E9EDF5;
  --surface:#FFFFFF; --surface-2:#EEF1F8; --surface-hover:#E4EAF6;
  --line:rgba(21,30,43,0.12); --line-strong:rgba(21,30,43,0.22);
  --accent:#2A5DA8; --accent-strong:#1E4780; --accent-soft:#DEE7F5; --accent-ink:#F4F6FA;
}
@media (prefers-color-scheme: dark){
  :root[data-palette="kobalt"]:not([data-theme="light"]){
    --ink:#DCE4F0; --ink-soft:#A7B4CC; --ink-faint:#76829C;
    --paper:#0B1220; --paper-wash:#101A2C;
    --surface:#141E30; --surface-2:#1A2740; --surface-hover:#20304C;
    --line:rgba(220,228,240,0.10); --line-strong:rgba(220,228,240,0.20);
    --accent:#6FA1E8; --accent-strong:#9DC0F2; --accent-soft:#1D3253; --accent-ink:#0A1220;
  }
}
:root[data-palette="kobalt"][data-theme="dark"]{
  --ink:#DCE4F0; --ink-soft:#A7B4CC; --ink-faint:#76829C;
  --paper:#0B1220; --paper-wash:#101A2C;
  --surface:#141E30; --surface-2:#1A2740; --surface-hover:#20304C;
  --line:rgba(220,228,240,0.10); --line-strong:rgba(220,228,240,0.20);
  --accent:#6FA1E8; --accent-strong:#9DC0F2; --accent-soft:#1D3253; --accent-ink:#0A1220;
}

:root[data-palette="indigo"]{
  --ink:#1C1B2E; --ink-soft:#4C4A64; --ink-faint:#83809A;
  --paper:#F5F4F9; --paper-wash:#ECEAF3;
  --surface:#FFFFFF; --surface-2:#EFEDF6; --surface-hover:#E5E1F0;
  --line:rgba(28,27,46,0.12); --line-strong:rgba(28,27,46,0.22);
  --accent:#453E8C; --accent-strong:#332C6E; --accent-soft:#E3E0F3; --accent-ink:#F5F4F9;
}
@media (prefers-color-scheme: dark){
  :root[data-palette="indigo"]:not([data-theme="light"]){
    --ink:#E4E2F0; --ink-soft:#B0ACC8; --ink-faint:#807C99;
    --paper:#12111D; --paper-wash:#181725;
    --surface:#1E1C30; --surface-2:#25233A; --surface-hover:#2C2A45;
    --line:rgba(228,226,240,0.10); --line-strong:rgba(228,226,240,0.20);
    --accent:#9089D6; --accent-strong:#B4ACE8; --accent-soft:#2C2750; --accent-ink:#12111D;
  }
}
:root[data-palette="indigo"][data-theme="dark"]{
  --ink:#E4E2F0; --ink-soft:#B0ACC8; --ink-faint:#807C99;
  --paper:#12111D; --paper-wash:#181725;
  --surface:#1E1C30; --surface-2:#25233A; --surface-hover:#2C2A45;
  --line:rgba(228,226,240,0.10); --line-strong:rgba(228,226,240,0.20);
  --accent:#9089D6; --accent-strong:#B4ACE8; --accent-soft:#2C2750; --accent-ink:#12111D;
}

:root[data-palette="graphit"]{
  --ink:#1D1D1D; --ink-soft:#525252; --ink-faint:#868686;
  --paper:#F6F6F4; --paper-wash:#ECECE8;
  --surface:#FFFFFF; --surface-2:#EFEFEC; --surface-hover:#E6E6E2;
  --line:rgba(29,29,29,0.12); --line-strong:rgba(29,29,29,0.22);
  --accent:#3A3A3A; --accent-strong:#232323; --accent-soft:#E4E4E1; --accent-ink:#F6F6F4;
}
@media (prefers-color-scheme: dark){
  :root[data-palette="graphit"]:not([data-theme="light"]){
    --ink:#EBEBE7; --ink-soft:#B8B8B3; --ink-faint:#86867F;
    --paper:#131313; --paper-wash:#181818;
    --surface:#1D1D1D; --surface-2:#242424; --surface-hover:#2B2B2B;
    --line:rgba(235,235,231,0.10); --line-strong:rgba(235,235,231,0.20);
    --accent:#C7C7C0; --accent-strong:#E4E4DE; --accent-soft:#2E2E2E; --accent-ink:#131313;
  }
}
:root[data-palette="graphit"][data-theme="dark"]{
  --ink:#EBEBE7; --ink-soft:#B8B8B3; --ink-faint:#86867F;
  --paper:#131313; --paper-wash:#181818;
  --surface:#1D1D1D; --surface-2:#242424; --surface-hover:#2B2B2B;
  --line:rgba(235,235,231,0.10); --line-strong:rgba(235,235,231,0.20);
  --accent:#C7C7C0; --accent-strong:#E4E4DE; --accent-soft:#2E2E2E; --accent-ink:#131313;
}

:root[data-palette="waldtanne"]{
  --ink:#12211A; --ink-soft:#3E5449; --ink-faint:#748A7E;
  --paper:#F3F6F3; --paper-wash:#E8EEE7;
  --surface:#FFFFFF; --surface-2:#EBF1EA; --surface-hover:#DFEBE0;
  --line:rgba(18,33,26,0.12); --line-strong:rgba(18,33,26,0.22);
  --accent:#1C4A36; --accent-strong:#123527; --accent-soft:#DCEBE1; --accent-ink:#F3F6F3;
}
@media (prefers-color-scheme: dark){
  :root[data-palette="waldtanne"]:not([data-theme="light"]){
    --ink:#DCEAE1; --ink-soft:#A6BFAF; --ink-faint:#73897C;
    --paper:#0A1410; --paper-wash:#0F1B15;
    --surface:#132720; --surface-2:#193026; --surface-hover:#1F3A2E;
    --line:rgba(220,234,225,0.10); --line-strong:rgba(220,234,225,0.20);
    --accent:#5CB88F; --accent-strong:#8AD4AF; --accent-soft:#183D2E; --accent-ink:#081310;
  }
}
:root[data-palette="waldtanne"][data-theme="dark"]{
  --ink:#DCEAE1; --ink-soft:#A6BFAF; --ink-faint:#73897C;
  --paper:#0A1410; --paper-wash:#0F1B15;
  --surface:#132720; --surface-2:#193026; --surface-hover:#1F3A2E;
  --line:rgba(220,234,225,0.10); --line-strong:rgba(220,234,225,0.20);
  --accent:#5CB88F; --accent-strong:#8AD4AF; --accent-soft:#183D2E; --accent-ink:#081310;
}

:root[data-palette="steingrau"]{
  --ink:#1B222A; --ink-soft:#4C5A68; --ink-faint:#7E8B98;
  --paper:#F4F6F7; --paper-wash:#EAEDF0;
  --surface:#FFFFFF; --surface-2:#EEF1F3; --surface-hover:#E4E9EC;
  --line:rgba(27,34,42,0.12); --line-strong:rgba(27,34,42,0.22);
  --accent:#556878; --accent-strong:#3E4E5C; --accent-soft:#E2E8EC; --accent-ink:#F4F6F7;
}
@media (prefers-color-scheme: dark){
  :root[data-palette="steingrau"]:not([data-theme="light"]){
    --ink:#E1E7EB; --ink-soft:#AAB7C1; --ink-faint:#78868F;
    --paper:#0E1316; --paper-wash:#141A1E;
    --surface:#1A2126; --surface-2:#20282E; --surface-hover:#273037;
    --line:rgba(225,231,235,0.10); --line-strong:rgba(225,231,235,0.20);
    --accent:#9FB3C2; --accent-strong:#C2D2DD; --accent-soft:#293641; --accent-ink:#0E1316;
  }
}
:root[data-palette="steingrau"][data-theme="dark"]{
  --ink:#E1E7EB; --ink-soft:#AAB7C1; --ink-faint:#78868F;
  --paper:#0E1316; --paper-wash:#141A1E;
  --surface:#1A2126; --surface-2:#20282E; --surface-hover:#273037;
  --line:rgba(225,231,235,0.10); --line-strong:rgba(225,231,235,0.20);
  --accent:#9FB3C2; --accent-strong:#C2D2DD; --accent-soft:#293641; --accent-ink:#0E1316;
}

:root[data-palette="aquamarin"]{
  --ink:#132420; --ink-soft:#3E5C54; --ink-faint:#71938A;
  --paper:#F2F8F6; --paper-wash:#E6F2EE;
  --surface:#FFFFFF; --surface-2:#E9F5F1; --surface-hover:#DCF0E9;
  --line:rgba(19,36,32,0.12); --line-strong:rgba(19,36,32,0.22);
  --accent:#1C9C82; --accent-strong:#127A65; --accent-soft:#D7F2E9; --accent-ink:#F2F8F6;
}
@media (prefers-color-scheme: dark){
  :root[data-palette="aquamarin"]:not([data-theme="light"]){
    --ink:#DCF2EA; --ink-soft:#A0C7BC; --ink-faint:#6C9186;
    --paper:#0A1815; --paper-wash:#0F211B;
    --surface:#132923; --surface-2:#18332B; --surface-hover:#1E3F34;
    --line:rgba(220,242,234,0.10); --line-strong:rgba(220,242,234,0.20);
    --accent:#4FD6B4; --accent-strong:#82E8CC; --accent-soft:#154A3C; --accent-ink:#081512;
  }
}
:root[data-palette="aquamarin"][data-theme="dark"]{
  --ink:#DCF2EA; --ink-soft:#A0C7BC; --ink-faint:#6C9186;
  --paper:#0A1815; --paper-wash:#0F211B;
  --surface:#132923; --surface-2:#18332B; --surface-hover:#1E3F34;
  --line:rgba(220,242,234,0.10); --line-strong:rgba(220,242,234,0.20);
  --accent:#4FD6B4; --accent-strong:#82E8CC; --accent-soft:#154A3C; --accent-ink:#081512;
}

/* ============================================================
   Basis
   ============================================================ */

*{box-sizing:border-box;}
html,body{margin:0;}
html{font-size:calc(16px * var(--font-scale-base));}
body{
  background:
    radial-gradient(900px 320px at 12% -12%, var(--accent-soft) 0%, transparent 55%),
    var(--paper);
  color:var(--ink);
  font-family:var(--font-family-base);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--font-family-base); font-weight:700; letter-spacing:-0.01em; margin:0 0 8px; text-wrap:balance;}
h1{font-size:1.6rem;} h3{font-size:1.05rem; margin-top:0;}
a{color:var(--accent);}
.mono{font-family:var(--font-family-mono); font-variant-numeric:tabular-nums;}

/* ---- Topbar / Navigation ---- */
.nk-topbar{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 12px;
  padding:12px 20px; border-bottom:1px solid var(--line); background:var(--surface);
  position:sticky; top:0; z-index:20;
}
.nk-brand{
  display:flex; align-items:center; gap:9px; font-family:var(--font-family-base); font-weight:700; letter-spacing:-0.01em;
  font-size:1.1rem; color:var(--ink); text-decoration:none; flex:none;
}
.nk-brand-mark{width:24px; height:24px; flex:none;}
.nk-brand-text{display:flex; flex-direction:column; line-height:1.15; gap:1px;}
.nk-brand-text strong{font-weight:600;}
.nk-brand-sub{font-family:var(--font-family-base); font-weight:500; font-size:0.68rem; color:var(--ink-soft); letter-spacing:0.02em;}
.nk-nav{display:flex; align-items:center; gap:2px; flex-wrap:wrap; row-gap:4px; font-size:0.88rem;}
.nk-nav a{
  color:var(--ink-soft); text-decoration:none; padding:6px 10px; border-radius:var(--radius-pill);
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
}
.nk-nav a:hover{background:var(--surface-hover); color:var(--ink);}
.nk-nav a.is-active{background:var(--accent-soft); color:var(--accent-strong); font-weight:600;}
.nk-badge{
  font-family:var(--font-family-mono); font-size:calc(0.68rem * var(--font-scale-mono)); background:var(--red); color:#fff;
  border-radius:var(--radius-pill); padding:1px 6px;
}
.nk-user{
  font-family:var(--font-family-mono); font-size:calc(0.76rem * var(--font-scale-mono)); color:var(--ink-faint);
  background:var(--surface-2); padding:4px 10px; border-radius:var(--radius-pill); margin-left:2px;
}
.nk-nav-drawer{display:none;}
.nk-refresh-btn{
  flex:none; display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
  border-radius:50%; border:1px solid var(--line-strong); background:var(--paper); color:var(--ink-soft);
  cursor:pointer; padding:0;
}
.nk-refresh-btn:hover{background:var(--surface-hover); color:var(--ink);}
.nk-refresh-btn svg{width:17px; height:17px;}

.nk-main{max-width:840px; margin:0 auto; padding:28px 20px 64px;}

.nk-page-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:18px;}
.nk-page-head h1{margin:0;}

/* ---- Einstellungen-Untermenü (seit 1.11) ---- */
.nk-subnav{display:flex; gap:4px; flex-wrap:wrap; background:var(--surface-2); border-radius:var(--radius-pill); padding:4px; margin-bottom:20px;}
.nk-subnav a{font-size:0.86rem; font-weight:600; padding:8px 14px; border-radius:var(--radius-pill); color:var(--ink-faint); text-decoration:none; white-space:nowrap;}
.nk-subnav a:hover{background:var(--surface); color:var(--ink);}
.nk-subnav a.is-active{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-sm);}

/* ---- Cards ---- */
.nk-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); padding:20px; margin-bottom:20px; box-shadow:var(--shadow-md);}
.nk-card-narrow{max-width:440px;}

/* ---- Login-Seite: eigener, zentrierter Hero-Bereich mit anpassbarem Titel ---- */
.nk-login-hero{max-width:440px; margin:48px auto 0; padding:0 4px;}
.nk-login-mark{width:52px; height:52px; display:block; margin:0 auto 16px; color:var(--accent);}
.nk-login-hero h1{text-align:center; font-size:1.4rem; margin:0 0 4px; text-wrap:balance;}
.nk-login-sub{text-align:center; color:var(--ink-faint); font-size:0.86rem; margin:0 0 22px;}
.nk-login-hero .nk-card{margin-top:22px;}

/* ---- Fußzeile (Impressum/Datenschutz-Links, Cookie-Hinweis) ---- */
.nk-footer{
  margin-top:36px; padding-top:16px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:4px 16px; align-items:baseline;
  font-size:0.8rem; color:var(--ink-faint);
}
.nk-footer a{color:var(--ink-faint); text-decoration:underline;}
.nk-footer a:hover{color:var(--accent);}
.nk-footer-cookie{flex-basis:100%; font-size:0.76rem;}

/* ---- Einwilligungen (Patienten-Onboarding, Einstellungen) ---- */
.nk-consent-text{
  font-size:0.9rem; color:var(--ink-soft); line-height:1.55;
  max-height:280px; overflow-y:auto; padding:14px 16px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:10px;
  margin:8px 0 12px;
}
.nk-consent-text h3{margin:14px 0 4px; font-size:0.92rem; color:var(--ink);}
.nk-consent-text h3:first-child{margin-top:0;}
.nk-consent-text p{margin:0 0 10px;}
.nk-consent-box{
  display:flex; gap:10px; align-items:flex-start;
  padding:12px 14px; border:1px solid var(--line); border-radius:10px; margin:0 0 14px;
}
.nk-consent-box input[type=checkbox]{margin:3px 0 0; flex:none; width:auto;}
.nk-consent-box label{margin:0; flex:1; font-size:0.9rem; color:var(--ink);}
.nk-consent-box.is-disabled{opacity:0.6;}
.nk-consent-status{display:flex; flex-direction:column; gap:9px;}
.nk-consent-row{display:flex; gap:9px; align-items:flex-start; font-size:0.9rem; color:var(--ink); line-height:1.4;}
.nk-consent-row .dot{width:8px; height:8px; border-radius:50%; flex:none; margin-top:6px;}
.nk-consent-row.is-ok .dot{background:var(--good);}
.nk-consent-row.is-pending .dot{background:var(--gold);}
.nk-form-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:0 16px;}
.nk-card-danger{border-color:var(--red);}
.nk-card-danger h3{color:var(--red);}

.nk-hint{color:var(--ink-faint); font-size:0.86rem;}
.nk-empty{color:var(--ink-faint); font-style:italic;}
.nk-error{color:var(--red); background:var(--red-soft); border-radius:8px; padding:9px 12px; font-size:0.92rem;}

.nk-flash{border-radius:8px; padding:10px 14px; font-size:0.92rem; margin-bottom:18px;}
.nk-flash-ok{background:var(--accent-soft); color:var(--accent-strong);}
.nk-flash-error{background:var(--red-soft); color:var(--red);}

/* ---- Forms ---- */
label{display:block; font-size:0.88rem; color:var(--ink-soft); margin-bottom:14px;}
input[type=text], input[type=email], input[type=date], input[type=number], select, textarea{
  font:inherit; width:100%; margin-top:5px; padding:9px 11px; border:1px solid var(--line-strong);
  border-radius:9px; background:var(--paper); color:var(--ink);
}
input:focus, select:focus, textarea:focus, button:focus-visible, .nk-btn:focus-visible, .nk-dose-chip:focus-visible{
  outline:2px solid var(--accent); outline-offset:1px;
}
textarea{resize:vertical;}

/* ---- Buttons ---- */
button, .nk-btn{
  font:inherit; font-weight:600; border:none; border-radius:11px; padding:10px 16px;
  background:var(--accent); color:var(--accent-ink); cursor:pointer; text-decoration:none; display:inline-flex;
  align-items:center; gap:6px; box-shadow:var(--shadow-sm);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, opacity .12s ease;
}
button:hover, .nk-btn:hover{background:var(--accent-strong); box-shadow:var(--shadow-md); transform:translateY(-1px);}
button:active, .nk-btn:active{transform:translateY(0);}
.nk-btn-ghost{background:var(--surface); color:var(--ink-soft); border:1px solid var(--line-strong); box-shadow:none; font-weight:500; padding:7px 12px; font-size:0.86rem;}
.nk-btn-ghost:hover{background:var(--surface-hover); color:var(--ink); box-shadow:none; transform:none;}
.nk-btn-danger{background:var(--red); color:#fff;}
.nk-btn-danger:hover{filter:brightness(1.08); background:var(--red);}
.nk-btn-save{font:inherit; background:var(--surface); color:var(--accent-strong); border:1px solid var(--accent); font-weight:600; padding:7px 12px; font-size:0.84rem; border-radius:9px; cursor:pointer; box-shadow:none;}
.nk-btn-save:hover{background:var(--accent-soft); transform:none; box-shadow:none;}
.nk-inline{display:inline-block;}
.nk-hidden-form{display:none;}
.nk-actions-cell{white-space:nowrap; display:flex; gap:6px;}
.nk-table-edit td{padding:6px 8px;}
.nk-table-edit input[type=text],
.nk-table-edit input[type=email],
.nk-table-edit input[type=date]{min-width:110px; margin-top:0; padding:6px 8px; font-size:0.86rem;}
.nk-table-edit input[type=number]{width:64px; margin-top:0; padding:6px 6px; font-size:0.86rem;}

.nk-inline-form{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; align-items:center;}
.nk-inline-form input[type=text]{width:auto; flex:1 1 140px; margin-top:0;}
.nk-inline-label{display:flex; align-items:center; gap:6px; font-size:0.88rem; color:var(--ink-soft); margin-bottom:0;}
.nk-inline-label select{width:auto; margin-top:0; padding:8px 10px;}

/* ---- Tabellen: responsive (Karten-Ansicht < 640px über data-label) ---- */
.nk-table-wrap{overflow-x:auto;}
.nk-table{width:100%; border-collapse:collapse; font-size:0.92rem;}
.nk-table th{text-align:left; font-family:var(--font-family-mono); font-size:calc(0.7rem * var(--font-scale-mono)); letter-spacing:0.04em; text-transform:uppercase; color:var(--ink-faint); font-weight:500; padding:8px 10px; border-bottom:1px solid var(--line-strong);}
.nk-table td{padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:middle;}
.nk-num{font-family:var(--font-family-mono); font-variant-numeric:tabular-nums;}

@media (max-width:640px){
  .nk-table-responsive thead{display:none;}
  .nk-table-responsive, .nk-table-responsive tbody, .nk-table-responsive tr, .nk-table-responsive td{display:block; width:100%;}
  .nk-table-responsive tr{
    border:1px solid var(--line); border-radius:var(--radius-md); margin-bottom:10px;
    padding:14px 14px 6px; box-shadow:var(--shadow-sm); background:var(--surface);
  }
  .nk-table-responsive td{border:none; padding:0 0 10px;}
  .nk-table-responsive td[data-label]{position:relative;}
  .nk-table-responsive td[data-label]::before{
    content:attr(data-label); display:block; font-family:var(--font-family-mono); font-size:calc(0.66rem * var(--font-scale-mono));
    text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); margin-bottom:3px;
  }
}

/* ---- Flags/Badges mit Farbpunkt ---- */
.nk-flag{
  font-family:var(--font-family-mono); font-size:calc(0.68rem * var(--font-scale-mono)); letter-spacing:.01em; padding:4px 9px 4px 7px;
  border-radius:var(--radius-pill); white-space:nowrap; display:inline-flex; align-items:center; gap:5px;
}
.nk-flag .dot{width:6px; height:6px; border-radius:50%; flex:none; background:currentColor;}
.nk-flag-aktiv{background:var(--accent-soft); color:var(--accent-strong);}
.nk-flag-pausiert{background:var(--gold-soft); color:var(--gold);}
.nk-flag-abgeschlossen{background:var(--surface-2); color:var(--ink-faint);}
.nk-flag-due{background:var(--gold-soft); color:var(--gold);}
.nk-flag-alert{background:var(--red-soft); color:var(--red);}
.nk-flag-good{background:var(--good-soft); color:var(--good);}
.nk-flag-neutral{background:var(--surface-2); color:var(--ink-soft);}
a.nk-flag{text-decoration:none; transition:filter .12s ease;}
a.nk-flag:hover{filter:brightness(0.93);}
.nk-trend-delta{color:inherit; opacity:0.7; font-size:0.94em;}
.nk-flag-compact{
  padding:2px 8px; min-width:26px; justify-content:center; font-size:0.92rem; font-weight:700; gap:0;
  cursor:help;
}
.nk-signal-cell{display:flex; flex-wrap:wrap; gap:6px;}

/* ---- Aktive Pläne gestapelt (Patient:innen-Liste) ---- */
.nk-plan-stack{display:flex; flex-direction:column; gap:6px;}
.nk-plan-link{
  display:flex; align-items:baseline; gap:6px; font-weight:600; text-decoration:none; line-height:1.3;
}
.nk-plan-link .nk-plan-week{font-weight:400; font-family:var(--font-family-mono); font-size:calc(0.72rem * var(--font-scale-mono)); color:var(--ink-faint); white-space:nowrap;}
.nk-plan-link:hover span:first-child{text-decoration:underline;}

.nk-dl{display:grid; grid-template-columns:auto 1fr; gap:4px 16px; margin:0; font-size:0.92rem;}
.nk-dl dt{color:var(--ink-faint);}
.nk-dl dd{margin:0;}

.nk-question-list{list-style:none; margin:0 0 4px; padding:0; display:flex; flex-direction:column; gap:8px;}
.nk-question-list li{display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:0.92rem;}
.nk-question-label{font-size:0.86rem; color:var(--ink-soft); margin:0 0 2px;}
.nk-spark{width:100%; max-width:280px; height:40px; color:var(--accent); display:block; margin-bottom:6px;}

/* ---- Check-in-Tendenzen: eine Kachel je Frage (small multiples - die
   Fragen sind inhaltlich nicht vergleichbar, darum kein Overlay-Chart). ---- */
.nk-trend-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:18px 28px;}
.nk-trend-row{padding-top:14px; border-top:1px solid var(--line);}
.nk-trend-row:nth-child(-n+1){border-top:none; padding-top:0;}
@media (min-width: 640px){
  .nk-trend-row{border-top:none; padding-top:0;}
}

.nk-section-label{font-size:0.86rem; color:var(--ink-faint); margin:0 0 10px;}
.nk-plan-items{display:flex; flex-direction:column; gap:10px;}
.nk-plan-item{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-md); padding:14px 16px; box-shadow:var(--shadow-sm);
}
.nk-check-row{display:flex; gap:8px; flex:none; flex-wrap:wrap;}
.nk-check-row form{display:contents;}
.nk-dose-chip{
  font:inherit; font-size:0.86rem; font-weight:600; padding:9px 16px; border-radius:var(--radius-pill);
  border:1.5px solid var(--line-strong); background:var(--paper); color:var(--ink-soft); cursor:pointer; white-space:nowrap;
  box-shadow:none; transition:all .12s ease;
}
.nk-dose-chip.is-done{background:var(--accent); border-color:var(--accent); color:var(--accent-ink); transform:none;}
.nk-dose-check{display:none; vertical-align:-2px; margin-left:3px;}
.nk-dose-chip.is-done .nk-dose-check{display:inline;}
.nk-item-info{display:flex; flex-direction:column; gap:2px; flex:1 1 160px; min-width:0;}
.nk-item-info .mono{font-size:0.82rem; color:var(--ink-soft);}

/* ---- Einnahmeempfehlung ("Morgens: 1 Stk · Mittags: 1 Stk") ---- */
/* Seit Version 1.28: eigene, klar abgesetzte Zeile statt blasser Hinweistext
   zwischen Name/Dosierung und den Abhak-Buttons - dort ging sie besonders in
   der mobilen Ansicht leicht unter (Nutzer-Feedback). Bewusst NICHT im
   selben Grün-Ton wie die Abhak-Buttons daneben, damit auf einen Blick klar
   bleibt: das hier ist reine Info, keine weiteren anklickbaren Buttons. */
.nk-dose-hint-row{flex:1 1 100%; order:5;}
.nk-dose-hint{
  display:inline-block; margin-top:2px; padding:6px 10px; border-radius:9px;
  background:var(--surface-2); color:var(--ink-soft); font-size:0.88rem; font-weight:600;
}

/* ---- "Mehr erfahren"-Button (Verweis auf Wissensartikel, eigene Zeile unterhalb der Präparate-Zeile) ---- */
.nk-info-btn{
  flex:1 1 100%; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:9px 14px; border-radius:var(--radius-pill); background:var(--accent-soft); color:var(--accent-strong);
  text-decoration:none; font-size:0.86rem; font-weight:600; box-shadow:none;
  transition:filter .12s ease, transform .12s ease;
}
.nk-info-btn:hover{filter:brightness(0.93); transform:translateY(-1px); color:var(--accent-strong);}
.nk-info-btn svg{width:17px; height:17px; flex:none;}

/* ---- Wissensartikel-Fließtext (patient/wissen.php) ---- */
.nk-article-draft-note{
  background:var(--gold-soft); color:var(--gold); border-radius:10px; padding:10px 14px;
  font-size:0.86rem; font-weight:600;
}
.nk-article-sources{margin:6px 0 4px; padding-left:20px; display:flex; flex-direction:column; gap:4px; font-size:0.92rem; color:var(--ink-soft);}
.nk-article-sources li{line-height:1.4;}

/* ---- Kachel-Reihenfolge (arzt/plan.php: Kacheln individuell anordnen) ---- */
.nk-card-head{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.nk-card-head h3{margin:0;}
.nk-card-reorder{display:flex; gap:4px; flex:none;}
.nk-card-reorder-btn{
  font:inherit; line-height:1; padding:5px 9px; border-radius:8px; border:1px solid var(--line-strong);
  background:var(--paper); color:var(--ink-soft); cursor:pointer;
}
.nk-card-reorder-btn:hover{background:var(--surface-2);}

/* ---- Tages-Übersicht (einzelne Tage rückwirkend ansehen/ändern) ---- */
.nk-day-grid td, .nk-day-grid th{vertical-align:middle;}
.nk-day-slots{display:flex; gap:4px; flex-wrap:wrap;}
.nk-dose-chip-sm{padding:5px 10px; font-size:0.76rem;}
span.nk-dose-chip-sm{display:inline-block; cursor:default;}

/* ---- Adherence-Ring (Treue-Anzeige) ---- */
.nk-ring-strip{display:flex; flex-wrap:wrap; gap:18px; margin-bottom:16px;}
.nk-ring-item{display:flex; align-items:center; gap:10px;}
.nk-ring-wrap{position:relative; width:52px; height:52px; flex:none;}
.nk-ring-wrap svg{transform:rotate(-90deg);}
.nk-ring-track{fill:none; stroke:var(--line-strong); stroke-width:5;}
.nk-ring-fill{fill:none; stroke:var(--accent); stroke-width:5; stroke-linecap:round;}
.nk-ring-fill.is-low{stroke:var(--gold);}
.nk-ring-label{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-family-mono); font-size:calc(0.72rem * var(--font-scale-mono)); font-weight:600; color:var(--ink);
}
.nk-ring-item strong{font-size:0.88rem; display:block;}

/* ---- Mood / Check-in ---- */
.nk-mood-question{margin-bottom:22px;}
.nk-mood-question p{font-weight:600; margin:0 0 8px;}
.nk-mood-row{display:flex; gap:8px;}
.nk-mood{
  flex:1; display:flex; align-items:center; justify-content:center; height:46px; border-radius:12px;
  border:1.5px solid var(--line-strong); background:var(--surface); font-size:1.2rem; cursor:pointer;
}
.nk-mood input{position:absolute; opacity:0; pointer-events:none;}
.nk-mood:has(input:checked){background:var(--accent-soft); border-color:var(--accent);}

.nk-bar-row{display:grid; grid-template-columns:1fr 2fr auto; align-items:center; gap:10px; margin-bottom:10px; font-size:0.88rem;}
.nk-bar{height:8px; background:var(--surface-2); border-radius:var(--radius-pill); overflow:hidden;}
.nk-bar-fill{height:100%; background:var(--accent);}

.nk-plan-block{margin-bottom:36px; padding-bottom:24px; border-bottom:1px solid var(--line);}
/* Damit ein per Anker angesprungenes Präparat (z. B. nach dem Abhaken einer
   Einnahme, siehe redirect_to in patient/index.php) nicht unter dem
   sticky Topbar landet, sondern sichtbar knapp darunter. */
.nk-plan-item{scroll-margin-top:84px;}
.nk-plan-block:last-child{border-bottom:none; margin-bottom:0; padding-bottom:0;}
.nk-checkin-nudge{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-top:14px;}

.nk-ac-box{position:absolute; z-index:80; background:var(--surface); border:1px solid var(--line-strong); border-radius:9px; box-shadow:var(--shadow-lg); max-height:220px; overflow-y:auto;}
.nk-ac-item{display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:8px 12px; cursor:pointer; font-size:0.86rem;}
.nk-ac-item:hover, .nk-ac-item.is-active{background:var(--surface-2);}
.nk-ac-name{color:var(--ink);}
.nk-ac-sub{color:var(--ink-faint); font-size:0.78rem; white-space:nowrap;}

/* ---- Postfach ---- */
.nk-msg-thread{display:flex; flex-direction:column; gap:10px; margin-bottom:16px;}
.nk-msg{max-width:80%; padding:10px 14px; border-radius:16px; background:var(--surface-2); box-shadow:var(--shadow-sm);}
.nk-msg p{margin:0 0 4px; white-space:pre-wrap; word-break:break-word;}
.nk-msg a{text-decoration:underline; word-break:break-all;}
.nk-msg-staff{align-self:flex-start; border-bottom-left-radius:4px;}
.nk-msg-patient{align-self:flex-end; background:var(--accent-soft); border-bottom-right-radius:4px;}

/* ---- Farbpaletten-Auswahl (Einstellungen) ---- */
.nk-palette-grid{display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 4px;}
.nk-palette-opt{
  display:flex; align-items:center; gap:8px; padding:7px 12px 7px 8px; border-radius:var(--radius-pill);
  border:1px solid var(--line); background:var(--paper); cursor:pointer; font-size:0.84rem; color:var(--ink-soft);
}
.nk-palette-opt:hover{border-color:var(--line-strong);}
.nk-palette-opt input{position:absolute; opacity:0; pointer-events:none;}
.nk-palette-opt .sw{width:16px; height:16px; border-radius:50%; flex:none; box-shadow:inset 0 0 0 1px rgba(0,0,0,0.08);}
.nk-palette-opt:has(input:checked){background:var(--accent-soft); border-color:var(--accent); color:var(--ink); font-weight:600;}

/* ---- Tages-Ring (Patient:in "Mein Plan" - großer Fortschrittsring) ---- */
.nk-hero{display:flex; align-items:center; gap:24px; flex-wrap:wrap; margin-bottom:20px;}
.nk-hero-ring-wrap{position:relative; width:124px; height:124px; flex:none;}
.nk-hero-ring-wrap svg{transform:rotate(-90deg); width:100%; height:100%; display:block;}
.nk-hero-track{fill:none; stroke:var(--surface-2); stroke-width:10;}
.nk-hero-fill{fill:none; stroke:var(--accent); stroke-width:10; stroke-linecap:round; transition:stroke-dashoffset .4s ease;}
.nk-hero-ring-wrap.is-complete .nk-hero-fill{filter:drop-shadow(0 0 8px var(--accent-soft));}
.nk-hero-label{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:1px;}
.nk-hero-label strong{font-family:var(--font-family-mono); font-size:calc(1.55rem * var(--font-scale-mono)); font-weight:600; color:var(--ink); line-height:1;}
.nk-hero-label span{font-size:0.66rem; color:var(--ink-faint); letter-spacing:0.01em;}
.nk-hero-info{flex:1 1 220px; min-width:0;}
.nk-hero-date{margin:0 0 4px; font-size:0.86rem; color:var(--ink-faint);}
.nk-hero-status{margin:0; font-weight:700; font-size:1.08rem;}
.nk-hero-status.is-complete{color:var(--accent-strong);}

/* ---- Präparate-Icon (Tages-Liste) ---- */
.nk-item-icon{
  width:38px; height:38px; border-radius:50%; background:var(--surface-2); color:var(--ink-soft);
  display:flex; align-items:center; justify-content:center; flex:none;
}
.nk-item-icon svg{width:18px; height:18px;}
.nk-plan-item.is-done .nk-item-icon{background:var(--accent-soft); color:var(--accent-strong);}
.nk-dose-chip.is-missed{border-color:var(--gold); color:var(--gold); background:var(--gold-soft);}

/* ---- Arzt: KPI-Kacheln, Werkzeugleiste (Suche/Ansicht), Kachel-Grid ---- */
.nk-kpi-row{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; margin-bottom:20px;}
.nk-kpi{
  font:inherit; text-align:left; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:14px 16px; box-shadow:var(--shadow-sm); cursor:pointer; color:var(--ink);
  transition:box-shadow .12s ease, border-color .12s ease;
}
.nk-kpi:hover{box-shadow:var(--shadow-md); transform:none;}
.nk-kpi.is-active{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft) inset;}
.nk-kpi strong{display:block; font-family:var(--font-family-mono); font-size:calc(1.6rem * var(--font-scale-mono)); font-weight:600; line-height:1.15;}
.nk-kpi span{font-size:0.8rem; color:var(--ink-faint);}
.nk-kpi.is-alert strong{color:var(--red);}
.nk-kpi.is-warn strong{color:var(--gold);}

.nk-toolbar{display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; margin-bottom:16px;}
.nk-search-box{flex:1 1 220px; position:relative; max-width:320px;}
.nk-search-box input{width:100%; margin-top:0; padding:9px 14px 9px 34px; border-radius:var(--radius-pill);}
.nk-search-box svg{position:absolute; left:11px; top:50%; transform:translateY(-50%); width:15px; height:15px; color:var(--ink-faint); pointer-events:none;}
.nk-view-toggle{display:flex; gap:2px; background:var(--surface-2); border-radius:var(--radius-pill); padding:3px; flex:none;}
.nk-view-toggle button{font:inherit; font-size:0.82rem; font-weight:600; padding:6px 14px; border-radius:var(--radius-pill); border:none; background:transparent; color:var(--ink-faint); cursor:pointer; box-shadow:none;}
.nk-view-toggle button.is-active{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-sm);}
.nk-view-toggle button:hover{background:var(--surface); transform:none; box-shadow:none; color:var(--ink);}

.nk-patient-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:14px; margin-bottom:18px;}
.nk-patient-card{
  position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:16px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:10px;
  text-decoration:none; color:inherit; transition:box-shadow .12s ease, transform .12s ease;
}
.nk-patient-card:hover{box-shadow:var(--shadow-md); transform:translateY(-1px);}
.nk-patient-card.is-hidden{display:none;}
.nk-patient-card .nk-ring-wrap{width:64px; height:64px; margin:0 auto;}
.nk-patient-card .nk-ring-label{font-size:0.84rem; font-weight:600;}
.nk-patient-card-name{text-align:center; font-weight:700; color:var(--ink); font-size:0.96rem;}
.nk-patient-card-meta{text-align:center; font-size:0.76rem; color:var(--ink-faint); min-height:1.1em;}
.nk-patient-badge{
  position:absolute; top:10px; right:10px; width:22px; height:22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.nk-patient-badge svg{width:12px; height:12px;}
.nk-patient-badge.is-urgent{background:var(--red-soft); color:var(--red);}
.nk-patient-badge.is-due{background:var(--gold-soft); color:var(--gold);}
.nk-patient-badge.is-stable{background:var(--good-soft); color:var(--good);}
.nk-patient-card-actions{display:flex; gap:6px;}
.nk-patient-card-actions a{flex:1; text-align:center;}
/* [hidden] allein reicht nicht, da .nk-patient-grid/.nk-table-wrap ihr eigenes
   display setzen (das schlägt die UA-Regel [hidden]{display:none} sonst). */
.nk-patient-grid[hidden], .nk-table-wrap[hidden]{display:none;}

/* ============================================================
   Mobil (< 640px): Hamburger-Menü (Praxis) + Tab-Leiste (Patient:in)
   ============================================================ */
@media (max-width:640px){
  .nk-bar-row{grid-template-columns:1fr; gap:4px;}
  .nk-inline-form{flex-direction:column; align-items:stretch;}
  .nk-inline-form input[type=text]{width:100%;}

  .nk-hero{justify-content:center; text-align:center;}
  .nk-hero-info{text-align:center;}
  .nk-toolbar{flex-direction:column; align-items:stretch;}
  .nk-search-box{max-width:none;}

  .nk-nav{display:none;}
  .nk-nav-drawer{display:inline-flex; margin-left:auto; position:relative;}
  .nk-nav-drawer summary{list-style:none; cursor:pointer; padding:7px; border-radius:9px; display:flex;}
  .nk-nav-drawer summary::-webkit-details-marker{display:none;}
  .nk-nav-drawer[open] .nk-drawer-panel{
    position:absolute; right:0; top:calc(100% + 8px); background:var(--surface); border:1px solid var(--line);
    border-radius:var(--radius-md); box-shadow:var(--shadow-lg); padding:8px; display:flex; flex-direction:column;
    gap:2px; min-width:200px; z-index:30;
  }
  .nk-drawer-panel a{
    color:var(--ink-soft); text-decoration:none; padding:9px 12px; border-radius:9px; font-size:0.9rem;
    display:flex; align-items:center; gap:8px; justify-content:space-between;
  }
  .nk-drawer-panel a:hover{background:var(--surface-hover);}
  .nk-drawer-panel .nk-user{margin:4px 12px 2px;}

  body.nk-has-tabbar .nk-main{padding-bottom:86px;}
  .nk-tabbar{
    display:flex; position:fixed; left:0; right:0; bottom:0; background:var(--surface); border-top:1px solid var(--line);
    padding:8px 6px calc(8px + env(safe-area-inset-bottom, 0px)); z-index:20;
  }
  .nk-tabbar a{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; text-decoration:none;
    color:var(--ink-faint); font-size:0.68rem; padding:5px 0; border-radius:10px; position:relative;
  }
  .nk-tabbar a svg{width:20px; height:20px;}
  .nk-tabbar a.is-active{color:var(--accent);}
  .nk-tabbar a .nk-tab-dot{position:absolute; top:2px; right:calc(50% - 16px); width:7px; height:7px; border-radius:50%; background:var(--red);}
}
@media (min-width:641px){
  .nk-tabbar{display:none;}
}