/* RWD Faktura — Design wie die Tool-Familie (CC-Tokens), aber nur linkes Menü, keine Top-Bar (User 29.10.2026). */
html { background: #14375E; }

:root {
    --rwd-blue-900: #14375E;
    --rwd-blue-700: #1F4E7A;
    --rwd-blue-500: #3A6EA5;
    --rwd-teal-600: #2BA587;
    --rwd-teal-100: #DDF3EC;
    --bg: #f3f5f8;
    --flaeche: #ffffff;
    --flaeche-2: #f8fafc;
    --linie: #e6eaf0;
    --text: #1d2330;
    --text-2: #475569;
    --text-muted: #6b7280;
    --gruen: #16a34a; --gruen-hell: #dcfce7;
    --gelb: #d97706; --gelb-hell: #fef3c7;
    --rot: #dc2626; --rot-hell: #fee2e2;
    --blau-hell: #e8f0fa;
    --radius: 12px;
    --schatten: 0 1px 2px rgba(16, 35, 61, .06), 0 1px 1px rgba(16, 35, 61, .04);
    --schatten-hoch: 0 10px 30px rgba(20, 55, 94, .14), 0 2px 6px rgba(20, 55, 94, .08);
    --nav: 248px;
    --ease: cubic-bezier(.2, .8, .2, 1);
}
* { box-sizing: border-box; }
html { height: 100%; }
body { min-height: 100%; }
html, body { margin: 0; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--text); font-size: 14px; }
body { background: var(--bg); animation: fk-seite-ein .3s ease-out both; }
@keyframes fk-seite-ein { from { opacity: 0; } to { opacity: 1; } }
a { color: var(--rwd-blue-700); }
h1, h2, h3 { margin: 0; color: var(--rwd-blue-900); }
h1 { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: 16px; font-weight: 650; }
h3 { font-size: 14px; font-weight: 600; }
h1:focus { outline: none; }

