/* Ferienwohnungen Roessleweg & Vogesenblick — St. Maergen
   Farbwelt: Tannengruen + warmer Holzton als Anker im Traditionellen,
   viel Weissraum und ruhige Typografie als das Moderne. */

:root {
  /* Flaechen */
  --bg: #faf8f4;          /* warmes Papierweiss, kein kaltes Grau */
  --surface: #fff;
  --surface-2: #f3efe7;   /* abgesetzte Baender */

  /* Text */
  --fg: #23282a;
  --muted: #5f6a63;

  /* Akzente */
  --accent: #2f5d4a;      /* Tannengruen, dunkel genug fuer Text auf Weiss */
  --accent-strong: #24483a;
  /* Holz/Messing — sparsam, nur Details. Bewusst dunkler als der reine
     Holzton: die Eyebrow-Zeile ist klein und muss AA erreichen (5.1:1). */
  --wood: #8d6034;

  --line: #e3ddd2;
  --shadow: 0 1px 2px rgb(35 40 42 / 4%), 0 8px 24px -12px rgb(35 40 42 / 18%);

  --max: 68rem;
  --radius: 0.75rem;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15181a;
    --surface: #1d2124;
    --surface-2: #22272a;
    --fg: #e9e6e0;
    --muted: #a3aca6;
    --accent: #7fb79c;         /* aufgehellt — Kontrast auf dunklem Grund */
    --accent-strong: #9ccbb3;
    --wood: #d0a173;
    --line: #313739;
    --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 10px 28px -14px rgb(0 0 0 / 70%);
  }
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 1rem/1.7 var(--sans);
  -webkit-text-size-adjust: 100%;
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 1.5rem; }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; }

a { color: var(--accent); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: #fff;
  padding: 0.7rem 1.2rem;
  z-index: 100;
}
.skip-link:focus { left: 0; }

:where(a, button, summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 0.2rem;
}

/* ---- Kopf ---- */

header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

header > .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 2rem;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}

.site-title {
  font-family: var(--serif);
  /* 1.17rem statt 1.05: so ist die Titelzeile genau so breit wie die
     gesperrte Unterzeile darunter, beide schliessen buendig ab.
     Gemessen, nicht geschaetzt — Wert gilt fuer diesen Text. */
  font-size: 1.17rem;
  font-weight: 600;
  color: var(--fg);
  text-decoration: none;
  line-height: 1.2;
}

.site-title small {
  display: block;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  /* letter-spacing haengt auch hinter dem letzten Buchstaben — der
     negative Rand zieht diesen Nachschlag wieder ab, sonst steht die
     Unterzeile rechts minimal ueber. */
  margin-right: -0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.15rem;
}

nav { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-left: auto; }

/* min-height 44px: Fingerkuppen-Mindestmass. Ohne das sind die Navi-Links
   auf dem Handy nur 34px hoch und werden regelmaessig danebengetippt. */
nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.95rem;
  padding: 0.2rem 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  border-bottom: 2px solid transparent;
}

nav a:hover { color: var(--accent); }
nav a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }

/* ---- Hero ---- */

.hero {
  position: relative;
  min-height: clamp(20rem, 62vh, 34rem);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
}

/* Verlauf nur unten: der Himmel oben bleibt frei, der Text unten liest sich. */
/* Zwei Verlaeufe: unten fuer die Grundlesbarkeit, links fuer den Textblock.
   Der Horizont mit der Bergkette liegt in der Bildmitte und ist das
   eigentliche Motiv — der Text steht deshalb links auf der ruhigen Wiese
   und die Mitte bleibt frei. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgb(12 20 16 / 72%) 0%, rgb(12 20 16 / 45%) 34%, rgb(12 20 16 / 0%) 62%),
    linear-gradient(to top, rgb(12 20 16 / 70%) 0%, rgb(12 20 16 / 25%) 32%, rgb(12 20 16 / 0%) 62%);
}

/* width:100% ist noetig, weil .hero ein Flex-Container ist: ohne das
   schrumpft .hero-inner auf seine Inhaltsbreite, die auto-Margen von .wrap
   greifen nicht mehr und der Block landet in der Bildmitte — genau ueber
   dem Horizont, den er freilassen soll. */
.hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-top: 4rem;
  padding-bottom: 2.75rem;
  color: #fff;
}

/* Kinder auf halbe Breite begrenzt, damit die Bildmitte mit dem Horizont
   frei bleibt. Die linke Fluchtlinie kommt aus .wrap und bleibt dieselbe
   wie beim Text darunter. */
.hero-inner > * { max-width: 32rem; }

/* Schmales Fenster: kein Platz fuer eine freie Bildhaelfte, Text wieder
   ueber die volle Breite und der Verlauf traegt ihn von unten. */
