/* Tokens */
:root{
  --bg:#ffffff;
  --text:#111418;
  --muted:#5a6675;
  --surface:#f5f7f9;
  --primary:#95f9c3;  /* Mintgrün */
  --primary-ink:#093a26;
  --radius:16px; --radius-sm:12px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --maxw:1120px; --gutter:clamp(16px,4vw,28px);
}
/*
@media (prefers-color-scheme: dark){
  :root{ --bg:#0f1012; --text:#e9edf3; --muted:#a7b0be; --surface:#17191c; --shadow:0 10px 30px rgba(0,0,0,.35) }
}
*/
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Noto Sans',Arial,sans-serif;
  background:var(--bg);color:var(--text);line-height:1.6
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
p{margin:0 0 1rem}
h1,h2,h3{line-height:1.2;margin:0 0 .6rem}
h1{font-size:clamp(1.8rem,3vw + 1rem,3rem)}
h2{font-size:clamp(1.6rem,2.2vw + 1rem,2.2rem)}
h3{font-size:clamp(1.2rem,1.1vw + .9rem,1.4rem)}

.container{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.grid{display:grid;gap:clamp(18px,3vw,28px)}
.grid.two{grid-template-columns:1.15fr .85fr}
.vcenter{align-items:center}
.vstart{align-items:start}
@media (max-width:900px){.grid.two{grid-template-columns:1fr}}

/* Header */
.site-header{
  position:sticky;top:0;z-index:20;
  background:color-mix(in oklab,var(--bg),transparent 15%);backdrop-filter:blur(8px);
  border-bottom:1px solid color-mix(in oklab,var(--surface),transparent 40%)
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding-block:10px}
.brand{display:flex;gap:10px;align-items:center;font-weight:700}
.brand-name{letter-spacing:.2px}
.site-nav ul{display:flex;gap:8px;list-style:none;margin:0;padding:0}
.site-nav a{
  padding:8px 12px;
  border-radius:var(--radius-sm);
  white-space: nowrap;
}
.site-nav a:hover{background:color-mix(in oklab,var(--surface),transparent 15%)}
.nav-toggle{display:none;background:none;border:0;padding:10px;border-radius:12px}
.nav-toggle .bar{display:block;width:22px;height:2px;background:var(--text);margin:5px 0}
@media (max-width:800px){
  .nav-toggle{display:block}
  .site-nav{
    position:fixed;inset:60px var(--gutter) auto var(--gutter);
    background:var(--surface);border-radius:var(--radius);padding:12px;box-shadow:var(--shadow);
    opacity:0;transform:translateY(-10px);pointer-events:none;transition:.2s
  }
  .site-nav.open{opacity:1;transform:none;pointer-events:auto}
  .site-nav ul{flex-direction:column}
}
/* LOGO */
.site-logo{
  height: 48px;        /* Desktop-Größe */
  width: auto;
  display: block;
}

@media (max-width: 800px){
  .site-logo{
    height: 40px;      /* Mobile etwas kleiner */
  }
}
/***********/
/* Hero: Bild zuerst, dann Text reinfaden; Bild skaliert zurück */
.hero{position:relative;min-height:clamp(82vh,92vh,96vh);display:grid;place-items:center;overflow:hidden}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);opacity:.85;transition:transform 3s ease, opacity 1s ease}
.hero::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(1200px 600px at 50% 30%,color-mix(in oklab,var(--bg),transparent 15%),transparent 55%),
             linear-gradient(180deg,transparent 40%, color-mix(in oklab,var(--bg),transparent 0%) 85%);
  opacity:.0;transition:opacity 1.2s ease
}
.hero-inner{position:relative;z-index:1}
.hero-copy{max-width:64ch;opacity:0;transform:translateY(10px);transition:opacity .8s ease .4s, transform .8s ease .4s}


.hero .actions{display:flex;gap:12px;margin-top:12px}
.hero.ready .hero-media img{opacity:.85;transform:scale(1.0)}
.hero.ready::after{opacity:1}
.hero.ready .hero-copy{opacity:1;transform:none}
/* Hero – Anpassungen NUR am Desktop */
@media (min-width: 900px){
  .hero h1{
    font-size: clamp(2.2rem, 3.6vw + 1rem, 3.1rem);
    font-weight: 700;
  }

  .hero .lead{
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.75;
  }

  .hero-copy{
    margin-top: -15vh;
  }
}

