/* ============================================================
   Newsfeed v0.10.0 — Design-System
   Linie: ruhig, sachlich, editorial (Linear/Notion-Schule).
   Aufbau: Tokens -> Reset -> Shell -> Komponenten -> Mobil.
   Der Nachtmodus überschreibt NUR Variablen (body.night) —
   keine Komponenten-Schichten mehr, keine Farbbugs.
   ============================================================ */

/* ---------- Tokens: Hell ---------- */
:root{
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --bg:#f6f7f9;            /* Seitenfläche */
  --bg-side:#f1f3f6;       /* Sidebar */
  --panel:#ffffff;         /* Karten/Panels */
  --panel-2:#f2f4f7;       /* eingebettete Flächen, Meter-Tracks */
  --ink:#181b21;           /* Hauptschrift */
  --ink-2:#3f454d;         /* Sekundärschrift */
  --muted:#6a717c;         /* Randnotizen */
  --stroke:#e4e7ec;
  --stroke-2:#d3d8e0;
  --accent:#3565e0;
  --accent-hover:#2b55c4;
  --accent-ink:#ffffff;
  --accent-soft:#e9eefb;   /* Akzent-Flächen (update-box, tag.blue) */
  --good:#0d7a55;
  --good-bg:#e4f4ec;
  --warn:#7d5c0d;
  --warn-bg:#faf0d9;
  --bad:#bf3a48;
  --bad-bg:#fbe8ea;
  --gray-bg:#eef0f4;
  --gray-ink:#5b6270;
  --chart-1:#5a7fc0;
  --chart-2:#47a06b;
  --chart-track:#e5e9f0;
  --shadow-1:0 1px 2px rgba(16,20,28,.05);
  --shadow-2:0 18px 50px rgba(16,20,28,.16);
  --radius:12px;
  --radius-lg:16px;
  --sidebar-w:242px;
  color-scheme:light;
}

/* ---------- Tokens: Dunkel (nur Variablen!) ---------- */
html.night,body.night{
  --bg:#0f1115;
  --bg-side:#0c0e12;
  --panel:#171a20;
  --panel-2:#1f232b;
  --ink:#e8eaee;
  --ink-2:#c3c8d0;
  --muted:#8b929e;
  --stroke:#262a32;
  --stroke-2:#333945;
  --accent:#6d94ff;
  --accent-hover:#8aa6ff;
  --accent-ink:#0d1220;
  --accent-soft:#1c2536;
  --good:#5fc496;
  --good-bg:#123326;
  --warn:#d9b25e;
  --warn-bg:#33290f;
  --bad:#ef95a0;
  --bad-bg:#3a1b20;
  --gray-bg:#232830;
  --gray-ink:#9aa1ac;
  --chart-1:#5f7fb8;
  --chart-2:#4d9a72;
  --chart-track:#262a32;
  --shadow-1:0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 18px 50px rgba(0,0,0,.55);
  color-scheme:dark;
}

/* ---------- Reset & Basis ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);font-size:15px;line-height:1.55;color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;overflow-wrap:break-word}
body.modal-open{overflow:hidden}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
h1{font-size:24px;font-weight:700;letter-spacing:-.015em}
h2{font-size:19px;font-weight:700;letter-spacing:-.01em}
h3{font-size:15.5px;font-weight:650;letter-spacing:-.005em}
code,pre{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12.5px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

/* ---------- Shell: Grundgerüst ---------- */
.app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh;min-height:100dvh}
.main{min-width:0;display:flex;flex-direction:column}
.content{padding:26px 30px 60px;max-width:1120px;width:100%;margin:0 auto}

/* ---------- Sidebar (Desktop) ---------- */
.sidebar{background:var(--bg-side);border-right:1px solid var(--stroke);padding:18px 14px;
  display:flex;flex-direction:column;gap:14px;position:sticky;top:0;height:100vh;overflow:auto}
.brand{display:flex;align-items:center;gap:9px;font-weight:750;font-size:17px;letter-spacing:-.01em;padding:2px 8px}
.brand-mark{width:30px;height:30px;border-radius:9px;background:var(--accent);color:var(--accent-ink);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;flex:none}
.chip-local{font-size:9.5px;font-weight:700;background:var(--accent-soft);color:var(--accent);
  padding:3px 7px;border-radius:6px;margin-left:auto;letter-spacing:.6px}
