/* FehabLabs Paket C (4. Oktober 2026): Angebot (.ang-*), Team (.team-*), Kontakt (.inq-*), Rechtsseiten (.legal*), Weiterleitungen (.redir*).
   Baut auf den Tokens und Komponenten in dist/site.css auf; Paket A2 hängt diese Datei dort ein. Bewegung nur mit Endzustand für
   prefers-reduced-motion und html.motion-paused (Stopp-Block am Ende). */

/* ---------------------------------------------------------------- Angebot */
.ang-steps{list-style:none;margin:0;padding:0;--ang-in:clamp(48px,7vw,112px);--ang-pad:clamp(24px,3vw,44px)}
.ang-step{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:20px 6%;padding:clamp(28px,3.4vw,48px) 0 clamp(36px,4vw,60px) var(--ang-pad)}
.ang-step:nth-child(2){margin-left:var(--ang-in)}
.ang-step:nth-child(3){margin-left:calc(2*var(--ang-in))}
/* Stufenlinie: senkrecht am linken Rand jeder Stufe, waagrechter Übergang von der vorherigen Stufe */
.ang-step::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--blue);transform:scaleY(0);transform-origin:top;transition:transform .7s var(--ease) .45s}
.ang-step+.ang-step::after{content:'';position:absolute;top:0;right:100%;width:var(--ang-in);height:2px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease) .1s}
.ang-step.is-in::before{transform:none}
.ang-step.is-in::after{transform:none}
.ang-step:nth-child(2).is-in::after{transition-delay:.9s}.ang-step:nth-child(2).is-in::before{transition-delay:1.3s}
.ang-step:nth-child(3).is-in::after{transition-delay:1.8s}.ang-step:nth-child(3).is-in::before{transition-delay:2.2s}
html:not(.js) .ang-step::before,html:not(.js) .ang-step::after{transform:none}
@supports(animation-timeline:view()){
 html.js:not(.motion-paused) .ang-step::before,html.js:not(.motion-paused) .ang-step.is-in::before{transition:none;animation:ang-y linear both;animation-timeline:view();animation-range:entry 35% cover 60%}
 html.js:not(.motion-paused) .ang-step+.ang-step::after,html.js:not(.motion-paused) .ang-step.is-in::after{transition:none;animation:ang-x linear both;animation-timeline:view();animation-range:entry 5% entry 40%}
}
@keyframes ang-y{from{transform:scaleY(0)}to{transform:none}}
@keyframes ang-x{from{transform:scaleX(0)}to{transform:none}}
.ang-step-name{margin:0 0 .4em;font-size:clamp(28px,2.4vw + 10px,44px);letter-spacing:-.04em;line-height:1.1}
.ang-for{margin:0;font-size:clamp(17px,1vw + 12px,20px);line-height:1.5;color:var(--ink-2);max-width:26em}
.ang-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0 0 18px}
.ang-price span{font-size:16px;color:var(--muted)}
.ang-price strong{font-size:clamp(34px,3.2vw + 8px,56px);font-weight:500;letter-spacing:-.045em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.ang-includes{list-style:none;margin:0 0 26px;padding:0;border-top:1px solid var(--ink);max-width:34em}
.ang-includes li{padding:12px 0;border-bottom:1px solid var(--line);font-size:16px;line-height:1.5;color:var(--ink-2)}
.ang-rows .row{grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr)}
.ang-rows .row-text{max-width:36em}
.ang-care{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr);gap:28px 8%;align-items:end}
.ang-care h2{margin-bottom:.45em}
.ang-care .lead{margin:0;max-width:32em}
.ang-care-side{display:grid;gap:8px;justify-items:start}
.ang-care-side .ang-price{margin-bottom:10px}
.ang-flow{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.ang-flow>li{display:grid;grid-template-columns:minmax(40px,.3fr) minmax(0,2.4fr);gap:12px 4%;padding:var(--row) 0;border-bottom:1px solid var(--line)}
.ang-flow-no{font-size:clamp(22px,1.1vw + 16px,30px);font-weight:500;letter-spacing:-.035em;line-height:1.2;color:var(--muted);font-variant-numeric:tabular-nums}
.ang-flow h3{grid-column:2;margin:0 0 .6em}
.ang-flow-cols{grid-column:2;display:grid;grid-template-columns:1fr 1fr;gap:20px 6%}
.ang-flow-cols p{margin:0;font-size:16px;line-height:1.6;color:var(--ink-2);max-width:30em}
.ang-side{font-size:16px;color:var(--muted);margin-bottom:6px!important}
.ang-close h2{max-width:16ch}
.ang-close .lead{margin-bottom:28px}
.ang-close-actions,.team-close-actions,.inq-more-links{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}

/* ---------------------------------------------------------------- Team */
.team-people{display:grid;grid-template-columns:1fr 1fr;gap:40px 8%;border-top:1px solid var(--ink);padding-top:clamp(28px,3vw,44px)}
.team-person h2{margin:0 0 .35em;font-size:clamp(30px,2.6vw + 10px,48px);letter-spacing:-.04em}
.team-role{margin:0 0 1em;font-size:clamp(17px,1vw + 12px,20px);line-height:1.5;color:var(--ink);max-width:26em}
.team-text{margin:0 0 22px;font-size:17px;line-height:1.6;color:var(--ink-2);max-width:32em}
.team-links{display:grid;gap:6px;justify-items:start;margin:0}
.team-links a{position:relative;display:inline-block;padding:9px 0;font-size:17px;font-weight:600;color:var(--ink);transition:color var(--dur-fast)}
.team-links a:hover{color:var(--blue)}
.team-links a::after{content:'';position:absolute;left:0;right:0;bottom:6px;height:1px;background:var(--line-strong);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease) .5s,background var(--dur-fast)}
.team-links a:hover::after{background:var(--blue)}
.team-person.is-in .team-links a::after,html:not(.js) .team-links a::after{transform:none}
.team-origin{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:24px 6%;align-items:start}
.team-origin .section-head{grid-template-columns:1fr;margin-bottom:0}
.team-origin .prose .lead{margin-bottom:1em}
.team-rules{list-style:none;margin:0 0 20px;padding:0;border-top:1px solid var(--ink)}
.team-rules li{padding:clamp(16px,1.6vw,22px) 0;border-bottom:1px solid var(--line);font-size:clamp(18px,1vw + 13px,22px);line-height:1.4;color:var(--ink);max-width:34em}
.team-rules-link{margin:0}
.team-provider{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px 8%;align-items:start}
.team-provider h2{margin-bottom:.45em}
.team-provider .lead{margin:0;max-width:28em}
.team-facts{margin:0;display:grid;gap:0;border-top:1px solid var(--ink)}
.team-facts>div{display:grid;grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr);gap:6px 20px;padding:14px 0;border-bottom:1px solid var(--line)}
.team-facts dt{font-size:16px;color:var(--muted)}
.team-facts dd{margin:0;font-size:17px;line-height:1.5;color:var(--ink)}
.team-facts a{display:inline-block;padding:11px 0;margin:-11px 0;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-strong);transition:color var(--dur-fast),text-decoration-color var(--dur-fast)}
.team-facts a:hover{color:var(--blue);text-decoration-color:currentColor}
.team-close h2{max-width:16ch}
.team-close .lead{margin-bottom:28px}

