:root {
  --c-teal: #5bb6c1;
  --c-gold: #e9cb42;
  --c-blue: #7092be;
  --c-rose: #c1665b;
  --c-orange: #e97842;
  --c-mauve: #be7092;
  --c-dark-teal: #276167;
  --c-light-teal: #bbe4e4;
  --c-white-teal: #ddf0f2;
  --bg: #f4f8fa;
  --surface: #ffffff;
  --text: #1a2530;
  --muted: #5a6b7a;
  --border: #c8d8e0;
  --radius: 10px;
  --shadow: 0 2px 12px rgba(26, 37, 48, 0.08);
  --layout-max-width: min(90rem, calc(100vw - 2rem));
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Tailwind-Preflight ist deaktiviert – sonst überschreibt z. B. .flex das HTML-Attribut hidden */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--c-white-teal);
  color: var(--text);
  line-height: 1.45;
  min-height: 100vh;
}

.wrap {
  max-width: var(--layout-max-width);
  margin: 0 auto;
  padding: 1.25rem 1rem 3rem;
}

/* Kunden-App: Portal-Links + Hero bleiben beim Scrollen sichtbar */
.app-site-chrome {
  position: sticky;
  top: 0;
  z-index: 50;
  margin: 0 0 1.5rem;
  padding-bottom: 0.15rem;
  background: var(--c-white-teal);
}

.app-site-chrome header.hero {
  margin-bottom: 0;
}

.app-site-chrome .portal-footer-links--top {
  margin-bottom: 0.75rem;
}

header.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr) minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem 1.25rem;
  /*
   * Corporate Identity (alle 6 Farben aus :root):
   * Basis: Teal → Blau → Gold (ruhiger Hauptverlauf).
   * Mauve / Rose / Orange nur als sehr dezente Licht-Akzente (Ecken), damit es seriös bleibt.
   */
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.2) 0%,
      rgba(255, 255, 255, 0) 44%,
      rgba(0, 0, 0, 0.06) 100%
    ),
    radial-gradient(
      ellipse 65% 75% at 100% 0%,
      color-mix(in srgb, var(--c-mauve) 24%, transparent) 0%,
      transparent 58%
    ),
    radial-gradient(
      ellipse 60% 70% at 0% 100%,
      color-mix(in srgb, var(--c-rose) 16%, transparent) 0%,
      transparent 56%
    ),
    radial-gradient(
      ellipse 55% 55% at 100% 100%,
      color-mix(in srgb, var(--c-orange) 18%, transparent) 0%,
      transparent 52%
    ),
    linear-gradient(132deg, var(--c-teal) 0%, var(--c-blue) 46%, var(--c-gold) 100%);
  color: #fff;
  border-radius: var(--radius);
  padding: 1.35rem 1.5rem;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.32);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    var(--shadow),
    0 12px 36px -12px rgba(70, 100, 140, 0.28),
    0 4px 20px -6px rgba(91, 182, 193, 0.22);
}

.hero-brand {
  display: flex;
  align-items: center;
  min-width: 0;
}

.hero-brand--customer {
  justify-content: flex-start;
}

.hero-brand--company {
  justify-content: flex-end;
}

.hero-brand--admin-trigger {
  cursor: pointer;
  border-radius: 10px;
  outline-offset: 3px;
  transition: filter 0.15s, transform 0.1s;
}

.hero-brand--admin-trigger:hover {
  filter: brightness(1.04);
}

.hero-brand--admin-trigger:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
}

.hero-brand--admin-trigger:active {
  transform: scale(0.99);
}

/* Option: helle Fläche für beliebige Kundenlogos (Kontrast zum farbigen Header) */
.hero-brand.hero-brand--customer.hero-logo-plate {
  background: rgba(255, 255, 255, 0.97);
  border-radius: 10px;
  padding: 0.45rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 2px 14px rgba(26, 37, 48, 0.1);
  backdrop-filter: blur(6px);
}

.hero-text {
  text-align: center;
  min-width: 0;
  justify-self: stretch;
}

header.hero h1 {
  margin: 0 0 0.35rem;
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), 0 2px 14px rgba(0, 0, 0, 0.08);
}

header.hero p {
  margin: 0;
  opacity: 0.96;
  font-size: 0.95rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.14);
}

