/* To-do: nur, was es in dieser App gibt. Farben, Schrift, Abstände und alle allgemeinen
   Bausteine (.m-…) kommen aus ../montag-design.css (Montag App-Design, DESIGN.md).
   Hier nur var(--m-…) und die Abstandsskala 4/8/12/16/24/32 px, keine eigenen Farbwerte. */

[hidden] { display: none !important; }

/* ---------- Laden, Rahmen, Kopf ---------- */
.startbild { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: var(--m-s2); }
.startbild p { margin: 0; }
.rahmen { min-width: 0; }
.marke { color: var(--m-text); text-decoration: none; min-height: 44px; }
.kopf { display: flex; flex-direction: column; gap: var(--m-s1); }
.unterzeile { margin: 0; }
.m-page > .m-btn { align-self: flex-start; }
.zentriert { text-align: center; align-self: center; }
.einleitung { margin: 0; color: var(--m-text-2); }
.fuss { margin: var(--m-s4) 0 0; padding: var(--m-s4) var(--m-s4) 0; border-top: 0.5px solid var(--m-sep); }

/* Anmeldung und Freigabe für Claude (auch vom Server erzeugte Seiten) */
.anmelde-seite { max-width: 440px; min-height: 100vh; justify-content: center; }
.anmelde-seite > .m-brand { align-self: center; }
.karte-text { display: flex; flex-direction: column; gap: var(--m-s3); }
.karte-text p, .karte-absatz { margin: 0; }
.knopfspalte { display: flex; flex-direction: column; gap: var(--m-s2); }

/* ---------- Abschnitte, Zeilen ---------- */
.gruppe { display: flex; flex-direction: column; gap: var(--m-s2); min-width: 0; }
.gruppe .m-section { margin: 0; }
.zeile-titel { display: block; overflow-wrap: anywhere; }
.zeile-fett { font-weight: 700; }
.angaben { display: block; margin-top: 2px; overflow-wrap: anywhere; }
.angaben .m-chip { padding: 2px 8px; font-size: 12px; vertical-align: 1px; }
.m-row.inaktiv { color: var(--m-text-2); }
.knopfreihe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--m-s2); }
.knopfreihe.rechts { justify-content: flex-end; }
.mehr-zeile { color: var(--m-accent-text); font-weight: 700; }

/* Zeile = Abhaken-Knopf + Knopf für die Details */
.eintrag-zeile { padding: 0 0 0 var(--m-s1); gap: 0; align-items: stretch; }
.zeile-knopf { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--m-s3); min-height: 52px; padding: var(--m-s2) var(--m-s4) var(--m-s2) var(--m-s1); border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.m-row > .zeile-knopf:first-child { padding-left: 0; }
.zeile-knopf:active { background: var(--m-fill); }
.abhaken { flex: none; width: 44px; min-height: 44px; display: grid; place-items: center; border: 0; background: none; color: var(--m-text-2); cursor: pointer; padding: 0; }
.abhaken svg { width: 26px; height: 26px; }
.abhaken[aria-pressed="true"], .wird-erledigt .abhaken { color: var(--m-accent-text); }
.wird-erledigt .zeile-titel { color: var(--m-text-2); text-decoration: line-through; }
.ist-erledigt .zeile-titel { color: var(--m-text-2); }
.faellig-vorbei { color: var(--m-warn); font-weight: 700; }
.faellig-heute { color: var(--m-text); font-weight: 700; }
.hat-details { font-style: italic; }

/* Projekte als aufklappbare Sammelzeile */
.projekt-zeile { font: inherit; }
.projekt-symbol { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: var(--m-r-s); background: var(--m-accent-tint); color: var(--m-accent-text); }
.projekt-symbol svg { width: 20px; height: 20px; }
.projekt-zeile .anzahl { flex: none; }
.projekt-zeile .aufklappen { transition: transform var(--m-dur) var(--m-ease); }
.projekt-zeile[aria-expanded="true"] .aufklappen { transform: rotate(90deg); }
.projekt-punkte { border-top: 0.5px solid var(--m-sep); }
.projekt-punkte + .m-row { border-top: 0.5px solid var(--m-sep); }
.unterpunkt { padding-left: var(--m-s6); }

