/* Selbst gehostete Schriften. Bewusst kein Laden von fonts.googleapis.com:
   dynamisches Einbinden von Google Fonts uebertraegt die IP der Besucher in die USA
   und war Gegenstand der Abmahnwelle nach LG Muenchen I, Az. 3 O 17493/20.
   Quelle: Google Fonts, Spectral (300/400/500/600, Kursiv 300/400) und Manrope
   (400/500/600/700), Subsets latin + latin-ext, einmalig heruntergeladen. */
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/manrope-400-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/manrope-400-normal-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;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/manrope-500-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/manrope-500-normal-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;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/manrope-600-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/manrope-600-normal-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;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/manrope-700-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/manrope-700-normal-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;
}
/* latin-ext */
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(assets/fonts/spectral-300-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(assets/fonts/spectral-300-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;
}
/* latin-ext */
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/spectral-400-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/spectral-400-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;
}
/* latin-ext */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(assets/fonts/spectral-300-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(assets/fonts/spectral-300-normal-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;
}
/* latin-ext */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/spectral-400-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/spectral-400-normal-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;
}
/* latin-ext */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/spectral-500-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/spectral-500-normal-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;
}
/* latin-ext */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/spectral-600-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/spectral-600-normal-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;
}

/* ============================================================
   Haus am Grimnitzsee — design system
   Derived from the Claude Design mockup (Spectral + Manrope,
   sand/teal/gold palette, organic blobs, paper grain).
   ============================================================ */

:root {
  --sand:    #EAE0D0;   /* page background        */
  --sand-2:  #E9D9BC;   /* alternating band + geteilte Farbfelder */
  --cream:   #F3EDE2;   /* cards / light surfaces */
  --nav-bg:  rgba(234,224,208,.85); /* nav bar — muss zu --sand passen */
  --ink:     #1F1E1B;   /* headings               */
  --ink-2:   #3a3833;   /* nav text               */
  --muted:   #56524A;   /* body copy              */
  --muted-2: #807b70;   /* captions / labels      */
  --muted-3: #6A665C;
  --teal:      #213A4B; /* primary / buttons      */
  --teal-2:    #2f5168; /* decorative             */
  --teal-dark: #1c2c38; /* footer                 */
  --gold:    #A9802F;   /* accents / eyebrows     */
  --gold-2:  #BC8A52;
  --gold-3:  #cfa760;   /* gold on dark           */
  --sage:    #8FA0A8;
  --line:    rgba(33,58,75,.12);
  --serif: 'Spectral', Georgia, serif;
  --sans:  'Manrope', system-ui, -apple-system, sans-serif;
  --wrap: 1280px;
  --shadow-card: 0 18px 40px -28px rgba(33,58,75,.4);
  --shadow-lift: 0 30px 60px -30px rgba(33,58,75,.35);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--sand);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--teal); color: var(--cream); }

/* paper grain overlay */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 9999;
  pointer-events: none; opacity: .05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* nur für Screenreader — hält das H1 im Dokument, ohne es zu zeigen */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- type ---------- */
h1, h2, h3 { font-family: var(--serif); font-weight: 300; color: var(--ink); line-height: 1.08; letter-spacing: -.01em; }
h1 { font-size: clamp(2.4rem, 5.2vw, 4rem); }
h2 { font-size: clamp(2rem, 3.8vw, 2.9rem); }
h3 { font-size: 1.5rem; font-weight: 400; }
.serif-italic { font-style: italic; color: var(--teal); }
p { color: var(--muted); }
.lead { font-size: 1.06rem; line-height: 1.75; max-width: 50ch; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: .75rem; letter-spacing: .3em; font-weight: 600;
  color: var(--gold); text-transform: uppercase;
}
.eyebrow::before { content: ''; width: 40px; height: 1px; background: var(--gold); }
/* Zentrierte Ueberschriften bekommen den Strich auf beiden Seiten, die
   Ueberschriften der geteilten Baender behalten nur einen (Feedback 04.08.2026). */
