/* ==========================================================================
   Maite Wiesinger — Coaching & Begleitung
   Designsystem: warmes Papier, tiefe Pflaume, der Bogen als Leitmotiv
   ========================================================================== */

:root {
  --paper: #f6f2eb;
  --paper-2: #ede6da;
  --paper-3: #e3d9ca;
  --white: #fcfaf6;
  --ink: #1d1820;
  --ink-2: #4c4450;
  --ink-3: #847a82;
  --line: rgba(29, 24, 32, 0.14);
  --plum-deep: #24172c;

  /* Flieder – Marke & Einzelne */
  --lilac-600: #64409f;
  --lilac-500: #7b52be;
  --lilac-300: #a98ad6;
  --lilac-100: #ede7f7;

  /* Blaugrau – Unternehmen */
  --slate-600: #44607c;
  --slate-500: #55708c;
  --slate-300: #8ca0b4;
  --slate-100: #dde4ec;

  /* Rollen */
  --plum: var(--lilac-600);        /* Akzent auf hellem Grund, Hover */
  --lilac: var(--lilac-300);       /* Akzent auf dunklem Grund */
  --lilac-soft: var(--lilac-100);  /* weiche Flächen, Chips */
  --clay: var(--lilac-500);        /* Signal-Punkt */
  --signet: var(--lilac-500);
  --label: var(--slate-500);       /* Eyebrow-Labels */

  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans: "Hanken Grotesk", "Helvetica Neue", Helvetica, sans-serif;

  --gutter: clamp(20px, 5vw, 72px);
  --max: 1320px;
  --radius-arch: 999px 999px 0 0;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* feines Papierkorn */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.35;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.4 0 0 0 0 0.35 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
::selection { background: var(--lilac-100); color: var(--ink); }

:focus-visible { outline: 2px solid var(--plum); outline-offset: 4px; border-radius: 2px; }

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--ink); color: var(--paper); padding: 10px 16px;
}
.skip:focus { top: 16px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Typografie ---------- */

.display {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 300;
  font-size: clamp(2.7rem, 6.4vw, 6.4rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
}
.h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.5rem, 5.6vw, 5.1rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -0.018em;
}
.h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.45rem, 2vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
em, .it { font-style: italic; font-weight: 300; }
.plum { color: var(--plum); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--sans);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--label);
}
.eyebrow::before {
  content: ""; flex: none; align-self: flex-start; margin-top: .62em; width: 28px; height: 1px; background: currentColor; opacity: 0.6;
}
.eyebrow.num::before { display: none; }
.eyebrow .n { font-family: var(--serif); font-style: italic; font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--plum); font-weight: 400; }

.lead {
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 34em;
}
.muted { color: var(--ink-3); }
.small { font-size: 14px; line-height: 1.55; }

/* ---------- Buttons & Links ---------- */

.btn {
  --bg: var(--ink); --fg: var(--paper);
  position: relative;
  display: inline-flex; align-items: center; gap: 14px;
  padding: 16px 26px;
  background: var(--bg); color: var(--fg);
  font: 500 15px/1 var(--sans); letter-spacing: 0.01em;
  border: 1px solid var(--bg);
  border-radius: 999px;
  overflow: hidden; isolation: isolate;
  transition: color .5s var(--ease), border-color .5s var(--ease);
  cursor: pointer;
}
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--plum);
  transform: translateY(101%); border-radius: 50% 50% 0 0;
  transition: transform .6s var(--ease), border-radius .6s var(--ease);
}
.btn:hover::after { transform: translateY(0); border-radius: 0; }
.btn:hover { border-color: var(--plum); }
.btn .arr { transition: transform .5s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }

.btn.ghost { --bg: transparent; --fg: var(--ink); border-color: var(--line); }
.btn.ghost:hover { color: var(--paper); }
.btn.light { --bg: var(--paper); --fg: var(--ink); }
.btn.light::after { background: var(--lilac); }
.btn.light:hover { color: var(--ink); border-color: var(--lilac); }
.btn.ghost-light { --bg: transparent; --fg: var(--paper); border-color: rgba(246,242,235,.3); }
.btn.ghost-light::after { background: var(--paper); }
.btn.ghost-light:hover { color: var(--ink); border-color: var(--paper); }

.link {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 500; font-size: 15px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  padding-bottom: 4px;
  transition: background-size .5s var(--ease);
}
.link:hover { background-size: 0 1px; background-position: 100% 100%; }

/* ---------- Header ---------- */

.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  transition: background-color .4s var(--ease), box-shadow .4s var(--ease), transform .5s var(--ease);
}
.site-header.scrolled {
  background: rgba(246, 242, 235, 0.86);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 1px 0 var(--line);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 84px; }

.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand svg { width: 30px; height: 30px; color: var(--signet); transition: transform .8s var(--ease); }
.brand:hover svg { transform: rotate(-12deg); }
.brand-name { font-family: var(--serif); font-size: 21px; letter-spacing: -0.005em; line-height: 1; }
.brand-name small { display: block; font-family: var(--sans); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); margin-top: 5px; }

.nav { display: flex; align-items: center; gap: 38px; }
.nav a:not(.btn) {
  position: relative; font-size: 15px; color: var(--ink-2); transition: color .3s;
}
.nav a:not(.btn)::after {
  content: ""; position: absolute; left: 50%; bottom: -8px; width: 4px; height: 4px; border-radius: 50%;
  background: var(--plum); transform: translateX(-50%) scale(0); transition: transform .4s var(--ease);
}
.nav a:not(.btn):hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav a:not(.btn):hover::after, .nav a[aria-current="page"]::after { transform: translateX(-50%) scale(1); }
.nav .btn { padding: 13px 22px; font-size: 14px; }

.menu-toggle {
  display: none; background: none; border: 0; padding: 10px; margin-right: -10px; cursor: pointer; color: var(--ink);
}
.menu-toggle span { display: block; width: 26px; height: 1.5px; background: currentColor; transition: transform .4s var(--ease); }
.menu-toggle span + span { margin-top: 7px; }
.menu-open .menu-toggle span:first-child { transform: translateY(4.25px) rotate(45deg); }
.menu-open .menu-toggle span:last-child { transform: translateY(-4.25px) rotate(-45deg); }

@media (max-width: 900px) {
  .menu-toggle { display: block; position: relative; z-index: 60; }
  .nav {
    position: fixed; inset: 0; z-index: 55;
    flex-direction: column; align-items: flex-start; justify-content: center; gap: 22px;
    padding: 0 var(--gutter);
    background: var(--paper);
    opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility .4s;
  }
  .nav a:not(.btn) { font-family: var(--serif); font-size: 42px; color: var(--ink); line-height: 1.1; }
  .nav a:not(.btn)::after { display: none; }
  .nav .btn { margin-top: 18px; font-size: 16px; padding: 16px 26px; }
  .menu-open .nav { opacity: 1; visibility: visible; }
  .menu-open { overflow: hidden; }
  .menu-open .site-header { background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; transform: none; }
}

/* ---------- Sektionen ---------- */

main { display: block; overflow-x: clip; }
.section { padding: clamp(88px, 12vw, 176px) 0; position: relative; }
.section.tight { padding: clamp(64px, 8vw, 112px) 0; }
.section.dark { background: var(--plum-deep); color: var(--paper); }
.section.dark .eyebrow, .section.dark .lead, .section.dark .muted { color: rgba(246,242,235,.66); }
.section.dark .plum { color: var(--lilac); }
.section.sand { background: var(--paper-2); }
.section.white { background: var(--white); }
.section.slate { background: var(--slate-100); }
.section.slate .eyebrow, .section.slate .plum { color: var(--slate-600); }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

.sec-head {
  margin-bottom: clamp(48px, 7vw, 88px);
}
.sec-head .h2 { max-width: 16em; }

/* ---------- Hero (Startseite) ---------- */

.hero {
  position: relative;
  min-height: min(100svh, 1000px);
  padding: 150px 0 72px;
  display: flex; align-items: flex-end;
}
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr);
  gap: 48px clamp(40px, 6vw, 110px); align-items: end;
}
.hero .display { margin: 28px 0 36px; }
.line { display: block; clip-path: inset(-0.2em -100vw -0.18em -100vw); }
.line > span { display: inline-block; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }
.hero-note {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 36px;
  font-size: 14px; color: var(--ink-2);
}
.pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--clay); }
.pulse::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--clay);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }

/* Bogen-Portrait */
.arch {
  position: relative;
  aspect-ratio: 4 / 5.2;
  border-radius: var(--radius-arch);
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.35), transparent 60%),
    linear-gradient(180deg, var(--lilac-100) 0%, #cfbdeb 55%, var(--lilac-300) 100%);
}
.arch img { width: 100%; height: 100%; object-fit: cover; }
.arch .ph {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  color: rgba(36,23,44,.55); font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
}
.arch .ph svg { width: 56px; height: 56px; margin: 0 auto 14px; color: rgba(36,23,44,.35); }
.arch-wrap { position: relative; }
.arch-wrap .ring {
  position: absolute; inset: -22px -22px auto -22px; aspect-ratio: 1;
  border: 1px solid var(--plum); border-bottom-color: transparent; border-left-color: transparent;
  border-radius: 50%; opacity: .35; transform: rotate(-45deg);
  pointer-events: none;
}
.arch-caption {
  position: absolute; left: -28px; bottom: 36px;
  background: var(--paper); padding: 18px 22px; max-width: 230px;
  box-shadow: 0 30px 60px -30px rgba(36,23,44,.35);
}
.arch-caption .h3 { font-size: 22px; }
.arch-caption p { margin: 6px 0 0; font-size: 13px; color: var(--ink-3); line-height: 1.45; }


@media (max-width: 900px) {
  .hero { min-height: auto; padding-top: 128px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero .arch-wrap { max-width: 420px; margin-left: auto; width: 82%; }
  .arch-caption { left: -18%; }
  }

/* ---------- Anlässe: Bogen-Karten mit Scroll-Effekt ---------- */

.occ-scroll { position: relative; }
.occ-sticky {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  display: flex; flex-direction: column; justify-content: center; gap: clamp(32px, 5vh, 64px);
  overflow: hidden; padding: 96px 0 40px;
}
.occ-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }
.occ-head .h2 { margin-top: 0; max-width: 12em; }
.occ-meta { display: grid; gap: 14px; justify-items: end; min-width: 180px; }
.occ-count { font-size: 14px; color: var(--ink-3); letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.occ-count b { font-family: var(--serif); font-weight: 400; font-size: 28px; color: var(--ink); letter-spacing: 0; margin-right: 4px; }
.occ-bar { position: relative; width: 180px; height: 2px; background: var(--line); overflow: hidden; }
.occ-bar i { position: absolute; inset: 0; background: var(--lilac-500); transform-origin: left; transform: scaleX(0); }

.occ-viewport { overflow: visible; }
.occ-track {
  list-style: none; margin: 0;
  display: flex; gap: clamp(16px, 2vw, 28px);
  padding: 40px max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  will-change: transform;
}
.occ-card {
  --w: clamp(270px, 27vw, 380px);
  flex: none; width: var(--w); min-height: calc(var(--w) * 1.08);
  border-radius: calc(var(--w) / 2) calc(var(--w) / 2) 0 0;
  padding: 0 clamp(26px, 2.6vw, 38px) clamp(28px, 2.8vw, 40px);
  display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch;
  gap: clamp(36px, 3.4vw, 48px);
  position: relative; transform-origin: 50% 100%;
  transition: box-shadow .6s var(--ease);
}
.occ-card .idx {
  align-self: center; margin-top: clamp(40px, 4.5vw, 64px);
  font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(2.6rem, 4vw, 3.6rem); line-height: 1;
}
.occ-card .h3 { font-size: clamp(1.5rem, 2.1vw, 1.95rem); font-weight: 300; margin-bottom: 12px; }
.occ-card p { margin: 0; font-size: 15px; line-height: 1.55; }
.occ-card .link { margin-top: 18px; }
.occ-card.is-active { box-shadow: 0 40px 80px -40px rgba(36, 23, 44, .35); }

.t-white { background: var(--white); }
.t-white .idx { color: var(--lilac-500); }
.t-white p { color: var(--ink-2); }
.t-lilac { background: var(--lilac-100); }
.t-lilac .idx, .t-lilac p { color: var(--lilac-600); }
.t-slate { background: var(--slate-100); }
.t-slate .idx, .t-slate p { color: var(--slate-600); }
.t-violet { background: var(--lilac-500); color: var(--white); }
.t-violet .idx { color: var(--lilac-100); }
.t-violet p { color: rgba(252,250,246,.88); }
.t-slate-dark { background: var(--slate-600); color: var(--white); }
.t-slate-dark .idx { color: var(--slate-100); }
.t-slate-dark p { color: rgba(252,250,246,.85); }
.t-dark { background: var(--plum-deep); color: var(--paper); }
.t-dark .idx { color: var(--lilac-300); }
.t-dark p { color: rgba(246,242,235,.75); }

/* ohne Pinning: Handy & reduzierte Bewegung */
.occ-scroll.is-static { padding: clamp(88px, 12vw, 140px) 0; }
.occ-scroll.is-static .occ-sticky { position: static; height: auto; padding: 0; overflow: visible; }
.occ-scroll.is-static .occ-viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.occ-scroll.is-static .occ-viewport::-webkit-scrollbar { display: none; }
.occ-scroll.is-static .occ-track { width: max-content; padding-top: 8px; padding-bottom: 24px; }
.occ-scroll.is-static .occ-card { scroll-snap-align: center; transform: none !important; }
@media (max-width: 760px) {
  .occ-head { flex-direction: column; align-items: flex-start; }
  .occ-meta { justify-items: start; }
  .occ-card { --w: 76vw; }
}

/* ---------- Haltung / Zitat ---------- */

.manifest { position: relative; overflow: hidden; text-align: center; }
.manifest .quote { margin-left: auto; margin-right: auto; text-wrap: balance; }
.manifest .lead { margin-left: auto; margin-right: auto; }
.quote {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2.1rem, 4.9vw, 4.6rem); line-height: 1.08; letter-spacing: -.02em;
  max-width: 17em; margin: 0 0 40px; position: relative;
}
.quote em { color: var(--lilac); }

/* ---------- Ablauf ---------- */

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
.steps::before {
  content: ""; position: absolute; left: 0; right: 0; top: 23px; height: 1px; background: var(--line);
}
.step { position: relative; padding-right: 32px; }
.step .dot {
  position: relative; width: 47px; height: 47px; border-radius: 50%;
  display: grid; place-items: center; margin-bottom: 34px;
  background: var(--paper); border: 1px solid var(--line);
  font-family: var(--serif); font-style: italic; color: var(--plum); font-size: 18px;
  transition: background .5s var(--ease), color .5s, border-color .5s;
}
.section.sand .step .dot { background: var(--paper-2); }
.step:hover .dot { background: var(--plum); color: var(--paper); border-color: var(--plum); }
.step .meta { display: block; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.step .h3 { margin-bottom: 14px; }
.step p { color: var(--ink-2); font-size: 16px; }
@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; gap: 40px; }
  .steps::before { left: 23px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .step { display: grid; grid-template-columns: 47px 1fr; gap: 0 24px; padding: 0; }
  .step .dot { margin: 0; grid-row: span 3; }
}

