/* ==========================================================================
   ANDREA SEILER — Interior Design · Consulting · Workshops
   Stylesheet v6 (vanilla CSS, no framework)
   Gestaltung nach Mockup «AS_Landingpage»: eine Schrift (Futura PT: Light für
   Aussagen in Versalien, Book für Text, Bold für Namen), keine Linien, viel
   Weissraum um die Bilder, dichte Textblöcke, kleines schwarzes Banner.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts
   Futura PT kommt über das Adobe-Fonts-Kit (<head>). Bis dahin: Jost (selbst
   gehostet, OFL), die Futura-Schnitte Light / Book / Bold sind damit abgedeckt.
   Die System-Futura des Mac hat keinen Light- und Book-Schnitt und steht
   deshalb erst danach in der Liste.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Jost"; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url("../fonts/jost-latin.woff2") format("woff2");
  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;
}
@font-face {
  font-family: "Jost"; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url("../fonts/jost-latin-ext.woff2") format("woff2");
  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: "Jost"; font-style: italic; font-weight: 300 800; font-display: swap;
  src: url("../fonts/jost-italic-latin.woff2") format("woff2");
  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;
}
@font-face {
  font-family: "Jost"; font-style: italic; font-weight: 300 800; font-display: swap;
  src: url("../fonts/jost-italic-latin-ext.woff2") format("woff2");
  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;
}

/* --------------------------------------------------------------------------
   2. Design tokens
   -------------------------------------------------------------------------- */
:root {
  --font: "Futura PT", "futura-pt", "Jost", "Futura", "Avenir Next", "Helvetica Neue", Arial, sans-serif;

  --bg: #faf8f5;         /* warmes Weiss statt reinem Weiss: Bilder wirken darauf wärmer */
  --fg: #111111;
  --muted: #6f6f6f;
  --soft: #b4b4b4;
  --surface: #f0ede8;

  --gutter: clamp(20px, 4vw, 64px);
  --max: 1680px;
  --content: 960px;        /* Inhaltsspalte (Text in zwei Spalten, Leistungen) */
  --img: 640px;            /* einheitliche Bildbreite Querformat (3:2) */
  --img-portrait: 300px;   /* einheitliche Bildbreite Hochformat (2:3), gleiche Höhe */
  --nav-h: 56px;           /* Höhe der Menüleiste */
  --header-h: 56px;        /* Höhe des ganzen klebenden Kopfs; main.js setzt den echten Wert */

  --ease: cubic-bezier(.22, .61, .36, 1);
  --t-fast: 180ms;
  --t-med: 420ms;
  --t-slow: 800ms;

  /* Schrift-Hierarchie (alles Futura) */
  --fs-body: clamp(16px, 1.2vw, 18px);   /* 02.11.: minim grösser (vorher 14–16 px) */
  --fs-small: 12px;
  --fs-title: clamp(1.2rem, 1.8vw, 1.6rem);          /* Seitentitel, Versalien, gesperrt */
  --fs-h2: clamp(0.9rem, 1.1vw, 1.05rem);            /* Abschnittstitel, Versalien */
  --fs-h3: 1rem;                                      /* Blocktitel, Book/Medium */
  --fs-statement: clamp(1.25rem, 2vw, 1.8rem);       /* Aussagen: Light, Versalien */
}

/* --------------------------------------------------------------------------
   3. Reset / base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.nav-open, body.lb-open, body.dialog-open { overflow: hidden; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1em; max-width: 64ch; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1.25; letter-spacing: 0; }
strong, b { font-weight: 700; }
:focus-visible { outline: 1px solid var(--fg); outline-offset: 4px; }
::selection { background: var(--fg); color: var(--bg); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Sprachumschaltung: beide Sprachen stehen im Markup, nur die aktive wird
   gerendert (gesteuert über <html lang="de|en">). Standard = DE. */
[data-lang] { display: none; }
html[lang="de"] [data-lang="de"], html[lang="en"] [data-lang="en"] { display: revert; }
html:not([lang="en"]) [data-lang="de"] { display: revert; }

/* Seitenübergänge: die Ein- und Ausblendung von früher ist am 02.11. entfernt (Tempo). Seiten erscheinen sofort. */

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(28px, 3.5vw, 56px); }
.section--tight { padding-block: clamp(16px, 2.2vw, 36px); }
.center { text-align: center; }
.content { max-width: var(--content); margin: 0 auto; }
.content p { max-width: 60ch; }

/* Text in zwei gleich breiten Spalten (Leistungsseiten) */
.text-cols { display: grid; gap: 0 clamp(2rem, 4vw, 4rem); grid-template-columns: 1fr; }
@media (min-width: 760px) { .text-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.text-cols p { max-width: none; }
.text-cols > div > :last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   5. Typografie
   -------------------------------------------------------------------------- */
/* Seitentitel: Versalien, gesperrt, Book */
.title { font-size: var(--fs-title); font-weight: 400; letter-spacing: 0.24em; text-transform: uppercase; line-height: 1.2; margin: 0; text-wrap: balance; }
/* Abschnittstitel (Leistungen, Formate …): Versalien, Medium */
.section-title { font-size: var(--fs-h2); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; margin: 0 0 1.1rem; }
/* Aussagen und Slogans: Futura Light in Versalien (wie die Headline im Mockup) */
.statement { font-weight: 300; text-transform: uppercase; letter-spacing: 0.03em; font-size: var(--fs-statement); line-height: 1.3; margin: 0; max-width: 36ch; text-wrap: balance; }
/* Einzeilige Aussagen: Schriftgrösse folgt der Fensterbreite, damit nie umbrochen wird */
.statement--line { white-space: nowrap; max-width: none; text-wrap: initial; }
.statement--home { font-size: clamp(0.95rem, 4.1vw, 2.9rem); }
.statement--contact { font-size: clamp(0.9rem, 3.6vw, 2.6rem); }
.center .statement, .page-head--center .statement { margin-inline: auto; }
/* Kleine Rubrikbezeichnung */
.label { font-size: var(--fs-small); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.9rem; max-width: none; }
.small { font-size: var(--fs-small); color: var(--muted); }
.muted { color: var(--muted); }
.upper { text-transform: uppercase; letter-spacing: 0.16em; font-size: var(--fs-small); font-weight: 500; }
/* Namenszeile wie im Mockup: fett, darunter Titel */
.signature { margin: 1.6rem 0 0; line-height: 1.5; }
.signature strong { font-weight: 700; }

/* Textlink: gesperrte Versalien */
.textlink { display: inline-block; font-size: var(--fs-small); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg); transition: color var(--t-fast) var(--ease); }
.textlink:hover { color: var(--muted); }

/* Kleines schwarzes Banner (Mockup «Let's talk») */
.banner {
  display: block; width: 100%; max-width: 400px;
  padding: 0.85em 1em; background: var(--fg); color: #fff;
  font-size: var(--fs-small); letter-spacing: 0.04em; text-align: center; line-height: 1.4;
  transition: background var(--t-fast) var(--ease);
}
.banner:hover { background: #333; }
.banner--center { margin-inline: auto; }

/* Fliesstext-Spalten (About, Rechtliches) */
.prose { max-width: 680px; margin: 0 auto; }
.prose p { max-width: none; }
.prose h2, .prose h3, .about__text h2 { font-size: var(--fs-h2); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; margin: 1.9em 0 0.6em; }
.prose h2:first-child, .prose h3:first-child, .about__text h2:first-child { margin-top: 0; }
.prose a:not(.textlink), .about__text a:not(.textlink):not(.banner), .cv a {
  text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; text-decoration-color: var(--soft);
}
.prose a:not(.textlink):hover, .about__text a:not(.textlink):not(.banner):hover, .cv a:hover { text-decoration-color: currentColor; }

/* Blöcke (Leistungen, Formate): zwei Spalten, linksbündig, dicht */
.blocks { display: grid; gap: clamp(1rem, 1.6vw, 1.5rem) clamp(2rem, 4vw, 4rem); grid-template-columns: 1fr; }
@media (min-width: 760px) { .blocks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.blocks h3 { font-size: var(--fs-h3); font-weight: 500; line-height: 1.35; margin-bottom: 0.15rem; }
.blocks p { margin: 0; color: var(--muted); max-width: none; }
.blocks-group + .blocks-group { margin-top: clamp(1.6rem, 2.6vw, 2.4rem); }
.blocks-group .label { margin-bottom: 0.7rem; }

/* Kurzfakten (Workshops): knappe Einträge untereinander */
.facts { display: grid; gap: 0.9rem; }
.facts strong { display: block; font-weight: 500; }
.facts span { color: var(--muted); }
.facts p { margin: 0; max-width: none; }

.inline-list { margin: 0; max-width: none; }
.inline-list span + span::before { content: "·"; color: var(--soft); margin: 0 0.7em; }

/* --------------------------------------------------------------------------
   6. Kopf: Schriftzug (SVG) über die ganze Breite + zentrierte, klebende Menüleiste
   -------------------------------------------------------------------------- */
.site-header { position: relative; }
.masthead { padding-top: clamp(16px, 2.2vw, 34px); padding-bottom: clamp(8px, 1.2vw, 18px); line-height: 0; }
.masthead__mark { display: block; transition: opacity var(--t-med) var(--ease); }
.masthead__mark img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; } /* PNG-Logo hat weissen Grund: Multiply macht ihn auf dem warmen Weiss unsichtbar */
.masthead__mark:hover { opacity: 0.8; }

.navbar {
  position: sticky; top: 0; z-index: 70;
  background: var(--bg); /* Fallback für Browser ohne color-mix (Safari vor 16.2) */
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
}
.navbar__inner { position: relative; display: flex; align-items: center; justify-content: center; height: var(--nav-h); }
body.nav-open .navbar { position: fixed; left: 0; right: 0; top: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }

.nav { display: none; align-items: center; gap: clamp(1rem, 1.8vw, 2.4rem); }
.nav a { font-size: var(--fs-small); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); padding: 0.4em 0; transition: color var(--t-fast) var(--ease); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--fg); }
@media (min-width: 1000px) { .nav { display: flex; } }

