/* LOTTA WORK — HR. PEOPLE. DEVELOPMENT.
   Designsystem 1:1 uebernommen von lottasystems.tech (Manrope + Tailwind-Tokens) */

:root{
  --ink:#141414;
  --ink-soft:#4d4d4b;
  --ink-faint:#6c6c68;
  --ivory:#fafafa;
  --ivory-deep:#f0f0ef;
  --ivory-line:#e2e2df;
  --line:#e0e0dd;
  /* Akzentfarbe: Roséton mit Pinkanteil — Farbton nach Magenta verschoben,
     Helligkeit unveraendert, damit die Seite ruhig bleibt. */
  --blush:#f3c3d8;
  --blush-light:#fdeef5;
  --blush-deep:#e07ba8;
  --mauve:#9e3f6c;
  --dunkel:#2f2f2e;
  --white:#fff;
  --maxw:72rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:"Source Sans 3",ui-sans-serif,system-ui,sans-serif;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100%;
  display:flex;
  flex-direction:column;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}

.balance{text-wrap:balance}
.wrap{margin-inline:auto;max-width:var(--maxw);padding-inline:1.5rem}
@media (min-width:1024px){.wrap{padding-inline:2rem}}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--ivory);padding:.75rem 1rem;z-index:100;border-radius:0 0 .5rem 0}
.skip-link:focus{left:0}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  border-bottom:1px solid rgba(226,226,223,.8);
  background:rgba(250,250,250,.92);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.header-inner{display:flex;height:4rem;align-items:center;justify-content:space-between}
.logo{display:inline-flex;align-items:center;gap:.625rem;color:var(--ink)}
.logo svg{height:1.35rem;width:1.35rem}
.logo-type{display:inline-flex;align-items:baseline;gap:.375rem;font-weight:600;letter-spacing:.14em}
.logo-sub{font-size:.6rem;font-weight:500;letter-spacing:.3em;color:var(--ink-faint)}
@media (max-width:359px){.logo-sub{display:none}}
.nav{display:none;align-items:center;gap:2rem}
.nav a{font-size:.9rem;color:var(--ink-soft);transition:color .2s}
.nav a:hover{color:var(--ink)}
@media (min-width:1024px){.nav{display:flex}}
.header-cta{display:none}
@media (min-width:1024px){.header-cta{display:block}}
.burger{display:flex;height:2.25rem;width:2.25rem;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:none;border:0;cursor:pointer;padding:0}
.burger span{height:1px;width:1.25rem;background:var(--ink);transition:transform .25s,opacity .25s}
@media (min-width:1024px){.burger{display:none}}
.mobile-nav{display:none;border-top:1px solid var(--ivory-line);background:var(--ivory)}
.mobile-nav.open{display:block}
.mobile-nav ul{padding:1rem 0 1.5rem}
.mobile-nav a{display:block;padding:.6rem 0;font-size:1rem;color:var(--ink-soft)}
.mobile-nav .btn{margin-top:.75rem}
@media (min-width:1024px){.mobile-nav{display:none!important}}

/* ---------- Buttons / Links ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:9999px;padding:.875rem 1.75rem;
  font-size:.875rem;font-weight:500;
  transition:background-color .2s,border-color .2s,color .2s;
  border:1px solid transparent;cursor:pointer;
}
.btn-sm{padding:.625rem 1.25rem}
.btn-dark{background:var(--ink);color:var(--ivory)}
.btn-dark:hover{background:rgba(20,20,20,.85)}
.btn-ghost{border-color:rgba(20,20,20,.15);color:var(--ink)}
.btn-ghost:hover{border-color:rgba(20,20,20,.3)}
.btn-light{background:var(--ivory);color:var(--ink)}
.btn-light:hover{background:#fff}
.link-u{
  font-size:.875rem;font-weight:500;color:var(--ink);
  text-decoration:underline;text-decoration-color:var(--blush-deep);
  text-decoration-thickness:2px;text-underline-offset:4px;
}
.link-u:hover{text-decoration-color:var(--mauve)}

/* ---------- Sections ---------- */
section{scroll-margin-top:6rem}
.sec{border-top:1px solid var(--ivory-line);background:var(--ivory)}
.sec-deep{background:var(--ivory-deep)}
.sec-ink{background:var(--dunkel);color:var(--ivory);border-top-color:var(--dunkel)}
.sec-pad{padding-block:6rem}
@media (min-width:1024px){.sec-pad{padding-block:8rem}}
.eyebrow{font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
.sec-ink .eyebrow{color:rgba(250,250,250,.6)}
h1,.h1{font-weight:600;font-size:2.75rem;line-height:1.08;letter-spacing:-.015em}
@media (min-width:640px){h1,.h1{font-size:3.4rem}}
@media (min-width:1024px){h1,.h1{font-size:3.75rem}}
h2,.h2{font-weight:600;font-size:1.875rem;line-height:1.12;letter-spacing:-.01em}
@media (min-width:640px){h2,.h2{font-size:2.25rem}}
h3{font-weight:600;font-size:1.25rem;line-height:1.3}
.dot{color:var(--blush-deep)}
.lead{font-size:1.125rem;line-height:1.625;color:var(--ink-soft)}
.sec-ink .lead{color:rgba(250,250,250,.72)}
.body-t{font-size:1rem;line-height:1.625;color:var(--ink-soft)}
.small-t{font-size:.875rem;line-height:1.625;color:var(--ink-soft)}
.faint-t{font-size:.875rem;color:var(--ink-faint)}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden}
.hero-glow{
  pointer-events:none;position:absolute;inset-inline:0;top:0;z-index:-1;height:720px;
  background:radial-gradient(38% 34% at 50% 0%, var(--ivory-deep) 0%, var(--ivory) 70%);
}
.hero-grid{display:grid;gap:4rem;padding-top:5rem;padding-bottom:6rem}
@media (min-width:1024px){
  .hero-grid{grid-template-columns:1.1fr .9fr;align-items:center;padding-top:7rem;padding-bottom:8rem}
}
.hero p.lead{margin-top:1.5rem;max-width:32rem}
.hero h1{margin-top:1.25rem}
.hero-actions{margin-top:2.5rem;display:flex;flex-wrap:wrap;align-items:center;gap:1rem}
.hero-meta{margin-top:2rem;font-size:.8rem;letter-spacing:.02em;color:var(--ink-faint)}

/* Hero-Visual */
.visual{position:relative;margin-inline:auto;width:100%;max-width:480px;aspect-ratio:4/3.4}
.visual-blur{position:absolute;inset:0;border-radius:28px;background:linear-gradient(135deg,var(--ivory-deep),transparent 60%);filter:blur(28px)}
.visual-card{
  position:absolute;inset-inline:.5rem;top:1rem;bottom:2.5rem;
  border-radius:22px;border:1px solid rgba(20,20,20,.06);background:rgba(255,255,255,.9);
  padding:1.5rem;box-shadow:0 30px 70px -25px rgba(32,29,27,.28);backdrop-filter:blur(4px);
}
.visual-head{display:flex;align-items:center;justify-content:space-between}
.visual-label{font-size:.7rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.dots{display:flex;gap:.375rem}
.dots span{height:.375rem;width:.375rem;border-radius:9999px;background:var(--ivory-line)}
.dots span:last-child{background:var(--blush-deep)}
.bars{margin-top:1.5rem;display:flex;align-items:flex-end;gap:.625rem;height:5.25rem}
.bars div{flex:1;border-radius:.375rem .375rem 0 0;background:linear-gradient(to top,rgba(20,20,20,.08),rgba(20,20,20,.03))}
.dashed{margin-top:1.5rem;height:1px;width:100%;background-image:repeating-linear-gradient(to right,var(--ivory-line) 0 6px,transparent 6px 12px)}
.kv{margin-top:1.25rem;display:flex;flex-direction:column;gap:.75rem}
.kv-row{display:flex;align-items:center;justify-content:space-between;font-size:.875rem}
.kv-row span:first-child{color:var(--ink-soft)}
.kv-row span:last-child{font-weight:500;color:var(--ink)}
.float-card{
  position:absolute;border-radius:1rem;border:1px solid rgba(20,20,20,.06);background:#fff;
  padding:1rem;box-shadow:0 20px 45px -18px rgba(32,29,27,.3);
}
.float-top{top:-.75rem;right:0;width:12rem}
.float-bottom{bottom:0;left:-.5rem;width:10.75rem}
.avatar{display:flex;height:2.25rem;width:2.25rem;align-items:center;justify-content:center;border-radius:9999px;background:var(--ivory-deep);font-size:.75rem;font-weight:600;color:var(--ink)}
.pill{display:inline-flex;align-items:center;gap:.375rem;border-radius:9999px;background:var(--ivory-deep);padding:.25rem .625rem;font-size:.7rem;font-weight:500;color:var(--ink)}
.pill-dot{height:.375rem;width:.375rem;border-radius:9999px;background:var(--blush-deep)}

/* ---------- Stat-Leiste ---------- */
.strip{display:grid;border-top:1px solid var(--ivory-line);border-bottom:1px solid var(--ivory-line)}
.strip>div{padding:2rem .25rem;text-align:center;border-top:1px solid var(--ivory-line)}
.strip>div:first-child{border-top:0}
.strip p:first-child{font-weight:600;font-size:1.25rem;line-height:1.3}
.strip p:last-child{margin-top:.375rem;font-size:.875rem;color:var(--ink-soft)}
@media (min-width:640px){
  .strip{grid-template-columns:repeat(3,1fr)}
  .strip>div{border-top:0;border-left:1px solid var(--ivory-line);padding-inline:1.5rem}
  .strip>div:first-child{border-left:0}
  .strip p:first-child{font-size:1.35rem}
}

/* ---------- Grids ---------- */
.grid-2{display:grid;gap:2.5rem}
@media (min-width:1024px){.grid-2{grid-template-columns:1fr 1fr;gap:5rem}}
.split{display:grid;gap:2.5rem}
@media (min-width:1024px){.split{grid-template-columns:.85fr 1.15fr;gap:5rem}}
.split-form{display:grid;gap:3.5rem}
@media (min-width:1024px){.split-form{grid-template-columns:.8fr 1.2fr;gap:5rem}}
.cards{display:grid;gap:1.5rem;margin-top:4rem}
@media (min-width:640px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.cards-3{grid-template-columns:repeat(3,1fr)}}
.cols-4{display:grid;gap:2rem 2rem;margin-top:4rem}
@media (min-width:640px){.cols-4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.cols-4{grid-template-columns:repeat(4,1fr)}}

/* ---------- Cards ---------- */
.card{
  display:flex;flex-direction:column;height:100%;
  border-radius:1rem;border:1px solid rgba(20,20,20,.07);background:var(--ivory);padding:1.5rem;
}
.sec-deep .card{background:var(--ivory)}
.sec .card{background:var(--white)}
.sec-deep .card{background:var(--ivory)}
.card-featured{border-color:var(--ink);box-shadow:0 25px 60px -30px rgba(20,20,20,.35)}
.card-num{font-size:.7rem;font-weight:600;letter-spacing:.14em;color:var(--blush-deep)}
.card h3{margin-top:1rem}
.card .price{margin-top:1rem;font-weight:600;font-size:1.5rem;color:var(--ink)}
.card .price-note{font-size:.75rem;color:var(--ink-faint)}
.card>p.small-t{margin-top:1rem}
.card ul{margin-top:1.5rem;display:flex;flex-direction:column;gap:.625rem;font-size:.875rem;color:var(--ink-soft)}
.card li{display:flex;align-items:flex-start;gap:.625rem;line-height:1.55}
.card li::before{content:"";margin-top:.55rem;height:4px;width:4px;flex:0 0 auto;border-radius:9999px;background:var(--blush-deep)}
.card-foot{margin-top:auto;padding-top:2rem}
.badge{display:inline-flex;width:fit-content;align-items:center;gap:.375rem;border-radius:9999px;background:var(--ink);padding:.25rem .625rem;font-size:.65rem;font-weight:500;color:var(--ivory)}
.card-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:1.75rem}
.icon{height:1.5rem;width:1.5rem;color:var(--ink-soft)}

/* Ruled items (Zu viel / Zu starr Muster) */
.ruled{border-top:1px solid rgba(20,20,20,.1);padding-top:1.25rem}
.ruled h3{font-size:1.25rem}
.ruled p{margin-top:.5rem;font-size:.875rem;line-height:1.625;color:var(--ink-soft)}
.sec-ink .ruled{border-top-color:rgba(250,250,250,.18)}
.sec-ink .ruled p{color:rgba(250,250,250,.68)}

/* ---------- Ebenen (Consult/Support/Develop) ---------- */
.layer{border-top:1px solid rgba(20,20,20,.12);padding-top:1.5rem}
.layer-key{font-weight:600;letter-spacing:.16em;font-size:.8rem;text-transform:uppercase}
.layer h3{margin-top:.75rem;font-size:1.35rem}
.layer p{margin-top:.625rem;font-size:.875rem;line-height:1.625;color:var(--ink-soft)}

/* ---------- Prozess ---------- */
.steps{position:relative;margin-top:4rem;display:grid;gap:2.5rem}
@media (min-width:640px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.steps{grid-template-columns:repeat(4,1fr)}}
.steps-line{pointer-events:none;position:absolute;top:1.1rem;left:0;right:0;height:1px;background:var(--ivory-line);display:none}
@media (min-width:1024px){.steps-line{display:block}}
.step{position:relative;padding-top:2.25rem}
.step-n{
  position:absolute;top:0;left:0;display:flex;height:2.25rem;width:2.25rem;align-items:center;justify-content:center;
  border-radius:9999px;border:1px solid rgba(20,20,20,.1);background:var(--ivory);font-weight:600;font-size:.875rem;
}
.step h3{margin-top:.5rem;font-size:1.125rem;font-weight:500}
.step p{margin-top:.5rem;font-size:.875rem;line-height:1.625;color:var(--ink-soft)}

/* ---------- Einsatz-Liste (Mandat) ---------- */
.tags{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.625rem}
.tag{
  border-radius:9999px;border:1px solid rgba(20,20,20,.12);background:var(--ivory);
  padding:.5rem 1rem;font-size:.85rem;color:var(--ink-soft);
}
.sec-deep .tag{background:var(--white)}

/* ---------- Manifesto ---------- */
.manifest{max-width:52rem}
.manifest .h2{font-size:2rem}
@media (min-width:640px){.manifest .h2{font-size:2.75rem}}
.manifest-lines{margin-top:2.5rem;display:flex;flex-direction:column;gap:.5rem;font-size:1.125rem;line-height:1.7;color:var(--ink-soft)}
.manifest-out{margin-top:2.5rem;border-left:2px solid var(--blush-deep);padding-left:1.5rem;font-size:1.125rem;line-height:1.7;color:var(--ink)}

/* ---------- Portraet ---------- */
.portrait{position:relative;aspect-ratio:4/5;width:100%;max-width:24rem;overflow:hidden;border-radius:1rem;border:1px solid rgba(20,20,20,.06);background:linear-gradient(160deg,var(--ivory-deep) 0%,var(--ivory) 100%);display:flex;align-items:center;justify-content:center}
.portrait{margin:0}
.portrait picture,.portrait img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
/* Bild tritt einmal ruhig ins Bild und reagiert danach dezent auf den Zeiger */
.portrait img{
  transform:scale(1.06);opacity:.001;
  transition:transform 1.4s cubic-bezier(.16,1,.3,1),opacity .9s ease;
}
.portrait.gezeigt img{transform:scale(1);opacity:1}
.portrait.gezeigt:hover img{transform:scale(1.025)}
@media (prefers-reduced-motion:reduce){
  .portrait img{transform:none;opacity:1;transition:none}
  .portrait.gezeigt:hover img{transform:none}
}

.portrait-klein{
  display:block;width:5.5rem;height:5.5rem;margin-bottom:1.5rem;
  border-radius:9999px;overflow:hidden;border:1px solid rgba(20,20,20,.08);
}
.portrait-klein img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.portrait-tag{position:absolute;left:1.25rem;bottom:1.25rem}
.chips{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.5rem}
.chip{border-radius:9999px;background:var(--blush-light);color:var(--mauve);padding:.35rem .8rem;font-size:.8rem;font-weight:500}

