/* ===========================================================
   Calendar Butler — style.css
   Neuer Entwurf: echte CB-Inhalte in der Struktur von TheOwnershipSpeaker.com
   Farben: TOS-System, Lime -> Orange (#ff912b, echte CB-Buttonfarbe), kein Blau
   Ecken: eckig (border-radius: 0), keine Schatten — Struktur über Linien/Rahmen
   Schrift: Bricolage Grotesque (Headlines) + Inter (Fließtext), wie TOS
   =========================================================== */

/* === Schriften, lokal gehostet (kein Abruf bei Google, keine Verbindung zu Dritten) ===
   Bricolage Grotesque (Ueberschriften) und Inter (Fliesstext) als Variable Fonts, Lizenz: SIL Open Font License 1.1.
   Dateien liegen in fonts/, der Pfad ist relativ zu dieser CSS-Datei und gilt damit fuer alle Seiten. */
@font-face { font-family:'Bricolage Grotesque'; font-style:normal; font-weight:200 800; font-stretch:100%; font-display:swap;
  src:url(fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Bricolage Grotesque'; font-style:normal; font-weight:200 800; font-stretch:100%; font-display:swap;
  src:url(fonts/bricolage-grotesque-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url(fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url(fonts/inter-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --ink: #1A1A18;         /* Headlines, dunkle Flächen */
  --ink-deep: #0E0E0C;
  --orange: #ff912b;      /* Primary / Akzent — echte CB-Buttonfarbe */
  --orange-deep: #d97615;
  --orange-100: #fff1e2;
  --orange-300: #ffcf99;
  --pigeon: #A9AFAA;      /* neutrales Grau, für Rahmen/Struktur statt Schatten */
  --pigeon-deep: #5F655F;
  --navy: #144e73;        /* echte CB-Markenfarbe, gezielt für den Rechner-Bereich */
  --navy-deep: #002841;
  --off-white: #F7F6F3;
  --white: #FFFFFF;
  --graphite: #2A2A28;

  --max-width: 1160px;
  --content-width: 760px;
  --measure-statement: 38ch;
  --measure-prose: 62ch;

  --font-display: 'Bricolage Grotesque', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --text-body: 1rem;
  --text-h1: 2.3rem;
  --text-h1-lg: 3.4rem;
  --text-h2: 1.6rem;
  --text-h2-emphasis: 1.9rem;
  --text-h3: 1.15rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-body); /* zentrale Fließtext-Größe — Absätze erben das, keine einzelnen font-size-Regeln pro Absatz */
  color: var(--graphite);
  background: var(--off-white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .serif {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.15;
  margin: 0 0 0.5em;
}
/* baseline sizes for every heading, so nothing silently falls back to the browser default —
   specific section rules below (e.g. .final-cta h2) override this for emphasis headlines only. */
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
/* ---------- animated accent words (same pattern as TheOwnershipSpeaker.com, lime -> orange) ---------- */
.o-accent {
  color: var(--orange);
  display: inline-block;
  animation: o-fly-in 1.2s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.o-word { white-space: nowrap; }
@keyframes o-fly-in {
  from { opacity: 0; transform: translateY(-60px); }
  to { opacity: 1; transform: translateY(0); }
}
.o-accent.delay-045 { animation-delay: 0.45s; }
.o-accent.delay-110 { animation-delay: 1.1s; }
.o-accent.delay-095 { animation-delay: 0.95s; }
.o-accent.delay-145 { animation-delay: 1.45s; }
.o-accent.delay-195 { animation-delay: 1.95s; }
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
mark { background: none; color: inherit; padding: 0; }
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
.section { padding: 72px 0; }
.section--navy { background: var(--navy); color: rgba(247,246,243,0.92); }
.section--navy h1, .section--navy h2, .section--navy h3 { color: var(--white); }
.section.bg-white { background: var(--white); }
.eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.75rem; line-height: 1; color: var(--pigeon-deep); font-weight: 600; margin: 0 0 24px; } /* Standard: fester, vom Zeilenabstand der Umgebung unabhängiger Abstand Eyebrow -> Headline, überall gleich */
.section--navy .eyebrow { color: var(--pigeon); }
.subtitle { text-align: center; font-style: italic; color: var(--pigeon-deep); margin-bottom: 36px; font-size: 0.92rem; }
.subtitle--plain { font-style: normal; }
.o-accent { color: var(--orange); }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; background: rgba(247,246,243,0.94); backdrop-filter: blur(6px); z-index: 100; border-bottom: 1px solid rgba(26,26,24,0.08); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; max-width: var(--max-width); margin: 0 auto; gap: 16px; }
.nav__brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; letter-spacing: 0.01em; color: var(--ink); white-space: nowrap; }
.nav__brand img { height: 32px; width: 32px; flex-shrink: 0; }
.nav__links { display: none; align-items: center; gap: 26px; font-size: 0.92rem; font-weight: 500; white-space: nowrap; margin-left: auto; }
.nav__links a:hover { color: var(--orange-deep); }
.nav__login { color: var(--ink); opacity: 0.75; text-decoration: underline; text-underline-offset: 3px; }
.nav__login:hover { opacity: 1; }

/* ---------- DE/EN language switcher (same pattern as TheOwnershipSpeaker.com) ---------- */
.nav__lang { opacity: 0.55; font-size: 0.85rem; }
.nav__lang:hover { opacity: 1; }
.nav__langs { display: flex; align-items: center; gap: 10px; margin-left: 6px; }
.nav__flag { position: relative; display: block; width: 24px; height: 16px; border-radius: 2px; overflow: hidden; opacity: 0.7; filter: saturate(0.6); transition: opacity 0.15s; }
.nav__flag svg { display: block; width: 100%; height: 100%; }
.nav__flag::after { content: ""; position: absolute; inset: 0; background: rgba(247,246,243,0.22); }
a.nav__flag:hover { opacity: 1; }
.nav__flag--current { opacity: 0.95; overflow: visible; outline: 1.5px solid rgba(26,26,24,0.28); outline-offset: 2px; }
.nav__flag--current svg { border-radius: 2px; }
.nav__flag--current::after { display: none; }
.nav__flag--inline { display: inline-block; opacity: 1; }
.nav__mobile .nav__lang { display: flex; align-items: center; gap: 10px; padding: 14px 24px; }
.nav__toggle { margin-left: auto; background: none; border: none; font-size: 1.6rem; color: var(--ink); cursor: pointer; padding: 4px 8px; }
.nav__mobile { display: none; flex-direction: column; background: var(--white); border-top: 1px solid rgba(26,26,24,0.1); }
.nav__mobile.is-open { display: flex; }
.nav__mobile a { padding: 14px 24px; font-size: 1rem; border-top: 1px solid rgba(26,26,24,0.06); }
/* Mobile: CTA lives in the opened menu only, keeps the header from overflowing */
.nav__inner > .nav__cta { display: none; }
.nav__cta.btn--primary { background: transparent; color: var(--ink); border-color: var(--ink); }
.nav__cta.btn--primary:hover { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.nav__mobile .nav__cta { display: block; margin: 16px 24px; text-align: center; border-top: none; }

@media (min-width: 980px) {
  .nav__links { display: flex; }
  .nav__inner > .nav__cta { display: inline-block; }
  .nav__toggle { display: none; }
  .nav__mobile { display: none !important; }
}

/* ---------- buttons ---------- */
.btn { display: inline-block; padding: 14px 26px; font-size: 0.94rem; border-radius: 0; font-weight: 600; border: 1.5px solid transparent; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.btn--primary { background: var(--orange); color: var(--ink); border-color: var(--orange); }
.btn--primary:hover { background: var(--orange-deep); border-color: var(--orange-deep); color: var(--ink); }
.btn--outline { border: 1.5px solid var(--ink); color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--white); }
.section--navy .btn--outline { border-color: rgba(255,255,255,0.6); color: var(--white); }
.section--navy .btn--outline:hover { background: var(--white); color: var(--ink); }

/* ---------- hero (full-bleed video/GIF, fades into page background on the right) ---------- */
.hero--video { position: relative; overflow: hidden; min-height: 420px; display: flex; align-items: center; }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 20% center; z-index: 0; }
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(247,246,243,0) 30%, rgba(247,246,243,0.75) 58%, rgba(247,246,243,0.98) 74%);
}
/* .hero__frame carries the exact same max-width + side padding as .container / .nav__inner,
   so the hero text lines up with the logo and nav edges above it. */
.hero__frame { position: relative; z-index: 2; width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
.hero__overlay { max-width: 900px; margin: 0 0 0 auto; padding: 72px 0; text-align: right; }
.hero__overlay h1 { font-size: var(--text-h1); margin-bottom: 22px; letter-spacing: -0.01em; }
.hero__lede { font-size: 1.1rem; max-width: var(--measure-prose); margin: 0 0 30px auto; opacity: 0.9; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; justify-content: flex-end; }

@media (min-width: 900px) {
  .hero__overlay h1 { font-size: var(--text-h1-lg); }
  .hero--video { min-height: 620px; }
}
@media (max-width: 700px) {
  .hero--video { min-height: 0; display: block; }
  .hero__bg { position: static; width: 100%; height: 220px; object-fit: cover; }
  .hero__scrim { display: none; }
  .hero__frame { padding: 0; }
  .hero__overlay { max-width: none; margin: 0; padding: 32px 24px; background: var(--off-white); text-align: left; }
  .hero__lede { margin: 0 0 24px; }
  .hero__ctas { justify-content: flex-start; }
}

/* ---------- quote / problem block ---------- */
.quote-block { text-align: center; }
.quote-block .mark { font-family: var(--font-display); font-size: 3rem; color: var(--orange-300); line-height: 1; margin-bottom: 8px; }
.quote-block blockquote { font-family: var(--font-body); font-weight: 400; font-size: 1.4rem; font-style: italic; max-width: var(--measure-statement); margin: 0 auto 14px; line-height: 1.4; }
.quote-block cite { font-size: 0.82rem; font-style: normal; opacity: 0.65; }
.problem-columns { display: grid; gap: 24px; max-width: var(--max-width); margin: 44px auto 0; text-align: left; }
.problem-columns p:not(.eyebrow) { margin: 0; opacity: 0.9; } /* Fix: diese Regel war spezifischer als .eyebrow und hat dessen Standard-Abstand in Zwei-Spalten-Sektionen auf 0 zurueckgesetzt */
.problem-columns__col p:not(.eyebrow) + p:not(.eyebrow) { margin-top: 16px; } /* :not(.eyebrow) doubled to out-specificity line 175 (.problem-columns p:not(.eyebrow) margin:0), which was silently killing this gap */
.problem-list { list-style: none; margin: 20px 0; padding: 0; text-align: left; }
.problem-list li { padding: 6px 0 6px 22px; position: relative; opacity: 0.9; }
.problem-list li::before { content: "–"; position: absolute; left: 0; color: var(--ink); font-weight: 700; }

@media (min-width: 800px) {
  .problem-columns { grid-template-columns: 1fr 1fr; gap: 40px; }
}

/* problem-columns--cycle: eyebrow AND heading each get their own grid row (rows 1-2), with a
   hidden .problem-columns__spacer clone in column 2 for each -- same element, same CSS, so the
   row heights match exactly with no calculated or eyeballed offset. Real content on both sides
   only starts at row 3. */
.problem-columns--cycle { row-gap: 0; }
.problem-columns__spacer { visibility: hidden; }
@media (min-width: 800px) {
  .problem-columns--cycle > .eyebrow { grid-column: 1; grid-row: 1; }
  .problem-columns--cycle > .eyebrow.problem-columns__spacer { grid-column: 2; }
  .problem-columns--cycle > h2 { grid-column: 1; grid-row: 2; margin-bottom: 40px; } /* grid items don't collapse margins with what follows, so the row2->row3 gap must be set here explicitly (was implicitly 40px via mt-40 collapsing with h2's margin before the grid restructure) -- applies identically to the real h2 and its spacer, so both columns get the same row3 start */
  .problem-columns--cycle > h2.problem-columns__spacer { grid-column: 2; }
  .problem-columns--cycle > .problem-columns__col { grid-column: 1; grid-row: 3; }
  .problem-columns--cycle > .problem-columns__col--animated { grid-column: 2; }
}
/* left text column runs shorter than the right column (cross-fade text + diagram), which sets the
   row height -- without its own bottom padding the left column's last line sits flush against the
   navy section that follows */
.problem-columns--cycle > .problem-columns__col:not(.problem-columns__col--animated) { padding-bottom: 40px; }
/* the pulled-in quote sits first in the animated column now (no heading above it), needs its own
   bottom margin instead of .problem-cycle__quote's homepage margin-top */
.problem-columns__col--animated > .problem-cycle__quote { margin: 0 0 24px; }

/* problem-columns right col as the animated cycle: text pinned top (cross-fades between the 3 steps, unchanged from the homepage), diagram pinned bottom (flush with the section below) */
.problem-columns__col--animated { display: flex; flex-direction: column; }
.problem-columns__col--animated .problem-cycle__diagram { margin-top: auto; }

/* ---------- problem cycle diagram (rotating loop, no way out) ---------- */
.problem-cycle__header { display: grid; gap: 32px; max-width: var(--max-width); margin: 0 auto; }
@media (min-width: 800px) {
  .problem-cycle__header {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    column-gap: 56px;
    row-gap: 0;
    align-items: start;
  }
  .problem-cycle__eyebrow-col { grid-column: 1; grid-row: 1; }
  .problem-cycle__intro-col   { grid-column: 1; grid-row: 2; }
  .problem-cycle__text        { grid-column: 2; grid-row: 2; }
}
.problem-cycle__eyebrow-col .eyebrow, .problem-cycle__intro-col .eyebrow, .problem-cycle__eyebrow-col h2 { text-align: left; }
.problem-cycle__intro, .problem-cycle__quote { max-width: var(--measure-prose); }
.problem-cycle__quote { font-style: normal; margin-top: 8px; }
.problem-cycle__quote em { font-style: italic; }
.problem-cycle__diagram { display: flex; flex-direction: column; align-items: center; }
.problem-cycle { padding-bottom: 0; }
.cycle-stage { position: relative; width: 100%; aspect-ratio: 640 / 226; }
.cycle-diagram--back, .cycle-diagram--front { position: absolute; inset: 0; width: 100%; height: 100%; }
.cycle-diagram--back { z-index: 1; }
.cycle-diagram--front { z-index: 3; }
.cycle-stage__figure { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); height: 108%; width: auto; z-index: 2; display: block; }
.cycle-diagram { width: 100%; max-width: 100%; overflow: visible; }
.cycle-node__circle { fill: var(--navy); stroke: var(--navy-deep); stroke-width: 2; }
.cycle-node__label { font-family: var(--font-display); font-weight: 600; fill: var(--white); }
.problem-cycle__text { position: relative; min-height: 230px; } /* steps are absolute (out of flow), so this is the container's actual rendered height -- the longest step (Extern weiterleiten) nearly filled 190px, leaving too little gap before the diagram; +40px gives consistent breathing room for all three steps */
.problem-cycle__step { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity 0.5s ease; }
@media (min-width: 800px) {
  .problem-cycle__header .problem-cycle__step { top: 40px; }
}
.problem-cycle__step h3 { font-family: var(--font-display); font-size: var(--text-h2); font-weight: 700; color: var(--navy-deep); margin-bottom: 40px; }
.problem-cycle__step p { margin: 0; }
/* single.html variant: the step "title" is bold flowing text, not a heading -- qualified with the
   element to out-specificity the ".problem-cycle__step p { margin: 0 }" reset above. Self-contained
   margin on both sides (not just relying on the preceding quote's margin) so it reads as its own
   paragraph break regardless of what sits above it. */
.problem-cycle__step p.problem-cycle__step-title { font-weight: 700; color: var(--ink); margin: 24px 0; }
.problem-cycle__step.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .problem-cycle__step { transition: none; }
}

