/*
 Theme Name:   Fahrschule Küper
 Theme URI:    https://fahschule-kueper.de
 Description:  Individuelles Child Theme der Fahrschule Küper (basierend auf Hello Elementor)
 Author:       Marketing Fahrschule
 Template:     hello-elementor
 Version:      1.0.0
*/

/* =========================================================
   FS KÜPER – GLOBAL CSS (stabil & portierbar)
   ========================================================= */


/* ---------------------------------------------------------
   1) TOKENS
--------------------------------------------------------- */

:root{

  --ku-black: #000100;
  --ku-gray:  #BFC1C2;
  --ku-text:  #7A7A7A;
  --ku-white: #FFFFFF;

  --ku-bg: #FFFFFF;
  --ku-bg-soft: #F5F5F5;
  --ku-border: rgba(0,1,0,.18);

  --ku-link: var(--ku-black);
  --ku-link-hover: #4f4f4f;

  --ku-h1-size: clamp(40px, 3.8vw, 64px);
  --ku-h2-size: clamp(1.9rem, 1.3rem + 2.2vw, 3.9rem);
  --ku-h3-size: clamp(22px, 1.8vw, 24px);

  --ku-h-line: 1.05;
  --ku-text-line: 1.55;

  --ku-radius: 20px;

  --ku-pad-x: 1.25em;
  --ku-pad-y: 2em;
  --ku-pad-y2: 1.5em;

  --radius-box-xl: 64px;
  --radius-box-l: 48px;
  --radius-box-m: 28px;

  /* CARD */
  --card-bg: #000100;
  --card-border: #b6b6b6;
  --card-radius: 20px;

  --glow-color: #b6b6b6;
  --glow-size: 600px;
  --glow-strength: 0.25;
  --glow-transition: 400ms;
}


/* ---------------------------------------------------------
   2) BASE
--------------------------------------------------------- */

html, body{ overflow-x:hidden; }

body{
  color: var(--ku-text);
  line-height: var(--ku-text-line);
  background: var(--ku-bg);
}

h1, .elementor-widget-heading h1.elementor-heading-title{
  font-size: var(--ku-h1-size);
  line-height: var(--ku-h-line);
  color: var(--ku-black);
  text-wrap: balance;
}

h2, .elementor-widget-heading h2.elementor-heading-title{
  font-size: var(--ku-h2-size);
  line-height: 1.12;
  color: var(--ku-black);
  padding-bottom: 20px;
}

h3, .elementor-widget-heading h3.elementor-heading-title{
  font-size: var(--ku-h3-size);
  line-height: 1.18;
  color: var(--ku-black);
}

@media (max-width: 767px){
  h2, .elementor-widget-heading h2.elementor-heading-title{
    padding-bottom:10px;
  }
}

a{
  color: var(--ku-link);
  text-decoration-color: rgba(0,1,0,.35);
  text-underline-offset: 3px;
}
a:hover{
  color: var(--ku-link-hover);
  text-decoration-color: rgba(0,1,0,.55);
}

/* Standard-Listen */
ul{
  margin-left: 0;
  padding-left: 1.2em;
}

/* Elementor Texteditor */
.elementor-widget-text-editor ul{
  margin-left: 0;
  padding-left: 1.2em;
}

/* Elementor Akkordeon & Toggle Listen */
.elementor-accordion ul,
.elementor-toggle ul{
  margin-left: 0 !important;
  padding-left: 1.2em !important;
}

/* Falls Container zentriert sind */
.elementor-widget-text-editor,
.elementor-accordion .elementor-tab-content,
.elementor-toggle .elementor-tab-content{
  text-align: left;
}


/* ---------------------------------------------------------
   3) UTILITIES
--------------------------------------------------------- */

.bg-white{ background-color: var(--ku-bg)!important; }
.bg-light{ background-color: var(--ku-bg-soft)!important; }

.pad-l{
  padding: var(--ku-pad-y) var(--ku-pad-x) var(--ku-pad-y2);
}

@media (min-width:576px){ .pad-l{ padding:4em; } }
@media (min-width:992px){ .pad-l{ padding:5em; } }
@media (min-width:1200px){ .pad-l{ padding:9em 5em; } }
@media (min-width:1920px){ .pad-l{ padding:11em 8em; } }


/* ---------------------------------------------------------
   4) COMPONENTS
--------------------------------------------------------- */

.elementor-button{
  transition:
    transform .25s ease,
    filter .25s ease,
    background-color .25s ease,
    color .25s ease,
    border-color .25s ease;
}
.elementor-button:hover{
  transform:translateY(-1px);
  filter:brightness(97%);
}


