/* ==========================================================================
   walkingtoyou 2026 — Designsystem
   --------------------------------------------------------------------------
   Diese Datei enthält:
   1. Design-Tokens (CSS-Custom-Properties)
   2. Typografie-Klassen (Display, Eyebrow, Caption …)
   3. Globale Bild-Rundung
   4. Top-Navigation-Overrides (Höhe, Transparenz, Scroll-Verhalten)
   5. Footer-Unterbalken
   6. Reveal-Helpers (UIkit-kompatibel)
   --------------------------------------------------------------------------
   Eingebunden via Headcustomcode in site.de.txt / site.en.txt
   ========================================================================== */


/* 1. ── Design-Tokens ───────────────────────────────────────────────────── */

:root {
  --w-ink:       #0F1115;
  --w-paper:     #FAFAF7;
  --w-stone:     #E8E5DE;
  --w-graphite: #3A3D44;
  --w-accent:    #C8551E;
  --w-muted:     #6B6F76;
  --w-radius:    11.25px;
  --w-nav-h:     56px;
  --w-nav-bg-scrolled: rgba(250, 250, 247, 0.97);
}


/* 2. ── Typografie ──────────────────────────────────────────────────────── */

html, body, .uk-text-base {
  font-family: "Hanken Grotesk", "Hanken Grotesk Variable",
               -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Hero-Display (96–144 px, sehr eng gesetzt) */
.wty-display-xl {
  font-size: clamp(56px, 10vw, 144px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.03em;
}

/* Sektions-Headline */
.wty-display-l {
  font-size: clamp(40px, 7vw, 96px);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.02em;
}

/* Standard-Headline-Tightening (greift global auf alle uk-heading-* Klassen) */
.uk-heading-medium,
.uk-heading-large,
.uk-heading-xlarge,
.uk-heading-2xlarge,
h1, h2, h3 {
  letter-spacing: -0.015em;
}

/* Eyebrow — kleines Label "01 — Werte" / "Unsere Geschichte" */
.wty-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(200, 85, 30);
  margin-bottom: 16px;
}

/* Caption — kleine Bildbeschriftungen etc. */
.wty-caption {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--w-muted);
}

/* Lead/Intro */
.wty-lead {
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 300;
  line-height: 1.4;
  color: var(--w-graphite);
  max-width: 720px;
}

/* Akzentfarbe als Utility */
.wty-accent { color: var(--w-accent); }


/* 3. ── Globale Bild-Rundung ────────────────────────────────────────────── */

img,
picture img,
.uk-cover-container img,
.tm-bg-image,
.uk-background-cover,
.uk-card-media-top img,
.story-image {
  border-radius: var(--w-radius);
}
/* Hero-Background bleibt eckig (full-bleed Sektion). */
.tm-section-image,
section[class*="uk-section"] > .uk-position-cover,
.uk-section[style*="background-image"]:first-of-type {
  border-radius: 0;
}


/* 4. ── Top-Navigation-Overrides ────────────────────────────────────────── */

