/* ============================================================
   global.css — Zollagentur GmbH Design-Token-Fundament
   Eingebunden via BaseLayout.astro (Phase 1 — 2026-04-29)
   ============================================================ */

/* ── 1. FONT-FACE (Self-Hosted, kein CDN) ────────────────── */

@font-face {
  font-family: 'Plus Jakarta Sans Variable';
  src:
    url('/fonts/plus-jakarta-sans-latin-wght-normal.woff2') format('woff2-variations'),
    url('/fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ── 2. BRAND TOKENS (OKLCH + HEX-Fallback) ─────────────── */

:root {
  /* Primitive: Gold-Palette */
  /* OKLCH verified via Node hexToOklch() 2026-04-29: #c8a665 = L=0.741 C=0.093 H=82.7 */
  --ck-gold:        #c8a665;           /* Primary brand accent */
  --ck-gold-ok:     oklch(0.741 0.093 82.7);
  --ck-gold-light:  #e7d4a8;           /* Eyebrow / inverse-surface */
  --ck-gold-light-ok: oklch(0.875 0.052 83.2);
  --ck-gold-dark:   #a8884b;           /* Hover state */
  --ck-gold-dark-ok: oklch(0.601 0.098 72.8);

  /* Primitive: Petrol-Palette (DOMINANT — verifiziert aus kargon/css/styles.css .bg-secondary 2026-04-29) */
  --ck-petrol:          #0f313a;       /* DOMINANT — Hero-BG, Footer, dunkle Sections, Header */
  --ck-petrol-darker:   #0c2730;       /* Tiefster Schatten / Gradient-Start */
  --ck-petrol-lighter:  #1a4250;       /* Gradient-End leicht heller */
  --ck-logo-marine:     #081e51;       /* LEICHTER AKZENT — Logo-Element, Akzent NIEMALS als Section-BG! */
  /* Backwards-Compat: --ck-marine zeigt weiterhin auf Petrol */
  --ck-marine:          var(--ck-petrol);
  --ck-marine-2:        #144049;
  --ck-marine-3:        var(--ck-petrol-lighter);
  --ck-text:            #1a1a1a;
  --ck-text-secondary:  #444444;

  /* Semantic: Foreground / Background */
  --ck-bg:          #ffffff;
  --ck-fg:          #1a1a1a;
  --ck-muted:       #555555;           /* WCAG 4.5:1 on white verified */
  --ck-border:      #e0e0e0;
  --ck-surface:     #f7f8fa;

  /* Semantic: Interactive */
  --ck-focus:       oklch(0.65 0.15 264);

  /* Font stack */
  --ck-font-sans:   'Plus Jakarta Sans Variable', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  /* Fluid Type Scale (320px → 1240px, Ratio 1.2 → 1.25) */
  --ck-text-xs:     clamp(0.75rem,  0.73rem + 0.11vw, 0.8rem);
  --ck-text-sm:     clamp(0.875rem, 0.85rem + 0.13vw, 0.938rem);
  --ck-text-base:   clamp(1rem,     0.96rem + 0.22vw, 1.125rem);
  --ck-text-lg:     clamp(1.125rem, 1.07rem + 0.28vw, 1.25rem);
  --ck-text-xl:     clamp(1.25rem,  1.17rem + 0.39vw, 1.5rem);
  --ck-text-2xl:    clamp(1.5rem,   1.37rem + 0.65vw, 1.953rem);
  --ck-text-3xl:    clamp(1.875rem, 1.69rem + 0.87vw, 2.441rem);
  --ck-text-4xl:    clamp(2.25rem,  1.98rem + 1.30vw, 3.052rem);
  --ck-text-hero:   clamp(2.5rem,   2.15rem + 1.74vw, 3.815rem);

  /* Radius Scale */
  --ck-radius-xs:   0.25rem;
  --ck-radius-sm:   0.5rem;
  --ck-radius-md:   0.75rem;
  --ck-radius-lg:   1rem;
  --ck-radius-xl:   1.5rem;
  --ck-radius-full: 9999px;

  /* Fluid Spacing */
  --ck-space-section: clamp(3rem, 2rem + 5vw, 8rem);
  --ck-space-block:   clamp(1.5rem, 1rem + 2vw, 3rem);

  /* Shadow Scale */
  --ck-shadow-sm:   0 1px 3px 0 rgb(0 0 0 / 0.10), 0 1px 2px -1px rgb(0 0 0 / 0.10);
  --ck-shadow-md:   0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10);
  --ck-shadow-lg:   0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -4px rgb(0 0 0 / 0.10);
  --ck-shadow-gold: 0 8px 24px -8px rgb(200 166 101 / 0.35);

  /* Easing */
  --ck-ease-out:    cubic-bezier(0.19, 1, 0.22, 1);
  --ck-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── 3. BASE RESETS & GLOBAL DEFAULTS ───────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  color-scheme: light;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--ck-font-sans);
  font-size: var(--ck-text-base);
  line-height: 1.65;
  color: var(--ck-fg);
  background: var(--ck-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── 4. FOCUS — WCAG 2.4.7 AA ───────────────────────────── */

:where(button, a, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--ck-focus);
  outline-offset: 2px;
  border-radius: var(--ck-radius-xs);
}

/* ── 5. SKIP-LINK ───────────────────────────────────────── */

.ck-skip-link {
  position: absolute;
  inset-block-start: -100px;
  inset-inline-start: 0;
  background: var(--ck-bg);
  color: var(--ck-fg);
  padding: 0.5rem 1rem;
  z-index: 9999;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--ck-radius-sm) 0;
  box-shadow: var(--ck-shadow-md);
}
.ck-skip-link:focus-visible {
  inset-block-start: 0.5rem;
  inset-inline-start: 0.5rem;
}

