/* Penpals Page minimal accents, aligned with "nice-website" */

.penpals-hero {
  /* subtle blue gradient */
  background: linear-gradient(
    135deg,
    rgba(15, 76, 129, 0.08),
    rgba(33, 150, 243, 0.12)
  );
  color: var(--pl-text, #111827);
  /* generous vertical padding (utility classes add more; this is a baseline) */
  padding-top: 24px;
  padding-bottom: 24px;
  /* soft rounded bottom corners */
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

:is(:root, [data-portal-root]).dark .penpals-hero {
  background: linear-gradient(
    135deg,
    rgba(15, 76, 129, 0.25),
    rgba(33, 150, 243, 0.2)
  );
}

/* Card hover accent: lift and soft shadow, respecting focus ring/outline */
.penpals-card {
  color: #111827;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
  will-change: transform, box-shadow;
}
.penpals-card:hover {
  transform: translateY(-2px) !important;
  box-shadow:
    0 6px 16px rgba(15, 76, 129, 0.14),
    0 2px 6px rgba(15, 76, 129, 0.1) !important;
}
/* keep keyboard focus visible */
.penpals-card:focus-within {
  outline: 2px solid rgba(33, 150, 243, 0.5);
  outline-offset: 2px;
}

/* Optional fallback for line-clamp-3 if utility isn't present */
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Penpals: thumbnail image (left in card) */
.penspals-thumb,
.penpals-thumb {
  width: 96px;
  height: 96px;
  object-fit: cover; /* defensive fallback in case utility class is missing */
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px; /* matches rounded-md utility */
  box-shadow: 0 2px 6px rgba(15, 76, 129, 0.08);
}
@media (min-width: 1024px) {
  .penpals-thumb {
    width: 112px;
    height: 112px; /* slightly larger on lg screens */
  }
}

/* Star badges (premium/verified) */
.star {
  display: inline-block;
  vertical-align: text-bottom;
  margin-left: 0.25rem;
}
.star--yellow {
  color: #f4c430;
  filter: saturate(1.2) brightness(1.05);
  opacity: 0.95;
}
.star--green {
  color: #2ecc71;
}

/* Verified info strip */
.verified-strip {
  background: rgba(46, 204, 113, 0.1);
  color: #2e7d32;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem; /* ~6px */
  font-size: 0.8125rem; /* ~13px */
}

/* Compact toolbar styles for action bar */
.penpals-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.penpals-toolbar .btn {
  padding: 0.375rem 0.5rem;
  font-size: 0.8125rem; /* ~13px */
  line-height: 1.2;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0.375rem;
  background: #ffffff;
}
.penpals-toolbar .btn:hover {
  background: rgba(0, 0, 0, 0.04);
}
.penpals-toolbar .btn--primary {
  background: #0ea5e9; /* sky-500/600ish */
  color: #ffffff;
  border-color: #0ea5e9;
}
:is(:root, [data-portal-root]).dark .penpals-toolbar .btn {
  background: #1f2937;
  color: #e5e7eb;
  border-color: #374151;
}
:is(:root, [data-portal-root]).dark .penpals-toolbar .btn:hover {
  background: #374151;
}
:is(:root, [data-portal-root]).dark .penpals-toolbar .btn--primary {
  background: #3b82f6;
  border-color: #3b82f6;
  color: #ffffff;
}

/* Collapsible filter summary */
.filter-summary {
  font-size: 0.875rem; /* ~14px */
  color: #6b7280; /* text-muted */
}
:is(:root, [data-portal-root]).dark .filter-summary {
  color: #9ca3af;
}

/* View toggle button accent */
.view-toggle .btn {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0.375rem;
  padding: 0.375rem 0.5rem;
}
.view-toggle .btn.is-active {
  background: #0ea5e9;
  color: #ffffff;
  border-color: #0ea5e9;
}

/* Compact inputs/selects */
.tt-input {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0.375rem;
  min-height: 44px;
  touch-action: manipulation;
}
.tt-select {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0.375rem;
  min-height: 44px;
  touch-action: manipulation;
}
:is(:root, [data-portal-root]).dark .tt-input {
  background: #111827;
  color: #e5e7eb;
  border-color: #475569;
}
:is(:root, [data-portal-root]).dark .tt-select {
  background: #111827;
  color: #e5e7eb;
  border-color: #475569;
}

/* Filter hero look (align to homepage hero) */
.penpals-filter-hero {
  background: linear-gradient(
    135deg,
    rgba(10, 61, 98, 0.18),
    rgba(14, 165, 233, 0.2)
  );
  padding-top: 16px;
  padding-bottom: 16px;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}
.filter-hero-panel {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  padding: 16px;
  box-shadow:
    0 10px 24px rgba(15, 76, 129, 0.18),
    0 4px 10px rgba(15, 76, 129, 0.1);
  -webkit-backdrop-filter: saturate(120%) blur(4px);
  backdrop-filter: saturate(120%) blur(4px);
}

/* Make compact summary readable on blue background */
.penpals-filter-hero .filter-summary {
  color: #e6effa;
}

/* Inputs/selects inside hero panel: white background for contrast */
.penpals-filter-hero .tt-input,
.penpals-filter-hero .tt-select {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.12);
}

/* Badge button (used for "Mehr/Weniger anzeigen") */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #0ea5e9;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #0ea5e9;
  border-radius: 9999px;
  padding: 0.375rem 0.75rem;
  min-height: 44px;
  min-width: 44px;
  transition:
    background 180ms ease,
    box-shadow 180ms ease,
    opacity 180ms ease;
  cursor: pointer;
  touch-action: manipulation;
}
.badge:hover {
  background: rgba(255, 255, 255, 1);
  box-shadow:
    0 6px 16px rgba(15, 76, 129, 0.12),
    0 2px 6px rgba(15, 76, 129, 0.08);
}

