/* Noble House Immobilien – Redesign 2026 */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img { max-width: 100%; }
[hidden] { display: none !important; }

/* Layout: ruhiger Cremegrund, eigene Seite pro Bereich. Geschichtete, organische Grünflächen
   tragen grosse Bildflächen; Caslon und feine Linien halten den britischen Ton. */
:root {
  color-scheme: light;
  --bg: #FAF7EF; --ink: #1F2E20; --muted: #5A6656; --line: #D9D8C6;
  --accent: #94763A; --card: #F2EFE3;
  --g-deep: #223A2B; --g-brand: #344F34; --g-mid: #5E8259; --g-light: #A9C48A; --g-pale: #E3EAD6;
  --ivory: #F4F1E4;
  --display: "Libre Caslon Display", "Libre Caslon Text", "Big Caslon", Georgia, serif;
  --label: "Libre Caslon Text", "Big Caslon", Georgia, serif;
  --body: "EB Garamond", Garamond, "Times New Roman", serif;
  --logo: url(../img/logo-maske.png);
  --mono: url(../img/monogramm-maske.png);
  --blob1: 62% 38% 46% 54% / 44% 56% 44% 56%;
  --blob2: 38% 62% 58% 42% / 56% 40% 60% 44%;
  --blob3: 52% 48% 36% 64% / 60% 52% 48% 40%;
}
html { scroll-behavior: smooth; } main { overflow-x: clip; }
body { background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 1.1875rem; line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
*, *::before, *::after { box-sizing: border-box; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 56px); position: relative; }

header.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 14px; }
.logo { display: block; width: 168px; aspect-ratio: 3308 / 1576; background: var(--g-brand); flex: none;
  -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
nav.main { display: flex; flex-wrap: wrap; gap: 6px 26px; justify-content: flex-end; }
nav.main a, .label, .btn, .foot a, .foot span.h { font-family: var(--label); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; }
nav.main a { text-decoration: none; padding-block: 6px; border-bottom: 1px solid transparent; transition: border-color .3s; }
nav.main a:hover, nav.main a[aria-current="page"] { border-color: var(--accent); }
@media (max-width: 820px) { .logo { width: 128px; } nav.main { gap: 2px 14px; } nav.main a { font-size: .6rem; letter-spacing: .13em; } }

section { padding-block: clamp(56px, 8vw, 110px); position: relative; }
.label { color: var(--accent); display: flex; align-items: center; gap: 14px; margin: 0 0 4px; max-width: none; }
.label::before { content: ""; width: 38px; height: 1px; background: var(--accent); flex: none; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 5.6vw, 4.8rem); line-height: 1.05; }
h2 { font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.1; }
h3 { font-size: 1.55rem; line-height: 1.2; }
em, .it { font-family: var(--label); font-style: italic; }
h1 em, h2 em { font-size: .9em; color: var(--g-mid); }
p { margin: 0; max-width: 62ch; }
.lead { font-size: 1.36rem; line-height: 1.5; color: var(--muted); }
.stack { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
.btn { display: inline-block; text-decoration: none; padding: 16px 30px; border: 1px solid var(--g-brand); background: var(--g-brand); color: var(--ivory); border-radius: 999px; cursor: pointer; transition: background .3s, color .3s; }
.btn.ghost { background: transparent; color: var(--g-brand); }
.btn:hover { background: var(--g-deep); color: var(--ivory); }

/* Organische Bildflächen: geschichtete Grünformen, vorne die Bildfläche */
.art { position: relative; width: 100%; aspect-ratio: 1 / 1; max-width: 100%; }
.art > i { position: absolute; display: block; will-change: transform; }
.art > i:nth-child(1) { inset: -6% 14% 22% -10%; background: var(--g-pale);  border-radius: var(--blob2); transform: translateY(calc(var(--p, 0) * 60px)) rotate(calc(var(--p, 0) * 14deg)); }
.art > i:nth-child(2) { inset: 30% -8% -8% 34%; background: var(--g-light); border-radius: var(--blob3); transform: translateY(calc(var(--p, 0) * -90px)) rotate(calc(var(--p, 0) * -18deg)); }
.art > i:nth-child(3) { inset: -4% -6% 40% 44%; background: var(--g-deep);  border-radius: var(--blob1); transform: translateY(calc(var(--p, 0) * 40px)) rotate(calc(var(--p, 0) * 10deg)); }
.ph { position: absolute; inset: 7% 5% 7% 5%; border-radius: var(--blob1); overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(155deg, var(--g-mid), var(--g-brand) 55%, var(--g-deep)); color: var(--ivory); }
.ph.s2 { border-radius: var(--blob2); } .ph.s3 { border-radius: var(--blob3); }
.ph span { font-family: var(--label); font-style: italic; font-size: 1rem; text-align: center; padding: 20px; opacity: .85; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ph span::before { content: ""; width: 54px; aspect-ratio: 2248 / 2426; background: var(--ivory); -webkit-mask: var(--mono) center / contain no-repeat; mask: var(--mono) center / contain no-repeat; }
.band { position: relative; width: 100%; aspect-ratio: 21 / 9; border-radius: 34% 66% 42% 58% / 62% 44% 56% 38%; overflow: hidden; }
.band .ph { inset: 0; border-radius: 0; }
@media (max-width: 700px) { .band { aspect-ratio: 4 / 3; } }

.hero { padding-block: clamp(36px, 5vw, 70px) clamp(60px, 8vw, 110px); }
.duo { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.duo.flip { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.creed { display: flex; flex-wrap: wrap; gap: 6px 22px; font-family: var(--label); font-style: italic; font-size: 1.12rem; color: var(--muted); }
.creed span + span::before { content: "·"; margin-right: 22px; color: var(--accent); }
@media (max-width: 860px) { .duo, .duo.flip { grid-template-columns: 1fr; } .duo .art { max-width: 520px; margin-inline: auto; } .duo.flip .art { order: -1; } }

.index { border-top: 1px solid var(--ink); margin-top: 44px; }
.index a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: 12px 40px; align-items: baseline; padding-block: 28px; border-bottom: 1px solid var(--line); text-decoration: none; transition: padding .4s ease, border-color .4s; }
.index a:hover { padding-left: 16px; border-color: var(--g-mid); }
.index h3 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.index p { color: var(--muted); }
.index .go { font-family: var(--label); font-style: italic; color: var(--g-mid); white-space: nowrap; }
@media (max-width: 760px) { .index a { grid-template-columns: 1fr; gap: 6px; } }

.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-top: 8px; border-top: 1px solid var(--ink); }
.cols > div { padding: 30px 28px 6px 0; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cols > div + div { padding-left: 28px; border-left: 1px solid var(--line); }
.cols .n { font-family: var(--label); font-style: italic; color: var(--accent); font-size: 1.05rem; }
.cols p { color: var(--muted); font-size: 1.08rem; }
@media (max-width: 760px) { .cols > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); } }
ul.plain { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
ul.plain li { padding: 16px 0 16px 30px; border-bottom: 1px solid var(--line); position: relative; }
ul.plain li::before { content: ""; position: absolute; left: 4px; top: 1.6em; width: 10px; height: 10px; background: var(--g-light); border-radius: 60% 40% 55% 45%; }

.quote { text-align: center; background: var(--g-pale); border-radius: 48% 52% 0 0 / 22% 26% 0 0; }
.quote blockquote { margin: 0 auto; max-width: 22ch; font-family: var(--display); font-size: clamp(1.9rem, 4.4vw, 3.5rem); line-height: 1.15; text-wrap: balance; color: var(--g-deep); }
.cta { background: var(--g-pale); text-align: center; }
.cta .stack { align-items: center; }
.quote + .cta { padding-top: 0; }

.team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 60px); }
.team figure { margin: 0; display: flex; flex-direction: column; gap: 18px; }
.team .por { position: relative; aspect-ratio: 4 / 5; }
.team .por .ph { inset: 0; }
.team figcaption { display: flex; flex-direction: column; gap: 4px; }
.team .role { color: var(--muted); font-size: 1.02rem; }
@media (max-width: 480px) { .team { grid-template-columns: 1fr; max-width: 300px; } }
.drop::first-letter { font-family: var(--display); font-size: 4.3em; float: left; line-height: .82; padding: .06em .1em 0 0; color: var(--g-mid); }

