/* =====================================================================
   rahmen.css — der Rahmen um jede Seite (Design „Isar klar", 10/2026):
   Bottom-Navigation mit fünf Zielen und Segment-Schalter am Handy,
   Seitenleiste mit Gruppen und schmale Heute-Spalte am PC (ab 1024 px),
   Mehr-Blatt, Lage von Feedback-Knopf und Toasts, Navigationssymbole.
   Themeneutral: nur Design-Tokens. Die Themes verfeinern, die
   Bedienbarkeit steht hier — darum funktioniert die Navigation in allen
   fünf Designs gleich.
   ===================================================================== */

:root { --leiste-breite: 256px; --spalte-breite: 328px; --nav-hoehe: 58px; }
/* Bis 1365 px schmaler, damit breite Seiten (Woche, Essensplan) Luft haben */
@media (max-width: 1365px) { :root { --leiste-breite: 236px; --spalte-breite: 296px; } }

/* ------------------------------------------------------- Grundlayout */
main#inhalt {
  padding-bottom: calc(var(--nav-hoehe) + env(safe-area-inset-bottom, 0px) + 76px); /* Platz für Nav + Feedback-Knopf */
}
@media (min-width: 600px) and (max-width: 1023px) { main#inhalt { max-width: 760px; } }

/* Am Handy existiert die Leiste nicht als Kasten: Kopfzeile und
   Seitennavigation hängen direkt am body (sticky Kopf funktioniert). */
.rahmen-leiste { display: contents; }
.seitennav { display: none; }
.benutzer-zusatz { display: none; }

/* ------------------------------------------------ Bottom-Navigation */
.hauptnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; background: var(--bg-erhoben);
  border-top: 1px solid var(--linie);
  padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
.nav-link {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 3px; min-height: var(--nav-hoehe); padding: 7px 2px 6px;
  font: inherit; font-size: var(--t-mikro); font-weight: 500; line-height: 1.2; letter-spacing: .01em;
  color: var(--text-leise); text-decoration: none; background: none; border: 0; cursor: pointer;
}
.nav-link::before {
  content: ""; width: 24px; height: 24px; flex: none; background: currentcolor;
  -webkit-mask: var(--icon) center / 22px no-repeat; mask: var(--icon) center / 22px no-repeat;
}
/* Aktive Gruppe: Symbol sitzt in einer getönten Kapsel */
.nav-link.aktiv {
  color: var(--akzent);
  background: radial-gradient(28px 15px at 50% 19px, var(--akzent-tint) 98%, transparent 100%);
}

/* -------------------------------------- Segment-Schalter (Geschwister) */
.gruppen-eyebrow { display: none; }
.unternav {
  display: flex; gap: 2px; padding: 3px; margin: var(--raum-2) 0 var(--raum-1);
  background: var(--bg-vertieft); border-radius: 14px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.unternav::-webkit-scrollbar { display: none; }
.unternav-link {
  flex: 1 0 auto; display: flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 9px; border-radius: 11px;
  color: var(--text-leise); text-decoration: none; font-size: var(--t-klein); font-weight: 500; white-space: nowrap;
}
.unternav-link.aktiv {
  background: var(--bg-erhoben); color: var(--text);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 14%, transparent), 0 2px 6px color-mix(in srgb, var(--text) 8%, transparent);
}
.unternav + .seiten-kopf { margin-top: var(--raum-4); }

/* ------------------------------------------------------- Mehr-Blatt */
.sheet { position: fixed; inset: 0; z-index: 50; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .4); /* neutrale Abdunklung, jedes Theme */ }
.sheet-kasten {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: 82vh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg-erhoben);
  border-radius: var(--radius-gross) var(--radius-gross) 0 0;
  padding: var(--raum-3) var(--raum-5) calc(var(--raum-4) + env(safe-area-inset-bottom, 0px));
}
.sheet-griff { width: 36px; height: 4px; border-radius: 2px; background: var(--linie-stark); margin: 0 auto var(--raum-2); }
.mehr-blatt-kopf {
  margin: var(--raum-4) 0 var(--raum-1);
  font-family: var(--font-etikett, var(--font-body)); font-size: var(--t-mikro); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--text-leise);
}
.mehr-blatt a, .mehr-blatt button {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 50px; padding: 0 2px;
  color: var(--text); text-decoration: none; text-align: left; font: inherit; font-weight: 500;
  background: none; border: 0; border-bottom: 1px solid var(--linie); cursor: pointer;
}
.mehr-blatt a::before, .mehr-blatt button::before {
  content: ""; width: 22px; height: 22px; flex: none; background: var(--text-leise);
  -webkit-mask: var(--icon) center / 22px no-repeat; mask: var(--icon) center / 22px no-repeat;
}
.mehr-blatt a.aktiv { color: var(--akzent); }
.mehr-blatt a.aktiv::before { background: var(--akzent); }
.mehr-blatt-quelle { margin-top: var(--raum-4); font-size: var(--t-mikro); color: var(--text-still); }
@media (min-width: 600px) { .sheet-kasten { max-width: 480px; margin: 0 auto; } }