/* ---------- calculator ---------- */
.calculator { background: var(--white); border: 1.5px solid var(--pigeon); padding: 32px 28px; margin-top: 44px; max-width: var(--max-width); margin-left: auto; margin-right: auto; }
.calculator__grid { display: grid; gap: 24px; }
.calculator__field label { display: block; font-weight: 600; font-size: 0.88rem; color: var(--ink); margin-bottom: 8px; }
.calculator__field input, .calculator__field select { width: 100%; padding: 11px 14px; border: 1.5px solid var(--pigeon); border-radius: 0; font-family: var(--font-body); font-size: 0.95rem; color: var(--ink); background: var(--white); }
.calculator__field input:focus, .calculator__field select:focus { outline: 2px solid var(--orange); outline-offset: 1px; border-color: var(--orange); }

.calculator__split { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: end; }
.calculator__split--top { align-items: start; }
.calculator__split--top .calculator__recap { margin-top: 0; }
.calculator__col { display: flex; flex-direction: column; min-width: 0; }
.calculator__euro-input { position: relative; display: inline-flex; max-width: 160px; vertical-align: middle; margin: 0 4px; }
.calculator__euro-input input { width: 100%; padding: 3px 10px 3px 26px; line-height: 1.2; border: 1.5px solid var(--pigeon); border-radius: 0; font-family: var(--font-body); font-size: 0.95rem; color: var(--ink); background: var(--white); -moz-appearance: textfield; }
.calculator__euro-input input:focus { outline: 2px solid var(--orange); outline-offset: 1px; border-color: var(--orange); }
.calculator__euro-input input::-webkit-outer-spin-button,
.calculator__euro-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calculator__euro-symbol { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-weight: 600; color: var(--ink); pointer-events: none; }
.calculator__plain-input { position: relative; display: inline-flex; max-width: 90px; vertical-align: middle; margin: 0 4px; }
.calculator__plain-input input { width: 100%; padding: 3px 10px; line-height: 1.2; border: 1.5px solid var(--pigeon); border-radius: 0; font-family: var(--font-body); font-size: 0.95rem; color: var(--ink); background: var(--white); text-align: center; -moz-appearance: textfield; }
.calculator__plain-input input:focus { outline: 2px solid var(--orange); outline-offset: 1px; border-color: var(--orange); }
.calculator__plain-input input::-webkit-outer-spin-button,
.calculator__plain-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calculator__recap { opacity: 0.85; color: var(--ink); }
.calculator__rate-line { margin-top: 20px; color: var(--ink); }
.calculator__split .calculator__result { margin-top: 0; padding: 0; background: none; border: none; text-align: left; justify-content: center; }
.calculator__result-value { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 13vw, calc(var(--text-h1) * 2)); line-height: 1.05; color: var(--navy); transition: opacity 0.35s ease; opacity: 1; word-break: break-word; }
.calculator__result-value.is-fading { opacity: 0; }
.pricing-calc .calculator__result-value { color: var(--orange-deep); }
@media (min-width: 900px) { .calculator__result-value { font-size: calc(var(--text-h1-lg) * 2); } }
.calculator__result-caption { margin-top: 12px; color: var(--ink); }
.calculator__result-note { margin-top: 14px; color: var(--ink); opacity: 0.85; }
.calculator__explain { margin-top: 16px; color: var(--ink); opacity: 0.8; }
.calculator__explain--muted { color: var(--pigeon-deep); opacity: 1; font-size: 0.85rem; }
.calculator__recap--inline { font-size: 1.05rem; }
.pricing-calc__hero { margin-top: 32px; padding-top: 28px; border-top: 1.5px solid var(--pigeon); }
.calculator__solutions-lead { font-weight: 600; color: var(--ink); margin: 0 0 14px; }
.calculator__solutions ol { margin: 0; padding-left: 22px; }
.calculator__solutions li { padding: 8px 0; color: var(--ink); opacity: 0.85; }

@media (min-width: 700px) {
  .calculator__grid { grid-template-columns: repeat(3, 1fr); }
  .calculator__split { grid-template-columns: 1fr 1fr; }
}

/* ---------- ROI calculator (corporate) ---------- */
.roi { background: var(--white); border: 1.5px solid var(--pigeon); padding: 36px 30px; margin-top: 20px; }
.roi__grid { display: grid; gap: 20px 32px; }
.roi__field label { display: block; font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--pigeon-deep); margin-bottom: 8px; }
.roi__field input { width: 100%; padding: 11px 14px; border: 1.5px solid var(--pigeon); border-radius: 0; font-family: var(--font-body); font-size: 0.95rem; color: var(--graphite); background: var(--white); }
.roi__field input:focus { outline: 2px solid var(--orange); outline-offset: 1px; border-color: var(--orange); }
.roi__result { border-top: 1.5px solid var(--pigeon); margin-top: 28px; padding-top: 24px; display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-end; justify-content: space-between; }
.roi__payback-num { font-family: var(--font-display); font-size: 3rem; font-weight: 700; color: var(--pigeon); line-height: 1; transition: color 0.2s; }
.roi__payback-num.active { color: var(--orange-deep); }
.roi__payback-label { font-size: 0.95rem; font-weight: 600; color: var(--orange-deep); margin-top: 4px; }
.roi__stats { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; color: var(--pigeon-deep); min-width: 220px; }
.roi__stats .row { display: flex; justify-content: space-between; gap: 20px; }
.roi__stats .row strong { color: var(--ink); font-weight: 600; }
.roi__cta { margin-top: 28px; }
.roi__cta .btn { width: 100%; text-align: center; opacity: 0.4; pointer-events: none; transition: opacity 0.15s; }
.roi__cta .btn.is-active { opacity: 1; pointer-events: auto; }
.roi-text { font-size: 1.05rem; margin-top: 28px; max-width: var(--measure-prose); }
.roi-text .val { font-weight: 700; color: var(--ink); }
.roi-text .val.empty { opacity: 0.35; font-weight: 400; }