.nav-heading{font-size:10.5px;font-weight:700;letter-spacing:.12em;color:var(--muted);margin:2px 8px 8px}
.nav{display:flex;flex-direction:column;gap:1px}
.nav button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:8px 10px;
  border-radius:8px;color:var(--ink-2);font-weight:550;font-size:13.5px;min-height:38px}
.nav button:hover{background:var(--panel-2);text-decoration:none}
.nav button.active{background:var(--panel);color:var(--ink);font-weight:650;box-shadow:var(--shadow-1)}
.nav .icon{width:20px;text-align:center;flex:none;opacity:.85}
.nav .num{margin-left:auto;background:var(--accent);color:var(--accent-ink);font-size:11px;font-weight:700;
  border-radius:999px;padding:1px 7px;min-width:20px;text-align:center}
.sidebar-foot{margin-top:auto;padding:0 8px;font-size:12px;color:var(--muted);display:flex;flex-direction:column;gap:4px}
.sidebar-foot .line{display:flex;align-items:center;gap:7px;color:var(--ink-2);font-weight:550}
.dot{width:8px;height:8px;border-radius:50%;background:var(--stroke-2);flex:none}
.dot.good{background:#2fa46a}
.nf-line{border-top:1px solid var(--stroke);margin-top:10px;padding-top:10px}
.nf-link{color:var(--accent)}
.nf-warn-text{color:var(--bad);margin-top:6px}

/* ---------- Topbar ---------- */
.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:20px 30px 4px;max-width:1120px;width:100%;margin:0 auto}
.eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.14em;color:var(--muted);margin-bottom:3px}
.topbar h1{margin:0}
.top-actions{display:flex;align-items:center;gap:8px;flex:none;padding-top:4px}
.top-chip{font-size:12.5px;color:var(--muted);background:var(--panel);border:1px solid var(--stroke);
  border-radius:999px;padding:5px 12px;white-space:nowrap}

/* ---------- Mobile: Tab-Leiste + Mehr-Blatt (siehe Mobil-Abschnitt) ---------- */
.tabbar,.more-overlay,.more-sheet{display:none}

/* ---------- Typografie-Bausteine ---------- */
.sub{color:var(--muted);font-size:13.5px}
.tiny{font-size:12px;color:var(--muted);display:block}
.hint{font-size:12.5px;color:var(--muted);margin-top:8px;line-height:1.5}
.secondary{color:var(--muted);font-weight:400}
.small-label{font-size:10.5px;font-weight:700;letter-spacing:.12em;color:var(--muted)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin:26px 0 16px}
.section-head h2{margin-bottom:2px}
.section-head p{margin:0}
.arch-day{margin:22px 0 10px;font-size:12.5px;font-weight:700;letter-spacing:.05em;color:var(--muted)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;
  padding:8px 16px;border-radius:9px;border:1px solid var(--stroke-2);background:var(--panel);
  color:var(--ink);font-weight:600;font-size:13.5px;transition:background .12s,border-color .12s}
.btn:hover{background:var(--panel-2);text-decoration:none}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn.small{min-height:32px;padding:5px 12px;font-size:12.5px;border-radius:8px}
.btn.danger{color:var(--bad);border-color:var(--bad)}
.btn:disabled{opacity:.55;cursor:default}

/* ---------- Filter / Suche / Segmente ---------- */
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.filter{display:flex;gap:6px;flex-wrap:wrap}
.pill{border:1px solid var(--stroke-2);border-radius:999px;padding:5px 13px;font-size:12.5px;
  font-weight:600;color:var(--ink-2);background:var(--panel);min-height:32px;display:inline-flex;align-items:center}
.pill:hover{background:var(--panel-2)}
.pill.active{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.search{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--stroke-2);
  border-radius:9px;padding:0 12px;min-height:38px;flex:1;min-width:180px}
.search span{color:var(--muted)}
.search input{border:0;background:none;outline:none;width:100%;font-size:15px;min-height:36px}
.seg-buttons,.time-switch{display:inline-flex;background:var(--panel-2);border-radius:10px;padding:3px;gap:2px;flex-wrap:wrap}
.seg-buttons button,.time-switch button{min-height:32px;padding:5px 14px;border-radius:8px;font-size:13px;
  font-weight:600;color:var(--muted)}
