/* cf-mobil.css — gehoert zu cf-mobil.js (CHURCHFLOW-STYLEGUIDE-MOBIL.md §19). In jeder App
   wortgleich. Farben kommen aus den Variablen der App; die Rueckfallwerte decken die
   abweichenden Namen der aelteren Apps ab (--text/--border/--danger). */

:root {
  --cfm-ink: var(--ink, var(--text, #1f2a28));
  --cfm-muted: var(--muted, #5e6a67);
  --cfm-card: var(--card, #fff);
  --cfm-line: var(--line, var(--border, #e5e4de));
  --cfm-brand: var(--brand, #735c21);
  --cfm-err: var(--err, var(--danger, #dc2626));
  --cfm-leiste-h: 64px;
  --cfm-unten: env(safe-area-inset-bottom, 0px);
}

/* Am Rechner gibt es nichts davon. */
.cf-leiste, .cf-plus, .cf-mehr-knopf { display: none; }

/* ---------------- Suche und Filter (§8) — Rechner UND Handy, seit 05.11.2026 ----------------
   Vorbild Predigtdatenbank (Andy): Suchzeile in einer Karte, ohne Beschriftung darueber,
   rechts der Knopf „Filter" (filter_alt) mit Zaehler, darunter die aktiven Filter als Chips.
   `html …` steht davor, damit die Regel gegen `.filterbar` der App gewinnt -- cf-mobil.css
   wird VOR style.css geladen. */
html [data-cf-filter] {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
  background: var(--cfm-card); border: 1px solid var(--cfm-line); border-radius: 14px; padding: 16px;
}
html [data-cf-filter][hidden] { display: none !important; }
html [data-cf-filter] > .filter-field.grow { flex: 1 1 260px; min-width: 0; margin: 0; }
html [data-cf-filter] > .filter-field.grow > label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0;
}
html [data-cf-filter] > .filter-toggle { display: none !important; }   /* aelteres App-eigenes Muster */
html [data-cf-filter] > .filter-panel { display: contents !important; }
.cf-filter-knopf {
  order: 5; display: inline-flex; position: relative; align-items: center; justify-content: center; gap: 8px;
  /* So hoch wie das Suchfeld daneben (Styleguide 7.1) -- nicht jede App hat 44 px. */
  align-self: stretch; min-height: 36px; padding: 0 16px; flex: 0 0 auto; margin: 0;
  border: 1px solid var(--cfm-line); border-radius: 10px; background: var(--cfm-card);
  color: var(--cfm-ink); font: inherit; font-weight: 600; font-size: .95rem; cursor: pointer;
}
.cf-filter-knopf[hidden] { display: none !important; }
.cf-filter-knopf:hover { border-color: var(--cfm-muted); }
.cf-filter-knopf.aktiv { border-color: var(--cfm-brand); color: var(--cfm-brand); }
html[data-theme=dark] .cf-filter-knopf.aktiv { color: var(--chip-ink, var(--cfm-brand)); }
.cf-filter-knopf .material-symbols-outlined { font-size: 20px; }
.cf-filter-zahl {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--cfm-brand); color: #fff; font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.cf-filter-zahl[hidden] { display: none; }
.cf-filter-chips { order: 7; flex: 0 0 100%; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.cf-filter-chips[hidden] { display: none; }
.cf-filter-chip {
  display: inline-flex; align-items: center; gap: 2px; height: 32px; padding: 0 4px 0 12px; border-radius: 999px;
  background: var(--chip, var(--subtle, #eef0ed)); color: var(--chip-ink, var(--cfm-ink)); font-size: .85rem; font-weight: 500;
  white-space: nowrap; max-width: 100%;
}
.cf-filter-chip button {
  border: 0; background: none; color: inherit; width: 26px; height: 26px; border-radius: 50%; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.cf-filter-chip button:hover { background: rgba(0, 0, 0, .08); }
.cf-filter-chip button .material-symbols-outlined { font-size: 16px; }
.cf-filter-umbruch { order: 8; flex: 0 0 100%; height: 0; display: none; }
html:not(.cf-handy) [data-cf-filter].cf-filter-offen > .cf-filter-umbruch { display: block; }
/* Am Rechner klappen die Filter unter der Suchzeile auf (wie in der Predigtdatenbank). */
html:not(.cf-handy) [data-cf-filter] > .cf-filter-teil,
html:not(.cf-handy) [data-cf-filter] > .filter-panel > .cf-filter-teil { order: 9; }
html:not(.cf-handy) [data-cf-filter]:not(.cf-filter-offen) > .cf-filter-teil,
html:not(.cf-handy) [data-cf-filter]:not(.cf-filter-offen) > .filter-panel > .cf-filter-teil { display: none !important; }

/* ---------------- Blatt von unten (§10) — auch am Rechner nutzbar ---------------- */
.cf-blatt-huelle { position: fixed; inset: 0; z-index: 1500; }
.cf-blatt-grund {
  position: absolute; inset: 0; background: rgba(0, 0, 0, .45);
  opacity: 0; transition: opacity .2s;
}
.cf-blatt {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; max-width: 640px;
  max-height: 90vh; max-height: 90dvh; display: flex; flex-direction: column;
  background: var(--cfm-card); color: var(--cfm-ink);
  border-radius: 16px 16px 0 0; box-shadow: 0 -6px 28px rgba(0, 0, 0, .22);
  transform: translateY(100%); transition: transform .22s cubic-bezier(.2, .8, .3, 1);
  padding-bottom: var(--cfm-unten); outline: none;
}
.cf-blatt-huelle.offen .cf-blatt-grund { opacity: 1; }
.cf-blatt-huelle.offen .cf-blatt { transform: none; }
.cf-blatt-griff {
  width: 32px; height: 4px; border-radius: 2px; background: var(--cfm-line);
  margin: 10px auto 4px; flex: 0 0 auto;
}
.cf-blatt-kopf { padding: 6px 20px 8px; flex: 0 0 auto; }
.cf-blatt-kopf h2 { margin: 0; font-size: 1.05rem; font-weight: 600; line-height: 1.3; }
/* min-height:0 ist Pflicht: ohne sie waechst der Inhalt als Flex-Kind ueber die 90 % hinaus,
   statt zu scrollen -- das Ende (Beitraege: „Fertig") lag dann unerreichbar unter dem Rand. */
.cf-blatt-inhalt {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 4px 20px 20px; overscroll-behavior: contain;
}
/* Fusszeile: steht fest unter dem scrollenden Inhalt, in Daumenreichweite. */
.cf-blatt-fuss {
  flex: 0 0 auto; padding: 12px 20px; border-top: 1px solid var(--cfm-line);
  background: var(--cfm-card);
}
.cf-blatt-unter { margin: 0 0 8px; color: var(--cfm-muted); font-size: .9rem; }
html.cf-blatt-offen, html.cf-blatt-offen body { overflow: hidden; }

/* Aktionsblatt (§7): eine Zeile je Aktion, 52 px, Gefaehrliches zuletzt. */
.cf-aktionsblatt .cf-blatt-inhalt { padding: 0 8px 12px; }
.cf-aktionen { display: flex; flex-direction: column; }
.cf-aktion {
  display: flex; align-items: center; gap: 16px; min-height: 52px; width: 100%;
  padding: 0 14px; border: 0; background: none; color: inherit; font: inherit;
  font-size: 1rem; text-align: left; border-radius: 10px; cursor: pointer;
}
.cf-aktion:active, .cf-aktion:hover { background: var(--subtle, rgba(0, 0, 0, .05)); }
.cf-aktion .material-symbols-outlined { font-size: 22px; color: var(--cfm-muted); }
.cf-aktion.gefahr, .cf-aktion.gefahr .material-symbols-outlined { color: var(--cfm-err); }
.cf-aktion-trenner { height: 1px; background: var(--cfm-line); margin: 6px 14px; }

/* Filterblatt (§8) — in JEDER App gleich: Beschriftung klein darueber, Felder und Knoepfe
   44 px, „Fertig" als Hauptknopf fest unten. Die Regeln sind bewusst spezifischer als die
   der Apps, denn deren Feldstile haengen oft an einem Elternteil (.search-bar select …),
   das im Blatt fehlt -- ohne diese Regeln standen dort winzige graue Auswahlfelder. */
.cf-filter-inhalt { display: flex; flex-direction: column; gap: 14px; padding-top: 6px; }
.cf-filter-inhalt > * { width: 100%; max-width: none !important; margin: 0 !important; flex: 0 0 auto !important; }
.cf-filter-inhalt [hidden] { display: none !important; }
/* Huellen der App (Panel, Feldgruppe) tragen im Blatt keinen eigenen Rahmen und Abstand. */
.cf-filterblatt .cf-filter-inhalt > :not(select):not(input):not(button):not(label) {
  border: 0 !important; padding: 0 !important; background: none !important; box-shadow: none !important;
}
.cf-filterblatt .cf-filter-inhalt .filter-field,
.cf-filterblatt .cf-filter-inhalt .cf-filter-feld { display: flex; flex-direction: column; gap: 6px; min-width: 0; width: 100%; margin: 0; }
.cf-filterblatt .cf-filter-inhalt label { text-transform: none; letter-spacing: 0; }
.cf-filterblatt .cf-filter-inhalt label:not(.cf-check):not(:has(input, select)),
.cf-filterblatt .cf-filter-inhalt .filter-label {
  display: block; margin: 0; font-size: .78rem; font-weight: 600; line-height: 1.3;
  color: var(--cfm-muted); text-transform: none; letter-spacing: 0;
}
.cf-filterblatt .cf-filter-inhalt select,
.cf-filterblatt .cf-filter-inhalt input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]) {
  box-sizing: border-box; width: 100% !important; max-width: none; min-width: 0;
  height: 44px !important; min-height: 44px; margin: 0; padding: 0 12px;
  border: 1px solid var(--cfm-line); border-radius: 8px;
  background-color: var(--input, var(--cfm-card)); color: var(--cfm-ink);
  font: inherit; font-size: 16px; /* 16 px: sonst zoomt iOS beim Antippen in die Seite */
  opacity: 1;
}
.cf-filterblatt .cf-filter-inhalt select {
  -webkit-appearance: none; appearance: none; padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23888' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px;
}
.cf-filterblatt .cf-filter-inhalt select:focus,
.cf-filterblatt .cf-filter-inhalt input:focus { outline: none; border-color: var(--cfm-brand); }
/* Knoepfe im Blatt (Favoriten, Zuruecksetzen …): volle Breite, 44 px, nebeneinander gleich breit. */
.cf-filterblatt .cf-filter-inhalt button:not(.cf-check):not(.filter-chip) {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  flex: 1 1 0; width: 100%; min-width: 0; min-height: 44px; height: auto; margin: 0;
  padding: 0 14px; border-radius: 8px; font-size: .95rem; font-weight: 600; white-space: nowrap;
}
.cf-filterblatt .cf-filter-inhalt button:not(.cf-check):not(.filter-chip):not(.active):not([aria-pressed=true]) {
  border: 1px solid var(--cfm-line); background: var(--cfm-card); color: var(--cfm-ink);
}
.cf-filterblatt .cf-filter-inhalt button:disabled { opacity: .5; cursor: default; }
/* Eigene Auswahlfelder der Apps (Knopf, der eine Liste aufklappt) sehen aus wie ein <select>. */
.cf-filterblatt .cf-filter-inhalt [data-cf-label] > button:first-child {
  justify-content: space-between; height: 44px; padding: 0 12px; font-size: 16px; font-weight: 400; text-align: left;
}
.cf-filterblatt .cf-filter-inhalt button .material-symbols-outlined { font-size: 20px; margin: 0; }
/* Knopfreihen der Apps (.filter-actions …) bleiben Reihen, aber ohne Umbruch und gleich breit. */
.cf-filterblatt .cf-filter-inhalt :is(.filter-actions, .filter-buttons) { display: flex; gap: 10px; flex-wrap: nowrap; width: 100%; }
.cf-filter-fertig {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 48px;
  margin: 0; padding: 0 16px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--cfm-brand); color: #fff; font: inherit; font-size: 1rem; font-weight: 600;
}
.cf-filter-fertig:active { filter: brightness(.92); }

/* ---------------- Handy (§2: unter 768 px) ---------------- */
/* Handy-Modus (§2): gilt, solange cf-mobil.js die Klasse cf-handy an <html> setzt — Standard
   unter 768 px, je App einstellbar ueber data-cf-mobil-grenze. */
  /* untere Leiste (§4) */
  html.cf-handy .cf-leiste {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    height: calc(var(--cfm-leiste-h) + var(--cfm-unten)); padding-bottom: var(--cfm-unten);
    background: var(--cfm-card); border-top: 1px solid var(--cfm-line);
  }
  html.cf-handy .cf-leiste-ziel {
    flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; border: 0; background: none; color: var(--cfm-muted); font: inherit;
    font-size: 12px; font-weight: 500; cursor: pointer; min-width: 0; padding: 0 4px;
    -webkit-tap-highlight-color: transparent;
  }
  html.cf-handy .cf-leiste-pille {
    display: flex; align-items: center; justify-content: center;
    width: 60px; height: 30px; border-radius: 15px; transition: background .15s;
  }
  html.cf-handy .cf-leiste-pille .material-symbols-outlined { font-size: 24px; }
  html.cf-handy .cf-leiste-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  html.cf-handy .cf-leiste-ziel.aktiv { color: var(--cfm-brand); font-weight: 600; }
  html.cf-handy .cf-leiste-ziel.aktiv .cf-leiste-pille { background: color-mix(in srgb, var(--cfm-brand) 16%, transparent); }
  html.cf-handy .cf-leiste-ziel.aktiv .material-symbols-outlined { font-variation-settings: 'FILL' 1; }

  /* Platz, damit die letzte Zeile ueber „+" und Leiste hinaus scrollt (§3.2) */
  html.cf-handy.cf-mit-leiste body { padding-bottom: calc(var(--cfm-leiste-h) + 56px + 24px + var(--cfm-unten)); }

  /* „+" (§6) */
  html.cf-handy .cf-plus {
    display: inline-flex; position: fixed; z-index: 910; right: 16px;
    bottom: calc(16px + var(--cfm-unten));
    align-items: center; gap: 8px; height: 56px; min-width: 56px; padding: 0 20px 0 16px;
    border: 0; border-radius: 18px; background: var(--cfm-brand); color: #fff;
    font: inherit; font-size: 1rem; font-weight: 600; cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .28); transition: padding .2s, gap .2s;
    -webkit-tap-highlight-color: transparent;
  }
  html.cf-handy.cf-mit-leiste .cf-plus { bottom: calc(var(--cfm-leiste-h) + 16px + var(--cfm-unten)); }
  html.cf-handy .cf-plus[hidden] { display: none; }
  html.cf-handy .cf-plus .material-symbols-outlined { font-size: 26px; }
  html.cf-handy .cf-plus-text { white-space: nowrap; overflow: hidden; max-width: 220px; transition: max-width .2s; }
  html.cf-handy .cf-plus.klein { padding: 0 15px; gap: 0; }
  html.cf-handy .cf-plus.klein .cf-plus-text { max-width: 0; }
  html.cf-handy [data-cf-plus] { display: none !important; }
  html.cf-handy .cf-leer { display: none !important; }

  /* Formulare, Dialoge, Tastatur: Leiste und „+" gehen aus dem Weg (§4) */
  html.cf-handy.cf-dialog-offen .cf-leiste,
html.cf-handy.cf-dialog-offen .cf-plus,
html.cf-handy.cf-tastatur .cf-leiste,
html.cf-handy.cf-tastatur .cf-plus { display: none; }

/* ---------------- Fusszeile eines Formulars (§11) ----------------
   Abbrechen · Speichern stehen auf dem Handy IMMER unten in der Daumenzone -- in jedem
   Formular jeder App gleich (Andy 27.09.2026). Ist die Tastatur offen, sitzt die Zeile
   direkt darueber (--cfm-tastatur kommt aus cf-mobil.js), sie wandert nie nach oben.
   Die App setzt die Klasse an ihre Knopfzeile; der Bereich, der darueber scrollt, bekommt
   `cf-formfuss-raum`, damit das letzte Feld nicht darunter verschwindet. */
html.cf-handy .cf-formfuss {
  position: fixed; left: 0; right: 0; bottom: var(--cfm-tastatur, 0px); z-index: 900;
  display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 8px; margin: 0;
  padding: 10px 16px calc(10px + var(--cfm-unten)); background: var(--cfm-card);
  border-top: 1px solid var(--cfm-line); box-sizing: border-box;
}
html.cf-handy.cf-tastatur .cf-formfuss { padding-bottom: 10px; }
html.cf-handy .cf-formfuss > .btn, html.cf-handy .cf-formfuss > button:not(.cf-mehr-knopf):not(.cf-formfuss-symbol) {
  flex: 1 1 0; min-width: 0; min-height: 48px; justify-content: center; margin: 0;
}
html.cf-handy .cf-formfuss > [hidden] { display: none !important; }
html.cf-handy .cf-formfuss-raum { padding-bottom: calc(84px + var(--cfm-unten) + var(--cfm-tastatur, 0px)) !important; }

  /* „⋮" statt einer Knopfgruppe (§7) */
  html.cf-handy [data-cf-mehr] > :not(.cf-mehr-knopf) { display: none !important; }
  html.cf-handy .cf-mehr-knopf {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border: 0; border-radius: 22px; background: none;
    color: var(--cfm-ink); cursor: pointer; flex: 0 0 auto;
  }
  html.cf-handy .cf-mehr-knopf:active { background: var(--subtle, rgba(0, 0, 0, .06)); }

  /* Zeilen, deren Knoepfe ins Blatt wandern (§9): Knoepfe weg, dafuer ein „›" */
  html.cf-handy [data-cf-zeilen] .cf-zeilenknoepfe { display: none !important; }

  /* Filterleiste (§8): Suche + Filterknopf in einer Zeile, Chips darunter; die Teile sind im Blatt */
  html.cf-handy [data-cf-filter] { gap: 8px; padding: 12px; }
  html.cf-handy [data-cf-filter] > .filter-field.grow { flex: 1 1 0; }
  html.cf-handy [data-cf-filter] > .filter-field:not(.grow),
  html.cf-handy [data-cf-filter] > button.btn-cancel,
  html.cf-handy [data-cf-filter] > .cf-filter-teil,
  html.cf-handy [data-cf-filter] > .filter-panel > * { display: none !important; }
  html.cf-handy [data-cf-filter] > .filter-check { flex: 0 0 100%; order: 6; }
  html.cf-handy .cf-filter-knopf { width: 44px; min-height: 44px; padding: 0; }
  html.cf-handy .cf-filter-wort { display: none; }
  html.cf-handy .cf-filter-zahl { position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; }
  /* Chips am Handy in EINER Zeile, die waagerecht rollt (§13) */
  html.cf-handy .cf-filter-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }