/* ============================================================================
   Ferienapartment Vrboska · Hvar
   Warmes Editorial-Designsystem — Umsetzung des Handoffs
   „Startseite Vrboska — Raster, Bildsystem, Galerie".

   Rahmen 60rem · Textspalte 38rem (links hängend) · Marginalienspalte rechts
   (sparsam belegt) · vier Bildformen im Wechsel · Full-Bleed nur beim Hero ·
   zentrierter Abschluss als einzige Ausnahme. Kein Dark Mode.
   ========================================================================== */

/* ---------- 1. Schriften (selbst gehostet, latin + latin-ext) ------------ */

@font-face{
  font-family:"Newsreader"; font-style:normal; font-weight:200 800; font-display:swap;
  src:url("../fonts/newsreader-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Newsreader"; font-style:normal; font-weight:200 800; font-display:swap;
  src:url("../fonts/newsreader-latinext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Newsreader"; font-style:italic; font-weight:200 800; font-display:swap;
  src:url("../fonts/newsreader-italic-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Newsreader"; font-style:italic; font-weight:200 800; font-display:swap;
  src:url("../fonts/newsreader-italic-latinext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"IBM Plex Mono"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/ibmplexmono-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"IBM Plex Mono"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/ibmplexmono-latinext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- 2. Tokens -------------------------------------------------- */

:root{
  --font-head:"Newsreader", Georgia, "Times New Roman", serif;
  --font-body:"Newsreader", Georgia, "Times New Roman", serif;
  --font-mono:"IBM Plex Mono", ui-monospace, Menlo, monospace;

  --bg:#F3EEE2; --card:#FCFAF2; --panel:#ECE5D5; --line:#D9CFBA;
  --ink:#26221B; --ink2:#645B4C; --brick:#8A3A28; --ochre:#7C5011;
  --line-strong:#C9BC9F;            /* Karten-Hover-Rand (dunklere Linie) */
  --overlay:rgba(30,26,20,.86);     /* Lightbox-Hintergrund */
  --on-overlay:#E7DFCE;             /* Text/Steuerung auf dem Overlay */
  --on-overlay-accent:#E0B978;      /* Ort in der Lightbox-Bildunterschrift */
  --on-overlay-muted:#A79B87;       /* Zähler in der Lightbox-Bildunterschrift */

  /* Mono-Größen: nur zwei. --fs-label = Eyebrows/Bildunterschriften, --fs-ui = Nav/Buttons.
     Mono immer uppercase + letter-spacing .12em. */
  --fs-label:.625rem;
  --fs-ui:.6875rem;

  --maxw:88rem;      /* äußere Grenze – nur das Unterseiten-Raster nutzt sie */
  --frame:60rem;     /* gemeinsamer Rahmen: Bilder, Karten, Galerie, Footer */
  --frame-header:68rem;   /* etwas breiter als --frame: Platz für 7 Menüpunkte + Sprachlink,
                             bevor main.js auf schmalen Bildschirmen den Menü-Button einblendet */
  --reading:38rem;   /* Lesespalte (~66 Zeichen), links hängend */
  --pad:clamp(1.25rem, 5vw, 3rem);   /* Rahmen-Innenabstand */
  --section:3.5rem;  /* Standardabstand zwischen zwei Sektionen */
}

/* ---------- 3. Reset / Basis --------------------------------------- */

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; overflow-x:clip; }   /* deckt den Full-Bleed-Trick ab */

body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:1.0625rem; line-height:1.68;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

h1,h2,h3,p,ul,ol,figure,blockquote{ margin:0; }
img{ display:block; max-width:100%; height:auto; }
a{ color:var(--brick); }
a:not(.button):hover{ color:var(--ink); }   /* jeder Textlink wird beim Hover schwarz – sonst nichts */
strong,b{ font-weight:600; }
table{ border-collapse:collapse; }
button{ font:inherit; color:inherit; }

a:not(.button),
.nav-link,.button,.button--primary,.teaser,.teaser-link,
.gallery-item{
  transition:color .12s, background-color .12s, border-color .12s, box-shadow .12s, text-decoration-thickness .12s;
}
:focus-visible{ outline:2px solid var(--brick); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important; } }

/* ---------- 4. Rahmen, Haupt-Layout ------------------------------- */

.site-footer{
  max-width:var(--frame); margin-inline:auto; padding-inline:var(--pad);
}
main{ max-width:var(--maxw); margin-inline:auto; }

/* Unterseiten: benanntes Raster (Text hängt links, Bilder im Rahmen, Hero Full-Bleed).
   Die Startseite nutzt dieses Raster NICHT – sie fließt (Abschnitt 10). */
main > article.page{
  display:grid;
  grid-template-columns:
    [bleed-start] minmax(var(--pad),1fr)
    [frame-start read-start] minmax(0, var(--reading))
    [read-end] minmax(0, calc(var(--frame) - var(--pad) * 2 - var(--reading)))
    [frame-end] minmax(var(--pad),1fr) [bleed-end];
  row-gap:0;                       /* Abstände über Margen (wie die Startseite), nicht über row-gap */
  padding-block:var(--section) var(--section);
}
main > article.page > * + *{ margin-top:var(--section); }
main > article.page:has(> :is(.bleed,.hero-media):first-child){ padding-top:0; }
main > article.page > :is(.bleed,.hero-media){ width:100vw; margin-inline:calc(50% - 50vw); }
main > article.page > *{ grid-column:read-start / read-end; min-width:0; }
main > article.page > :is(.frame,.gal,.lagemap,.infobox--wide,.split,.wide,.pullquote,.pairstagger,.variants,.lead-standalone--wide,.panoband,.avail){
  grid-column:frame-start / frame-end;
}
.page .wide table{ max-width:none; }
main > article.page > :is(.bleed,.hero-media,.bleed-right,.bleed-left,.bildwechsel){ grid-column:bleed-start / bleed-end; }
main > article.page > :is(.bleed-right,.bleed-left){
  width:100vw; margin-inline:calc(50% - 50vw);
  margin-top:calc(var(--section) + 1rem);           /* ≈ 4.5rem wie CD für nummerierte Sektionen */
}
main > article.page > :is(.figure-pair,.pairstagger){ margin-top:2.5rem; }   /* Bildgruppe bindet enger an ihren Text – wie .swipestrip-wrap */
main > article.page > .figure-pair + *{ margin-top:2.5rem; }

@media (max-width:48em){
  main > article.page{
    grid-template-columns:
      [bleed-start] var(--pad)
      [frame-start read-start] 1fr
      [read-end frame-end] var(--pad) [bleed-end];
  }
}

/* ---------- 5. Skip-Link ---------------------------------------- */

.skip-link{ position:absolute; left:-9999px; top:0; }
.skip-link:focus{ left:0; padding:.5rem 1rem; background:var(--ink); color:var(--bg); }

/* ---------- 6. Header + Navigation (vollbreit, sticky, kein Burger) --- */

.header-sentinel{ height:1px; margin:0; pointer-events:none; }

.site-header{
  position:sticky; top:0; z-index:40;
  display:flex; flex-wrap:wrap;
  align-items:baseline; justify-content:space-between;
  gap:.75rem 1.5rem;
  padding-block:.9rem;
  /* Hintergrund über die volle Breite. Inhalt etwas breiter als der Rest der Seite
     (--frame-header statt --frame) – Platz für alle Menüpunkte in einer Zeile. */
  padding-inline:max(var(--pad), calc(50% - var(--frame-header) / 2 + var(--pad)));
  background:var(--bg);
  border-bottom:1px solid transparent;                            /* Linie erst beim Scrollen */
  transition:box-shadow .18s, border-color .18s;
}
.site-header.is-pinned{
  border-bottom-color:var(--line);
  box-shadow:0 12px 24px -22px rgba(38,34,27,.5);
}

.brand{
  font-family:var(--font-head); font-weight:500;
  font-size:1.1875rem; line-height:1.2; letter-spacing:.01em;
  color:var(--ink); text-decoration:none;
}
.site-nav ul{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:.55rem 1.15rem; list-style:none; margin:0; padding:0;
}
.nav-link{
  display:inline-block;
  font-family:var(--font-mono); font-size:var(--fs-ui); line-height:1;
  text-transform:uppercase; letter-spacing:.1em;
  color:var(--ink2); text-decoration:none; padding-block:.25rem;
}
.nav-link:hover{ color:var(--ink); }
.nav-link[aria-current="page"]{
  color:var(--ink);
  text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--brick);
}
.nav-link--cta{ background:var(--ink); color:var(--bg); padding:.45rem .7rem; }
.nav-link--cta:hover{ color:var(--bg); background:var(--brick); }   /* wie der Primär-Button */

.nav-toggle{
  font-family:var(--font-mono); font-size:var(--fs-ui);
  text-transform:uppercase; letter-spacing:.1em;
  color:var(--ink); background:transparent;
  border:1px solid var(--ink2); padding:6px 12px; cursor:pointer;
}

.header-actions{
  display:flex; align-items:center; gap:.5rem;
}

.lang-switch{
  display:flex; align-items:center; gap:.5rem;
  font-family:var(--font-mono); font-size:var(--fs-ui);
  letter-spacing:.1em;
}
.lang-switch a{
  color:var(--ink2); text-decoration:none; padding-block:.25rem;
}
.lang-switch a:hover{ color:var(--ink); text-decoration:underline; }

:target{ scroll-margin-top:5rem; }
.page h2, .page h3{ scroll-margin-top:5rem; }

/* Mittlere Breiten (z. B. Tablet quer, kleineres Laptop-Fenster): Nav bleibt
   komplett sichtbar (kein Menü-Button), rutscht aber sauber als eigene, volle
   Zeile unter Wortmarke + Sprachlink – statt mittendrin unschön umzubrechen. */
@media (min-width:48.01em) and (max-width:72em){
  .site-nav{ order:3; flex-basis:100%; }
}

/* Schmale Bildschirme (≤ iPad hoch): Menü-Button + ausklappbare Navigation (main.js) */
@media (max-width:48em){
  .site-nav{ flex-basis:100%; background:var(--panel); }
  .site-nav:not([hidden]){
    position:fixed; left:0; right:0; top:var(--header-h,52px);
    max-height:calc(100dvh - var(--header-h,52px)); overflow:auto;
    border-top:1px solid var(--line);
    box-shadow:0 12px 24px -18px rgba(38,34,27,.5);
  }
  .site-nav ul{ flex-direction:column; gap:0; }
  .site-nav li{ border-top:1px solid var(--line); }
  .site-nav li:last-child{ border-bottom:1px solid var(--line); }
  .nav-link{ display:block; padding:.85em var(--pad); font-size:.8rem; }
  .nav-link--cta{ display:inline-block; margin:.6em var(--pad); }
}

/* ---------- 7. Überschriften --------------------------------- */

.title-block h1,
.page h1{
  font-family:var(--font-head); font-weight:400;
  font-size:clamp(2.1rem, 5.4vw, 3.35rem);
  line-height:1.1; letter-spacing:-.012em; color:var(--ink);
  text-wrap:pretty;
}
.title-block h1::after,
.page h1::after{
  content:""; display:block;
  width:3rem; height:1px; background:var(--brick);
  margin:1.6rem 0 1.15rem;
}

.page h2{
  font-family:var(--font-head); font-weight:500;
  font-size:1.4rem; line-height:1.25; color:var(--ink);
}
@media (min-width:48em){ .page h2{ font-size:1.6rem; } }
.form-section > h2{ font-size:1.3rem; }
@media (min-width:48em){ .form-section > h2{ font-size:1.35rem; } }

.page h3{
  font-family:var(--font-head); font-weight:500;
  font-size:1.15rem; line-height:1.25; color:var(--ink);
}

/* Mono-Eyebrow (kleine Abschnittslabels) */
.eyebrow,
.areas > h2,
.gallery-preview > h2{
  font-family:var(--font-mono); font-weight:400;
  font-size:var(--fs-label); line-height:1;
  text-transform:uppercase; letter-spacing:.12em; color:var(--ochre);   /* „eröffnendes" Label */
}

/* Abschnitts-Kopf auf Unterseiten: Mono-Ocker-Eyebrow über der Serifen-H2 (eine Einheit).
   Größen nach dem „Das Apartment"-Handoff von Claude Design. */
.sectionhead .eyebrow{ margin:0 0 .7rem; }
.sectionhead h2{
  margin:0; font-weight:400;
  font-size:clamp(1.6rem, 3.2vw, 2.15rem);
  line-height:1.18; letter-spacing:-.01em;
}
/* Vorspann: der erste Absatz nach dem Abschnitts-Kopf (drittes Textregister, 23px) */
.sectionhead + p{ font-size:1.4375rem; line-height:1.38; }
.page > .sectionhead + p{ margin-top:1.3rem; }   /* H2 → Vorspann (CD-Maß) */
/* Mobil: H2 schrumpft mit der Breite, der Vorspann muss mit – sonst stehen beide fast gleich groß da */
@media (max-width:48em){ .sectionhead + p{ font-size:1.25rem; } }

/* Pull-Quote — große editoriale Aussage, links hängend, Textspaltenbreite (38rem) mit
   Akzentlinie links (Handoff „Startseite" v2: Newsreader kursiv 300). */
.pullquote{
  font-family:var(--font-head); font-style:italic; font-weight:300;
  font-size:clamp(1.5rem, 1rem + 2.2vw, 2rem);
  line-height:1.3; color:var(--ink);
  max-width:var(--reading); text-wrap:pretty;
  border-left:1px solid var(--brick); padding-left:1.5rem;
}
.pullquote p{ margin:0; max-width:none; font:inherit; }
.page .pullquote p{ max-width:none; }   /* schlägt .page p{max-width:reading} (gleiche Spezifität) */

/* ---------- 8. Fließtext, Listen, Links (Unterseiten) --------- */

.page p{ max-width:var(--reading); }
.page ul, .page ol{ padding-left:1.3em; max-width:var(--reading); }
.page li + li{ margin-top:.3em; }
.page hr{ display:none; }

.page a:not(.button){
  color:var(--brick);
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;
}
.page a:not(.button):hover{ color:var(--ink); }

/* ---------- 9. (frei) — Initiale/Drop-Cap entfernt: Startseite hat keine,
   Konsistenz über alle Seiten. --------------------------------- */

/* ============================================================================
   10. Startseite — Fluss-Layout, Marginalienspalte, Bildrhythmus
   ========================================================================== */

.home{
  max-width:var(--frame);
  margin-inline:auto;
  padding-inline:var(--pad);
  padding-bottom:var(--section);   /* Luft vor dem geteilten Abschluss-Block */
}
.home > *:not(:first-child){ margin-top:var(--section); }   /* Spezifität schlägt .figure{margin:0} */

/* Hero — Form 0, Full-Bleed, bündig unter der Nav. Gleich auf Startseite und Unterseiten. */
.hero-media{ margin:0; }
.hero-media img{
  display:block; width:100%;
  height:clamp(340px, 68vh, 680px); object-fit:cover;
}
:is(.home, article.page) > .hero-media{ width:100vw; margin-left:calc(50% - 50vw); }
.home > .hero-media + .hero-caption{ margin-top:.7rem; }
.hero-caption{
  font-family:var(--font-mono); font-size:var(--fs-label); line-height:1.5;
  text-transform:uppercase; letter-spacing:.12em; color:var(--ink2);
}
.home > .hero-caption + *{ margin-top:2.75rem; }
/* Unterseiten-Raster: row-gap ausgleichen, damit Hero → Caption → Titel wie auf der Startseite sitzen */
article.page > .hero-media + .hero-caption{ margin-top:.7rem; }
article.page > .hero-caption + *{ margin-top:2.75rem; }

/* Marginalienspalte — Umbruch statt Media Query; sparsam belegt */
.split{
  display:flex; flex-wrap:wrap;
  gap:1.75rem 2.5rem; align-items:flex-start;
}
.split > .col-text{ flex:1 1 30rem; min-width:0; max-width:var(--reading); }
.split > .col-margin{ flex:1 1 11rem; min-width:0; max-width:16rem; }
.split:not(.title-block) > .col-text > * + *{ margin-top:1em; }   /* Absatzabstand in mehrzeiligen Textspalten */

/* Mobil: sobald die Marginalie unter ihren Absatz umbricht, nimmt sie die volle Breite ein */
@media (max-width:48em){
  .split > .col-margin{ flex-basis:100%; max-width:none; }
  /* Kurzdaten am Titel mobil ausblenden – „Auf einen Blick" direkt darunter zeigt dasselbe */
  .title-block > .col-margin{ display:none; }
}

/* Intro-Zone: ein einzelner Querverweis in der Marginalie, unten am Textblock bündig */
.col-margin--ref{ align-self:flex-end; margin-bottom:.3rem; }
.intro-ref{
  font-family:var(--font-mono); font-size:var(--fs-label); line-height:1.5;
  text-transform:uppercase; letter-spacing:.12em;
  color:var(--brick); text-decoration:none;
}

.margin-data{
  list-style:none; margin:0; padding:.85rem 0 0;
  border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:.5rem;
}
.margin-data li{
  font-family:var(--font-mono); font-size:var(--fs-label); line-height:1;
  text-transform:uppercase; letter-spacing:.12em; color:var(--ochre);   /* Kurzdaten = „eröffnend" */
}
.margin-figure{ margin:0; }
.margin-figure img{ display:block; width:100%; aspect-ratio:4/5; object-fit:cover; }
.margin-figure figcaption{
  margin-top:.6rem;
  font-family:var(--font-mono); font-size:var(--fs-label); line-height:1.5;
  text-transform:uppercase; letter-spacing:.12em; color:var(--ink2);
}

/* Titelblock */
.title-block h1{ margin:0; }
.title-block .subline{
  max-width:34rem; margin:0;
  font-size:1.0625rem; line-height:1.68; color:var(--ink);
}
.title-block .cta-buttons{ margin-top:1.9rem; }

/* Einstiegsabsatz – links hängend auf Lesebreite */
.home .lead{ max-width:var(--reading); font-size:1.0625rem; line-height:1.68; }

/* Bildpaar bindet enger an seine Nachbarn (eine Gruppe) */
.home > .figure-pair{ margin-top:2.5rem; }
.home > .figure-pair + *{ margin-top:2.5rem; }

/* Geteilter Abschluss-Block (partials/closing.njk) — auf jeder Seite gleich,
   direkter Nachbar von <article> in <main>. Einzige zentrierte Zone der Seite. */
.closing{
  max-width:var(--frame); margin-inline:auto; padding-inline:var(--pad);
  margin-top:.5rem;            /* zusammen mit padding-bottom von <article> ≈ 4rem Luft */
  padding-bottom:var(--section);
  text-align:center;
}
.closing::before{
  content:""; display:block;
  width:3rem; height:1px; background:var(--brick);
  margin:0 auto 1.1rem;
}
.closing > p:not(.cta-buttons){
  max-width:28rem; margin-inline:auto;
  font-size:1.0625rem; line-height:1.68;
}
.closing > .closing-lead + .closing-text{ margin-top:.9rem; }
.closing .cta-buttons{ justify-content:center; margin-top:1.8rem; }

/* ---------- 11. Info-Kasten (positiv/hilfreich → helle Karte) --- */

.infobox{
  background:var(--card); border:1px solid var(--line); border-radius:0;
  padding:1.6rem clamp(1.1rem,3vw,1.9rem) 1.75rem;
  max-width:var(--reading);
}
.infobox > :first-child{ margin-bottom:1.15rem; }
.infobox > p:first-child:has(> strong:only-child),
.infobox > h2:first-child,
.infobox > .label{
  font-family:var(--font-mono); font-weight:400; line-height:1;
  font-size:var(--fs-label); text-transform:uppercase; letter-spacing:.12em; color:var(--ochre);
}
/* Markdown-„**Label**" liefert ein <strong> – dessen 600 zurücknehmen, sonst
   Faux-Bold (Mono ist nur mit 400 geladen). Ergebnis = wie das <h2>-Label. */
.infobox > p:first-child:has(> strong:only-child) strong{ font-weight:inherit; }
.infobox ul{ list-style:none; margin:0; padding:0; max-width:none; }
.infobox li{ position:relative; padding:.3em 0 .3em 1.1em; }
.infobox li::before{ content:"·"; position:absolute; left:0; color:var(--ochre); font-weight:700; }
@media (min-width:48em){
  .infobox:not(.infobox--wide) ul{ display:grid; grid-template-columns:1fr 1fr; gap:0 34px; }
}

/* „Auf einen Blick" & Co. — volle Rahmenbreite, festes Spaltenraster, oben ausgerichtet.
   Standard: Mobil 1 Spalte, ab 48em 4 Spalten (kurze Stichpunkte).
   Variante --2col: für Label-plus-Satz-Listen – Mobil 1 Spalte, ab 40em 2 Spalten. */
.infobox--wide{ max-width:none; }
.infobox--wide ul{
  display:grid; gap:1.1rem 1.75rem;
  grid-template-columns:1fr;
}
@media (min-width:48em){ .infobox--wide ul{ grid-template-columns:repeat(4,1fr); } }
.infobox--wide.infobox--2col ul{ grid-template-columns:1fr; }              /* mobil untereinander */
@media (min-width:40em){ .infobox--wide.infobox--2col ul{ grid-template-columns:repeat(2,1fr); } }
/* --2col: kleines Mono-Label ÜBER dem Punkt, ·-Bullet bleibt am Beschreibungstext */
.infobox--2col li strong{
  display:block; font-weight:400;
  font-family:var(--font-mono); font-size:var(--fs-label); line-height:1;
  text-transform:uppercase; letter-spacing:.12em; color:var(--ochre);   /* wie das „Auf einen Blick"-Label */
  margin:0 0 .4rem -1.1em;                                  /* Label an der linken Kante, nicht eingerückt */
}
.infobox--2col li::before{ top:calc(var(--fs-label) + .4rem); }   /* Bullet auf Höhe der Beschreibung */
.infobox--wide li{
  min-width:0; padding:0 0 0 1.1em;
  font-size:1.0625rem; line-height:1.5;
}

/* ---------- 12. Hinweis (Einschränkung → ruhig, KEIN Kasten) --- */

.note{
  max-width:var(--reading);
  border-top:1px solid var(--line);
  padding-top:1.1rem;
}
.note > :first-child,
.note > p:first-child:has(> strong:only-child),
.note .note-label{
  font-family:var(--font-mono); font-weight:400; line-height:1;
  font-size:var(--fs-label); text-transform:uppercase; letter-spacing:.12em;
  color:var(--ink2);
  margin:0 0 .75rem;
}
.note p{ color:var(--ink2); font-size:1.0625rem; line-height:1.68; max-width:none; }
.note p + p{ margin-top:.6em; }

/* ---------- 13. Bereichs-Karten (Startseite) --------------------- */

.areas > h2{ margin-bottom:1.1rem; }
.teasers{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:1.5rem;
}
.teaser{
  flex:1 1 18rem; min-width:0;
  display:flex; flex-direction:column;
  background:var(--card); border:1px solid var(--line); border-radius:0;
  padding:1.4rem 1.5rem 1.35rem; text-decoration:none;
}
.teaser > h2{
  font-family:var(--font-head); font-weight:500; font-size:1.25rem; line-height:1.25;
  color:var(--ink); margin-bottom:.7rem;
}
.teaser > p{ font-size:.9375rem; line-height:1.6; color:var(--ink2); margin-bottom:1.4rem; }
.teaser-link{
  margin-top:auto;                    /* alle Pfeile auf einer Linie */
  font-family:var(--font-mono); font-size:var(--fs-label);
  text-transform:uppercase; letter-spacing:.12em; color:var(--brick); text-decoration:none;
}
.teaser-link::after{ content:" →"; }
.teaser:hover{ border-color:var(--line-strong); }
.teaser:hover .teaser-link{ color:var(--ink); }

/* ---------- 14. Tabellen ------------------------------ */

.page table{
  width:100%; margin:0; font-size:.92em; max-width:var(--reading);
  border-bottom:1px solid var(--line);        /* keine obere Linie */
}
.page th{
  font-family:var(--font-mono); font-weight:400; line-height:1;
  font-size:var(--fs-label); text-transform:uppercase; letter-spacing:.12em; color:var(--ink2);
  text-align:left; padding:.62em .7em; border-bottom:1px solid var(--line);
}
.page td{
  text-align:left; vertical-align:top; padding:.62em .7em .72em;
  font-variant-numeric:tabular-nums;
  border-top:1px solid var(--line);            /* Linie zwischen den Zeilen */
}

/* ---------- 15. Buttons + Button-Reihe --------------- */

.cta-buttons{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:.85rem 1.4rem; margin:0;
}
.cta-buttons .button--primary{ order:-1; }   /* „Anfrage senden" links, „Verfügbarkeit prüfen" rechts */

.button{
  display:inline-flex; align-items:center;
  font-family:var(--font-mono); font-size:var(--fs-ui); line-height:1;
  text-transform:uppercase; letter-spacing:.12em;
  color:var(--brick); background:none; border:0; border-radius:0;
  padding:.5rem 0; text-decoration:underline; text-underline-offset:4px; cursor:pointer;
}
.button--primary{
  color:var(--bg); background:var(--ink);
  padding:.7rem 1.1rem; text-decoration:none;
}
.button:hover{ color:var(--ink); }
/* Abstimmung: Hover NICHT schwarz-auf-schwarz – Ziegel-Grund, Text bleibt hell, keine Bewegung */
.button--primary:hover{ background:var(--brick); color:var(--bg); }

/* ---------- 16. Formular ---------------------------- */

.inquiry-form{ max-width:34rem; }
.form-note{ font-style:italic; color:var(--ink2); font-size:.95rem; margin-bottom:1.3em; }
.field{ margin-block:1.1em; }
.field label{
  display:block; font-family:var(--font-mono); line-height:1;
  font-size:var(--fs-ui); text-transform:uppercase; letter-spacing:.12em;
  color:var(--ink); margin-bottom:.4em;
}
.field .hint{
  font-family:var(--font-body); font-weight:400;
  text-transform:none; letter-spacing:0; font-size:.85rem; color:var(--ink2);
}
.inquiry-form input,
.inquiry-form textarea{
  font-family:var(--font-body); font-size:1rem;
  width:100%; max-width:28rem; padding:.5em .6em;
  border:1px solid var(--ink2); border-radius:0; background:var(--card); color:var(--ink);
}
.inquiry-form textarea{ resize:vertical; }
.inquiry-form input:focus,
.inquiry-form textarea:focus{ border-color:var(--ink); }
.field--checkbox{ display:flex; gap:.6em; align-items:flex-start; }
.field--checkbox input{ width:auto; flex:none; margin-top:.3em; }
.field--checkbox label{
  font-family:var(--font-body); font-weight:400;
  text-transform:none; letter-spacing:0; font-size:.95rem; color:var(--ink); margin-bottom:0;
}
.honeypot{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.inquiry-form button{ margin-top:.6em; }
@media (min-width:48em){
  .field-group{ display:flex; gap:1rem; }
  .field-group .field{ flex:1; }
}

/* ---------- 17. Anfrage-Seite: Abschnitte ---------- */

.inquiry-page h2{ margin-bottom:.7em; }
.next-steps ul{ padding-left:1.3em; max-width:var(--reading); }
.next-steps li + li{ margin-top:.3em; }
.contact address{ font-style:normal; }
.contact address a{ color:var(--brick); text-decoration:none; }

/* ---------- 18. Footer ----------------------------- */

.site-footer{
  border-top:1px solid var(--line);
  margin-top:0;
  padding-block:1.4rem 2.5rem;
  font-family:var(--font-mono); font-size:var(--fs-label);
  text-transform:uppercase; letter-spacing:.12em; color:var(--ink2);
}
.footer-nav{ display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; list-style:none; margin:0; padding:0; }
.footer-planned{ color:var(--ink2); }
.footer-nav a{ color:var(--brick); text-decoration:none; }
.footer-contact{ margin-top:1em; font-style:normal; }
.footer-contact a{ color:var(--brick); text-decoration:none; }

/* ---------- 19. Vertikaler Feinrhythmus (Unterseiten) ---------
   Basisabstand zwischen Geschwistern = var(--section). Verwandte Absätze
   rücken näher an ihre Überschrift. */
/* Überschrift → erster Block der Sektion */
.page:not(.inquiry-page) > :is(h2,h3) + p,
.page:not(.inquiry-page) > :is(h2,h3) + ul,
.page:not(.inquiry-page) > :is(h2,h3) + table{
  margin-top:1.3rem;
}
/* Absatzfluss innerhalb einer Sektion – normaler Absatzabstand, kein Sektionsabstand */
.page:not(.inquiry-page) > p + p,
.page:not(.inquiry-page) > p + ul,
.page:not(.inquiry-page) > ul + p,
.page:not(.inquiry-page) > table + p{
  margin-top:1rem;
}
/* Absatz → eingebettete Tabelle */
.page:not(.inquiry-page) > p + :is(table,.wide){
  margin-top:1.75rem;
}

/* ============================================================================
   20. Fotokonzept — feste Formen, gleiche Kanten, gleiche Abstände
   ========================================================================== */

.figure{ margin:0; }
.figure picture{ display:block; }
.figure img{ display:block; width:100%; height:auto; border-radius:0; }
.figure > figcaption{
  padding-top:.6rem;
  font-family:var(--font-mono); font-size:var(--fs-label); line-height:1.5;
  text-transform:uppercase; letter-spacing:.12em; color:var(--ink2);
}

/* Full-Bleed-Bild (Form 0 / Leitbild der Unterseiten) */
.figure.bleed img{ border-radius:0; aspect-ratio:16/8; object-fit:cover; }
@media (min-width:64em){ .figure.bleed img{ aspect-ratio:12/5; } }
.figure.bleed > figcaption{   /* auf der Textkante (54rem-Band) wie .strip-caption / .hero-caption */
  padding-inline:max(var(--pad), calc(50vw - var(--frame) / 2 + var(--pad)));
}

/* Form 1 — 1× horizontal groß, im Rahmen */
.figure.frame img{ aspect-ratio:16/9; object-fit:cover; }

/* Form 2 — 2× Hochformat nebeneinander, statisch (nicht klickbar) */
.figure-pair{ display:flex; flex-wrap:wrap; gap:1.5rem; }
.figure-pair > .figure{ flex:1 1 13rem; min-width:0; margin:0; }
.figure-pair .figure img{ aspect-ratio:3/4; object-fit:cover; }
.figure-pair .figure > figcaption{ padding-top:.6rem; }

/* Versetztes Hochformat-Paar — Desktop: links höher, leichte Überlappung. Mobil: schlicht nebeneinander. */
.pairstagger{ display:flex; gap:.5rem; align-items:flex-start; }   /* enger Abstand wie beim „Schlafen"-Streifen */
.pairstagger > .figure{ flex:1 1 0; min-width:0; margin:0; }
.pairstagger .figure img{ display:block; width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:0; }
@media (min-width:52em){
  .pairstagger{ gap:0; }
  /* Oberes Bild sitzt bündig zum 2.5rem-Abstand über der Gruppe (wie die anderen
     Bildgruppen). Der Versatz entsteht allein dadurch, dass das zweite Bild tiefer steht. */
  .pairstagger > .figure:first-child{
    margin-right:-3rem;
    position:relative; z-index:1;
  }
  .pairstagger > .figure:last-child{ margin-top:4rem; }

  /* Spiegelverkehrt: linkes Bild tiefer, rechtes Bild höher und oben liegend */
  .pairstagger--reverse > .figure:first-child{
    margin-right:0; margin-top:4rem;
    position:static; z-index:auto;
  }
  .pairstagger--reverse > .figure:last-child{
    margin-top:0; margin-left:-3rem;
    position:relative; z-index:1;
  }
}

/* Asymmetrische Full-Bleed-Zone: Textkante = Rahmenkante, Bild läuft zu EINER
   Viewport-Kante aus. Der max()-Ausdruck ist die ganze Technik (kein Media Query).
   Auf Mobile bricht Flex um: Text volle Breite, Bild darunter – Anschnitt entfällt. */
.bleed-right, .bleed-left{
  display:flex; flex-wrap:wrap; gap:2.5rem;
}
.bleed-right{
  align-items:flex-start;
  padding-left:max(var(--pad), calc(50vw - var(--frame) / 2 + var(--pad)));
}
/* Modifier: Textspalte vertikal mittig zum Bild (Desktop) */
.bleed-right.bleed--center, .bleed-left.bleed--center{ align-items:center; }
.bleed-right > .col-text{ flex:1 1 26rem; min-width:0; max-width:34rem; padding-right:var(--pad); }
.bleed-right > .figure{ flex:1 1 18rem; min-width:0; margin:0; }
.bleed-right > .figure img{ width:100%; display:block; aspect-ratio:4/5; object-fit:cover; }

.bleed-left{
  align-items:center;
  flex-direction:row-reverse;                       /* Bild links, Text rechts – auf Mobile Text zuerst */
  padding-right:max(var(--pad), calc(50vw - var(--frame) / 2 + var(--pad)));
}
.bleed-left > .col-text{ flex:1 1 22rem; min-width:0; max-width:30rem; padding-left:var(--pad); }
.bleed-left > .figure{ flex:1 1 22rem; min-width:0; margin:0; }
.bleed-left > .figure img{ width:100%; display:block; aspect-ratio:3/2; object-fit:cover; }
.bleed-left > .figure figcaption{ padding-left:var(--pad); }   /* Bild klebt an der Kante, Caption nicht */

/* Geklebtes Bildpaar in der Bleed-Zone: zwei Querformate ohne Zwischenraum, eine Legende */
.bleed--pair .bleed-pair-stack{ display:flex; flex-direction:column; }
.bleed--pair .bleed-pair-stack picture{ display:block; }

.bleed-right > .col-text > * + *,
.bleed-left > .col-text > * + *{ margin-top:1em; }

/* Mobil: kein Anschnitt, Text über die volle Breite wie in den anderen Sektionen */
@media (max-width:52em){
  .bleed-right, .bleed-left{ padding-inline:var(--pad); }
  .bleed-right > .col-text,
  .bleed-left > .col-text{ max-width:none; padding-inline:0; }
  .bleed-left > .figure figcaption{ padding-left:0; }
}

/* Wisch-Streifen — gleich hohe Kacheln (gemischtes Format), zum Wischen/Scrollen.
   Full-Bleed, klickbar (Lightbox). Swipe ohne JS; Desktop-Pfeile über main.js. */
main > article.page > .swipestrip-wrap{
  grid-column:bleed-start / bleed-end;
  width:100vw; margin-inline:calc(50% - 50vw);
  margin-top:2.5rem;                                /* gehört zur Sektion darüber */
}
.swipestrip-wrap{ position:relative; --strip-h:clamp(20rem, 50vh, 32rem); }
.swipestrip{
  display:flex; gap:.5rem;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  padding-left:0;                                   /* erste Kachel an der Viewport-Kante */
  scrollbar-width:none;
}
.swipestrip::-webkit-scrollbar{ display:none; }
.swipestrip::after{ content:""; flex:0 0 .5rem; }  /* die letzte Kachel kann voll einscrollen */
.swipestrip > .gallery-item{
  flex:0 0 auto;
  height:var(--strip-h); width:auto;               /* feste Höhe – Breite kommt vom Seitenverhältnis */
  scroll-snap-align:start;
}
.swipestrip > .gallery-item--land{ aspect-ratio:16 / 9; }
.swipestrip > .gallery-item--port{ aspect-ratio:3 / 4; }
/* Mobil: Streifen flacher → die (zuerst stehenden) Hochformate sind schmal genug,
   dass das nächste Bild herausschaut = Wisch-Hinweis. Formate bleiben unangetastet. */
@media (max-width:52em){
  .swipestrip-wrap{ --strip-h:clamp(15rem, 40vh, 23rem); }
}
.swipestrip .gallery-item picture{ display:block; width:100%; height:100%; }
.swipestrip .gallery-item img{
  display:block; width:100%; height:100%;
  object-fit:cover; border-radius:0;
}
.swipestrip .gallery-item:hover{ box-shadow:inset 0 0 0 1px var(--bg); }

/* Pfeile (nur Desktop, per JS eingeblendet) — Optik wie die „→" in den Bereichs-Karten,
   nur weiß und größer, damit sie über den Bildern klick­bar sind. */
.swipestrip-nav{
  position:absolute; top:0; z-index:2;
  height:var(--strip-h);
  display:none; align-items:center;
  font-family:var(--font-mono); font-size:1.75rem; line-height:1;
  color:var(--bg); background:transparent; border:0; cursor:pointer;
  padding:0 1.1rem;
  text-shadow:0 1px 8px rgba(30,26,20,.55), 0 0 3px rgba(30,26,20,.5);
}
.swipestrip--nav .swipestrip-nav{ display:flex; }
.swipestrip-nav--prev{ left:0; }
.swipestrip-nav--next{ right:0; }
.swipestrip-nav:disabled{ opacity:.3; cursor:default; }
.swipestrip-nav:not(:disabled):hover{ color:#fff; }
.swipestrip-nav:focus-visible{ outline:2px solid var(--bg); outline-offset:2px; }
@media (max-width:52em){ .swipestrip--nav .swipestrip-nav{ display:none; } }

.strip-caption{
  margin-top:.6rem;
  max-width:none; white-space:nowrap;               /* eine Zeile, nicht umbrechen */
  padding-inline:max(var(--pad), calc(50vw - var(--frame) / 2 + var(--pad)));
  font-family:var(--font-mono); font-size:var(--fs-label); line-height:1.5;
  text-transform:uppercase; letter-spacing:.12em; color:var(--ink2);
}

/* ---------- 21. Galerie ------------------------------- */
/* /galerie/: Filterleiste (Orte × Motiv) + Bildraster mit eigenen Seitenverhältnissen
   (kein Beschnitt). Die Filter-CSS-Regeln je Schlüssel erzeugt der gallery-Shortcode
   selbst (siehe .eleventy.js) — hier nur das Rahmenwerk. */

.gal-filters{
  position:sticky; top:var(--header-h, 52px); z-index:30;
  background:var(--bg); border-bottom:1px solid var(--line);
  padding-block:1rem;
  max-height:24rem; overflow:hidden;               /* Ceiling für den Einklapp-Übergang, s. .is-hidden */
  transition:max-height .2s ease, padding-block .2s ease, border-color .2s ease;
}
/* Runter: raus, hoch: rein (main.js) – unter Header + Filterleiste bleibt sonst auf
   Mobile kaum Platz für die Bilder. max-height statt transform, damit die Leiste
   beim Einklappen wirklich keinen Platz mehr beansprucht (sticky bleibt in flow). */
.gal-filters.is-hidden{
  max-height:0; padding-block:0; border-color:transparent;
}

.gal-filter-row{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.6rem 1rem;
}
.gal-filter-row + .gal-filter-row{ margin-top:.6rem; }
.gal-filter-label{
  flex:0 0 4.5rem;
  font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink2);
}
.gal-chips{ display:flex; flex-wrap:wrap; gap:.4rem; }

.gal-chip{
  display:inline-flex; align-items:baseline; gap:.45rem;
  padding:.4rem .7rem; border:1px solid var(--line);
  font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink); cursor:pointer;
}
.gal-chip input{                                              /* barrierefrei ausgeblendet, nicht display:none */
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}
.gal-chip:hover{ border-color:var(--ink); }
.gal-chip:has(> input:focus-visible){ outline:2px solid var(--brick); outline-offset:3px; }
.gal-chip:has(> input:checked){ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.gal-chip-count{ opacity:.6; }

.gal-status{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem 1rem; margin-top:.85rem; }
.gal-count{
  margin:0; font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.06em; color:var(--ink2);
}
.gal-reset{
  background:none; border:0; padding:0; cursor:pointer;
  font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--brick); text-decoration:underline; text-underline-offset:.2em;
}

.gal-grid{ columns:3; column-gap:1rem; margin-top:2rem; }
@media (max-width:52em){ .gal-grid{ columns:2; } }
@media (max-width:34em){ .gal-grid{ columns:1; } }

.gal-item{ margin:0 0 1rem; break-inside:avoid; }
.gal-item > .gallery-item{ display:block; }
.gal-item > .gallery-item picture{ display:block; }
.gal-item > .gallery-item img{ display:block; width:100%; height:auto; border-radius:0; }
.gal-item > .gallery-item:hover{ box-shadow:inset 0 0 0 1px var(--bg); }
.gal-item > .gallery-item:focus-visible{ outline:2px solid var(--brick); outline-offset:-3px; }

.gal-cap{
  display:flex; flex-wrap:wrap; gap:.3rem .9rem; margin-top:.5rem;
  font-family:var(--font-mono); font-size:.625rem; letter-spacing:.06em;
}
.gal-cap-ort{ color:var(--ochre); }
.gal-cap-title{ color:var(--ink2); }

.gal-empty{
  margin-top:1.5rem; padding:1.5rem; background:var(--card); border:1px solid var(--line);
  max-width:none; color:var(--ink2);
}
.gal-empty-reset{ color:var(--brick); }

/* Startseiten-Vorschau — Form 3: 1 Führungsbild (4:5, mit Legende) + 2×2 ohne Legende,
   Zweier-Flexblöcke (keine auto-fit-Waisenreihe bei ungerader Spaltenzahl). Beide Spalten
   tragen dieselbe Höhe über dasselbe Seitenverhältnis (4:5), nicht per Flex-Stretch –
   sonst würde die Legende unter dem Führungsbild das Raster mit hochziehen. */
.gallery-preview > h2{ margin-bottom:1.1rem; }
.gallery-feature{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:.5rem; }
.gallery-feature > *{ flex:1 1 20rem; min-width:0; margin:0; }
.gallery-feature .gallery-lead{ display:flex; flex-direction:column; }
.gallery-feature .gallery-lead .gallery-item{ width:100%; }
.gallery-feature .gallery-lead .gallery-item img{ aspect-ratio:4/5; height:auto; }
.gallery-feature .gallery-lead > figcaption{
  margin-top:.6rem;
  font-family:var(--font-mono); font-size:var(--fs-label); line-height:1.5;
  text-transform:uppercase; letter-spacing:.12em; color:var(--ink2);
}
.gallery-feature .gallery-quad{
  aspect-ratio:4/5;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(2,1fr);
  gap:.5rem;
}
.gallery-feature .gallery-item{ display:block; }
.gallery-feature .gallery-item img{ display:block; width:100%; object-fit:cover; }
.gallery-feature .gallery-quad .gallery-item,
.gallery-feature .gallery-quad .gallery-item img{ height:100%; }
.gallery-feature .gallery-item:hover{ box-shadow:inset 0 0 0 1px var(--bg); }
.gallery-feature .gallery-item:focus-visible{ outline:2px solid var(--brick); outline-offset:-3px; }

.gallery-more{ margin-top:1.1rem; }
.gallery-more a{
  font-family:var(--font-mono); font-size:var(--fs-label);
  text-transform:uppercase; letter-spacing:.12em; color:var(--brick); text-decoration:none;
}
.gallery-page .subline{ color:var(--ink2); font-size:1.0625rem; max-width:var(--reading); }

/* ---------- 22. Lightbox (natives <dialog>, per JS erzeugt) ---- */

.lightbox{
  padding:0; border:0; margin:0;
  max-width:100vw; max-height:100dvh; width:100vw; height:100dvh;
  background:transparent; color:var(--on-overlay); overflow:hidden;
}
.lightbox[open]{ display:grid; grid-template-rows:1fr auto; }
.lightbox::backdrop{ background:var(--overlay); }
@media (prefers-reduced-motion:no-preference){
  .lightbox[open]{ animation:lb-fade .16s ease-out; }
  .lightbox-stage img{ transition:opacity .16s ease-out, transform .2s ease-out; }
}
@keyframes lb-fade{ from{ opacity:0; } to{ opacity:1; } }
.lightbox-stage{ display:grid; place-items:center; padding:clamp(1rem,5vw,3rem); overflow:hidden; }
.lightbox-stage img{ max-width:100%; max-height:100%; object-fit:contain; }
.lightbox-bar{
  display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1.1rem;
  padding:0 clamp(1rem,5vw,3rem) calc(1rem + env(safe-area-inset-bottom));
  font-family:var(--font-mono); font-size:var(--fs-ui);
  text-transform:uppercase; letter-spacing:.12em;
}
.lightbox-count{ color:var(--on-overlay-muted); font-variant-numeric:tabular-nums; }
.lightbox-caption{
  flex:1 1 100%; order:3; display:inline-flex; flex-wrap:wrap; gap:.3rem .6rem;
}
.lightbox-cap-ort{ color:var(--on-overlay-accent); }
.lightbox-cap-title{ color:var(--on-overlay); }
@media (min-width:40em){ .lightbox-caption{ flex:1; order:0; justify-content:center; } }
.lightbox-link{
  font:inherit; color:var(--on-overlay); background:transparent; border:0;
  text-transform:uppercase; letter-spacing:.12em;
  padding:.6rem 0; cursor:pointer;
}
.lightbox-link:disabled{ opacity:.3; cursor:default; }
.lightbox-link:not(:disabled):hover{ color:var(--bg); }
.lightbox-close{ margin-left:auto; border:1px solid rgba(243,238,226,.5); padding:.6rem 1rem; }
.lightbox-close:hover{ background:rgba(243,238,226,.12); }
.lightbox-link:focus-visible{ outline:2px solid var(--on-overlay); outline-offset:2px; }

/* ============================================================================
   23. Parallax — nur Fotografie, sehr kleiner Weg.
   Reines CSS (scroll-driven, kein JS). Fehlt der Browser-Support oder ist
   „reduce motion" gesetzt, bleiben die Bilder statisch und unverzerrt.
   Betroffen: Hero (Startseite + Unterseite), das Full-Bleed-Bild (.figure.bleed)
   und die beiden bleedsplit-Bilder. Text, Karten, Tabelle, Galerie bleiben fix.
   Stärke justieren: scale + translateY in @keyframes (scale ≥ 1 + 2·|translateY|). */

@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){

    /* Clip-Rahmen = das <picture> (ohne Bildunterschrift), damit das driftende
       Bild den Rahmen nie verlässt und keine Caption überdeckt. */
    :is(.home, article.page) > .hero-media > picture,
    main > article.page > .figure.bleed > picture,
    .bleed-right > .figure > picture,
    .bleed-left > .figure > picture{
      display:block; overflow:clip;
    }

    :is(.home, article.page) > .hero-media > picture > img,
    main > article.page > .figure.bleed > picture > img,
    .bleed-right > .figure > picture > img,
    .bleed-left > .figure > picture > img{
      animation:parallax-drift linear both;
      animation-timeline:view();
      will-change:transform;
    }

    @keyframes parallax-drift{
      from{ transform:scale(1.14) translateY(-6%); }
      to{   transform:scale(1.14) translateY(6%); }
    }
  }
}

