:root{
  --bg:#0b1220;
  --panel:#0f1a33;
  --panel2:#0b1220;
  --border:#1b2b55;
  --text:#e6edf7;
  --muted:#9fb0d6;
  --accent:#2b5cff;
  --accent2:#3158ff;
  --good:#b7ffcc;
  --warn:#ffe6a8;
  --bad:#ffb4b4;
}

*{box-sizing:border-box}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  margin:0;background:var(--bg);color:var(--text)
}
a{color:#8ab4ff;text-decoration:none}
a:hover{text-decoration:underline}

/* z-index 70: ueber der Schublade des Seitenmenues (60), damit ☰ sie wieder
   schliessen kann. */
.topbar{
  position:sticky;top:0;z-index:70;
  display:flex;align-items:center;gap:16px;
  padding:14px 18px;background:rgba(15,26,51,.92);
  border-bottom:1px solid var(--border);
  backdrop-filter: blur(10px);
}
.brand{
  display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.2px;min-width:0
}
a.brand{color:var(--text)}
a.brand:hover{text-decoration:none}
.brand-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand .logo{
  flex:0 0 auto;
  width:34px;height:34px;border-radius:10px;
  background:linear-gradient(135deg,var(--accent),#6aa8ff);
  display:grid;place-items:center;
  box-shadow:0 10px 25px rgba(43,92,255,.25);
}
.brand .logo svg{opacity:.95}
/* Nur noch ohne Anmeldung (Link „Login“). */
.nav{
  margin-left:auto;display:flex;gap:14px;align-items:center;flex-wrap:wrap
}
.nav a{padding:8px 10px;border-radius:10px}
.nav a:hover{background:#14254b}

.wrap{max-width:1400px;margin:0 auto;padding:18px}
.h1{font-size:34px;font-weight:900;margin:8px 0 4px}
.sub{color:var(--muted);margin:0 0 14px}

.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.col-12{grid-column:span 12}
.col-8{grid-column:span 8}
.col-7{grid-column:span 7}
.col-6{grid-column:span 6}
.col-5{grid-column:span 5}
.col-4{grid-column:span 4}
.col-3{grid-column:span 3}
@media (max-width:1100px){.col-4,.col-3{grid-column:span 6}}
@media (max-width:1100px){.col-8,.col-7,.col-5{grid-column:span 12}}
@media (max-width:750px){.col-8,.col-7,.col-6,.col-5,.col-4,.col-3{grid-column:span 12}}

.card{
  background:linear-gradient(180deg,rgba(15,26,51,.98),rgba(15,26,51,.92));
  border:1px solid var(--border);
  border-radius:18px;padding:16px;
  box-shadow:0 14px 40px rgba(0,0,0,.25);
}
.card h2{margin:0 0 4px;font-size:18px}
.card p{margin:0;color:var(--muted);font-size:13px}
.card .row{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.iconbox{
  width:46px;height:46px;border-radius:16px;
  background:rgba(43,92,255,.15);
  border:1px solid rgba(43,92,255,.25);
  display:grid;place-items:center;
}
.iconbox.alt{background:rgba(255,214,102,.12);border-color:rgba(255,214,102,.22)}
.iconbox.green{background:rgba(65,216,130,.12);border-color:rgba(65,216,130,.22)}
.iconbox.purple{background:rgba(173,128,255,.12);border-color:rgba(173,128,255,.22)}
.listlinks{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.linkrow{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 12px;border-radius:14px;background:#0b1220;border:1px solid var(--border)
}
.linkrow:hover{background:#0e1830}
.linkrow span{color:var(--text);font-weight:650}
.linkrow em{color:var(--muted);font-style:normal;font-size:12px}

.banner{
  margin-top:16px;border-radius:22px;padding:18px;
  background:linear-gradient(135deg,#2036a8,#2b5cff 40%,#163078);
  border:1px solid rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.banner h3{margin:0;font-size:26px}
.banner p{margin:6px 0 0;color:rgba(230,237,247,.9);max-width:720px}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:11px 14px;border-radius:14px;
  background:#ffffff;border:0;color:#0b1220;font-weight:800;cursor:pointer
}
.btn.secondary{background:#2b3b5c;color:var(--text);border:1px solid var(--border)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.small{font-size:12px;color:var(--muted)}
.muted{color:var(--muted)}
.ok{color:var(--good)}
.warn{color:var(--warn)}
.err{color:var(--bad)}

/* Phase 7: locally scoped project and document-review layouts. */
.modernisierung-grid{gap:16px}
.modernisierung-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.modernisierung-table{min-width:860px}
.modernisierung-table th:first-child{position:sticky;left:0;z-index:1;background:var(--panel)}
.modernisierung-table td:first-child{position:sticky;left:0;z-index:1;background:var(--panel)}
.modernisierung-amount{text-align:right;white-space:nowrap}

@media (max-width:750px){
  .modernisierung-table-wrap{margin:0 -4px;padding:0 4px}
  .modernisierung-table th:first-child,.modernisierung-table td:first-child{min-width:225px}
}
@media (hover:none), (pointer:coarse){
  .modernisierung-grid .btn,.modernisierung-grid input,.modernisierung-grid select{min-height:44px}
}

table{width:100%;border-collapse:collapse}
th,td{border-bottom:1px solid var(--border);padding:10px 8px;text-align:left;font-size:14px;vertical-align:top}
th{color:#b9c7e6;font-weight:700}

/* Breite Tabellen in schmalen Spalten. Ohne Rahmen laufen lange Inhalte --
   E-Mail-Adressen, Aktionsspalten mit mehreren Schaltflaechen -- rechts aus
   der Karte heraus. Der Rahmen scrollt stattdessen waagerecht, die
   min-width verhindert, dass die Spalten unlesbar zusammengedrueckt werden. */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-wrap>table{min-width:760px}
/* break-word statt anywhere: bricht nur, wenn ein einzelnes Wort allein nicht
   in die Zeile passt. anywhere zerhackt sonst auch normale Namen mitten im
   Wort, sobald die Spalte eng wird. */
.table-wrap td{overflow-wrap:break-word}
/* Aktionsspalte: die Schaltflaechen duerfen umbrechen statt die Tabelle
   breiter zu machen, als die Karte ist. Vorher erzwang white-space:nowrap
   eine Zeile und schob die letzte Schaltflaeche aus dem Rahmen. */
td.aktionen{white-space:normal}
td.aktionen>*{display:inline-block;margin:0 4px 4px 0;vertical-align:top}
td.aktionen form{display:inline-block}

input,select,textarea{
  background:#0b1220;border:1px solid var(--border);color:var(--text);
  border-radius:12px;padding:10px;width:100%
}

.badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px;border-radius:999px;background:#14254b;border:1px solid var(--border);
  color:#b9c7e6;font-size:12px
}
.badge button{
  border:0;background:transparent;color:#b9c7e6;cursor:pointer;font-weight:900
}

#chartWrap{
  margin-top:14px;border-radius:16px;border:1px solid var(--border);
  background:#0b1220;padding:12px;
  height:58vh; min-height:320px;
}

/* Handwerker (seit 03.10.2026): gemeinsam für pages/handwerker.php und die
   Karte „Handwerker“ in pages/immobilien_objekte.php. Auf dem Handy stehen
   die Spalten einer Zeile untereinander statt nebeneinander. */
.hw-erste{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;font-size:11.5px;font-weight:700;
  background:rgba(65,216,130,.14);border:1px solid rgba(65,216,130,.35);color:var(--good);white-space:nowrap}
.hw-kontakt{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin:0;font-size:13px}
.hw-kontakt dt{color:var(--muted)}
.hw-kontakt dd{margin:0;overflow-wrap:anywhere}
.hw-notdienst a,.hw-notdienst{color:var(--warn);font-weight:700}
@media (max-width:750px){
  .hw-tab thead{display:none}
  .hw-tab tr{display:block;border-bottom:1px solid var(--border);padding:8px 0}
  .hw-tab td{display:block;border:0;padding:3px 0}
  /* Ohne Tabellenkopf braucht z. B. die Zahl der Aufträge eine Beschriftung. */
  .hw-tab td[data-label]:not(:empty)::before{content:attr(data-label);margin-right:8px;color:var(--muted);font-size:12px}
}

/* ── Seitenmenü links (seit 03.10.2026) ─────────────────────────────────────
   Ersetzt die Aufklappmenüs der Kopfzeile (Auftrag der Eigentümer). Ab 1200 px
   Breite steht das Menü neben dem Inhalt und lässt sich per ☰ einklappen
   (html.sm-zu, im Browser gemerkt). Darunter ist es eine Schublade über dem
   Inhalt (html.sm-offen) - der Inhalt bleibt dort so breit wie vorher.
   Aufbau und Verhalten: lib/navigation.php, lib/ui.php. */
:root{--sm-breite:252px;--topbar-h:63px}

.menu-toggle{
  display:flex;flex-direction:column;justify-content:space-between;
  width:26px;height:20px;background:transparent;border:0;cursor:pointer;
  padding:0;flex-shrink:0;
}
.menu-toggle span{
  display:block;height:2px;background:var(--text);border-radius:2px;
  transition:transform .25s, opacity .2s;
}
.menu-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:4px}

.topbar-rechts{margin-left:auto;display:flex;align-items:center;gap:10px;min-width:0}
.topbar-rechts a{padding:8px 10px;border-radius:10px;white-space:nowrap}
.topbar-rechts a:hover{background:#14254b;text-decoration:none}
.topbar .pill{
  border:1px solid var(--border);background:#0b1220;color:var(--muted);
  padding:6px 10px;border-radius:999px;font-size:12px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:38vw;
}

.dx-shell{display:flex;align-items:flex-start}
.dx-shell > .wrap{flex:1 1 auto;min-width:0}

.sm{
  position:sticky;top:var(--topbar-h);
  flex:0 0 var(--sm-breite);width:var(--sm-breite);
  height:calc(100vh - var(--topbar-h));overflow-y:auto;overscroll-behavior:contain;
  padding:12px 10px 32px;
  border-right:1px solid var(--border);background:rgba(15,26,51,.55);
  scrollbar-width:thin;scrollbar-color:rgba(138,180,255,.3) transparent;
}
html.sm-zu .sm{display:none}
.sm ul{list-style:none;margin:0;padding:0}
.sm-liste > li{margin:1px 0}
.sm summary{list-style:none}
.sm summary::-webkit-details-marker{display:none}
.sm-kopf,.sm-oben{
  display:flex;align-items:center;gap:10px;
  padding:9px 10px;border-radius:10px;
  color:var(--text);font-size:14px;font-weight:650;line-height:1.25;
  cursor:pointer;user-select:none;
}
.sm-kopf:hover,a.sm-oben:hover{background:#14254b;text-decoration:none}
.sm-icon{flex:0 0 auto;color:#8ab4ff}
.sm-pfeil{flex:0 0 auto;margin-left:auto;color:var(--muted);transition:transform .15s}
.sm-gruppe[open] > .sm-kopf .sm-pfeil{transform:rotate(90deg)}
.sm-gruppe.hat-aktiv > .sm-kopf{color:#fff}
.sm .sm-unter{margin:2px 0 8px 19px;padding:0 0 0 8px;border-left:1px solid var(--border)}
.sm-unter a{display:block;padding:7px 10px;border-radius:8px;color:#c9d6f2;font-size:13.5px;line-height:1.3}
.sm-unter a:hover{background:#14254b;color:var(--text);text-decoration:none}
.sm a[aria-current="page"]{
  background:rgba(43,92,255,.22);color:#fff;font-weight:700;
  box-shadow:inset 3px 0 0 var(--accent);
}
.sm-kopf:focus-visible,.sm a:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.sm-schleier{display:none}

@media (max-width:1199.98px){
  .sm{
    position:fixed;top:var(--topbar-h);left:0;bottom:0;z-index:60;
    width:min(86vw,320px);height:auto;
    background:rgba(11,18,32,.98);backdrop-filter:blur(12px);
    box-shadow:14px 0 40px rgba(0,0,0,.45);
    transform:translateX(-102%);visibility:hidden;
    transition:transform .2s ease, visibility 0s linear .2s;
  }
  html.sm-zu .sm{display:block}
  html.sm-offen .sm{transform:none;visibility:visible;transition:transform .2s ease, visibility 0s}
  html.sm-offen .sm-schleier{
    display:block;position:fixed;left:0;right:0;bottom:0;top:var(--topbar-h);
    z-index:55;background:rgba(3,8,20,.55);
  }
  html.sm-offen body{overflow:hidden}
  html.sm-offen .menu-toggle span:nth-child(1){transform:translateY(9px) rotate(45deg)}
  html.sm-offen .menu-toggle span:nth-child(2){opacity:0}
  html.sm-offen .menu-toggle span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
  .sm-kopf,.sm-oben{padding:12px 10px;font-size:15px}
  .sm-unter a{padding:10px;font-size:15px}
}
@media (max-width:600px){
  .topbar{gap:12px;padding:12px 14px}
  .topbar .pill{display:none}
}
@media (prefers-reduced-motion:reduce){
  html .sm,html.sm-offen .sm,.sm-pfeil,.menu-toggle span{transition:none}
}
@media print{
  .sm,.sm-schleier,.menu-toggle{display:none !important}
  .dx-shell{display:block}
}