/* ── Streiflicht auf dem Grund ───────────────────────────────────────
   Breite Bahnen, schräg von rechts oben nach links unten, jede mit einer
   silbrigen Glanzkante — wie Licht, das durch eine Jalousie fällt.
   Zwei Regler: --bahnen-staerke für die Schraffur, --licht-staerke für
   den grossen Lichtschein. */
:root {
  /* Zwei Regler. --bahnen-staerke ist die feine Schraffur, --licht-staerke
     der grosse Lichtschein. Beide unabhängig einstellbar. */
  --bahnen-staerke: .148;   /* auf RAL 7047 hat Weiss 5,5x mehr Kontrast als auf dem alten hellen Grund */
  --licht-staerke: .342;

  /* Die Bahnen: symmetrisch, mit den Spitzen auf den Vierteln und den
     Nulldurchgängen bei 0, 42 und 84. Dadurch ist es eine weiche Welle
     statt eines Streifens mit harter Kante — flach geglättet. */
  --bahnen:
    repeating-linear-gradient(126deg,
      rgba(255,255,255,0)                                    0px,
      rgba(255,255,255,calc(.95 * var(--bahnen-staerke)))    21px,
      rgba(255,255,255,0)                                    42px,
      rgba(25,28,33,calc(.058 * var(--bahnen-staerke)))      63px,
      rgba(25,28,33,0)                                       84px);

  /* Der Lichtschein: ein breiter Kamm, ein Schattental, ein zweiter
     schwächerer Kamm. Kachel 924 px — genau 11 x 84, damit beide Ebenen
     auf demselben Raster liegen und die Schleife nahtlos bleibt. */
  --lichtlauf:
    repeating-linear-gradient(126deg,
      rgba(255,255,255,0)                                     0px,
      rgba(255,255,255,calc(.87 * var(--licht-staerke)))    168px,
      rgba(255,255,255,0)                                   336px,
      rgba(25,28,33,calc(.034 * var(--licht-staerke)))      504px,
      rgba(25,28,33,0)                                      672px,
      rgba(255,255,255,calc(.52 * var(--licht-staerke)))    798px,
      rgba(255,255,255,0)                                   924px);

  --streiflicht: var(--bahnen), var(--lichtlauf);
}

/* ── Die Wellen ──────────────────────────────────────────────────────
   Die beiden Ebenen wandern entlang der Bahnrichtung (126°), aber
   verschieden schnell. Wo sie sich treffen, wird es kurz heller, wo sie
   auseinanderlaufen, dunkler — das ergibt ein langsames Wogen.
   Ein Durchgang der schmalen Ebene dauert 46 s, der breiten 97 s. Weil
   die Zeiten nicht ineinander aufgehen, wiederholt sich das Bild erst
   nach gut einer Stunde.
   Verschoben wird um ein ganzzahliges Vielfaches der Kachelbreite —
   sonst gäbe es beim Zurückspringen einen Ruck. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  body { animation: wogenGrund 78s linear infinite; }
  /* Der Grund trägt vier Ebenen: zwei Hilfslinien, dann die beiden
     Lichtebenen. Die Hilfslinien bleiben stehen. */
  @keyframes wogenGrund {
    from { background-position: 0 0, 0 0,     0px      0px,     0px      0px; }
    to   { background-position: 0 0, 0 0, 203.87px 148.12px, -747.53px -543.11px; }
  }
}

/* Auf Touch-Geräten bleibt die Verankerung ebenfalls am Fenster. Mit
   „scroll" hätten Grund und Flächen wieder verschiedene Raster, und der
   Versatz an den Kanten wäre zurück. Ein Verlauf ist billig genug dafür;
   die Bewegung ist dort ohnehin aus. */

:root {
  --paper: #c8c8c7;        /* RAL 7047 Telegrau 4 — Seitengrund */
  --white: #ffffff;
  --soft: #d3d3d2;         /* aufgehellter Grund fuer abgesetzte Bahnen */
  /* Dieselbe Farbe, aber durchscheinend: so bleibt das Muster des
     Grundes sichtbar. 5 % von #191c21 auf #f4f5f6 ergibt #e9eaeb. */
  --soft-lasur: rgba(25,28,33,.050);
  --ink: #191919;
  --akzent: #4e5452;       /* RAL 7043 Verkehrsgrau B — Akzent */
  --muted: #4e5452;        /* gedaempfter Text = derselbe Akzentton */
  /* RAL 4002 Rotviolett in drei Stufen — derselbe Farbton 347°, nur andere
     Helligkeit. Eine einzige Stufe reicht nicht: auf dem Anthrazit hat das
     Original nur 1,68 Kontrast und ist praktisch unsichtbar. */
  --orange: #933d50;       /* RAL 4002 — Grundton, grosse Schrift auf hellem Grund */
  --signal-tief: #8a394b;  /* kleiner Text auf RAL 7047: Kontrast 4,53 */
  --signal-hell: #d18a9b;  /* auf Anthrazit und dunklen Flaechen: Kontrast 4,34 */
  --anthrazit: #3a3837;    /* aus ihrem Brandbooklet */
  /* Drei Kartengruende, Melanies Vorschlag vom 08.09.2026, 12:15: „weiss,
     rosa, grau, ... damit es sich farblich unterscheidet." Alle drei liegen
     HELLER als der Seitengrund #c8c8c7 — so schwimmen sie darauf, statt sich
     hineinzumischen. Rosa ist RAL 4002 auf 14 % heruntergezogen, also ihr
     eigener Akzent als Flaeche, nicht eine neue Farbe. */
  --karte-weiss: #ffffff;
  --karte-rosa: #e7d6da;
  --karte-grau: #dcdcda;
  --line: rgba(78, 84, 82, .30);   /* Linien aus dem Akzentton */
  --pad: clamp(1.4rem, 5vw, 6.5rem);
  --serif: "Archivo", "Helvetica Neue", Arial, sans-serif;  /* wie Entwurf B */
  --sans: "Poppins", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; font-weight: 300; line-height: 1.75; overflow-x: hidden; background-image: linear-gradient(90deg, transparent calc(25% - .5px), rgba(25,25,25,.035) 25%, transparent calc(25% + .5px)), linear-gradient(90deg, transparent calc(75% - .5px), rgba(25,25,25,.035) 75%, transparent calc(75% + .5px)), var(--streiflicht); background-attachment: fixed, fixed, fixed, fixed; background-size: auto, auto, auto, auto; }
img { max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
::selection { background: var(--orange); color: white; }

.skip { position: fixed; z-index: 9999; top: 1rem; left: 1rem; padding: .7rem 1rem; background: var(--ink); color: white; transform: translateY(-180%); }
.skip:focus { transform: none; }
.noise { position: fixed; inset: 0; z-index: 900; pointer-events: none; opacity: .018; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }
.scrollbar { position: fixed; z-index: 1001; top: 0; right: 0; width: 2px; height: 100vh; }
.scrollbar span { display: block; width: 100%; height: 0; background: var(--orange); }

.nav { position: fixed; z-index: 1000; inset: 0 0 auto; height: 5rem; padding: 0 var(--pad); display: flex; align-items: center; justify-content: space-between; background: rgba(251,251,250,.91); backdrop-filter: blur(18px); border-bottom: 1px solid transparent; transition: border-color .4s; }
.nav.isScrolled { border-color: var(--line); }
.brand { display: flex; align-items: center; gap: .7rem; }
.brand__sperrung { display: block; height: 2.1rem; width: auto; }
.brand--footer .brand__sperrung { height: 2.4rem; }
@media (max-width: 620px) {
  /* Das senkrechte Etikett braucht 1.6rem Platz links vom Block, am Handy sind
     aber nur 1.4rem Seitenrand da (--pad ist dort auf sein Minimum geklemmt).
     Es ragte also aus dem Bild heraus. Gemessen am 07.09.2026 bei 390 px. */
  .roleSystem::before { display: none; } .brand__sperrung { height: 1.6rem; } }
.menu { display: flex; align-items: center; gap: clamp(1.4rem, 2.8vw, 3rem); font-size: .78rem; }
.menu a { color: var(--muted); transition: color .25s; }
.menu a:hover, .menu a.active { color: var(--ink); }
.menu a.active:not(.menu__cta)::after { content: ""; display: block; width: 1rem; height: 1px; margin-top: .25rem; background: var(--orange); }
.menu__cta { padding: .65rem 1rem; border: 1px solid var(--line); display: flex; gap: 1.6rem; align-items: center; }
.menuButton { display: none; border: 0; background: none; color: var(--ink); font-size: .78rem; }

.eyebrow { margin: 0 0 1.5rem; color: var(--orange); font-size: .73rem; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; }
h1, h2, h3, p { text-wrap: pretty; }
h1, h2 { margin: 0; font-weight: 300; letter-spacing: -.035em; line-height: 1.14; }
h1 { font-size: clamp(2.7rem, 4vw, 4.4rem); }
h2 { font-size: clamp(2rem, 3.1vw, 3.35rem); }
h1 em, h2 em { font-family: var(--serif); font-weight: 600; font-style: normal;
  letter-spacing: -.01em; color: var(--orange); }
.lead { max-width: 35rem; margin: 1.9rem 0 2.4rem; color: var(--muted); font-size: clamp(1.05rem, 1.3vw, 1.22rem); line-height: 1.75; }
.textLink { display: inline-flex; gap: 1.2rem; align-items: center; padding-bottom: .25rem; border-bottom: 1px solid var(--ink); font-size: .8rem; font-weight: 400; transition: color .25s, border-color .25s; }
.textLink:hover { color: var(--orange); border-color: var(--orange); }
.button { display: inline-flex; justify-content: space-between; align-items: center; gap: 3rem; min-width: 14rem; padding: .9rem 1.1rem; border: 1px solid var(--ink); background: transparent; color: var(--ink); font-size: .78rem; font-weight: 400; cursor: pointer; transition: background .25s, color .25s; }
.button:hover { background: var(--ink); color: white; }

.homeHero { min-height: 41rem; padding: 8rem var(--pad) 6rem; display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(3rem, 8vw, 10rem); align-items: center; }
.homeHero__copy { max-width: 36rem; }
.homeHero__image { margin: 0; justify-self: end; width: min(100%, 38rem); }
.homeHero__image img { display: block; width: 100%; height: min(34rem, 46rem); object-fit: contain; object-position: center; background: var(--soft); }
.homeHero__image figcaption, .silkBreak figcaption, .portraitPair figcaption, .widePortrait figcaption, .contactImage figcaption { margin-top: .7rem; color: var(--muted); font-size: .68rem; letter-spacing: .08em; }

.quietStatement { padding: clamp(8rem, 13vw, 14rem) var(--pad); text-align: center; }
.quietStatement .eyebrow { margin-bottom: 3rem; }
.quietStatement__text { max-width: 62rem; margin: 0 auto; font-family: var(--serif); font-size: clamp(2rem, 3.2vw, 3.5rem); line-height: 1.25; }
.quietStatement__note { max-width: 38rem; margin: 3rem auto 0; color: var(--muted); }

.imageGallery { padding: 2.6rem var(--pad) 4rem; display: grid; grid-template-columns: 1.12fr .88fr; gap: clamp(2rem, 8vw, 10rem); align-items: end; }
.imageGallery figure { margin: 0; }
.imageGallery img { display: block; width: 100%; height: auto; background: var(--soft); }
.imageGallery__secondary { width: min(100%, 29rem); justify-self: end; }
.imageGallery figcaption { margin-top: .7rem; color: var(--muted); font-size: .68rem; letter-spacing: .08em; }

.homeRoles { padding: 6rem var(--pad); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 9vw, 10rem); align-items: center; background: var(--soft-lasur); }
.homeRoles__visual img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.homeRoles__content { max-width: 35rem; }
.homeRoles__content > p:not(.eyebrow) { margin: 2rem 0; color: var(--muted); }
.quietList { list-style: none; padding: 0; margin: 2.7rem 0; border-top: 1px solid var(--line); }
.quietList li { display: grid; grid-template-columns: 2.4rem 1fr; gap: .75rem; padding: 1.2rem 0; border-bottom: 1px solid var(--line); }
.quietList span { color: var(--orange); font-size: .7rem; }
.quietList strong { font-size: .92rem; font-weight: 400; }

.silkBreak { margin: 0; padding: 7rem var(--pad); }
.silkBreak img { display: block; width: 100%; height: 26rem; object-fit: cover; }
.silkBreak figcaption { display: flex; justify-content: space-between; }

.homeAbout { padding: 5rem var(--pad) 7rem; display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(3rem, 10vw, 12rem); align-items: center; }
.homeAbout__copy { max-width: 34rem; }
.homeAbout__copy > p:not(.eyebrow) { margin: 2rem 0; color: var(--muted); }
.homeAbout__image { margin: 0; }
.homeAbout__image img { display: block; width: 100%; height: auto; background: var(--soft); }

.calmCta { padding: clamp(8rem, 12vw, 13rem) var(--pad); text-align: center; border-top: 1px solid var(--line); }
.calmCta h2 { max-width: 50rem; margin: 0 auto; }
.calmCta > p:not(.eyebrow) { max-width: 35rem; margin: 2rem auto 2.5rem; color: var(--muted); }
.calmCta .button { justify-content: space-between; }

.pageHero { min-height: 38rem; padding: 8rem var(--pad) 6rem; display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(3rem, 8vw, 10rem); align-items: center; }
.pageHero__copy { max-width: 41rem; }
.pageHero__image { margin: 0; justify-self: end; width: min(100%, 39rem); }
.pageHero__image img { display: block; width: 100%; height: min(34rem, 46rem); object-fit: contain; object-position: center; background: var(--soft); }

.story { padding: 7rem var(--pad); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 10vw, 12rem); }
.story__intro { max-width: 36rem; }
.story__body { max-width: 35rem; }
.story__body p { color: var(--muted); margin: 0 0 1.5rem; }
.story__body .story__lead, .story__lead { color: var(--ink); font-family: var(--serif); font-size: clamp(1.45rem, 2.1vw, 2.2rem); line-height: 1.35; }

