/* =====================================================================
   HEIMATEL.COM – STYLESHEET
   Modern, jung, hochprofessionell: geometrische Displayschrift (Outfit,
   nimmt die Geometrie des Logo-Schriftzugs auf) + Inter für alles
   Funktionale. Heimatel-Gold als einziger Akzent, Anthrazit als Grund.
   Mobile-first, kein Framework, kein Build-Werkzeug.
   ===================================================================== */

/* Die Schriften werden in _layout.html als eigenes <link> geladen.
   Ein @import an dieser Stelle würde sie erst nach dem Parsen dieser
   Datei entdecken und die Textdarstellung um eine Runde verzögern. */

/* ------------------------------ Design-Tokens ----------------------- */
:root {
  /* Farben */
  --bg:          #f8f7f4;   /* sehr helles, leicht warmes Grau */
  --surface:     #ffffff;
  --ink:         #23283a;   /* Anthrazit aus dem Heimatel-Logo */
  --ink-soft:    #414a63;
  --muted:       #6a7085;   /* Nebengrau für Sekundärtext */
  --line:        #e5e3dc;   /* zarte Trennlinien */
  --gold:        #b59a55;   /* Heimatel-Gold = Farbe des Smoobu-Buttons */
  --gold-dark:   #977f42;
  /* Nur für kleinen Goldtext auf hellem Grund: --gold-dark erreicht dort
     bloß 3.9:1, das ist unter der Lesbarkeitsschwelle von 4.5:1. */
  --gold-lesbar: #836d2f;   /* 5.0:1 auf Weiß, 4.7:1 auf --bg */
  --gold-soft:   #f6f1e3;   /* helle Goldfläche für Badges */
  --green:       #3d5a45;   /* Dunkelgrün (von ruhmühle.de übernommen) */
  --green-dark:  #2d4433;
  --green-soft:  #edf1ea;
  --whatsapp:    #1faa53;

  /* Typografie */
  --font-display: "Outfit", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Radien & Schatten – zurückhaltend, nicht verspielt */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(35, 40, 58, .06);
  --shadow-md: 0 8px 30px rgba(35, 40, 58, .09);
  --shadow-lg: 0 16px 50px rgba(35, 40, 58, .16);

  --header-h: 84px;
}

/* ------------------------------ Reset / Basis ------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  /* Kein overflow-x: clip auf html oder body! Es wandert auf das
     Wurzelelement und blockiert dort das programmatische Scrollen —
     Ankersprünge wie #buchen funktionieren dann nicht mehr. Zu breite
     Elemente werden stattdessen einzeln begrenzt (siehe .tablewrap,
     .calendarWidget). */
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
}

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

/* Muss vor allen display-Regeln stehen: eigene Klassen mit display:flex/grid
   wuerden das hidden-Attribut sonst ueberstimmen und Elemente sichtbar lassen,
   die das Skript ausgeblendet hat. */
[hidden] { display: none !important; }

/* Displayschrift: große Größen, enge Laufweite, mittlere Strichstärke */
h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0 0 .4em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 5.6vw, 3.6rem); font-weight: 600; letter-spacing: -.035em; }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); font-weight: 600; }
h3 { font-size: 1.12rem; font-weight: 600; letter-spacing: -.012em; }
h4 { font-family: var(--font-body); font-weight: 700; font-size: 1rem; margin: 0 0 .5em; }
p  { margin: 0 0 1em; text-wrap: pretty; }
.muted { color: var(--muted); }

/* Gesperrte Großbuchstaben-Labels — Zitat des Logo-Schriftzugs */
.eyebrow {
  font-family: var(--font-body);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-dark);
}

a { color: var(--green); text-underline-offset: 3px; }
a:hover { color: var(--green-dark); }

button { font: inherit; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.container { width: min(1180px, 100% - 2.5rem); margin-inline: auto; }

/* ------------------------------ Buttons ------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .82rem 1.6rem;
  border-radius: var(--r-sm);
  border: none;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .97rem;
  letter-spacing: -.005em;
  text-decoration: none;
  transition: background .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.btn-primary { background: var(--gold); color: #fff; }
.btn-primary:hover { background: var(--gold-dark); color: #fff; }
.btn-secondary { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn-secondary:hover { box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: #fff; color: var(--ink); transform: translateY(-1px); }
.btn-block { width: 100%; }

/* ------------------------------ Header ------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 1.2rem; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { height: 46px; width: auto; }
@media (max-width: 900px) { .brand img { height: 38px; } }
@media (max-width: 380px) { .brand img { height: 32px; } }
.site-nav { display: flex; gap: 1.4rem; margin-left: auto; }
.site-nav a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  font-size: .95rem;
  padding: .2rem 0;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--ink); border-bottom-color: var(--gold); }
.header-cta { padding: .58rem 1.2rem; font-size: .92rem; white-space: nowrap; }
.header-cta .cta-kurz { display: none; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--ink);
  padding: .3rem;
  line-height: 0;
}
.nav-toggle svg { width: 26px; height: 26px; }
@media (max-width: 1050px) {
  .site-nav {
    display: none;
    position: absolute;
    top: var(--header-h);
    left: 0; right: 0;
    flex-direction: column;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 1rem 1.5rem 1.4rem;
    gap: .1rem;
    box-shadow: var(--shadow-md);
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding: .65rem 0; border-bottom: 1px solid var(--line); }
  .nav-toggle { display: block; margin-left: .5rem; }

  /* Buchen bleibt immer erreichbar: kompakt im Kopf und zusaetzlich
     gross im aufgeklappten Menue. */
  .header-cta { margin-left: auto; padding: .5rem .95rem; font-size: .88rem; }
  .header-cta .cta-lang { display: none; }
  .header-cta .cta-kurz { display: inline; }

}
/* ------------------------------ Breadcrumb --------------------------- */
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .1rem .15rem;
  font-size: .85rem;
  padding: 1.2rem 0 1rem;
  margin-bottom: .2rem;
  border-bottom: 1px solid var(--line);
}
.breadcrumb a {
  color: var(--muted);
  text-decoration: none;
  padding: .3rem .55rem;
  border-radius: var(--r-sm);
  transition: color .15s ease, background .15s ease;
}
.breadcrumb a:first-child { padding-left: 0; }
.breadcrumb a:hover { color: var(--gold-dark); background: var(--gold-soft); }
/* Trenner als schlanker Winkel statt Textzeichen */
.breadcrumb .sep {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  color: var(--line);
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.breadcrumb [aria-current] {
  color: var(--ink);
  font-weight: 600;
  padding: .3rem .55rem;
}

/* ------------------------------ Startseite: Hero --------------------- */
.hero {
  position: relative;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Verlauf sorgt für lesbaren Text, egal wie hell das Foto an der Stelle ist */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(28,32,46,.92) 0%, rgba(28,32,46,.78) 42%, rgba(28,32,46,.35) 78%, rgba(28,32,46,.25) 100%),
    linear-gradient(to top, rgba(28,32,46,.55), transparent 45%);
}
.hero-inner {
  position: relative;
  z-index: 1;
  padding: clamp(4.5rem, 11vw, 8rem) 0 clamp(3.2rem, 7vw, 4.5rem);
}
.hero h1 { color: #fff; margin: .5rem 0 .7rem; max-width: 16ch; }
.hero .eyebrow { color: #e2d3a4; }
.hero-sub {
  color: #dfe2ea;
  max-width: 52ch;
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  margin-bottom: 2rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
/* Auszeichnungen: drei gleichwertige Spalten, durch feine Linien getrennt */
.hero-trust {
  list-style: none;
  padding: 1.6rem 0 0;
  margin: 2.6rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, .16);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, auto));
  justify-content: start;
  gap: 2.6rem;
}
.hero-trust li {
  display: grid;
  gap: .18rem;
  position: relative;
}
.hero-trust li + li::before {
  content: "";
  position: absolute;
  left: -1.3rem;
  top: .1rem;
  bottom: .1rem;
  width: 1px;
  background: rgba(255, 255, 255, .16);
}
.trust-icon { width: 22px; height: 22px; color: var(--gold); margin-bottom: .28rem; }
.trust-stars { display: flex; gap: 2px; margin-bottom: .34rem; height: 22px; align-items: center; }
.trust-stars svg { width: 13px; height: 13px; color: var(--gold); }
.trust-source {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #9aa2b6;
}
.trust-award {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -.01em;
  color: #fff;
}
@media (max-width: 720px) {
  .hero-trust { grid-template-columns: 1fr; gap: 1.15rem; }
  .hero-trust li + li::before {
    left: 0; right: 0; top: -.6rem;
    bottom: auto; width: auto; height: 1px;
  }
}

