/* Konto-Bereich und Formularseiten. Gleiche Regeln wie die Startseite: dunkel, harte Kanten, Linien statt Schatten. */

/* ---------- Gemeinsam ---------- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.muted{color:var(--fg-2)}
.small{font-size:.88rem}
.acc{color:var(--acc)}
.muted a,.small a{color:var(--fg)}
.note{border:2px solid var(--fg);padding:12px 16px;margin:0 0 18px;font-weight:600;background:var(--bg-2)}
.note.ok{border-color:var(--acc);border-left-width:8px}
.note.err{border-color:var(--hot);border-left-width:8px}
.btn.hot{background:var(--hot);border-color:var(--hot);color:#fff}
.btn.hot::after{border-color:var(--hot)}
.link-btn{background:none;border:0;padding:0;color:var(--fg-2);font:600 .85rem/1 var(--f-body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.link-btn:hover{color:var(--fg)}
.link-btn.hot{color:var(--hot)}
form.inline{display:inline}
.tag{display:inline-block;font:700 .72rem/1 var(--f-mono);padding:4px 6px;border:1px solid var(--line-2);color:var(--fg-2);vertical-align:middle;letter-spacing:0}
.link{color:var(--fg-2);font-weight:600;font-size:.9rem;text-decoration:none;border-bottom:2px solid var(--line-2)}
.link:hover{color:var(--fg);border-color:var(--acc)}
.on{font-style:normal;color:var(--acc)}

/* Avatare: eckig, Initialen auf Farbe */
.av{--s:40px;width:var(--s);height:var(--s);flex:none;display:inline-grid;place-items:center;background:var(--av,var(--fg));color:var(--acc-ink);font:800 calc(var(--s)*.45)/1 var(--f-display);object-fit:cover}
.av.lg{--s:58px}
.av.xl{--s:104px}

/* Felder */
.form{display:grid;gap:16px}
.field{display:grid;gap:6px}
.field>span,.goals legend{font:600 .8rem/1.2 var(--f-mono);color:var(--fg-2)}
.field input,.field textarea,.search input,.composer textarea,.chat-form textarea,.plan-editor input{width:100%;background:var(--bg);color:var(--fg);border:2px solid var(--line-2);padding:12px 14px;font:1rem/1.4 var(--f-body);transition:border-color .15s}
.field textarea{resize:vertical;min-height:84px}
.field input:focus,.field textarea:focus,.search input:focus,.composer textarea:focus,.chat-form textarea:focus,.plan-editor input:focus{outline:0;border-color:var(--acc)}
.field.is-invalid input,.field.is-invalid textarea,.field.is-invalid .prefix{border-color:var(--hot)}
.err{color:var(--hot);font-weight:600;font-size:.85rem}
.prefix{display:flex;border:2px solid var(--line-2);transition:border-color .15s}
.prefix:focus-within{border-color:var(--acc)}
.prefix span{padding:12px 0 12px 14px;color:var(--muted);font-weight:700}
.prefix input{border:0!important;padding-left:2px}
.check{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.check input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--acc);flex:none}
.check.is-invalid span{color:var(--hot)}

/* ---------- Seiten ohne Konto (Anmelden usw.) ---------- */
.k-site .bar{background:var(--bg);border-bottom:1px solid var(--line)}
.site-main{min-height:calc(100svh - 70px);padding:120px var(--pad) 80px}
.auth{max-width:460px;margin:0 auto;display:grid;gap:18px}
.auth h1{font-size:clamp(2.4rem,7vw,3.6rem)}
.auth .btn{justify-self:start}
.legal{max-width:720px;margin:0 auto;display:grid;gap:14px}
.legal h1{font-size:clamp(2.2rem,6vw,3.4rem);margin-bottom:8px}
.legal h2{font-size:1.5rem;margin-top:18px}
.legal p{color:var(--fg-2)}