.portraitPair { padding: 0 var(--pad) 11rem; display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(2rem, 7vw, 8rem); align-items: center; }
.portraitPair__main { margin: 0; }
.portraitPair__main img { display: block; width: 100%; height: auto; background: var(--soft); }
.portraitPair__quote p { margin: 0 0 1.5rem; font-family: var(--serif); font-size: clamp(1.8rem, 2.8vw, 3rem); line-height: 1.3; }
.portraitPair__quote span { color: var(--muted); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }

.values { padding: 6.5rem var(--pad); background: var(--soft-lasur); }
.values__grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 4rem; border-top: 1px solid var(--line); }
.values article { padding: 2rem 3rem 1rem 0; }
.values article + article { border-left: 1px solid var(--line); padding-left: 3rem; }
.values article > span, .contactExpect article > span, .offer > span { color: var(--orange); font-size: .7rem; }
.values h3, .contactExpect h3 { margin: 2rem 0 1rem; font-size: 1.2rem; font-weight: 400; }
.values article p, .contactExpect article p { color: var(--muted); }

.facts { padding: 7rem var(--pad); display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(3rem, 10vw, 12rem); align-items: center; }
.facts__image img { display: block; width: 100%; height: auto; background: var(--soft); }
.facts dl { margin: 2rem 0 0; }
.facts dl div { display: grid; grid-template-columns: 8rem 1fr; gap: 2rem; align-items: baseline; padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.facts dt { font-family: var(--serif); color: var(--orange); font-size: 2.3rem; }
.facts dd { margin: 0; color: var(--muted); }

.diagnosis { padding: 7rem var(--pad); background: var(--soft-lasur); }
.diagnosis__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 10vw, 12rem); }
/* ⚠️ Hier stand `> div p:last-child`. Das trifft JEDEN Absatz, der in seinem
   Elternteil der letzte ist — also auch die Schlusszeile jedes Takt-Bausteins.
   In Melanies Fassung vom 08.09. sind das zwei ihrer staerksten Saetze
   („Nur waechst ein Unternehmen…", „Auf dich. Auf deine Fuehrung."), und die
   standen dadurch blass im Grau. Gemeint war immer nur der letzte Absatz der
   Spalte, also das trockene Zitat am Ende. Ein `>` mehr, und es stimmt. */
.diagnosis__grid > div > p:last-child { color: var(--muted); }
.roleSection { padding: 7rem var(--pad); }
.roleSection__head { max-width: 45rem; margin-bottom: 5rem; }
.roleSystem { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.roleSystem__visual { position: relative; min-height: 30rem; overflow: hidden; background: var(--soft); }
.roleSystem__visual img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 65%; transition: transform .8s ease; }
.roleSystem__visual > span { position: absolute; left: 1.2rem; bottom: 1rem; padding: .45rem .6rem; background: rgba(251,251,250,.88); font-size: .65rem; letter-spacing: .08em; }
.roleSystem[data-active="enable"] .roleSystem__visual img { transform: scale(1.025); }
.roleSystem[data-active="build"] .roleSystem__visual img { transform: scale(1.045); }
.roleSystem__content { display: flex; flex-direction: column; justify-content: space-between; }
.roleSystem__controls { display: flex; flex-direction: column; }
.role { appearance: none; border: 0; border-bottom: 1px solid var(--line); padding: 1.55rem 2rem; background: transparent; text-align: left; display: grid; grid-template-columns: 2.4rem 1fr; cursor: pointer; color: var(--muted); transition: background .3s, color .3s; }
.role span { color: var(--orange); font-size: .68rem; }
.role strong { font-size: .95rem; font-weight: 400; }
.role small { grid-column: 2; margin-top: .25rem; font-family: var(--serif); font-size: .9rem; }
.role.active { background: var(--ink); color: white; }
.roleSystem__copy { padding: 3rem 2rem; }
.roleSystem__copy span { color: var(--orange); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.roleSystem__copy p { max-width: 31rem; margin: 1rem 0 0; color: var(--muted); }

.hours { padding: 6.5rem var(--pad); display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(3rem, 10vw, 12rem); align-items: center; background: var(--ink); color: white; }
.hours__number strong { display: block; font-family: var(--serif); color: var(--orange); font-size: clamp(5rem, 10vw, 10rem); font-weight: 400; line-height: .8; }
.hours__number span { display: block; margin-top: 1.5rem; color: #aaa; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.hours__copy h2 { font-size: clamp(1.8rem, 2.6vw, 2.8rem); }
.hours__copy > p:last-child { margin-top: 2rem; color: #aaa; }

.offers { padding: 7rem var(--pad); }
.offers__intro { max-width: 48rem; }
.offers__intro > p:last-child { max-width: 34rem; margin-top: 2rem; color: var(--muted); }
.offerGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 5rem; background: var(--line); border: 1px solid var(--line); }
.offer { padding: clamp(2rem, 3vw, 3.5rem); background: transparent; display: flex; flex-direction: column; min-height: 27rem; }
.offer h3 { margin: 2rem 0 1rem; font-size: 1.25rem; font-weight: 400; }
.offer p { margin: 0; color: var(--muted); }
.offer > strong { margin-top: auto; padding: 2.5rem 0 1.5rem; font-size: 1.35rem; font-weight: 400; }
.offer > strong small { font-size: .65rem; font-weight: 300; }
.offer .textLink { width: fit-content; }
.offer .textLink b { font-weight: 400; }
.widePortrait { margin: 0; padding: 6rem var(--pad) 6rem; background: var(--soft-lasur); }
.widePortrait img { display: block; width: min(100%, 40rem); height: auto; margin: 0 auto; }
.widePortrait figcaption { width: min(100%, 40rem); margin-left: auto; margin-right: auto; }

.contactPage { min-height: 36rem; padding: 8.5rem var(--pad) 6rem; display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(4rem, 11vw, 13rem); align-items: center; }
.contactPage__intro { max-width: 36rem; }
.contactDirect { margin-top: 4rem; padding-top: 1.4rem; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: .35rem; }
.contactDirect span { color: var(--muted); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
.contactDirect a { font-family: var(--serif); font-size: 1.35rem; }
.contactPage__form form { display: grid; gap: 1.5rem; }
.contactPage__form label { display: grid; gap: .45rem; }
.contactPage__form label span { color: var(--muted); font-size: .72rem; }
.contactPage__form input, .contactPage__form textarea { width: 100%; padding: .75rem 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; outline: 0; background: transparent; color: var(--ink); resize: vertical; }
.contactPage__form input:focus, .contactPage__form textarea:focus { border-color: var(--orange); }
.contactPage__form .button { margin-top: 1rem; }
.formNote { margin: 1.5rem 0 0; color: var(--muted); font-size: .72rem; }
.contactExpect { padding: 6.5rem var(--pad); background: var(--soft-lasur); }
.contactExpect__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 5vw, 6rem); margin-top: 4rem; }
.contactImage { margin: 0; padding: 6.5rem var(--pad); }
.contactImage img { display: block; width: 100%; height: 28rem; object-fit: cover; }

/* Editorial visual system */
main { position: relative; }
main::before { content: ""; position: absolute; z-index: 4; top: 0; bottom: 0; left: calc(var(--pad) * .48); width: 1px; background: linear-gradient(180deg, transparent, rgba(233,74,24,.5) 8%, rgba(233,74,24,.12) 72%, transparent); pointer-events: none; }
body::after { content: attr(data-page); position: fixed; z-index: 800; left: .7rem; bottom: 2rem; color: var(--muted); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); }

