/* ============================
   Grundlagen & Variablen
============================ */
:root{
  --color-ink:#2e2721;
  --color-ink-light:#6b6153;
  --color-cream:#fbf3e7;
  --color-cream-alt:#f5ead9;
  --color-sand:#e9dcc6;   /* zweiter Beigeton für den Wechsel der Abschnitte */
  --color-white:#ffffff;
  --color-line:#e8dcc4;
  --color-accent:#c69a5c;
  --color-accent-dark:#a97f45;

  --font-heading:'Playfair Display', serif;
  --font-body:'Poppins', sans-serif;

  --radius:16px;
  --shadow-soft:0 20px 44px rgba(46,39,33,0.16);
  --shadow-card:0 10px 26px rgba(46,39,33,0.08);
  --transition:0.25s ease;
}

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

html{scroll-behavior:smooth;}

body{
  font-family:var(--font-body);
  color:var(--color-ink);
  background:var(--color-cream-alt);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block;}

h1,h2,h3{
  font-family:var(--font-heading);
  color:var(--color-ink);
  font-weight:600;
  line-height:1.2;
}

h1{font-size:clamp(2.4rem,5.5vw,3.8rem);font-weight:700;}
h2{font-size:clamp(1.7rem,3.2vw,2.4rem);margin-bottom:1rem;}
h3{font-size:1.35rem;margin-bottom:0.4rem;}

p{color:var(--color-ink-light);}

a{color:inherit;text-decoration:none;}

ul{list-style:none;}

.container{
  max-width:1160px;
  margin:0 auto;
  padding:0 24px;
}

.center{text-align:center;margin-left:auto;margin-right:auto;}

section{padding:100px 0;}

.section-eyebrow{
  text-transform:uppercase;
  letter-spacing:1.8px;
  font-size:0.78rem;
  font-weight:600;
  color:var(--color-accent);
  margin-bottom:10px;
}

/* ============================
   Buttons
============================ */
.btn{
  display:inline-block;
  padding:15px 30px;
  border-radius:50px;
  font-weight:600;
  font-family:var(--font-body);
  font-size:0.82rem;
  text-transform:uppercase;
  letter-spacing:0.8px;
  transition:transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
  border:2px solid transparent;
  cursor:pointer;
}
.btn-primary{
  background:var(--color-accent);
  color:var(--color-white);
  box-shadow:0 10px 22px rgba(198,154,92,0.4);
}
.btn-primary:hover{background:var(--color-accent-dark);transform:translateY(-2px);box-shadow:0 14px 28px rgba(198,154,92,0.48);}

.link-cta{
  display:inline-block;
  color:var(--color-accent);
  font-weight:600;
  font-size:0.78rem;
  text-transform:uppercase;
  letter-spacing:0.8px;
  border-bottom:1px solid var(--color-accent);
  padding-bottom:2px;
  transition:color var(--transition), border-color var(--transition);
}
.link-cta:hover{color:var(--color-accent-dark);border-color:var(--color-accent-dark);}

/* ============================
   Header
============================ */
.site-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  padding:20px 0;
  transition:background var(--transition), box-shadow var(--transition), padding var(--transition);
}
.site-header.scrolled{
  background:rgba(245,234,217,0.96);
  backdrop-filter:blur(6px);
  box-shadow:0 4px 20px rgba(0,0,0,0.06);
  padding:12px 0;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.logo{
  display:flex;
  flex-direction:column;
  line-height:1.15;
}
.logo-word{
  font-family:var(--font-heading);
  font-weight:600;
  font-size:1.5rem;
  color:var(--color-white);
  transition:color var(--transition);
}
.logo-sub{
  font-size:0.62rem;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:rgba(255,255,255,0.85);
  transition:color var(--transition);
}
.site-header.scrolled .logo-word{color:var(--color-ink);}
.site-header.scrolled .logo-sub{color:var(--color-accent);}

.main-nav{
  display:flex;
  align-items:center;
  gap:34px;
}
.main-nav a{
  color:var(--color-white);
  font-weight:500;
  font-size:0.92rem;
  transition:color var(--transition);
}
.site-header.scrolled .main-nav a{color:var(--color-ink);}
.main-nav a:hover{color:var(--color-accent);}

.nav-cta{
  background:var(--color-accent);
  color:var(--color-white) !important;
  padding:11px 22px;
  border-radius:50px;
  font-size:0.78rem !important;
  text-transform:uppercase;
  letter-spacing:0.6px;
  font-weight:600 !important;
}
.nav-cta:hover{background:var(--color-accent-dark);}

.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding:6px;
}
.nav-toggle span{
  width:26px;height:2px;
  background:var(--color-white);
  transition:all var(--transition);
}
.site-header.scrolled .nav-toggle span{background:var(--color-ink);}

/* ============================
   Hero
============================ */
.hero{
  position:relative;
  min-height:640px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
  color:var(--color-white);
  padding-top:90px;
}
.hero-bg{
  position:absolute;inset:0;
  z-index:-2;
  background-image:url('../images/hero-strandkoerbe.jpg');
  background-size:cover;
  background-position:center 50%;
}
.hero-overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(120deg, rgba(18,12,7,0.72) 0%, rgba(18,12,7,0.5) 40%, rgba(18,12,7,0.22) 68%, rgba(18,12,7,0.1) 100%),
    linear-gradient(to top, rgba(18,12,7,0.35) 0%, rgba(18,12,7,0) 35%);
  z-index:-1;
}
/* Ohne "width:100%" schrumpft der Block im Flex-Layout auf Textbreite
   und die automatischen Ränder schieben ihn zur Mitte. Mit voller Breite
   gilt dieselbe Spalte wie in der Kopfzeile – der Text beginnt dadurch
   exakt bündig unter dem Logo. */
.hero .container{width:100%;}
.nowrap{white-space:nowrap;}
.hero-eyebrow{
  text-transform:uppercase;
  letter-spacing:2.2px;
  font-size:0.85rem;
  font-weight:600;
  margin-bottom:20px;
  color:var(--color-cream);
  text-shadow:0 2px 10px rgba(0,0,0,0.4);
}
.hero h1{
  color:var(--color-white);
  margin-bottom:22px;
  text-shadow:0 4px 20px rgba(0,0,0,0.4);
}
.hero-text{
  color:rgba(255,255,255,0.97);
  font-size:1.1rem;
  max-width:500px;
  text-shadow:0 2px 10px rgba(0,0,0,0.4);
}
.hero-locations{
  margin-top:16px;
  color:var(--color-white);
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:0.3px;
  text-shadow:0 2px 10px rgba(0,0,0,0.4);
}
.hero-locations strong{font-weight:700;}