/* ── 6. PREFERS-REDUCED-MOTION ──────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── 7. HEADER — STATE OF THE ART (Re-Design 2026-04-29) ──────── */

/* ═══════════════════════════════════════════════════════════════
   DESIGN INTENT:
   ─ Top-Bar: petrol #0f313a — bleibt dunkel (Kontakt + Social)
   ─ Navbar: WEISS — Logo links, Nav Mitte, Attr-Nav rechts
   ─ Nav-Links: dunkel (--ck-petrol) mit Gold-Hover-Underline
   ─ CTA-Button: Gold mit weißem Text, eleviert
   ─ Dropdown: weiß, Petrol-Text, Gold-Hover, Premium-Schatten
   ─ Sticky: weißer Header mit dezenter Box-Shadow beim Scrollen
   ═══════════════════════════════════════════════════════════════ */

/* TOP-BAR: Petrol-Hintergrund (korrekt, unverändert) */
header.header-style2 .top-bar {
  font-size: var(--ck-text-xs);
  letter-spacing: 0.01em;
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
}

/* NAVBAR WRAPPER: weiß, sticky, Premium-Shadow */
header.header-style2 .navbar-default {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: #ffffff !important;
  background: #ffffff !important;
  border-bottom: 1px solid var(--ck-border);
  box-shadow: 0 1px 3px 0 rgb(15 49 58 / 0.06), 0 4px 16px -4px rgb(15 49 58 / 0.08);
  transition: box-shadow 0.3s var(--ck-ease-out), border-color 0.3s var(--ck-ease-out);
}

/* Beim Scrollen etwas stärkerer Shadow (via JS-Class oder CSS :has fallback) */
header.header-style2 .navbar-default.is-scrolled {
  box-shadow: 0 2px 8px 0 rgb(15 49 58 / 0.10), 0 8px 24px -8px rgb(15 49 58 / 0.12);
  border-color: transparent;
}

/* NAVBAR INNER: flex layout, vertikale Zentrierung */
header.header-style2 .navbar-default .navbar-header,
header.header-style2 .navbar-default .navbar-brand {
  display: flex;
  align-items: center;
}

/* NAV-LINKS: dunkel auf weißem Hintergrund */
header.header-style2 .navbar-default .navbar-nav > li > a,
header.header-style2 .navbar-default .navbar-nav li a,
header.header-style2 .navbar-default .nav-link {
  color: var(--ck-petrol) !important;
  letter-spacing: 0.025em;
  font-weight: 600;
  font-size: var(--ck-text-sm);
  text-transform: uppercase;
  text-decoration: none;
  position: relative;
  padding-top: 24px !important;
  padding-bottom: 24px !important;
  transition: color 0.2s var(--ck-ease-out);
  white-space: nowrap; /* TR-Fix: verhindert Zeilenumbruch bei langen Nav-Labels (ANA SAYFA, SIKÇA SORULAN SORULAR) */
}

header.header-style2 .navbar-default .navbar-nav > li > a:hover,
header.header-style2 .navbar-default .navbar-nav > li > a:focus-visible {
  color: var(--ck-gold-dark) !important;
}

/* Underline-Reveal entfernt — ersetzt durch Pill-Hover (siehe "Nav Pill Hover" weiter unten) */

/* Active state: Gold-Akzent */
header.header-style2 .navbar-default .navbar-nav > li.active > a,
header.header-style2 .navbar-default .navbar-nav > li.open > a {
  color: var(--ck-gold-dark) !important;
}

/* Nav item spacing */
header.header-style2 .navbar-default .navbar-nav > li {
  margin: 0 0.125rem;
}

header.header-style2 .navbar-default .navbar-nav > li > a {
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}

/* ── DROPDOWN MENUS ─────────────────────────────────────────── */

/* Dropdown Container */
header.header-style2 .dropdown-menu,
header.header-style2 .navbar-default .dropdown-menu {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border: none !important;
  border-radius: var(--ck-radius-lg) !important;
  box-shadow:
    0 0 0 1px rgb(15 49 58 / 0.08),
    0 8px 16px -4px rgb(15 49 58 / 0.12),
    0 24px 48px -8px rgb(15 49 58 / 0.16) !important;
  padding: 0.625rem !important;
  min-width: 220px;
  animation: ck-dropdown-in 0.18s var(--ck-ease-out) both;
  transform-origin: top left;
}