/* ============================================================================
   24. „Lage & Anreise" — seiten-eigene Bausteine (Claude-Design-Handoff)
   ========================================================================== */

/* Freistehendes Eyebrow ohne H2 (Fortsetzungs-Abschnitt).
   Ocker = wie ein „eröffnendes" Label, --muted (--ink2) = untergeordnet. */
.eyebrow--standalone{ display:block; margin:0 0 .7rem; }
.eyebrow--muted{ color:var(--ink2); }

/* Anreise-Dreiblock — drei parallele Varianten, nur Haarlinie oben, KEIN Kasten */
.variants{
  display:flex; flex-wrap:wrap; gap:1.75rem 2rem;
  margin-top:2.25rem; max-width:none;
}
.variants > .variant{
  flex:1 1 14rem; min-width:0;
  border-top:1px solid var(--line); padding-top:.9rem;
}
.variant > .eyebrow{ margin:0 0 .55rem; }
.variant-lead{ margin:0 0 .6rem; max-width:none; font-size:1.0625rem; line-height:1.4; }
.variant-note{ margin:0; max-width:none; font-size:.9375rem; line-height:1.6; color:var(--ink2); }
/* Betreiber-/Quellzeile je Variante — Mono, klein, --ink2 (wie .margin-note) */
.variant-src{
  margin:.7rem 0 0; max-width:none;
  font-family:var(--font-mono); font-size:var(--fs-label); line-height:1.5;
  text-transform:uppercase; letter-spacing:.12em; color:var(--ink2);
}
.variant-src a{ color:var(--brick); text-decoration:none; }

