/* Huus Waterkant – Stylesheet
   Gestaltung: helles, warmes Grundweiß, Boddenblau als Akzent, Gilda Display für Namen und Überschriften,
   Jost für Text und Beschriftungen (passend zum Logo). Schriften liegen lokal auf dem Server (keine Google-Verbindung). */

@font-face{font-family:"Gilda Display";src:url(../fonts/gilda-display-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Jost";src:url(../fonts/jost-latin-300-normal.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Jost";src:url(../fonts/jost-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Jost";src:url(../fonts/jost-latin-500-normal.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{
  --bg:#F3EDE1;          /* Grund, cremig */
  --raise:#E9E0CF;       /* Sandfläche */
  --ink:#1B2A33;         /* Text */
  --mute:#656D70;        /* Nebentext */
  --line:rgba(60,52,40,.16);
  --accent:#3E6476;      /* Boddenblau */
  --accent-dark:#2C4B5A;
  --hero-ink:#F1EEE8;
  --hero-soft:#BFD3DE;
  --tint:20,44,60;       /* Boddenblau für Abtönungen */
  --serif:"Gilda Display","Didot",Georgia,serif;
  --sans:"Jost","Futura","Century Gothic",Arial,sans-serif;
  --wrap:1240px;
  --gut:clamp(16px,4vw,48px);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:300;font-size:17px;line-height:1.75;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
picture{display:contents}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;text-decoration:none}
.skip:focus{left:8px}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.k{display:block;font-family:var(--sans);font-weight:500;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent)}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;line-height:1.1;text-wrap:balance}
h2{font-size:clamp(32px,3.6vw,54px)}
p{text-wrap:pretty}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;font-family:var(--sans);font-weight:500;font-size:12px;letter-spacing:.24em;text-transform:uppercase;text-decoration:none;padding:17px 28px;border:1px solid var(--accent);background:transparent;color:var(--ink);cursor:pointer;transition:background .35s,color .35s}
.btn:hover{background:var(--accent);color:#fff}
.btn.solid{background:var(--accent);color:#fff}
.btn.solid:hover{background:var(--accent-dark);border-color:var(--accent-dark)}

/* ---------- Navigation ---------- */
.site-head{position:absolute;z-index:20;top:0;left:0;right:0;padding-top:env(safe-area-inset-top,0px)}
.site-head .bar{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-block:24px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;font-family:var(--serif);font-size:22px;letter-spacing:.01em}
.brand .mark{width:38px;height:37px;flex:none;background:currentColor;-webkit-mask:url(../img/logo-kreis.png) center/contain no-repeat;mask:url(../img/logo-kreis.png) center/contain no-repeat}
.menu{display:flex;align-items:center;gap:34px;font-size:12px;font-weight:500;letter-spacing:.24em;text-transform:uppercase}
.menu a{text-decoration:none;opacity:.85;transition:opacity .3s}
.menu a:hover,.menu a[aria-current="page"]{opacity:1}
.menu a[aria-current="page"]{text-decoration:underline;text-underline-offset:8px;text-decoration-thickness:1px}
.menu-btn{display:none;background:none;border:0;color:inherit;font:inherit;font-size:12px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;cursor:pointer;padding:10px 0}
.site-head.on-photo{color:var(--hero-ink)}
.site-head.on-photo .brand{visibility:hidden}  /* Name steht groß im Bild */
.site-head.plain{position:relative;color:var(--ink);border-bottom:1px solid var(--line)}
.site-head.plain .brand .mark{color:var(--accent)}
@media (max-width:860px){
  .menu-btn{display:block}
  .menu{position:fixed;inset:0;z-index:30;flex-direction:column;justify-content:center;gap:28px;background:var(--bg);color:var(--ink);font-size:14px;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
  .menu.open{opacity:1;visibility:visible}
  .menu a{opacity:1}
  .menu .close{position:absolute;top:calc(env(safe-area-inset-top,0px) + 24px);right:var(--gut);background:none;border:0;font:inherit;letter-spacing:.24em;text-transform:uppercase;color:inherit;cursor:pointer}
  .site-head.on-photo .brand{visibility:visible}
  .site-head.on-photo .brand span{display:none}
}
@media (min-width:861px){.menu .close{display:none}}

/* ---------- Startbild ---------- */
.hero{position:relative;height:min(100svh,1000px);min-height:600px;overflow:hidden;background:#2A3238}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:24% 60%;max-width:none}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:
  linear-gradient(to left,rgba(var(--tint),.74) 0%,rgba(var(--tint),.5) 34%,rgba(var(--tint),.12) 56%,rgba(var(--tint),0) 68%),
  linear-gradient(to top,rgba(var(--tint),.55) 0%,rgba(var(--tint),0) 30%),
  linear-gradient(to bottom,rgba(var(--tint),.3) 0%,rgba(var(--tint),0) 16%)}
.hero-text{position:absolute;z-index:2;right:clamp(16px,5vw,90px);top:50%;transform:translateY(-50%);width:min(620px,44vw);text-align:center;color:var(--hero-ink)}
.hero-text .logo{width:64px;height:62px;margin:0 auto 34px;background:var(--hero-ink);-webkit-mask:url(../img/logo-kreis.png) center/contain no-repeat;mask:url(../img/logo-kreis.png) center/contain no-repeat}
.hero-text .k{color:var(--hero-soft);margin-bottom:22px}
.hero-text h1{font-size:clamp(36px,4.2vw,72px);line-height:1;white-space:nowrap}
.hero-text .line{width:1px;height:46px;background:var(--hero-soft);margin:28px auto}
.hero-text p{margin:0 auto 36px;max-width:28ch;color:rgba(241,238,232,.86)}
.hero-text .btn{color:var(--hero-ink);border-color:var(--hero-soft)}
.hero-text .btn:hover{background:var(--hero-soft);color:var(--ink)}
.scroll{position:absolute;z-index:2;left:50%;bottom:24px;transform:translateX(-50%);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:rgba(241,238,232,.75);text-decoration:none}
@media (max-width:900px){
  .hero::before{background:linear-gradient(to top,rgba(var(--tint),.92) 0%,rgba(var(--tint),.6) 42%,rgba(var(--tint),0) 70%),linear-gradient(to bottom,rgba(var(--tint),.35) 0%,rgba(var(--tint),0) 18%)}
  .hero-text{left:16px;right:16px;width:auto;top:auto;bottom:40px;transform:none}
  .hero-text .logo{display:none}
  .hero-text .line{height:28px;margin:18px auto}
  .hero-text h1{font-size:clamp(30px,9vw,40px)}
  .scroll{display:none}
}

/* ---------- Einleitung ---------- */
.intro{padding-block:clamp(110px,14vw,200px);text-align:center}
.intro h2{max-width:22ch;margin:22px auto 30px}
.intro p{max-width:60ch;margin:0 auto;color:var(--mute)}
.facts{display:flex;justify-content:center;flex-wrap:wrap;margin:64px 0 0;padding:0;list-style:none;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.facts li{padding:26px clamp(20px,4vw,56px);border-left:1px solid var(--line)}
.facts li:first-child{border-left:0}
.facts b{display:block;font-family:var(--serif);font-weight:400;font-size:34px;line-height:1.1}
.facts span{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--mute)}
@media (max-width:640px){.facts li{flex:1 1 50%;border-left:0}}

/* ---------- Räume ---------- */
.rooms{display:flex;flex-direction:column;gap:clamp(90px,11vw,160px);padding-bottom:clamp(110px,14vw,200px)}
.rm{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(12px,1.6vw,22px);align-items:end}
.rm figure{margin:0;overflow:hidden;background:var(--raise)}
.rm img{width:100%;height:100%;object-fit:cover;transition:transform 1.8s cubic-bezier(.2,.7,.2,1)}
.rm figure:hover img{transform:scale(1.03)}
.rm .big{grid-column:1/8;aspect-ratio:4/5}
.rm .txt{grid-column:9/13;padding-bottom:12px}
.rm.r .big{grid-column:6/13;grid-row:1}
.rm.r .txt{grid-column:1/5;grid-row:1}
.rm h3{font-size:clamp(28px,2.6vw,40px);margin:16px 0}
.rm p{color:var(--mute);margin:0 0 26px}
.rm .small{width:72%;aspect-ratio:4/3}
@media (max-width:860px){.rm .big,.rm.r .big,.rm .txt,.rm.r .txt{grid-column:1/-1;grid-row:auto}.rm .small{width:100%}}

/* ---------- Bildband ---------- */
.band{position:relative;height:clamp(380px,56vw,720px);overflow:hidden;margin:0}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
.band::after{content:"";position:absolute;inset:0;background:rgba(var(--tint),.5)}
.band blockquote{position:absolute;z-index:2;inset:0;display:flex;align-items:center;justify-content:center;margin:0;padding:24px;text-align:center;font-family:var(--serif);font-size:clamp(28px,3.6vw,54px);line-height:1.2;color:var(--hero-ink);text-shadow:0 2px 20px rgba(10,24,34,.35)}

/* ---------- Ausstattung ---------- */
.draw{display:block;color:var(--accent);opacity:.75}
.reeds{width:150px;height:auto;margin-top:40px}
.waves{width:160px;height:auto;margin:6px 0 22px}
.house{width:92px;height:auto;margin:0 auto 26px}
.equip{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,6vw,110px);padding-block:clamp(110px,14vw,200px)}
.equip h2{margin-top:20px}
.feat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line)}
.feat article{padding:30px 32px 30px 0;border-bottom:1px solid var(--line);min-width:0}
.feat article:nth-child(even){padding-left:32px;padding-right:0;border-left:1px solid var(--line)}
.feat h3{font-size:clamp(24px,2vw,30px);margin:10px 0 8px}
.feat p{margin:0;color:var(--mute);font-size:16px}
@media (max-width:900px){.equip{grid-template-columns:1fr}.reeds{width:120px;margin-top:24px}}
@media (max-width:560px){.feat{grid-template-columns:1fr}.feat article:nth-child(even){padding-left:0;border-left:0}}

