/* 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;
}

/* ==========================================================================
   AUSWAHLSEITE auf errhuman.store
   --------------------------------------------------------------------------
   Die einzige Seite, auf der beide Welten zusammen auftauchen. Bewusst karg:
   keine Navigation, keine Preise, keine Funktionsliste. Eine Frage, zwei
   Antworten.
   ========================================================================== */

.vw-seite {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 24px 40px;
}
.vw-motiv {
  position: absolute;
  top: -160px; right: -200px;
  width: 720px; height: 720px;
  opacity: 0.42;
  transform: rotate(-4deg);
  pointer-events: none;
}
.vw-motiv svg { width: 100%; height: 100%; }

.vw-kopf { position: relative; z-index: 1; text-align: center; max-width: 40rem; }
.vw-titel {
  font-family: var(--bl-serif);
  font-size: clamp(2.1rem, 4.6vw, 3.3rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--apple-text);
  margin: 30px 0 18px;
}
.vw-titel em { font-style: italic; color: var(--apple-blue); }
.vw-sub {
  font-size: 16px;
  line-height: 1.65;
  color: var(--apple-text-secondary);
  max-width: 32rem;
  margin: 0 auto;
}
.vw-frage {
  margin-top: 42px;
  font-size: var(--ds-t-mini, 12px);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--apple-text-tertiary);
}

.vw-karten {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  width: 100%;
  max-width: 60rem;
  margin-top: 22px;
}
.vw-karte {
  display: flex;
  flex-direction: column;
  padding: 32px 30px 28px;
  border-radius: var(--bl-rund-gross, 30px);
  background: var(--apple-bg-secondary);
  box-shadow: 0 2px 4px rgba(120,70,95,0.05), 0 18px 48px -22px rgba(120,70,95,0.32);
  transition: transform 0.28s cubic-bezier(0.22,1,0.36,1), box-shadow 0.28s ease;
}
.vw-karte:hover {
  transform: translateY(-5px);
  box-shadow: 0 2px 6px rgba(120,70,95,0.07), 0 30px 60px -24px rgba(120,70,95,0.42);
}
[data-theme="dark"] .vw-karte {
  box-shadow: 0 2px 4px rgba(0,0,0,0.4), 0 18px 48px -22px rgba(0,0,0,0.75);
}

.vw-kicker {
  font-size: var(--ds-t-mini, 12px);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--apple-text-tertiary);
}
.vw-karte-titel {
  font-family: var(--bl-serif);
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--apple-text);
  margin: 10px 0 12px;
}
/* Die beiden Welten bekommen einen eigenen Akzent, damit die Wahl nicht
   beliebig wirkt — aber denselben Aufbau, damit keine bevorzugt aussieht. */