@media (min-width: 700px) {
  .roi__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- pillars ---------- */
.pillars h2 { font-size: var(--text-h2); text-align: center; }
.pillars__grid { display: grid; gap: 20px; max-width: var(--max-width); margin: 0 auto; align-items: stretch; }
.pillar { background: var(--white); padding: 30px 22px; text-align: center; border: 1.5px solid var(--pigeon); display: flex; flex-direction: column; }
.pillar .num { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; color: var(--orange); margin-bottom: 12px; }
.pillar h3 { font-size: var(--text-h3); margin-bottom: 10px; }
.pillar p { font-size: 0.92rem; margin: 0; opacity: 0.85; }
.section--navy .pillar { background: transparent; border-color: rgba(247,246,243,0.25); }
.section--navy .pillar p { color: var(--off-white); }

@media (min-width: 800px) {
  .pillars__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- feature cards (corporate) ---------- */
.features__grid { display: grid; gap: 18px; }
.feature-card { border: 2px solid var(--orange); padding: 26px 22px; background: var(--white); }
.feature-card h4 { font-size: var(--text-h3); margin-bottom: 14px; color: var(--ink); }
.feature-card__icon { width: 30px; height: 30px; color: var(--ink); margin-bottom: 14px; }
.feature-card__icon svg { width: 100%; height: 100%; display: block; }
.feature-card p { font-size: 0.9rem; margin: 0; opacity: 0.85; color: var(--graphite); }

@media (min-width: 700px) { .features__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .features__grid { grid-template-columns: repeat(5, 1fr); } }


/* ---------- customers / logo strip ---------- */
.logo-strip-slider { margin: 40px auto 0; }
.logo-strip-slider__viewport { overflow: hidden; }
.logo-strip-slider__track { display: flex; transition: transform 0.6s ease; }
.logo-strip-slider__item {
  flex-shrink: 0; box-sizing: border-box; padding: 0 10px;
  display: flex; align-items: center; justify-content: center;
}
.logo-strip-slider__item img {
  aspect-ratio: 1; object-fit: cover; width: 100%; max-width: 140px; opacity: 0.85; display: block;
}

/* ---------- testimonials ---------- */
.testimonials__grid { display: grid; gap: 20px; }
.testimonial { background: var(--white); padding: 28px 24px; border: 1.5px solid var(--pigeon); }
.testimonial .mark { font-family: var(--font-display); font-size: 2rem; color: var(--orange); line-height: 1; margin-bottom: 10px; }
.testimonial blockquote { font-family: var(--font-body); font-style: italic; font-size: 1rem; margin: 0 0 14px; line-height: 1.5; }
.testimonial cite { font-size: 0.8rem; opacity: 0.6; font-style: normal; }

@media (min-width: 700px) { .testimonials__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .testimonials__grid--5 { grid-template-columns: repeat(3, 1fr); } }

/* Testimonial slider (Bild links, Text rechts, echter Slide-Track, kein Rahmen) */
.testimonial-slider { max-width: var(--max-width); margin: 0 auto; }
.testimonial-slider__viewport { position: relative; overflow: hidden; background: var(--white); }
.testimonial-slider__track { display: flex; transition: transform 0.6s ease; }
.testimonial-slide { flex-shrink: 0; display: grid; grid-template-columns: 1fr; box-sizing: border-box; }
.testimonial-slide__image { aspect-ratio: 1; overflow: hidden; }
.testimonial-slide__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.testimonial-slide__content { padding: 32px 28px; display: flex; flex-direction: column; justify-content: center; }
.testimonial-slide__content .mark { font-family: var(--font-display); font-size: 2rem; color: var(--orange); line-height: 1; margin-bottom: 10px; }
.testimonial-slide__content blockquote { font-family: var(--font-body); font-style: italic; font-size: 1.05rem; margin: 0 0 14px; line-height: 1.5; }
.testimonial-slide__content cite { font-size: 0.8rem; opacity: 0.6; font-style: normal; }
.testimonial-slider__dots { display: flex; justify-content: center; gap: 10px; margin-top: 24px; }
.testimonial-slider__dot { width: 10px; height: 10px; padding: 0; border: none; background: var(--pigeon); cursor: pointer; }
.testimonial-slider__dot.is-active { background: var(--orange); }
@media (min-width: 700px) {
  .testimonial-slide { grid-template-columns: 260px 1fr; }
  .testimonial-slide__image { align-self: start; }
  .testimonial-slide__content { padding: 40px 48px; }
  .testimonial-slide__content blockquote { font-size: 1.15rem; }
}

/* ---------- pricing tables ---------- */
.pricing-grid { display: grid; gap: 24px; margin-top: 40px; }
.price-card { background: var(--white); padding: 34px 26px; display: flex; flex-direction: column; border: 1.5px solid var(--pigeon); }
.price-card--highlight { border: 2px solid var(--orange); position: relative; }
.price-card__badge { position: absolute; top: -13px; left: 26px; background: var(--orange); color: var(--ink); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 5px 14px; }
.price-card h3 { font-size: var(--text-h3); margin-bottom: 6px; }
.price-card .price { font-family: var(--font-display); font-weight: 700; font-size: 2rem; color: var(--ink); margin: 10px 0 26px; }
.price-card .price small { font-family: var(--font-body); font-weight: 400; font-size: 0.75rem; color: var(--pigeon-deep); }
.price-card .price__note { display: block; margin-top: 6px; font-family: var(--font-body); font-weight: 400; font-size: 0.8rem; line-height: 1.3; color: var(--pigeon-deep); }
.price-card .price-note { font-size: 0.78rem; color: var(--pigeon-deep); margin-bottom: 22px; }
.price-card .placeholder-price { color: var(--orange-deep); font-weight: 600; }

@media (min-width: 900px) { .pricing-grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 700px) { .pricing-grid--2 { grid-template-columns: repeat(2, 1fr); max-width: 680px; margin-left: auto; margin-right: auto; } }

.pricing-toggle-wrap { display: flex; justify-content: center; margin-top: 32px; }
.pricing-toggle { display: inline-flex; border: 1.5px solid var(--pigeon); padding: 4px; gap: 4px; }
.pricing-toggle button { border: none; background: transparent; font-family: var(--font-body); font-weight: 600; font-size: 0.88rem; padding: 10px 24px; cursor: pointer; color: var(--graphite); }
.pricing-toggle button.is-active { background: #E4E6E3; color: var(--ink); font-weight: 700; }
.price-card [data-period] + [data-period] { margin-top: 0; }
.price-card [hidden] { display: none !important; }

/* ---------- price card feature lists (in-card, replaces the separate feature table) ---------- */
.price-card__features { list-style: none; padding: 0; margin: 26px 0 0; text-align: left; }
.price-card__features li { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; padding: 9px 0; border-top: 1px solid rgba(26,26,24,0.08); position: relative; }
.price-card__features li:first-child { border-top: none; }
.price-card__features .check { color: var(--ink); font-weight: 700; flex-shrink: 0; }
.price-card__plus-note { font-weight: 600; color: var(--graphite); font-size: 0.85rem; padding-top: 14px !important; }
.feature-info { margin-left: auto; width: 18px; height: 18px; border-radius: 50%; background: var(--navy); color: var(--white); border: none; font-size: 0.68rem; font-weight: 700; font-family: var(--font-body); line-height: 18px; text-align: center; cursor: pointer; padding: 0; flex-shrink: 0; }
.feature-info:hover, .feature-info:focus { background: var(--navy-deep); outline: none; }
.feature-tooltip { display: none; position: absolute; right: 0; top: 100%; margin-top: 6px; background: var(--ink); color: var(--white); font-size: 0.8rem; line-height: 1.4; padding: 10px 12px; width: 220px; z-index: 20; text-align: left; font-weight: 400; }
.price-card__features li:hover .feature-tooltip,
.feature-info:focus + .feature-tooltip,
.feature-tooltip.is-open { display: block; }

.feature-table td.yes { color: var(--ink); font-weight: 700; }
.feature-table td.no { color: var(--pigeon); }

.feature-table { width: 100%; border-collapse: collapse; margin-top: 36px; background: var(--white); border: 1.5px solid var(--pigeon); }
.feature-table th, .feature-table td { padding: 14px 16px; text-align: center; font-size: 0.88rem; border-bottom: 1px solid rgba(26,26,24,0.08); }
.feature-table th:first-child, .feature-table td:first-child { text-align: left; }
.feature-table thead th { background: var(--ink); color: var(--white); font-family: var(--font-display); font-weight: 600; }
.feature-table tbody tr:last-child td { border-bottom: none; }

.anchor-offset { display: block; position: relative; top: -90px; visibility: hidden; }

.pricing-note { font-size: 0.85rem; color: var(--pigeon-deep); margin-top: 16px; }

/* ---------- FAQ (native details/summary) ---------- */
.faq-grid { display: grid; gap: 0; }
@media (min-width: 800px) {
  .faq-grid { grid-template-columns: 1fr 1fr; column-gap: 56px; }
}
.faq-group { margin-bottom: 36px; }
.faq-group h3 { font-size: var(--text-h3); color: var(--orange); margin-bottom: 6px; }
.section--navy .faq-group h3 { color: var(--orange-300); }
.faq-item { border-top: 1.5px solid rgba(26,26,24,0.15); }
.section--navy .faq-item { border-top-color: rgba(247,246,243,0.2); }
.faq-item:last-child { border-bottom: 1.5px solid rgba(26,26,24,0.15); }
.section--navy .faq-item:last-child { border-bottom-color: rgba(247,246,243,0.2); }
.faq-item summary { cursor: pointer; font-size: 0.98rem; font-weight: 600; color: var(--ink); padding: 16px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.section--navy .faq-item summary { color: var(--white); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.3rem; color: var(--ink); flex-shrink: 0; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p { font-size: 0.92rem; opacity: 0.85; margin: 0 0 18px; max-width: var(--measure-prose); }

/* ---------- final CTA ---------- */
.final-cta { text-align: center; }
/* Abschluss-Balken der Blogartikel: Schwarz statt altem CI-Blau (wie die dunklen Flächen der Startseite) */
.final-cta.section--navy { background: var(--ink-deep); }
.final-cta .container { max-width: var(--content-width); }
.final-cta h2 { font-size: var(--text-h2-emphasis); }
.final-cta p { max-width: var(--measure-statement); margin: 0 auto 28px; opacity: 0.85; }
.final-cta .hero__ctas { justify-content: center; }

/* ---------- corporate teaser (on homepage) ---------- */
.teaser-grid { display: grid; gap: 28px; align-items: center; }
.teaser-grid h2 { font-size: var(--text-h2-emphasis); }
.teaser-grid p { font-size: 1rem; opacity: 0.88; }

@media (min-width: 800px) { .teaser-grid { grid-template-columns: 1.2fr 0.8fr; } }

/* Audience split (Freelance / Corporate router, replaces old homepage Pricing + Corporate Teaser) */
.audience-split__grid { display: grid; gap: 24px; max-width: var(--max-width); margin: 0 auto; }
@media (min-width: 800px) {
  .audience-split__grid { grid-template-columns: 3fr 1fr 3fr; gap: 0; }
  .audience-split__col:nth-child(1) { grid-column: 1; }
  .audience-split__col:nth-child(2) { grid-column: 3; }
}
.audience-split__card { overflow: hidden; }
.audience-split__image { width: 100%; height: auto; display: block; }
.audience-split__cta { display: block; width: 100%; text-align: center; margin: 0; border-width: 0; }
.lede-text { max-width: var(--measure-prose); margin: 12px auto 0; }

/* ---------- footer ---------- */
.footer { background: var(--white); color: var(--graphite); border-top: 1.5px solid rgba(26,26,24,0.15); padding: 48px 0 24px; font-size: 0.85rem; }
.footer nav { display: flex; flex-wrap: wrap; gap: 16px; }
.footer nav a:hover, .footer .legal a:hover { color: var(--orange-deep); }
.footer .legal { display: flex; flex-wrap: wrap; gap: 16px; font-size: 0.76rem; }
.footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; }
.footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.footer__row { display: block; }
.footer__sep { opacity: 0.4; margin: 0 0.1em; }
.footer__col a:not(.btn):hover { color: var(--orange-deep); }
.footer .footer__btn { padding: 10px 18px; font-size: 0.85rem; }
.footer__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 32px; padding-top: 20px; border-top: 1px solid rgba(26,26,24,0.1); }
.footer .copyright { font-size: 0.74rem; opacity: 0.5; }
.footer__brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-family: var(--font-display); font-weight: 700; }
.footer__brand img { height: 28px; width: 28px; }

@media (min-width: 800px) {
  .footer__cols { grid-template-columns: 1fr auto 1fr; gap: 28px 56px; }
  .footer__cols .footer__col:nth-child(1) { justify-self: start; }
  .footer__cols .footer__col:nth-child(2) { justify-self: center; }
  .footer__cols .footer__col:nth-child(3) { justify-self: end; }
}

/* Rueckfall fuer Seiten mit altem Footer (z. B. demo-user-dashboard) */
.footer__inner { display: flex; flex-direction: column; gap: 24px; }
.footer__tagline { margin-top: 14px; max-width: var(--measure-statement); opacity: 0.7; }
@media (min-width: 800px) {
  .footer__inner { flex-direction: row; justify-content: space-between; align-items: flex-start; }
}

/* ---------- utility ---------- */
.mt-40 { margin-top: 40px !important; }
.text-center { text-align: center !important; }
.prose { max-width: var(--measure-prose) !important; }

/* ---------- invite-flow: "How it works" Animation (Briefumschlag links -> Mitte -> 3 Kalender), DE-only vorerst ----------
   Zwei feste Umschlag-Formen (gleiche Größe/Silhouette, nur Rahmenfarbe unterscheidet sie):
   grau = Original-Einladung, orange = bereinigte Einladung mit Customer Code. */
.invite-flow { position: relative; height: 380px; margin: 8px 0 4px; overflow: hidden; }
.invite-flow__lane { position: relative; width: 100%; height: 100%; }

.envelope {
  position: absolute; top: 50%; left: -22%;
  width: 210px; height: 128px;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
  transition: left 2.6s cubic-bezier(.22,1,.36,1), top 1.6s cubic-bezier(.22,1,.36,1),
              opacity 1s ease, transform 1.6s cubic-bezier(.55,0,.85,.35);
}
/* Umschlag-Zeichnung als PNG (handgezeichnet, ersetzt die vorige SVG-Umrandung) --
   Rahmen/Hintergrund kommen jetzt aus dem Bild selbst, kein eigener CSS-Rahmen mehr */
.envelope__art {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  object-fit: fill; pointer-events: none; -webkit-user-drag: none;
}
.envelope__fields {
  /* volle Umschlagflaeche als Positionierungs-Kontext -- jedes Feld bekommt seine exakte
     Position ueber die neuen Foto-Umschlaege (Umschlag-g-Foto.png / Umschlag-o-Foto.png),
     ausgemessen in Beispiel.png: 2 Zeilen, 3-Spalten-Raster unterhalb der tieferen Lasche */
  position: absolute; inset: 0;
}
.envelope__fields .invite-chip {
  position: absolute; display: flex; align-items: center; justify-content: center; text-align: center;
}
/* Zeile 1 (Zeit/Datum, aeussere Spalten) -- identische Position in Quell- und Ziel-Umschlag,
   damit die Transfer-Animation (layoutTransferChips) nahtlos andockt */
[data-field="zeit"], [data-field-ref="zeit-clean"] { left: 8.00%; width: 26.29%; top: 53.91%; height: 16.71%; }
[data-field="datum"], [data-field-ref="datum-clean"] { left: 63.24%; width: 26.19%; top: 53.91%; height: 16.71%; }
/* Zeile 2 (Name/E-Mail/Anhang, alle drei Spalten) -- nur im grauen Quell-Umschlag sichtbar */
[data-field="name"] { left: 8.00%; width: 26.29%; top: 73.12%; height: 16.72%; }
[data-field="email"] { left: 35.62%; width: 26.19%; top: 73.12%; height: 16.72%; }
[data-field="anhang"] { left: 63.24%; width: 26.19%; top: 73.12%; height: 16.72%; }

/* grauer Umschlag: fliegt von links ein, hält an, bleibt stehen, fällt dann in den Papierkorb */
.envelope--source { color: var(--pigeon-deep); border-color: var(--pigeon); }
.invite-flow[data-phase="1"] .envelope--source,
.invite-flow[data-phase="2"] .envelope--source,
.invite-flow[data-phase="3"] .envelope--source,
.invite-flow[data-phase="4"] .envelope--source,
.invite-flow[data-phase="5"] .envelope--source,
.invite-flow[data-phase="6"] .envelope--source,
.invite-flow[data-phase="7"] .envelope--source,
.invite-flow[data-phase="8"] .envelope--source,
.invite-flow[data-phase="9"] .envelope--source,
.invite-flow[data-phase="10"] .envelope--source,
.invite-flow[data-phase="11"] .envelope--source,
.invite-flow[data-phase="12"] .envelope--source { left: 16.6667%; opacity: 1; }

.invite-flow[data-phase="6"] .envelope--source,
.invite-flow[data-phase="7"] .envelope--source,
.invite-flow[data-phase="8"] .envelope--source,
.invite-flow[data-phase="9"] .envelope--source,
.invite-flow[data-phase="10"] .envelope--source,
.invite-flow[data-phase="11"] .envelope--source,
.invite-flow[data-phase="12"] .envelope--source {
  /* kippt sichtbar nach links, faellt dann nach unten aus dem Bild -- Opacity startet erst
     mit kurzer Verzoegerung, damit das Kippen selbst noch zu sehen ist, bevor er verblasst */
  top: 112%; opacity: 0; transform: translate(-50%, -50%) rotate(-50deg) scale(.9);
  transition: left 2.6s cubic-bezier(.22,1,.36,1), top 1.6s cubic-bezier(.55,0,.85,.35),
              opacity 1.3s ease .3s, transform 1.6s cubic-bezier(.55,0,.85,.35);
}

/* oranger Umschlag: kein Einflug — er erscheint einfach an seinem festen Platz */
.envelope--clean {
  color: var(--orange); border-color: var(--orange);
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%) scale(.88);
  transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.22,1,.36,1);
}
.invite-flow[data-phase="3"] .envelope--clean,
.invite-flow[data-phase="4"] .envelope--clean,
.invite-flow[data-phase="5"] .envelope--clean,
.invite-flow[data-phase="6"] .envelope--clean,
.invite-flow[data-phase="7"] .envelope--clean,
.invite-flow[data-phase="8"] .envelope--clean,
.invite-flow[data-phase="9"] .envelope--clean,
.invite-flow[data-phase="10"] .envelope--clean {
  opacity: 1; transform: translate(-50%, -50%) scale(1);
}
/* Reihenfolge: Kopie 1 -> oberer Kalender, Kopie 2 -> mittlerer Kalender, dann der echte
   Umschlag selbst (verkleinert) -> unterer Kalender -- mit Ueberlappung, damit es zuegig geht */