/* ---------- Lage ---------- */
.lage{background:var(--raise);padding-block:clamp(90px,11vw,160px)}
.lagein{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,110px);align-items:center}
.lage figure{margin:0}
.lage img{width:100%;aspect-ratio:4/3;object-fit:cover}
.lage h2{margin:20px 0 22px}
.lage p{color:var(--mute);margin:0 0 30px;max-width:46ch}
.dist{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.dist th,.dist td{padding:14px 0;border-bottom:1px solid var(--line);vertical-align:baseline;text-align:left}
.dist tr:first-child th,.dist tr:first-child td{border-top:1px solid var(--line)}
.dist th{font-family:var(--serif);font-weight:400;font-size:20px}
.dist td{color:var(--mute);font-size:14px;padding-left:16px}
.dist td.km{text-align:right;font-family:var(--serif);font-size:20px;color:var(--accent);white-space:nowrap}
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px);margin-top:clamp(56px,7vw,96px)}
.cols h3{font-size:24px;margin-bottom:10px}
.cols ul{list-style:none;margin:0;padding:0;font-size:15px;color:var(--mute)}
.cols li{padding:8px 0;border-bottom:1px dotted var(--line)}
.cols b{font-weight:400;color:var(--ink)}
@media (max-width:560px){.dist td:not(.km){display:none}}
@media (max-width:820px){.cols{grid-template-columns:1fr}}
@media (max-width:900px){.lagein{grid-template-columns:1fr}}