/* ---------- Formular ---------- */
.form{border-radius:1rem;border:1px solid rgba(20,20,20,.06);background:var(--ivory);padding:1.5rem}
@media (min-width:640px){.form{padding:2rem}}
.form-grid{display:grid;gap:1.5rem}
@media (min-width:640px){.form-grid-2{grid-template-columns:repeat(2,1fr)}}
.field{display:block}
.field>span{font-size:.875rem;color:var(--ink-soft)}
.field input,.field select,.field textarea{
  margin-top:.5rem;width:100%;border-radius:.5rem;border:1px solid rgba(20,20,20,.1);background:#fff;
  padding:.625rem .875rem;font-size:.875rem;color:var(--ink);font-family:inherit;
  outline:none;transition:border-color .15s,box-shadow .15s;
}
.field textarea{resize:vertical;min-height:6rem}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  border-color:var(--mauve);box-shadow:0 0 0 2px rgba(201,150,145,.3);
}
.note{border-radius:1rem;border:1px solid rgba(20,20,20,.06);background:var(--ivory);padding:1.5rem;margin-top:2.5rem}
.sec-deep .note{background:var(--ivory)}
.form-foot{margin-top:2rem;display:flex;flex-wrap:wrap;align-items:center;gap:1rem}
.form-status{font-size:.85rem;color:var(--mauve)}

/* ---------- CTA schwarz ---------- */
.cta-ink{padding-block:6rem}
@media (min-width:1024px){.cta-ink{padding-block:8rem}}
.cta-ink .h2{font-size:2.25rem;color:var(--ivory)}
@media (min-width:640px){.cta-ink .h2{font-size:3rem}}
.cta-ink .h2 .muted{color:rgba(250,250,250,.45)}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--ivory-line);background:var(--ivory-deep)}
.footer-inner{padding-block:3.5rem;display:flex;flex-direction:column;gap:2.5rem}
@media (min-width:768px){.footer-inner{flex-direction:row;align-items:flex-start;justify-content:space-between}}
.footer-cols{display:grid;grid-template-columns:repeat(2,1fr);gap:2.5rem}
@media (min-width:640px){.footer-cols{grid-template-columns:repeat(3,1fr)}}
.footer-cols p:first-child{font-size:.75rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.footer-cols ul{margin-top:1rem;display:flex;flex-direction:column;gap:.75rem;font-size:.875rem;color:var(--ink-soft)}
.footer-cols a:hover{color:var(--ink)}
.footer-bottom{margin-top:3.5rem;display:flex;flex-direction:column-reverse;gap:1rem;border-top:1px solid var(--ivory-line);padding-top:1.5rem;font-size:.75rem;color:var(--ink-faint)}
@media (min-width:640px){.footer-bottom{flex-direction:row;align-items:center;justify-content:space-between}}

/* ---------- Reveal ---------- */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.js .rv.in{opacity:1;transform:none}
.rv{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}}

/* ---------- Zwei Seiten / Flywheel ---------- */
.two-sides{display:grid;gap:2rem;margin-top:4rem;align-items:stretch}
@media (min-width:1024px){.two-sides{grid-template-columns:1fr .7fr 1fr;gap:2.5rem;align-items:center}}
.side{display:flex;flex-direction:column;height:100%;border-radius:1rem;border:1px solid rgba(20,20,20,.07);background:var(--white);padding:1.75rem}
.side-key{font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blush-deep)}
.side h3{margin-top:.75rem;font-size:1.35rem}
.side>p.small-t{margin-top:1rem}
.side-list{margin-top:1.5rem;display:flex;flex-direction:column;gap:.625rem;font-size:.875rem;color:var(--ink-soft)}
.side-list li{display:flex;align-items:flex-start;gap:.625rem;line-height:1.55}
.side-list li::before{content:"";margin-top:.55rem;height:4px;width:4px;flex:0 0 auto;border-radius:9999px;background:var(--blush-deep)}

.flywheel{position:relative;width:100%;aspect-ratio:1;max-width:15rem;margin-inline:auto}
.fw-ring{position:absolute;inset:1.75rem;border-radius:9999px;border:1px dashed var(--line)}
.fw-center{position:absolute;inset:4.25rem;border-radius:9999px;background:var(--ink);color:var(--ivory);display:flex;align-items:center;justify-content:center;text-align:center;font-size:.6rem;font-weight:600;letter-spacing:.16em;line-height:1.5}
.fw-node{position:absolute;transform:translate(-50%,-50%);border-radius:9999px;border:1px solid rgba(20,20,20,.1);background:var(--white);padding:.4rem .8rem;font-size:.72rem;font-weight:500;color:var(--ink);white-space:nowrap;box-shadow:0 10px 24px -14px rgba(32,29,27,.4)}
.fw-n1{top:6%;left:50%}
.fw-n2{top:50%;left:94%}
.fw-n3{top:94%;left:50%}
.fw-n4{top:50%;left:6%}
@media (max-width:1023px){.flywheel{display:none}}

/* ---------- SLA-Leiste ---------- */
.sla{display:grid;gap:0;margin-top:4rem;border-top:1px solid var(--ivory-line);border-bottom:1px solid var(--ivory-line)}
.sla>div{padding:1.5rem .25rem;border-top:1px solid var(--ivory-line)}
.sla>div:first-child{border-top:0}
.sla-k{font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
.sla-v{margin-top:.375rem;font-size:1.05rem;font-weight:500;color:var(--ink)}
@media (min-width:768px){
  .sla{grid-template-columns:repeat(4,1fr)}
  .sla>div{border-top:0;border-left:1px solid var(--ivory-line);padding-inline:1.5rem}
  .sla>div:first-child{border-left:0;padding-left:0}
}

/* ---------- Quickcheck ---------- */
.qc-progress{font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
.qc-q{margin-top:1.75rem;padding-top:1.5rem;border-top:1px solid rgba(20,20,20,.08)}
.qc-q:first-of-type{border-top:0;padding-top:.5rem}
.qc-q>p{font-size:.95rem;line-height:1.55;color:var(--ink)}
.qc-opts{margin-top:.875rem;display:flex;flex-wrap:wrap;gap:.5rem}
.qc-opt{
  border-radius:9999px;border:1px solid rgba(20,20,20,.12);background:var(--white);
  padding:.45rem .9rem;font-size:.8rem;font-family:inherit;color:var(--ink-soft);cursor:pointer;
  transition:border-color .15s,background-color .15s,color .15s;
}
.qc-opt:hover{border-color:rgba(20,20,20,.3)}
.qc-opt.sel{background:var(--ink);border-color:var(--ink);color:var(--ivory)}
.qc-score{margin-top:.75rem;font-weight:600;font-size:3rem;line-height:1;letter-spacing:-.02em}
.qc-verdict{margin-top:1rem;font-size:1rem;line-height:1.625;color:var(--ink-soft)}
.qc-bars{margin-top:2rem;display:flex;flex-direction:column;gap:.75rem}
.qc-bar{display:grid;grid-template-columns:9.5rem 1fr 3rem;align-items:center;gap:.75rem;font-size:.8rem;color:var(--ink-soft)}
.qc-bar-t{height:6px;border-radius:9999px;background:var(--ivory-deep);overflow:hidden}
.qc-bar-f{display:block;height:100%;border-radius:9999px;background:var(--blush-deep)}
.qc-bar-v{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}
@media (max-width:520px){.qc-bar{grid-template-columns:7rem 1fr 2.5rem;font-size:.75rem}}

/* ---------- Tabs ---------- */
.tabs{display:inline-flex;gap:.375rem;margin-bottom:1.25rem;padding:.3rem;border-radius:9999px;background:var(--ivory-deep);border:1px solid rgba(20,20,20,.06)}
.sec-deep .tabs{background:var(--ivory)}
.tab{
  border:0;border-radius:9999px;background:transparent;cursor:pointer;font-family:inherit;
  padding:.5rem 1.1rem;font-size:.85rem;font-weight:500;color:var(--ink-soft);transition:background-color .2s,color .2s;
}
.tab:hover{color:var(--ink)}
.tab.active{background:var(--ink);color:var(--ivory)}

/* ---------- Consent ---------- */
.consent{margin-top:1.5rem;display:flex;align-items:flex-start;gap:.625rem;font-size:.8rem;line-height:1.55;color:var(--ink-soft)}
.consent input{margin-top:.2rem;accent-color:var(--mauve);width:.95rem;height:.95rem;flex:0 0 auto}

/* ---------- Aktiver Nav-Link ---------- */
.nav a.active{color:var(--ink);text-decoration:underline;text-decoration-color:var(--blush-deep);text-decoration-thickness:2px;text-underline-offset:6px}

/* Honeypot — für Menschen unsichtbar, für Bots verlockend */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status.ok{color:var(--mauve)}
.form-status.err{color:#8a3a3a}

/* ---------- Rechtsseiten ---------- */
.legal{max-width:46rem}
.legal h2{margin-top:2.5rem;font-size:1.15rem;font-weight:600}
.legal p.body-t{margin-top:.75rem}
.legal .todo{margin-top:2rem;border-radius:1rem;border:1px solid var(--blush);background:var(--blush-light);padding:1.25rem 1.5rem}
.legal .todo p{font-size:.875rem;line-height:1.625;color:var(--mauve)}

/* ---------- Bereichs-Umschalter im Header ---------- */
.header-cta{display:none;align-items:center;gap:1rem}
@media (min-width:1024px){.header-cta{display:flex}}
.switch{display:inline-flex;padding:.2rem;border-radius:9999px;background:var(--ivory-deep);border:1px solid rgba(20,20,20,.06)}
.switch-i{padding:.35rem .8rem;border-radius:9999px;font-size:.78rem;font-weight:500;color:var(--ink-faint);transition:color .2s,background-color .2s}
.switch-i:hover{color:var(--ink)}
.switch-i.on{background:var(--white);color:var(--ink);box-shadow:0 1px 2px rgba(20,20,20,.06)}

/* ---------- Zwei Bereiche ---------- */
.two-areas{display:grid;gap:1.5rem;margin-top:4rem}
@media (min-width:768px){.two-areas{grid-template-columns:repeat(2,1fr)}}
.area{
  display:flex;flex-direction:column;height:100%;
  border-radius:1rem;border:1px solid rgba(20,20,20,.07);background:var(--white);padding:1.75rem;
  transition:border-color .2s,box-shadow .2s,transform .2s;
}
a.area:hover{border-color:rgba(20,20,20,.22);box-shadow:0 25px 60px -35px rgba(20,20,20,.35);transform:translateY(-2px)}
.area-on{border-color:var(--ink);box-shadow:0 25px 60px -30px rgba(20,20,20,.35)}
.area-key{font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--blush-deep)}
.area h3{margin-top:.75rem;font-size:1.35rem}
.area>p.small-t{margin-top:1rem}
.area-link{margin-top:auto;padding-top:2rem;display:inline-block}

/* Header-Enge entschaerfen: Umschalter erst ab 1280px, nichts umbrechen lassen */
.nav{gap:1.5rem}
@media (min-width:1280px){.nav{gap:2rem}}
.nav a,.header-cta .btn{white-space:nowrap}
.switch{display:none}
@media (min-width:1280px){.switch{display:inline-flex}}
.logo{flex:0 0 auto;margin-right:1.5rem}

/* Mobiler CTA darf die Linkfarbe des Menues nicht erben */
.mobile-nav a.btn{color:var(--ivory);padding:.875rem 1.75rem}

/* ---------- Workshop-Karten ---------- */
.ws-meta{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;
  margin-top:1rem;padding:.875rem 0;
  border-top:1px solid rgba(20,20,20,.08);border-bottom:1px solid rgba(20,20,20,.08);
}
.ws-meta span{display:flex;flex-direction:column;gap:.2rem;font-size:.8rem;color:var(--ink)}
.ws-meta b{font-size:.62rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.ws-label{margin-top:1.5rem;font-size:.65rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.ws-label + ul{margin-top:.75rem}

/* ---------- Vita ---------- */
.profil-links{margin-top:1.5rem}
.profil-links .btn{display:inline-flex;align-items:center}
.vita{margin-top:1.25rem;display:flex;flex-direction:column}
.vita-i{border-top:1px solid rgba(20,20,20,.1);padding:1.25rem 0}
.vita-i:last-child{border-bottom:1px solid rgba(20,20,20,.1)}
.vita-k{font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--blush-deep)}
.vita-t{margin-top:.5rem;font-size:1.05rem;font-weight:600;color:var(--ink);line-height:1.35}
.vita-b{margin-top:.5rem;font-size:.875rem;line-height:1.625;color:var(--ink-soft)}

/* ---------- Downloads ---------- */
.downloads{margin-top:2.5rem;border-radius:1rem;border:1px solid rgba(20,20,20,.06);background:var(--ivory);padding:1.5rem}
.dl-row{margin-top:1.25rem;display:grid;gap:.75rem}
@media (min-width:640px){.dl-row{grid-template-columns:repeat(2,1fr)}}
.dl{
  display:flex;flex-direction:column;gap:.3rem;position:relative;
  border-radius:.75rem;border:1px solid rgba(20,20,20,.1);background:var(--white);
  padding:1rem 1.1rem;transition:border-color .2s,transform .2s;
}
.dl:hover{border-color:rgba(20,20,20,.3);transform:translateY(-1px)}
.dl-k{font-size:.95rem;font-weight:600;color:var(--ink)}
.dl-t{font-size:.8rem;line-height:1.5;color:var(--ink-soft);padding-right:2.5rem}
.dl-m{position:absolute;top:1rem;right:1.1rem;font-size:.62rem;font-weight:600;letter-spacing:.1em;color:var(--blush-deep)}

/* Portrait in der Vita mitlaufen lassen, die rechte Spalte ist lang */
@media (min-width:1024px){
  #ueber-lotta .split>div:first-child{position:sticky;top:6rem;align-self:start}
}

/* ---------- Zitat aus dem Zeugnis ---------- */
.zitat{margin:3.5rem 0 0;max-width:44rem;border-left:2px solid var(--blush-deep);padding-left:1.75rem}
.zitat p{font-size:1.25rem;line-height:1.55;color:var(--ink);font-weight:500}
.zitat cite{display:block;margin-top:1rem;font-style:normal;font-size:.8rem;color:var(--ink-faint)}

/* ---------- Bedarfs-Check im Hero ---------- */
.check{
  border-radius:1.25rem;border:1px solid rgba(20,20,20,.07);background:var(--white);
  padding:1.75rem;box-shadow:0 30px 70px -35px rgba(32,29,27,.3);
}
.check-kopf{display:flex;align-items:center;justify-content:space-between}
.check-kicker{font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.check-step{font-size:.75rem;font-variant-numeric:tabular-nums;color:var(--ink-faint)}
.check-bar{margin-top:.875rem;height:3px;border-radius:9999px;background:var(--ivory-deep);overflow:hidden}
.check-bar>span{display:block;height:100%;width:0;border-radius:9999px;background:var(--blush-deep);transition:width .35s cubic-bezier(.16,1,.3,1)}
.check-frage{margin-top:1.5rem;font-size:1.15rem;font-weight:600;line-height:1.35;color:var(--ink)}
.check-opts{margin-top:1.25rem;display:flex;flex-direction:column;gap:.5rem}
.check-opt{
  text-align:left;font-family:inherit;font-size:.9rem;color:var(--ink-soft);cursor:pointer;
  border-radius:.75rem;border:1px solid rgba(20,20,20,.1);background:var(--ivory);
  padding:.8rem 1rem;transition:border-color .15s,background-color .15s,color .15s,transform .15s;
}
.check-opt:hover{border-color:var(--ink);color:var(--ink);transform:translateX(2px)}
.check-lage{margin-top:1.25rem;font-size:1.05rem;line-height:1.5;font-weight:500;color:var(--ink)}
.check-balken{margin-top:1.5rem;display:flex;flex-direction:column;gap:.55rem}
.check-bal{display:grid;grid-template-columns:6.5rem 1fr;align-items:center;gap:.75rem;font-size:.78rem;color:var(--ink-soft)}
.check-bal-t{height:5px;border-radius:9999px;background:var(--ivory-deep);overflow:hidden}
.check-bal-f{display:block;height:100%;border-radius:9999px;background:var(--blush-deep);transition:width .5s cubic-bezier(.16,1,.3,1)}
.check-empf{margin-top:1.75rem;border-radius:.875rem;background:var(--ink);color:var(--ivory);padding:1.25rem}
.check-empf-k{font-size:.62rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(250,250,250,.55)}
.check-empf-t{margin-top:.45rem;font-size:1.2rem;font-weight:600}
.check-empf-p{margin-top:.2rem;font-size:.9rem;color:var(--blush-deep);font-weight:500}
.check-empf-w{margin-top:.75rem;font-size:.82rem;line-height:1.55;color:rgba(250,250,250,.72)}
.check-akt{margin-top:1.25rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.check-neu{background:none;border:0;font-family:inherit;font-size:.82rem;color:var(--ink-faint);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.check-neu:hover{color:var(--ink)}
.check-fuss{margin-top:1rem;text-align:center;font-size:.75rem;color:var(--ink-faint)}

/* ---------- Rechner ---------- */
.tool{display:grid;gap:0;border-radius:1rem;border:1px solid rgba(20,20,20,.07);background:var(--white);overflow:hidden}
@media (min-width:900px){.tool{grid-template-columns:1.05fr .95fr}}
.tool-l{padding:2rem}
.tool-r{padding:2rem;background:var(--ivory-deep);border-top:1px solid rgba(20,20,20,.06)}
@media (min-width:900px){.tool-r{border-top:0;border-left:1px solid rgba(20,20,20,.06)}}
.tool-zahl{margin-top:.6rem;font-weight:600;font-size:2.75rem;line-height:1;letter-spacing:-.02em;color:var(--ink)}
.tool-l output{display:block;margin-top:.6rem;font-weight:600;font-size:1.15rem;color:var(--ink);font-variant-numeric:tabular-nums}
.vk-zeilen{margin-top:1.75rem;display:flex;flex-direction:column;gap:.75rem;padding-top:1.25rem;border-top:1px solid rgba(20,20,20,.1)}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:3px;margin-top:1.25rem;
  border-radius:9999px;background:var(--ivory-line);outline:none;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;
  background:var(--ink);cursor:pointer;border:3px solid var(--white);box-shadow:0 2px 8px rgba(20,20,20,.25);
}
input[type=range]::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;background:var(--ink);cursor:pointer;
  border:3px solid var(--white);box-shadow:0 2px 8px rgba(20,20,20,.25);
}
input[type=range]:focus-visible{box-shadow:0 0 0 3px rgba(201,150,145,.35)}

/* ---------- LOTTA Care ---------- */
.care{display:flex;flex-direction:column;height:100%;border-radius:1rem;border:1px solid rgba(20,20,20,.07);background:var(--ivory);padding:1.75rem}
.care-on{border-color:var(--ink);box-shadow:0 25px 60px -30px rgba(20,20,20,.35)}
.care-k{font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--blush-deep)}
.care-p{margin-top:1rem;font-weight:600;font-size:2rem;line-height:1;letter-spacing:-.01em;color:var(--ink)}
.care-p span{font-size:.9rem;font-weight:500;color:var(--ink-faint);margin-left:.35rem;letter-spacing:0}
.care-n{margin-top:.4rem;font-size:.82rem;color:var(--ink-faint)}
.care>p.small-t{margin-top:1.25rem}
.care ul{margin-top:1.5rem;display:flex;flex-direction:column;gap:.6rem;font-size:.875rem;color:var(--ink-soft)}
.care li{display:flex;align-items:flex-start;gap:.625rem;line-height:1.55}
.care li::before{content:"";margin-top:.55rem;height:4px;width:4px;flex:0 0 auto;border-radius:9999px;background:var(--blush-deep)}
.care-foot{margin-top:auto;padding-top:2rem}

/* ---------- Buttons, die wie Links aussehen ---------- */
.as-btn{background:none;border:0;padding:0;font-family:inherit;cursor:pointer}

/* ---------- Dialog ---------- */
.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:flex-start;justify-content:center;padding:1.5rem;overflow-y:auto}
.modal[hidden]{display:none}
.modal-bg{position:fixed;inset:0;background:rgba(20,20,20,.55);backdrop-filter:blur(4px);animation:fade .2s ease}
.modal-box{
  position:relative;width:100%;max-width:34rem;margin:auto;
  border-radius:1.25rem;background:var(--ivory);padding:2rem;
  box-shadow:0 40px 90px -30px rgba(20,20,20,.5);animation:rise .25s cubic-bezier(.16,1,.3,1);
}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.modal-x{
  position:absolute;top:1.1rem;right:1.1rem;display:flex;align-items:center;justify-content:center;
  height:2rem;width:2rem;border-radius:9999px;border:1px solid rgba(20,20,20,.1);
  background:var(--white);color:var(--ink-soft);cursor:pointer;transition:color .15s,border-color .15s;
}
.modal-x:hover{color:var(--ink);border-color:rgba(20,20,20,.3)}
.modal-h{margin-top:.5rem;font-size:1.6rem;font-weight:600;line-height:1.2;letter-spacing:-.01em}
.modal-preis{margin-top:.35rem;font-size:1rem;font-weight:500;color:var(--mauve)}
.modal-box .form-grid{display:grid;gap:1.25rem}

/* ---------- Referenzen, aufklappbar in der Vita ---------- */
.ref{margin-top:1rem}
.ref summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.5rem;
  font-size:.875rem;font-weight:500;color:var(--ink);
  text-decoration:underline;text-decoration-color:var(--blush-deep);
  text-decoration-thickness:2px;text-underline-offset:4px;
}
.ref summary::-webkit-details-marker{display:none}
.ref summary::after{content:"+";font-weight:600;color:var(--blush-deep);text-decoration:none}
.ref[open] summary::after{content:"–"}
.ref-in{margin-top:1.25rem;border-radius:.875rem;border:1px solid rgba(20,20,20,.08);background:var(--white);padding:1.5rem}
.ref-k{font-size:.65rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.ref-l{margin-top:.875rem;display:flex;flex-direction:column;gap:.75rem;font-size:.85rem;line-height:1.6;color:var(--ink-soft)}
.ref-l li{display:flex;align-items:flex-start;gap:.625rem}
.ref-l li::before{content:"";margin-top:.6rem;height:4px;width:4px;flex:0 0 auto;border-radius:9999px;background:var(--blush-deep)}
.ref-l b{color:var(--ink);font-weight:600}
.ref-z{margin:1.5rem 0 0;border-left:2px solid var(--blush-deep);padding-left:1.25rem}
.ref-z p{font-size:.95rem;line-height:1.55;color:var(--ink);font-weight:500}
.ref-z cite{display:block;margin-top:.6rem;font-style:normal;font-size:.75rem;color:var(--ink-faint)}

/* ---------- Leistungsuebersicht mit Preisen ---------- */
.lz-liste{margin-top:3.5rem;border-top:1px solid var(--ivory-line)}
.lz{
  display:grid;grid-template-columns:2.75rem 1fr;gap:0 1rem;align-items:start;
  padding:1.5rem 0;border-bottom:1px solid var(--ivory-line);
  transition:background-color .18s,padding-left .18s;
}
@media (min-width:860px){.lz{grid-template-columns:3.5rem 1fr 13rem;gap:0 1.5rem;align-items:center}}
.lz:hover{background:var(--ivory-deep);padding-left:1rem}
.lz-n{font-size:.7rem;font-weight:600;letter-spacing:.1em;color:var(--blush-deep);padding-top:.2rem}
.lz-h{display:flex;flex-direction:column;gap:.35rem}
.lz-t{font-size:1.15rem;font-weight:600;color:var(--ink);line-height:1.3}
.lz-b{font-size:.85rem;line-height:1.6;color:var(--ink-soft);max-width:44rem}
.lz-p{
  grid-column:2;display:flex;flex-direction:column;gap:.15rem;margin-top:.75rem;
  font-size:1.05rem;font-weight:600;color:var(--ink);white-space:nowrap;
}
@media (min-width:860px){.lz-p{grid-column:3;margin-top:0;text-align:right;align-items:flex-end}}
.lz-p span{font-size:.72rem;font-weight:500;color:var(--ink-faint);letter-spacing:.02em}

/* ---------- HR-Quickcheck ---------- */
.qc{border-radius:1.25rem;border:1px solid rgba(20,20,20,.07);background:var(--white);padding:2rem}
@media (min-width:768px){.qc{padding:2.5rem}}
.qc-kopf{display:flex;align-items:center;justify-content:space-between}
.qc-f{padding:1.5rem 0;border-bottom:1px solid rgba(20,20,20,.07)}
.qc-f:first-child{padding-top:1.75rem}
.qc-f:last-child{border-bottom:0;padding-bottom:0}
.qc-f-dim{font-size:.62rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--blush-deep)}
.qc-f-t{margin-top:.45rem;font-size:1rem;line-height:1.5;color:var(--ink)}
.qc-opts{margin-top:.875rem;display:flex;flex-wrap:wrap;gap:.5rem}
.qc-opt{
  border-radius:9999px;border:1px solid rgba(20,20,20,.12);background:var(--ivory);
  padding:.45rem .95rem;font-size:.8rem;font-family:inherit;color:var(--ink-soft);cursor:pointer;
  transition:border-color .15s,background-color .15s,color .15s;
}
.qc-opt:hover{border-color:rgba(20,20,20,.35);color:var(--ink)}
.qc-opt.sel{background:var(--ink);border-color:var(--ink);color:var(--ivory)}

.qc-erg-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem}
.qc-datum{margin-top:.35rem;font-size:.78rem;color:var(--ink-faint)}
.qc-score{font-weight:600;font-size:3.25rem;line-height:1;letter-spacing:-.02em;color:var(--ink)}
.qc-score span{font-size:1.4rem;color:var(--blush-deep);margin-left:.15rem}
.qc-stufe{margin-top:1.25rem;font-size:1.05rem;line-height:1.6;color:var(--ink-soft);max-width:44rem}
.qc-balken{margin-top:2rem;display:flex;flex-direction:column;gap:.7rem}
.qc-bal{display:grid;grid-template-columns:9.5rem 1fr 3.25rem;align-items:center;gap:.9rem;font-size:.82rem;color:var(--ink-soft)}
.qc-bal-t{height:6px;border-radius:9999px;background:var(--ivory-deep);overflow:hidden}
.qc-bal-f{display:block;height:100%;border-radius:9999px;background:var(--blush-deep);transition:width .55s cubic-bezier(.16,1,.3,1)}
.qc-bal-v{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink);font-weight:500}
@media (max-width:560px){.qc-bal{grid-template-columns:7rem 1fr 2.75rem;font-size:.75rem;gap:.6rem}}
.qc-hebel{margin-top:2.25rem;border-radius:.875rem;background:var(--ivory-deep);padding:1.5rem}
.qc-hebel-i{margin-top:1rem}
.qc-hebel-i:first-child{margin-top:.875rem}
.qc-hebel-t{font-size:.95rem;font-weight:600;color:var(--ink)}
.qc-hebel-b{margin-top:.3rem;font-size:.85rem;line-height:1.6;color:var(--ink-soft)}
.qc-akt{margin-top:2rem;display:flex;flex-wrap:wrap;align-items:center;gap:1rem}
.qc-quelle{margin-top:1.5rem}

