/* Messelix – gemeinsames Design-System „Richtung B – Klarheit".
 * Farbwelt per <html data-theme="mitternacht|graphit|tanne|pflaume"> (serverseitig aus ENV THEME).
 * CSP: nur Dateien, keine Inline-Styles – auch Diagrammfarben laufen über Klassen + Variablen. */

@font-face{font-family:'Hanken Grotesk';src:url('fonts/HankenGrotesk-var.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}

/* ---------- Farbwelten ---------- */
:root,[data-theme=mitternacht]{--primary:#1B2440;--primary-2:#2E3A5E;--accent:#C9A96E;--accent-hover:#D8BC86;--bg:#F4F3F0;--surface:#E7E5E0;--surface-2:#DCE2E8;--ink:#151B2E;
  --muted:#555A66;--bar:#A9B4D0;--on-primary:#E4E7F0;--on-primary-2:#C3CADC;--star:#8A641C;--star-off:#8E8B85}
[data-theme=graphit]{--primary:#24272C;--primary-2:#3D4249;--accent:#BF9F5F;--accent-hover:#CFB277;--bg:#F4F3F1;--surface:#E6E4E0;--surface-2:#E1E5E1;--ink:#1C1E22;
  --muted:#575A5F;--bar:#A9ACB3;--on-primary:#E8E9EB;--on-primary-2:#C6C9CE;--star:#8A641C;--star-off:#8E8B85}
[data-theme=tanne]{--primary:#1E3A34;--primary-2:#31584E;--accent:#D2B98A;--accent-hover:#DEC9A0;--bg:#F3F3EF;--surface:#E3E7E0;--surface-2:#E6E5D8;--ink:#14211E;
  --muted:#505A56;--bar:#9EBDB1;--on-primary:#E3EEE9;--on-primary-2:#BFD3CB;--star:#8A641C;--star-off:#8E8B85}
[data-theme=pflaume]{--primary:#3A2340;--primary-2:#59405F;--accent:#C9CBD3;--accent-hover:#D8DAE0;--bg:#F4F2F1;--surface:#E7E2E5;--surface-2:#E1E4E6;--ink:#241A27;
  --muted:#5C5360;--bar:#B8A3BE;--on-primary:#EFE6F1;--on-primary-2:#D3C3D7;--star:#8A641C;--star-off:#8E8B85}
:root{--white:#fff;--focus:var(--primary);--line:rgba(0,0,0,.12);
  --danger:#9B2C24;--danger-bg:#F5E2DF;--ok-bg:var(--surface-2);
  --sans:'Hanken Grotesk','Helvetica Neue','Segoe UI',Arial,sans-serif;
  --r-xl:36px;--r-l:28px;--r-m:20px;--r-s:14px}

@supports (color:color-mix(in srgb,red,blue)){:root{--line:color-mix(in srgb,var(--ink) 12%,transparent)}}

/* Dunkle Flächen: Fokusrahmen in Akzentfarbe, sonst unsichtbar */
.hero,.home-hero,.bill,.entry-hero{--focus:var(--accent)}

/* ---------- Grundlage ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 var(--sans);font-feature-settings:'tnum' 0}
[hidden]{display:none!important}
h1,h2,h3,p,ul,ol,dl,figure{margin:0}
h1{font-size:34px;line-height:1.15;font-weight:600;letter-spacing:-.02em}
h2{font-size:22px;line-height:1.25;font-weight:700;letter-spacing:-.01em}
h3{font-size:19px;line-height:1.3;font-weight:700}
a{color:var(--primary);text-underline-offset:3px}
a:hover{color:var(--primary-2)}
small,.sub{color:var(--muted);font-size:14px}
code{font:inherit;font-size:.92em;background:var(--surface);padding:1px 6px;border-radius:6px;overflow-wrap:anywhere}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Kopf + Kapsel-Navigation ---------- */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;padding:22px 32px;flex-wrap:wrap;max-width:1440px;margin:0 auto}
.logo{font-weight:700;font-size:20px;letter-spacing:-.01em;display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none}
/* Bildmarke C (Band und Schild, einfarbig): Farbe aus der Farbwelt, Form aus logo-mark.svg (Maske) */
.logo i{display:none}
@supports (mask:url(#x)) or (-webkit-mask:url(#x)){.logo i{width:20px;height:32px;background:var(--primary);display:block;flex:none;-webkit-mask:url(logo-mark.svg?v=13) center/contain no-repeat;mask:url(logo-mark.svg?v=13) center/contain no-repeat}}
.nav{display:flex;gap:6px;align-items:center;min-width:0}
.nav-main{display:flex;gap:4px;background:var(--white);border-radius:999px;padding:5px;flex-wrap:wrap;align-items:center;min-width:0}
.nav-main a{padding:9px 16px;border-radius:999px;text-decoration:none;font-weight:500;color:var(--muted);font-size:15px;line-height:1.4;white-space:nowrap}
.nav-main a:hover{color:var(--ink);background:var(--bg)}
.nav-main a[aria-current]{background:var(--ink);color:var(--white)}
.acct{position:relative}
.acct summary{list-style:none;display:flex;align-items:center;gap:8px;background:var(--white);border-radius:999px;padding:5px 16px 5px 5px;cursor:pointer;font-weight:500;color:var(--muted);font-size:15px;min-height:48px}
.acct summary::-webkit-details-marker{display:none}
.acct summary:hover,.acct[open] summary{color:var(--ink)}
.acct-i{width:36px;height:36px;border-radius:50%;background:var(--surface);color:var(--primary);display:grid;place-items:center;font-weight:700;font-size:14px}
.acct-list{position:absolute;right:0;top:calc(100% + 8px);z-index:20;background:var(--white);border-radius:var(--r-m);padding:10px;min-width:240px;
  box-shadow:0 12px 32px rgba(0,0,0,.16);box-shadow:0 12px 32px color-mix(in srgb,var(--ink) 16%,transparent);display:flex;flex-direction:column;gap:2px}
.acct-who{padding:8px 12px 10px;border-bottom:1px solid var(--surface);margin-bottom:4px;font-size:14px;color:var(--muted);line-height:1.35}
.acct-who b{display:block;color:var(--ink);font-size:15px}
.acct-list a,.acct-list button.link{display:block;width:100%;text-align:left;padding:10px 12px;border-radius:12px;text-decoration:none;color:var(--ink);font-weight:500;font-size:15px}
.acct-list a:hover,.acct-list button.link:hover{background:var(--bg)}
.acct-list a[aria-current]{background:var(--surface)}
.nav form{margin:0}
.me{font-size:14px;color:var(--muted);text-align:right;line-height:1.35}.me b{color:var(--ink);display:block;font-size:15px;font-weight:600}
.wrap{padding:0 32px 72px;max-width:1440px;margin:0 auto}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:10px 0 26px}
.page-head p{color:var(--muted);max-width:64ch;margin-top:6px}
.foot{max-width:1440px;margin:0 auto;padding:0 32px 32px;color:var(--muted);font-size:13px}
.foot-links{margin-left:16px;white-space:nowrap}.foot-links a{color:inherit;margin-right:12px}
@media (max-width:600px){.foot-links{display:block;margin:8px 0 0}}

/* ---------- Knöpfe ---------- */
.btn,button[type=submit]:not(.link){display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--primary);color:var(--white);border:0;border-radius:999px;
  padding:13px 26px;font-weight:600;font-size:15px;line-height:1.3;cursor:pointer;text-decoration:none;min-height:48px}
.btn:hover,button[type=submit]:not(.link):hover{background:var(--primary-2);color:var(--white)}
.btn:disabled,button:disabled{opacity:.45;cursor:not-allowed}
.btn.light{background:var(--white);color:var(--ink)}.btn.light:hover{background:var(--surface);color:var(--ink)}
.btn.accent{background:var(--accent);color:var(--ink)}.btn.accent:hover{background:var(--accent-hover);color:var(--ink)}
.btn.quiet,button.quiet[type=submit]{background:var(--surface);color:var(--ink)}.btn.quiet:hover,button.quiet[type=submit]:hover{background:var(--surface-2);color:var(--ink)}
button.danger[type=submit],.btn.danger{background:var(--danger-bg);color:var(--danger)}button.danger[type=submit]:hover{background:var(--danger);color:var(--white)}
button.link{background:none;border:0;padding:0;color:var(--primary);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-weight:500}
button.link.danger{color:var(--danger)}

/* ---------- Flächen ---------- */
.tile{background:var(--white);border-radius:var(--r-l);padding:30px;min-width:0}
.tile.alt{background:var(--surface)}.tile.alt2{background:var(--surface-2)}
.tile>h2,.tile>h3{margin-bottom:4px}.tile>.sub{display:block;margin-bottom:18px}
.tile+.tile{margin-top:20px}
.stack-20>*+*{margin-top:20px}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:20px}

/* ---------- Formulare ---------- */
label{display:block}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:16px 18px;align-items:end}
.field-l,label>.l{display:block;font-weight:600;font-size:15px;margin-bottom:6px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input:not([type]),select,textarea{
  display:block;width:100%;border:2px solid transparent;border-radius:var(--r-s);padding:12px 16px;background:var(--bg);font-size:16px;min-height:50px;color:var(--ink)}
.tile.alt input,.tile.alt select,.tile.alt textarea{background:var(--white)}
input:not([type=checkbox]):not([type=radio]):focus,select:focus,textarea:focus{outline:none;border-color:var(--primary);background:var(--white)}
textarea{resize:vertical;min-height:96px}
select{appearance:none;-webkit-appearance:none;padding-right:42px;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 22px) 52%,calc(100% - 16px) 52%;background-size:6px 6px;background-repeat:no-repeat}
fieldset{border:0;padding:0;margin:0;min-width:0}
legend{font-size:19px;font-weight:700;padding:0;margin-bottom:14px}
.chk{display:flex;align-items:center;gap:10px;font-weight:500;min-height:44px}
.chk input{width:20px;height:20px;accent-color:var(--primary);flex:none}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
form.inline{display:inline}

/* ---------- Hinweise ---------- */
.note,.hint{color:var(--muted)}
p.hint,p.error,p.warn,p.demo,p.ok{margin:0 0 20px}
.notice,.error,.warn,.demo,.ok{display:block;border-radius:var(--r-m);padding:14px 20px;font-size:15px;line-height:1.45}
.error{background:var(--danger-bg);color:var(--danger);font-weight:600}
.warn{background:var(--surface);color:var(--ink);border-left:4px solid var(--accent)}
.demo{background:var(--surface-2);color:var(--ink)}
.ok{background:var(--surface-2);color:var(--ink);font-weight:600}
.badge{display:inline-block;padding:3px 11px;border-radius:999px;font-size:13px;font-weight:600;background:var(--surface);color:var(--ink);white-space:nowrap;vertical-align:middle}
.badge.paid{background:var(--surface-2)}.badge.pending{background:var(--accent);color:var(--ink)}.badge.cancelled{background:var(--danger-bg);color:var(--danger)}
.badge.warn{background:var(--danger-bg);color:var(--danger);border:0;padding:3px 11px}

/* ---------- Leere Zustände ---------- */
.empty{color:var(--muted);margin:6px 0}
.big-empty{background:var(--white);border-radius:var(--r-l);padding:56px 32px;text-align:center}
.big-empty h1,.big-empty h2{margin-bottom:10px}.big-empty p{max-width:52ch;margin:0 auto 18px;color:var(--muted)}

/* ---------- Tabellen ---------- */
.scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:15px}
th{text-align:left;color:var(--muted);font-weight:500;font-size:14px;padding:10px 12px;vertical-align:bottom}
td{padding:15px 12px;border-top:1px solid var(--surface);vertical-align:top}
td small,td .sub{display:block;margin-top:2px}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}

/* ---------- Kennzahlen ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:20px;margin-bottom:24px}
.kpi{padding:8px 4px 8px 22px;border-left:4px solid var(--primary);min-width:0}
.kpi:nth-child(2){border-color:var(--accent)}.kpi:nth-child(3){border-color:var(--primary-2)}.kpi:nth-child(4){border-color:var(--bar)}
.kpi b{font-size:40px;font-weight:600;letter-spacing:-.02em;display:block;line-height:1.1;overflow-wrap:anywhere}
.kpi span{color:var(--muted);font-size:15px}

/* ---------- Sterne ---------- */
.stars{color:var(--star);letter-spacing:2px;white-space:nowrap}.stars .off{color:var(--star-off)}

@media (max-width:1100px){.wrap{padding:0 20px 56px}.top{padding:18px 20px}.foot{padding:0 20px 28px}.me{text-align:left}}
@media (max-width:640px){
  h1{font-size:28px}
  .tile{padding:22px;border-radius:24px}
  .top{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
  .top .me{display:none}
  .nav{width:100%}
  .nav-main{flex:1;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  .nav-main::-webkit-scrollbar{display:none}
  .nav-main a{padding:9px 14px;font-size:14px;scroll-snap-align:start}
  .acct summary{padding:5px;min-height:46px}.acct-l{display:none}
  table.cards thead{display:none}
  table.cards tr{display:block;border-top:1px solid var(--surface);padding:12px 0}
  table.cards td{display:block;border:0;padding:2px 0}
  table.cards td:empty{display:none}
  table.cards td[data-l]:not(:first-child)::before{content:attr(data-l) ': ';color:var(--muted)}
}
@media print{
  body{background:#fff}
  .top .nav,.no-print,.foot{display:none!important}
  .tile{padding:0;border-radius:0}
}