/* ---------- Abschluss ---------- */
.req{padding-block:clamp(110px,14vw,200px);text-align:center}
.req h2{font-size:clamp(38px,5vw,76px);max-width:16ch;margin:22px auto 26px}
.req p{color:var(--mute);max-width:48ch;margin:0 auto 40px}
.req address a{text-decoration:none}
.req address{font-style:normal;color:var(--mute);font-size:14px;line-height:1.9;margin-top:56px;letter-spacing:.02em}

/* ---------- Unterseiten ---------- */
.page{padding-block:clamp(72px,9vw,130px)}
.page-head{max-width:760px;margin-bottom:clamp(48px,6vw,80px)}
.page-head h1{font-size:clamp(40px,5vw,72px);margin:20px 0 22px}
.page-head p{color:var(--mute);margin:0;max-width:56ch}
.text{max-width:760px}
.text h2{font-size:clamp(24px,2.4vw,32px);margin:48px 0 12px}
.text h3{font-family:var(--sans);font-weight:500;font-size:17px;margin:28px 0 6px}
.text p,.text li{color:var(--mute)}
.text a{color:var(--accent)}
.note{border-left:2px solid var(--accent);padding:12px 18px;background:var(--raise);color:var(--ink);font-size:15px}

/* Anfrage-Formular */
.form-wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(32px,6vw,100px);align-items:start}
.form{display:grid;grid-template-columns:1fr 1fr;gap:26px 28px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field.full{grid-column:1/-1}
.field label{font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--mute)}
.field input,.field select,.field textarea{font:inherit;font-size:17px;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--ink);border-radius:0;padding:10px 0;width:100%;min-width:0}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--accent);box-shadow:0 1px 0 var(--accent)}
.check{grid-column:1/-1;display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--mute)}
.check input{margin-top:5px;accent-color:var(--accent)}
.form-actions{grid-column:1/-1;display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.form-msg{margin:0;font-size:15px;color:var(--accent);min-height:1.5em}
.form-msg.err{color:#9A3B26}
.aside{background:var(--raise);padding:clamp(24px,3vw,40px)}
.aside h2{font-size:26px;margin:16px 0 14px}
.aside p,.aside address{font-style:normal;color:var(--mute);font-size:15px;margin:0 0 16px}
.aside b{color:var(--ink);font-weight:400}
.aside .reeds{width:110px;margin-top:28px}
@media (max-width:900px){.form-wrap{grid-template-columns:1fr}}
@media (max-width:560px){.form{grid-template-columns:1fr}}

/* ---------- Fuß ---------- */
.site-foot{border-top:1px solid var(--line);padding-block:30px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.site-foot .wrap{display:flex;justify-content:space-between;gap:16px 28px;flex-wrap:wrap}
.site-foot nav{display:flex;gap:24px;flex-wrap:wrap}
.site-foot a{text-decoration:none}
.site-foot a:hover{color:var(--ink)}

/* ---------- Ergänzungen: Lage-Links, Buchen, Umgebung ---------- */
.dist th a{text-decoration:none;border-bottom:1px solid var(--line);transition:border-color .3s}
.dist th a:hover{border-color:var(--accent)}
.lage .more{margin:34px 0 0}
.book{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(32px,6vw,100px);align-items:start}
.book-main h2{font-size:clamp(26px,2.6vw,36px);margin:64px 0 18px}
.hint{font-size:14px;color:var(--mute);margin:14px 0 0}
.facts-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.facts-list li{display:grid;grid-template-columns:140px minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.facts-list span{font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--mute);padding-top:4px}
.aside a{color:var(--accent)}
@media (max-width:900px){.book{grid-template-columns:1fr}}
@media (max-width:520px){.facts-list li{grid-template-columns:1fr;gap:2px}}
.jump{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:30px;font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase}
.jump a{text-decoration:none;color:var(--accent);border-bottom:1px solid transparent}
.jump a:hover{border-color:var(--accent)}
.page-img{margin:0 0 clamp(40px,6vw,80px)}
.page-img img{width:100%;aspect-ratio:21/8;object-fit:cover}
@media (max-width:700px){.page-img img{aspect-ratio:4/3}}
.place{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,5vw,90px);padding-block:clamp(40px,5vw,64px);border-top:1px solid var(--line);scroll-margin-top:24px}
.place h2{font-size:clamp(28px,3vw,42px);margin:14px 0 8px}
.place .km{margin:0;font-family:var(--serif);font-size:22px;color:var(--accent)}
.place-body p{margin:0 0 16px;color:var(--mute);max-width:62ch}
.tips-list{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.tips-list li{font-size:14px;padding:6px 14px;border:1px solid var(--line);color:var(--ink)}
.eat{list-style:none;margin:0 0 26px;padding:0;border-top:1px solid var(--line)}
.eat li{display:flex;justify-content:space-between;gap:20px;padding:14px 0;border-bottom:1px solid var(--line)}
.eat b{font-family:var(--serif);font-weight:400;font-size:20px}
.eat span{color:var(--mute);font-size:15px;text-align:right}
@media (max-width:820px){.place{grid-template-columns:1fr;gap:8px}}
@media (max-width:520px){.eat li{flex-direction:column;gap:0}.eat span{text-align:left}}

/* ---------- Rasender Roland ---------- */
.placeholder{margin:0 0 clamp(48px,6vw,80px);background:var(--raise);border:1px dashed rgba(62,100,118,.45);aspect-ratio:21/8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;color:var(--accent)}
.placeholder .train{width:min(520px,80%);height:auto}
.placeholder figcaption{font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--mute);text-align:center}
@media (max-width:700px){.placeholder{aspect-ratio:4/3}}
.near-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-bottom:24px}
.near-grid div{border-top:1px solid var(--ink);padding-top:16px}
.near-grid b{display:block;font-family:var(--serif);font-weight:400;font-size:26px}
.near-grid span{display:block;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin:2px 0 10px}
.near-grid p{margin:0}
@media (max-width:640px){.near-grid{grid-template-columns:1fr}}
.line{list-style:none;margin:10px 0 0;padding:0 0 0 26px;position:relative}
.line::before{content:"";position:absolute;left:6px;top:14px;bottom:14px;width:1px;background:var(--accent)}
.line li{position:relative;display:grid;grid-template-columns:62px minmax(0,1fr);column-gap:16px;padding:9px 0;border-bottom:1px solid var(--line)}
.line li::before{content:"";position:absolute;left:-24px;top:16px;width:9px;height:9px;border-radius:50%;background:var(--bg);border:1px solid var(--accent)}
.line li.near::before{background:var(--accent);box-shadow:0 0 0 4px rgba(62,100,118,.18)}
.line li.bed::before{width:7px;height:7px;left:-23px;top:17px}
.line .t{font-variant-numeric:tabular-nums;color:var(--mute);font-size:15px;padding-top:2px}
.line .n{font-family:var(--serif);font-size:20px;color:var(--ink)}
.line .n em{font-family:var(--sans);font-style:normal;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-left:8px}
.line .d{grid-column:2;font-size:14px;color:var(--mute)}
.line .d:empty{display:none}
.season{border-top:1px solid var(--line);padding:22px 0 8px}
.season:first-child{border-top:0;padding-top:0}
.season h3{font-family:var(--serif);font-weight:400;font-size:24px;margin:0 0 8px}
.season h3 small{display:block;font-family:var(--sans);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-top:4px}
.season.warn h3 small{color:#9A5B2E}
.times{border-collapse:collapse;margin:16px 0 8px;font-variant-numeric:tabular-nums;font-size:15px;display:block;overflow-x:auto;max-width:100%}
.times th{text-align:left;font-weight:500;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);padding:10px 18px 10px 0;white-space:nowrap}
.times td{padding:10px 14px;border-left:1px solid var(--line);color:var(--ink)}
.times tr{border-bottom:1px solid var(--line)}
.small-note{font-size:14px}
.link-arrow{color:var(--accent);text-decoration:none;font-weight:400}
.link-arrow::after{content:" →"}
.link-arrow:hover{text-decoration:underline}
.sights{list-style:none;margin:0 0 30px;padding:0;border-top:1px solid var(--line)}
.sights li{display:grid;grid-template-columns:200px minmax(0,1fr);gap:20px;padding:16px 0;border-bottom:1px solid var(--line)}
.sights b{font-family:var(--serif);font-weight:400;font-size:20px}
.sights span{color:var(--mute)}
@media (max-width:640px){.sights li{grid-template-columns:1fr;gap:2px}}
.place-body .note a{color:var(--accent)}
.place-head,.place-body{min-width:0}

[data-count]{font-variant-numeric:tabular-nums}
.near-grid span i{font-style:normal}
.photo-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,22px);margin:0 0 clamp(16px,3vw,32px)}
.placeholder.small{aspect-ratio:4/3;margin:0}
.placeholder.small .draw{width:min(180px,50%);margin:0}
.place-body a.link-arrow{display:inline}
@media (max-width:640px){.photo-pair{grid-template-columns:1fr}}
.hero-text h1{margin-bottom:24px}
.hero-text p{max-width:34ch}
.eat b a,.cols a{text-decoration:none;border-bottom:1px solid var(--line)}.eat b a:hover,.cols a:hover{border-color:var(--accent)}
.sights span a,.sights b a,.place-body p a:not(.btn):not(.link-arrow){color:var(--accent)}
.lage .more{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- Aufklappende Menüs ---------- */
.mi{position:relative;display:flex;align-items:center;gap:6px}
.menu .top-link{text-decoration:none}
.menu .top-link[aria-current="page"]{text-decoration:underline;text-underline-offset:8px;text-decoration-thickness:1px}
.sub-toggle{position:relative;width:16px;height:16px;padding:0;border:0;background:none;color:inherit;cursor:pointer;opacity:.85}
.sub-toggle::before{content:"";position:absolute;left:4px;top:2px;width:6px;height:6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);transition:transform .3s}
.mi:hover .sub-toggle::before,.mi.open .sub-toggle::before{transform:translateY(3px) rotate(225deg)}
.sub{position:absolute;z-index:40;top:calc(100% + 18px);left:-26px;min-width:310px;padding:12px 0;background:var(--bg);color:var(--ink);border:1px solid var(--line);box-shadow:0 22px 44px -28px rgba(27,42,51,.4);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .3s,transform .3s,visibility .3s}
.sub::before{content:"";position:absolute;left:0;right:0;top:-20px;height:20px}
.mi:last-of-type .sub{left:auto;right:-10px}
.mi:hover .sub,.mi:focus-within .sub,.mi.open .sub{opacity:1;visibility:visible;transform:none}
.menu .sub a{display:block;padding:11px 26px;text-decoration:none;text-transform:none;letter-spacing:0;opacity:1;transition:background .25s}
.sub a b{display:block;font-family:var(--serif);font-weight:400;font-size:19px;line-height:1.3}
.sub a span{display:block;font-size:13px;font-weight:300;color:var(--mute);margin-top:2px}
.sub a:hover,.sub a:focus-visible{background:var(--raise)}
@media (max-width:860px){
  .menu{justify-content:flex-start;overflow-y:auto;padding:calc(env(safe-area-inset-top,0px) + 90px) 24px 48px;gap:34px}
  .mi{flex-direction:column;gap:10px;text-align:center}
  .sub-toggle{display:none}
  .sub{position:static;min-width:0;padding:0;border:0;box-shadow:none;background:none;opacity:1;visibility:visible;transform:none}
  .sub::before{display:none}
  .menu .sub a{padding:6px 0}
  .sub a b{font-size:21px}
  .sub a span{display:none}
  .menu .top-link{font-size:11px;color:var(--accent)}
}