/* Buchungsleiste */
.booking-bar-wrap{
  position:relative;
  z-index:5;
  height:0;
  overflow:visible;
}
.booking-bar{
  position:absolute;
  top:-64px;
  left:0;
  right:0;
  margin:0 auto;
  width:calc(100% - 48px);
  max-width:1140px;
  background:var(--color-white);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
  padding:24px 30px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:0;
  flex-wrap:wrap;
}
.booking-field{
  flex:1 1 150px;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:0 22px;
  border-right:1px solid var(--color-line);
}
.booking-field:last-of-type{border-right:none;}
.booking-field label{
  font-size:0.7rem;
  text-transform:uppercase;
  letter-spacing:0.8px;
  font-weight:600;
  color:var(--color-ink-light);
}
.booking-field input,
.booking-field select{
  border:none;
  padding:8px 0;
  font-family:var(--font-body);
  font-size:0.92rem;
  color:var(--color-ink);
  background:transparent;
}
.booking-field input:focus,
.booking-field select:focus{outline:none;}

/* ============================
   Ferienwohnung-Auswahl in der Buchungsleiste
============================ */
.wahl{position:relative;}
.wahl-knopf{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border:none;
  background:transparent;
  padding:8px 0;
  font-family:var(--font-body);
  font-size:0.92rem;
  color:var(--color-ink);
  text-align:left;
  cursor:pointer;
}
.wahl-knopf:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px;border-radius:4px;}
.wahl-knopf--zuklein .wahl-text{color:var(--kal-belegt);font-weight:600;}
.wahl-pfeil{
  width:16px;height:16px;flex:none;
  fill:none;stroke:var(--color-ink-light);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}
.wahl-liste{
  min-width:262px;
  position:absolute;
  top:calc(100% + 8px);
  left:auto;
  right:-12px;
  z-index:20;
  margin:0;
  padding:6px;
  list-style:none;
  background:var(--color-white);
  border:1px solid var(--color-line);
  border-radius:12px;
  box-shadow:var(--shadow-soft);
}
.wahl-eintrag{
  position:relative;
  padding:9px 12px;
  border-radius:8px;
  font-size:0.9rem;
  color:var(--color-ink);
  cursor:pointer;
}
.wahl-eintrag:hover,
.wahl-eintrag:focus-visible{background:var(--color-cream-alt);outline:none;}
.wahl-eintrag[aria-selected="true"]{font-weight:600;}
.wahl-eintrag[aria-selected="true"]::after{
  content:'✓';
  position:absolute;
  right:12px;top:9px;
  color:var(--color-accent-dark);
}

/* Zu klein für die gewählte Gästezahl */
.wahl-eintrag--zuklein .wahl-name{
  color:var(--kal-belegt);
  text-decoration:line-through;
  text-decoration-thickness:1px;
}
.wahl-eintrag--zuklein::before{
  content:'!';
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;height:16px;
  margin-right:8px;
  border-radius:50%;
  background:var(--kal-belegt);
  color:var(--color-white);
  font-size:0.7rem;
  font-weight:700;
  vertical-align:-3px;
}

/* Das kleine Hinweisfenster beim Darüberfahren */
.wahl-tipp{
  position:absolute;
  left:12px;
  width:238px;
  right:auto;
  bottom:calc(100% + 6px);
  z-index:30;
  display:block;
  padding:9px 12px;
  border-radius:9px;
  background:var(--color-ink);
  color:var(--color-cream);
  font-size:0.8rem;
  line-height:1.45;
  font-weight:400;
  text-decoration:none;
  box-shadow:0 10px 24px rgba(46,39,33,0.28);
  opacity:0;
  visibility:hidden;
  transform:translateY(4px);
  transition:opacity var(--transition), transform var(--transition), visibility var(--transition);
  pointer-events:none;
}
.wahl-tipp::after{
  content:'';
  position:absolute;
  left:22px;
  top:100%;
  border:6px solid transparent;
  border-top-color:var(--color-ink);
}
.wahl-eintrag--zuklein:hover .wahl-tipp,
.wahl-eintrag--zuklein:focus-visible .wahl-tipp{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
/* Beim obersten Eintrag klappt der Hinweis nach unten auf */
.wahl-eintrag:first-child .wahl-tipp{bottom:auto;top:calc(100% + 6px);}
.wahl-eintrag:first-child .wahl-tipp::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:var(--color-ink);}

/* Warnzeile unter der Buchungsleiste */
.booking-warnung{
  flex:1 1 100%;
  margin:16px 22px 0;
  padding:11px 14px;
  border-radius:10px;
  background:rgba(193,80,46,0.09);
  border:1px solid rgba(193,80,46,0.3);
  color:var(--kal-belegt);
  font-size:0.86rem;
  line-height:1.5;
}
.booking-submit{
  margin-left:22px;
  white-space:nowrap;
}

/* ============================
   Intro / Über uns
============================ */
/* Über uns: Text links, Foto rechts – auf hellem Grund abgesetzt */
.intro{background:var(--color-cream-alt);}
.intro-grid{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:64px;
  align-items:center;
}
.intro-text{max-width:60ch;}
.intro-text p + p{margin-top:14px;}
.intro-gruss{
  margin-top:22px !important;
  font-family:var(--font-heading);
  font-size:1.15rem;
  color:var(--color-ink);
}
.intro-bild{
  margin:0;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
}
.intro-bild img{
  width:100%;
  height:460px;
  object-fit:cover;
  display:block;
}

/* ============================
   Ferienwohnungen
============================ */
.apartments{background:var(--color-cream-alt);}
.apartment-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
  margin-top:50px;
}
.apartment-card{
  display:block;
  position:relative;
  background:var(--color-white);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-card);
  transition:transform 0.3s ease, box-shadow 0.3s ease;
}
/* Höhere Spezifität, damit der Hover-Effekt die reveal-Animation überschreibt */
.apartment-card:hover,
.apartment-card:focus-visible,
.apartment-card.reveal.visible:hover,
.apartment-card.reveal.visible:focus-visible{
  transform:translateY(-10px) scale(1.045);
  box-shadow:0 26px 52px rgba(46,39,33,0.28), 0 0 0 3px var(--color-accent);
  z-index:3;
  outline:none;
}
.apartment-card .apartment-img{transition:transform 0.4s ease;}
.apartment-card:hover .apartment-img{transform:scale(1.07);}
.apartment-card h3{transition:color var(--transition);}
.apartment-card:hover h3{color:var(--color-accent-dark);}
.apartment-img{height:170px;}
.apartment-body{padding:20px 22px 24px;}
.apartment-tag{
  text-transform:uppercase;
  letter-spacing:1.2px;
  font-size:0.68rem;
  font-weight:700;
  color:var(--color-accent);
  padding:14px 22px 0;
}
.apartment-body h3{font-size:1.15rem;min-height:2.75rem;}
.apartment-meta{
  font-size:0.82rem;
  color:var(--color-ink-light);
  margin-bottom:8px;
}
.apartment-price{
  font-size:0.9rem;
  color:var(--color-ink);
}
.apartment-price strong{color:var(--color-accent);font-family:var(--font-heading);font-size:1.1rem;}
.price-note{
  font-size:0.75rem;
  color:var(--color-ink-light);
  margin-top:2px;
}
.apartments-more{
  text-align:center;
  margin-top:50px;
}

