/* ==========================================================================
   Gasthof Königstand — style.css
   Basis-Styles (alle Regeln ohne @media). Responsive Anpassungen liegen
   ausschließlich in responsive.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design-Tokens (Farben, Typografie, Radius, Schatten)
   -------------------------------------------------------------------------- */
:root{
  --ink:#1b2119;
  --ink-soft:#4a5245;
  --paper:#f7f2e7;
  --paper-2:#efe6d3;
  --pine:#25352a;
  --pine-light:#3a4d3c;
  --teal:#1f6f5c;
  --sand:#cdbfa0;
  --stone:#7d786a;
  --line: rgba(27,33,25,.14);
  --card: #fffdf8;
  --radius: 18px;
  --shadow-sm: 0 1px 2px rgba(20,20,10,.05), 0 6px 18px rgba(20,20,10,.06);
  --shadow-md: 0 8px 24px rgba(20,20,10,.10), 0 2px 6px rgba(20,20,10,.05);

  --font-display: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif;
  --font-body: -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  color-scheme: light;
}

/* --------------------------------------------------------------------------
   2. Reset & Grundlagen
   -------------------------------------------------------------------------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth; overflow-x:hidden;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  width:100%;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}
ul{margin:0;}

/* Scroll-Reveal: Elemente mit [data-animate] starten unsichtbar/verschoben
   und werden per IntersectionObserver (script.js) mit .is-visible eingeblendet. */
[data-animate]{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
}
[data-animate].is-visible{
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce){
  [data-animate]{ opacity:1; transform:none; transition:none; }
}


/* --------------------------------------------------------------------------
   3. Header (floating Pill-Nav)
   -------------------------------------------------------------------------- */
.site-header{
  position: fixed;
  top: 20px;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  padding: 0 20px;
  transition: top .35s ease;
}

.site-header__inner{
  width: 100%;
  max-width: 1080px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;

  padding: 14px 14px 14px 22px;
  border-radius: 28px;

  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 1px 1px rgba(20, 20, 10, .04), 0 10px 30px rgba(20, 24, 14, .10);

  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);

  transition: padding .35s ease, border-radius .35s ease,
    box-shadow .35s ease, background .35s ease, backdrop-filter .35s ease;
}

.site-header.is-scrolled .site-header__inner{
  padding: 9px 10px 9px 18px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 2px 4px rgba(20, 20, 10, .06), 0 16px 40px rgba(20, 24, 14, .16);
  -webkit-backdrop-filter: blur(26px) saturate(1.5);
  backdrop-filter: blur(26px) saturate(1.5);
}

.site-header__logo{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  padding: 11px 0;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: .01em;
  color: var(--pine);
  white-space: nowrap;
}
.site-header__logo svg,
.mobile-menu__logo svg{ display: none; }
.site-header__logo::before,
.mobile-menu__logo::before{
  content: "";
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  background: url("../neue bilder/WhatsApp_Image_2026-07-16_at_13.19.31-removebg-preview.webp") -10px center / 90px 60px no-repeat;
}

.site-header__nav{
  display: flex;
  align-items: center;
  gap: 18px;
  justify-self: center;
}
.site-header__nav a{
  position: relative;
  font-size: .82rem;
  color: var(--ink-soft);
  padding: 11px 2px;
  white-space: nowrap;
  transition: color .2s ease;
}
.site-header__nav a.is-current{ color: var(--ink); font-weight: 600; }
.site-header__nav a::after{
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--pine);
  transition: right .25s ease;
}
.site-header__nav a:hover{ color: var(--ink); }
.site-header__nav a:hover::after{ right: 0; }

.site-header__cta{
  justify-self: end;
  white-space: nowrap;
  font-size: .86rem;
  font-weight: 600;
  color: var(--paper);
  background: var(--pine);
  padding: 12px 22px;
  border-radius: 999px;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
  box-shadow: 0 6px 16px rgba(37, 53, 42, .28);
}
.site-header__cta:hover{
  background: var(--pine-light);
  transform: scale(1.035);
  box-shadow: 0 8px 20px rgba(37, 53, 42, .34);
}

/* Ferienwohnungen-Dropdown im Header */
.site-header__dropdown{ position: relative; }
.site-header__dropdown-trigger{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: relative;
  font-size: .82rem;
  font-family: inherit;
  color: var(--ink-soft);
  background: none;
  border: none;
  padding: 11px 2px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s ease;
}
.site-header__dropdown-trigger::after{
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--pine);
  transition: right .25s ease;
}
.site-header__dropdown-trigger:hover,
.site-header__dropdown-trigger.is-current{ color: var(--ink); }
.site-header__dropdown-trigger.is-current{ font-weight: 600; }
.site-header__dropdown-trigger:hover::after{ right: 0; }
.site-header__dropdown-chevron{
  width: 13px; height: 13px;
  transition: transform .25s cubic-bezier(.22,1,.36,1);
}
.site-header__dropdown.is-open .site-header__dropdown-chevron{ transform: rotate(180deg); }

.site-header__dropdown-panel{
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translate(-50%, 6px);
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 20px 45px rgba(20, 20, 10, .18), 0 2px 8px rgba(20, 20, 10, .06);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  backdrop-filter: blur(22px) saturate(1.4);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s cubic-bezier(.22,1,.36,1), transform .22s cubic-bezier(.22,1,.36,1), visibility .22s;
}
.site-header__dropdown.is-open .site-header__dropdown-panel{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.site-header__dropdown-panel a{
  display: block;
  font-size: .86rem;
  color: var(--ink-soft);
  padding: 10px 14px;
  border-radius: 13px;
  transition: background .15s ease, color .15s ease;
}
.site-header__dropdown-panel a:hover{ background: rgba(37, 53, 42, .07); color: var(--ink); }
.site-header__dropdown-panel a.is-current{ background: rgba(37, 53, 42, .09); color: var(--pine); font-weight: 600; }
.site-header__dropdown-panel a:first-child{
  border-bottom: 1px solid var(--line);
  border-radius: 13px 13px 0 0;
  margin-bottom: 4px;
  padding-bottom: 12px;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
  color: var(--stone);
}
.site-header__dropdown-panel a:first-child:hover{ background: none; color: var(--pine); }

@media (prefers-reduced-motion: reduce){
  .site-header__dropdown-panel,
  .site-header__dropdown-chevron{ transition: none; }
}


/* --------------------------------------------------------------------------
   4. Hero
   -------------------------------------------------------------------------- */
.hero{
  position: relative;
  min-height: 100vh;
  overflow: visible;
  margin-bottom: 78px;
}

.hero__bgwrap{
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.hero__bg{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__content{
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  min-height: 100vh;
  padding: 132px 6vw 120px;
}

.hero__card{
  max-width: 460px;
  width: 100%;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  border-radius: 28px;
  padding: 42px 40px;
  box-shadow: 0 24px 60px rgba(20, 20, 10, .2), 0 2px 8px rgba(20, 20, 10, .06);
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.hero__eyebrow{
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .7rem;
  font-weight: 700;
  color: var(--teal);
  margin: 0 0 16px;
}

.hero__card h1{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  line-height: 1.14;
  color: var(--ink);
  margin: 0 0 16px;
  text-wrap: balance;
}

.hero__desc{
  font-size: .98rem;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 40ch;
  margin: 0 0 28px;
}

.hero__actions{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}

.btn{
  padding: 14px 26px;
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 600;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease;
  display: inline-flex;
  align-items: center;
  border: none;
  cursor: pointer;
}
.btn--primary{
  background: var(--pine);
  color: var(--paper);
  box-shadow: 0 10px 22px rgba(37, 53, 42, .3);
}
.btn--primary:hover{
  background: var(--pine-light);
  transform: scale(1.035);
  box-shadow: 0 12px 26px rgba(37, 53, 42, .36);
}
.btn--secondary{
  background: transparent;
  border: 1.5px solid var(--pine);
  color: var(--pine);
}
.btn--secondary:hover{
  background: rgba(37, 53, 42, .08);
  transform: scale(1.02);
}

.hero__rating{
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid rgba(27, 33, 25, .14);
}
.avatar-stack{ display: flex; flex-shrink: 0; }
.avatar{
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .76rem; font-weight: 700; color: #fff;
  border: 2px solid rgba(255,255,255,.9);
  margin-left: -10px;
}
.avatar:first-child{ margin-left: 0; }

.hero__rating-text{ display: flex; flex-direction: column; gap: 3px; }
.hero__rating-line{ display: flex; align-items: baseline; gap: 7px; }
.stars{ color: #c9a13a; font-size: .82rem; letter-spacing: 1px; }
.rating-value{ font-size: .86rem; font-weight: 700; color: var(--ink); }
.rating-count{ font-size: .75rem; color: var(--ink-soft); }

.hero__gallery{
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 48%);
  display: flex;
  gap: 16px;
  padding: 0 6vw;
  max-width: 100%;
}

.gallery-card{
  margin: 0;
  width: 132px;
  flex-shrink: 0;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 16px 34px rgba(20, 20, 10, .22);
  transition: transform .25s ease, box-shadow .25s ease;
}
.gallery-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 22px 44px rgba(20, 20, 10, .28);
}
.gallery-card img{
  width: 100%;
  height: 92px;
  object-fit: cover;
}
.gallery-card figcaption{
  padding: 9px 10px 11px;
  text-align: center;
  font-size: .74rem;
  font-weight: 600;
  color: var(--ink);
}


/* --------------------------------------------------------------------------
   5. Trust-Leiste
   -------------------------------------------------------------------------- */
.trust-bar{
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.trust-bar__inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 6vw;
  display: flex;
  justify-content: center;
  gap: clamp(20px, 5vw, 56px);
  flex-wrap: wrap;
}
.trust-bar__item{
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--teal);
  text-transform: uppercase;
  font-size: .72rem;
  letter-spacing: .1em;
  font-weight: 600;
  white-space: nowrap;
}
.trust-bar__item svg{ flex-shrink: 0; }


/* --------------------------------------------------------------------------
   6. Ihre Vorteile (Perks-Galerie, ehem. "Highlights")
   -------------------------------------------------------------------------- */
.perks{
  padding: clamp(64px, 8vw, 100px) 6vw;
  max-width: 1320px;
  margin: 0 auto;
}
.perks__inner{
  display: grid;
  grid-template-columns: 32% 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

.perks__text{ max-width: 380px; }
.perks__text .eyebrow{
  text-transform: uppercase; letter-spacing: .14em; font-size: .7rem;
  color: var(--teal); font-weight: 700; margin: 0 0 18px;
}
.perks__text h2{
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.6rem, 2.6vw, 2.15rem); line-height: 1.18;
  margin: 0 0 20px; text-wrap: balance;
}
.perks__lead{
  color: var(--ink-soft); font-size: .97rem; line-height: 1.7;
  margin: 0 0 32px;
}
.perks__cta{
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--pine); color: var(--paper);
  padding: 14px 26px; border-radius: 999px;
  font-size: .88rem; font-weight: 600;
  box-shadow: 0 10px 22px rgba(37,53,42,.26);
  transition: transform .2s ease, gap .2s ease, background .2s ease;
}
.perks__cta:hover{ background: var(--pine-light); transform: translateY(-2px); gap: 14px; }

.perks__grid{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 16px;
  aspect-ratio: 1497 / 990;
}

.perks__cell{
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(20,20,10,.10);
  transition: box-shadow .35s ease;
}
.perks__cell:hover{ box-shadow: 0 14px 30px rgba(20,20,10,.18); }
.perks__cell img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(1.08) saturate(1.08) contrast(1.03);
  transition: transform .45s ease-out;
}
.perks__cell:hover img{ transform: scale(1.03); }

