/* Yannika Schad — site styles. Ported from the prototype; palette tokens live in theme.json. */
/* ---------------------------------------------------------------- Tokens */
:root {
  --photo: saturate(.92);
  --draw-blend: multiply;      /* how the pencil drawings sit in the ground */
  --draw-filter: none;
  --rule: color-mix(in srgb, var(--ink) 55%, transparent);

  --sans: Jost, "Helvetica Neue", Arial, sans-serif;
  --display: "Cormorant Infant", Georgia, serif;   /* Cormorant, chosen with Yannika */
  --display-alt: "Amarante", "Cormorant Infant", Georgia, serif;   /* Art-Nouveau accent, use sparingly */
  --display-weight: 600;
  --display-track: -0.015em;
  --display-lh: 0.86;

  --gutter: clamp(16px, 4.2vw, 72px);
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --s9: 112px; --s10: 160px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  /* Palette "Wald" (default): the nine role colours come from theme.json so editor and front end share one source */
  --cream: var(--wp--preset--color--cream);        /* base — dark lavender: page, hero left, Über mich */
  --sand: var(--wp--preset--color--sand);          /* light paper — Manifest (drawing section) */
  --pale: var(--wp--preset--color--pale);          /* light lavender — hero right (drawing panel) */
  --terra: var(--wp--preset--color--terra);        /* dark brown — Angebot ground */
  --deep: var(--wp--preset--color--deep);          /* near-black green — Kontakt */
  --terra-deep: var(--wp--preset--color--lilac);   /* lilac — accent type, links, focus on dark */
  --pink: var(--wp--preset--color--pink);          /* lilac-white — Kontakt headline */
  --accent: var(--wp--preset--color--accent);      /* lilac accent — blob, submit, "helfen?" */
  --ink: var(--wp--preset--color--ink);            /* white type */
  --ink-soft: #CFCAC0;
  --on-terra-soft: #F3F0EA;
  --on-dark: #F3F0EA;
  --on-accent: #1E1A22;
  --glyph: #C9B6E4;
  --ghost: #F6F2FA;
}
/* Wald: the drawing sections are light, so type there switches back to dark */
html:root .manifest,
html:root .nav,
html:root .menu-btn, html:root .lang,
html:root .hero__en { --ink: #231E2B; --ink-soft: #4A4452; --terra-deep: #5B4A78; color: var(--ink); }
html:root .faq { background-color: #34453A; }
/* Wald: fine print grain in the grounds only (type, drawings, blob and letter stay clean) — specks at 50% opacity */
html:root {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='1' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  11 0 0 0 -7.2'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='.5'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='1' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  -11 0 0 0 3.9'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='.5'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23d)'/%3E%3C/svg%3E");
}
html:root body,
html:root .wp-block-post-content > section:not(.hero):not(.page-hero),
html:root .hero::before,
html:root .page-hero::before { background-image: var(--grain); background-size: 220px 220px; background-blend-mode: soft-light; }
/* Musik — its own world, set apart from the teaching pages: terracotta / red on dark grounds first.
   Same roles as the palettes above; scoped to <body class="musik"> so it holds whichever palette is switched on. */
body.musik {
  --cream: #2A1714;       /* base — very dark red-brown: page, hero left, Hören */
  --sand: #F0E6DC;        /* light paper */
  --pale: #ECD2C5;        /* light terracotta — hero right (drawing panel), nav drop-down */
  --terra: #5B2419;       /* deep oxblood */
  --deep: #150B09;        /* near black — contact */
  --terra-deep: #E8977A;  /* light terracotta — accent type, links, focus on dark */
  --pink: #F5DED3;        /* contact headline */
  --accent: #D4513A;      /* strong terracotta red — submit, "helfen?" */
  --ink: #F6EEE8;
  --ink-soft: #D9C7BE;
  --on-terra-soft: #F6EEE8;
  --on-dark: #F6EEE8;
  --on-accent: #1C0E0B;
  --glyph: #E8977A;
  --ghost: #FBF1EC;
  --rule: color-mix(in srgb, #F6EEE8 45%, transparent);
  --draw-blend: multiply;
  --draw-filter: none;
}
/* the nav sits on the light drawing panel, so its type turns dark there */
body.musik .nav,
body.musik .site-head:not(.is-open) .menu-btn, body.musik .site-head:not(.is-open) .lang { --ink: #2A1714; --ink-soft: #5A433C; --terra-deep: #A23B26; color: var(--ink); }
@media (max-width: 820px) { body.musik .site-head:not(.is-open) .menu-btn, body.musik .site-head:not(.is-open) .lang { --ink: #F6EEE8; } }
body.musik .site-head.is-open { background: var(--ink); color: var(--cream); }
body.musik .site-head.is-open .nav { --ink: #2A1714; }




/* ---------------------------------------------------------------- Base */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { background: var(--cream); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.7; font-weight: 400; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
h1, h2, h3 { font-family: var(--display); font-weight: var(--display-weight); letter-spacing: var(--display-track); line-height: var(--display-lh); text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--terra-deep); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { padding-inline: var(--gutter); }
.small { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; line-height: 1.5; }

.arrow-link { display: inline-flex; align-items: center; gap: var(--s3); font-weight: 500; text-decoration: none; padding-block: var(--s2); border-bottom: 1px solid currentColor; transition: gap .5s var(--ease), color .3s; }
.arrow-link::after, .btn::after { content: ""; width: 22px; height: 10px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 10' fill='none' stroke='black' stroke-width='1.3'%3E%3Cpath d='M0 5h20M16 1l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 10' fill='none' stroke='black' stroke-width='1.3'%3E%3Cpath d='M0 5h20M16 1l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat; }
.arrow-link:hover { gap: var(--s5); }

/* ---------------------------------------------------------------- Header */
.site-head { position: absolute; inset: 0 0 auto; z-index: 20; display: flex; justify-content: space-between; align-items: center; padding: var(--s6) var(--gutter); }
.logo { display: block; width: 342px; height: auto; aspect-ratio: 318.958 / 69.419; overflow: visible; fill: currentColor; }
.nav { display: flex; gap: clamp(18px, 2.4vw, 40px); list-style: none; font-size: 17px; font-weight: 500; }
.nav a { text-decoration: none; position: relative; padding-block: var(--s2); }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--terra-deep); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1); }
.menu-btn { display: none; }
/* Language switcher: DE | EN, text only, always visible (also next to the mobile menu button) */
.lang { display: flex; align-items: center; margin-left: clamp(18px, 2.4vw, 40px); font-size: 15px; font-weight: 500; letter-spacing: .08em; line-height: 1; }
.lang a { text-decoration: none; padding: var(--s3) var(--s2); opacity: .6; transition: opacity .3s; }
.lang a:hover, .lang a[aria-current] { opacity: 1; }
.lang a[aria-current] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .35em; }
.lang span { opacity: .4; }
.nav { margin-left: auto; }

/* ---------------------------------------------------------------- Hero: the contents page */
.hero { position: relative; min-height: max(100svh, 700px); max-height: 1100px; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--s5); padding: 0 var(--gutter); overflow: hidden; isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: 0 0 0 50%; background: var(--pale); z-index: -2; }

.glyph { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.glyph :is(span, p) { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -47%); font-family: var(--display); font-weight: var(--display-weight); font-size: min(106vh, 66vw); line-height: .8; color: var(--glyph); }
.glyph :is(span, p) { font-size: min(118vh, 72vw); }
.glyph--ghost { clip-path: inset(0 0 0 50%); }
.glyph--solid { clip-path: inset(0 50% 0 0); }
.glyph--ghost { opacity: .72; }
.glyph--ghost :is(span, p) { color: var(--ghost); }
.glyph :is(span, p):not(.is-on) { opacity: 0; }
.glyph :is(span, p)[data-o] { opacity: var(--o); }
.glyph.is-goo { filter: url(#goo); }

.contents { grid-column: 1 / span 5; align-self: center; position: relative; margin-left: calc(var(--gutter) * -1); padding-top: 120px; padding-bottom: var(--s8); }
.contents ol { list-style: none; }
.contents li { display: grid; grid-template-columns: var(--gutter) 1fr; border-top: 1px solid var(--rule); padding: var(--s5) 0 var(--s5); }
.contents li:last-child { border-bottom: 1px solid var(--rule); }
.contents li > * { grid-column: 2; }
.contents__word { font-family: var(--display); font-weight: var(--display-weight); letter-spacing: var(--display-track); font-size: clamp(2.6rem, 4.1vw, 4.4rem); line-height: 1; }
.contents__lead { margin: var(--s6) 0 0 var(--gutter); max-width: 30ch; font-size: 18px; line-height: 1.55; color: var(--ink-soft); }
.contents li { cursor: default; }
.contents__word { transition: color .4s var(--ease); }
.contents ol:has(li.is-on) li:not(.is-on) .contents__word { color: color-mix(in srgb, var(--ink) 45%, var(--cream)); }
.contents li.is-on .contents__word { color: var(--glyph); }
.contents__ctas { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); margin: var(--s6) 0 0 var(--gutter); }
.arrow-link--quiet { color: var(--terra-deep); }

/* Centred in the pale right half of the hero (that half starts at 50%, so its centre is 75% / 50%). Margins, not transform: the scroll drift animates transform. */
.gull { --gull-w: min(34vw, 62vh); position: absolute; z-index: 1; mix-blend-mode: var(--draw-blend); left: 75%; top: 50%; width: var(--gull-w); margin: calc(var(--gull-w) * -0.863) 0 0 calc(var(--gull-w) * -0.5); pointer-events: none; }
.gull { aspect-ratio: 1000 / 1726; }
.gull img { display: block; width: 100%; height: auto; transform: rotate(-4deg); filter: var(--draw-filter); }

.hero__foot { position: absolute; left: var(--gutter); right: var(--gutter); bottom: var(--s6); display: flex; justify-content: space-between; gap: var(--s5); z-index: 2; color: var(--ink-soft); }
.hero__en { color: var(--ink); text-decoration: none; border-bottom: 1px solid currentColor; }
.hero__en:hover { color: var(--terra-deep); }

/* ---------------------------------------------------------------- Manifest */
.manifest { background: var(--sand); color: var(--ink); position: relative; overflow: hidden; padding: var(--s10) 0 var(--s9); isolation: isolate; }
.manifest__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--s5); }
.manifest h2 { grid-column: 1 / -1; font-size: clamp(4.5rem, 15vw, 15rem); line-height: .8; color: var(--terra-deep); margin-bottom: var(--s8); margin-left: -0.04em; }
.manifest__lead { grid-column: 1 / span 5; font-family: var(--display); font-size: clamp(1.7rem, 2.5vw, 2.4rem); line-height: 1.3; letter-spacing: var(--display-track); }
.manifest__body { grid-column: 7 / span 5; display: grid; gap: var(--s5); color: var(--ink); max-width: 62ch; }
.manifest__body p:first-child { font-weight: 500; }
.amsel { position: absolute; z-index: -1; left: -7vw; bottom: 16%; width: min(52vw, 728px); pointer-events: none; mix-blend-mode: var(--draw-blend); }
.amsel img { display: block; width: 100%; height: auto; filter: var(--draw-filter); }

.manifest__close { grid-column: 3 / -1; margin-top: var(--s10); padding-top: var(--s6); border-top: 1px solid color-mix(in srgb, var(--ink) 40%, transparent); }
.manifest__close p { font-family: var(--display); font-weight: var(--display-weight); letter-spacing: var(--display-track); font-size: clamp(2.4rem, 5.6vw, 6rem); line-height: 1; text-wrap: balance; }
.manifest__close em { font-style: normal; color: var(--terra-deep); }

/* ---------------------------------------------------------------- Leaves: natural colour, large, entering near a section edge — never a centre-piece.
   On light paper they multiply into the paper; on dark grounds they are dimmed a little so they sit in the dark instead of glowing. */
.leaf { position: absolute; z-index: -1; pointer-events: none; }
.leaf img { display: block; width: 100%; height: auto; }
/* Manifest: a dusty-rose sprig hanging in by its stem from the top edge */
.leaf--sprig { top: 0; right: -9vw; width: clamp(300px, 26vw, 520px); }
.leaf--sprig img { mix-blend-mode: multiply; }
.leaf--hanging { top: -30vw; right: -24vw; width: clamp(720px, 92vw, 1800px); }
.leaf--hanging img { filter: brightness(.78) var(--photo); }
/* partial blur: the cluster is in focus where it enters at the top right and drifts out of focus toward its lower-left edge */
.leaf--hanging > figure:first-child { -webkit-mask-image: linear-gradient(215deg, #000 52%, transparent 86%); mask-image: linear-gradient(215deg, #000 52%, transparent 86%); }
.leaf--hanging .soft { position: absolute; inset: 0; filter: blur(7px) brightness(.72) var(--photo); -webkit-mask-image: linear-gradient(215deg, transparent 52%, #000 86%); mask-image: linear-gradient(215deg, transparent 52%, #000 86%); }
/* single leaves around it at other depths: one far behind (small, soft, darker), one close to the lens (large, very soft) */
.leaf--drift img { transform-origin: 0 66%; }
.leaf--drift-far { top: 1vw; right: 50vw; width: clamp(160px, 14vw, 280px); transform: rotate(168deg); filter: blur(7px) brightness(.55); }
.leaf--drift-near { top: 19vw; right: 35vw; width: clamp(200px, 17vw, 360px); transform: rotate(118deg); filter: blur(12px) brightness(.68); opacity: .85; }
/* Contact, after "The Dark": depth of field — the sharp mass above, one leaf far out of focus behind the content,
   one sharp leaf crossing the "?" in front of the type */
.leaf--blur { left: -24vw; bottom: -24vw; width: clamp(520px, 58vw, 1100px); transform: rotate(-28deg); }
.leaf--blur img { filter: blur(26px) brightness(.62) var(--photo); opacity: .8; }
.contact { isolation: isolate; }
/* Angebot: eucalyptus entering from the left edge into the open field between "Mein Angebot" and the claim */
.leaf--eucalyptus { left: 0; top: clamp(250px, 21vw, 400px); width: clamp(300px, 32vw, 600px); }
/* and a dark green branch growing up from the section's bottom edge at the right — the edge cuts its stem */
.leaf--zz { right: -2vw; bottom: 0; width: clamp(286px, 23.4vw, 442px); transform: rotate(-7deg); transform-origin: 50% 100%; }
.leaf--zz img { filter: brightness(.88) var(--photo); }
.leaf--eucalyptus img { filter: brightness(.9) var(--photo); }

/* ---------------------------------------------------------------- Angebot */
.offer { background: var(--terra); color: var(--on-dark); position: relative; padding-block: var(--s10) var(--s9); overflow: hidden; isolation: isolate; }
.offer__top { --blob-h: clamp(430px, 36vw, 560px); --claim-fs: clamp(3.6rem, 11.5vw, 12.5rem); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--s5); align-items: end; position: relative; min-height: calc(var(--blob-h) + var(--claim-fs) * 1.72 + var(--s6)); }
.blob { position: absolute; z-index: -1; right: 2%; top: 0; height: var(--blob-h); width: auto; max-width: 52vw; color: var(--accent); overflow: visible; }
.offer h2 { grid-column: 1 / span 7; align-self: start; font-size: clamp(3rem, 6.5vw, 6.5rem); }
.offer h2 > span { display: block; }
.offer__claim { grid-column: 1 / -1; font-size: var(--claim-fs); line-height: .86; margin-top: var(--s9); max-width: 12ch; }
.offer__quote { position: absolute; right: calc(2% + var(--blob-h) * .2); top: calc(var(--blob-h) * .2); width: calc(var(--blob-h) * .56); font-size: clamp(14px, calc(var(--blob-h) * .031), 16px); line-height: 1.65; color: var(--on-accent); }
.offer__quote { font-style: italic; }
.offer__quote cite { margin-top: var(--s3); font-size: 14px; }
.offer__quote strong { font-weight: 500; font-style: normal; display: block; font-family: var(--display); font-size: 1.9rem; line-height: 1.05; letter-spacing: var(--display-track); margin-top: var(--s3); }

.rows { list-style: none; margin-top: calc(var(--s10) + var(--s7)); }
.row { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--s5); align-items: baseline; padding: var(--s6) 0; border-top: 1px solid var(--rule); }
.row:last-child { border-bottom: 1px solid var(--rule); }
.row h3 { grid-column: 1 / span 4; font-size: clamp(2.2rem, 3.6vw, 3.6rem); line-height: 1; }
.row p { grid-column: 5 / span 5; max-width: 52ch; }
.row .arrow-link { grid-column: 11 / span 2; justify-self: end; white-space: nowrap; }
.offer__cta { margin-top: var(--s7); display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--s5) var(--s7); }
.offer .row, .offer .row:last-child { border-color: color-mix(in srgb, var(--on-dark) 45%, transparent); }
.offer .btn { background: var(--on-dark); color: var(--on-accent); }
.offer .btn:hover { background: var(--accent); color: var(--on-accent); }
.offer :focus-visible, .contact :focus-visible { outline-color: var(--on-dark); }
.btn { display: inline-flex; align-items: center; gap: var(--s4); background: var(--ink); color: var(--cream); text-decoration: none; font-weight: 500; padding: 18px 28px; border-radius: 999px; transition: background .3s, gap .5s var(--ease); }
.btn:hover { background: var(--terra); color: var(--cream); gap: var(--s5); }


/* ---------------------------------------------------------------- Über mich */
.about { background: var(--cream); padding: var(--s10) 0 var(--s9); position: relative; overflow: hidden; }
.about__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--s5); }
.about__text { grid-column: 1 / span 6; }
.about h2 { font-size: clamp(3.4rem, 8vw, 8rem); margin-bottom: var(--s7); }
.about__lead { font-family: var(--display); font-size: clamp(1.45rem, 2vw, 1.9rem); line-height: 1.34; letter-spacing: var(--display-track); margin-bottom: var(--s6); }
.about__body { display: grid; gap: var(--s4); max-width: 64ch; color: var(--ink-soft); }
.about__body .turn { color: var(--terra-deep); font-family: var(--display); font-size: 1.6rem; line-height: 1.2; letter-spacing: var(--display-track); padding-block: var(--s4); }
.about__aside { grid-column: 8 / -1; position: relative; }
.about__sticky { position: sticky; top: var(--s8); }
.about__y { position: absolute; z-index: 0; right: -18%; top: -10%; font-family: var(--display); font-weight: var(--display-weight); font-size: clamp(20rem, 42vw, 44rem); line-height: .8; color: var(--glyph); pointer-events: none; }
.about figure { position: relative; z-index: 1; width: 78%; }
.about figure img { width: 100%; filter: grayscale(1) contrast(1.05); }
.about figcaption { margin-top: var(--s3); color: var(--ink-soft); }

