/* ==========================================================================
   Bartl – Gestaltungssystem
   Mobil zuerst. Tannengrün, Creme, Salbei, Messing. Noto Serif Display + Montserrat.
   ========================================================================== */

@font-face { font-family: 'Bartl Serif'; src: url('../fonts/noto-serif-display-var.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bartl Serif'; src: url('../fonts/noto-serif-display-italic-var.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Bartl Sans'; src: url('../fonts/montserrat-var.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
	--tanne: #004236;
	--tanne-tief: #00291f;
	--nacht: #0d1916;
	--creme: #f4efe6;
	--papier: #fbf8f2;
	--leinen: #ebe4d6;
	--salbei: #dfe5d7;
	--tinte: #1c2924;
	--stein: #56635d;
	--messing: #a07b45;
	--messing-hell: #c9a873;
	--messing-text: #7a5b2c;
	--linie: rgba(28, 41, 36, .14);
	--linie-hell: rgba(244, 239, 230, .2);

	--f-serif: 'Bartl Serif', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
	--f-sans: 'Bartl Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

	--rand: clamp(20px, 5.2vw, 76px);
	--luft: clamp(84px, 12vw, 196px);
	--luft-s: clamp(48px, 7vw, 112px);
	--kopf-h: 68px;
	--leiste-h: 58px;

	--t-riesig: clamp(3.4rem, 1.2rem + 9.6vw, 11.5rem);
	--t-display: clamp(2.9rem, 1.5rem + 6.2vw, 8rem);
	--t-h1: clamp(2.6rem, 1.6rem + 4.4vw, 6.4rem);
	--t-h2: clamp(2.15rem, 1.45rem + 3vw, 4.6rem);
	--t-h3: clamp(1.5rem, 1.2rem + 1.3vw, 2.3rem);
	--t-lead: clamp(1.28rem, 1.06rem + .95vw, 1.9rem);
	--t-text: 1.0625rem;
	--t-klein: .875rem;
	--t-label: .75rem;

	--ease: cubic-bezier(.16, 1, .3, 1);
	--ease-io: cubic-bezier(.65, 0, .35, 1);
	--ease-weich: cubic-bezier(.33, 0, .2, 1);
}
@media (min-width: 900px) { :root { --kopf-h: 84px; --t-text: 1.125rem; } }

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf-h) + 16px); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; background: var(--creme); color: var(--tinte); font-family: var(--f-sans); font-size: var(--t-text); line-height: 1.65; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-family: var(--f-serif); font-weight: 360; line-height: 1.04; letter-spacing: -.02em; text-wrap: balance; }
h1 em, h2 em, h3 em, .t-display em, .t-riesig em, .t-lead em { font-style: italic; font-weight: 340; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--tanne); color: var(--creme); }
:focus-visible { outline: 2px solid var(--messing); outline-offset: 4px; border-radius: 2px; }
.sr-only, .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.springen { position: fixed; left: 16px; top: -60px; z-index: 200; padding: 12px 18px; background: var(--tanne); color: var(--creme); text-decoration: none; font-weight: 600; transition: top .2s; }
.springen:focus { top: 12px; }

/* ---------- Typografie ---------- */
.t-riesig { font-family: var(--f-serif); font-size: var(--t-riesig); font-weight: 320; line-height: .9; letter-spacing: -.035em; }
.t-display { font-family: var(--f-serif); font-size: var(--t-display); font-weight: 330; line-height: .94; letter-spacing: -.03em; }
.t-h1 { font-size: var(--t-h1); line-height: .98; letter-spacing: -.028em; }
.t-h2 { font-size: var(--t-h2); line-height: 1.02; letter-spacing: -.024em; }
.t-h3 { font-size: var(--t-h3); line-height: 1.12; }
.t-lead { font-family: var(--f-serif); font-size: var(--t-lead); font-weight: 360; line-height: 1.34; letter-spacing: -.008em; }
.t-label { font-family: var(--f-sans); font-size: var(--t-label); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; line-height: 1.5; }
.t-klein { font-size: var(--t-klein); line-height: 1.55; }
.vorzeile { display: inline-flex; align-items: center; gap: .9em; margin: 0 0 1.6em; color: var(--messing-text); }
.vorzeile::before { content: ''; width: 7px; height: 7px; background: currentColor; transform: rotate(45deg); flex: none; }
.ton-tanne .vorzeile, .ton-nacht .vorzeile, .ist-dunkel .vorzeile { color: var(--messing-hell); }
.gedaempft { color: var(--stein); }
.nachweis { margin: .7em 0 0; font-size: .72rem; letter-spacing: .02em; color: var(--stein); }
.ton-tanne .nachweis, .ton-nacht .nachweis { color: rgba(244, 239, 230, .62); }

