/* Hero (Variante 1 · Ruhiger Verlauf, linke Seite wie Variante 3)
   Foto über die volle Breite, links liegt ein leicht transparenter weißer Schleier.
   Der echte Seiten-Header (.header, js/main.js) liegt fixiert über dem Hero. */

/* --hh-head = Höhe von .header__inner aus styles.min.css (gleich auf allen Seiten);
   der Hero rechnet nur damit und verändert den Header nicht. */
:root{
  --hh-head:clamp(112px,10vw,124px);
  --hh-padl:clamp(58px,6.6vw,96px);
  --hh-padr:clamp(44px,4.4vw,64px);
  --hh-ease:cubic-bezier(.22,1,.36,1);
}
@media (min-width:981px) and (max-height:720px){:root{--hh-head:96px}}
@media (max-width:1180px){
  :root{--hh-padl:clamp(28px,4vw,56px);--hh-padr:clamp(24px,3.5vw,48px)}
}
@media (max-width:980px){:root{--hh-head:72px}}
@media (max-width:560px){:root{--hh-head:76px}}

/* ---------- Header: identisch mit den Unterseiten ----------
   Desktop kommt unverändert aus styles.min.css. Für Tablet/Handy gelten hier dieselben
   Werte wie auf den Unterseiten (content-pages.css), damit beim Seitenwechsel nichts springt.
   Einzige Ausnahme wie bisher: Auf dem Handy steht das Logo im Hero statt im Header. */
@media (max-width:980px){
  .nav.is-open{
    border-color:rgba(15,36,23,.1);background:#fff;
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }
  /* Trefferflächen mindestens 44px (wie auf den Einsatzbereich-Seiten), ohne Optikänderung */
  .header__cta,.nav-toggle{position:relative}
  .header__cta::after,.nav-toggle::after{
    content:"";position:absolute;top:50%;left:50%;
    width:100%;height:100%;min-width:44px;min-height:44px;
    transform:translate(-50%,-50%);
  }
}
@media (max-width:640px){
  .header .container{padding-left:12px;padding-right:12px}
  .header__inner{gap:8px}
  .header__actions{gap:8px}
  .header__actions .header__cta{padding:9px 10px;font-size:10px}
  .nav-toggle{width:42px;height:42px}
}

/* ---------- Hero ---------- */
.hero.hero--calm{
  position:relative;display:flex;flex-direction:column;align-items:stretch;
  min-height:100vh;min-height:100svh;
  padding:var(--hh-head) 0 0;
  overflow:hidden;color:#050806;background:#fff;
}
.hero.hero--calm::after{content:none;display:none}

/* Foto über die volle Breite; links nur ein lichter, leicht transparenter Schleier */
.hero__visual{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hero__visual::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(255,255,255,.6) 0%,rgba(255,255,255,0) 20%),
    linear-gradient(90deg,rgba(255,255,255,.86) 0%,rgba(255,255,255,.84) max(30%,calc(var(--hh-padl) + 300px)),rgba(255,255,255,.78) max(40%,calc(var(--hh-padl) + 500px)),rgba(255,255,255,.56) max(47%,calc(var(--hh-padl) + 560px)),rgba(255,255,255,.28) max(54%,calc(var(--hh-padl) + 650px)),rgba(255,255,255,.08) max(62%,calc(var(--hh-padl) + 760px)),rgba(255,255,255,0) max(68%,calc(var(--hh-padl) + 840px)));
}
.hero__photo{
  position:absolute;inset:0;display:block;
  width:100%;max-width:none;height:100%;
  object-fit:cover;object-position:right center;transform-origin:70% 55%;
}

