/* ============================================================
   BROWNIFY · PLATTFORM
   Kundenportal · Administration · Mitarbeiterportal · Brownify ID
   Baut auf tokens.css auf.
   ============================================================ */

*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--ink);-webkit-text-size-adjust:100%}

body.bf{
  background:var(--ink);color:var(--text);
  font-family:var(--body);font-size:var(--fs-base);line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
body.bf::before{
  /* Ruhiger Schimmer im Hintergrund – kein Canvas, keine Rechenlast */
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(58% 44% at 14% 4%,rgba(176,194,232,.07),transparent 62%),
    radial-gradient(46% 40% at 88% 92%,rgba(130,150,195,.055),transparent 62%);
}

a{color:inherit;text-decoration:none}
svg{display:block}
img{max-width:100%;display:block}
::selection{background:var(--bronze);color:var(--ink)}
:focus-visible{outline:2px solid var(--bronze);outline-offset:2px;border-radius:4px}

.ico{flex:0 0 auto}
.muted{color:var(--muted)}
.mono{font-family:var(--mono);font-size:.9em}
.nowrap{white-space:nowrap}
.right{text-align:right}
.center{text-align:center}
.hide{display:none !important}

.skip{
  position:absolute;left:-9999px;top:0;z-index:999;
  padding:10px 16px;background:var(--surface-2);border-radius:0 0 var(--r) 0;
}
.skip:focus{left:0}

/* ============================================================
   KOPFLEISTE
   ============================================================ */
.topbar{
  position:sticky;top:0;z-index:var(--z-nav);
  height:var(--nav-h);display:flex;align-items:center;gap:var(--s4);
  padding:0 var(--s5);
  background:rgba(10,11,15,.86);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  border-bottom:1px solid var(--line);
}
.topbar-brand{display:flex;align-items:center;gap:10px;font-weight:650;letter-spacing:.01em}
.topbar-mark{
  width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(150deg,#fff,#aab3c4);color:var(--ink);
  font-weight:800;font-size:16px;
}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:var(--s3)}

.topbar-burger{
  display:none;width:38px;height:38px;border:0;background:transparent;
  cursor:pointer;flex-direction:column;justify-content:center;gap:5px;padding:0 8px;
}
.topbar-burger span{display:block;height:2px;background:var(--text);border-radius:2px;transition:var(--fast)}
.topbar-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.topbar-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.topbar-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.topbar-bell{
  position:relative;width:38px;height:38px;border-radius:var(--r);
  display:grid;place-items:center;color:var(--muted);transition:var(--fast);
}
.topbar-bell:hover{color:var(--text);background:var(--surface)}
.bell-dot{
  position:absolute;top:4px;right:2px;min-width:17px;height:17px;padding:0 4px;
  border-radius:var(--r-full);background:var(--bad);color:#1a0a0e;
  font-size:10px;font-weight:700;display:grid;place-items:center;
  border:2px solid var(--ink-2);
}

/* Benutzermenü – ohne JavaScript, per <details> */
.usermenu{position:relative}
.usermenu summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;
  padding:5px 10px 5px 5px;border-radius:var(--r-full);
  border:1px solid transparent;transition:var(--fast);
}
.usermenu summary::-webkit-details-marker{display:none}
.usermenu summary:hover{background:var(--surface);border-color:var(--line)}
.um-name{font-size:var(--fs-sm);font-weight:550;max-width:150px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.um-panel{
  position:absolute;right:0;top:calc(100% + 8px);width:262px;z-index:var(--z-pop);
  background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--r-lg);box-shadow:var(--sh-3);overflow:hidden;
  animation:pop var(--mid) var(--ease);
}
@keyframes pop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.um-head{padding:var(--s4);border-bottom:1px solid var(--line);display:flex;
  flex-direction:column;gap:3px}