/* Vorteilsleiste unter dem Hero */
/* Vorteile: vier Karten, die halb in den Hero ragen — dadurch wirkt der
   Übergang verbunden statt wie ein abgetrennter Balken. */
.benefits-strip { padding: 0 0 1rem; }
.benefits-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 1rem;
  margin-top: -2.6rem;
  position: relative;
  z-index: 2;
}
.benefit {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  padding: 1.3rem 1.35rem 1.4rem;
  display: grid;
  gap: .25rem;
  transition: box-shadow .18s ease, transform .18s ease;
}
.benefit:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.benefit-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--gold-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .5rem;
}
.benefit-icon svg { width: 20px; height: 20px; color: var(--gold-dark); }
.benefit b { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; letter-spacing: -.015em; }
.benefit-text { color: var(--muted); font-size: .89rem; line-height: 1.45; }
@media (max-width: 720px) {
  .benefits-inner { margin-top: -1.6rem; gap: .75rem; }
  .benefit { padding: 1.1rem 1.15rem 1.2rem; }
}

/* ------------------------------ Sektionen ---------------------------- */
.section { padding: 3.4rem 0 1rem; }
.section-head { margin-bottom: 1.6rem; max-width: 60ch; }
.section-head h2 { margin-bottom: .35rem; }
.section-head p { color: var(--muted); margin: 0; }

/* ------------------------------ Karten ------------------------------- */
.card-grid {
  display: grid;
  /* Schmalere Kacheln: bei 29 Wohnungen in der Rosenalm zählt die Übersicht
     mehr als die Bildgröße — so passen vier statt drei in eine Reihe. */
  grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
  gap: 1.2rem;
  padding-bottom: 1rem;
}

/* Häuser und Standorte sind wenige, große Entscheidungen — die bekommen
   weiterhin breite Kacheln, sonst steht ein einzelnes Haus verloren
   in einer leeren Reihe (Argenbühl und Oberreute haben nur eines). */
.card-grid-gross {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}
.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: #d8d4c8; color: var(--ink); }
/* Bildkasten mit festem Seitenverhältnis: Bild absolut gesetzt, damit die
   Eigengröße des Fotos die Kachelhöhe nie beeinflusst (auch bei Ladefehlern) */
