/* iCloud / Apple Design System — Light, airy, glassmorphism */

:root {
  /* iCloud Light — soft whites, minimal contrast */
  --apple-bg: #f5f5f7;
  --apple-bg-secondary: #ffffff;
  --apple-bg-tertiary: #e8e8ed;
  --apple-bg-elevated: rgba(255, 255, 255, 0.72);
  --apple-text: #1d1d1f;
  --apple-text-secondary: #6e6e73;
  --apple-text-tertiary: #86868b;
  --apple-border: rgba(0, 0, 0, 0.06);
  --apple-border-strong: rgba(0, 0, 0, 0.08);
  --apple-blue: #0071e3;
  --apple-blue-hover: #0077ed;
  --apple-blue-muted: rgba(0, 113, 227, 0.12);
  --apple-green: #34c759;
  --apple-green-muted: rgba(52, 199, 89, 0.12);
  --apple-red: #ff3b30;
  --apple-red-muted: rgba(255, 59, 48, 0.1);
  --apple-orange: #ff9500;
  --apple-purple: #af52de;
  --apple-radius: 12px;
  --apple-radius-lg: 16px;
  --apple-radius-sm: 10px;
  --apple-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  --apple-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.04);
  --apple-glass: rgba(255, 255, 255, 0.65);
  --apple-glass-border: rgba(0, 0, 0, 0.04);
  --apple-scrollbar-track: rgba(0, 0, 0, 0.04);
  --apple-scrollbar-thumb: rgba(0, 0, 0, 0.22);
  --apple-scrollbar-thumb-hover: rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] {
  --apple-bg: #000000;
  --apple-bg-secondary: #1c1c1e;
  --apple-bg-tertiary: #2c2c2e;
  --apple-bg-elevated: rgba(44, 44, 46, 0.72);
  --apple-text: #f5f5f7;
  --apple-text-secondary: #a1a1a6;
  --apple-text-tertiary: #6e6e73;
  --apple-border: rgba(255, 255, 255, 0.06);
  --apple-border-strong: rgba(255, 255, 255, 0.1);
  --apple-blue: #0a84ff;
  --apple-blue-hover: #409cff;
  --apple-blue-muted: rgba(10, 132, 255, 0.15);
  --apple-green: #30d158;
  --apple-green-muted: rgba(48, 209, 88, 0.15);
  --apple-red: #ff453a;
  --apple-red-muted: rgba(255, 69, 58, 0.12);
  --apple-orange: #ff9f0a;
  --apple-purple: #bf5af2;
  --apple-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  --apple-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.2);
  --apple-glass: rgba(44, 44, 46, 0.65);
  --apple-glass-border: rgba(255, 255, 255, 0.06);
  --apple-scrollbar-track: rgba(255, 255, 255, 0.04);
  --apple-scrollbar-thumb: rgba(255, 255, 255, 0.22);
  --apple-scrollbar-thumb-hover: rgba(255, 255, 255, 0.38);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  background-color: var(--apple-bg);
  color: var(--apple-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.02em;
}

/* Errhuman: Light/Dark-Logo crossfade bei data-theme (kein JS nötig) */
.errhuman-brand-logos {
  position: relative;
  display: inline-block;
  line-height: 0;
  vertical-align: middle;
}
.errhuman-brand-logos .errhuman-brand-logo-layer {
  display: block !important;
  max-width: 100%;
  transition: opacity 0.38s ease;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.errhuman-brand-logos .errhuman-brand-logo-layer--light {
  position: relative;
  z-index: 1;
  /* kein height:auto — sonst überschreibt diese Regel Tailwinds h-* und das PNG erscheint in Vollpixelgröße */
  opacity: 1;
}
.errhuman-brand-logos .errhuman-brand-logo-layer--dark {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
  z-index: 2;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
html:not([data-theme="dark"]) .errhuman-brand-logos .errhuman-brand-logo-layer--light {
  opacity: 1 !important;
}
html:not([data-theme="dark"]) .errhuman-brand-logos .errhuman-brand-logo-layer--dark {
  opacity: 0 !important;
}
html[data-theme="dark"] .errhuman-brand-logos .errhuman-brand-logo-layer--light {
  opacity: 0 !important;
  pointer-events: none !important;
}
html[data-theme="dark"] .errhuman-brand-logos .errhuman-brand-logo-layer--dark {
  opacity: 1 !important;
  pointer-events: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  .errhuman-brand-logos .errhuman-brand-logo-layer {
    transition: none;
  }
}

/* Tailwind-CDN fallback — .hidden muss auch ohne Tailwind funktionieren */
.hidden { display: none !important; }

/* iCloud Cards — soft, elevated */
.apple-card {
  background: var(--apple-bg-secondary);
  border-radius: var(--apple-radius);
  border: 1px solid var(--apple-border);
  box-shadow: var(--apple-shadow);
  overflow: hidden;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.apple-card:hover {
  box-shadow: var(--apple-shadow-card);
  border-color: var(--apple-border-strong);
}

/* iCloud Glass — frosted sidebar & nav */
.apple-glass-nav {
  background: var(--apple-bg);
  border-bottom: 1px solid var(--apple-glass-border);
}

/* Sidebar — iCloud style frosted (Scroll nur in <nav>, kein Durchscrollen zur Hauptseite) */
.apple-sidebar {
  background: var(--apple-glass);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-right: 1px solid var(--apple-glass-border);
  width: 260px;
  height: 100vh;
  max-height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  overflow: hidden;
  overscroll-behavior: none;
}

.apple-sidebar > nav.apple-sidebar-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  scrollbar-width: thin;
  scrollbar-color: var(--apple-scrollbar-thumb) var(--apple-scrollbar-track);
}

.apple-sidebar > nav.apple-sidebar-scroll::-webkit-scrollbar {
  width: 8px;
}
.apple-sidebar > nav.apple-sidebar-scroll::-webkit-scrollbar-track {
  background: var(--apple-scrollbar-track);
  border-radius: 100px;
  margin: 4px 0;
}
.apple-sidebar > nav.apple-sidebar-scroll::-webkit-scrollbar-thumb {
  background: var(--apple-scrollbar-thumb);
  border-radius: 100px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.apple-sidebar > nav.apple-sidebar-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--apple-scrollbar-thumb-hover);
  border: 2px solid transparent;
  background-clip: padding-box;
}

/* Landing: Scroll-Reveal (fade + slide beim Scrollen, einmalig) */
.lp-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.lp-reveal.is-visible {
  opacity: 1;
  transform: none;
}
/* Richtungs-Varianten fuer mehr Bewegung im Scrollverlauf */
.lp-reveal-left { transform: translate(-36px, 12px); }
.lp-reveal-right { transform: translate(36px, 12px); }
.lp-reveal-scale { transform: scale(0.92); }
.lp-reveal-delay-1.is-visible { transition-delay: 0.08s; }
.lp-reveal-delay-2.is-visible { transition-delay: 0.16s; }
.lp-reveal-delay-3.is-visible { transition-delay: 0.24s; }
.lp-reveal-delay-4.is-visible { transition-delay: 0.32s; }
.lp-reveal-delay-5.is-visible { transition-delay: 0.40s; }
.lp-reveal-delay-6.is-visible { transition-delay: 0.48s; }
@media (prefers-reduced-motion: reduce) {
  .lp-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Landing: ein einziger fixierter Hintergrund-Layer mit Farbverlauf-Wash + schwebenden
   Gradient-Blobs. Liegt hinter dem gesamten Seiteninhalt, deckt immer den vollen
   Viewport ab und scheint durch die Glass-Cards (.lp-glass-card) hindurch -
   dadurch entsteht beim Scrollen nirgendwo eine harte Kante. */
.lp-bg-blobs {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 12%, rgba(10,132,255,0.07), transparent 45%),
    radial-gradient(circle at 88% 78%, rgba(175,82,222,0.06), transparent 45%),
    radial-gradient(circle at 75% 12%, rgba(52,199,89,0.05), transparent 40%);
}
html[data-theme="dark"] .lp-bg-blobs {
  background:
    radial-gradient(circle at 12% 12%, rgba(10,132,255,0.10), transparent 45%),
    radial-gradient(circle at 88% 78%, rgba(191,90,242,0.09), transparent 45%),
    radial-gradient(circle at 75% 12%, rgba(48,209,88,0.07), transparent 40%);
}

/* Landing: schmaler Scroll-Fortschrittsbalken am oberen Rand */
.lp-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 1001;
  pointer-events: none;
}
.lp-scroll-progress-bar {
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--apple-blue), var(--apple-purple));
  transition: transform 0.12s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .lp-scroll-progress-bar { transition: none; }
}

.lp-glass-card {
  background: rgba(255, 255, 255, 0.82);
}
html[data-theme="dark"] .lp-glass-card {
  background: rgba(28, 28, 30, 0.82);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lp-glass-card {
    background: var(--apple-bg-secondary);
  }
}