.um-head span{font-size:var(--fs-xs);color:var(--muted)}
.um-panel a,.um-logout button{
  display:flex;align-items:center;gap:11px;width:100%;
  padding:11px var(--s4);font-size:var(--fs-sm);color:var(--muted);
  background:transparent;border:0;font-family:inherit;cursor:pointer;
  text-align:left;transition:var(--fast);
}
.um-panel a:hover,.um-logout button:hover{background:var(--surface-2);color:var(--text)}
.um-logout{border-top:1px solid var(--line)}
.um-logout button{color:var(--bad)}

.role-chip{
  display:inline-block;margin-top:6px;padding:2px 9px;border-radius:var(--r-full);
  font-size:10px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;
  color:var(--rc,#8d909c);border:1px solid color-mix(in srgb,var(--rc,#8d909c) 40%,transparent);
  background:color-mix(in srgb,var(--rc,#8d909c) 12%,transparent);
  width:fit-content;
}

.langsw{display:flex;gap:2px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-full);padding:2px}
.langsw a{
  padding:4px 10px;border-radius:var(--r-full);font-size:11px;font-weight:650;
  color:var(--faint);transition:var(--fast);
}
.langsw a:hover{color:var(--text)}
.langsw a.on{background:var(--surface-3);color:var(--text)}

/* ============================================================
   GERÜST
   ============================================================ */
.shell{display:flex;align-items:flex-start;max-width:var(--wrap);margin:0 auto;
  gap:var(--s6);padding:var(--s6) var(--s5) var(--s12)}

.sidenav{
  position:sticky;top:calc(var(--nav-h) + var(--s6));
  width:var(--side-w);flex:0 0 var(--side-w);
  max-height:calc(100vh - var(--nav-h) - var(--s10));overflow-y:auto;
  z-index:var(--z-side);
}
.nav-list{list-style:none;display:flex;flex-direction:column;gap:2px}
.nav-list a{
  display:flex;align-items:center;gap:11px;padding:9px 12px;
  border-radius:var(--r);color:var(--muted);font-size:var(--fs-sm);
  font-weight:520;transition:var(--fast);border:1px solid transparent;
}
.nav-list a:hover{background:var(--surface);color:var(--text)}
.nav-list a.on{
  background:var(--surface-2);color:var(--text);
  border-color:var(--line-2);font-weight:600;
}
.nav-list a.on .ico{color:var(--bronze)}
.nav-foot{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line)}
.nav-foot a{display:flex;align-items:center;gap:11px;padding:9px 12px;
  color:var(--faint);font-size:var(--fs-sm);border-radius:var(--r);transition:var(--fast)}
.nav-foot a:hover{color:var(--text);background:var(--surface)}

.content{flex:1;min-width:0}

/* ============================================================
   SEITENKOPF
   ============================================================ */
.page-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--s5);flex-wrap:wrap;margin-bottom:var(--s6);
}
.page-head h1{font-family:var(--disp);font-size:var(--fs-2xl);font-weight:680;
  letter-spacing:-.02em;line-height:1.2}
.page-sub{color:var(--muted);font-size:var(--fs-sm);margin-top:4px;max-width:62ch}
.page-actions{display:flex;gap:var(--s2);flex-wrap:wrap}

/* ============================================================
   KARTEN UND RASTER
   ============================================================ */
.card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--s5);
}
.card + .card{margin-top:var(--s4)}
.card-head{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s4);margin-bottom:var(--s4);flex-wrap:wrap}
.card-head h2{font-size:var(--fs-lg);font-weight:640}
.card-head .ico{color:var(--muted)}

.grid{display:grid;gap:var(--s4)}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}

/* Kennzahl-Kachel */
.stat{
  display:flex;align-items:center;gap:var(--s4);
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--s4) var(--s5);
  transition:var(--fast);
}
a.stat:hover{border-color:var(--line-2);background:var(--surface-2);transform:translateY(-1px)}
.stat-i{
  width:42px;height:42px;flex:0 0 auto;border-radius:var(--r);
  display:grid;place-items:center;color:var(--bronze);
  background:rgba(198,207,223,.08);border:1px solid var(--line);
}
.stat-b{display:flex;flex-direction:column;min-width:0}
.stat-v{font-family:var(--disp);font-size:1.6rem;font-weight:700;line-height:1.1;
  letter-spacing:-.02em}
