/* Hallmark · shape: Ein Familientag in vier Farben · genre: editorial · theme: custom · job: book · idea: "Julias drei Angebote liegen auf einem Familientag: morgens der Tisch, nachmittags das Spiel, abends die Massage, nachts Kiel am Wasser" · vibe: "ruhig, warm, nordisch, nah, klar"
 * paper: oklch(97.4% 0.007 85) · accent: oklch(51% 0.155 8) · display: Gambetta · body: Figtree · hero: Kopfzeile links, hoher Bogen im Morgenlicht rechts · nav: Wortmarke mit Bogen, fünf Links, Anrufen · footer: a mast, der Name über die volle Breite, darunter Telefon links und eine Zeile Links rechts, auf Förde-Nachtblau · imagery: photographs (Pexels-Platzhalter in Bögen) · signature: der Tag färbt die Seite von Leinen über Salbei und Rosé bis Nachtblau, am Ende steht die Telefonnummer groß
 * axes: light/roman-serif/warm · posture: full-palette · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R4 V4 · weakest: S, Familientag ist für sich allgemein; die Kapitel tragen Julias echte Inhalte (Regeln aus „Gesund ins Leben“, Leboyer-Reihenfolge, Kiel) */
/* Hallmark · waive 81 · data-slot portrait holds a JK monogram · Julias eigenes Porträt folgt, ein Stockfoto zeigte die falsche Person */
/* Hallmark · dismissed 77 · Kontakt und 404 sind Werkzeugseiten mit Anruf, Formular oder Wegweiser, keine Landeseite */
/* Hallmark · dismissed 58 · die zwölf Lebensmittel-Knöpfe des Sortierspiels zählen als Wörter, der Fließtext liegt unter 80 */
/* Hallmark · answered F4 · the night button is the same pill primary, inverted for the Förde-blue field, one per page */
@import url("./tokens.css");
@import url("./base.css");

@font-face { font-family: "Gambetta"; src: url("../fonts/gambetta-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/figtree-latin-ext.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; src: url("../fonts/figtree-latin.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

html { scroll-padding-top: 104px; }
body { font-size: var(--text-md); line-height: 1.6; font-synthesis: none; }
h1, h2, h3 { font-weight: 400; color: inherit; }
h1 { font-size: var(--text-display); line-height: 1; letter-spacing: var(--tracking-display); max-width: 14ch; }
h2 { font-size: var(--text-section); line-height: 1.04; letter-spacing: var(--tracking-display); max-width: 18ch; }
h3 { font-size: var(--text-lead); line-height: 1.2; letter-spacing: -0.01em; max-width: 30ch; }
strong { font-weight: 600; }
[data-slot] { background: var(--color-rose-2); }

.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); }
.band { padding-block: var(--section-gap); }
.band--oat { background: var(--color-paper-2); }
.band--sage { background: var(--color-sage); }
.band--rose { background: var(--color-rose); }
.band--night { background: var(--color-night); color: var(--color-on-night); }
.band--night :focus-visible { outline-color: var(--color-focus-on-night); }
.lead { font-size: var(--text-lead); line-height: 1.45; max-width: 34ch; }
.prose p { max-width: 58ch; }
.prose p + p { margin-top: 0.9em; }
.stack > * + * { margin-top: var(--space-lg); }
.caption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-2); }
.band--night .caption { color: var(--color-on-night-2); }