/* Untermenü: dunkle Tafel, gleitet von oben auf */
@media (min-width:861px){
  .sub{background:#1E3140;color:#F1EEE8;border:0;box-shadow:0 26px 50px -24px rgba(12,24,33,.55);opacity:1;visibility:hidden;transform:none;clip-path:inset(0 0 100% 0);transition:clip-path .45s cubic-bezier(.2,.7,.2,1),visibility .45s}
  .mi:hover .sub,.mi:focus-within .sub,.mi.open .sub{visibility:visible;clip-path:inset(0 0 0 0)}
  .sub a span{color:#A9BCC7}
  .sub a:hover,.sub a:focus-visible{background:rgba(241,238,232,.07)}
  .sub a b{color:#F1EEE8}
  .menu .sub a{transform:translateY(-6px);opacity:0;transition:background .25s,transform .45s cubic-bezier(.2,.7,.2,1),opacity .45s}
  .mi:hover .sub a,.mi:focus-within .sub a,.mi.open .sub a{transform:none;opacity:1}
  .mi:hover .sub a:nth-child(2),.mi:focus-within .sub a:nth-child(2){transition-delay:0s,.04s,.04s}
  .mi:hover .sub a:nth-child(3),.mi:focus-within .sub a:nth-child(3){transition-delay:0s,.08s,.08s}
  .mi:hover .sub a:nth-child(4),.mi:focus-within .sub a:nth-child(4){transition-delay:0s,.12s,.12s}
  .mi:hover .sub a:nth-child(5),.mi:focus-within .sub a:nth-child(5){transition-delay:0s,.16s,.16s}
}
@media (min-width:861px) and (prefers-reduced-motion:reduce){.sub{clip-path:none}.menu .sub a{transform:none;opacity:1}}
@media (min-width:861px){
  .sub{border-radius:14px;padding:10px;clip-path:inset(0 0 100% 0 round 14px)}
  .mi:hover .sub,.mi:focus-within .sub,.mi.open .sub{clip-path:inset(0 0 0 0 round 14px)}
  .menu .sub a{border-radius:9px;padding:11px 18px}
}
/* Ruhigeres Aufgleiten: weich, ohne gestaffelte Einträge, kurze Verzögerung gegen Flackern */
@media (min-width:861px){
  .sub{transition:clip-path .6s cubic-bezier(.33,0,.2,1) .15s,visibility 0s .75s}
  .mi:hover .sub,.mi:focus-within .sub,.mi.open .sub{transition:clip-path .6s cubic-bezier(.33,0,.2,1) .08s,visibility 0s .08s}
  .menu .sub a,.mi:hover .sub a,.mi:focus-within .sub a,.mi.open .sub a{transform:none;opacity:1;transition:background .25s;transition-delay:0s}
}
/* Zeichnungen als ruhige Bildflächen */
.placeholder{border:0;background:var(--raise)}
.placeholder figcaption{letter-spacing:.24em}
.text strong{font-weight:400;color:var(--ink)}
.line li{grid-template-columns:minmax(0,1fr)}.line .d{grid-column:1}

/* ---------- Häufige Fragen ---------- */
.faq{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,5vw,90px);margin-top:clamp(72px,9vw,120px);padding-top:clamp(40px,5vw,64px);border-top:1px solid var(--line);scroll-margin-top:24px}
.faq h2{font-size:clamp(28px,3vw,42px);margin-top:14px}
.faq-list{border-top:1px solid var(--line);min-width:0}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;font-family:var(--serif);font-size:clamp(19px,1.7vw,22px);color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:9px;height:9px;border-right:1px solid var(--accent);border-bottom:1px solid var(--accent);transform:rotate(45deg) translateY(-3px);transition:transform .35s}
.faq details[open] summary::after{transform:rotate(225deg) translateY(-3px)}
.faq summary:hover{color:var(--accent)}
.faq details p{margin:0 0 22px;color:var(--mute);max-width:60ch}
@media (max-width:820px){.faq{grid-template-columns:1fr;gap:12px}}

/* ---------- Kartenskizze Rasender Roland ---------- */
.place-body .rmap-wrap{margin:22px 0 30px;padding:clamp(12px,2vw,24px);background:var(--raise);border-radius:14px}
.rmap{width:100%;height:auto;display:block;overflow:visible}
.rmap .track{fill:none;stroke:var(--accent);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.rmap .track2{fill:none;stroke:var(--raise);stroke-width:1;stroke-dasharray:6 8}
.rmap .st{fill:var(--bg);stroke:var(--accent);stroke-width:1.6}
.rmap .st.big{fill:var(--accent)}
.rmap .lbl{font-family:var(--sans);font-size:13px;fill:var(--mute)}
.rmap .lbl.big{font-family:var(--serif);font-size:17px;fill:var(--ink)}
.rmap .water text{font-family:var(--sans);font-size:12px;letter-spacing:.24em;text-transform:uppercase;fill:var(--accent);opacity:.55}
.rmap .isle{fill:none;stroke:var(--accent);stroke-width:1.2;stroke-dasharray:3 3}
.rmap .isle-t{font-family:var(--serif);font-size:15px;fill:var(--mute)}
.rmap .home circle{fill:#9A5B2E}
.rmap .home path{fill:none;stroke:#fff;stroke-width:1.6;stroke-linejoin:round}
.rmap .home text{font-family:var(--serif);font-size:17px;fill:#9A5B2E}
.rmap .nord path{fill:none;stroke:var(--mute);stroke-width:1.2}
.rmap .nord text{font-family:var(--sans);font-size:11px;fill:var(--mute)}
.rmap-wrap figcaption{margin-top:10px;font-size:12px;color:var(--mute)}
@media (max-width:640px){.rmap .lbl{font-size:18px}.rmap .lbl.big{font-size:22px}}
/* Karte v2 */
.place-body .rmap-wrap{padding:0;background:none;border-radius:0}
.rmap{border-radius:12px}
.rmap .sea{fill:#D6DFE0}
.rmap .land{fill:#EFE8DA;stroke:#B9C3C2;stroke-width:1}
.rmap .wald{fill:url(#wald);stroke:none}
.rmap pattern circle{fill:#9DAE9A}
.rmap .pier{stroke:var(--mute);stroke-width:2;stroke-linecap:round}
.rmap .water text{font-size:12px;letter-spacing:.24em;fill:#5F8394;opacity:1;font-style:normal}
.rmap .town text{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;fill:#9A9789}
.rmap .track2{stroke:#EFE8DA}
.rmap .sight path{fill:#9A5B2E}
.rmap .sight text{font-family:var(--sans);font-size:12px;fill:#9A5B2E;font-style:italic}
.rmap .home text.sm{font-family:var(--sans);font-size:11px;fill:var(--mute)}
.rmap .scale path{fill:none;stroke:var(--mute);stroke-width:1.2}
.rmap .scale text{font-family:var(--sans);font-size:11px;fill:var(--mute)}
.rmap .isle-t{font-size:14px}
.rmap-legend{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:12px;font-size:13px;color:var(--mute)}
.rmap-legend span{display:inline-flex;align-items:center;gap:8px}
.rmap-legend i{display:inline-block}
.lg-big{width:10px;height:10px;border-radius:50%;background:var(--accent)}
.lg-small{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--accent);background:var(--bg)}
.lg-sight{width:8px;height:8px;background:#9A5B2E;transform:rotate(45deg)}
.lg-wald{width:14px;height:10px;background:radial-gradient(#9DAE9A 1px,transparent 1.5px) 0 0/4px 4px}
.lg-home{width:12px;height:12px;border-radius:50%;background:#9A5B2E}
/* Karte: Halte vergrößern sich beim Darüberfahren */
.rmap .stn{cursor:pointer;outline:none}
.rmap .hit{fill:transparent}
.rmap .stn .st{transform-box:fill-box;transform-origin:center;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.rmap .stn .lbl{transition:font-size .35s cubic-bezier(.2,.7,.2,1),fill .35s}
.rmap .stn:hover .st,.rmap .stn:focus .st,.rmap .stn.on .st{transform:scale(1.6)}
.rmap .stn:hover .lbl,.rmap .stn:focus .lbl,.rmap .stn.on .lbl{font-size:19px;fill:var(--ink)}
.rmap .stn.big:hover .lbl,.rmap .stn.big:focus .lbl,.rmap .stn.big.on .lbl{font-size:23px}
.rmap .home circle{fill:#9A5B2E}
.rmap .home text{font-size:20px}
.rmap-info{margin:14px 0 0;font-size:15px;color:var(--mute);min-height:1.6em}
.rmap-info b{font-family:var(--serif);font-weight:400;font-size:19px;color:var(--ink)}

/* Fotoreihe (Rasender Roland, Kreidefelsen) */
.photo-row{display:grid;grid-template-columns:9fr 16fr 16fr;gap:clamp(10px,1.4vw,18px);margin:0 0 clamp(48px,6vw,80px)}
.photo-row figure{margin:0;min-width:0}
.photo-row img{width:100%;height:100%;object-fit:cover;display:block}
.photo-row figure:first-child img{aspect-ratio:3/4}
.photo-row figure:not(:first-child) img{aspect-ratio:4/3}
.photo-row.two{grid-template-columns:1fr 1fr}
.photo-row.two figure img{aspect-ratio:2/3}
@media (max-width:760px){
  .photo-row,.photo-row.two{grid-template-columns:1fr}
  .photo-row img,.photo-row figure:first-child img,.photo-row figure:not(:first-child) img{aspect-ratio:4/3;height:auto}
}

.photo-row.pair{grid-template-columns:9fr 16fr}
@media (max-width:760px){.photo-row.pair{grid-template-columns:1fr}}

/* Bilder ohne Beschnitt: volles Seitenverhältnis */
.page-img img,.page-img img[src]{aspect-ratio:auto;height:auto;object-fit:contain}
@media (max-width:760px){
  .photo-row img,.photo-row figure:first-child img,.photo-row figure:not(:first-child) img,.photo-row.two figure img{aspect-ratio:auto;height:auto;object-fit:contain}
}
/* Fotoreihen in natürlichem Format, Spaltenbreite nach Seitenverhältnis */
.photo-row.free{align-items:start;margin-bottom:clamp(10px,1.4vw,18px)}
.photo-row.free + :not(.photo-row){margin-top:clamp(38px,4.6vw,62px)}
.photo-row.free img{aspect-ratio:auto!important;height:auto!important;object-fit:contain}
@media (max-width:760px){.photo-row.free{grid-template-columns:1fr!important}}

/* Bessere Lesbarkeit: Fließtext etwas größer, kräftiger und dunkler */
:root{--mute:#454E52}
body{font-weight:400;font-size:18px;line-height:1.7}
.feat p{font-size:17px}
.cols ul,.aside p,.aside address,.note{font-size:16px}
.dist td,.tips-list li,.check,.hint,.req address{font-size:15px}
@media (max-width:700px){body{font-size:17px}}
.eat span{font-size:16px}