:root{
  --bg:#ffffff; --panel:#fbfbfb; --ink:#1c1c1c; --ink-2:#6b6b6b; --ink-3:#9a9a9a;
  --line:#ededed; --line-2:#e2e2e2; --accent:#1d4ed8; --accent-soft:#eef2ff; --radius:10px;
  --safe-oben:env(safe-area-inset-top, 0px);
  --tab-unten:max(14px, env(safe-area-inset-bottom, 0px));
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
/* Feste App-Höhe: gescrollt wird nur innerhalb von .body – kein Gummiband-
   Überscrollen der ganzen Seite auf dem iPhone. */
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;
  max-width:520px;margin:0 auto;position:relative;
}
#app{height:100%;display:flex;flex-direction:column}
.view{flex:1;min-height:0;display:flex;flex-direction:column}
.hidden{display:none !important}

/* Login */
#login{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;padding:0 32px;gap:14px}
#login h1{font-size:22px;font-weight:700}
#login p{color:var(--ink-2);font-size:13px;text-align:center}
#login input{width:100%;max-width:300px;padding:12px 14px;border:1px solid var(--line-2);border-radius:10px;font-size:15px}
#login button{width:100%;max-width:300px;padding:12px;background:var(--accent);color:#fff;border:none;border-radius:10px;font-weight:650;font-size:15px}
#loginFehler{color:#c0392b;font-size:12.5px;min-height:16px}