/* Links und Knöpfe */
.more { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--color-accent); text-underline-offset: 0.3em; transition: color var(--dur-short) var(--ease-out); }
.more:hover { color: var(--color-accent); }
.band--night .more { text-decoration-color: var(--color-focus-on-night); }
.band--night .more:hover { color: var(--color-focus-on-night); }
.btn { display: inline-flex; align-items: center; gap: var(--space-sm); min-height: 52px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-paper); font: 600 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-ink-2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn--quiet { min-height: 44px; padding: 0 var(--space-md); background: var(--color-paper-2); color: var(--color-ink); font-weight: 400; }
.btn--quiet:hover { background: var(--color-paper-3); }
.band--oat .btn--quiet { background: var(--color-paper); }
.tel-big { display: inline-block; font-family: var(--font-display); font-size: var(--text-number); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums; text-decoration: none; white-space: nowrap; transition: color var(--dur-short) var(--ease-out); }
.tel-big:hover { color: var(--color-accent); }
.band--night .tel-big:hover { color: var(--color-focus-on-night); }
.fill { padding: 0 0.25em; border: 1px dashed color-mix(in oklch, var(--color-muted) 70%, transparent); border-radius: 3px; color: var(--color-muted); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.band--night .fill { color: var(--color-on-night-2); border-color: var(--color-on-night-2); }

/* Bogen: das Fenster, durch das jedes Bild schaut */
.arch { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius-arch); aspect-ratio: var(--ar, 4 / 5); background: var(--color-paper-3); }
.arch > img { width: 100%; height: 100%; object-fit: cover; }
.arch--wide { --ar: 16 / 9; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.arch[data-slot] { background: var(--color-rose-2); }
.monogram { display: grid; place-items: center; height: 100%; padding-top: 12%; font-family: var(--font-display); font-size: clamp(5rem, 13vw, 12rem); line-height: 1; letter-spacing: -0.04em; color: var(--color-ink); }
.monogram small { display: block; margin-top: var(--space-md); font-family: var(--font-body); font-size: var(--text-sm); letter-spacing: 0; color: var(--color-ink-2); text-align: center; }

/* Kopfzeile */
.skip { position: absolute; left: var(--space-md); top: -100px; z-index: var(--z-modal); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-input); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }
.site-header { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 80px; }
.wordmark { display: inline-flex; white-space: nowrap; align-items: center; gap: var(--space-sm); font-family: var(--font-outlier); font-size: 1.625rem; line-height: 1; letter-spacing: -0.015em; text-decoration: none; color: var(--color-ink); }
.wordmark svg { width: 24px; height: 30px; flex-shrink: 0; color: var(--color-accent); }
.wordmark:focus-visible { outline-offset: 6px; }
.site-nav { display: flex; align-items: center; gap: var(--space-xl); }
.nav-links { display: flex; gap: var(--space-lg); margin: 0; padding: 0; list-style: none; }
.nav-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--text-sm); color: var(--color-ink-2); text-decoration: none; text-underline-offset: 0.45em; transition: color var(--dur-short) var(--ease-out); }
.nav-links a:hover { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); }
.nav-links a[aria-current="page"] { color: var(--color-ink); text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--color-accent); }
.menu-toggle { display: none; }

/* Startseite: Kopf */
.hero { padding-block: var(--space-2xl) var(--space-3xl); }
.hero .grid { align-items: end; }
.hero__text { grid-column: 1 / span 7; padding-bottom: var(--space-xl); }
.hero h1 { font-size: clamp(3rem, 6.4vw + 0.25rem, 7.25rem); }
.hero__text .lead { margin-top: var(--space-lg); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); margin-top: var(--space-xl); }
.hero__media { grid-column: 8 / span 5; }
.hero__media .arch { max-height: calc(100svh - 160px); min-height: 420px; width: 100%; }

/* Kapitel Morgen: der Sortierer */
.morning__head { grid-column: 1 / span 5; align-self: start; position: sticky; top: 128px; }
.morning__head .prose { margin-top: var(--space-lg); }
.morning__head .more { margin-top: var(--space-md); }
.morning__tool { grid-column: 7 / span 6; }
.sorter__pool { display: flex; flex-wrap: wrap; gap: var(--space-xs); min-height: 52px; margin: 0 0 var(--space-lg); padding: 0; list-style: none; }
.sorter__pool:empty { display: none; }
.sorter__status { min-height: 1lh; margin-bottom: var(--space-lg); font-size: var(--text-sm); color: var(--color-ink-2); }
.sorter__bins { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); }
.bin { display: flex; flex-direction: column; gap: var(--space-sm); min-height: 200px; padding: var(--space-lg) var(--space-md) var(--space-md); border-radius: var(--radius-card); background: var(--color-paper); }
.bin h3 { font-size: var(--text-lead); }
.bin__target { display: flex; align-items: center; width: 100%; min-height: 44px; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: default; }
.sorter.is-picking .bin__target { cursor: pointer; }
.sorter.is-picking .bin:hover { background: var(--color-sage); }
.bin__target:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 6px; border-radius: 4px; }
.bin p { font-size: var(--text-xs); line-height: 1.45; color: var(--color-ink-2); }
.bin ul { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: auto 0 0; padding: 0; list-style: none; }
.chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); border: 0; border-radius: var(--radius-chip); background: var(--color-paper); color: var(--color-ink); font: 400 var(--text-sm)/1 var(--font-body); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.sorter__pool .chip:hover { background: var(--color-paper-3); }
.chip:active { transform: translateY(1px); }
.chip:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.chip[aria-pressed="true"] { background: var(--color-ink); color: var(--color-paper); }
.bin .chip { min-height: 36px; padding: 0 var(--space-sm); background: var(--color-paper-2); cursor: default; }
.bin .chip.is-right { background: var(--color-sage-2); }
.bin .chip.is-moved { background: var(--color-rose-2); }
.sorter__reset { margin-top: var(--space-md); }
.source { margin-top: var(--space-lg); font-size: var(--text-xs); color: var(--color-ink-2); }
.source a { text-underline-offset: 0.2em; }