/* ---------- Zwei Wege ---------- */

.paths { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 28px); }
.path {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: clamp(460px, 48vw, 620px);
  padding: clamp(32px, 4vw, 56px);
  background: var(--white);
  transition: color .6s var(--ease);
}
.path.alt { background: var(--slate-600); color: var(--paper); }
.path .arc-bg {
  position: absolute; z-index: -1; right: -30%; bottom: -55%; width: 110%; aspect-ratio: 1; border-radius: 50%;
  background: var(--lilac-soft); transform: scale(.35); transform-origin: 70% 70%;
  transition: transform 1s var(--ease);
}
.path.alt .arc-bg { background: var(--slate-500); }
.path:hover .arc-bg { transform: scale(1.05); }
.path .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.path .h2 { margin: 28px 0 18px; max-width: 10em; }
.path p { max-width: 26em; color: var(--ink-2); }
.path.alt p, .path.alt .eyebrow { color: rgba(246,242,235,.85); }
.path ul { list-style: none; padding: 0; margin: 28px 0 36px; display: grid; gap: 10px; }
.path li { display: flex; gap: 14px; font-size: 15px; }
.path li::before { content: "—"; color: var(--plum); }
.path.alt li::before { color: var(--slate-100); }
.path .circle {
  flex: none; width: 64px; height: 64px; border-radius: 50%; border: 1px solid currentColor;
  display: grid; place-items: center; opacity: .5; transition: opacity .4s, transform .8s var(--ease);
}
.path:hover .circle { opacity: 1; transform: rotate(-45deg); }
@media (max-width: 860px) { .paths { grid-template-columns: 1fr; } }

/* ---------- Über mich (Teaser) ---------- */

.about {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: clamp(48px, 8vw, 140px); align-items: center;
}
.about .arch { aspect-ratio: 4/5; }
.about .h2 { margin: 0 0 30px; }
.about .creds { display: flex; flex-wrap: wrap; gap: 8px; margin: 32px 0 40px; }
.chip {
  font-size: 13px; padding: 8px 14px; border-radius: 999px; background: var(--lilac-100); color: var(--lilac-600);
}
@media (max-width: 860px) {
  .about { grid-template-columns: 1fr; }
  .about .arch-wrap { max-width: 380px; width: 80%; }
}

/* ---------- Stimmen: drei kleine Karten ---------- */

.voices-sec { padding: clamp(72px, 9vw, 120px) 0; border-top: 1px solid var(--line); }
.vs-title { text-align: center; font-family: var(--serif); font-weight: 300; font-size: clamp(1.3rem, 1.8vw, 1.6rem); color: var(--ink-2); margin-bottom: clamp(32px, 4vw, 52px); }
.vs-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 22px); max-width: 1080px; margin: 0 auto; }
.vs-card {
  margin: 0; display: flex; flex-direction: column; gap: 18px;
  padding: clamp(24px, 2.4vw, 32px); background: var(--white);
  border-radius: 90px 90px 0 0; padding-top: clamp(40px, 4vw, 52px);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
.vs-card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -40px rgba(36, 23, 44, .3); }
.vs-quality { align-self: center; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--lilac-600); }
.vs-card blockquote {
  margin: 0; flex: 1; text-align: center;
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.5; color: var(--ink);
}
.vs-card blockquote::before { content: "\201E"; color: var(--lilac-300); }
.vs-card blockquote::after { content: "\201C"; color: var(--lilac-300); }
.vs-card figcaption { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 13px; color: var(--ink-3); padding-top: 16px; border-top: 1px solid var(--line); }
.vs-avatar {
  flex: none; width: 26px; height: 30px; border-radius: 13px 13px 0 0;
  background: var(--lilac-100); color: var(--lilac-600);
  display: grid; place-items: end center; padding-bottom: 4px;
  font-family: var(--serif); font-style: italic; font-size: 13px; line-height: 1;
}
.vs-card:nth-child(2) { background: var(--lilac-100); }
.vs-card:nth-child(2) .vs-avatar { background: var(--white); }
@media (max-width: 860px) { .vs-cards { grid-template-columns: 1fr; max-width: 460px; } }

/* ---------- Zahlen ---------- */
.facts-a { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px clamp(24px, 4vw, 64px); }
.facts-a .num { font-family: var(--serif); font-weight: 300; font-size: clamp(3.2rem, 5.5vw, 5rem); line-height: 1; letter-spacing: -.03em; }
.facts-a .num::after { content: ""; display: block; width: 28px; height: 3px; border-radius: 3px; background: var(--lilac-500); margin: 22px 0 16px; }
.facts-a p { margin: 0; font-size: 15px; color: var(--ink-2); max-width: 15em; }

@media (max-width: 760px) {
  .facts-a { grid-template-columns: 1fr 1fr; }
}

/* ---------- Erstgespräch & Honorar ---------- */

.offer {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 7vw, 120px); align-items: start;
}
.offer .h1 { margin: 0 0 28px; }
.prices { border-top: 1px solid rgba(246,242,235,.18); }
.section:not(.dark) .prices { border-top-color: var(--line); }
.price {
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  padding: 22px 0; border-bottom: 1px solid rgba(246,242,235,.18);
}
.section:not(.dark) .price { border-bottom-color: var(--line); }
.price dt { font-size: 15px; color: rgba(246,242,235,.66); }
.section:not(.dark) .price dt { color: var(--ink-2); }
.price dd { margin: 0; text-align: right; font-family: var(--serif); font-size: 22px; }
.price dd small { display: block; font-family: var(--sans); font-size: 13px; color: rgba(246,242,235,.55); }
.section:not(.dark) .price dd small { color: var(--ink-3); }
@media (max-width: 860px) { .offer { grid-template-columns: 1fr; } }

/* ---------- Unterseiten: Page-Hero ---------- */

.page-hero { padding: clamp(150px, 20vw, 230px) 0 clamp(64px, 8vw, 110px); position: relative; overflow: hidden; }
.page-hero .h1 { margin: 0 0 32px; max-width: 13em; }
.page-hero .grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px clamp(40px, 7vw, 120px); align-items: end; }
.page-hero .side { padding-bottom: 8px; }
.crumbs { font-size: 13px; color: var(--ink-3); display: flex; gap: 10px; }
.crumbs a:hover { color: var(--ink); }
@media (max-width: 860px) { .page-hero .grid { grid-template-columns: 1fr; } }

/* ---------- Karten (Formate) ---------- */

.formats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.format {
  position: relative; background: var(--paper); padding: clamp(28px, 3vw, 44px);
  display: flex; flex-direction: column; min-height: 440px;
  transition: background .5s var(--ease);
}
.format:hover { background: var(--white); }
.format .tag { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.format .h3 { hyphens: auto; -webkit-hyphens: auto; font-size: clamp(1.8rem, 2.6vw, 2.4rem); font-weight: 300; margin: 22px 0 18px; }
.format p { color: var(--ink-2); font-size: 16px; }
.format dl { margin: auto 0 0; padding-top: 24px; display: grid; gap: 10px; font-size: 14px; }
.format dl div { display: flex; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.format dt { color: var(--ink-3); }
.format dd { margin: 0; text-align: right; }
.format .price-tag { font-family: var(--serif); font-size: 26px; margin-top: 26px; }
.format .price-tag small { font-family: var(--sans); font-size: 13px; color: var(--ink-3); }
.format.special { background: var(--plum-deep); color: var(--paper); }
.format.special p, .format.special .tag, .format.special dt { color: rgba(246,242,235,.66); }
.format.special dl div { border-top-color: rgba(246,242,235,.16); }
@media (max-width: 960px) { .formats { grid-template-columns: 1fr; } .format { min-height: 0; } }

.special-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center;
  padding: clamp(32px, 4vw, 56px); background: var(--plum-deep); color: var(--paper);
  border: 1px solid var(--plum-deep); border-top: 0;
}
.special-row p { margin: 10px 0 0; color: rgba(246,242,235,.7); max-width: 38em; }
@media (max-width: 760px) { .special-row { grid-template-columns: 1fr; } }

/* ---------- Info-Raster ---------- */

.info-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.info h4 { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; margin-bottom: 14px; padding-top: 18px; border-top: 1px solid var(--line); }
.info p { font-size: 16px; color: var(--ink-2); }
@media (max-width: 900px) { .info-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .info-grid { grid-template-columns: 1fr; } }

/* ---------- Split-Text ---------- */

.split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px clamp(48px, 8vw, 140px); }
.split .sticky { position: sticky; top: 120px; align-self: start; }
.prose p { font-size: clamp(1.05rem, 1.35vw, 1.2rem); color: var(--ink-2); line-height: 1.75; }
.prose p:first-child::first-letter {
  font-family: var(--serif); float: left; font-size: 4.6em; line-height: .82; padding: .06em .1em 0 0; color: var(--plum); font-weight: 300;
}
.prose p.no-drop::first-letter { all: unset; }
.prose h3 { margin: 48px 0 16px; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split .sticky { position: static; } }

/* ---------- FAQ ---------- */

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 28px 0; font-family: var(--serif); font-size: clamp(1.3rem, 2vw, 1.7rem); font-weight: 300;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pm { position: relative; flex: none; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; transition: background .4s, border-color .4s; }
.faq summary .pm::before, .faq summary .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1px; background: currentColor; transform: translate(-50%, -50%); transition: transform .5s var(--ease); }
.faq summary .pm::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq details[open] summary .pm { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.faq details[open] summary .pm::after { transform: translate(-50%, -50%) rotate(0); }
.faq .answer { padding: 0 0 30px; max-width: 42em; color: var(--ink-2); }

/* ---------- Kontakt ---------- */

.contact { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px clamp(48px, 8vw, 140px); }
.form { display: grid; gap: 28px; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.field { position: relative; display: grid; gap: 8px; }
.field label { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.field input, .field textarea, .field select {
  font: 400 18px/1.5 var(--sans); color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  padding: 10px 0 12px; outline: none; transition: border-color .3s; width: 100%;
  -webkit-appearance: none; appearance: none;
}
.field textarea { resize: vertical; min-height: 140px; }
.field input:focus, .field textarea:focus, .field select:focus { border-bottom-color: var(--plum); }
.choice { display: flex; flex-wrap: wrap; gap: 10px; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice label {
  font-size: 15px; letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--ink-2);
  padding: 11px 18px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; transition: all .3s var(--ease);
}
.choice input:checked + label { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.choice input:focus-visible + label { outline: 2px solid var(--plum); outline-offset: 3px; }
.consent { display: flex; gap: 12px; font-size: 14px; color: var(--ink-2); align-items: flex-start; }
.consent input { margin-top: 5px; accent-color: var(--plum); }
.consent a { text-decoration: underline; text-underline-offset: 3px; }
.form-note { font-size: 14px; color: var(--plum); min-height: 1.4em; margin: 0; }
.contact-card { padding-top: 26px; border-top: 1px solid var(--line); margin-top: 40px; display: grid; gap: 20px; }
.contact-card div span { display: block; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.contact-card a, .contact-card p { font-family: var(--serif); font-size: 22px; margin: 0; }
.contact-card a:hover { color: var(--plum); }
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; } .form .row { grid-template-columns: 1fr; } }

.booking { margin-top: 40px; padding: clamp(28px, 3vw, 40px); background: var(--lilac-100); border-radius: 160px 160px 0 0; padding-top: clamp(56px, 6vw, 80px); text-align: center; }
.booking-label { display: block; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--lilac-600); margin-bottom: 10px; }
.booking .h3 { margin: 0 0 10px; }
.booking p:not(.h3) { color: var(--ink-2); font-size: 16px; max-width: 26em; margin: 0 auto 24px; }

/* ---------- CTA-Band ---------- */

.cta { text-align: center; position: relative; overflow: hidden; }
.cta .h1 { max-width: 14em; margin: 0 auto 36px; text-wrap: balance; }
.cta .actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; position: relative; }

/* ---------- Footer ---------- */

.site-footer { background: var(--ink); color: rgba(246,242,235,.7); padding: clamp(72px, 9vw, 120px) 0 36px; }
.footer-top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 48px; padding-bottom: 72px; }
.footer-top .brand { color: var(--paper); }
.footer-top .brand svg { color: var(--lilac-300); }
.footer-top .brand-name small { color: rgba(246,242,235,.45); }
.footer-claim { font-family: var(--serif); font-weight: 300; font-size: clamp(1.6rem, 2.4vw, 2.2rem); line-height: 1.2; color: var(--paper); margin: 36px 0 0; max-width: 13em; }
.footer-claim em { color: var(--lilac); }
.site-footer h4 { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: rgba(246,242,235,.4); font-weight: 600; margin-bottom: 20px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 15px; }
.site-footer ul a:hover { color: var(--paper); }
.footer-bottom { margin-top: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-top: 28px; border-top: 1px solid rgba(246,242,235,.12); font-size: 13px; color: rgba(246,242,235,.4); }
@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; } .footer-top > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 480px) { .footer-top { grid-template-columns: 1fr; } }

/* ---------- Rechtstexte ---------- */

.legal { max-width: 760px; }
.legal h2 { font-family: var(--serif); font-weight: 400; font-size: 1.7rem; margin: 56px 0 14px; }
.legal h3 { font-weight: 600; font-size: 1.05rem; margin: 30px 0 8px; }
.legal p, .legal li { color: var(--ink-2); }
.legal .todo { background: var(--lilac-soft); padding: 2px 6px; border-radius: 3px; color: var(--plum); font-size: .92em; }

/* ---------- Bewegung ---------- */

