/*
 Theme Name:   Wolly's Fahrschule
 Theme URI:    https://wollys-fahrschule.de/
 Description:  Individuelles Child Theme von Wolly's Fahrschule (basierend auf Hello Elementor)
 Author:       Marketing Fahrschule
 Template:     hello-elementor
 Version:      1.0.1
*/

/* =========================================================
   1) COLOR SYSTEM – ZENTRAL (NUR HIER AENDERN!)
   ========================================================= */

:root{
  /* Dark Base */
  --dark-base: #141414;
  --dark-soft: #111111;

  /* Greens */
  --green-hero: #81C448;        /* Auto / große Flächen / Deko */
  --green-ui: #6FB63F;          /* UI-Führung */
  --green-ui-strong: #64B233;   /* Button-Top */
  --green-deep: #2F5311;        /* Button-Bottom / Active */

  /* Text */
  --text-light: #ffffff;
  --text-muted: rgba(255,255,255,0.78);

  /* Effects */
  --glow-ui-1: rgba(111,182,63,0.45);
  --glow-ui-2: rgba(47,83,17,0.25);
}


/* =========================================================
   GREY SYSTEM – TECHY DARK UI (FAHRSCHÜLER)
   Grau = Struktur / UI / Ruhe
   Grün = Aktion / Fokus
   ========================================================= */

:root {
  /* TECH GREYS */
  --gray-950: #0A0A0A;   /* tiefster Hintergrund */
  --gray-900: #101010;   /* Header / Section Base */
  --gray-850: #141414;   /* Main Dark (bestehend) */
  --gray-800: #1E1E1E;   /* Cards / Boxen */
  --gray-750: #262626;   /* Hover */
  --gray-700: #2E2E2E;   /* Borders / Divider */

  --text-muted: rgba(255,255,255,0.75);
}

/* =========================================================
   GENERIC UI CLASSES
   ========================================================= */

/* Card / Box */
.bg-card {
  background: var(--gray-800);
  border: 1px solid var(--gray-700);
  border-radius: 10px;
}

.bg-card-hover:hover {
  background: var(--gray-750);
}

/* Subtle Section Background */
.bg-section-dark {
  background: var(--gray-900);
}

/* Muted text (secondary info) */
.text-muted {
  color: var(--text-muted);
}

/* Soft divider */
.divider-soft {
  border-top: 1px solid var(--gray-700);
}

/* =========================================================
   HEADER / NAV
   ========================================================= */

.header-tech {
  background: var(--gray-900);
  border-bottom: 1px solid var(--gray-700);
}

/* =========================================================
   FAQ / ACCORDION
   ========================================================= */

.faq-card {
  background: var(--gray-800);
  border: 1px solid var(--gray-700);
  border-radius: 6px;
}

/* Active bleibt grün (Kontrast!) */
.faq-card.elementor-active {
  background: linear-gradient(
    to right,
    var(--green-ui),
    var(--green-deep)
  );
}

/* =========================================================
   FORMS
   ========================================================= */

.form-dark input,
.form-dark textarea,
.form-dark select {
  background: var(--gray-800);
  border: 1px solid var(--gray-700);
  color: #ffffff;
}

.form-dark input::placeholder,
.form-dark textarea::placeholder {
  color: var(--text-muted);
}


/* =========================================================
   2) GLOBAL BASICS
   ========================================================= */

html, body{
  overflow-x: hidden;
  width: 100%;
}

html{ scroll-behavior: smooth; }

/* ReCaptcha Badge ausblenden (rechtlich nur verwenden, wenn du es so handhabst) */
.grecaptcha-badge{ visibility: hidden!important; }

/* =========================================================
   3) SCROLLBAR (Chrome/Edge/Safari)
   ========================================================= */

body::-webkit-scrollbar{ width: 18px; }

body::-webkit-scrollbar-track{
  background-color: var(--dark-soft);
}

body::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, var(--green-ui), var(--green-deep)) !important;
  border: 6px solid var(--dark-soft) !important;
  border-radius: 20px !important;
}

