/* MV EDV Vertragsverwaltung - UI 2026 (Mockup 1:1) */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700;800;900&display=swap');

:root {
  --green:        #7AB737;
  --green-dark:   #5A8A20;
  --green-darker: #3F6217;
  --green-deep:   #2E4A2C;
  --green-light:  #E6F0D6;
  --green-soft:   #F1F7E5;
  --green-pale:   #F8FCEF;
  --brand-rgb:    122,183,55;   /* RGB der Markenfarbe fuer Schatten/Tints (White-Label-Override im Layout) */

  --bg:           #F1F4ED;
  --sidebar-bg:   #F5F7EE;
  --card:         #ffffff;
  --text:         #1C2418;
  --text-soft:    #2a3326;
  --muted:        #6b7280;
  --border:       #e3e7dc;
  --soft:         #f7f9f3;

  --warn:         #b8860b;
  --danger:       #b3261e;
  --pink-bg:      #FBEAE6;
  --pink-border:  #f3c8c0;

  --radius-sm:    8px;
  --radius:       14px;
  --radius-lg:    24px;
  --radius-xl:    28px;
  --shadow-sm:    0 2px 6px rgba(28,36,24,.05);
  --shadow:       0 4px 16px rgba(28,36,24,.06), 0 1px 3px rgba(28,36,24,.04);
  --shadow-lg:    0 12px 36px rgba(28,36,24,.10), 0 2px 6px rgba(28,36,24,.04);

  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Barlow', 'Trebuchet MS', system-ui, -apple-system, sans-serif;
  font-size: 14px; line-height: 1.55; color: var(--text);
  background: var(--bg);
  min-height: 100vh;
}
a { color: var(--green-dark); text-decoration: none; }
a:hover { text-decoration: underline; color: var(--green); }

/* ==========================================================================
   PAGE FRAME
   ========================================================================== */
