/*
Theme Name: Landing Event
Theme URI: https://www.doebele.org/
Author: Doebele Kunst & Design
Description: Eigenständiges Theme für gesponserte Event-Landingpages mit animiertem Header/Footer, Musik-Noten-Hintergrund und Custom Hero. Header und Footer für alle Seiten gleich, Inhalt der Startseite in front-page.php.
Version: 1.0.0
Text Domain: landing-event
*/

@font-face { font-family:'Outfit'; font-style:normal; font-weight:300; font-display:swap; src:url('fonts/outfit-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family:'Outfit'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/outfit-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'Outfit'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/outfit-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family:'Outfit'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/outfit-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family:'Outfit'; font-style:normal; font-weight:800; font-display:swap; src:url('fonts/outfit-latin-800-normal.woff2') format('woff2'); }

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

/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN TOKENS - PRO PROJEKT HIER ANPASSEN

   Das komplette Farbschema wird über CSS Custom Properties gesteuert.
   Für ein neues Projekt reicht es aus, die drei Farben --red, --blue
   und ggf. --text anzupassen — alles andere zieht automatisch mit.

   FARBPALETTE (an Projekt anpassen):
   --red         Primärakzent (Badges, Highlights, Links, Error)
   --red-light   Hover-State für Rot
   --red-soft    Dezentes Rot (Border hover, subtle Akzente)
   --blue        Sekundärakzent (Überschriften, Buttons, Step-Indikator)
   --blue-light  Hover-State für Blau
   --blue-soft   Dezentes Blau (Music Notes, subtle Akzente)

   NEUTRAL (meist unverändert):
   --text        Haupt-Textfarbe
   --text-light  Fließtext
   --text-muted  Nebentext
   --border      Trennlinien, Input-Borders
   --bg / --white Hintergründe

   FONT:
   Body nutzt 'Outfit' - Fonts liegen in /fonts/ als WOFF2
   Für anderen Font: @font-face Blöcke ersetzen + body font-family
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Rot (Primärakzent) ── */
  --red:#c12628;
  --red-light:#d94050;
  --red-soft:#e8a0a8;
  --red-bg:rgba(193,38,40,.04);

  /* ── Blau (Sekundärakzent) ── */
  --blue:#125f9a;
  --blue-light:#2a6faa;
  --blue-soft:#c5d8ea;

  /* ── Neutrale Farben ── */
  --silver:#9a9a9a;
  --silver-light:#d0d0d0;
  --white:#ffffff;
  --bg:#ffffff;
  --text:#2c2c2c;
  --text-light:#6a6a6a;
  --text-muted:#999;
  --border:#e4e0dc;

  /* ── Elementor Global Color Overrides ──
     Elementor nutzt eigene CSS-Variablen fuer Primaer/Sekundaer/Text/Akzent.
     Wir ueberschreiben sie damit Elementor-Widgets automatisch die Theme-Farben
     nutzen (Headings, Buttons, Icons etc.) ohne in Elementor etwas einzustellen. */
  --e-global-color-primary:#125f9a;
  --e-global-color-secondary:#125f9a;
  --e-global-color-text:#2c2c2c;
  --e-global-color-accent:#c12628;
  --e-global-typography-primary-font-family:'Outfit',sans-serif;
  --e-global-typography-secondary-font-family:'Outfit',sans-serif;
  --e-global-typography-text-font-family:'Outfit',sans-serif;
  --e-global-typography-accent-font-family:'Outfit',sans-serif;
}

/* Elementor Kit Override (Fallback fuer ganz spezifische Regeln) */
[class*="elementor-kit-"] h1,
[class*="elementor-kit-"] h2,
[class*="elementor-kit-"] h3,
[class*="elementor-kit-"] h4,
[class*="elementor-kit-"] h5,
[class*="elementor-kit-"] h6 {
  color:var(--blue) !important;
}

html { scroll-behavior:smooth; }
body { font-family:'Outfit',sans-serif; background:var(--bg); color:var(--text); overflow-x:hidden; -webkit-font-smoothing:antialiased; }

/* ═══════════════════════════════════════════════════════════════════════════
   GLOBAL HEADINGS
   Alle Überschriften h1-h6 einheitlich in Primärblau.
   Wird sowohl für Theme-Templates als auch für WordPress/Elementor-Content
   angewendet. !important erzwingt den Override über Elementor/Plugin-Styles.
   ═══════════════════════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.elementor-widget-heading .elementor-heading-title,
.ff-el-section-title,
.fluentform .ff-el-section-title {
  font-family:'Outfit',sans-serif !important;
  color:var(--blue) !important;
  font-weight:700 !important;
  line-height:1.25 !important;
  margin:0 0 .8rem !important;
}
h1 { font-size:clamp(1.8rem,4vw,2.5rem) !important; font-weight:800 !important; }
h2 { font-size:clamp(1.4rem,3vw,1.9rem) !important; }
h3 { font-size:clamp(1.15rem,2.5vw,1.4rem) !important; }
h4 { font-size:1.1rem !important; }
h5 { font-size:1rem !important; }
h6 { font-size:.9rem !important; text-transform:uppercase !important; letter-spacing:.06em !important; }

/* Elementor Button Text - Farbe und Font */
.elementor-button-text {
  font-family:'Outfit',sans-serif !important;
  color:var(--blue) !important;
  font-weight:700 !important;
  letter-spacing:.02em !important;
}
/* Elementor Button an Design anpassen (schlicht, ohne schraege Rotation) */
.elementor-button,
a.elementor-button,
.elementor-widget-button .elementor-button {
  background:transparent !important;
  border:2px solid var(--blue) !important;
  color:var(--blue) !important;
  border-radius:3px !important;
  font-family:'Outfit',sans-serif !important;
  font-weight:700 !important;
  padding:.7rem 1.6rem !important;
  transition:all .25s ease !important;
}
/* Button Icon - im Default-State blau */
.elementor-button .elementor-button-icon,
.elementor-button .elementor-button-icon i,
.elementor-button .elementor-button-icon svg,
.elementor-button-icon,
.elementor-button-icon i,
.elementor-button-icon svg {
  color:var(--blue) !important;
  fill:var(--blue) !important;
}
.elementor-button:hover,
a.elementor-button:hover,
.elementor-widget-button .elementor-button:hover {
  background:var(--blue) !important;
  color:var(--white) !important;
}
.elementor-button:hover .elementor-button-text,
.elementor-button:hover .elementor-button-icon,
.elementor-button:hover .elementor-button-icon i,
.elementor-button:hover .elementor-button-icon svg {
  color:var(--white) !important;
  fill:var(--white) !important;
}

/* MUSIC NOTES */
.note { position:fixed; pointer-events:none; z-index:0; font-size:18px; opacity:0; }

/* TOP + BOTTOM ACCENT */
.top-accent { height:4px; background:linear-gradient(90deg,var(--red),var(--blue),var(--red)); background-size:200% 100%; animation:slideAcc 6s ease-in-out infinite; position:relative; z-index:10; }
.bottom-accent { height:4px; background:linear-gradient(90deg,var(--blue),var(--red),var(--blue)); background-size:200% 100%; animation:slideAcc 6s ease-in-out infinite; position:relative; z-index:2; }
@keyframes slideAcc { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }

/* Content-Wrapper ueber Notes-Layer (.note hat z-index:0) */
/* Transparente Content-Bereiche lassen Notes durchscheinen, opake decken sie ab */
main.page-content, .hero, .content-section, .banner, .cards-section, .site-footer { position:relative; z-index:2; }

/* ═══════════════════════════════════════════════════════════════════════════
   MAX MEGA MENU - Custom Styling
   Aus SCSS ins Theme portiert. Nutzt Theme-Farben (--blue, --red, --border).
   $wrap  → #mega-menu-wrap-primary
   $menu  → #mega-menu-primary
   Mobile-Breakpoint MMM-Default: 960px
   ═══════════════════════════════════════════════════════════════════════════ */

#mega-menu-wrap-primary { clear:both; }

/* Menu Toggle Button (Hamburger) - transparent */
#mega-menu-wrap-primary .mega-menu-toggle,
#mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block,
#mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-blocks-right,
#mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-blocks-left,
#mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-blocks-center,
#mega-toggle-block-1,
#mega-toggle-block-1 button,
#mega-toggle-block-1 .mega-toggle-animated-box {
  background:transparent !important;
  background-color:transparent !important;
  box-shadow:none !important;
}

