/*
Theme Name:        Kitebuggyschule 2026
Theme URI:         https://die-kitebuggyschule.de
Description:       Child-Theme für WoodMart – Kitebuggyschule Ammersee 2026 Design. Cineastisch, dunkel, Electric Yellow. Optimiert für Elementor.
Author:            Die Kitebuggyschule
Author URI:        https://die-kitebuggyschule.de
Template:          woodmart
Version:           1.0.0
Requires at least: 6.4
Tested up to:      6.7
Requires PHP:      8.1
License:           GNU General Public License v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       kitebuggyschule
Tags:              dark, custom-colors, full-width-template, elementor, woodmart-child
*/

/* ============================================================
   DESIGN TOKENS — Kitebuggyschule 2026
   Alle Farben, Schriften & Abstände zentral änderbar
   ============================================================ */
:root {
  --ks-ink:          #070709;
  --ks-ink2:         #0e0e12;
  --ks-surface:      #141418;
  --ks-paper:        #f2efe8;
  --ks-muted:        rgba(242, 239, 232, 0.52);
  --ks-muted2:       rgba(242, 239, 232, 0.12);
  --ks-accent:       #e9f72a;      /* Electric Yellow — Primärfarbe */
  --ks-accent2:      #2af7c8;     /* Teal — Sekundärfarbe */
  --ks-red:          #ff3525;
  --ks-border:       rgba(242, 239, 232, 0.09);

  --ks-font-display: 'Oswald', sans-serif;
  --ks-font-body:    'DM Sans', sans-serif;

  --ks-radius:       0px;          /* kein Border-Radius — kantig & modern */
  --ks-clip-btn:     polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  --ks-clip-btn-sm:  polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}

/* ============================================================
   GLOBAL RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  background-color: var(--ks-ink) !important;
  color: var(--ks-paper) !important;
  font-family: var(--ks-font-body) !important;
  line-height: 1.65;
  overflow-x: hidden;
}

/* WoodMart / Elementor Container überschreiben */
.woodmart-content-holder,
.site-content,
#page,
.wd-wrapper {
  background-color: var(--ks-ink) !important;
}

/* Alle Headings auf Display-Font */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  font-family: var(--ks-font-display) !important;
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.01em;
  color: var(--ks-paper);
}

p, li, span, a {
  font-family: var(--ks-font-body);
}

a {
  color: var(--ks-accent);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover { color: var(--ks-paper); }

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
body { cursor: none; }

.ks-cursor {
  position: fixed;
  width: 10px; height: 10px;
  background: var(--ks-accent);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width 0.25s, height 0.25s;
  mix-blend-mode: difference;
}
.ks-cursor-ring {
  position: fixed;
  width: 38px; height: 38px;
  border: 1px solid rgba(233, 247, 42, 0.5);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: width 0.3s, height 0.3s, border-color 0.3s;
  mix-blend-mode: difference;
}
.ks-cursor.hov { width: 20px; height: 20px; }
.ks-cursor-ring.hov { width: 62px; height: 62px; border-color: var(--ks-accent); }

/* ============================================================
   NAVIGATION — WoodMart Header überschreiben
   ============================================================ */
.wd-header,
.woodmart-header,
#site-header {
  background: transparent !important;
  border-bottom: 1px solid transparent !important;
  transition: background 0.4s ease, padding 0.4s ease, border-color 0.4s ease !important;
}
.wd-header.ks-scrolled,
.woodmart-header.ks-scrolled {
  background: rgba(7, 7, 9, 0.9) !important;
  backdrop-filter: blur(24px) !important;
  border-color: var(--ks-border) !important;
}

/* Logo */
.woodmart-logo img,
.wd-site-logo img {
  filter: brightness(0) invert(1);
  height: 44px;
  width: auto;
  object-fit: contain;
}

/* Nav-Links */
.woodmart-navigation .menu > li > a,
.wd-nav > li > a {
  color: var(--ks-muted) !important;
  font-family: var(--ks-font-body) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  transition: color 0.2s !important;
}
.woodmart-navigation .menu > li > a:hover,
.wd-nav > li > a:hover {
  color: var(--ks-paper) !important;
}

/* CTA Button in Nav */
.wd-header .ks-nav-cta {
  background: var(--ks-accent) !important;
  color: var(--ks-ink) !important;
  font-weight: 600 !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  clip-path: var(--ks-clip-btn-sm) !important;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s !important;
}
.wd-header .ks-nav-cta:hover {
  background: #d4e318 !important;
  transform: scale(1.04) !important;
  box-shadow: 0 8px 30px rgba(233, 247, 42, 0.35) !important;
}

/* ============================================================
   ELEMENTOR — GLOBAL WIDGET OVERRIDES
   ============================================================ */

/* Section / Container Hintergrund */
.elementor-section,
.elementor-container,
.e-con,
.e-con-inner {
  background-color: transparent;
}