.homeHero { position: relative; grid-template-columns: repeat(12, 1fr); gap: 1.2rem; overflow: hidden; }
.homeHero::after { content: ""; position: absolute; top: 15%; right: -13vw; width: 42vw; aspect-ratio: 1; border: 0; border-left: 1px solid rgba(233,74,24,.28); }
.homeHero__copy { grid-column: 2 / 7; position: relative; z-index: 5; }
.heroArtwork { grid-column: 7 / 13; position: relative; z-index: 3; height: 36rem; min-height: 0; }
.heroArtwork::before { content: ""; position: absolute; inset: 6% 1% 3% 3%; background-image: linear-gradient(rgba(25,25,25,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(25,25,25,.07) 1px, transparent 1px); background-size: 3.5rem 3.5rem; border: 1px solid var(--line); }
.heroArtwork__orbit { position: absolute; z-index: 1; width: 78%; aspect-ratio: 1; top: 6%; left: 10%; border: 0; border-left: 1px solid rgba(25,25,25,.18); transform: translate(var(--nx, 0), var(--ny, 0)); transition: transform .6s ease-out; }
.heroArtwork__orbit::before, .heroArtwork__orbit::after { content: ""; position: absolute; border: 0; border-left: 1px solid rgba(25,25,25,.12); }
.heroArtwork__orbit::before { inset: 13%; }
.heroArtwork__orbit::after { inset: 31%; border-color: rgba(233,74,24,.6); }
/* Die drei Punkte auf den Kreisbahnen hat Melanie am 05.09. gruen
   markiert: was mich ein bisschen nervoes macht, sind die beiden
   Punkte. Ausgeblendet statt geloescht, damit das Markup gleich bleibt. */
.heroArtwork__orbit span { display: none; }
.heroArtwork__orbit span:nth-child(1) { top: 7%; left: 24%; }
.heroArtwork__orbit span:nth-child(2) { top: 46%; right: -.28rem; }
.heroArtwork__orbit span:nth-child(3) { bottom: 5%; left: 19%; }
.homeHero__image { position: absolute; z-index: 3; left: 2%; bottom: 0; width: 51%; margin: 0; transform: translate(var(--px, 0), var(--py, 0)) rotate(-1.5deg); transition: transform .6s ease-out; }
.homeHero__image img { width: 100%; height: auto; max-height: none; object-fit: initial; border: .65rem solid white; box-shadow: 0 2rem 5rem rgba(25,25,25,.12); }
.homeHero__image figcaption { padding-left: .65rem; }
.heroArtwork__object { position: absolute; z-index: 2; top: 2%; right: -4%; width: 60%; margin: 0; transform: translate(var(--nx, 0), var(--ny, 0)) rotate(2deg); transition: transform .6s ease-out; mix-blend-mode: multiply; }
.heroArtwork__object img { display: block; width: 100%; }
.heroArtwork__axis { position: absolute; z-index: 5; right: 1.1rem; top: 18%; bottom: 14%; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; padding-right: 1.1rem; border-right: 1px solid var(--orange); color: var(--muted); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; }
.heroArtwork__code { position: absolute; z-index: 5; top: 2%; left: 3%; font-size: .58rem; letter-spacing: .16em; color: var(--muted); }

.quietStatement { position: relative; padding: 8rem var(--pad); display: flex; flex-direction: column; justify-content: center; }
/* ⚠️ Ausgeblendet am 07.09.: Das Zitatzeichen gehoerte zur alten Frage,
   die ein Kundinnenzitat war. Die neue Frage stellt Melanie der Leserin
   selbst — dort waere ein Anfuehrungszeichen schlicht falsch. */
.quietStatement::before { content: none; position: absolute; z-index: -1; top: 4%; left: 8%; color: rgba(25,25,25,.07); font-family: var(--serif); font-size: 25rem; line-height: 1; }
.quietStatement__text { position: relative; }
.quietStatement__text::after { content: ""; display: block; width: 4rem; height: 1px; margin: 3rem auto 0; background: var(--orange); }

.imageGallery { position: relative; grid-template-columns: repeat(12, 1fr); gap: 1.2rem; align-items: center; background: var(--anthrazit); color: white; overflow: hidden; }
.imageGallery::before { content: none; position: absolute; right: -2vw; bottom: -12vw; color: rgba(255,255,255,.025); font-family: var(--serif); font-size: 34vw; line-height: .8; letter-spacing: -.1em; }
.imageGallery::after { content: "PERSON / ROLE / FREEDOM"; position: absolute; left: var(--pad); top: 2.5rem; color: #777; font-size: .62rem; letter-spacing: .18em; }
.imageGallery__main { grid-column: 3 / 7; position: relative; z-index: 2; transform: rotate(-1deg); }
.imageGallery__secondary { grid-column: 8 / 12; position: relative; z-index: 3; width: 62%; justify-self: center; transform: translateY(2rem) rotate(1.5deg); }
.imageGallery img { border: .55rem solid #f7f8f9; box-shadow: 0 2rem 6rem rgba(0,0,0,.35); }
.imageGallery figcaption { color: #999; }

.homeRoles { position: relative; background: transparent; grid-template-columns: repeat(12, 1fr); gap: 1.2rem; }
/* „Was bedeutet die 03 rechts oben? Wo ist 01 und 02?" — sie hat recht,
   die Nummer behauptet eine Reihenfolge, die es nicht gibt. */
.homeRoles::before { display: none; content: none; position: absolute; top: 4rem; right: var(--pad); color: rgba(25,25,25,.05); font-family: var(--serif); font-size: 12rem; line-height: 1; }
.homeRoles__visual { grid-column: 1 / 7; position: relative; }
.homeRoles__visual::before { content: ""; position: absolute; z-index: 2; inset: 8%; border: 0; border-top: 1px solid rgba(233,74,24,.34); pointer-events: none; }
.homeRoles__visual::after { content: "THREE ROLES / ONE PERSON"; position: absolute; z-index: 3; left: 1.2rem; bottom: 1rem; padding: .45rem .6rem; background: rgba(251,251,250,.88); color: var(--muted); font-size: .58rem; letter-spacing: .15em; }
.homeRoles__content { grid-column: 8 / 13; position: relative; z-index: 3; }

.silkBreak { position: relative; padding: 7rem var(--pad); display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.2rem; align-items: center; background: #111; color: white; overflow: hidden; }
/* ⚠️ Der Zierbogen ist am 07.09. weggefallen. Melanie: „Auch die Linien
   konkurrieren irgendwie mit dem Bild. Das ist ein Block der mich etwas
   nervoes macht." Er lief von rechts oben quer ueber die Bahn und war die
   einzige Linie, die das Bild geschnitten hat. */
.silkBreak::after { content: none; }
.silkBreak figure { grid-column: 2 / 9; margin: 0; position: relative; z-index: 2; }
.silkBreak figure::before { content: ""; position: absolute; inset: -1rem 1rem 1rem -1rem; border: 1px solid rgba(255,255,255,.18); }
.silkBreak img { position: relative; display: block; width: 100%; height: min(61vh, 42rem); object-fit: cover; }
.silkBreak__copy { grid-column: 9 / 12; position: relative; z-index: 3; align-self: end; padding-bottom: 2rem; }
.silkBreak__copy > span { color: #777; font-size: .62rem; letter-spacing: .15em; }
.silkBreak__copy p { margin: 1.5rem 0 .2rem; font-family: var(--serif); font-size: clamp(2rem, 3vw, 3.4rem); line-height: 1.05; }
.silkBreak__copy small { color: var(--orange); font-size: .78rem; letter-spacing: .08em; }

.homeAbout { position: relative; grid-template-columns: repeat(12, 1fr); gap: 1.2rem; overflow: hidden; }
.homeAbout::before { content: none; position: absolute; right: 0; top: 0; color: rgba(25,25,25,.05); font-family: var(--serif); font-size: 42vw; line-height: .7; }
.homeAbout__copy { grid-column: 2 / 7; position: relative; z-index: 2; }
.homeAbout__image { grid-column: 8 / 12; position: relative; z-index: 2; width: 78%; justify-self: center; }
.homeAbout__image::after { content: ""; position: absolute; inset: 1rem -1rem -1rem 1rem; border: 1px solid var(--orange); z-index: -1; }

.pageHero { position: relative; grid-template-columns: repeat(12, 1fr); gap: 1.2rem; overflow: hidden; }
.pageHero__copy { grid-column: 2 / 7; position: relative; z-index: 5; }
.pageArtwork { grid-column: 7 / 13; position: relative; height: 34rem; min-height: 0; }
.pageArtwork::before { content: ""; position: absolute; inset: 5%; border: 1px solid var(--line); background-image: linear-gradient(rgba(25,25,25,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(25,25,25,.06) 1px, transparent 1px); background-size: 4rem 4rem; }
.pageArtwork__arc { position: absolute; z-index: 1; width: 72%; aspect-ratio: 1; top: 8%; left: 13%; border: 0; border-left: 1px solid rgba(233,74,24,.5); }
.pageArtwork__arc::before, .pageArtwork__arc::after { content: ""; position: absolute; border: 0; border-left: 1px solid rgba(25,25,25,.13); }
.pageArtwork__arc::before { inset: 16%; }
.pageArtwork__arc::after { inset: 34%; }
.pageArtwork .pageHero__image { position: absolute; z-index: 3; left: 4%; bottom: 0; width: 52%; margin: 0; transform: translate(var(--px, 0), var(--py, 0)) rotate(-1deg); transition: transform .6s ease-out; }
.pageArtwork .pageHero__image img { width: 100%; height: auto; max-height: none; object-fit: initial; border: .6rem solid white; box-shadow: 0 2rem 5rem rgba(25,25,25,.12); }
.pageArtwork__graphic { position: absolute; z-index: 2; right: 0; top: 11%; width: 59%; margin: 0; transform: translate(var(--nx, 0), var(--ny, 0)) rotate(2deg); transition: transform .6s ease-out; }
.pageArtwork__graphic img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border: .5rem solid white; }
.pageArtwork__label { position: absolute; z-index: 5; right: 1rem; bottom: 8%; font-size: .58rem; letter-spacing: .17em; color: var(--muted); writing-mode: vertical-rl; }
.pageArtwork--roles .pageHero__image { left: 2%; top: 5%; bottom: auto; width: 70%; mix-blend-mode: multiply; transform: translate(var(--nx, 0), var(--ny, 0)); }
.pageArtwork--roles .pageHero__image img { border: 0; box-shadow: none; }
.pageArtwork__portrait { position: absolute; z-index: 4; right: 5%; bottom: 1%; width: 27%; margin: 0; transform: rotate(2deg); }
.pageArtwork__portrait img { display: block; width: 100%; height: auto; border: .45rem solid white; box-shadow: 0 1.4rem 4rem rgba(25,25,25,.16); }

.story, .diagnosis, .facts, .values, .roleSection, .offers, .contactExpect { position: relative; }
.story::before, .diagnosis::before, .facts::before, .values::before, .roleSection::before, .offers::before, .contactExpect::before { content: ""; position: absolute; top: 0; left: var(--pad); right: var(--pad); height: 1px; background: var(--line); }
.portraitPair__main { width: 72%; justify-self: center; position: relative; }
.portraitPair__main::before { content: ""; position: absolute; inset: -1.2rem 1.2rem 1.2rem -1.2rem; border: 1px solid var(--orange); z-index: -1; }
.facts__image { width: 70%; justify-self: center; position: relative; }
.facts__image::after { content: ""; position: absolute; width: 64%; aspect-ratio: 1; border: 0; border-top: 1px solid var(--orange); right: -28%; bottom: -10%; z-index: -1; }

.roleSystem { position: relative; box-shadow: 0 2rem 7rem rgba(25,25,25,.06); }
.roleSystem::before { content: "ROLE ARCHITECTURE"; position: absolute; z-index: 3; left: -1.6rem; top: 1.5rem; color: var(--muted); font-size: .56rem; letter-spacing: .15em; writing-mode: vertical-rl; transform: rotate(180deg); }
.hours { position: relative; overflow: hidden; }
.hours::before { content: ""; position: absolute; width: 43vw; aspect-ratio: 1; left: -11vw; top: 50%; transform: translateY(-50%); border: 0; border-left: 1px solid rgba(233,74,24,.4); }
.hours::after { content: ""; position: absolute; width: 29vw; aspect-ratio: 1; left: -4vw; top: 50%; transform: translateY(-50%); border: 0; border-left: 1px solid rgba(255,255,255,.12); }
.hours__number, .hours__copy { position: relative; z-index: 2; }
.offerGrid { position: relative; box-shadow: 0 2rem 6rem rgba(25,25,25,.055); }
.offerGrid::before { display: none; }
.widePortrait { position: relative; display: grid; place-items: center; overflow: hidden; }
.widePortrait::before, .widePortrait::after { content: ""; position: absolute; border: 0; border-top: 1px solid rgba(233,74,24,.35); }
.widePortrait::before { width: 47vw; aspect-ratio: 1; }
.widePortrait::after { width: 31vw; aspect-ratio: 1; border-color: rgba(25,25,25,.12); }
.widePortrait img, .widePortrait figcaption { position: relative; z-index: 2; }
.widePortrait img { width: min(40vw, 31rem); border: .65rem solid white; box-shadow: 0 2rem 6rem rgba(25,25,25,.13); transform: rotate(-1deg); }

.contactPage { position: relative; overflow: hidden; }
.contactPage__intro, .contactPage__form { position: relative; z-index: 3; }
.contactPage__form { padding: clamp(2rem, 4vw, 4.5rem); background: rgba(251,251,250,.8); backdrop-filter: blur(14px); border: 1px solid var(--line); box-shadow: 0 2rem 7rem rgba(25,25,25,.06); }
.contactPage__graphic { position: absolute; z-index: 1; width: min(54vw, 50rem); aspect-ratio: 1; right: -12%; top: 50%; transform: translateY(-50%); border: 0; border-left: 1px solid rgba(233,74,24,.4); }
.contactPage__graphic::before, .contactPage__graphic::after { content: ""; position: absolute; border: 0; border-left: 1px solid rgba(25,25,25,.12); }
.contactPage__graphic::before { inset: 16%; }
.contactPage__graphic::after { inset: 34%; border-color: rgba(233,74,24,.25); }
.contactPage__graphic span { display: none; }
.contactPage__graphic span:nth-child(1) { top: 4%; left: 34%; }
.contactPage__graphic span:nth-child(2) { right: -.3rem; top: 51%; }
.contactPage__graphic span:nth-child(3) { bottom: 8%; left: 19%; }

.footer { padding: 4rem var(--pad); display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3rem; align-items: start; background: var(--ink); color: white; }
.brand--footer strong { color: white; }
.footer__nav, .footer__meta { display: flex; flex-direction: column; gap: .5rem; color: #aaa; font-size: .75rem; }
.footer__meta { text-align: right; }

.reveal { opacity: 0; transform: translateY(1.1rem); transition: opacity 1s ease, transform 1s ease; }
.reveal.inView { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .menuButton { display: block; position: relative; z-index: 2; }
  /* ⚠️ NICHT auf position:fixed umstellen. Die Kopfzeile hat backdrop-filter,
     und das macht sie zum Bezugsrahmen fuer jedes fixed positionierte Kind.
     Das Menue war dadurch nur so hoch wie die Kopfzeile, schob sich beim
     Verstecken nicht aus dem Bild, und "Kontakt" lag auf dem Logo.
     Absolut positioniert ist der Bezugsrahmen derselbe — nur berechenbar. */
  .menu { position: absolute; top: 100%; left: 0; width: 100%;
    height: calc(100dvh - 4.5rem); padding: 3rem var(--pad) 4rem;
    background: var(--paper); flex-direction: column; align-items: flex-start;
    justify-content: center; font-family: var(--serif);
    font-size: clamp(1.8rem, 6vw, 3.2rem);
    opacity: 0; visibility: hidden; transform: translateY(-.6rem);
    transition: opacity .32s ease, transform .32s ease, visibility 0s .32s; }
  .menu.isOpen { opacity: 1; visibility: visible; transform: none;
    transition: opacity .32s ease, transform .32s ease, visibility 0s; }
  .menu__cta { font-family: var(--sans); font-size: .8rem; margin-top: 1rem; }
  .homeHero, .pageHero { min-height: auto; grid-template-columns: 1fr; padding-top: 9rem; }
  .homeHero__copy, .pageHero__copy { padding: 3rem 0 1rem; }
  .homeHero__image, .pageHero__image { justify-self: stretch; width: 100%; }
  .homeHero__image img, .pageHero__image img { height: auto; max-height: none; }
  .imageGallery { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .homeRoles, .homeAbout, .story, .facts, .diagnosis__grid, .hours, .contactPage { grid-template-columns: 1fr; }
  .homeRoles__visual { max-width: 36rem; }
  .homeAbout__image { grid-row: 1; max-width: 36rem; }
  .portraitPair { grid-template-columns: 1fr; }
  .portraitPair__quote { max-width: 35rem; }
  .values__grid, .offerGrid, .contactExpect__grid { grid-template-columns: 1fr; }
  .values article + article { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
  .roleSystem { grid-template-columns: 1fr; }
  .roleSystem__visual { min-height: 75vw; }
  .offer { min-height: 22rem; }
  .contactPage { padding-top: 10rem; }
}

@media (max-width: 620px) {
  body { line-height: 1.68; }
  .nav { height: 4.5rem; }
  .brand__wort { display: none; }
  h1 { font-size: clamp(2.45rem, 11vw, 3.5rem); }
  h2 { font-size: clamp(1.85rem, 8vw, 2.6rem); }
  .homeHero, .pageHero { padding-top: 6.5rem; padding-bottom: 3rem; gap: 2.5rem; }
  .homeHero__copy, .pageHero__copy { padding-top: 2rem; }
  .homeHero__image img, .pageHero__image img { height: auto; }
  .quietStatement { padding-top: 7rem; padding-bottom: 7rem; }
  .quietStatement__text { font-size: 1.9rem; }
  .homeRoles, .homeAbout, .story, .facts, .diagnosis, .roleSection, .hours, .offers, .contactExpect { padding-top: 6.5rem; padding-bottom: 6.5rem; }
  .silkBreak, .contactImage { padding-top: 6rem; padding-bottom: 6rem; }
  .silkBreak img, .contactImage img { height: 75vw; }
  .silkBreak figcaption { gap: 1rem; }
  .portraitPair { padding-bottom: 7rem; }
  .imageGallery { grid-template-columns: 1fr; padding-bottom: 7rem; }
  .imageGallery__secondary { width: 82%; }
  .portraitPair__main img { height: auto; }
  .facts dl div { grid-template-columns: 1fr; gap: .2rem; }
  .roleSection__head { margin-bottom: 3rem; }
  .roleSystem__visual { min-height: 105vw; }
  .role { padding: 1.25rem; }
  .roleSystem__copy { padding: 2rem 1.25rem; }
  .hours__number strong { font-size: 30vw; }
  .offer { min-height: auto; }
  .offer > strong { margin-top: 2rem; }
  .widePortrait { padding-bottom: 6rem; }
  .widePortrait { padding-top: 6rem; }
  .widePortrait img { height: auto; }
  .contactPage { padding-top: 8rem; padding-bottom: 6rem; }
  .contactExpect__grid { gap: 0; }
  .contactExpect article { padding: 2rem 0; border-top: 1px solid var(--line); }
  .footer { grid-template-columns: 1fr; }
  .footer__meta { text-align: left; }
}

/* ── Eine einzige Musterebene ─────────────────────────────────────────
   Das Streiflicht liegt NUR auf dem Seitengrund. Die hellen Bahnen sind
   durchscheinend getönt (--soft-lasur), damit es hindurchscheint.
   ⚠️ Nie einer Fläche eine eigene Kopie des Musters geben: Sie würde ihr
   Raster an sich selbst verankern statt am Fenster, und an jeder Kante
   entstünde ein Versatz — der „Doppelschnitt" vom 03.09.
   Diese Regel muss nach allen `background:`-Kurzformen stehen, weil die
   Kurzform background-attachment mit zurücksetzt. */
body { background-attachment: fixed, fixed, fixed, fixed; }

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

@media (max-width: 900px) {
  body::after, main::before { display: none; }
  .homeHero, .pageHero { display: grid; grid-template-columns: 1fr; gap: 2rem; }
  .homeHero__copy, .pageHero__copy, .heroArtwork, .pageArtwork { grid-column: 1; }
  .heroArtwork, .pageArtwork { width: min(100%, 42rem); justify-self: center; }
  .homeHero__image { width: 51%; justify-self: auto; }
  .imageGallery { grid-template-columns: repeat(2, 1fr); min-height: auto; padding-top: 8rem; padding-bottom: 9rem; }
  .imageGallery__main, .imageGallery__secondary { grid-column: auto; width: 100%; transform: none; }
  .homeRoles { grid-template-columns: 1fr 1fr; min-height: auto; }
  .homeRoles__visual, .homeRoles__content { grid-column: auto; }
  .silkBreak { grid-template-columns: 1fr; min-height: auto; }
  .silkBreak figure, .silkBreak__copy { grid-column: 1; }
  .silkBreak__copy { max-width: 32rem; }
  .homeAbout { grid-template-columns: 1fr 1fr; }
  .homeAbout__copy, .homeAbout__image { grid-column: auto; }
}

@media (max-width: 620px) {
  .heroArtwork, .pageArtwork { height: 132vw; min-height: 31rem; }
  .homeHero__image { left: 1%; width: 57%; }
  .heroArtwork__object { width: 64%; }
  .heroArtwork__axis { display: none; }
  .pageArtwork .pageHero__image { width: 58%; }
  .pageArtwork__graphic { width: 62%; }
  .pageArtwork--roles .pageHero__image { width: 82%; }
  .pageArtwork__portrait { width: 31%; }
  .imageGallery { grid-template-columns: 1fr; }
  .imageGallery__secondary { width: 76%; justify-self: end; }
  .homeRoles, .homeAbout { grid-template-columns: 1fr; }
  .homeRoles__visual, .homeRoles__content, .homeAbout__copy, .homeAbout__image { grid-column: 1; }
  .homeAbout__image { width: 72%; justify-self: end; }
  .silkBreak { padding-top: 6rem; padding-bottom: 6rem; }
  .silkBreak img { height: 78vw; }
  .portraitPair__main, .facts__image { width: 84%; }
  .widePortrait { min-height: 115vw; }
  .widePortrait img { width: 67vw; }
  .contactPage__graphic { width: 95vw; right: -42%; }
}

/* ── Domaniai-Signatur ────────────────────────────────────────────────
   Pflicht auf jeder ausgelieferten Seite. Dezent in der Fusszeile, echter
   Link, aber rel="nofollow" — ein ueber viele Kundendomains verteilter
   gefolgter Fusslink ist nach Googles Spam-Richtlinie Linkspam. */
.footer__by { opacity: .55; }
.footer__by a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.footer__by a:hover, .footer__by a:focus-visible { opacity: 1; }

/* ── Abgestufte Signalfarbe ───────────────────────────────────────────
   Der Grundton RAL 4002 ist auf dem hellen Grund fuer kleine Versalzeilen
   zu schwach (4,15) und auf dem Anthrazit fast unsichtbar (1,68).
   Deshalb tragen kleine Schrift und dunkle Flaechen eigene Stufen. */
.eyebrow, .heroArtwork__code, .imageGallery figcaption { color: var(--signal-tief); }
.imageGallery .eyebrow,
.imageGallery figcaption,
.silkBreak .eyebrow, .silkBreak span,
.hours .eyebrow, .hours em, .hours strong { color: var(--signal-hell); }
.imageGallery::after { color: var(--signal-hell); }

/* Das Hochformat trieb den Abschnitt in die Hoehe. Beschnitt auf 4:5 macht
   ihn flacher, ohne die Bilder kleiner wirken zu lassen. */
.imageGallery__main img { aspect-ratio: 4/5; object-fit: cover; object-position: 50% 42%; }
.imageGallery__secondary img { aspect-ratio: 4/5; object-fit: cover; object-position: 50% 30%; }

/* Zwei neue Bausteine auf der Ueber-mich-Seite.
   .story__rand ist die persoenliche Randnotiz zu The Mentalist. Melanie
   ausdruecklich: als kleine Randnotiz, nicht als Aufhaenger — deshalb
   kleiner und gedaempft. */
.values__schluss { margin: 2.6rem 0 0; font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.15rem, 2vw, 1.6rem); line-height: 1.3; color: var(--ink); max-width: 34ch; }
.story__rand { margin-top: 2rem; padding-top: 1.1rem; border-top: 1px solid var(--line);
  font-size: .92rem; color: var(--muted); }

/* ── Runde 3: neue Bausteine ──────────────────────────────────────────

   .strategyDay      Der Strategy Day steht allein und vor den anderen.
                     Ihre Ansage: "Er ist das wichtige Ding davor" und
                     "immer der START, IMMER!!" — drei gleichrangige
                     Kacheln haetten das Gegenteil behauptet.
   .gegenueber       Person und Unternehmen nebeneinander. Ihre eigene
                     Idee: "koennte visuell sogar sehr stark
                     gegenuebergestellt werden."
   .wandel           Vorher und Nachher. Damit man die Veraenderung sieht
                     und nicht zuerst den Preis.
   .contactPage__buchung  Kein Formular mehr, sondern der Kalender.
*/

.strategyDay { position: relative; z-index: 2; margin: 0 0 3.4rem; padding: clamp(1.8rem, 4vw, 3rem);
  background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--orange); }
.strategyDay__dach { margin: 0 0 .9rem; font-size: .68rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--signal-tief); }
.strategyDay h3 { margin: 0; font-family: var(--serif); font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.9rem); line-height: 1.04; color: var(--ink); }
.strategyDay__satz { margin: 1rem 0 0; font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.1rem, 2.1vw, 1.45rem); line-height: 1.32; color: var(--ink); max-width: 38ch; }
.strategyDay__unter { margin: 1rem 0 0; max-width: 56ch; }
.strategyDay__fuss { margin: 1.8rem 0 0; display: flex; flex-wrap: wrap; gap: 1.4rem;
  align-items: center; justify-content: space-between; }
.strategyDay__fuss strong { font-family: var(--serif); font-weight: 700;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem); color: var(--ink); }
.strategyDay__fuss small { font-size: .62rem; letter-spacing: .04em; color: var(--muted); }
.offers__brueckensatz { position: relative; z-index: 2; margin: 0 0 2rem;
  font-size: .95rem; color: var(--muted); max-width: 54ch; }

.gegenueber { padding: clamp(4rem, 9vw, 8rem) var(--pad); }
.gegenueber__intro { max-width: 46rem; }
.gegenueber__paar { margin: 2.8rem 0 0; display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 5vw, 5rem); }
.gegenueber__spalte h3 { margin: 0 0 1rem; padding-bottom: .7rem;
  border-bottom: 1px solid var(--ink); font-family: var(--serif); font-weight: 600;
  font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.gegenueber__spalte ul { margin: 0; padding: 0; list-style: none; }
.gegenueber__spalte li { padding: .62rem 0; border-bottom: 1px solid var(--line); font-size: .98rem; }
.gegenueber__schluss { margin: 2.8rem 0 0; max-width: 60ch; }

.wandel { padding: clamp(4rem, 9vw, 8rem) var(--pad); }
.wandel__intro { max-width: 40rem; }
.wandel__liste { margin: 2.6rem 0 0; border-top: 1px solid var(--ink); }
.wandel__paar { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 4vw, 4rem);
  padding: 1.15rem 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.wandel__vor { margin: 0; color: var(--muted); }
.wandel__nach { margin: 0; color: var(--ink); font-weight: 400; }
.wandel__nach::before { content: "→ "; color: var(--orange); }

.contactPage__buchung { align-self: center; }
.contactPage__vorab { margin: 0 0 1.6rem; max-width: 46ch; }
.button--gross { min-width: 18rem; padding: 1.1rem 1.3rem; }

@media (max-width: 900px) {
  .gegenueber__paar, .wandel__paar { grid-template-columns: 1fr; }
  .wandel__paar { gap: .4rem; }
}

/* ── Tag und Nacht ────────────────────────────────────────────────────
   Ihr Wunsch vom 04.09.: "einmal ein bisschen heller und am Abend ab 17,
   18 Uhr ein bisschen dunkler ... hat bei uns, glaube ich, noch niemand."

   ⚠️ Der Grund wird dunkler, also steigt der Kontrast von Weiss dagegen.
   Ohne Nachziehen der zwei Regler wuerde das Streiflicht am Abend wieder
   laut. Auf RAL 7047 (200) hat Weiss 55 Stufen Abstand, auf dem
   Abendgrund (181) sind es 74 — Faktor 1,35, also beide Regler durch
   1,35 geteilt. */
:root[data-tag="abend"] {
  --paper: #b5b6b4;
  --soft: #c3c4c2;
  --bahnen-staerke: .110;
  --licht-staerke: .253;

  /* ⚠️ Nicht nur die zwei Regler muessen mit dem Grund nachziehen, sondern auch
     die Textfarben. Am 07.09.2026 gemessen: auf dem Tag-Grund #c8c8c7 hat
     --muted 4,62 · --signal-tief 4,53 — beide ueber der Lesbarkeitsgrenze 4,5.
     Auf dem Abend-Grund #b5b6b4 fielen dieselben Farben auf 3,80 und 3,73, also
     DARUNTER. Der Grund wurde dunkler, die Schrift nicht mit. Unten stehen
     dieselben Farbtoene, nur so weit abgedunkelt, dass sie ihren Tageskontrast
     wieder erreichen (4,64 · 4,58 · 4,19). */
  --muted: #424746;
  --signal-tief: #753040;
  --orange: #7e3445;
  /* Die Karten ziehen mit dem Grund mit, sonst leuchten sie abends heraus. */
  --karte-weiss: #e8e8e6;
  --karte-rosa: #d1bfc4;
  --karte-grau: #c6c6c4;
}

/* Solange keine Buchungsadresse hinterlegt ist, gibt der Knopf sich als
   Platzhalter zu erkennen. Ein Knopf, der ins Leere fuehrt, faellt sonst
   niemandem auf — bis eine Kundin darauf klickt. */
.button[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.kalenderFehlt { margin: .9rem 0 0; padding: .7rem .85rem; font-size: .78rem; line-height: 1.5;
  color: var(--signal-tief); background: var(--wein-flach, rgba(147,61,80,.08));
  border-left: 2px solid var(--orange); }
.kalenderFehlt code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .95em; }

/* ── Der Takt ─────────────────────────────────────────────────────────
   Melanies Grundrhythmus: ein Satz je Absatz, gestapelt. Gemessen am
   07.09.2026 an 74.776 Zeichen ihres geschriebenen Registers — 78 % ihrer
   Absaetze bestehen aus genau einem Satz, Median 10 Woerter.

   ⚠️ Warum ein Wrapper und keine Klasse auf dem <p>: Regeln wie
   `.homeRoles__content > p:not(.eyebrow)` haben hoehere Spezifitaet als jede
   `p.takt`-Regel und wuerden 2rem Abstand durchsetzen. Als Kind eines <div>
   greift der Kindselektor nicht mehr — ohne !important. */
/* ⚠️ :where() statt .takt — mit Absicht. Vier Takt-Bausteine sitzen auf einem
   Bauteil, das schon eine eigene Aussenkante hat (.quietStatement__note zentriert
   sich mit `margin: 3rem auto 0`, .contactPage__vorab, .gegenueber__schluss,
   .strategyDay__unter). Eine normale `.takt`-Regel steht spaeter in der Datei,
   haette dieselbe Spezifitaet und wuerde diese Aussenkanten ueberschreiben — die
   zentrierte Notiz waere linksbuendig gerutscht. `:where()` hat Spezifitaet null:
   der Takt greift, wo nichts anderes steht, und verliert ueberall sonst. */
:where(.takt) { margin: 2rem 0; }
.takt > p { margin: 0 0 .55rem; }
.takt > p:last-child { margin-bottom: 0; }
.takt > p.takt__schluss { margin-top: 1.4rem; }

/* Ihr trockener Nachsatz. Ihre Auflage dazu, woertlich: "Keine Witze, aber
   diese trockene Logik immer wieder ganz punktuell durchbrechen lassen."
   Punktuell heisst: hoechstens einer je Seite. */
.trocken { margin: 2.4rem 0 0; padding-left: 1.1rem;
  border-left: 2px solid var(--orange); color: var(--ink);
  font-size: .95rem; line-height: 1.5; max-width: 44ch; }
.quietStatement .trocken { margin: 2.4rem auto 0; text-align: left;
  max-width: 34rem; }

.calmCta > .takt { max-width: 35rem; margin: 2rem auto 2.5rem; color: var(--muted); }

/* ── Nachgezogen am 07.09.2026 ────────────────────────────────────────
   Melanie hatte gefragt, ob ihr Feedback vollstaendig umgesetzt wurde.
   Es war es nicht. Was einen Ort auf der Seite hatte, wurde abgearbeitet;
   ihr loses Rohmaterial vom 04.09. blieb in der Bibel liegen. Die Bausteine
   hier holen das nach.

   .fuehrung   Ihre Fuehrungsphilosophie. Ihre Anweisung vom 04.09.:
               "Leadership: Hier muss meine Fuehrungsphilosophie deutlich
               werden." Sie hat den Text mitgeliefert, er stand nirgends.
   .buehne     Speaking. "Was mir auf den Seiten fehlt: Speaking - Speakerin."
               Bewusst KEINE eigene Speaker-Seite (die kommt nach dem
               Livegang), sondern die Buehne als Beleg auf der Ueber-mich-
               Seite. Der Vortrag am 15.10. ist echt und bisher ungenutzt. */

.fuehrung { padding: clamp(4rem, 9vw, 7rem) var(--pad); background: var(--soft-lasur); }
.fuehrung__intro { max-width: 44rem; }
.fuehrung__satz { margin: 2.6rem 0 0; font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem); line-height: 1.28; color: var(--ink);
  max-width: 30ch; }
.fuehrung__reihe { margin: 2.4rem 0 0; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 3vw, 2.6rem); border-top: 1px solid var(--ink); padding-top: 1.6rem; }
.fuehrung__reihe > div > span { display: block; font-size: .66rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--signal-tief); margin-bottom: .5rem; }
.fuehrung__reihe > div > p { margin: 0; color: var(--muted); font-size: .95rem; }
.fuehrung__schluss { margin: 2.6rem 0 0; max-width: 56ch; }