/* Bildplatzhalter */
.img-placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:var(--color-white);
  font-size:0.85rem;
  font-weight:500;
  padding:20px;
}
.ph-1{background:linear-gradient(135deg,#c69a5c,#e8c592);}
.ph-2{background:linear-gradient(135deg,#8a6a4d,#c69a5c);}
.ph-3{background:linear-gradient(135deg,#4f4438,#8a6a4d);}

/* ============================
   Unsere Orte
============================ */
.orte{background:var(--color-sand);}
.orte-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  margin-top:50px;
}
.orte-card{
  display:block;
  position:relative;
  border:1px solid var(--color-line);
  background:var(--color-white);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-card);
  transition:transform 0.3s ease, box-shadow 0.3s ease;
}
/* Höhere Spezifität, damit der Hover-Effekt die reveal-Animation überschreibt */
.orte-card:hover,
.orte-card:focus-visible,
.orte-card.reveal.visible:hover,
.orte-card.reveal.visible:focus-visible{
  transform:translateY(-10px) scale(1.035);
  box-shadow:0 26px 52px rgba(46,39,33,0.28), 0 0 0 3px var(--color-accent);
  z-index:3;
  outline:none;
}
.orte-card .orte-img{transition:transform 0.4s ease;}
.orte-card:hover .orte-img{transform:scale(1.07);}
.orte-card h3{transition:color var(--transition);}
.orte-card:hover h3{color:var(--color-accent-dark);}
.orte-card .link-cta{transition:color var(--transition), border-color var(--transition);}
.orte-card:hover .link-cta{color:var(--color-accent-dark);border-color:var(--color-accent-dark);}
.orte-img{height:190px;}
.orte-body{padding:24px;}
.orte-body p{margin-bottom:16px;font-size:0.92rem;}

/* ============================
   Gästestimmen
============================ */
.testimonials{background:var(--color-sand);}
.testimonial-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  margin-top:50px;
}
.testimonial{
  background:var(--color-white);
  border:1px solid var(--color-line);
  border-radius:var(--radius);
  padding:30px;
}
.testimonial p{
  color:var(--color-ink);
  font-style:italic;
  margin-bottom:16px;
}
.testimonial cite{
  font-style:normal;
  font-weight:600;
  color:var(--color-accent);
  font-size:0.9rem;
}

/* ============================
   Kontakt
============================ */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:60px;
}
.contact-details{margin-top:24px;}
.contact-details p{margin-bottom:14px;}
.contact-details a{color:var(--color-accent);font-weight:500;}
.contact-details a:hover{text-decoration:underline;}

.contact-form{
  background:var(--color-cream-alt);
  padding:32px;
  border-radius:var(--radius);
}
.form-row{margin-bottom:18px;}
.form-row-split{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.form-row label{
  display:block;
  font-size:0.85rem;
  font-weight:600;
  color:var(--color-ink);
  margin-bottom:6px;
}
.form-row input,
.form-row select,
.form-row textarea{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--color-line);
  border-radius:8px;
  font-family:var(--font-body);
  font-size:0.95rem;
  background:var(--color-white);
  color:var(--color-ink);
  transition:border-color var(--transition);
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus{
  outline:none;
  border-color:var(--color-accent);
}
.form-note{
  margin-top:14px;
  font-size:0.9rem;
  color:var(--color-accent-dark);
  font-weight:500;
}

/* ============================
   Footer
============================ */
.site-footer{
  background:var(--color-ink);
  color:rgba(255,255,255,0.85);
  padding:30px 0;
}
.footer-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  font-size:0.9rem;
}
.footer-nav{display:flex;gap:20px;}
.footer-nav a:hover{color:var(--color-white);text-decoration:underline;}

/* ============================
   Scroll-Reveal Animation
============================ */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible{
  opacity:1;
  transform:translateY(0);
}

/* ============================
   Legal pages (Impressum/Datenschutz)
============================ */
.legal-page{
  padding:160px 0 100px;
  max-width:820px;
  margin:0 auto;
}
.legal-page h1{font-size:2rem;margin-bottom:24px;}
.legal-page h2{font-size:1.2rem;margin-top:32px;margin-bottom:10px;}
.legal-page p, .legal-page li{color:var(--color-ink-light);margin-bottom:10px;}
.legal-page a{color:var(--color-accent);}
.back-link{display:inline-block;margin-bottom:30px;color:var(--color-accent);font-weight:500;}

/* ============================
   Wohnungs-Detailseiten
============================ */
.detail-hero{
  background:var(--color-cream-alt);
  padding:160px 0 50px;
}
.detail-hero h1{margin-top:8px;margin-bottom:14px;}
.detail-meta{
  font-size:1rem;
  color:var(--color-ink);
}
.detail-meta strong{color:var(--color-accent);font-family:var(--font-heading);font-size:1.1rem;}

.detail-gallery{padding:40px 0 0;background:var(--color-cream-alt);}
.gallery-grid{
  display:grid;
  grid-template-columns:2fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:16px;
  height:420px;
}
.gallery-main{grid-row:1 / 3;height:100%;border-radius:var(--radius);}
.gallery-thumb{height:100%;border-radius:var(--radius);}

/* Weitere Fotos unter der Hauptgalerie (Wohnungsseiten) */
.gallery-weitere{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:16px;
  margin-top:16px;
}
.gallery-weitere img{
  width:100%;
  height:150px;
  object-fit:cover;
  border-radius:var(--radius);
  display:block;
}
@media (max-width:900px){
  .gallery-weitere{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-top:12px;}
  .gallery-weitere img{height:120px;}
}

.detail-content{padding-top:70px;background:var(--color-sand);}
.detail-grid{
  display:grid;
  grid-template-columns:1.7fr 1fr;
  gap:60px;
  align-items:start;
}
.detail-content h2{font-size:1.4rem;margin-top:36px;}
.detail-content h2:first-child{margin-top:0;}
.detail-content .apartment-features{margin:16px 0 0;}

.facts-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px 32px;
  margin-top:20px;
}
.facts-list li{
  display:flex;
  align-items:center;
  gap:14px;
  font-size:0.95rem;
  color:var(--color-ink);
}
.facts-list a{color:var(--color-accent);font-weight:600;}
.facts-list a:hover{text-decoration:underline;}
.facts-list svg{
  width:24px;height:24px;
  flex-shrink:0;
  stroke:var(--color-accent);
  fill:none;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
@media (max-width:600px){
  .facts-list{grid-template-columns:1fr;}
  .nowrap{white-space:normal;}
}

.toggle-details{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:26px;
  background:none;
  border:none;
  padding:0;
  color:var(--color-accent);
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.9rem;
  cursor:pointer;
  border-bottom:1px solid var(--color-accent);
  padding-bottom:2px;
  transition:color var(--transition), border-color var(--transition);
}
.toggle-details:hover{color:var(--color-accent-dark);border-color:var(--color-accent-dark);}
.toggle-details::after{
  content:"▾";
  font-size:0.75rem;
  transition:transform var(--transition);
}
.toggle-details[aria-expanded="true"]::after{transform:rotate(180deg);}

.full-features{margin-top:22px;}
.feature-group{margin-bottom:24px;}
.feature-group:last-child{margin-bottom:0;}
.feature-group h4{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-heading);
  font-size:1rem;
  font-weight:600;
  color:var(--color-ink);
  margin-bottom:12px;
}
.feature-group h4 svg{
  width:20px;height:20px;
  flex-shrink:0;
  stroke:var(--color-accent);
  fill:none;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.feature-group .apartment-features{
  display:block;
  margin:0;
}
.feature-group .apartment-features li{
  display:block;
  background:none;
  padding:4px 0 4px 18px;
  position:relative;
  color:var(--color-ink-light);
  font-size:0.92rem;
  font-weight:400;
  border-radius:0;
}
.feature-group .apartment-features li::before{
  content:"•";
  position:absolute;
  left:2px;
  color:var(--color-accent);
  font-weight:700;
}

.detail-sidebar{
  position:sticky;
  top:110px;
}
.detail-card{
  background:var(--color-cream-alt);
  border-radius:var(--radius);
  padding:30px;
  text-align:center;
}
.detail-price{
  font-size:1rem;
  color:var(--color-ink);
  margin-bottom:18px;
}
.detail-price strong{
  display:block;
  font-family:var(--font-heading);
  font-size:1.8rem;
  color:var(--color-accent);
  margin-top:4px;
}
.detail-card .btn{width:100%;}

@media (max-width:900px){
  .gallery-grid{grid-template-columns:1fr;grid-template-rows:auto;height:auto;}
  .gallery-main{height:260px;}
  .gallery-thumb{height:160px;}
  .detail-grid{grid-template-columns:1fr;}
  .detail-sidebar{position:static;}
}

/* ============================
   Preisleiste am Handy
   Auf dem Desktop steht die Preisbox als Spalte neben dem Text.
   Am Handy rutscht sie sonst ans Seitenende, wo sie niemand
   sieht – dort wird daraus eine feste Leiste am unteren Rand.
============================ */
@media (max-width:900px){
  .detail-sidebar{
    position:fixed;
    top:auto;
    left:0;
    right:0;
    bottom:0;
    z-index:40;
    margin:0;
  }
  .detail-card{
    display:flex;
    align-items:center;
    gap:16px;
    margin:0;
    padding:12px 18px;
    padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px));
    border-radius:0;
    border-top:1px solid var(--color-line);
    background:var(--color-white);
    box-shadow:0 -10px 28px rgba(46,39,33,0.16);
    text-align:left;
  }
  .detail-card .detail-price{
    margin:0;
    font-size:0.78rem;
    line-height:1.25;
    white-space:nowrap;
  }
  .detail-card .detail-price strong{
    display:inline;
    font-size:1.35rem;
    margin-top:0;
  }
  /* Der Zusatz würde die schmale Leiste überladen –
     die vollständige Preistabelle steht darüber auf der Seite. */
  .detail-card .price-note{display:none;}
  .detail-card .btn{
    width:auto;
    margin-left:auto;
    flex:none;
    white-space:nowrap;
    padding:13px 22px;
  }
  /* Platz, damit die Leiste den Seitenfuß nicht verdeckt */
  .hat-preisleiste .site-footer{padding-bottom:104px;}
}
@media (max-width:380px){
  .detail-card{gap:10px;padding-left:14px;padding-right:14px;}
  .detail-card .btn{padding:12px 16px;font-size:0.78rem;}
}