.vita { margin-top: var(--s9); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--s5); }
.vita h2, .vita h3 { grid-column: 1 / span 3; font-size: clamp(2.4rem, 4vw, 4rem); }
.vita__list { grid-column: 4 / -1; display: grid; grid-template-columns: max-content 1fr; column-gap: var(--s7); }
.vita__row { display: contents; }
.vita__year, .vita__what { border-top: 1px solid var(--rule); padding: var(--s4) 0; }
.vita__year { font-family: var(--display); font-size: 1.6rem; line-height: 1.1; letter-spacing: var(--display-track); }
.vita__what { padding-top: calc(var(--s4) + 4px); }
.vita__meta { grid-column: 4 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s4); border-top: 1px solid var(--rule); padding-top: var(--s4); color: var(--ink-soft); font-size: 15px; }
.vita__meta strong { font-weight: 500; color: var(--ink); }
.vita__meta { align-items: center; }
.vita__seal { display: block; flex: none; }
.vita__seal img { display: block; width: 96px; height: 96px; }

/* ---------------------------------------------------------------- FAQ */
.faq { background: var(--pale); padding-block: var(--s10); }
.faq__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--s5); }
.faq h2 { grid-column: 1 / span 4; font-size: clamp(4rem, 12vw, 12rem); line-height: .8; align-self: start; color: var(--ink); }   /* no longer sticky: it slid down into the Qualle */
.faq__list { grid-column: 6 / -1; }
.faq details { border-top: 1px solid var(--rule); }
.faq details:last-child { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s5); padding: var(--s5) 0; font-family: var(--display); font-size: clamp(1.35rem, 2vw, 1.85rem); line-height: 1.2; letter-spacing: var(--display-track); transition: color .3s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--terra-deep); }
.faq summary::after { content: ""; width: 22px; height: 22px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none' stroke='black' stroke-width='1.3'%3E%3Cpath d='M11 2v18M2 11h18'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none' stroke='black' stroke-width='1.3'%3E%3Cpath d='M11 2v18M2 11h18'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .5s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 var(--s6); max-width: 60ch; color: var(--ink-soft); }
.placeholder { font-style: italic; }
/* Qualle: pencil drawing drifting under the questions. Multiply on the light FAQ grounds;
   Wald's FAQ is dark green, so the drawing is inverted and screened in as light graphite */
