/* ============================================================
   golfreizenzuidafrika.nl — gemeenschappelijk stijlblad
   Huiskleuren goHartl golftours: groen #99CA3C, blauw #234087
   ============================================================ */

:root{
  --groen:#99CA3C; --groen-d:#6f9a24;
  --blauw:#234087; --blauw-d:#17295a;
  --zand:#f6f4ee; --wit:#ffffff;
  --tekst:#1d2430; --grijs:#5c6675; --lijn:#e2ddd2;
  --max:1120px;
  color-scheme: light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--zand); color:var(--tekst);
  font-family:"Source Sans 3","Source Sans Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--blauw)}
h1,h2,h3{font-family:Merriweather,Georgia,"Times New Roman",serif; line-height:1.2; margin:0 0 .5em; color:var(--blauw); font-weight:700}
h2{font-size:clamp(1.5rem,3vw,2.1rem)}
h3{font-size:1.15rem}
.wrap{max-width:var(--max); margin:0 auto; padding-inline:20px}
section{padding-block:clamp(44px,6vw,76px)}
.lead{font-size:1.12rem; color:var(--grijs); max-width:64ch}
.wit{background:var(--wit)}
.midden{text-align:center}
.midden .lead{margin-inline:auto}


/* --- kop --------------------------------------------------- */
header{background:var(--blauw); color:#fff; position:sticky; top:0; z-index:40}
.kop{display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:12px}
.merk{display:flex; align-items:center; gap:14px; text-decoration:none; color:#fff}
.merk img{height:36px; width:auto}
.merk .naam{font-family:Merriweather,Georgia,serif; font-size:1.02rem; line-height:1.15; font-weight:700}
.merk .naam span{display:block; font-size:.68rem; font-weight:400; letter-spacing:.08em; text-transform:uppercase; opacity:.72}
nav ul{display:flex; gap:24px; list-style:none; margin:0; padding:0; font-size:.94rem}
nav a{color:#fff; text-decoration:none; opacity:.88}
nav a:hover,nav a[aria-current="page"]{opacity:1; text-decoration:underline; text-underline-offset:5px}
.kop .bel{background:var(--groen); color:#14300a; padding:9px 18px; border-radius:999px; font-weight:700; text-decoration:none; font-size:.92rem; white-space:nowrap}
/* Unter 980 px bleibt die Navigation sichtbar: sie rutscht als eigene Zeile
   unter Logo und Knopf. Kein Hamburger, kein JavaScript — geaendert 15.09.2026;
   vorher war sie hier ausgeblendet, ohne Ersatz. */
@media(max-width:980px){
  .kop{flex-wrap:wrap; row-gap:10px}
  .merk{flex:1 1 auto}
  .kop .bel{order:2}
  nav{order:3; flex:1 0 100%; border-top:1px solid rgba(255,255,255,.18); padding-top:10px}
  nav ul{gap:20px; flex-wrap:wrap; font-size:.9rem}
}
@media(max-width:430px){
  .merk img{height:30px}
  .merk .naam{font-size:.9rem}
  .kop .bel{padding:8px 14px; font-size:.84rem}
  nav ul{gap:14px}
}

/* kleingedruckte Zusatzzeile unter Absaetzen und Formularen */
.fijn{font-size:.9rem; color:var(--grijs); line-height:1.55; max-width:70ch; margin:14px 0 22px}
.hero .fijn{color:rgba(255,255,255,.82); margin-bottom:0}
.fijn a{color:inherit}

/* --- hero -------------------------------------------------- */
.hero{position:relative; min-height:clamp(400px,64vh,620px); display:flex; align-items:flex-end; color:#fff; overflow:hidden; background:var(--blauw-d)}
.hero.klein{min-height:clamp(260px,38vh,380px)}
.hero img.bg,.hero video.bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:1}
.hero.klein img.bg{opacity:.62}
.hero::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(23,41,90,.52) 0%,rgba(23,41,90,0) 17%,rgba(23,41,90,0) 44%,rgba(23,41,90,.52) 76%,rgba(23,41,90,.92) 100%)}
.hero .wrap{position:relative; z-index:2; padding-block:clamp(34px,6vw,60px)}
.hero .kicker{display:inline-block; background:var(--groen); color:#14300a; font-weight:700; font-size:.82rem; letter-spacing:.09em; text-transform:uppercase; padding:6px 14px; border-radius:4px; margin-bottom:18px}
.hero h1{color:#fff; font-size:clamp(1.9rem,5vw,3.4rem); margin-bottom:.35em; text-shadow:0 2px 24px rgba(0,0,0,.35)}
.hero p{font-size:clamp(1.02rem,2vw,1.28rem); max-width:52ch; margin:0 0 26px; text-shadow:0 1px 12px rgba(0,0,0,.4)}
.knoppen{display:flex; gap:14px; flex-wrap:wrap}
.btn{display:inline-block; padding:14px 26px; border-radius:6px; text-decoration:none; font-weight:700; font-size:1rem; border:2px solid transparent}
.btn-groen{background:var(--groen); color:#14300a; border-color:var(--groen)}
.btn-groen:hover{background:#a9d952}
.btn-lijn{border-color:rgba(255,255,255,.65); color:#fff}
.btn-lijn:hover{background:rgba(255,255,255,.14)}
.btn-blauw{background:var(--blauw); color:#fff; border-color:var(--blauw)}
.btn-blauw:hover{background:var(--blauw-d)}

/* --- feitenbalk -------------------------------------------- */
.feiten{background:var(--wit); border-bottom:1px solid var(--lijn)}
.feiten .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--lijn); padding:0}
.feit{background:var(--wit); padding:22px 24px; text-align:center}
.feit b{display:block; font-family:Merriweather,Georgia,serif; font-size:1.5rem; color:var(--blauw); line-height:1.1}
.feit span{font-size:.84rem; color:var(--grijs); letter-spacing:.04em; text-transform:uppercase}
@media(max-width:760px){.feiten .wrap{grid-template-columns:repeat(2,1fr)}}

/* --- duo / troeven ----------------------------------------- */
.duo{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,56px); align-items:center}
.duo.om > img{order:-1}
@media(max-width:860px){.duo{grid-template-columns:1fr}.duo.om > img{order:0}}
.duo img{border-radius:10px; box-shadow:0 14px 40px rgba(23,41,90,.14)}

.troeven{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:34px}
@media(max-width:860px){.troeven{grid-template-columns:1fr}}
.troef{background:var(--wit); border:1px solid var(--lijn); border-top:4px solid var(--groen); border-radius:8px; padding:26px}
.troef h3{margin-bottom:.4em}
.troef p{margin:0; color:var(--grijs); font-size:.97rem}

/* --- reiskaart op de startpagina ---------------------------- */
.reiskaart{display:grid; grid-template-columns:1.1fr 1fr; background:var(--wit); border:1px solid var(--lijn); border-radius:12px; overflow:hidden; box-shadow:0 18px 50px rgba(23,41,90,.12); margin-top:30px}
@media(max-width:860px){.reiskaart{grid-template-columns:1fr}}
.reiskaart img{height:100%; min-height:280px; object-fit:cover}
.reiskaart .inhoud{padding:clamp(26px,3.5vw,40px)}
.reiskaart .wanneer{font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; color:var(--groen-d); font-weight:700}
.reiskaart h3{font-size:clamp(1.3rem,2.6vw,1.8rem); margin:.3em 0 .5em}
.reiskaart .kort{display:flex; gap:22px; flex-wrap:wrap; margin:18px 0 22px; font-size:.92rem; color:var(--grijs)}
.reiskaart .kort b{color:var(--blauw); font-family:Merriweather,Georgia,serif; display:block; font-size:1.2rem; line-height:1}
.reiskaart .vanaf{font-family:Merriweather,Georgia,serif; font-size:1.9rem; color:var(--blauw); margin-bottom:18px}
.reiskaart .vanaf small{display:block; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--grijs); font-family:inherit; margin-top:4px}

/* --- stappen ------------------------------------------------ */
.stappen{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:34px; counter-reset:stap}
@media(max-width:860px){.stappen{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.stappen{grid-template-columns:1fr}}
.stap{position:relative; padding-top:14px}
.stap::before{counter-increment:stap; content:counter(stap); display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; background:var(--groen); color:#14300a; font-weight:700; font-family:Merriweather,Georgia,serif; margin-bottom:14px}
.stap h3{font-size:1.02rem; margin-bottom:.35em}
.stap p{margin:0; font-size:.94rem; color:var(--grijs)}

/* --- programma --------------------------------------------- */
.dagen{margin-top:34px; border-top:1px solid var(--lijn)}
.dag{display:grid; grid-template-columns:132px 1fr; gap:24px; padding:18px 0; border-bottom:1px solid var(--lijn); align-items:baseline}
.dag .datum{font-weight:700; color:var(--blauw); font-size:.93rem}
.dag .datum em{display:block; font-style:normal; font-weight:400; color:var(--grijs); font-size:.82rem; text-transform:uppercase; letter-spacing:.06em}
.dag .tekst{color:var(--grijs)}
.dag .tekst strong{color:var(--tekst)}
.dag.golf{background:linear-gradient(90deg,rgba(153,202,60,.12),rgba(153,202,60,0) 55%)}
@media(max-width:640px){.dag{grid-template-columns:1fr; gap:4px}}

/* --- banen / hotels ----------------------------------------- */
.banen{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:18px; margin-top:32px}
.baan{background:var(--wit); border:1px solid var(--lijn); border-radius:8px; overflow:hidden}
.baan img{height:130px; width:100%; object-fit:cover}
.baan div{padding:14px 16px}
.baan b{display:block; color:var(--blauw); font-family:Merriweather,Georgia,serif}
.baan span{font-size:.86rem; color:var(--grijs)}

.hotels{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:32px}
@media(max-width:860px){.hotels{grid-template-columns:1fr}}
.hotel{background:var(--wit); border-radius:10px; overflow:hidden; border:1px solid var(--lijn)}
.hotel img{height:190px; width:100%; object-fit:cover}
.hotel .h{padding:20px}
.hotel .n{font-size:.8rem; text-transform:uppercase; letter-spacing:.07em; color:var(--groen-d); font-weight:700}
.hotel h3{margin:.3em 0 .35em}
.hotel p{margin:0; font-size:.95rem; color:var(--grijs)}

/* --- prijs --------------------------------------------------- */
.prijs{background:var(--blauw); color:#fff}
.prijs h2{color:#fff}
.prijskaart{background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.22); border-radius:12px; padding:clamp(26px,4vw,40px); display:grid; grid-template-columns:auto 1fr; gap:clamp(26px,4vw,48px); align-items:center; margin-top:8px}
@media(max-width:800px){.prijskaart{grid-template-columns:1fr}}
.bedrag{font-family:Merriweather,Georgia,serif; font-size:clamp(2.6rem,6vw,3.6rem); line-height:1; color:var(--groen)}
.bedrag small{display:block; font-family:inherit; font-size:.9rem; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.75); margin-top:10px; font-weight:400}
.incl{display:grid; grid-template-columns:1fr 1fr; gap:6px 28px; list-style:none; margin:0; padding:0; font-size:.97rem}
@media(max-width:640px){.incl{grid-template-columns:1fr}}
.incl li{padding-left:26px; position:relative; color:rgba(255,255,255,.92)}
.incl li::before{content:"✓"; position:absolute; left:0; color:var(--groen); font-weight:700}
.nietincl{margin-top:26px; font-size:.93rem; color:rgba(255,255,255,.7)}
.nietincl + .nietincl{margin-top:14px}
.nietincl b{color:#fff}

/* --- eenvoudige tekstpagina (colofon, privacy, voorwaarden) - */
.tekst{max-width:76ch}
.tekst h2{margin-top:2em; font-size:1.35rem}
.tekst h2:first-child{margin-top:0}
.tekst h3{margin-top:1.6em; font-size:1.02rem; color:var(--tekst)}
.tekst p,.tekst li{color:var(--tekst)}
.tekst dl{display:grid; grid-template-columns:auto 1fr; gap:6px 22px; margin:0 0 1.4em}
.tekst dt{color:var(--grijs); font-size:.94rem}
.tekst dd{margin:0}
@media(max-width:560px){.tekst dl{grid-template-columns:1fr; gap:2px 0}.tekst dd{margin-bottom:10px}}
.tekst .open{background:#fff5f5; border-left:4px solid #8a1c1c; padding:12px 16px; margin:1.4em 0; font-size:.93rem}

/* --- de moderne ansichtkaart: telefoon in de hand ------------- */
.kaart-sectie{position:relative; overflow:hidden; background:#0d1830; color:#fff}
.kaart-sectie .achtergrond{position:absolute; inset:-40px; width:calc(100% + 80px); height:calc(100% + 80px);
  object-fit:cover; filter:blur(22px) saturate(.8) brightness(.55); transform:scale(1.08)}
.kaart-sectie::after{content:""; position:absolute; inset:0;
  background:radial-gradient(80% 60% at 30% 40%,rgba(13,24,48,.35),rgba(13,24,48,.92))}
.kaart-sectie .wrap{position:relative; z-index:2}
.kaart-sectie h2{color:#fff}
.kaart-sectie .lead{color:rgba(255,255,255,.82)}
.kaart-sectie p{color:rgba(255,255,255,.82)}

.postkaart{display:grid; grid-template-columns:minmax(230px,300px) 1fr; gap:clamp(32px,6vw,70px); align-items:center}
@media(max-width:820px){.postkaart{grid-template-columns:1fr; justify-items:center; text-align:left}}

.telefoon{position:relative; width:100%; max-width:290px; aspect-ratio:9/19.2;
  background:#16171a; border-radius:42px; padding:11px;
  box-shadow:0 2px 0 rgba(255,255,255,.18) inset, 0 34px 70px rgba(0,0,0,.55), 0 0 0 2px rgba(255,255,255,.06);
  transform:rotate(-3deg)}
.telefoon::before{content:""; position:absolute; top:22px; left:50%; transform:translateX(-50%);
  width:86px; height:22px; background:#16171a; border-radius:14px; z-index:3}
.scherm{position:relative; width:100%; height:100%; border-radius:32px; overflow:hidden; background:#000}
.scherm img,.scherm video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.scherm img{opacity:0; animation:wissel 24s infinite}
.scherm img:nth-child(1){animation-delay:0s}
.scherm img:nth-child(2){animation-delay:6s}
.scherm img:nth-child(3){animation-delay:12s}
.scherm img:nth-child(4){animation-delay:18s}
@keyframes wissel{
  0%{opacity:0; transform:scale(1.04)}
  3%{opacity:1}
  25%{opacity:1; transform:scale(1)}
  28%{opacity:0}
  100%{opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .scherm img{animation:none; opacity:0}
  .scherm img:nth-child(1){opacity:1}
}
/* hand die de telefoon vasthoudt — optioneel, als PNG met transparantie */
.telefoon .hand{position:absolute; bottom:-6%; left:-18%; width:78%; z-index:4; pointer-events:none}

/* --- duitstalig blok ---------------------------------------- */
.duits{background:#eef1f7; border:1px solid #d6dce9; border-radius:10px; padding:clamp(24px,3vw,36px)}
.duits h2{font-size:1.45rem}
.keuze{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:22px}
@media(max-width:760px){.keuze{grid-template-columns:1fr}}
.keuze > div{background:var(--wit); border:1px solid var(--lijn); border-radius:8px; padding:20px}
.keuze h3{font-size:1.02rem; margin-bottom:.4em}
.keuze p{font-size:.94rem; color:var(--grijs); margin:0 0 14px}
.keuze a{font-weight:700; font-size:.94rem}

/* --- vragen (FAQ) -------------------------------------------- */
.vragen{margin-top:30px; max-width:78ch}
.vraag{background:var(--wit); border:1px solid var(--lijn); border-radius:8px; margin-bottom:12px; overflow:hidden}
.vraag summary{padding:18px 22px; cursor:pointer; font-weight:700; color:var(--blauw); font-family:Merriweather,Georgia,serif; list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:center}
.vraag summary::-webkit-details-marker{display:none}
.vraag summary::after{content:"+"; font-size:1.5rem; color:var(--groen-d); font-family:inherit; line-height:1; flex:none}
.vraag[open] summary::after{content:"–"}
.vraag .antwoord{padding:0 22px 20px; color:var(--grijs)}
.vraag .antwoord p{margin:0 0 .8em}
.vraag .antwoord p:last-child{margin-bottom:0}
.vraagkop{margin-top:44px; font-size:.82rem; letter-spacing:.09em; text-transform:uppercase; color:var(--groen-d); font-weight:700}

/* --- tekstblok (over ons) ------------------------------------ */
.tekstblok{max-width:72ch}
.tekstblok p{margin:0 0 1.1em}
.citaat{border-left:4px solid var(--groen); padding:6px 0 6px 22px; margin:30px 0; font-family:Merriweather,Georgia,serif; font-size:1.15rem; color:var(--blauw); line-height:1.5}

/* --- formulier ----------------------------------------------- */
.form{background:var(--wit); border:1px solid var(--lijn); border-radius:12px; padding:clamp(24px,3.5vw,40px); margin-top:30px}
.rij{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media(max-width:700px){.rij{grid-template-columns:1fr}}
label{display:block; font-size:.88rem; font-weight:700; color:var(--blauw); margin-bottom:6px}
input,select,textarea{width:100%; padding:12px 14px; border:1px solid #c9c4b8; border-radius:6px; font:inherit; font-size:.97rem; background:#fff; color:var(--tekst)}
input:focus,select:focus,textarea:focus{outline:3px solid rgba(35,64,135,.25); border-color:var(--blauw)}
.veld{margin-bottom:18px}
.akkoord{display:flex; gap:12px; align-items:flex-start; font-size:.88rem; color:var(--grijs); margin:6px 0 22px; font-weight:400}
.akkoord input{width:auto; margin-top:3px; flex:none}
.hp{position:absolute; left:-9999px}
button{background:var(--groen); color:#14300a; border:0; padding:15px 34px; font:inherit; font-weight:700; font-size:1.02rem; border-radius:6px; cursor:pointer}
button:hover{background:#a9d952}

/* --- slotoproep ---------------------------------------------- */
.oproep{background:var(--blauw); color:#fff; text-align:center}
.oproep h2{color:#fff}
.oproep p{color:rgba(255,255,255,.85); max-width:56ch; margin:0 auto 26px}

/* --- voet ----------------------------------------------------- */
footer{background:var(--blauw-d); color:rgba(255,255,255,.8); font-size:.92rem}
footer .wrap{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:36px; padding-block:48px}
@media(max-width:760px){footer .wrap{grid-template-columns:1fr}}
footer h4{color:#fff; font-family:Merriweather,Georgia,serif; font-size:1rem; margin:0 0 12px}
footer a{color:var(--groen); text-decoration:none}
footer a:hover{text-decoration:underline}
footer ul{list-style:none; margin:0; padding:0}
footer li{margin-bottom:6px}
footer img.logo{height:40px; margin-bottom:16px}
.slot{border-top:1px solid rgba(255,255,255,.14); padding-block:18px; font-size:.84rem; color:rgba(255,255,255,.55); text-align:center}

/* --- Siegelzeile im Fuss -------------------------------------
   Auflagen: IAGTO nur mit "Member of" und nur das kategoriegenaue
   Zeichen; bei Ende der Mitgliedschaft entfernen. PGA Professional
   ist die persoenliche Qualifikation von Gerd Schoenberg, seit 1986. */
.zegels{background:var(--wit); border-top:1px solid var(--lijn)}
.zegels .wrap{display:flex; align-items:center; gap:26px; flex-wrap:wrap;
  padding-block:22px}
.zegels img{height:58px; width:auto}
/* nur die Logo-Links (direkte Kinder) — nicht der Link im Fliesstext:
   display:block + line-height:0 liess dort die Zeilen ineinanderlaufen */
.zegels .wrap > a{display:block; line-height:0}
.zegels .wrap > a:hover img{opacity:1}
.zegels p{margin:0; flex:1 1 260px; min-width:0; font-size:.84rem; line-height:1.5;
  color:var(--grijs)}
.zegels p strong{color:var(--blauw); font-weight:600}
.zegels p a{color:var(--blauw); text-underline-offset:3px}
@media(max-width:560px){
  .zegels .wrap{gap:18px}
  .zegels img{height:46px}
  .zegels p{flex-basis:100%}
}

/* Zeile im Fliesstext, heller Grund */
.lidmaatschap{display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  background:var(--wit); border:1px solid var(--lijn); border-radius:10px;
  padding:18px 22px; margin:26px 0}
.lidmaatschap img{width:132px; height:auto; flex:none}
.lidmaatschap p{margin:0; flex:1 1 260px; min-width:0; font-size:.95rem; color:var(--grijs)}

/* --- Social-Verweise in der Fusszeile ------------------------
   Nur die beiden Geschaeftskanaele. Das persoenliche Facebook-Profil
   gehoert nicht auf eine Firmenseite — auf golfausflug.de steht es
   ebenfalls nicht. Beitraege sind deutsch, das steht dabei. */
.sociaal{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:16px}
.sociaal a{display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border:1px solid rgba(255,255,255,.28); border-radius:50%;
  color:rgba(255,255,255,.82); text-decoration:none}
.sociaal a:hover{border-color:var(--groen); color:var(--groen)}
.sociaal span{flex:1 1 150px; min-width:0; font-size:.78rem; line-height:1.45;
  color:rgba(255,255,255,.52)}


/* ---- Zwevend beeld: het beeld blijft staan, de tekst trekt eroverheen ---- */
.zweef{position:relative; padding-block:0; background:var(--blauw-d)}
.zweef-beeld{position:sticky; top:0; height:74vh; height:74svh; min-height:420px; overflow:hidden}
.zweef-beeld img{width:100%; height:100%; object-fit:cover}
.zweef-beeld::after{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(11,23,51,.80) 0%,rgba(11,23,51,.46) 48%,rgba(11,23,51,.12) 100%)}
.zweef-tekst{position:relative; margin-top:-74vh; margin-top:-74svh}
.zweef .zin{min-height:46vh; min-height:46svh; display:flex; align-items:center;
  padding-inline:clamp(20px,7vw,120px)}
.zweef .zin:first-child{min-height:74vh; min-height:74svh; min-height:max(74svh,420px)}
.zweef .zin p{margin:0; max-width:17ch; color:#fff; font-weight:700; line-height:1.14;
  font-size:clamp(28px,4.6vw,56px); letter-spacing:-.02em;
  text-shadow:0 2px 24px rgba(8,16,38,.55)}
.zweef .zin:not(:first-child) p{max-width:22ch; font-weight:600; font-size:clamp(22px,3.1vw,38px); line-height:1.26}
@supports (animation-timeline: view()){
  .zweef .zin p{animation:opdoemen linear both; animation-timeline:view(); animation-range:entry 10% cover 48%}
  @keyframes opdoemen{from{opacity:0; transform:translateY(26px)} to{opacity:1; transform:none}}
}
@media (prefers-reduced-motion: reduce){
  .zweef-beeld{position:static; height:auto}
  .zweef-tekst{margin-top:0}
  .zweef .zin,.zweef .zin:first-child{min-height:0; padding-block:26px}
  .zweef .zin p{animation:none}
}

/* ---- Baanpagina's ---------------------------------------------------- */
a.baan{display:block; text-decoration:none; color:inherit; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
a.baan:hover,a.baan:focus-visible{transform:translateY(-3px); border-color:var(--groen);
  box-shadow:0 10px 26px rgba(23,41,90,.14)}
a.baan img{transition:transform .5s ease}
a.baan:hover img{transform:scale(1.045)}
.baan{overflow:hidden}

.baanfeiten{display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  margin:0; background:var(--lijn); border:1px solid var(--lijn); border-radius:8px; overflow:hidden}
.baanfeiten>div{background:var(--wit); padding:18px 20px}
.baanfeiten dt{font-size:.78rem; letter-spacing:.09em; text-transform:uppercase; color:var(--groen); font-weight:700}
.baanfeiten dd{margin:6px 0 0; color:var(--blauw); line-height:1.45}

.baanfilm{padding-block:0}
.baanfilm video{width:100%; height:auto; display:block; border-radius:10px;
  box-shadow:0 14px 40px rgba(23,41,90,.18)}
.baanfilm .fijn{margin-top:12px}
img.breed{width:100%; height:auto; display:block; border-radius:10px;
  box-shadow:0 14px 40px rgba(23,41,90,.14)}

.hero.klein h1+p{max-width:46ch; margin:10px 0 0; font-size:1.05rem; color:rgba(255,255,255,.9)}

/* Baan-Hero: eigenes Bild in voller Deckkraft, Verlauf nur wo Schrift steht */
.hero.baanhero img.bg{opacity:1}
.hero.baanhero::after{background:linear-gradient(180deg,rgba(23,41,90,.50) 0%,rgba(23,41,90,.10) 30%,
  rgba(23,41,90,.46) 70%,rgba(23,41,90,.90) 100%)}
.hero.baanhero:not(:has(img.bg)){background:linear-gradient(135deg,var(--blauw-d) 0%,var(--blauw) 55%,#1d6b4a 100%)}

/* Kachel ohne Bild — Platzhalter, solange kein eigenes Foto ausgewählt ist */
.geenbeeld{display:block; height:130px; width:100%;
  background:linear-gradient(135deg,var(--blauw-d) 0%,var(--blauw) 55%,#1d6b4a 100%)}

@media (max-width:1000px){.baanfeiten{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.baanfeiten{grid-template-columns:1fr}}

/* Kopfbild der Baan-Seiten: hoch genug, damit vom Bild etwas zu sehen ist.
   Wächst mit der Fensterbreite mit — sonst bleibt auf breiten Schirmen nur ein Streifen. */
.hero.baanhero{min-height:clamp(360px,44vw,660px)}
.hero.baanhero .wrap{padding-bottom:clamp(24px,4vw,52px)}
.hero.baanhero h1+p{max-width:38ch; text-wrap:balance}
.hero.baanhero h1{text-wrap:balance}

/* ==============================================================
   Angleichung an golfausflug.de (Relaunch September 2026)
   Erzeugt von: Cowork-Chat „NL-Seite an deutsches Design angleichen" am 26.09.2026
   Vorbild: Quellen/Code/Startseite v2 2026-09-24/startseite-v3.css
   Schriften LOKAL (Open Sans, Merriweather; SIL OFL) — keine Google Fonts.
   ============================================================== */
@font-face{font-family:"Open Sans GA";font-style:normal;font-weight:400;font-display:swap;src:url(lettertypen/open-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Open Sans GA";font-style:normal;font-weight:600;font-display:swap;src:url(lettertypen/open-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Open Sans GA";font-style:normal;font-weight:700;font-display:swap;src:url(lettertypen/open-sans-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Open Sans GA";font-style:normal;font-weight:800;font-display:swap;src:url(lettertypen/open-sans-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Merriweather GA";font-style:normal;font-weight:300;font-display:swap;src:url(lettertypen/merriweather-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:"Merriweather GA";font-style:normal;font-weight:700;font-display:swap;src:url(lettertypen/merriweather-latin-700-normal.woff2) format("woff2")}

:root{
  --groen:#99CA3C; --blauw:#234087; --blauw-d:#101d3a; --nacht:#101d3a;
  --donkergroen:#0f4d2e; --goud:#9a6b16; --zand:#f7f5ef; --tekst:#1c2620;
  --grijs:#44514a; --lijn:#e3ded2; --max:1360px;
  --serif:"Merriweather GA",Merriweather,Georgia,"Times New Roman",serif;
  --sans:"Open Sans GA","Open Sans","Segoe UI",Arial,sans-serif;
}
body{font-family:var(--sans); line-height:1.7}
@media(min-width:1300px){body{font-size:18px}}
h1,h2,h3{font-family:var(--serif)}
h2{font-size:clamp(1.9rem,2.8vw,2.6rem)}
.wrap{padding-inline:28px}
@media(max-width:640px){.wrap{padding-inline:18px}}
.btn{display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:12px 30px; border-radius:4px; font-size:1.02rem; line-height:1.2; text-align:center}
.btn-groen:hover{background:var(--groen); filter:brightness(1.06)}
button{border-radius:4px}
.eyebrow{display:block; font-weight:700; font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--goud); margin:0 0 1em}

/* --- Kopf wie golfausflug.de: nachtblaue Servicezeile + weiße Navigation --- */
header.kop2{position:sticky; top:0; z-index:40; background:none; color:var(--tekst)}
.servicebalk{background:var(--nacht); color:#cfd6e6; font-size:.86rem}
.servicebalk .wrap{display:flex; justify-content:space-between; align-items:center; gap:8px 20px; min-height:40px; flex-wrap:wrap}
.servicebalk a{color:#fff; text-decoration:none}
.servicebalk .tel a{font-weight:700; margin-right:22px}
.servicebalk .taal{display:flex; gap:10px; align-items:center}
.servicebalk .taal a{opacity:.85; text-decoration:underline; text-underline-offset:3px}
.servicebalk .taal a:hover{opacity:1}
.servicebalk .taal b{color:#fff; font-weight:700}
.hoofdnav{background:#fff; border-bottom:1px solid var(--lijn)}
.hoofdnav .wrap{display:flex; align-items:center; gap:30px; min-height:76px; position:relative}
.hoofdnav .logo{line-height:0}
.hoofdnav .logo img{height:52px; width:auto}
header.kop2 nav{order:0; flex:none; border:0; padding:0}
.hoofdnav .wrap > nav{margin-left:auto; display:flex; gap:6px; align-items:center}
header.kop2 nav a{display:inline-flex; align-items:center; min-height:48px; padding:0 14px; color:var(--tekst); text-decoration:none; font-weight:600; font-size:1.02rem; border-bottom:3px solid transparent; opacity:1}
header.kop2 nav a:hover,header.kop2 nav a[aria-current="page"]{color:var(--blauw); border-bottom-color:var(--groen); text-decoration:none}
header.kop2 nav a.btn{margin-left:14px; padding:10px 22px; border:0; color:#14300a}
.mnav{display:none; margin-left:auto}
.mnav summary{list-style:none; cursor:pointer; min-height:48px; display:flex; align-items:center; gap:10px; font-weight:700; color:var(--blauw); padding:0 6px}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary::before{content:""; width:22px; height:14px; border-top:3px solid var(--blauw); border-bottom:3px solid var(--blauw); box-shadow:inset 0 3px 0 0 #fff,inset 0 6px 0 0 var(--blauw)}
header.kop2 .mnav nav{position:absolute; left:0; right:0; top:100%; background:#fff; border-bottom:1px solid var(--lijn); display:flex; flex-direction:column; padding:8px 28px 20px; box-shadow:0 12px 24px rgba(16,29,58,.12)}
header.kop2 .mnav nav a{border-bottom:1px solid var(--lijn); padding:0}
header.kop2 .mnav nav a.btn{margin:14px 0 0; justify-content:center; border:0}
@media(max-width:1100px){.hoofdnav .wrap > nav{display:none} .mnav{display:block}}
@media(max-width:640px){
  .servicebalk .tel a{margin-right:14px}
  .servicebalk .tel .de{display:none}
  .hoofdnav .wrap{min-height:64px}
  .hoofdnav .logo img{height:40px}
}

/* --- Kopfbild: volle Höhe, Film ohne Schleier, Verlauf nur unten --- */
.hero{min-height:80svh; background:var(--nacht)}
.hero.klein{min-height:clamp(300px,46vh,460px)}
.hero.klein img.bg{opacity:1}
.hero::after{background:linear-gradient(180deg,rgba(16,29,58,.10) 0%,rgba(16,29,58,.15) 40%,rgba(10,18,36,.78) 100%)}
.hero .wrap{width:100%; padding-top:120px; padding-bottom:74px}
.hero.klein .wrap{padding-top:90px; padding-bottom:48px}
.hero .kicker{background:none; color:#e3d7a8; padding:0; border-radius:0; font-size:.9rem; letter-spacing:.2em; text-shadow:0 1px 6px rgba(0,0,0,.6); margin-bottom:1em}
.hero h1{font-family:var(--sans); font-weight:800; font-size:clamp(2.4rem,5vw,4.3rem); line-height:1.08; letter-spacing:-.01em; max-width:860px}
.hero.klein h1,.hero.baanhero h1{font-size:clamp(2.1rem,4vw,3.4rem)}
.hero p{max-width:680px; color:#f1f3f8; font-size:clamp(1.1rem,1.5vw,1.35rem)}
.hero .knoppen{gap:22px; align-items:center}
.hero-pauze{position:absolute; right:18px; bottom:18px; z-index:3; width:44px; height:44px; border-radius:50%; border:2px solid rgba(255,255,255,.8); background:rgba(16,29,58,.45); color:#fff; padding:0; font-size:0; cursor:pointer}
.hero-pauze::before{content:""; display:block; margin:auto; width:12px; height:14px; border-left:4px solid #fff; border-right:4px solid #fff; box-sizing:border-box}
.hero-pauze.speelt-niet::before{width:0; height:0; border-left:13px solid #fff; border-top:8px solid transparent; border-bottom:8px solid transparent; border-right:0; margin-left:16px}
@media(prefers-reduced-motion:reduce){.hero video.bg{display:none}}

/* --- Versprechen-Leiste (wie golfausflug.de) --- */
.belofte{background:var(--donkergroen); color:#eef3ea}
.belofte ul{list-style:none; margin:0 auto; max-width:var(--max); padding:22px 28px; display:flex; flex-wrap:wrap; justify-content:center; gap:12px 0}
.belofte li{font-size:.98rem; font-weight:600; padding:4px 30px; display:flex; align-items:center; gap:10px}
.belofte li+li{border-left:1px solid rgba(255,255,255,.25)}
.belofte li::before{content:"✓"; color:var(--groen); font-weight:800; font-size:1.05rem}
@media(max-width:760px){.belofte ul{flex-direction:column; align-items:flex-start; padding:18px 22px}.belofte li{padding:3px 0}.belofte li+li{border-left:0}}

/* --- Spitzenstellung (Grundsatz 19.09.2026: nur in der Messgröße, mit Stand) --- */
.claim{font-size:1.12rem; color:var(--tekst); border-left:4px solid var(--groen); padding:4px 0 4px 18px; margin:22px 0 4px; max-width:62ch}
.claim-noot{font-size:.82rem; color:#5d6862; margin:4px 0 0 22px}

/* --- Postkarten-Abschnitt: Film im freigestellten Foto „Hand hält Handy" --- */
.postkaart{grid-template-columns:minmax(260px,400px) 1fr}
.handvideo{margin:0; width:100%; max-width:400px}
.handvideo .handy{position:relative; width:100%; aspect-ratio:941/1672}
.handvideo .scherm2{position:absolute; inset:0; z-index:1; -webkit-mask:url(beelden/handy-hand-maske.webp) center/100% 100% no-repeat; mask:url(beelden/handy-hand-maske.webp) center/100% 100% no-repeat}
.handvideo .scherm2 video{position:absolute; left:49.53%; top:43.24%; width:66%; height:76.4%; max-width:none; transform:translate(-50%,-50%) rotate(10.5deg); object-fit:cover; background:#000}
.handvideo img.hand{position:absolute; inset:0; width:100%; height:100%; max-width:none; z-index:2; pointer-events:none; -webkit-mask:linear-gradient(90deg,transparent 2%,#000 26%); mask:linear-gradient(90deg,transparent 2%,#000 26%)}
@media(max-width:820px){.handvideo{max-width:300px}}

/* --- Über uns: Siegel freigestellt, ohne weißen Kasten --- */
.lidmaatschap img{background:none}
.lidmaatschap img.pga{width:96px}

/* --- Fuß wie golfausflug.de: Nachtblau, Links hell --- */
footer{background:var(--nacht); color:#aeb8cf; font-size:.95rem}
footer .wrap{padding-block:64px 44px; gap:44px}
footer h4{font-family:var(--sans); color:#fff; font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; margin:0 0 14px}
footer a{color:#dfe4ef}
footer a:hover{color:#fff}
footer img.logo{height:46px; margin-bottom:18px}
.zegels img.pga{height:58px}
.oproep{background:var(--blauw)}

/* --- Golftage ohne Emoji (Wunsch des Inhabers 16.09.2026) --- */
.dag.golf .tekst strong::before{content:none!important}

/* ==============================================================
   Nachtrag 26.09.2026 mittags — Rückmeldung des Inhabers 12:52
   (1) Bilder heller: Verlauf nur noch unten und schwächer, Lesbarkeit über Schriftschatten
   (2) Schwebendes Bild füllt den Bildschirm unter dem Kopf — kein blauer Balken mehr
   (3) Breite Bildschirme: Bild/Film nicht breiter als ca. 2,2 : 1, Seiten mit
       unscharfer Kopie desselben Bildes gefüllt; Bildausschnitt auf das Grün gesetzt
   ============================================================== */
:root{--kop:116px}
@media(max-width:640px){:root{--kop:104px}}

.hero::after,.hero.baanhero::after{background:linear-gradient(180deg,rgba(10,18,36,0) 0%,rgba(10,18,36,0) 50%,rgba(10,18,36,.55) 100%)}
.hero h1{text-shadow:0 2px 18px rgba(0,0,0,.45)}
.hero p,.hero .kicker{text-shadow:0 1px 10px rgba(0,0,0,.6)}

/* Kopffilm der Startseite */
.hero.kopfilm::before{content:""; position:absolute; inset:-40px; background:url(beelden/kop-pinnacle.jpg) center/cover; filter:blur(30px) brightness(.8)}
.hero.kopfilm video.bg{left:50%; right:auto; width:min(100%, calc(80svh * 2.2)); transform:translateX(-50%)}

/* Schwebendes Bild */
.zweef-beeld{top:var(--kop); height:calc(100svh - var(--kop)); min-height:420px; background:var(--nacht)}
.zweef-beeld::before{content:""; position:absolute; inset:-40px; background:url(beelden/zweef-pinnacle.jpg) center 80%/cover; filter:blur(30px) brightness(.8)}
.zweef-beeld img{position:relative; display:block; margin-inline:auto; width:min(100%, calc((100svh - var(--kop)) * 2.2)); height:100%; object-position:center 82%}
.zweef-beeld::after{background:linear-gradient(90deg,rgba(10,18,36,.55) 0%,rgba(10,18,36,.22) 40%,rgba(10,18,36,0) 70%)}
.zweef-tekst{margin-top:calc(var(--kop) - 100svh)}
.zweef .zin:first-child{min-height:max(calc(100svh - var(--kop)),420px)}
.zweef .zin{padding-inline:max(clamp(20px,7vw,120px), calc((100% - (100svh - var(--kop)) * 2.2) / 2 + 60px))}
@media (prefers-reduced-motion: reduce){
  .zweef-beeld{position:static; height:auto}
  .zweef-tekst{margin-top:0}
  .zweef .zin,.zweef .zin:first-child{min-height:0}
}
/* Weiche Kante zur unscharfen Seitenfüllung — nur auf sehr breiten Bildschirmen */
@media (min-aspect-ratio: 21/10){
  .hero.kopfilm video.bg,.zweef-beeld img{-webkit-mask:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%); mask:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)}
}

/* --- Broschüre: gekippte Titelkarte + Blätterkatalog (26.09.2026) ---
   Vorbild: golfausflug.de, Snippet 33953 — rotateY(13deg) rotateX(3deg) rotateZ(1.2deg),
   Glanzkante, beim Überfahren aufrichten. Hell, Papierkarte #f4f1e9. */
.brochure-sectie{padding-block:clamp(40px,5vw,70px)}
.bk-kaart{display:grid; grid-template-columns:minmax(260px,520px) 1fr; gap:clamp(30px,5vw,70px); align-items:center;
  background:#f4f1e9; border:1px solid var(--lijn); border-radius:12px; padding:clamp(26px,4vw,56px)}
@media(max-width:860px){.bk-kaart{grid-template-columns:1fr}}
.bk-kachel{all:unset; cursor:pointer; display:block; perspective:1400px; width:100%; max-width:520px; margin-inline:auto}
.bk-kachel:focus-visible{outline:3px solid var(--groen); outline-offset:8px; border-radius:4px}
.bk-deckel{position:relative; display:block; transform-origin:12% 50%;
  transform:rotateY(13deg) rotateX(3deg) rotateZ(1.2deg);
  box-shadow:-22px 26px 44px rgba(20,23,26,.26),-4px 5px 10px rgba(20,23,26,.14); transition:transform .5s ease, box-shadow .5s ease}
.bk-deckel img{width:100%; height:auto; display:block}
.bk-deckel::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(255deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,0) 42%)}
.bk-kachel:hover .bk-deckel,.bk-kachel:focus-visible .bk-deckel{transform:rotateY(5deg) rotateX(1deg) rotateZ(.3deg) translateY(-6px)}
@media (prefers-reduced-motion:reduce){.bk-deckel{transition:none}}
.bk-hinweis{display:block; text-align:center; margin-top:18px; font-size:.86rem; color:var(--grijs)}
.bk-label{display:inline-block; font-size:.8rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--goud,#9a6b16); margin-bottom:10px}
.bk-feiten{list-style:none; padding:0; margin:20px 0 26px; display:flex; flex-wrap:wrap; gap:14px 28px}
.bk-feiten li{font-size:.9rem; color:var(--grijs)}
.bk-feiten b{display:block; font-family:var(--serif); color:var(--blauw); font-size:1.2rem; line-height:1.2}
.bk-knoppen{display:flex; flex-wrap:wrap; gap:12px}
.btn.btn-omtrek{border-color:var(--blauw); color:var(--blauw); background:transparent}
.btn.btn-omtrek:hover{background:rgba(35,64,135,.07)}

/* Overlay */
.bk-overlay{position:fixed; inset:0; z-index:1000; background:rgba(12,16,26,.98); color:#fff;
  display:grid; grid-template-rows:auto minmax(0,1fr) auto; grid-template-columns:minmax(0,1fr); font-family:var(--sans)}
.bk-overlay[hidden]{display:none}
.bk-balk{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px clamp(12px,3vw,28px)}
.bk-balk .titel{font-size:.9rem; letter-spacing:.06em; opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bk-balk .rechts{display:flex; align-items:center; gap:8px; flex-shrink:0}
.bk-teller{font-variant-numeric:tabular-nums; font-size:.9rem; opacity:.85; margin-right:6px}
.bk-knop{all:unset; cursor:pointer; width:44px; height:44px; display:grid; place-items:center; border-radius:50%; color:#fff}
.bk-knop:hover,.bk-knop:focus-visible{background:rgba(255,255,255,.14)}
.bk-knop svg{width:22px; height:22px}
.bk-buehne{position:relative; min-width:0; overflow:hidden; display:flex; align-items:center; justify-content:center; min-height:0; padding:0 clamp(8px,5vw,70px)}
.bk-spread{display:flex; justify-content:center; align-items:center; max-width:100%; max-height:100%; position:relative;
  box-shadow:0 30px 80px rgba(0,0,0,.5)}
.bk-spread img{display:block; height:auto; max-height:calc(100vh - 190px); max-height:calc(100svh - 190px); width:auto; background:#f4f1e9}
.bk-spread.doppel img{max-width:calc((100vw - 2*clamp(8px,5vw,70px)) / 2)}
.bk-spread.einzel img{max-width:calc(100vw - 2*clamp(8px,5vw,70px))}
.bk-spread.doppel::after{content:""; position:absolute; top:0; bottom:0; left:50%; width:60px; transform:translateX(-50%); pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.16) 46%,rgba(0,0,0,.28) 50%,rgba(0,0,0,.16) 54%,rgba(0,0,0,0) 100%)}
.bk-zone{all:unset; cursor:pointer; position:absolute; top:0; bottom:0; width:22%; display:flex; align-items:center; z-index:2}
.bk-zone.links{left:0; justify-content:flex-start; padding-left:clamp(4px,1.5vw,18px)}
.bk-zone.rechts{right:0; justify-content:flex-end; padding-right:clamp(4px,1.5vw,18px)}
.bk-zone span{width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,.12); display:grid; place-items:center; font-size:26px; line-height:1}
.bk-zone:hover span,.bk-zone:focus-visible span{background:rgba(255,255,255,.26)}
.bk-zone[disabled]{visibility:hidden}
.bk-strip{min-width:0; display:flex; gap:8px; overflow-x:auto; padding:12px clamp(12px,3vw,28px) 16px; scrollbar-width:thin}
.bk-strip button{all:unset; cursor:pointer; flex:0 0 auto; opacity:.55; border:2px solid transparent; border-radius:2px}
.bk-strip button.actief{opacity:1; border-color:var(--groen)}
.bk-strip button:hover{opacity:.9}
.bk-strip img{height:54px; width:auto; display:block}
@media(max-width:760px){.bk-strip img{height:42px} .bk-zone span{width:40px; height:40px; font-size:22px}}
body.bk-open{overflow:hidden}

/* --- Prüfung 26.09.2026: Sprunglink, Film-Pause, Katalog-Klickflächen, lange Wörter --- */
.skip{position:absolute; left:-9999px; top:8px; z-index:2000; background:var(--blauw); color:#fff; padding:10px 16px; border-radius:4px; font-weight:700}
.skip:focus{left:12px}
.film-pauze{position:absolute; right:14px; bottom:14px; z-index:4; width:44px; height:44px; border-radius:50%;
  border:2px solid rgba(255,255,255,.85); background:rgba(16,29,58,.55); cursor:pointer; padding:0}
.film-pauze::before{content:""; display:block; margin:auto; width:12px; height:14px; border-left:4px solid #fff; border-right:4px solid #fff; box-sizing:border-box}
.film-pauze.speelt-niet::before{width:0; height:0; border-left:13px solid #fff; border-top:8px solid transparent; border-bottom:8px solid transparent; border-right:0; margin-left:16px}
.handvideo .film-pauze{right:22%; bottom:14%}
.bk-zone,.bk-zone:hover,.bk-zone:focus,.bk-zone:active{background:transparent !important; box-shadow:none !important; border:0 !important}
.bk-pdflink{display:none}
@media(max-width:760px){.bk-pdflink{display:inline-block; color:#fff; font-size:.85rem; text-decoration:underline; margin-right:4px}}
h1,h2,h3{overflow-wrap:break-word; hyphens:auto}

/* 26.09.2026 abends (Handy-Fotos des Inhabers): Kacheln im Seitenverhaeltnis 16:9
   statt fester 130 px — auf dem Handy war das ein 3:1-Streifen (Pfau ohne Kopf,
   Pinnacle Point halb). Postkarten-Abschnitt: die spaetere Regel (Zeile ~485)
   hob den Umbruch unter 820 px auf, der Text lief rechts aus dem Bild. */
.baan img{height:auto; aspect-ratio:16/9}
@media(max-width:820px){.postkaart{grid-template-columns:1fr; justify-items:center}.postkaart > div{min-width:0}}