/* Astra-Kompatibilitaet */
.mega-menu-primary .main-header-bar-navigation { display:block !important; }
.mega-menu-primary .ast-mobile-menu-buttons { display:none !important; }

@media (max-width:960px) {

  /* Submenu Background auf Mobile transparent */
  body.mega-menu-primary #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu {
    background:none;
  }
  body.mega-menu-primary #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link {
    text-align:center;
  }

  /* Indicator nicht floaten */
  #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator {
    float:none;
  }
  #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item-has-children > a.mega-menu-link {
    padding-left:25px !important;
  }

  /* ─── EBENE 1: Hauptmenüpunkte ─── */
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link,
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover,
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:focus,
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link[aria-expanded="true"],
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link,
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link,
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link {
    background:transparent !important;
    border-color:transparent !important;
    transition:none !important;
  }

  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
    font-family:'Outfit',sans-serif !important;
    font-size:20px !important;
    font-weight:700 !important;
    line-height:36px !important;
    height:36px !important;
    padding:0 10px !important;
    color:var(--text) !important;
    text-transform:uppercase !important;
    letter-spacing:.04em !important;
  }

  /* Aktiver / geöffneter Menüpunkt = blau */
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link,
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link {
    color:var(--blue) !important;
  }

  /* Trennlinien zwischen Hauptpunkten */
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item {
    margin:0 !important;
    padding:2px 0 !important;
    border-bottom:1px solid var(--border) !important;
  }
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:last-child {
    border-bottom:none !important;
  }

  /* ─── EBENE 2: Submenu Container ─── */
  #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item ul.mega-sub-menu {
    background:rgba(255,255,255,.6) !important;
    padding:5px 0 !important;
    margin:0 !important;
    border-left:3px solid var(--blue) !important;
    transition:opacity .2s ease !important;
  }

  /* ─── EBENE 2: Submenu Links ─── */
  #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link {
    font-family:'Outfit',sans-serif !important;
    color:var(--text) !important;
    background:transparent !important;
    font-size:17px !important;
    font-weight:500 !important;
    line-height:30px !important;
    height:30px !important;
    padding:0 15px !important;
    text-align:center !important;
  }

  /* Submenu Hover/Focus = rot */
  #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link:hover,
  #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link:focus {
    color:var(--red) !important;
    background:transparent !important;
  }

  /* Aktiver Submenu-Punkt = blau fett */
  #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item ul.mega-sub-menu li.mega-current-menu-item > a.mega-menu-link {
    color:var(--blue) !important;
    font-weight:700 !important;
    background:transparent !important;
  }

  /* ─── FULLSCREEN Menü ─── */
  /* Gradient auch während Close-Animation beibehalten - daher OHNE .mega-menu-open Requirement */
  #mega-menu-wrap-primary #mega-menu-primary {
    background:linear-gradient(180deg,#ffffff 0%,#f5f5f7 100%) !important;
    transition:none !important;
  }
  #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open + #mega-menu-primary {
    padding-top:0 !important;
    margin-top:0 !important;
  }
  /* Auch der Wrap selbst bekommt den Gradient als Fallback */
  #mega-menu-wrap-primary.mega-menu-mobile-open,
  body.mega-menu-primary-mobile-open #mega-menu-wrap-primary {
    background:linear-gradient(180deg,#ffffff 0%,#f5f5f7 100%) !important;
  }

  #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open {
    height:0 !important;
    min-height:0 !important;
    padding:0 !important;
    margin:0 !important;
    overflow:hidden !important;
  }

  .ast-mobile-header-wrap #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open + #mega-menu-primary {
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
  }

  .ast-mobile-header-wrap #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:first-child {
    margin-top:0;
  }
}

