/* Verteiler-Check (verteiler-check.html only): guide animation, upload form and result view.
   Default styles show the final frame of the animation, so reduced motion and no-JS get a complete static picture. */

/* Guide animation */
.vc-figure{margin:0}.vc-art{display:block;width:100%;height:auto}
.vc-figure figcaption{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:18px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.vc-replay{background:none;border:1px solid rgba(255,255,255,.4);color:var(--white);font-size:12px;letter-spacing:.04em;text-transform:none;padding:9px 14px;min-height:40px}.vc-replay:hover{border-color:var(--white)}.vc-replay[hidden]{display:none}
.vc-steps{list-style:none;padding:0;margin:34px 0 0;border-top:1px solid rgba(255,255,255,.2)}
.vc-steps li{display:flex;gap:18px;align-items:baseline;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.2);font-size:clamp(19px,1.6vw,24px);letter-spacing:-.03em;transition:opacity .4s}
.vc-steps li span{font-size:10px;letter-spacing:.12em;color:rgba(255,255,255,.55)}
.vc-stage.is-playing .vc-steps li{opacity:.38}.vc-stage.is-playing .vc-steps li.is-current{opacity:1}
.vc-safety{font-size:14px!important;line-height:1.55;color:var(--cotton);margin-top:26px!important;padding-left:16px;border-left:1px solid var(--cotton)}

.vc-art .vc-phone{transform:translate(700px,130px)}
.vc-art .vc-door{transform-box:fill-box;transform-origin:0 50%}
.vc-art .vc-finder,.vc-art .vc-flash,.vc-art .vc-progress,.vc-art .vc-upload{opacity:0}
.vc-art .vc-progress-fill{transform-box:fill-box;transform-origin:0 50%}
.vc-stage.is-playing .vc-art *{animation-duration:9s;animation-timing-function:cubic-bezier(.45,0,.2,1);animation-fill-mode:both}
.vc-stage.is-playing .vc-door{animation-name:vc-door}
.vc-stage.is-playing .vc-phone{animation-name:vc-phone}
.vc-stage.is-playing .vc-finder{animation-name:vc-finder}
.vc-stage.is-playing .vc-flash{animation-name:vc-flash;animation-timing-function:linear}
.vc-stage.is-playing .vc-progress,.vc-stage.is-playing .vc-upload{animation-name:vc-progress}
.vc-stage.is-playing .vc-progress-fill{animation-name:vc-fill;animation-timing-function:linear}
.vc-stage.is-playing .vc-row{animation:vc-row .5s var(--ease) both;animation-delay:calc(6.6s + var(--i,0) * .22s)}
@keyframes vc-door{0%,13%{transform:scaleX(1)}24%,60%{transform:scaleX(.08)}70%,100%{transform:scaleX(1)}}
@keyframes vc-phone{0%,24%{transform:translate(1060px,150px)}37%,60%{transform:translate(350px,150px)}72%,100%{transform:translate(700px,130px)}}
@keyframes vc-finder{0%,34%{opacity:0}37%,44%{opacity:1}46%,100%{opacity:0}}
@keyframes vc-flash{0%,40%{opacity:0}41.5%{opacity:.85}45%,100%{opacity:0}}
@keyframes vc-progress{0%,45%{opacity:0}47%,59%{opacity:1}61%,100%{opacity:0}}
@keyframes vc-fill{0%,47%{transform:scaleX(0)}59%,100%{transform:scaleX(1)}}
@keyframes vc-row{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.vc-stage.is-playing .vc-art *{animation:none!important}.vc-steps li{transition:none}}

