/* ---------------------------------------------------------------
   Gasperhof, Schärfen am Tegernsee
   Gestaltung auf Basis des Templates „Patara“ (DuruThemes):
   Schriften, Abstände, Buttons, Zimmerkarten und Fußzeile folgen
   dem Template, Farben und Komponenten sind für den Hof angepasst.

   01 Schriften        08 Wohnungen (Startseite)   15 Galerie
   02 Farben, Maße     09 Hausspruch               16 Geschichte
   03 Grundlagen       10 Ein Jahr am Hof          17 Lage & Anreise
   04 Überschriften    11 Lage (Startseite)        18 Kontakt, Formular
   05 Buttons, Links   12 Kaufoption               19 Textseiten
   06 Navigation       13 Fußzeile                 20 Lightbox
   07 Hero, Banner     14 Wohnungen, Details       21 Bewegung, Responsive
--------------------------------------------------------------- */


/* ======= 01 Schriften (lokal, keine Verbindung zu Google) ======= */
@font-face {
    font-family: 'Libre Caslon Display';
    src: url('../fonts/libre-caslon-display-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Libre Caslon Text';
    src: url('../fonts/libre-caslon-text-400-italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
/* Der Name „Gasperhof“ in der Schrift der Hauswand: Fraktur, auf die Buchstaben
   des Namens reduziert (aus UnifrakturMaguntia, SIL Open Font License) */
@font-face {
    font-family: 'Gasperhof Fraktur';
    src: url('../fonts/gasperhof-fraktur.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0047, U+0061, U+0065, U+0066, U+0068, U+006F, U+0070, U+0072, U+0073;
}
@font-face {
    font-family: 'Outfit';
    src: url('../fonts/outfit-variable.woff2') format('woff2');
    font-weight: 200 700;
    font-style: normal;
    font-display: swap;
}


/* ======= 02 Farben und Maße ======= */
:root {
    /* aus dem Haus abgeleitet: Kalkputz, Altholz, Geranien */
    --paper: #f4f2ee;
    --paper-deep: #ebe7e0;
    --surface: #fbfaf8;
    --ink: #1f1c1a;
    --text: #45403b;
    --muted: #6b645d;
    --line: #d8d1c6;
    --accent: #922b21;          /* Bauernrot, Nachfolger des alten #990000 */
    --accent-hover: #741f17;
    --wood: #24201d;
    --on-dark: #ece7e0;
    --on-dark-muted: #b3aba1;
    --accent-on-dark: #e3a08f;
    --water: #c9d4d6;

    --font-display: 'Libre Caslon Display', 'Times New Roman', serif;
    --font-italic: 'Libre Caslon Text', Georgia, serif;
    --font-body: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --section-y: 120px;
    --nav-h: 88px;
    --ease: cubic-bezier(.16, 1, .3, 1);
}


/* ======= 03 Grundlagen ======= */
/* „Gasperhof“ überall wie an der Hauswand: Fraktur, das G mit rotem Schatten */
.gh {
    display: inline-block;
    font-family: 'Gasperhof Fraktur', var(--font-display);
    font-weight: 400;
    font-style: normal;
    font-size: 1.12em;
    letter-spacing: .01em;
    font-synthesis: none;
    text-transform: none;
}
/* Versatz mindestens ein ganzer Pixel, sonst verschwimmt der Schatten im Fließtext */
.gh::first-letter { text-shadow: min(-1.5px, -.05em) max(1px, .04em) 0 var(--accent); }
p .gh, li .gh, dd .gh, figcaption .gh { font-size: 1.2em; line-height: 1; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: 90px;
}
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}
body {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 330;
    line-height: 1.75;
    color: var(--text);
    background: var(--paper);
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
p {
    margin: 0 0 1em;
    color: inherit;
}
strong, b {
    font-weight: 500;
    color: var(--ink);
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.15;
    color: var(--ink);
    margin: 0 0 .5em;
    text-wrap: balance;
}
img {
    display: block;
    max-width: 100%;
    height: auto;
}
picture { display: block; }
a {
    color: var(--accent);
    text-decoration: none;
    transition: color .3s var(--ease);
}
a:hover { color: var(--accent-hover); }
::selection {
    background: var(--accent);
    color: #fff;
}
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}
.on-dark :focus-visible,
.hero :focus-visible,
.banner :focus-visible {
    outline-color: #fff;
}
.skip-link {
    position: absolute;
    left: 16px;
    top: -60px;
    z-index: 1000;
    padding: 10px 16px;
    background: var(--ink);
    color: #fff;
    font-size: 14px;
}
.skip-link:focus { top: 16px; color: #fff; }
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.container { max-width: 1170px; }
@media (min-width: 1400px) {
    .container { max-width: 1240px; }
}
.section { padding: var(--section-y) 0; }
.section--tight { padding: calc(var(--section-y) * .65) 0; }
.bg-surface { background: var(--surface); }
.bg-deep { background: var(--paper-deep); }
.measure { max-width: 38em; }
.nowrap { white-space: nowrap; }
.text-muted-gh { color: var(--muted); }
.small-print {
    font-size: 14px;
    color: var(--muted);
}


/* ======= 04 Überschriften (Patara: sub-title + section-title) ======= */
.sub-title {
    position: relative;
    display: block;
    padding: 8px 0 15px 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--accent);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--ink);
}
.sub-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 15px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
}
.sub-title small {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    letter-spacing: .02em;
    text-transform: none;
    color: var(--muted);
}
.section-title {
    font-size: 45px;
    line-height: 1.15;
    margin-bottom: 20px;
}
.section-title em {
    font-family: var(--font-italic);
    font-style: italic;
    font-size: .92em;
    color: var(--accent);
}
.section-lead {
    font-size: 18px;
    line-height: 1.7;
    max-width: 36em;
}
.kicker {
    display: block;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 14px;
}
.h-serif-sm {
    font-size: 27px;
    margin-bottom: 12px;
}


/* ======= 05 Buttons und Links (Patara: butn-dark / butn-light) ======= */
.butn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 26px;
    overflow: hidden;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: .18em;
    text-transform: uppercase;
    white-space: nowrap;
    border: 1px solid transparent;
    cursor: pointer;
    isolation: isolate;
    transition: color .3s var(--ease), border-color .3s var(--ease);
}
.butn::after {
    content: "";
    position: absolute;
    inset: 0 0 0 100%;
    z-index: -1;
    transition: left .35s var(--ease);
}
.butn:hover::after,
.butn:focus-visible::after { left: 0; }
.butn:active { transform: translateY(1px); }

