/* Funktionsseiten (Gruppe A, 03.10.2026): /power-dialer/, /telefonie/,
   /dealphasen/, /objekte/, /unterlagen/, /kalender/, /auswertung/.
   Nur Ergaenzungen zu unterseite-hell.css; alles nimmt --f/--f-bg vom <main>.
   Markup kommt aus werkzeuge/funktion_teile.py. */

/* Tasten: Katalog-Karte mit Taste statt Zeichen in der Kachel */
.u-kat-logo.fk-taste { font-family: Outfit, sans-serif; font-size: 20px; font-weight: 600; letter-spacing: -.01em; color: var(--f); }

/* Tastenkappe im Text */
kbd.fk-kbd {
  display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 9px;
  border: 1px solid var(--line-mid); border-bottom-width: 2px; border-radius: 8px;
  background: var(--paper); color: var(--ink);
  font-family: Manrope, sans-serif; font-size: 13px; font-weight: 700; line-height: 1; white-space: nowrap;
}

/* Kuerzel-Liste: Zeilen wie .u-fakten, links die Taste */
.fk-kuerzel { display: grid; border-top: 1px solid var(--line); }
.fk-kuerzel li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; align-items: center; min-height: 58px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 16.5px; line-height: 1.5; color: var(--ink-2); }
.fk-kuerzel .fk-tasten { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: var(--ink-3); font-size: 13px; }

/* Katalog-Karte mit Haken-Liste darunter (zwei Wege nebeneinander) */
.fk-liste { display: grid; gap: 10px; margin-top: 14px; padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--f) 14%, var(--line)); }
.fk-liste li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.fk-liste svg { flex: none; width: 16px; height: 16px; margin-top: 4px; color: var(--f); }
.u-kat .fk-marke { align-self: flex-start; margin-top: 2px; }

/* Hinweis-Zeile (App, Kalender-Sync): ruhige Karte in der Bereichsfarbe */
.fk-hinweis {
  display: flex; gap: 16px; align-items: center; margin-top: 32px; padding: 18px 22px;
  border: 1px solid color-mix(in srgb, var(--f) 18%, var(--line-mid)); border-radius: 20px;
  background: color-mix(in srgb, var(--f-bg) 55%, var(--paper));
  font-size: 15.5px; line-height: 1.55; color: var(--ink-2);
}
.fk-hinweis strong { color: var(--ink); font-weight: 600; }
.fk-hinweis-kachel { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--paper); color: var(--f); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--f) 14%, transparent); }
.fk-hinweis-kachel svg { width: 20px; height: 20px; }
.u-zwei .fk-hinweis { margin-top: 24px; }

/* Fusszeile unter Karten oder Schritten */
.fk-fuss { margin-top: 20px; font-size: 14.5px; line-height: 1.55; color: var(--ink-3); }
.fk-fuss a { color: var(--f); text-decoration: underline; text-underline-offset: 3px; }

/* Medienflaeche mit einem ganzen Panel (z. B. Upload-Seite des Kunden) */
.feature-medien.fk-panel { display: grid; place-items: center; min-height: 0; padding: 56px 48px; }
.fk-panel figure { width: min(380px, 100%); margin: 0; }
.fk-panel img { display: block; width: 100%; height: auto; border: 1px solid rgba(255, 255, 255, .8); border-radius: 20px; box-shadow: 0 1px 2px rgba(23, 16, 43, .06), 0 40px 70px -34px rgba(23, 16, 43, .45); }

/* Preis- und Zaehl-Karten: rechte Pille in Bereichsfarbe, gleich breit */
.uk-reihe .fl-pille.fk-wert { min-width: 74px; justify-content: center; }

@media (max-width: 620px) {
  .fk-kuerzel li { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; font-size: 15.5px; }
  .u-kat .fk-liste { grid-column: 1 / -1; margin-top: 10px; }
  .fk-hinweis { align-items: flex-start; padding: 16px; font-size: 15px; }
  .feature-medien.fk-panel { height: auto; padding: 20px 14px; }
  .fk-panel figure { width: min(320px, 100%); }
}