/* tokens.css — Sarah Will Fitline-Plattform
   Boutique-Pattern (HWB-prefixed mit --sw-*) + Fitline-Brand-Bridge
   Lesson L20: NICHT --gold/--ink/--off ueberschreiben, eigene Prefixe verwenden
*/

/* Self-hosted Fonts (statt Google-CDN, Performance + DSGVO) */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/outfit-400.woff2") format("woff2");
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/outfit-500.woff2") format("woff2");
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/outfit-600.woff2") format("woff2");
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/outfit-700.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-400.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-500.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-500i.woff2") format("woff2");
}

:root {
  /* Brand-Farben */
  --sw-orange: #E87722;          /* Fitline-Brand-Anker */
  --sw-orange-soft: #F4A268;
  --sw-orange-deep: #C25C0E;
  --sw-teal: #4BBFAD;            /* Sarah-Maklerei-Bruecke (dezent) */
  --sw-teal-soft: #7CD2C5;

  /* Neutrals (Boutique-Frame) */
  --sw-ink: #0a0a0a;
  --sw-ink-2: #1a1a1a;
  --sw-ink-soft: rgba(10, 10, 10, .66);
  --sw-ink-faint: rgba(10, 10, 10, .42);
  --sw-ink-decorative: rgba(10, 10, 10, .26);
  --sw-paper: #ffffff;
  --sw-off: #f7f5f2;             /* warmer als HWB-#f5f4f1, mehr Sonne */
  --sw-paper-warm: #fafaf6;
  --sw-line: rgba(10, 10, 10, .10);
  --sw-line-strong: rgba(10, 10, 10, .18);

  /* Akzent-Mischungen */
  --sw-orange-bg: rgba(232, 119, 34, .08);
  --sw-orange-border: rgba(232, 119, 34, .22);
  --sw-teal-bg: rgba(75, 191, 173, .08);

  /* Typografie */
  --sw-font-sans: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --sw-font-serif: "Cormorant Garamond", Georgia, serif;

  /* Fluid Type-Scale */
  --sw-fs-display: clamp(2.75rem, 1.6rem + 4vw, 5rem);
  --sw-fs-h1: clamp(2.25rem, 1.5rem + 2.6vw, 3.75rem);
  --sw-fs-h2: clamp(1.875rem, 1.35rem + 1.8vw, 3rem);
  --sw-fs-h3: clamp(1.375rem, 1.1rem + .9vw, 1.875rem);
  --sw-fs-lead: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  --sw-fs-body: clamp(1rem, .98rem + .1vw, 1.0625rem);
  --sw-fs-small: .9375rem;
  --sw-fs-eyebrow: .71875rem;

  /* Letter-Spacing */
  --sw-ls-display: -.035em;
  --sw-ls-heading: -.025em;
  --sw-ls-body: 0;
  --sw-ls-eyebrow: .24em;

  /* Spacing-Skala (10 Stufen) */
  --sw-s-1: .25rem;
  --sw-s-2: .5rem;
  --sw-s-3: .75rem;
  --sw-s-4: 1rem;
  --sw-s-5: 1.5rem;
  --sw-s-6: 2rem;
  --sw-s-7: 3rem;
  --sw-s-8: 4rem;
  --sw-s-9: 6rem;
  --sw-s-10: 8rem;

  /* Radius */
  --sw-r-sm: 6px;
  --sw-r-md: 10px;
  --sw-r-lg: 14px;
  --sw-r-xl: 18px;
  --sw-r-2xl: 24px;
  --sw-r-pill: 999px;

  /* Schatten */
  --sw-sh-subtle: 0 1px 2px rgba(10,10,10,.04);
  --sw-sh-soft: 0 4px 16px -4px rgba(10,10,10,.08);
  --sw-sh-lifted: 0 12px 32px -8px rgba(10,10,10,.12);
  --sw-sh-deep: 0 30px 80px -40px rgba(10,10,10,.28);
  --sw-sh-orange: 0 10px 24px -8px rgba(232,119,34,.32);

  /* Easings + Durations */
  --sw-ease-spring: cubic-bezier(.22,1,.36,1);
  --sw-ease-out: cubic-bezier(.32,.72,0,1);
  --sw-d-1: 220ms;
  --sw-d-2: 360ms;
  --sw-d-3: 520ms;
  --sw-d-4: 720ms;

  /* Container-Maße */
  --sw-container: 1180px;
  --sw-narrow: 720px;
  --sw-prose: 64ch;
}