/* Landing: Karten mit Hover-Lift, Cursor-Spotlight und sanftem 3D-Tilt */
.lp-card-lift {
  position: relative;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.25s ease;
}
.lp-card-lift::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--lp-mx, 50%) var(--lp-my, 50%), rgba(10,132,255,0.12), transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.lp-card-lift:hover::after {
  opacity: 1;
}
.lp-card-lift:hover {
  transform: perspective(700px) translateY(-4px) rotateX(var(--lp-tilt-x, 0deg)) rotateY(var(--lp-tilt-y, 0deg));
  box-shadow: 0 18px 50px -18px rgba(0,0,0,0.18);
}
@media (prefers-reduced-motion: reduce) {
  .lp-card-lift:hover { transform: none; }
  .lp-card-lift::after { transition: none; }
}

/* Landing: Mini-Kalender-Mockup (Wochenraster mit Kategorie-Farben) */
.lp-cal-card {
  border-radius: 16px;
  border: 1px solid var(--apple-border);
  background: var(--apple-bg);
  padding: 16px;
  box-shadow: 0 12px 40px -16px rgba(0,0,0,0.18);
}
.lp-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 0 2px;
}
.lp-cal-header-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--apple-text);
}
.lp-cal-header-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--apple-text-tertiary);
}
.lp-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.lp-cal-day {
  border-radius: 10px;
  border: 1px solid var(--apple-border);
  background: var(--apple-bg-tertiary);
  padding: 8px 5px;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.lp-cal-day.is-today {
  border-color: var(--apple-blue);
  box-shadow: inset 0 0 0 1px var(--apple-blue);
}
.lp-cal-day-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--apple-text-tertiary);
}
.lp-cal-day-num {
  font-size: 13px;
  font-weight: 600;
  color: var(--apple-text);
  margin-top: -2px;
}
.lp-cal-event {
  width: 100%;
  border-radius: 6px;
  padding: 3px 5px;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.lp-cal-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.lp-cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--apple-border);
}
.lp-cal-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--apple-text-secondary);
}
@media (max-width: 640px) {
  .lp-cal-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
  .lp-cal-day { min-height: 84px; padding: 6px 3px; }
  .lp-cal-event { font-size: 8px; }
}

/* UStVA-Hinweis (DE Compliance) */
@keyframes compliance-ustva-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.92; }
}
.compliance-ustva-banner {
  animation: compliance-ustva-pulse 2s ease-in-out infinite;
}

@media (max-width: 767px) {
  .apple-sidebar {
    transform: translateX(-100%);
    background: var(--apple-bg-secondary);
    box-shadow: var(--apple-shadow-card);
  }
  .apple-sidebar.open {
    transform: translateX(0);
  }
}

.apple-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
  z-index: 999;
}

@media (max-width: 767px) {
  /* Klicks gehen zum Hauptinhalt (Tabs etc.) — Sidebar bleibt offen, bis X, Escape oder Hamburger */
  .apple-sidebar-overlay.open {
    display: block;
    pointer-events: none;
  }
}

.apple-sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--apple-radius-sm);
  margin: 2px 10px;
  color: var(--apple-text-secondary);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  transition: background 0.2s ease, color 0.2s ease;
}

.apple-sidebar-link svg {
  flex-shrink: 0;
  opacity: 0.8;
  width: 20px;
  height: 20px;
}

.apple-sidebar-link:hover {
  background: var(--apple-bg-tertiary);
  color: var(--apple-text);
}

.apple-sidebar-link.active {
  background: var(--apple-blue);
  color: white !important;
}

.apple-sidebar-link.active svg {
  opacity: 1;
}

.apple-theme-toggle {
  width: 40px;
  height: 40px;
  border-radius: var(--apple-radius-sm);
  border: 1px solid var(--apple-border);
  background: var(--apple-bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
}

.apple-theme-toggle:hover {
  background: var(--apple-bg-tertiary);
}

/* Topbar: auf Desktop rechts neben fixer Sidebar (260px), sonst Titel unter Sidebar */
.apple-dash-header {
  margin-left: 260px;
  box-sizing: border-box;
}

@media (max-width: 767px) {
  .apple-dash-header {
    margin-left: 0;
  }
}

.apple-main {
  margin-left: 260px;
  min-height: 100vh;
  padding: 28px;
  transition: margin 0.3s ease;
}

@media (max-width: 767px) {
  .apple-main {
    margin-left: 0;
    padding: 16px;
  }
}

/* Buttons */
.apple-btn-primary {
  background: var(--apple-blue);
  color: white !important;
  padding: 12px 22px;
  border-radius: var(--apple-radius-sm);
  font-weight: 500;
  font-size: 15px;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
}

.apple-btn-primary:hover {
  background: var(--apple-blue-hover);
}

/* Sekundär / Text-Buttons (nicht quadratisch wie Theme-Toggle) */
.apple-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  min-height: 44px;
  border-radius: var(--apple-radius-sm);
  font-size: 14px;
  font-weight: 500;
  border: 1px solid var(--apple-border);
  background: var(--apple-bg-secondary);
  color: var(--apple-text);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}

.apple-btn-secondary:hover {
  background: var(--apple-bg-tertiary);
}

.apple-btn-destructive {
  border-color: rgba(255, 59, 48, 0.35);
  color: var(--apple-red);
  background: var(--apple-red-muted);
}

.apple-btn-destructive:hover {
  background: rgba(255, 59, 48, 0.18);
}

/* Deutlich als Aktion erkennbar (z. B. Testnachricht) */
.apple-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  min-height: 48px;
  border-radius: var(--apple-radius-sm);
  font-size: 15px;
  font-weight: 600;
  border: 2px solid var(--apple-blue);
  background: var(--apple-blue-muted);
  color: var(--apple-blue);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
  white-space: nowrap;
}

.apple-btn-outline:hover {
  background: rgba(0, 122, 255, 0.18);
  border-color: var(--apple-blue-hover);
}

.apple-btn-outline:active {
  transform: scale(0.98);
}

/* Inputs */
.apple-input {
  background: var(--apple-bg-tertiary);
  border: 1px solid var(--apple-border);
  border-radius: var(--apple-radius-sm);
  padding: 12px 16px;
  font-size: 15px;
  color: var(--apple-text);
  transition: border-color 0.2s ease;
}

.apple-input:focus {
  outline: none;
  border-color: var(--apple-blue);
}

.apple-input::placeholder {
  color: var(--apple-text-tertiary);
}

/* Utilities */
/* Dashboard Metric Cards */
.dash-metrics {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  margin-bottom: 2rem;
}
@media (min-width: 1024px) {
  .dash-metrics { grid-template-columns: repeat(4, 1fr) !important; }
}
.dash-metric-card {
  background: var(--apple-bg-secondary);
  border-radius: var(--apple-radius);
  border: 1px solid var(--apple-border);
  box-shadow: var(--apple-shadow);
  padding: 16px;
}
.dash-metric-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dash-metric-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.apple-text-primary { color: var(--apple-text); }
.apple-text-secondary { color: var(--apple-text-secondary); }
.apple-text-tertiary { color: var(--apple-text-tertiary); }
.apple-text-blue { color: var(--apple-blue); }
.apple-text-green { color: var(--apple-green); }
.apple-text-red { color: var(--apple-red); }
.apple-text-orange { color: var(--apple-orange); }
.apple-border-default { border-color: var(--apple-border); }
.apple-bg-tertiary-bg { background: var(--apple-bg-tertiary); }
.apple-bg-secondary-bg { background: var(--apple-bg-secondary); }

.apple-gradient-text {
  color: var(--apple-blue);
}

/* Hamburger */
.apple-hamburger {
  width: 40px;
  height: 40px;
  border-radius: var(--apple-radius-sm);
  border: 1px solid var(--apple-border);
  background: var(--apple-bg-elevated);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.apple-hamburger span {
  width: 18px;
  height: 2px;
  background: var(--apple-text);
  border-radius: 1px;
}

@media (max-width: 767px) {
  .apple-table-responsive {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }

.apple-sidebar-details > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.apple-sidebar-details > summary::-webkit-details-marker { display: none; }

input[type="date"],
input[type="datetime-local"] {
  color-scheme: light;
}

[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="datetime-local"] {
  color-scheme: dark;
}

/* Datumsfelder: Browser setzen oft eine große Mindestbreite — sonst ragt die Zeile auf dem Handy aus dem Layout */
input.apple-input[type="date"],
input.apple-input[type="datetime-local"] {
  min-width: 0;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

/* iCloud notification dot */
.apple-notification-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--apple-red);
  border: 2px solid var(--apple-bg-secondary);
  flex-shrink: 0;
}

/* Onboarding: erzwungenes Modal — Backdrop fängt Klicks (kein Schließen per Außenklick) */
body.apple-onboarding-active {
  overflow: hidden;
  touch-action: none;
}

.apple-onboarding-modal-root {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  min-height: 100vh;
  min-height: 100dvh;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
  pointer-events: auto;
}

.apple-onboarding-modal-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: auto;
  cursor: default;
}

