/* RIVA home – CÄSAR® 2026 Landingpage · Designrichtung „Leise Auszeichnung" · mobile first */

@font-face { font-family: "Instrument Serif"; src: url("assets/fonts/instrument-serif-latin.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("assets/fonts/instrument-serif-italic-latin.woff2") format("woff2"); font-style: italic; font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("assets/fonts/inter-latin-var.woff2") format("woff2"); font-style: normal; font-weight: 100 900; font-display: swap; }

:root {
  --lila: #7B1469;
  --aubergine: #3D0A34;
  --champagner: #C8B48A;
  --creme: #EFE7D6;
  --weiss: #FFFFFF;
  --tinte: #1A1418;
  --grau: #5a4a55;
  --serif: "Instrument Serif", "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --content: 81.25rem;                    /* einheitliche Inhaltsbreite ≈ 1.300 px (Desktop) */
  --pad: clamp(1.25rem, 5vw, 3rem);       /* einheitlicher Seitenabstand */
  --edge: max(var(--pad), calc((100vw - var(--content)) / 2));  /* linke Rasterkante für randabfallende Layouts */
  --y: clamp(4rem, 8.5vw, 6.75rem);       /* einheitlicher Sektionsabstand */
  --header-h: 5rem;                       /* Header-Höhe oben */
  --header-c: 5rem;                       /* Header-Höhe nach dem Scrollen */
  --logo: 3.75rem;                        /* Logo-Datei ist randlos (Marke füllt die Fläche) */
  --logo-c: 3.75rem;
  --bar-h: 4.25rem;                       /* mobile Aktionsleiste */
  --seam: 2px solid var(--champagner);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); }
body { margin: 0; padding-top: calc(var(--header-h) + 2px + env(safe-area-inset-top)); font-family: var(--sans); font-size: 1.0625rem; line-height: 1.6; color: var(--tinte); background: var(--creme); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
p { margin: 0 0 1em; text-wrap: pretty; }
h1, h2, h3 { margin: 0; font-weight: 400; }
ol { list-style: none; margin: 0; padding: 0; }
a { color: var(--lila); text-underline-offset: .2em; }
a:hover { color: var(--aubergine); }
::selection { background: var(--champagner); color: var(--aubergine); }
:focus-visible { outline: 3px solid var(--lila); outline-offset: 3px; }
.site-header :focus-visible, .hero :focus-visible, .people__band :focus-visible, .site-footer :focus-visible, .action-bar :focus-visible { outline-color: var(--champagner); }

.wrap { width: 100%; max-width: calc(var(--content) + 2 * var(--pad)); margin: 0 auto; padding: 0 var(--pad); }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--creme); color: var(--aubergine); padding: .75rem 1rem; font-weight: 600; }
.skip-link:focus { top: 1rem; }

