/* stil.css — eine Datei, kein Framework.
   Dunkel, ruhig, auf dem Handy genauso brauchbar wie am Rechner.
   Die Farben sind Todoist nachempfunden, damit die Umgewöhnung klein bleibt. */
:root{
  --bg:#1f2430; --bg2:#272d3b; --karte:#2d3446; --rand:#3a4256;
  --text:#e7eaf0; --leise:#9aa3b8; --blau:#4b8bf5; --rot:#e05a52;
  --gelb:#eb9909; --gruen:#7ecc49; --lila:#9f7aea;
  --radius:10px; --schatten:0 1px 3px rgba(0,0,0,.4);
}
@media (prefers-color-scheme: light){
  :root{--bg:#f7f8fa;--bg2:#fff;--karte:#fff;--rand:#e2e5ec;--text:#22262e;--leise:#6b7280;}
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-text-size-adjust:100%}
a{color:var(--blau);text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:1.5rem;margin:.2rem 0 1rem}
h2{font-size:1.05rem;margin:0 0 .6rem;color:var(--leise);
  text-transform:uppercase;letter-spacing:.04em}
.sprung{position:absolute;left:-9999px}
.sprung:focus{left:.5rem;top:.5rem;background:var(--karte);padding:.5rem;z-index:99}

/* Kopf */
.kopf{display:flex;align-items:center;gap:.75rem;padding:.6rem 1rem;
  background:var(--bg2);border-bottom:1px solid var(--rand);
  position:sticky;top:0;z-index:20;padding-top:max(.6rem,env(safe-area-inset-top))}
.marke{font-weight:700;color:var(--text);font-size:1.05rem;white-space:nowrap}
.suchfeld{flex:1;max-width:32rem}
.suchfeld input{width:100%}
.kopf-rechts{display:flex;align-items:center;gap:.4rem}
.menuknopf{background:none;border:0;color:var(--text);font-size:1.3rem;cursor:pointer}
.nurmobil{display:none}

/* Aufbau */
.rahmen{display:flex;min-height:calc(100vh - 3.2rem)}
.seitenleiste{width:15rem;flex:none;padding:1rem .6rem;background:var(--bg2);
  border-right:1px solid var(--rand)}
.inhalt{flex:1;padding:1.25rem;max-width:60rem;margin:0 auto;width:100%;
  padding-bottom:max(1.25rem,env(safe-area-inset-bottom))}
.navtitel{color:var(--leise);font-size:.75rem;text-transform:uppercase;
  margin:1rem .6rem .3rem;letter-spacing:.05em}
.navpunkt{display:flex;gap:.5rem;align-items:center;padding:.45rem .6rem;
  border-radius:var(--radius);color:var(--text)}
.navpunkt:hover{background:var(--karte);text-decoration:none}
.navpunkt.aktiv{background:var(--karte);font-weight:600}
.navform{display:flex;gap:.3rem;margin:.6rem .4rem}
.navform input{flex:1;min-width:0}

/* Bausteine */
input,select,textarea{background:var(--bg);color:var(--text);
  border:1px solid var(--rand);border-radius:8px;padding:.45rem .6rem;
  font:inherit;max-width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--blau);outline-offset:1px}
textarea{width:100%;resize:vertical}
.knopf{background:var(--blau);color:#fff;border:0;border-radius:8px;
  padding:.45rem .8rem;font:inherit;cursor:pointer;white-space:nowrap}
.knopf:hover{filter:brightness(1.1)}
.knopf.klein{padding:.3rem .6rem;font-size:.85rem}
.knopf.winzig{padding:.15rem .4rem;font-size:.75rem}
.knopf.gross{width:100%;padding:.7rem;font-size:1rem}
.knopf.leise{background:var(--karte);color:var(--leise);border:1px solid var(--rand)}
.knopf.aktiv{background:var(--karte);color:var(--text);border:1px solid var(--blau)}
.karte{background:var(--karte);border:1px solid var(--rand);border-radius:var(--radius);
  padding:1rem;margin-bottom:1rem;box-shadow:var(--schatten)}
.karte.betont{border-color:var(--gruen)}
.block{margin:1.5rem 0}
.reihe{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin:.6rem 0}
.reihe input[name=titel],.reihe input[name=name],.reihe input[name=text]{flex:1;min-width:12rem}
.leer{color:var(--leise);font-style:italic}
.fehler{color:var(--rot);background:rgba(224,90,82,.1);padding:.5rem .7rem;
  border-radius:8px;margin:.4rem 0}
.hinweis{padding:.6rem .8rem;border-radius:8px;background:var(--karte)}
.hinweis.warn{border-left:3px solid var(--gelb)}
.gespeichert{color:var(--gruen);font-size:.85rem}
.anzahl{color:var(--leise);font-size:.85rem}
.brotkrumen{color:var(--leise);font-size:.85rem;margin:0 0 .3rem}
.beschreibung{color:var(--leise);white-space:pre-wrap}

