/*******************************************************************************
 site.css – gemeinsame Basis der neuen Website (Startseite, später auch Übersichten)
 Hell = Wanderungen/Start, dunkel = Fotogalerie (via Klasse .dunkel auf <body>)
*******************************************************************************/

:root {
  --gruen: #005B29;
  --gruen-hell: #2f8f57;
  --gelb: #FFEEAA;
  --link: #0000cc;
  --bg: #fff;
  --text: #1b1b1b;
  --text-leise: #5a5a5a;
  --text-hero: #e4dbd0;
  --rand: #d9d9d9;
  --radius: 10px;
  --max: 1200px;
}

body.dunkel {
  --bg: #000;
  --text: #e8e8e8;            /* #e8e8e8   */
  --text-leise: #a0a0a0;
  --text-hero: #e4dbd0;
  --rand: #333;
  --link: #8ab4ff;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); }

.huelle {
  width: min(100% - 32px, var(--max));
  margin-inline: auto;
}

.sprung {
  position: absolute;
  left: -999px;
}
.sprung:focus {
  left: 8px; top: 8px; z-index: 10;
  background: #fff; color: #000; padding: 8px 12px;
}

a:focus-visible { outline: 3px solid var(--gelb); outline-offset: 2px; }

/* Kopf-Navigation (auf Unterseiten wiederverwendbar) */
.kopfnav {
  display: flex; flex-wrap: wrap; gap: 6px 20px;
  align-items: center; justify-content: space-between;
  padding: 10px 0;
}
.kopfnav .marke { font-weight: 700; text-decoration: none; color: inherit; }
.kopfnav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; }
.kopfnav a { text-decoration: none; color: inherit; }
.kopfnav ul a:hover { text-decoration: underline; }

.fuss {
  border-top: 1px solid var(--rand);
  margin-top: 48px;
  padding: 20px 0 32px;
  color: var(--text-leise);
  font-size: .875rem;
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
}
.fuss a { color: inherit; }

.knopf {
  display: inline-block;
  background: var(--gruen); color: #fff;
  padding: .55em 1.1em; border-radius: 999px;
  text-decoration: none; font-weight: 600;
}
.knopf:hover { background: var(--gruen-hell); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}