/* Emily Klatt — Richtung B · Expressiv. Leitmotiv: der rosa Strich — erst streicht er „Zeit“ durch, am Ende unterstreicht er „sprechen“.
   Farbwerte aus Referenzen abgeleitet, nicht offiziell bestätigt. */
@font-face { font-family: Montserrat; src: url(fonts/montserrat-regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Montserrat; src: url(fonts/montserrat-bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: Newsreader; src: url(fonts/newsreader-italic.woff2) format("woff2"); font-style: italic; font-weight: 400; font-display: swap; }

:root {
  --ivory: #fbf8f4;
  --paper: #ffffff;
  --ink: #17141a;
  --ink-soft: #4a4550;
  --cobalt: #3b40d8;
  --cobalt-tint: #e6e5fb;
  --rose: #f9cae4;
  --mist: #d9d5dd;
  --sans: Montserrat, "Helvetica Neue", Arial, sans-serif;
  --serif: Newsreader, Georgia, serif;
  --ease: cubic-bezier(.22, .8, .2, 1);
  --gutter: clamp(20px, 5vw, 72px);
  --section: clamp(96px, 13vw, 184px);
  --head: 72px;
  --stroke: var(--rose);
  --hot: #e2559f;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--head) + 16px); -webkit-text-size-adjust: 100%; }
html.menu-open { overflow: hidden; }
body { margin: 0; background: var(--ivory); color: var(--ink); font: 400 16px/1.7 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.04em; line-height: 1; text-wrap: balance; }
p { margin: 0 0 1.1em; text-wrap: pretty; }
em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.02em; color: var(--cobalt); }
:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; border-radius: 4px; }
.shell { width: min(100% - 2 * var(--gutter), 1320px); margin-inline: auto; }
.nowrap { white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; padding: 10px 16px; background: var(--ink); color: var(--ivory); border-radius: 999px; }
.skip:focus { top: 12px; }
.body { max-width: 34em; color: var(--ink-soft); }
h2 { font-size: clamp(38px, 6.4vw, 84px); margin-bottom: 32px; }
h2 em { display: block; }
.wordmark { font-weight: 700; font-size: 19px; letter-spacing: -.04em; text-decoration: none; white-space: nowrap; }
.dot { color: var(--cobalt); }

/* Leitmotiv: der Strich */
.strike, .under { position: relative; z-index: 0; white-space: nowrap; }
.strike::after, .under::after { content: ""; position: absolute; left: -.05em; right: -.05em; height: max(.1em, 4px); border-radius: 1em; background: var(--stroke); transform-origin: left; rotate: -1.5deg; }
.strike::after { top: 52%; }
.under::after { top: 86%; z-index: -1; }

/* Buttons & Links */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 28px; border: 0; border-radius: 999px; background: var(--ink); color: var(--ivory); font: 700 15px/1.2 var(--sans); text-align: center; text-decoration: none; cursor: pointer; transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease); }
.btn:hover { background: var(--cobalt); transform: translateY(-2px); }
.btn-rose { background: var(--rose); color: var(--ink); }
.btn-rose:hover { background: var(--ivory); color: var(--ink); }
.link { font-weight: 700; text-decoration: none; padding-bottom: 4px; background: linear-gradient(var(--cobalt), var(--cobalt)) left bottom / 100% 2px no-repeat; transition: background-size .35s var(--ease); }
.link:hover { background-size: 35% 2px; }
.link-light { background-image: linear-gradient(var(--rose), var(--rose)); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; }