/* Form */
.vc-form-section .contact-grid{margin-top:clamp(50px,5vw,80px)}
.vc-region{font-size:15px!important;line-height:1.6!important;opacity:.7}
.vc-row2{display:grid;grid-template-columns:.38fr .62fr;gap:24px}
.vc-photo{margin-bottom:27px}
.vc-photo-pick input[type=file]{width:100%;padding:16px 0 14px;border-bottom:1px solid var(--line);font-size:14px}
.vc-photo-pick input[type=file]::file-selector-button{font:inherit;font-size:13px;border:1px solid var(--black);background:var(--white);color:var(--black);padding:10px 14px;margin-right:14px;cursor:pointer}
.vc-hint{font-size:12px;line-height:1.55;opacity:.65;margin:10px 0 0}
.vc-preview{margin:18px 0 0;position:relative;background:var(--cotton);aspect-ratio:4/3}.vc-preview[hidden]{display:none}
.vc-preview img{width:100%;height:100%;object-fit:contain}
.vc-retake{position:absolute;right:12px;bottom:12px;background:var(--white);border:1px solid var(--black);padding:9px 14px;font-size:13px}
.vc-consent{display:flex!important;gap:14px;align-items:flex-start;font-size:13px;line-height:1.55}
/* Must beat .project-form label input (width:100%), which would push the text out of the page. */
.project-form .vc-consent input{width:20px;height:20px;flex:0 0 20px;margin:1px 0 0;padding:0;border:0;accent-color:var(--black)}
.vc-consent span{font-size:13px!important;letter-spacing:0!important;min-width:0}.vc-consent a{border-bottom:1px solid currentColor}
.vc-hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.vc-form [aria-invalid=true]{border-bottom-color:var(--black)!important;border-bottom-width:2px!important}
.vc-form .form-submit[disabled]{opacity:.55;cursor:progress}

/* Result (also the standalone page the PHP endpoint renders without JavaScript) */
.vc-standalone .vc-result-section{border-top:0;padding-top:clamp(40px,5vw,80px)}.vc-back{font-size:12px;letter-spacing:.06em;margin:0 0 clamp(40px,4vw,60px)}.vc-back a{border-bottom:1px solid currentColor}
.vc-result-section{background:var(--white);padding:clamp(80px,8vw,140px) 0;border-top:1px solid var(--line)}.vc-result-section[hidden]{display:none}.vc-result-section:focus{outline:none}
.vc-overall{display:grid;grid-template-columns:.382fr .618fr;gap:clamp(30px,5vw,90px);align-items:end;margin:clamp(40px,4vw,70px) 0 clamp(40px,4vw,60px)}
.vc-overall h1,.vc-overall h2{font-size:clamp(38px,4.6vw,78px);font-weight:400;letter-spacing:-.06em;line-height:1.06;margin:0}
.vc-overall p{font-size:clamp(18px,1.5vw,22px);line-height:1.52;letter-spacing:-.02em;margin:0 0 10px;max-width:640px}
.vc-danger{background:var(--black);color:var(--white);padding:clamp(26px,3vw,46px);margin-top:clamp(36px,4vw,60px);display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end}
.vc-danger h2{font-size:clamp(30px,3.2vw,52px);font-weight:400;letter-spacing:-.05em;margin:0 0 16px}.vc-danger p{font-size:17px;line-height:1.6;margin:0;max-width:720px}.vc-danger ul{margin:14px 0 0;padding-left:18px;font-size:15px;line-height:1.6;color:var(--cotton)}
.vc-danger a{font-size:clamp(24px,2.6vw,40px);letter-spacing:-.05em;white-space:nowrap;border-bottom:1px solid currentColor}
.vc-recommend{background:var(--cotton);padding:clamp(24px,3vw,44px);margin-bottom:clamp(40px,4vw,70px)}
.vc-recommend .eyebrow{margin-bottom:14px}.vc-recommend p{font-size:clamp(18px,1.5vw,22px);line-height:1.52;margin:0;max-width:820px}.vc-recommend small{display:block;margin-top:16px;font-size:13px;opacity:.65}
.vc-group{margin-bottom:clamp(40px,4vw,70px)}
.vc-group h3,.vc-group-title{font-size:clamp(26px,2.4vw,40px);font-weight:400;letter-spacing:-.05em;margin:0 0 10px}
.vc-list{list-style:none;padding:0;margin:0;border-top:1px solid var(--black)}
.vc-item{display:grid;grid-template-columns:minmax(0,1fr) 170px minmax(0,1.2fr);gap:12px 30px;padding:20px 0;border-bottom:1px solid var(--line);align-items:start}
.vc-item strong{font-weight:400;font-size:19px;letter-spacing:-.02em}
.vc-item .vc-explain,.vc-item .vc-observed{font-size:14px;line-height:1.55;margin:0;opacity:.75}
.vc-item .vc-observed{grid-column:3;opacity:1}.vc-item .vc-observed b{font-weight:400;font-size:10px;letter-spacing:.12em;text-transform:uppercase;display:block;opacity:.6;margin-bottom:4px}
.vc-level{display:flex;flex-direction:column;gap:8px;font-size:14px}
.vc-marks{display:flex;gap:4px}.vc-marks i{width:12px;height:18px;border:1.5px solid var(--black);display:block}.vc-marks i.on{background:var(--black)}
.vc-level[data-level="0"] .vc-marks i{border-style:dashed;opacity:.5}
.vc-level span{letter-spacing:-.01em}
.vc-legend{display:flex;flex-wrap:wrap;gap:12px 28px;font-size:12px;margin:0 0 clamp(40px,4vw,60px);padding:0;list-style:none}.vc-legend li{display:flex;gap:10px;align-items:center}.vc-legend .vc-marks i{width:9px;height:14px}
.vc-tips{list-style:none;padding:0;margin:0 0 clamp(40px,4vw,60px);border-top:1px solid var(--black)}.vc-tips li{padding:16px 0;border-bottom:1px solid var(--line);font-size:18px;letter-spacing:-.02em}
.vc-limits{display:grid;grid-template-columns:.382fr .618fr;gap:clamp(30px,5vw,90px);background:var(--blue);padding:clamp(26px,3vw,50px);margin-bottom:clamp(40px,4vw,70px)}
.vc-limits h3,.vc-limits .vc-group-title{font-size:clamp(26px,2.4vw,40px);font-weight:400;letter-spacing:-.05em;margin:0}.vc-limits p{font-size:17px;line-height:1.6;margin:0 0 24px}
.vc-next{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2vw,30px)}
.vc-next>*{display:flex;flex-direction:column;justify-content:space-between;gap:30px;min-height:150px;padding:24px;border:1px solid var(--black);background:var(--white);color:var(--black);text-align:left;font-size:clamp(20px,1.7vw,26px);letter-spacing:-.04em;transition:background .3s,color .3s}
.vc-next>*:hover{background:var(--black);color:var(--white)}.vc-next small{font-size:12px;line-height:1.5;letter-spacing:0;opacity:.7}
.vc-next>.is-primary{background:var(--black);color:var(--white)}.vc-next>.is-primary:hover{background:var(--white);color:var(--black)}
.vc-notice{font-size:12px;line-height:1.55;opacity:.7;margin:clamp(30px,3vw,46px) 0 0;max-width:760px}
.vc-test{display:inline-block;font-size:11px;letter-spacing:.12em;border:1px solid var(--black);padding:8px 12px;margin:clamp(30px,3vw,46px) 0 0}
.vc-hint-photo{font-size:14px;opacity:.7;margin:0 0 24px}

