/* ========================================================
   KFZ GUTACHTEN – V2.0 Premium Design System
   Unbreakable Layout Architecture
   ======================================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root {
  /* Colors: Friendly & Trustworthy Emerald Green */
  --bg-base: #ffffff;
  --bg-surface: #ecfdf5;
  /* Emerald 50 */
  --bg-surface-hover: #d1fae5;
  /* Emerald 100 */

  --bg-dark: #065f46;
  /* Emerald 800 */
  --bg-dark-surface: #047857;
  /* Emerald 700 */

  --text-main: #022c22;
  /* Emerald 950 */
  --text-muted: #475569;
  /* Slate 600 */

  --text-dark-main: #ffffff;
  --text-dark-muted: #a7f3d0;
  /* Emerald 200 */

  --accent: #10b981;
  /* Emerald 500 */
  --accent-hover: #059669;
  /* Emerald 600 */
  --accent-light: #34d399;
  /* Emerald 400 */

  --border: #e2e8f0;
  /* Slate 200 */
  --border-dark: #047857;
  /* Emerald 700 */

  /* Typography */
  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Geometry & Shadows */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 9999px;

  --shadow-sm: 0 2px 8px rgba(9, 9, 11, 0.04);
  --shadow-md: 0 8px 24px rgba(9, 9, 11, 0.06);
  --shadow-hover: 0 16px 48px rgba(9, 9, 11, 0.1);

  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- RESET & BASE ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: var(--font-sans);
  background-color: var(--bg-base);
  color: var(--text-main);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
  /* For fixed header offsets */
}

body {
  overflow-x: hidden;
  /* Prevent horizontal scroll completely */
  width: 100%;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
  transition: all var(--transition);
}

ul {
  list-style: none;
}

/* ---------- THE UNBREAKABLE CONTAINER SYSTEM ---------- */
/* 
   The most important class to fix the "zero margin" issue. 
   This guarantees that NO MATTER WHAT, content stays inside 1200px
   and always has at least 24px (1.5rem) of margin on the sides.
*/
.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1.5rem;
  /* Base padding for mobile */
}

@media (min-width: 768px) {
  .container {
    padding-inline: 3rem;
    /* Larger padding for tablets */
  }
}

@media (min-width: 1024px) {
  .container {
    padding-inline: 4rem;
    /* Massive padding for desktop to ensure extreme breathability */
  }
}

/* ---------- TYPOGRAPHY ---------- */
h1,
h2,
h3,
h4 {
  color: var(--text-main);
  line-height: 1.1;
  letter-spacing: -0.03em;
  /* Premium tight tracking */
  font-weight: 700;
}

.heading-xl {
  font-size: clamp(2.5rem, 5vw + 1rem, 4.5rem);
}

.heading-lg {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 1rem;
}

.text-lead {
  font-size: clamp(1.125rem, 2vw, 1.25rem);
  color: var(--text-muted);
}

.text-sm {
  font-size: 0.875rem;
}

.label-mini {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--accent);
}

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  border: border-box;
  text-align: center;
  transition: var(--transition);
}

.btn-primary {
  background-color: var(--accent);
  color: #fff;
}

.btn-primary:hover {
  background-color: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.25);
}

.btn-outline {
  background-color: transparent;
  color: var(--text-main);
  border: 1px solid var(--border);
}

.btn-outline:hover {
  background-color: var(--bg-surface);
  border-color: #d4d4d8;
}

.btn-dark {
  background-color: #fff;
  color: var(--text-main);
}

.btn-dark:hover {
  background-color: var(--bg-surface);
  transform: translateY(-2px);
}

@keyframes pulse-red {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}

.btn-pulse {
  animation: pulse-red 2s infinite;
}

