/* Leeze-CI (Tool-Variante): Work Sans, monochrom, Ecken 0–4px, Hairline-Rahmen, Statusfarben gedämpft. Light + Dark. */ @import url('/static/fonts/worksans.css'); :root{ --ink:#2b2b2b;--paper:#f5f5f5;--white:#ffffff;--silver:#c1c1c1;--line:#dcdcdc;--grey:#8c8c8c;--grey-dark:#545454;--hover:#f5f5f5;--grid:#e6e6e6; --success:#3f7d55;--warning:#c08a2e;--danger:#b0413e;--info:#4a6785; --key-bg:rgba(176,65,62,.14);--easy-bg:rgba(74,103,133,.14);--free-bg:rgba(140,140,140,.10);--kraft-bg:rgba(43,43,43,.10);--abs-bg:rgba(192,138,46,.16); --font:"Work Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:ui-monospace,Menlo,monospace;--r:4px;--max:1280px; color-scheme:light; } :root[data-theme="dark"]{ --ink:#ececec;--paper:#161616;--white:#1f1f1f;--silver:#4a4a4a;--line:#333333;--grey:#8c8c8c;--grey-dark:#b0b0b0;--hover:#262626;--grid:#2c2c2c; --success:#6fae86;--warning:#d9a758;--danger:#d7746f;--info:#7f9bbd; --key-bg:rgba(215,116,111,.20);--easy-bg:rgba(127,155,189,.20);--free-bg:rgba(140,140,140,.12);--kraft-bg:rgba(236,236,236,.10);--abs-bg:rgba(217,167,88,.20); color-scheme:dark; } @media (prefers-color-scheme: dark){:root:not([data-theme="light"]){ --ink:#ececec;--paper:#161616;--white:#1f1f1f;--silver:#4a4a4a;--line:#333333;--grey:#8c8c8c;--grey-dark:#b0b0b0;--hover:#262626;--grid:#2c2c2c; --success:#6fae86;--warning:#d9a758;--danger:#d7746f;--info:#7f9bbd; --key-bg:rgba(215,116,111,.20);--easy-bg:rgba(127,155,189,.20);--free-bg:rgba(140,140,140,.12);--kraft-bg:rgba(236,236,236,.10);--abs-bg:rgba(217,167,88,.20); color-scheme:dark;}} *{box-sizing:border-box} html{background:var(--paper)} body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.5 var(--font);-webkit-font-smoothing:antialiased} a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--silver);text-underline-offset:2px}a:hover{text-decoration-color:var(--ink)} h1,h2,h3{margin:0;font-weight:900;text-transform:uppercase;letter-spacing:-.02em;font-style:italic} h1{font-size:22px}h2{font-size:15px;margin-bottom:12px}h3{font-size:13px} h2 .sub,h3 .sub{font-style:normal;font-weight:400;text-transform:none;letter-spacing:0;color:var(--grey);font-size:12.5px} .eyebrow{font-weight:700;text-transform:uppercase;letter-spacing:.22em;font-size:10.5px;color:var(--grey)} .muted{color:var(--grey)}.small{font-size:12.5px}.r{text-align:right}.nowrap{white-space:nowrap}.mono{font-family:var(--mono)} strong,b{font-weight:500} header.top{display:flex;align-items:center;gap:28px;padding:0 24px;height:56px;border-bottom:1px solid var(--line);background:var(--white);position:sticky;top:0;z-index:5} .brand{font-weight:900;font-style:italic;text-transform:uppercase;letter-spacing:-.02em;font-size:17px;text-decoration:none} nav{display:flex;gap:20px;align-items:center;flex:1 1 auto;min-width:0} nav a{text-decoration:none;font-weight:500;font-size:13.5px;color:var(--grey);padding:18px 0;border-bottom:2px solid transparent;white-space:nowrap} nav a.active{color:var(--ink);border-bottom-color:var(--ink)} .nav-aktionen{margin-left:auto;display:flex;gap:12px;align-items:center;flex:none} .right{margin-left:auto;display:flex;gap:12px;align-items:center} /* Menue-Knopf: nur auf dem Handy. Der Punkt meldet neue Eintraege, damit das Signal nicht hinter dem zugeklappten Menue verschwindet. */ .navbtn{display:none;position:relative;background:none;border:1px solid var(--line);border-radius:var(--r); font-family:inherit;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.18em; color:var(--ink);padding:10px 12px;cursor:pointer} .navbtn.hat-neu::after{content:"";position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:50%;background:var(--danger)} main{max-width:var(--max);margin:0 auto;padding:24px 24px 48px} footer{max-width:var(--max);margin:0 auto;padding:12px 24px 32px;border-top:1px solid var(--line)} .card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;margin-bottom:20px} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}.grid2.wide{grid-template-columns:1.25fr 1fr} .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} /* Rasterzellen schrumpfen sonst nicht unter ihren Inhalt (min-width:auto) — auf dem Handy schob dadurch eine breite Tabelle die ganze Seite auseinander: Kraft 591 px statt 390 (12.09.2026). .g12 hatte die Absicherung schon, .grid2/.grid3 nicht. */ .grid2>*,.grid3>*{min-width:0} @media(max-width:960px){.grid2,.grid2.wide,.grid3{grid-template-columns:1fr}} .row{display:flex;gap:16px;flex-wrap:wrap;align-items:baseline} .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:20px} .tile{background:var(--white);padding:14px 16px;display:flex;flex-direction:column;gap:3px} .tile .val{font-size:28px;font-weight:900;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums} .tile .val small{font-size:13px;font-weight:500;color:var(--grey);letter-spacing:0} .tile .sub{color:var(--grey);font-size:12px} .tile.pos .val{color:var(--success)}.tile.neg .val{color:var(--danger)} .btn{background:var(--ink);color:var(--paper);border:1px solid var(--ink);border-radius:var(--r);padding:8px 14px;font:700 12px var(--font);text-transform:uppercase;letter-spacing:.08em;cursor:pointer} .btn.small{padding:5px 10px;font-size:11px}.btn.ghost{background:transparent;color:var(--ink)}.btn.danger{background:transparent;color:var(--danger);border-color:var(--line)} form.inline{display:inline} input,select,textarea{font:14px var(--font);color:var(--ink);background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:8px 10px;width:100%} label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--grey-dark)} .formgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:12px;align-items:end} .flash{border:1px solid var(--line);border-left:3px solid var(--success);background:var(--white);padding:8px 12px;border-radius:var(--r);margin-bottom:16px;font-size:13.5px} .flash.err{border-left-color:var(--danger)} /* Tage */ ul.days{list-style:none;margin:0;padding:0} ul.days li{padding:10px 0;border-top:1px solid var(--line)}ul.days li:first-child{border-top:0} ul.days li.today{background:var(--paper);margin:0 -12px;padding:10px 12px;border-radius:var(--r);border-top:0} .dayhead{display:flex;gap:10px;flex-wrap:wrap;align-items:baseline} .dayhead .d{font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:12px} .wx{color:var(--grey);font-size:12px;margin-left:auto;font-variant-numeric:tabular-nums} .ev{display:flex;gap:10px;flex-wrap:wrap;align-items:baseline;padding:4px 0 2px 10px;border-left:2px solid var(--line);margin-top:6px} .ev.cat-workout{border-color:var(--ink)}.ev.cat-note{border-color:var(--warning)}.ev.cat-race_a,.ev.cat-race_b,.ev.cat-race_c{border-color:var(--danger)} .ev.key{border-color:var(--danger)}.ev.ist{border-color:var(--success)} .ev .cat{font-size:10.5px;text-transform:uppercase;color:var(--grey);letter-spacing:.14em;font-weight:700} .ev .name{font-weight:500} .ev .desc{flex-basis:100%;white-space:pre-wrap;font:12px/1.45 var(--mono);color:var(--grey-dark);margin:2px 0 0;max-height:240px;overflow:auto} .badge{display:inline-block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;padding:2px 7px;border:1px solid var(--line);border-radius:2px;color:var(--grey-dark)} .badge.info{border-color:var(--info);color:var(--info)}.badge.warn{border-color:var(--warning);color:var(--warning)}.badge.ok{border-color:var(--success);color:var(--success)}.badge.danger{border-color:var(--danger);color:var(--danger)} /* Countdown */ .chips{display:flex;gap:10px;flex-wrap:wrap} .chip{border:1px solid var(--line);border-radius:var(--r);padding:8px 12px;background:var(--white);display:flex;flex-direction:column;min-width:130px} .chip .n{font-size:22px;font-weight:900;font-style:italic;line-height:1.1}.chip .n small{font-size:11px;font-style:normal;font-weight:500;color:var(--grey)} .chip .t{font-size:12px;color:var(--grey-dark)}.chip.race{border-left:3px solid var(--danger)}.chip.test{border-left:3px solid var(--ink)} /* Kalender-Raster */ .cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px} .cal .hd{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--grey);text-align:center;padding-bottom:2px} .cal .day{min-height:64px;border:1px solid var(--line);border-radius:var(--r);padding:5px 6px;font-size:11.5px;background:var(--white);position:relative;overflow:hidden;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:2px} .cal .day .dn{font-weight:700;font-size:11px;color:var(--grey)}.cal .day.today .dn{color:var(--ink);text-decoration:underline} .cal .day.free{background:var(--free-bg)}.cal .day.easy{background:var(--easy-bg)}.cal .day.key{background:var(--key-bg)}.cal .day.race{background:var(--key-bg);border-color:var(--danger)} .cal .day.kraft{background:var(--kraft-bg)}.cal .day.past{opacity:.75}.cal .day.abs{background:repeating-linear-gradient(135deg,var(--abs-bg),var(--abs-bg) 5px,transparent 5px,transparent 10px);border-color:var(--warning)} .cal .day.abs.key,.cal .day.abs.easy{border-color:var(--danger)} .cal .day .t{line-height:1.25;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical} .cal .day .t.ist{color:var(--success)} .legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--grey);margin-top:10px}.legend span::before{content:"";display:inline-block;width:12px;height:12px;border:1px solid var(--line);border-radius:2px;margin-right:5px;vertical-align:-2px} .legend .l-key::before{background:var(--key-bg);border-color:var(--danger)}.legend .l-easy::before{background:var(--easy-bg)}.legend .l-kraft::before{background:var(--kraft-bg)}.legend .l-free::before{background:var(--free-bg)}.legend .l-abs::before{background:var(--abs-bg);border-color:var(--warning)} /* Abwesenheits-Raster */ .absgrid .day{cursor:pointer;min-height:44px;user-select:none}.absgrid .day.sel{background:var(--abs-bg);border-color:var(--warning)}.absgrid .day:hover{border-color:var(--ink)} .absgrid .wk{font-size:10.5px;color:var(--grey);align-self:center;text-align:right;padding-right:6px} .cal.absgrid{grid-template-columns:44px repeat(7,1fr)} .runs .run{display:grid;grid-template-columns:150px 1fr 90px 90px;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line)} @media(max-width:720px){.runs .run{grid-template-columns:1fr}} /* Tabellen */ .tablewrap{overflow-x:auto} table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums;font-size:13.5px} th,td{padding:7px 9px;border-bottom:1px solid var(--line);white-space:nowrap;vertical-align:top} th{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--grey);text-align:left} td.wrap{white-space:normal} tbody tr:hover{background:var(--hover)} tr.now{background:var(--paper)}tr.now td:first-child{box-shadow:inset 3px 0 0 var(--ink)} /* Roadmap */ .timeline{display:flex;flex-direction:column;gap:10px;margin:10px 0 18px} .tl-phase{display:grid;grid-template-columns:150px 1fr;gap:12px;align-items:center} @media(max-width:760px){.tl-phase{grid-template-columns:1fr;gap:6px;align-items:stretch}} .tl-phase .lbl{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.tl-phase .lbl small{display:block;font-weight:400;text-transform:none;letter-spacing:0;color:var(--grey)} .tl-bar{display:flex;gap:2px;height:30px} .tl-seg{flex:1 1 0;border-radius:2px;background:var(--free-bg);position:relative;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--grey-dark);overflow:hidden;text-decoration:none;border:1px solid transparent} .tl-seg.last{background:var(--easy-bg)}.tl-seg.ruhe{background:var(--free-bg)}.tl-seg.test{background:var(--key-bg);border-color:var(--danger)}.tl-seg.reise{background:var(--abs-bg)} .tl-seg.now{outline:2px solid var(--ink);outline-offset:1px} .tl-seg.past{opacity:.55} .wk-list details{border-top:1px solid var(--line);padding:8px 0}.wk-list details:first-child{border-top:0} .wk-list summary{cursor:pointer;display:grid;grid-template-columns:52px 110px 1fr 70px;gap:10px;align-items:baseline;list-style:none} .wk-list summary::-webkit-details-marker{display:none} .wk-list summary .id{font-weight:900;font-style:italic}.wk-list summary .typ{font-size:12px;color:var(--grey-dark)}.wk-list summary .ctl{text-align:right;font-variant-numeric:tabular-nums;color:var(--grey)} .wk-list details.now summary{background:var(--paper);margin:0 -10px;padding:6px 10px;border-radius:var(--r)} /* Handy: vier feste Spalten (52+110+1fr+70) lassen fuer den Typ kaum Platz, die CTL-Spalte lief ueber den Rand. Zwei Zeilen statt vier Spalten (12.09.2026). */ @media(max-width:760px){ .wk-list summary{grid-template-columns:56px 1fr auto;gap:4px 10px} .wk-list summary .typ{grid-column:2/-1;grid-row:2} .wk-list summary .ctl{text-align:right;grid-row:1} } .wk-list .body{padding:8px 0 4px 62px;font-size:13.5px}.wk-list .body p{margin:4px 0} .phase{margin-bottom:22px}.phase .motto{color:var(--grey);font-size:13px;margin:2px 0 8px} .bst{display:grid;grid-template-columns:36px 1fr;gap:14px;padding:14px 0;border-top:1px solid var(--line)} .bst:first-of-type{border-top:0} .bst .nr{font-weight:900;font-size:22px;line-height:1;font-style:italic} .bst .t{font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:13px} .bst dl{margin:6px 0 0;display:grid;grid-template-columns:90px 1fr;gap:3px 12px;font-size:13.5px} .bst dt{color:var(--grey);font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;font-weight:700;padding-top:3px}.bst dd{margin:0} /* Scoreboard */ .score{display:flex;gap:0;align-items:flex-end;border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:8px} .score .bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px} .score .bar .b{width:70%;background:var(--easy-bg);border:1px solid var(--info);border-radius:2px 2px 0 0} .score .bar.ziel .b{background:transparent;border:1px dashed var(--danger)} .score .bar .v{font-weight:900;font-style:italic;font-size:16px} /* Literatur */ .prose{max-width:820px;font-size:15px}.prose h1{font-size:20px;margin:0 0 14px}.prose h2{font-size:14px;margin:26px 0 8px;font-style:normal}.prose h3{font-size:13px;margin:18px 0 6px} .prose p,.prose li{line-height:1.6}.prose blockquote{border-left:2px solid var(--line);margin:12px 0;padding:4px 14px;color:var(--grey-dark)} .prose table{font-size:13px}.prose td,.prose th{white-space:normal}.prose code{font-family:var(--mono);font-size:12.5px;background:var(--paper);padding:1px 4px} .prose hr{border:0;border-top:1px solid var(--line);margin:22px 0} body.center{display:grid;place-items:center;min-height:100vh} .login{width:340px;display:flex;flex-direction:column;gap:14px} code{font-family:var(--mono);font-size:12.5px;background:var(--white);border:1px solid var(--line);padding:1px 5px;border-radius:2px} /* ===== Startseite v2 (Agent A, 08.09.2026): Kopf-Karte, 12er-Grid, Detail-Drawer ===== */ /* Kopf-Karte: „Wo stehen wir" → Kennzahlen-Streifen → flache Form-Kurve. Die Zahlen sitzen auf der Kurve, nicht in der Luft. */ .head{display:flex;flex-direction:column;gap:14px} .head .where{display:flex;flex-direction:column;gap:2px;min-width:0} .head .where .line{font-size:15px;line-height:1.35} .stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px 0;overflow:hidden;border-top:1px solid var(--line);padding-top:12px} .stat{display:flex;flex-direction:column;gap:2px;min-width:0;padding:0 16px;border-left:1px solid var(--line);margin-left:-1px} .stat .eyebrow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .stat .val{font-size:26px;font-weight:900;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap} .stat .val small{font-size:12px;font-weight:500;color:var(--grey);letter-spacing:0} .stat .sub{color:var(--grey);font-size:11.5px;line-height:1.35} .stat.pos .val{color:var(--success)}.stat.neg .val{color:var(--danger)} .head .formwrap{border-top:1px solid var(--line);padding-top:12px} .formwrap .chartbox{position:relative;height:110px;width:100%} .chartlegend{display:flex;gap:14px;flex-wrap:wrap;align-items:baseline;font-size:11.5px;color:var(--grey-dark);margin-top:6px} .chartlegend i{display:inline-block;width:16px;border-top:2px solid var(--ink);vertical-align:middle;margin-right:5px} .chartlegend .atl i{border-top:1.5px dashed var(--grey)}.chartlegend .form i{border-top:1.5px solid var(--info)} .chartlegend .muted{margin-left:auto} @media(max-width:960px){.stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 0}} @media(max-width:640px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.stat:nth-child(5){grid-column:1/-1}} /* Countdown-Zeile: gleich breite, gleich hohe Chips in EINER Reihe (bricht erst auf schmalen Screens um) */ section.chips{margin-bottom:20px;align-items:stretch} .chips .chip{flex:1 1 170px;min-width:150px;justify-content:center} /* 12er-Grid */ .g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px;align-items:start;margin-bottom:20px} .g12>*{min-width:0}.c7{grid-column:span 7}.c5{grid-column:span 5} .g12 .card{margin-bottom:0} .stack{display:flex;flex-direction:column;gap:20px} @media(max-width:960px){.c7,.c5{grid-column:1/-1}} /* ---- Handy: Reihenfolge der Startseite (19.09.2026, auf Jaspers Wunsch) -------------------- Am Desktop steht Heute links und der Kennzahlen-Block rechts. Sobald die Spalten stapeln, erschien Heute zuerst und die Zahlen erst nach langem Scrollen. Unterwegs will Jasper es umgekehrt: erst CTL/ATL/Form/CP/Scoreboard, direkt darunter die Wellness-Eingabe (die traegt er morgens ein), dann der Tag. Warum ueber die Flex-Reihenfolge und nicht ueber zweites Markup: Ein zweiter Satz HTML muesste bei jeder Aenderung doppelt gepflegt werden und faellt beim ersten Vergessen auseinander. Deshalb wird `main` hier zur Spalte, und die Zwischencontainer der Heute-Section werden per `display:contents` aufgeloest — ihre Karten sind dann direkt sortierbar. Das Markup gibt es weiterhin genau einmal. Merke: Elemente ohne eigene `order` landen auf 50, also hinten in Dokumentreihenfolge. Die Flash-Leisten muessen deshalb ausdruecklich auf 0 — sonst rutscht die Warnung "lokale Kopie" ans Seitenende, wo sie niemand liest. */ @media(max-width:960px){ main{display:flex;flex-direction:column;gap:20px} main>*{order:50;margin-bottom:0} .heute-block .card{margin-bottom:0} .flash{order:0} .heute-block,.heute-block>.c7,.heute-block>.c5{display:contents} .gruss{order:1} .heute-block .kpi:not(.kpi-grafik){order:2} /* Kennzahlen + Wellness */ .heute-block .today-card{order:3} /* Heute */ .revkurz{order:4} .week{order:5} section.chips{order:6} .heute-block .kpi-grafik{order:7} /* Form-Kurve + Minikarte */ } .card>:last-child{margin-bottom:0} /* Header schmal: Sync-Zeitstempel weg, Nav bleibt scrollbar */ /* ---- Handy: Navigation wird ein aufklappbares Menue ---------------------------------------- Vorher lagen elf Links in einem 72 px breiten Scrollstreifen — gemessen am 12.09.2026, praktisch unbedienbar. Jetzt: Kopf schlank (Menue-Knopf + Wortmarke), die Links als volle Zeilen mit Tippflaeche, die Aktionen unten im selben Feld. */ @media(max-width:760px){ header.top{gap:12px;padding:0 14px} main{padding:16px 14px 40px} .navbtn{display:inline-flex;align-items:center} header.top nav{ position:fixed;left:0;right:0;top:56px;z-index:6; display:none;flex-direction:column;gap:0;align-items:stretch; background:var(--white);border-bottom:1px solid var(--line); max-height:calc(100dvh - 56px);overflow-y:auto; box-shadow:0 10px 26px rgba(0,0,0,.10); } body.nav-offen header.top nav{display:flex} /* Nur die direkten Navigationslinks werden zu Zeilen. „Eingang" und „Konto" liegen als Links in .nav-aktionen und sollen Knopf bzw. Zaehler bleiben, keine Menuezeile. */ header.top nav > a{padding:14px 18px;font-size:15px;border-bottom:1px solid var(--line);border-left:3px solid transparent} header.top nav > a.active{border-bottom-color:var(--line);border-left-color:var(--ink);color:var(--ink);background:var(--paper)} .nav-aktionen{margin:0;padding:14px 18px;gap:10px 14px;flex-wrap:wrap;align-items:center;border-top:1px solid var(--line)} .nav-aktionen a{padding:0;border:0} .nav-aktionen .btn{padding:10px 14px;font-size:12px} .nav-aktionen .muted{font-size:12px} body.nav-offen{overflow:hidden} } /* Klickbare Elemente → Drawer */ [data-fragment]{cursor:pointer} .hint{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--grey);text-decoration:underline;text-decoration-color:var(--silver);text-underline-offset:2px;cursor:pointer;white-space:nowrap} .hint:hover,.clickable:hover .hint{color:var(--ink);text-decoration-color:var(--ink)} .lnk{text-decoration:underline;text-decoration-color:var(--silver);text-underline-offset:2px;cursor:pointer}.lnk:hover{text-decoration-color:var(--ink)} .stat.clickable:hover,.chip.clickable:hover{background:var(--hover)} .stat.clickable{margin:-6px 0 -6px -1px;padding:6px 16px;border-radius:var(--r)} .chip.clickable .hint{margin-left:4px} .cal .day[data-fragment]:hover{border-color:var(--ink)} [data-fragment]:focus-visible,.drawer .close:focus-visible{outline:2px solid var(--ink);outline-offset:1px} /* Drawer */ .drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.38);z-index:20;opacity:0;transition:opacity .2s} .drawer-backdrop.open{opacity:1} .drawer{position:fixed;top:0;right:0;bottom:0;width:min(600px,100vw);background:var(--white);border-left:1px solid var(--line);z-index:21;transform:translateX(100%);transition:transform .22s ease;display:flex;flex-direction:column;box-shadow:-16px 0 40px rgba(0,0,0,.14);visibility:hidden} .drawer.open{transform:none;visibility:visible} .drawer .bar{display:flex;justify-content:space-between;align-items:center;padding:10px 20px;border-bottom:1px solid var(--line);flex:0 0 auto;min-height:44px} .drawer-body{overflow:auto;padding:18px 20px 40px;flex:1 1 auto;-webkit-overflow-scrolling:touch} .drawer .loading{color:var(--grey);font-size:13px} body.drawer-open{overflow:hidden} @media(max-width:700px){.drawer{width:100vw;border-left:0}} /* Fragmente (Contract:

…) */ .frag h2{margin-bottom:14px}.frag h3{margin:0 0 8px} .frag .ev .desc{max-height:none} .frag-meta{display:flex;flex-direction:column;gap:12px;padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--line);font-size:13.5px} .frag-meta .eyebrow{display:block;margin-bottom:2px} .frag-act{padding:10px 0;border-top:1px solid var(--line)}.frag-act:first-of-type{border-top:0;padding-top:0} dl.kv{display:grid;grid-template-columns:max-content minmax(0,1fr) max-content minmax(0,1fr);gap:4px 14px;margin:8px 0 0;font-size:13.5px} dl.kv dt{color:var(--grey);font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;font-weight:700;padding-top:3px;white-space:nowrap}dl.kv dd{margin:0;font-variant-numeric:tabular-nums} @media(max-width:480px){dl.kv{grid-template-columns:max-content minmax(0,1fr)}} table.compact{width:auto;min-width:300px} /* ===== Startseite v3 (09.09.2026): Wochenstreifen · Heute-Karte · Kennzahlen+Kurve rechts · Eingang ===== */ .week{padding:14px 20px} .week .whead{display:flex;gap:14px;flex-wrap:wrap;align-items:baseline;margin-bottom:10px} .week .whead .tot{margin-left:auto;font-size:12.5px;color:var(--grey-dark);font-variant-numeric:tabular-nums} .wdays{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px} .wday{border:1px solid var(--line);border-radius:var(--r);padding:8px 10px;min-height:74px;display:flex;flex-direction:column;gap:3px;font-size:12.5px;background:var(--white);cursor:pointer;min-width:0} .wday:hover{border-color:var(--ink)} .wday .dl{display:flex;justify-content:space-between;align-items:baseline;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--grey)} .wday .dl .st{font-size:10px;letter-spacing:.08em} .wday .nm{font-weight:500;line-height:1.3;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} .wday .tss{color:var(--grey);font-size:11.5px;font-variant-numeric:tabular-nums;margin-top:auto} .wday.free{background:var(--free-bg)}.wday.easy{background:var(--easy-bg)}.wday.key,.wday.race{background:var(--key-bg)}.wday.race{border-color:var(--danger)}.wday.kraft{background:var(--kraft-bg)} .wday.abs{background:repeating-linear-gradient(135deg,var(--abs-bg),var(--abs-bg) 5px,transparent 5px,transparent 10px);border-color:var(--warning)} .wday.today{outline:2px solid var(--ink);outline-offset:-1px}.wday.today .dl{color:var(--ink)} .wday.done .st{color:var(--success)} @media(max-width:900px){.wdays{grid-template-columns:repeat(4,minmax(0,1fr))}} @media(max-width:560px){.wdays{grid-template-columns:repeat(2,minmax(0,1fr))}} /* Heute-Karte */ .today-card{border-left:3px solid var(--ink)} .today-card .th{display:flex;gap:12px;flex-wrap:wrap;align-items:baseline;margin-bottom:10px} .today-card .th .wx{margin-left:auto} .today-card .ev .desc{max-height:none} .guide{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:12px 0} .guide>div{background:var(--white);padding:10px 12px;font-size:13px;line-height:1.45} .guide .eyebrow{display:block;margin-bottom:4px} .guide .why{grid-column:1/-1;color:var(--grey-dark);font-size:12.5px} @media(max-width:700px){.guide{grid-template-columns:1fr}} .targets{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 2px} .targets span{border:1px solid var(--line);border-radius:2px;padding:2px 8px;font-size:12.5px;font-variant-numeric:tabular-nums} .notes-form{border-top:1px solid var(--line);padding-top:12px;margin-top:12px} .notes-form .row2{display:grid;grid-template-columns:110px 110px 1fr auto;gap:10px;align-items:end} @media(max-width:700px){.notes-form .row2{grid-template-columns:1fr 1fr}} .notes-form textarea{min-height:64px;resize:vertical} /* Kennzahlen + Kurve (rechte Spalte) */ .kpi .stats{grid-template-columns:repeat(2,minmax(0,1fr));border-top:0;padding-top:0;gap:14px 0} .kpi .stat{padding:0 14px;border-left:1px solid var(--line)} .kpi .stat:nth-child(odd){border-left:0;padding-left:0} .kpi .formwrap{border-top:1px solid var(--line);padding-top:12px;margin-top:14px} .kpi .formwrap .chartbox{height:230px} /* Eingang */ .inbox li{padding:6px 0;border-top:1px solid var(--line);font-size:13px}.inbox li:first-child{border-top:0} .inbox .k{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--grey);margin-right:6px} /* Abwesenheits-Formular im Tag-Fragment */ .absform{border:1px solid var(--line);border-radius:var(--r);padding:12px;margin:8px 0 0;background:var(--paper)} .absform .row2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:8px} .absform .actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px} /* Profil */ .prof-kv{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden} .prof-kv>div{background:var(--white);padding:10px 12px;display:flex;flex-direction:column;gap:2px} .prof-kv .val{font-size:20px;font-weight:900;letter-spacing:-.02em;font-variant-numeric:tabular-nums}.prof-kv .val small{font-size:11px;font-weight:500;color:var(--grey)} .prof-kv .sub{font-size:11px;color:var(--grey)} .prof-list{margin:0;padding:0;list-style:none}.prof-list li{padding:10px 0;border-top:1px solid var(--line)}.prof-list li:first-child{border-top:0} .prof-list .t{font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:12.5px;margin-bottom:2px} .prof-list .womit{color:var(--grey-dark);font-size:12.5px;margin-top:4px} .quote{border-left:2px solid var(--line);padding:4px 14px;color:var(--grey-dark);font-style:italic;margin:8px 0} @media(max-width:900px){.prof-kv{grid-template-columns:repeat(2,minmax(0,1fr))}} .slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:0 0 12px} .slots>div{background:var(--white);padding:8px 12px;font-size:12.5px;line-height:1.4;font-variant-numeric:tabular-nums}.slots .eyebrow{display:block;margin-bottom:2px}.slots small{color:var(--grey)} @media(max-width:700px){.slots{grid-template-columns:1fr}} .targets span.work{border-color:var(--ink);font-weight:500} /* Test-SOP */ .sopbox{border:1px solid var(--ink);border-radius:var(--r);padding:12px 14px;margin:10px 0 12px;background:var(--white)} .sopbox .soph{display:flex;gap:10px;flex-wrap:wrap;align-items:baseline;margin-bottom:8px} .sopwx{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;font-size:12.5px} .sopwx>span{background:var(--white);padding:6px 10px;font-variant-numeric:tabular-nums}.sopwx .eyebrow{display:block} .sopgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;font-size:12.5px;margin:6px 0} .sopgrid ul{margin:2px 0 0;padding-left:16px;line-height:1.5} .sopform{border-top:1px solid var(--line);padding-top:10px;margin-top:8px} .sopform .row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:6px} @media(max-width:700px){.sopgrid,.sopform .row3,.sopwx{grid-template-columns:1fr}} .cnt{display:inline-block;min-width:18px;padding:0 5px;border-radius:9px;background:var(--ink);color:var(--paper);font-size:10.5px;font-weight:700;line-height:18px;text-align:center;vertical-align:1px} .cntlink{text-decoration:none;font-size:12.5px;font-weight:500;color:var(--ink)} /* Karte */ .mapcard{padding:14px 16px} .maphead{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-bottom:10px} .mapctl{margin-left:auto;display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}.mapctl label{font-size:11px}.mapctl select{width:auto;padding:5px 8px} .mapctl label.chk{flex-direction:row;align-items:center;gap:6px;padding-bottom:7px}.mapctl label.chk input{width:auto} .maprow{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:14px} @media(max-width:900px){.maprow{grid-template-columns:1fr}} .map{height:70vh;min-height:420px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper)} .mapside{display:flex;flex-direction:column;gap:16px;font-size:13px} .wxday{margin-top:8px}.wxslots{display:flex;flex-direction:column;gap:4px;margin-top:4px} .wxslot{text-align:left;background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:6px 8px;font:12.5px var(--font);color:var(--ink);cursor:pointer;display:flex;flex-direction:column;gap:1px;font-variant-numeric:tabular-nums} .wxslot:hover{border-color:var(--ink)}.wxslot.sel{border-color:var(--ink);background:var(--paper)}.wxslot .muted{font-size:11.5px} .windicon{background:transparent;border:0} .wind{display:flex;align-items:center;gap:6px;color:var(--ink);background:var(--white);border:1px solid var(--ink);border-radius:var(--r);padding:4px 8px;font:11.5px var(--font);line-height:1.25;box-shadow:0 1px 4px rgba(0,0,0,.15);white-space:nowrap} .wind svg{flex:0 0 auto;transition:transform .3s} .leaflet-container{font-family:var(--font)}.leaflet-control-attribution{font-size:10px} .map.dark .osm-tiles{filter:invert(1) hue-rotate(180deg) brightness(.85) contrast(.9) saturate(.3)} .map .osm-tiles{filter:saturate(.35) contrast(.95)} /* Kraft-Log */ .kraftbox{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;margin:10px 0 12px} table.kt td{white-space:normal;vertical-align:middle;padding:5px 6px}table.kt input{padding:5px 7px;font-size:13px} table.kt td:nth-child(3) input,table.kt td:nth-child(4) input,table.kt td:nth-child(5) input,table.kt td:nth-child(6) input{width:58px;text-align:right} table.kt tr.done td:nth-child(2) strong{text-decoration:underline;text-decoration-color:var(--success);text-underline-offset:3px} /* Fueling */ .fuelbox{border:1px solid var(--line);border-radius:var(--r);padding:10px 14px;margin:10px 0 12px} .fuelform .row4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:6px} @media(max-width:700px){.fuelform .row4{grid-template-columns:1fr 1fr}} /* Einheiten-Detail */ .zbars .zrow{display:grid;grid-template-columns:110px 1fr;gap:10px;align-items:center;margin-top:6px} .zbar{display:flex;height:14px;border:1px solid var(--line);border-radius:2px;overflow:hidden;background:var(--paper)} .zbar span{display:block;height:100%}.zbar .z1{background:var(--free-bg)}.zbar .z2{background:var(--easy-bg)}.zbar .z3{background:rgba(74,103,133,.35)}.zbar .z4{background:rgba(192,138,46,.35)}.zbar .z5{background:var(--key-bg)}.zbar .z6{background:rgba(176,65,62,.45)}.zbar .z7{background:var(--ink)} table.ivt{font-size:12.5px}table.ivt td,table.ivt th{padding:4px 6px} /* Startseite v4: kompakter 3-Monats-Kalender, zugeklappte Tabelle */ .cal3{display:grid;grid-template-columns:44px repeat(7,minmax(0,1fr));gap:3px} .cal3 .hd{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--grey);text-align:center;padding-bottom:2px} .cal3 .kw{font-size:10px;color:var(--grey);align-self:center;text-align:right;padding-right:6px;font-variant-numeric:tabular-nums} .cal3 .day{min-height:40px;border:1px solid var(--line);border-radius:2px;padding:3px 6px;font-size:11px;background:var(--white);display:flex;flex-direction:column;gap:1px;cursor:pointer;min-width:0;overflow:hidden} .cal3 .day .dn{font-weight:700;font-size:10px;color:var(--grey);line-height:1.2}.cal3 .day.today .dn{color:var(--ink);text-decoration:underline} .cal3 .day.mnew .dn{color:var(--ink)} .cal3 .day .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25}.cal3 .day .t.ist{color:var(--success)} .cal3 .day.free{background:var(--free-bg)}.cal3 .day.easy{background:var(--easy-bg)}.cal3 .day.key{background:var(--key-bg)}.cal3 .day.race{background:var(--key-bg);border-color:var(--danger)} .cal3 .day.kraft{background:var(--kraft-bg)}.cal3 .day.past{opacity:.7} .cal3 .day.abs{background:repeating-linear-gradient(135deg,var(--abs-bg),var(--abs-bg) 4px,transparent 4px,transparent 8px);border-color:var(--warning)} .cal3 .day.today{outline:2px solid var(--ink);outline-offset:-1px}.cal3 .day:hover{border-color:var(--ink)} .cal3card{margin-bottom:20px} @media(max-width:700px){.cal3{grid-template-columns:34px repeat(7,minmax(0,1fr));gap:2px}.cal3 .day{min-height:30px;padding:2px 3px}.cal3 .day .t{display:none}} details.fold summary{list-style:none;cursor:pointer;display:flex;align-items:center}details.fold summary::-webkit-details-marker{display:none} details.fold summary::after{content:"+";margin-left:auto;padding-left:18px;font-weight:700;color:var(--grey)}details.fold[open] summary::after{content:"–"} /* Kalender-Monatsblöcke */ .months{display:flex;flex-direction:column;gap:18px} .month .mname{font-weight:900;font-style:italic;text-transform:uppercase;letter-spacing:-.02em;font-size:13px;margin:0 0 6px 48px} .month.current .mname{text-decoration:underline;text-underline-offset:3px} .cal3 .day.empty{background:transparent;border-color:transparent;cursor:default;pointer-events:none} /* Wellness kompakt in der Kennzahlen-Karte */ .wellmini{border-top:1px solid var(--line);padding-top:12px;margin-top:14px} .wellmini .wrow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) 2fr auto;gap:6px;align-items:end;margin-top:6px} .wellmini label{font-size:10.5px}.wellmini input{padding:5px 6px;font-size:13px} @media(max-width:700px){.wellmini .wrow{grid-template-columns:repeat(3,minmax(0,1fr))}.wellmini .wrow .note{grid-column:1/-1}} /* Mini-Karte auf der Startseite */ .minimapwrap{border-top:1px solid var(--line);padding-top:12px;margin-top:14px} .minimap{height:260px;min-height:0;cursor:pointer} /* Windfeld: halbtransparente Pfeile über der Karte */ .windarrow{background:transparent;border:0} .windarrow .wa{display:flex;flex-direction:column;align-items:center;color:var(--ink);line-height:1;pointer-events:auto} .windarrow svg{filter:drop-shadow(0 0 2px var(--white))} .windarrow svg path{fill:currentColor;stroke:var(--white);stroke-width:1.2;paint-order:stroke fill} .windarrow .wn{font:700 10px var(--font);font-variant-numeric:tabular-nums;background:var(--white);border:1px solid var(--line);border-radius:2px;padding:0 3px;margin-top:-3px} .windarrow.strong .wa{color:var(--danger)} /* ===== Bibliothek ===== */ .amp{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;padding:1px 6px;border-radius:2px;border:1px solid var(--line);color:var(--grey-dark);white-space:nowrap;vertical-align:1px} .amp.gruen{border-color:var(--success);color:var(--success)}.amp.gelb{border-color:var(--warning);color:var(--warning)} .amp.rot{border-color:var(--danger);color:var(--danger)}.amp.grau{border-color:var(--silver);color:var(--grey)} .amp.warn{border-color:var(--warning);color:var(--warning)} .lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px} .lcard{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;text-decoration:none;color:var(--ink);background:var(--white)} .lcard:hover{border-color:var(--ink)} .lcard.aktiv{border-left:3px solid var(--ink)} .lcard .lt{font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:12.5px;line-height:1.3} .lcard .ll{font-size:12.5px;color:var(--grey-dark);line-height:1.45;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden} .lcard .lm{margin-top:auto}.lcard .lp{display:flex;gap:4px;flex-wrap:wrap} .ampbar{display:flex;height:6px;border-radius:2px;overflow:hidden;background:var(--paper)} .ampbar span{display:block}.ampbar .gruen{background:var(--success)}.ampbar .gelb{background:var(--warning)}.ampbar .rot{background:var(--danger)}.ampbar .grau{background:var(--silver)} .legend .l-amp-gruen::before{background:var(--success);border-color:var(--success)}.legend .l-amp-gelb::before{background:var(--warning);border-color:var(--warning)} .legend .l-amp-rot::before{background:var(--danger);border-color:var(--danger)}.legend .l-amp-grau::before{background:var(--silver)} .hits{list-style:none;margin:0;padding:0}.hits li{padding:10px 0;border-top:1px solid var(--line)}.hits li:first-child{border-top:0} .snip{font-size:12.5px;color:var(--grey-dark);line-height:1.5;margin-top:3px;padding-left:10px;border-left:2px solid var(--line)} .dokliste{margin:8px 0 0;padding-left:18px}.dokliste li{margin-bottom:6px;line-height:1.5;font-size:13.5px} .loglist{margin:8px 0 0;padding-left:18px;font-size:12.5px}.loglist li{margin-bottom:8px;line-height:1.5;color:var(--grey-dark)} details.dok summary{margin-bottom:2px} /* Wiki-Seite mit Inhaltsverzeichnis */ .wikirow{display:grid;grid-template-columns:240px minmax(0,1fr);gap:20px;align-items:start} @media(max-width:960px){.wikirow{grid-template-columns:1fr}} .wikinav{position:sticky;top:70px;display:flex;flex-direction:column;gap:16px;font-size:12.5px;max-height:calc(100vh - 90px);overflow:auto} .toc ul{list-style:none;margin:4px 0 0;padding:0} .toc li{padding:2px 0;line-height:1.4}.toc li.lvl3{padding-left:12px;font-size:11.5px} .toc a{text-decoration:none;color:var(--grey-dark)}.toc a:hover{color:var(--ink);text-decoration:underline} .wikiseite{max-width:860px} .wikiseite h1{font-size:22px;margin:4px 0 8px} .wikiseite .lead{font-size:15px;color:var(--grey-dark);font-style:italic;margin:0 0 12px} .wikiseite h2{font-size:15px;font-style:italic;text-transform:uppercase;margin:28px 0 10px;padding-top:10px;border-top:1px solid var(--line);scroll-margin-top:70px} .wikiseite h3{font-size:13.5px;margin:20px 0 6px;text-transform:none;font-style:normal;letter-spacing:0;scroll-margin-top:70px} .wikiseite blockquote{background:var(--paper);border-left:2px solid var(--silver);font-size:13px} .amplegend{display:flex;gap:12px;flex-wrap:wrap;align-items:center;padding:8px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:0 0 14px;font-size:12px;color:var(--grey-dark)} /* Letzte Auswertung, Kurzform */ .revkurz{margin-bottom:0} .rk-zahlen{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;font-variant-numeric:tabular-nums;padding-bottom:8px;border-bottom:1px solid var(--line);margin-bottom:8px} .rk-verdikt{margin:0 0 8px;font-size:13.5px;line-height:1.5} .rk-next{border-left:2px solid var(--line);padding-left:10px;margin:0 0 10px} .rk-next ul{margin:2px 0 0;padding-left:16px;font-size:13px;line-height:1.5}.rk-next li{margin-bottom:2px} /* Letzte Auswertung ganz oben, eingeklappt */ details.revkurz{margin-bottom:20px;padding:12px 18px} details.revkurz summary{gap:10px} .rk-sum{display:flex;gap:10px;flex-wrap:wrap;align-items:baseline;font-size:13.5px;min-width:0} .rk-sum .eyebrow{align-self:center} .rk-sum .rk-name{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:340px} .rk-sum .muted{font-variant-numeric:tabular-nums;font-size:12.5px} .rk-body{padding-top:12px;margin-top:10px;border-top:1px solid var(--line)} @media(max-width:700px){.rk-sum .rk-name{max-width:180px}} .login .chk{flex-direction:row;align-items:center;gap:8px;font-size:12.5px}.login .chk input{width:auto} .login details summary{cursor:pointer;list-style:none}.login details summary::-webkit-details-marker{display:none} .login h1{margin-bottom:4px} /* Willkommens-Kopf ganz oben. Erst die Anrede in der Haus-Schrift (Black, Versalien, kursiv — wie die Wortmarke und alle Ueberschriften), darunter Vorspann plus der wechselnde Satz. CI: viel Weissraum, Betonung ueber Groesse und Gewicht, nie ueber Farbe. */ .gruss{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:26px 28px 22px;margin-bottom:20px} .gruss-head{display:flex;align-items:baseline;gap:16px;margin-bottom:14px} .gruss-hallo{flex:1 1 auto;margin:0;font-size:27px;font-weight:900;text-transform:uppercase; font-style:italic;letter-spacing:-.02em;line-height:1.1} .gruss-next{flex:none;background:none;border:0;padding:2px 0;font-family:inherit;font-size:10.5px;font-weight:700; text-transform:uppercase;letter-spacing:.22em;color:var(--silver);cursor:pointer;white-space:nowrap} .gruss:hover .gruss-next{color:var(--grey)} .gruss-next:hover{color:var(--ink)} .gruss-next[disabled]{opacity:.35;cursor:default} .gruss-text{margin:0;max-width:86ch;font-size:18px;line-height:1.55;font-weight:400;letter-spacing:-.005em} .gruss-lead{color:var(--grey)} /* Quelle und Verweis stehen unter dem Satz, immer an derselben Stelle — sonst landen sie je nach Satzlaenge mal am Zeilenende und mal darunter. */ .gruss-mehr{display:flex;align-items:center;gap:14px;margin:14px 0 0} @media (max-width:640px){ .gruss{padding:20px 18px 16px} .gruss-hallo{font-size:22px} .gruss-text{font-size:16.5px;line-height:1.5} .gruss-head{gap:10px} } /* Heute und Rückblick sind klappbar (Wunsch 11.09.: "wenns dauerhaft ausgeklappt ist nervt es mich"). Die Kopfzeile wandert dafür in — die muss den Platz behalten, den sie vorher als Zeile hatte. */ details.fold summary h2{margin:0} details.fold summary > .th{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px} details.today-card > summary{margin-bottom:0} details.today-card[open] > summary{margin-bottom:12px} details.fold[open] > summary h2{margin:0} /* Einheiten ohne Auswertung. Steht bewusst in der obersten Karte: Die Regel "jede Einheit landet im Dashboard" wurde uebersehen, weil nichts darauf hinwies (11.09.2026). */ .luecken{margin:12px 0 10px;padding:10px 12px;border-left:3px solid var(--danger);background:var(--paper);border-radius:var(--r);font-size:13px} .luecken ul{margin:6px 0 0;padding:0;list-style:none} .luecken li{margin:2px 0} .luecken li .hint{margin-right:8px} .luecken p{margin:8px 0 0;font-size:12px} /* ---- Handy: Laenge und Tippziele ----------------------------------------------------------- Gemessen 12.09.2026: die Startseite war 8452 px hoch, rund zehn Bildschirme. Groesste Posten waren die Wochenvorschau (1975 px), die Heute-Karte (1395 px) und der Kalender (829 px). */ @media(max-width:760px){ /* Der Workout-Text der Heute-Karte laeuft ueber 30 Zeilen. Auf dem Desktop ist die Deckelung bewusst aufgehoben (.today-card .ev .desc), auf dem Handy frisst sie den halben Bildschirm — hier also wieder deckeln und scrollen lassen. */ .today-card .ev .desc{max-height:260px;overflow:auto} /* Tippziele: gemessen waren Textverweise 11–19 px hoch, Eingabefelder 27 px. Apple empfiehlt 44 pt; erreichbar ist das im Fliesstext nicht, aber 32 px sind treffbar. */ .hint{display:inline-block;padding:10px 0} .lnk{display:inline-block;padding:7px 0} a.small{display:inline-block;padding:8px 0} .luecken li .hint{padding:9px 0} /* 16 px sind Pflicht, nicht Geschmack: Safari zoomt beim Antippen in Felder mit kleinerer Schrift hinein und kommt nicht von selbst zurueck. Genau in diese Felder traegt Jasper unterwegs Wellness, Kraft und Fueling ein. */ input,select,textarea{font-size:16px;min-height:44px;padding:10px 12px} textarea{min-height:76px} label{font-size:12.5px;gap:5px} .btn{padding:11px 16px} .btn.small{padding:9px 13px} /* Kalenderfelder: 30 px waren knapp, 34 trifft sich sicherer und kostet wenig Hoehe. */ .cal3 .day{min-height:34px} main{padding-top:14px} } /* Frische-Ampel fuer Sync und Waechter. Gruen ist bewusst unauffaellig (grau) — nur der Ausfall soll ins Auge fallen, nicht der Normalbetrieb. */ .frisch{font-size:12px;white-space:nowrap;color:var(--grey)} .frisch.f-gelb{color:var(--warning);font-weight:500} .frisch.f-rot{color:var(--danger);font-weight:700} .frisch.f-rot::before,.frisch.f-gelb::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%; background:currentColor;margin-right:6px;vertical-align:middle} @media(max-width:760px){.nav-aktionen .frisch{font-size:12px}} /* ---- Kraft-Log auf dem Handy: Karten statt Tabelle (19.09.2026) --------------------------- Gemessen am 19.09.2026: Die Tabelle war 535 px breit bei 390 px Fenster. Die Spalte "Übung" frisst die Breite (Name + Hinweis + "zuletzt"), die Felder für kg, RIR und Notiz lagen rechts ausserhalb. Wer sie erreichen wollte, musste waagerecht wischen — und wusste danach nicht mehr, in welcher Zeile er war. Jasper: "beim Eintragen der Werte ist das fummelig". Loesung: Jede Zeile wird eine Karte. Die vier Zahlen stehen nebeneinander in einem Raster, Name und Notiz ueber die volle Breite. Die Spaltenueberschriften sind auf dem Handy weg, deshalb traegt jede Zelle ihr Label per `data-l` selbst (::before). Zwei Masse aus LEHREN.md, die hier gelten: Eingabefelder brauchen 16 px Schrift, sonst zoomt Safari beim Antippen hinein und kommt nicht zurueck. Und 44 px Hoehe, damit man sie mit dem Daumen trifft — gemessen waren sie vorher 27 px. */ @media(max-width:860px){ .kraftform .tablewrap{overflow:visible} .kraftform .kt,.kraftform .kt tbody,.kraftform .kt tr,.kraftform .kt td{display:block;width:auto} .kraftform .kt{min-width:0} .kraftform .kt thead{display:none} .kraftform .kt tr{ display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 8px; border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;margin-bottom:12px; } .kraftform .kt tr.done{border-left:3px solid var(--success)} .kraftform .kt td{border:0;padding:0;min-width:0} .kraftform .kt .kt-hak,.kraftform .kt .kt-name,.kraftform .kt .kt-note{grid-column:1/-1} .kraftform .kt .kt-name{order:-1} /* Name immer zuoberst in der Karte */ .kraftform .kt td[data-l]::before{ content:attr(data-l);display:block;margin-bottom:3px; font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted); } .kraftform .kt input[type=text],.kraftform .kt input:not([type]){width:100%} .kraftform .kt input{width:100%;min-height:44px;font-size:16px;box-sizing:border-box} .kraftform .kt input[type=checkbox]{width:22px;height:22px;min-height:0} /* Haken als ganze Zeile: grosse Tippflaeche statt 13-px-Kaestchen */ /* `flex-direction:row` ausdruecklich: Die globale Regel in Zeile 65 stellt JEDES