.lang { display: inline-flex; align-items: center; gap: 0.45em; font-size: var(--fs-small); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; }
.lang button { padding: 0.3em 0; color: var(--soft); transition: color var(--t-fast) var(--ease); }
.lang button[aria-pressed="true"] { color: var(--fg); }
.lang button:hover { color: var(--fg); }
.lang__sep { color: var(--soft); }
.navbar .navbar__lang { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); display: none; }
@media (min-width: 1000px) { .navbar .navbar__lang { display: inline-flex; } }

.burger {
  position: absolute; right: calc(var(--gutter) - 9px); top: 50%; transform: translateY(-50%);
  display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px;
  width: 44px; height: 44px; z-index: 70;
}
.burger span { display: block; width: 24px; height: 1.5px; background: currentColor; transition: transform var(--t-med) var(--ease), opacity var(--t-fast); }
body.nav-open .burger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
body.nav-open .burger span:nth-child(2) { opacity: 0; }
body.nav-open .burger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
@media (min-width: 1000px) { .burger { display: none; } }

.menu {
  position: fixed; inset: 0; z-index: 60;
  background: var(--bg); color: var(--fg);
  display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
  padding: calc(var(--header-h) + 24px) var(--gutter) 36px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease), visibility 0s linear var(--t-med);
}
body.nav-open .menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.menu ul { display: flex; flex-direction: column; gap: clamp(0.7rem, 1.6vh, 1.15rem); margin: auto 0; }
.menu ul a {
  display: inline-block; font-size: clamp(1rem, 3.6vw, 1.25rem); font-weight: 400; letter-spacing: 0.24em; text-transform: uppercase; line-height: 1.2;
  opacity: 0; transform: translateY(10px); transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
body.nav-open .menu ul a { opacity: 1; transform: none; }
.menu li:nth-child(1) a { transition-delay: 40ms; } .menu li:nth-child(2) a { transition-delay: 80ms; }
.menu li:nth-child(3) a { transition-delay: 120ms; } .menu li:nth-child(4) a { transition-delay: 160ms; }
.menu li:nth-child(5) a { transition-delay: 200ms; } .menu li:nth-child(6) a { transition-delay: 240ms; }
.menu li:nth-child(7) a { transition-delay: 280ms; } .menu li:nth-child(8) a { transition-delay: 320ms; }
.menu li:nth-child(9) a { transition-delay: 360ms; } .menu li:nth-child(10) a { transition-delay: 400ms; }
.menu li:nth-child(11) a { transition-delay: 440ms; } .menu li:nth-child(12) a { transition-delay: 480ms; } .menu li:nth-child(13) a { transition-delay: 520ms; }
.menu ul a[aria-current="page"] { color: var(--muted); }
.menu__foot { display: flex; flex-direction: column; align-items: center; gap: 1rem; font-size: var(--fs-small); letter-spacing: 0.1em; color: var(--muted); }
.menu__foot a:hover { color: var(--fg); }
@media (min-width: 1000px) { .menu { display: none; } }

/* --------------------------------------------------------------------------
   7. Startseite: Karussell (klein, viel Weissraum, keine Legende)
   Querformate teilen eine Breite (Bühne 4:3), Hochformate eine Höhe (2:3).
   -------------------------------------------------------------------------- */
.hero { padding-top: clamp(24px, 4vw, 64px); }
.carousel { position: relative; width: min(100%, 600px); margin: 0 auto; }
.carousel__stage { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg); }
@media (max-width: 639px) { .carousel__stage { aspect-ratio: 3 / 4; } }
.carousel__slide {
  position: absolute; inset: 0; margin: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-slow) var(--ease), visibility 0s linear var(--t-slow);
}
.carousel__slide.is-active { opacity: 1; visibility: visible; transition-delay: 0s; z-index: 1; }
.carousel__slide img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.carousel__slide picture { display: contents; }
.carousel__ui { display: flex; justify-content: flex-end; margin-top: 0.4rem; margin-right: -8px; }
.carousel__btn { width: 32px; height: 32px; display: inline-grid; place-items: center; color: var(--soft); transition: color var(--t-fast) var(--ease); }
.carousel__btn:hover { color: var(--fg); }
.carousel__btn svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { .carousel__slide { transition: none; } }

/* Slogan unter dem Karussell, eine Zeile */
.home-claim { text-align: center; padding-block: clamp(40px, 6vw, 96px) clamp(28px, 4vw, 64px); }

/* Drei Rubriken als kleine Bildkacheln (3:4), Titel und Zeile darunter */
.tiles { display: grid; gap: clamp(20px, 3vw, 48px) clamp(16px, 2.4vw, 40px); grid-template-columns: 1fr; max-width: 860px; margin: 0 auto; }
@media (min-width: 640px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 639px) { .tiles { max-width: 300px; } }
.tile { display: block; }
.tile__img { overflow: hidden; background: var(--surface); }
.tile__img img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.tile:hover .tile__img img { transform: scale(1.03); }
.tile h3 { margin-top: 0.9rem; font-size: var(--fs-small); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; }
.tile p { margin: 0.3rem 0 0; font-weight: 300; font-size: 1rem; line-height: 1.4; color: var(--fg); max-width: 24ch; }

/* Ausgewähltes Projekt (Startseite): grosses Bild in Inhaltsbreite, darunter Name links, Text rechts */
.feature { max-width: calc(var(--content) + 2 * var(--gutter)); }
.feature__img { display: block; overflow: hidden; background: var(--surface); }
.feature__img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.feature__img:hover img { transform: scale(1.02); }
.feature__body { display: grid; gap: 1rem clamp(2rem, 4vw, 4rem); margin-top: clamp(1.2rem, 2.2vw, 2.2rem); }
@media (min-width: 760px) { .feature__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); } }
.feature__body .label { margin-bottom: 0.6rem; }
.feature__meta { margin: 0.7rem 0 0; font-size: var(--fs-small); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.feature__body p { max-width: 52ch; }
.feature__body .textlink { margin-top: 0.9rem; }

/* --------------------------------------------------------------------------
   8. Unterseiten: Titelbild (klein, Weissraum), Seitenkopf, Bilder
   -------------------------------------------------------------------------- */
.page-image { margin: 0 auto; max-width: var(--img); }
.page-image img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: center; }
.page-image--portrait { max-width: var(--img-portrait); }
.page-image--portrait img { aspect-ratio: 2 / 3; }
.page-image-first { padding-top: clamp(24px, 4vw, 64px); padding-bottom: 0; }

.page-head--center { text-align: center; padding-top: clamp(32px, 5vw, 72px); padding-bottom: clamp(24px, 3.5vw, 48px); }
.page-head--center .statement { margin: 0.9rem auto 0; }

.page-head--wide { padding-top: clamp(32px, 5vw, 72px); padding-bottom: clamp(20px, 3vw, 40px); display: grid; gap: 0.8rem 3rem; align-items: end; }
@media (min-width: 820px) { .page-head--wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); } .page-head--wide .statement { justify-self: end; text-align: right; } }
.page-head--wide .statement { font-size: clamp(1rem, 1.5vw, 1.3rem); max-width: 40ch; }
.page-head__intro { max-width: 44ch; }
.page-head__intro p:last-child { margin: 0.8rem 0 0; }
@media (min-width: 820px) { .page-head__intro { justify-self: end; text-align: right; } .page-head__intro .statement { max-width: none; } }

/* --------------------------------------------------------------------------
   9. About: Text links, grosses Foto rechts (klebend)
   -------------------------------------------------------------------------- */
.about { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; padding-top: clamp(24px, 4vw, 64px); }
@media (min-width: 860px) {
  .about { grid-template-columns: minmax(0, 1fr) minmax(320px, 520px); gap: clamp(40px, 6vw, 96px); }
  .about__img { position: sticky; top: calc(var(--header-h) + 24px); }
}
.about__img { margin: 0; }
.about__img img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.about__text { max-width: 560px; }
.about__text p { max-width: none; }
.about__text .statement { margin-bottom: 1.8rem; }
.about__text .banner { margin-top: 1.6rem; }
@media (max-width: 859px) { .about__img { order: -1; max-width: 420px; } }

/* CV-Fenster (<dialog>, Vollbild weiss) */
.cv { border: 0; padding: 0; margin: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; background: var(--bg); color: var(--fg); overflow: auto; }
.cv::backdrop { background: rgba(255,255,255,.6); }
.cv__inner { max-width: 560px; margin: 0 auto; padding: clamp(72px, 12vh, 120px) var(--gutter) 64px; }
.cv__close { position: fixed; top: 10px; right: calc(var(--gutter) - 9px); width: 44px; height: 44px; display: grid; place-items: center; }
.cv__close svg { width: 22px; height: 22px; }
.cv__name { font-size: var(--fs-title); font-weight: 400; letter-spacing: 0.24em; text-transform: uppercase; margin-bottom: 2rem; }
.cv__list { margin: 0; display: grid; gap: 0.9rem; }
.cv__list > div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 0.5rem 1rem; align-items: baseline; }
.cv__list dt { color: var(--muted); font-size: var(--fs-small); letter-spacing: 0.08em; white-space: nowrap; }
.cv__list dd { margin: 0; }
@media (max-width: 479px) { .cv__list > div { grid-template-columns: 1fr; gap: 0.15rem; } }

/* --------------------------------------------------------------------------
   10. Referenzen (4:3-Zellen, Hochformate über zwei Zeilen)
   -------------------------------------------------------------------------- */
