:root{
  /* Farben (einfach, keine Gradients) */
  --bg: #f5f7fb;
  --surface: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e5e7eb;
  --primary: #2563eb;      /* Blau */
  --primary-600: #1d4ed8;
  --success: #16a34a;
  --danger: #dc2626;
  --warning: #d97706; 
   --prog-bg: rgba(148,163,184,.18);
  --prog-bd: rgba(148,163,184,.32);

  /* Abstände & Radius */
  --radius: 12px;
  --shadow: 0 10px 30px rgba(2, 8, 23, .06);
}

html,body{background:var(--bg); color:var(--text);}
a{color:var(--primary); text-decoration:none}
a:hover{color:var(--primary-600)}

.container{max-width:1200px}

.navbar{background:var(--surface)!important; border-bottom:1px solid var(--border); box-shadow:var(--shadow);}
.navbar-brand, .navbar .nav-link{color:var(--text)!important; font-weight:600}
.navbar .nav-link{opacity:.85}
.navbar .nav-link:hover{opacity:1}

/* Karten & Tabellen */
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow)}
.card .card-title{font-weight:800}
.table{--bs-table-bg:transparent}
.table thead th{background:#f1f5f9; border-bottom:1px solid var(--border); font-weight:700}
.table tbody td{border-color:var(--border)}
.table-hover tbody tr:hover{background:#f8fafc}

/* Buttons */
.btn{border-radius:10px; font-weight:700}
.btn-primary{background:var(--primary); border-color:var(--primary)}
.btn-primary:hover{background:var(--primary-600); border-color:var(--primary-600)}
.btn-outline-secondary{border-color:var(--border)}

/* Formulare */
.form-control, .form-select{border-radius:10px; border-color:var(--border);}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 .15rem rgba(37,99,235,.15)}

/* Badges (Status) */
.badge{border:1px solid var(--border); font-weight:700}
.status-pill{display:inline-block; padding:.35rem .6rem; border:1px solid var(--border); border-radius:999px; font-weight:700}
.status-offen{background:#f1f5f9}
.status-geplant{background:#e6efff}
.status-In Bearbeitung{background:#e7f6ff}
.status-fertig{background:#e8fbe9}
.status-abgerechnet{background:#f1f5f9}
.status-storniert{background:#ffe8e8}

/* Portal Layout */
.portal-container{max-width:1000px; margin:0 auto; padding:16px}
.portal-header{display:flex; align-items:center; gap:12px; padding:16px 18px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow);}
.portal-header img{height:32px; width:auto}
.portal-title{margin:0; font-size:1.25rem; font-weight:800}
.portal-meta{margin-left:auto; text-align:right}
.kv{display:grid; grid-template-columns:160px 1fr; row-gap:6px; column-gap:12px}
.kv .k{color:var(--muted)}

.section{margin-top:16px}
.section>.card{border-radius:var(--radius)}
.totals{display:flex; justify-content:flex-end}
.totals .box{min-width:340px}
.totals .row{display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px dashed var(--border)}
.totals .row:last-child{border-bottom:none; font-weight:800}

/* Toast */
.copy-toast{position:fixed; right:16px; bottom:16px; background:var(--success); color:#fff; padding:10px 12px; border-radius:10px; font-weight:700; box-shadow:var(--shadow); opacity:0; transform:translateY(10px); transition:opacity .2s, transform .2s}
.copy-toast.show{opacity:1; transform:translateY(0)}

/* Headings */
h1,h2,h3,h4,h5{font-weight:800}

.prog{
  position: relative;
  height: 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    var(--prog-bg);
  border: 1px solid var(--prog-bd);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.12);
}
.prog--compact{ height: 8px; }

/* Balkenbreite via --pct */
.prog-bar{
  position: relative;
  height: 100%;
  width: calc(var(--pct,0) * 1%);
  transition: width .35s ease;
  background: var(--bar-grad, linear-gradient(90deg,#8b5cf6,#06b6d4)); /* fallback: purple->teal */
  filter: saturate(1.05) contrast(1.05);
}

/* Farbwelten je Fortschritt */
.prog[data-state="low"]  .prog-bar{ --bar-grad: linear-gradient(90deg,#f97316,#ef4444); } /* orange->rot */
.prog[data-state="mid"]  .prog-bar{ --bar-grad: linear-gradient(90deg,#f59e0b,#22c55e); } /* amber->grün */
.prog[data-state="high"] .prog-bar{ --bar-grad: linear-gradient(90deg,#22c55e,#10b981); } /* grün->jade */

/* dezente Stripes oben drauf */
.prog-bar::after{
  content:"";
  position:absolute; inset:0;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.18) 0 8px, rgba(255,255,255,0) 8px 16px);
  mix-blend-mode: overlay; opacity:.5;
}

/* Animierte Stripes, solange <100% */
@keyframes prog-barber { to { background-position: 40px 0; } }
.is-animated .prog-bar::after{ animation: prog-barber 1s linear infinite; }

/* Prozent-Label (bei großen Balken sichtbar) */
.prog-label{
  position:absolute; top:50%; right:8px; transform:translateY(-50%);
  font-size:.75rem; font-family:ui-monospace,Consolas,Menlo,monospace;
  color: rgba(255,255,255,.92); text-shadow:0 1px 2px rgba(0,0,0,.45);
  pointer-events:none; user-select:none;
}
.prog--compact .prog-label{ display:none; }