.reveal { opacity: 0; transform: translateY(28px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; }
.reveal[data-d="4"] { transition-delay: .32s; }

.load .line > span { transform: translateY(105%); animation: rise 1.2s var(--ease) forwards; }
.load .line:nth-child(2) > span { animation-delay: .1s; }
.load .line:nth-child(3) > span { animation-delay: .2s; }
.load .fade { opacity: 0; animation: fade 1.2s var(--ease) .45s forwards; }
.load .fade.late { animation-delay: .65s; }
.load .arch-in { clip-path: inset(100% 0 0 0 round 999px 999px 0 0); animation: archIn 1.6s var(--ease) .2s forwards; }
@keyframes rise { to { transform: none; } }
@keyframes fade { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes archIn { to { clip-path: inset(0 0 0 0 round 999px 999px 0 0); } }

.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; animation-delay: 0s !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Farbwelten ---------- */

/* Für Einzelne: Flieder */
.theme-lilac { --paper-2: var(--lilac-100); }
.theme-lilac .section.sand .chip { background: var(--white); }

/* Für Unternehmen: Blaugrau */
.theme-slate {
  --plum: var(--slate-600);
  --plum-deep: var(--slate-600);
  --lilac: var(--slate-100);
  --lilac-soft: var(--slate-100);
  --paper-2: var(--slate-100);
}
.theme-slate .btn:not(.light):not(.ghost):not(.ghost-light) { --bg: var(--slate-600); }
.theme-slate .btn:not(.light):not(.ghost-light)::after { background: var(--ink); }
.theme-slate .btn:not(.light):not(.ghost-light):hover { border-color: var(--ink); }
.theme-slate .section.dark .eyebrow,
.theme-slate .section.dark .lead,
.theme-slate .special-row p,
.theme-slate .format.special p { color: rgba(246,242,235,.85); }
.theme-slate .section.sand .eyebrow { color: var(--slate-600); }

/* ---------- Haltung: entsteht aus der letzten Anlässe-Karte ---------- */

.occ-expand {
  position: absolute; inset: 0; z-index: 5;
  display: grid; place-items: center; padding: 0 var(--gutter);
  background: var(--plum-deep); text-align: center;
  clip-path: inset(50% 50% 50% 50%); visibility: hidden;
  will-change: clip-path;
}
.occ-expand { transition: opacity .45s var(--ease); }
.occ-expand.is-leaving { opacity: 0; }
.hs-quote {
  margin: 0 auto; max-width: 17em;
  font-family: var(--serif); font-weight: 300; color: var(--paper);
  font-size: clamp(2rem, 5vw, 4.6rem); line-height: 1.14; letter-spacing: -.02em;
}
.hs-quote em.plum { color: var(--lilac-300); }
.hs-line {
  display: block; opacity: var(--o, 0);
  transform: translateY(calc((1 - var(--o, 0)) * 36px));
}
.occ-scroll.is-static .occ-expand {
  position: static; visibility: visible; clip-path: none;
  margin-top: clamp(64px, 10vw, 120px); padding: clamp(96px, 14vw, 160px) var(--gutter);
}
.occ-scroll.is-static .hs-line { --o: 1; }
.occ-scroll.is-static { padding-bottom: 0; }

/* ---------- Ablauf: Linie zieht sich von 1 bis 4 ---------- */

.steps-progress {
  position: absolute; left: 23px; top: 23px; width: 0; height: 2px; margin-top: -.5px;
  background: var(--lilac-500); transform-origin: left center; transform: scaleX(var(--sp, 0));
  pointer-events: none;
}
.steps.is-vertical .steps-progress { width: 2px; margin: 0 0 0 -.5px; transform-origin: center top; transform: scaleY(var(--sp, 0)); }
.step .dot { z-index: 1; transition: background .5s var(--ease), color .5s, border-color .5s, transform .6s var(--ease); }
.steps.is-anim .step .meta, .steps.is-anim .step .h3, .steps.is-anim .step p { transition: opacity .6s var(--ease); }
.steps.is-anim .step:not(.on) .meta, .steps.is-anim .step:not(.on) .h3, .steps.is-anim .step:not(.on) p { opacity: .35; }
.steps.is-anim .step.on .dot { background: var(--plum); color: var(--paper); border-color: var(--plum); transform: scale(1.08); }

/* Text links, große Überschrift rechts */
@media (min-width: 861px) {
  .split-swap { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: start; }
  .split-swap .h1 { text-align: right; }
}
@media (max-width: 860px) {
  .split-swap .sticky { order: -1; }
}


/* ==========================================================================
   Mobile Feinschliff
   ========================================================================== */

.mobile-cta { display: none; }

@media (max-width: 760px) {
  body { font-size: 16px; }

  /* Abstände ruhiger */
  .section { padding: 72px 0; }
  .section.tight { padding: 48px 0; }
  .sec-head { margin-bottom: 36px; }
  .h2 { font-size: 2rem; }
  .h1 { font-size: 2.35rem; }
  .lead { font-size: 1.05rem; }

  /* Knöpfe: volle Breite, gleich groß */
  .hero-actions, .cta .actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-actions .btn, .cta .actions .btn, .offer .btn, .booking .btn, .special-row .btn, .about .btn, .form .btn { width: 100%; justify-content: center; }

  /* Startseite: Kopfbereich */
  .hero { padding: 104px 0 24px; }
  .hero-grid { gap: 36px; }
  .hero .eyebrow { font-size: 10.5px; letter-spacing: .12em; line-height: 1.6; }
  .hero .eyebrow::before { display: none; }
  .hero .display { font-size: 2.9rem; margin: 16px 0 20px; }
  .hero-actions { margin-top: 28px; }
  .hero .arch-wrap { width: 78%; max-width: 320px; margin: 0 auto; }
  .arch-wrap .ring, .arch-caption { display: none; }

  /* Zahlen kompakt */
  .facts-a { gap: 28px 20px; }
  .facts-a .num { font-size: 2.6rem; }
  .facts-a .num::after { margin: 12px 0 10px; width: 22px; }
  .facts-a p { font-size: 14px; }

  /* Anlässe: Wischkarten */
  .occ-scroll.is-static { padding: 64px 0 0; }
  .occ-head .h2 { font-size: 2rem; }
  .occ-meta { min-width: 0; width: 100%; }
  .occ-bar { width: 100%; }
  .occ-card { --w: 78vw; }
  .occ-card .idx { margin-top: 36px; font-size: 2.4rem; }
  .occ-scroll.is-static .occ-expand { margin-top: 40px; padding: 80px var(--gutter); }
  .hs-quote { font-size: 1.85rem; }

  /* Ablauf */
  .steps { gap: 28px; }
  .step .h3 { font-size: 1.35rem; margin-bottom: 8px; }
  .step p { font-size: 15px; }

  /* Über mich (Startseite) */
  .about { gap: 36px; }
  .about .arch-wrap { width: 72%; max-width: 300px; margin: 0 auto; }
  .about .creds { margin: 24px 0 28px; }

  /* Preislisten: Bezeichnung über dem Preis */
  .price { flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px 0; }
  .price dd { text-align: left; font-size: 20px; }
  .price dd small { margin-top: 2px; }
  .offer { gap: 36px; }

  /* Unterseiten: Kopfbereich */
  .page-hero { padding: 108px 0 40px; }
  .page-hero .grid { gap: 20px; }
  .page-hero .h1 { margin-bottom: 8px; }
  .page-hero .arch-wrap { width: 78% !important; max-width: 320px !important; justify-self: center !important; margin: 16px auto 0; }

  /* Fließtext mit Initiale */
  .prose p { font-size: 16px; line-height: 1.7; }
  .prose p:first-child::first-letter { font-size: 3.6em; }
  .split { gap: 28px; }

  /* Formate (Unternehmen): Details schlanker */
  .format { padding: 28px 24px; }
  .format .h3 { font-size: 1.7rem; }
  .format .price-tag { margin-top: 16px; font-size: 22px; }

  /* Zitat-Flächen */
  .manifest .quote { font-size: 1.9rem; }
  .cta .h1 { font-size: 2rem; }

  /* Kontakt */
  .contact { gap: 40px; }
  .contact-card { margin-top: 28px; }
  .contact-card a, .contact-card p { font-size: 19px; }
  .booking { border-radius: 120px 120px 0 0; padding-left: 20px; padding-right: 20px; }

  /* Footer kompakt: Menü nicht doppeln */
  .site-footer { padding: 56px 0 28px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px 20px; padding-bottom: 36px; }
  .footer-top > div:nth-child(2) { display: none; }
  .footer-claim { font-size: 1.35rem; margin-top: 20px; }
  .footer-bottom span:last-child { display: none; }

  /* Immer erreichbar: Termin buchen */
  .mobile-cta {
    display: inline-flex; align-items: center; gap: 10px;
    position: fixed; left: 50%; bottom: 16px; z-index: 45;
    padding: 14px 24px; border-radius: 999px;
    background: var(--ink); color: var(--paper); font: 500 15px/1 var(--sans);
    box-shadow: 0 16px 40px -12px rgba(29, 24, 32, .45);
    transform: translate(-50%, 140%); opacity: 0;
    transition: transform .5s var(--ease), opacity .4s var(--ease);
  }
  .mobile-cta.show { transform: translate(-50%, 0); opacity: 1; }
  .menu-open .mobile-cta { opacity: 0; pointer-events: none; }
  .theme-slate .mobile-cta { background: var(--slate-600); }
}


/* ---------- Kopfbereich: überlagerte Bildkomposition ---------- */

.hero { min-height: min(100svh, 980px); padding: 132px 0 96px; align-items: center; }
.hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); align-items: center; gap: 48px clamp(40px, 5vw, 88px); }
.hero .lead { max-width: 30em; }
.hero-actions { margin-top: 36px; }

.hero-media {
  position: relative; justify-self: end;
  width: min(100%, 540px); padding: 0 0 48px clamp(48px, 6vw, 92px);
}
.hero-main { aspect-ratio: 4 / 5; box-shadow: 0 60px 90px -60px rgba(36, 23, 44, .45); }
.hero-main img, .hero-inset img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-media .ring {
  position: absolute; top: -26px; right: -26px; left: auto;
  width: calc(100% - clamp(48px, 6vw, 92px) + 52px); aspect-ratio: 1;
  border: 1px solid var(--lilac-300); border-bottom-color: transparent; border-left-color: transparent;
  border-radius: 50%; transform: rotate(-45deg); opacity: .7; pointer-events: none;
}
.hero-inset {
  position: absolute; left: 0; bottom: 0; width: 44%; aspect-ratio: 4 / 5;
  border: 7px solid var(--paper); border-bottom-width: 7px;
  box-shadow: 0 40px 70px -35px rgba(36, 23, 44, .5);
  z-index: 2;
}
.hero-sign {
  position: absolute; right: 0; bottom: 6px; margin: 0; text-align: right;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); line-height: 1.5;
}
.hero-sign span { display: block; font-family: var(--serif); font-size: 19px; letter-spacing: 0; text-transform: none; color: var(--ink); }

/* Zahlen: klarer Abstand zum Kopfbereich */
section.tight[aria-label="In Zahlen"] { padding-top: 24px; padding-bottom: clamp(72px, 9vw, 120px); }
section.tight[aria-label="In Zahlen"] .wrap { border-top: 1px solid var(--line); padding-top: clamp(40px, 5vw, 64px); }