.apple-onboarding-modal-panel {
  position: relative;
  z-index: 1;
  max-height: min(90vh, 640px);
  overflow-y: auto;
  pointer-events: auto;
}

/* Kompakte Hilfe: Fragezeichen blendet Langtext ein/aus */
button.inline-help-q {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.375rem;
  height: 1.375rem;
  padding: 0 0.25rem;
  margin: 0;
  border-radius: 9999px;
  border: 1px solid var(--apple-border-strong);
  background: var(--apple-bg-secondary);
  color: var(--apple-text-tertiary);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  vertical-align: middle;
}
button.inline-help-q:hover {
  color: var(--apple-blue);
  border-color: var(--apple-blue);
  background: var(--apple-blue-muted);
}
.inline-help-panel {
  margin-top: 0.5rem;
  padding: 0.625rem 0.75rem;
  border-radius: var(--apple-radius-sm);
  border: 1px solid var(--apple-border);
  background: var(--apple-bg-secondary);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--apple-text-secondary);
}
.inline-help-panel a {
  color: var(--apple-blue);
  font-weight: 500;
}
.inline-help-panel a:hover {
  opacity: 0.85;
}

/* ==========================================================================
   Redesign-Angleichung (Stand 09.08.2026)
   --------------------------------------------------------------------------
   Uebernimmt die Gestaltungsentscheidungen aus dem Lovable-Entwurf. Bewusst
   ausschliesslich Optik: keine Layoutstruktur, kein Markup, keine Logik.
   Die Farbwerte selbst bleiben unveraendert — der Entwurf hat exakt dieselbe
   Palette verwendet. Der Unterschied liegt in Zustaenden und Abstufungen.

   Vollstaendig rueckgaengig: diesen Block loeschen, oder
   assets/apple-style.css.vor-redesign zuruecckopieren.
   ========================================================================== */

/* Aktiver Menuepunkt: statt kraeftig blauer Flaeche mit weisser Schrift eine
   zarte blaue Toenung mit blauer Schrift. Ruhiger im Gesamtbild und trennt
   die Auswahl besser vom blauen Hauptknopf, der bisher gleich aussah. */
.apple-sidebar-link.active {
  background: var(--apple-blue-muted);
  color: var(--apple-blue) !important;
  font-weight: 600;
}
.apple-sidebar-link.active svg {
  opacity: 1;
  color: var(--apple-blue);
}
[data-theme="dark"] .apple-sidebar-link.active {
  background: rgba(10, 132, 255, 0.18);
}

/* Hover eine Spur weicher, damit der Wechsel zum aktiven Zustand nicht springt. */
.apple-sidebar-link:hover:not(.active) {
  background: rgba(0, 0, 0, 0.035);
}
[data-theme="dark"] .apple-sidebar-link:hover:not(.active) {
  background: rgba(255, 255, 255, 0.06);
}

/* Sidebar minimal heller als die Seitenflaeche abgesetzt (im Entwurf #fbfbfd
   gegen #f5f5f7). Der Glaseffekt bleibt erhalten. */
.apple-sidebar {
  background: linear-gradient(var(--apple-glass), var(--apple-glass)),
              rgba(255, 255, 255, 0.55);
}
[data-theme="dark"] .apple-sidebar {
  background: linear-gradient(var(--apple-glass), var(--apple-glass)),
              rgba(28, 28, 30, 0.55);
}

/* Karten: Rand etwas zurueckgenommen, Schatten leicht angehoben — im Entwurf
   heben sich die Karten klarer vom Hintergrund ab, ohne harte Kante. */
.apple-card {
  border-color: rgba(0, 0, 0, 0.045);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 4px 12px rgba(0, 0, 0, 0.035);
}
[data-theme="dark"] .apple-card {
  border-color: rgba(255, 255, 255, 0.07);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* Grosse Zahlen (Umsatz, Kennzahlen) enger gesetzt und mit gleich breiten
   Ziffern, damit Betraege beim Aktualisieren nicht zappeln. */
.apple-stat-value,
.apple-metric-value {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* Fortschrittsbalken mit dem Verlauf aus dem Entwurf (Blau nach Lila).
   Greift nur, wo die Klasse gesetzt ist — bestehende Balken bleiben unberuehrt. */
.apple-progress-gradient > * ,
.apple-progress-fill {
  background-image: linear-gradient(90deg, #0f6ee3 0%, #a554de 100%);
}

/* --- Kennzahlkacheln (Widget stats_cards) -------------------------------- */

.sc-karte { display: flex; flex-direction: column; }

/* Getoente Symbolflaeche, wie im Entwurf: Farbe traegt die Bedeutung,
   die Flaeche bleibt zurueckhaltend. */
.sc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--apple-radius-sm);
  flex-shrink: 0;
}
.sc-ton-blau   { background: var(--apple-blue-muted);  color: var(--apple-blue); }
.sc-ton-gruen  { background: var(--apple-green-muted); color: var(--apple-green); }
.sc-ton-orange { background: rgba(255, 149, 0, 0.14);  color: var(--apple-orange); }
.sc-ton-lila   { background: rgba(175, 82, 222, 0.14); color: var(--apple-purple); }
[data-theme="dark"] .sc-ton-orange { background: rgba(255, 159, 10, 0.18); }
[data-theme="dark"] .sc-ton-lila   { background: rgba(191, 90, 242, 0.18); }

/* Veraenderung gegenueber Vorperiode. */
.sc-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.sc-delta-auf { background: var(--apple-green-muted); color: var(--apple-green); }
.sc-delta-ab  { background: var(--apple-red-muted);   color: var(--apple-red); }

/* Der Betrag ist die Hauptsache — gross, eng gesetzt, gleich breite Ziffern,
   damit die Kacheln beim Aktualisieren nicht in der Breite springen. */
.sc-wert {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--apple-text);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 640px) { .sc-wert { font-size: 30px; } }

/* Deutender Satz unter einem Diagramm. Bewusst zurueckhaltend gesetzt — er
   soll die Zahlen erklaeren, nicht mit ihnen um Aufmerksamkeit ringen. */
.rc-deutung {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--apple-border);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--apple-text-secondary);
}

/* ==========================================================================
   Thema „Rosé" — waermere, weichere Anmutung
   --------------------------------------------------------------------------
   Ueberschreibt nur Farbwerte und Radien. Keine Struktur, kein Markup.
   Kuehle Graustufen werden gegen warme getauscht, der Akzent wandert von
   Apple-Blau zu einem gedeckten Rosé.

   Kontrast wurde gegen die bisherige Palette geprueft und liegt ueberall
   gleichauf oder darueber — Gruen und Rot deutlich besser (Gruen 2,22:1 auf
   4,31:1). Das ist keine Kosmetik: In den Diagrammen stehen Betraege in Gruen.

   Zurueck: assets/apple-style.css.vor-rose einspielen oder diesen Block loeschen.
   ========================================================================== */

:root {
  --apple-bg: #faf7f8;
  --apple-bg-secondary: #ffffff;
  --apple-bg-tertiary: #f2eaee;
  --apple-bg-elevated: rgba(255, 255, 255, 0.74);
  --apple-text: #2a2025;
  --apple-text-secondary: #7a6870;
  --apple-text-tertiary: #8b7982;
  --apple-border: rgba(120, 70, 95, 0.09);
  --apple-border-strong: rgba(120, 70, 95, 0.13);

  --apple-blue: #c2456e;
  --apple-blue-hover: #d15a81;
  --apple-blue-muted: rgba(194, 69, 110, 0.11);

  --apple-green: #268a5c;
  --apple-green-muted: rgba(38, 138, 92, 0.12);
  --apple-red: #d93a4a;
  --apple-red-muted: rgba(217, 58, 74, 0.11);
  --apple-orange: #e08a4a;
  --apple-purple: #9b5fc0;

  /* Weichere Ecken — der auffaelligste Hebel neben der Farbe. */
  --apple-radius: 16px;
  --apple-radius-lg: 22px;
  --apple-radius-sm: 13px;

  /* Schatten mit warmem Unterton statt neutralem Schwarz. */
  --apple-shadow: 0 1px 3px rgba(120, 70, 95, 0.06);
  --apple-shadow-card: 0 2px 10px rgba(120, 70, 95, 0.07);
  --apple-glass: rgba(255, 252, 253, 0.68);
  --apple-glass-border: rgba(120, 70, 95, 0.06);
  --apple-scrollbar-track: rgba(120, 70, 95, 0.05);
  --apple-scrollbar-thumb: rgba(120, 70, 95, 0.24);
  --apple-scrollbar-thumb-hover: rgba(120, 70, 95, 0.38);
}

