:root{
  --ink:#0F1B2B;--forest:#18352F;--brass:#B68A3D;--paper:#F7F4EE;--sand:#E8E0D3;
  --stone:#B3AA9C;--graphite:#5B6573;--charcoal:#1F252D;--success:#2F7A63;
  --warning:#936516;--error:#9E3F39;--bg:#F7F4EE;--surface:#FFFFFF;--surface2:#F3EFE7;
  --text:#1F252D;--muted:#6B7280;--border:#DDD7CD;--nav:#0F1B2B;--navtext:#F3EFE7;
  --shadow:0 6px 22px rgba(15,27,43,.07);--r:12px;
}
[data-theme="dark"]{
  --bg:#0B1220;--surface:#101A2B;--surface2:#152338;--text:#F3EFE7;--muted:#9AA5B4;
  --border:#263448;--nav:#08101C;--navtext:#F3EFE7;--brass:#D4AD63;--shadow:none;
  --success:#60B991;--warning:#D3A04D;--error:#D96D66;
}
/* Dark mode: light-surface pastel badges/icons read as stickers on black —
   swap for tinted-on-dark fills using the same brand hues (§ dark tokens). */
[data-theme="dark"] .chip.new,[data-theme="dark"] .kpi-amber .kpi-icon,[data-theme="dark"] .section-dot.amber,[data-theme="dark"] .mobile-kpi-icon.amber{background:rgba(211,160,77,.16);color:#E3B567}
[data-theme="dark"] .chip.amber{background:rgba(211,160,77,.16);color:#E3B567}
[data-theme="dark"] .chip.ai{background:rgba(154,124,214,.18);color:#BBA8EE}
[data-theme="dark"] .chip.green,[data-theme="dark"] .kpi-green .kpi-icon,[data-theme="dark"] .mobile-kpi-icon.green{background:rgba(96,185,145,.16);color:#7DCBA6}
[data-theme="dark"] .chip.blue,[data-theme="dark"] .kpi-blue .kpi-icon,[data-theme="dark"] .section-dot.blue,[data-theme="dark"] .mobile-kpi-icon.blue{background:rgba(122,164,224,.16);color:#9CBEEE}
[data-theme="dark"] .chip.teal,[data-theme="dark"] .kpi-teal .kpi-icon{background:rgba(66,168,158,.2);color:#7FD1C4}
[data-theme="dark"] .chip.copper{background:rgba(196,138,88,.2);color:#DDAB80}
[data-theme="dark"] .chip.red,[data-theme="dark"] .kpi-red .kpi-icon,[data-theme="dark"] .section-dot.red,[data-theme="dark"] .mobile-kpi-icon.red{background:rgba(217,109,102,.16);color:#E4948F}
[data-theme="dark"] .kpi-red strong,[data-theme="dark"] .kpi-red .kpi-link{color:#E4948F}
[data-theme="dark"] .kpi{background:linear-gradient(165deg,rgba(var(--accent),.13),transparent 60%) ,var(--surface)}
[data-theme="dark"] .kpi-icon{box-shadow:inset 0 0 0 1px rgba(var(--accent),.28)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Schibsted Grotesk",system-ui,-apple-system,Segoe UI,sans-serif}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
.app{display:grid;grid-template-columns:232px 1fr;min-height:100vh}
.sidebar{background:var(--nav);color:var(--navtext);padding:18px 14px;display:flex;flex-direction:column;position:sticky;top:0;min-height:100vh;align-self:stretch}
.logo{height:32px;object-fit:contain;object-position:left center;margin:2px 8px 24px;max-width:150px}
.nav{display:flex;flex-direction:column;gap:4px}
.nav button{background:transparent;border:0;color:#D7DCE3;text-align:left;padding:10px 12px;border-radius:9px;display:flex;align-items:center;gap:10px}
.nav button.active{background:rgba(182,138,61,.18);color:white;box-shadow:inset 3px 0 0 var(--brass)}
.nav button:hover{background:rgba(255,255,255,.07)}
.nav .sub{padding-left:30px;font-size:13px}
.sidebar-footer{margin-top:auto;padding:12px;color:#9DA7B5;font-size:12px;line-height:1.45}
.shell{min-width:0}
.topbar{height:64px;display:grid;grid-template-columns:minmax(240px,520px) 1fr auto;gap:16px;align-items:center;padding:0 24px;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--surface) 92%,transparent);position:sticky;top:0;z-index:20;backdrop-filter:blur(10px)}
.search{height:38px;border:1px solid var(--border);border-radius:9px;background:var(--surface2);padding:0 12px;color:var(--text);width:100%}
.top-actions{display:flex;align-items:center;gap:8px}
.btn{height:38px;border-radius:9px;border:1px solid var(--border);padding:0 13px;background:var(--surface);color:var(--text)}
.btn.primary{background:var(--brass);border-color:var(--brass);color:#fff;font-weight:650}
.btn.ghost{background:transparent}
.lang,.segmented{display:inline-flex;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--surface)}
.lang button,.segmented button{height:32px;border:0;background:transparent;color:var(--muted);padding:0 9px}
.lang button.active,.segmented button.active{background:var(--surface2);color:var(--text);font-weight:650}
.page{display:none;padding:24px;max-width:1680px;margin:0 auto}
.page.active{display:block}
.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:20px}
.today-meta{text-align:right;max-width:280px}
.today-date{font-size:14px;font-weight:650;color:var(--text)}
.today-quote{font-family:Newsreader,Georgia,serif;font-style:italic;color:var(--muted);font-size:14px;line-height:1.4;margin-top:6px}
.icon-btn{position:relative;font-size:15px}
.notif-dot{position:absolute;top:6px;right:7px;width:7px;height:7px;border-radius:50%;background:var(--error);border:1.5px solid var(--surface)}
.user-chip{display:flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;border:1px solid var(--border);border-radius:999px;background:var(--surface)}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700}
.user-meta{display:flex;flex-direction:column;line-height:1.25}
.user-meta b{font-size:12px}
.user-meta small{font-size:12px;color:var(--muted)}
h1,h2,h3,h4{margin:0;font-family:Newsreader,Georgia,serif;color:var(--text);font-weight:600}
h1{font-size:40px;line-height:48px}
h2{font-size:28px;line-height:36px}
h3{font-size:22px;line-height:30px}
h4{font-size:18px;line-height:26px}
.page-head h1{font-size:44px;line-height:1.05}
.eyebrow{font-size:12px;line-height:18px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:650}
.muted{color:var(--muted)}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow)}
.kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:18px}
.kpi{padding:18px;position:relative;overflow:hidden;border-top-width:2px;background:linear-gradient(165deg,rgba(var(--accent),.06),transparent 55%) ,var(--surface)}
.kpi .kpi-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;font-size:19px;line-height:1;margin-bottom:14px;box-shadow:inset 0 0 0 1px rgba(var(--accent),.16)}
.kpi strong{font-size:32px;line-height:1.25;display:block;margin-bottom:6px;font-variant-numeric:tabular-nums;font-family:Newsreader,Georgia,serif;font-weight:600}
.kpi span{font-size:13px;color:var(--muted);display:block}
.kpi-link{display:block;margin-top:8px;font-size:12px;font-weight:650;color:var(--muted);text-decoration:none}
.kpi-red{--accent:217,109,102;border-top-color:rgba(var(--accent),.55)}
.kpi-blue{--accent:122,164,224;border-top-color:rgba(var(--accent),.55)}
.kpi-green{--accent:96,185,145;border-top-color:rgba(var(--accent),.55)}
.kpi-amber{--accent:211,160,77;border-top-color:rgba(var(--accent),.55)}
.kpi-teal{--accent:66,168,158;border-top-color:rgba(var(--accent),.55)}
.kpi-red .kpi-icon{background:#FCE7E5;color:#973B36}
.kpi-red strong,.kpi-red .kpi-link{color:#973B36}
.kpi-blue .kpi-icon{background:#E5EFFC;color:#315E9B}
.kpi-green .kpi-icon{background:#E4F3EC;color:#25664F}
.kpi-amber .kpi-icon{background:#FFF0D0;color:#8A5D10}
.kpi-teal .kpi-icon{background:#DFF3F1;color:#1D6B65}
.grid-8-4{display:grid;grid-template-columns:2fr 1fr;gap:16px}
.section-card{padding:16px}
.section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.task{display:grid;grid-template-columns:24px 60px 1fr auto;gap:10px;align-items:center;padding:14px 0;border-top:1px solid var(--border);font-size:14px}
.task:first-of-type{border-top:0}
.task input{accent-color:var(--brass)}
.task .entity{font-weight:650}
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 8px;font-size:12px;font-weight:650;border:1px solid transparent;white-space:nowrap}
.chip.new{background:#FFF3D9;color:#78540E}
.chip.ai{background:#F0E9FF;color:#6545A4}
.chip.green{background:#E4F3EC;color:#25664F}
.chip.blue{background:#E5EFFC;color:#315E9B}
.chip.teal{background:#DFF3F1;color:#1D6B65}
.chip.amber{background:#FFF0D0;color:#8A5D10}
.chip.copper{background:#F7E6D8;color:#92592F}
.chip.red{background:#FCE7E5;color:#973B36}
.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.quick-grid button{padding:12px;border:1px solid var(--border);border-radius:9px;background:var(--surface2);color:var(--text);text-align:left;font-size:13px;display:flex;justify-content:space-between;align-items:center;gap:6px}
.quick-grid button b{font-family:Newsreader,Georgia,serif;font-weight:600;color:var(--brass)}
.activity-bars{height:64px;display:flex;gap:4px;align-items:end;padding-top:8px}
.activity-bars i{display:block;flex:1;background:color-mix(in srgb,var(--brass) 38%,var(--surface));border-radius:3px 3px 0 0}

.section-title h2{display:flex;align-items:center;gap:8px;font-size:18px;line-height:1.3}
.section-dot{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;font-size:12px;flex-shrink:0}
.section-dot.red{background:#FCE7E5;color:#973B36}
.section-dot.blue{background:#E5EFFC;color:#315E9B}
.section-dot.amber{background:#FFF0D0;color:#8A5D10}
.row-list{display:flex;flex-direction:column}
.row-item{display:grid;grid-template-columns:150px 1fr 1fr auto auto;gap:12px;align-items:center;padding:14px 0;border-top:1px solid var(--border);font-size:13px}
.row-item:first-child{border-top:0}
.row-item b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-item .muted{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-item .chip{white-space:nowrap;justify-self:start}
.row-item.compact{grid-template-columns:1fr auto}
.row-item.compact b{font-size:13px}
.btn.sm{height:30px;padding:0 11px;font-size:12px;white-space:nowrap}
.btn.icon{width:30px;padding:0;display:grid;place-items:center}

.agenda{display:flex;flex-direction:column}
.agenda-row{display:grid;grid-template-columns:44px 10px 1fr;gap:10px;align-items:start;padding:9px 0;border-top:1px solid var(--border);font-size:13px}
.agenda-row:first-child{border-top:0}
.agenda-time{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;padding-top:2px}
.agenda-dot{width:8px;height:8px;border-radius:50%;background:var(--stone);margin-top:6px}
.agenda-dot.active{background:var(--brass)}
.agenda-row b{font-size:13px}

.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stat-row div{display:flex;flex-direction:column;gap:2px}
.stat-row strong{font-family:Newsreader,Georgia,serif;font-weight:600;font-size:22px;font-variant-numeric:tabular-nums}
.stat-row span{font-size:12px;color:var(--muted)}
.stat-row small.up{color:var(--success);font-size:12px;font-weight:650}

.inbox-layout{display:grid;grid-template-columns:290px minmax(420px,1fr) 330px;gap:14px;min-height:680px}
.thread-list,.mail,.context{padding:14px}
.filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.filter{border:1px solid var(--border);border-radius:999px;background:var(--surface2);padding:6px 9px;font-size:12px;color:var(--muted)}
.filter.active{border-color:var(--brass);color:var(--brass)}
.thread{padding:12px 8px;border-top:1px solid var(--border);cursor:pointer}
.thread.active{background:var(--surface2);border-radius:8px}
.thread b{font-size:13px}
.thread small{display:block;color:var(--muted);margin-top:4px}
.mail-message{padding:16px 0;border-top:1px solid var(--border);line-height:1.55;font-size:14px}
.ai-card{border:1px solid color-mix(in srgb,#7A55B6 35%,var(--border));background:color-mix(in srgb,#F3ECFF 64%,var(--surface));border-radius:12px;padding:14px;margin-top:14px}
[data-theme="dark"] .ai-card{background:#17152A}
.ai-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.ai-card textarea{width:100%;min-height:130px;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:8px;padding:10px;resize:vertical;line-height:1.5}
.ai-actions{display:flex;gap:8px;margin-top:10px}
.context-row{padding:11px 0;border-top:1px solid var(--border);font-size:13px}
.context-row:first-of-type{border-top:0}
.context-row label{display:block;color:var(--muted);font-size:12px;margin-bottom:3px}

.plots-layout{display:grid;grid-template-columns:420px 1fr;gap:14px;min-height:700px}
.plot-list{padding:14px}
/* "Liste" tat bisher genau dasselbe wie "Karte" - derselbe Code-Pfad zeigte
   in beiden Fällen dieselbe Kombi-Ansicht. Im Listen-Modus verschwindet die
   Karte wirklich und die Liste bekommt die volle Breite, statt dass der
   Umschalter nur seinen eigenen aktiven Zustand ändert, ohne etwas zu tun. */
.plots-layout.liste-modus{grid-template-columns:1fr}
.plots-layout.liste-modus .map{display:none}
.plot-card{display:grid;grid-template-columns:70px 1fr auto;gap:10px;padding:12px 0;border-top:1px solid var(--border);cursor:pointer}
.plot-card.active{background:var(--surface2);margin:0 -8px;padding:12px 8px;border-radius:8px}
.plot-thumb{border-radius:8px;background:linear-gradient(135deg,#8A9B80,#D5CEB2);height:58px}
.map{position:relative;overflow:hidden;min-height:700px;padding:0}
#plotLeaflet{position:absolute;inset:0;background:var(--surface2)}
[data-theme="dark"] #plotLeaflet .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.92) saturate(.7)}
.leaflet-container{font-family:inherit;background:var(--surface2)}
.plot-pin{display:block;width:16px;height:16px;border-radius:50%;background:var(--brass);border:3px solid white;box-shadow:0 1px 4px #0004}
.plot-pin.active{width:20px;height:20px;margin:-2px 0 0 -2px;box-shadow:0 0 0 4px color-mix(in srgb,var(--brass) 35%,transparent),0 1px 4px #0005}
/* .plot-pop ist die className des Leaflet-Popups (bindPopup) - Leaflet hängt
   sie an den äußeren .leaflet-popup-Container, die eigentliche Karte steckt
   in .leaflet-popup-content-wrapper darunter. */
.plot-pop .leaflet-popup-content-wrapper{background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.35),0 0 0 1px rgba(0,0,0,.12)}
.plot-pop .leaflet-popup-content{width:252px !important;margin:14px;color:var(--text);font-family:inherit}
.plot-pop .leaflet-popup-content h3{margin-bottom:6px}
.plot-pop .leaflet-popup-tip{background:var(--surface);border:1px solid var(--border)}
[data-theme="dark"] .plot-pop .leaflet-popup-content-wrapper{background:#182842;border-color:var(--brass);box-shadow:0 14px 34px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.4)}
[data-theme="dark"] .plot-pop .leaflet-popup-tip{background:#182842;border-color:var(--brass)}

/* overflow-x:auto allein reicht nicht - per Spezifikation berechnet der
   Browser overflow-y dann ebenfalls als "auto" (sobald eine Achse ungleich
   "visible" ist, wird die andere aus "visible" zu "auto"), was diesen
   Wrapper zum eigenen Scroll-Container macht und "position:sticky;top:64px"
   auf den Kopfzellen kaputt rechnet (64px zu tief, deckt die erste
   Datenzeile zu). Lösung: den Wrapper bewusst zum eigenen, begrenzten
   Scroll-Container machen (eigene Höhe, sticky relativ zu ihm selbst via
   top:0 statt top:64px) statt die Doppelbedeutung zu bekämpfen. */
.matrix-wrap{overflow:auto;max-height:calc(100vh - 260px)}
.matrix{border-collapse:separate;border-spacing:0;width:100%;min-width:1100px;font-size:12px}
.matrix th,.matrix td{height:52px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);padding:8px 10px;text-align:center;background:var(--surface)}
.matrix thead th{position:sticky;top:0;z-index:2;background:var(--surface2)}
.matrix th:first-child,.matrix td:first-child{position:sticky;left:0;z-index:1;text-align:left;min-width:180px}
.matrix thead th:first-child{z-index:3}
/* Kontakte-Tabelle nutzt dieselbe .matrix-Optik (Rahmen, Zeilenhöhe), ist
   aber eine einfache Liste, keine breite, horizontal scrollbare Matrix -
   die für die Deals-Matrix gedachten min-width:1100px und der bei top:64px
   fixierte Kopf passen hier nicht und sorgten für eine künstlich zu breite
   Tabelle und eine seltsam abgesetzte Kopfzeile. */
#kontakteTabelle{min-width:0}
#kontakteTabelle thead th{position:static}
#kontakteTabelle th,#kontakteTabelle td{text-align:left}
.matrix-cell{border:0;border-radius:7px;padding:6px 8px;font-size:12px}
/* Leere Zellen sehen aus wie der alte, nur angezeigte Strich - sind aber
   jetzt anklickbar und legen einen echten Deal an. Der Hover-Zustand ist der
   einzige Hinweis darauf, bewusst zurückhaltend statt wie ein Knopf. */
.matrix-cell.leer{background:none;color:var(--muted);width:100%;height:100%;cursor:pointer}
.matrix-cell.leer:hover{background:var(--surface2);color:var(--text)}
.dot{width:7px;height:7px;border-radius:50%;background:#D34B45;display:inline-block;margin-left:5px}
.drawer{position:fixed;right:-390px;top:64px;width:390px;height:calc(100vh - 64px);background:var(--surface);border-left:1px solid var(--border);box-shadow:-10px 0 30px #0002;z-index:30;padding:20px;transition:right .2s ease}
.drawer.open{right:0}
.drawer .close{float:right}

.property-grid{display:grid;grid-template-columns:245px minmax(420px,1fr) 350px;gap:14px}
.property-side,.editor,.preview{padding:14px}
.section-nav button{width:100%;text-align:left;padding:10px;border:0;border-bottom:1px solid var(--border);background:transparent;color:var(--text)}
.section-nav button.active{color:var(--brass);font-weight:700}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;font-weight:700;margin-bottom:6px}
.field input,.field textarea,.field select{width:100%;border:1px solid var(--border);background:var(--surface2);color:var(--text);border-radius:8px;padding:9px}
.field textarea{min-height:140px;line-height:1.5}
.a4{aspect-ratio:1/1.414;background:white;color:#172233;border:1px solid #D8D8D8;border-radius:5px;margin-top:12px;padding:18px;box-shadow:0 5px 20px #0001}
.a4-hero{height:44%;border-radius:3px;background:linear-gradient(155deg,#89A09A,#D9D2B8);position:relative;overflow:hidden}
.a4-hero:after{content:"Villa in Düsseldorf-Oberkassel";position:absolute;bottom:14px;left:14px;color:white;font-family:Georgia,serif;font-size:20px;text-shadow:0 1px 4px #0008}
.a4 h4{font-family:Georgia,serif;margin:16px 0 8px;font-size:19px;color:#172233}
.a4 p{font-size:10px;line-height:1.55;color:#4B5563}

.mobile-stage{display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:760px;margin:0 auto}
.splash-preview{width:100%;max-width:220px;border-radius:16px;margin-top:10px;box-shadow:0 10px 26px rgba(15,27,43,.25);display:block}
.phone{width:320px;height:650px;margin:auto;border:10px solid #10151C;border-radius:38px;background:var(--surface);overflow:hidden;position:relative;box-shadow:0 18px 45px #0003;display:flex;flex-direction:column}
.phone-splash{position:absolute;inset:0;z-index:10;background:#0F1B2B;opacity:1;transition:opacity .5s ease}
.phone-splash.hide{opacity:0;pointer-events:none}
.phone-splash img{width:100%;height:100%;object-fit:cover;display:block}
.phone-top{flex:0 0 auto;height:36px;background:#10151C;color:white;font-size:11px;padding:9px 16px;display:flex;justify-content:space-between}
.mobile-header{flex:0 0 auto;background:var(--ink);color:#F3EFE7;padding:14px 16px 34px}
.mobile-header-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.mobile-header-top .icon-btn{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);color:#fff;width:32px;height:32px;padding:0;border-radius:9px;display:grid;place-items:center;font-size:14px}
.mobile-logo{height:20px;object-fit:contain}
.mobile-header h2{color:#fff;font-size:21px}
.mobile-header .muted.light{color:#B7C0CC;font-size:13px;margin-top:2px}
.mobile-app{flex:1 1 auto;min-height:0;background:var(--bg);padding:0 14px 72px;overflow:auto;margin-top:-20px;border-radius:20px 20px 0 0;position:relative;z-index:1}
.mobile-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:16px}
.mobile-kpi{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:10px 5px;text-align:center;box-shadow:0 6px 16px rgba(15,27,43,.08)}
.mobile-kpi-icon{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;margin:0 auto 6px;font-size:12px}
.mobile-kpi-icon.red{background:#FCE7E5;color:#973B36}
.mobile-kpi-icon.blue{background:#E5EFFC;color:#315E9B}
.mobile-kpi-icon.green{background:#E4F3EC;color:#25664F}
.mobile-kpi-icon.amber{background:#FFF0D0;color:#8A5D10}
.mobile-kpi b{display:block;font-size:18px;font-family:Newsreader,Georgia,serif}
.mobile-task{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--border);font-size:13px}
.mobile-task:first-of-type{border-top:0}
.mobile-task input{margin-top:3px;accent-color:var(--brass)}
.mobile-task b{display:block;font-size:13px}
.mobile-task small{color:var(--muted)}
.bottom-nav{position:absolute;bottom:0;left:0;right:0;height:62px;background:#0F1B2B;color:#AEB6C2;display:grid;grid-template-columns:repeat(5,1fr);align-items:center;text-align:center;font-size:10px;z-index:2}
.bottom-nav span{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:13px}
.bottom-nav span small{font-size:9px}
.bottom-nav span.active{color:var(--brass)}
.plus{width:42px;height:42px;margin:auto;border-radius:50%;background:var(--brass);display:grid;place-items:center;font-size:24px;color:#fff}
.log-sheet{position:absolute;left:0;right:0;bottom:-520px;background:var(--surface);border-radius:20px 20px 0 0;border-top:1px solid var(--border);padding:16px;z-index:5;transition:bottom .2s ease;box-shadow:0 -12px 30px #0003}
.log-sheet.open{bottom:0}
.outcomes{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:12px 0}
.outcome{padding:9px;border:1px solid var(--border);background:var(--surface2);color:var(--text);border-radius:8px;font-size:12px}
.outcome.active{border-color:var(--brass);background:color-mix(in srgb,var(--brass) 15%,var(--surface))}
.toast{position:fixed;right:24px;bottom:24px;padding:12px 16px;border-radius:10px;background:var(--ink);color:white;z-index:50;opacity:0;transform:translateY(10px);transition:.2s}
/* Leaflet-Karten benutzen selbst z-index bis ~1000 (Kontrollen, Popups) -
   ein Drawer, der über einer Karte liegt (Grundstücksfinder-Inspektor),
   braucht mehr als der normale Drawer-Wert (30), sonst schlagen die
   Kartensteuerelemente durch. */
/* width/right computed with min(480px, 100vw) instead of relying on the
   generic .drawer mobile media query - an ID selector here would beat
   that class rule's width:100% on narrow screens regardless of media
   query, so the responsive fallback has to live in this same rule. */
#gfDrawer{z-index:1200;overflow-y:auto;width:min(480px,100vw);right:calc(-1 * min(480px,100vw))}
#gfDrawer.open{right:0}
.toast.show{opacity:1;transform:none}
@media(max-width:1100px){
  .app{grid-template-columns:68px 1fr}.sidebar{padding:18px 8px}.logo{max-width:44px;object-fit:cover;object-position:left}
  .nav button span,.sidebar-footer{display:none}.nav button{justify-content:center}.nav .sub{padding-left:12px}
  .inbox-layout{grid-template-columns:250px 1fr}.context{display:none}.property-grid{grid-template-columns:210px 1fr}.preview{display:none}
}
.mobile-tabbar{display:none}
@media(max-width:760px){
  .app{display:block}.sidebar{display:none}.topbar{grid-template-columns:1fr auto;padding:0 12px}.topbar .search{display:none}
  /* Fünf Bedienelemente (Neu, Glocke, Theme, Sprache, Nutzer-Chip) passen bei
     390px nicht mehr nebeneinander - Text und Nebensächliches fällt weg,
     die eigentlichen Knöpfe bleiben klickbar. */
  .top-actions{gap:6px}
  #newBtn span{display:none}
  .user-meta{display:none}
  .user-chip{padding:4px}
  /* Der 44px-Titel sprengt bei 390px die Kopfzeile, und die Knopfgruppe
     daneben hat dann keinen Platz mehr - beides stapelt sich stattdessen. */
  .page-head{flex-direction:column}
  .page-head h1{font-size:28px;line-height:1.15}
  h1{font-size:26px;line-height:1.2}
  .page{padding:14px;padding-bottom:76px}.kpis{grid-template-columns:repeat(2,1fr)}.grid-8-4,.plots-layout,.inbox-layout,.property-grid{grid-template-columns:1fr}
  .mobile-stage{grid-template-columns:1fr}.phone{width:min(92vw,360px)}
  .mobile-tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--nav);border-top:1px solid var(--border);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));justify-content:space-around}
  .mobile-tabbar .nav-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:none;
    color:var(--navtext);opacity:.6;font-size:10px;padding:6px 2px;border-radius:8px}
  .mobile-tabbar .nav-btn span{font-size:10px}
  .mobile-tabbar .nav-btn.active{opacity:1;background:color-mix(in srgb,var(--brass) 20%,transparent)}
  /* Ein 390px-Schieber ist auf einem 360px-Telefon breiter als der Bildschirm -
     er deckt darum das ganze Fenster ab statt eine feste Breite zu erzwingen. */
  .drawer{width:100%;right:-100%}
  .drawer.open{right:0}
  /* Dieselbe Rechnung fürs Grundstücks-Popup: 252px feste Breite passt nicht
     mehr, sobald die Kartenkarte selbst schmaler als das ist. */
  .plot-pop .leaflet-popup-content{width:min(252px,calc(100vw - 84px)) !important}
}

/* Anmelde-Sperre (§ Auth): liegt über allem, solange kein gültiges Token da
   ist. app.js blendet sie erst aus, wenn /api/me ein echtes Token bestätigt -
   kein CSS-Trick, der nur die Optik sperrt, während die Seite längst da ist. */
#loginGate{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  background:var(--ink);padding:20px}
#loginForm{width:min(360px,100%);background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);box-shadow:0 20px 60px rgba(0,0,0,.35);padding:32px}
#loginForm .field input{width:100%}
body.angemeldet #loginGate{display:none}