.eyebrow.center { justify-content: center; }
.eyebrow.center::after { content: ''; width: 40px; height: 1px; background: var(--gold); }
.eyebrow.no-rule::before { display: none; }

/* ---------- layout ---------- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 40px; }
section { padding: 84px 0; }
.band { background: var(--sand-2); }
.dark { background: var(--teal); color: var(--cream); }
.dark h1, .dark h2, .dark h3 { color: var(--cream); }
.dark p { color: rgba(239,236,228,.78); }
.dark .eyebrow { color: var(--gold-3); }
.dark .eyebrow::before, .dark .eyebrow.center::after { background: var(--gold-3); }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; font-family: inherit; cursor: pointer;
  border: none; background: var(--teal); color: var(--cream);
  padding: 15px 30px; border-radius: 44px;
  font-size: .9rem; letter-spacing: .04em; font-weight: 600;
  box-shadow: 0 18px 36px -18px rgba(33,58,75,.7);
  transition: transform .25s ease, box-shadow .3s ease, background .3s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-ghost {
  background: transparent; color: var(--teal);
  border: 1.5px solid rgba(33,58,75,.3); box-shadow: none;
  padding: 14px 28px;
}
.dark .btn-ghost { color: var(--cream); border-color: rgba(239,236,228,.4); }
.btn-gold { background: var(--gold-2); color: var(--ink); box-shadow: none; font-weight: 700; }
.btn-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 14px 40px;
  background: var(--nav-bg); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(33,58,75,.1);
}
.brand { display: flex; align-items: center; gap: 13px; }
.brand img { height: 40px; width: auto; flex: none; }
.brand .wordmark { display: flex; flex-direction: column; line-height: 1.1; }
.brand .wordmark .top { font-size: .68rem; letter-spacing: .34em; color: var(--muted-3); font-weight: 500; }
.brand .wordmark .main { font-size: 1rem; letter-spacing: .22em; font-weight: 700; color: var(--ink); }

.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a.link {
  position: relative; font-size: .85rem; letter-spacing: .08em;
  color: var(--ink-2); font-weight: 500; white-space: nowrap; transition: color .25s;
}
.nav-links a.link::after {
  content: ''; position: absolute; left: 0; bottom: -4px; height: 1px; width: 0;
  background: var(--gold); transition: width .3s ease;
}
.nav-links a.link:hover::after, .nav-links a.link[aria-current="page"]::after { width: 100%; }
.nav-links a.link[aria-current="page"] { color: var(--teal); font-weight: 700; }

.nav-toggle, .nav-toggle-cb { display: none; }
.nav-toggle {
  cursor: pointer; width: 44px; height: 40px; border-radius: 10px;
  align-items: center; justify-content: center;
  border: 1px solid var(--line); background: rgba(239,236,228,.6);
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ''; display: block; width: 20px; height: 2px; background: var(--ink); position: relative;
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after  { position: absolute; top: 6px; }

/* ---------- hero ---------- */
.hero { position: relative; }
.hero .wrap {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center;
  padding-top: 76px; padding-bottom: 56px;
}
.hero p { margin-top: 24px; }
.hero .btn-row { margin-top: 36px; }

/* volle Breite: Karussell randlos, kein .wrap */
.hero-full .slideshow { height: clamp(380px, 58vh, 620px); border-radius: 0; box-shadow: none; }

.stats { display: flex; gap: 44px; margin-top: 52px; flex-wrap: wrap; }
.stats.center { justify-content: center; text-align: center; margin-top: 0; gap: clamp(36px, 7vw, 88px); }
.stats .num { font-family: var(--serif); font-size: 2.1rem; color: var(--teal); }
.stats .cap { font-size: .72rem; letter-spacing: .14em; color: var(--muted-2); text-transform: uppercase; margin-top: 2px; }