.faq { position: relative; overflow: clip; isolation: isolate; }   
.qualle { position: absolute; z-index: -1; left: max(1vw, 8px); top: calc(var(--s10) + 11vw); width: min(32vw, 480px);   /* pinned from the top so opening/closing questions never moves it */
   pointer-events: none; mix-blend-mode: multiply; }
.qualle img { display: block; width: 100%; height: auto; }
html:root .qualle { mix-blend-mode: screen; opacity: .9; }
html:root .qualle img { filter: invert(1); }

/* ---------------------------------------------------------------- Kontakt */
.contact { background: var(--deep); color: var(--on-dark); padding: var(--s10) 0 var(--s6); position: relative; overflow: hidden; }
.contact__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--s5); row-gap: var(--s8); }
.contact h2 { grid-column: 1 / span 7; font-size: clamp(3.4rem, 8.4vw, 9rem); }
.contact h2 { color: var(--pink); }
.contact h2 em { font-style: normal; color: var(--accent); }
.contact__intro { grid-column: 1 / span 5; color: var(--on-terra-soft); max-width: 44ch; }
.contact__details { margin-top: var(--s7); display: grid; gap: var(--s2); font-size: 1.15rem; }
.contact__details a { text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--on-dark) 30%, transparent); justify-self: start; }
.contact__details a:hover { border-color: var(--on-dark); }
.contact__en { margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid color-mix(in srgb, var(--on-dark) 30%, transparent); max-width: 44ch; scroll-margin-top: var(--s8); }
.contact__en h3 { font-family: var(--sans); color: var(--accent); margin-bottom: var(--s3); }
.contact__en p { font-size: 16px; line-height: 1.65; }
.form { grid-column: 7 / -1; display: grid; gap: var(--s6); }
.field { display: grid; gap: var(--s2); }
.field label { font-size: 14px; color: var(--on-terra-soft); }
.field input, .field textarea { font: inherit; color: var(--on-dark); background: transparent; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--on-dark) 40%, transparent); padding: var(--s3) 0; border-radius: 0; transition: border-color .3s; }
.field textarea { min-height: 140px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: color-mix(in srgb, var(--on-dark) 62%, var(--deep)); }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--accent); box-shadow: 0 1px 0 var(--accent); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-bottom-color: var(--pink); box-shadow: 0 1px 0 var(--pink); }
.field__err { font-size: 14px; color: var(--pink); min-height: 0; }
.field__err:empty { display: none; }
.form__privacy { font-size: 14px; color: var(--on-terra-soft); }
.form__privacy a { color: inherit; }
.form__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); flex-wrap: wrap; }
.form .btn { background: var(--accent); color: var(--on-accent); border: 0; font: inherit; font-weight: 500; cursor: pointer; }
.form .btn:hover { background: var(--on-dark); color: var(--on-accent); }
.form__note { font-size: 14px; color: var(--on-terra-soft); min-height: 1.5em; }
.site-foot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: end; gap: var(--s5); flex-wrap: wrap; border-top: 1px solid color-mix(in srgb, var(--on-dark) 22%, transparent); padding-top: var(--s5); color: var(--on-terra-soft); font-size: 14px; }
.site-foot .logo { width: 150px; color: var(--on-dark); }
.site-foot nav { display: flex; gap: var(--s5); }
.site-foot a { text-decoration: none; }
.site-foot a:hover { color: var(--on-dark); }

/* ---------------------------------------------------------------- Logo (wordmark v2) */
.logo { aspect-ratio: 2772 / 454; width: 336px; }   /* logo-v2: longer wordmark, wider box keeps the letter height */
.site-foot .logo { width: 168px; }