/* Fotos: Ausschnitt per object-fit/object-position; fehlendes Bild = ruhige Fläche */
img[data-photo] { width: 100%; object-fit: cover; background: #d9cfbd; }
img.is-missing { color: transparent; }

/* Typografie */
.kicker { font-size: .75rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 1.25rem; display: flex; align-items: center; gap: 1rem; }
.kicker--line::before { content: ""; width: 2.5rem; height: 2px; background: currentColor; flex: none; }
.kicker--champagne { color: var(--champagner); }
.kicker--lila { color: var(--lila); }
.h2 { font-family: var(--serif); font-size: clamp(2.5rem, 8.5vw, 5rem); line-height: 1.02; letter-spacing: -.005em; margin-bottom: 1.5rem; text-wrap: balance; }
.h2 em, .h3 em { display: block; }
.h2--xl { font-size: clamp(2.75rem, 9.5vw, 5.75rem); }
.h2--light { color: var(--aubergine); }
.h2--light em { color: var(--lila); }
.h2--dark { color: var(--creme); }
.h2--dark em { color: var(--champagner); }
.h3 { font-family: var(--serif); font-size: clamp(1.875rem, 5.5vw, 2.75rem); line-height: 1.06; color: var(--aubergine); margin-bottom: 1.25rem; text-wrap: balance; }
.h3 em { color: var(--lila); }
.lead { font-size: clamp(1.0625rem, 1.5vw, 1.1875rem); max-width: 34rem; }

/* Buttons & Links */
.btn { display: inline-flex; align-items: center; gap: .75rem; min-height: 3.25rem; padding: .875rem 1.5rem; font-size: 1rem; font-weight: 600; line-height: 1.2; text-decoration: none; border: 2px solid transparent; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.btn span, .textlink span { transition: transform .2s ease; }
.btn:hover span, .textlink:hover span { transform: translateX(4px); }
.btn--sm { min-height: 2.75rem; padding: .625rem 1.25rem; font-size: .9375rem; }
.btn--champagne { background: var(--champagner); color: var(--aubergine); }
.btn--champagne:hover { background: var(--creme); color: var(--aubergine); }
.btn--lila { background: var(--lila); color: var(--weiss); }
.btn--lila:hover { background: var(--aubergine); color: var(--weiss); }
.btn--outline { border-color: var(--champagner); color: var(--creme); }
.btn--outline:hover { background: var(--champagner); color: var(--aubergine); }
.textlink { display: inline-flex; align-items: center; gap: .6rem; min-height: 3rem; font-weight: 600; color: var(--lila); text-decoration: none; border-bottom: 2px solid var(--champagner); }

/* Header – immer sichtbar, Aubergine-Fläche, auf Desktop nach dem Scrollen kompakter */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 50; background: var(--aubergine); border-bottom: var(--seam); padding: env(safe-area-inset-top) max(var(--edge), env(safe-area-inset-right)) 0 max(var(--edge), env(safe-area-inset-left)); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); transition: height .25s ease; }
.site-header__logo { display: block; flex: none; width: var(--logo); height: var(--logo); transition: width .25s ease, height .25s ease; }
.site-header__logo img { width: 100%; height: 100%; }
.site-header.is-compact .site-header__inner { height: var(--header-c); }
.site-header.is-compact .site-header__logo { width: var(--logo-c); height: var(--logo-c); }
.site-nav { display: none; }
.site-nav__link { color: var(--creme); font-size: 1.0625rem; font-weight: 500; line-height: 1.2; text-decoration: none; padding: .5rem 0 .375rem; border-bottom: 2px solid var(--champagner); }
.site-nav__link:hover { color: var(--champagner); }

/* 1 · Hero */
.hero { display: flex; flex-direction: column; background: var(--aubergine); color: var(--creme); }
.hero__panel { padding: 2.25rem var(--pad) 2.5rem; }
.hero__title { font-family: var(--serif); font-size: clamp(3rem, 14.5vw, 7rem); line-height: .98; letter-spacing: -.01em; margin-bottom: 1.5rem; hyphens: manual; }
.hero__title em { display: block; color: var(--champagner); }
.hero__intro { font-size: 1rem; line-height: 1.62; max-width: 32rem; margin-bottom: 2rem; }
.hero__intro:has(+ .hero__intro) { margin-bottom: 1em; }
.colophon { display: flex; align-items: center; gap: 1.25rem; margin-top: 2.25rem; padding-top: 1.5rem; border-top: var(--seam); }
.colophon p { margin: 0; font-size: .8125rem; line-height: 1.55; letter-spacing: .03em; color: var(--champagner); }
/* Emblem: Original unverändert. Die PNG enthält bereits die weiße Kreisfläche bis zum Rand – daher kein zusätzlicher Innenabstand */
.seal { flex: none; width: 8rem; aspect-ratio: 1; }
.seal img { width: 100%; height: 100%; object-fit: contain; }
.hero__media { border-top: var(--seam); }
.hero__media img { aspect-ratio: 4 / 3; object-position: 50% 22%; }