@media (max-width:1024px) {
  #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open + #mega-menu-primary {
    width:100%;
    max-width:100%;
  }

  /* Toggle Button Reset */
  #mega-menu-wrap-primary .mega-menu-toggle { transition:none !important; }
  #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open {
    background:transparent !important;
    background-color:transparent !important;
    border:none !important;
    box-shadow:none !important;
  }
  #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open .mega-toggle-block,
  #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open .mega-toggle-block-0,
  #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open img,
  #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block,
  #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-0 {
    transition:none !important;
  }

  /* Verhindere Stacking-Context-Probleme: Menu-Container darf keinen Transform haben */
  body #mega-menu-wrap-primary,
  body #mega-menu-wrap-primary .mega-menu-toggle,
  body #mega-menu-wrap-primary #mega-menu-primary {
    transform:none !important;
    filter:none !important;
    will-change:auto !important;
    perspective:none !important;
  }
  body #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open + #mega-menu-primary {
    z-index:99 !important;
  }

  /* ─── CLOSE Button (rundes X oben rechts) ─── */
  /* Default versteckt - wird nur sichtbar wenn Toggle .mega-menu-open hat */
  body #mega-menu-wrap-primary button.mega-close,
  body button.mega-close {
    display:none !important;
  }
  body #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open ~ button.mega-close,
  body #mega-menu-wrap-primary .mega-menu-toggle ~ button.mega-close.mega-menu-open,
  html body #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open ~ button.mega-close {
    background:#125f9a url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PGxpbmUgeDE9IjYiIHkxPSI2IiB4Mj0iMTgiIHkyPSIxOCIvPjxsaW5lIHgxPSIxOCIgeTE9IjYiIHgyPSI2IiB5Mj0iMTgiLz48L3N2Zz4=") no-repeat center center !important;
    background-size:20px 20px !important;
    background-color:#125f9a !important;
    border:2px solid #ffffff !important;
    box-shadow:0 2px 8px rgba(0,0,0,0.15) !important;
    position:fixed !important;
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    width:40px !important;
    height:40px !important;
    border-radius:50% !important;
    padding:0 !important;
    margin:0 !important;
    font-size:0 !important;
    line-height:0 !important;
    color:transparent !important;
    overflow:hidden !important;
    right:15px !important;
    top:15px !important;
    left:auto !important;
    cursor:pointer !important;
    z-index:2147483647 !important;
    animation:none !important;
    transition:none !important;
  }
  body #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open ~ button.mega-close *,
  body #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open ~ button.mega-close span,
  body #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open ~ button.mega-close .mega-toggle-label {
    display:none !important;
  }
  body #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open ~ button.mega-close::before,
  body #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open ~ button.mega-close::after {
    display:none !important;
    content:none !important;
  }
}

