/* ============================================================
   u flow – Fokus-Spalte (Modul, gehört zu fokus.js) = die „Zentrale"
   Links fixiert, volle Höhe: eingeklappt = Rail, ausgeklappt = Fokus-Modus.

   Zwei Darstellungen über ein Token-System (--fk-*):
   • Warm & lebendig (Standard)   • Cockpit (dunkel, body.theme-cockpit)
   Komponenten-CSS nutzt nur die Tokens → ein Satz Regeln, zwei Looks.
   ============================================================ */
:root { --rail-w: 66px; --fokus-w: 400px; }

/* ---------- Theme-Tokens: WARM (Standard) ---------- */
.fokus {
  --fk-bg: linear-gradient(178deg, #fffdf9 0%, #faf3e9 60%, #f4ebdd 100%);
  --fk-rand: rgba(120, 104, 84, 0.12);
  --fk-text: #3a342c;
  --fk-mittel: #6b6256;
  --fk-leise: #8a8071;
  --fk-akzent: #b07d56;
  --fk-akzent-2: #c89a6f;
  --fk-akzent-bg: rgba(176, 125, 86, 0.12);
  --fk-warn: #d8513f;
  --fk-warn-bg: rgba(216, 81, 63, 0.10);
  --fk-ok: #6fa56a;
  --fk-panel: #fffdf9;
  --fk-weich: rgba(120, 104, 84, 0.05);
  --fk-hover: rgba(120, 104, 84, 0.08);
  --fk-spur: rgba(120, 104, 84, 0.14);
  --fk-knopf-rand: rgba(120, 104, 84, 0.18);
  --fk-bubble-ki: rgba(120, 104, 84, 0.07);
  --fk-bubble-ki-text: #3a342c;
  --fk-eingabe-bg: rgba(120, 104, 84, 0.05);
  --fk-eingabe-fokus: #fff;
  --fk-schatten-spalte: 2px 0 16px rgba(74, 60, 44, 0.06);
  --fk-schatten-panel: 0 1px 2px rgba(74, 60, 44, 0.05), 0 10px 26px rgba(74, 60, 44, 0.08);
  --fk-titel: var(--fk-leise);
}

/* ---------- Theme-Tokens: COCKPIT (dunkel) ---------- */
body.theme-cockpit .fokus {
  --fk-bg: linear-gradient(178deg, #24201b 0%, #1d1915 55%, #171411 100%);
  --fk-rand: rgba(255, 255, 255, 0.09);
  --fk-text: #f3ede2;
  --fk-mittel: #c5bbab;
  --fk-leise: #948a7b;
  --fk-akzent: #e3ad74;
  --fk-akzent-2: #f0c48f;
  --fk-akzent-bg: rgba(227, 173, 116, 0.16);
  --fk-warn: #ff7059;
  --fk-warn-bg: rgba(255, 112, 89, 0.14);
  --fk-ok: #7ec77f;
  --fk-panel: rgba(255, 255, 255, 0.05);
  --fk-weich: rgba(255, 255, 255, 0.045);
  --fk-hover: rgba(255, 255, 255, 0.07);
  --fk-spur: rgba(255, 255, 255, 0.12);
  --fk-knopf-rand: rgba(255, 255, 255, 0.16);
  --fk-bubble-ki: rgba(255, 255, 255, 0.06);
  --fk-bubble-ki-text: #ece5d9;
  --fk-eingabe-bg: rgba(255, 255, 255, 0.05);
  --fk-eingabe-fokus: rgba(255, 255, 255, 0.09);
  --fk-schatten-spalte: 3px 0 22px rgba(0, 0, 0, 0.38);
  --fk-schatten-panel: 0 1px 2px rgba(0, 0, 0, 0.3), 0 14px 32px rgba(0, 0, 0, 0.42);
  --fk-titel: var(--fk-akzent);
}

/* Inhalt rechts neben der Spalte – schiebt das Board nach rechts. */
body { padding-left: var(--rail-w); transition: padding-left 0.28s cubic-bezier(0.2, 0.7, 0.3, 1); }
body.fokus-auf { padding-left: var(--fokus-w); }
body.fokus-init, body.fokus-init .fokus { transition: none; }

.fokus {
  position: fixed; left: 0; top: 0; bottom: 0; width: var(--rail-w); z-index: 9500;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--fk-bg); border-right: 1px solid var(--fk-rand);
  box-shadow: var(--fk-schatten-spalte);
  color: var(--fk-text);
  transition: width 0.28s cubic-bezier(0.2, 0.7, 0.3, 1), background 0.3s ease, box-shadow 0.3s ease;
}
body.fokus-auf .fokus { width: var(--fokus-w); }

/* ---------- Kopf: Logo + Aktionscluster (Theme · Einstellungen · Pfeil) ---------- */
.fokus-kopf { display: flex; align-items: center; }
body:not(.fokus-auf) .fokus-kopf { flex-direction: column; gap: 12px; padding: 14px 0 8px; }
body.fokus-auf .fokus-kopf { justify-content: space-between; gap: 8px; padding: 16px 16px 12px; }
body:not(.fokus-auf) .dots,
body:not(.fokus-auf) .word-slot { display: none; }

.logo { display: inline-flex; align-items: center; gap: 6px; }
.dots { display: inline-flex; align-items: center; gap: 4px; }
.dot { width: 17px; height: 17px; border-radius: 999px; flex: 0 0 auto; }
.dot-dark { width: 12px; height: 12px; background: var(--dot-dark); }
.dot-light { background: var(--dot-light); }
body.theme-cockpit .dot-dark { background: #8c8377; }
body.theme-cockpit .dot-light { background: #cfc6b7; }
.mark {
  width: 36px; height: 36px; border-radius: 999px; background: var(--red);
  display: grid; place-items: center; color: #fff;
  font-family: "Comfortaa", sans-serif; font-weight: 700; font-size: 21px; line-height: 1;
  box-shadow: var(--schatten-ruhe); flex: 0 0 auto; border: none; padding: 3px 0 0;
  cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.mark:hover { transform: scale(1.06); box-shadow: var(--schatten-hover); }
.mark:active { transform: scale(0.97); }
.word-slot { width: 5ch; min-height: 1em; display: grid; align-items: center; }
.word {
  font-family: "Comfortaa", sans-serif; font-size: 20px; font-weight: 700;
  letter-spacing: 0.5px; color: var(--fk-text); white-space: nowrap;
}
.letter { display: inline-block; will-change: transform, opacity, filter; }

/* Aktionscluster (rechts, neben dem Pfeil) */
.fokus-aktionen { display: inline-flex; align-items: center; gap: 6px; }
body:not(.fokus-auf) .fokus-aktionen { flex-direction: column; gap: 8px; }
body:not(.fokus-auf) .fokus-knopf { display: none; } /* eingeklappt nur den Pfeil zeigen */

.fokus-knopf, .fokus-toggle {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px;
  border: 1px solid var(--fk-knopf-rand); background: none; color: var(--fk-mittel);
  cursor: pointer; font-size: 15px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.12s ease, color 0.12s ease, transform 0.12s ease;
}
.fokus-knopf:hover, .fokus-toggle:hover { background: var(--fk-hover); color: var(--fk-text); }
.fokus-knopf:active { transform: scale(0.94); }
.fokus-toggle::before { content: "\203A"; }
body.fokus-auf .fokus-toggle::before { content: "\2039"; }
.fokus-theme::before { content: "\263D"; }                  /* ☽ → in den Cockpit-Modus */
body.theme-cockpit .fokus-theme::before { content: "\2600"; } /* ☀ → zurück nach warm */
.fokus-cog::before {
  content: ""; width: 16px; height: 16px; background-color: currentColor;
  -webkit-mask: var(--ico-cog) center / contain no-repeat; mask: var(--ico-cog) center / contain no-repeat;
}

/* U-Menü (bleibt hell, schwebt über dem Board) */
.u-menu {
  position: fixed; top: 60px; left: 14px; z-index: 9600;
  background: var(--karte-bg-fest); border: 1px solid var(--karte-rand);
  border-radius: 14px; box-shadow: var(--schatten-drag);
  padding: 6px; display: flex; flex-direction: column; min-width: 230px;
}
.u-menu[hidden] { display: none; }
.u-menu-item {
  border: none; background: none; text-align: left; cursor: pointer;
  font-family: inherit; font-size: 14px; color: var(--text-stark);
  padding: 10px 12px; border-radius: 9px; transition: background 0.12s ease;
}
.u-menu-item:hover { background: rgba(120, 104, 84, 0.07); }

/* ---------- Rail (eingeklappt) ---------- */
.fokus-rail { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 8px 0; }
body.fokus-auf .fokus-rail { display: none; }
.rail-info {
  width: 46px; min-height: 46px; padding: 6px 0; border-radius: 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: var(--fk-weich); border: 1px solid transparent;
  font-size: 16px; font-weight: 700; color: var(--fk-text); line-height: 1.05;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.rail-info small { font-size: 8.5px; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; color: var(--fk-leise); }
#rail-heute { background: var(--fk-akzent-bg); color: var(--fk-akzent); }
#rail-heute small { color: var(--fk-akzent); opacity: 0.8; }
.rail-info.rail-warn { color: var(--fk-warn); background: var(--fk-warn-bg); }
.rail-info.rail-warn small { color: var(--fk-warn); opacity: 0.85; }

/* ---------- Inhalt (ausgeklappt) ---------- */
.fokus-inhalt { display: none; }
body.fokus-auf .fokus-inhalt {
  display: flex; flex-direction: column; gap: 18px;
  flex: 1; min-height: 0; overflow: hidden; padding: 2px 16px 16px;
}
.fokus-sektion { display: flex; flex-direction: column; min-height: 0; }
.fokus-woche { flex: 0 0 auto; }
.fokus-aufgaben { flex: 1 1 0; min-height: 90px; }
.fokus-werkzeug { flex: 0 0 auto; }
.fokus-werkzeug-aktionen { display: flex; flex-wrap: wrap; gap: 8px; }
.fk-zaehler { margin-top: 9px; font-size: 11.5px; font-weight: 600; color: var(--fk-leise); letter-spacing: 0.2px; }
.fk-archiv-toggle { border: none; background: none; font: inherit; font-size: 11.5px; font-weight: 600; color: var(--fk-akzent); cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 2px; }
.fk-archiv-toggle.an { color: var(--fk-text); }

/* Sektionstitel mit Icon */
.fokus-titel {
  margin: 0 0 9px; font-size: 11px; font-weight: 700; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--fk-titel);
  display: flex; align-items: center; gap: 7px;
}
.fokus-titel::before {
  content: ""; width: 14px; height: 14px; flex: 0 0 auto; background-color: var(--fk-akzent);
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
#fokus-aufgaben { --ico: var(--ico-liste); }
#fokus-werkzeug { --ico: var(--ico-export); }

/* Senior-PM-Titel: Text links, „Woche planen" rechts */
.fokus-titel-text { flex: 1; }

.fokus-body { color: var(--fk-mittel); font-size: 13px; line-height: 1.5; }

/* ---------- Icon-Bibliothek (inline SVG, currentColor via mask) ---------- */
.fokus {
  --ico-sonne: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='4'/><path d='M12 2v2M12 20v2M4 12H2M22 12h-2M5 5l1.4 1.4M17.6 17.6L19 19M19 5l-1.4 1.4M6.4 17.6L5 19'/></svg>");
  --ico-uhr: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 7v5l3.5 2'/></svg>");
  --ico-balken: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 21V11M12 21V4M19 21v-7'/></svg>");
  --ico-chat: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 11.5a8.4 8.4 0 0 1-11.9 7.6L3 21l1.9-6.1A8.4 8.4 0 1 1 21 11.5z'/></svg>");
  --ico-liste: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6h11M9 12h11M9 18h11'/><path d='M4 5.5l1 1 2-2M4 11.5l1 1 2-2M4 17.5l1 1 2-2'/></svg>");
  --ico-export: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 16V4M8 8l4-4 4 4M4 16v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2'/></svg>");
  --ico-cog: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3'/><path d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/></svg>");
}

/* ---------- Aufgaben (ein gemeinsamer, scrollbarer Block) ---------- */
#fokus-aufgaben .fokus-body { flex: 1; min-height: 0; overflow-y: auto; }
.ft-liste { display: flex; flex-direction: column; gap: 2px; }
.ft-leer {
  display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--fk-leise);
  font-style: italic; padding: 8px 4px;
}
.ft-leer::before {
  content: ""; width: 14px; height: 14px; flex: 0 0 auto; opacity: 0.7; background-color: var(--fk-akzent);
  -webkit-mask: var(--ico-check) center / contain no-repeat; mask: var(--ico-check) center / contain no-repeat;
}
.fokus { --ico-check: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>"); }

.ft-datum-kopf {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase;
  color: var(--fk-leise); margin: 10px 0 4px; padding-left: 2px;
}
.ft-datum-kopf:first-child { margin-top: 0; }

/* Wochen-Überschrift: gibt der Zeitachse Struktur (Wochengrenzen sichtbar) */
.ft-woche-kopf {
  font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--fk-akzent); margin: 22px 0 6px; padding: 7px 2px 0;
  border-top: 1px solid var(--fk-rand);
}
.ft-woche-kopf:first-child { margin-top: 0; border-top: none; }

/* Leerer Tag: dezente Zeile, hält den Lauf der Zeit sichtbar ohne aufzudrängen */
.ft-datum-kopf.frei {
  font-weight: 500; text-transform: none; letter-spacing: 0;
  font-size: 11px; opacity: 0.38; margin: 3px 0; padding: 2px 2px;
}
/* Wochenende dezent markieren (Wochenrhythmus spürbar) */
.ft-datum-kopf.we { color: var(--fk-akzent-2); opacity: 0.8; }
.ft-datum-kopf.frei.we { color: var(--fk-akzent-2); opacity: 0.5; }

.ft-row {
  display: flex; align-items: center; gap: 9px; padding: 7px 8px 7px 22px; border-radius: 11px;
  position: relative; transition: background 0.12s ease;
}
.ft-row:hover { background: var(--fk-hover); }
/* Zieh-Griff: links, erscheint bei Hover. Ziehen = umsortieren / auf anderen Tag = umplanen. */
.ft-grip {
  position: absolute; left: 6px; top: 50%; transform: translateY(-50%); z-index: 2;
  cursor: grab; color: var(--fk-leise); opacity: 0;
  font-size: 12px; letter-spacing: -1px; line-height: 1; padding: 2px 1px;
  user-select: none; touch-action: none; transition: opacity 0.16s ease, color 0.12s ease;
}
.ft-row:hover .ft-grip { opacity: 0.5; }
.ft-grip:hover { opacity: 0.95; color: var(--fk-text); }
.ft-grip:active { cursor: grabbing; }
.ft-row.zieht {
  background: var(--fk-akzent-bg); /* weicher Akzent-Ton, kein hartes Weiß/Schwarz */
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  z-index: 5; opacity: 1;
}
.ft-box {
  flex: 0 0 auto; width: 17px; height: 17px; border-radius: 50%;
  border: 1.5px solid var(--fk-leise); background: none; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
}
.ft-box:hover { border-color: var(--fk-akzent); transform: scale(1.1); }
.ft-box.an { background: var(--fk-akzent); border-color: var(--fk-akzent); }
.ft-box.an::after { content: "\2713"; color: #fff; font-size: 10px; line-height: 1; }
.ft-kuerzel {
  flex: 0 0 auto; font-size: 10px; font-weight: 700; letter-spacing: 0.3px;
  color: var(--fk-akzent); background: var(--fk-akzent-bg); padding: 2px 7px; border-radius: 999px;
}
.ft-text { flex: 1; min-width: 0; font-size: 13px; color: var(--fk-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: text; }
.ft-text[contenteditable="true"] {
  overflow: visible; text-overflow: clip; white-space: normal; outline: none;
  background: var(--fk-eingabe-fokus); box-shadow: 0 0 0 1px var(--fk-akzent);
  border-radius: 6px; padding: 1px 5px; margin: -1px -5px;
}
/* Plan-Chip (Wiederholung · Dauer; Klick → Termin/Wiederholung/Dauer-Editor) */
.ft-plan {
  flex: 0 0 auto; font-size: 10.5px; font-weight: 700; color: var(--fk-mittel);
  background: var(--fk-weich); border: 1px solid transparent; padding: 2px 7px; border-radius: 7px;
  cursor: pointer; transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.ft-plan:hover { color: var(--fk-text); background: var(--fk-hover); border-color: var(--fk-knopf-rand); }
/* (i) → Karte öffnen: konstant sichtbar (kein hover-abhängiges Ein-/Ausblenden mehr) */
.ft-info {
  flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid var(--fk-knopf-rand); background: none; cursor: pointer; padding: 0;
  font-family: Georgia, serif; font-style: italic; font-size: 11px; color: var(--fk-leise);
  display: inline-flex; align-items: center; justify-content: center; opacity: 0.55;
  transition: color 0.12s ease, background 0.12s ease, opacity 0.12s ease;
}
.ft-info:hover { color: var(--fk-text); background: var(--fk-hover); opacity: 1; }

/* „+ Aufgabe" im Titel + Inline-Formular */
.ft-add-btn {
  flex: 0 0 auto; font-family: inherit; font-size: 11px; font-weight: 700; cursor: pointer;
  color: var(--fk-akzent); background: var(--fk-akzent-bg); border: 1px solid transparent;
  padding: 4px 10px; border-radius: 999px; text-transform: none; letter-spacing: 0;
  transition: filter 0.12s ease, transform 0.12s ease;
}
.ft-add-btn:hover { filter: brightness(1.06); }
.ft-add-btn:active { transform: scale(0.96); }
.ft-add-form { display: flex; flex-direction: column; gap: 7px; padding: 9px; margin-bottom: 8px; border: 1px solid var(--fk-rand); border-radius: 11px; background: var(--fk-weich); }
.ft-add-text, .ft-add-tag, .ft-add-projekt {
  border: 1px solid var(--fk-knopf-rand); border-radius: 8px; background: var(--fk-eingabe-fokus);
  font-family: inherit; font-size: 13px; color: var(--fk-text); padding: 7px 9px; outline: none;
}
.ft-add-text:focus, .ft-add-tag:focus, .ft-add-projekt:focus { border-color: var(--fk-akzent); }
.ft-add-reihe { display: flex; gap: 7px; }
.ft-add-tag, .ft-add-projekt { flex: 1; min-width: 0; font-size: 12.5px; cursor: pointer; padding: 6px 8px; }
.ft-add-tag { flex: 0 0 38%; }
.ft-add-anlegen { width: 100%; margin-top: 7px; font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; color: #fff; background: var(--fk-akzent); border: none; border-radius: 8px; padding: 8px 14px; }
.ft-add-anlegen:hover { filter: brightness(1.05); }
.ft-row.erledigt .ft-text { text-decoration: line-through; color: var(--fk-leise); }
.ft-row.erledigt .ft-kuerzel { opacity: 0.55; }
.ft-row.ueberfaellig { background: var(--fk-warn-bg); }
.ft-row.ueberfaellig::before {
  content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 999px; background: var(--fk-warn);
}
.ft-row.ueberfaellig .ft-text { color: var(--fk-warn); }

/* ⓘ Detail-Popover (body-Ebene → bleibt hell) */
.ft-info-pop {
  position: fixed; z-index: 11000; width: 240px;
  background: var(--karte-bg-fest); border: 1px solid var(--karte-rand);
  border-radius: 13px; box-shadow: var(--schatten-drag); padding: 12px; animation: kal-ein 0.14s ease-out;
}
.ft-info-kopf { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.ft-info-kopf .ft-kuerzel { color: var(--akzent); background: rgba(176, 125, 86, 0.10); }
.ft-info-titel { font-size: 14px; font-weight: 600; color: var(--text-stark); }
.ft-info-ziel { font-size: 12.5px; color: var(--text-mittel); line-height: 1.45; margin-bottom: 6px; }
.ft-info-meta { font-size: 11.5px; color: var(--text-leise); margin-bottom: 10px; }
.ft-info-btn {
  width: 100%; border: 1px solid var(--karte-rand); background: none; cursor: pointer;
  font-family: inherit; font-size: 12.5px; color: var(--akzent); font-weight: 600;
  padding: 7px; border-radius: 9px; transition: background 0.12s ease;
}
.ft-info-btn:hover { background: rgba(176, 125, 86, 0.08); }

/* ---------- Wochenfokus (kompakt oben, ausklappbar) ---------- */
#fokus-woche .fokus-body {
  background: var(--fk-panel); border: 1px solid var(--fk-rand); border-radius: 14px;
  padding: 11px 14px; box-shadow: var(--fk-schatten-panel); color: var(--fk-mittel); font-size: 13px;
}
.woche-kopf { display: flex; align-items: center; gap: 10px; }
.woche-fort-label { flex: 0 0 auto; font-size: 12px; font-weight: 600; color: var(--fk-mittel); }
.woche-chevron {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 7px; border: 1px solid var(--fk-knopf-rand);
  background: none; color: var(--fk-mittel); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.12s ease, color 0.12s ease;
}
.woche-chevron:hover { background: var(--fk-hover); color: var(--fk-text); }
.woche-chevron::before { content: "\203A"; display: inline-block; font-size: 15px; line-height: 1; transition: transform 0.16s ease; }
.woche-chevron.auf::before { transform: rotate(90deg); }
.woche-detail { display: flex; flex-direction: column; gap: 9px; margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--fk-rand); }
.woche-zeile { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.woche-zahl { font-weight: 700; color: var(--fk-text); font-size: 14px; }
.woche-klein { font-size: 11px; color: var(--fk-leise); }
.woche-bar { flex: 1; min-width: 50px; height: 8px; border-radius: 999px; background: var(--fk-spur); overflow: hidden; }
.woche-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--fk-akzent), var(--fk-akzent-2)); transition: width 0.4s cubic-bezier(0.2, 0.7, 0.3, 1); }
.woche-std {
  width: 50px; border: 1px solid var(--fk-knopf-rand); border-radius: 8px; background: var(--fk-eingabe-fokus);
  font-family: inherit; font-size: 13px; font-weight: 700; color: var(--fk-text); padding: 3px 6px; text-align: right;
}
.woche-std:focus { outline: none; border-color: var(--fk-akzent); }
.woche-warn { color: var(--fk-warn); font-weight: 700; }
.woche-ok { color: var(--fk-ok); font-weight: 700; }

/* ---------- Fokus-Fuß: Zuordnungen-Icon (nur eingeklappt) ---------- */
.fokus-fuss { margin-top: auto; display: flex; justify-content: center; padding: 8px 0 12px; }
body.fokus-auf .fokus-fuss { display: none; }
.fokus-fuss-btn {
  width: 42px; height: 42px; border-radius: 13px; border: 1px solid var(--fk-knopf-rand);
  background: var(--fk-weich); color: var(--fk-mittel); cursor: pointer; font-size: 18px; line-height: 1;
  display: flex; align-items: center; justify-content: center; transition: background 0.12s ease, color 0.12s ease;
}
.fokus-fuss-btn:hover { background: var(--fk-hover); color: var(--fk-text); }

/* ---------- Breiten-Griff ---------- */
.fokus-resize { position: absolute; top: 0; right: 0; bottom: 0; width: 7px; cursor: ew-resize; z-index: 2; display: none; }
body.fokus-auf .fokus-resize { display: block; }
.fokus-resize::after {
  content: ""; position: absolute; top: 50%; right: 2px; transform: translateY(-50%);
  width: 3px; height: 34px; border-radius: 999px; background: var(--fk-knopf-rand); transition: background 0.12s ease;
}
.fokus-resize:hover::after { background: var(--fk-akzent); }
body.fokus-resizing, body.fokus-resizing .fokus { transition: none; }

@media (prefers-reduced-motion: reduce) {
  body, .fokus, .woche-bar span { transition: none; }
}