@media (max-width: 900px) {
  .hero { min-height: 0; padding: 112px 0 56px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-media { justify-self: center; width: min(88%, 420px); padding-left: 16%; padding-bottom: 40px; margin-top: 8px; }
  .hero-media .ring { display: none; }
  .hero-inset { width: 46%; border-width: 5px; }
  .hero-sign { font-size: 10.5px; }
  .hero-sign span { font-size: 16px; }
}

/* Badge-Bogen statt zweitem Foto */
.hero-badge {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px;
  padding: 0 10px 22%; text-align: center; color: var(--paper);
  background: radial-gradient(120% 80% at 50% 0%, rgba(169,138,214,.35), transparent 60%), var(--plum-deep);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
.hero-badge svg { width: 30px; height: 30px; color: var(--lilac-300); margin-bottom: 10px; }
.hero-badge .hb-small { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(246,242,235,.75); }
.hero-badge .hb-big { font-family: var(--serif); font-weight: 300; font-size: clamp(1.9rem, 2.6vw, 2.5rem); line-height: 1.05; }
.hero-badge:hover { transform: translateY(-6px); box-shadow: 0 50px 80px -35px rgba(36, 23, 44, .6); }
.hero-sign { max-width: 52%; }

/* Überschriften gleichmäßig umbrechen, Kopfzeile oben in einer Zeile */
.h1, .h2, .display { text-wrap: balance; }
@media (min-width: 901px) { .hero .eyebrow { font-size: 11px; letter-spacing: .13em; white-space: nowrap; } }
@media (max-width: 900px) {
  .hero-badge svg { width: 22px; height: 22px; margin-bottom: 6px; }
  .hero-badge .hb-big { font-size: 1.6rem; }
  .hero-badge .hb-small { font-size: 9.5px; }
}

/* Signatur unter dem Foto: eigene Zeile, nichts überlappt */
.hero-media { padding-bottom: 76px; }
.hero-sign { max-width: none; bottom: 0; white-space: nowrap; font-size: 10.5px; letter-spacing: .1em; }
.hero-sign span { font-size: 18px; margin-bottom: 2px; }
@media (max-width: 900px) {
  .hero-media { padding-bottom: 64px; }
  .hero-sign { font-size: 9px; letter-spacing: .08em; }
  .hero-sign span { font-size: 15px; }
}
@media (max-width: 900px) {
  .hero-sign { white-space: normal; max-width: 50%; line-height: 1.45; }
  .hero-media { padding-bottom: 78px; }
}

/* ==========================================================================
   Kopfbereich: eckige Bildvarianten (hv-a / hv-b / hv-c)
   ========================================================================== */

.hero[class*="hv-"] .hero-main,
.hero[class*="hv-"] .hero-badge { border-radius: 0; }
.hero[class*="hv-"] .ring { display: none; }
.hero[class*="hv-"] .arch-in { clip-path: none; animation: fade 1.4s var(--ease) .2s both; }
.hero[class*="hv-"] .hero-badge { padding: 22px 18px; justify-content: center; aspect-ratio: auto; width: auto; }
.hero[class*="hv-"] .hero-badge svg { display: none; }

/* A · Randlos: Bild füllt die rechte Hälfte bis an den Rand */
.hero.hv-a { position: relative; padding-top: 120px; min-height: min(100svh, 940px); }
.hero.hv-a .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.hero.hv-a .hero-media { position: absolute; top: 0; right: 0; bottom: 0; width: 46vw; padding: 0; }
.hero.hv-a .hero-main { height: 100%; aspect-ratio: auto; box-shadow: none; }
.hero.hv-a .hero-main img { object-position: 50% 18%; }
.hero.hv-a .hero-badge { left: -64px; bottom: 72px; top: auto; min-width: 170px; }
.hero.hv-a .hero-sign { right: 28px; bottom: 28px; color: rgba(252,250,246,.8); text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.hero.hv-a .hero-sign span { color: var(--white); }

/* B · Versetzter Rahmen: großes Hochformat mit Farbfläche dahinter */
.hero.hv-b .hero-media { width: min(100%, 580px); padding: 0 0 72px 0; }
.hero.hv-b .hero-main { aspect-ratio: 4 / 5; position: relative; z-index: 1; box-shadow: none; }
.hero.hv-b .hero-media::before {
  content: ""; position: absolute; z-index: 0; top: 36px; right: -36px; width: 100%;
  aspect-ratio: 4 / 5; background: var(--lilac-100);
}
.hero.hv-b .hero-badge { left: -48px; bottom: 120px; min-width: 170px; z-index: 2; }
.hero.hv-b .hero-sign { right: -36px; bottom: 0; }

/* C · Überlagerte Schrift: großes Bild, die Überschrift ragt hinein */
.hero.hv-c .hero-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.hero.hv-c .hero-grid > div:first-child { position: relative; z-index: 3; }
.hero.hv-c .display { margin-right: -32%; }
.hero.hv-c .hero-media { width: 100%; padding: 0 0 64px 0; justify-self: stretch; }
.hero.hv-c .hero-main { aspect-ratio: 5 / 6; box-shadow: none; }
.hero.hv-c .hero-main img { object-position: 60% 20%; }
.hero.hv-c .hero-badge { right: -18px; left: auto; bottom: 110px; min-width: 160px; }
.hero.hv-c .hero-sign { right: 0; bottom: 0; }

@media (max-width: 900px) {
  .hero[class*="hv-"] .hero-media { position: relative; width: 100%; max-width: none; padding: 0 0 64px; top: auto; right: auto; bottom: auto; justify-self: stretch; }
  .hero[class*="hv-"] .hero-main { aspect-ratio: 4 / 4.6; height: auto; }
  .hero[class*="hv-"] .hero-badge { left: auto; right: 12px; bottom: 90px; min-width: 0; padding: 14px 16px; }
  .hero[class*="hv-"] .hero-sign { position: absolute; right: 0; bottom: 0; color: var(--ink-3); text-shadow: none; max-width: none; white-space: nowrap; }
  .hero[class*="hv-"] .hero-sign span { color: var(--ink); }
  .hero.hv-a { padding-top: 104px; }
  .hero.hv-b .hero-media::before { top: 18px; right: -12px; }
  .hero.hv-c .display { margin-right: 0; }
}
/* Variante C: Überschrift ragt deutlich ins Bild */
.hero.hv-c .hero-grid { column-gap: 0; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); }
.hero.hv-c .display { margin-right: -45%; }
.hero.hv-c .lead, .hero.hv-c .hero-actions { padding-right: 40px; }
@media (max-width: 900px) {
  .hero[class*="hv-"] .hero-grid { grid-template-columns: 1fr; column-gap: 0; }
  .hero.hv-c .display { margin-right: 0; }
  .hero.hv-c .lead, .hero.hv-c .hero-actions { padding-right: 0; }
}

/* ==========================================================================
   Kopfbereich D / E: randloses Bild rechts, sauberer Abstand, Bogen-Einblender
   ========================================================================== */

.hero.hv-d, .hero.hv-e { position: relative; min-height: min(100svh, 960px); padding: 150px 0 110px; }
.hero.hv-d .hero-grid, .hero.hv-e .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.hero.hv-d .hero-grid > div:first-child, .hero.hv-e .hero-grid > div:first-child { padding-right: clamp(32px, 4vw, 72px); }
.hero.hv-d .display, .hero.hv-e .display { font-size: clamp(2.8rem, 4.7vw, 5.4rem); }

/* Bild: beginnt in der Mitte und läuft bis an den rechten Rand */
.hero.hv-d .hero-media, .hero.hv-e .hero-media {
  position: absolute; left: calc(50% + 24px); right: 0; width: auto; padding: 0; justify-self: auto;
}
.hero.hv-d .hero-media { top: 84px; bottom: 0; }
.hero.hv-e .hero-media { top: 132px; bottom: 96px; }
.hero.hv-d .hero-main, .hero.hv-e .hero-main { height: 100%; aspect-ratio: auto; box-shadow: none; }
.hero.hv-d .hero-main img, .hero.hv-e .hero-main img { object-position: 50% 22%; }

/* Einblender wieder im Logo-Bogen, halb über der Bildkante */
.hero.hv-d .hero-badge, .hero.hv-e .hero-badge {
  border-radius: 999px 999px 0 0; aspect-ratio: 4 / 5; width: clamp(140px, 11vw, 176px); min-width: 0;
  padding: 0 10px 22%; justify-content: flex-end; left: calc(clamp(140px, 11vw, 176px) / -2); right: auto; top: auto;
}
.hero.hv-d .hero-badge { bottom: 88px; }
.hero.hv-e .hero-badge { bottom: 56px; }
.hero.hv-d .hero-badge svg, .hero.hv-e .hero-badge svg { display: block; }

/* D: Name im Bild auf dunklem Verlauf, gut lesbar */
.hero.hv-d .hero-main::after {
  content: ""; position: absolute; inset: 55% 0 0 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(29,24,32,0) 0%, rgba(29,24,32,.55) 100%);
}
.hero.hv-d .hero-main { position: relative; }
.hero.hv-d .hero-sign { z-index: 3; right: var(--gutter); bottom: 32px; color: rgba(252,250,246,.85); }
.hero.hv-d .hero-sign span { color: var(--white); }

/* E: Name unter dem Bild auf Papier */
.hero.hv-e .hero-sign { right: var(--gutter); bottom: -58px; }

@media (max-width: 900px) {
  .hero.hv-d, .hero.hv-e { padding: 104px 0 56px; min-height: 0; }
  .hero.hv-d .hero-grid > div:first-child, .hero.hv-e .hero-grid > div:first-child { padding-right: 0; }
  .hero.hv-d .hero-media, .hero.hv-e .hero-media { position: relative; left: auto; top: auto; bottom: auto; padding: 0 0 64px 0; }
  .hero.hv-d .hero-main, .hero.hv-e .hero-main { height: auto; aspect-ratio: 4 / 4.6; }
  .hero.hv-d .hero-badge, .hero.hv-e .hero-badge { width: 118px; left: 14px; bottom: 34px; }
  .hero.hv-d .hero-main::after { display: none; }
  .hero.hv-d .hero-sign, .hero.hv-e .hero-sign { right: 0; bottom: 0; color: var(--ink-3); }
  .hero.hv-d .hero-sign span { color: var(--ink); }
}
/* D/E: Bogen-Einblender mit festen Innenabständen, Handy einspaltig */
.hero.hv-d .hero-badge, .hero.hv-e .hero-badge { padding: 0 10px 30px; }
.hero.hv-d .hero-badge svg, .hero.hv-e .hero-badge svg { flex: none; width: 26px; height: 26px; }
.hero-badge > * { flex: none; }
@media (max-width: 900px) {
  .hero.hv-d .hero-grid, .hero.hv-e .hero-grid { grid-template-columns: 1fr; }
  .hero.hv-d .hero-badge, .hero.hv-e .hero-badge { padding-bottom: 20px; }
  .hero.hv-d .hero-badge svg, .hero.hv-e .hero-badge svg { width: 20px; height: 20px; margin-bottom: 4px; }
}


/* ==========================================================================
   Seite „Für Dich“
   ========================================================================== */

.sub-hero.hv-e { min-height: min(92svh, 900px); }

/* Laufband mit Themen */
.marquee { background: var(--lilac-500); color: var(--white); overflow: hidden; padding: 26px 0; }
.marquee-track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-set { display: flex; align-items: center; flex: none; }
.mq-item { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(1.6rem, 2.6vw, 2.4rem); white-space: nowrap; padding: 0 28px; }
.mq-dot { flex: none; width: 18px; height: 11px; border: 2px solid var(--lilac-100); border-bottom: 0; border-radius: 18px 18px 0 0; opacity: .8; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* Preise: Karten mit Bogen, Abo hervorgehoben */
.price-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 80px; align-items: end; margin-bottom: clamp(48px, 6vw, 80px); }
.price-head .lead { margin: 0; }
.pcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); align-items: end; }
.pcard {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: clamp(84px, 8vw, 110px) 28px 40px; background: var(--white);
  border-radius: 999px 999px 0 0; min-height: 360px; justify-content: flex-end;
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
.pcard:hover { transform: translateY(-6px); box-shadow: 0 40px 70px -45px rgba(36,23,44,.35); }
.pcard-name { font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--lilac-600); margin: 0 0 18px; }
.pcard-price { font-family: var(--serif); font-weight: 300; font-size: clamp(2.4rem, 3.6vw, 3.3rem); line-height: 1.05; margin: 0 0 14px; letter-spacing: -.02em; }
.pcard-note { font-size: 14px; color: var(--ink-3); margin: 0; max-width: 18em; line-height: 1.5; }
.pcard.is-featured { background: var(--plum-deep); color: var(--paper); min-height: 420px; }
.pcard.is-featured .pcard-name { color: var(--lilac-300); }
.pcard.is-featured .pcard-note { color: rgba(246,242,235,.7); }
.pcard-label {
  position: absolute; top: 30px; left: 50%; transform: translateX(-50%);
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  background: var(--lilac-500); color: var(--white); padding: 6px 12px; border-radius: 999px;
}
.perks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: clamp(56px, 7vw, 88px); }
.perk { border-top: 1px solid var(--line); padding-top: 22px; }
.perk-n { font-family: var(--serif); font-style: italic; color: var(--lilac-500); font-size: 18px; }
.perk h4 { font-family: var(--serif); font-weight: 400; font-size: 1.35rem; margin: 8px 0 8px; }
.perk p { font-size: 15px; color: var(--ink-2); margin: 0; }
.price-foot { margin: clamp(40px, 5vw, 64px) 0 0; font-size: 15px; color: var(--ink-3); max-width: 52em; }
.price-foot strong { font-family: var(--serif); font-weight: 400; font-size: 1.2rem; color: var(--ink); margin-right: 6px; }

/* ==========================================================================
   Seite „Für Unternehmen“
   ========================================================================== */

.u-hero { background: var(--slate-600); color: var(--paper); padding: 170px 0 110px; min-height: min(92svh, 880px); display: flex; align-items: flex-end; }
.u-hero-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr); gap: 56px clamp(48px, 7vw, 120px); align-items: end; }
.u-hero .display { font-size: clamp(2.9rem, 6vw, 6rem); margin: 0 0 32px; }
.u-hero .plum { color: var(--slate-100); }
.u-hero .lead { color: rgba(246,242,235,.82); max-width: 32em; }
.u-index { border-top: 1px solid rgba(246,242,235,.28); }
.u-index-title { display: block; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(246,242,235,.6); padding: 18px 0 6px; }
.u-index a {
  display: grid; grid-template-columns: 44px 1fr auto 28px; align-items: baseline; gap: 12px;
  padding: 20px 0; border-bottom: 1px solid rgba(246,242,235,.18); transition: padding .5s var(--ease), background .5s;
}
.u-index .u-n { font-family: var(--serif); font-style: italic; color: var(--slate-300); }
.u-index .u-t { font-family: var(--serif); font-size: 1.5rem; font-weight: 300; }
.u-index .u-d { font-size: 13px; color: rgba(246,242,235,.6); }
.u-index .u-arr { justify-self: end; opacity: .5; transition: transform .5s var(--ease), opacity .4s; }
.u-index a:hover { padding-left: 10px; }
.u-index a:hover .u-arr { opacity: 1; transform: translateX(4px); }

/* Kopfzeile auf dem dunklen Kopfbereich hell darstellen */
html:not(.menu-open) .theme-slate .site-header:not(.scrolled) .brand-name,
html:not(.menu-open) .theme-slate .site-header:not(.scrolled) .nav a:not(.btn),
html:not(.menu-open) .theme-slate .site-header:not(.scrolled) .menu-toggle { color: var(--paper); }
html:not(.menu-open) .theme-slate .site-header:not(.scrolled) .brand-name small { color: rgba(246,242,235,.6); }
html:not(.menu-open) .theme-slate .site-header:not(.scrolled) .brand svg { color: var(--slate-100); }
html:not(.menu-open) .theme-slate .site-header:not(.scrolled) .nav a::after { background: var(--paper); }
html:not(.menu-open) .theme-slate .site-header:not(.scrolled) .nav .btn { --bg: var(--paper); --fg: var(--ink); border-color: var(--paper); }

.u-facts { padding: clamp(56px, 7vw, 96px) 0; }
.theme-slate .facts-a .num::after { background: var(--slate-500); }

.u-quote { text-align: center; padding-top: clamp(40px, 5vw, 64px); }
.u-quote .quote { color: var(--ink); margin: 0 auto 32px; max-width: 18em; text-wrap: balance; }
.u-quote .quote em, .u-quote .quote .plum { color: var(--slate-600); }
.u-quote .lead { margin: 0 auto; }

.fcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.6vw, 22px); }
.fcard {
  position: relative; display: flex; flex-direction: column; background: var(--white);
  padding: 36px 30px 32px; min-height: 480px; border-top: 3px solid transparent;
  transition: transform .6s var(--ease), box-shadow .6s var(--ease), border-color .5s;
}
.fcard:hover { transform: translateY(-6px); box-shadow: 0 40px 70px -45px rgba(68,96,124,.45); border-top-color: var(--slate-600); }
.fcard-n { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 3rem; line-height: 1; color: var(--slate-300); }
.fcard-title { font-family: var(--serif); font-weight: 300; font-size: clamp(1.6rem, 2vw, 1.95rem); line-height: 1.1; margin: 28px 0 14px; hyphens: auto; -webkit-hyphens: auto; }
.fcard-title:first-child { margin-top: 0; }
.fcard-text { font-size: 15px; color: var(--ink-2); margin: 0 0 24px; }
.fcard-meta { margin: auto 0 22px; display: grid; gap: 8px; font-size: 14px; }
.fcard-meta div { display: flex; justify-content: space-between; gap: 12px; padding-top: 8px; border-top: 1px solid var(--line); }
.fcard-meta dt { color: var(--ink-3); }
.fcard-meta dd { margin: 0; text-align: right; }
.fcard-price { align-self: flex-start; font-size: 13px; padding: 7px 14px; border: 1px solid rgba(68,96,124,.35); border-radius: 999px; color: var(--slate-600); }
.fcard-own { background: var(--slate-600); color: var(--paper); }
.fcard-own .fcard-n { color: var(--slate-100); }
.fcard-own .fcard-text { color: rgba(246,242,235,.8); }
.fcard-own .btn { margin-top: auto; align-self: flex-start; }

.rlist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.rlist li { display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding: 30px 0; border-bottom: 1px solid var(--line); }
.rlist-n { font-family: var(--serif); font-style: italic; font-size: 1.4rem; color: var(--slate-500); }
.rlist h3 { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; margin: 0 0 6px; }
.rlist p { margin: 0; color: var(--ink-2); }