.butn--accent { background: var(--accent); color: #fff; }
.butn--accent::after { background: var(--ink); }
.butn--accent:hover { color: #fff; }

.butn--light { color: #fff; border-color: rgba(255, 255, 255, .6); }
.butn--light::after { background: var(--paper); }
.butn--light:hover { color: var(--ink); border-color: var(--paper); }

.butn--paper { background: var(--paper); color: var(--ink); }
.butn--paper::after { background: var(--accent); }
.butn--paper:hover { color: #fff; }

.butn--line { color: var(--ink); border-color: var(--ink); }
.butn--line::after { background: var(--ink); }
.butn--line:hover { color: var(--paper); }

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 400;
    color: var(--accent);
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
}
.link-arrow i {
    font-size: 11px;
    transition: transform .3s var(--ease);
}
.link-arrow:hover i { transform: translateX(4px); }
.link-arrow--light { color: #fff; }
.link-arrow--light:hover { color: #fff; }


/* ======= 06 Navigation (Patara: navbar / nav-scroll) ======= */
.navbar {
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 90;
    height: var(--nav-h);
    padding: 0;
    background: transparent;
}
.navbar > .container {
    height: 100%;
    flex-wrap: nowrap;
}
.logo {
    display: inline-flex;
    flex-direction: column;
    color: #fff;
    line-height: 1;
}
.logo:hover { color: #fff; }
.logo-name {
    font-family: var(--font-display);
    font-size: 31px;
    letter-spacing: .01em;
}
.logo-place {
    margin-top: 6px;
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 400;
    letter-spacing: .34em;
    text-transform: uppercase;
    opacity: .9;
}
.navbar .navbar-nav { gap: 4px; }
.navbar .nav-link {
    position: relative;
    padding: 8px 13px !important;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 400;
    color: #fff;
}
.navbar .nav-link::after {
    content: "";
    position: absolute;
    left: 13px; right: 13px; bottom: 2px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s var(--ease);
}
.navbar .nav-link:hover,
.navbar .nav-link:focus-visible { color: #fff; }
.navbar .nav-link:hover::after,
.navbar .nav-link[aria-current="page"]::after { transform: scaleX(1); }
.navbar-toggler {
    border: 0;
    padding: 8px;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    box-shadow: none !important;
}
/* Seiten ohne Bild im Kopf: Navigation von Anfang an dunkel */
.nav-solid .navbar {
    position: sticky;
    top: 0;
    background: rgba(244, 242, 238, .96);
    border-bottom: 1px solid var(--line);
}
.nav-solid .navbar .logo,
.nav-solid .navbar .nav-link,
.nav-solid .navbar-toggler { color: var(--ink); }

/* nach dem Scrollen: fest, hell (Patara: nav-scroll) */
.navbar.nav-scroll {
    position: fixed;
    height: 72px;
    background: rgba(244, 242, 238, .96);
    box-shadow: 0 6px 24px rgba(36, 32, 29, .07);
    animation: nav-in .45s var(--ease);
}
@supports (backdrop-filter: blur(10px)) {
    .navbar.nav-scroll {
        background: rgba(244, 242, 238, .86);
        backdrop-filter: blur(12px) saturate(140%);
    }
}
@keyframes nav-in {
    from { transform: translateY(-100%); }
    to { transform: none; }
}
.navbar.nav-scroll .logo,
.navbar.nav-scroll .nav-link,
.navbar.nav-scroll .navbar-toggler { color: var(--ink); }
.navbar.nav-scroll .nav-link:hover,
.navbar.nav-scroll .nav-link[aria-current="page"] { color: var(--accent); }
.navbar.nav-scroll .logo-name { font-size: 27px; }
.nav-sentinel {
    position: absolute;
    top: 0; left: 0;
    width: 1px;
    height: 140px;
    pointer-events: none;
}

@media (max-width: 991.98px) {
    :root { --nav-h: 76px; }
    .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0; right: 0;
        padding: 12px 24px 24px;
        background: var(--paper);
        border-bottom: 1px solid var(--line);
        box-shadow: 0 18px 30px rgba(36, 32, 29, .08);
    }
    .navbar .navbar-collapse .nav-link {
        color: var(--ink) !important;
        padding: 12px 0 !important;
        font-size: 18px;
        border-bottom: 1px solid var(--line);
    }
    .navbar .navbar-collapse .nav-item:last-child .nav-link { border-bottom: 0; }
    .navbar .navbar-collapse .nav-link::after { display: none; }
    .navbar .navbar-collapse .nav-link[aria-current="page"] { color: var(--accent) !important; }
    .logo-name { font-size: 27px; }
}


/* ======= 07 Hero (Startseite) und Banner (Unterseiten) ======= */
.hero,
.banner {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: var(--wood);
}
.hero {
    min-height: 640px;
    height: 100vh;
    height: 100svh;
    max-height: 1100px;
}
.banner {
    height: 62vh;
    min-height: 440px;
    max-height: 640px;
}
.banner--short {
    height: 46vh;
    min-height: 360px;
}
.hero-media,
.banner-media {
    position: absolute;
    inset: 0;
}
.hero-media img,
.banner-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero-shade,
.banner-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom, rgba(24, 20, 17, .58) 0%, rgba(24, 20, 17, .18) 22%, rgba(24, 20, 17, 0) 34%),
        linear-gradient(to top, rgba(24, 20, 17, .78) 0%, rgba(24, 20, 17, .42) 34%, rgba(24, 20, 17, 0) 62%);
}
/* über hellen Fotos (Blüten, Schnee) bleibt die Navigation lesbar */
.navbar:not(.nav-scroll) .logo,
.navbar:not(.nav-scroll) .nav-link {
    text-shadow: 0 1px 14px rgba(24, 20, 17, .45);
}
.nav-solid .navbar .logo,
.nav-solid .navbar .nav-link { text-shadow: none; }
/* auf dem Hero zusätzlich links abdunkeln, damit der Text ruhig steht */
.hero-shade {
    background:
        linear-gradient(to right, rgba(24, 20, 17, .5) 0%, rgba(24, 20, 17, .22) 38%, rgba(24, 20, 17, 0) 60%),
        linear-gradient(to bottom, rgba(24, 20, 17, .5) 0%, rgba(24, 20, 17, 0) 24%),
        linear-gradient(to top, rgba(24, 20, 17, .7) 0%, rgba(24, 20, 17, .3) 34%, rgba(24, 20, 17, 0) 60%);
}
.hero-content,
.banner-content {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding-bottom: 76px;
}
.banner-content { padding-bottom: 56px; }
.hero .kicker,
.banner .kicker {
    color: rgba(255, 255, 255, .88);
    margin-bottom: 18px;
}
.hero h1 {
    max-width: 12em;
    font-size: clamp(42px, 5.6vw, 76px);
    line-height: 1.06;
    color: #fff;
    margin-bottom: 22px;
    letter-spacing: .005em;
}
.banner h1 {
    font-size: clamp(40px, 4.6vw, 62px);
    line-height: 1.08;
    color: #fff;
    margin: 0;
}
.hero-lead {
    max-width: 31em;
    font-size: 18px;
    line-height: 1.65;
    color: rgba(255, 255, 255, .92);
    margin-bottom: 34px;
}
.banner-lead {
    max-width: 34em;
    margin: 16px 0 0;
    font-size: 17px;
    color: rgba(255, 255, 255, .9);
}
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 30px;
}
.photo-credit-note {
    position: absolute;
    right: 24px;
    bottom: 20px;
    margin: 0;
    font-size: 12px;
    color: rgba(255, 255, 255, .7);
}


/* ======= 08 Der Hof (Startseite) und Wohnungen-Übersicht ======= */
.intro-facts {
    display: flex;
    align-items: stretch;
    margin-top: 34px;
    background: var(--surface);
    box-shadow: 0 20px 40px rgba(36, 32, 29, .06);
}
.intro-facts .fact-year {
    display: flex;
    align-items: center;
    padding: 18px 22px;
    font-family: var(--font-display);
    font-size: 40px;
    line-height: 1;
    color: var(--accent);
    border-right: 1px solid var(--line);
}
.intro-facts .fact-text {
    padding: 18px 22px;
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    align-self: center;
}
.collage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}
.collage figure { margin: 0; }
.collage .c1 { width: 78%; justify-self: end; margin-top: 26%; }
.collage .c2 { width: 100%; }
.collage .c3 { width: 56%; justify-self: end; }
.collage .c4 { width: 82%; }
.collage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.collage .c1 img { aspect-ratio: 4 / 5; }
.collage .c2 img { aspect-ratio: 3 / 4; }
.collage .c3 img { aspect-ratio: 1 / 1; }
.collage .c4 img { aspect-ratio: 4 / 3; }

/* Wohnungen als asymmetrisches Raster: eine große, zwei kleine Karten */
.units {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 40px 36px;
    margin-top: 56px;
}
.unit { position: relative; display: flex; flex-direction: column; }
.unit--feature { grid-row: 1 / 3; }
.unit-media {
    display: block;
    overflow: hidden;
    background: var(--paper-deep);
    flex: 1;
}
.unit-media picture { height: 100%; }
.unit-media img {
    width: 100%;
    height: 100%;
    min-height: 220px;
    object-fit: cover;
    transition: transform .8s var(--ease);
}
.unit:hover .unit-media img { transform: scale(1.04); }
/* weiße Karte überlappt das Bild (Patara: rooms1-content) */
.unit-card {
    position: relative;
    z-index: 2;
    margin: -64px 28px 0;
    padding: 26px 30px 24px;
    background: var(--surface);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 24px;
    align-items: end;
}
.unit-title {
    font-family: var(--font-display);
    font-size: 27px;
    line-height: 1.15;
    margin: 0;
}
.unit-title a { color: var(--ink); }
.unit-title a:hover { color: var(--accent); }
.unit-meta {
    grid-column: 1;
    margin: 0;
    font-size: 15px;
    color: var(--muted);
}
.unit-price {
    grid-column: 2;
    grid-row: 1 / 3;
    text-align: right;
    font-size: 14px;
    line-height: 1.3;
    color: var(--muted);
}
.unit-price .price {
    display: block;
    font-family: var(--font-display);
    font-size: 30px;
    line-height: 1.1;
    color: var(--accent);
}
.unit-price .status {
    display: block;
    font-size: 14px;
    color: var(--muted);
    max-width: 9em;
}
.unit--feature .unit-card { margin-top: -84px; padding: 32px 36px 30px; }
.unit--feature .unit-title { font-size: 34px; }
.units-note {
    margin: 30px 0 0;
    color: var(--muted);
    font-size: 15px;
}


/* ======= 09 Hausspruch (Patara: Promo-Abschnitt mit Bild) ======= */
.house-saying {
    position: relative;
    padding: 150px 0;
    color: #fff;
    overflow: hidden;
    background: var(--wood);
}
.house-saying .saying-media { position: absolute; inset: 0; }
.house-saying .saying-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 82%;
}
.house-saying::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(24, 20, 17, .62);
}
.house-saying .container { position: relative; z-index: 2; }
.saying {
    margin: 0 auto;
    max-width: 780px;
    padding: 0;
    background: none;
    text-align: center;
}
.saying p {
    font-family: var(--font-italic);
    font-style: italic;
    font-size: clamp(26px, 3.2vw, 40px);
    line-height: 1.4;
    color: #fff;
    margin: 0;
}
.saying footer {
    margin-top: 30px;
    font-size: 12px;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .82);
}