.perks__cell--balkon{ grid-column: 1 / 4; grid-row: 1 / 3; }
.perks__cell--haus{ grid-column: 4 / 7; grid-row: 1 / 2; }
.perks__cell--essen{ grid-column: 4 / 7; grid-row: 2 / 3; }
.perks__cell--hund{ grid-column: 1 / 3; grid-row: 3 / 4; }
.perks__cell--kueche{ grid-column: 3 / 5; grid-row: 3 / 4; }
.perks__cell--bus{ grid-column: 5 / 7; grid-row: 3 / 4; }

/* Bild-Overlay: dezenter dunkler Verlauf, Bild bleibt klar sichtbar */
.perks__overlay{
  position: absolute;
  left: 12px; right: 12px; bottom: 12px;
  border-radius: 14px;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(10,12,8,0) 0%, rgba(8,10,6,.28) 45%, rgba(6,8,5,.62) 100%);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  color: #f7f2e7;
  transition: transform .3s ease;
}
.perks__cell:hover .perks__overlay{ transform: translateY(-6px); }

.perks__overlay-head{
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 5px;
}
.perks__overlay-icon{
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(10,12,8,.55);
  display: flex; align-items: center; justify-content: center;
}
.perks__overlay-icon svg{
  width: 18px; height: 18px;
  color: #fff;
}
.perks__overlay-title{
  font-size: .92rem;
  font-weight: 600;
  text-align: left;
}
.perks__overlay-text{
  margin: 0;
  font-size: .78rem;
  line-height: 1.4;
  opacity: .9;
  max-width: 32ch;
  text-align: left;
}


/* --------------------------------------------------------------------------
   7. Ferienwohnungen (Apartment-Karten)
   -------------------------------------------------------------------------- */
.apartments{
  padding: clamp(64px, 8vw, 100px) 6vw;
  max-width: 1220px;
  margin: 0 auto;
}
.apartments__head{ max-width: 60ch; margin-bottom: 40px; }
.eyebrow{
  text-transform: uppercase; letter-spacing: .14em; font-size: .72rem;
  color: var(--teal); font-weight: 700; margin: 0 0 12px;
}
.apartments__head h2{
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 12px; text-wrap: balance;
}
.apartments__head .lead{ color: var(--ink-soft); margin: 0; }

.apartments__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.apt-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform .3s ease, box-shadow .3s ease;
}
.apt-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.apt-card__media{ display: block; aspect-ratio: 4/3; overflow: hidden; }
.apt-card__media img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease;
}
.apt-card__media:hover img{ transform: scale(1.045); }

.apt-card__body{ padding: 28px 28px 30px; display: flex; flex-direction: column; flex: 1; }
.apt-card__for{
  font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--teal); font-weight: 700; margin: 0 0 8px;
}
.apt-card__body h3{
  font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; margin: 0 0 6px;
}
.apt-card__meta{
  font-size: .84rem; font-weight: 600; color: var(--pine); margin: 0 0 14px;
}
.apt-card__meta span{ color: var(--line); margin: 0 7px; font-weight: 400; }
.apt-card__tagline{ color: var(--ink-soft); font-size: .92rem; line-height: 1.6; margin: 0 0 20px; }

.apt-card__facts{
  list-style: none; margin: 0 0 16px; padding: 0;
  display: flex; gap: 10px; flex-wrap: wrap;
  font-size: .78rem; color: var(--ink-soft);
}
.apt-card__facts li{
  padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px;
}

.apt-card__chips{ display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }

.chip{
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .72rem; padding: 5px 11px; border-radius: 999px;
  background: rgba(37,53,42,.08);
  color: var(--pine); font-weight: 600;
}
.chip svg{ width: 13px; height: 13px; flex-shrink: 0; }

.apt-card__badges{
  list-style: none; margin: 0 0 22px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px 9px;
}
.apt-card__badges li{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .8rem; color: var(--ink-soft);
  background: rgba(37,53,42,.055); padding: 6px 12px; border-radius: 999px;
}
.apt-card__badges li svg{ width: 12px; height: 12px; color: var(--pine); flex-shrink: 0; }

.apt-card__link{
  margin-top: auto;
  align-self: flex-start;
  padding: 11px 22px;
  border: 1.5px solid var(--pine);
  border-radius: 999px;
  font-size: .88rem; font-weight: 600; color: var(--pine);
  display: inline-flex; align-items: center; gap: 6px;
  transition: gap .2s ease, background .2s ease, color .2s ease;
}
.apt-card__link:hover{ gap: 9px; background: var(--pine); color: var(--paper); }


/* --------------------------------------------------------------------------
   8. Haustiere
   -------------------------------------------------------------------------- */
.pets{
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(64px, 8vw, 112px) 6vw clamp(88px, 10vw, 130px);
  display: grid;
  grid-template-columns: 0.95fr 1.1fr;
  gap: clamp(40px, 6vw, 72px);
  align-items: center;
  overflow: visible;
}

/* Dezente Hintergrund-Dekoration: große transparente Pfoten + weicher Verlauf */
.pets__deco{
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.pets__deco-paw{
  position: absolute;
  color: var(--pine);
  opacity: .05;
}
.pets__deco-paw--a{ width: 320px; height: 320px; top: -50px; left: -90px; transform: rotate(-18deg); }
.pets__deco-paw--b{ width: 220px; height: 220px; bottom: -30px; right: -50px; transform: rotate(24deg); }
.pets__deco-blob{
  position: absolute;
  width: 480px; height: 480px;
  top: 8%; right: -12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(31,111,92,.10) 0%, rgba(31,111,92,0) 72%);
}

.pets__media{
  position: relative;
  z-index: 1;
  margin-bottom: 56px;
  margin-left: clamp(-32px, -3vw, -18px);
}
.pets__panel{
  width: 100%;
  aspect-ratio: 4/3.4;
  object-fit: cover;
  border-radius: 24px;
  box-shadow: 0 34px 64px rgba(20, 20, 10, .24), 0 10px 24px rgba(20, 20, 10, .12);
}

.pets__badge{
  position: absolute;
  left: 28px; bottom: -32px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 280px;
  padding: 16px 20px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .74);
  border: 1px solid rgba(255, 255, 255, .6);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 18px 36px rgba(20, 20, 10, .18);
}
.pets__badge-icon{
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--pine);
  color: var(--paper);
  display: flex; align-items: center; justify-content: center;
}
.pets__badge-icon svg{ width: 20px; height: 20px; }
.pets__badge-text{ display: flex; flex-direction: column; gap: 2px; }
.pets__badge-text strong{
  font-family: var(--font-display); font-weight: 400;
  font-size: 1.05rem; color: var(--ink);
}
.pets__badge-text span{ font-size: .74rem; line-height: 1.35; color: var(--ink-soft); }

.pets__text{ position: relative; z-index: 1; }
.pets__text .eyebrow{ margin-bottom: 12px; }
.pets__text h2{
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 0 0 18px; text-wrap: balance;
}
.pets__para{
  font-size: .97rem; line-height: 1.7; color: var(--ink-soft);
  margin: 0 0 30px; max-width: 50ch;
}

.pets__benefits{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.pets__benefit{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px 20px 22px;
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}
.pets__benefit:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.pets__benefit-icon{
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(37, 53, 42, .08);
  color: var(--pine);
  margin-bottom: 14px;
}
.pets__benefit-icon svg{ width: 18px; height: 18px; }
.pets__benefit h3{
  font-family: var(--font-display); font-weight: 400;
  font-size: .98rem; margin: 0 0 6px; color: var(--ink);
}
.pets__benefit p{
  margin: 0; font-size: .82rem; line-height: 1.5; color: var(--ink-soft);
}


/* --------------------------------------------------------------------------
   9. Galerie (Bento)
   -------------------------------------------------------------------------- */
.gallery{
  max-width: 1220px;
  margin: 0 auto;
  padding: clamp(56px, 8vw, 96px) 6vw;
}
.gallery__head{ margin-bottom: 30px; }
.gallery__head h2{
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 0; text-wrap: balance;
}

.gallery__bento{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 130px;
  gap: 14px;
}
.gallery__item{ margin: 0; position: relative; border-radius: 16px; overflow: hidden; }
.gallery__item img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s ease;
}
.gallery__item:hover img{ transform: scale(1.05); }
.gallery__item figcaption{
  position: absolute; left: 12px; bottom: 10px;
  font-size: .74rem; color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}

.gallery__item--a{ grid-column: span 4; grid-row: span 2; }
.gallery__item--b{ grid-column: span 2; grid-row: span 2; }
.gallery__item--c{ grid-column: span 2; grid-row: span 1; }
.gallery__item--d{ grid-column: span 2; grid-row: span 1; }
.gallery__item--d img{ object-position: center; }
.gallery__item--e{ grid-column: span 2; grid-row: span 1; }


/* --------------------------------------------------------------------------
   10. Region & Aktivitäten
   -------------------------------------------------------------------------- */
.region{
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(56px, 8vw, 96px) 6vw;
}
.region__head{ max-width: 60ch; margin-bottom: 46px; }
.region__head h2{
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 0; text-wrap: balance;
}

.region__block{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(24px, 5vw, 56px);
  align-items: center;
  margin-bottom: 64px;
}
.region__block:last-child{ margin-bottom: 0; }
.region__block--reverse{ direction: rtl; }
.region__block--reverse > *{ direction: ltr; }

.region__block img{
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 20px;
}
.region__copy h3{
  font-family: var(--font-display); font-weight: 400;
  font-size: 1.5rem; margin: 0 0 14px;
}
.region__copy p{
  color: var(--ink-soft);
  font-size: .96rem;
  line-height: 1.7;
  max-width: 52ch;
  margin: 0 0 16px;
}
.region__copy p:last-of-type{ margin-bottom: 0; }

