/* app.css – Prüfstand: Kacheln, Filter, Eintragszeilen, Schritte (Geht/Teils/Geht nicht), Optionen, Triage, Senden. Farben nur aus der Farbwelt. */
@layer app {
  /* Kopfzeile: Zurück-Knopf links in der Pille */
  .kopf-zurueck {
    display: inline-flex; align-items: center; gap: 2px; min-block-size: var(--tipp); padding: 0 var(--a3) 0 var(--a1);
    margin-left: calc(-1 * var(--a3)); margin-right: auto; border-radius: 999px; color: var(--akzent-text); font-weight: 600; font-size: var(--fs-klein);
  }
  .kopf-zurueck svg { inline-size: 22px; block-size: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .kopf-zurueck[hidden] { display: none; }

  /* Zahl am Reiter */
  .tab { position: relative; }
  .zahl {
    position: absolute; top: 2px; left: calc(50% + 6px);
    min-inline-size: 20px; block-size: 20px; padding: 0 6px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--rot); color: #FFFFFF; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  }
  .zahl[hidden] { display: none; }
  @media (min-width: 768px) { .zahl { position: static; margin-left: var(--a1); } }

  .knopf-zweit {
    display: inline-flex; align-items: center; justify-content: center; min-block-size: var(--tipp); padding: 0 var(--a4);
    border-radius: 999px; background: var(--fuellung); color: var(--akzent-text); font-weight: 600; font-size: var(--fs-klein);
  }
  .knopf-primaer.breit, .knopf-zweit.breit { inline-size: 100%; }
  .knopf-primaer:disabled { opacity: .55; }

  /* Kacheln oben im Eingang */
  .kacheln { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--a2); }
  .kacheln[hidden] { display: none; }
  .kachel {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-block-size: 72px; padding: var(--a2) var(--a1);
    border-radius: var(--r-innen, 16px); background: var(--hg-karte); border: 1px solid var(--karte-rand); color: var(--text); text-decoration: none;
  }
  .kachel b { font-size: var(--fs-titel2); font-variant-numeric: tabular-nums; line-height: 1.1; }
  .kachel span { font-size: var(--fs-fussnote); color: var(--text-2); }

  /* Filter nach Projekt: Chip-Reihe, wischt seitlich innerhalb ihres Rahmens (die Seite selbst scrollt nie seitlich) */
  .filter { display: flex; gap: var(--a2); overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--rand)); padding-inline: var(--rand); }
  .filter[hidden] { display: none; }
  .filter::-webkit-scrollbar { display: none; }
  .filter button { flex: none; min-block-size: 40px; padding: 0 var(--a3); border-radius: 999px; background: var(--fuellung); color: var(--text); font-size: var(--fs-klein); font-weight: 600; position: relative; }
  .filter button::after { content: ""; position: absolute; inset: -4px 0; } /* Tippfläche 48 px */
  .filter button[aria-pressed="true"] { background: var(--akzent); color: var(--akzent-kontrast); }

  .gruppe { font-size: var(--fs-fussnote); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); margin: var(--a4) 0 var(--a2); }
  .liste-eintraege { display: grid; gap: var(--a2); }
  .leer { color: var(--text-2); font-size: var(--fs-klein); }

  /* Eintragszeile: Punkt (Zustand), Titel, Projekt und Stand */
  .zeile {
    display: flex; align-items: center; gap: var(--a3); inline-size: 100%; min-block-size: 64px; padding: var(--a3) var(--a4);
    text-align: left; color: var(--text); text-decoration: none;
    background: var(--hg-karte); border: 1px solid var(--karte-rand); border-radius: var(--r-innen, 16px); box-shadow: var(--glas-glanz);
  }
  .zeile .punkt { inline-size: 12px; block-size: 12px; border-radius: 50%; flex: none; background: var(--text-3); }
  .zeile.neu .punkt { background: var(--rot); }
  .zeile.angefangen .punkt { background: var(--orange); }
  .zeile.beantwortet .punkt, .zeile.erledigt .punkt { background: var(--gruen); }
  .zeile .mitte { flex: 1; min-inline-size: 0; display: grid; gap: 2px; }
  .zeile .titel { font-weight: 600; overflow-wrap: anywhere; }
  .zeile .meta { font-size: var(--fs-fussnote); color: var(--text-2); font-variant-numeric: tabular-nums; }
  .zeile .pfeil { color: var(--text-3); flex: none; }
  .zeile .pfeil svg { inline-size: 18px; block-size: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .projekt-chip { display: inline-flex; align-items: center; min-block-size: 22px; padding: 0 var(--a2); border-radius: 999px; background: var(--akzent-weich); color: var(--text); font-size: var(--fs-fussnote); font-weight: 600; margin-right: var(--a1); }
  .prio { color: var(--warm-text); font-weight: 700; }

  /* Eintragsansicht */
  .eintrag-kopf { display: grid; gap: var(--a2); }
  .eintrag-kopf .grosstitel { font-size: var(--fs-titel2); padding: 0; overflow-wrap: anywhere; }
  .eintrag-text { white-space: pre-line; color: var(--text); overflow-wrap: anywhere; }
  .karte.schritt { display: grid; gap: var(--a2); padding: var(--a4); }
  .schritt .frage { font-weight: 600; overflow-wrap: anywhere; }
  .schritt .wie { font-size: var(--fs-klein); color: var(--text-2); white-space: pre-line; overflow-wrap: anywhere; }
  .wahl { display: flex; gap: var(--a2); }
  .wahl button { flex: 1; min-block-size: var(--tipp); border-radius: 12px; border: 1px solid var(--trenner); background: var(--fuellung); font-weight: 600; font-size: var(--fs-klein); }
  .wahl button[aria-pressed="true"].geht { background: var(--ok-hg); color: var(--ok-text); border-color: currentColor; }
  .wahl button[aria-pressed="true"].teils { background: var(--warn-hg); color: var(--warn-text); border-color: currentColor; }
  .wahl button[aria-pressed="true"].geht_nicht { background: var(--fehler-hg); color: var(--fehler-text); border-color: currentColor; }
  textarea, .feld input {
    inline-size: 100%; min-block-size: var(--tipp); padding: var(--a3); border-radius: 12px; border: 1px solid var(--trenner);
    background: var(--hg); color: var(--text); font: inherit; font-size: max(16px, var(--fs-klein)); /* ab 16 px zoomt iOS nicht */ resize: vertical;
  }
  textarea { min-block-size: 88px; }
  textarea.klein { min-block-size: var(--tipp); }
  .feld { display: grid; gap: var(--a1); margin-top: var(--a3); }
  .option {
    display: flex; gap: var(--a3); align-items: flex-start; inline-size: 100%; min-block-size: var(--tipp); padding: var(--a3);
    text-align: left; border-radius: 12px; border: 1px solid var(--trenner); background: var(--fuellung);
  }
  .option[aria-pressed="true"] { border-color: var(--akzent); background: var(--akzent-weich); }
  .option .rund { inline-size: 20px; block-size: 20px; border-radius: 50%; border: 2px solid var(--text-2); flex: none; margin-top: 2px; }
  .option[aria-pressed="true"] .rund { border-color: var(--akzent); background: var(--akzent); box-shadow: inset 0 0 0 3px var(--hg); }
  .option .text { display: grid; gap: 2px; }
  .option small { color: var(--text-2); font-size: var(--fs-fussnote); }
  .empfehlung { color: var(--akzent-text); font-size: var(--fs-fussnote); font-weight: 700; }
  .triage { display: grid; grid-template-columns: 1fr 1fr; gap: var(--a2); }
  .triage button { min-block-size: var(--tipp); border-radius: 12px; background: var(--fuellung); border: 1px solid var(--trenner); font-weight: 600; font-size: var(--fs-klein); }
  .triage button[aria-pressed="true"] { background: var(--akzent); color: var(--akzent-kontrast); border-color: var(--akzent); }
  .triage-bis { display: flex; gap: var(--a2); flex-wrap: wrap; }
  .triage-bis[hidden] { display: none; }

  /* Senden: fest über der Tab-Leiste, auch bei kurzen Einträgen (sticky stand dort im Fluss und lag unter dem Hinweis „Neue Version“); Breite wie main */
  .senden {
    position: fixed; z-index: 5; bottom: calc(var(--leiste-hoehe) + env(safe-area-inset-bottom) - 8px);
    left: env(safe-area-inset-left); right: env(safe-area-inset-right); margin-inline: auto; max-inline-size: 680px; padding-inline: var(--rand);
    display: grid; gap: var(--a1); padding-top: var(--a3);
    background: linear-gradient(transparent, var(--hg) 35%);
  }
  /* Platzhalter am Inhaltsende, damit das Letzte (Verlauf) über den Knopf scrollt */
  #ansicht-eintrag:has(> .senden) { padding-bottom: calc(var(--a3) + var(--tipp) + var(--a2)); }
  body:has(.offline-hinweis) #ansicht-eintrag:has(> .senden) { padding-bottom: calc(var(--a3) + 2 * var(--tipp) + 2 * var(--a2)); }
  .senden .hinweis { margin: 0; text-align: center; }
  @media (min-width: 768px) { .senden { bottom: var(--a2); } }
  /* Hinweis „Neue Version“ (Offline-Modul) liegt als Pille über der Tab-Leiste: Senden rückt so lange darüber, beide bleiben bedienbar */
  body:has(.offline-hinweis) .senden { bottom: calc(var(--leiste-hoehe) + max(var(--a2), env(safe-area-inset-bottom)) + var(--tipp) + var(--a2)); }
  @media (min-width: 768px) { body:has(.offline-hinweis) .senden { bottom: calc(max(var(--a4), env(safe-area-inset-bottom)) + var(--tipp) + var(--a2)); } }
  .fertig-hinweis { padding: var(--a3) var(--a4); border-radius: 12px; background: var(--ok-hg); color: var(--ok-text); font-weight: 600; }
  .verworfen-hinweis { padding: var(--a3) var(--a4); border-radius: 12px; background: var(--warn-hg); color: var(--warn-text); font-weight: 600; }
  .verlauf { font-size: var(--fs-fussnote); color: var(--text-2); display: grid; gap: var(--a1); padding-bottom: var(--a2); }

  /* Speicherstand und Meldungen: kleine Pille mittig auf der Kopfzeile, nicht darunter (dort steht die Kennungszeile; unten lägen Senden-Knopf und Tab-Leiste); Tipps gehen durch */
  .speicherstand {
    position: fixed; z-index: 35; left: 50%; transform: translateX(-50%); pointer-events: none;
    top: calc(max(var(--a2), env(safe-area-inset-top)) + var(--a2) + 8px);
    max-inline-size: calc(100% - 2 * var(--rand)); padding: var(--a2) var(--a4); border-radius: 999px;
    background: var(--text); color: var(--hg); font-size: var(--fs-klein); text-align: center; box-shadow: var(--schatten);
  }
  .speicherstand[hidden] { display: none; }
  @media (min-width: 768px) { .speicherstand { top: auto; bottom: var(--a6); } }
  .blatt-zeile[hidden] { display: none; }
}

/* Stufe 2: Zeile „Mitteilungen“ im Zahnrad – Zustand als zweite Zeile unter der Beschriftung */
@layer app {
  .push-text { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
  .push-zustand { color: var(--text-2); font-size: var(--fs-fussnote); }
  .schalter-zeile input[hidden] { display: none; }
}