/* Header + Suche + Chips */
.app-header{padding:calc(14px + var(--safe-oben)) 18px 8px;border-bottom:1px solid var(--line)}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.header-row>div:first-child{min-width:0}
.header-row .sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.header-btn{font-size:11.5px;font-weight:600;padding:6px 12px;border-radius:20px;background:var(--panel);border:1px solid var(--line-2);color:var(--ink-2);cursor:pointer;flex-shrink:0}
.header-btns{display:flex;gap:6px;flex-shrink:0}
.app-header h1{font-size:19px;font-weight:650;letter-spacing:-.01em}
.app-header .sub{font-size:11.5px;color:var(--ink-3);margin-top:1px}
.search{margin:10px 18px 0;display:flex;align-items:center;gap:7px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:0 10px}
.search input{border:none;background:none;outline:none;padding:8px 0;font-size:13px;width:100%}
.chips{display:flex;gap:6px;padding:10px 18px;overflow-x:auto;border-bottom:1px solid var(--line)}
.chips::-webkit-scrollbar{display:none}
.chip{flex-shrink:0;font-size:11.5px;font-weight:600;padding:5px 11px;border-radius:20px;background:#fff;border:1px solid var(--line-2);color:var(--ink-2);white-space:nowrap;cursor:pointer}
.chip.active{background:var(--ink);color:#fff;border-color:var(--ink)}

/* Liste – der einzige scrollende Bereich der App */
.body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-bottom:calc(82px + var(--tab-unten))}
.row{display:flex;align-items:center;gap:11px;padding:10px 18px;border-bottom:1px solid var(--line);cursor:pointer}
.avatar{width:34px;height:34px;border-radius:50%;flex-shrink:0;color:#fff;font-weight:600;font-size:12px;display:flex;align-items:center;justify-content:center}
.row .info{flex:1;min-width:0}
.row .nm{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .meta{font-size:11.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.row .rt{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
.tag{font-size:10px;font-weight:600;padding:2px 8px;border-radius:20px}
.t-politik{background:#e7eeff;color:#2b51c4}
.t-medien{background:#f1e8ff;color:#7c3aed}
.t-wirtschaft{background:#e3f6ea;color:#1f8a4c}
.t-diplomatie{background:#dff4f5;color:#0e8a93}
.t-recht{background:#e9e9ee;color:#4b4b63}
.t-kreativ{background:#fde8f0;color:#c23a78}
.t-ngo{background:#e6f4e1;color:#4a7c2f}
.t-bildung{background:#e3eef6;color:#2c6b93}
.t-tech{background:#e6f0f0;color:#1f7a7a}
.t-privat{background:#fdedd9;color:#c2740a}
.overdue-dot{width:6px;height:6px;border-radius:50%;background:#e0483e}
.section-label{font-size:10.5px;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;padding:12px 18px 6px}
.leer{padding:40px 18px;text-align:center;color:var(--ink-3);font-size:13px}

/* Tabbar + FAB */
.tabbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:520px;height:calc(60px + var(--tab-unten));background:rgba(255,255,255,.94);backdrop-filter:blur(20px);border-top:1px solid var(--line);display:flex;padding-bottom:var(--tab-unten);z-index:40}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--ink-3);font-size:10px;font-weight:600;cursor:pointer;border:none;background:none}
.tab.active{color:var(--accent)}
.tab .ic{font-size:18px}
/* Vom rechten Rand positioniert: 16px innerhalb der 520px-Spalte, auf schmalen
   Displays (iPhone) 16px vom Bildschirmrand – nie außerhalb des Sichtbereichs. */
.fab{position:fixed;bottom:calc(74px + var(--tab-unten));right:max(16px, calc((100vw - 520px)/2 + 16px));width:48px;height:48px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 8px 18px rgba(29,78,216,.35);z-index:41;cursor:pointer;border:none}

/* Detail */
.detail-top{display:flex;align-items:center;gap:8px;padding:calc(10px + var(--safe-oben)) 14px 10px;border-bottom:1px solid var(--line)}
.back-btn{width:30px;height:30px;border-radius:50%;background:var(--panel);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:15px;cursor:pointer}
.detail-hero{display:flex;flex-direction:column;align-items:center;padding:18px 20px 14px}
.avatar-lg{width:64px;height:64px;border-radius:50%;color:#fff;font-size:20px;font-weight:650;display:flex;align-items:center;justify-content:center;margin-bottom:9px}
.detail-hero h2{font-size:16.5px;font-weight:650;text-align:center}
.detail-hero .sub{font-size:12px;color:var(--ink-2);margin-top:2px;text-align:center}
.quick-actions{display:flex;gap:8px;padding:2px 18px 4px}
.qa{flex:1;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:9px 4px;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10px;font-weight:600;color:var(--ink);cursor:pointer}
.qa .ic{font-size:16px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);margin:10px 18px;padding:12px 14px}
.card h3{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);font-weight:700;margin-bottom:8px}
.field{display:flex;justify-content:space-between;font-size:12.5px;padding:6px 0;border-bottom:1px solid var(--line)}
.field:last-child{border-bottom:none}
.field .k{color:var(--ink-2)}
.field .v{font-weight:600;text-align:right}
.kadenz{display:flex;align-items:center;gap:10px}
.kadenz .txt{font-size:12px;line-height:1.4;color:var(--ink-2)}
.kadenz .txt b{color:#c0392b}
.timeline-item{display:flex;gap:9px;margin-bottom:11px}
.timeline-item:last-child{margin-bottom:0}
.dot{width:6px;height:6px;border-radius:50%;background:var(--accent);margin-top:6px;flex-shrink:0}
.ti-body .date{font-size:10.5px;color:var(--ink-3);font-weight:600}
.ti-body p{font-size:12.3px;line-height:1.45;margin-top:2px}
.rem-card{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--line);border-radius:10px;margin:0 18px 8px;padding:11px 12px}
.rem-ic{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.rem-b{background:#fdedd9}
.rem-r{background:#fbe4e4}
.rem-txt{flex:1;font-size:12.5px}
.rem-txt .t1{font-weight:650}
.rem-txt .t2{color:var(--ink-2);font-size:11px;margin-top:1px}

/* Sheet (Scan / Formular) */
.overlay{position:fixed;inset:0;background:rgba(20,18,16,.5);display:none;align-items:flex-end;justify-content:center;z-index:60}
.overlay.show{display:flex}
.sheet{width:100%;max-width:520px;background:#fff;border-radius:20px 20px 0 0;padding:18px 20px calc(28px + env(safe-area-inset-bottom, 0px));max-height:82%;overflow-y:auto;overscroll-behavior:contain;position:relative}
.sheet-handle{width:34px;height:4px;background:var(--line-2);border-radius:3px;margin:0 auto 14px}
.sheet h3{font-size:15px;font-weight:650;margin-bottom:10px}
.sheet label{display:block;font-size:11px;color:var(--ink-2);margin:10px 0 3px;font-weight:600}
.sheet input,.sheet textarea,.sheet select{width:100%;padding:9px 11px;border:1px solid var(--line-2);border-radius:8px;font-size:13.5px;font-family:inherit}
.sheet-btn{width:100%;background:var(--accent);color:#fff;text-align:center;padding:12px;border-radius:10px;font-weight:650;font-size:13.5px;margin-top:16px;border:none;cursor:pointer}
.close-sheet{position:absolute;top:16px;right:20px;font-size:12.5px;color:var(--ink-2);font-weight:600;cursor:pointer}
.spinner{color:var(--ink-3);font-size:12.5px;text-align:center;padding:10px}

/* Import-Vorschau */
.imp-row{display:flex;align-items:flex-start;gap:10px;padding:9px 2px;border-bottom:1px solid var(--line)}
.imp-row input[type=checkbox]{width:auto;margin-top:3px;accent-color:var(--accent)}
.imp-row .info{flex:1;min-width:0}
.imp-row .nm{font-size:13px;font-weight:600}
.imp-row .meta{font-size:11.5px;color:var(--ink-2);margin-top:1px}
.imp-dublette{display:inline-block;font-size:10px;font-weight:600;padding:2px 8px;border-radius:20px;background:#fdedd9;color:#c2740a;margin-top:3px}
.imp-grund{display:inline-block;font-size:10px;font-weight:600;padding:2px 8px;border-radius:20px;background:var(--accent-soft);color:var(--accent);margin-top:3px}
.imp-kommend{display:inline-block;font-size:10px;font-weight:600;padding:2px 8px;border-radius:20px;background:#e3f6ea;color:#1f8a4c;margin-top:3px}

/* Wiedervorlage */
.wv-status{font-size:12.5px;color:var(--ink-2);margin-bottom:10px}
.wv-status b{color:var(--ink)}
.wv-btns{display:flex;flex-wrap:wrap;gap:7px}
.wv-btns button{font-size:12px;font-weight:600;padding:7px 12px;border-radius:20px;
  background:var(--accent-soft);color:var(--accent);border:1px solid #dbe4ff;cursor:pointer}
.wv-btns button:active{transform:scale(.97)}
.wv-btns .wv-clear{background:#fbe4e4;color:#c0392b;border-color:#f3cccc}