:root{  
  --primary:#1d3557;
  --text:#111827;
  --muted:#6b7280;
  --border:#e6e9ef;
  --cream:#fdfaf4;
  --lightblue:#eef4fb;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:"Helvetica Neue", Arial, sans-serif;
  color:var(--text);
  line-height:1.9;
  background:linear-gradient(
    to bottom,
    var(--lightblue) 0%,
    var(--cream) 45%,
    var(--lightblue) 100%
  );
}

/* ---------------- LOGO BAR ---------------- */

.topbar{
  padding:30px 0 20px 0;
}

.nav-inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 60px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.logo{
  height:100px;
  width:auto;
  display:block;
  filter:none;
  opacity:1;
}

.nav-links{
  display:flex;
  gap:30px;
}

.nav-links a{
  text-decoration:none;
  font-weight:600;
  font-size:14px;
  letter-spacing:0.4px;
  color:var(--primary);
}

/* ---------------- STRUCTURE ---------------- */

.content-wrap{
  max-width:1100px;
  margin:0 auto;
  padding:0 60px;
}

.content-wrap.narrow{
  max-width:850px;
}

/* ---------------- HEADER ---------------- */

.header-block{
  padding:90px 0 40px 0;
  text-align:center;
}

h1{
  font-size:42px;
  font-weight:700;
  margin-bottom:10px;
  color:var(--primary);
}

.vor-a1{
  display:block;
  font-size:70px;
  font-weight:900;
  margin-top:10px;
  letter-spacing:-1px;
  color:var(--primary);
}

.lead{
  font-size:22px;
  color:var(--muted);
  max-width:760px;
  margin:25px auto 0 auto;
}

/* ---------------- IMAGE ---------------- */

.image-block{
  margin:120px auto;          /* mehr Luft → klare Trennung */
  text-align:center;
}

.image-block .content-wrap{
  max-width:850px;            /* gleiche Systembreite */
  margin:0 auto;
}

.main-image{
  display:block;
  width:78%;                  /* leicht größer */
  max-width:680px;
  margin:0 auto;
  border-radius:16px;
  box-shadow:
    0 35px 90px rgba(0,0,0,0.07);
}



/* ---------------- INTRO ---------------- */
.intro-block{
  max-width:850px;
  margin:90px auto;             /* sauber zentriert */
  padding:70px 70px;            /* harmonischer Innenabstand */
  border-radius:20px;
  text-align:center;
  border:1px solid rgba(29,53,87,0.06);
  background:rgba(255,255,255,0.92);
  transition:0.3s ease;
}

/* ungerade – ruhig weiß */
.intro-block:nth-of-type(odd){
  background:rgba(255,255,255,0.94);
}

/* gerade – dezente Farbfläche + Schatten */
.intro-block:nth-of-type(even){
  background:rgba(29,53,87,0.035);
  box-shadow:
    0 28px 70px rgba(0,0,0,0.08);
}

/* ---------------- MODUL 1 ANGLEICHEN ---------------- */

.innovation-block{
  max-width:850px;              /* exakt wie .intro-block */
  margin:90px auto;             /* zentriert */
  padding:70px 70px;            /* gleiche Innenabstände */
  border-radius:20px;
  text-align:center;
  border:1px solid rgba(29,53,87,0.06);
  background:rgba(255,255,255,0.94);
}

h2{
  font-size:32px;
  font-weight:800;
  margin-bottom:28px;
  color:var(--primary);
  text-align:center;
}

p{
  font-size:19px;
}

/* ---------------- ACCORDION ---------------- */

.accordion-section{
  padding:120px 0 160px 0;
}

.accordion-item{
  background:white;
  border-radius:14px;
  margin-bottom:26px;
  padding:30px 36px;
  box-shadow:
    0 10px 25px rgba(0,0,0,0.05),
    0 40px 80px rgba(0,0,0,0.04);
  transition:0.3s ease;
}

.accordion-item:hover{
  transform:translateY(-6px);
}

.accordion-title{
  font-weight:800;
  font-size:19px;
  cursor:pointer;
  position:relative;
  color:var(--primary);
}