/* Sections */
.section{padding:clamp(40px,7vw,80px) 0}
.section--alt{background:var(--surface)}
.caption{color:var(--muted);font-size:.9rem;margin-top:.25rem}
.media-card{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:var(--surface)}
.checklist{padding-left:0;list-style:none;display:grid;gap:10px}
.checklist li{background:#fff1;border:1px solid color-mix(in oklab,var(--surface),transparent 35%);padding:12px;border-radius:var(--radius-sm)}
.bullets{padding-left:1.1rem}
.bullets li{margin:6px 0}

/* Buttons & Links */
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;border:1px solid color-mix(in oklab,var(--text),transparent 80%);font-weight:650;cursor:pointer}
.btn--primary{background:linear-gradient(135deg,var(--primary),color-mix(in oklab,var(--primary),#ffffff 35%));color:var(--primary-ink);border-color:transparent}
.btn--ghost:hover{background:color-mix(in oklab,var(--text),transparent 92%)}
.link{color:inherit;border-bottom:2px solid color-mix(in oklab,var(--text),transparent 70%);padding-bottom:2px}
.link:hover{border-color:var(--text)}

/* Nav als Buttons (mintgrüne Pills) */
.btn--nav{
  background:linear-gradient(135deg,var(--primary),color-mix(in oklab,var(--primary),#ffffff 35%));
  color:var(--primary-ink);border:1px solid transparent;padding:10px 14px;border-radius:999px
}
.btn--nav:hover{filter:brightness(1.05)}
.btn--nav-strong{box-shadow:0 0 0 2px color-mix(in oklab,var(--primary),transparent 50%) inset}

/* Karten & Kontakt */
.card{background:var(--surface);border:1px solid color-mix(in oklab,var(--surface),transparent 40%);padding:16px;border-radius:var(--radius);box-shadow:var(--shadow)}
.contact-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0 18px}
.contact .contact-title{font-size:.9rem;color:var(--muted)}
.contact .contact-value{font-size:1.1rem;font-weight:650}

/* Map */
.map-embed iframe{width:100%;height:260px;border:0;border-radius:var(--radius)}

/* Footer */
.site-footer{padding:28px 0;border-top:1px solid color-mix(in oklab,var(--surface),transparent 50%)}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:12px}
.footer-links{list-style:none;display:flex;gap:12px;margin:0;padding:0}
@media (max-width:700px){.footer-inner{flex-direction:column;align-items:flex-start}}

/* Accessibility & helpers */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:fixed;left:10px;top:10px;background:var(--primary);color:var(--primary-ink);padding:10px;border-radius:10px}
.hidden{position:absolute !important;left:-9999px !important}

/* Scroll-down Pfeil */
.scroll-down{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);background:transparent;border:0;font-size:2rem;opacity:.6;cursor:pointer}
.scroll-down:hover{opacity:1}

/* Motion respect */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/*********/
.section-head {margin-bottom: 10px}
.section-intro {color: var(--muted); max-width: 65ch}

.features-grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1000px){ .features-grid{grid-template-columns: repeat(2, 1fr)} }
@media (max-width: 640px){ .features-grid{grid-template-columns: 1fr} }

.feature-card{
  background:#fff; color:var(--text);
  border:1px solid color-mix(in oklab, var(--surface), transparent 35%);
  border-radius: var(--radius); padding:18px;
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
/*
@media (prefers-color-scheme: dark){
  .feature-card{ background: var(--surface) }
}
*/
.feature-card:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,.12) }
.feature-icon{
  width:40px;height:40px;border-radius:12px;
  background: linear-gradient(135deg, var(--primary), color-mix(in oklab, var(--primary), #fff 35%));
  color: var(--primary-ink);
  display:grid;place-items:center;margin-bottom:10px;
}
.feature-card h3{ margin: 8px 0 6px }
.feature-card p{ color: var(--muted) }

.cta-band{
  margin-top: 18px; padding: 14px;
  display:flex; gap:12px; align-items:center; justify-content:space-between;
  background: color-mix(in oklab, var(--primary), transparent 85%);
  border:1px dashed color-mix(in oklab, var(--primary), transparent 50%);
  border-radius: var(--radius);
}
@media (max-width:640px){ .cta-band{flex-direction:column; align-items:flex-start} }

.is-hidden{
  display: none;
}