/* Installation & Montage (pages/installation.py). Page-only classes use the ins- prefix;
   overrides of shared components are scoped to ins- sections. */

/* one band padding for every section between hero strip and footer */
.ins-hero~section{--ins-pad:50px}
.ins-hero~section:where(:not(.ins-strip,.cta)){padding:var(--ins-pad) 0}

/* outlined secondary button (concept: hero and closing banner) */
.btn.ins-ghost{background:#fff;color:var(--ink);border-color:var(--line-strong)}
.btn.ins-ghost:hover{background:#fff;color:var(--ink);border-color:var(--ink)}
.btn.ins-ghost svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6}

/* hero: text column of width --ins-txt, the photo takes the rest and fades in at its own left edge.
   The photo file has a 90 px ceiling band on top that sits under the transparent header. */
.chero.ins-hero{min-height:650px;padding-bottom:48px;--ins-txt:clamp(510px,calc(21.77vw + 253px),600px)}
.chero.ins-hero::before{display:none}
.ins-hero .chero-img{width:calc(100% - max(var(--gutter), (100% - var(--wrap)) / 2 + var(--gutter)) - var(--ins-txt))}
.ins-hero .chero-img::before{content:"";position:absolute;z-index:1;top:0;bottom:0;left:-1px;width:92px;pointer-events:none;background:linear-gradient(90deg,#fff 0,rgba(255,255,255,.55) 40%,rgba(255,255,255,0) 100%)}
.ins-hero .chero-img img{object-position:100% 100%}
.ins-hero .chero-text{max-width:calc(var(--ins-txt) - 24px)}
.ins-hero .lead{max-width:none}
.ins-hero .actions{gap:18px 20px}
.ins-hero .note{max-width:none}

/* four facts under the hero */
.ins-strip{background:#fff;border-bottom:1px solid var(--line)}
.ins-strip .wrap{display:grid;grid-template-columns:repeat(4,1fr);padding-top:36px;padding-bottom:36px}
.ins-strip-item{display:flex;align-items:flex-start;gap:26px;padding:4px 32px}
.ins-strip-item:first-child{padding-left:0}
.ins-strip-item+.ins-strip-item{border-left:1px solid var(--line)}
.ins-strip .ico{width:54px;height:54px;stroke-width:1.15;color:var(--ink)}
.ins-strip strong{display:block;font-size:22px;font-weight:500;line-height:1.25;letter-spacing:-.015em;color:var(--ink);margin-bottom:6px}
.ins-strip p{font-size:16.5px;line-height:1.5;color:var(--muted)}

/* photo cards: finished result (4) and mounting options (5) */
.ins-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:34px}
.ins-head h2{margin-bottom:16px}
.ins-label{font-size:15px;color:var(--muted);white-space:nowrap}
.ins-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.ins-cards--5{grid-template-columns:repeat(5,1fr);gap:28px}
.ins-card{margin:0}
.ins-card img{width:100%;height:auto;aspect-ratio:412/352;object-fit:cover}
.ins-cards--5 .ins-card img{aspect-ratio:320/333}
.ins-card figcaption{padding-top:22px}
.ins-card h3{font-size:21px;letter-spacing:-.015em;margin-bottom:6px}
.ins-card p{font-size:16.5px;line-height:1.5;color:var(--muted)}

/* what the installation includes */
.ins-scope{background:linear-gradient(180deg,var(--band) 0%,#f6f9fb 100%);border-top:1px solid var(--line)}
.ins-scope .wrap{display:grid;grid-template-columns:1.15fr 1.7fr;gap:64px}
.ins-scope-text{display:flex;flex-direction:column}
.ins-scope-text .sub{margin-top:24px;max-width:540px}
.ins-scope-text .small{margin-top:auto;padding-top:36px}
.ins-scope-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(4,auto);grid-auto-flow:column;gap:36px 48px;align-content:center}
.ins-scope-list li{display:flex;align-items:flex-start;gap:28px}
.ins-scope-list .ico{width:46px;height:46px;stroke-width:1.2;color:var(--ink)}
.ins-scope-list strong{display:block;font-size:20px;font-weight:500;line-height:1.3;letter-spacing:-.01em;color:var(--ink);margin-bottom:4px}
.ins-scope-list span{font-size:16.5px;line-height:1.5;color:var(--muted)}

/* mounting options */
.ins-mounts{border-top:1px solid var(--line)}
.ins-mounts h2{margin-bottom:36px}

/* five steps: shared .next/.flow, stretched to five columns */
.ins-ablauf .wrap{grid-template-columns:.85fr 2.15fr}
.ins-ablauf .flow{grid-template-columns:repeat(5,1fr)}
.ins-ablauf .flow::before{left:42px;right:calc(20% - 42px);top:42px}
.ins-ablauf .flow>div{padding:0 22px 0 0}
.ins-ablauf .flow>div+div::before{display:none}
.ins-ablauf .flow .ring{width:84px;height:84px;margin-bottom:24px}
.ins-ablauf .flow .ring .ico{width:32px;height:32px;stroke-width:1.3}

/* site readiness: photo left, checks right */
.ins-ready{border-top:1px solid var(--line)}
.ins-ready .wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:64px;align-items:center}
.ins-ready-img img{width:100%;height:auto;aspect-ratio:913/550;object-fit:cover}
.ins-ready-text .sub{margin:18px 0 26px;max-width:720px}
.ins-checks{list-style:none;margin:0 0 28px;padding:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,auto);grid-auto-flow:column;gap:16px 40px}
.ins-checks li{display:flex;align-items:center;gap:16px;font-size:18px;color:var(--ink)}
.ins-checks .ico{width:30px;height:30px}
.ins-inset{display:flex;align-items:flex-start;gap:20px;background:var(--band);border:1px solid var(--line);padding:22px 26px;margin-bottom:24px}
.ins-inset .ico{width:30px;height:30px;color:var(--ink)}
.ins-inset p{font-size:17px;line-height:1.5;color:var(--text)}
.ins-inset strong{font-weight:500;color:var(--ink)}

/* handover band */
.ins-hand{background:linear-gradient(180deg,var(--band) 0%,#f6f9fb 100%);border-top:1px solid var(--line)}
.ins-hand .wrap{display:grid;grid-template-columns:1.05fr 2fr;gap:48px;align-items:center}
.ins-hand-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.ins-hand-grid>div{padding:6px 28px;border-left:1px solid var(--line-strong)}
.ins-hand-grid .ico{width:46px;height:46px;stroke-width:1.2;color:var(--ink);margin-bottom:20px}
.ins-hand-grid h3{margin-bottom:8px}
.ins-hand-grid p{font-size:16.5px;line-height:1.5;color:var(--muted)}

/* region: shared .place with the date callout instead of the word stack; pale map as in the concept */
.place.ins-region{background:#fff;padding:calc(var(--ins-pad) - 5px) 0}
.ins-region .wrap{grid-template-columns:1.5fr .55fr 1fr;gap:56px}
.ins-region .map{max-width:236px;justify-self:center}
.ins-region .map .land{fill:#e8edf2;stroke:#d3dbe4;stroke-width:1.2}
.ins-region .map .area{fill:#c3d1e0}
.ins-region .map text{font-size:26px;font-weight:500}
.ins-date{display:flex;align-items:flex-start;gap:28px;border:1px solid var(--line);padding:40px 40px 42px}
.ins-date>.ico{width:52px;height:52px;stroke-width:1.2;color:var(--ink)}
.ins-date h3{font-size:24px;letter-spacing:-.02em;margin-bottom:10px;text-wrap:balance}
.ins-date p{color:var(--muted);margin-bottom:26px}
.ins-date .btn{white-space:nowrap}

/* before / after: concept photos at their own aspect, label clear of the screens */
.ins-ba{background:linear-gradient(180deg,var(--band) 0%,#f6f9fb 100%);border-top:1px solid var(--line)}
.ins-ba .wrap{display:grid;grid-template-columns:1fr 2.1fr;gap:48px;align-items:start}
.ins-ba h2{margin-bottom:16px}
.ins-ba-pair{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.ins-ba figure{margin:0}
.ins-ba-img{position:relative}
.ins-ba-img img{width:100%;height:auto;aspect-ratio:581/274;object-fit:cover}
.ins-tag{position:absolute;left:10px;top:10px;background:var(--ink);color:#fff;font-size:15px;font-weight:500;line-height:1;padding:8px 12px;border-radius:var(--radius)}
.ins-ba figcaption{margin-top:16px;font-size:16.5px;color:var(--muted)}

/* who brings what */
.ins-split{border-top:1px solid var(--line)}
.ins-split .wrap{display:grid;grid-template-columns:1.12fr 1fr 1fr .62fr;align-items:start}
.ins-split h2{padding-right:32px}
.ins-split-col{padding:0 40px;border-left:1px solid var(--line)}
.ins-split-col h3{font-size:22px;letter-spacing:-.015em;margin-bottom:14px}
.ins-split-col ul{list-style:none;margin:0;padding:0}
.ins-split-col li{display:flex;align-items:center;gap:16px;padding:7px 0;font-size:17px;line-height:1.4;color:var(--text)}
.ins-split-col li:last-child{padding-bottom:0}
.ins-split-col .ico{width:26px;height:26px;color:var(--ink)}
.ins-split-note{align-self:center;border-left:1px solid var(--line);padding-left:40px}

/* faq on a pale band, shared .faq in a white panel */
.qa.ins-qa{background:linear-gradient(180deg,var(--band) 0%,#f6f9fb 100%);border-top:1px solid var(--line)}
.ins-qa .faq{background:#fff;border:1px solid var(--line)}
.ins-qa .faq details:last-child{border-bottom:0}
.ins-qa .faq summary{padding:12px 26px;font-size:18px;line-height:1.45}
.ins-qa .faq details p{padding:0 72px 16px 26px;font-size:16.5px}

/* closing banner: same band padding as the sections; contact line under the logo,
   and in the text column once the shared CSS hides .cta-brand (<=1180) */
.cta.ins-cta .wrap{padding-top:var(--ins-pad);padding-bottom:var(--ins-pad)}
.ins-cta-contact{display:flex;flex-wrap:wrap;gap:6px 24px;margin-top:30px;font-size:15px;font-weight:400;letter-spacing:0;text-transform:none}
.ins-cta-contact a{color:var(--ink);text-decoration:none}
.ins-cta-contact a:hover{text-decoration:underline}
.ins-cta-contact--text{display:none}

/* wide screens: the concept is drawn at 1920 */
@media (min-width:1600px){
  .chero.ins-hero{--ins-txt:clamp(600px,calc(18.75vw + 300px),660px)}
  .chero.ins-hero h1{font-size:clamp(64px,4.3vw,84px)}
  .ins-scope .wrap{grid-template-columns:1.08fr 1.7fr}
  .ins-qa .wrap{grid-template-columns:minmax(0,1fr) minmax(0,2.05fr);gap:56px}
  .ins-qa .faq summary{padding:9px 28px;font-size:19.5px;line-height:1.45}
  .ins-qa .faq details p{padding:0 72px 14px 28px;font-size:17.5px}
}
/* hero framing: the photo is right-aligned (technician and the HYSN lettering whole). Where that would
   start the photo inside the menu text of the first screen (1600-1739), the box stays 924 px wide
   so it starts just after that text; from 1740 the box is wide enough to start before the first screen. */
@media (min-width:1600px) and (max-width:1739px){ .chero.ins-hero{--ins-txt:calc(95.4vw - 924px)} }
@media (min-width:1740px){ .ins-hero .chero-img img{object-position:max(-112px,100%) 100%} }
@media (max-width:1800px){
  .ins-strip strong{font-size:20px}
}
@media (max-width:1599px){
  .ins-region .wrap{grid-template-columns:1.4fr 1fr;row-gap:40px}
  .ins-region .map{max-width:220px}
  .ins-date{grid-column:1/-1;align-items:center}
  .ins-date>div{flex:1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 40px}
  .ins-date>div>h3,.ins-date>div>p{flex:1 1 100%;margin-bottom:0}
  .ins-date>div>p{flex:1 1 360px}
}
@media (max-width:1440px){
  .ins-scope .wrap{gap:56px}
  .ins-ablauf .wrap,.ins-hand .wrap{grid-template-columns:1fr;gap:36px}
  .ins-hand-grid>div:first-child{padding-left:0;border-left:0}
  .ins-checks{column-gap:28px}
  .ins-ready .wrap{grid-template-columns:1.1fr 1fr;gap:56px}
  .ins-strip strong{font-size:19px}
  .ins-strip-item{gap:20px;padding:4px 24px}
  .ins-strip .ico{width:42px;height:42px}
  .ins-split .wrap{grid-template-columns:1fr 1fr 1fr}
  .ins-split-note{grid-column:2/-1;border-left:0;padding:26px 40px 0;max-width:none}
}
@media (max-width:1180px){
  .ins-hero~section{--ins-pad:48px}
  /* stacked hero (as the shared <=960 hero), photo full width below the text */
  .chero.ins-hero{min-height:0;flex-direction:column;align-items:stretch;padding:calc(var(--head) + 28px) 0 0}
  .ins-hero .chero-text{max-width:none}
  .ins-hero .lead{max-width:640px}
  .ins-hero .chero-img{order:2;position:relative;width:100%;height:auto;aspect-ratio:2/1;margin-top:44px;overflow:hidden}
  .ins-hero .chero-img::before{display:none}
  /* taller than the box and bottom-aligned, so the ceiling band of the file stays out of view */
  .ins-hero .chero-img img{position:absolute;left:0;bottom:0;width:100%;height:116.8%;object-position:100% 100%}
  .ins-strip .wrap{grid-template-columns:1fr 1fr;row-gap:32px}
  .ins-strip-item:nth-child(3){padding-left:0;border-left:0}
  .ins-cards{grid-template-columns:1fr 1fr;row-gap:40px}
  /* five cards as 3 + 2, the second row centred */
  .ins-cards--5{grid-template-columns:repeat(6,1fr)}
  .ins-cards--5>.ins-card{grid-column:span 2}
  .ins-cards--5>.ins-card:nth-child(4){grid-column:2/span 2}
  .ins-scope .wrap{grid-template-columns:1fr;gap:44px}
  .ins-scope-text .small{padding-top:20px}
  .ins-ablauf .wrap,.ins-hand .wrap,.ins-ba .wrap{grid-template-columns:1fr;gap:40px}
  .ins-ablauf .flow>div{padding-right:16px}
  /* readiness stacked: photo, then text with the checks in two columns */
  .ins-ready .wrap{grid-template-columns:1fr;gap:40px}
  .ins-ready-img img{aspect-ratio:16/9}
  .ins-checks{grid-template-columns:1fr 1fr;column-gap:40px}
  .ins-region .wrap{grid-template-columns:1fr auto}
  .ins-region .map{max-width:240px}
  .ins-date{grid-column:1/-1}
  .ins-split .wrap{grid-template-columns:1fr 1fr;row-gap:36px}
  .ins-split h2{grid-column:1/-1}
  .ins-split-col:nth-of-type(1){border-left:0;padding-left:0}
  .ins-split-note{grid-column:1/-1;padding:0}
  .ins-cta-contact--text{display:flex;margin-top:22px;gap:0 32px;font-size:17px}
  .ins-cta-contact--text a{display:inline-block;padding:10px 0;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:5px}
}
@media (max-width:960px){
  /* all three screens and the whole technician: the photo starts just before the first screen */
  .ins-hero .chero-img{aspect-ratio:1.85/1}
  .ins-hero .chero-img img{object-position:82.5% 100%}
  .ins-head{flex-direction:column;align-items:flex-start;gap:8px}
  /* five cards as 2 + 2 + 1, the last one centred */
  .ins-cards--5{grid-template-columns:repeat(4,1fr)}
  .ins-cards--5>.ins-card:nth-child(4){grid-column:auto/span 2}
  .ins-cards--5>.ins-card:nth-child(5){grid-column:2/span 2}
  .ins-ablauf .flow{grid-template-columns:1fr;gap:26px}
  .ins-ablauf .flow::before{display:none}
  .ins-ablauf .flow>div:not(:last-child)::after{content:"";position:absolute;left:28px;top:56px;bottom:-26px;border-left:1px solid var(--line-strong)}
  .ins-ablauf .flow>div{display:grid;grid-template-columns:56px 1fr;column-gap:22px;padding:0}
  .ins-ablauf .flow .ring{grid-row:1/4;width:56px;height:56px;margin:0}
  .ins-ablauf .flow .ring .ico{width:24px;height:24px}
  .ins-ablauf .flow b{margin-bottom:2px}
  .ins-hand-grid{grid-template-columns:1fr 1fr;row-gap:36px}
  .ins-hand-grid>div:nth-child(odd){padding-left:0;border-left:0}
  /* map stays beside the text; it gives way first so the heading keeps two lines */
  .ins-region .wrap{grid-template-columns:minmax(380px,1fr) minmax(140px,200px);column-gap:30px}
  .ins-region .map{width:100%;max-width:200px;justify-self:end}
  .ins-region .map text{font-size:32px}
}
@media (max-width:620px){
  .ins-hero~section{--ins-pad:44px}
  /* phones: closer 4:3 framing, second and third screen plus the technician */
  .ins-hero .chero-img{aspect-ratio:4/3}
  .ins-hero .chero-img img{object-position:93.5% 100%}
  .ins-strip .wrap{grid-template-columns:1fr;row-gap:0;padding-top:28px;padding-bottom:28px}
  .ins-strip-item,.ins-strip-item+.ins-strip-item{padding:20px 0;border-left:0;border-top:1px solid var(--line)}
  .ins-strip-item:first-child{border-top:0;padding-top:0}
  .ins-strip-item:last-child{padding-bottom:0}
  .ins-strip .ico{width:38px;height:38px}
  .ins-cards,.ins-cards--5{grid-template-columns:1fr;row-gap:34px}
  .ins-cards--5>.ins-card,.ins-cards--5>.ins-card:nth-child(4),.ins-cards--5>.ins-card:nth-child(5){grid-column:auto}
  .ins-card img{aspect-ratio:4/3}
  /* mounting photos almost uncropped, so stele bases and surroundings stay visible */
  .ins-cards--5 .ins-card img{aspect-ratio:1/1;object-position:50% 100%}
  .ins-card figcaption{padding-top:16px}
  .ins-scope-list{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row;gap:26px}
  .ins-scope-list li{gap:20px}
  .ins-scope-list .ico{width:38px;height:38px}
  .ins-checks{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row}
  .ins-hand-grid{grid-template-columns:1fr}
  .ins-hand-grid>div,.ins-hand-grid>div:nth-child(odd){padding:24px 0 0;border-left:0;border-top:1px solid var(--line-strong)}
  .ins-hand-grid>div:first-child{border-top:0;padding-top:0}
  .ins-hand-grid>div,.ins-hand-grid>div:nth-child(odd){display:grid;grid-template-columns:40px 1fr;column-gap:20px}
  .ins-hand-grid .ico{grid-row:1/3;width:38px;height:38px;margin:0}
  .ins-region .wrap{grid-template-columns:minmax(0,1fr)}
  .ins-region .map{width:100%;max-width:220px;justify-self:start}
  .ins-region .map text{font-size:26px}
  .ins-date{flex-direction:column;align-items:flex-start;gap:18px;padding:28px 24px}
  .ins-date>div>p{margin-bottom:14px}
  .ins-date .btn{white-space:normal}
  .ins-hero .actions .btn,.cta .actions .btn{gap:14px;padding-left:20px;padding-right:20px}
  .ins-ba-pair{grid-template-columns:1fr;gap:28px}
  .ins-tag{left:8px;top:8px;font-size:13.5px;padding:7px 10px}
  .ins-split .wrap{grid-template-columns:1fr}
  .ins-split-col,.ins-split-col:nth-of-type(1){border-left:0;padding:0}
  .ins-qa .faq summary{padding:14px 18px;min-height:52px}
  .ins-qa .faq details p{padding:0 18px 20px}
  .ins-cta-contact--text{flex-direction:column;align-items:flex-start;margin-top:14px}
}