/* ── Menü links ───────────────────────────────────────────────────────── */
.fk-shell { min-height: 100vh; }
.fk-shell.schmal { --nav: 72px; }
.fk-nav {
    position: fixed; inset: 0 auto 0 0; width: var(--nav); z-index: 300;
    display: flex; flex-direction: column; color: #fff;
    background: linear-gradient(180deg, #14375E 0%, #10304f 100%);
    box-shadow: 1px 0 0 rgba(255,255,255,.04), 4px 0 24px rgba(10, 30, 55, .18);
    transition: width .28s var(--ease);
    overflow: hidden;
}
.fk-nav-kopf { display: flex; align-items: center; gap: 10px; padding: 16px 14px 14px; border-bottom: 1px solid rgba(255,255,255,.08); position: relative; }
.fk-logo { width: 44px; height: 44px; object-fit: contain; background: #fff; border-radius: 10px; padding: 5px; flex: 0 0 44px; }
.fk-marke { font-weight: 700; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; transition: opacity .2s; }
.fk-marke span { background: linear-gradient(90deg, #fff, #9ee0cb); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fk-einklappen {
    margin-left: auto; border: 0; width: 28px; height: 28px; border-radius: 8px; cursor: pointer;
    background: rgba(255,255,255,.08); color: #fff; display: grid; place-items: center; transition: background .15s, transform .2s;
}
.fk-einklappen:hover { background: rgba(255,255,255,.18); transform: scale(1.06); }
.fk-menue { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 10px 10px; }
.fk-gruppe { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.45); padding: 14px 10px 6px; white-space: nowrap; }
.fk-punkt {
    position: relative; display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 9px 10px; margin-bottom: 2px; border-radius: 10px; border: 0; background: transparent;
    color: rgba(255,255,255,.78); text-decoration: none; font: inherit; font-size: 13.5px; cursor: pointer; text-align: left;
    transition: background .18s, color .18s, transform .18s var(--ease);
}
.fk-punkt:hover { background: rgba(255,255,255,.09); color: #fff; transform: translateX(2px); }
.fk-punkt.active { background: rgba(255,255,255,.16); color: #fff; font-weight: 600; }
.fk-punkt.active::before {
    content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 4px; border-radius: 0 4px 4px 0;
    background: var(--rwd-teal-600); animation: fk-balken .3s var(--ease) both;
}
@keyframes fk-balken { from { transform: scaleY(0); } to { transform: none; } }
.fk-ico { flex: 0 0 24px; text-align: center; font-size: 16px; }
.fk-txt { white-space: nowrap; transition: opacity .18s; }
.fk-zahl {
    margin-left: auto; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
    display: grid; place-items: center; background: rgba(255,255,255,.16); color: #fff; transition: transform .2s;
}
.fk-zahl.rot { background: var(--rot); animation: fk-puls 2.2s ease-in-out infinite; }
.fk-zahl.null { opacity: .35; }
@keyframes fk-puls { 0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .5); } 50% { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); } }
.fk-nav-fuss { border-top: 1px solid rgba(255,255,255,.08); padding: 12px; }
.fk-nutzer { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.85); font-size: 12.5px; overflow: hidden; }
.fk-avatar { flex: 0 0 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 12px;
    background: linear-gradient(135deg, var(--rwd-teal-600), var(--rwd-blue-500)); color: #fff; }
.fk-fuss-knoepfe { display: flex; gap: 6px; margin-top: 10px; }
.fk-fuss-knoepfe form { flex: 1; margin: 0; }
.fk-fuss-knopf { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; padding: 6px 8px; border-radius: 8px;
    border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: #fff; font: inherit; font-size: 12px;
    text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .15s; flex: 1; }
.fk-fuss-knopf:hover { background: rgba(255,255,255,.16); }
.schmal .fk-txt, .schmal .fk-marke, .schmal .fk-gruppe { opacity: 0; pointer-events: none; }
.schmal .fk-gruppe { height: 10px; padding: 0; }
.schmal .fk-zahl { position: absolute; top: 2px; right: 4px; min-width: 18px; height: 16px; font-size: 10px; padding: 0 4px; }
.schmal .fk-nav-kopf { flex-direction: column; }
.schmal .fk-einklappen { margin: 0; }
.schmal .fk-fuss-knoepfe { flex-direction: column; }

.fk-main { margin-left: var(--nav); padding: 22px 28px 40px; min-height: 100vh; transition: margin-left .28s var(--ease); }
.fk-burger, .fk-dimmer { display: none; }

/* ── Seitenkopf, Kacheln ─────────────────────────────────────────────── */
.fk-kopf { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.fk-kopf .unter { color: var(--text-muted); margin-top: 4px; font-size: 13px; }
.fk-kopf .rechts { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fk-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; }
.fk-kachel {
    background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--schatten);
    animation: fk-hoch .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); position: relative; overflow: hidden;
    cursor: default; transition: transform .18s var(--ease), box-shadow .18s;
}
.fk-kachel.klick { cursor: pointer; }
.fk-kachel.klick:hover { transform: translateY(-2px); box-shadow: var(--schatten-hoch); }
.fk-kachel.aktiv { border-color: var(--rwd-teal-600); box-shadow: 0 0 0 3px var(--rwd-teal-100); }
.fk-kachel .wert { font-size: 26px; font-weight: 700; color: var(--rwd-blue-900); letter-spacing: -.02em; }
.fk-kachel .titel { font-size: 12px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.fk-kachel .fuss { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.fk-kachel::after { content: ""; position: absolute; right: -24px; top: -24px; width: 80px; height: 80px; border-radius: 50%; background: var(--akzent, var(--blau-hell)); opacity: .55; }
.fk-kachel.gruen { --akzent: var(--gruen-hell); } .fk-kachel.gelb { --akzent: var(--gelb-hell); } .fk-kachel.rot { --akzent: var(--rot-hell); }
@keyframes fk-hoch { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ── Karten, Tabellen ───────────────────────────────────────────────── */
.fk-karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: var(--schatten); margin-bottom: 14px; animation: fk-hoch .35s var(--ease) both; }
.fk-karte > .kopf { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--linie); font-weight: 650; color: var(--rwd-blue-900); }
.fk-karte > .kopf .rechts { margin-left: auto; display: flex; gap: 6px; align-items: center; font-weight: 400; }
.fk-karte > .inhalt { padding: 14px 16px; }
.fk-tab { width: 100%; border-collapse: collapse; font-size: 13px; }
.fk-tab th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 650; padding: 8px 10px; border-bottom: 1px solid var(--linie); background: var(--flaeche-2); position: sticky; top: 0; }
.fk-tab td { padding: 8px 10px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.fk-tab tr:last-child td { border-bottom: 0; }
.fk-tab td.r, .fk-tab th.r { text-align: right; font-variant-numeric: tabular-nums; }
.fk-tab tr.text td { color: var(--text-2); font-size: 12.5px; padding-top: 4px; padding-bottom: 4px; }
.fk-tab tr.ueber td { color: var(--rwd-blue-700); font-weight: 600; background: var(--blau-hell); }
.fk-tab tr.summe td { font-weight: 700; color: var(--rwd-blue-900); border-top: 2px solid var(--rwd-blue-900); }

/* ── Belegliste ─────────────────────────────────────────────────────── */
.fk-werkzeug { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.fk-suche { position: relative; flex: 1 1 260px; max-width: 420px; }
.fk-suche input { width: 100%; padding: 9px 12px 9px 34px; border-radius: 10px; border: 1px solid var(--linie); background: var(--flaeche); font: inherit; transition: border-color .15s, box-shadow .15s; }
.fk-suche input:focus { outline: none; border-color: var(--rwd-blue-500); box-shadow: 0 0 0 3px var(--blau-hell); }
.fk-suche::before { content: "⌕"; position: absolute; left: 12px; top: 50%; transform: translateY(-52%); color: var(--text-muted); font-size: 16px; }
.fk-liste { display: flex; flex-direction: column; gap: 8px; }
.fk-zeile {
    display: grid; grid-template-columns: 14px 120px minmax(180px, 1.6fr) minmax(140px, 1fr) 110px 120px 1.4fr 24px; gap: 12px; align-items: center;
    background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 11px 14px; cursor: pointer;
    box-shadow: var(--schatten); transition: transform .16s var(--ease), box-shadow .16s, border-color .16s;
    animation: fk-hoch .35s var(--ease) both; animation-delay: calc(min(var(--i, 0), 20) * 25ms); text-decoration: none; color: inherit;
}
.fk-zeile:hover { transform: translateY(-1px); box-shadow: var(--schatten-hoch); border-color: #d6dee9; }
.fk-zeile .nr { font-weight: 700; color: var(--rwd-blue-900); }
.fk-zeile .klein { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fk-zeile .betrag { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
.fk-zeile .hinweis { font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fk-zeile .pfeil { color: var(--text-muted); transition: transform .2s; }
.fk-zeile:hover .pfeil { transform: translateX(3px); color: var(--rwd-blue-700); }
.fk-zeile.auswahl { border-color: var(--rwd-teal-600); box-shadow: 0 0 0 2px var(--rwd-teal-100); }
.fk-leer { text-align: center; padding: 56px 20px; color: var(--text-muted); background: var(--flaeche); border: 1px dashed var(--linie); border-radius: var(--radius); animation: fk-hoch .4s var(--ease) both; }
.fk-leer .gross { font-size: 40px; margin-bottom: 8px; animation: fk-schweben 3s ease-in-out infinite; }
@keyframes fk-schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.fk-ampel { width: 12px; height: 12px; border-radius: 50%; background: var(--gruen); box-shadow: 0 0 0 3px var(--gruen-hell); }
.fk-ampel.a1 { background: var(--gelb); box-shadow: 0 0 0 3px var(--gelb-hell); }
.fk-ampel.a2 { background: var(--rot); box-shadow: 0 0 0 3px var(--rot-hell); animation: fk-puls 2.2s ease-in-out infinite; }

.fk-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--blau-hell); color: var(--rwd-blue-700); white-space: nowrap; }
.fk-chip.gruen { background: var(--gruen-hell); color: #166534; }
.fk-chip.gelb { background: var(--gelb-hell); color: #92400e; }
.fk-chip.rot { background: var(--rot-hell); color: #991b1b; }
.fk-chip.grau { background: #eef1f5; color: var(--text-2); }

/* ── Knöpfe, Felder ─────────────────────────────────────────────────── */
.fk-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 15px; border-radius: 10px; border: 1px solid var(--linie);
    background: var(--flaeche); color: var(--text); font: inherit; font-weight: 600; font-size: 13.5px; cursor: pointer; text-decoration: none;
    transition: transform .12s, box-shadow .15s, background .15s, border-color .15s; white-space: nowrap;
}
.fk-btn:hover { border-color: #cfd8e3; box-shadow: var(--schatten); }
.fk-btn:active { transform: scale(.97); }
.fk-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.fk-btn.primaer { border: 0; color: #fff; background: linear-gradient(135deg, var(--rwd-blue-700), var(--rwd-blue-900)); box-shadow: 0 4px 14px rgba(20, 55, 94, .28); }
.fk-btn.primaer:hover { box-shadow: 0 6px 18px rgba(20, 55, 94, .36); }
.fk-btn.akzent { border: 0; color: #fff; background: linear-gradient(135deg, #34b894, var(--rwd-teal-600)); box-shadow: 0 4px 14px rgba(43, 165, 135, .32); }
.fk-btn.gross { padding: 12px 22px; font-size: 15px; border-radius: 12px; }
.fk-btn.klein { padding: 5px 10px; font-size: 12.5px; border-radius: 8px; }
.fk-btn.geist { background: transparent; border-color: transparent; color: var(--rwd-blue-700); }
.fk-btn.geist:hover { background: var(--blau-hell); box-shadow: none; }
.fk-btn.gefahr { color: var(--rot); }
.fk-spinner { width: 15px; height: 15px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: fk-dreh .7s linear infinite; display: inline-block; }
@keyframes fk-dreh { to { transform: rotate(360deg); } }

.fk-feld { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.fk-feld label { font-size: 12px; font-weight: 600; color: var(--text-2); }
.fk-feld input, .fk-feld textarea, .fk-feld select, .fk-eingabe {
    width: 100%; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--linie); background: #fff; font: inherit; color: var(--text);
    transition: border-color .15s, box-shadow .15s;
}
.fk-feld textarea { min-height: 120px; resize: vertical; line-height: 1.45; }
.fk-feld input:focus, .fk-feld textarea:focus, .fk-feld select:focus, .fk-eingabe:focus { outline: none; border-color: var(--rwd-blue-500); box-shadow: 0 0 0 3px var(--blau-hell); }
.fk-feld .hilfe { font-size: 11.5px; color: var(--text-muted); }
.fk-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 14px; }
.fk-check { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; margin: 4px 0; }
.fk-check input { width: 16px; height: 16px; accent-color: var(--rwd-teal-600); }
.fk-segment { display: inline-flex; background: #e9eef4; border-radius: 10px; padding: 3px; gap: 2px; }
.fk-segment button { border: 0; background: transparent; padding: 6px 12px; border-radius: 8px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-2); cursor: pointer; transition: background .18s, color .18s, box-shadow .18s; }
.fk-segment button.an { background: #fff; color: var(--rwd-blue-900); box-shadow: var(--schatten); }

/* ── Beleg-Detail ───────────────────────────────────────────────────── */
.fk-detail { display: grid; grid-template-columns: minmax(380px, 1.05fr) minmax(360px, 1fr); gap: 16px; align-items: start; }
.fk-detail .spalte { min-width: 0; }
.fk-schritte { display: flex; align-items: center; gap: 0; margin: 4px 0 16px; }
.fk-schritt { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.fk-schritt .punkt { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #e9eef4; color: var(--text-muted); font-size: 12px; transition: background .3s, color .3s, transform .3s var(--ease); }
.fk-schritt.fertig .punkt { background: var(--rwd-teal-600); color: #fff; }
.fk-schritt.jetzt .punkt { background: var(--rwd-blue-700); color: #fff; transform: scale(1.12); box-shadow: 0 0 0 5px var(--blau-hell); }
.fk-schritt.fertig, .fk-schritt.jetzt { color: var(--rwd-blue-900); }
.fk-schritt-linie { flex: 1; height: 3px; margin: 0 10px; border-radius: 2px; background: #e9eef4; position: relative; overflow: hidden; min-width: 24px; }
.fk-schritt-linie.fertig::after { content: ""; position: absolute; inset: 0; background: var(--rwd-teal-600); animation: fk-fuellen .6s var(--ease) both; transform-origin: left; }
@keyframes fk-fuellen { from { transform: scaleX(0); } to { transform: none; } }
.fk-hinweise { display: flex; flex-direction: column; gap: 6px; }
.fk-hinweis { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 9px; font-size: 13px; background: var(--blau-hell); color: var(--rwd-blue-900); animation: fk-hoch .3s var(--ease) both; }
.fk-hinweis.s1 { background: var(--gelb-hell); color: #78350f; }
.fk-hinweis.s2 { background: var(--rot-hell); color: #7f1d1d; }
.fk-kv { display: grid; grid-template-columns: 140px 1fr; gap: 4px 12px; font-size: 13px; }
.fk-kv dt { color: var(--text-muted); }
.fk-kv dd { margin: 0; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.fk-pdf { width: 100%; height: 78vh; border: 0; border-radius: 10px; background: #e9eef4; }

.fk-anhang { border: 1px solid var(--linie); border-radius: 10px; margin-bottom: 10px; overflow: hidden; transition: opacity .2s; }
.fk-anhang.aus { opacity: .55; }
.fk-anhang-kopf { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: var(--flaeche-2); border-bottom: 1px solid var(--linie); font-size: 13px; }
.fk-anhang-kopf .name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.fk-seiten { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; padding: 12px; }
.fk-seite {
    position: relative; border-radius: 8px; border: 2px solid transparent; background: #fff; cursor: pointer; padding: 0; overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.12); transition: transform .18s var(--ease), border-color .18s, opacity .18s, filter .18s;
    aspect-ratio: 210 / 297; animation: fk-hoch .3s var(--ease) both; animation-delay: calc(min(var(--i, 0), 24) * 18ms);
}
.fk-seite canvas { width: 100%; height: 100%; display: block; object-fit: contain; }
.fk-seite:hover { transform: translateY(-2px) scale(1.02); }
.fk-seite.an { border-color: var(--rwd-teal-600); }
.fk-seite:not(.an) { opacity: .45; filter: grayscale(.8); }
.fk-seite .marke { position: absolute; top: 5px; right: 5px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700;
    background: #fff; color: var(--text-muted); border: 1.5px solid #cbd5e1; transition: transform .2s var(--ease), background .2s; }
.fk-seite.an .marke { background: var(--rwd-teal-600); color: #fff; border-color: var(--rwd-teal-600); transform: scale(1.1); }
.fk-seite .snr { position: absolute; left: 0; right: 0; bottom: 0; font-size: 11px; text-align: center; background: linear-gradient(transparent, rgba(15, 23, 42, .65)); color: #fff; padding: 10px 0 3px; }
.fk-seite .lupe { position: absolute; top: 5px; left: 5px; width: 22px; height: 22px; border-radius: 6px; background: rgba(255,255,255,.92); border: 0; cursor: zoom-in; opacity: 0; transition: opacity .15s; font-size: 12px; }
.fk-seite:hover .lupe { opacity: 1; }
.fk-laden { display: grid; place-items: center; height: 100%; color: var(--text-muted); font-size: 11px; background: repeating-linear-gradient(-45deg, #f1f5f9 0 8px, #f8fafc 8px 16px); background-size: 200% 200%; animation: fk-schimmer 1.4s linear infinite; }
@keyframes fk-schimmer { from { background-position: 0 0; } to { background-position: 46px 0; } }

/* Aktionsleiste unten (sticky) */
.fk-aktion {
    position: sticky; bottom: 12px; z-index: 50; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 12px 16px; border-radius: 14px; background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
    border: 1px solid var(--linie); box-shadow: var(--schatten-hoch); margin-top: 12px; animation: fk-hoch .4s var(--ease) both;
}
.fk-aktion .info { font-size: 12.5px; color: var(--text-2); }
.fk-aktion .rechts { margin-left: auto; display: flex; gap: 8px; }

/* Band (Fortschritt), Toast, Modal */
.fk-band { height: 3px; border-radius: 2px; overflow: hidden; background: var(--blau-hell); position: relative; }
.fk-band::after { content: ""; position: absolute; inset: 0; width: 40%; background: linear-gradient(90deg, transparent, var(--rwd-teal-600), transparent); animation: fk-lauf 1.1s ease-in-out infinite; }
@keyframes fk-lauf { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
.fk-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 9500; padding: 11px 18px; border-radius: 12px; font-weight: 600; font-size: 13.5px;
    background: var(--rwd-blue-900); color: #fff; box-shadow: var(--schatten-hoch); animation: fk-toast .35s var(--ease) both; display: flex; gap: 8px; align-items: center; }
.fk-toast.ok { background: linear-gradient(135deg, #2bb38f, #1f8f72); }
.fk-toast.fehler { background: var(--rot); }
@keyframes fk-toast { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
.fk-modal-hg { position: fixed; inset: 0; z-index: 9000; background: rgba(15, 30, 50, .45); backdrop-filter: blur(3px); display: grid; place-items: center; padding: 20px; animation: fk-seite-ein .2s ease-out both; }
.fk-modal { background: #fff; border-radius: 16px; width: min(760px, 100%); max-height: 90vh; overflow: auto; box-shadow: 0 30px 80px rgba(10, 30, 55, .35); animation: fk-modal .3s var(--ease) both; }
.fk-modal.breit { width: min(1100px, 100%); }
.fk-modal > .kopf { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--linie); }
.fk-modal > .kopf h2 { flex: 1; }
.fk-modal > .inhalt { padding: 18px 20px; }
.fk-modal > .fuss { display: flex; gap: 8px; justify-content: flex-end; padding: 14px 20px; border-top: 1px solid var(--linie); background: var(--flaeche-2); border-radius: 0 0 16px 16px; }
@keyframes fk-modal { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.fk-x { border: 0; background: transparent; font-size: 22px; cursor: pointer; color: var(--text-muted); border-radius: 8px; width: 34px; height: 34px; }
.fk-x:hover { background: #f1f5f9; }
.fk-lupe-bild { width: 100%; border-radius: 8px; box-shadow: var(--schatten); }

.fk-erfolg { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px; text-align: center; }
.fk-haken { width: 64px; height: 64px; border-radius: 50%; background: var(--rwd-teal-600); color: #fff; display: grid; place-items: center; font-size: 32px; animation: fk-plopp .5s var(--ease) both; box-shadow: 0 0 0 10px var(--rwd-teal-100); }
@keyframes fk-plopp { 0% { transform: scale(.3); opacity: 0; } 70% { transform: scale(1.12); } 100% { transform: none; opacity: 1; } }

.fk-protokoll { font-family: ui-monospace, Consolas, monospace; font-size: 11.5px; white-space: pre-wrap; background: #0f172a; color: #e2e8f0; border-radius: 9px; padding: 10px; max-height: 260px; overflow: auto; }
.fk-anleitung { max-width: 920px; line-height: 1.6; }
.fk-anleitung h2 { margin: 22px 0 8px; }
.fk-anleitung .tipp { background: var(--rwd-teal-100); border-left: 4px solid var(--rwd-teal-600); padding: 10px 14px; border-radius: 0 10px 10px 0; margin: 10px 0; }
.text-muted { color: var(--text-muted); }
.klein { font-size: 12px; }

/* Verbindungs-Pille */
#components-reconnect-modal { display: none; }
#components-reconnect-modal.components-reconnect-show, #components-reconnect-modal.components-reconnect-failed, #components-reconnect-modal.components-reconnect-rejected {
    display: flex; position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 9999; gap: 8px; align-items: center;
    padding: 8px 14px; border-radius: 999px; background: var(--rwd-blue-900); color: #fff; font-size: 12.5px; box-shadow: var(--schatten-hoch);
}

/* ── Mobil: Menü als Schublade, nur ein runder Knopf statt Top-Bar ── */
@media (max-width: 1023px) {
    .fk-nav { width: 268px; transform: translateX(-105%); transition: transform .28s var(--ease); }
    .fk-nav.offen { transform: none; }
    .fk-shell.schmal .fk-txt, .fk-shell.schmal .fk-marke, .fk-shell.schmal .fk-gruppe { opacity: 1; }
    .fk-einklappen { display: none; }
    .fk-main { margin-left: 0; padding: 64px 16px 32px; }
    .fk-burger { display: grid; place-items: center; position: fixed; top: 12px; left: 12px; z-index: 250; width: 42px; height: 42px; border-radius: 12px; border: 0;
        background: var(--rwd-blue-900); color: #fff; font-size: 18px; box-shadow: var(--schatten-hoch); cursor: pointer; }
    .fk-dimmer { display: block; position: fixed; inset: 0; z-index: 280; background: rgba(15, 30, 50, .4); opacity: 0; pointer-events: none; transition: opacity .25s; }
    .fk-dimmer.offen { opacity: 1; pointer-events: auto; }
    .fk-detail { grid-template-columns: 1fr; }
    .fk-zeile { grid-template-columns: 14px 1fr auto; }
    .fk-zeile > :nth-child(n+4):not(.betrag) { display: none; }
    .fk-pdf { height: 60vh; }
    .fk-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .fk-kachel .wert { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Anmeldung */
.fk-login { min-height: 100vh; display: grid; place-items: center; padding: 20px;
    background: radial-gradient(1200px 600px at 10% -10%, #2b5f93 0%, transparent 60%), radial-gradient(900px 500px at 110% 110%, #1f8f72 0%, transparent 55%), #14375E; }
.fk-login-karte { background: #fff; border-radius: 20px; padding: 36px 34px; width: min(420px, 100%); text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,.3); animation: fk-modal .5s var(--ease) both; }
.fk-login-karte h1 { font-size: 26px; margin: 10px 0 6px; }
.fk-login-karte p { margin: 0 0 22px; }
.fk-login-logo { width: 140px; }
.fk-login-dev { margin-top: 18px; font-size: 12px; color: var(--text-muted); }