/* assets/css/kundenbereich.css: Kundenbereich (kundenbereich.html,
   Nachtpaket 3.10.2026 Teil K). Baut auf site.css auf (Tokens, Sora,
   .subhead, Footer). Hell, viel Weiss, Solaris-Gelb nur als Akzent
   (aktueller Schritt, Icon-Chips, offene Posten), Rundung 4 bis 6 px,
   keine Pills. Mobil zuerst; Eingabefelder unter 900 px mit 16 px. */

.kb-seite{background:var(--bg-soft)}
.kb-main{max-width:1180px;margin:0 auto;padding:104px 16px 72px;min-height:70vh}
.kb-versteckt{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* ---------- Grundbausteine ---------- */
.kb-eyebrow{margin:0 0 8px;font-size:.8125rem;font-weight:600;color:var(--text-soft)}
.kb-titel{font-size:clamp(1.5rem,4.2vw,2.1rem);font-weight:700;line-height:1.15;margin:0 0 10px;color:var(--carbon)}
.kb-text{margin:0 0 22px;color:var(--text-soft);font-size:.98rem;line-height:1.6}
.kb-hinweis{color:var(--text-soft);text-align:center;padding:60px 0}
.kb-klein{margin:18px 0 0;font-size:.86rem;color:var(--text-soft);line-height:1.55}
.kb-klein a{color:var(--carbon);text-decoration:underline;text-underline-offset:3px}
.kb-mitarbeiter{margin-top:26px;padding-top:16px;border-top:1px solid var(--line)}

.kb-karte-eng{max-width:440px;margin:0 auto;background:var(--white);border:1px solid var(--line);border-radius:6px;padding:28px 22px}

.kb-form{display:flex;flex-direction:column;gap:16px}
.kb-feld{display:flex;flex-direction:column;gap:6px;font-size:.88rem;font-weight:600;color:var(--carbon)}
.kb-feld input{font:inherit;font-size:16px;font-weight:400;color:var(--text);background:var(--white);border:1px solid var(--line-strong);
  border-radius:6px;min-height:48px;padding:10px 12px;width:100%}
.kb-feld input:focus{outline:2px solid var(--sun-deep);outline-offset:1px;border-color:var(--carbon)}

.kb-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:6px;
  font:inherit;font-size:.92rem;font-weight:600;line-height:1.2;cursor:pointer;text-decoration:none;white-space:nowrap;
  border:1px solid transparent;transition:background .15s ease,border-color .15s ease,color .15s ease}
.kb-btn svg{flex:0 0 auto}
.kb-btn:disabled{opacity:.55;cursor:default}
.kb-btn-primaer{background:var(--carbon);color:var(--white)}
.kb-btn-primaer:hover:not(:disabled){background:var(--carbon-2)}
.kb-btn-sekundaer{background:var(--white);color:var(--carbon);border-color:var(--line-strong)}
.kb-btn-sekundaer:hover{border-color:var(--carbon)}
.kb-btn-ghost{background:transparent;color:var(--carbon)}
.kb-btn-ghost:hover{background:var(--white)}
.kb-btn-breit{width:100%}
.kb-btn-klein{min-height:36px;padding:0 12px;font-size:.84rem}

.kb-link{background:none;border:0;padding:8px 0;font:inherit;font-size:.9rem;font-weight:600;color:var(--carbon);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:44px}
.kb-unterlinks{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 18px;margin-top:8px}

