/* Gipfelbuch Alpin — öffentliche Website. Palette wie die App (Trail-Map: Terrakotta,
   Grün, warmes Beige). Fraunces selbst-gehostet (kein Google-Fonts-Request), System-
   Schrift für Fließtext. Ohne JavaScript vollständig lesbar; JS nur für sanftes Einblenden. */
:root{
  --bg:#F5F1E8; --bg2:#EFE7D7; --card:#FFFFFF; --card2:#FBF7EE;
  --text:#2D2A22; --text2:#5C5544; --label:#9C8F77;
  --accent:#C1542C; --accent-d:#A8461F; --accent2:#E27A4E;
  --green:#2E5D3F; --green-d:#1F3B2D; --green-l:#4E7C5E;
  --sep:rgba(139,115,85,.18); --shadow:0 3px 16px rgba(60,45,25,.07);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#121110; --bg2:#1A1815; --card:#22201A; --card2:#26231C;
    --text:#F3EEE4; --text2:#CBC2B4; --label:#9A9080;
    --accent:#E27A4E; --accent-d:#E27A4E; --accent2:#EE9068;
    --green:#3E6B50; --green-d:#16281E; --green-l:#6E9A7E;
    --sep:rgba(255,255,255,.10); --shadow:0 3px 16px rgba(0,0,0,.3);
  }
}
@font-face{
  font-family:"Fraunces"; src:url("/fonts/fraunces-var.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:17px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.serif{font-family:"Fraunces",Georgia,"Times New Roman",serif; font-weight:600; line-height:1.14; letter-spacing:-.015em; color:var(--text)}
h1{font-size:clamp(2.1rem,7vw,3.4rem); margin:0 0 .5em}
h2{font-size:clamp(1.5rem,4.5vw,2.15rem); margin:0 0 .6em}
h3{font-size:1.2rem; margin:0 0 .35em}
p{margin:0 0 1em}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
strong{font-weight:650}
.wrap{max-width:920px; margin:0 auto; padding:0 22px}
.narrow{max-width:680px}
section{padding:clamp(48px,8vw,88px) 0}
.eyebrow{font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin:0 0 .8em}
.lead{font-size:clamp(1.05rem,2.4vw,1.28rem); color:var(--text2); line-height:1.6}

/* ── Header ───────────────────────────────────────────────── */
.top{position:sticky; top:0; z-index:20; background:color-mix(in srgb,var(--bg) 86%,transparent); backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--sep)}
.top .wrap{display:flex; align-items:center; gap:14px; height:62px}
.brand{display:flex; align-items:center; gap:10px; font-family:"Fraunces",Georgia,serif; font-weight:600; font-size:1.16rem; color:var(--text)}
.brand:hover{text-decoration:none}
.brand img{width:30px; height:30px}
.brand b{color:var(--accent); font-weight:600}
.nav{margin-left:auto; display:flex; align-items:center; gap:22px}
.nav a{color:var(--text2); font-size:.95rem; font-weight:500}
.nav .btn{color:#fff}
@media(max-width:560px){ .nav a.hide-sm{display:none} .nav{gap:14px} }

/* ── Buttons ──────────────────────────────────────────────── */
.btn{display:inline-flex; align-items:center; gap:8px; background:var(--accent); color:#fff; border-radius:12px; padding:12px 20px; font-weight:650; font-size:.98rem; line-height:1; transition:background .15s,transform .15s}
.btn:hover{background:var(--accent-d); text-decoration:none; transform:translateY(-1px)}
.btn.ghost{background:transparent; color:var(--text); border:1.5px solid var(--sep)}
.btn.ghost:hover{background:var(--card2); border-color:var(--label)}
.cta-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:26px}

/* ── Hero mit Höhenlinien-Berg (SVG, kein Foto) ───────────── */
.hero{position:relative; overflow:hidden; padding-top:clamp(40px,7vw,70px)}
.hero .wrap{position:relative; z-index:2}
.hero h1{max-width:16ch}
.hero .lead{max-width:52ch}
.ridge{display:block; width:100%; height:auto; margin-top:-2px}
.ridge path.fill{fill:var(--green)}
.ridge path.fill2{fill:var(--green-d)}
.ridge path.line{fill:none; stroke:rgba(255,255,255,.16); stroke-width:2}

/* ── Karten (Versprechen / Features) ──────────────────────── */
.grid{display:grid; gap:18px}
.grid.three{grid-template-columns:repeat(3,1fr)}
.grid.two{grid-template-columns:repeat(2,1fr)}
@media(max-width:760px){ .grid.three,.grid.two{grid-template-columns:1fr} }
.card{background:var(--card); border:1px solid var(--sep); border-radius:18px; padding:24px 22px; box-shadow:var(--shadow)}
.card .ic{font-size:1.5rem; line-height:1; margin-bottom:12px; display:block}
.card p{margin:0; color:var(--text2); font-size:.98rem}
.card h3{margin-bottom:.4em}

/* Feature-Zeilen (in Ruhe erklärt statt Liste) */
.feat{display:grid; grid-template-columns:auto 1fr; gap:16px 18px; align-items:start; padding:22px 0; border-top:1px solid var(--sep)}
.feat:first-child{border-top:none}
.feat .ic{width:46px; height:46px; border-radius:12px; background:var(--card2); border:1px solid var(--sep); display:flex; align-items:center; justify-content:center; font-size:1.35rem}
.feat h3{margin:.1em 0 .3em}
.feat p{margin:0; color:var(--text2)}

/* ── Datenquellen ─────────────────────────────────────────── */
.sources{background:var(--bg2); border-radius:20px; padding:clamp(26px,5vw,40px)}
.chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}
.chip{background:var(--card); border:1px solid var(--sep); border-radius:999px; padding:8px 15px; font-size:.9rem; color:var(--text2); font-weight:500}

/* ── Sicherheitshinweis (mittig, sichtbar) ────────────────── */
.safety{background:var(--green-d); color:#EAF1EC; border-radius:22px; padding:clamp(28px,5vw,44px); position:relative}
.safety h2{color:#fff}
.safety p{color:rgba(234,241,236,.86)}
.safety .warn{display:inline-flex; align-items:center; gap:9px; font-weight:700; letter-spacing:.02em; color:#F6C35A; margin-bottom:10px; font-size:.85rem; text-transform:uppercase}
.safety .em{color:#fff; font-weight:650}

/* ── Wer dahintersteht ────────────────────────────────────── */
.author{display:grid; grid-template-columns:120px 1fr; gap:28px; align-items:center}
@media(max-width:560px){ .author{grid-template-columns:1fr; gap:16px} }
.author .ph{width:120px; height:120px; border-radius:50%; background:linear-gradient(155deg,var(--green-l),var(--green-d)); display:flex; align-items:center; justify-content:center; font-size:2.4rem; color:#fff; overflow:hidden}
.author .ph img{width:100%; height:100%; object-fit:cover}

/* ── App-Bereich ──────────────────────────────────────────── */
.appcta{background:linear-gradient(160deg,var(--green) 0%,var(--green-d) 100%); color:#fff; border-radius:24px; padding:clamp(30px,6vw,52px); text-align:center}
.appcta h2{color:#fff}
.appcta p{color:rgba(255,255,255,.85)}
.badges{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:22px}
.badge{display:inline-flex; align-items:center; gap:9px; background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.22); color:#fff; border-radius:12px; padding:11px 18px; font-size:.9rem}
.badge small{display:block; font-size:.68rem; opacity:.7; letter-spacing:.04em}
.badge b{font-size:1rem; font-weight:600}
.appcta .weblink{display:inline-block; margin-top:18px; color:rgba(255,255,255,.9); border-bottom:1px solid rgba(255,255,255,.4)}
.appcta .weblink:hover{color:#fff; text-decoration:none}

/* ── Footer ───────────────────────────────────────────────── */
footer{background:var(--bg2); border-top:1px solid var(--sep); padding:48px 0 40px; margin-top:20px}
footer .cols{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:28px}
@media(max-width:640px){ footer .cols{grid-template-columns:1fr 1fr} footer .cols .op{grid-column:1/-1} }
footer h4{font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--label); margin:0 0 12px}
footer a{color:var(--text2); font-size:.92rem; display:block; margin:6px 0}
footer a:hover{color:var(--accent)}
footer .op p{color:var(--text2); font-size:.92rem; margin:0 0 4px; line-height:1.5}
footer .fine{border-top:1px solid var(--sep); margin-top:32px; padding-top:20px; color:var(--label); font-size:.82rem; line-height:1.6}

/* ── Sanftes Einblenden (nur mit JS; ohne JS sofort sichtbar) */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1; transform:none}
.no-js .reveal, html:not(.js) .reveal{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){ .reveal{transition:none; opacity:1; transform:none} html{scroll-behavior:auto} }