/* Header + Burger */
.top { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--ivory) 90%, transparent); backdrop-filter: blur(10px); }
.top-inner { display: flex; align-items: center; justify-content: space-between; height: var(--head); }
.top-studio { display: none; align-items: center; gap: 10px; margin-left: auto; margin-right: clamp(20px, 4vw, 56px); font-size: 12px; font-weight: 700; letter-spacing: -.02em; text-decoration: none; white-space: nowrap; }
.top-studio img { width: 34px; height: 34px; border-radius: 7px; }
.top-studio:hover span { color: var(--cobalt); }
.menu-btn, .menu-close { display: inline-flex; align-items: center; gap: 14px; min-height: 46px; padding: 0 16px 0 20px; border: 1.5px solid currentColor; border-radius: 999px; background: transparent; color: var(--ink); font: 700 13px var(--sans); letter-spacing: .04em; cursor: pointer; transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.menu-btn:hover { background: var(--ink); color: var(--ivory); }
.burger { display: grid; gap: 6px; width: 22px; }
.burger i { display: block; height: 2px; background: currentColor; border-radius: 2px; transition: transform .4s var(--ease); }
.burger i:last-child { transform: scaleX(.64); transform-origin: right; }
.menu-btn:hover .burger i:last-child { transform: none; }
.burger.is-x i:first-child { transform: translateY(4px) rotate(45deg); }
.burger.is-x i:last-child { transform: translateY(-4px) rotate(-45deg); transform-origin: center; }
.menu-close { color: var(--ivory); }
.menu-close:hover { background: var(--rose); border-color: var(--rose); color: var(--ink); }

/* Menü — modaler Dialog, Emily als Bildband (mobil) bzw. Bildhälfte (Desktop) */
.nav { position: fixed; inset: 0; z-index: 100; width: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--cobalt); color: var(--ivory);
  grid-template: "head" var(--head) "photo" clamp(220px, 42svh, 460px) "body" 1fr / 100%;
  clip-path: circle(0 at calc(100% - 64px) 36px); transition: clip-path .75s var(--ease), display .75s allow-discrete, overlay .75s allow-discrete; }
.nav[open] { display: grid; clip-path: circle(150% at calc(100% - 64px) 36px); }
@starting-style { .nav[open] { clip-path: circle(0 at calc(100% - 64px) 36px); } }
.nav::backdrop { background: transparent; }
.nav :focus-visible { outline-color: var(--rose); }
.menu-head { grid-area: head; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 var(--gutter); }
.menu-head .dot { color: var(--rose); }
.menu-photo { grid-area: photo; position: relative; overflow: hidden; background: var(--rose); }
.menu-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.menu-photo figcaption { display: none; }
.menu-photo::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, #17141aa6); pointer-events: none; }
.menu-body { container-type: inline-size; grid-area: body; display: flex; flex-direction: column; gap: 28px; padding: 22px var(--gutter) 28px; }
.menu-links { list-style: none; margin: 0; padding: 0; }
.menu-links li:nth-child(2) { --i: 1; } .menu-links li:nth-child(3) { --i: 2; } .menu-links li:nth-child(4) { --i: 3; } .menu-links li:nth-child(5) { --i: 4; } /* Staffelung ohne Inline-Styles (CSP style-src 'self') */
.menu-links a { display: grid; grid-template-columns: 2.6em 1fr; align-items: baseline; padding: 6px 0; border-bottom: 1px solid #ffffff33; text-decoration: none; }
.ml-n { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--rose); }
.ml-t { position: relative; justify-self: start; font-size: clamp(25px, calc((100cqi - 2.6rem) / 9.2), 84px); font-weight: 700; letter-spacing: -.04em; line-height: 1.12; transition: color .3s var(--ease); }
.ml-t::after { content: ""; position: absolute; left: 0; right: 0; top: 88%; height: max(.08em, 3px); border-radius: 1em; background: var(--rose); transform: scaleX(0); transform-origin: left; rotate: -1.5deg; transition: transform .45s var(--ease); }
.menu-links a:hover .ml-t, .menu-links a:focus-visible .ml-t { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.02em; color: var(--rose); }
.menu-links a:hover .ml-t::after, .menu-links a:focus-visible .ml-t::after { transform: none; }
.menu-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: auto; }
.menu-social { font-weight: 700; font-size: 15px; text-underline-offset: 6px; }
.menu-social:hover { color: var(--rose); }
.menu-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--cobalt-tint); font-size: 12px; font-weight: 700; white-space: nowrap; }
.menu-brand img { width: 42px; height: 42px; border-radius: 8px; }