/* Kacheln */
.kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(7rem,1fr));gap:.6rem}
.kachel{background:var(--karte);border:1px solid var(--rand);border-radius:var(--radius);
  padding:.7rem;text-align:center}
.kachel b{display:block;font-size:1.6rem;line-height:1.1}
.kachel span{color:var(--leise);font-size:.8rem}
.kachel.warn b{color:var(--rot)}
.kachel.betont b{color:var(--gelb)}

/* Aufgaben */
.aufgabenliste{list-style:none;margin:.5rem 0;padding:0}
.aufgabe{display:flex;gap:.6rem;align-items:flex-start;padding:.55rem .3rem;
  border-bottom:1px solid var(--rand)}
.aufgabe:hover{background:var(--bg2)}
.aufgabe.fertig .aufgabentitel{text-decoration:line-through;color:var(--leise)}
.aufgabentitel{flex:1;color:var(--text);word-break:break-word}
.haken{width:1.15rem;height:1.15rem;flex:none;margin-top:.15rem;border-radius:50%;
  border:2px solid var(--leise);background:none;color:var(--gruen);
  cursor:pointer;font-size:.75rem;line-height:1;padding:0}
.haken.gross{width:1.6rem;height:1.6rem;font-size:1rem}
.aufgabe.p1 .haken{border-color:var(--rot)}
.aufgabe.p2 .haken{border-color:var(--gelb)}
.aufgabe.p3 .haken{border-color:var(--blau)}
.merkmale{display:flex;gap:.35rem;align-items:center;flex-wrap:wrap;flex:none}
.chip{border:1px solid var(--rand);border-radius:999px;padding:.05rem .5rem;
  font-size:.75rem;color:var(--leise);white-space:nowrap}
.chip.warn{border-color:var(--gelb);color:var(--gelb)}
.datum{font-size:.78rem;color:var(--leise)}
.datum.warn{color:var(--rot);font-weight:600}
.nutzerkugel{width:1.6rem;height:1.6rem;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:.8rem}
.nutzerkugel.klein{width:1.25rem;height:1.25rem;font-size:.7rem}
.aufgabenkopf{display:flex;gap:.7rem;align-items:flex-start}
.aufgabenkopf h1{margin:0}
.aufgabenkopf h1.fertig{text-decoration:line-through;color:var(--leise)}
.filterzeile{display:flex;gap:.4rem;align-items:center;margin:.6rem 0}
.neueaufgabe{display:flex;gap:.4rem;flex-wrap:wrap;background:var(--karte);
  border:1px solid var(--rand);border-radius:var(--radius);padding:.6rem}
.neueaufgabe input[name=titel]{flex:1;min-width:12rem}

/* Projekte */
.projektgitter{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:.7rem}
.projektkarte{background:var(--karte);border:1px solid var(--rand);
  border-radius:var(--radius);padding:.8rem;color:var(--text);display:block}
.projektkarte:hover{border-color:var(--blau);text-decoration:none}
.projektbereich{font-size:.75rem;color:var(--leise);display:block}
.projektkarte b{display:block;margin:.2rem 0 .5rem}
.balken{height:6px;background:var(--bg);border-radius:99px;overflow:hidden}
.balken.gross{height:12px}
.balken i{display:block;height:100%;border-radius:99px;transition:width .3s}
.prozent{font-size:.8rem;color:var(--leise);display:block;margin-top:.3rem}
.fortschrittkasten{background:var(--karte);border:1px solid var(--rand);
  border-radius:var(--radius);padding:1rem;margin:1rem 0}

/* Formularfelder in der Aufgabe */
.felder{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:.7rem}
.felder label{display:flex;flex-direction:column;gap:.25rem;font-size:.8rem;color:var(--leise)}
.felder label input,.felder label select,.felder label textarea{color:var(--text)}
.felder .breit{grid-column:1/-1}
.felder .zeile{grid-column:1/-1;display:flex;gap:.5rem;align-items:center}

/* Anhänge */
.anhanggitter{display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:.7rem}
.anhang{margin:0;background:var(--karte);border:1px solid var(--rand);
  border-radius:var(--radius);overflow:hidden}