/* Mono-Ortsmarke im Fließtext (statt Mini-H3) — einmal pro Seite */
.ortsmarke{
  font-family:var(--font-mono); font-weight:400; font-size:var(--fs-label); line-height:1;
  text-transform:uppercase; letter-spacing:.12em; color:var(--ochre);
}

/* Karte — größtes Element nach dem Hero, volle Rahmenbreite. Statisches
   16:9-Bild (selbst gehostet, keine Fremd-Requests). Bis das echte
   Kartenbild vorliegt liefert der Platzhalter-Generator ein JPEG. */
.lagemap{ margin:0; }
.lagemap picture{ display:block; }
.lagemap img{
  width:100%; aspect-ratio:16 / 9; object-fit:cover;
  margin-top:2rem; border:1px solid var(--line);
}
.lagemap-cap,
.lagemap-link,
.lagemap-attr{
  font-family:var(--font-mono); font-size:var(--fs-label); line-height:1.6;
  text-transform:uppercase; letter-spacing:.12em; color:var(--ink2);
}
.lagemap-cap{ margin:.7rem 0 0; }
.lagemap-link{ margin:.4rem 0 0; }
.lagemap-link a{ color:var(--brick); text-decoration:none; }
.lagemap-attr{ margin:.4rem 0 0; opacity:.8; }
.lagemap-attr a{ color:var(--ink2); }