/* Reset + Base */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}
body {
  margin: 0;
  font-family: var(--sw-font-sans);
  font-size: var(--sw-fs-body);
  line-height: 1.6;
  color: var(--sw-ink);
  background: var(--sw-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  max-width: 100vw;
}
@supports not (overflow-x: clip) {
  html, body { overflow-x: hidden; }
}
img, picture, video, canvas, svg { max-width: 100%; }
.sw-section, main, footer { overflow-x: clip; }

/* Skip-Link (BFSG/A11y) */
.sw-skip {
  position: absolute;
  top: -100px;
  left: var(--sw-s-3);
  background: var(--sw-ink);
  color: var(--sw-paper);
  padding: .65rem 1rem;
  border-radius: var(--sw-r-md);
  font-weight: 600;
  font-size: .9375rem;
  z-index: 100;
  transition: top var(--sw-d-1) var(--sw-ease-spring);
}
.sw-skip:focus {
  top: var(--sw-s-3);
  outline: 2px solid var(--sw-orange);
  outline-offset: 3px;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--sw-orange);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Container */
.sw-wrap {
  width: min(100% - 2.5rem, var(--sw-container));
  margin-inline: auto;
}
.sw-narrow { max-width: var(--sw-narrow); margin-inline: auto; }
.sw-prose { max-width: var(--sw-prose); }

/* Sections base */
.sw-section { padding-block: clamp(4rem, 2.5rem + 6vw, 8rem); }
.sw-section--paper { background: var(--sw-paper); }
.sw-section--off { background: var(--sw-off); }
.sw-section--ink { background: var(--sw-ink); color: var(--sw-paper); }
.sw-section--warm { background: var(--sw-paper-warm); }

/* Eyebrow (Boutique-Signature, Orange-Strich statt Gold) */
.sw-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sw-s-3);
  font-size: var(--sw-fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--sw-ls-eyebrow);
  text-transform: uppercase;
  color: var(--sw-ink-soft);
}
.sw-eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--sw-orange);
}

/* H1 / H2 / H3 */
h1, .sw-h1 {
  font-size: var(--sw-fs-h1);
  line-height: 1.05;
  letter-spacing: var(--sw-ls-display);
  font-weight: 600;
  margin: 0 0 var(--sw-s-5);
}
h2, .sw-h2 {
  font-size: var(--sw-fs-h2);
  line-height: 1.1;
  letter-spacing: var(--sw-ls-heading);
  font-weight: 600;
  margin: 0 0 var(--sw-s-5);
}
h3, .sw-h3 {
  font-size: var(--sw-fs-h3);
  line-height: 1.2;
  letter-spacing: var(--sw-ls-heading);
  font-weight: 600;
  margin: 0 0 var(--sw-s-3);
}
.sw-lead {
  font-size: var(--sw-fs-lead);
  line-height: 1.55;
  color: var(--sw-ink-soft);
  max-width: 36em;
}

/* Buttons */
.sw-btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .95rem 1.5rem;
  border-radius: var(--sw-r-pill);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -.005em;
  transition: transform var(--sw-d-1) var(--sw-ease-spring), background var(--sw-d-1), color var(--sw-d-1), box-shadow var(--sw-d-1);
  white-space: nowrap;
}
.sw-btn--primary {
  background: var(--sw-orange-deep);
  color: #fff;
  box-shadow: var(--sw-sh-orange);
}
.sw-btn--primary:hover {
  background: #a14a09;
  transform: translateY(-2px);
}
.sw-btn--ghost {
  background: transparent;
  color: var(--sw-ink);
  border: 1px solid var(--sw-line-strong);
}
.sw-btn--ghost:hover {
  background: var(--sw-ink);
  color: var(--sw-paper);
  border-color: var(--sw-ink);
  transform: translateY(-2px);
}
.sw-btn--ink {
  background: var(--sw-ink);
  color: var(--sw-paper);
}
.sw-btn--ink:hover { background: var(--sw-ink-2); transform: translateY(-2px); }
.sw-btn--lg { padding: 1.05rem 1.85rem; font-size: 1.0625rem; }
.sw-btn-arrow {
  transition: transform var(--sw-d-1) var(--sw-ease-spring);
}
.sw-btn:hover .sw-btn-arrow { transform: translateX(3px); }