/* Reduzierte Navbar-Höhe (Zero One Default ist deutlich höher) */
.uk-navbar,
.uk-navbar-container:not(.uk-navbar-transparent) {
  min-height: var(--w-nav-h);
}
.uk-navbar-nav > li > a,
.uk-navbar-item,
.uk-navbar-toggle {
  min-height: var(--w-nav-h);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.uk-logo,
.uk-navbar-item .uk-logo {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Helle, glassmorphe Navbar — immer sichtbar (Transparentnavbar: false) */
.tm-header,
.tm-header[uk-sticky] {
  background: rgba(250, 250, 247, 0.94);
  -webkit-backdrop-filter: saturate(130%) blur(14px);
  backdrop-filter:         saturate(130%) blur(14px);
  border-bottom: 1px solid rgba(15, 17, 21, 0.07);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* Sobald gesticky/scrolled — UIkit setzt automatisch .uk-active */
.tm-header[uk-sticky].uk-active,
.tm-header.uk-sticky-fixed,
.tm-header.uk-active {
  background: rgba(250, 250, 247, 0.97);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  backdrop-filter:         saturate(150%) blur(16px);
  box-shadow: 0 1px 16px rgba(15, 17, 21, 0.07);
  border-bottom-color: rgba(15, 17, 21, 0.06);
}

/* Nav-Links: orange — überschreibt Zero One #6e66cc in allen Zuständen */
.tm-header .uk-navbar-nav > li > a,
.tm-header .uk-navbar-nav > li > a:hover,
.tm-header .uk-navbar-nav > li > a:focus,
.tm-header .uk-navbar-nav > li.uk-active > a,
.tm-header .uk-navbar-item,
.tm-header .uk-navbar-nav > li > a:visited {
  color: var(--w-accent) !important;  /* rgb(200, 85, 30) */
}

/* Pill-CTA in der Navbar (Zero One Rightnav: button) */
.tm-header .uk-button,
.uk-navbar-right .uk-button {
  border-radius: 999px;
  padding: 8px 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: none;
  min-height: 0;
}

/* Primär-Button: orange gefüllt */
.tm-header .uk-button-primary,
.tm-header .uk-button-default {
  background: var(--w-accent);
  color: var(--w-paper) !important;
  border: none;
  border-radius: 999px;
}
.tm-header .uk-button-primary:hover,
.tm-header .uk-button-default:hover {
  background: var(--w-ink);
  color: var(--w-paper) !important;
}

/* Sprach-Switcher dezenter */
.tm-header .tm-language-switcher,
.tm-header .uk-navbar-language {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  opacity: 0.7;
}


/* 5. ── Footer-Unterbalken ──────────────────────────────────────────────── */

.wty-footerbar {
  background: var(--w-ink);
  color: rgba(250, 250, 247, 0.55);
  border-top: 1px solid rgba(250, 250, 247, 0.12);
  padding: 18px clamp(20px, 5vw, 80px);
  font-size: 12px;
  letter-spacing: 0.02em;
}
.wty-footerbar__inner {
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.wty-footerbar__address {
  font-weight: 500;
}
.wty-footerbar__links {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 2vw, 24px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.wty-footerbar__links a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}
.wty-footerbar__links a:hover { color: var(--w-paper); }
.wty-footerbar__divider { opacity: 0.4; }


/* 6. ── Reveal-on-Scroll Defaults (UIkit-Scrollspy-kompatibel) ──────────── */

/* Sektionen, die uk-scrollspy bekommen, werden sanft eingeblendet
   (UIkit liefert das System; hier nur ein etwas weicheres Easing). */
[uk-scrollspy] .uk-animation-slide-bottom-small,
[uk-scrollspy] .uk-animation-slide-bottom {
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-duration: 0.9s;
}


/* 7. ── Section-Akzente ─────────────────────────────────────────────────── */

/* Dunkle Sektionen — Variante "Ink" (statt Default-Schwarz) */
.wty-section-ink {
  background: var(--w-ink);
  color: var(--w-paper);
}
.wty-section-ink .uk-heading-medium,
.wty-section-ink .uk-heading-small,
.wty-section-ink h1, .wty-section-ink h2, .wty-section-ink h3 {
  color: var(--w-paper);
}

/* Helle Sektionen — Variante "Paper" (statt reines Weiss) */
.wty-section-paper { background: var(--w-paper); }

/* Sand-Hintergrund für Sektionswechsel */
.wty-section-stone { background: var(--w-stone); }


/* 8. ── Buttons (Akzent-Variante) ───────────────────────────────────────── */

/* Global: Primär-Button orange (kein border-radius override — Kontext entscheidet) */
.uk-button-primary,
.wty-btn-primary {
  background: var(--w-accent);
  color: var(--w-paper);
}
.uk-button-primary:hover,
.wty-btn-primary:hover {
  background: var(--w-ink);
  color: var(--w-paper);
}