/* golfausflug.de — Kopfbilder: Schleier nur unten, breite Bildschirme mit unscharfen Seiten
   Erzeugt von: Cowork-Chat „Relaunch — Punkte vom 26.09.“ am 26.09.2026
   Auftrag Inhaber 26.09.2026 14:22 („Abdunklung der Hero-Bilder reduzieren … Lösung für den breiten Bildschirm“),
   Grundsatz wie NL-Seite (Entscheidung 26.09.2026 12:52): Schleier nur unten und schwach, Lesbarkeit über Schriftschatten,
   auf breiten Bildschirmen nicht beschneiden, sondern schmaler zeigen und die Seiten unscharf füllen.
   Gilt für: Startseite (.gx .hero), Alle Reisen & Termine (.gx .lsthero), Reiseart- und Anzeigenseiten (.gx .lhero2),
   Reiseseiten (.rs2 .trip-hero). Zusammenspiel: assets/js/gx-kopfbild.js setzt --kb-w, die Klasse .kb-breit und die Ebene .gx-kb-blur.
   Rückweg: Einbindung in functions.php (Block „Kopfbilder“) entfernen — dann gilt wieder das Seiten-CSS. */

/* 1) Schleier nur noch unten und schwächer — die Schrift trägt ihren eigenen Schatten */
html .gx .hero .shade{background:linear-gradient(180deg,rgba(10,18,36,0) 0%,rgba(10,18,36,0) 45%,rgba(10,18,36,.6) 100%)}
html .gx .lsthero .shade{background:linear-gradient(180deg,rgba(10,18,36,0) 0%,rgba(10,18,36,0) 35%,rgba(10,18,36,.66) 100%)}
html .gx-hero-host .gx-hero-veil{background:linear-gradient(90deg,rgba(10,18,36,.24) 0%,rgba(10,18,36,.1) 40%,rgba(10,18,36,0) 62%)}
/* Reiseseiten: am Handy bleibt der bisherige Schleier — dort steht die Schrift über fast dem ganzen Bild, und im Karussell kommen helle Hotelbilder (Prüfung 26.09.2026 16:05) */
@media (min-width:701px){html .rs2 .trip-hero .shade{background:linear-gradient(180deg,rgba(6,30,18,0) 0%,rgba(6,30,18,0) 42%,rgba(6,30,18,.66) 100%)}}
html .gx .hero h1,html .gx .lsthero h1{text-shadow:0 2px 18px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.4)}
html .gx .hero p,html .gx .hero .hero-sub,html .gx .lsthero p,html .rs2 .trip-hero p{text-shadow:0 0 2px rgba(0,0,0,.7),0 1px 3px rgba(0,0,0,.6),0 2px 14px rgba(0,0,0,.75),0 0 30px rgba(0,0,0,.45)}

/* 2) Über 1920 px Fensterbreite: Kopfbild wächst etwas in der Höhe mit … */
@media (min-width:1921px){
  html .gx .lsthero{min-height:clamp(640px,25vw,68svh)}
  html .gx .lhero2 figure{height:clamp(500px,21vw,56svh)}
  html .gx .lhero2 figure img{height:100%}
}

/* … und das scharfe Bild wird höchstens etwa 2,3 : 1 breit, mittig; die Seiten füllt eine unscharfe Kopie desselben Bildes */
.gx-kb-blur{display:none;position:absolute;inset:-40px;background-position:center;background-size:cover;background-repeat:no-repeat;filter:blur(28px) brightness(.78) saturate(1.08);pointer-events:none}
.kb-breit .gx-kb-blur{display:block}
html .gx .lhero2 figure{position:relative;overflow:hidden}
html .gx .lhero2 figure img{position:relative}
html .gx .hero.kb-breit img.bg,html .gx .hero.kb-breit .gx-hero-video,html .gx .lsthero.kb-breit img.bg,html .gx .lsthero.kb-breit .gx-hero-video,html .rs2 .trip-hero.kb-breit .hero-media .bg{left:50%;right:auto;width:var(--kb-w);transform:translateX(-50%)}
html .gx .lhero2.kb-breit figure img{width:var(--kb-w);margin-left:auto;margin-right:auto}
/* weiche Kante zur unscharfen Seitenfüllung */
html .kb-breit img.bg,html .kb-breit .gx-hero-video,html .kb-breit .hero-media .bg,html .lhero2.kb-breit figure img{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)}
/* Breitbild-Fassung vorhanden (gx-hero-video.js setzt .kb-vollbreit): randlos, keine unscharfen Ränder (Auftrag Inhaber 26.09.2026 17:45) */
.kb-vollbreit .gx-kb-blur{display:none}