@media (max-width: 1000px) {
  .fcards { grid-template-columns: 1fr 1fr; }
  .perks { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .marquee { padding: 18px 0; }
  .mq-item { font-size: 1.4rem; padding: 0 18px; }
  .price-head { grid-template-columns: 1fr; }
  .pcards { grid-template-columns: 1fr; gap: 16px; max-width: 380px; margin: 0 auto; }
  .pcard { min-height: 0; padding-top: 80px; }
  .pcard.is-featured { min-height: 0; order: -1; }
  .perks { grid-template-columns: 1fr; gap: 20px; }
  .u-hero { padding: 120px 0 64px; min-height: 0; }
  .u-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .u-hero .display { font-size: 2.7rem; }
  .fcards { grid-template-columns: 1fr; }
  .fcard { min-height: 0; }
  .rlist li { grid-template-columns: 44px 1fr; padding: 22px 0; }
}
.fcard-title { font-size: clamp(1.4rem, 1.7vw, 1.8rem); }
.u-index .u-d { white-space: nowrap; }


/* Kopfbereich ohne Einblender: Bild größer */
.hero-media { width: min(100%, 620px); padding: 0 0 76px 0; }
.hero-media .ring { top: -28px; right: -28px; width: calc(100% + 56px); }
.hero-main { aspect-ratio: 4 / 4.9; }
.hero.hv-e .hero-media, .hero.hv-d .hero-media { left: calc(44% + 16px); }
.hero.hv-e .hero-media { top: 112px; bottom: 76px; }
@media (max-width: 900px) {
  .hero-media { width: min(94%, 460px); padding: 0 0 70px 0; margin-left: auto; margin-right: auto; }
  .hero[class*="hv-"] .hero-media { width: 100%; max-width: none; }
  .hero-main { aspect-ratio: 4 / 4.6; }
}


/* Kopfbereich Startseite: Bild größer, hinter der Schrift, ohne Bogenlinie */
.hero-media .ring { display: none; }
.hero-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: 0; }
.hero-grid > div:first-child { position: relative; z-index: 2; }
.hero-media { position: relative; z-index: 1; width: calc(100% + 8%); max-width: none; margin-left: -8%; padding: 0 0 76px 0; }
.hero .display { margin-right: -38%; }
.hero .lead { max-width: 24em; }
.hero-main { aspect-ratio: 4 / 4.8; }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero .display { margin-right: 0; }
  .hero .lead { max-width: none; }
  .hero-media { width: min(96%, 460px); margin: 0 auto; }
}
/* Nur die große Überschrift ragt ins Bild, Fließtext bleibt daneben */
@media (min-width: 901px) {
  .hero-grid { grid-template-columns: minmax(0, .74fr) minmax(0, 1.26fr); }
  .hero .display { margin-right: -46%; }
  .hero .eyebrow { white-space: normal; max-width: 22em; }
  .hero .lead { max-width: 19em; }
}

/* ==========================================================================
   Kopfbereich Startseite: ausbalancierte Fassung
   ========================================================================== */

.hero { padding: 136px 0 96px; align-items: center; min-height: min(100svh, 920px); }
.hero .eyebrow { max-width: 27em; }
.hero .display { margin: 24px 0 30px; }
.hero-media { padding: 0 0 62px 0; }
.hero-main { box-shadow: 0 60px 100px -70px rgba(36, 23, 44, .5); }
.hero-sign { right: 0; bottom: 6px; }

@media (min-width: 901px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); column-gap: clamp(20px, 2.6vw, 48px); align-items: center; }
  .hero .display { font-size: clamp(2.7rem, 4.4vw, 5rem); margin-right: -11%; }
  .hero .lead { max-width: 25em; }
  .hero-media { width: 100%; margin-left: 0; }
  .hero-main { aspect-ratio: 4 / 4.7; }
  /* Motiv nach rechts rücken, damit die Überschrift auf ruhigem Grund liegt */
  .hero-main img { object-position: 60% 16%; }
}
@media (min-width: 901px) {
  /* Überschrift liegt sichtbar auf dem Bild, Motiv weiter nach rechts */
  .hero .display { margin-right: -24%; }
  .hero-main img { object-position: 68% 16%; }
  .hero .eyebrow { font-size: 10.5px; letter-spacing: .09em; max-width: 34em; }
}

/* Neues Kopfbild: zarter Verlauf links, damit die Überschrift gut lesbar bleibt */
.hero-main { position: relative; }
.hero-main::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(100deg, rgba(246,242,235,.92) 0%, rgba(246,242,235,.55) 16%, rgba(246,242,235,0) 34%);
}
@media (min-width: 901px) {
  .hero .display { margin-right: -19%; }
  .hero-main img { object-position: 54% 12%; }
}
@media (max-width: 900px) { .hero-main::before { display: none; } }


/* ==========================================================================
   Ablauf als festgehaltene Szene: Linie läuft von 1 bis 4
   ========================================================================== */

.steps-scene { position: relative; height: 165vh; background: var(--paper); }
.steps-scene.sand { background: var(--paper-2); }
.steps-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; }
.steps-sticky > .wrap { width: 100%; }
.steps-scene .sec-head { margin-bottom: clamp(40px, 6vh, 80px); }

/* ohne Festhalten: Handy und reduzierte Bewegung */
.steps-scene.is-static { height: auto; padding: 72px 0; }
.steps-scene.is-static .steps-sticky { position: static; height: auto; display: block; }
@media (max-width: 900px) {
  .steps-scene { height: auto; padding: 72px 0; }
  .steps-sticky { position: static; height: auto; display: block; }
}


/* Linie im Ablauf endet am letzten Punkt */
.steps::before { left: var(--tx, 0); right: auto; width: var(--tlen, 100%); }
.steps.is-vertical::before { left: 23px; top: var(--tx, 0); width: 1px; height: var(--tlen, 100%); }

/* Anlässe-Karten: Vierecke mit runden Ecken, Text mittig und gross */
.occ-track { align-items: stretch; }
.occ-card {
  --w: clamp(300px, 30vw, 430px);
  border-radius: clamp(20px, 2vw, 28px);
  justify-content: center; gap: 0;
  min-height: calc(var(--w) * 0.84);
  padding: clamp(34px, 3.2vw, 46px);
}
.occ-card > div { display: flex; flex-direction: column; }
.occ-card .h3 {
  font-size: clamp(1.5rem, 2.1vw, 1.95rem); line-height: 1.16;
  margin-bottom: 16px; text-wrap: balance;
}
.occ-card p { font-size: clamp(16px, 1.2vw, 17.5px); line-height: 1.6; }
@media (max-width: 760px) {
  .occ-card { --w: 78vw; min-height: calc(var(--w) * 1.02); padding: 32px 28px; border-radius: 22px; }
  .occ-card .h3 { font-size: 1.5rem; }
  .occ-card p { font-size: 16.5px; }
}


/* ==========================================================================
   Zitat-Szene für die Unterseiten
   ========================================================================== */

.quote-scene { position: relative; height: 200vh; background: var(--paper); }
.qs-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-items: center; overflow: hidden; }
.qs-bg {
  position: absolute; inset: 0; background: var(--plum-deep);
  clip-path: inset(14% 26% 0 26% round 18vw 18vw 0 0); will-change: clip-path;
}
.qs-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; }
.quote-scene.is-slate .qs-bg { background: var(--slate-600); }
.quote-scene.is-slate .qs-bg::after { content: ""; position: absolute; inset: 0; background: rgba(40, 58, 76, .8); }
.qs-inner { position: relative; z-index: 2; text-align: center; padding: 0 var(--gutter); max-width: 1100px; }
.qs-sub { margin: 30px auto 0; max-width: 34em; font-size: clamp(1rem, 1.3vw, 1.15rem); color: rgba(246,242,235,.82); }
.quote-scene.is-static { height: auto; }
.quote-scene.is-static .qs-sticky { position: static; height: auto; padding: clamp(96px, 13vw, 160px) 0; }
.quote-scene.is-static .qs-bg { clip-path: none; }
.quote-scene.is-static .hs-line { --o: 1; }
@media (max-width: 760px) {
  .quote-scene { height: auto; }
  .qs-sticky { position: static; height: auto; padding: 88px 0; }
  .qs-bg { clip-path: none; }
  .quote-scene .hs-line { --o: 1; }
}
.occ-scroll .occ-head .lead { max-width: 30em; }
/* Unternehmen: Foto sitzt rechts, Text liegt auf ruhiger Fläche */
.quote-scene.is-slate .qs-bg img { object-position: 82% 14%; }
.quote-scene.is-slate .qs-bg::after {
  background: linear-gradient(90deg, rgba(40,58,76,.95) 0%, rgba(40,58,76,.9) 42%, rgba(40,58,76,.62) 100%);
}
@media (max-width: 760px) { .quote-scene.is-slate .qs-bg::after { background: rgba(40,58,76,.88); } }
/* Wachsende Fläche: Kachel mit runden Ecken wächst zur ganzen Fläche, Text steht von Anfang an */
.quote-scene.is-flaeche .qs-bg { clip-path: inset(12% 24% 12% 24% round 26px); }
.quote-scene.is-flaeche .hs-line { --o: 1; }
.quote-scene.is-flaeche .hs-quote { font-size: clamp(1.7rem, 3vw, 2.9rem); max-width: 16em; }
.quote-scene.is-flaeche .hs-line { text-wrap: balance; }
@media (min-width: 761px) { .quote-scene.is-flaeche .qs-inner { max-width: 74vw; } }
@media (min-width: 900px) { .quote-scene.is-flaeche .qs-inner { max-width: min(1100px, 46vw); } }
.quote-scene.is-flaeche.is-static .qs-bg { clip-path: none; }
.quote-scene.is-flaeche.is-static .qs-inner { max-width: 1100px; }
@media (max-width: 760px) {
  .quote-scene.is-flaeche .qs-bg { clip-path: none; }
  .quote-scene.is-flaeche .qs-inner { max-width: 1100px; }
}


/* Für Unternehmen: Foto im Kopfbereich, Text auf ruhiger Fläche */
.u-hero { position: relative; overflow: hidden; }
.u-hero > .wrap { position: relative; z-index: 2; }
.u-hero-photo { position: absolute; inset: 0 0 0 42%; z-index: 0; }
.u-hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 10%; }
.u-hero-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--slate-600) 0%, rgba(68,96,124,.96) 26%, rgba(68,96,124,.7) 60%, rgba(68,96,124,.45) 100%);
}
@media (max-width: 900px) {
  .u-hero-photo { inset: auto 0 0 0; height: 46%; }
  .u-hero-photo::after { background: linear-gradient(180deg, var(--slate-600) 0%, rgba(68,96,124,.88) 40%, rgba(68,96,124,.55) 100%); }
  .u-hero-photo img { object-position: 60% 8%; }
}
.u-hero-photo::after { background: linear-gradient(90deg, var(--slate-600) 0%, rgba(68,96,124,.96) 26%, rgba(56,80,104,.86) 62%, rgba(56,80,104,.78) 100%); }
@media (max-width: 900px) {
  .u-hero-photo::after { background: linear-gradient(180deg, var(--slate-600) 0%, rgba(68,96,124,.93) 38%, rgba(56,80,104,.85) 100%); }
}


/* ==========================================================================
   Vereinheitlichung, Vertrauenszeilen, Markenlogos
   ========================================================================== */

/* Nutzen-Satz und Vertrauenszeile */
.hero-benefit { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(1.1rem, 1.5vw, 1.35rem); color: var(--plum); margin: -6px 0 26px; max-width: 24em; }
.trust { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 26px 0 0; padding: 0; font-size: 13.5px; color: var(--ink-3); }
.trust li { display: flex; align-items: center; gap: 8px; }
.trust li::before { content: ""; width: 12px; height: 7px; border: 1.5px solid var(--lilac-500); border-bottom: 0; border-radius: 12px 12px 0 0; }

/* Überschrift über den Zahlen */
.facts-title { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--label); margin: 0 0 clamp(28px, 4vw, 44px); }

/* Hervorgehobene Preiszeile */
.price.is-key dt { color: var(--lilac-300); }
.section:not(.dark) .price.is-key dt { color: var(--lilac-600); }
.price.is-key dd { color: var(--white); }
.section:not(.dark) .price.is-key dd { color: var(--ink); }

/* Markenlogos */
.logos-sec { padding: clamp(56px, 7vw, 88px) 0; }
.logos-title { text-align: center; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--label); margin: 0 0 clamp(28px, 3vw, 40px); }
.logos { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(14px, 2vw, 28px); }
.logo-slot {
  display: grid; place-items: center; min-width: 150px; height: 74px; padding: 0 22px;
  border: 1px dashed var(--line); border-radius: 4px; background: var(--white);
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
.logo-slot .todo { background: none; color: var(--ink-3); }

/* Formate wie die übrigen Karten im Bogen */
.fcard { border-radius: 140px 140px 0 0; padding-top: 52px; border-top: 0; }
.fcard:hover { border-top: 0; }
.price-hint { margin: clamp(28px, 3vw, 40px) 0 0; font-size: 15px; color: var(--ink-3); max-width: 46em; }

/* Kontaktseite: Kopfbereich mit Foto */
.kontakt-hero { padding-bottom: clamp(40px, 5vw, 64px); }
.kontakt-hero .grid { align-items: center; }
.kontakt-photo { aspect-ratio: 4 / 3.2; overflow: hidden; }
.kontakt-photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .kontakt-photo { display: none; } }
/* Feinschliff nach der Prüfung */
.marquee { background: var(--lilac-600); }
.t-violet { background: var(--lilac-600); }
.kontakt-hero + .section { padding-top: clamp(20px, 3vw, 40px); }
.kontakt-photo { aspect-ratio: 4 / 4.2; }
.kontakt-hero .trust { margin-top: 22px; }

/* ==========================================================================
   Karten einheitlich: Vierecke mit runden Ecken statt Bogen
   ========================================================================== */

.pcard {
  border-radius: clamp(20px, 2vw, 28px);
  padding: clamp(52px, 5vw, 64px) clamp(26px, 2.6vw, 34px) clamp(36px, 3.4vw, 44px);
  min-height: 300px; justify-content: center;
}
.pcard.is-featured { min-height: 340px; }
.pcard-label { top: 22px; }

.fcard {
  border-radius: clamp(20px, 2vw, 28px);
  padding: clamp(32px, 3vw, 40px) 30px 32px;
  min-height: 440px;
}

/* Nach der festgehaltenen Ablauf-Szene endet der Weissraum, der Folgeabschnitt
   setzt direkt an. Sonst entsteht unten eine halbe Bildschirmhoehe Leere. */
.steps-scene { height: 148vh; }
.steps-scene + .section { padding-top: 0; }
@media (max-width: 900px) { .steps-scene + .section { padding-top: clamp(56px, 8vw, 96px); } }

/* ==========================================================================
   Bilder als Kacheln mit runden Ecken
   ========================================================================== */

:root { --radius-arch: clamp(20px, 2vw, 28px); }
.arch { aspect-ratio: 4 / 4.7; }
.about .arch { aspect-ratio: 4 / 4.9; }
.kontakt-photo { border-radius: var(--radius-arch); }
.load .arch-in {
  clip-path: inset(100% 0 0 0 round var(--radius-arch));
  animation: kachelIn 1.4s var(--ease) .2s forwards;
}
@keyframes kachelIn { to { clip-path: inset(0 0 0 0 round var(--radius-arch)); } }
.arch-wrap .ring { display: none; }

/* ==========================================================================
   Handy: auf das Wesentliche reduziert
   ========================================================================== */

@media (max-width: 760px) {
  /* Abschnitte ruecken zusammen */
  .section { padding: clamp(52px, 11vw, 72px) 0; }
  .section.tight { padding: clamp(40px, 9vw, 56px) 0; }

  /* Kopfbereich: eine Handlung, kein Beiwerk */
  .hero { padding: 96px 0 32px; }
  .hero-grid { gap: 28px; }
  .hero-actions { gap: 12px; }
  .hero-actions .btn.ghost, .hero-actions .btn.ghost-light { display: none; }
  .hero-sign { display: none; }
  .hero .hero-media { max-width: 272px; margin: 0 auto; }
  .hero .arch-wrap { width: 100%; max-width: 272px; margin: 0 auto; }

  /* Zahlen: zwei Angaben genuegen */
  .facts-a { grid-template-columns: 1fr 1fr; gap: 22px 18px; }
  .facts-a > div:nth-child(n+3) { display: none; }
  .facts-a .num { font-size: 2.3rem; }

  /* Laufband ist Zierde */
  .marquee { display: none; }

  /* Ablauf und Angebot kompakter */
  .steps { gap: 24px; }
  .offer { gap: 26px; }
  .section.dark { padding: clamp(56px, 12vw, 80px) 0; }

  /* Bild im Abschnitt ueber mich kleiner */
  .about .arch-wrap { width: 100%; max-width: 268px; margin: 0 auto; }

  /* Fusszeile kompakt */
  .footer-top { gap: 22px; }
}

