/* Winter im Ostallgäu – Frost & Alpenglühen */
@font-face{font-family:"Epilogue";src:url(/assets/fonts/epilogue-latin-wght-normal.woff2) format("woff2");font-weight:300 900;font-display:swap}
@font-face{font-family:"Merriweather";src:url(/assets/fonts/merriweather-latin-wght-normal.woff2) format("woff2");font-weight:300 900;font-display:swap}
@font-face{font-family:"Merriweather";src:url(/assets/fonts/merriweather-latin-wght-italic.woff2) format("woff2");font-weight:300 900;font-style:italic;font-display:swap}

:root{
  --hanki:#f3f6f8;--lumi:#fff;--yo:#13222c;--harmaa:#4a5a66;
  --jaa:#1f5f82;--jaa-syva:#133f58;--hehku:#b8345a;--hehku-vaalea:#f6dde5;
  --kuura:#d7e6ee;--havu:#2f5a4a;--viiva:#c9d6de;
  --otsikko:"Epilogue",system-ui,sans-serif;--teksti:"Merriweather",Georgia,serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--hanki);color:var(--yo);font:300 1.02rem/1.78 var(--teksti)}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--jaa);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--hehku)}
h1,h2,h3{font-family:var(--otsikko);line-height:1.15;letter-spacing:-.01em;color:var(--yo)}
h1{font-size:clamp(2rem,5vw,3.2rem);font-weight:800;margin:.2em 0 .35em}
h2{font-size:clamp(1.35rem,3vw,1.75rem);font-weight:700;margin:2.1em 0 .6em}
h3{font-size:1.12rem;font-weight:700;margin:1.5em 0 .4em}
strong{font-weight:700}
.leveys{max-width:1140px;margin:0 auto;padding:0 16px}
.ohita{position:absolute;left:-999px}
.ohita:focus{left:16px;top:8px;background:var(--lumi);padding:.4em .8em;z-index:9}

/* Kopf */
.ylapalkki{background:var(--lumi);border-bottom:1px solid var(--viiva)}
.ylapalkki .leveys{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-top:.8rem;padding-bottom:.8rem}
.merkki{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:var(--yo)}
.merkki svg{width:40px;height:40px;flex:none}
.merkki b{font:800 1.12rem/1 var(--otsikko);display:block}
.merkki small{font:500 .74rem/1.2 var(--otsikko);color:var(--harmaa);letter-spacing:.06em;text-transform:uppercase}
.valikko ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.2rem 1.3rem}
.valikko a{font:600 .92rem var(--otsikko);color:var(--yo);text-decoration:none;padding:.3em 0;border-bottom:2px solid transparent}
.valikko a:hover,.valikko a[aria-current]{border-color:var(--hehku);color:var(--yo)}