/* ---------------------------------------------------------
   5) STARTSEITE-KACHELN
--------------------------------------------------------- */

@media (max-width:767px){
  .swipe-grid{
    display:flex;
    flex-direction:column;
    gap:1rem;
  }
}

@media (min-width:768px){
  .swipe-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:1.5rem;
  }
}

.glowing-iconbox{
  position:relative;
  border-radius:var(--card-radius)!important;
  background-color:var(--card-bg)!important;
  box-shadow:inset 0 0 0 1px var(--card-border)!important;
  overflow:hidden;
}

.glowing-iconbox::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(
    var(--glow-size) circle at var(--mouse-x) var(--mouse-y),
    var(--glow-color),
    transparent 45%
  );
  opacity:0;
  transition:opacity var(--glow-transition);
  pointer-events:none;
  z-index:0;
}

@media (hover:hover){
  .glowing-iconbox:hover::before{
    opacity:var(--glow-strength);
  }
}

.glowing-iconbox > *{
  position:relative;
  z-index:1;
}

@media (hover:none){
  .glowing-iconbox::before{
    opacity:0.15;
  }
}

/* ALT-FARBE NUR DESKTOP (Mobile = identisch wie normal) */
@media (min-width:768px){
  .glowing-iconbox.alt{
    background-color:#2b2b2b!important;
    box-shadow:inset 0 0 0 1px #b6b6b6!important;
  }
}


/* ---------------------------------------------------------
   6) PKW-Klassen Carousel (Swiper) – Fixes
--------------------------------------------------------- */

.pkw-klassen-carousel .swiper-slide-shadow-left,
.pkw-klassen-carousel .swiper-slide-shadow-right,
.pkw-klassen-carousel .swiper-slide-shadow-top,
.pkw-klassen-carousel .swiper-slide-shadow-bottom{
  opacity: 0.09 !important;
}

.pkw-klassen-carousel{
  position: relative;
  padding-inline: 48px;
  padding-bottom: 44px;
  --curtain: clamp(60px, 7vw, 160px);
}

.pkw-klassen-carousel .swiper{
  overflow: visible !important;
}

.pkw-klassen-carousel,
.pkw-klassen-carousel .elementor-widget-container{
  overflow: visible !important;
}

.pkw-klassen-carousel .swiper-pagination{
  position: relative !important;
  bottom: auto !important;
  margin-top: 20px;
  z-index: 5;
}

@media (min-width: 768px){
  .pkw-klassen-carousel::before,
  .pkw-klassen-carousel::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    width: calc(50vw + var(--curtain));
    background: #fff;
    z-index: 4;
    pointer-events:none;
  }
  .pkw-klassen-carousel::before{ left: calc(-50vw); }
  .pkw-klassen-carousel::after{ right: calc(-50vw); }
}

@media (min-width: 1200px){
  .pkw-klassen-carousel{
    --curtain: clamp(90px, 7vw, 220px);
  }
}

@media (min-width: 1377px){
  .pkw-klassen-carousel{
    padding-inline: 72px;
    --curtain: clamp(130px, 8vw, 300px);
  }
}

@media (min-width: 1920px){
  .pkw-klassen-carousel{
    padding-inline: 90px;
    --curtain: clamp(180px, 9vw, 380px);
  }
}

@media (min-width: 2560px){
  .pkw-klassen-carousel{
    padding-inline: 110px;
    --curtain: clamp(240px, 10vw, 520px);
  }
}


/* ---------------------------------------------------------
   ACCORDION / FAQ – Grau-Schwarz (ruhig & hochwertig)
--------------------------------------------------------- */