.vw-karte-business .vw-karte-titel { color: #2f7d63; }
.vw-karte-creator  .vw-karte-titel { color: var(--apple-blue); }

.vw-karte-text {
  font-size: var(--ds-t-body, 14px);
  line-height: 1.65;
  color: var(--apple-text-secondary);
}
.vw-punkte {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.vw-punkte li {
  position: relative;
  padding-left: 22px;
  font-size: var(--ds-t-klein, 13px);
  color: var(--apple-text-secondary);
}
.vw-punkte li::before {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 11px; height: 4px;
  border-radius: 1px;
  transform: skewX(-24deg);
  opacity: 0.75;
}
.vw-karte-business .vw-punkte li::before { background: #2f7d63; }
.vw-karte-creator  .vw-punkte li::before { background: var(--apple-blue); }

.vw-weiter {
  margin-top: auto;
  padding-top: 26px;
  font-size: var(--ds-t-klein, 13px);
  font-weight: 650;
}
.vw-karte-business .vw-weiter { color: #2f7d63; }
.vw-karte-creator  .vw-weiter { color: var(--apple-blue); }

.vw-fuss {
  position: relative;
  z-index: 1;
  margin-top: 46px;
  text-align: center;
  max-width: 36rem;
}
.vw-fuss p {
  font-size: var(--ds-t-mini, 12px);
  line-height: 1.6;
  color: var(--apple-text-tertiary);
}
.vw-recht { margin-top: 14px; display: flex; gap: 16px; justify-content: center; }
.vw-recht a { color: var(--apple-text-tertiary); }
.vw-recht a:hover { color: var(--apple-blue); }

@media (max-width: 760px) {
  .vw-seite { padding: 44px 18px 32px; justify-content: flex-start; }
  .vw-karten { grid-template-columns: 1fr; gap: 16px; }
  .vw-karte { padding: 26px 24px 24px; }
  .vw-motiv { opacity: 0.28; }
}

/* --- Termine (Business-Variante) ---------------------------------------- */

.tm-form { padding: 24px 26px 26px; }
.tm-raster {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: end;
}
.tm-feld { display: flex; flex-direction: column; gap: 6px; }
.tm-feld > span {
  font-size: var(--ds-t-klein, 13px);
  font-weight: 600;
  color: var(--apple-text-secondary);
}
.tm-feld-breit { grid-column: span 2; }
.tm-feld-voll  { grid-column: 1 / -1; }

.tm-tag {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 4px 10px;
}
.tm-tag-titel {
  font-family: var(--bl-serif);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--apple-text);
}
.tm-tag-anzahl { font-size: var(--ds-t-mini, 12px); color: var(--apple-text-tertiary); }

.tm-liste { display: flex; flex-direction: column; gap: 10px; }

.tm-eintrag {
  display: grid;
  grid-template-columns: 74px 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 16px 20px;
}
/* Die Uhrzeit traegt die Zeile — sie ist beim Durchscrollen das, wonach man
   sucht. Deshalb links, gross und mit gleich breiten Ziffern. */
.tm-zeit {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-variant-numeric: tabular-nums;
}
.tm-zeit strong {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--apple-text);
}
.tm-zeit span { font-size: var(--ds-t-mini, 12px); color: var(--apple-text-tertiary); }

.tm-inhalt { min-width: 0; }
.tm-name { font-size: 15px; font-weight: 650; color: var(--apple-text); }
.tm-leistung { font-size: var(--ds-t-klein, 13px); color: var(--apple-text-secondary); margin-top: 2px; }
.tm-notiz { font-size: var(--ds-t-mini, 12px); color: var(--apple-text-tertiary); margin-top: 4px; }

.tm-rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.tm-preis {
  font-size: 15px;
  font-weight: 700;
  color: var(--apple-text);
  font-variant-numeric: tabular-nums;
}
.tm-aktionen { display: flex; gap: 6px; }
.tm-knopf {
  font-size: var(--ds-t-mini, 12px);
  font-weight: 600;
  padding: 6px 11px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.tm-knopf-ok  { background: var(--apple-green-muted); color: var(--apple-green); }
.tm-knopf-weg { background: none; color: var(--apple-text-tertiary); }
.tm-knopf-weg:hover { background: var(--apple-red-muted); color: var(--apple-red); }

.tm-eintrag-still { opacity: 0.62; padding: 12px 4px; }
.tm-vergangen { padding: 18px 22px; }
.tm-vergangen summary {
  cursor: pointer;
  font-size: var(--ds-t-klein, 13px);
  font-weight: 600;
  color: var(--apple-text-secondary);
}
.tm-status {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
}
.tm-status-erledigt { background: var(--apple-green-muted); color: var(--apple-green); }
.tm-status-abgesagt { background: var(--apple-red-muted);   color: var(--apple-red); }
.tm-status-offen    { background: var(--apple-bg-tertiary); color: var(--apple-text-tertiary); }

@media (max-width: 820px) {
  .tm-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tm-feld-breit { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .tm-form { padding: 20px 18px 22px; }
  .tm-raster { grid-template-columns: 1fr; }
  /* Am Handy untereinander: Zeit oben, Aktionen unten, volle Breite zum Tippen. */
  .tm-eintrag { grid-template-columns: 1fr; gap: 10px; padding: 15px 17px; }
  .tm-zeit { flex-direction: row; align-items: baseline; gap: 8px; }
  .tm-rechts { align-items: flex-start; }
  .tm-aktionen { width: 100%; }
}

/* --- Einverständniserklärungen (Business-Variante) --- */

.einv-h2 {
    font-family: var(--schrift-titel, inherit);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 6px;
    color: var(--apple-text);
}
.einv-hilfe {
    font-size: 14px;
    line-height: 1.55;
    color: var(--apple-text-secondary);
    margin: 0 0 20px;
}
.einv-optional { font-weight: 400; color: var(--apple-text-tertiary); }

.einv-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 18px;
}
.einv-feld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.einv-feld-breit { grid-column: 1 / -1; }
.einv-feld label {
    font-size: 13px;
    font-weight: 600;
    color: var(--apple-text-secondary);
}
.einv-textarea {
    resize: vertical;
    min-height: 220px;
    line-height: 1.6;
    font-size: 14px;
}
.einv-hinweis {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--apple-text-tertiary);
    margin: 2px 0 0;
}
.einv-rechtshinweis {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 22px 0 0;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--apple-yellow-muted, rgba(255,193,7,0.10));
    font-size: 13px;
    line-height: 1.5;
    color: var(--apple-text-secondary);
}
.einv-rechtshinweis svg { flex: 0 0 auto; margin-top: 1px; }

@media (max-width: 640px) {
    .einv-form { grid-template-columns: 1fr; }
}

/* Liste */
.einv-listenkopf {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 12px;
}
.einv-listenkopf .einv-h2 { margin: 0; }
.einv-anzahl {
    font-size: 13px;
    font-weight: 600;
    color: var(--apple-text-tertiary);
}
.einv-zeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    margin-bottom: 10px;
}
.einv-zeile-haupt { min-width: 0; }
.einv-zeile-kopf {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 3px;
}
.einv-zeile-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--apple-text);
}
.einv-zeile-leistung {
    font-size: 14px;
    color: var(--apple-text-secondary);
    margin: 0 0 2px;
}
.einv-zeile-datum {
    font-size: 12.5px;
    color: var(--apple-text-tertiary);
    margin: 0;
}
.einv-zeile-aktionen {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}
.einv-btn-klein { padding: 8px 15px; font-size: 13.5px; }
.einv-link-loeschen,
.einv-link-neutral {
    background: none;
    border: 0;
    padding: 0;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.einv-link-loeschen { color: var(--apple-red); }
.einv-link-neutral  { color: var(--apple-text-secondary); }
.einv-link-loeschen:hover,
.einv-link-neutral:hover { text-decoration: underline; }

@media (max-width: 560px) {
    .einv-zeile { flex-direction: column; align-items: stretch; }
    .einv-zeile-aktionen { justify-content: space-between; }
}

/* Zustandsmarken */
.einv-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
}
.einv-badge-unterschrieben { background: var(--apple-green-muted); color: var(--apple-green); }
.einv-badge-entwurf        { background: var(--apple-blue-muted);  color: var(--apple-blue); }
.einv-badge-widerrufen     { background: var(--apple-red-muted);   color: var(--apple-red); }
.einv-badge-minderjaehrig  { background: var(--apple-yellow-muted, rgba(255,193,7,0.14)); color: var(--apple-orange, #b26a00); }

/* Dokumentseite */
.einv-dokument-body { min-height: 100vh; padding: 0 0 60px; }
.einv-dokument-rahmen { max-width: 760px; margin: 0 auto; padding: 0 16px; }
.einv-leiste {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 0;
}
.einv-zurueck {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--apple-text-secondary);
    text-decoration: none;
}
.einv-zurueck:hover { color: var(--apple-text); }
.einv-meldung { margin-bottom: 16px; }

.einv-blatt {
    background: var(--apple-card-bg, #fff);
    border-radius: 18px;
    padding: 40px 42px 34px;
    box-shadow: 0 10px 34px rgba(0,0,0,0.07);
}
.einv-blatt-kopf {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--apple-border);
}
.einv-betrieb { font-size: 15px; font-weight: 700; margin: 0; color: var(--apple-text); }
.einv-betrieb-adresse {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--apple-text-tertiary);
    margin: 3px 0 0;
}
.einv-blatt-titel {
    font-family: var(--schrift-titel, inherit);
    font-size: 25px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 26px 0 22px;
    color: var(--apple-text);
}
.einv-daten {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 24px;
    margin: 0 0 28px;
}
.einv-daten dt {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--apple-text-tertiary);
    margin-bottom: 2px;
}
.einv-daten dd { font-size: 15px; margin: 0; color: var(--apple-text); }
.einv-alter { font-size: 13px; color: var(--apple-text-tertiary); }

.einv-aufklaerung p {
    font-size: 14.5px;
    line-height: 1.68;
    color: var(--apple-text);
    margin: 0 0 14px;
}
.einv-haken {
    list-style: none;
    margin: 26px 0 0;
    padding: 20px 0 0;
    border-top: 1px solid var(--apple-border);
}
.einv-haken li { margin-bottom: 13px; }
.einv-haken-label {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 14.5px;
    line-height: 1.55;
    cursor: pointer;
}
.einv-haken-label input {
    flex: 0 0 auto;
    width: 21px;
    height: 21px;
    margin-top: 1px;
    accent-color: var(--apple-blue);
    cursor: pointer;
}
/* Unterschriebene Fassung: gleiche Einrückung wie beim Ankreuzen, damit
   umbrechende Sätze unter dem Text weiterlaufen und nicht unter dem Haken. */