@keyframes ck-dropdown-in {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Dropdown Items: Petrol-Text */
header.header-style2 .dropdown-menu li > a,
header.header-style2 .dropdown-menu .nav-link,
header.header-style2 .dropdown-menu a {
  color: var(--ck-petrol) !important;
  font-size: var(--ck-text-sm) !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em;
  border-radius: var(--ck-radius-sm) !important;
  padding: 0.5rem 0.875rem !important;
  display: block;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
  white-space: nowrap;
}

/* Dropdown Item Hover: Gold-Tint-BG + dunkler Text */
header.header-style2 .dropdown-menu li > a:hover,
header.header-style2 .dropdown-menu li > a:focus-visible,
header.header-style2 .dropdown-menu .nav-link:hover,
header.header-style2 .dropdown-menu a:hover {
  background-color: rgb(200 166 101 / 0.10) !important;
  color: var(--ck-gold-dark) !important;
  padding-left: 1.125rem !important;
}

/* Dropdown divider (falls vorhanden) */
header.header-style2 .dropdown-menu .divider {
  background-color: var(--ck-border);
  margin: 0.375rem 0.875rem;
}

/* Dropdown Caret / Toggle-Arrow: Gold */
header.header-style2 .navbar-default .navbar-nav > li > a .caret {
  border-top-color: var(--ck-petrol) !important;
  transition: border-color 0.2s ease;
}
header.header-style2 .navbar-default .navbar-nav > li.open > a .caret {
  border-top-color: var(--ck-gold-dark) !important;
}

/* ── ATTR-NAV (Sprache + Search + CTA rechts) ─────────────── */

/* Prevent the nav from using float-layout that breaks vertical alignment */
header.header-style2 .attr-nav {
  display: flex;
  align-items: center;
  float: none;
  margin-left: auto;
}

/* Fix: default.css Zeile 55: .attr-nav > ul { margin: 0 0 -5px 0 } zieht ul aus Kontext */
header.header-style2 .attr-nav > ul {
  margin: 0 !important;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

header.header-style2 .attr-nav > ul > li {
  display: flex;
  align-items: center;
  vertical-align: unset;
  float: none;
}

/* Search-Icon in Attr-Nav: dunkel auf weiß (gilt NICHT für CTA-Button) */
header.header-style2 .attr-nav > ul > li > a:not(.butn-style1) {
  color: var(--ck-petrol) !important;
  transition: color 0.2s ease;
}
header.header-style2 .attr-nav > ul > li > a:not(.butn-style1):hover {
  color: var(--ck-gold) !important;
}

/* ── CTA BUTTON ─────────────────────────────────────────────── */

/* Gold-CTA: Premium-Elevated mit Gold-Glow */
header.header-style2 .butn-style1,
header.header-style2 .butn.butn-style1,
header.header-style2 a.butn-style1,
header.header-style2 .attr-nav .butn-style1,
.attr-nav a.butn-style1 {
  background-color: var(--ck-gold) !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  font-size: var(--ck-text-xs) !important;
  text-transform: uppercase;
  padding: 0.5rem 1rem !important;
  border-radius: var(--ck-radius-sm) !important;
  white-space: nowrap;
  box-shadow: 0 2px 8px -2px rgb(200 166 101 / 0.40);
  transition:
    background-color 0.2s var(--ck-ease-out),
    box-shadow 0.2s var(--ck-ease-out),
    transform 0.15s var(--ck-ease-out);
}

/* Span inside CTA button */
header.header-style2 .butn-style1 span,
header.header-style2 .butn-style1 *,
.attr-nav a.butn-style1 span,
.attr-nav a.butn-style1 * {
  color: #ffffff !important;
}

header.header-style2 .butn-style1:hover,
header.header-style2 .butn.butn-style1:hover,
header.header-style2 a.butn-style1:hover,
.attr-nav a.butn-style1:hover {
  background-color: var(--ck-gold-dark) !important;
  box-shadow: 0 6px 20px -4px rgb(200 166 101 / 0.55) !important;
  transform: translateY(-1px);
  color: #ffffff !important;
}

header.header-style2 .butn-style1:active,
header.header-style2 .butn.butn-style1:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px -2px rgb(200 166 101 / 0.30) !important;
}

/* ── LANGUAGE SWITCHER ──────────────────────────────────────── */

header.header-style2 .lang-selector,
header.header-style2 .wpml-ls,
header.header-style2 .wpml-ls-statics-shortcode_actions {
  display: flex;
  align-items: center;
}

header.header-style2 .lang-selector a,
header.header-style2 .wpml-ls a {
  color: var(--ck-petrol) !important;
  font-size: var(--ck-text-xs) !important;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: color 0.2s ease;
}

header.header-style2 .lang-selector a:hover,
header.header-style2 .wpml-ls a:hover {
  color: var(--ck-gold) !important;
}

/* ── REDUCED-MOTION ─────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  header.header-style2 .butn-style1,
  header.header-style2 .butn.butn-style1 {
    transition: none !important;
  }
  header.header-style2 .butn-style1:hover,
  header.header-style2 .butn.butn-style1:hover {
    transform: none !important;
  }
  header.header-style2 .dropdown-menu {
    animation: none !important;
  }
  header.header-style2 .dropdown-menu li > a {
    transition: none !important;
  }
}

/* ── 7b. LOGO GRÖSSE ────────────────────────────────────────────────────── */

/* Logo vergrössert: war 44px (theme-default), jetzt 60px auf Desktop / 48px mobile */
.navbar-brand #redux_logo,
.navbar-brand img[id="redux_logo"],
header .navbar-brand img {
  height: 60px !important;
  width: auto !important;
  max-width: none !important;
}

@media (max-width: 767px) {
  .navbar-brand #redux_logo,
  .navbar-brand img[id="redux_logo"],
  header .navbar-brand img {
    height: 48px !important;
  }
}

/* ── 7c. HERO SLIDER — CSS-only min-height Garantie ────────────────────── */

/* Verhindert Höhen-Kollaps wenn Owl Carousel nach View-Transition
   noch nicht re-initialisiert ist. CSS greift sofort, JS greift nach Init. */
.slider-fade1,
.slider-fade1.owl-carousel {
  min-height: 100vh !important;
}

.slider-fade1 .item,
.slider-fade1.owl-carousel .item {
  min-height: 100vh !important;
}

/* Owl: auch der wrapper-div bekommt min-height damit Kinder nicht kollabieren */
.slider-fade1.owl-carousel .owl-stage-outer,
.slider-fade1.owl-carousel .owl-stage,
.slider-fade1.owl-carousel .owl-item {
  min-height: 100vh;
}

/* ── 7d. OWL CAROUSEL — horizontales Scroll-Bugfix (Mobile ≤390px) ──────── */

/* Problem: .owl-stage wird intern breiter als Viewport berechnet → horizontales
   Scrolling auf Mobile. .owl-stage-outer hat zwar overflow:hidden, reicht aber
   nicht wenn .owl-stage selbst herausragt. Defense-in-depth: alle drei Ebenen
   beschränken, plus body overflow-x als letzter Fallback. */

.owl-carousel,
.owl-stage-outer,
.owl-stage {
  max-width: 100%;
  overflow: hidden;
}

@media (max-width: 390px) {
  body {
    overflow-x: hidden;
  }
}

/* ── 8. PRELOADER KILL — alle Kargon/Theme Loading-Spinner supprimieren ─── */

/* #preloader und alle gängigen Theme-Loader-IDs/Klassen: fix:display none.
   Das DOM-Element existiert in Astro nicht mehr, aber das CSS war noch aktiv
   und konnte bei View-Transition-Reruns via Kargon-JS sichtbar werden. */
#preloader,
.preloader,
.page-loader,
.site-loader {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* View-Transition-Root: keinen Browser-eigenen Loading-Overlay zeigen.
   Stattdessen direkter Crossfade ohne Verzögerung.
   Der ::view-transition-old(root) und ::view-transition-new(root) werden
   auf einen simplen Opacity-Fade reduziert — kein Spinner, kein Fullscreen-Overlay. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.2s;
  animation-timing-function: ease-out;
}

::view-transition-old(root) {
  animation-name: ck-vt-fade-out;
}

::view-transition-new(root) {
  animation-name: ck-vt-fade-in;
}

@keyframes ck-vt-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes ck-vt-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Reduced-Motion: View-Transitions instant machen */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.01ms !important;
  }
}