body::-webkit-scrollbar-arrow{
  color: var(--green-ui) !important;
}

/* =========================================================
   4) PADDING UTILITIES (dein bestehendes System)
   ========================================================= */

.pad-s{padding: clamp(1rem, 0.7692rem + 1.0256vw, 1.5rem);}
.pad-m{padding: clamp(1.5rem, 1.2692rem + 1.0256vw, 2rem);}
/* .pad-l{padding: clamp(1.25rem, -0.1838rem + 6.3725vw, 9.375rem);} */


/* =========================================
   GLOBAL PADDING SYSTEM (.pad-l)
   mobile-first + klare Breakpoints
   ========================================= */

/* Mobile hoch (Default) */
.pad-l{
  padding-top: 3em;
  padding-right: 2em;
  padding-bottom: 2.5em;
  padding-left: 2em;
}

/* Mobile quer */
@media (min-width: 576px){
  .pad-l{
    padding: 4em;
  }
}

/* Tablet hoch */
@media (min-width: 768px){
  .pad-l{
    padding: 4em;
  }
}

/* Tablet quer + Laptop */
@media (min-width: 992px){
  .pad-l{
    padding: 5em;
  }
}

/* Normaler Desktop */
@media (min-width: 1200px){
  .pad-l{
    padding-top: 9em;
    padding-right: 5em;
    padding-bottom: 9em;
    padding-left: 5em;
  }
}

/* UltraHD */
@media (min-width: 1920px){
  .pad-l{
    padding-top: 11em;
    padding-right: 8em;
    padding-bottom: 11em;
    padding-left: 8em;
  }
}


.pad-tb-s{padding: clamp(1.5rem, 1.0385rem + 2.0513vw, 2.5rem) 0;}
.pad-tb-m{padding: clamp(4rem, 3.5385rem + 2.0513vw, 5rem) 0;}
.pad-tb-l{padding: clamp(1.25rem, -0.1838rem + 6.3725vw, 9.375rem);}

.pad-t-s{padding-top: clamp(1.5rem, 1.0385rem + 2.0513vw, 2.5rem);}
.pad-t-m{padding-top: clamp(4rem, 3.5385rem + 2.0513vw, 5rem);}
.pad-t-l{padding-top: clamp(7rem, 6.5385rem + 2.0513vw, 8rem);}

.pad-b-s{padding-bottom: clamp(1.5rem, 1.0385rem + 2.0513vw, 2.5rem);}
.pad-b-m{padding-bottom: clamp(4rem, 3.5385rem + 2.0513vw, 5rem);}
.pad-b-l{padding-bottom: clamp(7rem, 6.5385rem + 2.0513vw, 8rem);}

/* =========================================================
   5) BUTTON SYSTEM – ELEMENTOR + UNLIMITED ELEMENTS
   Hinweis: Wir targeten <a> und .elementor-button-link bewusst,
   weil Elementor/UE dort den Background setzen.
   ========================================================= */


/* --- 5.1 Basis: alle Buttons (Elementor + UE) --- */
html body a.elementor-button,
html body a.elementor-button-link,
html body .elementor-button-link,
html body .elementor-button,
html body a.ue-btn,
html body .ue-btn,
html body a.ue_btn,
html body .ue_btn,
html body a.ue-button,
html body .ue-button{
  background: linear-gradient(
    180deg,
    var(--green-ui-strong) 0%,
    var(--green-ui) 60%,
    var(--green-deep) 100%
  ) !important;

  color: var(--text-light) !important;
  font-weight: 700;
  border: none;

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    filter 0.35s ease;
}

/* --- 5.2 Hover --- */
html body a.elementor-button:hover,
html body a.elementor-button-link:hover,
html body .elementor-button-link:hover,
html body .elementor-button:hover,
html body a.ue-btn:hover,
html body .ue-btn:hover,
html body a.ue_btn:hover,
html body .ue_btn:hover,
html body a.ue-button:hover,
html body .ue-button:hover{
  transform: translateX(7px);
  filter: brightness(1.05);

  box-shadow:
    0 0 12px var(--glow-ui-1),
    0 0 28px var(--glow-ui-2);
}

