/* HF16 / Rueckhalt-Harmonisierung, kein neues Layout.
   Referenz: HF15-Startseite und bestehende HF4/HF5-IT-Leistungsseiten.
   Ausschliesslich bestehende Marke, Typografie und Komponenten. */
:root{--vc16-ink:#353536;--vc16-aqua:#8fcec9;--vc16-line:#d4dfd9;--vc16-paper:#f2f5f2}

/* Einheitliche Schlusssektion fuer alle Informationsseiten: exakt die HF15-CTA. */
body:not(.shop-body) .cta-section{border-bottom:4px solid var(--vc16-aqua)}
body:not(.shop-body) .cta-section .vc15-cta-contact{display:flex;flex-wrap:wrap;gap:10px 13px;margin-top:17px}
body:not(.shop-body) .cta-section .vc15-cta-contact a{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:12px 17px;background:transparent;border:1px solid var(--vc16-aqua);color:#fff;text-decoration:none;font:650 13px/1.4 var(--body,Arial,sans-serif)}
body:not(.shop-body) .cta-section .vc15-cta-contact a:hover,
body:not(.shop-body) .cta-section .vc15-cta-contact a:focus-visible{background:var(--vc16-aqua);border-color:var(--vc16-aqua);color:#182b26}
body:not(.shop-body) .cta-section .vc15-cta-contact-note{font-size:11px;line-height:1.6;color:#e1e9e6;margin:12px 0 0}

/* Die HF14-Fachseiten benutzen dieselbe Hero-Geometrie wie bestehende Leistungen. */
.vc14-page .hf4-service-hero{padding-top:55px;padding-bottom:62px}
.vc14-page .hf4-service-intro.vc14-service-hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);gap:clamp(28px,4vw,65px);align-items:center}
.vc14-page .hf4-service-intro.vc14-service-hero-grid h1{max-width:19ch;hyphens:none;word-break:normal;overflow-wrap:normal;font:600 clamp(42px,4.8vw,82px)/1.05 var(--display,Arial,sans-serif);letter-spacing:-.015em;margin:13px 0 20px}
.vc14-page .hf4-service-intro.vc14-service-hero-grid .lead{font-size:clamp(17px,1.45vw,20px);line-height:1.65;max-width:58ch}
.vc14-page .vc16-service-visual{border-right:14px solid var(--vc16-aqua);border-bottom:14px solid var(--vc16-aqua);background:var(--vc16-paper);padding:0 0 12px}
.vc14-page .vc16-service-visual .hf4-service-photo{display:block;height:320px;margin:0;overflow:hidden;border:0;background:transparent}
.vc14-page .vc16-service-visual .hf4-service-photo img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:auto}
.vc14-page .vc16-service-visual .hf4-picture-note{margin:9px 14px 0;padding:0;font-size:11px;line-height:1.55}
.vc14-page .vc14-opening{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);align-items:start;gap:clamp(26px,5vw,74px);padding-block:clamp(46px,5vw,75px);border-top:1px solid var(--vc16-line)}
.vc14-page .vc14-opening>div h2{font:600 clamp(32px,3.3vw,47px)/1.12 var(--display,Arial,sans-serif);margin:12px 0 0;max-width:19ch}
.vc14-page .vc14-opening>p{max-width:65ch;font-size:16px;line-height:1.8;margin:0}
.vc14-page .vc14-detail{padding-block:clamp(45px,5.2vw,85px)}
.vc14-page .vc14-detail .vc14-heading h2,.vc14-page .vc14-questions h2{font:600 clamp(30px,3.3vw,47px)/1.1 var(--display,Arial,sans-serif)}
.vc14-page .vc14-point-grid article h3{font-weight:600;font-size:clamp(22px,2.2vw,29px)}
/* Der bisherige riesige dunkelgruene Zwischen-CTA ist keine zweite Endsektion mehr. */
.vc14-page .vc14-next-step.vc16-inline-next-step{background:var(--vc16-paper);color:var(--vc16-ink);border-left:4px solid var(--vc16-aqua);padding:clamp(28px,3.6vw,48px);margin-block:clamp(20px,3vw,45px)}
.vc14-page .vc14-next-step.vc16-inline-next-step .eyebrow{color:#377f76}
.vc14-page .vc14-next-step.vc16-inline-next-step h2{color:var(--vc16-ink);font:600 clamp(30px,3.2vw,45px)/1.1 var(--display,Arial,sans-serif);max-width:27ch;margin:12px 0}
.vc14-page .vc14-next-step.vc16-inline-next-step p{color:#485b53;margin:14px 0 22px;max-width:70ch;font-size:16px;line-height:1.7}
.vc14-page .vc14-next-step.vc16-inline-next-step .button{background:var(--vc16-ink);color:white;border-color:var(--vc16-ink)}
.vc14-page .vc14-next-step.vc16-inline-next-step .button:hover{background:#225c54;color:white}
.vc14-page .vc14-questions{padding-block:clamp(42px,5vw,75px)}
.vc14-page .vc14-related{padding-bottom:clamp(38px,5vw,70px)}
.vc14-page .vc14-related a{border-bottom:2px solid var(--vc16-aqua);padding:10px 5px;text-decoration:none}

/* Hosting & IT-Systemhaus sind ab HF16 dieselbe Rueckhalt-Seitenfamilie wie IT-Loesungen. */
.hf8-page .detail-hero.hf8-intro{padding-block:clamp(43px,5.7vw,87px);border-bottom:1px solid var(--vc16-line)}
.hf8-page .hf8-intro .display{font:600 clamp(48px,5.2vw,81px)/1.035 var(--display,Arial,sans-serif);max-width:19ch;letter-spacing:-.01em;margin:14px 0 18px}
.hf8-page .hf8-intro .display em{font-style:normal;color:#2b827b}
.hf8-page .hf8-intro .lead{font-size:clamp(17px,1.5vw,21px);line-height:1.6;max-width:62ch}
.hf8-page .hf8-cards,.hf8-page .hf9-cloud-range{padding-block:clamp(40px,5.5vw,78px)}
.hf8-page .hf8-cards>h2,.hf8-page .hf9-cloud-range>h2,.hf8-page .hf8-plans>h2{font:600 clamp(32px,3.6vw,54px)/1.1 var(--display,Arial,sans-serif);margin:13px 0 28px}
.hf8-page .hf8-cardgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.3vw,19px)}
.hf8-page .hf8-linkcard{display:flex;flex-direction:column;gap:0;min-width:0;padding:0;border:0;border-bottom:3px solid var(--vc16-aqua);background:#f3f5f2;overflow:hidden;text-decoration:none;color:var(--vc16-ink)}
.hf8-page .hf8-linkcard:hover,.hf8-page .hf8-linkcard:focus-visible{background:#e9f2ef}
.hf8-page .hf8-linkcard .vc13-card-image{display:block;width:100%;height:clamp(155px,16vw,235px);object-fit:cover;margin:0 0 19px;border:0}
.hf8-page .hf8-linkcard .eyebrow{padding:0 20px;font-size:10px;margin:0 0 8px}
.hf8-page .hf8-linkcard h3{font:600 clamp(23px,2.3vw,32px)/1.1 var(--display,Arial,sans-serif);margin:0 20px 12px}
.hf8-page .hf8-linkcard p{font-size:14px;line-height:1.63;margin:0 20px 17px}
.hf8-page .hf8-linkcard>span:last-child{font-size:12px;font-weight:700;margin:auto 20px 0;border-top:1px solid var(--vc16-line);padding:13px 0 17px}
.hf8-page .hf8-topic-hero{padding-top:clamp(30px,4vw,55px)}
.hf8-page .hf8-topic-split{grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);gap:clamp(28px,4vw,65px)}
.hf8-page .hf8-topic-split h1{font:600 clamp(43px,4.7vw,82px)/1.05 var(--display,Arial,sans-serif);max-width:19ch;hyphens:none;overflow-wrap:normal;word-break:normal}
.hf8-page .hf8-topic-split .lead{font-size:clamp(18px,1.6vw,22px);line-height:1.55;color:var(--vc16-ink)}
.hf8-page .hf8-topic-image{margin:0;border-right:14px solid var(--vc16-aqua);border-bottom:14px solid var(--vc16-aqua);background:var(--vc16-paper)}
.hf8-page .hf8-topic-image img{display:block;width:100%;height:320px;object-fit:cover}
.hf8-page .hf8-topic-image figcaption{font-size:11px;line-height:1.5;padding:11px;color:#566a61}
.hf8-page .hf8-domains{padding-block:clamp(34px,5vw,60px)}
.hf8-page .hf8-domain-inner{border-bottom:4px solid var(--vc16-aqua)}
.hf8-page .hf8-domain-inner h2{font:600 clamp(28px,3.1vw,44px)/1.1 var(--display,Arial,sans-serif)}
.hf8-page .hf8-plans{padding-block:clamp(44px,6vw,85px)}
.hf8-page .hf8-plan{border-bottom:3px solid var(--vc16-aqua);background:var(--vc16-paper)}
.hf8-page .hf8-plan h3{font-weight:600}
.hf8-page .hf8-technical,.hf8-page .hf8-faq{padding-block:clamp(42px,5vw,75px)}
.hf8-page .hf8-related{padding-bottom:clamp(45px,5vw,75px)}

/* Jobs und Unternehmen nutzen dieselben bekannten Text-/Bildabstaende. */
.vc14-jobs .vc14-jobs-hero .display{font:600 clamp(42px,5.2vw,78px)/1.05 var(--display,Arial,sans-serif);max-width:24ch}
.vc14-jobs .vc14-point-grid{gap:0 24px}
.vc16-company-story{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(25px,5vw,65px);align-items:center;margin-top:clamp(35px,5vw,80px);padding-top:clamp(35px,5vw,65px);border-top:1px solid var(--vc16-line)}
.vc16-company-story h2{font:600 clamp(29px,3.2vw,45px)/1.1 var(--display,Arial,sans-serif);margin:12px 0 22px}
.vc16-company-story p:not(.eyebrow){font-size:16px;line-height:1.75;max-width:63ch}
.vc16-company-story figure{margin:0;border-right:14px solid var(--vc16-aqua);border-bottom:14px solid var(--vc16-aqua);background:var(--vc16-paper)}
.vc16-company-story img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.vc16-company-story figcaption{padding:11px 14px;font-size:11px;line-height:1.5}

@media(max-width:1050px){
 .hf8-page .hf8-topic-split,.vc14-page .hf4-service-intro.vc14-service-hero-grid{gap:28px}
 .hf8-page .hf8-linkcard .vc13-card-image{height:180px}
}
@media(max-width:850px){
 .vc14-page .hf4-service-intro.vc14-service-hero-grid,.hf8-page .hf8-topic-split,.vc14-page .vc14-opening,.vc16-company-story{grid-template-columns:minmax(0,1fr)}
 .vc14-page .vc16-service-visual .hf4-service-photo,.hf8-page .hf8-topic-image img{height:clamp(210px,46vw,340px)}
 .hf8-page .hf8-cardgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:680px){
 .vc14-page .hf4-service-hero{padding-block:30px 42px}
 .vc14-page .hf4-service-intro.vc14-service-hero-grid h1,.hf8-page .hf8-intro .display,.hf8-page .hf8-topic-split h1{font-size:clamp(34px,9.4vw,54px);max-width:none;overflow-wrap:break-word}
 .vc14-page .vc14-opening{padding-block:39px;gap:17px}
 .vc14-page .vc14-opening>div h2{font-size:clamp(30px,8vw,41px)}
 .vc14-page .vc14-detail{padding-block:38px}
 .vc14-page .vc14-point-grid{grid-template-columns:minmax(0,1fr)}
 .vc14-page .vc14-next-step.vc16-inline-next-step{padding:23px 18px}
 .hf8-page .hf8-cardgrid{grid-template-columns:minmax(0,1fr)}
 .hf8-page .hf8-linkcard .vc13-card-image{height:clamp(195px,52vw,285px)}
 .hf8-page .hf8-intro{padding-block:34px}
 .hf8-page .hf8-topic-split{padding-top:20px}
 .vc16-company-story{margin-top:31px;gap:23px}
 body:not(.shop-body) .cta-section .vc15-cta-contact{display:grid;grid-template-columns:1fr}
 body:not(.shop-body) .cta-section .vc15-cta-contact a{width:100%}
}
@media(prefers-reduced-motion:reduce){.vc14-page *, .hf8-page *{scroll-behavior:auto!important}}