.hero-logo {
  height: auto;
  display: block;
  object-fit: contain;
}

.hero-brand--customer .hero-logo {
  max-height: 2.75rem;
  width: auto;
  max-width: min(220px, 100%);
}

.hero-logo-condots {
  max-height: 3.25rem;
  width: auto;
  max-width: min(360px, 100%);
}

@media (max-width: 720px) {
  header.hero {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .hero-brand--customer,
  .hero-brand--company {
    justify-content: center;
  }

  .hero-logo-condots {
    max-height: 2.65rem;
    max-width: min(340px, 92vw);
  }

  .hero-brand--customer .hero-logo {
    max-height: 2.35rem;
    max-width: min(220px, 90vw);
  }
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1.25rem;
}

.toolbar .spacer {
  flex: 1;
  min-width: 0.5rem;
}

.sync-status {
  font-size: 0.82rem;
  max-width: min(100%, 28rem);
  line-height: 1.35;
}

.sync-status--pending {
  color: var(--c-blue);
}

.sync-status--ok {
  color: var(--c-teal);
}

.sync-status--err {
  color: var(--c-rose);
  font-weight: 600;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  border-radius: 8px;
  padding: 0.45rem 0.9rem;
  background: var(--c-blue);
  color: #fff;
  font-weight: 600;
  transition: filter 0.15s, transform 0.1s;
}

button:hover {
  filter: brightness(1.06);
}

button:active {
  transform: scale(0.98);

}

button.secondary {
  background: var(--surface);
  color: var(--c-blue);
  border: 2px solid var(--c-blue);
}

button.accent {
  background: var(--c-teal);
}

button.warn {
  background: var(--c-rose);
}

button.ghost {
  background: transparent;
  color: var(--c-blue);
  border: 2px dashed var(--border);
}

body.customer-view .admin-only {
  display: none !important;
}

body:not(.portal-admin) .portal-admin-only {
  display: none !important;
}

/* Portal: Nur-Lese – kein Wechsel in den Bearbeitungsmodus */
body.portal-readonly .hero-brand--admin-trigger {
  display: none !important;
}

body.customer-view .edit-only {
  display: none !important;
}

body.customer-view .customer-hide {
  display: none !important;
}

body.customer-view .panel h2::before {
  background: var(--c-teal);
}

.panel {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow);
  border: 1px solid rgba(112, 146, 190, 0.2);
}

.panel h2 {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
  color: var(--c-blue);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.panel h2::before {
  content: "";
  width: 4px;
  height: 1.1em;
  background: var(--c-gold);
  border-radius: 2px;
}

.hint {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0 0 0.75rem;
}

.legend-details {
  margin: 0 0 1rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid rgba(112, 146, 190, 0.35);
  border-radius: var(--radius);
  background: rgba(91, 182, 193, 0.06);
}

.legend-details summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--c-blue);
  list-style-position: outside;
}

.legend-details summary::-webkit-details-marker {
  color: var(--c-teal);
}

.legend-body {
  margin-top: 0.65rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--border);
  font-size: 0.85rem;
  color: var(--text);
}

.legend-body p {
  margin: 0 0 0.65rem;
}

.legend-body dl {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(7rem, 9rem) 1fr;
  gap: 0.35rem 0.75rem;
  align-items: start;
}

.legend-body dt {
  margin: 0;
  font-weight: 600;
  color: #2a4a62;
}

.legend-body dd {
  margin: 0 0 0.4rem;
  color: var(--muted);
}

@media (max-width: 640px) {
  .legend-body dl {
    grid-template-columns: 1fr;
  }
  .legend-body dt {
    margin-top: 0.35rem;
  }
}

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

table.data th,
table.data td {
  text-align: left;
  padding: 0.45rem 0.5rem;
  border-bottom: 1px solid var(--border);
}

table.data th {
  background: rgba(91, 182, 193, 0.12);
  color: #2c4a5c;
  font-weight: 600;
}

table.data tr:hover td {
  background: rgba(233, 203, 66, 0.06);
}

table.data input,
table.data textarea {
  width: 100%;
  font: inherit;
  padding: 0.25rem 0.35rem;
  border: 1px solid var(--border);
  border-radius: 6px;
}

table.data input[type="number"] {
  max-width: 6rem;
}

table.data input[type="date"],
table.data input[type="month"] {
  min-width: 8.5rem;
}