@media(max-width:800px){
 .vc-overall,.vc-limits,.vc-danger{grid-template-columns:1fr}
 .vc-item{grid-template-columns:1fr;gap:10px}.vc-item .vc-observed{grid-column:auto;grid-row:3}.vc-item .vc-explain{grid-row:4}
 .vc-level{flex-direction:row;align-items:center;gap:12px}
 .vc-next{grid-template-columns:1fr}.vc-next>*{min-height:0}
}
@media(max-width:520px){.vc-row2{grid-template-columns:1fr;gap:0}.vc-figure figcaption{flex-direction:column;align-items:flex-start}}

/* g-check lockup. Default is the final frame (g, bar, "check"); .is-playing runs the transformation once. */
.gc-brand--top{margin:clamp(30px,4vw,60px) 0 clamp(26px,3vw,44px)}
.gc-brand--result{margin-top:clamp(50px,5vw,80px);padding-top:clamp(30px,3vw,46px);border-top:1px solid var(--line)}
.vc-result-section[hidden] .gc-brand{display:none}
.gc-logo{display:block;width:clamp(200px,26vw,380px);height:auto;color:var(--black);overflow:visible}
/* Top lockup sized from the headline: same font-size as .inner-hero h1 (site.css), so the logo's x-height (150 of 256
   units) equals Helvetica's x-height (0.517 em): width 1309/256 × 0.517/0.586 ≈ 4.511 em. The left margin repeats the
   side bearing of the headline's first letter (0.036 em) so both align optically. */
