:root{
  --bg:#eef2f3;
  --paper:#f5f1e8;
  --paper2:#f8f5ee;
  --card:#fffdf8;
  --ink:#173f31;
  --muted:#64736d;
  --line:#ddd8cd;
  --shadow:0 18px 48px rgba(17,46,37,.10);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

a{color:inherit}

.site{
  width:min(1780px,calc(100vw - 24px));
  margin:12px auto;
  background:var(--paper);
  border-radius:26px;
  overflow:hidden;
  box-shadow:var(--shadow);
  border:1px solid rgba(255,255,255,.75);
}

/* HEADER */
.topbar{
  height:68px;
  padding:0 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  background:#f8f5ee;
  border-bottom:1px solid rgba(23,63,49,.08);
  position:sticky;
  top:0;
  z-index:40;
}

.brand{
  display:flex;
  align-items:center;
  gap:11px;
  text-decoration:none;
  min-width:0;
}

.mark{
  width:34px;
  height:34px;
  border:1px solid rgba(23,63,49,.18);
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:11px;
  font-weight:800;
}

.brand strong{
  display:block;
  font-size:13px;
  letter-spacing:.17em;
}

.brand small{
  display:block;
  margin-top:3px;
  color:#87918d;
  font-size:9px;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.tools{
  display:flex;
  align-items:center;
  gap:5px;
}

.company{
  margin-right:6px;
  padding:8px 11px;
  border:1px solid rgba(23,63,49,.14);
  border-radius:999px;
  background:rgba(255,255,255,.6);
  text-decoration:none;
  font-size:10px;
  font-weight:800;
}

.lang{
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  border-radius:50%;
  text-decoration:none;
  font-size:10px;
  font-weight:800;
  color:#87918d;
}

.lang.active{
  background:var(--ink);
  color:#fff;
}

.audio-toggle{
  display:none;
  height:31px;
  border:1px solid rgba(23,63,49,.12);
  border-radius:999px;
  background:#fffaf0;
  color:var(--ink);
  padding:0 11px;
  font:inherit;
  font-size:10px;
  font-weight:800;
  cursor:pointer;
}

main{
  padding:16px 18px 24px;
}

/* =========================================================
   HERO – V8.10 CLEAN PANEL
   Full-width mountain image + left text panel.
   No pseudo-element fade layers = no white stripe.
   ========================================================= */
.hero-split{
  position:relative;
  display:block;
  height:350px;
  min-height:350px;
  overflow:hidden;
  isolation:isolate;
  border-radius:22px;
  border:1px solid rgba(23,63,49,.08);
  background:var(--paper2);
}

/* explicitly kill any inherited/generated overlay */
.hero-split::before,
.hero-split::after{
  content:none !important;
  display:none !important;
}

.hero-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  overflow:hidden;
}

.hero-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 54%;
  display:block;
  transform:scale(1.01);
  background:#dfe5e2;
}

.hero-copy{
  position:relative;
  z-index:2;
  width:min(40%,650px);
  height:calc(100% - 44px);
  margin:22px 0 22px 22px;
  padding:24px 28px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:rgba(248,245,238,.94);
  border:1px solid rgba(23,63,49,.08);
  border-radius:24px;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  box-shadow:0 10px 28px rgba(17,46,37,.08);
}

.eyebrow{
  font-size:10px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#63736d;
}

.hero-copy .eyebrow{
  font-size:9px;
  line-height:1.1;
}

h1{
  margin:8px 0 10px;
  font-size:clamp(40px,3.45vw,52px);
  line-height:.95;
  letter-spacing:-.045em;
}

.hero-copy p{
  margin:0;
  max-width:560px;
  color:#586a63;
  font-size:15px;
  line-height:1.42;
}

.hero-actions{
  display:flex;
  gap:8px;
  margin-top:14px;
  flex-wrap:wrap;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:0 16px;
  border-radius:999px;
  border:1px solid var(--ink);
  text-decoration:none;
  font-size:11px;
  font-weight:800;
}

.btn.primary{
  background:var(--ink);
  color:#fff;
}

/* SECTIONS */
.section-block{
  padding:52px 0 0;
}

.section-heading{
  max-width:920px;
  margin-bottom:22px;
}