[data-theme="dark"] {
  --apple-bg: #171216;
  --apple-bg-secondary: #231b20;
  --apple-bg-tertiary: #2e242a;
  --apple-bg-elevated: rgba(46, 36, 42, 0.74);
  --apple-text: #f7f1f4;
  --apple-text-secondary: #b5a3ad;
  --apple-text-tertiary: #8d7d86;
  --apple-border: rgba(255, 235, 245, 0.08);
  --apple-border-strong: rgba(255, 235, 245, 0.12);

  --apple-blue: #f08ab0;
  --apple-blue-hover: #f6a3c2;
  --apple-blue-muted: rgba(240, 138, 176, 0.16);

  --apple-green: #4ecb96;
  --apple-green-muted: rgba(78, 203, 150, 0.16);
  --apple-red: #ff6b78;
  --apple-red-muted: rgba(255, 107, 120, 0.14);
  --apple-orange: #f0a869;
  --apple-purple: #c48ae0;

  --apple-shadow: 0 1px 3px rgba(0, 0, 0, 0.34);
  --apple-shadow-card: 0 2px 10px rgba(0, 0, 0, 0.3);
  --apple-glass: rgba(35, 27, 32, 0.68);
  --apple-glass-border: rgba(255, 235, 245, 0.07);
}

/* Ueberschriften eine Spur leichter und offener gesetzt — wirkt ruhiger als
   die durchgehend fetten Schnitte. */
h1, h2, .apple-page-title {
  letter-spacing: -0.015em;
}

/* Der Fortschrittsbalken traegt jetzt Rosé statt Blau-Lila. */
.apple-progress-gradient > *,
.apple-progress-fill {
  background-image: linear-gradient(90deg, #c2456e 0%, #e2789f 55%, #f0a4c0 100%);
}

/* ==========================================================================
   Typo-Skala + Zielblock (Umbau Dashboard)
   --------------------------------------------------------------------------
   Im Dashboard waren 13 verschiedene Schriftgroessen im Einsatz — jede Zahl
   einzeln gewaehlt, keine Ordnung dahinter. Sechs Stufen reichen und
   erzeugen die Hierarchie, die vorher fehlte.
   ========================================================================== */

:root {
  --ds-t-titel:  20px;   /* Abschnittsueberschrift            */
  --ds-t-gross:  28px;   /* Leitzahl                          */
  --ds-t-mittel: 17px;   /* hervorgehobener Wert              */
  --ds-t-body:   14px;   /* Fliesstext, Formularfelder        */
  --ds-t-klein:  13px;   /* Beschriftungen                    */
  --ds-t-mini:   12px;   /* Fussnoten, Hilfstexte             */
}

.ds-titel {
  font-size: var(--ds-t-titel);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--apple-text);
}
.ds-hilfstext {
  font-size: var(--ds-t-mini);
  line-height: 1.5;
  color: var(--apple-text-tertiary);
}
.ds-hilfstext-klein { margin-top: 6px; }

/* Zielblock: eine Karte, zwei Spuren, gleicher Rhythmus. */
.ds-ziele { padding: 22px 24px 8px; }
.ds-ziele-kopf { margin-bottom: 18px; }
.ds-ziele-kopf .ds-hilfstext { margin-top: 3px; }

.ds-ziel { padding: 14px 0; border-top: 1px solid var(--apple-border); }
.ds-ziel:first-of-type { border-top: 0; padding-top: 0; }

.ds-ziel-zeile {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.ds-ziel-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--ds-t-klein);
  font-weight: 600;
  color: var(--apple-text-secondary);
}
.ds-ziel-name svg { opacity: 0.75; }

.ds-ziel-zahlen {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  font-variant-numeric: tabular-nums;
}
.ds-ziel-zahlen strong {
  font-size: var(--ds-t-mittel);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--apple-text);
}
.ds-ziel-soll { font-size: var(--ds-t-klein); color: var(--apple-text-tertiary); }
.ds-ziel-prozent { font-size: var(--ds-t-klein); font-weight: 700; }

/* „Ändern" ist eine Nebenhandlung — sichtbar, aber ohne Gewicht. */
.ds-ziel-edit {
  font-size: var(--ds-t-mini);
  font-weight: 500;
  color: var(--apple-text-tertiary);
  background: none;
  border: 0;
  padding: 2px 6px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.ds-ziel-edit:hover { background: var(--apple-bg-tertiary); color: var(--apple-text); }

.ds-bar {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--apple-bg-tertiary);
}
.ds-bar-fill {
  height: 8px;
  border-radius: 999px;
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.ds-ziel-form { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--apple-border); }