.site-header { background:transparent; position:relative; z-index:10; padding:1.2rem 1rem .5rem; }
.site-header-inner { max-width:700px; margin:0 auto; padding:0; display:flex; flex-direction:column; align-items:center; gap:.6rem; text-align:center; }
.site-logo { display:block; width:100%; text-align:center; }
.site-logo img { display:block; max-width:min(92%,540px); height:auto; margin:0 auto; }
.site-logo.site-logo-text { font-size:1.5rem; font-weight:700; color:var(--blue); text-decoration:none; letter-spacing:.02em; }
.site-nav { width:100%; display:flex; justify-content:center; }
.site-nav ul { list-style:none; display:flex; justify-content:center; gap:1.5rem; margin:0; padding:0; flex-wrap:wrap; }
.site-nav a { color:var(--text); text-decoration:none; font-weight:600; font-size:.95rem; letter-spacing:.02em; transition:color .2s; }
.site-nav a:hover { color:var(--red); }

/* HERO */
.hero { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding:2rem 1.5rem 3rem; background:transparent; overflow:hidden; }
.hero-inner { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; max-width:600px; width:100%; }

@keyframes fadeIn { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }

/* SAVE THE DATE Badge */
.std-badge { display:inline-block; padding:.6rem 2rem; font-family:'Outfit',sans-serif; font-size:clamp(.9rem,2.2vw,1.15rem); font-weight:800; letter-spacing:.25em; text-transform:uppercase; color:var(--white); background:var(--blue); border-radius:3px; transform:rotate(-2deg); box-shadow:0 4px 20px rgba(18,95,154,.25); animation:fadeIn .7s ease .1s both,pulse 2.8s ease-in-out infinite 1.2s; margin-bottom:1.5rem; }
@keyframes pulse { 0%,100%{transform:rotate(-2deg) scale(1);box-shadow:0 4px 20px rgba(18,95,154,.25)} 50%{transform:rotate(-2deg) scale(1.04);box-shadow:0 6px 28px rgba(18,95,154,.4)} }

.hero-logo { max-width:min(92%,540px); height:auto; margin-bottom:.8rem; animation:fadeIn .7s ease .25s both; }

