/* Lindebergs PatientPortal — Design System (mobile-first, flat) */



:root {

  /* Brand (aligned with app.css) */

  --lindebergs-gold: #8b7355;

  --lindebergs-gold-dark: #6b5a45;

  --lindebergs-gold-light: #a89070;

  --lindebergs-bg: #f5f3f0;

  --lindebergs-text: #4a4a4a;



  /* Comma form is required: every consumer writes rgba(var(--pp-gold-rgb), a) */
  --pp-gold-rgb: 139, 115, 85;

  --pp-gold-dark-rgb: 107, 90, 69;

  /* Accent deck levels — use these instead of raw gold opacities */
  --pp-accent: var(--lindebergs-gold);
  --pp-accent-strong: var(--lindebergs-gold-dark);
  --pp-accent-tint: rgba(var(--pp-gold-rgb), 0.08);
  --pp-accent-tint-strong: rgba(var(--pp-gold-rgb), 0.14);
  --pp-accent-border: rgba(var(--pp-gold-rgb), 0.18);
  --pp-accent-border-strong: rgba(var(--pp-gold-rgb), 0.45);
  --pp-focus-ring: 0 0 0 2px rgba(var(--pp-gold-rgb), 0.35);



  /* Spacing (4px grid) */

  --pp-space-1: 0.25rem;

  --pp-space-2: 0.5rem;

  --pp-space-3: 0.75rem;

  --pp-space-4: 1rem;

  --pp-space-5: 1.25rem;

  --pp-space-6: 1.5rem;

  --pp-space-7: 2rem;

  --pp-space-8: 2.5rem;



  /* Radius */

  --pp-radius-sm: 6px;

  --pp-radius-md: 10px;

  --pp-radius-lg: 14px;

  --pp-radius-pill: 999px;



  /* Typography */

  --pp-text-xs: 0.75rem;

  --pp-text-sm: 0.875rem;

  --pp-text-base: 1rem;

  --pp-text-lg: 1.125rem;

  --pp-text-xl: 1.25rem;

  --pp-text-2xl: 1.5rem;



  /* Surfaces */

  --pp-surface: #ffffff;

  --pp-surface-muted: var(--lindebergs-bg);

  --pp-surface-tint: #fbfaf8;

  --pp-surface-sunken: #f3f0eb;

  /* Borders */
  --pp-border: #e3e0da;

  --pp-border-strong: #d1ccc2;

  /* Elevation — two levels only, the portal stays flat */
  --pp-shadow-card: 0 1px 2px rgba(47, 42, 36, 0.06);

  --pp-shadow-overlay: 0 12px 32px rgba(47, 42, 36, 0.18);

  /* Text ranks */
  --pp-text-strong: #2f2a24;

  --pp-text: var(--lindebergs-text);

  --pp-text-muted: #6b7280;

  --pp-text-subtle: #8a8278;



  /* Semantic */

  --pp-success: #059669;

  --pp-success-bg: #ecfdf5;

  --pp-warning: #d97706;

  --pp-warning-bg: #fffbeb;

  --pp-danger: #dc2626;

  --pp-danger-strong: #b91c1c;

  --pp-danger-bg: #fef2f2;

  --pp-info: #2563eb;

  --pp-info-bg: #eff6ff;

  --pp-success-border: rgba(5, 150, 105, 0.28);

  --pp-warning-border: rgba(217, 119, 6, 0.3);

  --pp-danger-border: rgba(220, 38, 38, 0.28);

  --pp-info-border: rgba(37, 99, 235, 0.25);

  /* Z-index ladder */

  --pp-z-sticky: 90;

  --pp-z-nav: 100;

  --pp-z-overlay: 1000;

  --pp-z-dialog: 1050;

  --pp-z-toast: 1100;

  --pp-z-error: 2000;



  /* Touch targets (WCAG-oriented minimum) */

  --pp-tap-min: 44px;



  /* Safe area & shell */

  --pp-safe-bottom: env(safe-area-inset-bottom, 0px);

  --pp-safe-top: env(safe-area-inset-top, 0px);

  --pp-header-height: 56px;

  --pp-nav-height: 60px;

  --pp-shell-bottom: calc(var(--pp-nav-height) + var(--pp-safe-bottom));

  /* Flow / document column — content, stepper, and in-flow footer share this width */
  --pp-flow-max-width: 720px;

  /* Hub column — Übersicht, Konto, and in-app flows with main nav */
  --pp-hub-max-width: 960px;

}