/* ---------- HEADER (NAVIGATION) ---------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  z-index: 100;
  display: flex;
  align-items: center;
}

.nav-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.logo-img {
  height: 168px;
  width: auto;
  object-fit: contain;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-link {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-muted);
}

.nav-link:hover {
  color: var(--text-main);
}

.nav-toggle,
.nav-checkbox {
  display: none;
}

/* ---------- HERO SECTION (DARK MODE) ---------- */
.hero {
  background-color: var(--bg-dark);
  color: var(--text-dark-main);
  padding-top: calc(80px + 6rem);
  /* Space for header + top margin */
  padding-bottom: 6rem;
  position: relative;
}

.hero h1,
.hero h2 {
  color: var(--text-dark-main);
}

.hero-container {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .hero-container {
    flex-direction: row;
    justify-content: space-between;
  }

  .hero-content {
    flex: 1;
    max-width: 50%;
  }
}

.hero-image-wrapper {
  flex: 1;
  width: 100%;
  max-width: 600px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  margin: 0 auto;
}

.hero-image {
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}

.hero .text-lead {
  color: var(--text-dark-muted);
  max-width: 60ch;
  margin-top: 1.5rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.5rem;
}

.hero-trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-dark-muted);
}

.trust-badge svg {
  flex-shrink: 0;
}

/* Floating Stats Bento Box */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 5rem;
}

.stat-card {
  background: var(--bg-dark-surface);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-lg);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.stat-val {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  margin-bottom: 0.5rem;
}

.stat-label {
  font-size: 0.875rem;
  color: var(--text-dark-muted);
  font-weight: 500;
}

/* ---------- BENTO SECTION: ÜBER MICH ---------- */
.section {
  padding-block: 8rem;
}

.section-bg-surface {
  background-color: var(--bg-surface);
}

.about-bento {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
}

.about-text-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.about-text-content p {
  font-size: 1.125rem;
  color: var(--text-muted);
  line-height: 1.8;
}

/* Features Grid inside About */
.features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1rem;
}

.feature-pill {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--bg-surface);
  padding: 1rem 1.5rem;
  border-radius: var(--radius-md);
  font-weight: 600;
  color: var(--text-main);
  border: 1px solid var(--border);
}

.feature-pill svg {
  color: var(--accent);
  width: 24px;
  height: 24px;
}

/* ---------- ABLAUF (PROCESS) ---------- */
.process-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 3rem;
}

@media (min-width: 768px) {
  .process-steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

.process-step {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  text-align: center;
  position: relative;
  transition: var(--transition);
}

.process-step:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: rgba(37, 99, 235, 0.3);
}

.step-number {
  width: 48px;
  height: 48px;
  background: var(--accent);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 auto 1.5rem;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.step-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--text-main);
}

/* ---------- BENTO SECTION: LEISTUNGEN ---------- */
.services-header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 4rem auto;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), 1fr);
  gap: 1.5rem;
}

.service-card {
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--accent);
  opacity: 0;
  transition: var(--transition);
}

.service-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
  border-color: transparent;
}

.service-card:hover::before {
  opacity: 1;
}

.service-icon-wrapper {
  width: 56px;
  height: 56px;
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  margin-bottom: 1.5rem;
}

.service-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.service-card p {
  color: var(--text-muted);
  font-size: 1rem;
}

/* ---------- FAQ ---------- */
.faq-accordion {
  max-width: 800px;
  margin: 3rem auto 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.faq-item {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: var(--transition);
}

.faq-item:hover {
  border-color: rgba(37, 99, 235, 0.5);
}

.faq-question {
  padding: 1.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-main);
  cursor: pointer;
  list-style: none;
  /* Hide default arrow */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-question::after {
  content: "+";
  font-size: 1.5rem;
  color: var(--accent);
  transition: var(--transition);
}

.faq-item[open] .faq-question::after {
  content: "−";
}

.faq-answer {
  padding: 0 1.5rem 1.5rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ---------- CONTACT SECTION ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.contact-method {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.contact-method-icon {
  width: 48px;
  height: 48px;
  background: var(--bg-surface);
  color: var(--accent);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-method div span {
  display: block;
}

.contact-method-label {
  font-size: 0.875rem;
  color: var(--text-muted);
  font-weight: 500;
}

.contact-method-val {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-main);
}

.form-wrapper {
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  padding: 2.5rem;
  box-shadow: var(--shadow-md);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.form-group label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-main);
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-surface);
  font-family: inherit;
  font-size: 1rem;
  transition: var(--transition);
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-base);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.form-group textarea {
  min-height: 120px;
  resize: vertical;
}

/* ---------- FOOTER ---------- */
.footer {
  background: var(--bg-dark);
  color: var(--text-dark-main);
  padding-block: 4rem 2rem;
  border-top: 1px solid var(--border-dark);
}

.footer-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  text-align: center;
}

