@font-face{font-family:"Poppins";src:url("/assets/fonts/poppins-400.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("/assets/fonts/poppins-500.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("/assets/fonts/poppins-600.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}

/* ==========================================================================
   Franz Beteiligungsholding — Design Tokens
   Colors + Typography
   ========================================================================== */

/* ---------- Fonts ---------- */
/* Weight scale is intentionally limited to 400 / 500 / 600.
   Light (300) is too delicate for this architectural brand; Bold (700) is never
   needed — display headlines rely on case + letter-spacing + scale for weight. */




:root {
  /* -----------------------------------------------------------------
     Brand palette — the five guideline colors
     ----------------------------------------------------------------- */
  --color-cedar:          #36241A;  /* Primary dark. Headlines, logo, backgrounds */
  --color-potters-clay:   #825A46;  /* Warm accent. CTAs, highlights, underlines */
  --color-sandrift:       #A88E6D;  /* Muted tan. Secondary surfaces, imagery tint */
  --color-silver-sand:    #C2C4BC;  /* Cool sage-gray. Dividers, muted surfaces */
  --color-white:          #FFFFFF;  /* Canvas */

  /* -----------------------------------------------------------------
     Extended warm-neutral ramp — derived from Cedar, stays in family
     Use these for body copy, borders, ghosts. Never invent new browns.
     ----------------------------------------------------------------- */
  --cedar-95: #0F0A07;
  --cedar-90: #1C130D;
  --cedar-80: #2A1C13;
  --cedar-70: #36241A;   /* = Cedar */
  --cedar-60: #4E382A;
  --cedar-50: #66503D;
  --cedar-40: #825A46;   /* = Potters Clay */
  --cedar-30: #A88E6D;   /* = Sandrift */
  --cedar-20: #C7B8A1;
  --cedar-10: #E5DDD1;
  --cedar-05: #F3EEE6;
  --cedar-02: #FAF7F2;   /* Warm off-white, paper-like */

  /* -----------------------------------------------------------------
     Semantic foreground / background / stroke
     ----------------------------------------------------------------- */
  --bg:            #FFFFFF;
  --bg-paper:      var(--cedar-02);      /* Warm off-white, preferred canvas */
  --bg-subtle:     var(--cedar-05);
  --bg-dark:       var(--cedar-70);      /* Cedar hero sections */
  --bg-darker:     var(--cedar-90);

  --fg:            var(--cedar-70);      /* Primary text — Cedar, not pure black */
  --fg-muted:      var(--cedar-50);
  --fg-subtle:     var(--cedar-30);
  --fg-inverse:    #FFFFFF;
  --fg-on-dark:    #FFFFFF;
  --fg-on-dark-muted: #C7B8A1;

  --accent:        var(--color-potters-clay);
  --accent-hover:  #6E4A39;
  --accent-press:  #59392C;

  --stroke:        var(--color-silver-sand);
  --stroke-subtle: var(--cedar-10);
  --stroke-strong: var(--cedar-40);

  /* Status (derived so they harmonize with the warm palette) */
  --success:       #5A7A4E;
  --warning:       #B8863D;
  --danger:        #9C3A2E;
  --info:          #4E6879;

  /* -----------------------------------------------------------------
     Spacing — 4px base
     ----------------------------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Radii — understated. Brand is architectural, not playful. */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-pill: 999px;

  /* Shadows — soft, warm-tinted, never harsh black */
  --shadow-xs: 0 1px 2px rgba(54, 36, 26, 0.06);
  --shadow-sm: 0 2px 6px rgba(54, 36, 26, 0.08);
  --shadow-md: 0 8px 24px rgba(54, 36, 26, 0.10);
  --shadow-lg: 0 24px 60px rgba(54, 36, 26, 0.14);

  /* Motion — restrained, never bouncy */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-out:      cubic-bezier(0.0, 0.0, 0.2, 1);
  --dur-fast:   150ms;
  --dur-base:   220ms;
  --dur-slow:   400ms;

  /* -----------------------------------------------------------------
     Typography — Poppins throughout. No serif. No mono.
     ----------------------------------------------------------------- */
  --font-sans:    "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Weight scale — 400 / 500 / 600 only */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;

  /* Size scale — tuned for display-heavy editorial layouts */
  --fs-display-xl: 88px;   /* Hero statements. "INVESTING RESPONSIBLY." */
  --fs-display-lg: 64px;
  --fs-display-md: 48px;
  --fs-h1:         40px;
  --fs-h2:         32px;
  --fs-h3:         24px;
  --fs-h4:         20px;
  --fs-body-lg:    18px;
  --fs-body:       16px;
  --fs-body-sm:    14px;
  --fs-caption:    12px;
  --fs-eyebrow:    11px;   /* ALL-CAPS navigation, section labels */

  /* Line heights */
  --lh-tight:   1.05;
  --lh-display: 1.1;
  --lh-heading: 1.2;
  --lh-body:    1.55;
  --lh-loose:   1.7;

  /* Tracking */
  --ls-display:  -0.02em;
  --ls-heading:  -0.01em;
  --ls-body:      0;
  --ls-eyebrow:  0.18em;     /* Wide, confident caps */
  --ls-button:   0.08em;

  /* -----------------------------------------------------------------
     Layout
     ----------------------------------------------------------------- */
  --container-max: 1240px;
  --container-gutter: 32px;
}

/* ==========================================================================
   Semantic element defaults
   Apply to <body> or a wrapper to get branded defaults.
   ========================================================================== */

.franz-root,
body.franz {
  font-family: var(--font-sans);
  color: var(--fg);
  background: var(--bg-paper);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.franz h1, h1.franz-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-display-md);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--fg);
  margin: 0 0 var(--space-6);
}
.franz h2, h2.franz-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  margin: 0 0 var(--space-5);
}
.franz h3, h3.franz-h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  margin: 0 0 var(--space-4);
}
.franz h4, h4.franz-h4 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  margin: 0 0 var(--space-3);
}
.franz p, p.franz-p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  margin: 0 0 var(--space-4);
  max-width: 68ch;
  text-wrap: pretty;
}
.franz small, .franz-caption {
  font-size: var(--fs-caption);
  color: var(--fg-muted);
  line-height: var(--lh-body);
}