/* --- 5.3 Active (gedrückt) --- */
html body a.elementor-button:active,
html body a.elementor-button-link:active,
html body .elementor-button-link:active,
html body .elementor-button:active,
html body a.ue-btn:active,
html body .ue-btn:active,
html body a.ue_btn:active,
html body .ue_btn:active,
html body a.ue-button:active,
html body .ue-button:active{
  background: linear-gradient(180deg, var(--green-ui) 0%, var(--green-deep) 100%) !important;
}

/* --- 5.4 Outline Buttons (nur für Elementor-Klassen, wie du sie nutzt) --- */
.button-outline-dark .elementor-button,
.button-outline-dark a.elementor-button-link{
  background: transparent !important;
  color: var(--green-ui) !important;
  box-shadow: inset 0 0 0 1px var(--green-ui) !important;
}

.button-outline-light .elementor-button,
.button-outline-light a.elementor-button-link{
  background: transparent !important;
  color: var(--text-light) !important;
  box-shadow: inset 0 0 0 1px var(--text-light) !important;
}

/* =========================================================
   6) TYPOGRAPHY (DARK UI)
   ========================================================= */

p{
  margin-bottom: 15px;
  color: var(--text-light);
}

strong{
  color: var(--text-light);
  font-weight: 700;
  text-shadow: 0 0 10px rgba(111,182,63,0.22);
}

/* H2: EINHEITLICH, KEIN GRADIENT (ruhig & reproduzierbar) */
h2{
  color: var(--green-hero) !important; /* #81C448 */
  line-height: 110% !important;

  /* Safety reset: verhindert transparente Gradient-Overrides */
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
}

h3{ line-height: 112% !important; }

/* Sonderklasse: h2orange bleibt weiß */
.h2orange,
.h2orange .elementor-heading-title{
  background: none !important;
  -webkit-text-fill-color: var(--text-light) !important;
  color: var(--text-light) !important;
}

.elementor-text-editor p:not(:last-child) {
  margin-bottom: 1em;
}

.elementor ul,
.elementor ol {
margin-block-end: 15px !important;
}







/* =========================================================
   7) TOC (Elementor Table of Contents)
   ========================================================= */

.elementor-widget-table-of-contents
.elementor-toc__body
.elementor-toc__list-item-text:hover{
  color: var(--green-ui);
}

.elementor-widget-table-of-contents .elementor-toc__header{
  background: linear-gradient(to right, var(--green-hero), var(--green-deep));
  padding-top: 1.4em;
  padding-bottom: 1.4em;
  max-height: 30px;
}

.elementor-widget-table-of-contents .elementor-toc__list-item-text-wrapper{
  align-items: flex-start;
}

.elementor-widget-table-of-contents
ol.elementor-toc__list-wrapper
.elementor-toc__list-item-text-wrapper:before{
  content: none;
}

/* =========================================================
   8) WEEKLY CLASS / COUNTDOWN (WCS)
   ========================================================= */

.wcs-timetable--countdown.wcs-timetable--countdown-without-image{
  background: radial-gradient(
    at center center,
    rgba(129,196,72,0.35),
    #0C1E0F 100%
  ) !important;
}

.wcs-timetable--countdown .wcs-class__countdown-time::before{
  background-color: #ffffff;
  border-radius: 30px;
}

.wcs-timetable--countdown .wcs-class__countdown-time > span,
span.wcs_class__time,
.wcs-timetable--countdown h2.wcs-class__title,
.wcs-timetable--countdown h3.wcs-class__title{
  color: #ffffff;
}

/* =========================================================
   UNLIMITED ELEMENTS – BUTTON SYSTEM
   Überschreibt die internen UE-Styles sauber
   ========================================================= */