/* ---------------------------------------------------- Feedback, Toasts */
.feedback-knopf { bottom: calc(var(--nav-hoehe) + env(safe-area-inset-bottom, 0px) + var(--raum-3)); }
#toast-container { bottom: calc(var(--nav-hoehe) + env(safe-area-inset-bottom, 0px) + var(--raum-3)); }

/* ============================================================ PC ab 1024 */
@media (min-width: 1024px) {
  body.mit-nav { padding-left: var(--leiste-breite); }
  body.mit-spalte { padding-right: var(--spalte-breite); }
  main#inhalt { max-width: 1080px; padding: var(--raum-5) var(--raum-6) var(--raum-7); }
  body.mit-spalte main#inhalt { padding-left: 28px; padding-right: 28px; }
  .hauptnav, .unternav { display: none; }
  .gruppen-eyebrow {
    display: block; margin: var(--raum-3) 0 0;
    font-family: var(--font-etikett, var(--font-body)); font-size: var(--t-mikro); font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em; color: var(--akzent);
  }
  .gruppen-eyebrow + .seiten-kopf { margin-top: var(--raum-1); }

  /* Seitenleiste: Marke oben, Gruppen, Konto unten */
  .rahmen-leiste {
    display: flex; flex-direction: column; position: fixed; z-index: 30; left: 0; top: 0; bottom: 0;
    width: var(--leiste-breite); padding: 22px 14px 14px; overflow-y: auto; scrollbar-width: thin;
    background: var(--bg); border-right: 1px solid var(--linie);
  }
  .rahmen-leiste .kopf { display: contents; }
  .rahmen-leiste .marke { order: 0; padding: 2px 10px 18px; font-size: 18px; }
  .rahmen-leiste .marke-zusatz { display: none; }
  .seitennav { order: 1; display: flex; flex-direction: column; gap: 2px; }
  .rahmen-leiste .kopf-status { order: 2; margin-top: auto; padding-top: var(--raum-4); flex-direction: column; align-items: stretch; gap: var(--raum-2); }
  .rahmen-leiste .benutzer-chip {
    display: grid; grid-template-columns: auto 1fr; column-gap: 10px; text-align: left;
    min-height: 52px; border-radius: 14px; padding: 6px 12px; border: 0; background: transparent; box-shadow: none;
  }
  .rahmen-leiste .benutzer-chip .personen-punkt { grid-row: span 2; width: 12px; height: 12px; }
  .rahmen-leiste .benutzer-name { font-size: var(--t-body); font-weight: 500; line-height: 1.2; }
  .benutzer-zusatz { display: block; font-size: var(--t-mikro); color: var(--text-leise); line-height: 1.2; }
  .rahmen-leiste .benutzer-chip:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }

  .seitennav-link {
    display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 12px;
    color: var(--text); text-decoration: none; font-weight: 500; cursor: pointer; list-style: none;
  }
  .seitennav-link::-webkit-details-marker { display: none; }
  .seitennav-link::before {
    content: ""; width: 20px; height: 20px; flex: none; background: var(--text-leise);
    -webkit-mask: var(--icon) center / 20px no-repeat; mask: var(--icon) center / 20px no-repeat;
  }
  summary.seitennav-link::after {
    content: ""; margin-left: auto; width: 7px; height: 7px; flex: none;
    border-right: 1.6px solid var(--text-still); border-bottom: 1.6px solid var(--text-still);
    transform: rotate(-45deg); transition: transform .15s ease;
  }
  .seitennav-gruppe[open] > summary.seitennav-link::after { transform: rotate(45deg); }
  .seitennav-link:hover, .seitennav-unter:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
  .seitennav-link.aktiv, .seitennav-unter.aktiv {
    background: var(--bg-erhoben); color: var(--akzent);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 10%, transparent), 0 3px 10px color-mix(in srgb, var(--text) 6%, transparent);
  }
  .seitennav-link.aktiv::before, .seitennav-link.ist-gruppe-aktiv::before { background: var(--akzent); }
  .seitennav-link.ist-gruppe-aktiv { color: var(--akzent); }
  .seitennav-unter {
    display: flex; align-items: center; min-height: 44px; margin: 1px 0 1px 30px; padding: 0 12px; border-radius: 11px;
    color: var(--text-leise); text-decoration: none; font-size: 15px;
  }
  .seitennav-unter.aktiv { color: var(--text); font-weight: 500; }
  .seitennav-gruppe[open] { padding-bottom: 4px; }
  .seitennav-trenner { border: 0; border-top: 1px solid var(--linie); margin: 10px 10px; }

  /* Heute-Spalte rechts */
  .heute-spalte {
    display: block; position: fixed; z-index: 20; right: 0; top: 0; bottom: 0; width: var(--spalte-breite);
    overflow-y: auto; scrollbar-width: thin; background: var(--bg-erhoben); border-left: 1px solid var(--linie);
  }

  /* Feedback unten rechts — neben, nicht über der Heute-Spalte */
  .feedback-knopf { bottom: var(--raum-5); right: var(--raum-5); }
  body.mit-spalte .feedback-knopf { right: calc(var(--spalte-breite) + var(--raum-5)); }
  #toast-container { bottom: var(--raum-5); left: calc(50% + var(--leiste-breite) / 2); }
  body.mit-spalte #toast-container { left: calc(50% + (var(--leiste-breite) - var(--spalte-breite)) / 2); }
}
.heute-spalte:not(:empty) { min-height: 0; }
@media (max-width: 1023px) { .heute-spalte { display: none; } }
@media print { .rahmen-leiste, .heute-spalte, .unternav, .hauptnav { display: none !important; } body.mit-nav { padding: 0 !important; } }