.card-media {
  position: relative;
  aspect-ratio: 3 / 2;
  background: var(--green-soft);
  overflow: hidden;
}
.card-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card-body { padding: 1rem 1.15rem 1.2rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.card-body h3 { margin: 0; }
.card-sub { color: var(--muted); font-size: .91rem; margin: 0; }
.card-sub:empty { display: none; }

/* Gleiche Zeilen in allen Kacheln einer Reihe.
   Ohne das beginnt der Block unter einem einzeiligen Untertitel
   ("Stadt der Türme und Tore") höher als unter einem zweizeiligen —
   die Reihe wirkt unruhig. Mit subgrid teilen sich alle Kacheln einer
   Reihe dieselben vier Zeilen: Bild, Titel, Untertitel, Rest.
   Der Zeilenabstand wird auf 0 gesetzt, sonst läge der Kachelabstand
   des Rasters auch zwischen den Zeilen INNERHALB einer Kachel. */
@supports (grid-template-rows: subgrid) {
  .card-grid > .card {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
  .card-grid > .card > .card-body {
    grid-row: span 3;
    display: grid;
    grid-template-rows: subgrid;
    row-gap: .3rem;
  }
  .card-grid > .card > .card-body > .card-sub:empty { display: block; }
  .card-grid > .card > .card-body > .card-meta { margin-top: 0; align-self: start; }
}
/* Standort-Karte: kein Link ums Ganze, damit die Häuser einzeln klickbar sind */
.loc-card { cursor: default; }
.loc-card:hover { transform: none; box-shadow: var(--shadow-sm); }
.loc-card .card-media { display: block; }
.loc-card .card-body h3 a {
  color: var(--ink);
  text-decoration: none;
}
.loc-card .card-body h3 a:hover { color: var(--gold-dark); }

.house-list {
  list-style: none;
  padding: .9rem 0 0;
  margin: .9rem 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: .1rem;
  /* Die Trennlinie liegt durch subgrid in allen Karten einer Reihe auf
     gleicher Höhe. Die Häuser selbst sollen aber oben stehen bleiben und
     sich nicht über die Resthöhe verteilen — Ravensburg hat zwei, Scheidegg
     sechs, sonst klaffen dort Lücken. */
  align-content: start;
}
.house-list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  grid-template-areas: "icon name" ". meta";
  align-items: center;
  gap: 0 .55rem;
  padding: .42rem .5rem .42rem .45rem;
  margin-left: -.45rem;
  border-radius: var(--r-sm);
  transition: background .14s ease;
}
.house-list li:hover { background: var(--gold-soft); }
.house-icon {
  grid-area: icon;
  width: 18px;
  height: 18px;
  color: var(--gold);
}
.house-list a {
  grid-area: name;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: .93rem;
  line-height: 1.3;
}
.house-list li:hover a { color: var(--gold-dark); }
.house-meta {
  grid-area: meta;
  font-size: .8rem;
  color: var(--muted);
  line-height: 1.3;
}
.card-meta {
  margin-top: auto;
  padding-top: .7rem;
  font-size: .85rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: .22rem;
  background: var(--gold-soft);
  color: var(--gold-dark);
  font-size: .76rem;
  font-weight: 600;
  border-radius: 999px;
  padding: .16rem .6rem;
  white-space: nowrap;
}
.badge-dark { background: rgba(23,27,40,.82); color: #fff; backdrop-filter: blur(4px); }
.badge-solid { background: var(--ink); color: #fff; }
.card-media .badge { position: absolute; top: .7rem; left: .7rem; }

/* ------------------------------ Objektseite -------------------------- */
.object-hero { margin-top: .4rem; }
.object-hero img {
  width: 100%;
  height: clamp(230px, 40vw, 460px);
  object-fit: cover;
  border-radius: var(--r-lg);
}

/* ------------------------------ Einheit: Galerie --------------------- */
.unit-gallery { margin-top: .4rem; position: relative; }
.gallery-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 190px 190px;
  gap: 8px;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.gallery-grid a { display: block; height: 100%; overflow: hidden; }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.gallery-grid a:hover img { transform: scale(1.03); }
.gallery-grid a:first-child { grid-row: span 2; }
@media (max-width: 700px) {
  .gallery-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 200px 108px; }
  .gallery-grid a:first-child { grid-column: span 2; grid-row: auto; }
  .gallery-grid a:nth-child(n+4) { display: none; }
}

/* Hausgalerie auf der Objektseite — braucht denselben positionierten
   Bezug wie .unit-gallery, sonst rutscht der Knopf bis in den Footer. */
.haus-galerie { position: relative; }
.haus-kopf { margin-top: .4rem; }

/* Kopfvariante: ein großes Titelbild links, zwei kleine rechts */
.gallery-grid-drei {
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 200px 200px;
}
.gallery-grid-drei a:first-child { grid-row: span 2; }

/* Ein oder zwei Bilder: nebeneinander in voller Höhe, kein 2-Zeilen-Raster */
.gallery-grid-schmal { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); grid-template-rows: 320px; }
.gallery-grid-schmal a:first-child { grid-row: auto; }
@media (max-width: 700px) { .gallery-grid-schmal { grid-template-rows: 220px; } }
@media (max-width: 700px) {
  .gallery-grid-drei { grid-template-columns: 1fr 1fr; grid-template-rows: 200px 108px; }
  .gallery-grid-drei a:first-child { grid-column: span 2; grid-row: auto; }
  /* die beiden kleinen bleiben sichtbar — anders als in der Wohnungsgalerie */
  .gallery-grid-drei a:nth-child(n+4) { display: none; }
}

/* Knopf über der Galerie: die Wohnungen haben im Schnitt 13 Bilder, im
   Raster stehen nur 5. Ohne diesen Weg bleibt der Rest unsichtbar. */
.gallery-all {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .9rem;
  border: 1px solid rgba(35, 40, 58, .18);
  border-radius: 999px;
  background: rgba(255, 255, 255, .95);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: .84rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.gallery-all:hover { background: #fff; border-color: var(--gold); transform: translateY(-1px); }
.gallery-all .btn-icon { width: 17px; height: 17px; color: var(--gold-dark); }

/* ------------------------- Bildergalerie: Vollansicht ---------------- */
body.lb-offen { overflow: hidden; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(18, 20, 28, .95);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.lb-leiste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem 1rem;
  color: #e8e6e1;
}
.lb-zaehler { font-size: .85rem; font-variant-numeric: tabular-nums; letter-spacing: .02em; }

.lb-schliessen, .lb-nav {
  appearance: none;
  border: 0;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease;
}
.lb-schliessen { width: 2.2rem; height: 2.2rem; }
.lb-schliessen .lb-zeichen { font-size: 1.5rem; line-height: 1; margin-top: -3px; }
.lb-schliessen:hover, .lb-nav:hover { background: rgba(255, 255, 255, .22); }

.lb-buehne {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 0 1rem;
}
.lb-bild {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--r-sm);
}
.lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.8rem;
  height: 2.8rem;
}
.lb-nav .lb-zeichen { font-size: 1.7rem; line-height: 1; margin-top: -3px; }
.lb-zurueck { left: .6rem; }
.lb-vor { right: .6rem; }

.lb-streifen {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: .7rem 1rem 1rem;
  scrollbar-width: thin;
}
.lb-mini {
  appearance: none;
  border: 0;
  padding: 0;
  background: none;
  flex: 0 0 auto;
  width: 74px;
  height: 50px;
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
  opacity: .45;
  outline: 2px solid transparent;
  outline-offset: 1px;
  transition: opacity .15s ease, outline-color .15s ease;
}
.lb-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb-mini:hover { opacity: .8; }
.lb-mini.ist-aktiv { opacity: 1; outline-color: var(--gold); }

@media (max-width: 700px) {
  .lb-mini { width: 56px; height: 40px; }
  .lb-nav { width: 2.4rem; height: 2.4rem; }
  .lb-buehne { padding: 0 .4rem; }
  /* Auf dem schmalen Raster wuerde der breite Knopf die kleinen
     Kacheln fast zudecken */
  .gallery-all { right: 10px; bottom: 10px; padding: .42rem .7rem; font-size: .78rem; gap: .35rem; }
  .gallery-all .btn-icon { width: 15px; height: 15px; }
}

/* ------------------------------ Einheit: Kopf ------------------------ */
.unit-head {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.6rem 0 .5rem;
}
.unit-head h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.unit-facts { color: var(--muted); margin: .25rem 0 0; }
.unit-head-cta { display: grid; gap: .5rem; justify-items: end; }
.unit-head-trust { font-size: .82rem; color: var(--muted); }

/* ------------------------------ Einheit: Spalten --------------------- */
.unit-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 3rem;
  align-items: start;
  padding-top: 1rem;
}
@media (max-width: 1050px) { .unit-columns { grid-template-columns: 1fr; gap: 0; } }
.unit-section { padding: 1.6rem 0; border-top: 1px solid var(--line); }
.unit-section:first-child { border-top: none; padding-top: .6rem; }
.unit-section h2 { font-size: 1.4rem; }

/* ------------------------------ Ausstattung -------------------------- */
/* Spalten statt Raster: die Gruppen sind unterschiedlich lang (Küche hat
   neun Einträge, "Für Familien" einen). Im Raster zwang die längste Gruppe
   ihrer ganzen Zeile die Höhe auf und daneben klaffte Leerraum. Als
   Textspalten rücken sie lückenlos nach. */