/* ======= 10 Ein Jahr am Hof (horizontale Bildreihe) ======= */
.year-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 48px;
}
.year-head .section-title { margin-bottom: 10px; }
.year-head p { margin: 0; max-width: 32em; }
.year-controls { display: flex; gap: 8px; }
.year-controls button {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 1px solid var(--ink);
    background: transparent;
    color: var(--ink);
    font-size: 12px;
    transition: background .3s var(--ease), color .3s var(--ease);
}
.year-controls button:hover { background: var(--ink); color: var(--paper); }
.year-controls button:disabled { opacity: .3; pointer-events: none; }
.year-track {
    --gutter: max(16px, calc((100vw - 1170px) / 2 + 12px));
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: clamp(250px, 26vw, 340px);
    gap: 28px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--gutter);
    padding: 0 var(--gutter) 18px;
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
}
@media (min-width: 1400px) {
    .year-track { --gutter: calc((100vw - 1240px) / 2 + 12px); }
}
.year-item {
    margin: 0;
    scroll-snap-align: start;
}
.year-item img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}
.year-item figcaption {
    padding-top: 16px;
    font-size: 15px;
    line-height: 1.5;
}
.year-month {
    display: block;
    font-family: var(--font-display);
    font-size: 24px;
    color: var(--ink);
    margin-bottom: 2px;
}


/* ======= 11 Lage (Startseite) ======= */
.distances {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px 28px;
    margin: 34px 0 30px;
}
.distance { margin: 0; }
.distance dt {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 40px;
    line-height: 1;
    color: var(--ink);
}
.distance dt small {
    font-family: var(--font-body);
    font-size: 15px;
    margin-left: 4px;
    color: var(--muted);
}
.distance dd {
    margin: 8px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--line);
    font-size: 15px;
    line-height: 1.5;
}
.lage-image img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}


/* ======= 12 Kaufoption (Band) ======= */
.sale-band {
    padding: 90px 0;
    background: var(--paper-deep);
}
.sale-band .section-title { font-size: 38px; margin-bottom: 14px; }
.sale-band p { margin: 0; max-width: 34em; }