.gc-brand--top{font-size:clamp(52px,7.4vw,128px)}
.gc-brand--top .gc-logo{width:4.511em;margin-left:.036em}
@media(max-width:520px){.gc-brand--top{font-size:clamp(41px,11vw,58px)}}
.gc-logo .gc-l{opacity:0}
.gc-logo .gc-bar{transform:translateX(-839.3px)}
.gc-logo.is-ready .gc-l{opacity:1}.gc-logo.is-ready .gc-bar{transform:none}.gc-logo.is-ready .gc-word{transform:translateX(-760px)}
.gc-logo.is-playing .gc-l{animation:gc-fade .22s linear var(--d) both}
.gc-logo.is-playing .gc-bar{animation:gc-bar 1.4s linear .5s both}
.gc-logo.is-playing .gc-word{animation:gc-word .95s var(--ease) 2s both}
@keyframes gc-fade{from{opacity:1}to{opacity:0}}
@keyframes gc-bar{from{transform:none}to{transform:translateX(-839.3px)}}
@keyframes gc-word{from{transform:translateX(-760px)}to{transform:none}}
@media(prefers-reduced-motion:reduce){.gc-logo.is-playing *,.gc-logo.is-ready *{animation:none!important}.gc-logo.is-ready .gc-l{opacity:0}.gc-logo.is-ready .gc-bar{transform:translateX(-839.3px)}.gc-logo.is-ready .gc-word{transform:none}}

/* Optional close-up photo and the close-up tips for "teilweise beurteilbar". */
.vc-photo--second .vc-photo-pick span{opacity:.75}
.vc-closeup{background:var(--green);padding:clamp(24px,3vw,44px);margin-bottom:clamp(40px,4vw,70px)}.vc-closeup .eyebrow{margin-bottom:10px}.vc-closeup .vc-tips{margin:0;border-top-color:rgba(33,34,39,.4)}

/* Safety gate in two steps (CSS :has, no JS needed):
   1. Ticking the confirmation fades the rules out and enlarges the responsibility note; "check starten" appears.
   2. "check starten" hides the gate and reveals guide, form and result.
   Browsers without :has show everything; the endpoint still refuses requests without the confirmation. */
.vc-gate{background:var(--black);color:var(--white);padding:clamp(80px,8vw,140px) 0}
.vc-gate .section-top{border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.6)}
.vc-gate-grid{display:grid;grid-template-columns:.382fr .618fr;gap:clamp(40px,6vw,110px);margin-top:clamp(50px,5vw,80px)}
.vc-gate h2{font-size:clamp(40px,5vw,86px);font-weight:400;line-height:1.04;letter-spacing:-.06em;margin:0 0 28px}
.vc-gate-grid>div:first-child>p{font-size:clamp(18px,1.5vw,22px);line-height:1.52;letter-spacing:-.02em;max-width:460px;margin:0;color:rgba(255,255,255,.8)}
.vc-gate-rules-wrap{transition:opacity .35s}
.vc-gate-rules{list-style:none;padding:0;margin:0;border-top:1px solid rgba(255,255,255,.3)}
.vc-gate-rules li{display:grid;grid-template-columns:44px 1fr;gap:12px;padding:20px 0;border-bottom:1px solid rgba(255,255,255,.2);font-size:clamp(17px,1.35vw,20px);line-height:1.5;letter-spacing:-.01em}
.vc-gate-rules li span{font-size:10px;letter-spacing:.12em;color:var(--cotton);padding-top:6px}
.vc-gate-consent{display:flex;gap:20px;align-items:center;margin-top:34px;padding:26px 28px;border:2px solid var(--white);cursor:pointer;font-size:clamp(18px,1.5vw,22px);letter-spacing:-.02em;transition:background .3s,color .3s,margin .7s var(--ease)}
.vc-gate-consent input{appearance:none;-webkit-appearance:none;flex:0 0 30px;width:30px;height:30px;margin:0;border:2px solid currentColor;background:transparent;display:grid;place-content:center;cursor:pointer}
.vc-gate-consent input:checked::after{content:'';width:14px;height:8px;border-left:3px solid currentColor;border-bottom:3px solid currentColor;transform:translateY(-2px) rotate(-45deg)}
.vc-gate-consent input:focus-visible{outline:2px solid var(--cotton);outline-offset:4px}
.vc-gate-consent:has(input:checked){background:var(--white);color:var(--black)}
.vc-gate-notice{font-size:13px;line-height:1.6;color:rgba(255,255,255,.65);margin:24px 0 0;transition:font-size .7s var(--ease),line-height .7s var(--ease),color .5s,margin .7s var(--ease)}
.vc-gate-start{display:none;margin-top:clamp(30px,3vw,46px)}
.vc-gate-go{display:flex;justify-content:space-between;align-items:center;max-width:420px;padding:22px 26px;background:var(--cotton);color:var(--black);font-size:clamp(20px,1.7vw,26px);letter-spacing:-.03em;cursor:pointer;transition:background .3s}
.vc-gate-go:hover{background:var(--white)}.vc-gate-go span:last-child{font-size:26px;font-weight:300}
#vc-start:focus-visible+.vc-gate-go{outline:2px solid var(--cotton);outline-offset:5px}
/* Step 1 done */
/* The rules fade without changing height; the script then removes them in one step and compensates the scroll
   position in the same frame (no jump, also in Safari, which has no scroll anchoring). Without JS they go at once. */