/* Zusammenfassungs-Absatz: Vorspann-Register, ohne Eyebrow */
.lead-standalone{ max-width:34rem; font-size:1.4375rem; line-height:1.38; }
@media (max-width:48em){ .lead-standalone{ font-size:1.25rem; } }
/* Variante über die volle Rahmenbreite (grid-column-Eintrag in Abschnitt 4 für .page).
   .page p{max-width:reading} (0,1,1) überstimmen – daher der p-Selektor. */
.page p.lead-standalone--wide{ max-width:none; text-wrap:pretty; }
/* Startseite (.home): kein grid-column-Eintrag nötig – Kinder sind schon rahmenbreit,
   nur die Basisbreite von .lead-standalone selbst muss weichen. */
.home .lead-standalone--wide{ max-width:none; text-wrap:pretty; }

/* Marginalie mit Mono-Notiz statt Link (Gewähr-Vorbehalt neben den Zahlen).
   Mehrere Notizen stapeln mit etwas Abstand, statt inline zu fließen. */
.margin-note{
  display:block;
  font-family:var(--font-mono); font-size:var(--fs-label); line-height:1.5;
  text-transform:uppercase; letter-spacing:.12em; color:var(--ink2);
}
.margin-note + .margin-note{ margin-top:.5rem; }
.margin-note a{ color:var(--brick); text-decoration:none; }