.hero__body{
  position:relative;z-index:2;flex:1 0 auto;display:flex;align-items:center;
  padding:0 var(--hh-padr) calc(var(--hh-head) * .42) var(--hh-padl);
}
.hero__copy{max-width:600px}
.hero__lead--long{max-width:548px}
.hero__brand{display:none}
.hero__brand-img{display:block;width:100%;height:auto}
.hero__place{
  margin:0 0 clamp(14px,1.9vh,20px);
  font-size:clamp(13.5px,.35vw + .5rem,15px);line-height:1.4;font-weight:600;letter-spacing:.005em;color:#4a584d;
}
.hero__place i{font-style:normal;color:#315f26;margin:0 .16em}
.hero__headline{
  margin:0 0 0 -.045em;
  font-family:var(--font-head);font-size:clamp(40px,min(4.1vw,6.7vh),64px);line-height:1;font-weight:800;letter-spacing:-.045em;color:#050806;
}
.hero__line{display:block;overflow:hidden;padding:0 .06em .1em;margin:0 -.06em -.1em}
.hero__line > span{display:block}
.hero__accent{color:#315f26}
.hero__lead{
  margin:clamp(18px,2.6vh,24px) 0 0;max-width:33em;
  font-size:clamp(16px,.42vw + .6rem,17px);line-height:1.62;color:#3a433c;text-wrap:pretty;
}
.hero__lead--short{display:none}
.hero__buttons{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3.4vh,32px)}
.hero__button{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:clamp(48px,3.6vw,52px);padding:0 clamp(22px,1.8vw,26px);border-radius:12px;
  font-size:clamp(14px,.3vw + .65rem,15px);font-weight:700;line-height:1;letter-spacing:.005em;
  text-decoration:none;white-space:nowrap;
  transition:background-color .3s ease,border-color .3s ease,box-shadow .35s ease,color .3s ease;
}
.hero__button svg{flex:none;transition:transform .45s var(--hh-ease)}
.hero__button:hover svg{transform:translateX(3px)}
.hero__button--primary{background:#0e2c16;color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 6px 18px rgba(14,44,22,.14)}
.hero__button--primary:hover{background:#15351f;color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 10px 26px rgba(14,44,22,.22)}
.hero__button--secondary{background:#fff;color:#0e2c16;border:1px solid #dde4d9;box-shadow:0 1px 2px rgba(14,44,22,.04)}
.hero__button--secondary:hover{color:#0e2c16;border-color:#9fb39a;box-shadow:0 6px 18px rgba(14,44,22,.08)}
.hero__button:focus-visible{outline:2px solid #315f26;outline-offset:3px}

/* ---------- Motion: ruhig, physisch ---------- */
@keyframes hh-fade{from{opacity:0}to{opacity:1}}
@keyframes hh-settle{from{transform:scale(1.055) translateX(1.2%)}to{transform:none}}
@keyframes hh-rise{from{transform:translateY(105%)}to{transform:none}}
@keyframes hh-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* Foto ist ab dem ersten Frame sichtbar (schneller LCP), es setzt sich nur sanft */
.hero__photo{animation:hh-settle 2.8s var(--hh-ease) both}
.hero__brand{animation:hh-up .8s .02s var(--hh-ease) both}
.hero__place{animation:hh-up .9s .04s var(--hh-ease) both}
.hero__line > span{animation:hh-rise .9s var(--hh-ease) both}
.hero__line:nth-child(1) > span{animation-delay:.1s}
.hero__line:nth-child(2) > span{animation-delay:.17s}
.hero__lead{animation:hh-up .8s .3s var(--hh-ease) both}
.hero__buttons{animation:hh-up .8s .38s var(--hh-ease) both}

/* ---------- Laptop ---------- */
@media (max-width:1180px){
  .hero__copy{max-width:490px}
  .hero__lead{max-width:28.5em;font-size:16px}
  .hero__button{padding:0 20px;font-size:14px}
  .hero__photo{object-position:72% center}
}

/* Hochformat mit Desktop-Header (z. B. iPad Pro 1024×1366): Foto oben statt halb verdeckt */
@media (min-width:981px) and (orientation:portrait){
  .hero.hero--calm{padding:0;background:#fff}
  .hero__visual{
    position:relative;inset:auto;flex:none;
    height:clamp(440px,48vh,680px);height:clamp(440px,48svh,680px);
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 56%,rgba(0,0,0,.86) 66%,rgba(0,0,0,.55) 78%,rgba(0,0,0,.2) 90%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 0%,#000 56%,rgba(0,0,0,.86) 66%,rgba(0,0,0,.55) 78%,rgba(0,0,0,.2) 90%,transparent 100%);
  }
  .hero__visual::after{content:none}
  .hero__photo{object-position:70% 40%;transform-origin:66% 40%}
  .hero__body{justify-content:center;margin-top:-72px;padding:0 var(--hh-padr) 48px var(--hh-padl)}
  .hero__copy{max-width:640px;display:flex;flex-direction:column;align-items:center;text-align:center}
  .hero__place{margin-bottom:16px;font-size:15px}
  .hero__headline{margin:0;font-size:clamp(56px,6.2vw,64px)}
  .hero__lead{margin-top:22px;max-width:32em;font-size:17px;text-wrap:balance}
  .hero__buttons{justify-content:center;margin-top:32px}
  .hero__button{height:52px;padding:0 24px;font-size:15px}
}

/* ---------- Tablet & Handy: Foto oben, blendet nach unten in den Grund ---------- */
@media (max-width:980px){
  .hero.hero--calm{
    padding:0;min-height:100vh;min-height:100svh;background:#fff;
  }
  .hero__visual{
    position:relative;inset:auto;flex:none;
    height:clamp(236px,39vh,440px);height:clamp(236px,39svh,440px);
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 56%,rgba(0,0,0,.86) 66%,rgba(0,0,0,.55) 78%,rgba(0,0,0,.2) 90%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 0%,#000 56%,rgba(0,0,0,.86) 66%,rgba(0,0,0,.55) 78%,rgba(0,0,0,.2) 90%,transparent 100%);
  }
  .hero__visual::after{content:none}
  .hero__photo{object-position:70% 40%;transform-origin:66% 40%}
  .hero__body{
    flex:1 0 auto;align-items:center;justify-content:center;
    margin-top:clamp(-56px,-7vw,-28px);
    padding:0 20px max(24px,env(safe-area-inset-bottom,0px));
  }
  .hero__copy{width:100%;max-width:440px;display:flex;flex-direction:column;align-items:center;text-align:center}
  .hero__brand{display:block;width:clamp(168px,46vw,220px);margin:0 0 6px}
  .hero__place{margin-bottom:10px;font-size:13px}
  .hero__place i{margin:0}
  .hero__headline{margin:0;font-size:clamp(32px,8.6vw,44px);line-height:1.04;letter-spacing:-.04em}
  .hero__lead{margin-top:14px;max-width:25em;font-size:15px;line-height:1.55}
  .hero__lead--long{display:none}
  .hero__lead--short{display:block}
  .hero__buttons{flex-direction:column;align-items:stretch;gap:10px;width:100%;max-width:360px;margin-top:22px}
  .hero__button{height:50px;font-size:15px}
}

/* Tablet hochkant: eigene Stufe statt hochskaliertem Handy-Layout */
@media (min-width:700px) and (max-width:980px){
  .hero__visual{height:clamp(380px,42vh,520px);height:clamp(380px,42svh,520px)}
  .hero__body{margin-top:clamp(-72px,-7vw,-48px)}
  .hero__copy{max-width:560px}
  .hero__brand{width:240px;margin-bottom:10px}
  .hero__place{margin-bottom:14px;font-size:14.5px}
  .hero__headline{font-size:clamp(52px,6.8vw,56px);letter-spacing:-.045em}
  .hero__lead{margin-top:20px;max-width:31em;font-size:16.5px;line-height:1.6;text-wrap:balance}
  .hero__lead--long{display:block}
  .hero__lead--short{display:none}
  .hero__buttons{flex-direction:row;justify-content:center;max-width:520px;gap:12px;margin-top:30px}
  .hero__button{flex:1 1 0;height:52px;padding:0 20px}
}

/* Kurze Handys (z. B. 360×640, 375×667): alles über dem Falz */
@media (max-width:699px) and (max-height:700px){
  .hero__visual{height:clamp(196px,33vh,230px);height:clamp(196px,33svh,230px)}
  .hero__body{margin-top:-30px}
  .hero__brand{width:clamp(140px,40vw,160px);margin-bottom:4px}
  .hero__place{margin-bottom:8px}
  .hero__lead{margin-top:12px}
  .hero__buttons{gap:8px;margin-top:18px}
  .hero__button{height:48px}
}
@media (max-width:699px) and (max-height:600px){
  .hero__visual{height:clamp(150px,28vh,180px);height:clamp(150px,28svh,180px)}
  .hero__brand{width:128px}
}
@media (max-width:380px){
  .hero__place{font-size:12.5px}
  .hero__headline{font-size:31px}
}

/* Handy quer (z. B. 844×390): Foto rechts wie am Desktop, Text links, Logo im Header
   (Logo in derselben Größe wie auf den Unterseiten) */
@media (max-width:980px) and (max-height:540px) and (orientation:landscape){
  .header .logo{display:inline-flex;flex:0 0 auto;align-items:center}
  .header .logo img{width:auto;height:50px}
  .hero.hero--calm{padding:var(--hh-head) 0 0;background:#fff}
  .hero__visual{position:absolute;inset:0;height:auto;-webkit-mask-image:none;mask-image:none}
  .hero__visual::after{content:""}
  .hero__photo{object-position:right center;transform-origin:70% 55%}
  .hero__body{margin-top:0;justify-content:flex-start;padding:0 var(--hh-padr) 16px var(--hh-padl)}
  .hero__copy{max-width:min(440px,58vw);align-items:flex-start;text-align:left}
  .hero__brand{display:none}
  .hero__place{margin-bottom:8px;font-size:12.5px}
  .hero__place i{margin:0 .16em}
  .hero__headline{margin-left:-.045em;font-size:clamp(28px,4.4vw,36px);line-height:1.02}
  .hero__lead{margin-top:10px;font-size:14px;line-height:1.5}
  .hero__lead--long{display:none}
  .hero__lead--short{display:block}
  .hero__buttons{flex-direction:row;flex-wrap:wrap;align-items:center;width:auto;max-width:none;gap:10px;margin-top:16px}
  .hero__button{flex:none;height:46px;padding:0 18px;font-size:14px}
}
@media (max-width:640px) and (max-height:540px) and (orientation:landscape){
  .header .logo img{height:42px}
  .hero__body{padding-left:16px;padding-right:16px}
}

@media (prefers-reduced-motion:reduce){
  .hero--calm *{animation:none !important;transition:none !important}
}