@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Hanken+Grotesk:wght@400;500;600;700;800&family=PT+Mono&display=swap');

:root {
  --fels: #191833;
  --fels-soft: #322f52;
  --alpweiss: #e3ecdf;
  --alpweiss-deep: #d3ddce;
  --gaemsrot: #b8552e;
  --gaemsrot-deep: #8f4021;
  --arvengruen: #265c54;
  --arvengruen-deep: #1a423c;
  --steinbockgold: #a87a35;
  --weiss: #fbfaf6;
  --content-max: 78rem;
  --reading-max: 42rem;
  --step-0: clamp(.85rem, .8rem + .2vw, .95rem);
  --step-1: clamp(1.05rem, 1rem + .2vw, 1.18rem);
  --step-2: clamp(1.35rem, 1.15rem + .8vw, 1.9rem);
  --step-3: clamp(1.85rem, 1.5rem + 1.6vw, 2.8rem);
  --step-4: clamp(2.6rem, 1.9rem + 3.2vw, 4.6rem);
  --space-xs: clamp(.5rem, .42rem + .35vw, .8rem);
  --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.6rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--fels);
  background: var(--alpweiss);
  font-family: "Hanken Grotesk", "Segoe UI", sans-serif;
  font-size: var(--step-1);
  line-height: 1.62;
}
img { display: block; max-width: 100%; }
a { color: var(--arvengruen); text-decoration-thickness: .08em; text-underline-offset: .2em; }
a:hover { color: var(--gaemsrot); }
:focus-visible { outline: .18rem solid var(--gaemsrot); outline-offset: .18rem; }
h1, h2, h3, h4 {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--fels);
  text-wrap: balance;
}
h1 { margin: 0; font-size: var(--step-4); }
h2 { margin: 0 0 .8rem; font-size: var(--step-3); }
h3 { margin: 0 0 .55rem; font-size: var(--step-2); font-weight: 500; }
p { max-width: 66ch; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; padding: .8rem 1.1rem; background: var(--steinbockgold); color: var(--fels); }
.skip-link:focus { left: 1rem; top: 1rem; }
.rand { width: min(calc(100% - 2rem), var(--content-max)); margin-inline: auto; }
.zackenband { display: inline-flex; align-items: center; gap: .4rem; font-family: "PT Mono", ui-monospace, monospace; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--arvengruen); }

/* ---------- header ---------- */
.pforte { background: var(--weiss); border-bottom: 1px solid var(--alpweiss-deep); position: sticky; top: 0; z-index: 50; }
.pforte-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1.4rem; min-height: 4.2rem; padding-block: .55rem; }
.marke { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--fels); }
.marke svg { width: 1.9rem; height: 1.9rem; flex-shrink: 0; }
.marke-text { display: flex; flex-direction: column; line-height: 1.15; }
.marke-name { font-family: "Instrument Serif", serif; font-size: 1.25rem; }
.marke-sub { font-family: "PT Mono", monospace; font-size: .62rem; letter-spacing: .05em; color: var(--fels-soft); text-transform: uppercase; }
.pfad { display: flex; flex-wrap: wrap; gap: .1rem 1.1rem; }
.pfad a { display: inline-flex; align-items: center; min-height: 44px; color: var(--fels); font-weight: 600; font-size: .92rem; text-decoration: none; border-bottom: 2px solid transparent; }
.pfad a:hover, .pfad a[aria-current="page"] { border-bottom-color: var(--gaemsrot); color: var(--gaemsrot); }

/* ---------- hero: .pirsch — short photo banner with headline bleeding onto the page bg below it ---------- */
.pirsch { position: relative; }
.pirsch-bild { margin: 0; position: relative; height: clamp(15rem, 40vw, 24rem); overflow: hidden; background: var(--fels); }
.pirsch-bild img { width: 100%; height: 100%; object-fit: cover; }
.pirsch-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(25,24,51,.05) 55%, rgba(25,24,51,.55) 100%); }
.pirsch-marker { position: absolute; left: 1.2rem; top: 1rem; display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .7rem; background: rgba(251,250,246,.92); font-family: "PT Mono", monospace; font-size: .72rem; color: var(--fels); }
.pirsch-marker strong { color: var(--gaemsrot); }
.pirsch-text { position: relative; margin-top: -3.2rem; padding: 0 0 var(--space-m); }
.pirsch-text .rand { display: grid; gap: var(--space-s); }
.pirsch-titel { background: var(--alpweiss); padding: var(--space-s) var(--space-s) 0; }
.pirsch-titel h1 { font-size: clamp(2.3rem, 1.7rem + 2.8vw, 4rem); }
.pirsch-lede { max-width: var(--reading-max); font-size: clamp(1.08rem, 1rem + .4vw, 1.28rem); }
.pirsch-fakten { display: grid; gap: .1rem; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--fels); }
.pirsch-fakten li { padding: .7rem 0; border-bottom: 1px solid var(--alpweiss-deep); display: flex; justify-content: space-between; gap: 1rem; font-size: .92rem; }
.pirsch-fakten strong { font-family: "PT Mono", monospace; color: var(--arvengruen); }
.pirsch-actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.knopf { display: inline-flex; min-height: 44px; align-items: center; padding: .6rem 1.05rem; font-weight: 700; text-decoration: none; border: 1.5px solid var(--fels); }
.knopf--voll { background: var(--fels); color: var(--weiss); }
.knopf--voll:hover { background: var(--gaemsrot); border-color: var(--gaemsrot); color: var(--weiss); }
.knopf--linie { background: transparent; color: var(--fels); }
.knopf--linie:hover { background: var(--fels); color: var(--weiss); }