/* 2 · CÄSAR */
.award { background: var(--creme); padding: var(--y) 0; }
.award__grid { display: grid; gap: 2.5rem; }
.award__text p:not(.kicker) { max-width: 34rem; }
.award__text > :last-child { margin-bottom: 0; }
.factline { display: grid; grid-template-columns: repeat(2, max-content); gap: .5rem 2rem; margin: -.5rem 0 0; padding: .875rem 0; border-top: var(--seam); border-bottom: var(--seam); font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--lila); }
.factline span { white-space: nowrap; }
.factline__date { letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.award__portrait img { aspect-ratio: 4 / 5; object-position: 30% 25%; }
@media (max-width: 959px) { .award__portrait { width: min(100%, 30rem); } }
/* Galafoto: natürliches Seitenverhältnis aus Datei/Attributen – kein Beschnitt */
.award__gala { margin: 0 calc(var(--pad) * -1); }
.award__gala img { aspect-ratio: 3 / 2; object-position: 50% 40%; }
.award figcaption { margin-top: .75rem; font-size: .8125rem; line-height: 1.5; color: var(--grau); max-width: 40rem; }
.award__gala figcaption { padding: 0 var(--pad); }
.credit { display: block; margin-top: .25rem; font-weight: 600; color: var(--aubergine); }
/* Pokal – freigestelltes Originalfoto (assets/images/pokal.png) auf ruhiger Aubergine-Bühne */
.trophy { position: relative; overflow: hidden; margin: 0 calc(var(--pad) * -1); aspect-ratio: 4 / 5; max-height: 40rem; background:
  linear-gradient(to bottom, transparent calc(80% - 1px), rgba(200, 180, 138, .4) calc(80% - 1px), rgba(200, 180, 138, .4) 80%, transparent 80%),
  radial-gradient(ellipse 55% 50% at 50% 45%, rgba(200, 180, 138, .26), rgba(200, 180, 138, 0) 72%),
  linear-gradient(180deg, #48103e 0%, var(--aubergine) 80%, #2f0828 80%, #27061f 100%); }
.trophy__obj { position: absolute; left: 50%; bottom: 18%; height: 70%; aspect-ratio: 336 / 1400; transform: translate3d(-50%, var(--ty, 0px), 0) perspective(1000px) rotateY(var(--ry, 0deg)); will-change: transform; }
.trophy__obj img { width: 100%; height: 100%; object-fit: contain; }
.trophy::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 42% 46% at 50% 44%, rgba(240, 205, 140, .5), rgba(240, 205, 140, 0) 70%); opacity: var(--gl, .45); transition: opacity .2s linear; }
.trophy__sheen { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(170deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 80%) no-repeat 0 var(--sy, -60%) / 100% 34%; -webkit-mask: url("assets/images/pokal.png") center / 100% 100% no-repeat; mask: url("assets/images/pokal.png") center / 100% 100% no-repeat; }
.trophy__shadow { position: absolute; left: 50%; bottom: calc(18% - .5rem); width: 34%; height: 1.5rem; transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0) 70%); }
.trophy figcaption { position: absolute; left: 0; right: 0; bottom: 6.5%; text-align: center; font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--champagner); }
@media (min-width: 600px) and (max-width: 959px) { .trophy { margin: 0; } }

/* Floating-Emblem – verlinkt zur offiziellen Award-Website; mobil klein über der Aktionsleiste */
.award-float { display: block; position: fixed; z-index: 44; right: max(1rem, env(safe-area-inset-right)); bottom: calc(var(--bar-h) + 2px + env(safe-area-inset-bottom) + .75rem); width: 3.75rem; border-radius: 50%; box-shadow: 0 4px 14px rgba(26, 20, 24, .28); opacity: 0; visibility: hidden; transform: translateY(.5rem); transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s; }
.award-float img { width: 100%; height: auto; }
.award-float.is-visible, .no-js .award-float { opacity: 1; visibility: visible; transform: none; transition: opacity .3s ease, transform .3s ease, visibility 0s; }
@media (min-width: 960px) and (max-width: 1023px) { .award-float { display: none; } }
@media (min-width: 1024px) {
  .award-float { display: block; position: fixed; z-index: 40; right: 1.75rem; bottom: 1.75rem; width: 6rem; border-radius: 50%; box-shadow: 0 6px 18px rgba(26, 20, 24, .18); opacity: 0; visibility: hidden; transform: translateY(.5rem); transition: opacity .3s ease, transform .3s ease, box-shadow .3s ease, visibility 0s linear .3s; }
  .award-float img { width: 100%; height: auto; }
  .award-float.is-visible, .no-js .award-float { opacity: 1; visibility: visible; transform: none; transition: opacity .3s ease, transform .3s ease, box-shadow .3s ease, visibility 0s; }
  .award-float.is-visible:hover { transform: scale(1.06); box-shadow: 0 10px 26px rgba(26, 20, 24, .26); }
}

/* 3 · Prinzip – Wortstapel */
.principle { background: var(--weiss); padding: var(--y) 0; }
.principle__head { margin-bottom: 2rem; }
.stack__row { border-top: var(--seam); padding: 1.25rem 0 1.5rem; }
.stack__row:last-child { border-bottom: var(--seam); }
.stack__word { font-family: var(--serif); font-size: clamp(3.75rem, 19vw, 8rem); line-height: .95; letter-spacing: -.015em; color: var(--aubergine); margin-bottom: .5rem; }
.stack__word em { color: var(--lila); }
.stack__row p { margin: 0; max-width: 30rem; }

