/* Kundenbereich (grün) und Verwaltung & CRM (marineblau) eines erfundenen Betriebs. */
.portal-demo { overflow: hidden; border: 1px solid #dbe3ec; border-radius: 14px; background: #f7f9fc; box-shadow: 0 12px 35px #173d6910; }
.kp-kopf, .vw-kopf { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 24px; color: #fff; }
.kp-kopf { background: #204a43; }
.vw-kopf { background: #081b33; }
.kp-marke, .vw-marke { font-size: 14px; font-weight: 600; letter-spacing: .1em; }
.kp-marke span, .vw-marke span { display: block; margin-top: 3px; color: #cfe0da; font-size: 11px; font-weight: 400; letter-spacing: .03em; }
.vw-marke span { color: #9fb3cb; }
.kp-person { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.kp-person small { display: block; color: #cfe0da; font-size: 11px; }
.kp-person i, .kp-avatar, .vw-avatar { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: #3b625a; color: #fff; font: 600 11px var(--schrift-mono); font-style: normal; }
.vw-wechsel { color: #cfe0ff; font-size: 13px; text-decoration: none; }
.vw-wechsel:hover { text-decoration: underline; }
.kp-nav { padding: 0 16px; border-bottom: 1px solid #dbe3ec; background: #fff; }
.kp-nav a[aria-current] { border-bottom-color: #285e50; color: #204a43; }
.kp .demo-zaehler { background: #285e50; }
.kp .knopf--haupt { background: #285e50; border-color: #285e50; }
.kp-inhalt, .vw-inhalt { min-width: 0; padding: 24px; }
.kp-begruessung h3, .vw-seitenkopf h3 { margin: 0 0 4px; color: #1d2a3a; font-size: 22px; font-weight: 600; letter-spacing: -.03em; }
.kp-begruessung p { margin: 0 0 18px; color: #526172; font-size: 14px; }
.kp-seitenkopf, .vw-seitenkopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 16px; }
.vw-seitenkopf p { margin: 0; }
.kp-auftrag, .kp-angebot, .vw-karte { padding: 20px; border: 1px solid #dbe3ec; border-radius: 12px; background: #fff; }
.kp-auftrag__kopf, .kp-angebot__kopf { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
.kp-auftrag h4, .kp-angebot h4, .vw-karte h4 { margin: 6px 0 4px; color: #1d2a3a; font-size: 17px; }
.kp-auftrag p { margin: 0; color: #526172; font-size: 13px; }
.kp-status { padding: 6px 12px; border-radius: 999px; background: #e7f3ef; color: #24715b; font-size: 12px; font-weight: 600; }
.kp-phasen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 18px 0 14px; padding: 0; list-style: none; }
.kp-phasen li { padding-top: 9px; border-top: 4px solid #e4ebe7; color: #526172; font-size: 12px; }
.kp-phasen .erledigt { border-color: #3e8a74; color: #204a43; }
.kp-phasen [aria-current] { font-weight: 600; }
.kp-naechster, .vw-naechster { margin: 0; padding: 12px 14px; border-radius: 9px; background: #edf6f2; color: #204a43; font-size: 14px; line-height: 1.6; }
.vw-naechster { margin-top: 14px; background: #edf4ff; color: #1d3a63; }
.kp-naechster a, .vw-naechster a { margin-left: 4px; color: inherit; font-weight: 600; }
.kp-kacheln, .vw-kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 14px 0; }
.vw-kacheln { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 0; }
.kp-kachel, .vw-kachel { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid #dbe3ec; border-radius: 12px; background: #fff; color: inherit; text-decoration: none; }
.kp-kachel:hover, .vw-kachel:hover { border-color: #9db8e8; }
.kp-kachel span, .vw-kachel span { color: #526172; font-size: 12px; }
.kp-kachel strong, .vw-kachel strong { color: #1d2a3a; font-size: 21px; font-weight: 600; letter-spacing: -.02em; }
.kp-kachel small { color: #526172; font-size: 12px; }
.kp-kontakt { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; background: #fff; border: 1px solid #dbe3ec; }
.kp-kontakt strong { color: #1d2a3a; font-size: 14px; }
.kp-kontakt p { margin: 2px 0 0; color: #526172; font-size: 12px; }
.kp-betrag { margin: 0; color: #1d2a3a; font-size: 24px; font-weight: 600; }
.portal-demo table { width: 100%; margin: 14px 0; border-collapse: collapse; font-size: 14px; }
.portal-demo td { padding: 10px 0; border-bottom: 1px solid #edf1f6; }
.portal-demo td:last-child { padding-left: 12px; text-align: right; white-space: nowrap; }
.portal-demo .demo-summenzeile td { border-bottom: 0; font-weight: 600; }
/* Verwaltung: Navigation links, Inhalt rechts */
.vw-raster { display: grid; grid-template-columns: 190px minmax(0, 1fr); }
.vw-nav { flex-direction: column; gap: 2px; padding: 14px 10px; border-right: 1px solid #dbe3ec; background: #fff; }
.vw-nav a { min-height: 40px; padding: 0 12px; border-bottom: 0; border-radius: 8px; }
.vw-nav a[aria-current] { background: #edf4ff; color: #155eef; }
.vw-spalten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.vw-karte > :first-child { margin-top: 0; }
.vw-zwischentitel { margin: 22px 0 10px; color: #1d2a3a; font-size: 15px; }
.vw-aufgaben, .vw-verlauf { display: grid; gap: 0; margin: 8px 0 0; padding: 0; list-style: none; }
.vw-aufgabe { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid #edf1f6; }
.vw-aufgabe strong { display: block; color: #1d2a3a; font-size: 14px; font-weight: 500; }
.demo-kundenlink { color: #526172; font-size: 12px; }
.vw-verlauf__eintrag { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 2px 12px; padding: 10px 0; border-top: 1px solid #edf1f6; }
.vw-verlauf__eintrag p { margin: 0; color: #1d2a3a; font-size: 13.5px; line-height: 1.5; }
.vw-verlauf__eintrag .demo-fein { grid-column: 2; }
.vw-verlauf__art { grid-row: span 2; align-self: start; padding: 2px 8px; border-radius: 6px; background: #eef2f7; color: #45576d; font-size: 11px; font-weight: 600; text-align: center; }
.vw-verlauf__eintrag--system .vw-verlauf__art { background: #edf4ff; color: #1d4ea8; }
.vw-filter fieldset { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; margin-bottom: 14px; }
.demo-sammlung .vw-filter label { margin-top: 0; }
.vw-crm { display: grid; grid-template-columns: minmax(220px, .9fr) minmax(0, 1.6fr); align-items: start; gap: 14px; }
.vw-kundenliste { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.vw-kunde { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 4px 10px; align-items: center; width: 100%; padding: 10px 12px; border: 1px solid #dbe3ec; border-radius: 10px; background: #fff; font: inherit; text-align: left; cursor: pointer; }
.vw-kunde .demo-etikett { grid-column: 2; justify-self: start; }
.vw-kunde[aria-pressed="true"] { border-color: #155eef; box-shadow: inset 3px 0 0 #155eef; }
.vw-kunde__text strong { display: block; color: #1d2a3a; font-size: 14px; }
.vw-kunde__text span { color: #526172; font-size: 12px; }
.vw-avatar { background: #20364f; }
.vw-akte { padding: 20px; border: 1px solid #dbe3ec; border-radius: 12px; background: #fff; }
.vw-akte__kopf { display: flex; align-items: center; gap: 12px; }
.vw-akte__kopf h4 { margin: 0 0 4px; color: #1d2a3a; font-size: 18px; }
.vw-akte__daten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 16px 0; }
.vw-akte__daten dt { color: #526172; font-size: 11px; }
.vw-akte__daten dd { margin: 2px 0 0; color: #1d2a3a; font-size: 13px; overflow-wrap: anywhere; }
.vw-akte__vorgaenge { padding: 12px 14px; border-radius: 9px; background: #f4f7fb; }
.vw-akte h5 { margin: 16px 0 4px; color: #1d2a3a; font-size: 13px; }
.vw-akte__vorgaenge h5 { margin-top: 0; }
.vw-akte__vorgaenge ul { margin: 0; padding-left: 18px; color: #34465f; font-size: 13px; line-height: 1.7; }
.vw-notiz { margin-top: 16px; padding-top: 14px; border-top: 1px solid #edf1f6; }
.demo-sammlung .vw-notiz legend { margin-bottom: 4px; font-size: 14px; }
.vw-notiz__zeile { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; }
.demo-sammlung .vw-haken { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; }
.vw-zahlungsplan { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.vw-zahlungsplan p { margin: 4px 0 0; }
.vw-zahlungsplan .knopf { flex-shrink: 0; }
.vw-pruefliste { display: grid; margin: 10px 0 12px; padding: 0; list-style: none; }
.vw-pruefpunkt { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid #edf1f6; font-size: 14px; }
.vw-pruefpunkt--ok strong { color: #1f6447; }
.vw-pruefpunkt--hinweis strong { color: #7a4f14; }
.vw-pruefpunkt--offen strong { color: #a32626; }
@media (max-width: 80em) {
  .vw-raster { grid-template-columns: 1fr; }
  .vw-nav { flex-direction: row; padding: 0 12px; border-right: 0; border-bottom: 1px solid #dbe3ec; }
  .vw-nav a { min-height: 44px; border-radius: 0; border-bottom: 3px solid transparent; }
  .vw-nav a[aria-current] { background: transparent; border-bottom-color: #155eef; }
}
@media (max-width: 47.99em) {
  .kp-kopf, .vw-kopf { padding: 14px 16px; }
  .kp-person > span { display: none; }
  .kp-inhalt, .vw-inhalt { padding: 16px; }
  .kp-kacheln, .vw-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kp-kacheln .kp-kachel:last-child { grid-column: 1 / -1; }
  .kp-phasen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vw-spalten, .vw-crm, .vw-filter fieldset, .vw-notiz__zeile { grid-template-columns: 1fr; }
  /* Kundenliste am Handy als kurze Zeilen, Status rechts daneben. */
  .vw-kunde { grid-template-columns: 32px minmax(0, 1fr) auto; padding: 8px 10px; }
  .vw-kunde .vw-avatar { width: 32px; height: 32px; }
  .vw-kunde .demo-etikett { grid-column: 3; grid-row: 1; justify-self: end; }
  .vw-akte { padding: 16px; }
  .vw-akte__daten { gap: 8px 12px; }
  .vw-zahlungsplan { align-items: stretch; flex-direction: column; }
  .vw-aufgabe { align-items: flex-start; flex-direction: column; gap: 2px; }
}