.section-heading h2{
  margin:9px 0 12px;
  font-size:clamp(34px,3.4vw,50px);
  line-height:1.03;
  letter-spacing:-.035em;
}

.section-heading p{
  margin:0;
  color:var(--muted);
  font-size:17px;
  line-height:1.62;
}

.compact-heading{
  max-width:760px;
}

/* REGION */
.regional-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

.story-card,
.story-card.story-large{
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:175px auto;
  min-height:0;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:20px;
  overflow:hidden;
}

.story-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  background:#dfe5e2;
}

.story-copy{
  padding:22px 24px 24px;
  display:flex;
  flex-direction:column;
}

.tag{
  display:inline-flex;
  align-self:flex-start;
  padding:6px 10px;
  border-radius:999px;
  background:#edf1ea;
  color:var(--ink);
  font-size:11px;
  font-weight:800;
  letter-spacing:.03em;
}

.story-copy h3,
.feature-wide-copy h3,
.winter-card h3,
.stay-card h3{
  margin:12px 0 10px;
  font-size:25px;
  line-height:1.08;
}

.story-copy p,
.feature-wide-copy p,
.winter-card p,
.stay-card p{
  margin:0;
  color:var(--muted);
  font-size:15px;
  line-height:1.5;
}

.story-copy a,
.feature-wide-copy a{
  display:inline-block;
  margin-top:16px;
  text-decoration:none;
  font-size:13px;
  font-weight:800;
}

.story-copy a+a,
.feature-wide-copy a+a{
  margin-left:12px;
}

/* FISKE / SAREK */
.two-up-section{
  padding-top:58px;
}

.two-up{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.feature-wide{
  display:grid;
  grid-template-rows:225px auto;
  border-radius:20px;
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--card);
}

.feature-wide img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  background:#dfe5e2;
}

.feature-wide-copy{
  padding:23px 25px 25px;
}

/* WINTER */
.winter-section{
  margin-top:58px;
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  gap:18px;
  align-items:stretch;
}

.aurora-panel{
  position:relative;
  min-height:420px;
  border-radius:22px;
  overflow:hidden;
}

.aurora-panel img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  background:#dfe5e2;
}

.aurora-panel::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(8,26,20,.02),rgba(8,26,20,.46));
}

.aurora-copy{
  position:absolute;
  z-index:2;
  left:25px;
  right:25px;
  bottom:23px;
  color:white;
}

.aurora-copy h2{
  margin:10px 0;
  font-size:42px;
  line-height:1;
}

.aurora-copy p{
  margin:0;
  max-width:620px;
  font-size:16px;
  line-height:1.55;
  color:rgba(255,255,255,.9);
}

.light-tag{
  background:rgba(255,255,255,.88);
  color:var(--ink);
}

.winter-content{
  padding:30px 30px 28px;
  background:var(--paper2);
  border:1px solid var(--line);
  border-radius:22px;
}

.winter-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:22px;
}

.winter-card{
  min-height:150px;
  padding:20px;
  border:1px solid var(--line);
  border-radius:18px;
  background:white;
}

.winter-symbol{
  font-size:26px;
}

/* BOENDE */
.stay-section{
  margin-top:58px;
  display:grid;
  grid-template-columns:.78fr 1.22fr;
  gap:18px;
  align-items:stretch;
}

.stay-image{
  min-height:350px;
  border-radius:22px;
  overflow:hidden;
}

.stay-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  background:#dfe5e2;
}