/* ============================
   Responsive
============================ */
@media (max-width:1000px){
  .apartment-grid{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:900px){
  .contact-grid{grid-template-columns:1fr;}
  .intro-grid{grid-template-columns:1fr;gap:40px;}
  .intro-bild img{height:300px;}
  .orte-grid{grid-template-columns:1fr;}
  .testimonial-grid{grid-template-columns:1fr;}
  .booking-bar{flex-direction:column;align-items:stretch;}
  .booking-field{border-right:none;border-bottom:1px solid var(--color-line);padding:10px 0;}
  .booking-field:last-of-type{border-bottom:none;}
  .booking-submit{margin-left:0;width:100%;margin-top:10px;}
}

@media (max-width:640px){
  .apartment-grid{grid-template-columns:1fr;}
}

@media (max-width:760px){
  .main-nav{
    position:fixed;
    top:0;right:0;
    height:100vh;
    width:min(78vw,320px);
    background:var(--color-white);
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    padding:40px;
    gap:26px;
    transform:translateX(100%);
    transition:transform var(--transition);
    box-shadow:-10px 0 30px rgba(0,0,0,0.1);
  }
  .main-nav.open{transform:translateX(0);}
  .main-nav a{color:var(--color-ink) !important;font-size:1.1rem;}
  .nav-toggle{display:flex;}
  .nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-toggle.open span:nth-child(2){opacity:0;}
  .nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  section{padding:60px 0;}
  .form-row-split{grid-template-columns:1fr;}
}

/* ============================
   Belegungskalender
============================ */
:root{
  --kal-frei:#2f7d5f;
  --kal-belegt:#c1502e;
  --kal-auswahl:#f5a300;   /* Umrandung des gewählten Zeitraums */
}

.kalender{margin-top:20px;}

.kal-kopf{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-bottom:22px;
}
.kal-nav{
  width:38px;height:38px;
  border:1px solid var(--color-line);
  background:var(--color-white);
  border-radius:8px;
  font-size:1.2rem;
  line-height:1;
  color:var(--color-ink);
  cursor:pointer;
  transition:background var(--transition), border-color var(--transition);
}
.kal-nav:hover{background:var(--color-cream-alt);border-color:var(--color-accent);}
.kal-auswahl{
  padding:9px 14px;
  border:1px solid var(--color-line);
  border-radius:8px;
  background:var(--color-white);
  font-family:var(--font-body);
  font-size:0.9rem;
  color:var(--color-ink);
  cursor:pointer;
}
.kal-auswahl:focus{outline:none;border-color:var(--color-accent);}

.kal-monate{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:34px;
}
.kal-monat-titel{
  text-align:center;
  font-family:var(--font-heading);
  font-size:1.05rem;
  color:var(--color-ink);
  margin-bottom:12px;
}
.kal-gitter{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:3px;
}
.kal-wochentag{
  text-align:center;
  font-size:0.72rem;
  font-weight:600;
  color:var(--color-ink-light);
  padding-bottom:6px;
}
.kal-tag{
  aspect-ratio:1 / 1;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0.82rem;
  font-weight:500;
  color:var(--color-white);
  border-radius:3px;
  background:var(--kal-frei);
}
.kal-tag--leer{background:transparent;}
.kal-tag--frei{background:var(--kal-frei);}
.kal-tag--belegt{background:var(--kal-belegt);}
.kal-tag--vergangen{
  background:#e3ddd2;
  color:var(--color-ink-light);
}
/* Wechseltage: halb belegt, halb frei */
.kal-tag--anreise{
  background:linear-gradient(135deg, var(--kal-frei) 50%, var(--kal-belegt) 50%);
}
.kal-tag--abreise{
  background:linear-gradient(135deg, var(--kal-belegt) 50%, var(--kal-frei) 50%);
}

.kal-legende{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:22px;
  margin-top:22px;
  font-size:0.85rem;
  color:var(--color-ink-light);
}
.kal-legende span{display:flex;align-items:center;gap:8px;}
.kal-punkt{
  width:16px;height:16px;
  border-radius:3px;
  display:inline-block;
}
.kal-punkt--frei{background:var(--kal-frei);}
.kal-punkt--belegt{background:var(--kal-belegt);}
.kal-punkt--wechsel{background:linear-gradient(135deg, var(--kal-belegt) 50%, var(--kal-frei) 50%);}


/* ============================
   Preisrechner im Kalender
============================ */
.kal-anleitung{
  margin:0 0 16px;
  font-size:0.9rem;
  color:var(--color-ink-light);
}
.kal-tag--waehlbar{cursor:pointer;}
.kal-tag--waehlbar:hover,
.kal-tag--waehlbar:focus-visible{
  outline:2px solid var(--color-ink);
  outline-offset:-2px;
}
/* ============================
   Der gewählte Zeitraum
   Die Tage behalten ihre Farbe und bekommen eine kräftige
   Umrandung in einem hellen Orange – das hebt sich deutlich
   vom Grün ab und wird nicht mit "belegt" (rot) verwechselt.
============================ */
.kal-tag--gewaehlt,
.kal-tag--start,
.kal-tag--ende{
  position:relative;
  z-index:2;
  box-shadow:inset 0 0 0 3px var(--kal-auswahl);
  font-weight:700;
}
/* Anreise- und Abreisetag noch etwas kräftiger */
.kal-tag--start,
.kal-tag--ende{
  box-shadow:inset 0 0 0 4px var(--kal-auswahl);
}

.kal-rechner{
  margin-top:24px;
  border:1px solid var(--color-line);
  border-radius:var(--radius);
  background:var(--color-white);
  padding:20px 22px;
  box-shadow:var(--shadow-card);
}
.kal-rechner-kopf{
  /* Eigenes, leicht getöntes Band für die Bedienfelder –
     dadurch heben sie sich klar vom weißen Ergebnisteil ab. */
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px;
  margin:-20px -22px 0;
  padding:15px 22px;
  background:var(--color-cream);
  border-bottom:1px solid var(--color-line);
  border-radius:var(--radius) var(--radius) 0 0;
}
.kal-feld{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:0.86rem;
  font-weight:500;
  letter-spacing:0.2px;
  color:var(--color-ink-light);
}
.kal-feld select{
  appearance:none;
  -webkit-appearance:none;
  font-family:inherit;
  font-size:0.95rem;
  font-weight:600;
  color:var(--color-ink);
  padding:10px 38px 10px 14px;
  border:2px solid var(--color-accent);
  border-radius:10px;
  background-color:var(--color-white);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a97f45' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 11px center;
  background-size:15px 15px;
  box-shadow:0 1px 2px rgba(46,39,33,0.06);
  cursor:pointer;
  transition:border-color var(--transition), box-shadow var(--transition);
}
.kal-feld select:hover{border-color:var(--color-accent-dark);}
.kal-feld select:focus{
  outline:none;
  border-color:var(--color-accent-dark);
  box-shadow:0 0 0 3px rgba(198,154,92,0.3);
}

/* Der Haken sieht aus wie ein eigener Schalter und färbt sich,
   sobald er gesetzt ist. */
.kal-feld--haken{
  gap:11px;
  padding:10px 16px 10px 13px;
  border:2px solid var(--color-line);
  border-radius:10px;
  background:var(--color-white);
  color:var(--color-ink);
  font-size:0.9rem;
  font-weight:500;
  box-shadow:0 1px 2px rgba(46,39,33,0.06);
  cursor:pointer;
  transition:border-color var(--transition), background var(--transition);
}
.kal-feld--haken:hover{border-color:var(--color-accent);}
.kal-feld--haken.ist-angehakt{
  border-color:var(--color-accent);
  background:var(--color-cream-alt);
  font-weight:600;
}
.kal-feld--haken input{
  width:19px;height:19px;
  accent-color:var(--color-accent-dark);
  cursor:pointer;
  flex:none;
}
.kal-zuruecksetzen{
  margin-left:auto;
  font-family:inherit;
  font-size:0.85rem;
  font-weight:500;
  color:var(--color-ink-light);
  background:none;
  border:1px solid transparent;
  border-radius:9px;
  padding:9px 14px;
  cursor:pointer;
  transition:color var(--transition), border-color var(--transition), background var(--transition);
}
.kal-zuruecksetzen:hover{
  color:var(--color-ink);
  border-color:var(--color-line);
  background:var(--color-white);
}

.kal-meldung{
  margin:16px 0 0;
  font-size:0.92rem;
  color:var(--color-ink-light);
}
.kal-zeitraum{
  margin:16px 0 12px;
  font-family:var(--font-heading);
  font-size:1.1rem;
  color:var(--color-ink);
}
.kal-rechnung{
  width:100%;
  border-collapse:collapse;
  font-size:0.92rem;
}
.kal-rechnung th,
.kal-rechnung td{
  text-align:left;
  padding:8px 0;
  border-bottom:1px solid var(--color-line);
  font-weight:400;
  color:var(--color-ink-light);
}
.kal-rechnung td{text-align:right;white-space:nowrap;color:var(--color-ink);}
.kal-rechnung-summe th,
.kal-rechnung-summe td{
  border-bottom:none;
  padding-top:12px;
  font-weight:700;
  font-size:1.05rem;
  color:var(--color-ink);
}
.kal-kleingedruckt{
  margin-top:12px;
  font-size:0.82rem;
  line-height:1.55;
  color:var(--color-ink-light);
}
.kal-anfragen{margin-top:18px;}

@media (max-width:520px){
  .kal-rechner{padding:16px 15px;}
  .kal-rechner-kopf{gap:12px;margin:-16px -15px 0;padding:13px 15px;}
  .kal-zuruecksetzen{margin-left:0;}
}
.kal-hinweis{
  margin-top:14px;
  font-size:0.85rem;
  color:var(--color-ink-light);
}

@media (max-width:700px){
  .kal-monate{grid-template-columns:1fr;gap:26px;}
}

/* Wunschzeitraum aus der Suchleiste */
.kal-tag--wunsch{
  outline:2px dashed var(--color-ink);
  outline-offset:-2px;
  font-weight:700;
}
.kal-punkt--wunsch{
  background:var(--color-cream-alt);
  border:2px dashed var(--color-ink);
}
.wunsch-hinweis{
  margin-top:12px;
  font-weight:600;
  color:var(--color-accent-dark);
}

/* Übersichtsseite "Alles auf einen Blick" */
.uebersicht-block{
  background:var(--color-white);
  border:1px solid var(--color-line);
  border-radius:var(--radius);
  padding:28px;
  margin-bottom:28px;
}
.uebersicht-kopf{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
  padding-bottom:20px;
  border-bottom:1px solid var(--color-line);
}
.uebersicht-kopf h2{font-size:1.35rem;margin-bottom:4px;}
.uebersicht-kopf .apartment-meta{margin-bottom:0;}
.uebersicht-kopf .apartment-meta strong{color:var(--color-accent);}


/* ============================
   Lage / Karte
============================ */
.karte{margin-top:20px;}
.karte-bild{
  position:relative;
  display:block;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--color-line);
  transition:box-shadow var(--transition);
}
.karte-bild:hover{box-shadow:0 16px 34px rgba(46,39,33,0.18);}
.karte-bild img{
  width:100%;
  height:340px;
  object-fit:cover;
  display:block;
}
.karte-knopf{
  position:absolute;
  top:16px;left:16px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--color-white);
  color:var(--color-ink);
  font-size:0.8rem;
  font-weight:600;
  padding:10px 16px;
  border-radius:8px;
  box-shadow:0 4px 14px rgba(46,39,33,0.2);
  transition:background var(--transition), color var(--transition);
}
.karte-knopf::after{content:"↗";font-size:0.9rem;}
.karte-bild:hover .karte-knopf{background:var(--color-accent);color:var(--color-white);}
.karte-quelle{
  margin-top:10px;
  font-size:0.78rem;
  color:var(--color-ink-light);
}
.karte-quelle a{color:var(--color-accent);}
.karte-quelle a:hover{text-decoration:underline;}

