@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@500;700;900&family=Figtree:ital,wght@0,400;0,500;0,600;1,400&family=DM+Mono:wght@400;500&display=swap');

:root {
  --granit: #1e2419;
  --granit-soft: #44503a;
  --nebel: #e7eef3;
  --nebel-deep: #d2e0e8;
  --gletscher: #4f7b93;
  --gletscher-deep: #35566a;
  --latsche: #3c4a3a;
  --enzian: #4a3b73;
  --white: #ffffff;
  --font-display: "Unbounded", "Arial Black", sans-serif;
  --font-body: "Figtree", "Segoe UI", sans-serif;
  --font-data: "DM Mono", ui-monospace, monospace;
  --content-max: 78rem;
  --reading-max: 42rem;
  --step-0: clamp(.85rem, .8rem + .2vw, .95rem);
  --step-1: clamp(1.03rem, .98rem + .2vw, 1.15rem);
  --step-2: clamp(1.35rem, 1.15rem + .75vw, 1.9rem);
  --step-3: clamp(1.8rem, 1.4rem + 1.7vw, 2.85rem);
  --step-4: clamp(2.4rem, 1.7rem + 3.2vw, 4.3rem);
  --space-xs: clamp(.55rem, .48rem + .35vw, .85rem);
  --space-s: clamp(1rem, .8rem + .9vw, 1.6rem);
  --space-m: clamp(1.7rem, 1.25rem + 2vw, 2.9rem);
  --space-l: clamp(3rem, 2.1rem + 4.2vw, 5.7rem);
  --cut: 1.1rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--granit);
  background: var(--nebel);
  font-family: var(--font-body);
  font-size: var(--step-1);
  line-height: 1.62;
}
img { display: block; max-width: 100%; }
a { color: var(--gletscher-deep); }
a:hover { color: var(--enzian); }
:focus-visible { outline: .18rem solid var(--enzian); outline-offset: .18rem; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.01em;
  color: var(--granit);
  text-wrap: balance;
}
h1 { margin: 0; font-size: var(--step-4); font-weight: 900; letter-spacing: -.015em; }
h2 { margin: 0 0 .9rem; font-size: var(--step-3); }
h3 { margin: 0 0 .55rem; font-size: var(--step-2); font-weight: 700; }
p { max-width: 66ch; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 300; padding: .8rem 1.1rem; background: var(--enzian); color: var(--white); }
.skip-link:focus { left: 1rem; top: 1rem; }
.rahmen { width: min(calc(100% - 2rem), var(--content-max)); margin-inline: auto; }
.vorspann { display: inline-flex; align-items: center; gap: .45rem; margin-bottom: .8rem; font-family: var(--font-data); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gletscher-deep); }

/* summit-marker triangle: recurring device, standing for the peak itself */
.gipfel-marke { flex-shrink: 0; width: 0; height: 0; border-left: .5rem solid transparent; border-right: .5rem solid transparent; border-bottom: .8rem solid var(--granit); }
.gipfel-marke--blau { border-bottom-color: var(--gletscher); }
.gipfel-marke--hell { border-bottom-color: var(--nebel); }
.gipfel-marke--enzian { border-bottom-color: var(--enzian); }

/* header: transparent over the hero, solidifies on scroll — not sticky-from-load, not a plain bordered bar */
.kamm { position: sticky; top: 0; z-index: 100; background: transparent; transition: background-color .25s ease, box-shadow .25s ease; }
.kamm--fest { background: rgba(30, 33, 36, .94); box-shadow: 0 .2rem 1rem rgba(0,0,0,.18); backdrop-filter: blur(6px); }
.kamm-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1.3rem; min-height: 4.4rem; padding-block: .6rem; }
.wortmarke { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--white); font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; letter-spacing: .01em; text-transform: uppercase; }
.wortmarke span { display: block; font-family: var(--font-data); font-size: .58rem; font-weight: 400; letter-spacing: .06em; color: rgba(238,240,239,.7); text-transform: none; }
.steignav { display: flex; flex-wrap: wrap; align-items: center; gap: 0; }
.steignav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .5rem .85rem;
  border-right: 1px solid rgba(238,240,239,.18);
  color: rgba(238,240,239,.82);
  font-family: var(--font-data);
  font-size: .78rem;
  letter-spacing: .02em;
  text-decoration: none;
  text-transform: uppercase;
}
.steignav a:last-child { border-right: 0; }
.steignav a:hover { color: var(--white); }
.steignav a[aria-current="page"] { color: var(--white); font-weight: 500; }
.steignav a[aria-current="page"]::before { content: "▴ "; color: var(--gletscher); }