/* 4 · Leistbar */
.value { background: var(--weiss); padding-bottom: var(--y); }
.value__poster { background: var(--aubergine); color: var(--creme); padding: var(--y) 0; border-bottom: var(--seam); }
.value__pre { font-family: var(--serif); font-style: italic; font-size: clamp(1.5rem, 4vw, 2.125rem); color: var(--champagner); margin-bottom: 1.25rem; }
.value__title { font-family: var(--serif); font-size: clamp(2.5rem, 9.5vw, 6rem); line-height: 1; letter-spacing: -.01em; max-width: 17ch; text-wrap: balance; }
.value__title em { display: block; color: var(--champagner); }
.value__grid { display: grid; gap: 2rem; padding-top: var(--y); }
.value__media { margin: 0 calc(var(--pad) * -1); }
.value__media img { aspect-ratio: 4 / 3; object-position: 30% 35%; }
.reasons { margin-bottom: 2rem; }
.reasons li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: .5rem; border-top: var(--seam); padding: 1.25rem 0; }
.reasons li:last-child { border-bottom: var(--seam); }
.reasons__num { font-size: .75rem; font-weight: 600; letter-spacing: .16em; color: var(--lila); padding-top: .5rem; }
.reasons h3 { font-family: var(--serif); font-size: clamp(1.5rem, 4.5vw, 1.875rem); line-height: 1.1; color: var(--aubergine); margin-bottom: .35rem; }
.reasons p { margin: 0; max-width: 32rem; }

/* 5 · Menschen & Wohnqualität */
.people { background: var(--aubergine); }
.people__media img { aspect-ratio: 4 / 3; object-position: 50% 45%; }
.people__band { color: var(--creme); border-top: var(--seam); padding: clamp(3rem, 7vw, 5rem) 0; }
.people__grid { display: grid; gap: .5rem; }
.people__text p { max-width: 32rem; margin-bottom: 2rem; }
.living { background: var(--weiss); padding: var(--y) 0; border-top: var(--seam); }
.living__grid { display: grid; gap: 0; }
.living__title { margin-bottom: 1.25rem; }
.living__text { margin: 0 0 2.25rem; max-width: 36rem; }
.living__a { margin: 0 calc(var(--pad) * -1) 1.5rem; }
.living__a img { aspect-ratio: 3 / 2; object-position: 50% 60%; }
.living__b { width: 72%; margin-left: auto; position: relative; }
.living__b img { aspect-ratio: 4 / 5; object-position: 50% 60%; }

/* 6 · Abschluss */
.closing { background: var(--creme); padding: var(--y) 0; }
.closing__grid { display: grid; gap: 2.5rem; }
.closing__text .lead { margin-bottom: 2rem; }
.closing__media { margin: 0 calc(var(--pad) * -1); }
.closing__media img { aspect-ratio: 4 / 3; object-position: 30% 50%; }

/* Kontakt Lisa – eigene weiße Fläche als persönlicher Abschluss */
.contact { margin: clamp(3.5rem, 8vw, 6rem) calc(var(--pad) * -1) 0; background: var(--weiss); border-top: var(--seam); display: grid; }
.contact__media img { aspect-ratio: 4 / 5; object-position: 50% 30%; }
.contact__body { padding: 2.25rem var(--pad) 2.5rem; max-width: 44rem; }
.contact__title { font-family: var(--serif); font-size: clamp(2.125rem, 7.5vw, 3.5rem); line-height: 1.04; color: var(--aubergine); margin-bottom: 1.25rem; text-wrap: balance; }
.contact__title em { display: block; color: var(--lila); }
.contact__name { font-size: 1rem; margin-bottom: 1.75rem; }
.contact__links { display: grid; border-top: var(--seam); margin-bottom: 2rem; }
.contact__links a { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); align-items: center; min-height: 3.75rem; border-bottom: var(--seam); color: var(--lila); font-size: 1.0625rem; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.contact__links a:hover { color: var(--aubergine); }
.contact__label { font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--grau); }