.anhang img,.anhang video{width:100%;height:8rem;object-fit:cover;display:block;background:#000}
.anhang figcaption{padding:.4rem .5rem;font-size:.75rem;display:flex;
  flex-direction:column;gap:.15rem}
.anhang figcaption span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.anhang figcaption small{color:var(--leise)}
.dateikachel{display:flex;align-items:center;justify-content:center;height:8rem;
  background:var(--bg);text-align:center;padding:.5rem;font-size:.8rem}
.verarbeitet{height:8rem;display:flex;flex-direction:column;gap:.5rem;
  align-items:center;justify-content:center;color:var(--leise);font-size:.8rem}
.dreher{width:1.4rem;height:1.4rem;border:2px solid var(--rand);
  border-top-color:var(--blau);border-radius:50%;animation:dreh 1s linear infinite}
@keyframes dreh{to{transform:rotate(360deg)}}

/* Kommentare, Verlauf, Tabellen */
.kommentar{display:flex;gap:.6rem;padding:.5rem 0;border-bottom:1px solid var(--rand)}
.kommentar p{margin:.2rem 0 0;white-space:pre-wrap}
.kommentar time{color:var(--leise);font-size:.75rem;margin-left:.4rem}
.verlauf{list-style:none;padding:0;font-size:.82rem;color:var(--leise)}
.verlauf li{padding:.25rem 0;border-bottom:1px solid var(--rand)}
.verlauf time{margin-right:.4rem}
.tabelle{width:100%;border-collapse:collapse;font-size:.88rem}
.tabelle th{text-align:left;color:var(--leise);font-weight:600;
  border-bottom:1px solid var(--rand);padding:.4rem}
.tabelle td{padding:.4rem;border-bottom:1px solid var(--rand);vertical-align:middle}
.token{background:var(--bg);border:1px solid var(--rand);border-radius:8px;
  padding:.7rem;overflow-x:auto;font-size:.8rem;user-select:all}

/* Anmeldung */
.anmeldeseite{display:flex;align-items:center;justify-content:center;min-height:100vh}
.anmeldekasten{background:var(--karte);border:1px solid var(--rand);
  border-radius:var(--radius);padding:1.6rem;width:min(22rem,92vw);
  display:flex;flex-direction:column;gap:.8rem;box-shadow:var(--schatten)}
.anmeldekasten h1{margin:0 0 .3rem;text-align:center}
.anmeldekasten label{display:flex;flex-direction:column;gap:.25rem;
  font-size:.85rem;color:var(--leise)}

/* HTMX */
.htmx-indicator{opacity:0;color:var(--leise);font-size:.8rem}
.htmx-request .htmx-indicator,.htmx-request.htmx-indicator{opacity:1}
.geblitzt{animation:blitz .4s}
@keyframes blitz{from{background:rgba(75,139,245,.18)}to{background:transparent}}

/* Handy */
@media (max-width:760px){
  .nurmobil{display:block}
  .seitenleiste{position:fixed;inset:3.2rem auto 0 0;z-index:30;
    transform:translateX(-100%);transition:transform .2s;overflow:auto;
    box-shadow:var(--schatten)}
  body.menu-offen .seitenleiste{transform:none}
  .inhalt{padding:.8rem}
  .kopf{gap:.5rem}
  .marke{font-size:.95rem}
  .kopf-rechts .knopf{display:none}
  .aufgabe{padding:.7rem .2rem}
  .merkmale{width:100%;padding-left:1.75rem}
  .aufgabe{flex-wrap:wrap}
  .felder{grid-template-columns:1fr}
}

/* ---- Ziehen und Ablegen ------------------------------------------------ */
.griff { display: none; color: var(--leise, #9aa1ac); cursor: grab;
  padding: 0 .3rem; user-select: none; font-size: 1.05rem; line-height: 1; }
.aufgabenliste.ziehbar .griff { display: inline-block; }
.aufgabenliste.ziehbar .griff:active { cursor: grabbing; }
.aufgabe.zieht { opacity: .35; background: var(--betont, #f0f3f8); }
.filterzeile .trenner { display:inline-block; width:1px; height:1.1em;
  background: var(--rand, #d8dce3); margin: 0 .4rem; vertical-align: middle; }
.hinweis { font-size: .9rem; color: var(--leise, #6b7280); margin: .3rem 0 .6rem; }
.abmeldeform { display: inline; margin: 0; }

/* ---- Reihenfolge: wartet auf / hält auf -------------------------------- */
.aufgabe.blockiert { opacity: .62; }
.aufgabe.blockiert .aufgabentitel { font-style: italic; }
.wartetliste { list-style: none; padding: 0; margin: .4rem 0; }
.wartetliste li { display: flex; align-items: center; gap: .5rem;
  padding: .25rem 0; }
.wartetliste li.fertig a { text-decoration: line-through; color: var(--leise,#9aa1ac); }
.wartetliste .sym { width: 1.2rem; text-align: center; }
.wartetzeile { margin: .5rem 0 .2rem; font-size: .92rem; }
.chip.gut { border-color: #3aa757; color: #2c7a3f; }
.kachel.gut b { color: #2c7a3f; }
.aufgabe.p5 { border-left-color: #808080; }
.chip.bereich { background: var(--flaeche2, #eef1f6); border-color: transparent; }