/* Kapitel Nachmittag */
.afternoon__media { grid-column: 1 / span 6; }
.afternoon__text { grid-column: 8 / span 5; align-self: center; }
.topics { display: grid; gap: var(--space-md); margin: var(--space-xl) 0 var(--space-lg); padding: 0; list-style: none; }
.topics li { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: var(--space-3xs) var(--space-md); align-items: baseline; }
.topics strong { font-family: var(--font-display); font-size: var(--text-lead); font-weight: 400; line-height: 1.2; }
.topics span { color: var(--color-ink-2); }

/* Kapitel Abend: die Reihenfolge der Leboyer-Massage */
.evening__text { grid-column: 1 / span 7; }
.evening__media { grid-column: 9 / span 4; align-self: end; }
.flow { display: flex; flex-wrap: wrap; gap: 0 0.3em; margin: var(--space-xl) 0; padding: 0; list-style: none; font-family: var(--font-display); font-size: clamp(2.5rem, 4.4vw + 0.4rem, 5.25rem); line-height: 1.08; letter-spacing: var(--tracking-display); }
.flow li::after { content: ","; }
.flow li:last-child::after { content: "."; }
.evening__text .prose { margin-bottom: var(--space-md); }

/* Kapitel Über mich, kurz */
.about__media { grid-column: 1 / span 4; }
.about__text { grid-column: 6 / span 7; align-self: center; }
.facts { display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); gap: var(--space-sm) var(--space-lg); margin: var(--space-xl) 0 var(--space-lg); }
.facts dt { font-weight: 600; }
.facts dd { margin: 0; color: var(--color-ink-2); }
.band--night .facts dd { color: var(--color-on-night-2); }

/* Kapitel Nacht: Kiel und der Anruf */
.night__media { grid-column: 1 / span 5; }
.night__text { grid-column: 7 / span 6; align-self: center; }
.night__text .tel-big { margin-top: var(--space-xl); }
.night__text .lead { margin-top: var(--space-lg); color: var(--color-on-night-2); }
.night__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-xl); margin-top: var(--space-lg); color: var(--color-on-night-2); }

/* Unterseiten: Kopf */
.page-hero { padding-block: var(--space-3xl) var(--space-4xl); }
.page-hero--fill { display: grid; align-items: center; min-height: calc(100svh - 80px); padding-block: var(--space-2xl); }
.page-hero .grid { align-items: center; }
.page-hero__text { grid-column: 1 / span 7; }
.page-hero__text .lead { margin-top: var(--space-lg); }
.page-hero__text .hero__actions { margin-top: var(--space-xl); }
.page-hero__media { grid-column: 8 / span 5; }
.page-hero--flip .page-hero__media { grid-column: 1 / span 5; grid-row: 1; }
.page-hero--flip .page-hero__text { grid-column: 7 / span 6; grid-row: 1; }
.page-hero--wide .page-hero__text { grid-column: 1 / span 9; }
.page-hero--wide { padding-bottom: 0; }
.page-hero--wide .page-hero__media { grid-column: 1 / -1; margin-top: var(--space-2xl); }
.page-hero--wide .arch { --ar: 21 / 9; max-height: 40svh; width: 100%; }
.page-hero--wide + .band { margin-top: var(--section-gap-s); }

.split__head { grid-column: 1 / span 5; }
.split__body { grid-column: 7 / span 6; }
.split__head .lead { margin-top: var(--space-md); }
.sequence-head { margin-bottom: var(--space-3xl); }
.split__body > .prose:first-child { margin-top: var(--space-xs); }

.topic-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); margin: 0; padding: 0; list-style: none; }
.topic-list h3 { margin-bottom: var(--space-sm); }
.topic-list p { color: var(--color-ink-2); }
.band--sage .topic-list p, .band--rose .topic-list p { color: var(--color-ink-2); }

