/* Ferienhaus Sansibar – Design nach dem Canvas „Ferienhaus Sansibar – Redesign" */
@font-face{font-family:"Lora";src:url(../fonts/lora.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Lora";src:url(../fonts/lora-italic.woff2) format("woff2");font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url(../fonts/source-sans-3.woff2) format("woff2");font-weight:200 900;font-display:swap}

:root{
  --grund:#FBF8F2;      /* heller, warmer Grund */
  --weiss:#FFFFFF;
  --navy:#13293D;       /* Text, Fuß */
  --text-2:#3A4D5E;     /* Fließtext gedämpft */
  --text-3:#4A5A68;
  --akzent:#0A6A94;     /* Ostseeblau: Knöpfe, Links, Symbole */
  --akzent-dunkel:#074E6E;
  --sand:#E9E1D3;
  --linie:#E6DFD2;
  --dunkel:10,24,38;    /* Bildverläufe */
  --serif:"Lora",Georgia,serif;
  --sans:"Source Sans 3",system-ui,sans-serif;
  --rand:24px;
  --radius:16px;
}
*,*::before,*::after{box-sizing:border-box}
button,input,select,textarea{font:inherit;color:inherit}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--grund);color:var(--navy);font:400 18px/1.6 var(--sans)}
img{max-width:100%;height:auto;display:block}
a{color:var(--akzent)}
a:hover{color:var(--akzent-dunkel)}
:focus-visible{outline:3px solid var(--akzent);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.15;margin:0 0 .5em}
h1{font-size:clamp(2.6rem,6vw,4.75rem);line-height:1.05}
h2{font-size:clamp(1.9rem,3.6vw,2.6rem)}
h3{font-size:1.25rem}
p{margin:0 0 1em}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:#fff;padding:8px 12px;z-index:50}