/* ---------- Druckansicht der Auswertung ---------- */
@media print{
  /* Auswertung des HR-Checks als PDF: alles ausser dem Ergebnis wird
     komplett aus dem Fluss genommen, damit keine Leerseiten entstehen. */
  body.drucken-qc > header,
  body.drucken-qc > footer,
  body.drucken-qc .modal,
  body.drucken-qc main > section{display:none!important}

  body.drucken-qc main > section#checks{display:block!important}
  body.drucken-qc #checks > .wrap{padding:0!important;max-width:none}
  body.drucken-qc #checks > .wrap > *{display:none!important}
  body.drucken-qc #checks > .wrap > #check-buehne{display:block!important}

  body.drucken-qc #qc,
  body.drucken-qc #check-buehne{border:0;margin:0;padding:0;box-shadow:none;background:transparent}
  body.drucken-qc #check-zurueck,
  body.drucken-qc #qc-fragen,
  body.drucken-qc .qc-akt{display:none!important}
  body.drucken-qc .rv{opacity:1!important;transform:none!important}

  body.drucken-qc .qc-hebel{
    background:var(--ivory-deep);-webkit-print-color-adjust:exact;print-color-adjust:exact;
    break-inside:avoid;page-break-inside:avoid;
  }
  body.drucken-qc .qc-empf{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body.drucken-qc .qc-bal-f{background:var(--blush-deep);-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body.drucken-qc .qc-balken,
  body.drucken-qc .qc-empf{break-inside:avoid;page-break-inside:avoid}
  @page{margin:16mm 14mm}
}

/* ---------- Check-Auswahl ---------- */
.check-wahl{display:grid;gap:1rem;margin-top:3.5rem}
@media (min-width:700px){.check-wahl{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.check-wahl{grid-template-columns:repeat(3,1fr)}}
.cw{
  display:flex;flex-direction:column;gap:.45rem;text-align:left;cursor:pointer;font-family:inherit;
  border-radius:1rem;border:1px solid rgba(20,20,20,.08);background:var(--ivory);padding:1.5rem;
  transition:border-color .2s,transform .2s,box-shadow .2s;
}
.cw:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:0 25px 55px -35px rgba(20,20,20,.45)}
.cw-gross{background:var(--ink);border-color:var(--ink)}
@media (min-width:1100px){.cw-gross{grid-column:span 3;flex-direction:row;align-items:center;gap:1.5rem;padding:1.75rem 2rem}}
.cw-n{font-size:.65rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blush-deep)}
.cw-t{font-size:1.15rem;font-weight:600;color:var(--ink);line-height:1.3}
.cw-b{font-size:.85rem;line-height:1.55;color:var(--ink-soft)}
.cw-m{margin-top:.4rem;font-size:.72rem;color:var(--ink-faint)}
.cw-gross .cw-t{color:var(--ivory);font-size:1.35rem}
.cw-gross .cw-b{color:rgba(250,250,250,.72);flex:1}
.cw-gross .cw-m{color:rgba(250,250,250,.5);margin-top:0;white-space:nowrap}
.check-zurueck{
  background:none;border:0;padding:0 0 1.5rem;font-family:inherit;font-size:.82rem;
  color:var(--ink-faint);cursor:pointer;transition:color .15s;
}
.check-zurueck:hover{color:var(--ink)}
.qc-empf{margin-top:1.5rem;border-radius:.875rem;background:var(--ink);color:var(--ivory);padding:1.5rem}

/* ---------- Prinzip-Grafik ---------- */
.pz{display:grid;gap:2rem;margin-top:3.5rem;align-items:center}
@media (min-width:1000px){.pz{grid-template-columns:1fr 24rem 1fr;gap:4rem}}
.pz-seite{
  border-radius:1rem;border:1px solid rgba(20,20,20,.08);background:var(--white);padding:1.75rem;
  transition:border-color .3s;
}
.pz-k{font-size:.65rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--blush-deep)}
.pz-t{margin-top:.75rem;font-size:1.15rem;font-weight:600;color:var(--ink);line-height:1.3;
  transition:opacity .25s}
.pz-b{margin-top:.75rem;font-size:.88rem;line-height:1.65;color:var(--ink-soft);transition:opacity .25s}
.pz-wechsel .pz-t,.pz-wechsel .pz-b{opacity:0}

.pz-mitte{position:relative;width:100%;max-width:22rem;margin-inline:auto;aspect-ratio:1}
.pz-svg{width:100%;height:100%;display:block;overflow:visible}
.pz-ring{fill:none;stroke:var(--line);stroke-width:1;stroke-dasharray:3 7}
.pz-dreh{transform-origin:160px 160px;animation:pzdreh 46s linear infinite}
.pz-orbit{fill:var(--blush-deep);opacity:.55}
.pz-kern{fill:var(--ink)}
.pz-kern-t{fill:var(--ivory);font-size:13px;font-weight:600;letter-spacing:.16em;font-family:inherit}
.pz-kern-s{fill:var(--blush-deep);font-size:8px;letter-spacing:.28em}
.pz-linie{stroke:var(--line);stroke-width:1.5;stroke-dasharray:4 6;animation:pzfluss 2.4s linear infinite}
.pz-l2{animation-direction:reverse}
@keyframes pzdreh{to{transform:rotate(360deg)}}
@keyframes pzfluss{to{stroke-dashoffset:-20}}

.pz-node{
  position:absolute;transform:translate(-50%,-50%);white-space:nowrap;cursor:pointer;font-family:inherit;
  border-radius:9999px;border:1px solid rgba(20,20,20,.12);background:var(--white);
  padding:.5rem 1rem;font-size:.8rem;font-weight:500;color:var(--ink-soft);
  box-shadow:0 10px 26px -16px rgba(32,29,27,.5);
  transition:background-color .22s,color .22s,border-color .22s,transform .22s,box-shadow .22s;
}
.pz-node:hover{transform:translate(-50%,-50%) scale(1.06);color:var(--ink);border-color:rgba(20,20,20,.35)}
.pz-node.aktiv{background:var(--ink);border-color:var(--ink);color:var(--ivory);box-shadow:0 14px 34px -14px rgba(20,20,20,.6)}
.pz-node.aktiv::after{
  content:"";position:absolute;inset:-5px;border-radius:9999px;border:1px solid var(--blush-deep);
  opacity:0;animation:pzpuls 2.2s ease-out infinite;
}
@keyframes pzpuls{0%{opacity:.7;transform:scale(.96)}70%{opacity:0;transform:scale(1.18)}100%{opacity:0}}
.pz-n1{top:2%;left:50%}
.pz-n2{top:50%;left:97%}
.pz-n3{top:98%;left:50%}
.pz-n4{top:50%;left:3%}
@media (max-width:999px){
  .pz-n2{left:88%}.pz-n4{left:12%}
}

