:root{
  --red:#ba4738;
  --blue:#3c567d;
  --dark:#092b5b;
  --light:#e8e8e8;
  --box:#d9d9d9;
  --violet:#24118d;
  --max:1080px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  color:#fff;
  background:var(--blue);
}
img{max-width:100%;display:block}
a{color:inherit}

.nav{
  position:absolute;
  z-index:5;
  top:24px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  justify-content:center;
  font-size:16px;
}
.nav a{
  text-decoration:none;
  background:rgba(255,255,255,.15);
  padding:8px 14px;
  border-radius:999px;
}
.nav a:hover{background:rgba(255,255,255,.28)}

/* Seite 1: Start */
.hero{
  min-height:680px;
  background:var(--blue);
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  overflow:hidden;
  padding:90px 4vw 0;
}
.eyebrow{
  text-transform:uppercase;
  font-size:36px;
  margin:0 0 42px;
}
.hero h1{
  font-size:82px;
  line-height:.95;
  margin:0;
  font-weight:800;
}
.hero__text{z-index:2}
.hero__portrait{
  align-self:stretch;
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
}
.hero__portrait img{
  width:min(620px,58vw);
  height:min(620px,58vw);
  object-fit:cover;
  border-radius:50%;
  object-position:50% 27%;
}
.wheel{
  position:absolute;
  width:300px;
  left:39%;
  top:255px;
  z-index:1;
  opacity:.95;
}

/* Gemeinsamer Seekarten-Hintergrund: bewusst größer skaliert */
.map-section{
  background:
    linear-gradient(rgba(255,255,255,.72),rgba(255,255,255,.72)),
    url('assets/map.png') center center / 175% auto no-repeat;
  color:var(--blue);
}

/* Seite 2: Mission / Lernziele */
.goals{
  min-height:680px;
  position:relative;
  display:block;
  padding:78px 7vw;
  overflow:hidden;
}

.goals::before{
  content:"Meine Mission: Lernziele";
  position:absolute;
  top:76px;
  left:50%;
  transform:translateX(-50%);
  background:var(--box);
  color:var(--blue);
  border-radius:9px;
  padding:4px 14px;
  font-size:56px;
  line-height:1.05;
  white-space:nowrap;
  z-index:2;
}

.goals .round-photo{
  position:absolute;
  left:14vw;
  bottom:162px;
  width:150px;
  height:150px;
  border-radius:0;
  overflow:visible;
  background:url('assets/karte.png') center/contain no-repeat;
  z-index:2;
}
.goals .round-photo img{display:none}

.goals .round-photo::after{
  content:"definieren";
  position:absolute;
  left:-90px;
  bottom:-62px;
  background:var(--box);
  color:var(--blue);
  border-radius:9px;
  padding:5px 13px;
  font-size:50px;
  line-height:1.05;
  white-space:nowrap;
}

.goals__copy{
  position:static;
  text-align:left;
}
.goals__copy h2,
.goals__copy p{display:none}

.goals__copy::before{
  content:"";
  position:absolute;
  left:50%;
  top:280px;
  transform:translateX(-50%);
  width:140px;
  height:140px;
  background:url('assets/leuchtturm.png') center/contain no-repeat;
  z-index:2;
}
.goals__copy::after{
  content:"ansteuern";
  position:absolute;
  left:50%;
  top:423px;
  transform:translateX(-50%);
  background:var(--box);
  color:var(--blue);
  border-radius:9px;
  padding:5px 13px;
  font-size:50px;
  line-height:1.05;
  white-space:nowrap;
  z-index:2;
}

.goals__copy img{
  position:absolute;
  right:8vw;
  top:230px;
  width:210px;
  height:auto;
  z-index:2;
}
.goals__copy img::after{display:none}
.goals::after{
  content:"erreichen";
  position:absolute;
  right:7vw;
  top:354px;
  background:var(--box);
  color:var(--blue);
  border-radius:9px;
  padding:5px 18px;
  font-size:50px;
  line-height:1.05;
  white-space:nowrap;
  z-index:2;
}

/* Seite 3: Leistungen */
.services{
  min-height:680px;
  padding:84px 7vw 70px;
}
.services h2{
  display:inline-block;
  margin:0 0 160px;
  background:var(--box);
  color:var(--blue);
  border-radius:9px;
  padding:5px 13px;
  font-size:56px;
  line-height:1.05;
  font-weight:400;
}
.service-grid{
  max-width:1120px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:150px;
  align-items:start;
}
.service-grid article{
  background:rgba(217,217,217,.94);
  border-radius:28px;
  padding:16px 18px 24px;
  color:var(--violet);
  min-height:245px;
}
.service-grid h3{
  font-size:50px;
  line-height:1;
  margin:0 0 22px;
  color:var(--red);
  font-weight:400;
}
.service-grid p{
  font-size:34px;
  line-height:1.42;
  margin:0;
}