.framed { position: relative; min-height: 480px; }
.framed .photo {
  position: absolute; inset: 18px; border-radius: 12px 12px 96px 12px; overflow: hidden;
  box-shadow: 0 42px 70px -30px rgba(33,58,75,.55);
}
.framed .photo img { width: 100%; height: 100%; object-fit: cover; }

/* decorative organic blobs */
.blob { position: absolute; pointer-events: none; }
.blob.a { background: var(--sage); opacity: .4; border-radius: 60% 40% 55% 45% / 55% 50% 50% 45%; }
.blob.b { background: var(--gold-2); opacity: .5; border-radius: 50%; }
.blob.c { background: var(--teal); border-radius: 50% 50% 48% 52% / 52% 48% 52% 48%; }

@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.floaty { animation: float 11s ease-in-out infinite; }

/* badge (review) */
.badge {
  position: absolute; bottom: -2px; left: -8px; background: var(--cream);
  border-radius: 10px; padding: 12px 16px; display: flex; align-items: center; gap: 12px;
  box-shadow: 0 22px 44px -18px rgba(33,58,75,.5);
}
.badge .score { background: #003580; color: #fff; font-weight: 700; font-size: 1.15rem; width: 46px; height: 46px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.badge .t1 { font-size: .82rem; font-weight: 700; color: var(--ink); }
.badge .t2 { font-size: .7rem; color: var(--muted-2); }

/* ---------- quote band ---------- */
.quote-band { text-align: center; max-width: 1000px; margin: 0 auto; padding: clamp(56px, 7vw, 84px) 40px; }
.quote-band p { font-family: var(--serif); font-weight: 300; font-style: italic; font-size: clamp(1.4rem,2.6vw,1.9rem); line-height: 1.5; color: var(--ink-2); }

/* ---------- section head ---------- */
.head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 44px; }
.head h2 { margin-top: 14px; }
.head .lead { max-width: 38ch; }
.head.center { flex-direction: column; align-items: center; text-align: center; }

/* ---------- cards ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.card {
  background: var(--cream); border-radius: 8px; overflow: hidden;
  box-shadow: var(--shadow-card); transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.card .pic { height: 220px; overflow: hidden; position: relative; }
.card .pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.card:hover .pic img { transform: scale(1.04); }
.card .tag {
  position: absolute; top: 16px; left: 16px; background: rgba(239,236,228,.92);
  padding: 6px 14px; border-radius: 30px; font-size: .68rem; letter-spacing: .12em; font-weight: 600; color: var(--teal);
}
.card .body { padding: 24px 24px 26px; }
.card .body h3 { font-weight: 400; }
/* Links in der Karten-Ueberschrift wie in .x-item h4 a (Ausflugskarten). */
.card .body h3 a { color: var(--gold); border-bottom: 1px solid var(--gold-2); }
/* Karten, deren Bild sich vergroessern laesst — siehe SEL in site.js. */
.cards.zoomable .pic img { cursor: zoom-in; }
.card .body p { font-size: .9rem; line-height: 1.65; margin-top: 10px; }
/* Karten bringen ihre eigene helle Flaeche mit. In einem .dark-Abschnitt
   (Ausflugs-Teaser der Startseite) schlaegt sonst dessen Creme-Schrift durch
   und der Kartentext steht creme auf creme, also unsichtbar. */
.dark .card .body h3 { color: var(--ink); }
.dark .card .body p { color: var(--muted); }
.dark .card .body .more { color: var(--teal); }
/* .more gibt es auch ausserhalb von Karten (Band "Haus, Terrassen & Garten").
   Ohne inline-block verpuffte dort das margin-top und die Goldfarbe fehlte. */
.more { display: inline-block; margin-top: 16px; font-size: .82rem; color: var(--gold); font-weight: 600; letter-spacing: .04em; text-decoration: none; }