.dog-photo-grid{
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 20px;
  margin-top: 30px;
}
.dog-photo-grid figure{ margin: 0; }
.dog-photo-grid img{
  display: block;
  width: 100%;
  height: 360px;
  object-fit: cover;
  border-radius: 16px;
}
.dog-photo-grid figure:last-child img{ object-position: center 35%; }
.dog-photo-grid figcaption{
  margin-top: 9px;
  color: var(--stone);
  font-size: .88rem;
}

.map-consent{
  min-height: 380px;
  padding: 42px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  text-align: center;
  color: var(--ink-soft);
  background: var(--surface, #f1eee5);
}
.map-consent p{ max-width: 58ch; margin: 0; }
.map-consent a{ color: inherit; text-decoration: underline; }

/* Kleine Info-Karten unter einem region__block (Entfernung, Dauer, Schwierigkeit …) */
.region__info-row{
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 22px 0 24px;
}
.region__info-chip{
  display: flex; align-items: center; gap: 10px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 9px 15px 9px 9px;
}
.region__info-chip-icon{
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: var(--pine); color: var(--paper);
  display: flex; align-items: center; justify-content: center;
}
.region__info-chip-icon svg{ width: 14px; height: 14px; }
.region__info-chip-text{ display: flex; flex-direction: column; line-height: 1.3; }
.region__info-chip-text span{ font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; color: var(--stone); }
.region__info-chip-text strong, .region__info-chip-text .region__info-chip-value{ font-size: .84rem; color: var(--ink); font-weight: 600; }


/* --------------------------------------------------------------------------
   11. Gastgeber
   -------------------------------------------------------------------------- */
.host{
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(56px, 8vw, 96px) 6vw;
  display: grid;
  grid-template-columns: 0.9fr 1fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
}
.host__img{
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  border-radius: 20px;
}
.host__copy h2{
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 0 0 18px; text-wrap: balance;
}
.host__lead{
  color: var(--ink-soft); font-size: .98rem; line-height: 1.7;
  max-width: 48ch; margin: 0 0 16px;
}
.host__note{
  font-size: .78rem; color: var(--stone); margin: 0 0 24px; font-style: italic;
}
.host__cta{
  display: inline-flex; align-items: center;
  background: var(--pine); color: var(--paper);
  padding: 14px 26px; border-radius: 999px;
  font-size: .88rem; font-weight: 600;
  box-shadow: 0 10px 22px rgba(37,53,42,.3);
  transition: transform .18s ease, background .18s ease;
}
.host__cta:hover{ background: var(--pine-light); transform: scale(1.03); }


/* --------------------------------------------------------------------------
   12. Bewertungen
   -------------------------------------------------------------------------- */
.testimonials{
  position: relative;
  overflow: hidden;
  padding: clamp(80px, 9vw, 120px) 0;
  color: #f7f2e7;
}
.testimonials__bgwrap{ position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.testimonials__bg{ width: 100%; height: 100%; object-fit: cover; }
.testimonials__scrim{
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,12,8,.16) 0%, rgba(9,11,7,.36) 55%, rgba(7,9,6,.56) 100%);
}

.testimonials__head{
  position: relative; z-index: 1;
  text-align: center;
  max-width: 640px;
  margin: 0 auto clamp(40px, 6vw, 64px);
  padding: 0 6vw;
}
.testimonials__head .eyebrow{ color: rgba(247, 242, 231, .82); }
.testimonials__head h2{
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.9rem, 3.6vw, 2.5rem); margin: 0; text-wrap: balance;
}

/* Bühne: Pfeile + Viewport mit dem zentrierten, angeschnittenen Karussell */
.testimonials__stage{
  position: relative; z-index: 1;
  display: flex; align-items: center;
  max-width: 1600px;
  margin: 0 auto clamp(44px, 6vw, 68px);
  padding: 0 6vw;
  gap: clamp(8px, 2vw, 28px);
}
.testimonials__viewport{ flex: 1; overflow: hidden; }
.testimonials__track{
  display: flex;
  gap: 32px;
  will-change: transform;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
.testimonials__track.is-dragging{ transition: none; }

.review-slide{
  flex: 0 0 min(620px, 82vw);
  box-sizing: border-box;
  padding: clamp(36px, 5vw, 56px) clamp(28px, 4vw, 48px);
  border-radius: 24px;
  text-align: center;
  background: rgba(20, 22, 16, .34);
  border: 1px solid rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 30px 60px rgba(10, 12, 8, .3), 0 6px 18px rgba(10, 12, 8, .18);
  opacity: .38;
  transform: scale(.9);
  transition: opacity .6s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1);
}
.review-slide.is-active{ opacity: 1; transform: scale(1); }

.review-slide__stars{ color: #d9b45c; letter-spacing: 3px; font-size: 1rem; margin-bottom: 20px; }
.review-slide__text{
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.6;
  margin: 0 0 24px;
}
.review-slide__meta{
  display: flex; align-items: center; justify-content: center;
  gap: 8px; flex-wrap: wrap;
  font-size: .82rem; opacity: .85;
}
.review-slide__name{ font-weight: 600; }
.review-slide__sep{ opacity: .5; }

.testimonials__arrow{
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .28);
  color: #f7f2e7;
  display: flex; align-items: center; justify-content: center;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.testimonials__arrow svg{ width: 20px; height: 20px; }
.testimonials__arrow:hover{ background: rgba(255, 255, 255, .24); transform: scale(1.06); }
.testimonials__arrow.is-disabled{ opacity: .3; pointer-events: none; }

/* Vertrauenselement */
.testimonials__trust{
  position: relative; z-index: 1;
  text-align: center;
  max-width: 520px;
  margin: 0 auto;
  padding: 0 6vw;
}
.testimonials__trust-stars{ color: #d9b45c; font-size: 1.05rem; letter-spacing: 2px; margin-bottom: 8px; }
.testimonials__trust-stars strong{
  font-family: var(--font-display); font-weight: 400;
  color: #f7f2e7; letter-spacing: 0; font-size: 1.1rem; margin-left: 10px;
}
.testimonials__trust-count{ margin: 0; font-size: .88rem; opacity: .88; }
.testimonials__trust-source{
  margin: 2px 0 0; font-size: .7rem; text-transform: uppercase;
  letter-spacing: .1em; opacity: .65;
}
.testimonials__disclaimer{
  margin: 14px 0 0; font-size: .72rem; font-style: italic; opacity: .6;
}
.testimonials__trust-links{
  display: flex; justify-content: center; gap: 28px; flex-wrap: wrap;
  margin-top: 24px;
}
.testimonials__trust-link{
  display: inline-block;
  padding: 11px 0 4px;
  font-size: .85rem; font-weight: 600; color: #f7f2e7;
  border-bottom: 1px solid rgba(247, 242, 231, .4);
  transition: border-color .2s ease;
}
.testimonials__trust-link:hover{ border-color: #f7f2e7; }


/* --------------------------------------------------------------------------
   13. FAQ
   -------------------------------------------------------------------------- */
.faq{
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(56px, 8vw, 96px) 6vw;
}
.faq__head{ margin-bottom: 34px; text-align: center; }
.faq__head h2{
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2rem); margin: 0;
}

.faq__list{ display: flex; flex-direction: column; }
.faq__item{ border-bottom: 1px solid var(--line); }
.faq__item:first-child{ border-top: 1px solid var(--line); }

.faq__question{
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: none; border: none; cursor: pointer;
  padding: 20px 4px;
  font-size: 1rem; font-family: var(--font-body); color: var(--ink);
  text-align: left;
}
.faq__icon{
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; color: var(--pine);
  transition: transform .25s ease, background .2s ease;
}
.faq__item.is-open .faq__icon{ background: var(--pine); color: var(--paper); transform: rotate(180deg); }

.faq__answer{ overflow: hidden; max-height: 0; transition: max-height .35s ease; }
.faq__answer p{ margin: 0 4px 20px; color: var(--ink-soft); font-size: .92rem; line-height: 1.6; max-width: 62ch; }

.faq__cta{
  display: block; text-align: center; margin-top: 36px;
  font-size: .92rem; font-weight: 600; color: var(--pine);
}


/* --------------------------------------------------------------------------
   14. Buchung
   -------------------------------------------------------------------------- */
.booking{
  background: var(--paper-2);
  padding: clamp(56px, 8vw, 96px) 6vw;
}
.booking__inner{
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
/* Grid-Kinder haben standardmäßig min-width:auto und können dadurch breiter
   werden als ihre Spalte, sobald ein Kind (hier die Vergleichstabelle) von
   sich aus nicht schrumpfen will. min-width:0 erlaubt normales Schrumpfen/
   Umbrechen, sonst reißt die Tabelle auf schmalen Screens aus dem Padding. */
.booking__info, .booking__card{ min-width: 0; }
.booking__compare{ table-layout: fixed; }
.booking__info h2{
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 0 0 14px;
}
.booking__lead{ color: var(--ink-soft); margin: 0 0 26px; max-width: 46ch; }

.booking__compare{ width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.booking__compare th, .booking__compare td{
  text-align: left; padding: 10px 12px; font-size: .86rem; border-bottom: 1px solid var(--line);
}
.booking__compare th{ font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--stone); }
.booking__compare td:nth-child(2){ color: var(--pine); font-weight: 600; }
.booking__compare td:nth-child(3){ color: var(--stone); }

.booking__card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 30px 28px;
  box-shadow: var(--shadow-md);
  position: sticky;
  top: 110px;
}


/* --------------------------------------------------------------------------
   15. Abschluss-CTA
   -------------------------------------------------------------------------- */
.final-cta{
  position: relative;
  min-height: 56vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #f4efe1;
  text-align: center;
}
.final-cta__bg{
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.final-cta__scrim{
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,18,12,.35) 0%, rgba(15,18,12,.6) 100%);
}
.final-cta__content{
  position: relative; z-index: 2;
  max-width: 640px; margin: 0 auto;
  padding: 40px 6vw;
  display: flex; flex-direction: column; align-items: center; gap: 24px;
}
.final-cta__content h2{
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.7rem, 4vw, 2.6rem); margin: 0; text-wrap: balance;
}
.final-cta__lead{
  font-size: 1.02rem; line-height: 1.6; margin: -12px 0 0;
  color: rgba(247,242,231,.9); max-width: 46ch;
}
.final-cta__btn{
  display: inline-flex;
  background: var(--paper); color: var(--pine);
  padding: 16px 34px; border-radius: 999px;
  font-size: .95rem; font-weight: 700;
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
}
.final-cta__btn:hover{ transform: scale(1.045); }