table.data textarea {
  min-height: 2.25rem;
  resize: vertical;
}

table.data select.alloc-select {
  max-width: 100%;
  font-size: 0.82rem;
  padding: 0.3rem 0.35rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
}

table.data tbody.ln-year--collapsed > tr:not(.ln-year-header) {
  display: none;
}

table.data tbody tr.ln-year-header td {
  background: rgba(112, 146, 190, 0.08);
  padding: 0;
  border-bottom: 1px solid var(--border);
}

table.data tbody tr.ln-year-header:hover td {
  background: rgba(112, 146, 190, 0.12);
}

button.ln-year-toggle {
  width: 100%;
  text-align: left;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: 0.5rem 0.65rem;
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--c-blue);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

button.ln-year-toggle:hover {
  filter: brightness(0.92);
}

.ln-year-chevron {
  font-size: 0.75rem;
  opacity: 0.85;
  width: 1em;
  flex-shrink: 0;
}

.ln-year-meta {
  font-weight: 500;
  opacity: 0.75;
  font-size: 0.88em;
}

.num {
  font-variant-numeric: tabular-nums;
  text-align: right !important;
}

.badge {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
}

.badge-ok {
  background: rgba(91, 182, 193, 0.25);
  color: #1d6b76;
}

.badge-warn {
  background: rgba(193, 102, 91, 0.2);
  color: #8a3d35;
}

.quarter-grid {
  display: grid;
  gap: 1rem;
}

@media (min-width: 720px) {
  .quarter-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.quarter-detail-slot {
  margin-top: 1rem;
  max-width: 100%;
}

.quarter-detail-slot:empty {
  display: none;
}

table.data tfoot#tfoot-year tr.year-sum-row th,
table.data tfoot#tfoot-year tr.year-sum-row td {
  background: rgba(112, 146, 190, 0.12);
  border-top: 2px solid rgba(112, 146, 190, 0.45);
  font-weight: 600;
  color: #2a4a62;
  text-align: left;
}

table.data tfoot#tfoot-year tr.year-sum-row td.num {
  text-align: right;
}

#tbody-quarter tr.quarter-row-selectable {
  cursor: pointer;
}

#tbody-quarter tr.quarter-row-selectable:focus {
  outline: 2px solid var(--c-teal);
  outline-offset: -2px;
}

#tbody-quarter tr.quarter-row-selectable:focus:not(:focus-visible) {
  outline: none;
}

/* Jahreswechsel: deutliche Linie über ganze Zeile (nach Q4 → Q1 neues Jahr) */
#tbody-quarter tr.quarter-row--year-begin td {
  border-top: 6px solid color-mix(in srgb, var(--text, #1a2530) 18%, transparent);
}

/* Linker Streifen erste Spalte: Farbe nach Kalenderjahr (gerade/ungerade) */
#tbody-quarter tr.quarter-row--year-even td:first-child {
  border-left: 8px solid color-mix(in srgb, var(--c-teal) 72%, transparent);
}

#tbody-quarter tr.quarter-row--year-odd td:first-child {
  border-left: 8px solid color-mix(in srgb, var(--c-blue) 65%, transparent);
}

/* Aktive Quartalszeile – kein zusätzlicher inset-Schatten mehr (konflikt mit Jahresstreifen); Fokus bleibt über erste Zelle */
table.data tbody#tbody-quarter tr.quarter-row--active td:first-child {
  border-left-color: var(--c-blue);
  border-left-style: solid;
  border-left-width: 10px;
}

table.data tbody tr.quarter-row--active td {
  background: rgba(112, 146, 190, 0.22);
}

table.data tbody tr.quarter-row--active:hover td {
  background: rgba(112, 146, 190, 0.3);
}

.quarter-detail-card {
  max-width: 100%;
}

.card-q {
  border: 1px solid rgba(112, 146, 190, 0.35);
  border-radius: var(--radius);
  overflow: hidden;
}

.card-q .head {
  background: linear-gradient(90deg, rgba(91, 182, 193, 0.35), rgba(112, 146, 190, 0.2));
  padding: 0.5rem 0.75rem;
  font-weight: 700;
  color: #2a4a62;
}

.card-q .body {
  padding: 0.65rem 0.75rem;
  font-size: 0.88rem;
}