/* ---------------------------------------------- Symbole (Linien, 24er) */
/* Maske, damit sie die Textfarbe tragen — in jedem Theme. */
:where(.nav-link, .seitennav-link, .mehr-blatt a, .mehr-blatt button) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3C/svg%3E"); }
[data-ziel="heute"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2.5v2M12 19.5v2M2.5 12h2M19.5 12h2M5.3 5.3l1.4 1.4M17.3 17.3l1.4 1.4M5.3 18.7l1.4-1.4M17.3 6.7l1.4-1.4'/%3E%3C/svg%3E"); }
[data-ziel="planen"], [data-ziel="kalender"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='3'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
[data-ziel="aufgaben"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5l1.8 1.8L9 5M4 12.5l1.8 1.8L9 11M4 18.5l1.8 1.8L9 17M12.5 7h7.5M12.5 13h7.5M12.5 19h7.5'/%3E%3C/svg%3E"); }
[data-ziel="zuhause"], [data-ziel="haus"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 11L12 4l8.5 7M6 9.5V20h12V9.5'/%3E%3Cpath d='M10 20v-5h4v5'/%3E%3C/svg%3E"); }
[data-ziel="einkauf"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h16l-1.5 11.5a2 2 0 0 1-2 1.5h-9a2 2 0 0 1-2-1.5z'/%3E%3Cpath d='M8.5 8a3.5 3.5 0 0 1 7 0'/%3E%3C/svg%3E"); }
[data-ziel="familie"], [data-ziel="freizeit"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 19.5l6-10 4 6 3-4.5 6 8.5z'/%3E%3Ccircle cx='17' cy='6' r='2'/%3E%3C/svg%3E"); }
[data-ziel="mehr"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='5.5' cy='12' r='1.8'/%3E%3Ccircle cx='12' cy='12' r='1.8'/%3E%3Ccircle cx='18.5' cy='12' r='1.8'/%3E%3C/svg%3E"); }
[data-ziel="putzplan"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.6 3.6L17 8l-3.4 1.4L12 13l-1.6-3.6L7 8l3.4-1.4zM18 14l.9 2.1L21 17l-2.1.9L18 20l-.9-2.1L15 17l2.1-.9zM6 15l.7 1.3L8 17l-1.3.7L6 19l-.7-1.3L4 17l1.3-.7z'/%3E%3C/svg%3E"); }
[data-ziel="mehr-geld"], [data-ziel="kasse"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='13' rx='3'/%3E%3Cpath d='M3 10h18M16.5 14.5h1'/%3E%3C/svg%3E"); }
[data-ziel="essensplan"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3v8M5 3v5a2 2 0 0 0 4 0V3M7 11v10M17 21V3c-2.5 1.5-3.5 4-3.5 7.5H17'/%3E%3C/svg%3E"); }
[data-ziel="touren"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='17' r='3.5'/%3E%3Ccircle cx='18' cy='17' r='3.5'/%3E%3Cpath d='M6 17l4-8h5l3 8M9 9h-2M14 6h2.5'/%3E%3C/svg%3E"); }
[data-ziel="mehr-zeit"], [data-ziel="arbeitszeit"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='13' r='8'/%3E%3Cpath d='M12 9v4l2.5 2M10 2.5h4'/%3E%3C/svg%3E"); }
[data-ziel="haushalt"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 6.5l3-3 3 3-3 3M17.5 9.5L8 19l-4 1 1-4 9.5-9.5'/%3E%3C/svg%3E"); }
[data-ziel="dokumente"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M14 3v4h4M9 12h6M9 16h6'/%3E%3C/svg%3E"); }
[data-ziel="ausgaben"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V10M10 20V4M16 20v-7M22 20H2'/%3E%3C/svg%3E"); }
[data-ziel="pinnwand"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h14v12l-5 5H5z'/%3E%3Cpath d='M14 21v-5h5'/%3E%3C/svg%3E"); }
[data-ziel="feedback"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3C/svg%3E"); }
[data-ziel="mehr-app"], [data-ziel="verwaltung"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 7h10M18 7h2M4 17h2M10 17h10'/%3E%3Ccircle cx='16' cy='7' r='2'/%3E%3Ccircle cx='8' cy='17' r='2'/%3E%3C/svg%3E"); }
[data-ziel="fitness"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h3l2.5-5 4 10 2.5-5H21'/%3E%3C/svg%3E"); }
[data-ziel="erinnerungen"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 16.5V11a6 6 0 0 1 12 0v5.5l1.5 2h-15z'/%3E%3Cpath d='M10 20.5a2 2 0 0 0 4 0'/%3E%3C/svg%3E"); }
[data-ziel="konto"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='9' r='3.5'/%3E%3Cpath d='M5.5 19.5c1.2-3.3 3.6-5 6.5-5s5.3 1.7 6.5 5'/%3E%3C/svg%3E"); }

/* ------------------------------------------- Heute-Spalte (Inhalt, PC) */
.spalte-abschnitt { padding: 20px 22px; border-bottom: 1px solid var(--linie); }
.spalte-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--raum-2); min-height: 22px; }
.spalte-etikett {
  font-family: var(--font-etikett, var(--font-body)); font-size: var(--t-mikro); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--text-leise);
}
.spalte-etikett.ist-link { color: var(--akzent); text-decoration: none; padding: 10px 0; }
.spalte-kopf .wetter { font-size: var(--t-klein); color: var(--text-leise); }
.spalte-uhr { font-family: var(--font-display); font-size: 26px; font-weight: 600; margin: 4px 0 6px; }
.spalte-band { display: block; color: inherit; text-decoration: none; border-radius: 10px; }
.spalte-gross { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 4px; }
.spalte-gross .zahl { font-family: var(--font-display); font-size: 36px; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.spalte-gross small { font-size: var(--t-body); color: var(--text-leise); }
.spalte-text { font-size: var(--t-klein); color: var(--text-leise); line-height: 1.45; }
.spalte-route { margin: var(--raum-3) 0 var(--raum-1); }
.spalte-route .i { width: 18px; height: 18px; }
.spalte-weitere { display: flex; gap: 10px; padding-top: var(--raum-2); margin-top: var(--raum-2); border-top: 1px solid var(--linie); font-size: var(--t-klein); color: var(--text-leise); }
.spalte-weitere b { color: var(--text); font-weight: 600; }
.spalte-dran, .spalte-morgen { list-style: none; margin: var(--raum-2) 0 0; padding: 0; }
.spalte-dran li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--linie); }
.spalte-dran li:last-child { border-bottom: 0; }
.spalte-haken {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: -6px -8px -6px -10px;
  border: 0; background: none; cursor: pointer; color: transparent;
}
.spalte-haken::before { content: ""; position: absolute; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--linie-stark); }
.spalte-haken { position: relative; }
.spalte-haken .i { width: 14px; height: 14px; stroke-width: 3; position: relative; }
.spalte-haken:hover::before { border-color: var(--akzent); }
.ist-erledigt .spalte-haken::before { background: var(--gut); border-color: var(--gut); }
.ist-erledigt .spalte-haken { color: var(--bg-erhoben); }
.spalte-dran-text { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: var(--t-klein); line-height: 1.3; }
.spalte-dran-text span { font-weight: 500; color: var(--text); }
.spalte-dran-text small { font-size: var(--t-mikro); color: var(--text-leise); }
.spalte-dran-text small.ist-spaet { color: var(--dringend); }
.ist-erledigt .spalte-dran-text span { text-decoration: line-through; color: var(--text-still); }
.spalte-punkte { flex: none; padding: 2px 8px; border-radius: 999px; font-size: var(--t-mikro); font-weight: 600; background: var(--akzent-tint); color: var(--akzent); }
.spalte-morgen li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 8px; padding: 5px 0; font-size: var(--t-klein); }
.spalte-morgen li .zahl { color: var(--text-leise); }
.spalte-quelle { padding: 14px 22px 22px; font-size: var(--t-mikro); color: var(--text-still); }

/* Timer-Pille: manche Themes färben alle Zahlen in der Akzentfarbe — auf
   der Akzent-Pille wäre der Text dann unsichtbar. */
.kopf-status .timer-pille { color: var(--akzent-kontrast); }