/* =========================================================================
   Marc's To-Do-Listen – Dark-Blue Redesign (Moccu Design System)
   Font: Maison Neue · Akzent: Brand-Orange #ff6000
   ========================================================================= */
:root {
  --font-sans: "Maison Neue", "Inter", system-ui, -apple-system, Verdana, Arial, sans-serif;

  --orange: #ff6000;
  --orange-2: #ff9a4d;
  --today: #ff8f4d;

  --ink: #232323;      /* Titel auf Weiß */
  --body: #2c2f36;     /* Body auf Weiß */
  --meta: #9aa2b1;     /* Meta auf Weiß */
  --done: #a6adba;     /* erledigt auf Weiß */
  --divider: #eef0f4;
  --check-border: #ccd2de;
  --star-outline: #c7cdd8;
  --success: #2f9e56;

  --on-dark: #ffffff;
  --on-dark-2: #eaf0fa;
  --sec-1: #b7c4dc;
  --sec-2: #c3d0e6;
  --muted-1: #93a7cc;
  --muted-2: #8598ba;
  --focus: #0e67ec;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #101d38;
  color: var(--on-dark-2);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
body {
  min-height: 100vh;
  background: radial-gradient(125% 90% at 15% -8%, #22355c 0%, #16264a 45%, #101d38 100%);
  background-attachment: fixed;
}
::selection { background: rgba(255, 96, 0, 0.28); }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

.page { max-width: 1360px; margin: 0 auto; padding: 40px 40px 72px; }

/* ======================= Header „Ankr" ================================= */
/* Header über Schnell-Eingabe/Board legen, damit Dropdowns (Zahnrad, Insel) darüber liegen */
.app-header { position: relative; z-index: 30; }
.hdr {
  position: relative; overflow: visible; border-radius: 24px;
  background: linear-gradient(120deg, #26375c 0%, #1c2a49 52%, #17233e 100%);
  border: 1px solid rgba(130,170,225,.18);
  box-shadow: 0 28px 64px -36px rgba(0,0,0,.8);
}
.hdr-desktop { display: flex; justify-content: space-between; align-items: center; gap: 40px; padding: 28px 34px; }
.hdr-mobile { display: none; padding: 18px 18px 20px; }

/* Deko-Glows in eigener Clip-Ebene (damit Dropdown nicht abgeschnitten wird) */
.hdr-glows { position: absolute; inset: 0; overflow: hidden; border-radius: 24px; pointer-events: none; z-index: 0; }
.glow { position: absolute; border-radius: 50%; }
.glow-orange { right: -70px; top: -90px; width: 300px; height: 300px; background: radial-gradient(circle, rgba(255,96,0,.22), rgba(255,96,0,0) 70%); }
.glow-blue { left: 40%; bottom: -120px; width: 260px; height: 260px; background: radial-gradient(circle, rgba(90,140,220,.16), rgba(90,140,220,0) 70%); }

.hdr-left { position: relative; z-index: 1; display: flex; align-items: center; gap: 22px; }
.hdr-right { position: relative; z-index: 1; display: flex; align-items: center; gap: 26px; }

/* Marke + Logo */
.brand { display: flex; align-items: center; gap: 14px; }
.logo {
  position: relative; flex-shrink: 0; border-radius: 50%;
  background: linear-gradient(150deg, #ff9a4d, #ff5000);
  display: flex; align-items: center; justify-content: center;
}
.logo svg { width: 50%; height: 50%; }
.logo-lg { width: 58px; height: 58px; box-shadow: 0 0 0 7px rgba(255,96,0,.12), 0 0 34px 2px rgba(255,96,0,.4); }
.logo-sm { width: 40px; height: 40px; box-shadow: 0 0 0 5px rgba(255,96,0,.12), 0 0 22px 2px rgba(255,96,0,.4); }
.logo-check {
  position: absolute; right: -5px; bottom: -3px; border-radius: 50%;
  background: #2f9e56; border: 3px solid #1c2a49;
  display: flex; align-items: center; justify-content: center;
}
.logo-lg .logo-check { width: 24px; height: 24px; }
.logo-lg .logo-check svg { width: 12px; height: 12px; }
.logo-sm .logo-check { width: 18px; height: 18px; right: -3px; bottom: -3px; border-width: 2.5px; border-color: #1a2744; }
.logo-sm .logo-check svg { width: 10px; height: 10px; }
.brand-text { line-height: 1; }
.brand-name { font-size: 22px; font-weight: 700; letter-spacing: -.01em; color: #fff; }
.brand-tag { font-family: 'Caveat', cursive; font-size: 20px; color: #ff9a4d; margin-top: 2px; }

.hdr-sep {
  width: 1px; align-self: stretch; min-height: 60px;
  background: linear-gradient(180deg, transparent, rgba(140,175,225,.3) 22%, rgba(140,175,225,.3) 78%, transparent);
}
.hdr-list { min-width: 0; }
.hdr-kicker { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #8598ba; }
.hdr-h1 { margin: 4px 0 0; font-size: 34px; font-weight: 700; letter-spacing: -.02em; color: #fff; line-height: 1.05; }
.hdr-h1.editable { cursor: text; }
.hdr-h1.editable:hover { text-decoration: underline dotted; text-underline-offset: 5px; text-decoration-color: rgba(255,255,255,.45); }
.hdr-h1 .set-rename-input {
  font-size: 30px; font-weight: 700; letter-spacing: -.02em; padding: 2px 10px;
  border-radius: 10px; min-width: 260px; border: 1px solid var(--orange);
  background: #fff; color: var(--ink); font-family: inherit; outline: none;
}
.set-row .row-actions { display: inline-flex; align-items: center; gap: 7px; }
.hdr-list .set-switcher { margin-top: 13px; }

/* Fortschritts-Ring */
.ring { position: relative; flex-shrink: 0; }
.ring-lg { width: 88px; height: 88px; }
.ring-sm { width: 52px; height: 52px; }
.ring svg { display: block; }
.ring-bg { fill: none; stroke: rgba(255,255,255,.12); }
.ring-fg { fill: none; stroke: #ff6000; stroke-linecap: round; transition: stroke-dashoffset .4s ease-out; }
.ring-lg .ring-bg, .ring-lg .ring-fg { stroke-width: 7; }
.ring-sm .ring-bg, .ring-sm .ring-fg { stroke-width: 5; }
.ring-pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; line-height: 1; }
.ring-lg .ring-pct { font-size: 21px; }
.ring-sm .ring-pct { font-size: 14px; }

/* Statistik-Cluster */
.stats-cluster { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.stats-num { font-size: 22px; font-weight: 700; color: #fff; line-height: 1; }
.stats-slash { font-size: 15px; font-weight: 500; color: #7f93b8; }
.stats-lbl { font-size: 12px; color: #9db1d6; margin-top: 4px; letter-spacing: .02em; text-align: right; }
.chips { display: flex; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 99px; font-size: 12px; font-weight: 700; }
.chip svg { width: 12px; height: 12px; }
.chip-today { background: rgba(255,96,0,.14); border: 1px solid rgba(255,120,40,.32); color: #ff9a4d; }
.chip-live { background: rgba(120,180,140,.14); border: 1px solid rgba(140,200,160,.28); color: #b6e0c2; font-weight: 400; padding: 6px 12px; }
.chip-live.busy { background: rgba(255,255,255,.08); border-color: rgba(122,160,214,.2); color: var(--sec-2); }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: #63d089; box-shadow: 0 0 0 3px rgba(99,208,137,.22); }
.chip-live.busy .live-dot { background: #9fb0cc; box-shadow: none; }
.chip[hidden], .chip-today-m[hidden] { display: none !important; }

/* Mobile-Header-Zeilen */
.m-row1 { position: relative; z-index: 3; display: flex; align-items: center; gap: 11px; }
.m-brand { display: flex; align-items: baseline; gap: 7px; }
.m-brand .brand-name { font-size: 16px; }
.m-brand .brand-tag { font-size: 16px; margin-top: 0; }
.m-live { margin-left: auto; font-size: 10px; padding: 4px 9px; }
.m-live .live-dot { box-shadow: none; }
.m-sep { height: 1px; background: linear-gradient(90deg, rgba(140,175,225,.3), transparent); margin: 13px 0; }
.m-row2 { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; }
.m-list { flex: 1; min-width: 0; }
.m-list .hdr-kicker { font-size: 9px; }
.m-list .set-switcher { margin-top: 6px; }
.hdr-mobile .set-trigger { font-size: 16px; font-weight: 700; padding: 7px 12px 7px 13px; }
.m-row3 { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.m-stats { font-size: 12px; color: #9db1d6; }
.m-stats strong { color: #fff; font-weight: 700; }
.chip-today-m { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: #ff9a4d; }
.chip-today-m svg { width: 11px; height: 11px; }

/* ---- Set-Switcher (Dropdown) ------------------------------------------- */
.set-switcher { position: relative; display: inline-block; }
.set-trigger {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 14px 9px 16px; border-radius: 99px; cursor: pointer; font-family: inherit;
  background: rgba(255,255,255,.09); border: 1px solid rgba(140,175,225,.3);
  color: #e7eefb; font-size: 14px; font-weight: 600;
}
.set-trigger:hover { background: rgba(255,255,255,.14); }
.set-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); flex-shrink: 0; }
.set-menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 30;
  min-width: 248px; padding: 6px; border-radius: 14px; background: #fff;
  box-shadow: 0 22px 54px -18px rgba(0,0,0,.55); border: 1px solid #ececf0;
}
.set-menu-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--meta); padding: 8px 12px 6px; }
.set-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; border-radius: 9px; border: none; background: none; cursor: pointer;
  font-family: inherit; font-size: 15px; color: var(--ink); text-align: left;
}
.set-row:hover { background: #f5f6f8; }
.set-row .name { flex: 1; font-weight: 500; }
.set-row .tick { color: var(--success); display: inline-flex; }
.set-divider { height: 1px; background: #eef0f4; margin: 6px 4px; }
.set-new { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; border: none; background: none; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--orange); }
.set-new:hover { background: #fff6f0; border-radius: 9px; }
.set-logout { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; border: none; background: none; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--meta); }
.set-logout:hover { background: #f4f6fa; border-radius: 9px; color: var(--body); }
.set-overlay { position: fixed; inset: 0; z-index: 20; }
.set-rename-input {
  padding: 9px 14px; border-radius: 99px; border: 1px solid var(--orange); outline: none;
  font-family: inherit; font-size: 14px; font-weight: 600; min-width: 200px; background: #fff; color: var(--ink);
}

/* ---- Schnell-Eingabe --------------------------------------------------- */
.quickadd { margin: 22px 0 34px; }
.qa-row { display: flex; align-items: center; gap: 14px; }
.qa-field {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px;
  background: #fff; border-radius: 12px; padding: 4px 6px 4px 18px;
  box-shadow: 0 10px 30px -18px rgba(0,0,0,.8);
}
.qa-plus { flex-shrink: 0; }
.qa-input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-family: inherit; font-size: 16px; color: #232323; padding: 12px 0;
}
.qa-input::placeholder { color: #8a94a6; }
.qa-add {
  flex-shrink: 0; background: var(--orange); color: #fff; border: none;
  font-family: inherit; font-size: 15px; font-weight: 700;
  padding: 12px 22px; border-radius: 9px; cursor: pointer;
}
.qa-add:hover { background: #ff7220; }
.qa-add:disabled { opacity: .6; cursor: default; }
.qa-key {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(122,160,214,.2);
  color: #c3d0e6; font-family: inherit; font-size: 14px; font-weight: 600;
  padding: 15px 18px; border-radius: 12px; cursor: pointer;
}
.qa-key:hover { background: rgba(255,255,255,.12); }
.qa-status { margin-top: 10px; font-size: 13px; color: var(--sec-1); }
.qa-keyrow { margin-top: 12px; display: flex; gap: 10px; }
.qa-keyrow[hidden] { display: none; }
.qa-keyinput {
  flex: 1; min-width: 0; padding: 12px 16px; border-radius: 10px; border: 1px solid rgba(122,160,214,.3);
  background: rgba(255,255,255,.06); color: #eaf0fa; font-family: inherit; font-size: 14px; outline: none;
}
.qa-keyinput::placeholder { color: #7f93b8; }
.qa-keyinput:focus { border-color: rgba(122,160,214,.6); }
.qa-preview { margin-top: 12px; }
.qa-prev-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 8px 4px; border-bottom: 1px solid rgba(122,160,214,.14); font-size: 14px; color: var(--on-dark-2);
  cursor: pointer; border-radius: 8px;
}
.qa-prev-item:hover { background: rgba(122,160,214,.08); }
.qa-prev-path { color: var(--today); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; }
.qa-prev-title { flex: 1; min-width: 0; }
.qa-prev-text.editable { cursor: pointer; }
.qa-prev-item:hover .qa-prev-text.editable { text-decoration: underline dotted; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.45); }
.qa-prev-edit { flex-shrink: 0; display: inline-flex; align-items: center; opacity: .7; }
.qa-prev-item:hover .qa-prev-edit { opacity: 1; }
/* Voll-Editor eines Vorschau-Punkts – weiße Karte, damit die dunkel-auf-hell ie-* Stile greifen */
.qa-prev-editor { background: #fff; margin: 6px 0; }
.qa-ed-cat { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #eef0f4; }
.qa-ed-lbl { font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #9aa2b1; }
.qa-ed-input { flex: 1; min-width: 90px; box-sizing: border-box; border: 1px solid #dfe3ea; border-radius: 8px; padding: 7px 10px; font-family: inherit; font-size: 14px; color: var(--ink); background: #fff; outline: none; }
.qa-ed-input:focus { border-color: var(--orange); }
.qa-ed-sep { display: inline-flex; align-items: center; flex-shrink: 0; }
.qa-prev-input {
  width: 100%; box-sizing: border-box; background: #fff; color: var(--ink);
  border: 1px solid var(--orange); border-radius: 7px; padding: 4px 9px;
  font-family: inherit; font-size: 14px; outline: none;
}
.qa-prev-actions { display: flex; gap: 10px; margin-top: 12px; }
.qa-cancel {
  background: rgba(255,255,255,.06); border: 1px solid rgba(122,160,214,.2); color: #c3d0e6;
  font-family: inherit; font-size: 14px; font-weight: 600; padding: 11px 18px; border-radius: 10px; cursor: pointer;
}

/* ---- Board / Sektionen (Bereiche) -------------------------------------- */
.board { }
.area-section {
  padding: 26px 26px 30px; border-radius: 22px; margin-bottom: 26px;
  border: 1px solid rgba(122,160,214,.16);
}
.area-heading {
  display: flex; align-items: center; gap: 12px; margin: 0 0 20px;
  font-size: 22px; font-weight: 700; color: var(--on-dark);
}
.area-heading::before { content: ""; width: 4px; height: 22px; border-radius: 4px; background: var(--orange); flex-shrink: 0; }
.area-meta { font-size: 13px; font-weight: 400; color: var(--muted-2); white-space: nowrap; flex-shrink: 0; }
.area-heading.editable { cursor: text; }
.area-edit {
  font-size: 21px; font-weight: 700; color: var(--ink); font-family: inherit;
  padding: 5px 12px; border-radius: 10px; border: 1px solid var(--orange); outline: none; min-width: 220px;
}

/* Kacheln je Bereich – echtes Masonry (Spalten via JS) */
.area-board { display: flex; gap: 20px; align-items: flex-start; }
.masonry-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; }

/* "Neue Gruppe" (im Panel) */
.add-group-btn, .add-group-row { margin-top: 14px; }
.add-group-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 1px dashed rgba(122,160,214,.4); color: #a9b8d6;
  font-family: inherit; font-size: 14px; font-weight: 600; padding: 11px 18px; border-radius: 10px; cursor: pointer;
}
.add-group-btn:hover { border-color: rgba(122,160,214,.7); color: #cdd8ee; }
.add-group-row { display: flex; gap: 8px; max-width: 380px; }
.group-add-input {
  flex: 1; min-width: 0; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--orange);
  background: #fff; color: var(--ink); font-family: inherit; font-size: 14.5px; outline: none;
}

/* ---- Gruppen-Card (weiß) ----------------------------------------------- */
.card {
  background: #fff; border-radius: 14px; padding: 18px 18px 8px;
  box-shadow: 0 18px 40px -26px rgba(0,0,0,.75);
}
.card-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding-bottom: 12px; margin-bottom: 6px; border-bottom: 1px solid var(--divider);
}
.group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; width: 100%; }
.group-label { font-size: 16px; font-weight: 700; color: var(--ink); }
.group-label.editable { cursor: text; }
.group-label.editable:hover { text-decoration: underline dotted; text-underline-offset: 3px; }
.group-edit {
  font-size: 16px; font-weight: 700; color: var(--ink); font-family: inherit;
  padding: 5px 10px; border-radius: 8px; border: 1px solid var(--orange); outline: none; width: 100%;
}
.group-head-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.group-count { font-size: 13px; font-weight: 700; color: var(--meta); font-variant-numeric: tabular-nums; }
.group-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0; border: none; background: none; cursor: pointer; color: #b7bdc8;
}
.group-close:hover { color: var(--orange); }

.card-body { }

/* ---- To-Do-Zeile ------------------------------------------------------- */
.row {
  position: relative; display: flex; align-items: flex-start; gap: 11px;
  padding: 9px 8px 9px 14px; border-radius: 9px;
}
/* Farbstreifen links kommt vom ZEITPUNKT (nicht mehr vom Stern) */
.row-plan::before {
  content: ""; position: absolute; left: 0; top: 9px; bottom: 9px;
  width: 3px; border-radius: 3px; background: #c7cdd8;
}
.row-plan.bar-today::before { background: #d93025; }
.row-plan.bar-over::before { background: #d93025; }
.row-plan.bar-tomorrow::before { background: #ff6000; }
.row-plan.bar-week::before { background: #2f6fd4; }
.row-plan.bar-nextweek::before { background: #8fb6e8; }
.row[draggable="true"] { cursor: grab; }
.row.dragging { opacity: .45; }

.check {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--check-border); background: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; margin-top: 1px;
}
.check.checked { border: none; background: var(--success); }

/* Kopfzeile über dem Text: Stern (dezent) + Zeitpunkt */
.row-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.row-star { flex-shrink: 0; display: inline-flex; align-items: center; padding: 2px; border: none; background: none; border-radius: 5px; cursor: pointer; opacity: .55; }
.row-star:hover { opacity: 1; background: rgba(0,0,0,.05); }
.row-star.on { opacity: 1; }
.row-noplan { border: none; background: transparent; font: inherit; font-size: 11px; font-weight: 600; color: #b3bbc9; padding: 2px 4px; border-radius: 5px; cursor: pointer; }
.row-noplan:hover { color: #5b6270; background: rgba(0,0,0,.05); }

.row-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.row-text { font-size: 15px; line-height: 1.4; font-weight: 500; color: var(--body); }
.row-text.editable { cursor: text; }
.row-text.editable:hover { text-decoration: underline dotted; text-underline-offset: 3px; }
.row-text.clickable { cursor: pointer; }
.row-text.clickable:hover { text-decoration: underline dotted; text-underline-offset: 3px; }
/* erkannte, gekürzte Links im To-Do-Text */
.row-link { color: #2f6fd4; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(47,111,212,.45); white-space: nowrap; cursor: pointer; }
.row-link:hover { color: #1e4fa0; text-decoration-color: #1e4fa0; }
.row-text.done .row-link { color: #9aa2b1; text-decoration-color: rgba(154,162,177,.5); }
/* Link-Chip in der Meta-Zeile (Links aus der Notiz, gekürzt + klickbar) */
.meta-link { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; font-size: 12px; font-weight: 600; color: #2f6fd4; background: rgba(47,111,212,.09); border-radius: 6px; padding: 2px 8px 2px 6px; text-decoration: none; cursor: pointer; }
.meta-link:hover { background: rgba(47,111,212,.16); color: #1e4fa0; }
.meta-link .ic { flex-shrink: 0; }
/* Bild-Chip am To-Do (öffnet die Lightbox) */
.meta-img { display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 12px; font-weight: 600; color: #2f6fd4; background: rgba(47,111,212,.09); border: none; border-radius: 6px; padding: 2px 8px 2px 6px; cursor: pointer; }
.meta-img:hover { background: rgba(47,111,212,.16); color: #1e4fa0; }
.meta-img .ic { flex-shrink: 0; }

/* Plan-Chip („Wann") – blau/schiefer, damit Orange dem Stern/Ich-Tag bleibt */
.meta-plan { display: inline-flex; align-items: stretch; border-radius: 6px; overflow: hidden; flex-shrink: 0; }
.meta-plan .plan-lbl, .meta-plan .plan-next { border: none; background: transparent; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; padding: 2px 7px; color: inherit; display: inline-flex; align-items: center; }
.meta-plan .plan-next { padding: 2px 4px; border-left: 1px solid rgba(255,255,255,.35); }
.meta-plan .plan-next:hover, .meta-plan .plan-lbl:hover { background: rgba(0,0,0,.09); }
/* Eskalation: Heute rot → Morgen/Übermorgen orange → Diese Woche blau → Nächste Woche hellblau */
.plan-today, .plan-over { background: #d93025; color: #fff; }
.plan-tomorrow { background: var(--orange); color: #fff; }
.plan-week { background: #2f6fd4; color: #fff; }
.plan-nextweek { background: rgba(47,111,212,.16); color: #2359a8; }
.plan-nextweek .plan-next { border-left-color: rgba(47,111,212,.3); }

/* Auswahl-Popover für den Zeitpunkt */
.plan-pop { position: fixed; z-index: 70; background: #fff; border-radius: 12px; padding: 6px; box-shadow: 0 22px 48px -16px rgba(0,0,0,.5); display: flex; flex-direction: column; min-width: 150px; }
.plan-opt { border: none; background: transparent; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink); text-align: left; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.plan-opt:hover { background: #eef1f6; }
.plan-opt.active { background: rgba(47,111,212,.12); color: #2359a8; }
.plan-opt-clear { color: var(--meta); font-weight: 500; border-top: 1px solid #f1f2f5; border-radius: 0 0 8px 8px; margin-top: 4px; padding-top: 9px; }

/* Hinweiszeile am Item */
.row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.meta-date { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #7a8496; }
/* Notiz-/Link-Indikator: öffnet das Notiz-Fenster (kein Direktlink mehr) */
.meta-note { display: inline-flex; align-items: center; gap: 3px; border: none; background: transparent; font: inherit; font-size: 11px; font-weight: 700; color: #9aa2b1; padding: 2px 4px; border-radius: 5px; cursor: pointer; }
.meta-note:hover { background: rgba(0,0,0,.06); color: #5b6270; }
.meta-tag { font: inherit; font-size: 11px; font-weight: 600; color: #5a6a8a; background: #eef1f6; border: 1px solid transparent; border-radius: 6px; padding: 1px 7px; cursor: pointer; transition: background .12s, color .12s; }
.meta-tag:hover { background: #e2e7f0; }
/* nur das in den Einstellungen markierte Tag ist orange */
.meta-tag.hl { background: #ff6000; color: #fff; }
.meta-tag.hl:hover { background: #ff7220; }
.row-text.today { color: var(--ink); }
.row-text.done { color: var(--done); text-decoration: line-through; font-weight: 400; }

.del { opacity: 0; transition: opacity .15s; background: none; border: none; cursor: pointer; color: #c4cad6; padding: 2px; margin-top: 2px; flex-shrink: 0; display: inline-flex; }
.row:hover .del { opacity: .7; }
.del:hover { opacity: 1 !important; color: var(--orange); }

.item-edit {
  flex: 1; width: 100%; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--orange);
  font-size: 15px; font-family: inherit; color: var(--ink); outline: none; background: #fff;
}
.row-editing { padding: 6px 10px; }

.all-done { display: flex; align-items: center; gap: 8px; padding: 9px 14px; font-size: 14px; font-weight: 600; color: var(--success); }

.toggle-done, .add-btn {
  display: flex; align-items: center; gap: 7px; width: 100%;
  background: none; border: none; cursor: pointer; font-family: inherit; text-align: left;
}
.toggle-done { padding: 9px 14px; font-size: 13px; color: var(--meta); }
.toggle-done:hover { color: var(--body); }
.add-btn { padding: 10px 14px; font-size: 14px; font-weight: 600; color: var(--orange); }
.add-btn:hover { color: #e04f00; }
.add-row { display: flex; gap: 8px; padding: 6px 10px 4px; }
.add-input {
  flex: 1; min-width: 0; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--orange);
  font-size: 14.5px; font-family: inherit; color: var(--ink); outline: none;
}
.add-ok { background: var(--orange); color: #fff; border: none; border-radius: 8px; padding: 0 14px; cursor: pointer; font-size: 14px; font-weight: 700; font-family: inherit; }

.drop-target { outline: 2px dashed var(--orange); outline-offset: -2px; }

/* ---- Footer: Neue Hauptkategorie --------------------------------------- */
.add-area-wrap { display: flex; justify-content: center; margin-top: 40px; }
.add-area-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 26px; border-radius: 99px; cursor: pointer; font-family: inherit;
  background: rgba(255,255,255,.07); border: 1px solid rgba(140,175,225,.32);
  color: #e7eefb; font-size: 15px; font-weight: 700;
}
.add-area-btn:hover { background: rgba(255,255,255,.12); }
.add-area-row { display: flex; gap: 10px; margin: 40px auto 0; max-width: 460px; }
.area-add-input {
  flex: 1; min-width: 0; padding: 13px 16px; border-radius: 12px; border: 1px solid var(--orange);
  background: #fff; color: var(--ink); font-family: inherit; font-size: 15px; outline: none;
}

.hint { padding: 48px 24px; text-align: center; color: var(--sec-1); font-size: 15px; }
.hint small { color: var(--muted-2); }

.ic { display: block; flex-shrink: 0; }

/* ---- Responsive -------------------------------------------------------- */
/* ---- Detail-Panel (Item: Notiz, Datum, Tags) --------------------------- */
.d-overlay {
  position: fixed; inset: 0; z-index: 50; background: rgba(10,18,36,.55);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.d-panel {
  width: 100%; max-width: 460px; max-height: 88vh; overflow: auto;
  background: #fff; border-radius: 18px; padding: 20px 22px 22px;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.6);
}
.d-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.d-title { font-size: 17px; font-weight: 700; color: var(--ink); }
.d-close { background: none; border: none; cursor: pointer; color: var(--meta); display: inline-flex; padding: 2px; }
.d-close:hover { color: var(--ink); }
.d-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--meta); margin: 14px 0 6px; }
.d-input, .d-note, .d-date, .d-time, .d-taginput {
  width: 100%; box-sizing: border-box; border: 1px solid var(--divider); border-radius: 10px;
  padding: 10px 12px; font-family: inherit; font-size: 15px; color: var(--ink); outline: none; background: #fff;
}
.d-input:focus, .d-note:focus, .d-date:focus, .d-time:focus, .d-taginput:focus { border-color: var(--orange); }
.d-note { resize: vertical; min-height: 70px; }
.d-when { display: flex; gap: 10px; }
.d-when .d-date { flex: 2; }
.d-when .d-time { flex: 1; }
.d-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 8px; }
.d-tags:empty { display: none; }
.d-tag { display: inline-flex; align-items: center; gap: 5px; background: #eef1f6; color: #3a4a6a; font-size: 13px; font-weight: 600; border-radius: 8px; padding: 4px 6px 4px 10px; }
.d-tag-x { background: none; border: none; cursor: pointer; color: #8a94a6; display: inline-flex; padding: 1px; }
.d-tag-x:hover { color: var(--orange); }
.d-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.d-cancel { background: none; border: 1px solid var(--divider); border-radius: 10px; padding: 10px 16px; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--body); }

/* ---- Login-Gate -------------------------------------------------------- */
.login-gate {
  position: fixed; inset: 0; z-index: 100;
  background: radial-gradient(125% 90% at 15% -8%, #22355c 0%, #16264a 45%, #101d38 100%);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.login-gate[hidden] { display: none; }
.login-card {
  width: 100%; max-width: 380px; text-align: center;
  background: linear-gradient(120deg, #26375c 0%, #1c2a49 52%, #17233e 100%);
  border: 1px solid rgba(130,170,225,.18); border-radius: 24px;
  box-shadow: 0 28px 64px -30px rgba(0,0,0,.8); padding: 40px 32px 34px;
}
.login-card .logo-lg { margin: 0 auto 22px; }
.login-title { font-size: 30px; font-weight: 700; letter-spacing: -.02em; color: #fff; }
.login-sub { font-size: 14.5px; color: var(--sec-1); margin: 10px 0 26px; line-height: 1.5; }
.login-google {
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  width: 100%; background: #fff; color: #232323; border: none; border-radius: 12px;
  font-family: inherit; font-size: 15px; font-weight: 700; padding: 14px 18px; cursor: pointer;
}
.login-google:hover { background: #f2f4f8; }
.login-google:disabled { opacity: .6; cursor: default; }
.login-err { margin-top: 14px; font-size: 13px; color: #ffb3a0; min-height: 16px; }

/* Übersicht-Footer (Konto + Abmelden) */
.ov-foot { margin-top: 30px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--muted-2); font-size: 13px; }
.ov-foot-user { opacity: .85; }
.ov-logout { background: none; border: 1px solid rgba(122,160,214,.24); color: var(--sec-1); font-family: inherit; font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 9px; cursor: pointer; }
.ov-logout:hover { border-color: rgba(255,96,0,.5); color: #fff; }

/* ---- Logo als Home-Button + Listen-Icon-Kachel im Kopf ----------------- */
.brand[role="button"], .brand-m[role="button"] { cursor: pointer; border-radius: 14px; }
.brand[role="button"]:hover, .brand-m[role="button"]:hover { opacity: .92; }
.brand-m { display: flex; align-items: center; gap: 11px; }

.hdr-icontile {
  flex-shrink: 0; width: 52px; height: 52px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
}
.hdr-icontile[hidden] { display: none; }
.hdr-icontile-m { width: 40px; height: 40px; border-radius: 12px; }
.hdr-icontile-m[hidden] { display: none; }
.m-list { display: flex; align-items: center; gap: 11px; }
.m-list-txt { flex: 1; min-width: 0; }
.m-greet { font-size: 20px; font-weight: 700; color: #fff; margin-top: 3px; letter-spacing: -.01em; }

/* icon-only Schlüssel-Button */
.qa-key-icon { padding: 0; width: 50px; height: 50px; justify-content: center; }

/* ---- Übersicht (alle Listen) ------------------------------------------- */
.ov-wrap { }
.ov-head { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 20px; }
.ov-h2 { margin: 0; font-size: 20px; font-weight: 700; color: var(--on-dark); }
.seg { display: inline-flex; padding: 3px; border-radius: 11px; background: rgba(255,255,255,.06); border: 1px solid rgba(122,160,214,.18); gap: 2px; }
.seg-btn { border: none; background: none; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 700; color: var(--sec-1); padding: 7px 15px; border-radius: 8px; }
.seg-btn.active { background: #fff; color: var(--ink); }

.ov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }

/* „Mein Plan" – Zeit-Spalten über alle Listen */
.pb-wrap { margin-top: 40px; }
.pb-hint { font-size: 13px; color: var(--on-dark-2); }
.pb-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; align-items: start; }
.pb-col { background: #fff; border-radius: 18px; padding: 14px 14px 10px; box-shadow: 0 24px 52px -30px rgba(0,0,0,.55); }
.pb-colhead { display: flex; align-items: center; gap: 8px; padding: 0 2px 10px; border-bottom: 1px solid #f1f2f5; margin-bottom: 6px; }
.pb-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: #9aa2b1; }
.pb-today .pb-dot { background: #2f6fd4; }
.pb-tomorrow .pb-dot { background: rgba(47,111,212,.5); }
.pb-week .pb-dot { background: #5a6a8a; }
.pb-nextweek .pb-dot { background: #c2c8d4; }
.pb-coltitle { flex: 1; min-width: 0; font-size: 14px; font-weight: 800; color: var(--ink); }
.pb-colcount { font-size: 12px; font-weight: 700; color: var(--meta); }
.pb-item { display: flex; align-items: flex-start; gap: 9px; padding: 8px 6px; border-radius: 10px; cursor: pointer; }
.pb-item:hover { background: #f5f7fa; }
.pb-check { flex-shrink: 0; width: 17px; height: 17px; margin-top: 1px; border-radius: 50%; border: 1.8px solid #c7cdd8; background: #fff; cursor: pointer; padding: 0; }
.pb-check:hover { border-color: #2f9e56; }
.pb-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pb-text { font-size: 14px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-sub { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--meta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-listdot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.pb-over { color: #c2483d; font-weight: 700; }
.pb-item.over .pb-text { color: #a83a30; }
.pb-star { flex-shrink: 0; display: inline-flex; margin-top: 2px; }
.pb-next { flex-shrink: 0; border: none; background: transparent; color: #9aa2b1; padding: 3px; border-radius: 6px; cursor: pointer; display: inline-flex; margin-top: 1px; }
.pb-next:hover { background: #e9ebf0; color: #2f6fd4; }
.ov-grid.ov-listmode { grid-template-columns: 1fr; }

.lc-card {
  --acc: #3b6fd4;
  position: relative;
  display: flex; flex-direction: column; text-align: left; cursor: pointer;
  padding: 22px 22px 20px; border-radius: 18px; background: #fff;
  border: 1.5px solid #fff; box-shadow: 0 18px 42px -26px rgba(0,0,0,.6);
  font-family: inherit; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.lc-card:hover { transform: translateY(-4px); border-color: var(--acc); box-shadow: 0 26px 52px -26px rgba(0,0,0,.55); }
.lc-grip { position: absolute; top: 12px; right: 12px; display: inline-flex; cursor: grab; color: #c2c8d4; opacity: 0; transition: opacity .15s ease; }
.lc-card:hover .lc-grip { opacity: 1; }
.lc-grip:active { cursor: grabbing; }
.lc-card.list-drop { box-shadow: 0 -3px 0 0 #ff6000, 0 18px 42px -26px rgba(0,0,0,.6); border-color: var(--acc); }
.settings-hint { margin-top: 10px; font-size: 12.5px; color: var(--meta); }

/* Tag-Verwaltung in den Einstellungen */
.tagmgr-addrow { display: flex; gap: 8px; margin-top: 6px; }
.tagmgr-input { flex: 1; min-width: 0; box-sizing: border-box; border: 1px solid var(--divider); border-radius: 10px; padding: 9px 12px; font-family: inherit; font-size: 14px; color: var(--ink); outline: none; background: #fff; }
.tagmgr-input:focus { border-color: var(--orange); }
.tagmgr-add { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; border: 1px solid #f0d8c6; background: #fff6f0; color: #ff6000; border-radius: 10px; padding: 9px 14px; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.tagmgr-add:hover { background: #ffece0; }
.tagmgr-list { margin-top: 10px; max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; }
.tagmgr-row { display: flex; align-items: center; gap: 8px; padding: 7px 2px; border-bottom: 1px solid #f1f2f5; }
.tagmgr-row:last-child { border-bottom: none; }
.tagmgr-name { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #3a4a6a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tagmgr-dot { width: 8px; height: 8px; border-radius: 50%; background: #5a6a8a; flex-shrink: 0; }
.tagmgr-cnt { font-size: 12px; color: #9aa2b1; flex-shrink: 0; }
.tagmgr-btn { flex-shrink: 0; border: none; background: transparent; cursor: pointer; display: inline-flex; padding: 4px; border-radius: 6px; }
.tagmgr-btn:hover { background: #eef0f4; }
.tagmgr-del:hover { background: #fdf1f1; }
.tagmgr-hl.on:hover { background: #fff2e8; }
.tagmgr-row.hl .tagmgr-dot { background: #ff6000; }
.tagmgr-row.hl .tagmgr-name { color: #d1500a; }
.tagmgr-edit { flex: 1; min-width: 0; box-sizing: border-box; border: 1px solid var(--orange); border-radius: 8px; padding: 6px 10px; font-family: inherit; font-size: 14px; color: var(--ink); outline: none; }
.lc-head { display: flex; align-items: center; gap: 14px; }
.lc-tile { flex-shrink: 0; width: 50px; height: 50px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; }
.lc-head-txt { min-width: 0; }
.lc-name { font-size: 19px; font-weight: 700; color: var(--ink); line-height: 1.15; }
.lc-meta { font-size: 13px; color: #8a94a6; margin-top: 3px; }
.lc-prog { display: flex; align-items: baseline; justify-content: space-between; margin: 18px 0 8px; }
.lc-open { font-size: 14px; font-weight: 700; color: var(--body); }
.lc-pct { font-size: 13px; font-weight: 700; }
.lc-bar { height: 7px; border-radius: 99px; background: #eef0f4; overflow: hidden; }
.lc-fill { display: block; height: 100%; border-radius: 99px; transition: width .4s ease-out; }
.lc-due { display: flex; align-items: center; gap: 7px; margin-top: 16px; padding-top: 14px; border-top: 1px solid #eef0f4; font-size: 12.5px; font-weight: 600; color: #ff6000; }
.lc-due svg { flex-shrink: 0; }

.lc-new {
  align-items: center; justify-content: center; gap: 12px; min-height: 210px;
  background: transparent; border: 1.5px dashed rgba(140,175,225,.35); box-shadow: none;
}
.lc-new:hover { transform: none; border-color: var(--orange); background: rgba(255,96,0,.04); }
.nlc-tile { width: 54px; height: 54px; border-radius: 15px; background: rgba(255,96,0,.14); display: inline-flex; align-items: center; justify-content: center; }
.nlc-label { font-size: 15px; font-weight: 700; color: var(--sec-1); }
.lc-new:hover .nlc-label { color: #fff; }

.ov-listmode .lc-card:not(.lc-new) { padding: 16px 20px; }
.ov-listmode .lc-prog { margin: 12px 0 7px; }

/* ---- „Neue Liste"-Dialog (Icon-Picker) --------------------------------- */
.nl-panel {
  width: 100%; max-width: 440px; max-height: 88vh; overflow: auto;
  background: #fff; border-radius: 18px; padding: 20px 22px 22px;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.6);
}
.nl-preview { display: flex; align-items: center; gap: 13px; padding: 14px; border-radius: 14px; background: #f8f7f3; margin-top: 6px; }
.nl-prevtile { flex-shrink: 0; width: 46px; height: 46px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; }
.nl-prevname { font-size: 17px; font-weight: 700; color: var(--ink); }
.nl-name {
  width: 100%; box-sizing: border-box; border: 1px solid var(--divider); border-radius: 10px;
  padding: 11px 13px; font-family: inherit; font-size: 15px; color: var(--ink); outline: none; background: #fff;
}
.nl-name:focus { border-color: var(--orange); }
.nl-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 9px; }
.nl-cell { border: none; cursor: pointer; aspect-ratio: 1; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: box-shadow .12s ease; }
/* Liste-bearbeiten: scrollbares Icon-Raster + Fuß */
.nl-grid-scroll { max-height: 176px; overflow-y: auto; padding: 2px 4px 2px 2px; }
.nl-scrollhint { margin-top: 8px; font-size: 11px; color: var(--meta); text-align: center; }
.nl-foot-edit { display: flex; align-items: center; justify-content: space-between; }
.nl-foot-right { display: flex; gap: 10px; }
.nl-del { background: none; border: 1px solid #f0c9c9; color: #d84b4b; border-radius: 10px; padding: 10px 16px; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 600; }
.nl-del:hover { background: #fdf1f1; }
/* Dropdown: Bearbeiten-Stift an aktiver Liste */
.set-row-actions { display: inline-flex; align-items: center; gap: 8px; }
.set-edit-btn { display: inline-flex; padding: 2px; border-radius: 6px; cursor: pointer; }
.set-edit-btn:hover { background: #eef0f4; }

/* ===== Header v2 (Insel + Status-Cluster + Zahnrad) ===================== */
.hdr-desktop { display: flex; justify-content: flex-start; align-items: center; gap: 0; padding: 24px; }
.hdr-brandgrp { position: relative; z-index: 1; flex: 0 0 auto; display: flex; align-items: center; gap: 28px; }
.hdr-spacer { flex: 1 1 24px; min-width: 24px; }
.hdr-status { position: relative; z-index: 1; flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
.hdr-leftslot { position: relative; z-index: 2; min-width: 0; }
.hdr-greet { min-width: 0; }

/* Insel „Aktuelle Liste" */
.insel { position: relative; display: flex; align-items: center; gap: 13px; padding: 12px 14px; border-radius: 16px; background: linear-gradient(180deg,#ffffff,#eef2f9); border: none; cursor: pointer; box-shadow: 0 20px 42px -16px rgba(0,0,0,.55); overflow: hidden; font-family: inherit; max-width: 430px; }
.insel-top { position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg,#ff9a4d,#ff5000); }
.insel-tile { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.insel-txt { text-align: left; line-height: 1.1; min-width: 0; }
.insel-kicker { display: block; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8a94a6; }
.insel-name { display: block; font-size: 22px; font-weight: 700; letter-spacing: -.01em; color: #1c2a49; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 270px; }
.insel-chev { flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px; background: #eef2f9; display: flex; align-items: center; justify-content: center; margin-left: 2px; }
.insel-menu { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); z-index: 30; }

/* Status-Cluster */
.hdr-counter { line-height: 1.1; text-align: right; }
.hdr-vdiv { width: 1px; height: 44px; background: rgba(255,255,255,.14); }
.hdr-vdiv[hidden] { display: none; }
.hdr-pills { display: flex; flex-direction: column; gap: 7px; }
.hdr-gearwrap { position: relative; }
.hdr-gear { width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,.1); border: 1px solid rgba(165,198,248,.3); color: #c3d0e6; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.hdr-gear:hover { background: rgba(255,255,255,.16); }

/* Zahnrad-Menü */
.gear-overlay { position: fixed; inset: 0; z-index: 20; }
.gear-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; min-width: 240px; padding: 6px; border-radius: 14px; background: #fff; box-shadow: 0 22px 54px -18px rgba(0,0,0,.55); border: 1px solid #ececf0; }
.gear-user { padding: 6px 12px 8px; font-size: 12px; color: #9aa2b1; }
.gear-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 12px; border: none; background: transparent; border-radius: 9px; cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 600; color: #232323; }
.gear-item:hover { background: #f5f6f8; }
.gear-logout { color: #d84b4b; }
.gear-logout:hover { background: #fdf1f1; }

/* Ring-Größen (Desktop): Übersicht groß (88), Liste kompakt (58) */
.ring-md { width: 58px; height: 58px; }
.ring-md svg { width: 58px; height: 58px; }
.ring-md .ring-bg, .ring-md .ring-fg { stroke-width: 9; }
.ring-md .ring-pct { font-size: 16px; }
.ring-lg svg { width: 88px; height: 88px; }

/* Dropdown-Zeilen (Insel & Mobile) */
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.set-rowname { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.set-row-edit { padding: 6px; }

/* ===== Board v2 (einheitliche Sektionen, CSS-Grid, Inline-Add) ========== */
/* Dashboard-Grid: Kategorien nebeneinander, dicht gepackt (Spannen per JS) */
/* Filter-Icon in der Schnell-Eingabe-Zeile */
.qa-filter {
  flex-shrink: 0; position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 50px; height: 50px; border-radius: 12px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(122,160,214,.2); color: #c3d0e6;
  cursor: pointer; transition: background .12s, border-color .12s, color .12s;
}
.qa-filter[hidden] { display: none; }
.qa-filter:hover { background: rgba(255,255,255,.12); }
.qa-filter.open { background: rgba(255,255,255,.16); color: #fff; }
.qa-filter.has { border-color: rgba(255,96,0,.55); color: #ff8a3d; }
.qa-filter-badge {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: #ff6000; color: #fff; font-size: 11px; font-weight: 800;
  border: 2px solid #16264a;
}
.qa-filter-badge[hidden] { display: none; }

/* Helles Tag-Filter-Panel (Listenansicht) */
.tag-filter {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 20px;
  padding: 12px 14px; border: 1px solid; border-radius: 16px;
  box-shadow: 0 22px 54px -42px rgba(0,0,0,.7);
}
.tf-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #7a8496; margin-right: 4px; }
.tf-chip { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 13px; font-weight: 600; color: #3a4763; background: #fff; border: 1px solid rgba(90,106,138,.22); border-radius: 999px; padding: 5px 13px; cursor: pointer; transition: background .12s, border-color .12s, color .12s; box-shadow: 0 4px 10px -8px rgba(0,0,0,.5); }
.tf-chip:hover { background: #eef1f6; }
.tf-chip .tf-dot { width: 7px; height: 7px; border-radius: 50%; background: #8a94a6; flex-shrink: 0; transition: background .12s; }
/* im Filter ausgewählt: neutrales Dunkel (NICHT orange – orange ist dem Highlight vorbehalten) */
.tf-chip.active { background: #2f3d63; border-color: #2f3d63; color: #fff; }
.tf-chip.active .tf-dot { background: #fff; }
/* hervorgehobener („das bin ich") Tag: orange – zählt mehr als die Auswahl */
.tf-chip.hl { background: #ff6000; border-color: #ff6000; color: #fff; }
.tf-chip.hl .tf-dot { background: #fff; }
.tf-chip.tf-none { border-style: dashed; color: #6b7690; }
.tf-chip .tf-dot.none { background: transparent; border: 1.5px solid #a3adbf; }
.tf-chip.tf-none.active { color: #fff; }
.tf-chip.tf-none.active .tf-dot.none { border-color: #fff; }
.tf-clear { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 12.5px; font-weight: 600; color: #7a8496; background: none; border: none; cursor: pointer; padding: 5px 6px; }
.tf-clear:hover { color: #232323; }
.filter-empty { display: flex; align-items: center; gap: 10px; color: #9fb0cf; font-size: 15px; padding: 24px 2px; }

.board-grid { display: grid; grid-auto-rows: 8px; grid-auto-flow: row dense; gap: 20px; }
.board-grid > .area-section { align-self: start; margin-bottom: 0; }
.area-section { background: linear-gradient(180deg, #202c4a 0%, #1a2540 100%); border: 1px solid rgba(120,150,210,.12); border-radius: 24px; padding: 26px 26px 30px; margin-bottom: 26px; box-shadow: 0 30px 70px -46px rgba(0,0,0,.8); }
/* Breiten-Umschalter im Kategorie-Kopf */
.area-head-spacer { flex: 1; min-width: 6px; }
/* Spaltenbreite: aktueller Wert immer sichtbar; Nachbarn als Hover-Popover (kein Layout-Sprung) */
.area-cols { position: relative; display: inline-flex; flex-shrink: 0; }
.cols-cur { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 26px; border-radius: 8px; border: 1px solid rgba(28,42,73,.14); background: rgba(255,255,255,.6); color: #ff6000; cursor: pointer; padding: 0; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.cols-cur:hover { background: #fff; }
.cols-pop { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: none; align-items: center; gap: 3px; padding: 3px; border-radius: 9px; border: 1px solid rgba(28,42,73,.14); background: #fff; box-shadow: 0 8px 22px -8px rgba(0,0,0,.3); z-index: 6; }
.area-cols:hover .cols-pop { display: inline-flex; }
.cols-opt { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 24px; border: none; background: transparent; border-radius: 6px; cursor: pointer; color: #8a94a6; padding: 0; transition: background .12s ease, color .12s ease; }
.cols-opt:hover { background: rgba(0,0,0,.06); color: #5b6270; }
.cols-opt.active { background: #fff; color: #ff6000; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.cols-opt.dim { opacity: .28; }
.cols-opt.dim.active { opacity: .5; }
/* Nur eine Spalte möglich (z. B. iPhone Hochformat): Breiten-Umschalter ausblenden */
.board-grid.single-col .area-cols { display: none; }
.area-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; align-items: start; }
/* Masonry-Modus (per JS aktiviert): Spalten füllen sich nach kürzester Höhe */
.area-grid.masonry { display: flex; gap: 20px; align-items: flex-start; }
.masonry-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.card { background: #fff; border-radius: 16px; padding: 18px 18px 8px; box-shadow: 0 16px 36px -20px rgba(0,0,0,.45); }

/* Inline „Punkt hinzufügen" (gestrichelter Kreis + Unterstrich) */
.add-inline { display: flex; align-items: center; gap: 11px; padding: 9px 8px 9px 14px; }
.add-dot { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; border: 2px dashed #c7cdd8; }
.add-input-inline { flex: 1; min-width: 0; border: none; border-bottom: 1.5px solid var(--orange); background: transparent; font-family: inherit; font-size: 15px; color: var(--ink); outline: none; padding: 3px 0; }
.add-input-inline::placeholder { color: #b0b7c3; }

/* „Neue Gruppe" – gestrichelte Pille in der Sektion */
.add-group-btn { display: inline-flex; align-items: center; gap: 8px; width: auto; margin-top: 22px; padding: 11px 18px; border-radius: 10px; border: 1px dashed rgba(90,106,134,.4); background: transparent; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 600; color: #5b6a86; }
.add-group-btn:hover { border-color: var(--orange); color: #1c2a49; }

/* „Neue Kategorie" – zentrierte Pille am Seitenende */
.add-area-wrap { display: flex; justify-content: center; margin-top: 40px; }
.add-area-btn { display: inline-flex; align-items: center; gap: 9px; padding: 14px 26px; border-radius: 99px; border: 1px solid rgba(140,175,225,.32); background: rgba(255,255,255,.07); cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 700; color: #e7eefb; }
.add-area-btn:hover { background: rgba(255,255,255,.12); }

/* ===== Stage 4/6: Inline-Editor · Einklappen · Drag-Reorder ============= */
.area-heading::before { content: none; }
.area-heading { cursor: default; gap: 9px; }
.area-grip { display: inline-flex; cursor: grab; color: #6b7ba0; }
.area-grip:active { cursor: grabbing; }
.area-collapse { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: none; background: transparent; color: #5b6a86; cursor: pointer; border-radius: 6px; }
.area-collapse:hover { background: rgba(0,0,0,.06); }
.area-bar { width: 4px; height: 22px; border-radius: 4px; background: #ff6000; flex-shrink: 0; }
.area-title { font-size: 22px; font-weight: 700; color: #1c2a49; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.area-title.editable { cursor: text; }
.area-title.editable:hover { text-decoration: underline dotted; text-underline-offset: 4px; text-decoration-color: rgba(0,0,0,.3); }

.area-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.area-chip { display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px 9px 10px; border-radius: 11px; background: rgba(255,255,255,.06); border: 1px solid rgba(140,175,225,.22); color: #e7eefb; }
.area-chip:hover { background: rgba(255,255,255,.1); border-color: var(--orange); }
.area-chip-grip { display: inline-flex; cursor: grab; color: #8ba0c6; }
.area-chip-grip:active { cursor: grabbing; }
.area-chip-open { display: inline-flex; align-items: center; gap: 9px; border: none; background: transparent; color: inherit; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; padding: 0; }
.area-chip-count { font-size: 12px; font-weight: 500; color: #8598ba; }
.area-chip.chip-drop { box-shadow: inset 3px 0 0 0 #ff6000, 0 0 0 3px rgba(255,96,0,.14); }

.area-section.sec-drop { box-shadow: 0 -3px 0 0 #ff6000, 0 0 0 4px rgba(255,96,0,.14); }
.group-grip { display: inline-flex; cursor: grab; color: #c2c8d4; margin-right: 2px; }
.group-grip:active { cursor: grabbing; }
.card.group-drop { box-shadow: 0 -3px 0 0 #ff6000, 0 16px 36px -20px rgba(0,0,0,.45); }

.item-editor { border: 1px solid #eceef2; border-radius: 12px; padding: 14px 14px 12px; box-shadow: 0 14px 30px -18px rgba(0,0,0,.28); margin: 4px 0; }
.ie-top { display: flex; align-items: flex-start; gap: 11px; }
.ie-main { flex: 1; min-width: 0; }
.ie-title { width: 100%; border: none; outline: none; font-family: inherit; font-size: 16px; font-weight: 600; color: var(--ink); padding: 0; background: transparent; }
.ie-note { width: 100%; box-sizing: border-box; border: none; outline: none; resize: none; overflow: hidden; font-family: inherit; font-size: 14px; line-height: 1.5; color: #5b6270; margin-top: 6px; background: transparent; min-height: 20px; }
.ie-note::placeholder { color: #9aa2b1; }
.ie-star { border: none; background: transparent; cursor: pointer; padding: 0; flex-shrink: 0; display: inline-flex; }
.ie-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #f1f2f5; }
.ie-when { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 8px; background: #f4f5f8; font-size: 13px; color: #5b6270; }
.ie-ico { display: inline-flex; align-items: center; cursor: pointer; color: #5b6270; }
.ie-when .ie-date, .ie-when .ie-time { border: none; background: transparent; font-family: inherit; font-size: 13px; color: #5b6270; outline: none; cursor: pointer; padding: 0; }
.ie-when input::-webkit-calendar-picker-indicator { display: none; -webkit-appearance: none; }
.ie-when input::-webkit-inner-spin-button, .ie-when input::-webkit-clear-button { display: none; -webkit-appearance: none; }
.ie-tags { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ie-tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 8px; background: rgba(59,111,212,.1); font-size: 13px; color: #3b6fd4; }
.ie-tag .ie-dot { width: 6px; height: 6px; border-radius: 50%; background: #3b6fd4; }
.ie-tag-x { border: none; background: transparent; cursor: pointer; color: #3b6fd4; display: inline-flex; padding: 0; opacity: .7; }
.ie-tag-x:hover { opacity: 1; }
.ie-taginput { border: none; outline: none; background: transparent; font-family: inherit; font-size: 13px; color: var(--ink); width: 60px; }
.ie-toolspacer { flex: 1; }
.ie-del { width: 30px; height: 30px; border: none; border-radius: 8px; background: transparent; color: #b7bdc8; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.ie-del:hover { background: #fdf1f1; color: #d84b4b; }

/* Checkliste im To-Do (wie Things) – dezent, eingerückt unter den Titel */
.ie-checklist { display: flex; flex-direction: column; gap: 0; margin-top: 8px; margin-left: 31px; }
.ie-checklist:empty { display: none; }
.ie-cl-item { display: flex; align-items: center; gap: 9px; padding: 2px 0; }
.ie-cl-check { flex-shrink: 0; width: 15px; height: 15px; border-radius: 50%; border: 1.8px solid #ccd2de; background: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.ie-cl-check.checked { background: #2f9e56; border-color: #2f9e56; }
.ie-cl-check svg { width: 8px; height: 8px; }
.ie-cl-text { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: inherit; font-size: 13px; color: #7b8494; padding: 1px 0; }
.ie-cl-text.done { color: #aeb4c0; text-decoration: line-through; }
.ie-cl-text::placeholder { color: #c0c6d0; }
.ie-cl-x { flex-shrink: 0; border: none; background: transparent; cursor: pointer; color: #c2c8d4; display: inline-flex; padding: 2px; opacity: 0; }
.ie-cl-item:hover .ie-cl-x { opacity: 1; }
.ie-cl-x:hover { color: #d84b4b; }
.ie-clbtn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; border: none; background: #f4f5f8; color: #5b6270; font-family: inherit; font-size: 13px; cursor: pointer; }
.ie-clbtn:hover { background: #e9ebf0; }
/* „Wann"-Chips im Item-Editor – kompakt */
.ie-planrow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 8px; margin-left: 31px; }
.ie-planlbl { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--meta); margin-right: 2px; }
.ie-planchip { border: 1px solid #dfe3ea; background: #fff; font: inherit; font-size: 11.5px; font-weight: 600; color: #4a5876; border-radius: 999px; padding: 2px 8px; cursor: pointer; }
.ie-planchip:hover { background: #eef1f6; }
.ie-planchip.active { background: #2f6fd4; border-color: #2f6fd4; color: #fff; }

/* Notiz + Checkliste im Item-Editor: nur Aufruf-Buttons, KEIN Inhalt/Anriss */
.ie-teasers { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; margin-left: 31px; }
.ie-noteadd {
  display: inline-flex; align-items: center; gap: 6px;
  border: none; background: transparent; font: inherit; font-size: 12.5px; color: #7a8496;
  padding: 4px 7px; border-radius: 8px; cursor: pointer;
}
.ie-noteadd .ic { flex-shrink: 0; }
.ie-noteadd:hover { background: #f4f5f8; color: #3f4552; }

/* Bild: nur ein Icon-Button in der Werkzeugzeile */
.ie-file { display: none; }
.ie-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 30px; border: none; border-radius: 8px; background: #f4f5f8; cursor: pointer; padding: 0; }
.ie-iconbtn:hover { background: #e9ebf0; }
.ie-iconbtn.has { background: rgba(47,111,212,.1); }
.ie-imghint { font-size: 13px; color: #7a8496; }
.ie-imghint:empty { display: none; }

/* Notiz-Fenster (nur ansehen) */
.nv-overlay { z-index: 60; }
.nv-panel { width: 100%; max-width: 560px; max-height: 86vh; display: flex; flex-direction: column; background: #fff; border-radius: 18px; padding: 16px 20px 18px; box-shadow: 0 30px 70px -20px rgba(0,0,0,.6); }
.nv-body { overflow: auto; margin-top: 4px; }
.nv-p { margin: 0 0 8px; font-size: 15px; line-height: 1.55; color: #3f4552; white-space: pre-wrap; word-break: break-word; }
.nv-p:last-child { margin-bottom: 0; }
.nv-p:empty { height: 8px; }
.nv-empty { margin: 6px 0; font-size: 14px; color: var(--meta); }
.nv-edit {
  width: 100%; box-sizing: border-box; min-height: 180px; resize: vertical;
  border: 1px solid #dfe3ea; border-radius: 10px; padding: 10px 12px;
  font-family: inherit; font-size: 15px; line-height: 1.55; color: var(--ink); outline: none;
}
.nv-edit:focus { border-color: var(--orange); }
/* Checkliste im Fenster: ohne den Einzug aus der Zeilenansicht */
.cl-list { margin-left: 0; margin-top: 0; }
/* Löschen im Bild-Fenster */
.iv-del { display: inline-flex; align-items: center; gap: 6px; border: none; background: #fdf1f1; color: #c2483d; font-family: inherit; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 8px; cursor: pointer; }
.iv-del:hover { background: #fbe3e3; }

/* Bild-Overlay (Lightbox) */
.iv-overlay { z-index: 60; }
.iv-panel { width: 100%; max-width: 900px; max-height: 90vh; display: flex; flex-direction: column; background: #fff; border-radius: 18px; padding: 14px 16px 16px; box-shadow: 0 30px 70px -20px rgba(0,0,0,.6); }
.iv-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
.iv-title { font-size: 15px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iv-body { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: auto; }
.iv-img { max-width: 100%; max-height: 78vh; border-radius: 10px; display: block; }
.iv-loading { font-size: 14px; color: #7a8496; padding: 30px 0; }
.ie-done { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; border: 1px solid rgba(47,158,86,.3); background: rgba(47,158,86,.1); color: #2f9e56; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.ie-done:hover { background: rgba(47,158,86,.16); }
/* Checklisten-Chip: direkt aus der Zeile anklickbar (öffnet das Checklisten-Fenster) */
.meta-check { display: inline-flex; align-items: center; gap: 4px; border: none; background: transparent; font: inherit; font-size: 12px; font-weight: 600; color: #7a8496; padding: 2px 5px; border-radius: 5px; cursor: pointer; }
.meta-check:hover { background: rgba(0,0,0,.06); color: #5b6270; }

/* Zwei-Klick-Löschen: scharfgestellter Zustand (rot) */
.del.del-confirm { opacity: 1 !important; background: #d84b4b; border-radius: 6px; }
.del.del-confirm svg { stroke: #fff; }
.ie-del.del-confirm { background: #d84b4b; }
.ie-del.del-confirm svg { stroke: #fff; }

@media (max-width: 720px) {
  .page { padding: 18px 16px 64px; }
  .hdr-desktop { display: none; }
  .hdr-mobile { display: block; }
  .m-gearwrap { margin-left: 4px; }
  .m-gear { width: 34px; height: 34px; border-radius: 10px; }
  .m-gear svg { width: 16px; height: 16px; }

  /* Mobile-Header v2: Insel-Pille / Begrüßung in row2 */
  .m-row2 { display: flex; align-items: center; gap: 12px; }
  .hdr-leftslot-m { position: relative; flex: 1; min-width: 0; }
  .insel-m { width: 100%; padding: 10px 12px; border-radius: 14px; box-shadow: 0 14px 30px -16px rgba(0,0,0,.6); gap: 11px; }
  .insel-m .insel-top { height: 3px; }
  .insel-m .insel-tile { width: 40px; height: 40px; border-radius: 11px; }
  .insel-m .insel-txt { flex: 1; }
  .insel-m .insel-kicker { font-size: 9px; }
  .insel-m .insel-name { font-size: 18px; max-width: none; }
  .insel-m .insel-chev { width: 28px; height: 28px; border-radius: 8px; }
  .insel-menu-m { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 30; }
  .m-greetblock { flex: 1; min-width: 0; }
  .m-greetblock .m-greet { font-size: 24px; font-weight: 700; color: #fff; letter-spacing: -.02em; margin-top: 3px; line-height: 1.05; }
  .m-greetstats { margin-top: 6px; font-size: 12px; color: #9db1d6; }
  .m-greetstats strong { color: #fff; font-weight: 700; }
  .m-greettoday { color: #ff9a4d; font-weight: 700; }
  .m-row3[hidden] { display: none; }
  .area-section { padding: 18px 16px 22px; }
  .qa-row { flex-wrap: wrap; }
  .qa-field { min-width: 100%; }
  .qa-key { padding: 13px 16px; }
  .qa-key-icon { width: 100%; height: 46px; }
  .ov-grid { grid-template-columns: 1fr; }
  .nl-grid { grid-template-columns: repeat(5, 1fr); }
}

/* =========================================================================
   ANKR v3 (Design-Handoff design_handoff_v3) — To-Do-Zeile · Bearbeiten-Modus
   · Fenster · Tags. Dieser Block steht bewusst am ENDE und überschreibt die
   älteren Regeln derselben Klassen (Kaskade). Stufen 1–5 des README.
   ========================================================================= */
:root{
  color-scheme:light;
  --orange-ink:#d1500a; --orange-soft:rgba(255,96,0,.12);
  --meta:#7a8496; --meta-2:#9aa2b1;
  --line:#e6e9f0; --fill:#f2f4f8; --fill-2:#e8ecf3;
  --plan-today:#d93025;    --plan-today-soft:rgba(217,48,37,.12);
  --plan-tomorrow:#ff6000; --plan-tomorrow-soft:rgba(255,96,0,.12);
  --plan-week:#2f6fd4;     --plan-week-soft:rgba(47,111,212,.12);
  --plan-nextweek:#8fb6e8; --plan-nextweek-soft:rgba(47,111,212,.16); --plan-nextweek-ink:#2359a8;
  --r-chip:6px; --r-sm:8px; --r-row:10px; --r-md:12px; --r-card:16px; --r-sheet:18px; --r-panel:24px;
  --sh-editor:0 14px 30px -18px rgba(0,0,0,.28);
  --sh-sheet:0 30px 70px -20px rgba(0,0,0,.6);
  --t:.2s ease-out;
}
input,textarea{background:#fff;color:var(--ink)}

/* ---- 2) To-Do-Zeile: Kopfzeile entfällt, Titel + Marker in Zeile 1 ------ */
.row{
  position:relative;display:flex;align-items:flex-start;gap:10px;
  min-height:40px;padding:7px 6px 7px 14px;border-radius:var(--r-row);
  transition:background var(--t);
}
.row:hover{background:#f7f9fc}
.row-plan::before{
  content:"";position:absolute;left:2px;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--star-outline);
}
.row-plan.bar-today::before,.row-plan.bar-over::before{background:var(--plan-today)}
.row-plan.bar-tomorrow::before{background:var(--plan-tomorrow)}
.row-plan.bar-week::before{background:var(--plan-week)}
.row-plan.bar-nextweek::before{background:var(--plan-nextweek)}
.row-plan.bar-over::before{width:4px;left:1px}
.check{
  flex-shrink:0;width:20px;height:20px;margin-top:2px;border-radius:50%;
  border:2px solid var(--check-border);background:#fff;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:border-color var(--t),background var(--t);
}
.check:hover{border-color:var(--success)}
.check.checked{border:none;background:var(--success)}
.row-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.row-line{display:flex;align-items:flex-start;gap:10px}
.row-text{flex:1;min-width:0;font-size:15px;line-height:1.35;font-weight:500;color:var(--body);cursor:pointer}
.row-text.clickable:hover,.row-text:hover{text-decoration:underline dotted;text-underline-offset:3px}
.row-text.done{color:var(--done);font-weight:400;text-decoration:line-through;text-decoration-color:rgba(166,173,186,.6)}
/* Feste 2er-Marker-Gruppe rechts (Vorgabe „Korrektur Stern & Zeitpunkt") */
.row-trail{display:flex;align-items:center;justify-content:flex-end;gap:4px;flex-shrink:0;min-height:22px}
.row-star,.row-noplan{
  flex-shrink:0;width:22px;height:22px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  border:none;background:none;border-radius:var(--r-chip);cursor:pointer;
  transition:opacity var(--t),background var(--t),color var(--t);
}
.row-star{opacity:.6}
.row-star:hover{opacity:1;background:rgba(0,0,0,.05)}
.row-star.on{opacity:1}
/* Uhr statt Wort „Wann?" – dauerhaft sichtbar: sie ist der einzige Weg, einen
   Zeitpunkt zu setzen, und auf Touch rettet sie kein Hover. */
.row-noplan{color:var(--meta)}
.row-noplan:hover{color:var(--plan-week);background:rgba(47,111,212,.10)}

/* Zeitpunkt-Chip */
.meta-plan{display:inline-flex;align-items:stretch;height:22px;flex-shrink:0;border-radius:var(--r-chip);overflow:hidden;flex-shrink:0}
.meta-plan .plan-lbl,.meta-plan .plan-next{
  border:none;background:transparent;font:inherit;font-size:11.5px;font-weight:700;line-height:1;
  color:inherit;cursor:pointer;display:inline-flex;align-items:center;padding:0 8px;
}
.meta-plan .plan-next{padding:0 5px;border-left:1px solid rgba(255,255,255,.35)}
.meta-plan .plan-lbl:hover,.meta-plan .plan-next:hover{background:rgba(0,0,0,.12)}
.plan-today,.plan-over{background:var(--plan-today);color:#fff}
.plan-tomorrow{background:var(--plan-tomorrow);color:#fff}
.plan-week{background:var(--plan-week);color:#fff}
.plan-nextweek{background:var(--plan-nextweek-soft);color:var(--plan-nextweek-ink)}
.plan-nextweek .plan-next{border-left-color:rgba(47,111,212,.3)}
.plan-age{
  display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:15px;
  margin-left:6px;padding:0 4px;border-radius:4px;font-size:10.5px;font-weight:800;
  background:rgba(0,0,0,.22);color:#fff;font-variant-numeric:tabular-nums;
}

/* Meta-Zeile: nur wenn Inhalt */
.row-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.row-meta:empty{display:none}
.meta-date{display:inline-flex;align-items:center;gap:4px;height:22px;font-size:12px;font-weight:600;color:var(--meta);white-space:nowrap}
.meta-date.is-over{color:var(--plan-today)}
.meta-sep{width:1px;height:12px;background:var(--line);flex-shrink:0}
.meta-note,.meta-check,.meta-img,.meta-link{
  display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 4px;border-radius:var(--r-chip);
  border:none;background:transparent;font:inherit;font-size:11.5px;font-weight:700;color:var(--meta-2);cursor:pointer;
  transition:background var(--t),color var(--t);
}
.meta-note:hover,.meta-check:hover,.meta-img:hover,.meta-link:hover{background:rgba(0,0,0,.06);color:#5b6270}
.meta-link{color:var(--plan-week)}
.meta-link:hover{color:#1e4fa0;background:var(--plan-week-soft)}
.meta-check.is-full{color:var(--success)}
.meta-img{color:var(--meta-2)}
.meta-tag{
  height:22px;padding:0 8px;border-radius:var(--r-chip);border:1px solid transparent;
  font:inherit;font-size:11.5px;font-weight:600;color:#5a6a8a;background:var(--fill);cursor:pointer;
  display:inline-flex;align-items:center;gap:5px;transition:background var(--t),color var(--t);
}
.meta-tag:hover{background:var(--fill-2)}
.meta-tag.hl{background:var(--orange-soft);color:var(--orange-ink);font-weight:700}
.meta-tag.hl::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--orange);flex-shrink:0}
.meta-tag.hl:hover{background:rgba(255,96,0,.18)}
.del{
  flex-shrink:0;opacity:0;margin-top:3px;padding:3px;border:none;background:none;color:#c4cad6;
  cursor:pointer;display:inline-flex;border-radius:var(--r-chip);transition:opacity var(--t),color var(--t);
}
.row:hover .del{opacity:.7}
.del:hover{opacity:1;color:var(--plan-today);background:rgba(217,48,37,.08)}
.del.del-confirm{opacity:1;color:#fff;background:var(--plan-today)}
.row.is-done{min-height:32px;padding-top:4px;padding-bottom:4px}
.row.is-done .row-meta{display:none}
.toggle-done{
  display:flex;align-items:center;gap:7px;width:100%;padding:9px 14px;margin-top:2px;
  border:none;border-top:1px solid var(--divider);background:none;cursor:pointer;text-align:left;
  font-size:12.5px;font-weight:600;color:var(--meta-2);
}
.toggle-done:hover{color:var(--body)}
.add-btn{
  display:flex;align-items:center;gap:7px;width:100%;padding:9px 14px;border:none;background:none;
  cursor:pointer;text-align:left;font-size:14px;font-weight:700;color:var(--orange);border-radius:var(--r-sm);
}
.add-btn:hover{background:#fff6f0}

/* ---- 3) Bearbeiten-Modus: vier ruhige Zonen ---------------------------- */
.item-editor{
  border:1px solid var(--line);border-radius:var(--r-md);background:#fff;
  box-shadow:var(--sh-editor);margin:4px 0;overflow:hidden;padding:0;
}
.ie-top{display:flex;align-items:flex-start;gap:11px;padding:14px 14px 12px}
.ie-main{flex:1;min-width:0}
.ie-title{
  width:100%;border:none;outline:none;background:transparent;padding:0;
  font-family:inherit;font-size:16.5px;font-weight:700;line-height:1.3;color:var(--ink);
}
.ie-star{
  flex-shrink:0;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;
  border:none;background:none;border-radius:var(--r-sm);cursor:pointer;opacity:.5;
}
.ie-star:hover{opacity:1;background:var(--fill)}
.ie-star.on{opacity:1}
.ie-planrow{display:flex;align-items:center;gap:8px;padding:0 14px 12px;flex-wrap:wrap;margin:0}
.ie-planlbl{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--meta-2);margin-right:2px}
.ie-planseg{display:inline-flex;gap:2px;padding:3px;border-radius:10px;background:var(--fill);flex-wrap:wrap}
.ie-planchip{
  border:none;background:transparent;font:inherit;font-size:12.5px;font-weight:700;color:#5a6a8a;
  height:28px;padding:0 11px;border-radius:7px;cursor:pointer;transition:background var(--t),color var(--t);
}
.ie-planchip:hover{background:rgba(255,255,255,.85)}
.ie-planchip.active{background:#fff;box-shadow:0 1px 3px rgba(20,30,60,.14)}
.ie-planchip.active.p-today{color:var(--plan-today)}
.ie-planchip.active.p-tomorrow{color:var(--plan-tomorrow)}
.ie-planchip.active.p-week{color:var(--plan-week)}
.ie-planchip.active.p-nextweek{color:var(--plan-nextweek-ink)}
.ie-planchip.p-none{color:var(--meta-2);font-weight:600}
.ie-fields{border-top:1px solid var(--divider);padding:4px 14px 6px}
.ie-field{display:flex;align-items:flex-start;gap:12px;padding:9px 0}
.ie-field + .ie-field{border-top:1px solid var(--divider)}
.ie-fieldlbl{
  width:74px;flex-shrink:0;padding-top:7px;
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--meta-2);
}
.ie-fieldbody{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ie-when{display:flex;gap:8px;flex-wrap:wrap;background:none;padding:0;border-radius:0}
.ie-date,.ie-time,.ie-taginput{
  border:1px solid var(--line);border-radius:var(--r-sm);height:32px;padding:0 10px;
  font-family:inherit;font-size:13px;color:var(--ink);background:#fff;outline:none;
}
.ie-date:focus,.ie-time:focus,.ie-taginput:focus{border-color:var(--orange)}
.ie-date{width:150px}.ie-time{width:96px}
.ie-taginput{width:120px;flex:1;min-width:90px}
.ie-tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ie-tag{
  display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 6px 0 10px;border-radius:var(--r-sm);
  background:var(--fill);color:#3a4a6a;font-size:12.5px;font-weight:600;
}
.ie-tag.hl{background:var(--orange-soft);color:var(--orange-ink);font-weight:700}
.ie-tag-x{border:none;background:none;cursor:pointer;color:#8a94a6;display:inline-flex;padding:2px;border-radius:4px}
.ie-tag-x:hover{color:var(--orange);background:rgba(0,0,0,.06)}
.ie-atts{display:flex;gap:8px;flex-wrap:wrap}
.ie-att{
  display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:#fff;color:#5a6a8a;
  font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:all var(--t);
}
.ie-att:hover{border-color:#cfd6e4;background:#fafbfd;color:var(--ink)}
.ie-att.has{border-color:rgba(47,111,212,.32);background:var(--plan-week-soft);color:#2359a8;font-weight:700}
.ie-att-cnt{
  display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;padding:0 4px;
  border-radius:5px;background:rgba(47,111,212,.18);font-size:10.5px;font-weight:800;font-variant-numeric:tabular-nums;
}
.ie-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;background:#fafbfd;border-top:1px solid var(--divider);margin:0}
.ie-del{
  display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;border-radius:var(--r-sm);
  border:none;background:none;color:#a9727b;font-size:13px;font-weight:600;cursor:pointer;
  /* Die alte Regel setzt width:30px + justify-content:center – der Inhalt ragte
     dadurch links aus der Karte und wurde abgeschnitten. Hier zurückgeholt. */
  width:auto;box-sizing:border-box;justify-content:center;flex-shrink:0;
}
.ie-del:hover{background:rgba(217,48,37,.08);color:var(--plan-today)}
.ie-done{
  height:34px;padding:0 20px;border-radius:var(--r-sm);border:none;background:var(--orange);color:#fff;
  font-size:13.5px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
}
.ie-done:hover{background:#e85800}

/* ---- 4) Fenster: ein Muster (Kopf · Inhalt · Fuß) ---------------------- */
.d-overlay{
  position:fixed;inset:0;z-index:50;background:rgba(10,18,36,.55);
  display:flex;align-items:center;justify-content:center;padding:26px;
}
.d-panel{
  width:100%;max-width:440px;background:#fff;border-radius:var(--r-sheet);
  box-shadow:var(--sh-sheet);overflow:hidden;display:flex;flex-direction:column;max-height:86vh;padding:0;
}
.d-panel--wide{max-width:560px}
.d-head{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--divider);margin:0}
.d-icon{
  width:30px;height:30px;border-radius:var(--r-sm);flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  background:var(--plan-week-soft);color:var(--plan-week);
}
.d-title{flex:1;min-width:0;font-size:16px;font-weight:700;color:var(--ink)}
.d-sub{display:block;font-weight:600;font-size:12px;color:var(--meta-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.d-close{
  width:30px;height:30px;flex-shrink:0;border:none;background:var(--fill);border-radius:var(--r-sm);
  color:var(--meta);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;
}
.d-close:hover{background:var(--fill-2);color:var(--ink)}
.d-body{padding:16px 18px;overflow:auto;flex:1;min-height:0}
.d-foot{display:flex;align-items:center;justify-content:flex-end;gap:9px;padding:12px 18px;border-top:1px solid var(--divider);background:#fafbfd;margin:0}
.d-foot .d-foot-left{margin-right:auto}
.btn{
  height:36px;padding:0 16px;border-radius:var(--r-sm);border:1px solid var(--line);background:#fff;
  font-family:inherit;font-size:13.5px;font-weight:700;color:var(--body);cursor:pointer;display:inline-flex;align-items:center;gap:7px;
}
.btn:hover{background:var(--fill)}
.btn--primary{background:var(--orange);border-color:var(--orange);color:#fff}
.btn--primary:hover{background:#e85800}
.btn--quiet{border-color:transparent;color:var(--meta);background:none}
.btn--quiet:hover{background:var(--fill);color:var(--ink)}
.btn--danger{border-color:transparent;color:#a9727b;background:none}
.btn--danger:hover{background:rgba(217,48,37,.08);color:var(--plan-today)}
.nv-p{margin:0 0 10px;font-size:14.5px;line-height:1.55;color:var(--body);white-space:pre-wrap;word-break:break-word}
.nv-p:last-child{margin-bottom:0}
.nv-empty{margin:0;font-size:14px;color:var(--meta-2)}
.nv-link{
  display:inline-flex;align-items:center;gap:5px;max-width:100%;color:var(--plan-week);font-weight:600;
  text-decoration:underline;text-underline-offset:2px;text-decoration-color:rgba(47,111,212,.4);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.nv-link:hover{color:#1e4fa0}
.d-note{
  width:100%;min-height:150px;resize:vertical;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:11px 12px;font-family:inherit;font-size:14.5px;line-height:1.55;color:var(--ink);outline:none;background:#fff;
}
.d-note:focus{border-color:var(--orange)}
.cl-list{display:flex;flex-direction:column;gap:2px;margin:0}
.ie-cl-item{display:flex;align-items:center;gap:10px;padding:7px 6px;border-radius:var(--r-sm)}
.ie-cl-item:hover{background:#fafbfd}
.ie-cl-check{
  flex-shrink:0;width:20px;height:20px;border-radius:6px;border:2px solid var(--check-border);background:#fff;
  padding:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
}
.ie-cl-check.checked{border:none;background:var(--success)}
.ie-cl-text{flex:1;min-width:0;font-size:14.5px;color:var(--body);border:none;outline:none;background:transparent;font-family:inherit}
.ie-cl-text.done{color:var(--done);text-decoration:line-through}
.ie-cl-x{border:none;background:none;color:#c4cad6;cursor:pointer;padding:3px;border-radius:5px;display:inline-flex;opacity:0}
.ie-cl-item:hover .ie-cl-x{opacity:1}
.ie-cl-x:hover{color:var(--plan-today);background:rgba(217,48,37,.08)}
.cl-progress{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.cl-bar{flex:1;height:6px;border-radius:99px;background:var(--fill);overflow:hidden}
.cl-bar span{display:block;height:100%;border-radius:99px;background:var(--success)}
.cl-num{font-size:12px;font-weight:700;color:var(--meta);font-variant-numeric:tabular-nums}
.cl-add{
  display:flex;align-items:center;gap:8px;width:100%;margin-top:6px;padding:9px 6px;border:none;background:none;
  cursor:pointer;text-align:left;font-size:14px;font-weight:700;color:var(--orange);border-radius:var(--r-sm);
}
.cl-add:hover{background:#fff6f0}
.iv-img{width:100%;border-radius:var(--r-md);display:block;max-height:none}
.iv-hint{margin:10px 0 0;font-size:12px;color:var(--meta-2)}
.iv-loading{font-size:14px;color:var(--meta);padding:24px 0;text-align:center}

/* Zeitpunkt-Auswahl */
.plan-pop{
  position:fixed;z-index:70;width:212px;background:#fff;border-radius:var(--r-md);padding:6px;
  box-shadow:0 22px 48px -16px rgba(0,0,0,.5);display:flex;flex-direction:column;gap:1px;
}
.plan-opt{
  display:flex;align-items:center;gap:10px;border:none;background:transparent;font:inherit;font-size:13.5px;
  font-weight:600;color:var(--ink);text-align:left;height:38px;padding:0 10px;border-radius:var(--r-sm);cursor:pointer;
}
.plan-opt:hover{background:var(--fill)}
.plan-opt .pd{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.plan-opt .pk{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--meta-2)}
.plan-opt.active{background:var(--fill);color:var(--ink)}
.plan-opt.active .pk{color:var(--success)}
.plan-opt-clear{color:var(--meta);font-weight:600;border-top:1px solid var(--divider);border-radius:0 0 var(--r-sm) var(--r-sm);margin-top:4px}

/* Einstellungen / Tag-Verwaltung */
.set-group + .set-group{margin-top:18px;padding-top:16px;border-top:1px solid var(--divider)}
.set-lbl{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--meta-2);margin:0 0 9px}
.set-hint{margin:0 0 10px;font-size:12.5px;line-height:1.5;color:var(--meta)}
.tagmgr-addrow{display:flex;gap:8px;margin:0}
.tagmgr-input{flex:1;min-width:0;height:36px;border:1px solid var(--line);border-radius:var(--r-sm);padding:0 12px;font-family:inherit;font-size:13.5px;color:var(--ink);outline:none;background:#fff}
.tagmgr-input:focus{border-color:var(--orange)}
.tagmgr-add{flex-shrink:0;height:36px;padding:0 14px;border-radius:var(--r-sm);border:1px solid #f0d8c6;background:#fff6f0;color:var(--orange);font-family:inherit;font-size:13.5px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.tagmgr-add:hover{background:#ffece0}
.tagmgr-list{margin-top:10px;display:flex;flex-direction:column;max-height:none;overflow:visible}
.tagmgr-row{display:flex;align-items:center;gap:10px;height:44px;padding:0 4px;border-bottom:1px solid var(--divider)}
.tagmgr-row:last-child{border-bottom:none}
.tagmgr-name{flex:1;min-width:0;display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:#3a4a6a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tagmgr-dot{width:8px;height:8px;border-radius:50%;background:#8a94a6;flex-shrink:0}
.tagmgr-cnt{font-size:12px;font-weight:600;color:var(--meta-2);flex-shrink:0}
.tagmgr-btn{flex-shrink:0;width:30px;height:30px;border:none;background:transparent;border-radius:var(--r-chip);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:#a3adbf;padding:0}
.tagmgr-btn:hover{background:var(--fill);color:var(--ink)}
.tagmgr-hl.on{color:var(--orange)}
.tagmgr-hl.on:hover{background:#fff2e8}
.tagmgr-del:hover{background:rgba(217,48,37,.08);color:var(--plan-today)}
.tagmgr-row.hl .tagmgr-dot{background:var(--orange)}
.tagmgr-row.hl .tagmgr-name{color:var(--orange-ink)}
.tagmgr-edit{flex:1;min-width:0;height:32px;border:1px solid var(--orange);border-radius:var(--r-sm);padding:0 10px;font-family:inherit;font-size:14px;color:var(--ink);outline:none;background:#fff}

/* ---- 5) Tag-Filter ------------------------------------------------------ */
.tag-filter{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:18px;padding:12px 14px;
  border-radius:var(--r-card);background:rgba(255,255,255,.94);border:1px solid rgba(120,150,210,.25);
  box-shadow:0 22px 54px -42px rgba(0,0,0,.7);
}
.tf-label{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--meta);margin-right:2px}
.tf-chip{
  display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 13px;border-radius:var(--r-sm);
  font:inherit;font-size:13px;font-weight:600;color:#3a4763;background:#fff;border:1px solid rgba(90,106,138,.22);
  cursor:pointer;transition:all var(--t);box-shadow:none;
}
.tf-chip:hover{background:var(--fill)}
.tf-dot{width:7px;height:7px;border-radius:50%;background:#8a94a6;flex-shrink:0}
.tf-chip.active{background:#2f3d63;border-color:#2f3d63;color:#fff}
.tf-chip.active .tf-dot{background:#fff}
.tf-chip.hl{border-color:rgba(255,96,0,.4);color:var(--orange-ink);background:#fff8f3}
.tf-chip.hl .tf-dot{background:var(--orange)}
.tf-chip.hl.active{background:#2f3d63;border-color:#2f3d63;color:#fff}
.tf-chip.hl.active .tf-dot{background:var(--orange-2)}
.tf-chip.tf-none{border-style:dashed;color:#6b7690}
.tf-chip.tf-none .tf-dot{background:transparent;border:1.5px solid #a3adbf}
.tf-clear{display:inline-flex;align-items:center;gap:5px;margin-left:auto;height:32px;padding:0 8px;border:none;background:none;font:inherit;font-size:12.5px;font-weight:600;color:var(--meta);cursor:pointer;border-radius:var(--r-chip)}
.tf-clear:hover{color:var(--ink);background:var(--fill)}
.qa-filter{
  position:relative;flex-shrink:0;width:50px;height:50px;border-radius:var(--r-md);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  background:rgba(255,255,255,.08);border:1px solid rgba(140,175,225,.3);color:var(--sec-1);
}
.qa-filter:hover{background:rgba(255,255,255,.14)}
.qa-filter.open{background:rgba(255,255,255,.18);color:#fff}
.qa-filter.has{border-color:rgba(255,96,0,.55);color:#ff8a3d}
.qa-filter-badge{
  position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 4px;border-radius:99px;
  display:inline-flex;align-items:center;justify-content:center;background:var(--orange);color:#fff;
  font-size:10.5px;font-weight:800;border:2px solid #16264a;
}

/* ---- 6) Schmal / Touch ------------------------------------------------- */
@media (max-width:560px){
  .row{min-height:48px;padding:9px 6px 9px 14px}
  .row-text{font-size:15.5px}
  .check{width:24px;height:24px}
  .row-star{width:30px;height:30px}
  .meta-plan,.meta-plan .plan-lbl,.meta-plan .plan-next{height:26px}
  .meta-tag,.meta-note,.meta-check,.meta-img,.meta-link,.meta-date{height:28px}
  .meta-note,.meta-check,.meta-img,.meta-link{padding:0 8px;background:var(--fill)}
  .del{display:none}
  .ie-field{flex-direction:column;gap:6px}
  .ie-fieldlbl{width:auto;padding-top:0}
  .ie-date{width:100%}.ie-time{width:110px}
  .ie-att{height:40px;flex:1;justify-content:center}
  .ie-done,.ie-del{height:40px}
  .tf-chip,.plan-opt{height:40px}
  .d-overlay{align-items:flex-end;padding:0}
  .d-panel{max-width:none;border-radius:20px 20px 0 0;max-height:82vh}
  .d-panel::before{content:"";display:block;width:38px;height:4px;border-radius:99px;background:#dfe3ea;margin:10px auto 0;flex-shrink:0}
  .d-foot{padding:12px 16px 18px}
  .btn{height:44px;flex:1;justify-content:center}
  .plan-pop{width:calc(100% - 16px);left:8px !important;border-radius:16px;padding:8px}
}

/* --- v3 Korrekturen aus der Live-Prüfung -------------------------------- */
/* Titelzeile: Marker-Gruppe bleibt oben rechts (auch bei mehrzeiligem Titel) */
.row-line{display:flex;align-items:flex-start;gap:10px;flex-wrap:nowrap}
.row-text{flex:1;min-width:0}
/* 2) Frist-Felder: die ältere Regel `.ie-when .ie-date` (höhere Spezifität)
      überschrieb Rahmen/Höhe – hier gleichziehen und Picker-Symbol zeigen. */
.ie-when .ie-date,.ie-when .ie-time{
  border:1px solid var(--line);border-radius:var(--r-sm);height:32px;padding:0 10px;
  background:#fff;color:var(--ink);font-family:inherit;font-size:13px;cursor:pointer;
}
.ie-when .ie-date:focus,.ie-when .ie-time:focus{border-color:var(--orange)}
.ie-when input::-webkit-calendar-picker-indicator{display:initial;-webkit-appearance:auto;opacity:.5;cursor:pointer}
.ie-when input::-webkit-calendar-picker-indicator:hover{opacity:.9}

/* =========================================================================
   v3 · SCHMALE KARTEN = die iPhone-Vorgabe des Entwurfs, aber an der
   SPALTENBREITE statt am Fenster: eine 1-spaltige Kategorie am Desktop ist
   genauso schmal wie ein iPhone und bekommt darum dasselbe Layout.
   ========================================================================= */
.card{container-type:inline-size;container-name:card}

/* Standard: die Chip-Kopie für sehr schmale Karten ist aus */
.meta-plan.in-meta{display:none}
.row-meta.markers-only{display:none}

@container card (max-width:430px){
  .row{min-height:44px;padding:8px 6px 8px 14px}
  .row-text{font-size:15px;min-width:0}
  .check{width:22px;height:22px}
  /* Stern + Uhr bleiben eine gleich hohe 2er-Gruppe (Vorgabe), nur etwas größer */
  .row-star,.row-noplan{width:26px;height:26px}
  .row-meta{gap:5px}
  .meta-plan,.meta-plan .plan-lbl,.meta-plan .plan-next{height:26px}
  .meta-tag,.meta-note,.meta-check,.meta-img,.meta-link,.meta-date{height:26px}
  .meta-note,.meta-check,.meta-img,.meta-link{padding:0 7px;background:var(--fill)}
  .meta-sep{display:none}
  .del{display:none}                        /* Löschen läuft hier über den Editor */

  /* --- Bearbeiten-Modus: Label ÜBER dem Feld, Anhänge nur als Symbole ---- */
  .ie-top{padding:12px 12px 10px;gap:9px}
  .ie-title{font-size:15.5px}
  .ie-planrow{flex-direction:column;align-items:flex-start;gap:6px;padding:0 12px 10px}
  .ie-planseg{width:100%}
  .ie-planchip{height:30px;padding:0 10px;font-size:12px}
  .ie-fields{padding:2px 12px 4px}
  .ie-field{flex-direction:column;gap:6px;padding:8px 0}
  .ie-fieldlbl{width:auto;padding-top:0}
  .ie-when{flex-direction:column;gap:6px;width:100%}
  .ie-date{width:100%}
  .ie-time{width:120px}
  .ie-taginput{width:100%;flex:1 1 100%;min-width:0}
  .ie-att{height:40px;flex:1;justify-content:center;padding:0 10px;gap:6px}
  .ie-att-t{display:none}                   /* nur Symbol (+ Zähler) */
  .ie-foot{padding:10px 12px}
  .ie-del,.ie-done{height:40px}
  .ie-del{padding:0 10px}
  .ie-del-t{display:none}                   /* Papierkorb-Symbol genügt */
  .ie-done{padding:0 22px}
}

/* --- Gruppen-Grid: Karten dicht gepackt, Gruppe 1- oder 2-spaltig --------- */
.area-grid.area-cardgrid{display:grid;gap:20px;grid-auto-flow:row dense;align-items:start}
.area-grid.area-cardgrid > .card{align-self:start;margin:0}
/* Breiten-Schalter im Gruppenkopf: EIN Knopf, Klick wechselt 1 ⇄ 2 Spalten */
.group-cols{
  flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:22px;padding:0;margin-left:2px;border:none;background:none;
  border-radius:var(--r-chip);color:var(--orange);cursor:pointer;opacity:.6;
  transition:opacity var(--t),background var(--t);
}
.group-cols:hover{opacity:1;background:var(--fill)}
.group-cols.dim{opacity:.25;pointer-events:none}
/* Anhänge in schmalen Karten in EINE Reihe (3 Symbole) */
@container card (max-width:430px){
  .ie-atts{gap:6px;width:100%}
  .ie-att{padding:0 8px;min-width:0;gap:5px}
  .ie-att-cnt{min-width:auto}
}
/* Wann-Leiste: Kurzlabels in schmalen Karten */
.ie-planchip .pl-short{display:none}
@container card (max-width:430px){
  .ie-planchip .pl-full{display:none}
  .ie-planchip .pl-short{display:inline}
  .ie-planseg{gap:2px;padding:2px}
  .ie-planchip{padding:0 9px;font-size:11.5px;height:28px}
}

/* --- Korrektur „Stern & Zeitpunkt": Touch-Größen + Chip-Umzug ------------- */
@media (max-width:560px){
  .row-star,.row-noplan{width:30px;height:30px}
  .meta-plan{height:26px}
}
/* Nur SEHR schmale Karten (~unter 300px): der GESETZTE Chip rutscht unter den
   Titel; Stern und Uhr-Knopf bleiben oben rechts in .row-trail. */
@container card (max-width:300px){
  .meta-plan.in-line{display:none}
  .meta-plan.in-meta{display:inline-flex}
  .row-meta.markers-only{display:flex}
}

/* =========================================================================
   Meta-Zeile: eigene Zeile je Gruppe (Zeitpunkt · Datum · Symbole · Tags)
   und EINHEITLICHE Chip-Metrik – gleiche Höhe, gleiche Rundung, gleiche Abstände.
   ========================================================================= */
.row-meta{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.meta-line{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.meta-line:empty{display:none}

/* Alle Meta-Elemente teilen exakt dieselben Werte */
.meta-plan,.meta-date,.meta-note,.meta-link,.meta-check,.meta-img,.meta-tag{
  height:22px;border-radius:var(--r-chip);font-size:11.5px;font-weight:700;
  display:inline-flex;align-items:center;gap:5px;box-sizing:border-box;
}
.meta-date{padding:0 8px;background:var(--fill);color:var(--meta);font-weight:600;white-space:nowrap}
.meta-date.is-over{background:var(--plan-today-soft);color:var(--plan-today);font-weight:700}
.meta-note,.meta-link,.meta-check,.meta-img{padding:0 8px;background:var(--fill)}
.meta-note:hover,.meta-link:hover,.meta-check:hover,.meta-img:hover{background:var(--fill-2)}
.meta-tag{padding:0 8px;font-weight:600}
.meta-plan .plan-lbl{padding:0 8px}
.meta-plan .plan-next{padding:0 6px}

/* Schmale Karte: alles gemeinsam eine Stufe größer (Touch), Werte bleiben gleich */
@container card (max-width:430px){
  .meta-plan,.meta-date,.meta-note,.meta-link,.meta-check,.meta-img,.meta-tag{height:26px}
  .meta-plan .plan-lbl,.meta-plan .plan-next{height:26px}
  .row-meta{gap:6px}
  .meta-line{gap:6px}
}
@media (max-width:560px){
  .meta-date,.meta-note,.meta-link,.meta-check,.meta-img,.meta-tag{height:26px}
}

/* --- Checklisten-Punkte umbrechen (Textarea, wächst mit) ------------------ */
.ie-cl-item{align-items:flex-start}          /* Haken/× bleiben oben, Text darf mehrzeilig sein */
.ie-cl-check{margin-top:1px}
.ie-cl-x{margin-top:2px}
.ie-cl-text{
  display:block;width:100%;box-sizing:border-box;
  border:none;outline:none;background:transparent;resize:none;overflow:hidden;
  font-family:inherit;font-size:14.5px;line-height:1.45;color:var(--body);
  padding:0;margin:0;min-height:20px;
  white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;
}
.ie-cl-text.done{color:var(--done);text-decoration:line-through}
.ie-cl-text::placeholder{color:var(--meta-2)}

/* =========================================================================
   Schnell-Eingabe · Vorschau-Editor: gleiche Zonen wie der To-Do-Editor,
   Auswahl-Popover für Kategorie/Gruppe (zeigt IMMER alle Einträge).
   ========================================================================= */
.qa-prev-editor{background:#fff}
.ie-foot-right{display:flex;align-items:center;gap:9px}
.ie-foot .d-foot-left{margin-right:auto}
/* Notiz als richtiges Feld statt randlos */
.qa-prev-editor .ie-note{
  width:100%;box-sizing:border-box;margin:0;min-height:38px;resize:vertical;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 11px;background:#fff;
  font-family:inherit;font-size:14px;line-height:1.5;color:var(--ink);outline:none;
}
.qa-prev-editor .ie-note:focus{border-color:var(--orange)}
/* Checkliste im Feld: ohne Einzug, volle Breite */
.ie-field .ie-checklist{margin:0;width:100%}
.ie-field .ie-att{height:30px;padding:0 11px;font-size:12.5px}

/* Auswahl-Feld mit vollständiger Liste */
.qa-pick{position:relative;display:flex;align-items:center;flex:1;min-width:140px}
.qa-pick .qa-ed-input{
  flex:1;min-width:0;height:32px;box-sizing:border-box;
  border:1px solid var(--line);border-radius:var(--r-sm);padding:0 34px 0 10px;
  font-family:inherit;font-size:13px;color:var(--ink);background:#fff;outline:none;
}
.qa-pick .qa-ed-input:focus{border-color:var(--orange)}
.qa-pick-btn{
  position:absolute;right:2px;top:2px;width:28px;height:28px;padding:0;border:none;background:none;
  border-radius:var(--r-chip);color:var(--meta);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
}
.qa-pick-btn:hover{background:var(--fill);color:var(--ink)}
.qa-pick-pop{
  position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:80;max-height:220px;overflow:auto;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:4px;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:1px;
}
.qa-pick-pop[hidden]{display:none}
.qa-pick-opt{
  border:none;background:none;font:inherit;font-size:13.5px;color:var(--ink);text-align:left;
  padding:7px 9px;border-radius:6px;cursor:pointer;
}
.qa-pick-opt:hover{background:var(--fill)}
.qa-pick-opt.active{background:var(--orange-soft);color:var(--orange-ink);font-weight:700}
.qa-pick-new,.qa-pick-empty{padding:7px 9px;font-size:12.5px;color:var(--meta);border-top:1px solid var(--divider);margin-top:3px}
.qa-pick-empty{border-top:none;margin-top:0}

/* --- Dublettenhinweis / Zusammenführen ----------------------------------- */
.qa-dup{
  display:inline-flex;align-items:center;gap:5px;margin-left:8px;height:22px;padding:0 8px;
  border:1px solid rgba(217,48,37,.35);background:rgba(217,48,37,.10);color:#b3392f;
  border-radius:var(--r-chip);font:inherit;font-size:11.5px;font-weight:700;cursor:pointer;white-space:nowrap;
}
.qa-dup:hover{background:rgba(217,48,37,.18)}
.ie-fieldbody .qa-dup{margin-left:0;height:30px;font-size:12.5px;padding:0 11px}
.dup-list{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.dup-hit{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
  border:1px solid var(--line);background:#fff;border-radius:var(--r-sm);padding:10px 12px;font:inherit;
  transition:border-color var(--t),background var(--t);
}
.dup-hit:hover{border-color:rgba(47,111,212,.45);background:var(--plan-week-soft)}
.dup-hit-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.dup-hit-text{font-size:14px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dup-hit-path{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--meta);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dup-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.dup-done{padding:0 6px;border-radius:4px;background:rgba(47,158,86,.14);color:#2f9e56;font-weight:700}
.dup-plan{padding:0 6px;border-radius:4px;background:var(--fill);color:var(--body);font-weight:700}
.dup-score{flex-shrink:0;font-size:12px;font-weight:800;color:var(--meta-2);font-variant-numeric:tabular-nums}

/* --- Nach dem Zusammenführen: geänderte Felder rot markieren -------------- */
.item-editor.is-merged{border-color:rgba(217,48,37,.4);box-shadow:0 14px 30px -18px rgba(217,48,37,.35)}
.ie-mergebar{
  display:flex;align-items:center;gap:8px;padding:9px 14px;background:var(--plan-today-soft);
  color:#b3392f;font-size:12.5px;font-weight:700;border-bottom:1px solid rgba(217,48,37,.22);
}
.ie-mergebar-x{margin-left:auto;border:none;background:none;color:inherit;cursor:pointer;display:inline-flex;padding:3px;border-radius:5px}
.ie-mergebar-x:hover{background:rgba(217,48,37,.14)}
.ie-field.is-changed{background:rgba(217,48,37,.05);border-radius:var(--r-sm);margin:0 -6px;padding-left:6px;padding-right:6px}
.ie-field.is-changed .ie-fieldlbl{color:#b3392f}
.ie-title.is-changed{color:#b3392f}
.ie-planrow.is-changed .ie-planlbl{color:#b3392f}
.ie-planrow.is-changed .ie-planseg{box-shadow:0 0 0 2px rgba(217,48,37,.3)}
.ie-att.is-changed{border-color:rgba(217,48,37,.45);background:var(--plan-today-soft);color:#b3392f}
.ie-att.is-changed .ie-att-cnt{background:rgba(217,48,37,.18)}
.ie-star.is-changed{box-shadow:0 0 0 2px rgba(217,48,37,.35);border-radius:var(--r-sm)}
.dup-busy:empty{display:none}
.dup-hit:disabled{opacity:.5;cursor:default}

/* Dublettenhinweis in der Vorschau: vollflächig rot, weiße Schrift, rechts */
.qa-dup{
  background:var(--plan-today);border-color:var(--plan-today);color:#fff;
  margin-left:0;flex-shrink:0;
}
.qa-dup:hover{background:#b3392f;border-color:#b3392f;color:#fff}
.qa-prev-item > .qa-dup{margin-left:auto}
/* Einzelner Notiz-Link: Chip ist ein echter Link (öffnet direkt in neuem Tab) */
a.meta-link{text-decoration:none}

/* ---------- Zeitpunkt-Filter (Tagesübersicht in der Liste) ---------- */
/* Panel teilt die Metrik des Tag-Filters; die Stufen-Farbe steckt im Punkt. */
.plan-filter .tf-label { color: #6b7488; }
.pf-chip .pf-dot-today,    .pf-chip.active .pf-dot-today    { background: var(--plan-today); }
.pf-chip .pf-dot-tomorrow, .pf-chip.active .pf-dot-tomorrow { background: var(--plan-tomorrow); }
.pf-chip .pf-dot-week,     .pf-chip.active .pf-dot-week     { background: var(--plan-week); }
.pf-chip .pf-dot-nextweek, .pf-chip.active .pf-dot-nextweek { background: var(--plan-nextweek); }
.pf-chip .pf-dot-later,    .pf-chip.active .pf-dot-later    { background: #98a6bd; }
.pf-chip.pf-star .ic { color: var(--orange); }
.pf-chip.pf-star.active .ic { color: #fff; }

/* Flache Karte: eine Kategorie, alle Treffer, keine Gruppen-Kästen */
.card-flat .card-body { padding-top: 4px; padding-bottom: 4px; }

/* Herkunfts-Hinweis an der Zeile – gestrichelt, damit er nicht wie ein Tag aussieht */
.meta-group {
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px;
  border-radius: var(--r-chip); border: 1px dashed rgba(90,106,138,.34); background: transparent;
  font-size: 11.5px; font-weight: 700; color: #6a7488; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box;
}
.meta-group .ic { flex-shrink: 0; opacity: .75; }
.row.is-done .meta-group { opacity: .55; }
@media (max-width: 560px) { .meta-group { height: 26px; } }

/* ---------- Erledigte: Ausklapp-Zeile mit Löschen-Knopf rechts ---------- */
.done-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* .toggle-done ist sonst 100% breit (große Trefferfläche) – hier soll der
   Löschen-Knopf auf DERSELBEN Zeile rechts stehen, Trefferfläche bleibt groß. */
.done-bar .toggle-done { width: auto; flex: 1 1 auto; min-width: 0; }
.done-purge {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px;
  border: 1px solid transparent; border-radius: var(--r-chip); background: transparent;
  font: inherit; font-size: 11.5px; font-weight: 600; color: #a9727b; cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.done-purge:hover { background: rgba(217,48,37,.08); color: var(--plan-today); border-color: rgba(217,48,37,.22); }
.done-purge .ic { flex-shrink: 0; opacity: .85; }
@media (max-width: 560px) { .done-purge { height: 28px; } }
.done-bar .toggle-done, .done-purge { white-space: nowrap; }
.done-bar .toggle-done .td-verb { margin-left: .32em; }
.done-purge .dp-verb { margin-left: .32em; }
/* Schmale Karte (iPhone, 1-spaltige Kategorie): Verben weg, eine Zeile */
@container card (max-width:430px) {
  .done-bar .toggle-done .td-verb, .done-purge .dp-verb { display: none; }
  .done-bar .toggle-done { padding-right: 6px; }
}

/* ---------- Kurzes Aufleuchten nach dem Antippen einer Erinnerung ---------- */
/* Bewusst gelb-bernstein und vollständig ausklingend: Es ist ein Hinweis,
   kein Status – am Ende bleibt keine Farbe zurück, die mit den Zeitpunkt-
   oder „das bin ich"-Farben verwechselt werden könnte. */
@keyframes ankr-flash {
  0%   { background: rgba(255,198,64,.42); box-shadow: inset 0 0 0 2px rgba(255,176,32,.60); }
  55%  { background: rgba(255,198,64,.42); box-shadow: inset 0 0 0 2px rgba(255,176,32,.60); }
  100% { background: transparent;          box-shadow: inset 0 0 0 2px transparent; }
}
/* 9 s gesamt: rund 5 s voll in Bernstein stehen lassen, dann 4 s ausklingen. */
.row.row-flash { animation: ankr-flash 9s ease-out forwards; border-radius: var(--r-row); }
@media (prefers-reduced-motion: reduce) {
  .row.row-flash { animation: ankr-flash 2s ease-out forwards; }
}
}

/* ================= iOS: Statusleiste, Home-Indikator, Auto-Zoom ========= */
/* Die Seite läuft per viewport-fit=cover absichtlich unter die Statusleiste
   (der Hintergrund soll bis oben durchgehen). Der INHALT muss aber darunter
   bleiben, sonst liegt der Kopf unter Uhrzeit/Akku und das Zahnrad ist nicht
   mehr treffsicher. Die Ausgleichsflächen sitzen am body – der Hintergrund
   liegt dort und deckt weiterhin die volle Fläche ab. Auf dem Desktop sind
   alle env()-Werte 0, dort ändert sich also nichts. */
/* Oben KEIN eigener Ausgleich: die Statusleiste haelt iOS selbst frei, seit der
   Stil nicht mehr "black-translucent" ist. Ein zusaetzliches padding-top wuerde
   die Luft verdoppeln. Seiten und Unterkante bleiben, das deckt Landschaftsformat
   und den Home-Indikator ab. */
body {
  box-sizing: border-box;
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Fenster als Sheet von unten: Fußzeile nicht unter den Home-Indikator legen */
@media (max-width: 560px) {
  .d-panel { padding-bottom: env(safe-area-inset-bottom, 0px); }
}

/* iOS zoomt beim Fokussieren automatisch hinein, wenn ein Eingabefeld kleiner
   als 16px ist – und zoomt danach NICHT zurück. Dann ist z. B. der Schließen-
   Knopf rechts abgeschnitten. 16px verhindert das an der Ursache; Pinch-Zoom
   bleibt dem Nutzer erhalten (user-scalable abzuschalten wäre der falsche Weg
   und wird von iOS ohnehin ignoriert). */
@media (max-width: 560px) {
  input:not([type="checkbox"]):not([type="radio"]),
  textarea,
  select { font-size: 16px; }
}

/* ---------- Liste teilen ---------- */
.share-role {
  height: 36px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff;
  font-family: inherit; font-size: 13.5px; color: var(--ink); padding: 0 8px; cursor: pointer; outline: none;
}
.share-list { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.share-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--fill);
}
.share-mail { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) { .share-row { flex-wrap: wrap; } .share-mail { flex: 1 1 100%; } }