/* Site palette instead of blue (Genusspartner, Ilya 13.09.2026: "everything blue in the portal -> green").
   The portal's blue comes from two tokens: --gp-accent/--gp-accent-soft (buttons, active nav, icons, badges,
   avatar, banner) and --gp-blue/--gp-blue-light used directly (notification badge, and the shared calendar in
   admin/css/datepicker.css). Both are re-pointed here, on the portal page only (this file loads nowhere else),
   so admin/ and tokens.css (the admin mirror) stay untouched. Values are the theme's own tokens with fallbacks:
   primary #318100 = site buttons (white text 4.92:1), surface #f6f9f5 as the soft tint (primary text on it
   4.63:1; mint #e9f5e5 would drop to 4.37:1). The B2B accent was purple — it follows the site palette too. */
:root {
  --gp-blue: var(--wp--preset--color--primary, #318100);
  --gp-blue-light: var(--wp--preset--color--surface, #f6f9f5);
}

/* Loads on the portal page alone, so uncapping the theme's own column here is
   safe. Nothing below measures the viewport: the portal insets its left edge and
   its parent carries the full-width rules, so a scrollbar cannot overflow 100vw. */
body :has(.diegp-customer-portal) {
  max-width: none;
  width: auto;
  padding-inline: 0;
}

/* Direct parent only — every ancestor matches the rule above, but the rules must
   be drawn once. */
body :has(> .diegp-customer-portal) {
  border-top: 1px solid var(--gp-border);
  border-bottom: 1px solid var(--gp-border);
  background: var(--gp-surface);
}

.diegp-customer-portal {
  --gp-accent: var(--gp-blue);
  --gp-accent-soft: var(--gp-blue-light);
  /* Shell per Figma "Überblick" 2564:4789 (task 65 part 1): site font, site greens, a 323px
     white sidebar flush left, a 64px white top bar, #f6f9f5 canvas with 32px padding. */
  --gp-font: var(--wp--preset--font-family--body, 'Montserrat', Arial, sans-serif);
  --gp-cp-ink: var(--wp--preset--color--contrast, #153700);
  --gp-cp-ink-2: var(--wp--preset--color--muted, #4e5c45);
  --gp-cp-ink-3: var(--wp--preset--color--muted-soft, #66725e);
  --gp-cp-white: var(--wp--preset--color--base, #fff);
  --gp-cp-canvas: var(--wp--preset--color--surface, #f6f9f5);
  --gp-cp-line: rgba(78, 92, 69, 0.16);
  /* Figma drop shadows (x y blur spread, #184000 at 8%). */
  --gp-cp-shadow-card: 0 35px 34.5px -37px rgba(24, 64, 0, 0.08);
  --gp-cp-shadow-pop: 0 16px 29.1px -19px rgba(24, 64, 0, 0.08);
  --gp-cp-radius-l: 24px;
  --gp-cp-radius-m: 16px;
  --gp-cp-topbar-h: 64px;
  --gp-cp-content-pad: 32px;
  --gp-cp-side-w: 323px;

  display: grid;
  grid-template-columns: var(--gp-cp-side-w) minmax(0, 1fr);
  gap: 0;
  width: auto;
  max-width: none;
  margin: 0;
  position: relative;
  min-height: calc(100vh - 90px);
  background: var(--gp-cp-canvas);
  font-family: var(--gp-font), sans-serif;
  color: var(--gp-text);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

.diegp-cp-side {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100%;
  max-height: 100vh;
  overflow-y: auto;
}

.diegp-customer-portal--b2b {
  --gp-accent: var(--gp-blue);
  --gp-accent-soft: var(--gp-blue-light);
}

.diegp-customer-portal *,
.diegp-customer-portal *::before,
.diegp-customer-portal *::after {
  box-sizing: border-box;
}

/* Defensive reset against theme bleed into portal typography. */
.diegp-customer-portal h1,
.diegp-customer-portal h2,
.diegp-customer-portal h3 {
  text-transform: none;
  letter-spacing: -0.01em;
  font-family: inherit;
  color: var(--gp-text);
  margin: 0;
}

.diegp-customer-portal,
.diegp-customer-portal p,
.diegp-customer-portal span,
.diegp-customer-portal div,
.diegp-customer-portal td,
.diegp-customer-portal th {
  overflow-wrap: anywhere;
  word-break: normal;
}

.diegp-customer-portal--guest {
  display: block;
  padding: 24px;
  max-width: 520px;
}

/* ---- sidebar (Figma 2564:4793) ----------------------------------------- */
.diegp-cp-side {
  background: var(--gp-cp-white);
  box-shadow: 19px 0 34.5px -37px rgba(24, 64, 0, 0.08);
  padding: 40px 8px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  z-index: 2;
}

/* Profile block: avatar 48 + name 16/700 + type 12/500; click opens "Abmelden". */
.diegp-cp-profile {
  position: relative;
  margin: 0 16px;
}

.diegp-cp-user-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 0 8px;
  border: 0;
  border-radius: var(--gp-cp-radius-m);
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.diegp-cp-user-btn:focus-visible {
  outline: 2px solid var(--gp-accent);
  outline-offset: 4px;
}

.diegp-cp-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--wp--preset--color--leaf, #b5d77c) 12%, var(--wp--preset--color--leaf-deep, #83b363) 100%);
  color: var(--gp-cp-white);
}

.diegp-cp-avatar svg {
  width: 25px;
  height: 25px;
}

.diegp-cp-profile-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.diegp-cp-profile-name {
  color: var(--gp-cp-ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 0.01em;
}

.diegp-cp-user-btn:hover .diegp-cp-profile-name,
.diegp-cp-user-btn[aria-expanded='true'] .diegp-cp-profile-name {
  color: var(--gp-accent);
}

.diegp-cp-profile-type {
  color: var(--gp-cp-ink-3);
  font-size: 12px;
  font-weight: 500;
  line-height: 17px;
}

.diegp-cp-user-dd {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  padding: 8px;
  background: var(--gp-cp-white);
  border: 1px solid var(--gp-cp-line);
  border-radius: var(--gp-cp-radius-m);
  box-shadow: var(--gp-cp-shadow-pop);
  z-index: 40;
}

.diegp-cp-user-dd-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-radius: 12px;
  color: var(--gp-cp-ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
}

.diegp-cp-user-dd-item:hover,
.diegp-cp-user-dd-item:focus-visible {
  background: var(--gp-cp-canvas);
  color: var(--gp-accent);
}

.diegp-cp-user-dd-item svg {
  width: 20px;
  height: 20px;
  flex: none;
}

/* Menu items (Figma 2564:4816 …): 56px rows, 8/24 padding, icon 24, gap 16, radius 16. */
.diegp-cp-nav {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.diegp-cp-navbtn {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 56px;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: var(--gp-cp-radius-m);
  padding: 8px 24px;
  color: var(--gp-cp-ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  cursor: pointer;
  transition: background var(--gp-transition), color var(--gp-transition);
}

.diegp-cp-navbtn svg {
  width: 24px;
  height: 24px;
  flex: none;
  color: currentColor;
}

.diegp-cp-navbtn:hover {
  background: var(--gp-cp-canvas);
}

.diegp-cp-navbtn.is-active {
  background: var(--gp-cp-canvas);
  box-shadow: var(--gp-cp-shadow-card);
  color: var(--gp-accent);
  font-weight: 600;
}

/* Open-requests counter (Figma 2590:6403): 20px leaf-gradient circle, 600 14/14 #f6f9f5. */
.diegp-cp-count {
  display: inline-grid;
  place-items: center;
  flex: none;
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 100px;
  background: linear-gradient(180deg, var(--wp--preset--color--leaf, #b5d77c) 12%, var(--wp--preset--color--leaf-deep, #83b363) 100%);
  color: var(--wp--preset--color--surface, #f6f9f5);
  font-size: 14px;
  font-weight: 600;
  line-height: 14px;
  letter-spacing: 0.01em;
  text-align: center;
}

.diegp-cp-count[data-count='0'] {
  display: none;
}

/* ---- main + topbar (Figma 2565:4652) ------------------------------------ */
.diegp-cp-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.diegp-cp-topbar {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: var(--gp-cp-topbar-h);
  flex: none;
  background: var(--gp-cp-white);
  box-shadow: 19px 35px 34.5px -37px rgba(24, 64, 0, 0.08);
  position: relative;
  z-index: 1;
}

.diegp-cp-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  box-sizing: border-box;
  width: 100%;
  padding: 12px var(--gp-cp-content-pad);
}

.diegp-cp-who {
  display: flex;
  align-items: center;
}

/* ---- topbar approvals bell + dropdown ----------------------------------- */
.diegp-cp-bell {
  position: relative;
}

/* Figma 2590:6548: 40px circle, 1px #4e5c45 at 50%, 24px icon; unread = 10px orange dot. */
.diegp-cp-bell-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(78, 92, 69, 0.5);
  border-radius: 50%;
  background: var(--gp-cp-white);
  color: var(--gp-cp-ink-2);
  cursor: pointer;
  transition: background var(--gp-transition);
}

.diegp-cp-bell-btn:hover,
.diegp-cp-bell-btn[aria-expanded='true'] {
  background: var(--gp-cp-canvas);
}

.diegp-cp-bell-btn svg {
  width: 24px;
  height: 24px;
}

/* The count stays in the DOM (JS keeps it current) but the design shows a plain dot. */
.diegp-cp-bell-dot {
  position: absolute;
  top: -1px;
  right: -1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--wp--preset--color--orange, #f18314);
  color: transparent;
  font-size: 0;
  overflow: hidden;
}

.diegp-cp-bell-dot[data-count='0'] {
  display: none;
}

.diegp-cp-bell-dd {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 360px;
  max-width: calc(100vw - 32px);
  background: var(--gp-cp-white);
  border: 1px solid var(--gp-cp-line);
  border-radius: var(--gp-cp-radius-m);
  box-shadow: var(--gp-cp-shadow-pop);
  z-index: 40;
  overflow: hidden;
}

.diegp-cp-bell-dd-head {
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--gp-cp-line);
  font-size: 16px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 0.01em;
  color: var(--gp-cp-ink);
}

.diegp-cp-bell-dd-list {
  max-height: 320px;
  overflow-y: auto;
}

.diegp-cp-bell-dd-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--gp-border);
  padding: 10px 14px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background var(--gp-transition);
}

.diegp-cp-bell-dd-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.diegp-cp-bell-dd-sum {
  color: var(--gp-text-2);
  font-size: 12px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.diegp-cp-bell-dd-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--gp-text-3);
  font-size: 11px;
}

.diegp-cp-bell-dd-kw {
  font-weight: 700;
  color: var(--gp-accent);
}

.diegp-cp-bell-dd-item:hover {
  background: var(--gp-surface-2);
}

.diegp-cp-bell-dd-item.is-new {
  background: var(--gp-accent-soft);
  box-shadow: inset 3px 0 0 var(--gp-accent);
}

.diegp-cp-bell-dd-empty {
  padding: 14px;
  margin: 0;
  font-size: 13px;
}

.diegp-cp-bell-dd-all {
  display: block;
  width: 100%;
  text-align: center;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--gp-cp-line);
  padding: 14px 16px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: var(--gp-accent);
  cursor: pointer;
}

.diegp-cp-bell-dd-all:hover {
  background: var(--gp-cp-canvas);
}

/* ---- notifications view ---- */
.diegp-cp-row.diegp-cp-notification {
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  padding: 16px 20px;
  text-align: left;
}

.diegp-cp-notification.is-expandable {
  cursor: pointer;
}
.diegp-cp-notification.is-expandable:hover {
  background: var(--gp-surface-2);
}
.diegp-cp-notification:focus-visible {
  outline: 2px solid var(--gp-accent);
  outline-offset: -2px;
}

.diegp-cp-notif-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}

.diegp-cp-notif-head {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Chevron that flips when the row is open. */
.diegp-cp-notif-caret {
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--gp-text-3);
  border-bottom: 2px solid var(--gp-text-3);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
  flex: none;
}
.diegp-cp-notification.is-expanded .diegp-cp-notif-caret {
  transform: rotate(-135deg);
}

/* Collapsed one-liner: never wraps, ellipsis when long. */
.diegp-cp-notif-short {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  font-weight: 300;
}

.diegp-cp-notif-full {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 2px;
}

.diegp-cp-notif-full .diegp-cp-muted {
  font-weight: 300;
}

.diegp-cp-notif-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 4px;
}

.diegp-cp-notif-link {
  align-self: flex-start;
}

/* Right column: badge + timestamp, pinned to the top of the row. */
.diegp-cp-notif-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  white-space: nowrap;
  flex: none;
}

.diegp-cp-notif-when {
  font-size: 12px;
  color: var(--gp-text-3);
}

/* Notifications is reachable from the bell's "All notifications" link; hide its sidebar entry. */
.diegp-cp-navbtn[data-view='notifications'] {
  display: none;
}

/* Numbered pager for the notifications feed. */
.diegp-cp-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 16px 6px 4px;
}
.diegp-cp-pager.is-loading {
  opacity: 0.5;
  pointer-events: none;
}
.diegp-cp-pagebtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--gp-border);
  border-radius: var(--gp-radius-sm);
  background: var(--gp-surface);
  color: var(--gp-text);
  font: inherit;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition:
    background var(--gp-transition),
    border-color var(--gp-transition);
}
button.diegp-cp-pagebtn:hover {
  background: var(--gp-surface-2);
  border-color: var(--gp-text-3);
}
.diegp-cp-pagebtn.is-active {
  background: var(--gp-accent);
  border-color: var(--gp-accent);
  color: #fff;
  cursor: default;
}
.diegp-cp-pagebtn.is-disabled {
  color: var(--gp-text-3);
  opacity: 0.5;
  cursor: default;
}
.diegp-cp-pageellip {
  padding: 0 4px;
  color: var(--gp-text-3);
}

/* The bell dropdown is narrow and read-only — compact, no expand affordance there.
   The whole row is a link to the same notification on the full page. */
.diegp-cp-bell-dd-list .diegp-cp-notification {
  position: relative;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 10px 14px;
  cursor: pointer;
}
.diegp-cp-bell-dd-list .diegp-cp-notification:hover {
  background: var(--gp-surface-2);
}
/* Unread marker: an orange dot in the row's top-right corner. */
.diegp-cp-bell-dd-list .diegp-cp-notification.is-new::after {
  content: '';
  position: absolute;
  top: 12px;
  right: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gp-orange);
}
.diegp-cp-bell-dd-list .diegp-cp-notif-caret,
.diegp-cp-bell-dd-list .diegp-cp-notif-full {
  display: none;
}
.diegp-cp-bell-dd-list .diegp-cp-notif-side {
  flex-direction: row;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  margin-top: 2px;
}