.stay-content{
  padding:30px 32px;
  background:var(--paper2);
  border:1px solid var(--line);
  border-radius:22px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.stay-cards{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin-top:18px;
}

.stay-card{
  padding:17px 20px;
  border:1px solid var(--line);
  border-radius:17px;
  background:white;
}

.stay-card h3{
  font-size:23px;
  margin-top:0;
}

.stay-cta{
  margin-top:15px;
  padding-top:15px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.stay-cta strong{
  display:block;
  font-size:22px;
  margin-bottom:5px;
}

.stay-cta p{
  margin:0;
  color:var(--muted);
  font-size:15px;
  line-height:1.45;
}

/* FOOTER */
.footer{
  margin:14px 18px 22px;
  padding:14px 4px 4px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  color:#74817d;
  font-size:11px;
  border-top:1px solid rgba(23,63,49,.08);
}

.footer strong{
  color:var(--ink);
  letter-spacing:.16em;
  font-size:13px;
}

.footer-links{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.footer-links a{
  text-decoration:none;
  font-weight:800;
}

a:focus-visible,
button:focus-visible{
  outline:3px solid rgba(23,63,49,.28);
  outline-offset:3px;
}

/* TABLET */
@media (max-width:1180px){
  .site{
    width:100%;
    margin:0;
    border-radius:0;
  }

  .hero-split{
    height:340px;
    min-height:340px;
  }

  .hero-image img{
    object-position:center 52%;
  }

  .hero-copy{
    width:58%;
    height:auto;
    min-height:304px;
    margin:18px 0 18px 18px;
    padding:22px 24px;
    border-radius:22px;
  }

  h1{
    font-size:clamp(36px,5vw,50px);
  }

  .regional-grid{
    grid-template-columns:1fr;
  }

  .story-card,
  .story-card.story-large{
    grid-template-columns:42% 58%;
    grid-template-rows:auto;
    min-height:230px;
  }

  .two-up{
    grid-template-columns:1fr;
  }

  .winter-section,
  .stay-section{
    grid-template-columns:1fr;
  }

  .aurora-panel,
  .stay-image{
    min-height:400px;
  }
}

/* MOBILE */
@media (max-width:760px){
  .topbar{
    height:62px;
    padding:0 9px;
    gap:7px;
  }

  .brand small{
    display:none;
  }

  .company{
    width:33px;
    padding:0;
    font-size:0;
  }

  .company::before{
    content:"EHF";
    font-size:8px;
  }

  .tools{gap:1px}

  .lang{
    width:27px;
    height:27px;
    font-size:9px;
  }

  .audio-toggle{
    height:29px;
    padding:0 8px;
    font-size:9px;
  }

  main{
    padding:10px;
  }

  .hero-split{
    height:430px;
    min-height:430px;
  }

  .hero-image img{
    object-position:65% center;
  }

  .hero-copy{
    width:calc(100% - 28px);
    min-height:0;
    height:auto;
    margin:14px;
    padding:20px 18px;
    border-radius:20px;
  }

  h1{
    font-size:36px;
    line-height:.96;
  }

  .hero-copy p{
    font-size:14px;
    line-height:1.42;
  }

  .regional-grid{
    grid-template-columns:1fr;
  }

  .story-card,
  .story-card.story-large{
    grid-template-columns:1fr;
    grid-template-rows:220px auto;
    min-height:0;
  }

  .feature-wide{
    grid-template-rows:240px auto;
  }

  .winter-grid{
    grid-template-columns:1fr;
  }

  .winter-content,
  .stay-content{
    padding:26px 22px;
  }

  .aurora-panel,
  .stay-image{
    min-height:340px;
  }

  .stay-cta{
    align-items:flex-start;
    flex-direction:column;
  }

  .footer{
    flex-direction:column;
    align-items:flex-start;
  }
}


/* =========================================================
   V8.11 – WhatsApp Share
   Reiner externer Share-Link. Kein eingebettetes Meta-/WhatsApp-Skript.
   ========================================================= */

.whatsapp-share{
  height:31px;
  padding:0 10px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid rgba(23,63,49,.14);
  border-radius:999px;
  background:rgba(255,255,255,.66);
  color:var(--ink);
  text-decoration:none;
  font-size:10px;
  font-weight:800;
  white-space:nowrap;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}

.whatsapp-share:hover{
  background:#fff;
  border-color:rgba(23,63,49,.28);
  transform:translateY(-1px);
}

.whatsapp-share svg{
  width:15px;
  height:15px;
  display:block;
  fill:currentColor;
}

@media(max-width:900px){
  .whatsapp-share{
    width:31px;
    padding:0;
    justify-content:center;
  }

  .whatsapp-share span{
    display:none;
  }
}

@media(max-width:760px){
  .whatsapp-share{
    width:29px;
    height:29px;
  }

  .whatsapp-share svg{
    width:14px;
    height:14px;
  }
}
