/* =============================================================================
 * paperwork Treuhand – Theme "Modern Light Premium"
 *
 * Markenoberflaeche: --site-* werden vom Admin (DB) ueberschrieben.
 * Defaults hier sind die Logo-Farben (Pink -> Coral) auf warmem Hellweiss.
 *
 * Alle abgeleiteten Variablen (--bg-*, --shadow-*, --chrome-*, --hero-*, ...)
 * sind auf LIGHT optimiert: weisse/helle Hintergruende, dezente Schatten,
 * Insets aus weichem Schwarz statt aus Weiss.
 * ========================================================================== */

:root {
  /* ---------- Brand: vom Admin ueberschreibbar ---------- */
  --site-accent-primary: #d05f72;
  --site-accent-secondary: #de8b56;
  --site-accent-primary-hover: #db7a8e;
  --site-accent-secondary-hover: #e89f72;

  --site-bg-page: #ebe0d3;
  --site-bg-header: #f3e9dd;
  --site-bg-footer: #ddd0c1;
  --site-bg-section-1: #faf3ea;
  --site-bg-section-2: #e8d5c1;

  --site-text: #2e1e26;
  --site-text-heading: #15090d;

  --site-hero-image: url('/assets/images/hero-desk-planning.jpg');

  --site-bg-page-display: linear-gradient(180deg, var(--site-bg-page) 0%, var(--site-bg-page) 100%);
  --site-bg-header-display: linear-gradient(180deg, var(--site-bg-header) 0%, var(--site-bg-header) 100%);
  --site-bg-section-1-display: linear-gradient(180deg, var(--site-bg-section-1) 0%, var(--site-bg-section-1) 100%);
  --site-bg-section-2-accent-base: none;

  --bg-section-1: var(--site-bg-section-1);
  --bg-section-2: var(--site-bg-section-2);
  --bg-elevated: var(--bg-section-1);

  /* ---------- Markenverlauf ---------- */
  --ci-magenta: var(--site-accent-primary);
  --ci-coral: color-mix(in srgb, var(--site-accent-primary) 50%, var(--site-accent-secondary));
  --ci-gold: var(--site-accent-secondary);
  --ci-gradient: linear-gradient(
    105deg,
    var(--site-accent-primary) 0%,
    var(--ci-coral) 52%,
    var(--site-accent-secondary) 100%
  );
  --ci-gradient-soft: linear-gradient(
    105deg,
    color-mix(in srgb, var(--site-accent-primary) 14%, transparent) 0%,
    color-mix(in srgb, var(--ci-coral) 10%, transparent) 50%,
    color-mix(in srgb, var(--site-accent-secondary) 14%, transparent) 100%
  );

  --btn-primary-fill: var(--ci-gradient);
  --selection-bg: color-mix(in srgb, var(--site-accent-primary) 32%, transparent);

  /* ---------- Globales Mesh (html::before / ::after) ---------- */
  --fx-mesh-1: color-mix(in srgb, var(--site-accent-primary) 10%, transparent);
  --fx-mesh-2: color-mix(in srgb, var(--ci-coral) 8%, transparent);
  --fx-mesh-3: color-mix(in srgb, var(--site-accent-secondary) 10%, transparent);
  --fx-sky-gold: color-mix(in srgb, var(--site-accent-secondary) 12%, transparent);
  --fx-sky-opacity: 0.32;

  /* ---------- Basistoken: Hintergruende ---------- */
  --bg-page: var(--site-bg-page);
  --bg-muted: color-mix(in srgb, var(--site-bg-page) 96%, var(--site-accent-primary) 4%);
  --bg-accent: color-mix(in srgb, var(--site-bg-page) 94%, var(--site-accent-secondary) 6%);
  --bg-gradient: linear-gradient(
    135deg,
    var(--site-bg-page) 0%,
    color-mix(in srgb, var(--site-bg-page) 96%, var(--site-accent-primary) 4%) 45%,
    color-mix(in srgb, var(--site-bg-page) 94%, var(--site-accent-secondary) 6%) 100%
  );

  /* ---------- Text ---------- */
  --text-primary: var(--site-text-heading);
  --text-secondary: var(--site-text);
  --text-muted: color-mix(in srgb, var(--site-text) 58%, white);
  --border-subtle: color-mix(in srgb, var(--site-accent-primary) 14%, transparent);

  /* ---------- Schatten: dezent, fuer hellen Untergrund ---------- */
  --shadow-sm: 0 1px 2px rgba(26, 14, 20, 0.06);
  --shadow-md: 0 12px 36px rgba(26, 14, 20, 0.08);
  --shadow-lg: 0 28px 72px rgba(26, 14, 20, 0.12);
  --shadow-glow: 0 0 40px color-mix(in srgb, var(--site-accent-primary) 18%, transparent);

  /* ---------- Header / Glas-Optik ---------- */
  --chrome-header: color-mix(in srgb, var(--site-bg-header) 86%, transparent);
  --chrome-header-scrolled: color-mix(in srgb, var(--site-bg-header) 96%, transparent);
  --chrome-nav-drawer: color-mix(in srgb, var(--site-bg-header) 98%, var(--site-accent-primary) 2%);
  --chrome-text: var(--site-text-heading);
  --chrome-text-muted: color-mix(in srgb, var(--site-text) 72%, white);
  --chrome-line: color-mix(in srgb, var(--site-accent-primary) 14%, transparent);
  --chrome-nav-hover-fg: var(--site-accent-primary-hover);
  --chrome-toggle-border: color-mix(in srgb, var(--site-accent-primary) 18%, transparent);
  --chrome-toggle-bg: color-mix(in srgb, var(--site-accent-primary) 6%, transparent);
  --chrome-bar-line: color-mix(in srgb, var(--site-accent-primary) 10%, transparent);
  --chrome-scrolled-shadow-1: 0 10px 28px rgba(26, 14, 20, 0.06);
  --chrome-scrolled-shadow-2: 0 1px 0 color-mix(in srgb, var(--site-accent-primary) 14%, transparent);
  --chrome-nav-hover-bg: color-mix(in srgb, var(--site-accent-primary) 10%, transparent);
  --chrome-nav-hover-shadow: 0 0 18px color-mix(in srgb, var(--site-accent-primary) 14%, transparent);

  /* ---------- Sektionen (layout.css) ---------- */
  --section-intro-inset: color-mix(in srgb, var(--site-bg-page) 60%, white);
  --section-intro-glow: 0 16px 40px rgba(26, 14, 20, 0.05);
  --section-leistungen-shadow: 0 10px 32px rgba(26, 14, 20, 0.05);
  --section-ueber-border: color-mix(in srgb, var(--site-accent-secondary) 16%, transparent);
  --section-ueber-inset: color-mix(in srgb, white 70%, transparent);
  --section-ueber-fade: color-mix(in srgb, var(--site-bg-section-2) 70%, transparent);
  --section-accent-grad: linear-gradient(
    180deg,
    color-mix(in srgb, var(--site-bg-section-1) 92%, transparent) 0%,
    color-mix(in srgb, var(--site-bg-section-2) 60%, transparent) 52%,
    transparent 100%
  );
  --section-accent-border: color-mix(in srgb, var(--site-accent-secondary) 18%, transparent);
  --section-accent-inset: color-mix(in srgb, white 88%, transparent);
  --kontakt-glow: 0 -6px 28px rgba(26, 14, 20, 0.04);
  --kontakt-fade: color-mix(in srgb, var(--site-bg-page) 65%, transparent);
  --section-intro-bg: color-mix(in srgb, var(--site-bg-section-1) 96%, var(--site-accent-primary) 2%);
  --input-bg: #ffffff;
  --media-frame-inset: color-mix(in srgb, var(--site-accent-secondary) 10%, transparent);
  --map-border-top: color-mix(in srgb, var(--site-accent-secondary) 18%, transparent);
  --map-shadow-1: 0 -10px 36px rgba(26, 14, 20, 0.06);
  --map-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --brand-logo-drop: drop-shadow(0 4px 14px rgba(236, 93, 136, 0.18));

  /* ---------- Hero (helle Karten-Optik) ---------- */
  --hero-overlay-bg: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0.86) 0%,
    rgba(255, 248, 250, 0.52) 42%,
    rgba(255, 250, 252, 0.22) 100%
  );
  --hero-mesh-bg:
    radial-gradient(
      ellipse 90% 70% at 0% 0%,
      color-mix(in srgb, var(--site-accent-primary) 10%, transparent),
      transparent 55%
    ),
    radial-gradient(
      ellipse 60% 50% at 100% 20%,
      color-mix(in srgb, var(--site-accent-secondary) 9%, transparent),
      transparent 50%
    );
  --hero-content-bg: rgba(255, 255, 255, 0.96);
  --hero-content-border: 1px solid color-mix(in srgb, var(--site-accent-primary) 14%, transparent);
  --hero-content-shadow:
    0 22px 56px rgba(26, 14, 20, 0.10),
    0 1px 0 rgba(255, 255, 255, 0.95) inset;

  /* ---------- Footer ---------- */
  --chrome-footer-grad: linear-gradient(
    165deg,
    var(--site-bg-footer) 0%,
    color-mix(in srgb, var(--site-bg-footer) 96%, var(--site-accent-primary) 2%) 55%,
    color-mix(in srgb, var(--site-bg-footer) 92%, var(--site-accent-secondary) 4%) 100%
  );
  --chrome-footer-glow: radial-gradient(
    ellipse 72% 48% at 16% 0%,
    color-mix(in srgb, var(--site-accent-primary) 10%, transparent),
    transparent 58%
  );
  --footer-bg-solid: var(--site-bg-footer);
  --footer-fg: var(--site-text);
  --footer-fg-muted: color-mix(in srgb, var(--site-text) 78%, white);
  --footer-fg-soft: color-mix(in srgb, var(--site-text) 60%, white);
  --footer-heading: var(--site-accent-primary);
  --footer-border: color-mix(in srgb, var(--site-accent-primary) 18%, transparent);
  --footer-link-hover: var(--site-accent-primary-hover);

  /* ---------- Team-Band (heller Pfirsichton) ---------- */
  --team-band-base: color-mix(in srgb, var(--site-bg-section-2) 70%, white);
  --team-glow-a: radial-gradient(
    ellipse 100% 58% at 50% -12%,
    color-mix(in srgb, var(--site-accent-primary) 14%, transparent),
    transparent 58%
  );
  --team-glow-b: radial-gradient(
    circle at 102% 88%,
    color-mix(in srgb, var(--site-accent-secondary) 12%, transparent),
    transparent 46%
  );
  --team-grad: linear-gradient(
    185deg,
    color-mix(in srgb, var(--site-bg-section-2) 90%, white) 0%,
    color-mix(in srgb, var(--site-bg-section-2) 78%, white) 48%,
    color-mix(in srgb, var(--site-bg-section-2) 70%, white) 100%
  );
  --team-fg: var(--site-text-heading);
  --team-h2-color: var(--site-text-heading);
  --team-p-muted: color-mix(in srgb, var(--site-text) 78%, white);
  --team-eyebrow-fg: var(--site-accent-primary);
  --team-eyebrow-border: color-mix(in srgb, var(--site-accent-primary) 32%, transparent);
  --team-eyebrow-bg: color-mix(in srgb, var(--site-bg-section-1) 70%, transparent);
  --team-section-border-top: color-mix(in srgb, var(--site-accent-primary) 14%, transparent);
  --team-section-border-bottom: color-mix(in srgb, var(--site-accent-secondary) 14%, transparent);
  --team-section-inset: color-mix(in srgb, white 70%, transparent);
  --team-section-drop-shadow: 0 14px 40px rgba(26, 14, 20, 0.06);
  --team-noise-opacity: 0.03;
  --team-noise-blend: multiply;
  --team-orb-a: radial-gradient(
    circle,
    color-mix(in srgb, var(--site-accent-primary) 14%, transparent) 0%,
    transparent 70%
  );
  --team-orb-b: radial-gradient(
    circle,
    color-mix(in srgb, var(--site-accent-secondary) 14%, transparent) 0%,
    transparent 70%
  );

  /* ---------- Team-Karten ---------- */
  --tcard-team-front-bg: color-mix(in srgb, var(--site-text-heading) 92%, black);
  --tcard-team-front-shadow: 0 18px 44px rgba(26, 14, 20, 0.18);
  --tcard-team-front-overlay: linear-gradient(
    to top,
    rgba(26, 14, 20, 0.94) 0%,
    rgba(26, 14, 20, 0.55) 40%,
    transparent 65%
  );
  --tcard-team-back-bg: linear-gradient(
    145deg,
    color-mix(in srgb, var(--site-text-heading) 88%, black) 0%,
    color-mix(in srgb, var(--site-text-heading) 82%, var(--site-accent-primary) 4%) 52%,
    color-mix(in srgb, var(--site-text-heading) 94%, black) 100%
  );
  --tcard-team-back-border: color-mix(in srgb, var(--site-accent-primary) 28%, transparent);
  --tcard-team-back-shadow: 0 18px 44px rgba(26, 14, 20, 0.18);
  --tcard-team-back-orb: radial-gradient(
    circle,
    color-mix(in srgb, var(--site-accent-primary) 32%, transparent) 0%,
    transparent 64%
  );
  --tcard-team-back-orb-special: radial-gradient(
    circle,
    color-mix(in srgb, var(--site-accent-secondary) 32%, transparent) 0%,
    transparent 64%
  );
  --tcard-front-fallback: color-mix(in srgb, var(--site-text-heading) 90%, black);
  --tcard-front-overlay: linear-gradient(
    to top,
    rgba(26, 14, 20, 0.92) 0%,
    rgba(26, 14, 20, 0.55) 38%,
    transparent 65%
  );
  --tcard-back-bg: linear-gradient(
    145deg,
    color-mix(in srgb, var(--site-text-heading) 90%, black) 0%,
    color-mix(in srgb, var(--site-text-heading) 84%, var(--site-accent-primary) 4%) 55%,
    color-mix(in srgb, var(--site-text-heading) 94%, black) 100%
  );
  --tcard-back-border: color-mix(in srgb, var(--site-accent-primary) 24%, transparent);
}

#start.hero.hero--cinematic {
  --hero-content-bg: var(--site-bg-scope-start-display, rgba(255, 255, 255, 0.96));
}

.site-header__end {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 2vw, var(--space-md));
  margin-left: auto;
  flex-shrink: 0;
  min-width: 0;
}

@media (min-width: 56rem) {
  .site-header__end {
    gap: var(--space-md);
  }
}