.zeile { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.zeile__innen { display: inline-block; }

/* ---------- Raster & Abschnitte ---------- */
.rahmen { padding-left: var(--rand); padding-right: var(--rand); }
.raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(16px, 2.2vw, 32px); }
@media (min-width: 900px) { .raster { grid-template-columns: repeat(12, minmax(0, 1fr)); } }
.abschnitt { position: relative; padding-top: var(--luft); padding-bottom: var(--luft); }
.ton-creme { background: var(--creme); color: var(--tinte); }
.ton-papier { background: var(--papier); color: var(--tinte); }
.ton-salbei { background: var(--salbei); color: var(--tinte); }
.ton-leinen { background: var(--leinen); color: var(--tinte); }
.ton-tanne { background: var(--tanne); color: var(--creme); }
.ton-nacht { background: var(--nacht); color: var(--creme); }
.ton-tanne .gedaempft, .ton-nacht .gedaempft { color: rgba(244, 239, 230, .72); }
.textspalte { max-width: 34em; }
.textspalte p:last-child { margin-bottom: 0; }

/* ---------- Raute & Knöpfe ---------- */
.raute { display: inline-block; width: .52em; height: .52em; background: currentColor; transform: rotate(45deg); flex: none; }
.knopf { position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: 2.2em; min-height: 56px; padding: 0 1.55em; border: 1px solid currentColor; font-family: var(--f-sans); font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; isolation: isolate; overflow: hidden; cursor: pointer; transition: color .5s var(--ease); background: none; }
.knopf::before { content: ''; position: absolute; inset: 0; z-index: -1; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .6s var(--ease); }
.knopf__raute { transition: transform .6s var(--ease); }
.knopf--linie { color: var(--tanne); }
.knopf--linie:hover { color: var(--creme); }
.knopf--linie:hover::before, .knopf--hell:hover::before { transform: scaleX(1); transform-origin: left; }
.knopf--linie:hover .knopf__text, .knopf--linie:hover .knopf__raute { color: var(--creme); }
.knopf--voll { color: var(--creme); background: var(--tanne); border-color: var(--tanne); }
.knopf--voll::before { background: var(--tanne-tief); }
.knopf--voll:hover::before { transform: scaleX(1); transform-origin: left; }
.knopf--hell { color: var(--creme); }
.knopf--hell:hover .knopf__text, .knopf--hell:hover .knopf__raute { color: var(--tanne); }
.knopf:hover .knopf__raute { transform: rotate(135deg); }
.knopf--text { min-height: 0; padding: .4em 0; border: 0; gap: .9em; overflow: visible; letter-spacing: .12em; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size .6s var(--ease); }
.knopf--text::before { display: none; }
.knopf--text:hover { background-size: 0 1px; background-position: 100% 100%; }
.knoepfe { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin-top: 2.4em; }
.textlink { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; transition: background-size .5s var(--ease); }
.textlink:hover { background-size: 0 1px; background-position: 100% 100%; }