/* feature list (icon dots) */
.features { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; margin-top: 30px; }
.feature { display: flex; gap: 12px; align-items: flex-start; }
.feature .dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 8px; flex: none; }
.feature .ft-t { font-weight: 600; font-size: .95rem; color: var(--ink); }
.feature .ft-d { font-size: .85rem; color: var(--muted-2); margin-top: 2px; }

/* split layout */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.split .media { position: relative; min-height: 460px; }
.split .media .photo { position: absolute; inset: 0; border-radius: 8px; overflow: hidden; box-shadow: var(--shadow-lift); }
.split .media .photo img { width: 100%; height: 100%; object-fit: cover; }
.split.reverse .text { order: 2; }
.split.reverse .media { order: 1; }

/* mittig geteiltes Band über die ganze Breite (Entwurf 27.07.) */
/* Feste Hoehe, nicht min-height (Feedback Thorsten 04.08.2026, Punkt 4).
   min-height war nur ein Boden: das Bild mit dem hoechsten Seitenverhaeltnis
   hat das Band darueber hinaus aufgezogen, deshalb war "Haus, Terrassen &
   Garten" (Hochformat im Set) rund 1,8-mal so hoch wie "See & Natur".
   Mit einer festen Hoehe sind beide Baender gleich hoch und die Bilder
   werden per object-fit zugeschnitten statt hoehenbestimmend zu sein.
   Der Wert ist gemessen: das laengere der beiden Panels braucht rund 525px
   Text plus Padding, siehe Kommentar am Padding unten. */
.split-full {
  display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
  height: clamp(560px, 32vw, 620px);
  overflow: hidden;   /* Sicherheitsnetz, damit nie wieder ein Bild aus dem Band laeuft */
}
.split-full .panel {
  background: var(--sand-2);
  display: flex; flex-direction: column; justify-content: center;
  /* enger als die urspruenglichen 6vw, sonst passt der laengere Text vom
     03.08. nicht in die gemeinsame Bandhoehe */
  padding: clamp(44px, 4vw, 72px) clamp(28px, 5vw, 80px);
}
/* Dunkle Variante des Bandes (Wellness). Ohne diese Zeile bliebe die Textspalte
   sandfarben, waehrend .dark schon auf Creme-Schrift umgestellt hat. */
.split-full.dark .panel { background: var(--teal); }

/* Der Slider wird absolut in die Medienspalte gelegt, nicht ueber eine Kette
   von height:100% gehaengt. Grund: auf einem Grid-Item loest height:100% sich
   nicht gegen die Zeilenhoehe auf, faellt auf auto zurueck, und dann gewinnt
   die natuerliche Bildhoehe. Genau so lief das Bild aus dem Band heraus.
   inset:0 auf einem stretch-Item ist dagegen in jeder Engine eindeutig. */
.split-full .media { position: relative; overflow: hidden; }
.split-full .slider-wrap { position: absolute; inset: 0; }
.split-full .slider { height: 100%; gap: 0; border-radius: 0; }
.split-full .slider img { aspect-ratio: auto; height: 100%; object-fit: cover; border-radius: 0; }

/* circular accent */
.accent-circle {
  position: absolute; bottom: -28px; right: -28px; width: 190px; height: 190px;
  background: var(--gold-2); border-radius: 50% 50% 48% 52% / 52% 48% 52% 48%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--cream); box-shadow: 0 24px 48px -24px rgba(188,138,82,.8); text-align: center;
}
.accent-circle .sym { font-family: var(--serif); font-size: 2.4rem; line-height: 1; }
.accent-circle .lb { font-size: .68rem; letter-spacing: .16em; margin-top: 6px; }