/* ---- content + views ---------------------------------------------------- */
.diegp-cp-content {
  flex: 1 1 auto;
  width: 100%;
  padding: var(--gp-cp-content-pad);
}

.diegp-cp-view {
  display: none;
}

.diegp-cp-view.is-active {
  display: block;
}

.diegp-cp-pageh {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.diegp-cp-pageh h1 {
  font-size: 22px;
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.015em;
}

.diegp-cp-pageh p {
  margin: 4px 0 0;
  color: var(--gp-text-3);
  font-size: 13.5px;
}

.diegp-cp-lead {
  margin: 0 0 16px;
}

.diegp-cp-h2 {
  font-size: 15px;
  font-weight: 800;
  margin: 0 0 14px;
}

.diegp-cp-muted {
  color: var(--gp-text-3);
}

.diegp-cp-cardsub {
  margin: 4px 0 14px;
  color: var(--gp-text-3);
  font-size: 12.5px;
}

.diegp-cp-sublink,
.diegp-cp-sublink:visited {
  color: inherit;
  text-decoration: none !important;
  cursor: pointer;
}

.diegp-cp-sublink:hover,
.diegp-cp-sublink:focus-visible {
  color: var(--gp-accent);
}

/* On the accent-filled KPI card the accent hover would vanish into the background. */
.diegp-cp-kpi-accent .diegp-cp-sublink:hover,
.diegp-cp-kpi-accent .diegp-cp-sublink:focus-visible {
  color: #fff;
}

.diegp-cp-badgelink {
  text-decoration: none;
  cursor: pointer;
}

/* Highlight whatever the router scrolled to (subscription card, request row):
   a soft accent wash + a thin left accent bar. It stays until the user clicks
   elsewhere (see the JS) — no auto-fade. */
.diegp-cp-sub.is-target,
.diegp-cp-request.is-target,
.diegp-cp-notification.is-target {
  background: var(--gp-accent-soft);
  box-shadow: inset 3px 0 0 0 var(--gp-accent);
  border-radius: var(--gp-radius-sm);
  transition:
    background var(--gp-transition),
    box-shadow var(--gp-transition),
    padding var(--gp-transition),
    margin var(--gp-transition);
}

.diegp-cp-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.diegp-cp-nowrap {
  white-space: nowrap;
}

.diegp-cp-cwchip {
  display: inline-block;
  border: 1px solid var(--gp-border);
  border-radius: var(--gp-radius-sm);
  padding: 3px 9px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  background: var(--gp-surface);
}

/* ---- overview: next delivery + driver note share one card ---------------- */
.diegp-cp-nextgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
}

/* The divider belongs to the note column so it disappears with the stack. */
.diegp-cp-nextcol-note {
  padding-left: 24px;
  border-left: 1px solid var(--gp-border);
}

@media (max-width: 900px) {
  .diegp-cp-nextgrid {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .diegp-cp-nextcol-note {
    padding-left: 0;
    padding-top: 20px;
    border-left: 0;
    border-top: 1px solid var(--gp-border);
  }
}

.diegp-cp-cell-content {
  max-width: 260px;
}

.diegp-cp-btnrow-nowrap {
  flex-wrap: nowrap;
  justify-content: flex-end;
}

/* ---- cards + grid ------------------------------------------------------- */
.diegp-card {
  background: var(--gp-surface);
  border: 1px solid var(--gp-border);
  border-radius: var(--gp-radius-lg);
  box-shadow: var(--gp-shadow-xs);
  padding: 20px;
  margin-bottom: 18px;
}

.diegp-cp-grid {
  display: grid;
  gap: 16px;
  margin-bottom: 18px;
}

.diegp-cp-grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.diegp-cp-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 900px) {
  .diegp-cp-grid-2,
  .diegp-cp-grid-3,
  .diegp-cp-grid-2.diegp-cp-grid,
  .diegp-cp-grid-3.diegp-cp-grid {
    grid-template-columns: 1fr;
  }
}

.diegp-cp-grid.diegp-cp-grid-2,
.diegp-cp-grid.diegp-cp-grid-3 {
  margin-bottom: 18px;
}

.diegp-cp-grid .diegp-card {
  margin-bottom: 0;
}

/* ---- KPI tiles ---------------------------------------------------------- */
.diegp-cp-kpi {
  padding: 18px 20px;
}

.diegp-cp-kpi-label {
  font-size: 12px;
  color: var(--gp-text-3);
  font-weight: 600;
}

.diegp-cp-kpi-value {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-top: 6px;
}

.diegp-cp-kpi-hint {
  font-size: 12px;
  color: var(--gp-text-3);
  margin-top: 6px;
}

.diegp-cp-kpi-accent {
  background: var(--gp-accent);
  border-color: var(--gp-accent);
  color: #fff;
}

.diegp-cp-kpi-accent .diegp-cp-kpi-label,
.diegp-cp-kpi-accent .diegp-cp-kpi-hint {
  color: rgba(255, 255, 255, 0.85);
}

/* ---- rows / definition lists ------------------------------------------- */
.diegp-cp-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--gp-border-soft);
}

.diegp-cp-row:last-child {
  border-bottom: 0;
}

.diegp-cp-row b,
.diegp-cp-b {
  font-weight: 700;
}

.diegp-cp-right {
  margin-left: auto;
  text-align: right;
  color: var(--gp-text-2);
}

.diegp-cp-planned-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.diegp-cp-dl {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--gp-border-soft);
  font-size: 13.5px;
}

.diegp-cp-dl:last-child {
  border-bottom: 0;
}

.diegp-cp-dl span {
  color: var(--gp-text-3);
}

/* ---- buttons + badges (portal-local copies, token-driven) --------------- */
.diegp-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--gp-radius-sm);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--gp-transition);
  white-space: nowrap;
  border: 1px solid transparent;
  line-height: 1.4;
}

.diegp-btn-sm {
  padding: 6px 11px;
  font-size: 12.5px;
}

.diegp-btn-primary {
  background: var(--gp-accent);
  color: #fff;
  border-color: var(--gp-accent);
}

.diegp-btn-secondary {
  background: var(--gp-surface);
  color: var(--gp-text-2);
  border-color: var(--gp-border);
  box-shadow: var(--gp-shadow-xs);
}

.diegp-btn-secondary:hover {
  background: var(--gp-surface-2);
  border-color: #c8d0dc;
  color: var(--gp-text);
}

.diegp-btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.diegp-btn svg {
  width: 15px;
  height: 15px;
  flex: none;
}

.diegp-cp-btnrow {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.diegp-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  white-space: nowrap;
  background: var(--gp-gray-light);
  color: var(--gp-text-2);
}

.diegp-badge-active {
  background: var(--gp-green-light);
  color: var(--gp-green);
  font-weight: 700;
}

.diegp-cp-dot {
  display: inline-block;
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.diegp-cp-badge-muted {
  background: var(--gp-gray-light);
  color: var(--gp-text-3);
}

/* «offen – Rücklastschrift» in Rechnungen: two lines on a phone, whole words only. */
.diegp-badge.diegp-cp-badge-wrap {
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
  line-height: 1.3;
  padding: 3px 8px;
  gap: 5px;
  letter-spacing: 0;
}

.diegp-badge-notification {
  background: var(--gp-blue-light);
  color: var(--gp-text-3);
  font-weight: 700;
}

/* Keep just a small blue accent in the dot. */
.diegp-badge-notification .diegp-cp-dot {
  background: var(--gp-blue);
}

.diegp-badge-inactive {
  background: var(--gp-red-light);
  color: var(--gp-red);
  font-weight: 700;
}

.diegp-badge-review {
  background: var(--gp-orange-light);
  color: var(--gp-orange);
  font-weight: 700;
}

/* ---- tables ------------------------------------------------------------- */
.diegp-cp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.diegp-cp-table thead th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gp-text-3);
  font-weight: 700;
  padding: 0 12px 11px;
}

.diegp-cp-table tbody td {
  padding: 12px;
  border-top: 1px solid var(--gp-border-soft);
  vertical-align: middle;
}

/* ---- invoice drill-down ------------------------------------------------ */
.diegp-cp-inv-row {
  cursor: pointer;
}

.diegp-cp-inv-row:hover {
  background: var(--gp-surface-2);
}

.diegp-cp-chev {
  display: inline-block;
  margin-right: 9px;
  color: var(--gp-text-3);
  transition: transform var(--gp-transition);
}

.diegp-cp-inv-row.is-open .diegp-cp-chev {
  transform: rotate(90deg);
  color: var(--gp-accent);
}

.diegp-cp-inv-detail > td {
  background: var(--gp-surface-2);
  padding: 2px 12px 14px;
  border-top: 0;
}

.diegp-cp-break {
  border: 1px solid var(--gp-border);
  border-radius: var(--gp-radius-sm);
  overflow: hidden;
  background: var(--gp-surface);
}

.diegp-cp-break-line {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 14px;
  font-size: 13px;
  border-bottom: 1px solid var(--gp-border-soft);
}

.diegp-cp-break-line:last-child {
  border-bottom: 0;
}

.diegp-cp-break-amt {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.diegp-cp-break-sub {
  color: var(--gp-text-3);
}

.diegp-cp-break-net {
  font-weight: 600;
}

.diegp-cp-break-sum {
  font-weight: 700;
  background: var(--gp-surface-2);
}

/* ---- subscription (Abo) cards ------------------------------------------ */
/* A deactivated subscription reads as muted — its content is dimmed and slightly
   desaturated, but the action buttons (Activate, …) stay full-colour and clear.
   Dim per-child (not the card) so the buttons can opt out — opacity on the card
   would apply as a group and couldn't be undone on a child. */
.diegp-cp-sub.is-inactive > *:not(.diegp-cp-sub-actions) {
  opacity: 0.6;
  filter: grayscale(0.4);
}

.diegp-cp-sub-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.diegp-cp-sub-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
}

.diegp-cp-sub-cycle {
  color: var(--gp-text-3);
  font-size: 13px;
  margin-top: 3px;
}

.diegp-cp-sub-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--gp-text-2);
  margin: 12px 0;
  padding: 9px 12px;
  background: var(--gp-surface-2);
  border: 1px solid var(--gp-border-soft);
  border-radius: var(--gp-radius-sm);
}

.diegp-cp-sub-info svg {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--gp-text-3);
}

.diegp-cp-sub-actions {
  margin-top: 14px;
}

.diegp-cp-newabo {
  margin-bottom: 18px;
}

.diegp-cp-btn-danger {
  color: var(--gp-red);
  border-color: #f0cfcc;
}

/* Withdrawing a pending status change is not destructive — amber, not red.
   Declared after .diegp-btn-secondary:hover, whose grey would otherwise win. */
.diegp-cp-cancel-deact,
.diegp-cp-cancel-deact:hover {
  color: var(--gp-orange);
  border-color: var(--gp-orange);
  background: var(--gp-surface);
}

.diegp-cp-cancel-deact:hover {
  background: var(--gp-orange-light);
}

.diegp-cp-btn-activate,
.diegp-cp-btn-activate:hover {
  color: var(--gp-green);
  border-color: var(--gp-green);
  background: var(--gp-surface);
}

.diegp-cp-btn-activate:hover {
  background: var(--gp-green-light);
}

.diegp-cp-soon {
  font-size: 12px;
  color: var(--gp-text-3);
  margin: 8px 0 0;
}

/* ---- banner ------------------------------------------------------------- */
.diegp-cp-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--gp-accent-soft);
  border: 1px solid var(--gp-border);
  border-radius: var(--gp-radius);
  padding: 12px 16px;
  font-size: 13px;
  color: var(--gp-text-2);
  margin-bottom: 18px;
}

.diegp-cp-banner svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--gp-accent);
}

/* ---- FAQ / help --------------------------------------------------------- */
.diegp-cp-faqgroup {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gp-accent);
  font-weight: 800;
  margin: 26px 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--gp-accent-soft);
}

.diegp-cp-faq {
  background: var(--gp-surface);
  border: 1px solid var(--gp-border);
  border-radius: var(--gp-radius);
  box-shadow: var(--gp-shadow-xs);
  margin-bottom: 10px;
  overflow: hidden;
}

.diegp-cp-faq > summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.diegp-cp-faq > summary::-webkit-details-marker {
  display: none;
}

.diegp-cp-faq > summary::before {
  content: '›';
  color: var(--gp-accent);
  font-weight: 800;
  font-size: 18px;
  line-height: 1;
  transition: transform var(--gp-transition);
  display: inline-block;
}

.diegp-cp-faq[open] > summary::before {
  transform: rotate(90deg);
}

.diegp-cp-faq-a {
  padding: 0 16px 15px 38px;
  color: var(--gp-text-2);
  font-size: 13.5px;
  line-height: 1.65;
}

.diegp-cp-faq-a b {
  color: var(--gp-text);
}

/* ---- toast notifications (matches the admin's #diegp-toast-container) --- */
#diegp-toast-container {
  position: fixed;
  top: 72px;
  right: 20px;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.diegp-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px 11px 15px;
  border-radius: 10px;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.18),
    0 1px 4px rgba(0, 0, 0, 0.1);
  font-family: var(--gp-font), sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  color: #fff;
  max-width: 360px;
  min-width: 220px;
  opacity: 0;
  transform: translateX(20px);
  transition:
    opacity 0.22s ease,
    transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: all;
}

.diegp-toast-show {
  opacity: 1;
  transform: translateX(0);
}

.diegp-toast-success {
  background: var(--gp-green);
}

.diegp-toast-error {
  background: var(--gp-red);
}

.diegp-toast-icon {
  display: flex;
  flex-shrink: 0;
}

.diegp-toast-msg {
  flex: 1;
  line-height: 1.4;
}

.diegp-toast-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 0 0 6px;
  flex-shrink: 0;
  transition: color 0.15s;
}

.diegp-toast-close:hover {
  color: #fff;
}