/* ---------- Kopf ---------- */
.kopf { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--kopf-h); display: flex; align-items: center; gap: 20px; padding: 0 var(--rand); color: var(--tinte); transition: transform .7s var(--ease), color .5s, background-color .5s, box-shadow .5s; }
.kopf::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(244, 239, 230, .84); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); opacity: 0; transition: opacity .5s; }
.kopf.ist-fest::before { opacity: 1; }
.kopf.ist-fest { box-shadow: 0 1px 0 var(--linie); }
.kopf.ist-hell:not(.ist-fest) { color: var(--creme); }
.kopf.ist-weg { transform: translateY(-105%); }
.kopf__marke { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; margin-right: auto; }
.kopf__monogramm { width: 34px; height: auto; }
.kopf__wort { width: 92px; height: auto; margin-top: 2px; }
@media (max-width: 380px) { .kopf__wort { display: none; } }
.kopf__nav { display: none; }
.kopf__nav ul { display: flex; gap: 2px; margin: 0; padding: 3px; list-style: none; border-radius: 99px; border: 1px solid color-mix(in srgb, currentColor 18%, transparent); transition: background-color .5s, border-color .5s; }
.kopf__nav a { display: block; padding: 7px 14px; border-radius: 99px; font-size: .8rem; font-weight: 500; line-height: 1.25; letter-spacing: .02em; text-decoration: none; transition: background-color .3s, color .3s; }
.kopf__nav a:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.kopf__nav a[aria-current="page"] { background: var(--tanne); color: var(--creme); }
.kopf.ist-hell:not(.ist-fest) .kopf__nav a[aria-current="page"] { background: var(--creme); color: var(--tanne); }
.kopf__sprachen { display: flex; gap: 2px; font-size: .74rem; font-weight: 600; letter-spacing: .12em; }
.kopf__sprachen a { padding: 6px 7px; text-decoration: none; opacity: .78; transition: opacity .3s; }
.kopf__sprachen a[aria-current="true"], .kopf__sprachen a:hover { opacity: 1; }
.kopf__menue { display: none; align-items: center; gap: 10px; padding: 8px 4px; border: 0; background: none; cursor: pointer; font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.kopf__striche { position: relative; width: 26px; height: 9px; }
.kopf__striche::before, .kopf__striche::after { content: ''; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .5s var(--ease); }
.kopf__striche::before { top: 0; } .kopf__striche::after { bottom: 0; right: 7px; }
.kopf__menue:hover .kopf__striche::after { right: 0; }
.kopf__anfragen { display: none; min-height: 40px; padding: 0 1.2em; gap: 1.4em; }
@media (min-width: 900px) {
	.kopf__menue { display: inline-flex; }
	.kopf__anfragen { display: inline-flex; }
	.kopf__monogramm { width: 40px; }
	.kopf__wort { width: 104px; }
}
/* Die Leiste zeigt sich nur, wenn sie in eine Zeile passt – das Skript misst (auch wenn Menüpunkte im Backend wachsen).
   Ohne Skript erst ab 1440 px. Darunter übernimmt „Menü“. */
.kopf__nav a { white-space: nowrap; }
.kopf__marke, .kopf__sprachen, .kopf__menue, .kopf__anfragen { flex-shrink: 0; }
@media (min-width: 1100px) {
	.kopf__nav { display: block; }
	.kopf.ohne-nav .kopf__nav { display: none; }
	html:not(.js) .kopf__nav { display: none; }
}
@media (min-width: 1440px) { html:not(.js) .kopf__nav { display: block; } }

/* Eingeloggt: Kopf, Menü und Schließen-Knopf unter die WordPress-Leiste */
.admin-bar .kopf, .admin-bar .menue, .admin-bar .menue__schliessen { top: var(--wp-admin--admin-bar--height, 32px); }
.admin-bar .menue { inset-block-end: 0; }
@media (max-width: 600px) { .admin-bar .kopf, .admin-bar .menue, .admin-bar .menue__schliessen { top: 0; } }

/* ---------- Großes Menü ---------- */
.menue { position: fixed; inset: 0; z-index: 70; display: grid; grid-template-rows: minmax(min-content, 1fr) auto; overflow-y: auto; overscroll-behavior: contain; background: var(--nacht); color: var(--creme); visibility: hidden; clip-path: inset(0 0 100% 0); transition: clip-path .9s var(--ease-io), visibility 0s .9s; }
.menue.ist-offen { visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path .9s var(--ease-io), visibility 0s; }
.menue__innen { display: grid; grid-template-rows: auto 1fr; padding: calc(var(--kopf-h) + 4px) var(--rand) 0; }
.menue__gruss { margin: 0 0 clamp(16px, 3vh, 36px); color: var(--messing-hell); }
/* Liste: Schriftgröße folgt Breite (cqi) und Höhe (vh) – jeder Punkt bleibt einzeilig, alles passt auf den Bildschirm */
.menue__liste { container-type: inline-size; align-self: center; display: grid; gap: clamp(2px, .6vh, 8px); margin: 0; padding: 0; list-style: none; }
.menue__liste a { position: relative; display: inline-block; padding: .06em 0; font-family: var(--f-serif); font-weight: 320; font-size: clamp(1.7rem, min(9.6cqi, 5.9vh), 4.25rem); line-height: 1.1; letter-spacing: -.022em; white-space: nowrap; text-decoration: none; transition: color .45s var(--ease), opacity .45s var(--ease), transform .7s var(--ease); }
.menue__liste a::before { content: ''; position: absolute; left: -.42em; top: 50%; width: .17em; height: .17em; margin-top: -.08em; background: var(--messing-hell); transform: rotate(45deg) scale(0); transition: transform .5s var(--ease); }
.menue__liste a[aria-current="page"] { font-style: italic; color: var(--messing-hell); }
.menue__liste a[aria-current="page"]::before { transform: rotate(45deg) scale(1); }
.menue__liste a:focus-visible { outline: none; color: var(--messing-hell); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .16em; }
@media (hover: hover) and (pointer: fine) {
	.menue__liste:hover a { opacity: .38; }
	.menue__liste:hover a:hover { opacity: 1; color: var(--creme); transform: translateX(.16em); font-style: italic; }
	.menue__liste a:hover::before { transform: rotate(45deg) scale(1); }
}
.menue__fuss { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; margin: clamp(18px, 3.5vh, 40px) var(--rand) 0; padding: 18px 0 calc(24px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linie-hell); font-size: .82rem; }
.menue__fuss a { text-decoration: none; }
.menue__kontakt { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-right: auto; }
.menue__kontakt a { opacity: .82; transition: opacity .3s; }
.menue__kontakt a:hover { opacity: 1; }
.menue__sprachen { display: flex; gap: 2px; font-size: .74rem; font-weight: 600; letter-spacing: .12em; }
.menue__sprachen a { padding: 6px 7px; opacity: .6; }
.menue__sprachen a[aria-current="true"], .menue__sprachen a:hover { opacity: 1; }
.menue__bild { display: none; }
.menue .zeile { overflow: visible; }
.menue .zeile__innen { display: inline-block; transform: translateY(40%); opacity: 0; transition: transform 1s var(--ease), opacity .8s var(--ease); }
.menue.ist-offen .zeile__innen { transform: none; opacity: 1; transition-delay: calc(.22s + var(--i) * .05s); }
@media (min-width: 1000px) {
	.menue { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
	.menue__innen { grid-column: 1; grid-row: 1; }
	.menue__bild { display: block; grid-column: 2; grid-row: 1; position: relative; overflow: hidden; margin: calc(var(--kopf-h) + 4px) var(--rand) 0 0; }
	.menue__fuss { grid-column: 1 / -1; grid-row: 2; padding-bottom: clamp(18px, 3.5vh, 34px); }
	.menue__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .9s var(--ease), transform 1.8s var(--ease); }
	.menue__bild img.ist-aktiv { opacity: 1; transform: none; }
}
.menue__schliessen { position: fixed; top: 0; right: var(--rand); z-index: 2; height: var(--kopf-h); display: inline-flex; align-items: center; gap: 10px; border: 0; background: none; color: var(--creme); cursor: pointer; font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.menue__schliessen::after { content: ''; width: 16px; height: 16px; background: linear-gradient(45deg, transparent 47%, currentColor 47% 53%, transparent 53%), linear-gradient(-45deg, transparent 47%, currentColor 47% 53%, transparent 53%); }

/* ---------- Leiste unten (Smartphone) ---------- */
.leiste { position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 60; display: grid; grid-template-columns: 1fr 1.5fr 1fr; gap: 2px; padding: 3px; border-radius: 99px; background: var(--papier); color: var(--tinte); box-shadow: 0 0 0 1px rgba(28, 41, 36, .08), 0 10px 30px -12px rgba(13, 25, 22, .35); transition: transform .7s var(--ease), opacity .4s; }
.leiste.ist-weg { transform: translateY(calc(100% + 24px)); opacity: 0; }
.leiste a, .leiste button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 44px; border: 0; border-radius: 99px; background: none; color: inherit; text-decoration: none; font-size: .62rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .2s var(--ease); }
.leiste a:active, .leiste button:active { transform: scale(.96); }
.leiste__anfragen { background: var(--tanne) !important; color: var(--creme) !important; font-size: .7rem !important; flex-direction: row !important; gap: 10px !important; }
.leiste svg { width: 18px; height: 18px; }
@media (min-width: 900px) { .leiste { display: none; } }
/* Tablets: Leiste schlank und mittig statt über die ganze Breite */
@media (min-width: 600px) and (max-width: 899px) {
	.leiste { left: 50%; right: auto; width: min(460px, calc(100% - 24px)); transform: translateX(-50%); }
	.leiste.ist-weg { transform: translate(-50%, calc(100% + 24px)); }
}
/* Schmale Desktop-Fenster (Maus): Menü und Anfragen oben im Kopf statt Daumenleiste */
@media (min-width: 600px) and (max-width: 899px) and (hover: hover) and (pointer: fine) {
	.kopf__menue, .kopf__anfragen { display: inline-flex; }
	.leiste { display: none; }
	.fuss { padding-bottom: var(--luft-s); }
}

/* ---------- Fußbereich ---------- */
.fuss { position: relative; overflow: hidden; background: var(--tanne-tief); color: var(--creme); padding: var(--luft-s) var(--rand) calc(var(--leiste-h) + 40px + env(safe-area-inset-bottom)); }
.fuss__wasserzeichen { position: absolute; right: -6vw; bottom: -10vw; width: min(70vw, 760px); color: rgba(244, 239, 230, .045); pointer-events: none; }
.fuss__raster { position: relative; display: grid; gap: 40px; grid-template-columns: 1fr; }
.fuss__marke { width: 120px; color: var(--creme); }
.fuss__satz { font-family: var(--f-serif); font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem); line-height: 1.12; font-weight: 320; margin: 22px 0 0; max-width: 14em; }
.fuss h2 { font-family: var(--f-sans); font-size: var(--t-label); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--messing-hell); margin: 0 0 16px; }
.fuss ul { margin: 0; padding: 0; list-style: none; }
.fuss li { margin: 0 0 6px; }
.fuss a { text-decoration: none; }
.fuss a:hover { text-decoration: underline; }
.fuss__unten { position: relative; display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--linie-hell); font-size: .8rem; color: rgba(244, 239, 230, .7); }
.fuss__hoch { display: inline-flex; align-items: center; gap: 10px; border: 0; background: none; color: inherit; cursor: pointer; font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
@media (min-width: 900px) {
	.fuss { padding-bottom: 40px; }
	.fuss__raster { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}

/* ---------- Seiten-Grundlagen ---------- */
.seite { min-height: 60vh; }
.seitenkopf { padding: calc(var(--kopf-h) + var(--luft-s)) var(--rand) var(--luft-s); }
.seitenkopf h1 { max-width: 14em; }
.lesetext { padding: 0 var(--rand) var(--luft); }
.lesetext > * { max-width: 44rem; }
.lesetext h2 { font-size: var(--t-h3); margin: 2.2em 0 .6em; }
.lesetext h3 { font-family: var(--f-sans); font-size: 1.05rem; font-weight: 600; letter-spacing: 0; margin: 1.8em 0 .4em; }
.lesetext ul, .lesetext ol { padding-left: 1.2em; }
.lesetext li { margin-bottom: .4em; }
.lesetext ul li::marker { content: '◆  '; color: var(--messing); font-size: .7em; }
.lesetext a { color: var(--tanne); }
.lesetext table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.lesetext td, .lesetext th { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; }
.lesetext .platzhalter, .platzhalter { background: #fff3cd; padding: 0 .3em; border-radius: 2px; }

/* ---------- Enthüllungen (nur mit JS, nie bei reduzierter Bewegung) ---------- */
.js [data-zeigen] { opacity: 0; transform: translateY(26px); transition: opacity 1.2s var(--ease), transform 1.3s var(--ease); transition-delay: calc(var(--v, 0) * 1s); }
.js [data-zeigen].ist-sichtbar { opacity: 1; transform: none; }
/* Seitenköpfe: Texte sind sofort im Dokument „gemalt“ (für die Ladezeit-Messung), wirken aber wie eingeblendet */
.js :is(.hero, .seitenkopf, .apt-kopf, .angebot-seite__kopf) [data-zeigen]:not([data-zeigen="zeilen"]):not(.ist-sichtbar) { opacity: .01; }
.js [data-zeigen="zeilen"] { opacity: 1; transform: none; }
.js [data-zeigen="zeilen"] .zeile__innen { transform: translateY(108%); transition: transform 1.25s var(--ease); transition-delay: calc(var(--v, 0) * 1s + var(--i, 0) * .085s); }
.js [data-zeigen="zeilen"].ist-sichtbar .zeile__innen { transform: none; }
.js [data-zeigen="bild"] { opacity: 1; transform: none; clip-path: inset(14% 0 0 0); transition: clip-path 1.4s var(--ease); }
.js [data-zeigen="bild"] img { transform: scale(1.12); transition: transform 1.8s var(--ease); }
.js [data-zeigen="bild"].ist-sichtbar { clip-path: inset(0 0 0 0); }
.js [data-zeigen="bild"].ist-sichtbar img { transform: none; }
@media (prefers-reduced-motion: reduce) {
	.js [data-zeigen], .js [data-zeigen] .zeile__innen, .js [data-zeigen] img { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Intro (Vorhang) ---------- */
.vorhang { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; background: var(--creme); color: var(--tanne); pointer-events: none; animation: vorhang-notaus .01s 3.4s forwards; }
@keyframes vorhang-notaus { to { visibility: hidden; opacity: 0; } }
.ohne-intro .vorhang, .vorhang.ist-fertig { display: none; }
.vorhang__marke { position: relative; width: min(34vw, 170px); }
.vorhang__b, .vorhang__punkt-svg { display: block; width: 100%; height: auto; }
.vorhang__punkt-svg { position: absolute; inset: 0; }
.vorhang__gruss { position: absolute; left: 50%; bottom: 13vh; transform: translateX(-50%); font-family: var(--f-serif); font-style: italic; font-size: clamp(1.4rem, 1rem + 1.2vw, 2rem); opacity: 0; white-space: nowrap; }
.vorhang__ort { position: absolute; left: 50%; bottom: calc(13vh - 2.4em); transform: translateX(-50%); opacity: 0; color: var(--messing-text); white-space: nowrap; }
.no-js .vorhang, html:not(.js) .vorhang { display: none; }

/* ---------- Zeiger (nur feine Zeigegeräte) ---------- */
.zeiger { position: fixed; left: 0; top: 0; z-index: 110; pointer-events: none; display: none; align-items: center; gap: 12px; color: var(--messing); mix-blend-mode: normal; transform: translate3d(-100px, -100px, 0); }
.fein .zeiger { display: flex; }
.zeiger__punkt { width: 9px; height: 9px; background: currentColor; transform: rotate(45deg) scale(1); transition: transform .45s var(--ease), background-color .3s; }
.zeiger__text { font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--tinte); background: var(--creme); padding: 6px 10px; opacity: 0; transform: translateX(-8px); transition: opacity .3s, transform .45s var(--ease); white-space: nowrap; }
.zeiger.mit-text .zeiger__punkt { transform: rotate(45deg) scale(1.6); }
.zeiger.mit-text .zeiger__text { opacity: 1; transform: none; }
.zeiger.ist-gedrueckt .zeiger__punkt { transform: rotate(135deg) scale(.8); }

/* ---------- Seitenwechsel ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: .45s var(--ease-io) both bartl-raus; }
::view-transition-new(root) { animation: .7s var(--ease) both bartl-rein; }
@keyframes bartl-raus { to { opacity: 0; transform: translateY(-1.5vh); } }
@keyframes bartl-rein { from { opacity: 0; transform: translateY(2.5vh); } }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }

/* ---------- Kleine Bausteine ---------- */
.hinweisband { position: relative; z-index: 5; display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; justify-content: center; padding: 12px var(--rand); background: var(--tanne); color: var(--creme); text-align: center; font-size: .86rem; }
.hinweisband a { font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: .74rem; text-decoration: none; display: inline-flex; gap: .8em; align-items: center; }
.hinweisband .raute { color: var(--messing-hell); }
.fakten { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 0; padding: 0; list-style: none; }
.fakten li { display: flex; flex-direction: column; }
.fakten strong { font-family: var(--f-serif); font-weight: 360; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.3rem); line-height: 1.05; }
.fakten span { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; opacity: .75; }
.liste-raute { margin: 0; padding: 0; list-style: none; columns: 1; column-gap: 40px; }
.liste-raute li { position: relative; padding: .55em 0 .55em 1.5em; border-bottom: 1px solid var(--linie); break-inside: avoid; }
.liste-raute li::before { content: ''; position: absolute; left: 0; top: 1.15em; width: 6px; height: 6px; background: var(--messing); transform: rotate(45deg); }
@media (min-width: 700px) { .liste-raute { columns: 2; } }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 1px solid var(--linie); border-radius: 99px; font-size: .8rem; }
.bogen { border-radius: 999px 999px 0 0; overflow: hidden; }
.bild-rahmen { position: relative; overflow: hidden; background: var(--leinen); }
.bild-rahmen img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Angebotshinweis (statt Pop-up) ---------- */
.angebot-hinweis { position: fixed; z-index: 55; left: 10px; right: 10px; bottom: calc(var(--leiste-h) + 22px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 10px 12px 10px 10px; background: var(--papier); color: var(--tinte); box-shadow: 0 24px 60px -28px rgba(13, 25, 22, .55), 0 0 0 1px var(--linie); transform: translateY(18px); opacity: 0; transition: transform .8s var(--ease), opacity .5s; }
.angebot-hinweis.ist-sichtbar { transform: none; opacity: 1; }
.angebot-hinweis.ist-sichtbar.ist-pausiert { transform: translateY(16px); opacity: 0; pointer-events: none; }
.angebot-hinweis__bild { width: 64px; height: 64px; overflow: hidden; }
.angebot-hinweis__bild img { width: 100%; height: 100%; object-fit: cover; }
.angebot-hinweis .t-label { margin: 0 0 2px; color: var(--messing-text); font-size: .66rem; }
.angebot-hinweis a { font-family: var(--f-serif); font-size: 1.12rem; line-height: 1.2; text-decoration: none; }
.angebot-hinweis a::after { content: ''; position: absolute; inset: 0; }
.angebot-hinweis__zu { position: relative; z-index: 1; width: 36px; height: 36px; border: 0; background: none; font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--stein); }
@media (min-width: 900px) { .angebot-hinweis { left: auto; right: var(--rand); bottom: 28px; width: 380px; } }

/* ==========================================================================
   Unterkunft (Detailseite)
   ========================================================================== */
.apt-kopf { padding-top: calc(var(--kopf-h) + clamp(28px, 7vw, 96px)); padding-bottom: clamp(36px, 5vw, 64px); }
.apt-kopf .vorzeile a { text-decoration: none; }
.apt-kopf__zaehler { margin-left: 1.2em; color: var(--stein); letter-spacing: .1em; }
.apt-kopf__h1 { margin: 0; font: inherit; letter-spacing: normal; text-wrap: wrap; }
.apt-kopf__titel { display: block; margin: .05em 0 .2em; }
.apt-kopf__ort { display: block; margin: .1em 0 1.4em; color: var(--messing-text); }
.apt-kopf__unter { display: grid; gap: 28px; align-items: end; }
.apt-kopf__claim { margin: 0; max-width: 18em; }
.apt-kopf__voll { margin: 10px 0 0; }
@media (min-width: 900px) { .apt-kopf__unter { grid-template-columns: 1fr auto; } .apt-kopf__fakten { justify-content: flex-end; } }
.apt-galerie__haupt { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--leinen); }
.apt-galerie__haupt a, .apt-galerie__bild a { display: block; height: 100%; }
.apt-galerie__haupt img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 700px) { .apt-galerie__haupt { aspect-ratio: 16 / 9; margin: 0 var(--rand); } }
@media (min-width: 1300px) { .apt-galerie__haupt { aspect-ratio: 21 / 9; } }
.apt-galerie__band, .apt-weitere__band, .ab__karten, .zl__band { display: flex; gap: clamp(12px, 1.6vw, 24px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--rand); padding: clamp(12px, 1.6vw, 24px) var(--rand) 18px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.apt-galerie__band::-webkit-scrollbar, .apt-weitere__band::-webkit-scrollbar, .ab__karten::-webkit-scrollbar, .zl__band::-webkit-scrollbar { display: none; }
.apt-galerie__bild { flex: 0 0 78vw; margin: 0; scroll-snap-align: start; }
.apt-galerie__bild a { aspect-ratio: 4 / 3; overflow: hidden; background: var(--leinen); }
.apt-galerie__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.apt-galerie__bild a:hover img { transform: scale(1.04); }
.apt-galerie__bild figcaption { margin-top: 10px; font-size: .82rem; color: var(--stein); }
@media (min-width: 900px) { .apt-galerie__bild { flex-basis: 34vw; } }
.apt-galerie__hinweis { margin: 4px 0 0; }
.apt-text { row-gap: 56px; }
.apt-text__haupt { grid-column: 1 / -1; }
.apt-text__inhalt p { margin-bottom: .8em; }
.apt-text__details { grid-column: 1 / -1; }
.apt-details { margin: 0; display: grid; gap: 22px; }
.apt-details dt { color: var(--messing-text); margin-bottom: 4px; }
.apt-details dd { margin: 0; }
.apt-ausstattung { grid-column: 1 / -1; }
.apt-ausstattung h2 { margin-bottom: 18px; }
@media (min-width: 900px) {
	.apt-text__haupt { grid-column: 1 / span 7; }
	.apt-text__details { grid-column: 9 / span 4; padding-top: .6em; }
}
.apt-anfrage__innen { display: flex; flex-direction: column; align-items: center; text-align: center; }
.apt-anfrage__text { max-width: 24em; margin: 1em auto 0; color: rgba(244, 239, 230, .82); }
.apt-anfrage .knoepfe { justify-content: center; }
.apt-faq { row-gap: 32px; }
.apt-faq__kopf, .apt-faq__liste { grid-column: 1 / -1; }
@media (min-width: 900px) { .apt-faq__kopf { grid-column: 1 / span 5; } .apt-faq__liste { grid-column: 7 / span 6; } }
.apt-weitere__kopf { margin-bottom: 12px; }
.apt-karte { flex: 0 0 74vw; scroll-snap-align: start; display: flex; flex-direction: column; gap: 10px; text-decoration: none; }
.apt-karte__bild { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--leinen); }
.apt-karte__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.apt-karte:hover .apt-karte__bild img { transform: scale(1.05); }
.apt-karte__meta { color: var(--stein); margin-top: 6px; }
.apt-karte__titel { font-family: var(--f-serif); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.6rem); line-height: 1.05; letter-spacing: -.02em; font-weight: 340; }
@media (min-width: 900px) { .apt-karte { flex-basis: 28vw; } }