.quarter-detail-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 1rem 1.25rem;
  align-items: start;
}

.quarter-detail-col--lists .quarter-detail-list {
  margin: 0;
}

.quarter-detail-col--lists .quarter-detail-list + .quarter-detail-list {
  margin-top: 0.65rem;
}

@media (max-width: 720px) {
  .quarter-detail-columns {
    grid-template-columns: 1fr;
  }
}

.card-q dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 0.75rem;
}

.card-q dt {
  color: var(--muted);
  margin: 0;
}

.card-q dd {
  margin: 0;
  font-weight: 600;
}

.footnote {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--border);
}

.tabs-shell {
  margin-bottom: 0.5rem;
}

.tabs-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.35rem;
  margin-bottom: 0;
  background: rgba(112, 146, 190, 0.12);
  border-radius: var(--radius);
  border: 1px solid rgba(112, 146, 190, 0.25);
}

.tabs-tab {
  font: inherit;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 0.5rem 0.85rem;
  background: var(--surface);
  color: var(--c-blue);
  font-weight: 600;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.tabs-tab:hover {
  background: rgba(91, 182, 193, 0.15);
}

.tabs-tab:focus-visible {
  outline: 2px solid var(--c-teal);
  outline-offset: 2px;
}

.tabs-tab[aria-selected="true"] {
  /*background: linear-gradient(135deg, rgba(91, 182, 193, 0.45), rgba(112, 146, 190, 0.35));
  border-color: var(--c-blue);*/
  background: var(--c-gold);
  border-color: var(--muted);
  color: #1a3550;
}

.tabs-panels {
  padding-top: 0.75rem;
}

.tab-panel[hidden] {
  display: none !important;
}

.tab-panel:not([hidden]) .panel:first-child {
  margin-top: 0;
}

/* ── Mode-abhängige Sichtbarkeit ── */
body.mode-aufwand .mode-kontingent-only {
  display: none !important;
}

body.mode-kontingent .mode-aufwand {
  display: none !important;
}

/* ── Aufwand-Diagramm ── */
.chart-wrap {
  position: relative;
  max-width: 100%;
  margin: 0;
}

.chart-wrap canvas {
  width: 100% !important;
  max-height: 26rem;
}

.aufwand-month-label {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  min-width: 2.2em;
  margin-right: 0.15rem;
}

/* Portal: portal-home.php — gleiche CI wie header.hero (:root-Farben) */
.portal-shell {
  max-width: var(--layout-max-width);
  width: 100%;
  margin: 0 auto 2rem;
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(112, 146, 190, 0.22);
  box-shadow: var(--shadow);
}

/* Portal: Hero + Admin-Nav beim Scrollen sichtbar halten */
.portal-site-chrome {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--surface);
}

.portal-home-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.2) 0%,
      rgba(255, 255, 255, 0) 44%,
      rgba(0, 0, 0, 0.06) 100%
    ),
    radial-gradient(
      ellipse 65% 75% at 100% 0%,
      color-mix(in srgb, var(--c-mauve) 24%, transparent) 0%,
      transparent 58%
    ),
    radial-gradient(
      ellipse 60% 70% at 0% 100%,
      color-mix(in srgb, var(--c-rose) 16%, transparent) 0%,
      transparent 56%
    ),
    radial-gradient(
      ellipse 55% 55% at 100% 100%,
      color-mix(in srgb, var(--c-orange) 18%, transparent) 0%,
      transparent 52%
    ),
    linear-gradient(132deg, var(--c-teal) 0%, var(--c-blue) 46%, var(--c-gold) 100%);
  color: #fff;
  padding: 1.35rem 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.32);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    0 12px 36px -12px rgba(70, 100, 140, 0.28),
    0 4px 20px -6px rgba(91, 182, 193, 0.22);
}

