/* Takt - Ergaenzungen zu app.css (aus Gymlog uebernommen: Farben, Schriften, Karten,
   Knoepfe, Wochenleiste). Hier nur, was Gymlog nicht kennt. */

/* Die Ampel in den klassischen Farben - Robin hat sie so gewaehlt, trotz
   Rot-Gruen-Schwaeche. Damit sie sich nie NUR ueber die Farbe unterscheidet: Rot ist
   bewusst dunkler als Gruen, im Punkt steht ein Zeichen, das Wort steht immer daneben. */
:root{--a-gruen:#55D68F;--a-gelb:#FFC53D;--a-rot:#E5534B}
.pa-gruen{--af:var(--a-gruen)} .pa-gelb{--af:var(--a-gelb)} .pa-rot{--af:var(--a-rot)}
.ampelmarke{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:24px;line-height:1}
.ampelmarke .punkt{width:30px;height:30px;border-radius:999px;background:var(--af);color:#10140a;display:grid;place-items:center;font-family:var(--body);font-weight:800;font-size:16px}
.pa-rot .ampelmarke .punkt{color:#fff}
.hero{gap:10px;border:1.5px solid var(--line)}
.hero.pa-gelb{border-color:#5a4616} .hero.pa-rot{border-color:#5c2723}
.hero .h1{font-size:44px}
.hero .grund{margin:0}
.gefuehl{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0}
.gefuehl .pill{width:44px;padding:0;height:44px;border-radius:12px;font-size:16px}
.gefuehl .label{width:100%}
a.btn{text-decoration:none}
.wrap .week a.wd{text-decoration:none}
.wd .dot{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.02em}
.wd.heilig .dot{opacity:.9}
.wd .dot.leer{color:var(--muted)}
.wd .dot.offen{background:transparent;border:1.5px solid var(--line-2);color:var(--soft)}
.wd.done .dot{background:var(--accent);color:var(--accent-ink);border:0}
.wd.today .dot.offen{border-color:var(--accent);color:var(--accent)}

/* Einheiten */
.slots{display:flex;flex-direction:column;gap:8px}
details.slot{background:var(--surface);border-radius:16px;padding:0 14px}
details.slot>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;min-height:64px;padding:10px 0}
details.slot>summary::-webkit-details-marker{display:none}
.slot .badge{flex:none;width:40px;height:40px;border-radius:12px;font-size:21px}
.slot.erledigt .badge{background:var(--accent);color:var(--accent-ink)}
.slot.uebersprungen .badge,.slot.pause .badge{opacity:.5}
.slot .titel{font-weight:700;font-size:16px;line-height:1.2}
.slot .unter{font-size:13px;color:var(--muted);margin-top:2px}
.slot .tag{font-family:var(--display);font-weight:700;font-size:19px;color:var(--soft);white-space:nowrap}
.slot.heute .tag{color:var(--accent)}
.slot .innen{padding:0 0 14px;display:flex;flex-direction:column;gap:12px}
.slot .innen p{margin:0}
.slot .marken{font-size:12px;color:var(--accent);font-weight:700}
.tagwahl{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.tagwahl button{height:44px;border-radius:12px;border:1.5px solid var(--line-2);background:transparent;color:var(--soft);font-weight:700;font-size:14px}
.tagwahl button[disabled]{border-color:var(--accent);color:var(--accent)}
.aktionen{display:flex;gap:8px;flex-wrap:wrap}
.aktionen .btn{flex:1;min-width:120px}
.wochenkopf{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:6px}
.wochenkopf .h2{font-size:26px}
.wochengrund{margin:2px 0 8px;font-size:13px;color:var(--muted)}
.wetter{border:1.5px solid var(--a-gelb)}
.wetter p{margin:0}
.warnung{border-radius:14px;border:1.5px solid var(--a-gelb);padding:12px 14px;font-size:14px}
.fehlerzeile{border-radius:14px;border:1.5px solid var(--danger);padding:12px 14px;font-size:14px;color:var(--danger)}

/* Verlauf */
.diagramm{width:100%;height:auto;display:block}
.diagramm .d-gitter{stroke:var(--line);stroke-width:1}
.diagramm .d-text{fill:var(--muted);font-size:13px;font-family:var(--body)}
.diagramm .d-gelb{fill:var(--a-gelb);opacity:.13}
.diagramm .d-rot{fill:var(--a-rot);opacity:.18}
.diagramm .d-basis{stroke:var(--soft);stroke-width:1.5;stroke-dasharray:5 4}
.diagramm .d-linie{fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linejoin:round}
.diagramm .d-punkt{fill:var(--accent)}
.diagramm .d-jetzt{fill:none;stroke:var(--fg);stroke-width:2}
.ampelband{display:grid;grid-template-columns:repeat(28,minmax(0,1fr));gap:2px}
.ampelband span{height:22px;border-radius:4px;background:var(--af)}
.balken{display:flex;flex-direction:column;gap:12px}
.balken .zeile{display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;align-items:center;font-size:12px;color:var(--muted)}
.balken .spur{height:10px;border-radius:999px;background:var(--surface-2);position:relative;overflow:hidden;margin-bottom:5px}
.balken .spur i{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:var(--accent)}
.balken .spur i.gym{background:var(--ss)}
.stufen{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.stufen .chip.jetzt{background:var(--accent);color:var(--accent-ink);font-weight:700}
.stufen .chip.fertig{opacity:.5;text-decoration:line-through}

/* Protokoll */
.zeilen>div{padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}
.zeilen>div:last-child{border-bottom:0}
.zeilen .wann{display:block;font-size:12px;color:var(--muted)}
.zeilen .grund{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.zeilen .art{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);font-weight:700}

/* Tabelle der Serien */
table.serie{width:100%;border-collapse:collapse;font-size:14px}
table.serie th{text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:6px 4px}
table.serie td{padding:10px 4px;border-top:1px solid var(--line)}
.sub{font-size:13px;color:var(--muted)}
.tabs-in{grid-template-columns:repeat(4,minmax(0,1fr))}
a.tab{text-decoration:none}
.nebenlink{display:inline-flex;align-items:center;gap:6px;color:var(--link);font-weight:700;font-size:14px;text-decoration:none}
input.eingabe,.eingabe{height:48px;border-radius:12px;border:1.5px solid var(--line-2);background:var(--bg);padding:0 14px;font-size:16px;width:100%}
.unsichtbar{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}