/* MOTION V2 – Leitidee «Fuge»: 15°-Schnitt, zwei Hälften, die sich finden.
   Nur transform, opacity und clip-path. Ohne JavaScript, bei reduzierter Bewegung und
   bei «Bewegung pausieren» gilt der ruhige Endzustand. */

/* 1 · Kopfzeile wird beim Scrollen kompakter */
.site-header{transition:transform .45s var(--ease)}
.site-header .brand svg{transform-origin:0 50%;transition:transform .45s var(--ease)}
.mv2 .site-header.is-compact{transform:translate(-50%,-8px)}
.mv2 .site-header.is-compact .brand svg{transform:scale(.9)}

/* 2 · Hero-Visual: geteilter Ring vor einem Raster, das sich an der 15°-Fuge schliesst */
.hero-visual{position:absolute;z-index:0;pointer-events:none;right:7vw;top:50%;width:min(36vw,520px);aspect-ratio:1;transform:translateY(-46%);perspective:900px;color:#a7c7e7}
.hero-visual svg{display:block;width:100%;height:100%;overflow:visible;transform-style:preserve-3d}
.hero-visual .hv-grid{stroke:#a7c7e7;stroke-width:1;opacity:.16;vector-effect:non-scaling-stroke}
.hero-visual .hv-ring{fill:#a7c7e7;fill-opacity:.07;stroke:#a7c7e7;stroke-width:1.2;vector-effect:non-scaling-stroke}
.hero-visual .hv-joint{stroke:#a7c7e7;stroke-width:1;vector-effect:non-scaling-stroke;opacity:.55}
.mv2 #reise .hero-copy{position:relative;z-index:1}
@media(max-width:1099px){.hero-visual{display:none}}
/* mobil kein Visual: klein unter den Buttons wirkte es wie ein Rest (Review) */

/* 3 · Zeilen der H2 in Masken */
.mv2 .h2-line-mask{padding-bottom:.08em;margin-bottom:-.08em}

/* 5 · Leistungen (Auftrag 15): Der ganze Kasten ist ein Link (a::before über die ganze Zeile), rechts nur der
   15°-Strich (a::after, ohne Pfeil), der sich beim Zeigen oder Fokus verlängert und babyblau wird. Der Titel wird
   bewusst nicht verschoben: ein transform auf dem Link würde seine Linkfläche auf den Titel schrumpfen lassen. */
.gesamt .service-list .service-row a:after{content:"";position:absolute;right:14px;top:52px;width:30px;height:1.5px;margin:0;background:#7f9bb5;transform:rotate(-15deg) scaleX(.6);transform-origin:100% 50%;transition:transform .24s var(--ease),background-color .24s}
.gesamt .service-list .service-row:has(a:focus-visible) a:after{background:var(--accent);transform:rotate(-15deg) scaleX(1)}
.mv2 .service-row .service-description{transition:transform .24s var(--ease),color .24s}
.mv2 .service-row:has(a:focus-visible) .service-description{transform:translateY(3px);color:#dbe6f0}
@media(hover:hover) and (pointer:fine){
 .gesamt .service-list .service-row:hover a:after{background:var(--accent);transform:rotate(-15deg) scaleX(1)}
 .mv2 .service-row:hover .service-description{transform:translateY(3px);color:#dbe6f0}
}
@media(max-width:720px){.gesamt .service-list .service-row a:after{right:2px;top:40px;width:22px}}
/* Menü (Handy-Test des Inhabers 19.10.2026): keine Striche und Pfeile in den Menülisten; alle Einträge gleich mit einer feinen Linie getrennt. */
.service-dropdown a svg.arrow,.mobile-services a svg.arrow{display:none}
.service-dropdown{padding:8px 10px}
.service-dropdown a{align-items:center;min-height:44px;padding:10px 12px;border-radius:8px;transition:background-color .2s var(--ease),color .2s}
.service-dropdown a+a{background:linear-gradient(#ffffff17,#ffffff17) 50% 0/calc(100% - 24px) 1px no-repeat}
.service-dropdown a:hover+a{background-image:none}
.service-dropdown a:hover{background:#2b4157}
.service-dropdown a:hover{color:#fff}
/* Mobilmenü: liegt genau über der Kopfzeile, ✕ an der Stelle des Menü-Icons; Tippen daneben, Esc oder ein Link schliesst. */
.menu-toggle,.menu-close{display:inline-grid;place-items:center;width:48px;height:48px;min-height:48px;margin:0 -12px 0 0;padding:0;border:0;border-radius:12px;background:transparent;color:var(--text);cursor:pointer}
.menu-toggle svg,.menu-close svg{display:block;width:24px;height:24px}
.menu-toggle:hover,.menu-close:hover{background:#ffffff12}
.menu-toggle:focus-visible,.menu-close:focus-visible{outline-offset:0}
@media(min-width:721px){.menu-toggle{display:none}}
#mobilmenue{margin:15px auto auto;width:calc(100% - 32px);max-width:560px;max-height:calc(100svh - 30px);padding:0 18px 20px;border-radius:17px;border-color:#5d7387;overflow:auto;overscroll-behavior:contain}
#mobilmenue .menu-kopf{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;min-height:64px;background:#17232f}
#mobilmenue .menu-titel{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
#mobilmenue nav>a:not(.button),#mobilmenue nav>details>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:54px;padding:0 4px;border-top:1px solid #ffffff1c;font-size:17px;color:var(--text)}
#mobilmenue nav>details>summary{list-style:none;cursor:pointer}
#mobilmenue nav>details>summary::-webkit-details-marker{display:none}
#mobilmenue summary .chevron{flex:none;width:18px;height:18px;color:var(--accent);transition:transform .22s var(--ease)}
#mobilmenue details[open]>summary .chevron{transform:rotate(180deg)}
#mobilmenue .mobile-services{padding:0 0 6px 14px}
#mobilmenue .mobile-services a{display:flex;align-items:center;min-height:46px;padding:0 4px;border-top:1px solid #ffffff10;font-size:15px;color:#c9d4df}
#mobilmenue a[aria-current="page"]{color:var(--accent)}
#mobilmenue nav>a.button{display:flex;width:100%;min-height:52px;margin-top:22px;padding:0 22px;justify-content:center;gap:14px;font-size:15px}
#mobilmenue nav>a.button svg.arrow{width:20px;height:20px}
html:has(#mobilmenue[open]){overflow:hidden}
@media(prefers-reduced-motion:no-preference){
 #mobilmenue[open]{animation:menu-auf .26s var(--ease)}
 #mobilmenue[open]::backdrop{animation:menu-blende .26s ease-out}
 .motion-paused #mobilmenue[open],.motion-paused #mobilmenue[open]::backdrop{animation:none}
}
@keyframes menu-auf{from{opacity:0;transform:translateY(-10px)}}
@keyframes menu-blende{from{opacity:0}}

/* 9 · Haupt-Button: Fuge im Pfeil schliesst sich */
.button.primary .arrow .shaft-a{transition:transform .3s var(--ease)}
.button.primary .arrow .shaft-a{transform:translateX(-2px)}
.button.primary:focus-visible .arrow .shaft-a{transform:none}
@media(hover:hover) and (pointer:fine){.button.primary:hover .arrow .shaft-a{transform:none}}
.mv2 .button.primary{will-change:transform}

/* 11 · Mikro-Interaktionen: Unterstreichung läuft ein, Fokus zieht sich zusammen */
.text-link{position:relative}
.text-link:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent);transform:scaleX(0) skewX(-15deg);transform-origin:0 50%;transition:transform .26s var(--ease)}
.text-link:focus-visible:after{transform:scaleX(1) skewX(-15deg)}
@media(hover:hover) and (pointer:fine){.text-link:hover:after{transform:scaleX(1) skewX(-15deg)}}
.needs .text-link:after{background:currentColor}
a:focus-visible,button:focus-visible,summary:focus-visible,select:focus-visible{transition:outline-offset .25s var(--ease)}
@starting-style{a:focus-visible,button:focus-visible,summary:focus-visible,select:focus-visible{outline-offset:12px}}

/* Variante B · 6 Anzeige der Anliegen-Schritte */
.need-meter{display:flex;align-items:center;gap:6px;margin-top:34px}
.need-meter i{display:block;width:26px;height:2px;background:#71859b55;transform-origin:0 50%;transition:background .3s}
.need-meter i.on{background:var(--accent)}
/* Variante B · 12 Lichtfläche */
.mv2-light{position:absolute;z-index:0;pointer-events:none;width:70vw;height:70vw;max-width:1000px;max-height:1000px;right:-18vw;top:-22vw;border-radius:50%;background:radial-gradient(closest-side,#a7c7e714,#a7c7e700);will-change:transform}
/* 4 · Fugenlinie an den Abschnittskanten */
.fuge-rule{position:absolute;top:0;left:7vw;right:7vw;height:1px;pointer-events:none}
.fuge-rule .fr-line{position:absolute;inset:0 14px 0 0;background:#a7c7e7;opacity:.45;transform-origin:0 50%}
.fuge-rule .fr-cut{position:absolute;right:0;top:0;width:18px;height:1px;background:#a7c7e7;transform-origin:0 50%;rotate:-15deg}
.gesamt .collab{border-top:0}
@media(max-width:720px){.fuge-rule{left:24px;right:24px}}

/* Unterseiten · Fugenlinie ersetzt die Abschnittskante der Lesespalte */
.reader-section .fuge-rule{left:0;right:0}
.reader-section:has(> .fuge-rule){border-top-color:transparent}
/* Unterseiten · 7 Prozess-Spur: der aktive Schritt zeigt sich am Punkt, die Spur trägt den Fortschritt */
.has-process .process-step:before{background:#4e6680;transition:background .24s,transform .24s var(--ease)}
.has-process .process-step.is-current{border-left-color:#40576d}
.has-process .process-step.is-current:before{background:var(--accent);transform:scale(1.6)}
.reader-copy.has-process{position:relative}
.process-track{position:absolute;left:0;width:1px;background:var(--accent);transform-origin:50% 0;z-index:1;pointer-events:none}
/* Unterseiten · 11 Unterstreichung der Textlinks im Kopf und in der Lesespalte (::after trägt den Pfeil) */
.service-hero .cta-row a,.reader-copy .cta-row a,[data-copy="P11-b09"] a{position:relative}
.service-hero .cta-row a:before,.reader-copy .cta-row a:before,[data-copy="P11-b09"] a:before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent);transform:scaleX(0) skewX(-15deg);transform-origin:0 50%;transition:transform .26s var(--ease)}
.service-hero .cta-row a:focus-visible:before,.reader-copy .cta-row a:focus-visible:before,[data-copy="P11-b09"] a:focus-visible:before{transform:scaleX(1) skewX(-15deg)}
@media(hover:hover) and (pointer:fine){.service-hero .cta-row a:hover:before,.reader-copy .cta-row a:hover:before,[data-copy="P11-b09"] a:hover:before{transform:scaleX(1) skewX(-15deg)}}

/* Ruhiger Endzustand */
@media(prefers-reduced-motion:reduce){
 .site-header,.site-header .brand svg,.text-link:after,.service-row *,.service-hero .cta-row a:before,.reader-copy .cta-row a:before,[data-copy="P11-b09"] a:before,.has-process .process-step:before,a:focus-visible,button:focus-visible,summary:focus-visible,select:focus-visible{transition:none!important}
 .hero-visual *{transform:none!important}
}
.motion-paused .text-link:after,.motion-paused .site-header,.motion-paused .site-header .brand svg,.motion-paused .service-hero .cta-row a:before,.motion-paused .reader-copy .cta-row a:before,.motion-paused [data-copy="P11-b09"] a:before,.motion-paused :focus-visible{transition:none}
/* Lichtfleck der Leistungsreise ragt bewusst über den rechten Rand: an der bildschirmbreiten Bühne horizontal abschneiden, damit das Dokument nicht breiter wird als der Bildschirm (Auftrag 26, T1) */
#reise .flow-stage{overflow-x:clip}
/* KI & Automation «Folgt in Kürze» (Auftrag 32): Eintrag sichtbar, mässig ausgegraut, kein Link, keine Hover-Wirkung; Kennzeichen als ruhige Pille */
.leistung-bald{color:#9aa7b4;cursor:default;text-decoration:none}
.leistung-bald .bald{display:inline-block;margin-left:10px;padding:2px 9px;border:1px solid #5d7387;border-radius:999px;font:500 11px/1.5 Inter,sans-serif;letter-spacing:.03em;color:#c3cdd7;white-space:nowrap;vertical-align:middle}
.service-dropdown a.leistung-bald{justify-content:flex-start;gap:0}
.service-dropdown a.leistung-bald:hover{background:none;color:#9aa7b4}
.service-dropdown a.leistung-bald:hover+a{background-image:linear-gradient(#ffffff17,#ffffff17)}
#mobilmenue .mobile-services a.leistung-bald{color:#9aa7b4}
.footer-services .leistung-bald .bald{margin-left:8px;font-size:10px}
.gesamt .service-row .leistung-bald{color:#9aa7b4}
.gesamt .service-row:has(.leistung-bald) .service-description{color:#97a4b1}
.gesamt .service-list .service-row .leistung-bald:after{content:none}
.gesamt .service-row:has(.leistung-bald):hover{background:none}
.gesamt .service-row:has(.leistung-bald):after{transform:scaleX(0)!important}
.mv2 .service-row:has(.leistung-bald):hover .service-description{transform:none;color:#97a4b1}
.gesamt .service-row .leistung-bald .bald{font-size:12px;margin-left:14px;vertical-align:.35em}