/* Definition-List Layout to avoid overlaps */
.penpals-dl {
  display: grid;
  grid-gap: 12px;
}
.penpals-dl-row {
  min-width: 0;
}
.penpals-dt {
  line-height: 1.25;
}
.penpals-dd {
  line-height: 1.5;
  word-break: break-word;
  hyphens: auto;
}

/* Thumbnail and header tweaks */
.penspals-thumb,
.penpals-thumb {
  width: 96px;
  height: 96px;
  object-fit: cover;
}
.penpals-card h3 {
  margin: 0;
}

/* Dark-Mode variants */
:is(:root, [data-portal-root]).dark .penpals-card {
  background-color: var(--tt-card-dark, #0f172a);
  border-color: rgba(255, 255, 255, 0.08);
  color: #f3f4f6;
}
:is(:root, [data-portal-root]).dark .verified-strip {
  background: rgba(22, 163, 74, 0.12);
  color: #86efac;
}

/* Tooltip cursor via title attribute; color via currentColor from icon classes */
.status-icon {
  cursor: help;
}

/* High readability for label-value layout */
.penpals-value {
  color: rgb(31, 41, 55); /* neutral-800 */
  word-break: break-word;
  hyphens: auto;
  line-height: 1.5;
}
:is(:root, [data-portal-root]).dark .penpals-value {
  color: rgb(229, 231, 235); /* neutral-200 */
}
.penpals-label {
  color: rgb(17, 24, 39); /* neutral-900 */
}
:is(:root, [data-portal-root]).dark .penpals-label {
  color: rgb(243, 244, 246); /* neutral-100 */
}

/* Dark mode chip/link contrast (minimal invasive) */
:is(:root, [data-portal-root]).dark .badge {
  color: rgb(229, 231, 235); /* neutral-200 */
  background: rgba(2, 6, 23, 0.6); /* slate-950-ish with alpha */
  border-color: rgb(229, 231, 235); /* neutral-200 */
}

/* Smaller radios for filters */
.tt-radio {
  width: 16px;
  height: 16px;
}

/* Inseratansicht grid helper for dynamic columns */
.inserat-grid {
  display: grid;
  gap: var(--gap, 1rem);
}

/* Responsive grid columns for cardsPerRow setting (Tailwind safelist may not generate these) */
@media (min-width: 640px) {
  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 1280px) {
  .xl\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .xl\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .xl\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
@media (min-width: 1536px) {
  .\32xl\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .\32xl\:grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .\32xl\:grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}

/* Rounded chips used in TagAutocomplete */
.chip {
  border-radius: 9999px;
  padding: 0.25rem 0.5rem;
  font-size: 0.8125rem;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.1);
}
:is(:root, [data-portal-root]).dark .chip {
  background: rgba(2, 6, 23, 0.6); /* slate-950-ish with alpha */
  border-color: rgba(255, 255, 255, 0.2);
}

/* Filters: enger und zentriert innerhalb des Hero-Bereichs, damit nicht übermäßig breit */
.penpals-filters-wrapper {
  padding-top: 8px;
  padding-bottom: 8px;
}
@media (min-width: 768px) {
  .penpals-filters-wrapper {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

/* Das Panel selbst zusätzlich schmaler als die Containerbreite halten */
.penpals-filters {
  max-width: 48rem; /* ~768px */
  margin-left: auto;
  margin-right: auto;
}

/* Fallback: in Light-Mode sind Checkboxen/Radio nicht schwarz, sondern akzentuiert */
.penpals-filters input[type="checkbox"],
.penpals-filters input[type="radio"] {
  accent-color: #0ea5e9; /* sky-500/600ish */
}
/* Dark-Mode Akzent */
:is(:root, [data-portal-root]).dark .penpals-filters input[type="checkbox"],
:is(:root, [data-portal-root]).dark .penpals-filters input[type="radio"] {
  accent-color: #3b82f6; /* blue-500 */
}

/* Strong fallback: eigene Darstellung der Controls, um schwarze Hintergründe zuverlässig zu vermeiden */
.penpals-filters input[type="checkbox"],
.penpals-filters input[type="radio"],
.detail-filters-modal input[type="checkbox"],
.detail-filters-modal input[type="radio"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  position: relative;
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important; /* slate-300 */
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease;
  cursor: pointer;
}

.penpals-filters input[type="radio"],
.detail-filters-modal input[type="radio"] {
  border-radius: 9999px;
}

/* Radio: Punkt via Pseudo-Element */
.penpals-filters input[type="radio"]::after,
.detail-filters-modal input[type="radio"]::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: #0ea5e9;
  opacity: 0;
  transition:
    opacity 150ms ease,
    transform 150ms ease;
}

.penpals-filters input[type="checkbox"]:focus,
.penpals-filters input[type="radio"]:focus,
.detail-filters-modal input[type="checkbox"]:focus,
.detail-filters-modal input[type="radio"]:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.45);
  border-color: #0ea5e9;
}

.penpals-filters input[type="checkbox"]:checked,
.detail-filters-modal input[type="checkbox"]:checked {
  background-color: #0ea5e9 !important; /* sky-500/600 */
  border-color: #0ea5e9 !important;
}

.penpals-filters input[type="radio"]:checked,
.detail-filters-modal input[type="radio"]:checked {
  background-color: #0ea5e9 !important;
  border-color: #0ea5e9 !important;
}

/* Checkmark via Pseudo-Element (Checkbox) */
.penpals-filters input[type="checkbox"]::after,
.detail-filters-modal input[type="checkbox"]::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  width: 12px;
  height: 6px;
  border-left: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  transform: rotate(-45deg);
  opacity: 0;
  transition: opacity 150ms ease;
}

.penpals-filters input[type="checkbox"]:checked::after,
.detail-filters-modal input[type="checkbox"]:checked::after {
  opacity: 1;
}
/* Radio aktiv: Punkt sichtbar */
.penpals-filters input[type="radio"]:checked::after,
.detail-filters-modal input[type="radio"]:checked::after {
  opacity: 1;
}