/* amenity pills */
.pills { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.pill { font-size: .78rem; background: var(--cream); border: 1px solid var(--line); padding: 7px 14px; border-radius: 30px; color: var(--ink-2); }

/* meta row */
.meta { display: flex; gap: 26px; margin-top: 22px; flex-wrap: wrap; font-size: .85rem; color: var(--ink-2); }
.meta span { color: var(--muted-2); }

/* light excursion grid (full ausfluege page) */
.x-group { margin-top: 56px; }
.x-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 22px; }
.x-item { background: var(--cream); border-radius: 8px; padding: 24px; box-shadow: var(--shadow-card); transition: transform .35s ease; }
.x-item:hover { transform: translateY(-4px); }
.x-item h4 { font-family: var(--serif); font-weight: 500; font-size: 1.18rem; color: var(--ink); }
.x-item h4 a { color: var(--gold); border-bottom: 1px solid var(--gold-2); }
.x-item p { font-size: .88rem; line-height: 1.65; margin-top: 8px; }

/* ---------- testimonials ---------- */
.t-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
.t-card { background: var(--cream); border-radius: 8px; padding: 30px; box-shadow: var(--shadow-card); }
.t-card .mark { font-family: var(--serif); font-size: 3rem; color: var(--gold-2); line-height: .4; }
.t-card p { font-size: .95rem; line-height: 1.7; margin-top: 18px; color: var(--ink-2); }
.t-card .who { margin-top: 20px; font-size: .72rem; letter-spacing: .14em; color: var(--muted-2); text-transform: uppercase; font-weight: 600; }

/* ---------- FAQ (native details) ---------- */
.faq { max-width: 840px; margin: 0 auto; }
.faq details { border-bottom: 1px solid rgba(33,58,75,.16); }
.faq summary {
  list-style: none; cursor: pointer; padding: 22px 4px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  font-family: var(--serif); font-size: 1.12rem; font-weight: 600; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--sans); font-size: 1.5rem; color: var(--gold); transition: transform .3s; flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .ans { padding: 0 4px 22px; }
.faq .ans p { font-size: .95rem; line-height: 1.75; max-width: 680px; }

/* ---------- breadcrumb ---------- */
.crumb { display: flex; align-items: center; gap: 10px; font-size: .78rem; letter-spacing: .06em; color: var(--muted-2); margin-bottom: 24px; }
.crumb .here { color: var(--teal); font-weight: 600; }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.info-line { display: flex; flex-direction: column; gap: 4px; margin-bottom: 22px; }
.info-line .k { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); font-weight: 600; }
.info-line .v { font-size: 1.05rem; color: var(--ink); }
.contact { background: var(--cream); border-radius: 10px; padding: 32px; box-shadow: var(--shadow-card); }

/* ---------- CTA band ---------- */
.cta { text-align: center; position: relative; }
.cta h2 { margin-top: 14px; }
.cta p { margin: 16px auto 0; max-width: 52ch; }
.cta .btn { margin-top: 30px; }

/* booking-band (rounded teal panel) */
.book-band {
  background: var(--teal); border-radius: 12px; color: var(--cream); padding: 52px;
  display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
  position: relative; overflow: hidden;
}
.book-band > *:not(.blob) { position: relative; z-index: 1; }
.book-band .blob { z-index: 0; }
.book-band h2 { color: var(--cream); }
.book-band p { color: rgba(239,236,228,.8); margin-top: 12px; max-width: 44ch; }

/* prose (legal pages) */
.prose { max-width: 760px; margin: 0 auto; }
.prose h2 { font-size: 1.5rem; margin: 36px 0 12px; }
.prose h3 { font-size: 1.15rem; margin: 24px 0 8px; }
.prose p, .prose li { font-size: .95rem; line-height: 1.75; margin-bottom: 12px; }
.prose ul { padding-left: 22px; }
.prose a { color: var(--teal); text-decoration: underline; }