/* ======= 13 Fußzeile (Patara: footer top / bottom) ======= */
.footer {
    padding: 96px 0 0;
    background: var(--wood);
    color: var(--on-dark-muted);
}
.footer .logo { color: var(--on-dark); margin-bottom: 24px; }
.footer .logo-name { font-size: 34px; }
.footer p { color: var(--on-dark-muted); }
.footer h2 {
    font-family: var(--font-display);
    font-size: 26px;
    color: var(--on-dark);
    margin-bottom: 20px;
}
.footer a { color: var(--on-dark); }
.footer a:hover { color: var(--accent-on-dark); }
.footer .phone {
    display: block;
    font-size: 21px;
    color: var(--on-dark);
    margin-bottom: 6px;
}
.footer .mail--big { font-size: 21px; margin-bottom: 14px; }
.footer .footer-note { margin: 0; }
.footer .mail {
    position: relative;
    display: inline-block;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--accent-on-dark);
}
.footer-list { list-style: none; padding: 0; margin: 0; }
.footer-list li + li { margin-top: 6px; }
.footer-list a { display: inline-block; transition: transform .35s var(--ease), color .3s; }
.footer-list a:hover { transform: translateX(5px); }
.footer .bottom {
    margin-top: 70px;
    padding: 26px 0 30px;
    border-top: 1px solid rgba(236, 231, 224, .1);
    font-size: 14px;
}
.footer .bottom p { margin: 0; }
.footer .bottom ul {
    display: flex;
    gap: 26px;
    justify-content: flex-end;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Zurück nach oben (Patara: progress-wrap)
   Runder Knopf, der Ring füllt sich mit dem Scrollfortschritt. Das läuft rein
   über CSS (animation-timeline). Browser ohne diese Funktion zeigen nur den Ring. */
.to-top {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 80;
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(251, 250, 248, .9);
    color: var(--ink);
    box-shadow: 0 10px 28px rgba(36, 32, 29, .16), 0 2px 6px rgba(36, 32, 29, .08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px) scale(.86);
    transition: opacity .45s var(--ease), transform .45s var(--ease), visibility .45s,
        background-color .3s var(--ease), color .3s var(--ease);
    -webkit-tap-highlight-color: transparent;
}
@supports (backdrop-filter: blur(8px)) {
    .to-top {
        background: rgba(251, 250, 248, .72);
        backdrop-filter: blur(10px) saturate(140%);
    }
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top i {
    position: relative;
    font-size: 15px;
    line-height: 1;
    transition: transform .4s var(--ease);
}
.to-top-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    pointer-events: none;
}
.to-top-ring circle { fill: none; }
.to-top-track { stroke: rgba(36, 32, 29, .12); stroke-width: 1.5; }
.to-top-bar {
    stroke: var(--accent);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
}
@supports (animation-timeline: scroll()) {
    .to-top-bar {
        animation: to-top-fill linear both;
        animation-timeline: scroll(root block);
    }
}
@keyframes to-top-fill { to { stroke-dashoffset: 0; } }
/* liegt in der Fußzeile: deren helle Linkfarbe hier nicht übernehmen */
.footer .to-top { color: var(--ink); }
.footer .to-top:hover,
.footer .to-top:focus-visible { color: var(--accent); background: rgba(251, 250, 248, .96); }
.to-top:hover i { transform: translateY(-3px); }
.to-top:active { transform: scale(.93); transition-duration: .12s; }
/* Beschriftung, die bei Mauszeigern links herausgleitet */
.to-top-label {
    position: absolute;
    right: calc(100% + 10px);
    top: 50%;
    padding: 7px 12px;
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 6px 18px rgba(36, 32, 29, .18);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    transform: translate(6px, -50%);
    transition: opacity .3s var(--ease), transform .3s var(--ease);
    pointer-events: none;
}
@media (hover: hover) {
    .to-top:hover .to-top-label,
    .to-top:focus-visible .to-top-label { opacity: 1; transform: translate(0, -50%); }
}
/* auf dem Handy aus dem Weg, solange das Formular im Bild ist (deckt sonst Feldränder ab) */
@media (max-width: 767.98px) {
    body.form-in-view .to-top.is-visible {
        opacity: 0;
        visibility: hidden;
        transform: translateY(16px) scale(.86);
    }
}
/* beim Ausfüllen eines Formulars aus dem Weg (Tastatur auf dem Handy) */
body:has(.js-inquiry :is(input, select, textarea):focus) .to-top.is-visible {
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px) scale(.86);
}


/* ======= 14 Wohnungen und Ferienwohnung ======= */
.unit-row + .unit-row { margin-top: 110px; }
.unit-row .owl-carousel .owl-stage-outer { overflow: hidden; }
.unit-gallery img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.unit-gallery--tall img { aspect-ratio: 4 / 5; }
/* Karussell etwas höher, damit Bild und Infotafel gleich hoch stehen */
.unit-row .js-slider img { aspect-ratio: 5 / 4; }
.unit-panel {
    height: 100%;
    padding: 44px 44px 40px;
    background: var(--surface);
}
.unit-panel h3 {
    font-size: 34px;
    margin-bottom: 8px;
}
.unit-panel .unit-sub {
    font-size: 15px;
    color: var(--muted);
    margin-bottom: 22px;
}
.facts {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: start;
    gap: 6px 34px;
    margin: 0 0 26px;
}
.facts div { margin: 0; }
.facts dt {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 26px;
    color: var(--ink);
    line-height: 1.1;
}
.facts dd {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--muted);
}
.room-list {
    columns: 2;
    column-gap: 30px;
    list-style: none;
    padding: 0;
    margin: 0 0 26px;
}
.room-list li {
    break-inside: avoid;
    position: relative;
    padding-left: 18px;
    font-size: 15px;
    line-height: 1.55;
    margin-bottom: 6px;
}
.room-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .75em;
    width: 8px;
    height: 1px;
    background: var(--accent);
}
.price-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 14px;
    padding-top: 22px;
    margin-bottom: 26px;
    border-top: 1px solid var(--line);
}
.price-line .price {
    font-family: var(--font-display);
    font-size: 34px;
    line-height: 1;
    color: var(--accent);
}
.price-line .price-note {
    font-size: 14px;
    color: var(--muted);
}
.status-pill {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid var(--line);
    font-size: 13px;
    letter-spacing: .04em;
    color: var(--muted);
}
.unit-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 26px;
}
.thumbs {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-top: 10px;
}
.thumbs a { display: block; overflow: hidden; }
.thumbs img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform .6s var(--ease), opacity .3s;
}
.thumbs a:hover img { transform: scale(1.06); }
.thumbs-note {
    margin: 12px 0 0;
    font-size: 13px;
    color: var(--muted);
}
.einlieger {
    padding: 40px 44px;
    border: 1px solid var(--line);
}

.thumbs--6 { grid-template-columns: repeat(6, 1fr); }
.h-list {
    margin: 0 0 10px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 450;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted);
}
.mosaic {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.mosaic a { display: block; overflow: hidden; background: var(--paper-deep); }
.mosaic img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform .7s var(--ease);
}
.mosaic a:hover img { transform: scale(1.04); }

/* Karussell in Wohnungen und Ferienwohnung (Patara: rooms2 owl-nav) */
.js-slider { position: relative; }
/* Vor dem Start von Owl: erste Folie zeigen statt nichts, kein Springen beim Laden */
.owl-carousel.js-slider:not(.owl-loaded) { display: block; }
.owl-carousel.js-slider:not(.owl-loaded) > :not(:first-child) { display: none; }
.js-slider.owl-theme .owl-nav { margin: 0; }
.js-slider.owl-theme .owl-nav [class*=owl-] {
    position: absolute;
    top: 50%;
    width: 46px;
    height: 46px;
    margin: 0;
    display: grid;
    place-items: center;
    border-radius: 0;
    background: var(--surface);
    color: var(--ink);
    font-size: 12px;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity .3s var(--ease), background .3s, color .3s;
}
.js-slider.owl-theme .owl-nav .owl-prev { left: 16px; }
.js-slider.owl-theme .owl-nav .owl-next { right: 16px; }
.js-slider.owl-theme:hover .owl-nav [class*=owl-],
.js-slider.owl-theme .owl-nav [class*=owl-]:focus-visible { opacity: 1; }
.js-slider.owl-theme .owl-nav [class*=owl-]:hover { background: var(--accent); color: #fff; }
.js-slider.owl-theme .owl-nav .disabled { opacity: 0 !important; pointer-events: none; }
.js-slider.owl-theme .owl-dots {
    position: absolute;
    left: 0; right: 0; bottom: 14px;
    margin: 0 !important;
    text-align: center;
    line-height: 0;
}
.js-slider.owl-theme .owl-dots .owl-dot {
    display: inline-block;
    padding: 6px 2px;
    border: 0;
    background: none;
}
.js-slider.owl-theme .owl-dots .owl-dot span {
    display: block;
    width: 8px;
    height: 8px;
    margin: 0 3px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, .55);
    box-shadow: 0 0 6px rgba(24, 20, 17, .35);
    transition: background .3s;
}
.js-slider.owl-theme .owl-dots .owl-dot.active span,
.js-slider.owl-theme .owl-dots .owl-dot:hover span { background: #fff; }
@media (hover: none) {
    .js-slider.owl-theme .owl-nav [class*=owl-] { opacity: 1; }
}

/* Grundrisse */
.plans {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 28px;
}
.plan { grid-column: span 6; margin: 0; }
.plan--narrow { grid-column: span 3; }
.plan a.plan-img {
    display: block;
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    transition: border-color .3s var(--ease);
}
.plan a.plan-img:hover { border-color: var(--ink); }
.plan img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: contain;
}
.plan--narrow img { aspect-ratio: 3 / 4; }
.plan-inline { margin: 56px 0 0; }
.plan-inline a.plan-img {
    display: block;
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--line);
}
.plan-inline img { width: 100%; }