/* ===== App shell ===== */

.pp-app-shell {

  min-height: 100vh;

  min-height: 100dvh;

  display: flex;

  flex-direction: column;

  background: var(--pp-surface-muted);

}



.pp-app-shell__main {

  flex: 1;

  display: flex;

  flex-direction: column;

  min-width: 0;

}



.pp-app-shell--with-nav .pp-app-shell__main {

  padding-bottom: var(--pp-shell-bottom);

}



.pp-app-shell--with-nav .pp-app-shell__footer {

  padding-bottom: var(--pp-shell-bottom);

}



.pp-app-shell__footer {

  background-color: var(--lindebergs-bg);

  color: var(--pp-text-muted);

  font-size: var(--pp-text-sm);

  text-align: center;

  padding: var(--pp-space-3) var(--pp-space-4);

}



/* Support-Preview-Banner (Admin, nur Lesen) */

.pp-preview-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pp-space-3);
  padding: var(--pp-space-2) var(--pp-space-4);
  background: var(--pp-accent-soft, #fff3cd);
  color: var(--pp-text-primary, #1a1a1a);
  border-bottom: 1px solid var(--pp-border-subtle, #e5e5e5);
  font-size: var(--pp-text-sm, 0.875rem);
  position: sticky;
  top: 0;
  z-index: calc(var(--pp-z-nav) - 1);
}

.pp-preview-banner__text {
  flex: 1;
  min-width: 0;
}

.pp-preview-banner__end {
  flex-shrink: 0;
  border: 1px solid var(--pp-border-subtle, #ccc);
  background: #fff;
  border-radius: var(--pp-radius-sm, 4px);
  padding: var(--pp-space-1) var(--pp-space-3);
  font-size: var(--pp-text-sm, 0.875rem);
  cursor: pointer;
}



/* Header */

.pp-app-header {

  position: sticky;

  top: 0;

  z-index: var(--pp-z-nav);

  /* Equal side columns keep brand/title viewport-centered even when desktop nav is wide. */

  display: grid;

  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);

  align-items: center;

  gap: var(--pp-space-2);

  min-height: var(--pp-header-height);

  padding: var(--pp-space-2) var(--pp-space-4);

  padding-top: calc(var(--pp-space-2) + var(--pp-safe-top));

  background: var(--pp-surface);

}



.pp-app-header__back,

.pp-app-header__action {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-width: 44px;

  min-height: 44px;

  padding: var(--pp-space-2);

  border: none;

  background: transparent;

  color: var(--lindebergs-gold);

  text-decoration: none;

  border-radius: var(--pp-radius-sm);

  cursor: pointer;

}



.pp-app-header__back,

.pp-app-header > .pp-app-header__spacer {

  justify-self: start;

}



.pp-app-header__back:hover,

.pp-app-header__action:hover {

  background: rgba(var(--pp-gold-rgb), 0.08);

}



.pp-app-header__center {

  min-width: 0;

  overflow: hidden;

  text-align: center;

  justify-self: center;

}



.pp-app-header__actions {

  justify-self: end;

  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: var(--pp-space-2);

  min-width: 0;

}



.pp-app-header__title {

  margin: 0;

  font-size: var(--pp-text-lg);

  font-weight: 600;

  color: var(--lindebergs-text);

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



.pp-app-header__brand {

  margin: 0;

  font-size: var(--pp-text-sm);

  font-weight: 600;

  letter-spacing: 0.12em;

  color: var(--lindebergs-gold);

}



.pp-app-header__brand-tagline {

  margin: 0;

  font-size: var(--pp-text-xs);

  letter-spacing: 0.06em;

  color: var(--pp-text-muted);

}



.pp-app-header__spacer {

  display: block;

  width: 44px;

  height: 44px;

}



/* Bottom navigation */

.pp-bottom-nav {

  position: fixed;

  left: 0;

  right: 0;

  bottom: 0;

  z-index: var(--pp-z-nav);

  display: flex;

  align-items: stretch;

  min-height: var(--pp-nav-height);

  padding-bottom: var(--pp-safe-bottom);

  background: var(--pp-surface);

}



.pp-bottom-nav__item {

  flex: 1;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 2px;

  min-height: var(--pp-nav-height);

  padding: var(--pp-space-1) var(--pp-space-2);

  text-decoration: none;

  color: var(--pp-text-muted);

  font-size: var(--pp-text-xs);

  font-weight: 500;

  border: none;

  background: transparent;

  cursor: pointer;

  transition: color 0.15s ease;

}



.pp-bottom-nav__item:hover,

.pp-bottom-nav__item:focus {

  color: var(--lindebergs-gold);

  text-decoration: none;

}



.pp-bottom-nav__item.active {

  color: var(--lindebergs-gold);

  font-weight: 600;

}



.pp-bottom-nav__item .pp-icon,

.pp-bottom-nav__item svg {

  width: 22px;

  height: 22px;

}



/* Desktop: nav in header */

@media (min-width: 1024px) {

  .pp-bottom-nav {

    display: none;

  }



  .pp-app-shell--with-nav .pp-app-shell__main,

  .pp-app-shell--with-nav .pp-app-shell__footer {

    padding-bottom: 0;

  }



  .pp-app-shell--with-nav .pp-flow-page {

    min-height: calc(100vh - var(--pp-header-height));

    min-height: calc(100dvh - var(--pp-header-height));

  }



  .pp-app-header__nav {

    display: flex;

    gap: var(--pp-space-1);

  }



  .pp-app-header__nav-link {

    display: inline-flex;

    align-items: center;

    gap: var(--pp-space-2);

    min-height: 44px;

    padding: var(--pp-space-2) var(--pp-space-4);

    border-radius: var(--pp-radius-pill);

    text-decoration: none;

    color: var(--pp-text-muted);

    font-size: var(--pp-text-sm);

    font-weight: 500;

  }



  .pp-app-header__nav-link:hover {

    background: rgba(var(--pp-gold-rgb), 0.08);

    color: var(--lindebergs-gold);

  }



  .pp-app-header__nav-link.active {

    background: rgba(var(--pp-gold-rgb), 0.12);

    color: var(--lindebergs-gold-dark);

    font-weight: 600;

  }

}



@media (max-width: 1023px) {

  .pp-app-header {

    /* Sides size to their controls so the patient selector cannot overlap the brand. */

    grid-template-columns: auto minmax(0, 1fr) auto;

  }



  .pp-app-header__nav {

    display: none;

  }



  .pp-app-header__brand-tagline {

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

  }

}



@media (max-width: 639px) {

  /* Long tagline + header actions (patient names) do not fit a phone width. */

  .pp-app-header__brand-tagline {

    display: none;

  }

}



/* Flow page */

.pp-flow-page {

  display: flex;

  flex-direction: column;

  min-height: calc(100vh - var(--pp-header-height));

  min-height: calc(100dvh - var(--pp-header-height));

  padding-inline: var(--pp-space-4);

  box-sizing: border-box;

}



.pp-app-shell--with-nav .pp-flow-page {

  min-height: calc(100vh - var(--pp-header-height) - var(--pp-shell-bottom));

  min-height: calc(100dvh - var(--pp-header-height) - var(--pp-shell-bottom));

}



/* Logged-in app flows share the hub column with Übersicht / Konto */
.pp-flow-page--hub-column {

  max-width: var(--pp-hub-max-width);

  margin-inline: auto;

  width: 100%;

}



.pp-flow-page--hub-column .wizard-progress-wrapper,

.pp-flow-page--hub-column .pp-flow-page__content {

  max-width: none;

}



/* Space between sticky header and wizard step circles */
.pp-flow-page .wizard-progress-wrapper {

  width: 100%;

  max-width: var(--pp-flow-max-width);

  margin: 0 auto;

  padding: var(--pp-space-5) 0 0;

}



.pp-flow-page .wizard-progress-wrapper .wizard-progress {

  margin-bottom: var(--pp-space-4);

}



/* F1 panel: step content + footer share one white surface (like document body). */
.pp-flow-page__content {

  width: 100%;

  max-width: var(--pp-flow-max-width);

  margin: var(--pp-space-6) auto var(--pp-space-4);

  padding: var(--pp-space-6);

  background: var(--pp-surface);

  border-radius: var(--pp-radius-lg);

  box-shadow: var(--pp-shadow-card);

  box-sizing: border-box;

}

@media (max-width: 767px) {

  .pp-flow-page__content {

    padding: var(--pp-space-4);

  }

}



/* Actions sit inside the white content panel — not sticky / not viewport-bleed. */
.pp-flow-footer {

  width: 100%;

  margin-top: var(--pp-space-6);

  padding-top: var(--pp-space-4);

  border-top: 1px solid var(--pp-border);

  box-sizing: border-box;

}

.pp-flow-footer__inner {

  display: flex;

  flex-wrap: wrap;

  gap: var(--pp-space-3);

  justify-content: space-between;

  align-items: center;

  width: 100%;

  box-sizing: border-box;

}

/* Kein leerer Footer (Padding/Linie), wenn FooterContent nichts rendert */
.pp-flow-footer:not(:has(.pp-flow-footer__inner > *)) {
  display: none;
  margin: 0;
  padding: 0;
  border: none;
}



/* Mobile: primary under secondary, buttons fill the content column. */
.pp-flow-footer__inner--stack {

  flex-direction: column-reverse;

}



.pp-flow-footer__inner--stack > * {

  width: 100%;

}

/* Tablet+: side-by-side, natural button width. */
@media (min-width: 768px) {

  .pp-flow-footer__inner--stack {

    flex-direction: row;

    flex-wrap: nowrap;

    justify-content: space-between;

  }



  .pp-flow-footer__inner--stack > * {

    width: auto;

    flex: 0 1 auto;

  }



  .pp-flow-footer__inner--stack .pp-btn--block {

    width: auto;

  }

}



/* Side-by-side Speichern/Abbrechen (Konto forms, BV confirm) — compact cluster, not full-bleed extremes */

.pp-flow-actions {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  justify-content: flex-end;

  gap: var(--pp-space-3);

  width: fit-content;

  max-width: 100%;

  margin-left: auto;

}



/* In-content Check-in step actions (Weiter) — full-width separator below form sections.
   .checkin-page is no longer in the markup (pp-flow-page); keep this independent of that legacy scope. */
.pp-flow-actions.checkin-actions {

  width: 100%;

  max-width: 100%;

  margin-left: 0;

  margin-top: var(--pp-space-7);

  padding-top: var(--pp-space-6);

  border-top: 1px solid var(--pp-border);

  box-sizing: border-box;

}



.pp-flow-actions > .pp-btn,

.pp-flow-actions > a.pp-btn {

  flex: 0 1 auto;

  width: auto;

  min-width: 8.5rem;

}



.pp-flow-actions > .pp-btn--primary {

  min-width: 9.5rem;

}



/* Hub / standard page */

.pp-hub-page {

  padding: var(--pp-space-4);

  max-width: var(--pp-hub-max-width);

  margin: 0 auto;

  width: 100%;

}



/* Document page */

.pp-document-page {

  padding: var(--pp-space-4);

  max-width: var(--pp-flow-max-width);

  margin: 0 auto;

  width: 100%;

}

/* Authenticated document hubs should use the same width as Übersicht/Konto. */
.pp-document-page--hub {
  max-width: var(--pp-hub-max-width);
}



.pp-document-page__body {

  background: var(--pp-surface);

  border-radius: var(--pp-radius-lg);

  padding: var(--pp-space-6);

}



/* Konto list */

.pp-konto-list {

  list-style: none;

  margin: 0;

  padding: 0;

  display: flex;

  flex-direction: column;

  gap: var(--pp-space-2);

}



.pp-konto-list__item {

  background: var(--pp-surface);

  border-radius: var(--pp-radius-md);

  overflow: hidden;

}



.pp-konto-list__link {

  display: flex;

  align-items: center;

  gap: var(--pp-space-4);

  min-height: 56px;

  padding: var(--pp-space-4);

  text-decoration: none;

  color: var(--lindebergs-text);

  font-size: var(--pp-text-base);

}



.pp-konto-list__link:hover {

  background: rgba(var(--pp-gold-rgb), 0.06);

  color: var(--lindebergs-gold-dark);

}



.pp-konto-list__link .pp-icon,

.pp-konto-list__link svg {

  flex-shrink: 0;

  color: var(--lindebergs-gold);

}



.pp-konto-list__chevron {

  margin-left: auto;

  color: var(--pp-text-muted);

}



/* Unified states */

.pp-empty-state,

.pp-loading-state,

.pp-result-screen {

  text-align: center;

  padding: var(--pp-space-8) var(--pp-space-4);

}



.pp-empty-state__icon,

.pp-result-screen__icon {

  color: var(--lindebergs-gold);

  margin-bottom: var(--pp-space-4);

}



.pp-empty-state h3 {

  margin: 0 0 var(--pp-space-2);

  font-size: var(--pp-text-base);

  font-weight: 600;

  line-height: 1.45;

  color: var(--pp-text);

}



.pp-empty-state p {

  margin: 0;

  font-size: var(--pp-text-sm);

  line-height: 1.5;

  color: var(--pp-text-muted);

  max-width: 22rem;

  margin-inline: auto;

}



.pp-loading-state .spinner {

  margin: 0 auto var(--pp-space-4);

}



.pp-result-screen__summary {

  background: var(--pp-surface);

  border-radius: var(--pp-radius-md);

  padding: var(--pp-space-4);

  margin: var(--pp-space-4) 0;

  text-align: left;

}



.pp-result-screen__actions {

  display: flex;

  flex-direction: column;

  gap: var(--pp-space-3);

  margin-top: var(--pp-space-6);

}



/* Overflow menu (dashboard) */

.pp-overflow-menu {

  position: relative;

}



.pp-overflow-menu__panel {

  position: absolute;

  top: 100%;

  right: 0;

  z-index: var(--pp-z-sticky);

  min-width: 180px;

  margin-top: var(--pp-space-2);

  background: var(--pp-surface);

  border-radius: var(--pp-radius-md);

  padding: var(--pp-space-2);

}

@media (max-width: 767.98px) {
  .pp-overflow-menu__panel {
    right: auto;
    left: 0;
  }
}



.pp-overflow-menu__item {

  display: flex;

  align-items: center;

  gap: var(--pp-space-2);

  width: 100%;

  min-height: 44px;

  padding: var(--pp-space-2) var(--pp-space-3);

  border: none;

  background: transparent;

  text-align: left;

  font-size: var(--pp-text-sm);

  color: var(--lindebergs-text);

  border-radius: var(--pp-radius-sm);

  cursor: pointer;

}



.pp-overflow-menu__item:hover:not(:disabled) {

  background: rgba(var(--pp-gold-rgb), 0.08);

}



.pp-overflow-menu__item:disabled {

  opacity: 0.5;

  cursor: not-allowed;

}



@media (min-width: 768px) {

  .pp-overflow-menu--mobile-only {

    display: none;

  }

}



@media (max-width: 767px) {

  .pp-utilities-desktop-only {

    display: none !important;

  }

}



/* ===== Button system ===== */

.pp-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: var(--pp-space-2);

  min-height: 48px;

  padding: var(--pp-space-3) var(--pp-space-5);

  border-radius: var(--pp-radius-md);

  font-size: var(--pp-text-base);

  font-weight: 600;

  line-height: 1.2;

  text-decoration: none;

  border: none;

  cursor: pointer;

  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;

}



.pp-btn:disabled {

  opacity: 0.55;

  cursor: not-allowed;

}



.pp-btn--primary {

  color: var(--pp-surface);

  background: var(--lindebergs-gold);

}



.pp-btn--primary:hover:not(:disabled) {

  background: var(--lindebergs-gold-dark);

}



.pp-btn--secondary {

  color: var(--lindebergs-gold-dark);

  background: rgba(var(--pp-gold-rgb), 0.1);

}



.pp-btn--secondary:hover:not(:disabled) {

  background: rgba(var(--pp-gold-rgb), 0.16);

}



.pp-btn--ghost {

  color: var(--lindebergs-gold);

  background: transparent;

}



.pp-btn--ghost:hover:not(:disabled) {

  background: rgba(var(--pp-gold-rgb), 0.08);

}



.pp-btn--danger {

  color: var(--pp-surface);

  background: var(--pp-danger);

}



.pp-btn--danger:hover:not(:disabled) {

  background: var(--pp-danger-strong);

}



.pp-btn--block {

  width: 100%;

}



.pp-btn--sm {

  min-height: 40px;

  padding: var(--pp-space-2) var(--pp-space-4);

  font-size: var(--pp-text-sm);

}



.pp-btn--lg {

  min-height: 52px;

  padding: var(--pp-space-4) var(--pp-space-6);

}



/* Legacy button alignment */

.pp-btn--primary,

.btn-primary,

.btn-next,

.btn-book,

.btn-checkin-primary,

.dashboard-primary-action,

.btn-book-series,

.btn-send-code,

.btn-confirm-slot,

.btn-dept-confirm-slot,

.confirm-card__action-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: var(--pp-space-2);

  min-height: 48px;

  padding: var(--pp-space-3) var(--pp-space-5);

  border-radius: var(--pp-radius-md);

  font-size: var(--pp-text-base);

  font-weight: 600;

  line-height: 1.2;

  text-decoration: none;

  cursor: pointer;

  border: none !important;

  box-shadow: none !important;

  color: var(--pp-surface) !important;

  background: var(--lindebergs-gold) !important;

}



.pp-btn--primary:hover:not(:disabled),

.btn-primary:hover:not(:disabled),

.btn-next:hover:not(:disabled),

.btn-book:hover:not(:disabled),

.btn-checkin-primary:hover:not(:disabled),

.dashboard-primary-action:hover:not(:disabled),

.btn-book-series:hover:not(:disabled),

.btn-send-code:hover:not(:disabled),

.btn-confirm-slot:hover:not(:disabled),

.btn-dept-confirm-slot:hover:not(:disabled),

.confirm-card__action-btn:hover:not(:disabled) {

  background: var(--lindebergs-gold-dark) !important;

}



.pp-btn--secondary,

.btn-back,

.btn-secondary,

.dashboard-quick-link,

.dashboard-secondary-action,

.confirm-card__action-btn--secondary {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: var(--pp-space-2);

  min-height: 48px;

  padding: var(--pp-space-3) var(--pp-space-5);

  border-radius: var(--pp-radius-md);

  font-size: var(--pp-text-base);

  font-weight: 500;

  line-height: 1.2;

  text-decoration: none;

  cursor: pointer;

  border: none !important;

  box-shadow: none !important;

  color: var(--lindebergs-gold-dark) !important;

  background: rgba(var(--pp-gold-rgb), 0.1) !important;

}



.pp-btn--secondary:hover:not(:disabled),

.btn-back:hover:not(:disabled),

.btn-secondary:hover:not(:disabled),

.dashboard-quick-link:hover:not(:disabled),

.dashboard-secondary-action:hover:not(:disabled),

.confirm-card__action-btn--secondary:hover:not(:disabled) {

  background: rgba(var(--pp-gold-rgb), 0.16) !important;

}



.pp-btn--danger,

.btn-cancel-appointment,

.btn-cancel-confirm,

.btn-cancel-late {

  min-height: 48px;

  border: none !important;

  box-shadow: none !important;

}



/* Feedback tab — fixed right-edge affordance (Desktop ≥1024). Mobile: Konto list. */

.feedback-tab {

  position: fixed;

  right: env(safe-area-inset-right, 0px);

  top: 50%;

  transform: translateY(-50%);

  z-index: var(--pp-z-overlay); /* under --pp-z-dialog / toast */

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: var(--pp-space-2);

  writing-mode: vertical-rl;

  text-orientation: mixed;

  padding: var(--pp-space-4) var(--pp-space-3);

  border: none;

  border-radius: var(--pp-radius-sm) 0 0 var(--pp-radius-sm);

  background: var(--lindebergs-gold);

  color: #fff;

  cursor: pointer;

  box-shadow: none;

  transition: padding 0.2s ease, background 0.2s ease;

}



.feedback-tab-text {

  font-size: var(--pp-text-sm);

  font-weight: 600;

  letter-spacing: 1px;

  text-transform: uppercase;

}



.feedback-tab-icon {

  display: none;

  writing-mode: horizontal-tb;

}



.feedback-tab:hover {

  padding-right: var(--pp-space-4);

  background: var(--lindebergs-gold-dark);

}



.feedback-tab:active {

  transform: translateY(-50%) scale(0.98);

}



.feedback-tab:focus-visible {

  outline: none;

  box-shadow: var(--pp-focus-ring);

}



@media (max-width: 1023px) {

  .feedback-tab {

    display: none;

  }

}


/* ==========================================================================
   Choice tiles (pp-tile) - shared chrome; silhouettes via modifiers
   ========================================================================== */

.pp-tile-grid {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: 1fr;
}

.pp-tile-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pp-tile-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pp-tile-grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
}