/* hero: "der Aussicht" — full-bleed photo backdrop with a glass copy panel overlaid at the base, an inline elevation strip instead of stat-cards, no eyebrow+headline+3-card+side-photo default */
.aussicht { position: relative; margin-top: -4.4rem; min-height: 34rem; display: flex; align-items: flex-end; background: var(--granit); overflow: hidden; }
.aussicht-bild { position: absolute; inset: 0; }
.aussicht-bild img { width: 100%; height: 100%; object-fit: cover; }
.aussicht-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20,22,24,.92) 0%, rgba(20,22,24,.55) 42%, rgba(20,22,24,.12) 75%); }
.aussicht-text { position: relative; z-index: 2; padding-block: var(--space-l) var(--space-m); color: var(--white); max-width: 46rem; }
.aussicht-text h1 { color: var(--white); }
.aussicht-text .einleitung { font-size: clamp(1.08rem, 1rem + .45vw, 1.3rem); color: rgba(238,240,239,.88); }
.hoehen-strip { display: flex; flex-wrap: wrap; gap: 0; margin: var(--space-s) 0; padding: 0; list-style: none; border-top: 1px solid rgba(238,240,239,.25); }
.hoehen-strip li { flex: 1 1 auto; padding: .7rem 1.1rem .2rem 0; margin-right: 1.1rem; border-right: 1px solid rgba(238,240,239,.2); font-family: var(--font-data); font-size: .78rem; color: rgba(238,240,239,.72); }
.hoehen-strip li:last-child { border-right: 0; margin-right: 0; }
.hoehen-strip strong { display: block; font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; color: var(--white); letter-spacing: 0; }
.aussicht-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: var(--space-s); }

.aktion { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .7rem 1.4rem; font-family: var(--font-display); font-weight: 700; font-size: .88rem; letter-spacing: .01em; text-decoration: none; clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); }
.aktion-primaer { background: var(--gletscher); color: var(--white); }
.aktion-primaer:hover { background: var(--enzian); color: var(--white); }
.aktion-outline { border: 1.5px solid rgba(238,240,239,.6); color: var(--white); }
.aktion-outline:hover { border-color: var(--white); color: var(--white); background: rgba(238,240,239,.1); }
.aktion-outline--dunkel { border-color: var(--granit-soft); color: var(--granit); }
.aktion-outline--dunkel:hover { border-color: var(--enzian); color: var(--enzian); background: transparent; }

/* photo fields */
.bildfeld { position: relative; overflow: hidden; background: var(--nebel-deep); min-height: 11rem; }
.bildfeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bildfeld:not(:has(img)) { display: flex; align-items: center; justify-content: center; border: 1.5px dashed var(--granit-soft); }
.bildfeld:not(:has(img))::after { content: attr(data-label); padding: .8rem 1rem; max-width: 85%; text-align: center; font-family: var(--font-data); font-size: .66rem; line-height: 1.5; color: var(--granit-soft); }
.bildfeld--hoch { aspect-ratio: 4/5; }
.bildfeld--breit { aspect-ratio: 16/9; }
.bildfeld--quadrat { aspect-ratio: 1/1; }
.bildfeld figcaption { position: absolute; inset: auto 0 0; margin: 0; padding: .55rem .75rem; background: linear-gradient(0deg, rgba(20,22,24,.85), transparent); color: var(--white); font-family: var(--font-data); font-size: .66rem; line-height: 1.4; }

/* inner-page section band (still used on detail/legal pages, unchanged) */
.zone { padding-block: var(--space-l); }
.zone--getoent { background: var(--white); }
.zone-kopf { display: grid; gap: .6rem; margin-bottom: var(--space-m); max-width: var(--reading-max); }
.zone-kopf p { margin: 0; color: var(--granit-soft); }
.zone-kopf--folge { margin-top: var(--space-m); }

/* homepage: elevation zones — real-altitude-anchored sections replacing the generic
   alternating-stripe skeleton. Each zone carries a huge, low-opacity vertical altitude
   numeral instead of a plain background-swap; the summit zone folds the "why choose"
   intro and the three-ascent cards into one continuous block (both are fundamentally
   about the same 2,962 m destination), so the homepage reads as two real elevation
   tiers plus two standalone modules (the comparison tool, the practical index) rather
   than N interchangeable full-width stripes. */
.hoehenzone { position: relative; padding-block: var(--space-l); overflow: hidden; }
.hoehenzone--gipfel { background: var(--nebel); }
.hoehenzone--tal { background: var(--white); }
.hoehenzone .rahmen { position: relative; z-index: 1; }
.hoehenzone::before {
  content: attr(data-hoehe);
  position: absolute;
  top: var(--space-m);
  right: -.4rem;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(3rem, 2.3rem + 5vw, 7.5rem);
  letter-spacing: .03em;
  color: var(--granit);
  opacity: .06;
  pointer-events: none;
  line-height: 1;
  white-space: nowrap;
  z-index: 0;
}
.hoehenzone--tal::before { color: var(--gletscher); opacity: .1; }