/* Tabellen „Vrboska zu Fuß" & „Mit dem Auto": Zeit-Spalte zurückgenommen — wie die
   Ebenen-Spalte auf „Das Apartment", damit die Zielnamen führen. Letzte Spalte ohne rechten Rand. */
.wide--fusswege td:nth-child(2),
.wide--autofahrten td:nth-child(2){ color:var(--ink2); }
:is(.wide--fusswege, .wide--autofahrten) :is(th,td):last-child{ padding-right:0; }

/* ============================================================================
   25. „Umgebung" — seiten-eigene Bausteine (Claude-Design-Handoff)
   ========================================================================== */

/* Bildwechsel — ein Full-Bleed-Bildplatz (21/9), Legenden darunter als Umschalter.
   Ohne JS: erstes Bild sichtbar (übrige [hidden]), Legenden als normaler Text. */
main > article.page > .bildwechsel{ margin-top:3.5rem; }
.bildwechsel figure{ margin:0; }
.bildwechsel-slot{ width:100vw; margin-inline:calc(50% - 50vw); }
.bildwechsel-slot picture{ display:block; }
.bildwechsel-slot img{ display:block; width:100%; aspect-ratio:21 / 9; object-fit:cover; }
.bildwechsel-cap{ max-width:var(--frame); margin-inline:auto; padding-inline:var(--pad); }
.bildwechsel-cap figcaption{ display:flex; flex-wrap:wrap; gap:0 1.5rem; margin-top:.2rem; }
.bildwechsel-tab{
  display:inline-flex; align-items:center; min-height:2.75rem;
  border:0; background:transparent; padding:.5rem 0; cursor:pointer; text-align:left;
  font-family:var(--font-mono); font-size:var(--fs-label); line-height:1.5;
  text-transform:uppercase; letter-spacing:.12em; color:var(--ink2);
}
.bildwechsel-tab > span{ border-bottom:1px solid transparent; padding-bottom:.25rem; }
.bildwechsel-tab:hover{ color:var(--ink); }
.bildwechsel-tab[aria-pressed="true"]{ color:var(--ink); }
.bildwechsel-tab[aria-pressed="true"] > span{ border-bottom-color:var(--brick); }
.bildwechsel-tab:focus-visible{ outline:2px solid var(--brick); outline-offset:3px; }