/* Kopf: auf Bildseiten weiß über dem Bild, sonst auf hellem Grund */
.kopf{position:relative;z-index:20}
.kopf.ueber{position:absolute;left:0;right:0;top:0;color:#fff}
.kopf.ueber::before{content:"";position:absolute;inset:0 0 -40px;background:linear-gradient(180deg,rgba(var(--dunkel),.5),rgba(var(--dunkel),0));pointer-events:none}
.kopf:not(.ueber){background:var(--grund);border-bottom:1px solid var(--linie)}
.kopf-in{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px;max-width:1280px;margin:0 auto;padding:20px var(--rand)}
.marke{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;font-family:var(--serif);font-weight:600;font-size:22px}
.marke:hover{color:inherit}
.marke svg{width:32px;height:32px;flex:none}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:4px 24px;font-size:17px;font-weight:600}
.nav a{color:inherit;text-decoration:none;padding:10px 0;border-bottom:2px solid transparent}
.nav a:hover{border-bottom-color:currentColor;color:inherit}
.nav a[aria-current]{border-bottom-color:currentColor}
.nav a.buchen{background:var(--navy);color:#fff;padding:10px 22px;border-radius:999px;border:0}
.ueber .nav a.buchen{background:#fff;color:var(--navy)}
.menu-btn{display:none;background:none;border:1.5px solid currentColor;border-radius:999px;padding:8px 18px;font:600 16px var(--sans);color:inherit;min-height:44px}
@media (max-width:1140px){
  .menu-btn{display:block}
  .nav{display:none;flex-basis:100%;flex-direction:column;align-items:stretch;gap:0;padding:8px 0 4px}
  .nav.offen{display:flex}
  .ueber .nav.offen{background:rgba(var(--dunkel),.88);border-radius:var(--radius);padding:8px 20px 16px}
  .nav a{padding:12px 0}
  .nav a.buchen{text-align:center;margin-top:10px}
}

/* Knöpfe */
.knopf{display:inline-block;background:var(--akzent);color:#fff;text-decoration:none;font-weight:600;font-size:19px;padding:16px 34px;border-radius:999px;border:2px solid var(--akzent);line-height:1.2}
.knopf:hover{background:var(--akzent-dunkel);border-color:var(--akzent-dunkel);color:#fff}
.knopf.hell{background:#fff;color:var(--navy);border-color:#fff}
.knopf.hell:hover{background:var(--grund);color:var(--navy)}
.knopf.rahmen{background:transparent;color:#fff;border-color:#fff}
.knopf.rahmen:hover{background:rgba(255,255,255,.14)}
.knopf.rahmen-dunkel{background:transparent;color:var(--navy);border-color:var(--navy)}
.knopf.rahmen-dunkel:hover{background:var(--navy);color:#fff}
.knopf.klein{font-size:16px;padding:10px 22px}

/* Layout */
.wrap{max-width:1280px;margin:0 auto;padding-left:var(--rand);padding-right:var(--rand)}
.abschnitt{padding-top:clamp(64px,8vw,112px);padding-bottom:clamp(64px,8vw,112px)}
.weiss{background:#fff;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.einleitung{font-size:20px;color:var(--text-2);max-width:62ch}
.kicker{font-family:var(--serif);font-style:italic;font-weight:500;font-size:22px;color:var(--akzent);margin:0 0 .4em}

/* Startseite: Sonnenuntergang, Text zentriert */
.held{position:relative;min-height:max(640px,100svh);display:flex;flex-direction:column;color:#fff;overflow:hidden;background:#3a4a55}
.held>picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%}
.held::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--dunkel),.55) 0%,rgba(var(--dunkel),.15) 22%,rgba(var(--dunkel),.45) 45%,rgba(var(--dunkel),.55) 70%,rgba(var(--dunkel),.75) 100%)}
.held-text{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:24px;padding:140px var(--rand) 96px}
.held .ort{margin:0;font-size:16px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.held h1{margin:0;max-width:900px;text-shadow:0 2px 24px rgba(0,0,0,.45)}
.held .unter{margin:0;max-width:620px;font-size:clamp(19px,2vw,22px);text-shadow:0 1px 12px rgba(0,0,0,.5)}
.aktionen{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;padding-top:8px}

/* Einstieg zentriert */
.einstieg{max-width:860px;margin:0 auto;padding:clamp(72px,9vw,112px) var(--rand) 80px;text-align:center}
.einstieg h2{font-size:clamp(2rem,4vw,2.9rem)}
.einstieg p:last-child{font-size:20px;color:var(--text-2);margin:0}

/* Momente: Bildkacheln mit Unterschrift im Bild */
.momente{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.kachel{margin:0;position:relative;min-height:272px;border-radius:var(--radius);overflow:hidden;background:var(--sand)}
.kachel.hoch{grid-row:span 2;min-height:560px}
.kachel.breit{min-height:420px;margin-top:16px}
.kachel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kachel figcaption{position:absolute;left:0;right:0;bottom:0;padding:56px 24px 20px;background:linear-gradient(transparent,rgba(var(--dunkel),.75));color:#fff;font-family:var(--serif);font-size:22px;line-height:1.3}
.kachel.hoch figcaption,.kachel.breit figcaption{font-size:24px}
@media (max-width:660px){.kachel.hoch{min-height:420px}}

/* Gastgeber */
.gastgeber{display:grid;grid-template-columns:minmax(200px,320px) 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.gastgeber img{border-radius:var(--radius);aspect-ratio:4/5;object-fit:cover;object-position:50% 30%;width:100%}
.zitat{font-family:var(--serif);font-weight:500;font-size:clamp(1.5rem,2.8vw,2.1rem);line-height:1.3;margin:0 0 .8em;max-width:30ch}
.unterschrift{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--akzent)}
@media (max-width:720px){.gastgeber{grid-template-columns:1fr}.gastgeber figure{max-width:280px}}
figure{margin:0}

/* Ausstattung mit Symbolen */
.merkmale{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:32px 28px;margin-top:40px}
.merkmale div{display:flex;flex-direction:column;gap:10px}
.merkmale svg{width:40px;height:40px;stroke:var(--akzent)}
.merkmale h3{margin:0;font-family:var(--sans);font-size:20px;font-weight:600}
.merkmale p{margin:0;color:var(--text-3)}

/* Bild und Text nebeneinander */
.paar{display:grid;grid-template-columns:7fr 5fr;gap:clamp(24px,4vw,64px);align-items:center;margin:clamp(48px,7vw,96px) 0}
.paar.links{grid-template-columns:5fr 7fr}
.paar.links>.bild{order:2}
.paar .bild img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius)}
.paar p{color:var(--text-2)}
@media (max-width:820px){.paar,.paar.links{grid-template-columns:1fr}.paar.links>.bild{order:0}}

/* Buchungsband mit Himmel */
.band{position:relative;color:#fff;text-align:center;overflow:hidden;background:#c9a86a}
.band>picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 70%}
.band::after{content:"";position:absolute;inset:0;background:rgba(var(--dunkel),.55)}
.band-in{position:relative;z-index:1;max-width:900px;margin:0 auto;padding:clamp(96px,10vw,128px) var(--rand);display:flex;flex-direction:column;align-items:center;gap:20px}
.band h2{margin:0;font-size:clamp(2.2rem,4.6vw,3.25rem);line-height:1.1;text-shadow:0 2px 20px rgba(0,0,0,.4)}
.band p{margin:0;font-size:21px;max-width:600px}
.band .knopf{margin-top:8px}

/* Unterseiten: Bildkopf wie die Startseite, kürzer */
.kopfbild{position:relative;min-height:clamp(420px,62vh,620px);display:flex;flex-direction:column;justify-content:flex-end;color:#fff;overflow:hidden;background:#3a4a55}
.kopfbild>picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kopfbild::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--dunkel),.55) 0%,rgba(var(--dunkel),.15) 30%,rgba(var(--dunkel),.35) 55%,rgba(var(--dunkel),.75) 100%)}
.kopfbild-text{position:relative;z-index:1;width:100%;max-width:1280px;margin:0 auto;padding:120px var(--rand) clamp(40px,6vh,64px)}
.kopfbild h1{margin:0 0 .25em;text-shadow:0 2px 24px rgba(0,0,0,.45)}
.kopfbild p{margin:0;font-size:clamp(19px,2vw,21px);max-width:58ch;text-shadow:0 1px 12px rgba(0,0,0,.5)}

/* Galerie */
.galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin:20px 0 56px}
.galerie button{padding:0;border:0;background:none;cursor:zoom-in;display:block;border-radius:var(--radius);overflow:hidden}
.galerie img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .4s}
.galerie button:hover img{transform:scale(1.03)}
dialog.lupe{padding:0;border:0;background:transparent;max-width:96vw;max-height:94vh}
dialog.lupe::backdrop{background:rgba(var(--dunkel),.9)}
dialog.lupe img{max-width:96vw;max-height:84vh;width:auto;border-radius:8px}
dialog.lupe .steuer{display:flex;justify-content:space-between;align-items:center;gap:12px;color:#fff;padding:12px 2px}
dialog.lupe button{background:rgba(255,255,255,.16);color:#fff;border:0;border-radius:999px;padding:10px 18px;font:600 16px var(--sans);cursor:pointer;min-height:44px}

/* Raumlisten */
.raeume{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:32px}
.raeume h3{font-family:var(--sans);font-size:19px;margin-bottom:.4em}
.raeume ul{margin:0;padding:0;list-style:none;color:var(--text-3)}
.raeume li{padding:4px 0;border-bottom:1px solid var(--linie)}

/* Einbettungen erst nach Klick */
.einbettung{position:relative;background:var(--navy) center/cover;color:#fff;border-radius:var(--radius);overflow:hidden;aspect-ratio:16/9;display:grid;place-items:center;text-align:center;padding:24px}
.einbettung.hoch{aspect-ratio:auto;min-height:440px}
.einbettung.poster{background-image:linear-gradient(rgba(var(--dunkel),.6),rgba(var(--dunkel),.6)),url(../img/ausstattung-06.webp)}
.einbettung p,.paar .einbettung p{margin:0 auto 16px;max-width:46ch;font-size:16px;color:#fff}
.einbettung a{color:#fff}
.einbettung iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff}

/* Häufige Fragen */
.fragen{max-width:860px}
.fragen details{border-bottom:1px solid var(--linie)}
.fragen summary{cursor:pointer;font-family:var(--serif);font-weight:600;font-size:20px;padding:18px 0;list-style:none;display:flex;justify-content:space-between;gap:16px}
.fragen summary::after{content:"+";font-family:var(--sans);font-weight:400;font-size:26px;line-height:1;color:var(--akzent)}
.fragen details[open] summary::after{content:"–"}
.fragen summary::-webkit-details-marker{display:none}
.fragen details p{margin:0 0 18px;color:var(--text-2)}

/* Buchung */
.bedingungen{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px 40px;margin:0}
.bedingungen dt{font-family:var(--serif);font-weight:600;font-size:20px;margin-bottom:4px}
.bedingungen dd{margin:0;color:var(--text-2)}
#apartmentIframeAll{min-height:620px;background:#fff;border-radius:var(--radius);border:1px solid var(--linie);padding:8px}

/* Umgebung */
.tipps{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:28px 36px}
.tipps h3{font-size:20px;margin-bottom:.25em}
.tipps p{margin:0;color:var(--text-3)}
.liste-spalten{columns:2 260px;column-gap:40px;padding-left:1.1em;color:var(--text-2)}
.liste-spalten li{margin-bottom:6px;break-inside:avoid}

/* Geschichte */
.geschichte figcaption{font-size:15px;color:var(--text-3);margin-top:8px;font-style:italic}
.geschichte .bild img{border-radius:var(--radius)}
blockquote{margin:1.2em 0;font-family:var(--serif);font-style:italic;font-size:22px;line-height:1.45;color:var(--navy);max-width:56ch}

/* Rechtstexte */
.recht{max-width:760px}
.recht h2{font-size:1.5rem;margin-top:1.6em}
.recht p,.recht li{color:var(--text-2)}
.recht li{margin-bottom:.5em}

/* Kontakt */
.portrait{margin:32px 0 0;max-width:260px}
.portrait img{border-radius:var(--radius);aspect-ratio:4/5;object-fit:cover;object-position:50% 30%}
.portrait figcaption{font-family:var(--serif);font-style:italic;color:var(--akzent);margin-top:10px}

/* Fuß */
.fuss{background:var(--navy);color:#D3DEE8;padding:56px 0 32px;font-size:16px}
.fuss a{color:#fff}
.fuss-in{display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px}
.fuss h2{font-size:24px;color:#fff;margin-bottom:.4em}
.fuss ul{list-style:none;margin:0;padding:0}
.fuss li{margin-bottom:8px}
.fuss small{display:block;margin-top:40px;opacity:.75;font-size:14px}
@media (max-width:760px){.fuss-in{grid-template-columns:1fr}}

/* Einwilligung */
.einwilligung{position:fixed;left:16px;right:16px;bottom:16px;z-index:40;max-width:560px;background:#fff;color:var(--navy);border-radius:var(--radius);box-shadow:0 12px 40px rgba(var(--dunkel),.25);padding:20px 22px}
.einwilligung p{font-size:16px;margin-bottom:14px}
.einwilligung .knoepfe{display:flex;gap:10px;flex-wrap:wrap}
.einwilligung button{font:600 16px var(--sans);cursor:pointer;border-radius:999px;padding:10px 20px;border:2px solid var(--navy);background:#fff;color:var(--navy);min-height:44px}
.einwilligung button.ja{background:var(--akzent);border-color:var(--akzent);color:#fff}

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

/* Hinweisfenster: zwei Kategorien */
.einwilligung{max-width:600px}
.einwilligung .einw-titel{font-family:var(--serif);font-weight:600;font-size:20px;margin-bottom:6px}
.einw-wahl{display:grid;gap:10px;margin:4px 0 16px}
.einw-wahl label{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.4;cursor:pointer}
.einw-wahl input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--akzent);flex:none}
.einw-wahl b{display:block;font-size:16px}
.einwilligung button{font-size:15px;padding:10px 16px}
.einbettung-immer{margin:14px 0 0!important;font-size:15px!important}
.einbettung.geladen{padding:0;background:#fff}

/* Buchen: Kalender und Smoobu */
.buchen-raster{display:grid;grid-template-columns:minmax(300px,460px) 1fr;gap:clamp(32px,5vw,64px);align-items:start}
.buchen-raster h2{font-size:clamp(1.6rem,2.6vw,2rem)}
.buchen-raster .einleitung{font-size:17px}
.einbettung.kalender{aspect-ratio:auto;height:560px;max-width:460px}
.einbettung.kalender.geladen{background:transparent}
@media (max-width:900px){.buchen-raster{grid-template-columns:1fr}.einbettung.kalender{max-width:none}}
.einbettung.kalender{height:530px}
.einbettung.kalender.geladen,.einbettung.kalender iframe{background:transparent}
@media (max-width:900px){#apartmentIframeAll{min-height:440px}}

/* Gästebewertungen */
.einbettung.bewertungen-box{aspect-ratio:auto;min-height:320px;margin-top:24px}
.einbettung.bewertungen-box.geladen{background:transparent;display:block;padding:0;overflow:visible;min-height:0}

/* Cookie-Hinweis: kompakt, zwei gleichwertige Knöpfe */
.einwilligung{left:auto;right:16px;bottom:16px;max-width:440px;padding:14px 16px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;border-radius:12px}
.einwilligung p{margin:0;font-size:14px;line-height:1.45;flex:1 1 240px}
.einwilligung .knoepfe{gap:8px;flex:none}
.einwilligung button{font-size:14px;padding:7px 16px;min-height:38px;border-width:1.5px}
.einwilligung button.ja{background:var(--navy);border-color:var(--navy);color:#fff}
@media (max-width:520px){.einwilligung{left:12px;right:12px;bottom:12px;max-width:none}.einwilligung .knoepfe{width:100%}.einwilligung button{flex:1}}

/* Kopfzeile bleibt beim Scrollen stehen */
html{scroll-padding-top:84px}
.kopf:not(.ueber){position:sticky;top:0}
.kopf.ueber{position:fixed}
.kopf{transition:background-color .25s,box-shadow .25s,color .25s}
.kopf-in{transition:padding .25s}
.kopf.gescrollt{background:rgba(251,248,242,.97);color:var(--navy);box-shadow:0 1px 0 var(--linie),0 6px 24px rgba(var(--dunkel),.08);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.kopf.gescrollt::before{opacity:0}
.kopf.ueber::before{transition:opacity .25s}
.kopf.gescrollt .kopf-in{padding-top:10px;padding-bottom:10px}
.kopf.gescrollt .nav a.buchen{background:var(--navy);color:#fff}
.kopf.gescrollt .nav.offen{background:transparent;padding:4px 0 8px}
.menu-btn{align-items:center;gap:8px}
@media (max-width:1140px){.menu-btn{display:inline-flex}}
@media (max-width:520px){
  .kopf-in{gap:8px 12px;padding-left:16px;padding-right:16px}
  .marke{font-size:19px;gap:10px}
  .marke svg{width:28px;height:28px}
  .menu-btn{padding:6px 14px;min-height:40px}
  h1{font-size:clamp(2.1rem,10vw,2.6rem);hyphens:auto;overflow-wrap:break-word}
}
@media (max-width:380px){
  .menu-btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .menu-btn{padding:0;width:44px;height:44px;justify-content:center}
}

/* Touren */
.touren-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:48px 40px;margin-top:40px}
.tour{display:flex;flex-direction:column;min-width:0}
.tour-art{font-weight:600;font-size:15px;color:var(--akzent);margin:0 0 6px}
.tour h2{font-size:clamp(1.4rem,2.4vw,1.75rem);margin-bottom:.35em}
.tour>p{color:var(--text-2);margin-bottom:16px}
.einbettung.tourkarte{aspect-ratio:auto;height:480px}
.tour-link{margin:12px 0 0!important;font-weight:600}
@media (max-width:520px){.einbettung.tourkarte{height:400px}.touren-raster{gap:56px}}
@media (max-width:520px){.einbettung.tourkarte{height:480px}}
/* Touren: gleiche Teile auf gleicher Höhe (Subgrid) */
@supports (grid-template-rows:subgrid){
  .touren-raster{row-gap:0}
  .tour{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0}
  .tour>p:not(.tour-art):not(.tour-link){align-self:start}
  .tour .einbettung{align-self:start}
  .tour-link{margin-bottom:56px!important}
}
.einbettung .einbettung-immer{margin:14px auto 0!important}

/* Logo der alten Seite */
.marke img{width:40px;height:40px;flex:none;border-radius:50%}
.kopf.gescrollt .marke img{width:36px;height:36px}
@media (max-width:520px){.marke img{width:34px;height:34px}}

/* Umgebung: Bildreihen mit Unterschrift, Bilder in Tipps */
.galerie.mit-text{margin:20px 0 40px}
.galerie.mit-text figure{margin:0}
.galerie.mit-text figcaption{font-size:15px;color:var(--text-3);margin-top:8px;line-height:1.35}
.reihe-titel{font-size:1.5rem;margin-top:8px}
.tipp-bild{margin-bottom:14px;border-radius:var(--radius);overflow:hidden}
.tipp-bild img{width:100%;aspect-ratio:3/2;object-fit:cover}

/* Geschichte: Buchcover und Postkarte */
.paar.buch{grid-template-columns:minmax(160px,220px) 1fr;gap:clamp(28px,5vw,64px);align-items:start}
.buchcover img{width:100%;max-width:220px;height:auto;border-radius:4px;box-shadow:0 10px 30px rgba(var(--dunkel),.18)}
.geschichte>p,.paar.buch p{max-width:70ch}

/* Postkarte: Breiten im Verhältnis der Seitenformate, dadurch gleiche Höhe ohne Verzerrung */
.postkarte{display:grid;grid-template-columns:58fr 178fr;gap:20px;max-width:960px;margin-top:32px;align-items:start}
.postkarte figure{margin:0;min-width:0}
.postkarte img{display:block;width:100%;height:auto;border-radius:6px;box-shadow:0 10px 30px rgba(var(--dunkel),.15)}
.postkarte figcaption{font-size:15px;line-height:1.35}
@media (max-width:640px){
  .postkarte{grid-template-columns:1fr;gap:28px}
  .postkarte figure:first-child{max-width:300px}
}
@media (max-width:820px){.paar.buch{grid-template-columns:1fr}.buchcover img{max-width:180px}}
.momente{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.recht{overflow-wrap:anywhere}

/* 5) Handy-Überschrift ohne Trennung im Wort */
@media (max-width:520px){h1{font-size:clamp(1.85rem,8.4vw,2.5rem);hyphens:manual}}
.held h1{hyphens:manual}

/* Ausstattung: Ein Tag im Haus Sansibar */
.tag-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:32px 24px;margin-top:32px}
.tag-raster h3{font-size:20px;margin:0 0 .3em}
.tag-raster p:last-child{color:var(--text-2);margin:0;font-size:16px}
.tageszeit{font-family:var(--serif);font-style:italic;color:var(--akzent);font-size:17px;margin:0 0 2px}
.bereich-text{color:var(--text-2);max-width:68ch;margin:-4px 0 4px}

/* Startseite: Winter */
.doppel-winter{display:grid;grid-template-columns:3fr 2fr;gap:12px}
.doppel-winter img{aspect-ratio:auto!important;height:100%;min-height:320px;object-fit:cover}
@media (max-width:820px){.doppel-winter img{min-height:220px}}
.kachel.kamin img{object-position:12% 50%}
.kopfbild img[src*="touren-hero"]{object-position:50% 30%}
.kopfbild img[src*="ausstattung-03"]{object-position:50% 22%}
/* Merkmale: 4 + 3 auf dem Desktop, 2 Spalten auf dem Tablet, 1 auf dem Handy */
.merkmale{grid-template-columns:repeat(4,1fr);gap:36px 40px}
@media (max-width:1000px){.merkmale{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.merkmale{grid-template-columns:1fr}}
/* Schriftzug: auf sehr schmalen Handys ohne „Ferienhaus“ */
@media (max-width:470px){.marke-lang{display:none}}
/* Startseite: H1 als kleine Zeile, emotionale Überschrift optisch groß */
.held h1.ort{font-family:var(--sans);font-size:16px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:1.4;margin:0;max-width:none;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.held .held-titel{margin:0;max-width:900px;font-family:var(--serif);font-weight:600;font-size:clamp(2.6rem,6vw,4.75rem);line-height:1.05;text-shadow:0 2px 24px rgba(0,0,0,.45);hyphens:manual}
@media (max-width:520px){.held .held-titel{font-size:clamp(1.85rem,8.4vw,2.5rem)}.held h1.ort{font-size:13px;letter-spacing:.1em}}

.spielplatz-bilder{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
.spielplatz-bilder img{width:100%;aspect-ratio:4/3;height:auto;object-fit:cover;border-radius:var(--radius)}
.text-bild{margin-top:20px}
.text-bild img{width:100%;aspect-ratio:16/9;height:auto;object-fit:cover;border-radius:var(--radius)}
.bild-paar{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
.bild-paar img{width:100%;aspect-ratio:4/3;height:auto;object-fit:cover;border-radius:var(--radius)}
.reihe-text{max-width:70ch;margin:0 0 20px;color:var(--text-2)}
.paar .bild img[src*="langenwerder"]{object-position:68% 50%}
.momente-zwei{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.momente-zwei .kachel{min-height:420px}
@media (max-width:760px){.momente-zwei{grid-template-columns:1fr}.momente-zwei .kachel{min-height:300px}}
.momente-zwei.drei{grid-template-columns:repeat(3,1fr)}
.momente-zwei.drei .kachel{min-height:380px}
@media (max-width:1000px){.momente-zwei.drei{grid-template-columns:1fr 1fr}.momente-zwei.drei .kachel:first-child{grid-column:1/-1}}
@media (max-width:760px){.momente-zwei.drei{grid-template-columns:1fr}.momente-zwei.drei .kachel{min-height:300px}}
.doppel-winter.drei{grid-template-rows:1fr 1fr}
.doppel-winter.drei img:first-child{grid-row:1/3}
.doppel-winter.drei img{min-height:200px}
@media (max-width:820px){.doppel-winter.drei img{min-height:160px}}
.klein-bilder{display:grid;grid-template-columns:repeat(2,minmax(0,360px));gap:24px;margin-top:16px}
.klein-bilder figure{margin:0}
.klein-bilder img{width:100%;aspect-ratio:4/3;height:auto;object-fit:cover;border-radius:var(--radius)}
.klein-bilder figcaption{margin-top:10px;font-size:16px;line-height:1.5;color:var(--text-2)}
.klein-bilder figcaption strong{color:var(--navy)}
@media (max-width:600px){.klein-bilder{grid-template-columns:1fr 1fr;gap:14px;margin-top:36px}.klein-bilder figcaption{font-size:14px}}
.klein-titel{margin:56px 0 0;font-size:clamp(1.5rem,2.4vw,1.9rem)}
/* Handy: Überschrift vor dem Bild, damit klar ist, wozu das Bild gehört */
@media (max-width:820px){
  .paar:not(.buch):has(>.bild){gap:14px}
  .paar:not(.buch):has(>.bild)>div:not(.bild){display:contents}
  .paar:not(.buch):has(>.bild)>div>.kicker{order:-3;margin:0}
  .paar:not(.buch):has(>.bild)>div>h2{order:-2;margin:0}
  .paar:not(.buch):has(>.bild)>.bild{order:-1}
  .paar:not(.buch):has(>.bild)>div>p{margin:0}
}
/* Handy: Bildreihen zweispaltig statt endlos untereinander */
@media (max-width:600px){
  .galerie.mit-text{grid-template-columns:1fr 1fr;gap:12px}
  .galerie.mit-text figcaption{font-size:13px;line-height:1.35}
}
.klein-bilder{grid-template-columns:repeat(3,minmax(0,360px))}
@media (max-width:900px){.klein-bilder{grid-template-columns:repeat(3,1fr);gap:16px}}
@media (max-width:600px){.klein-bilder{grid-template-columns:1fr 1fr}.klein-bilder figure:last-child{grid-column:1/-1}.klein-bilder figure:last-child img{aspect-ratio:16/9}}
/* Handy: Küche groß, Arbeitsplatz und Kinderreich klein nebeneinander */
@media (max-width:600px){
  .klein-bilder figure:last-child{grid-column:auto}
  .klein-bilder figure:last-child img{aspect-ratio:4/3}
  .klein-bilder figure:first-child{grid-column:1/-1}
  .klein-bilder figure:first-child img{aspect-ratio:16/10}
  .klein-bilder figure:first-child figcaption{font-size:16px}
}