.seg-buttons button.active,.time-switch button.selected{background:var(--panel);color:var(--ink);box-shadow:var(--shadow-1)}
.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* ---------- Startseite ---------- */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.stat{background:var(--panel);border:1px solid var(--stroke);border-radius:var(--radius);padding:14px 16px}
.s-label{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--muted)}
.s-icon{float:right;color:var(--muted);opacity:.7}
.s-val{font-size:24px;font-weight:750;letter-spacing:-.02em;margin-top:4px}
.s-hint{font-size:12px;color:var(--muted);margin-top:2px}
.feature{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--accent-soft),var(--panel));
  border:1px solid var(--stroke);border-radius:var(--radius-lg);padding:26px;margin-bottom:22px}
.feature h2{margin:6px 0 8px}
.feature:before{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;
  background:var(--accent);opacity:.07}
.intro-steps{margin-top:12px;color:var(--muted);font-size:13px}

/* ---------- Karten (Nachrichten) ---------- */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.news-card{background:var(--panel);border:1px solid var(--stroke);border-radius:var(--radius);
  padding:16px 18px;cursor:pointer;display:flex;flex-direction:column;gap:8px;
  transition:border-color .12s,transform .12s;box-shadow:var(--shadow-1)}
.news-card:hover{border-color:var(--stroke-2);transform:translateY(-1px)}
.news-card h3{font-size:15.5px;line-height:1.4}
.card-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.card-bottom{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--muted);
  border-top:1px solid var(--stroke);padding-top:10px;margin-top:auto;flex-wrap:wrap}
.excerpt{color:var(--ink-2);font-size:13.5px;line-height:1.55}

/* ---------- Tags / Badges / Ampel ---------- */
.tag{display:inline-flex;align-items:center;font-size:11px;font-weight:700;letter-spacing:.02em;
  border-radius:6px;padding:2.5px 8px;background:var(--gray-bg);color:var(--gray-ink);white-space:nowrap}
.tag.green{background:var(--good-bg);color:var(--good)}
.tag.red{background:var(--bad-bg);color:var(--bad)}
.tag.orange{background:var(--warn-bg);color:var(--warn)}
.tag.gray{background:var(--gray-bg);color:var(--gray-ink)}
.tag.blue{background:var(--accent-soft);color:var(--accent)}
.ampel{display:inline-flex;align-items:center;justify-content:center;min-width:36px;padding:2px 8px;
  border-radius:999px;font-size:11px;font-weight:750}
.ampel-gruen{background:var(--good-bg);color:var(--good)}
.ampel-gelb{background:var(--warn-bg);color:var(--warn)}
.ampel-rot{background:var(--bad-bg);color:var(--bad)}

/* ---------- Panels & Boxen ---------- */
.panel{background:var(--panel);border:1px solid var(--stroke);border-radius:var(--radius);
  padding:18px 20px;margin:14px 0;box-shadow:var(--shadow-1)}
.panel h3{margin:0 0 6px}
.empty{text-align:center;padding:34px 16px;color:var(--muted)}
.empty h3{color:var(--ink);margin-bottom:4px}
.banner{border-radius:10px;padding:11px 14px;font-size:13.5px;background:var(--accent-soft);
  color:var(--ink);border:1px solid var(--stroke)}
.banner.warn{background:var(--warn-bg);color:var(--warn);border-color:transparent}
.banner.error{background:var(--bad-bg);color:var(--bad);border-color:transparent}
.update-box{border:1px solid var(--accent);border-radius:10px;padding:10px 14px;margin:12px 0;
  background:var(--accent-soft)}
.update-box p{margin:6px 0 0;line-height:1.55}
.reference{display:flex;flex-direction:column;gap:3px;padding:10px 0;border-bottom:1px solid var(--stroke)}
.reference:last-child{border-bottom:0}
.reference .actions{margin-top:4px}
.claim{border-left:3px solid var(--stroke-2);padding:8px 12px;margin:8px 0;background:var(--panel-2);
  border-radius:0 8px 8px 0;font-size:13.5px}
.claim.good{border-left-color:var(--good)}
.claim.bad{border-left-color:var(--bad)}
.claim.warning{border-left-color:var(--warn)}