/* Maitanz animated gradient */
.maitanz-wrap { position:relative; max-width:min(94%,500px); width:100%; margin-bottom:1.5rem; animation:fadeIn .7s ease .4s both; }
.maitanz-wrap img { display:block; width:100%; height:auto; visibility:hidden; }
.maitanz-gradient { position:absolute; inset:0; background:linear-gradient(90deg, #1b6e1b, #2e8b2e, #4caf50, #8bc34a, #cddc39, #8bc34a, #4caf50, #2e8b2e, #1b6e1b); background-size:400% 100%; animation:greenShift 5s ease-in-out infinite; -webkit-mask-image:url('images/maitanz.png'); mask-image:url('images/maitanz.png'); -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; }
@keyframes greenShift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }

.desktop-br { display:block; }
@media (max-width:600px) { .desktop-br { display:none; } }

/* DATE BLOCK */
.date-block { text-align:center; animation:fadeIn .7s ease .55s both; margin-bottom:.3rem; }
.date-line { font-size:clamp(1.1rem,2.8vw,1.5rem); font-weight:700; color:var(--blue); letter-spacing:.04em; }
.date-big { font-size:clamp(3.2rem,9vw,5rem); font-weight:800; color:var(--blue); line-height:.95; letter-spacing:-.02em; }
.date-sub { font-size:clamp(.85rem,2vw,1rem); font-weight:600; color:var(--text-muted); letter-spacing:.08em; margin-top:.2rem; }

/* LOCATION */
.location { animation:fadeIn .7s ease .65s both; text-align:center; margin-bottom:1.5rem; }
.location-name { font-size:clamp(1rem,2.5vw,1.25rem); font-weight:600; color:var(--text); letter-spacing:.03em; }
.location-pin { color:var(--red); margin-right:.3rem; }

/* DIVIDER */
.hr-dot { width:6px; height:6px; border-radius:50%; background:var(--red); opacity:.3; margin:1rem auto; animation:fadeIn .7s ease .55s both; }

/* COUNTDOWN */
.countdown-wrap { animation:fadeIn .7s ease .75s both; margin-bottom:1.5rem; }
.cd-title { text-align:center; font-size:.7rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--silver); margin-bottom:.6rem; }
.countdown { display:flex; gap:.4rem; justify-content:center; align-items:center; }
.cd-unit { text-align:center; min-width:58px; background:var(--white); border:1px solid var(--border); border-radius:8px; padding:.5rem .4rem; }
.cd-val { font-size:1.8rem; font-weight:800; color:var(--blue); line-height:1; }
.cd-lbl { font-size:.55rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); margin-top:.1rem; }
.cd-sep { font-size:1.2rem; color:var(--silver-light); font-weight:300; padding:0 .1rem; }

/* VVK BUTTON */
.vvk-wrap { animation:fadeIn .7s ease .85s both; margin-bottom:1rem; }
.vvk-btn { display:inline-block; padding:.8rem 2rem; font-size:1rem; font-weight:700; color:var(--white); background:var(--red); border:none; border-radius:3px; cursor:pointer; letter-spacing:.02em; box-shadow:0 3px 15px rgba(193,38,40,.2); transition:transform .3s ease,box-shadow .3s ease; outline:none; -webkit-tap-highlight-color:transparent; text-decoration:none; }
.vvk-btn:hover, .vvk-btn:focus { transform:translateY(-2px); box-shadow:0 6px 25px rgba(193,38,40,.3); color:var(--white); text-decoration:none; }
.vvk-sub { display:block; font-size:.65rem; font-weight:400; color:rgba(255,255,255,.65); margin-top:.15rem; letter-spacing:.05em; }

/* SCROLL */
.scroll-hint { margin-top:1rem; animation:bob 2.5s ease-in-out infinite 2s; }
.scroll-hint svg { width:20px; height:20px; stroke:var(--silver-light); }
@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(5px)} }

/* CONTENT SECTIONS */
.content-section { max-width:740px; margin:0 auto; padding:4rem 1.5rem; }
.sec-heading { font-size:clamp(1.5rem,4vw,2rem); font-weight:700; text-align:center; color:var(--blue); margin-bottom:1.8rem; line-height:1.3; }
.sec-heading em { font-style:normal; color:var(--red); }
.body-text { font-size:1.02rem; line-height:1.8; color:var(--text-light); text-align:center; margin-bottom:1.5rem; font-weight:300; }
.body-text strong { color:var(--text); font-weight:600; }
.body-text .hl { color:var(--red); font-weight:600; }