.buehne { padding: clamp(3.5rem, 8vw, 6rem) var(--pad); display: grid;
  grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center;
  border-top: 1px solid var(--line); }
.buehne h2 { margin: .8rem 0 0; }
.buehne__termin { background: var(--white); border-left: 3px solid var(--orange);
  padding: clamp(1.2rem, 3vw, 1.8rem); }
.buehne__termin dt { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); }
.buehne__termin dd { margin: .3rem 0 1.1rem; color: var(--ink); font-size: 1rem; }
.buehne__termin dd:last-child { margin-bottom: 0; }
.buehne__termin dd strong { font-family: var(--serif); font-weight: 600; }

@media (max-width: 900px) {
  .fuehrung__reihe { grid-template-columns: 1fr; gap: 1.4rem; }
  .buehne { grid-template-columns: 1fr; }
}

/* Ihre Pointe unter der Bewegungs-Ueberschrift. Sie hat sie am 04.09. selbst
   an genau diese Stelle gesetzt: "ueberschrift: JEDE NEUE UNTERNEHMENSPHASE
   VERLANGT EINE NEUE ROLLE. und anschliessend vielleicht eine Pointe". */
.homeRoles__pointe { margin: 1.4rem 0 0; font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.05rem, 2vw, 1.35rem); line-height: 1.32; color: var(--ink);
  max-width: 34ch; }