/* ---------- footer ---------- */
.footer { background: var(--teal-dark); color: rgba(239,236,228,.82); padding: 60px 0 34px; }
.footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.footer .wordmark .top { font-size: .68rem; letter-spacing: .34em; color: rgba(239,236,228,.6); font-weight: 500; }
.footer .wordmark .main { font-size: 1.1rem; letter-spacing: .22em; color: var(--cream); font-weight: 700; }
.footer .blurb { font-size: .88rem; line-height: 1.7; color: rgba(239,236,228,.6); max-width: 300px; margin-top: 14px; }
.footer h4 { font-family: var(--sans); font-size: .72rem; letter-spacing: .16em; color: var(--gold-3); font-weight: 600; margin-bottom: 16px; }
.footer .fcol a, .footer .fcol span { display: block; font-size: .88rem; color: rgba(239,236,228,.7); margin-bottom: 11px; transition: color .2s; }
.footer .fcol a:hover { color: var(--cream); }
.footer .legal { border-top: 1px solid rgba(239,236,228,.14); margin-top: 40px; padding-top: 22px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: .78rem; color: rgba(239,236,228,.5); }

/* ---------- hero slideshow ---------- */
/* Beliebig viele Bilder. Frueher lief das als reine CSS-Animation mit vier
   hartcodierten Delays gegen einen 24s-Zyklus; Keyframe-Prozente lassen sich
   nicht aus der Bildzahl rechnen, damit war der Hero auf genau vier
   festgenagelt. Das Weiterschalten macht jetzt site.js.
   Das erste Bild ist von Anfang an sichtbar, ohne JS und ohne Einblenden.
   Sobald site.js uebernimmt, setzt es .ready; ab da regelt .on, welches Bild
   zu sehen ist. So gibt es weder eine leere Flaeche beim Laden noch ein
   Aufblitzen aller Bilder uebereinander. */
.slideshow { position: relative; height: min(58vh, 540px); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-lift); }
.slideshow img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s ease; }
.slideshow img:first-child { opacity: 1; }
.slideshow.ready img:first-child { opacity: 0; }
.slideshow.ready img.on { opacity: 1; }

/* ---------- swipe slider ---------- */
.slider-wrap { position: relative; }
.slider { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; border-radius: 8px; scrollbar-width: none; }
.slider::-webkit-scrollbar { display: none; }
/* snap-align: start, nicht center. Bei center trifft der programmatische
   Sprung in WebKit die Snap-Position nicht sauber, siehe site.js. */
.slider img { flex: 0 0 100%; width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: 8px; scroll-snap-align: start; }
.slider.zoomable img { cursor: zoom-in; }
.slider-wrap .arr { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer; background: rgba(239,236,228,.9); color: var(--ink); font-size: 1.1rem; box-shadow: var(--shadow-card); z-index: 2; }
.slider-wrap .arr.prev { left: 14px; }
.slider-wrap .arr.next { right: 14px; }
.slider-wrap .arr:hover { background: var(--cream); }
/* noetig, weil .slider-wrap .arr spezifischer ist als die [hidden]-Regel des Browsers */
.slider-wrap .arr[hidden] { display: none; }

/* Bildcredit: steht direkt unter dem Bild, nicht unter dem Abschnitt
   (Wunsch vom 10.08.2026: unauffaelliger). Vorher viermal inline gestylt,
   einmal davon mit hartcodiertem cream-Wert. */
.credit { font-size: .72rem; color: var(--muted-2); margin-top: 8px; }
.credit a { color: inherit; }
.dark .credit { color: rgba(239,236,228,.55); }
/* In der Karte liegt der Credit auf dem Bild, nicht darunter: sonst schoebe er
   Ueberschrift und Text dieser einen Karte gegenueber ihren Nachbarn nach
   unten. Gleiches Muster wie .card .tag darueber. */
.card .pic .credit {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
  padding: 20px 16px 8px; text-align: right;
  /* Kraeftiger Verlauf plus Schatten: das Motiv darunter kann hell sein
     (Klosterdach, Wiese), sonst verschwindet die Zeile darin. */
  color: rgba(243,237,226,.95);
  text-shadow: 0 1px 3px rgba(0,0,0,.65);
  background: linear-gradient(to top, rgba(20,19,17,.72), transparent);
}