.werkzeug-rahmen { padding-block: var(--space-l); }

.vorbereitung { padding-block: var(--space-l); background: var(--nebel); }

/* ascent-method cards: the recurring content unit */
.steig-raster { display: grid; gap: var(--space-s); }
.steig-karte {
  position: relative;
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-s);
  background: var(--white);
  border-top: .32rem solid var(--gletscher);
  clip-path: polygon(0 0, calc(100% - 1.4rem) 0, 100% 1.4rem, 100% 100%, 0 100%);
  text-decoration: none;
  color: inherit;
  transition: box-shadow .18s ease, transform .18s ease;
}
.steig-karte:hover { box-shadow: 0 .9rem 2rem rgba(30,33,36,.16); transform: translateY(-.15rem); }
.steig-karte-kennzahl { display: flex; align-items: baseline; gap: .5rem; font-family: var(--font-data); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--gletscher-deep); }
.steig-karte h3 { margin: .1rem 0 0; }
.steig-karte .steig-fakten-mini { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: .4rem 0 0; padding: 0; list-style: none; font-family: var(--font-data); font-size: .72rem; color: var(--granit-soft); }

/* generic cards */
.talfeld-raster { display: grid; gap: var(--space-s); }
.talfeld { padding: var(--space-s); background: var(--white); border-top: .32rem solid var(--latsche); }
.talfeld h3 { margin-bottom: .45rem; }

/* fact strip */
.fakten-leiste { display: grid; gap: 1px; margin: var(--space-s) 0; background: var(--nebel-deep); }
.fakten-leiste div { padding: 1rem 1.2rem; background: var(--white); }
.fakten-leiste dt { font-family: var(--font-data); font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--granit-soft); }
.fakten-leiste dd { margin: .3rem 0 0; font-family: var(--font-display); font-weight: 700; font-size: 1rem; }

/* callout */
.hinweis { display: grid; gap: .6rem; margin: var(--space-s) 0; padding: var(--space-s); background: var(--nebel-deep); border-left: .3rem solid var(--enzian); }
.hinweis h3 { margin: 0; font-size: 1.1rem; }
.hinweis p { margin: 0; max-width: none; }

/* signature tool: der Aufstiegsvergleich — a live weighted-scoring ranker across the three real ascent methods */
.vergleich { padding: var(--space-s); background: var(--granit); color: var(--nebel); }
.vergleich h2, .vergleich h3 { color: var(--white); }
.vergleich-lede { color: rgba(238,240,239,.78); max-width: var(--reading-max); }
.vergleich-raster { display: grid; gap: var(--space-s); margin-top: var(--space-s); }
.vergleich-eingabe { display: grid; gap: var(--space-s); }
.vergleich-feld { display: grid; gap: .5rem; }
.vergleich-feld legend { font-family: var(--font-data); font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; color: rgba(238,240,239,.65); padding: 0; }
.vergleich-optionen { display: grid; gap: .5rem; }
.vergleich-optionen label {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: 46px;
  padding: .55rem .85rem;
  background: rgba(238,240,239,.05);
  border: 1px solid rgba(238,240,239,.2);
  cursor: pointer;
  font-size: .92rem;
}
.vergleich-optionen input { width: 1.05rem; height: 1.05rem; flex-shrink: 0; accent-color: var(--gletscher); }
.vergleich-optionen label:has(input:checked) { border-color: var(--gletscher); background: rgba(79,123,147,.22); }
.vergleich-ergebnis { display: grid; align-content: start; gap: .55rem; }
.rang { padding: .8rem .9rem; background: rgba(238,240,239,.05); border: 1px solid rgba(238,240,239,.16); }
.rang-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; font-family: var(--font-display); font-weight: 700; }
.rang-platz { font-family: var(--font-data); font-size: .7rem; color: var(--gletscher); text-transform: uppercase; }
.rang-punkte { font-family: var(--font-data); font-size: .78rem; color: rgba(238,240,239,.65); }
.rang-balken-spur { margin-top: .5rem; height: .4rem; background: rgba(238,240,239,.12); }
.rang-balken { height: 100%; background: var(--gletscher); transition: width .35s ease; }
.rang-grund { margin: .5rem 0 0; font-size: .84rem; color: rgba(238,240,239,.78); max-width: none; }

/* practical index — replaces a generic card grid for the homepage's "before you book" block */
.praxis-liste { display: grid; gap: 0; margin: var(--space-s) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--nebel-deep); }
.praxis-liste li { display: grid; grid-template-columns: 2.6rem 1fr; gap: 1rem; padding: var(--space-s) 0; border-bottom: 1px solid var(--nebel-deep); }
.praxis-liste .praxis-nr { font-family: var(--font-data); font-size: 1.1rem; color: var(--gletscher); }
.praxis-liste h3 { margin: 0 0 .3rem; font-size: 1.2rem; }
.praxis-liste p { margin: 0 0 .4rem; }