@media (max-width: 640px) {
  .ds-ziele { padding: 18px 16px 6px; }
  .ds-ziel-zeile { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ==========================================================================
   THEMA „BLÜTE" — vollständig neue Formensprache
   ==========================================================================
   Kein Nachfaerben des alten Looks, sondern ein anderer Charakter. Fuenf
   Klassen tragen das Gesicht der Anwendung — .apple-card (365 Verwendungen),
   .apple-input (257), .apple-btn-primary (143), Sidebar und Schrift. Werden
   die neu geschrieben, aendert sich jede der 63 Seiten mit.

   Bewusst ausschliesslich CSS: keine PHP-Zeile, kein Formularfeld, keine
   Logik. Funktionen koennen dadurch nicht abweichen.

   Die vier Entscheidungen, die den Unterschied machen:
     1. Serifen-Schrift in den Ueberschriften — redaktionell statt technisch.
        Systemschriften, kein Nachladen, keine CSP-Ausnahme noetig.
     2. Alles wird rund. Knoepfe vollstaendig gekapselt, Karten weit gerundet.
     3. Flaechen statt Rahmen. Eingabefelder gefuellt, Kontur erst bei Fokus.
     4. Mehr Luft. Groessere Innenabstaende, ruhigerer Rhythmus.

   Zurueck: assets/apple-style.css.vor-neu einspielen.
   ========================================================================== */

:root {
  --bl-serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  --bl-rund-klein: 14px;
  --bl-rund: 22px;
  --bl-rund-gross: 30px;
  --bl-pille: 999px;
}

/* --- 1. Schrift ---------------------------------------------------------- */

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  letter-spacing: 0.005em;
}

h1, h2, h3,
.ds-titel,
.apple-page-title {
  font-family: var(--bl-serif);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

/* Betraege und Kennzahlen bleiben serifenlos — Ziffern muessen eindeutig
   lesbar sein, dafuer ist eine Serifenschrift die falsche Wahl. */
.sc-wert,
.ds-ziel-zahlen,
.apple-stat-value,
.apple-metric-value {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* --- 2. Karten ----------------------------------------------------------- */

.apple-card {
  border-radius: var(--bl-rund);
  border: 0;
  background: var(--apple-bg-secondary);
  box-shadow:
    0 1px 2px rgba(120, 70, 95, 0.04),
    0 8px 28px -12px rgba(120, 70, 95, 0.16);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
[data-theme="dark"] .apple-card {
  background: var(--apple-bg-secondary);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 8px 28px -12px rgba(0, 0, 0, 0.55);
}

/* --- 3. Knoepfe: vollstaendig gekapselt ---------------------------------- */

.apple-btn-primary,
.apple-btn-secondary,
button.apple-btn-primary,
a.apple-btn-primary {
  border-radius: var(--bl-pille);
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 0;
  transition: transform 0.16s ease, box-shadow 0.22s ease, filter 0.22s ease;
}
.apple-btn-primary {
  background: linear-gradient(135deg, var(--apple-blue) 0%, #e2789f 100%);
  color: #fff;
  box-shadow: 0 4px 14px -4px rgba(194, 69, 110, 0.5);
}
.apple-btn-primary:hover {
  filter: brightness(1.06);
  box-shadow: 0 6px 20px -5px rgba(194, 69, 110, 0.58);
}
.apple-btn-primary:active { transform: translateY(1px); }

.apple-btn-secondary {
  background: var(--apple-bg-tertiary);
  color: var(--apple-text);
}
.apple-btn-secondary:hover { filter: brightness(0.97); }

/* --- 4. Eingabefelder: Flaeche statt Rahmen ------------------------------ */

.apple-input,
input[type="text"].apple-input,
input[type="email"].apple-input,
input[type="password"].apple-input,
input[type="number"].apple-input,
input[type="date"].apple-input,
select.apple-input,
textarea.apple-input {
  border-radius: var(--bl-rund-klein);
  background: var(--apple-bg-tertiary);
  border: 1px solid transparent;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.apple-input:focus,
select.apple-input:focus,
textarea.apple-input:focus {
  background: var(--apple-bg-secondary);
  border-color: var(--apple-blue);
  box-shadow: 0 0 0 4px var(--apple-blue-muted);
  outline: none;
}

/* --- 5. Seitennavigation: schwebende Flaeche, Nav als Pillen ------------- */

.apple-sidebar {
  border-right: 0;
  background: var(--apple-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: inset -1px 0 0 var(--apple-border);
}
.apple-sidebar-link {
  border-radius: var(--bl-pille);
  margin: 3px 12px;
  padding: 11px 16px;
  font-weight: 500;
}
.apple-sidebar-link.active {
  background: var(--apple-blue);
  color: #fff !important;
  font-weight: 600;
  box-shadow: 0 4px 14px -5px rgba(194, 69, 110, 0.6);
}
.apple-sidebar-link.active svg { color: #fff; opacity: 1; }
[data-theme="dark"] .apple-sidebar-link.active {
  background: var(--apple-blue);
  color: #2a1520 !important;
}
[data-theme="dark"] .apple-sidebar-link.active svg { color: #2a1520; }

/* --- 6. Mehr Luft -------------------------------------------------------- */

.apple-main .max-w-7xl { padding-top: 8px; }
.ds-ziele { border-radius: var(--bl-rund-gross); padding: 26px 28px 12px; }
.sc-karte { border-radius: var(--bl-rund); }
.sc-icon { border-radius: var(--bl-rund-klein); }

/* Tabellenzeilen bekommen Abstand statt Trennlinien — ruhiger zu lesen. */
.apple-table tbody tr { transition: background 0.15s ease; }
.apple-table tbody tr:hover { background: var(--apple-blue-muted); }
.apple-table th {
  font-size: var(--ds-t-mini, 12px);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--apple-text-tertiary);
}

/* ==========================================================================
   Kundenliste: Tabelle am Handy als Karten
   --------------------------------------------------------------------------
   Die Tabelle hat min-w-[900px] — am Telefon schiebt man sie seitwaerts, was
   sie praktisch unbenutzbar macht. Ein Umbau zu <div>s waere naheliegend,
   wuerde aber filterTable() zerstoeren: die Suche laeuft ueber
   getElementsByTagName("tr") und setzt tr.style.display.

   Deshalb bleibt die Tabellenstruktur und wird nur anders dargestellt.
   tr.style.display = "" faellt auf den Stylesheet-Wert zurueck, die Suche
   arbeitet also unveraendert weiter. Beschriftungen kommen ueber nth-child,
   damit kein Markup angefasst werden muss.
   ========================================================================== */

/* --- Breite Ansicht: mehr Luft, keine harten Linien --------------------- */
@media (min-width: 901px) {
  #customersTable td { padding-top: 18px; padding-bottom: 18px; }
  #customersTable tbody tr { transition: background 0.15s ease; }
  #customersTable tbody tr:hover { background: var(--apple-blue-muted); }
}

/* --- Schmale Ansicht: jede Zeile wird eine Karte ------------------------ */
@media (max-width: 900px) {
  #customersTable { min-width: 0 !important; display: block; }
  #customersTable thead { display: none; }
  #customersTable tbody { display: block; border: 0 !important; }

  #customersTable tbody tr {
    display: block;
    background: var(--apple-bg-secondary);
    border: 0 !important;
    border-radius: var(--bl-rund, 22px);
    box-shadow: 0 1px 2px rgba(120, 70, 95, 0.05), 0 8px 24px -14px rgba(120, 70, 95, 0.22);
    padding: 16px 18px;
    margin-bottom: 14px;
  }
  [data-theme="dark"] #customersTable tbody tr {
    box-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px -14px rgba(0,0,0,0.6);
  }

  #customersTable td {
    display: block;
    padding: 0 !important;
    width: auto !important;
    border: 0 !important;
  }

  /* Zeile 1 ist die Identitaet — traegt die Karte, braucht keine Beschriftung. */
  #customersTable td:nth-child(1) {
    padding-bottom: 12px !important;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--apple-border) !important;
  }

  /* Die uebrigen Felder als Beschriftung/Wert-Paare nebeneinander. */
  #customersTable td:nth-child(n+2):not(:last-child) {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 7px 0 !important;
  }
  #customersTable td:nth-child(n+2):not(:last-child)::before {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--apple-text-tertiary);
    padding-top: 2px;
  }
  /* Beschriftungen ohne Markup-Aenderung — Reihenfolge wie im <thead>. */
  #customersTable td:nth-child(2):not(:last-child)::before { content: "Umsatz"; }
  #customersTable td:nth-child(3):not(:last-child)::before { content: "Upsell"; }
  #customersTable td:nth-child(4):not(:last-child)::before { content: "Notiz"; }
  #customersTable td:nth-child(5):not(:last-child)::before { content: "Ablauf"; }

  /* Aktionen unten, volle Breite, gut mit dem Daumen erreichbar. */
  #customersTable td:last-child {
    padding-top: 14px !important;
    margin-top: 12px;
    border-top: 1px solid var(--apple-border) !important;
    text-align: left !important;
  }
  #customersTable td:last-child > div { justify-content: flex-start !important; }

  /* Notizen duerfen auf der Karte mehr Platz bekommen. */
  #customersTable td:nth-child(4) .line-clamp-2 { -webkit-line-clamp: 3; }

  /* Der umgebende Kartenrahmen faellt weg — die Zeilen sind jetzt die Karten. */
  #customersTable { background: transparent; }
}

/* --- Kundenliste: Suchzeile und Blaettern ------------------------------- */

.cust-suchzeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.cust-zaehler {
  font-size: var(--ds-t-klein, 13px);
  color: var(--apple-text-secondary);
  font-variant-numeric: tabular-nums;
}
.cust-zaehler strong { color: var(--apple-text); font-weight: 700; }
.cust-link { color: var(--apple-blue); font-weight: 600; }
.cust-link:hover { text-decoration: underline; }

.cust-blaettern {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.cust-seite-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  border-radius: var(--bl-pille, 999px);
  font-size: var(--ds-t-klein, 13px);
  font-weight: 600;
  color: var(--apple-text-secondary);
  background: var(--apple-bg-secondary);
  box-shadow: 0 1px 2px rgba(120, 70, 95, 0.05);
  transition: background 0.15s ease, color 0.15s ease;
}
a.cust-seite-btn:hover { background: var(--apple-blue-muted); color: var(--apple-blue); }
.cust-seite-aktiv {
  background: var(--apple-blue);
  color: #fff;
  box-shadow: 0 4px 14px -5px rgba(194, 69, 110, 0.6);
}
[data-theme="dark"] .cust-seite-aktiv { color: #2a1520; }
.cust-seite-aus { opacity: 0.4; }
.cust-seite-luecke { padding: 0 4px; color: var(--apple-text-tertiary); }

/* --- Weitere breite Tabellen am Handy als Karten ------------------------ */
/* Sammelbuchungen (min-w-640) und Creator-Netzwerk (min-w-520) haben keine
   ID. Getroffen werden sie ueber die Tailwind-Klasse selbst — dasselbe
   Verfahren wie bei der Kundenliste, ohne Markup anzufassen. */

@media (max-width: 760px) {
  table[class*="min-w-["] { min-width: 0 !important; display: block; }
  table[class*="min-w-["] thead { display: none; }
  table[class*="min-w-["] tbody { display: block; }

  table[class*="min-w-["] tbody tr {
    display: block;
    border: 0 !important;
    background: var(--apple-bg-secondary);
    border-radius: var(--bl-rund, 22px);
    box-shadow: 0 1px 2px rgba(120, 70, 95, 0.05), 0 8px 24px -14px rgba(120, 70, 95, 0.2);
    padding: 14px 16px;
    margin-bottom: 12px;
  }
  [data-theme="dark"] table[class*="min-w-["] tbody tr {
    box-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px -14px rgba(0,0,0,0.6);
  }

  table[class*="min-w-["] td {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 6px 0 !important;
    width: auto !important;
    border: 0 !important;
  }
  table[class*="min-w-["] td::before {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--apple-text-tertiary);
    padding-top: 2px;
  }
  /* Erste Zelle traegt die Karte — volle Breite, keine Beschriftung. */
  table[class*="min-w-["] td:first-child {
    display: block;
    padding-bottom: 10px !important;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--apple-border) !important;
  }
  table[class*="min-w-["] td:last-child {
    display: block;
    padding-top: 12px !important;
    margin-top: 8px;
    border-top: 1px solid var(--apple-border) !important;
  }
}