/* Seite 4/5: Arbeitsproben */
.samples{
  background:var(--blue);
  padding:70px max(5vw,24px) 90px;
}
.samples h2{
  text-align:center;
  font-size:50px;
  font-weight:400;
  color:var(--light);
  margin:0 0 32px;
}
.sample-grid{
  max-width:1080px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px 18px;
}
.sample-card{
  background:var(--red);
  border-radius:14px;
  padding:18px 22px 22px;
  min-height:455px;
  display:flex;
  flex-direction:column;
}
.sample-card img{
  height:174px;
  width:100%;
  object-fit:cover;
  border-radius:12px;
  margin-bottom:18px;
}
.sample-card h3{font-size:27px;margin:0 0 14px}
.sample-card p{font-size:18px;line-height:1.28;margin:0 0 22px;font-weight:700}
.sample-card .tool{margin-top:auto}
.sample-card a{font-size:22px;color:#eee;text-decoration:underline;text-underline-offset:4px}

/* Seite 6: Kontakt */
.contact{
  min-height:680px;
  background:var(--red);
  padding:68px 5vw;
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:100px;
  align-items:center;
  position:relative;
}
.contact img{
  width:485px;
  height:485px;
  border-radius:50%;
  object-fit:cover;
  justify-self:center;
}
.contact div{
  align-self:center;
  transform:translateY(-18px);
}
.contact h2{
  font-size:46px;
  font-weight:400;
  text-decoration:none;
  color:#eee;
  margin:0 0 76px 140px;
}
.contact a[href^="mailto:"]{
  display:inline-block;
  background:var(--blue);
  color:#eee;
  border-radius:8px;
  padding:6px 24px 10px;
  font-size:46px;
  line-height:1.15;
  font-weight:400;
  text-decoration:none;
}
.quote{
  position:absolute;
  left:5vw;
  bottom:20px;
  background:var(--box);
  color:var(--blue);
  border-radius:8px;
  padding:12px 22px;
  font-size:30px;
  line-height:1.15;
  font-style:italic;
}
.impressum-link{
  position:absolute;
  right:9vw;
  bottom:44px;
  color:var(--blue)!important;
  font-size:30px!important;
  font-style:italic;
  text-decoration:none;
}

/* Impressum */
.impressum{
  min-height:100vh;
  background:var(--blue);
  display:grid;
  grid-template-columns:360px minmax(320px,650px);
  gap:70px;
  align-items:center;
  padding:70px 6vw;
  color:var(--blue);
}
.impressum img{border-radius:20px;height:545px;width:365px;object-fit:cover}
.impressum article{background:#ddd;border-radius:14px;padding:48px 52px;min-height:545px}
.impressum h1{margin:0 0 28px;font-size:36px}
.impressum p{font-size:16px;line-height:1.35}
.back{display:inline-block;margin-top:20px;color:var(--blue);font-weight:700}

/* Diversität-Unterseite */
.diversity{background:#e7e7e7;color:#20204a;min-height:100vh;padding:70px 8vw}
.diversity h1{text-align:center;font-size:64px;letter-spacing:10px;color:#072a58;font-weight:400}
.diversity__grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;max-width:1120px;margin:70px auto}
.diversity p{font-size:34px;line-height:1.95}
.diversity img{width:100%;max-height:430px;object-fit:contain}
.top-icons{display:flex;justify-content:space-between;font-size:44px;color:#b36ac8}
.top-icons a{text-decoration:none}
.top-icons div{display:flex;gap:20px}

@media(max-width:1050px){
  .map-section{background-size:cover}
  .goals::before{font-size:42px;top:70px}
  .goals .round-photo{left:12vw;width:120px;height:120px}
  .goals .round-photo::after,.goals__copy::after,.goals::after{font-size:38px}
  .goals__copy::before{width:110px;height:110px}
  .goals__copy img{width:170px}
  .service-grid{gap:50px}
  .service-grid h3{font-size:42px}
  .service-grid p{font-size:28px}
  .contact{column-gap:40px}
  .contact h2{margin-left:60px}
  .contact a[href^="mailto:"]{font-size:38px}
}

@media(max-width:850px){
  .nav{position:static;transform:none;padding:16px;background:var(--blue)}
  .hero{grid-template-columns:1fr;text-align:left;min-height:auto;padding:40px 24px}
  .hero h1{font-size:56px}
  .eyebrow{font-size:24px;margin-bottom:28px}
  .hero__portrait{justify-content:center;margin-top:35px}
  .hero__portrait img{width:82vw;height:82vw}
  .wheel{width:180px;left:auto;right:20px;top:300px}

  .goals{min-height:760px;padding:52px 24px}
  .goals::before{font-size:30px;top:40px;width:max-content;max-width:calc(100% - 32px);white-space:normal;text-align:center}
  .goals .round-photo{left:50%;top:155px;bottom:auto;transform:translateX(-50%);width:105px;height:105px}
  .goals .round-photo::after{font-size:32px;left:50%;bottom:-58px;transform:translateX(-50%)}
  .goals__copy::before{top:330px;width:100px;height:100px}
  .goals__copy::after{top:438px;font-size:32px}
  .goals__copy img{top:545px;right:50%;transform:translateX(50%);width:150px}
  .goals::after{top:658px;right:50%;transform:translateX(50%);font-size:32px}

  .services{padding:50px 24px}
  .services h2{font-size:42px;margin-bottom:56px}
  .service-grid,.sample-grid,.contact,.impressum,.diversity__grid{grid-template-columns:1fr}
  .service-grid{gap:24px;margin-top:0}
  .service-grid article{min-height:auto}
  .sample-card{min-height:auto}

  .contact{min-height:auto;text-align:center;padding:55px 24px 150px;gap:42px}
  .contact img{width:76vw;height:76vw;max-width:430px;max-height:430px}
  .contact div{transform:none}
  .contact h2{font-size:38px;margin:0 0 38px}
  .contact a[href^="mailto:"]{font-size:30px;padding:8px 15px}
  .quote{left:24px;right:24px;bottom:82px;font-size:22px}
  .impressum-link{right:24px;bottom:28px;font-size:24px!important}

  .impressum img{width:100%;height:auto}
  .diversity h1{font-size:38px;letter-spacing:5px}
  .diversity p{font-size:24px}
}