/* ============================================================
   Bona Vita® · Käuferportal · V5-Design-Sprache
   Navy #0f1d3f · Gold #caa26a · Cormorant Garamond + Inter
   ============================================================ */

:root{
  --navy:#0f1d3f;
  --navy-2:#1a2d48;
  --navy-3:#22395a;
  --gold:#caa26a;
  --gold-dim:#a9865a;
  --ivory:#f8f4ec;
  --ivory-dim:#d6cfbf;
  --paper:#faf7f1;
  --line:rgba(202,162,106,.22);
  --line-soft:rgba(20,35,58,.08);
  --text:#1a2237;
  --text-soft:#5a6077;
  --ok:#3d7a59;
  --warn:#b8832a;
  --shadow:0 10px 40px rgba(20,35,58,.08);
  --radius:14px;
  --sidebar-w:260px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:15px;
  line-height:1.55;
  color:var(--text);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;letter-spacing:-.01em;color:var(--navy);}
h1{font-size:clamp(28px,3.4vw,46px);line-height:1.1}
h2{font-size:clamp(24px,2.6vw,34px);line-height:1.15}
h3{font-size:clamp(18px,1.6vw,22px);line-height:1.25}
h4{font-size:16px;line-height:1.3}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.eyebrow, .hero__eyebrow, .extra__tag, .card__label {
  font-family:'Inter',sans-serif;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:500;
}

/* ============ SIDEBAR ============ */
.sidebar{
  position:fixed;inset:0 auto 0 0;width:var(--sidebar-w);
  background:var(--navy);color:var(--ivory);
  display:flex;flex-direction:column;
  padding:28px 0 20px;
  z-index:40;
  border-right:1px solid rgba(255,255,255,.04);
}
.sidebar__logo{padding:0 24px 22px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:14px}

/* Bonaria & Partner — Hauptmarke */
.brand-bonaria{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin-bottom:14px}
.brand-bonaria__name{
  font-family:'Cormorant Garamond',serif;
  font-size:22px;font-weight:600;line-height:1.1;
  color:var(--ivory);letter-spacing:.01em;
}
.brand-bonaria__amp{color:var(--gold);font-style:italic;margin:0 4px;font-weight:500}
.brand-bonaria__since{
  font-family:'Inter',sans-serif;
  font-size:9.5px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--gold);font-weight:500;
  padding-top:2px;
}

/* Untertitel: Überbauung Bona Vita Gstaad · Käuferportal */
.brand-project{
  display:flex;flex-direction:column;gap:2px;
  padding-top:12px;border-top:1px dashed rgba(202,162,106,.22);
}
.brand-project__main{
  font-family:'Cormorant Garamond',serif;
  font-size:16px;font-weight:500;color:var(--ivory);
  line-height:1.2;letter-spacing:.005em;
}
.brand-project__main sup{font-size:.5em;color:var(--gold);top:-.9em;margin-left:1px}
.brand-project__sub{
  font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ivory-dim);margin-top:2px;
}

/* Legacy — falls noch irgendwo referenziert */
.brand__mark{display:block;font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:600;color:var(--ivory)}
.brand__mark sup{font-size:.5em;color:var(--gold);top:-.9em;margin-left:2px}
.brand__sub{display:block;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-top:4px}

.nav{flex:1;padding:4px 14px;overflow-y:auto}
.nav__group{margin-bottom:14px}
.nav__group + .nav__group{border-top:1px solid rgba(202,162,106,.14);padding-top:10px}
.nav__group-title{
  padding:6px 14px 4px;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(202,162,106,.7);font-weight:600;
}
.nav__item{
  display:flex;align-items:center;gap:12px;
  padding:10px 14px;border-radius:10px;
  font-size:14px;color:var(--ivory-dim);
  transition:background .18s,color .18s;cursor:pointer;
  position:relative;
}
.nav__item:hover{background:rgba(255,255,255,.04);color:var(--ivory)}
.nav__item.is-active{background:rgba(202,162,106,.1);color:var(--ivory)}
.nav__item.is-active::before{
  content:"";position:absolute;left:-14px;top:8px;bottom:8px;width:3px;
  background:var(--gold);border-radius:0 3px 3px 0;
}
.nav__icon{
  width:20px;display:inline-flex;justify-content:center;
  color:var(--gold);font-size:14px;opacity:.85;
}
.badge{
  display:inline-block;margin-left:6px;padding:1px 7px;
  background:var(--gold);color:var(--navy);
  border-radius:10px;font-size:10px;font-weight:700;font-style:normal;
}

.sidebar__foot{padding:16px 20px 0;border-top:1px solid rgba(255,255,255,.08);margin-top:10px}
.lang-switch{display:flex;gap:4px;margin-bottom:14px}
.lang-switch button{
  flex:1;background:transparent;border:1px solid rgba(255,255,255,.12);
  color:var(--ivory-dim);font-size:11px;letter-spacing:.12em;
  padding:6px 0;border-radius:6px;cursor:pointer;font-family:inherit;
  transition:.15s;
}
.lang-switch button:hover{border-color:var(--gold);color:var(--ivory)}
.lang-switch button.is-active{background:var(--gold);color:var(--navy);border-color:var(--gold);font-weight:600}

.logout{
  width:100%;background:transparent;border:1px solid rgba(255,255,255,.14);
  color:var(--ivory-dim);font-family:inherit;font-size:12px;letter-spacing:.1em;
  padding:9px;border-radius:8px;cursor:pointer;transition:.15s;
}
.logout:hover{border-color:var(--ivory-dim);color:var(--ivory)}

/* ============ MAIN ============ */
.main{margin-left:var(--sidebar-w);min-height:100vh;padding:0;background:var(--paper)}

.page{display:none;padding:0 0 80px;}
.page.is-active{display:block;animation:fade .3s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.page__head{padding:40px 44px 20px;max-width:1100px}
.page__head .eyebrow{display:block;margin-bottom:10px}
.page__head h1{margin-bottom:10px}
.page__head p{color:var(--text-soft);max-width:720px}

.section-title{padding:0 44px;margin:36px 0 18px;max-width:1100px}

/* ============ HERO ============ */
.hero{position:relative;height:clamp(240px,32vw,340px);overflow:hidden}
.hero__img{width:100%;height:100%;object-fit:cover;object-position:center 65%}
.hero__overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,35,58,.15) 0%,rgba(20,35,58,.72) 100%);
}
.hero__content{
  position:absolute;left:0;right:0;bottom:0;padding:40px 44px;color:var(--ivory);
  max-width:1100px;
}
.hero__eyebrow{color:var(--gold)}
.hero__title{color:var(--ivory);font-size:clamp(32px,4.2vw,52px);margin:8px 0 10px}
.hero__meta{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--ivory-dim);letter-spacing:.04em}
.hero__meta span:nth-child(even){opacity:.5}

/* ============ GREETING ============ */
.greeting{padding:30px 44px 8px;max-width:1100px}
.greeting h2{font-size:clamp(22px,2.4vw,30px);color:var(--navy);margin-bottom:6px}
.greeting p{color:var(--text-soft);max-width:780px}

/* ============ CARDS ============ */
.cards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;
  padding:22px 44px 0;max-width:1100px;
}
.card{
  background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:18px 18px 16px;position:relative;
  transition:transform .2s,box-shadow .2s;
}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.card__label{display:block;margin-bottom:8px}
.card__value{
  display:block;font-family:'Cormorant Garamond',serif;font-size:30px;
  color:var(--navy);line-height:1;font-weight:500;
}
.card__value em{font-size:.6em;font-style:normal;margin-left:2px;color:var(--text-soft)}
.card__sub{display:block;font-size:12px;color:var(--text-soft);margin-top:8px}
.bar{height:4px;background:var(--line-soft);border-radius:4px;margin-top:12px;overflow:hidden}
.bar__fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-dim));border-radius:4px}

/* ============ GRID 2 ============ */
.grid-2{
  display:grid;grid-template-columns:1.3fr 1fr;gap:22px;
  padding:28px 44px 0;max-width:1100px;
}
.block{background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius);padding:22px 24px}
.block h3{margin-bottom:16px}

/* timeline */
.timeline{list-style:none}
.timeline li{
  display:grid;grid-template-columns:88px 1fr;gap:14px;align-items:start;
  padding:10px 0;border-bottom:1px solid var(--line-soft);font-size:13.5px;
}
.timeline li:last-child{border-bottom:0}
.timeline time{font-size:12px;color:var(--text-soft);letter-spacing:.03em}
.timeline strong{font-weight:600;color:var(--navy);font-size:13px}

/* contact card */
.contact-card{
  display:flex;gap:14px;align-items:flex-start;
  background:var(--paper);border:1px solid var(--line-soft);border-radius:12px;padding:14px;margin-bottom:14px;
}
.contact-card__body{display:flex;flex-direction:column;gap:2px;font-size:13px}
.contact-card__body strong{font-size:15px;color:var(--navy)}
.contact-role{font-size:12px;color:var(--text-soft);margin-bottom:4px}
.contact-card a{color:var(--gold-dim);font-size:13px}

.avatar{
  width:44px;height:44px;border-radius:50%;flex:0 0 44px;
  background:linear-gradient(135deg,var(--navy-2),var(--navy));
  color:var(--gold);display:flex;align-items:center;justify-content:center;
  font-family:'Cormorant Garamond',serif;font-weight:600;font-size:16px;
  border:1px solid var(--gold);
}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border-radius:999px;
  background:#fff;border:1px solid var(--line);color:var(--navy);
  font-family:inherit;font-size:12.5px;letter-spacing:.04em;cursor:pointer;
  transition:.18s;text-decoration:none;
}
.btn:hover{border-color:var(--gold);color:var(--gold-dim);transform:translateY(-1px)}
.btn--gold{background:var(--gold);color:var(--navy);border-color:var(--gold);font-weight:600}
.btn--gold:hover{background:var(--gold-dim);border-color:var(--gold-dim);color:#fff;transform:translateY(-1px)}

.link{color:var(--gold-dim);font-size:12px;letter-spacing:.06em;font-weight:500}
.link:hover{color:var(--navy)}

/* ============ UNIT / RESIDENZ ============ */
.unit-main{
  display:grid;grid-template-columns:1.1fr 1fr;gap:0;
  background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius);
  overflow:hidden;margin:8px 44px 0;max-width:1100px;
}
.unit-main__img{width:100%;height:100%;object-fit:cover;min-height:280px}
.unit-main__body{padding:30px 32px}
.unit-main__body h2{margin:8px 0 18px}

.kv{display:grid;grid-template-columns:140px 1fr;gap:8px 18px;font-size:13.5px}
.kv dt{color:var(--text-soft);font-size:12px;letter-spacing:.04em}
.kv dd{color:var(--navy);font-weight:500}
.kv--sm{grid-template-columns:110px 1fr;gap:4px 12px;font-size:12.5px}
.kv--sm dt{font-size:11px}

.unit-links{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}

.extras-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;
  padding:0 44px;max-width:1100px;
}
.extra{
  background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:20px;position:relative;
  transition:.2s;
}
.extra:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:var(--shadow)}
.extra__tag{display:block;margin-bottom:8px}
.extra strong{
  display:block;font-family:'Cormorant Garamond',serif;font-size:24px;
  color:var(--navy);margin-bottom:14px;font-weight:500;
}
.extra .link{margin-top:14px;display:inline-block}
.extra--shared{background:linear-gradient(180deg,#fff 0%,var(--paper) 100%);border-style:dashed;border-color:var(--line)}

.note{
  margin:24px 44px 0;max-width:1100px;
  padding:14px 18px;background:rgba(202,162,106,.08);
  border-left:3px solid var(--gold);border-radius:4px;font-size:13px;
}
.note strong{color:var(--navy);margin-right:4px}

/* ============ PHASES ============ */
.phases{
  display:grid;grid-template-columns:repeat(5,1fr);gap:10px;
  padding:10px 44px 0;max-width:1100px;
}
.phase{
  padding:18px 16px;background:#fff;border:1px solid var(--line-soft);border-radius:12px;
  position:relative;font-size:12.5px;
}
.phase__num{
  font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--gold);font-weight:600;display:block;margin-bottom:8px;
}
.phase strong{display:block;color:var(--navy);font-size:13.5px;margin-bottom:4px}
.phase em{color:var(--text-soft);font-style:normal;font-size:12px}
.phase.is-done{background:var(--navy);color:var(--ivory)}
.phase.is-done strong{color:var(--ivory)}
.phase.is-done em{color:var(--gold)}
.phase.is-active{border-color:var(--gold);box-shadow:0 0 0 2px rgba(202,162,106,.22)}
.phase.is-active .phase__num{color:var(--gold)}

/* gallery */
.gallery{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;
  padding:0 44px;max-width:1100px;
}
.gallery figure{background:#fff;border:1px solid var(--line-soft);border-radius:12px;overflow:hidden}
.gallery img{width:100%;height:220px;object-fit:cover}
.gallery figcaption{padding:10px 14px;font-size:12px;color:var(--text-soft)}

/* ============ TABLES ============ */
.table{
  width:calc(100% - 88px);margin:0 44px;max-width:1100px;
  border-collapse:collapse;background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius);
  overflow:hidden;font-size:13.5px;
}
.table th,.table td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--line-soft)}
.table th{background:var(--navy);color:var(--ivory);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:500}
.table tbody tr:hover{background:var(--paper)}
.table tfoot td{background:rgba(202,162,106,.08);font-size:14px}

.pill{
  display:inline-block;padding:3px 10px;border-radius:999px;
  background:var(--line-soft);color:var(--text-soft);font-size:11px;letter-spacing:.06em;
}
.pill--done{background:rgba(61,122,89,.15);color:var(--ok)}
.pill--open{background:rgba(184,131,42,.15);color:var(--warn)}

/* ============ OPTIONS ============ */
.options-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;
  padding:0 44px;max-width:1100px;
}
.option-card{
  background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius);padding:20px;
  transition:.2s;position:relative;
}
.option-card:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:var(--shadow)}
.option-card h4{margin-bottom:6px}
.option-card p{font-size:13px;color:var(--text-soft);margin-bottom:14px}
.option-card.is-set{border-left:3px solid var(--ok)}
.option-card.is-pending{border-left:3px solid var(--warn)}
.option-card.is-pending em{color:var(--warn);font-style:normal;font-weight:600}
.deadline{
  display:block;font-size:11px;color:var(--text-soft);letter-spacing:.04em;
  margin-bottom:10px;
}

/* ============ APPOINTMENTS ============ */
.appts{list-style:none;padding:0 44px;max-width:1100px}
.appts li{
  display:grid;grid-template-columns:180px 1fr auto;gap:16px;align-items:center;
  padding:18px 0;border-bottom:1px solid var(--line-soft);font-size:13.5px;
}
.appts time{font-size:13px;color:var(--gold-dim);letter-spacing:.04em;font-weight:500}
.appts strong{display:block;font-size:15px;color:var(--navy);margin-bottom:2px}
.appts span{font-size:13px;color:var(--text-soft);display:block}

/* ============ DOCS ============ */
.docs{list-style:none;padding:0 44px;max-width:1100px}
.docs li{
  display:grid;grid-template-columns:40px 1fr auto auto;gap:14px;align-items:center;
  padding:14px 0;border-bottom:1px solid var(--line-soft);font-size:13.5px;
}
.doc__ico{font-size:20px}
.doc__name{color:var(--navy);font-weight:500}
.docs time{font-size:12px;color:var(--text-soft)}

/* ============ MESSAGES ============ */
.chat{padding:0 44px;max-width:780px;display:flex;flex-direction:column;gap:12px}
.msg{padding:14px 18px;border-radius:14px;background:#fff;border:1px solid var(--line-soft);position:relative;max-width:85%}
.msg strong{font-size:12px;color:var(--navy);display:block;margin-bottom:2px}
.msg time{font-size:11px;color:var(--text-soft);margin-bottom:6px;display:block}
.msg p{font-size:14px;color:var(--text)}
.msg--out{align-self:flex-end;background:var(--navy);color:var(--ivory)}
.msg--out strong,.msg--out p{color:var(--ivory)}
.msg--out time{color:var(--ivory-dim)}

.chat-form{padding:20px 44px 0;max-width:780px;display:flex;flex-direction:column;gap:10px}
.chat-form textarea{
  padding:14px;border:1px solid var(--line-soft);border-radius:12px;
  font-family:inherit;font-size:14px;resize:vertical;background:#fff;
}
.chat-form textarea:focus{outline:none;border-color:var(--gold)}
.chat-form button{align-self:flex-end}

/* ============ TEAM ============ */
.team{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;
  padding:0 44px;max-width:1100px;
}
.person{
  background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:22px 20px;text-align:center;transition:.2s;
}
.person:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:var(--shadow)}
.person .avatar{margin:0 auto 14px;width:56px;height:56px;font-size:18px}
.person strong{display:block;font-size:15px;color:var(--navy);margin-bottom:2px}
.person span{display:block;font-size:12px;color:var(--text-soft);margin-bottom:8px}
.person a{font-size:13px;color:var(--gold-dim)}

