:root{
  --blue:#0B2F4A; --teal:#2C9A91; --light:#F4F3F1;
  --font-head:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --font-body:'Lato',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font-body);background-color:var(--light);color:var(--blue);line-height:1.65;font-size:16px;}
header{background:#fff;border-bottom:2px solid var(--light);position:sticky;top:0;z-index:1000;}
.nav{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:14px 20px;}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}

.logo {
  height: clamp(40px, 5vw, 60px);
  width: auto;
  display: block;
}

.menu{display:flex;gap:18px;align-items:center;position:relative}
.menu a{color:var(--blue);text-decoration:none;font-weight:600;}
.menu a:hover{color:var(--teal)}
.dropdown{position:relative;display:inline-block}
.dropbtn{cursor:pointer}
.dropdown-content{
  display:none; position:absolute; top:100%; left:0;
  background:#fff; border:1px solid #e7e7e4; border-radius:10px;
  min-width:220px; box-shadow:0 8px 20px rgba(0,0,0,0.08); padding:8px; z-index:1001;
}
.dropdown-content a{display:block; padding:10px 12px; border-radius:8px; color:var(--blue); text-decoration:none;}
.dropdown-content a:hover{background:var(--light)}
.dropdown:hover .dropdown-content{display:block}
.hero{text-align:center;padding:110px 22px 120px;background:linear-gradient(90deg,var(--blue),var(--teal));color:#fff;}
.hero h1{font-family:var(--font-head);font-size:clamp(1.8rem, 3vw, 2.6rem);margin:0 0 10px;}
.hero p{max-width:760px;margin:0 auto 22px;font-size:clamp(1rem, 2.2vw, 1.15rem)}
.section{padding:64px 22px;background:var(--light);}
.container{max-width:1100px;margin:0 auto}
h2{font-family:var(--font-head);font-size:clamp(1.4rem, 2.4vw, 2rem);margin:0 0 16px;color:var(--blue);}
.lead{max-width:800px;margin:0 0 18px;font-size:clamp(1rem,2vw,1.125rem)}
ul{max-width:800px;margin:0 0 18px 20px}
.cardrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:24px;}
.card{background:#fff;border:1px solid #e7e7e4;border-radius:10px;padding:22px;}
.card h3{margin:0 0 8px;font-family:var(--font-head)}
.button{display:inline-block;background:var(--teal);color:#fff;padding:12px 26px;border-radius:6px;text-decoration:none;font-weight:700;transition:.25s;}
.button:hover{background:var(--blue)}
footer{background:var(--blue);color:#fff;text-align:center;padding:36px 12px;font-size:.95rem;}
footer a{color:var(--teal);text-decoration:none} 
footer a:hover{text-decoration:underline}
.burger{display:none;position:relative;width:40px;height:34px;border:0;background:transparent;cursor:pointer}
.burger span{position:absolute;left:0;right:0;height:3px;background:var(--blue);border-radius:2px;transition:.25s}
.burger span:nth-child(1){top:7px}
.burger span:nth-child(2){top:15px}
.burger span:nth-child(3){top:23px}
.nav-open .burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-open .burger span:nth-child(2){opacity:0}
.nav-open .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.mobile-nav a{display:block;padding:12px 6px;border-bottom:1px solid #f0efed;color:var(--blue);text-decoration:none;font-weight:600;}
.mobile-nav a:last-child{border-bottom:none}
.mobile-nav details{margin:6px 0 8px;border-bottom:1px solid #f0efed;padding-bottom:6px}
.mobile-nav summary{list-style:none; cursor:pointer; padding:12px 6px; font-weight:700; color:var(--blue);}
.mobile-nav summary::-webkit-details-marker{display:none}
.mobile-nav details[open] summary{color:var(--teal)}
.mobile-nav details a{padding-left:16px}
.dropdown:focus-within .dropdown-content{display:block}
@media (max-width: 900px){
  .menu{display:none}
  .burger{display:block}
  header{position:sticky;top:0;z-index:1000;background:#fff}
}
@media (min-width: 901px){
  .mobile-nav{display:none !important}
}

/* Animated mobile menu */
.mobile-nav{
  background:#fff;
  border-top:1px solid #e7e7e4;
  overflow:hidden;
  padding:0 16px;
  max-height:0;
  opacity:0;
  transition:max-height .35s ease, opacity .25s ease, padding .25s ease;
}
.nav-open #mobile-nav{
  max-height:80vh;
  opacity:1;
  padding:10px 16px 16px;
}
.hero {
  position: relative;
  text-align: center;
  padding: 110px 22px 120px;
  background: linear-gradient(90deg, var(--blue), var(--teal));
  color: #fff;
  overflow: hidden;
}

/* Kompass im Hintergrund */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("kompass-hero.png");
  background-repeat: no-repeat;
  background-position: center left; /* oder center, right etc. */
  background-size: min(60vh, 60vw); /* passt sich der Bildschirmgröße an */
  opacity: 0.14; /* Helligkeit des Kompasses */
  pointer-events: none; /* nicht anklickbar, stört nichts */
}

/* Text im Hero bleibt oben drauf */
.hero-inner {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
}

footer {
  position: relative;
  background: var(--blue);
  color: #fff;
  text-align: center;
  padding: 36px 12px;
  font-size: 0.95rem;
  overflow: hidden;
}

footer::before {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -80px;
  width: 260px;
  height: 260px;
  background-image: url("kompass-hero.png");
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.08;
  pointer-events: none;
}

/* =========================
   ÜBER MICH: FOTO LINKS (NEU)
   ========================= */

/* Du brauchst dafür im HTML die Klassen:
   <div class="about-grid">
     <div class="about-text">...</div>
     <div class="about-photo"><img ...></div>
   </div>
*/

.about-grid{
  display:grid;
  grid-template-columns:0.8fr 1.2fr;
  gap:2rem;
  align-items:start;
}

/* Erzwingt Foto links, auch wenn es im HTML nach dem Text kommt */
.about-photo{
  order:-1;
}

.about-photo img{
  width:100%;
  height:auto;
  display:block;
  border-radius:12px;
  box-shadow:0 10px 26px rgba(0,0,0,0.12);
}

@media (max-width:900px){
  .about-grid{
    grid-template-columns:1fr;
  }
  .about-photo{
    order:0;
  }
  .about-photo img{
    max-width:340px;
    margin:0 auto 24px;
  }
}