/* {% abschluss %} rendert .closing INNERHALB des Seitenrasters (der partial-Abschluss
   ist dagegen Kind von <main>). Auf Rahmenbreite spannen, eigenes Padding weg –
   den Boden übernimmt das padding-block von article.page. */
main > article.page > .closing{
  grid-column:frame-start / frame-end;
  max-width:none; padding-inline:0; padding-bottom:0; margin-top:5rem;
}

/* Schmaler Inline-Hinweis im Fließtext (statt des großen note-Kastens) */
main > article.page > .note--inline{ margin-top:2rem; }
.note--inline{
  max-width:var(--reading);
  border-top:0; border-left:1px solid var(--line);
  padding:.15rem 0 .15rem 1.1rem;
}
.note--inline p{ margin:0; max-width:none; font-size:1rem; line-height:1.62; color:var(--ink2); }
.note--inline strong{ color:var(--ink); font-weight:500; }

/* Überschrift mit Haltung in einer Bleed-Zone: h2/h3 auf Sektions-Kopf-Größe,
   Eyebrow (accent/ocker) dicht darüber. */
.bleed-right > .col-text > :is(h2,h3),
.bleed-left > .col-text > :is(h2,h3){
  margin:0;
  font-family:var(--font-head); font-weight:400;
  font-size:clamp(1.6rem, 3.2vw, 2.15rem); line-height:1.18; letter-spacing:-.01em;
}
.bleed-right > .col-text > .eyebrow--standalone,
.bleed-left > .col-text > .eyebrow--standalone{ margin-bottom:0; }
.bleed-right > .col-text > .eyebrow--standalone + :is(h2,h3),
.bleed-left > .col-text > .eyebrow--standalone + :is(h2,h3){ margin-top:.7rem; }
.bleed-right > .col-text > :is(h2,h3) + *,
.bleed-left > .col-text > :is(h2,h3) + *{ margin-top:1.15rem; }