@media (max-width:600px){
  .karte-bild img{height:240px;}
}

/* ============================
   Hinweise des Gastgebers
============================ */
.hinweis-titel{
  font-family:var(--font-heading);
  font-size:1.05rem;
  color:var(--color-ink);
  margin-top:28px;
  margin-bottom:12px;
}
.bedingungen{
  width:100%;
  border-collapse:collapse;
  font-size:0.92rem;
}
.bedingungen th,
.bedingungen td{
  text-align:left;
  padding:10px 12px;
  border-bottom:1px solid var(--color-line);
  vertical-align:top;
}
.bedingungen th{
  font-weight:600;
  color:var(--color-ink);
  width:190px;
}
.bedingungen td{color:var(--color-ink-light);}
.hinweis-liste{margin:0;}

/* Preistabelle auf den Wohnungsseiten */
.preise{
  width:100%;
  border-collapse:collapse;
  font-size:0.95rem;
  margin-top:6px;
  background:var(--color-white);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-card);
}
.preise th,
.preise td{
  text-align:left;
  padding:11px 14px;
  border-bottom:1px solid var(--color-line);
}
.preise tr:last-child th,
.preise tr:last-child td{border-bottom:none;}
.preise thead th{
  font-weight:600;
  color:var(--color-ink);
  background:var(--color-cream-alt);
  font-size:0.88rem;
  letter-spacing:0.02em;
}
.preise tbody th{
  font-weight:400;
  color:var(--color-ink-light);
}
.preise tbody td{
  color:var(--color-ink);
  font-weight:600;
  white-space:nowrap;
}
.preis-hinweis{
  font-size:0.9rem;
  color:var(--color-ink-light);
  margin-top:12px;
}
@media (max-width:520px){
  .preise{font-size:0.88rem;}
  .preise th,.preise td{padding:9px 8px;}
}