.page {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Decorative wave shapes top-right (sehr prominent, fliessend) */
.page-wave-tr {
  position: absolute;
  top: -60px; right: -80px;
  width: 880px; height: 460px;
  pointer-events: none;
  z-index: 0;
}
.page-wave-tr svg { width: 100%; height: 100%; display: block; }

/* Decorative wave shapes bottom-left */
.page-wave-bl {
  position: absolute;
  bottom: -80px; left: -120px;
  width: 640px; height: 320px;
  pointer-events: none;
  z-index: 0;
  opacity: .6;
}
.page-wave-bl svg { width: 100%; height: 100%; display: block; }

/* Decorative wave bottom-right (subtle) */
.page-wave-br {
  position: absolute;
  bottom: 0; right: 0;
  width: 380px; height: 200px;
  pointer-events: none;
  z-index: 0;
  opacity: .35;
}
.page-wave-br svg { width: 100%; height: 100%; display: block; }

/* ==========================================================================
   MAIN GRID
   ========================================================================== */
.layout {
  position: relative;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 28px;
  padding: 24px 36px 24px 24px;
  z-index: 1;
  flex: 1;
}

/* ==========================================================================
   SIDEBAR (HELL / CREMIG, weisse Card mit Schatten)
   ========================================================================== */
.sidebar {
  background: var(--sidebar-bg);
  border-radius: var(--radius-xl);
  position: sticky; top: 24px;
  align-self: start;
  height: auto;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Top: weisser Logo-Bereich */
.sidebar-brand {
  padding: 22px 24px 18px;
  display: flex;
  justify-content: center;
  background: #fff;
}
.sidebar-brand img {
  width: 100%;
  max-width: 140px;
  height: auto;
}

/* Body: cremig-heller Bereich (Nav) */
.sidebar-body {
  background: var(--sidebar-bg);
  padding: 10px 0 14px;
  position: relative;
  display: flex;
  flex-direction: column;
}

.nav { padding: 0; margin: 0; list-style: none; }
.nav li > a {
  display: flex; align-items: center; gap: 12px;
  color: var(--text-soft);
  padding: 9px 22px;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  transition: background .15s, color .15s;
  position: relative;
}
.nav li > a:hover { background: rgba(0,0,0,.04); color: var(--green-dark); text-decoration: none; }
.nav li > a.active {
  background: linear-gradient(90deg, var(--green-dark) 0%, var(--green) 100%);
  color: #fff;
  font-weight: 700;
  margin: 3px 14px;
  padding: 10px 16px;
  border-radius: 12px;
  box-shadow: 0 6px 14px rgba(var(--brand-rgb),.30);
}
.nav li > a .ico {
  width: 18px; height: 18px;
  flex: 0 0 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav-section {
  padding: 12px 22px 4px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--muted);
  font-weight: 700;
}

/* Sidebar bottom badge - cremig, hell */
.sidebar-foot {
  margin: 14px 14px 4px;
  padding: 12px 14px;
  background: linear-gradient(135deg, var(--green-soft) 0%, #e6efd2 100%);
  border: 1px solid var(--green-light);
  border-radius: 14px;
  display: flex; align-items: center; gap: 12px;
  position: relative;
  z-index: 1;
}
.sidebar-foot .sf-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(var(--brand-rgb),.25);
  display: grid; place-items: center;
  flex: 0 0 32px;
}
.sidebar-foot .sf-icon svg {
  width: 16px; height: 16px;
  stroke: var(--green-dark); fill: none;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.sidebar-foot .sf-text { font-size: 11px; line-height: 1.3; }
.sidebar-foot .sf-text .sf-title { font-weight: 800; color: var(--text); letter-spacing: 1px; font-size: 11.5px; display: block; }
.sidebar-foot .sf-text .sf-sub { color: var(--muted); display: block; }

/* ==========================================================================
   MAIN CONTENT
   ========================================================================== */
.main {
  min-width: 0;
  display: flex; flex-direction: column;
  gap: 22px;
}

/* User-Card oben rechts */
.top-userbar {
  display: flex; justify-content: flex-end;
  margin-top: 4px;
  position: relative;
}
.user-card {
  display: flex; align-items: center; gap: 14px;
  background: #fff;
  border-radius: 999px;
  padding: 10px 18px 10px 14px;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: box-shadow .15s;
  position: relative;
}
.user-card:hover { box-shadow: var(--shadow-lg); }
.user-card .bell {
  position: relative;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--green-soft);
  display: grid; place-items: center;
  color: var(--green-dark);
}
.user-card .bell svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.user-card .bell::after {
  content: '';
  position: absolute; top: 6px; right: 7px;
  width: 9px; height: 9px;
  background: var(--green);
  border-radius: 50%;
  border: 2px solid #fff;
}
.user-card .avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 800; font-size: 14px;
  letter-spacing: .5px;
}
.user-card .info { display: flex; flex-direction: column; line-height: 1.2; padding-right: 4px; }
.user-card .info .name { font-weight: 700; font-size: 14px; color: var(--text); }
.user-card .info .role { font-size: 12px; color: var(--muted); }
.user-card .chev { color: var(--muted); }
.user-card .chev svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.user-card.open .chev svg { transform: rotate(180deg); }
.user-card form { margin: 0; display: none; }
.user-card.open form {
  display: flex;
  position: absolute;
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 8px;
  top: calc(100% + 8px);
  right: 0;
  z-index: 10;
}
.user-card form button {
  background: none; border: none; color: var(--green-dark);
  font-weight: 700; cursor: pointer; font-family: inherit;
  font-size: 13.5px; padding: 8px 14px; border-radius: 8px;
}
.user-card form button:hover { background: var(--green-soft); }

/* Content card */
.content-card {
  background: #fff;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 32px 36px;
  position: relative;
  z-index: 1;
}

.page-title { display: flex; flex-direction: column; gap: 4px; margin-bottom: 28px; }
.page-title h1 { margin: 0; font-size: 30px; font-weight: 800; color: var(--text); letter-spacing: -.5px; line-height: 1.1; }
.page-title .sub { color: var(--muted); font-size: 14px; }

/* ==========================================================================
   CARDS
   ========================================================================== */
.card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.card .card-header {
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.card .card-header h2 {
  display: flex; align-items: center; gap: 12px;
  margin: 0; font-size: 15.5px; font-weight: 800; color: var(--green-dark); letter-spacing: -.2px;
}
.card .card-header h2 .h-icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--green-soft);
  display: grid; place-items: center;
  color: var(--green-dark);
  flex: 0 0 30px;
}
.card .card-header h2 .h-icon svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.card .card-body { padding: 20px; }
.card h3 { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--green-dark); }

.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1300px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px)  { .grid-2,.grid-3,.grid-4 { grid-template-columns: 1fr; } }

/* ==========================================================================
   KPI TILES (Zahl in DUNKLEM Schwarz, NICHT grün)
   ========================================================================== */
