/* Rücknahme-Radar — Variante C „Morgenrunde"
   Ruhige helle Karten, Bricolage Grotesque für Überschriften, Nunito Sans als Lesetext. */

:root{
  --bg:#F3F6FA;
  --card:#FFFFFF;
  --card-soft:#FAFBFD;
  --ink:#263241;
  --ink-2:#5D6C7E;
  --ink-3:#8593A2;
  --line:#EDF1F6;
  --line-2:#DFE6EE;
  --brandink:#1E4B45;
  --accent:#2E7D74;
  --accent-ink:#FFFFFF;
  --chip:#E7EDF4;

  --overdue:#C24A3E;  --overdue-bg:#FBE9E7;  --overdue-line:#F3D4D0;
  --today:#C77A24;    --today-bg:#FAEEDD;    --today-line:#F0DDBF;
  --soon:#3D7AB8;     --soon-bg:#E8F1FA;     --soon-line:#D2E3F3;
  --later:#8593A2;    --later-bg:#EFF2F6;    --later-line:#E2E8EF;
  --nodate:#7458B8;   --nodate-bg:#EFEAF9;   --nodate-line:#E0D8F2;
  --warn:#96700F;     --warn-bg:#FDF6DE;     --warn-line:#EDDCA4;
  --ok:#2E7D74;
  --solid-o:#D25B4E; --solid-h:#E08A2E; --solid-n:#4A8AC9; --solid-ink:#FFFFFF;

  --shadow:0 2px 10px rgba(38,50,65,.07);
  --shadow-2:0 6px 22px rgba(38,50,65,.12);
  --radius:16px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#12171D;  --card:#1A2129;  --card-soft:#161C23;
    --ink:#E6ECF2; --ink-2:#A7B4C1; --ink-3:#7D8B99;
    --line:#242D37; --line-2:#2E3A45;
    --brandink:#7FCFC2; --accent:#3E9E92; --accent-ink:#06120F; --chip:#222B34;
    --overdue:#F08D80; --overdue-bg:#301B18; --overdue-line:#4A2822;
    --today:#E7A85C;   --today-bg:#2E2416;   --today-line:#463620;
    --soon:#7FB4E6;    --soon-bg:#16232F;    --soon-line:#243747;
    --later:#8E9BA8;   --later-bg:#1E252D;   --later-line:#2B333C;
    --nodate:#AE97E8;  --nodate-bg:#231D33;  --nodate-line:#352B4C;
    --warn:#E0BE5E;    --warn-bg:#2A2415;    --warn-line:#4A3D1C;
    --ok:#5FBBAE;
    --solid-o:#B4493E; --solid-h:#B57424; --solid-n:#3D6F9E; --solid-ink:#F4F7F9;
    --shadow:0 2px 10px rgba(0,0,0,.34);
    --shadow-2:0 6px 22px rgba(0,0,0,.44);
  }
}
:root[data-theme="dark"]{
  --bg:#12171D;  --card:#1A2129;  --card-soft:#161C23;
  --ink:#E6ECF2; --ink-2:#A7B4C1; --ink-3:#7D8B99;
  --line:#242D37; --line-2:#2E3A45;
  --brandink:#7FCFC2; --accent:#3E9E92; --accent-ink:#06120F; --chip:#222B34;
  --overdue:#F08D80; --overdue-bg:#301B18; --overdue-line:#4A2822;
  --today:#E7A85C;   --today-bg:#2E2416;   --today-line:#463620;
  --soon:#7FB4E6;    --soon-bg:#16232F;    --soon-line:#243747;
  --later:#8E9BA8;   --later-bg:#1E252D;   --later-line:#2B333C;
  --nodate:#AE97E8;  --nodate-bg:#231D33;  --nodate-line:#352B4C;
  --warn:#E0BE5E;    --warn-bg:#2A2415;    --warn-line:#4A3D1C;
  --ok:#5FBBAE;
  --solid-o:#B4493E; --solid-h:#B57424; --solid-n:#3D6F9E; --solid-ink:#F4F7F9;
  --shadow:0 2px 10px rgba(0,0,0,.34);
  --shadow-2:0 6px 22px rgba(0,0,0,.44);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  overflow-x:hidden;
  background:var(--bg);
  color:var(--ink);
  font-family:"Nunito Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:15.5px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ font-family:"Bricolage Grotesque","Nunito Sans",sans-serif; font-weight:700; margin:0; }
button{ font-family:inherit; cursor:pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}
.wrap{ max-width:760px; margin:0 auto; padding:0 16px 64px; }
[hidden]{ display:none !important; }

/* ---------- Kopf ---------- */
.top{
  position:sticky; top:0; z-index:30;
  background:var(--bg);
  padding:18px 0 10px;
}
.top-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; min-width:0; }
.greet{ min-width:0; }
.greet b{ display:block; font-family:"Bricolage Grotesque",sans-serif; font-weight:700;
  font-size:21px; line-height:1.15; color:var(--brandink); }