.invite-flow[data-phase="11"] .envelope--clean {
  /* bleibt bis zum Phasenende sichtbar (wie die Kopien) -- verblasst erst mit Phase 12,
     damit alle drei Umschlaege synchron verschwinden. z-index auf 0 abgesenkt (Basis-Regel
     hat z-index:2), damit er beim Landen wie die beiden Kopien hinter dem Kalender
     (z-index:1) verschwindet statt sichtbar darueber zu liegen */
  left: 83.3333%; top: 86%; opacity: 1; z-index: 0; transform: translate(-50%, -50%) scale(.15);
  transition: left 1.8s cubic-bezier(.22,1,.36,1) 1s, top 1.8s cubic-bezier(.22,1,.36,1) 1s,
              transform 1.8s cubic-bezier(.22,1,.36,1) 1s;
}
.invite-flow[data-phase="12"] .envelope--clean {
  left: 83.3333%; top: 86%; opacity: 0; z-index: 0; transform: translate(-50%, -50%) scale(.15);
  transition: opacity .6s ease;
}

/* Kopien: echte Ausfertigungen des orangen Umschlags (mit Zeit/Datum/Code) -- starten
   deckungsgleich mit dem orangen Umschlag, schrumpfen sichtbar und fliegen zu den drei
   Kalendern. Die gesamte Box wird skaliert (nicht einzelne Font-Groessen), damit Schrift
   und Elemente wirklich alle gemeinsam kleiner werden. */