/* Der Claim im Fussbereich. Melanie am 07.09.: „Grow beyond your role wuerde
   ich ehrlicherweise nicht im Header nehmen. Das ist der Claim und der ist
   voellig fein." Also bleibt er — an dem Ort, an den ein Claim gehoert. */
.footer__claim { margin: .9rem 0 0; font-family: var(--serif); font-weight: 500;
  font-size: 1.05rem; letter-spacing: .01em; color: var(--signal-hell); }

/* Ihr Nachsatz aus dem Kopftext vom 07.09.: „Was als Naechstes kommt, braucht
   nicht mehr von dir. Es braucht dich in einer anderen Rolle." Steht unter dem
   Fliesstext, eine Stufe staerker als dieser, aber unter der Ueberschrift. */
/* Der Verweis darunter braucht Luft, sonst klebt er am Nachsatz. */
.homeHero__nach + .textLink { margin-top: 2rem; }
.homeHero__nach { margin: 1.6rem 0 0; font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.02rem, 1.9vw, 1.3rem); line-height: 1.34; color: var(--ink);
  max-width: 36ch; }
/* Die Dachzeile ist mit „Business Mentoring fuer Unternehmer:innen · Wien und
   international" deutlich laenger geworden und braucht Umbruchraum. */
.homeHero__copy .eyebrow { max-width: 34ch; line-height: 1.5; }

/* ── Der Block mit ihrer grossen Frage ────────────────────────────────
   Melanie am 07.09.: „Da ist gerade alles drin, was ich irgendwann mal gut
   fand. Jeder einzelne Gedanke hat seine Berechtigung, aber zusammen verliert
   der Block genau die Klarheit und Kante."

   Er hat jetzt zwei Schlaege statt fuenf: ihre Frage, viel Raum, dann das
   Urteil. Das Urteil steht in --ink statt --muted, weil es ein Urteil ist und
   keine Fussnote — im gedaempften Grau war es auf ihrem Telefon kaum zu lesen. */
.quietStatement__urteil { max-width: 34rem; margin: 4rem auto 0; color: var(--ink);
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.15rem, 2.2vw, 1.6rem); line-height: 1.34; }
.quietStatement__urteil em { font-style: normal; color: var(--signal-tief); }
.homeRoles__content .trocken { margin: 2.2rem 0 2.4rem; }

/* Der Subtext ist jetzt ein Takt aus drei Saetzen, die aufeinander aufbauen.
   Er bleibt zentriert wie der Rest des Blocks. */
.quietStatement__urteil.takt { margin: 4rem auto 0; }
.quietStatement__urteil.takt > p { margin-bottom: .7rem; }

/* Die Hervorhebung in der grossen Frage folgt der Bildsprache der ganzen
   Seite: Bordeaux, nicht kursiv. Ueberall sonst steht <em> fuer den
   Farbakzent, nur hier waere es ploetzlich Schraegschrift gewesen. */
.quietStatement__text em { font-style: normal; color: var(--signal-tief); }

/* Ihr Schluss fuer die Bewegung, 07.09.: „Was als Naechstes kommt, braucht
   nicht mehr von dir. Es braucht dich in einer anderen Rolle." Sie nennt ihn
   „fluessiger" und „mehr Flow" — deshalb steht er als eigener Absatz nach dem
   Takt und nicht als dessen letzte Zeile. */
.homeRoles__schluss { margin: 2.2rem 0 0; font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.15rem, 2.1vw, 1.5rem); line-height: 1.32; color: var(--ink);
  max-width: 32ch; }
.homeRoles__schluss em { font-style: normal; color: var(--signal-tief); }

/* Die drei Rollen heissen seit 07.09. DO / LEAD / BUILD — ihre eigene Fassung
   vom 04.09., die sie jetzt bestaetigt hat, weil der Kopftext englisch ist.
   Das Label steht gross, der Satz darunter leise. */
/* ⚠️ Die Zeile ist ein Raster aus zwei Spalten: Nummer, dann Text. Mit dem
   neuen <small> waeren es drei Elemente in zwei Spalten gewesen — der Satz
   rutschte in eine eigene, sehr schmale Spalte und brach Wort fuer Wort um.
   Deshalb spannt der Text jetzt ueber die zweite Spalte, und small setzt sich
   darunter. */
.quietList li { grid-template-areas: "nr titel" ". satz"; }
.quietList li > span:first-child { grid-area: nr; }
.quietList strong { grid-area: titel; font-family: var(--serif); font-weight: 700;
  letter-spacing: .06em; font-size: 1rem; }
.quietList small { grid-area: satz; margin-top: .25rem; font-size: .9rem;
  letter-spacing: 0; color: var(--muted); }

/* ── Die Seiden-Bahn, rechte Seite ────────────────────────────────────
   Melanie am 07.09.: „der Satz eigentlich Ruhe und Groesse vertragen wuerde".
   Vorher standen rechts vier Signale untereinander: Dachzeile, grosser Satz,
   kleine orange Zeile, dazu der Zierbogen dahinter. Jetzt steht dort ein
   einziger Satz in zwei Zeilen, mit mehr Breite und mehr Luft. */
/* ⚠️ Die Spaltenangabe MUSS in einer Bedingung stehen. Ohne sie ueberschreibt
   diese Regel — sie steht weiter unten in der Datei — die Handy-Regel
   `@media (max-width:900px){ .silkBreak__copy { grid-column: 1 } }`, und der
   Satz stand am Telefon in einer Spalte, die bei Rasterfeld 9 beginnt. Er lief
   dann rechts aus dem Bild. Am 07.09. genau so passiert. */
@media (min-width: 901px) {
  .silkBreak__copy { grid-column: 9 / 13; align-self: center; padding-bottom: 0;
    padding-right: var(--pad); }
}
.silkBreak__copy p { margin: 0; font-size: clamp(1.85rem, 3.4vw, 3.9rem);
  line-height: 1.08; }
.silkBreak__copy p em { font-style: normal; color: var(--signal-hell); }

/* Ihr Beleg-Satz unter der Herkunft, 04.09.: „Meine Haltung zu Fuehrung und
   Organisation ist nicht am Whiteboard entstanden." Er steht eine Stufe ueber
   dem Fliesstext, weil er die Aussage des Abschnitts traegt. */
.homeAbout__satz { margin: 2rem 0 0; font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.1rem, 2vw, 1.4rem); line-height: 1.32; color: var(--ink);
  max-width: 34ch; }

/* Ihr Auftakt vor der Ueberschrift. Sie schreibt den Gedanken als EINEN Satz
   mit Doppelpunkt: „Ich habe lange genug auf Unternehmen geschaut, um zu
   wissen: Von einer Seite sieht man nie das ganze Bild." Der Doppelpunkt ist
   ihre Aufschlagbewegung (21,7 je 10.000 Zeichen in ihren Texten). Typografisch
   heisst das: Anlauf klein, Pointe gross. Der Satz bleibt einer. */
.homeAbout__auftakt { margin: 0 0 .9rem; color: var(--muted); font-size: 1rem;
  line-height: 1.5; max-width: 40ch; }
.homeAbout__copy .takt + .takt { margin-top: 2.2rem; }

/* ── Der Abschluss ────────────────────────────────────────────────────
   Nach Mr. Ds Strategie vom 07.09.: Die Leserin ist hier kaufbereit. Ein Satz,
   ein Knopf, ein Grund. Der Rahmensatz ersetzt die fehlenden Kundenstimmen
   durch Passungspruefung statt durch Beruhigung — beruhigen signalisiert
   Beduerftigkeit und kippt bei dieser Zielgruppe. */
.calmCta__rahmen { max-width: 40rem; margin: 2rem auto 2.6rem; color: var(--muted); }
.calmCta__unten { margin: 1.4rem 0 0; font-size: .82rem; letter-spacing: .02em;
  color: var(--muted); }

/* ── Mein Weg, nach ihrer Neufassung vom 07.09. ───────────────────────
   Ihre Kritik an der Vorfassung: „Extrem viele kurze Saetze ohne wirkliche
   Aussagekraft." Der Ein-Satz-Absatz ist ihr Rhythmus, aber er traegt nur,
   wenn der Satz etwas sagt. Hier stehen deshalb wieder ganze Gedanken —
   und hervorgehoben wird nur, was wirklich These ist.

   .story__these   Der Satz nach ihrem Doppelpunkt. Sie baut auf ihn hin,
                   also steht er auch so da.
   .story__fragen  Ihre vier Fragen. Sie wollte am 04.09. „die unbequemen
                   Fragen" unbedingt behalten — als Fliesstext gingen sie
                   unter, als Reihe sind sie die Signatur des Abschnitts. */
.story__these { margin: 1.8rem 0; font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.12rem, 1.9vw, 1.42rem); line-height: 1.34; color: var(--ink); }
.story__fragen { margin: 1.4rem 0 1.8rem; padding: 0 0 0 1.2rem; list-style: none;
  border-left: 2px solid var(--orange); }
.story__fragen li { margin: 0 0 .7rem; color: var(--ink); font-size: 1rem;
  line-height: 1.45; }
.story__fragen li:last-child { margin-bottom: 0; }

/* Ihre Schlusszeile spiegelt die drei Spaltenkoepfe: von innen · von aussen ·
   von der Spitze. Sie steht deshalb eine Stufe groesser als der Satz danach —
   man soll die Spiegelung sehen, bevor man sie liest. */
.values__spiegel { margin: 2.6rem 0 .8rem; font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.15rem, 2.1vw, 1.55rem); line-height: 1.3; color: var(--ink); }
.values__spiegel em { font-style: normal; color: var(--signal-tief); }

/* ── Drei Erkenntnisse, fuer die ich bezahlt habe ─────────────────────
   Melanies Neufassung vom 07.09., 22:01. Ihre Texte sind dreimal so lang wie
   die alten Kacheln. In drei schmalen Spalten waeren daraus Saeulen aus
   Einzelwoertern geworden — deshalb drei Zeilen ueber die volle Breite:
   Nummer und Quelle links, der Text rechts. Die Quelle ist bei ihr das,
   WOMIT sie bezahlt hat, und traegt damit den Abschnittstitel. */
.lehren { margin: 2.4rem 0 0; border-top: 1px solid var(--ink); }
.lehren__satz { display: grid; grid-template-columns: minmax(11rem, 18rem) 1fr;
  gap: clamp(1.4rem, 5vw, 5rem); padding: clamp(1.8rem, 4vw, 3rem) 0;
  border-bottom: 1px solid var(--line); }
.lehren__quelle { margin: 0; font-family: var(--serif); font-weight: 600;
  font-size: 1.02rem; line-height: 1.3; color: var(--ink); }
.lehren__quelle span { display: block; margin-bottom: .5rem; font-family: var(--sans);
  font-weight: 400; font-size: .68rem; letter-spacing: .16em; color: var(--signal-tief); }
.lehren__text > p { margin: 0 0 1rem; color: var(--muted); }
.lehren__text > p:last-child { margin-bottom: 0; }
.lehren__these { font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.1rem, 1.9vw, 1.4rem); line-height: 1.32; color: var(--ink) !important; }
@media (max-width: 900px) { .lehren__satz { grid-template-columns: 1fr; gap: 1rem; } }

/* ── Bekannt aus ──────────────────────────────────────────────────────
   Melanie am 08.09.: „ein schmalerer ‚Bekannt aus'-Block mit den Logos …
   die Logos als visueller Social Proof wirken wesentlich staerker als die
   reine Zahl der Veroeffentlichungen … wesentlich weniger Hoehe als aktuell,
   eher ein eleganter, reduzierter Credibility-Strip."

   Deshalb: kein Foto, keine Zahlen, eine Zeile Logos, eine Zeile Auszeichnung.
   Die Wand ist freigestellt (RGBA, schwarze Logos), sie steht direkt auf dem
   Seitengrund ohne Kasten.

   ⚠️ Am Handy waeren die Logos bei 390 px nur 33 px hoch und unleserlich.
   Deshalb behaelt die Wand dort ihre Mindestbreite und der Streifen laesst
   sich seitlich schieben — das ist die einzige Stelle der Seite, an der das
   vorkommt, und sie ist es wert. */