.einv-haken-fertig {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 14.5px;
    line-height: 1.55;
}
.einv-haken-zeichen {
    flex: 0 0 auto;
    width: 21px;
    text-align: center;
    color: var(--apple-green);
    font-weight: 700;
}
.einv-minderjaehrig-text {
    margin: 22px 0 0;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--apple-bg-secondary, rgba(0,0,0,0.03));
    font-size: 14px;
    line-height: 1.6;
    color: var(--apple-text);
}

/* Unterschriften */
.einv-signaturen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 30px;
    margin-top: 34px;
    padding-top: 26px;
    border-top: 1px solid var(--apple-border);
}
.einv-pad-huelle { position: relative; }
.einv-pad {
    display: block;
    width: 100%;
    height: 150px;
    border: 1.5px dashed var(--apple-border);
    border-radius: 12px;
    background: #fff;
    touch-action: none;   /* sonst scrollt das Handy beim Unterschreiben */
    cursor: crosshair;
}
.einv-pad-leeren {
    position: absolute;
    right: 10px;
    bottom: 9px;
    background: rgba(255,255,255,0.9);
    border: 1px solid var(--apple-border);
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    color: #3a3a3c;
    cursor: pointer;
    font-family: inherit;
}
.einv-signatur-bild {
    height: 110px;
    display: flex;
    align-items: flex-end;
    padding-bottom: 4px;
}
.einv-signatur-bild img { max-height: 100%; max-width: 100%; object-fit: contain; }
.einv-vormund-feld { margin-bottom: 10px; }
.einv-signatur-linie {
    margin: 8px 0 0;
    padding-top: 8px;
    border-top: 1px solid var(--apple-text-tertiary);
    font-size: 14px;
    font-weight: 600;
    color: var(--apple-text);
}
.einv-signatur-rolle {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--apple-text-tertiary);
}

