/* ERNE Immobilien – Stylesheet */
@font-face{font-family:"Manrope";src:url("../fonts/manrope-latin-wght-normal.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}

:root{
  --navy:#0D2A4D; --blue:#10559A; --yellow:#FBB800; --ink:#14233A; --bg:#F3F5F8;
  --pad:clamp(20px,6.7vw,96px); --gap:clamp(12px,1.7vw,24px);
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Manrope",system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.5;overflow-x:hidden}
h1,h2,h3,p{margin:0}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
a:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.max{max-width:1440px;margin-inline:auto}

/* Buttons */
.btn{display:inline-block;padding:17px 30px;border-radius:14px;font-weight:600;font-size:18px;transition:transform .3s,box-shadow .3s}
.btn:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(13,42,77,.25)}
.btn-blue{background:var(--blue);color:#fff}
.btn-yellow{background:var(--yellow);color:var(--ink)}
.btn-dark{background:var(--ink);color:#fff}
.btn-ghost{border:2px solid rgba(255,255,255,.7);color:#fff;padding:15px 28px}
.btn-line{border:2px solid var(--ink);padding:15px 28px}

/* Navigation */
.nav{position:absolute;z-index:5;left:clamp(12px,2.8vw,40px);right:clamp(12px,2.8vw,40px);top:clamp(12px,2vw,28px);display:flex;align-items:center;justify-content:space-between;background:#fff;border-radius:18px;padding:0 10px 0 22px;height:76px;box-shadow:0 12px 36px rgba(9,30,58,.35)}
.nav-static{position:relative;left:auto;right:auto;top:auto;margin:clamp(12px,2vw,28px) clamp(12px,2.8vw,40px) 0;box-shadow:0 6px 24px rgba(9,30,58,.1)}
.logo{display:block;height:60px;overflow:hidden;flex-shrink:0}
.logo img{height:84px;width:auto;margin:-10px 0 0 -16px;max-width:none}
.nav ul{display:flex;align-items:center;gap:44px;list-style:none;margin:0;padding:0;font-size:18px;font-weight:600;color:var(--ink)}
.nav ul li:last-child{margin-left:12px}
.nav a.lnk{position:relative}
.nav a.lnk::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--yellow);transition:width .4s}
.nav a.lnk:hover::after{width:100%}
.nav ul li .btn{display:inline-flex;align-items:center;height:56px;padding:0 28px;border-radius:12px;font-size:17px;line-height:1}

/* Hero */
.hero{position:relative;height:clamp(640px,100svh,900px);background:var(--navy);overflow:hidden;color:#fff;display:flex;flex-direction:column;justify-content:flex-end}
.hero video,.hero .shade{position:absolute;inset:0;width:100%;height:100%}
.hero video{object-fit:cover;object-position:40% 60%}
.hero .shade{background:linear-gradient(180deg,rgba(9,30,58,.55) 0,rgba(9,30,58,0) 220px),linear-gradient(100deg,rgba(9,30,58,.9) 0%,rgba(9,30,58,.55) 45%,rgba(9,30,58,.05) 100%)}
.hero-copy{position:relative;padding:0 var(--pad) clamp(56px,8vw,120px);display:flex;flex-direction:column;gap:clamp(20px,2.5vw,36px)}
.hero h1{font-weight:700;font-size:clamp(46px,7.5vw,108px);line-height:1.02;letter-spacing:-.035em}
.hero p{font-size:clamp(18px,1.7vw,24px);line-height:1.45;max-width:560px;color:#E6EDF6}
.hero .actions{display:flex;flex-wrap:wrap;gap:16px}
.hero .btn{padding:19px 34px;font-size:19px}
.hero .btn-ghost{padding:17px 32px}
.scroll{position:absolute;right:var(--pad);bottom:clamp(56px,8vw,120px);width:64px;height:64px;border:2px solid rgba(255,255,255,.7);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff}

/* Route Vorarlberg – Wien */
.route-band{background:var(--yellow);padding:clamp(36px,4.4vw,64px) var(--pad);display:flex;align-items:center;gap:clamp(16px,2.2vw,32px)}
.route-band .end{display:flex;align-items:center;gap:16px;flex-shrink:0;font-weight:700;font-size:clamp(22px,2.8vw,40px);letter-spacing:-.03em}
.route-band .dot{width:20px;height:20px;border-radius:50%;background:var(--ink)}
.route-track{flex:1;height:4px;background:rgba(20,35,58,.18);border-radius:2px}
.route{height:4px;background:var(--ink);border-radius:2px;transform-origin:left center}

/* Statement */
.statement{padding:clamp(72px,10.5vw,150px) var(--pad) clamp(64px,9vw,130px)}
.statement h2{font-weight:700;font-size:clamp(28px,4vw,58px);line-height:1.14;letter-spacing:-.03em;max-width:1200px}

/* Kennzahlen */
.facts{padding:0 clamp(12px,2.8vw,40px) clamp(72px,9.7vw,140px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.fact{border-radius:28px;padding:clamp(28px,3.9vw,56px);display:flex;flex-direction:column;gap:8px}
.fact.blue{background:var(--blue);color:#fff}
.fact.yellow{background:var(--yellow);color:var(--ink)}
.fact .pre{font-size:clamp(18px,1.7vw,24px);font-weight:500}
.fact .num{display:flex;align-items:baseline;gap:14px;font-weight:700;letter-spacing:-.04em;line-height:1}
.fact .big{font-size:clamp(88px,11.7vw,168px)}
.fact .unit{font-size:clamp(36px,4.4vw,64px)}
.fact .label{font-size:clamp(18px,1.7vw,24px);font-weight:600;margin-top:12px}

/* Angebot */
.bento{padding:0 clamp(12px,2.8vw,40px) clamp(72px,9.7vw,140px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.tile{position:relative;border-radius:28px;overflow:hidden;background:var(--navy);color:#fff;min-height:clamp(380px,44vw,640px);display:block}
.tile.s7{grid-column:span 7}.tile.s5{grid-column:span 5}
.tile.short{min-height:clamp(360px,39vw,560px)}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.tile:hover img{transform:scale(1.07)}
.tile .fade{position:absolute;left:0;bottom:0;width:100%;height:65%;background:linear-gradient(0deg,rgba(9,30,58,.88),rgba(9,30,58,0))}
.tile .txt{position:absolute;left:clamp(22px,3vw,44px);bottom:clamp(22px,3vw,44px);right:clamp(90px,8.3vw,120px);display:flex;flex-direction:column;gap:14px}
.tile h3{font-weight:700;font-size:clamp(28px,3.3vw,48px);letter-spacing:-.03em;line-height:1.05}
.tile p{font-size:clamp(16px,1.4vw,20px);line-height:1.5;max-width:520px}
.tile .arr{position:absolute;right:clamp(20px,2.5vw,36px);bottom:clamp(22px,3vw,44px);width:60px;height:60px;border-radius:50%;background:#fff;color:var(--ink);display:flex;align-items:center;justify-content:center;transition:transform .5s var(--ease),background .3s}
.tile:hover .arr{transform:rotate(45deg);background:var(--yellow)}

/* Haltung */
.values{margin:0 clamp(12px,2.8vw,40px) clamp(72px,9.7vw,140px);background:var(--navy);color:#fff;border-radius:36px;padding:clamp(56px,8.3vw,120px) clamp(24px,6.7vw,96px);display:flex;flex-direction:column;gap:clamp(48px,6.1vw,88px)}
.values h2{font-weight:700;font-size:clamp(40px,4.5vw,64px);line-height:1.05;letter-spacing:-.035em}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px}
.wert{display:flex;flex-direction:column;gap:22px}
.wert .rail{height:4px;background:rgba(255,255,255,.2)}
.wert .bar{height:4px;width:56px;background:var(--yellow);transition:width .7s var(--ease)}
.wert:hover .bar{width:100%}
.wert h3{font-weight:700;font-size:32px}
.wert p{font-size:18px;line-height:1.55;color:#D5E0EE}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.goal{background:var(--blue);border-radius:24px;padding:40px 40px 44px;display:flex;flex-direction:column;gap:14px}
.goal h3{font-weight:700;font-size:30px}
.goal p{font-size:18px;line-height:1.55}

/* Team */
.team{padding:0 var(--pad) clamp(72px,9.7vw,140px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:32px;align-items:start}
.team .photo{grid-column:1 / span 5}
.team .photo img{width:100%;height:clamp(420px,57vw,820px);object-fit:cover;object-position:50% 30%;border-radius:24px}
.team .right{grid-column:7 / span 6;display:flex;flex-direction:column;gap:28px}
.team h2{font-weight:700;font-size:clamp(34px,3.6vw,52px);line-height:1.08;letter-spacing:-.03em}
.team .intro{font-size:clamp(18px,1.5vw,21px);line-height:1.55;margin-bottom:12px}
.person{background:#fff;border-radius:24px;padding:28px;display:flex;align-items:center;gap:28px;transition:transform .5s var(--ease),box-shadow .5s}
.person:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(13,42,77,.14)}
.avatar{width:132px;height:132px;border-radius:50%;overflow:hidden;background:#E9EEF5;flex-shrink:0}
.avatar img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.person h3{font-weight:700;font-size:28px}
.person p{font-size:18px;line-height:1.45}
.person .contact{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:17px;font-weight:600;margin-top:6px}
.person .contact a{color:var(--blue);transition:opacity .3s}
.person .contact a:hover{opacity:.75;text-decoration:underline;text-underline-offset:4px}
.person .info{display:flex;flex-direction:column;gap:6px;min-width:0}

/* Kontakt */
.contact-block{margin:0 clamp(12px,2.8vw,40px) clamp(12px,2.8vw,40px);background:var(--yellow);color:var(--ink);border-radius:36px;padding:clamp(56px,8.3vw,120px) clamp(24px,6.7vw,96px) clamp(56px,7.6vw,110px);display:flex;flex-direction:column;gap:clamp(32px,3.9vw,56px)}
.contact-block h2{font-weight:700;font-size:clamp(40px,6.4vw,92px);line-height:1.02;letter-spacing:-.035em;max-width:1100px}
.contact-block .actions{display:flex;flex-wrap:wrap;gap:24px}
.contact-block .btn{padding:22px 38px;font-size:21px;border-radius:16px}
.contact-block .btn-line{padding:20px 36px}

/* Footer */
.foot{display:flex;flex-wrap:wrap;gap:12px 32px;align-items:center;justify-content:space-between;padding:24px var(--pad) 48px;font-size:16px}
.foot ul{display:flex;gap:32px;list-style:none;margin:0;padding:0}
.foot a:hover{text-decoration:underline;text-underline-offset:4px}

/* Impressum */
.legal{padding:clamp(56px,8vw,120px) var(--pad) clamp(72px,9.7vw,140px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:32px;row-gap:40px}
.legal h1{grid-column:1 / span 4;font-weight:700;font-size:clamp(44px,5.6vw,80px);line-height:1;letter-spacing:-.04em}
.legal .rows{grid-column:5 / span 8}
.legal .row{display:grid;grid-template-columns:260px minmax(0,1fr);column-gap:32px;padding:32px 0 40px;border-top:1px solid rgba(20,35,58,.2)}
.legal .row:first-child{border-top:4px solid var(--ink)}
.legal .row:last-child{padding-bottom:0}
.legal h2{font-weight:700;font-size:22px}
.legal .txt{font-size:19px;line-height:1.7;overflow-wrap:anywhere}
.legal .txt a{color:var(--blue);font-weight:600;text-decoration:underline;text-underline-offset:4px}
.open{background:rgba(251,184,0,.35);padding:1px 6px;border-radius:4px}

/* Animationen */
@keyframes lineUp{from{transform:translateY(110%)}to{transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes navIn{from{opacity:0;transform:translateY(-24px)}to{opacity:1;transform:none}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}}
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes imgIn{from{clip-path:inset(12% 8% 12% 8% round 28px);transform:scale(1.08)}to{clip-path:inset(0 0 0 0 round 24px);transform:none}}
@property --n{syntax:"<integer>";inherits:false;initial-value:0}
@keyframes countUp{from{--n:0}to{--n:var(--to)}}

.clip{display:block;overflow:hidden;padding-bottom:.08em}
.line{display:block;animation:lineUp 1.1s var(--ease) both}
.l1{animation-delay:.15s}.l2{animation-delay:.32s}
.fu{animation:fadeUp .9s var(--ease) both}
.d1{animation-delay:.7s}.d2{animation-delay:.85s}.d3{animation-delay:1s}
.nav{animation:navIn .9s var(--ease) .05s both}
.bob{animation:bob 2.2s ease-in-out infinite}
.count{--n:var(--to);counter-reset:num var(--n)}
.count::before{content:counter(num)}

@supports (animation-timeline:view()){
  .rv{animation:fadeUp linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
  .rvimg{animation:imgIn linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
  .route{animation:draw linear both;animation-timeline:view();animation-range:entry 20% cover 50%}
  .count{animation:countUp linear both;animation-timeline:view();animation-range:entry 10% cover 40%}
}

/* Tablet und Handy */
@media (max-width:1000px){
  .nav ul li:not(:last-child){display:none}
  .grid4{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:48px}
  .grid3{grid-template-columns:1fr}
  .tile.s7,.tile.s5{grid-column:1 / -1}
  .team .photo,.team .right{grid-column:1 / -1}
  .team .photo{margin-bottom:40px}
  .legal h1,.legal .rows{grid-column:1 / -1}
}
@media (max-width:700px){
  .facts{grid-template-columns:1fr}
  .grid4{grid-template-columns:1fr}
  .scroll{display:none}
  .person{flex-direction:column;align-items:flex-start;padding:24px}
  .route-band .end span:not(.dot){font-size:20px}
  .legal .row{grid-template-columns:1fr;row-gap:12px}
  .btn,.hero .btn,.contact-block .btn{width:100%;text-align:center}
  .hero .actions,.contact-block .actions{width:100%}
  .nav{height:64px;padding:0 9px 0 14px}
  .logo{height:48px}.logo img{height:68px;margin:-8px 0 0 -13px}
  .nav ul li .btn{width:auto;height:46px;padding:0 18px;font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
}