.pz-fuss{
  margin-top:2.5rem;border-radius:1rem;background:var(--ink);color:var(--ivory);
  padding:1.75rem 2rem;max-width:52rem;margin-inline:auto;
}
.pz-f-k{font-size:.65rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blush-deep)}
.pz-f-t{margin-top:.6rem;font-size:1.02rem;line-height:1.65;color:rgba(250,250,250,.82);transition:opacity .25s}
.pz-wechsel .pz-f-t{opacity:0}
.pz-fuss .link-u{margin-top:1rem;display:inline-block;color:var(--ivory)}

@media (prefers-reduced-motion:reduce){
  .pz-dreh,.pz-linie,.pz-node.aktiv::after{animation:none}
  .pz-t,.pz-b,.pz-f-t{transition:none}
}

/* Leistungszeile als Schaltflaeche */
button.lz{width:100%;text-align:left;font-family:inherit;border:0;border-bottom:1px solid var(--ivory-line);cursor:pointer;background:none}
button.lz:hover{background:var(--ivory-deep)}
.lz::after{content:"";}
@media (min-width:860px){
  .lz{position:relative}
  .lz::after{
    content:"→";position:absolute;right:.25rem;top:50%;transform:translateY(-50%) translateX(-6px);
    color:var(--blush-deep);font-size:.95rem;opacity:0;transition:opacity .2s,transform .2s;
  }
  .lz:hover::after{opacity:1;transform:translateY(-50%) translateX(0)}
  .lz-p{padding-right:1.75rem}
}

/* Detailansicht im Dialog */
.md-k{margin-top:1.75rem;font-size:.65rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.md-l{margin-top:.875rem;display:flex;flex-direction:column;gap:.6rem;font-size:.9rem;color:var(--ink-soft)}
.md-l li{display:flex;align-items:flex-start;gap:.625rem;line-height:1.55}
.md-l li::before{content:"";margin-top:.55rem;height:4px;width:4px;flex:0 0 auto;border-radius:9999px;background:var(--blush-deep)}
.md-a{margin-top:.6rem;font-size:.88rem;line-height:1.65;color:var(--ink-soft)}

/* Trenner innerhalb der Check-Sektion */
.checks-trenner{border-top:1px solid rgba(20,20,20,.12);padding-top:2.5rem}
.checks-h3{margin-top:.75rem;font-size:1.6rem;font-weight:600;line-height:1.2;letter-spacing:-.01em;color:var(--ink)}

/* ---------- Statement-Band unter dem Hero ---------- */
.band{padding:5rem 0 4rem}
@media (min-width:1024px){.band{padding:6.5rem 0 5rem}}
.band-h{
  font-weight:600;font-size:2.5rem;line-height:1.1;letter-spacing:-.015em;color:var(--ivory);
  text-wrap:balance;
}
@media (min-width:640px){.band-h{font-size:3.4rem}}
@media (min-width:1024px){.band-h{font-size:4rem}}
.band-h .muted{color:rgba(250,250,250,.42)}
.band-sub{
  margin-top:1.75rem;max-width:38rem;font-size:1.125rem;line-height:1.65;color:rgba(250,250,250,.72);
  text-wrap:balance;
}
.band-drei{
  margin-top:4rem;display:grid;
  border-top:1px solid rgba(250,250,250,.14);
}
.band-drei>div{padding:1.75rem 0;border-top:1px solid rgba(250,250,250,.14)}
.band-drei>div:first-child{border-top:0}
.band-t{font-size:1.15rem;font-weight:600;color:var(--ivory);line-height:1.3}
.band-b{margin-top:.4rem;font-size:.875rem;color:rgba(250,250,250,.55)}
@media (min-width:768px){
  .band-drei{grid-template-columns:repeat(3,1fr);border-bottom:1px solid rgba(250,250,250,.14)}
  .band-drei>div{border-top:0;border-left:1px solid rgba(250,250,250,.14);padding:2rem 2rem 2rem 2rem}
  .band-drei>div:first-child{border-left:0;padding-left:0}
}

/* ---------- Drei Ebenen, kompakt über der Leistungsliste ---------- */
.ebenen{display:grid;gap:1.75rem;margin-top:3rem}
@media (min-width:768px){.ebenen{grid-template-columns:repeat(3,1fr);gap:2.5rem}}
.ebenen>div{border-top:2px solid var(--ink);padding-top:1rem}
.eb-k{font-size:.65rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--blush-deep)}
.eb-t{margin-top:.45rem;font-size:1.1rem;font-weight:600;color:var(--ink);line-height:1.3}
.eb-b{margin-top:.5rem;font-size:.85rem;line-height:1.6;color:var(--ink-soft)}

/* ============================================================
   Motion — dezente Bewegung, die Wertigkeit signalisiert
   ============================================================ */

/* Navigationslinks: Unterstreichung wächst von links */
.nav a{position:relative;padding-bottom:2px}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--blush-deep);transform:scaleX(0);transform-origin:left;
  transition:transform .32s cubic-bezier(.16,1,.3,1);
}
.nav a:hover::after{transform:scaleX(1)}
.nav a.active{text-decoration:none}
.nav a.active::after{transform:scaleX(1)}

/* Buttons heben leicht ab */
.btn{transition:background-color .2s,border-color .2s,color .2s,transform .22s cubic-bezier(.16,1,.3,1),box-shadow .22s}
.btn-dark:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(20,20,20,.65)}
.btn-ghost:hover{transform:translateY(-2px)}
.btn-light:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(20,20,20,.4)}
.btn:active{transform:translateY(0)}

/* Textlinks: Unterstreichung wächst mit */
.link-u{position:relative;text-decoration:none;padding-bottom:3px}
.link-u::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--blush-deep);transform-origin:left;
  transition:transform .3s cubic-bezier(.16,1,.3,1),background-color .2s;
}
.link-u:hover::after{background:var(--mauve);transform:scaleX(1.02)}

/* Karten reagieren einheitlich */
.card,.care,.cw,.pz-seite,.dl,.qc,.tool{
  transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s,border-color .25s;
}
.card:hover,.care:hover{transform:translateY(-3px);border-color:rgba(20,20,20,.24);box-shadow:0 28px 60px -34px rgba(20,20,20,.42)}
.card-featured:hover,.care-on:hover{box-shadow:0 34px 70px -30px rgba(20,20,20,.5)}

/* Aufzählungspunkte in Karten leuchten beim Überfahren auf */
.card li::before,.care li::before,.md-l li::before{transition:transform .25s cubic-bezier(.16,1,.3,1),background-color .25s}
.card:hover li::before,.care:hover li::before{transform:scale(1.5);background:var(--mauve)}

/* Logo: der Akzentpunkt atmet bei Berührung */
.logo svg circle{transition:transform .35s cubic-bezier(.16,1,.3,1),fill .25s;transform-origin:24.5px 9.5px}
.logo:hover svg circle{transform:scale(1.35);fill:var(--mauve)}

/* Chips und Tags */
.chip,.tag{transition:transform .22s cubic-bezier(.16,1,.3,1),background-color .22s,border-color .22s,color .22s}
.chip:hover{transform:translateY(-2px);background:var(--blush)}
.tag:hover{transform:translateY(-2px);border-color:rgba(20,20,20,.32);color:var(--ink)}

/* Leistungszeilen: Titel rückt mit, Preis rückt nach */
.lz-t,.lz-p{transition:transform .28s cubic-bezier(.16,1,.3,1)}
.lz:hover .lz-t{transform:translateX(3px)}
@media (min-width:860px){.lz:hover .lz-p{transform:translateX(-3px)}}

/* Skalenknöpfe in den Checks */
.qc-opt,.check-opt{transition:border-color .18s,background-color .18s,color .18s,transform .18s cubic-bezier(.16,1,.3,1)}
.qc-opt:hover{transform:translateY(-2px)}

/* Balken zählen sich beim Erscheinen auf */
.qc-bal-f,.check-bal-f{transition:width .7s cubic-bezier(.16,1,.3,1)}

/* Downloadkacheln */
.dl:hover{transform:translateY(-3px);box-shadow:0 20px 44px -28px rgba(20,20,20,.45)}
.dl-m{transition:transform .25s cubic-bezier(.16,1,.3,1)}
.dl:hover .dl-m{transform:translateX(3px)}

/* Aufklappbare Referenzen */
.ref summary{transition:color .2s}
.ref summary::after{display:inline-block;transition:transform .28s cubic-bezier(.16,1,.3,1)}
.ref[open] summary::after{transform:rotate(180deg)}

/* Formularfelder */
.field input,.field select,.field textarea{transition:border-color .18s,box-shadow .18s,background-color .18s}
.field input:hover,.field select:hover,.field textarea:hover{border-color:rgba(20,20,20,.25)}

/* Dialog schließen */
.modal-x{transition:color .18s,border-color .18s,transform .25s cubic-bezier(.16,1,.3,1)}
.modal-x:hover{transform:rotate(90deg)}

/* Statement-Band: die drei Punkte reagieren */
.band-drei>div{transition:background-color .3s}
@media (min-width:768px){.band-drei>div:hover{background:rgba(250,250,250,.04)}}

/* Fußzeilenlinks */
.footer-cols a{position:relative;transition:color .2s}
.footer-cols a::after{
  content:"";position:absolute;left:0;bottom:-2px;height:1px;width:100%;
  background:var(--blush-deep);transform:scaleX(0);transform-origin:left;
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.footer-cols a:hover::after{transform:scaleX(1)}

/* Wer weniger Bewegung möchte, bekommt keine */
@media (prefers-reduced-motion:reduce){
  .nav a::after,.link-u::after,.footer-cols a::after{transition:none}
  .btn,.card,.care,.cw,.dl,.chip,.tag,.lz-t,.lz-p,.qc-opt,.check-opt,
  .logo svg circle,.modal-x,.qc-bal-f,.check-bal-f,.ref summary::after{transition:none!important}
  .btn:hover,.card:hover,.care:hover,.dl:hover,.chip:hover,.tag:hover,.qc-opt:hover{transform:none!important}
}

/* ---------- Beweisleiste unter dem Hero ---------- */
.leiste{padding:1rem 0 4rem}
@media (min-width:1024px){.leiste{padding:1.5rem 0 5rem}}
.leiste-marke{
  font-size:1.35rem;font-weight:600;letter-spacing:-.01em;color:var(--ink);line-height:1.35;
}
.leiste-marke span{color:var(--ink-faint)}
@media (min-width:768px){.leiste-marke{font-size:1.6rem}}
.leiste-sub{
  margin-top:.875rem;max-width:44rem;font-size:1rem;line-height:1.65;color:var(--ink-soft);
  text-wrap:balance;
}
.leiste-drei{
  margin-top:3rem;display:grid;
  border-top:1px solid var(--ivory-line);border-bottom:1px solid var(--ivory-line);
}
.leiste-drei>div{padding:1.75rem .25rem;border-top:1px solid var(--ivory-line);transition:background-color .3s}
.leiste-drei>div:first-child{border-top:0}
.leiste-t{font-size:1.15rem;font-weight:600;color:var(--ink);line-height:1.3}
.leiste-b{margin-top:.4rem;font-size:.875rem;color:var(--ink-soft)}
@media (min-width:768px){
  .leiste-drei{grid-template-columns:repeat(3,1fr)}
  .leiste-drei>div{border-top:0;border-left:1px solid var(--ivory-line);padding:2rem}
  .leiste-drei>div:first-child{border-left:0;padding-left:0}
  .leiste-drei>div:hover{background:var(--ivory-deep)}
}

/* ---------- Diagnose-Kacheln in „Was ist LOTTA WORK" ---------- */
.diag-frage{
  margin-top:4rem;font-size:1.35rem;font-weight:600;color:var(--ink);line-height:1.35;
}
@media (min-width:768px){.diag-frage{font-size:1.6rem}}
.diag{display:grid;gap:1rem;margin-top:1.75rem}
@media (min-width:640px){.diag{grid-template-columns:repeat(2,1fr);gap:1.25rem}}
@media (min-width:1100px){.diag{grid-template-columns:repeat(4,1fr)}}
.diag-i{
  height:100%;border-radius:1rem;border:1px solid rgba(20,20,20,.09);background:var(--white);
  padding:1.5rem;transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s,border-color .25s;
}
.diag-i:hover{transform:translateY(-3px);border-color:rgba(20,20,20,.26);box-shadow:0 26px 56px -34px rgba(20,20,20,.4)}
.diag-k{
  font-size:1.1rem;font-weight:600;color:var(--ink);line-height:1.3;
  padding-left:1rem;position:relative;
}
.diag-k::before{
  content:"";position:absolute;left:0;top:.45rem;height:5px;width:5px;border-radius:9999px;background:var(--blush-deep);
  transition:transform .25s cubic-bezier(.16,1,.3,1);
}
.diag-i:hover .diag-k::before{transform:scale(1.6)}
.diag-b{margin-top:.6rem;padding-left:1rem;font-size:.875rem;line-height:1.6;color:var(--ink-soft)}
.diag-fuss{margin-top:2.5rem;font-size:1rem;line-height:1.7;color:var(--ink-soft)}
.diag-fuss .link-u{margin-left:.35rem}

/* ---------- Wortmarke ---------- */
.wm{display:inline-block;line-height:1;color:var(--ink);font-family:"Jost",ui-sans-serif,sans-serif}
/* LOTTA WORK: beide Woerter gleich gross, WORK weiter gesperrt */
.wm b{display:block;font-weight:200;font-size:1.5rem;letter-spacing:.2em;text-indent:.2em}
.wm i{display:block;font-style:normal;font-weight:200;font-size:1.5rem;letter-spacing:.32em;text-indent:.32em;color:var(--ink);margin-top:.2rem}
.wm-quer{display:inline-flex;align-items:baseline;gap:.7rem;flex:0 0 auto;margin-right:1.5rem}
.wm-quer b{display:inline-block;font-size:1.15rem;letter-spacing:.2em;text-indent:.2em}
.wm-quer i{display:inline-block;font-size:1.15rem;font-weight:200;color:var(--ink);margin-top:0;letter-spacing:.32em;text-indent:.32em}
.wm-quer b,.wm-quer i{transition:opacity .2s}
.wm-quer:hover b,.wm-quer:hover i{opacity:.65}
@media (max-width:359px){.wm-quer i{display:none}}
.site-footer .wm b,.site-footer .wm i{font-size:1.35rem}

/* Zusatzzeile im Hero: nimmt die drei häufigsten Einwände vorweg */
.hero-plus{margin-top:1.25rem;max-width:34rem;font-size:.9rem;line-height:1.6;color:var(--ink-faint)}

/* Preiszeile in den Einstiegskarten */
.eins-preis{margin-top:.5rem;font-size:1.05rem;font-weight:600;color:var(--ink)}
.eins-preis span{font-size:.8rem;font-weight:500;color:var(--ink-faint)}

/* Bausteine-Zeile in den Kernangebots-Karten */
.bausteine{
  margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid rgba(20,20,20,.09);
  font-size:.8rem;line-height:1.65;color:var(--ink-soft);
}
.bausteine b{
  display:block;margin-bottom:.4rem;font-size:.62rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint);
}

/* ---------- Haltungsseite ---------- */
.haltung{margin-top:3.5rem;display:flex;flex-direction:column}
.hz{display:grid;grid-template-columns:3rem 1fr;gap:0 1.5rem;padding:2rem 0;border-top:1px solid rgba(20,20,20,.1)}
.hz:last-child{border-bottom:1px solid rgba(20,20,20,.1)}
@media (min-width:768px){.hz{grid-template-columns:5rem 1fr;gap:0 2.5rem;padding:2.5rem 0}}
.hz-n{font-size:.7rem;font-weight:600;letter-spacing:.12em;color:var(--blush-deep);padding-top:.35rem}
.hz h3{font-size:1.35rem;font-weight:600;line-height:1.3;color:var(--ink)}
.hz p{margin-top:.875rem;font-size:.95rem;line-height:1.7;color:var(--ink-soft);max-width:44rem}

/* ---------- Konzepte entlang des Beschäftigungszyklus ---------- */
.kz-phase{
  margin-top:2.5rem;font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blush-deep);padding-bottom:.75rem;border-bottom:1px solid rgba(20,20,20,.12);
}
.kz-reihe{display:grid;gap:0}
@media (min-width:760px){.kz-reihe{grid-template-columns:repeat(2,1fr);gap:0 2.5rem}}
.kz{padding:1.25rem 0;border-bottom:1px solid var(--ivory-line)}
.kz-t{font-size:1rem;font-weight:600;color:var(--ink);line-height:1.35}
.kz-b{margin-top:.4rem;font-size:.85rem;line-height:1.6;color:var(--ink-soft)}
.hero-fuer{
  margin-top:1.25rem;font-size:.78rem;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--blush-deep);
}