.kpi {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow-sm);
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px;
  transition: transform .15s, box-shadow .15s;
}
.kpi:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.kpi .body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.kpi .label {
  color: var(--muted);
  font-size: 11px; text-transform: uppercase;
  letter-spacing: 1.4px; font-weight: 700;
}
.kpi .value {
  font-size: 38px; font-weight: 900;
  color: var(--text);
  letter-spacing: -.5px;
  line-height: 1;
  margin: 8px 0 6px;
}
.kpi .sub { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.kpi.danger .value { color: var(--danger); }
.kpi.warn .value   { color: var(--text); }   /* Mockup: Wert bleibt schwarz, nur Icon ist gelb */
.kpi.signed .value { color: var(--text); }
.kpi-icon {
  width: 46px; height: 46px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--green-light);
  color: var(--green-dark);
  flex: 0 0 46px;
}
.kpi-icon svg {
  width: 22px; height: 22px;
  stroke: currentColor; fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.kpi.danger .kpi-icon { background: #fbe6e3; color: var(--danger); }
.kpi.warn .kpi-icon   { background: #fdf2c8; color: #b8860b; }
.kpi.signed .kpi-icon { background: var(--green-light); color: var(--green-dark); }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 18px; border-radius: 10px; border: 1px solid var(--green);
  background: var(--green); color: #fff; cursor: pointer; font-size: 13.5px; font-weight: 700;
  text-decoration: none; transition: background .12s, transform .05s, box-shadow .12s; font-family: inherit;
  box-shadow: 0 2px 6px rgba(var(--brand-rgb),.2);
}
.btn:hover { background: var(--green-dark); border-color: var(--green-dark); text-decoration: none; color: #fff; }
.btn:active { transform: translateY(1px); }
.btn.secondary { background: #fff; color: var(--text); border-color: var(--border); box-shadow: none; }
.btn.secondary:hover { background: var(--green-light); border-color: var(--green); color: var(--green-dark); }
.btn.ghost {
  background: #fff;
  border: 1px solid var(--border);
  color: var(--text);
  box-shadow: none;
  font-weight: 600;
}
.btn.ghost:hover { background: var(--green-soft); border-color: var(--green); color: var(--green-dark); }
.btn.success { background: var(--green-dark); border-color: var(--green-dark); }
.btn.success:hover { background: var(--green-darker); border-color: var(--green-darker); }
.btn.warn    { background: var(--warn);   border-color: var(--warn); }
.btn.warn:hover { background: #9a6f08; border-color: #9a6f08; }
.btn.danger  { background: var(--danger); border-color: var(--danger); }
.btn.danger:hover { background: #951c15; border-color: #951c15; }
.btn.small   { padding: 7px 14px; font-size: 12.5px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ==========================================================================
   TABLES
   ========================================================================== */
table.tbl { width: 100%; border-collapse: collapse; }
table.tbl th, table.tbl td { padding: 14px 22px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; font-size: 13.5px; }
table.tbl thead th {
  background: transparent;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--muted);
  font-weight: 700;
  border-bottom: 1.5px solid var(--border);
}
table.tbl tbody tr:hover { background: var(--green-soft); }
table.tbl a { font-weight: 700; color: var(--green-dark); }

/* ==========================================================================
   FORMS
   ========================================================================== */
.form-row { display: grid; gap: 14px; }
.form-row.two { grid-template-columns: 1fr 1fr; }
.form-row.three { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 700px) { .form-row.two,.form-row.three { grid-template-columns: 1fr; } }
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group label { font-size: 11px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .8px; }
.form-group input[type=text], .form-group input[type=email], .form-group input[type=password],
.form-group input[type=date], .form-group input[type=number], .form-group select, .form-group textarea {
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px;
  font-family: inherit; background: #fff; color: var(--text);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(var(--brand-rgb),.18); background: var(--green-pale);
}
.form-group textarea { min-height: 90px; resize: vertical; }
.help { font-size: 12px; color: var(--muted); }

.checkbox-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 16px; }
.checkbox-grid label { display: flex; gap: 9px; align-items: center; padding: 7px 10px; border-radius: 8px; cursor: pointer; transition: background .12s; }
.checkbox-grid label:hover { background: var(--green-soft); }
.checkbox-grid input[type=checkbox] { accent-color: var(--green); width: 16px; height: 16px; }

/* ==========================================================================
   STATUS BADGES
   ========================================================================== */
.badge { display: inline-block; padding: 4px 14px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .3px; text-transform: capitalize; }
.badge.draft         { background: #FBEED1; color: #8a6500; }
.badge.review        { background: #fff4d6; color: #7c5b00; }
.badge.sent          { background: var(--green-light); color: var(--green-dark); }
.badge.opened        { background: #c8e89a; color: var(--green-dark); }
.badge.client_review { background: #fce4b6; color: #7c5b00; }
.badge.signed        { background: var(--green); color: #fff; }
.badge.declined      { background: #fad4d1; color: #b3261e; }
.badge.expired       { background: #f4e3e1; color: #7d3a36; }
.badge.cancelled     { background: #eeeeee; color: #555; }

/* ==========================================================================
   WIZARD STEPS
   ========================================================================== */
.steps { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.step { padding: 9px 16px; background: #fff; border: 1px solid var(--border); border-radius: 999px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.step.active { background: var(--green); color: #fff; border-color: var(--green); }
.step.done   { background: var(--green-dark); color: #fff; border-color: var(--green-dark); }

/* ==========================================================================
   FLASH / BANNER
   ========================================================================== */
.flash {
  padding: 14px 18px;
  margin-bottom: 18px;
  border-radius: 12px;
  border: 1px solid;
  font-size: 13.5px;
  font-weight: 500;
}
.flash.success { background: var(--green-light); border-color: #c8e89a; color: var(--green-darker); }
.flash.error   { background: var(--pink-bg); border-color: var(--pink-border); color: #7d1d18; }
.flash.info    { background: var(--green-soft); border-color: #c8e89a; color: var(--green-dark); }

.banner-warn {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; flex-wrap: wrap;
  background: var(--pink-bg);
  border: 1px solid var(--pink-border);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 22px;
  font-size: 13.5px;
  color: #7d1d18;
}
.banner-warn b { color: #5b1612; }

/* ==========================================================================
   AUTH PAGES
   ========================================================================== */
.auth-page { min-height: 100vh; display: grid; place-items: center; background: linear-gradient(135deg, #1C2418 0%, #2C4A2A 60%, #3F6217 100%); padding: 20px; position: relative; overflow: hidden; }
.auth-page::before { content:''; position:absolute; width:500px; height:500px; border-radius:50%; border:1px solid rgba(var(--brand-rgb),.07); top:-150px; right:-100px; }
.auth-page::after { content:''; position:absolute; width:300px; height:300px; border-radius:50%; border:1px solid rgba(var(--brand-rgb),.1); bottom:40px; left:80px; }
.auth-card { width: 100%; max-width: 420px; background: #fff; border-radius: 18px; box-shadow: 0 16px 48px rgba(0,0,0,.3); padding: 36px; position: relative; z-index: 1; }
.auth-card h1 { margin: 0 0 6px; font-size: 22px; color: var(--green-dark); font-weight: 900; letter-spacing: -.5px; }
.auth-card .auth-brand { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.auth-card .auth-brand .dot { width:10px; height:10px; background:var(--green); border-radius:50%; box-shadow:0 0 10px var(--green); animation:pulse-dot 2s infinite; }
.auth-card .auth-brand .name { font-weight:900; font-size:18px; color:var(--text); letter-spacing:.5px; }
.auth-card p.muted { color: var(--muted); margin: 0 0 20px; font-size: 13px; }
@keyframes pulse-dot { 0%,100% { box-shadow: 0 0 8px var(--green); } 50% { box-shadow: 0 0 16px var(--green), 0 0 24px rgba(var(--brand-rgb),0.4); } }

/* ==========================================================================
   PORTAL
   ========================================================================== */
.portal-shell { max-width: 880px; margin: 0 auto; padding: 24px 18px 60px; }
.portal-header {
  background: linear-gradient(135deg, var(--green-deep) 0%, var(--green-darker) 60%, var(--green-dark) 100%);
  color: #fff; padding: 28px 32px; border-radius: 18px; box-shadow: var(--shadow);
  position: relative; overflow: hidden;
}
.portal-header::before { content:''; position:absolute; width:300px; height:300px; border-radius:50%; border:1px solid rgba(var(--brand-rgb),.1); top:-100px; right:-50px; }
.portal-header h1 { margin: 0 0 6px; font-size: 22px; font-weight: 900; letter-spacing:-.5px; }
.portal-header .meta { opacity: .85; font-size: 13.5px; }
.portal-header .brand-line { display:flex; align-items:center; gap:10px; opacity:.85; font-size:13px; margin-bottom:6px; }
.portal-header .brand-line .dot { width:8px; height:8px; background:var(--green); border-radius:50%; box-shadow:0 0 8px var(--green); }
.portal-card { background: #fff; border-radius: 14px; box-shadow: var(--shadow); padding: 24px; margin-top: 16px; border: 1px solid var(--border); }
.portal-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.legal { font-size: 12px; color: var(--muted); margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); line-height:1.6; }

/* ==========================================================================
   PRETTY CONTRACT PREVIEW
   ========================================================================== */
.preview { background: #fff; padding: 36px; border: 1px solid var(--border); border-radius: 12px; }
.preview h1 { color: var(--text); font-weight: 900; }
.preview h2 { color: var(--green-dark); font-weight: 800; }
.preview .summary {
  background: var(--green-light); border-radius: 10px; padding: 16px 18px; margin: 18px 0;
  display: grid; grid-template-columns: 200px 1fr; row-gap: 7px; column-gap: 14px; font-size: 13px;
  border: 1px solid #c8e89a;
}
.preview .summary .k { color: var(--green-dark); font-weight: 600; }
.preview .summary .v { font-weight: 700; }

.sla-table { width:100%; border-collapse:collapse; font-size:13px; margin: 12px 0; }
.sla-table th { background: var(--green); color: #fff; padding: 8px 10px; font-weight: 700; text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.5px; }
.sla-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); }
.sla-table tr:nth-child(even) td { background: var(--soft); }

/* ==========================================================================
   TAGLINE ROW (kein Bubble um Icon, einfach grünes Icon links + Text)
   ========================================================================== */
.taglines {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  padding: 4px 36px 30px 24px;
  z-index: 1;
}
.tagline {
  display: flex; align-items: center; gap: 14px;
}
.tagline-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--green-soft);
  display: grid; place-items: center;
  flex: 0 0 40px;
}
.tagline-icon svg {
  width: 22px; height: 22px;
  stroke: var(--green-dark); fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tagline-text { line-height: 1.3; }
.tagline-text .l1 { display: block; font-size: 14px; font-weight: 800; letter-spacing: .5px; color: var(--text); }
.tagline-text .l2 { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
@media (max-width: 1100px) { .taglines { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .taglines { grid-template-columns: 1fr; } }

/* ==========================================================================
   EMPTY STATE
   ========================================================================== */
.empty {
  padding: 64px 24px;
  text-align: center;
  color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.empty .empty-icon {
  width: 68px; height: 68px;
  border-radius: 50%;
  background: var(--green-soft);
  display: grid; place-items: center;
  color: var(--green-dark);
  margin-bottom: 6px;
}
.empty .empty-icon svg { width: 30px; height: 30px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.empty h3 { margin: 0; color: var(--text); font-weight: 700; font-size: 15px; }
.empty p { margin: 0; font-size: 13px; }

/* ==========================================================================
   HELPERS
   ========================================================================== */
.row { display: flex; align-items: center; gap: 12px; }
.row.between { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; }
.muted { color: var(--muted); }
.right { text-align: right; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.divider { height: 1px; background: var(--border); margin: 16px 0; }

code { background: var(--soft); padding: 1px 5px; border-radius: 4px; font-size: 12px; font-family: var(--mono); color: var(--green-dark); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
  .layout {
    grid-template-columns: 1fr;
    padding: 14px;
    gap: 16px;
  }
  .sidebar {
    position: relative; top: auto;
    height: auto;
    border-radius: var(--radius);
  }
  .sidebar-foot { display: none; }
  .nav { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 8px; }
  .nav li { width: 100%; }
  .content-card { padding: 18px; border-radius: var(--radius); }
  .top-userbar { justify-content: center; flex-wrap: wrap; gap: 10px; }
  .quicksearch-btn { flex: 1; min-width: 0; }
  .quicksearch-btn kbd { display: none; }
  .taglines { padding: 0 14px 20px; }
  .page-wave-tr { width: 320px; height: 180px; }
  .page-wave-bl { display: none; }
  .page-wave-br { display: none; }

  .grid-2, .grid-3 { grid-template-columns: 1fr !important; }
  .form-row.two, .form-row.three { grid-template-columns: 1fr !important; }
  .tbl { font-size: 12px; }
  .tbl thead { display: none; }
  .tbl tbody, .tbl tr { display: block; }
  .tbl td { display: flex; justify-content: space-between; gap: 12px; border: none !important; padding: 6px 12px !important; }
  .tbl tr { border-bottom: 1px solid var(--border); padding: 6px 0; }
}

/* ============================================================
   Schnellsuche / Strg+K
   ============================================================ */
.quicksearch-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--border);
  border-radius: 999px; padding: 7px 14px; cursor: pointer;
  font: inherit; color: #6b7280; transition: all .15s ease;
  margin-right: 12px;
}
.quicksearch-btn:hover { border-color: var(--green); color: #1C2418; box-shadow: 0 2px 8px rgba(var(--brand-rgb),.15); }
.quicksearch-btn svg { stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.quicksearch-btn span { flex: 1; min-width: 0; text-align: left; }
.quicksearch-btn kbd {
  font-family: inherit; font-size: 11px; font-weight: 600;
  background: #f1f4ed; color: var(--green-dark); border: 1px solid #d6e0c8;
  border-radius: 5px; padding: 2px 7px;
}

.quicksearch-overlay {
  position: fixed; inset: 0; background: rgba(28, 36, 24, 0.55);
  backdrop-filter: blur(2px);
  display: none; align-items: flex-start; justify-content: center;
  z-index: 9999; padding: 80px 16px 16px;
}
.quicksearch-overlay.open { display: flex; }
.quicksearch-panel {
  background: #fff; border-radius: 14px;
  width: 100%; max-width: 640px;
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
  overflow: hidden;
  border: 1px solid #e3e7dc;
}
.quicksearch-input-row {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid #e3e7dc;
}
.quicksearch-input-row svg { stroke: #6b7280; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.quicksearch-input-row input {
  flex: 1; border: 0 !important; outline: none;
  font-size: 17px; padding: 4px 0; background: transparent;
}
.quicksearch-input-row kbd {
  font-family: inherit; font-size: 11px; font-weight: 600;
  background: #f1f4ed; color: var(--green-dark); border: 1px solid #d6e0c8;
  border-radius: 5px; padding: 2px 7px;
}
.quicksearch-results { max-height: 60vh; overflow-y: auto; padding: 6px; }
.quicksearch-hint { padding: 16px; color: #6b7280; font-size: 13px; }
.qs-item {
  display: block; padding: 10px 12px; border-radius: 8px;
  text-decoration: none; color: #1C2418;
}
.qs-item.active, .qs-item:hover { background: #f1f7e5; color: #3F6217; }
.qs-item-main { font-weight: 600; font-size: 14px; }
.qs-item-sub  { font-size: 12px; color: #6b7280; margin-top: 2px; }

/* ============================================================
   Angebots-Kalkulator
   ============================================================ */
.calc-wrap { display: grid; grid-template-columns: 1fr 360px; gap: 20px; align-items: start; }
.calc-side { position: sticky; top: 16px; }
.calc-tbl td { vertical-align: top; }
.calc-tbl .calc-qty { padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; font: inherit; }
.calc-tbl .calc-qty:focus { border-color: var(--green); outline: none; box-shadow: 0 0 0 3px rgba(var(--brand-rgb),.15); }
.calc-line-sum { color: #3F6217; font-weight: 600; }

.calc-result .calc-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.calc-result .calc-row input { padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; font: inherit; }
.calc-block-title { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #6b7280; font-weight: 700; margin: 4px 0 8px; }
.calc-line { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; font-size: 14px; }
.calc-line.muted { color: #6b7280; }
.calc-line.calc-total { border-top: 2px solid #e3e7dc; margin-top: 6px; padding-top: 8px; font-size: 16px; }
.calc-line.calc-total b { color: #3F6217; font-size: 19px; }
.calc-discount-line b { color: #b94a48; }

@media (max-width: 1100px) {
  .calc-wrap { grid-template-columns: 1fr; }
  .calc-side { position: static; }
}

/* Druck: nur Ergebnis + Aufschlüsselung, ohne Navigation/Deko */
@media print {
  .sidebar, .top-userbar, .taglines, .page-wave-tr, .page-wave-bl, .page-wave-br,
  .calc-main, .calc-actions, #calcReset, .banner-warn, .flash { display: none !important; }
  .calc-wrap { display: block; }
  .calc-side { position: static; }
  .layout, .content-card, .page { display: block; padding: 0; margin: 0; box-shadow: none; background: #fff; }
  .card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
}