.bekannt { padding: clamp(3rem, 6vw, 4.5rem) var(--pad);
  border-top: 1px solid var(--line); }
.bekannt__rollt { margin: 1.6rem 0 0; overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; }
.bekannt__rollt::-webkit-scrollbar { display: none; }
.bekannt__wand { display: block; width: 100%; max-width: 62rem; height: auto;
  opacity: .82; }
.bekannt__preis { margin: 2rem 0 0; font-size: .95rem; color: var(--ink); }
.bekannt__preis span { display: inline-block; margin-right: .9rem;
  font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--signal-tief); }
.bekannt__preis strong { font-family: var(--serif); font-weight: 700; }
@media (max-width: 760px) { .bekannt__wand { min-width: 42rem; } }

/* Ihr Anlauf vor der Zusage. Melanie am 08.09.: „mit einer kleinen Geschichte
   und einem Bild im Kopf abschliessen" — der Strand ist das Bild. Die Ablehnung
   laeuft an, die Zusage steht gross. Ihre eigene Bewegung. */
.calmCta__anlauf { max-width: 44rem; margin: 0 auto 1.6rem; color: var(--muted);
  font-size: 1rem; line-height: 1.55; }

/* Steht der Knopf direkt hinter der Ueberschrift, klebt er daran. Frueher lag
   immer ein Absatz dazwischen, der den Abstand mitbrachte. */
.calmCta h2 + .button { margin-top: 2.6rem; }

/* ── Die Navigation ───────────────────────────────────────────────────
   Melanie am 08.09.: „Im Gegensatz zur Seite wirkt es noch so klein und leise.
   Vielleicht in Grossbuchstaben und minimal groesser? … Und das LET'S TALK
   vielleicht in einen farbigen Kasten? Der die Farbe veraendert, wenn du mit
   der Maus hin drueckst?"

   Versalien brauchen Laufweite, sonst kleben sie. Und sie brauchen etwas mehr
   Groesse, weil Versalien optisch kleiner wirken als Gemischtschrift. */
.menu a { letter-spacing: .1em; text-transform: uppercase; font-weight: 500; }
/* ⚠️ Die Groesse nur am Desktop anfassen. Ohne den Schutz steht diese Zeile
   NACH dem Handy-Block weiter oben und hat dort das grosse Menue
   (clamp(1.8rem, 6vw, 3.2rem)) auf .82rem zusammengeschrumpft. Melanies
   „minimal groesser" galt der Leiste am Bildschirm, nicht dem Handy-Menue. */
@media (min-width: 901px) { .menu { font-size: .82rem; } }

/* Der farbige Kasten. Ruhezustand Bordeaux, beim Darueberfahren wechselt er
   auf das Tiefdunkel der Marke — Farbwechsel, wie sie es wollte, ohne dass die
   Kopfzeile dabei unruhig wird. */
/* ⚠️ Muss `.menu a.menu__cta` heissen, nicht `.menu__cta`. Die Regel
   `.menu a { color: var(--muted) }` hat hoehere Spezifitaet und hat den Text
   im Ruhezustand grau auf Bordeaux stehen lassen — praktisch unlesbar. Beim
   Darueberfahren stimmte es, weil dort schon der laengere Selektor stand.
   Gemessen: Weiss auf #933d50 hat Kontrast 6,9 und ist damit gut lesbar. */
.menu a.menu__cta { background: var(--orange); border-color: var(--orange);
  color: #fff; gap: 1rem; transition: background .25s, border-color .25s, color .25s; }
.menu__cta:hover, .menu a.menu__cta:hover { background: var(--ink);
  border-color: var(--ink); color: #fff; }
.menu a.active.menu__cta { color: #fff; }

/* Im aufgeklappten Menue am Handy steht der Kasten fuer sich, mittig. */
@media (max-width: 900px) {
  .menu__cta { justify-content: center; width: fit-content; }
}

/* Mentoring-Kopf, Melanies Fassung vom 08.09.2026, 10:32. Sie hat die zwei
   Zeilen in Versalien getippt und den Absatz darunter normal — innerhalb
   derselben Nachricht. Das ist eine Entscheidung, keine Tippgewohnheit, und
   entspricht der gestapelten Versalzeile aus ihrem Brandbooklet. */
.pageHero--mentoring h1 { text-transform: uppercase; letter-spacing: -.005em; }

/* ⚠️ `.silkBreak__copy p` (weiter oben) setzt Rand und Schriftgroesse fuer JEDEN
   Absatz in diesem Block — und hat damit auch das Etikett erwischt: „DAS ZIEL"
   stand dreimal zu gross und klebte an der Zeile darunter. Melanies Bitte vom
   08.09., 10:34: alle Etiketten gleich in Groesse und Schrift, nur die Farbe
   darf sich unterscheiden. Hier wird die Ausnahme zurueckgenommen. */
.silkBreak__copy p.eyebrow { margin: 0 0 1.4rem; font-family: var(--sans);
  font-size: .73rem; font-weight: 400; letter-spacing: .12em; line-height: 1.5; }

/* Der Satz, den Melanie am 08.09.2026, 10:40 selbst herausgehoben hat:
   „Star des Blocks ist fuer mich: Dann wird aus deiner groessten Staerke
   schnell eine Abhaengigkeit." Also steht er auch so da — allein, in der
   Displayschrift, in Bordeaux. Ein einzelner Satz als Akzent ist genau das,
   was ihre Farbregel meint: „Ein einzelnes Wort. Eine Linie. Ein kleiner
   Akzent." Keine Flaeche, kein Kasten. */
.diagnosis__star { margin: 2.6rem 0; font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.35rem, 2.3vw, 1.85rem); line-height: 1.28; color: var(--orange); }

/* ───── Rollen-Block, Melanies Rueckmeldung vom 08.09.2026, 10:43 ─────
   „Ich wuerde den Text vielleicht minimal hochschieben und den Block etwas
   kleiner machen … Bei meinem Laptop geht sich das auch fast nicht aus. Ich
   kann 01 nicht ganz lesen, wenn ich den Text unten sehen will."

   Gemessen auf 1440 x 780: der Block war 812 px hoch. Er passte also auf
   keinen normalen Laptop-Bildschirm, und wer den Text unten lesen wollte,
   hatte 01 schon aus dem Bild geschoben.

   Zwei Ursachen, beide behoben:

   1. Das Bild links hat die Hoehe bestimmt, nicht der Inhalt. Es lag mit
      `width:100%; height:100%` im Fluss; ohne feste Elternhoehe wirkt
      `height:100%` wie `auto`, also stand es in seinem eigenen Seitenverhaeltnis
      da und hat die ganze Zeile auf 810 px aufgezogen. Absolut positioniert
      zaehlt es nicht mehr mit und fuellt trotzdem die Flaeche.
   2. `justify-content: space-between` hat den Text an den unteren Rand
      gedrueckt — daher der weite Weg zwischen 01/02/03 und der Erklaerung.
      Genau das hat sie beschrieben.

   Die Mindesthoehe haelt den Block ruhig: die drei Rollentexte sind
   unterschiedlich lang, ohne sie wuerde die Seite bei jedem Wechsel springen. */
.roleSystem { min-height: 36rem; }
.roleSystem__visual img { position: absolute; inset: 0; }
.roleSystem__content { justify-content: flex-start; }
.role { padding: 1.2rem 2rem; }
.roleSystem__copy { padding: 1.9rem 2rem 2.2rem; }

/* Ihre Pointe im 780-Block, Wortlaut vom 08.09.2026, 11:13:
   „Erfolg sollte dir Moeglichkeiten schaffen. Kein goldenes Hamsterrad."
   Das ist das Bild, auf das der ganze Block hinlaeuft — also steht es auch
   so da und nicht als vierter Absatz in der Reihe.
   ⚠️ `.hours__copy > p:last-child { color: #aaa }` weiter oben wuerde es
   sonst ins Grau nehmen; deshalb hier die Farbe ausdruecklich. */
.hours__pointe { margin: 2.6rem 0 0; font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.15rem, 1.9vw, 1.5rem); line-height: 1.3; color: white; }
.hours__copy > p.hours__pointe:last-child { color: white; }

/* ───── „Der Kern", Melanies Kritik vom 08.09.2026, 11:56 ─────
   „Die Idee des Blocks ist sehr stark, aber die aktuelle Ausfuehrung ist mir
   zu voll. Wir haben hier eine grosse These, eine Frage und dann zwei Listen.
   Ich finde, dass dadurch ausgerechnet ‚Der Kern' seine Klarheit verliert.
   Die Keywords brauchen wir wahrscheinlich fuer SEO und Co. Vielleicht kann
   man das nur technisch ein bisschen feiner loesen? Zum Aufklappen oder du
   hast eine andere Idee?"

   Die andere Idee: nicht verstecken, sondern leise stellen. Aus zwei Listen
   mit vierzehn Zeilen werden zwei Fussnotenzeilen. Die Woerter stehen alle
   noch da — fuer Suchmaschinen wie fuer die KI-Antworten zaehlt der sichtbare
   Text mehr als einer, der hinter einem Klick liegt — aber sie nehmen dem
   Kernsatz nicht mehr die Buehne.

   Ein echtes Aufklappen waere die Alternative. Es kostet einen Klick und ein
   Bedienelement auf einer Seite, die sonst fast keine hat. Falls sie es
   trotzdem will: <details>/<summary> um dieselben Listen, sonst nichts. */
.stichworte { margin: 2.4rem 0 0; padding-top: 1.2rem; max-width: 64rem;
  border-top: 1px solid var(--line); display: grid; gap: .75rem; }
.stichworte > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .9rem; }
.stichworte h3 { margin: 0; min-width: 7.5rem; color: var(--orange); font-size: .68rem;
  font-weight: 400; letter-spacing: .12em; text-transform: uppercase; }
.stichworte ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap;
  gap: .1rem .55rem; color: var(--muted); font-size: .88rem; line-height: 1.6; }
.stichworte li:not(:last-child)::after { content: " ·"; color: var(--line); }
@media (max-width: 620px) { .stichworte h3 { min-width: 100%; } }

/* ───── „Von hier nach dort", Melanies Auftrag vom 08.09.2026, 12:04 ─────
   „Mir sind auf der Mentoring-Seite mittlerweile zu viele Bloecke sehr aehnlich
   aufgebaut – viel Text, horizontale Linien und klassische Gegenueberstellungen.
   … Also weniger Tabelle und staerker eine visuelle Transformation bzw. Bewegung
   von einem Zustand in den anderen. Mir waere wichtig, dass trotzdem auf einen
   Blick erkennbar bleibt: Das ist heute → das wird moeglich."

   Die alte Fassung war buchstaeblich eine Tabelle: zwei Spalten, sieben Zeilen,
   Trennlinien dazwischen. Genau das ist weg.

   Was stattdessen die Bewegung traegt:

   1. Der SPRUNG statt der Spalte. „Heute" steht klein und grau links, „moeglich"
      steht darunter, eingerueckt, gross und in der Displayschrift. Siebenmal
      derselbe Schritt nach rechts unten — das Auge liest eine Richtung, keine
      Tabelle.
   2. Der STAB. Eine durchgehende bordeauxfarbene Linie laeuft senkrecht durch
      alle sieben Schritte, und bei jedem zweigt ein kurzer Sporn nach rechts ab.
      Das ist derselbe Stab, der in der Skulptur durch die Ringe geht — ihr
      „mit unseren abstrakten Elementen arbeiten", in CSS gezeichnet statt als
      zweites Foto danebengestellt.
   3. Die LEGENDE. „Von hier" und „Nach dort" stehen genau dort, wo die beiden
      Zeilenarten anfangen. Damit erklaert sich die Ordnung durch ihre Position,
      ohne Tabellenkopf. Das ist ihr „auf einen Blick erkennbar".
   4. Das BILD steht rechts und BLEIBT STEHEN, waehrend die Schritte daran
      vorbeilaufen. Der einzige Block der Seite, in dem sich beim Scrollen
      wirklich etwas bewegt. Bewusst rechts und bewusst haftend — der
      Rollen-Block hat sein Bild links und starr, sonst saehen sich die zwei
      wieder aehnlich, und genau das hat sie kritisiert. */
.wandel__buehne { margin: 3rem 0 0; display: grid; grid-template-columns: 1fr minmax(0, 24rem);
  gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }

/* Die Legende zeigt die Ordnung, statt sie zu behaupten: zwei Zeilen im
   selben Versatz wie die Schritte darunter, die zweite mit demselben Sporn.
   ⚠️ Nebeneinander ging nicht — der Versatz eines Schritts ist schmaler als
   das Wort „Von hier", die Marken haetten sich ueberlappt statt zu fluchten. */
.wandel__legende { margin: 0 0 1.8rem; padding-left: clamp(2.6rem, 5vw, 4.2rem);
  color: var(--muted); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
  line-height: 1.9; }
.wandel__legende span { display: block; }
.wandel__legende span:last-child { position: relative; color: var(--orange);
  margin-left: clamp(1.4rem, 3vw, 2.8rem); }
.wandel__legende span:last-child::before { content: ""; position: absolute; top: .62em;
  left: calc(-1 * clamp(1.4rem, 3vw, 2.8rem)); width: clamp(.8rem, 1.8vw, 1.7rem);
  height: 1px; background: var(--orange); }

.schritte { margin: 0; padding: 0 0 0 clamp(2.6rem, 5vw, 4.2rem); list-style: none;
  position: relative; }
/* Der Stab. Laeuft nur so weit, wie Schritte da sind — er endet mit dem letzten,
   nicht am Rand des Kastens. */
.schritte::before { content: ""; position: absolute; left: clamp(1.5rem, 3vw, 2.4rem);
  top: .45rem; bottom: 3.4rem; width: 1px;
  background: linear-gradient(var(--orange) 0%, var(--orange) 82%, transparent 100%); }