/* Dark-Mode Varianten */
:is(:root, [data-portal-root]).dark .penpals-filters input[type="checkbox"],
:is(:root, [data-portal-root]).dark .penpals-filters input[type="radio"],
:is(:root, [data-portal-root]).dark
  .detail-filters-modal
  input[type="checkbox"],
:is(:root, [data-portal-root]).dark .detail-filters-modal input[type="radio"] {
  background-color: #111827 !important; /* neutral-900, vermeidet reines Schwarz */
  border-color: #475569 !important; /* slate-500 */
}

:is(:root, [data-portal-root]).dark
  .penpals-filters
  input[type="checkbox"]:checked,
:is(:root, [data-portal-root]).dark
  .detail-filters-modal
  input[type="checkbox"]:checked,
:is(:root, [data-portal-root]).dark
  .penpals-filters
  input[type="radio"]:checked,
:is(:root, [data-portal-root]).dark
  .detail-filters-modal
  input[type="radio"]:checked {
  background-color: #3b82f6 !important; /* blue-500 */
  border-color: #3b82f6 !important;
}

/* Explicit Klassen-Fallback für Inputs, falls Wrapper-Klassen fehlen (tt-checkbox / tt-radio) */
.tt-checkbox,
.tt-radio {
  -webkit-appearance: none !important;
  appearance: none !important;
  position: relative;
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important; /* slate-300 */
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease;
  cursor: pointer;
}
.tt-radio {
  border-radius: 9999px !important;
}
.tt-checkbox {
  border-radius: 6px !important;
}

/* Checkbox-Haken */
.tt-checkbox::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  width: 12px;
  height: 6px;
  border-left: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  transform: rotate(-45deg);
  opacity: 0;
  transition: opacity 150ms ease;
}
.tt-checkbox:checked {
  background-color: #0ea5e9 !important;
  border-color: #0ea5e9 !important;
}
.tt-checkbox:checked::after {
  opacity: 1;
}

/* Radio-Punkt */
.tt-radio::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: #0ea5e9;
  opacity: 0;
  transition: opacity 150ms ease;
}
.tt-radio:checked {
  background-color: #0ea5e9 !important;
  border-color: #0ea5e9 !important;
}
.tt-radio:checked::after {
  opacity: 1;
}

/* Dark-Mode Varianten für die Fallback-Klassen */
:is(:root, [data-portal-root]).dark .tt-checkbox,
:is(:root, [data-portal-root]).dark .tt-radio {
  background-color: #111827 !important; /* neutral-900 */
  border-color: #475569 !important; /* slate-500 */
}
:is(:root, [data-portal-root]).dark .tt-checkbox:checked,
:is(:root, [data-portal-root]).dark .tt-radio:checked {
  background-color: #3b82f6 !important; /* blue-500 */
  border-color: #3b82f6 !important;
}

/* Map layering and modal z-index fix */
#penpals-map-container {
  position: relative;
  z-index: 0;
}

/* Ensure modal portal root and modal content overlay the map reliably */
.modalRoot,
.detail-filters-modal {
  position: relative;
  z-index: 2000;
}

/* Leaflet baseline container stacking */
.leaflet-container {
  z-index: 100;
}

/* Leaflet panes explicit order (markers below popups) */
.leaflet-pane.leaflet-marker-pane {
  z-index: 400;
}
.leaflet-pane.leaflet-popup-pane {
  z-index: 650;
}

/* Penpals Map: Status color classes */
.pp-status-verified {
  color: #16a34a;
}
.pp-status-premium {
  color: #3b82f6;
}
.pp-status-free {
  color: #f59e0b;
}

/* Penpals Map: DivIcon base + gender overlay */
.pp-marker {
  font-size: 20px;
  line-height: 1;
  text-shadow: 0 0 2px #fff;
  position: relative;
}
.pp-marker .pp-gender {
  font-size: 12px;
  position: absolute;
  bottom: -4px;
  right: -4px;
}