.ref-grid { display: grid; gap: clamp(12px, 2vw, 32px); grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(0, auto); grid-auto-flow: dense; }
@media (min-width: 820px) { .ref-grid { grid-template-columns: repeat(3, 1fr); } }
.ref-item { position: relative; margin: 0; overflow: hidden; background: var(--surface); }
.ref-item img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; transition: transform var(--t-slow) var(--ease); }
.ref-item--portrait { grid-row: span 2; }
.ref-item--portrait img { aspect-ratio: 2 / 3; }
.ref-item:hover img { transform: scale(1.025); }
.ref-item button { display: block; width: 100%; height: 100%; text-align: left; }
.ref-item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 0.9rem 1rem;
  font-size: var(--fs-small); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500;
  color: #fff; background: linear-gradient(to top, rgba(0,0,0,.5), rgba(0,0,0,0));
  opacity: 0; transform: translateY(6px); transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
  pointer-events: none;
}
.ref-item:hover figcaption, .ref-item:focus-within figcaption { opacity: 1; transform: none; }
@media (hover: none) { .ref-item figcaption { display: none; } }

/* --------------------------------------------------------------------------
   11. Presse: kleine, ruhige Vorschauen mit viel Weissraum
   -------------------------------------------------------------------------- */
.press-grid { display: grid; gap: clamp(36px, 5vw, 80px) clamp(28px, 4vw, 64px); grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1100px; margin: 0 auto; }
@media (min-width: 760px) { .press-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .press-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.press-item { margin: 0; }
.press-item button { width: 100%; text-align: left; }
.press-item__img { overflow: hidden; background: var(--surface); }
.press-item__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; transition: transform var(--t-slow) var(--ease); }
.press-item:hover .press-item__img img { transform: scale(1.02); }
.press-item figcaption { padding-top: 0.8rem; }
.press-item .upper { color: var(--muted); display: block; margin-bottom: 0.3em; }
.press-item h3 { font-size: 0.95rem; font-weight: 400; line-height: 1.4; }

/* --------------------------------------------------------------------------
   12. Stimmen
   -------------------------------------------------------------------------- */
.quotes { display: grid; gap: clamp(20px, 3vw, 40px); }
@media (min-width: 820px) { .quotes { grid-template-columns: repeat(3, 1fr); } }
.quote blockquote { margin: 0 0 0.7rem; font-weight: 300; font-size: 1.15rem; line-height: 1.4; }
.quote cite { font-style: normal; font-size: var(--fs-small); letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500; }
.placeholder { background: #fff3c4; color: #6b5100; padding: 0.1em 0.35em; font-size: 0.85em; font-weight: 400; }

/* Bildnachweis: kleine, stille Zeile unter Bild oder Projekt (Fotografie: Name) */
.credit { font-size: var(--fs-small); letter-spacing: 0.08em; color: var(--muted); margin: 1.2rem 0 0; max-width: none; }
.credit--center { text-align: center; margin-top: clamp(1.5rem, 3vw, 3rem); }

/* --------------------------------------------------------------------------
   13. Kontaktblock: eine Zeile + schwarzes Banner (Ziel des Menüpunkts «Kontakt»)
   -------------------------------------------------------------------------- */
.contact-block { text-align: center; padding-block: clamp(56px, 8vw, 128px) clamp(24px, 4vw, 64px); scroll-margin-top: var(--header-h); }
.contact-block .banner { margin-top: clamp(1.6rem, 3vw, 2.4rem); }

/* --------------------------------------------------------------------------
   14. Fusszeile nach Mockup: vier Spalten, kleine Schrift, Name fett
   -------------------------------------------------------------------------- */
.site-footer { margin-top: clamp(40px, 6vw, 96px); padding-bottom: 2rem; font-size: 13px; line-height: 1.75; }
.site-footer__grid { display: grid; gap: 1.4rem 2rem; grid-template-columns: 1fr; align-items: end; padding-top: clamp(24px, 3vw, 44px); }
@media (min-width: 760px) { .site-footer__grid { grid-template-columns: repeat(4, 1fr); } .site-footer__last { text-align: right; } }
.site-footer p { margin: 0; max-width: none; }
.site-footer strong { font-weight: 700; display: block; margin-bottom: 1.75em; }
.site-footer a { transition: color var(--t-fast) var(--ease); }
.site-footer a:hover { color: var(--muted); }
.site-footer__legal { color: var(--muted); }
@media (max-width: 759px) { .site-footer__last { display: flex; justify-content: space-between; gap: 1rem; align-items: end; } .site-footer__legal { text-align: right; } }

/* --------------------------------------------------------------------------
   15. Lightbox
   -------------------------------------------------------------------------- */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(12,12,12,.96); color: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity var(--t-med) var(--ease), visibility 0s linear var(--t-med); }