/* ---------- content architecture: .feldbuch mosaic grid (NOT stacked full-width bands) ---------- */
.feldbuch-rahmen { padding-block: var(--space-l); }
.feldbuch-kopf { display: grid; gap: .6rem; margin-bottom: var(--space-m); max-width: var(--reading-max); }
.feldbuch { display: grid; gap: 1px; background: var(--fels); border: 1px solid var(--fels); grid-template-columns: 1fr; }
.fundstueck { background: var(--weiss); padding: var(--space-s); display: flex; flex-direction: column; gap: .6rem; }
.fundstueck--dunkel { background: var(--fels); color: var(--alpweiss); }
.fundstueck--dunkel h3, .fundstueck--dunkel a { color: var(--alpweiss); }
.fundstueck--dunkel a:hover { color: var(--steinbockgold); }
.fundstueck-bild { position: relative; margin: calc(var(--space-s) * -1) calc(var(--space-s) * -1) 0; overflow: hidden; }
.fundstueck-bild img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }
.fundstueck--gross .fundstueck-bild img { aspect-ratio: 16/10; }
.fundstueck-label { font-family: "PT Mono", monospace; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--gaemsrot); }
.fundstueck--dunkel .fundstueck-label { color: var(--steinbockgold); }
.fundstueck p:last-child { margin-bottom: 0; }
.fundstueck-mehr { margin-top: auto; font-weight: 700; }

@media (min-width: 40rem) {
  .feldbuch { grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(11rem, auto); }
  .fundstueck--gross { grid-column: span 3; grid-row: span 2; }
  .fundstueck--hoch { grid-column: span 1; grid-row: span 2; }
  .fundstueck--breit { grid-column: span 2; }
  .fundstueck--klein { grid-column: span 1; }
}
@media (min-width: 64rem) {
  .feldbuch { grid-template-columns: repeat(6, 1fr); }
  .fundstueck--gross { grid-column: span 4; }
  .fundstueck--hoch { grid-column: span 2; }
  .fundstueck--breit { grid-column: span 3; }
  .fundstueck--klein { grid-column: span 2; }
}