.final-cta__trust{
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  justify-content: center;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border-radius: 16px;
  padding: 14px 24px;
  font-size: .8rem;
  color: rgba(247,242,231,.92);
}
.final-cta__trust-item{ display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.final-cta__trust-item .stars{ color: #d9b24c; letter-spacing: 1px; }
.final-cta__trust-divider{ width: 1px; height: 14px; background: rgba(255,255,255,.28); }


/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */
.site-footer{
  background: var(--pine);
  color: rgba(247, 242, 231, .85);
}
.site-footer__inner{
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 76px) 6vw 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 32px 28px;
}
.site-footer__brand{
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--paper);
  margin: 0 0 10px;
}
.site-footer__col .site-footer__brand{
  font-size: 0;
  line-height: 0;
  margin-bottom: 24px;
}
.site-footer__brand::before{
  content: "";
  display: block;
  width: 220px;
  height: 68px;
  max-width: 100%;
  background: url("../assets/images/logo-footer-cropped.webp") center / 100% auto no-repeat;
}
.site-footer__heading{
  text-transform: uppercase; letter-spacing: .1em; font-size: .68rem;
  color: rgba(247,242,231,.55); margin: 0 0 12px;
}
.site-footer__col p{ margin: 0; font-size: .88rem; overflow-wrap: break-word; }
.site-footer__col p a{ display: inline-block; padding: 6px 0; overflow-wrap: break-word; max-width: 100%; }
.site-footer__col a:hover{ color: var(--paper); text-decoration: underline; }

.site-footer__social{
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 0 6vw 22px;
}
.site-footer__social a{
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(247,242,231,.28);
  border-radius: 50%;
  color: var(--paper);
  transition: background .18s ease, transform .18s ease, border-color .18s ease;
}
.site-footer__social a:hover{
  background: rgba(247,242,231,.12);
  border-color: rgba(247,242,231,.55);
  transform: translateY(-2px);
}
.site-footer__social svg{ width: 21px; height: 21px; fill: currentColor; }
.site-footer__social a:last-child svg{ fill: none; stroke: currentColor; stroke-width: 1.8; }
.site-footer__social .social-dot{ fill: currentColor; stroke: none; }

.site-footer__bottom{
  border-top: 1px solid rgba(247,242,231,.15);
  text-align: center;
  padding: 20px 6vw 28px;
  font-size: .8rem;
  font-family: var(--font-display);
  font-style: italic;
  color: rgba(247,242,231,.7);
}


/* --------------------------------------------------------------------------
   17. Apartment-Detailseite
   -------------------------------------------------------------------------- */
.apt-detail__hero{
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.apt-detail__hero img{
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.78);
}
.apt-detail__hero-text{
  position: relative;
  color: #f4efe1;
  padding: 130px 6vw 48px;
  max-width: 720px;
}
.apt-detail__back{
  display: inline-block; font-size: .82rem; margin-bottom: 18px; opacity: .85;
}
.apt-detail__for{
  text-transform: uppercase; letter-spacing: .1em; font-size: .72rem;
  color: #cdbfa0; margin: 0 0 10px;
}
.apt-detail__hero-text h1{
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.2rem); margin: 0 0 12px;
}
.apt-detail__hero-text p{ margin: 0; opacity: .92; max-width: 52ch; }

.apt-detail__body{
  max-width: 900px;
  margin: 0 auto;
  padding: 56px 6vw 90px;
}

.apt-detail__facts{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 30px;
}
.apt-detail__facts div{
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 14px;
}
.apt-detail__facts span{
  display: block; font-size: .66rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--stone); margin-bottom: 6px;
}
.apt-detail__facts strong{ font-size: .92rem; font-weight: 600; line-height: 1.3; }

.apt-detail__note{
  background: var(--paper-2);
  border-radius: 14px;
  padding: 16px 18px;
  font-size: .9rem;
  color: var(--ink-soft);
  margin-bottom: 40px;
}

.apt-detail__body h2{
  font-family: var(--font-display); font-weight: 400; font-size: 1.5rem;
  margin: 0 0 20px;
}
.apt-detail__amenities{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
  margin-bottom: 50px;
}
.apt-detail__amenity-group h3{
  font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; margin: 0 0 10px;
}
.apt-detail__amenity-group ul{ margin: 0; padding-left: 1.1em; color: var(--ink-soft); font-size: .92rem; }
.apt-detail__amenity-group li{ margin-bottom: 6px; }

.apt-detail__lage p{ color: var(--ink-soft); max-width: 60ch; line-height: 1.6; }

.apt-detail__cta{
  display: inline-flex; margin: 30px 0 60px;
  background: var(--pine); color: var(--paper);
  padding: 15px 30px; border-radius: 999px;
  font-size: .92rem; font-weight: 600;
  box-shadow: 0 10px 22px rgba(37,53,42,.28);
  transition: transform .18s ease;
}
.apt-detail__cta:hover{ transform: scale(1.03); }

