/* e+k Plattform – Render-Designsystem (Konzept). Schrift Jeko wie www.ek-group.ag */
@font-face{font-family:Jeko;src:url(../assets/fonts/Jeko-Light.woff2);font-weight:300}
@font-face{font-family:Jeko;src:url(../assets/fonts/Jeko-Regular.woff2);font-weight:400}
@font-face{font-family:Jeko;src:url(../assets/fonts/Jeko-Medium.woff2);font-weight:500}
@font-face{font-family:Jeko;src:url(../assets/fonts/Jeko-SemiBold.woff2);font-weight:600}
@font-face{font-family:Jeko;src:url(../assets/fonts/Jeko-Bold.woff2);font-weight:700}
:root{
  --ink:#191A1F; --ink2:#3D3F46; --grey:#6C6E75; --grey2:#9C9EA4; --line:#E3E1DC; --line2:#CFCCC5;
  --bg:#FFFFFF; --soft:#F4F1EB; --soft2:#FAF8F4;
  --blue:#1B2B4B; --blue-d:#111C33; --blue-10:#E6EAF2; --blue-5:#F3F5F9;
  --rose:#F1EFEA; --rose-w:#F5F3EF; --bord:#7A1F35; --bord-d:#5A1426; --gold:#A8875A;
  --red:#B3302C; --red-10:#F4F2EE; --green:#2D6B4F; --green-10:#E4EFE9;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:clip}
body{font-family:Jeko,Arial,sans-serif;color:var(--ink);background:var(--bg);font-size:14px;font-weight:400;line-height:1.45;-webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 1}
.ic{width:18px;height:18px;flex:none;display:inline-block;vertical-align:middle}
.ic.s{width:15px;height:15px}.ic.l{width:22px;height:22px}.ic.xl{width:28px;height:28px}
.row{display:flex;align-items:center;gap:10px}.col{display:flex;flex-direction:column}.grow{flex:1;min-width:0}
.ellip{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.light{font-weight:300}.med{font-weight:500}
.muted{color:var(--grey)}.ink2{color:var(--ink2)}.blue{color:var(--blue)}
.kicker{font-size:12px;color:var(--bord);letter-spacing:.02em;font-weight:500}
.cap{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);font-weight:500}
.h-xl{font-weight:400;font-size:46px;line-height:1.05;letter-spacing:-.015em}
.h-l{font-weight:400;font-size:34px;line-height:1.08;letter-spacing:-.01em}
.h-m{font-weight:500;font-size:22px;line-height:1.2}
.num-xl{font-weight:400;font-size:40px;line-height:1;letter-spacing:-.02em}
.num-l{font-weight:400;font-size:30px;line-height:1;letter-spacing:-.015em}
.photo{background-size:cover;background-position:center;background-color:#ddd}
/* Buttons im Website-Stil: Pill mit blauem Rand, + */
.btn{font-weight:500;display:inline-flex;align-items:center;gap:7px;border-radius:40px;padding:8px 16px;font-size:13px;border:1px solid var(--blue);color:var(--blue);background:#fff;white-space:nowrap;line-height:1.2}
.btn.fill{background:var(--blue);color:#fff}
.btn.ink{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.ghost{border-color:var(--line2);color:var(--ink)}
.btn.sm{padding:5px 12px;font-size:12px}
.plus:after{content:" +"}
.tag{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;padding:3px 9px;background:var(--soft);color:var(--ink2);white-space:nowrap}
.tag.blue{background:var(--blue-10);color:var(--blue)}.tag.rose{background:var(--rose);color:var(--ink)}
.tag.red{background:var(--red-10);color:var(--red)}.tag.green{background:var(--green-10);color:var(--green)}.tag.ink{background:var(--ink);color:#fff}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex:none}
.hair{border-top:1px solid var(--line)}
.card{background:#fff;border:1px solid var(--line)}
.ava{line-height:1;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:500;background:var(--rose);color:var(--ink);flex:none}
.ava.b{background:var(--blue-10);color:var(--blue)}.ava.g{background:#ECEBE8}
.bar{height:3px;background:var(--line)}.bar i{display:block;height:100%;background:var(--ink)}
table.t{width:100%;border-collapse:collapse;font-size:13px}
table.t th{text-align:left;font-weight:400;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);padding:10px 12px;border-bottom:1px solid var(--ink)}
table.t td{padding:13px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
table.t td.r,table.t th.r{text-align:right}
.ai{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--bord);font-weight:500}
.cite{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--bord);border:1px solid var(--bord);border-radius:20px;padding:0 7px;line-height:17px}
.mark{background:rgba(122,31,53,.10);box-shadow:0 0 0 2px rgba(122,31,53,.10)}

/* Desktop-Rahmen */
.app{display:grid;grid-template-columns:248px minmax(0,1fr);grid-template-rows:76px minmax(0,1fr);height:100vh;overflow:hidden}
.brand{display:flex;align-items:center;padding:0 28px;border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.brand img{height:25px}
.topbar{background:var(--blue);color:#fff;display:flex;align-items:center;gap:18px;padding:0 28px}
.topbar .crumb{font-size:14px;font-weight:400;opacity:.9;display:flex;gap:8px;align-items:center}
.topbar .crumb b{font-weight:400;opacity:1}
.topbar .search{margin-left:auto;display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(255,255,255,.55);padding:6px 2px;width:340px;font-size:13px;font-weight:400;color:rgba(255,255,255,.85)}
.topbar .k{margin-left:auto;font-size:11px;border:1px solid rgba(255,255,255,.5);padding:0 6px;border-radius:3px}
.topbar .ib{position:relative;display:grid;place-items:center;width:30px;height:30px}
.topbar .ib .d{position:absolute;top:3px;right:3px;width:7px;height:7px;border-radius:50%;background:#D98A9B}
.topbar .me{display:flex;align-items:center;gap:10px;font-size:13px}
.topbar .me .ava{background:#fff;color:var(--blue)}
.side{border-right:1px solid var(--line);padding:26px 0 18px;display:flex;flex-direction:column;min-width:0}
.side .grp{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey2);padding:18px 28px 8px}
.side a{display:flex;align-items:center;gap:12px;padding:9px 28px;color:var(--ink2);font-size:14.5px;font-weight:500;text-decoration:none;position:relative}
.side a .ic{color:var(--grey)}
.side a.on{color:var(--ink);font-weight:600}
.side a.on .ic{color:var(--bord)}
.side a.on:before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;background:var(--bord)}
.side a .n{margin-left:auto;font-size:11px;color:#fff;background:var(--bord);border-radius:10px;padding:0 7px;line-height:18px}
.side .foot{margin-top:auto;padding:0 28px;display:flex;align-items:center;gap:10px}
.side .foot img{width:18px}
.main{overflow:hidden;min-width:0;position:relative}

/* Mobile */
.m{width:100vw;height:100vh;overflow:hidden;display:flex;flex-direction:column;background:#fff;position:relative}
.sbar{height:54px;display:flex;align-items:flex-end;justify-content:space-between;padding:0 30px 8px 34px;font-weight:600;font-size:15.5px;flex:none;font-family:-apple-system,"SF Pro Text",Inter,Arial,sans-serif}
.sbar .sys{display:flex;gap:6px;align-items:center}
.mb{flex:1;overflow:hidden;min-height:0}
.tabs{flex:none;height:86px;border-top:1px solid var(--line);background:rgba(255,255,255,.96);display:grid;padding:9px 8px 0}
.tabs div{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10.5px;color:var(--grey);font-weight:500}
.tabs div.on{color:var(--bord)}
.tabs .badge{position:relative}.tabs .badge b{position:absolute;top:-4px;right:-8px;background:var(--bord);color:#fff;font-size:9px;font-weight:500;border-radius:9px;padding:0 5px;line-height:15px}
.home{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:136px;height:5px;border-radius:5px;background:var(--ink);z-index:9}
.navh{display:flex;align-items:center;gap:10px;padding:6px 20px 12px}
.navh .bk{width:34px;height:34px;display:grid;place-items:center;margin-left:-8px;color:var(--blue)}
.lst>div{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}

.tag{font-weight:500}
b,.med{font-weight:600}
.btn.bord{background:var(--bord);border-color:var(--bord);color:#fff}
.side{background:var(--soft2)}
.brand{background:#fff}
.subnav{white-space:nowrap;display:flex;gap:26px;align-items:center;padding:0 40px;border-bottom:1px solid var(--line);font-size:14px;color:var(--grey);font-weight:500;height:52px;background:#fff}
.subnav>span:not(:last-child){height:52px;display:flex;align-items:center;border-bottom:2px solid transparent}
.subnav span.on{color:var(--ink);border-bottom-color:var(--bord)!important}
.wrapd{padding:24px 40px 0}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;padding:5px 12px;border:1px solid var(--line2);border-radius:30px;color:var(--ink2);font-weight:500;white-space:nowrap;background:#fff}
.chip.on{background:var(--blue);border-color:var(--blue);color:#fff}
.kpirow{display:grid;border-top:1px solid var(--ink)}
.kpirow>div{padding:14px 18px 6px 0}.kpirow>div+div{padding-left:18px;border-left:1px solid var(--line)}
.kpirow .v{font-size:28px;line-height:1;margin-top:8px;letter-spacing:-.01em}
.hbar{height:8px;background:var(--line);position:relative}.hbar i{position:absolute;left:0;top:0;bottom:0;background:var(--blue)}

/* v4: keine Rosa-/Hellrot-Flächen, Hinweise als graue Fläche mit farbiger Kontur */
.tag{border-radius:2px}
.tag.red{background:var(--soft);color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
.tag.rose{background:var(--soft);color:var(--bord);box-shadow:inset 0 0 0 1px var(--bord)}
.tag.blue{background:var(--blue-10);color:var(--blue)}
.tag.green{background:var(--soft);color:var(--green);box-shadow:inset 0 0 0 1px rgba(45,107,79,.55)}
.alert{background:var(--soft);border:1px solid var(--red)}
.note{background:var(--soft);border:1px solid var(--bord)}
.tabs div.on{position:relative}
.tabs div.on:before{content:"";position:absolute;top:-9px;left:50%;transform:translateX(-50%);width:26px;height:3px;border-radius:2px;background:var(--bord)}
.photo{background-color:transparent}
/* v4 Mobile-Feinschliff: native Rundungen und Abstände nur in der App */
.m .mc{background:#fff;border-radius:16px;box-shadow:0 1px 2px rgba(17,28,51,.06),0 6px 18px rgba(17,28,51,.06)}
.m .btn{border-radius:14px}
.m .tag{border-radius:6px}
.m .chip,.m .chips span{border-radius:20px}