.greet span{ display:block; font-size:13px; color:var(--ink-2); margin-top:2px; }
.top-actions{ display:flex; gap:8px; flex:none; }
.iconbtn{
  width:38px; height:38px; border:none; border-radius:13px;
  background:var(--card); color:var(--ink-2); box-shadow:var(--shadow);
  font-size:16px; display:flex; align-items:center; justify-content:center;
}
.iconbtn:hover{ color:var(--accent); }
.iconbtn.spin{ animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .iconbtn.spin{ animation:none; } }

/* ---------- Steuerung ---------- */
.controls{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:12px 0 4px; }
.seg{ display:flex; background:var(--chip); border-radius:12px; padding:3px; gap:2px; }
.seg button{
  border:none; background:transparent; color:var(--ink-2);
  font-size:13px; font-weight:700; padding:6px 12px; border-radius:9px;
}
.seg button[aria-pressed="true"]{ background:var(--card); color:var(--brandink); box-shadow:0 1px 4px rgba(38,50,65,.12); }
.switch{
  display:flex; align-items:center; gap:8px;
  background:var(--chip); border:none; border-radius:12px;
  padding:7px 12px; font-size:13px; font-weight:600; color:var(--ink-2);
}
.switch .dot{ width:9px; height:9px; border-radius:50%; background:var(--ink-3); flex:none; }
.switch[aria-pressed="true"]{ color:var(--brandink); }
.switch[aria-pressed="true"] .dot{ background:var(--accent); }

/* ---------- Ampel ---------- */
.ampel{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; margin:14px 0 6px; }
.ampel:has(> :last-child:nth-child(2)){ grid-template-columns:repeat(2,minmax(0,1fr)); }
.later-hint{
  display:flex; gap:9px; align-items:center;
  background:var(--later-bg); color:var(--later);
  border-radius:12px; padding:9px 13px; font-size:13px; font-weight:600; margin-bottom:6px;
}
.amp{
  background:var(--card); border:1px solid transparent; border-radius:var(--radius);
  box-shadow:var(--shadow); padding:13px 4px 11px; text-align:center; min-width:0;
  display:flex; flex-direction:column; gap:2px;
}
.amp b{ font-family:"Bricolage Grotesque",sans-serif; font-size:25px; line-height:1; font-variant-numeric:tabular-nums; }
.amp span{ font-size:10px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  color:var(--ink-3); overflow-wrap:anywhere; hyphens:auto; }
.amp.overdue b{ color:var(--overdue); } .amp.overdue{ border-color:var(--overdue-line); }
.amp.today b{ color:var(--today); }     .amp.today{ border-color:var(--today-line); }
.amp.soon b{ color:var(--soon); }
.amp.later b{ color:var(--later); }
.amp.zero b{ color:var(--ink-3); opacity:.5; }
.amp.zero{ border-color:transparent; }

.nodate-hint{
  display:flex; gap:9px; align-items:center;
  background:var(--nodate-bg); color:var(--nodate);
  border-radius:12px; padding:9px 13px; font-size:13px; font-weight:600; margin-bottom:6px;
}

/* ---------- Wochenraster ---------- */
.mx-card{ background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
  margin:14px 0 6px; overflow:hidden; }
