/* 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}