/* Basis: UE Buttons */
html body .ue-btn,
html body a.ue-btn,
html body .ue_btn,
html body a.ue_btn,
html body .ue-button,
html body a.ue-button {

  /* UE nutzt background-color → wir überschreiben beides */
  background-color: transparent !important;
  background-image: linear-gradient(
    180deg,
    var(--green-ui-strong) 0%,
    var(--green-ui) 60%,
    var(--green-deep) 100%
  ) !important;

  color: var(--text-light) !important;
  font-weight: 700;

  border: none !important;
  border-radius: 90px 90px 90px 90px; /* übernimmt dein UE-Design */
  text-decoration: none !important;

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    filter 0.35s ease;
}

/* Hover */
html body .ue-btn:hover,
html body a.ue-btn:hover,
html body .ue_btn:hover,
html body a.ue_btn:hover,
html body .ue-button:hover,
html body a.ue-button:hover {

  transform: translateX(7px);
  filter: brightness(1.05);

  box-shadow:
    0 0 12px var(--glow-ui-1),
    0 0 28px var(--glow-ui-2);
}

/* Active (gedrückt) */
html body .ue-btn:active,
html body a.ue-btn:active,
html body .ue_btn:active,
html body a.ue_btn:active,
html body .ue-button:active,
html body a.ue-button:active {

  background-image: linear-gradient(
    180deg,
    var(--green-ui) 0%,
    var(--green-deep) 100%
  ) !important;
}

/* =========================================================
   WF FLIPBOX – A/B (stabil gegen Elementor ::before/overlay)
   Klassen am Flipbox-Widget:
   - wf-flip wf-a  (Grau -> Hover Grün)
   - wf-flip wf-b  (Grün -> Hover Grau)
   ========================================================= */

.elementor-widget-flip-box.wf-flip{
  --wf-gray-1:#2A2A2A;
  --wf-gray-2:#1E1E1E;
  --wf-gray-3:#141414;
  --wf-green:#6FB63F;
}

/* Radius überall */
.elementor-widget-flip-box.wf-flip .elementor-flip-box,
.elementor-widget-flip-box.wf-flip .elementor-flip-box__layer,
.elementor-widget-flip-box.wf-flip .elementor-flip-box__front,
.elementor-widget-flip-box.wf-flip .elementor-flip-box__back{
  border-radius: 22px;
  overflow: hidden;
}

/* =========================
   A = GRAU (Default)
   ========================= */
.elementor-widget-flip-box.wf-flip.wf-a .elementor-flip-box__front,
.elementor-widget-flip-box.wf-flip.wf-a .elementor-flip-box__back,
.elementor-widget-flip-box.wf-flip.wf-a .elementor-flip-box__front::before,
.elementor-widget-flip-box.wf-flip.wf-a .elementor-flip-box__back::before{
  background: radial-gradient(circle at top left,
    var(--wf-gray-1) 0%,
    var(--wf-gray-2) 60%,
    var(--wf-gray-3) 100%
  ) !important;
}

/* A Hover = GRÜN */
.elementor-widget-flip-box.wf-flip.wf-a:hover .elementor-flip-box__front,
.elementor-widget-flip-box.wf-flip.wf-a:hover .elementor-flip-box__back,
.elementor-widget-flip-box.wf-flip.wf-a:hover .elementor-flip-box__front::before,
.elementor-widget-flip-box.wf-flip.wf-a:hover .elementor-flip-box__back::before{
  background: radial-gradient(circle at top left,
    rgba(111,182,63,0.85) 0%,
    rgba(111,182,63,0.55) 50%,
    rgba(20,20,20,0.95) 100%
  ) !important;
}

/* =========================
   B = GRÜN (Default)
   ========================= */
.elementor-widget-flip-box.wf-flip.wf-b .elementor-flip-box__front,
.elementor-widget-flip-box.wf-flip.wf-b .elementor-flip-box__back,
.elementor-widget-flip-box.wf-flip.wf-b .elementor-flip-box__front::before,
.elementor-widget-flip-box.wf-flip.wf-b .elementor-flip-box__back::before{
  background: radial-gradient(circle at top left,
  rgba(111,182,63,1.00) 0%,
  rgba(111,182,63,0.80) 78%,
  rgba(47,83,17,0.55) 100%
) !important;
}