.envelope--clone {
  color: var(--orange); border-color: var(--orange);
  left: 50%; opacity: 0; pointer-events: none;
  transform: translate(-50%, -50%) scale(1);
  transition: left 2.2s cubic-bezier(.22,1,.36,1), top 2.2s cubic-bezier(.22,1,.36,1),
              opacity .7s ease, transform 2.2s cubic-bezier(.22,1,.36,1);
}
.invite-flow[data-phase="11"] .envelope--clone {
  opacity: 1;
}
.invite-flow[data-phase="11"] .envelope--clone[data-role="clone-1"] { left: 83.3333%; top: 14%; transform: translate(-50%, -50%) scale(.15); }
.invite-flow[data-phase="11"] .envelope--clone[data-role="clone-2"] {
  left: 83.3333%; top: 50%; transform: translate(-50%, -50%) scale(.15);
  transition-delay: .5s;
}
/* beim Verblassen (letzte Phase) an der Kalender-Position bleiben, statt sichtbar zur Mitte
   zurueckzurutschen -- die eigentliche Rueckkehr zur Startposition passiert erst danach,
   waehrend die Kopie schon unsichtbar ist */
.invite-flow[data-phase="12"] .envelope--clone {
  opacity: 0; transition: opacity .6s ease;
}
.invite-flow[data-phase="12"] .envelope--clone[data-role="clone-1"] {
  left: 83.3333%; top: 14%; transform: translate(-50%, -50%) scale(.15);
}
.invite-flow[data-phase="12"] .envelope--clone[data-role="clone-2"] {
  left: 83.3333%; top: 50%; transform: translate(-50%, -50%) scale(.15);
}

.invite-chip {
  font-family: var(--font-body); font-size: .72rem; font-weight: 600; line-height: 1.2;
  padding: 4px 7px; border: 1px solid currentColor; background: var(--off-white); color: var(--graphite);
  max-height: 24px; overflow: hidden; opacity: 1;
  transition: opacity 1.1s ease, transform 1.1s ease, max-height 1.1s ease, padding 1.1s ease, margin 1.1s ease;
}

/* Zeit & Datum wandern als EIN Block (Kopie des Original-Paars, gleicher Abstand) vom
   grauen in den orangen Umschlag — Position wird per JS gemessen (layoutTransferChips). */
.invite-flow__transfer {
  position: absolute;
  /* space-between statt festem Abstand: Zeit und Datum sitzen in getrennten Spalten,
     die Breite wird per JS (layoutTransferChips) auf die gemessene Spannweite gesetzt,
     damit sich die beiden Chips exakt bis zu den echten Feldpositionen spreizen */
  /* Kinder werden NICHT mehr per justify-content verteilt (das liess sie am eigenen Text
     sizen -- "Zeit" wurde dadurch sichtbar schmaler als "Datum"), sondern fest auf die
     gemessene Ziel-Feldbreite gesetzt (siehe .invite-flow__transfer .invite-chip Regeln
     unten): exakt so breit wie die echten Felder, unabhaengig von der Textlaenge */
  z-index: 3;
  /* nur vertikal zentriert -- "left" ist die linke Kante, wie bei den echten,
     linksbuendigen Feldern in ihrer Zeile. transform-origin auf die linke Kante gelegt:
     seit die Breite live gemessen wird (kann recht groß sein), wuerde eine Skalierung
     von der Mitte aus beim Schrumpfen auf den Kalenderpunkt (phase 11) ueber das Ziel
     hinausschiessen -- von der linken Kante aus bleibt "left" der stabile Ankerpunkt */
  transform-origin: left center;
  transform: translate(0, -50%) scale(.92);
  opacity: 0;
  transition: left 1.6s cubic-bezier(.22,1,.36,1), top 1.6s cubic-bezier(.22,1,.36,1),
              width 1.6s cubic-bezier(.22,1,.36,1), opacity .5s ease, transform .5s ease;
}
.invite-flow__transfer .invite-chip {
  /* top:0 + translateY(-50%) auf JEDEM Chip einzeln -- ohne das haengen beide Chips
     als unabhaengig "auto"-positionierte absolute Elemente in einem Elternblock ohne
     eigene Hoehe (kein flex mehr), was sie sichtbar auf unterschiedliche Hoehen driften
     liess und im naechsten Schritt mit der Customer-Code-Zeile ueberlappen liess */
  position: absolute; top: 0; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.invite-flow__transfer .invite-chip:first-child { left: 0; width: 32.29%; margin: 0; }
.invite-flow__transfer .invite-chip:last-child { right: 0; width: 32.16%; margin: 0; }

.invite-flow[data-phase="4"] .invite-flow__transfer,
.invite-flow[data-phase="5"] .invite-flow__transfer,
.invite-flow[data-phase="6"] .invite-flow__transfer,
.invite-flow[data-phase="7"] .invite-flow__transfer,
.invite-flow[data-phase="8"] .invite-flow__transfer,
.invite-flow[data-phase="9"] .invite-flow__transfer,
.invite-flow[data-phase="10"] .invite-flow__transfer {
  opacity: 1; transform: translate(0, -50%) scale(1);
}
/* bleibt sichtbar, solange die beiden Kopien verschickt werden, und wandert dann exakt mit
   dem echten Umschlag mit (gleiche Verzoegerung/Dauer), wenn dieser als letzter losfliegt --
   damit die Felder sichtbar "im Umschlag" bleiben, statt getrennt zu verblassen */
.invite-flow[data-phase="11"] .invite-flow__transfer {
  left: 81.3333%; top: 86%; opacity: 0; transform: translate(0, -50%) scale(.15);
  transition: left 1.8s cubic-bezier(.22,1,.36,1) 1s, top 1.8s cubic-bezier(.22,1,.36,1) 1s,
              opacity 1.3s ease 1.5s, transform 1.8s cubic-bezier(.22,1,.36,1) 1s;
}
/* haelt Groesse/Position fest (wie beim Umschlag selbst), sonst springt die Skalierung beim
   Phasenwechsel zurueck auf die Basis-Groesse, bevor das Ausblenden sicher fertig ist */
.invite-flow[data-phase="12"] .invite-flow__transfer {
  left: 81.3333%; top: 86%; opacity: 0; transform: translate(0, -50%) scale(.15);
  transition: opacity .6s ease;
}

.invite-card__code {
  font-family: var(--font-body); font-size: .66rem; font-weight: 700; letter-spacing: .02em;
  color: var(--ink); background: var(--orange);
  padding: 0 7px; text-align: center;
  position: absolute; left: 8.00%; width: 81.43%; top: 73.12%;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(-6px) scale(.85); max-height: 0; overflow: hidden;
  transition: opacity .9s ease, transform .9s ease, max-height .9s ease, padding .9s ease;
}
.invite-flow[data-phase="8"] .invite-card__code,
.invite-flow[data-phase="9"] .invite-card__code,
.invite-flow[data-phase="10"] .invite-card__code,
.invite-flow[data-phase="11"] .invite-card__code {
  opacity: 1; transform: translateY(0) scale(1); max-height: 24px; padding: 4px 7px;
}

.invite-flow__calendar {
  position: absolute; left: 83.3333%; transform: translate(-50%, -50%);
  z-index: 1; opacity: 0;
  width: 90px; height: 90px;
  transition: transform .7s ease, opacity .6s ease;
}
/* Kalender- und Haekchen-Zeichnung liegen deckungsgleich uebereinander (gleiche Masse) */
.invite-flow__calendar-art, .invite-flow__check {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  object-fit: fill; pointer-events: none; -webkit-user-drag: none;
}
.invite-flow__check {
  opacity: 0;
  transform: scale(.5);
  transition: opacity .35s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
}
.invite-flow__calendar[data-role="cal-1"] { top: 14%; }
.invite-flow__calendar[data-role="cal-2"] { top: 50%; }
.invite-flow__calendar[data-role="cal-3"] { top: 86%; }
/* erscheinen erst, wenn der orange Umschlag fertig beschriftet ist (Customer Code da),
   kurz bevor die drei Kopien losgeschickt werden -- vorher unsichtbar */
.invite-flow[data-phase="10"] .invite-flow__calendar,
.invite-flow[data-phase="11"] .invite-flow__calendar {
  opacity: 1;
}
.invite-flow[data-phase="11"] .invite-flow__calendar {
  transform: translate(-50%, -50%) scale(1.1);
}
/* Haekchen poppt zum Abschluss auf jedem Kalender auf (Umschlag ist da bereits verblasst,
   Kalender selbst bleibt noch sichtbar) */
.invite-flow[data-phase="12"] .invite-flow__check {
  opacity: 1; transform: scale(1);
}
/* danach verblassen Kalender + Haekchen gemeinsam, kurz vor Schluss, damit die Szene ganz
   leer ist, bevor der Loop neu beginnt */
.invite-flow[data-phase="12"] .invite-flow__calendar {
  opacity: 0;
  transition: opacity .5s ease .9s;
}

/* Begleittext: erscheint spaltenweise dort, wo gerade keine Grafik ist -- pro Textblock ein
   eigenes data-role mit eigenem Phasenbereich, damit neue Texte einfach ergaenzt werden
   koennen, ohne bestehende anzufassen. Spalten decken sich mit den drei Grafik-Spalten. */
.invite-flow__note {
  /* oben verankert statt vertikal zentriert; Breite wird ueber left+right automatisch
     berechnet (siehe pro Spalte unten), damit der Text mehr als nur sein eigenes Drittel
     nutzen kann -- reicht bis zur Aussenkante der Lane und innen bis kurz vor den
     Umschlag in der Mitte. Fade-out ist schnell und ohne Delay, Fade-in kommt erst
     danach (siehe Phasenregeln), damit sich zwei Notizen beim Wechsel nie ueberlappen. */
  position: absolute; top: 50%; transform: translateY(-50%);
  padding: 0 10px; box-sizing: border-box;
  text-align: center;
  font-family: var(--font-body); font-size: var(--text-body); line-height: 1.65; color: var(--graphite);
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease;
}
/* aussen bis zur Lane-Kante, innen bis kurz vor den mittleren Umschlag (105px halbe
   Breite + 20px Abstand = 125px ab der Lane-Mitte) */
.invite-flow__note[data-col="left"] { left: 0; right: calc(50% + 170px); }
.invite-flow__note[data-col="mid"] { left: 33.3333%; right: 33.3333%; }
.invite-flow__note[data-col="right"] { left: calc(50% + 170px); right: 0; }

.invite-flow__note-header {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h3);
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 8px;
}
.invite-flow__note-info {
  display: block;
  margin-top: 8px;
  font-size: .78rem;
  font-style: italic;
  color: var(--pigeon-deep);
}