/* ---------------------------------------------------------------- Motion: the glyph fills like breath, once */
@media (prefers-reduced-motion: no-preference) {
  .glyph--solid :is(span, p):first-child { animation: fill 1.6s var(--ease) both; }
  .glyph--ghost :is(span, p):first-child { animation: fill 1.6s .15s var(--ease) both; }
  .gull img { animation: glide 2s .2s var(--ease) both; }
  @supports (animation-timeline: view()) {
    .gull { animation: drift linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
    .amsel { animation: lift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    .qualle { animation: lift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  }
}
/* the line box (line-height .8) is shorter than the glyph, so the end state must reach past it or the top of the letter stays sliced off */
@keyframes fill { from { clip-path: inset(100% -10% -30% -10%); } to { clip-path: inset(-30% -10% -30% -10%); } }
@keyframes glide { from { opacity: .2; transform: translate(6%, 8%) rotate(2deg); filter: blur(6px); } }
/* Headline reveal (after parloa.com): each word sharpens out of a blur, one after another */
.reveal-on .c { opacity: 0; filter: blur(.1em); transition: opacity 1.2s var(--ease), filter 1.2s var(--ease); transition-delay: calc(var(--i) * 32ms + 60ms); }
.reveal-on .is-now .c { transition-delay: calc(var(--i) * 12ms); transition-duration: .5s; }
.reveal-on .is-in .c { opacity: 1; filter: blur(0); }
@keyframes rise { from { opacity: .3; transform: translateY(12px); } }
@keyframes drift { to { transform: translate(-12vw, -30vh); } }
@keyframes lift { from { transform: translateY(8%); } to { transform: translateY(-8%); } }

/* ---------------------------------------------------------------- Responsive */
@media (max-width: 1100px) {
  .row h3 { grid-column: 1 / span 5; }
  .row p { grid-column: 6 / -1; }
  .row .arrow-link { grid-column: 6 / -1; justify-self: start; margin-top: var(--s3); }
}
@media (max-width: 820px) {
  body { font-size: 16px; }
  .site-head { padding-block: var(--s5); }
  .logo { width: 270px; }
  .logo { width: min(240px, 44vw); }
  .site-foot .logo { width: 152px; }
  .nav { display: none; }
  .lang { order: 1; margin-left: auto; font-size: 14px; letter-spacing: .04em; }
  .lang a { padding-inline: var(--s1); }
  .menu-btn { order: 2; padding-left: var(--s2); }
  .nav { order: 3; }
  .menu-btn { display: inline-flex; align-items: center; gap: var(--s2); font: 500 15px var(--sans); background: none; border: 0; color: inherit; padding: var(--s3) 0 var(--s3) var(--s3); cursor: pointer; }
  .menu-btn span { display: block; width: 22px; height: 8px; border-block: 1.5px solid currentColor; }
  .site-head.is-open { position: fixed; inset: 0; background: var(--ink); color: var(--cream); flex-wrap: wrap; align-content: flex-start; }
  .site-head.is-open .nav { display: flex; flex-direction: column; gap: var(--s2); width: 100%; margin-top: var(--s8); font-family: var(--display); font-weight: var(--display-weight); font-size: 2.8rem; letter-spacing: var(--display-track); line-height: 1.1; }
  .site-head.is-open .menu-btn span { border-bottom: 0; height: 0; }

  .hero { display: block; min-height: 0; max-height: none; padding: 0; }
  .hero::before { inset: 0 0 auto 50%; height: 58svh; }
  .glyph { height: 58svh; bottom: auto; }
  .glyph :is(span, p), .glyph :is(span, p) { font-size: 92vw; top: 54%; }
  .gull { --gull-w: 44vw; left: auto; right: 0; top: 10svh; margin: 0; width: var(--gull-w); }
  .contents { margin: 0; padding: 58svh 0 var(--s8); }
  .contents li { grid-template-columns: var(--gutter) 1fr; }
  .contents__word { font-size: clamp(2.6rem, 12vw, 3.6rem); }
  .hero__foot { position: static; padding: 0 var(--gutter) var(--s7); flex-direction: column; gap: var(--s2); }

  .manifest, .offer, .about, .faq, .contact { padding-block: var(--s9) var(--s8); }
  .manifest h2 { font-size: 23vw; margin-bottom: var(--s7); }
  .manifest__lead, .manifest__body, .manifest__close { grid-column: 1 / -1; }
  .manifest__body { margin-top: var(--s6); }
  .manifest { display: flex; flex-direction: column; }
  .amsel { order: 2; position: relative; left: auto; bottom: auto; width: 100%; margin: var(--s6) 0 0 auto; z-index: 0; }
  .manifest__close { margin-top: var(--s7); }

  .offer__top { display: block; min-height: 0; }
  .blob { display: none; }
  .offer h2 { font-size: 15vw; }
  .offer__claim { font-size: 17vw; margin-top: var(--s9); }
  .offer__quote { position: relative; right: auto; top: auto; width: auto; margin: var(--s7) calc(var(--gutter) * -1) 0; padding: var(--s7) var(--gutter); background: var(--accent); border-radius: 0 44% 0 0 / 0 18% 0 0; }
  .rows { margin-top: var(--s9); }
  .row { display: block; }
  .row p { margin-top: var(--s3); }
  .row .arrow-link { margin-top: var(--s4); }
  .offer__cta { justify-content: flex-start; }

  .about__text, .about__aside { grid-column: 1 / -1; }
  .about__aside { order: -1; margin-bottom: var(--s8); }
  .about__sticky { position: relative; top: 0; }
  .about__y { font-size: 110vw; right: -12vw; top: -8vw; }
  .about figure { width: 70%; }
  .about h2 { font-size: 16vw; }
  .vita h2, .vita h3, .vita__list, .vita__meta { grid-column: 1 / -1; }
  .vita h2, .vita h3 { margin-bottom: var(--s5); }
  .vita__list { column-gap: var(--s5); }
  .vita__year { font-size: 1.3rem; }

  .faq h2 { position: static; grid-column: 1 / -1; font-size: 30vw; margin-bottom: var(--s6); }
  .faq__list { grid-column: 1 / -1; }
  .faq { display: flex; flex-direction: column; }
  .leaf--sprig { width: 40vw; right: -10vw; }
  .leaf--eucalyptus { top: 40vw; width: 64vw; left: -8vw; }
  .leaf--zz { display: none; }
  .leaf--blur { width: 110vw; left: -50vw; bottom: -20vw; }
  .leaf--hanging { width: 140vw; right: -60vw; top: -48vw; }
  .leaf--drift-far { right: 70vw; top: 6vw; width: 26vw; }
  .leaf--drift-near { right: 30vw; top: 24vw; width: 46vw; }
  .qualle { order: 2; position: relative; left: auto; bottom: auto; width: 72%; margin: var(--s7) 0 0 auto; z-index: 0; }

  .contact h2, .contact__intro, .form { grid-column: 1 / -1; }
  .contact h2 { font-size: 15vw; }
}

/* ================================================================ Inner pages (Musik · Angebot · Über · Kontakt · Impressum) */
/* ---------------------------------------------------------------- Nav: Angebot drop-down */
.nav__has-sub { position: relative; }
.nav__sub { position: absolute; top: 100%; left: calc(var(--s5) * -1); min-width: 230px; list-style: none; display: grid; gap: 0; padding: var(--s3) var(--s5) var(--s4); background: var(--pale); font-size: 15px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .3s var(--ease), transform .4s var(--ease), visibility 0s .3s; }
.nav__sub a { display: inline-block; padding-block: var(--s1); }
.nav__has-sub:hover .nav__sub, .nav__has-sub:focus-within .nav__sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

/* ---------------------------------------------------------------- Page head: same split field as the home hero, one drawing on the light half */
.page-hero { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--s5); min-height: min(86svh, 860px); padding: 150px var(--gutter) var(--s8); overflow: hidden; isolation: isolate; }
.page-hero::before { content: ""; position: absolute; inset: 0 0 0 50%; background: var(--pale); z-index: -2; }
.page-hero__text { grid-column: 1 / span 6; align-self: end; padding-right: var(--s5); }
.page-hero__eyebrow { color: var(--ink-soft); }
.page-hero h1 { font-size: clamp(3.6rem, 8.2vw, 9.5rem); line-height: .86; margin: var(--s5) 0 var(--s7) -0.04em; }
.page-hero h1 .line { display: block; }
.page-hero__lead { font-family: var(--display); font-size: clamp(1.3rem, 1.9vw, 1.8rem); line-height: 1.36; letter-spacing: var(--display-track); max-width: 30ch; }
.page-hero__lead cite { display: block; margin-top: var(--s4); font-size: 16px; line-height: 1.5; font-style: normal; color: var(--ink-soft); }   /* stays in the display face: Jost here is latin-only, no ē/ū */
.page-hero__quote { max-width: 46ch; font-size: 16px; line-height: 1.65; color: var(--ink-soft); }
.page-hero__quote { font-style: italic; }
.page-hero__quote strong { display: block; margin-top: var(--s3); font-family: var(--display); font-weight: var(--display-weight); font-style: normal; font-size: clamp(1.6rem, 2.4vw, 2.2rem); line-height: 1.05; letter-spacing: var(--display-track); color: var(--ink); }
.page-hero__quote cite { margin-top: var(--s3); font-size: 14px; }
.page-hero__art { grid-column: 8 / -1; align-self: center; justify-self: center; width: min(26vw, 34svh); mix-blend-mode: var(--draw-blend); pointer-events: none; }
.page-hero__art img { width: 100%; height: auto; filter: var(--draw-filter); }
.page-hero__art--wide { width: min(36vw, 50svh); }
.page-hero__art--flip img { transform: scaleX(-1) rotate(-4deg); }
.page-hero__art--photo { mix-blend-mode: normal; width: min(24vw, 40svh); }
.page-hero__art--photo img { filter: grayscale(1) contrast(1.05); }
/* Über: the portrait fills the light half edge to edge, multiplied into the panel tint; a soft fade at the top keeps the nav on paper */
.page-hero--portrait .page-hero__art { position: absolute; inset: 0 0 0 50%; grid-column: auto; grid-row: auto; justify-self: stretch; align-self: stretch; width: auto; margin: 0; z-index: -1; mix-blend-mode: normal; }   /* out of the grid area, so 50% is half the hero */
.page-hero--portrait .page-hero__art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: grayscale(1) contrast(1.05); mix-blend-mode: multiply; }
.page-hero--portrait .page-hero__art::after { content: ""; position: absolute; inset: 0 0 auto; height: 190px; background: linear-gradient(var(--pale), color-mix(in srgb, var(--pale) 0%, transparent)); pointer-events: none; }
.page-hero--portrait .page-hero__art { isolation: isolate; background: var(--pale); }
/* Kontakt: one dark ground, full screen, the address as the image */
.page-hero--full { min-height: 100svh; max-height: none; }
.page-hero--full::before { display: none; }
.page-hero--full .page-hero__text { grid-column: 1 / span 7; padding-right: 0; }
.page-hero--full h1 { font-size: clamp(3.2rem, 6.4vw, 6.6rem); line-height: .9; margin-bottom: var(--s6); }
.page-hero--full .page-hero__lead { max-width: 34ch; }
.page-hero__reach { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); margin: var(--s6) 0 var(--s5); font-size: 1.1rem; line-height: 1.5; }
.page-hero__reach a { text-decoration: none; border-bottom: 1px solid var(--rule); transition: border-color .3s, color .3s; }
.page-hero__reach a:hover { color: var(--accent); border-color: currentColor; }
.page-hero--full .arrow-link { color: var(--terra-deep); }
/* Angebot: one giant letter as the image (like the Y on the home page), the quote laid over its foot on a sheet of paper */
.page-hero--dark::before { display: none; }
.page-hero--letter { min-height: min(94svh, 940px); align-items: end; padding-bottom: var(--s9); }
.page-hero__letter { position: absolute; z-index: -1; right: -3vw; top: 13vh; font-family: var(--display); font-weight: var(--display-weight); font-size: min(112svh, 66vw); line-height: .8; color: var(--glyph); pointer-events: none; user-select: none; }
.page-hero--letter .page-hero__text { grid-column: 1 / span 6; }
.page-hero--letter h1 { font-size: clamp(4.2rem, 10.5vw, 11rem); line-height: .82; margin: 0 0 var(--s6) -0.05em; }
.doors { list-style: none; max-width: 560px; margin-top: var(--s7); }
.doors > div { border-top: 1px solid var(--rule); }
.doors > div:last-child { border-bottom: 1px solid var(--rule); }
.door { position: relative; display: grid; grid-template-columns: 1fr auto; column-gap: var(--s5); align-items: center; padding: var(--s4) 0; }
.door::after { content: ""; grid-column: 2; grid-row: 1 / span 2; width: 26px; height: 12px; background: currentColor; transition: transform .5s var(--ease); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 10' fill='none' stroke='black' stroke-width='1.3'%3E%3Cpath d='M0 5h20M16 1l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 10' fill='none' stroke='black' stroke-width='1.3'%3E%3Cpath d='M0 5h20M16 1l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat; }
.door a { text-decoration: none; }
.door a::before { content: ""; position: absolute; inset: 0; }           /* the whole row is the link */
.doors__name { font-family: var(--display); font-weight: var(--display-weight); letter-spacing: var(--display-track); font-size: clamp(1.7rem, 2.5vw, 2.4rem); line-height: 1.05; }
.doors__line { grid-column: 1; color: var(--ink-soft); font-size: 15px; margin-top: var(--s1); }
.door:hover .doors__name { color: var(--glyph); }
.door:hover::after { transform: translateX(6px); }
.page-hero__card { grid-column: 8 / span 4; align-self: end; position: relative; margin-left: -4vw; padding: var(--s6); background: var(--pale); color: var(--ink); font-size: 15px; line-height: 1.6; max-width: 440px; }
html:root .page-hero__card { --ink: #231E2B; --ink-soft: #4A4452; }
.page-hero__card { font-style: italic; color: var(--ink-soft); }
.page-hero__card strong { display: block; margin-top: var(--s3); font-family: var(--display); font-weight: var(--display-weight); font-style: normal; font-size: clamp(1.9rem, 2.8vw, 2.8rem); line-height: 1; letter-spacing: var(--display-track); color: var(--ink); }
.page-hero__card cite { margin-top: var(--s4); font-size: 13px; color: var(--ink-soft); }
@media (prefers-reduced-motion: no-preference) {
  .page-hero__letter:not(.crossing) { animation: fill 1.6s var(--ease) both; }   /* Musik: M and snail stay still */
}

/* Musik: the same idea mirrored — the M bleeds off the left, her drawing on a sheet over its leg, the words on the right */
.page-hero--letter-left .page-hero__letter { left: -5vw; right: auto; font-size: min(104svh, 54vw); }
.page-hero--letter-left .page-hero__text { grid-column: 7 / -1; grid-row: 1; }
.page-hero--letter-left .page-hero__card { grid-column: 2 / span 4; grid-row: 1; margin-left: 0; margin-bottom: calc(var(--s7) * -1); }
.page-hero__card--drawing { padding: var(--s5); max-width: 380px; }
.page-hero__card--drawing img { width: 100%; height: auto; mix-blend-mode: multiply; }
.page-hero__alias { font-family: var(--display); font-weight: var(--display-weight); letter-spacing: var(--display-track); font-size: clamp(1.8rem, 3vw, 3rem); line-height: 1; color: var(--accent); margin: calc(var(--s6) * -1) 0 var(--s7); }
.page-hero__poem { font-family: var(--display); font-size: clamp(1.25rem, 1.7vw, 1.6rem); line-height: 1.38; letter-spacing: var(--display-track); }
.page-hero__poem cite { display: block; margin-top: var(--s3); font-size: 15px; font-style: normal; color: var(--ink-soft); }
/* Musik palette: no light panel behind the nav on this hero, so the nav goes back to light type */
body.musik:has(.wp-block-post-content > .page-hero--dark) .site-head .nav,
body.musik:has(.wp-block-post-content > .page-hero--dark) .site-head:not(.is-open) .menu-btn, body.musik:has(.wp-block-post-content > .page-hero--dark) .site-head:not(.is-open) .lang { --ink: #F6EEE8; --ink-soft: #D9C7BE; --terra-deep: #E8977A; }
body.musik:has(.wp-block-post-content > .page-hero--dark) .site-head .nav__sub { background: var(--cream); }

/* Musik: her snail crawls across the M. One drawing, two inks: printed dark where it lies on the letter
   (painted as the letter's background, clipped to its shape) and light where it leaves it (the same drawing
   in cream, behind the opaque letter). Both share one set of em coordinates, so the lines meet at the edge. */
.crossing { --sx: 0.27em; --sy: 0.25em; --sw: 0.67em; }
.crossing__m {
  display: block; position: relative; z-index: 1;
  color: transparent;
  background: url("../images/schnecke-ink.webp") var(--sx) var(--sy) / var(--sw) auto no-repeat, var(--glyph);
  -webkit-background-clip: text; background-clip: text;
}
.crossing__light { position: absolute; z-index: 0; left: var(--sx); top: var(--sy); width: var(--sw); height: auto; opacity: .92; }
/* Über: the Y with her portrait laid over its foot, as on the home page */
.page-hero__card--photo { padding: 0; background: none; max-width: 380px; }
.page-hero--letter-y .page-hero__text { grid-column: 1 / span 5; grid-row: 1; }
.page-hero--letter-y .page-hero__card--photo { grid-column: 6 / span 4; grid-row: 1; width: min(100%, 44svh); margin-left: 0; }
.page-hero__card--photo img { display: block; width: 100%; height: auto; filter: grayscale(1) contrast(1.05); }

/* Über: the home page's portrait-and-Y composition, as the page head */
.page-hero--about { min-height: min(100svh, 1000px); align-items: end; padding-bottom: var(--s9); }
.page-hero--about .page-hero__text { grid-column: 1 / span 6; }
.page-hero--about h1 { font-size: clamp(4.2rem, 10.5vw, 11rem); line-height: .82; margin: 0 0 0 -0.05em; }
.page-hero--about .about__aside { grid-column: 7 / -1; align-self: end; }
/* the Y is sized and placed in units of the portrait's width (container units), so the pair keeps the home page's proportions at any screen size;
   the portrait's width is capped by the viewport height so the Y's top always lands below the nav */
.page-hero--about .portrait { position: relative; container-type: inline-size; width: min(78%, calc((100svh - 300px) / 1.62)); margin-top: var(--s9); }
.page-hero--about .portrait .about__y { position: absolute; z-index: 0; font-size: 150cqw; line-height: .8; right: -46cqw; top: -18cqw; }
.page-hero--about figure { position: relative; z-index: 1; width: 100%; }
.page-hero--about figure img { width: 100%; filter: grayscale(1) contrast(1.05); }
.page-hero--about figcaption { margin-top: var(--s3); color: var(--ink-soft); }

/* Kontakt: the form sits in the hero, beside the invitation */
.page-hero--form { position: relative; overflow: hidden; isolation: isolate; align-items: end; row-gap: var(--s8); padding-bottom: var(--s9); }
.page-hero--form .page-hero__text { grid-column: 1 / span 5; }
.page-hero--form .form { grid-column: 7 / -1; align-self: end; }
.page-hero__place { margin-top: var(--s4); color: var(--ink-soft); max-width: 40ch; }
.page-hero__reach a { display: inline-flex; align-items: center; min-height: 44px; }
.page-hero--form .contact__en { margin-top: var(--s6); border-top-color: var(--rule); }
.contact__en-title { font: 500 13px/1.5 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--terra-deep); margin-bottom: var(--s3); }
/* The form's tokens are written for the dark Kontakt ground; here they follow the page ink so they hold in every palette */
.page-hero--form .form { --on-dark: var(--ink); --on-terra-soft: var(--ink-soft); --deep: var(--cream); --pink: var(--terra-deep); }
.page-hero--form .field input[aria-invalid="true"], .page-hero--form .field textarea[aria-invalid="true"] { border-bottom-width: 2px; }

/* Über: the story on light paper (like the Manifest), so the page breathes between the dark hero and the dark close */
.sec.story { background-color: var(--sand); color: var(--ink); }
html:root .story { --ink: #231E2B; --ink-soft: #4A4452; --terra-deep: #5B4A78; }
.story { --rule: color-mix(in srgb, var(--ink) 30%, transparent); }
.story__leaf { position: absolute; z-index: 0; left: 0; top: clamp(18rem, 19vw, 24rem); width: min(24vw, 27rem); pointer-events: none; }
.story__leaf img { display: block; width: 100%; height: auto; filter: brightness(.92) var(--photo); -webkit-mask-image: linear-gradient(#000 78%, transparent 97%); mask-image: linear-gradient(#000 78%, transparent 97%); }   /* the cut-out ends flat at the bottom: fade it instead */
.story__lead { grid-column: 1 / span 5; align-self: start; font-size: clamp(1.2rem, 1.5vw, 1.4rem); line-height: 1.55; font-weight: 500; max-width: 34ch; }
.story__body { color: var(--ink); align-self: start; align-content: start; }
.story__turn { color: var(--terra-deep); font-family: var(--display); font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.2; letter-spacing: var(--display-track); padding-block: var(--s4); }
.vita__tag { display: inline-block; margin-left: var(--s2); padding: 0 var(--s2); border: 1px solid var(--rule); border-radius: 999px; font-size: 13px; letter-spacing: .06em; color: var(--terra-deep); vertical-align: 1px; }

/* Wald: no light panel behind the nav here, so nav and menu switch back to light type */
html:root body:has(.wp-block-post-content > :is(.page-hero--full, .page-hero--dark)) .site-head .nav,
html:root body:has(.wp-block-post-content > :is(.page-hero--full, .page-hero--dark)) .site-head:not(.is-open) .menu-btn, html:root body:has(.wp-block-post-content > :is(.page-hero--full, .page-hero--dark)) .site-head:not(.is-open) .lang { --ink: #F3F0EA; --ink-soft: #CFCAC0; --terra-deep: #C9B6E4; }
html:root body:has(.wp-block-post-content > :is(.page-hero--full, .page-hero--dark)) .site-head .nav__sub { background: var(--cream); }
.page-hero--short { min-height: min(62svh, 620px); }
.page-hero--short .page-hero__art { width: min(16vw, 24svh); }

/* ---------------------------------------------------------------- Angebot: in-page index */
.subnav { position: sticky; top: 0; z-index: 15; background: var(--cream); border-block: 1px solid var(--rule); }
html:root .subnav { background-image: var(--grain); background-size: 220px 220px; background-blend-mode: soft-light; }
.subnav ul { list-style: none; display: flex; gap: var(--s2) clamp(18px, 2.6vw, 44px); overflow-x: auto; scrollbar-width: none; padding-block: var(--s4); font-size: 15px; font-weight: 500; }
.subnav a { text-decoration: none; white-space: nowrap; color: var(--ink-soft); padding-block: var(--s1); border-bottom: 1px solid transparent; transition: color .3s, border-color .3s; }
.subnav a:hover, .subnav a[aria-current] { color: var(--ink); border-color: var(--terra-deep); }
.wp-block-post-content > section[id] { scroll-margin-top: 64px; }

/* ---------------------------------------------------------------- Shared section grid */
.sec { background-color: var(--cream); padding-block: var(--s10) var(--s9); position: relative; overflow: hidden; }   /* own ground, so Wald grain blends into it once instead of stacking on the body grain */
.sec__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--s5); }
.sec__title { grid-column: 1 / -1; font-size: clamp(3.4rem, 8vw, 8rem); margin-bottom: var(--s8); margin-left: -0.04em; }
.sec__lead { grid-column: 1 / span 5; font-family: var(--display); font-size: clamp(1.5rem, 2.2vw, 2.1rem); line-height: 1.32; letter-spacing: var(--display-track); }
.sec__body { grid-column: 7 / span 6; display: grid; gap: var(--s4); max-width: 62ch; color: var(--ink-soft); }
.sec__body strong { font-weight: 500; color: var(--ink); }
/* Closing statement: its own section, the gull from the start page flying in from the right */
.quote { background-color: var(--cream); position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; --qh: min(86svh, 54rem); min-height: var(--qh); padding-block: var(--s10); }
.quote__text { width: min(100%, 58vw); margin-left: clamp(0px, 14vw, 16rem); }
.quote__text p { font-family: var(--display); font-weight: var(--display-weight); letter-spacing: var(--display-track); font-size: clamp(2.4rem, 5.4vw, 5.8rem); line-height: 1.02; text-wrap: balance; }
.quote__text em { font-style: normal; color: var(--terra-deep); }
.quote__plant { position: absolute; z-index: -1; right: max(3vw, 16px); bottom: 0; width: min(24vw, calc(var(--qh) * .4)); transform: rotate(-7deg); transform-origin: 50% 100%; pointer-events: none; }   /* grows up from the bottom edge, which cuts the stem */
.quote__plant img { display: block; width: 100%; height: auto; filter: brightness(.9) var(--photo); }
.sec--main { background: var(--terra); color: var(--on-dark); --ink-soft: color-mix(in srgb, var(--on-dark) 84%, var(--terra)); --rule: color-mix(in srgb, var(--on-dark) 45%, transparent); }
.sec--main :focus-visible { outline-color: var(--on-dark); }

/* Angebot intro: three tenets in ruled rows */
.tenets { grid-column: 1 / -1; list-style: none; margin-top: var(--s9); }
.tenet { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--s5); padding: var(--s6) 0; border-top: 1px solid var(--rule); }
.tenet:last-child { border-bottom: 1px solid var(--rule); }
.tenet h3 { grid-column: 1 / span 5; font-size: clamp(1.8rem, 2.8vw, 2.8rem); line-height: 1.05; }
.tenet div { grid-column: 7 / span 6; display: grid; gap: var(--s4); max-width: 62ch; color: var(--ink-soft); }
.tenet strong { font-weight: 500; color: var(--ink); }
.lang-en { grid-column: 7 / span 6; margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--rule); max-width: 62ch; }
.lang-en h3 { font-family: var(--sans); color: var(--terra-deep); margin-bottom: var(--s3); }
.lang-en p { font-size: 16px; line-height: 1.65; color: var(--ink-soft); }

/* 1:1 Begleitung: Whitman as epigraph */
.epigraph { grid-column: 1 / span 5; display: grid; gap: var(--s6); align-content: start; }
.epigraph { font-family: var(--display); font-size: clamp(1.25rem, 1.7vw, 1.6rem); line-height: 1.38; letter-spacing: var(--display-track); }
.epigraph cite { margin-top: var(--s3); font-size: 14px; color: var(--ink-soft); }
.sec__body .arrow-link, .sec__body .btn { justify-self: start; margin-top: var(--s5); }
.sec--main .btn { background: var(--on-dark); color: var(--on-accent); }
.sec--main .btn:hover { background: var(--accent); color: var(--on-accent); }

/* Workshops: Erich Fried set as a poem, the workshop beside it */
.poem { grid-column: 1 / span 5; font-family: var(--display); font-size: clamp(1.15rem, 1.5vw, 1.4rem); line-height: 1.5; letter-spacing: var(--display-track); }
.poem p { white-space: pre-line; }
.poem cite { margin-top: var(--s5); font: 400 14px/1.5 var(--sans); color: var(--ink-soft); }
.events { grid-column: 7 / -1; list-style: none; align-self: start; }
.event { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: var(--s6) 0; display: grid; gap: var(--s4); }
.event h3 { font-size: clamp(2rem, 3.4vw, 3.4rem); line-height: 1; }
.event__sub { font-family: var(--display); font-size: clamp(1.2rem, 1.6vw, 1.5rem); line-height: 1.3; letter-spacing: var(--display-track); color: var(--ink-soft); }
.event__meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s4); margin-top: var(--s3); }
.event .arrow-link { color: var(--terra-deep); }