/* ============================================================================
   26. „Lage & Anreise" — „Der Ort": einmaliger H3-Block mit zwei Textregistern.
   Kein Muster zum Ausrollen (Handoff 4.9.). Kommt nach Abschnitt 25, damit die
   ort-spezifischen Regeln die generischen Bleed-Regeln überstimmen.
   ========================================================================== */
.bleed--ort > .col-text > h3{
  margin:0 0 1rem;
  font-family:var(--font-head); font-weight:400;
  font-size:clamp(1.45rem, 2.8vw, 1.95rem);
  line-height:1.2; letter-spacing:-.01em;
}
.bleed--ort > .col-text > .ort-lead{
  margin:0; max-width:none;
  font-size:1.1875rem; line-height:1.62; color:var(--ink);
}
.bleed--ort > .col-text > .ort-info{
  margin:1.15rem 0 0; max-width:none;
  font-size:.9375rem; line-height:1.65; color:var(--ink2);
}

/* ============================================================================
   27. „Aktivitäten" — seiten-eigene Bausteine (Claude-Design-Handoff)
   ========================================================================== */

/* Eyebrow-Variante „echter Akzent" (Ziegel) — z. B. Bleed-Zone „Aufs Wasser" */
.eyebrow--accent{ color:var(--brick); }