.storno{
  margin-top:30px;
  border:1px solid var(--color-line);
  border-radius:var(--radius);
  background:var(--color-cream-alt);
  padding:0 22px;
}
.storno summary{
  cursor:pointer;
  padding:16px 0;
  font-weight:600;
  font-size:0.92rem;
  color:var(--color-accent-dark);
  list-style:none;
}
.storno summary::-webkit-details-marker{display:none;}
.storno summary::after{
  content:"▾";
  float:right;
  transition:transform var(--transition);
}
.storno[open] summary::after{transform:rotate(180deg);}
.storno-inhalt{
  padding-bottom:20px;
  border-top:1px solid var(--color-line);
  padding-top:18px;
}
.storno-inhalt p{font-size:0.9rem;margin-bottom:14px;}
.storno-liste{margin:0 0 16px;}
.storno-liste li{
  position:relative;
  padding-left:18px;
  margin-bottom:6px;
  font-size:0.9rem;
  color:var(--color-ink-light);
}
.storno-liste li::before{
  content:"•";
  position:absolute;left:2px;
  color:var(--color-accent);
  font-weight:700;
}

@media (max-width:600px){
  .bedingungen th{width:auto;display:block;padding-bottom:2px;border-bottom:none;}
  .bedingungen td{display:block;padding-top:0;}
}