.footer-logo {
  display: inline-block;
}

.footer-links {
  display: flex;
  gap: 2rem;
}

.footer-link {
  color: var(--text-dark-muted);
  font-size: 0.875rem;
}

.footer-link:hover {
  color: #fff;
}

.footer-copy {
  color: var(--text-dark-muted);
  font-size: 0.75rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border-dark);
  width: 100%;
}

/* ---------- RESPONSIVE ARCHITECTURE ---------- */
@media (max-width: 1024px) {
  .hero-stats {
    grid-template-columns: repeat(3, 1fr);
  }

  .about-bento,
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

@media (max-width: 768px) {

  /* Mobile Nav */
  .nav-checkbox {
    display: none;
  }

  .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    z-index: 110;
  }

  .nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--text-main);
    transition: var(--transition);
  }

  .nav-links {
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    background: var(--bg-base);
    flex-direction: column;
    padding: 2rem;
    border-bottom: 1px solid var(--border);
    clip-path: circle(0px at top right);
    transition: clip-path 0.4s ease-out;
    box-shadow: var(--shadow-md);
  }

  .nav-checkbox:checked~.nav-links {
    clip-path: circle(150% at top right);
  }

  .nav-checkbox:checked~.nav-toggle span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }

  .nav-checkbox:checked~.nav-toggle span:nth-child(2) {
    opacity: 0;
  }

  .nav-checkbox:checked~.nav-toggle span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }

  .hero-stats {
    grid-template-columns: 1fr;
  }

  .services-grid {
    --cols: 1;
    /* Override services grid to 1 column */
  }

  .logo-img {
    height: 126px;
  }

  .hero-actions {
    flex-direction: column;
  }

  .hero-actions .btn {
    width: 100%;
  }

  /* Reduce massive section padding for mobile so text isn't too squished,
     but `.container` guarantees at least 1.5rem margin! */
  .section {
    padding-block: 5rem;
  }
}

@media (max-width: 480px) {
  .heading-xl {
    font-size: 2.25rem;
  }

  .heading-lg {
    font-size: 1.75rem;
  }

  /* Extremely important for small screens, ensure forms don't break boundaries */
  .form-wrapper {
    padding: 1.5rem;
  }

  .stat-card {
    padding: 1.5rem;
  }
}

/* ---------- REVIEWS SECTION ---------- */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}

.review-card {
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: var(--shadow-sm);
}

.review-stars {
  display: flex;
  color: #fbbf24;
  /* Amber 400 */
  gap: 4px;
}

.review-stars svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.review-text {
  font-size: 1rem;
  color: var(--text-main);
  line-height: 1.6;
  font-style: italic;
}

.review-author {
  margin-top: auto;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 12px;
}

.review-author-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-surface-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--accent);
}

/* Checkmark badge for verified */
.verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: #10b981;
  /* Emerald 500 */
  font-weight: 600;
  margin-top: 4px;
}

/* ---------- TEXT LOGO ---------- */
.logo {
  text-decoration: none;
}

.logo-text {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-transform: uppercase;
}

.logo-sub {
  display: block;
  font-size: 0.75rem;
  color: var(--accent);
  letter-spacing: 0.1em;
  font-weight: 600;
  text-transform: uppercase;
}