.diegp-cp-request-side {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* ---- form fields -------------------------------------------------------- */
.diegp-cp-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

/* Any author `display` outranks the UA rule for [hidden]. Without this the
   "Other" reason field stays laid out even while marked hidden. */
.diegp-customer-portal [hidden] {
  display: none !important;
}

.diegp-cp-field > label {
  font-size: 12px;
  font-weight: 700;
  color: var(--gp-text-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.diegp-cp-field input,
.diegp-cp-field select,
.diegp-cp-field textarea {
  width: 100%;
  border: 1px solid var(--gp-border);
  border-radius: var(--gp-radius-sm);
  padding: 9px 12px;
  font: inherit;
  font-size: 13.5px;
  background: var(--gp-surface);
  color: var(--gp-text);
}

.diegp-cp-field .diegp-cp-help {
  font-size: 12px;
  color: var(--gp-text-3);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

.diegp-cp-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.diegp-cp-weeks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.diegp-cp-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--gp-border);
  border-radius: var(--gp-radius-sm);
  padding: 6px 11px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--gp-surface);
  color: var(--gp-text-2);
}

.diegp-cp-shoplink {
  display: inline-block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gp-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.diegp-cp-shoplink:hover {
  text-decoration: none;
}

.diegp-cp-field input:disabled,
.diegp-cp-field select:disabled,
.diegp-cp-field textarea:disabled,
.diegp-cp-chip input:disabled {
  background: var(--gp-surface-2);
  color: var(--gp-text-2);
  cursor: not-allowed;
  opacity: 0.85;
}

.diegp-cp-field input.is-pending:disabled {
  background: var(--gp-accent-soft);
  border-color: var(--gp-accent);
  color: var(--gp-accent);
  opacity: 1;
}

.diegp-cp-form--disabled {
  position: relative;
}

.diegp-cp-preview-note {
  display: flex;
  gap: 8px;
  align-items: center;
  background: var(--gp-orange-light);
  color: var(--gp-orange);
  border: 1px solid #f0d8a8;
  border-radius: var(--gp-radius-sm);
  padding: 9px 12px;
  font-size: 12.5px;
  font-weight: 600;
  margin: 4px 0 2px;
}

.diegp-cp-warn {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--gp-orange-light);
  color: var(--gp-orange);
  border: 1px solid #f0d8a8;
  border-radius: var(--gp-radius-sm);
  padding: 11px 13px;
  font-size: 13px;
  line-height: 1.4;
  margin-bottom: 16px;
}

.diegp-cp-warn svg {
  flex: none;
  margin-top: 1px;
}

/* ---- modal -------------------------------------------------------------- */
.diegp-cp-ovl {
  position: fixed;
  inset: 0;
  background: rgba(16, 24, 40, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 100000;
}

.diegp-cp-ovl.is-open {
  display: flex;
}

.diegp-cp-modal {
  background: var(--gp-surface);
  border-radius: var(--gp-radius-lg);
  box-shadow: var(--gp-shadow-lg);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px;
}

.diegp-cp-modal h3 {
  margin: 0 0 4px;
  font-size: 17px;
}

.diegp-cp-modal-sub {
  margin: 0 0 16px;
  color: var(--gp-text-3);
  font-size: 13.5px;
}

/* No subscription id to name (e.g. "New subscription") — don't hold the space. */
.diegp-cp-modal-sub:empty {
  display: none;
}

.diegp-cp-modal-body {
  display: none;
}

.diegp-cp-modal-body.is-active {
  display: block;
}

.diegp-cp-modal-foot {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 10px;
}

/* ---- Überblick per Figma 2564:4789 (task 65 part 2) ----------------------------
   Scoped to the overview view: the card, heading and button classes are shared with
   the other screens, which get their own design in later parts. */
.diegp-cp-view[data-view='overview'] {
  --gp-cp-rule: rgba(24, 64, 0, 0.08); /* Figma lines: #184000 at 40 % inside a 20 % layer */
}

.diegp-cp-view[data-view='overview'] .diegp-cp-pageh {
  align-items: flex-end;
  gap: 16px 24px;
  margin-bottom: 32px;
}

.diegp-cp-view[data-view='overview'] .diegp-cp-pageh h1 {
  color: var(--gp-cp-ink);
  font-size: 24px;
  font-weight: 700;
  line-height: 26px;
  letter-spacing: 0.01em;
}

.diegp-cp-view[data-view='overview'] .diegp-cp-pageh p {
  margin: 16px 0 0;
  color: var(--gp-cp-ink-2);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

/* Main Button 2565:4950 / 2565:5010: 48px pill, 16/20 padding, 600 14/14. */
.diegp-cp-view[data-view='overview'] .diegp-cp-pageh .diegp-btn,
.diegp-cp-view[data-view='overview'] .diegp-cp-btn-outline {
  min-height: 48px;
  padding: 16px 20px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
  line-height: 14px;
  letter-spacing: 0.01em;
  box-shadow: none;
}

.diegp-cp-view[data-view='overview'] .diegp-cp-pageh .diegp-btn:hover {
  background: var(--wp--preset--color--contrast, #153700);
  border-color: var(--wp--preset--color--contrast, #153700);
}

.diegp-cp-view[data-view='overview'] .diegp-cp-btn-outline {
  background: transparent;
  border: 1px solid var(--gp-accent);
  color: var(--gp-accent);
}

.diegp-cp-view[data-view='overview'] .diegp-cp-btn-outline:hover:not([disabled]) {
  background: var(--gp-accent);
  border-color: var(--gp-accent);
  color: var(--gp-cp-white);
}

/* Cards: white, radius 24, padding 24, no border, Figma card shadow; 32px apart. */
.diegp-cp-view[data-view='overview'] .diegp-card {
  background: var(--gp-cp-white);
  border: 0;
  border-radius: var(--gp-cp-radius-l);
  box-shadow: var(--gp-cp-shadow-card);
  padding: 24px;
  margin-bottom: 32px;
}

.diegp-cp-view[data-view='overview'] .diegp-cp-grid {
  gap: 32px;
  margin-bottom: 32px;
}

.diegp-cp-view[data-view='overview'] .diegp-cp-grid .diegp-card {
  margin-bottom: 0;
}

.diegp-cp-view[data-view='overview'] .diegp-cp-kpi {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 165px;
}

.diegp-cp-view[data-view='overview'] .diegp-cp-kpi-label {
  color: var(--gp-cp-ink-3);
  font-size: 12px;
  font-weight: 500;
  line-height: 17px;
}

.diegp-cp-view[data-view='overview'] .diegp-cp-kpi-value {
  margin: 0;
  color: var(--gp-cp-ink);
  font-size: 24px;
  font-weight: 600;
  line-height: 26px;
  letter-spacing: 0.01em;
}

.diegp-cp-view[data-view='overview'] .diegp-cp-kpi-hint {
  margin: 0;
  color: var(--gp-cp-ink-2);
  font-size: 14px;
  font-weight: 600;
  line-height: 21px;
}

.diegp-cp-view[data-view='overview'] .diegp-cp-kpi-line {
  display: block;
}

/* First card (2565:4677): leaf → leaf-deep gradient at 50 % over white, dark text. */
.diegp-cp-view[data-view='overview'] .diegp-cp-kpi-accent {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--wp--preset--color--leaf, #b5d77c) 50%, transparent) 12%,
      color-mix(in srgb, var(--wp--preset--color--leaf-deep, #83b363) 50%, transparent) 100%),
    var(--gp-cp-white);
  color: var(--gp-cp-ink);
}

.diegp-cp-view[data-view='overview'] .diegp-cp-kpi-accent .diegp-cp-kpi-label {
  color: var(--gp-cp-ink-3);
}

.diegp-cp-view[data-view='overview'] .diegp-cp-kpi-accent .diegp-cp-kpi-hint {
  color: var(--gp-cp-ink-2);
  font-weight: 500;
}

.diegp-cp-view[data-view='overview'] .diegp-cp-kpi-accent .diegp-cp-sublink,
.diegp-cp-view[data-view='overview'] .diegp-cp-kpi-accent .diegp-cp-sublink:visited {
  color: var(--gp-accent);
  font-weight: 600;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

.diegp-cp-view[data-view='overview'] .diegp-cp-kpi-accent .diegp-cp-sublink:hover,
.diegp-cp-view[data-view='overview'] .diegp-cp-kpi-accent .diegp-cp-sublink:focus-visible {
  color: var(--gp-cp-ink);
}

/* Next delivery + driver note (2565:4952): 48px, a hairline, 48px between the columns. */
.diegp-cp-view[data-view='overview'] .diegp-cp-nextgrid {
  gap: 97px;
}

.diegp-cp-view[data-view='overview'] .diegp-cp-nextcol {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.diegp-cp-view[data-view='overview'] .diegp-cp-nextcol-note {
  position: relative;
  padding-left: 0;
  border-left: 0;
}

.diegp-cp-view[data-view='overview'] .diegp-cp-nextcol-note::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -49px;
  border-left: 1px solid var(--gp-cp-rule);
}

.diegp-cp-view[data-view='overview'] .diegp-cp-h2 {
  margin: 0;
  color: var(--gp-cp-ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 0.01em;
}

.diegp-cp-view[data-view='overview'] .diegp-cp-cardsub {
  margin: 16px 0 0;
  color: var(--gp-cp-ink-3);
  font-size: 12px;
  font-weight: 500;
  line-height: 17px;
}

.diegp-cp-view[data-view='overview'] .diegp-cp-cardsub .diegp-cp-sublink:hover {
  color: var(--gp-accent);
}

.diegp-cp-view[data-view='overview'] .diegp-cp-nextcol > .diegp-cp-muted {
  margin: 16px 0 0;
}

.diegp-cp-nextitems {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--gp-cp-rule, rgba(24, 64, 0, 0.08));
}

.diegp-cp-nextitem {
  display: flex;
  align-items: baseline;
  gap: 16px;
  color: var(--gp-cp-ink);
  font-size: 14px;
  line-height: 21px;
}

.diegp-cp-nextitem .diegp-cp-b {
  font-weight: 600;
}

/* A long product name wraps; the quantity ("6x") never splits. */
.diegp-cp-nextitem > :last-child {
  flex: none;
  white-space: nowrap;
  overflow-wrap: normal;
}

/* Dashed leader between name and quantity (Figma 2565:4960, dash 3/3). */
.diegp-cp-nextitem-dots {
  flex: 1 1 auto;
  min-width: 16px;
  height: 1px;
  background: linear-gradient(90deg, var(--gp-cp-rule, rgba(24, 64, 0, 0.08)) 50%, transparent 50%) 0 0 / 6px 1px repeat-x;
}

.diegp-cp-view[data-view='overview'] .diegp-cp-nextcol-note .diegp-cp-field {
  margin: 24px 0 0;
}

.diegp-cp-view[data-view='overview'] .diegp-cp-nextcol-note textarea {
  min-height: 122px;
  padding: 16px;
  border: 1px solid var(--gp-cp-line);
  border-radius: var(--gp-cp-radius-m);
  background: var(--gp-cp-white);
  color: var(--gp-cp-ink-2);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  box-shadow: none;
}

.diegp-cp-view[data-view='overview'] .diegp-cp-nextcol-note textarea:focus {
  border-color: var(--gp-accent);
  outline: none;
}

.diegp-cp-note-actions {
  justify-content: flex-end;
  margin-top: 24px;
}

@media (max-width: 900px) {
  .diegp-cp-view[data-view='overview'] .diegp-cp-nextgrid {
    gap: 24px;
  }

  .diegp-cp-view[data-view='overview'] .diegp-cp-nextcol-note {
    padding-top: 24px;
    border-top: 1px solid var(--gp-cp-rule);
  }

  .diegp-cp-view[data-view='overview'] .diegp-cp-nextcol-note::before {
    display: none;
  }

  .diegp-cp-view[data-view='overview'] .diegp-cp-kpi {
    min-height: 0;
  }
}

/* ---- Meine Abos per Figma 2565:5020 (task 65 part 3) ---------------------------
   Only the page head and the cards (direct children of the view): the action modal
   lives inside this view too and keeps its own look until part 9. */
.diegp-cp-view[data-view='subscription'] {
  --gp-cp-rule: rgba(24, 64, 0, 0.08);
  --gp-cp-danger: #f14f14; /* Figma "Deaktivieren" stroke/text; no site token */
  --gp-cp-pending-bg: rgba(255, 206, 34, 0.24);
}

.diegp-cp-view[data-view='subscription'] > .diegp-cp-pageh {
  align-items: flex-end;
  gap: 16px 24px;
  margin-bottom: 32px;
}

.diegp-cp-view[data-view='subscription'] > .diegp-cp-pageh h1 {
  color: var(--gp-cp-ink);
  font-size: 24px;
  font-weight: 700;
  line-height: 26px;
  letter-spacing: 0.01em;
}

.diegp-cp-view[data-view='subscription'] > .diegp-cp-pageh p {
  max-width: 613px;
  margin: 16px 0 0;
  color: var(--gp-cp-ink-2);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.diegp-cp-view[data-view='subscription'] > .diegp-cp-pageh .diegp-cp-pageh-lead b {
  color: var(--gp-cp-ink);
  font-weight: 600;
}

.diegp-cp-view[data-view='subscription'] > .diegp-cp-pageh .diegp-btn {
  min-height: 48px;
  padding: 16px 37px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
  line-height: 14px;
  letter-spacing: 0.01em;
}

.diegp-cp-view[data-view='subscription'] > .diegp-cp-pageh .diegp-btn:hover {
  background: var(--gp-cp-ink);
  border-color: var(--gp-cp-ink);
}

/* Cards: white, radius 24, padding 24, 32 apart; blocks inside 32 apart. */
.diegp-cp-view[data-view='subscription'] > .diegp-card {
  display: flex;
  flex-direction: column;
  gap: 32px;
  background: var(--gp-cp-white);
  border: 0;
  border-radius: var(--gp-cp-radius-l);
  box-shadow: var(--gp-cp-shadow-card);
  padding: 24px;
  margin-bottom: 32px;
  color: var(--gp-cp-ink);
}

.diegp-cp-view[data-view='subscription'] > .diegp-card .diegp-cp-h2,
.diegp-cp-view[data-view='subscription'] > .diegp-card .diegp-cp-sub-head h3 {
  margin: 0;
  color: var(--gp-cp-ink);
  font-size: 18px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0.01em;
}

.diegp-cp-view[data-view='subscription'] > .diegp-card .diegp-cp-muted {
  margin: 0;
  color: var(--gp-cp-ink-2);
}

/* Head: title, 16, rhythm line; status pill on the right. */
.diegp-cp-view[data-view='subscription'] .diegp-cp-sub-head {
  margin: 0;
  gap: 24px;
}

.diegp-cp-view[data-view='subscription'] .diegp-cp-sub-cycle {
  margin-top: 16px;
  color: var(--gp-cp-ink-2);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.diegp-cp-view[data-view='subscription'] .diegp-cp-sub-cycle b {
  color: var(--gp-cp-ink);
  font-weight: 600;
}

/* Status pills (2566:5416): 30px, 12px sides, 500 14/14, "•" in the text colour. */
.diegp-cp-view[data-view='subscription'] > .diegp-card .diegp-badge {
  gap: 4px;
  height: 30px;
  padding: 0 12px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 0.01em;
  text-decoration: none;
}

.diegp-cp-view[data-view='subscription'] > .diegp-card .diegp-badge .diegp-cp-dot {
  width: 4px;
  height: 4px;
}

.diegp-cp-view[data-view='subscription'] > .diegp-card .diegp-badge-review {
  background: var(--gp-cp-pending-bg);
  color: var(--wp--preset--color--orange, #f18314);
}

.diegp-cp-view[data-view='subscription'] > .diegp-card .diegp-badge-active {
  background: var(--wp--preset--color--surface-mint, #e9f5e5);
  color: var(--gp-accent);
}

.diegp-cp-view[data-view='subscription'] > .diegp-card .diegp-badge-inactive {
  background: rgba(241, 79, 20, 0.1);
  color: var(--gp-cp-danger);
}

.diegp-cp-view[data-view='subscription'] .diegp-cp-sub-preparing {
  font-size: 14px;
  line-height: 20px;
}

/* Body (2565:5364): hairline above; two columns 48 + line + 48; hairline below. */
.diegp-cp-sub-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 97px;
  padding: 32px 0;
  border-top: 1px solid var(--gp-cp-rule, rgba(24, 64, 0, 0.08));
  border-bottom: 1px solid var(--gp-cp-rule, rgba(24, 64, 0, 0.08));
}

.diegp-cp-sub-where,
.diegp-cp-sub-what {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.diegp-cp-sub-what {
  position: relative;
}

.diegp-cp-sub-what::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -49px;
  border-left: 1px solid var(--gp-cp-rule, rgba(24, 64, 0, 0.08));
}

.diegp-cp-view[data-view='subscription'] .diegp-cp-sub-info {
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--gp-cp-ink-2);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.diegp-cp-view[data-view='subscription'] .diegp-cp-sub-info svg {
  width: 20px;
  height: 20px;
  color: var(--gp-accent);
}

.diegp-cp-sub-whatlabel {
  color: var(--gp-cp-ink-3);
  font-size: 12px;
  font-weight: 500;
  line-height: 17px;
}

.diegp-cp-view[data-view='subscription'] .diegp-cp-sub-what .diegp-cp-nextitem {
  font-size: 16px;
  line-height: 24px;
}

/* Actions (2565:5381): 40px outlined pills, 16 apart; the status button sits at the right. */
.diegp-cp-view[data-view='subscription'] > .diegp-card .diegp-cp-btnrow {
  gap: 16px;
  margin: 0;
}

.diegp-cp-view[data-view='subscription'] .diegp-cp-sub-actions > :last-child {
  margin-left: auto;
}

.diegp-cp-view[data-view='subscription'] > .diegp-card .diegp-btn {
  min-height: 40px;
  padding: 12px;
  border: 1px solid var(--gp-accent);
  border-radius: 100px;
  background: transparent;
  box-shadow: none;
  color: var(--gp-accent);
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 0.01em;
}

.diegp-cp-view[data-view='subscription'] > .diegp-card .diegp-btn:hover {
  background: var(--wp--preset--color--surface-mint, #e9f5e5);
  border-color: var(--gp-accent);
  color: var(--gp-accent);
}

.diegp-cp-view[data-view='subscription'] > .diegp-card .diegp-cp-btn-danger {
  border-color: var(--gp-cp-danger);
  color: var(--gp-cp-danger);
}

.diegp-cp-view[data-view='subscription'] > .diegp-card .diegp-cp-btn-danger:hover {
  background: rgba(241, 79, 20, 0.08);
  border-color: var(--gp-cp-danger);
  color: var(--gp-cp-danger);
}

.diegp-cp-view[data-view='subscription'] > .diegp-card .diegp-cp-cancel-deact {
  border-color: var(--wp--preset--color--orange, #f18314);
  color: var(--wp--preset--color--orange-dark, #b35f0b);
}

.diegp-cp-view[data-view='subscription'] > .diegp-card .diegp-cp-cancel-deact:hover {
  background: var(--gp-cp-pending-bg);
}

/* Scheduled changes (2566:5409): each change = label, 16, pill + Abo link; week 600 24/26 right. */
.diegp-cp-view[data-view='subscription'] .diegp-cp-planned {
  gap: 16px;
}

.diegp-cp-view[data-view='subscription'] .diegp-cp-planned-row {
  align-items: center;
  gap: 24px;
  padding: 16px 0 0;
  border-bottom: 0;
  border-top: 1px solid var(--gp-cp-rule);
}

.diegp-cp-view[data-view='subscription'] .diegp-cp-planned-row:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.diegp-cp-planned-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.diegp-cp-planned-label {
  color: var(--gp-cp-ink-2);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.diegp-cp-view[data-view='subscription'] .diegp-cp-planned-sub {
  flex-wrap: wrap;
  gap: 16px;
  margin: 0;
}

.diegp-cp-view[data-view='subscription'] .diegp-cp-planned-sub .diegp-cp-sublink {
  color: var(--gp-cp-ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

.diegp-cp-view[data-view='subscription'] .diegp-cp-planned-sub .diegp-cp-sublink:hover {
  color: var(--gp-accent);
}

.diegp-cp-view[data-view='subscription'] .diegp-cp-planned-when {
  color: var(--gp-cp-ink);
  font-size: 24px;
  font-weight: 600;
  line-height: 26px;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* Whole account (2565:5070): title, 16, text, 16, hairline, 32, buttons. */
.diegp-cp-view[data-view='subscription'] .diegp-cp-account {
  gap: 16px;
}

.diegp-cp-account-text {
  margin: 0;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gp-cp-rule, rgba(24, 64, 0, 0.08));
  color: var(--gp-cp-ink-2);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.diegp-cp-view[data-view='subscription'] > .diegp-card .diegp-cp-account-actions {
  margin-top: 16px;
}

@media (max-width: 900px) {
  .diegp-cp-sub-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .diegp-cp-sub-what {
    padding-top: 24px;
    border-top: 1px solid var(--gp-cp-rule, rgba(24, 64, 0, 0.08));
  }

  .diegp-cp-sub-what::before {
    display: none;
  }

  .diegp-cp-view[data-view='subscription'] .diegp-cp-sub-actions > :last-child {
    margin-left: 0;
  }
}

/* ---- Lieferungen per Figma 2567:5446 (task 65 part 4) --------------------------
   One card per subscription: title 18/20, subtitle, a 5-column table (110px cells,
   64px apart), status pill, "+ Produkt" pill at the far right. */
.diegp-cp-view[data-view='deliveries'] {
  --gp-cp-rule: rgba(24, 64, 0, 0.08);
}

.diegp-cp-view[data-view='deliveries'] > .diegp-cp-pageh {
  margin-bottom: 32px;
}

.diegp-cp-view[data-view='deliveries'] > .diegp-cp-pageh h1 {
  color: var(--gp-cp-ink);
  font-size: 24px;
  font-weight: 700;
  line-height: 26px;
  letter-spacing: 0.01em;
}

.diegp-cp-view[data-view='deliveries'] > .diegp-cp-pageh p {
  margin: 16px 0 0;
  color: var(--gp-cp-ink-2);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.diegp-cp-view[data-view='deliveries'] > .diegp-cp-dlv {
  display: flex;
  flex-direction: column;
  gap: 32px;
  background: var(--gp-cp-white);
  border: 0;
  border-radius: var(--gp-cp-radius-l);
  box-shadow: var(--gp-cp-shadow-card);
  padding: 24px;
  margin-bottom: 32px;
  color: var(--gp-cp-ink);
}

.diegp-cp-dlv-head .diegp-cp-h2 {
  margin: 0;
  color: var(--gp-cp-ink);
  font-size: 18px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0.01em;
}

.diegp-cp-dlv-sub,
.diegp-cp-dlv-empty {
  margin: 16px 0 0;
  color: var(--gp-cp-ink-2);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.diegp-cp-dlv-empty {
  margin: -16px 0 0; /* 16 under the title, like the subtitle */
}

.diegp-cp-dlv-scroll {
  overflow-x: auto;
}

.diegp-cp-view[data-view='deliveries'] .diegp-cp-dlv-table {
  table-layout: fixed;
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 14px;
}

.diegp-cp-dlv-table col.c-sub,
.diegp-cp-dlv-table col.c-kw,
.diegp-cp-dlv-table col.c-day,
.diegp-cp-dlv-table col.c-content,
.diegp-cp-dlv-table col.c-status {
  width: 174px;
}

/* The last column takes the rest: "+ Produkt" sits at the right edge, as in Figma.
   Past tables have no such column, so there the amount column stretches instead. */
.diegp-cp-dlv-table col.c-action {
  width: auto;
}

.diegp-cp-dlv-table colgroup:not(:has(.c-action)) col.c-status {
  width: auto;
}

/* B2B past deliveries have no amount column: the content column is the last one. */
.diegp-cp-dlv-table colgroup:not(:has(.c-action)):not(:has(.c-status)) col.c-content {
  width: auto;
}

.diegp-cp-view[data-view='deliveries'] .diegp-cp-dlv-table thead th {
  padding: 0 16px 16px 0;
  border-bottom: 1px solid var(--gp-cp-rule);
  color: rgba(78, 92, 69, 0.5);
  font-size: 12px;
  font-weight: 500;
  line-height: 17px;
  letter-spacing: 0;
  text-align: left;
  text-transform: uppercase;
}

.diegp-cp-view[data-view='deliveries'] .diegp-cp-dlv-table tbody td {
  padding: 16px 16px 16px 0;
  border-top: 0;
  color: var(--gp-cp-ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  vertical-align: middle;
  overflow-wrap: normal;
}

.diegp-cp-view[data-view='deliveries'] .diegp-cp-dlv-table tbody tr + tr td {
  border-top: 1px solid var(--gp-cp-rule);
}

.diegp-cp-view[data-view='deliveries'] .diegp-cp-dlv-table tbody tr:last-child td {
  padding-bottom: 0;
}

.diegp-cp-view[data-view='deliveries'] .diegp-cp-dlv-table .diegp-cp-sublink {
  color: var(--gp-cp-ink);
}

.diegp-cp-view[data-view='deliveries'] .diegp-cp-dlv-table .diegp-cp-sublink:hover {
  color: var(--gp-accent);
  text-decoration: underline !important;
}

.diegp-cp-dlv-order {
  display: block;
  color: var(--gp-cp-ink-3);
  font-size: 12px;
  line-height: 17px;
}

.diegp-cp-dlv-amount {
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
}

.diegp-cp-view[data-view='deliveries'] .diegp-cp-dlv-table tbody td.diegp-cp-dlv-amount {
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
}

/* Status pill (2577:5696): 24px, green 12 %, 500 14/14. */
.diegp-cp-view[data-view='deliveries'] .diegp-cp-dlv-table .diegp-badge {
  gap: 4px;
  height: 24px;
  padding: 0 12px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 0.01em;
  text-decoration: none;
}

.diegp-cp-view[data-view='deliveries'] .diegp-cp-dlv-table .diegp-badge .diegp-cp-dot {
  width: 4px;
  height: 4px;
}

.diegp-cp-view[data-view='deliveries'] .diegp-cp-dlv-table .diegp-badge-active {
  background: rgba(49, 129, 0, 0.12);
  color: var(--gp-accent);
}

.diegp-cp-view[data-view='deliveries'] .diegp-cp-dlv-table .diegp-badge-review {
  background: rgba(255, 206, 34, 0.24);
  color: var(--wp--preset--color--orange, #f18314);
}

.diegp-cp-view[data-view='deliveries'] .diegp-cp-dlv-table .diegp-cp-changed {
  height: 20px;
  margin-left: 4px;
  font-size: 12px;
}

/* "+ Produkt" (2577:5699): 40px outlined pill, right-aligned. */
.diegp-cp-view[data-view='deliveries'] .diegp-cp-dlv-table td.diegp-cp-dlv-action {
  padding-right: 0;
  text-align: right;
}

.diegp-cp-view[data-view='deliveries'] .diegp-cp-dlv-action .diegp-btn {
  min-height: 40px;
  padding: 12px;
  border: 1px solid var(--gp-accent);
  border-radius: 100px;
  background: transparent;
  box-shadow: none;
  color: var(--gp-accent);
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 0.01em;
}

.diegp-cp-view[data-view='deliveries'] .diegp-cp-dlv-action .diegp-btn:hover {
  background: var(--wp--preset--color--surface-mint, #e9f5e5);
  border-color: var(--gp-accent);
  color: var(--gp-accent);
}

/* ---- Rechnungen per Figma 2583:5705 (task 65 part 5) ---------------------------
   Payment card (title + pill, method, masked IBAN) and the documents table: columns
   232px apart, the row's breakdown in a grey box (#f8f8f8, r8) under it. */
.diegp-cp-view[data-view='invoices'] {
  --gp-cp-rule: rgba(24, 64, 0, 0.08);
}

.diegp-cp-view[data-view='invoices'] > .diegp-cp-pageh {
  margin-bottom: 32px;
}

.diegp-cp-view[data-view='invoices'] > .diegp-cp-pageh h1 {
  color: var(--gp-cp-ink);
  font-size: 24px;
  font-weight: 700;
  line-height: 26px;
  letter-spacing: 0.01em;
}

.diegp-cp-view[data-view='invoices'] > .diegp-cp-pageh p {
  margin: 16px 0 0;
  color: var(--gp-cp-ink-2);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.diegp-cp-view[data-view='invoices'] > .diegp-cp-inv-card {
  display: flex;
  flex-direction: column;
  gap: 32px;
  background: var(--gp-cp-white);
  border: 0;
  border-radius: var(--gp-cp-radius-l);
  box-shadow: var(--gp-cp-shadow-card);
  padding: 24px;
  margin-bottom: 32px;
  color: var(--gp-cp-ink);
}

.diegp-cp-inv-cardhead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  height: 20px; /* the 24px pill hangs below the 20px title, as in Figma */
}

.diegp-cp-inv-sub {
  margin: -16px 0 0;
  color: var(--gp-cp-ink-2);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.diegp-cp-inv-cardhead .diegp-cp-h2 {
  margin: 0;
  color: var(--gp-cp-ink);
  font-size: 18px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0.01em;
}

/* Pills (2583:5858 / 5870): 24px, green 12 %, 500 14/14; not-yet-paid ones stay grey. */
.diegp-cp-view[data-view='invoices'] .diegp-badge {
  gap: 4px;
  min-height: 24px;
  padding: 0 12px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 0.01em;
}

.diegp-cp-view[data-view='invoices'] .diegp-badge.diegp-cp-badge-wrap {
  padding: 5px 12px;
  line-height: 1.2;
}

.diegp-cp-view[data-view='invoices'] .diegp-badge .diegp-cp-dot {
  width: 4px;
  height: 4px;
}

.diegp-cp-view[data-view='invoices'] .diegp-badge-active {
  background: rgba(49, 129, 0, 0.12);
  color: var(--gp-accent);
}

.diegp-cp-view[data-view='invoices'] .diegp-cp-badge-muted {
  background: rgba(78, 92, 69, 0.08);
  color: var(--gp-cp-ink-2);
}

.diegp-cp-inv-method {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.diegp-cp-inv-method-name {
  color: var(--gp-cp-ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 15px;
  letter-spacing: 0.01em;
}

.diegp-cp-inv-method-meta,
.diegp-cp-inv-empty {
  margin: 0;
  color: var(--gp-cp-ink-2);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.diegp-cp-inv-empty {
  margin-top: -16px; /* 16 under the subtitle */
}

/* B2B conditions: label left, pill right. */
.diegp-cp-view[data-view='invoices'] .diegp-cp-inv-card > .diegp-cp-row {
  margin-top: -16px;
  padding: 16px 0 0;
  border-bottom: 0;
  border-top: 1px solid var(--gp-cp-rule);
}

.diegp-cp-view[data-view='invoices'] .diegp-cp-inv-card > .diegp-cp-row .diegp-cp-b {
  font-weight: 600;
}

.diegp-cp-view[data-view='invoices'] .diegp-cp-inv-card > .diegp-cp-muted {
  margin: -16px 0 0;
  color: var(--gp-cp-ink-2);
}

.diegp-cp-inv-scroll {
  overflow-x: auto;
}

.diegp-cp-view[data-view='invoices'] .diegp-cp-inv-table {
  table-layout: fixed;
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 14px;
}

.diegp-cp-inv-table col.c-no,
.diegp-cp-inv-table col.c-period,
.diegp-cp-inv-table col.c-amount {
  width: 232px;
}

.diegp-cp-inv-table col.c-status {
  width: auto;
}

.diegp-cp-inv-table col.c-pdf {
  width: 80px;
}

.diegp-cp-view[data-view='invoices'] .diegp-cp-inv-table thead th {
  padding: 0 16px 16px 0;
  border-bottom: 1px solid var(--gp-cp-rule);
  color: rgba(78, 92, 69, 0.5);
  font-size: 12px;
  font-weight: 500;
  line-height: 17px;
  letter-spacing: 0;
  text-align: left;
  text-transform: uppercase;
}

.diegp-cp-view[data-view='invoices'] .diegp-cp-inv-table tbody td {
  padding: 16px 16px 0 0;
  border-top: 0;
  color: var(--gp-cp-ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-align: left;
  vertical-align: middle;
  overflow-wrap: normal;
}

.diegp-cp-view[data-view='invoices'] .diegp-cp-inv-row .diegp-cp-b {
  font-weight: 600;
}

.diegp-cp-view[data-view='invoices'] .diegp-cp-inv-row:hover {
  background: none;
}

.diegp-cp-view[data-view='invoices'] .diegp-cp-inv-row:hover .diegp-cp-b,
.diegp-cp-view[data-view='invoices'] .diegp-cp-inv-row.is-open .diegp-cp-b {
  color: var(--gp-accent);
}

.diegp-cp-view[data-view='invoices'] .diegp-cp-inv-row:focus-visible {
  outline: 2px solid var(--gp-accent);
  outline-offset: 2px;
}

/* Arrow (bxs:down-arrow 2583:5897): grey triangle to the right, green and down when open. */
.diegp-cp-view[data-view='invoices'] .diegp-cp-chev {
  display: inline-block;
  width: 0;
  height: 0;
  margin: 0 8px 1px 1px;
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
  border-left: 5px solid var(--gp-cp-ink-2);
  vertical-align: middle;
  transition: transform var(--gp-transition);
}

.diegp-cp-view[data-view='invoices'] .diegp-cp-inv-row.is-open .diegp-cp-chev {
  border-left-color: var(--gp-accent);
  transform: rotate(90deg);
}

/* Breakdown (2583:5875): grey box 8px under the row, lines 16/24, hairlines between. */
.diegp-cp-view[data-view='invoices'] .diegp-cp-inv-table tbody tr.diegp-cp-inv-detail > td {
  padding: 8px 0 0;
  background: none;
}

.diegp-cp-view[data-view='invoices'] .diegp-cp-break {
  padding: 8px 0;
  border: 0;
  border-radius: 8px;
  background: #f8f8f8; /* Figma fill, no site token */
}

.diegp-cp-view[data-view='invoices'] .diegp-cp-break-line {
  gap: 24px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--gp-cp-rule);
  color: var(--gp-cp-ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.diegp-cp-view[data-view='invoices'] .diegp-cp-break-line:last-child {
  border-bottom: 0;
}

.diegp-cp-view[data-view='invoices'] .diegp-cp-break-line .diegp-cp-muted,
.diegp-cp-view[data-view='invoices'] .diegp-cp-break-sub {
  color: var(--gp-cp-ink-2);
  font-weight: 500;
}

.diegp-cp-view[data-view='invoices'] .diegp-cp-break-amt {
  font-weight: 500;
}

.diegp-cp-view[data-view='invoices'] .diegp-cp-break-sum {
  background: none;
}

.diegp-cp-view[data-view='invoices'] .diegp-cp-break-sum .diegp-cp-break-amt {
  font-weight: 700;
}

/* B2B "PDF": 40px outlined pill at the right edge, like "+ Produkt". */
.diegp-cp-view[data-view='invoices'] .diegp-cp-inv-table.has-pdf .diegp-cp-inv-row > td:last-child {
  padding-right: 0;
  text-align: right;
}

.diegp-cp-view[data-view='invoices'] .diegp-cp-inv-table [data-inv-pdf] {
  min-height: 40px;
  padding: 12px 16px;
  border: 1px solid var(--gp-accent);
  border-radius: 100px;
  background: transparent;
  box-shadow: none;
  color: var(--gp-accent);
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
}

.diegp-cp-view[data-view='invoices'] .diegp-cp-inv-table a[data-inv-pdf]:hover {
  background: var(--wp--preset--color--surface-mint, #e9f5e5);
  color: var(--gp-accent);
}

/* ---- Persönliche Daten per Figma 2583:5900 (task 65 part 6) --------------------
   Green hint, two cards side by side (511 wide, 32 apart), 48px fields with the label
   above, the request button below. */
.diegp-cp-view[data-view='userdata'] > .diegp-cp-pageh {
  margin-bottom: 32px;
}

.diegp-cp-view[data-view='userdata'] > .diegp-cp-pageh h1 {
  color: var(--gp-cp-ink);
  font-size: 24px;
  font-weight: 700;
  line-height: 26px;
  letter-spacing: 0.01em;
}

.diegp-cp-view[data-view='userdata'] > .diegp-cp-pageh p {
  margin: 16px 0 0;
  color: var(--gp-cp-ink-2);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

/* Hint (2583:6110): leaf gradient at 4 % + a 1px leaf-gradient border, r16, 16px padding. */
.diegp-cp-view[data-view='userdata'] .diegp-cp-ud-hint,
.diegp-cp-view[data-view='approvals'] .diegp-cp-ud-hint {
  gap: 12px;
  margin-bottom: 32px;
  padding: 15px; /* + the 1px border = Figma's 16 */
  border: 1px solid transparent;
  border-radius: var(--gp-cp-radius-m);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--wp--preset--color--leaf, #b5d77c) 4%, #fff) 12%, color-mix(in srgb, var(--wp--preset--color--leaf-deep, #83b363) 4%, #fff) 100%) padding-box,
    linear-gradient(180deg, var(--wp--preset--color--leaf, #b5d77c) 12%, var(--wp--preset--color--leaf-deep, #83b363) 100%) border-box;
  color: var(--gp-cp-ink-2);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.diegp-cp-view[data-view='userdata'] .diegp-cp-ud-hint svg,
.diegp-cp-view[data-view='approvals'] .diegp-cp-ud-hint svg {
  width: 20px;
  height: 20px;
  color: var(--gp-accent);
}

.diegp-cp-view[data-view='userdata'] .diegp-cp-userdata > .diegp-cp-grid {
  gap: 32px;
  margin-bottom: 32px;
}

.diegp-cp-view[data-view='userdata'] .diegp-cp-ud-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 0;
  padding: 24px;
  border: 0;
  border-radius: var(--gp-cp-radius-l);
  background: var(--gp-cp-white);
  box-shadow: var(--gp-cp-shadow-card);
  color: var(--gp-cp-ink);
}

.diegp-cp-view[data-view='userdata'] .diegp-cp-ud-card .diegp-cp-h2 {
  margin: 0 0 8px; /* 24 gap + 8 = the title sits 24px above the first label, like Figma (2583:6059 → 6070) */
  color: var(--gp-cp-ink);
  font-size: 18px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0.01em;
}

/* Fields (2583:6071): label 500 14/20 #4e5c45, 4px, input 48px r8 1px #184000 20 %, 500 14. */
.diegp-cp-view[data-view='userdata'] .diegp-cp-ud-card .diegp-cp-field,
.diegp-cp-view[data-view='userdata'] .diegp-cp-ud-card .diegp-cp-field-grid {
  margin: -8px 0 0; /* fields are 16 apart inside the card's 24px rhythm */
}

.diegp-cp-view[data-view='userdata'] .diegp-cp-ud-card .diegp-cp-field-grid {
  gap: 16px;
}

.diegp-cp-view[data-view='userdata'] .diegp-cp-ud-card .diegp-cp-field-grid .diegp-cp-field {
  margin: 0;
}

.diegp-cp-view[data-view='userdata'] .diegp-cp-ud-card .diegp-cp-field {
  gap: 4px;
}

.diegp-cp-view[data-view='userdata'] .diegp-cp-ud-card .diegp-cp-field > label {
  color: var(--gp-cp-ink-2);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.01em;
  text-transform: none;
}

.diegp-cp-view[data-view='userdata'] .diegp-cp-ud-card .diegp-cp-field input {
  height: 48px;
  padding: 0 16px;
  border: 1px solid rgba(24, 64, 0, 0.2);
  border-radius: 8px;
  background: var(--gp-cp-white);
  color: var(--gp-cp-ink);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.diegp-cp-view[data-view='userdata'] .diegp-cp-ud-card .diegp-cp-field input::placeholder {
  color: rgba(78, 92, 69, 0.6);
  opacity: 1;
}

.diegp-cp-view[data-view='userdata'] .diegp-cp-ud-card .diegp-cp-field input:focus {
  border-color: var(--gp-accent);
  outline: none;
}

/* Read-only "Zahlungsart" (2583:6104): #f8f8f8, border #184000 4 %, text #4e5c45. */
.diegp-cp-view[data-view='userdata'] .diegp-cp-ud-card .diegp-cp-field input:disabled {
  background: #f8f8f8;
  border-color: rgba(24, 64, 0, 0.04);
  color: var(--gp-cp-ink-2);
  opacity: 1;
}

.diegp-cp-view[data-view='userdata'] .diegp-cp-ud-card .diegp-cp-field input.is-pending:disabled {
  background: var(--gp-cp-canvas);
  border-color: var(--gp-accent);
  color: var(--gp-accent);
}

.diegp-cp-view[data-view='userdata'] .diegp-cp-ud-card .diegp-cp-help {
  color: rgba(78, 92, 69, 0.6);
  font-size: 12px;
  font-weight: 500;
  line-height: 17px;
  letter-spacing: 0.01em;
}

/* B2B payment line: label left, pill right. */
.diegp-cp-view[data-view='userdata'] .diegp-cp-ud-card > .diegp-cp-row {
  margin-top: -8px;
  padding: 0;
  border: 0;
}

.diegp-cp-view[data-view='userdata'] .diegp-cp-ud-card > .diegp-cp-row .diegp-cp-b {
  font-weight: 700;
}

.diegp-cp-view[data-view='userdata'] .diegp-cp-ud-card .diegp-badge {
  gap: 4px;
  min-height: 24px;
  padding: 0 12px;
  border-radius: 100px;
  background: rgba(49, 129, 0, 0.12);
  color: var(--gp-accent);
  font-size: 14px;
  font-weight: 500;
}

.diegp-cp-view[data-view='userdata'] .diegp-cp-ud-card .diegp-badge .diegp-cp-dot {
  width: 4px;
  height: 4px;
}

/* "Änderungen anfragen" (2583:6108): 48px pill, 16px sides, 600 14/14. */
.diegp-cp-view[data-view='userdata'] .diegp-cp-userdata > .diegp-cp-btnrow .diegp-btn {
  min-height: 48px;
  padding: 16px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
  line-height: 14px;
  letter-spacing: 0.01em;
}

.diegp-cp-view[data-view='userdata'] .diegp-cp-userdata > .diegp-cp-btnrow .diegp-btn-primary:hover {
  background: var(--gp-cp-ink);
  border-color: var(--gp-cp-ink);
}

.diegp-cp-view[data-view='userdata'] .diegp-cp-userdata > .diegp-cp-btnrow .diegp-cp-ud-cancel {
  border: 1px solid var(--wp--preset--color--orange, #f18314);
  background: transparent;
  color: var(--wp--preset--color--orange-dark, #b35f0b);
}

/* ---- Meine Anfragen per Figma 2583:6121 (task 65 part 7) ------------------------
   Every request is its own card: title 700 14/15, status pill top right, week pills,
   the one-line summary, a hairline and "Abonnement ansehen →". The list wrapper is bare. */
.diegp-cp-view[data-view='approvals'] {
  --gp-cp-rule: rgba(24, 64, 0, 0.08);
}

.diegp-cp-view[data-view='approvals'] > .diegp-cp-pageh {
  margin-bottom: 32px;
}

.diegp-cp-view[data-view='approvals'] > .diegp-cp-pageh h1 {
  color: var(--gp-cp-ink);
  font-size: 24px;
  font-weight: 700;
  line-height: 26px;
  letter-spacing: 0.01em;
}

.diegp-cp-view[data-view='approvals'] > .diegp-cp-pageh p {
  margin: 16px 0 0;
  color: var(--gp-cp-ink-2);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.diegp-cp-view[data-view='approvals'] .diegp-cp-rq-hint {
  display: block; /* text with an inline bold lead-in, no icon */
}

.diegp-cp-view[data-view='approvals'] .diegp-cp-rq-hint b {
  color: var(--gp-cp-ink);
  font-weight: 600;
}

.diegp-cp-view[data-view='approvals'] > .diegp-cp-rq-list {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.diegp-cp-view[data-view='approvals'] .diegp-cp-rq-list > #diegp-requests-list {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* One request = one card (2590:6269). */
.diegp-cp-view[data-view='approvals'] .diegp-cp-row.diegp-cp-request,
.diegp-cp-view[data-view='approvals'] #diegp-requests-empty {
  position: relative;
  display: block;
  margin: 0;
  padding: 24px;
  border: 0;
  border-radius: var(--gp-cp-radius-l);
  background: var(--gp-cp-white);
  box-shadow: var(--gp-cp-shadow-card);
  text-align: left;
}

.diegp-cp-view[data-view='approvals'] #diegp-requests-empty {
  color: var(--gp-cp-ink-2);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.diegp-cp-view[data-view='approvals'] .diegp-cp-request.is-expandable:hover {
  background: var(--gp-cp-white);
}

.diegp-cp-view[data-view='approvals'] .diegp-cp-request .diegp-cp-notif-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.diegp-cp-view[data-view='approvals'] .diegp-cp-request .diegp-cp-notif-head {
  padding-right: 200px; /* room for the status pill */
}

.diegp-cp-view[data-view='approvals'] .diegp-cp-request .diegp-cp-notif-head .diegp-cp-b {
  color: var(--gp-cp-ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 15px;
  letter-spacing: 0.01em;
}

/* KW pill (2590:6281): 24px, 1px #c5c5c5, 600 14/14 #153700. */
.diegp-cp-view[data-view='approvals'] .diegp-cp-request .diegp-cp-ovweeks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.diegp-cp-view[data-view='approvals'] .diegp-cp-request .diegp-cp-skiptype {
  height: 24px;
  padding: 0 13px;
  border: 1px solid #c5c5c5; /* Figma stroke, no site token */
  border-radius: 100px;
  background: none;
  color: var(--gp-cp-ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 14px;
  letter-spacing: 0.01em;
}

.diegp-cp-view[data-view='approvals'] .diegp-cp-request .diegp-cp-notif-short {
  color: var(--gp-cp-ink-2);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  white-space: normal;
}

.diegp-cp-view[data-view='approvals'] .diegp-cp-request .diegp-cp-notif-full {
  gap: 4px;
  margin: 0;
  color: var(--gp-cp-ink-2);
  font-size: 14px;
  line-height: 20px;
}

.diegp-cp-view[data-view='approvals'] .diegp-cp-request .diegp-cp-notif-full .diegp-cp-muted {
  color: var(--gp-cp-ink-2);
  font-weight: 500;
}

/* Hairline + link row (2590:6284 / 6276). */
.diegp-cp-view[data-view='approvals'] .diegp-cp-request .diegp-cp-notif-links {
  gap: 24px;
  min-height: 20px;
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--gp-cp-rule);
}

.diegp-cp-view[data-view='approvals'] .diegp-cp-request .diegp-cp-notif-link {
  margin: 0;
  color: var(--gp-accent);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

/* Status pill top right; "Anfrage zurückziehen" bottom right, on the link row. */
.diegp-cp-view[data-view='approvals'] .diegp-cp-request .diegp-cp-notif-side {
  display: contents;
}

.diegp-cp-view[data-view='approvals'] .diegp-cp-request .diegp-cp-notif-side .diegp-badge {
  position: absolute;
  top: 24px;
  right: 24px;
  gap: 4px;
  height: 24px;
  padding: 0 12px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 0.01em;
}

.diegp-cp-view[data-view='approvals'] .diegp-cp-request .diegp-badge .diegp-cp-dot {
  width: 4px;
  height: 4px;
}

.diegp-cp-view[data-view='approvals'] .diegp-cp-request .diegp-badge-review {
  background: rgba(255, 206, 34, 0.24);
  color: var(--wp--preset--color--orange, #f18314);
}

.diegp-cp-view[data-view='approvals'] .diegp-cp-request .diegp-badge-active {
  background: rgba(49, 129, 0, 0.12);
  color: var(--gp-accent);
}

.diegp-cp-view[data-view='approvals'] .diegp-cp-request .diegp-badge-inactive {
  background: rgba(241, 79, 20, 0.1);
  color: #f14f14;
}

.diegp-cp-view[data-view='approvals'] .diegp-cp-request .diegp-cp-badge-muted {
  background: #f3f3f3; /* Figma "zurückgezogen" */
  color: var(--gp-cp-ink-2);
}

.diegp-cp-view[data-view='approvals'] .diegp-cp-request .diegp-cp-cancel-request {
  position: absolute;
  right: 24px;
  bottom: 18px; /* centred on the 20px link line */
  min-height: 32px;
  padding: 8px 12px;
  border: 1px solid var(--wp--preset--color--orange, #f18314);
  border-radius: 100px;
  background: var(--gp-cp-white);
  box-shadow: none;
  color: var(--wp--preset--color--orange-dark, #b35f0b);
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
}

.diegp-cp-view[data-view='approvals'] .diegp-cp-request .diegp-cp-cancel-request:hover {
  background: rgba(255, 206, 34, 0.24);
}

/* No link row: keep the cancel button clear of the text. */
.diegp-cp-view[data-view='approvals'] .diegp-cp-request:has(.diegp-cp-cancel-request):not(:has(.diegp-cp-notif-links)) {
  padding-bottom: 72px;
}

.diegp-cp-view[data-view='approvals'] .diegp-cp-request:has(.diegp-cp-cancel-request) .diegp-cp-notif-links {
  padding-right: 220px;
}

.diegp-cp-view[data-view='approvals'] .diegp-cp-pager {
  padding: 24px 0 0;
}

@media (max-width: 760px) {
  .diegp-cp-view[data-view='approvals'] .diegp-cp-request .diegp-cp-notif-head {
    padding-right: 0;
    padding-top: 36px; /* the pill sits above the title on a phone */
  }

  .diegp-cp-view[data-view='approvals'] .diegp-cp-request .diegp-cp-notif-side .diegp-badge {
    left: 24px;
    right: auto;
  }

  .diegp-cp-view[data-view='approvals'] .diegp-cp-request:has(.diegp-cp-cancel-request) .diegp-cp-notif-links {
    padding-right: 0;
  }

  .diegp-cp-view[data-view='approvals'] .diegp-cp-request:has(.diegp-cp-cancel-request) {
    padding-bottom: 72px;
  }
}

/* ---- Hilfe per Figma 2590:6285 (task 65 part 8) ---------------------------------
   Groups 40 apart (title 700 16/22, 16 to the list); questions are white r16 cards 8 apart,
   24px padding, question 600 18/22 with a green +/− on the right, answer 500 16/24 24 below. */
.diegp-cp-view[data-view='help'] > .diegp-cp-pageh {
  margin-bottom: 40px;
}

.diegp-cp-view[data-view='help'] > .diegp-cp-pageh h1 {
  color: var(--gp-cp-ink);
  font-size: 24px;
  font-weight: 700;
  line-height: 26px;
  letter-spacing: 0.01em;
}

.diegp-cp-view[data-view='help'] > .diegp-cp-pageh p {
  margin: 16px 0 0;
  color: var(--gp-cp-ink-2);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.diegp-cp-view[data-view='help'] .diegp-cp-faqgroup {
  margin: 40px 0 16px;
  padding: 0;
  border: 0;
  color: var(--gp-cp-ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  letter-spacing: 0;
  text-transform: none;
}

.diegp-cp-view[data-view='help'] > .diegp-cp-pageh + .diegp-cp-faqgroup {
  margin-top: 0;
}

.diegp-cp-view[data-view='help'] .diegp-cp-faq,
.diegp-cp-view[data-view='help'] .diegp-cp-help-contact {
  margin: 0 0 8px;
  padding: 24px;
  border: 0;
  border-radius: var(--gp-cp-radius-m);
  background: var(--gp-cp-white);
  box-shadow: 0 0 29.1px -19px rgba(24, 64, 0, 0.04);
}

.diegp-cp-view[data-view='help'] .diegp-cp-faq > summary {
  justify-content: space-between;
  gap: 24px;
  min-height: 24px;
  padding: 0;
  border-radius: 4px;
  color: var(--gp-cp-ink);
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
  letter-spacing: 0.01em;
}

.diegp-cp-view[data-view='help'] .diegp-cp-faq > summary::before {
  content: none;
}

.diegp-cp-view[data-view='help'] .diegp-cp-faq > summary:hover .diegp-cp-faq-q {
  color: var(--gp-accent);
}

.diegp-cp-view[data-view='help'] .diegp-cp-faq > summary:focus-visible {
  outline: 2px solid var(--gp-accent);
  outline-offset: 4px;
}

.diegp-cp-faq-icon {
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--gp-accent);
}

.diegp-cp-faq[open] .diegp-cp-faq-icon-v {
  display: none;
}

.diegp-cp-view[data-view='help'] .diegp-cp-faq-a {
  padding: 24px 0 0;
  color: var(--gp-cp-ink-2);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

.diegp-cp-view[data-view='help'] .diegp-cp-faq-a p {
  margin: 0;
}

.diegp-cp-view[data-view='help'] .diegp-cp-faq-a b {
  color: var(--gp-cp-ink);
  font-weight: 600;
}

/* "Noch Fragen?" — support contact in the same card style. */
.diegp-cp-help-contact p {
  margin: 0 0 16px;
  color: var(--gp-cp-ink-2);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

.diegp-cp-help-contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 48px;
}

.diegp-cp-help-contact-links a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--gp-accent);
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
  letter-spacing: 0.01em;
  text-decoration: none;
}

.diegp-cp-help-contact-links a:hover,
.diegp-cp-help-contact-links a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.diegp-cp-help-contact-links a span {
  color: var(--gp-cp-ink-3);
  font-size: 12px;
  font-weight: 500;
  line-height: 17px;
  letter-spacing: 0;
}

/* ---- Windows (task 65 part 9) ----------------------------------------------------
   No Figma frames for the dialogs: one set of rules built from the finished screens —
   white card r24, card title, 48px fields with the label above (Persönliche Daten),
   green hint (So funktioniert es), pill buttons, KW/status pills. Every dialog of the
   portal uses .diegp-cp-ovl > .diegp-cp-modal, so these rules cover them all. */
.diegp-customer-portal .diegp-cp-ovl {
  padding: 24px;
  background: rgba(21, 55, 0, 0.4); /* contrast token at 40 % */
}

.diegp-customer-portal .diegp-cp-modal {
  max-width: 560px;
  padding: 32px;
  border-radius: var(--gp-cp-radius-l);
  background: var(--gp-cp-white);
  box-shadow: 0 24px 48px -12px rgba(24, 64, 0, 0.24);
  color: var(--gp-cp-ink);
}

.diegp-customer-portal .diegp-cp-modal h3 {
  margin: 0;
  padding-right: 16px;
  color: var(--gp-cp-ink);
  font-size: 18px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0.01em;
}

.diegp-customer-portal .diegp-cp-modal-sub {
  margin: 8px 0 0;
  color: var(--gp-cp-ink-3);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.diegp-customer-portal .diegp-cp-modal-body.is-active,
.diegp-customer-portal .diegp-cp-modal .diegp-cp-confirm {
  margin-top: 24px;
}

.diegp-customer-portal .diegp-cp-modal .diegp-cp-cardsub {
  margin: 0 0 24px;
  color: var(--gp-cp-ink-2);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

/* Fields: as on Persönliche Daten. */
.diegp-customer-portal .diegp-cp-modal .diegp-cp-field {
  gap: 4px;
  margin: 0 0 16px;
}

.diegp-customer-portal .diegp-cp-modal .diegp-cp-field-grid {
  gap: 16px;
}

.diegp-customer-portal .diegp-cp-modal .diegp-cp-field > label,
.diegp-customer-portal .diegp-cp-modal .diegp-cp-items-head > label {
  color: var(--gp-cp-ink-2);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.01em;
  text-transform: none;
}

.diegp-customer-portal .diegp-cp-modal .diegp-cp-field input:not([type='hidden']):not([type='checkbox']):not([type='radio']),
.diegp-customer-portal .diegp-cp-modal .diegp-cp-field select,
.diegp-customer-portal .diegp-cp-modal .diegp-cp-field textarea,
.diegp-customer-portal .diegp-cp-modal .diegp-cp-item input,
.diegp-customer-portal .diegp-cp-modal .diegp-cp-item select {
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid rgba(24, 64, 0, 0.2);
  border-radius: 8px;
  background-color: var(--gp-cp-white);
  color: var(--gp-cp-ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.diegp-customer-portal .diegp-cp-modal .diegp-cp-field textarea {
  padding: 12px 16px;
  line-height: 20px;
}

.diegp-customer-portal .diegp-cp-modal input:focus,
.diegp-customer-portal .diegp-cp-modal select:focus,
.diegp-customer-portal .diegp-cp-modal textarea:focus {
  border-color: var(--gp-accent);
  outline: none;
}

.diegp-customer-portal .diegp-cp-modal .diegp-cp-help {
  color: rgba(78, 92, 69, 0.6);
  font-size: 12px;
  font-weight: 500;
  line-height: 17px;
}

/* select2 product picker, same 48px box. */
.diegp-customer-portal .diegp-cp-modal .select2-container .select2-selection--single {
  height: 48px;
  border: 1px solid rgba(24, 64, 0, 0.2);
  border-radius: 8px;
}

.diegp-customer-portal .diegp-cp-modal .select2-container .select2-selection--single .select2-selection__rendered {
  padding-left: 16px;
  color: var(--gp-cp-ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 46px;
}

.diegp-customer-portal .diegp-cp-modal .select2-container .select2-selection--single .select2-selection__arrow {
  height: 46px;
  right: 8px;
}

.diegp-customer-portal .diegp-cp-modal .select2-container--focus .select2-selection--single,
.diegp-customer-portal .diegp-cp-modal .select2-container--open .select2-selection--single {
  border-color: var(--gp-accent);
}

/* Product rows: picker, quantity, round remove button. */
.diegp-customer-portal .diegp-cp-modal .diegp-cp-items-head {
  align-items: center;
}

.diegp-customer-portal .diegp-cp-modal .diegp-cp-items {
  gap: 8px;
  margin-top: 4px;
}

.diegp-customer-portal .diegp-cp-modal .diegp-cp-item {
  grid-template-columns: minmax(0, 1fr) 84px 48px;
  gap: 8px;
}

.diegp-customer-portal .diegp-cp-modal .diegp-cp-item-del {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(24, 64, 0, 0.2);
  border-radius: 100px;
  background: var(--gp-cp-white);
  color: var(--gp-cp-ink-2);
  font-size: 14px;
}

.diegp-customer-portal .diegp-cp-modal .diegp-cp-item-del:hover:not(:disabled) {
  border-color: #f14f14;
  background: rgba(241, 79, 20, 0.08);
  color: #f14f14;
}

.diegp-customer-portal .diegp-cp-modal .diegp-cp-skiprow .diegp-cp-item-del {
  width: 32px;
  height: 32px;
}

/* Segmented choices ("Sofort / Woche wählen …", "Einzelne / Alle Produkte"): 48px pills. */
.diegp-customer-portal .diegp-cp-modal .diegp-cp-weekpick,
.diegp-customer-portal .diegp-cp-modal .diegp-cp-modepick {
  gap: 8px;
}

.diegp-customer-portal .diegp-cp-modal .diegp-cp-weekopt {
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid rgba(24, 64, 0, 0.2);
  border-radius: 100px;
  background: var(--gp-cp-white);
  color: var(--gp-cp-ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.diegp-customer-portal .diegp-cp-modal .diegp-cp-weekopt:hover {
  border-color: var(--gp-accent);
  color: var(--gp-accent);
}

.diegp-customer-portal .diegp-cp-modal .diegp-cp-weekopt.is-active {
  border-color: var(--gp-accent);
  background: var(--wp--preset--color--surface-mint, #e9f5e5);
  color: var(--gp-accent);
  font-weight: 600;
}

.diegp-customer-portal .diegp-cp-modal .diegp-cp-datesbtn {
  align-self: flex-start;
}

/* Picked weeks / dates: KW pills as on Meine Anfragen. */
.diegp-customer-portal .diegp-cp-modal .diegp-cp-weeks {
  gap: 8px;
}

.diegp-customer-portal .diegp-cp-modal .diegp-cp-chip {
  height: 32px;
  padding: 0 12px;
  border: 1px solid #c5c5c5;
  border-radius: 100px;
  background: var(--gp-cp-white);
  color: var(--gp-cp-ink);
  font-size: 14px;
  font-weight: 600;
}

.diegp-customer-portal .diegp-cp-modal .diegp-cp-chip-removable {
  border-color: var(--gp-accent);
  background: var(--wp--preset--color--surface-mint, #e9f5e5);
  color: var(--gp-accent);
}

.diegp-customer-portal .diegp-cp-modal .diegp-cp-chip-removable:hover {
  background: var(--gp-accent);
  color: var(--gp-cp-white);
}

/* Lists inside dialogs (skip dates, planned overrides): light rows r8. */
.diegp-customer-portal .diegp-cp-modal .diegp-cp-skiplist {
  gap: 8px;
}

.diegp-customer-portal .diegp-cp-modal .diegp-cp-skiprow {
  gap: 12px;
  min-height: 48px;
  padding: 8px 12px 8px 16px;
  border: 1px solid rgba(24, 64, 0, 0.08);
  border-radius: 8px;
  background: var(--gp-cp-white);
  font-size: 14px;
}

.diegp-customer-portal .diegp-cp-modal .diegp-cp-skiprow .diegp-cp-b {
  color: var(--gp-cp-ink);
}

.diegp-customer-portal .diegp-cp-modal .diegp-badge {
  gap: 4px;
  min-height: 24px;
  padding: 0 12px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 500;
}

.diegp-customer-portal .diegp-cp-modal .diegp-cp-skiptype {
  border: 1px solid #c5c5c5;
  background: none;
  color: var(--gp-cp-ink);
  font-weight: 600;
}

.diegp-customer-portal .diegp-cp-modal .diegp-badge-review {
  background: rgba(255, 206, 34, 0.24);
  color: var(--wp--preset--color--orange, #f18314);
}

.diegp-customer-portal .diegp-cp-modal .diegp-badge-active {
  background: rgba(49, 129, 0, 0.12);
  color: var(--gp-accent);
}

/* Hints: info = green like "So funktioniert es"; caution = the pending-pill yellow. */
.diegp-customer-portal .diegp-cp-modal .diegp-cp-warn {
  gap: 12px;
  margin: 0 0 24px;
  padding: 15px;
  border: 1px solid transparent;
  border-radius: var(--gp-cp-radius-m);
  background: rgba(255, 206, 34, 0.24);
  color: var(--wp--preset--color--orange-dark, #b35f0b);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.diegp-customer-portal .diegp-cp-modal .diegp-cp-warn-info {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--wp--preset--color--leaf, #b5d77c) 4%, #fff) 12%, color-mix(in srgb, var(--wp--preset--color--leaf-deep, #83b363) 4%, #fff) 100%) padding-box,
    linear-gradient(180deg, var(--wp--preset--color--leaf, #b5d77c) 12%, var(--wp--preset--color--leaf-deep, #83b363) 100%) border-box;
  color: var(--gp-cp-ink-2);
}

.diegp-customer-portal .diegp-cp-modal .diegp-cp-warn svg {
  width: 20px;
  height: 20px;
  margin-top: 0;
}

.diegp-customer-portal .diegp-cp-modal .diegp-cp-warn-info svg {
  color: var(--gp-accent);
}

/* Confirmation recap. */
.diegp-customer-portal .diegp-cp-modal .diegp-cp-confirm-block {
  padding: 16px 0;
  border-bottom: 1px solid rgba(24, 64, 0, 0.08);
}

.diegp-customer-portal .diegp-cp-modal .diegp-cp-confirm-h {
  margin-bottom: 4px;
  color: var(--gp-cp-ink-3);
  font-size: 12px;
  font-weight: 500;
  line-height: 17px;
  letter-spacing: 0;
  text-transform: none;
}

.diegp-customer-portal .diegp-cp-modal .diegp-cp-confirm-line {
  color: var(--gp-cp-ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.diegp-customer-portal .diegp-cp-modal .diegp-cp-confirm-warn {
  margin-top: 8px;
  padding: 12px 16px;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 206, 34, 0.24);
}

.diegp-customer-portal .diegp-cp-modal .diegp-cp-confirm-warn .diegp-cp-confirm-h,
.diegp-customer-portal .diegp-cp-modal .diegp-cp-confirm-warn .diegp-cp-confirm-line {
  color: var(--wp--preset--color--orange-dark, #b35f0b);
}

.diegp-customer-portal .diegp-cp-modal .diegp-cp-confirm > .diegp-cp-help {
  margin: 16px 0 0;
}

.diegp-customer-portal .diegp-cp-modal .diegp-cp-shoplink {
  margin-top: 0;
  color: var(--gp-accent);
  font-size: 14px;
  font-weight: 600;
}

/* Buttons: 48px pills — primary green, secondary green outline; small ones 40px. */
.diegp-customer-portal .diegp-cp-modal-foot {
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 24px;
}

.diegp-customer-portal .diegp-cp-modal .diegp-btn {
  min-height: 48px;
  padding: 0 20px;
  border-radius: 100px;
  box-shadow: none;
  font-size: 14px;
  font-weight: 600;
  line-height: 14px;
  letter-spacing: 0.01em;
}

.diegp-customer-portal .diegp-cp-modal .diegp-btn-sm {
  min-height: 40px;
  padding: 0 12px;
  font-weight: 500;
}

.diegp-customer-portal .diegp-cp-modal .diegp-btn-primary:hover:not([disabled]) {
  border-color: var(--gp-cp-ink);
  background: var(--gp-cp-ink);
}

.diegp-customer-portal .diegp-cp-modal .diegp-btn-secondary {
  border: 1px solid var(--gp-accent);
  background: var(--gp-cp-white);
  color: var(--gp-accent);
}

.diegp-customer-portal .diegp-cp-modal .diegp-btn-secondary:hover:not([disabled]) {
  border-color: var(--gp-accent);
  background: var(--wp--preset--color--surface-mint, #e9f5e5);
  color: var(--gp-accent);
}

/* Deactivation dialog: the send button is the danger action (red outline, as "Deaktivieren"). */
.diegp-customer-portal #diegp-sub-ovl:has(.diegp-cp-modal-body.is-active[data-body='status']) #diegp-sub-ok {
  border-color: #f14f14;
  background: var(--gp-cp-white);
  color: #f14f14;
}

.diegp-customer-portal #diegp-sub-ovl:has(.diegp-cp-modal-body.is-active[data-body='status']) #diegp-sub-ok:hover:not([disabled]) {
  background: rgba(241, 79, 20, 0.08);
}

.diegp-customer-portal .diegp-cp-modal :focus-visible {
  outline: 2px solid var(--gp-accent);
  outline-offset: 2px;
}

/* Calendar popup (admin/js/datepicker.js, appended to <body> — no portal variables there). */
body .diegp-dp {
  padding: 16px;
  border: 1px solid rgba(24, 64, 0, 0.08);
  border-radius: 16px;
  box-shadow: 0 16px 32px -8px rgba(24, 64, 0, 0.24);
  font-family: var(--wp--preset--font-family--body, 'Montserrat', Arial, sans-serif);
  color: var(--wp--preset--color--contrast, #153700);
}

body .diegp-dp .ui-datepicker-prev,
body .diegp-dp .ui-datepicker-next,
body .diegp-dp .ui-datepicker-title select {
  border-radius: 100px;
  border-color: rgba(24, 64, 0, 0.2);
  font-family: inherit;
}

/* ---- site floating button inside the account --------------------------------
   The theme's .gp-fab (parts/footer → floating-cta) already sits on every account screen;
   on desktop it takes the Figma account size (2590:6666): 56px pill, 52px icon circle,
   14px/600 label, 32px from the corner. Phones keep the theme's own compact rules. */
@media (min-width: 1025px) {
  body .gp-fab {
    right: 32px;
    bottom: 32px;
    gap: 7px;
    padding: 2px 2px 2px 13px;
    box-shadow: 0 16px 29.1px -19px rgba(24, 64, 0, 0.08), 0 2px 10px rgba(24, 64, 0, 0.06);
  }

  body .gp-fab .gp-fab__text {
    font-size: 14px;
    font-weight: 600;
    line-height: 15px;
    letter-spacing: 0.01em;
  }

  body .gp-fab .gp-fab__icon {
    width: 52px;
    height: 52px;
  }

  body .gp-fab .gp-fab__icon::before {
    width: 24px;
    height: 24px;
  }
}

/* ---- responsive --------------------------------------------------------- */
/* The sidebar is sticky and only viewport-tall; on long screens its white column must still
   run to the bottom of the portal, as in Figma — paint it on the portal itself. */
@media (min-width: 761px) {
  .diegp-customer-portal {
    background: linear-gradient(90deg, var(--gp-cp-white) var(--gp-cp-side-w), var(--gp-cp-canvas) var(--gp-cp-side-w));
  }
}

@media (max-width: 1100px) {
  .diegp-customer-portal {
    --gp-cp-side-w: 260px;
    --gp-cp-content-pad: 24px;
  }
}

@media (max-width: 760px) {
  .diegp-customer-portal {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
  }

  .diegp-cp-side {
    position: static;
    max-height: none;
    overflow: visible;
    padding: 20px 8px 8px;
    gap: 16px;
  }

  .diegp-cp-nav {
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
  }

  .diegp-cp-navbtn {
    width: auto;
    min-height: 44px;
    padding: 8px 12px;
    gap: 8px;
  }

  .diegp-cp-navbtn svg {
    width: 20px;
    height: 20px;
  }

  .diegp-cp-field-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- week picker --------------------------------------------------------
   "Immediately" or a calendar week. Two segmented options; the second opens
   the shared calendar (admin/js/datepicker.js) in week mode. */
/* .diegp-cp-modepick is the same segmented control for the plan-mode toggle. */
.diegp-cp-weekpick,
.diegp-cp-modepick {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.diegp-cp-weekopt {
  flex: 1 1 auto;
  padding: 9px 12px;
  border: 1px solid var(--gp-border);
  border-radius: var(--gp-radius-sm);
  background: var(--gp-surface);
  color: var(--gp-text-2);
  font: inherit;
  cursor: pointer;
  transition: var(--gp-transition);
}

.diegp-cp-weekopt:hover {
  border-color: var(--gp-accent);
  color: var(--gp-accent);
}

.diegp-cp-weekopt.is-active {
  border-color: var(--gp-accent);
  background: var(--gp-accent-soft);
  color: var(--gp-accent);
  font-weight: 600;
}

.diegp-cp-charcount {
  font-variant-numeric: tabular-nums;
}

.diegp-cp-weeks:empty {
  display: none;
}

.diegp-cp-chip-removable {
  background: var(--gp-accent-soft);
  border-color: var(--gp-accent);
  color: var(--gp-accent);
  font-family: inherit;
  cursor: pointer;
}

.diegp-cp-chip-removable:hover {
  background: var(--gp-accent);
  color: var(--gp-text-inverse);
}

.diegp-cp-datesbtn {
  align-self: flex-start;
  margin-bottom: 4px;
}

/* ---- override item rows (Replace subscription) --------------------------- */
.diegp-cp-items-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.diegp-cp-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}

.diegp-cp-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px 36px;
  gap: 8px;
  align-items: center;
}

.diegp-cp-item-del {
  height: 36px;
  border: 1px solid var(--gp-border);
  border-radius: var(--gp-radius-sm);
  background: var(--gp-surface);
  color: var(--gp-text-3);
  cursor: pointer;
  font-size: 13px;
}

.diegp-cp-item-del:hover {
  border-color: var(--gp-red);
  color: var(--gp-red);
  background: var(--gp-red-light);
}

.diegp-cp-item-del:disabled {
  opacity: 0.45;
  cursor: default;
}

.diegp-cp-item-del:disabled:hover {
  border-color: var(--gp-border);
  color: var(--gp-text-3);
  background: var(--gp-surface);
}

/* ---- in-modal confirmation ----------------------------------------------- */
.diegp-cp-ovl.is-confirming .diegp-cp-modal-body.is-active {
  display: none;
}

.diegp-cp-confirm-block {
  padding: 10px 0;
  border-bottom: 1px solid var(--gp-border);
}

.diegp-cp-confirm-block:last-child {
  border-bottom: 0;
}

.diegp-cp-confirm-h {
  margin-bottom: 4px;
  color: var(--gp-text-3);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.diegp-cp-confirm-line {
  font-size: 13.5px;
  line-height: 1.5;
}

.diegp-cp-confirm-warn {
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px solid var(--gp-orange);
  border-radius: var(--gp-radius-sm);
  background: var(--gp-orange-light);
}

.diegp-cp-confirm-warn .diegp-cp-confirm-h,
.diegp-cp-confirm-warn .diegp-cp-confirm-line {
  color: var(--gp-orange);
}

.diegp-cp-warn-info {
  border-color: var(--gp-accent);
  background: var(--gp-accent-soft);
  color: var(--gp-accent);
}

/* ---- skip dates (modal) -------------------------------------------------- */
.diegp-cp-skiplist {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.diegp-cp-skiprow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--gp-border);
  border-radius: var(--gp-radius-sm);
  background: var(--gp-surface);
  font-size: 12.5px;
}

.diegp-cp-skiprow .diegp-cp-b {
  flex: 1 1 auto;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.diegp-cp-ovleft {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.diegp-cp-ovleft .diegp-cp-b {
  flex: none;
}

.diegp-cp-ovline {
  font-size: 12px;
  line-height: 1.45;
}

.diegp-cp-ovhead {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.diegp-cp-changed {
  margin-left: 6px;
  vertical-align: middle;
}

.diegp-cp-ovweeks {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 3px 0;
}

.diegp-cp-req-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.diegp-cp-req-main .diegp-cp-b {
  font-weight: 600;
}

.diegp-cp-reqmore .diegp-cp-linkbtn {
  margin-left: 2px;
}

.diegp-cp-req-main .diegp-cp-muted,
.diegp-cp-reqmore-short,
.diegp-cp-reqmore-full {
  font-weight: 300;
}

.diegp-cp-linkbtn {
  align-self: flex-start;
  margin-top: 2px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--gp-accent);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.diegp-cp-linkbtn:hover {
  text-decoration: underline;
}

.diegp-cp-skiprow .diegp-cp-item-del {
  flex: none;
  width: 26px;
  height: 26px;
}

.diegp-cp-skiptype {
  flex: none;
}

.diegp-cp-skiprow.is-pending .diegp-cp-b {
  color: var(--gp-text-3);
  text-decoration: line-through;
}

.diegp-cp-sublabel {
  font-size: 11.5px;
  color: var(--gp-text-3);
}

.diegp-cp-countchip {
  display: inline-block;
  min-width: 17px;
  padding: 0 5px;
  border-radius: 99px;
  background: var(--gp-accent-soft);
  color: var(--gp-accent);
  font-size: 10.5px;
  font-weight: 800;
  line-height: 17px;
  text-align: center;
}

.gp-header {
  position: relative;
}

/* ---- Confirmation of a destructive request (task 65 part 9/10) ----------------
   openConfirm({ danger: true }) marks the overlay; the send button then gets the red
   outline of "Deaktivieren" (whole-account deactivation). */
.diegp-customer-portal #diegp-cp-confirm-ovl.is-danger #diegp-cp-confirm-ok {
  border-color: #f14f14;
  background: var(--gp-cp-white);
  color: #f14f14;
}

.diegp-customer-portal #diegp-cp-confirm-ovl.is-danger #diegp-cp-confirm-ok:hover:not([disabled]) {
  border-color: #f14f14;
  background: rgba(241, 79, 20, 0.08);
}

/* The theme's floating button sits in a higher stacking layer than the portal's dialogs;
   hide it while a dialog is open so it never floats over the dimmed page. */
body:has(.diegp-customer-portal .diegp-cp-ovl.is-open) .gp-fab {
  visibility: hidden;
}

/* ---- Phone, 760px and below (task 65 part 10) -----------------------------------
   No Figma frames for phones: built from the finished screens. Profile row on top with
   the bell on its right, the menu as one scrolling row of pills below it, one column of
   cards, tables as label/value cards, dialogs nearly full width with the buttons pinned
   to the bottom. Everything here lives inside this media query — 1440 is untouched. */
@media (max-width: 760px) {
  .diegp-customer-portal {
    --gp-cp-content-pad: 16px;
  }

  /* Profile row + menu row. */
  .diegp-customer-portal .diegp-cp-side {
    position: relative;
    height: auto;
    padding: 16px 0 12px;
    gap: 16px;
    box-shadow: 0 1px 0 rgba(24, 64, 0, 0.08);
  }

  .diegp-customer-portal .diegp-cp-profile {
    margin: 0 16px;
    padding-right: 56px; /* the bell sits here */
  }

  .diegp-customer-portal .diegp-cp-user-btn {
    padding: 0;
  }

  .diegp-customer-portal .diegp-cp-avatar {
    width: 40px;
    height: 40px;
  }

  .diegp-customer-portal .diegp-cp-avatar svg {
    width: 21px;
    height: 21px;
  }

  .diegp-customer-portal .diegp-cp-user-dd {
    right: auto;
    width: 240px;
    max-width: calc(100vw - 32px);
  }

  .diegp-customer-portal .diegp-cp-nav {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    width: 100%;
    overflow-x: auto;
    padding: 2px 16px 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .diegp-customer-portal .diegp-cp-nav::-webkit-scrollbar {
    display: none;
  }

  .diegp-customer-portal .diegp-cp-navbtn {
    flex: none;
    width: auto;
    min-height: 40px;
    padding: 0 14px;
    gap: 8px;
    border: 1px solid rgba(24, 64, 0, 0.2);
    border-radius: 100px;
    background: var(--gp-cp-white);
    white-space: nowrap;
  }

  .diegp-customer-portal .diegp-cp-navbtn svg {
    width: 20px;
    height: 20px;
  }

  .diegp-customer-portal .diegp-cp-navbtn.is-active {
    border-color: var(--gp-accent);
    background: var(--wp--preset--color--surface-mint, #e9f5e5);
    box-shadow: none;
  }

  .diegp-customer-portal .diegp-cp-count {
    margin-left: 0;
  }

  /* The top bar collapses into the bell on the right of the profile row. */
  .diegp-customer-portal .diegp-cp-topbar {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 3;
    width: auto;
    height: auto;
    background: none;
    box-shadow: none;
  }

  .diegp-customer-portal .diegp-cp-topbar-inner {
    padding: 0;
  }

  /* Content: 16px sides; room at the bottom so the site's floating button never covers
     the last buttons of a screen. */
  .diegp-customer-portal .diegp-cp-content {
    padding: 24px 16px 96px;
  }

  .diegp-customer-portal .diegp-cp-view > .diegp-cp-pageh {
    margin-bottom: 24px;
  }

  .diegp-customer-portal .diegp-cp-view > .diegp-cp-pageh h1 {
    font-size: 22px;
  }

  .diegp-customer-portal .diegp-cp-view .diegp-card:not(.diegp-cp-rq-list),
  .diegp-customer-portal .diegp-cp-view > .diegp-cp-sub,
  .diegp-customer-portal .diegp-cp-view .diegp-cp-row.diegp-cp-request {
    padding: 20px 16px;
  }

  .diegp-customer-portal .diegp-cp-view > .diegp-card:not(.diegp-cp-rq-list),
  .diegp-customer-portal .diegp-cp-view .diegp-cp-grid {
    margin-bottom: 24px;
  }

  .diegp-customer-portal .diegp-cp-view .diegp-cp-grid {
    gap: 16px;
  }

  /* Meine Abos: the week number of a scheduled change goes under its text. */
  .diegp-cp-view[data-view='subscription'] .diegp-cp-planned-row {
    flex-wrap: wrap;
    gap: 12px;
  }

  .diegp-cp-view[data-view='subscription'] .diegp-cp-planned-when {
    margin-left: 0;
  }

  .diegp-cp-view[data-view='subscription'] .diegp-cp-sub-head {
    gap: 12px;
  }

  /* Meine Anfragen: the cancel button gets its own line under the link (on a phone the
     link row is too narrow to share), the status pill lines up with the 16px padding. */
  .diegp-cp-view[data-view='approvals'] .diegp-cp-request .diegp-cp-cancel-request {
    position: static;
    margin-top: 16px;
  }

  .diegp-cp-view[data-view='approvals'] .diegp-cp-request:has(.diegp-cp-cancel-request) {
    padding-bottom: 20px;
  }

  .diegp-cp-view[data-view='approvals'] .diegp-cp-request .diegp-cp-notif-side .diegp-badge {
    top: 20px;
    left: 16px;
  }

  /* Tables → one card per row: label on the left, value on the right. */
  .diegp-cp-view[data-view='deliveries'] .diegp-cp-dlv-table,
  .diegp-cp-view[data-view='invoices'] .diegp-cp-inv-table {
    min-width: 0;
    table-layout: auto;
  }

  .diegp-cp-view[data-view='deliveries'] .diegp-cp-dlv-table,
  .diegp-cp-view[data-view='deliveries'] .diegp-cp-dlv-table tbody,
  .diegp-cp-view[data-view='deliveries'] .diegp-cp-dlv-table tr,
  .diegp-cp-view[data-view='invoices'] .diegp-cp-inv-table,
  .diegp-cp-view[data-view='invoices'] .diegp-cp-inv-table tbody,
  .diegp-cp-view[data-view='invoices'] .diegp-cp-inv-table tr {
    display: block;
    width: 100%;
  }

  .diegp-cp-view[data-view='deliveries'] .diegp-cp-dlv-table thead,
  .diegp-cp-view[data-view='deliveries'] .diegp-cp-dlv-table colgroup,
  .diegp-cp-view[data-view='invoices'] .diegp-cp-inv-table thead,
  .diegp-cp-view[data-view='invoices'] .diegp-cp-inv-table colgroup {
    display: none;
  }

  .diegp-cp-view[data-view='deliveries'] .diegp-cp-dlv-table tbody tr,
  .diegp-cp-view[data-view='invoices'] .diegp-cp-inv-table tbody tr.diegp-cp-inv-row {
    padding: 12px 0;
    border-top: 1px solid var(--gp-cp-rule);
  }

  .diegp-cp-view[data-view='deliveries'] .diegp-cp-dlv-table tbody tr:first-child,
  .diegp-cp-view[data-view='invoices'] .diegp-cp-inv-table tbody tr:first-child {
    padding-top: 0;
    border-top: 0;
  }

  .diegp-cp-view[data-view='deliveries'] .diegp-cp-dlv-table tbody td,
  .diegp-cp-view[data-view='invoices'] .diegp-cp-inv-table tbody td {
    display: block;
    position: relative;
    padding: 6px 0;
    border: 0;
    text-align: left;
    white-space: normal;
  }

  .diegp-cp-view[data-view='deliveries'] .diegp-cp-dlv-table tbody tr + tr td {
    border-top: 0;
  }

  .diegp-cp-view[data-view='deliveries'] .diegp-cp-dlv-table tbody td[data-label],
  .diegp-cp-view[data-view='invoices'] .diegp-cp-inv-table tbody td[data-label] {
    min-height: 32px;
    padding-left: 112px;
  }

  .diegp-cp-view[data-view='deliveries'] .diegp-cp-dlv-table tbody td[data-label]::before,
  .diegp-cp-view[data-view='invoices'] .diegp-cp-inv-table tbody td[data-label]::before {
    content: attr(data-label);
    position: absolute;
    top: 8px;
    left: 0;
    width: 100px;
    color: rgba(78, 92, 69, 0.6);
    font-size: 12px;
    font-weight: 500;
    line-height: 17px;
    text-transform: uppercase;
  }

  .diegp-cp-view[data-view='deliveries'] .diegp-cp-dlv-table td.is-empty {
    display: none;
  }

  .diegp-cp-view[data-view='deliveries'] .diegp-cp-dlv-table tbody td.diegp-cp-dlv-action,
  .diegp-cp-view[data-view='invoices'] .diegp-cp-inv-table.has-pdf .diegp-cp-inv-row > td:last-child {
    padding: 8px 0 0;
    text-align: left;
  }

  .diegp-cp-view[data-view='invoices'] .diegp-cp-inv-table tbody tr.diegp-cp-inv-detail > td {
    padding: 4px 0 12px;
  }

  .diegp-cp-view[data-view='invoices'] .diegp-cp-break-line {
    padding: 12px 16px;
  }

  /* Persönliche Daten: the hint wraps under its icon. */
  .diegp-cp-view[data-view='userdata'] .diegp-cp-ud-hint {
    align-items: flex-start;
  }

  /* Hilfe: smaller questions. */
  .diegp-cp-view[data-view='help'] .diegp-cp-faq,
  .diegp-cp-view[data-view='help'] .diegp-cp-help-contact {
    padding: 20px 16px;
  }

  .diegp-cp-view[data-view='help'] .diegp-cp-faq > summary {
    gap: 12px;
    font-size: 16px;
    line-height: 22px;
  }

  .diegp-cp-view[data-view='help'] .diegp-cp-faq-a {
    padding-top: 16px;
    font-size: 15px;
  }

  /* Dialogs: 16px from the screen edge, own scrolling, buttons pinned to the bottom. */
  .diegp-customer-portal .diegp-cp-ovl {
    padding: 16px;
  }

  .diegp-customer-portal .diegp-cp-modal {
    max-width: none;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    padding: 20px 16px 0;
    border-radius: var(--gp-cp-radius-m);
  }

  .diegp-customer-portal .diegp-cp-modal-foot {
    position: sticky;
    bottom: 0;
    z-index: 1;
    gap: 8px;
    margin-top: 16px;
    padding: 12px 0 16px;
    border-top: 1px solid rgba(24, 64, 0, 0.08);
    background: var(--gp-cp-white);
  }

  .diegp-customer-portal .diegp-cp-modal-foot .diegp-btn {
    flex: 1 1 auto;
    justify-content: center;
    padding: 0 12px;
  }

  .diegp-customer-portal .diegp-cp-modal .diegp-cp-weekopt {
    flex: 1 1 auto;
    white-space: normal;
    line-height: 18px;
  }

  .diegp-customer-portal .diegp-cp-modal .diegp-cp-item {
    grid-template-columns: minmax(0, 1fr) 64px 48px;
  }

  .diegp-customer-portal .diegp-cp-modal .diegp-cp-items-head {
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* The calendar popup fits a 320px screen: pinned 16px from the left edge. */
@media (max-width: 480px) {
  body .diegp-dp {
    left: 16px !important;
    max-width: calc(100vw - 32px);
  }
}