/* Startseite */
.sankari{background:linear-gradient(180deg,#e4eef4 0%,var(--hanki) 100%);padding:2.6rem 0 0}
.sankari .leveys.jako{display:grid;grid-template-columns:1.05fr 1fr;gap:2.4rem;align-items:center}
.sankari p.esi{font:600 .8rem var(--otsikko);letter-spacing:.14em;text-transform:uppercase;color:var(--hehku);margin:0}
.sankari .johdanto{font-size:1.1rem}
.sankari figure{margin:0}
.panoraama{width:100%;margin-top:2rem}
.kuukaudet{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin:1.4rem 0 0;padding:0;list-style:none}
.kuukaudet li{background:var(--lumi);border-top:4px solid var(--kuura);padding:.45rem .5rem;font:500 .78rem/1.3 var(--otsikko)}
.kuukaudet li b{display:block;font-size:.95rem}
.kuukaudet li.huippu{border-color:var(--jaa)}
.nappi{display:inline-block;font:700 .95rem var(--otsikko);background:var(--jaa-syva);color:var(--lumi);text-decoration:none;padding:.75em 1.3em;border-radius:3px}
.nappi:hover{background:var(--hehku);color:var(--lumi)}
.nappi.toinen{background:transparent;color:var(--jaa-syva);box-shadow:inset 0 0 0 2px var(--jaa-syva);margin-left:.5rem}

.osio{padding:3.4rem 0}
.osio>.leveys>h2:first-child{margin-top:0}
.osio.valkoinen{background:var(--lumi)}
.osio .ingressi{max-width:44rem;color:var(--harmaa)}
.kuvakkeet{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.7rem;margin-top:1.6rem}
.laatta{background:var(--lumi);border:1px solid var(--viiva);padding:1.2rem 1.1rem 1.3rem;text-decoration:none;color:var(--yo);display:flex;flex-direction:column;gap:.35rem}
.laatta svg{width:46px;height:46px;color:var(--jaa)}
.laatta b{font:700 1.05rem var(--otsikko)}
.laatta span{font-size:.86rem;line-height:1.55;color:var(--harmaa)}
.laatta:hover{background:#f8fbfc}
.laatta:hover svg{color:var(--hehku)}

.kartta-alue{display:grid;grid-template-columns:1fr 1fr;gap:2.4rem;align-items:start}
.vyohykkeet{list-style:none;margin:0;padding:0;counter-reset:v}
.vyohykkeet li{counter-increment:v;padding:1rem 0 1rem 3rem;border-bottom:1px solid var(--viiva);position:relative}
.vyohykkeet li::before{content:counter(v);position:absolute;left:0;top:1rem;width:2rem;height:2rem;border-radius:50%;background:var(--kuura);color:var(--jaa-syva);font:800 .95rem/2rem var(--otsikko);text-align:center}
.vyohykkeet b{font-family:var(--otsikko)}

.jarvet{background:var(--jaa-syva);color:#e8f1f6}
.jarvet .leveys{display:grid;grid-template-columns:1fr 1fr;gap:2.4rem;align-items:center}
.jarvet h2{color:var(--lumi)}
.jarvet a{color:#fff}
.jarvet figure{margin:0}
.jarvet figcaption{color:#b9cfdb}

.retket{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:1.4rem}
.retki{background:var(--lumi);text-decoration:none;color:var(--yo);border-bottom:3px solid var(--kuura)}
.retki img{aspect-ratio:3/2;object-fit:cover;width:100%}
.retki div{padding:1rem 1.1rem 1.2rem}
.retki b{font:700 1.08rem var(--otsikko);display:block;margin-bottom:.3rem}
.retki span{font-size:.88rem;color:var(--harmaa);line-height:1.6}
.retki:hover{border-color:var(--hehku)}

.kysymykset details{border-top:1px solid var(--viiva);padding:.9rem 0}
.kysymykset details:last-child{border-bottom:1px solid var(--viiva)}
.kysymykset summary{font:700 1.02rem var(--otsikko);cursor:pointer}
.kysymykset details p{margin:.6rem 0 0}

/* Artikel */
.polku{font:500 .82rem var(--otsikko);color:var(--harmaa);padding:1.3rem 0 0}
.polku ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
.polku li+li::before{content:"›";margin:0 .5em;color:var(--viiva)}
.polku a{color:var(--harmaa)}
.artikkeli-paa{padding-bottom:1.4rem;border-bottom:1px solid var(--viiva)}
.artikkeli-paa .tiedot{font:500 .84rem var(--otsikko);color:var(--harmaa);margin:0}
.johdanto{font-size:1.14rem;line-height:1.7;font-weight:400;max-width:46rem}
.runko{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:3rem;padding:2rem 0 1rem}
.teksti{max-width:44rem}
.teksti>figure,.teksti>.kuvitus{margin:1.8rem 0}
figure{margin:0}
figcaption{font:400 .78rem/1.5 var(--otsikko);color:var(--harmaa);margin-top:.5rem}
figcaption a{color:inherit}
.kuvitus{background:var(--lumi);border:1px solid var(--viiva);padding:1rem}
.kuvitus.vinjetti{padding:0;border:0}
.teksti ul,.teksti ol{padding-left:1.2rem}
.teksti li{margin:.3rem 0}
.huomio{background:var(--lumi);border-left:4px solid var(--hehku);padding:1rem 1.2rem;margin:1.8rem 0}
.huomio b.otsake{font:700 .8rem var(--otsikko);letter-spacing:.1em;text-transform:uppercase;color:var(--hehku);display:block;margin-bottom:.3rem}
.huomio p{margin:.3rem 0}
.tietokortti{align-self:start;position:sticky;top:1.2rem;background:var(--lumi);border-top:4px solid var(--jaa)}
.tietokortti h2{font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;margin:0;padding:1rem 1.1rem .4rem;color:var(--jaa-syva)}
.tietokortti dl{margin:0;padding:0 1.1rem 1rem}
.tietokortti dt{font:700 .78rem var(--otsikko);color:var(--harmaa);margin-top:.7rem}
.tietokortti dd{margin:.1rem 0 0;font-size:.9rem;line-height:1.55}
.tietokortti .ikoni{padding:1rem 1.1rem 0;color:var(--jaa)}
.tietokortti .ikoni svg{width:54px;height:54px}
.selaus{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:2.4rem 0 0;padding:1.4rem 0;border-top:1px solid var(--viiva)}
.selaus a{text-decoration:none;font:700 1rem var(--otsikko);color:var(--yo)}
.selaus small{display:block;font:500 .75rem var(--otsikko);color:var(--harmaa);text-transform:uppercase;letter-spacing:.08em}
.selaus .seur{text-align:right}
.muut{padding:2rem 0 3rem}
.muut h2{margin-top:0}
.muut .kuvakkeet{margin-top:1rem}
.lahteet{font-size:.88rem;color:var(--harmaa)}

/* Hub und Listen */
.lista{list-style:none;padding:0;margin:1.5rem 0}
.lista li{display:grid;grid-template-columns:56px 1fr;gap:1rem;padding:1.1rem 0;border-bottom:1px solid var(--viiva)}
.lista svg{width:46px;height:46px;color:var(--jaa)}
.lista b{font:700 1.1rem var(--otsikko)}
.lista p{margin:.2rem 0 0;font-size:.93rem}
.yksinkertainen{max-width:46rem;padding-bottom:3rem}

/* Fuß */
.alatunniste{background:var(--yo);color:#c6d3db;margin-top:0;font:400 .9rem/1.7 var(--otsikko)}
.alatunniste .reuna{display:block;width:100%;height:28px;color:var(--yo);background:var(--hanki)}
.alatunniste .sarakkeet{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem;padding:2.4rem 0 1.6rem}
.alatunniste h2{color:#fff;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;margin:0 0 .7rem}
.alatunniste ul{list-style:none;margin:0;padding:0}
.alatunniste a{color:#e4edf2;text-decoration:none}
.alatunniste a:hover{color:#fff;text-decoration:underline}
.alatunniste .pohja{border-top:1px solid #2b3c47;padding:1rem 0 1.6rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 1.4rem;font-size:.82rem}
.alatunniste .suositus{color:#e4edf2}

@media (max-width:880px){
  .sankari .leveys.jako,.kartta-alue,.jarvet .leveys,.runko{grid-template-columns:1fr}
  .tietokortti{position:static}
  .retket{grid-template-columns:1fr}
  .alatunniste .sarakkeet{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  body{font-size:.98rem}
  .kuukaudet{grid-template-columns:repeat(5,1fr);gap:2px}
  .kuukaudet li{padding:.35rem .25rem;font-size:.68rem}
  .alatunniste .sarakkeet{grid-template-columns:1fr}
  .selaus{grid-template-columns:1fr}
  .selaus .seur{text-align:left}
  .nappi.toinen{margin:.6rem 0 0}
  .valikko ul{gap:.1rem 1rem}
}