.apt-detail__others h3{
  font-family: var(--font-display); font-weight: 400; font-size: 1.1rem; margin: 0 0 16px;
}
.apt-detail__others-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.apt-detail__other-card{
  position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 16/10;
}
.apt-detail__other-card img{ width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.apt-detail__other-card:hover img{ transform: scale(1.05); }
.apt-detail__other-card span{
  position: absolute; left: 14px; bottom: 12px; color: #fff;
  font-family: var(--font-display); font-size: 1.05rem;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
.apt-detail__other-card--current{ pointer-events: none; }
.apt-detail__other-card--current::before{
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: rgba(10,14,10,.38);
}
.apt-detail__other-card--current .apt-detail__other-badge{
  position: absolute; top: 12px; left: 12px; bottom: auto; z-index: 2;
  background: var(--pine); color: var(--paper);
  font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  padding: 5px 10px; border-radius: 999px;
}
.apt-detail__other-card--current span:not(.apt-detail__other-badge){ z-index: 2; }


/* --------------------------------------------------------------------------
   18. Rechtliche Seiten (Impressum / Datenschutz)
   -------------------------------------------------------------------------- */
.legal{
  max-width: 720px;
  margin: 0 auto;
  padding: 150px 6vw 100px;
}
.legal h1{
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 2.4rem); margin: 0 0 24px;
}
.legal h2{
  font-family: var(--font-display); font-weight: 400;
  font-size: 1.15rem; margin: 34px 0 12px;
}
.legal p, .legal li{ color: var(--ink-soft); font-size: .94rem; line-height: 1.7; }
.legal ul{ padding-left: 1.2em; }
.legal mark{ background: rgba(31,111,92,.18); color: var(--ink); padding: 1px 4px; border-radius: 4px; }

.legal__warning{
  background: var(--paper-2);
  border-left: 3px solid var(--teal);
  padding: 14px 18px;
  border-radius: 8px;
  font-size: .88rem;
  color: var(--ink);
  margin-bottom: 30px;
}

/* Horizontal scrollbare Tabellen (z.B. Vergleichstabellen auf schmalen Screens):
   dezenter Fade-Rand rechts signalisiert, dass noch mehr Inhalt folgt. */
.table-wrap{
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-wrap::after{
  content: "";
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 28px;
  background: linear-gradient(90deg, rgba(247,242,231,0) 0%, var(--paper) 100%);
  pointer-events: none;
}

/* Vergleichstabelle (z.B. Ferienwohnungen-Übersicht): auf Desktop eine
   normale Tabelle, auf schmalen Screens (siehe responsive.css) wird sie
   in gestapelte Karten pro Merkmal umgewandelt statt seitlich zu scrollen. */
.compare-table{ width: 100%; border-collapse: collapse; font-size: .92rem; text-align: left; }
.compare-table th{
  padding: 10px 12px; border-bottom: 1px solid var(--line);
  font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--stone);
}
.compare-table td{ padding: 10px 12px; border-bottom: 1px solid var(--line); }
.compare-table tr:last-child td{ border-bottom: none; }


/* --------------------------------------------------------------------------
   19. Breadcrumbs (auf jeder Unterseite außer der Startseite)
   -------------------------------------------------------------------------- */
.breadcrumbs{
  max-width: 1180px;
  margin: 0 auto;
  padding: 128px 6vw 0;
  font-size: .8rem;
  color: var(--stone);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.breadcrumbs a{ display: inline-flex; align-items: center; min-height: 40px; color: var(--stone); transition: color .15s ease; }
.breadcrumbs a:hover{ color: var(--pine); }
.breadcrumbs .sep{ opacity: .6; }
.breadcrumbs .current{ color: var(--ink); }

/* Wenn die Breadcrumb direkt vor einem dunklen Bild-Hero steht (z.B. Apartment-Detailseiten),
   wird sie stattdessen dort in hell integriert statt separat oben zu stehen. */
.breadcrumbs--on-dark{ color: rgba(247,242,231,.75); }
.breadcrumbs--on-dark a{ color: rgba(247,242,231,.75); }
.breadcrumbs--on-dark a:hover{ color: #fff; }
.breadcrumbs--on-dark .current{ color: #fff; }


/* --------------------------------------------------------------------------
   20. Generische Content-Seiten (Wandern, Winterurlaub, Lage & Region, Über
   uns, Urlaub mit Hund, FAQ, Kontakt, Buchen, Ferienwohnungen-Übersicht)
   -------------------------------------------------------------------------- */
.page-hero{
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 6vw clamp(40px, 6vw, 64px);
}
.page-hero h1{
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2rem, 4.4vw, 3rem); margin: 14px 0 18px; text-wrap: balance;
}
.page-hero .lead{
  font-size: 1.05rem; line-height: 1.7; color: var(--ink-soft); max-width: 62ch; margin: 0;
}

.content-section{
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) 6vw;
  border-top: 1px solid var(--line);
}
.content-section:first-of-type{ border-top: none; }
.hero-v2 + .content-section{ border-top: none; }
.content-section h2{
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.4rem, 2.8vw, 1.9rem); margin: 0 0 20px; text-wrap: balance;
}
.content-section h3{
  font-family: var(--font-display); font-weight: 400;
  font-size: 1.1rem; margin: 0 0 10px;
}
.content-section p{
  color: var(--ink-soft); font-size: .98rem; line-height: 1.75; max-width: 68ch; margin: 0 0 16px;
}
.content-section .lead{ font-size: 1.05rem; color: var(--ink); }

.info-card-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
  margin-top: 8px;
}
.info-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.info-card img{ width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.info-card__body{ padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.info-card__meta{
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px;
}
.info-card__meta span{
  font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
  background: var(--paper-2); color: var(--stone); padding: 3px 9px; border-radius: 999px;
}
.info-card h3{ margin: 0 0 8px; }
.info-card p{ font-size: .9rem; margin: 0 0 16px; flex: 1; }
.info-card__link{
  font-size: .86rem; font-weight: 600; color: var(--pine);
  display: inline-flex; align-items: center; gap: 4px; transition: gap .2s ease;
}
.info-card__link:hover{ gap: 8px; }

.stat-list{ list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.stat-list li{
  font-size: .82rem; color: var(--ink-soft);
  padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px;
  display: flex; align-items: baseline; gap: 5px;
}
.stat-list li strong, .stat-list li .stat-list__value{ color: var(--ink); font-weight: 700; }

.verify-note{
  display: block;
  font-size: .72rem; color: var(--teal); font-style: italic;
  margin: 0 0 16px;
}

.external-link-card{
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--paper-2); border-radius: 14px; padding: 18px 22px; margin: 0 0 18px;
  flex-wrap: wrap;
}
.external-link-card p{ margin: 0; max-width: none; color: var(--ink); font-size: .92rem; }
.external-link-card a{
  display: inline-flex; align-items: center; min-height: 40px;
  font-size: .86rem; font-weight: 600; color: var(--pine); white-space: nowrap;
}

.page-cta{
  max-width: 1180px; margin: 0 auto; padding: clamp(40px,6vw,64px) 6vw;
  text-align: center; border-top: 1px solid var(--line);
}
.page-cta h2{
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 0 0 22px;
}

.grid-2{
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center;
}
.grid-2 img{ width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-md); display: block; }


/* --------------------------------------------------------------------------
   21. Premium Hero-System (Unterseiten)
   Jede Unterseite bekommt einen individuellen, bildgetragenen Hero statt des
   reinen Text-page-hero. Aufbau ist modular (Media, Scrim, Content, optionale
   schwebende Badges/Foto-Stacks/Kontaktkarte), die konkrete Komposition
   unterscheidet sich bewusst von Seite zu Seite.
   -------------------------------------------------------------------------- */
.hero-v2{
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: flex-end;
  overflow: visible;
  color: #fff;
}
.hero-v2:has(.hero-v2__stack){ margin-bottom: 64px; }
.hero-v2--medium{ min-height: 68vh; }
.hero-v2--compact{ min-height: 52vh; }

.hero-v2__media{ position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-v2__media img{
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(1.02) saturate(1.05);
  animation: heroMediaIn 1.4s cubic-bezier(.16,1,.3,1) both;
}

/* Variante für Motive, die vollständig sichtbar bleiben müssen (z.B. ein ganzes
   Gebäude), statt beschnitten zu werden: unscharfe Cover-Ebene füllt den Rahmen,
   das scharfe Bild liegt komplett sichtbar (object-fit:contain) darüber. */
.hero-v2__media--contain{ background: var(--pine); }
.hero-v2__media--contain img{ position: absolute; inset: 0; }
.hero-v2__media--contain .hero-v2__media-bg{
  object-fit: cover;
  filter: blur(70px) brightness(.32) saturate(1.4);
  transform: scale(1.3);
}
.hero-v2__media--contain .hero-v2__media-fg{ object-fit: contain; }
.hero-v2__scrim{
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(18,22,15,.08) 0%, rgba(16,20,13,.18) 40%, rgba(13,17,11,.74) 100%);
}
.hero-v2__scrim--left{
  background: linear-gradient(100deg, rgba(13,17,11,.78) 0%, rgba(16,20,13,.42) 38%, rgba(16,20,13,.08) 68%);
}

.hero-v2__content{
  position: relative; z-index: 2;
  width: 100%;
  max-width: 1280px; margin: 0 auto;
  padding: 128px 6vw 64px;
}
.hero-v2__content .breadcrumbs--on-dark{ padding: 0 0 22px; max-width: none; }

.hero-v2__eyebrow{
  text-transform: uppercase; letter-spacing: .16em; font-size: .72rem; font-weight: 700;
  color: rgba(247,242,231,.85); margin: 0 0 14px;
  animation: heroUp .8s cubic-bezier(.22,1,.36,1) both; animation-delay: .15s;
}
.hero-v2__content h1{
  font-family: var(--font-display); font-weight: 400; color: #fff;
  font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.1; margin: 0 0 18px; max-width: 15ch;
  text-wrap: balance;
  animation: heroUp .9s cubic-bezier(.22,1,.36,1) both; animation-delay: .25s;
}
.hero-v2__lead{
  font-size: 1.02rem; line-height: 1.65; max-width: 58ch; margin: 0 0 30px;
  color: rgba(247,242,231,.92);
  animation: heroUp .9s cubic-bezier(.22,1,.36,1) both; animation-delay: .38s;
}
.hero-v2__cta{
  display: inline-flex;
  animation: heroUp .9s cubic-bezier(.22,1,.36,1) both; animation-delay: .5s;
}
.hero-v2__cta .btn--secondary{ color: #fff; border-color: rgba(255,255,255,.55); }
.hero-v2__cta .btn--secondary:hover{ background: rgba(255,255,255,.12); }

@keyframes heroMediaIn{ from{ opacity: 0; transform: scale(1.08); } to{ opacity: 1; transform: scale(1); } }
@keyframes heroUp{ from{ opacity: 0; transform: translateY(18px); } to{ opacity: 1; transform: translateY(0); } }
@keyframes heroStackIn{ from{ opacity: 0; transform: translateY(26px) scale(.96); } to{ opacity: 1; transform: translateY(0) scale(1); } }

/* Schwebende Glass-Badges (Highlights, Kennzahlen) */
.hero-v2__badges{
  position: relative; z-index: 2;
  display: flex; gap: 14px; flex-wrap: wrap;
  margin: 0 0 28px;
}
.hero-v2__badge{
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border-radius: 16px;
  padding: 12px 18px 12px 12px;
  box-shadow: 0 12px 30px rgba(10,14,8,.22);
  animation: heroUp .8s cubic-bezier(.22,1,.36,1) both; animation-delay: .6s;
}
.hero-v2__badges .hero-v2__badge:nth-child(2){ animation-delay: .68s; }
.hero-v2__badges .hero-v2__badge:nth-child(3){ animation-delay: .76s; }
.hero-v2__badges .hero-v2__badge:nth-child(4){ animation-delay: .84s; }
.hero-v2__badge-icon{
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,.16);
  display: flex; align-items: center; justify-content: center;
}
.hero-v2__badge-icon svg{ width: 17px; height: 17px; flex-shrink: 0; }
.hero-v2__badge strong{ display: block; font-size: .85rem; font-weight: 600; }
.hero-v2__badge > div > span{ display: block; font-size: .72rem; color: rgba(255,255,255,.75); margin-top: 1px; }

/* Asymmetrischer Foto-Stack (z.B. Ferienwohnungen-Übersicht) */
.hero-v2__stack{ position: absolute; z-index: 2; }
.hero-v2__stack-photo{
  position: absolute;
  border-radius: 16px;
  border: 5px solid rgba(255,252,245,.95);
  box-shadow: 0 22px 48px rgba(10,14,8,.4);
  object-fit: cover;
  animation: heroStackIn .9s cubic-bezier(.22,1,.36,1) both;
}

/* Schwebende Glass-Kontaktkarte (Kontakt-Seite) */
.hero-v2__contact-card{
  position: relative; z-index: 2;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  border-radius: 22px;
  padding: 30px 32px;
  max-width: 380px;
  display: grid; gap: 16px;
  box-shadow: 0 24px 60px rgba(10,14,8,.3);
  animation: heroUp .9s cubic-bezier(.22,1,.36,1) both; animation-delay: .5s;
}
.hero-v2__contact-row{ display: flex; align-items: center; gap: 12px; font-size: .92rem; }
.hero-v2__contact-row svg{ width: 17px; height: 17px; flex-shrink: 0; color: rgba(255,255,255,.85); }
.hero-v2__contact-row a{ transition: opacity .15s ease; }
.hero-v2__contact-row a:hover{ opacity: .8; }

@media (prefers-reduced-motion: reduce){
  .hero-v2__media img,
  .hero-v2__eyebrow,
  .hero-v2__content h1,
  .hero-v2__lead,
  .hero-v2__cta,
  .hero-v2__badge,
  .hero-v2__stack-photo,
  .hero-v2__contact-card{
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
}


/* --------------------------------------------------------------------------
   22. Premium Apartment-Detailseite (Kramerblick, Königstandblick, Schafkopfblick)
   -------------------------------------------------------------------------- */

/* 22.1 Sticky Sub-Navigation */
.apt2__subnav-wrap{ position: sticky; top: 0; z-index: 40; display: flex; justify-content: center; padding: 14px 20px; }
.apt2__subnav{
  display: flex; gap: 4px; align-items: center;
  max-width: 100%; overflow-x: auto;
  padding: 8px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 10px 30px rgba(20, 24, 14, .12);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  scrollbar-width: none;
  /* Fade an beiden Rändern signalisiert auf schmalen Screens, dass die Pille
     horizontal weiterläuft (z.B. Bewertungen/FAQ/Buchen), statt wie eine
     abgeschnittene Liste zu wirken. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}
.apt2__subnav::-webkit-scrollbar{ display: none; }
.apt2__subnav a{
  flex-shrink: 0;
  display: inline-flex; align-items: center;
  min-height: 40px;
  font-size: .82rem; font-weight: 500;
  color: var(--ink-soft);
  padding: 9px 18px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
.apt2__subnav a:hover{ color: var(--ink); }
.apt2__subnav a.is-active{ background: var(--pine); color: var(--paper); }

/* 22.2 Hero */
.apt2-hero{
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: #fff;
}
.apt2-hero__media{ position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.apt2-hero__media img, .apt2-hero__media video{
  width: 100%; height: 100%; object-fit: cover;
  animation: heroMediaIn 1.4s cubic-bezier(.16,1,.3,1) both;
}
.apt2-hero__scrim{
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,19,13,.12) 0%, rgba(14,18,12,.2) 38%, rgba(11,15,9,.8) 100%);
}
.apt2-hero__content{
  position: relative; z-index: 2;
  width: 100%; max-width: 1280px; margin: 0 auto;
  padding: 116px 6vw 72px;
}
.apt2-hero__content .breadcrumbs--on-dark{ padding: 0 0 20px; max-width: none; }
.apt2-hero__content h1{
  font-family: var(--font-display); font-weight: 400; color: #fff;
  font-size: clamp(2.3rem, 5vw, 3.8rem); line-height: 1.06; margin: 0 0 18px; max-width: 18ch;
  text-wrap: balance;
  animation: heroUp .9s cubic-bezier(.22,1,.36,1) both; animation-delay: .2s;
}
.apt2-hero__lead{
  font-size: 1.04rem; line-height: 1.7; max-width: 62ch; margin: 0 0 22px;
  color: rgba(247,242,231,.92);
  animation: heroUp .9s cubic-bezier(.22,1,.36,1) both; animation-delay: .34s;
}
.apt2-hero__rating{
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 28px; font-size: .88rem; color: rgba(255,255,255,.85);
  animation: heroUp .9s cubic-bezier(.22,1,.36,1) both; animation-delay: .44s;
}
.apt2-hero__rating .stars{ color: #d9b24c; letter-spacing: 2px; font-size: .95rem; }
.apt2-hero__actions{
  display: flex; gap: 14px; flex-wrap: wrap;
  animation: heroUp .9s cubic-bezier(.22,1,.36,1) both; animation-delay: .56s;
}
.apt2-hero__actions .btn--secondary{
  color: #fff; border-color: rgba(255,255,255,.55);
}
.apt2-hero__actions .btn--secondary:hover{ background: rgba(255,255,255,.12); }

.apt2-hero__card{
  position: absolute;
  right: 6vw; bottom: 36px; z-index: 3;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  border-radius: 22px;
  padding: 22px 26px;
  display: grid; gap: 14px;
  box-shadow: 0 24px 60px rgba(10,14,8,.32);
  animation: heroUp .9s cubic-bezier(.22,1,.36,1) both; animation-delay: .7s;
}
.apt2-hero__card-row{ display: flex; align-items: center; gap: 12px; font-size: .88rem; color: #fff; white-space: nowrap; }
.apt2-hero__card-row svg{ width: 17px; height: 17px; flex-shrink: 0; color: rgba(255,255,255,.85); }

/* 22.3 Premium-Galerie (Pinterest-/Masonry-Grid + Lightbox)
   CSS-Columns statt fixem Grid: jedes Bild behält sein natürliches
   Seitenverhältnis (kein object-fit:cover-Zuschnitt), Hochformate werden
   dadurch automatisch höher, Querformate automatisch kompakter. */
.apt2__gallery-grid{
  column-count: 3;
  column-gap: 16px;
  max-width: 1280px; margin: 0 auto;
  padding: 0 6vw;
}
.apt2__gallery-item{
  position: relative;
  display: block;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin: 0 0 16px;
  border-radius: 16px;
  overflow: hidden;
  cursor: zoom-in;
  background: var(--paper-2);
  box-shadow: var(--shadow-sm);
}
.apt2__gallery-item img{
  display: block;
  width: 100%; height: auto;
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.apt2__gallery-item:hover img{ transform: scale(1.04); }
.apt2__gallery-item__expand{
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(20,20,10,.4);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  color: #fff; opacity: 0; transition: opacity .25s ease;
}
.apt2__gallery-item__expand svg{ width: 15px; height: 15px; }
.apt2__gallery-item:hover .apt2__gallery-item__expand{ opacity: 1; }

.apt2__lightbox{
  position: fixed; inset: 0; z-index: 300;
  background: rgba(10,12,8,.94);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .25s ease, visibility .25s;
}
.apt2__lightbox.is-open{ opacity: 1; visibility: visible; pointer-events: auto; }
.apt2__lightbox img{
  max-width: 88vw; max-height: 82vh;
  border-radius: 10px;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.apt2__lightbox-close, .apt2__lightbox-prev, .apt2__lightbox-next{
  position: absolute;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .18s ease;
}
.apt2__lightbox-close:hover, .apt2__lightbox-prev:hover, .apt2__lightbox-next:hover{ background: rgba(255,255,255,.22); }
.apt2__lightbox-close{ top: 24px; right: 24px; }
.apt2__lightbox-prev{ left: 24px; top: 50%; transform: translateY(-50%); }
.apt2__lightbox-next{ right: 24px; top: 50%; transform: translateY(-50%); }
.apt2__lightbox-close svg, .apt2__lightbox-prev svg, .apt2__lightbox-next svg{ width: 20px; height: 20px; }

/* 22.3b Vollständige Bildergalerie (Slider mit Thumbnail-Navigation)
   Eigene, abhängigkeitsfreie Slider-Komponente: Track wird per translateX
   verschoben, die Höhe des sichtbaren Bereichs animiert sich per JS auf die
   Höhe des jeweils aktiven Bildes ("autoHeight"), damit nichts abgeschnitten
   wird. Swipe per Pointer Events, Klick öffnet dieselbe Lightbox wie Galerie 1. */
.apt2__slider{
  max-width: 980px; margin: 0 auto; padding: 0 6vw;
}
.apt2__slider-main{
  position: relative;
  min-height: 320px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--paper-2);
  box-shadow: var(--shadow-md);
  transition: height .4s cubic-bezier(.22,1,.36,1);
}
.apt2__slider-track{
  display: flex;
  height: 100%;
  transition: transform .45s cubic-bezier(.22,1,.36,1);
  touch-action: pan-y;
}
.apt2__slider-track.is-dragging{ transition: none; }
.apt2__slider-slide{
  flex: 0 0 100%;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin: 0;
  cursor: zoom-in;
}
.apt2__slider-slide img{
  display: block;
  width: 100%; height: auto;
  -webkit-user-drag: none;
  user-select: none;
}
.apt2__slider-counter{
  position: absolute; right: 16px; bottom: 16px; z-index: 2;
  background: rgba(20,20,10,.5);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fff; font-size: .78rem; font-variant-numeric: tabular-nums;
  padding: 6px 12px; border-radius: 100px;
}
.apt2__slider-arrow{
  position: absolute; top: 50%; translate: 0 -50%; z-index: 2;
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,.88);
  border: 1px solid var(--line);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background .18s ease, transform .18s ease;
}
.apt2__slider-arrow:hover{ background: #fff; transform: translateY(-50%) scale(1.06); }
.apt2__slider-arrow--prev{ left: 16px; }
.apt2__slider-arrow--next{ right: 16px; }
.apt2__slider-arrow svg{ width: 20px; height: 20px; }
.apt2__slider-arrow.is-disabled{ opacity: .35; pointer-events: none; }

.apt2__slider-thumbs{
  display: flex;
  gap: 10px;
  margin-top: 16px;
  padding-bottom: 6px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.apt2__slider-thumb{
  flex: 0 0 auto;
  width: 88px; height: 64px;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  opacity: .55;
  transition: opacity .2s ease, border-color .2s ease;
}
.apt2__slider-thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.apt2__slider-thumb:hover{ opacity: .85; }
.apt2__slider-thumb.is-active{ opacity: 1; border-color: var(--pine); }

/* 22.4 Wohnung entdecken (Room-by-Room) */
.apt2__room{
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
  max-width: 1180px; margin: 0 auto; padding: clamp(48px,6vw,72px) 6vw;
}
.apt2__room:nth-child(even){ direction: rtl; }
.apt2__room:nth-child(even) > *{ direction: ltr; }
.apt2__room-media{ border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); aspect-ratio: 4/3; }
.apt2__room-media img{ width: 100%; height: 100%; object-fit: cover; }
.apt2__room-icon{
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--pine); color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.apt2__room-icon svg{ width: 20px; height: 20px; }
.apt2__room-text h3{
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin: 0 0 14px;
}
.apt2__room-text p{ color: var(--ink-soft); line-height: 1.7; margin: 0; max-width: 48ch; }

/* 22.5 Ausstattung (Amenity-Cards) */
.apt2__amenity-grid{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px;
  max-width: 1180px; margin: 0 auto; padding: 0 6vw;
}
.apt2__amenity-card{
  background: var(--card); border-radius: var(--radius); padding: 26px 24px;
  box-shadow: var(--shadow-sm); border: 1px solid var(--line);
  transition: transform .2s ease, box-shadow .2s ease;
}
.apt2__amenity-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); }
.apt2__amenity-card__icon{
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--pine); color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.apt2__amenity-card__icon svg{ width: 19px; height: 19px; }
.apt2__amenity-card h3{ font-size: 1rem; font-weight: 600; margin: 0 0 6px; }
.apt2__amenity-card p{ font-size: .88rem; color: var(--ink-soft); line-height: 1.55; margin: 0; }

/* 22.5b Ausstattung nach Gruppen (Schlafen/Wohnen/Küche/Bad/Komfort) */
.apt2__amenity-groups{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px;
  max-width: 1180px; margin: 0 auto; padding: 0 6vw;
}
.apt2__amenity-group{
  background: var(--card); border-radius: var(--radius); padding: clamp(26px,3vw,32px);
  border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.apt2__amenity-group__head{ display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.apt2__amenity-group__icon{
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: var(--pine); color: var(--paper);
  display: flex; align-items: center; justify-content: center;
}
.apt2__amenity-group__icon svg{ width: 18px; height: 18px; }
.apt2__amenity-group h3{ font-size: 1.02rem; font-weight: 600; margin: 0; }
.apt2__amenity-group__list{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 9px 10px; }
.apt2__amenity-group__list li{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .85rem; color: var(--ink-soft);
  background: rgba(37,53,42,.055); padding: 7px 13px; border-radius: 999px;
}
.apt2__amenity-group__list li svg{ width: 12px; height: 12px; color: var(--pine); flex-shrink: 0; }

/* 22.6 Lage */
.apt2__location-map{ border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); }
.apt2__location-groups{ display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px; margin-top: 12px; }
.apt2__location-group h3{ font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--stone); margin: 0 0 14px; font-weight: 600; }

/* 22.7 Bewertungen (ehrlicher Platzhalter-Zustand, solange keine echten Reviews vorliegen) */
.apt2__reviews-empty{
  max-width: 640px; margin: 0 auto; text-align: center;
  background: var(--paper-2); border-radius: var(--radius); padding: clamp(36px,5vw,52px);
}
.apt2__reviews-empty .stars{ color: #d9b24c; font-size: 1.3rem; letter-spacing: 3px; display: block; margin-bottom: 16px; }
.apt2__reviews-empty p{ color: var(--ink-soft); margin: 0 0 22px; }

/* 22.8 Buchung (Embed am Seitenende) */
.apt2__booking-lead{ max-width: 640px; margin: 0 auto 8px; text-align: center; }

@media (prefers-reduced-motion: reduce){
  .apt2-hero__media img, .apt2-hero__content h1, .apt2-hero__lead, .apt2-hero__rating,
  .apt2-hero__actions, .apt2-hero__card{ animation: none !important; opacity: 1 !important; transform: none !important; }
  .apt2__gallery-item img{ transition: none; }
}


/* --------------------------------------------------------------------------
   23. Mobile-Navigation (Burger-Button + Slide-in-Menü)
   Auf Desktop nicht sichtbar/aktiv; ab dem Header-Breakpoint (siehe
   responsive.css) übernimmt sie die Rolle der ausgeblendeten .site-header__nav.
   -------------------------------------------------------------------------- */
.site-header__burger{
  display: none;
  position: relative;
  width: 44px; height: 44px;
  border: none; background: none; cursor: pointer;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
}
.site-header__burger span{
  display: block; width: 20px; height: 2px;
  background: var(--ink); border-radius: 2px;
  transition: transform .3s cubic-bezier(.22,1,.36,1), opacity .2s ease;
}
.site-header__burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.site-header__burger[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.site-header__burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.mobile-menu__backdrop{
  position: fixed; inset: 0; z-index: 150;
  background: rgba(15, 18, 12, .38);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility .3s;
}
.mobile-menu__backdrop.is-open{ opacity: 1; visibility: visible; }

.mobile-menu{
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 151;
  width: min(86vw, 380px);
  background: rgba(247, 242, 231, .92);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  backdrop-filter: blur(28px) saturate(1.4);
  box-shadow: -20px 0 60px rgba(20,20,10,.22);
  transform: translateX(100%);
  transition: transform .38s cubic-bezier(.22,1,.36,1);
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.mobile-menu.is-open{ transform: translateX(0); }

.mobile-menu__head{
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 20px 8px;
}
.mobile-menu__logo{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 0;
  font-family: var(--font-display); font-size: 1rem; color: var(--pine);
}
.mobile-menu__close{
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: none; cursor: pointer; color: var(--ink);
}
.mobile-menu__close svg{ width: 22px; height: 22px; }

.mobile-menu__nav{ padding: 8px 14px 28px; display: flex; flex-direction: column; }
.mobile-menu__nav > a{
  display: flex; align-items: center;
  min-height: 52px; padding: 0 12px;
  font-size: 1rem; color: var(--ink);
  border-radius: 12px;
  transition: background .15s ease;
}
.mobile-menu__nav > a.is-current{ font-weight: 600; background: rgba(37,53,42,.07); color: var(--pine); }
.mobile-menu__nav > a:active{ background: rgba(37,53,42,.09); }

.mobile-menu__group{ display: flex; flex-direction: column; }
.mobile-menu__trigger{
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; min-height: 52px; padding: 0 12px;
  font-size: 1rem; font-family: inherit; color: var(--ink);
  background: none; border: none; cursor: pointer;
  border-radius: 12px;
}
.mobile-menu__trigger.is-current{ font-weight: 600; color: var(--pine); }
.mobile-menu__trigger svg{ width: 16px; height: 16px; transition: transform .3s cubic-bezier(.22,1,.36,1); flex-shrink: 0; }
.mobile-menu__trigger[aria-expanded="true"] svg{ transform: rotate(180deg); }

.mobile-menu__panel{
  max-height: 0; overflow: hidden;
  transition: max-height .32s cubic-bezier(.22,1,.36,1);
  display: flex; flex-direction: column;
  padding-left: 14px;
}
.mobile-menu__panel a{
  display: flex; align-items: center;
  min-height: 46px; padding: 0 12px;
  font-size: .92rem; color: var(--ink-soft);
  border-radius: 10px;
}
.mobile-menu__panel a.is-current{ color: var(--pine); font-weight: 600; }
.mobile-menu__panel a:active{ background: rgba(37,53,42,.07); }

.mobile-menu__nav > a.mobile-menu__cta{
  margin: 14px 12px 6px;
  display: flex; align-items: center; justify-content: center;
  min-height: 52px;
  background: var(--pine); color: var(--paper);
  border-radius: 999px; font-weight: 600; font-size: .96rem;
}

.mobile-menu__contact{
  margin-top: auto; padding: 20px 26px 28px;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 8px;
  font-size: .86rem; color: var(--ink-soft);
}
.mobile-menu__contact a{ display: flex; align-items: center; min-height: 40px; color: var(--ink-soft); }

/* Body-Scroll sperren, solange das Menü offen ist */
body.mobile-menu-open{ overflow: hidden; }

@media (prefers-reduced-motion: reduce){
  .mobile-menu, .mobile-menu__backdrop, .mobile-menu__trigger svg, .mobile-menu__panel, .site-header__burger span{
    transition: none !important;
  }
}


/* --------------------------------------------------------------------------
   24. Motorradtouren (Premium-Erlebnisseite)
   -------------------------------------------------------------------------- */

/* Kleines schwebendes Glass-Badge über dem H1 (z.B. "Exklusives Erlebnis") */
.hero-v2__badge-pill{
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.32);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em;
  color: #fff;
  margin: 0 0 18px;
  animation: heroUp .8s cubic-bezier(.22,1,.36,1) both;
}

/* Premium Bild-Karten: Foto oben, schwebendes Icon-Badge überlappt den unteren
   Bildrand. Wiederverwendet für "Warum mit uns" und "Leistungen". */
.feature-grid{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px;
  max-width: 1180px; margin: 0 auto; padding: 0 6vw;
}
.feature-card{
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
}
.feature-card:hover{ transform: translateY(-7px); box-shadow: var(--shadow-md); }
.feature-card__media{ overflow: hidden; background: var(--paper-2); line-height: 0; }
.feature-card__media img{
  width: 100%; height: auto; display: block;
  transition: transform .6s cubic-bezier(.22,1,.36,1);
}
.feature-card:hover .feature-card__media img{ transform: scale(1.07); }
.feature-card__body{ position: relative; padding: 32px 24px 26px; }
.feature-card__icon{
  position: absolute; top: -26px; left: 24px;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--pine); color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  border: 4px solid var(--card);
  box-shadow: 0 10px 20px rgba(20,20,10,.22);
}
.feature-card__icon svg{ width: 21px; height: 21px; }
.feature-card__body h3{ font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; margin: 12px 0 8px; }
.feature-card__body p{ font-size: .89rem; color: var(--ink-soft); line-height: 1.6; margin: 0; }

/* Motorrad-Modellkarten: Foto oben, PS-Badge schwebt über dem Bild */
.moto-grid{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 34px;
  max-width: 1180px; margin: 0 auto; padding: 0 6vw;
}
.moto-card{
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
}
.moto-card:hover{ transform: translateY(-7px); box-shadow: var(--shadow-md); }
.moto-card__media{ position: relative; overflow: hidden; background: var(--paper-2); line-height: 0; }
.moto-card__media img{
  width: 100%; height: auto; display: block;
  transition: transform .6s cubic-bezier(.22,1,.36,1);
}
.moto-card:hover .moto-card__media img{ transform: scale(1.07); }
.moto-card__spec{
  position: absolute; top: 14px; right: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .8rem; font-weight: 700; color: var(--ink);
  background: rgba(255,253,248,.92);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-radius: 999px; padding: 6px 14px;
  box-shadow: 0 6px 16px rgba(20,20,10,.18);
}
.moto-card__spec svg{ width: 14px; height: 14px; color: var(--pine); }
.moto-card__body{ padding: 26px 24px 30px; }
.moto-card h3{ font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; margin: 0 0 10px; }
.moto-card__desc{ font-size: .92rem; color: var(--ink-soft); margin: 0; }

/* Tourkarten: Foto oben (mit optionalem Schilder-Badge), Routenkette darunter */
.tour-grid{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 28px;
  max-width: 1180px; margin: 0 auto; padding: 0 6vw;
}
.tour-card{
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
}
.tour-card:hover{ transform: translateY(-7px); box-shadow: var(--shadow-md); }
.tour-card__media{ position: relative; overflow: hidden; background: var(--paper-2); line-height: 0; }
.tour-card__media img{
  width: 100%; height: auto; display: block;
  transition: transform .6s cubic-bezier(.22,1,.36,1);
}
.tour-card:hover .tour-card__media img{ transform: scale(1.07); }
.tour-card__badge{
  position: absolute; bottom: 12px; right: 12px; z-index: 2;
  width: 74px; border-radius: 8px; overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
  border: 2px solid rgba(255,255,255,.85);
}
.tour-card__badge img{ width: 100%; display: block; }
.tour-card__body{ padding: clamp(24px, 3vw, 30px); }
.tour-card__head{ display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.tour-card__number{ font-family: var(--font-display); font-size: 1.2rem; color: var(--ink); }
.tour-card__head .stars{ color: #d9b45c; letter-spacing: 2px; font-size: .92rem; }
.tour-card__route{
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px 5px;
  margin: 0 0 20px;
}
.tour-card__stop{
  font-size: .84rem; font-weight: 600; color: var(--ink);
  background: var(--paper-2); border-radius: 999px; padding: 5px 13px;
}
.tour-card__arrow{ color: var(--stone); font-size: .8rem; }
.tour-card__meta{ display: flex; flex-wrap: wrap; gap: 10px 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.tour-card__meta span{ display: flex; align-items: center; gap: 6px; font-size: .84rem; color: var(--ink-soft); }
.tour-card__meta svg{ width: 15px; height: 15px; color: var(--pine); flex-shrink: 0; }

/* Preis-Karten */
.price-grid{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px;
  max-width: 1000px; margin: 0 auto; padding: 0 6vw;
}
.price-card{
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(32px, 4vw, 40px) 28px; text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.price-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.price-card h3{ font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; margin: 0 0 18px; }
.price-card__value{ font-family: var(--font-display); font-size: 2.1rem; color: var(--pine); margin: 0 0 8px; }
.price-card__value small{ font-size: .95rem; font-family: var(--font-body); color: var(--ink-soft); font-weight: 400; }
.price-card__note{ font-size: .82rem; color: var(--stone); margin: 0; }

/* Großer, ruhiger Platzhalter-Hinweis (Modelle/Preise folgen nach Abstimmung) */
.notice-box{
  display: flex; align-items: center; gap: 12px; justify-content: center;
  max-width: 760px; margin: 32px auto 0; padding: 18px 26px;
  background: var(--paper-2); border: 1px dashed var(--line); border-radius: 14px;
  text-align: center; font-size: .92rem; color: var(--ink-soft); font-style: italic;
}
.notice-box svg{ flex-shrink: 0; width: 18px; height: 18px; color: var(--teal); }


/* --------------------------------------------------------------------------
   25. Motorradtouren-Teaser (Startseite)
   -------------------------------------------------------------------------- */
.moto-teaser{
  max-width: 1180px; margin: 0 auto;
  padding: clamp(48px, 7vw, 80px) 6vw;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.moto-teaser__media{ position: relative; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-md); }
.moto-teaser__media img{ width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.moto-teaser__badge{
  position: absolute; top: 18px; left: 18px;
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(20,22,15,.55);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #fff; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
  padding: 8px 14px; border-radius: 999px;
}
.moto-teaser__copy h2{
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 0 0 14px; text-wrap: balance;
}
.moto-teaser__copy p{ color: var(--ink-soft); font-size: .98rem; line-height: 1.7; max-width: 52ch; margin: 0 0 22px; }
.moto-teaser__highlights{
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin: 0 0 26px;
}
.moto-teaser__highlight{ display: flex; align-items: center; gap: 10px; font-size: .86rem; color: var(--ink); }
.moto-teaser__highlight-icon{
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: var(--pine); color: var(--paper);
  display: flex; align-items: center; justify-content: center;
}
.moto-teaser__highlight-icon svg{ width: 15px; height: 15px; }


/* --------------------------------------------------------------------------
   26. Buchungs-Suchleiste (Lodgify Portable Search Bar)
   Eigenständige Komponente in js/booking-search.js — diese Regeln passen
   nur die Optik über die von Lodgify bereitgestellten CSS-Variablen sowie
   den Platzhalter/Rahmen an unser Design an. An der Funktionalität des
   Such-Widgets selbst ändert sich dadurch nichts.
   -------------------------------------------------------------------------- */
.booking-search{
  display: block;
  width: 100%;
  min-height: 90px;

  --ldg-psb-background: var(--card);
  --ldg-psb-border-radius: 20px;
  --ldg-psb-box-shadow: var(--shadow-md);
  --ldg-psb-padding: 16px;
  --ldg-psb-input-background: var(--paper);
  --ldg-psb-button-border-radius: 999px;
  --ldg-psb-color-primary: var(--pine);
  --ldg-psb-color-primary-lighter: var(--pine-light);
  --ldg-psb-color-primary-darker: #141d17;
  --ldg-psb-color-primary-contrast: var(--paper);
  --ldg-semantic-color-primary: var(--pine);
  --ldg-semantic-color-primary-lighter: var(--pine-light);
  --ldg-semantic-color-primary-darker: #141d17;
  --ldg-semantic-color-primary-contrast: var(--paper);
}

/* Buchen-Seite: Suchleiste sitzt innerhalb der bestehenden .booking__card. */
.booking__card .booking-search{ min-height: 84px; }

/* Startseite: ruhige CTA-Karte direkt unter dem Hero, ersetzt die frühere
   Suchleisten-Section. Führt gezielt zur Ferienwohnungs-Übersicht statt
   ein zweites Suchfeld neben der Buchen-Seite anzubieten. */
.discover-cta{
  position: relative; z-index: 3;
  max-width: 1040px; margin: 0 auto;
  padding: clamp(28px, 4vw, 40px) 6vw 0;
}
.discover-cta__card{
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: clamp(32px, 5vw, 52px) clamp(24px, 5vw, 60px);
  text-align: center;
}
.discover-cta__card h2{
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 0 0 14px; text-wrap: balance;
}
.discover-cta__card p{
  color: var(--ink-soft); font-size: .98rem; line-height: 1.7;
  max-width: 56ch; margin: 0 auto 26px;
}


/* --------------------------------------------------------------------------
   27. Buchungs-Box (Lodgify Book-Now-Box)
   Eigenständige Komponente in js/book-now-box.js — objektspezifisches
   Buchungswidget mit Preisanzeige. Wie bei der Suchleiste passen diese
   Regeln nur die Optik über die von Lodgify bereitgestellten CSS-Variablen
   an unser Design an, ohne die Funktionalität des Widgets zu verändern.
   -------------------------------------------------------------------------- */
.book-now-box{
  display: block;
  width: 100%;
  min-height: 284px;

  --ldg-bnb-background: var(--card);
  --ldg-bnb-border-radius: 20px;
  --ldg-bnb-box-shadow: var(--shadow-md);
  --ldg-bnb-padding: 20px;
  --ldg-bnb-input-background: var(--paper);
  --ldg-bnb-button-border-radius: 999px;
  --ldg-bnb-color-primary: var(--pine);
  --ldg-bnb-color-primary-lighter: var(--pine-light);
  --ldg-bnb-color-primary-darker: #141d17;
  --ldg-bnb-color-primary-contrast: var(--paper);
  --ldg-component-calendar-cell-selection-bg-color: var(--pine);
  --ldg-component-calendar-cell-selection-color: var(--paper);
  --ldg-component-calendar-cell-selected-bg-color: var(--pine-light);
  --ldg-component-calendar-cell-selected-color: var(--paper);
  --ldg-bnb-font-family: var(--font-body);
}

/* Innerhalb der Buchungssektion einer Apartment-Seite: die Box tritt an die
   Stelle der Suchleiste und nutzt die volle Breite der Karte. */
.booking__card .book-now-box{ min-height: 284px; }


/* --------------------------------------------------------------------------
   28. Motorradtouren – Desktop-Premium-Layout (nur diese Seite, via .page-moto)
   Die Basis-Styles oben sind bewusst kompakt gehalten, damit sie auf allen
   Unterseiten (Apartments, Region etc.) funktionieren. Auf großen Bildschirmen
   wirkte das auf der Motorradtouren-Seite dadurch wie eine hochskalierte
   Mobile-Ansicht. Dieser Block nutzt ab 1280px gezielt mehr Breite, größere
   Karten und ein eigenes Spaltenraster, ohne andere Seiten zu beeinflussen.
   -------------------------------------------------------------------------- */
@media (min-width: 1280px){

  /* Allgemein: mehr nutzbare Breite, weniger Leerraum links/rechts */
  .page-moto .content-section{ max-width: 1500px; padding-left: 3.5vw; padding-right: 3.5vw; }
  .page-moto .hero-v2__content{ max-width: 1500px; padding-left: 3.5vw; padding-right: 3.5vw; }

  /* Hero: volles Bild, weniger Verdunkelung, größere Texte, mehr Luft unten */
  .page-moto .hero-v2__scrim{
    background: linear-gradient(180deg, rgba(18,22,15,.05) 0%, rgba(16,20,13,.12) 42%, rgba(13,17,11,.62) 100%);
  }
  .page-moto .hero-v2__content{ padding-top: 148px; padding-bottom: 100px; }
  .page-moto .hero-v2__content h1{ font-size: 3.9rem; max-width: 16ch; }
  .page-moto .hero-v2__lead{ font-size: 1.14rem; max-width: 62ch; }
  .page-moto .hero-v2__cta{ align-items: stretch; }
  .page-moto .hero-v2__cta .btn{ align-items: center; justify-content: center; min-width: 220px; }
  .page-moto .hero-v2__badges{ margin-top: 12px; margin-bottom: 4px; gap: 18px; }
  .page-moto .hero-v2__badge{ padding: 14px 22px 14px 14px; }

  /* Warum mit uns fahren: großes Bild, breiter Text, 2x2-Grid darunter */
  .page-moto .region__block{
    grid-template-columns: 1.05fr 1fr;
    gap: 64px;
    max-width: 1500px; margin: 0 auto 56px;
  }
  .page-moto .region__block img{ aspect-ratio: 5/4; }
  .page-moto .region__copy p{ max-width: none; font-size: 1.02rem; }
  .page-moto .feature-grid--why{
    grid-template-columns: repeat(2, 1fr);
    max-width: 1040px; margin: 56px auto 0; gap: 36px;
  }
  .page-moto .feature-grid--why .feature-card__media{ aspect-ratio: 16/10; }
  .page-moto .feature-grid--why .feature-card__media img{ width: 100%; height: 100%; object-fit: cover; }
  .page-moto .feature-grid--why .feature-card__body{ padding: 38px 32px 32px; }
  .page-moto .feature-grid--why .feature-card__body h3{ font-size: 1.3rem; }
  .page-moto .feature-grid--why .feature-card__body p{ font-size: .96rem; }

  /* Unsere Motorräder: drei große Karten nebeneinander */
  .page-moto .moto-grid{
    grid-template-columns: repeat(3, 1fr);
    max-width: 1500px; gap: 40px;
  }
  .page-moto .moto-card__media{ aspect-ratio: 4/3; }
  .page-moto .moto-card__media img{ width: 100%; height: 100%; object-fit: cover; }
  .page-moto .moto-card:hover{ transform: translateY(-10px); }
  .page-moto .moto-card__body{ padding: 32px 30px 36px; }
  .page-moto .moto-card h3{ font-size: 1.5rem; }
  .page-moto .moto-card__desc{ font-size: .96rem; line-height: 1.6; }
  .page-moto .moto-card__spec{ font-size: .86rem; padding: 8px 16px; }

  /* Beliebte Touren: zwei große Karten, angeglichene Höhen */
  .page-moto .tour-grid{
    grid-template-columns: repeat(2, 1fr);
    max-width: 1400px; gap: 44px;
  }
  .page-moto .tour-card__media{ aspect-ratio: 3/2; }
  .page-moto .tour-card__media img{ width: 100%; height: 100%; object-fit: cover; }
  .page-moto .tour-card__body{ padding: 40px; }
  .page-moto .tour-card__route{ margin-bottom: 26px; }
  .page-moto .tour-card__body > p{ font-size: .96rem; }

  /* Leistungen: 4 Spalten x 2 Reihen, großzügiger Innenraum */
  .page-moto .feature-grid--services{
    grid-template-columns: repeat(4, 1fr);
    max-width: 1500px; gap: 30px;
  }
  .page-moto .feature-grid--services .feature-card__media{ aspect-ratio: 3/4; }
  .page-moto .feature-grid--services .feature-card__media img{ width: 100%; height: 100%; object-fit: cover; }
  .page-moto .feature-grid--services .feature-card__body{ padding: 40px 26px 32px; }

  /* Voraussetzungen: 2x2, größere Karten, mehr Innenabstand */
  .page-moto .apt2__amenity-grid{
    grid-template-columns: repeat(2, 1fr);
    max-width: 940px; gap: 30px;
  }
  .page-moto .apt2__amenity-card{ padding: 40px 38px; }
  .page-moto .apt2__amenity-card__icon{ width: 50px; height: 50px; margin-bottom: 20px; }
  .page-moto .apt2__amenity-card h3{ font-size: 1.15rem; }
  .page-moto .apt2__amenity-card p{ font-size: .94rem; }

  /* Preise: drei große, gleich breite Karten */
  .page-moto .price-grid{
    grid-template-columns: repeat(3, 1fr);
    max-width: 1300px; gap: 34px;
  }
  .page-moto .price-card{ padding: 56px 40px; }
  .page-moto .price-card__value{ font-size: 2.8rem; }

  /* Galerie: 4-5 Spalten, größere Bilder */
  .page-moto .apt2__gallery-grid{ column-count: 5; max-width: 1500px; column-gap: 22px; }
  .page-moto .apt2__gallery-item{ margin-bottom: 22px; }

  /* FAQ: moderat breiter statt gestaucht */
  .page-moto .faq__list{ max-width: 1100px; margin: 0 auto; }

  /* Abschluss-CTA: höher, mehr Luft, größerer Button */
  .page-moto .final-cta{ min-height: 62vh; }
  .page-moto .final-cta__content{ max-width: 720px; padding: 90px 6vw; gap: 28px; }
  .page-moto .final-cta__btn{ padding: 20px 46px; font-size: 1.02rem; }
}