/* ---------- signature tool: "Ist das erlaubt?" rules checker ---------- */
.erlaubt-tool { background: var(--fels); color: var(--alpweiss); padding-block: var(--space-l); }
.erlaubt-tool .rand { display: grid; gap: var(--space-m); }
.erlaubt-tool h2 { color: var(--weiss); }
.erlaubt-intro { max-width: var(--reading-max); color: var(--alpweiss-deep); }
.erlaubt-grid { display: grid; gap: var(--space-m); }
.erlaubt-liste { display: grid; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.erlaubt-liste button { width: 100%; text-align: left; min-height: 48px; padding: .7rem .9rem; background: var(--fels-soft); color: var(--alpweiss); border: 1px solid rgba(227,236,223,.25); font: inherit; font-weight: 600; cursor: pointer; }
.erlaubt-liste button[aria-pressed="true"] { background: var(--steinbockgold); color: var(--fels); border-color: var(--steinbockgold); }
.erlaubt-antwort { padding: var(--space-s); background: var(--weiss); color: var(--fels); min-height: 12rem; display: flex; flex-direction: column; gap: .6rem; justify-content: center; }
.erlaubt-status { font-family: "PT Mono", monospace; font-size: .82rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.erlaubt-status[data-status="nein"] { color: var(--gaemsrot-deep); }
.erlaubt-status[data-status="ja"] { color: var(--arvengruen); }
.erlaubt-antwort p { margin: 0; max-width: none; }
@media (min-width: 52rem) {
  .erlaubt-grid { grid-template-columns: 1fr 1.2fr; align-items: start; }
}

/* ---------- reusable page furniture ---------- */
.leseband { padding-block: var(--space-l); }
.leseband--alpweiss { background: var(--weiss); }
.leseinhalt { display: grid; gap: var(--space-m); }
.leseinhalt.mit-sidebar { grid-template-columns: 1fr; }
@media (min-width: 56rem) {
  .leseinhalt.mit-sidebar { grid-template-columns: 1fr 20rem; align-items: start; }
}
.prosa { max-width: var(--reading-max); }
.prosa > :first-child { margin-top: 0; }
.infokasten { padding: var(--space-s); background: var(--weiss); border: 1px solid var(--alpweiss-deep); position: sticky; top: 5rem; }
.infokasten h3 { font-size: 1.15rem; margin-bottom: .5rem; }
.infokasten dl { margin: 0; display: grid; gap: .55rem; }
.infokasten dt { font-family: "PT Mono", monospace; font-size: .68rem; text-transform: uppercase; color: var(--fels-soft); }
.infokasten dd { margin: .1rem 0 0; font-weight: 700; }
.notiz-reihe { display: grid; gap: 1.2rem; }
.notiz { border: 1px solid var(--alpweiss-deep); background: var(--weiss); }
.notiz-bild { aspect-ratio: 4/3; overflow: hidden; }
.notiz-bild img { width: 100%; height: 100%; object-fit: cover; }
.notiz-text { padding: var(--space-s); }
.notiz-text h3 { font-size: 1.25rem; }
.notiz-mehr { font-weight: 700; }
@media (min-width: 44rem) { .notiz-reihe { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .notiz-reihe { grid-template-columns: repeat(3, 1fr); } }

.faktentabelle { width: 100%; border-collapse: collapse; font-size: .95rem; }
.faktentabelle th, .faktentabelle td { padding: .7rem .8rem; border: 1px solid var(--alpweiss-deep); text-align: left; vertical-align: top; }
.faktentabelle th { background: var(--weiss); font-family: "PT Mono", monospace; font-size: .72rem; text-transform: uppercase; }
.regelliste { list-style: none; margin: 1.2rem 0; padding: 0; display: grid; gap: .5rem; }
.regelliste li { display: flex; gap: .6rem; align-items: baseline; padding: .5rem 0; border-bottom: 1px solid var(--alpweiss-deep); }
.regel-status { flex-shrink: 0; width: 1.6rem; font-family: "PT Mono", monospace; font-weight: 700; }
.regel-status--nein { color: var(--gaemsrot); }
.regel-status--ja { color: var(--arvengruen); }

/* ---------- footer: .talschluss ---------- */
.talschluss { background: var(--fels); color: var(--alpweiss); padding-block: var(--space-l) var(--space-m); }
.talschluss .rand { display: grid; gap: var(--space-m); }
.talschluss-oben { display: grid; gap: var(--space-m); }
.talschluss h2, .talschluss h3 { color: var(--weiss); }
.talschluss a { color: var(--alpweiss); }
.talschluss a:hover { color: var(--steinbockgold); }
.talschluss-nav { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; list-style: none; margin: 0; padding: 0; }
.talschluss-klein { max-width: 65ch; color: var(--alpweiss-deep); font-size: .85rem; }
@media (min-width: 48rem) { .talschluss-oben { grid-template-columns: 1.2fr 1fr; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* cookie choice (Google Ads consent) */
.consent-bar { position: fixed; z-index: 100; right: 0; bottom: 0; left: 0; display: grid; gap: .9rem; padding: 1rem clamp(1rem, 4vw, 3rem); border-top: 3px solid var(--gaemsrot); background: var(--fels); color: var(--alpweiss); }
.consent-bar[hidden] { display: none; }
.consent-bar p { max-width: 62rem; margin: 0; font-size: .92rem; line-height: 1.5; }
.consent-bar a { color: var(--weiss); }
.consent-bar__actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.consent-bar__btn { min-width: 44px; min-height: 44px; padding: .5rem 1.3rem; border: 1.5px solid var(--alpweiss); background: var(--alpweiss); color: var(--fels); font: 700 .95rem "Hanken Grotesk", sans-serif; cursor: pointer; }
.consent-bar__btn--ghost { background: transparent; color: var(--alpweiss); }
.talschluss .consent-open { display: inline; min-height: 44px; padding: 0; border: 0; background: none; color: var(--alpweiss); font: inherit; text-decoration: underline; cursor: pointer; }
@media (min-width: 48rem) { .consent-bar { grid-template-columns: 1fr auto; align-items: center; } }