/* Entwurf 9 · hell wie Entwurf 8, Typo nach „Wilderness Stories“ (Playfair 400 + Jost 300). Gilt NUR für die Startseite (lädt nach style.css); Unterseiten bleiben Entwurf 8. */
:root {
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --book: Jost, 'Futura', sans-serif; --sans: Jost, 'Futura', sans-serif;
  --gap: 4px;
}
@media (max-width: 899px) { :root { --gap: 3px; } }
body { font: 300 15.5px/1.7 var(--sans); letter-spacing: .01em; color: var(--mute); }
@media (min-width: 900px) { body { font-size: 16px; } }
p, li, dd { font-family: var(--sans); }
em { font-family: var(--serif); font-weight: 400; font-style: italic; letter-spacing: 0; }
strong, b { color: var(--ink); font-weight: 400; }

/* Hero: Video, Text weiß, Verlauf nur leicht */
.hero::before { height: 35%; background: linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,0)); }
.hero::after { inset: 0; background: linear-gradient(to top, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 35%), rgba(0,0,0,.08); }
.hero-txt { top: 36%; left: var(--gutter); right: var(--gutter); transform: translateY(-50%); text-align: center; }
@media (min-width: 601px) { .hero { aspect-ratio: auto; max-height: none; height: 100svh; min-height: 560px; } .hero-txt { left: 40px; right: 40px; } }
@media (max-width: 600px) { .hero-txt { top: 34%; } }
.hero h1 { margin: 0; font: 400 clamp(44px, 6.4vw, 92px)/1.05 var(--serif); letter-spacing: 0; text-transform: none; color: #fff; text-shadow: 0 2px 30px rgba(0,0,0,.3); }
.hero h1 em { font-weight: 400; color: #fff; }
@media (max-width: 600px) { .hero h1 { font-size: clamp(44px, 12.5vw, 60px); } }
.hero-sub { margin: 26px 0 0; font: 300 15px/1.7 var(--sans); letter-spacing: .02em; color: #fff; text-shadow: 0 1px 14px rgba(0,0,0,.45); }
.hero-side { display: none; position: absolute; z-index: 1; color: #fff; font: 400 11px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; text-shadow: 0 1px 8px rgba(0,0,0,.4); }
@media (min-width: 900px) {
  .hero-side { display: flex; flex-direction: column; gap: 14px; }
  .hs-l { left: 40px; top: 110px; align-items: flex-start; }
  .hs-r { right: 40px; bottom: 90px; align-items: center; }
}
.dots { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 0 0 0 3px; height: 70px; font-style: normal; }
.dots b { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.45); }
.dots b.on { background: #fff; width: 5px; height: 5px; margin-left: -.5px; }
.dots::after { content: ""; position: absolute; left: 4.5px; top: 62px; width: 1px; height: 36px; background: rgba(255,255,255,.6); }
.ln { display: block; width: 1px; height: 40px; background: rgba(255,255,255,.7); }
.nav a, .nav button { font-weight: 400; letter-spacing: .22em; font-size: 11px; }

/* Einstieg */
.intro .lead { font: 400 clamp(26px, 3vw, 36px)/1.3 var(--serif); color: var(--ink); }
.intro .text, .hz-txt .text, .about-txt .text, .wer-grid .text { font: 300 16px/1.7 var(--sans); color: var(--mute); }
.intro .text em, .about-txt .text em { font-size: 1.05em; color: var(--ink); }
.lead, .kicker { font-family: var(--serif); }
.kicker { font: 400 11px/1.8 var(--sans); letter-spacing: .22em; }
.qlink.up { font: 400 11px/1.8 var(--sans); letter-spacing: .22em; }

/* Album-Bänder: Querformat, Panorama rechts, Verlauf nach Weiß, Typo links */
.hz { margin-top: clamp(56px, 8vw, 112px); }
.intro + .hz { margin-top: clamp(56px, 8vw, 100px); }
.album { position: relative; margin: 0 0 var(--gap); aspect-ratio: 2.2 / 1; overflow: hidden; background: #fff; isolation: isolate; color: #1A1B1D; }
.album > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 75% 60%; }
.album::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.75) 28%, rgba(255,255,255,0) 50%); pointer-events: none; }
.album-txt { position: absolute; inset: 0; margin: 0; padding: 0 0 0 clamp(40px, 6vw, 96px); display: flex; flex-direction: column; justify-content: center; width: 380px; max-width: calc(100% - 96px); box-sizing: content-box; }
.album-txt .no { position: absolute; top: clamp(24px, 3vw, 44px); left: clamp(40px, 6vw, 96px); margin: 0; padding: 0 0 9px; width: 40px; border-bottom: 1px solid rgba(26,27,29,.4); font: 300 13px/1 var(--sans); letter-spacing: .08em; color: #1A1B1D; box-sizing: content-box; }
.album-t { margin: 0; font: 400 clamp(32px, 3.4vw, 52px)/1.05 var(--serif); letter-spacing: 0; color: #1A1B1D; white-space: nowrap; }
.album-p { margin: 22px 0 0; max-width: 380px; font: 300 15px/1.7 var(--sans); letter-spacing: .01em; color: #1A1B1D; }
.qlink { display: inline-flex; align-items: center; gap: 16px; align-self: flex-start; margin: 28px 0 0; padding: 4px 0; font: 400 11px/1.8 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: #1A1B1D; text-decoration: none; }
.qlink::after { content: ""; width: 40px; height: 1px; background: currentColor; transition: width .4s var(--ease); }
.qlink:hover::after { width: 60px; }
@media (max-width: 760px) {
  .album { aspect-ratio: 1.1 / 1; }
  .album > img { object-position: 70% 50%; }
  .album::before { background: linear-gradient(0deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.75) 40%, rgba(255,255,255,0) 75%); }
  .album-txt { inset: auto 0 0 0; width: auto; max-width: none; padding: 0 var(--gutter) 24px; justify-content: flex-end; box-sizing: border-box; }
  .album-txt .no { top: 18px; left: var(--gutter); color: #fff; border-bottom-color: rgba(255,255,255,.7); text-shadow: 0 1px 8px rgba(0,0,0,.4); }
  .album-t { font-size: clamp(28px, 7.6vw, 36px); white-space: normal; }
  .album-p { margin-top: 12px; font-size: 14px; }
  .album-p br { display: none; }
  .qlink { margin-top: 14px; }
}

/* Raster: weiße Fugen (Flächenfarbe der Kacheln hell) */
.grid > figure { background: #F4F4F4; }

/* Zitat, Über-Baustein, Kalkulator-Block */
.qp-txt blockquote p { font: 400 clamp(28px, 4.6vw, 52px)/1.18 var(--serif); }
.hz-t { font: 400 clamp(30px, 4vw, 46px)/1.1 var(--serif); color: var(--ink); }
.fav-t { font: 400 clamp(36px, 5vw, 60px)/1.1 var(--serif); letter-spacing: .02em; text-transform: none; }
.fav-s { font: 300 16px/1.7 var(--sans); font-style: normal; }
.fav-s em { color: var(--ink); }
.btn.fav-btn { font: 400 11px/1 var(--sans); letter-spacing: .24em; }
h2.q { font: 400 clamp(36px, 5vw, 60px)/1.1 var(--serif); color: var(--ink); }
.contact a { font: 400 22px/1.4 var(--serif); }
.imp, .imp a { font: 300 13px/1.8 var(--sans); }
@media (max-width: 760px) {
  .album { aspect-ratio: .86 / 1; }
  .album > img { object-position: 33% 40%; }
  .album::before { background: linear-gradient(0deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.8) 32%, rgba(255,255,255,0) 58%); }
}
@media (max-width: 760px) {
  .album { aspect-ratio: .8 / 1; }
  .album > img { inset: 0 0 auto 0; height: 70%; object-position: 30% 50%; }
  .album::before { background: linear-gradient(0deg, #fff 0%, #fff 30%, rgba(255,255,255,0) 66%); }
}