@media (max-width: 47.99rem) {
  .hero-inner { max-width: none; }
  .hero::after {
    background: linear-gradient(to top, rgb(12 20 16 / 82%) 0%, rgb(12 20 16 / 45%) 40%, rgb(12 20 16 / 8%) 72%);
  }

  /* Kopfbereich auf dem Handy: mit den Desktop-Werten braucht er 181px,
     also ein Fuenftel des iPhone-Schirms, bevor Inhalt kommt. Enger
     gesetzt und ohne den Link auf die gerade offene Seite sind es 88px.

     Der Link der aktuellen Seite steht nicht im Markup (siehe build.py):
     er fuehrt auf sich selbst und kostete hier eine ganze zweite Zeile.
     Mit vier statt fuenf Punkten passt die Navi ab 390px in eine Zeile,
     deshalb bleibt die Linkhoehe bei den vollen 44px fuer Fingerkuppen.

     Gemessen (Startseite, breiteste Kombination):
       320px  2 Zeilen, Kopf 140px   iPhone SE
       360px  2 Zeilen, Kopf 140px   Navi braucht 335px, frei sind 312px
       390px  1 Zeile,  Kopf  96px   iPhone 12..16
       768px+ 1 Zeile,  Kopf  75px   unveraendert wie bisher
     Unter 390px fehlen rund 23px. Das liesse sich nur mit deutlich
     kleinerer Schrift erzwingen — dafuer ist der Gewinn zu klein. */
  header > .wrap {
    gap: 0.15rem 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .site-title { font-size: 1.02rem; }

  .site-title small {
    font-size: 0.58rem;
    letter-spacing: 0.11em;
    margin-right: -0.11em;
    margin-top: 0.1rem;
  }

  /* margin-left:auto schiebt die Navi auf dem Desktop nach rechts; beim
     Umbruch erzeugt das nur Leerraum, hier also zurueckgesetzt. */
  nav {
    gap: 0 0.95rem;
    margin-left: 0;
    width: 100%;
  }

  nav a { font-size: 0.85rem; }
}

.hero h1 {
  font-size: clamp(1.9rem, 4.4vw, 2.9rem);
  line-height: 1.12;
  margin: 0 0 0.7rem;
  max-width: 15ch;
  text-wrap: balance;
  text-shadow: 0 2px 12px rgb(0 0 0 / 45%);
}

.hero .claim {
  font-size: clamp(1rem, 2vw, 1.15rem);
  margin: 0 0 1.5rem;
  max-width: 38ch;
  color: #eef1ee;
  text-shadow: 0 1px 8px rgb(0 0 0 / 55%);
}

.hero .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  font-size: 0.9rem;
  color: #dfe5e0;
  margin: 0;
  text-shadow: 0 1px 6px rgb(0 0 0 / 60%);
}

.hero .meta span { display: flex; align-items: center; gap: 0.45rem; }
.hero .meta svg { width: 1.05rem; height: 1.05rem; flex: none; opacity: 0.9; }

/* ---- Text ---- */

main { display: block; }
.section { padding: 4rem 0; }
.section-tint { background: var(--surface-2); }

h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1.2; margin: 0 0 0.5rem; }
h2 { font-size: clamp(1.35rem, 2.6vw, 1.75rem); margin: 0 0 1rem; }
h3 { font-size: 1.05rem; margin: 1.6rem 0 0.4rem; }

.lead { font-size: 1.15rem; color: var(--muted); margin: 0 0 2rem; max-width: 48ch; }
p { max-width: 62ch; }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wood);
  margin: 0 0 0.6rem;
}

/* ---- Merkmale ---- */

.features {
  display: grid;
  gap: 2rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  margin-top: 2.5rem;
}

.feature h3 { margin: 0 0 0.35rem; font-family: var(--sans); font-size: 1rem; }
.feature p { margin: 0; color: var(--muted); font-size: 0.95rem; }

.feature .ico {
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  margin-bottom: 0.9rem;
}
.feature .ico svg { width: 1.25rem; height: 1.25rem; }

/* ---- Wohnungen als Split-Sektionen ---- */

.split {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  align-items: center;
}

.split + .split { margin-top: 4.5rem; }

.split .media {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--surface);
}

.split .media img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.split a.media:hover img { transform: scale(1.03); }

/* Bild rechts statt links — nur ab zwei Spalten sinnvoll. */
@media (min-width: 48rem) {
  .split.reverse .media { order: 2; }
}

.split .body h2 { margin-bottom: 0.6rem; }
.split .body p { color: var(--muted); }

