/* Kundenbereich (Design "Kundenbereich Neu"): Kopfzeile, Seitenleiste mit Navigation,
   Ansprechpartner und Wartungs-Abo, Inhalt rechts. Basis (Hintergrund, Schrift) aus login.css. */

.kb-page {
  --kb-surface: rgba(12, 12, 14, 0.9);
  --kb-border: rgba(255, 255, 255, 0.09);
  --kb-border-strong: rgba(255, 255, 255, 0.16);
  --kb-muted: rgba(255, 255, 255, 0.6);
  --kb-faint: rgba(255, 255, 255, 0.42);
  --kb-purple: #9d3dfe;
  --kb-purple-hover: #8a25f0;
  --kb-purple-soft: rgba(157, 61, 254, 0.14);
  --kb-purple-line: rgba(157, 61, 254, 0.5);
  --kb-lilac: #c9a2ff;
  --kb-radius: 14px;
}

.kb-page a { color: #d4b4ff; }

.kb-glow {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 0;
  width: min(1200px, 100%);
  height: 460px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 0%, rgba(157, 61, 254, 0.2), transparent 68%);
  pointer-events: none;
}

/* ------------------------------------------------------------ Kopfzeile --- */
.kb-header {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px clamp(16px, 3vw, 36px);
  background: rgba(0, 0, 0, 0.72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--kb-border);
}
.kb-logo { color: #fff !important; text-decoration: none; font-weight: 800; font-size: 15px; letter-spacing: 0.24em; }
.kb-account { display: flex; align-items: center; gap: 14px; min-width: 0; }
.kb-account-text { text-align: right; line-height: 1.35; min-width: 0; }
.kb-account-text strong { display: block; font-size: 14px; }
.kb-account-text span { display: block; font-size: 12px; color: var(--kb-muted); overflow-wrap: anywhere; }
.kb-avatar {
  flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  font-size: 13px; font-weight: 700; background: #26124a; border: 1px solid var(--kb-purple-line);
}
.kb-avatar.has-img { overflow: hidden; }
.kb-avatar img { width: 100%; height: 100%; display: block; border-radius: 50%; }

/* ---------------------------------------------------------------- Raster --- */
.kb-shell {
  position: relative;
  z-index: 1;
  max-width: 1140px;
  margin: 0 auto;
  padding: 36px clamp(16px, 3vw, 36px) 56px;
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 36px;
  align-items: start;
}
.kb-side { display: grid; gap: 14px; }
.kb-main { min-width: 0; }

.kb-label {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kb-faint);
}
.kb-side > .kb-label { margin: 0 0 -4px 12px; }