/* ---------- Fragen (gemeinsam) ---------- */
.faq__eintrag { border-top: 1px solid var(--linie); interpolate-size: allow-keywords; }
.faq__eintrag:last-child { border-bottom: 1px solid var(--linie); }
.faq__eintrag summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 1.25em 0; cursor: pointer; list-style: none; font-family: var(--f-serif); font-size: clamp(1.15rem, 1rem + .55vw, 1.5rem); line-height: 1.25; }
.faq__eintrag summary::-webkit-details-marker { display: none; }
.faq__zeichen { position: relative; width: 16px; height: 16px; flex: none; }
.faq__zeichen::before, .faq__zeichen::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: currentColor; transition: transform .5s var(--ease); }
.faq__zeichen::after { transform: rotate(90deg); }
.faq__eintrag[open] .faq__zeichen::after { transform: rotate(0); }
.faq__eintrag::details-content { height: 0; overflow: clip; transition: height .6s var(--ease), content-visibility .6s allow-discrete; }
.faq__eintrag[open]::details-content { height: auto; }
.faq__antwort { padding: 0 0 1.5em; max-width: 38em; color: var(--stein); }
.ton-tanne .faq__eintrag, .ton-nacht .faq__eintrag { border-color: var(--linie-hell); }
.ton-tanne .faq__antwort, .ton-nacht .faq__antwort { color: rgba(244, 239, 230, .78); }