.stat-l{font-size:var(--fs-xs);color:var(--muted);text-transform:uppercase;
  letter-spacing:.07em;margin-top:2px}
.stat-h{font-size:var(--fs-xs);color:var(--faint);margin-top:3px}

/* ============================================================
   DASHBOARD
   ============================================================ */

/* ---- Begrüssung mit Suche ---- */
.hero-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--s6);flex-wrap:wrap;margin-bottom:var(--s6);
}
.hero-head h1{
  font-family:var(--disp);font-size:1.95rem;font-weight:700;
  letter-spacing:-.028em;line-height:1.15;
}
.hero-head p{color:var(--muted);font-size:var(--fs-sm);margin-top:5px}

.hero-search{position:relative;flex:1;min-width:250px;max-width:430px}
.hero-search > .ico{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  color:var(--faint);pointer-events:none;
}
.hero-search input{padding-left:42px;border-radius:var(--r-full)}
.search-out{
  position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:var(--z-pop);
  background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--r-lg);box-shadow:var(--sh-3);
  max-height:340px;overflow-y:auto;padding:6px;
}
.search-out a{
  display:flex;align-items:center;gap:11px;padding:9px 11px;
  border-radius:var(--r);font-size:var(--fs-sm);color:var(--muted);
  transition:var(--fast);
}
.search-out a:hover,.search-out a.on{background:var(--surface-2);color:var(--text)}
.search-out .st{
  font-size:10px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--faint);flex:0 0 auto;
}
.search-out .sl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.search-out .empty-s{padding:16px;text-align:center;color:var(--faint);font-size:var(--fs-sm)}

/* ---- Was ansteht ---- */
.attention{display:flex;flex-direction:column;gap:var(--s2);margin-bottom:var(--s6)}
.att-item{
  display:flex;align-items:center;gap:12px;
  padding:12px var(--s4);border-radius:var(--r);
  border:1px solid;font-size:var(--fs-sm);transition:var(--fast);
}
.att-item span{flex:1}
.att-item strong{font-weight:700}
.att-item:hover{transform:translateX(2px)}
.att-warn{color:var(--warn);background:var(--warn-bg);border-color:rgba(245,199,127,.3)}
.att-bad{color:var(--bad);background:var(--bad-bg);border-color:rgba(255,138,154,.3)}
.att-busy{color:var(--busy);background:var(--busy-bg);border-color:rgba(127,180,245,.3)}

/* ---- Schnellaktionen ---- */
.quickbar{display:flex;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s8)}
.quick{
  display:inline-flex;align-items:center;gap:9px;
  padding:10px 16px;border-radius:var(--r-full);
  background:var(--surface);border:1px solid var(--line);
  color:var(--muted);font-size:var(--fs-sm);font-weight:550;
  transition:var(--fast);
}
.quick:hover{
  background:var(--surface-2);color:var(--text);
  border-color:var(--line-2);transform:translateY(-1px);
}
.quick .ico{color:var(--bronze)}

.sect-title{
  font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.11em;
  color:var(--faint);font-weight:650;margin-bottom:var(--s4);
}

/* ---- Service-Kacheln ----
   Der Kern der Übersicht: gross genug, dass man sie auf dem Telefon
   sicher trifft, und mit genug Text, dass klar ist, was dahinter kommt. */
.svc-grid{
  display:grid;gap:var(--s4);
  grid-template-columns:repeat(auto-fill,minmax(255px,1fr));
}
.svc{
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--s5);
  transition:transform var(--fast),border-color var(--fast),background var(--fast);
  position:relative;overflow:hidden;
}
.svc::after{
  /* Feiner Lichtstreifen am oberen Rand beim Überfahren */
  content:'';position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,var(--bronze),transparent);
  opacity:0;transition:opacity var(--mid);
}
.svc:hover{
  transform:translateY(-2px);border-color:var(--line-2);background:var(--surface-2);
}
.svc:hover::after{opacity:.8}