/* ==========================================================================
   Handy: Menueleiste deckt ab, Foto tritt zurueck
   ========================================================================== */

@media (max-width: 760px) {
  /* Kein Durchscheinen mehr: die Leiste ist beim Scrollen deckend. */
  .site-header.scrolled {
    background: var(--paper);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    box-shadow: 0 1px 0 var(--line);
  }
  .theme-slate .site-header.scrolled { background: var(--paper); }
  .site-header .wrap { height: 68px; }

  /* Foto als ruhiger Akzent, nicht als Blickfang */
  .hero .hero-media,
  .hero .arch-wrap { max-width: 208px; }
  .about .arch-wrap { max-width: 208px; }
  .page-hero .arch-wrap { max-width: 208px !important; width: 100% !important; }
}

/* ==========================================================================
   Signet: der Bogen dreht sich um den Punkt und pendelt sich ein
   Drei Bewegungen laufen gleichzeitig und unabhaengig voneinander:
   die Drehung um den Kern, die Weite (naeher und weiter weg) und
   die Laenge des Bogens. Dadurch wirkt es schwungvoll und trotzdem weich.
   ========================================================================== */

.brand svg { overflow: visible; }   /* damit der Bogen beim Drehen nicht abgeschnitten wird */
.brand svg .sig-bogen,
.brand svg .sig-punkt {
  transform-box: view-box;
  transform-origin: 16px 25px;
}

@media (prefers-reduced-motion: no-preference) {
  .brand.sig-an svg .sig-bogen {
    animation:
      sigDreh   1.9s linear                    .08s both,
      sigWeite  1.9s cubic-bezier(.3,.7,.3,1)  .08s both,
      sigLaenge 1.9s ease-in-out               .08s both;
  }
  .brand.sig-an svg .sig-punkt {
    animation: sigKern 1.3s cubic-bezier(.22,.9,.28,1) .08s both;
  }
  /* Das Drehen des ganzen Zeichens beim Zeigen entfaellt, der Bogen uebernimmt. */
  .brand:hover svg { transform: none; }
}

/* Anderthalb Umdrehungen, die lange und weich auslaufen */
@keyframes sigDreh {
  0%   { rotate: -640deg; animation-timing-function: cubic-bezier(.17,.72,.3,1); }
  66%  { rotate: 19deg;   animation-timing-function: cubic-bezier(.4,0,.34,1); }
  81%  { rotate: -8deg;   animation-timing-function: cubic-bezier(.4,0,.34,1); }
  91%  { rotate: 3deg;    animation-timing-function: cubic-bezier(.4,0,.34,1); }
  97%  { rotate: -1deg;   animation-timing-function: cubic-bezier(.4,0,.34,1); }
  100% { rotate: 0deg; }
}

/* Weite: der Bogen kommt naeher an den Kern und geht wieder weiter weg */
@keyframes sigWeite {
  0%   { scale: .62;  opacity: .32; }
  18%  { scale: 1.14; opacity: 1; }
  40%  { scale: .78; }
  60%  { scale: 1.08; }
  78%  { scale: .95; }
  90%  { scale: 1.02; }
  100% { scale: 1;    opacity: 1; }
}

/* Laenge: aus einem kurzen Strich wird der volle Bogen */
@keyframes sigLaenge {
  0%   { stroke-dasharray: 16 100; stroke-dashoffset: -42; }
  17%  { stroke-dasharray: 99 100; stroke-dashoffset: -1; }
  38%  { stroke-dasharray: 48 100; stroke-dashoffset: -26; }
  58%  { stroke-dasharray: 100 100; stroke-dashoffset: 0; }
  100% { stroke-dasharray: 100 100; stroke-dashoffset: 0; }
}

/* Der Kern setzt sich zuerst und bleibt dann ruhig */
@keyframes sigKern {
  0%   { transform: scale(.25); opacity: 0; }
  30%  { transform: scale(1.16); opacity: 1; }
  58%  { transform: scale(.95); }
  80%  { transform: scale(1.03); }
  100% { transform: scale(1); opacity: 1; }
}

/* ==========================================================================
   Grosszahl-Szene und Schritt-Szene
   Eine Aussage pro Bildschirm. Der Abschnitt bleibt stehen, waehrend die
   einzelnen Aussagen nacheinander erscheinen und wieder weiterziehen.
   ========================================================================== */

.gz { position: relative; height: 420vh; }
.gz-buehne { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  display: grid; place-items: center; }
.gz-inner { position: relative; width: min(var(--max), 100% - var(--gutter) * 2); text-align: center; }
.gz-karte { position: absolute; inset: auto 0 auto 0; top: 50%; opacity: 0;
  will-change: opacity, transform; }
.gz-zahl { font-family: var(--serif); font-weight: 300; color: var(--plum);
  font-size: clamp(7rem, 23vw, 19rem); line-height: .82; letter-spacing: -.045em; }
.gz-text { margin: clamp(18px, 3vh, 38px) auto 0; max-width: 17em;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem); color: var(--ink-2); line-height: 1.5; }

.sz { position: relative; height: 430vh; background: var(--paper-2); }
.sz-buehne { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  display: grid; place-items: center; }
.sz-gitter { display: grid; grid-template-columns: .82fr 1fr; gap: clamp(40px, 6vw, 96px);
  align-items: center; width: 100%; }
.sz-bild { position: relative; border-radius: var(--radius-arch); overflow: hidden;
  aspect-ratio: 4 / 5; background: var(--lilac-soft); }
/* Ein Bild je Schritt, übereinander gestapelt: das nächste blendet über dem vorigen ein */
.sz-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sz-bild img:not(:first-child) { opacity: 0; will-change: opacity; }
.sz-karte-bild { display: none; }
.sz-ueber { font-family: var(--serif); font-weight: 300; letter-spacing: -.02em;
  font-size: clamp(1.1rem, 1.3vw, 1.25rem); color: var(--ink-3); margin: 0 0 clamp(20px, 3vh, 34px); }
.sz-texte { position: relative; min-height: 360px; }
.sz-karte { position: absolute; inset: 0; opacity: 0; will-change: opacity, transform; }
.sz-nr { display: block; font-family: var(--serif); font-style: italic; font-weight: 300;
  color: var(--plum); font-size: clamp(2.4rem, 4.6vw, 3.8rem); line-height: 1; margin-bottom: 16px; }
.sz-titel { font-family: var(--serif); font-weight: 300; letter-spacing: -.02em;
  font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.1; margin: 0 0 20px; }
.sz-text { margin: 0; max-width: 26em; color: var(--ink-2);
  font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.7; }

/* Fortschritt: ein kurzer Strich je Aussage */
.gz-leiste, .sz-leiste {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: clamp(24px, 5vh, 56px); display: flex; gap: 10px; align-items: center;
}
.gz-leiste i, .sz-leiste i { display: block; width: 34px; height: 2px;
  background: var(--line); position: relative; overflow: hidden; }
.gz-leiste i::after, .sz-leiste i::after { content: ""; position: absolute; inset: 0;
  background: var(--plum); transform: scaleX(var(--f, 0)); transform-origin: left; }

/* Ohne Festhalten: Handy und reduzierte Bewegung, alles untereinander */
.gz.is-static, .sz.is-static { height: auto; }
.gz.is-static .gz-buehne, .sz.is-static .sz-buehne {
  position: static; height: auto; display: block; padding: clamp(56px, 11vw, 84px) 0; }
.gz.is-static .gz-karte, .sz.is-static .sz-karte {
  position: static; opacity: 1 !important; transform: none !important; }
.gz.is-static .gz-karte { margin-bottom: clamp(48px, 9vw, 72px); }
.gz.is-static .gz-karte:last-child { margin-bottom: 0; }
.sz.is-static .sz-karte { margin-bottom: clamp(36px, 7vw, 56px); }
.sz.is-static .sz-karte:last-child { margin-bottom: 0; }
.gz.is-static .gz-leiste, .sz.is-static .sz-leiste { display: none; }
.gz.is-static .gz-zahl { font-size: clamp(5rem, 30vw, 9rem); }
.sz.is-static .sz-gitter { grid-template-columns: 1fr; }
/* Untereinander steht jedes Bild bei seinem Schritt */
.sz.is-static .sz-bild { display: none; }
/* Kleines Bild neben dem Text, abwechselnd links und rechts */
.sz.is-static .sz-karte { display: flex; align-items: center; gap: clamp(18px, 5vw, 32px); }
.sz.is-static .sz-karte:nth-child(even) { flex-direction: row-reverse; }
.sz.is-static .sz-karte-bild { display: block; flex: none; width: clamp(96px, 30vw, 160px); height: auto;
  border-radius: var(--radius-arch); }
.sz.is-static .sz-karte-text { flex: 1; min-width: 0; }
.sz.is-static .sz-texte { min-height: 0; }
.sz.is-static .sz-nr { font-size: 2rem; margin-bottom: 10px; }
.sz.is-static .sz-titel { font-size: clamp(1.6rem, 6vw, 2rem); margin-bottom: 12px; }

/* ==========================================================================
   Vorhang: der Auftakt bleibt stehen, der Inhalt schiebt sich als Blatt
   darueber. Der Satz tritt dabei leicht zurueck.
   ========================================================================== */

.vh-szene { position: relative; height: 200vh; }
.vh-halt {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  display: grid; place-items: center; overflow: hidden;
  background: var(--paper-2);
}
.vh-txt {
  width: min(var(--max), 100% - var(--gutter) * 2); text-align: center;
  transform: scale(var(--sc, 1)); opacity: var(--op, 1);
}
.vh-txt .display { margin: 0; }

.vh-blatt {
  position: relative; z-index: 2; margin-top: -100vh; margin-top: -100svh;
  background: var(--paper);
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -30px 60px -34px rgba(36, 23, 44, .42);
}

/* Handy und reduzierte Bewegung: kein Vorhang, der Satz steht einfach oben */
@media (max-width: 900px) {
  .vh-szene { height: auto; }
  .vh-halt { position: static; height: auto; padding: calc(68px + 56px) 0 56px; }
  .vh-txt { transform: none !important; opacity: 1 !important; margin: 0 auto; }
  .vh-blatt { margin-top: 0; border-radius: 28px 28px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .vh-szene { height: auto; }
  .vh-halt { position: static; height: auto; padding: 140px 0 56px; }
  .vh-txt { transform: none !important; opacity: 1 !important; }
  .vh-blatt { margin-top: 0; }
}

/* ==========================================================================
   Maskenhero: die Schrift ist mit dem Foto gefuellt, das Bild wandert
   beim Scrollen durch die Buchstaben.
   ========================================================================== */

.mh {
  position: relative; background: var(--plum-deep);
  min-height: 100vh; min-height: 100svh;
  display: grid; place-items: center;
  padding: calc(84px + clamp(40px, 6vw, 80px)) 0 clamp(56px, 8vw, 100px);
  overflow: hidden;
}
.mh-inner { text-align: center; }
.mh-titel {
  margin: 0 0 clamp(30px, 4vh, 52px);
  font-family: var(--serif); font-weight: 300; font-optical-sizing: auto;
  font-size: clamp(3rem, 9.5vw, 8.5rem); line-height: .96; letter-spacing: -.035em;
  /* Ein heller Schleier ueber dem Foto, damit die Buchstaben auf Pflaume tragen */
  background-image: linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,.22)), var(--mh-bild);
  background-size: cover;
  background-position: center var(--mh-pos, 42%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
/* Die Zeilen duerfen hier weder beschnitten noch bewegt werden,
   sonst faellt die Fuellung aus dem Foto weg. */
.mh-titel .line { clip-path: none; }
.load .mh-titel .line > span { transform: none; animation: none; }
.load .mh-titel { animation: fade 1.4s var(--ease) .15s both; }
.mh-titel em { font-style: italic; color: inherit; }   /* auch das Akzentwort wird vom Foto gefuellt */
.mh .hero-actions { justify-content: center; }

/* Kopfleiste ueber dem dunklen Auftakt hell setzen */
html:not(.menu-open) .kopf-dunkel .site-header:not(.scrolled) .brand-name,
html:not(.menu-open) .kopf-dunkel .site-header:not(.scrolled) .nav a:not(.btn),
html:not(.menu-open) .kopf-dunkel .site-header:not(.scrolled) .menu-toggle { color: var(--paper); }
html:not(.menu-open) .kopf-dunkel .site-header:not(.scrolled) .brand-name small { color: rgba(246,242,235,.6); }
html:not(.menu-open) .kopf-dunkel .site-header:not(.scrolled) .brand svg { color: var(--lilac-300); }
html:not(.menu-open) .kopf-dunkel .site-header:not(.scrolled) .nav a::after { background: var(--paper); }
html:not(.menu-open) .kopf-dunkel .site-header:not(.scrolled) .nav .btn {
  --bg: var(--paper); --fg: var(--ink); border-color: var(--paper);
}

/* ==========================================================================
   Zahlen als kleine Karten im Viereck, Text daneben
   ========================================================================== */

.zw-gitter { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 80px); align-items: center; }
.zw-text .lead { max-width: 24em; }
.zw-ort {
  margin: 26px 0 0; font-size: 12px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--plum);
}
.zw-karten { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.4vw, 18px); }
.zk {
  background: var(--white); border-radius: clamp(20px, 2vw, 28px);
  padding: clamp(24px, 2.6vw, 34px); aspect-ratio: 1 / .82;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
.zk:hover { transform: translateY(-3px); box-shadow: 0 26px 56px -36px rgba(36,23,44,.42); }
.zk b {
  font-family: var(--serif); font-style: italic; font-weight: 300; color: var(--plum);
  font-size: clamp(2.4rem, 3.4vw, 3.2rem); line-height: 1; letter-spacing: -.02em;
}
.zk span { font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }

/* ==========================================================================
   Bildwechsel im festen Rahmen
   ========================================================================== */

.bw { position: relative; height: 270vh; background: var(--paper); }
.bw-buehne {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  display: grid; place-items: center; overflow: hidden;
  padding: 96px 0 44px;   /* Platz fuer die Kopfleiste */
}
.bw-kopf { max-width: 40em; margin-bottom: clamp(28px, 4vh, 48px); }
.bw-kopf .lead { margin-top: 16px; }
.bw-gitter { display: grid; grid-template-columns: .72fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.bw-rahmen {
  position: relative; border-radius: var(--radius-arch); overflow: hidden;
  aspect-ratio: 4 / 4.7; background: var(--lilac-soft);
  width: 100%; max-width: 340px;   /* damit Ueberschrift, Bild und Text zusammen auf einen Schirm passen */
}
.bw-rahmen img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 16%; opacity: 0;
}
.bw-texte { position: relative; min-height: 250px; }
.bw-karte { position: absolute; inset: 0; opacity: 0; will-change: opacity, transform; }
.bw-nr {
  display: block; font-family: var(--serif); font-style: italic; font-weight: 300;
  color: var(--plum); font-size: clamp(2rem, 3.4vw, 2.8rem); line-height: 1; margin-bottom: 12px;
}
.bw-titel {
  font-family: var(--serif); font-weight: 300; letter-spacing: -.02em;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.1; margin: 0 0 16px;
}
.bw-karte p { margin: 0; max-width: 26em; color: var(--ink-2); line-height: 1.7; }
.bw-leiste {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: clamp(22px, 4vh, 44px); display: flex; gap: 10px;
}
.bw-leiste i { display: block; width: 34px; height: 2px; background: var(--line); position: relative; overflow: hidden; }
.bw-leiste i::after { content: ""; position: absolute; inset: 0; background: var(--plum);
  transform: scaleX(var(--f, 0)); transform-origin: left; }

/* ---------- Handy und reduzierte Bewegung ---------- */
@media (max-width: 900px) {
  .mh { min-height: 0; padding: calc(68px + 44px) 0 56px; }
  .mh-titel { font-size: clamp(2.8rem, 13vw, 4.4rem); }
  .zw-gitter { grid-template-columns: 1fr; gap: 36px; }
  .zk { aspect-ratio: auto; padding: 22px; gap: 14px; }
  .zk b { font-size: 2.2rem; }
  .bw { height: auto; }
  .bw-buehne { position: static; height: auto; display: block; padding: clamp(56px,11vw,84px) 0; }
  .bw-gitter { grid-template-columns: 1fr; }
  .bw-rahmen { max-width: 240px; margin: 0 auto clamp(28px,7vw,44px); }
  .bw-rahmen img:first-child { opacity: 1 !important; }
  .bw-texte { position: static; min-height: 0; }
  .bw-karte { position: static; opacity: 1 !important; transform: none !important;
    margin-bottom: clamp(30px,7vw,46px); }
  .bw-karte:last-child { margin-bottom: 0; }
  .bw-leiste { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bw { height: auto; }
  .bw-buehne { position: static; height: auto; display: block; padding: 72px 0; }
  .bw-karte { position: static; opacity: 1 !important; transform: none !important; margin-bottom: 40px; }
  .bw-rahmen img:first-child { opacity: 1 !important; }
  .bw-leiste { display: none; }
}

/* Bildwechsel: Liste auf der letzten Folie, Knopf unter der Szene */
.bw-punkte { margin: 0; padding: 0; list-style: none; }
.bw-punkte li {
  position: relative; padding-left: 22px; margin-bottom: 10px;
  color: var(--ink-2); font-size: 16.5px; line-height: 1.5;
}
.bw-punkte li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--plum);
}
.bw-fuss { margin-top: clamp(24px, 3vh, 40px); }
@media (max-width: 900px) { .bw-fuss { margin-top: 30px; } }