/* Reiseseiten randlos (27.09.2026, Inhaber 16:26): ab 1921 px höher, damit das Bild kein Streifen wird — bei 3440 px etwa 3,2 : 1 wie die Breitfassung des Videos */
@media (min-width:1921px){html .rs2 .trip-hero{min-height:max(72svh,min(84svh,31.3vw))}}

/* Bildausschnitt je Karussellbild der Reiseseiten (27.09.2026, Inhaber 20:44/21:44: „der Elefant und die Löwen, die sind nur zur Hälfte zu sehen … kontrolliere alle Hero-Bilder“).
   Querbilder (1,3–1,6 : 1) zeigen im Kopf (Laptop ~2,3 : 1, 3440er 3,2 : 1) nur 50–75 % der Höhe, am Handy (hochkant) nur 40–50 % der Breite — hier liegt der Ausschnitt auf Kopf, Tier oder Gebäude.
   Geprüft: alle 26 Karussellbilder der 15 Reiseseiten; die übrigen passen mit 50 % 55 %. Erzeugt von: Cowork-Chat „Gardenroute-Kopfvideo einbauen“ am 27.09.2026 */
html .rs2 .trip-hero .hero-media .bg[src*="Gondwana2"]{object-position:50% 25%}
html .rs2 .trip-hero .hero-media .bg[src*="pinnacle-point-abschlag-am-meer-galerie"]{object-position:50% 35%}
html .rs2 .trip-hero .hero-media .bg[src*="botlierskop-wasserbock"]{object-position:50% 42%}
html .rs2 .trip-hero .hero-media .bg[src*="suedafrika-golfreise-pengiuns"]{object-position:50% 30%}
html .rs2 .trip-hero .hero-media .bg[src*="the-palace-of-the-lost-city"]{object-position:50% 45%}
html .rs2 .trip-hero .hero-media .bg[src*="kruegerpark-zwei-loewen-quer"]{object-position:50% 15%}
html .rs2 .trip-hero .hero-media .bg[src*="kruegerpark-elefant-auf-der-piste-quer"]{object-position:50% 20%}
@media (orientation:portrait){
  html .rs2 .trip-hero .hero-media .bg[src*="Gondwana2"]{object-position:35% 50%}
  html .rs2 .trip-hero .hero-media .bg[src*="pinnacle-point-abschlag-am-meer-galerie"]{object-position:25% 50%}
  html .rs2 .trip-hero .hero-media .bg[src*="botlierskop-wasserbock"]{object-position:85% 50%}
  html .rs2 .trip-hero .hero-media .bg[src*="suedafrika-golfreise-pengiuns"]{object-position:60% 50%}
  html .rs2 .trip-hero .hero-media .bg[src*="the-palace-of-the-lost-city"]{object-position:50% 50%}
  html .rs2 .trip-hero .hero-media .bg[src*="kruegerpark-zwei-loewen-quer"]{object-position:28% 50%}
  html .rs2 .trip-hero .hero-media .bg[src*="kruegerpark-elefant-auf-der-piste-quer"]{object-position:35% 50%}
}

/* 27.09.2026 Sun City → Krügerpark: Leopard und Elefanten statt Handybilder Löwe/Elefant */
html .rs2 .trip-hero .hero-media .bg[src*="suncity-kopf-leopard-auf-ast"]{object-position:50% 63%}
html .rs2 .trip-hero .hero-media .bg[src*="suncity-kopf-elefanten-abendlicht"]{object-position:50% 75%}
@media (orientation:portrait){
  html .rs2 .trip-hero .hero-media .bg[src*="suncity-kopf-leopard-auf-ast"]{object-position:45% 50%}
  html .rs2 .trip-hero .hero-media .bg[src*="suncity-kopf-elefanten-abendlicht"]{object-position:62% 50%}
}
/* 27.09.2026 Sun City → Krügerpark: Leopard Creek (Clubhaus) und Buhala (Elefanten an der Terrasse) */
html .rs2 .trip-hero .hero-media .bg[src*="suncity-kopf-leopard-creek-clubhaus"]{object-position:50% 10%}
html .rs2 .trip-hero .hero-media .bg[src*="suncity-kopf-buhala-elefanten-terrasse"]{object-position:50% 85%}
@media (orientation:portrait){
  html .rs2 .trip-hero .hero-media .bg[src*="suncity-kopf-leopard-creek-clubhaus"]{object-position:35% 50%}
  html .rs2 .trip-hero .hero-media .bg[src*="suncity-kopf-buhala-elefanten-terrasse"]{object-position:55% 50%}
}