/* ============ BURGER (mobile) ============ */
.burger{
  display:none;position:fixed;top:14px;right:14px;z-index:50;
  width:44px;height:44px;background:var(--navy);border:0;border-radius:10px;
  cursor:pointer;padding:0;flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.burger span{display:block;width:20px;height:2px;background:var(--gold);border-radius:2px;transition:.2s}
.burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============ RESPONSIVE ============ */
@media (max-width:1100px){
  .unit-main{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .phases{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
}

@media (max-width:860px){
  :root{--sidebar-w:0px}
  .burger{display:flex}
  .sidebar{
    transform:translateX(-100%);transition:transform .3s;
    width:280px;--sidebar-w:280px;
    box-shadow:0 10px 60px rgba(0,0,0,.4);
  }
  .sidebar.is-open{transform:translateX(0)}
  .main{margin-left:0}
  .page__head,.section-title,.greeting,.cards,.grid-2,.extras-grid,.phases,.gallery,.options-grid,.appts,.docs,.chat,.chat-form,.team,.unit-main,.note{padding-left:20px;padding-right:20px}
  .table{width:calc(100% - 40px);margin:0 20px}
  .hero__content{padding:30px 20px}
  .appts li{grid-template-columns:1fr}
  .appts li .btn{justify-self:start}
}

@media (max-width:480px){
  .cards{grid-template-columns:1fr}
  .unit-main__body{padding:24px 20px}
  .kv{grid-template-columns:120px 1fr}
}

/* ============ TOPBAR / BELL ============ */
.topbar{
  position:fixed;top:14px;right:20px;z-index:45;
}
.bell{
  position:relative;width:44px;height:44px;border-radius:50%;
  background:#fff;border:1px solid var(--line-soft);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(20,35,58,.08);transition:.2s;
}
.bell:hover{border-color:var(--gold);transform:translateY(-1px)}
.bell__icon{font-size:18px;filter:grayscale(.4)}
.bell__count{
  position:absolute;top:-4px;right:-4px;background:var(--gold);color:var(--navy);
  font-size:10px;font-weight:700;width:20px;height:20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;border:2px solid var(--paper);
}
.bell-panel{
  position:absolute;top:54px;right:0;width:min(380px, calc(100vw - 40px));
  background:#fff;border:1px solid var(--line-soft);border-radius:14px;
  box-shadow:0 20px 60px rgba(20,35,58,.18);
  opacity:0;pointer-events:none;transform:translateY(-6px);transition:.22s;
}
.bell-panel.is-open{opacity:1;pointer-events:auto;transform:translateY(0)}
.bell-panel header{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 18px;border-bottom:1px solid var(--line-soft);
}
.bell-panel header strong{font-size:14px;color:var(--navy)}
.bell-panel__all{background:none;border:0;color:var(--gold-dim);font-size:12px;cursor:pointer;font-family:inherit}
.bell-panel__all:hover{color:var(--navy)}
.bell-list{list-style:none;max-height:420px;overflow-y:auto}
.bell-list li{
  display:grid;grid-template-columns:30px 1fr;gap:10px;padding:12px 18px;
  border-bottom:1px solid var(--line-soft);font-size:13px;align-items:start;
}
.bell-list li.is-new{background:rgba(202,162,106,.06);position:relative}
.bell-list li.is-new::before{content:"";position:absolute;left:6px;top:22px;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.bell-list__ico{font-size:14px;padding-top:2px;color:var(--gold-dim)}
.bell-list strong{display:block;color:var(--navy);font-size:13px;margin-bottom:2px}
.bell-list span{display:block;color:var(--text-soft);font-size:12.5px;line-height:1.4}
.bell-list time{font-size:11px;color:var(--text-soft);margin-top:4px;display:block;letter-spacing:.03em}
.bell-panel footer{padding:12px 18px;border-top:1px solid var(--line-soft);text-align:center}
.bell-panel footer a{font-size:12.5px;color:var(--gold-dim);font-weight:500}
.bell-panel footer a:hover{color:var(--navy)}

/* ============ AUDIT-USER (wer hat's geändert) ============ */
.audit-user{
  display:inline-block;font-weight:600;color:var(--navy);
  font-size:12.5px;letter-spacing:.01em;
}
.audit-user::before{
  content:"•";color:var(--gold);margin-right:5px;font-weight:700;
}

/* ============ ALERTS ============ */
.alert{
  padding:12px 14px;border-radius:10px;font-size:13px;margin-bottom:8px;
  display:flex;gap:8px;align-items:flex-start;
}
.alert strong{color:var(--navy);font-weight:600;white-space:nowrap}
.alert--warn{background:rgba(184,131,42,.1);border-left:3px solid var(--warn)}
.alert--info{background:rgba(202,162,106,.1);border-left:3px solid var(--gold)}

/* ============ UPLOAD-ZONE ============ */
.upload-zone{
  margin:0 44px 24px;max-width:1100px;
  border:2px dashed var(--line);border-radius:var(--radius);
  background:rgba(202,162,106,.04);
  transition:.2s;cursor:pointer;
}
.upload-zone:hover, .upload-zone.is-drag{
  border-color:var(--gold);background:rgba(202,162,106,.1);
}
.upload-zone__body{
  padding:30px 20px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;
}
.upload-zone__ico{
  font-size:32px;color:var(--gold);
  width:56px;height:56px;border-radius:50%;
  background:rgba(202,162,106,.14);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:6px;
}
.upload-zone strong{font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--navy);font-weight:500}
.upload-zone span{font-size:13px;color:var(--text-soft);max-width:440px}
.upload-zone input[type=file]{display:none}
.upload-zone label.btn{margin-top:10px}

/* ============ PLAN-ITEMS ============ */
.plans-list{padding:0 44px;max-width:1100px;display:flex;flex-direction:column;gap:12px}
.plan-item{
  display:grid;grid-template-columns:60px 1fr auto;gap:18px;align-items:start;
  background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:18px 22px;transition:.2s;
}
.plan-item:hover{border-color:var(--gold);box-shadow:var(--shadow)}
.plan-item__thumb{
  width:60px;height:80px;background:linear-gradient(135deg,var(--paper),#fff);
  border:1px solid var(--line-soft);border-radius:6px;
  display:flex;align-items:center;justify-content:center;font-size:24px;
}
.plan-item__body strong{display:block;font-family:'Cormorant Garamond',serif;font-size:20px;color:var(--navy);margin-bottom:4px;font-weight:500}
.plan-item__meta{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--text-soft);flex-wrap:wrap;margin-bottom:6px}
.plan-item__note{font-size:12.5px;color:var(--text-soft);font-style:italic;display:block}
.plan-item__actions{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.plan-item__versions{margin-top:8px;width:100%}
.plan-item__versions summary{font-size:11.5px;color:var(--gold-dim);cursor:pointer;letter-spacing:.04em;list-style:none}
.plan-item__versions summary::-webkit-details-marker{display:none}
.plan-item__versions summary::before{content:"▸ ";color:var(--gold)}
.plan-item__versions[open] summary::before{content:"▾ "}
.plan-item__versions ul{list-style:none;margin-top:8px;font-size:12px;color:var(--text-soft);padding-left:4px}
.plan-item__versions li{padding:4px 0;border-bottom:1px dashed var(--line-soft)}
.plan-item__versions a{color:var(--gold-dim);margin-left:4px}

.tag{
  display:inline-block;padding:2px 8px;border-radius:4px;
  background:var(--line-soft);color:var(--text-soft);
  font-size:10.5px;letter-spacing:.08em;font-weight:600;
}
.tag--gold{background:var(--gold);color:var(--navy)}

/* deadline variants */
.deadline--warn{color:var(--warn);font-weight:600}

/* ============ STWEG ============ */
.stweg-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:16px;
  padding:0 44px;max-width:1100px;
}
.stweg-card{
  background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius);padding:24px;
  transition:.2s;
}
.stweg-card:hover{border-color:var(--gold);box-shadow:var(--shadow)}
.stweg-card h3{margin:8px 0 10px}
.stweg-card p{font-size:13.5px;color:var(--text-soft);margin-bottom:14px;line-height:1.55}
.stweg-card__meta{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--text-soft);margin-bottom:14px;flex-wrap:wrap}
.stweg-card--full{grid-column:1 / -1}
.note-inline{display:block;font-size:12px;color:var(--text-soft);font-style:italic;margin-top:10px}
.appts--inline{padding:0;margin:0}
.appts--inline li{border-bottom:1px dashed var(--line-soft)}
.appts--inline li:last-child{border-bottom:0}

/* ============ AUDIT ============ */
.audit-filter{
  display:flex;gap:8px;flex-wrap:wrap;padding:0 44px 16px;max-width:1100px;
}
.chip{
  padding:6px 14px;border-radius:999px;background:#fff;border:1px solid var(--line-soft);
  font-family:inherit;font-size:12px;color:var(--text-soft);cursor:pointer;
  letter-spacing:.04em;transition:.15s;
}
.chip:hover{border-color:var(--gold);color:var(--navy)}
.chip.is-active{background:var(--navy);color:var(--ivory);border-color:var(--navy)}

.audit{list-style:none;padding:0 44px;max-width:1100px}
.audit li{
  display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start;
  padding:14px 0;border-bottom:1px solid var(--line-soft);
}
.audit__ico{
  width:32px;height:32px;border-radius:50%;
  background:rgba(202,162,106,.14);color:var(--gold-dim);
  display:flex;align-items:center;justify-content:center;font-size:14px;
}
.audit li strong{display:block;color:var(--navy);font-size:14px;margin-bottom:2px}
.audit li span{display:block;color:var(--text-soft);font-size:13px;margin-bottom:4px}
.audit-actor{font-size:12px;color:var(--text-soft);display:block;margin-top:4px}

/* Doc meta */
.doc__meta{font-size:11.5px;color:var(--text-soft);display:block;margin-top:2px;letter-spacing:.02em}

/* ============ RESPONSIVE add-on ============ */
@media (max-width:1100px){
  .stweg-grid{grid-template-columns:1fr}
}
@media (max-width:860px){
  .plan-item{grid-template-columns:1fr}
  .plan-item__thumb{width:44px;height:56px;font-size:18px}
  .plan-item__actions{flex-direction:row;flex-wrap:wrap;align-items:flex-start}
  .stweg-grid,.audit-filter,.audit,.plans-list,.upload-zone{padding-left:20px;padding-right:20px}
  .upload-zone{margin-left:20px;margin-right:20px}
  .bell-panel{width:calc(100vw - 40px);right:-6px}
  .topbar{top:auto;bottom:14px;right:14px}
  .topbar{top:14px}
  .burger{right:68px}
}

/* ============ BAU-GALERIE & UPLOAD (V1.1) ============ */

/* Upload-Karte */
.upload-card{
  background:#fff;border:1px solid #e6e2da;border-radius:14px;padding:24px;margin:32px 0 28px;
  box-shadow:0 1px 2px rgba(20,35,58,.04);
}
.upload-card__head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px;flex-wrap:wrap;
}
.upload-card .muted{color:#7a7468;font-size:14px;margin:4px 0 0}
.role-pill{
  display:inline-block;padding:5px 12px;border-radius:999px;
  background:rgba(202,162,106,.14);color:#8a6a3c;
  font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  border:1px solid rgba(202,162,106,.3);white-space:nowrap;
}
.dropzone{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:38px 24px;border:2px dashed #d4cfc4;border-radius:12px;
  background:#faf8f4;cursor:pointer;transition:all .2s;
  text-align:center;
}
.dropzone:hover{border-color:#caa26a;background:#f6f1e7}
.dropzone.is-dragover{border-color:#caa26a;background:#f0e7d3}
.dropzone__icon{font-size:32px;line-height:1}
.dropzone__text{font-size:15px;color:#0f1d3f;font-weight:600}
.dropzone__hint{font-size:13px;color:#8a8478}
.upload-meta{
  display:grid;grid-template-columns:auto 1fr auto 1fr;gap:10px 14px;
  margin-top:18px;align-items:center;
}
.upload-meta label{font-size:13px;color:#7a7468;font-weight:500}
.upload-meta select,.upload-meta input[type=text]{
  padding:9px 12px;border:1px solid #d4cfc4;border-radius:8px;font-size:14px;
  font-family:inherit;background:#fff;color:#0f1d3f;width:100%;
}
.upload-meta select:focus,.upload-meta input:focus{outline:none;border-color:#caa26a;box-shadow:0 0 0 3px rgba(202,162,106,.15)}

/* Galerie-Header mit Filter */
.gallery-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;margin:8px 0 18px}
.gallery-filter{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  padding:7px 14px;border-radius:999px;border:1px solid #d4cfc4;
  background:#fff;color:#5a5347;font-size:13px;font-weight:500;cursor:pointer;
  transition:all .15s;font-family:inherit;
}
.chip:hover{border-color:#caa26a;color:#0f1d3f}
.chip.is-active{background:#0f1d3f;color:#fff;border-color:#0f1d3f}

/* Bau-Galerie (3-spaltig, größer, mit Audit) */
.gallery--bau{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.gallery--bau figure{
  margin:0;background:#fff;border:1px solid #e6e2da;border-radius:12px;overflow:hidden;
  box-shadow:0 1px 2px rgba(20,35,58,.04);transition:transform .2s,box-shadow .2s;cursor:pointer;
  display:flex;flex-direction:column;
}
.gallery--bau figure:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(20,35,58,.08)}
.gallery--bau figure.is-hidden{display:none}
.gallery--bau img{width:100%;height:220px;object-fit:cover;display:block}
.gallery--bau figcaption{
  padding:14px 16px;display:flex;flex-direction:column;gap:4px;font-size:13px;
}
.gallery--bau figcaption strong{font-size:14px;color:#0f1d3f;line-height:1.3}
.gallery--bau .meta-line{font-size:12px;color:#7a7468;font-weight:500}
.gallery--bau .audit-user{
  margin-top:6px;padding-top:8px;border-top:1px solid #f0ece4;
  font-size:11.5px;color:#8a6a3c;display:flex;align-items:center;gap:6px;
}
.gallery--bau .audit-user::before{display:none}
.audit-user{color:#8a6a3c;font-size:12px;font-weight:500;display:inline-flex;align-items:center;gap:6px}

/* Teaser auf Übersicht */
.teaser-head{display:flex;justify-content:space-between;align-items:baseline;margin:36px 0 14px;gap:12px;flex-wrap:wrap}
.teaser-head h3{margin:0;font-family:'Cormorant Garamond',serif;font-size:22px;color:#0f1d3f;font-weight:600}
.gallery--teaser{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gallery--teaser figure{
  margin:0;border-radius:10px;overflow:hidden;background:#fff;border:1px solid #e6e2da;
  cursor:pointer;transition:transform .2s,box-shadow .2s;
}
.gallery--teaser figure:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(20,35,58,.08)}
.gallery--teaser img{width:100%;height:160px;object-fit:cover;display:block}
.gallery--teaser figcaption{padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.gallery--teaser figcaption strong{font-size:13px;color:#0f1d3f}
.gallery--teaser .meta-line{font-size:11.5px;color:#7a7468}

/* Lightbox */
.lightbox{
  position:fixed;inset:0;background:rgba(20,35,58,.94);z-index:200;
  display:flex;align-items:center;justify-content:center;padding:40px;
  animation:lb-in .2s ease;
}
.lightbox[hidden]{display:none}
@keyframes lb-in{from{opacity:0}to{opacity:1}}
.lightbox__inner{margin:0;max-width:1200px;max-height:90vh;display:flex;flex-direction:column;align-items:center;gap:14px}
.lightbox__inner img{max-width:100%;max-height:80vh;object-fit:contain;border-radius:6px;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.lightbox__inner figcaption{color:#fff;font-size:15px;text-align:center;font-family:'Cormorant Garamond',serif;font-size:18px}
.lightbox__close{
  position:absolute;top:18px;right:24px;background:none;border:none;color:#fff;
  font-size:42px;cursor:pointer;line-height:1;padding:8px;
}
.lightbox__close:hover{color:#caa26a}
.lightbox__nav{
  background:none;border:none;color:#fff;font-size:60px;cursor:pointer;
  padding:0 22px;line-height:1;opacity:.7;transition:opacity .15s;
}
.lightbox__nav:hover{opacity:1;color:#caa26a}

/* Toast für Upload-Erfolg */
.toast{
  position:fixed;bottom:30px;left:50%;transform:translateX(-50%);
  background:#0f1d3f;color:#fff;padding:14px 22px;border-radius:10px;
  font-size:14px;box-shadow:0 8px 24px rgba(20,35,58,.25);
  z-index:300;display:flex;align-items:center;gap:10px;
  animation:toast-in .25s ease;
}
.toast--gold{border-left:3px solid #caa26a}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}

/* Responsive */
@media (max-width:980px){
  .gallery--bau{grid-template-columns:repeat(2,1fr)}
  .gallery--teaser{grid-template-columns:repeat(2,1fr)}
  .upload-meta{grid-template-columns:auto 1fr}
}
@media (max-width:640px){
  .gallery--bau{grid-template-columns:1fr}
  .gallery--teaser{grid-template-columns:1fr}
  .gallery--bau img{height:200px}
  .upload-meta{grid-template-columns:1fr}
  .upload-meta label{margin-top:8px}
  .lightbox{padding:20px}
  .lightbox__nav{font-size:40px;padding:0 10px}
}

/* ============ V1.2 — 3 STWEG + 1 MEG, Projekt-Kontext, Filter-Stack ============ */

/* Projekt-Kontext (Übersicht) */
.project-context{
  background:#fff;border:1px solid #e6e2da;border-radius:14px;padding:24px;margin:36px 0 28px;
  box-shadow:0 1px 2px rgba(20,35,58,.04);
}
.project-context__head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.project-context__head h3{margin:0;font-family:'Cormorant Garamond',serif;font-size:24px;color:#0f1d3f;font-weight:600}
.project-context__head .muted{font-size:13px;color:#7a7468}
.chalet-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.chalet-tile{
  background:#faf8f4;border:1px solid #e6e2da;border-radius:12px;padding:18px 16px;
  display:flex;flex-direction:column;gap:6px;position:relative;transition:transform .15s,box-shadow .15s;
}
.chalet-tile:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(20,35,58,.06)}
.chalet-tile.is-mine{background:#fff;border-color:#caa26a;border-width:2px;padding:17px 15px}
.chalet-tile--meg{background:linear-gradient(135deg,#f3eee2,#faf8f4)}
.chalet-tile__letter{
  width:34px;height:34px;border-radius:8px;background:#0f1d3f;color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;
  font-family:'Cormorant Garamond',serif;
}
.chalet-tile.is-mine .chalet-tile__letter{background:#caa26a}
.chalet-tile--meg .chalet-tile__letter{background:#5a4a30}
.chalet-tile strong{font-size:15px;color:#0f1d3f;font-family:'Cormorant Garamond',serif;font-weight:600}
.chalet-tile__sub{font-size:12.5px;color:#7a7468}
.chalet-tile__legal{
  font-size:11px;color:#8a6a3c;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  margin-top:4px;
}
.chalet-tile__legal--mine{color:#caa26a}
.chalet-tile__status{
  font-size:11.5px;color:#5a5347;margin-top:4px;padding-top:8px;border-top:1px solid #e6e2da;
}
.chalet-tile__status--mine{color:#0f1d3f;font-weight:600}
.project-context__note{font-size:13px;color:#7a7468;margin:18px 0 0;line-height:1.5}
.project-context__note strong{color:#0f1d3f;font-weight:600}

/* Filter-Stack (zwei Reihen) */
.filter-stack{display:flex;flex-direction:column;gap:8px;align-items:flex-start;width:100%;margin-top:6px}
.filter-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.filter-label{
  font-size:11px;color:#7a7468;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  min-width:60px;
}
.gallery-head{flex-direction:column;align-items:flex-start;gap:14px}
.chip__sub{font-size:10.5px;opacity:.7;margin-left:6px;font-weight:400}
.chip.is-mine{border-color:#caa26a;color:#8a6a3c;background:#fdf9f1}
.chip.is-mine.is-active{background:#caa26a;color:#fff;border-color:#caa26a}

/* Chalet-Tag in Galerie-Bildern */
.chalet-tag{
  display:inline-block;padding:3px 9px;border-radius:6px;
  background:#f3eee2;color:#5a4a30;font-size:11px;font-weight:600;
  letter-spacing:.03em;width:fit-content;margin-bottom:2px;
}
.chalet-tag--mine{background:#caa26a;color:#fff}
.chalet-tag--com{background:#e6e2da;color:#5a5347}

/* STWEG-Tabs */
.stweg-tabs{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:24px;
}
.stweg-tab{
  display:flex;align-items:center;gap:12px;text-align:left;
  background:#fff;border:1px solid #e6e2da;border-radius:12px;padding:14px 16px;
  cursor:pointer;font-family:inherit;transition:all .15s;
}
.stweg-tab:hover{border-color:#caa26a;transform:translateY(-1px)}
.stweg-tab.is-active{border-color:#0f1d3f;border-width:2px;padding:13px 15px;background:#fafaf7}
.stweg-tab[data-tab="stweg-b"].is-active{border-color:#caa26a}
.stweg-tab__letter{
  width:36px;height:36px;border-radius:8px;background:#0f1d3f;color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;
  font-family:'Cormorant Garamond',serif;font-size:16px;flex-shrink:0;
}
.stweg-tab[data-tab="stweg-b"] .stweg-tab__letter{background:#caa26a}
.stweg-tab[data-tab="meg"] .stweg-tab__letter{background:#5a4a30}
.stweg-tab__body{display:flex;flex-direction:column;gap:2px;min-width:0}
.stweg-tab__body strong{font-size:13.5px;color:#0f1d3f;font-family:'Cormorant Garamond',serif;font-weight:600}
.stweg-tab__sub{font-size:11.5px;color:#7a7468}

.stweg-pane{display:none;animation:fade-in .25s ease}
.stweg-pane.is-active{display:block}
@keyframes fade-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

/* Info-Banner für read-only Panes */
.info-banner{
  background:#fdf9f1;border-left:3px solid #caa26a;border-radius:8px;
  padding:14px 18px;margin-bottom:18px;display:flex;flex-direction:column;gap:4px;
}
.info-banner strong{color:#0f1d3f;font-size:14px}
.info-banner span{color:#5a5347;font-size:13px}

/* Owners-list */
.owners-list{list-style:none;padding:0;margin:8px 0 12px;display:flex;flex-direction:column;gap:8px}
.owners-list li{
  display:flex;align-items:center;gap:12px;padding:10px 12px;
  background:#faf8f4;border-radius:8px;border:1px solid transparent;
}
.owners-list li.is-mine{background:#fdf9f1;border-color:#caa26a}
.owners-list strong{font-size:13.5px;color:#0f1d3f;display:block}
.owners-list .muted{font-size:12px;color:#7a7468}
.avatar--sm{width:34px;height:34px;font-size:11px;flex-shrink:0}
.avatar--mine{background:#caa26a;color:#fff}

/* Responsive */
@media (max-width:980px){
  .chalet-tiles{grid-template-columns:repeat(2,1fr)}
  .stweg-tabs{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .chalet-tiles{grid-template-columns:1fr}
  .stweg-tabs{grid-template-columns:1fr}
  .filter-row{flex-direction:column;align-items:flex-start;gap:6px}
  .filter-label{min-width:0}
}

/* ============ LOGIN-SEITE mit Passkey ============ */
.login-page{
  position:fixed;inset:0;z-index:500;
  display:flex;align-items:stretch;justify-content:stretch;
  background:#0f1d3f;
  font-family:'Inter',sans-serif;
}
.login-page[hidden]{display:none}
.login-bg{
  flex:1.3;background-size:cover;background-position:center;position:relative;
}
.login-bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(20,35,58,.55),rgba(20,35,58,.2) 40%,rgba(20,35,58,.7));
}
.login-bg__brand{
  position:absolute;top:32px;left:36px;color:#fff;z-index:2;
  font-family:'Cormorant Garamond',serif;
}
.login-bg__brand strong{font-size:30px;font-weight:600;letter-spacing:.01em;display:block}
.login-bg__brand span{font-size:12px;color:#caa26a;letter-spacing:.18em;text-transform:uppercase}
.login-bg__quote{
  position:absolute;bottom:40px;left:36px;right:36px;color:#fff;z-index:2;
  font-family:'Cormorant Garamond',serif;font-style:italic;font-size:22px;line-height:1.4;
  max-width:480px;
}
.login-bg__quote span{display:block;font-size:12px;font-style:normal;color:#caa26a;letter-spacing:.16em;text-transform:uppercase;margin-top:10px}

.login-card{
  flex:1;max-width:480px;background:#fff;
  display:flex;flex-direction:column;justify-content:center;
  padding:50px 56px;
}
.login-card h1{
  font-family:'Cormorant Garamond',serif;font-size:34px;color:#0f1d3f;
  margin:0 0 8px;font-weight:600;
}
.login-card .login-sub{color:#7a7468;font-size:14px;margin:0 0 32px}

/* Passkey-Hero-Button */
.passkey-btn{
  width:100%;display:flex;align-items:center;justify-content:center;gap:12px;
  background:#0f1d3f;color:#fff;border:none;border-radius:12px;
  padding:18px 22px;font-size:15px;font-weight:600;cursor:pointer;
  font-family:inherit;transition:all .15s;margin-bottom:16px;
}
.passkey-btn:hover{background:#1d2f4d;transform:translateY(-1px);box-shadow:0 8px 20px rgba(20,35,58,.2)}
.passkey-btn__icon{font-size:22px;line-height:1}
.passkey-btn__sub{display:block;font-weight:400;font-size:11.5px;opacity:.75;margin-top:2px}
.passkey-btn[disabled]{opacity:.6;cursor:not-allowed}

.login-divider{
  display:flex;align-items:center;gap:14px;color:#a59f93;font-size:12px;
  text-transform:uppercase;letter-spacing:.1em;margin:18px 0;
}
.login-divider::before,.login-divider::after{content:'';flex:1;height:1px;background:#e6e2da}

.login-form{display:flex;flex-direction:column;gap:14px}
.login-form label{font-size:12px;color:#7a7468;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.login-form input{
  padding:12px 14px;border:1px solid #d4cfc4;border-radius:10px;
  font-size:15px;font-family:inherit;color:#0f1d3f;background:#fff;
}
.login-form input:focus{outline:none;border-color:#caa26a;box-shadow:0 0 0 3px rgba(202,162,106,.15)}
.login-form .btn-login{
  background:#caa26a;color:#fff;border:none;border-radius:10px;
  padding:14px 22px;font-size:15px;font-weight:600;cursor:pointer;
  font-family:inherit;margin-top:6px;transition:all .15s;
}
.login-form .btn-login:hover{background:#b8924f;transform:translateY(-1px)}

.login-footer{
  margin-top:auto;padding-top:30px;font-size:12px;color:#a59f93;
}
.login-footer a{color:#8a6a3c;text-decoration:none}
.login-footer a:hover{text-decoration:underline}

.login-hint{
  background:#fdf9f1;border:1px solid #f0e2c2;border-radius:10px;
  padding:12px 14px;font-size:12.5px;color:#5a4a30;margin-bottom:20px;
  display:flex;gap:10px;align-items:flex-start;
}
.login-hint__ico{font-size:16px;line-height:1.2;flex-shrink:0}

.login-error{
  background:#fbeaea;border-left:3px solid #c44;border-radius:6px;
  padding:10px 14px;font-size:13px;color:#8a2929;margin-bottom:14px;
}

/* Demo Lang Switch im Login */
.login-lang{
  position:absolute;top:24px;right:32px;display:flex;gap:4px;z-index:3;
}
.login-lang button{
  background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.18);
  border-radius:6px;padding:5px 10px;font-size:11px;font-weight:600;cursor:pointer;
  font-family:inherit;letter-spacing:.05em;
}
.login-lang button.is-active{background:#caa26a;border-color:#caa26a}

@media (max-width:780px){
  .login-page{flex-direction:column}
  .login-bg{flex:0 0 220px;min-height:220px}
  .login-bg__quote{font-size:16px;bottom:18px}
  .login-card{max-width:none;padding:36px 28px}
  .login-card h1{font-size:26px}
  .login-lang{top:14px;right:18px}
}

/* ============ V1.2: KAUFVERTRAG-SEKTION ============ */
.section-h{
  font-family:'Cormorant Garamond',serif;
  font-size:24px;font-weight:600;color:var(--navy);
  margin:36px 0 6px;
}
.section-sub{color:#6e6a62;font-size:14px;margin:0 0 18px}

.nav__item--accent{position:relative}
.nav__item--accent .nav__icon{color:var(--gold)}
.nav__item--accent::after{
  content:'';position:absolute;right:14px;top:50%;
  width:6px;height:6px;border-radius:50%;background:var(--gold);
  transform:translateY(-50%);box-shadow:0 0 0 3px rgba(202,162,106,.15);
}

/* Hauptkarte */
.contract-main{
  background:#fff;border:1px solid #ece6d8;border-radius:14px;
  padding:28px 32px;margin-bottom:32px;
  box-shadow:0 2px 12px rgba(20,35,58,.04);
  position:relative;overflow:hidden;
}
.contract-main::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--gold) 0%,#e0c896 100%);
}
.contract-main__head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  flex-wrap:wrap;margin-bottom:22px;
}
.contract-main__eyebrow{
  font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);font-weight:600;display:block;margin-bottom:4px;
}
.contract-main h2{
  font-family:'Cormorant Garamond',serif;
  font-size:26px;font-weight:600;color:var(--navy);margin:0 0 8px;line-height:1.2;
}
.contract-main__sub{font-size:14px;color:#5e5a52;margin:0;line-height:1.6}
.contract-main__sub strong{color:var(--navy);font-weight:600}
.contract-main__status{display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right}
.contract-main__date{font-size:12px;color:#7a7468;letter-spacing:.04em}

/* Badges */
.badge{
  display:inline-block;padding:4px 10px;border-radius:999px;
  font-size:11px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;
}
.badge--ok{background:#e8f1e9;color:#2d6b3a;border:1px solid #c8e0cc}
.badge--info{background:#e9eef5;color:#1f3d6b;border:1px solid #c4d2e6}
.badge--warn{background:#fbf1de;color:#8a5a14;border:1px solid #e6cf95}

/* Meta-Liste */
.contract-meta{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px 24px;margin:22px 0;padding:20px 0;
  border-top:1px solid #f0eadc;border-bottom:1px solid #f0eadc;
}
.contract-meta div{display:flex;flex-direction:column;gap:4px}
.contract-meta dt{
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:#8a8478;font-weight:600;margin:0;
}
.contract-meta dd{font-size:14px;color:var(--navy);margin:0;font-weight:500}
.contract-meta__sub{font-size:12px;color:#7a7468;font-weight:400;display:block}

/* Aktionen */
.contract-actions{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 8px}
.btn--primary{
  background:var(--navy);color:#fff;border-color:var(--navy);
}
.btn--primary:hover{background:#1d2f4d}
.btn--ghost{background:transparent;border-color:#d8d2c4;color:var(--navy)}
.btn--ghost:hover{background:#f5f1e8}
.btn--sm{padding:6px 12px;font-size:12px}

/* Unterschriften */
.contract-signs{margin-top:28px;padding-top:22px;border-top:1px solid #f0eadc}
.contract-signs h3{
  font-family:'Cormorant Garamond',serif;
  font-size:18px;font-weight:600;color:var(--navy);margin:0 0 14px;
}
.signs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.signs__item{
  display:grid;grid-template-columns:140px 1fr auto;gap:16px;align-items:center;
  padding:12px 16px;background:#faf7f0;border-radius:8px;
  border-left:3px solid #d8d2c4;
}
.signs__item.is-done{border-left-color:#5b9d6a;background:#f5f9f4}
.signs__role{
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:#5b9d6a;font-weight:600;
}
.signs__item strong{color:var(--navy);font-weight:600;font-size:14px}
.signs__meta{font-size:12px;color:#7a7468}

/* Versionshistorie */
.contract-versions{margin-top:28px;padding-top:22px;border-top:1px solid #f0eadc}
.contract-versions h3{
  font-family:'Cormorant Garamond',serif;
  font-size:18px;font-weight:600;color:var(--navy);margin:0 0 14px;
}
.versions{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.versions li{
  display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;
  padding:12px 16px;background:#fbfaf6;border-radius:8px;
  border:1px solid #f0eadc;
}
.versions__v{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:48px;padding:6px 10px;border-radius:6px;
  background:var(--navy);color:#fff;font-weight:600;font-size:12px;
  letter-spacing:.04em;
}
.versions__v--draft{background:#a89878;color:#fff}
.versions li strong{color:var(--navy);font-weight:600;font-size:14px;display:block;margin-bottom:2px}
.versions__meta{font-size:12px;color:#7a7468}

/* Beilagen */
.beilagen{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.beilage{
  display:grid;grid-template-columns:auto 1fr auto auto;gap:14px;align-items:center;
  background:#fff;border:1px solid #ece6d8;border-radius:10px;
  padding:14px 18px;transition:all .2s;
}
.beilage:hover{border-color:var(--gold);box-shadow:0 2px 8px rgba(202,162,106,.12)}
.beilage__tag{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;
  background:var(--gold);color:#fff;
  font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:600;
  flex-shrink:0;
}
.beilage__body{display:flex;flex-direction:column;gap:3px;min-width:0}
.beilage__body strong{color:var(--navy);font-weight:600;font-size:14px}
.beilage__body > span:not(.beilage__meta){font-size:13px;color:#5e5a52;line-height:1.5}
.beilage__meta{font-size:11.5px;color:#7a7468;display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:2px}

@media (max-width:720px){
  .contract-main{padding:22px 18px}
  .contract-main__head{flex-direction:column;align-items:flex-start}
  .contract-main__status{align-items:flex-start;text-align:left}
  .signs__item{grid-template-columns:1fr;gap:4px;text-align:left}
  .versions li{grid-template-columns:auto 1fr;gap:10px}
  .versions li > a{grid-column:1/-1;justify-self:start}
  .beilage{grid-template-columns:auto 1fr;gap:10px}
  .beilage > a{grid-column:2/-1;justify-self:start}
}

/* ============ V1.2: Bell-Source-Hinweis ============ */
.bell-src{
  display:block;font-size:11px;color:var(--gold);
  letter-spacing:.04em;font-weight:500;margin-top:2px;
}

/* ============ V1.2: Login-Page Ergänzungen ============ */
body.is-login{overflow:hidden}
body.is-login #portal-root[hidden]{display:none}

/* Login-Page Layout (überschreibt ggf. ältere Defaults) */
.login-page{
  position:fixed;inset:0;z-index:1000;
  display:grid;grid-template-columns:1.1fr 1fr;
  background:#0e1a2d;
}
.login-bg{
  position:relative;overflow:hidden;
}
.login-bg > img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;filter:brightness(.65);
}
.login-bg__overlay{
  position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(20,35,58,.55) 0%,rgba(20,35,58,.2) 60%,rgba(20,35,58,.7) 100%);
}
.login-bg__brand{
  position:absolute;top:48px;left:48px;z-index:2;
  color:#fff;
}
.login-bg__brand .brand-bonaria__name,
.login-bg__brand .brand-project__main{color:#fff}
.login-bg__brand .brand-project{border-top-color:rgba(255,255,255,.25)}
.login-bg__brand .brand-project__sub{color:rgba(255,255,255,.75)}

.login-lang{
  position:absolute;top:48px;right:48px;z-index:2;
  display:flex;gap:6px;
}
.login-lang button{
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);
  color:#fff;padding:6px 12px;border-radius:6px;
  font-size:11px;font-weight:600;letter-spacing:.08em;cursor:pointer;
  transition:all .2s;
}
.login-lang button:hover{background:rgba(255,255,255,.2)}
.login-lang button.is-active{background:var(--gold);border-color:var(--gold)}

.login-card{
  background:#fbfaf6;display:flex;align-items:center;justify-content:center;
  padding:48px 32px;overflow-y:auto;
}
.login-card__inner{width:100%;max-width:420px}
.login-card h1{
  font-family:'Cormorant Garamond',serif;
  font-size:32px;font-weight:600;color:var(--navy);
  margin:0 0 8px;line-height:1.2;
}
.login-sub{color:#7a7468;font-size:14px;margin:0 0 28px;line-height:1.5}

/* Passkey-Button */
.passkey-btn{
  display:flex;align-items:center;gap:14px;width:100%;
  background:var(--navy);color:#fff;border:none;
  padding:14px 18px;border-radius:10px;cursor:pointer;
  text-align:left;transition:all .2s;
  font-family:inherit;
}
.passkey-btn:not(:disabled):hover{
  background:#1d2f4d;transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(20,35,58,.2);
}
.passkey-btn.is-disabled,.passkey-btn[disabled]{
  background:#e6e2da;color:#8a8478;cursor:not-allowed;
}
.passkey-btn__ico{font-size:22px;line-height:1;flex-shrink:0}
.passkey-btn__body{display:flex;flex-direction:column;gap:2px;flex:1}
.passkey-btn__main{font-weight:600;font-size:14px;letter-spacing:.01em}
.passkey-btn__sub{font-weight:400;font-size:11.5px;opacity:.75}

/* Divider */
.login-divider{
  display:flex;align-items:center;gap:14px;
  margin:22px 0;color:#a8a298;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
}
.login-divider::before,.login-divider::after{
  content:'';flex:1;height:1px;background:#e6e2da;
}

/* Form */
.login-form{display:flex;flex-direction:column;gap:14px}
.login-form label{
  display:flex;flex-direction:column;gap:6px;
  font-size:11px;color:#7a7468;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
}
.login-form input{
  padding:12px 14px;border:1px solid #d8d2c4;border-radius:8px;
  font-size:14px;font-family:inherit;color:var(--navy);background:#fff;
  font-weight:400;letter-spacing:0;text-transform:none;
}
.login-form input:focus{
  outline:none;border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(202,162,106,.15);
}
.login-submit{
  margin-top:6px;background:var(--navy);color:#fff;border-color:var(--navy);
  padding:13px 18px;font-size:14px;font-weight:600;
  letter-spacing:.04em;border-radius:8px;cursor:pointer;
}
.login-submit:hover{background:#1d2f4d}

/* Hint & note */
.login-error{
  margin:6px 0 0;padding:10px 14px;
  background:#fdecec;border:1px solid #f1b8b8;color:#8a2828;
  border-radius:8px;font-size:13px;
}
.login-hint{
  margin:22px 0 8px;padding:12px 14px;
  background:#fbf3e2;border:1px solid #ecdcb4;color:#6a5118;
  border-radius:8px;font-size:12.5px;line-height:1.5;
}
.login-hint strong{font-weight:600}
.login-note{font-size:11.5px;color:#9a948a;margin:0;line-height:1.5}

@media (max-width:880px){
  .login-page{grid-template-columns:1fr;grid-template-rows:35vh 1fr}
  .login-bg__brand{top:24px;left:24px;transform:scale(.9);transform-origin:top left}
  .login-lang{top:24px;right:24px}
  .login-card{padding:32px 24px}
  .login-card h1{font-size:26px}
}

/* ==========================================================================
   V1.2 — VOLLAUSBAU ARBEITSTOOL
   Paar-Switcher · Was-ist-neu Banner · Dashboard · Einladungen · Notizen
   Chat · Unternehmer · Diverse Badges
   ========================================================================== */

/* --- AVATAR (universal) --------------------------------------------------- */
.avatar{display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;background:#0f1d3f;color:#caa26a;
  font-family:'Inter',sans-serif;font-weight:600;font-size:14px;letter-spacing:.5px;
  flex:none;border:1px solid rgba(202,162,106,.3)}
.avatar--user{width:36px;height:36px;font-size:13px}
.avatar--rose{background:#7a3a4d;color:#f5d8c8;border-color:rgba(245,216,200,.3)}
.avatar--group{background:#caa26a;color:#0f1d3f;border-color:rgba(20,35,58,.2)}

/* --- PAAR-SWITCHER (Topbar) ---------------------------------------------- */
.user-switch{position:fixed;top:18px;right:88px;z-index:60}
.user-switch__btn{display:inline-flex;align-items:center;gap:10px;
  background:#fff;border:1px solid #e7e1d6;border-radius:999px;
  padding:6px 14px 6px 6px;cursor:pointer;
  box-shadow:0 4px 16px rgba(20,35,58,.08);
  transition:box-shadow .2s,border-color .2s}
.user-switch__btn:hover{border-color:#caa26a;box-shadow:0 6px 20px rgba(20,35,58,.12)}
.user-switch__meta{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15}
.user-switch__meta strong{font-family:'Inter',sans-serif;font-size:13px;color:#0f1d3f;font-weight:600}
.user-switch__meta em{font-style:normal;font-size:11px;color:#7a7263}
.user-switch__chev{font-size:11px;color:#7a7263;margin-left:2px}
.user-switch__panel{position:absolute;top:calc(100% + 8px);right:0;width:320px;
  background:#fff;border:1px solid #e7e1d6;border-radius:14px;
  box-shadow:0 18px 48px rgba(20,35,58,.18);
  padding:14px;display:none;animation:fadeIn .15s ease-out}
.user-switch.is-open .user-switch__panel{display:block}
.user-switch__panel header{font-family:'Inter',sans-serif;font-size:11px;text-transform:uppercase;
  letter-spacing:.8px;color:#7a7263;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid #f0ebe1}
.user-switch__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.user-switch__item{display:flex;align-items:center;gap:10px;width:100%;
  background:transparent;border:1px solid transparent;border-radius:10px;
  padding:8px;cursor:pointer;text-align:left;transition:background .15s,border-color .15s}
.user-switch__item:hover{background:#faf7f0;border-color:#e7e1d6}
.user-switch__item.is-active{background:#fbf6ec;border-color:#caa26a}
.user-switch__item span:nth-child(2){display:flex;flex-direction:column;flex:1;line-height:1.2}
.user-switch__item strong{font-family:'Inter',sans-serif;font-size:13px;color:#0f1d3f;font-weight:600}
.user-switch__item em{font-style:normal;font-size:11px;color:#7a7263}
.user-switch__check{font-size:14px;color:#caa26a;opacity:0}
.user-switch__item.is-active .user-switch__check{opacity:1}
.user-switch__panel footer{font-family:'Inter',sans-serif;font-size:11px;color:#7a7263;
  line-height:1.45;margin-top:10px;padding-top:10px;border-top:1px solid #f0ebe1}
@keyframes fadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* --- WAS-IST-NEU BANNER --------------------------------------------------- */
.newsbar{display:flex;align-items:center;gap:14px;
  background:linear-gradient(95deg,#fbf6ec 0%,#f5ebd3 100%);
  border:1px solid #e6d4ad;border-left:4px solid #caa26a;
  border-radius:12px;padding:14px 18px;margin:0 0 24px 0;
  animation:slideDown .3s ease-out}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.newsbar__icon{font-size:22px;color:#caa26a;flex:none}
.newsbar__body{flex:1;display:flex;flex-direction:column;line-height:1.4}
.newsbar__body strong{font-family:'Cormorant Garamond',serif;font-size:18px;color:#0f1d3f;font-weight:600}
.newsbar__body span{font-family:'Inter',sans-serif;font-size:13px;color:#3d362a}
.newsbar__actions{display:flex;align-items:center;gap:8px;flex:none}
.newsbar__close{background:transparent;border:none;font-size:24px;line-height:1;
  color:#7a7263;cursor:pointer;padding:0 4px}
.newsbar__close:hover{color:#0f1d3f}

/* --- DASHBOARD (5-Punkte-Übersicht) -------------------------------------- */
.dashboard{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:24px 0 32px}
.dash-col{display:flex;flex-direction:column;gap:18px}
.dash-card{background:#fff;border:1px solid #e7e1d6;border-radius:14px;
  padding:18px 20px;box-shadow:0 2px 10px rgba(20,35,58,.04)}
.dash-card__head{display:flex;align-items:center;gap:10px;margin-bottom:14px;
  padding-bottom:12px;border-bottom:1px solid #f0ebe1}
.dash-card__icon{display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:8px;background:#fbf6ec;color:#caa26a;font-size:16px;flex:none}
.dash-card__head h3{font-family:'Cormorant Garamond',serif;font-size:19px;font-weight:600;
  color:#0f1d3f;margin:0;flex:1;line-height:1.2}
.dash-card__count{font-style:normal;font-family:'Inter',sans-serif;font-size:12px;font-weight:600;
  background:#caa26a;color:#fff;border-radius:999px;padding:3px 10px;min-width:24px;text-align:center}
.dash-card--invites .dash-card__count{background:#c0392b}
.dash-card--chat .dash-card__count{background:#0f1d3f}
.dash-card--todo .dash-card__count{background:#caa26a}
.dash-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.dash-list li{font-family:'Inter',sans-serif;font-size:13px;line-height:1.5;color:#3d362a;
  padding:8px 0;border-bottom:1px dashed #f0ebe1}
.dash-list li:last-child{border-bottom:none}
.dash-card__more{display:inline-block;margin-top:12px;font-family:'Inter',sans-serif;font-size:12px;
  color:#caa26a;text-decoration:none;font-weight:600;letter-spacing:.3px}
.dash-card__more:hover{color:#0f1d3f}
/* Einladungs-Items im Dashboard */
.dash-inv-item{display:flex;flex-direction:column;gap:2px}
.dash-inv-item strong{color:#0f1d3f;font-weight:600;font-size:13px}
.dash-inv-item em{font-style:normal;color:#7a7263;font-size:11px}
.dash-inv-item__from{color:#caa26a;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.5px}
/* Todo-Items */
.dash-todo{display:flex;flex-direction:column;gap:4px;border-left:3px solid #e7e1d6;padding-left:12px;margin-left:0}
.dash-todo--urgent{border-left-color:#c0392b}
.dash-todo__deadline{font-size:11px;color:#7a7263;text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.dash-todo--urgent .dash-todo__deadline{color:#c0392b}
.dash-todo strong{color:#0f1d3f;font-weight:600;font-size:13px}
.dash-todo a{font-size:12px;color:#caa26a;text-decoration:none;font-weight:600;align-self:flex-start;margin-top:2px}
.dash-todo a:hover{color:#0f1d3f}
/* Bauphase-Update */
.dash-build{display:flex;gap:14px;text-decoration:none;color:inherit;align-items:center}
.dash-build__img{width:120px;height:80px;object-fit:cover;border-radius:8px;flex:none;border:1px solid #e7e1d6}
.dash-build__body{display:flex;flex-direction:column;gap:4px;flex:1}
.dash-build__body strong{color:#0f1d3f;font-family:'Inter',sans-serif;font-size:14px;font-weight:600}
.dash-build__body span{font-family:'Inter',sans-serif;font-size:12px;color:#7a7263}
.dash-build__chip{align-self:flex-start;background:#caa26a;color:#fff;padding:2px 10px;
  border-radius:999px;font-size:11px;font-weight:600;margin-top:4px}
/* Chat-Items */
.dash-chat-item{display:flex;align-items:flex-start;gap:10px}
.dash-chat-item .avatar{width:32px;height:32px;font-size:11px}
.dash-chat-item__body{display:flex;flex-direction:column;flex:1;line-height:1.3;min-width:0}
.dash-chat-item__head{display:flex;justify-content:space-between;gap:8px}
.dash-chat-item strong{color:#0f1d3f;font-size:13px;font-weight:600}
.dash-chat-item time{font-size:11px;color:#7a7263;flex:none}
.dash-chat-item__msg{color:#3d362a;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Termine */
.dash-cal li{display:flex;gap:14px;align-items:center}
.dash-cal__date{display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:48px;height:48px;background:#fbf6ec;border:1px solid #e6d4ad;border-radius:10px;flex:none}
.dash-cal__date strong{font-family:'Cormorant Garamond',serif;font-size:20px;color:#0f1d3f;line-height:1;font-weight:600}
.dash-cal__date em{font-style:normal;font-size:10px;color:#7a7263;text-transform:uppercase;letter-spacing:.5px;margin-top:2px}
.dash-cal li > div{display:flex;flex-direction:column;line-height:1.3}
.dash-cal li > div strong{color:#0f1d3f;font-size:13px;font-weight:600}
.dash-cal li > div span{font-size:12px;color:#7a7263}
@media (max-width:900px){.dashboard{grid-template-columns:1fr}}

/* --- BADGE Variante invites ---------------------------------------------- */
.badge--inv{background:#c0392b;color:#fff;font-style:normal;font-family:'Inter',sans-serif;
  font-size:10px;font-weight:700;padding:1px 7px;border-radius:999px;margin-left:6px;letter-spacing:.3px}
.badge--inv:empty{display:none}

/* --- EINLADUNGEN ---------------------------------------------------------- */
.inv-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:18px 0 16px;border-bottom:1px solid #e7e1d6;padding-bottom:0}
.inv-tab{background:transparent;border:none;font-family:'Inter',sans-serif;font-size:13px;
  color:#7a7263;padding:10px 16px;cursor:pointer;border-bottom:2px solid transparent;font-weight:500}
.inv-tab:hover{color:#0f1d3f}
.inv-tab.is-active{color:#0f1d3f;border-bottom-color:#caa26a;font-weight:600}
.inv-tab em{font-style:normal;background:#f0ebe1;color:#7a7263;font-size:11px;
  padding:1px 7px;border-radius:999px;margin-left:4px;font-weight:600}
.inv-tab.is-active em{background:#caa26a;color:#fff}
.inv-list{display:flex;flex-direction:column;gap:14px;margin-top:8px}
.inv-card{background:#fff;border:1px solid #e7e1d6;border-radius:14px;padding:18px 20px;
  box-shadow:0 2px 8px rgba(20,35,58,.04);transition:border-color .2s}
.inv-card[data-status="yes"]{border-left:4px solid #2e7d4f}
.inv-card[data-status="no"]{border-left:4px solid #c0392b;opacity:.75}
.inv-card[data-status="maybe"]{border-left:4px solid #d4a017}
.inv-card[data-status="open"]{border-left:4px solid #caa26a}
.inv-card__head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:8px}
.inv-card__head h3{font-family:'Cormorant Garamond',serif;font-size:21px;color:#0f1d3f;margin:0;font-weight:600;line-height:1.2}
.inv-card__from{display:block;font-family:'Inter',sans-serif;font-size:11px;color:#caa26a;
  text-transform:uppercase;letter-spacing:.6px;font-weight:600;margin-top:4px}
.inv-card__status{font-family:'Inter',sans-serif;font-size:11px;font-weight:700;
  padding:4px 12px;border-radius:999px;text-transform:uppercase;letter-spacing:.5px;flex:none;
  background:#fbf6ec;color:#caa26a;border:1px solid #e6d4ad}
.inv-card[data-status="yes"] .inv-card__status{background:#e8f5ec;color:#2e7d4f;border-color:#b8dcc4}
.inv-card[data-status="no"] .inv-card__status{background:#fcebe8;color:#c0392b;border-color:#f0c4bc}
.inv-card[data-status="maybe"] .inv-card__status{background:#fdf6e3;color:#a07c10;border-color:#ecd998}
.inv-meta{display:flex;flex-wrap:wrap;gap:14px;margin:10px 0 12px;
  font-family:'Inter',sans-serif;font-size:13px;color:#3d362a}
.inv-meta span{display:inline-flex;align-items:center;gap:6px}
.inv-meta span::before{content:'';width:4px;height:4px;border-radius:50%;background:#caa26a}
.inv-card p{font-family:'Inter',sans-serif;font-size:13px;color:#3d362a;line-height:1.55;margin:0 0 14px}
.inv-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.inv-btn{font-family:'Inter',sans-serif;font-size:12px;font-weight:600;border-radius:8px;
  padding:8px 14px;cursor:pointer;border:1px solid;transition:all .2s;letter-spacing:.2px}
.inv-btn[data-action="yes"]{background:#2e7d4f;color:#fff;border-color:#2e7d4f}
.inv-btn[data-action="yes"]:hover{background:#26653f}
.inv-btn[data-action="maybe"]{background:#fff;color:#a07c10;border-color:#ecd998}
.inv-btn[data-action="maybe"]:hover{background:#fdf6e3}
.inv-btn[data-action="no"]{background:#fff;color:#c0392b;border-color:#f0c4bc}
.inv-btn[data-action="no"]:hover{background:#fcebe8}
.inv-btn[data-action="alt"]{background:#fff;color:#7a7263;border-color:#e7e1d6}
.inv-btn[data-action="alt"]:hover{background:#faf7f0;color:#0f1d3f}
.inv-rsvp-by{font-family:'Inter',sans-serif;font-size:11px;color:#7a7263;margin-left:auto;font-style:italic}

/* --- NOTIZEN -------------------------------------------------------------- */
.notes-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:24px;margin-top:18px}
@media (max-width:900px){.notes-grid{grid-template-columns:1fr}}
.note-form{background:#fff;border:1px solid #e7e1d6;border-radius:14px;padding:20px;
  box-shadow:0 2px 8px rgba(20,35,58,.04);display:flex;flex-direction:column;gap:14px;height:fit-content}
.note-form__row{display:flex;gap:12px;flex-wrap:wrap}
.note-form__col{display:flex;flex-direction:column;gap:6px;flex:1;min-width:140px}
.note-form__col span,.note-form > label > span{font-family:'Inter',sans-serif;font-size:11px;
  color:#7a7263;text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.note-form input[type=text],.note-form select,.note-form textarea,.note-form input[type=datetime-local]{
  font-family:'Inter',sans-serif;font-size:13px;padding:10px 12px;border:1px solid #e7e1d6;
  border-radius:8px;background:#fff;color:#0f1d3f;width:100%}
.note-form input[type=text]:focus,.note-form select:focus,.note-form textarea:focus,
.note-form input[type=datetime-local]:focus{outline:none;border-color:#caa26a;box-shadow:0 0 0 3px rgba(202,162,106,.15)}
.note-form > label{display:flex;flex-direction:column;gap:6px}
.note-form__hint{font-family:'Inter',sans-serif;font-size:11px;color:#7a7263;line-height:1.5;margin:0}
.share-toggle{border:1px dashed #e7e1d6;border-radius:10px;padding:10px 12px;width:100%;display:flex;flex-direction:column;gap:6px}
.share-toggle legend{font-family:'Inter',sans-serif;font-size:11px;color:#7a7263;
  text-transform:uppercase;letter-spacing:.5px;font-weight:600;padding:0 6px}
.share-toggle__opt{display:inline-flex;align-items:center;gap:8px;font-family:'Inter',sans-serif;font-size:13px;color:#3d362a;cursor:pointer}
.share-toggle__opt input{accent-color:#caa26a}
.notes-list-wrap{display:flex;flex-direction:column;gap:14px}
.notes-toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.notes-filter{display:flex;gap:6px;flex-wrap:wrap}
.notes-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;min-height:80px}
.notes-list:empty::after{content:'Noch keine Notizen. Schreiben Sie links Ihre erste Notiz.';
  display:block;text-align:center;padding:30px 20px;color:#7a7263;font-family:'Inter',sans-serif;
  font-size:13px;background:#faf7f0;border:1px dashed #e7e1d6;border-radius:12px;font-style:italic}
.note-item{background:#fff;border:1px solid #e7e1d6;border-radius:12px;padding:14px 16px;
  border-left:4px solid #caa26a;display:flex;flex-direction:column;gap:6px;position:relative}
.note-item[data-tag="frage"]{border-left-color:#3a6fb5}
.note-item[data-tag="entscheidung"]{border-left-color:#c0392b}
.note-item[data-tag="termin"]{border-left-color:#2e7d4f}
.note-item[data-tag="dokument"]{border-left-color:#a07c10}
.note-item__head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.note-item__title{font-family:'Inter',sans-serif;font-size:14px;font-weight:600;color:#0f1d3f;line-height:1.3;flex:1}
.note-item__del{background:transparent;border:none;color:#7a7263;cursor:pointer;font-size:18px;line-height:1;padding:0 4px}
.note-item__del:hover{color:#c0392b}
.note-item__text{font-family:'Inter',sans-serif;font-size:13px;color:#3d362a;line-height:1.5;margin:0;white-space:pre-wrap}
.note-item__meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px;font-family:'Inter',sans-serif;font-size:11px;color:#7a7263}
.note-item__tag{background:#fbf6ec;color:#caa26a;padding:2px 8px;border-radius:999px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;font-size:10px}
.note-item__remind{color:#c0392b;font-weight:600}
.note-item__share{padding:2px 8px;border-radius:999px;font-weight:600;font-size:10px;text-transform:uppercase;letter-spacing:.4px}
.note-item__share--private{background:#f0ebe1;color:#7a7263}
.note-item__share--shared{background:#fbf6ec;color:#caa26a}
.note-item__author{color:#7a7263;font-style:italic}

/* --- CHAT ----------------------------------------------------------------- */
.chat-app{display:grid;grid-template-columns:280px 1fr;gap:0;height:560px;
  background:#fff;border:1px solid #e7e1d6;border-radius:14px;overflow:hidden;
  box-shadow:0 2px 8px rgba(20,35,58,.04);margin-top:18px}
@media (max-width:900px){.chat-app{grid-template-columns:1fr;height:auto}
  .chat-list{height:240px;border-right:none;border-bottom:1px solid #e7e1d6}
  .chat-room{height:480px}}
.chat-list{background:#faf7f0;border-right:1px solid #e7e1d6;display:flex;flex-direction:column;overflow:hidden}
.chat-list__head{padding:14px 16px 8px;border-bottom:1px solid #e7e1d6}
.chat-list__head strong{font-family:'Cormorant Garamond',serif;font-size:17px;color:#0f1d3f;font-weight:600;display:block}
.chat-list__head span{font-family:'Inter',sans-serif;font-size:11px;color:#7a7263}
.chat-list__group{padding:14px 16px 6px;font-family:'Inter',sans-serif;font-size:10px;
  color:#7a7263;text-transform:uppercase;letter-spacing:.7px;font-weight:600}
.chat-threads{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1}
.chat-thread{display:flex;align-items:center;gap:10px;padding:10px 16px;cursor:pointer;
  border-left:3px solid transparent;transition:background .15s}
.chat-thread:hover{background:#fff}
.chat-thread.is-active{background:#fff;border-left-color:#caa26a}
.chat-thread .avatar{width:36px;height:36px;font-size:12px}
.chat-thread__body{display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.25}
.chat-thread__name{font-family:'Inter',sans-serif;font-size:13px;font-weight:600;color:#0f1d3f;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-thread__sub{font-family:'Inter',sans-serif;font-size:11px;color:#7a7263;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-thread__badge{font-style:normal;background:#c0392b;color:#fff;font-size:10px;font-weight:700;
  padding:1px 7px;border-radius:999px;font-family:'Inter',sans-serif;flex:none}
.chat-thread__badge:empty{display:none}
.chat-room{display:flex;flex-direction:column;background:#fff;height:100%;overflow:hidden}
.chat-room__head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid #e7e1d6;background:#fff;flex:none}
.chat-room__title{display:flex;flex-direction:column;line-height:1.25;flex:1;min-width:0}
.chat-room__title strong{font-family:'Cormorant Garamond',serif;font-size:18px;color:#0f1d3f;font-weight:600}
.chat-room__title span{font-family:'Inter',sans-serif;font-size:11px;color:#7a7263}
.chat-room__body{flex:1;overflow-y:auto;padding:16px 18px;background:#faf7f0;display:flex;flex-direction:column;gap:10px}
.chat-room__body:empty::after{content:'Keine Nachrichten in diesem Chat.';display:block;text-align:center;
  color:#7a7263;font-family:'Inter',sans-serif;font-size:12px;font-style:italic;padding:40px 20px}
.chat-msg{max-width:75%;padding:10px 14px;border-radius:14px;background:#fff;border:1px solid #e7e1d6;
  font-family:'Inter',sans-serif;font-size:13px;line-height:1.5;color:#0f1d3f;align-self:flex-start;
  display:flex;flex-direction:column;gap:4px;box-shadow:0 1px 3px rgba(20,35,58,.04)}
.chat-msg__author{font-size:11px;color:#caa26a;font-weight:600}
.chat-msg__body{margin:0}
.chat-msg__time{font-size:10px;color:#7a7263;align-self:flex-end}
.chat-msg--mine{align-self:flex-end;background:#fbf6ec;border-color:#e6d4ad}
.chat-msg--mine .chat-msg__author{color:#a07c10}
/* Chat-Übersetzung */
.chat-msg__translate{align-self:flex-start;font-family:'Inter',sans-serif;font-size:11px;
  color:#7a7263;background:none;border:none;padding:2px 0;cursor:pointer;
  text-decoration:underline;text-decoration-color:#caa26a;text-underline-offset:2px;
  display:inline-flex;align-items:center;gap:4px}
.chat-msg__translate:hover{color:#caa26a}
.chat-msg__translate::before{content:'⇄';font-size:12px;color:#caa26a}
.chat-msg__translation{margin:4px 0 0;padding:8px 10px;border-left:2px solid #caa26a;
  background:#faf7f0;border-radius:0 8px 8px 0;font-size:12.5px;color:#3a4a63;
  font-style:italic;line-height:1.5;animation:fadeIn .2s ease}
.chat-msg__translation-label{display:block;font-size:10px;font-style:normal;
  color:#caa26a;font-weight:600;margin-bottom:2px;text-transform:uppercase;letter-spacing:.5px}
.chat-room__compose{display:flex;gap:8px;padding:12px 14px;border-top:1px solid #e7e1d6;background:#fff;flex:none}
.chat-room__compose input{flex:1;font-family:'Inter',sans-serif;font-size:13px;padding:10px 14px;
  border:1px solid #e7e1d6;border-radius:999px;background:#faf7f0;color:#0f1d3f}
.chat-room__compose input:focus{outline:none;border-color:#caa26a;background:#fff}
.chat-room__compose button{font-family:'Inter',sans-serif;font-size:13px;font-weight:600;
  background:#0f1d3f;color:#fff;border:none;border-radius:999px;padding:10px 20px;cursor:pointer}
.chat-room__compose button:hover{background:#caa26a}

/* --- UNTERNEHMER ---------------------------------------------------------- */
.trade-filter{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 16px;align-items:center}
.trade-filter > span{font-family:'Inter',sans-serif;font-size:11px;color:#7a7263;
  text-transform:uppercase;letter-spacing:.5px;font-weight:600;margin-right:4px}
.trades{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-top:8px}
.trade-card{background:#fff;border:1px solid #e7e1d6;border-radius:12px;padding:16px;
  display:flex;flex-direction:column;gap:10px;box-shadow:0 2px 6px rgba(20,35,58,.04);transition:transform .2s,box-shadow .2s}
.trade-card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(20,35,58,.08)}
.trade-card[data-trade-cat="plan"]{border-top:3px solid #3a6fb5}
.trade-card[data-trade-cat="shell"]{border-top:3px solid #7a7263}
.trade-card[data-trade-cat="finish"]{border-top:3px solid #caa26a}
.trade-card[data-trade-cat="mep"]{border-top:3px solid #2e7d4f}
.trade-card.is-hidden{display:none}
.trade-card__head{display:flex;align-items:center;gap:10px}
.trade-card__icon{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
  border-radius:8px;background:#fbf6ec;color:#caa26a;font-size:16px;flex:none}
.trade-card__head strong{font-family:'Cormorant Garamond',serif;font-size:17px;color:#0f1d3f;font-weight:600;line-height:1.2;flex:1}
.trade-card__cat{font-family:'Inter',sans-serif;font-size:9px;color:#7a7263;text-transform:uppercase;
  letter-spacing:.6px;font-weight:600;background:#f0ebe1;padding:2px 7px;border-radius:999px}
.trade-card__meta{display:flex;flex-direction:column;gap:3px;font-family:'Inter',sans-serif;font-size:12px;color:#3d362a}
.trade-card__meta strong{color:#0f1d3f;font-weight:600}
.trade-card__meta a{color:#caa26a;text-decoration:none}
.trade-card__meta a:hover{color:#0f1d3f}
.trade-card__actions{display:flex;gap:6px;margin-top:auto;flex-wrap:wrap}

/* --- BTN-VARIANTEN ergänzt ----------------------------------------------- */
.btn--sm{font-size:12px;padding:7px 12px;border-radius:8px}
.btn--ghost{background:transparent;border:1px solid #e7e1d6;color:#0f1d3f}
.btn--ghost:hover{background:#faf7f0;border-color:#caa26a}

/* --- RESPONSIVE Top-Bar -------------------------------------------------- */
@media (max-width:720px){
  .user-switch{right:78px;top:14px}
  .user-switch__meta{display:none}
  .user-switch__btn{padding:4px;border-radius:50%}
  .user-switch__chev{display:none}
  .user-switch__panel{right:-20px;width:280px}
  .newsbar{flex-wrap:wrap}
  .newsbar__actions{margin-left:auto}
}

/* --- DEMO-LOGIN Karten --------------------------------------------------- */
.login-hint{display:flex;flex-direction:column;gap:8px;background:#fbf6ec;
  border:1px solid #e6d4ad;border-radius:12px;padding:14px 16px;margin-top:8px}
.login-hint > strong{font-family:'Inter',sans-serif;font-size:11px;color:#7a7263;
  text-transform:uppercase;letter-spacing:.5px;font-weight:600;margin-bottom:2px}
.login-hint__user{display:flex;align-items:center;gap:10px;width:100%;
  background:#fff;border:1px solid #e7e1d6;border-radius:10px;padding:8px 10px;
  cursor:pointer;text-align:left;font-family:'Inter',sans-serif;
  transition:border-color .15s,transform .1s}
.login-hint__user:hover{border-color:#caa26a;transform:translateX(2px)}
.login-hint__avatar{display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;background:#0f1d3f;color:#caa26a;
  font-weight:600;font-size:11px;flex:none;border:1px solid rgba(202,162,106,.3)}
.login-hint__user--rose .login-hint__avatar{background:#7a3a4d;color:#f5d8c8;border-color:rgba(245,216,200,.3)}
.login-hint__body{display:flex;flex-direction:column;flex:1;line-height:1.25;min-width:0}
.login-hint__body strong{font-size:13px;color:#0f1d3f;font-weight:600}
.login-hint__body em{font-style:normal;font-size:11px;color:#7a7263;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.login-hint__pw{font-family:'JetBrains Mono',monospace,'Courier New';font-size:11px;
  color:#7a7263;background:#faf7f0;padding:3px 8px;border-radius:6px;
  border:1px dashed #e7e1d6;flex:none}

/* --- ECHTES BONARIA-LOGO (V1.2.1 Fix) ----------------------------------- */
.brand-bonaria__logo{display:block;height:auto;max-width:100%;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}
.brand-bonaria--sidebar .brand-bonaria__logo{width:170px}
.brand-bonaria--login .brand-bonaria__logo{width:200px}
.brand-bonaria{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:16px}

/* ============================================================
   V1.3 — 5 ROLLEN + WOHNUNGS-SWITCHER + COCKPIT
   ============================================================ */

/* Avatar-Farben für Rollen */
.avatar--gold  { background:#caa26a; color:#0f1d3f; border-color:rgba(20,35,58,.25)}
.avatar--blue  { background:#3a6fb5; color:#fff;    border-color:rgba(255,255,255,.3)}
.avatar--teal  { background:#2c7a7b; color:#fff;    border-color:rgba(255,255,255,.3)}
.avatar--green { background:#2e7d4f; color:#fff;    border-color:rgba(255,255,255,.3)}
.avatar--purple{ background:#7a3a8d; color:#fff;    border-color:rgba(255,255,255,.3)}

/* Login-Hint Gruppen (Details/Summary) */
.login-hint__group{margin:8px 0;border:1px solid rgba(202,162,106,.25);border-radius:10px;background:rgba(20,35,58,.35);overflow:hidden}
.login-hint__group > summary{cursor:pointer;list-style:none;padding:10px 14px;font-family:'Cormorant Garamond',serif;font-size:15px;color:#caa26a;letter-spacing:.04em;display:flex;align-items:center;justify-content:space-between}
.login-hint__group > summary::-webkit-details-marker{display:none}
.login-hint__group > summary::after{content:'▾';opacity:.6;transition:transform .2s}
.login-hint__group[open] > summary::after{transform:rotate(180deg)}
.login-hint__group .login-hint__cat{font-weight:600}
.login-hint__group .login-hint__user{display:flex;align-items:center;gap:10px;width:100%;padding:8px 14px;border:0;background:transparent;color:#f3eee5;text-align:left;cursor:pointer;border-top:1px solid rgba(202,162,106,.12);font-family:inherit;font-size:13px;line-height:1.35}
.login-hint__group .login-hint__user:hover{background:rgba(202,162,106,.08)}
.login-hint__role-tag{display:inline-block;font-size:10px;letter-spacing:.08em;padding:2px 7px;border-radius:99px;margin-left:auto;text-transform:uppercase;font-weight:600}
.login-hint__role-tag--buyer    { background:rgba(255,255,255,.12); color:#fff}
.login-hint__role-tag--owner    { background:rgba(202,162,106,.25); color:#caa26a}
.login-hint__role-tag--architect{ background:rgba(58,111,181,.3);   color:#aac6ee}
.login-hint__role-tag--mgmt     { background:rgba(46,125,79,.3);    color:#a7e0bb}
.login-hint__role-tag--notary   { background:rgba(122,58,141,.3);   color:#dab5e6}

/* Role-Badge in Topbar */
.role-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:99px;background:color-mix(in srgb,var(--role-color,#0f1d3f) 12%,transparent);border:1px solid color-mix(in srgb,var(--role-color,#0f1d3f) 35%,transparent);font-size:12px;letter-spacing:.04em;font-weight:600;color:var(--role-color,#0f1d3f)}
.role-badge__dot{width:8px;height:8px;border-radius:50%;background:var(--role-color,#0f1d3f);box-shadow:0 0 0 3px color-mix(in srgb,var(--role-color,#0f1d3f) 25%,transparent)}
.role-badge__label{white-space:nowrap}
[data-tone="navy"]   .role-badge__dot,.role-badge[data-tone="navy"]   .role-badge__dot{background:#0f1d3f}
[data-tone="gold"]   .role-badge__dot,.role-badge[data-tone="gold"]   .role-badge__dot{background:#caa26a}
[data-tone="blue"]   .role-badge__dot,.role-badge[data-tone="blue"]   .role-badge__dot{background:#3a6fb5}
[data-tone="green"]  .role-badge__dot,.role-badge[data-tone="green"]  .role-badge__dot{background:#2e7d4f}
[data-tone="purple"] .role-badge__dot,.role-badge[data-tone="purple"] .role-badge__dot{background:#7a3a8d}

/* Unit-Switcher (Bauherrschaft) */
.unit-switch{position:relative;margin-left:8px}
.unit-switch__btn{display:inline-flex;align-items:center;gap:10px;padding:8px 12px;background:#fff;border:1px solid #caa26a;border-radius:10px;cursor:pointer;font-family:inherit;color:#0f1d3f;box-shadow:0 1px 0 rgba(20,35,58,.04)}
.unit-switch__btn:hover{background:#fff8ef}
.unit-switch__icon{width:24px;height:24px;border-radius:6px;background:#caa26a;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:12px}
.unit-switch__meta{display:flex;flex-direction:column;line-height:1.15}
.unit-switch__meta strong{font-size:13px;color:#0f1d3f;font-weight:600}
.unit-switch__meta span{font-size:10px;letter-spacing:.06em;color:#7e8896}
.unit-switch__caret{margin-left:6px;color:#caa26a;font-size:11px}
.unit-switch__panel{position:absolute;top:calc(100% + 8px);right:0;min-width:340px;max-height:540px;overflow:auto;background:#fff;border:1px solid rgba(20,35,58,.12);border-radius:14px;box-shadow:0 20px 60px rgba(20,35,58,.18);padding:8px;z-index:120;display:none}
.unit-switch.is-open .unit-switch__panel{display:block}
.unit-switch__chalet{padding:6px 8px}
.unit-switch__chalet h4{font-family:'Cormorant Garamond',serif;font-size:14px;color:#caa26a;margin:6px 6px 4px;letter-spacing:.04em}
.unit-switch__item{display:grid;grid-template-columns:18px 36px 1fr auto;gap:10px;align-items:center;width:100%;padding:8px 10px;border:0;background:transparent;border-radius:8px;cursor:pointer;font-family:inherit;font-size:13px;color:#0f1d3f;text-align:left}
.unit-switch__item:hover{background:#f6f2ea}
.unit-switch__dot{font-size:14px;line-height:1;text-align:center}
.unit-switch__dot--verkauft{color:#2e7d4f}
.unit-switch__dot--frei{color:#9aa3ad}
.unit-switch__id{font-weight:700;letter-spacing:.04em}
.unit-switch__buyer{color:#43526a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.unit-switch__sqm{font-size:11px;color:#7e8896}

/* Rolebar Banner */
.rolebar{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;border-radius:12px;background:#fff8ef;border:1px solid rgba(202,162,106,.4);margin:0 0 16px}
.rolebar[data-tone="blue"]   {background:#eef4fc;border-color:rgba(58,111,181,.35)}
.rolebar[data-tone="green"]  {background:#eef7f1;border-color:rgba(46,125,79,.35)}
.rolebar[data-tone="purple"] {background:#f5edf7;border-color:rgba(122,58,141,.35)}
.rolebar[data-tone="gold"]   {background:#fff8ef;border-color:rgba(202,162,106,.4)}
.rolebar__icon{font-size:18px;color:#caa26a;line-height:1.3}
.rolebar[data-tone="blue"]   .rolebar__icon{color:#3a6fb5}
.rolebar[data-tone="green"]  .rolebar__icon{color:#2e7d4f}
.rolebar[data-tone="purple"] .rolebar__icon{color:#7a3a8d}
.rolebar__body{font-size:13px;line-height:1.5;color:#0f1d3f}

/* Cockpit (Bauherrschaft) */
.cockpit{margin:0 0 24px;padding:20px;background:#fff;border-radius:14px;border:1px solid rgba(20,35,58,.08);box-shadow:0 1px 0 rgba(20,35,58,.03)}
.cockpit__head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:16px;flex-wrap:wrap}
.cockpit__head h2{margin:0 0 4px;font-family:'Cormorant Garamond',serif;font-size:24px;color:#0f1d3f}
.cockpit__sub{margin:0;font-size:12px;letter-spacing:.04em;color:#7e8896}
.cockpit__kpis{display:flex;gap:14px}
.cockpit__kpi{padding:10px 16px;border-radius:10px;background:#fff8ef;border:1px solid rgba(202,162,106,.3);text-align:center;min-width:74px}
.cockpit__kpi strong{display:block;font-family:'Cormorant Garamond',serif;font-size:22px;color:#0f1d3f;line-height:1}
.cockpit__kpi span{display:block;font-size:10px;letter-spacing:.08em;color:#7e8896;margin-top:4px;text-transform:uppercase}
.cockpit__tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cockpit__table{width:100%;border-collapse:collapse;font-size:13px;min-width:720px}
.cockpit__table th,.cockpit__table td{padding:10px 12px;text-align:left;border-bottom:1px solid rgba(20,35,58,.06)}
.cockpit__table th{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#7e8896;font-weight:600;background:#fafaf6}
.cockpit__row--free td{color:#9aa3ad}
.cockpit__pill{display:inline-block;padding:3px 10px;border-radius:99px;font-size:11px;letter-spacing:.04em;font-weight:600}
.cockpit__pill--verkauft{background:#e6f3ec;color:#2e7d4f}
.cockpit__pill--frei{background:#f0f1f3;color:#7e8896}

/* Penthouse-Gold-Badge: Unit-Switcher + Cockpit */
.unit-switch__item--penthouse{background:linear-gradient(90deg, rgba(202,162,106,.12), rgba(202,162,106,0) 70%);border-left:3px solid #caa26a;padding-left:7px}
.unit-switch__item--penthouse:hover{background:linear-gradient(90deg, rgba(202,162,106,.22), rgba(246,242,234,1) 75%)}
.unit-switch__item--penthouse .unit-switch__id{color:#8a6a2e}
.unit-switch__crown{color:#caa26a;font-size:12px;margin-left:4px;letter-spacing:0;text-shadow:0 1px 0 rgba(138,106,46,.15)}
.cockpit__row--penthouse td{background:linear-gradient(90deg, rgba(202,162,106,.09), rgba(202,162,106,0) 55%)}
.cockpit__row--penthouse td:first-child{border-left:3px solid #caa26a}
.cockpit__badge--penthouse{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:99px;background:#caa26a;color:#0f1d3f;font-size:10px;letter-spacing:.06em;font-weight:700;vertical-align:middle;text-transform:uppercase}

/* ============ PROSPECT / INTERESSENTEN-SICHT ============ */
/* Buyer/Owner-Widgets bei Prospect ausblenden: alles in uebersicht außer prospectView */
body.role-prospect #uebersicht > *{display:none !important}
body.role-prospect #uebersicht > #prospectView{display:block !important}
body.role-prospect .newsbar,
body.role-prospect .bell,
body.role-prospect .bell-panel{display:none !important}
body.role-prospect .rolebar[data-tone="silver"]{background:#f4f4f6;border-color:rgba(126,136,150,.35)}
body.role-prospect .rolebar[data-tone="silver"] .rolebar__icon{color:#7e8896}

/* Prospect-Hero */
.prospect-hero{position:relative;height:320px;border-radius:16px;overflow:hidden;margin-bottom:28px;box-shadow:0 4px 24px rgba(20,35,58,.12)}
.prospect-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.prospect-hero__overlay{position:absolute;inset:0;background:linear-gradient(135deg, rgba(20,35,58,.72) 0%, rgba(20,35,58,.35) 60%, rgba(20,35,58,.1) 100%)}
.prospect-hero__content{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:28px 36px;color:#fff}
.prospect-hero__eyebrow{font-family:'Inter',sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.85);margin-bottom:8px}
.prospect-hero__title{font-family:'Cormorant Garamond',serif;font-size:44px;font-weight:500;line-height:1.05;margin:0 0 10px;color:#fff}
.prospect-hero__sub{font-family:'Inter',sans-serif;font-size:14px;color:rgba(255,255,255,.9);margin:0}

/* Prospect Intro */
.prospect-intro{background:#fff;border:1px solid rgba(20,35,58,.08);border-radius:14px;padding:24px 28px;margin-bottom:24px;box-shadow:0 1px 0 rgba(20,35,58,.03)}
.prospect-intro h2{font-family:'Cormorant Garamond',serif;font-size:28px;color:#0f1d3f;margin:0 0 8px;font-weight:500}
.prospect-intro p{font-family:'Inter',sans-serif;font-size:14px;color:#43526a;margin:0;line-height:1.6}
.prospect-intro a{color:#caa26a;text-decoration:none;border-bottom:1px solid rgba(202,162,106,.4)}
.prospect-intro a:hover{border-bottom-color:#caa26a}

/* Prospect Grid */
.prospect-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;margin-bottom:28px}
.prospect-card{position:relative;background:#fff;border:1px solid rgba(20,35,58,.08);border-radius:14px;padding:22px 22px 20px;display:flex;flex-direction:column;gap:16px;transition:transform .18s ease, box-shadow .18s ease;box-shadow:0 1px 0 rgba(20,35,58,.03)}
.prospect-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(20,35,58,.08)}
.prospect-card--penthouse{background:linear-gradient(180deg, #fff 0%, rgba(202,162,106,.06) 100%);border-color:rgba(202,162,106,.4)}
.prospect-card__badge{position:absolute;top:14px;right:14px;background:#caa26a;color:#0f1d3f;font-family:'Inter',sans-serif;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:99px}
.prospect-card__head{display:flex;flex-direction:column;gap:4px;padding-right:70px}
.prospect-card__chalet{font-family:'Inter',sans-serif;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#7a7263}
.prospect-card__title{font-family:'Cormorant Garamond',serif;font-size:22px;color:#0f1d3f;margin:0;font-weight:500;line-height:1.2}
.prospect-card__facts{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin:0;padding:14px 0;border-top:1px solid rgba(20,35,58,.06);border-bottom:1px solid rgba(20,35,58,.06)}
.prospect-card__facts div{display:flex;flex-direction:column;gap:2px}
.prospect-card__facts dt{font-family:'Inter',sans-serif;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#7a7263;margin:0}
.prospect-card__facts dd{font-family:'Inter',sans-serif;font-size:14px;color:#0f1d3f;margin:0;font-weight:600}
.prospect-card__cta{display:inline-flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 16px;border-radius:10px;background:#0f1d3f;color:#fff;text-decoration:none;font-family:'Inter',sans-serif;font-size:13px;font-weight:600;letter-spacing:.02em;transition:background .15s ease}
.prospect-card__cta:hover{background:#caa26a;color:#0f1d3f}
.prospect-card--penthouse .prospect-card__cta{background:#caa26a;color:#0f1d3f}
.prospect-card--penthouse .prospect-card__cta:hover{background:#0f1d3f;color:#caa26a}

/* Prospect Kontakt-Footer */
.prospect-contact{display:flex;flex-direction:column;gap:4px;align-items:center;padding:24px;background:#fafaf6;border-radius:12px;margin-bottom:24px;text-align:center}
.prospect-contact strong{font-family:'Cormorant Garamond',serif;font-size:20px;color:#0f1d3f;font-weight:500}
.prospect-contact span{font-family:'Inter',sans-serif;font-size:13px;color:#7a7263}
.prospect-contact a{font-family:'Inter',sans-serif;font-size:14px;color:#caa26a;text-decoration:none;font-weight:600;margin-top:4px}
.prospect-contact a:hover{color:#0f1d3f}

/* Avatar silber f\u00fcr Prospect */
.avatar--silver{background:#7e8896;color:#fff}

/* Login-Hint: Prospect role-tag */
.login-hint__role-tag--prospect{background:rgba(126,136,150,.3);color:#cdd3dc}

@media (max-width:760px){
  .prospect-hero{height:240px}
  .prospect-hero__title{font-size:32px}
  .prospect-hero__content{padding:20px}
  .prospect-intro{padding:18px 20px}
  .prospect-intro h2{font-size:22px}
  .prospect-grid{grid-template-columns:1fr;gap:14px}
}

/* Responsive: iPhone & iPad */
@media (max-width:980px){
  .role-badge__label{display:none}
  .role-badge{padding:6px 8px}
  .unit-switch__meta{display:none}
  .unit-switch__btn{padding:8px}
}
@media (max-width:760px){
  .unit-switch__panel{position:fixed;left:12px;right:12px;top:auto;bottom:12px;max-height:65vh;min-width:0;width:auto}
  .cockpit{padding:14px}
  .cockpit__head{flex-direction:column;align-items:stretch}
  .cockpit__kpis{gap:8px}
  .cockpit__kpi{flex:1;min-width:0;padding:8px}
}
@media (max-width:480px){
  .cockpit__kpi strong{font-size:18px}
}

/* ============================================================
   V6 · Prospect-Portal Ausbau
   - Viz-Galerie (Platzhalter-Tiles)
   - Über das Projekt (Text + Facts)
   - Lage (Distanzen + Karten-Platzhalter)
   - Ausstattung (Spec-Tiles)
   - Wohnungs-Karten Actions (Plan + Anfrage)
   - Final-CTA
   - Disclaimer
   - Prospect-Dialoge (Grundriss + Anfrage-Formular)
   ============================================================ */

/* --- Section-Wrapper (generisch) --- */
.prospect-sec{
  background:#fff;
  border:1px solid rgba(20,35,58,.08);
  border-radius:14px;
  padding:28px 30px;
  margin:22px 0;
  box-shadow:0 1px 2px rgba(20,35,58,.04);
}
.prospect-sec__head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
  margin:0 0 18px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(20,35,58,.08);
}
.prospect-sec__head h2{
  font-family:'Cormorant Garamond',serif;
  font-weight:500;
  color:#0f1d3f;
  font-size:26px;
  margin:0;
  letter-spacing:.2px;
}
.prospect-sec__head span{
  color:#6b7689;
  font-size:13px;
  font-style:italic;
}

/* --- Visualisierungs-Galerie --- */
.viz-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:14px;
}
.viz-tile{
  position:relative;
  display:flex;flex-direction:column;justify-content:space-between;
  min-height:160px;
  padding:18px;
  background:linear-gradient(135deg,#f5f1ea 0%,#eae2d3 100%);
  border:1px dashed rgba(202,162,106,.55);
  border-radius:12px;
  color:#5a4b2e;
  overflow:hidden;
}
.viz-tile::before{
  content:'';
  position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,transparent 0 14px,rgba(202,162,106,.06) 14px 28px);
  pointer-events:none;
}
.viz-tile__icon{
  font-size:28px;
  color:#caa26a;
  line-height:1;
}
.viz-tile__label{
  font-family:'Cormorant Garamond',serif;
  font-size:18px;
  font-weight:500;
  color:#0f1d3f;
  margin-top:10px;
}
.viz-tile__placeholder{
  margin-top:8px;
  font-size:11px;
  color:#8a7a56;
  font-style:italic;
  letter-spacing:.3px;
  text-transform:uppercase;
}

/* --- Über das Projekt --- */
.prospect-sec--about .about-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:28px;
  align-items:start;
}
.about-text{
  color:#3a4558;
  font-size:15px;
  line-height:1.7;
  margin:0;
}
.about-facts{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.about-facts > div{
  background:#fafaf7;
  border:1px solid rgba(20,35,58,.06);
  border-left:3px solid #caa26a;
  border-radius:8px;
  padding:12px 14px;
  display:flex;flex-direction:column;gap:2px;
}
.about-facts strong{
  color:#0f1d3f;
  font-size:18px;
  font-family:'Cormorant Garamond',serif;
  font-weight:500;
}
.about-facts span{
  color:#6b7689;
  font-size:12px;
  letter-spacing:.2px;
}

/* --- Lage --- */
.loc-grid{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:22px;
  align-items:stretch;
}
.loc-list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:8px;
}
.loc-item{
  display:flex;align-items:center;gap:14px;
  padding:10px 14px;
  background:#fafaf7;
  border:1px solid rgba(20,35,58,.06);
  border-radius:8px;
}
.loc-item__icon{
  width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;
  background:#0f1d3f;color:#caa26a;
  border-radius:50%;
  font-size:14px;
  flex-shrink:0;
}
.loc-item__body{
  display:flex;flex-direction:column;gap:1px;
  flex:1;min-width:0;
}
.loc-item__body strong{
  color:#0f1d3f;font-size:14px;font-weight:600;
}
.loc-item__body em{
  color:#6b7689;font-size:11px;font-style:normal;letter-spacing:.2px;
}
.loc-item__dist{
  color:#caa26a;
  font-weight:600;
  font-size:13px;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.loc-map-placeholder{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;
  background:linear-gradient(135deg,#eaf0f6 0%,#d9e1eb 100%);
  border:1px dashed rgba(20,35,58,.22);
  border-radius:12px;
  padding:28px 20px;
  text-align:center;
  color:#4a5568;
}
.loc-map-placeholder span{
  font-size:42px;color:#0f1d3f;line-height:1;
}
.loc-map-placeholder p{
  margin:0;font-size:12px;color:#6b7689;font-style:italic;max-width:220px;
}

/* --- Ausstattung --- */
.spec-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:14px;
}
.spec-tile{
  background:#fafaf7;
  border:1px solid rgba(20,35,58,.06);
  border-top:3px solid #caa26a;
  border-radius:10px;
  padding:16px 18px;
}
.spec-tile h4{
  margin:0 0 6px;
  font-family:'Cormorant Garamond',serif;
  font-weight:500;
  color:#0f1d3f;
  font-size:18px;
}
.spec-tile p{
  margin:0;color:#4a5568;font-size:13px;line-height:1.55;
}

/* --- Wohnungs-Karten Actions --- */
.prospect-card__actions{
  display:flex;gap:10px;
  margin-top:14px;
  flex-wrap:wrap;
}
.prospect-card__plan{
  flex:0 0 auto;
  background:#fff;
  color:#0f1d3f;
  border:1px solid rgba(20,35,58,.2);
  border-radius:8px;
  padding:10px 14px;
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  transition:background .15s,border-color .15s;
}
.prospect-card__plan:hover{
  background:#fafaf7;
  border-color:#caa26a;
}
.prospect-card__cta{ flex:1 1 auto; }

/* --- Final-CTA --- */
.prospect-final-cta{
  background:linear-gradient(135deg,#0f1d3f 0%,#1c2f4d 100%);
  color:#fff;
  border-radius:14px;
  padding:28px 32px;
  margin:24px 0;
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;flex-wrap:wrap;
  box-shadow:0 6px 18px rgba(20,35,58,.18);
}
.prospect-final-cta__body{
  flex:1 1 360px;
}
.prospect-final-cta h2{
  font-family:'Cormorant Garamond',serif;
  font-weight:500;
  font-size:28px;
  margin:0 0 6px;
  color:#caa26a;
  letter-spacing:.3px;
}
.prospect-final-cta p{
  margin:0;color:rgba(255,255,255,.82);font-size:14px;
}
.prospect-final-cta .btn--gold{
  flex-shrink:0;
  padding:14px 22px;
  font-size:14px;
}

/* --- Disclaimer --- */
.prospect-disclaimer{
  margin:18px 6px 0;
  font-size:11px;
  color:#8a93a3;
  line-height:1.55;
  font-style:italic;
}

/* --- Prospect-Dialog (Grundriss + Anfrage-Formular) --- */
.prospect-dialog{
  position:fixed;inset:0;
  z-index:9999;
  display:flex;align-items:center;justify-content:center;
  animation:prospectDialogIn .15s ease-out;
}
@keyframes prospectDialogIn{
  from{opacity:0}
  to{opacity:1}
}
.prospect-dialog__backdrop{
  position:absolute;inset:0;
  background:rgba(20,35,58,.55);
  backdrop-filter:blur(3px);
  cursor:pointer;
}
.prospect-dialog__panel{
  position:relative;
  background:#fff;
  border-radius:14px;
  box-shadow:0 24px 60px rgba(20,35,58,.3);
  width:min(560px,calc(100vw - 32px));
  max-height:calc(100vh - 48px);
  display:flex;flex-direction:column;
  overflow:hidden;
  animation:prospectPanelIn .2s ease-out;
}
@keyframes prospectPanelIn{
  from{opacity:0;transform:translateY(8px) scale(.98)}
  to{opacity:1;transform:none}
}
.prospect-dialog__panel > header{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px;
  border-bottom:1px solid rgba(20,35,58,.08);
  gap:14px;
}
.prospect-dialog__panel > header h3{
  margin:0;
  font-family:'Cormorant Garamond',serif;
  font-weight:500;
  color:#0f1d3f;
  font-size:20px;
  line-height:1.3;
}
.prospect-dialog__x{
  background:transparent;border:none;
  font-size:24px;line-height:1;
  color:#6b7689;cursor:pointer;
  padding:4px 8px;border-radius:6px;
  transition:background .15s;
}
.prospect-dialog__x:hover{background:rgba(20,35,58,.06)}
.prospect-dialog__body{
  padding:20px 22px;
  overflow-y:auto;
  flex:1;
}
.prospect-dialog__sub{
  margin:0 0 14px;
  color:#6b7689;font-size:13px;line-height:1.5;
}
.prospect-dialog__panel > footer{
  display:flex;gap:10px;justify-content:flex-end;
  padding:14px 22px;
  border-top:1px solid rgba(20,35,58,.08);
  background:#fafaf7;
}

/* Anfrage-Form */
.prospect-form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px 14px;
}
.prospect-form label{
  display:flex;flex-direction:column;gap:4px;
  font-size:12px;
  color:#0f1d3f;
  font-weight:500;
}
.prospect-form__full{ grid-column:1 / -1; }
.prospect-form input,
.prospect-form select,
.prospect-form textarea{
  font-family:inherit;
  font-size:14px;
  color:#0f1d3f;
  padding:10px 12px;
  border:1px solid rgba(20,35,58,.18);
  border-radius:8px;
  background:#fff;
  transition:border-color .15s,box-shadow .15s;
  width:100%;
  box-sizing:border-box;
}
.prospect-form input:focus,
.prospect-form select:focus,
.prospect-form textarea:focus{
  outline:none;
  border-color:#caa26a;
  box-shadow:0 0 0 3px rgba(202,162,106,.18);
}
.prospect-form textarea{ resize:vertical;min-height:80px; }

/* Grundriss-Platzhalter */
.plan-placeholder{
  min-height:260px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;
  background:linear-gradient(135deg,#f5f1ea 0%,#eae2d3 100%);
  border:1px dashed rgba(202,162,106,.55);
  border-radius:10px;
  padding:32px;
  text-align:center;
}
.plan-placeholder span{
  font-size:56px;color:#caa26a;line-height:1;
}
.plan-placeholder p{
  margin:0;color:#5a4b2e;font-size:13px;font-style:italic;max-width:300px;
}

/* Success-Screen */
.prospect-dialog__success{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;
  text-align:center;
  padding:36px 24px;
  min-height:200px;
}
.prospect-success-icon{
  width:64px;height:64px;
  border-radius:50%;
  background:linear-gradient(135deg,#caa26a,#b08d52);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:32px;font-weight:300;
  box-shadow:0 6px 16px rgba(202,162,106,.35);
}
.prospect-dialog__success p{
  margin:0;color:#4a5568;font-size:14px;line-height:1.6;max-width:380px;
}

/* btn--ghost fallback (falls nicht schon vorhanden) */
.btn--ghost{
  background:transparent;
  color:#0f1d3f;
  border:1px solid rgba(20,35,58,.18);
  padding:10px 16px;
  border-radius:8px;
  font-size:13px;font-weight:500;
  cursor:pointer;
}
.btn--ghost:hover{background:#fafaf7}

/* --- Responsive: V6 Prospect --- */
@media (max-width:860px){
  .prospect-sec{ padding:22px 20px; }
  .prospect-sec__head h2{ font-size:22px; }
  .prospect-sec--about .about-grid{ grid-template-columns:1fr; gap:18px; }
  .loc-grid{ grid-template-columns:1fr; }
  .loc-map-placeholder{ min-height:160px; }
  .prospect-final-cta{ padding:22px; }
  .prospect-final-cta h2{ font-size:24px; }
  .prospect-form{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .prospect-sec{ padding:18px 16px; border-radius:10px; }
  .prospect-sec__head{ flex-direction:column; align-items:flex-start; gap:6px; }
  .viz-grid{ grid-template-columns:1fr 1fr; gap:10px; }
  .viz-tile{ min-height:130px; padding:14px; }
  .viz-tile__icon{ font-size:22px; }
  .viz-tile__label{ font-size:15px; }
  .about-facts{ grid-template-columns:1fr; }
  .spec-grid{ grid-template-columns:1fr; }
  .loc-item{ padding:8px 10px; gap:10px; }
  .loc-item__icon{ width:30px;height:30px;font-size:12px; }
  .prospect-card__actions{ flex-direction:column; }
  .prospect-card__plan,.prospect-card__cta{ width:100%; }
  .prospect-final-cta{ flex-direction:column; align-items:stretch; text-align:center; }
  .prospect-final-cta .btn--gold{ width:100%; }
  .prospect-dialog__panel{ width:calc(100vw - 16px); max-height:calc(100vh - 24px); }
  .prospect-dialog__panel > header{ padding:14px 16px; }
  .prospect-dialog__panel > header h3{ font-size:18px; }
  .prospect-dialog__body{ padding:16px; }
  .prospect-dialog__panel > footer{ padding:12px 16px; flex-direction:column-reverse; }
  .prospect-dialog__panel > footer .btn{ width:100%; }
}

/* V1.3 · Login-Hint Avatare für 5 neue Rollen */
.login-hint__avatar--gold  { background:#caa26a; color:#0f1d3f; border-color:rgba(20,35,58,.3)}
.login-hint__avatar--blue  { background:#3a6fb5; color:#fff;    border-color:rgba(255,255,255,.3)}
.login-hint__avatar--teal  { background:#2c7a7b; color:#fff;    border-color:rgba(255,255,255,.3)}
.login-hint__avatar--green { background:#2e7d4f; color:#fff;    border-color:rgba(255,255,255,.3)}
.login-hint__avatar--purple{ background:#7a3a8d; color:#fff;    border-color:rgba(255,255,255,.3)}
.login-hint__pw-note{margin:8px 0 0;font-size:11px;color:#caa26a;letter-spacing:.04em}
.login-hint__pw-note code{background:rgba(202,162,106,.18);padding:1px 6px;border-radius:4px;color:#caa26a}

/* ============================================================
   V1.3 — FIXES: Login-Logo-Backdrop + Hint-Kontrast
   ============================================================ */

/* Logo-Bereich auf der Login-Seite: dunkler Backdrop für Lesbarkeit */
.login-bg__brand{
  background: linear-gradient(180deg, rgba(20,35,58,.78) 0%, rgba(20,35,58,.55) 70%, rgba(20,35,58,0) 100%);
  padding: 28px 32px 48px;
  border-radius: 0 0 14px 0;
}
.login-bg__brand .brand-bonaria{margin-bottom:8px}
.login-bg__brand .brand-bonaria__since{color:#caa26a;letter-spacing:.18em;font-size:11px}
.login-bg__brand .brand-project{margin-top:14px;padding-top:14px;border-top:1px solid rgba(202,162,106,.45)}
.login-bg__brand .brand-project__main{color:#fff;font-family:'Cormorant Garamond',serif;font-size:22px;letter-spacing:.05em;line-height:1.1;display:block}
.login-bg__brand .brand-project__sub{color:rgba(255,255,255,.78);font-size:11px;letter-spacing:.18em;text-transform:uppercase}

/* Login-Hint Gruppen: heller Backdrop für hellen Container */
.login-hint__group{
  background:#fff !important;
  border:1px solid rgba(202,162,106,.4) !important;
}
.login-hint__group > summary{
  background:#f8f1e3;
  color:#7a5a2a !important;
  border-bottom:1px solid rgba(202,162,106,.25);
}
.login-hint__group[open] > summary{background:#f3e8d0}
.login-hint__group .login-hint__user{
  border-top:1px solid rgba(202,162,106,.15);
  color:#0f1d3f;
  background:#fff;
}
.login-hint__group .login-hint__user:hover{background:#fbf6ec}
.login-hint__group .login-hint__user strong{color:#0f1d3f}
.login-hint__group .login-hint__user em{color:#7a7263;font-size:11px;font-style:normal}
.login-hint__pw-note{color:#7a5a2a !important}
.login-hint__pw-note code{background:rgba(202,162,106,.18);color:#7a5a2a !important}

/* Responsive Login-Brand */
@media (max-width:780px){
  .login-bg__brand{padding:20px 22px 36px;border-radius:0}
  .login-bg__brand .brand-project__main{font-size:18px}
}

/* Login-Logo: weißer Backdrop (Plate) damit dunkles Logo auf jedem Hintergrund lesbar */
.brand-bonaria__plate{
  display:inline-block;
  background:#fff;
  padding:14px 22px 12px;
  border-radius:8px;
  box-shadow:0 6px 24px rgba(0,0,0,.25);
}
.brand-bonaria__plate .brand-bonaria__logo{display:block}
.login-bg__brand .brand-bonaria{align-items:flex-start;gap:10px}
.login-bg__brand{
  background: linear-gradient(180deg, rgba(20,35,58,.55) 0%, rgba(20,35,58,.25) 80%, rgba(20,35,58,0) 100%);
}
@media (max-width:780px){
  .brand-bonaria__plate{padding:10px 16px 9px}
}

/* V1.3 — Doppel-Logo bereinigen: alten CSS-Text-Logo komplett ausblenden */
.brand-bonaria__name,
.brand-bonaria__amp{display:none !important}
/* Plate sauber zentrieren, Logo richtig grosszuegig */
.brand-bonaria--login .brand-bonaria__plate{padding:18px 28px}
.brand-bonaria--login .brand-bonaria__logo{width:240px;height:auto}
.brand-bonaria--sidebar .brand-bonaria__logo{width:160px;height:auto}
/* Login-Brand cleaner Layout */
.login-bg__brand{padding:24px 28px 36px}
.login-bg__brand .brand-project{margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,.35);max-width:300px}
.login-bg__brand .brand-project__main{font-size:24px}
.login-bg__brand .brand-project__sub{display:block;margin-top:4px}

@media (max-width:780px){
  .brand-bonaria--login .brand-bonaria__logo{width:180px}
  .login-bg__brand .brand-project__main{font-size:18px}
}

/* V1.3 — Plate-Layout robust */
.brand-bonaria--login{display:block !important;margin-bottom:0}
.brand-bonaria--login .brand-bonaria__plate{
  display:block !important;
  width:max-content;
  max-width:340px;
  background:#fff !important;
  padding:18px 26px !important;
  border-radius:10px;
  box-shadow:0 8px 28px rgba(0,0,0,.35);
}
.brand-bonaria--login .brand-bonaria__plate img{
  display:block !important;
  width:260px !important;
  max-width:100% !important;
  height:auto !important;
}
.brand-bonaria--login .brand-bonaria__since{
  display:inline-block;
  margin-top:10px;
  background:rgba(20,35,58,.7);
  color:#caa26a !important;
  padding:4px 10px;
  border-radius:4px;
  letter-spacing:.18em;
  font-size:10px;
}

/* V1.3 — FINAL: Login-Brand mit voller dunkler Backdrop-Box */
.login-bg__brand{
  position:absolute;
  top:0;
  left:0;
  width:auto;
  max-width:380px;
  background:linear-gradient(135deg, #0f1d3f 0%, #1d2f4a 100%) !important;
  padding:32px 36px 28px !important;
  border-radius:0 0 16px 0;
  box-shadow:0 12px 40px rgba(0,0,0,.4);
  z-index:10;
}
.login-bg__brand .brand-bonaria{
  display:block !important;
  margin-bottom:0 !important;
}
.login-bg__brand .brand-bonaria__logo{
  display:block !important;
  width:240px !important;
  max-width:100% !important;
  height:auto !important;
}
.login-bg__brand .brand-bonaria__since{
  display:block;
  margin-top:8px;
  color:#caa26a !important;
  letter-spacing:.18em;
  font-size:11px;
  background:none !important;
  padding:0 !important;
}
.login-bg__brand .brand-project{
  margin-top:18px !important;
  padding-top:14px !important;
  border-top:1px solid rgba(202,162,106,.4) !important;
}
.login-bg__brand .brand-project__main{
  color:#fff !important;
  font-family:'Cormorant Garamond',serif;
  font-size:22px !important;
  letter-spacing:.04em;
  display:block;
}
.login-bg__brand .brand-project__main sup{font-size:.5em;color:#caa26a;top:-.7em}
.login-bg__brand .brand-project__sub{
  display:block;
  color:rgba(255,255,255,.72) !important;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-top:4px;
}

/* Plate-Element nicht mehr gebraucht */
.brand-bonaria__plate{display:contents}

/* Responsive Login-Brand */
@media (max-width:780px){
  .login-bg__brand{
    max-width:280px;
    padding:22px 24px 18px !important;
  }
  .login-bg__brand .brand-bonaria__logo{width:180px !important}
  .login-bg__brand .brand-project__main{font-size:18px !important}
}
@media (max-width:480px){
  .login-bg__brand{
    max-width:240px;
    padding:18px 20px 14px !important;
  }
  .login-bg__brand .brand-bonaria__logo{width:150px !important}
  .login-bg__brand .brand-project__main{font-size:16px !important}
}

/* V1.3 — FINAL FINAL: Login-Brand mit weißer Backdrop + Original-Logo */
.login-bg__brand{
  position:absolute !important;
  top:0; left:0;
  width:auto !important;
  max-width:none !important;
  background:rgba(255,255,255,.96) !important;
  padding:24px 32px 22px !important;
  border-radius:0 0 16px 0;
  box-shadow:0 12px 40px rgba(0,0,0,.25);
  z-index:10;
  backdrop-filter:blur(4px);
}
.login-bg__brand .brand-bonaria{
  display:block !important;
  margin:0 0 14px !important;
}
.login-bg__brand .brand-bonaria__logo{
  display:block !important;
  width:280px !important;
  height:auto !important;
  max-width:100% !important;
}
.login-bg__brand .brand-bonaria__since{
  display:block;
  margin-top:8px;
  color:#caa26a !important;
  letter-spacing:.18em;
  font-size:11px;
  background:none !important;
  padding:0 !important;
  font-weight:600;
}
.login-bg__brand .brand-project{
  margin-top:14px !important;
  padding-top:14px !important;
  border-top:1px solid rgba(202,162,106,.5) !important;
  max-width:280px;
}
.login-bg__brand .brand-project__main{
  color:#0f1d3f !important;
  font-family:'Cormorant Garamond',serif;
  font-size:22px !important;
  letter-spacing:.04em;
  display:block;
  line-height:1.1;
}
.login-bg__brand .brand-project__main sup{font-size:.5em;color:#caa26a;top:-.7em}
.login-bg__brand .brand-project__sub{
  display:block;
  color:#7a7263 !important;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-top:4px;
}

@media (max-width:780px){
  .login-bg__brand{padding:18px 22px 16px !important}
  .login-bg__brand .brand-bonaria__logo{width:200px !important}
  .login-bg__brand .brand-project__main{font-size:18px !important}
}
@media (max-width:480px){
  .login-bg__brand{padding:14px 18px 14px !important}
  .login-bg__brand .brand-bonaria__logo{width:160px !important}
  .login-bg__brand .brand-project__main{font-size:16px !important}
}

/* Since 1916 IMMER unter das Logo (Login + Sidebar) */
.brand-bonaria{display:flex !important;flex-direction:column !important;align-items:flex-start}
.brand-bonaria .brand-bonaria__logo{order:1}
.brand-bonaria .brand-bonaria__since{order:2;margin-top:6px}

.login-bg__brand .brand-bonaria__since{
  margin-top:8px !important;
  text-align:center;
  align-self:center;
  letter-spacing:.18em;
  font-size:11px;
  color:#caa26a !important;
  font-weight:600;
}

/* Since 1916 — echt unter dem Logo, mit klarem Abstand */
.login-bg__brand .brand-bonaria__since{
  margin-top:14px !important;
  display:block !important;
  text-align:left !important;
  align-self:flex-start !important;
}
.login-bg__brand .brand-bonaria__logo{margin-bottom:0 !important}

/* V1.3 — iPhone-Fix für Login-Brand (alt, wird durch FINAL-Block überschrieben) */
@media (max-width:560px){
  .login-bg__brand{
    position:relative !important;
    top:auto; left:auto;
    width:100% !important;
    max-width:100% !important;
    border-radius:0 !important;
    padding:18px 20px 14px !important;
    text-align:left;
  }
  .login-bg__brand .brand-bonaria__logo{
    width:80% !important;
    max-width:240px !important;
  }
  .login-bg__brand .brand-bonaria__since{
    margin-top:10px !important;
    font-size:10px !important;
  }
  .login-bg__brand .brand-project{margin-top:12px !important;padding-top:12px !important}
  .login-bg__brand .brand-project__main{font-size:17px !important}
  .login-bg__brand .brand-project__sub{font-size:10px !important}
  /* Sprach-Switcher unter Logo */
  .lang-floating, .login-page .lang-switch{position:relative;top:auto;right:auto;margin:8px 0 0}
}

/* ============================================================
   V1.3 — FINAL Desktop+Mobile/Tablet-Fix für Login
   ============================================================ */

/* Logo-Reset: Bonaria-Logo darf NICHT von .login-bg img Regel überschrieben werden */
.login-bg__brand .brand-bonaria__logo,
.login-bg__brand img.brand-bonaria__logo{
  position:static !important;
  inset:auto !important;
  top:auto !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  filter:none !important;
  object-fit:initial !important;
}

/* Desktop (≥1101px): Brand-Box mit Inset, nicht am Rand kleben */
@media (min-width:1101px){
  .login-bg__brand{
    position:absolute !important;
    top:32px !important;
    left:32px !important;
    right:auto !important;
    bottom:auto !important;
    width:auto !important;
    max-width:380px !important;
    padding:22px 28px 20px !important;
    background:rgba(255,255,255,.96) !important;
    border-radius:10px !important;
    box-shadow:0 12px 40px rgba(0,0,0,.3) !important;
  }
  .login-bg__brand .brand-bonaria__logo{width:240px !important;height:auto !important;max-width:100% !important}
}


/* iPad / Tablet (561–1100px): Login zweizeilig, beide Bereiche sichtbar */
@media (max-width:1100px) and (min-width:561px){
  .login-page{
    display:flex !important;
    flex-direction:column !important;
    min-height:100vh;
    background:#fbf6ec !important;
  }
  .login-bg{
    position:relative !important;
    width:100% !important;
    height:42vh !important;
    min-height:300px !important;
    flex:0 0 auto !important;
    overflow:hidden;
  }
  .login-bg > img{width:100%;height:100%;object-fit:cover;display:block}
  .login-bg__overlay{position:absolute;inset:0}
  .login-bg__brand{
    position:absolute !important;
    top:24px !important;
    left:24px !important;
    right:auto !important;
    bottom:auto !important;
    width:auto !important;
    max-width:340px !important;
    padding:18px 22px !important;
    background:rgba(255,255,255,.92) !important;
    border-radius:8px !important;
    box-shadow:0 8px 24px rgba(0,0,0,.25) !important;
  }
  .login-bg__brand .brand-bonaria__logo{width:200px !important;height:auto !important}
  .login-bg__brand .brand-project__main{font-size:18px !important;color:#0f1d3f !important}
  .login-bg__quote{display:none !important}
  .login-card{
    flex:1 1 auto !important;
    max-width:none !important;
    width:100% !important;
    padding:36px 32px 48px !important;
    background:#fbf6ec !important;
  }
  .login-lang{top:18px !important;right:18px !important}
}

/* iPhone / Phone (≤560px): Login einspaltig, Logo zentriert über Foto */
@media (max-width:560px){
  .login-page{
    display:flex !important;
    flex-direction:column !important;
    min-height:100vh;
    background:#fbf6ec !important;
  }
  .login-bg{
    position:relative !important;
    width:100% !important;
    height:34vh !important;
    min-height:240px !important;
    flex:0 0 auto !important;
    overflow:hidden;
  }
  .login-bg > img{width:100%;height:100%;object-fit:cover;display:block}
  .login-bg__overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,35,58,.15) 0%,rgba(20,35,58,.55) 100%)}
  /* Brand-Box zentriert, max 88vw, niemals über Viewport-Rand */
  .login-bg__brand{
    position:absolute !important;
    top:50% !important;
    left:50% !important;
    right:auto !important;
    bottom:auto !important;
    transform:translate(-50%, -50%) !important;
    width:auto !important;
    max-width:88vw !important;
    box-sizing:border-box !important;
    padding:14px 18px 12px !important;
    background:rgba(255,255,255,.94) !important;
    border-radius:8px !important;
    box-shadow:0 8px 24px rgba(0,0,0,.3) !important;
    text-align:center !important;
  }
  .login-bg__brand .brand-bonaria{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    margin:0 !important;
  }
  .login-bg__brand .brand-bonaria__logo{
    width:auto !important;
    max-width:200px !important;
    height:auto !important;
    max-height:48px !important;
    margin:0 !important;
    display:block !important;
  }
  .login-bg__brand .brand-bonaria__since{
    display:block !important;
    margin:8px 0 0 !important;
    text-align:center !important;
    align-self:center !important;
    font-size:9px !important;
    letter-spacing:.18em !important;
    color:#caa26a !important;
  }
  .login-bg__brand .brand-project{
    margin-top:10px !important;
    padding-top:10px !important;
    border-top:1px solid rgba(202,162,106,.5) !important;
    text-align:center !important;
    max-width:none !important;
  }
  .login-bg__brand .brand-project__main{
    font-size:16px !important;
    color:#0f1d3f !important;
    text-align:center !important;
  }
  .login-bg__brand .brand-project__sub{
    font-size:9px !important;
    color:#7a7263 !important;
    text-align:center !important;
  }
  .login-bg__quote{display:none !important}
  .login-card{
    flex:1 1 auto !important;
    max-width:none !important;
    width:100% !important;
    padding:28px 20px 40px !important;
    background:#fbf6ec !important;
  }
  .login-card h1{font-size:24px !important}
  .login-lang, .lang-floating, .login-page .lang-switch{
    position:absolute !important;
    top:12px !important;
    right:12px !important;
    z-index:20 !important;
  }
  .login-lang button{padding:6px 10px !important;font-size:12px !important}
}

/* ============================================================
   V1.3 — Since 1916 IMMER mittig unter dem Logo (alle Devices, alle Rollen)
   ============================================================ */
.brand-bonaria{
  align-items:center !important;
  text-align:center !important;
}
.brand-bonaria .brand-bonaria__logo{
  margin-left:auto !important;
  margin-right:auto !important;
  display:block !important;
}
.brand-bonaria .brand-bonaria__since{
  display:block !important;
  width:100% !important;
  text-align:center !important;
  align-self:center !important;
  margin:8px auto 0 !important;
  letter-spacing:.22em !important;
}
/* Login-Box bekommt zentriertes Innenlayout */
.login-bg__brand{text-align:center !important}
.login-bg__brand .brand-project{margin-left:auto !important;margin-right:auto !important;text-align:center !important}
.login-bg__brand .brand-project__main,
.login-bg__brand .brand-project__sub{text-align:center !important}

/* ============================================================
   V1.3 — Demo Rollen-Switcher in Topbar
   ============================================================ */
.demo-role-switch{
  display:inline-flex;align-items:center;gap:10px;
  padding:6px 12px;margin-right:14px;
  background:linear-gradient(135deg,#fff8e8,#fbf6ec);
  border:1px solid #caa26a;
  border-radius:999px;
  font-family:'Inter',sans-serif;
}
.demo-role-switch__label{
  font-size:11px;font-weight:600;color:#7a5a2c;
  letter-spacing:.06em;text-transform:uppercase;
}
.demo-role-switch__select{
  font:inherit;font-size:13px;font-weight:600;
  color:#0f1d3f;background:#fff;
  border:1px solid #caa26a;border-radius:6px;
  padding:5px 10px;cursor:pointer;
  outline:none;
  min-width:160px;
}
.demo-role-switch__select:hover{border-color:#a07f4f}
.demo-role-switch__select:focus{box-shadow:0 0 0 3px rgba(202,162,106,.25)}

@media (max-width:780px){
  .demo-role-switch{
    padding:4px 8px;margin-right:8px;gap:6px;
  }
  .demo-role-switch__label{display:none}
  .demo-role-switch__select{font-size:12px;padding:4px 8px;min-width:140px}
}

/* Demo-Switcher: Position relative to topbar, nicht über User-Menü */
.topbar{position:relative}
.demo-role-switch{
  position:absolute !important;
  top:14px !important;
  right:280px !important;
  z-index:50 !important;
  margin-right:0 !important;
}
@media (max-width:1100px){
  .demo-role-switch{right:240px !important;top:10px !important}
}
@media (max-width:780px){
  .demo-role-switch{
    position:relative !important;
    top:auto !important;right:auto !important;
    margin:8px 14px !important;
    display:inline-flex !important;
  }
}

/* ============================================================
   V1.3 — Demo-Banner
   ============================================================ */
.demo-banner{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;gap:12px;
  padding:8px 16px 8px 14px;
  background:linear-gradient(90deg,#0f1d3f 0%,#1d2f4a 100%);
  color:#fff;font:13px/1.4 'Inter',sans-serif;
  border-bottom:1px solid #caa26a;
  box-shadow:0 2px 12px rgba(0,0,0,.2);
}
.demo-banner__pill{
  display:inline-block;padding:3px 9px;
  background:#caa26a;color:#0f1d3f;
  font-weight:700;font-size:11px;letter-spacing:.12em;
  border-radius:999px;flex-shrink:0;
}
.demo-banner__text{flex:1;color:rgba(255,255,255,.92)}
.demo-banner__arrow{color:#caa26a;font-weight:700;margin-left:4px}
.demo-banner__close{
  background:transparent;border:none;color:#fff;
  font-size:22px;line-height:1;cursor:pointer;
  padding:4px 8px;border-radius:4px;flex-shrink:0;
  opacity:.7;transition:opacity .15s;
}
.demo-banner__close:hover{opacity:1;background:rgba(255,255,255,.1)}

/* Body verschoben, damit Banner nicht überdeckt */
body:has(.demo-banner) .topbar{margin-top:0}
.demo-banner ~ .app-shell, .demo-banner ~ #portal-root{padding-top:0}

/* Switcher leicht runter wegen Banner */
@media (min-width:781px){
  .demo-role-switch{top:50px !important}
}
@media (max-width:780px){
  .demo-banner{padding:6px 10px;gap:8px;font-size:12px}
  .demo-banner__text{font-size:11px}
}

/* --- V1.3 Demo-Banner: Client-Label "Gosch · Bona Vita®" -------------- */
.demo-banner__client{
  display:inline-block;
  margin:0 10px 0 4px;
  padding:2px 9px;
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:13px;
  font-weight:500;
  letter-spacing:.04em;
  color:#caa26a;
  border:1px solid rgba(202,162,106,.35);
  border-radius:999px;
  background:rgba(202,162,106,.06);
  white-space:nowrap;
  vertical-align:middle;
}
@media (max-width:780px){
  .demo-banner__client{
    font-size:12px;
    margin:2px 6px;
    padding:1px 7px;
  }
}

/* --- V1.3 Demo-Banner: "präsentiert von Gosch" sichtbar machen ------- */
.demo-banner__by{
  font-family:'Inter', system-ui, sans-serif;
  font-size:10px;
  font-weight:400;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.55);
  margin-right:4px;
}
.demo-banner__author{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:15px;
  font-weight:600;
  letter-spacing:.02em;
  color:#caa26a;
  text-shadow:0 0 12px rgba(202,162,106,.3);
}
@media (max-width:780px){
  .demo-banner__by{ font-size:9px; }
  .demo-banner__author{ font-size:13px; }
}

/* --- V1.3 Demo-Banner: "Demovariante Gosch" finale Stilanpassung ----- */
.demo-banner__by{
  font-family:'Inter', system-ui, sans-serif !important;
  font-size:12px !important;
  font-weight:400 !important;
  letter-spacing:.02em !important;
  text-transform:none !important;
  color:rgba(255,255,255,.7) !important;
  margin-right:6px !important;
}
.demo-banner__author{
  font-family:'Cormorant Garamond', Georgia, serif !important;
  font-size:16px !important;
  font-weight:600 !important;
  letter-spacing:.03em !important;
  color:#caa26a !important;
  text-shadow:0 0 14px rgba(202,162,106,.35) !important;
}
@media (max-width:780px){
  .demo-banner__by{ font-size:11px !important; }
  .demo-banner__author{ font-size:14px !important; }
}

/* ============================================================
   V2 — Mobile/Layout Fixes
   ============================================================ */
/* Banner: Text auf Mobile auf 1 Zeile begrenzen mit Ellipsis */
@media (max-width:780px){
  .demo-banner{ flex-wrap:nowrap; min-height:36px; padding:6px 10px; }
  .demo-banner__text{
    flex:1 1 auto; min-width:0; white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis;
  }
  .demo-banner__client{ flex-shrink:0; }
  .demo-banner__pill{ flex-shrink:0; }
  .demo-banner__close{ flex-shrink:0; }
}
/* Burger nicht vom Banner verdeckt */
@media (max-width:860px){
  .burger{ top:54px; z-index:210; }
}
@media (max-width:780px){
  .burger{ top:50px; }
}
/* Bell-Icon (.topbar) nicht mit Notar-Bar überlappen */
@media (max-width:860px){
  .topbar{ padding-top:46px; }
  .topbar__right{ flex-wrap:wrap; }
}
/* Demo-Role-Switch auf Mobile in eigene Zeile */
@media (max-width:780px){
  .demo-role-switch{
    position:static !important;
    margin:8px 12px 0;
    display:flex; align-items:center; gap:8px;
  }
  .demo-role-switch__select{ flex:1; max-width:240px; }
}
/* Inv-Tabs auf Mobile horizontal scrollen statt umbrechen */
@media (max-width:780px){
  .tabs, .inv-tabs, [role="tablist"]{
    display:flex; flex-wrap:nowrap; overflow-x:auto;
    -webkit-overflow-scrolling:touch; gap:8px;
    scrollbar-width:none;
  }
  .tabs::-webkit-scrollbar, .inv-tabs::-webkit-scrollbar{ display:none; }
  .tabs > *, .inv-tabs > *{ flex-shrink:0; }
}
/* Sidebar bei is-open Banner-Höhe respektieren */
@media (max-width:860px){
  .sidebar{ padding-top:46px; }
}

/* V2-FIX: inv-meta dt/dd Trenner für Lesbarkeit (sonst klatscht "Wann04.05" zusammen in textContent-Reads) */
.inv-meta dt{ font-weight:600; color:#0f1d3f; font-size:11px; text-transform:uppercase; letter-spacing:.5px; margin-bottom:2px; }
.inv-meta dt::after{ content:''; }
.inv-meta dd{ margin-left:0; color:#3a3a3a; font-size:13px; }
.inv-meta > div{ display:flex; flex-direction:column; min-width:120px; }

/* V2-FIX: dash-inv-item meta-Text Lesbarkeit */
.dash-inv-item em{ display:block; line-height:1.4 }

/* ============================================================
   V2.1 — Mobile-Layout-Fix für Topbar + Switcher + Burger
   ============================================================ */
@media (max-width:780px){
  /* Topbar: Glocke rechts, nicht links rutschen */
  .topbar{
    top:52px !important; right:14px !important;
    padding-top:0 !important;
    display:flex; flex-direction:row; align-items:center; gap:10px;
  }
  .bell{ width:38px; height:38px; }
  .bell__icon{ font-size:15px; }
  .bell__count{ width:17px; height:17px; font-size:9px; top:-3px; right:-3px; }

  /* Burger: klar gestyled, kein komischer Kasten */
  .burger{
    position:fixed !important;
    top:52px !important; right:62px !important;
    width:38px !important; height:38px !important;
    background:#0f1d3f !important;
    border-radius:10px !important;
    box-shadow:0 4px 12px rgba(20,35,58,.25) !important;
    z-index:210 !important;
  }

  /* Role-Switcher: saubere Pille unter Banner, zentriert, kompakt */
  .demo-role-switch{
    position:fixed !important;
    top:98px !important; left:14px !important; right:auto !important;
    margin:0 !important;
    padding:4px 6px 4px 10px !important;
    z-index:180 !important;
    background:rgba(255,248,232,.96) !important;
    backdrop-filter: blur(8px);
    box-shadow:0 3px 10px rgba(20,35,58,.12) !important;
  }
  .demo-role-switch__label{ display:none !important; }
  .demo-role-switch__select{
    font-size:11px !important; padding:3px 18px 3px 8px !important;
    min-width:0 !important; max-width:150px !important;
    border:0 !important; background:transparent !important;
    font-weight:600 !important;
  }
  .demo-role-switch__select:focus{ box-shadow:none !important; }
}

/* Extra klein: unter 420px noch kompakter */
@media (max-width:420px){
  .topbar{ top:48px !important; right:10px !important; gap:8px; }
  .bell{ width:36px; height:36px; }
  .burger{
    top:48px !important; right:56px !important;
    width:36px !important; height:36px !important;
  }
  .demo-role-switch{ top:92px !important; left:10px !important; }
  .demo-role-switch__select{ max-width:130px !important; font-size:10.5px !important; }
}

/* V2.2 — Topbar radikal vereinfachen auf Mobile:
   Nur Glocke sichtbar, Rest (user-switch, unit-switch, role-badge) versteckt */
@media (max-width:780px){
  .topbar .role-badge,
  .topbar .unit-switch,
  .topbar .user-switch{
    display:none !important;
  }
  .topbar{
    top:56px !important;
    right:66px !important;  /* Platz für Burger daneben */
    left:auto !important;
    padding:0 !important;
    gap:0 !important;
  }
  /* Burger rechts aussen */
  .burger{
    top:56px !important;
    right:14px !important;
  }
  /* Demo-Switcher sauber positionieren unter der ganzen Topbar */
  .demo-role-switch{
    top:104px !important;
    left:14px !important;
  }
}

@media (max-width:420px){
  .topbar{ top:52px !important; right:60px !important; }
  .burger{ top:52px !important; right:12px !important; }
  .demo-role-switch{ top:98px !important; left:12px !important; }
}

/* V2.3 — Topbar Mobile muss fixed sein, nicht relative */
@media (max-width:780px){
  .topbar{
    position:fixed !important;
    top:56px !important;
    right:66px !important;
    left:auto !important;
    width:auto !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    padding:0 !important;
    gap:0 !important;
  }
  /* Bell-Panel im Viewport halten */
  .bell-panel{
    position:fixed !important;
    top:100px !important; right:14px !important; left:14px !important;
    width:auto !important; max-width:none !important;
  }
}
@media (max-width:420px){
  .topbar{ top:52px !important; right:58px !important; }
}

/* V2.4 — Topbar Mobile endgültig: Glocke direkt positionieren */
@media (max-width:780px){
  /* Topbar ohne eigene Position — nur Bell als fixed */
  .topbar{ position:static !important; }
  .topbar .bell{
    position:fixed !important;
    top:56px !important; right:62px !important;
    width:38px !important; height:38px !important;
    z-index:200 !important;
  }
}
@media (max-width:420px){
  .topbar .bell{
    top:52px !important; right:58px !important;
    width:36px !important; height:36px !important;
  }
}

/* ============================================================
   V2 — BKP-Tabelle für Handwerkerliste (Unternehmer & Gewerke)
   ============================================================ */
.bkp-summary{
  display:flex;gap:16px;flex-wrap:wrap;
  margin:0 0 22px;
}
.bkp-sum-card{
  flex:1 1 220px;min-width:0;
  display:flex;flex-direction:column;gap:4px;
  padding:16px 18px;
  border:1px solid rgba(20,35,58,.14);
  border-left:4px solid #0f1d3f;
  background:#fff;border-radius:6px;
}
.bkp-sum-card--pos{border-left-color:#caa26a;background:#fbf7f0}
.bkp-sum__label{
  font-size:11px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:#7a869a;
}
.bkp-sum__val{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:26px;font-weight:600;color:#0f1d3f;line-height:1.1;
}
.bkp-sum__hint{font-size:11.5px;color:#5b6a80;font-style:italic;margin-top:2px}

.bkp-table-wrap{
  overflow-x:auto;
  border:1px solid rgba(20,35,58,.12);
  border-radius:6px;
  background:#fff;
  margin-top:18px;
}
.bkp-table{
  width:100%;border-collapse:collapse;
  font-size:13.5px;
  min-width:720px;
}
.bkp-table thead th{
  position:sticky;top:0;z-index:2;
  background:#0f1d3f;color:#caa26a;
  font-family:'Inter',sans-serif;
  font-size:11px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  text-align:left;padding:10px 12px;
  border-bottom:2px solid #caa26a;
  white-space:nowrap;
}
.bkp-table th.bkp-col-kv,
.bkp-table th.bkp-col-vg,
.bkp-table th.bkp-col-diff,
.bkp-table td.bkp-col-kv,
.bkp-table td.bkp-col-vg,
.bkp-table td.bkp-col-diff{
  text-align:right;font-variant-numeric:tabular-nums;
}
.bkp-table tbody td{
  padding:11px 12px;
  border-bottom:1px solid rgba(20,35,58,.08);
  vertical-align:top;
  color:#0f1d3f;
}
.bkp-table tbody tr:hover:not(.bkp-group-row){
  background:rgba(202,162,106,.06);
}
.bkp-group-row td{
  background:linear-gradient(90deg,#caa26a 0%,#d9bf8f 100%);
  color:#0f1d3f;padding:8px 12px;
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;
}
.bkp-group-row td strong{font-weight:700;font-family:'Inter',sans-serif}

.bkp-code{
  display:inline-block;
  font-family:'SF Mono', Menlo, Consolas, monospace;
  font-size:12px;font-weight:600;
  padding:3px 9px;border-radius:999px;
  background:#0f1d3f;color:#caa26a;
  letter-spacing:.04em;
  min-width:42px;text-align:center;
}
.bkp-col-firma strong{font-weight:600;display:block;line-height:1.3}
.bkp-sub{
  display:block;font-size:11.5px;color:#5b6a80;
  font-style:italic;margin-top:2px;line-height:1.35;
}

.bkp-diff--pos{color:#2e7d4f;font-weight:600}   /* unter KV = gut */
.bkp-diff--neg{color:#b0423a;font-weight:600}   /* über KV */
.bkp-diff--neutral{color:#7a869a}
.bkp-open{color:#b07b2c;font-style:italic}
.bkp-pending{
  display:inline-block;padding:3px 10px;border-radius:999px;
  background:rgba(122,134,154,.14);color:#5b6a80;
  font-size:11px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;
}
.bkp-note{
  font-size:12px;color:#5b6a80;font-style:italic;
  margin:14px 2px 0;line-height:1.55;
}

/* Filter chips für neue Tabelle — Tabellenzeilen togglen */
.trade-filter{flex-wrap:wrap}

/* Mobile: schmale Kostenspalten ausblenden */
@media (max-width:640px){
  .bkp-table{min-width:0;font-size:12.5px}
  .bkp-table .bkp-col-kv,
  .bkp-table .bkp-col-vg,
  .bkp-table .bkp-col-diff{display:none}
  .bkp-sum-card{flex:1 1 100%}
  .bkp-sum__val{font-size:22px}
}

/* ============================================================
   V2.1 — Topbar Clean-up nach Entfernen des Demo-Banners
   Ziel: Switcher kompakt rechts oben neben User-Chip, kein Luftraum
   ============================================================ */

/* Switcher als elegante Pille rechts oben — direkt vor dem User-Chip */
@media (min-width:781px){
  .demo-role-switch{
    position:fixed !important;
    top:14px !important;
    right:260px !important;   /* Platz für User-Chip + Bell */
    left:auto !important;
    z-index:46 !important;
    display:inline-flex !important;
    align-items:center !important;
    gap:8px !important;
    padding:6px 12px !important;
    background:rgba(255,255,255,.96) !important;
    border:1px solid rgba(20,35,58,.14) !important;
    border-radius:999px !important;
    box-shadow:0 4px 16px rgba(20,35,58,.08) !important;
    font-family:'Inter',sans-serif !important;
    backdrop-filter:blur(8px);
  }
  .demo-role-switch__label{
    display:inline !important;
    font-size:10px !important;
    font-weight:600 !important;
    color:#7a5a2c !important;
    letter-spacing:.08em !important;
    text-transform:uppercase !important;
  }
  .demo-role-switch__select{
    font:inherit !important;
    font-size:12px !important;
    font-weight:600 !important;
    color:#0f1d3f !important;
    background:transparent !important;
    border:0 !important;
    padding:2px 4px 2px 0 !important;
    min-width:0 !important;
    max-width:180px !important;
    cursor:pointer !important;
  }
  .demo-role-switch__select:focus{
    outline:none !important;
    box-shadow:none !important;
  }
}

/* Mobile: Switcher klein, leicht unter Topbar */
@media (max-width:780px){
  .demo-role-switch{
    position:fixed !important;
    top:14px !important;
    left:14px !important;
    right:auto !important;
    z-index:46 !important;
    padding:4px 10px !important;
    background:rgba(255,255,255,.96) !important;
    border:1px solid rgba(20,35,58,.14) !important;
    border-radius:999px !important;
    box-shadow:0 3px 10px rgba(20,35,58,.12) !important;
  }
  .demo-role-switch__label{ display:none !important; }
  .demo-role-switch__select{
    font-size:11px !important;
    padding:2px 4px !important;
    min-width:0 !important;
    max-width:140px !important;
    background:transparent !important;
    border:0 !important;
    font-weight:600 !important;
    color:#0f1d3f !important;
  }
}

/* Kein Extra-Padding mehr durch alten Banner */
body:has(.demo-banner) .topbar,
body:not(:has(.demo-banner)) .topbar{ margin-top:0 !important; }
.demo-banner ~ .app-shell,
.demo-banner ~ #portal-root{ padding-top:0 !important; }

/* Content-Bereich: kein hässlicher Leerraum oben */
.app-shell, #portal-root{ padding-top:0 !important; }

/* Alte !important-Regeln für Switcher in Banner-Kontext neutralisieren */
body .demo-role-switch{ top:14px !important; }
@media (min-width:781px){ body .demo-role-switch{ top:14px !important; } }

/* ============================================================
   V2.1 — Role-Switcher als "Angemeldet als" (kein Demo-Look)
   ============================================================ */
@media (min-width:781px){
  .demo-role-switch{
    background:#fff !important;
    border:1px solid rgba(20,35,58,.16) !important;
    border-radius:10px !important;
    padding:7px 12px !important;
    top:14px !important;
    right:250px !important;
    box-shadow:0 3px 12px rgba(20,35,58,.07) !important;
  }
  .demo-role-switch__label{
    color:#7a869a !important;
    font-size:10.5px !important;
    letter-spacing:.06em !important;
    text-transform:uppercase !important;
    font-weight:600 !important;
  }
  .demo-role-switch__select{
    color:#0f1d3f !important;
    font-size:12.5px !important;
    font-weight:600 !important;
    background:transparent !important;
    border:0 !important;
    padding-right:16px !important;
    background-image:linear-gradient(45deg, transparent 50%, #caa26a 50%),
                     linear-gradient(135deg, #caa26a 50%, transparent 50%) !important;
    background-position:calc(100% - 8px) 52%, calc(100% - 4px) 52% !important;
    background-size:4px 4px, 4px 4px !important;
    background-repeat:no-repeat !important;
    -webkit-appearance:none !important;
    appearance:none !important;
  }
}

/* Mobile: nur Dropdown, kein Label */
@media (max-width:780px){
  .demo-role-switch{
    background:#fff !important;
    border:1px solid rgba(20,35,58,.16) !important;
    border-radius:10px !important;
    box-shadow:0 3px 10px rgba(20,35,58,.12) !important;
    top:12px !important;
    left:12px !important;
    padding:4px 10px !important;
  }
  .demo-role-switch__label{ display:none !important; }
}

/* ============================================================
   V2.1 — Role-Switcher in die Sidebar verschieben
   ============================================================ */

/* Alle bisherigen fixed/absolute Positionierungen des Switchers neutralisieren */
.sidebar__foot .demo-role-switch,
body .sidebar__foot .demo-role-switch{
  position:static !important;
  top:auto !important; left:auto !important; right:auto !important; bottom:auto !important;
  z-index:auto !important;
  margin:0 0 14px 0 !important;
  padding:10px 12px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  gap:6px !important;
  width:100% !important; max-width:100% !important;
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:10px !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  font-family:'Inter',sans-serif !important;
}

.sidebar__foot .demo-role-switch__label{
  display:block !important;
  font-size:10px !important;
  font-weight:600 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  color:rgba(202,162,106,.9) !important;
  margin:0 !important;
}

.sidebar__foot .demo-role-switch__select{
  display:block !important;
  width:100% !important; max-width:100% !important;
  font-size:12.5px !important;
  font-weight:600 !important;
  color:#fff !important;
  background:rgba(20,35,58,.65) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  border-radius:8px !important;
  padding:7px 26px 7px 10px !important;
  cursor:pointer !important;
  -webkit-appearance:none !important;
  appearance:none !important;
  background-image:linear-gradient(45deg, transparent 50%, #caa26a 50%),
                   linear-gradient(135deg, #caa26a 50%, transparent 50%) !important;
  background-position:calc(100% - 12px) 55%, calc(100% - 8px) 55% !important;
  background-size:4px 4px, 4px 4px !important;
  background-repeat:no-repeat !important;
}
.sidebar__foot .demo-role-switch__select:focus{
  outline:none !important;
  border-color:#caa26a !important;
  box-shadow:0 0 0 2px rgba(202,162,106,.25) !important;
}
.sidebar__foot .demo-role-switch__select option{
  color:#0f1d3f;background:#fff;
}

/* Mobile: Sidebar collapsiert zur Topleiste \u2192 Switcher wie Sprachwahl */
@media (max-width:780px){
  .sidebar__foot .demo-role-switch{
    margin-bottom:10px !important;
  }
}

/* ============================================================
   V2.1 — Topbar Aufräumen: User-Chip + Glocke gruppieren
   Rolebar wirklich verstecken wenn leer
   ============================================================ */

/* Rolebar für Käufer: komplett weg wenn body leer */
.rolebar[hidden]{ display:none !important; }
.rolebar:has(.rolebar__body:empty){ display:none !important; }

/* User-Chip und Glocke dichter zusammen, nobler look */
@media (min-width:781px){
  .user-switch{
    right:82px !important;
    top:14px !important;
  }
  .user-switch__btn{
    padding:8px 14px !important;
    border:1px solid rgba(20,35,58,.12) !important;
    background:rgba(255,255,255,.96) !important;
    box-shadow:0 4px 16px rgba(20,35,58,.08) !important;
    backdrop-filter:blur(8px);
  }
  .topbar{
    top:14px !important;
    right:20px !important;
  }
  .bell{
    border:1px solid rgba(20,35,58,.12) !important;
    box-shadow:0 4px 16px rgba(20,35,58,.08) !important;
  }
}

/* Kein Luftraum oben mehr */
.main{ padding-top:0 !important; }
.page{ padding-top:14px !important; }

/* Der leere Info-Streifen für Käufer: ganz weg */
body:not(.role-owner):not(.role-architect):not(.role-management):not(.role-notary) .rolebar{
  display:none !important;
}

/* ===== V2.2: Bona Vita Logo in Sidebar ===== */
.sidebar .brand-project{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(202,162,106,.35);
  align-items:center;
  text-align:center;
}
.sidebar .brand-project__logo{
  display:block;
  width:108px;
  height:auto;
  max-width:100%;
  margin:0 auto 6px auto;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.25));
}
.sidebar .brand-project__sub{
  color:rgba(255,255,255,.72);
  font-size:9px;
  letter-spacing:.22em;
  text-transform:uppercase;
  margin-top:2px;
  text-align:center;
}

/* Mobile: Sidebar wird zur Topleiste → Logo etwas kleiner */
@media (max-width:780px){
  .sidebar .brand-project{
    margin-top:10px; padding-top:10px;
  }
  .sidebar .brand-project__logo{
    width:88px;
  }
}

/* ===== V2.2: Switcher + Sprachwahl in die Topbar (oben rechts) ===== */

/* Topbar: alles rechtsbündig in einer Reihe, gleicher Gap */
.topbar{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:10px !important;
  flex-wrap:nowrap;
}

/* Alle direkten Kinder der Topbar: einheitliche Höhe, static Position */
.topbar > *{
  position:static !important;
  top:auto !important; right:auto !important; left:auto !important; bottom:auto !important;
  margin:0 !important;
}

/* Switcher in Topbar: kompakt, dunkle Pille */
.topbar #demoRoleSwitch.demo-role-switch{
  position:static !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  padding:6px 10px !important;
  background:rgba(20,35,58,.72) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  border-radius:999px !important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 2px 8px rgba(0,0,0,.12) !important;
  color:#fff !important;
  margin:0 !important;
}
.topbar #demoRoleSwitch .demo-role-switch__label{
  display:none !important; /* Label weg in der Topbar, Platz sparen */
}
.topbar #demoRoleSwitch .demo-role-switch__select{
  background:transparent !important;
  border:none !important;
  color:#fff !important;
  font-size:12px !important;
  font-weight:500 !important;
  padding:2px 22px 2px 4px !important;
  min-width:0 !important;
  width:auto !important;
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%23caa26a' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>") !important;
  background-repeat:no-repeat !important;
  background-position:right 6px center !important;
  cursor:pointer !important;
}
.topbar #demoRoleSwitch .demo-role-switch__select:focus{
  outline:none !important;
  box-shadow:0 0 0 2px rgba(202,162,106,.35) !important;
}
.topbar #demoRoleSwitch .demo-role-switch__select option{
  color:#0f1d3f !important;
  background:#fff !important;
}

/* Sprachwahl in Topbar */
.topbar .lang-switch--topbar{
  display:flex !important;
  align-items:center !important;
  gap:2px !important;
  padding:4px !important;
  background:rgba(20,35,58,.72) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  border-radius:999px !important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  margin:0 !important;
}
.topbar .lang-switch--topbar button{
  background:transparent !important;
  border:none !important;
  color:rgba(255,255,255,.72) !important;
  font-size:11px !important;
  font-weight:600 !important;
  letter-spacing:.04em;
  padding:4px 8px !important;
  border-radius:999px !important;
  cursor:pointer;
  min-width:28px;
}
.topbar .lang-switch--topbar button:hover{
  color:#fff !important;
  background:rgba(255,255,255,.08) !important;
}
.topbar .lang-switch--topbar button.is-active{
  background:#caa26a !important;
  color:#0f1d3f !important;
}

/* Sidebar-Fuss: leer – optische Restore */
.sidebar__foot{
  border-top:none !important;
  padding:0 !important;
  margin-top:0 !important;
  min-height:0 !important;
}
.sidebar__foot:empty{ display:none !important; }

/* User-Chip (rechts aussen) beibehält Styling aus vorheriger Runde */

/* Mobile: Topbar wrappt bei schmalen Screens */
@media (max-width:780px){
  .topbar{ flex-wrap:wrap !important; row-gap:8px !important; }
  .topbar #demoRoleSwitch .demo-role-switch__select{ font-size:11px !important; }
  .topbar .lang-switch--topbar button{ font-size:10px !important; padding:3px 6px !important; min-width:24px; }
}

/* ===== V2.2-FIX: Alte absolut-Positionierungen in Topbar \u00fcberschreiben ===== */
/* Je h\u00f6here Specificity, um V1.3/V2.0-!important zu schlagen */
body .topbar > .demo-role-switch,
body .topbar > .lang-switch,
body .topbar > .lang-switch--topbar,
body .topbar > .bell,
body .topbar > .user-switch,
body .topbar > .role-badge,
body .topbar > .unit-switch{
  position:static !important;
  top:auto !important; right:auto !important;
  left:auto !important; bottom:auto !important;
  margin:0 !important;
  z-index:auto !important;
}

/* Topbar selbst: fixed oben rechts, kompakter Flex-Container */
body .topbar{
  position:fixed !important;
  top:14px !important;
  right:20px !important;
  left:auto !important;
  bottom:auto !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  flex-wrap:nowrap !important;
  width:auto !important;
  max-width:calc(100vw - 260px); /* sidebar-breite ber\u00fccksichtigen */
  z-index:45;
}

/* Mobile: Topbar darf umbrechen */
@media (max-width:780px){
  body .topbar{
    max-width:calc(100vw - 20px);
    flex-wrap:wrap !important;
    row-gap:8px !important;
    justify-content:flex-end !important;
  }
}

/* V2.2-CLEAN: role-badge und unit-switch für Käufer-Rolle verstecken,
   damit die Topbar nur 4 saubere Elemente zeigt */
body.role-buyer .topbar .role-badge,
body.role-buyer .topbar .unit-switch,
body .topbar .role-badge[hidden],
body .topbar .unit-switch[hidden]{
  display:none !important;
}
/* Käufer sehen nie den Wohnungs-Switcher */
body.role-buyer .topbar .unit-switch{ display:none !important; }

/* Bell soll gleichen dunklen Pillen-Stil haben wie die anderen */
body .topbar .bell{
  width:38px !important;
  height:38px !important;
  background:rgba(20,35,58,.72) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 2px 8px rgba(0,0,0,.12) !important;
  color:#fff !important;
}
body .topbar .bell:hover{
  border-color:#caa26a !important;
  background:rgba(20,35,58,.85) !important;
}
body .topbar .bell__icon{
  filter:none !important;
  color:#fff !important;
}
body .topbar .bell__count{
  border:2px solid #0f1d3f !important;
}

/* User-Chip (weißer Hintergrund) bekommt konsistente Höhe/Padding */
body .topbar .user-switch__btn{
  height:38px !important;
  padding:0 12px 0 4px !important;
}
body .topbar .user-switch__btn .avatar{
  width:30px !important; height:30px !important; font-size:11px !important;
}

/* V2.2-FIX-2: bell-panel darf Topbar nicht aufbl\u00e4hen */
body .topbar .bell-panel{
  position:absolute !important;
  top:52px !important;
  right:0 !important;
}
body .topbar{
  min-height:0 !important;
  height:38px !important;
  align-items:center !important;
}

/* ===== V2.3: Topbar als sauberer Streifen oben rechts ===== */
/* Topbar wird eine horizontale Leiste \u00fcber dem Main-Content */
body .topbar{
  position:fixed !important;
  top:0 !important;
  right:0 !important;
  left:var(--sidebar-w) !important;
  bottom:auto !important;
  width:auto !important;
  max-width:none !important;
  height:64px !important;
  padding:0 28px 0 28px !important;
  background:rgba(247,243,234,.92) !important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(20,35,58,.08);
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:10px !important;
  z-index:45 !important;
}

/* Main-Content nach unten schieben, damit Topbar nicht \u00fcberlappt */
.main{
  padding-top:64px !important;
}

/* Switcher-Pille jetzt auf hellem Grund \u2192 Navy-Text */
body .topbar #demoRoleSwitch.demo-role-switch{
  background:#0f1d3f !important;
  border-color:#0f1d3f !important;
  color:#fff !important;
}
body .topbar #demoRoleSwitch .demo-role-switch__select{
  color:#fff !important;
}

/* Sprachwahl: heller Grund */
body .topbar .lang-switch--topbar{
  background:rgba(20,35,58,.06) !important;
  border:1px solid rgba(20,35,58,.12) !important;
}
body .topbar .lang-switch--topbar button{
  color:rgba(20,35,58,.6) !important;
}
body .topbar .lang-switch--topbar button:hover{
  color:#0f1d3f !important;
  background:rgba(20,35,58,.08) !important;
}
body .topbar .lang-switch--topbar button.is-active{
  background:#caa26a !important;
  color:#0f1d3f !important;
}

/* Bell: hellgrau auf hellem Grund, konsistent */
body .topbar .bell{
  background:#fff !important;
  border:1px solid rgba(20,35,58,.12) !important;
  color:#0f1d3f !important;
}
body .topbar .bell__icon{
  color:#0f1d3f !important;
  filter:none !important;
}
body .topbar .bell:hover{
  border-color:#caa26a !important;
  background:#fff !important;
}
body .topbar .bell__count{ border-color:#fff !important; }

/* Bell-Panel absolut relativ zur Bell platzieren */
body .topbar .bell-panel{
  position:absolute !important;
  top:56px !important;
  right:20px !important;
}

/* User-Switch: identische H\u00f6he */
body .topbar .user-switch__btn{
  height:40px !important;
  border:1px solid rgba(20,35,58,.12) !important;
}

/* Mobile (< 780px): Topbar bleibt, aber kompakt */
@media (max-width:780px){
  body .topbar{
    left:0 !important;
    padding:0 14px !important;
    height:56px !important;
    gap:6px !important;
    flex-wrap:nowrap !important;
    overflow-x:auto;
  }
  .main{ padding-top:56px !important; }
  body .topbar .lang-switch--topbar button{ padding:3px 6px !important; font-size:10px !important; }
  body .topbar #demoRoleSwitch .demo-role-switch__select{ font-size:11px !important; min-width:0 !important; }
  body .topbar .user-switch__btn em{ display:none; }
  body .topbar .user-switch__btn strong{ font-size:12px !important; }
}

/* Burger darf nicht mit Topbar kollidieren */
@media (max-width:780px){
  .burger{ top:8px !important; left:8px !important; z-index:60 !important; }
}

/* ================================================== */
/* V2.4 — PLÄNE-GALERIE (Rieder Bach Dokumentation)    */
/* ================================================== */

.plans-source{
  margin: 14px 44px 8px; padding: 10px 14px;
  background: rgba(202,162,106,.08);
  border-left: 3px solid var(--gold);
  font-size: 13px; color: var(--navy);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
  max-width: 1100px;
}
.plans-source__label{
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--gold-dim); margin-right: 4px;
}
.plans-source strong{
  font-family: 'Cormorant Garamond', serif; font-size: 17px; font-weight: 600;
}
.plans-source__meta{ color: var(--text-soft); font-size: 12.5px; }

.plans-group{
  padding: 20px 44px 0; max-width: 1100px;
}
.plans-group__title{
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px; font-weight: 500;
  color: var(--navy);
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 6px; margin: 0 0 14px;
  letter-spacing: .01em;
}
.plans-gallery{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.plan-card{
  margin: 0;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  overflow: hidden;
  cursor: zoom-in;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  display: flex; flex-direction: column;
}
.plan-card:hover{
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(20,35,58,.12);
}
.plan-card img{
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  background: #fafaf8;
  display: block;
}
.plan-card figcaption{
  padding: 10px 14px 12px;
  display: flex; flex-direction: column; gap: 3px;
  font-size: 12.5px;
}
.plan-card figcaption strong{
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  font-weight: 500;
  color: var(--navy);
  line-height: 1.25;
}
.plan-card figcaption span{
  color: var(--text-soft);
  font-size: 12px;
}

.plans-history{
  margin: 24px 44px; max-width: 1100px;
  padding: 12px 16px;
  background: rgba(20,35,58,.03);
  border-radius: 8px;
}
.plans-history summary{
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--navy);
  list-style: none;
  letter-spacing: .02em;
}
.plans-history summary::-webkit-details-marker{ display: none; }
.plans-history summary::before{ content: "▸ "; color: var(--gold); }
.plans-history details[open] summary::before{ content: "▾ "; }
.plans-history ul{
  list-style: none; margin-top: 10px; padding: 0;
  font-size: 12.5px; color: var(--text-soft);
}
.plans-history li{
  padding: 5px 0;
  border-bottom: 1px dashed var(--line-soft);
}
.plans-history a{ color: var(--gold-dim); margin-left: 4px; }

/* Lightbox */
.plan-lightbox{
  position: fixed; inset: 0;
  background: rgba(20, 35, 58, 0.92);
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 32px;
  backdrop-filter: blur(4px);
  animation: planFade .18s ease-out;
}
.plan-lightbox[hidden]{ display: none; }
@keyframes planFade{ from{opacity:0} to{opacity:1} }
.plan-lightbox__inner{
  max-width: 92vw;
  max-height: 92vh;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.plan-lightbox__inner img{
  max-width: 100%;
  max-height: 82vh;
  object-fit: contain;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 12px 60px rgba(0,0,0,.5);
}
.plan-lightbox__caption{
  color: #f3e9d0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  text-align: center;
  padding: 0 20px;
}
.plan-lightbox__close{
  position: absolute; top: 18px; right: 22px;
  width: 44px; height: 44px;
  border: none;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 28px; line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  transition: background .15s;
}
.plan-lightbox__close:hover{ background: rgba(255,255,255,.22); }

@media (max-width: 780px){
  .plans-source, .plans-group, .plans-history{ padding-left: 20px; padding-right: 20px; }
  .plans-gallery{ grid-template-columns: 1fr; }
}

/* ================================================== */
/* V2.5 — FEATURED: Ihre Wohnung (B5 Penthouse)        */
/* ================================================== */
.plans-group--featured{
  background: linear-gradient(180deg, rgba(202,162,106,.08) 0%, rgba(202,162,106,.02) 100%);
  border: 1px solid rgba(202,162,106,.35);
  border-radius: 14px;
  padding: 22px 26px 26px !important;
  margin: 18px 44px 28px;
  max-width: 1100px;
  position: relative;
}
.plans-group--featured::before{
  content: "";
  position: absolute;
  top: 0; left: 0; height: 4px; width: 100%;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-dim) 100%);
  border-radius: 14px 14px 0 0;
}
.featured-head{ margin-bottom: 16px; }
.featured-eyebrow{
  display: inline-block;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--gold-dim);
  background: rgba(202,162,106,.15);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.featured-title{
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin: 0 0 6px !important;
  font-size: 28px !important;
  font-weight: 500;
}
.featured-lede{
  font-size: 14px;
  color: var(--text-soft);
  line-height: 1.5;
  margin: 0;
  max-width: 720px;
}
.plan-card--hero{
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  overflow: hidden;
  cursor: zoom-in;
  margin-bottom: 16px;
  transition: border-color .2s, box-shadow .2s;
}
.plan-card--hero:hover{
  border-color: var(--gold);
  box-shadow: 0 10px 30px rgba(20,35,58,.14);
}
.plan-card--hero img{
  width: 100%;
  max-height: 520px;
  object-fit: contain;
  background: #fafaf8;
  display: block;
  padding: 12px;
  aspect-ratio: auto;
}
.plan-card--hero figcaption{
  padding: 12px 18px 14px;
  border-top: 1px solid var(--line-soft);
  background: #fff;
}
.plan-card--hero figcaption strong{
  font-size: 18px;
}
.featured-facts{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}
.featured-fact{
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 10px 14px;
  display: flex; flex-direction: column; gap: 2px;
}
.featured-fact__label{
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--gold-dim);
  font-weight: 500;
}
.featured-fact strong{
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  color: var(--navy);
  font-weight: 500;
}
@media (max-width: 780px){
  .plans-group--featured{ margin-left: 20px; margin-right: 20px; padding: 16px 18px 20px !important; }
  .featured-title{ font-size: 22px !important; }
  .plan-card--hero img{ max-height: 380px; }
}

/* =========================================================
   V7 — Handwerker-Rolle (trade) · Kupfer #b85d2e
   ========================================================= */

/* Login-Hint Tag */
.login-hint__role-tag--trade{
  background: rgba(184,93,46,.25);
  color: #e8a680;
}

/* Avatar für einzelne Handwerker */
.avatar--trade{
  background: #b85d2e;
  color: #fff;
  border-color: rgba(255,255,255,.3);
}

/* Avatar für Gewerk-Gruppenchats (Gradient + Emoji-Icon) */
.avatar--trade-group{
  background: linear-gradient(135deg, #b85d2e 0%, #caa26a 100%);
  color: #fff;
  border-color: rgba(255,255,255,.35);
  font-size: 14px;
  font-weight: 600;
}

/* Rolebar-Farbton für trade */
body.role-trade .role-bar,
body.role-trade .rolebar{
  border-left-color: #b85d2e;
}

/* Role-Badge Kupfer-Ton (falls tone="copper" im Badge-System) */
.role-badge--copper,
.role-tag--trade{
  background: rgba(184,93,46,.15);
  color: #b85d2e;
  border-color: rgba(184,93,46,.3);
}

/* Sidebar-Gruppen-Header (dynamisch gerendert) */
.chat-list__group{
  margin-bottom: 8px;
}
.chat-list__group-head{
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,255,255,.45);
  font-weight: 600;
  padding: 10px 14px 6px;
}

/* =========================================================
   V8 — Käufer-Checkliste
   ========================================================= */
.ck-wrap{ display:flex; flex-direction:column; gap:28px; }
.ck-section{ }
.ck-section__title{
  font-family:'Cormorant Garamond', serif;
  font-size:22px; font-weight:500; color:#0f1d3f;
  margin:0 0 14px; display:flex; align-items:center; gap:10px;
}
.ck-count{
  display:inline-flex; align-items:center; justify-content:center;
  background:#0f1d3f; color:#fff; font-family:'Inter',sans-serif;
  font-size:12px; font-style:normal; font-weight:600;
  min-width:24px; height:24px; border-radius:12px; padding:0 8px;
}
.ck-section--done .ck-count{ background:#2e7d4f; }
.ck-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.ck-card{
  display:flex; gap:16px; padding:18px 20px;
  background:#fff; border:1px solid rgba(20,35,58,.12); border-radius:10px;
  transition:box-shadow .2s, border-color .2s;
}
.ck-card:hover{ box-shadow:0 4px 18px rgba(20,35,58,.08); border-color:rgba(202,162,106,.4); }
.ck-card--done{ opacity:.65; background:#fafaf7; }
.ck-card--done .ck-card__title{ text-decoration:line-through; color:#64748b; }
.ck-card__icon{
  flex-shrink:0; width:40px; height:40px; border-radius:8px;
  background:#f4f1e8; display:flex; align-items:center; justify-content:center;
  position:relative;
}
.ck-card__icon::before{ font-size:18px; color:#0f1d3f; }
.ck-card__icon--decision{ background:rgba(58,111,181,.1); }
.ck-card__icon--decision::before{ content:'◆'; color:#3a6fb5; }
.ck-card__icon--payment{ background:rgba(202,162,106,.15); }
.ck-card__icon--payment::before{ content:'⌘'; color:#caa26a; }
.ck-card__icon--event{ background:rgba(46,125,79,.1); }
.ck-card__icon--event::before{ content:'▥'; color:#2e7d4f; }
.ck-card__icon--document{ background:rgba(122,58,141,.1); }
.ck-card__icon--document::before{ content:'▤'; color:#7a3a8d; }
.ck-card__body{ flex:1; min-width:0; }
.ck-card__meta{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  font-size:11px; text-transform:uppercase; letter-spacing:.08em;
  margin-bottom:8px;
}
.ck-pill{
  padding:3px 9px; border-radius:12px; font-weight:600;
  background:rgba(20,35,58,.08); color:#0f1d3f;
}
.ck-pill--decision{ background:rgba(58,111,181,.12); color:#3a6fb5; }
.ck-pill--payment{ background:rgba(202,162,106,.18); color:#8b6d3f; }
.ck-pill--event{ background:rgba(46,125,79,.12); color:#2e7d4f; }
.ck-pill--document{ background:rgba(122,58,141,.12); color:#7a3a8d; }
.ck-due{ color:#64748b; letter-spacing:.04em; text-transform:none; font-size:12px; }
.ck-card__title{
  font-family:'Cormorant Garamond', serif;
  font-size:20px; font-weight:500; color:#0f1d3f;
  margin:0 0 4px; line-height:1.3;
}
.ck-card__sub{
  font-size:14px; color:#64748b; margin:0 0 14px;
}
.ck-card__actions{ display:flex; gap:10px; flex-wrap:wrap; }
.ck-card__actions .btn{ font-size:13px; padding:8px 14px; }
.ck-empty{
  padding:32px 20px; text-align:center; color:#64748b;
  background:#fafaf7; border-radius:10px; font-style:italic;
}

/* =========================================================
   V8 — Team-Cockpit
   ========================================================= */
.cp-wrap{ }
.cp-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(360px, 1fr));
  gap:20px;
}
.cp-tile{
  background:#fff; border:1px solid rgba(20,35,58,.12);
  border-radius:10px; padding:22px 24px;
}
.cp-tile__title{
  font-family:'Cormorant Garamond', serif;
  font-size:20px; font-weight:500; color:#0f1d3f;
  margin:0 0 16px; padding-bottom:10px;
  border-bottom:1px solid rgba(20,35,58,.08);
}
.cp-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.cp-item{
  display:flex; gap:14px; align-items:flex-start;
  padding:10px 0; border-bottom:1px solid rgba(20,35,58,.05);
}
.cp-item:last-child{ border-bottom:0; padding-bottom:0; }
.cp-item__date{
  flex-shrink:0; font-family:'Inter',sans-serif;
  font-size:12px; color:#64748b; font-weight:600;
  width:90px; letter-spacing:.02em;
  padding-top:2px;
}
.cp-item__main{ flex:1; min-width:0; }
.cp-item__main strong{
  display:block; font-family:'Inter',sans-serif;
  font-size:14px; color:#0f1d3f; font-weight:500;
  line-height:1.4; margin-bottom:3px;
}
.cp-item__meta{
  display:block; font-size:12px; color:#64748b;
}
.cp-dl{ flex-shrink:0; font-size:12px; padding:6px 10px; }

/* Nav-Item "Intern" Badge */
.nav__item--internal .badge--internal{
  background:rgba(202,162,106,.22);
  color:#8b6d3f;
  font-size:9px; text-transform:uppercase;
  padding:2px 6px; border-radius:8px; letter-spacing:.06em;
  margin-left:6px; font-style:normal; font-weight:600;
}

/* Mobile Anpassung */
@media (max-width: 640px){
  .ck-card{ flex-direction:column; gap:10px; padding:16px; }
  .ck-card__icon{ width:36px; height:36px; }
  .ck-card__actions{ flex-direction:column; }
  .ck-card__actions .btn{ width:100%; text-align:center; }
  .cp-grid{ grid-template-columns:1fr; }
  .cp-item{ flex-wrap:wrap; }
  .cp-item__date{ width:auto; flex-basis:100%; }
}

/* V8.2: Bauleitung-only Bereiche (nur owner + management sehen Upload) */
body.role-buyer .bl-only,
body.role-architect .bl-only,
body.role-notary .bl-only,
body.role-prospect .bl-only,
body.role-trade .bl-only{
  display:none !important;
}

/* ============================================================
   V8.3 · Käufer-UX Bereinigung
   ============================================================ */

/* Cockpit-Strip (C7): 7-Tage-Übersicht */
.cockpit-strip{
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-2) 100%);
  border:1px solid rgba(202,162,106,.3);
  border-radius:14px;
  padding:18px 24px;
  margin:20px 0 18px;
  color:var(--ivory);
}
.cockpit-strip__eyebrow{
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);font-weight:600;margin-bottom:12px;
}
.cockpit-strip__items{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
}
.cockpit-strip__item{
  display:flex;flex-direction:column;align-items:flex-start;
  padding:12px 16px;border-radius:10px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(202,162,106,.18);
  text-decoration:none;transition:.18s;
  cursor:pointer;
}
.cockpit-strip__item:hover{
  background:rgba(202,162,106,.12);
  border-color:var(--gold);
  transform:translateY(-1px);
}
.cockpit-strip__num{
  font-family:'Cormorant Garamond',serif;
  font-size:34px;font-weight:600;color:var(--gold);
  line-height:1;margin-bottom:4px;
}
.cockpit-strip__lbl{
  font-size:12px;letter-spacing:.08em;color:var(--ivory-dim);
}

/* Contact-Strip (B4): Ansprechpartner oben */
.contact-strip{
  display:flex;align-items:center;gap:20px;
  background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:18px 24px;margin:0 0 22px;
  box-shadow:0 2px 8px rgba(15,29,63,.05);
}
.contact-strip__avatar{
  width:56px;height:56px;border-radius:50%;
  background:var(--navy);color:var(--ivory);
  display:flex;align-items:center;justify-content:center;
  font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:600;
  flex-shrink:0;letter-spacing:.04em;
}
.contact-strip__body{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.contact-strip__eyebrow{
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);font-weight:600;
}
.contact-strip__body strong{
  font-family:'Cormorant Garamond',serif;
  font-size:22px;color:var(--navy);font-weight:600;
}
.contact-strip__role{font-size:12.5px;color:#6b7280}
.contact-strip__actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.contact-strip__btn{
  padding:8px 14px;border-radius:8px;
  border:1px solid var(--line);background:var(--paper);
  color:var(--navy);font-size:13px;text-decoration:none;
  transition:.15s;white-space:nowrap;
}
.contact-strip__btn:hover{border-color:var(--gold);background:#fff}
.contact-strip__btn--gold{
  background:var(--gold);border-color:var(--gold);color:var(--navy);font-weight:600;
}
.contact-strip__btn--gold:hover{background:var(--gold-dim);border-color:var(--gold-dim)}

/* Mini-Kontakte */
.mini-contacts{list-style:none;padding:0;margin:8px 0 0}
.mini-contacts li{
  display:flex;flex-wrap:wrap;gap:8px 12px;align-items:baseline;
  padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px;
}
.mini-contacts li:last-child{border-bottom:0}
.mini-contacts li strong{color:var(--navy)}
.mini-contacts li .muted{color:#6b7280;font-size:12.5px;flex:1;min-width:120px}
.mini-contacts li a{color:var(--navy);text-decoration:none;font-size:13px}
.mini-contacts li a:hover{color:var(--gold)}

/* B5: Deadline-Farben für Sonderwünsche */
.deadline-warn{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 10px;border-radius:999px;
  font-size:11.5px;font-weight:600;letter-spacing:.04em;
}
.deadline-warn--red{background:#fee2e2;color:#991b1b;border:1px solid #fca5a5}
.deadline-warn--amber{background:#fef3c7;color:#92400e;border:1px solid #fcd34d}
.deadline-warn--green{background:#d1fae5;color:#065f46;border:1px solid #6ee7b7}
.deadline-warn::before{content:"●";font-size:9px}

/* Dash-Todo mit Deadline-Farbe erweitern */
.dash-todo--urgent .dash-todo__deadline{
  background:#fee2e2;color:#991b1b;
  padding:2px 8px;border-radius:6px;font-weight:600;
}
.dash-todo--soon .dash-todo__deadline{
  background:#fef3c7;color:#92400e;
  padding:2px 8px;border-radius:6px;font-weight:600;
}

/* Mobile Responsive (C6: Kacheln auf mobil nach oben, Einladungen runter) */
@media (max-width:860px){
  .cockpit-strip{padding:14px 16px;margin:14px 0}
  .cockpit-strip__items{grid-template-columns:repeat(2,1fr);gap:8px}
  .cockpit-strip__item{padding:10px 12px}
  .cockpit-strip__num{font-size:26px}

  .contact-strip{flex-direction:column;align-items:flex-start;padding:16px;gap:12px}
  .contact-strip__actions{width:100%;justify-content:flex-start}
  .contact-strip__btn{flex:1;min-width:0;text-align:center;font-size:12px;padding:8px 10px}

  /* Mobile: Hauptkacheln (61 %, Kaufpreis, Bezahlt, Termin) vor Dashboard */
  #uebersicht .cards{order:-1}
  #uebersicht .dashboard{display:flex;flex-direction:column}
  #uebersicht .dash-col:nth-child(1){order:2}
  #uebersicht .dash-col:nth-child(2){order:1}
  #uebersicht .dash-card--invites{order:5}
  #uebersicht .dash-card--build{order:1}
  #uebersicht .dash-card--cal{order:2}
  #uebersicht .dash-card--todo{order:3}
  #uebersicht .dash-card--chat{order:4}
}

/* Sonderwünsche: Deadline-Karten-Rahmen */
.option-card--urgent{
  border-left:3px solid #dc2626;
  box-shadow:0 2px 8px rgba(220,38,38,.08);
}
.option-card--soon{
  border-left:3px solid #f59e0b;
}
.option-card--ok{
  border-left:3px solid transparent;
}
.option-card .deadline-chip{
  display:inline-flex;align-items:center;gap:6px;
  margin:8px 0 10px;
}

/* ========================================================================
   V8.4 · Käufer-Features
   ======================================================================== */

/* C1 · Zahlungshistorie */
.pay-history{
  display:flex;flex-direction:column;gap:10px;margin-top:8px;
}
.pay-history__item{
  display:grid;
  grid-template-columns:92px 1fr auto auto;
  gap:14px;align-items:center;
  padding:12px 14px;
  background:#f8faf7;
  border:1px solid #e6ebe2;
  border-left:3px solid #2f7d32;
  border-radius:10px;
}
.pay-history__date{
  display:flex;flex-direction:column;line-height:1.2;
  font-size:12px;color:#4b5563;
}
.pay-history__date strong{color:#0f1d3f;font-size:13px;}
.pay-history__body{display:flex;flex-direction:column;gap:2px;}
.pay-history__body strong{color:#0f1d3f;}
.pay-history__body small{color:#6b7280;font-size:12px;}
.pay-history__amount{
  font-variant-numeric:tabular-nums;
  font-weight:600;color:#0f1d3f;white-space:nowrap;
}
.pay-history__actions{display:flex;gap:6px;}
.pay-history__sum{
  display:grid;
  grid-template-columns:92px 1fr auto auto;
  gap:14px;align-items:center;
  padding:12px 14px;
  background:#0f1d3f;color:#fff;
  border-radius:10px;margin-top:4px;
}
.pay-history__sum strong{color:#fff;}
.pay-history__sum small{color:rgba(255,255,255,.75);font-size:12px;}
.pay-history__sum .pay-history__amount{color:#fff;}

.btn--small{
  padding:5px 9px;font-size:12px;line-height:1;border-radius:7px;
}

@media (max-width:640px){
  .pay-history__item,
  .pay-history__sum{
    grid-template-columns:1fr auto;
    grid-template-areas:
      "date amount"
      "body body"
      "actions actions";
    gap:8px;
  }
  .pay-history__date{grid-area:date;}
  .pay-history__amount{grid-area:amount;text-align:right;}
  .pay-history__body{grid-area:body;}
  .pay-history__actions{grid-area:actions;}
}

/* C4/C5 · Dokumente Tabs + Pin + Upload */
.docs-tabs{
  display:flex;gap:4px;margin:4px 0 12px;
  border-bottom:1px solid #e5e7eb;
  flex-wrap:wrap;
}
.docs-tab{
  appearance:none;background:transparent;border:0;
  padding:10px 14px;cursor:pointer;
  font:inherit;color:#4b5563;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  display:inline-flex;align-items:center;gap:6px;
  transition:color .15s, border-color .15s;
}
.docs-tab:hover{color:#0f1d3f;}
.docs-tab.is-active{
  color:#0f1d3f;font-weight:600;
  border-bottom-color:#c9a441;
}
.docs-tab__count{
  font-style:normal;font-size:11px;
  background:#eef1ec;color:#4b5563;
  padding:1px 7px;border-radius:10px;
  font-weight:600;
}
.docs-tab.is-active .docs-tab__count{background:#c9a441;color:#fff;}
.docs-pane[hidden],
[data-docs-pane][hidden]{display:none !important;}

/* Pin-Button */
.doc__pin{
  appearance:none;background:transparent;border:0;
  font-size:18px;line-height:1;cursor:pointer;
  color:#c9a441;padding:2px 4px;margin-right:2px;
  transition:transform .15s;
}
.doc__pin:hover{transform:scale(1.15);}
.doc__pin.is-pinned{color:#c9a441;}
.doc__pin[aria-pressed="true"]{color:#c9a441;}

/* Docs-Liste (pinned/own) leer-State */
.docs-pane__empty{
  padding:20px;text-align:center;color:#6b7280;
  font-size:14px;background:#fafafa;border:1px dashed #e5e7eb;
  border-radius:10px;
}
.docs-pane__intro{
  margin:0 0 10px;color:#4b5563;font-size:14px;
}

/* Upload */
.docs-upload{margin-bottom:14px;}
.docs-upload__head{margin-bottom:10px;}
.docs-upload__head h3{margin:0 0 2px;font-size:16px;color:#0f1d3f;}
.docs-upload__head p{margin:0;color:#6b7280;font-size:13px;}
.docs-upload__drop{
  display:flex;flex-direction:column;align-items:center;
  gap:6px;padding:22px 16px;
  border:2px dashed #cbd5c4;border-radius:12px;
  background:#f8faf7;cursor:pointer;
  transition:border-color .15s, background .15s;
  text-align:center;
}
.docs-upload__drop:hover,
.docs-upload__drop.is-drag{
  border-color:#c9a441;background:#fdf7e6;
}
.docs-upload__icon{
  font-size:26px;color:#c9a441;line-height:1;
}
.docs-upload__text{color:#0f1d3f;font-weight:500;font-size:14px;}
.docs-upload__hint{font-size:12px;}

/* Eigene Uploads */
.docs--own .doc__ico{color:#6b7280;}
.doc__share,
.doc__delete{
  appearance:none;background:transparent;border:1px solid #e5e7eb;
  padding:4px 8px;border-radius:6px;cursor:pointer;font-size:12px;
  color:#4b5563;margin-left:4px;
}
.doc__share:hover{border-color:#0f1d3f;color:#0f1d3f;}
.doc__delete:hover{border-color:#dc2626;color:#dc2626;}
.doc__badge{
  display:inline-block;padding:1px 7px;border-radius:10px;
  font-size:11px;font-weight:600;margin-left:6px;
}
.doc__badge--private{background:#eef1ec;color:#4b5563;}
.doc__badge--shared{background:#fdf7e6;color:#a07d10;}

/* C3 · Ask-FAB + Bottom-Sheet */
.ask-fab{
  position:fixed;right:20px;bottom:20px;z-index:2400;
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 18px;border-radius:999px;border:0;
  background:#0f1d3f;color:#fff;cursor:pointer;
  box-shadow:0 6px 20px rgba(15,29,63,.28);
  font:inherit;font-weight:600;
  transition:transform .15s, box-shadow .15s;
}
.ask-fab:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(15,29,63,.35);}
.ask-fab__icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;
  background:#c9a441;color:#0f1d3f;font-weight:700;font-size:14px;
}
.ask-fab[hidden]{display:none;}

.ask-sheet{
  position:fixed;inset:0;z-index:2500;
  display:flex;align-items:flex-end;justify-content:center;
}
.ask-sheet[hidden]{display:none;}
.ask-sheet__back{
  position:absolute;inset:0;background:rgba(15,29,63,.35);
  backdrop-filter:blur(2px);
}
.ask-sheet__panel{
  position:relative;z-index:1;
  width:min(560px,100%);
  background:#fff;border-radius:16px 16px 0 0;
  padding:18px 20px 20px;
  box-shadow:0 -10px 30px rgba(0,0,0,.18);
  display:flex;flex-direction:column;gap:12px;
  animation:ask-slide-up .22s ease-out;
}
@keyframes ask-slide-up{
  from{transform:translateY(20px);opacity:.6;}
  to{transform:translateY(0);opacity:1;}
}
.ask-sheet__head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.ask-sheet__head h3{margin:0;color:#0f1d3f;font-size:17px;}
.ask-sheet__close{
  appearance:none;background:transparent;border:0;
  font-size:24px;line-height:1;cursor:pointer;color:#6b7280;
  padding:2px 6px;
}
.ask-sheet__close:hover{color:#0f1d3f;}
.ask-sheet__ctx{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:8px 12px;background:#f8faf7;border:1px solid #e6ebe2;
  border-radius:8px;font-size:13px;
}
.ask-sheet__ctx-lbl{color:#6b7280;text-transform:uppercase;
  font-size:11px;letter-spacing:.5px;}
.ask-sheet__ctx strong{color:#0f1d3f;}
.ask-sheet__to{
  display:flex;flex-direction:column;gap:4px;font-size:13px;color:#4b5563;
}
.ask-sheet__to select{
  padding:8px 10px;border:1px solid #cbd5c4;border-radius:8px;
  font:inherit;background:#fff;
}
#ask-sheet-text{
  width:100%;padding:10px 12px;
  border:1px solid #cbd5c4;border-radius:8px;
  font:inherit;resize:vertical;min-height:110px;
}
.ask-sheet__foot{
  display:flex;justify-content:flex-end;gap:8px;margin-top:4px;
}

@media (min-width:768px){
  .ask-sheet{align-items:center;}
  .ask-sheet__panel{border-radius:16px;}
}
@media (max-width:640px){
  .ask-fab{right:14px;bottom:14px;padding:11px 14px;}
  .ask-fab__lbl{display:none;}
}

/* ============================================================
   V8.5 — BONARIA-WAPPEN (Crest) in Sidebar + Login
   Basierend auf Original-Visitenkarte (23.04.2026):
   – Glockenform mit 3 Zinnen oben, horizontale Linien
   ============================================================ */
.brand-bonaria__crest{
  display:block;
  width:58px;
  height:auto;
  color:#ffffff;
  margin:0 auto 8px;
  opacity:.95;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.25));
}
.brand-bonaria--sidebar{ align-items:center; text-align:center; }
.brand-bonaria--sidebar .brand-bonaria__since{ align-self:center; }
.brand-bonaria--login{ align-items:center; text-align:center; }
.brand-bonaria--login .brand-bonaria__since{ align-self:center; }
.brand-bonaria--login .brand-bonaria__crest{
  width:74px;
  height:auto;
  color:#0f1d3f;
  margin:0 auto 10px;
  opacity:1;
}

/* Login: Bona Vita Emblem auf hellem Plate – Navy, zentriert */
.brand-project--login{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:6px;
  margin-top:4px;
}
.brand-project--login .brand-project__logo{
  display:block;
  width:112px;                 /* grösser als Bonaria = Hauptsubjekt */
  height:auto;
  margin:0 auto;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.08));
}
.brand-project--login .brand-project__sub{
  font-family:'Cormorant Garamond', serif;
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#3a4a6a;
}
.brand-project--login .brand-project__sub sup{
  font-size:.7em;              /* ® deutlich sichtbar */
  vertical-align:super;
  color:#caa26a;               /* Gold = Qualitätszeichen */
  font-weight:500;
  margin-left:1px;
}

/* ============================================================
   V8.5.1 — OFFIZIELLES BONARIA-LOGO (Wappen, aus Original-PNG)
   – gleiche Grösse wie Bona Vita Chalets Logo für visuelle Gleichwertigkeit
   – "Since 1916" separat als Text darunter (nie übersetzen)
   ============================================================ */
.brand-bonaria__official{
  display:block;
  width:108px;                 /* = gleich wie Bona Vita Logo Desktop */
  height:auto;
  max-width:100%;
  margin:0 auto 4px;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.25));
}
.brand-bonaria--sidebar{ align-items:center; text-align:center; }
.brand-bonaria--sidebar .brand-bonaria__since{ align-self:center; }
.brand-bonaria--login{ align-items:center; text-align:center; }
.brand-bonaria--login .brand-bonaria__since{ align-self:center; }
.brand-bonaria--login .brand-bonaria__official{
  width:132px;                 /* etwas grösser im Login (Hero-Moment) */
  filter:none;
}
/* Mobile: parallel zu Bona Vita Logo auf 88 px */
@media (max-width:780px){
  .brand-bonaria__official{ width:88px; }
}

/* ---------------------------------------------------------------
   NAV: Zweizeiliger Tresor-Eintrag (Tresor / My Secrets)
   --------------------------------------------------------------- */
.nav__item--two-line{
  align-items:flex-start;
  padding-top:8px;
  padding-bottom:8px;
}
.nav__item--two-line .nav__icon{
  margin-top:2px;
}
.nav__item--two-line .nav__text{
  display:flex;
  flex-direction:column;
  line-height:1.15;
  gap:2px;
}
.nav__item--two-line .nav__label{
  font-weight:600;
}
.nav__item--two-line .nav__sub{
  font-size:11px;
  letter-spacing:.04em;
  color:rgba(202,162,106,.78);
  font-weight:500;
  text-transform:none;
  font-style:italic;
}
.nav__item--two-line:hover .nav__sub{
  color:rgba(202,162,106,1);
}
.nav__item--two-line.is-active .nav__sub{
  color:var(--gold);
}

/* =============================================================
   Eskalations-Badge im Chat (Schritt 5)
   ============================================================= */
.chat-msg__escalation{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:6px;
  padding:4px 10px;
  border-radius:999px;
  font-family:'Inter',sans-serif;
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.02em;
  line-height:1.4;
  max-width:100%;
  white-space:normal;
  word-break:break-word;
}
.chat-msg__escalation-dot{
  flex:0 0 auto;
  width:7px;height:7px;border-radius:50%;
  background:currentColor;
  box-shadow:0 0 0 3px color-mix(in srgb, currentColor 22%, transparent);
}
.chat-msg__escalation--active{
  background:rgba(184,148,90,.12);
  color:#8a6a3a;
  border:1px solid rgba(184,148,90,.28);
}
.chat-msg__escalation--quiet{
  background:rgba(15,29,63,.08);
  color:#0f1d3f;
  border:1px solid rgba(15,29,63,.18);
  font-style:italic;
}
.chat-msg__escalation--urgent{
  background:rgba(184,58,58,.14);
  color:#8a2a2a;
  border:1px solid rgba(184,58,58,.35);
  font-weight:600;
}
.chat-msg__escalation--final{
  background:rgba(45,122,79,.10);
  color:#1f5a3b;
  border:1px solid rgba(45,122,79,.25);
}
.chat-msg__escalation--done{
  background:rgba(45,122,79,.15);
  color:#1f5a3b;
  border:1px solid rgba(45,122,79,.3);
}
/* Pulse für aktive und urgent — dezent */
.chat-msg__escalation--active .chat-msg__escalation-dot,
.chat-msg__escalation--urgent .chat-msg__escalation-dot{
  animation:escPulse 2s ease-in-out infinite;
}
@keyframes escPulse{
  0%,100%{box-shadow:0 0 0 3px color-mix(in srgb, currentColor 22%, transparent)}
  50%    {box-shadow:0 0 0 6px color-mix(in srgb, currentColor 6%, transparent)}
}

/* =============================================================
   Eskalations-Regeln-Box im Chat (Schritt 5)
   ============================================================= */
.esc-rules{
  margin:0 0 20px;
  background:linear-gradient(180deg,#fbf8f1 0%,#f5efe3 100%);
  border:1px solid #e6dcc8;
  border-radius:14px;
  box-shadow:0 1px 0 rgba(0,0,0,.02), inset 0 1px 0 rgba(255,255,255,.6);
  overflow:hidden;
}
.esc-rules__summary{
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  font-family:'Inter',sans-serif;
  font-size:13px;
  font-weight:600;
  color:#0f1d3f;
  list-style:none;
  user-select:none;
}
.esc-rules__summary::-webkit-details-marker{display:none}
.esc-rules__icon{
  display:inline-flex;
  align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;
  background:#0f1d3f;color:#e4c287;
  font-size:13px;
  flex:0 0 auto;
}
.esc-rules__title{flex:1}
.esc-rules__chev{
  color:#b8945a;
  font-size:18px;
  transition:transform .2s ease;
  display:inline-block;
}
.esc-rules[open] .esc-rules__chev{transform:rotate(90deg)}
.esc-rules__body{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  padding:0 16px 16px;
  border-top:1px solid #ebe1cc;
  padding-top:14px;
}
.esc-rules__col{
  background:#fff;
  border:1px solid #ece3d1;
  border-radius:10px;
  padding:12px 14px;
}
.esc-rules__col h4{
  margin:0 0 6px;
  font-family:'Cormorant Garamond',serif;
  font-size:15px;
  color:#0f1d3f;
  letter-spacing:.01em;
}
.esc-rules__col p{
  margin:0;
  font-family:'Inter',sans-serif;
  font-size:12px;
  line-height:1.55;
  color:#4a4236;
}
.esc-rules__col strong{color:#0f1d3f;font-weight:600}
.esc-rules__col--urgent{
  background:linear-gradient(180deg,#fff5f3 0%,#fbe8e5 100%);
  border-color:#e5bfb8;
}
.esc-rules__col--urgent h4{color:#8a2a2a}

@media (max-width:900px){
  .esc-rules__body{grid-template-columns:1fr}
}