@font-face{font-family:"Young Serif";src:url("fonts/young-serif.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url("fonts/figtree.woff2") format("woff2");font-weight:300 900;font-style:normal;font-display:swap}
/* Layout: Kopf mit Suchleiste, Raster der Unterkünfte, Detailansicht als eigene Ansicht mit fester Buchungsspalte rechts (mobil darunter). */
:root{
  --bg:#f5f6f4; --surface:#ffffff; --ink:#1d2a2c; --muted:#5d6b6b; --line:#dfe3e0;
  --weser:#1f4e57; --weser-soft:#e3eeee; --ocker:#c98a1b; --ocker-soft:#f7ecd6;
  --belegt:#e9ebe8; --belegt-ink:#a1aaa8; --ok:#2f7a4f;
  --display:"Young Serif", Georgia, "Times New Roman", serif;
  --body:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r:10px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#121a1b; --surface:#1a2425; --ink:#e7ecea; --muted:#9aa8a6; --line:#2c3a3b;
  --weser:#7fb7bf; --weser-soft:#1e3134; --ocker:#e0a63f; --ocker-soft:#352a14;
  --belegt:#222d2e; --belegt-ink:#5c6a69; --ok:#6cc08f; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#121a1b; --surface:#1a2425; --ink:#e7ecea; --muted:#9aa8a6; --line:#2c3a3b;
  --weser:#7fb7bf; --weser-soft:#1e3134; --ocker:#e0a63f; --ocker-soft:#352a14;
  --belegt:#222d2e; --belegt-ink:#5c6a69; --ok:#6cc08f; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.55}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--display);font-weight:400;text-wrap:balance;margin:0}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ocker);outline-offset:2px}
.demo{background:var(--ocker-soft);color:var(--ink);font-size:13px;text-align:center;padding-block:6px}
header.top{border-bottom:1px solid var(--line);background:var(--surface)}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:16px;flex-wrap:wrap}
.marke{display:flex;align-items:baseline;gap:10px;text-decoration:none;color:var(--ink);cursor:pointer;background:none;border:0;padding:0}
.marke b{font-family:var(--display);font-weight:400;font-size:24px;color:var(--weser)}
.marke span{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.kontakt{font-size:14px;color:var(--muted)}
.suche{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:0;border:1px solid var(--line);border-radius:999px;background:var(--surface);margin-block:0 18px;overflow:hidden}
.suche label{display:flex;flex-direction:column;padding:10px 20px;border-right:1px solid var(--line);font-size:12px;font-weight:600;letter-spacing:.04em;min-width:0}
.suche input,.suche select{border:0;background:transparent;padding:2px 0 0;font-size:14px;font-weight:400;min-width:0;width:100%}
.suche button{margin:6px;border:0;border-radius:999px;background:var(--weser);color:var(--surface);padding:0 22px;font-weight:600;cursor:pointer}
@media (max-width:720px){.suche{grid-template-columns:1fr 1fr;border-radius:var(--r)}.suche label{border-bottom:1px solid var(--line)}.suche button{grid-column:1/-1;padding:12px;border-radius:8px}}
main{padding-block:28px 56px}
.kopfzeile{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.kopfzeile h1{font-size:clamp(26px,4vw,38px)}
.kopfzeile p{margin:6px 0 0;color:var(--muted);max-width:60ch}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 14px;font-size:13px;cursor:pointer}
.chip[aria-pressed="true"]{border-color:var(--weser);background:var(--weser-soft);color:var(--weser);font-weight:600}
.raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:28px 22px}
.karte{display:flex;flex-direction:column;gap:10px;background:none;border:0;padding:0;text-align:left;cursor:pointer;min-width:0}
.bild{position:relative;aspect-ratio:4/3;max-width:100%;width:100%;border-radius:var(--r);overflow:hidden;background:var(--weser-soft)}
.bild canvas{width:100%;height:100%;display:block}
.bild .badge{position:absolute;left:10px;top:10px;background:var(--surface);color:var(--ink);font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px}
.karte h3{font-family:var(--body);font-weight:600;font-size:15px}
.karte .zeile{display:flex;justify-content:space-between;gap:8px}
.karte .meta{color:var(--muted);font-size:14px}
.preis{font-variant-numeric:tabular-nums}
.preis b{font-weight:700}
.leer{padding:40px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:var(--r)}
/* Detail */
.zurueck{background:none;border:0;color:var(--weser);font-weight:600;cursor:pointer;padding:0;margin-bottom:14px}
.galerie{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:8px;aspect-ratio:2.4/1;max-width:100%;border-radius:var(--r);overflow:hidden;margin-block:16px 28px}
.galerie > div{position:relative;min-height:0}
.galerie > div:first-child{grid-row:1/3}
.galerie canvas{width:100%;height:100%;display:block}
@media (max-width:720px){.galerie{grid-template-columns:1fr;grid-template-rows:1fr;aspect-ratio:4/3}.galerie > div:not(:first-child){display:none}.galerie > div:first-child{grid-row:auto}}
.detail{display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:48px;align-items:start}
@media (max-width:900px){.detail{grid-template-columns:minmax(0,1fr)}}
.eckdaten{color:var(--muted);margin:6px 0 0}
.block{border-top:1px solid var(--line);padding-block:24px}
.block h2{font-size:22px;margin-bottom:12px}
.ausstattung{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px 24px;padding:0;margin:0;list-style:none}
.ausstattung li{display:flex;gap:10px;align-items:center}
.ausstattung li::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--ocker);flex:none}
.regeln{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.regeln div{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:12px}
.regeln small{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
/* Kalender */
.kal-kopf{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.kal-kopf button{border:1px solid var(--line);background:var(--surface);border-radius:999px;width:34px;height:34px;cursor:pointer}
.monate{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
@media (max-width:620px){.monate{grid-template-columns:minmax(0,1fr)}}
.monat h3{font-family:var(--body);font-weight:600;font-size:15px;text-align:center;margin-bottom:8px}
.tage{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;text-align:center;font-size:13px;font-variant-numeric:tabular-nums}
.tage .wt{color:var(--muted);font-size:11px;padding-block:4px}
.tag{aspect-ratio:1;border:0;background:none;border-radius:999px;cursor:pointer;padding:0}
.tag:hover:not(:disabled){outline:1px solid var(--ink)}
.tag:disabled{color:var(--belegt-ink);text-decoration:line-through;cursor:not-allowed}
.tag.belegt{background:var(--belegt)}
.tag.imbereich{background:var(--weser-soft);border-radius:0}
.tag.anfang,.tag.ende{background:var(--weser);color:var(--surface);border-radius:999px}
.legende{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin-top:12px}
.legende i{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-1px;margin-right:6px}
/* Buchung */
.buchung{position:sticky;top:calc(env(safe-area-inset-top,0px) + 16px);background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px;box-shadow:0 6px 24px rgb(0 0 0 / .06);display:flex;flex-direction:column;gap:14px}
@media (max-width:900px){.buchung{position:static}}
.buchung .gross{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
.felder{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.felder label{display:flex;flex-direction:column;padding:8px 12px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.felder label + label{border-left:1px solid var(--line)}
.felder .voll{grid-column:1/-1;border-top:1px solid var(--line);border-left:0!important}
.felder input,.felder select{border:0;background:transparent;font-size:14px;font-weight:400;text-transform:none;letter-spacing:0;padding:2px 0 0;min-width:0}
.rechnung{display:grid;gap:6px;font-size:14px;font-variant-numeric:tabular-nums}
.rechnung div{display:flex;justify-content:space-between;gap:12px}
.rechnung .summe{border-top:1px solid var(--line);padding-top:8px;font-weight:700}
.hinweis{font-size:12px;color:var(--muted);margin:0}
.btn{border:0;border-radius:8px;padding:12px 16px;font-weight:600;cursor:pointer}
.btn-primaer{background:var(--weser);color:var(--surface)}
.btn-paypal{background:#ffc439;color:#111;display:flex;justify-content:center;align-items:center;gap:6px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.gast{display:grid;gap:8px}
.gast input,.gast textarea{border:1px solid var(--line);border-radius:8px;padding:10px 12px;background:var(--bg);width:100%}
.gast textarea{min-height:64px;resize:vertical}
.fehler{color:#b3261e;font-size:13px;margin:0}
.erfolg{background:var(--weser-soft);border-radius:8px;padding:14px;font-size:14px}
footer{border-top:1px solid var(--line);background:var(--surface);color:var(--muted);font-size:13px}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:22px}
@media (prefers-reduced-motion:no-preference){.karte .bild canvas{transition:transform .35s ease}.karte:hover .bild canvas{transform:scale(1.03)}}
.bild img,.galerie img{width:100%;height:100%;object-fit:cover;display:block}
.galerie > div{cursor:zoom-in}
.alle-fotos{position:absolute;right:12px;bottom:12px;background:var(--surface);color:var(--ink);border:1px solid var(--ink);border-radius:8px;padding:6px 12px;font-size:13px;font-weight:600;cursor:pointer}
.galerie{position:relative}
.lightbox{position:fixed;inset:0;background:rgb(10 16 17 / .94);z-index:50;display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top,0px) + 12px) max(16px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 12px) max(16px,env(safe-area-inset-left,0px))}
.lightbox .lb-kopf{display:flex;justify-content:space-between;align-items:center;color:#fff;font-size:14px;font-variant-numeric:tabular-nums}
.lightbox button{background:rgb(255 255 255 / .12);color:#fff;border:0;border-radius:999px;width:40px;height:40px;font-size:18px;cursor:pointer}
.lightbox .lb-bild{flex:1;display:flex;align-items:center;justify-content:center;gap:12px;min-height:0}
.lightbox img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px;min-width:0}
.hinweis-band{background:var(--weser-soft);color:var(--weser);border-radius:8px;padding:10px 14px;font-size:14px}
.karte .hinweis-band{padding:6px 10px;font-size:12px}
.kurzfakten{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.kurzfakten span{border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:13px;background:var(--surface)}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-size:15px;line-height:1.55}
img{max-width:100%}
[hidden]{display:none!important}
a{color:var(--weser)}
footer a{color:var(--muted)}
.rechtstext{max-width:72ch;padding-block:32px 64px}
.rechtstext h1{font-size:clamp(26px,4vw,36px);margin-bottom:8px}
.rechtstext h2{font-size:20px;margin:28px 0 8px}
.rechtstext h3{font-family:var(--body);font-weight:600;font-size:15px;margin:18px 0 4px}
.rechtstext p,.rechtstext li{color:var(--ink)}
.rechtstext .stand{color:var(--muted);font-size:13px}
.laden{padding:40px;text-align:center;color:var(--muted)}
.paypal-box{min-height:48px}
.hinweis-fehler{background:#fdecea;color:#8a1c12;border-radius:8px;padding:10px 14px;font-size:14px}
.tag{display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1}
.tag .tp{font-size:9px;color:var(--muted);font-variant-numeric:tabular-nums}
.tag.anfang .tp,.tag.ende .tp{color:inherit;opacity:.8}