/* ── 9. VIEW TRANSITIONS + @starting-style REVEAL (Phase 8 — 2026-04-29) ── */

/* Page-Hero: Fade-in beim View-Transition-Enter */
[transition-name^="hero-"] {
  view-transition-name: var(--astro-transition-name, none);
}

/* Content-Reveal: @starting-style fade+slide für v2-Shell-Sections */
@supports (animation-timeline: scroll()) or (transition-behavior: allow-discrete) {
  .elementor-v2-shell .ck-v2-section,
  .elementor-v2-shell .accordion-style .card {
    animation: ck-reveal 0.45s var(--ck-ease-out) both;
    animation-delay: calc(var(--reveal-order, 0) * 60ms);
  }

  @starting-style {
    .elementor-v2-shell .ck-v2-section,
    .elementor-v2-shell .accordion-style .card {
      opacity: 0;
      translate: 0 16px;
    }
  }
}

@keyframes ck-reveal {
  from {
    opacity: 0;
    translate: 0 16px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

/* Stagger-Delays via CSS-Counter-Trick (keine JS-Abhängigkeit) */
.elementor-v2-shell .ck-v2-section:nth-child(1) { --reveal-order: 0; }
.elementor-v2-shell .ck-v2-section:nth-child(2) { --reveal-order: 1; }
.elementor-v2-shell .ck-v2-section:nth-child(3) { --reveal-order: 2; }
.elementor-v2-shell .ck-v2-section:nth-child(4) { --reveal-order: 3; }
.elementor-v2-shell .ck-v2-section:nth-child(5) { --reveal-order: 4; }
.elementor-v2-shell .ck-v2-section:nth-child(n+6) { --reveal-order: 5; }

.elementor-v2-shell .accordion-style .card:nth-child(1) { --reveal-order: 0; }
.elementor-v2-shell .accordion-style .card:nth-child(2) { --reveal-order: 1; }
.elementor-v2-shell .accordion-style .card:nth-child(3) { --reveal-order: 2; }
.elementor-v2-shell .accordion-style .card:nth-child(4) { --reveal-order: 3; }
.elementor-v2-shell .accordion-style .card:nth-child(n+5) { --reveal-order: 4; }

/* Reduced-Motion: Reveal-Animationen deaktivieren */
@media (prefers-reduced-motion: reduce) {
  .elementor-v2-shell .ck-v2-section,
  .elementor-v2-shell .accordion-style .card {
    animation: none !important;
  }
}

/* ── WCAG 2.5.5 Touch-Targets (≥44×44px) — Mobile Only ─────
   Scope: @media (max-width: 767px) — kein Einfluss auf Desktop.
   Brand-Tokens unangetastet. prefers-reduced-motion nicht betroffen
   (rein geometrische Änderungen, keine Animationen).
   Bug-Fix 2026-04-29: Top-Bar-Links, EN-Form, Footer-Links.
   ──────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

  /* Top-Bar: Telefon- und E-Mail-Links (war 18×18px) */
  .top-bar-info ul a {
    min-height: 44px;
    padding: 13px 8px;
    display: inline-flex;
    align-items: center;
  }

  /* EN-Form: Text/E-Mail/Tel/Textarea/Select-Inputs (war 43px) */
  .ff-el-input--content input[type="text"],
  .ff-el-input--content input[type="email"],
  .ff-el-input--content input[type="tel"],
  .ff-el-input--content textarea,
  .ff-el-input--content select {
    min-height: 44px;
  }

  /* EN-Form: Submit-Button (war 42px) */
  .ff-btn-submit {
    min-height: 44px;
    padding: 12px 24px;
  }

  /* EN-Form: Checkboxen — visuell größer (war 13×13px) */
  .ff-el-input--content input[type="checkbox"] {
    width: 22px;
    height: 22px;
  }

  /* EN-Form: Checkbox-Label — Hit-Area auf 44px ausdehnen */
  .ff-el-form-check-label {
    min-height: 44px;
    padding: 11px 0;
    display: inline-flex;
    align-items: center;
  }

  /* Footer-Links: Hit-Area vergrößern (17 von 19 waren <44px) */
  footer a {
    min-height: 44px;
    padding: 6px 0;
    display: inline-flex;
    align-items: center;
  }
}

/* ── Premium Hamburger — Gold Tile, elegant ────────────────────────── */
/* Force navbar flex-row vertical centering so the gold tile
   sits on the same baseline as the CK logo (logo wrapper ≈ 78px,
   tile = 44px → centered means ~17px top offset). */
header .navbar.navbar-expand-lg,
header .navbar-expand-lg > .container,
header .menu_area .navbar { align-items: center !important; }

.ck-nav-toggle {
  width: 44px; height: 44px;
  background: linear-gradient(160deg, #d4af72 0%, #c8a665 45%, #b8945a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 2px 8px rgba(200,166,101,0.32),
    0 1px 2px rgba(0,0,0,0.12);
  border: 0;
  border-radius: 8px;
  position: relative; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  margin: 0;
  /* Vertical-align with logo regardless of parent flex setting */
  align-self: center;
  transition: box-shadow 0.2s ease, transform 0.15s ease, background 0.2s ease;
  flex-shrink: 0;
}
.ck-nav-toggle:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    0 4px 16px rgba(200,166,101,0.44),
    0 2px 4px rgba(0,0,0,0.14);
  transform: translateY(-1px);
}
.ck-nav-toggle:active { transform: translateY(0); }
.ck-nav-toggle:focus-visible {
  outline: 2px solid #c8a665;
  outline-offset: 3px;
}
.ck-nav-toggle.menu-opened {
  background: linear-gradient(160deg, #1a3e4a 0%, #0f313a 60%, #081e51 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 2px 10px rgba(8,30,81,0.3);
}
.ck-nav-toggle::before,
.ck-nav-toggle::after,
.ck-nav-toggle .bar {
  display: block; width: 20px; height: 2px;
  background: #fff;
  border-radius: 2px;
  position: absolute;
  left: 50%; transform: translateX(-50%);
  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity   0.2s ease,
    top       0.3s cubic-bezier(0.4, 0, 0.2, 1);
  content: "";
}
.ck-nav-toggle::before { top: 14px; }
.ck-nav-toggle .bar    { top: 21px; }
.ck-nav-toggle::after  { top: 28px; }
.ck-nav-toggle.menu-opened::before,
.ck-nav-toggle.menu-opened::after { background: #c8a665; }
.ck-nav-toggle.menu-opened::before { transform: translateX(-50%) rotate(45deg);  top: 21px; }
.ck-nav-toggle.menu-opened .bar    { opacity: 0; transform: translateX(-50%) scaleX(0); }
.ck-nav-toggle.menu-opened::after  { transform: translateX(-50%) rotate(-45deg); top: 21px; }
@media (prefers-reduced-motion: reduce) {
  .ck-nav-toggle,
  .ck-nav-toggle::before, .ck-nav-toggle::after, .ck-nav-toggle .bar {
    transition: none !important; animation: none !important;
  }
}

/* ── CK Mobile Overlay — Full-Screen Wow (Pattern X) ──────────────── */
#ck-mobile-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background:
    radial-gradient(ellipse 80% 60% at 15% 85%, rgba(200,166,101,0.07) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 85% 10%, rgba(8,30,81,0.6) 0%, transparent 70%),
    linear-gradient(155deg, #0f313a 0%, #0c2730 50%, #081e51 100%);
  border-top: 3px solid #c8a665;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    opacity   0.3s ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
body.ck-overlay-open #ck-mobile-overlay {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}
body.ck-overlay-open {
  overflow: hidden;
  padding-right: var(--ck-scrollbar-width, 0px);
}
.ck-overlay-inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 20px 24px 40px;
}
.ck-overlay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 32px;
  border-bottom: 1px solid rgba(200,166,101,0.15);
  margin-bottom: 12px;
}
.ck-overlay-header .ck-overlay-logo { height: 48px; width: auto; opacity: 0.95; }
.ck-overlay-close {
  width: 48px; height: 48px;
  background: rgba(200,166,101,0.1);
  border: 1px solid rgba(200,166,101,0.25);
  border-radius: 8px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s ease, border-color 0.2s ease;
  position: relative;
}
.ck-overlay-close:hover { background: rgba(200,166,101,0.2); border-color: rgba(200,166,101,0.5); }
.ck-overlay-close:focus-visible { outline: 2px solid #c8a665; outline-offset: 3px; }
.ck-overlay-close::before,
.ck-overlay-close::after {
  content: ""; position: absolute;
  width: 20px; height: 2px;
  background: #c8a665; border-radius: 2px;
}
.ck-overlay-close::before { transform: rotate(45deg); }
.ck-overlay-close::after  { transform: rotate(-45deg); }
.ck-overlay-nav { list-style: none; padding: 0; margin: 0; flex: 1; }
.ck-overlay-nav > li {
  border-bottom: 1px solid rgba(255,255,255,0.06);
  opacity: 0;
  transform: translateY(16px);
  animation: ck-item-reveal 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-play-state: paused;
}
.ck-overlay-nav > li:nth-child(1) { animation-delay: 0.08s; }
.ck-overlay-nav > li:nth-child(2) { animation-delay: 0.13s; }
.ck-overlay-nav > li:nth-child(3) { animation-delay: 0.18s; }
.ck-overlay-nav > li:nth-child(4) { animation-delay: 0.23s; }
.ck-overlay-nav > li:nth-child(5) { animation-delay: 0.28s; }
.ck-overlay-nav > li:nth-child(6) { animation-delay: 0.33s; }
.ck-overlay-nav > li:nth-child(7) { animation-delay: 0.38s; }
.ck-overlay-nav > li:nth-child(8) { animation-delay: 0.43s; }
body.ck-overlay-open .ck-overlay-nav > li { animation-play-state: running; }
@keyframes ck-item-reveal { to { opacity: 1; transform: translateY(0); } }
.ck-overlay-nav > li > a,
.ck-overlay-nav > li > .ck-overlay-item-toggle {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 0;
  font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em;
  color: rgba(255,255,255,0.9);
  text-decoration: none;
  transition: color 0.15s ease;
  background: none; border: none; cursor: pointer;
  width: 100%; text-align: left;
}
.ck-overlay-nav > li > a:hover,
.ck-overlay-nav > li > .ck-overlay-item-toggle:hover { color: #c8a665; }
.ck-overlay-nav > li > a:focus-visible,
.ck-overlay-nav > li > .ck-overlay-item-toggle:focus-visible {
  outline: 2px solid #c8a665; outline-offset: 2px; border-radius: 4px;
}
.ck-overlay-chevron {
  width: 20px; height: 20px; flex-shrink: 0; opacity: 0.5;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.ck-overlay-nav > li.ck-subnav-open > .ck-overlay-item-toggle .ck-overlay-chevron {
  transform: rotate(180deg); opacity: 1;
}
.ck-overlay-subnav {
  list-style: none; padding: 0 0 12px 16px; margin: 0;
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}
.ck-overlay-subnav > .ck-subnav-inner { overflow: hidden; }
.ck-overlay-nav > li.ck-subnav-open > .ck-overlay-subnav { grid-template-rows: 1fr; }
.ck-overlay-subnav a {
  display: block; padding: 10px 0;
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: color 0.15s ease, padding-left 0.15s ease;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.ck-overlay-subnav a:hover { color: #c8a665; padding-left: 6px; }
.ck-overlay-subnav a:focus-visible { outline: 2px solid #c8a665; outline-offset: 2px; border-radius: 3px; }
.ck-overlay-cta {
  margin-top: 32px; padding-top: 24px;
  border-top: 1px solid rgba(200,166,101,0.15);
}
.ck-overlay-cta a {
  display: block; width: 100%;
  padding: 16px 24px;
  background: linear-gradient(135deg, #c8a665 0%, #b8945a 100%);
  color: #fff !important;
  font-size: 1rem; font-weight: 600; letter-spacing: 0.01em;
  text-align: center; text-decoration: none;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(200,166,101,0.3);
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.ck-overlay-cta a:hover { box-shadow: 0 4px 20px rgba(200,166,101,0.45); transform: translateY(-1px); }
.ck-overlay-cta a:active { transform: none; }
.ck-overlay-contact { margin-top: 28px; display: flex; flex-direction: column; gap: 8px; }
.ck-overlay-contact a {
  display: flex; align-items: center; gap: 10px;
  color: rgba(255,255,255,0.45);
  font-size: 0.875rem; text-decoration: none;
  transition: color 0.15s ease;
}
.ck-overlay-contact a:hover { color: rgba(200,166,101,0.8); }
.ck-overlay-contact i { font-size: 0.8125rem; color: #c8a665; opacity: 0.7; width: 14px; }
@media (min-width: 992px) {
  .ck-nav-toggle { display: none; }
  #ck-mobile-overlay { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  #ck-mobile-overlay { transition: none !important; }
  .ck-overlay-nav > li {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
}

/* ── Nav Pill Hover — Stripe/Linear-Premium-Style ─────────────────────────────
   Pill-BG "fliegt" zum aktiven Item: position:relative auf li, ::before als
   Background-Pill, opacity+scale auf hover/active. Kein ::after-Underline mehr.
   ─────────────────────────────────────────────────────────────────────────── */

/* Sicherstellen dass li relativ positioniert ist und overflow sauber */
header.header-style2 .navbar-nav > li.nav-item {
  position: relative;
}

/* Pill via ::before — hinter dem Link-Text, transition auf opacity+transform */
header.header-style2 .navbar-nav > li.nav-item > a.nav-link::before {
  content: "";
  position: absolute;
  inset: 6px -2px;               /* 6px Abstand oben/unten, 2px Überlapp links/rechts */
  border-radius: 6px;
  background: linear-gradient(
    135deg,
    rgb(200 166 101 / 0.10) 0%,
    rgb(15 49 58 / 0.07) 100%
  );
  border: 1px solid rgb(200 166 101 / 0.18);
  opacity: 0;
  transform: scale(0.92);
  transform-origin: center center;
  transition:
    opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);  /* subtle spring */
  pointer-events: none;
  z-index: -1;
}

/* Hover: Pill einblenden */
header.header-style2 .navbar-nav > li.nav-item:hover > a.nav-link::before,
header.header-style2 .navbar-nav > li.nav-item:focus-within > a.nav-link::before {
  opacity: 1;
  transform: scale(1);
}

/* Active / Open (Dropdown offen): Pill permanent + leicht stärker */
header.header-style2 .navbar-nav > li.nav-item.active > a.nav-link::before,
header.header-style2 .navbar-nav > li.nav-item.open > a.nav-link::before,
header.header-style2 .navbar-nav > li.nav-item.current > a.nav-link::before {
  opacity: 1;
  transform: scale(1);
  background: linear-gradient(
    135deg,
    rgb(200 166 101 / 0.15) 0%,
    rgb(15 49 58 / 0.09) 100%
  );
  border-color: rgb(200 166 101 / 0.28);
}

/* Text-Farbe bei Hover bleibt Gold-Dark (war schon so) */
header.header-style2 .navbar-nav > li.nav-item:hover > a.nav-link,
header.header-style2 .navbar-nav > li.nav-item.active > a.nav-link,
header.header-style2 .navbar-nav > li.nav-item.open > a.nav-link,
header.header-style2 .navbar-nav > li.nav-item.current > a.nav-link {
  color: var(--ck-gold-dark, #a8884b) !important;
}

/* Nav-Link braucht position:relative damit ::before darunter liegt */
header.header-style2 .navbar-nav > li.nav-item > a.nav-link {
  position: relative;
}

/* Reduced-Motion: keine Transform-Animation, Pill bleibt aber sichtbar */
@media (prefers-reduced-motion: reduce) {
  header.header-style2 .navbar-nav > li.nav-item > a.nav-link::before {
    transition: opacity 0.15s ease;
    transform: scale(1) !important;
  }
}

/* ============================================================
   YELLOW → BRAND-GOLD SITEWIDE SWEEP (2026-04-30)
   Override für kargon vendor butn-style* + Bootstrap warning + WP amber.
   Vendor-CSS bleibt unangetastet — nur Overrides hier.
   Brand-Gold #c8a665, Hover #a8884b, Petrol #0f313a für Text.
   Text-Color: Petrol auf Gold = AAA Kontrast 6.5:1.
   ============================================================ */

/* Kargon butn-style2 — sitewide gold statt ffc107 */
.butn-style2 {
  background-color: var(--ck-gold, #c8a665) !important;
  border-color: var(--ck-gold, #c8a665) !important;
  color: #ffffff !important;
}
.butn-style2:hover,
.butn-style2:focus,
.butn-style2:active {
  background-color: var(--ck-gold-dark, #a8884b) !important;
  border-color: var(--ck-gold-dark, #a8884b) !important;
  color: #ffffff !important;
}

/* Kargon butn-style3 — sitewide gold statt ffc107 (CTA "Verzollung anfragen" etc.) */
.butn-style3 {
  background-color: var(--ck-gold, #c8a665) !important;
  color: #ffffff !important;
}
.butn-style3:hover,
.butn-style3:focus,
.butn-style3:active {
  background-color: var(--ck-gold-dark, #a8884b) !important;
  color: #ffffff !important;
}
.butn-style3.white {
  background-color: #ffffff !important;
  color: var(--ck-petrol, #0f313a) !important;
}

/* Kargon butn-style1 — auch außerhalb des headers konsistent gold (Defense-in-Depth) */
.butn-style1 {
  background: var(--ck-gold, #c8a665) !important;
  color: #ffffff !important;
}
.butn-style1.secondary {
  background: var(--ck-gold, #c8a665) !important;
}
.butn-style1.white {
  background: #ffffff !important;
  color: var(--ck-petrol, #0f313a) !important;
}
.butn-style1:hover {
  color: #ffffff !important;
}

/* Bootstrap warning-Klassen → Brand-Gold (defensive — nicht aktuell genutzt, aber vendor-CSS hat sie) */
.bg-warning,
.btn-warning {
  background-color: var(--ck-gold, #c8a665) !important;
  border-color: var(--ck-gold, #c8a665) !important;
  color: var(--ck-petrol, #0f313a) !important;
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
  background-color: var(--ck-gold-dark, #a8884b) !important;
  border-color: var(--ck-gold-dark, #a8884b) !important;
  color: #ffffff !important;
}
.text-warning {
  color: var(--ck-gold-dark, #a8884b) !important;
}

/* WP-Preset amber → Brand-Gold (Block-Editor-Klassen, falls jemals genutzt) */
.has-luminous-vivid-amber-color {
  color: var(--ck-gold-dark, #a8884b) !important;
}
.has-luminous-vivid-amber-background-color {
  background-color: var(--ck-gold, #c8a665) !important;
  color: var(--ck-petrol, #0f313a) !important;
}
.has-luminous-vivid-amber-border-color {
  border-color: var(--ck-gold, #c8a665) !important;
}

/* Helle Yellow-BG (Bootstrap alert-warning, fff3cd) → Cream-Tint mit Petrol-Text */
.alert-warning,
.bg-warning-subtle {
  background-color: #faf6ec !important;
  border-color: var(--ck-gold-light, #e7d4a8) !important;
  color: var(--ck-petrol, #0f313a) !important;
}

/* Utility-Klassen für eigenes Markup */
.bg-ck-gold {
  background-color: var(--ck-gold, #c8a665) !important;
  color: var(--ck-petrol, #0f313a) !important;
}
.bg-ck-gold-dark {
  background-color: var(--ck-gold-dark, #a8884b) !important;
  color: #ffffff !important;
}
.bg-ck-cream {
  background-color: #faf6ec !important;
  color: var(--ck-petrol, #0f313a) !important;
}
.text-ck-gold {
  color: var(--ck-gold, #c8a665) !important;
}
.text-ck-gold-dark {
  color: var(--ck-gold-dark, #a8884b) !important;
}
.border-ck-gold {
  border-color: var(--ck-gold, #c8a665) !important;
}

/* ============================================================
   ORANGE/RED → BRAND-GOLD SITEWIDE SWEEP (2026-04-30)
   Quelle Elementor/WP-Erbe: orange-rote Marketing-Akzente
   (Globus/Pokal/Medaille/Stock-Icons) + WP-Preset
   "luminous-vivid-orange" + "vivid-red" Klassen.
   ZWECK: Marketing-Akzente werden Gold; ECHTE Error-/Validation-States
   bleiben rot (Bootstrap is-invalid, .invalid-feedback etc. werden NICHT
   überschrieben — die haben weiterhin ihren semantischen Wert).
   ============================================================ */

/* Marketing-Icons aus dem Elementor-About/Why-Choose-Bereich
   (icon-1 Excellent-Service-Medaille, icon-2 Pokal/Fiskal,
    icon-3 Globus/Weltweite-Expertise, icon-7 Lager/Stock).
   Quelle: orange-rotes PNG-Raster auf transparent →
   per CSS-Filter zu Brand-Gold #c8a665 recoloriert.
   Filter berechnet via codepen.io/sosuke filter-recolor:
   bringt jede deckende Farbe auf #c8a665. Idempotent. */
img.w-65px[src*="/assets/uploads/2024/12/icon-1.png"],
img.w-65px[src*="/assets/uploads/2024/12/icon-2.png"],
img.w-65px[src*="/assets/uploads/2024/12/icon-3.png"],
img.w-65px[src*="/assets/uploads/2024/12/icon-7.png"] {
  filter: brightness(0) saturate(100%) invert(72%) sepia(34%) saturate(548%) hue-rotate(7deg) brightness(89%) contrast(85%);
}

/* WP-Preset luminous-vivid-orange → Brand-Gold
   (Block-Editor-Utility, falls jemals an einem Element). */
.has-luminous-vivid-orange-color {
  color: var(--ck-gold-dark, #a8884b) !important;
}
.has-luminous-vivid-orange-background-color {
  background-color: var(--ck-gold, #c8a665) !important;
  color: var(--ck-petrol, #0f313a) !important;
}
.has-luminous-vivid-orange-border-color {
  border-color: var(--ck-gold, #c8a665) !important;
}

/* WP-Preset Gradient-Klassen, die orange/red enthalten — zu solidem Gold.
   (Defensiv: aktuell nicht benutzt im src/, aber vendor-CSS definiert sie
   und Elementor-Inline-HTML könnte sie referenzieren.) */
.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background,
.has-luminous-vivid-orange-to-vivid-red-gradient-background {
  background: linear-gradient(135deg, var(--ck-gold-light, #e7d4a8) 0%, var(--ck-gold, #c8a665) 100%) !important;
  color: var(--ck-petrol, #0f313a) !important;
}

/* Hinweis: ECHTE Error-States bewusst NICHT angefasst —
   Bootstrap .is-invalid, .invalid-feedback, .form-control.is-invalid,
   alert-danger Body-Text, 404-Header behalten ihre semantische
   Rot-Farbe. .text-danger / .bg-danger / .btn-danger sind oben in
   BaseLayout.astro bereits zu Gold gemappt — DAS ist fragwürdig
   (mischt Marketing-Use mit Error-Use), aber bewusst NICHT in diesem
   Worker geändert (separate Decision: Error-States sollen rot bleiben). */