.mx-head{ padding:11px 14px 7px; font-family:"Bricolage Grotesque",sans-serif; font-weight:700;
  font-size:14px; color:var(--brandink); display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.mx-head small{ font-family:"Nunito Sans",sans-serif; font-weight:600; font-size:10.5px; color:var(--ink-3); }
.mx-scroll{ overflow-x:auto; }
table.mx{ border-collapse:collapse; width:100%; }
.mx th{ font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  color:var(--ink-3); padding:6px 2px 7px; text-align:center; border-bottom:1.5px solid var(--line);
  line-height:1.25; white-space:nowrap; }
.mx .mx-sub{ font-size:8.5px; font-weight:700; color:var(--ink-3); text-transform:none; letter-spacing:0; }
.mx td{ padding:4px 2px; text-align:center; border-bottom:1px solid var(--line);
  font-variant-numeric:tabular-nums; }
.mx th.mx-loc, .mx td.mx-loc{ text-align:left; padding-left:14px; position:sticky; left:0;
  background:var(--card); max-width:96px; }
.mx td.mx-loc b{ font-size:12px; display:block; line-height:1.2; }
.mx td.mx-loc small{ font-size:9.5px; color:var(--ink-3); font-weight:600; display:block;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mx-row{ cursor:pointer; }
.mx-row:active td{ background:var(--card-soft); }
.mx tr:last-child td{ border-bottom:none; }
.cell{ display:inline-block; min-width:21px; height:21px; line-height:21px; border-radius:6px;
  font-size:11px; font-weight:800; }
.c0{ background:var(--later-bg); opacity:.45; }
.cO{ background:var(--solid-o); color:var(--solid-ink); }
.cH{ background:var(--solid-h); color:var(--solid-ink); }
.cN{ background:var(--soon-bg); color:var(--soon); }
.mx-sum td{ border-top:2px solid var(--line-2); font-weight:800; font-size:11.5px;
  color:var(--ink-2); background:var(--card-soft); padding:6px 2px; }
.mx-sum td.mx-loc{ background:var(--card-soft); }
.mx-note{ padding:8px 14px 11px; font-size:11.5px; color:var(--ink-3); line-height:1.5; }
.mx-empty{ padding:6px 14px 12px; font-size:13.5px; color:var(--ink-2); }
.loc.blink{ outline:2px solid var(--accent); outline-offset:2px; transition:outline-color .3s; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

/* ---------- Klapp-Bereiche (Nachrichten / Standorte) ---------- */
.sec{ margin-top:18px; }
.sec-head{
  display:grid; grid-template-columns:1fr auto; align-items:center;
  column-gap:10px; row-gap:2px; cursor:pointer; list-style:none;
  padding:12px 15px; border-radius:var(--radius);
  background:var(--card); box-shadow:var(--shadow);
}
.sec-head::-webkit-details-marker{ display:none; }
.sec-title{ font-family:"Bricolage Grotesque",sans-serif; font-size:16px; font-weight:700; color:var(--brandink); }
.sec-meta{ grid-column:1; font-size:11.5px; color:var(--ink-3); }
.sec .chev{
  grid-column:2; grid-row:1 / -1; align-self:center;
  font-size:17px; line-height:1; color:var(--ink-3);
  transition:transform .18s ease; transform:translateY(-2px);
}
.sec[open] .chev{ transform:rotate(180deg) translateY(-2px); }
.sec[open] .sec-head{ border-bottom-left-radius:0; border-bottom-right-radius:0; }
.sec-body{ padding-top:11px; }
.sec-body > .brand-sec:first-child{ margin-top:12px; }
.grp-none{ padding:13px 3px 2px; font-size:13px; color:var(--ink-3); }
@media (prefers-reduced-motion: reduce){ .sec .chev{ transition:none; } }

/* ---------- Marken-Abschnitte ---------- */
.brand-sec{ margin-top:22px; }
.brand-head{
  display:flex; align-items:center; gap:10px; margin:0 2px 10px;
}
.brand-head h2{ font-size:16px; color:var(--brandink); }
.brand-head .rule{ flex:1; height:1px; background:var(--line-2); }
.brand-head .cnt{ font-size:12.5px; font-weight:700; color:var(--ink-3); }
.brand-head .syslink{
  font-size:11.5px; font-weight:700; color:var(--accent); text-decoration:none;
  background:var(--chip); border-radius:999px; padding:4px 9px; white-space:nowrap;
}

/* ---------- Standort-Karten ---------- */
.loc{ background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:11px; overflow:hidden; }
.loc-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 15px; border-bottom:1px solid var(--line);
  width:100%; border:none; background:transparent; text-align:left; color:inherit;
  border-bottom:1px solid var(--line);
}
.loc-head b{ font-family:"Bricolage Grotesque",sans-serif; font-size:15px; color:var(--brandink);
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.loc-head .right{ display:flex; align-items:center; gap:9px; flex:none; }
.loc-head .cnt{ font-size:12px; color:var(--ink-3); font-weight:700; }
.mini{ display:flex; gap:4px; }
.mini i{ font-style:normal; font-size:10.5px; font-weight:800; padding:2px 6px; border-radius:6px; font-variant-numeric:tabular-nums; }
.mini i.overdue{ background:var(--overdue-bg); color:var(--overdue); }
.mini i.today{ background:var(--today-bg); color:var(--today); }
.mini i.soon{ background:var(--soon-bg); color:var(--soon); }
.mini i.later{ background:var(--later-bg); color:var(--later); }
.mini i.nodate{ background:var(--nodate-bg); color:var(--nodate); }

.row{ display:flex; align-items:center; gap:10px; padding:10px 15px; }
.row + .row{ border-top:1px solid var(--line); }
.r-date{
  font-size:11.5px; font-weight:800; width:56px; flex:none; text-align:center;
  border-radius:10px; padding:6px 0; font-variant-numeric:tabular-nums;
}
.r-date.overdue{ background:var(--overdue-bg); color:var(--overdue); }
.r-date.today{ background:var(--today-bg); color:var(--today); }
.r-date.soon{ background:var(--soon-bg); color:var(--soon); }
.r-date.later{ background:var(--later-bg); color:var(--later); }
.r-date.nodate{ background:var(--nodate-bg); color:var(--nodate); }
.r-main{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; }
.r-main b{ font-size:14px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.r-main span{ font-size:12.5px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.r-st{ font-size:10px; font-weight:800; padding:4px 8px; border-radius:999px; flex:none; letter-spacing:.02em; }
.r-st.offen{ background:var(--soon-bg); color:var(--soon); }
.r-st.bearb{ background:var(--nodate-bg); color:var(--nodate); }
.r-late{ font-size:10.5px; font-weight:700; color:var(--overdue); }

/* ---------- Hinweiskasten ohne Zuständigkeit ---------- */
.orphan{
  background:var(--warn-bg); border:1px solid var(--warn-line);
  border-radius:var(--radius); padding:13px 15px; margin:14px 0; box-shadow:var(--shadow);
}
.orphan h3{ font-size:14.5px; color:var(--warn); display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.orphan p{ margin:0 0 8px; font-size:13px; color:var(--warn); opacity:.9; }
.orphan .row{ padding:8px 0; }
.orphan .row + .row{ border-top-color:var(--warn-line); }

/* ---------- Nachrichten ---------- */
.grp{ background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:11px; overflow:hidden; }
.grp-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 15px; }
.grp-head .who{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.grp-head b{ font-family:"Bricolage Grotesque",sans-serif; font-size:15px; color:var(--brandink);
  overflow:hidden; text-overflow:ellipsis; }
.grp-head span{ font-size:11.5px; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; }
.grp-body{
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:12px; line-height:1.62; padding:12px 15px;
  background:var(--card-soft); color:var(--ink-2);
  white-space:pre-wrap; word-break:break-word;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.grp-empty{ padding:0 15px 13px; font-size:13px; color:var(--ink-3); }
.copy{
  display:block; width:calc(100% - 30px); margin:12px 15px;
  padding:12px; border:none; border-radius:12px;
  background:var(--accent); color:var(--accent-ink);
  font-size:14.5px; font-weight:800;
}
.copy.done{ background:var(--ok); }

/* ---------- Einstellungen ---------- */
.sheet{ position:fixed; inset:0; z-index:60; display:flex; align-items:flex-end; justify-content:center; }
.sheet-bg{ position:absolute; inset:0; background:rgba(20,28,38,.45); border:none; width:100%; }
.sheet-card{
  position:relative; background:var(--bg); width:100%; max-width:760px;
  max-height:92vh; overflow-y:auto; border-radius:20px 20px 0 0; padding:18px 16px 28px;
  box-shadow:var(--shadow-2);
}
@media (min-width:700px){ .sheet{ align-items:center; } .sheet-card{ border-radius:20px; max-height:86vh; } }
.sheet-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
.sheet-head h2{ font-size:19px; color:var(--brandink); }
.sheet p.hint{ font-size:13.5px; color:var(--ink-2); margin:0 0 14px; }
.set-grp{ background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:13px 14px; margin-bottom:10px; }
.set-top{ display:flex; gap:8px; align-items:center; margin-bottom:9px; }
.set-top input{
  flex:1; min-width:0; font-size:14.5px; font-weight:700; color:var(--ink);
  border:1px solid var(--line-2); border-radius:10px; padding:9px 11px; background:var(--card-soft);
}
.del{ border:none; background:var(--overdue-bg); color:var(--overdue); border-radius:10px;
  width:36px; height:36px; flex:none; font-size:15px; }
.movewrap{ display:flex; flex-direction:column; gap:2px; flex:none; }
.move{ border:none; background:var(--chip); color:var(--ink-2); border-radius:7px;
  width:26px; height:17px; font-size:8px; line-height:1; display:flex;
  align-items:center; justify-content:center; }
.move:disabled{ opacity:.3; cursor:default; }
.picks{ display:flex; flex-wrap:wrap; gap:6px; }
.pick{
  border:1px solid var(--line-2); background:var(--card-soft); color:var(--ink-2);
  border-radius:9px; padding:6px 10px; font-size:12.5px; font-weight:700;
}
.pick[aria-pressed="true"]{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.pick.taken{ opacity:.4; }
.set-brand{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); margin:14px 2px 7px; }
.set-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.btn{ border:none; border-radius:12px; padding:12px 16px; font-size:14.5px; font-weight:800; }
.btn.primary{ background:var(--accent); color:var(--accent-ink); flex:1; }
.btn.ghost{ background:var(--chip); color:var(--ink-2); }
.set-note{ font-size:12.5px; color:var(--ink-3); margin-top:12px; line-height:1.45; }

/* ---------- Zustände ---------- */
.state{ text-align:center; padding:48px 20px; color:var(--ink-2); }
.state .em{ font-size:34px; display:block; margin-bottom:10px; }
.state b{ display:block; font-family:"Bricolage Grotesque",sans-serif; font-size:17px; color:var(--ink); margin-bottom:5px; }
.state p{ margin:0; font-size:14px; }
.banner{
  background:var(--warn-bg); color:var(--warn); border:1px solid var(--warn-line);
  border-radius:12px; padding:10px 13px; font-size:13px; font-weight:600; margin:10px 0;
}
.foot{ text-align:center; font-size:12px; color:var(--ink-3); margin-top:26px; line-height:1.6; }
.foot button{ border:none; background:none; color:var(--ink-3); text-decoration:underline; font-size:12px; padding:0; }

/* ---------- Login ---------- */
.login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.login-card{
  background:var(--card); border-radius:20px; box-shadow:var(--shadow-2);
  padding:30px 26px; width:100%; max-width:370px; display:flex; flex-direction:column;
}
.login-card h1{ font-size:23px; color:var(--brandink); margin-bottom:3px; }
.login-card .sub{ font-size:13.5px; color:var(--ink-2); margin-bottom:20px; }
.login-card label{ font-size:12.5px; font-weight:800; color:var(--ink-2); margin-bottom:5px; }
.login-card input{
  border:1px solid var(--line-2); border-radius:11px; padding:11px 13px;
  font-size:16px; margin-bottom:14px; background:var(--card-soft); color:var(--ink);
  font-family:inherit;
}
.login-card button{
  border:none; border-radius:12px; background:var(--accent); color:var(--accent-ink);
  padding:13px; font-size:15px; font-weight:800; margin-top:4px;
}
.login-card .msg{ font-size:13.5px; color:var(--overdue); margin-top:12px; min-height:18px; text-align:center; }