:root {
        --hero-bg-url: url('bilder/Fahrschul_Copilot_Opener.jpg');
      }
      html, body { 
        font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
        height: 100%; 
      }
      body { scroll-behavior: smooth; }





/* Alternative: responsive mit clamp */
 /* .navbar .nav-link { font-size: clamp(.95rem, .9vw, 1.125rem); } */

      /* ---------- NAVBAR ---------- */
      .navbar { transition: background-color .25s ease, box-shadow .25s ease, color .25s ease; }
      .navbar .nav-link { 
          transition: color .2s ease; 
          font-size: 1.5rem;           /* z.B. 16px */
          line-height: 1.2;          /* saubere Höhe */
          padding: .5rem .75rem;     /* optional: etwas kompakter/luftiger */
      }
      .navbar-brand-logo { height: 40px; width: 40px; object-fit: cover; border-radius: .5rem; }
      .navbar.is-top { background: transparent !important; }
      .navbar.is-top .nav-link { color: rgba(255,255,255,.9); }
      .navbar.is-top .nav-link:hover { color: #fff; }
      .navbar.is-scrolled { background: rgba(255,255,255,.98) !important; box-shadow: 0 .125rem .5rem rgba(0,0,0,.08); }
      
      /*    Desktop Font size   */
      @media (min-width: 992px) {
      .navbar .nav-link { font-size: 1.5rem; }  /* ~18px */
      }
      /* ---------- HERO ---------- */
      .hero-landing {
        position: relative;
        min-height: 100svh;
        display: grid;
        align-items: center;
        color: #fff;
        background-image:
          linear-gradient(180deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.0) 100%),
          var(--hero-bg-url);
        background-size: cover;
        background-position: center top;
        background-repeat: no-repeat;
      }
      /* Parallax-ish effect for larger screens */
      @media (min-width: 768px) {
        .hero-landing { background-attachment: fixed; }
      }
      .hero-panel {
        background: rgba(3, 3, 3, .45);
        backdrop-filter: blur(2px);
        border-radius: .25rem;
        padding: 1.25rem 1.5rem;
        max-width: 640px;
      }
      .hero-eyebrow {
        letter-spacing: .18em;
        text-transform: uppercase;
        font-size: .9rem;
        opacity: .85;
        margin-bottom: .5rem;
      }
      .hero-title { font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.05; font-weight: 700; }
      .hero-phone {
        position: absolute;
        right: max(2vw, 16px);
        bottom: -3rem;
        max-width: 42vw;
        transform: rotate(-10deg);
        filter: drop-shadow(0 1rem 1.25rem rgba(0,0,0,.35));
        pointer-events: none;
        user-select: none;
      }
      @media (max-width: 991.98px) {
        .hero-phone { display: none; }
      }





      /* ---------- NEXT SECTION (white overlay covering on scroll) ---------- */
      .section-first {
        position: relative;
        z-index: 2;
        background: #fff;
        margin-top: -4rem; /* overlaps the hero a bit so it 'covers' it while scrolling */
        border-top-left-radius: .25rem;
        border-top-right-radius: .25rem;
        box-shadow: 0 -0.25rem 1rem rgba(0,0,0,.06);
      }

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

      /* Dark Features-Section */
      .section-features {
        background: #0f1623;            /* dezentes sehr dunkles Blau/Grau */
        color: #fff;
      }
      .section-features .feature-card {
        background: rgba(255,255,255,.03);
        border: 1px solid rgba(255,255,255,.08);
        border-radius: .5rem;
        padding: 1.5rem;
        height: 100%;
      }
      .section-features .feature-icon {
        width: 85px; height: 85px;
        object-fit: contain;
        flex: 0 0 85px;
        filter: drop-shadow(0 .25rem .75rem rgba(0,0,0,.25));
      }
      .section-features .feature-title { margin-bottom: .25rem; }
      .section-features .feature-text  { margin: 0; opacity: .85; }






    /* ===== Showcase (dark) ===== */
    .section-showcase{
      background:#191d23; /* dunkles Grau/Blau */
      color:#fff;
    }
    .section-showcase .lead-sub{opacity:.8}

    .showcase-card{
      position:relative;
      height:100%;
    }
    .showcase-media{
      border-radius:1rem;
      overflow:hidden;
      box-shadow:0 .75rem 1.75rem rgba(0,0,0,.35);
      transition:transform .45s cubic-bezier(.2,.6,.2,1),
                box-shadow .45s cubic-bezier(.2,.6,.2,1);
      will-change:transform;
    }

    .showcase-media img{width:100%;height:100%;object-fit:cover}

    /* weiße Textkarte überlappt das Bild unten */
    .showcase-body{
      background:#fff;color:#111;
      border-radius:.75rem;
      box-shadow:0 .5rem 1.25rem rgba(0,0,0,.25);
      margin-top:-2rem; /* Überlappung */
      position:relative; z-index:2;
      padding:1.25rem 1.25rem 1rem;
    }

    /* Hover-Zoom – wirkt auch, wenn man NUR die Textkarte hovert */
    @media (hover:hover) and (prefers-reduced-motion:no-preference){
      .showcase-card:hover .showcase-media{
        transform:translateY(-6px) scale(1.04);
        box-shadow:0 1.25rem 2.25rem rgba(0,0,0,.45);
      }
    }


