/* ── Local Fonts (DSGVO-konform) ───────────────────────── */
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:300 700; font-display:swap; src:url(fonts/montserrat-latin-normal.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:300 700; font-display:swap; src:url(fonts/montserrat-latin-ext-normal.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Montserrat'; font-style:italic; font-weight:300 700; font-display:swap; src:url(fonts/montserrat-latin-italic.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Montserrat'; font-style:italic; font-weight:300 700; font-display:swap; src:url(fonts/montserrat-latin-ext-italic.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* ── Design Tokens ─────────────────────────────────────── */
:root {
  --color-bg:              #f5f4f0;
  --color-surface:         #f9f8f5;
  --color-surface-2:       #ffffff;
  --color-surface-offset:  #eeece7;
  --color-surface-dynamic: #e4e2dc;
  --color-divider:         #d8d5ce;
  --color-border:          #ccc9c0;
  --color-text:            #1a1815;
  --color-text-muted:      #6b6860;
  --color-text-faint:      #8a877f;
  --color-text-inverse:    #f5f4f0;
  --color-primary:         #0666AE;
  --color-primary-hover:   #055291;
  --color-primary-active:  #044074;
  --color-primary-highlight: #d0e4f0;
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-sm: 0 1px 3px rgba(40,35,25,0.08);
  --shadow-md: 0 4px 16px rgba(40,35,25,0.1);
  --shadow-lg: 0 12px 40px rgba(40,35,25,0.14);
  --font-display: 'Montserrat', 'Helvetica Neue', sans-serif;
  --font-body: 'Montserrat', 'Helvetica Neue', sans-serif;
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1rem,     0.9rem  + 0.6vw,  1.25rem);
  --text-xl:   clamp(1.25rem,  1rem   + 1vw,    1.75rem);
  --text-2xl:  clamp(1.5rem,   1rem   + 2vw,    2.75rem);
  --text-3xl:  clamp(2rem,     0.8rem + 3.5vw,  4rem);
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
  --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem;
  --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem;
  --space-16: 4rem; --space-20: 5rem; --space-24: 6rem;
  --content-narrow: 640px;
  --content-default: 960px;
  --content-wide: 1200px;
}

/* ── Skip Link ──────────────────────────────────────────── */
.skip-link { position: absolute; top: -100%; left: var(--space-4); z-index: 200; background: var(--color-primary); color: #fff; padding: var(--space-3) var(--space-6); border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: 600; text-decoration: none; }
.skip-link:focus { top: var(--space-4); }

/* ── Reset & Base ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: var(--space-20); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body { min-height: 100dvh; font-family: var(--font-body); font-size: var(--text-base); color: var(--color-text); background-color: var(--color-bg); line-height: 1.6; overflow-x: hidden; }
img, picture, video { display: block; max-width: 100%; height: auto; }
button { cursor: pointer; background: none; border: none; font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
p a, main li a, td a, dd a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.nav__links a, .mobile-nav a, .footer__links a, .product-card__btn, .btn, .nav__cta { text-decoration: none; }
p { text-wrap: pretty; }
h1,h2,h3,h4 { text-wrap: balance; line-height: 1.15; }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: var(--radius-sm); }
a, button, [role="button"] { transition: color var(--transition-interactive), background var(--transition-interactive), border-color var(--transition-interactive), box-shadow var(--transition-interactive), opacity var(--transition-interactive); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }
::selection { background: rgba(6,102,174,0.25); color: var(--color-text); }

/* ── Layout ────────────────────────────────────────────── */
.container { max-width: var(--content-wide); margin-inline: auto; padding-inline: clamp(var(--space-4), 5vw, var(--space-12)); }

/* ── Navigation ────────────────────────────────────────── */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(245,244,240,0.85); background: color-mix(in oklch, var(--color-bg) 85%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--color-divider); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 64px; max-width: var(--content-wide); margin-inline: auto; padding-inline: clamp(var(--space-4), 5vw, var(--space-12)); }
.nav__logo { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-lg); font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em; padding-block: 15px; height: 100%; }
.nav__logo img { height: 100%; width: auto; }
.nav__links { display: flex; align-items: center; gap: var(--space-8); list-style: none; }
.nav__links a { font-size: var(--text-sm); color: var(--color-text-muted); }
.nav__links a.active { color: var(--color-primary); }
@media (hover:hover) {
  .nav__links a:hover { color: var(--color-text); }
  .nav__cta:hover { background: var(--color-primary-hover); }
  .hamburger:hover { color: var(--color-text); background: var(--color-surface-offset); }
}
.nav__actions { display: flex; align-items: center; gap: var(--space-3); }
.nav__cta { font-size: var(--text-sm); font-weight: 500; padding: var(--space-3) var(--space-5); border-radius: var(--radius-full); background: var(--color-primary); color: #fff; }
.hamburger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: var(--radius-md); color: var(--color-text-muted); }

/* ── Buttons ───────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; padding: var(--space-3) var(--space-6); border-radius: var(--radius-full); border: none; cursor: pointer; white-space: nowrap; }
.btn--primary { background: var(--color-primary); color: #fff; }
@media (hover:hover) { .btn--primary:hover { background: var(--color-primary-hover); } }

/* ── Section Header ────────────────────────────────────── */
.section-header { margin-bottom: clamp(var(--space-8), 4vw, var(--space-12)); }
.section-header__label { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-primary); margin-bottom: var(--space-3); }
.section-header__title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 400; letter-spacing: -0.02em; line-height: 1.1; color: var(--color-text); margin-bottom: var(--space-4); }
.section-header__desc { font-size: var(--text-base); color: var(--color-text-muted); max-width: 58ch; line-height: 1.7; }

