/* =========================================================================
   Ferienhaus Droemhus – St. Peter-Ording
   Mobile first: Die Grundregeln gelten für das Telefon. Größere Bildschirme
   bekommen ihre Erweiterungen ausschließlich über min-width-Abfragen.
   Schriften lokal eingebunden – kein Google-Fonts-Request.
   ========================================================================= */

@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/instrument-serif-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/instrument-serif-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;
  src:url('/fonts/instrument-serif-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:300 600;font-display:swap;
  src:url('/fonts/outfit-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:300 600;font-display:swap;
  src:url('/fonts/outfit-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

:root{
  --cream:#faf9f5; --paper:#fff; --sand:#f2efe6;
  --deep:#0e3c4c; --deep-soft:#17505f; --ink:#12232b; --muted:#6d7f85;
  --line:#dfe6e7; --line-soft:#eceeea;
  --gold:#c9a06a; --gold-dark:#8d6a30;
  --shadow:0 1px 2px rgba(14,60,76,.05),0 14px 40px -28px rgba(14,60,76,.5);
  --pad:18px;              /* Seitenrand – wächst mit dem Viewport */
  --gap:14px;
  --sec:44px;              /* vertikaler Abstand zwischen Abschnitten */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font:400 17px/1.62 'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;overflow-wrap:break-word;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--deep);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--gold-dark);outline-offset:3px;border-radius:2px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

.wrap{width:100%;max-width:1200px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.prose{max-width:68ch}

.skip{position:absolute;left:-9999px;top:0;background:var(--deep);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}

/* ───────────────────────── Kopfbereich ───────────────────────── */
.site-head{position:sticky;top:0;z-index:60;background:rgba(250,249,245,.94);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.head-in{display:flex;flex-wrap:wrap;align-items:center;gap:10px var(--gap);padding-top:12px;padding-bottom:10px}
.brand{display:flex;flex-direction:column;gap:2px;text-decoration:none;flex:1 1 auto;min-width:0}
.brand b{font:400 26px/1 'Instrument Serif',Georgia,serif;color:var(--deep);letter-spacing:-.005em}
.brand span{font-size:9px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}

.lang{display:flex;gap:2px;flex:0 0 auto}
.lang a{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;padding:7px 6px;min-height:40px;display:flex;align-items:center}
.lang a{gap:6px;border-radius:3px}
.lang a svg{display:block;border:1px solid rgba(14,60,76,.18);border-radius:2px;flex:0 0 auto}
.lang a span{line-height:1}
.lang a[aria-current="true"]{color:var(--deep);background:rgba(14,60,76,.07)}
.lang a[aria-current="true"] svg{border-color:rgba(14,60,76,.4)}
.lang a:not([aria-current]) svg{opacity:.72}
.lang a:hover{color:var(--deep)}
.lang a:hover svg{opacity:1}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.site-nav{display:flex;flex-wrap:wrap;gap:4px 16px;flex:1 1 100%}
.site-nav a{font-size:15px;color:var(--ink);text-decoration:none;
  padding:9px 0;min-height:44px;display:flex;align-items:center;border-bottom:1px solid transparent}
.site-nav a[aria-current="page"]{border-bottom-color:var(--deep);font-weight:500}

@media (min-width:860px){
  .head-in{flex-wrap:nowrap;padding-top:0;padding-bottom:0;min-height:82px;gap:28px}
  .brand{flex:0 0 auto}
  .brand b{font-size:31px}
  .site-nav{flex:0 1 auto;margin-left:auto;gap:26px;flex-wrap:nowrap}
  .site-nav a{font-size:14.5px}
  .lang{border-left:1px solid var(--line);padding-left:18px}
}

/* ───────────────────────── Brotkrumen ───────────────────────── */
.crumbs{font-size:13px;color:var(--muted);padding-top:16px}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.crumbs li+li::before{content:"›";margin-right:6px;color:var(--gold-dark)}
.crumbs a{color:var(--muted)}

/* ───────────────────────── Typografie ───────────────────────── */
.eyebrow{font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-dark);margin:0 0 12px}
h1{font:400 34px/1.08 'Instrument Serif',Georgia,serif;letter-spacing:-.015em;margin:0 0 16px;text-wrap:balance;color:var(--deep)}
h2{font:400 25px/1.15 'Instrument Serif',Georgia,serif;letter-spacing:-.01em;margin:0 0 12px;text-wrap:balance;color:var(--deep)}
h3{font:500 18px/1.3 'Outfit',sans-serif;margin:0 0 8px;color:var(--ink)}
h4{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
p{margin:0 0 16px}
.lead{font-size:18px;color:var(--deep-soft);max-width:60ch}
section{padding-top:var(--sec);padding-bottom:var(--sec)}
section+section{border-top:1px solid var(--line-soft)}

@media (min-width:700px){
  :root{--pad:28px;--gap:18px;--sec:64px}
  h1{font-size:46px}
  h2{font-size:32px}
  .lead{font-size:19.5px}
}
@media (min-width:1100px){
  :root{--pad:32px;--gap:22px;--sec:84px}
  h1{font-size:58px}
  h2{font-size:37px}
  .lead{font-size:21px}
}

/* ───────────────────────── Hero ───────────────────────── */
.hero{padding-top:26px}
.hero-grid{display:grid;grid-template-columns:1fr;gap:24px;align-items:center}
.hero figure{margin:0;border-radius:4px;overflow:hidden;box-shadow:var(--shadow)}
.hero img{width:100%;aspect-ratio:4/3;object-fit:cover}
@media (min-width:860px){
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:48px}
}

/* ───────────────────────── Eckdaten ───────────────────────── */
.facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:3px;overflow:hidden;margin:26px 0 0}
.facts div{background:var(--cream);padding:14px 16px}
.facts dt{font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-dark);margin-bottom:5px}
.facts dd{margin:0;font-size:14.5px;color:var(--deep-soft)}
@media (min-width:700px){
  .facts{grid-template-columns:repeat(4,1fr)}
  .facts div{padding:18px 20px}
  .facts dd{font-size:15px}
}

/* ───────────────────────── Karten ───────────────────────── */
.cards{display:grid;grid-template-columns:1fr;gap:var(--gap)}
.card{background:var(--paper);border:1px solid var(--line);border-radius:3px;padding:22px;box-shadow:var(--shadow)}
.card p:last-child{margin-bottom:0}
.card .num{font:400 28px/1 'Instrument Serif',Georgia,serif;color:var(--gold);display:block;margin-bottom:8px}
@media (min-width:700px){.cards{grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}.card{padding:24px 26px}}

/* ───────────────────────── Galerie ───────────────────────── */
.gallery{display:grid;grid-template-columns:1fr;gap:var(--gap)}
.gallery figure{margin:0;border-radius:3px;overflow:hidden;background:var(--sand);box-shadow:var(--shadow)}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover}
.gallery figcaption{font-size:13.5px;color:var(--muted);padding:10px 14px 14px;background:var(--paper)}
@media (min-width:620px){.gallery{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.gallery{grid-template-columns:repeat(3,1fr)}}

/* ───────────────────────── Listen ───────────────────────── */
.ticks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:8px}
.ticks li{position:relative;padding-left:22px;font-size:15.5px}
.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;border-radius:50%;
  border:1.5px solid var(--gold)}
@media (min-width:620px){.ticks{grid-template-columns:repeat(2,1fr);gap:8px 24px}}
@media (min-width:1000px){.ticks{grid-template-columns:repeat(3,1fr)}}
.plain{list-style:none;margin:0;padding:0}
.plain li{padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:15.5px}
.plain li:last-child{border-bottom:0}

/* ───────────────────────── Schaltflächen ───────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;
  background:var(--deep);color:#fff;text-decoration:none;padding:13px 24px;border-radius:2px;
  font:500 15px/1.2 'Outfit',sans-serif;border:1px solid var(--deep);text-align:center}
.btn:hover{background:var(--deep-soft)}
.btn.ghost{background:transparent;color:var(--deep)}
.btn.ghost:hover{background:var(--sand)}
.btn-row{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.btn-row .btn{width:100%}
@media (min-width:560px){
  .btn-row{flex-direction:row;flex-wrap:wrap;gap:12px}
  .btn-row .btn{width:auto}
}

/* ───────────────────────── Datumsauswahl ───────────────────────── */
.date-pick{display:grid;grid-template-columns:1fr;gap:14px;margin-top:24px;
  background:var(--paper);border:1px solid var(--line);border-radius:3px;padding:20px;box-shadow:var(--shadow)}
.date-pick label{display:block;font-size:10.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.date-pick input{width:100%;font:400 16px/1.2 'Outfit',sans-serif;padding:14px;border:1px solid var(--line);
  border-radius:2px;background:var(--cream);color:var(--ink);min-height:48px}
.date-pick button{cursor:pointer}
@media (min-width:620px){
  .date-pick{grid-template-columns:1fr 1fr auto;align-items:end;gap:16px;padding:20px 22px}
}

/* ───────────────────────── Hinweis ───────────────────────── */
.note{background:var(--sand);border-left:3px solid var(--gold);padding:16px 18px;border-radius:2px;margin:24px 0}
.note p:last-child{margin-bottom:0}

/* ───────────────────────── FAQ ───────────────────────── */
.faq{border-top:1px solid var(--line);margin-top:22px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:16px 0;min-height:52px;font-weight:500;font-size:16.5px;
  list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold-dark);font-size:22px;line-height:1;flex:0 0 auto}
.faq details[open] summary::after{content:"–"}
.faq details p{padding-bottom:16px;margin:0;color:var(--deep-soft);max-width:66ch}

/* ───────────────────────── Kontakt ───────────────────────── */
.contact-grid{display:grid;grid-template-columns:1fr;gap:22px}
.contact-grid a{font-weight:500}
@media (min-width:620px){.contact-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px}}

/* ───────────────────────── Fußbereich ───────────────────────── */
.site-foot{background:var(--deep);color:#dfe8ea;margin-top:var(--sec);
  padding-top:38px;padding-bottom:28px;font-size:15px}
.site-foot a{color:#fff}
.foot-grid{display:grid;grid-template-columns:1fr;gap:26px}
.site-foot h4{color:#9fb4b9}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{padding:6px 0}
.site-foot .brand b{color:#fff}
.site-foot .brand span{color:#8fa5aa}
.foot-base{border-top:1px solid rgba(255,255,255,.16);margin-top:30px;padding-top:18px;
  display:flex;flex-wrap:wrap;gap:10px 22px;font-size:13px;color:#9fb4b9}
.foot-base a{color:#cfdde0}
@media (min-width:620px){.foot-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:32px}}
@media (min-width:1100px){.site-foot{padding-top:58px}}

/* Der Belegungskalender bringt sein eigenes CSS mit (assets/belegung-kalender.js).
   Auf kleinen Bildschirmen scrollt er waagerecht statt die Seite zu sprengen. */
#dhk-root{overflow-x:auto;-webkit-overflow-scrolling:touch}