.svc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s4)}
.svc-ico{
  width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  background:rgba(198,207,223,.08);border:1px solid var(--line);color:var(--bronze);
}
.svc-ico.svc-ok{color:var(--ok);background:var(--ok-bg);border-color:rgba(126,224,184,.22)}
.svc-ico.svc-warn{color:var(--warn);background:var(--warn-bg);border-color:rgba(245,199,127,.22)}
.svc-ico.svc-bad{color:var(--bad);background:var(--bad-bg);border-color:rgba(255,138,154,.22)}
.svc-ico.svc-busy{color:var(--busy);background:var(--busy-bg);border-color:rgba(127,180,245,.22)}

.svc-num{
  font-family:var(--disp);font-size:1.75rem;font-weight:700;
  line-height:1;letter-spacing:-.03em;color:var(--text);
}
.svc h3{font-size:var(--fs-lg);font-weight:640;margin-bottom:5px}
.svc p{color:var(--muted);font-size:var(--fs-sm);line-height:1.55;flex:1}
.svc-foot{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line);
}
.svc-note{
  font-size:var(--fs-xs);font-weight:600;
  padding:2px 9px;border-radius:var(--r-full);
}
.svc-note.svc-ok{color:var(--ok);background:var(--ok-bg)}
.svc-note.svc-warn{color:var(--warn);background:var(--warn-bg)}
.svc-note.svc-bad{color:var(--bad);background:var(--bad-bg)}
.svc-note.svc-busy{color:var(--busy);background:var(--busy-bg)}
.svc-note.svc-neutral{color:var(--muted);background:rgba(153,160,176,.1)}
.svc-go{
  display:inline-flex;align-items:center;gap:6px;margin-left:auto;
  font-size:var(--fs-xs);color:var(--faint);transition:var(--fast);
}
.svc:hover .svc-go{color:var(--bronze);gap:9px}

