/* ==========================================================================
   Funktionen (public/funktionen.php) – seitenspezifisch. Gemeinsames in praesentation.css (.pr-)
   Präfix .fk-
   ========================================================================== */

/* ── Kopf ────────────────────────────────────────────────────────────────── */
.fk-kopf { position: relative; text-align: center; padding: clamp(40px, 6vw, 80px) 0 clamp(28px, 4vw, 40px); isolation: isolate; }
.fk-kopf::before {
  content: ""; position: absolute; inset: -84px 0 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(700px 400px at 25% 0%, color-mix(in oklab, var(--rf-akzent-hell) 18%, transparent), transparent 70%),
    radial-gradient(700px 400px at 80% 20%, color-mix(in oklab, var(--pr-warm) 16%, transparent), transparent 70%);
}
.fk-kopf h1 { font-size: clamp(38px, 5.4vw, 72px); line-height: 1.02; letter-spacing: -.045em; font-weight: 800; margin: 18px 0 20px; }
.fk-kopf .pr-lead { margin-inline: auto; }

/* Sprungnavigation – klebt unter dem Header */
.fk-navi { position: sticky; top: var(--header-h, 84px); z-index: 20; padding: 10px 0; background: color-mix(in oklab, var(--pr-papier) 86%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--rf-rand); }
.fk-navi__liste { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; justify-content: safe center; }
.fk-navi__liste::-webkit-scrollbar { display: none; }
.fk-navi a { flex: none; padding: 9px 14px; border-radius: 999px; font: 600 14px/1 var(--rf-schrift-text); color: var(--rf-text-2); text-decoration: none; transition: background .2s, color .2s; }
.fk-navi a:hover { color: var(--rf-text); background: var(--rf-flaeche-2); }
.fk-navi a.ist-aktiv { background: var(--rf-text); color: var(--rf-hg); }
.fk [id] { scroll-margin-top: calc(var(--header-h, 84px) + 70px); }

/* ── Funktion: Text + Telefon ────────────────────────────────────────────── */
.fk-funktion { padding-block: clamp(56px, 8vw, 104px); }
.fk-funktion + .fk-funktion { border-top: 1px solid var(--rf-rand); }
.fk-funktion__raster { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 7vw, 110px); align-items: center; }
.fk-funktion__raster > * { min-width: 0; }
.fk-funktion--gespiegelt .fk-funktion__text { order: 2; }
.fk-funktion__text .pr-h2 { margin-top: 20px; }
.fk-funktion__bild { display: grid; place-items: center; position: relative; isolation: isolate; }
.fk-funktion__bild::before { content: ""; position: absolute; width: min(100%, 420px); aspect-ratio: 1; border-radius: 50%; z-index: -1; background: radial-gradient(circle at 40% 35%, color-mix(in oklab, var(--rf-akzent-hell) 22%, var(--rf-flaeche)), color-mix(in oklab, var(--pr-warm) 10%, var(--rf-flaeche)) 72%); }
[data-theme="dark"] .fk-funktion__bild::before { background: radial-gradient(circle at 40% 35%, color-mix(in oklab, var(--rf-akzent) 20%, var(--rf-flaeche)), var(--rf-flaeche) 70%); }
.fk-funktion__bild .pr-telefon { width: min(78%, 290px); }
.fk-doppel { grid-template-columns: 1fr 1fr; gap: 16px; }
.fk-doppel .pr-telefon { width: 100%; max-width: 250px; }
.fk-doppel .pr-telefon:last-child { transform: translateY(40px); }

