/* e-cuno Kundenportal – Gestaltung nach e-cuno Design System (Brandbook „essentials“) und Klickprototyp.
   Hausschriften Varien und Futura PT werden in base.html eingebunden, sobald die Dateien in static/fonts liegen.
   Ersatzschriften (selbst gehostet, keine Google-Server): Archivo (für Varien), Jost (für Futura PT). */
@font-face{font-family:"Archivo";src:url(fonts/archivo-wdth.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Jost";src:url(fonts/jost-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Jost";src:url(fonts/jost-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Jost";src:url(fonts/jost-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --cb:#00414d;--ib:#00b0e0;--pg:#9bb6bb;--lime:#d3d814;
  --bg:#ffffff;--surface:#eaedee;--surface2:#e0f5fc;--fg:#1c2325;--muted:#6b7173;--line:#d5dadd;
  --head:#00414d;--link:#007da0;--limebg:#f4f6cf;--warn:#a33b20;--warnbg:#f8e6df;--ok:#3d6b1f;
  --f-display:"Varien","Archivo",system-ui,sans-serif;--f-body:"Futura PT","Jost","Futura",system-ui,sans-serif;
  --stretch:118%;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0d1e22;--surface:#152b30;--surface2:#103540;--fg:#e6eef0;--muted:#9bb6bb;--line:#24414a;
  --head:#e6eef0;--link:#4fcdf0;--limebg:#2c3110;--warnbg:#3a1d14;--warn:#f0a080;--ok:#b8d36a;color-scheme:dark}}
:root.hausschrift{--stretch:100%}
:root.hausschrift h1,:root.hausschrift h2,:root.hausschrift .stat .v{font-style:italic}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{background:var(--bg)}
body{color:var(--fg);font-family:var(--f-body);font-size:15.5px;line-height:1.55;margin:0;min-height:100vh;display:flex;flex-direction:column}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--link)}
.wrap{max-width:1180px;margin:0 auto;padding-left:16px;padding-right:16px;width:100%}
.flow{height:4px;background:linear-gradient(90deg,#00414d 0%,#00b0e0 42%,#d3d814 100%)}
.eyebrow{font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:11.5px;color:var(--ib);margin:0}
h1,h2,h3{color:var(--head);margin:0;text-wrap:balance}
h1{font-family:var(--f-display);font-weight:700;font-stretch:var(--stretch);text-transform:uppercase;font-size:clamp(22px,3.2vw,32px);line-height:1.02;letter-spacing:.01em}
h2{font-family:var(--f-display);font-weight:700;font-stretch:calc(var(--stretch) - 6%);text-transform:uppercase;font-size:17px;line-height:1.1;letter-spacing:.02em}
h3{font-size:16px;font-weight:700}
.num{font-variant-numeric:tabular-nums}
.r{text-align:right}
.small{font-size:13px;color:var(--muted)}
:focus-visible{outline:2px solid var(--ib);outline-offset:2px}

/* Kopf */
header.top{border-bottom:1px solid var(--line);background:var(--bg)}
header.top .wrap{display:flex;align-items:center;gap:16px;padding-block:12px;flex-wrap:wrap}
.logo{height:34px;width:auto;display:block}
.logo.w{display:none}
@media (prefers-color-scheme:dark){.logo.c{display:none}.logo.w{display:block}}
.orgsel{display:flex;align-items:center;gap:8px;margin-left:auto;min-width:0}
.orgsel label{margin:0}
.orgsel select{max-width:360px;padding:7px 10px}
.user{font-size:13.5px;color:var(--muted);text-align:right;line-height:1.3}
.user b{color:var(--fg);font-weight:500;display:block}
.user form{display:inline;margin:0}
.linkbtn{background:none;border:0;padding:0;color:var(--link);text-decoration:underline;cursor:pointer}
.user{margin-left:auto}
.orgsel+.user{margin-left:0}
nav.tabs{border-bottom:1px solid var(--line)}
nav.tabs .wrap{display:flex;gap:4px;overflow-x:auto}
nav.tabs a{border-bottom:3px solid transparent;padding:12px 14px;color:var(--muted);white-space:nowrap;font-weight:500;text-decoration:none}
nav.tabs a:hover{color:var(--head)}
nav.tabs a[aria-current="page"]{color:var(--head);border-bottom-color:var(--ib)}
nav.tabs a.right{margin-left:auto;color:var(--ib)}
.badge{display:inline-block;min-width:18px;padding:0 5px;margin-left:6px;background:var(--lime);color:#00414d;font-size:11.5px;text-align:center;border-radius:9px}
.banner{background:var(--cb);color:#e6eef0;font-size:12.5px}
.banner .wrap{padding-block:6px;display:flex;gap:12px;justify-content:space-between;flex-wrap:wrap}
.banner b{color:var(--lime);font-weight:500}
.banner a{color:#e6eef0}
main{padding-block:28px 64px;flex:1}
footer{padding-block:16px 28px}
.pagehead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.pagehead .stand{font-size:12.5px;color:var(--muted)}

/* Formulare und Schaltflächen */
label{display:block;font-size:13px;font-weight:500;color:var(--muted);margin-bottom:4px}
input[type=text],input[type=email],input[type=password],select,textarea{width:100%;border:1px solid var(--line);background:var(--bg);padding:10px 12px;border-radius:0}
input:focus,select:focus,textarea:focus{border-color:var(--ib);outline:none}
.field{display:flex;flex-direction:column;gap:0;margin-bottom:14px}
.btn{display:inline-block;background:var(--cb);color:#fff;border:0;padding:11px 18px;cursor:pointer;font-weight:500;border-radius:0;text-decoration:none}
.btn.lime{background:var(--lime);color:#00414d}
.btn.ghost{background:transparent;color:var(--link);border:1px solid var(--line)}
.btn.small{padding:4px 10px;font-size:13px}
.btn:hover{filter:brightness(1.08)}
.check{display:flex;gap:8px;align-items:flex-start;padding:4px 0;color:var(--fg);font-weight:400;font-size:14.5px}
.check input{margin-top:5px}
form.inline{display:inline}
code{background:var(--surface);padding:2px 6px;word-break:break-all;font-size:13px}

/* Hinweise */
.notice{background:var(--limebg);padding:12px 14px;font-size:14px;border-left:3px solid var(--lime);margin:10px 0}
.notice.blue{background:var(--surface2);border-left-color:var(--ib)}
.notice.warn{background:var(--warnbg);border-left-color:var(--warn);color:var(--fg)}
.notice .tt{font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.12em;margin-bottom:2px}
.error{background:var(--warnbg);color:var(--warn);padding:10px 12px;font-size:14px}

/* Kennzahlen und Raster */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:26px}
.stats.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.stat{background:var(--surface);padding:18px 20px;border-top:3px solid var(--lime)}
.stat .v{font-family:var(--f-display);font-weight:700;font-stretch:calc(var(--stretch) - 8%);font-size:clamp(20px,2.6vw,28px);color:var(--head);line-height:1.1;font-variant-numeric:tabular-nums}
.stat .l{font-size:13px;color:var(--muted);margin-top:4px}
.stat.dark{background:var(--cb)}.stat.dark .v{color:#fff}.stat.dark .l{color:#b7cdd1}
.grid2{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:24px}
.panel{display:flex;flex-direction:column;gap:12px;min-width:0}
.stack{display:flex;flex-direction:column;gap:28px;min-width:0}
.ph{display:flex;justify-content:space-between;align-items:baseline;gap:8px;border-bottom:1px solid var(--ib);padding-bottom:6px}
.list{display:flex;flex-direction:column}
.row{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line)}
.date{font-variant-numeric:tabular-nums;font-weight:500;min-width:88px}
.row .t{min-width:0}.row .t b{font-weight:500;display:block}.row .t span{font-size:13px;color:var(--muted)}
.pill{display:inline-block;font-size:12px;font-weight:500;padding:2px 9px;white-space:nowrap;background:var(--surface);color:var(--fg)}
.pill.soon{background:var(--lime);color:#00414d}
.pill.info{background:var(--ib);color:#fff}
.pill.dark{background:var(--cb);color:#fff}
.pill.warn{background:var(--warnbg);color:var(--warn)}
.pill.ok{background:var(--limebg);color:var(--ok)}
.pill.grey{background:var(--surface);color:var(--muted)}

/* Projektkarten */
.projects{display:flex;flex-direction:column;gap:10px}
.pcard{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 18px;background:var(--surface);padding:16px 18px;color:inherit;text-decoration:none}
a.pcard:hover{background:var(--surface2)}
.pcard .meta{font-size:13px;color:var(--muted)}
.pcard .side{display:flex;flex-direction:column;gap:6px;align-items:flex-end;font-size:13.5px}
.pcard .side span.l{color:var(--muted)}
.pcard .side b{font-weight:500}
.steps{display:flex;gap:3px;margin-top:8px;max-width:640px}
.steps i{height:5px;flex:1;background:var(--line)}
.steps i.on{background:var(--ib)}.steps i.cur{background:var(--lime)}
.orgtag{font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--ib);font-weight:700}

/* Detail */
.back{display:inline-block;margin-bottom:14px}
.process{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin:20px 0 28px}
.process div{position:relative;padding-top:22px;font-size:12.5px;color:var(--muted);padding-right:6px}
.process div::before{content:"";position:absolute;left:0;right:0;top:7px;height:2px;background:var(--line)}
.process div::after{content:"";position:absolute;left:0;top:1px;width:14px;height:14px;border-radius:50%;background:var(--bg);border:2px solid var(--line)}
.process div.done::before,.process div.done::after{background:var(--ib);border-color:var(--ib)}
.process div.cur::after{background:var(--lime);border-color:var(--lime)}
.process div.cur{color:var(--head);font-weight:700}
.process div.done{color:var(--fg)}
dl.kv{display:grid;grid-template-columns:minmax(140px,auto) minmax(0,1fr);gap:8px 18px;margin:0}
dl.kv dt{color:var(--muted);font-size:13.5px}dl.kv dd{margin:0}
.bars{display:flex;flex-direction:column;gap:12px}
.bar .lab{display:flex;justify-content:space-between;font-size:13.5px;gap:10px}
.bar .track{height:10px;background:var(--surface);margin-top:4px}
.bar .fill{height:100%;background:var(--ib)}
.bar.b2 .fill{background:var(--cb)}
@media (prefers-color-scheme:dark){.bar.b2 .fill{background:var(--pg)}}
.bar.b3 .fill{background:var(--lime)}
.docs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.doc{background:var(--surface);padding:14px;display:flex;flex-direction:column;gap:6px;min-width:0}
.doc .n{font-weight:500}
.doc .ic{width:30px;height:38px;border:1.5px solid var(--ib);position:relative}
.doc .ic::after{content:"";position:absolute;right:-1.5px;top:-1.5px;width:9px;height:9px;background:var(--surface);border-left:1.5px solid var(--ib);border-bottom:1.5px solid var(--ib)}
.doc.missing .ic{border-color:var(--pg);border-style:dashed}

table{border-collapse:collapse;width:100%;font-size:14px}
th{text-align:left;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);border-bottom:1px solid var(--ib);padding:8px 10px 6px 0}
td{border-bottom:1px solid var(--line);padding:9px 10px 9px 0;vertical-align:top}
.tbl{overflow-x:auto}

/* Anmeldung */
.auth{flex:1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);min-height:100vh}
/* Deckblatt-Element wie auf e-cuno-Deckblättern: senkrechte und waagerechte Linie mit Kreuzpunkt.
   Inhalte liegen rechts der senkrechten Linie, Titel oberhalb, Absender unterhalb der waagerechten. */
.auth .side{--vx:clamp(20px,3.2vw,44px);--hy:68%;--gap:clamp(20px,2.4vw,32px);background:var(--cb);color:#fff;position:relative;overflow:hidden;min-height:560px}
.auth .side .vline{position:absolute;left:var(--vx);top:0;bottom:0;width:2px;background:linear-gradient(180deg,#00b0e0,#8ad18a)}
.auth .side .hline{position:absolute;left:0;right:0;top:var(--hy);height:3px;background:linear-gradient(90deg,#00b0e0 0%,#8ad18a 30%,#d3d814 55%,#00b0e0 100%)}
.auth .side .star{position:absolute;left:calc(var(--vx) + 1px);top:calc(var(--hy) + 1.5px);width:26px;height:26px;transform:translate(-50%,-50%);
  background:radial-gradient(circle at 0 0,transparent 70.5%,#6fd2a6 71%) 0 0/50% 50% no-repeat,radial-gradient(circle at 100% 0,transparent 70.5%,#6fd2a6 71%) 100% 0/50% 50% no-repeat,radial-gradient(circle at 0 100%,transparent 70.5%,#6fd2a6 71%) 0 100%/50% 50% no-repeat,radial-gradient(circle at 100% 100%,transparent 70.5%,#6fd2a6 71%) 100% 100%/50% 50% no-repeat}
.auth .side .logo{position:absolute;top:40px;left:calc(var(--vx) + var(--gap));height:40px;width:auto;display:block}
.auth .side .intro{position:absolute;left:calc(var(--vx) + var(--gap));right:var(--gap);bottom:calc(100% - var(--hy) + 36px)}
.auth .side .addr{position:absolute;left:calc(var(--vx) + var(--gap));right:var(--gap);top:calc(var(--hy) + 28px);color:#9bb6bb;margin:0}
.auth .side h1{color:var(--lime);font-size:clamp(24px,3.1vw,44px);overflow-wrap:break-word;hyphens:manual}
.auth .side p{color:#c9d8db;max-width:44ch}
.auth .form{padding:48px max(24px,5vw);display:flex;flex-direction:column;justify-content:center;gap:16px;max-width:540px;width:100%}
.auth .form h2{margin-top:6px}
.qr{background:#fff;padding:10px;display:inline-block}
.qr svg{display:block}

@media (max-width:860px){
  .auth{grid-template-columns:1fr;min-height:0}
  .auth .side{min-height:440px;--hy:72%}
  .grid2{grid-template-columns:1fr}
  .docs{grid-template-columns:1fr}
  .process{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:14px}
  .stats,.stats.four{grid-template-columns:1fr}
  .orgsel{margin-left:0;width:100%}.orgsel select{max-width:none;flex:1}
  .user{text-align:left;margin-left:0}
  .pcard{grid-template-columns:1fr}.pcard .side{align-items:flex-start}
  .row{grid-template-columns:auto 1fr}.row .pill{grid-column:2;justify-self:start}
}

/* Verwaltung */
.card{background:var(--surface);padding:16px 18px;border-top:3px solid var(--lime);margin-bottom:12px}
.narrow{max-width:520px}
.section{margin-top:34px}
.section>.ph{margin-bottom:12px}
td form.inline+form.inline{margin-left:4px}
td input[type=text]{padding:4px 8px;max-width:260px;display:inline-block;width:auto}