/* Dark section */
.section-showcase { background:#191d23; color:#000000; }

/* Card: weiße Textfläche, kein Rand zwischen Bild & Body */
.section-showcase .card { border:0; border-radius:1rem; box-shadow:0 .75rem 1.75rem rgba(0,0,0,.35); }
.section-showcase .card-body { color:#111; background-color: #ffffff; }              /* dunkler Text in weißer Fläche */
.section-showcase .card-img-top { display:block; }        /* Baseline-Gap sicher vermeiden */

/* dezenter Hover-Zoom nur fürs Bild */
.section-showcase .card-img-top { transition:transform .35s ease, box-shadow .35s ease; }
.section-showcase .card:hover .card-img-top { transform:scale(1.03) translateY(-4px); }    




/* Blaue Section */
.section-blue {
  background: #1ea2ff;             /* passe den Farbton bei Bedarf an */
  color: #0d1b2a;                   /* dunkler Text auf Blau (wie im Shot) */
  overflow: hidden;                 /* schneidet evtl. Überstände sauber ab */
}

/* Bild-Stack rechts */
.art-stack {
  position: relative;
  min-height: clamp(320px, 46vw, 560px);  /* Platz für das Arrangement */
}

/* Grundverhalten der PNGs */
.art-stack img {
  position: absolute;
  display: block;
  height: auto;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 1rem 1.5rem rgba(0,0,0,.35));
  will-change: transform;
  transition: transform .35s ease;
}

/* Größen über CSS-Variablen (einfach anzupassen) */
.art-stack {
  --w-a: clamp(160px, 20vw, 260px);   /* Phone A */
  --w-b: clamp(160px, 20vw, 260px);   /* Phone B */
  --w-c: clamp(320px, 34vw, 540px);   /* Laptop/Tablet/Kombo */
}

/* Positionen (Desktop, ≥lg) – gerne feintunen */
.art-a { width: var(--w-a); top: 2%;  right: calc(var(--w-b) + 28px); transform: rotate(-10deg); z-index: 2; }
.art-b { width: var(--w-b); top: 5%;  right: 0;                        transform: rotate(12deg);  z-index: 3; }
.art-c { width: var(--w-c); bottom: -6%; right: 6%;                    transform: rotate(0deg);   z-index: 1; }

/* Kleine Hover-Lift-Effekte (optional) */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .art-stack img:hover { transform: translateY(-4px) scale(1.02) rotate(var(--rot,0deg)); }
  .art-a { --rot: -10deg; } .art-b { --rot: 12deg; }
}

/* Responsive: < lg => Bilder nicht absolut stapeln, sondern normal untereinander zentrieren */
@media (max-width: 991.98px){
  .art-stack { min-height: unset; }
  .art-stack img {
    position: static;
    width: min(70vw, 420px);
    margin: 1rem auto 0;
    transform: none !important;
  }
}

/* Icons neben der Funktionsauflistung */
.icon-placeholder {
  width: 42px;
  height: 42px;
  border-radius: .5rem;
  background: #1fadff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 .15rem .6rem rgba(0,0,0,.1);
}
.icon-placeholder img {
  width: 22px;
  height: 22px;
  filter: brightness(0) invert(1); /* Weiß einfärben */
}






    /* Testimonial Cards */
    .section-testimonials .card {
      border: 1px solid #e7e7e9;
      border-radius: .75rem;
    }
    .section-testimonials .avatar {
      width: 40px; height: 40px; border-radius: 50%;
    }
    .section-testimonials .stars {
      height: 18px; width: auto;
    }
    .section-testimonials .lead-sub { opacity: .7; }