/* =====================================================================
   HeGe – Design-Framework  ("HeGe" Designsprache, responsive)
   ---------------------------------------------------------------------
   NUR DESIGN. Keine Logik/Funktionen/Rechte werden hierdurch verändert.
   Desktop  = linke Sidebar (262px) + Inhalt   (Vorlage "Abrechnungen")
   Handy    = Top-Bar + Bottom-Nav             (Vorlage "HeGe Mobil")
   Palette & Typografie aus den Mockups.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,ital,wght@6..72,0,300;6..72,0,400;6..72,0,500;6..72,0,600;6..72,1,400&family=Hanken+Grotesk:wght@400;500;600;700;800&family=Spline+Sans+Mono:wght@400;500;600&display=swap');

:root{
  --bg:#f6f0e6;        /* App-Fläche                                   */
  --card:#fbf7f0;      /* Karten                                       */
  --muted:#94806b;
  --fg:#2a231c;
  --line:#ece1d0;
  --line2:#e0d5c4;
  --primary:#6e5236;
  --primary-d:#5d4f40;
  --accent:#a6703f;
  --shadow:0 12px 34px rgba(43,33,24,.10);
  --side-w:262px;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg) !important;
  color:var(--fg) !important;
  font-family:'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

/* ---------- Typografie ---------------------------------------------- */
.hg-h1{font-family:'Newsreader',serif;font-weight:400;font-size:38px;letter-spacing:-.01em;margin:0 0 6px}
.hg-h1 em{font-style:italic}
.hg-sub{margin:0;font-size:14px;color:var(--muted)}
.hg-eyebrow{font-family:'Spline Sans Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0}
.hg-mono{font-family:'Spline Sans Mono',monospace}

/* =====================================================================
   SHELL
   ===================================================================== */
/* Desktop-Sidebar */
.hg-side{
  position:fixed;top:0;left:0;height:100vh;width:var(--side-w);
  background:var(--card);border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:28px 20px;z-index:40;
}
.hg-side .hg-logo{display:block;margin:2px 4px 26px}
.hg-side .hg-logo img{width:142px;height:auto;display:block}
.hg-side .hg-logo .hg-wordmark{font-family:'Newsreader',serif;font-size:30px;color:var(--primary);font-weight:500;line-height:1}
.hg-newbtn{
  display:flex;align-items:center;gap:11px;background:var(--primary);color:#fbf7f0;
  border-radius:11px;padding:14px 16px;font-weight:600;font-size:15px;text-decoration:none;
  margin-bottom:20px;box-shadow:0 6px 16px rgba(110,82,54,.22);border:none;cursor:pointer
}
.hg-newbtn:hover{filter:brightness(1.05)}
.hg-nav{display:flex;flex-direction:column;gap:3px}
.hg-nav a{
  display:flex;align-items:center;gap:13px;padding:11px 14px;border-radius:9px;
  color:var(--primary-d);text-decoration:none;font-weight:500;font-size:15px
}
.hg-nav a:hover{background:#f3ece0}
.hg-nav a.active{background:#f3e7d6;color:var(--primary);font-weight:600}
.hg-side-foot{margin-top:auto;display:flex;flex-direction:column;gap:14px;padding-top:14px}
.hg-side-foot .hg-logout{
  display:flex;align-items:center;gap:13px;padding:11px 14px;border-radius:9px;
  color:var(--muted);text-decoration:none;font-weight:500;font-size:15px
}
.hg-side-foot .hg-logout:hover{background:#f3ece0}
.hg-usercard{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;border:1px solid var(--line);background:#fff}
.hg-usercard .hg-ava{width:40px;height:40px;border-radius:50%;background:var(--primary);color:#fbf7f0;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;flex:0 0 40px}
.hg-usercard .hg-uname{font-weight:600;font-size:14px;line-height:1.3}
.hg-usercard .hg-urole{font-size:12px;color:var(--muted)}

/* Mobil-Topbar + Bottom-Nav (per Default versteckt) */
.hg-topm{display:none}
.hg-bottomnav{display:none}

/* Inhaltsbereich – überschreibt das alte .main / .container */
.main{margin-left:var(--side-w) !important;}
.hg-main{padding:42px 48px 70px}
.hg-wrap{max-width:1160px;margin:0 auto}

/* =====================================================================
   Komponenten
   ===================================================================== */
.hg-grid{display:grid;gap:18px}
.hg-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.hg-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.hg-grid.cols-4{grid-template-columns:repeat(4,1fr)}

.hg-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 24px}
.hg-card.pad-sm{padding:16px 18px}
.hg-card.brown{background:var(--primary);border-color:var(--primary);color:#ffffff !important}
.hg-card.brown .hg-kpi-label,.hg-card.brown .hg-kpi-foot{color:#e7d6bf !important}
.hg-card.brown .hg-kpi-val{color:#ffffff !important}
.hg-card.clickable{cursor:pointer;transition:box-shadow .15s, transform .15s;text-decoration:none;color:inherit;display:block}
.hg-card.clickable:hover{box-shadow:var(--shadow);transform:translateY(-2px)}

.hg-kpi-label{margin:0 0 12px;font-size:13px;color:var(--muted);font-weight:500}
.hg-kpi-val{font-family:'Newsreader',serif;font-size:36px;line-height:1}
.hg-kpi-val .cur{font-size:20px}
.hg-kpi-foot{margin:11px 0 0;font-size:12.5px;color:var(--accent);font-weight:600}

/* Pills / Status */
.hg-pill{font-size:11.5px;font-weight:600;padding:5px 11px;border-radius:20px;white-space:nowrap;display:inline-block}
.hg-pill.beauftragt,.hg-pill.erstellt{color:#94806b;background:#efe6d7}
.hg-pill.termin,.hg-pill.unterschrieben{color:#6e5236;background:#f3e7d6}
.hg-pill.bearbeitung,.hg-pill.offen{color:#a6703f;background:#f6e3d2}
.hg-pill.fertig,.hg-pill.bezahlt,.hg-pill.abgeschlossen{color:#6f7b5e;background:#eaeede}
.hg-pill.abgerechnet,.hg-pill.provisioniert{color:#5d4f40;background:#e7dcc9}
.hg-pill.storniert{color:#b4503f;background:#fbecea}

/* Buttons */
.hg-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:11px;padding:13px 18px;font-family:'Hanken Grotesk',sans-serif;font-weight:600;font-size:14.5px;cursor:pointer;text-decoration:none;border:1px solid transparent;line-height:1}
.hg-btn-primary{background:var(--primary);color:#fbf7f0}
.hg-btn-primary:hover{filter:brightness(1.06)}
.hg-btn-ghost{background:#fff;border-color:var(--line2);color:var(--primary)}
.hg-btn-ghost:hover{background:#f3e7d6}
.hg-btn-dark{background:#2b2118;color:#fbf7f0}
.hg-btn-block{width:100%}

/* Form-Felder */
.hg-input,
input[type="text"],input[type="password"],input[type="email"],input[type="number"],
input[type="search"],input[type="tel"],input[type="date"],select,textarea,#suche{
  width:100%;padding:13px 14px;border:1px solid var(--line2);border-radius:11px;background:#fff;
  font-family:'Hanken Grotesk',sans-serif;font-size:15px;color:var(--fg);outline:none
}
.hg-input:focus,
input:focus,select:focus,textarea:focus,#suche:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(110,82,54,.13)}
input::placeholder,textarea::placeholder{color:#b6a78f}
.hg-label{display:block;font-size:12px;font-weight:600;color:#7a6a55;margin:0 0 6px 2px}
.inp{width:100%;padding:13px 14px;border:1px solid var(--line2);border-radius:11px;background:#fff;font-family:'Hanken Grotesk',sans-serif;font-size:15px;color:var(--fg);outline:none}
.inp:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(110,82,54,.13)}
input[type="checkbox"],input[type="radio"],input[type="range"]{accent-color:var(--primary)}
select{appearance:auto}

/* Suchfeld mit Icon */
.hg-search{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line2);border-radius:12px;padding:4px 14px}
.hg-search input{border:none !important;box-shadow:none !important;padding:11px 0 !important}

/* Chips (Filter) */
.hg-chips{display:flex;gap:8px;flex-wrap:wrap}
.hg-chip{border:1px solid var(--line2);border-radius:20px;padding:8px 15px;font-family:'Hanken Grotesk',sans-serif;font-size:13px;font-weight:600;cursor:pointer;background:#fff;color:var(--primary-d);white-space:nowrap}
.hg-chip.active{background:var(--primary);color:#fbf7f0;border-color:var(--primary)}

/* Tabelle */
.hg-table{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.hg-thead{font-family:'Spline Sans Mono',monospace;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:#a18d72;border-bottom:1px solid var(--line)}
.hg-tr{border-bottom:1px solid #f1e9db}
.hg-tr:last-child{border-bottom:none}
.hg-num{font-variant-numeric:tabular-nums}

/* Listen-Zeilen */
.hg-list{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.hg-row{display:flex;align-items:center;gap:13px;padding:14px 16px;border-bottom:1px solid #f1e9db;text-decoration:none;color:inherit}
.hg-row:last-child{border-bottom:none}
.hg-row:hover{background:#f3ece0}
.hg-ico{width:38px;height:38px;border-radius:10px;background:#f3e7d6;display:flex;align-items:center;justify-content:center;flex:0 0 38px;color:var(--primary)}

/* Auftrag-Karte (Mobil-Stil) */
.hg-order{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.hg-order .nr{font-family:'Spline Sans Mono',monospace;font-size:13px;color:var(--primary);font-weight:600}

/* Aufträge-Tabelle (Desktop-Design) */
.hg-arow{display:grid;grid-template-columns:135px 1.3fr 1.5fr 150px 80px;gap:16px;padding:14px 22px;align-items:center}
.hg-table .hg-thead.hg-arow{border-bottom:1px solid var(--line)}
#ergebnisse .hg-arow{border-bottom:1px solid #f1e9db}
#ergebnisse .hg-arow:last-child{border-bottom:none}
#ergebnisse .hg-arow:hover{background:#f3ece0}
.hg-tico{width:34px;height:34px;border-radius:9px;background:#f3e7d6;display:flex;align-items:center;justify-content:center;flex:0 0 34px;color:var(--primary)}
.hg-filterlbl{display:flex;align-items:center;gap:8px;font-size:13px;color:#7a6a55;font-weight:600}
.sel{width:auto;padding:10px 12px;border:1px solid var(--line2);border-radius:9px;background:#fbf7f0;font-family:'Hanken Grotesk',sans-serif;font-size:13.5px;color:var(--fg);font-weight:600;cursor:pointer}
.sel:hover{background:#f3ece0;border-color:#d8cab5}
.sel:focus,.sel:active{border-color:var(--primary);box-shadow:0 0 0 3px rgba(110,82,54,.13);background:#fbf7f0;color:var(--fg)}
/* native Optionslisten warm (soweit der Browser es erlaubt) */
select option{background:#fbf7f0;color:#2a231c}
/* Buttons & Dropdowns behalten beim Klick/Fokus ihre Farbe (nicht weiß) */
.hg-btn-primary:focus,.hg-btn-primary:active{background:var(--primary) !important;color:#fbf7f0 !important}
.hg-btn-ghost:focus,.hg-btn-ghost:active{background:#f3e7d6 !important;color:var(--primary) !important}
.btn-primary:focus,.btn-primary:active{background:var(--primary) !important;color:#fbf7f0 !important}
.status-dropdown,.status-dropdown:focus{background:#f3e7d6 !important;color:#6e5236 !important;font-weight:600}
.status-dropdown option{background:#fbf7f0;color:#2a231c}

/* =====================================================================
   Telefon-Button (bestehende Funktion, neue Optik)
   ===================================================================== */
#phone-btn{background:var(--primary) !important;box-shadow:0 8px 18px rgba(110,82,54,.34) !important}
#phone-popup{border:1px solid var(--line) !important;border-radius:14px !important;color:var(--fg) !important;font-family:'Hanken Grotesk',sans-serif !important}
#phone-popup strong{color:var(--primary)}

/* =====================================================================
   Rückwärtskompatibilität: alte Klassen weiterhin warm gestylt,
   damit noch nicht umgebaute Seiten stimmig bleiben.
   ===================================================================== */
.card,.filter-card,.auftrag{background:var(--card) !important;border:1px solid var(--line) !important;border-radius:16px !important;box-shadow:var(--shadow)}
.card h1,.card h2,.card h3,h1{font-family:'Newsreader',serif !important;font-weight:500 !important}
.badge{background:#f3e7d6 !important;color:var(--primary) !important;border-radius:20px !important;font-weight:600 !important}
.big{font-family:'Newsreader',serif !important;font-weight:400 !important;color:var(--primary) !important}
.sub,.muted{color:var(--muted) !important}
.auftrag a{color:var(--primary) !important}
.pdf-button a{border:1px solid var(--line2) !important;color:var(--primary) !important;border-radius:10px !important;background:#fff !important}
.pdf-button a:hover{background:#f3e7d6 !important}
.status-dropdown{border:1px solid var(--line2) !important;border-radius:10px !important;background:#fff !important}
.wrap{background:var(--bg) !important}
.wrap .card{border-radius:22px !important;box-shadow:0 18px 50px rgba(43,33,24,.16) !important}
.welcome{font-family:'Newsreader',serif !important;font-weight:600 !important;color:var(--fg) !important}
.card form button,input[type="submit"],button[type="submit"]{background:var(--primary) !important;color:#fbf7f0 !important;border-radius:12px !important;font-weight:600 !important}
/* alte fixe Sidebar/Topbar aus altem sidebar.php ausblenden, falls noch vorhanden */
nav.sidebar, header.topbar{display:none !important}

/* Detailseite: Sections, Status-Pill, Icon-Buttons, PDF-Panel */
.section{background:var(--card) !important;border:1px solid var(--line) !important;border-radius:16px !important}
.status-pill{background:#f3e7d6 !important;color:var(--primary) !important;border:1px solid var(--line) !important;border-radius:20px !important;font-weight:600 !important}
.actions-grid{display:flex !important;flex-wrap:wrap;gap:12px !important;margin-top:4px}
.btn-icon{display:inline-flex !important;align-items:center;gap:9px;border:1px solid var(--line2) !important;border-radius:11px !important;background:#fff !important;color:#5d4f40 !important;font-family:'Hanken Grotesk',sans-serif !important;font-weight:600 !important;font-size:14.5px !important;padding:13px 22px !important;line-height:1;cursor:pointer;text-decoration:none}
.btn-icon:hover{background:#f3ece0 !important}
.btn-icon.btn-primary{background:var(--primary) !important;color:#fbf7f0 !important;border-color:var(--primary) !important;box-shadow:0 6px 16px rgba(110,82,54,.22)}
.btn-icon.btn-primary:hover{filter:brightness(1.06);background:var(--primary) !important}
.btn-icon.btn-success{background:var(--primary) !important;color:#fbf7f0 !important;border-color:var(--primary) !important;box-shadow:0 6px 16px rgba(110,82,54,.22)}
.btn-icon.btn-success:hover{filter:brightness(1.06);background:var(--primary) !important}
.btn-icon.btn-danger{background:#fbecea !important;color:#b4503f !important;border-color:#e7c3bd !important}
.btn-icon.btn-danger:hover{background:#f7ddd8 !important}
.btn-icon.btn-warning{background:#f6e3d2 !important;color:#a6703f !important;border-color:#eed2b8 !important}
.btn-icon.btn-warning:hover{background:#f0d8c2 !important}
.btn-icon .icon{width:17px !important;height:17px !important}
.btn-icon .icon path,.btn-icon .icon rect{stroke:currentColor !important}
.pdf-panel{background:#f1ece2 !important;border:1px dashed #d8cab5 !important;border-radius:14px !important}

/* Auftrag-Detail im Vorlagen-Design */
.details{grid-template-columns:1fr 1fr !important;gap:24px !important;align-items:start}
.details .section{padding:30px 32px !important;border-radius:18px !important}
.details .section .header{margin-bottom:22px}
.details .section .header h1{font-family:'Newsreader',serif !important;font-weight:400 !important;font-size:30px !important}
.details .section > h1{font-family:'Newsreader',serif !important;font-weight:500 !important;font-size:21px !important}
.details .row{display:flex !important;gap:12px !important;align-items:flex-start !important;margin:0 !important;padding:11px 0 !important;border-bottom:1px solid #f1e9db}
.details .row strong{width:170px;flex:0 0 170px;font-weight:700;font-size:14.5px;color:var(--fg)}
.details .row .muted{font-size:14.5px;color:#5d4f40 !important}
/* Status-Notiz als warme Box */
.details .section > p.muted{margin:22px 0 20px !important;padding:13px 16px !important;background:#f6efe2;border:1px solid var(--line);border-radius:11px;color:#7a6a55 !important;font-size:13.5px;font-weight:500}
@media (max-width:900px){ .details{grid-template-columns:1fr !important} }

/* generische Tiles / Stat-Boxen anderer Seiten */
.tile,.stat{background:var(--card) !important;border:1px solid var(--line) !important;border-radius:14px !important}
.stat .value{color:var(--primary) !important;font-family:'Newsreader',serif !important;font-weight:400 !important}

/* =====================================================================
   Wizard "Neuer Auftrag" – Designsprache für eigene Klassen
   (Eingabefelder/Überschriften kommen bereits aus dem Framework)
   ===================================================================== */
.form-control{
  width:100%;padding:13px 14px !important;border:1px solid var(--line2) !important;border-radius:11px !important;
  background:#fff !important;font-family:'Hanken Grotesk',sans-serif !important;font-size:15px !important;color:var(--fg) !important
}
.form-control:focus{border-color:var(--primary) !important;box-shadow:0 0 0 3px rgba(110,82,54,.13) !important}
.btn{font-family:'Hanken Grotesk',sans-serif !important;font-weight:600 !important;border-radius:12px !important;border:1px solid var(--line2) !important;background:#fff !important;color:var(--primary) !important;cursor:pointer;padding:13px 18px !important}
.btn-primary{background:var(--primary) !important;color:#fbf7f0 !important;border-color:var(--primary) !important}
.btn-primary:hover{filter:brightness(1.06)}
.btn-secondary,.btn-light{background:#fff !important;color:var(--primary) !important;border-color:var(--line2) !important}
.btn-danger{background:#fbecea !important;color:#b4503f !important;border-color:#e7c3bd !important}
#prevBtn,#nextBtn{font-family:'Hanken Grotesk',sans-serif !important;font-weight:600 !important;border-radius:11px !important;border:1px solid var(--line2) !important;background:#fff !important;color:var(--primary) !important;padding:10px 16px !important;cursor:pointer}
.card-head{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start;justify-content:space-between}
.card-head .subtitle{color:var(--muted) !important}
.wahlbereich{display:flex;flex-wrap:wrap;gap:16px;margin-top:14px}
.karte{background:var(--card) !important;border:1px solid var(--line) !important;border-radius:16px !important;color:var(--primary-d) !important;text-decoration:none}
.karte:hover{box-shadow:var(--shadow);transform:translateY(-2px);transition:.15s}
.karte .icon,.karte svg{color:var(--primary) !important;stroke:var(--primary) !important}
/* Wizard-Kopf außerhalb der Karte */
.hg-wiz-header{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:24px;flex-wrap:wrap}
.hg-wiz-header .head-left h1{margin:0 0 6px;font-family:'Newsreader',serif;font-weight:400;font-size:34px;letter-spacing:-.01em}
.hg-wiz-header .subtitle{margin:0;font-family:'Spline Sans Mono',monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#a6703f}
/* Kostenrechner als helle Summary-Karte (Design) */
.pricing-summary{position:static !important;top:auto !important;right:auto !important;text-align:left !important;flex:0 0 auto;min-width:260px;background:#fbf7f0 !important;border:1px solid var(--line) !important;border-radius:14px !important;padding:14px 22px !important;color:var(--fg) !important;font-size:13px}
.pricing-summary .ps-row{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:9px 0;border-bottom:1px solid var(--line)}
.pricing-summary .ps-row:last-child{border-bottom:none}
.pricing-summary .label{color:var(--muted) !important;font-weight:500 !important;font-size:12.5px !important;margin:0 !important;text-transform:none !important;letter-spacing:0 !important}
.pricing-summary .value{color:var(--fg) !important;font-family:'Hanken Grotesk',sans-serif !important;font-weight:700 !important;font-size:14px !important}
.pricing-summary .ps-row.total .label{color:var(--fg) !important;font-weight:600 !important}
.pricing-summary .ps-row.total .value{color:var(--primary) !important;font-weight:800 !important;font-size:15px !important}
@media (max-width:760px){ .pricing-summary{min-width:0;width:100%} }
.step h2{font-family:'Newsreader',serif !important;font-weight:500 !important;color:var(--fg) !important}
.ac-result-box{background:#fff !important;border:1px solid var(--line2) !important;border-radius:11px !important}
.table{border-collapse:separate !important;border-spacing:0}
.table th,.table td{border-color:var(--line) !important;color:var(--fg)}
.table th{font-family:'Spline Sans Mono',monospace !important;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:#a18d72 !important}

/* Auswahlkarten: ausgewählter Zustand warm (statt grün) */
.karte.selected{border:2px solid var(--primary) !important;box-shadow:0 0 0 3px rgba(110,82,54,.15) !important;background:#fbf7f0 !important}
.karte.selected h4{color:var(--primary) !important}
.karte h4{font-family:'Hanken Grotesk',sans-serif !important;font-weight:700 !important;color:var(--fg) !important}
.karte:hover{border-color:var(--line2) !important}
/* Einheiten-/Geschoss-Spalten + weitere Eigentümer */
.column,.weitere-eig-card{background:#f6f0e6 !important;border:1px solid var(--line) !important;border-radius:14px !important}
.column h4{color:var(--fg) !important}
.column button{background:#fff !important;border:1px solid var(--line2) !important;color:var(--primary) !important;border-radius:10px !important;font-weight:600 !important;cursor:pointer;padding:9px 14px !important}
.column button:hover{background:#f3e7d6 !important}
/* Überschriften & Texte im Wizard */
.card h2{font-family:'Newsreader',serif !important;font-weight:500 !important;color:var(--fg) !important}
.card p,.subtitle{color:var(--muted) !important}
.step label,.card label{color:#5d4f40 !important;font-weight:600}
/* Validierungs-Rot warm */
.border-danger{border-color:#b4503f !important;box-shadow:0 0 0 3px rgba(180,80,63,.12) !important;background:#fffafa !important}
/* obere Wizard-Navigation als ruhiger Balken */
.form-actions{margin-top:22px}
#prevBtn,#nextBtn{background:#fff !important;color:var(--primary) !important;border:1px solid var(--line2) !important}
#prevBtn:hover,#nextBtn:hover{background:#f3e7d6 !important}
/* Checkbox-Listen etwas Luft */
.step input[type="checkbox"]{width:18px;height:18px;vertical-align:middle;margin-right:6px}

/* Wizard-Stepper (Vorlage "Neuer Auftrag") */
.hg-stepper{display:flex;justify-content:space-between;gap:6px;background:#fbf7f0;border:1px solid #ece1d0;border-radius:14px;padding:16px 14px;margin:4px 0 22px}
.hg-step-item{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1;text-align:center;min-width:0}
.hg-step-dot{width:30px;height:30px;border-radius:50%;background:#fff;border:1.5px solid #d8cab5;color:#94806b;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;flex:0 0 30px;transition:.15s}
.hg-step-item > span{font-size:11.5px;font-weight:600;color:#7a6a55;line-height:1.2}
.hg-step-item.active .hg-step-dot{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 0 0 4px rgba(110,82,54,.16)}
.hg-step-item.done .hg-step-dot{background:var(--primary);color:#fff;border-color:var(--primary)}
.hg-step-item.active > span{color:var(--primary)}
@media (max-width:760px){ .hg-stepper{overflow-x:auto;justify-content:flex-start;scrollbar-width:none} .hg-stepper::-webkit-scrollbar{display:none} .hg-step-item{flex:0 0 60px} .hg-step-item > span{font-size:10px} }
/* "Weiter"-Hauptnavigation braun */
#nextBtn{background:var(--primary) !important;color:#fbf7f0 !important;border-color:var(--primary) !important}
#nextBtn:hover{filter:brightness(1.06)}

/* ---- Wizard-Schritte im Vorlagen-Design ---- */
.step .step-sub{margin:0 0 22px !important;font-size:14px !important;color:#94806b !important;font-weight:400 !important}
.step .lbl,.lbl{display:block;font-size:12px;font-weight:600;color:#7a6a55;margin:0 0 6px 2px}
.hg-fieldcard{border:1px solid var(--line) !important;border-radius:14px !important;padding:22px 24px !important;margin-bottom:18px;background:#fff !important}
.hg-fieldcard-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.hg-fieldcard-head h3{margin:0 !important;font-size:15px !important;font-weight:700 !important;color:var(--primary) !important;font-family:'Hanken Grotesk',sans-serif !important}
.hg-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hg-form-grid .col-2{grid-column:1 / -1}
.hg-info-pill{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#f3e7d6;border-radius:11px;margin-bottom:18px}
.hg-info-pill span{font-size:13px;color:#7a6a55}
.btn-add-owner{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px dashed #c9b69b;color:var(--primary);border-radius:11px;padding:13px 18px;font-family:'Hanken Grotesk',sans-serif;font-weight:600;font-size:14px;cursor:pointer}
.btn-add-owner:hover{background:#f3e7d6}
@media (max-width:640px){ .hg-form-grid{grid-template-columns:1fr} }

/* Auswahl-Kacheln im Vorlagen-Design (Icon links, Text rechts) */
.wahlbereich{display:flex;flex-direction:column;gap:14px !important;align-items:stretch !important;margin-top:18px}
.karte{position:relative;display:flex !important;align-items:center;gap:20px !important;width:100% !important;max-width:none !important;padding:16px 20px !important;background:#fff !important;border:1px solid var(--line) !important;border-radius:14px !important;box-shadow:none !important}
.karte-ico{width:60px;height:60px;border-radius:11px;background:#f3e7d6;display:flex;align-items:center;justify-content:center;flex:0 0 60px}
.karte-body{flex:1;min-width:0}
.karte-body h4{margin:0 !important;font-size:17px !important;font-weight:700 !important;color:var(--fg) !important}
.karte-body p{margin:3px 0 0 !important;font-size:13px !important;color:#94806b !important}
.karte.selected{border:2px solid var(--primary) !important;box-shadow:0 0 0 3px rgba(110,82,54,.12) !important;background:#fbf7f0 !important}
.karte.selected::after{content:'';position:absolute;top:16px;right:16px;width:24px;height:24px;border-radius:50%;background:var(--primary);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center}

/* Schritt 6/7: Abschnitts-Überschriften, Checkbox-Zeilen, Sonstige-Block */
.step p strong{color:var(--primary);font-weight:700}
.step label:has(> input[type="checkbox"]){display:flex;align-items:center;gap:10px;margin:8px 0;font-weight:500;color:#3f352a;cursor:pointer;font-size:14px}
.step #u_email_block,.step #r_email_block{display:contents}
.hg-2col{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-bottom:8px}
.hg-sec{margin:0 0 10px !important;font-size:13px;font-weight:700;color:var(--primary)}
.hg-divider{height:1px;background:var(--line);margin:22px 0}
@media (max-width:640px){ .hg-2col{grid-template-columns:1fr;gap:18px} }
.step #sonstiges{margin-top:12px;padding:16px 18px;background:#f6f0e6;border:1px solid var(--line);border-radius:12px;max-width:580px}
.step #sonstiges select{margin:0 8px 8px 0}
.step textarea{max-width:580px}
/* Details- & Abschluss-Seite: Ja/Nein-Dropdowns kompakt */
#step5 select,#step8 select{max-width:240px}
#step8 .form-actions{margin-top:26px}

/* =====================================================================
   RESPONSIVE  – Umschalten auf Handy-Layout
   ===================================================================== */
@media (max-width:900px){
  .hg-side{display:none}
  .main{margin-left:0 !important;padding-bottom:96px !important}
  .hg-main{padding:14px 16px 96px}
  .hg-h1{font-size:27px}
  .hg-grid.cols-3,.hg-grid.cols-4{grid-template-columns:1fr 1fr}

  /* Mobil-Topbar */
  .hg-topm{
    display:flex;align-items:center;justify-content:space-between;
    padding:10px 18px;background:var(--bg);position:sticky;top:0;z-index:30
  }
  .hg-topm .hg-logo img{height:30px;width:auto;display:block}
  .hg-topm .hg-logo .hg-wordmark{font-family:'Newsreader',serif;font-size:22px;color:var(--primary)}
  .hg-topm .hg-ava{width:38px;height:38px;border-radius:50%;background:var(--primary);color:#fbf7f0;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;text-decoration:none}

  /* Bottom-Nav */
  .hg-bottomnav{
    display:flex;align-items:center;justify-content:space-around;
    position:fixed;left:0;right:0;bottom:0;z-index:40;
    background:var(--card);border-top:1px solid var(--line);padding:9px 8px 16px
  }
  .hg-bottomnav a,.hg-bottomnav button{
    background:none;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;
    text-decoration:none;color:#b6a78f;font-size:10.5px;font-weight:600;font-family:'Hanken Grotesk',sans-serif
  }
  .hg-bottomnav a.active{color:var(--primary)}
  .hg-bottomnav a.active svg{stroke:var(--primary)}
  .hg-bottomnav .hg-fab{margin-top:-22px}
  .hg-bottomnav .hg-fab span{
    width:52px;height:52px;border-radius:50%;background:var(--primary);color:#fbf7f0;
    display:flex;align-items:center;justify-content:center;box-shadow:0 8px 18px rgba(110,82,54,.34)
  }
}

@media (max-width:560px){
  .hg-grid.cols-2,.hg-grid.cols-3,.hg-grid.cols-4{grid-template-columns:1fr}
}