/* ---------- Kopfzeile der Unterseiten ---------- */
.hero-seite .hero-solo{padding-top:5rem;padding-bottom:4rem;max-width:44rem}
@media (min-width:900px){.hero-seite .hero-solo{padding-top:7rem;padding-bottom:5.5rem}}
.hero-seite h1{margin-top:1.25rem}
.hero-seite p.lead{margin-top:1.5rem;max-width:38rem}
.hero-seite .hero-plus{max-width:38rem}

/* ---------- Teaser-Zellen auf der Startseite ---------- */
.zwei-spalten,.drei-spalten{display:grid;gap:2.5rem}
@media (min-width:760px){.zwei-spalten{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.drei-spalten{grid-template-columns:repeat(3,1fr);gap:2rem}}
.tz{display:flex;flex-direction:column;height:100%;padding-top:1.5rem;border-top:1px solid rgba(20,20,20,.14)}
.tz-k{font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blush-deep)}
.tz-t{margin-top:.9rem;font-size:1.375rem;line-height:1.25;font-weight:600;color:var(--ink)}
.tz-b{margin-top:.85rem;font-size:.9rem;line-height:1.65;color:var(--ink-soft)}
.tz-p{margin-top:auto;padding-top:1.5rem;font-size:.85rem;font-weight:600;color:var(--ink)}
/* sec-deep ist ein helleres Beige, keine dunkle Flaeche — Textfarben bleiben dunkel.
   Nur auf sec-ink wird invertiert. */
.sec-ink .tz{border-top-color:rgba(255,255,255,.18)}
.sec-ink .tz-t,.sec-ink .tz-p{color:var(--ivory)}
.sec-ink .tz-b{color:rgba(245,243,240,.72)}

/* ---------- Schaltflaechenzeile ---------- */
.btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:1rem}

/* ---------- aktiver Menuepunkt ---------- */
.nav a.hier{color:var(--ink)}
.nav a.hier::after{transform:scaleX(1)}

/* ---------- Kopfzeile der Unterseiten: ruhiger als der Hero ---------- */
.seitenkopf{background:var(--ivory);border-bottom:1px solid var(--ivory-line)}
.seitenkopf .wrap{padding-block:3rem 2.25rem}
@media (min-width:900px){.seitenkopf .wrap{padding-block:4rem 2.5rem}}
.h-seite{margin-top:1rem;font-weight:600;font-size:2rem;line-height:1.14;letter-spacing:-.012em}
@media (min-width:640px){.h-seite{font-size:2.375rem}}
@media (min-width:1024px){.h-seite{font-size:2.625rem}}
.seitenkopf .lead{margin-top:1.125rem;max-width:40rem}
.seitenkopf-plus{margin-top:1rem;max-width:40rem;font-size:.85rem;line-height:1.6;color:var(--ink-faint)}
/* Erste Sektion direkt nach der Kopfzeile braucht oben weniger Luft */
.seitenkopf + .sec > .sec-pad{padding-top:2.5rem}
@media (min-width:900px){.seitenkopf + .sec > .sec-pad{padding-top:3rem}}

/* ---------- Kernbotschaft und Ergebnis in den Angebotskarten ---------- */
.karte-zitat{
  margin-top:.75rem;font-size:.9rem;line-height:1.5;font-weight:500;
  color:var(--blush-deep);
}
.karte-ergebnis{
  margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--ivory-line);
  font-size:.85rem;line-height:1.6;color:var(--ink-soft);
}
.karte-ergebnis b{
  display:block;margin-bottom:.4rem;font-size:.65rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);
}

/* ---------- Faktenzeile beim HR Check ---------- */
.check-fakten{
  display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;
  font-size:.8rem;font-weight:500;letter-spacing:.02em;color:var(--ink-soft);
}
.check-fakten span{color:var(--blush-deep)}
.spezial-hinweis{margin-top:1rem;max-width:34rem;font-size:.85rem;line-height:1.6;color:var(--ink-faint)}

/* ---------- Konzepte: Details beim Überfahren, Tippen oder Fokus ---------- */
.kz{position:relative;cursor:default;transition:background .25s ease}
.kz-t{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.kz-pfeil{
  flex:0 0 auto;width:.55rem;height:.55rem;margin-top:.1rem;
  border-right:1.5px solid var(--blush-deep);border-bottom:1.5px solid var(--blush-deep);
  transform:rotate(45deg);opacity:.55;transition:transform .3s ease,opacity .2s ease;
}
.kz-mehr{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .35s cubic-bezier(.16,1,.3,1);
}
.kz-mehr-in{overflow:hidden}
.kz-l{
  margin-top:1rem;font-size:.82rem;line-height:1.6;color:var(--ink-soft);
  padding-left:.9rem;border-left:1px solid var(--blush);
}
.kz-l b{
  display:block;margin-bottom:.25rem;font-size:.63rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);
}
.kz-mehr-in>.kz-l:last-child{padding-bottom:.35rem}

/* geöffnet: per Maus, Tastatur oder Tippen */
.kz:hover,.kz:focus-visible,.kz[data-offen]{background:rgba(255,255,255,.45)}
.kz:hover .kz-mehr,.kz:focus-within .kz-mehr,.kz[data-offen] .kz-mehr{grid-template-rows:1fr}
.kz:hover .kz-pfeil,.kz:focus-within .kz-pfeil,.kz[data-offen] .kz-pfeil{transform:rotate(225deg);opacity:1}
.kz:focus{outline:none}
.kz:focus-visible{outline:2px solid var(--ink);outline-offset:4px}

/* Auf Touch-Geräten öffnet erst das Tippen — Hover würde dort hängen bleiben */
@media (hover:none){
  .kz:hover .kz-mehr{grid-template-rows:0fr}
  .kz:hover .kz-pfeil{transform:rotate(45deg)}
  .kz[data-offen] .kz-mehr{grid-template-rows:1fr}
  .kz[data-offen] .kz-pfeil{transform:rotate(225deg)}
}
@media (prefers-reduced-motion:reduce){
  .kz-mehr{transition:none}
  .kz-pfeil{transition:none}
}

/* ---------- Honorarblock in den Angebotskarten ---------- */
.card-preis{
  margin-top:1.25rem;padding:1.125rem 0 0;
  border-top:1px solid var(--ivory-line);
}
.card-preis-l{
  font-size:.63rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);
}
.card .card-preis .price{
  margin-top:.5rem;font-size:1.375rem;font-weight:600;letter-spacing:-.01em;color:var(--ink);
}
.card .card-preis .price-note{margin-top:.3rem;font-size:.75rem;line-height:1.5;color:var(--ink-faint)}
.card-anpassung{
  margin-top:.85rem;padding-top:.85rem;border-top:1px dashed rgba(20,20,20,.12);
  font-size:.78rem;line-height:1.55;color:var(--ink-soft);
}

/* ---------- Zuschnitt: wie Umfang und Honorar zustande kommen ---------- */
.zuschnitt{
  margin-top:4rem;padding-top:3rem;border-top:1px solid var(--ivory-line);
  display:grid;gap:2.5rem;
}
@media (min-width:900px){.zuschnitt{grid-template-columns:.85fr 1.15fr;gap:4rem}}
.zuschnitt-h{margin-top:1rem;font-size:1.625rem;line-height:1.2;font-weight:600;letter-spacing:-.01em}
.zuschnitt-b{margin-top:1rem;font-size:.9rem;line-height:1.65;color:var(--ink-soft)}
.zuschnitt-liste{display:grid;gap:0}
@media (min-width:640px){.zuschnitt-liste{grid-template-columns:repeat(2,1fr);gap:0 2.5rem}}
.zs{display:grid;grid-template-columns:2rem 1fr;gap:0 1rem;padding:1.125rem 0;border-top:1px solid var(--ivory-line)}
.zs-n{font-size:.68rem;font-weight:600;letter-spacing:.1em;color:var(--blush-deep);padding-top:.15rem}
.zs-t{font-size:.92rem;font-weight:600;color:var(--ink);line-height:1.35}
.zs-b{margin-top:.35rem;font-size:.82rem;line-height:1.6;color:var(--ink-soft)}
.sec-deep .zuschnitt,.sec-deep .zs{border-top-color:rgba(20,20,20,.1)}

/* ---------- Zurueckhaltende Bewegung ---------- */
.site-header{transition:box-shadow .35s ease,background-color .35s ease}
.site-header.gescrollt{box-shadow:0 12px 30px -26px rgba(20,20,20,.5)}
.fortschritt{
  position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--blush-deep);transform:scaleX(0);transform-origin:0 50%;
  will-change:transform;pointer-events:none;
}
.portrait img{will-change:transform,opacity}

/* Konzepte und Kacheln reagieren spuerbar, aber ruhig */
.kz{transition:background .25s ease,transform .25s cubic-bezier(.16,1,.3,1)}
.kz:hover{transform:translateX(2px)}
.ruled{transition:transform .3s cubic-bezier(.16,1,.3,1),border-top-color .3s ease}
.ruled:hover{transform:translateY(-2px);border-top-color:var(--blush-deep)}
.tz{transition:border-top-color .3s ease}
.tz:hover{border-top-color:var(--blush-deep)}
.zs{transition:border-top-color .3s ease}
.zs:hover{border-top-color:var(--blush-deep)}

@media (prefers-reduced-motion:reduce){
  .site-header,.fortschritt,.kz,.ruled,.tz,.zs{transition:none!important}
  .kz:hover,.ruled:hover{transform:none!important}
  .fortschritt{display:none}
}

/* ---------- Hero: Claim gross, HR-Aussage als Unterzeile ---------- */
/* Etwas schmaler gesetzt, damit jede Zeile ein ganzer Satz bleibt */
.hero h1{font-size:2.5rem}
@media (min-width:640px){.hero h1{font-size:3rem}}
@media (min-width:1024px){.hero h1{font-size:3.25rem}}
.hero-sub{
  margin-top:1.25rem;max-width:32rem;
  font-size:1.5rem;line-height:1.3;font-weight:400;
  letter-spacing:-.01em;color:var(--ink);
}
@media (min-width:640px){.hero-sub{font-size:1.5rem}}
.hero p.lead{margin-top:1.25rem}

/* ================= Schaubilder auf der Haltungsseite ================= */
.bild{
  margin:2.5rem 0 0;padding:1.75rem;border:1px solid var(--ivory-line);
  border-radius:1rem;background:var(--white);
}
.sec-deep .bild{background:var(--ivory)}
.bild-eng{padding:1.5rem}
.bild-kopf{margin-bottom:1.5rem;padding-bottom:.9rem;border-bottom:1px solid var(--ivory-line)}
.bild-kopf .bild-t{font-size:.95rem}
.bild-k{font-size:.63rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blush-deep)}
.bild-t{font-size:.92rem;font-weight:600;color:var(--ink)}
.bild figcaption{
  margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--ivory-line);
  font-size:.76rem;line-height:1.55;color:var(--ink-faint);
}

/* Abbildung 1 — Saeulen. Drei Zeilen im Raster, damit die Bezugslinie
   exakt auf der Oberkante der Saeulen sitzt. */
.saeulen{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto auto auto;gap:.65rem 1.5rem}
.sa{display:contents}
.sa-l{grid-row:1;align-self:end;font-size:.72rem;line-height:1.4;color:var(--ink-soft);text-align:center}
.sa-spur{grid-row:2;position:relative;width:100%;height:7.5rem}
/* Bezugslinie: jede Spalte traegt ihr Segment, die Luecken werden ueberbrueckt */
.sa-spur::before{
  content:"";position:absolute;top:0;left:-.75rem;right:-.75rem;height:1px;
  background:repeating-linear-gradient(90deg,rgba(20,20,20,.22) 0 5px,transparent 5px 11px);
}
.sa-f{
  position:absolute;left:22%;right:22%;bottom:0;height:var(--h);
  background:var(--ink);border-radius:.3rem .3rem 0 0;transform-origin:50% 100%;
}
.sa-umriss .sa-f{background:transparent;border:1.5px dashed rgba(20,20,20,.28);border-bottom:0}
.sa-f.sa-schwach{background:var(--blush-deep)}
.sa-w{grid-row:3;font-size:.72rem;font-weight:600;color:var(--ink);text-align:center;line-height:1.35}
.sa-umriss .sa-w{color:var(--ink-faint);font-weight:500}

@media (max-width:560px){
  .saeulen{grid-template-columns:1fr 5rem 6.5rem;grid-template-rows:none;gap:.9rem}
  .sa{display:contents}
  .sa-l{grid-row:auto;grid-column:1;align-self:center;text-align:left}
  .sa-spur{grid-row:auto;grid-column:2;width:5rem;height:1.4rem;justify-self:start}
  .sa-spur::before{display:none}
  .sa-f{left:0;top:.15rem;bottom:.15rem;right:auto;height:auto;width:var(--h);border-radius:.3rem}
  .sa-umriss .sa-f{border:1.5px dashed rgba(20,20,20,.28);border-radius:.3rem}
  .sa-w{grid-row:auto;grid-column:3;align-self:center;text-align:left}
}

/* Abbildung 2 — drei Spalten Diagnose */
.wege{display:flex;flex-direction:column}
.weg-kopf,.weg{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:.75rem 1rem;align-items:baseline}
.weg-kopf{padding-bottom:.6rem;border-bottom:1px solid var(--ink)}
.weg-kopf span{font-size:.63rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.weg{padding:.85rem 0;border-bottom:1px solid var(--ivory-line)}
.w-a{font-size:.85rem;font-weight:600;color:var(--ink)}
.w-b{font-size:.82rem;color:var(--ink-faint);text-decoration:line-through;text-decoration-color:var(--blush-deep)}
.w-c{font-size:.82rem;color:var(--ink-soft)}
@media (max-width:640px){
  .weg-kopf{display:none}
  .weg{grid-template-columns:1fr;gap:.2rem}
  .w-b::before{content:"statt: ";text-decoration:none;display:inline-block}
  .w-c::before{content:"sondern: ";color:var(--ink-faint)}
}

/* Abbildung 3 — Zeitachse */
.achse{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.achse li{position:relative;padding:.55rem 0 .55rem 1.75rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem .75rem}
.achse li::before{
  content:"";position:absolute;left:.31rem;top:0;bottom:0;width:1px;background:var(--ivory-line);
}
.achse li:first-child::before{top:50%}
.achse li:last-child::before{bottom:50%}
.ac-p{
  position:absolute;left:0;top:50%;margin-top:-.22rem;
  width:.44rem;height:.44rem;border-radius:50%;background:var(--ivory-line);
}
.ac-t{font-size:.85rem;color:var(--ink-soft)}
.achse .ac-marke .ac-t{font-weight:600;color:var(--ink)}
.achse .ac-marke .ac-p{background:var(--ink)}
.achse .ac-marke-a .ac-p{background:var(--blush-deep)}
.ac-m{
  font-size:.68rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding:.18rem .55rem;border-radius:9999px;background:var(--ivory-deep);color:var(--ink-faint);
}
.ac-marke-a .ac-m{background:var(--blush-light);color:var(--mauve)}
.ac-marke-b .ac-m{background:var(--ink);color:var(--ivory)}

/* Abbildung 4 — Herleitungskette */
.kette{list-style:none;margin:0;padding:0;display:grid;gap:0}
@media (min-width:760px){.kette{grid-template-columns:repeat(2,1fr);gap:0 2rem}}
.kette li{display:grid;grid-template-columns:1.75rem 1fr;gap:0 .75rem;padding:.9rem 0;border-top:1px solid var(--ivory-line)}
.ke-n{font-size:.65rem;font-weight:600;letter-spacing:.1em;color:var(--blush-deep);padding-top:.15rem}
.ke-t{font-size:.88rem;font-weight:600;color:var(--ink)}
.ke-b{grid-column:2;font-size:.79rem;line-height:1.55;color:var(--ink-soft);margin-top:.2rem}

@media (prefers-reduced-motion:reduce){
  .sa-f{transform:scaleY(1);transition:none}
}

/* ---------- Ablaufphasen auf der Leistungsseite ---------- */
.phasen{display:grid;gap:0;margin-top:3.5rem}
@media (min-width:760px){.phasen{grid-template-columns:repeat(2,1fr);gap:0 3rem}}
@media (min-width:1100px){.phasen{grid-template-columns:repeat(4,1fr);gap:0 2rem}}
.ph{display:flex;flex-direction:column;height:100%;padding:1.5rem 0;border-top:2px solid var(--ink)}
.ph-n{font-size:.68rem;font-weight:600;letter-spacing:.14em;color:var(--blush-deep)}
.ph-t{margin-top:.65rem;font-size:1.375rem;font-weight:600;line-height:1.2;color:var(--ink)}
.ph-b{margin-top:.75rem;font-size:.85rem;line-height:1.6;color:var(--ink-soft)}
.ph-e{
  margin-top:auto;padding-top:1.25rem;
  font-size:.79rem;line-height:1.55;color:var(--ink-soft);
}
.ph-e b{
  display:block;margin-bottom:.3rem;font-size:.63rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);
}
@media (max-width:759px){.ph{padding-top:1.25rem}.ph-e{margin-top:1rem}}

/* ---------- Beschaeftigungszyklus (eigene Klassen: .lz war bereits vergeben) ---------- */
.zyk{display:grid;gap:0}
@media (min-width:680px){.zyk{grid-template-columns:repeat(3,1fr);gap:1.75rem}}
@media (min-width:1000px){.zyk{grid-template-columns:repeat(6,1fr);gap:0 1.25rem}}
.zyk-s{position:relative;padding:1.5rem 0 1.25rem}
/* durchgehende Linie: jede Station traegt ihr Segment, Luecken werden ueberbrueckt */
.zyk-s::before{
  content:"";position:absolute;top:0;left:-.625rem;right:-.625rem;height:1px;background:var(--ivory-line);
}
@media (max-width:999px){.zyk-s::before{left:0;right:0}}
.zyk-p{
  position:absolute;top:-.235rem;left:0;
  width:.5rem;height:.5rem;border-radius:50%;background:var(--blush-deep);
}
.zyk-s:first-child .zyk-p,
.zyk-s:last-child .zyk-p{background:var(--ink)}
.zyk-t{font-size:.85rem;font-weight:600;line-height:1.3;color:var(--ink);min-height:2.6em}
.zyk-b{margin-top:.35rem;font-size:.76rem;line-height:1.55;color:var(--ink-soft)}
@media (max-width:679px){
  .zyk-s{padding:1.25rem 0 1rem 1.25rem}
  .zyk-p{top:1.35rem}
  .zyk-t{min-height:0}
}

/* ---------- Was aus einer Ueberzeugung als Leistung folgt ---------- */
.ph-folge{
  margin-top:1.25rem;padding:1rem 1.25rem;border-radius:.75rem;
  background:var(--blush-light);font-size:.85rem;line-height:1.6;color:var(--ink-soft);
}
.ph-folge b{
  display:block;margin-bottom:.35rem;font-size:.63rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--blush-deep);
}