.schritt { position: relative; padding: 0 0 clamp(2.2rem, 3.6vw, 3.2rem); }
.schritt:last-child { padding-bottom: 0; }
.schritt__nr { position: absolute; left: calc(-1 * clamp(2.6rem, 5vw, 4.2rem)); top: .15rem;
  color: var(--muted); font-size: .62rem; letter-spacing: .1em; }
.schritt__hier { margin: 0; max-width: 38ch; color: var(--muted); font-size: .98rem;
  line-height: 1.55; }
.schritt__dort { position: relative; margin: .55rem 0 0 clamp(1.4rem, 3vw, 2.8rem);
  max-width: 40ch; font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.12rem, 1.8vw, 1.48rem); line-height: 1.32; color: var(--ink); }
/* Der Sporn: die Abzweigung vom Stab in den neuen Zustand. */
.schritt__dort::before { content: ""; position: absolute; top: .68em;
  left: calc(-1 * clamp(1.4rem, 3vw, 2.8rem)); width: clamp(.8rem, 1.8vw, 1.7rem);
  height: 1px; background: var(--orange); }

/* ⚠️ Vorher `top: 7rem` — das Bild klebte oben unter der Kopfzeile.
   Fabio am 08.09.2026: „ich moechte, dass sich das Bild in der Mitte stoppt,
   wenn ich scrolle, solange der Text nicht weg ist."
   Mit `top: 50vh` und dem halben Bild als Gegenversatz steht es genau in der
   Mitte des Bildschirms, solange die sieben Schritte laufen. Danach loest es
   sich wie bisher. Der Zaehler haengt am Bild und wandert mit. */
.wandel__bild { margin: 0; position: sticky; top: 50vh;
  transform: translateY(-50%); align-self: start; }
.wandel__bild img { display: block; width: 100%; height: clamp(26rem, 46vw, 38rem);
  object-fit: cover; }

@media (max-width: 900px) {
  .wandel__buehne { grid-template-columns: 1fr; gap: 2.5rem; }
  /* Auf dem Handy waere ein haftendes Bild neben nichts — es kommt vor die
     Schritte und bleibt stehen, wo es steht. */
  .wandel__bild { position: static; grid-row: 1; }
  .wandel__bild img { height: 46vw; }
}

/* ───── Die drei Angebote, Melanies Auftrag vom 08.09.2026, 12:15 ─────
   „Die Ueberschriften wuerde ich schon wieder ident machen. Die Unterscheidung
   und abhebung vom Strategy Day zum Mentoring finde ich gut .. Obwohl das
   Mentoring natuerlich wieder untergeht. Ich kann mich da nicht richtig
   entscheiden .. und wuerde mich gerne auf DICH verlassen. Vielleicht
   nebeneinander, in unterschiedlichen Farben, weiss, rosa, grau, ... damit es
   sich farblich unterscheidet .."

   Drei Entscheidungen, die sie mir ueberlassen hat:

   1. DER STRATEGY DAY BLEIBT ALLEIN UND VORNE. Sie hat frueher gesagt:
      „Immer der START, IMMER!!" — und heute, dass ihr die Abhebung gefaellt.
      Ihn zu den anderen zu stellen wuerde genau das aufloesen.
   2. DIE UEBERSCHRIFTEN SIND JETZT IDENT. Vorher stand „Strategy Day" in der
      Displayschrift bei 2,9 rem und „Business Mentoring" in der Grundschrift
      bei 1,25 rem — daran ist das Mentoring untergegangen, nicht an der Farbe.
      Alle drei heissen jetzt gleich: Displayschrift, Gewicht 700, dieselbe
      Groesse.
   3. DIE FARBEN TRENNEN, DIE POSITION ORDNET. Weiss fuer den Strategy Day,
      Rosa fuer sechs Monate, Grau fuer zwoelf. Alle drei heller als der
      Seitengrund.

   ⚠️ `.offerGrid` stand auf `repeat(3, 1fr)`, es gibt aber nur zwei Karten.
   Die dritte Spalte blieb leer, und die zwei Angebote standen auf zwei
   Dritteln der Breite gequetscht neben einem Loch. Das war der zweite Grund,
   warum das Mentoring unterging. */
.offerGrid { grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2vw, 1.6rem);
  background: transparent; border: 0; box-shadow: none; }
.offer { background: var(--karte-grau); border: 1px solid var(--line);
  border-top: 3px solid var(--line); }
.offer:first-child { background: var(--karte-rosa); border-top-color: var(--orange); }

/* Identische Ueberschriften ueber alle drei Angebote. */
.strategyDay h3, .offer h3 { margin: 0; font-family: var(--serif); font-weight: 700;
  font-size: clamp(1.55rem, 2.9vw, 2.2rem); line-height: 1.06; color: var(--ink); }
.offer h3 { margin: 1.6rem 0 1rem; }
.strategyDay { background: var(--karte-weiss); }

/* Die kleine Marke oben („Danach" / „Oder") bekommt dieselbe Form wie das
   „DER ANFANG. IMMER." des Strategy Day — sonst sind es wieder drei Sprachen. */
.offer > span { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--signal-tief); }

/* ───── „Der Weg", Fabios Auftrag vom 08.09.2026 ─────
   „Die Preise kannst du rausnehmen … Den Satz ‚wenn er nicht zufrieden ist und
   so' nehmen wir auch weg, aber ich moechte dort etwas haben, wo wir dem Kunden
   den Weg zeigen: Was passiert, wenn er mit uns arbeitet?"

   Der Abschnitt sitzt genau dort, wo vorher der Anrechnungssatz stand: nach dem
   Strategy Day, vor den zwei Laufzeiten. Also an der Stelle, an der jemand
   wissen will, worauf er sich einlaesst.

   ⚠️ Bewusst OHNE grosse Ueberschrift. Zwei Zeilen darueber steht schon
   „Kein Curriculum. Echte Bewegung." — eine zweite Schlagzeile im selben
   Abschnitt haette mit ihr konkurriert.

   ⚠️ Und bewusst NICHT im Muster von „Von hier nach dort". Melanie hat heute
   ausdruecklich gesagt, ihr seien zu viele Bloecke gleich aufgebaut. Der Weg
   laeuft deshalb WAAGRECHT: drei Stationen auf einer durchgehenden Linie,
   von links nach rechts gelesen. Ein Weg, kein Stapel. */
.weg { margin: 0 0 3.4rem; }
.weg__lead { margin: .9rem 0 0; max-width: 52ch; color: var(--ink); }
.weg__reihe { margin: 2.8rem 0 0; padding: 0; list-style: none; position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); }
/* Die Linie, auf der die drei Stationen sitzen. */
.weg__reihe::before { content: ""; position: absolute; top: .42rem; left: 0; right: 0;
  height: 1px; background: linear-gradient(90deg, var(--orange), var(--line)); }
.weg__reihe li { position: relative; padding-top: 1.9rem; }
.weg__nr { position: absolute; top: 0; left: 0; padding-right: .6rem;
  background: var(--paper); color: var(--orange); font-size: .62rem; letter-spacing: .14em;
  line-height: 1; }
.weg__reihe strong { display: block; font-family: var(--serif); font-weight: 600;
  font-size: clamp(1rem, 1.5vw, 1.16rem); line-height: 1.3; color: var(--ink); }
.weg__reihe p { margin: .55rem 0 0; color: var(--muted); font-size: .95rem; line-height: 1.6; }
.weg__pointe { margin: 2.4rem 0 0; max-width: 56ch; font-family: var(--serif);
  font-weight: 500; font-size: clamp(1.05rem, 1.7vw, 1.32rem); line-height: 1.34;
  color: var(--ink); }
@media (max-width: 760px) {
  /* Auf dem Handy wird aus dem Weg nach rechts einer nach unten. */
  .weg__reihe { grid-template-columns: 1fr; gap: 1.8rem; }
  .weg__reihe::before { top: .42rem; bottom: 1rem; left: .05rem; right: auto;
    width: 1px; height: auto; background: linear-gradient(var(--orange), var(--line)); }
  .weg__reihe li { padding-top: 0; padding-left: 2.6rem; }
  .weg__nr { top: .1rem; padding: .25rem 0; }
}
.weg__frage { margin: 1.4rem 0 0; max-width: 52ch; font-family: var(--serif);
  font-weight: 500; font-size: clamp(1.05rem, 1.7vw, 1.32rem); line-height: 1.34;
  color: var(--ink); }
.weg__rhythmus { margin: 2.2rem 0 0; max-width: 58ch; color: var(--muted);
  font-size: .95rem; line-height: 1.65; }

/* Die zwei Mentoring-Karten, Melanies Fassung vom 08.09.2026, 12:23.
   Sie hat die beiden Laufzeiten an die zwei Zeilen ihres Seitenkopfs gebunden:
   sechs Monate = „Grow Beyond Your Role.", zwoelf = „Build Beyond Yourself."
   Damit schliesst die Seite ihren eigenen Kreis, und die Zeile traegt hier
   dieselbe Bedeutung wie oben — also steht sie auch in derselben Schrift.
   ⚠️ Die kleinen Marken „Danach" und „Oder" sind entfallen. Ihre Struktur ist
   Name → Laufzeit + Zeile → Text; eine dritte Beschriftung darueber waere
   genau das „zu voll", das sie heute mehrfach kritisiert hat. Die Reihenfolge
   sagen jetzt die Zahlen. */
.offer h3:first-child { margin-top: 0; }
/* ⚠️ Muss `.offer p.offer__dach` heissen. `.offer p { margin: 0 }` weiter oben
   hat dieselbe Spezifitaet und stand spaeter — die Zeile klebte dadurch am
   Absatz darunter. */
.offer p.offer__dach { margin: .7rem 0 1.4rem; font-family: var(--serif);
  font-weight: 500; font-size: clamp(.98rem, 1.4vw, 1.1rem); line-height: 1.35;
  color: var(--signal-tief); }
/* ⚠️ Der Knopf sass frueher unter dem Preis, und `margin-top: auto` klebte am
   Preis. Mit den Preisen ist auch das Abstandhalten verschwunden — der Link
   klebte am Fliesstext. Jetzt haelt er selbst den Boden. */
.offer .textLink { margin-top: auto; padding-top: 2rem; }

/* Melanies Statement neben dem Portraet, Fassung vom 08.09.2026, 12:25:
   „Dein Unternehmen soll dich nicht ueberall brauchen. Sondern dort, wo nur du
   den Unterschied machst."
   ⚠️ Es lag in der Sammelregel fuer Bildunterschriften: 0,68 rem, grau,
   gesperrt — also in der Form eines Fotonachweises. Ein Statement, das so
   aussieht wie eine Quellenangabe, liest niemand. Jetzt steht es in der
   Displayschrift und in Textfarbe.
   ⚠️ Sie hat dazu gesagt: „brauch ich aber nicht zwingend einen Block, wo nur
   ein Bild von mir ist, aber ich wuerde dann einfach mit den neuen Bildern
   arbeiten und dann das Statement einfach drueberlegen … mal sehen, wie die
   Bilder dann aussehen." Das Darueberlegen wartet also auf das neue Shooting.
   Bis dahin soll der Satz wenigstens wie ein Satz aussehen. */
.widePortrait figcaption { margin-top: 1.8rem; max-width: 34rem;
  font-family: var(--serif); font-weight: 500; font-size: clamp(1.15rem, 1.9vw, 1.55rem);
  line-height: 1.32; letter-spacing: normal; color: var(--ink); }

/* ⚠️ Die riesigen Buchstaben und Zahlen im Hintergrund sind raus.
   Fabio am 08.09.2026: „buchstaben muss man und die Nummer muss man vom
   Hintergrund entfernen." Betroffen waren drei Stellen: das „M" hinter dem
   Ueber-mich-Block, das „MP" hinter der Bildergalerie und die „03" hinter den
   drei Rollen. Sie standen als sehr helle Wasserzeichen da und haben mit dem
   diagonalen Streiflicht des Grundes gekaempft — dabei entsteht der Eindruck
   eines Fehlers, nicht einer Gestaltung.
   Die Regeln bleiben mit `content: none` stehen, damit sichtbar ist, dass es
   eine Entscheidung war und keine Luecke. Wer sie zurueckholen will, findet
   hier die Stelle. */

/* ═════ BILDPLAN — jedes Foto von Melanie ist ein Platzhalter ═════
   Fabio am 08.09.2026: „ich möchte eh, dass alle Bilder von Melanie
   Platzhalter sind. Die muss man allen eine Nummer geben, damit wir, wenn wir
   das Fotoshooting geben, wissen, welche wir setzen müssen."

   Sieben Plaetze, sieben Nummern. Was jedes Bild zeigen soll, steht in
   `docs/bilder/bildplan.md` — dort liegt auch die Liste fuer die Fotografin.

   ⚠️ VOR DEM LIVEGANG: die naechste Regel auf `display: none` setzen.
   Das ist der einzige Handgriff; die Nummern verschwinden dann ueberall. */
.bildnr { position: absolute; z-index: 6; left: 0; top: 0; padding: .3rem .55rem;
  background: var(--orange); color: #fff; font-family: var(--sans); font-size: .56rem;
  font-weight: 400; letter-spacing: .16em; text-transform: uppercase; line-height: 1.2;
  pointer-events: none; }
/* Die Nummer sitzt am Bild, also braucht der Rahmen einen Bezugspunkt.
   ⚠️ HIER STAND EINE SAMMELREGEL FUER SIEBEN KLASSEN — und die war ein Fehler.
   Drei dieser Rahmen sind bereits `position: absolute`: der Kopf der Startseite
   (.homeHero__image), der Kopf der Ueber-mich-Seite (.pageArtwork
   .pageHero__image) und das kleine Portraet auf der Mentoring-Skulptur
   (.pageArtwork__portrait). Meine Regel stand spaeter in der Datei und hat
   ihr `absolute` auf `relative` gedreht. Ergebnis: Die drei Kompositionen aus
   Kunst und Portraet sind auseinandergefallen, das Portraet der Startseite
   rutschte ganz nach rechts aus dem Bild. Fabio hat es gesehen, bevor Melanie
   es gesehen hat.
   Die anderen drei (.homeAbout__image, .portraitPair__main, .widePortrait)
   hatten laengst `relative`. Es brauchte also NUR die eine neue Klasse. */
