/* Farbwelt nach winterhilfe.ch:
     #009FE3  Primärblau        #CCECF9  Flächen hell
     #0492CF  Blau aktiv/hover  #3C474F  Anthrazit
   Schriften liegen lokal unter /static/fonts — kein Google-CDN, damit beim
   Seitenaufruf keine IP-Adressen an Google gehen (revDSG).
   Hinweis: Die CI-Schrift Suisse Int'l ist lizenzpflichtig (Swiss Typefaces)
   und deshalb hier nicht eingebunden. Instrument Sans ist der freie Ersatz
   mit derselben neo-grotesken Anmutung. */
@import url("/static/fonts.css");

:root{
  --blau:#009FE3; --blau-aktiv:#0492CF; --blau-hell:#CCECF9; --blau-zart:#EAF6FD;
  --ink:#212529; --paper:#F5F9FC; --card:#FFFFFF;
  --line:#DCE6ED; --soft:#EDF3F8; --muted:#6E7B85;
  --warn:#C8322B; --r:10px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Instrument Sans',system-ui,-apple-system,sans-serif;background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;font-size:15px;line-height:1.5}
button{font-family:inherit;font-size:inherit;color:inherit;border:none;background:none;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
a{color:inherit}
.wrap{max-width:1860px;margin:0 auto;padding:15px 30px 16px}
.wrap.schmal{max-width:860px}

header{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:11px}
h1{font-family:'Bricolage Grotesque',sans-serif;font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.15}
h1 span{color:var(--blau);font-weight:400}
h1 a{text-decoration:none}
.kopfmeta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:3px}
.total{font-size:12.5px;color:var(--muted)}
.total b{color:var(--warn);font-weight:500}
.demobadge{display:inline-block;font-size:11.5px;font-weight:500;
  background:#FDF2D6;color:#7A5A12;border:1px solid #EBD79A;border-radius:20px;
  padding:3px 11px;text-decoration:none}
.demobadge:hover{background:#F8E9BE}
.erklaerung{font-size:13.5px;color:var(--muted);line-height:1.6;margin-bottom:22px;max-width:62ch}
.hbtn{display:flex;gap:9px;align-items:center}
.add{background:var(--blau);color:#fff;padding:10px 18px;border-radius:var(--r);font-weight:500;font-size:14px}
.add:hover{background:var(--blau-aktiv)}
.ghost{padding:9px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);font-size:13.5px;color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.ghost:hover{border-color:var(--blau);color:var(--blau)}

.toggle{display:flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--card)}
.toggle a{padding:6px 14px;font-size:13.5px;color:var(--muted);text-decoration:none}
.toggle a[aria-current="true"]{background:var(--blau);color:#fff;font-weight:500}
.toggle.klein a{padding:6px 12px;font-size:13px}

.bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:9px}
.search{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:0 11px;height:31px;min-width:200px;flex:1;max-width:280px}
.search input{border:none;outline:none;background:none;width:100%;height:100%}
.search svg{flex:none;opacity:.45}
.chip{height:31px;padding:0 11px;border-radius:var(--r);border:1px solid var(--line);background:var(--card);font-size:13.5px;display:flex;align-items:center;gap:7px;text-decoration:none;white-space:nowrap}
.chip:hover{border-color:var(--blau)}
.chip[aria-pressed="true"]{background:var(--blau);color:#fff;border-color:var(--blau)}
.sep{width:1px;height:22px;background:var(--line);margin:0 3px}
.chip .sw{width:9px;height:9px;border-radius:50%;flex:none}
.reset{font-size:13px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.reset:hover{color:var(--blau)}
.zeilenwahl{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:12px;color:var(--muted)}

/* Board — waagrecht scrollbar */
/* Spaltenkopf bleibt beim Scrollen stehen, wie eingefrorene Zeilen in Excel.
   Der Haken dabei: sticky richtet sich immer nach dem naechsten scrollenden
   Vorfahren. Weil .board fuer die Spalten waagrecht scrollt, IST .board
   dieser Vorfahre — ein sticky im Kopf haette sich also an .board geheftet
   statt ans Fenster und waere beim Scrollen der Seite wirkungslos geblieben,
   ohne Fehlermeldung.
   Deshalb scrollt das Board selbst, senkrecht wie waagrecht. Die Hoehe
   setzt app.js auf den freien Platz bis zum Fensterrand; --board-hoehe ist
   nur der Wert, bis das JS einmal gelaufen ist.
   align-items:stretch statt start: sonst ist eine kurze Spalte auch kurz,
   und ihr Kopf scrollt vorzeitig weg, waehrend die Nachbarkoepfe stehen. */
.board{display:grid;grid-auto-flow:column;grid-auto-columns:232px;gap:11px;align-items:stretch;overflow:auto;max-height:var(--board-hoehe,68vh);padding-bottom:12px;scroll-snap-type:x proximity}
.spalte{scroll-snap-align:start}
/* Hintergrund ist hier Pflicht, nicht Geschmack: ohne ihn scrollen die
   Karten sichtbar hinter dem Kopf durch. */
.colhead{position:sticky;top:0;z-index:3;background:var(--paper);display:flex;justify-content:space-between;align-items:flex-start;gap:8px;padding:0 4px 9px;border-top:3px solid var(--blau-hell);padding-top:8px;margin-bottom:2px}
.colhead b{font-weight:600;font-size:13px;display:block}
.colhead em{font-style:normal;font-size:11px;color:var(--muted);display:block;margin-top:1px}
.colhead i{font-style:normal;font-size:12px;color:var(--muted);flex:none}
.done .colhead{border-top-color:var(--line)}
.stack{display:flex;flex-direction:column;gap:7px;min-height:64px;padding:4px;border-radius:var(--r);transition:background .15s}
.stack.over{background:var(--blau-zart);outline:1px dashed var(--blau)}

.card{background:var(--card);border:1px solid var(--line);border-left:4px solid #ccc;border-radius:8px;padding:10px 11px;cursor:grab;transition:border-color .12s,box-shadow .12s;display:block;width:100%;text-align:left}
.card:hover{border-color:#BBD3E2;box-shadow:0 1px 4px rgba(0,90,140,.07)}
.card:focus-visible{outline:2px solid var(--blau);outline-offset:2px}
.card.ghosting{opacity:.35}
.card h3{font-size:13px;font-weight:500;line-height:1.35;margin-bottom:7px}
.klabel{font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--blau);display:block;margin-bottom:4px}
.meta{display:flex;justify-content:space-between;align-items:center;gap:8px}
.date{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.date.over{color:var(--warn);font-weight:500}
.av{width:21px;height:21px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:9.5px;font-weight:600}
.done .card h3{color:var(--muted);font-weight:400}
.more{text-align:center;font-size:12px;color:var(--blau);padding:7px 0;cursor:pointer;text-decoration:none;display:block}
.more:hover{text-decoration:underline}
.empty{font-size:12.5px;color:#A7B4BE;text-align:center;padding:16px 6px}

/* Matrix — Swimlanes
   Hier sind beide Richtungen eingefroren, wie in Excel: die Kopfzeile bleibt
   oben, die Themenfeld-Spalte bleibt links.
   Zwei Dinge mussten dafuer weichen. Erstens hatte .matrix ein
   overflow:hidden fuer die runden Ecken — ein overflow-Vorfahre sperrt aber
   JEDES sticky darin ein, womit Kopfzeile und Spalte nie standen, obwohl die
   Regeln dastanden. Die Rundung sitzt jetzt an .mwrap.
   Zweitens muss .mwrap in beiden Richtungen scrollen und eine begrenzte
   Hoehe haben, sonst gibt es senkrecht nichts, wogegen etwas kleben koennte.
   Die Hoehe misst app.js. */
.mwrap{overflow:auto;max-height:var(--matrix-hoehe,68vh);border:1px solid var(--line);border-radius:12px;background:var(--card)}
.matrix{background:var(--card);min-width:calc(230px + var(--spalten) * 172px)}
.mrow{display:grid;grid-template-columns:230px repeat(var(--spalten),minmax(172px,1fr));border-bottom:1px solid var(--soft)}
.mrow:last-child{border-bottom:none}
.mhead{position:sticky;top:0;z-index:3;background:var(--blau-hell);border-bottom:1px solid var(--line)}
.mhead>div{padding:9px 12px;font-size:12.5px;border-left:1px solid rgba(255,255,255,.7)}
/* Die Ecke oben links steht in beiden Richtungen still und braucht deshalb
   den hoechsten z-index — sonst schiebt sich die erste Datenspalte beim
   Scrollen nach rechts darueber. */
.mhead>div:first-child{position:sticky;left:0;z-index:4;background:var(--blau-hell);border-left:none;font-weight:600}
.mhead b{font-weight:600;display:block}
.mhead em{font-style:normal;font-size:10.5px;color:#4B6F84;display:block}
.mgroup{grid-column:1/-1;padding:10px 14px;font-family:'Bricolage Grotesque',sans-serif;font-size:14px;font-weight:600;background:var(--blau);color:#fff;border-top:1px solid var(--line)}
.mgroup em{font-style:normal;font-weight:400;font-size:12px;opacity:.85;margin-left:6px}
/* Der Titel bleibt links stehen, waehrend das Band unter ihm nach rechts
   wegscrollt. inline-block, weil sticky an einem reinen inline-Element
   nicht greift. */
.mgroup-text{position:sticky;left:14px;display:inline-block}
.mgroup.persoenlich{background:#3C474F}
.mtheme{padding:10px 12px;font-size:12.5px;line-height:1.35;display:flex;align-items:center;gap:8px;background:var(--blau-zart);position:sticky;left:0;z-index:1}
.mtheme.person{background:var(--soft)}
.mcell{border-left:1px solid var(--soft);padding:6px;display:flex;flex-direction:column;gap:5px;min-height:48px;transition:background .15s}
.mcell.over{background:var(--blau-zart)}
.mcell .card{padding:7px 9px}
.mcell .card h3{font-size:12px;margin-bottom:5px}
.mcell .klabel{display:none}

/* Swimlanes verwalten */
.lane{background:var(--card);border:1px solid var(--line);border-radius:12px;margin-bottom:14px;overflow:hidden}
.lane-kopf{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--blau);color:#fff}
.lane-kopf .inline{flex:1}
.lane-kopf input{width:100%;background:rgba(255,255,255,.14);border:1px solid transparent;color:#fff;border-radius:7px;padding:7px 10px;font-weight:600}
.lane-kopf input:focus{outline:none;background:#fff;color:var(--ink);border-color:#fff}
.lane-liste{list-style:none}
.lane-liste li{display:flex;align-items:center;gap:10px;padding:7px 12px;border-bottom:1px solid var(--soft)}
.lane-liste li:last-child{border-bottom:none}
.lane-liste input{flex:1;border:1px solid transparent;border-radius:7px;padding:7px 9px;background:none}
.lane-liste input:hover{border-color:var(--line)}
.lane-liste input:focus{outline:none;border-color:var(--blau);background:var(--card)}
.lane-liste li.leer,.leer{color:var(--muted);font-size:13px;padding:12px}
.lane-zahl{font-size:12px;color:var(--muted);min-width:22px;text-align:right}
.lane-akt{display:flex;gap:3px;flex:none}
.ikon{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:14px;color:inherit;opacity:.75}
.ikon:hover:not(:disabled){background:rgba(0,0,0,.08);opacity:1}
.lane-kopf .ikon:hover:not(:disabled){background:rgba(255,255,255,.22)}
.ikon:disabled{opacity:.25;cursor:default}
.ikon.gefahr:hover:not(:disabled){background:var(--warn);color:#fff}
.lane-neu{display:flex;gap:8px;padding:10px 12px;background:var(--blau-zart);border-top:1px solid var(--soft)}
.lane-neu input{flex:1;padding:8px 10px;border:1px solid var(--line);border-radius:7px;background:var(--card)}
.lane-neu input:focus{outline:none;border-color:var(--blau)}
.lane-neu.gross{background:none;border:1px dashed var(--line);border-radius:12px;padding:12px}
.hinweisbox{border-left:3px solid var(--blau);margin-bottom:16px}

/* Panel */
.scrim{position:fixed;inset:0;background:rgba(33,37,41,.34);opacity:0;pointer-events:none;transition:opacity .2s;z-index:20}
.scrim.on{opacity:1;pointer-events:auto}
.panel{position:fixed;top:0;right:0;bottom:0;width:min(460px,100%);background:var(--card);z-index:21;transform:translateX(100%);transition:transform .26s cubic-bezier(.32,.72,0,1);display:flex;flex-direction:column;box-shadow:-8px 0 32px rgba(0,60,95,.13)}
.panel.on{transform:none}
/* Der Panel-Inhalt wird per HTMX ausgetauscht und muss die Höhe des Panels
   erben — sonst wächst ein langes Formular über den Bildschirmrand hinaus und
   der Speichern-Knopf ist nicht erreichbar. */
#panel-inhalt{display:flex;flex-direction:column;flex:1;min-height:0}
#panel-inhalt>form.form{min-height:0}
.ptop{flex:none;display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:22px 24px 15px;border-bottom:1px solid var(--soft)}
.ptop h2{font-family:'Bricolage Grotesque',sans-serif;font-size:19px;font-weight:600;line-height:1.25}
.close{font-size:22px;color:var(--muted);line-height:1;padding:2px 6px;border-radius:6px}
.close:hover{background:var(--soft);color:var(--ink)}
.pbody{padding:18px 24px 32px;overflow-y:auto;flex:1}
.ptag{display:inline-block;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:500;background:var(--blau-hell);color:#0B5E85;margin-bottom:14px}
.field{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--soft);font-size:14px}
.field span{color:var(--muted);flex:none}
.field b{font-weight:500;text-align:right}
.field b.warn{color:var(--warn)}
.pers{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.notiz{font-size:13.5px;color:#3C474F;background:var(--blau-zart);border:1px solid var(--soft);border-radius:8px;padding:11px 12px;margin-top:14px;white-space:pre-wrap}
/* Kurzbeschrieb: pre-wrap, damit die drei Punkte ihre Zeilen behalten.
   overflow-wrap, weil eine lange Adresse sonst das Panel breiter macht. */
.beschrieb{font-size:13.5px;line-height:1.55;color:var(--ink);background:var(--card);border:1px solid var(--soft);border-left:3px solid var(--blau-hell);border-radius:8px;padding:12px 13px;margin-top:14px;white-space:pre-wrap;overflow-wrap:anywhere}
.links{margin-top:14px}
.links>span{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.links ul{list-style:none;padding:0;margin:6px 0 0;display:flex;flex-direction:column;gap:5px}
.links li{font-size:13px;overflow-wrap:anywhere}
.links a{color:var(--blau)}
.links span[title]{color:var(--muted)}
details{margin-top:20px;border-top:1px solid var(--line);padding-top:15px}
summary{cursor:pointer;font-size:13px;font-weight:500;color:var(--muted);list-style:none;display:flex;align-items:center;gap:7px}
summary::-webkit-details-marker{display:none}
summary::before{content:"›";font-size:17px;transition:transform .18s;display:inline-block}
details[open] summary::before{transform:rotate(90deg)}
.pakt{display:flex;gap:9px;padding:16px 24px;border-top:1px solid var(--line);background:var(--paper);flex:none}
.pakt button,.pakt a{flex:1;text-align:center;justify-content:center}
.verlauf{font-size:12.5px;color:var(--muted);line-height:1.7;margin-top:8px}
.verlauf div{display:flex;gap:8px}
.verlauf i{font-style:normal;flex:none;width:74px}

/* Formular */
.form{display:flex;flex-direction:column;gap:14px}
.form label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:5px}
.form input[type=text],.form input[type=date],.form select,.form textarea{
  width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:var(--card);outline:none}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--blau)}
.form textarea{min-height:80px;resize:vertical}
.radios{display:flex;gap:7px}
.radios label{flex:1;margin:0;text-align:center;padding:9px 0;border:1px solid var(--line);border-radius:8px;background:var(--card);cursor:pointer;color:var(--ink);font-size:14px}
.radios input{position:absolute;opacity:0;pointer-events:none}
.radios label:has(input:checked){background:var(--blau);color:#fff;border-color:var(--blau)}
.hinweis{font-size:12.5px;color:var(--muted);margin-top:6px}

/* Meldungen */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(140%);background:#3C474F;color:#fff;padding:12px 16px;border-radius:var(--r);font-size:14px;display:flex;align-items:center;gap:14px;z-index:40;box-shadow:0 8px 28px rgba(0,40,60,.24);transition:transform .24s cubic-bezier(.32,.72,0,1);max-width:min(600px,92vw)}
.toast.on{transform:translateX(-50%)}
.toast.fehler{background:var(--warn)}
.toast button{color:#fff;text-decoration:underline;text-underline-offset:3px;font-weight:500;white-space:nowrap}
.neuladen{position:fixed;left:50%;top:16px;transform:translateX(-50%) translateY(-160%);background:var(--card);border:1px solid var(--blau);border-radius:var(--r);padding:9px 16px;font-size:13.5px;z-index:39;box-shadow:0 6px 22px rgba(0,60,95,.14);transition:transform .24s;display:flex;gap:12px;align-items:center}
.neuladen.on{transform:translateX(-50%)}
.neuladen a{font-weight:500;color:var(--blau)}

.legend{margin-top:12px;padding-top:9px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.legend span{display:flex;align-items:center;gap:6px}
.legend i{width:10px;height:10px;border-radius:50%;display:block}

/* Login */
.loginwrap{max-width:420px;margin:0 auto;padding:14vh 24px}
.loginwrap h1{margin-bottom:6px}
.loginbox{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:26px;margin-top:24px}
.loginbox p{font-size:14px;color:var(--muted);margin-bottom:18px;line-height:1.55}
.loginbox input{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:8px;margin-bottom:12px}
.loginbox input:focus{outline:none;border-color:var(--blau)}
.loginbox button.add{width:100%}
.devbox{margin-top:20px;padding-top:18px;border-top:1px dashed var(--line)}
.devbox p{font-size:12.5px;margin-bottom:10px}
.devlist{display:flex;flex-wrap:wrap;gap:7px}
.devlist button{padding:7px 12px;border:1px solid var(--line);border-radius:8px;font-size:13px;background:var(--blau-zart)}
.devlist button:hover{border-color:var(--blau);color:var(--blau)}

/* Archiv */
.tabelle{width:100%;background:var(--card);border:1px solid var(--line);border-radius:12px;border-collapse:separate;border-spacing:0;overflow:hidden}
.tabelle th{text-align:left;font-size:12.5px;font-weight:600;color:#0B5E85;padding:11px 14px;background:var(--blau-hell);border-bottom:1px solid var(--line)}
.tabelle td{padding:11px 14px;font-size:13.5px;border-bottom:1px solid var(--soft)}
.tabelle tr:last-child td{border-bottom:none}

@media(max-width:640px){
  .wrap{padding:12px 16px 14px}
  h1{font-size:23px}
  .panel{width:100%}
  .board{grid-auto-columns:84vw}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Nutzende verwalten */
.fehlerbox{border-left-color:var(--warn);background:#FDF0EF}
.nutzer-neu{display:flex;gap:8px;padding:12px;flex-wrap:wrap}
.nutzer-neu input{flex:1;min-width:150px;border:1px solid var(--line);border-radius:var(--r);padding:8px 10px;background:var(--card)}
.nutzer-neu input:focus{outline:none;border-color:var(--blau)}
.nutzer-hinweis{padding:0 12px 12px;font-size:12px;color:var(--muted)}
.nutzer{gap:10px}
.nutzer-form{display:flex;gap:6px;flex:1;flex-wrap:wrap}
.nutzer-form input{flex:1;min-width:120px;border:1px solid transparent;border-radius:7px;padding:6px 8px;background:none;font-size:13.5px}
.nutzer-form input:hover{border-color:var(--line)}
.nutzer-form input:focus{outline:none;border-color:var(--blau);background:var(--card)}
.nutzer-form .kurz{flex:none;width:56px;text-align:center;text-transform:uppercase}
/* Stillgelegte bleiben lesbar, treten aber zurueck — sie sind kein Fehler,
   nur nicht mehr im Dienst. */
.nutzer.still{opacity:.55}
.nutzer.still .av{filter:grayscale(1)}
.nutzer-du{font-size:11.5px;color:var(--muted);padding:0 6px}
.ikon.an{color:var(--blau)}