.einv-blatt-fuss {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 30px;
    padding-top: 16px;
    border-top: 1px solid var(--apple-border);
    font-size: 12px;
    color: var(--apple-text-tertiary);
}
.einv-pruefsumme { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.einv-abschluss { text-align: center; margin: 26px 0 0; }
.einv-abschluss .einv-hilfe { margin-bottom: 14px; }
.einv-btn-gross { padding: 15px 34px; font-size: 16px; }
.einv-nachtraeglich {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    margin-top: 26px;
}

@media (max-width: 640px) {
    .einv-blatt { padding: 26px 20px 24px; border-radius: 14px; }
    .einv-blatt-titel { font-size: 21px; }
    .einv-daten { grid-template-columns: 1fr; }
}

/* Gedruckt zählt nur das Blatt. Schwarz auf Weiß, keine Schatten, keine
   Bedienelemente — was auf Papier landet, soll wie ein Formular aussehen
   und nicht wie ein Bildschirmfoto. */
@media print {
    .einv-leiste,
    .einv-meldung,
    .einv-abschluss,
    .einv-nachtraeglich,
    .einv-nicht-drucken,
    .apple-sidebar,
    .apple-header,
    .ai-chat-widget { display: none !important; }

    .einv-dokument-body { background: #fff !important; color: #000 !important; padding: 0 !important; }
    .einv-dokument-rahmen { max-width: none; padding: 0; }
    .einv-blatt {
        box-shadow: none !important;
        border-radius: 0;
        padding: 0;
        background: #fff !important;
    }
    .einv-blatt-titel,
    .einv-daten dd,
    .einv-aufklaerung p,
    .einv-haken,
    .einv-signatur-linie,
    .einv-betrieb { color: #000 !important; }
    .einv-daten dt,
    .einv-betrieb-adresse,
    .einv-signatur-rolle,
    .einv-blatt-fuss { color: #444 !important; }
    .einv-haken-zeichen { color: #000 !important; }

    .einv-signaturen { break-inside: avoid; page-break-inside: avoid; }
    .einv-haken li   { break-inside: avoid; page-break-inside: avoid; }
    .einv-blatt-fuss { break-inside: avoid; page-break-inside: avoid; }

    @page { margin: 18mm 16mm; }
}

/* --- Anamnesebögen (Business-Variante) --- */

.einv-badge-frist { background: var(--apple-orange-muted, rgba(224,138,74,0.15)); color: var(--apple-orange, #b26a00); }

.einv-frist-hinweis {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--apple-orange-muted, rgba(224,138,74,0.12));
}
.einv-frist-hinweis svg { flex: 0 0 auto; margin-top: 1px; color: var(--apple-orange, #b26a00); }
.einv-frist-hinweis p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--apple-text); }

/* Der wichtigste Block im fertigen Bogen: was vor der Behandlung zählt.
   Steht deshalb vor den Fragen, nicht dazwischen. */
.anam-auffaellig {
    margin: 0 0 28px;
    padding: 18px 20px;
    border-radius: 14px;
    background: var(--apple-orange-muted, rgba(224,138,74,0.12));
    border-left: 3px solid var(--apple-orange, #e08a4a);
}
.anam-auffaellig h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 700;
    color: var(--apple-text);
}
.anam-auffaellig h2 svg { color: var(--apple-orange, #b26a00); }
.anam-auffaellig ul { list-style: none; margin: 0; padding: 0; }
.anam-auffaellig li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    padding: 7px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 14px;
    line-height: 1.5;
}
.anam-auffaellig li:first-child { border-top: 0; }
.anam-auffaellig-frage  { flex: 1 1 240px; color: var(--apple-text); }
.anam-auffaellig-wert   { font-weight: 700; color: var(--apple-text); }
.anam-auffaellig-detail {
    flex: 1 1 100%;
    font-size: 13.5px;
    color: var(--apple-text-secondary);
}
.anam-keine-auffaelligkeiten {
    margin: 0 0 26px;
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--apple-green-muted);
    font-size: 14px;
    font-weight: 600;
    color: var(--apple-green);
}

.anam-gruppe { margin-top: 26px; }
.anam-gruppe-titel {
    margin: 0 0 4px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--apple-border);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--apple-text-tertiary);
}

.anam-frage {
    padding: 14px 0;
    border-bottom: 1px solid var(--apple-border);
}
.anam-frage:last-child { border-bottom: 0; }
.anam-frage-text {
    margin: 0 0 9px;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--apple-text);
}
.anam-frage-wichtig {
    margin-left: -14px;
    padding-left: 11px;
    border-left: 3px solid var(--apple-orange, #e08a4a);
}

/* Ja/Nein als zwei große Flächen. Wer im Studio auf einem Tablet tippt,
   trifft keine 16-Pixel-Radiobuttons. */
.anam-wahl { display: flex; gap: 10px; }
.anam-wahl-knopf {
    flex: 0 0 auto;
    min-width: 88px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 18px;
    border: 1.5px solid var(--apple-border-strong);
    border-radius: 12px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--apple-text-secondary);
    cursor: pointer;
    user-select: none;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.anam-wahl-knopf input { position: absolute; opacity: 0; pointer-events: none; }
.anam-wahl-knopf:hover { border-color: var(--apple-blue); }
.anam-wahl-knopf:has(input:checked) {
    border-color: var(--apple-blue);
    background: var(--apple-blue-muted);
    color: var(--apple-blue);
}
/* Fallback fuer Browser ohne :has() — dann bleibt der Rahmen sichtbar,
   statt dass die Auswahl gar nicht erkennbar waere. */
.anam-wahl-knopf input:focus-visible + span { text-decoration: underline; }

.anam-detail { margin-top: 10px; }
.anam-detail[hidden] { display: none; }

.anam-antwort {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    margin: 0;
}
.anam-antwort-wert {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--apple-text);
}
.anam-antwort-detail {
    flex: 1 1 100%;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--apple-text-secondary);
}

.anam-einwilligung {
    margin-top: 32px;
    padding-top: 22px;
    border-top: 1px solid var(--apple-border);
}
.anam-einwilligung p {
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--apple-text-secondary);
    margin: 0 0 11px;
}
.anam-einwilligung-haken {
    margin-top: 16px;
    font-weight: 600;
    color: var(--apple-text);
}
.anam-einwilligung-erteilt {
    margin-top: 14px !important;
    font-size: 14px !important;
    font-weight: 600;
    color: var(--apple-text) !important;
}

@media (max-width: 480px) {
    .anam-wahl-knopf { flex: 1 1 0; min-width: 0; }
}

@media print {
    .anam-auffaellig {
        background: #fff !important;
        border: 1.5px solid #000;
        border-left-width: 4px;
    }
    .anam-auffaellig h2,
    .anam-auffaellig-frage,
    .anam-auffaellig-wert,
    .anam-antwort-wert,
    .anam-frage-text { color: #000 !important; }
    .anam-auffaellig-detail,
    .anam-antwort-detail,
    .anam-einwilligung p,
    .anam-gruppe-titel { color: #333 !important; }
    .anam-keine-auffaelligkeiten {
        background: #fff !important;
        color: #000 !important;
        border: 1px solid #000;
    }
    .anam-frage-wichtig { border-left-color: #000; }
    .anam-frage,
    .anam-auffaellig,
    .anam-einwilligung { break-inside: avoid; page-break-inside: avoid; }
}

/* --- Datenschutzblock auf Dokumenten --- */

.ds-block {
    margin-top: 30px;
    padding-top: 22px;
    border-top: 1px solid var(--apple-border);
}
.ds-block p {
    font-size: 13px;
    line-height: 1.62;
    color: var(--apple-text-secondary);
    margin: 0 0 10px;
}
.ds-optionen {
    margin-top: 18px;
    padding: 16px 18px;
    border-radius: 12px;
    background: var(--apple-bg-tertiary);
}
.ds-optionen-kopf {
    margin: 0 0 12px !important;
    font-size: 12.5px !important;
    font-weight: 700;
    color: var(--apple-text) !important;
}
.ds-option { margin-bottom: 12px; font-size: 13.5px; }
.ds-option:last-child { margin-bottom: 0; }
.ds-option span { color: var(--apple-text-secondary); }
.ds-option strong { color: var(--apple-text); }
.ds-option-fertig {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0 0 8px !important;
    font-size: 13.5px !important;
}
.ds-option-marke { flex: 0 0 auto; width: 16px; font-weight: 700; }
.ds-option-ja   { color: var(--apple-green); }
.ds-option-nein { color: var(--apple-text-tertiary); }

/* ==========================================================================
   Druckbild für Kundendokumente
   --------------------------------------------------------------------------
   Auf Papier ist das kein Bildschirmauszug, sondern ein Formular. Deshalb
   nicht bloß Farben entfernen, sondern die Hierarchie neu setzen: Serifen für
   die Überschriften, echte Linien statt Flächen, Angaben in einer Tabelle mit
   Rahmen, Unterschriftslinien in Tinte.

   Grundgröße 10,5pt — auf Papier liest sich das ruhiger als die 14,5px vom
   Bildschirm, und ein Bogen mit 18 Fragen bleibt auf zwei Seiten.
   ========================================================================== */
@media print {
    .einv-dokument-body {
        font-size: 10.5pt;
        line-height: 1.45;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Briefkopf */
    .einv-blatt-kopf {
        align-items: flex-end;
        padding-bottom: 6pt;
        border-bottom: 1.5pt solid #000;
        margin-bottom: 0;
    }
    .einv-betrieb {
        font-family: var(--bl-serif), Georgia, serif;
        font-size: 13pt;
        letter-spacing: 0.01em;
    }
    .einv-betrieb-adresse { font-size: 8pt; line-height: 1.4; }

    .einv-blatt-titel {
        font-family: var(--bl-serif), Georgia, serif;
        font-size: 17pt;
        font-weight: 600;
        margin: 14pt 0 12pt;
    }

    /* Angaben zur Person: gerahmter Block, nicht vier lose Spalten */
    .einv-daten {
        gap: 0;
        margin: 0 0 16pt;
        border: 0.75pt solid #000;
    }
    .einv-daten > div {
        padding: 5pt 8pt;
        border-right: 0.75pt solid #999;
        border-bottom: 0.75pt solid #999;
    }
    .einv-daten > div:nth-child(2n) { border-right: 0; }
    .einv-daten > div:nth-last-child(-n+2) { border-bottom: 0; }
    .einv-daten dt {
        font-size: 6.5pt;
        letter-spacing: 0.09em;
        margin-bottom: 1pt;
    }
    .einv-daten dd { font-size: 10.5pt; }
    .einv-alter { font-size: 8.5pt; }

    /* Fließtext */
    .einv-aufklaerung p {
        font-size: 9.8pt;
        line-height: 1.5;
        margin: 0 0 7pt;
        text-align: justify;
        hyphens: auto;
    }

    /* Abschnittsüberschriften bekommen eine Linie statt einer Fläche */
    .anam-gruppe-titel,
    .einv-haken {
        border-top: 0;
    }
    .anam-gruppe-titel {
        font-size: 7.5pt;
        letter-spacing: 0.12em;
        border-bottom: 0.75pt solid #000;
        padding-bottom: 3pt;
        margin-top: 14pt;
    }
    .anam-gruppe { margin-top: 0; }

    .einv-haken {
        margin-top: 14pt;
        padding-top: 10pt;
        border-top: 0.75pt solid #000;
    }
    .einv-haken li { margin-bottom: 5pt; }
    .einv-haken-fertig { font-size: 9.8pt; gap: 7pt; }
    .einv-haken-zeichen { width: 12pt; }

    /* Fragen und Antworten dicht, mit Haarlinie */
    .anam-frage {
        padding: 4.5pt 0;
        border-bottom: 0.4pt solid #bbb;
    }
    .anam-frage-text { font-size: 9.8pt; margin: 0 0 1.5pt; }
    .anam-antwort-wert { font-size: 9.8pt; }
    .anam-antwort-detail { font-size: 9pt; }
    .anam-frage-wichtig {
        margin-left: 0;
        padding-left: 6pt;
        border-left: 2.5pt solid #000;
    }

    .anam-auffaellig {
        padding: 8pt 10pt;
        margin-bottom: 14pt;
        border-radius: 0;
        border: 0.75pt solid #000;
        border-left-width: 3pt;
    }
    .anam-auffaellig h2 { font-size: 10.5pt; margin-bottom: 6pt; }
    .anam-auffaellig h2 svg { color: #000 !important; }
    .anam-auffaellig li { border-top-color: #999; }
    .anam-auffaellig li { padding: 3.5pt 0; font-size: 9.8pt; }
    .anam-keine-auffaelligkeiten { padding: 6pt 10pt; font-size: 9.8pt; margin-bottom: 14pt; }

    /* Einwilligungen und Datenschutz: kleiner Satz, aber lesbar */
    .anam-einwilligung,
    .ds-block {
        margin-top: 14pt;
        padding-top: 9pt;
        border-top: 0.75pt solid #000;
    }
    .anam-einwilligung p,
    .ds-block p {
        font-size: 8.2pt;
        line-height: 1.45;
        margin: 0 0 5pt;
        text-align: justify;
        color: #222 !important;
    }
    .ds-optionen {
        background: #fff !important;
        border: 0.75pt solid #666;
        border-radius: 0;
        padding: 7pt 9pt;
        margin-top: 8pt;
    }
    .ds-optionen-kopf { font-size: 8.2pt !important; color: #000 !important; }
    .ds-option-fertig { font-size: 8.6pt !important; margin-bottom: 3pt !important; color: #000; }
    .ds-option-marke { color: #000 !important; }
    .anam-einwilligung-erteilt { font-size: 9pt !important; color: #000 !important; }

    /* Unterschriften: echte Tintenlinien, nicht graue Striche */
    .einv-signaturen {
        margin-top: 20pt;
        padding-top: 0;
        border-top: 0;
        gap: 24pt;
    }
    .einv-signatur-bild { height: 60pt; padding-bottom: 2pt; }
    .einv-signatur-linie {
        border-top: 0.75pt solid #000;
        padding-top: 3pt;
        font-size: 9.5pt;
    }
    .einv-signatur-rolle { font-size: 7.5pt; }

    .einv-blatt-fuss {
        margin-top: 16pt;
        padding-top: 5pt;
        border-top: 0.4pt solid #999;
        font-size: 7.5pt;
    }

    .einv-badge-widerrufen {
        border: 1pt solid #000;
        background: #fff !important;
        color: #000 !important;
        border-radius: 0;
        padding: 2pt 6pt;
    }

    /* Was zusammengehört, bleibt zusammen */
    .einv-blatt-kopf,
    .einv-daten,
    .anam-gruppe-titel { break-after: avoid; page-break-after: avoid; }

    @page { margin: 16mm 15mm 14mm; }
}

/* --- Team und Doppelbuchung (Business-Variante) --- */

.tm-person {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    color: #fff;
    background: var(--tm-person-farbe, var(--apple-blue));
    vertical-align: 2px;
}

.tm-konflikt {
    background: var(--apple-orange-muted, rgba(224,138,74,0.12));
    border-left: 3px solid var(--apple-orange, #e08a4a);
}
.tm-konflikt h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 700;
    color: var(--apple-text);
}
.tm-konflikt h3 svg { color: var(--apple-orange, #b26a00); }
.tm-konflikt ul { list-style: none; margin: 0 0 10px; padding: 0; }
.tm-konflikt li {
    padding: 5px 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--apple-text);
    border-top: 1px solid rgba(0,0,0,0.06);
}
.tm-konflikt li:first-child { border-top: 0; }
.tm-konflikt p { margin: 0; font-size: 13px; color: var(--apple-text-secondary); }

.tm-team { padding: 0; }
.tm-team > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 700;
    color: var(--apple-text);
    list-style: none;
}
.tm-team > summary::-webkit-details-marker { display: none; }
.tm-team > summary::after {
    content: '';
    width: 8px; height: 8px;
    border-right: 2px solid var(--apple-text-tertiary);
    border-bottom: 2px solid var(--apple-text-tertiary);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    margin-left: auto;
}
.tm-team[open] > summary::after { transform: rotate(-135deg); }
.tm-team-anzahl { font-size: 13px; font-weight: 600; color: var(--apple-text-tertiary); }
.tm-team-inhalt { padding: 0 20px 20px; }

.tm-team-liste { list-style: none; margin: 14px 0 8px; padding: 0; }
.tm-team-liste li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-top: 1px solid var(--apple-border);
}
.tm-team-punkt { flex: 0 0 auto; width: 11px; height: 11px; border-radius: 50%; }
.tm-team-name { font-size: 14.5px; font-weight: 600; color: var(--apple-text); }
.tm-team-still { opacity: 0.55; }
.tm-team-marke {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--apple-bg-tertiary);
    font-size: 11px;
    font-weight: 700;
    color: var(--apple-text-secondary);
}
.tm-team-liste form { margin-left: auto; }
.tm-team-hinweis { margin: 4px 0 0; font-size: 12.5px; color: var(--apple-text-tertiary); }

.tm-team-neu {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--apple-border);
}
.tm-team-neu input[type="text"] { flex: 1 1 180px; }
.tm-team-neu select { flex: 0 0 130px; }

@media (max-width: 520px) {
    .tm-team-neu input[type="text"],
    .tm-team-neu select { flex: 1 1 100%; }
}

/* --- Aus einem Termin heraus weiterarbeiten --- */

.tm-weiter {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}
.tm-weiter-knopf {
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid var(--apple-border-strong);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--apple-text-secondary);
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.tm-weiter-knopf:hover {
    border-color: var(--apple-blue);
    color: var(--apple-blue);
    background: var(--apple-blue-muted);
}

.einv-aus-termin {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--apple-blue-muted);
}
.einv-aus-termin svg { flex: 0 0 auto; margin-top: 1px; color: var(--apple-blue); }
.einv-aus-termin p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--apple-text); }

/* --- Dokumente in der Kundenkartei --- */

.kd-dokumente {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 6px;
}
.kd-dok {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
}
.kd-dok-ja {
    background: var(--apple-green-muted);
    color: var(--apple-green);
}
.kd-dok-ja:hover { text-decoration: underline; }
.kd-dok-ja span { font-weight: 600; opacity: 0.8; }
.kd-dok-nein {
    background: var(--apple-bg-tertiary);
    color: var(--apple-text-tertiary);
    font-weight: 600;
}

/* --- Quittung --- */

.bl-karte .einv-h2 { margin-bottom: 10px; }
.bl-meldung { margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; font-size: 13.5px; font-weight: 600; }
.bl-meldung-ok  { background: var(--apple-green-muted); color: var(--apple-green); }
.bl-meldung-weg { background: var(--apple-red-muted);   color: var(--apple-red); }

.bl-nummer { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--apple-text); }
.bl-storniert {
    margin-left: 8px; padding: 2px 9px; border-radius: 999px;
    background: var(--apple-red-muted); color: var(--apple-red);
    font-size: 11.5px; font-weight: 700;
}
.bl-link { margin-bottom: 10px; }
.bl-link input { font-size: 12.5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.bl-wege { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.bl-fussnote { margin: 0 0 16px; font-size: 12.5px; line-height: 1.5; color: var(--apple-text-tertiary); }
.bl-mail { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.bl-mail input { flex: 1 1 220px; }

/* Belegblatt */
.bl-posten { width: 100%; border-collapse: collapse; margin: 4px 0 18px; }
.bl-posten th, .bl-posten td { padding: 9px 0; font-size: 14.5px; text-align: left; }
.bl-posten thead th {
    font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--apple-text-tertiary); border-bottom: 1px solid var(--apple-border);
}
.bl-posten tbody td { border-bottom: 1px solid var(--apple-border); color: var(--apple-text); }
.bl-posten tfoot td { color: var(--apple-text-secondary); font-size: 13.5px; }
.bl-posten tfoot .bl-summe td {
    border-top: 1.5px solid var(--apple-text);
    padding-top: 11px; font-size: 16px; font-weight: 700; color: var(--apple-text);
}
.bl-rechts { text-align: right !important; white-space: nowrap; }
.bl-hinweis { margin: 0 0 14px; font-size: 13px; line-height: 1.55; color: var(--apple-text-secondary); }
.bl-dank { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--apple-text); }

@media print {
    .bl-posten th, .bl-posten td { font-size: 10.5pt; padding: 5pt 0; }
    .bl-posten thead th { font-size: 7pt; border-bottom-color: #000; }
    .bl-posten tbody td { border-bottom-color: #999; color: #000 !important; }
    .bl-posten tfoot td { color: #333 !important; font-size: 9.8pt; }
    .bl-posten tfoot .bl-summe td { border-top-color: #000; font-size: 12pt; color: #000 !important; }
    .bl-hinweis, .bl-dank { color: #000 !important; font-size: 9.8pt; }
    .bl-posten { break-inside: avoid; page-break-inside: avoid; }
}

/* --- Dashboard der Business-Variante --- */

.db-fehlt {
    background: var(--apple-orange-muted, rgba(224,138,74,0.12));
    border-left: 3px solid var(--apple-orange, #e08a4a);
}
.db-fehlt h2 {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--apple-text);
}
.db-fehlt h2 svg { color: var(--apple-orange, #b26a00); }
.db-fehlt-vor { margin: 0 0 10px; font-size: 13.5px; color: var(--apple-text-secondary); }
.db-fehlt ul { list-style: none; margin: 0 0 10px; padding: 0; }
.db-fehlt li {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    padding: 7px 0; border-top: 1px solid rgba(0,0,0,0.06);
}
.db-fehlt li:first-child { border-top: 0; }
.db-fehlt-zeit { font-size: 13px; font-weight: 700; color: var(--apple-text); min-width: 44px; }
.db-fehlt-name { font-size: 14px; font-weight: 600; color: var(--apple-text); }
.db-fehlt-marke {
    padding: 3px 10px; border-radius: 999px;
    background: var(--apple-bg-secondary); border: 1px solid var(--apple-border-strong);
    font-size: 11.5px; font-weight: 700; color: var(--apple-text-secondary); text-decoration: none;
}
.db-fehlt-marke:hover { border-color: var(--apple-blue); color: var(--apple-blue); }
.db-fehlt-nach { margin: 0; font-size: 12.5px; color: var(--apple-text-tertiary); }

.db-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.db-zahl {
    display: flex; flex-direction: column; gap: 2px;
    padding: 16px 18px; text-decoration: none;
}
.db-zahl-titel { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--apple-text-tertiary); }
.db-zahl strong { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--apple-text); }
.db-zahl-fuss { font-size: 12px; color: var(--apple-text-secondary); }
.db-zahl-offen strong { color: var(--apple-orange, #b26a00); }

.db-tage-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.db-tage-kopf h2 { margin: 0; font-size: 15px; font-weight: 700; color: var(--apple-text); }
.db-tage-link { font-size: 13px; font-weight: 600; color: var(--apple-blue); text-decoration: none; }
.db-tage-link:hover { text-decoration: underline; }
.db-tag { margin-top: 14px; }
.db-tag h3 {
    margin: 0 0 6px; font-size: 11.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em; color: var(--apple-text-tertiary);
}
.db-tag h3 span { margin-left: 6px; opacity: 0.7; }
.db-tag-leer { margin: 0; font-size: 13.5px; color: var(--apple-text-tertiary); }
.db-tag-liste { list-style: none; margin: 0; padding: 0; }
.db-tag-liste li {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    padding: 8px 0; border-top: 1px solid var(--apple-border);
}
.db-tag-liste li:first-child { border-top: 0; }
.db-tag-zeit { font-size: 14px; font-weight: 700; color: var(--apple-text); min-width: 46px; }
.db-tag-name { font-size: 14px; font-weight: 600; color: var(--apple-text); }
.db-tag-leistung { flex: 1 1 100%; font-size: 13px; color: var(--apple-text-secondary); padding-left: 54px; }

@media (max-width: 520px) {
    .db-tag-leistung { padding-left: 0; }
}
.db-tage-rechts { display: inline-flex; align-items: baseline; gap: 14px; }
.db-tage-offen {
    font-size: 12.5px; font-weight: 700; text-decoration: none;
    color: var(--apple-orange, #b26a00);
}
.db-tage-offen:hover { text-decoration: underline; }

/* --- Pakete und Preise (Business-Startseite) --- */

.bp-preise { max-width: 1180px; margin: 0 auto; padding: 0 24px 96px; }
.bp-kopf { text-align: center; margin-bottom: 44px; }
.bp-kopf h2 {
    font-family: var(--bl-serif), Georgia, serif;
    font-size: clamp(26px, 3.4vw, 34px);
    font-weight: 600; letter-spacing: -0.02em;
    margin: 0 0 10px; color: var(--apple-text);
}
.bp-kopf p { max-width: 660px; margin: 0 auto; font-size: 15px; line-height: 1.6; color: var(--apple-text-secondary); }

.bp-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; align-items: stretch; padding-top: 12px; }
/* overflow sichtbar, sonst schneidet die Karte die Marke oben ab */
.bp-karte { display: flex; flex-direction: column; padding: 26px 24px; position: relative; overflow: visible; }
.bp-karte-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.bp-karte-kopf h3 { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--apple-text-secondary); }
.bp-hervor { color: var(--apple-blue) !important; }

.bp-marke { padding: 2px 9px; border-radius: 999px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.bp-marke-gruen { background: var(--apple-green-muted); color: var(--apple-green); }
.bp-marke-lila  { background: rgba(122, 90, 168, 0.14); color: #7a5aa8; }

.bp-preis {
    margin: 0 0 18px; padding-bottom: 18px;
    border-bottom: 1px solid var(--apple-border);
    font-size: 27px; font-weight: 700; letter-spacing: -0.02em; color: var(--apple-text);
}
.bp-preis span { font-size: 14px; font-weight: 400; color: var(--apple-text-tertiary); }
.bp-sparen { margin: -8px 0 16px; font-size: 12.5px; line-height: 1.5; color: var(--apple-green); }

.bp-karte ul { list-style: none; margin: 0 0 26px; padding: 0; flex: 1; }
.bp-karte li {
    position: relative; padding-left: 24px; margin-bottom: 11px;
    font-size: 13px; line-height: 1.5; color: var(--apple-text-secondary);
}
.bp-karte li strong { color: var(--apple-text); }
.bp-karte li.ja::before   { content: '✓'; position: absolute; left: 0; top: -1px; font-weight: 700; color: var(--apple-green); }
.bp-karte li.nein::before { content: '✕'; position: absolute; left: 0; top: -1px; font-weight: 700; color: var(--apple-text-tertiary); }
.bp-karte li.nein { color: var(--apple-text-tertiary); }

.bp-knopf {
    display: block; margin-top: auto; padding: 13px 18px;
    border-radius: var(--bl-pille, 999px);
    background: var(--apple-bg-tertiary); color: var(--apple-text);
    font-size: 14px; font-weight: 600; text-align: center; text-decoration: none;
    transition: filter 0.18s ease, transform 0.16s ease;
}
.bp-knopf:hover { filter: brightness(0.96); }
.bp-knopf:active { transform: translateY(1px); }
.bp-knopf-gruen { background: var(--apple-green-muted); color: var(--apple-green); }
.bp-knopf-voll {
    background: linear-gradient(135deg, var(--apple-blue) 0%, #2f8aa8 100%);
    color: #fff;
    box-shadow: 0 4px 14px -4px rgba(27, 95, 125, 0.5);
}

.bp-karte-beste { border-color: var(--apple-blue); border-width: 2px; }
.bp-beste {
    position: absolute; top: -11px; z-index: 2; left: 50%; transform: translateX(-50%);
    padding: 4px 13px; border-radius: 999px;
    background: var(--apple-blue); color: #fff;
    font-size: 11px; font-weight: 600; white-space: nowrap;
}

.bp-fuss {
    max-width: 760px; margin: 34px auto 0;
    padding: 16px 20px; border-radius: 14px;
    background: var(--apple-bg-tertiary);
    font-size: 13px; line-height: 1.6; color: var(--apple-text-secondary); text-align: center;
}
.bp-fuss strong { color: var(--apple-text); }

@media (max-width: 640px) {
    .bp-preise { padding: 0 16px 64px; }
    .bp-karte { padding: 22px 20px; }
}

/* ---------------------------------------------------------------------------
   Streifenmotiv in 3D (assets/js/motiv3d.js)

   Die Flaeche liegt hinter dem Inhalt und faengt keine Klicks. Sie startet
   unsichtbar: Erst wenn wirklich ein Bild steht, setzt das Modul .ist-da und
   zieht im Gegenzug das flache SVG zurueck. Laedt das Modul nie, passiert
   nichts — die Seite sieht aus wie vorher.
   --------------------------------------------------------------------------- */
.motiv3d {
  position: absolute;
  top: 0;
  right: 0;
  width: min(62%, 780px);
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
  /* Nach links auslaufen lassen. Das Motiv sitzt rechts, der Text steht links
     bzw. mittig — ohne diese Blende laufen die Balken durch die Ueberschrift
     und fressen den Kontrast. So bleibt rechts die volle Plastizitaet und
     ueber dem Text steht nichts mehr. */
  -webkit-mask-image: linear-gradient(to left, #000 58%, rgba(0,0,0,0) 97%);
  mask-image: linear-gradient(to left, #000 58%, rgba(0,0,0,0) 97%);
}
.motiv3d.ist-da { opacity: 1; }
.motiv3d > canvas { display: block; width: 100%; height: 100%; }

/* Das flache Motiv weicht erst, wenn die Szene steht. */
[data-motiv-flach] { transition: opacity 0.9s ease; }
[data-motiv-flach].motiv-abgeloest { opacity: 0 !important; }

/* Auswahlseite: Der Inhalt steht mittig, also darf das Motiv nicht durch die
   Mitte laufen. Es sitzt wie das flache Vorbild in der oberen rechten Ecke und
   haengt bewusst ueber den Rand hinaus. */
.vw-seite .motiv3d {
  top: -110px;
  right: -175px;
  width: min(860px, 76vw);
  height: 860px;
}
/* Kraeftiger als im Hero: Hier liegt Rosé auf rosé getoentem Grund, unter 0,8
   loest sich das Motiv im Hintergrund auf. */
.vw-seite .motiv3d.ist-da { opacity: 0.8; }

@media (max-width: 900px) {
  /* Einspaltig liegt der Fließtext direkt ueber dem Motiv. Hier gewinnt die
     Lesbarkeit: nur noch eine Andeutung von Struktur im Hintergrund. */
  .motiv3d { width: 100%; }
  .motiv3d.ist-da { opacity: 0.3; }
  .vw-seite .motiv3d.ist-da { opacity: 0.26; }
  .vw-seite .motiv3d { top: -60px; right: -120px; }
}

@media (prefers-reduced-motion: reduce) {
  .motiv3d, [data-motiv-flach] { transition: none; }
}

/* ---------------------------------------------------------------------------
   Raum in der rechten Hero-Haelfte (includes/partials/hero_raum.php)

   Der Beleg liegt nicht mehr flach auf der Seite, sondern als vorderstes Blatt
   eines Stapels von Monatsabschluessen. Fluchtpunkt sitzt auf .lp-hero-inner,
   damit Blatt und Streifenmotiv denselben Raum teilen.

   Die Grundstellung steht im CSS, nicht im Skript: Ohne Maus, ohne JavaScript
   und bei reduzierter Bewegung sieht der Stapel genauso aus, nur unbewegt.
   --------------------------------------------------------------------------- */
.lp-hero-inner {
  perspective: 1500px;
  perspective-origin: 72% 42%;
}

.lp-beleg {
  transform-style: preserve-3d;
  transform: rotateY(var(--beleg-y, -7deg)) rotateX(var(--beleg-x, 3deg));
}
.lp-beleg-lebt {
  /* Nur wenn das Skript wirklich uebernimmt. Sonst wuerde bei jedem
     Themenwechsel eine Uebergangsanimation ohne Anlass laufen. */
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* Die beiden Blaetter darunter: die Monate davor. Bewusst nur zwei — mehr
   sieht nach Aktenberg aus, und darum geht es hier gerade nicht. */
.lp-beleg::before,
.lp-beleg::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 26px;
  border-radius: 18px;
  background: var(--apple-bg-secondary);
  /* Eigener Schatten statt Rahmen: Ein Rahmen macht aus dem Blatt eine Karte,
     der Schatten macht daraus Papier, das darunter liegt. --apple-bg-secondary
     allein ist vom Seitengrund kaum zu unterscheiden. */
  box-shadow: 0 16px 38px -20px rgba(120, 70, 95, 0.5);
  pointer-events: none;
}
.lp-beleg::before {
  transform: translateZ(-34px) translate(18px, 14px) rotate(3.6deg);
  opacity: 0.92;
}
.lp-beleg::after {
  transform: translateZ(-66px) translate(34px, 27px) rotate(5.8deg);
  opacity: 0.7;
}

/* Das eigentliche Blatt gehoert vor den Stapel und wirft dessen Schatten. */
.lp-beleg-papier,
.lp-beleg-riss {
  position: relative;
  z-index: 1;
}
.lp-beleg-papier {
  box-shadow:
    0 2px 4px rgba(120, 70, 95, 0.05),
    var(--beleg-schatten-x, 0px) var(--beleg-schatten-y, 18px) 54px -20px rgba(120, 70, 95, 0.45);
}

@media (max-width: 900px) {
  /* Einspaltig steht der Beleg unter dem Text und wird schmal. Der Stapel
     wuerde dann seitlich herausragen, statt Tiefe zu zeigen. */
  .lp-hero-inner { perspective: none; }
  .lp-beleg { transform: none; }
  .lp-beleg::before,
  .lp-beleg::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-beleg-lebt { transition: none; }
}

/* ---------------------------------------------------------------------------
   Kassenzettel als Fahrbahn im Hero (assets/js/strasse3d.js)

   Breit liegt die Bahn als Schicht ueber dem ganzen Hero; nach rechts geschoben
   wird sie im Modul ueber den Bildausschnitt der Kamera, nicht hier. Der Text
   steht darueber (.lp-hero-inner hat z-index 1).

   Schmal gibt es keine freie Haelfte mehr - dort wird der Hero zur Spalte und
   die Bahn rueckt unter den Text.
   --------------------------------------------------------------------------- */
.hero-bahn {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero-bahn.ist-da { opacity: 1; }
.hero-bahn > canvas { display: block; width: 100%; height: 100%; }

/* Das weiche Auslaufen nach unten macht der Shader, nicht eine Maske hier.
   Safari legt ein maskiertes Element mit WebGL-Canvas auf eine eigene Ebene
   und unterlegt sie weiss - auf dem iPhone stand im dunklen Thema ein weisser
   Kasten um die Bahn. */

/* Breit braucht der Hero unten mehr Luft: Dort liegt die Bahn als Schicht
   ueber ihm, ihr vorderes Ende sitzt genau da, wo bisher das Polster war, und
   die naechste Ueberschrift stand ohne Abstand dagegen. Schmal gilt das nicht -
   dort steht die Bahn als eigener Block in der Spalte und bringt ihren Abstand
   selbst mit; zusaetzliches Polster waere nur eine leere Flaeche. */
@media (min-width: 981px) {
  .lp-hero.hat-bahn { padding-bottom: 176px; }
  .lp-hero.hat-bahn + section { padding-top: 28px; }
}

/* Der Beleg ist der Rueckfall. Er weicht erst, wenn die Bahn wirklich laeuft,
   und bleibt breit als leerer Platzhalter stehen, damit der Hero seine Hoehe
   behaelt. */
.lp-beleg { transition: opacity 0.8s ease; }
.lp-beleg.bahn-abgeloest { opacity: 0; }

/* Ohne Bahn traegt das flache Streifenmotiv den Hero allein und bleibt, wie es
   war. Laeuft die Bahn, liegt es an derselben Stelle und wird zur Stoerung -
   dann nur noch eine Andeutung. */
.lp-hero .lp-hero-motiv { transition: opacity 0.9s ease; }
.lp-hero.hat-bahn .lp-hero-motiv { opacity: 0.16; }

@media (max-width: 980px) {
  .lp-hero { display: flex; flex-direction: column; }
  .lp-hero-inner { order: 1; }
  .hero-bahn {
    order: 2;
    position: relative;
    inset: auto;
    width: 100%;
    /* Nur so hoch, wie die Bahn wirklich fuellt. Vorher blieb ueber ihr ein
       breiter leerer Streifen stehen, weil der Kasten hoeher war als das Bild
       darin. */
    height: 46vh;
    min-height: 310px;
    max-height: 440px;
    margin-top: 2px;
  }
  /* Schmal traegt die Bahn ihre Hoehe selbst - ein unsichtbarer Beleg wuerde
     nur eine Luecke darueber lassen. */
  .lp-beleg.bahn-abgeloest { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bahn, .lp-beleg { transition: none; }
}