/* Freigestelltes Portrait ueber dem Text; unten weich ausgeblendet,
   damit der Text leicht ueber das Bild laufen kann */
.zw-portrait {
  position: relative; width: min(260px, 58%);
  margin: 0 0 clamp(-56px, -4vw, -40px);
}
.zw-portrait img {
  position: relative; width: 100%; height: auto; display: block;
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 96%);
          mask-image: linear-gradient(to bottom, #000 62%, transparent 96%);
}
.zw-portrait + .lead { position: relative; z-index: 1; }
@media (max-width: 900px) {
  .zw-portrait { width: 200px; margin-bottom: -36px; }
}

/* Bildwechsel: Kopfzeile zweispaltig, damit die Flaeche nicht linkslastig wirkt.
   Gilt nur dort, wo neben der Ueberschrift auch ein Einleitungstext steht. */
.bw-kopf:has(.lead) {
  display: grid; grid-template-columns: .72fr 1fr;
  gap: clamp(32px, 5vw, 72px); align-items: start;
  max-width: none;
}
.bw-kopf:has(.lead) .lead { margin-top: 0; max-width: 32em; }

/* Bild und Folientext oben buendig: sonst steht der Text in der Mitte und
   laesst oben wie unten ein Loch. Eine Haarlinie auf Hoehe der Bildoberkante
   trennt die Einleitung vom Folientext und bindet beide Spalten zusammen. */
.bw-buehne:has(.bw-kopf .lead) .bw-kopf { margin-bottom: clamp(36px, 6vh, 72px); }
.bw-buehne:has(.bw-spalte) .bw-gitter { align-items: stretch; }
.bw-buehne:has(.bw-spalte) .bw-rahmen { max-width: 310px; }

/* Rechte Spalte: Haarlinie oben auf Hoehe der Bildoberkante, Fortschritt
   unten auf Hoehe der Bildunterkante. Dazwischen steht der Folientext. */
.bw-spalte { display: flex; flex-direction: column; justify-content: space-between; }
.bw-spalte .bw-texte {
  border-top: 1px solid var(--line); padding-top: clamp(22px, 3vh, 36px);
  min-height: 0; flex: 1 1 auto;
}
.bw-spalte .bw-karte { inset: auto 0 auto 0; }
.bw-spalte .bw-leiste {
  position: static; transform: none; left: auto; bottom: auto;
  justify-content: flex-start; padding-top: clamp(18px, 2.4vh, 28px);
}

@media (max-width: 900px) {
  .bw-spalte { display: block; }
  .bw-spalte .bw-texte { border-top: 0; padding-top: 0; }
  .bw-spalte .bw-leiste { display: none; }
  /* Die Illustration darf auf dem Handy groesser stehen, weil die Szene dort
     nicht mehr auf eine Bildschirmhoehe passen muss. */
  .bw-buehne:has(.bw-spalte) .bw-rahmen { max-width: 300px; }
}
@media (max-width: 900px) {
  .bw-kopf:has(.lead) { grid-template-columns: 1fr; gap: 18px; }
  .bw-kopf:has(.lead) .lead { margin-top: 0; }
}

/* Illustrationen sind 4:5 und als Ganzes gestaltet: Rahmen genau so hoch,
   damit nichts abgeschnitten wird. */
.bw-rahmen:has(img[src*="/mg-"]) { aspect-ratio: 4 / 5; background: #EDE7F7; }

/* Handy: Das Hero-Foto der Varianten D und E stand absolut positioniert halb
   ausserhalb des Bildschirms, weil eine spaetere Regel left und top wieder
   gesetzt hat. Hier steht es wieder unter dem Text. */
@media (max-width: 900px) {
  .hero.hv-d .hero-media,
  .hero.hv-e .hero-media {
    position: relative; left: auto; right: auto; top: auto; bottom: auto;
    width: 100%; max-width: 244px; margin: 0 auto; padding: 0 0 48px;
  }
  .hero.hv-d .hero-main,
  .hero.hv-e .hero-main { height: auto; aspect-ratio: 4 / 4.6; }
}

/* ==========================================================================
   Kopfbereich „Für Dich“: Bild links, Text rechts
   Das Bild ist kleiner als ein Vollbild, aber höher als der Textblock.
   Eigene Klassen, damit die älteren Hero-Varianten nicht hineinwirken.
   ========================================================================== */

.hero.fd-hero {
  display: block; min-height: 0;
  padding: clamp(120px, 12vw, 160px) 0 clamp(72px, 8vw, 112px);
}
.fd-gitter {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  column-gap: clamp(48px, 7vw, 120px); align-items: center;
}

/* Bild: Hochformat mit zarter Fläche dahinter, passt immer auf den Schirm */
.fd-bild {
  position: relative; justify-self: start;
  width: min(100%, calc((100svh - 220px) * .8)); min-width: min(100%, 340px);
  padding: 0 0 28px 28px;
}
.fd-bild::before {
  content: ""; position: absolute; left: 0; bottom: 0; width: calc(100% - 28px); height: calc(100% - 28px);
  border-radius: var(--radius-arch); background: var(--lilac-100);
}
.fd-foto {
  position: relative; z-index: 1; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: var(--radius-arch);
  box-shadow: 0 50px 90px -60px rgba(36, 23, 44, .55);
}
.fd-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }

/* Text: ruhiger Block, keine Überlappung mit dem Bild */
.hero.fd-hero .display {
  margin: 0 0 clamp(22px, 2.4vw, 32px);
  font-size: clamp(2.8rem, 5vw, 5.6rem);
}
.hero.fd-hero .lead { max-width: 26em; margin: 0; }
.hero.fd-hero .hero-actions { margin-top: clamp(28px, 3vw, 40px); }

/* Tablet und Handy: Text zuerst, Bild darunter als ruhiger Akzent */
@media (max-width: 900px) {
  .hero.fd-hero { padding: 112px 0 56px; }
  .fd-gitter { grid-template-columns: 1fr; row-gap: 40px; }
  .fd-text { order: 1; }
  .fd-bild { order: 2; justify-self: center; width: min(100%, 340px); min-width: 0; padding: 0 0 20px 20px; }
  .fd-bild::before { width: calc(100% - 20px); height: calc(100% - 20px); }
  .hero.fd-hero .display { font-size: clamp(2.6rem, 8vw, 3.6rem); }
}
@media (max-width: 760px) {
  .hero.fd-hero { padding: 96px 0 40px; }
  .fd-gitter { row-gap: 32px; }
  .fd-bild { width: min(100%, 248px); padding: 0 0 16px 16px; }
  .fd-bild::before { width: calc(100% - 16px); height: calc(100% - 16px); }
  .hero.fd-hero .display { font-size: 2.9rem; }
}

/* ==========================================================================
   Bogenhero: die Zeichnung fuellt den Kopfbereich, der Text steht im Bogen.
   Der Bogen ist die Form des Signets und steht auf der Unterkante wie ein
   Durchgang. Niemand ist abgebildet, damit sich jeder hineinsetzen kann.
   ========================================================================== */

.hero.bh {
  position: relative; display: grid; align-items: end; overflow: hidden;
  min-height: min(92svh, 880px); padding: 0;
  background: var(--white);
}
/* Die Zeichnung fuellt den Kopfbereich. Ihre Mitte ist bewusst leer,
   dort steht die Tafel. */
.bh-raum { position: absolute; inset: 0; overflow: hidden; }
.bh-raum img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: 50% 100%;
}

.bh-inner {
  position: relative; z-index: 2;
  width: min(var(--max), 100% - var(--gutter) * 2);
  margin: 0 auto; display: flex; justify-content: center;
  padding-top: clamp(104px, 13vh, 168px);
}

.tafel {
  width: min(620px, 94%); text-align: center;
  background: var(--plum-deep); color: var(--white);
  border-radius: 999px 999px 0 0;
  padding: clamp(56px, 5.6vw, 88px) clamp(30px, 3.4vw, 54px) clamp(40px, 4vw, 60px);
  box-shadow: 0 -34px 76px -44px rgba(36, 23, 44, .55);
}
.tafel .signet {
  display: block; width: 46px; height: 46px;
  margin: 0 auto clamp(18px, 2.2vh, 26px); color: var(--lilac);
}
.tafel .signet svg { width: 100%; height: 100%; display: block; }

.hero.bh .display {
  margin: 0 0 clamp(16px, 1.8vw, 22px); color: var(--white);
  font-size: clamp(2.2rem, 3.8vw, 3.6rem);
}
.hero.bh .display i, .hero.bh .display em { color: var(--lilac); }
.hero.bh .lead { margin: 0 auto; max-width: 25em; color: rgba(252, 250, 246, .78); }
.hero.bh .hero-actions { margin-top: clamp(26px, 3vw, 36px); justify-content: center; }

/* Mittlere Breiten: Tafel und Sessel zusammen zurueckgenommen, damit die
   Sessel nicht zu Schlitzen hinter der Tafel werden. */
@media (max-width: 1200px) {
  .tafel { width: min(540px, 94%); }
  .bh-platz { height: clamp(180px, 38%, 320px); }
  .bh-platz.links  { left: clamp(8px, 2vw, 40px); }
  .bh-platz.rechts { right: clamp(8px, 2vw, 40px); }
}

/* Handy: die Tafel nimmt die volle Breite. Die Zeichnung steht deshalb als
   breites Band darueber, sonst bliebe nur ihre leere Mitte sichtbar. */
@media (max-width: 900px) {
  .hero.bh { min-height: 0; }
  /* unter dem Kopf beginnen, sonst stehen die Halmspitzen hinter dem Logo */
  .bh-raum { inset: 66px 0 auto 0; height: 252px; }
  .bh-inner { padding-top: 340px; }
  .tafel { width: 100%; padding: clamp(46px, 10vw, 64px) clamp(24px, 6vw, 36px) clamp(32px, 7vw, 44px); }
  .hero.bh .display { font-size: clamp(2rem, 7vw, 2.6rem); }
}
@media (max-width: 760px) {
  .bh-raum { height: 224px; }
  .bh-inner { padding-top: 308px; }
  .hero.bh .hero-actions .btn.ghost-light { display: inline-flex; }
}

/* Schritt-Szene (Für Unternehmen): Bühne so hoch wie ihr Inhalt, ohne Leerraum davor.
   Sie hält mittig an, die Schritte wechseln direkt ohne Überblenden. */
#formate { padding-bottom: clamp(40px, 5vw, 72px); }
.sz:not(.is-static) .sz-buehne { height: auto; display: block; padding: clamp(16px, 2.5vw, 32px) 0 clamp(64px, 9vh, 96px); }
.sz:not(.is-static) .sz-karte { display: flex; flex-direction: column; justify-content: center; transition: none; }
.sz:not(.is-static) .sz-bild img { transition: none; will-change: auto; }
.sz-leiste i::after { transition: transform .2s var(--ease); }

/* ==========================================================================
   Über mich: das Frontalfoto steht links und bleibt beim Scrollen stehen,
   rechts laufen Begrüßung, Text, Schwerpunkte und Abschlüsse daran vorbei.
   ========================================================================== */

.um { padding: clamp(120px, 12vw, 160px) 0 clamp(88px, 10vw, 140px); }
.um-gitter {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  column-gap: clamp(48px, 7vw, 120px); align-items: start;
}

/* Foto: so hoch wie der Bildschirm erlaubt, mit zarter Fliederfläche dahinter */
.um-bild {
  position: sticky; top: 112px;
  height: calc(100svh - 150px); max-height: 860px;
  padding: 0 0 24px 24px;
}
.um-bild::before {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: calc(100% - 24px); height: calc(100% - 24px);
  border-radius: var(--radius-arch); background: var(--lilac-100);
}
.um-foto {
  position: relative; z-index: 1; height: 100%; overflow: hidden;
  border-radius: var(--radius-arch); background: var(--paper-3);
  box-shadow: 0 50px 90px -60px rgba(36, 23, 44, .55);
}
.um-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }

/* Rechte Spalte */
.um-inhalt { padding-top: clamp(8px, 4vh, 48px); max-width: 36em; }
.um-inhalt .display { margin: 0 0 clamp(22px, 3vh, 32px); font-size: clamp(3rem, 5.6vw, 6rem); }
.um-frage {
  font-family: var(--serif); font-weight: 300; letter-spacing: -.012em;
  font-size: clamp(1.3rem, 1.9vw, 1.75rem); line-height: 1.32;
  margin: 0 0 12px; text-wrap: pretty;
}
.um-zusatz { margin: 0; color: var(--ink-3); font-size: 15.5px; }
.um-text { margin-top: clamp(48px, 7vh, 72px); padding-top: clamp(32px, 4vh, 44px); border-top: 1px solid var(--line); }
.um-text p { font-size: clamp(1.02rem, 1.2vw, 1.12rem); }
.um-text em.plum { font-family: var(--serif); font-size: 1.12em; }
.um-h2 {
  margin: clamp(52px, 7vh, 80px) 0 clamp(18px, 2.4vh, 26px);
  font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--label);
}

/* Schwerpunkte: vier Felder in dunklem Flieder, Schrift hell und mittig */
.um-themen {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.um-themen li {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 116px; padding: 20px 24px;
  background: var(--lilac-600); color: var(--paper); border-radius: 16px;
  font-family: var(--serif); font-weight: 300; font-size: 1.2rem; line-height: 1.25;
  text-wrap: balance;
}
/* Abschlüsse: Punkt statt Nummer */
.ql-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--plum);
  align-self: start; margin-top: .85em;
}
.um .ql-zeile { grid-template-columns: 26px minmax(0, 1fr) auto; }
@media (max-width: 640px) { .um .ql-zeile { grid-template-columns: 22px minmax(0, 1fr); } }
.um .ql-titel { font-size: clamp(1.3rem, 1.8vw, 1.6rem); }
.um .ql-zeile { padding: 20px 0; }

/* Tablet und Handy: Foto oben, nicht festgehalten */
@media (max-width: 900px) {
  .um { padding-top: 104px; }
  .um-gitter { grid-template-columns: 1fr; row-gap: 40px; }
  .um-bild { position: relative; top: auto; height: auto; max-height: none; width: min(100%, 340px); padding: 0 0 18px 18px; }
  .um-bild::before { width: calc(100% - 18px); height: calc(100% - 18px); }
  .um-foto { height: auto; aspect-ratio: 4 / 5; }
  .um-inhalt { padding-top: 0; }
}
@media (max-width: 760px) {
  .um-bild { width: min(100%, 290px); }
  .um-inhalt .display { font-size: clamp(3rem, 15vw, 4rem); }
}
@media (max-width: 560px) {
  .um-themen { grid-template-columns: 1fr; }
}

/* Weiterbildung & Abschlüsse: ruhige Liste mit Nummer, Titel, Zusatz und Status */
.ql { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ql-zeile {
  position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 6px 20px; align-items: baseline;
  padding: clamp(24px, 2.8vw, 34px) 0; border-bottom: 1px solid var(--line);
}
.ql-zeile::before {
  content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px;
  background: var(--plum); transform: scaleX(0); transform-origin: left;
  transition: transform .8s var(--ease);
}
.ql-zeile:hover::before { transform: scaleX(1); }
.ql-n { font-family: var(--serif); font-style: italic; font-size: 1.25rem; color: var(--plum); }
.ql-titel {
  font-family: var(--serif); font-weight: 300; letter-spacing: -.015em;
  font-size: clamp(1.45rem, 2.3vw, 2.05rem); line-height: 1.15;
  transition: color .5s var(--ease);
}
.ql-zeile:hover .ql-titel { color: var(--plum); }
.ql-zusatz { margin: 8px 0 0; color: var(--ink-3); font-size: 15px; }
.ql-status {
  align-self: center; white-space: nowrap;
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--lilac-600); background: var(--lilac-100);
  padding: 7px 13px; border-radius: 999px;
}
@media (max-width: 640px) {
  .ql-zeile { grid-template-columns: 40px minmax(0, 1fr); }
  .ql-status { grid-column: 2; justify-self: start; margin-top: 10px; }
}

/* ==========================================================================
   Für Dich: grosser Maskenhero in der Fliederwelt, mit Einleitungstext.
   ========================================================================== */

.fd-mh { background: var(--lilac-600); }
.fd-mh .signet {
  display: block; width: 44px; height: 44px;
  margin: 0 auto clamp(22px, 3vh, 34px); color: var(--lilac-100);
}
.fd-mh .signet svg { width: 100%; height: 100%; display: block; }
/* "Selbstwirksamkeit" ist lang: etwas kleiner als auf den anderen Seiten */
.fd-mh .mh-titel {
  font-size: clamp(3rem, 8.2vw, 7.6rem);
  background-image: linear-gradient(rgba(255,255,255,.34), rgba(255,255,255,.34)), var(--mh-bild);
}
.fd-mh .lead {
  max-width: 34em; margin: 0 auto;
  color: rgba(252, 250, 246, .86);
}
.fd-mh .hero-actions { margin-top: clamp(28px, 3.6vw, 44px); }

/* Kopfzeile auf dem Fliederhero hell */
html:not(.menu-open) .theme-lilac .site-header:not(.scrolled) .brand-name,
html:not(.menu-open) .theme-lilac .site-header:not(.scrolled) .nav a:not(.btn),
html:not(.menu-open) .theme-lilac .site-header:not(.scrolled) .menu-toggle { color: var(--paper); }
html:not(.menu-open) .theme-lilac .site-header:not(.scrolled) .brand-name small { color: rgba(246,242,235,.66); }
html:not(.menu-open) .theme-lilac .site-header:not(.scrolled) .brand svg { color: var(--lilac-100); }
html:not(.menu-open) .theme-lilac .site-header:not(.scrolled) .nav a::after { background: var(--paper); }
html:not(.menu-open) .theme-lilac .site-header:not(.scrolled) .nav .btn { --bg: var(--paper); --fg: var(--ink); border-color: var(--paper); }

@media (max-width: 900px) {
  .fd-mh .mh-titel { font-size: clamp(2.3rem, 10.4vw, 4.2rem); }
}

/* ==========================================================================
   Startseite: kurze Vorstellung. Portrait im Bogen links, rechts Leitfrage,
   Weg in drei Stationen, Arbeitsweise und Haltung.
   ========================================================================== */

.vm-gitter {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 7vw, 112px); align-items: start;
}

/* Portrait mit versetzter Pflaumenflaeche dahinter */
.vm-bild { margin: 0; position: sticky; top: 120px; }
.vm-bogen { position: relative; }
.vm-bogen::before {
  content: ""; position: absolute; inset: 0;
  background: var(--plum-deep); border-radius: var(--radius-arch);
  transform: translate(18px, 18px); pointer-events: none;
}
.vm-bogen img {
  position: relative; display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 18%;
  border-radius: var(--radius-arch);
}
.vm-bild figcaption {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 20px;
  margin-top: clamp(30px, 3vw, 40px);
}
.vm-name { display: flex; flex-direction: column; gap: 4px; }
.vm-bild figcaption b { font-family: var(--serif); font-weight: 400; font-size: 1.35rem; letter-spacing: -.01em; }
.vm-bild figcaption span { font-size: 14px; color: var(--ink-3); }

.vm-text .h2 { margin: 18px 0 0; }

/* Leitfrage als grosses Zitat */
.vm-frage {
  position: relative; margin: clamp(30px, 3.4vw, 44px) 0 0;
  padding-left: clamp(22px, 2.4vw, 32px);
  border-left: 2px solid var(--lilac-300);
}
.vm-frage p {
  margin: 0; font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(1.4rem, 2.2vw, 1.95rem); line-height: 1.3; letter-spacing: -.01em;
  color: var(--ink);
}
.vm-frage footer { margin-top: 14px; font-size: 15px; color: var(--ink-3); }

.vm-intro {
  margin: clamp(30px, 3.4vw, 44px) 0 0; max-width: 34em;
  font-size: 1.05rem; line-height: 1.7; color: var(--ink-2);
}

/* Weg in drei Stationen */
.vm-weg {
  list-style: none; margin: clamp(26px, 3vw, 38px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px);
}
.vm-weg li { border-top: 1px solid var(--line); padding-top: 18px; }
.vm-nr { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--plum); }
.vm-weg h3 {
  margin: 8px 0 8px; font-family: var(--serif); font-weight: 400;
  font-size: 1.28rem; line-height: 1.2; letter-spacing: -.01em;
}
.vm-weg p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }

/* Arbeitsweise und Haltung auf einer hellen Karte */
.vm-haltung {
  margin-top: clamp(34px, 4vw, 52px);
  background: var(--white); border: 1px solid var(--line); border-radius: 22px;
  padding: clamp(24px, 2.8vw, 36px);
  display: grid; gap: 18px;
}
.vm-label {
  display: block; font-size: 12px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--label);
}
.vm-werte ul { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.vm-werte li {
  font-size: 14px; padding: 8px 16px; border-radius: 999px;
  background: var(--lilac-100); color: var(--lilac-600);
}
.vm-satz {
  margin: 0; padding-top: 18px; border-top: 1px solid var(--line);
  font-family: var(--serif); font-weight: 300; font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.4;
}

.vm-fuss {
  margin-top: clamp(30px, 3.4vw, 44px);
  display: flex; flex-wrap: wrap; align-items: center; gap: 22px 36px;
}
.vm-weitere { flex: 1 1 260px; }
.vm-weitere ul { list-style: none; margin: 8px 0 0; padding: 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.vm-weitere li { display: inline; }
.vm-weitere li + li::before { content: "·"; margin: 0 8px; color: var(--lilac-300); }

@media (max-width: 960px) {
  .vm-gitter { grid-template-columns: 1fr; }
  .vm-bild { position: static; max-width: 340px; width: 78%; }
  .vm-weg { grid-template-columns: 1fr; gap: 0; }
  .vm-weg li { display: grid; grid-template-columns: 34px 1fr; column-gap: 8px; padding: 16px 0; }
  .vm-weg li .vm-nr { grid-row: span 2; padding-top: 4px; }
  .vm-weg h3 { margin: 0 0 4px; }
}

/* ==========================================================================
   Startseite: Warum Beratung, warum ich. Dunkle Karte auf Papier,
   damit sie sich vom dunklen Kopfbereich absetzt. Foto steht unten rechts.
   ========================================================================== */
.vd { padding: clamp(28px, 4vw, 56px) 0 clamp(72px, 9vw, 128px); background: var(--paper); }
.vd-karte {
  position: relative; overflow: hidden; background: var(--plum-deep); color: var(--paper);
  border-radius: clamp(24px, 2.6vw, 36px);
  display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(20px, 3vw, 48px); align-items: end;
  padding: 0 0 0 clamp(28px, 5vw, 80px);
}
.vd-text { padding: clamp(48px, 5.5vw, 84px) 0; }
.vd-titel {
  font-family: var(--serif); font-weight: 300; letter-spacing: -.02em; color: var(--paper);
  font-size: clamp(2rem, 3.6vw, 3.1rem); line-height: 1.1; margin: 0 0 22px; max-width: 15em;
}
.vd-titel em, .vd-titel .plum { color: var(--lilac-300); font-style: italic; }
.vd-lead { margin: 0; max-width: 34em; font-size: clamp(1.02rem, 1.3vw, 1.15rem); line-height: 1.65; color: rgba(246,242,235,.76); }
.vd-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 40px); margin: clamp(30px, 4vw, 44px) 0 clamp(30px, 4vw, 40px); }
.vd-label { margin: 0 0 16px; font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--lilac-300); }
.vd-haken { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.vd-haken li { position: relative; padding-left: 34px; }
.vd-haken li::before {
  content: ""; position: absolute; left: 0; top: .3em; width: 20px; height: 20px; border-radius: 50%;
  background: var(--lilac-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23fcfaf6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.vd-haken b { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.2rem; line-height: 1.25; color: var(--paper); }
.vd-haken span { display: block; margin-top: 4px; font-size: 14.5px; line-height: 1.55; color: rgba(246,242,235,.66); }
.vd-figur { position: relative; align-self: stretch; display: flex; align-items: flex-end; justify-content: flex-end; }
/* Weicher Lichtschein hinter dem Foto, damit die helle Bluse nicht hart auf Pflaume steht */
.vd-figur::before {
  content: ""; position: absolute; right: 0; bottom: 0; width: 100%; height: 85%;
  background: radial-gradient(60% 55% at 55% 60%, rgba(169,138,214,.28), transparent 70%);
}
.vd-figur img { position: relative; display: block; width: 100%; max-width: 620px; height: auto; }
@media (max-width: 900px) {
  .vd-karte { grid-template-columns: 1fr; gap: 0; padding: 0 clamp(24px, 6vw, 40px); }
  .vd-text { padding-bottom: 32px; }
  .vd-spalten { grid-template-columns: 1fr; }
  .vd-figur { justify-content: center; }
  .vd-figur img { max-width: 340px; }
}

/* Startseite: Vorhang. Der Kopfbereich bleibt stehen, das Blatt mit der
   Vorteils-Karte legt sich darüber. (.mh setzt sonst position: relative) */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .kopf-dunkel .vh-halt.mh { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 0; }
}
/* Das Blatt ist oben selbst Pflaume: die Vorteile liegen bildschirmbreit darauf */
.kopf-dunkel .vh-blatt { overflow: clip; box-shadow: 0 -30px 60px -20px rgba(0, 0, 0, .55); }
.kopf-dunkel .vh-blatt .vd {
  background: var(--plum-deep); padding: clamp(28px, 4vw, 56px) 0 0;
  box-shadow: inset 0 1px 0 rgba(252, 250, 246, .12);
}
.kopf-dunkel .vh-blatt .vd-karte { background: transparent; border-radius: 0; overflow: visible; padding-right: 0; }
@media (max-width: 900px) {
  .kopf-dunkel .vh-blatt { border-radius: 0; box-shadow: none; }
  .kopf-dunkel .vh-blatt .vd { box-shadow: none; padding-top: 0; }
  .kopf-dunkel .vh-blatt .vd-karte { padding: 0; }
}
/* Foto etwas höher, unten weich ins Pflaume auslaufend */
.kopf-dunkel .vh-blatt .vd-figur { padding-bottom: clamp(40px, 5vw, 72px); }
.kopf-dunkel .vh-blatt .vd-figur img {
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
}
@media (max-width: 900px) { .kopf-dunkel .vh-blatt .vd-figur { padding-bottom: 32px; } }

/* iPhone: Safari zeigt den Streifen über der Kopfleiste (Uhrzeit, Akku)
   durchsichtig, sobald gescrollt wird. Die Leiste reicht deshalb nach oben
   in diesen Streifen hinein, in ihrer eigenen Farbe. Auf dem Desktop liegt
   dieses Stück außerhalb des Bildschirms. */
.site-header::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 120px;
  background: inherit; pointer-events: none;
}
@media (max-width: 760px) {
  .site-header { transition: box-shadow .4s var(--ease); }
}
.menu-open .site-header::before { background: var(--paper); }