/* ---------- Formulare ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;margin-top:12px}
.field{display:flex;flex-direction:column;gap:5px}
.field.wide{grid-column:1/-1}
.field label{font-size:12.5px;font-weight:650;color:var(--ink-2)}
.field input,.field select,.field textarea,input,select,textarea{
  background:var(--panel);border:1px solid var(--stroke-2);border-radius:9px;padding:9px 12px;
  font-size:16px;min-height:44px;width:100%}
.field textarea{min-height:90px;resize:vertical}
.field input[type=checkbox]{width:auto;min-height:0;accent-color:var(--accent)}
.field label:has(input[type=checkbox]){display:flex;align-items:center;gap:8px;font-weight:500}

/* ---------- Tabellen ---------- */
.table-wrap{overflow:auto;border:1px solid var(--stroke);border-radius:10px}
.data-table{min-width:640px;border-collapse:collapse;font-size:13px}
.table{border-collapse:collapse;width:100%}
.table th,.table td,.data-table th,.data-table td{text-align:left;padding:9px 10px;
  border-bottom:1px solid var(--stroke);vertical-align:middle;font-size:13px}
.table th,.data-table th{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.table tr:last-child td,.data-table tr:last-child td{border-bottom:0}

/* ---------- Score / Meter ---------- */
.score-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:14px 0}
.score .tiny{margin-bottom:2px}
.score strong{font-size:22px;font-weight:750;letter-spacing:-.02em}
.meter{height:6px;border-radius:999px;background:var(--chart-track);overflow:hidden;margin-top:6px}
.meter span{display:block;height:100%;border-radius:999px;background:var(--accent)}

/* ---------- Dialoge (Artikel & Info) ---------- */
.detail-modal{position:fixed;inset:0;display:flex;justify-content:flex-end;z-index:50;
  background:rgba(9,12,18,.45)}
.detail{width:min(795px,100%);height:100vh;height:100dvh;overflow:auto;background:var(--bg);
  box-shadow:var(--shadow-2);display:flex;flex-direction:column}
.detail-top{position:sticky;top:0;background:var(--bg);z-index:2;display:flex;gap:10px;
  padding:16px 22px 10px;border-bottom:1px solid var(--stroke);flex-wrap:wrap;align-items:flex-start}
.detail-top .tiny{flex:1 1 100%;min-width:0}
.detail-top .actions{margin-left:auto}
.detail-body{padding:20px 24px 40px}
.article{font-size:15.5px;line-height:1.72}
.article p{margin:0 0 14px}
.article h1{margin:4px 0 14px}
.detail h1{font-size:26px;margin:2px 0 12px}
.detail h3{margin-top:22px}
details.tech-details>summary{cursor:pointer;font-size:14.5px;font-weight:650;color:var(--accent);
  margin-top:18px}
details.tech-details>summary:hover{text-decoration:underline}

/* ---------- Komplettbericht ---------- */
.report-overlay{position:fixed;inset:0;background:rgba(9,12,18,.5);z-index:70;display:flex;
  align-items:flex-start;justify-content:center;overflow:auto;padding:22px}
.report-sheet{background:var(--panel);color:var(--ink);max-width:840px;width:100%;
  border-radius:var(--radius-lg);padding:26px 30px 30px;box-shadow:var(--shadow-2);margin:auto}
.report-sheet h3{margin:20px 0 8px;font-size:14.5px}
.report-sheet section p{line-height:1.66;margin:0 0 10px}
.report-meta{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 4px}
.rref{font-size:10.5px;color:var(--accent);margin-left:1px}

/* ---------- Briefing ---------- */
.brief-layout{display:grid;grid-template-columns:1fr 300px;gap:18px;align-items:start}
.brief-article{padding:16px 0;border-bottom:1px solid var(--stroke)}
.brief-article:last-child{border-bottom:0}
.brief-article p{margin:8px 0;line-height:1.66}

/* ---------- Toast ---------- */
#toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);opacity:0;pointer-events:none;
  background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:10px;font-size:13.5px;
  font-weight:600;max-width:420px;width:max-content;transition:.22s;z-index:90;box-shadow:var(--shadow-2)}
#toast.show{opacity:1;transform:translate(-50%,0)}
#toast.show.error{background:var(--bad);color:#fff}

/* ---------- Ladebildschirm ---------- */
.loading-screen{display:flex;align-items:center;justify-content:center;min-height:60vh;color:var(--muted)}