/* Lageplan: Grafik, kein Foto — volle Breite, nichts beschneiden. */
.map { display: block; width: 100%; max-width: 900px; margin: 0 auto; height: auto; border-radius: 8px; box-shadow: var(--shadow-card); }

/* ---------- photo gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.gallery.cols-3 { grid-template-columns: repeat(3, 1fr); }
.gallery img, .gallery video { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; box-shadow: var(--shadow-card); transition: transform .4s cubic-bezier(.2,.8,.2,1); cursor: zoom-in; }
/* Das Video ist kein Lightbox-Kandidat, es hat eigene Bedienelemente. */
.gallery video { cursor: default; }
/* Das Rundgang-Video ist Hochformat (608x1080). Im quadratischen Raster schnitt
   object-fit: cover oben und unten ab (Feedback 20.08.2026), deshalb contain.
   Zwei Rasterzeilen waeren die schoenere Loesung, reissen aber ein Loch: bei
   zwoelf Kacheln in vier Spalten entsteht dadurch eine vierte Zeile mit einer
   einzigen Kachel. Gemessen, nicht geschaetzt. */
.gallery video { object-fit: contain; background: var(--ink); }
.gallery.cols-3 img { aspect-ratio: 4/3; }
.gallery img:hover { transform: scale(1.02); }

/* ---------- Smoobu-Widgets ----------
   Die Suchmaske (.smoobu-tool) ist ein Fremd-Iframe: hier laesst sich nur der
   Rahmen gestalten, das Innere gehoert Smoobu. Der Kalender je Haus
   (.calendarBudgetWidget) rendert dagegen in unser eigenes DOM, dort greifen
   unsere Variablen. Beides erst pruefen, wenn die Apartment-IDs da sind. */
.smoobu-tool {
  max-width: 1000px; margin: 0 auto; background: var(--cream);
  border-radius: 12px; padding: 24px; box-shadow: var(--shadow-card);
}
.smoobu-tool iframe { width: 100%; border: 0; display: block; }
/* Belegungskalender je Haus. Anders als die Suchmaske rendert er in unser
   eigenes DOM, deshalb greifen unsere Farben. Smoobu liefert belegte Tage in
   Rosa (#FFBFBF) auf Hellgrau (#F9F9F9); beides hier auf die Palette gezogen.
   An-/Abreisetage sind diagonale Verlaeufe aus genau diesen zwei Farben. */
.smoobu-kalender { max-width: 1000px; margin: 0 auto; }
.smoobu-kalender .container { background: var(--cream) !important; border-radius: 12px; box-shadow: var(--shadow-card); padding: 8px 4px; }
.smoobu-kalender h2 { font-family: var(--serif); color: var(--ink); }
.smoobu-kalender td { color: var(--muted); }
/* Smoobu setzt diese Farben mit !important und dem Selektor
   .multiCalendarWidget .singleCalendarWidget table td.normal (0,3,2).
   Unsere Regeln muessen also mindestens genauso spezifisch sein, sonst
   gewinnt ihr Rosa trotz !important. Deshalb die lange Kette. */
.smoobu-kalender .multiCalendarWidget .singleCalendarWidget table td.normal,
.smoobu-kalender .multiCalendarWidget .singleCalendarWidget table td.current-day {
  background-color: var(--sand-2) !important; color: var(--muted-2);
}
.smoobu-kalender .multiCalendarWidget .singleCalendarWidget table td.departure {
  background: linear-gradient(to right bottom, var(--sand-2) 50%, var(--cream) 50%) !important;
}
.smoobu-kalender .multiCalendarWidget .singleCalendarWidget table td.arrival {
  background: linear-gradient(to right bottom, var(--cream) 50%, var(--sand-2) 50%) !important;
}
/* "Heute" markiert Smoobu mit einem tuerkisen Rahmen (#2de4e5). */
.smoobu-kalender .multiCalendarWidget .singleCalendarWidget table td.current-day {
  border: 2px solid var(--gold) !important;
}
.smoobu-kalender .logo { color: var(--muted-2); font-size: .72rem; }
.smoobu-kalender a { color: var(--teal); }