.vc-gate:has(#vc-safety:checked) .vc-gate-rules-wrap{opacity:0}
.vc-gate.rules-gone .vc-gate-rules-wrap,body:not(.has-js) .vc-gate:has(#vc-safety:checked) .vc-gate-rules-wrap{display:none}
.vc-gate:has(#vc-safety:checked) .vc-gate-consent{margin-top:0}
.vc-gate:has(#vc-safety:checked) .vc-gate-notice{font-size:clamp(24px,2.4vw,40px);line-height:1.28;letter-spacing:-.03em;color:var(--white);margin-top:clamp(30px,3vw,46px)}
.vc-gate:has(#vc-safety:checked) .vc-gate-start{display:block;animation:vc-reveal .6s var(--ease) .35s both}
/* Step 2 done: gate gone, locked sections fade in */
body:has(#vc-start:not(:checked)) .vc-locked,body:has(#vc-safety:not(:checked)) .vc-locked{display:none!important}
.vc-gate:has(#vc-start:checked){display:none}
body:has(#vc-start:checked) .vc-locked{animation:vc-reveal .7s var(--ease) both}
@keyframes vc-reveal{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.vc-gate *{transition:none!important;animation:none!important}body:has(#vc-start:checked) .vc-locked{animation:none}}
@media(max-width:800px){.vc-gate-grid{grid-template-columns:1fr}.vc-gate-consent{padding:20px}.vc-gate-go{max-width:none}}

/* Teaser for the full result by e-mail (observations, recommendation, offer after the double opt-in). */
.vc-teaser{border:1px solid var(--black);padding:clamp(24px,3vw,44px);margin-bottom:clamp(40px,4vw,70px)}
.vc-teaser .eyebrow{margin-bottom:14px}.vc-teaser h3,.vc-teaser .vc-group-title{font-size:clamp(26px,2.4vw,40px);font-weight:400;letter-spacing:-.05em;margin:0 0 12px}.vc-teaser p{font-size:17px;line-height:1.6;margin:0;max-width:760px}

/* Pause view (check unavailable): replaces gate and form; calm, with the two direct ways to Gerhards. */
.vc-pause{background:var(--blue);padding:clamp(80px,8vw,140px) 0}.vc-pause[hidden]{display:none}
.vc-pause-grid{display:grid;grid-template-columns:.382fr .618fr;gap:clamp(40px,6vw,110px);margin-top:clamp(50px,5vw,80px);align-items:end}
.vc-pause h2{font-size:clamp(40px,5vw,86px);font-weight:400;line-height:1.04;letter-spacing:-.06em;margin:0 0 28px}
.vc-pause-grid p{font-size:clamp(18px,1.5vw,22px);line-height:1.52;letter-spacing:-.02em;margin:0;max-width:460px}
.vc-pause-grid .vc-pause-later{font-size:14px;margin-top:22px;opacity:.7}
.vc-pause-ways{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px)}
.vc-pause-way{display:flex;flex-direction:column;gap:18px;min-height:190px;justify-content:space-between;padding:clamp(22px,2.4vw,34px);background:var(--white);color:var(--black);border:1px solid var(--black);transition:background .3s,color .3s}
.vc-pause-way:hover{background:var(--black);color:var(--white)}
.vc-pause-way strong{font-weight:400;font-size:clamp(22px,2vw,32px);letter-spacing:-.04em;line-height:1.15}.vc-pause-way>span:last-child{font-size:24px;font-weight:300}
body.vc-paused .vc-gate,body.vc-paused .vc-locked{display:none!important}
@media(max-width:800px){.vc-pause-grid{grid-template-columns:1fr;align-items:start}.vc-pause-ways{grid-template-columns:1fr}.vc-pause-way{min-height:0}}