/* ---------- Druck ---------- */
@media print{.sidebar,.topbar,.tabbar,.more-sheet,.more-overlay,#toast{display:none!important}
  .content{max-width:none;padding:0}.app{display:block}}

/* ============================================================
   MOBIL (<= 730px): Tab-Leiste unten, Mehr-Blatt, Touch-Fokus
   ============================================================ */
@media (max-width:1100px){
  .content,.topbar{padding-left:22px;padding-right:22px}
  .stat-row{grid-template-columns:repeat(2,1fr)}
  .card-grid{grid-template-columns:1fr}
  .brief-layout{grid-template-columns:1fr}
}
@media (max-width:730px){
  .app{display:block}
  .sidebar{display:none}                       /* Desktop-Navigation ruht */
  .content{padding:14px 16px calc(96px + env(safe-area-inset-bottom))}
  .topbar{padding:14px 16px 2px;align-items:center}
  .topbar h1{font-size:18px}
  .eyebrow{margin-bottom:1px}
  .top-chip{display:none}
  .top-actions .btn.small{min-height:40px;min-width:40px;padding:5px 10px}
  .section-head{margin:18px 0 12px}
  .form-grid{grid-template-columns:1fr}
  .stat-row{grid-template-columns:repeat(2,1fr);gap:8px}
  .stat{padding:11px 12px}
  .s-val{font-size:20px}
  .feature{padding:18px}
  .search{order:-1;width:100%}

  /* Tab-Leiste unten: immer sichtbar, Safe-Area, 44px-Ziele */
  .tabbar{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;
    z-index:60;background:var(--panel);border-top:1px solid var(--stroke);
    padding:6px 8px calc(6px + env(safe-area-inset-bottom))}
  .tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    min-height:48px;border-radius:10px;color:var(--muted);font-size:10.5px;font-weight:650;
    padding:4px 2px}
  .tabbar button .icon{font-size:19px;line-height:1}
  .tabbar button.active{color:var(--accent);background:var(--accent-soft)}

  /* Mehr-Blatt: Bottom-Sheet mit der kompletten Navigation + Login/Status */
  .more-overlay{display:block;position:fixed;inset:0;background:rgba(9,12,18,.5);z-index:65}
  .more-sheet{display:flex;flex-direction:column;position:fixed;left:0;right:0;bottom:0;z-index:66;
    background:var(--panel);border-radius:18px 18px 0 0;max-height:78vh;max-height:78dvh;overflow:auto;
    padding:8px 16px calc(18px + env(safe-area-inset-bottom));box-shadow:var(--shadow-2)}
  .more-grip{width:38px;height:4px;border-radius:999px;background:var(--stroke-2);margin:6px auto 4px}
  .more-head{display:flex;align-items:center;justify-content:space-between;padding:6px 0 10px}
  .more-nav{display:flex;flex-direction:column;gap:1px;margin-bottom:8px}
  .more-nav button{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
    padding:12px 10px;border-radius:10px;font-size:14.5px;font-weight:600;color:var(--ink-2);min-height:48px}
  .more-nav button.active{background:var(--accent-soft);color:var(--accent)}
  .more-nav .icon{width:22px;text-align:center}
  .more-nav .num{margin-left:auto;background:var(--accent);color:var(--accent-ink);font-size:11px;
    font-weight:700;border-radius:999px;padding:2px 8px}
  .more-foot{border-top:1px solid var(--stroke);padding-top:12px;font-size:12.5px;color:var(--muted);
    display:flex;flex-direction:column;gap:8px}

  /* Dialoge: Vollbild-Schublade mit fester Kopfzeile */
  .detail-modal{justify-content:stretch}
  .detail{width:100%}
  .detail-top{padding:12px 16px 10px;row-gap:8px}
  .detail-top .actions{flex:1 1 100%;justify-content:flex-end}
  .detail-body{padding:16px 16px 40px}
  .detail h1{font-size:22px}
  .report-overlay{padding:0;align-items:stretch}
  .report-sheet{border-radius:0;max-width:none;padding:18px 16px calc(28px + env(safe-area-inset-bottom))}
  #toast{left:12px;right:12px;bottom:calc(78px + env(safe-area-inset-bottom));transform:translateY(14px);
    width:auto;max-width:none}
  #toast.show{transform:translateY(0)}
  .data-table{min-width:560px}
}