.lightbox.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.lightbox__img { max-width: calc(100vw - 2 * var(--gutter)); max-height: calc(100vh - 140px); object-fit: contain; width: auto; height: auto; }
.lightbox__caption { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 28px; font-size: var(--fs-small); letter-spacing: 0.12em; text-transform: uppercase; display: flex; justify-content: space-between; gap: 1rem; color: #bdbdbd; }
.lightbox__caption h3 { display: inline; font: inherit; }
.lightbox__btn { position: absolute; width: 48px; height: 48px; display: grid; place-items: center; color: #fff; opacity: 0.65; transition: opacity var(--t-fast); }
.lightbox__btn:hover { opacity: 1; }
.lightbox__btn svg { width: 22px; height: 22px; }
.lightbox__close { top: 20px; right: var(--gutter); }
.lightbox__prev { left: var(--gutter); top: 50%; transform: translateY(-50%); }
.lightbox__next { right: var(--gutter); top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) { .lightbox__prev, .lightbox__next { top: auto; bottom: 64px; transform: none; } .lightbox__caption { bottom: 20px; } .lightbox__img { max-height: calc(100vh - 200px); } }

/* --------------------------------------------------------------------------
   16. Einblenden beim Scrollen
   -------------------------------------------------------------------------- */
/* Einblend-Animation der Blöcke am 02.11. entfernt (Tempo): alles ist sofort sichtbar */
.reveal { opacity: 1; transform: none; transition: none; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* --------------------------------------------------------------------------
   17. Rechtliches
   -------------------------------------------------------------------------- */
.legal .prose h2 { margin-top: 2em; }
.legal .prose p, .legal .prose li { color: #333; }
.legal .prose ul { list-style: disc; padding-left: 1.2em; margin-bottom: 1em; }

/* Druck */
@media print {
  .navbar, .burger, .menu, .lightbox, .carousel__ui, .cv { display: none !important; }
  body { font-size: 11pt; animation: none; }
}

/* --------------------------------------------------------------------------
   12. Methode, Rundgang, Leistungen (v5)
   -------------------------------------------------------------------------- */
/* Schritte: kleine gesperrte Zahl, Verb als Titel, ein Satz darunter */
.steps { display: grid; gap: clamp(1.6rem, 3vw, 3rem) clamp(2rem, 4vw, 4rem); }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } .steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.steps__num { display: block; font-size: var(--fs-small); font-weight: 300; letter-spacing: 0.3em; color: var(--muted); margin-bottom: 0.9rem; }
.steps h3 { font-size: var(--fs-h2); font-weight: 400; letter-spacing: 0.24em; text-transform: uppercase; margin: 0 0 0.6rem; }
.steps h3 a { text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px; text-decoration-color: var(--soft); }
.steps h3 a:hover { text-decoration-color: currentColor; }
.steps p { margin: 0; max-width: 34ch; }
.steps--center { text-align: center; }
.steps--center p { margin-inline: auto; }

/* Startseite: die Methode in drei Verben */
.home-method { padding-block: clamp(8px, 2vw, 32px) clamp(40px, 6vw, 88px); }
.home-method .steps { max-width: var(--content); margin: 0 auto; }
.home-method .home-method__link { display: block; text-align: center; margin-top: clamp(1.8rem, 3.5vw, 3.2rem); }


/* Fragen und Antworten: ruhig, zweispaltig, ohne Aufklappen */
.faq { display: grid; gap: clamp(1.4rem, 2.4vw, 2.2rem) clamp(2rem, 4vw, 4rem); }
@media (min-width: 760px) { .faq { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.faq h3 { font-size: var(--fs-h3); font-weight: 500; line-height: 1.35; margin: 0 0 0.3rem; }
.faq p { margin: 0; color: var(--muted); max-width: none; }

/* Leistungsblock mit Link (Analyse) */
.blocks h3 a { text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px; text-decoration-color: var(--soft); }
.blocks h3 a:hover { text-decoration-color: currentColor; }

/* Bild und Text nebeneinander (Editionen, Startseite) */
.duo { display: grid; gap: clamp(24px, 4vw, 56px); align-items: center; }
@media (min-width: 760px) {
  .duo { grid-template-columns: minmax(240px, 340px) minmax(0, 1fr); }
  .duo--img-right { grid-template-columns: minmax(0, 1fr) minmax(240px, 340px); }
  .duo--img-right .duo__img { order: 2; }
}
.duo__img { margin: 0; max-width: 340px; }
.duo__img img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.duo__text { max-width: 520px; }
.duo__text p { max-width: none; }
.duo__text .statement { margin-bottom: 1.2rem; }
.duo + .duo { margin-top: clamp(48px, 7vw, 112px); }

/* Preis- oder Faktenzeile */
.keyline { font-size: var(--fs-small); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin: 0; max-width: none; }
.keyline strong { color: var(--fg); font-weight: 500; }


/* Kontaktblock: stiller Zweitlink unter dem Banner, nicht auf der Analyse-Seite */
.contact-block .textlink { display: block; margin: 1.4rem auto 0; }
body[data-page="analyse"] .contact-block .textlink { display: none; }

/* Vier Kacheln auf der Startseite */
.tiles--4 { max-width: 1120px; }
@media (min-width: 640px) { .tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* --------------------------------------------------------------------------
   18. Fünf Rubriken, Leistungen, About «Was ich mag» (v6)
   -------------------------------------------------------------------------- */
/* Anker unter der klebenden Menüleiste (#interior-design, #presse …) */
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

/* Zwei Fragen (Methode): zwei Spalten, längere Zeilen erlaubt */
@media (min-width: 760px) { .steps--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.steps--2 p { max-width: 44ch; }
.steps__note { margin: clamp(1.6rem, 3vw, 2.6rem) 0 0; max-width: 60ch; color: var(--muted); }
.steps p a { color: var(--fg); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; text-decoration-color: var(--soft); }
.steps p a:hover { text-decoration-color: currentColor; }

/* Vollbildmenü: die Analyse als stiller Zusatz unter den fünf Rubriken */
.menu li.menu__minor { margin-top: clamp(0.6rem, 2vh, 1.4rem); }
.menu li.menu__minor a { font-size: var(--fs-small); letter-spacing: 0.2em; color: var(--muted); }
.menu li.menu__minor a:hover { color: var(--fg); }

/* Leistungen: Bild und Text nebeneinander, darunter eine knappe Liste */
.service + .service { padding-top: 0; }
.duo__text .label { margin-bottom: 0.7rem; }
.duo__text .title { margin-bottom: 1rem; }
.duo__text .textlink { margin-top: 1.4rem; }
.list { list-style: none; margin: 1.1rem 0 0; padding: 0; }
.list li { color: var(--muted); padding: 0.14em 0; }
.list li a { color: var(--fg); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; text-decoration-color: var(--soft); }
.list li a:hover { text-decoration-color: currentColor; }

/* Presse als Abschnitt auf «Projekte» */
.press-wrap .section-title { margin-bottom: clamp(1.6rem, 3vw, 2.8rem); }

/* Was ich mag (About): quadratische Kacheln, Stichwort und ein Satz darunter */
/* Moodboard «Was ich mag» (v9): feste Rasterzellen über das Seitenverhältnis des Containers, freie Felder a–f, Bilder wechseln per Opacity */
.mood-wrap { max-width: 1120px; margin: 0 auto; text-align: center; }
.mood-wrap .section-title { margin-bottom: clamp(1.4rem, 2.6vw, 2.4rem); }
.mood { display: grid; gap: clamp(10px, 1.6vw, 18px); grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "a b" "c d" "e f"; }
@media (min-width: 700px) { .mood { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "a c e" "b d f"; } }
.mood__slot { position: relative; margin: 0; aspect-ratio: 3 / 4; overflow: hidden; background: var(--surface); }
.mood__slot--a { grid-area: a; } .mood__slot--b { grid-area: b; } .mood__slot--c { grid-area: c; } .mood__slot--d { grid-area: d; } .mood__slot--e { grid-area: e; } .mood__slot--f { grid-area: f; }
.mood__slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.8s var(--ease); }
.mood__slot img.is-on { opacity: 1; }

/* 19. Vier Qualitäten auf der Methode-Seite (v7): Vorspann über dem Raster, Textlinks in Blöcken */
.steps__lead { margin: 0 0 clamp(1.6rem, 3vw, 2.6rem); max-width: 60ch; color: var(--muted); }
.blocks p a { color: var(--fg); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; text-decoration-color: var(--soft); }
.blocks p a:hover { text-decoration-color: currentColor; }

/* 20. Analyse: Ablauf untereinander statt in vier Spalten (v8) */
.steps--stack { max-width: 62ch; }
@media (min-width: 760px) { .steps--stack { grid-template-columns: 1fr; gap: clamp(1.4rem, 2.4vw, 2.2rem); } }
.steps--stack p { max-width: 62ch; }

/* --------------------------------------------------------------------------
   v11 (30.10.2026): Karussell schneller und nur Querformate · Pfeil-Links ·
   Marken-Hinweis KAYND · Moodboard ohne Beschnitt (+ Video) · Presse 4:5
   -------------------------------------------------------------------------- */
.carousel { --t-slow: 600ms; }
@media (max-width: 639px) { .carousel__stage { aspect-ratio: 4 / 3; } }

/* Textlink mit Pfeil: erkennbar als Link, Pfeil rückt beim Hover leicht nach rechts */
.textlink--arrow::after { content: "\2192"; display: inline-block; margin-left: 0.55em; transition: transform var(--t-fast) var(--ease); }
.textlink--arrow:hover::after { transform: translateX(4px); }
.home-method .home-method__link { margin-top: clamp(1.4rem, 2.6vw, 2.4rem); }

/* Customised Design: Hinweis auf KAYND, Marke fett und unterstrichen */
.brand-note { margin-top: 1.4rem; font-size: 1.06em; }
.duo__text .brand-note .brand { font-weight: 700; letter-spacing: 0.06em; text-decoration: underline; text-underline-offset: 0.22em; text-decoration-thickness: 1.5px; text-decoration-color: currentColor; }
.duo__text .brand-note .brand:hover { color: var(--muted); }

/* Moodboard: Bilder unbeschnitten im 3:4-Feld (Hintergrund = Seite), Video füllt das Feld */
.mood__slot { background: transparent; }
.mood__slot img { object-fit: contain; }
.mood__slot video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.8s var(--ease); }
.mood__slot video.is-on { opacity: 1; }

/* Presse: Vorschauen sind exakt 4:5 zugeschnitten */
.press-item__img img { object-position: center; }

/* --------------------------------------------------------------------------
   v12 (30.10.2026): «Es fällt an seinen Platz» als Bewegung · Karussell auf
   Inhaltsbreite · Slogan zweizeilig auf dem Handy · helle Lightbox ·
   Bild-Cursor «Ansehen» · Mailadresse bei den Anfrage-Links
   -------------------------------------------------------------------------- */
:root { --ease-settle: cubic-bezier(.2, .8, .2, 1.06); }

/* Die eine Geste der Seite: Blöcke und Bilder setzen sich von leicht unten mit einem
   winzigen Nachschwingen an ihren Platz;    und ziehen sich auf ihr Mass zusammen. Bei «Bewegung reduzieren» gilt die Regel in
   Abschnitt 13 (alles sofort sichtbar, keine Übergänge). */
@media (prefers-reduced-motion: no-preference) {
  /* 30.10. abends: die Laufweiten-Animation der Versalien ist auf Wunsch von Andrea wieder entfernt; es bleibt das ruhige Setzen der Blöcke. */
}

/* Karussell: Inhaltsbreite, aber nie höher als der Bildschirm unter Logo und Menü */
.carousel { width: min(100%, 1100px, calc((100vh - 260px) * 4 / 3)); }

/* Slogans auf dem Handy: zwei Zeilen statt einer winzigen */
@media (max-width: 639px) {
  .statement--line { white-space: normal; max-width: none; text-wrap: balance; }
  .statement--home { font-size: clamp(1.45rem, 7vw, 2rem); }
  .statement--contact { font-size: clamp(1.3rem, 6.4vw, 1.9rem); }
}

/* Lightbox im Warmweiss der Seite, Beschriftung unten, Seiten mit sanftem Schatten abgehoben */
.lightbox { background: rgba(250, 248, 245, .97); color: var(--fg); }
.lightbox__btn { color: var(--fg); opacity: .7; }
.lightbox__btn:hover { opacity: 1; }
.lightbox__caption { color: var(--muted); }
.lightbox__img { box-shadow: 0 24px 60px rgba(0, 0, 0, .10); }

/* Bild-Cursor: kleines Etikett «Ansehen» folgt der Maus über klickbaren Bildern (main.js, Abschnitt 11) */
.cursor-label {
  position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none;
  padding: 0.6em 1em; border-radius: 999px; background: var(--fg); color: var(--bg);
  font-size: var(--fs-small); letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500; white-space: nowrap;
  opacity: 0; transform: translate(-50%, -50%) scale(.7);
  transition: opacity 160ms var(--ease), transform 240ms var(--ease-settle);
}
.cursor-label.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
body.has-cursor-label :is(.ref-item, .press-item) button { cursor: none; }

/* Mailadresse sichtbar unter den Anfrage-Links und im Kontaktblock */
.mail-hint { display: block; margin-top: 0.5rem; font-size: var(--fs-small); color: var(--muted); letter-spacing: 0.04em; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: var(--soft); transition: color var(--t-fast) var(--ease); }
.mail-hint:hover { color: var(--fg); }
.duo__text .textlink + .mail-hint { margin-top: 0.45rem; }
.contact-block .mail-hint { display: inline-block; margin-top: 0.9rem; }
.contact-block .mail-hint + .textlink { margin-top: 1.2rem; }

/* --------------------------------------------------------------------------
   v14 (30.10.2026): About auf dem Handy: Foto links (klebt beim Scrollen),
   Text rechts daneben, damit man nicht erst am Foto vorbeiscrollen muss
   -------------------------------------------------------------------------- */
@media (max-width: 859px) {
  .about { grid-template-columns: minmax(104px, 34%) minmax(0, 1fr); gap: clamp(14px, 4vw, 28px); align-items: start; }
  .about__img { grid-column: 1; grid-row: 1; order: 0; max-width: none; position: sticky; top: calc(var(--header-h) + 12px); }
  .about__text { grid-column: 2; grid-row: 1; }
  .about__text { max-width: none; min-width: 0; }
  .about__text .statement { font-size: clamp(1rem, 4.4vw, 1.4rem); margin-bottom: 1.2rem; }
  .about__text h2 { margin-top: 1.4em; }
  .about__text .banner { max-width: none; }
}

/* --------------------------------------------------------------------------
   v16 (30.10.2026): About auf dem Handy, dritte Fassung: Foto gross links (58 %),
   die Titelzeile daneben unten angesetzt, der Lauftext darunter in voller Breite.
   (.about__text wird zu display: contents, damit seine Kinder im Raster stehen.)
   -------------------------------------------------------------------------- */
@media (max-width: 859px) {
  .about { grid-template-columns: 58% minmax(0, 1fr); gap: 0.9rem clamp(14px, 4vw, 24px); align-items: end; }
  .about__img { grid-column: 1; grid-row: 1; position: static; max-width: none; }
  .about__text { display: contents; }
  .about__text > .statement { grid-column: 2; grid-row: 1; align-self: end; font-size: clamp(0.95rem, 4.3vw, 1.3rem); line-height: 1.25; margin: 0; max-width: none; }
  .about__text > :not(.statement) { grid-column: 1 / -1; margin: 0; }
  .about__text > h2 { margin-top: 0.9rem; }
  .about__text > .signature { margin-top: 0.8rem; }
  .about__text > .banner { max-width: none; margin-top: 0.8rem; }
}

/* --------------------------------------------------------------------------
   v17 (30.10.2026): Presse als Textliste (kein Vorschaubild, Klick öffnet die
   Lightbox) · Karussell als Stapel: drei Ebenen, Versatz 8 % der Bühne, das
   neue Bild fällt von unten auf den Stapel, die anderen rücken nach hinten
   -------------------------------------------------------------------------- */
.press-list { list-style: none; margin: 0 auto; padding: 0; max-width: 960px; display: grid; gap: clamp(0.5rem, 1.2vw, 1rem) clamp(2rem, 5vw, 5rem); }
@media (min-width: 760px) { .press-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.press-row { margin: 0; }
.press-row button { display: block; width: 100%; text-align: left; padding: 0.6rem 0; }
.press-row .upper { display: block; color: var(--muted); margin-bottom: 0.3em; }
.press-row__title { display: block; font-size: clamp(1.05rem, 1.5vw, 1.3rem); font-weight: 300; line-height: 1.3; text-wrap: balance; transition: transform var(--t-med) var(--ease-settle), color var(--t-fast) var(--ease); }
.press-row button:hover .press-row__title, .press-row button:focus-visible .press-row__title { transform: translateX(8px); }
body.has-cursor-label .press-row button { cursor: none; }

/* Karussell-Stapel */
.carousel { width: min(100%, 1100px, calc((100vh - 260px) * 1.46)); }
.carousel__stage, .carousel__stage:where(*) { aspect-ratio: 146 / 100; overflow: visible; background: transparent; }
@media (max-width: 639px) { .carousel__stage { aspect-ratio: 146 / 100; } }
.carousel__slide {
  inset: 4% 8%; visibility: visible; opacity: 0; z-index: 0; pointer-events: none;
  transform: translateY(6%) scale(.98);
  transition: opacity 600ms var(--ease), transform 0s linear 600ms;
}
.carousel__slide.is-active { opacity: 1; transform: none; z-index: 3; pointer-events: auto; transition: opacity 700ms var(--ease), transform 950ms var(--ease-settle); }
.carousel__slide.is-prev { opacity: .92; transform: translate(-9.5%, -4.3%); z-index: 2; transition: opacity 700ms var(--ease), transform 950ms var(--ease-settle); }
.carousel__slide.is-prev2 { opacity: .84; transform: translate(9.5%, 4.3%); z-index: 1; transition: opacity 700ms var(--ease), transform 950ms var(--ease-settle); }
.carousel__slide img { box-shadow: 0 14px 40px rgba(0, 0, 0, .07); }
.carousel__slide.is-active img { box-shadow: 0 24px 64px rgba(0, 0, 0, .13); }
@media (prefers-reduced-motion: reduce) { .carousel__slide, .carousel__slide.is-active, .carousel__slide.is-prev, .carousel__slide.is-prev2 { transition: none; } }

/* --------------------------------------------------------------------------
   v18 (30.10.2026, abends): Karussell wie in Mikes Entwurf: eine quadratische
   Umrisslinie für alle Bilder, Querformate füllen die Breite, Hochformate die
   Höhe, alles zentriert, kein Versatz, keine Schatten. Das neue Bild legt sich
   vorne auf, die zwei vorherigen bleiben dahinter, wo das Format nicht deckt.
   -------------------------------------------------------------------------- */
.carousel { width: min(100%, 900px, calc(100vh - 280px)); }
.carousel__stage, .carousel__stage:where(*) { aspect-ratio: 1 / 1; }
@media (max-width: 639px) { .carousel__stage { aspect-ratio: 1 / 1; } }
.carousel__slide { inset: 0; transform: translateY(3%) scale(.99); }
.carousel__slide.is-active { transform: none; }
.carousel__slide.is-prev, .carousel__slide.is-prev2 { opacity: 1; transform: none; transition: opacity 700ms var(--ease); }
.carousel__slide img, .carousel__slide.is-active img { box-shadow: none; }

/* v19 (30.10.2026): 404-Seite, Linkliste mittig */
.list--center { display: inline-block; text-align: left; margin-inline: auto; }
body[data-page="404"] .content { text-align: center; }

/* v20 (30.10.2026): Adobe Fonts liefert den Bold-Schnitt von Futura PT als eigene Familie «futura-pt-bold».
   Alles, was mit 700 gesetzt ist, nimmt diese Familie; ohne Kit greift wieder der normale Stapel (Jost Bold). */
strong, b, .signature strong, .site-footer strong, .duo__text .brand-note .brand { font-family: "futura-pt-bold", var(--font); }

/* --------------------------------------------------------------------------
   v22 (30.10.2026, nachts): Rubrik «Magazin» · Kontakt als Knopf in der Menüleiste ·
   Beitragsseiten · Newsletter-Anmeldung
   -------------------------------------------------------------------------- */
/* Kontakt-Knopf rechts neben DE/EN (ab 1000 px, darunter steht Kontakt im Vollbildmenü) */
.navbar__cta {
  position: absolute; right: calc(var(--gutter) + 4.6rem); top: 50%; transform: translateY(-50%);
  display: none; padding: 0.55em 0.95em; background: var(--fg); color: var(--bg);
  font-size: var(--fs-small); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1;
  transition: background var(--t-fast) var(--ease);
}
.navbar__cta:hover { background: #333; }
@media (min-width: 1000px) { .navbar__cta { display: inline-block; } }

/* Magazin-Übersicht: Bild links, Text rechts, Beiträge untereinander */
.mag-list { max-width: var(--content); margin: 0 auto; display: grid; gap: clamp(2.4rem, 5vw, 4.5rem); }
.mag-item { display: grid; gap: clamp(1rem, 2.5vw, 2.2rem); align-items: center; }
@media (min-width: 760px) { .mag-item { grid-template-columns: minmax(220px, 380px) minmax(0, 1fr); } }
.mag-item__img { display: block; overflow: hidden; background: var(--surface); }
.mag-item__img img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.mag-item:hover .mag-item__img img { transform: scale(1.02); }
.mag-item__text .label { margin-bottom: 0.6rem; }
.mag-item__text h2 { font-size: clamp(1.15rem, 1.7vw, 1.45rem); font-weight: 300; line-height: 1.3; margin: 0 0 0.7rem; }
.mag-item__text h2 a { color: var(--fg); }
.mag-item__text h2 a:hover { color: var(--muted); }
.mag-item__text p { margin: 0 0 0.9rem; max-width: 52ch; }

/* Beitragsseite */
.article .page-head--center .label { margin-bottom: 0.9rem; }
.article .page-head--center .statement { max-width: 30ch; }
.article__img { margin: 0 auto; max-width: 960px; }
.article__img img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.article .prose { max-width: 640px; font-size: clamp(1rem, 1.15vw, 1.1rem); line-height: 1.65; }
.article__sign { margin-top: 1.6rem; }
.article__more { margin: 0.4rem auto 0; max-width: none; }
.article__more a { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; text-decoration-color: var(--soft); }
.article__more a:hover { text-decoration-color: currentColor; }

/* Newsletter: ruhiger Block, Feld und Knopf in einer Zeile, keine Linien */
.newsletter { text-align: center; padding-block: clamp(40px, 6vw, 88px) clamp(8px, 2vw, 24px); }
.newsletter__inner { max-width: 560px; margin: 0 auto; }
.newsletter .statement { margin: 0 auto 0.9rem; max-width: 26ch; }
.newsletter p { max-width: none; }
.newsletter__form { margin-top: 1.4rem; text-align: left; }
.newsletter__row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.newsletter__row input { flex: 1 1 220px; min-width: 0; padding: 0.85em 1em; font: inherit; font-size: var(--fs-body); color: var(--fg); background: var(--surface); border: 0; border-radius: 0; outline: none; transition: background var(--t-fast) var(--ease); }
.newsletter__row input:focus { background: #e9e5df; }
.newsletter__row input::placeholder { color: var(--muted); }
.newsletter__btn { width: auto; max-width: none; flex: 0 0 auto; padding-inline: 1.6em; margin: 0; }
.newsletter__consent { display: flex; gap: 0.6rem; align-items: flex-start; margin-top: 0.9rem; font-size: var(--fs-small); color: var(--muted); line-height: 1.5; cursor: pointer; }
.newsletter__consent input { margin-top: 0.2em; accent-color: var(--fg); flex: 0 0 auto; }
.newsletter__consent a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }
.newsletter__note { margin-top: 0.9rem; font-size: var(--fs-small); color: var(--fg); }

/* --------------------------------------------------------------------------
   v25 (30.10.2026, nachts): Magazin editorial wie Sight Unseen: ruhiges Raster in
   normaler Schriftgrösse, Titel in Gross-/Kleinschreibung, der neueste Beitrag
   als Feature mit einer Textfläche über der unteren Bildecke, darunter drei
   Spalten. Kontakt oben rechts als Textlink. (v23/v24 ersetzt.)
   -------------------------------------------------------------------------- */
.navbar__cta { background: transparent; color: var(--muted); padding: 0.4em 0; right: calc(var(--gutter) + 4.2rem); }
.navbar__cta:hover { background: transparent; color: var(--fg); }

.mag-list { max-width: 1120px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(2.6rem, 5vw, 4.5rem) clamp(16px, 2.4vw, 32px); }
.mag-item { display: block; grid-column: 1 / -1; position: relative; }
.mag-item__img { display: block; overflow: hidden; background: var(--surface); }
.mag-item__img img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.mag-item__text { margin-top: 1rem; }
.mag-item__num { display: inline; font-size: var(--fs-small); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin-right: 0.8em; }
.mag-item__text .label { display: inline; margin: 0; }
.mag-item__text h2 { font-size: clamp(1.2rem, 1.6vw, 1.5rem); font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 1.3; margin: 0.6rem 0; max-width: 26ch; text-wrap: balance; }
.mag-item__text h2 a { color: var(--fg); transition: color var(--t-fast) var(--ease); }
.mag-item__text h2 a:hover { color: var(--muted); }
.mag-item__text p { margin: 0 0 0.8rem; max-width: 44ch; }

@media (min-width: 760px) {
  /* Feature: grosses Bild links, Textfläche über der rechten unteren Bildecke */
  .mag-item--feature { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 clamp(16px, 2.4vw, 32px); align-items: end; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
  .mag-item--feature .mag-item__img { grid-column: 1 / 9; grid-row: 1; }
  .mag-item--feature .mag-item__text { grid-column: 7 / -1; grid-row: 1; position: relative; z-index: 1; background: var(--bg); margin: 0 0 clamp(-4rem, -6vw, -2rem); padding: clamp(1.4rem, 2.6vw, 2.4rem) 0 0 clamp(1.4rem, 2.6vw, 2.4rem); }
  .mag-item--feature .mag-item__text h2 { font-size: clamp(1.5rem, 2.3vw, 2.1rem); max-width: 22ch; }
  /* Weitere Beiträge: zwei, ab 1000 px drei Spalten */
  .mag-item--even, .mag-item--odd { grid-column: span 6; }
}
@media (min-width: 1000px) { .mag-item--even, .mag-item--odd { grid-column: span 4; } }

/* Beitragsseite: Titel mittig in Statement-Grösse, Bild bis 1100 px im 3:2, Vorspann leicht grösser */
.article .page-head--center .statement { font-size: clamp(1.5rem, 3vw, 2.4rem); max-width: 24ch; line-height: 1.2; letter-spacing: 0.03em; }
.article__img { max-width: 1100px; }
.article .prose p:first-child { font-size: clamp(1.1rem, 1.4vw, 1.3rem); font-weight: 300; line-height: 1.5; margin-bottom: 1.3em; }

/* --------------------------------------------------------------------------
   v26 (30.10.2026, nachts): Magazin editorial, zweiter Anlauf: je Beitrag ein kleines
   Moodboard (grosse Kachel + kleine Kacheln, Kacheln mit zwei Bildern wechseln leise,
   die grosse Kachel zoomt kaum merklich), Titel mit fetten Schlüsselwörtern in Futura
   Bold und leichtem Rest, Nummer und Datum hochkant am Rand.
   -------------------------------------------------------------------------- */
/* Moodboard-Kacheln (nutzen .mood__slot für den Bildwechsel; Bilder liegen 4:3 und füllen die Kachel) */
.mag-item__board { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(8px, 1.2vw, 16px); }
.mag-item__board .mood__slot { aspect-ratio: 4 / 3; background: var(--surface); }
.mag-item__board .mood__slot img { object-fit: cover; transition: opacity 1.6s var(--ease), transform 0.9s var(--ease); }
.mag-item__tile { display: block; overflow: hidden; }
.mag-item__tile--a { grid-column: 1 / 9; grid-row: 1 / 3; }
.mag-item__tile--b { grid-column: 9 / -1; grid-row: 1; }
.mag-item__tile--c { grid-column: 9 / -1; grid-row: 2; }
/* bei nur zwei Kacheln sitzt die kleine unten, oben bleibt Luft für das Datum */
.mag-item__board:not(:has(.mag-item__tile--c)) .mag-item__tile--b { grid-row: 2; }
.mag-item:hover .mag-item__tile--a img.is-on { transform: scale(1.03); }

/* Nummer und Datum: hochkant in der freien Ecke rechts oben; beim Feature waagrecht über dem Titel */
.mag-item__text { position: relative; }
.mag-item__meta { margin: 0 0 0.6rem; display: flex; gap: 0.8em; align-items: baseline; }
.mag-item__meta .mag-item__num, .mag-item__meta .label { display: inline; margin: 0; }
@media (min-width: 760px) {
  .mag-item--even .mag-item__board, .mag-item--odd .mag-item__board { position: relative; }
  .mag-item--even .mag-item__text, .mag-item--odd .mag-item__text { padding-top: 1rem; }
  .mag-item--even .mag-item__meta, .mag-item--odd .mag-item__meta {
    position: absolute; right: 0; bottom: 100%; margin: 0 0 clamp(0.6rem, 1vw, 1rem);
    writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap;
  }
}

/* Titel: leicht, Schlüsselwörter fett */
.mag-item__text h2 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); font-weight: 300; line-height: 1.08; letter-spacing: -0.005em; text-transform: none; max-width: 18ch; margin: 0.4rem 0 0.8rem; }
.mag-item__text h2 strong { font-family: "futura-pt-bold", var(--font); font-weight: 700; }
.mag-item--feature .mag-item__text h2 { font-size: clamp(2rem, 3.6vw, 3.2rem); max-width: 16ch; }
.mag-item__text p { max-width: 42ch; }

/* Feature: Board über die ganze Rasterbreite, Textfläche überlappt die untere linke Kante der grossen Kachel */
@media (min-width: 760px) {
  .mag-item--feature { display: block; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
  .mag-item--feature .mag-item__text { position: relative; z-index: 1; max-width: 560px; background: var(--bg); margin: clamp(-3.5rem, -5vw, -2rem) 0 0 clamp(2rem, 5vw, 5rem); padding: clamp(1.2rem, 2.2vw, 2rem) clamp(1.2rem, 2.2vw, 2rem) 0 0; }
  /* Weitere Beiträge: zwei Spalten mit je eigenem Board */
  .mag-item--even, .mag-item--odd { grid-column: span 6; }
}
@media (min-width: 1000px) { .mag-item--even, .mag-item--odd { grid-column: span 6; } }
/* v26b: Datum hochkant sitzt bei den Rasterbeiträgen als eigenes Rasterfeld in der freien Ecke oben rechts des Boards */
.mag-item--even .mag-item__meta, .mag-item--odd .mag-item__meta { position: static; }
.mag-item__board .mag-item__meta { grid-column: 9 / -1; grid-row: 1; justify-self: end; align-self: start; margin: 0; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; display: block; }
.mag-item__board .mag-item__meta .mag-item__num { margin: 0 0 0.8em 0; }
.mag-item__board .mag-item__meta .label, .mag-item__board .mag-item__meta .mag-item__num { display: inline; }

/* --------------------------------------------------------------------------
   v28 (30.10.2026, nachts): Beitragsseiten nach Mikes Vorlage «Home/Magazin/Detailseite»:
   Datum und Titel in der rechten Spalte, Textspalten versetzt, Bildpaare, Zitat in
   leichten Versalien, Bild neben Text, Bildwechsler mit Punkten, unten ‹ ⊞ ›.
   Newsletter-Anmeldung in der Fusszeile.
   -------------------------------------------------------------------------- */
.art { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(2.6rem, 6vw, 5.5rem) clamp(16px, 2.4vw, 32px); max-width: 1120px; margin: 0 auto; padding-top: clamp(24px, 4vw, 56px); }
.art > * { grid-column: 1 / -1; min-width: 0; }
.art p { max-width: none; }

/* Kopf: Datum, Titel fett, Einleitung */
.art-head .label { margin-bottom: 0.9rem; }
.art-head h1 { font-family: "futura-pt-bold", var(--font); font-weight: 700; font-size: clamp(1.1rem, 1.45vw, 1.3rem); line-height: 1.35; letter-spacing: 0; text-transform: none; margin: 0 0 1rem; max-width: 32ch; }
.art-head p { margin: 0; }

/* Textblock mit Zwischentitel */
.art-text h2 { font-family: "futura-pt-bold", var(--font); font-weight: 700; font-size: var(--fs-body); line-height: 1.4; letter-spacing: 0; text-transform: none; margin: 0 0 0.35rem; }
.art-text p { margin: 0 0 1em; }
.art-text p:last-child { margin-bottom: 0; }

/* Bildpaar */
.art-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(6px, 0.8vw, 10px); }
.art-pair img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface); }

/* Zitat */
.art-quote { font-weight: 300; text-transform: uppercase; letter-spacing: 0.03em; font-size: clamp(1.05rem, 1.6vw, 1.4rem); line-height: 1.35; margin: 0; }

/* Bild neben Text */
.art-row { display: grid; gap: clamp(1.2rem, 3vw, 2.8rem); align-items: start; }
.art-row figure { margin: 0; }
.art-row img { display: block; width: 100%; height: auto; background: var(--surface); }

/* Bildwechsler: flach, 3:2, Bilder unbeschnitten, Pfeile und Punkte darunter */
.carousel--flat { width: 100%; max-width: none; }
.carousel--flat .carousel__stage { aspect-ratio: 3 / 2; overflow: hidden; background: transparent; }
.carousel--flat .carousel__slide { inset: 0; transform: none; transition: opacity 600ms var(--ease); }
.carousel--flat .carousel__slide.is-prev, .carousel--flat .carousel__slide.is-prev2 { opacity: 0; z-index: 0; pointer-events: none; }
.carousel--flat .carousel__slide img { object-fit: contain; box-shadow: none; }
.carousel--flat .carousel__ui { justify-content: center; align-items: center; gap: 0.6rem; margin: 0.6rem 0 0; }
.carousel__dots { display: flex; gap: 0.55rem; align-items: center; }
.carousel__dots button { width: 7px; height: 7px; border-radius: 50%; background: var(--soft); transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.carousel__dots button[aria-current="true"] { background: var(--fg); transform: scale(1.25); }

/* Navigation unten: zurück · Übersicht · weiter */
.art-nav { display: flex; justify-content: center; align-items: center; gap: clamp(1.2rem, 3vw, 2.2rem); }
.art-nav a { display: inline-grid; place-items: center; width: 36px; height: 36px; color: var(--muted); transition: color var(--t-fast) var(--ease); }
.art-nav a:hover { color: var(--fg); }
.art-nav svg { width: 20px; height: 20px; }

@media (min-width: 760px) {
  .art-head { grid-column: 7 / 13; }
  .art-text--left { grid-column: 2 / 8; }
  .art-text--right { grid-column: 7 / 12; }
  .art-pair { grid-column: 3 / 11; }
  .art-quote { grid-column: 3 / 9; }
  .art-row { grid-column: 2 / 12; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .art-row--img-right figure { order: 2; }
  .art-slider { grid-column: 3 / 11; }
  .art-slider--narrow { grid-column: 4 / 10; }
}

/* Fusszeile mit Newsletter-Anmeldung */
.site-footer__nl .label { margin-bottom: 0.6rem; }
.site-footer__nl .newsletter__form { margin-top: 0; }
.site-footer__nl .newsletter__row input { padding: 0.7em 0.9em; font-size: var(--fs-small); }
.site-footer__nl .newsletter__btn { padding: 0.75em 1.3em; }
.site-footer__nl .newsletter__consent { margin-top: 0.6rem; font-size: 11px; }
.site-footer__nl .newsletter__note { font-size: 11px; }

/* --------------------------------------------------------------------------
   v31 (02.11.2026): Leistungen: deutlich mehr Abstand zwischen den vier Rubriken,
   Aufzählungen mit Punkt, Anfrage-Link mit mehr Luft, Mailadresse erst nach Klick
   -------------------------------------------------------------------------- */
.service + .service { padding-top: 0; margin-top: clamp(64px, 9vw, 140px); }
.duo__text .list { margin-top: 1.4rem; }
.duo__text .list li { position: relative; padding-left: 1.1em; color: var(--fg); }
.duo__text .list li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 5px; height: 5px; border-radius: 50%; background: var(--fg); }
.duo__text .textlink { margin-top: 2.4rem; }
.duo__text .mail-hint[hidden] { display: none; }
.duo__text .mail-hint { margin-top: 0.7rem; color: var(--fg); text-decoration-color: var(--fg); }

/* --------------------------------------------------------------------------
   v32 (02.11.2026): Typografie-System nach dem Vorbild teojakob.ch: wenige Stile,
   ein Gewicht, klar. Rollen: TITEL (Versalien, gross) · ZWISCHENTITEL (Versalien,
   mittel) · LEAD (Vorspann) · TEXT · LABEL (klein, Versalien). Alles Book 400,
   Laufweite überall gleich. Magazin als zwei Spalten: grosses Bild, Titel darunter.
   -------------------------------------------------------------------------- */
:root {
  --fs-title: clamp(1.5rem, 2.7vw, 2.4rem);     /* 24–38 px (02.11.: minim kleiner, vorher 27–46) */
  --fs-sub: clamp(1.1rem, 1.65vw, 1.5rem);      /* 18–24 px (02.11.: minim kleiner, vorher 19–28) */
  --fs-lead: clamp(1.1rem, 1.35vw, 1.3rem);     /* 18–21 px */
  --fs-h2: var(--fs-sub); --fs-statement: var(--fs-sub); --fs-h3: var(--fs-lead);
  --track: 0.04em; --track-small: 0.16em;
}

/* TITEL */
.title, .cv__name, .statement--home, .statement--contact, .about__text > .statement, .article .page-head--center .statement, .art-head h1,
body[data-page="magazin"] .page-head .title {
  font-family: var(--font); font-size: var(--fs-title); font-weight: 400; letter-spacing: var(--track); text-transform: uppercase; line-height: 1.12; max-width: none;
}
.statement--line { white-space: normal; max-width: 26ch; margin-inline: auto; text-wrap: balance; }
.about__text > .statement { max-width: 20ch; margin-inline: 0; }
.art-head h1 { max-width: 18ch; margin-bottom: 1.2rem; }

/* ZWISCHENTITEL */
.section-title, .statement, .page-head--wide .statement, .steps h3, .tile h3, .about__text h2, .prose h2, .prose h3, .blocks h3, .faq h3,
.duo__text .title, .mag-item__text h2, .mag-item--feature .mag-item__text h2, .art-quote, .quote blockquote {
  font-family: var(--font); font-size: var(--fs-sub); font-weight: 400; letter-spacing: var(--track); text-transform: uppercase; line-height: 1.2;
}
.steps h3 { hyphens: auto; -webkit-hyphens: auto; margin-bottom: 0.7rem; }
.tile h3 { margin-top: 1rem; margin-bottom: 0.4rem; }
.about__text h2, .prose h2, .prose h3 { margin: 2em 0 0.6em; }
.art-quote { max-width: none; }
.page-head--wide .statement { max-width: 24ch; }

/* LEAD */
.lead, .art-head p, .article .prose p:first-child, .press-row__title, .page-head__intro p:not(.statement) {
  font-size: var(--fs-lead); font-weight: 400; line-height: 1.45; text-transform: none; letter-spacing: 0;
}
.article .prose p:first-child { margin-bottom: 1.3em; }
.press-row__title { margin-top: 0.2rem; }

/* TEXT */
.tile p, .article .prose, .brand-note { font-size: inherit; }
.article .prose { line-height: 1.6; }

/* LABEL: eine kleine Versalienzeile für Datum, Nummern, Links, Menü */
.label, .upper, .steps__num, .mag-item__num, .textlink, .nav a, .navbar__cta, .cv__list dt, .credit, .keyline, .feature__meta, .menu li.menu__minor a, .cursor-label, .lightbox__caption, .art-text h2, .press-row .upper {
  font-size: var(--fs-small); letter-spacing: var(--track-small); text-transform: uppercase; line-height: 1.5;
}
.label, .upper, .steps__num, .mag-item__num, .cv__list dt, .credit, .press-row .upper { font-weight: 400; color: var(--muted); }
.textlink, .nav a, .navbar__cta, .art-text h2 { font-weight: 500; }
.art-text h2 { font-family: var(--font); color: var(--fg); margin-bottom: 0.6rem; }
.textlink { color: var(--fg); }
.nav a, .navbar__cta { color: var(--muted); }

/* Magazin-Übersicht wie teojakob.ch/journal: zwei Spalten, grosses Bild, nur der Titel */
.mag-list { display: grid; grid-template-columns: 1fr; gap: clamp(2.6rem, 5vw, 4.5rem) clamp(16px, 2vw, 28px); max-width: none; }
@media (min-width: 760px) { .mag-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mag-item, .mag-item--feature, .mag-item--even, .mag-item--odd { display: block; grid-column: auto; margin: 0; }
.mag-item__img { display: block; overflow: hidden; background: var(--surface); }
.mag-item__img img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.mag-item:hover .mag-item__img img { transform: scale(1.02); }
.mag-item__text { margin-top: 1rem; padding: 0; background: transparent; }
.mag-item__text h2 { margin: 0; max-width: none; }
.mag-item__text h2 a { color: var(--fg); }
.mag-item__text h2 a:hover { color: var(--muted); }
.mag-item__text h2 strong { font-weight: 400; font-family: var(--font); }
body[data-page="magazin"] .page-head--wide .statement { font-size: var(--fs-lead); text-transform: none; letter-spacing: 0; font-weight: 400; max-width: 44ch; }
/* v32b: Titelgrösse gewinnt gegen den Zwischentitel-Stil (gleiche Spezifität, spätere Regel) */
.statement.statement--home, .statement.statement--contact, .about__text > .statement.statement, .article .page-head--center .statement.statement { font-size: var(--fs-title); line-height: 1.12; }
.tile p { font-weight: 400; }

/* --------------------------------------------------------------------------
   v35 (02.11.2026): Kleines Logo in der Menüleiste, sobald der Schriftzug weggescrollt ist ·
   Titel in Gross-/Kleinschreibung, etwas kleiner, Medium · Slogans bleiben Versalien, Medium
   -------------------------------------------------------------------------- */
.navbar__logo { position: absolute; left: var(--gutter); top: 50%; transform: translateY(-50%); display: block; height: 18px; opacity: 0; pointer-events: none; transition: opacity var(--t-med) var(--ease); }
.navbar__logo img { height: 100%; width: auto; mix-blend-mode: multiply; }
.navbar.is-stuck .navbar__logo { opacity: 1; pointer-events: auto; }
@media (max-width: 999px) { .navbar__logo { height: 15px; } }

:root {
  --fs-title: clamp(1.35rem, 2.3vw, 2.1rem);    /* 22–34 px */
  --fs-sub: clamp(1.05rem, 1.45vw, 1.35rem);    /* 17–22 px */
}
/* Titel: Gross-/Kleinschreibung, Medium */
.title, .cv__name, .art-head h1, body[data-page="magazin"] .page-head .title,
.section-title, .steps h3, .tile h3, .about__text h2, .prose h2, .prose h3, .blocks h3, .faq h3, .duo__text .title, .mag-item__text h2, .mag-item--feature .mag-item__text h2 {
  text-transform: none; letter-spacing: 0; font-weight: 500; line-height: 1.2;
}
/* Slogans und Aussagen: Versalien, Medium */
.statement, .statement.statement--home, .statement.statement--contact, .about__text > .statement.statement, .page-head--wide .statement, .art-quote, .quote blockquote {
  text-transform: uppercase; letter-spacing: 0.04em; font-weight: 500;
}

/* --------------------------------------------------------------------------
   v36–v39 (02.11.2026): Schriftzug und Menüleiste bleiben gemeinsam oben stehen, in
   voller Grösse (das Schrumpfen beim Scrollen wurde in v38 wieder entfernt). Slogans
   und Aussagen: Futura PT Versalien, auf dem Desktop einzeilig (eine Serifen-Variante
   aus v36–v38 wurde verworfen); Desktop-Schriftgrössen in v39 minim kleiner.
   -------------------------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 70; background: var(--bg); background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: saturate(180%) blur(10px); -webkit-backdrop-filter: saturate(180%) blur(10px); }
.site-header .navbar { position: static; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.masthead__mark { margin: 0 auto; width: 100%; }
body.nav-open .site-header { position: fixed; left: 0; right: 0; top: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.nav-open .navbar { position: static; }
.navbar__logo { display: none; }

/* Slogans und Aussagen: Futura PT, Versalien, Medium. Minimalwerte (Handy) wie bisher,
   Desktop-Obergrenzen etwas kleiner (02.11., Abend: «nur Desktop zu gross»). */
.statement, .statement.statement--home, .statement.statement--contact, .about__text > .statement.statement, .page-head--wide .statement, .art-quote, .quote blockquote, .article .page-head--center .statement.statement {
  font-family: var(--font); font-style: normal; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.3;
  font-size: clamp(1.1rem, 1.6vw, 1.45rem);          /* 18–23 px */
}
.statement.statement--home, .statement.statement--contact { font-size: clamp(1.45rem, 2.2vw, 1.95rem); max-width: 26ch; }   /* 23–31 px */
.about__text > .statement.statement { font-size: clamp(1.2rem, 1.9vw, 1.7rem); max-width: 20ch; }                         /* 19–27 px */
.art-quote { font-size: clamp(1.2rem, 1.8vw, 1.6rem); }
@media (max-width: 859px) { .about__text > .statement.statement { font-size: clamp(0.95rem, 4.3vw, 1.3rem); max-width: none; } }
body[data-page="magazin"] .page-head--wide .statement { font-size: var(--fs-lead); text-transform: none; letter-spacing: 0; font-weight: 400; }
/* Desktop: Slogans auf einer Zeile (Startseite, Kontakt, Seitenköpfe Arbeitsweise/Analyse).
   Die About-Aussage steht in der schmalen Textspalte neben dem Foto und darf umbrechen. */
@media (min-width: 1000px) {
  .statement.statement--line, .page-head--wide .statement, .page-head--center .statement { white-space: nowrap; max-width: none; text-wrap: initial; }
}

/* Titel: Desktop-Obergrenzen minim kleiner, Handy unverändert */
:root {
  --fs-title: clamp(1.35rem, 2.0vw, 1.85rem);   /* 22–30 px (vorher bis 34) */
  --fs-sub: clamp(1.05rem, 1.3vw, 1.2rem);      /* 17–19 px (vorher bis 22) */
}

/* --------------------------------------------------------------------------
   v40 (02.11.2026): Livegang. Fusszeile passt sich der Spaltenzahl an (ohne Newsletter-
   Spalte drei Spalten) · Einwilligungs-Banner für Google Analytics (js/analytics.js)
   -------------------------------------------------------------------------- */
@media (min-width: 760px) {
  .site-footer__grid { grid-template-columns: repeat(3, 1fr); }                      /* Live-Paket ohne Newsletter: drei Spalten */
  .site-footer__grid:has(.site-footer__nl) { grid-template-columns: repeat(4, 1fr); } /* mit Newsletter-Spalte: vier */
}
.consent { position: fixed; left: var(--gutter); right: var(--gutter); bottom: 16px; z-index: 90; margin: 0 auto; max-width: 720px;
  display: flex; flex-wrap: wrap; gap: 0.8rem 1.6rem; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem; background: var(--bg); border: 1px solid var(--ink); font-size: var(--fs-small); line-height: 1.5; }
.consent[hidden] { display: none; }
.consent__text { margin: 0; flex: 1 1 320px; }
.consent__text a { text-decoration: underline; text-underline-offset: 0.15em; }
.consent__actions { display: flex; gap: 0.6rem; flex: 0 0 auto; }
.consent__btn { font: inherit; letter-spacing: 0.12em; text-transform: uppercase; font-size: 11px; padding: 0.7em 1.1em; cursor: pointer; border: 1px solid var(--ink); background: transparent; color: var(--ink); transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.consent__btn--ok { background: var(--ink); color: var(--bg); }
.consent__btn:hover { background: var(--ink); color: var(--bg); }
.consent__btn--ok:hover { opacity: 0.85; }
@media (max-width: 599px) { .consent { bottom: 0; left: 0; right: 0; border-left: 0; border-right: 0; border-bottom: 0; } .consent__actions { width: 100%; justify-content: flex-end; } }

/* --------------------------------------------------------------------------
   v51/v52 (02./03.11.2026): Startseiten-Bühne nach kellywearstler.com – drei Zustände, main.js rechnet die Positionen.
   · Grundzustand (ohne JavaScript oder mit «Bewegung reduzieren» im System): Kopfzeile, darunter das Bild
     fertig als 3:2, kein Ablauf, die Logo-Hälften bleiben weg.
   · Echte Seite (html.js): die Kopfzeile ist zu Beginn nach oben hinausgeschoben (transform, main.js steuert sie),
     die Bühne klebt bildschirmfüllend an ihrer Stelle (negativer Rand); ANDREA, kleines Bild und SEILER stehen in
     der Mitte des Fensters. Mit dem Scrollweg (70 svh, p 0…1) wächst das Bild in einem Zug auf seine Endgrösse,
     ANDREA wandert oben hinaus, SEILER unten (beide blenden aus), und ab 40 % kommt gleichzeitig die Kopfzeile von
     oben herein, das Bild rückt unter sie. Endgrösse: Querformat 16:10, so gross, dass es unter der Kopfzeile ganz
     im Fenster steht (mittig, Tisch nicht angeschnitten, oben und unten nur wenig weggenommen); Hochformat (Handy)
     volle Breite 3:2, der Text schliesst gleichzeitig von unten an. Am Ende lässt die Bühne los, die Seite läuft
     normal: die Kopfzeile klebt, das Bild läuft darunter hinaus.
     Höhe der Bühne = Scrollweg + Endzustand: Querformat 70svh + 100svh, Hochformat 70svh + (Kopfzeile + 100vw/1,5).
     Technik: pro Bild nur transform und opacity (Bild: translate + scale auf der Endgrösse, Wörter, Kopfzeile),
     keine Grössenänderungen; die Kopfzeile verzichtet während der Bewegung auf den Weichzeichner (is-settled).
   · Eingebettete Vorschau (html.is-embedded, claude.ai-Rahmen): dort scrollt der äussere Rahmen, die Seite kann
     nicht kleben. Derselbe Ablauf spielt einmal von selbst in einer Bühne fester Höhe (= sichtbarer Ausschnitt);
     am Ende steht die Kopfzeile oben, das Bild darunter. Inhalt und Fusszeile blenden ein, sobald die Kopfzeile
     hereinkommt (body.hero-done), damit der Schriftzug nie doppelt steht.
   · v52 (03.11.2026): Fallbacks für ältere Browser (Kopfzeile ohne color-mix, 3:2 ohne aspect-ratio); Bild und Wörter
     erst sichtbar, wenn main.js sie platziert hat (is-placed); head.html meldet color-scheme «only light».
   -------------------------------------------------------------------------- */
.hero-split { position: relative; }
.hero-split__pin { position: relative; overflow: hidden; background: var(--bg); }
.hero-split__media { position: relative; margin: 0; overflow: hidden; width: 100%; aspect-ratio: 3 / 2; }
.hero-split__media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
@supports not (aspect-ratio: 1 / 1) { /* ältere Browser (Safari 14): 3:2 über Innenabstand; mit JavaScript setzt main.js die Grösse selbst */
  .hero-split__media { height: 0; padding-bottom: 66.667%; }
  @media (prefers-reduced-motion: no-preference) { html.js .hero-split__media { padding-bottom: 0; } }
}
.hero-split__word { display: none; }
.hero-split + .home-claim { margin-top: clamp(48px, 8vw, 120px); }
@media (prefers-reduced-motion: no-preference) {
  /* Kopfzeile zu Beginn oben hinaus (unsichtbar, nicht fokussierbar); main.js schiebt sie während des Ablaufs herein */
  html.js body[data-page="home"] .site-header { transform: translate3d(0, -100%, 0); visibility: hidden; }
  html.js body[data-page="home"] .site-header:not(.is-settled) { backdrop-filter: none; -webkit-backdrop-filter: none; }
  html.js .hero-split { z-index: 50; margin-top: calc(-1 * var(--header-h)); } /* unter Kopfzeile (70) und Menü (60) */
  html.js .hero-split__media { position: absolute; left: 0; top: 0; width: 30vw; height: auto; transform-origin: 0 0; will-change: transform; }
  html.js .hero-split__word { display: block; position: absolute; left: 0; top: 0; height: auto; mix-blend-mode: multiply; will-change: transform, opacity; pointer-events: none; }
  /* Bild und Wörter erst zeigen, wenn main.js sie platziert hat (is-placed): kein Aufblitzen oben links, falls der Browser vor dem Skript zeichnet */
  html.js .hero-split__media, html.js .hero-split__word { visibility: hidden; }
  html.js .hero-split.is-placed .hero-split__media, html.js .hero-split.is-placed .hero-split__word { visibility: visible; }
  /* echte Seite */
  html.js:not(.is-embedded) .hero-split { height: 170vh; height: 170svh; }
  html.js:not(.is-embedded) .hero-split__pin { position: sticky; top: 0; height: 100vh; height: 100svh; }
  /* eingebettete Vorschau */
  html.js.is-embedded .hero-split__pin { height: clamp(480px, 150vw, 720px); }
  html.js.is-embedded body[data-page="home"] .hero-split ~ *,
  html.js.is-embedded body[data-page="home"] .site-footer { opacity: 0; transition: opacity 500ms var(--ease); }
  html.js.is-embedded body[data-page="home"].hero-done .hero-split ~ *,
  html.js.is-embedded body[data-page="home"].hero-done .site-footer { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) and (orientation: portrait) {
  html.js:not(.is-embedded) .hero-split { height: calc(70vh + var(--header-h) + 66.667vw); height: calc(70svh + var(--header-h) + 66.667vw); }
}