.fk-symbol { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--rf-akzent-weich); color: var(--rf-akzent); }
.fk-symbol svg { width: 25px; height: 25px; }
.fk-symbol--rot { background: var(--rf-gefahr-weich); color: var(--rf-gefahr); }
.fk-symbol--warm { background: var(--pr-warm-weich); color: #c26a12; }
[data-theme="dark"] .fk-symbol--warm { color: var(--pr-warm); }
.fk-symbol--ki { background: linear-gradient(135deg, #8fd3ff, #4fd1e6 45%, #34c38f); color: #fff; }

.fk-liste { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; }
.fk-liste li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; color: var(--rf-text-2); line-height: 1.5; }
.fk-liste li > svg { width: 20px; height: 20px; flex: none; color: var(--rf-akzent); margin-top: 2px; }
.fk-plus { font-style: normal; font-size: 11.5px; font-weight: 750; letter-spacing: .02em; padding: 3px 8px; margin-left: 6px; border-radius: 999px; color: #04140c; background: linear-gradient(135deg, #9be7bd, #3fbf82); vertical-align: 2px; white-space: nowrap; }
.fk-links { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 28px; }
.fk-links .pr-knopf { min-height: 50px; font-size: 15px; }
.fk-textlink { font-weight: 650; color: var(--rf-akzent); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.fk-textlink:hover { color: var(--rf-akzent-stark); }

/* Rückruf-Stufen */
.fk-stufen { list-style: none; padding: 0; margin: 26px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; counter-reset: stufe; }
.fk-stufen li { counter-increment: stufe; position: relative; padding: 14px 16px 14px 50px; border-radius: 16px; background: var(--rf-flaeche); border: 1px solid var(--rf-rand); }
.fk-stufen li::before { content: counter(stufe); position: absolute; left: 14px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--rf-akzent); color: var(--rf-akzent-auf); font: 750 13px/1 var(--rf-schrift-text); }
.fk-stufen b { display: block; font-size: 15px; color: var(--rf-text); }
.fk-stufen span { font-size: 13px; color: var(--rf-text-3); }

/* Kacheln */
.fk-kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.fk-kacheln article { padding: 28px; border-radius: 26px; background: var(--rf-flaeche); border: 1px solid var(--rf-rand); }
.fk-kacheln h3 { font-size: 19px; letter-spacing: -.015em; margin: 18px 0 8px; font-weight: 750; }
.fk-kacheln p { margin: 0; color: var(--rf-text-2); font-size: 15px; line-height: 1.6; }

/* ── Streak-Stufenleiste ─────────────────────────────────────────────────── */
.fk-streak { padding: clamp(28px, 5vw, 56px); border-radius: 36px; background: #110c08; color: #f5ede4; overflow: hidden; position: relative; isolation: isolate; }
.fk-streak::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(600px 300px at 10% 0%, rgba(242,140,40,.28), transparent 70%), radial-gradient(500px 300px at 100% 100%, rgba(167,139,250,.2), transparent 70%); }
.fk-streak .pr-h2 { color: #fff; }
.fk-streak .pr-kicker { color: #f6ad55; }
.fk-streak .pr-lead { color: #c9b9a8; }
.fk-streak__kopf { max-width: 640px; margin-bottom: 36px; }
.fk-stufenleiste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.fk-familie { min-width: 0; padding: 14px; border-radius: 20px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); --f: #f6ad55; }
.fk-familie--metall    { --f: #d6a26a; }
.fk-familie--silber    { --f: #c8d3dd; }
.fk-familie--kosmos    { --f: #fcd34d; }
.fk-familie--edelstein { --f: #a78bfa; }
.fk-familie--legende   { --f: #67e8f9; }
.fk-familie__name { display: block; font: 750 11.5px/1 var(--rf-schrift-text); letter-spacing: .08em; text-transform: uppercase; color: var(--f); margin-bottom: 12px; }
.fk-familie__stufen { display: grid; gap: 6px; }
.fk-stufe { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 8px 10px; border-radius: 10px; background: color-mix(in oklab, var(--f) 9%, transparent); }
.fk-stufe b { font-size: 13.5px; color: #fff; font-weight: 650; white-space: nowrap; }
.fk-stufe span { font-size: 11.5px; color: #a8998b; white-space: nowrap; }
.fk-familie--legende .fk-stufe:last-child { background: linear-gradient(135deg, rgba(103,232,249,.25), rgba(246,173,85,.25)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }

/* ── Fitness-Block (data-bereich="fitness" färbt Akzent blau) ────────────── */
.fk-bereich-block { padding: clamp(32px, 5vw, 64px); border-radius: 36px; background: linear-gradient(160deg, color-mix(in oklab, var(--rf-akzent) 8%, var(--rf-flaeche)), var(--rf-flaeche)); border: 1px solid color-mix(in oklab, var(--rf-akzent) 18%, var(--rf-rand)); }
.fk-bereich-logo { width: 56px; height: 56px; border-radius: 16px; margin: 0 auto 4px; }

/* ── Refrivo Card ────────────────────────────────────────────────────────── */
.fk-card { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 6vw, 80px); align-items: center; padding: clamp(32px, 5vw, 64px); border-radius: 36px; background: var(--rf-flaeche); border: 1px solid var(--rf-rand); }
.fk-card > * { min-width: 0; }
.fk-karte {
  aspect-ratio: 1.586; width: min(100%, 400px); justify-self: center; border-radius: 22px; padding: 26px; color: #fff;
  display: flex; flex-direction: column; justify-content: space-between;
  background: linear-gradient(135deg, #0f3d27 0%, #1a8a56 55%, #2ea46f 100%); box-shadow: 0 40px 70px -30px rgba(15,61,39,.7);
  transform: rotate(-5deg); transition: transform .5s var(--rf-kurve);
}
.fk-card:hover .fk-karte { transform: rotate(-2deg) translateY(-6px); }
.fk-karte__kopf { display: flex; align-items: center; gap: 10px; }
.fk-karte__kopf img { width: 30px; height: 30px; }
.fk-karte__kopf span { font: 800 17px/1 var(--rf-schrift-titel); letter-spacing: .12em; }
.fk-karte__kopf small { margin-left: auto; font-size: 11px; letter-spacing: .1em; opacity: .75; }
.fk-karte__chip { width: 44px; height: 32px; border-radius: 7px; background: linear-gradient(135deg, #f0dfae, #c6a75e); }
.fk-karte__nummer { font: 600 17px/1 ui-monospace, monospace; letter-spacing: .18em; opacity: .92; }
.fk-karte__fuss { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: .08em; opacity: .8; }

/* ── Responsiv ───────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .fk-kacheln { grid-template-columns: 1fr 1fr; }
  .fk-kacheln article:last-child { grid-column: span 2; }
}
@media (max-width: 860px) {
  .fk-funktion__raster, .fk-card { grid-template-columns: 1fr; }
  .fk-funktion--gespiegelt .fk-funktion__text { order: 0; }
  .fk-funktion__bild { margin-top: 24px; }
  .fk-funktion__bild::before { width: min(84%, 320px); }
  .fk-funktion__bild .pr-telefon { width: min(70%, 260px); }
  .fk-stufenleiste { grid-template-columns: 1fr 1fr; }
  .fk-doppel .pr-telefon:last-child { transform: translateY(24px); }
  .fk-navi__liste { justify-content: flex-start; }
}
@media (max-width: 600px) {
  .fk-kacheln { grid-template-columns: 1fr; }
  .fk-kacheln article:last-child { grid-column: auto; }
  .fk-stufen { grid-template-columns: 1fr; }
  .fk-stufenleiste { grid-template-columns: 1fr; }
  .fk-streak { border-radius: 28px; }
}