.kb-meldung{margin:0;padding:12px 14px;border-radius:6px;font-size:.9rem;line-height:1.5}
.kb-meldung-fehler{background:#FDECEC;color:#8A1C1C;border:1px solid #F4C7C7}
.kb-meldung-ok{background:var(--sun);color:var(--carbon);border:1px solid var(--sun);font-weight:600;margin-bottom:16px}

/* ---------- Dashboard: Kopf ---------- */
.kb-kopf{display:flex;flex-direction:column;gap:16px;margin-bottom:22px}
.kb-unterzeile{margin:0;color:var(--text-soft);font-size:.9rem;word-break:break-word}
.kb-kopf-knoepfe{display:flex;gap:10px;flex-wrap:wrap}
.kb-kopf-knoepfe .kb-btn{flex:1 1 auto}

/* ---------- Raster und Bloecke ---------- */
.kb-raster{display:flex;flex-direction:column;gap:16px}
.kb-spalte-haupt,.kb-spalte-seite{display:flex;flex-direction:column;gap:16px;min-width:0}
.kb-block{background:var(--white);border:1px solid var(--line);border-radius:6px;padding:20px 16px}
.kb-block-titel{display:flex;align-items:center;gap:10px;font-size:1.05rem;font-weight:700;margin:0 0 14px;color:var(--carbon)}
.kb-ic{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:4px;background:var(--sun);color:var(--carbon);flex:0 0 auto}
.kb-leer{margin:0;color:var(--text-soft);font-size:.92rem}

/* Listenzeilen (Angebote, Rechnungen, Dokumente, Termine) */
.kb-liste{list-style:none;margin:0;padding:0}
.kb-liste>li+li{border-top:1px solid var(--line)}
.kb-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:12px 0}
.kb-zeile-link{color:inherit;text-decoration:none;flex-wrap:nowrap}
.kb-zeile-link:hover .kb-zeile-titel{text-decoration:underline;text-underline-offset:3px}
.kb-zeile-ic{display:inline-flex;color:var(--text-soft);flex:0 0 auto}
.kb-zeile-text{display:flex;flex-direction:column;gap:2px;flex:1 1 200px;min-width:0}
.kb-zeile-titel{font-weight:600;color:var(--carbon);font-size:.95rem;overflow-wrap:break-word}
.kb-zeile-meta{font-size:.84rem;color:var(--text-soft);overflow-wrap:break-word}
.kb-zeile-rechts{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.kb-zeile-knopf{flex:0 0 auto}
.kb-zeile-aktion{display:none;font-size:.84rem;font-weight:600;color:var(--carbon);flex:0 0 auto}
.kb-betrag{font-weight:700;font-variant-numeric:tabular-nums;color:var(--carbon);white-space:nowrap}

.kb-chip{display:inline-block;padding:3px 8px;border-radius:4px;font-size:.76rem;font-weight:700;line-height:1.3;white-space:nowrap}
.kb-chip-gelb{background:var(--sun);color:var(--carbon)}
.kb-chip-ok{background:var(--carbon);color:var(--white)}
.kb-chip-grau{background:#EEF0F3;color:var(--text-soft)}
.kb-chip-rot{background:#B42318;color:var(--white)}

/* Projekt mit Zeitstrahl */
.kb-projekt+.kb-projekt{margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
.kb-projekt-kopf{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:10px 16px;margin-bottom:14px}
.kb-projekt-titel{margin:0;font-weight:700;color:var(--carbon);font-size:1rem}
.kb-projekt-meta{margin:2px 0 0;font-size:.84rem;color:var(--text-soft);overflow-wrap:break-word}
.kb-fortschritt{height:8px;border-radius:4px;background:#EEF0F3;overflow:hidden}
.kb-fortschritt-balken{display:block;height:100%;width:0;background:var(--carbon);border-radius:4px;transition:width .4s ease}
.kb-aktuell{margin:10px 0 16px;font-size:.92rem;color:var(--carbon);font-weight:600}
.kb-aktuell span{display:inline-block;margin-right:6px;padding:2px 7px;border-radius:4px;background:var(--sun);font-size:.74rem;font-weight:700}
.kb-zeitstrahl{list-style:none;margin:0;padding:0}
.kb-schritt{position:relative;display:flex;align-items:flex-start;gap:12px;padding:0 0 16px}
.kb-schritt:last-child{padding-bottom:0}
.kb-schritt::before{content:"";position:absolute;left:11px;top:24px;bottom:0;width:2px;background:var(--line)}
.kb-schritt:last-child::before{display:none}
.kb-schritt-erledigt::before{background:var(--carbon)}
.kb-punkt{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;
  background:var(--white);border:2px solid var(--line-strong);color:var(--white);flex:0 0 auto}
.kb-schritt-erledigt .kb-punkt{background:var(--carbon);border-color:var(--carbon)}
.kb-schritt-aktuell .kb-punkt{border-color:var(--carbon);background:var(--sun)}
.kb-schritt-text{display:flex;flex-direction:column;gap:1px;padding-top:2px}
.kb-schritt-titel{font-size:.93rem;color:var(--text-soft)}
.kb-schritt-erledigt .kb-schritt-titel{color:var(--carbon)}
.kb-schritt-aktuell .kb-schritt-titel{color:var(--carbon);font-weight:700}
.kb-schritt-datum{font-size:.8rem;color:var(--text-soft)}

/* Ansprechpartner */
.kb-ap{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.kb-ap-bild img,.kb-ap-initialen{width:56px;height:56px;border-radius:6px;object-fit:cover;display:block}
.kb-ap-initialen{display:flex;align-items:center;justify-content:center;background:var(--carbon);color:var(--white);font-weight:700;font-size:1.1rem}
.kb-ap-name{margin:0;font-weight:700;color:var(--carbon)}
.kb-ap-position{margin:2px 0 0;font-size:.86rem;color:var(--text-soft)}
.kb-ap-knoepfe{display:flex;flex-direction:column;gap:8px}
.kb-ap-knoepfe .kb-btn{justify-content:flex-start;width:100%}
.kb-ap-knoepfe .kb-btn span{overflow:hidden;text-overflow:ellipsis}

/* ---------- ab 640 px ---------- */
@media(min-width:640px){
  .kb-main{padding:118px 28px 90px}
  .kb-karte-eng{padding:36px 34px}
  .kb-block{padding:24px 22px}
  .kb-kopf{flex-direction:row;align-items:flex-end;justify-content:space-between}
  .kb-kopf-knoepfe{flex-wrap:nowrap}
  .kb-kopf-knoepfe .kb-btn{flex:0 0 auto}
  .kb-zeile-aktion{display:inline}
}

/* ---------- ab 900 px: zwei Spalten ---------- */
@media(min-width:900px){
  .kb-feld input{font-size:.95rem;min-height:44px}
  .kb-raster{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
  .kb-spalte-haupt,.kb-spalte-seite{gap:20px}
  .kb-spalte-seite{position:sticky;top:96px}
}

@media(prefers-reduced-motion:reduce){
  .kb-fortschritt-balken{transition:none}
}
@media print{
  .kb-kopf-knoepfe,.kb-zeile-knopf{display:none}
  .kb-main{padding:0}
}
@media(min-width:1200px){
  .kb-raster{grid-template-columns:minmax(0,1fr) 340px}
}