/* Text-Link (sekundäre CTAs) */
.sw-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-weight: 500;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: gap var(--sw-d-1);
}
.sw-link-arrow:hover { gap: .55rem; }

/* Reveal-Pattern (IntersectionObserver) */
.sw-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--sw-d-3) var(--sw-ease-spring), transform var(--sw-d-3) var(--sw-ease-spring);
  will-change: opacity, transform;
}
.sw-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.sw-d-1 { transition-delay: 80ms; }
.sw-d-2 { transition-delay: 160ms; }
.sw-d-3 { transition-delay: 260ms; }
.sw-d-4 { transition-delay: 380ms; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .sw-reveal { opacity: 1; transform: none; }
}

/* Header (sticky) */
.sw-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--sw-line);
}
.sw-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sw-s-5);
  padding: var(--sw-s-4) 0;
}
.sw-brand {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-weight: 600;
  letter-spacing: -.015em;
  font-size: 1.0625rem;
}
.sw-brand__dot {
  width: 8px;
  height: 8px;
  background: var(--sw-orange);
  border-radius: 50%;
}
.sw-nav { display: flex; gap: var(--sw-s-5); align-items: center; }
.sw-nav a {
  font-size: .9375rem;
  font-weight: 500;
  color: var(--sw-ink-soft);
  transition: color var(--sw-d-1);
}
.sw-nav a:hover { color: var(--sw-ink); }

/* Burger-Button (mobile only) */
.sw-burger {
  display: none;
  background: transparent;
  border: 1px solid var(--sw-line);
  border-radius: var(--sw-r-md);
  padding: 10px 12px;
  cursor: pointer;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  transition: border-color var(--sw-d-2) ease;
}
.sw-burger:hover { border-color: var(--sw-orange-deep); }
.sw-burger__line {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--sw-ink);
  border-radius: 1px;
  transition: transform var(--sw-d-2) ease, opacity var(--sw-d-2) ease;
}
.sw-burger[aria-expanded="true"] .sw-burger__line:nth-child(1) {
  transform: translateY(3px) rotate(45deg);
}
.sw-burger[aria-expanded="true"] .sw-burger__line:nth-child(2) {
  transform: translateY(-3px) rotate(-45deg);
}

/* Mobile-Drawer */
.sw-menu-mobile {
  display: none;
  flex-direction: column;
  background: rgba(255, 255, 255, .98);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--sw-line);
  padding: var(--sw-s-4) 0;
}
.sw-menu-mobile a {
  display: block;
  padding: var(--sw-s-3) clamp(1rem, 4vw, 2rem);
  font-size: 1rem;
  font-weight: 500;
  color: var(--sw-ink);
  border-bottom: 1px solid var(--sw-line-soft, rgba(0,0,0,.04));
  transition: background var(--sw-d-1) ease, color var(--sw-d-1) ease;
}
.sw-menu-mobile a:last-child { border-bottom: 0; }
.sw-menu-mobile a:hover, .sw-menu-mobile a:focus { background: var(--sw-orange-bg); color: var(--sw-orange-deep); }
.sw-menu-mobile__feature {
  color: var(--sw-orange-deep) !important;
  font-weight: 600 !important;
}
.sw-menu-mobile.is-open { display: flex; }

@media (max-width: 720px) {
  .sw-nav__primary { display: none; }
  .sw-burger { display: inline-flex; }
  .sw-header__cta { display: none; }
}
@media (min-width: 721px) {
  .sw-menu-mobile { display: none !important; }
}