/* =====================================================================
   home.css – Startseite im neuen Markendesign (setzt brand.css voraus)
   ===================================================================== */
/* Hero */
.hero{position:relative;overflow:hidden}
.hero__inner{position:relative;z-index:1;display:flex;align-items:center;min-height:720px;padding-block:56px 72px}
.hero__text{flex:0 1 640px;min-width:0}
.hero h1{font-size:clamp(50px,6.3vw,92px);line-height:.95;color:var(--navy);letter-spacing:-.02em}
.hero h1 em{color:var(--gold-em)}
.hero__lead{margin:30px 0 0;font-size:18px;line-height:1.65;color:var(--text-2);max-width:31em;text-wrap:pretty}
.hero__ctas{display:flex;flex-wrap:wrap;gap:16px;margin-top:34px}
.hero__ctas .btn--gold{box-shadow:0 8px 20px rgba(169,131,47,.25)}
.hero__usps{margin:40px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:20px 36px;font-size:14px;font-weight:600;line-height:1.35}
.hero__usps li{display:flex;align-items:center;gap:12px}
/* Foto im Querformat: Mitte scharf, zum Rand hin unscharf und transparent */
.hero__visual{position:absolute;top:0;right:0;bottom:0;width:60%}
.hero__blur,.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:32% 22%;display:block}
.hero__blur{filter:blur(18px);transform:scale(1.06);opacity:.85;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 38%),linear-gradient(0deg,transparent 0%,#000 28%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0%,#000 38%),linear-gradient(0deg,transparent 0%,#000 28%);mask-composite:intersect}
.hero__img{-webkit-mask-image:radial-gradient(ellipse 46% 60% at 47% 40%,#000 52%,transparent 100%);mask-image:radial-gradient(ellipse 46% 60% at 47% 40%,#000 52%,transparent 100%)}
.hand{position:absolute;left:calc(max(0px,(100vw - var(--wrap)) / 2) + var(--gutter) + 640px + 28px - 40vw);top:41%;margin:0;font-family:var(--hand);color:#FAF9F6;text-shadow:0 1px 2px rgba(17,24,39,.55),0 2px 14px rgba(17,24,39,.45);transform:rotate(-9deg)}
.hand__name{display:block;font-size:31px;line-height:1.1}
.hand__role{display:block;font-size:23px;line-height:1.15;color:#F4F0E8;margin-top:6px}
.badge{position:absolute;left:41%;bottom:64px;z-index:2;width:300px;background:rgba(17,24,39,.92);border:1px solid rgba(225,188,97,.25);border-radius:12px;padding:20px 22px;color:var(--card);backdrop-filter:blur(6px)}
.badge ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px;font-size:13.5px;line-height:1.4}
.badge li{display:flex;gap:10px;align-items:flex-start}
.badge svg{flex:none;margin-top:2px}
@media (max-width:1240px){.hand{display:none}}
@media (max-width:980px){
  .hero__inner{min-height:0;padding-bottom:24px}
  .hero__text{flex-basis:100%}
  .hero__visual{position:relative;width:auto;height:460px}
  .hero__blur{-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 82%,transparent 100%)}
  .hero__blur,.hero__img{object-position:38% 15%}
  .hero__img{-webkit-mask-image:radial-gradient(ellipse 62% 50% at 50% 38%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 62% 50% at 50% 38%,#000 55%,transparent 100%)}
  .badge{left:16px;right:16px;bottom:16px;width:auto}
}

/* Digitaler Empfang */
.empfang{position:relative;overflow:hidden;background:var(--navy);color:var(--card)}
.empfang__bg{position:absolute;inset:0 0 0 auto;width:72%;background:url(/assets/img/neu/hotel-nacht.jpg) 75% center/cover;background-image:image-set(url(/assets/img/neu/hotel-nacht.webp) type("image/webp"),url(/assets/img/neu/hotel-nacht.jpg) type("image/jpeg"))}
.empfang__fade{position:absolute;inset:0 0 0 auto;width:72%;background:linear-gradient(90deg,#111827 0%,rgba(17,24,39,.7) 20%,rgba(17,24,39,0) 45%)}
.empfang__inner{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:48px;padding-block:96px}
.empfang__text{flex:0 1 660px;min-width:0}
.empfang h2{font-size:clamp(50px,6vw,88px);line-height:.98}
.empfang h2 em{color:var(--gold)}
.empfang__lead{margin:26px 0 0;font-size:18px;line-height:1.65;color:#E3E6EC;max-width:29em}
.empfang__quote{margin:18px 0 0;font-family:var(--serif);font-style:italic;font-size:23px;line-height:1.35;color:var(--ivory)}
.empfang .btn{margin-top:32px}
.feed{flex:0 1 340px;display:flex;flex-direction:column;gap:12px}
.msg{display:flex;align-items:center;gap:14px;background:rgba(17,24,39,.84);border:1px solid rgba(250,249,246,.18);border-radius:12px;padding:14px 16px}
.msg__icon{flex:none;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.msg__body{flex:1;min-width:0}
.msg__top{margin:0;display:flex;justify-content:space-between;gap:12px;font-size:14px;font-weight:700}
.msg__top span:last-child{font-weight:500;font-size:12px;color:#A9B0BD}
.msg__text{margin:3px 0 0;font-size:13px;color:#D5D9E0}
@media (max-width:900px){
  .empfang__bg,.empfang__fade{width:100%}
  .empfang__bg{background-size:cover;background-position:center}
  .empfang__fade{background:rgba(17,24,39,.78)}
  .feed{flex:1 1 100%}
}

/* Leistungen */
.leistungen{padding-block:96px 104px}
.leistungen__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:32px}
.leistungen h2{font-size:clamp(42px,4.8vw,68px);color:var(--navy)}
.leistungen h2 em{color:var(--gold-em)}
.cards{margin-top:52px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:22px}
.card{background:var(--card);border-radius:10px;padding:30px 26px;display:flex;flex-direction:column;gap:14px;box-shadow:0 10px 30px rgba(17,24,39,.06);transition:transform .25s ease, box-shadow .25s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 22px 46px rgba(17,24,39,.12)}
.card h3{margin:4px 0 0;font-size:19px;font-weight:700;line-height:1.25;color:var(--navy)}
.card p{margin:0;font-size:14.5px;line-height:1.6;color:var(--text-2);flex:1}
.card a{font-weight:700;font-size:14.5px;color:var(--gold-text);text-decoration:none}

/* Live-Demo + Beweis */
.beweis{background:var(--navy);color:var(--card);display:flex;flex-wrap:wrap}
.live{flex:1 1 520px;min-height:480px;position:relative;background:url(/assets/img/neu/stube.jpg) center/cover;background-image:image-set(url(/assets/img/neu/stube.webp) type("image/webp"),url(/assets/img/neu/stube.jpg) type("image/jpeg"));display:flex;align-items:flex-end;padding:64px 56px 64px max(56px,calc((100vw - var(--wrap))/2 + var(--gutter)))}
.live::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(17,24,39,.92) 0%,rgba(17,24,39,.45) 60%,rgba(17,24,39,.3) 100%)}
.live__box{position:relative;max-width:420px}
.live__box h3{margin:0;font-family:var(--serif);font-weight:600;font-size:38px;line-height:1.05}
.live__box p{margin:14px 0 24px;font-size:16px;line-height:1.6;color:#E3E6EC}
.proof{flex:1.3 1 560px;min-width:0;position:relative;overflow:hidden;padding:64px max(56px,calc((100vw - var(--wrap))/2 + var(--gutter))) 64px 64px;display:flex;flex-wrap:wrap;align-items:center;gap:48px}
.proof figure{flex:1 1 300px;margin:0}
.proof blockquote{margin:0;font-family:var(--serif);font-size:38px;line-height:1.15;color:var(--ivory)}
.proof figcaption{margin-top:14px;font-size:14.5px;color:var(--gold);font-weight:600}
.proof__text{margin:18px 0 0;font-size:16px;line-height:1.65;color:#C9CED8;max-width:30em}
.facts{flex:0 1 230px;margin:0;padding-left:40px;border-left:1px solid #2E3850;display:flex;flex-direction:column;gap:26px}
.facts dt{font-family:var(--serif);font-weight:600;font-size:40px;line-height:1;color:var(--gold)}
.facts dd{margin:6px 0 0;font-size:14.5px;color:#E3E6EC}
@media (max-width:640px){.proof{padding:48px 16px}.facts{padding-left:20px}.live{padding:48px 16px}}

/* Preise */
.preise{padding-block:96px}
.preise__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px}
.preise h2{font-size:clamp(42px,4.8vw,68px);color:var(--navy)}
.preise h2 em{color:var(--gold-em)}
.preise__note{margin:0;font-size:15px;line-height:1.6;color:var(--text-2);max-width:26em}
.plans{margin-top:48px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:22px;align-items:stretch}
.plan{background:var(--card);border-radius:12px;padding:32px 28px;display:flex;flex-direction:column;box-shadow:0 10px 30px rgba(17,24,39,.06)}
.plan__no{margin:0;font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--gold-text)}
.plan--featured .plan__no{color:var(--gold)}
.plan__claim{margin:14px 0 0;font-size:14.5px;line-height:1.55;color:var(--text-2)}
.plan__price{margin:18px 0 0;font-family:var(--serif);font-weight:600;font-size:54px;line-height:1;color:var(--navy)}
.plan__price span{font-family:var(--sans);font-weight:500;font-size:15px;color:var(--text-2)}
.plan ul{margin:22px 0 28px;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;font-size:14.5px;line-height:1.45;flex:1}
.plan li{display:flex;gap:10px}
.plan li svg{flex:none;margin-top:3px}
.plan .btn{justify-content:center}
.plan--featured{background:var(--navy);color:var(--card);box-shadow:0 24px 60px rgba(17,24,39,.22)}
.plan--featured .plan__price{color:var(--card)}
.plan--featured .plan__claim,.plan--featured .plan__price span{color:#C9CED8}
.plan__top{display:flex;justify-content:space-between;align-items:center;gap:12px}

/* Über mich */
.ueber{position:relative;overflow:hidden;min-height:520px}
.ueber__bg{position:absolute;right:-1px;bottom:0;width:74%;aspect-ratio:2400/443;background:url(/assets/img/neu/berge-sw.jpg) center/cover;background-image:image-set(url(/assets/img/neu/berge-sw.webp) type("image/webp"),url(/assets/img/neu/berge-sw.jpg) type("image/jpeg"))}
.ueber__fade{position:absolute;right:-1px;bottom:0;width:calc(74% + 2px);margin-bottom:-1px;padding-top:2px;box-sizing:content-box;aspect-ratio:2400/443;background:linear-gradient(90deg,#F4F0E8 0%,#F4F0E8 1.5%,rgba(244,240,232,0) 32%),linear-gradient(180deg,#F4F0E8 0%,#F4F0E8 3%,rgba(244,240,232,0) 32%)}
.ueber__inner{position:relative;display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:48px;padding-block:88px 96px}
.ueber h2{font-size:clamp(28px,3.7vw,54px);color:var(--navy);white-space:nowrap}
.ueber__text{margin:24px 0 0;font-size:16.5px;line-height:1.7;color:var(--text-2);max-width:32em}
.ueber__list{flex:0 1 580px;margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:20px;font-size:13.5px;font-weight:600;line-height:1.35}
.ueber__list li{display:flex;align-items:center;gap:10px}
@media (max-width:900px){.ueber__bg,.ueber__fade{width:100%;aspect-ratio:auto;height:140px}.ueber__bg{background-position:58% center}.ueber__inner{padding-bottom:160px}}

@media (max-width:640px){
  .hero__inner{padding-block:32px 48px}
  .empfang__inner,.leistungen,.preise{padding-block:64px}
  .hero__ctas .btn{width:100%;justify-content:center}
}