dl.facts { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 28px; border-top: 1px solid var(--ink); }
dl.facts dt, dl.facts dd { margin: 0; padding-block: 15px; border-bottom: 1px solid var(--line); }
dl.facts dt { font-family: var(--label); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); padding-top: 21px; }
dl.facts dd { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 24px; background: var(--card); padding: clamp(24px, 4vw, 44px); border-radius: 28px; }
form .full { grid-column: 1 / -1; }
form label { display: flex; flex-direction: column; gap: 6px; font-family: var(--label); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); min-width: 0; }
form input, form textarea { font: inherit; font-family: var(--body); font-size: 1.1rem; letter-spacing: 0; text-transform: none; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--ink); padding: 8px 0; border-radius: 0; width: 100%; }
form textarea { min-height: 110px; resize: vertical; }
form .note { font-size: .98rem; color: var(--muted); max-width: none; }
@media (max-width: 520px) { form { grid-template-columns: 1fr; } }

footer.foot { background: var(--g-deep); color: var(--ivory); padding-block: 64px 36px; }
.foot .wrap { display: flex; flex-direction: column; gap: 44px; }
.foot .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 36px; }
.foot .logo { background: var(--ivory); width: 200px; }
.foot .grid > div { display: flex; flex-direction: column; gap: 9px; font-size: 1.05rem; }
.foot span.h { color: var(--g-light); margin-bottom: 6px; }
.foot a { text-decoration: none; opacity: .85; }
.foot a:hover { opacity: 1; text-decoration: underline; }
.foot .fine { border-top: 1px solid #3A5440; padding-top: 22px; font-size: .95rem; opacity: .75; max-width: none; }
.foot .fine a { font: inherit; letter-spacing: 0; text-transform: none; }

.js .page.on { animation: pagein .7s ease both; }
@keyframes pagein { from { opacity: .2; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js .page.on { animation: none; } .art > i { transform: none !important; } }

/* ===== Privatbank-Fassung: Wandkassetten, Schwarzlack, Altgold ===== */
:root { --bg: #F6F3EC; --ink: #1B1B19; --muted: #6A655B; --line: #DCD6C8; --accent: #9C8450; --card: #EFEBE1;
  --black: #161614; --g-deep: #161614; --g-mid: #9C8450; --g-light: #B9A46E; --g-pale: transparent; }
body { font-size: 1.15rem; }
header.top { border-top: 5px solid var(--black); }
.top .wrap { padding-block: 20px; }
nav.main { gap: 6px 34px; }
nav.main a { font-size: .68rem; letter-spacing: .26em; }
section { padding-block: clamp(70px, 10vw, 140px); }
h1 { font-size: clamp(2.5rem, 5vw, 4.3rem); line-height: 1.1; }
h1 em, h2 em { color: var(--accent); }
.label { letter-spacing: .3em; }
.btn { border-radius: 0; background: var(--black); border-color: var(--black); color: var(--bg); padding: 17px 34px; font-size: .66rem; letter-spacing: .28em; transition: background .5s, color .5s, border-color .5s; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); }
/* Bildflächen als gerahmte Wandkassette mit vergoldetem Innenrahmen */
.art > i { display: none; }
.art, .band, .team .por { border: 1px solid var(--line); box-shadow: 0 0 0 7px var(--bg), 0 0 0 8px var(--line); border-radius: 0; overflow: visible; }
.art { aspect-ratio: 4 / 5; max-width: 520px; justify-self: end; }
.duo.flip .art { justify-self: start; }
.ph, .ph.s2, .ph.s3, .band .ph { inset: 16px !important; border-radius: 0; background: linear-gradient(165deg, #2B2A26, #161614 70%); }
.ph::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--g-light); box-shadow: inset 0 0 0 5px #161614, inset 0 0 0 6px color-mix(in srgb, var(--g-light) 55%, transparent); pointer-events: none; }
.ph span { color: #E9E4D6; letter-spacing: .02em; }
.ph span::before { background: var(--g-light); }
.band { aspect-ratio: 21 / 9; margin: 8px; width: auto; }
@media (max-width: 700px) { .band { aspect-ratio: 4 / 3; } }
.team .por { margin: 8px; }
.index a:hover { padding-left: 0; border-color: var(--accent); }
.index .go { color: var(--accent); }
ul.plain li::before { width: 6px; height: 6px; border-radius: 0; transform: rotate(45deg); background: var(--accent); top: 1.75em; }
.drop::first-letter { color: var(--accent); }
/* Zitat und Abschluss als Kassette statt Farbfläche */
.quote, .cta { background: none; border-radius: 0; }
.quote .wrap, .cta .wrap { max-width: 1128px; border: 1px solid var(--line); outline: 1px solid var(--line); outline-offset: -12px; padding-block: clamp(56px, 8vw, 100px); }
.quote { padding-bottom: 0; } .quote + .cta { padding-top: clamp(70px, 10vw, 140px); }
.quote blockquote { color: var(--ink); }
.quote blockquote::before { content: ""; display: block; width: 46px; aspect-ratio: 2248 / 2426; margin: 0 auto 30px; background: var(--accent); -webkit-mask: var(--mono) center / contain no-repeat; mask: var(--mono) center / contain no-repeat; }
form { border-radius: 0; background: none; border: 1px solid var(--line); outline: 1px solid var(--line); outline-offset: -10px; padding: clamp(30px, 5vw, 56px); }
footer.foot { background: var(--black); }
.foot .fine { border-color: #33322D; }
.js .page.on { animation-duration: 1.1s; }

/* ===== Startseite: grosses Banner, sonst fast nichts ===== */
.banner { padding: 0; min-height: min(88vh, 860px); display: grid; place-items: center; text-align: center; color: #F3EFE4; overflow: hidden; isolation: isolate; }
/* Im fertigen Paket: background-image: url(bilder/banner.jpg) vor dem Verlauf */
.banner-img { position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(180deg, rgba(22,22,20,.30), rgba(22,22,20,.50) 55%, rgba(22,22,20,.66)),
  url(../img/banner.jpg) center 60% / cover no-repeat #2B2D29; }
.banner h1, .banner p { text-shadow: 0 1px 24px rgba(0,0,0,.35); }
.banner .wrap { display: flex; flex-direction: column; align-items: center; gap: 22px; padding-block: 90px; }
.bmono { width: 58px; aspect-ratio: 2248 / 2426; background: var(--g-light); -webkit-mask: var(--mono) center / contain no-repeat; mask: var(--mono) center / contain no-repeat; }
.banner h1 { font-size: clamp(2.4rem, 6.4vw, 5rem); text-transform: uppercase; letter-spacing: .16em; margin-right: -.16em; line-height: 1.1; }
.brule { width: 70px; height: 1px; background: var(--g-light); }
.bsub { font-family: var(--label); font-size: clamp(.7rem, 1.4vw, .86rem); letter-spacing: .32em; text-transform: uppercase; max-width: none; }
.bcreed { font-family: var(--label); font-style: italic; font-size: 1.3rem; opacity: .88; max-width: none; }
.btn.light { background: transparent; border-color: rgba(243,239,228,.7); color: #F3EFE4; margin-top: 18px; }
.btn.light:hover { background: #F3EFE4; border-color: #F3EFE4; color: var(--black); }
.bnote { position: absolute; bottom: 18px; left: 0; right: 0; font-family: var(--label); font-style: italic; font-size: .85rem; opacity: .5; }
.quiet { padding-block: clamp(56px, 7vw, 90px); }
.four { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.four a { text-decoration: none; text-align: center; padding: 26px 18px; display: flex; flex-direction: column; gap: 10px; border-left: 1px solid var(--line); min-width: 0; }
.four a:first-child { border-left: 0; }
.four .k { font-family: var(--display); font-size: 1.6rem; transition: color .5s; }
.four .d { font-family: var(--label); font-style: italic; font-size: .98rem; color: var(--muted); }
.four a:hover .k { color: var(--accent); }
@media (max-width: 900px) { .four a { border-left: 0; border-top: 1px solid var(--line); } .four a:first-child { border-top: 0; } }

/* ===== Scroll-Bewegung: ruhiges Ein- und Ausblenden in beide Richtungen, Banner mit Tiefe ===== */
.js .sr { opacity: .12; transform: translateY(34px); transition: opacity 1.3s cubic-bezier(.22,.61,.24,1), transform 1.5s cubic-bezier(.22,.61,.24,1); transition-delay: calc(var(--i, 0) * 110ms); will-change: opacity, transform; }
.js .sr.up { transform: translateY(-34px); }
.js .sr.in { opacity: 1; transform: none; }
.js .art.sr .ph, .js .band.sr .ph { transform: scale(1.06); transition: transform 2.2s cubic-bezier(.22,.61,.24,1); }
.js .art.sr.in .ph, .js .band.sr.in .ph { transform: none; }
.banner-img { inset: -12% 0; transform: translate3d(0, calc(var(--s, 0) * .32px), 0) scale(calc(1 + var(--s, 0) * .00012)); will-change: transform; }
.banner .wrap { transform: translate3d(0, calc(var(--s, 0) * .14px), 0); opacity: calc(1 - var(--s, 0) / 620); }
@media (prefers-reduced-motion: reduce) { .js .sr, .js .sr.up { opacity: 1; transform: none; transition: none; } .banner-img, .banner .wrap { transform: none; opacity: 1; } }

/* Monogramm im Original-Grün */
.bmono { background: #F3EFE4; }
.quote blockquote::before { background: #3C5B3C; }

/* ===== Fotos in den Rahmen: Vorhang von unten, langsames Einzoomen ===== */
.ph.photo img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; }
.js .sr .ph.photo img { clip-path: inset(100% 0 0 0); transform: scale(1.14); transition: clip-path 1.9s cubic-bezier(.22,.61,.24,1) .15s, transform 2.8s cubic-bezier(.22,.61,.24,1) .15s; }
.js .sr.in .ph.photo img { clip-path: inset(0 0 0 0); transform: none; }
.js .sr .ph.photo::after { opacity: 0; transition: opacity 1.4s ease 1.2s; }
.js .sr.in .ph.photo::after { opacity: 1; }
/* ===== Säule am linken Rand: zeichnet sich mit dem Scrollen ===== */
.column { position: fixed; z-index: 5; pointer-events: none; left: max(6px, calc((100vw - 1240px) / 2 - 34px)); top: 50%; transform: translateY(-42%);
  height: min(62vh, 560px); width: auto; aspect-ratio: 52 / 600; overflow: visible; transition: opacity 1s ease; }
.column path { fill: none; stroke: var(--accent); stroke-width: 1.1; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: clamp(0, calc(1 - (var(--p, 0) - var(--a)) / var(--b)), 1); }
body[data-page="home"] .column { opacity: 0; }
@media (max-width: 1360px) { .column { display: none; } }
@media (prefers-reduced-motion: reduce) { .column path { stroke-dashoffset: 0; } .js .sr .ph.photo img { clip-path: none; transform: none; } }

/* ===== Umbau: Fassadenzeichnung rechts, läuft als Linien bis ans Seitenende und zeichnet sich mit dem Scrollen ===== */
main { position: relative; }
.deco { display: none; position: absolute; top: 0; bottom: 0; right: 0; width: min(52vw, 860px); z-index: 0; pointer-events: none; flex-direction: column; opacity: .55; }
body[data-page="umbau"] .deco { display: flex; }
.fassade { display: block; width: 100%; height: auto; flex: none; }
.ext { display: block; width: 100%; flex: 1 1 auto; min-height: 0; }
.deco path { fill: none; stroke: var(--accent); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; }
.fassade path { stroke-dashoffset: clamp(0, calc(1 - (var(--d, 0) - var(--y) * var(--k, .6)) / (var(--h) * var(--k, .6) + 200)), 1); }
.ext path { stroke-dasharray: none; }
.ext { clip-path: inset(0 0 calc((1 - var(--e, 0)) * 100%) 0); }
@media (prefers-reduced-motion: reduce) { .ext { clip-path: none; } }
/* Text und Bilder: Linien laufen weich aus, mit wenig Abstand */
body[data-page="umbau"] .page[data-page="umbau"] .stack, body[data-page="umbau"] #cta .wrap { background: var(--bg); box-shadow: 0 0 26px 20px var(--bg); border-radius: 38% 62% 54% 46% / 30% 34% 66% 70%; }
body[data-page="umbau"] #cta .wrap { border-radius: 0; box-shadow: 0 0 30px 26px var(--bg); }
body[data-page="umbau"] .page[data-page="umbau"] .art { background: var(--bg); }
@media (max-width: 860px) { .deco { width: 88vw; opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .deco path { stroke-dashoffset: 0 !important; } }

/* ===== Über uns: Team unter dem Text, links, nacheinander ===== */
.teamwrap { display: grid; grid-template-columns: repeat(2, minmax(0, 290px)); gap: 34px clamp(28px, 5vw, 64px); justify-content: start; }
.teamwrap .label { grid-column: 1 / -1; }
.teamwrap figure { margin: 0; display: flex; flex-direction: column; gap: 20px; }
.teamwrap .por { position: relative; aspect-ratio: 4 / 5; margin: 8px; border: 1px solid var(--line); box-shadow: 0 0 0 7px var(--bg), 0 0 0 8px var(--line); }
.teamwrap figcaption { display: flex; flex-direction: column; gap: 4px; }
.teamwrap .role { color: var(--muted); font-size: 1.02rem; }
.js .teamwrap figure.sr { transform: translateX(-46px); transition-duration: 1.6s, 1.8s; transition-delay: .15s; }
.js .teamwrap figure.sr.in { transform: none; }
.js .teamwrap figure.sr:last-child { transition-delay: .95s; }
.js .teamwrap figure.sr:not(.in) { transition-delay: 0s; }
@media (max-width: 520px) { .teamwrap { grid-template-columns: minmax(0, 290px); } }
@media (prefers-reduced-motion: reduce) { .js .teamwrap figure.sr { transform: none; } }

/* ===== Weniger Leerraum vor und nach dem Kontakt-Kasten ===== */
.page > section:last-child { padding-bottom: clamp(36px, 4.5vw, 64px); }
section.cta { padding-block: 0 clamp(44px, 5.5vw, 76px); }
.quote .wrap, .cta .wrap { padding-block: clamp(44px, 6vw, 76px); }

/* ===== Über uns: Text mittig, Team untereinander, Aufblenden beim Scrollen ===== */
.page[data-page="ueber-uns"] .hero .stack { align-items: center; text-align: center; }
.page[data-page="ueber-uns"] .hero h1 { max-width: 18ch !important; }
.page[data-page="ueber-uns"] .hero p:not(.label) { max-width: 58ch; }
.page[data-page="ueber-uns"] .label::after { content: ""; width: 38px; height: 1px; background: var(--accent); flex: none; }
.page[data-page="ueber-uns"] .drop::first-letter { float: none; font-size: 1em; padding: 0; color: inherit; font-family: inherit; }
.teamwrap { grid-template-columns: minmax(0, 340px); justify-content: center; gap: clamp(48px, 7vw, 90px); text-align: center; }
.teamwrap .label { justify-content: center; }
.teamwrap figcaption { align-items: center; }
.js .teamwrap figure.sr, .js .teamwrap figure.sr.up { opacity: 0; transform: none; transition: opacity 2.2s cubic-bezier(.4,0,.2,1) .1s; }
.js .teamwrap figure.sr.in { opacity: 1; }
.js .teamwrap figure.sr:last-child { transition-delay: .1s; }
@media (max-width: 520px) { .teamwrap { grid-template-columns: minmax(0, 300px); } }

/* Teamfotos im Querformat */
.teamwrap { grid-template-columns: minmax(0, 440px); }
.teamwrap .por { aspect-ratio: 3 / 2; }
.js .teamwrap .sr .ph.photo img { clip-path: none; transform: scale(1.06); transition: transform 3s cubic-bezier(.22,.61,.24,1); }
.js .teamwrap .sr.in .ph.photo img { transform: none; }
.js .teamwrap .sr .ph.photo::after { opacity: 1; }
@media (max-width: 520px) { .teamwrap { grid-template-columns: minmax(0, 100%); } }

/* Fotos ohne schwarzen Rand, nur feine Goldlinie */
.ph.photo { background: var(--bg); }
.ph.photo::after { box-shadow: none; }

/* «Das Team»: Linien ziehen sich mit dem Scrollen nach aussen, Text bleibt stehen */
.teamwrap .label { justify-self: center; width: max-content; max-width: none; }
.js .teamwrap .label.sr { opacity: 1; transform: none; transition: none; }
.page[data-page="ueber-uns"] .teamwrap .label::before, .page[data-page="ueber-uns"] .teamwrap .label::after { width: calc(38px + var(--t, 0) * min(30vw, 400px)); }
@media (prefers-reduced-motion: reduce) { .teamwrap .label::before, .teamwrap .label::after { width: 38px; } }

/* Zitat mit Anführungszeichen */
.quote blockquote { font-family: var(--label); font-style: italic; font-size: clamp(1.7rem, 3.8vw, 3rem); max-width: 24ch; }
.quote .qm { color: var(--accent); font-style: normal; font-family: var(--display); padding-inline: .08em; }
.quote .qby { margin: 26px auto 0; max-width: none; font-family: var(--label); font-size: .68rem; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); }

/* Startseite: weniger Abstand zwischen Bereichszeile und Zitat */
.page section.quiet { padding-block: clamp(36px, 4.5vw, 60px) clamp(32px, 4vw, 52px); }
.page section.quote { padding-top: 0; }

/* Unterseiten: oberer Bereich cremeweiss, darunter reines Weiss */
body:not([data-page="home"]) main { background: #FFFFFF; --bg: #FFFFFF; --card: #F6F3EC; }
body:not([data-page="home"]) .page > section.hero { background: #F6F3EC; --bg: #F6F3EC; border-bottom: 1px solid var(--line); }

/* Kontaktformular: Fläche im inneren Rahmen weiss */
form#kontaktform { background: #FFFFFF; box-shadow: inset 0 0 0 10px var(--bg); }

/* ===== Fusszeile: zwei Spalten, Logo unten bei Impressum ===== */
footer.foot { padding-block: 60px 0; }
.foot .wrap.fcols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px clamp(32px, 8vw, 120px); flex-direction: initial; padding-bottom: 54px; }
.foot .fcol { display: flex; flex-direction: column; gap: 14px; font-size: 1.06rem; }
.foot .fcol .h { font-family: var(--display); font-size: 1.5rem; letter-spacing: 0; text-transform: none; color: var(--ivory); margin-bottom: 10px; }
.foot .frow { display: flex; gap: 14px; align-items: flex-start; line-height: 1.55; overflow-wrap: anywhere; }
.foot .frow svg { width: 20px; height: 20px; flex: none; margin-top: 4px; fill: none; stroke: var(--g-light); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.foot .fcol a { line-height: 1.25; font-family: var(--body); font-size: 1.06rem; letter-spacing: 0; text-transform: none; opacity: .9; width: max-content; max-width: 100%; }
.foot .fbar { background: #24231F; }
.foot .fbar .wrap { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px 26px; padding-block: 18px; }
.foot .fbar .logo { width: 104px; background: var(--ivory); }
.foot .fbar .copy { font-size: .98rem; opacity: .85; }
.foot .fbar .legal { margin-left: auto; display: flex; gap: 28px; }
.foot .fbar .legal a { font-family: var(--body); font-size: .98rem; letter-spacing: 0; text-transform: none; }
@media (max-width: 620px) { .foot .wrap.fcols { grid-template-columns: 1fr; } .foot .fbar .legal { margin-left: 0; } }

/* Team: Platzhalter, bis die Fotos da sind */
.teamwrap .por.leer { aspect-ratio: 3 / 2 !important; }
.teamwrap .por .ph.soon { position: absolute; inset: 12px !important; margin: 0; display: grid; place-items: center; background: var(--card); color: var(--muted); }
.teamwrap .por .ph.soon::after { box-shadow: none; border-color: var(--line); }
.teamwrap .por .ph.soon span { color: var(--muted); opacity: 1; font-size: 1.05rem; gap: 16px; }
.teamwrap .por .ph.soon span::before { background: var(--g-brand); width: 46px; }

/* ===== Linien-Architektur: kräftiger auf Umbau, neu auch auf Verwaltung, STWEG, Verkauf und Über uns ===== */
body:is([data-page="verwaltung"],[data-page="stweg"],[data-page="verkauf"],[data-page="ueber-uns"]) .deco { display: flex; }
body[data-page="umbau"] .deco { opacity: .78; width: min(56vw, 920px); }
body[data-page="umbau"] .page[data-page="umbau"] .stack { box-shadow: 0 0 16px 12px var(--bg); border-radius: 0; }
body[data-page="verwaltung"] .deco { opacity: .6; }
body[data-page="verkauf"] .deco { opacity: .6; width: min(46vw, 760px); }
body:is([data-page="stweg"],[data-page="ueber-uns"]) .deco { right: auto; left: 0; transform: scaleX(-1); opacity: .6; }
body[data-page="ueber-uns"] .deco { width: min(34vw, 540px); }
/* Text, Listen und Bilder: Linien laufen dahinter weich aus */
body:is([data-page="verwaltung"],[data-page="stweg"],[data-page="verkauf"],[data-page="ueber-uns"]) .page .stack:not(.wrap), body:is([data-page="verwaltung"],[data-page="stweg"],[data-page="verkauf"],[data-page="ueber-uns"]) .page section:not(.hero) p.lead, body:is([data-page="verwaltung"],[data-page="stweg"],[data-page="verkauf"],[data-page="ueber-uns"]) .cols, body:is([data-page="verwaltung"],[data-page="stweg"],[data-page="verkauf"],[data-page="ueber-uns"]) .teamwrap figcaption, body:is([data-page="verwaltung"],[data-page="stweg"],[data-page="verkauf"],[data-page="ueber-uns"]) .teamwrap .label, body:is([data-page="verwaltung"],[data-page="stweg"],[data-page="verkauf"],[data-page="ueber-uns"]) #cta .wrap { background: var(--bg); box-shadow: 0 0 18px 12px var(--bg); }
body:is([data-page="verwaltung"],[data-page="stweg"],[data-page="verkauf"],[data-page="ueber-uns"]) .page .stack:not(.wrap) { border-radius: 0; }
body:is([data-page="verwaltung"],[data-page="stweg"],[data-page="verkauf"],[data-page="ueber-uns"]) .page .art, body:is([data-page="verwaltung"],[data-page="stweg"],[data-page="verkauf"],[data-page="ueber-uns"]) .page .band, body:is([data-page="verwaltung"],[data-page="stweg"],[data-page="verkauf"],[data-page="ueber-uns"]) .teamwrap .por { background: var(--bg); }

/* ===== Umbau: zweite Zeichnung links, gespiegelt, ab dem Abschluss der Seite ===== */
body .deco.deco2 { display: none; }
@media (min-width: 861px) {
  body[data-page="umbau"] .deco.deco2 { display: flex; right: auto; left: 0; width: min(46vw, 760px); opacity: .7; -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent); mask-image: linear-gradient(90deg, #000 78%, transparent); }
  body[data-page="umbau"] section.cta { padding-top: clamp(210px, 25vw, 350px); }
}

/* ===== Linien-Architektur auf dem Handy: volle Breite, kräftiger, mit eigenem Freiraum ===== */
@media (max-width: 860px) {
  body[data-page] .deco, body[data-page="umbau"] .deco.deco2 { width: 100vw; opacity: .7; -webkit-mask-image: none; mask-image: none; }
  body[data-page="umbau"] .deco.deco2 { display: flex; right: auto; left: 0; }
  body[data-page="umbau"] .page > section:nth-of-type(2) { padding-top: calc(42vw + 34px) !important; }
  body[data-page="umbau"] section.cta { padding-top: calc(50vw + 10px); }
}

/* Linien-Architektur nur auf der Umbau-Seite */
body:not([data-page="umbau"]) .deco { display: none !important; }
body:is([data-page="verwaltung"],[data-page="stweg"],[data-page="verkauf"],[data-page="ueber-uns"]) .page .stack:not(.wrap), body:is([data-page="verwaltung"],[data-page="stweg"],[data-page="verkauf"],[data-page="ueber-uns"]) .page section:not(.hero) p.lead, body:is([data-page="verwaltung"],[data-page="stweg"],[data-page="verkauf"],[data-page="ueber-uns"]) .cols, body:is([data-page="verwaltung"],[data-page="stweg"],[data-page="verkauf"],[data-page="ueber-uns"]) .teamwrap figcaption, body:is([data-page="verwaltung"],[data-page="stweg"],[data-page="verkauf"],[data-page="ueber-uns"]) .teamwrap .label, body:is([data-page="verwaltung"],[data-page="stweg"],[data-page="verkauf"],[data-page="ueber-uns"]) #cta .wrap { background: none; box-shadow: none; }

/* ===== Abschluss «Lernen wir uns kennen»: cremeweisses Band, zwei Spalten ===== */
#cta { background: #F6F3EC; --bg: #F6F3EC; border-top: 1px solid var(--line); padding-block: clamp(56px, 7vw, 96px); text-align: left; }
#cta .wrap.ctag { max-width: 1240px; width: 100%; margin-inline: auto; border: 0; outline: 0; padding-block: 0; background: none !important; box-shadow: none !important;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 6vw, 96px); align-items: center; }
#cta .stack { align-items: flex-start; background: none; box-shadow: none; gap: 16px; }
#cta .cside { border-left: 1px solid var(--line); padding-left: clamp(24px, 5vw, 72px); gap: 10px; }
#cta .ctel { font-family: var(--display); font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.1; font-variant-numeric: lining-nums; }
#cta .ctel a { text-decoration: none; }
#cta .chours { font-family: var(--label); font-style: italic; color: var(--muted); font-size: 1rem; }
#cta .btns { margin-top: 14px; }
.page section.quote { padding-bottom: clamp(40px, 5vw, 70px); }
@media (min-width: 861px) { body[data-page="umbau"] #cta { margin-top: clamp(210px, 25vw, 350px); } }
@media (max-width: 860px) {
  #cta { padding-block: 48px; }
  #cta .wrap.ctag { grid-template-columns: minmax(0, 1fr); gap: 26px; padding-inline: 20px; }
  #cta .cside { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 24px; }
  body[data-page="umbau"] #cta { margin-top: calc(50vw + 10px); }
}

/* ===== Linienzeichnungen (neu): je Seite ein Motiv, zeichnet sich beim Scrollen, endet mit dem Motiv ===== */
.lz { display: none; position: absolute; top: 0; bottom: 0; z-index: 0; pointer-events: none; overflow: hidden; width: var(--w); opacity: .72; }
.lz.r { right: 0; } .lz.l { left: 0; }
.lz svg { display: block; width: 100%; height: auto; }
.lz.mir svg { transform: scaleX(-1); }
.lz.fade { -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent); mask-image: linear-gradient(90deg, #000 78%, transparent); }
.lz path { fill: none; stroke: var(--accent); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1;
  stroke-dashoffset: clamp(0, calc(1 - (var(--d, 0) - var(--y) * var(--k, .6)) / (var(--h) * var(--k, .6) + 200)), 1); }
body[data-page="home"] .lz[data-for="home"],
body[data-page="verwaltung"] .lz[data-for="verwaltung"],
body[data-page="stweg"] .lz[data-for="stweg"],
body[data-page="verkauf"] .lz[data-for="verkauf"],
body[data-page="umbau"] .lz[data-for="umbau"],
body[data-page="ueber-uns"] .lz[data-for="ueber-uns"],
body[data-page="kontakt"] .lz[data-for="kontakt"] { display: block; }
.lzgap { height: clamp(190px, 24vw, 330px); }
/* Inhalt liegt über den Linien */
.page > section:not(.hero):not(.banner) :is(.cols, .stack:not(.wrap), p.lead, ul.plain, .teamwrap figcaption, .teamwrap .label, .four) { background: var(--bg); box-shadow: 0 0 14px 10px var(--bg); }
.page > section:not(.hero):not(.banner) :is(.art, .band, .teamwrap .por), .quote .wrap { background: var(--bg); }
@media (min-width: 861px) { .page[data-page="stweg"] > section:nth-of-type(2) { padding-top: clamp(150px, 17vw, 250px); } }
@media (max-width: 860px) {
  .lz { width: 100vw; }
  .lzgap { height: 56vw; }
  body:is([data-page="verwaltung"],[data-page="stweg"],[data-page="verkauf"],[data-page="ueber-uns"]) .page > section:nth-of-type(2) { padding-top: calc(42vw + 34px) !important; }
}
@media (prefers-reduced-motion: reduce) { .lz path { stroke-dashoffset: 0 !important; } }

/* ===== Hohe Fassadenzeichnungen: kommen von der Seite, seitlich angeschnitten ===== */
.lz { width: min(30vw, 440px); -webkit-mask-image: none; mask-image: none; }
.lz.l svg { transform: translateX(-24%); }
.lz.r svg { transform: translateX(24%); }
body[data-page="umbau"] #cta { margin-top: 0 !important; }
@media (min-width: 861px) { .page[data-page="stweg"] > section:nth-of-type(2) { padding-top: clamp(70px, 10vw, 140px); } }
@media (max-width: 860px) { .lz { width: 74vw; } .lz.l svg { transform: translateX(-16%); } .lz.r svg { transform: translateX(16%); } }

/* Zeichnungen grösser; um Text und Bilder weich verblassen */
.lz { width: min(42vw, 640px); }
.lz.l svg { transform: translateX(-20%); } .lz.r svg { transform: translateX(20%); }
.page > section:not(.hero):not(.banner) :is(.cols, .stack:not(.wrap), p.lead, ul.plain, .teamwrap figcaption, .teamwrap .label, .four) { box-shadow: 0 0 38px 30px var(--bg) !important; border-radius: 0; }
.page > section:not(.hero):not(.banner) :is(.art, .band, .teamwrap .por) { box-shadow: 0 0 0 7px var(--bg), 0 0 0 8px var(--line), 0 0 40px 34px var(--bg); }
.quote .wrap { box-shadow: 0 0 40px 30px var(--bg); }
@media (max-width: 860px) { .lz { width: 90vw; } .lz.l svg { transform: translateX(-12%); } .lz.r svg { transform: translateX(12%); }
  .page > section:not(.hero):not(.banner) :is(.cols, .stack:not(.wrap), p.lead, ul.plain, .teamwrap figcaption, .teamwrap .label, .four) { box-shadow: 0 0 24px 16px var(--bg) !important; }
  .page > section:not(.hero):not(.banner) :is(.art, .band, .teamwrap .por) { box-shadow: 0 0 0 7px var(--bg), 0 0 0 8px var(--line), 0 0 26px 18px var(--bg); } }

.facts a, .foot .frow a { font: inherit; letter-spacing: 0; text-transform: none; text-decoration: none; opacity: 1; }
.facts a:hover, .foot .frow a:hover { text-decoration: underline; }

/* ===== Handy und Tablet ===== */
header.top { background: rgba(246, 243, 236, .95); }
main { overflow-x: hidden; overflow-x: clip; }
.menu-btn { display: none; }
.page[data-page="ueber-uns"] > section:nth-of-type(2) { padding-top: clamp(40px, 6vw, 72px) !important; }
.wrap { padding-left: max(clamp(20px, 5vw, 56px), env(safe-area-inset-left, 0px)); padding-right: max(clamp(20px, 5vw, 56px), env(safe-area-inset-right, 0px)); }
@media (max-width: 860px) {
  .top .wrap { padding-block: 10px; }
  .top .logo { width: 124px; }
  .menu-btn { display: inline-flex; flex-direction: column; justify-content: center; gap: 6px; width: 48px; height: 48px; padding: 0 12px; margin: 0; background: none; border: 1px solid var(--line); border-radius: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; color: inherit; }
  .menu-btn span { display: block; width: 100%; height: 1px; background: var(--ink); transition: transform .35s ease, opacity .25s ease; }
  .top.open .menu-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .top.open .menu-btn span:nth-child(2) { opacity: 0; }
  .top.open .menu-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .js nav.main { display: none; }
  .js .top.open nav.main { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 0; position: absolute; top: 100%; left: 0; right: 0; background: #F6F3EC; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); box-shadow: 0 18px 30px rgba(22, 22, 20, .10);
    padding: 4px max(20px, env(safe-area-inset-right, 0px)) 12px max(20px, env(safe-area-inset-left, 0px)); max-height: calc(100vh - 76px); overflow-y: auto; }
  .js .top.open nav.main a { font-size: .8rem; letter-spacing: .24em; padding: 18px 2px; border-bottom: 1px solid var(--line); }
  .js .top.open nav.main a:last-child { border-bottom: 0; }
  .js .top.open nav.main a[aria-current="page"] { color: var(--accent); border-color: var(--line); }
  body { font-size: 1.0938rem; }
  section { padding-block: 54px; }
  .hero { padding-block: 34px 46px; }
  h1 { font-size: clamp(2rem, 8.6vw, 2.9rem); }
  h2 { font-size: clamp(1.75rem, 7.2vw, 2.4rem); }
  h1, h2, h3, .index h3, .four .k { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
  .lead { font-size: 1.2rem; }
  .label { letter-spacing: .22em; }
  .btns .btn { flex: 1 1 100%; text-align: center; padding-inline: 18px; }
  .cols > div { padding-right: 0; }
  .quote .wrap { width: auto; margin-inline: 16px; padding-inline: 20px; }
  .quote blockquote { font-size: clamp(1.45rem, 6.2vw, 2.2rem); }
  .art, .duo .art, .duo.flip .art, .band, .teamwrap .por { aspect-ratio: auto !important; width: auto; max-width: none; margin: 8px; justify-self: stretch; }
  .art .ph.photo, .band .ph.photo, .teamwrap .por .ph.photo { position: relative; inset: auto !important; margin: 12px; display: block; }
  .ph.photo img { position: static; width: 100%; height: auto; }
  .banner { min-height: min(84vh, 700px); min-height: min(84svh, 700px); }
  .banner .wrap { padding-block: 64px; gap: 18px; }
  .banner h1 { font-size: clamp(1.7rem, 9.2vw, 2.8rem); letter-spacing: .1em; margin-right: -.1em; -webkit-hyphens: none; hyphens: none; }
  .bsub { letter-spacing: .2em; line-height: 1.9; font-size: .7rem; }
  .bcreed { font-size: 1.15rem; }
  .banner .btn { flex: none; }
  dl.facts { grid-template-columns: minmax(0, 1fr); }
  dl.facts dt { border-bottom: 0; padding: 16px 0 0; }
  dl.facts dd { padding: 4px 0 16px; }
  form#kontaktform { padding: 30px 22px; }
  .foot .fbar .legal { margin-left: 0; width: 100%; }
  /* Zeichnungen: auf dem Handy als Ganzes mit dem Scrollen aufdecken (flüssiger) */
  .lz path { stroke-dashoffset: 0 !important; }
  .lz svg { -webkit-clip-path: inset(0 0 calc((1 - var(--f, 0)) * 100%) 0); clip-path: inset(0 0 calc((1 - var(--f, 0)) * 100%) 0); }
}
@media (max-width: 860px) and (prefers-reduced-motion: reduce) { .lz svg { -webkit-clip-path: none; clip-path: none; } }
@media (min-width: 600px) and (max-width: 860px) { .art, .duo .art, .duo.flip .art { width: 100%; max-width: 500px; justify-self: center; margin: 8px auto; } }
@media (max-width: 360px) { .wrap { padding-left: 16px; padding-right: 16px; } .top .logo { width: 112px; } }

/* ===== Jobs ===== */
body[data-page="jobs"] .lz[data-for="jobs"] { display: block; }
.page[data-page="jobs"] .hero { padding-block: clamp(70px, 10vw, 150px); }
.page[data-page="jobs"] .hero .stack { align-items: center; text-align: center; }
.page[data-page="jobs"] .label::after { content: ""; width: 38px; height: 1px; background: var(--accent); flex: none; }

/* ===== Partner ===== */
body[data-page="partner"] .lz[data-for="partner"] { display: block; }
.page[data-page="partner"] .hero { padding-block: clamp(60px, 8vw, 120px); }
.page[data-page="partner"] .hero .stack { align-items: center; text-align: center; }
.page[data-page="partner"] .hero .label::after { content: ""; width: 38px; height: 1px; background: var(--accent); flex: none; }
.partner { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.partner .pmotto { color: var(--muted); font-size: 1.2rem; }
@media (max-width: 860px) { .partner { grid-template-columns: minmax(0, 1fr); } }

/* ===== Zu vermieten ===== */
body[data-page="vermieten"] .lz[data-for="vermieten"] { display: block; }
.page[data-page="vermieten"] .hero { padding-block: clamp(60px, 8vw, 120px); }
.page[data-page="vermieten"] .hero .stack { align-items: center; text-align: center; }
.page[data-page="vermieten"] .hero .label::after { content: ""; width: 38px; height: 1px; background: var(--accent); flex: none; }
.zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 6vw, 96px); align-items: start; }
.zwei .stack + .stack { border-left: 1px solid var(--line); padding-left: clamp(24px, 5vw, 72px); }
.zwei h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
@media (max-width: 860px) { .zwei { grid-template-columns: minmax(0, 1fr); } .zwei .stack + .stack { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 34px; } }

/* ===== Zu verkaufen ===== */
body[data-page="zuverkaufen"] .lz[data-for="zuverkaufen"] { display: block; }
.page[data-page="zuverkaufen"] .hero { padding-block: clamp(70px, 10vw, 150px); }
.page[data-page="zuverkaufen"] .hero .stack { align-items: center; text-align: center; }
.page[data-page="zuverkaufen"] .label::after { content: ""; width: 38px; height: 1px; background: var(--accent); flex: none; }

/* Slogan */
.bcreed { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
.foot .fbar .fslogan { font-family: var(--label); font-style: italic; font-size: 1rem; color: var(--g-light); }

/* ===== Impressum und Datenschutz ===== */
.page:is([data-page="impressum"],[data-page="datenschutz"]) .hero { padding-block: clamp(56px, 7vw, 100px); }
.page:is([data-page="impressum"],[data-page="datenschutz"]) .hero .stack { align-items: center; text-align: center; }
.page:is([data-page="impressum"],[data-page="datenschutz"]) .hero .label::after { content: ""; width: 38px; height: 1px; background: var(--accent); flex: none; }
.page:is([data-page="impressum"],[data-page="datenschutz"]) .hero .lead { max-width: 60ch; font-size: 1.2rem; }
.legal { max-width: 70ch; margin-inline: auto; display: flex; flex-direction: column; gap: 14px; }
.legal h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--line); }
.legal h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal h3 { font-family: var(--label); font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-top: 22px; }
.legal p { max-width: none; }
.legal a { text-underline-offset: 3px; }
.legal ul.plain { border-top: 1px solid var(--line); background: none !important; box-shadow: none !important; }
.legal ul.plain li { padding-block: 11px; } .legal ul.plain li::before { top: 1.35em; }

/* Impressum und Datenschutz nebeneinander */
.foot .fbar .legal { display: flex !important; flex-direction: row !important; flex-wrap: nowrap; align-items: center; gap: 28px; width: auto !important; white-space: nowrap; }
.foot .fbar .legal a { display: inline-block; width: auto; }

/* Rechtstexte: kein Verblassen um die Aufzählungen */
.page > section:not(.hero):not(.banner) .legal :is(ul.plain, p, h2, h3) { box-shadow: none !important; background: none !important; }

/* ===== Cookie-Hinweis ===== */
.ck { position: fixed; z-index: 60; left: max(18px, env(safe-area-inset-left, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); width: min(460px, calc(100vw - 36px));
  background: #F6F3EC; color: #1B1B19; border: 1px solid #DCD6C8; box-shadow: 0 0 0 6px #F6F3EC, 0 0 0 7px #DCD6C8, 0 22px 50px rgba(22, 22, 20, .22);
  opacity: 0; transform: translateY(26px); pointer-events: none; transition: opacity .7s ease, transform .9s cubic-bezier(.22,.61,.24,1); }
.ck.on { opacity: 1; transform: none; pointer-events: auto; }
.ck-in { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 18px; padding: 24px 24px 22px; }
.ck-mono { width: 34px; aspect-ratio: 2248 / 2426; background: #3C5B3C; margin-top: 2px; -webkit-mask: var(--mono) center / contain no-repeat; mask: var(--mono) center / contain no-repeat; }
.ck-h { font-family: var(--label); font-size: .7rem; letter-spacing: .28em; text-transform: uppercase; color: #9C8450; margin-bottom: 8px; }
.ck-txt p:not(.ck-h) { font-size: 1.02rem; line-height: 1.5; color: #4E4A42; max-width: none; }
.ck-txt a { color: inherit; text-underline-offset: 3px; }
.ck-btns { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; }
.ck-btns .btn { flex: 1 1 150px; text-align: center; padding: 14px 16px; font-size: .62rem; letter-spacing: .22em; background: #161614; border-color: #161614; color: #F6F3EC; }
.ck-btns .btn.ghost { background: transparent; color: #1B1B19; border-color: #1B1B19; }
.ck-btns .btn:hover { background: #9C8450; border-color: #9C8450; color: #F6F3EC; }
@media (max-width: 520px) { .ck { left: 12px; width: calc(100vw - 24px); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); } .ck-in { padding: 20px 18px 18px; } }
@media (prefers-reduced-motion: reduce) { .ck { transition: none; transform: none; } }

/* Verwaltung ohne Zeichnung: kein Freiraum auf dem Handy nötig */
@media (max-width: 860px) { body[data-page="verwaltung"] .page > section:nth-of-type(2) { padding-top: 54px !important; } }
.lz { contain: layout paint; }
.lz.done path { stroke-dashoffset: 0; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Zeichnung auf dem Handy weich nachführen */
@media (max-width: 860px) { .lz img { transition: clip-path .35s linear, -webkit-clip-path .35s linear; } }
/* ===== Leichte Fassung der Zeichnungen (Bild), v. a. für Handys ===== */
.lz img { display: block; width: 100%; height: auto; max-width: none; -webkit-clip-path: inset(0 0 calc((1 - var(--f, 0)) * 100%) 0); clip-path: inset(0 0 calc((1 - var(--f, 0)) * 100%) 0); }
.lz.l img { transform: translateX(-20%); } .lz.r img { transform: translateX(20%); }
@media (max-width: 860px) {
  .lz.l img { transform: translateX(-12%); } .lz.r img { transform: translateX(12%); }
  header.top { -webkit-backdrop-filter: none; backdrop-filter: none; background: #F6F3EC; }
  .banner-img { inset: 0; transform: none !important; will-change: auto; }
  .banner .wrap { transform: none !important; opacity: 1 !important; }
  .js .sr { will-change: auto; transform: translateY(18px); }
  .js .sr.up { transform: translateY(-18px); }
  .js .art.sr .ph, .js .band.sr .ph, .js .sr .ph.photo img, .js .teamwrap .sr .ph.photo img { transform: none !important; -webkit-clip-path: none !important; clip-path: none !important; transition: none; }
  .js .sr .ph.photo::after { opacity: 1; transition: none; }
  .page > section:not(.hero):not(.banner) :is(.cols, .stack:not(.wrap), p.lead, ul.plain, .teamwrap figcaption, .teamwrap .label, .four) { box-shadow: 0 0 0 10px var(--bg) !important; }
  .page > section:not(.hero):not(.banner) :is(.art, .band, .teamwrap .por) { box-shadow: 0 0 0 7px var(--bg), 0 0 0 8px var(--line); }
  .quote .wrap { box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .lz img { -webkit-clip-path: none; clip-path: none; } }