/* B Hover = GRAU */
.elementor-widget-flip-box.wf-flip.wf-b:hover .elementor-flip-box__front,
.elementor-widget-flip-box.wf-flip.wf-b:hover .elementor-flip-box__back,
.elementor-widget-flip-box.wf-flip.wf-b:hover .elementor-flip-box__front::before,
.elementor-widget-flip-box.wf-flip.wf-b:hover .elementor-flip-box__back::before{
  background: radial-gradient(circle at top left,
    var(--wf-gray-1) 0%,
    var(--wf-gray-2) 60%,
    var(--wf-gray-3) 100%
  ) !important;
}

/* Optional: sanfter Hover-Glow (beide Varianten) */
.elementor-widget-flip-box.wf-flip:hover .elementor-flip-box{
  box-shadow:
    0 18px 60px rgba(0,0,0,0.60),
    0 0 28px rgba(111,182,63,0.22);
}

/* WF FIX: Flip-Animation wieder animiert (Transform-Transition wieder zulassen) */
.elementor-widget-flip-box.wf-flip .elementor-flip-box__front,
.elementor-widget-flip-box.wf-flip .elementor-flip-box__back{
  transition: transform 0.8s ease !important;
}

/* Wenn Elementor den Transform auf .elementor-flip-box__layer macht (häufig): */
.elementor-widget-flip-box.wf-flip .elementor-flip-box__layer{
  transition: transform 0.8s ease !important;
}

/* =========================================
   WF FLIPBOX – Mobile Vertical Center (Front + Back) FINAL
   ========================================= */
@media (max-width: 767px){

  /* Beide Seiten identisch behandeln */
  .elementor-widget-flip-box.wf-flip
  .elementor-flip-box__front,
  .elementor-widget-flip-box.wf-flip
  .elementor-flip-box__back{
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; /* vertikal */
    align-items: center !important;     /* horizontal */
    text-align: center;
  }

  /* Innerer Inhalt darf NICHT absolut positioniert sein */
  .elementor-widget-flip-box.wf-flip
  .elementor-flip-box__layer__inner{
    position: static !important;
    transform: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 18px 18px 20px !important;
  }

  /* Typo-Abstände kontrolliert, kein Hochziehen */
  .elementor-widget-flip-box.wf-flip
  .elementor-flip-box__layer__title{
    margin: 0 0 10px !important;
  }

  .elementor-widget-flip-box.wf-flip
  .elementor-flip-box__layer__description{
    margin: 0 !important;
  }
}

/* =========================================================
   PORTFOLIO – RELATED PAGES OVERLAY
   ========================================================= */

.elementor-portfolio-item__overlay{
  padding: 50px;
  hyphens: auto;
}

/* Overlay-Farbverlauf (nur beim Hover, wie Elementor es nutzt) */
a .elementor-portfolio-item__overlay{
  background-image: radial-gradient(
    at center center,
    var(--green-ui) 40%,
    var(--green-deep) 85%
  );
}


/* =========================================
   HERO Background – Dark + Green Tint
   ========================================= */

.hero-bg {
  position: relative;
  overflow: hidden;
}

/* Dunkles Overlay für Lesbarkeit */
.hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 20, 0.65);
  z-index: 1;
}

/* Grüner Markentint (sehr subtil) */
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(35, 176, 145, 0.06); /* <- Marken-Grün */
  z-index: 2;
}

/* Inhalt immer über den Overlays */
.hero-bg > * {
  position: relative;
  z-index: 3;
}


/* =========================================
   DIVIDER Background – Extra ruhig
   ========================================= */

.divider-bg {
  position: relative;
  overflow: hidden;
}

/* Stärkere Abdunklung */
.divider-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 20, 0.8);
  z-index: 1;
}

/* Minimaler Grünton */
.divider-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(35, 176, 145, 0.04);
  z-index: 2;
}

/* Inhalt über den Overlays */
.divider-bg > * {
  position: relative;
  z-index: 3;
}