/* recurring ascent-method detail page template — fact list beside H1, photo placed after the first prose block rather than as an immediate hero repeat */
.steig-kopf { padding-block: var(--space-l) var(--space-m); background: var(--white); }
.steig-kopf-raster { display: grid; gap: var(--space-m); }
.steig-kopf .vorspann { color: var(--gletscher-deep); }
.steig-fakten { display: grid; gap: 0; padding: 0; list-style: none; align-self: start; border: 1px solid var(--nebel-deep); }
.steig-fakten li { display: grid; gap: .15rem; padding: .8rem 1rem; border-bottom: 1px solid var(--nebel-deep); }
.steig-fakten li:last-child { border-bottom: 0; }
.steig-fakten dt { font-family: var(--font-data); font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; color: var(--granit-soft); }
.steig-fakten dd { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1rem; }
.steig-inhalt { display: grid; gap: var(--space-l); padding-block: var(--space-m); }
.steig-zone { display: grid; gap: var(--space-s); }
.steig-zone > .zone-kopf { margin-bottom: 0; max-width: none; }
.steig-pager { display: flex; justify-content: space-between; gap: 1rem; padding: var(--space-s) 0; border-top: 1px solid var(--nebel-deep); margin-top: var(--space-m); font-family: var(--font-data); font-size: .78rem; }
.steig-pager a { text-decoration: none; }

/* checklist */
.pruefliste { display: grid; gap: .55rem; margin: var(--space-s) 0; padding: 0; list-style: none; }
.pruefliste li { display: flex; gap: .7rem; align-items: flex-start; padding: .75rem .9rem; background: var(--white); border-left: .28rem solid var(--gletscher); }

/* table */
.daten-tabelle { width: 100%; border-collapse: collapse; font-size: .9rem; }
.daten-tabelle th, .daten-tabelle td { padding: .65rem .8rem; border-bottom: 1px solid var(--nebel-deep); text-align: left; vertical-align: top; }
.daten-tabelle th { font-family: var(--font-data); font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; color: var(--granit-soft); }

/* legal */
.rechts-inhalt { display: grid; gap: var(--space-m); }
.rechts-inhalt h2 { font-size: var(--step-2); margin-top: var(--space-m); }
.rechts-inhalt h2:first-child { margin-top: 0; }
.rechts-zurueck { display: inline-block; margin-top: var(--space-m); }

/* footer: light, not dark like the rest of the batch — 3-column with a practical-facts box */
.talboden { background: var(--white); color: var(--granit-soft); padding-block: var(--space-l); border-top: 1px solid var(--nebel-deep); }
.talboden-raster { display: grid; gap: var(--space-m); }
.talboden-marke { display: flex; align-items: center; gap: .55rem; color: var(--granit); font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; text-decoration: none; text-transform: uppercase; }
.talboden nav { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-top: var(--space-s); padding: 0; list-style: none; font-family: var(--font-data); font-size: .78rem; }
.talboden nav a { text-decoration: none; color: var(--granit-soft); }
.talboden small { display: block; margin-top: var(--space-s); max-width: 62ch; font-size: .76rem; }
.fakten-box { padding: var(--space-s); background: var(--nebel); border: 1px solid var(--nebel-deep); }
.fakten-box h4 { margin: 0 0 .6rem; font-family: var(--font-data); font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--granit-soft); }
.fakten-box dl { margin: 0; display: grid; gap: .5rem; }
.fakten-box dt { font-family: var(--font-data); font-size: .78rem; color: var(--granit-soft); }
.fakten-box dd { margin: .1rem 0 0; font-family: var(--font-display); font-weight: 700; font-size: .92rem; }

@media (min-width: 40rem) {
  .steig-raster { grid-template-columns: repeat(2, 1fr); }
  .talfeld-raster { grid-template-columns: repeat(2, 1fr); }
  .fakten-leiste { grid-template-columns: repeat(3, 1fr); }
  .vergleich-raster { grid-template-columns: 1.05fr .95fr; align-items: start; }
}
@media (min-width: 60rem) {
  .aussicht-text { max-width: 50rem; }
  .steig-kopf-raster { grid-template-columns: 1fr 18rem; }
  .steig-raster { grid-template-columns: repeat(3, 1fr); }
  .talfeld-raster.talfeld-raster--4 { grid-template-columns: repeat(4, 1fr); }
  .vergleich-eingabe { grid-template-columns: repeat(2, 1fr); }
  .talboden-raster { grid-template-columns: 1.1fr .9fr .9fr; }
  .steignav a { font-size: .74rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}