/* Preise und Bedingungen, Entfernungen, Flächen */
.terms { margin-top: 56px; }
.terms-list,
.dist-table {
    margin: 0;
    display: grid;
    gap: 0;
}
.terms-list > div,
.dist-table > div {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    padding: 11px 0;
}
.terms-list > div + div,
.dist-table > div + div { border-top: 1px solid var(--line); }
.terms-list dt,
.dist-table dt { font-weight: 400; color: var(--ink); }
.terms-list dd,
.dist-table dd { margin: 0; color: var(--text); text-align: right; }
.terms-list { max-width: 560px; }
.dist-groups {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
}
.dist-table--units dd {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--accent);
}
.then-now {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: start;
}
.then-now img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}
.madonna img { width: 180px; }
.banner-media--abend img { object-position: 50% 58%; }
.plan figcaption {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 16px;
    padding-top: 14px;
    font-size: 15px;
}
.plan figcaption strong { font-weight: 450; }
.plan figcaption a { font-size: 14px; }

/* Ferienwohnung: Kopf mit Bildreihe (Patara: room-details) */
.detail-head {
    position: relative;
    padding: calc(var(--nav-h) + 70px) 0 90px;
    background: var(--wood);
    color: var(--on-dark-muted);
}
.detail-head h1 {
    font-size: clamp(40px, 4.4vw, 58px);
    color: var(--on-dark);
    margin-bottom: 18px;
}
.detail-head .kicker { color: var(--accent-on-dark); }
.detail-head p { color: var(--on-dark-muted); font-size: 17px; }
.detail-head .facts dt { color: var(--on-dark); }
.detail-head .facts dd { color: var(--on-dark-muted); }
.detail-head .price-line { border-top-color: rgba(236, 231, 224, .14); }
.detail-head .price-line .price { color: var(--on-dark); }
.detail-head .price-line .price-note { color: var(--on-dark-muted); }
.detail-slider .owl-dots { margin-top: 18px !important; text-align: left; }
.detail-slider img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.feature-groups {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 34px 32px;
    margin-top: 40px;
}
.feature-groups h3 {
    font-size: 22px;
    margin-bottom: 12px;
}
.feature-groups ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.feature-groups li {
    position: relative;
    padding-left: 18px;
    margin-bottom: 6px;
    font-size: 15px;
    line-height: 1.6;
}
.feature-groups li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .8em;
    width: 8px;
    height: 1px;
    background: var(--accent);
}
.side-box {
    position: sticky;
    top: 100px;
    padding: 34px 34px 30px;
    background: var(--surface);
    box-shadow: 0 24px 50px rgba(36, 32, 29, .07);
}
.side-box h2 {
    font-size: 28px;
    margin-bottom: 6px;
}


/* ======= 15 Galerie ======= */
.gallery-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 8px;
    margin-bottom: 44px;
}
.gallery-filter button {
    padding: 10px 18px;
    border: 1px solid var(--line);
    background: transparent;
    font-size: 14px;
    color: var(--text);
    transition: border-color .3s var(--ease), background .3s, color .3s;
}
.gallery-filter button:hover { border-color: var(--ink); }
.gallery-filter button[aria-pressed="true"] {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}
.gallery-filter .count {
    margin-left: 6px;
    font-size: 12px;
}
.gallery-grid { margin: 0 -12px; }
.gallery-grid::after { content: ""; display: block; clear: both; }
.gallery-item {
    float: left;
    width: 33.333%;
    padding: 0 12px 24px;
    margin: 0;
}
.gallery-item a {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--paper-deep);
}
.gallery-item img {
    width: 100%;
    transition: transform .7s var(--ease);
}
.gallery-item a:hover img { transform: scale(1.04); }
.gallery-item figcaption {
    padding-top: 10px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--muted);
}
.gallery-item.is-small img { max-width: 630px; }


/* ======= 16 Geschichte ======= */
.dropcap::first-letter {
    float: left;
    margin: 6px 12px 0 0;
    font-family: var(--font-display);
    font-size: 78px;
    line-height: .8;
    color: var(--accent);
}
.pull {
    margin: 0;
    padding-left: 26px;
    border-left: 1px solid var(--accent);
    font-family: var(--font-italic);
    font-style: italic;
    font-size: 25px;
    line-height: 1.45;
    color: var(--ink);
}
.timeline {
    position: relative;
    list-style: none;
    padding: 0;
    margin: 0;
}
.timeline::before {
    content: "";
    position: absolute;
    left: 150px;
    top: 10px;
    bottom: 10px;
    width: 1px;
    background: var(--line);
}
.timeline li {
    position: relative;
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 0 56px;
    padding: 0 0 46px;
}
.timeline li:last-child { padding-bottom: 0; }
.timeline li::after {
    content: "";
    position: absolute;
    left: 146px;
    top: 16px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--paper);
    border: 1px solid var(--accent);
}
.timeline .when {
    font-family: var(--font-display);
    font-size: 34px;
    line-height: 1.1;
    color: var(--ink);
    text-align: right;
    padding-right: 26px;
}
.timeline .when small {
    display: block;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--muted);
    margin-top: 4px;
}
.timeline h3 { font-size: 23px; margin: 4px 0 8px; }
.timeline p { margin: 0; max-width: 36em; }
.timeline .source {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    color: var(--muted);
}
.document {
    margin: 0;
    padding: 14px;
    background: #fff;
    box-shadow: 0 2px 2px rgba(36, 32, 29, .06), 0 24px 40px rgba(36, 32, 29, .1);
}
.document img { width: 100%; }
.document-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
}
.document-pair .document:nth-child(2) { margin-top: 48px; }
.caption {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--muted);
}
.transcript {
    margin: 0;
    padding: 30px 34px;
    background: var(--surface);
    border-left: 2px solid var(--accent);
    font-family: var(--font-italic);
    font-style: italic;
    font-size: 19px;
    line-height: 1.7;
    color: var(--ink);
}
.transcript footer {
    margin-top: 14px;
    font-family: var(--font-body);
    font-style: normal;
    font-size: 13px;
    color: var(--muted);
}
.facade-figure { margin: 0; }
.facade-figure img { width: 100%; }
.inscriptions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 34px;
    margin-top: 36px;
}
.inscription {
    margin: 0;
    padding: 0;
    background: none;
}
.inscription p {
    font-family: var(--font-italic);
    font-style: italic;
    font-size: 21px;
    line-height: 1.6;
    color: var(--ink);
    margin: 0 0 10px;
}
.inscription footer {
    font-size: 13px;
    color: var(--muted);
}