/* Phase 1-2: grauer Umschlag fliegt ein + Pause -- Text in der rechten Spalte.
   Sichtbar waehrend der Aktion + der folgenden Pause, verblasst erst wenn die naechste
   Aktionsphase beginnt. */
.invite-flow[data-phase="1"] [data-role="note-1"],
.invite-flow[data-phase="2"] [data-role="note-1"] {
  opacity: 1;
  transition: opacity .5s ease .35s;
}

/* Phase 3-5: oranger Umschlag erscheint, Zeit/Datum wandern rueber + Pause */
.invite-flow[data-phase="3"] [data-role="note-2"],
.invite-flow[data-phase="4"] [data-role="note-2"],
.invite-flow[data-phase="5"] [data-role="note-2"] {
  opacity: 1;
  transition: opacity .5s ease .35s;
}

/* Phase 6-7: grauer Umschlag kippt weg + Pause */
.invite-flow[data-phase="6"] [data-role="note-3"],
.invite-flow[data-phase="7"] [data-role="note-3"] {
  opacity: 1;
  transition: opacity .5s ease .35s;
}

/* Phase 8-9: Customer Code erscheint + Pause (Kalender noch unsichtbar) */
.invite-flow[data-phase="8"] [data-role="note-4"],
.invite-flow[data-phase="9"] [data-role="note-4"] {
  opacity: 1;
  transition: opacity .5s ease .35s;
}

/* Phase 10-11: Kalender erscheinen, Kopien verteilen sich */
.invite-flow[data-phase="10"] [data-role="note-5"],
.invite-flow[data-phase="11"] [data-role="note-5"] {
  opacity: 1;
  transition: opacity .5s ease .35s;
}
/* Phase 12: bleibt stehen, bis Kalender + Haekchen zu verblassen beginnen (0.9s Delay),
   und verblasst dann exakt zeitgleich mit ihnen (gleiche Transition wie
   .invite-flow__calendar oben) */
.invite-flow[data-phase="12"] [data-role="note-5"] {
  opacity: 0;
  transition: opacity .5s ease .9s;
}

@media (max-width: 680px) {
  .invite-flow { display: none; }
}

/* ---------- feature grid (3 columns x 3 rows: animation / header / text) ---------- */
.feature-clusters { display: grid; gap: 44px; }
.feature-cluster__title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--ink); margin: 0 0 24px; padding-bottom: 12px; border-bottom: 2px solid var(--orange); }
.feature-cluster__item { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 22px; }
.feature-cluster__item:last-child { margin-bottom: 0; }
.feature-cluster__icon { flex-shrink: 0; width: 36px; height: 36px; border: 1.5px solid var(--pigeon); display: flex; align-items: center; justify-content: center; color: var(--orange-deep); }
.feature-cluster__icon svg { width: 20px; height: 20px; }
.feature-cluster__text h4 { margin: 0 0 4px; font-size: 0.98rem; color: var(--ink); }
.feature-cluster__text p { margin: 0; font-size: 0.86rem; color: var(--graphite); opacity: 0.85; line-height: 1.4; }
@media (min-width: 900px) {
  .feature-clusters { grid-template-columns: repeat(3, 1fr); gap: 40px; }
}