.elementor-widget-accordion
.elementor-accordion
.elementor-tab-title{
  background: linear-gradient(to right,#1f2023,#060709) !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  margin-bottom: 12px !important;
  transition: background 0.35s ease, transform 0.25s ease;
}

@media (hover: hover){
  .elementor-widget-accordion
  .elementor-accordion
  .elementor-tab-title:hover{
    background: linear-gradient(to right,#2b2c30,#0c0d10) !important;
    transform: translateY(-1px);
  }
}

.elementor-widget-accordion
.elementor-accordion
.elementor-tab-title.elementor-active{
  background: linear-gradient(to right,#2b2c30,#0c0d10) !important;
}

.elementor-widget-accordion
.elementor-accordion
.elementor-accordion-icon{
  color: #ffffff !important;
}

.elementor-widget-accordion
.elementor-accordion
.elementor-accordion-icon svg{
  width: 1.35em !important;
  height: 1.35em !important;
  fill: currentColor;
}

.elementor-widget-accordion
.elementor-accordion
.elementor-tab-content{
  background-color: #f2f2f2 !important;
  color: #000100 !important;
  border-radius: 0 0 12px 12px;
}

.elementor-widget-accordion
.elementor-accordion
.elementor-tab-content p{
  margin-bottom: 14px !important;
}
.elementor-widget-accordion
.elementor-accordion
.elementor-tab-content p:last-child{
  margin-bottom: 0 !important;
}


/* =========================================================
   RICHTEXT – Abstände zwischen Listen & Zwischenüberschriften
   ========================================================= */

.elementor-widget-text-editor ul,
.elementor-widget-text-editor ol{
  margin-bottom: 1.2em;
}

.elementor-widget-text-editor ul + p,
.elementor-widget-text-editor ul + h3,
.elementor-widget-text-editor ul + h4,
.elementor-widget-text-editor ol + p,
.elementor-widget-text-editor ol + h3,
.elementor-widget-text-editor ol + h4{
  margin-top: 1.4em;
}

.elementor-widget-text-editor ul + strong,
.elementor-widget-text-editor ol + strong{
  display: block;
  margin-top: 1.4em;
}

.elementor-widget-text-editor strong,
.elementor-widget-accordion .elementor-tab-content strong,
.elementor-toggle .elementor-tab-content strong{
  display: inline;
  margin-top: 0;
  line-height: inherit;
}


/* ---------------------------------------------------------
   PKW Info Box Radius
--------------------------------------------------------- */

.pkw-info-box{
  border-radius: var(--radius-box-l);
}
@media (min-width: 1200px){
  .pkw-info-box{ border-radius: var(--radius-box-xl); }
}
@media (max-width: 767px){
  .pkw-info-box{ border-radius: var(--radius-box-m); }
}


/* =========================================================
   PORTFOLIO – Küper Premium (edel & ruhig) – OPTION C
   ========================================================= */

.elementor-portfolio{
  --ku-pf-overlay-base: rgba(0,1,0,0.88);
  --ku-pf-overlay-hover: rgba(0,1,0,0.78);

  --ku-pf-title: #ffffff;
  --ku-pf-title-shadow: rgba(0,1,0,0.55);

  --ku-pf-overlay-transition: 0.4s;
  --ku-pf-card-transition: 0.35s;

  --ku-pf-img-bright: 0.85;
  --ku-pf-img-bright-hover: 0.92;

  --ku-pf-lift: -4px;
  --ku-pf-card-shadow: 0 12px 40px rgba(0,0,0,0.25);
}

.elementor-portfolio-item__overlay{
  padding: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--ku-pf-overlay-base);
  transition: background var(--ku-pf-overlay-transition) ease, opacity 0.4s ease;
}

a:hover .elementor-portfolio-item__overlay{
  background: var(--ku-pf-overlay-hover);
}

.elementor-portfolio-item__title{
  color: var(--ku-pf-title);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 18px var(--ku-pf-title-shadow);
  transition: transform var(--ku-pf-card-transition) ease,
              letter-spacing var(--ku-pf-card-transition) ease;
}

a:hover .elementor-portfolio-item__title{
  transform: translateY(-2px);
  letter-spacing: 0.8px;
}

.elementor-portfolio-item{
  overflow: hidden;
  transition: transform var(--ku-pf-card-transition) ease,
              box-shadow var(--ku-pf-card-transition) ease;
}

.elementor-portfolio-item:hover{
  transform: translateY(var(--ku-pf-lift));
  box-shadow: var(--ku-pf-card-shadow);
}

.elementor-portfolio-item__img{
  filter: brightness(var(--ku-pf-img-bright));
  transition: filter 0.5s ease;
}

.elementor-portfolio-item:hover .elementor-portfolio-item__img{
  filter: brightness(var(--ku-pf-img-bright-hover));
}


/* ---------------------------------------------------------
   HERO Overlay Helper (mobile readability)
--------------------------------------------------------- */

.ku-hero-gradient{ position: relative; }
.ku-hero-gradient > *{ position: relative; z-index: 1; }

@media (max-width: 767px){
  .ku-hero-gradient::before{
    content:"";
    position:absolute;
    inset:0;
    background: rgba(0,1,0,.25);
    pointer-events:none;
    z-index:0;
  }
}

/* Elementor Form Submit Button */
.elementor-form .elementor-button {
    min-width: 320px;       /* verhindert zu schmale Buttons */
    padding: 14px 28px;
    white-space: nowrap;    /* verhindert Zeilenumbruch */
}