.pp-tile-grid--solo {
  grid-template-columns: 1fr;
  max-width: 20rem;
}

.pp-tile-grid--secondary {
  margin-top: 0.55rem;
}

.pp-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.15rem;
  width: 100%;
  min-height: var(--pp-tap-min);
  padding: 0.65rem 0.75rem;
  border: 1.5px solid var(--pp-accent-border);
  border-radius: 10px;
  background: var(--pp-surface);
  box-shadow: none;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-variant-ligatures: none;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
}

.pp-tile:hover:not(:disabled) {
  border-color: var(--pp-accent-border-strong);
  background: var(--pp-surface-tint);
}

.pp-tile:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  background: var(--pp-surface);
  border-color: var(--pp-accent-border);
  box-shadow: none;
}

.pp-tile:focus-visible {
  outline: 2px solid var(--lindebergs-gold);
  outline-offset: 2px;
}

.pp-tile.is-selected {
  border-color: var(--lindebergs-gold);
  background: var(--pp-accent-tint);
  box-shadow: inset 0 0 0 1px rgba(var(--pp-gold-rgb), 0.2);
}

.pp-tile-title {
  font-size: 0.88rem;
  font-weight: 650;
  line-height: 1.3;
  color: #2f2a24;
}

.pp-tile-hint {
  font-size: 0.72rem;
  font-weight: 450;
  line-height: 1.3;
  color: #6b6560;
}