/* Headings */
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--ks-font-display) !important;
  color: var(--ks-paper) !important;
}
.elementor-widget-heading .elementor-heading-title.ks-accent {
  color: var(--ks-accent) !important;
}

/* Text Editor */
.elementor-widget-text-editor,
.elementor-widget-text-editor p {
  color: var(--ks-muted) !important;
  font-weight: 300 !important;
  line-height: 1.8 !important;
}

/* Buttons */
.elementor-button,
.elementor-widget-button .elementor-button {
  background: var(--ks-accent) !important;
  color: var(--ks-ink) !important;
  font-family: var(--ks-font-body) !important;
  font-weight: 600 !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 0 !important;
  clip-path: var(--ks-clip-btn) !important;
  transition: transform 0.25s, box-shadow 0.25s, background 0.2s !important;
  padding: 1.1rem 2.8rem !important;
}
.elementor-button:hover,
.elementor-widget-button .elementor-button:hover {
  background: #d4e318 !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 16px 50px rgba(233, 247, 42, 0.4) !important;
  color: var(--ks-ink) !important;
}

/* Ghost Button Variante — Custom CSS Class: ks-btn-ghost */
.ks-btn-ghost .elementor-button {
  background: transparent !important;
  color: var(--ks-muted) !important;
  clip-path: none !important;
  border-bottom: 1px solid var(--ks-muted2) !important;
  padding: 0.9rem 0 !important;
}
.ks-btn-ghost .elementor-button:hover {
  color: var(--ks-paper) !important;
  border-color: rgba(242, 239, 232, 0.4) !important;
  transform: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Divider */
.elementor-divider-separator {
  border-color: var(--ks-border) !important;
}

/* ============================================================
   VIDEO WIDGET — Hero & Showcase
   ============================================================ */
.elementor-widget-video .elementor-video,
.elementor-widget-video iframe,
.elementor-widget-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hero Video Section — CSS Class: ks-hero-video */
.ks-hero-video {
  position: relative;
  overflow: hidden;
}
.ks-hero-video .elementor-background-video-container video {
  opacity: 0.82 !important;
}
.ks-hero-video::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(7, 7, 9, 0.95) 0%,
    rgba(7, 7, 9, 0.38) 45%,
    rgba(7, 7, 9, 0.08) 100%
  );
  pointer-events: none;
  z-index: 1;
}
.ks-hero-video .elementor-container { position: relative; z-index: 2; }

/* Video Showcase — CSS Class: ks-video-showcase */
.ks-video-showcase .elementor-background-video-container video {
  opacity: 0.78 !important;
}
.ks-video-showcase::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(7, 7, 9, 0.82) 0%,
    rgba(7, 7, 9, 0.22) 60%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}
.ks-video-showcase .elementor-container { position: relative; z-index: 2; }

/* ============================================================
   KURS CARDS — CSS Class: ks-kurs-card
   ============================================================ */
.ks-kurs-card {
  position: relative;
  overflow: hidden;
  background: var(--ks-ink);
  border: 1px solid var(--ks-border);
  transition: background 0.3s ease;
  min-height: 480px;
  display: flex;
  flex-direction: column;
}
.ks-kurs-card:hover { background: var(--ks-surface); }

.ks-kurs-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right, var(--ks-accent), var(--ks-accent2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
  z-index: 2;
}
.ks-kurs-card:hover::before { transform: scaleX(1); }

/* Video Overlay in Kurs-Cards */
.ks-kurs-card .elementor-background-video-container video {
  opacity: 0.25 !important;
  transition: opacity 0.6s ease !important;
}
.ks-kurs-card:hover .elementor-background-video-container video {
  opacity: 0.65 !important;
}
.ks-kurs-card .elementor-background-overlay {
  background: linear-gradient(
    to top,
    rgba(7, 7, 9, 0.95) 0%,
    rgba(7, 7, 9, 0.50) 50%,
    rgba(7, 7, 9, 0.12) 100%
  ) !important;
  opacity: 1 !important;
}

/* Kurs Preis */
.ks-price {
  font-family: var(--ks-font-display) !important;
  font-size: 2.5rem !important;
  font-weight: 700 !important;
  color: var(--ks-accent) !important;
  line-height: 1 !important;
}
.ks-price-unit {
  font-family: var(--ks-font-body) !important;
  font-size: 0.8rem !important;
  color: var(--ks-muted) !important;
  font-weight: 300 !important;
}

/* ============================================================
   STAT BLOCKS — CSS Class: ks-stat
   ============================================================ */
.ks-stat {
  padding: 3.5rem;
  border-right: 1px solid var(--ks-border);
  border-bottom: 1px solid var(--ks-border);
  position: relative;
  overflow: hidden;
  transition: background 0.3s;
}
.ks-stat:hover { background: var(--ks-surface); }
.ks-stat::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right, var(--ks-accent), var(--ks-accent2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
}
.ks-stat:hover::after { transform: scaleX(1); }