/* Sectionhead-Variante: Eyebrow in --ink2 statt --ochre (untergeordneter Abschnitt,
   kein „eröffnendes" Kapitel — z. B. „Zwei Dinge im Ort") */
.sectionhead--muted .eyebrow{ color:var(--ink2); }

/* Panoramaband — volle Rahmenbreite (60rem), 21:9, mitten im Absatz, kein Full-Bleed.
   Genau einmal pro Seite. Zweiteilige Mono-Legende: Ortsmarke (Ocker) + Motiv (--ink2). */
.panoband{ margin:0; }
main > article.page > * + .panoband{ margin-top:2.25rem; }
main > article.page > .panoband + *{ margin-top:2.25rem; }
.panoband picture{ display:block; }
.panoband img{ display:block; width:100%; aspect-ratio:21 / 9; object-fit:cover; border-radius:0; }
.panoband-cap{
  margin-top:.6rem; display:flex; flex-wrap:wrap; gap:.35rem 1.25rem;
  font-family:var(--font-mono); font-size:var(--fs-label); line-height:1.5;
  text-transform:uppercase; letter-spacing:.12em;
}
.panoband-mark{ color:var(--ochre); }
.panoband-motif{ color:var(--ink2); }

/* Kleines Register für einen zweiten Absatz in einer Bleed-Zone (wie „Der Ort" auf Lage) */
.reg-small{ font-size:.9375rem; line-height:1.65; color:var(--ink2); max-width:none; }

/* Text nach dem versetzten Bildpaar etwas enger binden (Zone „Zwei Dinge im Ort") */
main > article.page > .pairstagger + p{ margin-top:2.25rem; }

/* ---------- Verfügbarkeitskalender ({% availabilityCalendar %}) --------- */
/* Reine Server-/Build-Ausgabe (availability.js + Shortcode in .eleventy.js),
   kein JS nötig. Tabellen statt Grid, damit Screenreader Wochentag ↔ Tag
   sauber zuordnen (<th scope="col">). */

.avail-intro{ max-width:var(--reading); }

.avail-legend{
  display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1.25rem;
  margin-top:1.1rem;
  font-family:var(--font-mono); font-size:var(--fs-ui);
  text-transform:uppercase; letter-spacing:.08em; color:var(--ink2);
}
.avail-swatch{
  display:inline-block; width:.8em; height:.8em; margin-right:.4em;
  vertical-align:-.08em; border:1px solid var(--line-strong);
}
.avail-swatch--free{ background:var(--card); }
.avail-swatch--occupied{ background:var(--panel); }

.avail-months{
  display:flex; flex-wrap:wrap; gap:2rem 2.5rem;
  margin-top:1.5rem;
}
.avail-month{ flex:1 1 15rem; max-width:19rem; }
.avail-month-title{
  font-family:var(--font-head); font-size:1.05rem; font-weight:500;
  margin:0 0 .6rem;
}
.avail-grid{
  width:100%; border-collapse:collapse;
  font-family:var(--font-mono); font-size:var(--fs-ui);
  font-variant-numeric:tabular-nums;
}
.avail-grid th{
  padding-bottom:.4rem; color:var(--ink2); font-weight:400;
  text-transform:uppercase; letter-spacing:.06em; font-size:var(--fs-label);
}
.avail-grid td{ text-align:center; padding:0; }
.avail-day{
  padding-block:.5rem; background:var(--card); border:1px solid var(--line);
  color:var(--ink);
}
.avail-day.is-occupied{ background:var(--panel); color:var(--ink2); }
.avail-pad{ border:none; }

.avail-updated{
  margin-top:1.5rem;
  font-family:var(--font-mono); font-size:var(--fs-label); color:var(--ink2);
}

.avail-unavailable{
  max-width:var(--reading); color:var(--ink2);
}