/* Beschriftungen je Seite — Reihenfolge wie im jeweiligen <thead>. */
@media (max-width: 760px) {
  body.seite-collective_payouts table[class*="min-w-["] td:nth-child(2)::before { content: "Plattform"; }
  body.seite-collective_payouts table[class*="min-w-["] td:nth-child(3)::before { content: "Zeitraum"; }
  body.seite-collective_payouts table[class*="min-w-["] td:nth-child(4)::before { content: "Beleg"; }
  body.seite-collective_payouts table[class*="min-w-["] td:nth-child(5)::before { content: "Betrag"; }

  body.seite-creator_network table[class*="min-w-["] td:nth-child(2)::before { content: "Gesamtumsatz"; }
  body.seite-creator_network table[class*="min-w-["] td:nth-child(3)::before { content: "Monat"; }
  body.seite-creator_network table[class*="min-w-["] td:nth-child(4)::before { content: "Kunden"; }
  body.seite-creator_network table[class*="min-w-["] td:nth-child(5)::before { content: "Kennzahl"; }
}

/* Upsell-Vorschlaege am Handy baendigen: 20+ Chips pro Kunde haben die Karte
   dominiert und Name und Umsatz untergehen lassen. Zwei Reihen reichen, der
   Rest bleibt ueber die Kundenkarte erreichbar. */
@media (max-width: 900px) {
  #customersTable td:nth-child(3) > div {
    /* Genau zwei Reihen: Chip 20px + 4px Abstand + Chip 20px. Vorher schnitt
       eine krumme Hoehe mitten durch die dritte Reihe und sah kaputt aus. */
    max-height: 44px;
    overflow: hidden;
    position: relative;
    gap: 4px;
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
  }
  #customersTable td:nth-child(3) span {
    font-size: 10px !important;
    padding: 2px 7px !important;
  }
}

/* --- Korrektur: Warnfarbe vom Akzent trennen ---------------------------- */
/* Mit dem Rosé-Akzent (#c2456e, Farbton 340°) lag das bisherige Rot (#d93a4a,
   354°) nur 14° daneben. Folge: Die Warnkarte „Abläufe in den nächsten 48
   Stunden" sah aus wie jede andere getoente Karte — das Signal war weg.
   Rot wandert nach Orange-Rot (9°, rund 29° Abstand) und die Flaeche wird
   kraeftiger, damit Warnung wieder als Warnung liest. */
:root {
  --apple-red: #d1442c;
  --apple-red-muted: rgba(209, 68, 44, 0.16);
}
[data-theme="dark"] {
  --apple-red: #ff7a5c;
  --apple-red-muted: rgba(255, 122, 92, 0.18);
}

/* --- Telegram-Hinweis, kompakt ------------------------------------------ */
.tg-hinweis {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--bl-rund-klein, 14px);
  background: var(--apple-blue-muted);
}
.tg-hinweis-icon {
  /* oben ausgerichtet: bei zweizeiligem Text sass das Symbol sonst auf halber
     Hoehe und wirkte verrutscht. */
  margin-top: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--apple-bg-secondary);
  color: var(--apple-blue);
}
.tg-hinweis-text { flex: 1; min-width: 0; }
.tg-hinweis-titel {
  font-size: var(--ds-t-klein, 13px);
  font-weight: 600;
  color: var(--apple-text);
  line-height: 1.3;
}
.tg-hinweis-sub {
  font-size: var(--ds-t-mini, 12px);
  color: var(--apple-text-secondary);
  line-height: 1.4;
  margin-top: 1px;
}
.tg-hinweis-aktion {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.tg-hinweis-weg {
  font-size: var(--ds-t-mini, 12px);
  font-weight: 500;
  color: var(--apple-text-tertiary);
  background: none;
  border: 0;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
}
.tg-hinweis-weg:hover { background: var(--apple-bg-tertiary); color: var(--apple-text); }

/* Am Handy: Text unter das Symbol, Knoepfe in eine eigene Zeile. */
@media (max-width: 560px) {
  .tg-hinweis { flex-wrap: wrap; }
  .tg-hinweis-text { flex-basis: calc(100% - 44px); }
  .tg-hinweis-aktion { flex-basis: 100%; justify-content: flex-end; }
}

/* --- Ziele: Uebererfuellung sichtbar machen ----------------------------- */
/* Der Balken bleibt bei 100 % begrenzt — sonst liefe er aus der Karte. Dass
   mehr erreicht wurde, zeigen die Zahl und ein Streifenmuster im Balken. */
.ds-ziel-prozent-ueber::after {
  content: " ↑";
  font-size: 0.85em;
}
.ds-bar-uebererfuellt .ds-bar-fill {
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.28) 0 6px,
    transparent 6px 12px
  );
}

/* Fusszeile: Resttext links, „Ändern" rechts — vorher hing der Knopf frei
   unter den Zahlen und brach in eine eigene Zeile um. */
.ds-ziel-fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}

/* --- Reparatur: Balken im 7-Tage-Diagramm (Dashboard) -------------------
   Die Zeile traegt `items-end` (align-items: flex-end). Dadurch bekommen die
   Spalten nur Inhaltshoehe, und die per Inline-Style gesetzte Balkenhoehe in
   Prozent hat keinen Bezugswert — sie fiel auf min-height: 4px zurueck. Die
   Balken waren dadurch flache Striche, obwohl PHP die Hoehen korrekt
   berechnete. Die Spalten bekommen volle Hoehe, der Balken einen Deckel,
   damit Wert und Datum darueber und darunter Platz behalten. */
.apple-card .flex.items-end.h-40 { align-items: stretch; }
.apple-card .flex.items-end.h-40 > div {
  height: 100%;
  justify-content: flex-end;
}
.apple-card .flex.items-end.h-40 > div > div[style*="height"] {
  max-height: calc(100% - 48px);
  flex-shrink: 0;
}

/* Nebenaktionen im Schnellstart: „Später erneut anzeigen" und „Nicht mehr
   anzeigen" sahen als gefuellte Kaesten aus wie Hauptaktionen. Es sind aber
   Wege, den Hinweis loszuwerden — sie duerfen zurueckhaltend sein. */
.ds-nebenaktion {
  font-size: var(--ds-t-mini, 12px);
  font-weight: 500;
  color: var(--apple-text-tertiary);
  background: none;
  border: 0;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.ds-nebenaktion:hover { background: var(--apple-bg-secondary); color: var(--apple-text); }

/* --- Umsatz nach Wochentag (Analytics) ---------------------------------- */
.wt-diagramm {
  display: flex;
  align-items: stretch;
  gap: 8px;
  height: 190px;
}
.wt-spalte {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.wt-wert {
  font-size: var(--ds-t-mini, 12px);
  font-weight: 600;
  color: var(--apple-text-secondary);
  font-variant-numeric: tabular-nums;
}
.wt-balken {
  width: 100%;
  max-height: calc(100% - 42px);
  border-radius: 10px 10px 4px 4px;
  background: var(--apple-bg-tertiary);
  flex-shrink: 0;
  transition: filter 0.15s ease;
}
/* Die zwei staerksten Tage tragen die Aussage — nur sie bekommen Farbe.
   Alles einzufaerben hiesse: nichts hervorheben. */
.wt-balken-stark { background: var(--apple-blue); }
.wt-spalte:hover .wt-balken { filter: brightness(0.94); }
.wt-tag {
  font-size: var(--ds-t-mini, 12px);
  font-weight: 600;
  color: var(--apple-text-tertiary);
}

/* --- Korrekturen Preisbereich (Landing) --------------------------------- */

/* 1. Hervorhebung der Pro-Karte wiederherstellen.
   Das Markup setzt inline nur border-color und border-width. Mein `border: 0`
   im Thema hat aber auch border-style auf none gesetzt — ohne Stil ist kein
   Rahmen sichtbar, egal welche Breite. Mit `0 solid transparent` bleibt der
   Stil erhalten, die Breite ist standardmaessig 0, und inline gesetzte Werte
   greifen wieder. */
.apple-card {
  border: 0 solid transparent;
}

/* 2. „Bestseller"-Abzeichen nicht mehr abschneiden.
   Es sitzt per -top-2.5 oberhalb der Kartenkante, .apple-card hat aber
   overflow: hidden (schon vor dem Redesign). Auf der Landing-Seite braucht
   keine Karte das Beschneiden — dort steht nur Text. */
.apple-card.lp-glass-card {
  overflow: visible;
}

/* 3. Zerrissene Listentexte in den Preiskarten.
   Die <li> sind display:flex. In einem Flex-Container wird jeder Textabschnitt
   um ein <strong> herum zu einem eigenen Flex-Element — mit gap dazwischen.
   Aus „Bis zu 100 aktive Kunden" wurde dadurch „Bis zu | 100 | aktive Kunden",
   verteilt auf drei Zeilen. Bestand schon vor dem Redesign.
   Loesung ohne Markup-Aenderung: Der Listenpunkt wird wieder ein normaler
   Textblock, das Symbol haengt absolut positioniert davor. Der Text fliesst
   dann als ein Stueck. Betrifft alle 24 Punkte, die einheitlich mit einem
   Symbol-<span> beginnen. */
.apple-card li.flex.items-start.gap-2 {
  display: block;
  position: relative;
  padding-left: 22px;
}
.apple-card li.flex.items-start.gap-2 > span:first-child {
  position: absolute;
  left: 0;
  top: 1px;
  margin-top: 0;
}

/* --- Footer der Landing-Seite ------------------------------------------- */
/* Mehrspaltig statt einer zentrierten Zeile. Der Hinweis auf das
   Finanz-Webtool (CRV) stand vorher als grosser Block mitten auf der Seite
   und lenkte vom eigentlichen Angebot ab — hier ist er aufgehoben, ohne zu
   draengen. */
.lp-footer {
  border-top: 1px solid var(--apple-border);
  background: var(--apple-bg-secondary);
  margin-top: 40px;
}
.lp-footer-inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 56px 24px 40px;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 48px;
}
.lp-footer-marke { max-width: 320px; }
.lp-footer-claim {
  font-size: var(--ds-t-klein, 13px);
  line-height: 1.6;
  color: var(--apple-text-secondary);
  margin-top: 14px;
}
.lp-footer-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-top: 18px;
  border-radius: 999px;
  background: var(--apple-bg-tertiary);
  color: var(--apple-text-secondary);
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.lp-footer-social:hover {
  background: var(--apple-blue-muted);
  color: var(--apple-blue);
  transform: translateY(-1px);
}

.lp-footer-spalte { display: flex; flex-direction: column; gap: 11px; }
.lp-footer-titel {
  font-size: var(--ds-t-mini, 12px);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--apple-text);
  margin-bottom: 4px;
}
.lp-footer-spalte a {
  font-size: var(--ds-t-klein, 13px);
  color: var(--apple-text-secondary);
  transition: color 0.15s ease;
}
.lp-footer-spalte a:hover { color: var(--apple-blue); }