/* ------------------------------------------------------------ Navigation --- */
.kb-nav { display: grid; gap: 4px; }
.kb-nav-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px;
  border-radius: 10px; border: 1px solid transparent; background: transparent;
  color: rgba(255, 255, 255, 0.72); font: inherit; font-size: 14px; text-align: left; cursor: pointer;
}
.kb-nav-item::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); }
.kb-nav-item:hover { background: rgba(255, 255, 255, 0.04); color: #fff; }
.kb-nav-item.active { background: var(--kb-purple-soft); border-color: var(--kb-purple-line); color: #fff; font-weight: 700; }
.kb-nav-item.active::before { background: var(--kb-purple); box-shadow: 0 0 8px var(--kb-purple); }
.kb-count { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--kb-faint); }
.kb-badge {
  margin-left: auto; min-width: 24px; height: 19px; padding: 0 7px; border-radius: 999px;
  display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--kb-purple); color: #fff;
}
.kb-badge-red { background: rgba(248, 113, 113, 0.12); border: 1px solid rgba(248, 113, 113, 0.5); color: #fca5a5; }

/* -------------------------------------------------------- Seitenkarten --- */
.kb-card { padding: 16px; border-radius: var(--kb-radius); background: var(--kb-surface); border: 1px solid var(--kb-border); }
.kb-card .kb-label, .kb-abo .kb-label { margin-bottom: 8px; }
.kb-contact strong { display: block; font-size: 15px; font-weight: 600; }
.kb-contact span { display: block; margin-top: 2px; font-size: 13px; color: var(--kb-muted); }
.kb-contact button { margin-top: 10px; padding: 0; border: none; background: none; color: #d4b4ff; font: inherit; font-size: 13px; cursor: pointer; }
.kb-contact button:hover { text-decoration: underline; }

.kb-abo {
  padding: 18px 16px 16px; border-radius: var(--kb-radius); border: 1px solid rgba(157, 61, 254, 0.45);
  background: linear-gradient(180deg, rgba(157, 61, 254, 0.16), rgba(157, 61, 254, 0.04) 55%, rgba(12, 12, 14, 0.92));
}
.kb-abo h3 { margin: 2px 0 10px; font-size: 19px; }
.kb-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.kb-price strong { font-size: 26px; font-variant-numeric: tabular-nums; }
.kb-price span { font-size: 13px; color: var(--kb-muted); }
.kb-price s { color: var(--kb-faint); font-size: 14px; }
.kb-checks { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 7px; font-size: 13px; line-height: 1.4; }
.kb-checks li { position: relative; padding-left: 20px; }
.kb-checks li::before { content: '✓'; position: absolute; left: 0; color: var(--kb-lilac); font-weight: 700; }
.kb-offer-tag {
  display: inline-block; margin: 0 0 10px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  color: #86efac; background: rgba(74, 222, 128, 0.1); border: 1px solid rgba(74, 222, 128, 0.4);
}
.kb-offer-until { margin: -6px 0 14px; font-size: 12.5px; color: var(--kb-muted); }
.kb-offer-until strong { color: #fff; }
.kb-fine { margin: 10px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--kb-faint); }
.kb-fine a { color: #fff; font-weight: 700; }
.kb-status { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.kb-status-off { color: var(--kb-muted); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--kb-border-strong); }
.kb-hours {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin: 12px 0 2px; padding: 0; border: none;
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.kb-hours strong { font-size: 26px; font-variant-numeric: tabular-nums; }
.kb-hours span { font-size: 13px; color: var(--kb-muted); }
.kb-hours em { font-style: normal; font-size: 16px; line-height: 1; color: #d4b4ff; }
.kb-hours:hover span { color: #fff; text-decoration: underline; }
.kb-sub { margin: 0 0 12px; font-size: 12.5px; color: var(--kb-muted); }
.kb-side-btn {
  display: block; width: 100%; box-sizing: border-box; margin-top: 8px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--kb-border-strong); background: rgba(255, 255, 255, 0.02); color: #fff !important;
  font: inherit; font-size: 13px; font-weight: 600; line-height: 1.35; text-align: left; text-decoration: none; cursor: pointer;
}
.kb-side-btn:hover { background: rgba(255, 255, 255, 0.07); }
.kb-side-btn small { font-size: 12px; font-weight: 400; color: var(--kb-muted); }
.kb-side-btn .kb-badge { float: right; margin: 0 0 0 6px; }
.kb-side-alert {
  margin: 10px 0 0; padding: 8px 10px; border-radius: 10px; font-size: 12.5px; line-height: 1.45;
  background: rgba(251, 191, 36, 0.1); border: 1px solid rgba(251, 191, 36, 0.4);
}
.kb-divider { border-top: 1px solid var(--kb-border); margin: 14px 0 10px; }

/* --------------------------------------------------------- Inhaltsbereich --- */
.kb-view { display: none; }
.kb-view.active { display: block; }
.kb-head { padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid var(--kb-border); }
.kb-head h1 { margin: 0; font-size: 30px; font-weight: 750; letter-spacing: -0.01em; }
.kb-head p { margin: 6px 0 0; font-size: 15px; color: var(--kb-muted); }
.kb-panel { padding: 20px 22px; border-radius: 16px; background: var(--kb-surface); border: 1px solid var(--kb-border); }
.kb-panel + .kb-panel { margin-top: 16px; }
.kb-panel h3 { margin: 0 0 10px; font-size: 16px; }
.kb-empty { color: var(--kb-muted); }
.kb-note { font-size: 13px; color: var(--kb-muted); }
/* Button, der wie ein Link aussieht (z. B. "Profilbild" oeffnet das Konto-Menue) */
.kb-link { padding: 0; border: none; background: none; color: #d4b4ff; font: inherit; text-decoration: underline; cursor: pointer; }

.viewas-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 16px; margin-bottom: 18px; border-radius: 12px;
  background: rgba(251, 191, 36, 0.12); border: 1px solid rgba(251, 191, 36, 0.45);
}
.viewas-banner button { background: transparent; color: #fff; border: 1px solid var(--kb-border-strong); border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 13px; cursor: pointer; }

/* Kundenansicht ersetzt oder abgelaufen (public/kundenansicht.js): deckt die ganze Seite ab, damit nichts Veraltetes bedienbar bleibt */
.kb-view-overlay {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(0, 0, 0, 0.78); backdrop-filter: blur(4px);
}
.kb-view-overlay-card {
  max-width: 420px; padding: 24px; border-radius: var(--kb-radius, 14px); text-align: center;
  background: #121216; border: 1px solid rgba(251, 191, 36, 0.45); color: #fff;
}
.kb-view-overlay-card p { margin: 0 0 18px; line-height: 1.5; }
.kb-view-overlay-card button { background: var(--kb-purple, #9d3dfe); color: #fff; border: none; border-radius: 999px; padding: 9px 18px; font: inherit; cursor: pointer; }

/* Buttons */
.kb-btn-primary {
  display: inline-block; padding: 12px 22px; border-radius: 999px; border: none; background: var(--kb-purple);
  color: #fff !important; font: inherit; font-weight: 700; font-size: 14px; text-align: center; text-decoration: none; cursor: pointer;
}
.kb-btn-primary:hover { background: var(--kb-purple-hover); }
.kb-btn-primary:disabled { opacity: 0.5; cursor: default; }
.kb-btn-block { display: block; width: 100%; }
/* Buttons im Gutschrift-Formular (app.js) */
.abo-btn {
  padding: 12px 22px; border-radius: 999px; border: none; background: var(--kb-purple); color: #fff;
  font: inherit; font-weight: 700; font-size: 14px; cursor: pointer;
}
.abo-btn:hover { background: var(--kb-purple-hover); }
.abo-btn:disabled { opacity: 0.5; cursor: default; }
.abo-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.kb-btn-outline {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--kb-border-strong); background: transparent; color: #fff !important;
  font: inherit; font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer;
}
.kb-btn-outline:hover { background: rgba(255, 255, 255, 0.07); }
.kb-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* ---------------------------------------------------------------- Projekte --- */
.kb-projects { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.kb-project { border-radius: 18px; border: 1px solid var(--kb-border); background: rgba(11, 11, 13, 0.94); overflow: hidden; }
.kb-preview {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid var(--kb-border);
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 12px, transparent 12px 24px), #0e0e11;
}
.kb-preview iframe {
  position: absolute; top: 0; left: 0; width: 1280px; height: 720px; border: 0;
  transform-origin: 0 0; pointer-events: none; background: #fff;
}
.kb-preview-empty {
  display: grid; place-items: center; padding: 0 16px; text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; color: var(--kb-faint);
}
.kb-open {
  position: absolute; right: 14px; bottom: 14px; padding: 8px 14px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.8); border: 1px solid rgba(255, 255, 255, 0.2); color: #fff !important;
  font-size: 13px; font-weight: 700; text-decoration: none;
}
.kb-preview:hover .kb-open { background: #fff; color: #111 !important; }
.kb-project-body { padding: 22px 22px 20px; }
.kb-project-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.kb-project-top h2 { margin: 0; font-size: 20px; }
.kb-state { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.kb-state::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.kb-state-ok { color: #86efac; background: rgba(74, 222, 128, 0.1); border: 1px solid rgba(74, 222, 128, 0.4); }
.kb-state-wait { color: #fcd34d; background: rgba(251, 191, 36, 0.1); border: 1px solid rgba(251, 191, 36, 0.4); }
.kb-state-off { color: var(--kb-muted); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--kb-border-strong); }
.kb-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 14px; border: 1px solid var(--kb-border); border-radius: 12px; }
.kb-facts > div { padding: 12px 14px; min-width: 0; }
.kb-facts > div + div { border-left: 1px solid var(--kb-border); }
.kb-facts dt { margin: 0 0 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kb-faint); }
.kb-facts dd { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.kb-facts .kb-dim { color: var(--kb-muted); }
.kb-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.kb-chip {
  padding: 5px 10px; border-radius: 8px; font: inherit; font-size: 12.5px; color: #d8b4fe !important; text-decoration: none;
  background: rgba(157, 61, 254, 0.14); border: 1px solid rgba(157, 61, 254, 0.4); cursor: pointer;
}
.kb-chip:hover { background: rgba(157, 61, 254, 0.24); }
.kb-details-chev {
  width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  transform: rotate(90deg); transition: transform 0.2s;
}
.kb-details-btn[aria-expanded='true'] .kb-details-chev { transform: rotate(-90deg); }
.kb-details { display: grid; gap: 24px; margin-top: 18px; padding-top: 20px; border-top: 1px solid var(--kb-border); }

/* --------------------------------------------------------- Projektdetails --- */
/* Auftrag mit Fortschrittsleiste, Zeitleiste der Aenderungen, Arbeiten mit Symbol je Art.
   Dieselben Bausteine nutzt der Tab "Fortschritt" (app.js: renderOrder, renderWorkEntries). */
.pd-tone-new { --pd-c: #d8b4fe; --pd-bg: rgba(157, 61, 254, 0.1); --pd-line: rgba(157, 61, 254, 0.4); --pd-bar: #b77bff; }
.pd-tone-active { --pd-c: #e9d5ff; --pd-bg: rgba(157, 61, 254, 0.2); --pd-line: rgba(157, 61, 254, 0.58); --pd-bar: var(--kb-purple); }
.pd-tone-waiting { --pd-c: #fcd34d; --pd-bg: rgba(251, 191, 36, 0.12); --pd-line: rgba(251, 191, 36, 0.45); --pd-bar: #f5b82e; }
.pd-tone-review { --pd-c: #93c5fd; --pd-bg: rgba(59, 130, 246, 0.14); --pd-line: rgba(96, 165, 250, 0.45); --pd-bar: #4f8ff7; }
.pd-tone-done { --pd-c: #86efac; --pd-bg: rgba(74, 222, 128, 0.09); --pd-line: rgba(74, 222, 128, 0.38); --pd-bar: #34c46a; }
.pd-tone-paused, .pd-tone-stopped { --pd-c: var(--kb-muted); --pd-bg: rgba(255, 255, 255, 0.05); --pd-line: var(--kb-border-strong); --pd-bar: rgba(255, 255, 255, 0.3); }

.pd-order {
  padding: 18px 20px; border-radius: 16px; border: 1px solid var(--pd-line);
  background: linear-gradient(135deg, var(--pd-bg), rgba(255, 255, 255, 0.015) 72%), rgba(12, 12, 14, 0.6);
}
.pd-order-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px 14px; flex-wrap: wrap; }
.pd-order-name { min-width: 0; }
.pd-order-no { display: block; margin-bottom: 3px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--kb-muted); }
.pd-order-name h3 { margin: 0; font-size: 18px; line-height: 1.3; overflow-wrap: anywhere; }
.pd-status {
  flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; color: var(--pd-c); background: var(--pd-bg); border: 1px solid var(--pd-line);
}
.pd-status::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pd-tone-active .pd-status::before, .pd-tone-waiting .pd-status::before, .pd-tone-review .pd-status::before { animation: pd-pulse 1.8s ease-in-out infinite; }
@keyframes pd-pulse { 50% { opacity: 0.3; } }
.pd-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 18px 0 0; padding: 0; list-style: none; }
.pd-steps li { position: relative; min-width: 0; padding-top: 13px; font-size: 12px; color: var(--kb-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-steps li::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); }
.pd-steps li.is-done { color: var(--kb-muted); }
.pd-steps li.is-done::before, .pd-steps li.is-current::before { background: var(--pd-bar); }
.pd-steps li.is-current { color: #fff; font-weight: 700; }
.pd-order-hint { margin: 14px 0 0; font-size: 13.5px; color: var(--pd-c); }

.pd-section { min-width: 0; }
.pd-title {
  display: flex; align-items: center; gap: 9px; margin: 0 0 14px; font-size: 12px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--kb-muted);
}
.pd-ico { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pd-title .pd-ico { color: var(--kb-lilac); }
.pd-empty { margin: 0; font-size: 14px; color: var(--kb-muted); }
.pd-note { margin: 0 0 8px; font-size: 13px; color: var(--kb-muted); }

/* Zeitleiste "Letzte Änderungen": Tage als Ueberschrift, jede Aenderung ein Punkt auf der Linie */
.pd-timeline { position: relative; padding-left: 22px; }
.pd-timeline::before {
  content: ''; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; border-radius: 1px;
  background: linear-gradient(var(--kb-purple-line), rgba(157, 61, 254, 0.06));
}
.pd-day + .pd-day { margin-top: 16px; }
.pd-day-label { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: var(--kb-lilac); }
.pd-changes { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pd-change { position: relative; }
.pd-change::before {
  content: ''; position: absolute; left: -21px; top: 6px; width: 8px; height: 8px; border-radius: 50%;
  background: #0c0c0e; border: 2px solid var(--kb-purple);
}
.pd-day:first-child .pd-change:first-child::before { background: var(--kb-purple); box-shadow: 0 0 0 4px rgba(157, 61, 254, 0.22); }
.pd-change-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pd-change-head strong { font-size: 14.5px; line-height: 1.4; overflow-wrap: anywhere; }
.pd-change-head time { flex: none; font-size: 12px; color: var(--kb-faint); font-variant-numeric: tabular-nums; }
.pd-change-details { margin: 4px 0 0; padding: 0 0 0 17px; font-size: 13px; line-height: 1.5; color: var(--kb-muted); }
.pd-change-details li + li { margin-top: 3px; }
.pd-change-details li::marker { color: var(--kb-faint); }

/* Lange Listen gekuerzt; "Weitere … anzeigen" klappt auf */
.pd-collapsible:not(.is-open) [data-extra] { display: none; }
.pd-more {
  margin-top: 14px; padding: 8px 15px; border-radius: 999px; border: 1px solid var(--kb-border-strong); background: transparent;
  color: #d4b4ff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.pd-more:hover { background: rgba(157, 61, 254, 0.12); }

/* Arbeiten: Farbe und Symbol je Art (Website-Update, online, vor Ort, Buero) */
.pd-kind-update { --pd-k: #d8b4fe; --pd-kbg: rgba(157, 61, 254, 0.18); }
.pd-kind-online { --pd-k: #93c5fd; --pd-kbg: rgba(59, 130, 246, 0.17); }
.pd-kind-onsite { --pd-k: #5eead4; --pd-kbg: rgba(45, 212, 191, 0.15); }
.pd-kind-office { --pd-k: #fcd34d; --pd-kbg: rgba(251, 191, 36, 0.15); }
.pd-kind-work { --pd-k: rgba(255, 255, 255, 0.78); --pd-kbg: rgba(255, 255, 255, 0.08); }
.pd-work { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pd-entry {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start;
  padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.025); border: 1px solid var(--kb-border);
}
.pd-entry-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--pd-k); background: var(--pd-kbg); }
.pd-entry-ico .pd-ico { width: 19px; height: 19px; }
.pd-entry-main { min-width: 0; }
.pd-entry-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-height: 22px; }
.pd-entry-head strong { font-size: 14.5px; color: var(--pd-k); }
.pd-entry-meta { font-size: 12.5px; color: var(--kb-faint); }
.pd-entry-text { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.82); white-space: pre-wrap; overflow-wrap: anywhere; }
.pd-entry-changes { margin: 4px 0 0; padding-left: 17px; font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.82); }
.pd-entry-changes li::marker { color: var(--pd-k); }
.pd-time {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  font-size: 12px; font-weight: 700; background: rgba(255, 255, 255, 0.07); border: 1px solid var(--kb-border-strong);
}
.pd-time-ico { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.75; }

/* Tab "Fortschritt": je Auftrag eine Karte in der Farbe seines Status */
#activity-body:has(.pd-order-card) { display: grid; gap: 16px; padding: 0; background: none; border: none; }
.pd-order-card > .pd-collapsible, .pd-order-card > .pd-empty { margin-top: 18px; }
.pd-order-card .pd-entry { background: rgba(0, 0, 0, 0.28); }

/* ------------------------------------------------- Tabellen und Pills --- */
.simple-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.simple-table th, .simple-table td { padding: 10px 10px; text-align: left; border-bottom: 1px solid var(--kb-border); }
.simple-table th { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kb-faint); }
.simple-table tr:last-child td { border-bottom: none; }
.kb-table-wrap { overflow-x: auto; }
.btn-link { color: #d4b4ff; text-decoration: none; }
.btn-link:hover { text-decoration: underline; }
.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; border: 1px solid transparent; white-space: nowrap; }
.pill-ok { color: #86efac; background: rgba(74, 222, 128, 0.1); border-color: rgba(74, 222, 128, 0.4); }
.pill-warn { color: #d8b4fe; background: rgba(157, 61, 254, 0.16); border-color: rgba(157, 61, 254, 0.5); }
.pill-red { color: #fca5a5; background: rgba(248, 113, 113, 0.12); border-color: rgba(248, 113, 113, 0.45); }
.pill-muted { color: var(--kb-muted); background: rgba(255, 255, 255, 0.06); border-color: var(--kb-border-strong); }
.pill-amber { color: #fcd34d; background: rgba(251, 191, 36, 0.12); border-color: rgba(251, 191, 36, 0.45); }

/* ------------------------------------------------------------------- Chat --- */
.chat-box { display: flex; flex-direction: column; height: 520px; }
.chat-messages { flex: 1; overflow-y: auto; padding: 6px 4px; display: flex; flex-direction: column; gap: 10px; }
.chat-bubble { max-width: 78%; padding: 10px 14px; border-radius: 16px; font-size: 14px; white-space: pre-wrap; word-break: break-word; }
.chat-bubble .chat-meta { display: block; margin-top: 4px; font-size: 11px; opacity: 0.6; }
.chat-bubble.mine { align-self: flex-end; background: rgba(157, 61, 254, 0.26); border: 1px solid rgba(157, 61, 254, 0.5); border-bottom-right-radius: 4px; }
.chat-bubble.theirs { align-self: flex-start; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--kb-border-strong); border-bottom-left-radius: 4px; }
.chat-input-row { display: flex; gap: 10px; margin-top: 12px; align-items: flex-end; }
.chat-input-row textarea {
  flex: 1; resize: none; min-height: 46px; max-height: 130px; padding: 12px 14px; border-radius: 14px;
  border: 1px solid var(--kb-border-strong); background: rgba(255, 255, 255, 0.05); color: inherit; font: inherit;
}
.chat-hint { margin-top: 6px; font-size: 12px; color: var(--kb-faint); }

/* ------------------------------------------------ Wartungs-Abo (Inhalt) --- */
.abo-features { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.abo-features li { position: relative; padding-left: 24px; font-size: 15px; }
.abo-features li::before { content: '✓'; position: absolute; left: 0; color: var(--kb-lilac); font-weight: 700; }
.abo-features small { display: block; font-size: 13px; color: var(--kb-muted); }
.abo-note { font-size: 13px; color: var(--kb-muted); }
.abo-check { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; font-size: 14px; line-height: 1.45; cursor: pointer; }
.abo-check input { flex: none; width: 18px; height: 18px; margin-top: 3px; accent-color: var(--kb-purple); }
.abo-start-choice { border: none; padding: 0; margin: 14px 0 8px; }
.abo-start-choice legend { margin-bottom: 4px; font-weight: 700; }
.abo-summary-box { margin: 16px 0 12px; padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--kb-border-strong); }
.abo-summary { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 6px; }
.abo-summary td { padding: 7px 0; border-bottom: 1px solid var(--kb-border); vertical-align: top; }
.abo-summary td:first-child { width: 26%; padding-right: 12px; color: var(--kb-muted); }
.abo-alert { margin: 12px 0; padding: 10px 14px; border-radius: 12px; font-size: 14px; background: rgba(251, 191, 36, 0.1); border: 1px solid rgba(251, 191, 36, 0.4); }
.abo-offer-box { margin: 0 0 18px; padding: 14px 16px; border-radius: 14px; background: rgba(74, 222, 128, 0.08); border: 1px solid rgba(74, 222, 128, 0.4); }
.abo-offer-box p { margin: 4px 0 0; }
.kb-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0 0 16px; }
.kb-stat { padding: 14px 16px; border-radius: 14px; background: var(--kb-surface); border: 1px solid var(--kb-border); }
.kb-stat strong { display: block; font-size: 28px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.kb-stat span { font-size: 13px; color: var(--kb-muted); }

/* --------------------------------------------------- Uebernahmegutschrift --- */
.tk-intro { margin: 0 0 14px; max-width: 70ch; }
.tk-notice { margin: 12px 0; padding: 10px 14px; border-radius: 12px; font-size: 14px; background: rgba(74, 222, 128, 0.1); border: 1px solid rgba(74, 222, 128, 0.4); }
.tk-form { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--kb-border); display: grid; gap: 14px; }
.tk-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.tk-field { border: none; padding: 0; margin: 0; min-width: 0; }
.tk-field > label, .tk-field > legend { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; }
.tk-field small { font-weight: 400; color: var(--kb-muted); }
.tk-field input:not([type=checkbox]), .tk-field select, .tk-field textarea, .tk-reply textarea, .tk-reply input[type=file] {
  width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--kb-border-strong); background: rgba(255, 255, 255, 0.05); color: inherit; font: inherit;
}
.tk-field select option { color: #111; }
.tk-field textarea, .tk-reply textarea { min-height: 90px; resize: vertical; }
.tk-services { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.tk-services label { display: inline-flex; gap: 8px; align-items: center; font-size: 14px; cursor: pointer; }
.tk-services input { width: 17px; height: 17px; accent-color: var(--kb-purple); }
.tk-conditions summary { cursor: pointer; font-size: 14px; }
.tk-conditions ol { margin: 8px 0 0; padding-left: 20px; font-size: 13.5px; color: rgba(255, 255, 255, 0.8); }
.tk-conditions li { margin: 4px 0; }
.tk-list { margin-top: 16px; display: grid; gap: 10px; }
.tk-item { padding: 12px 16px; border-radius: 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--kb-border); font-size: 14px; }
.tk-item p { margin: 8px 0 0; }
.tk-item-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 4px; }
.tk-question { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; white-space: pre-wrap; background: rgba(251, 191, 36, 0.1); border: 1px solid rgba(251, 191, 36, 0.4); }
.tk-reply { margin-top: 10px; display: grid; gap: 8px; }

/* -------------------------------------------------------- Passwort aendern --- */
/* Seite aus dem Konto-Menue (app.js initPasswordView); Felder wie im Gutschrift-Formular */
#view-passwort .kb-panel { max-width: 560px; }
.pw-form { display: grid; gap: 16px; }
.pw-form .tk-field input { font-size: 16px; }
.pw-rule { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.45; }
.pw-show { margin: -4px 0 0; }
#pw-error { text-align: left; }
.pw-foot { margin: 0; line-height: 1.5; }
.pw-done { display: flex; gap: 14px; align-items: flex-start; outline: none; }
.pw-done-ico {
  flex: none; width: 34px; height: 34px; fill: none; stroke: #86efac; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.pw-done strong { display: block; margin-top: 5px; font-size: 17px; }
.pw-done p { margin: 6px 0 16px; font-size: 14px; line-height: 1.5; color: var(--kb-muted); }

/* ---------------------------------------------------------- Pflichtlinks --- */
.kb-legal { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--kb-border); display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; }
.kb-legal a { color: var(--kb-muted); }

/* ------------------------------------------ Konto (Avatar-Menue, alle Groessen) --- */
/* Desktop: Popover unter dem Avatar. App-Ansicht: Bottom-Sheet (siehe unten). */
button.kb-avatar {
  box-sizing: content-box; padding: 0; color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  transition: box-shadow 0.15s;
}
/* Wrapper fuer Logo und App-Titel: am Desktop ohne eigene Box (Kopfzeile wie bisher) */
.kb-bar-title { display: contents; }
button.kb-avatar:hover { box-shadow: 0 0 0 3px rgba(157, 61, 254, 0.35); }
button.kb-avatar:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.kb-sheet {
  inset: 0; margin: 72px clamp(16px, 3vw, 36px) auto auto; padding: 0; border: none; background: transparent;
  width: 340px; max-width: calc(100vw - 32px); max-height: none; overflow: visible; color: #fff;
}
.kb-sheet::backdrop { background: rgba(0, 0, 0, 0.35); transition: opacity 0.2s; }
.kb-sheet.is-closing::backdrop { opacity: 0; }
.kb-sheet-panel {
  box-sizing: border-box; max-height: calc(100vh - 96px); overflow-y: auto; padding: 16px;
  border-radius: 18px; background: #111114; border: 1px solid var(--kb-border-strong);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  transition: opacity 0.16s, transform 0.16s;
}
.kb-sheet[open] .kb-sheet-panel { animation: kb-pop-in 0.18s ease-out; }
.kb-sheet.is-closing .kb-sheet-panel { opacity: 0; transform: translateY(-6px) scale(0.98); }
.kb-sheet-grip { display: none; }
.kb-sheet-me { display: flex; align-items: center; gap: 12px; padding: 2px 0 14px; }
.kb-sheet-me .kb-avatar { width: 46px; height: 46px; font-size: 16px; }
.kb-sheet-me-text { flex: 1; min-width: 0; line-height: 1.35; }
.kb-sheet-me-text strong { display: block; font-size: 16px; }
.kb-sheet-me-text span { display: block; font-size: 12.5px; color: var(--kb-muted); overflow-wrap: anywhere; }
.kb-sheet-x {
  flex: none; align-self: flex-start; width: 34px; height: 34px; border-radius: 50%; border: none;
  background: rgba(255, 255, 255, 0.08); color: #fff; display: grid; place-items: center; cursor: pointer;
}
.kb-sheet-x svg, .kb-install-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
#kb-contact-slot .kb-contact { margin-bottom: 12px; }
.kb-sheet-label { margin: 4px 0 8px 4px; }
.kb-sheet-links {
  display: flex; flex-direction: column; margin: 12px 0; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--kb-border); background: rgba(255, 255, 255, 0.02);
}
.kb-sheet-label + .kb-sheet-links { margin-top: 0; }
.kb-sheet-links > a, .kb-sheet-links > button {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px;
  color: var(--kb-muted); font-size: 14.5px; text-decoration: none;
}
.kb-sheet-links > button { width: 100%; margin: 0; border: none; background: none; font-family: inherit; line-height: inherit; text-align: left; cursor: pointer; }
.kb-sheet-links > button:disabled { cursor: progress; opacity: 0.6; }
/* Trennlinien nur zwischen sichtbaren Eintraegen ("Abo verwalten" gibt es nur mit Abo) */
.kb-sheet-links > :not(.hidden) ~ :not(.hidden) { border-top: 1px solid var(--kb-border); }
.kb-sheet-links > *::after { content: '›'; font-size: 20px; line-height: 1; color: var(--kb-faint); }
.kb-sheet-links > [target='_blank']::after, .kb-sheet-links > .kb-sheet-ext::after { content: '↗'; font-size: 15px; }
.kb-sheet-links > .kb-sheet-ext { color: #fff; font-weight: 600; }
.kb-sheet-links a.legal-strong { color: #fff; font-weight: 700; }
.kb-sheet-links > :active { background: rgba(255, 255, 255, 0.05); }
#kb-sheet-error { margin: -4px 0 12px; }
.kb-sheet-logout {
  width: 100%; padding: 13px; border-radius: 14px; border: 1px solid rgba(248, 113, 113, 0.45);
  background: rgba(248, 113, 113, 0.08); color: #fca5a5; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
}
.kb-sheet-logout:hover { background: rgba(248, 113, 113, 0.14); }
/* Sehr alte Browser ohne <dialog> (initAccountSheet): das Menue klappt unter der Kopfzeile auf */
.kb-no-sheet .kb-sheet { display: none; position: relative; z-index: 6; inset: auto; margin: 12px auto 0; }
.kb-no-sheet .kb-sheet[open] { display: block; }

/* "WEBklar als App": Hinweis im Tab Projekte (ausblendbar) und im Konto-Sheet */
.kb-install {
  display: flex; align-items: center; gap: 12px; margin: 12px 0; padding: 12px 12px 12px 14px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(157, 61, 254, 0.22), rgba(157, 61, 254, 0.06)); border: 1px solid var(--kb-purple-line);
}
.kb-install-card { margin: 0 0 16px; }
.kb-install-icon { flex: none; width: 44px; height: 44px; border-radius: 11px; }
.kb-install-text { flex: 1; min-width: 0; line-height: 1.4; }
.kb-install-text strong { display: block; font-size: 14.5px; }
.kb-install-text span { display: block; font-size: 12.5px; color: rgba(255, 255, 255, 0.72); }
.kb-inline-ico { width: 16px; height: 16px; vertical-align: -3px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kb-install-go {
  flex: none; padding: 9px 14px; border-radius: 999px; border: none; background: var(--kb-purple); color: #fff;
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.kb-install-x {
  flex: none; align-self: flex-start; width: 30px; height: 30px; margin: -6px -6px 0 -4px; border: none; background: none;
  color: var(--kb-faint); display: grid; place-items: center; cursor: pointer;
}

/* Elemente, die es nur in der App-Ansicht gibt */
.kb-back, .kb-logo-mark, .kb-app-title, .kb-tab-ico, .kb-app-only, .kb-install { display: none; }

@keyframes kb-pop-in { from { opacity: 0; transform: translateY(-6px) scale(0.98); } }
@keyframes kb-sheet-up { from { transform: translateY(100%); } }
@keyframes kb-fade-in { from { opacity: 0; } }
@keyframes kb-view-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes kb-push-in { from { opacity: 0; transform: translateX(32px); } }
@keyframes kb-back-in { from { opacity: 0; transform: translateX(-32px); } }
@keyframes kb-shimmer { to { background-position: -200% 0, 0 0; } }

@media (max-width: 640px) {
  .kb-facts { grid-template-columns: 1fr; }
  .kb-facts > div + div { border-left: none; border-top: 1px solid var(--kb-border); }
  .abo-features { grid-template-columns: 1fr; }
  .kb-project-body, .kb-panel { padding: 16px; }
}

/* ----------------------------------------------------- App-Ansicht (Handy) --- */
/* Unter 880px (und Handys quer): Kopfzeile als App-Leiste (Titel erscheint beim Scrollen),
   Navigation als Tab-Leiste unten, Karten der Seitenleiste im Konto-Sheet bzw. Tab "Verträge".
   Dieselbe Bedingung steht in app.js (appLayout). */
@media (max-width: 880px), (pointer: coarse) and (max-height: 500px) {
  .kb-page {
    --kb-appbar-h: calc(56px + env(safe-area-inset-top));
    --kb-tabbar-h: calc(62px + env(safe-area-inset-bottom));
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
  }
  /* Tastatur offen: auf Android wird der Platz der Tab-Leiste frei; auf iOS keine Hoehenaenderung (app.js) */
  .kb-page.kb-typing:not(.kb-ios) { --kb-tabbar-h: 0px; }
  html.kb-sheet-open { overflow: hidden; }
  .kb-desk-only { display: none; }
  .kb-app-only { display: inline; }

  /* App-Leiste oben */
  .kb-header {
    flex-wrap: nowrap; gap: 8px; box-sizing: border-box; height: var(--kb-appbar-h);
    padding: env(safe-area-inset-top) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
    background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
    transition: background-color 0.2s, border-color 0.2s;
    -webkit-user-select: none; user-select: none;
  }
  .kb-scrolled .kb-header {
    background: rgba(0, 0, 0, 0.8); border-bottom-color: var(--kb-border);
    -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px);
  }
  .kb-back {
    display: inline-flex; flex: none; align-items: center; gap: 1px; margin-left: -10px; padding: 8px 6px 8px 2px;
    border: none; background: none; color: #d4b4ff; font: inherit; font-size: 16px; cursor: pointer;
  }
  .kb-back svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .kb-bar-title { position: relative; flex: 1; min-width: 0; height: 40px; display: flex; align-items: center; }
  .kb-logo {
    display: inline-flex; align-items: center; gap: 10px; font-size: 14px; letter-spacing: 0.22em;
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  }
  .kb-logo-mark { display: block; flex: none; width: 28px; height: 28px; border-radius: 8px; }
  .kb-app-title {
    display: block; position: absolute; top: 50%; left: 0; right: 0; transform: translateY(calc(-50% + 8px)); opacity: 0;
    font-size: 17px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
  }
  .kb-titled .kb-app-title { opacity: 1; transform: translateY(-50%); }
  .kb-titled .kb-logo, .kb-subpage .kb-logo { opacity: 0; visibility: hidden; transform: translateY(-8px); }
  .kb-account { flex: none; gap: 0; }
  .kb-account-text { display: none; }
  .kb-header .kb-avatar { width: 36px; height: 36px; font-size: 13.5px; }

  /* Inhalt: eine Spalte, Platz fuer die Tab-Leiste; auf Tablets mittig begrenzt */
  .kb-shell.dashboard-content-reveal {
    display: block; max-width: 720px; overflow-x: clip;
    padding: 6px max(16px, env(safe-area-inset-right)) calc(var(--kb-tabbar-h) + 28px) max(16px, env(safe-area-inset-left));
    animation: kb-fade-in 0.4s ease-out both;
  }
  .kb-side { display: block; }
  .kb-side > .kb-label, .kb-side > .kb-card, .kb-side > .kb-abo { display: none; }

  /* Tab-Leiste unten (die Navigation der Seitenleiste) */
  .kb-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; justify-content: center; gap: 0;
    padding: 6px max(6px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
    background: rgba(12, 12, 14, 0.94); border-top: 1px solid var(--kb-border);
    -webkit-backdrop-filter: saturate(160%) blur(20px); backdrop-filter: saturate(160%) blur(20px);
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
    transition: transform 0.22s ease;
  }
  .kb-typing .kb-nav { transform: translateY(110%); }
  .kb-nav-item {
    position: relative; flex: 1 1 0; min-width: 0; max-width: 120px; flex-direction: column; justify-content: center; gap: 3px;
    padding: 4px 0 2px; border: none; border-radius: 12px; background: none; color: rgba(255, 255, 255, 0.55);
    font-size: 10.5px; font-weight: 600; letter-spacing: 0; text-align: center; touch-action: manipulation;
  }
  .kb-nav-item::before {
    position: absolute; top: 3px; left: 50%; width: 56px; height: 30px; margin-left: -28px; border-radius: 999px;
    background: transparent; box-shadow: none; transition: background-color 0.2s;
  }
  .kb-nav-item:hover { background: none; color: rgba(255, 255, 255, 0.55); }
  .kb-nav-item.active, .kb-nav-item.active:hover { background: none; border-color: transparent; color: #fff; font-weight: 700; }
  .kb-nav-item.active::before { background: rgba(157, 61, 254, 0.3); box-shadow: none; }
  .kb-tab-ico {
    display: block; position: relative; width: 24px; height: 24px; margin-top: 3px; fill: none; stroke: currentColor;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.12s;
  }
  .kb-nav-item:active .kb-tab-ico { transform: scale(0.88); }
  .kb-tab-label { position: relative; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .kb-nav-item .kb-count { display: none; }
  .kb-nav-item .kb-badge {
    position: absolute; top: 0; left: calc(50% + 6px); margin: 0; min-width: 19px; height: 19px; padding: 0 5px;
    box-sizing: border-box; font-size: 10.5px; line-height: 1; border: 2px solid #0c0c0e;
  }
  .kb-nav-item .kb-badge-red, .kb-nav-item .kb-badge-alert { background: #e5484d; color: #fff; }

  /* Seiten: grosse Ueberschrift wie in iOS, weiche Uebergaenge */
  .kb-head { margin: 6px 0 18px; padding-bottom: 0; border-bottom: none; }
  .kb-head h1 { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
  .kb-head p { margin-top: 4px; font-size: 14.5px; }
  .kb-view.active { animation: kb-view-in 0.24s ease-out; }
  body[data-kb-nav='push'] .kb-view.active { animation-name: kb-push-in; }
  body[data-kb-nav='back'] .kb-view.active { animation-name: kb-back-in; }
  .kb-panel { padding: 16px; border-radius: 18px; }
  .viewas-banner { margin-bottom: 12px; }

  /* Projekte */
  #loading:not(.hidden) {
    height: 300px; margin: 0; border-radius: 20px; border: 1px solid var(--kb-border); color: transparent; overflow: hidden;
    background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.06) 50%, transparent 70%) 0 0 / 200% 100%, var(--kb-surface);
    animation: kb-shimmer 1.4s linear infinite;
  }
  .kb-projects { gap: 16px; }
  .kb-project { border-radius: 20px; }
  .kb-project-body { padding: 16px 16px 18px; }
  .kb-project-top { margin-bottom: 12px; }
  .kb-project-top h2 { font-size: 19px; }
  .kb-open { right: 10px; bottom: 10px; padding: 7px 12px; font-size: 12.5px; }
  .kb-chip { padding: 7px 12px; font-size: 13px; }
  /* Projektdetails: der Knopf oeffnet eine eigene Seite (Pfeil nach rechts wie eine Listenzeile) */
  .kb-project [data-details-btn] { width: 100%; justify-content: space-between; padding: 14px 16px 14px 18px; font-size: 15px; }
  .kb-project .kb-details-chev { transform: none; width: 18px; height: 18px; opacity: 0.7; }
  .kb-details .simple-table { font-size: 13px; }
  .kb-details.pd-page { margin: 0; padding: 0; border-top: none; gap: 26px; }
  .pd-order { padding: 16px; border-radius: 18px; }
  .pd-order-name h3 { font-size: 17px; }
  .pd-steps { gap: 5px; }
  .pd-steps li { font-size: 11.5px; letter-spacing: -0.01em; }
  .pd-change-head strong { font-size: 15px; }
  .pd-change-details { font-size: 13.5px; }
  .pd-entry { grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; padding: 12px; border-radius: 16px; }
  .pd-entry .pd-time { grid-column: 2; justify-self: start; margin-top: 6px; }
  .pd-entry-text, .pd-entry-changes { font-size: 14px; }
  .pd-more { width: 100%; padding: 12px 14px; font-size: 14px; }
  .pd-order-hint .kb-link { display: inline-block; padding: 6px 0; }

  /* Rechnungen: jede Zeile als Karte */
  #invoices-body:has(.kb-invoices) { padding: 0; background: none; border: none; }
  .kb-invoices, .kb-invoices tbody { display: block; }
  .kb-invoices thead { display: none; }
  .kb-invoices tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'no status' 'date amount' 'open open' 'actions actions';
    column-gap: 12px; row-gap: 3px; margin-bottom: 10px; padding: 14px 16px 16px; border-radius: 18px;
    background: var(--kb-surface); border: 1px solid var(--kb-border);
  }
  .kb-invoices td { display: block; padding: 0; border: none; }
  .kb-invoices .inv-no { grid-area: no; align-self: center; font-size: 15px; font-weight: 700; }
  .kb-invoices .inv-no::before { content: 'Rechnung '; }
  .kb-invoices .inv-status { grid-area: status; justify-self: end; align-self: center; }
  .kb-invoices .inv-date { grid-area: date; align-self: end; font-size: 13px; color: var(--kb-muted); }
  .kb-invoices .inv-amount { grid-area: amount; justify-self: end; font-size: 18px; font-weight: 750; font-variant-numeric: tabular-nums; }
  .kb-invoices .inv-open { grid-area: open; font-size: 13px; color: #fca5a5; }
  .kb-invoices .inv-open::before { content: 'Offen: '; }
  .kb-invoices tr.is-paid .inv-open, .kb-invoices .inv-sep { display: none; }
  .kb-invoices .inv-actions { grid-area: actions; display: flex; gap: 8px; margin-top: 12px; white-space: normal !important; }
  .kb-invoices .inv-actions .btn-link {
    flex: 1; display: flex; align-items: center; justify-content: center; padding: 11px 12px; border-radius: 12px;
    border: 1px solid var(--kb-border-strong); color: #fff; font-size: 14px; font-weight: 600; white-space: nowrap; text-decoration: none;
  }
  .kb-invoices .inv-actions .btn-link:first-child { background: rgba(157, 61, 254, 0.18); border-color: var(--kb-purple-line); }
  .kb-invoices .inv-actions .btn-link:first-child:not(:last-child) { flex: 1.7; }

  /* Chat: fuellt den Platz zwischen App-Leiste und Tab-Leiste. 100dvh folgt auf Android der Tastatur
     (interactive-widget=resizes-content); auf iOS bleibt die Hoehe, Safari schiebt das Feld selbst hoch */
  #view-chat.active {
    display: flex; flex-direction: column;
    height: calc(100vh - var(--kb-appbar-h) - var(--kb-tabbar-h) - 20px);
    height: calc(100dvh - var(--kb-appbar-h) - var(--kb-tabbar-h) - 20px);
  }
  #view-chat .kb-head { flex: none; margin-bottom: 12px; }
  #view-chat .chat-box { flex: 1 1 auto; min-height: 0; height: auto; padding: 10px; border-radius: 20px; }
  .chat-messages { overscroll-behavior: contain; padding: 4px 2px; }
  .chat-bubble { max-width: 84%; font-size: 15px; }
  /* Eingabe des Chat-Composers als Pille, passend zu dessen runden Knoepfen (Senden-Knopf: chat-composer.css) */
  .chat-input-row textarea { box-sizing: border-box; min-height: 46px; padding: 11px 16px; border-radius: 23px; font-size: 16px; line-height: 1.35; }

  /* Tab "Verträge": Abo-Karte gross; darunter Unterseiten Stundenkonto/Bestellung und Gutschrift */
  #kb-abo-slot:has(> .kb-abo:not(.hidden)) > .kb-empty { display: none; }
  #view-vertraege .kb-abo { padding: 20px 18px 18px; border-radius: 20px; }
  #view-vertraege .kb-abo h3 { font-size: 22px; }
  #view-vertraege .kb-price strong, #view-vertraege .kb-hours strong { font-size: 32px; }
  #view-vertraege .kb-price span, #view-vertraege .kb-hours span, #view-vertraege .kb-sub, #view-vertraege .kb-offer-until { font-size: 14px; }
  #view-vertraege .kb-checks { gap: 9px; font-size: 14.5px; }
  #view-vertraege .kb-fine { font-size: 12.5px; }
  #view-vertraege .kb-side-alert { font-size: 13.5px; }
  #view-vertraege .kb-side-btn { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 14px 16px; border-radius: 14px; font-size: 15px; }
  #view-vertraege .kb-side-btn .kb-badge { float: none; flex: none; margin: 0 0 0 auto; }
  #view-vertraege .kb-btn-primary { padding: 15px 22px; font-size: 15px; }
  .kb-stats { gap: 10px; }
  .kb-stat strong { font-size: 24px; }
  .abo-summary, .abo-summary tbody, .abo-summary tr, .abo-summary td { display: block; width: auto !important; }
  .abo-summary tr { padding: 9px 0; border-bottom: 1px solid var(--kb-border); }
  .abo-summary td { padding: 0; border: none; }
  .abo-summary td:first-child {
    margin-bottom: 3px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kb-faint);
  }
  #abo-order .kb-actions, #switch-order .kb-actions { flex-direction: column; align-items: stretch; }
  #abo-order .kb-btn-primary, #switch-order .kb-btn-primary { padding: 15px 22px; font-size: 15px; }
  .abo-actions .abo-btn { flex: 1 1 auto; }

  .kb-legal { justify-content: center; gap: 10px 16px; margin-top: 32px; text-align: center; }

  /* Konto als Bottom-Sheet */
  .kb-install:not(.hidden) { display: flex; }
  .kb-sheet { inset: auto 0 0 0; width: 100%; max-width: none; margin: 0; }
  .kb-sheet::backdrop { background: rgba(0, 0, 0, 0.55); }
  .kb-sheet-panel {
    max-height: calc(100vh - env(safe-area-inset-top) - 24px); max-height: calc(100dvh - env(safe-area-inset-top) - 24px);
    overscroll-behavior: contain;
    padding: 8px max(18px, env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
    border-radius: 24px 24px 0 0; border-bottom: none; box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.5);
    transition: transform 0.24s ease-in;
  }
  .kb-sheet[open] .kb-sheet-panel { animation: kb-sheet-up 0.32s cubic-bezier(0.2, 0.9, 0.3, 1); }
  .kb-sheet.is-closing .kb-sheet-panel { opacity: 1; transform: translateY(100%); }
  .kb-sheet-panel.is-dragging { transition: none; }
  .kb-sheet-grip { display: block; width: 40px; height: 5px; margin: 2px auto 12px; border-radius: 3px; background: rgba(255, 255, 255, 0.24); }
  .kb-sheet-grip, .kb-sheet-me { touch-action: none; }
  .kb-sheet-links > a, .kb-sheet-links > button, .kb-sheet-logout { padding-top: 14px; padding-bottom: 14px; }
}

/* App-Ansicht mit Touch: der Hinweis unter dem Chat (Enter-Taste, Anhaenge) kostet zu viel Hoehe,
   Bueroklammer und Mikrofon sprechen fuer sich */
@media (max-width: 880px) and (pointer: coarse), (pointer: coarse) and (max-height: 500px) {
  .chat-hint { display: none; }
}

/* Handy quer: niedrige Tab-Leiste, Symbol und Text nebeneinander */
@media (max-width: 880px) and (max-height: 500px), (pointer: coarse) and (max-height: 500px) {
  .kb-page { --kb-tabbar-h: calc(46px + env(safe-area-inset-bottom)); }
  .kb-nav { padding-top: 4px; padding-bottom: calc(4px + env(safe-area-inset-bottom)); }
  .kb-nav-item { flex-direction: row; gap: 6px; max-width: 160px; padding: 6px 0; }
  .kb-nav-item::before { display: none; }
  .kb-nav-item.active { color: #d4b4ff; }
  .kb-tab-ico { margin-top: 0; }
  .kb-nav-item .kb-badge { position: static; margin-left: -2px; }
  /* Chat: Ueberschrift weglassen, sie steht dann in der App-Leiste */
  #view-chat .kb-head { display: none; }
}

/* Installierte App auf dem iPhone (black-translucent, siehe login.css): 100dvh ist dort um die Statusleiste
   zu kurz, 100lvh die volle Hoehe. Die Seite muss scrollbar bleiben (kein overflow: hidden beim Sheet),
   Overlays werden von oben mit voller Hoehe verankert statt mit inset: 0. */
@media (display-mode: standalone) {
  @supports (-webkit-touch-callout: none) {
    .kb-page .chat-overlay { top: 0; bottom: auto; height: 100lvh; } /* staerker als inset: 0 aus chat-composer.css */
  }
}
@media (display-mode: standalone) and (max-width: 880px), (display-mode: standalone) and (pointer: coarse) and (max-height: 500px) {
  @supports (-webkit-touch-callout: none) {
    #view-chat.active { height: calc(100lvh - var(--kb-appbar-h) - var(--kb-tabbar-h) - 20px); }
    html.kb-sheet-open { overflow: visible; }
    .kb-sheet[open] { top: 0; bottom: auto; height: 100lvh; max-height: none; display: flex; flex-direction: column; justify-content: flex-end; }
    .kb-sheet-panel { max-height: calc(100lvh - env(safe-area-inset-top) - 24px); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .kb-shell.dashboard-content-reveal, .kb-view.active, .kb-sheet[open] .kb-sheet-panel, #loading:not(.hidden), .pd-status::before { animation: none !important; }
  .kb-header, .kb-nav, .kb-logo, .kb-app-title, .kb-sheet-panel, .kb-details-chev { transition: none !important; }
}

/* ------------------------------------------------ Ansicht "Verträge" (Aufgabe 15) --- */
#kb-contracts { display: grid; gap: 16px; margin-top: 16px; }
#kb-contracts > .kb-panel + .kb-panel, #kb-contracts .kb-compare .kb-panel + .kb-panel { margin-top: 0; }
#kb-abo-slot:has(> .kb-abo:not(.hidden)) + #kb-contracts { margin-top: 16px; }
.kb-contract-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.kb-contract-head h2 { margin: 0; font-size: 20px; }
#contract-card h3 { margin: 4px 0 6px; }
.kb-status-ok { color: #86efac; background: rgba(74, 222, 128, 0.1); border: 1px solid rgba(74, 222, 128, 0.4); }
.kb-status-warn { color: #fcd34d; background: rgba(251, 191, 36, 0.1); border: 1px solid rgba(251, 191, 36, 0.4); }
.kb-contract-facts { margin: 14px 0; display: grid; gap: 10px; }
.kb-contract-facts div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 12px; font-size: 14px; }
.kb-contract-facts dt { color: var(--kb-muted); }
.kb-contract-facts dd { margin: 0; }
.kb-contract-actions { display: grid; gap: 8px; margin-top: 12px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.kb-contract-actions .kb-side-btn { margin-top: 0; text-align: center; }
.kb-withdraw { margin-top: 12px; border-color: rgba(251, 191, 36, 0.65); background: rgba(251, 191, 36, 0.12); }
.kb-compare { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kb-compare .abo-features { grid-template-columns: 1fr; }
.kb-switch-card .kb-btn-primary { display: inline-block; text-decoration: none; }
@media (max-width: 880px), (pointer: coarse) and (max-height: 500px) {
  .kb-compare { grid-template-columns: 1fr; }
  .kb-contract-facts div { grid-template-columns: 1fr; gap: 2px; }
  #view-vertraege .kb-abo.kb-abo-offer { display: none; }
  #kb-contracts { margin-top: 16px; }
}
#storage-panel:empty { display: none; }
.kb-storage-stepper { display: flex; align-items: center; gap: 14px; margin: 14px 0 6px; }
.kb-storage-stepper .kb-side-btn { width: 44px; height: 44px; padding: 0; font-size: 22px; line-height: 1; justify-content: center; }
.kb-storage-stepper .kb-side-btn:disabled { opacity: 0.4; cursor: default; }
.kb-storage-count { font-size: 15px; min-width: 6em; text-align: center; }
.kb-storage-stepper + .kb-storage-total, .kb-storage-total { margin: 0; font-size: 14px; color: var(--kb-muted); }
.kb-storage-summary { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--kb-border, rgba(127, 127, 127, 0.25)); }
.kb-storage-summary .kb-btn-primary { width: 100%; }
.kb-storage-error { color: #b3261e; }
@media (min-width: 881px) { .kb-storage-summary .kb-btn-primary { width: auto; } }

/* Unterstuetzung unter einem Arbeitsschritt und Gesamtzeit im Auftragskopf */
.pd-supports { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.pd-support { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 10px; font-size: 12.5px; line-height: 1.5; color: var(--kb-faint); }
.pd-support .pd-time { font-size: 11.5px; padding: 2px 8px; }
.pd-total { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 13.5px; color: rgba(255, 255, 255, 0.82); }