.kunstPaar__portrait { position: relative; }
/* Das Bauteil steht jetzt an drei Stellen, deshalb der neutrale Name:
   „Mein Weg" und „Wie ich arbeite" auf der Ueber-mich-Seite, „Die unbequeme
   Wahrheit" auf der Mentoring-Seite. Ueberall dieselbe Form — Melanie hat am
   08.09. ausdruecklich Einheitlichkeit verlangt. */

/* ───── „Mein Weg": Kunst und Portraet ─────
   Die Leerstelle neben ihrer Geschichte war rund 780 px hoch.
   Was jetzt dort steht, ist keine Fuellung, sondern eine Antwort auf den Text:
   Die Spirale windet sich ENG um den Stab — und die Ueberschrift darueber
   heisst „Nicht falsch. Zu eng." Das Portraet liegt darauf, weil ihre
   Geschichte genau da anfaengt, wo die enge Rolle aufhoert. */
.kunstPaar { position: relative; margin: 3rem 0 0; max-width: 30rem; }
.kunstPaar__linie { position: absolute; z-index: 1; left: 2.5rem; top: 1.6rem;
  right: -1.2rem; bottom: 3.5rem; border: 1px solid var(--orange); opacity: .55; }
.kunstPaar__kunst { position: relative; z-index: 2; margin: 0; width: 78%; }
.kunstPaar__kunst img { display: block; width: 100%; height: auto; }
.kunstPaar__portrait { position: relative; z-index: 3; margin: -22% 0 0 auto; width: 56%;
  border: .5rem solid #fff; box-shadow: 0 1.6rem 4rem rgba(25,25,25,.16); }
.kunstPaar__portrait img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) {
  .kunstPaar { margin: 2.4rem 0 0; max-width: 26rem; }
}

/* Ihre Frage auf der Kontaktseite, Fassung vom 08.09.2026, 14:31.
   „Was passiert in diesem Gespräch?" stand vorher als normaler Absatz und ging
   zwischen den anderen unter. Sie stellt der Leserin damit deren eigene Frage
   und beantwortet sie in den drei Absätzen darunter — das ist ihre häufigste
   Bewegung überhaupt. Also steht die Frage jetzt auch wie eine. */
.contactPage__frage { margin: 0 0 1.2rem; font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.05rem, 1.7vw, 1.3rem); line-height: 1.32; color: var(--ink); }

/* ⚠️ Foto 07 stand als einziges nicht an seinem Bild, sondern 295 px daneben.
   `.widePortrait` ist ein Raster mit zentrierten Kindern — die Nummer wurde
   also gegen die ganze breite Flaeche positioniert, nicht gegen das Bild.
   Der Halter umschliesst jetzt genau das Bild. Die leichte Drehung wandert
   vom Bild auf den Halter, damit Marke und Bild dieselbe Schraeglage haben. */
.widePortrait .bildHalter { position: relative; z-index: 2; display: inline-block;
  line-height: 0; transform: rotate(-1deg); }
.widePortrait .bildHalter img { transform: none; }

/* ───── Das Bild lebt mit, statt nur stehenzubleiben ─────
   Fabio am 08.09.2026: „was mir jetzt da nicht gefällt, ist, dass, wenn ich raus
   scrolle, das Bild stehen bleibt und der Rest vom Text noch wandert. Könnte man
   da nicht mit dem Bild auch einen grafischen Effekt machen, sodass es etwas wie
   ein Karussell ist, wo ein bisschen mehr Leben … gibt?"

   Der Effekt ist bewusst AN DEN INHALT GEBUNDEN, nicht dekorativ:
   · Das Bild zoomt und wandert langsam, waehrend die sieben Schritte vorbeiziehen.
   · Eine bordeauxfarbene Schiene an seiner Kante fuellt sich von 0 auf 100 —
     derselbe Stab wie links bei den Schritten, nur waagrecht gedacht.
   · Ein Zaehler springt von 01 auf 07 und zeigt, bei welchem Schritt man ist.
   · Der Schritt, der gerade dran ist, wird dunkler und sein Sporn laenger.
   Damit gehoeren Bild und Text zusammen, statt nebeneinanderherzulaufen. */
.wandel__bild { overflow: visible; }
.wandel__rahmen { display: block; overflow: hidden; }
.wandel__bild img { transform: scale(var(--zoom, 1)) translateY(var(--drift, 0));
  transform-origin: 50% 40%; will-change: transform; }

.wandel__schiene { position: absolute; z-index: 2; left: -1.1rem; top: 0; bottom: 0;
  width: 2px; background: var(--line); }
.wandel__fuellung { display: block; width: 100%; height: var(--fortschritt, 0%);
  background: var(--orange); transition: height .12s linear; }

.wandel__zaehler { display: flex; align-items: baseline; gap: .45rem;
  margin-top: .9rem; color: var(--muted); font-size: .62rem; letter-spacing: .16em; }
.wandel__zaehler b { font-family: var(--serif); font-weight: 600; font-size: 1.05rem;
  letter-spacing: 0; color: var(--orange); font-variant-numeric: tabular-nums; }

/* Der Schritt, der gerade dran ist. */
.schritt { transition: opacity .35s ease; }
.schritt__dort::before { transition: width .35s ease, background-color .35s ease; }
.schritt--dran .schritt__nr { color: var(--orange); }
.schritt--dran .schritt__dort::before { width: clamp(1.3rem, 2.6vw, 2.4rem); }

@media (prefers-reduced-motion: reduce) {
  .wandel__bild img { transform: none; }
  .wandel__fuellung { transition: none; }
}
@media (max-width: 900px) {
  /* Ohne haftendes Bild gibt es nichts mitzubewegen. */
  .wandel__schiene { display: none; }
  .wandel__zaehler { display: none; }
  .wandel__bild img { transform: none; }
}

/* ───── Die Verwandlung, von Hand gescrollt ─────
   Fabio am 08.09.2026: „Es muss ein Video sein, das ich eigentlich manuell
   scrolle, sozusagen von einer Raupe zu einem Schmetterling."

   Kein echtes Video: Videos lassen sich nicht zuverlaessig Bild fuer Bild
   scrubben, und ein hakendes Video ist schlimmer als gar keins. Stattdessen
   eine Folge einzelner Rahmen, von denen immer genau einer sichtbar ist —
   die Scrollposition waehlt ihn aus. Das laeuft ruckelfrei, weil nichts
   dekodiert werden muss, und es steht still, wenn man stillsteht.

   Die Rahmen sind die 121 Einzelbilder aus Fabios Higgsfield-Video vom
   08.09.2026 — eine Raupe, die sich ueber die Verpuppung zum Schmetterling
   entfaltet. Das Video hatte ein Transparenz-Schachbrett eingebrannt; jeder
   Rahmen wurde davon freigestellt (siehe werkzeuge/rahmen-freistellen.py). */
.folge { position: relative; display: block; width: 100%; aspect-ratio: 460 / 690; }
.folge__bild { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; opacity: 0; }
.folge__bild.ist-da { opacity: 1; }

/* ───── „Von hier nach dort", Feinschliff nach Fabios Vorgaben vom 08.09. ─────
   „die Raupe genau auf die gleiche Hoehe … von der Ueberschrift, wo es in der
   Mitte des Bildschirms ist, sodass sie stoppt und wieder rausgeht, wenn sie
   zuunterst auf der Linie ist, aber sie muss komplett offen sein. Ich kann
   locker noch ein bisschen nach links kommen, und ich will, dass man sie ganz
   sieht, also nicht abgeschnitten."

   1. HOEHE. Die Ueberschrift steht jetzt IN der linken Spalte. Vorher stand sie
      darueber, und das haftende Bild konnte erst darunter anfangen — es kam
      also immer zu tief herein.
   2. NICHT ABGESCHNITTEN. `overflow: hidden` am Rahmen ist weg. Es war fuer den
      Zoom da, den es mit der Rahmenfolge nicht mehr gibt.
   3. NACH LINKS. Die Bildspalte ist breiter und der Abstand kleiner, dazu ein
      Stueck Luft am rechten Rand — das Tier steht nicht mehr an der Kante. */
.wandel__buehne { margin: 2.4rem 0 0; grid-template-columns: 1fr minmax(0, 27rem);
  gap: clamp(1.5rem, 3.5vw, 3.5rem); }
.wandel__intro { max-width: 32rem; margin: 0 0 2.6rem; }
.wandel__rahmen { overflow: visible; }
.wandel__bild { padding-right: clamp(0rem, 2vw, 2.5rem); }
@media (max-width: 900px) {
  .wandel__intro { margin-bottom: 1.8rem; }
  .wandel__bild { padding-right: 0; }
}

/* ───── Zweiter Feinschliff, Fabio 08.09.2026 ─────
   „Es stoppt zu frueh. Es muss weiter oben stoppen." und „es verschwindet zu
   schnell nach oben".

   1. HALTEPUNKT. Vorher `top: 50vh` mit `translateY(-50%)`. Der Versatz wird
      NACH dem Haften angewendet — das Bild klebte also mit seiner Oberkante
      auf halber Hoehe und rutschte optisch nur die halbe Bildhoehe hoch, was
      bei 690 px Bildhoehe zu tief endete. Jetzt wird der Haltepunkt direkt
      gerechnet, ohne Versatz: halbe Bildschirmhoehe minus knapp halbe
      Bildhoehe, und noch ein Stueck darueber.
   2. AUSKLANG. Die linke Spalte bekommt unten Luft. Damit endet die Zeile des
      Rasters spaeter als die Schrittliste — der Schmetterling bleibt einen
      Moment offen stehen, statt sofort mit der letzten Zeile wegzurutschen.
      Der Fortschritt haengt weiter an der Liste, ist also schon bei eins. */
/* ⚠️ Hier stand `top: calc(50vh - 24rem)`. Eine feste Zahl kann die Bildhoehe
   nicht kennen: Die haengt an der Spaltenbreite, nicht am Fenster. Gemessen bei
   813 px Fensterhoehe ergab die Rechnung 22 px — das Bild waere unter die
   Kopfzeile gerutscht. Der Haltepunkt wird deshalb im Skript gerechnet und bei
   jeder Groessenaenderung neu gesetzt. Der Wert hier ist nur der Notnagel,
   falls das Skript nicht laeuft. */
.wandel__bild { top: 9rem; transform: none; }
.wandel__spur { padding-bottom: clamp(4rem, 22vh, 16rem); }
@media (max-width: 900px) {
  .wandel__bild { top: auto; }
  .wandel__spur { padding-bottom: 0; }
}

/* ───── Breiter, Fabio 08.09.2026 ─────
   „Jetzt muss nur das Bild ganz breit sein, sodass man den ganzen
   Schmetterling sieht."

   Die Bildspalte waechst von 27 auf 33 rem, der Abstand zwischen den Spalten
   schrumpft. Damit ist der Schmetterling rund ein Viertel groesser.

   ⚠️ Die Hoehe muss dabei gedeckelt werden: Das Bildverhaeltnis ist 460:690,
   eine breitere Spalte macht es also auch hoeher — bei 33 rem waeren das
   792 px, mehr als auf einem Laptop ueberhaupt Platz hat. Der Deckel laesst
   das Bild auf kleinen Schirmen kleiner werden, statt unten wegzulaufen. */
.wandel__buehne { grid-template-columns: 1fr minmax(0, 33rem);
  gap: clamp(1rem, 2.5vw, 2.5rem); }
/* ⚠️ Der Deckel war zuerst `100dvh - 11rem`. Gemessen auf einem 813 px hohen
   Laptop kam das Motiv damit auf 425 px Breite — WENIGER als die 432 px vorher.
   Die Hoehe ist hier der Engpass, nicht die Spaltenbreite: Bei einem
   Bildverhaeltnis von 460:690 kostet jedes Pixel Breite anderthalb Pixel Hoehe.
   Der Deckel steht deshalb so knapp wie moeglich unter der Kopfzeile. */
.folge { max-height: calc(100dvh - 8rem); }
@media (max-width: 900px) {
  .wandel__buehne { grid-template-columns: 1fr; }
  .folge { max-height: none; }
}

/* ───── Kleiner und weiter links, Fabio 08.09.2026 ─────
   „hast du genau das Gegenteil gemacht? Das wird immer groesser. Du musst es
   kleiner machen und mehr nach links."

   ⚠️ Missverstaendnis meinerseits: Sein „es muss breiter sein, sodass man den
   ganzen Schmetterling sieht" meinte den RAHMEN, in dem das Tier steht — nicht
   das Tier selbst. Ich habe das Bild vergroessert, er wollte mehr Luft darum.

   Ein Hebel macht beides: Die Spalte wird schmaler und bekommt rechts einen
   breiten Rand. Dadurch schrumpft das Motiv UND rueckt nach links. */
.wandel__buehne { grid-template-columns: 1fr minmax(0, 30rem);
  gap: clamp(1.5rem, 3vw, 3rem); }
.wandel__bild { padding-right: clamp(1.5rem, 6vw, 7rem); }
@media (max-width: 900px) { .wandel__bild { padding-right: 0; } }

/* Noch einmal 30 % kleiner, Fabio 08.09.2026.
   Gerechnet von 394 px Motivbreite auf rund 276: die Spalte auf 24 rem und der
   Rand rechts auf 7,5 vw. Beides zusammen ergibt bei 1440 px Fensterbreite
   384 minus 108, also 276 px. */
.wandel__buehne { grid-template-columns: 1fr minmax(0, 24rem); }
.wandel__bild { padding-right: clamp(1.5rem, 7.5vw, 8rem); }
@media (max-width: 900px) { .wandel__bild { padding-right: 0; } }