/* ── Page Hero ─────────────────────────────────────────── */
.page-hero { padding-top: calc(64px + clamp(var(--space-12), 8vw, var(--space-24))); padding-bottom: clamp(var(--space-12), 6vw, var(--space-16)); text-align: center; position: relative; overflow: hidden; }
.page-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(6,102,174,0.07) 0%, transparent 70%); pointer-events: none; }
.page-hero__eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-primary); margin-bottom: var(--space-5); justify-content: center; }
.page-hero__eyebrow::before { content: ''; width: 20px; height: 2px; background: currentColor; flex-shrink: 0; }
.page-hero__title { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 400; line-height: 1.08; letter-spacing: -0.02em; color: var(--color-text); margin-bottom: var(--space-6); }
.page-hero__title em { font-style: italic; color: var(--color-primary); }
.page-hero__desc { font-size: var(--text-base); color: var(--color-text-muted); max-width: 58ch; margin-inline: auto; line-height: 1.7; }

/* ── CTA Banner ────────────────────────────────────────── */
.cta-banner { padding-block: clamp(var(--space-12), 6vw, var(--space-20)); background: var(--color-primary); }
.cta-banner__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); flex-wrap: wrap; }
.cta-banner__title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 400; color: #fff; margin-bottom: var(--space-2); }
.cta-banner__desc { font-size: var(--text-base); color: rgba(255,255,255,0.8); max-width: 50ch; }
.cta-banner .btn--primary { background: #fff; color: var(--color-primary); }
@media (hover:hover) { .cta-banner .btn--primary:hover { background: rgba(255,255,255,0.9); } }

/* ── Footer ────────────────────────────────────────────── */
footer { border-top: 1px solid var(--color-divider); padding-block: clamp(var(--space-10), 5vw, var(--space-16)); background: var(--color-surface); }
.footer__about { margin-bottom: var(--space-6); }
.footer__about-title { font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); display: block; margin-bottom: var(--space-2); }
.footer__about-text { font-size: var(--text-xs); color: var(--color-text-faint); max-width: 50ch; line-height: 1.6; }
.footer__divider { height: 1px; background: var(--color-divider); margin-bottom: var(--space-6); }
.footer__inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); }
.footer__copy { font-size: var(--text-xs); color: var(--color-text-faint); }
.footer__social { display: flex; gap: var(--space-2); }
.footer__social a { color: var(--color-text-faint); display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
.footer__links { display: flex; gap: var(--space-2); }
.footer__links a { font-size: var(--text-xs); color: var(--color-text-faint); min-height: 44px; display: inline-flex; align-items: center; padding-inline: var(--space-2); }
@media (hover:hover) {
  .footer__social a:hover { color: var(--color-primary); }
  .footer__links a:hover { color: var(--color-text-muted); }
}

/* ── Mobile menu ───────────────────────────────────────── */
.mobile-nav { display: none; flex-direction: column; gap: var(--space-1); position: fixed; top: 64px; left: 0; right: 0; z-index: 99; background: var(--color-bg); border-bottom: 1px solid var(--color-divider); padding: var(--space-4) clamp(var(--space-4), 5vw, var(--space-12)); }
.mobile-nav.open { display: flex; }
.mobile-nav a { font-size: var(--text-base); color: var(--color-text-muted); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-divider); }
.mobile-nav a:last-child { border-bottom: none; }
@media (hover:hover) { .mobile-nav a:hover { color: var(--color-text); } }
.mobile-nav a.active { color: var(--color-primary); }

/* ── Scroll reveal ─────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1), transform 600ms cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ── Responsive (base) ─────────────────────────────────── */
@media (max-width: 1023px) {
  .nav__links, .nav__cta { display: none; }
  .hamburger { display: flex; }
}
@media (max-width: 767px) {
  .cta-banner__inner { flex-direction: column; text-align: center; }
  .cta-banner__desc { margin-inline: auto; }
}