/* CRM implementation: the SYNQ hero, followed by one continuous reading grid. */
.route-crm-einfuehrung{--implementation-space:88px;--implementation-gap:72px}
.implementation-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:48px;align-items:center;min-height:660px;padding-block:56px 72px}
.implementation-hero h1{font-size:clamp(46px,4.5vw,68px);font-weight:350;line-height:1.08;letter-spacing:-.035em;max-width:20ch;margin:0 0 32px;text-wrap:balance}
.implementation-hero .lead{font-size:18px;line-height:1.75;max-width:56ch;margin:0 0 32px}
.implementation-hero .lead p{margin:0}
.implementation-hero-art{margin:0;min-width:0;aspect-ratio:1}
.implementation-hero-art img{display:block;width:100%;height:100%;object-fit:contain}
/* Editorial body: shared type and spacing, distinct compositions per subject. */
.implementation-intro{border-top:1px solid var(--line);padding-block:48px}
.implementation-intro .article-meta{display:flex;gap:24px;margin:0 0 24px;font-size:13px}
.implementation-intro .prose{max-width:900px;font-size:clamp(20px,2.1vw,28px);line-height:1.5;color:var(--text)}
.implementation-intro p{margin:0}
.implementation-index{padding-bottom:32px}
.implementation-index .toc{position:static;margin:0;padding:0;max-width:none}
.implementation-index details{border-block:1px solid var(--line)}
.implementation-index summary{cursor:pointer;min-height:56px;padding-block:16px;font-size:16px;color:var(--text)}
.implementation-index .toc nav{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;padding-bottom:24px}
.implementation-index .toc a{display:flex;align-items:center;min-height:44px;padding:12px 0;font-size:15px;line-height:1.5}
.implementation-reading{padding-bottom:24px}
.implementation-chapter{padding-block:104px;border-top:1px solid var(--line);scroll-margin-top:32px;min-width:0}
.implementation-chapter h2{font-size:clamp(32px,3.4vw,48px);line-height:1.14;letter-spacing:-.03em;font-weight:400;text-wrap:balance;max-width:24ch;margin:0 0 32px}
.impl-chapter-copy{min-width:0}
.implementation-chapter .prose{font-size:18px;line-height:1.8;min-width:0;max-width:none}
.implementation-chapter .prose p{margin:0 0 24px;max-width:72ch}
.implementation-chapter .prose p:last-child{margin-bottom:0}
.implementation-chapter .prose h3{font-size:25px;line-height:1.3;font-weight:450;margin:40px 0 18px;text-wrap:balance}
.implementation-chapter figure{margin:0;min-width:0}
.implementation-chapter figcaption{font-size:14px;line-height:1.6;color:var(--muted)}
.implementation-chapter .table-scroll{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-color:var(--input) var(--surface);margin:28px 0}
.implementation-chapter table{width:100%;min-width:540px;border-collapse:collapse;font-size:15px;line-height:1.65;text-align:left}
.implementation-chapter th,.implementation-chapter td{padding:20px;border:0;border-bottom:1px solid var(--line);vertical-align:top;word-break:normal;overflow-wrap:normal}
.implementation-chapter th{font-weight:500;color:var(--text)}
.implementation-chapter thead th{font-size:14px;background:var(--surface)}
.implementation-chapter td{color:var(--muted)}
.implementation-chapter :is(button,input):focus-visible{outline:2px solid var(--accent);outline-offset:5px}
.impl-overview .prose{grid-template-rows:min-content 1fr;align-content:start;display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:24px 72px;align-items:start}
.impl-overview .prose>.table-scroll{grid-column:2;grid-row:1 / span 2;margin:0}
.impl-overview .prose>p{grid-column:1}
.impl-overview table td:first-child{width:36%;color:var(--text);font-size:18px}
.impl-workflow,.impl-fields,.impl-fit,.impl-testing,.impl-adoption,.impl-budget,.impl-preparation{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px;align-items:center}
/* The enquiry becomes a sequence of owned actions. */
figure.impl-workflow{display:block;padding:40px 44px;background:var(--surface);border-radius:12px}
figure.impl-workflow figcaption{margin-bottom:32px}
figure.impl-workflow ol{list-style:none;margin:0;padding:0}
figure.impl-workflow li{position:relative;padding:0 0 36px 36px;border-left:1px solid var(--line)}
figure.impl-workflow li:last-child{padding-bottom:0;border-left-color:transparent}
figure.impl-workflow li:before{content:'';position:absolute;left:-5px;top:9px;width:9px;height:9px;background:var(--accent);border-radius:50%}
figure.impl-workflow strong{display:block;font-size:32px;font-weight:400;letter-spacing:-.025em}
figure.impl-workflow span{display:block;font-size:16px;color:var(--muted);margin-top:8px}
.impl-fields{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:start}
.impl-record{position:sticky;top:40px;padding:36px;background:var(--surface);border-radius:12px}
.impl-record figcaption{margin-bottom:36px}
.impl-record-title{font-size:34px;line-height:1.2;color:var(--accent);margin-bottom:32px;letter-spacing:-.025em}
.impl-record dl{margin:0}
.impl-record dl>div{padding:18px 0;border-top:1px solid var(--line)}
.impl-record dt{font-size:16px;color:var(--text);margin-bottom:6px}
.impl-record dd{margin:0;font-size:14px;line-height:1.6;color:var(--muted)}
.impl-record>p{margin:24px 0 0;font-size:17px;line-height:1.5}
.impl-ownership .prose>p{max-width:850px}
.impl-ownership .article-visual{margin:40px 0}
.impl-ownership .article-visual .table-scroll{margin-bottom:16px}
.impl-ownership table{min-width:640px}
.impl-ownership table tbody th{font-size:20px;width:29%}
.impl-handover{display:grid;grid-template-columns:1fr 120px 1fr;align-items:center;padding:32px 40px;background:var(--surface);border-radius:12px;margin-top:40px!important}
.impl-handover div>span{display:block;color:var(--muted);font-size:15px;margin-bottom:12px}
.impl-handover strong{font-size:26px;line-height:1.25;font-weight:400}
.impl-handover-link{height:1px;background:var(--accent);margin-inline:24px;position:relative}
.impl-handover-link:after{content:'';width:8px;height:8px;border-top:1px solid var(--accent);border-right:1px solid var(--accent);transform:rotate(45deg);position:absolute;right:0;top:-4px}
.impl-handover figcaption{grid-column:1/-1;margin-top:28px}
.impl-fit .impl-chapter-copy{grid-column:2;grid-row:1}
.impl-decisions{grid-column:1;grid-row:1}
.impl-decisions figcaption{font-size:22px;color:var(--text);margin-bottom:28px}
.impl-decisions ol{list-style:none;padding:0;margin:0}
.impl-decisions li{padding:28px 0;border-top:1px solid var(--line)}
.impl-decisions strong{display:block;font-size:clamp(32px,3vw,44px);font-weight:350;letter-spacing:-.03em;margin-bottom:12px}
.impl-decisions li:last-child strong{color:var(--accent)}
.impl-decisions span{font-size:16px;line-height:1.65;display:block;max-width:32ch;color:var(--muted)}
.impl-testing{align-items:start}
.impl-test{margin:12px 0 0;padding:36px;border:1px solid var(--line);border-radius:12px;min-width:0}
.impl-test legend{font-size:23px;padding:0 12px;max-width:100%;line-height:1.35}
.impl-test p{font-size:18px;line-height:1.7;color:var(--muted);margin:0 0 28px}
.impl-test label{display:flex;align-items:center;gap:16px;padding:18px 0;font-size:18px;cursor:pointer}
.impl-test input{width:22px;height:22px;flex-shrink:0;accent-color:var(--accent);cursor:pointer}
.impl-test label:has(:checked){color:var(--accent)}
.impl-test small{display:block;color:var(--muted);font-size:13px;line-height:1.6;margin-top:28px}
.impl-migration .prose{grid-template-rows:auto min-content min-content 1fr;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 80px}
.impl-migration .prose>p{grid-column:2}
.impl-migration .prose>p:first-child{grid-column:1/-1;max-width:850px;margin-bottom:24px}
.impl-migration .article-visual{grid-column:1;grid-row:2/span 3;padding:32px;background:var(--surface);border-radius:12px;align-self:start}
.impl-migration ol{list-style:none;counter-reset:migration;padding:0;margin:0}
.impl-migration li{position:relative;counter-increment:migration;padding:0 0 28px 44px;font-size:16px;line-height:1.7}
.impl-migration li:before{content:counter(migration);position:absolute;left:0;top:0;color:var(--accent);font-size:22px}
.impl-migration li strong{font-weight:500;color:var(--text)}
.impl-migration figcaption{border-top:1px solid var(--line);padding-top:20px}
.impl-adoption .impl-chapter-copy{grid-column:2;grid-row:1}
.impl-motion-button{margin-top:24px;min-height:44px;background:transparent;color:var(--text);border:1px solid var(--line);border-radius:24px;padding:10px 20px;font:inherit;font-size:14px;cursor:pointer}
.impl-motion-button:hover{border-color:var(--accent)}
figure.impl-budget{display:block;text-align:center}
.impl-budget img{display:block;width:100%;height:310px;object-fit:contain;margin-bottom:24px}
.impl-budget figcaption{font-size:24px;color:var(--text);margin-bottom:24px}
.impl-budget dl{display:grid;grid-template-columns:1fr 1fr;gap:24px;text-align:left;margin:0}
.impl-budget dt{font-size:20px;margin-bottom:12px}
.impl-budget dd{margin:0;color:var(--muted);font-size:15px;line-height:1.65}
.impl-preparation{align-items:center}
.impl-case{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:36px;min-width:0}
.impl-case>span{font-size:13px;color:var(--muted)}
.impl-case h3{font-size:34px;font-weight:400;line-height:1.2;letter-spacing:-.025em;margin:28px 0 20px;text-wrap:balance}
.impl-case p{font-size:17px;line-height:1.7;color:var(--muted);margin:0 0 32px}
.impl-case>strong{display:block;font-size:20px;font-weight:400;line-height:1.4;color:var(--accent)}
.route-crm-einfuehrung .guide-home{padding-block:32px 56px}
.route-crm-einfuehrung .closing{padding:64px;background:var(--surface);border-radius:12px;margin-block:24px 80px;border:0}
.route-crm-einfuehrung .closing h2{font-size:clamp(32px,3.5vw,50px);font-weight:350;letter-spacing:-.025em}
@media(max-width:1100px){
 .implementation-hero{gap:28px;min-height:600px}
 .implementation-chapter{padding-block:80px}
 .impl-overview .prose{gap:24px 40px;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
 .impl-workflow,.impl-fields,.impl-fit,.impl-testing,.impl-adoption,.impl-budget,.impl-preparation,.impl-migration .prose{gap:48px}
 .impl-overview table{min-width:460px}
 .impl-record{padding:28px}
 .impl-case{padding:28px}
}
@media(max-width:899px){
 .implementation-hero{grid-template-columns:1fr;padding-block:40px 48px;gap:24px;min-height:0}
 .implementation-hero h1{font-size:54px;max-width:23ch}
 .implementation-hero .lead{max-width:65ch}
 .implementation-hero-art{width:min(100%,360px);justify-self:center}
 .implementation-chapter h2{font-size:38px;max-width:28ch}
 .impl-overview .prose,.impl-workflow,.impl-fields,.impl-fit,.impl-testing,.impl-adoption,.impl-budget,.impl-preparation,.impl-migration .prose{grid-template-columns:1fr;grid-template-rows:none;gap:40px}
 .impl-overview .prose>.table-scroll,.impl-overview .prose>p,.impl-migration .prose>p,.impl-migration .article-visual,.impl-fit .impl-chapter-copy,.impl-decisions,.impl-adoption .impl-chapter-copy,.impl-magnet{grid-column:auto;grid-row:auto}
 .impl-record{position:static;max-width:600px;width:100%}
 .impl-handover{grid-template-columns:1fr 72px 1fr;padding:28px}
 .impl-handover strong{font-size:22px}
 .impl-handover-link{margin-inline:14px}
 .impl-magnet{max-width:600px;width:100%;justify-self:center}
 .impl-budget img{height:280px}
 .route-crm-einfuehrung .closing{padding:40px}
}
@media(max-width:599px){
 .implementation-hero{padding-block:28px 32px;gap:20px}
 .implementation-hero h1{font-size:40px;line-height:1.12;margin-bottom:24px}
 .implementation-hero .lead{font-size:17px;line-height:1.75;margin-bottom:24px}
 .implementation-hero-art{width:min(100%,240px)}
 .implementation-intro{padding-block:32px}
 .implementation-intro .article-meta{flex-wrap:wrap;gap:12px;font-size:12px}
 .implementation-index{padding-bottom:24px}
 .implementation-index .toc nav{grid-template-columns:1fr;gap:0}
 .implementation-index .toc a{font-size:14px}
 .implementation-chapter{padding-block:56px}
 .implementation-chapter h2{font-size:32px;line-height:1.2;margin-bottom:24px}
 .implementation-chapter .prose{font-size:17px}
 .implementation-chapter .prose h3{font-size:23px;margin-top:32px}
 .implementation-chapter th,.implementation-chapter td{padding:16px;font-size:14px}
 .impl-overview table td:first-child,.impl-ownership table tbody th{font-size:17px}
 figure.impl-workflow{padding:28px}
 figure.impl-workflow strong{font-size:28px}
 .impl-record-title{font-size:30px}
 .impl-handover{grid-template-columns:1fr;gap:20px;padding:24px}
 .impl-handover-link{width:1px;height:28px;margin-left:12px}
 .impl-handover-link:after{top:auto;bottom:0;right:-4px;transform:rotate(135deg)}
 .impl-handover figcaption{margin-top:0}
 .impl-test{padding:24px 20px}
 .impl-test legend{font-size:21px}
 .impl-test label{font-size:17px}
 .impl-migration .article-visual{padding:24px}
 .impl-migration li{padding-left:32px}
 .impl-budget img{height:240px}
 .impl-budget dl{grid-template-columns:1fr;gap:24px}
 .impl-case{padding:24px}
 .impl-case h3{font-size:28px;margin-top:24px}
 .impl-case>strong{font-size:18px}
 .route-crm-einfuehrung .closing{padding:28px;margin-bottom:48px}
}
@media(max-width:359px){.implementation-hero h1{font-size:36px}.implementation-chapter h2{font-size:28px}}
/* Original React Bits components, adapted only for SYNQ sizing and controls. */
.impl-react-mount:empty{display:none}
.is-ready>.impl-react-fallback{display:none}
.impl-magnet{grid-column:1;grid-row:1;align-self:center}
.impl-magnet-heading{font-size:30px;line-height:1.25;letter-spacing:-.025em;max-width:22ch;margin:0 0 24px}
.impl-magnet-art{padding:16px 0}
.magnetLines-container{display:grid;justify-items:center;align-items:center}
.magnetLines-container span{display:block;transform-origin:center;transform:rotate(var(--rotate));border-radius:2px;transition:transform .3s ease-out}
.impl-magnet-choices{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.impl-magnet-choices button{font:inherit;font-size:14px;min-height:44px;padding:10px 14px;border-radius:24px;border:1px solid var(--line);background:transparent;color:var(--text);cursor:pointer}
.impl-magnet-choices button[aria-pressed=true]{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.impl-magnet-answer{font-size:20px;line-height:1.5;min-height:3em;margin:24px 0;color:var(--text)}
.impl-magnet .impl-react-fallback{display:grid;gap:20px;font-size:28px;margin-bottom:32px;color:var(--accent)}
.impl-magnet.is-ready .impl-react-fallback{display:none}
.impl-swap{min-width:0;align-self:center}
.impl-swap-stage{height:460px;position:relative;overflow:hidden;isolation:isolate}
.impl-swap .card-swap-container{position:absolute;left:43%;top:58%;transform:translate(-50%,-50%);perspective:900px}
.impl-swap .card{position:absolute;left:50%;top:50%;border-radius:12px;border:1px solid var(--line);background:var(--surface);padding:28px;transform-style:preserve-3d;backface-visibility:hidden;overflow:hidden}
.impl-swap .card>span{font-size:13px;color:var(--muted)}
.impl-swap .card h3{font-size:28px;font-weight:400;line-height:1.2;letter-spacing:-.025em;margin:24px 0 18px}
.impl-swap .card p{font-size:16px;line-height:1.6;color:var(--muted);margin:0 0 24px}
.impl-swap .card>strong{font-size:19px;font-weight:400;line-height:1.4;display:block;color:var(--accent)}
.impl-swap-controls{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:24px}
.impl-swap-controls .impl-motion-button{margin:0}
.impl-swap-status{display:block;min-height:3em;font-size:14px;color:var(--muted);margin:20px 0 0;line-height:1.5}
.impl-swap figcaption{margin-top:20px}
.impl-swap .impl-react-fallback{display:grid;gap:20px}
.impl-swap.is-ready .impl-react-fallback{display:none}
@media(max-width:899px){.impl-magnet{grid-column:auto;grid-row:auto;width:100%;max-width:600px;justify-self:center}.impl-swap{width:100%;max-width:600px;justify-self:center}}
@media(max-width:599px){.impl-magnet-heading{font-size:28px}.impl-swap .card{padding:24px}.impl-swap .card h3{font-size:25px}.impl-swap .card>strong{font-size:17px}.impl-swap .card p{font-size:15px}.impl-swap-controls .button{font-size:14px;padding:12px 18px}.impl-magnet-choices button{font-size:13px;padding:10px 12px}.impl-swap .card-swap-container{left:42%}}
@media(prefers-reduced-motion:reduce){.magnetLines-container span{transition:none}}