.facts {
  list-style: none;
  padding: 0;
  margin: 1.2rem 0 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.facts li {
  font-size: 0.85rem;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 2rem;
  padding: 0.3rem 0.85rem;
}

/* ---- Buttons ---- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.5rem;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  border-radius: 0.4rem;
  font-weight: 600;
  font-size: 0.95rem;
  transition: background 0.15s, transform 0.15s;
}

.btn:hover { background: var(--accent-strong); transform: translateY(-1px); }

.btn-ghost {
  background: transparent;
  color: var(--accent);
  border: 1px solid currentcolor;
}
.btn-ghost:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

/* ---- Galerie ---- */

.gallery {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  margin: 0 0 3rem;
  padding: 0;
  list-style: none;
}

.gallery button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: 0.4rem;
  overflow: hidden;
}

.gallery img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  transition: transform 0.3s, opacity 0.2s;
}

.gallery button:hover img { transform: scale(1.04); opacity: 0.94; }

/* Bewusst KEIN hervorgehobenes erstes Bild: ein doppelt breites Feld ist
   bei 3:2 auch doppelt hoch und reisst neben seinen 133px hohen Nachbarn
   eine Luecke in die erste Zeile. Gleichmaessiges Raster haelt die Reihen
   buendig. */

/* ---- Lightbox ---- */

dialog.lightbox {
  padding: 0;
  border: 0;
  background: none;
  max-width: 100vw;
  max-height: 100vh;
  width: 100%;
  height: 100%;
}

dialog.lightbox::backdrop { background: rgb(8 10 9 / 96%); }

dialog.lightbox img {
  display: block;
  max-width: 94vw;
  max-height: 88vh;
  margin: auto;
  object-fit: contain;
  border-radius: 0.3rem;
}

dialog.lightbox .lb-inner { height: 100%; display: grid; place-items: center; position: relative; }

dialog.lightbox button {
  position: absolute;
  border: 0;
  background: rgb(255 255 255 / 14%);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  cursor: pointer;
  backdrop-filter: blur(6px);
}

dialog.lightbox button:hover { background: rgb(255 255 255 / 28%); }
.lb-prev { left: 1rem; }
.lb-next { right: 1rem; }
.lb-close { top: 1rem; right: 1rem; font-size: 1.25rem; }

/* ---- Ausstattung ---- */

.rooms {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  margin-top: 1.5rem;
}

.rooms > div {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
}

.rooms h3 {
  margin: 0 0 0.5rem;
  color: var(--accent);
  font-family: var(--sans);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}
.rooms p { margin: 0; font-size: 0.93rem; color: var(--muted); max-width: none; }

/* ---- Buchung ---- */

.booking {
  margin: 3rem 0;
  padding: 2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.booking h2 { margin-top: 0; }
.booking .rating { color: var(--wood); font-weight: 600; }
.booking .hint { font-size: 0.88rem; color: var(--muted); margin: 1rem 0 0; }

/* ---- Kalender ---- */

.cal-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.cal-head h2 { margin: 0; }
.cal-nav { margin-left: auto; display: flex; gap: 0.4rem; }

.cal-nav button {
  width: 2.75rem;   /* 44px — Fingerkuppen-Mindestmass, siehe nav a */
  height: 2.75rem;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--fg);
  border-radius: 0.35rem;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
}

.cal-nav button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.cal-nav button:disabled { opacity: 0.35; cursor: default; }

