/* Seite „Funktionen" (21.10.2026). Farben und Hell/Dunkel aus den Variablen der App
   (static/style.css); alle Klassen beginnen mit fk-, damit nichts kollidiert. */
.fk{--fk-akzent:var(--primary-light);max-width:1180px;margin:0 auto;padding:0 4px 32px;line-height:1.6}
:root[data-theme="light"] .fk{--fk-akzent:var(--primary-dark)}
.fk a{color:var(--fk-akzent)}
.fk-kopf{text-align:center;padding:32px 0 12px}
.fk-kick{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--fk-akzent)}
.fk h1{font-size:clamp(30px,4.6vw,50px);line-height:1.1;letter-spacing:-1px;margin:12px auto 12px;max-width:20ch}
.fk-lead{font-size:20px;color:var(--text-muted);max-width:56ch;margin:0 auto}
.fk-raster{display:grid;grid-template-columns:210px minmax(0,1fr);gap:44px;padding-top:24px}
.fk-toc{position:sticky;top:84px;align-self:start;display:flex;flex-direction:column;gap:2px;font-size:14px}
.fk-toc b{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--text-faint);margin-bottom:8px}
.fk-toc a{display:flex;gap:8px;align-items:center;color:var(--text-muted);text-decoration:none;padding:8px 12px;border-radius:9px;border-left:2px solid transparent}
.fk-toc a:hover,.fk-toc a.aktiv{color:var(--text);background:var(--surface);border-color:var(--primary)}
.fk-sec{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:44px;align-items:center;padding:40px 0 46px;border-bottom:1px solid var(--border);scroll-margin-top:84px}
.fk-sec:first-child{padding-top:12px}
.fk-sec:nth-child(even) .fk-bild{order:-1}
.fk-sec h2{font-size:clamp(24px,3vw,32px);line-height:1.15;letter-spacing:-.6px;margin:12px 0 16px}
.fk-text small{display:block;font-size:12px;letter-spacing:1px;text-transform:uppercase;font-weight:700;margin-bottom:4px}
.fk-problem{border-left:3px solid var(--border-strong);padding:2px 0 2px 16px;margin:0 0 16px;color:var(--text-muted)}
.fk-problem small{color:var(--text-faint)}.fk-problem p{margin:0}
.fk-hilfe small{color:var(--fk-akzent)}.fk-hilfe p{margin:0 0 16px}
.fk-punkte{list-style:none;padding:0;margin:0 0 16px}
.fk-punkte li{display:flex;gap:12px;padding:4px 0}.fk-punkte li::before{content:"✓";color:var(--primary);font-weight:800;flex-shrink:0}
.fk-mehr{display:inline-block;font-size:16px;font-weight:600;text-decoration:none}.fk-mehr:hover{text-decoration:underline}
.fk-hinweis{font-size:14px;color:var(--text-faint);margin:12px 0 0}
.fk-bsp{font-size:12px;color:var(--text-faint);margin:8px 2px 0;text-align:right}
/* Bilder */
.fk-karte{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:0 18px 50px rgba(0,0,0,.25)}
:root[data-theme="light"] .fk-karte{box-shadow:0 14px 40px rgba(0,0,0,.10)}
.fk-karte .fk-t{font-size:12px;letter-spacing:1px;text-transform:uppercase;font-weight:700;color:var(--text-faint);margin-bottom:12px}
.fk-zeile{display:flex;align-items:center;gap:12px;background:var(--surface3);border-radius:12px;padding:12px 12px;margin-bottom:8px;font-size:14px}
.fk-marke{margin-left:auto;font-size:12px;font-weight:700;padding:2px 12px;border-radius:99px;background:var(--primary-glow);color:var(--fk-akzent);white-space:nowrap}
.fk-marke.ok{background:rgba(74,222,128,.15);color:#4ade80}
:root[data-theme="light"] .fk-marke.ok{color:#15803d;background:rgba(34,197,94,.14)}
.fk-gantt{position:relative}
.fk-gl{display:grid;grid-template-columns:78px minmax(0,1fr);gap:12px;align-items:center;margin:8px 0;font-size:14px;color:var(--text-muted)}
.fk-gb{position:relative;height:16px;background:var(--surface3);border-radius:6px}
.fk-gb i{position:absolute;top:0;bottom:0;border-radius:6px;background:var(--primary)}.fk-gb i.v{background:#e5484d}
.fk-heute{position:absolute;top:34px;bottom:10px;left:calc(78px + 10px + (100% - 78px - 10px) * .46);width:2px;background:#4ade80}
.fk-heute::before{content:attr(data-text);position:absolute;top:-17px;left:-16px;font-size:12px;color:#4ade80}
/* Papier */
.fk-papier{background:#fff;color:#16212e;border-radius:8px;overflow:hidden;font-size:14px;box-shadow:0 20px 50px rgba(0,0,0,.35);border:1px solid #e3e6ea}
.fk-pkopf{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 16px 12px;border-bottom:3px solid #16212e}
.fk-pkopf b{display:flex;align-items:center;gap:8px;font-size:14px}.fk-pkopf i{width:30px;height:30px;border-radius:8px;background:#16212e;color:#fff;font-style:normal;font-weight:800;font-size:12px;display:grid;place-items:center}
.fk-pkopf small{color:#5a5a6a;font-size:12px;text-align:right;line-height:1.35}
.fk-pkoerper{padding:16px 16px;min-height:210px}
.fk-pkoerper h3{margin:0;font-size:20px;letter-spacing:-.3px;color:#16212e}.fk-pkoerper .par{color:#5a5a6a;margin:0 0 12px}
.fk-pfeld{display:grid;grid-template-columns:96px minmax(0,1fr);gap:4px 12px;padding:4px 0;border-bottom:1px solid #eceef1}
.fk-pfeld span{color:#5a5a6a}.fk-pfeld strong{color:#16212e}
.fk-pl{color:#8a95a3;font-size:12px;letter-spacing:.06em;text-transform:uppercase;margin-top:8px}
.fk-pt{margin:4px 0;color:#3b4452}
.fk-pfuss{display:flex;justify-content:space-between;padding:8px 16px;border-top:1px solid #e3e6ea;color:#8a95a3;font-size:12px}
.fk-auswahl{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.fk-wahl{border:1.5px solid var(--border-strong);background:var(--surface);color:var(--text);border-radius:99px;padding:8px 12px;font:inherit;font-size:14px;cursor:pointer}
.fk-wahl.an{border-color:var(--primary);background:var(--primary-glow);font-weight:700}
.fk-auswahl .fk-gruppe{width:100%;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--text-faint);font-weight:700;margin:2px 0 -2px}
.fk-blink{animation:fkblink .7s}@keyframes fkblink{0%{background:#fde7c4}100%{background:transparent}}
.fk-schluss{text-align:center;margin:44px auto 24px;padding:40px 24px;background:linear-gradient(160deg,var(--primary-glow),transparent);border:1px solid var(--border-strong);border-radius:20px;max-width:760px}
.fk-schluss h2{margin:0 0 8px;font-size:clamp(24px,3vw,32px)}.fk-schluss p{color:var(--text-muted);margin:0 0 16px}
.fk-knopf{display:inline-block;background:var(--primary);color:var(--on-primary)!important;font-weight:700;padding:12px 24px;border-radius:12px;text-decoration:none}
.fk-knopf.gh{background:transparent;color:var(--text)!important;border:1.5px solid var(--border-strong)}
@media(max-width:900px){.fk-raster{grid-template-columns:minmax(0,1fr);gap:12px}.fk-toc{position:static;flex-direction:row;flex-wrap:wrap}.fk-toc b{width:100%}.fk-sec{grid-template-columns:minmax(0,1fr);gap:24px}.fk-sec:nth-child(even) .fk-bild{order:0}}