/* Testimonials: ruled quotes, no cards */
.voices { grid-column: 1 / -1; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--s6); }
.voices > div { border-top: 1px solid var(--rule); padding: var(--s5) 0 var(--s7); }
.voices { font-family: var(--display); font-size: clamp(1.25rem, 1.7vw, 1.6rem); line-height: 1.36; letter-spacing: var(--display-track); color: var(--ink-soft); }
.voices cite { margin-top: var(--s4); }

/* Musik: listening links as ruled rows */
.listen { grid-column: 1 / -1; list-style: none; }
.listen > div { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--s5); align-items: baseline; padding: var(--s6) 0; border-top: 1px solid var(--rule); }
.listen > div:last-child { border-bottom: 1px solid var(--rule); }
.listen h3 { grid-column: 1 / span 5; font-size: clamp(2.2rem, 3.6vw, 3.6rem); line-height: 1; }
.listen p { grid-column: 6 / span 4; color: var(--ink-soft); }
.listen .arrow-link { grid-column: 11 / span 2; justify-self: end; white-space: nowrap; }

/* Über: memberships */
.seals { grid-column: 4 / -1; list-style: none; display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
.seals > div { display: grid; place-items: center; min-width: 116px; padding: var(--s4) var(--s5); border: 1px solid var(--rule); border-radius: 999px; font-weight: 500; letter-spacing: .08em; }
.seals__title { grid-column: 4 / -1; margin-top: var(--s8); color: var(--ink-soft); }

/* Impressum */
.legal { grid-column: 1 / span 8; display: grid; gap: var(--s7); }
.legal section { display: grid; grid-template-columns: repeat(8, 1fr); column-gap: var(--s5); border-top: 1px solid var(--rule); padding-top: var(--s5); }
.legal h2 { grid-column: 1 / span 3; font-size: clamp(1.4rem, 1.9vw, 1.8rem); line-height: 1.15; }
.legal div { grid-column: 4 / -1; display: grid; gap: var(--s3); color: var(--ink-soft); }
.legal address { font-style: normal; }
.legal strong { color: var(--ink); font-weight: 500; }
.legal__note { grid-column: 10 / -1; align-self: start; font-size: 15px; color: var(--ink-soft); border-top: 1px solid var(--rule); padding-top: var(--s5); }

/* Kontakt: the footer stays on the page ground instead of the deep band */
.contact.foot-band--plain { background-color: var(--cream); padding-top: 0; --on-dark: var(--ink); --on-terra-soft: var(--ink-soft); }
/* Closing band on pages without the form */
.cta-band .contact__intro .btn { margin-top: var(--s6); background: var(--accent); color: var(--on-accent); }
.cta-band .contact__intro .btn:hover { background: var(--on-dark); }
.cta-band .contact__details { margin-top: var(--s6); }

@media (max-width: 1100px) {
  .listen h3 { grid-column: 1 / span 5; }
  .listen p { grid-column: 6 / -1; }
  .listen .arrow-link { grid-column: 6 / -1; justify-self: start; margin-top: var(--s3); }
  .voices { grid-template-columns: repeat(2, 1fr); }
  .legal { grid-column: 1 / -1; }
  .legal__note { grid-column: 1 / span 8; margin-top: var(--s7); }
}
@media (max-width: 820px) {
  .site-head.is-open { overflow-y: auto; }
  .site-head.is-open .nav__sub { position: static; opacity: 1; visibility: visible; transform: none; background: none; padding: var(--s1) 0 var(--s3) var(--s1); min-width: 0; font-family: var(--sans); font-size: 17px; letter-spacing: 0; line-height: 1.5; }

  .page-hero { display: flex; flex-direction: column; min-height: 0; padding: 0 0 var(--s8); }
  .page-hero--short:not(:has(.page-hero__art)) { padding: 128px 0 var(--s7); }   /* legal pages have no picture: keep the title clear of the header */
  /* panel starts below the header so logo and menu stay on the dark ground */
  .page-hero::before { inset: 92px 0 auto 50%; height: calc(52svh - 92px); }
  html:root body:has(.wp-block-post-content > .page-hero) .site-head:not(.is-open) .menu-btn, html:root body:has(.wp-block-post-content > .page-hero) .site-head:not(.is-open) .lang { --ink: #F3F0EA; }
  .page-hero__art, .page-hero__art--photo, .page-hero--short .page-hero__art { order: -1; width: 50%; height: 52svh; margin-left: auto; display: flex; align-items: center; justify-content: center; padding: 116px var(--s4) var(--s5); }
  .page-hero__art img { width: auto; max-width: 100%; max-height: 100%; }
  .page-hero__text { align-self: stretch; padding: var(--s7) var(--gutter) 0; }
  .page-hero h1 { font-size: clamp(3.4rem, 17vw, 6rem); margin-bottom: var(--s6); }
  .page-hero--portrait .page-hero__art { position: relative; inset: auto; order: -1; width: 100%; height: 46svh; margin-top: 92px; padding: 0; }
  .page-hero--letter { min-height: 0; padding-top: 0; padding-bottom: var(--s8); }
  .page-hero__letter { position: relative; order: -1; align-self: flex-end; right: -4vw; top: 0; margin-top: 80px; font-size: 84vw; line-height: .78; }
  .page-hero--letter h1 { font-size: clamp(3.6rem, 18vw, 6rem); margin-bottom: var(--s6); }
  .page-hero__card { margin: var(--s7) var(--gutter) 0; }
  .page-hero--letter-left .page-hero__letter { align-self: flex-start; left: -5vw; }
  .page-hero--letter-left .page-hero__card { margin: var(--s7) var(--gutter) 0; max-width: 300px; }
  .page-hero--about { min-height: 0; padding-bottom: var(--s8); }
  .page-hero--about .about__aside { order: -1; align-self: stretch; margin: 110px var(--gutter) 0; }
  .page-hero--about .portrait { width: 72%; margin-top: var(--s7); }
  .page-hero__card--photo, .page-hero--letter-y .page-hero__card--photo { margin: var(--s7) var(--gutter) 0 auto; width: auto; max-width: 72%; }
  .page-hero__alias { margin-top: calc(var(--s5) * -1); }
  .page-hero--form { min-height: 0; padding-bottom: var(--s8); }
  .page-hero--form .form { margin: var(--s8) var(--gutter) 0; }
  .page-hero--form .page-hero__text { padding-right: var(--gutter); }
  .story__lead { grid-column: 1 / -1; }
  .story__leaf { top: 0; width: 38vw; }
  .sec.story { padding-top: calc(var(--s9) + 22vw); }
  .page-hero--portrait::before { display: none; }
  .page-hero--portrait .page-hero__art::after { height: 90px; }
  .page-hero--full { min-height: 100svh; justify-content: flex-end; padding-top: 120px; }
  .page-hero--full .page-hero__text { grid-column: auto; }
  .page-hero--full h1 { font-size: clamp(3rem, 14vw, 4.4rem); margin-bottom: var(--s5); }
  .page-hero__reach { flex-direction: column; gap: var(--s2); margin: var(--s6) 0 var(--s5); }
  .page-hero__reach a { justify-self: start; align-self: flex-start; }

  .sec { padding-block: var(--s9) var(--s8); }
  .sec__title { font-size: 15vw; margin-bottom: var(--s7); }
  .sec__lead, .sec__body, .epigraph, .poem, .events, .lang-en, .tenet h3, .tenet div, .seals, .seals__title, .legal, .legal__note { grid-column: 1 / -1; }
  .sec__body, .events { margin-top: var(--s7); }
  .tenet { display: block; }
  .tenet div { margin-top: var(--s4); }
  .listen > div { display: block; }
  .listen p { margin-top: var(--s3); }
  .listen .arrow-link { display: inline-flex; margin-top: var(--s4); }
  .voices { grid-template-columns: 1fr; }
  .legal section { display: block; }
  .legal div { margin-top: var(--s3); }
  .quote { flex-direction: column; align-items: stretch; min-height: 0; padding-block: var(--s8) var(--s9); }
  .quote__plant { width: 44vw; right: 6vw; }
  .quote__text { padding-bottom: 96vw; }   /* keeps the whole branch (height ≈ 2 × width) below the text */
  .quote__text { margin-left: 0; width: 100%; }
}

/* ---------------------------------------------------------------- Datenschutz: one centred column of readable text on paper */
.sec.prose-sec { background-color: var(--sand); color: var(--ink); }
html:root .prose-sec { --ink: #231E2B; --ink-soft: #4A4452; --terra-deep: #5B4A78; }
.prose-sec { --rule: color-mix(in srgb, var(--ink) 30%, transparent); }
.prose { width: min(100%, 44rem); margin-inline: auto; font-size: clamp(1.0625rem, .4vw + 1rem, 1.1875rem); line-height: 1.75; color: var(--ink); }
.prose > * + * { margin-top: var(--s4); }
.prose__lead { font-family: var(--display); font-weight: var(--display-weight); letter-spacing: var(--display-track); font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.3; text-wrap: balance; color: var(--ink); }
.prose section { margin-top: var(--s8); padding-top: var(--s5); border-top: 1px solid var(--rule); }
.prose section > * + * { margin-top: var(--s4); }
.prose h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1.1; }
.prose h3 { font-family: var(--sans); font-size: 1rem; font-weight: 500; letter-spacing: .04em; color: var(--terra-deep); margin-top: var(--s6); }
.prose p, .prose li { color: var(--ink-soft); max-width: 68ch; }
.prose strong { font-weight: 500; color: var(--ink); }
.prose ul { padding-left: 1.25em; display: grid; gap: var(--s2); }
.prose li::marker { color: var(--terra-deep); }
.prose address { font-style: normal; color: var(--ink-soft); }
.prose a { text-decoration-color: var(--terra-deep); }
.prose__note { margin-top: var(--s8); font-size: 15px; border-top: 1px solid var(--rule); padding-top: var(--s5); }
@media (max-width: 820px) { .prose section { margin-top: var(--s7); } .sec.prose-sec { padding-top: var(--s7); } }

/* Open mobile menu on Wald: light overlay, so everything inside it takes the dark ink — the dark-hero rules must not turn the links light on light */
html:root body:not(.musik) .site-head.is-open.is-open :is(.nav, .menu-btn, .lang) { --ink: #231E2B; --ink-soft: #4A4452; --terra-deep: #5B4A78; color: var(--ink); }
html:root body:not(.musik) .site-head.is-open.is-open .nav__sub { background: none; }


/* ---------------------------------------------------------------- Block markup adaptations
   The prototype's markup became core blocks: wrappers added by WordPress are neutralised here. */
.wp-block-post-content { display: block; }
.ys-linkwrap { display: contents; }                       /* a link that stands alone in a group */
:where(.wp-block-image) { margin: 0; }
:where(.wp-block-image) img { height: auto; }
:where(.wp-block-quote) { border: 0; padding: 0; margin: 0; }
:where(.wp-block-quote) cite { display: block; font-style: normal; }
:where(.wp-block-list) { list-style: none; padding: 0; margin: 0; }
:where(.wp-block-details) { margin: 0; }
.leaf--hanging .soft img { filter: none; }
.offer__claim { font-family: var(--display); font-weight: var(--display-weight); letter-spacing: var(--display-track); }
.about figcaption, .page-hero--about figcaption { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; line-height: 1.5; }
.site-foot--solo { background: var(--deep); color: var(--on-dark); padding: var(--s7) var(--gutter); }
.ys-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.wp-block-image .wp-element-caption { margin-bottom: 0; }
.voices cite, .listen cite { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; line-height: 1.5; }
.epigraph cite, .offer__quote cite, .page-hero__quote cite, .page-hero__card cite, .poem cite, .voices cite { font-family: var(--sans); font-weight: 400; letter-spacing: normal; }   /* these were <figcaption>s outside the quote: body sans, not the quote's display face */
.epigraph cite { line-height: 1.7; }
.offer__quote cite, .page-hero__quote cite { line-height: 1.65; }

/* 404 / search */
.not-found { min-height: 70svh; }
.not-found h1 { font-size: clamp(3rem, 8vw, 7rem); }
.not-found p { margin-top: var(--s4); color: var(--ink-soft); }
.wp-block-search { margin-top: var(--s6); max-width: 560px; }
.wp-block-search__inside-wrapper { display: flex; gap: var(--s4); }
.wp-block-search__input { flex: 1; background: transparent; border: 0; border-bottom: 1px solid var(--rule); color: inherit; font: inherit; padding: var(--s3) 0; }
.wp-block-search__button { font: 500 16px var(--sans); background: var(--accent); color: var(--on-accent); border: 0; border-radius: 999px; padding: var(--s3) var(--s5); cursor: pointer; }
.voices .wp-block-quote cite, .voices cite, .listen cite { line-height: 1.5; }
.poem cite { line-height: 1.5; }
.page-hero__card cite { line-height: 1.6; }
.voices cite { color: var(--ink); }
.listen .ys-linkwrap { color: var(--ink); }
.poem cite { letter-spacing: -0.276px; }   /* inherited from the old <figure> (display tracking at 18.4px) */
.voices cite, .listen cite { font-weight: 500; letter-spacing: .14em; }

/* Decorative shapes drawn in CSS so the block editor shows them too (the front end swaps the blob for the animated SVG, see home.js) */
.logo--mask { background: currentColor; -webkit-mask: url("../images/logo-v2.svg") left center / contain no-repeat; mask: url("../images/logo-v2.svg") left center / contain no-repeat; }
.blob:not(svg) { aspect-ratio: 600 / 640; background: currentColor; -webkit-mask: url("../images/blob.svg") center / contain no-repeat; mask: url("../images/blob.svg") center / contain no-repeat; }
.blob:not(svg) img, .logo--mask img { opacity: 0; width: 100%; height: 100%; }
.amsel img { aspect-ratio: 1200 / 1684; }   /* WordPress's resized copies round the ratio; keep the drawing's exact one */