/* Kapitel 1 · Hero: Emily zuerst, Text auf Kobaltkarte unter dem Gesicht */
.hero-stage { position: relative; height: calc(100svh - var(--head)); min-height: 480px; overflow: clip; background: var(--cobalt); }
.hero-photo, .hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-photo img { object-fit: cover; object-position: 50% 14%; }
.hero-card { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px var(--gutter) 30px; background: var(--cobalt); color: var(--ivory); }
.hero h1 { font-size: clamp(32px, 9.6vw, 64px); line-height: 1.02; letter-spacing: -.045em; margin-bottom: 22px; }
.h1-a, .h1-b { display: block; }
.h1-b { color: var(--rose); font-size: 1.04em; padding-top: .06em; }
.hero-cta { min-height: 52px; }
.hero-intro { position: relative; background: var(--cobalt); color: var(--cobalt-tint); padding: 4px 0 clamp(120px, 16vw, 200px); }
.hero-intro-inner { display: grid; gap: 28px; }
.lede { margin: 0; max-width: 32em; font-size: clamp(16px, 1.3vw, 20px); }

/* Kapitel 2 · Ansatz: Foto greift in den Kobaltblock, der Strich wird Textmarker */
.ansatz { padding-bottom: var(--section); }
.ansatz-grid { display: grid; gap: 40px; }
.ansatz-photo { position: relative; z-index: 3; isolation: isolate; width: 64%; justify-self: end; margin-top: calc(-1 * clamp(84px, 14vw, 180px)); }
.ansatz-photo::before { content: ""; position: absolute; inset: 10% -14px -14px 12%; z-index: -1; background: var(--rose); rotate: 2.5deg; }
.ansatz-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 40% 50%; }
.questions { list-style: none; margin: 0; padding: 0; }
.questions li { padding: 22px 0; border-top: 1.5px solid var(--ink); font-size: clamp(26px, 4vw, 52px); font-weight: 700; letter-spacing: -.04em; line-height: 1.15; text-wrap: balance; }
.questions li:last-child { border-bottom: 1.5px solid var(--ink); }
.questions mark { color: inherit; background: linear-gradient(var(--rose), var(--rose)) 0 92% / 100% 42% no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ansatz-close { margin: 0; }

/* Kapitel 3 · Arbeitsweise: drei Karten stapeln sich beim Scrollen */
.principles { background: var(--rose); padding-block: var(--section); }
.principles .principles-title em { color: var(--cobalt); }
.rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.rule { position: relative; display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: 10px; background: var(--ivory); color: var(--ink); box-shadow: 0 -10px 40px #17141a1f; }
.rule-photo img { width: 100%; height: clamp(170px, 32svh, 360px); object-fit: cover; object-position: 50% 22%; }
.rule-1 { --stroke: var(--hot); }
.rule-text { padding: 22px clamp(22px, 4vw, 56px) 28px; }
.rule-n { display: block; font: italic 400 clamp(40px, 4.4vw, 64px)/1 var(--serif); color: var(--cobalt); margin-bottom: 10px; }
.rule h3 { font-size: clamp(23px, 2.6vw, 38px); letter-spacing: -.035em; line-height: 1.15; margin: 0 0 12px; }
.rule p { margin: 0; max-width: 32em; color: var(--ink-soft); }
.rule-2 { background: var(--cobalt); color: var(--ivory); }
.rule-2 .rule-n { color: var(--rose); }
.rule-2 p { color: var(--cobalt-tint); }
.rule-3 { background: var(--ink); color: var(--ivory); }
.rule-3 .rule-n { color: var(--rose); }
.rule-3 p { color: var(--mist); }

/* Kapitel 4 · Zusammenarbeit: eine Frage, ein Strich, zwei Wege */
.fork { background: var(--paper); padding-top: var(--section); }
.fork-head { text-align: center; }
.fork-head h2 { margin-bottom: 18px; }
.fork-q { margin: 0; font: italic 400 clamp(28px, 4vw, 54px)/1.1 var(--serif); color: var(--cobalt); }
.fork-line { display: block; width: 100%; height: clamp(120px, 13vw, 190px); margin-top: 18px; overflow: visible; }
.fork-line path { fill: none; stroke: var(--hot); stroke-width: 5px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.fork-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 40px; }
.choice { display: grid; align-content: start; gap: 6px; min-height: 96px; padding: 14px 14px 16px; border-radius: 10px; text-decoration: none; transition: transform .3s var(--ease); }
.choice:hover { transform: translateY(-3px); }
.choice-q { font: italic 400 17px/1.2 var(--serif); }
.choice-t { font-weight: 700; font-size: 17px; line-height: 1.1; letter-spacing: -.02em; }
.choice-t em { display: block; font-size: 1.12em; }
.choice-t em::after { content: " ↓"; font-family: var(--sans); font-style: normal; font-size: .8em; }
.choice-b .choice-t em { color: var(--rose); }
.choice-a { background: var(--rose); color: var(--ink); }
.choice-a .choice-q { color: var(--cobalt); }
.choice-b { background: var(--cobalt); color: var(--ivory); }
.choice-b .choice-q { color: var(--rose); }
/* Mobil trägt der Antwort-Knopf die Antwort — die Karte wiederholt sie nicht (Desktop: Antwort steht in der Karte am Ende der Gabel) */
@media (max-width: 899px) { .path-answer { display: none; } }
.path:focus { outline: none; }
.path:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 4px; }
.fork-split { display: grid; gap: 16px; width: min(100% - 2 * var(--gutter), 1320px); margin-inline: auto; }
.path { display: flex; flex-direction: column; border-radius: 10px; padding: clamp(28px, 5vw, 72px) clamp(22px, 4vw, 64px) clamp(32px, 5vw, 72px); }
.path-answer { margin: 0 0 22px; font: italic 400 clamp(24px, 2.6vw, 36px)/1.15 var(--serif); }
.path-tag { align-self: flex-start; margin: 0 0 18px; padding: 6px 12px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; rotate: -3deg; }
.path h3 { font-size: clamp(40px, 5.6vw, 84px); line-height: .98; margin-bottom: 24px; }
.path h3 em { display: block; }
.path > p:not(.path-tag, .path-answer) { max-width: 30em; }
.path ul { list-style: none; margin: auto 0 0; padding: 22px 0 0; display: grid; gap: 10px; font-weight: 700; border-top: 1.5px solid currentColor; }
.path li::before { content: "—"; margin-right: 12px; }
.path-a { background: var(--rose); color: var(--ink); }
.path-a .path-answer, .path-a li::before { color: var(--cobalt); }
.path-a .path-tag { background: var(--cobalt); color: var(--ivory); }
.path-b { background: var(--cobalt); color: var(--ivory); }
.path-b em, .path-b .path-answer, .path-b li::before { color: var(--rose); }
.path-b p { color: var(--cobalt-tint); }
.path-b .path-tag { background: var(--rose); color: var(--ink); }
.fork-note { padding: 40px 0 var(--section); margin: 0 auto; color: var(--ink-soft); }

/* Kapitel 5 · Emily */
.about { background: var(--ivory); }
.about-stage { position: relative; height: min(92svh, 1000px); overflow: clip; background: var(--ink); }
.about-stage img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.about-stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, #17141ae0 0%, #17141a73 28%, transparent 54%); pointer-events: none; }
.about-title { position: absolute; z-index: 1; left: 0; right: 0; bottom: clamp(28px, 6vw, 72px); color: var(--ivory); display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.about-title h2 { margin: 0; font-size: clamp(48px, 9vw, 136px); }
.about-title em { color: var(--rose); }
.about-title .under { --stroke: var(--cobalt); }
.film-btn { display: inline-flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 24px 0 8px; border: 1.5px solid currentColor; border-radius: 999px; background: #17141a66; color: var(--ivory); font: 700 15px var(--sans); cursor: pointer; transition: background .3s var(--ease), color .3s var(--ease); }
.film-btn:hover { background: var(--ivory); color: var(--ink); }
.play { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--cobalt); }
.play::before { content: ""; margin-left: 3px; border-left: 11px solid var(--ivory); border-block: 7px solid transparent; }
.film-meta { font-weight: 400; opacity: .85; }
.film-btn { white-space: nowrap; }
@media (max-width: 359px) { .film-meta { display: none; } }
.about-text { padding-block: clamp(56px, 8vw, 120px) var(--section); }
.lead-quote { font: italic 400 clamp(30px, 3.8vw, 54px)/1.12 var(--serif); letter-spacing: -.02em; color: var(--cobalt); max-width: 17em; }

/* Markenverbindung: Emily bleibt Absenderin, das Original-Logo bekommt eine eigene Bühne. */
.brand-story { padding-block: var(--section); background: var(--paper); }
.brand-grid { display: grid; gap: clamp(36px, 7vw, 110px); align-items: center; }
.brand-copy { min-width: 0; }
.brand-copy h2 { max-width: 10em; }
.brand-copy .body { margin-bottom: 24px; }
.brand-kicker { margin-bottom: 22px; color: var(--cobalt); font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.brand-art { width: min(100%, 510px); justify-self: end; }
.brand-art img { width: 100%; aspect-ratio: 1; border-radius: clamp(12px, 2vw, 24px); box-shadow: 20px 20px 0 var(--cobalt); }
.brand-art figcaption { display: flex; justify-content: space-between; gap: 12px; padding-top: 32px; font-size: 13px; font-weight: 700; }
.brand-art figcaption span { color: var(--ink-soft); font-weight: 400; }

/* Film-Dialog */
.film { padding: 0; border: 0; background: transparent; overflow: visible; max-width: none; max-height: none; }
.film::backdrop { background: #17141ae6; }
.film video { width: min(88vw, calc(84svh * 9 / 16)); aspect-ratio: 9 / 16; background: var(--ink); border-radius: 6px; }
.film-close { position: absolute; top: -60px; right: 0; }

/* Kapitel 6 · Kontakt */
.contact { background: var(--ink); color: var(--ivory); padding-block: var(--section); }
.contact em { color: var(--rose); }
.contact h2 { font-size: clamp(36px, 10vw, 84px); line-height: 1.06; }
@media (max-width: 899px) { .contact h2 .under { display: table; margin-bottom: .14em; } }
.contact .body { color: var(--mist); }
.contact-grid { display: grid; gap: 48px; }
.contact-card { display: flex; flex-direction: column; justify-content: center; padding: clamp(24px, 4vw, 48px); border-radius: 10px; background: var(--ivory); color: var(--ink); }
.contact-kicker { margin: 0 0 24px; color: var(--cobalt); font-size: 12px; font-weight: 700; letter-spacing: .16em; }
.contact-card-title { margin: 0 0 28px; font-size: clamp(34px, 4.2vw, 58px); font-weight: 700; letter-spacing: -.055em; line-height: 1.05; }
.contact-card-title em { color: var(--cobalt); font-style: normal; }
.contact-mail { display: inline-flex; gap: 14px; align-items: baseline; align-self: flex-start; max-width: 100%; padding-bottom: 6px; border-bottom: 2px solid var(--cobalt); color: var(--ink); font-size: clamp(18px, 2vw, 26px); font-weight: 700; letter-spacing: -.035em; overflow-wrap: anywhere; }
.contact-mail:hover { color: var(--cobalt); }
.contact-card-note { max-width: 34ch; margin: 28px 0 0; color: var(--ink-soft); line-height: 1.55; }
.contact-alternative { display: grid; justify-items: start; gap: 10px; margin-top: 28px; padding-top: 24px; border-top: 1px solid #cfc7c2; }
.contact-alternative span { color: var(--ink-soft); font-size: 13px; }
.form { display: grid; gap: 18px; color: var(--ink); }
.form-note { margin: 0; padding: 10px 14px; border-radius: 6px; background: var(--rose); font-size: 13px; font-weight: 700; }
.form label { display: grid; gap: 6px; font-weight: 700; font-size: 14px; }
.opt { font-weight: 400; color: var(--ink-soft); }
.form input:not([type=checkbox]), .form select, .form textarea { width: 100%; padding: 13px 14px; border: 1.5px solid #cfc7c2; border-radius: 4px; background: var(--paper); color: var(--ink); font: 400 16px var(--sans); }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { border-color: var(--cobalt); outline-offset: 1px; }
.form .check { grid-template-columns: 22px 1fr; align-items: start; font-weight: 400; font-size: 13px; line-height: 1.55; color: var(--ink-soft); }
.form .check a { color: var(--cobalt); text-decoration: underline; text-underline-offset: 3px; }
.form .trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--cobalt); }
.form .btn { background: var(--cobalt); }
.form .btn:hover { background: var(--ink); }
.form-status { margin: 0; font-size: 14px; font-weight: 700; color: var(--cobalt); }
.form-status:empty { display: none; }
.form button:disabled { opacity: .55; cursor: wait; }

.foot { background: var(--ink); color: var(--mist); padding-bottom: 40px; font-size: 13px; }
.foot-mark { margin: 0; padding-top: 24px; border-top: 1px solid #ffffff22; color: var(--ivory); font-weight: 700; font-size: clamp(48px, 12.4vw, 200px); letter-spacing: -.05em; line-height: 1; white-space: nowrap; }
.foot-mark .dot { color: var(--rose); }
.foot-inner { display: flex; flex-wrap: wrap; gap: 14px 32px; align-items: center; justify-content: space-between; margin-top: 24px; }
.foot a:hover { color: var(--rose); }
.foot-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ivory); font-weight: 700; white-space: nowrap; }
.foot-brand img { width: 36px; height: 36px; border-radius: 7px; }

/* ===== Bewegung — nur ohne reduzierte Bewegung ===== */
@media (prefers-reduced-motion: no-preference) {
  /* Moment 1 · Hero-Wende beim Laden (~1,6 s): Strich streicht „Zeit.“ durch, dann wird die Antwort von links geschrieben */
  .h1-a { animation: rise .7s var(--ease) .05s both; }
  .strike::after { animation: draw .5s var(--ease) .65s both; }
  .h1-b { animation: write .9s var(--ease) 1.05s both; }
  .hero-photo img { animation: fade 1.2s var(--ease) both; }
  @keyframes write { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 -2% 0 0); } }
  @keyframes rise { from { opacity: 0; transform: translateY(.5em); } }
  @keyframes fade { from { opacity: 0; scale: 1.04; } }
  @keyframes draw { from { transform: scaleX(0); } }

  .nav[open] .menu-links li { animation: rise .6s var(--ease) both; animation-delay: calc(.22s + var(--i, 0) * .06s); }
  .nav[open] .menu-photo img { animation: wipe .9s var(--ease) .15s both; }
  .nav[open] .menu-foot { animation: rise .6s var(--ease) .5s both; }
  @keyframes wipe { from { clip-path: inset(0 0 100% 0); } }

  @supports (animation-timeline: view()) {
    /* Positionierung: Textmarker zieht beim Lesen durch die Fragen */
    .questions mark { animation: mark linear both; animation-timeline: view(); animation-range: cover 18% cover 42%; }
    @keyframes mark { from { background-size: 0% 42%; } }
    /* Leitwörter werden unterstrichen, sobald sie gelesen werden */
    .under::after { animation: draw linear both; animation-timeline: view(); animation-range: entry 100% cover 40%; }
    /* Moment 2 · Entscheidung: der Strich wächst aus der Frage und gabelt sich */
    .fork-line { animation: line linear both; animation-timeline: view(); animation-range: entry 40% cover 60%; }
    @keyframes line { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 -10px 0); } }
    /* Bildmoment Emily: Rahmen weitet sich zur vollen Fläche */
    @keyframes settle { from { scale: 1.08; } }
    .about-stage { animation: stage linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
    .about-stage img { animation: settle linear both; animation-timeline: view(); animation-range: entry 0% exit 0%; }
    @keyframes stage { from { clip-path: inset(9% 7% 0 7% round 12px); } to { clip-path: inset(0 round 0); } }
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ===== Breakpoints ===== */
@media (min-height: 641px) {
  /* Kartenstapel per sticky — Layout, keine Animation (nur wenn eine Karte sicher in den Viewport passt) */
  .rule { position: sticky; top: calc(var(--head) + 20px + var(--n, 0) * 16px); }
  .rule-2 { --n: 1; } .rule-3 { --n: 2; }
}
@media (min-width: 640px) {
  .form { grid-template-columns: 1fr 1fr; }
  .form .wide { grid-column: 1 / -1; }
  .form .btn { justify-self: start; }
}
@media (min-width: 900px) {
  .top-studio { display: inline-flex; }
  .nav { grid-template: "photo head" var(--head) "photo body" 1fr / minmax(0, 42%) 1fr; }
  .menu-photo figcaption { display: block; position: absolute; z-index: 1; right: clamp(20px, 3vw, 48px); bottom: clamp(24px, 4vw, 56px); color: var(--ivory); font: italic 400 clamp(32px, 3.4vw, 54px)/.95 var(--serif); text-align: right; transform: rotate(-6deg); }
  .menu-photo img { object-position: 50% 30%; }
  .menu-body { justify-content: center; padding: 24px clamp(40px, 6vw, 112px) 40px; }
  .menu-links { margin-top: auto; }
  .menu-head { padding: 0 clamp(40px, 6vw, 112px); }

  /* Hero Desktop: Emily rechts im Querformat, Typografie auf der ruhigen Wand links */
  .hero-stage { background: #d9d4cf; }
  .hero-photo img { object-position: 70% 30%; }
  .hero-cta { margin-top: 12px; }
  .hero-card { top: 50%; bottom: auto; left: max(var(--gutter), calc((100vw - 1320px) / 2)); right: auto; width: min(46vw, 660px); padding: 0; background: none; color: var(--ink); translate: 0 -50%; }
  .hero h1 { font-size: clamp(50px, 5.4vw, 96px); }
  .h1-b { color: var(--cobalt); }
  .hero-card { --stroke: var(--hot); }
  .hero-intro { padding-top: clamp(56px, 6vw, 88px); }
  .hero-intro-inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; column-gap: 8%; }

  .ansatz-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); grid-template-rows: auto auto 1fr; column-gap: 8%; row-gap: 56px; }
  .ansatz-head, .questions, .ansatz-close { grid-column: 1; }
  .ansatz-head { padding-top: clamp(72px, 8vw, 120px); }
  .ansatz-photo { grid-column: 2; grid-row: 1 / 4; width: 100%; align-self: start; position: sticky; top: calc(var(--head) + 32px); }

  .rule { grid-template-rows: none; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); min-height: min(62svh, 560px); }
  .rule-photo img { height: 100%; min-height: 100%; }
  .rule-text { align-self: center; padding: clamp(32px, 5vw, 72px); }

  .fork-choice { display: none; }
  .fork-split { grid-template-columns: 1fr 1fr; }
  .path { min-height: 70svh; }

  .about-stage img { object-position: 50% 26%; }
  .brand-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); }
  .contact-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 8%; row-gap: 24px; align-items: start; }
  .contact-head { display: contents; }
  .contact h2 { grid-column: 1 / -1; font-size: clamp(56px, 6.4vw, 104px); }
  .contact .body { grid-column: 1; position: sticky; top: calc(var(--head) + 32px); }
}
@media (max-height: 700px) and (max-width: 899px) {
  .nav { grid-template-rows: var(--head) clamp(160px, 30svh, 260px) 1fr; }
  .ml-t { font-size: clamp(25px, calc((100cqi - 2.6rem) / 9.2), 40px); }
  .menu-body { gap: 18px; padding-top: 14px; }
}