.statement { font-family: var(--font-display); font-size: clamp(1.6rem, 1.6vw + 1rem, 2.25rem); line-height: 1.25; letter-spacing: -0.015em; max-width: 26ch; }
.wide-statement { margin-top: var(--space-xl); grid-column: 1 / span 10; font-family: var(--font-display); font-size: clamp(1.75rem, 2.4vw + 0.9rem, 3.25rem); line-height: 1.16; letter-spacing: -0.02em; max-width: 30ch; }
.wide-statement + .prose { grid-column: 6 / span 7; margin-top: var(--space-2xl); }
.wide-head { grid-column: 1 / -1; }

.principles { display: grid; gap: var(--space-xl); margin: 0; padding: 0; list-style: none; }
.principles li { display: grid; gap: var(--space-xs); }
.principles h3 { font-size: var(--text-lead); }
.principles p { color: var(--color-ink-2); max-width: 46ch; }

.rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); margin-top: var(--space-2xl); }

.media-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: center; }
.media-row__media { grid-column: 1 / span 6; }
.media-row__text { grid-column: 8 / span 5; }
.media-row--flip .media-row__media { grid-column: 7 / span 6; grid-row: 1; }
.media-row--flip .media-row__text { grid-column: 1 / span 5; grid-row: 1; }

.well { padding: var(--space-2xl); border-radius: var(--radius-card); background: var(--color-rose); }
.well ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs) var(--gap-columns); margin: var(--space-lg) 0 0; padding-left: 1.1em; }
.well li::marker { color: var(--color-accent); }

/* Babymassage: Ablauf mit stehendem Bild */
.sequence__media { grid-column: 1 / span 5; position: sticky; top: 112px; align-self: start; }
.sequence__media .arch { --ar: 4 / 5; max-height: calc(100svh - 160px); width: 100%; }
.sequence__media .arch > img { position: absolute; inset: 0; opacity: 0; transition: opacity var(--dur-long) var(--ease-in-out); }
.sequence__media .arch > img.is-active { opacity: 1; }
.sequence__list { grid-column: 7 / span 6; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.sequence__list li { counter-increment: step; padding-block: var(--space-2xl); min-height: 34svh; }
.sequence__list li:first-child { padding-top: var(--space-md); }
.sequence__list h3 { font-size: var(--text-section); line-height: 1.04; letter-spacing: var(--tracking-display); }
.sequence__list h3::before { content: counter(step) ". "; color: var(--color-accent); }
.sequence__list p { margin-top: var(--space-sm); max-width: 46ch; color: var(--color-ink-2); }

/* Angebote als Zeilen */
.offers { margin: var(--space-2xl) 0 0; padding: 0; list-style: none; }
.offer { display: grid; grid-template-columns: minmax(0, 7rem) minmax(0, 1fr) auto; gap: var(--space-xl); align-items: center; padding-block: var(--space-lg); text-decoration: none; color: inherit; }
.offer .arch { --ar: 4 / 5; width: 7rem; }
.offer h3 { font-size: var(--text-section); line-height: 1.04; letter-spacing: var(--tracking-display); max-width: none; transition: color var(--dur-short) var(--ease-out); }
.offer p { margin-top: var(--space-xs); color: var(--color-ink-2); }
.offer__go { font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--color-accent); text-underline-offset: 0.3em; }
.offer:hover h3 { color: var(--color-accent); }
.offer:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: 8px; }

/* Kontakt */
.contact__call { grid-column: 1 / span 7; align-self: center; }
.contact__media { grid-column: 9 / span 4; }
.contact__call .lead { margin-top: var(--space-lg); }
.contact__form { grid-column: 7 / span 6; }
.form { display: grid; gap: var(--space-md); }
.field { display: grid; gap: var(--space-xs); }
.field label, .field legend { font-size: var(--text-sm); font-weight: 600; }
.field input, .field textarea { width: 100%; min-height: 52px; padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-muted); border-radius: var(--radius-input); background: var(--color-paper); color: var(--color-ink); outline: 2px solid transparent; outline-offset: -3px; transition: border-color var(--dur-short) var(--ease-out); }
.field textarea { min-height: 160px; resize: vertical; }
.field input:hover, .field textarea:hover { border-color: var(--color-ink-2); }
.field input:focus-visible, .field textarea:focus-visible { outline-color: var(--color-focus); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--color-error); }
.field input:disabled, .field textarea:disabled { opacity: 0.55; cursor: not-allowed; }
.field__help { min-height: 1lh; font-size: var(--text-xs); color: var(--color-ink-2); }
.field__help.is-error { color: var(--color-error); }
.seg { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; padding: 0; border: 0; }
.seg legend { margin-bottom: var(--space-xs); padding: 0; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; padding: 0; }
.seg label { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); border-radius: var(--radius-chip); background: var(--color-paper); font-weight: 400; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.seg label:hover { background: var(--color-paper-3); }
.seg input:checked + label { background: var(--color-ink); color: var(--color-paper); }
.seg input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.consent label { font-weight: 400; }
.consent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-sm); align-items: start; font-size: var(--text-sm); color: var(--color-ink-2); }
.consent input { width: 22px; height: 22px; min-height: 0; padding: 0; margin: var(--space-3xs) 0 0; accent-color: var(--color-ink); }
.consent input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.form__status { min-height: 1lh; font-size: var(--text-sm); color: var(--color-ink-2); }