/* ---------- lightbox ----------
   Natives <dialog>, siehe site.js. Esc und Fokusfalle kommen vom Browser. */
/* Das Dialog-Element fuellt den Viewport und zentriert das Bild per Flexbox.
   Nicht auf margin:auto der Browser-Defaults verlassen, das zentrierte je nach
   Engine nicht und klebte links oben. Nebeneffekt: der Klick neben das Bild
   trifft zuverlaessig das Dialog-Element und schliesst. */
.lightbox {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh;
  margin: 0; padding: 0; border: 0; background: transparent; overflow: visible;
}
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox::backdrop { background: rgba(28,26,23,.86); }
.lightbox img { display: block; max-width: 92vw; max-height: 92vh; width: auto; height: auto; border-radius: 8px; }
.lb-close {
  position: fixed; top: 18px; right: 18px; width: 40px; height: 40px;
  border: none; border-radius: 50%; cursor: pointer; z-index: 1;
  background: rgba(239,236,228,.92); color: var(--ink); font-size: 1.4rem; line-height: 1;
  box-shadow: var(--shadow-card);
}
.lb-close:hover { background: var(--cream); }
/* Vor/Zurueck in der Grossansicht (Feedback Thorsten 05.08.2026). */
.lb-nav {
  position: fixed; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border: none; border-radius: 50%; cursor: pointer; z-index: 1;
  background: rgba(239,236,228,.92); color: var(--ink); font-size: 1.5rem; line-height: 1;
  box-shadow: var(--shadow-card);
}
.lb-nav:hover { background: var(--cream); }
.lb-prev { left: 18px; }
.lb-next { right: 18px; }
.lb-nav[hidden] { display: none; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  section { padding: 64px 0; }
  .wrap, .nav { padding-left: 24px; padding-right: 24px; }
  .hero .wrap { grid-template-columns: 1fr; }
  .framed { min-height: 380px; order: -1; }
  .split, .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .split.reverse .text, .split.reverse .media { order: 0; }
  /* Text zuerst — gilt für beide Bänder, egal welche Seite am Desktop links steht */
  /* height, nicht min-height zuruecksetzen: einspaltig bestimmt der Inhalt
     die Hoehe, sonst quetscht die feste Bandhoehe Text und Bild uebereinander. */
  .split-full { grid-template-columns: 1fr; height: auto; }
  .split-full .panel { order: -1; }
  .split-full .media { height: 300px; }
  .cards, .x-grid, .t-grid { grid-template-columns: 1fr 1fr; }
  .gallery, .gallery.cols-3 { grid-template-columns: 1fr 1fr; }
  .footer .cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .cards, .x-grid, .t-grid, .features, .footer .cols { grid-template-columns: 1fr; }
  .gallery, .gallery.cols-3 { grid-template-columns: 1fr 1fr; gap: 10px; }
  /* Auf Handybreite waere die Video-Kachel nur rund 90 px breit. Zwei Spalten
     sind hier die ganze Zeile, also nimmt das Video sie sich und laeuft
     randlos im eigenen Format. */
  .gallery video { grid-column: span 2; aspect-ratio: 9/16; object-fit: cover; }
  .nav-toggle { display: flex; }
  .nav-links {
    position: absolute; top: 100%; right: 0; left: 0;
    flex-direction: column; align-items: flex-start; gap: 18px;
    background: var(--sand); backdrop-filter: blur(14px);
    padding: 20px 24px; border-bottom: 1px solid var(--line);
    display: none;
  }
  .nav-toggle-cb:checked ~ .nav-links { display: flex; }
  .stats { gap: 28px; }
  .book-band { padding: 36px 28px; }
}