/* Kurzeingabe oben auf der Startseite */
.kurzeingabe { display: flex; align-items: center; gap: var(--m-s2); min-height: 52px; padding: 0 var(--m-s4) 0 var(--m-s3); }
.kurzeingabe input { flex: 1; min-width: 0; min-height: 44px; border: 0; background: transparent; outline: none; font-size: 17px; }
.kurz-symbol { display: grid; place-items: center; width: 32px; color: var(--m-accent-text); }
.kurz-symbol svg { width: 22px; height: 22px; }
.gruppe > .m-hint { padding-top: 0; }

/* ---------- Sheets ---------- */
.eintrag-sheet { max-height: min(92vh, 900px); overflow: auto; padding: var(--m-s4); }
.sheet-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--m-s2); margin-bottom: var(--m-s3); }
.sheet-kopf .m-icon-btn { background: var(--m-fill); color: var(--m-text-2); }
.sheet-inhalt { display: flex; flex-direction: column; gap: var(--m-s3); }
.sheet-titel { margin: 0; font-size: 22px; font-weight: 700; overflow-wrap: anywhere; }
.eintrag-sheet .m-card { background: var(--m-bg); }
.angabe-zeile { align-items: flex-start; gap: var(--m-s3); min-height: 44px; }
.angabe-label { flex: none; width: 76px; padding-top: 2px; }
.angabe-wert { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.verlauf summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.verlauf ul { margin: 0; padding-left: var(--m-s4); }
@media (max-width: 600px) {
  .eintrag-sheet { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: var(--m-r-l) var(--m-r-l) 0 0; padding-bottom: calc(var(--m-s4) + env(safe-area-inset-bottom, 0px)); }
}

/* Formular */
.formular { display: flex; flex-direction: column; gap: var(--m-s3); }
.formular .m-field--stack input { min-height: 44px; font-size: 17px; border: 0; background: transparent; outline: none; }
.formular textarea { width: 100%; }
.formular-fehler:empty { display: none; }

/* Rückfrage */
.frage .sheet-inhalt p { margin: 0; }

/* ---------- Markdown in den Details ---------- */
.md { overflow-wrap: anywhere; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p, .md ul, .md ol, .md pre, .md blockquote { margin: 0 0 var(--m-s3); }
.md ul, .md ol { padding-left: var(--m-s5); }
.md .md-titel { margin: var(--m-s4) 0 var(--m-s2); font-size: 17px; font-weight: 700; }
.md code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 15px; background: var(--m-fill); border-radius: 4px; padding: 0 4px; }
.md pre { overflow-x: auto; padding: var(--m-s3); background: var(--m-fill); border-radius: var(--m-r-s); }
.md pre code { padding: 0; background: none; }
.md blockquote { padding-left: var(--m-s3); border-left: 3px solid var(--m-sep); color: var(--m-text-2); }
.md .md-aufgabe { list-style: none; margin-left: calc(-1 * var(--m-s5)); display: flex; gap: var(--m-s2); }
.md .md-kasten { flex: none; width: 18px; height: 18px; margin-top: 2px; display: grid; place-items: center; border: 2px solid var(--m-text-2); border-radius: 4px; font-size: 12px; font-weight: 900; }
.md .md-erledigt { color: var(--m-text-2); }

/* ---------- Einstellungen ---------- */
.wert-zeile .adresse { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; overflow-wrap: anywhere; }
.anleitung ol { margin: 0; padding: var(--m-s1) 0 var(--m-s1) var(--m-s4); display: grid; gap: var(--m-s1); }
.reihenfolge { display: flex; gap: var(--m-s1); flex: none; padding-right: var(--m-s3); }
.m-icon-btn.klein { background: var(--m-fill); }
.m-icon-btn[disabled] { opacity: 0.35; cursor: default; }
.m-row .m-btn--small { flex: none; }

/* ---------- Rückmeldung mit Aktion ---------- */
.toast-mit-aktion { display: flex; align-items: center; gap: var(--m-s3); width: max-content; padding-right: var(--m-s2); }
.toast-mit-aktion > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toast-aktion { flex: none; min-height: 44px; padding: 0 var(--m-s3); border: 0; border-radius: var(--m-r-pill); background: transparent; color: inherit; font: inherit; font-weight: 900; text-decoration: underline; cursor: pointer; }
.m-toast { z-index: 20; width: max-content; max-width: calc(100vw - var(--m-s6)); }