/*******************************************************************************
 kopf.css – Seitenkopf mit Bannerbild und Navigation oben rechts
 (Übersichtsseiten und Wanderseiten). Das Bild steht pro Seite im HTML:
 <img class="banner" src="banner.jpg" alt="" width="1200" height="300">
 Empfohlen: 1200 x 300 px, JPEG ca. 80 %. Motiv in der Mitte (Handy zeigt nur die Mitte).
*******************************************************************************/

/* ---------- Header: abgerundetes Bannerbild, Navigation oben rechts ---------- */
.kopf { margin-top: 16px; }
.kopf .box {
  position: relative; color: #e8e8e8; border-radius: var(--radius); overflow: hidden;
  padding: clamp(80px, 14vw, 150px) clamp(18px, 4vw, 36px) clamp(18px, 3vw, 28px);
  background: rgb(0, 60, 25);
}
.kopf .banner {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 40%; z-index: 0;
}
/* Abdunklung über dem Bild (schwarz, farbneutral): oben für die Navigation, unten für den Titel.
   Pro Seite anpassbar: <div class="box" style="--oben: .3; --unten: .45"> (Werte 0 = keine … 1 = schwarz) */
.kopf .box::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to bottom, rgba(0,0,0,var(--oben, .14)), rgba(0,0,0,0) 30%),
    linear-gradient(to top, rgba(0,0,0,var(--unten, .18)), rgba(0,0,0,.05) 70%);
}
.kopf .kopfnav {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  justify-content: flex-end; padding: 14px clamp(18px, 4vw, 36px);
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
.kopf .kopfnav ul { gap: 18px; }
.kopf .kopfnav li + li::before { content: "|"; margin-right: 18px; opacity: .6; }
.kopf .kopfnav a { color: #fff; }
.kopf h1 { position: relative; z-index: 2; margin: 0 0 4px; font-size: clamp(1.8rem, 5vw, 2.8rem); text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.kopf h2 { position: relative; z-index: 2; margin: 0; font-size: 1.1rem; font-weight:500; color: #f1f1f1 ; text-shadow: 0 1px 6px rgba(0,0,0,.5); }

.kopf p { position: relative; z-index: 2; margin: 0; text-shadow: 0 1px 6px rgba(0,0,0,.5); }