.portal-home-hero h1 {
  margin: 0;
  font-size: 1.38rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

.portal-home-hero__user {
  margin: 0;
  margin-left: auto;
  text-align: right;
  font-size: 0.94rem;
  line-height: 1.35;
  opacity: 0.96;
  flex-shrink: 0;
}

.portal-home-hint {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.45;
  opacity: 0.96;
}

.portal-home-hint strong {
  font-weight: 700;
}

.portal-home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.portal-home-actions a {
  display: inline-block;
  font: inherit;
  cursor: pointer;
  border-radius: 8px;
  padding: 0.45rem 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: filter 0.15s, transform 0.1s;
  background: rgba(255, 255, 255, 0.96);
  color: var(--muted);
  border: 2px solid rgba(255, 255, 255, 0.88);
  box-shadow: 0 1px 2px rgba(26, 37, 48, 0.06);
}

.portal-home-actions a:hover {
  background: var(--c-gold);
  color: var(--muted);
  border: 2px solid var(--muted);
}

.portal-home-actions a:active {
  transform: scale(0.98);
}

.portal-admin-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.65rem 1.25rem;
  background: rgba(112, 146, 190, 0.1);
  border-bottom: 1px solid rgba(112, 146, 190, 0.22);
}

.portal-admin-nav__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  flex: 1;
  min-width: 0;
}

.portal-admin-nav__tab {
  font: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  border: 1px solid transparent;
  background: transparent;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.portal-admin-nav__tab:hover {
  background: rgba(255, 255, 255, 0.65);
  border-color: rgba(112, 146, 190, 0.35);
}

.portal-admin-nav__tab--active,
.portal-admin-nav__tab[aria-selected="true"] {
  background: var(--c-gold);
  border-color: rgba(0, 0, 0, 0.08);
  color: #1a3550;
}

.portal-admin-nav__logout {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  position: relative;
  z-index: 2;
  font: inherit;
  cursor: pointer;
  border-radius: 8px;
  padding: 0.45rem 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: filter 0.15s, transform 0.1s;
  background: rgba(255, 255, 255, 0.96);
  color: var(--muted);
  border: 2px solid rgba(255, 255, 255, 0.88);
  box-shadow: 0 1px 2px rgba(26, 37, 48, 0.06);
  flex-shrink: 0;
}

.portal-admin-nav__logout:hover {
  background: var(--c-gold);
  color: var(--muted);
  border-color: var(--muted);
}

.portal-admin-nav__link {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.portal-admin-nav__link:hover {
  background: rgba(255, 255, 255, 0.65);
  border-color: rgba(112, 146, 190, 0.35);
}

.portal-admin-nav__link--active {
  background: var(--c-gold);
  border-color: rgba(0, 0, 0, 0.08);
  color: #1a3550;
}

.portal-inactive-customers {
  border-top: 1px dashed rgba(112, 146, 190, 0.35);
  padding-top: 1rem;
}

.portal-inactive-customers__summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--muted);
  list-style: none;
}

.portal-inactive-customers__summary::-webkit-details-marker {
  display: none;
}

.portal-home-card--inactive {
  display: block;
  opacity: 0.75;
  cursor: default;
  pointer-events: none;
}

.portal-home-perm--inactive {
  background: rgba(112, 146, 190, 0.2);
  color: var(--muted);
}

.portal-home-body {
  padding: 1.25rem 1.35rem 1.5rem;
  background: var(--surface);
}

.portal-tab-panel[hidden] {
  display: none !important;
}

.portal-home .portal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.1rem 1.2rem;
  margin-top: 1.15rem;
  padding: 0;
  list-style: none;
}

.portal-home-card {
  background: var(--surface);
  border: 1px solid rgba(112, 146, 190, 0.28);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.44rem;
  box-sizing: border-box;
  height: 100%;
  text-decoration: none;
  color: var(--muted);
  transition: box-shadow 0.15s, border-color 0.15s, transform 0.1s;
}

.portal-home-card:hover {
  box-shadow:
    0 8px 28px -10px rgba(91, 182, 193, 0.35),
    0 4px 16px -6px rgba(70, 100, 140, 0.18);
  border-color: color-mix(in srgb, var(--c-teal) 42%, var(--border));
  background: var(--c-light-teal);
}

.portal-home-card:active {
  transform: scale(0.995);
}

.portal-home-card-title {
  font-size: 1.11rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 0.34rem;
  display: block;
}

.portal-home-card-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.portal-home-tag {
  display: inline-block;
  background: color-mix(in srgb, var(--c-teal) 16%, white);
  color: color-mix(in srgb, var(--c-teal) 8%, #1a2530);
  border-radius: 0.65em;
  font-size: 0.88em;
  padding: 0.18em 0.68em;
  font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--c-teal) 40%, transparent);
  letter-spacing: 0.02em;
}