.lp-footer-unten {
  border-top: 1px solid var(--apple-border);
}
.lp-footer-unten p {
  max-width: 72rem;
  margin: 0 auto;
  padding: 20px 24px;
  font-size: var(--ds-t-mini, 12px);
  color: var(--apple-text-tertiary);
}
.lp-footer-unten a { color: var(--apple-text-secondary); }
.lp-footer-unten a:hover { color: var(--apple-blue); }

@media (max-width: 900px) {
  .lp-footer-inner { grid-template-columns: 1fr 1fr; gap: 36px; padding: 44px 20px 32px; }
  .lp-footer-marke { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 520px) {
  .lp-footer-inner { grid-template-columns: 1fr; gap: 30px; }
}

/* ==========================================================================
   HERO DER LANDING-SEITE
   --------------------------------------------------------------------------
   Zwei Entscheidungen tragen den Bereich:

   1. Das Streifenmotiv sind dieselben drei Schraegen wie im ER-Monogramm.
      Es stammt aus der eigenen Marke — deshalb sieht es nirgendwo sonst so aus.
   2. Der Beleg zeigt in einem Blick, was das Produkt tut: aus einzelnen
      Verkaeufen wird ein steuerfertiger Abschluss. Reines CSS, keine Bilddatei.

   Statt zentriertem Standardaufbau eine asymmetrische Zweiteilung: Text links,
   Motiv rechts, leicht angeschnitten.
   ========================================================================== */

.lp-hero {
  position: relative;
  overflow: hidden;
  padding: 76px 24px 104px;
}
.lp-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 72rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 64px;
}

/* Motiv sitzt rechts oben, angeschnitten — nicht als brave Dekoration mittig. */
.lp-hero-motiv {
  position: absolute;
  top: -90px;
  right: -120px;
  width: 720px;
  height: 720px;
  pointer-events: none;
  opacity: 0.9;
  transform: rotate(-4deg);
}
.lp-hero-motiv svg { width: 100%; height: 100%; }

/* --- Text --------------------------------------------------------------- */

.lp-hero-badge {
  display: inline-block;
  padding: 7px 15px;
  border-radius: 999px;
  font-size: var(--ds-t-mini, 12px);
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--apple-blue-muted);
  color: var(--apple-blue);
  margin-bottom: 26px;
}
.lp-hero-titel {
  font-family: var(--bl-serif);
  font-size: clamp(2.6rem, 5.4vw, 4.1rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--apple-text);
  margin-bottom: 22px;
}
/* Die zweite Zeile kursiv statt farbig — ruhiger und typografisch eigener. */
.lp-hero-titel em {
  font-style: italic;
  color: var(--apple-blue);
}
.lp-hero-sub {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--apple-text-secondary);
  max-width: 34rem;
  margin-bottom: 34px;
}
.lp-hero-sub strong { color: var(--apple-text); font-weight: 600; }

.lp-hero-aktionen { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.lp-hero-zweit {
  font-size: 15px;
  font-weight: 600;
  color: var(--apple-text-secondary);
  padding: 14px 10px;
  border-bottom: 1.5px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.lp-hero-zweit:hover { color: var(--apple-blue); border-color: var(--apple-blue); }

.lp-hero-live {
  margin-top: 30px;
  font-size: var(--ds-t-klein, 13px);
  color: var(--apple-text-tertiary);
  max-width: 30rem;
  line-height: 1.6;
}

/* --- Beleg -------------------------------------------------------------- */

.lp-beleg { position: relative; justify-self: center; width: 100%; max-width: 340px; }
.lp-beleg-papier {
  background: var(--apple-bg-secondary);
  border-radius: 18px 18px 0 0;
  padding: 26px 24px 20px;
  box-shadow: 0 2px 4px rgba(120, 70, 95, 0.05), 0 24px 60px -24px rgba(120, 70, 95, 0.4);
  transform: rotate(1.6deg);
}
[data-theme="dark"] .lp-beleg-papier {
  box-shadow: 0 2px 4px rgba(0,0,0,0.4), 0 24px 60px -24px rgba(0,0,0,0.75);
}

/* Gezackte Unterkante wie ein abgerissener Bon — der Grund, warum das Motiv
   traegt: es ist ein Beleg, kein Karteikasten. */
.lp-beleg-riss {
  height: 14px;
  transform: rotate(1.6deg);
  background:
    linear-gradient(-45deg, transparent 50%, var(--apple-bg-secondary) 50%) 0 0 / 14px 14px repeat-x,
    linear-gradient( 45deg, transparent 50%, var(--apple-bg-secondary) 50%) 0 0 / 14px 14px repeat-x;
  filter: drop-shadow(0 10px 18px rgba(120, 70, 95, 0.16));
  margin-top: -1px;
}

.lp-beleg-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--apple-border-strong);
}
.lp-beleg-marke {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: var(--apple-blue);
}
.lp-beleg-monat { font-size: 11px; color: var(--apple-text-tertiary); }

.lp-beleg-zeilen { padding: 14px 0; display: flex; flex-direction: column; gap: 11px; }
.lp-beleg-zeile {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 12.5px;
  color: var(--apple-text-secondary);
}
.lp-beleg-zeile b {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--apple-text);
}
.lp-beleg-zeile-still { opacity: 0.55; }

.lp-beleg-summe {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 14px;
  border-top: 1px dashed var(--apple-border-strong);
  font-size: 13px;
  color: var(--apple-text-secondary);
}
.lp-beleg-summe b {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--apple-text);
  font-variant-numeric: tabular-nums;
}
.lp-beleg-fuss {
  margin-top: 16px;
  padding-top: 13px;
  border-top: 1px dashed var(--apple-border-strong);
  font-size: 11.5px;
  color: var(--apple-text-tertiary);
  display: flex;
  align-items: center;
  gap: 7px;
}
.lp-beleg-haken {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px; height: 17px;
  border-radius: 999px;
  background: var(--apple-green-muted);
  color: var(--apple-green);
  font-size: 10px;
  font-weight: 700;
}

@media (max-width: 980px) {
  .lp-hero { padding: 56px 20px 76px; }
  .lp-hero-inner { grid-template-columns: 1fr; gap: 46px; }
  .lp-hero-sub { max-width: none; }
  .lp-hero-motiv { top: -140px; right: -220px; width: 560px; height: 560px; opacity: 0.55; }
  .lp-beleg { max-width: 320px; }
}

/* Hintergrundschimmer der Landing-Seite auf das Thema bringen.
   Die Flecken waren mit rgba(10,132,255,…) fest auf Blau verdrahtet und
   erzeugten oben links einen kalten Schleier gegen das warme Rosé. */
.lp-bg-blobs {
  background:
    radial-gradient(circle at 10% 8%,  rgba(194, 69, 110, 0.07), transparent 46%),
    radial-gradient(circle at 88% 22%, rgba(226, 120, 159, 0.06), transparent 48%),
    radial-gradient(circle at 50% 96%, rgba(155, 95, 192, 0.05), transparent 52%) !important;
}
html[data-theme="dark"] .lp-bg-blobs {
  background:
    radial-gradient(circle at 10% 8%,  rgba(240, 138, 176, 0.10), transparent 46%),
    radial-gradient(circle at 88% 22%, rgba(196, 138, 224, 0.07), transparent 48%),
    radial-gradient(circle at 50% 96%, rgba(255, 122, 92, 0.05), transparent 52%) !important;
}