/* ---------- Angebotsseite ---------- */
.angebot-seite__kopf { padding-top: calc(var(--kopf-h) + clamp(28px, 7vw, 96px)); padding-bottom: var(--luft); row-gap: 40px; align-items: center; }
.angebot-seite__text { grid-column: 1 / -1; }
.angebot-seite__medien { grid-column: 1 / -1; }
.angebot-seite__medien .nachweis { margin-top: 10px; text-align: right; }
.angebot-seite__bild { margin: 0; aspect-ratio: 4 / 5; }
.angebot-seite__bild img { width: 100%; height: 100%; object-fit: cover; }
.angebot-seite__vorteil { display: flex; align-items: center; gap: 18px; margin: 1.2em 0; }
.angebot-seite__vorteil strong { font-family: var(--f-serif); font-weight: 300; font-size: clamp(3.4rem, 2.6rem + 4vw, 7rem); line-height: .9; color: var(--tanne); }
.angebot-seite__vorteil span { max-width: 9em; font-size: .9rem; line-height: 1.35; }
@media (min-width: 900px) { .angebot-seite__text { grid-column: 1 / span 6; } .angebot-seite__medien { grid-column: 8 / span 5; } }

/* ---------- Lichtkasten ---------- */
.lichtkasten { position: fixed; inset: 0; z-index: 130; display: grid; grid-template-rows: auto 1fr auto; background: rgba(9, 16, 14, .96); color: var(--creme); opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility 0s .5s; touch-action: pan-y; }
.lichtkasten.ist-offen { opacity: 1; visibility: visible; transition: opacity .5s var(--ease), visibility 0s; }
.lichtkasten__kopf { display: flex; justify-content: space-between; align-items: center; height: var(--kopf-h); padding: 0 var(--rand); font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.lichtkasten__kopf button { border: 0; background: none; color: inherit; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; padding: 10px 0; }
.lichtkasten__buehne { position: relative; display: grid; place-items: center; overflow: hidden; padding: 0 var(--rand); }
.lichtkasten__buehne img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transition: opacity .4s, transform .6s var(--ease); }
.lichtkasten__fuss { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px var(--rand) calc(18px + env(safe-area-inset-bottom)); font-size: .86rem; color: rgba(244, 239, 230, .75); }
.lichtkasten__pfeile { display: flex; gap: 8px; }
.lichtkasten__pfeile button { width: 52px; height: 52px; border: 1px solid var(--linie-hell); border-radius: 50%; background: none; color: inherit; cursor: pointer; font-size: 1.1rem; transition: background-color .3s, color .3s; }
.lichtkasten__pfeile button:hover { background: var(--creme); color: var(--tanne); }