/* ---------- Konto-Rahmen ---------- */
/* Inhaltsbreite wie rasenprofi.de: höchstens 1270 px, außen mindestens 20 px (Handy 16 px). Header-Fläche bleibt volle Breite, sein Inhalt nicht */
:root{--content:1270px;--side:max(20px,calc((100% - var(--content)) / 2));--bar-h:78px}
@media (max-width:600px){:root{--side:16px}}
.k-app{background:var(--bg)}
.shell{min-height:100svh;display:flex;flex-direction:column}
.appbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:clamp(16px,3vw,40px);height:var(--bar-h);padding:0 var(--side);background:var(--bg);border-bottom:1px solid var(--line)}
.appbar .logo{font-size:1.6rem}
.rail{display:flex;height:100%}
.rail-link{display:flex;align-items:center;gap:9px;height:100%;padding:0 14px;text-decoration:none;color:var(--fg-2);font-weight:700;font-size:1.04rem;position:relative;transition:color .15s}
.rail-link svg{width:21px;height:21px;flex:none;transition:color .15s}
/* Gelber Balken unter dem Reiter: fährt beim Hover aus, steht bei der aktuellen Seite */
.rail-link::after{content:"";position:absolute;left:14px;right:calc(100% - 14px);bottom:16px;height:4px;background:var(--acc);transition:right .25s var(--ease)}
.rail-link:hover{color:var(--fg)}
.rail-link:hover::after,.rail-link[aria-current]::after{right:14px}
.rail-link[aria-current]{color:var(--fg)}
.rail-link[aria-current] svg{color:var(--acc)}
.badge{min-width:20px;height:20px;padding:0 5px;display:inline-grid;place-items:center;background:var(--hot);color:#fff;font:800 .72rem/1 var(--f-body)}
.rail-link .badge{margin-left:2px}
.appbar-me{margin-left:auto;display:flex;text-decoration:none}
.appbar-me .av{--s:42px;transition:transform .15s var(--ease),outline-color .15s;outline:2px solid transparent;outline-offset:2px}
.appbar-me:hover .av{transform:translate(-2px,-2px);outline-color:var(--acc)}
.app-main{padding:36px var(--side) 80px;width:100%}
@media (max-width:1180px){.rail-link svg{display:none}.rail-link{padding:0 11px}.rail-link::after{left:11px;right:calc(100% - 11px)}.rail-link:hover::after,.rail-link[aria-current]::after{right:11px}}
@media (max-width:980px){.rail-link{font-size:.95rem;padding:0 9px}.appbar{gap:14px}}
.app-head{margin-bottom:26px;display:grid;gap:8px}
.app-head h1{font-size:clamp(2.2rem,6vw,3.6rem)}
.block{padding:24px 0;border-top:1px solid var(--line)}
.block-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.block-title{font-size:1.5rem;margin-bottom:16px;display:flex;align-items:center;gap:10px}
.empty{border:2px dashed var(--line-2);padding:22px;display:grid;gap:14px;justify-items:start;color:var(--fg-2)}
.danger summary{cursor:pointer;color:var(--fg-2);font-weight:600}
.danger summary:hover{color:var(--fg)}
.danger form{margin-top:16px}

/* Listen mit Personen */
.list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.list li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.who{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:0}
.who>span{display:grid;min-width:0}
.who b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who small{color:var(--muted);font-size:.85rem}
.who:hover b{color:var(--acc)}
.acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.search{display:flex;gap:10px;margin-bottom:16px}
.search input{flex:1;min-width:0}

/* ---------- Status ---------- */
.stories{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 12px;scrollbar-width:none;align-items:flex-start}
.story{flex:none;width:82px;display:grid;justify-items:center;gap:8px;background:none;border:0;color:var(--fg);cursor:pointer;padding:0;position:relative;font:inherit}
.story .av{outline:2px solid var(--line-2);outline-offset:3px;transition:outline-color .15s,transform .15s var(--ease)}
.story.new .av{outline:3px solid var(--acc)}
.story:hover .av{transform:translate(-2px,-2px)}
.story-name{font-size:.78rem;font-weight:600;max-width:82px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.story-plus{position:absolute;top:40px;left:52px;width:22px;height:22px;display:grid;place-items:center;background:var(--acc);color:var(--acc-ink);font:800 1rem/1 var(--f-body);border:2px solid var(--bg)}
.stories-empty{align-self:center;font-size:.9rem}
.composer{margin-top:14px;border:2px solid var(--line-2);padding:14px;display:grid;gap:12px;background:var(--bg-2)}
.composer:focus-within{border-color:var(--fg)}
.composer textarea{border:0;padding:0;resize:none;font:700 1.25rem/1.3 var(--f-display);background:transparent}
.composer-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.swatches{border:0;margin:0;padding:0;display:flex;gap:8px}
.swatches label{cursor:pointer}
.swatches input{position:absolute;opacity:0}
.swatches span{display:block;width:26px;height:26px;background:var(--c);border:2px solid var(--bg-2);outline:2px solid transparent}
.swatches input:checked+span{outline-color:var(--fg)}
.swatches input:focus-visible+span{outline:2px dashed var(--acc)}
.count{margin-left:auto;font:600 .78rem/1 var(--f-mono);color:var(--muted)}
.my-status{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.my-status li{border-left:6px solid var(--c);background:var(--bg-2);padding:12px 14px;display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center}
.my-status p{font:700 1.1rem/1.3 var(--f-display);grid-column:1/-1;overflow-wrap:anywhere}
.my-status small{color:var(--muted)}

/* Status-Ansicht (Vollbild) */
.viewer{position:fixed;inset:0;z-index:80;background:var(--vc,var(--acc));color:var(--acc-ink);display:grid;grid-template-rows:auto auto 1fr auto;padding:14px clamp(16px,5vw,60px) 20px}
.viewer[hidden]{display:none}
.viewer-bars{display:flex;gap:4px}
.viewer-bars i{flex:1;height:3px;background:rgb(10 10 10 / .25);position:relative;overflow:hidden}
.viewer-bars i b{position:absolute;inset:0;background:var(--acc-ink);transform-origin:left;transform:scaleX(0)}
.viewer-bars i.done b{transform:scaleX(1)}
.viewer-bars i.run b{animation:bar 5s linear forwards}
@keyframes bar{to{transform:scaleX(1)}}
.viewer-head{display:flex;align-items:center;gap:12px;margin-top:14px;font-weight:700}
.viewer-head small{font-weight:600;opacity:.7}
.viewer-head .av{outline:2px solid var(--acc-ink)}
.viewer-text{align-self:center;justify-self:center;max-width:16em;text-align:center;font:800 clamp(1.8rem,6vw,3.6rem)/1.05 var(--f-display);letter-spacing:-.015em;overflow-wrap:anywhere}
.viewer-zone{position:absolute;top:80px;bottom:80px;width:35%;background:none;border:0;cursor:pointer}
.viewer-zone.prev{left:0}
.viewer-zone.next{right:0;width:65%}
.viewer-foot{display:flex;gap:10px;justify-content:center;position:relative;z-index:1}
.viewer .btn.ghost{color:var(--acc-ink);border-color:var(--acc-ink)}
.viewer .btn.ghost:hover{background:var(--acc-ink);color:var(--vc,var(--acc))}

/* Plan auf der Startseite */
.plan-card{display:grid;gap:14px;border:2px solid var(--fg);padding:18px;text-decoration:none;transition:transform .15s var(--ease),border-color .15s}
.plan-card:hover{transform:translate(-3px,-3px);border-color:var(--acc)}
.plan-card>b{font:800 1.6rem/1 var(--f-display);letter-spacing:-.015em}
.plan-days{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.plan-days span{border-left:3px solid var(--line-2);padding:4px 12px;display:grid;gap:2px}
.plan-days i{font-style:normal;font-weight:700}
.plan-days small{color:var(--muted);font-size:.8rem}

/* ---------- Profil ---------- */
.avatar-edit{display:flex;gap:20px;align-items:center}
.avatar-edit>div{display:grid;gap:10px;justify-items:start}
.file-btn{position:relative;overflow:hidden}
.file-btn input{position:absolute;inset:0;opacity:0;cursor:pointer}
.goals{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.goals legend{margin-bottom:8px;padding:0}
.goals input{position:absolute;opacity:0}
.goals span{display:block;padding:9px 14px;border:2px solid var(--line-2);font-weight:600;cursor:pointer;transition:border-color .15s,background-color .15s,color .15s}
.goals label:hover span{border-color:var(--fg)}
.goals input:checked+span{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.goals input:focus-visible+span{outline:2px dashed var(--acc);outline-offset:2px}
.profile-hero{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;padding-bottom:26px}
.profile-hero h1{font-size:clamp(2rem,5vw,3rem)}
.facts{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;color:var(--fg-2);font-size:.9rem}
.bio{font-size:1.1rem;max-width:36em}

/* ---------- Chat ---------- */
.threads{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.threads a{display:flex;gap:14px;align-items:center;padding:14px 8px;border-bottom:1px solid var(--line);text-decoration:none;transition:background-color .15s}
.threads a:hover{background:var(--bg-2)}
.t-main{display:grid;min-width:0;flex:1}
.t-main small{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.threads a.unread .t-main small{color:var(--fg)}
.t-side{display:grid;justify-items:end;gap:6px;color:var(--muted);font-size:.8rem}
.chat{display:grid;grid-template-rows:auto 1fr auto;height:calc(100svh - var(--bar-h) - 36px - 24px);margin:-12px 0 -56px}
.chat-head{display:flex;align-items:center;gap:14px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.back{text-decoration:none;font-size:1.4rem;line-height:1;padding:6px 10px;border:2px solid var(--line-2)}
.back:hover{border-color:var(--fg)}
.msgs{list-style:none;margin:0;padding:18px 0;overflow-y:auto;display:flex;flex-direction:column;gap:6px;overscroll-behavior:contain}
.msg{max-width:min(78%,520px);align-self:flex-start;background:var(--bg-3);border:1px solid var(--line-2);padding:9px 12px 6px}
.msg.mine{align-self:flex-end;background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.msg p{overflow-wrap:anywhere;white-space:pre-wrap}
.msg small{display:block;text-align:right;font-size:.7rem;opacity:.65;margin-top:2px}
.msg.new{animation:pop .25s var(--ease)}
@keyframes pop{from{transform:translateY(8px);opacity:0}}
.day{align-self:center;font:600 .72rem/1 var(--f-mono);color:var(--muted);padding:12px 0 6px}
.chat-form{display:flex;gap:10px;padding-top:12px;border-top:1px solid var(--line);align-items:flex-end}
.chat-form textarea{flex:1;resize:none;max-height:160px;min-height:48px}

/* ---------- Pläne ---------- */
.plans{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.plans a{display:grid;gap:4px;padding:16px 18px;border:2px solid var(--line-2);text-decoration:none;transition:border-color .15s,transform .15s var(--ease)}
.plans a:hover{border-color:var(--fg);transform:translate(-2px,-2px)}
.plans li.active>a{border-color:var(--acc)}
.plans b{font:800 1.3rem/1.1 var(--f-display)}
.plans small{color:var(--muted)}
.plans i{font-style:normal;color:var(--acc)}
.tpls{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.tpl{display:grid;gap:6px;align-content:start;text-align:left;padding:16px;background:var(--bg-2);border:2px solid var(--line-2);color:var(--fg);font:inherit;cursor:pointer;transition:border-color .15s,transform .15s var(--ease)}
.tpl:hover{border-color:var(--acc);transform:translate(-2px,-2px)}
.tpl b{font:800 1.15rem/1.1 var(--f-display)}
.tpl small{color:var(--fg-2);font-size:.85rem}
.tpl span{font:600 .75rem/1 var(--f-mono);color:var(--acc);margin-top:4px}

.plan-editor{display:grid;gap:18px}
.pe-head{display:grid;gap:8px}
.plan-editor .pe-name{font:800 clamp(1.8rem,5vw,2.8rem)/1 var(--f-display);letter-spacing:-.015em;border:0;border-bottom:2px solid var(--line-2);padding:6px 0;background:transparent}
.plan-editor .pe-note{border:0;border-bottom:1px solid var(--line);padding:8px 0;color:var(--fg-2);background:transparent}
.pe-days{display:grid;gap:16px}
.pe-day{border:2px solid var(--line-2);background:var(--bg-2)}
.pe-day-head{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line)}
.plan-editor .pe-day-name{border:0;background:transparent;font:800 1.2rem/1.2 var(--f-display);padding:6px 0;flex:1;min-width:0}
.pe-day-head small{color:var(--muted);font-size:.8rem;white-space:nowrap}
.icon-btn{flex:none;width:36px;height:36px;display:grid;place-items:center;background:none;border:1px solid var(--line-2);color:var(--fg-2);cursor:pointer;font:700 1rem/1 var(--f-body)}
.icon-btn:hover{border-color:var(--fg);color:var(--fg)}
.icon-btn.del:hover{border-color:var(--hot);color:var(--hot)}
.pe-add{margin:8px 12px 12px;background:none;border:1px dashed var(--line-2);color:var(--fg-2);padding:10px;width:calc(100% - 24px);font:600 .9rem/1 var(--f-body);cursor:pointer}
.pe-add:hover{border-color:var(--acc);color:var(--fg)}
.pe-add-day{justify-self:start}
.pe-bar{position:sticky;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:14px 0;background:var(--bg);border-top:1px solid var(--line);z-index:5}
.pe-bar .btn{margin-left:auto}

/* ---------- Handy: Insel unten (4 Bereiche + Mehr, klappt nach oben auf) ---------- */
.island,.island-back{display:none}
@media (max-width:860px){
  :root{--bar-h:60px}
  .appbar .logo{font-size:1.45rem}
  .rail,.appbar-admin{display:none}
  .island-back{display:block;position:fixed;inset:0;z-index:44;background:rgb(0 0 0 / .6);opacity:0;pointer-events:none;transition:opacity .25s}
  .island-back.on{opacity:1;pointer-events:auto}
  .island{display:block;position:fixed;left:50%;bottom:calc(12px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(460px,calc(100% - 24px));z-index:45;
    background:var(--bg-2);border:2px solid var(--line-2);box-shadow:6px 6px 0 rgb(0 0 0 / .85);transition:border-color .2s}
  .island.open{border-color:var(--acc)}
  .island-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--ease)}
  .island.open .island-more{grid-template-rows:1fr}
  .island-more>div{overflow:hidden;min-height:0}
  .island-more ul{list-style:none;margin:0;padding:6px 0;border-bottom:1px solid var(--line)}
  .island-more a{display:flex;align-items:center;gap:14px;padding:14px 18px;color:var(--fg);text-decoration:none;font:700 1.08rem/1 var(--f-body);transition:background-color .15s}
  .island-more a:hover{background:var(--bg-3)}
  .island-more a svg{width:22px;height:22px;flex:none;color:var(--fg-2)}
  .island-more a[aria-current]{color:var(--acc)}
  .island-more a[aria-current] svg{color:var(--acc)}
  .island-more .badge{margin-left:auto}
  .island-bar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
  .island-link{position:relative;display:grid;justify-items:center;align-content:center;gap:5px;min-height:62px;padding:8px 2px;background:none;border:0;color:var(--fg-2);text-decoration:none;font:700 .74rem/1 var(--f-body);cursor:pointer;transition:color .15s}
  .island-link svg{width:24px;height:24px}
  .island-link::before{content:"";position:absolute;top:-2px;left:28%;right:28%;height:4px;background:var(--acc);transform:scaleX(0);transition:transform .2s var(--ease)}
  .island-link:hover{color:var(--fg)}
  .island-link[aria-current],.island-link.cur{color:var(--fg)}
  .island-link[aria-current] svg,.island-link.cur svg{color:var(--acc)}
  .island-link[aria-current]::before,.island-link.cur::before{transform:none}
  .island-link .dot{position:absolute;top:10px;left:calc(50% + 9px);width:10px;height:10px;background:var(--hot);border:2px solid var(--bg-2)}
  .island-toggle .i-x{display:none}
  .island.open .island-toggle .i-x{display:block}
  .island.open .island-toggle .i-menu{display:none}
  .island.open .island-toggle{color:var(--acc)}
  .is-focus .island,.is-focus .island-back{display:none}
  .app-main{padding:22px var(--side) 110px}
  .chat{height:calc(100svh - var(--bar-h) - 22px - 90px - env(safe-area-inset-bottom));margin:-6px 0 -110px}
  .profile-hero{grid-template-columns:auto 1fr}
  .profile-hero .acts{grid-column:1/-1;justify-content:flex-start}
  .av.xl{--s:84px}
}
@media (max-width:600px){
  .site-main{padding-top:96px}
  .avatar-edit{gap:14px}
  .msg{max-width:88%}
}
@media (prefers-reduced-motion:reduce){
  .viewer-bars i.run b{animation-duration:0s}
  .msg.new,.drop-in,.picker-sheet,.pk-tile{animation:none}
}
.logout-form{margin-top:22px}

/* ---------- Trainingstagebuch ---------- */
.plan-go{margin-top:14px}
.wo-running{display:grid;gap:4px;padding:16px 18px;margin-bottom:14px;background:var(--acc);color:var(--acc-ink);text-decoration:none;border:2px solid var(--acc);transition:transform .15s var(--ease)}
.wo-running:hover{transform:translate(-3px,-3px)}
.wo-running span{font:600 .78rem/1 var(--f-mono)}
.wo-running b{font:800 1.6rem/1.05 var(--f-display);letter-spacing:-.015em}
.wo-running i{font-style:normal;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.wo-start{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:12px}
.tpl.free{border-style:dashed;background:transparent}
.wo-history{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.wo-history a{display:flex;gap:16px;align-items:center;padding:12px 8px;border-bottom:1px solid var(--line);text-decoration:none;transition:background-color .15s}
.wo-history a:hover{background:var(--bg-2)}
.wo-date{display:grid;justify-items:center;width:52px;padding:6px 0;border:2px solid var(--line-2);flex:none}
.wo-date b{font:800 1.3rem/1 var(--f-display)}
.wo-date small{font:600 .7rem/1 var(--f-mono);color:var(--muted);margin-top:2px}
.wo-main{display:grid;min-width:0}
.wo-main small{color:var(--muted)}
.wo-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:2px solid var(--fg);margin-bottom:8px}
.wo-stats div{display:grid;padding:14px 16px}
.wo-stats div+div{border-left:2px solid var(--fg)}
.wo-stats b{font:800 clamp(1.4rem,4vw,2.2rem)/1 var(--f-display);font-variant-numeric:tabular-nums;white-space:nowrap}
.wo-stats small{font:600 .72rem/1 var(--f-mono);color:var(--muted);margin-top:6px}
.wo-sum{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.wo-sum li{display:grid;gap:8px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.wo-sum span{display:flex;flex-wrap:wrap;gap:6px}
.wo-sum i{font-style:normal;font:600 .85rem/1 var(--f-mono);padding:6px 8px;border:1px solid var(--line-2)}
.pr{display:inline-block;font:700 .7rem/1 var(--f-mono);padding:4px 6px;background:var(--hot);color:#fff;vertical-align:middle}

.wo-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:18px}
.wo-head h1{font-size:clamp(2rem,6vw,3.2rem)}
.wo-clock{font:800 1.6rem/1 var(--f-display);font-variant-numeric:tabular-nums;border:2px solid var(--fg);padding:8px 12px}
.wo-list{display:grid;gap:16px}
.wo-ex{border:2px solid var(--line-2);background:var(--bg-2)}
.wo-ex-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;padding:14px 14px 4px}
.wo-ex-head h2{font-size:1.4rem;line-height:1.1}
.wo-ex-head small{color:var(--muted);font-size:.82rem}
.wo-last{padding:0 14px 10px;font:600 .78rem/1.4 var(--f-mono);color:var(--fg-2);border-bottom:1px solid var(--line)}
.wo-finish{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}
/* Satzpause: Leiste unten, Fortschritt als Oberkante, Inhalt auf Inhaltsbreite */
.pause{position:fixed;left:0;right:0;bottom:0;z-index:45;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px var(--side);background:var(--bg-2);border-top:1px solid var(--line);transition:background-color .3s}
.pause[hidden]{display:none}
.pause-bar{position:absolute;left:0;right:0;top:-1px;height:3px;overflow:hidden}
.pause-bar i{position:absolute;inset:0;background:var(--acc);transform-origin:left;transition:transform .25s linear}
.pause-time{display:flex;align-items:baseline;gap:14px;min-width:0}
.pause-label{font:600 .78rem/1 var(--f-mono);color:var(--muted)}
.pause b{font:800 2.2rem/1 var(--f-display);font-variant-numeric:tabular-nums;color:var(--acc)}
.pause-acts{display:flex;gap:8px}
.pause-btn{height:44px;padding:0 18px;border:2px solid var(--line-2);background:transparent;color:var(--fg);font:700 .9rem/1 var(--f-body);cursor:pointer;white-space:nowrap;transition:border-color .15s,background-color .15s,color .15s}
.pause-btn:hover{border-color:var(--fg);background:var(--fg);color:var(--bg)}
.pause-btn.go{border-color:var(--acc);color:var(--acc)}
.pause-btn.go:hover{background:var(--acc);color:var(--acc-ink)}
.pause.over{background:var(--acc)}
.pause.over .pause-label,.pause.over b{color:var(--acc-ink)}
.pause.over .pause-btn{border-color:var(--acc-ink);color:var(--acc-ink)}
.wo{padding-bottom:84px}
@media (max-width:860px){
  .pause{bottom:calc(90px + env(safe-area-inset-bottom))}
}
@media (max-width:600px){
  .wo-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wo-stats div:nth-child(3){border-left:0}
  .wo-stats div:nth-child(n+3){border-top:2px solid var(--fg)}
  .wo-head{align-items:flex-start}
  .wo-clock{font-size:1.2rem}
}

/* ---------- Übungs-Icons ---------- */
.ex-ico{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:miter;stroke-linecap:square}
.ex-badge{flex:none;width:44px;height:44px;display:grid;place-items:center;background:var(--bg);border:2px solid var(--line-2);color:var(--acc)}
.drop-in{animation:pop .3s var(--ease)}

/* ---------- Übungsauswahl (fährt von unten hoch) ---------- */
.picker{position:fixed;inset:0;z-index:90;display:grid;align-items:end;justify-items:center}
.picker[hidden]{display:none}
.picker-back{position:absolute;inset:0;background:rgb(0 0 0 / .7);opacity:0;transition:opacity .3s}
.picker-sheet{position:relative;width:min(760px,100%);max-height:min(86svh,760px);display:grid;grid-template-rows:auto auto auto 1fr;background:var(--bg);border:2px solid var(--fg);border-bottom:0;
  transform:translateY(100%);transition:transform .32s var(--ease)}
.picker-sheet::before{content:"";position:absolute;left:0;right:0;top:-2px;height:4px;background:var(--acc);transform-origin:left;transform:scaleX(0);transition:transform .5s .12s var(--ease)}
.picker.open .picker-back{opacity:1}
.picker.open .picker-sheet{transform:none}
.picker.open .picker-sheet::before{transform:scaleX(1)}
.picker-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 18px 12px}
.picker-head h2{font-size:1.6rem}
.picker-search{margin:0 18px;background:var(--bg-2);color:var(--fg);border:2px solid var(--line-2);padding:14px 16px;font:600 1.05rem/1.2 var(--f-body)}
.picker-search:focus{outline:0;border-color:var(--acc)}
.picker-groups{display:flex;gap:8px;overflow-x:auto;padding:14px 18px;scrollbar-width:none}
.chip{flex:none;background:transparent;color:var(--fg-2);border:2px solid var(--line-2);padding:8px 14px;font:700 .85rem/1 var(--f-body);cursor:pointer;transition:border-color .15s,background-color .15s,color .15s}
.chip:hover{border-color:var(--fg);color:var(--fg)}
.chip[aria-pressed="true"]{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.picker-grid{overflow-y:auto;overscroll-behavior:contain;padding:4px 18px calc(22px + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;align-content:start}
.pk-tile{display:grid;gap:6px;justify-items:start;text-align:left;padding:14px;background:var(--bg-2);border:2px solid var(--line-2);color:var(--fg);font:inherit;cursor:pointer;
  transition:border-color .15s,transform .15s var(--ease),background-color .15s}
.picker.open .pk-tile{animation:tile-in .35s var(--ease) both;animation-delay:calc(var(--i) * 18ms + 80ms)}
@keyframes tile-in{from{opacity:0;transform:translateY(14px)}}
.pk-tile:hover{border-color:var(--acc);transform:translate(-2px,-2px)}
.pk-tile:active{transform:scale(.97)}
.pk-ico{width:48px;height:48px;display:grid;place-items:center;border:2px solid var(--line-2);color:var(--acc);margin-bottom:4px;transition:background-color .15s,color .15s,border-color .15s}
.pk-tile:hover .pk-ico{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.pk-tile b{font:800 1rem/1.15 var(--f-display);letter-spacing:-.01em}
.pk-tile small{font:600 .72rem/1 var(--f-mono);color:var(--muted)}
.pk-tile.own{border-style:dashed;border-color:var(--acc)}

/* ---------- Zahlenfeld zum Wischen ---------- */
.spin{display:grid;grid-template-columns:30px minmax(0,1fr) 30px;align-items:stretch;border:2px solid var(--line-2);background:var(--bg);min-width:0;transition:border-color .15s}
.spin:focus-within,.spin.drag{border-color:var(--acc)}
.spin-btn{background:none;border:0;color:var(--fg-2);font:700 1.2rem/1 var(--f-body);cursor:pointer;padding:0;transition:color .15s,background-color .15s}
.spin-btn:hover{color:var(--acc-ink);background:var(--acc)}
.spin-box{display:flex;align-items:baseline;justify-content:center;gap:4px;padding:8px 2px;cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none;min-width:0}
.spin-val{width:100%;min-width:0;max-width:5ch;border:0;background:transparent;color:var(--fg);font:800 1.2rem/1 var(--f-display);text-align:right;font-variant-numeric:tabular-nums;padding:0;cursor:inherit}
.spin-val:focus{outline:0;cursor:text}
.spin-unit{font:600 .68rem/1 var(--f-mono);color:var(--muted);white-space:nowrap}
.spin.drag .spin-val{color:var(--acc)}

/* ---------- Tagebuch: Sätze ---------- */
.wo-progress{height:4px;background:var(--line);margin:-6px 0 20px;overflow:hidden}
.wo-progress i{display:block;height:100%;background:var(--acc);transform-origin:left;transform:scaleX(0);transition:transform .4s var(--ease)}
.wo-ex-head{display:flex;gap:12px;align-items:center;padding:14px 14px 6px}
.wo-ex-title{flex:1;min-width:0}
.wo-ex-head .del{align-self:flex-start}
.wo-set{display:grid;grid-template-columns:26px minmax(0,1fr) minmax(0,1fr) 84px;gap:8px;align-items:center;padding:8px 14px;border-bottom:1px solid var(--line);position:relative;transition:background-color .25s}
.wo-n{font:800 1.1rem/1 var(--f-display);color:var(--muted);text-align:center}
.wo-done{min-height:48px;border:2px solid var(--fg);background:transparent;color:var(--fg);font:700 .9rem/1 var(--f-body);cursor:pointer;transition:background-color .15s,color .15s,transform .1s}
.wo-done:hover{background:var(--fg);color:var(--bg)}
.wo-done:active{transform:scale(.94)}
.wo-set.done{background:rgb(215 255 58 / .07)}
.wo-set.done .wo-n{color:var(--acc)}
.wo-set.done .wo-done{background:var(--acc);border-color:var(--acc);color:var(--acc-ink);font-size:1.25rem;animation:done-pop .3s var(--ease)}
@keyframes done-pop{40%{transform:scale(1.08)}}
.wo-set.done .spin{border-color:rgb(215 255 58 / .35)}
.wo-set .pr{position:absolute;left:40px;top:-9px;animation:pop .3s var(--ease)}
/* Zeitübungen: ohne Gewicht nimmt die Dauer beide Spalten ein, der Timer steht als eigene Zeile darunter */
.wo-set.m-t .wo-amount,.wo-set.m-c .wo-amount{grid-column:2/4}
.wo-timer{grid-column:2/-1;position:relative;overflow:hidden;min-height:46px;display:flex;align-items:center;justify-content:center;gap:10px;background:transparent;border:2px solid var(--line-2);color:var(--fg);font:700 .95rem/1 var(--f-body);cursor:pointer;transition:border-color .15s,background-color .15s,color .15s}
.wo-timer::before{content:"";width:0;height:0;border-left:11px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent}
.wo-timer:hover{border-color:var(--acc);color:var(--acc)}
.wo-timer span{position:relative}
.wo-timer-bar{position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .1s linear}
.wo-timer.run{border-color:var(--acc);color:var(--fg);background:var(--bg-3)}
.wo-timer.run::before{border:0;width:10px;height:12px;border-left:4px solid var(--acc);border-right:4px solid var(--acc)}
.wo-timer.ready .wo-timer-bar{transform:scaleX(1);opacity:.35}
.wo-add{display:block;width:100%;margin-top:16px;padding:16px;background:transparent;color:var(--fg);border:2px dashed var(--line-2);font:700 1rem/1 var(--f-body);cursor:pointer;transition:border-color .15s,color .15s}
.wo-add:hover{border-color:var(--acc);color:var(--acc)}

/* ---------- Umschalter (Pause usw.) ---------- */
.seg{display:flex;border:2px solid var(--line-2)}
.seg button{background:none;border:0;color:var(--fg-2);padding:0 10px;font:700 .8rem/1 var(--f-body);cursor:pointer;white-space:nowrap;transition:background-color .15s,color .15s}
.seg button+button{border-left:1px solid var(--line-2)}
.seg button:hover{color:var(--fg);background:var(--bg-3)}
.seg button[aria-pressed="true"]{background:var(--acc);color:var(--acc-ink)}
.plan-editor .pe-day-name{border:0}
@media (max-width:700px){
  .seg button{flex:1;padding:10px 4px}
}
@media (max-width:600px){
  .wo-set{grid-template-columns:20px minmax(0,1fr) minmax(0,1fr) 58px;gap:6px;padding:8px 10px}
  .spin{grid-template-columns:24px minmax(0,1fr) 24px}
  .spin-val{font-size:1.05rem}
  .spin-unit{font-size:.6rem}
  .wo-done{min-height:46px;font-size:.8rem}
  .ex-badge{width:38px;height:38px}
  .picker-sheet{max-height:92svh}
  .picker-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .picker-head,.picker-groups{padding-left:14px;padding-right:14px}
  .picker-search{margin:0 14px}
  .picker-grid{padding-left:14px;padding-right:14px}
}
.plan-editor .spin-val{border:0;padding:0;background:transparent;font:800 1.2rem/1 var(--f-display)}
.pk-ico .ex-ico{width:28px;height:28px}
.picker-sheet{grid-template-columns:minmax(0,1fr)}
.pk-tile{min-width:0}
.pk-tile b{overflow-wrap:anywhere;hyphens:auto;-webkit-hyphens:auto}
.spin-val{max-width:7ch}

/* ---------- Dashboard ---------- */
.dash-hi{font:600 1.05rem/1.2 var(--f-body);color:var(--fg-2)}
.dash-hi b{color:var(--acc)}
.dash-q{display:grid;font-size:clamp(2.2rem,6.4vw,4rem);line-height:1;max-width:16em}
.dash-q>span{grid-area:1/1}
.dash-q .ghost{visibility:hidden}
.caret{display:inline-block;width:.09em;height:.85em;margin-left:.06em;background:var(--acc);vertical-align:-.06em}
.caret.idle{animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.dash-week{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.dash-week li{display:grid;justify-items:center;gap:4px;padding:8px 2px;border:2px solid var(--line);min-width:0;text-align:center}
.dash-week span{font:600 .7rem/1 var(--f-mono);color:var(--muted)}
.dash-week b{font:800 1.15rem/1 var(--f-display)}
.dash-week small{font-size:.62rem;color:var(--fg-2);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-height:1em}
.dash-week li.today{border-color:var(--fg)}
.dash-week li.done{background:var(--acc);border-color:var(--acc)}
.dash-week li.done span,.dash-week li.done b,.dash-week li.done small{color:var(--acc-ink)}
.dash-week li.missed small{color:var(--hot)}
.dash-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);padding-top:12px}
.dash-stats div{display:grid;gap:4px}
.dash-stats b{font:800 1.5rem/1 var(--f-display);white-space:nowrap}
.dash-stats small{font:600 .68rem/1.2 var(--f-mono);color:var(--muted)}
.dash-bests{list-style:none;margin:0;padding:0;display:grid}
.dash-bests li{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
.dash-bests b{flex:1;min-width:0;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-bests i{font:800 1.1rem/1 var(--f-display);font-style:normal;color:var(--acc)}
.pe-mode{border:0;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.pe-mode legend{font:600 .8rem/1.2 var(--f-mono);color:var(--fg-2);margin-bottom:8px;padding:0}
.pe-mode label{cursor:pointer}
.pe-mode input{position:absolute;opacity:0}
.pe-mode span{display:grid;gap:4px;height:100%;padding:12px 14px;border:2px solid var(--line-2);transition:border-color .15s,background-color .15s}
.pe-mode b{font:800 1rem/1.1 var(--f-display)}
.pe-mode small{font-size:.8rem;color:var(--muted)}
.pe-mode label:hover span{border-color:var(--fg)}
.pe-mode input:checked+span{border-color:var(--acc);background:rgb(215 255 58 / .08)}
.pe-mode input:checked+span b{color:var(--acc)}
.pe-mode input:focus-visible+span{outline:2px dashed var(--acc);outline-offset:2px}
.pe-weekdays{display:flex;flex-wrap:wrap;gap:6px}
.pe-weekdays .chip{padding:7px 10px;min-width:40px}
@media (max-width:760px){
  .pe-mode{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  .dash-week small{display:none}
  .dash-stats b{font-size:1.2rem}
}
.plan-editor .pe-mode input{position:absolute;opacity:0;width:1px;height:1px;padding:0;border:0}
.pe-weekdays .chip{flex:1 1 0;min-width:0;padding:8px 0;text-align:center}
/* Breite nutzen: auf großen Bildschirmen stehen Tage und Übungen nebeneinander, Formulare bleiben lesbar schmal */
.k-site .bar{padding-left:var(--side);padding-right:var(--side)}
.site-main{padding-left:var(--side);padding-right:var(--side)}
.app-main .form,.app-main .search,.app-main .avatar-edit,.app-main .goals{max-width:640px}
.wo-list{grid-template-columns:repeat(auto-fill,minmax(min(100%,480px),1fr));align-items:start}
.k-site .foot,.k-app .foot{padding-left:var(--side);padding-right:var(--side)}
@media (max-width:600px){.pause{padding:10px 16px;gap:10px}.pause b{font-size:1.8rem}.pause-label{display:none}.pause-btn{height:42px;padding:0 14px}}
/* Zeit springt nach dem Zurückkommen: kurz ausblenden und an der richtigen Stelle wieder einblenden */
.pause b.sync{animation:pause-sync .45s var(--ease)}
@keyframes pause-sync{0%{opacity:0;filter:blur(6px);transform:translateY(6px)}100%{opacity:1;filter:none;transform:none}}
@media (prefers-reduced-motion:reduce){.pause b.sync{animation:none}}

/* ---------- Pläne: ⋯-Menü ---------- */
.plans li{position:relative}
.plans li>a{padding-right:64px}
.kebab{position:absolute;top:50%;right:10px;transform:translateY(-50%)}
.kebab summary{list-style:none;width:44px;height:44px;display:grid;place-items:center;border:2px solid transparent;cursor:pointer;font:800 1.4rem/1 var(--f-body);color:var(--fg-2);transition:border-color .15s,color .15s,background-color .15s}
.kebab summary::-webkit-details-marker{display:none}
.kebab summary:hover,.kebab[open] summary{border-color:var(--fg);color:var(--fg)}
.kebab[open] summary{background:var(--fg);color:var(--bg)}
.menu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:200px;display:grid;background:var(--bg);border:2px solid var(--fg);animation:menu-in .18s var(--ease)}
@keyframes menu-in{from{opacity:0;transform:translateY(-6px)}}
.menu>a,.menu button{display:block;width:100%;text-align:left;padding:12px 16px;background:none;border:0;border-bottom:1px solid var(--line);color:var(--fg);font:600 .92rem/1.2 var(--f-body);text-decoration:none;cursor:pointer;transition:background-color .12s,color .12s}
.menu>:last-child button,.menu>:last-child{border-bottom:0}
.menu form{display:block}
.menu>a:hover,.menu button:hover{background:var(--acc);color:var(--acc-ink)}
.menu .danger-item{color:var(--hot)}
.menu .danger-item:hover{background:var(--hot);color:#fff}
.import{display:grid;gap:8px;margin-top:22px}
.import label{font:600 .8rem/1.2 var(--f-mono);color:var(--fg-2)}

/* ---------- Teilen-Fenster ---------- */
.share .picker-sheet{grid-template-rows:auto 1fr;max-width:560px}
.share-body{display:grid;gap:14px;padding:0 18px 24px;overflow-y:auto}
.share-link{display:flex;border:2px solid var(--line-2)}
.share-link input{flex:1;min-width:0;background:var(--bg-2);color:var(--fg);border:0;padding:12px;font:600 .9rem/1.2 var(--f-mono)}
.share-link .btn{min-height:auto;border-width:0}
.share-h{font-size:1.1rem;margin-top:6px}
.share-friends{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.share-friends li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.share-friends small{color:var(--muted)}

/* ---------- Geteilter Plan ---------- */
.shared{display:grid;justify-items:center}
.shared-card{width:min(720px,100%);border:2px solid var(--fg);padding:clamp(18px,4vw,32px);display:grid;gap:14px;background:var(--bg-2);position:relative;animation:pop .35s var(--ease)}
.shared-card::before{content:"";position:absolute;left:-2px;right:-2px;top:-2px;height:4px;background:var(--acc)}
.shared-card h1{font-size:clamp(2rem,6vw,3rem)}
.shared-from{display:flex;align-items:center;gap:12px}
.shared-from span{display:grid}
.shared-from small{color:var(--muted)}
.shared-days{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.shared-days>div{border:1px solid var(--line-2);padding:12px;background:var(--bg)}
.shared-days b small{font:600 .7rem/1 var(--f-mono);color:var(--acc)}
.shared-days ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.shared-days li{display:flex;align-items:center;gap:8px;font-size:.9rem}
.shared-days li small{color:var(--muted);margin-left:auto;white-space:nowrap}
.shared-days .ex-badge{width:30px;height:30px;border-width:1px}
.shared-days .ex-ico{width:18px;height:18px}
.shared-acts{display:flex;flex-wrap:wrap;gap:12px 18px}
.plan-link{display:inline-block;margin:2px 0;padding:6px 10px;border:2px solid currentColor;font-weight:700;text-decoration:none}
.msg:not(.mine) .plan-link{color:var(--acc)}
.plan-link:hover{background:var(--fg);color:var(--bg)}
/* Normale Links im Chat: unterstrichen, auf dunkler Blase gelb, auf eigener (gelber) Blase dunkel */
.chat-link{color:inherit;font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;overflow-wrap:anywhere}
.msg:not(.mine) .chat-link{color:var(--acc)}
.msg:not(.mine) .chat-link:hover{color:var(--fg)}
.msg.mine .chat-link:hover{text-decoration-thickness:3px}
/* Karte mit offenem Menü liegt über den folgenden Karten */
.plans li.menu-open,.plans li:has(.kebab[open]){z-index:20}
.plans .menu>a{border:0;border-bottom:1px solid var(--line);padding:12px 16px;transform:none}

/* ---------- Admin ---------- */
.appbar-admin{margin-left:auto;position:relative;align-self:stretch;display:flex;align-items:center;padding:0 14px;color:var(--fg-2);font-weight:700;font-size:1.04rem;text-decoration:none;border:2px solid transparent}
.appbar-admin::after{content:"";position:absolute;left:14px;right:calc(100% - 14px);bottom:16px;height:4px;background:var(--hot);transition:right .25s var(--ease)}
.appbar-admin:hover,.appbar-admin[aria-current]{color:var(--fg)}
.appbar-admin:hover::after,.appbar-admin[aria-current]::after{right:14px}
.appbar-admin+.appbar-me{margin-left:0}
.appbar-me[aria-current] .av{outline-color:var(--acc)}
/* Social: Reiter Chats, Freunde, Anfragen */
.soc-tabs{display:flex;gap:4px;border-bottom:2px solid var(--line-2);margin-bottom:4px;overflow-x:auto;scrollbar-width:none}
.soc-tabs::-webkit-scrollbar{display:none}
.soc-tabs a{position:relative;display:flex;align-items:center;gap:8px;padding:12px 18px;color:var(--fg-2);font:700 1.05rem/1 var(--f-body);text-decoration:none;white-space:nowrap;transition:color .15s}
.soc-tabs a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:4px;background:var(--acc);transition:right .25s var(--ease)}
.soc-tabs a:hover{color:var(--fg)}
.soc-tabs a:hover::after,.soc-tabs a[aria-current]::after{right:0}
.soc-tabs a[aria-current]{color:var(--fg)}
.soc-tabs small{font:600 .75rem/1 var(--f-mono);color:var(--muted)}
.soc-panel{border-top:0}
.soc-sub{margin-top:24px}
.soc-filter{display:flex;gap:8px;margin-bottom:14px}
.soc-filter .chip{text-decoration:none}
.soc-filter .chip small{font:600 .72rem/1 var(--f-mono);margin-left:4px;color:var(--muted)}
.soc-filter .chip[aria-current]{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.soc-filter .chip[aria-current] small{color:var(--acc-ink)}
.soc-clear{font-size:.85rem;margin-left:auto}
.on-dot{display:inline-block;width:9px;height:9px;background:var(--acc);margin-left:6px;vertical-align:middle}
@media (max-width:600px){.soc-tabs a{padding:12px 12px;font-size:1rem}}
/* Feedback oben rechts: kleiner Rahmen-Knopf, schiebt Admin und Profilbild nach rechts */
.appbar-fb{margin-left:auto;display:flex;align-items:center;min-height:42px;padding:0 16px;border:2px solid var(--line-2);color:var(--fg);font-weight:700;font-size:.98rem;text-decoration:none;transition:border-color .15s,background-color .15s,color .15s}
.appbar-fb:hover,.appbar-fb[aria-current]{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.appbar-fb~.appbar-admin,.appbar-fb~.appbar-me{margin-left:0}
@media (max-width:860px){.appbar-fb{display:none}.appbar-fb~.appbar-me{margin-left:auto}}
/* Feedback: Dashboard-Hinweis, Formular, Bewertung 1 bis 5 */
.fb-form{max-width:640px}
.fb-rate{border:0;margin:0;padding:0;display:grid;gap:8px}
.fb-rate legend{font:600 .8rem/1.2 var(--f-mono);color:var(--fg-2);margin-bottom:8px;padding:0}
.fb-rate legend small{color:var(--muted);margin-left:6px}
.fb-scale{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;max-width:420px}
.fb-scale input{position:absolute;opacity:0;width:1px;height:1px}
.fb-scale span{display:grid;place-items:center;height:56px;border:2px solid var(--line-2);font:800 1.4rem/1 var(--f-display);cursor:pointer;transition:border-color .15s,background-color .15s,color .15s}
.fb-scale label:hover span{border-color:var(--fg)}
.fb-scale input:checked+span{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.fb-scale input:focus-visible+span{outline:2px dashed var(--acc);outline-offset:2px}
.fb-ends{display:flex;justify-content:space-between;max-width:420px;margin:0}
.fb-ends small{font:600 .72rem/1 var(--f-mono);color:var(--muted)}
.fb-thanks{display:grid;gap:14px;max-width:560px;padding:20px 0}
.fb-thanks h1{font-size:clamp(2.4rem,7vw,4rem)}
.fb-acts{display:flex;flex-wrap:wrap;gap:14px;margin:6px 0 0}
.support-bar{position:sticky;top:var(--bar-h);z-index:39;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px var(--side);background:var(--hot);color:#fff;font-weight:600}
.support-bar button{background:#fff;color:var(--bg);border:0;padding:8px 14px;font:700 .85rem/1 var(--f-body);cursor:pointer}
.support-bar button:hover{background:var(--bg);color:#fff}
@media (max-width:860px){.support-bar{font-size:.88rem}}
.adm-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:8px}
.adm-stats>*{display:grid;gap:4px;padding:14px 16px;border:2px solid var(--line-2);text-decoration:none;color:var(--fg);transition:border-color .15s}
.adm-stats a:hover{border-color:var(--fg)}
.adm-stats b{font:800 1.8rem/1 var(--f-display)}
.adm-stats small{font:600 .72rem/1.2 var(--f-mono);color:var(--muted)}
.adm-stats .warn{border-color:var(--hot)}
.adm-stats .warn b{color:var(--hot)}
.adm-filter{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto auto;gap:8px;align-items:center;margin-bottom:10px}
.adm-filter input,.adm-filter select{min-width:0;background:var(--bg);color:var(--fg);border:2px solid var(--line-2);padding:12px;font:600 .95rem/1.2 var(--f-body)}
.adm-filter input:focus,.adm-filter select:focus{outline:0;border-color:var(--acc)}
.adm-table{display:grid;border-top:1px solid var(--line)}
.adm-row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1.6fr) 110px 120px 80px minmax(0,1.2fr);gap:12px;align-items:center;padding:10px 8px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--fg);font-size:.92rem}
.adm-row.head{font:600 .72rem/1 var(--f-mono);color:var(--muted);padding-top:12px;padding-bottom:12px}
a.adm-row:hover{background:var(--bg-2)}
a.adm-row:hover b{color:var(--acc)}
.adm-who{display:flex;align-items:center;gap:10px;min-width:0}
.adm-who>span{display:grid;min-width:0}
.adm-who b,.adm-who small,.adm-mail{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-who small{color:var(--muted);font-size:.8rem}
.adm-mail{color:var(--fg-2)}
.adm-badges{display:flex;flex-wrap:wrap;gap:4px}
.badge-s{font:700 .68rem/1 var(--f-mono);font-style:normal;padding:4px 6px;border:1px solid var(--line-2);color:var(--fg-2)}
.badge-s.hot{background:var(--hot);border-color:var(--hot);color:#fff}
.badge-s.acc{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.badge-s.on{border-color:var(--acc);color:var(--acc)}
.adm-pages{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:16px}
.adm-log{list-style:none;margin:0;padding:0;display:grid}
.adm-log li{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:.92rem}
.adm-log small{font:600 .75rem/1.4 var(--f-mono);color:var(--muted)}
.adm-log a{color:var(--acc)}
.adm-user{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:center;margin-bottom:22px}
.adm-user h1{font-size:clamp(2rem,5vw,3rem)}
.adm-user .adm-badges{margin-top:8px}
.adm-facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:12px}
.adm-facts div{background:var(--bg);padding:12px 14px;display:grid;gap:4px}
.adm-facts small{font:600 .7rem/1 var(--f-mono);color:var(--muted)}
.adm-facts b{font-weight:700}
.adm-actions{display:flex;flex-wrap:wrap;gap:10px}
.adm-actions form{display:inline}
.adm-block{margin-bottom:18px}
@media (max-width:900px){
  .adm-filter{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .adm-filter input{grid-column:1/-1}
  .adm-row.head{display:none}
  .adm-row{grid-template-columns:minmax(0,1fr) auto;row-gap:4px}
  .adm-row>:nth-child(2){grid-column:1/-1;grid-row:2;font-size:.82rem}
  .adm-row>:nth-child(3),.adm-row>:nth-child(4),.adm-row>:nth-child(5){display:none}
  .adm-log li{grid-template-columns:minmax(0,1fr)}
}
.adm-facts{gap:8px;background:none;border:0}
.adm-facts div{border:1px solid var(--line-2)}

/* ---------- Stats ---------- */
.st-range{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:16px}
.st-range .chip{text-decoration:none}
.st-range .chip[aria-current]{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.st-range .muted{margin-left:6px}
.trend{font:700 .75rem/1 var(--f-mono);font-style:normal;color:var(--fg-2)}
.trend.up{color:var(--acc)}
.trend.down{color:var(--hot)}

/* Bühne: Körper mittig, beim Öffnen rutscht er nach links und das Panel fährt rechts rein */
.st-stage{display:flex;align-items:flex-start;gap:0;min-height:520px}
.st-body{flex:0 0 440px;max-width:100%;margin-left:calc((100% - 440px) / 2);transition:margin-left .55s var(--ease);position:sticky;top:90px}
.st-panel{flex:1 1 0;min-width:0;opacity:0;visibility:hidden;transform:translateX(40px);transition:opacity .4s,transform .5s var(--ease),visibility 0s .5s;display:grid;gap:16px;padding-left:32px}
.st-stage.is-open .st-body{margin-left:0}
.st-stage.is-open .st-panel{opacity:1;visibility:visible;transform:none;transition:opacity .4s .15s,transform .55s var(--ease) .1s,visibility 0s}
.st-other{display:block;margin:6px auto 0;background:none;border:1px dashed var(--line-2);color:var(--fg-2);padding:10px 14px;font:600 .85rem/1 var(--f-body);cursor:pointer}
.st-other:hover,.st-other.sel{border-style:solid;border-color:var(--acc);color:var(--fg)}
.st-other b{color:var(--acc);margin-left:6px}

/* Körper */
.sb{width:100%;height:auto;display:block;overflow:visible}
.sb-out polygon,.sb-out polyline{fill:none;stroke:var(--fg);stroke-width:1.6;stroke-linejoin:miter;opacity:.85;stroke-dasharray:1;stroke-dashoffset:0}
.sb-m{cursor:pointer;outline:none}
/* Grau als Grundzustand, Gelb nur bei Hover und Auswahl (keine Färbung nach Trainingsmenge) */
.sb-m polygon{fill:var(--bg-3);stroke:var(--line-2);stroke-width:1.5;stroke-linejoin:miter;transition:fill .2s,stroke .2s}
.sb-m.none polygon{stroke-dasharray:4 3}
.sb-m.hov polygon,.sb-m:focus-visible polygon{fill:var(--acc);fill-opacity:.85;stroke:var(--acc);stroke-dasharray:none}
.sb-m.sel polygon{fill:var(--acc);fill-opacity:1;stroke:var(--fg);stroke-width:2.5;stroke-dasharray:none}
.sb-c{cursor:pointer;outline:none}
.sb-c polyline{fill:none;stroke:var(--line-2);stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke .2s}
.sb-c rect{fill:var(--line-2);transition:fill .2s}
.sb-c text{fill:var(--fg-2);font:700 16px var(--f-body);transition:fill .15s}
.sb-c text.n{fill:var(--muted);font:600 12px var(--f-mono)}
.sb-c.none text{fill:var(--muted)}
.sb-c.hov text:not(.n),.sb-c:focus-visible text:not(.n),.sb-c.sel text:not(.n){fill:var(--acc)}
.sb-c.hov polyline,.sb-c.sel polyline{stroke:var(--acc)}
.sb-c.hov rect,.sb-c.sel rect{fill:var(--acc)}
.has-sel .sb-m:not(.sel),.has-sel .sb-c:not(.sel){opacity:.45}
.has-sel .sb-m,.has-sel .sb-c{transition:opacity .25s}

/* Panel */
.st-p-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.st-p-head h2{font-size:clamp(1.8rem,4vw,2.6rem)}
.st-p-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:2px solid var(--line-2)}
.st-p-kpis div{display:grid;gap:4px;padding:10px 14px}
.st-p-kpis div+div{border-left:2px solid var(--line-2)}
.st-p-kpis small{font:600 .7rem/1 var(--f-mono);color:var(--muted)}
.st-p-kpis b{font:800 1.35rem/1 var(--f-display)}
.st-ex{border:2px solid var(--line-2);background:var(--bg-2);padding:16px;display:grid;gap:10px}
.st-ex-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.st-ex-top>div:first-child{display:flex;align-items:center;gap:12px;min-width:0}
.st-ex-top h3{font-size:1.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-ex-val{display:grid;justify-items:end;gap:4px}
.st-ex-val b{font:800 1.5rem/1 var(--f-display);white-space:nowrap}
.st-ex-txt{color:var(--fg-2);margin:0}
.st-chart{width:100%;height:auto;display:block;overflow:visible}
.st-chart .g{stroke:var(--line-2);stroke-dasharray:4 6}
.st-chart .ax{fill:var(--muted);font:600 12px var(--f-mono)}
.st-chart .area{fill:var(--acc);fill-opacity:.12}
.st-chart .line{fill:none;stroke:var(--acc);stroke-width:3;stroke-linejoin:miter;stroke-dasharray:1;stroke-dashoffset:0}
.st-chart rect{fill:var(--bg);stroke:var(--acc);stroke-width:2}
.st-chart rect.pr{fill:var(--acc)}
.st-chart rect.peak{fill:var(--acc);stroke:var(--fg)}
.st-chart .peak-t{fill:var(--acc);font:800 15px var(--f-display)}

@keyframes sb-draw{from{stroke-dashoffset:1}}
@keyframes sb-in{from{opacity:0}}
@keyframes sb-up{from{opacity:0;transform:translateY(14px)}}
@media (prefers-reduced-motion:no-preference){
  .sb-out polygon,.sb-out polyline{animation:sb-draw 1.6s var(--ease) .2s both}
  .sb-m{animation:sb-in .5s var(--ease) both;animation-delay:calc(1s + var(--i) * .12s)}
  .sb-c polyline{animation:sb-draw .6s var(--ease) both;animation-delay:calc(1.5s + var(--i) * .12s)}
  .sb-c rect,.sb-c text{animation:sb-in .4s var(--ease) both;animation-delay:calc(1.7s + var(--i) * .12s)}
  .st-panel.in .st-ex{animation:sb-up .45s var(--ease) both;animation-delay:calc(.15s + var(--i) * .08s)}
  .st-panel.in .st-chart .line{animation:sb-draw 1.1s var(--ease) both;animation-delay:calc(.35s + var(--i) * .08s)}
  .st-panel.in .st-chart rect{animation:sb-in .3s both;animation-delay:calc(var(--d) + .5s)}
}
@media (max-width:900px){
  .st-stage{display:grid;gap:22px;min-height:0}
  .st-body{margin:0 auto;width:min(100%,440px);position:static}
  .st-panel{padding-left:0;transform:none;display:none}
  .st-stage.is-open .st-panel{display:grid}
}
@media (max-width:600px){
  .st-ex{padding:12px}
  .st-ex-top h3{font-size:1.05rem}
  .st-ex-val b{font-size:1.2rem}
  .st-p-kpis b{font-size:1.1rem}
}
@media (max-width:360px){.island-link{font-size:.68rem}.island-link svg{width:22px;height:22px}}
.adm-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}.adm-head>div{display:grid;gap:8px}
.has-sel .sb-m.hov,.has-sel .sb-c.hov{opacity:1}
/* Kennzahlen kompakt: eine schmale Zeile statt großer Kästen, damit Körper und Verlauf im Fokus bleiben */

/* Stats: Zusammenfassung als Satz */
.st-sum{margin:0 0 18px;color:var(--fg-2);font-size:1.05rem;line-height:1.6;max-width:60em}
.st-sum b{color:var(--fg);font-weight:800}
.st-sum b.acc{color:var(--acc)}
.st-sum .trend{margin-left:6px;font-size:.72rem}
/* Muskelgruppen als Leiste: nur am Handy und Tablet, leichter zu treffen als die Flächen */
.st-chips{display:none}
.st-chips .chip small{font:600 .68rem/1 var(--f-mono);color:var(--muted);margin-left:4px}
.st-chips .chip.sel{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.st-chips .chip.sel small{color:var(--acc-ink)}
@media (max-width:900px){
  .st-chips{display:flex;gap:6px;overflow-x:auto;padding:0 0 12px;scrollbar-width:none}
  .st-chips .chip{flex:none}
  .st-other{display:none}
}
/* Ohne Maus (Touch): Muskelgruppen deutlicher als anklickbar zeigen */
@media (hover:none),(max-width:900px){
  .sb-m polygon{fill:#262626;stroke:rgb(215 255 58 / .55);stroke-dasharray:4 3}
  .sb-m.none polygon{fill:#1c1c1c;stroke:var(--line-2)}
  .sb-c text{fill:var(--fg)}
  .sb-c polyline{stroke:var(--fg-2)}
  .sb-c rect{fill:var(--fg-2)}
  .sb-c.none text:not(.n){fill:var(--muted)}
}
@media (max-width:900px){.st-body{width:min(100%,380px)}}
.trend{white-space:nowrap}
@media (max-width:900px){.st-stage>.st-chips{grid-column:1/-1;margin-bottom:-8px}}

/* Stats: Körper von vorne und hinten, Drehen in 3D */
.sb-wrap{display:grid;gap:10px;perspective:1400px}
.sb-toggle{justify-self:center;display:flex;border:2px solid var(--line-2)}
.sb-toggle button{background:none;border:0;color:var(--fg-2);padding:8px 16px;font:700 .82rem/1 var(--f-body);cursor:pointer;transition:background-color .15s,color .15s}
.sb-toggle button+button{border-left:1px solid var(--line-2)}
.sb-toggle button:hover{color:var(--fg)}
.sb-toggle button[aria-pressed="true"]{background:var(--acc);color:var(--acc-ink)}
.sb-flip{position:relative;transform-style:preserve-3d;transition:transform .8s var(--ease)}
.sb-flip.is-back{transform:rotateY(180deg)}
.sb-flip .sb{-webkit-backface-visibility:hidden;backface-visibility:hidden}
.sb-flip .sb-back{position:absolute;inset:0;transform:rotateY(180deg)}
@media (prefers-reduced-motion:reduce){.sb-flip{transition:none}}
/* Unterreiter im Panel */
.st-tabs{display:flex;gap:6px;flex-wrap:wrap}
.st-tabs .chip small{font:600 .68rem/1 var(--f-mono);color:var(--muted);margin-left:5px}
.st-tabs .chip[aria-selected="true"]{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.st-tabs .chip[aria-selected="true"] small{color:var(--acc-ink)}
.st-tabs .chip.none{opacity:.55}
.st-ex-name{display:grid;gap:3px;min-width:0}
.st-ex-name small{font:600 .7rem/1 var(--f-mono);color:var(--muted)}
.wo-more{margin-top:14px;text-align:center}
/* Unterbereiche am Desktop etwas deutlicher abgegrenzt */
@media (hover:hover) and (min-width:901px){.sb-m polygon{fill:#1d1d1d;stroke:#4a4a4a}}

/* Plan-Editor: Fokus-Ansicht ohne Navigation, Reiter je Tag, schlanke Zeilen, Vorschläge, Schnellwahl */
.is-focus .rail,.is-focus .appbar-me,.is-focus .appbar-admin{display:none}
.is-focus .app-main{max-width:900px;margin-inline:auto;padding-left:20px;padding-right:20px;padding-bottom:0}
.pe-top{margin-bottom:14px}
.pe-links{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.plan-editor{gap:22px}
.pe-mode{grid-template-columns:repeat(2,minmax(0,1fr))}
.pe-mode span{padding:10px 12px}
.pe-mode input:not(:checked)+span small{opacity:.7}
.pe-days{display:grid;gap:0}
.pe-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -20px;padding:0 20px;scroll-behavior:smooth}
.pe-tabs::-webkit-scrollbar{display:none}
.pe-tab{flex:none;display:grid;gap:4px;justify-items:start;min-width:96px;padding:12px 16px 10px;background:transparent;border:2px solid var(--line-2);border-bottom:0;color:var(--fg-2);font:inherit;cursor:pointer;text-align:left;transition:color .15s,border-color .15s,background-color .15s}
.pe-tab b{font:800 1rem/1.1 var(--f-display);max-width:16ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pe-tab small{font:600 .68rem/1 var(--f-mono);color:var(--muted)}
.pe-tab:hover{color:var(--fg);border-color:var(--fg-2)}
.pe-tab[aria-selected="true"]{background:var(--bg-2);border-color:var(--acc);color:var(--fg)}
.pe-tab[aria-selected="true"] small{color:var(--acc)}
.pe-tab.add{border-style:dashed;justify-items:center;align-content:center;min-width:auto}
.pe-tab.add:hover{border-color:var(--acc);color:var(--acc)}
.pe-day{border:2px solid var(--acc);background:var(--bg-2);display:grid}
.pe-day-head{display:grid;gap:4px;padding:18px 18px 14px;border-bottom:1px solid var(--line)}
.plan-editor .pe-day-name{font:800 1.6rem/1.1 var(--f-display);padding:2px 0;border-bottom:2px solid transparent}
.plan-editor .pe-day-name:hover{border-bottom-color:var(--line-2)}
.plan-editor .pe-day-name:focus{border-bottom-color:var(--acc)}
.pe-day-head small{font:600 .75rem/1 var(--f-mono);color:var(--muted)}
.pe-wd{display:grid;gap:8px;padding:14px 18px;border-bottom:1px solid var(--line)}
.pe-wd>small{font:600 .75rem/1 var(--f-mono);color:var(--fg-2)}
.pe-rows{display:grid}
.pe-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 18px;background:none;border:0;border-bottom:1px solid var(--line);color:var(--fg);font:inherit;text-align:left;cursor:pointer;transition:background-color .15s}
.pe-row:hover{background:var(--bg-3)}
.pe-row:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
.pe-row .ex-badge{width:42px;height:42px}
.pe-row-name{display:grid;gap:4px;min-width:0}
.pe-row-name b{font:800 1.05rem/1.15 var(--f-display);overflow-wrap:anywhere}
.pe-row-name small,.pe-row-val small{font:600 .7rem/1 var(--f-mono);color:var(--muted)}
.pe-row-val{display:grid;gap:4px;justify-items:end;padding:8px 12px;border:2px solid var(--line-2);min-width:88px;transition:border-color .15s}
.pe-row-val b{font:800 1.1rem/1 var(--f-display);font-variant-numeric:tabular-nums;white-space:nowrap}
.pe-row:hover .pe-row-val{border-color:var(--fg)}
.pe-dyn:empty{display:none}
.pe-ask,.pe-sug{padding:18px;border-bottom:1px solid var(--line);display:grid;gap:12px}
.pe-ask h3,.pe-sug h3{font:800 1.15rem/1.15 var(--f-display)}
.pe-ask p{margin:-6px 0 0}
.pe-types{display:flex;flex-wrap:wrap;gap:8px}
.pe-types .chip{padding:11px 16px;font-size:.92rem}
.pe-types .chip:hover{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.pe-sug-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.pe-sug-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px;background:var(--bg);border:2px solid var(--line-2);touch-action:pan-y;user-select:none;-webkit-user-select:none;transition:transform .25s var(--ease),border-color .15s}
.pe-sug-card.drag{transition:none;cursor:grabbing}
.pe-sug-card.yes{border-color:var(--acc)}
.pe-sug-card.no{border-color:var(--hot)}
.pe-sug-name{display:grid;gap:4px;min-width:0}
.pe-sug-name b{font:800 1.1rem/1.15 var(--f-display)}
.pe-sug-name small{font:600 .7rem/1 var(--f-mono);color:var(--muted)}
.pe-sug-acts{display:flex;gap:8px}
.pe-sug-acts .btn{min-height:40px}
.pe-sug-more{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.pe-sug-more>small{font:600 .7rem/1 var(--f-mono);color:var(--muted);margin-right:2px}
.pe-sug-mini{display:inline-flex;align-items:center;gap:8px;padding:7px 10px;background:none;border:1px solid var(--line-2);color:var(--fg-2);font:600 .85rem/1 var(--f-body);cursor:pointer;transition:border-color .15s,color .15s}
.pe-sug-mini i{font-style:normal;font-weight:800;color:var(--acc)}
.pe-sug-mini:hover{border-color:var(--fg);color:var(--fg)}
.pe-day .pe-add{margin:16px 18px;width:calc(100% - 36px);padding:14px}
.pe-day-foot{display:flex;justify-content:space-between;gap:16px;padding:0 18px 16px}
.pe-day-foot .hot{margin-left:auto}
.pe-bar{padding:14px 0 calc(14px + env(safe-area-inset-bottom))}
.vs .picker-sheet{grid-template-rows:auto 1fr;max-width:560px}
.vs-body{overflow-y:auto;overscroll-behavior:contain;padding:0 18px calc(20px + env(safe-area-inset-bottom));display:grid;gap:12px;align-content:start}
.vs-h{font:600 .75rem/1 var(--f-mono);color:var(--fg-2);margin-top:6px}
.vs-presets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.vs-preset{min-height:58px;background:var(--bg-2);border:2px solid var(--line-2);color:var(--fg);font:inherit;cursor:pointer;transition:border-color .15s,background-color .15s,color .15s}
.vs-preset b{font:800 1.25rem/1 var(--f-display);font-variant-numeric:tabular-nums}
.vs-preset:hover{border-color:var(--fg)}
.vs-preset[aria-pressed="true"]{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.vs-own{display:grid;gap:8px}
.vs-own .vs-h{margin-top:6px}
.vs-own.on .spin{border-color:var(--acc)}
.vs-own.on .vs-h{color:var(--acc)}
.vs-hint{margin:0;font-size:.8rem;color:var(--muted);line-height:1.4}
.vs-ctl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.vs-ctl .spin-box{padding:12px 2px}
.vs-ctl .spin{grid-template-columns:40px minmax(0,1fr) 40px}
.vs-ctl .spin-btn{font-size:1.4rem}
.spin.noswipe .spin-box{cursor:text}
.vs-rest{display:flex}
.vs-rest button{flex:1;padding:12px 4px}
.vs-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;padding-top:14px;border-top:1px solid var(--line)}
.vs-act{background:none;border:1px solid var(--line-2);color:var(--fg-2);padding:9px 12px;font:600 .85rem/1 var(--f-body);cursor:pointer;transition:border-color .15s,color .15s}
.vs-act:hover{border-color:var(--fg);color:var(--fg)}
.vs-act.hot{margin-left:auto;color:var(--hot)}
.vs-act.hot:hover{border-color:var(--hot)}
.vs-done{width:calc(100% - 6px);margin-top:6px}
@media (max-width:600px){
  .is-focus .app-main{padding-left:16px;padding-right:16px}
  .pe-tabs{margin:0 -16px;padding:0 16px}
  .pe-mode{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px}
  .pe-mode input:not(:checked)+span small{display:none}
  .pe-day-head,.pe-wd,.pe-ask,.pe-sug{padding-left:14px;padding-right:14px}
  .pe-row{padding:12px 14px;gap:12px}
  .pe-row .ex-badge{width:36px;height:36px}
  .pe-row-val{min-width:0;padding:7px 9px}
  .pe-sug-card{grid-template-columns:auto minmax(0,1fr)}
  .pe-sug-acts{grid-column:1/-1}
  .pe-sug-acts .btn{flex:1}
  .pe-day .pe-add{margin:14px;width:calc(100% - 28px)}
  .pe-day-foot{padding:0 14px 14px}
  .vs-body{padding-left:14px;padding-right:14px}
}

/* Übungsübersicht /app/uebungen */
.exl-tools{position:sticky;top:var(--bar-h);z-index:5;background:var(--bg);padding:12px 0 14px;margin-bottom:6px;display:grid;gap:10px}
.exl-tools .search{margin:0}
.exl-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--side));padding:0 var(--side)}
.exl-chips::-webkit-scrollbar{display:none}
.exl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.exl-card{display:grid;grid-template-rows:auto 1fr auto auto;gap:18px;padding:26px 26px 24px;background:var(--bg-2);border:2px solid var(--line);transition:border-color .15s;min-width:0}
.exl-card:hover{border-color:var(--line-2)}
.exl-card[hidden],.exl-group[hidden]{display:none}
.exl-top{display:flex;gap:16px;align-items:center;min-width:0}
.exl-top>div{display:grid;gap:8px;min-width:0}
.exl-top .ex-badge{width:52px;height:52px}
.exl-card.done .ex-badge{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.exl-top h3{font:800 1.25rem/1.1 var(--f-display);letter-spacing:-.01em;overflow-wrap:anywhere;hyphens:auto;-webkit-hyphens:auto}
.exl-card p{margin:0}
.exl-tags{display:flex;flex-wrap:wrap;gap:6px}
.exl-tags span{font:600 .72rem/1 var(--f-mono);color:var(--fg-2);border:1px solid var(--line-2);padding:5px 7px}
.exl-desc{color:var(--fg-2);line-height:1.55}
.exl-more summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:.92rem;color:var(--fg);transition:color .15s}
.exl-more summary::-webkit-details-marker{display:none}
.exl-more summary::before{content:"+";width:22px;height:22px;display:grid;place-items:center;border:2px solid var(--line-2);font:700 .95rem/1 var(--f-mono);transition:background-color .15s,border-color .15s,color .15s}
.exl-more summary:hover::before{border-color:var(--fg)}
.exl-more[open] summary::before{content:"\2212";background:var(--fg);border-color:var(--fg);color:var(--bg)}
.exl-more p{margin-top:12px;color:var(--fg-2);line-height:1.55}
.exl-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:18px 6px 6px 0;border-top:1px solid var(--line)}
.exl-best{display:grid;gap:5px}
.exl-best small{font:600 .72rem/1 var(--f-mono);color:var(--muted)}
.exl-best b{font:800 1.15rem/1 var(--f-display);color:var(--acc)}
.exl-btn{min-height:40px;padding:9px 16px;font-size:.88rem}
@media (max-width:1100px){.exl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.exl-none{padding:24px 0}
.exl-note{margin-top:20px}
@media (max-width:700px){.exl-grid{grid-template-columns:1fr;gap:16px}.exl-card{padding:20px}}

/* ---------- Feinschliff nach dem Rundgang (Handy, Tablet) ---------- */
/* Kleine Text-Knöpfe und Fußzeilen-Links: größere Tippfläche, ohne das Layout zu verschieben */
.link-btn{padding:9px 0;margin:-9px 0}
.danger summary,.exl-more summary{padding:8px 0}
.sb-toggle button{min-height:38px;padding:8px 18px;font-size:.88rem}
/* Lesbare Mindestgröße für kleine Beschriftungen */
.dash-stats small,.st-chips .chip small,.st-tabs .chip small,.pe-tab small,.threads .t-side small,.fb-rate legend small,.badge-s{font-size:.74rem}
.dash-week small{font-size:.7rem}
.spin-unit{font-size:.68rem}
@media (max-width:600px){.spin-unit{font-size:.68rem}}
@media (max-width:360px){.island-link{font-size:.72rem}}
.wo-finish{flex-wrap:wrap}
.wo-finish .btn{white-space:nowrap;margin-left:auto}
/* Admin steckt am Handy in der Insel (spätere Admin-Regel setzt sonst display:flex) */
@media (max-width:860px){.appbar .appbar-admin{display:none}}
/* Sehr schmale Handys: Gewicht bekommt mehr Platz als Wiederholungen (z. B. 102,5), Knöpfe etwas schmaler */
@media (max-width:360px){
  .wo-set{grid-template-columns:18px minmax(0,1.3fr) minmax(0,1fr) 50px;gap:5px;padding:8px}
  .wo-set .spin{grid-template-columns:22px minmax(0,1fr) 22px}
  .wo-set .spin-val{font-size:1rem}
  .wo-done{font-size:.76rem}
}
/* Schmale Handys: Einheit unter die Zahl, damit Gewicht und Wiederholungen genug Platz haben */
@media (max-width:420px){
  .wo-set .spin-box{flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px 2px}
  .wo-set .spin-val{max-width:none;text-align:center}
  .wo-set .spin-unit{font-size:.66rem}
}

/* ---------- Dashboard: links Heute, Woche, Schnellzugriff, Bestwerte; rechts Status und Freunde ---------- */
.home{display:grid;grid-template-columns:minmax(0,1fr) minmax(290px,350px);gap:22px 34px;align-items:start}
.home-main{display:grid;gap:18px;min-width:0}
.home-side{display:grid;gap:16px;position:sticky;top:calc(var(--bar-h) + 18px);min-width:0}
.home-hero{display:grid;gap:10px;padding:6px 0 4px}
.home-note{display:block;text-decoration:none;margin:0}

/* Heute: die eine hervorgehobene Karte, oben läuft beim Laden ein gelber Balken ein */
.home-today{position:relative;display:grid;gap:16px;padding:22px 22px 20px;border:2px solid var(--fg);background:var(--bg-2)}
.home-today::before{content:"";position:absolute;left:-2px;right:-2px;top:-2px;height:5px;background:var(--acc);transform-origin:left;animation:ht-bar .7s .15s var(--ease) both}
@keyframes ht-bar{from{transform:scaleX(0)}}
.ht-head{display:grid;gap:6px;min-width:0}
.ht-head .block-title{margin:0;font-size:clamp(1.5rem,3vw,2rem)}
.ht-tag{display:inline-flex;align-items:center;gap:8px;justify-self:start;font:700 .74rem/1 var(--f-mono);color:var(--acc);letter-spacing:.02em}
.ht-meta{margin:0;color:var(--fg-2)}
.ht-meta b{color:var(--fg)}
.ht-ex{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.ht-ex li{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line-2);background:var(--bg);min-width:0;animation:ht-in .4s var(--ease) both;animation-delay:calc(var(--i) * 45ms + 250ms)}
@keyframes ht-in{from{transform:translateY(8px)}}
.ht-ex li>span:last-child{display:grid;gap:3px;min-width:0}
.ht-ex b{font-weight:700;line-height:1.15;overflow-wrap:anywhere;hyphens:manual}
.ht-ex small{font:600 .74rem/1 var(--f-mono);color:var(--muted)}
.ht-ex .ex-badge{width:34px;height:34px}
.ht-ex .ex-ico{width:20px;height:20px}
.ht-acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.ht-other{margin-left:auto}
.ht-pulse{width:9px;height:9px;background:var(--acc);animation:ht-pulse 1.4s ease-in-out infinite}
@keyframes ht-pulse{50%{opacity:.25}}
.home-today.is-live{border-color:var(--acc)}
/* Ruhetag: flache Leiste statt leerer Kasten */
.home-today.is-rest{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;padding:16px 20px;border-color:var(--line-2)}
.home-today.is-rest::before{background:var(--line-2)}
.home-today.is-rest .block-title{font-size:1.35rem}
.ht-moon{width:42px;height:42px;border:2px solid var(--line-2);position:relative;overflow:hidden}
.ht-moon::after{content:"";position:absolute;inset:9px;background:var(--fg-2);clip-path:polygon(0 0,62% 0,40% 22%,34% 50%,40% 78%,62% 100%,0 100%);animation:moon 3s ease-in-out infinite alternate}
@keyframes moon{to{transform:translateX(3px)}}
.home-today.is-empty{border-style:dashed;border-color:var(--line-2)}

/* Woche im Stil des Graphen auf der Startseite: Raster im Hintergrund, eine Säule je Tag, Schild mit dem Training darüber */
.wk{margin:0}
.wk-stage{position:relative;display:grid;grid-template-rows:auto 1fr;gap:10px;padding:20px 24px 16px;border:2px solid var(--fg);
  background:repeating-linear-gradient(0deg,transparent 0 35px,rgb(255 255 255 / .045) 35px 36px),repeating-linear-gradient(90deg,transparent 0 39px,rgb(255 255 255 / .03) 39px 40px),var(--bg-2)}
.wk-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.wk-head b{font:800 1.3rem/1 var(--f-display)}
.wk-head small{font:600 .74rem/1 var(--f-mono);color:var(--muted)}
.wk-days{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;height:250px}
.wk-day{position:relative;display:grid;grid-template-rows:1fr auto;min-width:0}
/* Spalte mit Grundlinie; die Säule wächst von unten */
.wk-col{position:relative;display:block;border-bottom:2px solid var(--line-2)}
.wk-bar{position:absolute;left:14%;right:14%;bottom:0;height:var(--h);transform-origin:bottom;animation:wk-grow .7s var(--ease) both;animation-delay:calc(var(--i) * 70ms + 150ms)}
@keyframes wk-grow{from{transform:scaleY(.12)}}
.is-done .wk-bar{background:linear-gradient(180deg,var(--acc),rgb(215 255 58 / .55));box-shadow:6px -6px 0 0 rgb(215 255 58 / .16)}
.is-plan .wk-bar{border:2px dashed var(--line-2);background:rgb(255 255 255 / .02)}
.is-missed .wk-bar{border:2px dashed var(--hot);background:rgb(255 77 31 / .06)}
.today .wk-col{background:linear-gradient(180deg,transparent 20%,rgb(215 255 58 / .07));border-bottom-color:var(--acc)}
/* Schild über der Säule: lange Namen brechen um statt abgeschnitten zu werden */
.wk-tag{position:absolute;left:50%;bottom:calc(var(--h) + 10px);transform:translateX(-50%);width:max-content;display:grid;gap:3px;justify-items:center;max-width:calc(100% + 14px);padding:5px 6px;background:var(--bg);border:1px solid var(--line-2);text-align:center}
.wk-tag b{font:800 .82rem/1.1 var(--f-display);overflow-wrap:anywhere;hyphens:manual}
.wk-tag small{font:600 .66rem/1 var(--f-mono);color:var(--muted)}
.is-done .wk-tag{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.is-done .wk-tag small{color:var(--acc-ink)}
.is-missed .wk-tag b,.is-missed .wk-tag small{color:var(--hot)}
.is-rest .wk-tag{display:none}
/* Tag und Datum unten, ganz vorne */
.wk-lbl{display:grid;justify-items:center;gap:3px;padding-top:8px}
.wk-lbl small{font:600 .72rem/1 var(--f-mono);color:var(--muted)}
.wk-lbl b{font:800 1.35rem/1 var(--f-display)}
.today .wk-lbl small{color:var(--acc)}
.is-done .wk-lbl b{color:var(--acc)}

/* Schnellzugriff: dezente Kacheln mit Icon */
.home-quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.home-quick a{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line-2);color:var(--fg);text-decoration:none;min-width:0;transition:border-color .15s,background-color .15s}
.home-quick a:hover{border-color:var(--acc);background:var(--bg-2)}
.home-quick svg{width:22px;height:22px;flex:none;color:var(--acc)}
.home-quick span{display:grid;gap:3px;min-width:0}
.home-quick b{font:800 .98rem/1.1 var(--f-display)}
.home-quick small{font-size:.76rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.home-card{border:2px solid var(--line-2);padding:18px;display:grid;gap:10px}
.home-card .block-title{margin:0}
.dash-bests .ex-badge{width:36px;height:36px}

/* Seitenleiste */
.side-box{border:2px solid var(--line-2);padding:16px;display:grid;gap:12px;min-width:0}
.side-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.side-title{font-size:1.2rem;margin:0}
.side-empty{margin:0}
.side-stories{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.side-stories .story{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;justify-items:stretch;padding:6px;text-align:left;border:1px solid transparent;transition:background-color .15s,border-color .15s}
.side-stories .story:hover{background:var(--bg-2);border-color:var(--line-2)}
.side-stories .story .av{--s:44px;outline:0;transform:none}
.story-ring{position:relative;display:block;padding:4px;border:2px solid var(--line-2)}
/* Neuer Status: Rahmen aus laufenden Strichen */
.story.new .story-ring{border-color:transparent;
  background:linear-gradient(90deg,var(--acc) 50%,transparent 0) repeat-x 0 0/10px 3px,linear-gradient(90deg,var(--acc) 50%,transparent 0) repeat-x 0 100%/10px 3px,
  linear-gradient(0deg,var(--acc) 50%,transparent 0) repeat-y 0 0/3px 10px,linear-gradient(0deg,var(--acc) 50%,transparent 0) repeat-y 100% 0/3px 10px;
  animation:ants .7s linear infinite}
@keyframes ants{to{background-position:10px 0,-10px 100%,0 -10px,100% 10px}}
.story-txt{display:grid;gap:3px;min-width:0}
.story-txt b{font-weight:700;font-size:.95rem}
.story-txt small{font-size:.82rem;color:var(--fg-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.story:not(.new) .story-txt small{color:var(--muted)}
.story-meta{display:grid;gap:4px;justify-items:end;font:600 .72rem/1 var(--f-mono);color:var(--muted);white-space:nowrap}
.story-meta i{font-style:normal;background:var(--acc);color:var(--acc-ink);padding:3px 5px}
.side-more summary{cursor:pointer;font-weight:700;font-size:.88rem;color:var(--fg-2);padding:6px;list-style:none}
.side-more summary::-webkit-details-marker{display:none}
.side-more summary:hover{color:var(--fg)}
.side-more[open] summary{margin-bottom:4px}
.side-compose summary{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px dashed var(--line-2);cursor:pointer;list-style:none;color:var(--fg-2);transition:border-color .15s,color .15s}
.side-compose summary::-webkit-details-marker{display:none}
.side-compose summary .av{--s:30px}
.side-compose summary span{flex:1;font-weight:600}
.side-compose summary i{font-style:normal;font:800 1.2rem/1 var(--f-body);color:var(--acc)}
.side-compose summary:hover{border-color:var(--acc);color:var(--fg)}
.side-compose[open] summary{border-style:solid;border-color:var(--acc);color:var(--fg)}
.side-compose[open] summary i{transform:rotate(45deg)}
.side-compose .composer{margin-top:8px}
.side-compose .composer textarea{font-size:1.1rem}
.side-mine summary{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 2px;cursor:pointer;list-style:none;font-weight:700;font-size:.9rem;color:var(--fg-2)}
.side-mine summary::-webkit-details-marker{display:none}
.side-mine summary span::before{content:"+ ";color:var(--acc)}
.side-mine[open] summary span::before{content:"\2212 "}
.side-mine summary small{font:600 .74rem/1 var(--f-mono);color:var(--muted)}
.side-mine summary:hover{color:var(--fg)}
.side-status .my-status{margin:4px 0 0}
.side-status .my-status li{padding:10px 12px}
.side-status .my-status p{font-size:.98rem}
.side-people{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.side-people li{display:flex;align-items:center;gap:8px}
.sp-who{flex:1;display:flex;align-items:center;gap:12px;padding:6px;color:var(--fg);text-decoration:none;min-width:0;transition:background-color .15s}
.sp-who:hover{background:var(--bg-2)}
.sp-who>span:last-child{display:grid;gap:3px;min-width:0}
.sp-who b{font-weight:700;font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-who small{font-size:.78rem;color:var(--muted)}
.side-people li.on small{color:var(--acc)}
.sp-av{position:relative;display:block}
.sp-av .av{--s:38px}
.sp-av i{position:absolute;right:-3px;bottom:-3px;width:12px;height:12px;background:var(--line-2);border:2px solid var(--bg)}
.side-people li.on .sp-av i{background:var(--acc);animation:ht-pulse 2s ease-in-out infinite}
.sp-chat{flex:none;width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line-2);color:var(--fg-2);transition:border-color .15s,color .15s}
.sp-chat:hover{border-color:var(--acc);color:var(--acc)}
.sp-chat svg{width:18px;height:18px}
.side-fb{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;border:1px dashed var(--line-2);color:var(--fg-2);text-decoration:none;font-size:.9rem;transition:border-color .15s,color .15s}
.side-fb span{font-weight:700;color:var(--fg)}
.side-fb:hover{border-color:var(--acc);color:var(--fg)}
.side-fb:hover span{color:var(--acc)}

@media (max-width:1100px){.home-quick{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Tablet hochkant und Handy: eine Spalte, Status direkt nach Heute */
@media (max-width:960px){
  .home{display:flex;flex-direction:column;gap:16px}
  .home-main,.home-side{display:contents}
  .home-hero{order:1}.home-side .home-note{order:2}.home-today{order:3}.side-status{order:4}.wk{order:5}.side-friends{order:6}.home-quick{order:7}.home-bests{order:8}.side-fb{order:9}
  .home>*,.home-main>*,.home-side>*{width:100%}
}
@media (max-width:600px){
  .home-today{padding:18px 16px 16px}
  .home-today.is-rest{grid-template-columns:auto minmax(0,1fr);padding:14px 16px}
  .home-today.is-rest .ht-acts{grid-column:1/-1}
  .ht-ex{display:flex;flex-wrap:wrap;gap:6px}
  .ht-ex li{padding:6px 9px;gap:8px}
  .ht-ex .ex-badge{display:none}
  .ht-ex li>span:last-child{display:flex;align-items:baseline;gap:6px}
  .ht-ex b{font-size:.92rem}
  .ht-acts .btn{flex:1 1 auto}
  .ht-other{margin-left:0}
  .wk-stage{padding:14px 10px 10px}
  .wk-days{gap:4px;height:210px}
  .wk-bar{left:8%;right:8%}
  /* Schmale Spalten: Name senkrecht in der Säule statt als Schild darüber */
  .wk-tag{bottom:6px;transform:translateX(-50%) rotate(180deg);writing-mode:vertical-rl;max-width:none;max-height:calc(var(--h) - 12px);padding:0;background:none;border:0;overflow:hidden}
  .wk-tag b{font-size:.74rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .is-done .wk-tag{background:none;color:var(--acc-ink)}
  .is-plan .wk-tag b{color:var(--fg-2)}
  .wk-tag small{display:none}
  .wk-lbl b{font-size:1.1rem}
}
@media (prefers-reduced-motion:reduce){
  .home-today::before,.ht-ex li,.wk-bar,.story.new .story-ring,.ht-pulse,.ht-moon::after,.side-people li.on .sp-av i{animation:none}
}

/* ---------- Level-Rahmen ums Profilbild: jede Stufe ein Ausbau (wie ein Turm, der mit jedem Upgrade anders aussieht) ---------- */
.lvf{--fc:var(--line-2);position:relative;display:inline-block;flex:none;line-height:0;vertical-align:middle}
.lvf .av{box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--fc)}
.lvf::before,.lvf::after{content:"";position:absolute;pointer-events:none}
.lvb{position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);z-index:2;min-width:18px;padding:3px 4px;background:var(--fc);color:var(--fg);border:2px solid var(--bg);font:800 .64rem/1 var(--f-mono);text-align:center;white-space:nowrap}
/* 1 Stahl: klarer Ring */
.lvf.t1{--fc:#9aa3ad}
.lvf.t1 .av,.lvf.t2 .av{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--fc)}
.lvf.t1 .lvb,.lvf.t2 .lvb,.lvf.t3 .lvb,.lvf.t4 .lvb,.lvf.t5 .lvb,.lvf.t7 .lvb{color:#0a0a0a}
/* 2 Bronze: Ring und Nieten an den Ecken */
.lvf.t2{--fc:#c8803f}
.lvf.t2::before,.lvf.t3::before{inset:-8px;background:linear-gradient(var(--fc) 0 0) 0 0/5px 5px no-repeat,linear-gradient(var(--fc) 0 0) 100% 0/5px 5px no-repeat,
  linear-gradient(var(--fc) 0 0) 0 100%/5px 5px no-repeat,linear-gradient(var(--fc) 0 0) 100% 100%/5px 5px no-repeat}
/* 3 Silber: doppelter Ring und Nieten */
.lvf.t3{--fc:#dfe5ea}
.lvf.t3 .av{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--fc),0 0 0 6px var(--bg),0 0 0 7px var(--fc)}
.lvf.t3::before{inset:-10px}
/* 4 Gold und höher: dicker Ring, Ecken als Klammern */
.lvf.t4{--fc:#ffc93c}
.lvf.t4 .av{box-shadow:0 0 0 2px var(--bg),0 0 0 5px var(--fc)}
.lvf.t4::before,.lvf.t5::before,.lvf.t6::before,.lvf.t7::before{inset:-10px;background:
  linear-gradient(var(--fc) 0 0) 0 0/12px 3px no-repeat,linear-gradient(var(--fc) 0 0) 0 0/3px 12px no-repeat,
  linear-gradient(var(--fc) 0 0) 100% 0/12px 3px no-repeat,linear-gradient(var(--fc) 0 0) 100% 0/3px 12px no-repeat,
  linear-gradient(var(--fc) 0 0) 0 100%/12px 3px no-repeat,linear-gradient(var(--fc) 0 0) 0 100%/3px 12px no-repeat,
  linear-gradient(var(--fc) 0 0) 100% 100%/12px 3px no-repeat,linear-gradient(var(--fc) 0 0) 100% 100%/3px 12px no-repeat}
/* 5 Neon: gelb mit hartem Versatz-Schatten */
.lvf.t5{--fc:var(--acc)}
.lvf.t5 .av{box-shadow:0 0 0 2px var(--bg),0 0 0 5px var(--fc),7px 7px 0 3px rgb(215 255 58 / .28)}
/* 6 Glut: rot mit laufendem Strich-Ring */
.lvf.t6{--fc:var(--hot)}
.lvf.t6 .av{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--fc)}
.lvf.t6::after,.lvf.t7::after{inset:-6px;
  background:linear-gradient(90deg,var(--acc) 50%,transparent 0) repeat-x 0 0/8px 2px,linear-gradient(90deg,var(--acc) 50%,transparent 0) repeat-x 0 100%/8px 2px,
  linear-gradient(0deg,var(--acc) 50%,transparent 0) repeat-y 0 0/2px 8px,linear-gradient(0deg,var(--acc) 50%,transparent 0) repeat-y 100% 0/2px 8px;
  animation:lv-ants .8s linear infinite}
@keyframes lv-ants{to{background-position:8px 0,-8px 100%,0 -8px,100% 8px}}
/* 7 Legende: rot und gelb, laufender Ring, Krone statt Schild */
.lvf.t7{--fc:var(--acc)}
.lvf.t7 .av{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--hot),0 0 0 6px var(--bg),0 0 0 8px var(--acc)}
.lvf.t7::after{inset:-12px}
.lvf.t7 .lvb{bottom:auto;top:-16px;padding:7px 6px 3px;clip-path:polygon(0 35%,18% 0,34% 35%,50% 0,66% 35%,82% 0,100% 35%,100% 100%,0 100%);border:0}
/* Im Status-Ring der Seitenleiste nur Ring und Schild, die Ecken würden mit dem Status-Rahmen kollidieren */
.story-ring .lvf::before,.story-ring .lvf::after{display:none}
/* Im Kopf nur der Ring, damit nichts über den Rand ragt */
.appbar-me .lvf::before,.appbar-me .lvf::after,.appbar-me .lvb{display:none}
.lvf.lg .lvb,.lvf.xl .lvb{font-size:.74rem;padding:4px 6px}
.lvf.xl .lvb{bottom:-12px;font-size:.86rem}
.lvf.xl.t7 .lvb{top:-22px;bottom:auto;padding:10px 8px 4px}

/* Hinweis auf neuen Erfolg oder Level-Aufstieg */
.lv-note{display:flex;align-items:center;gap:16px;margin:0 0 18px;padding:14px 18px;border:2px solid var(--acc);background:var(--bg-2);animation:lv-in .5s var(--ease)}
@keyframes lv-in{from{transform:translateY(-8px)}}
.lv-note>span:nth-child(2){flex:1;display:grid;gap:3px;min-width:0}
.lv-note small{font:700 .72rem/1 var(--f-mono);color:var(--acc)}
.lv-note b{font:800 1.15rem/1.15 var(--f-display)}
.lv-note i{font-style:normal;color:var(--fg-2);font-size:.92rem}
.lv-note-ico{width:46px;height:46px;flex:none;display:grid;place-items:center;background:var(--acc);color:var(--acc-ink)}
.lv-note-ico svg,.ach-ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:miter}
.lv-note.level .lvf{margin:6px 8px 10px 4px}

/* Level-Fortschritt: Dashboard und Profil */
.lvl-bar{display:block;height:8px;background:var(--line);position:relative;overflow:hidden}
.lvl-bar>i{position:absolute;inset:0 auto 0 0;width:var(--p,0%);background:var(--acc)}
.home-hi{display:flex;justify-content:space-between;align-items:center;gap:12px 20px;flex-wrap:wrap}
.home-lvl{display:grid;grid-template-columns:auto 120px auto;align-items:center;gap:10px;padding:6px 10px;border:1px solid var(--line-2);color:var(--fg-2);text-decoration:none;font-size:.85rem;transition:border-color .15s}
.home-lvl b{color:var(--acc)}
.home-lvl small{font:600 .72rem/1 var(--f-mono);color:var(--muted)}
.home-lvl:hover{border-color:var(--acc);color:var(--fg)}
.lvl-block{display:grid;gap:22px}
.lvl-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:center}
.lvl-num{display:grid;justify-items:center;padding:10px 16px;border:2px solid var(--acc);min-width:86px}
.lvl-num small{font:700 .72rem/1 var(--f-mono);color:var(--acc)}
.lvl-num b{font:800 2.6rem/1 var(--f-display)}
.lvl-info{display:grid;gap:8px;min-width:0}
.lvl-info p{margin:0}
.lvl-info p:first-child{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.lvl-info p:first-child b{font:800 1.2rem/1 var(--f-display)}
.lvl-info p:first-child span{font:600 .8rem/1.2 var(--f-mono);color:var(--muted)}
.lvl-info .lvl-bar{height:12px}
.lvl-tiers{list-style:none;margin:0;padding:18px 4px 6px;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px;overflow-x:auto}
.lvl-tiers li{display:grid;justify-items:center;gap:14px;text-align:center;min-width:72px;padding:14px 4px 10px;border:1px solid transparent;opacity:.38;transition:opacity .2s}
.lvl-tiers li.got{opacity:1}
.lvl-tiers li.now{border-color:var(--acc);background:var(--bg-2)}
.lvl-tiers li>b{font:800 .9rem/1 var(--f-display);margin-top:4px}
.lvl-tiers li>small{font:600 .7rem/1 var(--f-mono);color:var(--muted)}
.lvl-tiers .av{--s:46px}
.ach-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.ach{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px;border:1px dashed var(--line-2);color:var(--muted)}
.ach-ico{width:42px;height:42px;display:grid;place-items:center;border:2px solid var(--line-2);color:var(--muted)}
.ach-txt{display:grid;gap:3px;min-width:0}
.ach-txt b{color:var(--fg-2);font-weight:700}
.ach-txt small{font-size:.8rem}
.ach-xp{font:600 .72rem/1 var(--f-mono);white-space:nowrap}
.ach.on{border-style:solid;border-color:var(--line-2);background:var(--bg-2);color:var(--fg-2)}
.ach.on .ach-ico{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.ach.on .ach-txt b{color:var(--fg)}
.ach.on .ach-xp{color:var(--acc)}
.wo-xp{margin:0 0 8px;padding:12px 14px;border:2px solid var(--acc);color:var(--fg-2)}
.wo-xp b{color:var(--acc);font:800 1.15rem/1 var(--f-display);margin-right:4px}

/* ---------- Globaler Chat ---------- */
.gchat{display:grid;gap:10px}
.gchat-info{display:flex;justify-content:space-between;gap:6px 16px;flex-wrap:wrap;margin:0;font:600 .78rem/1.3 var(--f-mono);color:var(--muted)}
.gchat-info b{color:var(--fg-2)}
/* Liste scrollt in sich, Höhe nach Bildschirm: Liste und Eingabe passen zusammen ohne Seiten-Scrollen */
.gchat{position:relative}
.gmsgs{list-style:none;margin:0;padding:6px 0;min-height:300px;max-height:max(300px,calc(100svh - var(--bar-h) - 400px));overflow-y:auto;overscroll-behavior:contain;display:grid;gap:2px;align-content:start;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.gmsgs::-webkit-scrollbar{width:8px}
.gmsgs::-webkit-scrollbar-thumb{background:var(--line-2)}
.gmsgs::-webkit-scrollbar-thumb:hover{background:var(--fg-2)}
.gnew{position:absolute;left:50%;bottom:86px;transform:translateX(-50%);z-index:4;padding:8px 14px;background:var(--acc);color:var(--acc-ink);border:0;font:700 .85rem/1 var(--f-body);cursor:pointer;box-shadow:4px 4px 0 rgb(0 0 0 / .6)}
.gnew:hover{background:var(--fg)}
.gmsg{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;padding:14px 8px 14px 16px;align-items:start;transition:background-color .15s}
.gmsg:hover,.gmsg:focus-within{background:var(--bg-2)}
.gmsg.new{animation:lv-in .3s var(--ease)}
.gmsg-av{line-height:0;padding:3px 0 6px}
.gmsg-av .av{--s:36px}
.gmsg-body{min-width:0}
.gmsg-head{display:flex;align-items:baseline;gap:8px;margin:0;flex-wrap:wrap}
.gmsg-head a{color:var(--fg);font-weight:700;text-decoration:none}
.gmsg-head a:hover{color:var(--acc)}
.gmsg.mine .gmsg-head a{color:var(--acc)}
.gmsg-head small{font:600 .72rem/1 var(--f-mono);color:var(--muted)}
.gmsg-text{margin:4px 0 0;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--fg-2)}
.gmsg-acts{display:flex;gap:14px;opacity:0;transition:opacity .15s}
.gmsg:hover .gmsg-acts,.gmsg:focus-within .gmsg-acts{opacity:1}
@media (hover:none){.gmsg-acts{opacity:1}}
.gmsg-empty{padding:30px 10px;color:var(--muted);text-align:center}
@media (max-width:600px){
  .gmsgs{min-height:220px;max-height:max(220px,calc(100svh - 450px))}
  /* Eingabe bleibt über der Insel stehen, auch wenn oben ein Hinweis den Inhalt verschiebt */
  .gchat .chat-form{position:sticky;bottom:calc(88px + env(safe-area-inset-bottom));z-index:3;background:var(--bg);padding-bottom:10px}
  /* Kompakt: Melden und Löschen klein rechts oben statt in eigener Zeile */
  .gmsg{grid-template-columns:auto minmax(0,1fr) auto;gap:10px;padding:10px 6px 10px 12px}
  .gmsg-acts{gap:10px}
  .gmsg-acts .link-btn{font-size:.76rem}
  .gmsg-av .av{--s:32px}
  .home-lvl{grid-template-columns:auto 1fr auto;width:100%}
  .lvl-head{grid-template-columns:minmax(0,1fr)}
  .lvl-num{justify-self:start}
  .lvl-tiers{grid-template-columns:repeat(8,72px)}
}
@media (prefers-reduced-motion:reduce){.lvf.t6::after,.lvf.t7::after,.lv-note,.lvl-bar>i,.gmsg.new{animation:none}}