/* Penpals Map: Cluster bubble */
.pp-cluster {
  background: #334155;
  color: #fff;
  border-radius: 9999px;
  padding: 6px 8px;
  border: 2px solid #fff;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* Spinner keyframes (used by loading state) */
@keyframes pp-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Tabellenansicht: Basis-Styles */
.pp-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.pp-table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.pp-table-scroll .pp-table {
  min-width: 720px;
}
.pp-table th,
.pp-table td,
.pp-table-th,
.pp-table-td {
  padding: 10px 14px;
  border-bottom: 1px solid #e5e7eb; /* neutral-200-ish */
  text-align: left;
  font-size: 0.875rem;
}
.pp-table th,
.pp-table-th {
  background: #f8fafc;
  font-weight: 600;
  color: #374151;
  white-space: nowrap;
}
.pp-table th.sortable,
.pp-table-th.sortable {
  cursor: pointer;
  user-select: none;
  transition: background-color 150ms ease;
}
.pp-table th.sortable:hover,
.pp-table-th.sortable:hover {
  background: #f1f5f9;
}
.pp-table tr:hover {
  background: #f8fafc; /* slate-50-ish */
}
.pp-table tbody tr {
  transition: background-color 150ms ease;
}

/* Dark mode table styles */
:is(:root, [data-portal-root]).dark .pp-table {
  background: #1f2937;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
:is(:root, [data-portal-root]).dark .pp-table th,
:is(:root, [data-portal-root]).dark .pp-table-th {
  background: #111827;
  color: #e5e7eb;
  border-color: #374151;
}
:is(:root, [data-portal-root]).dark .pp-table td,
:is(:root, [data-portal-root]).dark .pp-table-td {
  border-color: #374151;
  color: #e5e7eb;
}
:is(:root, [data-portal-root]).dark .pp-table th.sortable:hover,
:is(:root, [data-portal-root]).dark .pp-table-th.sortable:hover {
  background: #1f2937;
}

/* Compact table variant */
.pp-table--compact th,
.pp-table--compact td,
.pp-table--compact .pp-table-th,
.pp-table--compact .pp-table-td {
  padding: 6px 10px;
  font-size: 0.8125rem;
}

/* Tabellenansicht: Inline-Flaggen/Hobby-Emojis/Gender */
.pp-table .pp-flags {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.pp-table .pp-hobbies {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}
.pp-table .pp-gender {
  font-weight: 500;
}

/* Dark-Mode minimale Anpassungen für Tabellen-Hover */
:is(:root, [data-portal-root]).dark .pp-table tr:hover {
  background: rgba(255, 255, 255, 0.04);
}

/* Inserat-Karten (pp-card) */
.pp-card {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
:is(:root, [data-portal-root]).dark .pp-card {
  background: #1f2937;
  border-color: #374151;
  color: #e5e7eb;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.pp-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
}
.pp-card-title {
  font-weight: 600;
  font-size: 1rem;
}
.pp-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 0.85rem;
}
.pp-card-flags {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.pp-card-hobbies {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}
.pp-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
}
.pp-free-warning {
  color: #f59e0b;
}

/* Einheitliche Ausrichtung für Label-Wert-Paare in Karten/Details */
/* Flex-Layout: eine Zeile mit fixem Label-Bereich und flexiblem Werte-Bereich */
.pp-field-row {
  display: flex !important;
  align-items: flex-start;
  gap: 12px;
}
/* Label: fixe Breite, kein Zeilenumbruch (verhindert „Buchstabe für Buchstabe“) */
.pp-field-row .penpals-label {
  margin: 0;
  font-weight: 600;
  white-space: nowrap;
  flex: 0 0 180px; /* feste Basisbreite für Label-Spalte */
  max-width: 200px; /* Sicherheitskappe */
}
/* Werte-Zelle: wächst, hat sinnvolle Mindestbreite, Icon bleibt links mit festem Einzug */
.pp-field-row .penpals-value,
.pp-field-row .pp-card-flags,
.pp-field-row .pp-card-hobbies {
  min-width: 0;
  flex: 1 1 240px; /* wächst und hat Mindestbasisbreite */
}
@media (max-width: 640px) {
  .pp-field-row .penpals-label {
    flex-basis: 140px; /* kompakter auf kleineren Screens */
  }
  .pp-field-row .penpals-value,
  .pp-field-row .pp-card-flags,
  .pp-field-row .pp-card-hobbies {
    flex-basis: 200px; /* bleibt sinnvoll breit */
  }
}
/* Werte-Zelle als Inline-Zeile mit Icon-Fixbreite */
.pp-field-row .penpals-value {
  display: flex;
  align-items: center;
}
.pp-field-row .penpals-value > span[aria-hidden="true"] {
  width: 1.5rem;
  min-width: 1.5rem;
  margin-right: 0.5rem;
  display: inline-flex;
  justify-content: flex-start;
  text-align: left;
}
/* Konsistente Typografie und Zeilenumbruch innerhalb der Werte-Spalte */
.pp-field-row .penpals-label {
  margin: 0;
  font-weight: 600;
  white-space: nowrap;
}
.pp-field-row .penpals-value,
.pp-field-row .pp-card-flags,
.pp-field-row .pp-card-hobbies {
  min-width: 0;
}

/* ===========================
   Analytics Grid & KPI Cards
   =========================== */
.pp-analytics {
  display: grid;
  gap: 16px;
}
.pp-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.pp-kpi {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px;
  background: #fff;
  font-weight: 600;
}

/* Dark mode contrast for KPI cards */
:is(:root, [data-portal-root]).dark .pp-kpi {
  background: #0f172a;
  border-color: rgba(255, 255, 255, 0.12);
}
:is(:root, [data-portal-root]).dark
  .pp-analytics
  .recharts-cartesian-grid-horizontal
  line,
:is(:root, [data-portal-root]).dark
  .pp-analytics
  .recharts-cartesian-grid-vertical
  line {
  stroke: rgba(255, 255, 255, 0.12);
}

/* Analytics rows and cards (responsive) */
.pp-analytics-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.pp-analytics-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px;
}
:is(:root, [data-portal-root]).dark .pp-analytics-card {
  background: #0f172a;
  border-color: rgba(255, 255, 255, 0.12);
}
@media (max-width: 860px) {
  .pp-analytics-row {
    grid-template-columns: 1fr;
  }
}

/* Iconmode Toggle */
.pp-iconmode-toggle {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
.pp-iconmode-toggle .active {
  font-weight: 600;
}

/* Status Icons for cards */
.pp-status-icon {
  display: inline-block;
  vertical-align: text-bottom;
  margin-left: 0.25rem;
  cursor: help;
}
.pp-status-icon:focus {
  outline: 2px solid #38bdf8;
  outline-offset: 2px;
  border-radius: 4px;
}
.pp-status-icon--verified {
  color: #16a34a;
}
.pp-status-icon--premium {
  color: #eab308;
}
.pp-status-icon--free {
  color: #f97316;
}

/* Card action button */
.pp-card-action {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  background: #0ea5e9;
  color: #ffffff;
  border: none;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 150ms ease;
}
.pp-card-action:hover {
  background: #0284c7;
}
.pp-card-action:focus {
  outline: 2px solid #38bdf8;
  outline-offset: 2px;
}

/* btn--primary (BEM variant used by PortalCard CTA) */
.btn--primary {
  background: #0ea5e9;
  color: #ffffff;
  border: 1px solid #0ea5e9;
  border-radius: 0.5rem;
}
.btn--primary:hover {
  background: #0284c7;
  border-color: #0284c7;
}
.btn--primary:focus {
  outline: 2px solid #38bdf8;
  outline-offset: 2px;
}
:is(:root, [data-portal-root]).dark .btn--primary {
  background: #3b82f6;
  color: #ffffff;
  border-color: #3b82f6;
}
:is(:root, [data-portal-root]).dark .btn--primary:hover {
  background: #2563eb;
  border-color: #2563eb;
}

/* badge--soft variant (used by tag filter chips) */
.badge--soft {
  font-size: 0.75rem;
  font-weight: 500;
  color: #374151;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 9999px;
  padding: 0.25rem 0.625rem;
  cursor: pointer;
  transition:
    background 150ms ease,
    color 150ms ease;
}
.badge--soft:hover {
  background: #e5e7eb;
}
:is(:root, [data-portal-root]).dark .badge--soft {
  color: #e5e7eb;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}
:is(:root, [data-portal-root]).dark .badge--soft:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* Active filter chip highlight */
.pp-filter-chip--active {
  background: #0ea5e9 !important;
  color: #ffffff !important;
  border-color: #0ea5e9 !important;
}
:is(:root, [data-portal-root]).dark .pp-filter-chip--active {
  background: #3b82f6 !important;
  color: #ffffff !important;
  border-color: #3b82f6 !important;
}

/* Detail-Modal Overlay */
.pp-detail-modal {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
}
:is(:root, [data-portal-root]).dark .pp-detail-modal {
  background: rgba(0, 0, 0, 0.7);
}
.pp-detail-card {
  width: min(920px, 96vw);
  max-height: 90vh;
  overflow: auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  padding: 16px;
}
:is(:root, [data-portal-root]).dark .pp-detail-card {
  background: #1f2937;
  color: #e5e7eb;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.pp-detail-header {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 8px;
  margin-bottom: 12px;
}
:is(:root, [data-portal-root]).dark .pp-detail-header {
  border-color: #374151;
}
.pp-accordion {
  margin-top: 12px;
}
.pp-accordion-section {
  border-top: 1px solid #e5e7eb;
  padding: 8px 0;
}
:is(:root, [data-portal-root]).dark .pp-accordion-section {
  border-color: #374151;
}

/* ---------------------------------------
   PortalCard: Meta-Layout verbindlich 2-spaltig
   - Label links (fix), rechts: Icon + Wert in EINER Zeile
   - Fixe Icon-Breite, linksbündig, konstanter Einzug
   - Alte 3-Spalten-Variante (Label | Icon | Wert) wird hart ausgeblendet
   --------------------------------------- */
/* penpals-meta: Definition list with label:value rows (like reference site) */
.penpals-meta {
  display: block !important;
  margin: 0;
  padding: 0;
}

/* Each field row: two-column flex with label left, value right */
.penpals-meta .pp-field-row {
  display: flex !important;
  align-items: flex-start;
  gap: 12px;
  padding: 0.25rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
:is(:root, [data-portal-root]).dark .penpals-meta .pp-field-row {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.penpals-meta .pp-field-row:last-child {
  border-bottom: none;
}

/* Label column: fixed width, bold, no wrap */
.pp-field-row .penpals-label {
  margin: 0;
  font-weight: 600;
  white-space: nowrap;
  flex: 0 0 160px;
  max-width: 200px;
  display: flex;
  align-items: center;
}
@media (max-width: 640px) {
  .pp-field-row .penpals-label {
    flex-basis: 120px;
  }
}

/* Value column: grows, wraps text */
.pp-field-row .penpals-value {
  flex: 1 1 0;
  min-width: 0;
  text-align: left;
}

/* Multi-value bullet lists (Eigenschaften, Verhalten, etc.) */
.pp-value-list {
  margin: 0;
  padding-left: 1.25rem;
  list-style: disc;
}
.pp-value-list li {
  padding: 0.05rem 0;
}

/* ===========================
   Model-driven Card Layout
   (CardLayoutRenderer)
   =========================== */
.pp-card-layout {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Section with optional heading */
.pp-card-section {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.pp-section-heading {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
  margin: 0.5rem 0 0.125rem;
  padding-bottom: 0.125rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
:is(:root, [data-portal-root]).dark .pp-section-heading {
  color: #9ca3af;
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* Row: grid with 1, 2, or 3 columns */
.pp-row {
  display: grid;
  gap: 0.25rem 1rem;
}
.pp-row--1 {
  grid-template-columns: 1fr;
}
.pp-row--2 {
  grid-template-columns: 1fr 1fr;
}
.pp-row--3 {
  grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 640px) {
  .pp-row--2,
  .pp-row--3 {
    grid-template-columns: 1fr;
  }
}

/* Cell: label + value stacked */
.pp-cell {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.25rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
:is(:root, [data-portal-root]).dark .pp-cell {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
.pp-cell--empty {
  border-bottom: none;
}

/* Cell label */
.pp-cell-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
}
:is(:root, [data-portal-root]).dark .pp-cell-label {
  color: #9ca3af;
}
.pp-cell-icon {
  font-size: 0.85rem;
  width: 1.1rem;
  min-width: 1.1rem;
  text-align: center;
}

/* Cell value */
.pp-cell-value {
  font-size: 0.875rem;
  color: #1f2937;
  margin: 0;
  padding: 0;
  word-break: break-word;
}
:is(:root, [data-portal-root]).dark .pp-cell-value {
  color: #e5e7eb;
}
.pp-cell-value .pp-value-list {
  padding-left: 1rem;
  font-size: 0.8125rem;
}

/* Tick-mark list for multienum values (checkbox style) */
.pp-tick-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.125rem 0.75rem;
}
.pp-tick-item {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8125rem;
  line-height: 1.4;
}
.pp-tick {
  color: #16a34a;
  font-weight: 700;
  font-size: 0.75rem;
  flex-shrink: 0;
}
:is(:root, [data-portal-root]).dark .pp-tick {
  color: #4ade80;
}

/* Clickable filter chips on cards */
.pp-filter-chip {
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  transition:
    opacity 0.15s,
    color 0.15s;
}
.pp-filter-chip:hover {
  opacity: 0.75;
  color: #0284c7;
}
:is(:root, [data-portal-root]).dark .pp-filter-chip:hover {
  color: #38bdf8;
}
button.badge.pp-filter-chip {
  cursor: pointer;
  transition:
    background-color 0.15s,
    color 0.15s;
}
button.badge.pp-filter-chip:hover {
  background-color: #0284c7;
  color: #fff;
}
.pp-filter-chip-inline {
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  transition: color 0.15s;
}
.pp-filter-chip-inline:hover {
  color: #0284c7;
}
:is(:root, [data-portal-root]).dark .pp-filter-chip-inline:hover {
  color: #38bdf8;
}

/* Active filter chips bar */
.pp-active-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 2.75rem;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  line-height: 1.5;
  border-radius: 9999px;
  background: #e0f2fe;
  color: #0369a1;
  border: 1px solid #7dd3fc;
}
:is(:root, [data-portal-root]).dark .pp-active-chip {
  background: rgba(14, 165, 233, 0.15);
  color: #7dd3fc;
  border-color: rgba(56, 189, 248, 0.3);
}
.pp-active-chip-label {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pp-active-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44×44 px Mindestgröße für Touch-Zugänglichkeit */
  min-width: 2.75rem;
  min-height: 2.75rem;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  font-size: 1rem;
  line-height: 1;
  color: inherit;
  opacity: 0.6;
  transition: opacity 0.15s;
}
.pp-active-chip-remove:hover {
  opacity: 1;
}

.pp-touch-target {
  min-width: 2.75rem;
  min-height: 2.75rem;
}

.pp-table-scroll-hint {
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  color: #64748b;
}

:is(:root, [data-portal-root]).dark .pp-table-scroll-hint {
  color: #94a3b8;
}

/* Keyboard accessibility: focus-visible rings */
.pp-filter-chip:focus-visible,
.pp-filter-chip-inline:focus-visible {
  outline: 2px solid #0ea5e9;
  outline-offset: 2px;
  border-radius: 2px;
}
.pp-active-chip-remove:focus-visible {
  outline: 2px solid #0ea5e9;
  outline-offset: 1px;
  border-radius: 9999px;
}
button.badge.pp-filter-chip:focus-visible {
  outline: 2px solid #0ea5e9;
  outline-offset: 2px;
}

/* Visual highlight for active filter values on cards */
.pp-filter-chip--active,
.pp-filter-chip-inline--active {
  color: #0284c7;
  font-weight: 600;
}
button.badge.pp-filter-chip--active {
  background-color: #0284c7;
  color: #fff;
  border-color: #0284c7;
}
:is(:root, [data-portal-root]).dark .pp-filter-chip--active,
:is(:root, [data-portal-root]).dark .pp-filter-chip-inline--active {
  color: #38bdf8;
}
:is(:root, [data-portal-root]).dark button.badge.pp-filter-chip--active {
  background-color: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

/* Bridge for legacy portal layout (force screenshot look without touching readonly refs)
   - Hide the large hero title block on the portal page
   - Pull the quick filter panel into the blue hero area and center it
   - Style the view-toggle like segmented buttons even with tt-btn classes */
main[aria-label="Portal"] .penpals-hero .py-10 {
  display: none;
}
main[aria-label="Portal"] .penpals-hero {
  padding-top: 16px;
  padding-bottom: 16px;
}

/* Only affect the first module-card that actually contains the quick filters */
@supports selector(:has(*)) {
  main[aria-label="Portal"]
    .penpals-hero
    + section
    .module-card.module-card--padded:has(.penpals-filters) {
    max-width: 48rem; /* ~768px centered like in the screenshot */
    margin-left: auto;
    margin-right: auto;
    margin-top: -96px; /* lift into the blue hero */
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow:
      0 10px 24px rgba(15, 76, 129, 0.18),
      0 4px 10px rgba(15, 76, 129, 0.1);
    -webkit-backdrop-filter: saturate(120%) blur(4px);
    backdrop-filter: saturate(120%) blur(4px);
  }
  :is(:root, [data-portal-root]).dark
    main[aria-label="Portal"]
    .penpals-hero
    + section
    .module-card.module-card--padded:has(.penpals-filters) {
    background: rgba(31, 41, 55, 0.92);
    border-color: rgba(255, 255, 255, 0.1);
  }
}

/* Segmented toggle look for legacy tt-btn group */
main[aria-label="Portal"] [role="group"][aria-label="Ansichten"] .tt-btn {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0.375rem;
  padding: 0.375rem 0.5rem;
  background: #ffffff;
}
main[aria-label="Portal"]
  [role="group"][aria-label="Ansichten"]
  .tt-btn.tt-btn-primary {
  background: #0ea5e9;
  color: #ffffff;
  border-color: #0ea5e9;
}
:is(:root, [data-portal-root]).dark
  main[aria-label="Portal"]
  [role="group"][aria-label="Ansichten"]
  .tt-btn {
  background: #1f2937;
  color: #e5e7eb;
  border-color: #374151;
}
:is(:root, [data-portal-root]).dark
  main[aria-label="Portal"]
  [role="group"][aria-label="Ansichten"]
  .tt-btn.tt-btn-primary {
  background: #3b82f6;
  color: #ffffff;
  border-color: #3b82f6;
}

/* View toggle segmented control - proper border radius */
.pp-view-toggle {
  display: inline-flex;
  border-radius: 0.5rem;
  overflow: hidden;
  border: 1px solid #e5e7eb;
}
.pp-view-toggle button {
  border: none;
  border-radius: 0;
  min-height: 2.75rem;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  background: #ffffff;
  color: #374151;
  transition:
    background-color 150ms ease,
    color 150ms ease;
}
.pp-view-toggle button:not(:first-child) {
  border-left: 1px solid #e5e7eb;
}
.pp-view-toggle button:hover {
  background: #f3f4f6;
}
.pp-view-toggle button.is-active,
.pp-view-toggle button[aria-pressed="true"] {
  background: #0ea5e9;
  color: #ffffff;
}
.pp-view-toggle button:first-child {
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}
.pp-view-toggle button:last-child {
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}
:is(:root, [data-portal-root]).dark .pp-view-toggle {
  border-color: #374151;
}
:is(:root, [data-portal-root]).dark .pp-view-toggle button {
  background: #1f2937;
  color: #e5e7eb;
  border-color: #374151;
}
:is(:root, [data-portal-root]).dark .pp-view-toggle button:not(:first-child) {
  border-color: #374151;
}
:is(:root, [data-portal-root]).dark .pp-view-toggle button:hover {
  background: #374151;
}
:is(:root, [data-portal-root]).dark .pp-view-toggle button.is-active,
:is(:root, [data-portal-root]).dark
  .pp-view-toggle
  button[aria-pressed="true"] {
  background: #3b82f6;
  color: #ffffff;
}

@media (max-width: 640px) {
  .pp-view-toggle {
    width: 100%;
    overflow-x: auto;
  }

  .pp-view-toggle button {
    flex: 1 0 auto;
  }

  .pp-table-scroll .pp-table {
    min-width: 640px;
  }
}

/* Results count badge */
.pp-results-count {
  font-weight: 600;
  font-size: 0.875rem;
  color: #374151;
}
:is(:root, [data-portal-root]).dark .pp-results-count {
  color: #e5e7eb;
}

/* Hero title styling matching reference */
.pp-hero-title {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}
@media (min-width: 768px) {
  .pp-hero-title {
    font-size: 2.25rem;
  }
}

/* Filter panel header bar */
.pp-filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.pp-filter-header h2 {
  font-size: 1rem;
  font-weight: 600;
}

/* ===========================
   Dark Mode: Additional Variants
   =========================== */

/* Thumbnails: soften border in dark mode */
:is(:root, [data-portal-root]).dark .penspals-thumb,
:is(:root, [data-portal-root]).dark .penpals-thumb {
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Filter hero: darker gradient */
:is(:root, [data-portal-root]).dark .penpals-filter-hero {
  background: linear-gradient(
    135deg,
    rgba(10, 61, 98, 0.4),
    rgba(14, 165, 233, 0.3)
  );
}

/* Badge button: ensure dark mode readability */
:is(:root, [data-portal-root]).dark .badge:hover {
  background: rgba(15, 23, 42, 0.8);
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.3),
    0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Card action button dark mode */
:is(:root, [data-portal-root]).dark .pp-card-action {
  background: #3b82f6;
}
:is(:root, [data-portal-root]).dark .pp-card-action:hover {
  background: #2563eb;
}

/* Free warning in dark mode */
:is(:root, [data-portal-root]).dark .pp-free-warning {
  color: #fbbf24;
}

/* Map cluster dark mode */
:is(:root, [data-portal-root]).dark .pp-cluster {
  background: #1e293b;
  border-color: #475569;
}

/* ===========================
   Print View Styles
   =========================== */
@media print {
  /* Hide navigation, footer, buttons, filters, and non-content elements */
  nav,
  footer,
  .penpals-hero,
  .penpals-filters-wrapper,
  .pp-view-toggle,
  .pp-filter-header,
  .penpals-toolbar,
  .pp-detail-actions,
  .pp-no-print,
  button,
  a.btn,
  a.btn--primary,
  a.tt-btn,
  [role="group"][aria-label="Ansichten"],
  .module-card section[aria-label="Kontaktanfrage"] {
    display: none !important;
  }

  /* Reset backgrounds and shadows for clean printing */
  body,
  main,
  .module-card,
  .pp-detail-card,
  .pp-card,
  .pp-table {
    background: #fff !important;
    box-shadow: none !important;
    border: none !important;
  }

  /* Maximize content width */
  .container,
  .max-w-5xl,
  .max-w-6xl,
  .max-w-7xl {
    max-width: 100% !important;
    padding: 0 !important;
  }

  /* Clean typography */
  h1,
  h2,
  h3 {
    page-break-after: avoid;
  }

  /* Images: reasonable size for printing */
  img {
    max-width: 300px !important;
    max-height: 200px !important;
    page-break-inside: avoid;
  }

  /* Show listing details cleanly */
  .pp-field-row {
    page-break-inside: avoid;
  }

  /* Verification badges: print as text */
  .pp-badge {
    border: 1px solid #000 !important;
    color: #000 !important;
  }
}
@media print {
  .chart-card {
    background: #fff !important;
    color: #000 !important;
  }

  .chart-card svg text {
    fill: #000 !important;
  }

  .chart-card [class*="dark:"] {
    all: revert;
  }
}
/* Paketlokale Styles für die Portal-Landing (keine Abhängigkeiten auf ui/src oder globale Root-CSS) */

:root {
  --pl-text: #111827;
  --pl-text-muted: #6b7280;
  --pl-bg: #ffffff;
  --pl-bg-card: #ffffff;
  --pl-border: #e5e7eb;
  --pl-primary: #0284c7;
  --pl-primary-contrast: #ffffff;
  --pl-section-tag-bg: #e0f2fe;
  --pl-note-bg: #f8fafc;
  --pl-btn-bg: #fff;
  --pl-btn-hover-bg: #f9fafb;
  --pl-btn-secondary-hover-bg: #f0f9ff;
}

:is(:root, [data-portal-root]).dark {
  --pl-text: #e5e7eb;
  --pl-text-muted: #9ca3af;
  --pl-bg: #111827;
  --pl-bg-card: #1f2937;
  --pl-border: #374151;
  --pl-primary: #38bdf8;
  --pl-primary-contrast: #111827;
  --pl-section-tag-bg: rgba(56, 189, 248, 0.15);
  --pl-note-bg: #1f2937;
  --pl-btn-bg: #1f2937;
  --pl-btn-hover-bg: #374151;
  --pl-btn-secondary-hover-bg: rgba(56, 189, 248, 0.1);
}

.pl-header {
  color: var(--pl-text);
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--pl-border);
}
:is(:root, [data-portal-root]).dark .pl-header {
  background: rgba(17, 24, 39, 0.9);
}

.pl-hero,
.pl-services,
.pl-how-it-works,
.pl-stats,
.pl-cta,
.pl-contact,
.pl-footer {
  color: var(--pl-text);
  background: var(--pl-bg);
}

.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: 72rem; /* ~1152px */
}

.text-muted {
  color: var(--pl-text-muted);
}
:is(:root, [data-portal-root]).dark .text-muted {
  color: var(--pl-text-muted);
}

/* Utility (kleiner, lokaler Satz) */
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-4 {
  margin-bottom: 1rem;
}

.text-center {
  text-align: center;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.font-semibold {
  font-weight: 600;
}
.font-extrabold {
  font-weight: 800;
}
.tracking-tight {
  letter-spacing: -0.01em;
}

/* Buttons */
.tt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding: 0.5rem 1rem;
  font-weight: 600;
  line-height: 1.25rem;
  border: 1px solid var(--pl-border);
  background: var(--pl-btn-bg);
  color: var(--pl-text);
  text-decoration: none;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
  touch-action: manipulation;
}
.tt-btn:hover {
  background: var(--pl-btn-hover-bg);
}
.tt-btn-primary {
  background: var(--pl-primary);
  color: var(--pl-primary-contrast);
  border-color: var(--pl-primary);
}
.tt-btn-primary:hover {
  filter: brightness(0.95);
}
.tt-btn-secondary {
  background: var(--pl-btn-bg);
  color: var(--pl-primary);
  border-color: var(--pl-primary);
}
.tt-btn-secondary:hover {
  background: var(--pl-btn-secondary-hover-bg);
}

/* Karten / Abschnitte */
.module-card {
  background: var(--pl-bg-card);
  border: 1px solid var(--pl-border);
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
:is(:root, [data-portal-root]).dark .module-card {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.module-card--padded {
  padding: 1rem;
}

/* Grid-Layouts (vereinfachte responsive Varianten) */
.grid {
  display: grid;
  gap: 1rem;
}
.grid-cols-1 {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lg\:gap-10 {
    gap: 2.5rem;
  }
}

/* Sektion-Header */
.section-header .section-tag {
  display: inline-block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pl-primary);
  background: var(--pl-section-tag-bg);
  border-radius: 9999px;
  padding: 0.125rem 0.5rem;
}

/* Note Box */
.note-box {
  background: var(--pl-note-bg);
  border: 1px solid var(--pl-border);
  border-radius: 0.5rem;
  padding: 0.75rem 0.875rem;
}

/* Footer */
.pl-footer .inline-flex {
  display: inline-flex;
}
.pl-footer .items-center {
  align-items: center;
}
.pl-footer .gap-3 {
  gap: 0.75rem;
}

/* Einfache Animation-Stubs (keine externen Abhängigkeiten) */
.animate-up {
  /* Base hidden state — will be revealed by either .appear (JS) or
     the pl-fade-up animation (CSS, see @media block below). */
  opacity: 0;
  transform: translateY(6px);
}
.animate-up.appear {
  transition:
    transform 0.4s ease,
    opacity 0.4s ease;
  transform: translateY(0);
  opacity: 1;
}
.animate-up.appear.delay-1 {
  transition-delay: 0.05s;
}
.animate-up.appear.delay-2 {
  transition-delay: 0.1s;
}
.animate-up.appear.delay-3 {
  transition-delay: 0.15s;
}

/* Hero CTA buttons (inside SharedHero gradient) */
.shared-hero .btn-hero-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #fff;
  color: #0f1f3a;
  border: none;
  border-radius: 0.75rem;
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}
.shared-hero .btn-hero-primary:hover {
  background: #f0f4ff;
  transform: translateY(-1px);
}

/* Hero visual — floating feature cards on the right column */
.pl-hero-visual {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 280px;
}
.pl-hero-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 0.75rem;
  padding: 0.875rem 1.25rem;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 500;
  /* Promote to own compositing layer so backdrop-filter does not
     trigger repaints during parent opacity/transform animation. */
  will-change: transform;
  transition:
    transform 0.3s ease,
    background 0.3s ease;
}
.pl-hero-card:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateX(6px);
}
.pl-hero-card i {
  font-size: 1.1rem;
  opacity: 0.85;
}

/* Negative margin to pull hero under the fixed header for full-bleed look */
.portal-landing .shared-hero {
  margin-top: calc(-1 * var(--header-height, 88px));
  padding-top: calc(var(--header-height, 88px) + 60px);
}

/* Progressive Enhancement: auf Sichtbarkeit animieren.
   The animation sets the final state directly — no competing transitions
   needed.  `animation-fill-mode: both` ensures the element stays at the
   `to` keyframe values after the animation ends AND uses the `from`
   values before it starts, preventing any flash of the base state. */
@media (prefers-reduced-motion: no-preference) {
  .shared-hero .animate-up,
  .pl-services .animate-up,
  .pl-how-it-works .animate-up,
  .pl-cta .animate-up {
    animation: pl-fade-up 0.55s ease both;
  }
  .shared-hero .delay-1,
  .pl-services .delay-1,
  .pl-how-it-works .delay-1,
  .pl-cta .delay-1 {
    animation-delay: 0.1s;
  }
  .shared-hero .delay-2,
  .pl-services .delay-2,
  .pl-how-it-works .delay-2,
  .pl-cta .delay-2 {
    animation-delay: 0.2s;
  }
  .shared-hero .delay-3,
  .pl-services .delay-3,
  .pl-how-it-works .delay-3,
  .pl-cta .delay-3 {
    animation-delay: 0.3s;
  }
}
@keyframes pl-fade-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}