/* ============================
   Foto-Galerie auf Ortsseiten
============================ */
.ort-galerie{
  display:grid;
  gap:16px;
}
.ort-galerie img{
  width:100%;
  display:block;
  border-radius:var(--radius);
  object-fit:cover;
  background:var(--color-cream-alt);
}
.ort-galerie-gross{height:430px;}
.ort-galerie-reihe{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.ort-galerie-reihe img{height:250px;}

@media (max-width:800px){
  .ort-galerie-gross{height:280px;}
  .ort-galerie-reihe{grid-template-columns:1fr 1fr;}
  .ort-galerie-reihe img{height:190px;}
}
@media (max-width:520px){
  .ort-galerie-reihe{grid-template-columns:1fr;}
  .ort-galerie-reihe img{height:220px;}
}

/* Echte Fotos in der Wohnungs-Galerie */
img.gallery-main,
img.gallery-thumb{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  /* ohne min-height:0 sprengt ein Foto seine Zeile und die
     Bildreihe darunter rutscht in die Galerie hinein */
  min-height:0;
  min-width:0;
}

/* Echte Fotos in den Orte-Karten */
img.orte-img{
  width:100%;
  height:190px;
  object-fit:cover;
  display:block;
}

/* ============================
   Lightbox (Bilder vergrößern)
============================ */
.foto-klickbar{cursor:zoom-in;transition:transform var(--transition), box-shadow var(--transition);}
.foto-klickbar:hover{transform:scale(1.015);box-shadow:0 14px 32px rgba(46,39,33,0.22);}
.foto-klickbar:focus-visible{outline:3px solid var(--color-accent);outline-offset:3px;}

.lightbox{
  position:fixed;
  inset:0;
  z-index:200;
  background:rgba(20,14,9,0.94);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:70px 20px;
}
.lightbox[hidden]{display:none !important;}
.lightbox-inhalt{
  max-width:min(1200px, 92vw);
  max-height:100%;
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}
.lightbox-bild{
  max-width:100%;
  max-height:calc(100vh - 170px);
  width:auto;
  height:auto;
  border-radius:var(--radius);
  box-shadow:0 24px 60px rgba(0,0,0,0.6);
}
.lightbox-text{
  color:rgba(255,255,255,0.85);
  font-size:0.88rem;
  text-align:center;
}
.lightbox-schliessen,
.lightbox-pfeil{
  position:absolute;
  background:rgba(255,255,255,0.12);
  border:none;
  color:var(--color-white);
  cursor:pointer;
  border-radius:50%;
  transition:background var(--transition), transform var(--transition);
}
.lightbox-schliessen{
  top:20px;right:24px;
  width:46px;height:46px;
  font-size:1.9rem;
  line-height:1;
}
.lightbox-pfeil{
  top:50%;
  transform:translateY(-50%);
  width:56px;height:56px;
  font-size:2.4rem;
  line-height:1;
}
.lightbox-zurueck{left:20px;}
.lightbox-weiter{right:20px;}
.lightbox-schliessen:hover,
.lightbox-pfeil:hover{background:var(--color-accent);}
.lightbox-pfeil:hover{transform:translateY(-50%) scale(1.06);}
.lightbox-schliessen:focus-visible,
.lightbox-pfeil:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px;}

@media (max-width:600px){
  .lightbox{padding:60px 10px;}
  .lightbox-pfeil{width:44px;height:44px;font-size:1.8rem;}
  .lightbox-zurueck{left:8px;}
  .lightbox-weiter{right:8px;}
  .lightbox-bild{max-height:calc(100vh - 150px);}
}

/* Echte Fotos in den Wohnungs-Karten */
img.apartment-img{
  width:100%;
  height:170px;
  object-fit:cover;
  display:block;
}

/* ============================================================
   Feinschliff für Smartphones und Tablets
   ============================================================ */

@media (max-width:900px){
  /* Die Suchleiste läuft im normalen Textfluss mit, statt über
     dem Inhalt zu schweben – gestapelt wäre sie sonst so hoch,
     dass sie die Ferienwohnungen darunter verdeckt. */
  .booking-bar-wrap{height:auto;overflow:visible;}
  .booking-bar{
    position:static;
    width:auto;
    max-width:none;
    margin:-46px 24px 0;
    padding:20px 22px;
  }
}

@media (max-width:760px){
  .hero{min-height:520px;padding-top:84px;}
  .hero-text{font-size:1rem;}
  .hero-locations{font-size:0.95rem;}

  .container{padding-left:20px;padding-right:20px;}

  /* Größere Flächen zum Antippen */
  .kal-nav{width:46px;height:46px;}
  .kal-auswahl{padding:12px 14px;}
  .btn{padding:14px 26px;}
  .main-nav a{padding:4px 0;}

  /* Bilder etwas höher, damit sie auf schmalen Karten wirken */
  img.apartment-img{height:200px;}
  img.orte-img{height:200px;}
}

@media (max-width:520px){
  .booking-bar{margin:-34px 16px 0;padding:18px;}
  .intro-bild img{height:240px;}
  h1{font-size:clamp(2rem,8vw,2.6rem);}
  .detail-meta{font-size:0.95rem;}
  .uebersicht-kopf{flex-direction:column;align-items:flex-start;}
  .uebersicht-kopf .btn{width:100%;text-align:center;}
  .uebersicht-block{padding:20px;}
  .bedingungen th{width:auto;}
}

/* Suchleiste auf dem Handy: Anreise und Abreise nebeneinander,
   das spart Höhe. Auf sehr schmalen Geräten bleibt es untereinander. */
@media (min-width:361px) and (max-width:900px){
  .booking-bar{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:20px;
  }
  .booking-field{padding:8px 0;}
  .booking-field:nth-of-type(3),
  .booking-field:nth-of-type(4){grid-column:1 / -1;}
  .booking-submit{grid-column:1 / -1;margin-top:16px;}
  .booking-warnung{grid-column:1 / -1;margin:16px 0 0;}
}


/* ============================
   Sehr schmale Handys (ab ca. 320px)
============================ */
/* Rasterspalten dürfen nicht von ihrem Inhalt aufgedehnt werden */
.detail-grid > *{min-width:0;}

/* Die Preistabelle bekommt im Notfall eine eigene Seitwärts-Rolle,
   statt die ganze Seite breiter zu machen. */