.portal-home-perm {
  display: inline-block;
  font-size: 0.89em;
  padding: 0.15em 0.75em;
  border-radius: 0.65em;
  font-weight: 600;
  margin-top: 0.2rem;
}

.portal-home-perm--write {
  background: color-mix(in srgb, var(--c-teal) 14%, white);
  color: #2a5a62;
  border: 1px solid color-mix(in srgb, var(--c-teal) 38%, transparent);
}

.portal-home-perm--read {
  background: rgba(112, 146, 190, 0.12);
  color: var(--muted);
  border: 1px solid var(--border);
}

.portal-home .hint--warn {
  color: var(--c-rose);
  font-weight: 500;
}

.portal-home .hint--empty {
  color: var(--c-orange);
  font-weight: 500;
}

/* Schmale Shell: Login + Passwort-Reset (nicht Admin-Verwaltung) */
.portal-shell--narrow {
  max-width: 28rem;
}

/* Portal: Login (index.php), Passwort ändern (portal-password.php) */
.portal-login-page .portal-home-hero h1,
.portal-password-page .portal-home-hero h1,
.portal-home #portal-panel-password .portal-home-hero h1 {
  font-size: 1.35rem;
}

.portal-password-page .portal-auth-form,
.portal-home #portal-panel-password .portal-auth-form {
  max-width: 28rem;
}

.portal-auth-form label {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.portal-auth-form label:first-of-type {
  margin-top: 0;
}

.portal-auth-form input[type="text"],
.portal-auth-form input[type="password"],
.portal-auth-form input[type="email"] {
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.45rem 0.55rem;
  font: inherit;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.portal-auth-form input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--c-teal) 50%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-teal) 18%, transparent);
}

.portal-login-err {
  margin: 0 0 1rem;
  padding: 0.55rem 0.65rem;
  background: color-mix(in srgb, var(--c-rose) 12%, white);
  color: var(--c-rose);
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--c-rose) 28%, transparent);
}

.portal-login-page .portal-auth-form button[type="submit"] {
  margin-top: 1rem;
  width: 100%;
}

.portal-login-success {
  margin: 0 0 1rem;
  padding: 0.55rem 0.65rem;
  background: color-mix(in srgb, var(--c-teal) 12%, white);
  color: #2a5a62;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--c-teal) 28%, transparent);
}

.portal-forgot-details {
  margin-top: 1.35rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--border);
}

.portal-forgot-details summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--c-blue);
  list-style-position: outside;
}

.portal-forgot-details summary::-webkit-details-marker {
  color: var(--c-teal);
}

.portal-forgot-hint {
  margin: 0.65rem 0 0.75rem;
}

.portal-forgot-form {
  margin-top: 0.25rem;
}

/* E-Mail-Feld „Passwort vergessen“: 50 % breiter als die volle Kartenbreite */
.portal-login-page .portal-shell {
  overflow: visible;
}

.portal-login-page .portal-forgot-form input[type="email"] {
  width: 100%;
  max-width: none;
  margin-left: 0;
  box-sizing: border-box;
}

.portal-forgot-form button.secondary {
  margin-top: 0.75rem;
  width: 100%;
}

.portal-forgot-msg {
  margin: 0.75rem 0 0;
  font-size: 0.9rem;
}

.portal-forgot-msg--ok {
  color: var(--c-teal);
  font-weight: 600;
}

.portal-forgot-msg--err {
  color: var(--c-rose);
  font-weight: 600;
}

.portal-reset-info {
  margin-bottom: 0.75rem;
}

.portal-password-page .portal-auth-form .actions,
.portal-home #portal-panel-password .portal-auth-form .actions {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.portal-password-page .portal-auth-form .actions + label,
.portal-home #portal-panel-password .portal-auth-form .actions + label {
  margin-top: 1.25rem;
}

.portal-password-page #pw-msg,
.portal-home #portal-panel-password #pw-msg {
  margin-top: 1rem;
  font-size: 0.9rem;
}

.portal-password-page #pw-msg.ok,
.portal-home #portal-panel-password #pw-msg.ok {
  color: var(--c-teal);
  font-weight: 600;
}

.portal-password-page #pw-msg.err,
.portal-home #portal-panel-password #pw-msg.err {
  color: var(--c-rose);
  font-weight: 600;
}