.details { display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; margin:2rem 0 2.5rem; }
.detail { border:1px solid var(--border); border-radius:8px; padding:1rem .6rem; text-align:center; transition:border-color .3s ease,box-shadow .3s ease; }
.detail:hover { border-color:var(--red-soft); box-shadow:0 4px 14px rgba(193,38,40,.05); }
.detail-icon { font-size:1.5rem; margin-bottom:.3rem; }
.detail-title { font-size:.88rem; font-weight:700; color:var(--red); margin-bottom:.2rem; }
.detail-text { font-size:.78rem; color:var(--text-muted); line-height:1.35; }

/* SAVE THE DATE CARDS */
.cards-section { padding:3rem 1.5rem; background:#fafafa; }
.cards-inner { max-width:740px; margin:0 auto; }
.cards-heading { font-size:1.3rem; font-weight:700; text-align:center; color:var(--blue); margin-bottom:2rem; letter-spacing:.02em; }
.cards-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.card-item { cursor:pointer; border-radius:10px; overflow:hidden; box-shadow:0 6px 24px rgba(0,0,0,.08); transition:transform .3s ease,box-shadow .3s ease; }
.card-item:hover { transform:translateY(-4px); box-shadow:0 12px 40px rgba(0,0,0,.12); }
.card-item img { display:block; width:100%; height:auto; }
.card-label { text-align:center; font-size:.7rem; color:var(--text-muted); padding:.5rem 0; font-weight:600; letter-spacing:.04em; background:var(--white); }

/* BANNER */
.banner { background:var(--blue); padding:2rem 1.5rem; text-align:center; }
.banner-text { font-size:clamp(1.05rem,2.8vw,1.4rem); font-weight:700; color:var(--white); max-width:650px; margin:0 auto; line-height:1.5; }
.banner-text .accent { color:var(--red-soft); }

/* FOOTER */
.site-footer { padding:2rem 1.5rem 1.5rem; text-align:center; border-top:1px solid var(--border); background:var(--white); }
.footer-org { font-size:.78rem; color:var(--text-muted); margin-bottom:.6rem; line-height:1.5; }
.footer-sponsor { display:flex; flex-direction:column; align-items:center; gap:.4rem; margin-bottom:1rem; }
.footer-sponsor span { font-size:.7rem; color:var(--text-muted); letter-spacing:.06em; text-transform:uppercase; font-weight:600; }
.sponsor-logo-wrap { position:relative; display:block; max-width:280px; width:80%; margin:0 auto; }
.sponsor-logo { width:100%; height:auto; opacity:.55; transition:opacity .3s ease; display:block; }
.sponsor-logo-wrap:hover .sponsor-logo { opacity:1; }
.sponsor-link { position:absolute; top:0; height:100%; width:50%; }
.sponsor-left { left:0; }
.sponsor-right { right:0; }
.footer-actions { display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }
.f-btn { background:transparent; border:1px solid var(--border); color:var(--text-muted); padding:.4rem 1.1rem; border-radius:3px; font-size:.72rem; font-family:'Outfit',sans-serif; cursor:pointer; transition:all .25s ease; text-transform:uppercase; letter-spacing:.08em; font-weight:600; text-decoration:none; outline:none; -webkit-tap-highlight-color:transparent; }
.f-btn:hover { border-color:var(--red-soft); color:var(--red); }

/* MODAL */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.3); backdrop-filter:blur(3px); z-index:1000; display:flex; align-items:center; justify-content:center; padding:1rem; opacity:0; pointer-events:none; transition:opacity .3s ease; }
.modal-overlay.active { opacity:1; pointer-events:all; }
.modal { background:var(--white); border:1px solid var(--border); border-radius:10px; max-width:500px; width:100%; max-height:85vh; overflow-y:auto; padding:2rem; transform:translateY(14px); transition:transform .3s ease; }
.modal-overlay.active .modal { transform:translateY(0); }
.modal-x { float:right; background:none; border:1px solid var(--border); border-radius:50%; width:30px; height:30px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text-muted); font-size:.9rem; font-family:sans-serif; transition:all .2s; outline:none; -webkit-tap-highlight-color:transparent; }
.modal-x:hover { border-color:var(--red-soft); color:var(--red); }
.modal h2 { font-size:1.3rem; font-weight:700; color:var(--blue); margin-bottom:1rem; }
.modal h3 { font-size:.75rem; font-weight:700; color:var(--red); margin-top:.8rem; margin-bottom:.2rem; text-transform:uppercase; letter-spacing:.08em; }
.modal p, .modal a { font-size:.8rem; color:var(--text-light); line-height:1.6; margin-bottom:.15rem; }
.modal a { color:var(--red); text-decoration:none; }
.modal a:hover { color:var(--blue); }
.modal hr { border:none; border-top:1px solid var(--border); margin:.7rem 0; }
.modal::-webkit-scrollbar { width:4px; }
.modal::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }

/* LIGHTBOX */
.lb { position:fixed; inset:0; background:rgba(255,255,255,.97); z-index:2000; display:flex; align-items:center; justify-content:center; padding:1.5rem; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .3s ease,visibility 0s .3s; cursor:zoom-out; }
.lb.active { opacity:1; visibility:visible; pointer-events:all; transition:opacity .3s ease,visibility 0s 0s; }
.lb img { max-width:95%; max-height:92vh; object-fit:contain; border-radius:6px; box-shadow:0 12px 50px rgba(0,0,0,.12); }
.lb-close { position:absolute; top:1rem; right:1.2rem; background:var(--white); border:1px solid var(--border); border-radius:50%; width:38px; height:38px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text-muted); font-size:1.1rem; font-family:sans-serif; transition:all .2s; z-index:2001; outline:none; -webkit-tap-highlight-color:transparent; box-shadow:0 2px 8px rgba(0,0,0,.08); }
.lb-close:hover { border-color:var(--red-soft); color:var(--red); }

/* REVEAL */
.reveal { opacity:0; transform:translateY(18px); transition:opacity .6s ease,transform .6s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* PAGE CONTENT (Unterseiten) */
.page-content { max-width:900px; margin:0 auto; padding:1rem 1.5rem 4rem; }
.page-content h1 { text-align:center; margin-bottom:1.5rem; }
.page-content h2 { margin:2rem 0 1rem; }
.page-content h3 { color:var(--red); margin:1.5rem 0 .8rem; }
.page-content p { font-size:1rem; line-height:1.7; color:var(--text-light); margin-bottom:1rem; }
.page-content a { color:var(--red); text-decoration:underline; }
.page-content a:hover { color:var(--blue); }
.page-content img { max-width:100%; height:auto; border-radius:8px; }

/* FLUENT FORMS - an Design angepasst, Buttons schraeg wie SAVE THE DATE Badge */
.fluentform button.ff-btn,
.fluentform button.ff-btn-submit,
.fluentform button.ff-btn-next,
.fluentform button.ff-btn-prev,
.fluentform button.ff-btn-secondary,
.fluentform .ff-btn,
.fluentform .ff-btn-submit,
.fluentform .ff-btn-next,
.fluentform .ff-btn-prev,
.fluentform .ff-btn-secondary {
  display:inline-block !important;
  padding:.7rem 2rem !important;
  font-family:'Outfit',sans-serif !important;
  font-size:1rem !important;
  font-weight:800 !important;
  letter-spacing:.15em !important;
  text-transform:uppercase !important;
  color:#ffffff !important;
  background:#125f9a !important;
  background-color:#125f9a !important;
  background-image:none !important;
  border:none !important;
  border-radius:3px !important;
  cursor:pointer !important;
  transform:rotate(-2deg) !important;
  box-shadow:0 2px 6px rgba(18,95,154,.2) !important;
  transition:transform .3s ease,box-shadow .3s ease,background .3s ease !important;
  outline:none !important;
  -webkit-tap-highlight-color:transparent !important;
  margin:.6rem .4rem !important;
  text-shadow:none !important;
}
.fluentform button.ff-btn:hover,
.fluentform button.ff-btn-submit:hover,
.fluentform button.ff-btn-next:hover,
.fluentform button.ff-btn-prev:hover,
.fluentform button.ff-btn-secondary:hover,
.fluentform .ff-btn:hover,
.fluentform .ff-btn-submit:hover,
.fluentform .ff-btn-next:hover,
.fluentform .ff-btn-prev:hover,
.fluentform .ff-btn-secondary:hover {
  transform:rotate(-2deg) translateY(-2px) scale(1.03) !important;
  box-shadow:0 3px 10px rgba(18,95,154,.3) !important;
  background:#2a6faa !important;
  background-color:#2a6faa !important;
}

/* Fluent Forms Labels + Inputs */
.fluentform .ff-el-input--label label,
.fluentform label { font-family:'Outfit',sans-serif; font-weight:600; color:var(--text); font-size:.95rem; }
.fluentform .ff-el-input--label label .ff-el-is-required.asterisk-right,
.fluentform .ff-el-is-required { color:var(--red); }

.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform input[type="tel"],
.fluentform input[type="number"],
.fluentform input[type="url"],
.fluentform input[type="password"],
.fluentform input[type="date"],
.fluentform select,
.fluentform textarea {
  font-family:'Outfit',sans-serif; font-size:1rem; padding:.7rem .9rem;
  border:1px solid var(--border); border-radius:4px; background:var(--white);
  color:var(--text); transition:border-color .2s ease,box-shadow .2s ease;
  width:100%;
}
.fluentform input[type="text"]:focus,
.fluentform input[type="email"]:focus,
.fluentform input[type="tel"]:focus,
.fluentform input[type="number"]:focus,
.fluentform input[type="url"]:focus,
.fluentform input[type="password"]:focus,
.fluentform input[type="date"]:focus,
.fluentform select:focus,
.fluentform textarea:focus {
  border-color:var(--blue); box-shadow:0 0 0 3px rgba(18,95,154,.1); outline:none;
}

/* Range Slider (Ticketanzahl) */
.fluentform .rangeslider__fill { background:var(--red) !important; }
.fluentform .rangeslider__handle { border-color:var(--red) !important; box-shadow:0 2px 8px rgba(193,38,40,.25) !important; }
.fluentform .rangeslider__handle:after { background:var(--red) !important; }

/* FLUENT FORMS - Step Indicator (Multi-Step Form Tabs) - schlicht */
.fluentform .ff-step-header .ff-step-titles li,
.fluentform ul.ff-step-titles li {
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  color:var(--text-muted) !important;
}
.fluentform .ff-step-header .ff-step-titles li.ff_active,
.fluentform .ff-step-header .ff-step-titles li.active,
.fluentform ul.ff-step-titles li.ff_active,
.fluentform ul.ff-step-titles li.active {
  background:transparent !important;
  border:none !important;
  color:var(--blue) !important;
  font-weight:700 !important;
}
.fluentform .ff-step-header .ff-step-titles li.ff_active span,
.fluentform ul.ff-step-titles li.ff_active span { color:var(--blue) !important; }
/* Progress Bar (falls aktiv) */
.fluentform .ff-el-progress-bar { background:var(--blue) !important; }

/* Success / Error Messages */
.fluentform .ff-message-success,
.fluentform .ff_submit_success {
  background:rgba(18,95,154,.05); border-left:3px solid var(--blue);
  color:var(--text); padding:1rem 1.2rem; border-radius:4px; font-weight:500;
}
.fluentform .error,
.fluentform .ff-el-is-error .text-danger {
  color:var(--red); font-size:.85rem; font-weight:600;
}
.fluentform .ff-el-is-error input,
.fluentform .ff-el-is-error select,
.fluentform .ff-el-is-error textarea {
  border-color:var(--red) !important;
}

/* RESPONSIVE */
@media (max-width:600px) {
  .site-header { padding:1rem .5rem .3rem; }
  .site-header-inner { padding:0; gap:.5rem; }
  .site-logo img { max-width:100%; max-height:none; }
  .hero { padding:.8rem 1rem 2rem; }
  .hero-logo { max-width:100%; }
  .maitanz-wrap { max-width:100%; }
  .date-big { font-size:3rem; }
  .cd-unit { min-width:50px; padding:.4rem .3rem; } .cd-val { font-size:1.4rem; } .cd-lbl { font-size:.5rem; }
  .vvk-btn { font-size:.88rem; padding:.7rem 1.5rem; }
  .details { grid-template-columns:repeat(2,1fr); gap:.4rem; }
  .detail { padding:.7rem .4rem; } .detail-icon { font-size:1.3rem; } .detail-title { font-size:.8rem; } .detail-text { font-size:.68rem; }
  .cards-grid { grid-template-columns:1fr; gap:1rem; max-width:350px; margin:0 auto; }
  .modal { padding:1.5rem; }
  .content-section { padding:3rem 1.2rem; }
}