/* ---------- Gestaffeltes Erscheinen ---------- */
.js .rv-staffel{transition-delay:var(--verzug,0ms)}

/* ---------- Trennlinien laufen ein ---------- */
.checks-trenner,.zuschnitt,.weg-kopf{position:relative}
.js .checks-trenner::after,
.js .zuschnitt::after,
.js .weg-kopf::after{
  content:"";position:absolute;left:0;top:0;height:1px;width:100%;
  background:var(--ink);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .9s cubic-bezier(.16,1,.3,1);
}
.js .checks-trenner.linie-da::after,
.js .zuschnitt.linie-da::after,
.js .weg-kopf.linie-da::after{transform:scaleX(1)}

/* ---------- Feineres Feedback auf Eingaben ---------- */
.btn{transition:background-color .25s ease,border-color .25s ease,color .25s ease,
     transform .18s cubic-bezier(.16,1,.3,1),box-shadow .25s ease}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn-dark:hover{box-shadow:0 10px 24px -14px rgba(20,20,20,.7)}
.link-u{transition:color .2s ease}
.check-opt,.qc-opt{transition:border-color .2s ease,background-color .2s ease,transform .18s cubic-bezier(.16,1,.3,1)}
.check-opt:hover,.qc-opt:hover{transform:translateX(2px)}

/* ---------- Sanfter Seitenwechsel ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-raus .28s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vt-rein .38s cubic-bezier(0,0,.2,1) both}
@keyframes vt-raus{to{opacity:0}}
@keyframes vt-rein{from{opacity:0;transform:translateY(8px)}}

@media (prefers-reduced-motion:reduce){
  .js .rv-staffel{transition-delay:0ms!important}
  .js .checks-trenner::after,.js .zuschnitt::after,.js .weg-kopf::after{transform:scaleX(1);transition:none}
  .btn:hover,.btn:active,.check-opt:hover,.qc-opt:hover{transform:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* ---------- Dunkle Ankersektionen: Lesbarkeit der neuen Komponenten ---------- */