/* Kunden-App: Portal-Links oben (über dem Hero) */
.portal-footer-links--top {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  column-gap: 1.75rem;
  row-gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0.65rem 1.1rem;
  font-size: 0.92rem;
  color: var(--muted);
  /* background: color-mix(in srgb, var(--c-teal) 10%, white); */
  border-bottom: 2px solid var(--c-dark-teal);
  /* border-radius: var(--radius); */
}

.portal-footer-links--top a {
  color: var(--c-dark-teal);
  font-weight: 600;
  text-decoration: none;
}

.portal-footer-links--top a:hover {
  color: var(--c-gold);
  text-decoration: underline;
}

@media (max-width: 600px) {
  .portal-shell {
    margin: 1rem auto;
  }

  .portal-login-page .portal-forgot-form input[type="email"] {
    width: 100%;
    margin-left: 0;
  }

  .portal-home .portal-grid {
    grid-template-columns: 1fr;
  }
}

/* Portal: Timetracker (portal-timetracker.php) */
.portal-timetracker-page .portal-tt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.portal-timetracker-page .portal-tt-table th,
.portal-timetracker-page .portal-tt-table td {
  padding: 0.5rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.portal-timetracker-page .portal-tt-actions {
  white-space: normal;
  min-width: 18rem;
}

.portal-timetracker-page .portal-tt-manual-row {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.portal-timetracker-page .portal-tt-manual {
  min-width: 12rem;
  flex: 1;
}

.portal-timetracker-page .portal-tt-msg {
  font-size: 0.9rem;
  margin-bottom: 1rem;
  padding: 0.75rem;
  border-radius: 6px;
  white-space: pre-wrap;
  word-break: break-all;
}

.portal-timetracker-page .portal-tt-msg--ok {
  background: rgba(0, 120, 80, 0.08);
  color: #0a5;
}

.portal-timetracker-page .portal-tt-msg--err {
  background: rgba(180, 0, 0, 0.08);
  color: #a00;
}

.portal-timetracker-page .portal-tt-tag--on {
  background: rgba(0, 120, 80, 0.15);
}

.portal-timetracker-page .portal-tt-tag--off {
  opacity: 0.85;
}

@media print {
  body {
    background: #fff;
  }

  .toolbar,
  .edit-only {
    display: none !important;
  }

  .tabs-list {
    display: none !important;
  }

  .tab-panel[hidden] {
    display: block !important;
  }

  .panel {
    box-shadow: none;
    break-inside: avoid;
  }
}

/* portal-home.php — Bearbeiten-Dialoge Kunde/Benutzer (Layout per CSS, nicht Tailwind-Arbitrary) */
#customer-modal .customer-modal-panel,
#user-modal .customer-modal-panel {
  box-sizing: border-box;
  width: 60vw;
  max-width: 60vw;
  padding: 1.25rem;
}

#customer-modal .customer-modal-cols,
#user-modal .customer-modal-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 2rem;
}

#customer-modal .customer-modal-col,
#user-modal .customer-modal-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

#customer-modal .customer-modal-section h3,
#user-modal .customer-modal-section h3 {
  margin: 0 0 0.5rem;
  padding-bottom: 0.375rem;
  border-bottom: 1px solid #f1f5f9;
  font-size: 0.875rem;
  font-weight: 600;
  color: #1e293b;
}

#customer-modal .customer-modal-fields,
#user-modal .customer-modal-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

#customer-modal .customer-modal-span-2,
#user-modal .customer-modal-span-2 {
  grid-column: 1 / -1;
}

#customer-modal .customer-modal-check,
#user-modal .customer-modal-check {
  display: flex;
  align-items: flex-end;
  padding-bottom: 0.25rem;
}

#user-modal .user-customers-list {
  max-height: min(14rem, 28vh);
  overflow-y: auto;
  padding-right: 0.25rem;
}

@media (max-width: 767px) {
  #customer-modal .customer-modal-panel,
  #user-modal .customer-modal-panel {
    width: 95vw;
    max-width: 95vw;
    max-height: 92vh;
    overflow-y: auto;
  }

  #customer-modal .customer-modal-cols,
  #customer-modal .customer-modal-fields,
  #user-modal .customer-modal-cols,
  #user-modal .customer-modal-fields {
    grid-template-columns: 1fr;
  }
}