.feature-grid { display: grid; gap: 40px; }
.feature-grid__col { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.feature-grid__animation { width: 100%; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; background: var(--off-white); border: 1.5px dashed var(--pigeon); border-radius: 4px; color: var(--pigeon-deep); font-size: 0.8rem; }
.feature-grid__header { font-size: var(--text-h3); margin: 0; }
.feature-grid__text { font-size: 0.95rem; opacity: 0.85; margin: 0; }

.feature-grid__animation--stamp { background: none; border: none; padding: 0; overflow: hidden; }
.feature-grid__animation--image { background: none; border: none; padding: 0; overflow: hidden; }
.feature-grid__animation--image img { max-width: 62%; height: auto; }
.feature-grid__animation--stamp .stamp-img { max-width: 62%; height: auto; opacity: 0; transform: scale(2.6); }
.feature-grid__animation--stamp.is-visible .stamp-img { animation: stamp-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards; }
@keyframes stamp-in {
  0%   { opacity: 0; transform: scale(2.6); }
  100% { opacity: 1; transform: scale(1); }
}

/* Tick-Animation (Stoppuhr, Spalte 2): schnelles Pop-in mit kurzem Wackler, wie ein losgelassener Timer */
.feature-grid__animation--tick .tick-img { opacity: 0; transform: scale(0.55) rotate(0deg); }
.feature-grid__animation--tick.is-visible .tick-img { animation: tick-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 1s forwards; }
@keyframes tick-in {
  0%   { opacity: 0; transform: scale(0.55) rotate(0deg); }
  55%  { opacity: 1; transform: scale(1.08) rotate(0deg); }
  70%  { transform: scale(1) rotate(-4deg); }
  85%  { transform: scale(1) rotate(3deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* Anhänge-Animation (Made in Germany, Spalte 3): schwingt schräg ein und pendelt sich gerade, wie frisch angehängt */
.feature-grid__animation--tag .tag-img { opacity: 0; transform: rotate(-18deg) translateY(-10px); transform-origin: 50% 0%; }
.feature-grid__animation--tag.is-visible .tag-img { animation: tag-swing 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.5s forwards; }
@keyframes tag-swing {
  0%   { opacity: 0; transform: rotate(-18deg) translateY(-10px); }
  15%  { opacity: 1; }
  40%  { transform: rotate(10deg) translateY(0); }
  65%  { transform: rotate(-6deg); }
  85%  { transform: rotate(3deg); }
  100% { opacity: 1; transform: rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .feature-grid__animation--stamp .stamp-img { opacity: 1; transform: scale(1); animation: none; }
  .feature-grid__animation--tick .tick-img { opacity: 1; transform: scale(1) rotate(0deg); animation: none; }
  .feature-grid__animation--tag .tag-img { opacity: 1; transform: rotate(0deg) translateY(0); animation: none; }
}

@media (min-width: 900px) {
  .feature-grid { grid-template-columns: repeat(3, 1fr); }
}

/* pricing section CTA (centered, also on mobile) */
.pricing-ctas { justify-content: center; margin-top: 40px; }

/* ---------- Betriebsmodelle (Hosted / Dedicated / On-Premises) ---------- */
.models { display: grid; gap: 20px; max-width: var(--max-width); margin-left: auto; margin-right: auto; }
.model { display: flex; flex-direction: column; background: var(--white); border: 1.5px solid var(--pigeon); padding: 28px 28px 32px; }
.model--primary { border-color: var(--orange); border-width: 2px; }
.model__tag { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.75rem; line-height: 1; color: var(--orange-deep); font-weight: 600; margin: 0 0 14px; }
.model__title { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; color: var(--ink); margin: 0 0 10px; }
.model__lead { font-size: 0.95rem; color: var(--graphite); margin: 0 0 24px; }
.model__facts { margin: 0 0 28px; flex: 1; }
.model__fact { padding: 12px 0; border-top: 1px solid var(--pigeon); }
.model__fact dt { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--pigeon-deep); margin: 0 0 4px; font-weight: 600; }
.model__fact dd { margin: 0; font-size: 0.95rem; color: var(--ink); }
.model .btn { text-align: center; }
.model .btn--outline { background: transparent; }
.model .btn--outline:hover { background: var(--orange); border-color: var(--orange); color: var(--ink); }
@media (max-width: 899px) {
  .model__tag[aria-hidden="true"] { display: none; }
}
@media (min-width: 900px) {
  .models { grid-template-columns: repeat(3, 1fr); }
  .model__lead { min-height: 3.5em; }
  .model__fact:nth-child(1) dd { min-height: 3.3em; }
}

/* ---------- Hinweise auf die Betriebsmodelle ---------- */
#betriebsmodelle { scroll-margin-top: 90px; }
.hero__more { margin: 18px 0 0; font-size: 0.9rem; }
.hero__more a, .feature-grid__more a, .pricing-note a, .faq-item p a { text-decoration: underline; text-underline-offset: 3px; color: var(--ink); }
.hero__more a:hover, .feature-grid__more a:hover, .pricing-note a:hover, .faq-item p a:hover { color: var(--orange-deep); }
.feature-grid__more { font-size: 0.9rem; margin: 0; }
.pricing-note { font-size: 0.85rem; color: var(--pigeon-deep); margin: 28px 0 0; }


/* Hero-Hinweis auf Betriebsmodelle: dezenter */
.hero__more { font-size: 0.8rem; }
.hero__more a { color: var(--pigeon-deep); text-decoration-color: rgba(95,101,95,0.5); }
.hero__more a:hover { color: var(--orange-deep); text-decoration-color: var(--orange-deep); }

/* ---------- Trial-Popup ---------- */
.popup { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(26,26,24,0.55); opacity: 0; transition: opacity 0.25s ease; }
.popup[hidden] { display: none; }
.popup.is-visible { opacity: 1; transition: opacity 0.7s ease; } /* erst abdunkeln */
.popup__box { opacity: 0; transform: translateY(-70px); transition: opacity 0.2s ease, transform 0.2s ease; position: relative; background: var(--white); border: 2px solid var(--orange); max-width: 520px; width: 100%; padding: 44px 40px 40px; text-align: center; }
.popup__box .eyebrow { margin-bottom: 18px; }
.popup__box h2 { font-size: var(--text-h2); margin: 0 0 14px; }
.popup__text { margin: 0 0 28px; color: var(--graphite); }
.popup__ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.popup__ctas .btn { text-align: center; }
.popup__ctas .btn--outline { background: transparent; }
.popup__ctas .btn--outline:hover { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.popup__close { position: absolute; top: 8px; right: 12px; width: 36px; height: 36px; border: 0; background: transparent; font-size: 1.8rem; line-height: 1; color: var(--ink); cursor: pointer; }
.popup__close:hover { color: var(--orange-deep); }
.popup.is-visible .popup__box { opacity: 1; transform: none; transition: opacity 0.5s ease 0.6s, transform 0.7s cubic-bezier(0.22, 1.2, 0.36, 1) 0.6s; } /* danach von oben einfliegen, mit kleinem Nachfedern */
html.popup-open { overflow: hidden; }
@media (max-width: 520px) {
  .popup__box { padding: 40px 24px 28px; }
  .popup__ctas { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .popup, .popup.is-visible, .popup__box, .popup.is-visible .popup__box { transition: none; transform: none; }
}

/* === BLOG:START === */
/* ===========================================================
   BLOG (Port von TheOwnershipSpeaker.com, Akzent Lime -> Orange)
   Uebersicht (.pub-grid, .pub-card, Suche, Format-Filter) und Artikel (.article-rhythm).
   Erzeugt aus dem TOS-Stylesheet, ab hier bei Bedarf direkt in dieser Datei pflegen.
   =========================================================== */
#blog { scroll-margin-top: 72px; }
h1 { overflow-wrap: break-word; hyphens: auto; }
.bg-grey { background: #E9E8E3; }
.placeholder {
  background: rgba(26,26,24,0.05);
  color: var(--ink);
  padding: 26px;
  text-align:center;
  font-size:0.85rem;
  line-height:1.5;
  border-radius:4px;
}
.placeholder strong { display:block; font-family:var(--font-display); font-size:1rem; margin-bottom:6px; }
.hero { padding-top: 48px; padding-bottom:56px; }
.hero__eyebrow { text-transform:uppercase; letter-spacing:0.12em; font-size:0.75rem; color:var(--pigeon-deep); font-weight:600; margin-bottom:24px; }
.hero h1 { font-size:var(--text-h1); margin-bottom:28px; letter-spacing:-0.01em; }
.hero p { font-size:var(--text-body); max-width: var(--measure-prose); margin-bottom:28px; }
@media (min-width: 900px) {
  .hero h1 { font-size:var(--text-h1-lg); }
}
.simple-list { list-style:none; padding:0; margin:22px 0 0; display:grid; gap:14px; max-width: var(--max-width); }
.simple-list li { font-size: var(--text-body); padding-left:1.3em; text-indent:-1.3em; }
.simple-list li::before { content:"→ "; color:var(--pigeon-deep); font-weight:700; }
.simple-list li strong { color:var(--ink); }
@media (min-width:800px) {
  .simple-list--2col { grid-template-columns: 1fr 1fr; gap:16px 32px; }
  .simple-list--2col .simple-list__col2 { grid-column: 2; }
  .simple-list--cols { grid-auto-flow: column; grid-template-rows: repeat(3, auto); }
}
.pub-section__head { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:28px; }
.pub-section__head h2 { font-size:var(--text-h2); margin:0; }
.pub-section__head a { font-size:0.86rem; font-weight:600; color: var(--pigeon-deep); }
.pub-grid { display:grid; gap:24px; grid-template-columns:1fr; }
@media (min-width: 780px) {
  .pub-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
.pub-card { background:var(--white); border:1.5px solid var(--pigeon); border-radius:3px; overflow:hidden; display:flex; flex-direction:column; }
.pub-card__media { aspect-ratio:3/2; display:flex; align-items:center; justify-content:center; border-radius:0; }
.pub-card__body { padding:20px; display:flex; flex-direction:column; gap:8px; flex-grow:1; }
.pub-card__body h3 { font-size:var(--text-h3); margin:0; }
.pub-card__body p:not(.pub-card__kicker) { font-size:0.9rem; margin:0; }
.pub-card__body a { font-size:0.86rem; font-weight:600; color: var(--pigeon-deep); }
.pub-card__kicker { margin:0; text-transform:uppercase; letter-spacing:0.08em; font-size:0.72rem; font-weight:700; color: var(--pigeon-deep); }
.pub-card[hidden], .pub-more[hidden] { display:none; }
.pub-more { display:flex; justify-content:center; flex-wrap:wrap; gap:8px 24px; margin-top:32px; }
.pub-more__link[hidden] { display:none; }
.pub-more__link { background:none; border:0; padding:8px 12px; font-family:inherit; font-size:0.86rem; font-weight:600; color: var(--pigeon-deep); cursor:pointer; }
.pub-more__link:hover { color: var(--ink); }
.article-top { display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-top:16px; margin-bottom:28px; }
.article-top .hero__eyebrow, .article-top .article-back { margin:0; }
.article-top .article-back { font-size:0.86rem; font-weight:600; white-space:nowrap; }
.article-back a { color: var(--pigeon-deep); }
.article-back a:hover { color: var(--ink); }
.article-hero .article-meta { font-size:0.82rem; font-weight:600; letter-spacing:0.04em; color: var(--pigeon-deep); margin-bottom:20px; }
.article-hero .article-lead { font-size:1.2rem; line-height:1.55; color: var(--ink); max-width:none; margin-bottom:0; }
.article-body h2 { font-size: var(--text-h2); margin: 2.2em 0 0.6em; }
.article-body h2:first-child { margin-top:0; }
.article-body p:not(.pub-card__kicker) { font-size:1.08rem; line-height:1.75; margin:0 0 1.2em; }
.article-cols { display:block; }
@media (min-width: 900px) {
  .article-cols { column-count:2; column-gap:56px; }
}
.article-body blockquote { margin:2.2em 0; padding:4px 0 4px 24px; border-left:4px solid var(--orange); font-size:1.35rem; font-style:italic; line-height:1.4; color: var(--ink); }
.article-body blockquote cite { display:block; margin-top:12px; font-size:0.85rem; font-style:normal; font-weight:600; color: var(--pigeon-deep); }
.article-figure { margin:2em 0; }
.article-figure figcaption { font-size:0.82rem; color: var(--pigeon-deep); margin-top:8px; }
.article-pager { display:flex; justify-content:space-between; gap:24px; margin-top:3em; padding-top:24px; border-top:1.5px solid var(--pigeon); }
.article-pager a { flex:1 1 0; font-size:0.86rem; font-weight:600; color: var(--pigeon-deep); }
.article-pager a span { display:inline-block; margin-top:4px; font-family: var(--font-display); font-size:1rem; font-weight:700; line-height:1.3; color: var(--ink); }
.article-pager__next { text-align:right; }
@media (max-width: 480px) {
  .article-pager { flex-direction:column; }
  .article-pager__next { text-align:left; }
}
.article-opening { padding-top:0; }
.article-opening__grid { display:grid; grid-template-columns:minmax(0,1fr); gap:32px; }
.article-opening__text, .article-opening__image { min-width:0; }
.article-opening__image { position:relative; margin:0; width:100%; aspect-ratio:16/9; border-radius:3px; overflow:hidden; background: var(--white); }
.article-opening__image img, .article-opening__image .placeholder { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.article-opening__image .placeholder { display:flex; align-items:center; justify-content:center; text-align:center; padding:16px; }
@media (min-width:900px) {
  .article-opening__grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:stretch; }
}
.article-rhythm p.is-lead { font-size:1.2rem; line-height:1.6; color:var(--ink); }
.article-rhythm .article-opening__text > :first-child { margin-top:0; }
.article-rhythm h2 { margin:0 0 0.7em; }
.article-rhythm .article-full, .article-rhythm .article-split { margin:0 0 2.6em; }
.article-rhythm .article-full > p, .article-rhythm .article-full > ul, .article-rhythm .article-split p, .article-rhythm .article-split li { font-size:var(--text-body); line-height:1.7; }
.article-rhythm .article-full > p:last-child, .article-rhythm .article-split p:last-child { margin-bottom:0; }
.article-rhythm .article-split p, .article-rhythm .article-split li { orphans:3; widows:3; }
@media (min-width:900px) {
  .article-rhythm .article-split { column-count:2; column-gap:56px; column-fill:balance; }
}
.article-rhythm blockquote.pullquote { margin:0 0 2.6rem; padding:8px 0 8px 32px; border-left:6px solid var(--orange); font-family:var(--font-display); font-style:normal; font-weight:700; font-size:clamp(1.5rem, 3.2vw, 2.3rem); line-height:1.25; letter-spacing:-0.01em; color:var(--ink); max-width:none; }
.article-rhythm blockquote.pullquote p { font-size:inherit; line-height:inherit; margin:0; }
.article-rhythm blockquote.pullquote cite { font-family:var(--font-body); font-weight:600; font-size:0.85rem; letter-spacing:0; line-height:1.4; }
.infocard { margin:0 0 2.6em; padding:26px 30px; background:var(--white); border:1.5px solid var(--pigeon); border-radius:3px; }
.article-rhythm .infocard h3 { margin:0 0 10px; font-size:var(--text-h3); }
.article-rhythm .infocard p, .article-rhythm .infocard li { font-size:0.98rem; line-height:1.65; }
.article-rhythm .infocard p { margin:0 0 0.8em; }
.article-rhythm .infocard ul { margin:0; padding-left:1.2em; }
.article-rhythm .infocard li { margin-bottom:0.7em; }
.article-rhythm .infocard > :last-child, .article-rhythm .infocard li:last-child { margin-bottom:0; }
.article-rhythm ol.path { list-style:none; display:grid; grid-template-columns:minmax(0,1fr); gap:10px; padding:0; margin:0 0 2.6em; counter-reset:step; }
.article-rhythm ol.path li { counter-increment:step; position:relative; margin:0; padding:16px 18px 16px 56px; background:var(--orange-100); border-radius:3px; font-family:var(--font-display); font-weight:700; font-size:1.02rem; line-height:1.3; }
.article-rhythm ol.path li::before { content:counter(step); position:absolute; left:16px; top:50%; transform:translateY(-50%); width:28px; height:28px; border-radius:50%; background:var(--orange); color:var(--ink); display:flex; align-items:center; justify-content:center; font-size:0.9rem; }
@media (min-width:900px) {
  .article-rhythm ol.path { grid-template-columns:repeat(auto-fit, minmax(0,1fr)); gap:14px; }
  .article-rhythm ol.path li { padding:58px 18px 18px; }
  .article-rhythm ol.path li::before { left:18px; top:16px; transform:none; }
}
.article-rhythm .article-tags { display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:2.4em 0 0; }
.article-rhythm .article-tags li { font-size:0.72rem; line-height:1.4; font-weight:600; color:var(--ink); background:var(--orange-100); padding:5px 10px; border-radius:20px; margin:0; }
.article-rhythm .article-opening__grid { align-items:center; }
.article-rhythm .article-opening__image { aspect-ratio:1/1; align-self:start; }
.article-rhythm .article-opening__image img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.article-rhythm .media-split { display:grid; grid-template-columns:minmax(0,1fr); gap:24px; margin:0 0 2.6em; align-items:center; }
.article-rhythm .media-split__img { position:relative; margin:0; width:100%; aspect-ratio:1/1; border-radius:3px; overflow:hidden; background:var(--white); }
.article-rhythm .media-split__img img, .article-rhythm .media-split__img .placeholder { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.article-rhythm .media-split__img .placeholder { display:flex; align-items:center; justify-content:center; text-align:center; padding:16px; }
.article-rhythm .media-split__text p { font-size:var(--text-body); line-height:1.7; margin:0 0 1.2em; }
.article-rhythm .media-split__text > :last-child { margin-bottom:0; }
@media (min-width:900px) {
  .article-rhythm .media-split { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; }
  .article-rhythm .media-split--rechts .media-split__img { order:2; }
}
.article-hero--rhythm .article-lead { font-size:var(--text-body); line-height:1.7; }
.article-rhythm p.is-lead, .article-rhythm .article-opening__text p, .article-rhythm .article-full p, .article-rhythm .article-full li,
.article-rhythm .article-split p, .article-rhythm .article-split li, .article-rhythm .media-split__text p,
.article-rhythm .infocard p, .article-rhythm .infocard li { font-size:var(--text-body); line-height:1.7; }
img.pub-card__media { width:100%; height:auto; display:block; object-fit:cover; object-position:50% 60%; }
.pub-card { position:relative; transition:border-color .15s; }
.pub-card__body > a[href]:not([href="#"])::after { content:""; position:absolute; inset:0; }
.pub-card__body > a[href]:not([href="#"]):focus-visible { outline:none; }
.pub-card__body > a[href]:not([href="#"]):focus-visible::after { outline:2px solid var(--ink); outline-offset:-2px; }
.pub-card:has(> .pub-card__body > a[href]:not([href="#"])) { cursor:pointer; }
.pub-card:has(> .pub-card__body > a[href]:not([href="#"])):hover { border-color:var(--ink); }
.pub-card:has(> .pub-card__body > a[href]:not([href="#"])):hover h3 { text-decoration:underline; text-underline-offset:3px; }
.article-rhythm .article-opening__grid .article-opening__image { aspect-ratio:3/2; }
.post-search { margin:0 0 24px; display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px; }
.post-search[hidden], .pub-empty[hidden] { display:none; }
.post-search input { width:100%; flex:0 1 calc(50% - 14px); min-width:260px; max-width:none; box-sizing:border-box; font-family:inherit; font-size:var(--text-body); color:var(--ink); background:var(--white); border:1.5px solid var(--pigeon); border-radius:3px; padding:10px 14px; }
.post-search input:focus { outline:none; border-color:var(--orange-deep); }
.pub-empty { font-size:var(--text-body); color:var(--pigeon-deep); margin:0; }
.article-rhythm .media-split__img.is-flow,
.article-rhythm .article-opening__grid .article-opening__image.is-flow { aspect-ratio:auto; overflow:visible; }
.article-rhythm .media-split__img.is-flow img { position:static; inset:auto; display:block; width:100%; height:auto; aspect-ratio:1/1; border-radius:3px; }
.article-rhythm .article-opening__grid .article-opening__image.is-flow img { position:static; inset:auto; display:block; width:100%; height:auto; aspect-ratio:3/2; border-radius:3px; object-fit:cover; }
.pub-card__tags { display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:auto 0 0; position:relative; z-index:1; }
.pub-card__body > a + .pub-card__tags { margin-top:auto; padding-top:10px; }
.pub-card__tags li { font-size:0.72rem; line-height:1.4; font-weight:600; color:var(--ink); background:var(--off-white); border:1.5px solid var(--pigeon); padding:4px 10px; border-radius:20px; margin:0; }
.post-filter { display:grid; grid-template-columns:repeat(4, 8rem); gap:10px; margin-left:auto; }
@media (max-width:900px) {
  .post-filter { grid-template-columns:repeat(2, 1fr); margin-left:0; width:100%; }
}
.post-filter__pill { font:inherit; font-size:0.78rem; line-height:1.4; font-weight:600; color:var(--ink); background:var(--white); border:1.5px solid var(--pigeon); padding:6px 0; text-align:center; border-radius:20px; cursor:pointer; transition:background .15s,color .15s,border-color .15s; }
.post-filter__pill:hover { border-color:var(--ink); }
.post-filter__pill[aria-pressed="true"] { background:var(--ink); color:var(--white); border-color:var(--ink); }
.post-filter__pill:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
/* === BLOG:END === */

/* === SIDETAB:START === Zettel rechts: klein = orangefarbener Streifen, Hover = Zettel wird nach links herausgezogen (Streifen und Box gleich hoch) */
.sidetab { --on-orange: var(--ink); --tab-w: 46px; position: fixed; right: 0; top: 50%; z-index: 1500; display: flex; align-items: stretch; transform: translate(calc(100% - var(--tab-w)), -50%); transition: transform .9s cubic-bezier(.22, .8, .3, 1); }
.sidetab:hover, .sidetab:focus-within, .sidetab.is-open { transform: translate(0, -50%); }
.sidetab__handle { flex: none; width: var(--tab-w); margin: 0; padding: 0; border: 0; border-radius: 0; background: var(--orange); color: var(--on-orange); font-family: var(--font-display); font-weight: 700; font-size: .95rem; letter-spacing: .04em; line-height: 1; cursor: pointer; writing-mode: vertical-rl; text-orientation: mixed; white-space: nowrap; display: flex; align-items: center; justify-content: center; }
.sidetab__handle:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; }
.sidetab__panel { box-sizing: border-box; width: 360px; max-width: calc(100vw - var(--tab-w) - 12px); padding: 28px 28px 26px; background: var(--white); border: 1.5px solid var(--pigeon); border-left: 0; display: flex; flex-direction: column; justify-content: center; }
.sidetab__panel .eyebrow { margin-bottom: 12px; }
.sidetab__title { font-size: var(--text-h2); margin: 0 0 10px; }
.sidetab__panel .popup__text { margin: 0 0 22px; }
.sidetab__panel .popup__ctas { gap: 10px; }
.sidetab__panel .btn { padding: 13px 10px; text-align: center; }
.sidetab__panel .btn--primary { color: var(--on-orange); }
@media (max-width: 640px) {
  .sidetab { --tab-w: 42px; }
  .sidetab__handle { font-size: .88rem; }
  .sidetab__panel { padding: 22px 20px 20px; }
  .sidetab__panel .popup__ctas { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .sidetab { transition: none; } }
@media print { .sidetab { display: none; } }
/* === SIDETAB:END === */


/* ===== Decision-Karten (Startseite DE) ===== */
.decide__grid { display: grid; gap: 24px; max-width: var(--max-width); margin: 0 auto; }
@media (min-width: 820px) { .decide__grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
.decide__card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--pigeon); padding: 32px; }
.decide__tag { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--pigeon-deep); margin: 0 0 12px; }
.decide__card h3 { font-family: var(--font-display); font-size: 1.55rem; line-height: 1.2; margin: 0 0 16px; hyphens: none; -webkit-hyphens: none; }
.decide__price { margin: 8px 0 32px; color: var(--ink); line-height: 1; }
.decide__price strong { font-family: var(--font-display); font-size: clamp(3rem, 7vw, 4.5rem); font-weight: 700; letter-spacing: -.02em; }
.decide__from, .decide__unit { font-size: 1rem; color: var(--pigeon-deep); }
.decide__cta { display: block; text-align: center; margin-top: auto; }
.decide__card .btn--outline:hover { background: var(--orange); border-color: var(--orange); color: var(--ink); }
@media (max-width: 520px) { .decide__card { padding: 22px; } }

/* === Keks-Popup (nur Startseite, speichert nichts) ===
   Der Keks (Canvas, js/cookie-popup.js) erscheint oben rechts, bricht und kruemelt; dann blendet das Feld "Keine Cookies" ein
   und verschwindet mit den letzten Kruemeln. */
.cookie-pop { position:fixed; top:124px; right:24px; z-index:96; width:auto; min-height:0; padding:14px 26px;
  display:flex; flex-direction:column; justify-content:center;
  background:var(--white); border:1.5px solid var(--pigeon); border-radius:3px; box-shadow:0 12px 32px rgba(26,26,24,0.12);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .5s ease, transform .5s cubic-bezier(0.22,1,0.36,1), visibility 0s linear .5s; }
.cookie-pop.is-visible { opacity:1; visibility:visible; transform:none; transition:opacity .5s ease, transform .5s cubic-bezier(0.22,1,0.36,1), visibility 0s; }
.cookie-pop__title { font-family:var(--font-display); font-weight:700; font-size:1.1rem; line-height:1.25; margin:0; white-space:nowrap; color:var(--ink); }
@media (max-width:600px) { .cookie-pop { top:104px; right:16px; } }
@media (prefers-reduced-motion: reduce) { .cookie-pop, .cookie-pop.is-visible { transition:opacity .2s ease; transform:none; } }



/* === Kontakt-Popup "Partner werden" (Dialog, Formularfelder) === eckig, ohne Schatten, Rahmen statt Schlagschatten */
.form-honeypot { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.kdialog { border:1.5px solid var(--ink); border-radius:0; padding:30px 26px 26px; width:calc(100% - 32px); max-width:560px; max-height:90vh; overflow:auto; background:var(--white); color:var(--graphite); }
.kdialog::backdrop { background:rgba(26,26,24,0.55); }
.kdialog h2 { font-size:var(--text-h2); margin:0 28px 8px 0; }
.kdialog__intro { font-size:0.92rem; margin:0 0 20px; }
.kdialog__close { position:absolute; top:10px; right:12px; width:36px; height:36px; border:0; background:transparent; font-size:1.8rem; line-height:1; cursor:pointer; color:var(--ink); }
.kdialog__close:hover { color:var(--pigeon-deep); }
.kdialog .form-field { margin-bottom:16px; }
.kdialog .form-field label { display:block; font-weight:600; color:var(--ink); margin-bottom:6px; font-size:0.9rem; }
.kdialog .form-field input[type="text"],
.kdialog .form-field input[type="email"],
.kdialog .form-field textarea {
  width:100%; padding:12px 14px; border:1.5px solid var(--pigeon); border-radius:0;
  font-family:var(--font-body); font-size:0.95rem; color:var(--graphite); background:var(--white);
}
.kdialog .form-field textarea { min-height:110px; resize:vertical; }
.kdialog .form-field input:focus, .kdialog .form-field textarea:focus { outline:2px solid var(--ink); outline-offset:1px; border-color:var(--ink); }
.kdialog .form-consent { display:flex; align-items:flex-start; gap:10px; margin:18px 0 20px; font-size:0.85rem; }
.kdialog .form-consent input { margin-top:3px; flex-shrink:0; }
.kdialog .form-consent a { text-decoration:underline; }
.kdialog button.btn { cursor:pointer; font-family:inherit; }
.kd-note { display:none; padding:14px 18px; border:1.5px solid var(--pigeon); margin:0 0 18px; font-size:0.9rem; }
.kd-note--success { background:var(--orange-100); border-color:var(--orange-300); color:var(--ink); }
.kd-note--error { background:var(--white); border-color:#B3261E; color:#B3261E; }
.kdialog.is-ok .kd-note--success, .kdialog.is-error .kd-note--error { display:block; }
.kdialog.is-ok .kdialog__form, .kdialog.is-ok .kdialog__intro { display:none; }