.sec-ink .kz{border-bottom-color:rgba(250,250,250,.14)}
.sec-ink .kz-t{color:var(--ivory)}
.sec-ink .kz-b{color:rgba(250,250,250,.7)}
.sec-ink .kz:hover,.sec-ink .kz[data-offen]{background:rgba(255,255,255,.05)}
.sec-ink .kz-l{color:rgba(250,250,250,.72);border-left-color:rgba(209,137,159,.6)}
.sec-ink .kz-l b{color:rgba(250,250,250,.5)}
.sec-ink .body-t,.sec-ink .small-t{color:rgba(250,250,250,.72)}
.sec-ink .faint-t{color:rgba(250,250,250,.5)}
.sec-ink h2,.sec-ink h3{color:var(--ivory)}
.sec-ink .check-fakten{color:rgba(250,250,250,.72)}
.sec-ink .btn-ghost{border-color:rgba(250,250,250,.28);color:var(--ivory)}
.sec-ink .btn-ghost:hover{border-color:rgba(250,250,250,.6)}
.sec-ink .btn-dark{background:var(--ivory);color:var(--ink)}
.sec-ink .btn-dark:hover{background:#fff}
.sec-ink .link-u{color:var(--ivory)}
.sec-ink .note{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}
.sec-ink .note .small-t{color:rgba(250,250,250,.75)}


/* ================= Ueberschriften in Jost =================
   Dieselbe Schrift wie die Wortmarke: geometrisch, leicht, eigenstaendig.
   Manrope bleibt fuer Fliesstext und Bedienelemente, weil es in kleinen
   Groessen besser lesbar ist. */
h1,h2,h3,.h1,.h2,.h-seite,.hero-sub,.manifest .h2{
  font-family:"Jost",ui-sans-serif,system-ui,sans-serif;
  letter-spacing:-.005em;
}
/* Fliesstext bleibt Manrope, auch wenn er .balance traegt */
p.balance,p.lead,.lead{font-family:"Source Sans 3",ui-sans-serif,system-ui,sans-serif;letter-spacing:0}
.hero-sub,p.hero-sub{font-family:"Jost",ui-sans-serif,system-ui,sans-serif;font-weight:400;letter-spacing:-.005em}
h1,.h1{font-weight:300}
h2,.h2{font-weight:300}
h3{font-weight:400}
.h-seite{font-weight:300}

/* Jost laeuft optisch kleiner und leichter — Groessen leicht anheben */
h1,.h1{font-size:2.7rem;line-height:1.06}
@media (min-width:640px){h1,.h1{font-size:3.3rem}}
@media (min-width:1024px){h1,.h1{font-size:3.6rem}}
.hero h1{font-size:2.7rem}
@media (min-width:640px){.hero h1{font-size:3.2rem}}
@media (min-width:1024px){.hero h1{font-size:3.5rem}}
.h-seite{font-size:2.2rem}
@media (min-width:640px){.h-seite{font-size:2.6rem}}
@media (min-width:1024px){.h-seite{font-size:2.9rem}}

/* Kleine Auszeichnungen bleiben in Manrope — dort traegt Jost nicht */
.eyebrow,.card-num,.kz-t,.ph-t,.zs-t,.tz-k,.bild-t,.check-kicker,
.weg-kopf span,.zyk-t,.ke-t,.ac-m,.badge,.chip,.tag,.sa-w,.sa-l{
  font-family:"Source Sans 3",ui-sans-serif,system-ui,sans-serif;
}
/* Angebotstitel und Kartenueberschriften profitieren von Jost */
.card h3,.tz-t,.weg-t,.zuschnitt-h{font-family:"Jost",ui-sans-serif,system-ui,sans-serif;font-weight:400}

/* ---------- Wegweiser: Einstieg ueber die eigene Lage ---------- */
.weg-wahl{display:grid;gap:0;margin-top:3rem}
@media (min-width:900px){.weg-wahl{grid-template-columns:repeat(3,1fr);gap:0 2rem}}
.ww{
  display:flex;flex-direction:column;height:100%;
  padding:1.75rem 0 1.5rem;border-top:2px solid var(--ivory-line);
  text-decoration:none;transition:border-top-color .3s ease,transform .3s cubic-bezier(.16,1,.3,1);
}
.ww:hover{border-top-color:var(--blush-deep);transform:translateY(-3px)}
.ww-frage{font-size:.95rem;line-height:1.45;color:var(--ink-soft);min-height:4.2em}
.ww-antwort{
  margin-top:1.1rem;font-family:"Jost",ui-sans-serif,sans-serif;font-weight:400;
  font-size:1.75rem;line-height:1.15;color:var(--ink);
}
.ww-mehr{margin-top:.75rem;font-size:.85rem;line-height:1.6;color:var(--ink-faint)}
.ww-preis{
  margin-top:auto;padding-top:1.25rem;font-size:.85rem;font-weight:600;
  color:var(--blush-deep);letter-spacing:.01em;
}
@media (max-width:899px){.ww{padding-bottom:1.75rem}.ww-frage{min-height:0}}
.kz-phase-u{
  display:block;margin-top:.35rem;font-size:.78rem;font-weight:400;
  letter-spacing:0;text-transform:none;color:var(--ink-faint);
}

/* ================= Ruhigere Bewegung, feinere Ausführung =================
   Weniger gleichzeitige Effekte, längere und weichere Übergänge.
   Bewegung soll auffallen, wenn man darauf achtet — nicht vorher. */

/* Reveal: kürzerer Weg, längere Dauer, kleinerer Versatz */
.js .rv{transform:translateY(10px);transition:opacity 1s cubic-bezier(.22,1,.36,1),transform 1s cubic-bezier(.22,1,.36,1)}
.js .rv-staffel{transition-delay:calc(var(--verzug,0ms) * .55)}

/* Schaltflächen: keine Sprünge mehr, nur Farbe und ein feiner Schatten */
.btn{transition:background-color .4s cubic-bezier(.22,1,.36,1),border-color .4s ease,color .4s ease,box-shadow .4s ease}
.btn:hover{transform:none}
.btn:active{transform:none;opacity:.9}
.btn-dark:hover{box-shadow:0 6px 18px -12px rgba(20,20,20,.55)}

/* Karten: heben sich kaum noch, der Rand trägt die Reaktion */
.card:hover,.care:hover{
  transform:none;border-color:rgba(20,20,20,.2);
  box-shadow:0 18px 44px -34px rgba(20,20,20,.3);
}
.card,.care{transition:border-color .45s ease,box-shadow .45s ease}
.card:hover li::before,.care:hover li::before{transform:none;background:var(--blush-deep)}

/* Listen und Zeilen: kein Verschieben mehr */
.kz:hover{transform:none;background:rgba(20,20,20,.02)}
.sec-ink .kz:hover{background:rgba(255,255,255,.035)}
.ruled:hover{transform:none;border-top-color:rgba(20,20,20,.28)}
.check-opt:hover,.qc-opt:hover{transform:none}
.ww:hover{transform:none;border-top-color:var(--blush-deep)}
.kz,.ruled,.ww{transition:background-color .4s ease,border-color .4s ease}

/* Lesefortschritt: feiner und zurückhaltender */
.fortschritt{height:1px;opacity:.5}

/* Konzepte klappen langsamer und weicher auf */
.kz-mehr{transition:grid-template-rows .5s cubic-bezier(.22,1,.36,1)}
.kz-pfeil{transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .3s ease}

/* Seitenwechsel: ruhiger */
::view-transition-old(root){animation:vt-raus .22s ease both}
::view-transition-new(root){animation:vt-rein .45s cubic-bezier(.22,1,.36,1) both}
@keyframes vt-rein{from{opacity:0;transform:translateY(5px)}}

/* Portrait: kein Zoom beim Überfahren mehr */
.portrait.gezeigt:hover img{transform:scale(1)}
.portrait img{transition:transform 1.6s cubic-bezier(.22,1,.36,1),opacity 1.1s ease}

/* ---------- Feinere Ausführung ---------- */
/* Haarlinien statt 1px, wo der Bildschirm es hergibt */
@media (min-resolution:1.5dppx){
  .sec,.kz,.ruled,.zs,.lz-station,.zyk-s,.bild-kopf,.card-preis,.karte-ergebnis{
    border-width:.5px;
  }
}
/* Optischer Randausgleich für große Überschriften */
h1,.h1,.h-seite{margin-left:-.02em}
/* Zahlen tabellarisch, damit Preise untereinander stehen */
.price,.tz-p,.ww-preis,.zs-b,.sla-v{font-variant-numeric:tabular-nums}
/* Mehr Luft zwischen den Abschnitten */
.sec-pad{padding-block:7rem}
@media (max-width:759px){.sec-pad{padding-block:4.5rem}}

@media (prefers-reduced-motion:reduce){
  .js .rv,.btn,.card,.care,.kz,.ruled,.ww,.kz-mehr,.portrait img{transition:none!important}
}

/* ---------- Karten: gleiche Startlinien, damit die Reihe ruhig steht ---------- */
.cards-3 .card{display:grid;grid-template-rows:auto auto auto auto 1fr auto auto;align-content:start}
.card .karte-zitat{min-height:3em;display:flex;align-items:flex-start}
.card .card-preis{margin-top:1.25rem}
.card .price-note{min-height:2.6em}
.card .card-anpassung{min-height:4em}
.card>p.small-t{min-height:7.5em}
.card ul{min-height:9.5em;align-content:start}
.card .bausteine{min-height:5.5em}
@media (max-width:899px){
  .card .karte-zitat,.card .price-note,.card .card-anpassung,
  .card>p.small-t,.card ul,.card .bausteine{min-height:0}
  .cards-3 .card{display:flex;flex-direction:column}
}

/* ================= Große Aussage in der Markenfarbe =================
   Ein Blickfang pro Seite, nicht mehr. Die Aussage traegt die Farbe,
   nicht die Dekoration. */
.gross{
  font-family:"Jost",ui-sans-serif,sans-serif;font-weight:400;
  font-size:clamp(2.6rem,7vw,5.2rem);line-height:.98;letter-spacing:-.03em;
  color:var(--blush-deep);max-width:14ch;
}
.gross-klein{
  display:block;margin-top:1.5rem;font-family:"Source Sans 3",sans-serif;
  font-size:1rem;font-weight:400;line-height:1.6;letter-spacing:0;
  color:var(--ink-soft);max-width:34rem;
}
.sec-ink .gross-klein{color:rgba(250,250,250,.72)}

/* Gestrichelte Verbindung zwischen Ablaufschritten */
.phasen{position:relative}
@media (min-width:1100px){
  .phasen::before{
    content:"";position:absolute;left:12%;right:12%;top:1.1rem;height:1px;
    background:repeating-linear-gradient(90deg,var(--blush-deep) 0 5px,transparent 5px 12px);
    opacity:.55;
  }
  .ph{position:relative;background:var(--ivory)}
  .sec-deep .ph{background:var(--ivory-deep)}
  .ph-n{position:relative;display:inline-block;padding-right:.75rem;background:inherit}
}

/* Der Hero-Claim: je Satz eine Zeile, damit der Rhythmus stimmt */
.hero .gross{max-width:none;font-size:clamp(2.1rem,4.6vw,3.5rem);line-height:1.04}
.hero .gross + .hero-sub{margin-top:1.75rem}
@media (max-width:640px){.hero .gross{font-size:2.1rem;line-height:1.1}}

/* ---------- Wie aus dem Einstiegswert ein Angebot wird ---------- */
.rechnung{
  margin:2.25rem 0 0;padding:1.5rem 1.5rem 1.25rem;
  border:1px solid var(--ivory-line);border-radius:1rem;background:var(--white);
}
.sec-deep .rechnung{background:var(--ivory)}
.re-zeile{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.re-l{font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.re-w{font-family:"Jost",sans-serif;font-size:1.35rem;font-weight:400;color:var(--ink);font-variant-numeric:tabular-nums}
.re-ende{margin-top:1.25rem;padding-top:1.1rem;border-top:1px solid var(--ivory-line)}
.re-ende .re-w{color:var(--blush-deep);font-size:1.05rem}

.re-faktoren{display:flex;flex-direction:column;gap:.7rem;margin-top:1.1rem;padding-top:1.1rem;
  border-top:1px dashed rgba(20,20,20,.14)}
.re-f{display:grid;grid-template-columns:1fr;gap:.3rem}
.re-bar{
  display:block;height:3px;border-radius:2px;background:var(--ivory-deep);position:relative;overflow:hidden;
}
.re-bar::after{
  content:"";position:absolute;inset:0 auto 0 0;width:var(--b);border-radius:2px;
  background:var(--blush-deep);transform-origin:0 50%;
}
.js .re-bar::after{transform:scaleX(0);transition:transform 1.1s cubic-bezier(.22,1,.36,1)}
.js .rechnung.laeuft .re-bar::after{transform:scaleX(1)}
.js .rechnung.laeuft .re-f:nth-child(2) .re-bar::after{transition-delay:.12s}
.js .rechnung.laeuft .re-f:nth-child(3) .re-bar::after{transition-delay:.24s}
.js .rechnung.laeuft .re-f:nth-child(4) .re-bar::after{transition-delay:.36s}
.re-ft{font-size:.78rem;line-height:1.4;color:var(--ink-soft)}
.rechnung figcaption{margin-top:1.1rem;font-size:.72rem;line-height:1.5;color:var(--ink-faint)}
@media (prefers-reduced-motion:reduce){
  .js .re-bar::after{transform:scaleX(1);transition:none}
}

/* ---------- Handschriftlicher Akzent im Claim ---------- */
.hand{
  font-family:"Kalam",cursive;font-weight:700;font-style:normal;
  font-size:1.06em;line-height:1;letter-spacing:0;
  padding-right:.04em;
}
.mail-kopiert{color:var(--blush-deep)!important;text-decoration-color:var(--blush-deep)!important}

/* ---------- Leitsatz-Block: dichter setzen ---------- */
.manifest{gap:0}
.manifest-lines{margin-top:2.25rem;display:flex;flex-direction:column;gap:.45rem}
.manifest-lines p{font-size:1.05rem;line-height:1.5;color:var(--ink-soft)}
.manifest-out{margin-top:2.25rem;font-size:1.05rem;line-height:1.65}
@media (min-width:900px){
  /* Der Leitsatz nutzt die Breite: Aussage links, Belege rechts */
  .manifest{display:grid;grid-template-columns:1.05fr .95fr;gap:0 4rem;align-items:start}
  .manifest > .rv:first-child{grid-column:1;grid-row:1 / span 2}
  .manifest > .rv:nth-child(2){grid-column:2;grid-row:1}
  .manifest > .rv:nth-child(3){grid-column:2;grid-row:2}
  .manifest-lines{margin-top:.5rem}
}
/* Seitenköpfe etwas kompakter, damit oben nicht so viel Luft steht */
.seitenkopf .wrap{padding-block:2.5rem 2rem}
@media (min-width:900px){.seitenkopf .wrap{padding-block:3.25rem 2.25rem}}
/* Auf dem grauen Grund muessen die uebrigen Flaechen mitziehen */
.sec-ink .kz:hover,.sec-ink .kz[data-offen]{background:rgba(255,255,255,.045)}
.sec-ink .note{background:rgba(255,255,255,.05)}
/* Das kleine Portrait bekommt eine Flaeche, falls das Bild einmal nicht laedt */
.portrait-klein{background:var(--ivory-deep)}
.portrait-klein img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
/* Auf grauem Grund traegt die grosse Aussage die Markenfarbe ebenfalls */
.sec-ink .gross{color:var(--blush-deep)}
/* Der Hero-Claim bleibt kleiner als die uebrigen grossen Aussagen,
   weil daneben der Bedarfs-Check steht. Alle anderen sind gleich gross. */

/* ================= Fünf Überzeugungen neu aufgebaut =================
   Nummer und These links als Anker, Begründung rechts. Dichter, mit
   klarer Blickführung statt einer langen Textspalte. */
.haltung{margin-top:4rem}
.hz{
  display:grid;grid-template-columns:1fr;gap:1.25rem 3.5rem;
  padding:3rem 0;border-top:1px solid rgba(20,20,20,.12);
}
@media (min-width:900px){
  .hz{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:start}
}
.hz-n{
  font-family:"Jost",sans-serif;font-weight:300;font-size:3.25rem;line-height:1;
  letter-spacing:-.02em;color:var(--blush-deep);opacity:.42;padding-top:0;margin-bottom:.75rem;
}

.hz h3{
  font-family:"Jost",sans-serif;font-weight:400;font-size:1.75rem;line-height:1.18;
  letter-spacing:-.015em;color:var(--ink);
}
@media (min-width:900px){.hz h3{font-size:2.05rem}}
.hz p{margin-top:1rem;font-size:.92rem;line-height:1.7;color:var(--ink-soft);max-width:38rem}
.hz p:first-of-type{margin-top:0}

/* ---------- Überzeugungen: dichter setzen ----------
   Die Blöcke mit Abbildung waren doppelt so hoch wie die anderen.
   Text schmaler, Abbildung kompakter, weniger Innenabstand. */
.hz{padding:2.25rem 0;gap:.75rem 3rem}
.hz-n{font-size:2.4rem;margin-bottom:.4rem;opacity:.38}
.hz h3{font-size:1.5rem}
@media (min-width:900px){.hz h3{font-size:1.7rem}}
.hz p{margin-top:.75rem;font-size:.88rem;line-height:1.65;max-width:34rem}
.hz .bild{margin-top:1.5rem;padding:1.25rem}
.hz .bild-kopf{margin-bottom:1rem;padding-bottom:.7rem}
.hz .bild figcaption{margin-top:.9rem;padding-top:.75rem;font-size:.7rem}
.hz .weg{padding:.6rem 0}
.hz .w-a,.hz .w-b,.hz .w-c{font-size:.79rem}
.hz .achse li{padding:.4rem 0 .4rem 1.75rem}
.hz .ac-t{font-size:.82rem}
.hz .ph-folge{margin-top:1rem;padding:.85rem 1.1rem;font-size:.82rem}

/* Klare Spaltenzuordnung: Nummer und These links, alles Weitere rechts */
.hz-kopf{grid-column:1}
.hz-text{grid-column:1}
@media (min-width:900px){
  .hz-kopf{grid-column:1;position:sticky;top:6rem}
  .hz-text{grid-column:2}
}
.hz-text > p:first-child{margin-top:0}

/* ================= Mobile Darstellung =================
   Drei gemessene Probleme: die handschriftlichen Woerter liefen
   ueber den Rand, Tippziele waren zu klein, Text teils unter 12px. */
@media (max-width:640px){
  /* Grosse Aussagen brechen sauber statt ueber den Rand zu laufen */
  .gross{
    font-size:clamp(1.85rem,8.2vw,2.4rem);line-height:1.12;
    overflow-wrap:anywhere;hyphens:auto;max-width:100%;
  }
  .hero .gross{font-size:clamp(1.9rem,8.5vw,2.3rem)}
  .hand{font-size:1.02em;overflow-wrap:anywhere}

  /* Tippziele: Finger brauchen Flaeche */
  .btn{min-height:2.9rem;padding-block:.8rem}
  .nav a,.mobile-nav a{display:inline-block;min-height:2.75rem;line-height:2.75rem}
  .link-u,.as-btn{display:inline-block;min-height:2.4rem;padding-block:.3rem}
  .check-opt,.qc-opt,#bd-fragen button{min-height:3rem}
  .kz[tabindex]{padding-block:1.1rem}

  /* Nichts unter 12px — auf kleinen Schirmen liest das niemand */
  .small-t,.faint-t,figcaption,.bild figcaption,.zs-b,.kz-b,.ph-b,
  .ww-mehr,.re-ft,.rechnung figcaption,.card .price-note,.card-anpassung,
  .karte-ergebnis,.bausteine,.hz p,.zyk-b,.ke-b,.spezial-hinweis{
    font-size:.82rem;line-height:1.6;
  }
  .eyebrow,.card-num,.kz-phase,.bild-k,.re-l,.zs-n,.hz-n{font-size:.7rem}
  .kz-l,.ph-folge,.erg span{font-size:.82rem}

  /* Grosse Zahlen und Diagramme kleiner, damit sie passen */
  .hz-n{font-size:1.9rem}
  .re-w{font-size:1.15rem}
}
@media (max-width:400px){
  .gross{font-size:clamp(1.7rem,8vw,2.1rem)}
  .wrap{padding-inline:1.1rem}
}

/* ================= Korrektur nach Selbstkontrolle =================
   Befund: 31 von 41 grossen Aussagen brachen ueber drei oder mehr
   Zeilen und frassen dadurch Hoehe. Kleinere Stufe, mehr Laufweite. */
.gross{
  font-size:clamp(1.9rem,3.2vw,2.5rem);
  line-height:1.12;max-width:26ch;
}
.hero .gross{font-size:clamp(2rem,3.5vw,2.8rem);max-width:24ch}
.seitenkopf .gross{font-size:clamp(2rem,3.6vw,2.9rem);max-width:22ch}

/* Seitenkopf zweispaltig: Aussage links, Einordnung rechts.
   Hoehere Spezifitaet, weil .wrap sonst gewinnt. */
@media (min-width:900px){
  .seitenkopf > .wrap{
    display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
    gap:.4rem 4rem;align-items:end;
  }
  .seitenkopf > .wrap > .eyebrow{grid-column:1;grid-row:1}
  .seitenkopf > .wrap > .gross,
  .seitenkopf > .wrap > .h-seite{grid-column:1;grid-row:2;margin-top:.7rem}
  .seitenkopf > .wrap > .lead{grid-column:2;grid-row:2;margin-top:0;max-width:30rem;align-self:end}
  .seitenkopf > .wrap > .seitenkopf-plus{grid-column:2;grid-row:3;margin-top:.85rem;max-width:30rem}
}
@media (max-width:640px){
  .gross,.hero .gross,.seitenkopf .gross{font-size:clamp(1.75rem,7.2vw,2.1rem);max-width:100%}
}

/* ---------- Grosse Aussagen: drei Stufen nach Textlaenge ----------
   Kurze Aussagen nutzen den freien Platz, lange bleiben kompakt. */
.gross-kurz{font-size:clamp(2.4rem,5.2vw,4.2rem);max-width:16ch}
.gross-mittel{font-size:clamp(2.1rem,4vw,3.2rem);max-width:20ch}
.gross-lang{font-size:clamp(1.8rem,2.8vw,2.2rem);max-width:30ch;line-height:1.14}
.hero .gross-kurz,.hero .gross-mittel{font-size:clamp(2rem,3.5vw,2.8rem);max-width:24ch}
.seitenkopf .gross-kurz{font-size:clamp(2.3rem,5vw,4rem);max-width:15ch}
.seitenkopf .gross-mittel{font-size:clamp(2.1rem,4.2vw,3.3rem);max-width:19ch}
@media (max-width:640px){
  .gross-kurz{font-size:clamp(2rem,8.5vw,2.6rem)}
  .gross-mittel,.gross-lang{font-size:clamp(1.75rem,7.2vw,2.1rem)}
}

/* Die Ueberschrift im Seitenkopf traegt die Seite — eine Stufe groesser
   als die Abschnittsueberschriften darunter. */
.seitenkopf .gross{font-size:clamp(2.3rem,4.6vw,3.6rem)}
.seitenkopf .gross-kurz{font-size:clamp(2.6rem,6vw,4.8rem);max-width:14ch}
.seitenkopf .gross-mittel{font-size:clamp(2.4rem,5.2vw,4rem);max-width:17ch}
.seitenkopf .gross-lang{font-size:clamp(2rem,3.6vw,2.8rem);max-width:24ch}
@media (max-width:640px){
  .seitenkopf .gross,.seitenkopf .gross-kurz,
  .seitenkopf .gross-mittel,.seitenkopf .gross-lang{font-size:clamp(1.9rem,8vw,2.4rem);max-width:100%}
}

/* ================= Hierarchie: Kopf traegt, Abschnitte folgen =================
   Rueckmeldung: der Seitenkopf soll der Aufhaenger sein. Wenn die Aussagen
   darunter gleich gross auftreten, konkurrieren sie mit ihm und die Seite
   wirkt flach. Also: Kopf eine klare Stufe groesser, Abschnitte gedeckelt. */
.sec .gross,.sec .gross-kurz,.sec .gross-mittel{
  font-size:clamp(1.9rem,3.1vw,2.45rem);max-width:24ch;line-height:1.14;
}
.sec .gross-lang{font-size:clamp(1.8rem,2.8vw,2.2rem);max-width:30ch}

/* Lead im Kopf oben ausrichten statt unten — sonst haengt er bei
   dreizeiligen Aussagen sichtbar versetzt. */
@media (min-width:900px){
  .seitenkopf > .wrap{align-items:start}
  .seitenkopf > .wrap > .lead{align-self:start;margin-top:.85rem}
}

/* Aussagen ohne Begleittext duerfen die Flaeche nutzen, statt eine
   leere zweite Spalte stehen zu lassen. */
.gross-solo{max-width:30ch}
@media (min-width:900px){.sec .gross-solo{font-size:clamp(2.1rem,3.6vw,2.9rem)}}

/* Falls der Wegweiser doch einmal auf dunklem Grund steht, gelten dort
   wieder die hellen Werte — sonst wiederholt sich der Unsichtbar-Fehler. */
.sec-ink .ww{border-top-color:rgba(250,250,250,.22)}
.sec-ink .ww-frage{color:rgba(250,250,250,.72)}
.sec-ink .ww-antwort{color:var(--ivory)}
.sec-ink .ww-mehr{color:rgba(250,250,250,.62)}

/* ================= Hero: die Marke traegt die Seite =================
   Der Aufschlag darf so gross sein wie er wirkt. */
.hero .gross,.hero .gross-kurz,.hero .gross-mittel{
  font-size:clamp(2.4rem,4.6vw,3.9rem);max-width:20ch;line-height:1.08;
}
@media (max-width:640px){
  .hero .gross,.hero .gross-kurz,.hero .gross-mittel{font-size:clamp(2rem,8.6vw,2.7rem);max-width:100%}
}

/* Kleine Textstellen in Markenfarbe bekommen den dunkleren Ton der Palette.
   Grosse Aussagen behalten das helle Rose — dort traegt die Groesse. */
.eyebrow,.ww-preis,.card-num,.price,.tz-p,.zs-b,.sla-v,
.kicker,.small-t .link-u,.card .price-note{color:var(--mauve)}
.hand{color:inherit}

/* Wo kein Satzumbruch greift, verteilt der Browser die Zeilen gleichmaessig,
   statt eine lange und eine kurze zu setzen. */
.gross,.lead,.card h3,.hero .lead{text-wrap:balance}

/* Bei erzwungenem Satzumbruch begrenzt der Umbruch selbst die Zeile —
   eine zusaetzliche Zeichenbreite wuerde nur ein drittes Mal brechen. */
.gross-zwei{max-width:none}
@media (min-width:900px){
  .seitenkopf .gross{max-width:none}
  .seitenkopf .gross-zwei{font-size:clamp(2rem,3.3vw,2.9rem)}
  .sec .gross-zwei{font-size:clamp(1.9rem,2.9vw,2.3rem)}
}

/* ================= Notizzettel =================
   Nachbau der Vorlage: liniertes Blatt, schraeg aufgelegt, mit Klebestreifen
   und Bueroklammer. Alles aus CSS — kein Bild, kein externer Aufruf. */
.notiz{
  position:relative;margin:3.2rem 0 2.4rem;width:min(20.5rem,100%);
  padding:2.6rem 1.7rem 2.4rem;background:var(--white);
  transform:rotate(-3.5deg);
  box-shadow:0 2px 3px rgba(20,20,20,.06),0 22px 40px -22px rgba(20,20,20,.42);
  background-image:repeating-linear-gradient(
    to bottom,transparent 0 33px,rgba(120,150,190,.34) 33px 34px);
  background-position:0 4.05rem;
}
.notiz::after{
  content:"";position:absolute;left:1.15rem;top:0;bottom:0;
  width:1px;background:rgba(224,123,168,.45);
}

/* --- Klebestreifen oben: diagonale Striche, gerissene Kanten --- */
.notiz-tape-o,.notiz-tape-u{position:absolute;pointer-events:none}
.notiz-tape-o{
  top:-1.15rem;left:-1.6rem;width:11.5rem;height:2.5rem;
  transform:rotate(-5deg);
  background:
    repeating-linear-gradient(72deg,
      rgba(224,123,168,.62) 0 3px,transparent 3px 11px),
    #fdf4f7;
  clip-path:polygon(
    2% 12%,9% 4%,17% 13%,25% 5%,34% 14%,43% 4%,52% 13%,61% 5%,
    70% 14%,79% 4%,88% 13%,97% 6%,99% 88%,90% 96%,81% 87%,72% 96%,
    63% 86%,54% 95%,45% 86%,36% 96%,27% 87%,18% 96%,9% 87%,1% 94%);
  box-shadow:0 3px 8px -4px rgba(20,20,20,.3);
}
/* --- Klebestreifen unten: Karomuster --- */
.notiz-tape-u{
  bottom:-1rem;right:-1.9rem;width:10rem;height:2.3rem;
  transform:rotate(4.5deg);
  background:
    repeating-linear-gradient(to right,
      rgba(224,123,168,.5) 0 2px,transparent 2px 9px),
    repeating-linear-gradient(to bottom,
      rgba(224,123,168,.5) 0 2px,transparent 2px 9px),
    #fdf4f7;
  clip-path:polygon(
    2% 10%,11% 3%,20% 12%,30% 4%,40% 13%,50% 4%,60% 12%,70% 3%,
    80% 12%,90% 4%,98% 11%,97% 90%,88% 97%,78% 88%,68% 97%,
    58% 87%,48% 96%,38% 88%,28% 97%,18% 88%,8% 96%,1% 89%);
  box-shadow:0 3px 8px -4px rgba(20,20,20,.3);
}

/* --- Bueroklammer oben rechts --- */
.notiz-klammer{
  position:absolute;top:-1.5rem;right:1.6rem;width:17px;height:52px;
  border:2.5px solid var(--blush-deep);border-radius:10px 10px 8px 8px;
  border-bottom-color:transparent;transform:rotate(8deg);
  filter:drop-shadow(0 2px 2px rgba(20,20,20,.22));
}
.notiz-klammer::after{
  content:"";position:absolute;left:3.5px;top:7px;width:7px;height:33px;
  border:2.5px solid var(--blush-deep);border-radius:6px 6px 5px 5px;
  border-top-color:transparent;
}

/* --- Beschriftung, auf den Linien sitzend --- */
.notiz-kopf{
  font-family:"Kalam",cursive;font-weight:700;font-size:1.32rem;
  line-height:34px;color:var(--mauve);margin:0 0 .3rem;
}
.notiz-liste{list-style:none;margin:0;padding:0}
.notiz-liste li{
  font-family:"Kalam",cursive;font-size:1.02rem;line-height:34px;
  color:var(--ink);padding-left:1.5rem;position:relative;
}
.notiz-liste li::before{
  content:"";position:absolute;left:.15rem;top:13px;width:9px;height:5px;
  border-left:2px solid var(--blush-deep);border-bottom:2px solid var(--blush-deep);
  transform:rotate(-45deg);
}
.notiz-fuss{
  margin:0;font-family:"Kalam",cursive;font-size:1.02rem;
  line-height:34px;color:var(--ink-soft);
}
@media (max-width:899px){
  .notiz{width:min(20.5rem,86%);margin-left:auto;margin-right:auto;transform:rotate(-2deg)}
  .notiz-tape-o{left:-.9rem;width:9.5rem}
  .notiz-tape-u{right:-1rem;width:8.5rem}
}
@media (prefers-reduced-motion:reduce){.notiz{transform:none}}

@media (min-width:900px){
  .seitenkopf > .wrap > .notiz{grid-column:2;grid-row:3;margin-top:1.9rem;justify-self:start}
}

/* ---------- Auswahl, wenn kein Mailprogramm eingerichtet ist ---------- */
.mail-auswahl{
  position:absolute;z-index:120;width:288px;padding:1.15rem 1.15rem 1rem;
  background:var(--white);border:1px solid var(--ivory-line);border-radius:14px;
  box-shadow:0 18px 44px -18px rgba(20,20,20,.32);
}
.mail-auswahl-t{margin:0 0 .8rem;font-size:.86rem;line-height:1.45;color:var(--ink-soft);padding-right:1.2rem}
.mail-auswahl-b{
  display:block;width:100%;margin-bottom:.5rem;padding:.62rem .9rem;
  font:inherit;font-size:.92rem;text-align:left;text-decoration:none;
  color:var(--ink);background:var(--ivory);border:1px solid var(--ivory-line);
  border-radius:9px;cursor:pointer;transition:border-color .2s ease,background-color .2s ease;
}
.mail-auswahl-b:hover{border-color:var(--blush-deep);background:var(--blush-light)}
.mail-auswahl-a{margin:.6rem 0 0;font-size:.78rem;color:var(--ink-faint);word-break:break-all}
.mail-auswahl-x{
  position:absolute;top:.5rem;right:.55rem;width:26px;height:26px;
  font-size:1.15rem;line-height:1;color:var(--ink-faint);
  background:none;border:0;border-radius:6px;cursor:pointer;
}
.mail-auswahl-x:hover{color:var(--ink);background:var(--ivory-deep)}

/* ================= Rhythmus der Seiten =================
   Bisher war jeder Abschnitt gleich gebaut: Kicker und Aussage links,
   Text rechts, Flaeche abwechselnd fast weiss und fast weiss. Das liest
   sich als eine einzige lange Spalte. Zwei Abweichungen brechen das:
   eine getoente Flaeche als Hoehepunkt und eine zentrierte Zaesur.
   Bewusst ohne dunkelgraue Flaechen — die waren herausgenommen worden. */

/* --- Hoehepunkt: die Markenfarbe als Flaeche, nicht nur als Schrift --- */
.sec-blush{background:var(--blush-light);border-top-color:transparent}
.sec-blush + .sec,.sec-blush{border-top:0}
.sec-blush .eyebrow{color:var(--mauve)}
.sec-blush .ruled{border-top-color:rgba(181,80,127,.18)}
.sec-blush .kz{border-bottom-color:rgba(181,80,127,.16)}
.sec-blush .card,.sec-blush .care{
  background:var(--white);border-color:rgba(181,80,127,.14);
}
/* Etwas mehr Luft, damit die Flaeche als eigener Raum wirkt. */
@media (min-width:900px){.sec-blush > .sec-pad{padding-top:7rem;padding-bottom:7rem}}

/* --- Zaesur: schmal und mittig, statt wieder zweispaltig --- */
.sec-zaesur > .wrap{text-align:center}
.sec-zaesur .eyebrow{display:block}
.sec-zaesur .gross{margin-left:auto;margin-right:auto;max-width:20ch}
.sec-zaesur .lead,.sec-zaesur .body-t,.sec-zaesur .small-t{
  margin-left:auto;margin-right:auto;max-width:38rem;
}
.sec-zaesur .grid-2{display:block}
.sec-zaesur .btn-reihe,.sec-zaesur .cta-reihe{justify-content:center}
/* Listen und Karten bleiben linksbuendig — zentrierter Fliesstext ueber
   mehrere Zeilen liest sich schlecht. */
.sec-zaesur .card,.sec-zaesur .kz,.sec-zaesur .ruled,.sec-zaesur li{text-align:left}
@media (max-width:899px){.sec-zaesur > .wrap{text-align:left}
  .sec-zaesur .gross,.sec-zaesur .lead{margin-left:0;margin-right:0}}

/* --- Textfarben auf der getoenten Flaeche ---
   Rose auf Rose traegt nicht. Auf blush-Grund kommt der sattere Ton der
   Palette zum Einsatz, damit die Marke bleibt und der Text lesbar wird. */
.sec-blush{--blush-deep:#a34368}
.sec-blush .eyebrow,.sec-blush .card-num,.sec-blush .price,
.sec-blush .tz-p,.sec-blush .zs-b,.sec-blush .sla-v,.sec-blush .ww-preis{color:#8d3255}
.sec-blush .gross{color:var(--mauve)}
.sec-blush .small-t,.sec-blush .faint-t,.sec-blush .card .price-note,
.sec-blush .card-anpassung{color:var(--ink-soft)}
.sec-blush .body-t,.sec-blush .lead{color:var(--ink-soft)}

/* Kleine Chips auf getoenter Flaeche brauchen einen satteren Rahmen. */
.sec-blush .chip,.sec-blush .badge{color:#8d3255}

/* Kleine Beschriftungen in Markenfarbe: der satte Ton, sonst tragen sie
   bei 10 bis 13 Pixel nicht mehr gegen den hellen Grund. */
.area-key,.check-empf-p,.dl-m,.ke-n,.ph-n,.pz-f-k,.pz-k,
.re-w,.vita-k,.zs-n{color:var(--mauve)}

/* ================= Ruhige Abschnitte =================
   Wenn jeder Abschnitt dieselbe grosse Aussage in Markenfarbe traegt,
   entsteht keine Hierarchie — die Seite liest sich als Stapel gleicher
   Bloecke. Nur die Kernaussagen bleiben gross und rose. Abschnitte, die
   Arbeitsinhalt tragen, bekommen einen ruhigen, dunklen Titel. */
.sec-ruhig .gross,
.sec-ruhig .gross-kurz,
.sec-ruhig .gross-mittel,
.sec-ruhig .gross-lang,
.sec-ruhig .gross-zwei{
  font-size:clamp(1.35rem,2vw,1.72rem);
  line-height:1.24;color:var(--ink);max-width:26ch;
  font-weight:400;letter-spacing:-.005em;
}
/* Der handschriftliche Akzent bleibt, nur leiser — sonst reisst der
   rote Faden ab. */
.sec-ruhig .hand{color:var(--mauve);font-size:1.02em}
.sec-ruhig .eyebrow{margin-bottom:.15rem}

/* Kopf und Begleittext ruecken enger zusammen: der Abschnitt soll
   arbeiten, nicht auftreten. */
@media (min-width:900px){
  .sec-ruhig > .sec-pad{padding-top:4.4rem;padding-bottom:4.4rem}
  .sec-ruhig .grid-2{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:0 3.5rem}
}

/* ================= Groessenordnung, abschliessend =================
   Ueber mehrere Durchgaenge sind konkurrierende Regeln fuer .gross
   entstanden. Ab hier gilt eine einzige Staffel, damit die Hierarchie
   nicht davon abhaengt, welche Regel zufaellig spaeter steht:

     Seitenkopf und Hero   — der Aufschlag der Seite
     Kernaussage           — die Punkte, die tragen sollen
     ruhiger Abschnitt     — Arbeitsinhalt, dunkel statt rose

   Die Staffel greift nur ab 900 Pixel; darunter regeln die
   Mobilregeln weiter unten. */
@media (min-width:900px){
  .seitenkopf .gross,
  .seitenkopf .gross-kurz,
  .seitenkopf .gross-mittel,
  .seitenkopf .gross-lang,
  .seitenkopf .gross-zwei,
  .hero .gross,.hero .gross-kurz,.hero .gross-mittel,.hero .gross-zwei{
    font-size:clamp(2.5rem,4.3vw,3.6rem);line-height:1.08;max-width:none;
  }
  /* Lange Aussagen im Kopf duerfen nicht ueber drei Zeilen laufen. */
  .seitenkopf .gross-lang{font-size:clamp(2.1rem,3.2vw,2.6rem);max-width:26ch}

  .sec .gross,.sec .gross-kurz,.sec .gross-mittel,.sec .gross-zwei{
    font-size:clamp(1.9rem,2.7vw,2.35rem);line-height:1.16;max-width:24ch;
  }
  .sec .gross-zwei,.sec .gross-solo{max-width:none}
  .sec .gross-lang{font-size:clamp(1.8rem,2.4vw,2.05rem);max-width:30ch}

  /* Ruhige Abschnitte bleiben klein und dunkel — sie gewinnen zuletzt. */
  .sec-ruhig .gross,.sec-ruhig .gross-kurz,.sec-ruhig .gross-mittel,
  .sec-ruhig .gross-lang,.sec-ruhig .gross-zwei,.sec-ruhig .gross-solo{
    font-size:clamp(1.35rem,1.95vw,1.68rem);line-height:1.24;
    color:var(--ink);max-width:28ch;
  }
}

/* Koepfe mit erzwungenem Satzumbruch brauchen die breitere Spalte,
   sonst bricht die zweite Haelfte ein drittes Mal. */
@media (min-width:900px){
  .seitenkopf > .wrap:has(.gross-zwei){grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr)}
  .seitenkopf .gross-zwei{font-size:clamp(2.2rem,3.6vw,3rem)}
}

/* ================= Weniger Raster, mehr Luft =================
   Der durchgehende Strich ueber die volle Breite zieht eine harte Kante
   unter jeden Abschnitt und laesst die Seite gerastert wirken. Statt der
   Linie: ein kurzer Marker am Anfang des Abschnitts. Wo die Flaeche
   ohnehin wechselt, braucht es gar nichts. */
.sec{border-top:0;position:relative}
.sec + .sec::before{
  content:"";position:absolute;top:0;left:var(--rand,max(1.5rem,(100% - 72rem)/2));
  width:4.5rem;height:1px;background:var(--ivory-line);
}
/* Beim Wechsel auf oder von der getoenten Flaeche traegt die Farbe. */
.sec-blush::before,.sec-blush + .sec::before,
.sec-deep + .sec-blush::before,.sec-zaesur::before{display:none}

/* Der Begleittext setzt versetzt an, statt buendig mit der Aussage.
   Das nimmt der Anordnung die Strenge, ohne sie aufzuloesen. */
@media (min-width:900px){
  .sec .grid-2 > :last-child{margin-top:1.9rem}
  .sec-ruhig .grid-2 > :last-child{margin-top:.5rem}
  /* Jeder zweite Abschnitt rueckt etwas weiter — leichter Versatz,
     kein Zickzack. */
  .sec:nth-of-type(even) .grid-2 > :last-child{margin-top:3.4rem}
  .sec-zaesur .grid-2 > :last-child{margin-top:0}
}

/* Auch unter dem Seitenkopf keine durchgehende Kante. Getrennt wird
   durch Luft, nicht durch Striche. */
.seitenkopf{border-bottom:0}
.seitenkopf .wrap{padding-block:3rem 3rem}
@media (min-width:900px){.seitenkopf > .wrap{padding-block:4.5rem 4.5rem}}
/* Auch der kurze Marker faellt weg — die Seite soll offen wirken,
   nicht getaktet. Abstand und Flaechenwechsel reichen. */
.sec + .sec::before{display:none}
@media (min-width:900px){
  .sec + .sec > .sec-pad{padding-top:5.4rem}
  .sec-blush + .sec > .sec-pad,.sec + .sec-blush > .sec-pad{padding-top:6.5rem}
}

/* ================= Alleinstehende Aussagen =================
   Steht neben einer Aussage kein Begleittext, bleibt die halbe Breite
   ungenutzt und die Zeile wirkt verloren. Solche Aussagen duerfen die
   Flaeche nehmen, die sie haben. Markiert werden sie in bewegung.js
   ueber .gross-solo — dort, wo kein .lead folgt. */
@media (min-width:900px){
  .sec .gross-solo{
    font-size:clamp(2.2rem,3.5vw,3rem);max-width:30ch;line-height:1.12;
  }
  .sec-ruhig .gross-solo{
    font-size:clamp(1.8rem,2.7vw,2.3rem);max-width:32ch;line-height:1.18;
  }
  .sec-zaesur .gross-solo{font-size:clamp(2.3rem,3.8vw,3.2rem);max-width:22ch}
}

/* ================= Ein Rosa fuer alle Schrift =================
   Die Abstufungen der vorherigen Durchgaenge (satterer Ton fuer kleine
   Beschriftungen, eigener Ton auf getoenter Flaeche) haben mehrere
   Rosatoene nebeneinander erzeugt. Ab hier traegt jede Schrift in
   Markenfarbe denselben Ton: --blush-deep.
   Hinweis fuer spaeter: bei Versalien um 10 bis 12 Pixel liegt dieser
   Ton unter dem ueblichen Lesbarkeitsrichtwert. Ausgeglichen wird das
   ueber etwas mehr Schriftstaerke und Laufweite, nicht ueber die Farbe. */
.eyebrow,.ww-preis,.card-num,.price,.tz-p,.zs-b,.sla-v,
.kicker,.small-t .link-u,.card .price-note,
.area-key,.check-empf-p,.dl-m,.ke-n,.ph-n,.pz-f-k,.pz-k,
.re-w,.vita-k,.zs-n,
.sec-blush .eyebrow,.sec-blush .card-num,.sec-blush .price,
.sec-blush .tz-p,.sec-blush .zs-b,.sec-blush .sla-v,.sec-blush .ww-preis,
.sec-blush .gross,.sec-blush .chip,.sec-blush .badge,
.sec-ruhig .hand{
  color:var(--blush-deep);
}
/* Kein eigener Ton mehr auf der getoenten Flaeche. */
.sec-blush{--blush-deep:#e07ba8}
/* Kleine Versalien in Markenfarbe: etwas kraeftiger und weiter gesetzt,
   damit sie trotz des hellen Tons stehen. */
.eyebrow,.area-key,.ke-n,.ph-n,.pz-k,.re-w,.vita-k,.zs-n{
  font-weight:700;letter-spacing:.09em;
}

/* Restliche Schriftstellen im alten satteren Ton angleichen —
   damit wirklich ueberall dasselbe Rosa steht. */
.chip,.form-status,.modal-preis,.notiz-kopf,.ac-m,
.philosophie b,.sec b.mauve,.zs b{color:var(--blush-deep)}

/* Die letzten Stellen: Schrift in Markenfarbe folgt ausnahmslos
   demselben Ton. --mauve bleibt fuer Rahmen und Zustaende reserviert. */
.ac-marke-a .ac-m,.legal .todo p,.form-status.ok,
.pz-f b,.zyk b,.achse b{color:var(--blush-deep)}