/* =====================================================
   AutoVision – Corporate Design
   Style-Sheet: style.css
   Tailwind CSS Utility-Klassen sind global verfügbar.
   Dieses Sheet ergänzt Tailwind um individuelle Variablen,
   Animationen und modulare Komponenten.
===================================================== */

/* ---------- 1.  CSS-Variablen (Analog-Farbpalette) ---------- */
:root{
  /* Basisfarben (Blau-Zyklus – analog von Indigo bis Cyan) */
  --clr-primary-600:#006DFF;
  --clr-primary-500:#1E88FF;
  --clr-primary-400:#56A3FF;

  --clr-accent-600:#008CFF;     /* lebhafte Akzentfarbe */
  --clr-accent-500:#00A3FF;
  --clr-accent-400:#2CB8FF;

  --clr-complement-700:#004C99; /* dunkler Kontrast */
  --clr-complement-50:#EAF5FF;  /* sehr hell für Sektionen */

  --clr-success:#4ADE80;
  --clr-danger:#EF4444;

  --radius-lg:1rem;
  --radius-md:.6rem;

  --shadow-sm:0 4px 8px rgba(0,0,0,.08);
  --shadow-lg:0 10px 20px rgba(0,0,0,.12);

  --transition-fast:.25s cubic-bezier(.4,0,.2,1);
  --transition-slow:.55s cubic-bezier(.25,.1,.25,1);

  /* Typografie */
  --ff-head:'Playfair Display',serif;
  --ff-body:'Source Sans Pro',sans-serif;
  --fw-bold:700;
  --fw-semi:600;
  --fw-regular:400;
}

/* ---------- 2.  Global Resets & Helpers ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--ff-body);
  line-height:1.6;
  color:#333;
  background:#fff;
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--ff-head);
  color:#222;
  line-height:1.2;
  text-align:center;
}
.section-title{
  margin-bottom:3rem;
  text-shadow:1px 1px 3px rgba(0,0,0,.15);
}
a{color:var(--clr-primary-600);text-decoration:none;transition:color var(--transition-fast);}
a:hover{color:var(--clr-accent-600);}
.read-more{
  font-weight:var(--fw-semi);
  position:relative;
}
.read-more::after{
  content:'';
  position:absolute;
  left:0;bottom:-2px;
  width:100%;height:2px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--transition-fast);
}
.read-more:hover::after{transform:scaleX(1);}

/* ---------- 3.  Buttons (global) ---------- */
.btn,
button,
input[type='button'],
input[type='submit']{
  display:inline-block;
  background:var(--clr-primary-600);
  color:#fff;
  font-weight:var(--fw-semi);
  padding:.85rem 2.2rem;
  border:none;
  border-radius:var(--radius-md);
  cursor:pointer;
  transition:transform var(--transition-fast),background var(--transition-fast);
}
.btn:hover,
button:hover,
input[type='button']:hover,
input[type='submit']:hover{
  background:var(--clr-accent-600);
  transform:translateY(-2px);
}
.btn:active{transform:translateY(0);}
button:focus,input:focus{outline:none;}

/* ---------- 4.  Navigation / Header ---------- */
header{
  transition:background var(--transition-fast),box-shadow var(--transition-fast);
}
header.scrolled{
  background:#fff;
  box-shadow:var(--shadow-sm);
}
#mobileMenu a{border-bottom:1px solid #f3f3f3;}

/* ---------- 5.  Hero ---------- */
#hero{
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
}
#hero h1,#hero p{color:#fff;}
/* Glas-Overlay für bessere Lesbarkeit */
#hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55));
  z-index:0;
}
#hero>*{position:relative;z-index:2;}

/* ---------- 6.  Cards ---------- */
.card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  background:#fff;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  transition:transform var(--transition-slow),box-shadow var(--transition-slow);
}
.card:hover{
  transform:translateY(-6px) rotateZ(-.2deg);
  box-shadow:var(--shadow-lg);
}
.card-image,
.image-container{
  width:100%;
  height:14rem;      /* ~h-56 */
  overflow:hidden;
}
.card-image img,
.image-container img{
  width:100%;
  height:100%;
  object-fit:cover;
  margin:0 auto;
}
.card-content{padding:1.5rem;}

/* ---------- 7.  Sections ---------- */
section{padding:5rem 0;}
.bg-primary-light{background:var(--clr-complement-50);}
.bg-gradient{
  background:linear-gradient(135deg,var(--clr-primary-400) 0%,var(--clr-accent-400) 100%);
  color:#fff;
}

/* ---------- 8.  Asymmetrischer Balance Layout Helpers ---------- */
.asym-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:2rem;
}
.asym-flex{
  display:flex;
  flex-wrap:wrap;
  gap:3rem;
  align-items:center;
  justify-content:space-between;
}

/* ---------- 9.  Non-Linear Motion Animations ---------- */
@keyframes floatY{
  0%{transform:translateY(0);}
  50%{transform:translateY(-8px);}
  100%{transform:translateY(0);}
}
@keyframes swingX{
  0%{transform:rotate(0deg);}
  50%{transform:rotate(3deg);}
  100%{transform:rotate(0deg);}
}
/* Utility Klassen */
.motion-float{animation:floatY 5s cubic-bezier(.45,.05,.55,.95) infinite;}
.motion-swing{animation:swingX 4.5s cubic-bezier(.45,.05,.55,.95) infinite;}

/* ---------- 10.  Parallax Background ---------- */
.parallax{
  background-attachment:fixed;
  background-size:cover;
  background-repeat:no-repeat;
}

/* ---------- 11.  Footer ---------- */
footer{
  font-size:.95rem;
}
footer a{color:#A5B4FC;}
footer a:hover{color:#fff;text-decoration:underline;}
.social-link{margin-right:.75rem;}

/* ---------- 12.  Success Page ---------- */
.success-wrapper{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:var(--clr-complement-50);
}
.success-wrapper h1{color:var(--clr-primary-600);}

/* ---------- 13.  Legal Pages Padding ---------- */
.page-legal{padding-top:100px;}

/* ---------- 14.  Cookie Popup ---------- */
#cookiePopup{
  font-size:.9rem;
  display:none;
}
#cookiePopup button{
  background:var(--clr-success);
  color:#000;
}

/* ---------- 15.  Adaptive Helpers ---------- */
@media (min-width:768px){
  .md-two-thirds{flex:0 0 66.666%;}
}

/* ---------- 16.  Hover / Focus States für Eingabefelder ---------- */
input[type='text'],
input[type='email'],
textarea{
  transition:border-color var(--transition-fast),box-shadow var(--transition-fast);
}
input:focus,textarea:focus{
  border-color:var(--clr-primary-600);
  box-shadow:0 0 0 3px rgba(0,125,255,.2);
}

/* ---------- 17.  Tailwind Ergänzungen für Glas-Effekt ---------- */
.glass{
  backdrop-filter:blur(12px) saturate(130%);
  background:rgba(255,255,255,.25);
  border-radius:var(--radius-lg);
  border:1px solid rgba(255,255,255,.4);
}

/* ---------- 18.  Utility – Text Shadow for Light on Image ---------- */
.txt-shadow-light{
  text-shadow:1px 1px 3px rgba(0,0,0,.6);
}
.card{
  opacity: 1 !important;
}