.amenity-groups {
  columns: 250px 3;
  column-gap: 2.5rem;
}
.amenity-group {
  break-inside: avoid;
  margin: 0 0 1.5rem;
}
.amenity-group h3 {
  font-family: var(--font-body);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .7rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--line);
  /* In Spalten setzt der Browser sonst einen Abstand über die erste
     Überschrift einer Folgespalte — die Spaltenköpfe stünden dann
     unterschiedlich hoch. */
  margin-top: 0;
}
.amenity-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.amenity-list li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .94rem;
  line-height: 1.4;
}
.amenity-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  color: var(--gold);
  margin-top: .06rem;
}
/* "Im Haus für alle Gäste": eine Kachel je Angabe. Der Zusatz aus der
   Klammer — Wassertemperatur, Öffnungszeiten — steht als zweite Zeile
   direkt an der Kachel. Früher stand er als graue Liste darunter und
   wiederholte damit alles ein zweites Mal. */
.haus-merkmale {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: .8rem;
}
.haus-merkmale li {
  display: grid;
  grid-template-columns: 22px 1fr;
  grid-template-areas: "icon name" ".    detail";
  align-items: start;
  gap: .15rem .7rem;
  padding: .8rem .95rem .85rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.haus-icon { grid-area: icon; width: 20px; height: 20px; color: var(--gold); margin-top: .05rem; }
.haus-name { grid-area: name; font-weight: 600; font-size: .95rem; line-height: 1.35; }
.haus-detail { grid-area: detail; font-size: .84rem; line-height: 1.4; color: var(--muted); }

/* ------------------------------ Buchungskarte ------------------------ */
.booking-card {
  position: sticky;
  top: calc(var(--header-h) + 16px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  padding: 1.4rem 1.5rem;
}
.booking-card-title { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; letter-spacing: -.015em; margin-bottom: .9rem; }
.benefits { list-style: none; padding: 0; margin: 0 0 1.2rem; display: grid; gap: .5rem; font-size: .91rem; }
.benefits li { padding-left: 1.55rem; position: relative; color: var(--ink-soft); }
.benefits li::before {
  content: "";
  position: absolute;
  left: 0; top: .42em;
  width: 9px; height: 5px;
  border-left: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
}
.booking-card-alt { display: block; text-align: center; margin-top: .85rem; font-size: .88rem; }
@media (max-width: 1050px) {
  .booking-card {
    position: fixed;
    left: 0; right: 0; bottom: 0; top: auto;
    z-index: 40;
    border-radius: 0;
    border: none;
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 24px rgba(35, 40, 58, .12);
    padding: .7rem 1.25rem calc(.7rem + env(safe-area-inset-bottom));
  }
  .booking-card-title, .benefits, .booking-card-alt { display: none; }
  body { padding-bottom: 78px; }
}

/* ------------------------------ Kalender (Seitenspalte) -------------- */
.booking-column { display: grid; gap: 1.2rem; }
@media (min-width: 941px) {
  .booking-column { position: sticky; top: calc(var(--header-h) + 16px); }
  .booking-card { position: static; }
}
.calendar-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.2rem 1.3rem 1rem;
}
.calendar-card-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -.015em;
  margin: 0 0 .8rem;
}
/* In der Seitenspalte steht derselbe Kalender wie auf den Karten, nur
   ohne eigenen Rahmen (den liefert schon .calendar-card) und mit etwas
   groesseren Feldern, weil hier mehr Platz ist. */
.calendar-card .card-cal {
  margin-top: 0;
  border: 0;
  padding: 0;
  background: none;
}
.calendar-card .card-cal:hover { background: none; }
.calendar-card .cal-tag { max-height: 38px; font-size: .72rem; border-radius: 4px; }
.calendar-card .cal-monat { font-size: .95rem; }
.calendar-card .cal-wd { font-size: .66rem; }
.calendar-card .cal-zahl, .calendar-card .cal-cta { font-size: .82rem; }
.calendar-card .cal-nav { width: 1.9rem; height: 1.9rem; }
.calendar-card .cal-kopf { grid-template-columns: 1.9rem 1fr 1.9rem; margin-bottom: .5rem; }
@media (max-width: 940px) {
  .booking-column { display: contents; }
  .calendar-card { margin-top: 1.4rem; }
}

/* ------------------------------ Smoobu-Embeds ------------------------ */
/* Nur so viel Platz reservieren, dass beim Laden nichts springt. Smoobu
   setzt die Hoehe danach selbst — eine hohe min-height liesse sonst einen
   grossen Leerraum stehen, solange nur die Suchleiste angezeigt wird. */
.booking-embed { min-height: 150px; }
.calendar-embed { min-height: 300px; }

/* ------------------------------ Info-Karten (Buchen-Seite) ----------- */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.4rem;
}
.info-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.5rem 1.6rem;
}
.info-card h2 { font-size: 1.15rem; margin-bottom: .7rem; }
.info-card h2 + p { margin-bottom: 1.2rem; }
.info-card p:last-child { margin-bottom: 0; }
.info-card-note { background: var(--gold-soft); border-color: #e8dfc4; }
.info-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; font-size: .95rem; }
.info-list li { padding-left: 1.4rem; position: relative; color: var(--ink-soft); }
.info-list li::before {
  content: "";
  position: absolute;
  left: .15rem; top: .58em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
}
.info-check li::before {
  content: "";
  left: 0; top: .42em;
  width: 9px; height: 5px;
  border-radius: 0;
  background: none;
  border-left: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
}
/* Ausnahme in einer Haken-Liste: graues Kreuz statt Haken. Bewusst zurück-
   haltend gesetzt — es ist eine Fußnote zur Regel, kein Warnhinweis. */