/* Footer */
.site-footer { background: var(--aubergine); color: var(--creme); padding: 3rem 0 calc(3rem + var(--bar-h) + env(safe-area-inset-bottom)); border-top: var(--seam); }
.site-footer__inner { display: grid; gap: 1.5rem; }
.site-footer__logo { width: 3.5rem; height: 3.5rem; display: block; }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: 0 1.75rem; }
.site-footer__nav a { color: var(--creme); text-decoration: none; font-size: .9375rem; padding: .625rem 0; }
.site-footer__nav a:hover { color: var(--champagner); text-decoration: underline; }
.site-footer__note { font-size: .8125rem; color: var(--champagner); margin: 0; }

/* Mobile Aktionsleiste – dauerhaft sichtbar unter 960 px */
.action-bar { position: fixed; z-index: 45; inset: auto 0 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; padding: .625rem max(var(--pad), env(safe-area-inset-right)) calc(.625rem + env(safe-area-inset-bottom)) max(var(--pad), env(safe-area-inset-left)); background: var(--aubergine); border-top: var(--seam); }
.action-bar__item { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem; padding: 0 .75rem; font-size: .9375rem; font-weight: 600; text-decoration: none; color: var(--creme); border: 2px solid var(--champagner); transition: background-color .2s ease, color .2s ease; }
.action-bar__item:hover { color: var(--aubergine); background: var(--champagner); }
.action-bar__item--primary { background: var(--champagner); color: var(--aubergine); }
.action-bar__item--primary:hover { background: var(--creme); border-color: var(--creme); }
.action-bar svg { flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ≥ 600 px – Tablet */
@media (min-width: 600px) {
  .seal { width: 9rem; }
  .stack__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: end; }
  .stack__word { margin: 0; font-size: clamp(4rem, 11vw, 8rem); }
  .stack__row p { padding-bottom: .6rem; }
  .contact { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); margin-left: 0; margin-right: 0; }
  .contact__media img { height: 100%; aspect-ratio: auto; min-height: 100%; }
  .contact__body { padding: 2.5rem clamp(1.5rem, 4vw, 3.5rem); align-self: center; }
  .site-footer__inner { grid-template-columns: auto 1fr; align-items: center; }
  .site-footer__note { grid-column: 1 / -1; }
}

/* ≥ 720 px – Faktenzeile einzeilig mit Trennpunkten */
@media (min-width: 720px) {
  .factline { display: flex; flex-wrap: wrap; gap: .5rem 0; }
  .factline span + span::before { content: "·"; color: var(--champagner); margin: 0 .9em; }
}