.legend { display: flex; gap: 1.2rem; font-size: 0.85rem; color: var(--muted); margin-bottom: 1.2rem; }
.legend span { display: flex; align-items: center; gap: 0.4rem; }
.legend i { width: 0.9rem; height: 0.9rem; border-radius: 0.2rem; display: inline-block; }
.legend .free { background: #d9ecdd; box-shadow: inset 0 0 0 1px #a6cdb0; }
.legend .busy { background: #f0dcd8; box-shadow: inset 0 0 0 1px #d9aca2; }

.months { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

.month {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem;
}

.month h3 {
  margin: 0 0 0.6rem;
  font-size: 0.95rem;
  text-align: center;
  font-weight: 600;
  font-family: var(--sans);
}

/* table-layout: fixed — sonst bemisst der Browser jede Spalte nach ihrem
   Inhalt ("1" schmaler als "28", leere Zellen anders), und die Tage sind
   unterschiedlich breit. */
.month table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 2px;
  font-size: 0.85rem;
}

.month th { font-weight: 500; color: var(--muted); padding: 0.2rem 0; font-size: 0.72rem; }
.month td { padding: 0; text-align: center; }

.day {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 0.25rem;
}

.day.free { background: #d9ecdd; color: #2b4f36; box-shadow: inset 0 0 0 1px #a6cdb0; }
.day.full { background: #f0dcd8; color: #7a4038; box-shadow: inset 0 0 0 1px #d9aca2; }
.day.past { opacity: 0.4; }
.day span { position: relative; }

/* Im Dunkelmodus eigene Signalfarben statt eines Helligkeitsfilters: die
   hellen Pastelltoene liegen luminanzmaessig so dicht beieinander, dass
   gleichmaessiges Abdunkeln frei und belegt ununterscheidbar macht —
   besonders in der 14px kleinen Legende. Satt statt pastellig, damit der
   Unterschied auch klein noch traegt. */
@media (prefers-color-scheme: dark) {
  /* Unterschied traegt auch ohne Farbwahrnehmung: frei ist hell (5.8:1
     gegen belegt), belegt tritt dunkel zurueck. */
  .day.free, .legend .free {
    background: #7fb79c;
    color: #12291f;
    box-shadow: inset 0 0 0 1px #9bcdb4;
  }
  .day.full, .legend .busy {
    background: #4a2429;
    color: #e7b8bc;
    box-shadow: inset 0 0 0 1px #6d383e;
  }
}

/* ---- Kontaktband ---- */

.contact-band {
  background: var(--accent);
  color: #fff;
  padding: 3rem 0;
}

.contact-band h2 { margin: 0 0 0.5rem; color: #fff; }
.contact-band p { color: #dbe8e1; margin: 0 0 1.5rem; max-width: 52ch; }

.contact-band .btn {
  background: #fff;
  color: var(--accent-strong);
}
.contact-band .btn:hover { background: #eef4f0; }

.contact-band .btn-ghost {
  background: transparent;
  color: #fff;
  border-color: rgb(255 255 255 / 55%);
}
.contact-band .btn-ghost:hover { background: rgb(255 255 255 / 12%); color: #fff; }

/* Im Dunkelmodus ist --accent hell — dort braucht das Band dunkle Schrift. */
@media (prefers-color-scheme: dark) {
  .contact-band { color: #16241d; }
  .contact-band h2 { color: #16241d; }
  .contact-band p { color: #24382e; }
  .contact-band .btn { background: #16241d; color: #e9f2ec; }
  .contact-band .btn:hover { background: #0f1a15; }
  .contact-band .btn-ghost { background: transparent; color: #16241d; border-color: rgb(22 36 29 / 45%); }
  .contact-band .btn-ghost:hover { background: rgb(22 36 29 / 10%); color: #16241d; }
}

/* ---- Fuss ---- */

footer {
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: 2.5rem 0;
  font-size: 0.9rem;
  color: var(--muted);
}

footer .wrap { display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; align-items: center; }
footer a { color: var(--muted); text-decoration: none; }
footer a:hover { color: var(--accent); text-decoration: underline; }
footer .tel { margin-left: auto; font-weight: 600; color: var(--fg); }

/* ---- Impressum ---- */

.legal { max-width: 44rem; }
.legal h2 { font-size: 1.2rem; margin-top: 2.5rem; }
.legal h3 { font-size: 1rem; }
.legal ul { padding-left: 1.2rem; }

.contact-block {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.3rem 1.5rem;
  background: var(--surface);
  margin: 1rem 0 2rem;
  line-height: 1.8;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .split .media img, .gallery img { transition: none; }
}

/* ---- Entfernungstabelle (St.-Maergen-Seite) ---- */

/* Eigener Scroll-Container: die Tabelle darf schmal umbrechen, ohne dass
   die ganze Seite horizontal scrollt. */
.tablewrap { overflow-x: auto; margin: 2rem 0 0.75rem; }

.distances {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  min-width: 26rem;
}

.distances caption {
  text-align: left;
  font-size: 0.85rem;
  color: var(--muted);
  padding-bottom: 0.75rem;
}

.distances th, .distances td {
  text-align: left;
  padding: 0.65rem 1rem 0.65rem 0;
  border-bottom: 1px solid var(--line);
}

.distances thead th {
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.distances tbody tr:last-child td { border-bottom: 0; }
.distances td:first-child { font-weight: 500; }
.distances td:not(:first-child) { color: var(--muted); font-variant-numeric: tabular-nums; }

.hint-note { font-size: 0.85rem; color: var(--muted); margin: 0; }

/* Split-Sektion ohne Link: .media ist hier ein div, nicht ein a. */
.split .media img { height: auto; }

.more-link { margin: 2.5rem 0 0; font-weight: 600; }
.more-link a { text-decoration: none; }
.more-link a:hover { text-decoration: underline; }

/* Split-Sektion mit nur einem Kind (kein Bild): sonst wuerde der Text
   auf halber Breite stehenbleiben und rechts eine Luecke lassen. */
.split.single { grid-template-columns: 1fr; }
.split.single .body p { max-width: 62ch; }