/* Streifenmotiv zurueckgenommen: als Andeutung im Hintergrund gedacht, nicht
   als zweites Bildmotiv neben dem Beleg. */
.lp-hero-motiv { opacity: 0.5; top: -150px; right: -190px; }
@media (max-width: 980px) { .lp-hero-motiv { opacity: 0.3; } }

/* ==========================================================================
   LANDING-SEITE: uebrige Abschnitte auf die Sprache des Hero bringen
   --------------------------------------------------------------------------
   Die Bausteine sind ueber 14 Karten und sieben Abschnitte hinweg dieselben.
   Deshalb hier zentral statt in jeder Zeile Markup: getoente Symbolflaechen,
   ruhigere Titel, das Schraegstreifen-Motiv als Trenner.
   ========================================================================== */

/* --- Abschnitts-Ueberschriften ------------------------------------------ */
/* Groesser und mit einem kurzen Schraegstrich darueber — dasselbe Zeichen wie
   im Logo, nur als Akzent. Verbindet die Abschnitte mit dem Hero. */
.lp-abschnitt-titel,
#features > h2,
#content-kalender h2,
#umsatz-steuer h2,
#for-who > h2,
#pricing > h2,
#reviews > h2,
#faq > h2 {
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
}
/* Akzentstrich ueber den Ueberschriften entfernt: die Abschnittstrenner
   tragen dasselbe Motiv bereits — zweimal waere zu viel. */


/* --- Feature-Karten ----------------------------------------------------- */
.apple-card.lp-glass-card.lp-card-lift {
  padding: 26px 24px;
  transition: transform 0.28s cubic-bezier(0.22,1,0.36,1), box-shadow 0.28s ease;
}
.apple-card.lp-glass-card.lp-card-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 6px rgba(120,70,95,0.06), 0 22px 44px -20px rgba(120,70,95,0.34);
}
[data-theme="dark"] .apple-card.lp-glass-card.lp-card-lift:hover {
  box-shadow: 0 2px 6px rgba(0,0,0,0.4), 0 22px 44px -20px rgba(0,0,0,0.8);
}

/* Symbolflaeche: getoent statt grau, weiche Ecken wie im uebrigen Thema. */
.lp-glass-card .w-12.h-12 {
  border-radius: 15px !important;
  background: var(--apple-blue-muted) !important;
  color: var(--apple-blue) !important;
}

/* Kartentitel standen in Blau — auf getoenten Karten wirkt das unruhig und
   nimmt dem Akzent die Bedeutung. Jetzt Textfarbe, dafuer etwas kraeftiger. */
.lp-glass-card h3.apple-text-blue {
  color: var(--apple-text) !important;
  font-weight: 650;
  font-size: 16.5px;
  letter-spacing: -0.01em;
}

/* --- Trenner zwischen Abschnitten --------------------------------------- */
/* Statt einer geraden Linie drei kurze Schraegen — dasselbe Motiv wie im Hero,
   nur ganz klein. */
section[id] + section[id] { position: relative; }
#for-who::before,
#pricing::before,
#reviews::before,
#faq::before {
  content: "";
  display: block;
  width: 74px;
  height: 6px;
  margin: 0 auto 54px;
  background:
    linear-gradient(100deg, var(--apple-blue) 0 30%, transparent 30%) 0 0/26px 6px no-repeat,
    linear-gradient(100deg, var(--apple-blue) 0 30%, transparent 30%) 26px 0/26px 6px no-repeat,
    linear-gradient(100deg, var(--apple-blue) 0 30%, transparent 30%) 52px 0/26px 6px no-repeat;
  transform: skewX(-24deg);
  opacity: 0.28;
  border-radius: 1px;
}

/* Kartentitel wieder serifenlos. Serifen bleiben den Abschnitts-Ueberschriften
   vorbehalten — sonst verlieren sie ihre Signalwirkung und die Seite wird
   unruhig. Dafuer kraeftiger gesetzt, damit die Hierarchie stimmt. */
.apple-card h3,
.lp-glass-card h3 {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 650;
  letter-spacing: -0.01em;
}

/* ==========================================================================
   BEWERTUNGEN als redaktionelles Zitat
   --------------------------------------------------------------------------
   Vorher: eine kleine Karte in viel Leere — sah aus wie ein vergessener
   Kasten. Ein Zitat ist keine Kachel, es ist eine Stimme. Deshalb gross und
   in der Serifenschrift gesetzt, mit einem Anfuehrungszeichen als Marke.
   Der Karussell-Aufbau bleibt unangetastet, damit das JavaScript weiterlaeuft.
   ========================================================================== */

#reviews { position: relative; }

/* Die Karte verschwindet — das Zitat steht frei. */
#reviews .apple-card.lp-glass-card {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 8px 0 0 !important;
  min-height: 0 !important;
  text-align: center;
}

/* Das dekorative Anfuehrungszeichen ist wieder raus: Es sass hinter der
   Vorzeile „BEWERTUNG" und wirkte wie ein Fleck. Der kursive Serifensatz liest
   sich ohnehin als Zitat, und im Text stehen bereits echte Anfuehrungszeichen. */

/* Der Zitattext traegt den Abschnitt. */
#reviews article p[id^="review-"] {
  position: relative;
  z-index: 1;
  font-family: var(--bl-serif);
  font-size: clamp(1.15rem, 2.3vw, 1.6rem) !important;
  line-height: 1.5 !important;
  font-style: italic;
  color: var(--apple-text) !important;
  max-width: 34rem;
  margin: 0 auto;
}

/* Kennzeichnung („Bewertung") wird zur kleinen Vorzeile. */
#reviews article .text-\[13px\].font-medium {
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--apple-text-tertiary) !important;
  margin-bottom: 18px !important;
}

/* Autorzeile mittig unter das Zitat. */
#reviews article .apple-card > *:last-child {
  justify-content: center;
  margin-top: 26px;
}

/* Pfeile zurueckhaltend — sie sollen das Zitat nicht einrahmen. */
#reviews .reviews-nav-btn {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 0.35;
  transition: opacity 0.18s ease;
}
#reviews .reviews-nav-btn:hover { opacity: 0.9; }

/* ==========================================================================
   AGENTUR-BAND
   --------------------------------------------------------------------------
   Vorher eine Karte wie jede andere, entsprechend uebersehbar. Jetzt ein
   getoentes Band mit dem Schraegstreifen-Motiv — es spricht eine andere
   Zielgruppe an und darf sich deshalb absetzen.
   ========================================================================== */
a[href="agenturen.php"].apple-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(115deg,
      var(--apple-blue-muted) 0%,
      color-mix(in srgb, var(--apple-purple) 12%, transparent) 100%) !important;
  border-radius: var(--bl-rund-gross, 30px) !important;
  padding: 34px 36px !important;
  box-shadow: none !important;
}
a[href="agenturen.php"].apple-card::after {
  content: "";
  position: absolute;
  top: -30%;
  right: -6%;
  width: 260px;
  height: 200%;
  background:
    linear-gradient(100deg, var(--apple-blue) 0 26%, transparent 26%) 0 0/64px 30px repeat-y,
    linear-gradient(100deg, var(--apple-blue) 0 26%, transparent 26%) 34px 0/64px 30px repeat-y;
  transform: skewX(-24deg);
  opacity: 0.14;
  pointer-events: none;
}
a[href="agenturen.php"].apple-card > * { position: relative; z-index: 1; }
a[href="agenturen.php"].apple-card h2,
a[href="agenturen.php"].apple-card .text-\[17px\] {
  font-family: var(--bl-serif);
  font-size: 1.45rem !important;
  letter-spacing: -0.015em;
}
a[href="agenturen.php"].apple-card .apple-btn-secondary {
  background: var(--apple-bg-secondary) !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 13px 24px !important;
  font-weight: 650;
  color: var(--apple-blue) !important;
  box-shadow: 0 6px 18px -8px rgba(120,70,95,0.45);
}

/* „Weiterlesen" mittig unter das Zitat statt linksbuendig — alles andere im
   Abschnitt ist zentriert. */
#reviews article button[onclick^="toggleReview"] {
  display: block;
  margin: 14px auto 0;
}

/* Emojis in Bewertungen: Die Serifenschrift hat keine Emoji-Zeichen, deshalb
   erschien im Zitat ein leeres Kaestchen (im Text steht U+1F64C 🙌). Die
   Systemschrift fuer Emojis wird der Serifenschrift als Rueckfall angehaengt. */
#reviews article p[id^="review-"] {
  font-family: var(--bl-serif), "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}