.accordion-title::after{
  content:"+";
  position:absolute;
  right:0;
  font-weight:800;
}

.accordion-item.open .accordion-title::after{
  content:"–";
}

.accordion-content{
  max-height:0;
  overflow:hidden;
  transition:max-height 0.4s ease;
  color:var(--muted);
  padding-top:14px;
}

.accordion-item.open .accordion-content{
  max-height:800px;
}

/* ---------------- SYSTEM SECTION ---------------- */

.system-section{
  padding:140px 0;
}

.system-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:60px;
  margin-top:70px;
  position:relative;
  align-items:start;
}

.system-card{
  background:white;
  border-radius:18px;
  padding:45px 35px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;   /* oben beginnen */
  align-items:center;
  text-align:center;
  box-shadow:
    0 15px 40px rgba(0,0,0,0.06);
  cursor:pointer;
  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease,
    opacity 0.3s ease;
  position:relative;
  border:1px solid rgba(0,0,0,0.04);
  height:100%;
}
/* Nur untere Reihe nach unten drücken */
.system-grid .system-card:nth-child(3),
.system-grid .system-card:nth-child(4){
  align-self: end;
}

/* Bild normal */

.system-card img{
  width:70%;
  border-radius:12px;
  margin-bottom:25px;
  transition:
    width 0.8s cubic-bezier(.2,.7,.3,1),
    transform 0.8s ease,
    box-shadow 0.8s ease;
}


/* ---------------- GROßANSICHT ---------------- */

.system-card.open{
  grid-column:1 / span 2;
  transform:translateY(-12px);
  box-shadow:
    0 60px 140px rgba(0,0,0,0.22);
  z-index:10;
  border:1px solid rgba(29,53,87,0.15);
}

.system-card.open img{
  width:100%;
  transform:scale(1.02);
  box-shadow:
    0 50px 120px rgba(0,0,0,0.28);
}

.system-grid.dimmed .system-card:not(.open){
  opacity:0.3;
  transform:scale(0.98);
}

/* Präsentations-Analyse-Overlay */

.analysis-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.45);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.4s ease;
  z-index:1000;
}

.analysis-overlay.active{
  opacity:1;
  pointer-events:auto;
}

.analysis-content{
  background:white;
  width:85%;
  max-width:1100px;
  padding:40px;
  border-radius:20px;
  box-shadow:
    0 60px 150px rgba(0,0,0,0.35);
  animation:fadeIn 0.4s ease;
}

.analysis-content img{
  width:100%;
  border-radius:14px;
}

@keyframes fadeIn{
  from{transform:scale(0.95); opacity:0;}
  to{transform:scale(1); opacity:1;}
}

.system-card h3{
  font-size:20px;
  font-weight:800;
  margin-bottom:14px;
  color:var(--primary);
}

.system-card p{
  color:var(--primary);
  font-size:17px;
  max-width:280px;
}

/* ---------------- FOOTER ---------------- */

footer{
  padding:70px 0;
  text-align:left;
  font-size:14px;
  color:var(--muted);
  border-top:1px solid rgba(0,0,0,0.06);
}

.footer-links{
  margin-top:10px;
}

.footer-links a{
  margin-right:20px;
  text-decoration:none;
  color:var(--primary);
  font-weight:600;
}


/* ================================================= */
/* ================= MOBILE VERSION ================= */
/* ================================================= */

@media only screen and (max-width: 900px){

  .content-wrap,
  .nav-inner{
    padding:0 25px;
  }

  .header-block{
    padding:60px 0 30px 0;
  }

  h1{
    font-size:30px;
  }

  .lead{
    font-size:17px;
  }

  .intro-block{
    padding:70px 0;
  }

  .accordion-section{
    padding:70px 0 90px 0;
  }

  .accordion-item{
    padding:20px 22px;
  }

  .system-grid{
    grid-template-columns:1fr;
    gap:35px;
  }

  .system-card.open{
    grid-column:auto;
    transform:none;
  }

  .system-card img{
    width:85%;
  }

}