.ks-stat-number {
  font-family: var(--ks-font-display) !important;
  font-size: 4.5rem !important;
  font-weight: 700 !important;
  color: var(--ks-accent) !important;
  line-height: 1 !important;
  display: block;
  margin-bottom: 0.5rem;
}
.ks-stat-label {
  font-size: 0.72rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--ks-muted) !important;
}

/* ============================================================
   SECTION LABEL TAG — CSS Class: ks-label-tag
   ============================================================ */
.ks-label-tag {
  display: flex !important;
  align-items: center !important;
  gap: 0.8rem !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--ks-accent) !important;
}
.ks-label-tag::before {
  content: '';
  display: inline-block;
  width: 24px; height: 1px;
  background: var(--ks-accent);
  flex-shrink: 0;
}

/* ============================================================
   TICKER / MARQUEE — CSS Class: ks-ticker
   ============================================================ */
.ks-ticker {
  background: var(--ks-accent) !important;
  overflow: hidden;
  padding: 0.85rem 0;
}
.ks-ticker-inner {
  display: flex;
  animation: ksTicker 22s linear infinite;
  width: max-content;
}
@keyframes ksTicker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.ks-ticker-item {
  font-family: var(--ks-font-display);
  font-size: 0.95rem;
  letter-spacing: 0.2em;
  font-weight: 500;
  color: var(--ks-ink);
  padding: 0 2.5rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  white-space: nowrap;
}
.ks-ticker-item::after {
  content: '✦';
  font-size: 0.6rem;
}

/* ============================================================
   SCROLL-REVEAL ANIMATION
   ============================================================ */
.ks-reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.ks-reveal.ks-visible {
  opacity: 1;
  transform: translateY(0);
}
.ks-delay-1 { transition-delay: 0.15s; }
.ks-delay-2 { transition-delay: 0.30s; }
.ks-delay-3 { transition-delay: 0.45s; }

/* ============================================================
   MAP / STANDORT BLOCK — CSS Class: ks-map-block
   ============================================================ */
.ks-map-block {
  aspect-ratio: 1;
  background: var(--ks-ink2);
  border: 1px solid var(--ks-border);
  position: relative;
  overflow: hidden;
}
.ks-map-pin {
  position: absolute;
  top: 50%; left: 50%;
  width: 14px; height: 14px;
  background: var(--ks-accent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow:
    0 0 0 8px rgba(233, 247, 42, 0.2),
    0 0 0 20px rgba(233, 247, 42, 0.07);
  animation: ksMapPulse 2s ease-in-out infinite;
}
@keyframes ksMapPulse {
  0%, 100% { box-shadow: 0 0 0 8px rgba(233,247,42,.2), 0 0 0 20px rgba(233,247,42,.07); }
  50%       { box-shadow: 0 0 0 14px rgba(233,247,42,.15), 0 0 0 30px rgba(233,247,42,.04); }
}

/* ============================================================
   MEDIA GRID — CSS Class: ks-media-grid
   ============================================================ */
.ks-media-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--ks-border);
}
.ks-media-card {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--ks-surface);
}
.ks-media-card video {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.ks-media-card:hover video { transform: scale(1.04); }

/* ============================================================
   FOOTER — WoodMart Footer überschreiben
   ============================================================ */
.woodmart-footer,
.wd-footer,
#colophon {
  background: var(--ks-ink2) !important;
  border-top: 1px solid var(--ks-border) !important;
  color: var(--ks-muted) !important;
}
.woodmart-footer h4,
.wd-footer h4,
.woodmart-footer .widget-title,
.wd-footer .widget-title {
  font-family: var(--ks-font-body) !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  color: var(--ks-accent) !important;
  font-weight: 400 !important;
  margin-bottom: 1.5rem !important;
}
.woodmart-footer a,
.wd-footer a {
  color: var(--ks-muted) !important;
  transition: color 0.2s !important;
}
.woodmart-footer a:hover,
.wd-footer a:hover {
  color: var(--ks-paper) !important;
}
.woodmart-copyright,
.wd-footer-copyright {
  background: var(--ks-ink2) !important;
  border-top: 1px solid var(--ks-border) !important;
  color: var(--ks-muted) !important;
  font-size: 0.75rem !important;
}

/* ============================================================
   WOOCOMMERCE (Shop) — optional, falls Kurse als Produkte
   ============================================================ */
.woocommerce .button,
.woocommerce-page .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button {
  background: var(--ks-accent) !important;
  color: var(--ks-ink) !important;
  font-weight: 600 !important;
  border-radius: 0 !important;
  clip-path: var(--ks-clip-btn-sm) !important;
  transition: transform 0.2s, background 0.2s !important;
  font-family: var(--ks-font-body) !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}
.woocommerce .button:hover { background: #d4e318 !important; }

/* Produkt-Preise */
.woocommerce .price,
.woocommerce-Price-amount {
  color: var(--ks-accent) !important;
  font-family: var(--ks-font-display) !important;
  font-size: 1.5rem !important;
}