/* Rechtliches und Fließtext */
.legal { padding-block: var(--space-3xl) var(--section-gap); }
.legal h1 { font-size: var(--text-section); max-width: 20ch; }
.legal h2 { margin-top: var(--space-2xl); font-size: var(--text-lead); line-height: 1.25; letter-spacing: -0.01em; max-width: none; }
.legal p, .legal li { max-width: 68ch; line-height: 1.7; }
.legal p, .legal ul, .legal address { margin-top: var(--space-sm); }
.legal address { font-style: normal; }
.legal ul { padding-left: 1.2em; }
.credits li + li { margin-top: var(--space-2xs); }

/* Fußzeile */
.site-footer { padding-top: var(--space-3xl); background: var(--color-night-2); color: var(--color-on-night); isolation: isolate; }
.site-footer > .container { position: relative; z-index: 1; }
.footer-art { display: block; margin-top: clamp(-120px, -8vw, -40px); pointer-events: none; mask-image: linear-gradient(to bottom, transparent, #000 22%); }
.footer-art img { display: block; width: 100%; height: auto; }
.site-footer ::selection { background: var(--color-on-night); color: var(--color-night-2); }
.site-footer :focus-visible { outline-color: var(--color-focus-on-night); }
.footer-name { display: block; font-family: var(--font-display); font-size: clamp(3.25rem, 8vw, 6rem); line-height: 0.92; letter-spacing: -0.035em; white-space: nowrap; text-decoration: none; }
.footer-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: end; margin-top: var(--space-xl); }
.footer-contact { grid-column: 1 / span 5; display: grid; gap: var(--space-xs); }
.footer-contact a:first-child { font-family: var(--font-display); font-size: var(--text-section); line-height: 1; letter-spacing: -0.02em; text-decoration: none; font-variant-numeric: lining-nums tabular-nums; }
.footer-contact a:first-child:hover { color: var(--color-focus-on-night); }
.footer-contact p, .footer-contact a { color: var(--color-on-night-2); }
.footer-contact a:not(:first-child) { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 0.3em; }
.footer-links { grid-column: 7 / span 6; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 var(--space-lg); margin: 0; padding: 0; list-style: none; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-on-night-2); text-decoration: none; transition: color var(--dur-short) var(--ease-out); }
.footer-links a:hover { color: var(--color-on-night); text-decoration: underline; text-underline-offset: 0.3em; }
.footer-contact a:first-child { color: var(--color-on-night); }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm) var(--space-xl); margin-top: var(--space-xl); font-size: var(--text-xs); color: var(--color-on-night-2); }
.footer-base a { color: inherit; text-underline-offset: 0.2em; }
.footer-base a:hover { color: var(--color-on-night); }