.tabelle-rollbar{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.tabelle-rollbar .preise{min-width:264px;}

/* Lange Wörter und Internetadressen in Impressum und Datenschutz
   umbrechen, damit sie nicht über den Rand hinauslaufen.
   Betrifft auch Überschriften wie "Datenschutzerklärung". */
.legal-page,
.legal-page *{overflow-wrap:anywhere;}
.legal-page{hyphens:auto;}
@media (max-width:380px){
  .legal-page h1{font-size:1.6rem;}
}
.wahl-name{display:inline;}
.wahl-tipp{white-space:normal;}
.wahl-eintrag{white-space:nowrap;}
@media (max-width:760px){
  .wahl-liste{left:0;right:0;min-width:0;}
  .wahl-tipp{left:10px;right:10px;width:auto;}
  .wahl-eintrag{white-space:normal;}
}

/* Auf sehr schmalen Handys die Preistabelle so weit zusammenrücken,
   dass alle drei Spalten ohne Seitwärts-Rollen hineinpassen. */
@media (max-width:400px){
  .preise{font-size:0.8rem;}
  .preise th,.preise td{padding:8px 5px;}
  .preise thead th{font-size:0.74rem;letter-spacing:0;}
  .tabelle-rollbar .preise{min-width:0;width:100%;}
}

/* Das Feld "Ferienwohnung" braucht etwas mehr Platz als die übrigen,
   sonst bricht der längste Eintrag um und macht die Leiste ungleich hoch. */
@media (min-width:901px){
  .booking-bar .booking-field:last-of-type{flex:1.2 1 216px;}
  .wahl-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
}

/* ============================
   Anfrageformular: neue Felder
============================ */
.feld-optional{
  font-weight:400;
  text-transform:none;
  letter-spacing:0;
  color:var(--color-ink-light);
  font-size:0.78rem;
}
.feld-haken{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:0.9rem;
  color:var(--color-ink);
  cursor:pointer;
  padding:9px 0;
}
.feld-haken input{
  width:18px;height:18px;
  accent-color:var(--color-accent-dark);
  cursor:pointer;
  flex:none;
}
/* Fängt Werbeprogramme ab – für Besucher unsichtbar */
.honigtopf{
  position:absolute;
  left:-9999px;
  width:1px;height:1px;
  overflow:hidden;
}
.form-note--gut{
  color:var(--kal-frei);
  font-weight:600;
}
.form-note--fehler{
  color:var(--kal-belegt);
  font-weight:600;
}
.contact-form button[disabled]{
  opacity:0.55;
  cursor:default;
}

/* ============================
   Aktueller Menüpunkt
   Zeigt dem Besucher, wo er gerade ist.
============================ */
.main-nav a.ist-aktiv{
  color:var(--color-accent);
  position:relative;
}
.main-nav a.ist-aktiv::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:-7px;
  height:2px;
  border-radius:2px;
  background:var(--color-accent);
}
/* Der Knopf rechts wird nicht unterstrichen, sondern dunkler */
.main-nav a.nav-cta.ist-aktiv{
  background:var(--color-accent-dark);
  color:var(--color-white) !important;
}
.main-nav a.nav-cta.ist-aktiv::after{display:none;}

/* Hinweis, wenn die gesuchte Gästezahl nicht in die Unterkunft passt */
.kal-gaeste-hinweis{
  margin-top:12px;
  padding:10px 13px;
  border-radius:9px;
  background:rgba(193,80,46,0.08);
  border:1px solid rgba(193,80,46,0.28);
  color:var(--kal-belegt);
  font-size:0.85rem;
  line-height:1.5;
}

/* Legendenpunkt für den gewählten Zeitraum */
.kal-punkt--auswahl{
  background:var(--kal-frei);
  box-shadow:inset 0 0 0 3px var(--kal-auswahl);
}

/* Hinweis auf die Kaution unter der Kostenaufstellung */
.kal-kaution{
  margin-top:12px;
  padding:10px 13px;
  border-radius:9px;
  background:var(--color-cream-alt);
  border:1px solid var(--color-line);
  color:var(--color-ink);
  font-size:0.88rem;
  line-height:1.5;
}

/* ============================
   Nebenkosten-Tabelle auf den Wohnungsseiten
============================ */
.nebenkosten-titel{
  font-family:var(--font-heading);
  font-size:1.05rem;
  font-weight:500;
  color:var(--color-ink);
  margin-top:26px;
  margin-bottom:10px;
}
.preise--neben tbody th{
  font-weight:600;
  color:var(--color-ink);
  white-space:normal;
}
.preise--neben tbody td{white-space:nowrap;}
.preise--neben .preis-wann{
  font-weight:400;
  font-size:0.86rem;
  color:var(--color-ink-light);
  white-space:normal;
  text-align:right;
}
@media (max-width:520px){
  .preise--neben .preis-wann{font-size:0.78rem;}
}

.feld-erklaerung{
  margin-top:6px;
  font-size:0.82rem;
  line-height:1.5;
  color:var(--color-ink-light);
}

/* Kleine Beschriftung neben einem Auswahlfeld im Rechner */
.kal-feld-zusatz{
  font-size:0.84rem;
  color:var(--color-ink-light);
  white-space:nowrap;
}

/* Hinweis auf den Mindestaufenthalt */
.kal-zukurz{
  margin-top:12px;
  padding:11px 14px;
  border-radius:9px;
  background:rgba(193,80,46,0.09);
  border:1px solid rgba(193,80,46,0.32);
  color:var(--kal-belegt);
  font-size:0.88rem;
  line-height:1.55;
}

/* Echte Gästebewertungen auf den Wohnungsseiten.
   Quelle und Zahl stehen immer dabei - Pflicht nach
   § 5b Abs. 3 UWG: Es muss erkennbar sein, woher die
   Bewertungen stammen und wie ihre Echtheit gesichert ist. */
.bewertungen{margin:0 0 10px;}
.bewertung-note{
  font-size:1.05rem;
  margin-bottom:18px;
}
.bewertung-note strong{
  color:var(--color-accent);
  font-family:var(--font-heading);
  font-size:1.35rem;
}
.bewertung{
  background:var(--color-white);
  border:1px solid var(--color-line);
  border-left:3px solid var(--color-accent);
  border-radius:var(--radius);
  padding:20px 24px;
  margin:0 0 14px;
}
.bewertung p{
  color:var(--color-ink);
  font-style:italic;
  margin:0 0 10px;
}
.bewertung cite{
  font-style:normal;
  font-weight:600;
  color:var(--color-accent);
  font-size:0.88rem;
}
.bewertung-quelle{
  font-size:0.86rem;
  color:var(--color-ink-light);
  margin-top:14px;
}