.pp-tile-desc {
  font-size: 0.78rem;
  font-weight: 450;
  line-height: 1.35;
  color: #6b6560;
}

/* Silhouette: find � dense chip rows (Abteilung / Dauer) */
.pp-tile--dense {
  padding: 0.5rem 0.65rem;
}

/* Silhouette: insurance statement � longer binary labels */
.pp-tile--statement {
  min-height: 2.75rem;
  padding: 0.55rem 0.75rem;
}

/* Silhouette: recipe mode � title + short desc, slightly taller */
.pp-tile--choice {
  gap: 0.2rem;
  padding: 0.7rem 0.85rem;
  min-height: 3.35rem;
}

/* Silhouette: therapist portrait */
.pp-tile--portrait {
  position: relative;
  align-items: center;
  gap: 0.45rem;
  padding: 0.75rem 0.5rem;
  text-align: center;
}

.pp-tile--portrait .pp-tile-title {
  font-size: 0.82rem;
  text-align: center;
}

.pp-tile-check {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  background: var(--lindebergs-gold);
  color: var(--pp-surface);
  line-height: 0;
}

.pp-tile-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(
    135deg,
    rgba(var(--pp-gold-rgb), 0.2),
    rgba(var(--pp-gold-rgb), 0.4)
  );
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pp-tile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pp-tile-initials {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--lindebergs-gold);
}

.pp-tile-grid--portrait {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

@media (min-width: 560px) {
  .pp-tile-grid--portrait {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .pp-tile-grid--auto {
    grid-template-columns: 1fr;
  }
}

/* Native checkbox row for optional modes (Mehrere Personen) */
.pp-check-row {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--pp-tap-min);
  padding: 0.1rem 0;
  align-self: flex-start;
  cursor: pointer;
  user-select: none;
}

.pp-check-row__input {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--lindebergs-gold);
  cursor: pointer;
}

.pp-check-row__label {
  font-size: var(--pp-text-sm);
  font-weight: 550;
  line-height: 1.35;
  color: var(--pp-text-strong);
}