/* ======= 17 Lage & Anreise ======= */
.map-wrap {
    padding: 26px;
    background: var(--surface);
    border: 1px solid var(--line);
}
.map-tal { width: 100%; height: auto; display: block; }
.map-lake { fill: var(--water); stroke: #9fb0b4; stroke-width: 1.5; }
.map-road { fill: none; stroke: var(--ink); stroke-opacity: .28; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
/* Die Karte wird auf ca. 45 % ihrer Breite verkleinert, daher große Schriftgrade */
.map-water { font-family: var(--font-italic); font-style: italic; font-size: 40px; fill: #5d7277; }
.map-label { font-family: var(--font-body); font-size: 30px; font-weight: 400; fill: var(--ink); }
.map-label--peak { font-size: 27px; fill: #4a433d; }
.map-label--small { font-size: 24px; fill: var(--muted); }
.map-label--home { font-family: 'Gasperhof Fraktur', var(--font-display); font-size: 42px; font-weight: 400; fill: var(--ink); }
.map-label--home .map-sub { font-family: var(--font-body); font-weight: 300; }
.map-sub { font-size: 22px; font-weight: 300; fill: var(--muted); }
.map-peak { fill: #4a433d; }
.map-place { fill: var(--surface); stroke: var(--ink); stroke-width: 2; }
.map-point { fill: var(--ink); }
.map-home { fill: var(--accent); stroke: var(--surface); stroke-width: 3; }
.map-home-ring { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-opacity: .5; }
.map-scale path, .map-north path { stroke: var(--ink); stroke-width: 2; fill: none; }
.map-scale text, .map-north text { font-family: var(--font-body); font-size: 24px; fill: var(--ink); }
.map-credit {
    margin: 12px 0 0;
    font-size: 12px;
    color: var(--muted);
}
.route-links {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 26px;
    margin-top: 10px;
}
.travel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px 56px;
}
.travel h3 {
    font-size: 26px;
    margin-bottom: 10px;
}
.travel .travel-main { grid-column: 1 / -1; }
.travel p { margin-bottom: .6em; }
.surroundings {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 44px 56px;
}
.surroundings h3 { font-size: 24px; margin-bottom: 8px; }
.surroundings .dist {
    display: block;
    font-size: 13px;
    letter-spacing: .04em;
    color: var(--muted);
    margin-bottom: 6px;
}
.link-list {
    list-style: none;
    padding: 0;
    margin: 0;
    columns: 2;
    column-gap: 40px;
}
.link-list li { break-inside: avoid; margin-bottom: 10px; }


/* ======= 18 Kontakt und Formular ======= */
/* Ansprechpartner: auf dem Handy zuerst sichtbar, große Direktknöpfe */
.contact-person {
    padding: 36px 34px 32px;
    background: var(--surface);
}
@media (min-width: 992px) {
    .contact-person { position: sticky; top: 104px; }
}
.contact-person h2 { font-size: 30px; margin-bottom: 4px; }
.contact-person .role { color: var(--muted); font-size: 15px; margin-bottom: 22px; }
.contact-actions { display: grid; gap: 10px; }
.contact-action {
    display: grid;
    grid-template-columns: 46px 1fr;
    align-items: center;
    gap: 14px;
    padding: 11px 14px 11px 11px;
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--ink);
    transition: border-color .25s var(--ease), background-color .25s var(--ease), transform .15s;
    -webkit-tap-highlight-color: transparent;
}
.contact-action i {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--accent);
    font-size: 19px;
    transition: background-color .25s, color .25s, border-color .25s;
}
.contact-action span {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-size: 16px;
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.contact-action small {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 2px;
}
.contact-action:hover { color: var(--ink); border-color: var(--ink); }
.contact-action:hover i { background: var(--accent); border-color: var(--accent); color: #fff; }
.contact-action:active { transform: scale(.985); }
.contact-fax { margin: 16px 0 0; font-size: 14px; color: var(--muted); }
/* Kontaktzeilen (Seite Kaufoption) */
.contact-lines {
    list-style: none;
    padding: 0;
    margin: 0;
}
.contact-lines li {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--line);
    font-size: 16px;
}
.contact-lines li span:first-child {
    font-size: 13px;
    letter-spacing: .06em;
    color: var(--muted);
    padding-top: 2px;
}
.contact-more { margin: 22px 0 0; }

/* Formular-Karte */
.inquiry,
.inquiry-done {
    background: var(--surface);
    padding: 44px 48px 40px;
    box-shadow: 0 24px 60px rgba(36, 32, 29, .07);
}
.inquiry-title { font-size: 40px; margin-bottom: 6px; }
.inquiry-lead { color: var(--muted); margin-bottom: 32px; }
.inq-group {
    min-width: 0;
    margin: 0 0 34px;
    padding: 0;
    border: 0;
}
.inq-legend,
.field-label {
    float: none;
    display: block;
    width: auto;
    padding: 0;
    color: var(--ink);
}
.inq-legend {
    margin: 0 0 14px;
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 400;
    line-height: 1.2;
}
.inq-legend .hint { font-family: var(--font-body); font-size: 13px; }
.field label.inq-legend { font-size: 22px; font-weight: 400; font-family: var(--font-display); margin-bottom: 4px; }
.field-label {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 450;
    line-height: 1.4;
}
.js-inquiry :is(input, textarea, fieldset) {
    scroll-margin-top: 110px;
    scroll-margin-bottom: 140px;
}

/* Anliegen als Kacheln */
.choice-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.choice {
    position: relative;
    display: block;
    margin: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.choice input,
.segmented input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
}
.choice-box {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3px;
    height: 100%;
    min-height: 78px;
    padding: 14px 46px 14px 16px;
    border: 1px solid #cfc7bb;
    background: #fdfcfa;
    transition: border-color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease), transform .15s;
}
.choice-box::after {
    content: "";
    position: absolute;
    top: 14px;
    right: 14px;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid #bdb4a7;
    background: var(--surface);
    font-family: 'themify';
    font-size: 9px;
    line-height: 1;
    color: #fff;
    transition: background-color .2s, border-color .2s;
}
.choice-title { font-size: 16px; font-weight: 450; line-height: 1.3; color: var(--ink); }
.choice-sub { font-size: 13px; line-height: 1.4; color: var(--muted); }
.choice:hover .choice-box { border-color: var(--ink); }
.choice:active .choice-box { transform: scale(.985); }
.choice input:checked + .choice-box {
    border-color: var(--accent);
    background: #fbf3f1;
    box-shadow: inset 0 0 0 1px var(--accent);
}
.choice input:checked + .choice-box::after {
    content: "\e64c";
    background: var(--accent);
    border-color: var(--accent);
}
.choice input:focus-visible + .choice-box { outline: 2px solid var(--accent); outline-offset: 2px; }
.inq-group.has-error .choice-box { border-color: rgba(146, 43, 33, .55); }

/* Reisezeitraum klappt auf, wenn „Ferienwohnung“ gewählt ist */
.collapse-block {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .5s var(--ease), opacity .35s var(--ease);
}
.collapse-block.is-open { grid-template-rows: 1fr; opacity: 1; }
.collapse-inner {
    min-height: 0;
    overflow: hidden;
    margin: -4px;
    padding: 4px;
}
.date-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.stay-summary {
    margin: 14px 0 0;
    padding: 14px 16px;
    background: var(--paper);
    border-left: 2px solid var(--accent);
    font-size: 14px;
    line-height: 1.55;
    color: var(--text);
}
.stay-summary strong {
    display: block;
    margin-bottom: 2px;
    font-size: 15px;
    font-weight: 500;
    color: var(--ink);
}
.seg-field {
    min-width: 0;
    margin: 22px 0 0;
    padding: 0;
    border: 0;
}
.segmented {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
    padding: 3px;
    border: 1px solid #c9c1b5;
    background: #fdfcfa;
}
.segmented label { position: relative; margin: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.segmented span {
    display: grid;
    place-items: center;
    min-height: 46px;
    font-size: 15px;
    color: var(--text);
    transition: background-color .25s var(--ease), color .25s var(--ease);
}
.segmented label:hover span { background: var(--paper-deep); }
.segmented input:checked + span { background: var(--ink); color: var(--paper); }
.segmented input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Eingabefelder */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 16px;
}
.form-grid .full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field label {
    margin: 0;
    font-size: 14px;
    font-weight: 450;
    color: var(--ink);
}
.field .hint { font-size: 13px; font-weight: 350; color: var(--muted); margin-left: 4px; }
.field-help { font-size: 13px; line-height: 1.45; color: var(--muted); }
.field input,
.field select,
.field textarea {
    width: 100%;
    min-height: 54px;
    padding: 14px 16px;
    border: 1px solid #c9c1b5;
    border-radius: 0;
    background: #fdfcfa;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 350;
    color: var(--ink);
    transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.field input[type="date"] {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    text-align: left;
}
.field input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.field input[type="date"]::-webkit-calendar-picker-indicator { opacity: .5; cursor: pointer; }
.field textarea {
    min-height: 140px;
    max-height: 420px;
    line-height: 1.6;
    resize: vertical;
    field-sizing: content;
}
.field input:hover:not(:focus),
.field textarea:hover:not(:focus) { border-color: #a99f92; }
.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--accent);
    background: #fffefc;
    box-shadow: 0 0 0 3px rgba(146, 43, 33, .13);
}
.field .error,
.inq-group > .error {
    display: none;
    margin: 0;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--accent);
}
.inq-group > .error { margin-top: 10px; }
.field.has-error .error,
.inq-group.has-error > .error { display: block; }
.field.has-error input,
.field.has-error textarea { border-color: var(--accent); background: #fdf6f4; }
.suggest { margin: 0; font-size: 13.5px; color: var(--text); }
.suggest button {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.hp-field {
    position: absolute !important;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Absenden */
.inquiry-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 24px;
    padding-top: 26px;
    border-top: 1px solid var(--line);
}
.butn--submit {
    min-height: 56px;
    padding: 18px 30px;
    font-size: 13px;
    justify-content: center;
}
.butn--submit i { font-size: 11px; transition: transform .3s var(--ease); }
.butn--submit:hover i { transform: translateX(4px); }
.butn--submit[aria-busy="true"] { pointer-events: none; opacity: .85; }
.butn--submit[aria-busy="true"] i { animation: send-nudge .9s var(--ease) infinite; }
@keyframes send-nudge {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(6px); }
}
.privacy-note {
    flex: 1 1 240px;
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted);
}
.form-status {
    display: none;
    margin: 18px 0 0;
    padding: 14px 16px;
    border-left: 2px solid var(--accent);
    background: #fbf1ee;
    font-size: 14.5px;
    color: var(--ink);
}
.form-status.is-visible { display: block; }

/* Bestätigung nach dem Absenden */
.done-mark {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin-bottom: 22px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 20px;
}
.done-title { font-size: 36px; margin-bottom: 12px; }
.done-title:focus { outline: none; }
.done-text { font-size: 17px; max-width: 34em; }
.done-summary { margin: 22px 0 24px; max-width: 520px; }
.done-summary > div {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 16px;
    padding: 10px 0;
    border-top: 1px solid var(--line);
    font-size: 15px;
}
.done-summary > div:last-child { border-bottom: 1px solid var(--line); }
.done-summary dt { font-weight: 400; color: var(--muted); }
.done-summary dd { margin: 0; color: var(--ink); }
.done-urgent { font-size: 14px; color: var(--muted); }
.link-button { border-top: 0; border-left: 0; border-right: 0; background: none; padding: 0 0 2px; font-family: var(--font-body); }
@media (prefers-reduced-motion: no-preference) {
    .inquiry-done:not([hidden]) .done-mark { animation: done-pop .6s var(--ease) both; }
    .inquiry-done:not([hidden]) > :not(.done-mark) { animation: rise .7s var(--ease) both; }
    @keyframes done-pop {
        from { transform: scale(.4); opacity: 0; }
        to { transform: none; opacity: 1; }
    }
}

/* Formular in der Seitenleiste der Ferienwohnung */
.side-box .inquiry,
.side-box .inquiry-done { padding: 0; background: none; box-shadow: none; }
.side-box .inquiry-lead { font-size: 15px; margin-bottom: 26px; }
.side-box .form-grid { grid-template-columns: 1fr; gap: 16px; }
.side-box .inq-group { margin-bottom: 28px; }


/* ======= 19 Textseiten (Impressum, Datenschutz, 404) ======= */
.page-head {
    padding: 80px 0 40px;
}
.page-head h1 { font-size: clamp(40px, 4.6vw, 58px); margin: 0; }
.prose {
    max-width: 46em;
    font-size: 16px;
}
.prose h2 { font-size: 30px; margin: 2em 0 .6em; }
.prose h3 { font-size: 22px; margin: 1.6em 0 .5em; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: .4em; }
.todo {
    background: #fbeee9;
    border-left: 2px solid var(--accent);
    padding: 2px 8px;
    color: var(--ink);
}


/* ======= 20 Lightbox (Magnific Popup) ======= */
.mfp-bg { background: #14110f; opacity: .94; }
.mfp-figure:after { box-shadow: none; background: transparent; }
.mfp-title {
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--on-dark);
    padding-right: 60px;
}
.mfp-counter { font-size: 13px; color: var(--on-dark-muted); }
.mfp-arrow { opacity: .8; }
.mfp-arrow:hover { opacity: 1; }


/* ======= 21 Bewegung und Responsive ======= */
@media (prefers-reduced-motion: no-preference) {
    .hero-media img {
        animation: slow-zoom 22s var(--ease) both;
    }
    @keyframes slow-zoom {
        from { transform: scale(1.07); }
        to { transform: scale(1); }
    }
    .hero-content > * {
        animation: rise .9s var(--ease) both;
    }
    .hero-content > *:nth-child(2) { animation-delay: .12s; }
    .hero-content > *:nth-child(3) { animation-delay: .24s; }
    .hero-content > *:nth-child(4) { animation-delay: .36s; }
    @keyframes rise {
        from { opacity: 0; transform: translateY(18px); }
        to { opacity: 1; transform: none; }
    }
    .js .reveal {
        opacity: 0;
        transform: translateY(26px);
        transition: opacity .9s var(--ease), transform .9s var(--ease);
    }
    .js .reveal.is-in {
        opacity: 1;
        transform: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
    /* der Fortschrittsring folgt nur dem eigenen Scrollen, das ist keine Bewegung von selbst */
    .to-top-ring .to-top-bar { animation-duration: auto !important; }
}

@media (max-width: 1199.98px) {
    .section-title { font-size: 40px; }
}
@media (max-width: 991.98px) {
    :root { --section-y: 90px; }
    .units {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }
    .unit--feature { grid-column: 1 / -1; grid-row: auto; }
    .unit--feature .unit-media img { aspect-ratio: 16 / 10; }
    .unit-panel { padding: 34px 30px; }
    .plan { grid-column: span 12; }
    .plan--narrow { grid-column: span 6; }
    .side-box { position: static; margin-top: 50px; }
    .timeline::before { left: 110px; }
    .timeline li { grid-template-columns: 110px 1fr; gap: 0 40px; }
    .timeline li::after { left: 106px; }
    .timeline .when { font-size: 28px; }
    .gallery-item { width: 50%; }
}
@media (max-width: 767.98px) {
    :root { --section-y: 72px; }
    body { font-size: 16px; }
    .section-title { font-size: 34px; }
    .section-lead { font-size: 17px; }
    .hero { min-height: 560px; }
    .hero-content { padding-bottom: 48px; }
    .hero-lead { font-size: 16px; margin-bottom: 26px; }
    .banner { height: 52vh; min-height: 380px; }
    .banner-content { padding-bottom: 36px; }
    .collage { margin-top: 44px; }
    .units { grid-template-columns: 1fr; gap: 34px; }
    .unit-card,
    .unit--feature .unit-card {
        margin: -40px 14px 0;
        padding: 22px 22px 20px;
        grid-template-columns: 1fr;
    }
    .unit-price { grid-column: 1; grid-row: auto; text-align: left; }
    .unit-title,
    .unit--feature .unit-title { font-size: 26px; }
    .unit-media img { aspect-ratio: 4 / 3; }
    .house-saying { padding: 100px 0; }
    .year-head { margin-bottom: 30px; }
    .year-controls { display: none; }
    .year-track { grid-auto-columns: 74vw; gap: 18px; }
    .distances { gap: 24px 18px; }
    .distance dt { font-size: 32px; }
    .sale-band { padding: 70px 0; }
    .footer { padding-top: 70px; }
    .footer .bottom ul { justify-content: flex-start; margin-top: 12px; }
    .unit-row + .unit-row { margin-top: 80px; }
    .unit-panel { padding: 30px 22px; }
    .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 14px; }
    .facts dt { font-size: 23px; }
    .facts dd { font-size: 12px; line-height: 1.35; }
    .hero .kicker { font-size: 11px; letter-spacing: .16em; }
    .saying p { font-size: 21px; }
    .map-label { font-size: 34px; }
    .map-label--peak { font-size: 30px; }
    .map-label--small { font-size: 27px; }
    .map-label--home { font-size: 46px; }
    .map-sub { font-size: 25px; }
    .room-list { columns: 1; }
    .thumbs, .thumbs--6 { grid-template-columns: repeat(3, 1fr); }
    .dist-groups, .then-now { grid-template-columns: 1fr; }
    .einlieger { padding: 30px 22px; }
    .feature-groups { grid-template-columns: 1fr; }
    .timeline::before { left: 7px; }
    .timeline li { grid-template-columns: 1fr; padding-left: 34px; }
    .timeline li::after { left: 3px; top: 12px; }
    .timeline .when { text-align: left; font-size: 28px; }
    .document-pair { grid-template-columns: 1fr 1fr; gap: 16px; }
    .document-pair .document:nth-child(2) { margin-top: 24px; }
    .inscriptions { grid-template-columns: 1fr; }
    .travel, .surroundings { grid-template-columns: 1fr; gap: 36px; }
    .link-list { columns: 1; }
    .form-grid, .side-box .form-grid { grid-template-columns: 1fr; }
    .contact-person { padding: 30px 22px; }
    .gallery-item { width: 100%; }
    .map-wrap { padding: 14px; }
    .to-top { right: 14px; bottom: 14px; width: 52px; height: 52px; }
    /* Platz, damit der Knopf die letzten Links der Fußzeile nicht verdeckt */
    .footer .bottom { padding-bottom: 84px; }
}
@media (max-width: 340px) {
    .intro-facts { flex-direction: column; }
    .intro-facts .fact-year { border-right: 0; border-bottom: 1px solid var(--line); }
    .butn { padding: 15px 20px; }
}


/* ======= Barrierefreiheit: Links im Fließtext nicht nur über die Farbe erkennbar ======= */
p a:not(.link-arrow):not(.butn):not(.phone):not(.mail),
label a,
.prose a,
.caption a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.gallery-filter .count { color: var(--muted); }
.gallery-filter button[aria-pressed="true"] .count { color: var(--on-dark-muted); }


/* ======= Formular und Kontakt auf schmalen Bildschirmen ======= */
a[href^="tel:"] { white-space: nowrap; }
@media (max-width: 767.98px) {
    .banner--short { height: 40vh; min-height: 300px; }
    .contact-section { padding-top: 24px; }
    .contact-person,
    .inquiry,
    .inquiry-done,
    .side-box {
        margin-left: -12px;
        margin-right: -12px;
        box-shadow: none;
    }
    .contact-person { padding: 28px 20px 24px; }
    .inquiry,
    .inquiry-done { padding: 30px 20px 26px; }
    .side-box { padding: 30px 20px 26px; }
    .side-box .inquiry,
    .side-box .inquiry-done { margin: 0; padding: 0; }
    .inquiry-title { font-size: 32px; }
    .inquiry-lead { margin-bottom: 26px; }
    .inq-group { margin-bottom: 30px; }
    .choice-grid { gap: 8px; }
    .choice-box { min-height: 0; padding: 12px 34px 12px 13px; }
    .choice-box::after { top: 11px; right: 10px; width: 18px; height: 18px; }
    .choice-title { font-size: 15px; }
    .choice-sub { font-size: 12.5px; }
    .form-grid { grid-template-columns: 1fr; gap: 16px; }
    .date-pair { gap: 10px; }
    .field input,
    .field textarea { padding: 14px; }
    .inquiry-foot { flex-direction: column; align-items: stretch; gap: 14px; }
    .butn--submit { width: 100%; }
    .privacy-note { flex-basis: auto; text-align: center; }
    .done-title { font-size: 30px; }
    .done-summary > div { grid-template-columns: 96px 1fr; }
}


/* ======= Grundriss folgt (Dachgeschoss nach dem Umbau) ======= */
.plan-placeholder { display: flex; }
.plan-placeholder .plan-img {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    margin-bottom: 38px;
    padding: 28px;
    border: 1px dashed #c9c1b5;
    background: var(--paper);
    text-align: center;
}
.plan-placeholder p { margin: 0; max-width: 18em; font-size: 15px; color: var(--muted); }
.plan-placeholder strong {
    display: block;
    margin-bottom: 6px;
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 400;
    color: var(--ink);
}
.plan-pending {
    margin: 48px 0 0;
    padding: 18px 20px;
    border: 1px dashed #c9c1b5;
    font-size: 15px;
    color: var(--muted);
}
.pv-image img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: 62% 50%;
}