/* ---- Eyebrow: wide-tracked uppercase label, used above headings ---- */
.franz-eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
  display: inline-block;
}

/* ---- Display headline: the signature Franz statement treatment ---- */
.franz-display {
  font-family: var(--font-display);
  font-size: clamp(48px, 7vw, var(--fs-display-xl));
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--fg);
}

/* ---- Numbered counter (0001, 0002 — used on site nav and featured items) */
.franz-counter {
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.12em;
  font-weight: var(--fw-medium);
  color: var(--fg-muted);
}

/* ---- Links ---- */
.franz a, a.franz-link {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid var(--stroke);
  padding-bottom: 1px;
  transition: color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.franz a:hover, a.franz-link:hover {
  color: var(--accent);
  border-color: var(--accent);
}



  html, body { margin: 0; padding: 0; background: var(--bg-paper); scroll-behavior: smooth; }
  * { box-sizing: border-box; }
  button, input, select, textarea { font-family: var(--font-sans); }

  /* Focus */
  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
    outline: 2px solid #825A46; outline-offset: 3px;
  }

  /* Responsive */
  @media (max-width: 960px) {
    .nav-desktop { display: none !important; }
    .nav-burger { display: inline-flex !important; align-items: center; justify-content: center; }
    .grid-1-2 { grid-template-columns: 1fr !important; }
    .grid-3 { grid-template-columns: 1fr !important; }
    .hero-split { grid-template-columns: 1fr !important; min-height: auto !important; }
    .hero-split-image { min-height: 320px; }
    .hero-text-columns { grid-template-columns: 1fr !important; }
    .metrics-strip { grid-template-columns: repeat(2, 1fr) !important; }
    .metric-cell { border-right: none !important; border-bottom: 1px solid var(--stroke); }
    .metric-cell:nth-child(odd) { border-right: 1px solid var(--stroke) !important; }
    .metric-cell:nth-last-child(-n+2) { border-bottom: none; }
    .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
  }
  @media (max-width: 560px) {
    .nav-wordmark { height: 38px !important; }
    .footer-grid { grid-template-columns: 1fr !important; }
    .metrics-strip { grid-template-columns: 1fr !important; }
    .metric-cell { border-right: none !important; border-bottom: 1px solid var(--stroke) !important; }
    .metric-cell:last-child { border-bottom: none !important; }
  }

  @keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

  /* Hide scroll anchor offset for sticky nav */
  section[id] { scroll-margin-top: 80px; }


/* Legal-Modal */
.legal-overlay{position:fixed;inset:0;z-index:100;background:rgba(28,19,13,.6);display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;overflow-y:auto;animation:fadein .25s ease}
.legal-overlay[hidden]{display:none}
.legal-box{background:var(--bg-paper);color:#36241A;max-width:820px;width:100%;padding:clamp(32px,5vw,56px);border-radius:2px;box-shadow:0 24px 60px rgba(54,36,26,.3);position:relative;margin:0 auto}
.legal-close{position:absolute;top:20px;right:20px;width:36px;height:36px;border:1px solid var(--stroke);background:transparent;cursor:pointer;border-radius:2px;font-size:20px;line-height:1;color:#36241A}
.legal-close:hover{background:#36241A;color:#fff}
/* Mobil-Menue */
.nav-mobile-panel{display:none;flex-direction:column;gap:4px;border-top:1px solid var(--stroke);background:var(--bg-paper);padding:16px 24px 28px}
.nav-mobile-panel a{font-size:13px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:#36241A;text-decoration:none;padding:14px 0;border-bottom:1px solid var(--stroke-subtle)}
/* Hover (ersetzt frueheres JS) */
.franz a{transition:color .15s,border-color .15s}