/* ---------- Anfrage (eingebettet) ---------- */
.anfrage-block__raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.anfrage-block__wege { margin: 28px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.anfrage-block__wege .t-label { color: var(--messing-text); }
@media (min-width: 1000px) { .anfrage-block__raster { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 96px); } .anfrage-block__kopf { position: sticky; top: calc(var(--kopf-h) + 24px); align-self: start; } }

/* Apartment: Grundriss */
.apt-grundriss { row-gap: 32px; align-items: center; }
.apt-grundriss__text, .apt-grundriss__bild { grid-column: 1 / -1; }
.apt-grundriss__text .t-h2 { margin: 0 0 .5em; }
.apt-grundriss__bild { margin: 0; }
.apt-grundriss__bild a { display: block; padding: clamp(16px, 3vw, 40px); background: var(--papier); border: 1px solid var(--linie); }
.apt-grundriss__img { display: block; width: 100%; height: auto; max-height: 72vh; object-fit: contain; object-position: center !important; }
@media (min-width: 900px) { .apt-grundriss__text { grid-column: 1 / span 4; } .apt-grundriss__bild { grid-column: 6 / span 7; } }

/* ==========================================================================
   Milchglas – Feinschliff
   Das Glas kommt erst beim Scrollen: Die Kopfleiste wird zu Milchglas, sobald Inhalte unter ihr
   durchlaufen. Über dem großen Bild oben bleibt die Navigation, wie sie gestaltet ist.
   Dazu dieselbe Glasart auf schwebenden Bedienelementen: Daumenleiste, Saison-Schalter,
   Angebotskarte, Bildbetrachter. Flach und leise: Haarlinie statt Wulst, kein Glanz.
   ========================================================================== */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	/* Kopfleiste beim Scrollen */
	.kopf::before { background: rgba(246, 242, 235, .8); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); }
	.kopf.ist-fest .kopf__nav ul { border-color: rgba(28, 41, 36, .07); background: rgba(28, 41, 36, .04); }
	/* Daumenleiste am Handy: dasselbe helle Milchglas wie die Kopfleiste */
	.leiste { background: rgba(250, 247, 241, .82); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); }
	/* Saison-Schalter */
	.saison__schalter { border-color: rgba(255, 255, 255, .18); background: rgba(16, 28, 24, .3); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); }
	.saison__laeufer { box-shadow: 0 2px 10px -3px rgba(0, 0, 0, .35); }
	/* Angebotskarte: fast deckend, damit Überschriften dahinter nicht durchscheinen */
	.angebot-hinweis { border-radius: 16px; background: rgba(250, 247, 241, .94); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); box-shadow: 0 0 0 1px rgba(28, 41, 36, .07), 0 18px 44px -24px rgba(13, 25, 22, .45); }
	.angebot-hinweis__bild { border-radius: 10px; }
	/* Bildbetrachter */
	.lichtkasten__pfeile button { border-color: rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); }
}
/* Wer weniger Transparenz eingestellt hat, bekommt ruhige, deckende Flächen */
@media (prefers-reduced-transparency: reduce) {
	.kopf::before { background: var(--creme); -webkit-backdrop-filter: none; backdrop-filter: none; }
	.lichtkasten__pfeile button { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(13, 25, 22, .55); }
	.leiste { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--papier); }
	.saison__schalter { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--nacht); }
	.angebot-hinweis { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--papier); }
}