/* Demo-Gestaltung: ruhiges Marineblau, Blau als Akzent, eine Schrift (Manrope), klare Linien statt Rahmenfarben. Nur in der Demo. */
:root{--bg:#F8F5EF;--surface-2:#F1ECE2;--cream:#F1ECE2;--line:#E4DDD0;--soft:#F3EBDA;--gold-soft:#F3EBDA;--cream-flaeche:#F1ECE2;--muted:#5E625F;--sand:#C99A4A;--display:"Spectral",Georgia,serif!important}
body{font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
h1,h2,h3,.kpname2 input{font-family:var(--display)!important;font-weight:600!important;letter-spacing:-.005em}
h1{font-size:36px}
/* Auf dunklen Flächen bleibt der Akzent ein helles Blau, auf hellen ein kräftiges */
.punkte,.kopf,.kontakt,nav,.esvorn,.kpmkopf,.login-brand,.hero,#fkdemo{--gold:#E2BC77}
@media(min-width:1000px){.nav{--gold:#E2BC77}}
/* Buttons: klare Rechtecke mit 8 px, weiße Schrift auf Blau */
.btn,.btn-gold,.btn-ghost,.btn-sm,.esvorb{border-radius:8px!important;font-weight:700}
.btn:not(.ghost):not(.wa):not(.btn-ghost),.btn-gold{color:#fff!important;background:var(--gold)}
.btn:not(.ghost):not(.wa):not(.btn-ghost):hover,.btn-gold:hover{filter:brightness(.92)}
.punkte .btn,.kopf .btn,nav .btn{color:#0F2A43!important}
.kontakt .btn.ghost,.punkte .btn.ghost,.kopf .btn.ghost{background:rgba(255,255,255,.1)!important;color:#fff!important;border:1.5px solid rgba(255,255,255,.55)!important}
.kontakt .btn.ghost:hover{background:rgba(255,255,255,.2)!important}
.kontakt .btn.wa{background:#25D366!important;color:#0B2E13!important;border:0!important}
.btn.ghost,.btn-ghost{background:#fff;border:1px solid var(--line);color:var(--text,#1B2430)}
.btn.ghost:hover,.btn-ghost:hover{border-color:#9DB2C8}
.btn.cta,.btn.block.cta{box-shadow:0 1px 2px rgba(15,42,67,.15)}
/* Karten und Zahlenfelder: dünne Linie, kaum Schatten */
.card,.kpi,.kpliste,.kpvor,.sxk,.kachel,.esben,.box{border-radius:10px!important;border:1px solid var(--line)!important;box-shadow:0 1px 2px rgba(15,42,67,.06)!important}
.kpi{border-top:3px solid var(--sand)!important;background:#fff}
.kpi b,.punkte .z{font-family:var(--body)!important;font-weight:800!important}
.kpi b{font-size:28px}
.punkte .z{color:#fff!important}
.punkte{background:linear-gradient(160deg,#12304A,#1B4568)!important}
.erow{border-left:3px solid var(--sand)!important}
/* Chips, Pillen, Umschalter */
.chipf.on,.pill.on,.sub button.on,.eseg .chipf.on{background:#0F2A43!important;color:#fff!important;border-color:#0F2A43!important}
.pk .badge,.nxn .cnt{color:#fff!important}
.pill{font-weight:700}
/* Eingabefelder */
input[type=text],input[type=email],input[type=number],input[type=search],input[type=url],select,textarea{border-radius:8px}
.esuche,.esel select{border-radius:8px!important}
/* Seitenleiste: ruhig, schmal, Aktiv-Balken */
nav{box-shadow:inset -1px 0 0 rgba(255,255,255,.06)}
.nav-i{border-radius:8px!important;font-weight:600}
.nav-i[aria-current="page"]{background:rgba(255,255,255,.1)!important;color:#fff!important}
.nav-i[aria-current="page"]::before{background:var(--sand)!important}
.nav-i .cnt{background:#3B86D6!important;color:#fff!important}
main{padding-top:30px}
/* Einrichtungs-Leiste und Hinweise */
.onbbalken i{background:var(--gold)!important}
.onbleiste,.onbbar{border-radius:10px!important;border:1px solid var(--line)!important;background:#fff!important}
.bar2 i{background:var(--gold)!important}
/* Portal: Kopf und Menü */
.kontakt{border-radius:12px!important}.kontakt img,.kinitial{border:2px solid rgba(255,255,255,.25)!important}
.kontakt .btn.wa{color:#0B2E13!important}
a{color:var(--gold)}
.btn,.pill,.chipf,.nav-i,.nav button{text-decoration:none}