/* Telefon und Tablet */
@media (max-width: 75rem) {
  .nav-links { gap: var(--space-md); }
  .site-nav { gap: var(--space-lg); }
}
@media (max-width: 60rem) {
  .grid > *, .media-row > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  /* one vertical rhythm on small screens: heading to text 24, text to picture 40, picture to text 40 */
  .hero { padding-block: var(--space-xl) var(--section-gap); }
  .page-hero { padding-block: var(--space-xl) var(--section-gap); }
  .page-hero--wide { padding-bottom: 0; }
  .page-hero--fill { min-height: 0; }
  .hero__text { padding-bottom: 0; }
  .hero__media, .page-hero__media, .contact__media { margin-top: var(--space-xl); }
  .hero__media .arch { max-height: none; min-height: 0; --ar: 4 / 4.4; }
  .morning__head { position: static; margin-bottom: var(--space-xl); }
  .split__body, .contact__form { margin-top: var(--space-lg); }
  .afternoon__text, .about__text, .night__text, .evening__media, .media-row__text { margin-top: var(--space-xl); }
  .media-row--flip .media-row__media { margin-top: 0; }
  .media-row--flip .media-row__text { margin-top: var(--space-xl); }
  .wide-statement { margin-top: var(--space-lg); }
  .wide-statement + .prose { margin-top: var(--space-lg); }
  .sequence-head { margin-bottom: var(--space-xl); }
  .page-hero--wide .arch { --ar: 4 / 3; border-radius: var(--radius-arch); max-height: none; }
  .about__media, .night__media, .evening__media, .sequence__media { max-width: none; }
  .topic-list { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .rules { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .sequence__media { position: static; margin-bottom: var(--space-lg); }
  .sequence__media .arch > img:not(:first-child) { display: none; }
  .sequence__media .arch > img:first-child { opacity: 1; }
  .sequence__list li { min-height: 0; padding-block: var(--space-lg); }
  .sequence__list li:first-child { padding-top: 0; }
  .well { padding: var(--space-xl) var(--space-lg); }
  .well ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-row { margin-top: var(--space-2xl); }
  .footer-contact, .footer-links { grid-column: 1 / -1; }
  .footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); grid-auto-flow: column; align-items: start; gap: 0 var(--space-md); margin-top: var(--space-xl); }
  .footer-links a { padding-block: var(--space-xs); line-height: 1.35; white-space: nowrap; }
  .footer-links li:nth-child(-n+3) { grid-column: 1; }
  .footer-links li:nth-child(n+4) { grid-column: 2; }
  .footer-base { margin-top: var(--space-2xl); }
  .site-nav { gap: var(--space-xs); }
  .js .menu-toggle { display: inline-flex; }
  .js .nav-links { position: fixed; inset: 80px 0 0; z-index: var(--z-modal); flex-direction: column; gap: 0; padding: var(--space-xl) var(--gutter); background: var(--color-night); visibility: hidden; opacity: 0; transition: opacity var(--dur-short) var(--ease-out), visibility 0s linear var(--dur-short); }
  .js .site-header.is-open .nav-links { visibility: visible; opacity: 1; transition: opacity var(--dur-short) var(--ease-out); }
  .js .nav-links a { min-height: 64px; font-family: var(--font-display); font-size: 2.25rem; color: var(--color-on-night); }
  .js .nav-links a[aria-current="page"] { text-decoration-color: var(--color-focus-on-night); }
  .js .nav-links a:focus-visible { outline-color: var(--color-focus-on-night); }
  html:not(.js) .site-nav { flex-wrap: wrap; }
}
@media (max-width: 40rem) {
  .site-footer { padding-top: var(--space-2xl); }
  .footer-art { margin-top: -24px; }
  .site-header__inner { min-height: 68px; }
  .js .nav-links { inset: 68px 0 0; }
  .wordmark { font-size: 1.375rem; }
  .nav-call { width: 44px; padding: 0; justify-content: center; }
  .nav-call span { display: none; }
  .sorter__bins { grid-template-columns: minmax(0, 1fr); }
  .bin { min-height: 0; }
  .topics li { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .facts { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .facts dd { margin-bottom: var(--space-md); }
  .facts dd:last-of-type { margin-bottom: 0; }
  .offer { grid-template-columns: minmax(0, 4.5rem) minmax(0, 1fr); gap: var(--space-md); }
  .offer .arch { width: 4.5rem; }
  .offer__go { display: none; }
  .well ul { grid-template-columns: minmax(0, 1fr); }
  .footer-name { font-size: 18vw; }
}
.menu-toggle { align-items: center; min-height: 44px; padding: 0 var(--space-md); border: 0; border-radius: var(--radius-pill); background: var(--color-paper-2); color: var(--color-ink); font: 400 var(--text-sm)/1 var(--font-body); cursor: pointer; }
.menu-toggle:hover { background: var(--color-paper-3); }
.menu-toggle:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .btn, .chip, .more, .tel-big, .nav-links a { transition: none; }
  .sequence__media .arch > img { transition: none; }
}

/* Nachtblau: Knöpfe und Texte drehen ihre Farben */
.band--night .lead { color: var(--color-on-night-2); }
.band--night .btn { background: var(--color-on-night); color: var(--color-ink); }
.band--night .btn:hover { background: var(--color-paper-3); }
.band--night .btn:focus-visible { outline-color: var(--color-focus-on-night); }
.form-title { margin-bottom: var(--space-xl); font-size: clamp(1.75rem, 1.2vw + 1.2rem, 2.5rem); }
.contact__note { margin-top: var(--space-lg); }