/* ≥ 960 px – Desktop */
@media (min-width: 960px) {
  :root { --header-h: 8rem; --header-c: 6rem; --logo: 5.5rem; --logo-c: 4.25rem; }
  .site-nav { display: flex; align-items: center; gap: 2.5rem; }
  .site-nav .btn--sm { min-height: 3rem; padding: .75rem 1.5rem; font-size: 1rem; }

  .hero { flex-direction: row; min-height: min(calc(100vh - var(--header-h)), 54rem); min-height: min(calc(100svh - var(--header-h)), 54rem); }
  .hero__panel { flex: 0 0 56%; display: flex; align-items: center; padding: 3.5rem clamp(2.5rem, 4vw, 4.5rem) 3.5rem var(--edge); }
  .hero__content { width: 100%; max-width: 44rem; }
  .hero__title { font-size: clamp(3.75rem, 5.4vw, 6.5rem); max-width: 38rem; }  /* Headline-Umbrüche bleiben wie bisher */
  .hero__intro { font-size: 1.0625rem; max-width: 42rem; }
  .hero__media { flex: 1 1 auto; position: relative; border-top: 0; border-left: var(--seam); }
  .hero__media img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
  .colophon { margin-top: 2.75rem; gap: 1.5rem; }
  .seal { width: 10.5rem; }
  .colophon p { font-size: .875rem; }

  .award__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 3rem; row-gap: 3.5rem; align-items: center; }
  .award__text { grid-column: 1 / span 7; grid-row: 1; }
  .award__text p:not(.kicker) { max-width: 42rem; }
  .trophy { grid-column: 8 / -1; grid-row: 1; margin: 0; }
  .factline { grid-column: 1 / -1; grid-row: 2; margin: 0; }
  /* Galabild und Porträt: Bilder in einer Zeile (gleiche Ober- und Unterkante), Bildunterschriften in der Zeile darunter */
  .award__gala, .award__portrait { display: contents; }
  .award__gala img { grid-column: 1 / span 8; grid-row: 3; align-self: start; }
  .award__portrait img { grid-column: 9 / -1; grid-row: 3; align-self: stretch; height: 100%; }
  .award__gala figcaption { grid-column: 1 / span 8; grid-row: 4; align-self: start; margin-top: -2.75rem; }
  .award__portrait figcaption { grid-column: 9 / -1; grid-row: 4; align-self: start; margin-top: -2.75rem; }
  .award__gala figcaption { padding: 0; }

  .principle__head { margin-bottom: 2.5rem; }
  .stack__row { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3rem; padding: 1rem 0 1.25rem; }
  .stack__word { grid-column: 1 / span 6; font-size: clamp(5.5rem, 8.5vw, 8rem); }
  .stack__row p { grid-column: 7 / -1; }

  .value__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 3rem; align-items: start; }
  .value__media { grid-column: 1 / span 5; margin: 0; position: sticky; top: calc(var(--header-c) + 2rem); }
  .value__media img { aspect-ratio: 4 / 5; }  /* kürzer als die Liste, damit das Bild beim Scrollen sichtbar mitläuft */
  .value__title { max-width: none; }
  .value__list { grid-column: 6 / -1; }
  .reasons li { grid-template-columns: 3.5rem minmax(0, 1fr); padding: 1.5rem 0; }

  .people__media img { aspect-ratio: 21 / 9; object-position: 50% 42%; }
  .people__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 3rem; align-items: end; }
  .people__grid > :first-child { grid-column: 1 / span 6; }
  .people__grid .h2 { margin: 0; }
  .people__text { grid-column: 7 / -1; }

  /* Hochformat links über die volle Höhe, rechts Headline, Text und Querformat als eine Spalte */
  .living__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; column-gap: 3rem; }
  .living__b { grid-column: 1 / span 5; grid-row: 1 / span 3; width: auto; margin: 0; min-height: 32rem; }
  .living__b img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
  .living__title { grid-column: 6 / -1; grid-row: 1; margin: 0 0 1.5rem; }
  .living__text { grid-column: 6 / -1; grid-row: 2; margin: 0 0 3rem; }
  .living__a { grid-column: 6 / -1; grid-row: 3; margin: 0; align-self: end; }
  .living__a img { aspect-ratio: 16 / 10; }

  .closing__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 3rem; align-items: center; }
  .closing__text { grid-column: 1 / span 7; }
  .closing__media { grid-column: 8 / -1; margin: 0; }
  .closing__media img { aspect-ratio: 4 / 5; }

  .contact { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 3rem; }
  .contact__media { grid-column: 1 / span 5; }
  .contact__media img { aspect-ratio: 3 / 4; height: 100%; }
  .contact__body { grid-column: 6 / -1; padding: 4rem 4rem 4rem 0; }
  .contact__links a { grid-template-columns: 7rem minmax(0, 1fr); font-size: 1.125rem; }

  .action-bar { display: none; }
  .site-footer { padding-bottom: calc(3rem + env(safe-area-inset-bottom)); }
}

/* < 960 px – nur Mobile/Tablet */
@media (max-width: 959px) {
  /* Hero: Bild direkt unter der Headline, unbeschnitten im Hochformat 3:4 */
  .hero { padding: 2.25rem 0 2.5rem; }
  .hero__panel, .hero__content { display: contents; }
  .hero__content > * { margin-left: var(--pad); margin-right: var(--pad); }
  .hero__content > .btn { align-self: flex-start; }
  .hero__media { order: 1; margin-bottom: 2rem; border-bottom: var(--seam); }
  .hero__media img { aspect-ratio: 3 / 4; object-position: 50% 50%; }
  .hero__intro, .hero__content > .btn, .colophon { order: 2; }
  /* Leistbar: Bild direkt unter der goldenen Linie */
  .value__grid { padding-top: 0; }
  /* Projektbild und Lisa: nur die goldene Linie dazwischen, keine beige Fläche über dem Footer */
  .contact { margin-top: 0; }
  .closing { padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; }
  .js .reveal { opacity: 1; transform: none; }
}

@media print {
  body { padding-top: 0; }
  .site-header, .action-bar, .award-float { display: none; }
  .js .reveal { opacity: 1; transform: none; }
}