/* ---------------------------------------------------------------- Kontakt */
.inq{padding:clamp(12px,2vw,24px) 0 var(--section)}
.inq-layout{display:grid;grid-template-columns:minmax(260px,.75fr) minmax(0,1.25fr);gap:40px 8%;align-items:start}
.inq-aside{position:sticky;top:calc(var(--header-h) + 24px)}
.inq-aside h2{font-size:clamp(26px,1.6vw + 14px,34px);letter-spacing:-.035em;margin:0 0 .8em}
.inq-steps{list-style:none;counter-reset:inq;margin:0;padding:0;border-top:1px solid var(--ink)}
.inq-steps li{position:relative;display:grid;gap:4px;padding:16px 0 16px 20px;border-bottom:1px solid var(--line);counter-increment:inq}
.inq-steps li::before{content:'';position:absolute;left:0;top:16px;bottom:16px;width:2px;background:var(--blue);transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease)}
.inq-steps strong{font-size:17px;line-height:1.4;color:var(--ink);transition:color var(--dur-fast)}
.inq-steps span{font-size:15px;line-height:1.5;color:var(--muted)}
/* Der Schritt folgt dem Fieldset, in dem gerade der Fokus liegt (ohne Skript). */
.inq-layout:has(.inq-fieldset:nth-of-type(1) :focus-within) .inq-steps li:nth-child(1)::before,
.inq-layout:has(.inq-fieldset:nth-of-type(2) :focus-within) .inq-steps li:nth-child(2)::before,
.inq-layout:has(.inq-fieldset:nth-of-type(3) :focus-within) .inq-steps li:nth-child(3)::before{transform:none}
.inq-layout:has(.inq-fieldset:nth-of-type(1) :focus-within) .inq-steps li:nth-child(1) strong,
.inq-layout:has(.inq-fieldset:nth-of-type(2) :focus-within) .inq-steps li:nth-child(2) strong,
.inq-layout:has(.inq-fieldset:nth-of-type(3) :focus-within) .inq-steps li:nth-child(3) strong{color:var(--blue)}
.inq-trust{margin:22px 0 0;padding:14px 0 0;border-top:1px solid var(--ink);font-size:16px;line-height:1.5;color:var(--ink)}
.inq-direct{margin-top:26px}
.inq-direct p{margin:0 0 12px;font-size:15px;line-height:1.6;color:var(--muted)}
.inq-direct p:first-child{color:var(--ink)}
.inq-direct a{display:inline-block;padding:11px 0;margin:-7px 0;color:var(--ink);font-weight:600;font-size:16px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line-strong);overflow-wrap:anywhere;transition:color var(--dur-fast),text-decoration-color var(--dur-fast)}
.inq-direct a:hover{color:var(--blue);text-decoration-color:currentColor}
.inq-form{min-width:0}
.inq-fieldset{border:0;padding:0;margin:0 0 clamp(28px,3vw,44px);min-width:0}
.inq-fieldset legend{padding:0;margin:0 0 20px;font-size:clamp(22px,1.1vw + 16px,30px);font-weight:500;letter-spacing:-.035em;line-height:1.2;color:var(--ink)}
.inq-form .field{margin-bottom:20px}
.inq-form .field>span:first-child{font-size:15px;font-weight:600;color:var(--ink)}
.inq-form .field-help{color:var(--muted)}
.inq-form .field-error{display:none}
.inq-form .field.is-invalid .field-error,.inq-form .field:has(:user-invalid) .field-error{display:block}
.inq-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.inq-form .inquiry-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.inq-consent{max-width:42em}
.inq-consent>span{font-size:16px;line-height:1.55;color:var(--ink-2)}
.inq-consent a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-strong)}
.inq-consent a:hover{color:var(--blue)}
.inq-consent .field-error{margin-top:6px}
.inq-status-wrap{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px;margin-bottom:20px}
.inq-status-wrap:not(:has(#form-status[data-state=success]:not([hidden]))) .inq-check{display:none}
.inq-check{color:var(--ok)}
.inq-check circle{stroke-dasharray:95;stroke-dashoffset:0;animation:inq-ring .5s var(--ease) both}
.inq-check path{stroke-dasharray:24;stroke-dashoffset:0;animation:inq-tick .4s var(--ease) .3s both}
@keyframes inq-ring{from{stroke-dashoffset:95}to{stroke-dashoffset:0}}
@keyframes inq-tick{from{stroke-dashoffset:24}to{stroke-dashoffset:0}}
.inq-status{margin:0}
.inq-status-wrap:has(#form-status[hidden]){margin-bottom:0}
.inq-send{display:flex;flex-wrap:wrap;gap:12px 14px;align-items:center;margin-top:4px}
.inq-send .button{white-space:normal}
.inq-mode{margin:16px 0 0;font-size:15px;line-height:1.55;color:var(--muted);max-width:40em}
/* Vertrauenssatz direkt über den Knöpfen; nur mobil, wo die Seitenspalte unter dem Formular steht */
.inq-trust-send{display:none;margin:0 0 16px;color:var(--ink)}
.inq-form[aria-busy=true]{opacity:.75}
.inq-form button:disabled{cursor:wait}
.inq-more{border-top:1px solid var(--line)}
.inq-more h2{max-width:16ch}
.inq-more .lead{margin-bottom:28px}

/* ---------------------------------------------------------------- Rechtsseiten */
.legal{padding:clamp(44px,6vw,88px) 0 var(--section)}
.legal .kicker{opacity:0;animation:ph-fade .7s var(--ease) .05s forwards}
.legal-copy{max-width:62ch}
.legal-copy h1{margin:0 0 .5em;font-size:clamp(38px,4vw,64px)}
.legal-copy h2{margin:1.7em 0 .5em;font-size:clamp(22px,1.1vw + 16px,30px);line-height:1.2}
.legal-copy p{color:var(--ink-2)}
.legal-copy a{display:inline-block;padding:11px 0;margin:-11px 0;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-strong);transition:color var(--dur-fast),text-decoration-color var(--dur-fast)}
.legal-copy a:hover{color:var(--blue);text-decoration-color:currentColor}

/* ---------------------------------------------------------------- Weiterleitung */
.redir{padding:clamp(44px,6vw,88px) 0 var(--section);min-height:50vh}
.redir h1{max-width:14ch}
.redir .lead{margin-bottom:20px}

/* ---------------------------------------------------------------- Responsiv */
@media(max-width:1100px){
 .ang-step{grid-template-columns:1fr;gap:16px}
 .ang-includes{max-width:none}
 .team-origin,.team-provider{grid-template-columns:1fr}
}
@media(max-width:800px){
 .ang-steps{--ang-in:0px;--ang-pad:20px}
 .ang-step:nth-child(2),.ang-step:nth-child(3){margin-left:0}
 .ang-step+.ang-step::after{display:none}
 .ang-rows .row{grid-template-columns:1fr}
 .ang-care{grid-template-columns:1fr}
 .ang-flow>li{grid-template-columns:1fr}
 .ang-flow h3,.ang-flow-cols{grid-column:1}
 .ang-flow-cols{grid-template-columns:1fr}
 .team-people{grid-template-columns:1fr;gap:36px}
 .team-facts>div{grid-template-columns:1fr;gap:2px}
 .inq-layout{grid-template-columns:1fr;gap:36px}
 /* Mobil zuerst das Formular, dann die Seitenspalte; DOM-Reihenfolge und :has-Regeln bleiben */
 .inq-main{order:-1}
 .inq-aside{position:static}
 .inq-trust-send{display:block}
 .inq-more-links{flex-direction:column;align-items:flex-start;gap:4px}
}
@media(max-width:520px){
 .inq-grid{grid-template-columns:1fr}
 .inq-send{flex-direction:column;align-items:stretch}
 .ang-close-actions,.team-close-actions{flex-direction:column;align-items:stretch;gap:12px}
 .ang-close-actions .text-link,.team-close-actions .text-link{align-self:flex-start}
}

/* ---------------------------------------------------------------- Stopp-Block: Endzustände bei Reduktion und Pause */
@media(prefers-reduced-motion:reduce){
 .ang-step::before,.ang-step::after,.team-links a::after{transform:none;animation:none!important}
 .inq-check circle,.inq-check path{stroke-dashoffset:0;animation:none}
 .legal .kicker{opacity:1}
}
html.motion-paused .ang-step::before,html.motion-paused .ang-step::after,html.motion-paused .team-links a::after{transform:none;animation:none!important}
html.motion-paused .inq-check circle,html.motion-paused .inq-check path{stroke-dashoffset:0}
html.motion-paused .legal .kicker{opacity:1}

/* Kontakt, zweiter Schritt: natives HubSpot-Formular (dist/contact-hubspot.mjs). */
.inq-native{margin-top:8px}.inq-native h2{font-size:clamp(26px,3vw,34px);line-height:1.15;margin:0 0 12px}.inq-native .inq-status:empty{display:none}#hubspot-contact{min-width:0;margin-top:20px}#hubspot-contact iframe{width:100%;max-width:100%;border:0}#native-alternatives{margin-top:24px}