.plan-dot{
  width:40px;height:40px;border-radius:12px;flex:0 0 auto;
  background:color-mix(in srgb,var(--pc,#8d909c) 22%,transparent);
  border:1px solid color-mix(in srgb,var(--pc,#8d909c) 50%,transparent);
}

/* Paketkarten – gleich hoch, Knopf immer unten bündig */
.plan-card{display:flex;flex-direction:column;margin-top:0 !important}
.plan-card.is-current{
  border-color:color-mix(in srgb,var(--pc,#8d909c) 55%,transparent);
  background:linear-gradient(160deg,
    color-mix(in srgb,var(--pc,#8d909c) 7%,transparent),var(--surface));
}

@media(max-width:620px){
  .hero-head h1{font-size:1.6rem}
  .hero-search{max-width:none}
  .svc-grid{grid-template-columns:1fr}
  .svc{padding:var(--s4)}
}

/* ============================================================
   TABELLEN
   ============================================================ */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface)}
table.data{width:100%;border-collapse:collapse;font-size:var(--fs-sm);min-width:560px}
table.data th{
  text-align:left;padding:11px var(--s4);font-size:var(--fs-xs);font-weight:640;
  color:var(--muted);text-transform:uppercase;letter-spacing:.07em;
  border-bottom:1px solid var(--line-2);white-space:nowrap;
  background:var(--surface-2);position:sticky;top:0;
}
table.data td{padding:12px var(--s4);border-bottom:1px solid var(--line);vertical-align:middle}
table.data tr:last-child td{border-bottom:0}
table.data tbody tr{transition:var(--fast)}
table.data tbody tr:hover{background:var(--surface-2)}
table.data a.rowlink{color:var(--text);font-weight:560}
table.data a.rowlink:hover{color:var(--bronze)}

/* Listenform statt Tabelle auf dem Telefon */
@media(max-width:720px){
  table.data{min-width:0}
  table.data thead{display:none}
  table.data tr{display:block;border-bottom:1px solid var(--line);padding:var(--s3) 0}
  table.data td{display:flex;justify-content:space-between;gap:var(--s4);
    border:0;padding:5px var(--s4)}
  table.data td::before{
    content:attr(data-l);color:var(--muted);font-size:var(--fs-xs);
    text-transform:uppercase;letter-spacing:.06em;flex:0 0 auto;
  }
}

/* ============================================================
   ABZEICHEN UND ZUSTÄNDE
   ============================================================ */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 10px;border-radius:var(--r-full);
  font-size:var(--fs-xs);font-weight:600;white-space:nowrap;
  border:1px solid;
}
.badge::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.badge-ok{color:var(--ok);background:var(--ok-bg);border-color:rgba(126,224,184,.3)}
.badge-warn{color:var(--warn);background:var(--warn-bg);border-color:rgba(245,199,127,.3)}
.badge-bad{color:var(--bad);background:var(--bad-bg);border-color:rgba(255,138,154,.3)}
.badge-busy{color:var(--busy);background:var(--busy-bg);border-color:rgba(127,180,245,.3)}
.badge-neutral{color:var(--muted);background:rgba(153,160,176,.1);border-color:var(--line-2)}

.progress{height:6px;border-radius:var(--r-full);background:var(--surface-3);
  overflow:hidden;min-width:70px}
.progress i{display:block;height:100%;border-radius:var(--r-full);
  background:linear-gradient(90deg,var(--bronze-deep),var(--bronze));
  transition:width var(--mid) var(--ease)}
.progress-l{font-size:var(--fs-xs);color:var(--muted);margin-left:8px}

.avatar{
  width:var(--av,36px);height:var(--av,36px);border-radius:50%;
  flex:0 0 auto;object-fit:cover;
}
.avatar-mono{
  display:grid;place-items:center;
  font-size:calc(var(--av,36px) * .38);font-weight:700;letter-spacing:.02em;
  color:hsl(var(--ah,220) 60% 88%);
  background:hsl(var(--ah,220) 30% 22%);
  border:1px solid hsl(var(--ah,220) 40% 34%);
}

/* ============================================================
   KNÖPFE
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 18px;border-radius:var(--r);border:1px solid var(--line-2);
  background:var(--surface-2);color:var(--text);
  font-family:inherit;font-size:var(--fs-sm);font-weight:600;
  cursor:pointer;transition:var(--fast);white-space:nowrap;
}
.btn:hover{background:var(--surface-3);border-color:var(--bronze-deep)}
.btn:active{transform:translateY(1px)}
.btn[disabled],.btn.is-off{opacity:.45;pointer-events:none}

.btn-primary{
  background:linear-gradient(150deg,var(--bronze-hot),var(--bronze-deep));
  color:var(--ink);border-color:transparent;font-weight:650;
}
.btn-primary:hover{box-shadow:0 8px 24px var(--glow);transform:translateY(-1px)}
.btn-danger{color:var(--bad);border-color:rgba(255,138,154,.35);background:var(--bad-bg)}
.btn-danger:hover{background:rgba(255,138,154,.2);border-color:var(--bad)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn-ghost:hover{background:var(--surface);color:var(--text)}
.btn-sm{padding:6px 12px;font-size:var(--fs-xs)}
.btn-wide{width:100%}

/* ============================================================
   FORMULARE
   ============================================================ */
.form{display:flex;flex-direction:column;gap:var(--s4);max-width:660px}
.form label,.authform label{
  display:block;font-size:var(--fs-sm);font-weight:560;color:var(--champagne);
  margin-bottom:6px;
}
.form .hint,.authform .hint{font-size:var(--fs-xs);color:var(--faint);margin-top:5px}

input[type=text],input[type=email],input[type=password],input[type=url],
input[type=number],input[type=date],input[type=datetime-local],input[type=search],
input[type=tel],textarea,select{
  width:100%;padding:11px 14px;
  background:var(--ink-2);border:1px solid var(--line-2);
  border-radius:var(--r);color:var(--text);
  font-family:inherit;font-size:var(--fs-base);
  transition:var(--fast);
}
textarea{resize:vertical;min-height:110px;line-height:1.65}
input:focus,textarea:focus,select:focus{
  outline:none;border-color:var(--bronze);
  box-shadow:0 0 0 3px rgba(198,207,223,.12);
}
input::placeholder,textarea::placeholder{color:var(--faint)}
select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2399A0B0' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
select option{background:var(--surface-2);color:var(--text)}

.check{display:flex;align-items:flex-start;gap:10px;cursor:pointer;
  font-weight:450 !important;color:var(--muted) !important;margin:0 !important}
.check input{width:auto;margin-top:2px;accent-color:var(--bronze);cursor:pointer}

.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
@media(max-width:620px){.two,.three{grid-template-columns:1fr}}

.form-row{display:flex;gap:var(--s3);align-items:flex-end;flex-wrap:wrap}
.form-actions{display:flex;gap:var(--s3);align-items:center;padding-top:var(--s2);flex-wrap:wrap}

/* Passwortstärke */
.pwbar{height:4px;border-radius:var(--r-full);background:var(--surface-3);
  overflow:hidden;margin-top:8px}
.pwbar i{display:block;height:100%;width:0;border-radius:var(--r-full);
  background:var(--bad);transition:width var(--mid) var(--ease),background var(--mid)}
.pwbar[data-s="2"] i{background:var(--warn)}
.pwbar[data-s="3"] i{background:var(--busy)}
.pwbar[data-s="4"] i{background:var(--ok)}

/* ============================================================
   MELDUNGEN
   ============================================================ */
.flash,.alert{
  display:flex;align-items:flex-start;gap:11px;
  padding:12px var(--s4);border-radius:var(--r);
  margin-bottom:var(--s4);font-size:var(--fs-sm);
  border:1px solid;animation:slidein var(--mid) var(--ease);
}
@keyframes slidein{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
.flash .ico,.alert .ico{margin-top:2px;flex:0 0 auto}
.flash span,.alert span{flex:1}
.flash-success,.alert-ok{color:var(--ok);background:var(--ok-bg);border-color:rgba(126,224,184,.3)}
.flash-error,.alert-error{color:var(--bad);background:var(--bad-bg);border-color:rgba(255,138,154,.3)}
.flash-warn,.alert-warn{color:var(--warn);background:var(--warn-bg);border-color:rgba(245,199,127,.3)}
.flash-info,.alert-info{color:var(--busy);background:var(--busy-bg);border-color:rgba(127,180,245,.3)}
.flash-x{background:none;border:0;color:inherit;cursor:pointer;font-size:19px;
  line-height:1;opacity:.6;padding:0 2px}
.flash-x:hover{opacity:1}

/* Leerzustand */
.empty{
  display:flex;flex-direction:column;align-items:center;gap:var(--s4);
  padding:var(--s12) var(--s5);text-align:center;color:var(--muted);
}
.empty .ico{width:38px;height:38px;color:var(--faint)}
.empty p{max-width:44ch}

/* ============================================================
   BLÄTTERN
   ============================================================ */
.pager{display:flex;gap:4px;justify-content:center;margin-top:var(--s6);flex-wrap:wrap}
.pager a{
  min-width:36px;height:36px;padding:0 10px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--muted);font-size:var(--fs-sm);transition:var(--fast);
}
.pager a:hover{background:var(--surface);color:var(--text)}
.pager a.on{background:var(--surface-3);color:var(--text);border-color:var(--line-2);font-weight:640}

/* ============================================================
   BROWNIFY ID · Anmeldeseiten
   ============================================================ */
.auth-main{min-height:100vh;display:grid;place-items:center;padding:var(--s6) var(--s4)}
.authbox{width:100%;max-width:412px}
.auth-brand{
  display:flex;align-items:center;justify-content:center;gap:11px;
  margin-bottom:var(--s8);font-size:var(--fs-lg);font-weight:600;
}
.auth-brand b{color:var(--bronze);font-weight:700}
.auth-mark{
  width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(150deg,#fff,#aab3c4);color:var(--ink);
  font-weight:800;font-size:19px;box-shadow:0 0 34px var(--glow);
}
.authbox h1{font-family:var(--disp);font-size:1.62rem;font-weight:680;
  letter-spacing:-.02em;margin-bottom:6px}
.auth-sub{color:var(--muted);font-size:var(--fs-sm);margin-bottom:var(--s6)}

.authform{
  display:flex;flex-direction:column;gap:var(--s4);
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-xl);padding:var(--s6);
}
.authform > div > label,.authform > label{margin-bottom:6px}
.authform .btn{margin-top:var(--s2)}

.code-input{
  text-align:center;font-family:var(--mono);font-size:1.5rem;
  letter-spacing:.4em;padding:14px !important;text-indent:.4em;
}

.auth-links{
  display:flex;flex-direction:column;align-items:center;gap:9px;
  margin-top:var(--s5);font-size:var(--fs-sm);color:var(--muted);
}
.auth-links a{color:var(--bronze);font-weight:550}
.auth-links a:hover{color:var(--bronze-hot);text-decoration:underline}
.auth-foot{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:var(--s8);padding-top:var(--s5);border-top:1px solid var(--line);
  font-size:var(--fs-xs);color:var(--faint);
}

/* ============================================================
   VERLAUFSLISTE
   ============================================================ */
.feed{list-style:none;display:flex;flex-direction:column}
.feed li{display:flex;gap:var(--s3);padding:11px 0;border-bottom:1px solid var(--line);
  font-size:var(--fs-sm)}
.feed li:last-child{border-bottom:0}
.feed .ico{color:var(--faint);margin-top:3px}
.feed-b{flex:1;min-width:0}
.feed-t{font-size:var(--fs-xs);color:var(--faint);white-space:nowrap}

/* ============================================================
   CHAT
   ============================================================ */
.chat{display:grid;grid-template-columns:270px 1fr;gap:var(--s4);
  height:calc(100vh - var(--nav-h) - var(--s12) - 40px);min-height:440px}
.chat-list{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow-y:auto}
.chat-list a{display:flex;gap:11px;padding:var(--s3) var(--s4);
  border-bottom:1px solid var(--line);transition:var(--fast)}
.chat-list a:hover{background:var(--surface-2)}
.chat-list a.on{background:var(--surface-2);border-left:2px solid var(--bronze)}
.chat-main{display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.chat-head{padding:var(--s3) var(--s5);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:11px}
.chat-body{flex:1;overflow-y:auto;padding:var(--s5);display:flex;
  flex-direction:column;gap:var(--s3)}
.msg{display:flex;gap:10px;max-width:76%}
.msg-b{background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:9px 14px;font-size:var(--fs-sm);
  overflow-wrap:anywhere}
.msg-meta{font-size:10px;color:var(--faint);margin-top:4px}
.msg.mine{align-self:flex-end;flex-direction:row-reverse}
.msg.mine .msg-b{background:rgba(198,207,223,.12);border-color:var(--line-2)}
.msg.mine .msg-meta{text-align:right}
.chat-foot{padding:var(--s3) var(--s4);border-top:1px solid var(--line);
  display:flex;gap:var(--s2);align-items:flex-end}
.chat-foot textarea{min-height:44px;max-height:150px}
.dot-online{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:0 0 auto}
.dot-offline{width:8px;height:8px;border-radius:50%;background:var(--faint);flex:0 0 auto}
@media(max-width:840px){
  .chat{grid-template-columns:1fr;height:auto}
  .chat-list{max-height:210px}
  .chat-body{min-height:340px}
}

/* ============================================================
   KANBAN
   ============================================================ */
.board{display:flex;gap:var(--s4);overflow-x:auto;padding-bottom:var(--s4)}
.board-col{flex:0 0 262px;background:var(--ink-2);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--s3);min-height:180px}
.board-col.drag-over{border-color:var(--bronze);background:var(--surface)}
.board-col h3{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.07em;
  color:var(--muted);padding:4px 6px var(--s3);display:flex;justify-content:space-between}
.board-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:11px var(--s3);margin-bottom:var(--s2);cursor:grab;transition:var(--fast);
}
.board-card:hover{border-color:var(--line-2);transform:translateY(-1px)}
.board-card.dragging{opacity:.45;cursor:grabbing}
.board-card h4{font-size:var(--fs-sm);font-weight:580;margin-bottom:6px;line-height:1.4}
.board-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:var(--fs-xs);color:var(--muted)}

/* ============================================================
   BESONDERES
   ============================================================ */
.keybox{
  display:flex;align-items:center;gap:var(--s3);
  background:var(--ink-2);border:1px dashed var(--line-2);
  border-radius:var(--r);padding:11px var(--s4);
  font-family:var(--mono);font-size:var(--fs-sm);
  overflow-wrap:anywhere;
}
.keybox button{flex:0 0 auto}

.qr{background:#fff;padding:12px;border-radius:var(--r);width:fit-content}

.codes{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:var(--s2);font-family:var(--mono);font-size:var(--fs-sm)}
.codes span{background:var(--ink-2);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:8px 12px;text-align:center;letter-spacing:.06em}

.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);
  margin-bottom:var(--s5);overflow-x:auto}
.tabs a{padding:10px 16px;font-size:var(--fs-sm);color:var(--muted);
  border-bottom:2px solid transparent;white-space:nowrap;transition:var(--fast)}
.tabs a:hover{color:var(--text)}
.tabs a.on{color:var(--text);border-bottom-color:var(--bronze);font-weight:600}

.filters{display:flex;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s5);
  align-items:center}
.filters input,.filters select{width:auto;min-width:150px;padding:8px 12px;
  font-size:var(--fs-sm)}

.kv{display:grid;grid-template-columns:auto 1fr;gap:9px var(--s5);font-size:var(--fs-sm)}
.kv dt{color:var(--muted);white-space:nowrap}
.kv dd{color:var(--text);overflow-wrap:anywhere}

.prose{max-width:70ch;line-height:1.75}
.prose p{margin-bottom:var(--s4)}
.prose h2{font-size:var(--fs-lg);font-weight:640;margin:var(--s6) 0 var(--s3)}
.prose ul,.prose ol{margin:0 0 var(--s4) var(--s5)}

/* ============================================================
   TELEFON UND TABLET
   ============================================================ */
@media(max-width:960px){
  .topbar-burger{display:flex}
  .topbar-word{display:none}
  .um-name{display:none}
  .shell{flex-direction:column;padding:var(--s4) var(--s4) var(--s10);gap:0}
  .sidenav{
    position:fixed;left:0;top:var(--nav-h);bottom:0;width:255px;
    max-height:none;background:var(--ink-2);border-right:1px solid var(--line-2);
    padding:var(--s4);transform:translateX(-100%);
    transition:transform var(--mid) var(--ease);
  }
  .sidenav.open{transform:none;box-shadow:var(--sh-3)}
  .content{width:100%}
  .page-head h1{font-size:1.5rem}
}
@media(max-width:520px){
  .topbar{padding:0 var(--s3);gap:var(--s2)}
  .grid-3,.grid-4{grid-template-columns:1fr 1fr}
  .stat{padding:var(--s3) var(--s4);gap:var(--s3)}
  .stat-i{width:36px;height:36px}
  .stat-v{font-size:1.3rem}
}

/* Beim Drucken: nur der Inhalt, ohne Navigation – für Rechnungen */
@media print{
  .topbar,.sidenav,.page-actions,.flash,.pager,.auth-foot,.no-print{display:none !important}
  /* Die Druckansicht ist zugleich die PDF-Ausgabe (Rechnungen) – darum
     helles Papier, schwarze Schrift und keine Bedienelemente. */
  .table-wrap{overflow:visible;border:0}
  table.data th{background:#f0f0f0;color:#000;position:static}
  table.data td,table.data th{border-color:#ddd}
  .kv dt{color:#444}
  .badge{border-color:#999;color:#000;background:none}
  body.bf{background:#fff;color:#000}
  body.bf::before{display:none}
  .shell{display:block;padding:0;max-width:none}
  .card{border:1px solid #ccc;box-shadow:none}
  a{color:#000}
}