/* OMEST Brand Guidelines 04/2026: Primärrot e21a1a, Sekundär 710d0d / aa1414 / 390707, Tertiär e95353 / f8c6c6 / f18d8d, Neutralgrau.
   Header Tachyon Bold (Web Ersatz: Michroma, Versalien), Sub-Header Avenir Next Bold, Text Avenir Next (Web Ersatz: Figtree).
   Logo, Logomark (Bullet) und Brand Pattern sind die Vektoren aus dem Brandbook. Pattern nur im Kopf, mit Balance. */
:root{
  --red:#e21a1a; --wine:#710d0d; --darkred:#aa1414; --brown:#390707; --coral:#e95353; --rose:#f8c6c6; --salmon:#f18d8d;
  --gray-d:#6e7378; --gray:#c8ccd0; --gray-l:#e9ebee;
  --bg:#ffffff; --paper:#f7f8fa; --field:#ffffff; --ink:#1a1a1a; --ink-2:#5f6367; --line:#dfe2e6; --line-2:#eceef1;
  --accent:#e21a1a; --accent-soft:#fbe8e8; --wine-soft:#f6e9e9;
  --ok:#2f7a4f; --ok-soft:#e3f1e8; --warn:#8a5a0a; --warn-soft:#faf0d8; --danger:#aa1414;
  --display:'Michroma','Tachyon',system-ui,sans-serif; --body:'Figtree','Avenir Next','Avenir',system-ui,sans-serif;
  --r:14px; --r-s:8px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#141010; --paper:#1f1717; --field:#2a1e1e; --ink:#f3eeee; --ink-2:#c3b4b4; --line:#4a3434; --line-2:#352525; --gray:#5a4646; --gray-d:#a08e8e;
  --accent:#f04a4a; --accent-soft:#4a1c1c; --wine-soft:#3a1d1d;
  --ok:#6fcf97; --ok-soft:#1e3a2a; --warn:#e3b85a; --warn-soft:#3f3014; --danger:#f07a7a; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#141010; --paper:#1f1717; --field:#2a1e1e; --ink:#f3eeee; --ink-2:#c3b4b4; --line:#4a3434; --line-2:#352525; --gray:#5a4646; --gray-d:#a08e8e;
  --accent:#f04a4a; --accent-soft:#4a1c1c; --wine-soft:#3a1d1d;
  --ok:#6fcf97; --ok-soft:#1e3a2a; --warn:#e3b85a; --warn-soft:#3f3014; --danger:#f07a7a; color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 var(--body);font-variant-numeric:tabular-nums}
.wrap{max-width:1680px;margin:0 auto;padding-block:0 56px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--display);margin:0;text-transform:uppercase;letter-spacing:.02em;line-height:1.2;text-wrap:balance;font-weight:400}
h1{font-size:clamp(16px,2.4vw,24px);color:#fff} h2{font-size:clamp(17px,2.2vw,22px);color:var(--ink)} h3{font-size:13.5px;color:var(--red);letter-spacing:.05em}
p{margin:0}
.muted{color:var(--ink-2)} .small{font-size:13px}
.eyebrow{font-size:13px;color:var(--ink-2);font-weight:500}
a{color:var(--darkred)}
button{font:inherit;cursor:pointer}
/* Kopf: Weinrot, Logo, Brand Pattern */
.hero{background:var(--wine);color:#fff;position:relative;overflow:hidden;margin:0 0 26px;padding:24px max(16px,env(safe-area-inset-right,0px)) 26px max(16px,env(safe-area-inset-left,0px))}
.hero .wave{position:absolute;right:-6%;top:-30%;width:72%;height:170%;color:var(--red);pointer-events:none}
.hero .wave svg{width:100%;height:100%;fill:currentColor}
.hero .in{position:relative;max-width:1680px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.logo{display:block;width:clamp(150px,22vw,220px);height:auto;fill:#fff}
.hero .title{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.hero .title .sep{width:1px;height:44px;background:rgba(255,255,255,.35)}
.hero .sub{font-size:13px;color:rgba(255,255,255,.82);margin-top:5px}
.hero nav{display:flex;gap:6px;flex-wrap:wrap}
.hero nav a{color:#fff;text-decoration:none;font-weight:600;font-size:14px;padding:8px 12px;border-radius:var(--r-s);border:1px solid rgba(255,255,255,.28);background:rgba(57,7,7,.35)}
.hero nav a:hover{background:rgba(255,255,255,.14)}
@media (max-width:700px){.hero{padding-top:18px;padding-bottom:18px}.hero .title .sep{display:none}.hero .title{gap:14px}.hero .wave{right:-30%;top:-10%;width:120%;height:120%;opacity:.7}}
/* Bullet = Logomark */
.ob{display:inline-block;width:13px;height:10px;fill:var(--red);vertical-align:-1px;margin-right:7px;flex:none}
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--field);color:var(--ink);padding:9px 14px;border-radius:var(--r-s);font-weight:600;font-size:14px;transition:background .15s,border-color .15s;text-decoration:none}
.btn:hover{border-color:var(--ink-2)} .btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn.primary{background:var(--red);border-color:var(--red);color:#fff} .btn.primary:hover{background:var(--darkred);border-color:var(--darkred)}
.btn.ghost{border-color:transparent;background:transparent;color:var(--darkred)} .btn.ghost:hover{background:var(--wine-soft)}
.btn.danger{color:var(--danger)} .btn.sm{padding:6px 10px;font-size:13px} .btn[disabled]{opacity:.5;cursor:default}
.card{background:var(--paper);border-radius:var(--r)}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.tile{padding:18px 18px 16px;display:flex;flex-direction:column;gap:10px;text-align:left;min-height:140px;color:inherit;text-decoration:none;border-radius:var(--r);background:var(--paper);border:1px solid transparent;transition:border-color .12s,transform .12s}
.tile:hover{border-color:var(--red);transform:translateY(-1px)}
.tile h3{color:var(--ink);font-size:13px} .tile .who{font-size:13px;color:var(--ink-2);margin-top:4px} .tile .foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.tile .idx{font-family:var(--display);color:var(--red);font-size:12px;letter-spacing:.04em;margin-bottom:8px}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--line-2);color:var(--ink-2)}
.chip.ok{background:var(--ok-soft);color:var(--ok)} .chip.warn{background:var(--warn-soft);color:var(--warn)} .chip.acc{background:var(--accent-soft);color:var(--darkred)}
.chip .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.section{margin-top:30px} .section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.rule{height:1px;background:var(--line);margin:10px 0 16px}
/* Schritte, Nummern in Tachyon Rot wie im Inhaltsverzeichnis des Brandbooks */
.steps{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 18px}
.step{display:flex;align-items:center;gap:10px;padding:9px 13px;border-radius:var(--r-s);border:1px solid var(--line);background:var(--field);font-size:14px;font-weight:600;color:var(--ink-2)}
.step .n{font-family:var(--display);font-size:12px;color:var(--gray-d);letter-spacing:.04em}
.step.active{border-color:var(--red);color:var(--ink)} .step.active .n{color:var(--red)}
.step.done .n{color:var(--ok)}
.panel{padding:22px 22px 24px}
.intro{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;margin-bottom:14px}
.help{border-left:3px solid var(--red);padding:8px 14px;font-size:13.5px;color:var(--ink);margin:10px 0 16px;background:var(--field);border-radius:0 var(--r-s) var(--r-s) 0}
/* Formulare */
.form{display:grid;gap:12px 14px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));padding:18px;border-radius:var(--r);background:var(--field);border:1px solid var(--line)}
.f{display:flex;flex-direction:column;gap:5px;min-width:0} .f.span2{grid-column:span 2} .f.span3{grid-column:span 3} .f.full{grid-column:1/-1}
@media (max-width:600px){.f.span2,.f.span3{grid-column:span 1}}
label{font-size:12.5px;font-weight:600;color:var(--ink-2)}
input,select,textarea{font:inherit;color:var(--ink);background:var(--field);border:1px solid var(--gray);border-radius:var(--r-s);padding:9px 11px;min-width:0;width:100%}
input:hover,select:hover,textarea:hover{border-color:var(--gray-d)}
textarea{min-height:60px;resize:vertical}
.hint{font-size:12px;color:var(--ink-2)}
.calc{display:flex;gap:18px;flex-wrap:wrap;align-items:center;padding:10px 14px;border-radius:var(--r-s);background:var(--paper)}
.calc b{font-family:var(--display);font-size:13px;color:var(--red);letter-spacing:.02em}
.form-actions{grid-column:1/-1;display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;align-items:center}
.seg{display:inline-flex;border:1px solid var(--gray);border-radius:var(--r-s);overflow:hidden}
.seg button{border:0;background:var(--field);padding:8px 12px;font-size:13px;font-weight:600;color:var(--ink-2)} .seg button.on{background:var(--wine);color:#fff}
/* Listen */
.list{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.row{display:grid;grid-template-columns:1fr auto;gap:10px 14px;align-items:center;padding:12px 14px;border-radius:var(--r-s);background:var(--field);border:1px solid var(--line-2)}
.row .t{font-weight:600} .row .d{font-size:13px;color:var(--ink-2)} .row .v{font-family:var(--display);font-size:12.5px;white-space:nowrap;letter-spacing:.02em}
.row .acts{display:flex;gap:4px;grid-column:1/-1;justify-content:flex-end}
@media (min-width:700px){.row{grid-template-columns:1fr auto auto}.row .acts{grid-column:auto}}
.row.base{border-left:4px solid var(--wine)} .row.extra{border-left:4px solid var(--red)}
.empty{padding:18px;border:1px dashed var(--gray);border-radius:var(--r-s);color:var(--ink-2);font-size:14px;text-align:center;background:var(--field)}
.confirm{display:flex;gap:8px;align-items:center;font-size:13px}
.nav{display:flex;justify-content:space-between;gap:10px;margin-top:18px;flex-wrap:wrap}
/* Kennzahlen */
.kpis{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.kpi{padding:14px 16px;border-radius:var(--r-s);background:var(--field);border:1px solid var(--line-2)} .kpi .l{font-size:12px;color:var(--ink-2);font-weight:600;display:flex;align-items:center} .kpi .v{font-family:var(--display);font-size:16px;color:var(--ink);margin-top:6px;letter-spacing:.02em}
.tablewrap{overflow-x:auto} table{border-collapse:collapse;width:100%;font-size:14px} th,td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap} th:first-child,td:first-child{text-align:left} th{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);font-weight:600} tr.total td{font-weight:700;border-top:2px solid var(--ink);border-bottom:0}
.bars{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;align-items:end;height:120px;margin-top:26px}
.bar{background:var(--red);border-radius:2px 2px 0 0;position:relative;min-height:2px} .bar span{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);font-size:11px;color:var(--ink-2);white-space:nowrap}
.barlbl{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;font-size:11px;color:var(--ink-2);text-align:center}
.toast{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(20px);opacity:0;background:var(--brown);color:#fff;padding:10px 16px;border-radius:999px;font-weight:600;font-size:14px;transition:all .2s;pointer-events:none;z-index:20}
.toast.show{opacity:1;transform:translateX(-50%)}
.banner{padding:10px 14px;border-radius:var(--r-s);background:var(--warn-soft);color:var(--warn);font-weight:600;font-size:14px;margin-bottom:14px}
.submit{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:16px 18px;border-radius:var(--r-s);background:var(--field);border:1px solid var(--line-2)}
.pagefoot{margin-top:44px;padding-top:14px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--ink-2);align-items:center}
.pagefoot svg{width:74px;height:auto;fill:var(--red)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
/* Portal Ergänzungen */
.hero nav .user{color:rgba(255,255,255,.85);font-size:13px;padding:8px 4px}
.hero nav a.quiet{border-color:transparent;background:transparent;color:rgba(255,255,255,.75);font-weight:500}
.logo-link{display:block}
.tools{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.tool{padding:20px;border-radius:var(--r);background:var(--paper);display:flex;flex-direction:column;gap:10px;min-height:170px;color:inherit;text-decoration:none;border:1px solid transparent;transition:border-color .12s,transform .12s;position:relative}
.tool:hover{border-color:var(--red);transform:translateY(-1px)}
.tool.soon{opacity:.75} .tool.soon:hover{border-color:transparent;transform:none;cursor:default}
.tool h3{color:var(--ink);font-size:14px} .tool p{font-size:13.5px;color:var(--ink-2)}
.tool .idx{font-family:var(--display);color:var(--red);font-size:12px;letter-spacing:.04em}
.tool .foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.group{margin-top:34px} .group h2{font-size:clamp(16px,2vw,20px)}
.admin-grid{display:grid;gap:10px}
.admin-row{display:grid;grid-template-columns:1.2fr 1.6fr 1fr 1.6fr;gap:10px;align-items:center;padding:10px 12px;background:var(--field);border:1px solid var(--line-2);border-radius:var(--r-s)}
.admin-row .n{font-weight:600}
@media (max-width:800px){.admin-row{grid-template-columns:1fr}}
.center{min-height:50vh;display:grid;place-items:center;text-align:center}

.hero nav .langs{display:inline-flex;gap:2px;margin-left:6px;border:1px solid rgba(255,255,255,.28);border-radius:var(--r-s);overflow:hidden}
.hero nav .langs button{border:0;background:transparent;color:rgba(255,255,255,.75);font:inherit;font-size:12px;font-weight:600;padding:8px 9px;cursor:pointer}
.hero nav .langs button.on{background:#fff;color:var(--wine)}
.baseform{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px} .baseform label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--ink-2);font-weight:600;min-width:160px;flex:1} .baseform input{padding:7px 9px}
.viewas{background:var(--brown);color:#fff;display:flex;gap:12px;align-items:center;justify-content:center;padding:8px 16px;font-size:13.5px;font-weight:600;flex-wrap:wrap} .viewas .btn{background:#fff;color:var(--brown);border-color:#fff;padding:4px 10px}
.unit{font-family:var(--body);font-weight:600;font-size:.92em;letter-spacing:0}
.trend{margin-top:22px} .trend h3{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
table.months{font-size:12.5px} table.months th,table.months td{padding:6px 6px;text-align:right;white-space:nowrap} table.months th:first-child,table.months td:first-child{text-align:left;font-weight:600} table.months tr.total td{font-weight:700;border-top:2px solid var(--ink);border-bottom:0}
.sw{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:8px;vertical-align:-1px}
.legend{display:flex;gap:12px 18px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-2);margin:4px 0 6px} .legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.bars .stack{display:flex;flex-direction:column-reverse;position:relative;min-height:2px;border-radius:2px 2px 0 0;overflow:visible} .bars .stack .seg{width:100%;box-shadow:0 0 0 .5px currentColor;color:transparent} .bars .stack .seg:last-child{border-radius:2px 2px 0 0} .bars .stack span{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);font-size:11px;color:var(--ink-2);white-space:nowrap}
.hero nav .todo-badge{background:var(--red);color:#fff;border-color:var(--red);font-weight:700}
/* Excel Export: Knopfgruppe und Dialog */
.xp{display:inline-flex} .xp .btn:first-child{border-top-right-radius:0;border-bottom-right-radius:0} .xp .btn:last-child{border-top-left-radius:0;border-bottom-left-radius:0;border-left:0;padding:9px 10px}
.modal{position:fixed;inset:0;background:rgba(20,10,10,.45);display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;z-index:50;overflow:auto} .modal[hidden]{display:none}
.modal-card{background:var(--bg);border-radius:var(--r);max-width:860px;width:100%;padding:22px 24px;box-shadow:0 20px 60px rgba(0,0,0,.25)} .modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.modal-card h4{margin:0 0 6px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)} .modal-card code{font-size:12px;background:var(--paper);padding:1px 5px;border-radius:4px}
.modal-card table.ph td,.modal-card table.ph th{white-space:normal;vertical-align:top} .modal-card table.ph td:first-child{width:60%}
table.months tr.cmp td{color:var(--ink-2);font-style:italic}
/* Umsatzplanung */
table.ov tr.sec td{background:var(--paper);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:12px;color:var(--darkred);text-align:left} table.ov tr.grand td{border-top:3px double var(--ink)}
.block{margin-top:12px} .block .bhead{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap} .block .bk{display:flex;gap:22px;flex-wrap:wrap} .block .bk>div{display:flex;flex-direction:column} .block .bk b{font-size:16px}
.params{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;margin-top:12px;padding-top:12px;border-top:1px solid var(--line-2)} .pf{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--ink-2)} .pf input,.pf select{padding:6px 8px;font-size:13px;width:auto} .pf em{font-style:normal;margin-left:4px} .pf>span{white-space:nowrap}
.blockdetail{margin-top:8px}
.toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:10px} .seg button.on{background:var(--red);color:#fff;border-color:var(--red)}
table.cust{font-size:12.5px} table.cust th,table.cust td{padding:5px 6px} table.cust tbody tr{cursor:pointer} table.cust tbody tr:hover td{background:var(--wine-soft)} table.cust td.fc{color:var(--ink-2)} table.cust tr.off td{opacity:.5}
.mrow{display:flex;gap:6px;flex-wrap:wrap} .mrow label{display:flex;flex-direction:column;font-size:11px;color:var(--ink-2);width:64px} .mrow input{padding:5px 6px;font-size:12px}
.inl{display:flex;align-items:center;gap:6px} .inl em{font-style:normal;color:var(--ink-2)}
table.cust th,table.cust td{padding:4px 5px;font-size:11.5px} table.cust td:nth-child(-n+4),table.cust th:nth-child(-n+4){text-align:left} table.cust td:nth-child(1),table.cust td:nth-child(3){max-width:150px;overflow:hidden;text-overflow:ellipsis} table.cust td:nth-child(4){max-width:80px;overflow:hidden;text-overflow:ellipsis}
table.ov td,table.ov th{padding:6px 6px;font-size:13px} table.ov th{font-size:11px} table.ov .unit{display:none}
/* Jahreskennzeichnung 2026 (grau) / 2027 (rot) */
.y26{color:var(--ink-2)} th.y26{color:var(--ink-2)} .y27{color:var(--ink)} th.y27,.yl.y27{color:var(--darkred)} th.sep,td.sep{border-right:2px solid var(--line)}
tr.grp th{font-size:11px;letter-spacing:.06em;text-align:left;background:var(--paper);border-bottom:0;padding:6px 8px}
.yg{display:flex;gap:16px;align-items:flex-end;padding:6px 10px;border-radius:var(--r-s);background:var(--paper)} .yg.y27{background:var(--wine-soft)} .yl{display:block;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--ink-2);white-space:nowrap} .yg>div{display:flex;flex-direction:column}
.ytab{margin-top:14px} .ytab .yhead{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;padding:6px 10px;border-radius:var(--r-s) var(--r-s) 0 0;background:var(--paper);color:var(--ink-2)} .ytab.y27 .yhead{background:var(--wine-soft);color:var(--darkred)}
.block .bk>.yg{flex-direction:row;align-items:flex-end} .yg .yl{align-self:center}
/* Übersichten: ganze Breite nutzen, erste Spalte fixiert, kompakte Zahlen statt horizontalem Scrollen */
.wrap{padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
.tablewrap table{table-layout:auto;width:100%} .tablewrap th:first-child,.tablewrap td:first-child{position:sticky;left:0;z-index:1;background:var(--paper)} .tablewrap thead th:first-child{z-index:2} .tablewrap tr.total td:first-child,.tablewrap tr.grand td:first-child{background:var(--paper)} .tablewrap tr.sec td:first-child{background:var(--paper)}
.card .tablewrap th:first-child,.card .tablewrap td:first-child{background:var(--paper)} .modal-card .tablewrap th:first-child,.modal-card .tablewrap td:first-child{background:var(--bg)}
table.ov td,table.ov th{padding:6px 5px;font-size:12.5px} table.ov .unit{display:none}
table.months th,table.months td{padding:5px 4px;font-size:12px} table.cust th,table.cust td{padding:4px 4px;font-size:11.5px}
table.months td:first-child,table.ov td:first-child{white-space:normal;min-width:150px;max-width:260px}
@media (max-width:1400px){table.ov td,table.ov th,table.months th,table.months td{font-size:11.5px;padding:5px 4px}}
.kpis{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.params.ro input,.params.ro select{background:var(--paper);color:var(--ink-2)}
table.months th.dim,table.months td.dim{color:var(--gray)} table.months tr.hintrow td{color:var(--ink-2);font-size:11.5px} table.months tr.hintrow td:first-child{padding-left:18px}
table.ist tr.sub td{font-size:12px;color:var(--ink-2);background:var(--bg)} table.ist tr.blk td{border-top:1px solid var(--line)}