/* 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; }

/* ---- Reiter -------------------------------------------------------------
   Statt einer Reihe Filterknöpfe: Jeder Reiter ist eine Frage und trägt
   seine Zahl im Namen. Auf dem Handy scrollen sie seitwärts, statt in drei
   Zeilen umzubrechen. */
.reiter {
  display: flex; gap: .3rem; overflow-x: auto; padding: .2rem .1rem .5rem;
  border-bottom: 2px solid var(--rand, #e3e7ee); margin: 1.2rem 0 0;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.reiterknopf {
  display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
  padding: .45rem .8rem; border-radius: .45rem .45rem 0 0;
  color: var(--leise, #5b6472); text-decoration: none; font-size: .94rem;
  border: 1px solid transparent; border-bottom: none;
  margin-bottom: -2px;
}
.reiterknopf:hover { background: var(--flaeche2, #eef1f6); }
.reiterknopf.aktiv {
  background: var(--flaeche, #fff); color: var(--text, #1f2430); font-weight: 600;
  border-color: var(--rand, #e3e7ee); border-bottom: 2px solid var(--flaeche, #fff);
}
.reiterknopf.leer { opacity: .45; }
.reiterknopf .punkt {
  width: .6rem; height: .6rem; border-radius: 50%; background: var(--punkt, #888);
  flex: none;
}
.reiterknopf .zahl {
  background: var(--flaeche2, #eef1f6); border-radius: 1rem;
  padding: 0 .45rem; font-size: .82rem; font-variant-numeric: tabular-nums;
}
.reiterknopf.aktiv .zahl { background: var(--rand, #e3e7ee); }
.leer.gross { padding: 2.5rem 0; text-align: center; font-size: 1.05rem; }
@media (prefers-color-scheme: dark) {
  .reiterknopf.aktiv { border-bottom-color: var(--flaeche, #232833); }
}

/* ---- Gruppenüberschrift innerhalb eines Reiters ------------------------ */
.gruppe {
  display: flex; align-items: center; gap: .5rem;
  font-size: .82rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--leise, #5b6472); font-weight: 700;
  margin: 1.4rem 0 .3rem; padding-bottom: .3rem;
  border-bottom: 1px solid var(--rand, #e3e7ee);
}
.gruppe:first-of-type { margin-top: .6rem; }
.gruppe .punkt {
  width: .55rem; height: .55rem; border-radius: 50%;
  background: var(--punkt, #888); flex: none;
}
.gruppe .zahl {
  margin-left: auto; background: var(--flaeche2, #eef1f6);
  border-radius: 1rem; padding: .05rem .5rem; font-size: .8rem;
  letter-spacing: 0; font-variant-numeric: tabular-nums;
}

/* --- Ticketnummer -------------------------------------------------------
   Sieht aus wie ein Chip, ist aber ein Knopf: einmal klicken, Nummer liegt
   in der Zwischenablage, ab damit ins Chatfenster. Bewusst unauffällig —
   die Nummer ist Werkzeug, nicht Inhalt. */
.chip.ticket{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.72rem;letter-spacing:.02em;color:var(--leise);
  background:transparent;cursor:pointer}
.chip.ticket:hover{border-color:var(--blau,#246fe0);color:var(--blau,#246fe0)}
.chip.ticket.kopiert{border-color:#3aa757;color:#2c7a3f}
.chip.ticket.gross{font-size:.8rem;padding:.15rem .6rem;margin-left:.1rem}

/* Neues Projekt — unauffälliger als das Aufgabenformular. Ein Projekt legt
   man selten an; der Platz gehört den Aufgaben. */
.neuprojekt{display:flex;gap:.4rem;margin-top:.7rem}
.neuprojekt input[name=name]{flex:1;max-width:22rem}


/* ==========================================================================
   Auswertungsseite (22.08.2026)
   --------------------------------------------------------------------------
   Bewusst ohne Diagramm-Bibliothek: Die CSP erlaubt nur `script-src 'self'`,
   und eine eigene Chart-Datei waere 60 KB fuer sechs Balkenreihen. CSS-Hoehen
   koennen dasselbe — die Breite/Hoehe kommt als style-Attribut, was unter
   `style-src 'unsafe-inline'` erlaubt ist.
   Nur bereits definierte Variablen benutzen (--karte, --bg, --rand, --leise,
   --blau, --rot, --gelb, --gruen, --radius): --flaeche und --punkt gibt es
   in :root NICHT, sie fielen im Dunkelmodus auf helle Festwerte zurueck.
   ========================================================================== */

.saeulen{display:flex;align-items:flex-end;gap:2px;height:9rem;
  background:var(--karte);border:1px solid var(--rand);border-radius:var(--radius);
  padding:.6rem .5rem .2rem;overflow-x:auto}
.saeule{flex:1 1 0;min-width:14px;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;height:100%;position:relative}
.saeule i{display:block;width:70%;min-height:2px;border-radius:3px 3px 0 0;
  background:var(--blau);transition:height .3s}
.saeule.ruhe i{background:var(--rand)}
.saeulenwert{font-size:.65rem;color:var(--leise);line-height:1;
  font-variant-numeric:tabular-nums;margin-bottom:2px;min-height:.7rem}
.saeulenfuss{font-size:.6rem;color:var(--leise);margin-top:.2rem;
  font-variant-numeric:tabular-nums}

.balkenzelle{width:40%;min-width:6rem}
.balken i.warn{background:var(--rot)}
.balken i.betont{background:var(--gelb)}
.tabelle td.rechts,.tabelle th.rechts{text-align:right;
  font-variant-numeric:tabular-nums}
.tabelle b.warn{color:var(--rot)}
.tabelle b.betont{color:var(--gelb)}
.tabelle b.gut{color:var(--gruen)}

.unterkopf{font-size:.9rem;color:var(--leise);font-weight:600;
  margin:1.2rem 0 .4rem}
.zweispaltig{display:grid;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));
  gap:1.2rem}
.block table.tabelle{margin-top:.4rem}

@media (max-width:760px){
  .saeulen{height:7rem}
  .saeule{min-width:10px}
  .saeulenwert{display:none}
  .balkenzelle{display:none}
  .zweispaltig{grid-template-columns:1fr}
}