.info-list li.info-aus {
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.5;
  margin-top: .35rem;
  padding-top: .7rem;
  border-top: 1px solid var(--line);
}
.info-list li.info-aus b { font-weight: 600; color: var(--muted); }
.info-list li.info-aus a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.info-list li.info-aus a:hover { color: var(--ink-soft); }
.info-check li.info-aus::before {
  top: 1.12em;
  width: 10px; height: 10px;
  border: none;
  transform: none;
  background:
    linear-gradient(to bottom right, transparent 43%, #9a9a9a 43%, #9a9a9a 57%, transparent 57%),
    linear-gradient(to bottom left,  transparent 43%, #9a9a9a 43%, #9a9a9a 57%, transparent 57%);
}
.info-fussnote {
  font-size: .82rem;
  line-height: 1.5;
  color: var(--muted);
  margin-top: 1rem;
}

/* Aufenthaltsdauer-Rabatt: Stufen als kleine Kacheln in der normalen
   Info-Karte. Bei 140px Mindestbreite ergeben sich darin zwei Spalten —
   drei Zeilen zu zweit, das passt zur Höhe der Nachbarkarten. */
.rabatt-stufen {
  list-style: none;
  padding: 0;
  margin: 1.1rem 0 0;
  display: grid;
  gap: .6rem;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.rabatt-stufen li {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: .7rem .9rem;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.rabatt-stufen li span { color: var(--muted); font-size: .82rem; }
.rabatt-stufen li strong { color: var(--green-dark); font-size: 1.05rem; }
/* Die erste Stufe ist kein Rabatt, sondern der Ausgangspreis — sie darf
   nicht wie ein Vorteil aussehen. */
.rabatt-stufen li:first-child strong { color: var(--muted); font-weight: 600; font-size: .95rem; }

/* Treffer-Karte mit eigenem Buchen-Button */
.unit-card .card-body { gap: .18rem; }
.unit-card h3 { margin: 0; }
.unit-card h3 a { color: var(--ink); text-decoration: none; }
.unit-card h3 a:hover { color: var(--gold-dark); }
.card-cta { margin-top: .85rem; padding: .6rem 1rem; font-size: .88rem; }

/* ------------------- Belegungsplan auf der Wohnungskarte -------------
   Zeigt den laufenden Monat direkt im Suchergebnis: Gäste sehen sofort,
   ob sich das Weiterklicken lohnt. Das Raster führt zum Buchen, die
   Pfeile im Kopf blättern durch die Monate.
   Farblogik: GOLD = buchbar, GRAU = belegt. Gold ist die Farbe, die auf
   der ganzen Seite "hier geht es weiter" bedeutet — deshalb steht sie
   fuer die freien Naechte. */
.card-cal {
  display: block;
  margin-top: .8rem;
  padding: .45rem .65rem .5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, background .15s ease;
}
.card-cal:hover { border-color: var(--gold); background: #fffdf8; }

/* Kopfzeile mit Monatsnavigation: Pfeil – Monat – Pfeil */
.cal-kopf {
  display: grid;
  grid-template-columns: 1.6rem 1fr 1.6rem;
  align-items: center;
  gap: .2rem;
  margin-bottom: .35rem;
}
.cal-monat {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .82rem;
  color: var(--ink);
  text-align: center;
  white-space: nowrap;
}
.cal-nav {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.cal-nav-zeichen { font-size: 1.05rem; line-height: 1; margin-top: -2px; }
.cal-nav:hover { background: var(--gold-soft); color: var(--gold-dark); }
.cal-nav:disabled { opacity: .25; cursor: default; background: none; color: var(--muted); }

/* Alles unterhalb des Kopfes ist der Link zur Wohnung */
.cal-link { display: block; text-decoration: none; color: inherit; }

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.cal-wd {
  font-size: .58rem;
  color: var(--muted);
  text-align: center;
  padding-bottom: .15rem;
  letter-spacing: .02em;
}
.cal-tag {
  /* Quadratisch, aber gedeckelt: auf dem Smartphone ist die Karte so breit,
     dass ein echtes Quadrat den halben Bildschirm füllen würde. */
  aspect-ratio: 1;
  max-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  font-size: .63rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
/* Textfarben sind auf mindestens 4.5:1 zum jeweiligen Feld gerechnet —
   bei 10px Schrift ist das keine Formsache, sondern Lesbarkeit. */
.cal-leer { background: none; }
.cal-frei { background: #f5e7c4; color: #7a6428; }          /* 4.65:1 */
/* Belegt: dunkler, entsättigt und durchgestrichen — dreifach abgesetzt,
   damit es nie mit "frei" verwechselt werden kann. */
.cal-belegt {
  /* Helleres Grau, damit sich der Kalender ruhiger in die Seite fügt.
     Unterscheidbar bleibt es über den Farbton (warmgrau statt gold) und
     den Durchstrich — nicht über die Helligkeit allein. */
  background: #ddd9d0;
  color: #4d4a43;                                            /* 5.9:1 */
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(50, 47, 40, .5);
}
/* Wechseltage, geteilt entlang der Diagonalen — Richtung exakt wie in
   Smoobus eigenem Widget (singleCalendarWidget.css, "to right bottom"):
   ANREISE = Vormittag frei, ab Mittag belegt → Gold oben links, Nacht belegt.
   ABREISE = Vormittag belegt, ab Mittag frei → Grau oben links, Nacht frei. */
.cal-anreise { background: linear-gradient(135deg, #f5e7c4 0 50%, #ddd9d0 50% 100%); color: #4d4a43; }
.cal-abreise { background: linear-gradient(135deg, #ddd9d0 0 50%, #f5e7c4 50% 100%); color: #7a6428; }

/* Vergangene Tage treten zurück, bleiben aber lesbar (vorher 1.5:1) */
.cal-vorbei { background: #f4f3f0; color: #8b8880; }
/* Heute anthrazit umrandet, nicht gold — gold ist hier schon vergeben */
.cal-heute { box-shadow: inset 0 0 0 1.5px var(--ink-soft); font-weight: 700; }
.cal-laedt { background: var(--line); color: transparent; animation: calPuls 1.1s ease-in-out infinite; }
@keyframes calPuls { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* Fußzeile: Anzahl freier Nächte links, Handlungsaufforderung rechts */
.cal-fuss {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .4rem;
  margin-top: .45rem;
  padding-top: .4rem;
  border-top: 1px solid var(--line);
}
.cal-zahl {
  font-size: .72rem;
  font-weight: 600;
  color: var(--gold-lesbar);
  white-space: nowrap;
}
.cal-zahl-voll { color: var(--muted); font-weight: 500; }
.cal-cta {
  font-size: .76rem;
  font-weight: 600;
  color: var(--gold-lesbar);
  white-space: nowrap;
}
.cal-cta::after { content: " →"; }
.card-cal:hover .cal-cta { color: var(--gold); }

/* Karte ohne Kalenderdaten: gleiche Form, nur ohne Raster */
.card-cal-ohne .cal-monat { text-align: left; }
.card-cal-ohne .cal-kopf { display: block; }
.card-cal-ohne .cal-fuss { justify-content: center; }
.cal-hinweis {
  display: block;
  font-size: .76rem;
  line-height: 1.4;
  color: var(--muted);
  padding: .1rem 0 .3rem;
}

@media (prefers-reduced-motion: reduce) {
  .cal-laedt { animation: none; }
}

/* Kompakte Kacheln fuer die Filter-Treffer auf der Startseite */
.card-grid-compact { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1.1rem; }
.card-grid-compact .card-media { aspect-ratio: 4 / 3; }
.card-grid-compact .card-body { padding: .75rem .9rem .9rem; gap: .2rem; }
.card-grid-compact .card-body h3 { font-size: .98rem; }
.card-grid-compact .card-sub { font-size: .84rem; }
.card-grid-compact .card-meta { font-size: .8rem; padding-top: .45rem; }
.card-grid-compact .badge { font-size: .7rem; padding: .12rem .5rem; }

/* ------------------------------ Footer ------------------------------- */
/* Kompakter Fuß: eine Zeile Marke + eine Zeile Links, statt vier Spalten,
   von denen drei fast leer waren. */
/* -------------------- Region: was es hier zu tun gibt ---------------- */
.region-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1.2rem;
}
.region-karte {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.region-karte .card-media { aspect-ratio: 4 / 3; }
.region-karte .card-body { padding: .9rem 1rem 1.1rem; }
.region-karte h3 { font-size: 1rem; margin: 0 0 .3rem; }
.region-karte p { margin: 0; font-size: .87rem; line-height: 1.45; color: var(--muted); }

/* Gleiche Zeilen wie bei den Kacheln: "Wandern auf den Höhenwegen" ist
   zweizeilig, die Nachbarn sind einzeilig — ohne subgrid begänne der
   Beschreibungstext daneben höher. */
@supports (grid-template-rows: subgrid) {
  .region-grid > .region-karte {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
  .region-grid > .region-karte > .card-body {
    grid-row: span 2;
    display: grid;
    grid-template-rows: subgrid;
    row-gap: .3rem;
  }
  .region-grid > .region-karte h3 { margin-bottom: 0; }
}

/* ------------------------- Digitale Gästemappe ----------------------- */
.gaestemappe { }
.gm-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 168px;
  gap: 1.8rem;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.5rem 1.8rem;
}
.gm-text h2 { margin-bottom: .5rem; }
.gm-text p { color: var(--muted); margin-bottom: 1.1rem; }
.gm-knopf { font-size: .9rem; padding: .68rem 1.2rem; }

/* Angedeutetes Handy — bewusst flach gezeichnet, kein Foto: es soll den
   Inhalt zeigen, nicht mit der Wohnungsgalerie um Aufmerksamkeit ringen. */
/* Die ganze Vorschau ist ein Link auf die echte Gästemappe */
.gm-vorschau { display: block; text-decoration: none; color: inherit; }
.gm-vorschau:hover .gm-geraet { border-color: var(--gold); box-shadow: var(--shadow-md); }

.gm-geraet {
  display: block;
  position: relative;
  border: 1.5px solid var(--line);
  border-radius: 17px;
  background: var(--bg);
  padding: .8rem .5rem .6rem;
  box-shadow: var(--shadow-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.gm-schirm { display: block; }
.gm-kerbe {
  position: absolute;
  top: .5rem; left: 50%;
  transform: translateX(-50%);
  width: 34px; height: 4px;
  border-radius: 2px;
  background: var(--line);
}
.gm-titel {
  display: block;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .82rem;
  color: var(--ink);
  padding: .25rem 0 .6rem;
}
.gm-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .22rem; }
.gm-liste li {
  display: flex;
  align-items: center;
  gap: .35rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: .26rem .35rem;
}
.gm-liste svg { width: 12px; height: 12px; flex: 0 0 12px; color: var(--gold-dark); }
.gm-liste span { font-size: .5rem; line-height: 1.2; color: var(--muted); min-width: 0; }
.gm-liste b { display: block; font-size: .56rem; font-weight: 600; color: var(--ink); }

@media (max-width: 720px) {
  .gm-inner { grid-template-columns: 1fr; gap: 1.3rem; padding: 1.3rem 1.2rem; }
  .gm-vorschau { max-width: 200px; margin-inline: auto; }
}

/* -------------------- Hinweis aufs Haus (Wohnungsseite) -------------- */
.haus-teaser {
  display: flex;
  align-items: center;
  gap: .8rem;
  max-width: 330px;
  padding: .5rem .8rem .5rem .5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.haus-teaser:hover { border-color: var(--gold); box-shadow: var(--shadow-sm); color: inherit; }
.haus-teaser img {
  width: 62px;
  height: 48px;
  flex: 0 0 62px;
  object-fit: cover;
  border-radius: 5px;
}
.haus-teaser-text { display: block; min-width: 0; text-align: left; }
.haus-teaser-text b {
  display: block;
  font-family: var(--font-display);
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
}
.haus-teaser-text em {
  display: block;
  font-style: normal;
  font-size: .78rem;
  line-height: 1.3;
  color: var(--muted);
}
.haus-teaser-pfeil {
  width: 18px; height: 18px;
  flex: 0 0 18px;
  fill: none;
  stroke: var(--gold-dark);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 700px) { .haus-teaser { max-width: none; } }

/* ------------------------------ Fehlerseite 404 ---------------------- */
.fehlerseite { padding-top: 2rem; }
.fehler-wege { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 2.4rem; }
.fehler-orte { max-width: 460px; }
.fehler-orte .house-list { border-top: 1px solid var(--line); }

/* Sprunglink: für Tastatur- und Screenreader-Nutzung. Liegt versteckt
   über allem und wird erst beim Fokussieren sichtbar — sonst müsste man
   sich vor jedem Inhalt durch die ganze Navigation tabben. */
.sprunglink {
  /* fixed statt absolute: so erscheint der Link auch dann im Blickfeld,
     wenn die Seite bereits gescrollt ist */
  position: fixed;
  left: .5rem;
  top: -4rem;
  z-index: 300;
  padding: .6rem 1rem;
  border-radius: var(--r-sm);
  background: var(--ink);
  color: #fff;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  transition: top .15s ease;
}
.sprunglink:focus { top: .5rem; color: #fff; }
#inhalt:focus { outline: none; }

/* Der Fuß hatte drei Blöcke in einer engen Zeile — das wirkte gequetscht.
   Jetzt bekommt er Luft: eigene Zeile für Marke und Soziales, darunter die
   Links, dann die Schlusszeile. */
.site-footer { margin-top: 4rem; background: var(--ink); color: #b9bdca; }
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.8rem 3rem;
  padding: 3rem 0 2.4rem;
}
.footer-brand { display: flex; align-items: center; gap: 1.3rem; flex-wrap: wrap; }
.footer-logo { height: 42px; width: auto; }
.footer-brand p { margin: 0; font-size: .9rem; line-height: 1.5; color: #9299a8; }
.footer-links { display: flex; flex-wrap: wrap; gap: .6rem 1.8rem; }
.footer-links a {
  color: #cfd3dc;
  text-decoration: none;
  font-size: .93rem;
  padding: .25rem 0;
}
.footer-links a:hover { color: var(--gold); }
.footer-social { display: flex; gap: .7rem; }
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .18);
  color: #cfd3dc;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.footer-social a:hover { background: var(--gold); border-color: var(--gold); color: #fff; }
.footer-social svg { width: 18px; height: 18px; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: 1.3rem 0 1.7rem;
  font-size: .84rem;
  color: #8b92a1;            /* 4.7:1 auf dem Anthrazit, vorher 3.9:1 */
}
.footer-orte { letter-spacing: .04em; }
@media (max-width: 720px) {
  .footer-inner { flex-direction: column; align-items: flex-start; padding: 2.4rem 0 1.8rem; gap: 1.5rem; }
  .footer-links { gap: .5rem 1.4rem; }
}

/* ------------------------------ Filter (Startseite) ------------------ */
/* Zwei ruhige Blöcke untereinander: oben die drei Auswahlfelder in
   gleich breiten Dritteln, darunter je Gruppe EINE Reihe Kästchen.
   Vorher erzeugte auto-fit je nach Fensterbreite vier bis fünf Spuren —
   die drei Felder standen dann links und rechts blieb Leerraum. */
.filterbar {
  display: grid;
  gap: 1.2rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.3rem 1.5rem;
  box-shadow: var(--shadow-sm);
}
.filter-felder {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem 1.4rem;
  align-items: end;
}
@media (max-width: 720px) {
  .filter-felder { grid-template-columns: 1fr; }
}
.filter-field { display: grid; gap: .35rem; min-width: 0; }
.filter-field label {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.filter-field select {
  font: inherit;
  font-size: .95rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: .62rem .8rem;
  width: 100%;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a7085' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .6rem center;
  background-size: 16px;
  padding-right: 2rem;
}
.filter-field select:hover { border-color: #d3cec1; }

/* Ausstattung in drei benannte Gruppen aufgeteilt — das ist deutlich
   uebersichtlicher als eine lange Reihe gleichrangiger Schalter. */
/* Drei Spalten in derselben Aufteilung wie die Auswahlfelder darüber —
   jede Gruppe steht damit genau unter ihrem Dropdown. */
.filter-groups {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}
@media (max-width: 720px) {
  .filter-groups { grid-template-columns: 1fr; }
}
.filter-toggles {
  border: none;
  margin: 0;
  padding: 0;
}
.filter-optionen {
  display: grid;
  gap: .1rem;
  align-content: start;
  margin-left: -.55rem;
}
.filter-toggles legend {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0;
  margin-bottom: .35rem;
  float: left;
  width: 100%;
}
.toggle {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  border: 1px solid transparent;
  background: none;
  border-radius: var(--r-sm);
  padding: .42rem .55rem;
  font-size: .93rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
  user-select: none;
}
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
/* Kaestchen links */
.toggle::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border: 1.5px solid #cfcabc;
  border-radius: 5px;
  background: var(--surface);
  transition: background .14s ease, border-color .14s ease;
}
.toggle-icon { width: 18px; height: 18px; color: var(--gold); flex: 0 0 18px; }
.toggle:hover { background: var(--bg); }
.toggle:has(input:checked) { color: var(--ink); font-weight: 600; }
.toggle:has(input:checked)::before {
  background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5 5 11-11'/%3E%3C/svg%3E") center / 12px no-repeat;
  border-color: var(--gold);
}
.toggle:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }

.filter-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.4rem 0 1rem;
}
.filter-status p { margin: 0; font-weight: 600; }
.filter-reset {
  background: none;
  border: none;
  color: var(--green);
  font-size: .92rem;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: .2rem;
}
.filter-empty {
  background: var(--gold-soft);
  border-radius: var(--r-md);
  padding: 1.6rem 1.8rem;
  color: var(--ink-soft);
  margin: 0;
}
/* Angedeutete naechste Reihe: oben scharf, nach unten in den Seitenhintergrund
   auslaufend. Rein dekorativ — nicht anklickbar. */
.filter-peek {
  margin-top: 1.1rem;
  max-height: 132px;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.55) 55%, transparent 97%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.55) 55%, transparent 97%);
}

.filter-more {
  display: flex;
  justify-content: center;
  padding: .3rem 0 .6rem;
  margin-top: -.4rem;
  position: relative;
  z-index: 1;
}
/* Der Button darf zurueckhaltend bleiben — die angedeutete Reihe darueber
   zeigt bereits, dass es weitergeht. Nur der weisse Grund hebt ihn ab. */
.filter-more .btn { background: var(--surface); box-shadow: var(--shadow-sm); }
.filter-more .btn:hover { background: var(--surface); box-shadow: var(--shadow-md); }
.more-chevron {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .16s ease;
}
.filter-more .btn:hover .more-chevron { transform: translateY(2px); }
@media (prefers-reduced-motion: reduce) { .more-chevron { transition: none; } }
.filter-pricenote {
  margin: 1.2rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-size: .9rem;
  color: var(--muted);
  max-width: 72ch;
}
.filter-pricenote a { white-space: nowrap; font-weight: 600; }

/* ------------------------------ Textseiten --------------------------- */
/* Impressum, AGB, Datenschutz, Jobs — lange Fliesstexte, schmale Spalte */
.textseite { max-width: 74ch; }
.textseite h1 { margin-bottom: 1.2rem; }
.textseite h2 {
  font-size: 1.28rem;
  margin: 2.2rem 0 .7rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.textseite h1 + h2 { border-top: none; padding-top: 0; margin-top: 1rem; }
.textseite h3 { font-size: 1.03rem; margin: 1.6rem 0 .5rem; }
.textseite p { color: var(--ink-soft); margin-bottom: .85rem; }
/* Mehrzeilige Angaben wie Anschriften: eng gesetzt und leicht abgehoben */
.textseite .datenblock {
  line-height: 1.55;
  background: var(--surface);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: .85rem 1.1rem;
  margin-bottom: 1rem;
}
.textseite .text-list { padding-left: 1.2rem; margin: 0 0 1rem; display: grid; gap: .35rem; }
.textseite .text-list li { color: var(--ink-soft); }
.textseite .text-list li::marker { color: var(--gold); }
.textseite a { word-break: break-word; }

/* ---- Jobs -----------------------------------------------------------
   Die Übersicht zeigt je Stelle nur eine knappe Kachel; alles Weitere
   steht auf einer eigenen Seite je Stelle. Das ist auch die Vorgabe für
   Googles Stellensuche: die strukturierten Daten gehören auf die Seite
   EINER Stelle, nicht auf eine Liste. */
.jobs-seite { max-width: 1000px; }
.job-liste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
  margin: 1.8rem 0 2.2rem;
}
@media (max-width: 820px) {
  .job-liste { grid-template-columns: 1fr; }
}
.job-karte {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.5rem 1.6rem 1.4rem;
  transition: box-shadow .18s ease, border-color .18s ease;
}
.job-karte:hover { box-shadow: var(--shadow-md); border-color: #d8d4c8; }
.job-karte h2 {
  border-top: none;
  padding-top: 0;
  margin: 0 0 .8rem;
  font-size: 1.16rem;
  color: var(--ink);
}
.job-karte h2 a { color: inherit; text-decoration: none; }
.job-karte h2 a:hover { color: var(--gold-dark); }
.job-karte > p { font-size: .93rem; margin: 0 0 1.1rem; }

.job-eckdaten {
  list-style: none;
  padding: 0;
  margin: 0 0 .9rem;
  display: grid;
  gap: .32rem;
}
.job-eckdaten li {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .86rem;
  line-height: 1.4;
  color: var(--muted);
}
.job-eckdaten svg { width: 17px; height: 17px; flex: 0 0 17px; color: var(--gold); }

.job-mehr {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  align-self: flex-start;
  color: var(--gold-lesbar);
  font-weight: 600;
  font-size: .93rem;
  text-decoration: none;
}
.job-mehr svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .16s ease;
}
.job-mehr:hover { color: var(--gold-dark); }
.job-mehr:hover svg { transform: translateX(3px); }

/* ---- Jobs: Seite einer einzelnen Stelle ---- */
.job-detail .job-eckdaten { margin: 0 0 1.5rem; }
.job-detail .job-intro { font-size: 1.02rem; margin-bottom: 1.8rem; }
.job-block h2 { font-size: 1.1rem; }
.job-block ul {
  list-style: none;
  padding-left: 0;
  margin: 0 0 1.5rem;
  display: grid;
  gap: .34rem;
}
.job-block li {
  position: relative;
  padding-left: 1.05rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.job-block li::before {
  content: "";
  position: absolute;
  left: .05rem;
  top: .62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
}
.job-bewerben {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.5rem 1.6rem;
  margin-top: 2rem;
}
.job-bewerben p { margin: .9rem 0 0; font-size: .9rem; }
.job-zurueck { margin-top: 1.6rem; }
@media (max-width: 640px) {
  .job-bewerben .btn { display: flex; width: 100%; }
}

/* ------------------------------ Für Eigentümer ----------------------- */
/* Volle Breite auf grauem Grund, direkt ueber dem Footer. Bewusst in der
   Farbwelt von heims.de (Waldgruen) statt im Heimatel-Gold — so ist auf
   den ersten Blick klar: hier wird eine andere Zielgruppe angesprochen. */
:root { --heims: #1e4034; --heims-dark: #152e25; }

.owner-band {
  background: #eceae4;
  border-top: 1px solid #ddd9d0;
  padding: 2.4rem 0;
  margin-top: 3.5rem;
}
/* Mittig gesetzt: die Leiste läuft über die volle Breite, links ausgerichtet
   stand der Text in der linken Hälfte und rechts blieb totes Feld. */
.owner-inner { display: block; text-align: center; }
.owner-text { max-width: 640px; margin: 0 auto; }
.owner-eyebrow { color: var(--heims); }
.owner-band h2 {
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  margin: .35rem 0 .55rem;
  color: var(--heims-dark);
}
.owner-band p { color: #4b5347; font-size: .96rem; margin: 0 auto 1.2rem; max-width: 60ch; }

.owner-contact { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem 1.4rem; }
.owner-contact a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: #5c6459;
  text-decoration: none;
  font-size: .88rem;
}
.owner-contact a:hover { color: var(--heims); }
.owner-contact .btn-icon { color: var(--heims); }

/* Schlanke Schaltflaeche ueber den Kontaktdaten. Auf dem Handy ueber die
   volle Breite, auf grossen Schirmen nur so breit wie noetig. */
.owner-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  background: var(--heims);
  color: #fff;
  text-decoration: none;
  font-size: .95rem;
  border-radius: var(--r-sm);
  padding: .72rem 1.5rem;
  margin-bottom: 1.2rem;
  transition: background .16s ease;
}
.owner-cta strong { font-weight: 700; }
.owner-cta:hover { background: var(--heims-dark); color: #fff; }
.owner-cta-arrow {
  width: 17px; height: 17px;
  flex: 0 0 17px;
  fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .16s ease;
}
.owner-cta:hover .owner-cta-arrow { transform: translateX(3px); }
@media (max-width: 640px) {
  .owner-cta { display: flex; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .owner-cta, .owner-cta-arrow { transition: none; }
}
/* Die Leiste sitzt direkt auf dem Footer */
main:has(.owner-band) + .site-footer { margin-top: 0; }

/* ------------------------------ Team (Kontaktseite) ------------------ */
.team-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 2.4rem;
  align-items: center;
}
@media (max-width: 780px) { .team-block { grid-template-columns: 1fr; gap: 1.5rem; } }
.team-figure { margin: 0; }
.team-figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-md);
}
.team-figure figcaption {
  margin-top: .6rem;
  font-size: .85rem;
  color: var(--muted);
}
/* Solange kein Foto hinterlegt ist, bleibt der Bereich leer statt kaputt */
.team-figure-leer { display: none; }
.team-text h2 { margin-top: .35rem; }
.team-text p { color: var(--ink-soft); max-width: 56ch; }
.team-text p:last-child { margin-bottom: 0; }

/* ------------------------------ Kontakt & FAQ ------------------------ */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}
/* Karten sind Kaesten mit eigenem Button (kein Link ums Ganze).
   Flex-Spalte, damit der Button in allen Karten unten buendig sitzt. */
.contact-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .2rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.3rem 1.4rem;
  color: var(--ink);
}
.contact-card strong { font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; letter-spacing: -.015em; }
.contact-card .muted { font-size: .88rem; }
.contact-hours {
  margin-top: .45rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--green);
}
/* Alle drei Karten tragen einen eigenen Button — deshalb sind es Kaesten,
   keine Links. Der Button sitzt unten buendig, damit die Karten gleich wirken. */
.contact-card .btn { margin-top: 1.2rem; width: 100%; }
.btn-icon { width: 18px; height: 18px; flex: 0 0 18px; }
.btn-whatsapp { background: var(--whatsapp); color: #fff; }
.btn-whatsapp:hover { background: #199447; color: #fff; }

.faq-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
.faq-item { border-bottom: 1px solid var(--line); }

/* Frage-Zeile: klickbar, ohne den Standard-Pfeil des Browsers */
.faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 1.15rem .6rem 1.15rem 0;
  cursor: pointer;
  list-style: none;
  border-radius: var(--r-sm);
  transition: color .14s ease;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:hover { color: var(--gold-dark); }
.faq-item > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.faq-item h3 { margin: 0; font-size: 1.02rem; font-weight: 600; }

.faq-chevron {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .2s ease;
}
.faq-item[open] > summary .faq-chevron { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .faq-chevron { transition: none; }
}

.faq-answer { padding: 0 2.4rem 1.3rem 0; }
.faq-answer p { margin: 0; color: var(--ink-soft); max-width: 78ch; }

/* ------------------------------ WhatsApp-Button ---------------------- */
.whatsapp-fab {
  position: fixed;
  right: 18px; bottom: 18px;
  z-index: 45;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--whatsapp);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  transition: transform .16s ease;
}
.whatsapp-fab:hover { color: #fff; transform: scale(1.07); }
@media (max-width: 1050px) { .whatsapp-fab { bottom: 92px; } }