:root {
  color-scheme:light;
  --navy:#14243c; --ink:#2e3e58; --steel:#4b6b8b; --mist:#abc5d9;
  --ice:#e8f0f6; --paper:#f1f6fa; --line:#cfdce7;
  --gutter:clamp(18px,4vw,50px);
  --section-space:clamp(44px,6.1vw,84px);
  --card-space:clamp(20px,3.1vw,36px);
  --card-gap:clamp(14px,2vw,24px);
  --card-radius:14px;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*,*::before,*::after { box-sizing:border-box }
body { margin:0; color:var(--navy); background:var(--paper); font-size:16px; line-height:1.65 }
a { color:inherit }
img { display:block; max-width:100%; height:auto }
figure,p,h1,h2,h3,blockquote { margin:0 }
h1,h2,h3 { font-weight:530; letter-spacing:-.047em; line-height:1.12; text-wrap:balance }
h2 { font-size:clamp(28px,3.2vw,46px) }
h3 { font-size:clamp(21px,2.1vw,29px); letter-spacing:-.035em }
h1 em { color:var(--mist); font-style:normal }
.hero h1 em { display:block }
.subhero h1 em { display:inline }
.sales-hero h1 em { display:block }
.frame { width:min(1232px,calc(100% - 2 * var(--gutter))); margin-inline:auto }
.skip { position:fixed; top:12px; left:12px; z-index:4; background:white; padding:10px; transform:translateY(-150%) }
.skip:focus { transform:none }
:focus-visible { outline:3px solid #4384a8; outline-offset:4px }
.masthead { background:#f7fbfe; border-bottom:1px solid var(--line) }
.masthead-inner,.footer-inner { min-height:80px; display:flex; align-items:center; justify-content:space-between; gap:24px }
.brand { display:block; flex:0 0 auto }
nav { display:flex; align-items:center; gap:24px }
nav a { text-decoration:none; font-size:14px; font-weight:560; padding-block:6px; border-bottom:2px solid transparent }
nav a:hover,nav a[aria-current=page] { border-color:var(--steel) }
.masthead nav a[href="kontakt.html"] { padding:8px 14px; border:1px solid var(--line); border-radius:8px }
.masthead nav a[href="kontakt.html"]:hover,.masthead nav a[href="kontakt.html"][aria-current=page] { border-color:var(--steel) }
.hero { background:var(--navy); color:#fff; position:relative; overflow:hidden }
.hero::before,.next::before { content:""; position:absolute; inset:0; background:repeating-linear-gradient(135deg,transparent 0 53px,#abc5d910 54px,#abc5d910 55px,transparent 56px 110px); pointer-events:none }
.hero-inner { position:relative; display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); align-items:stretch; gap:clamp(24px,3vw,44px); min-height:510px; padding-block:clamp(24px,4vw,48px) }
.hero-copy { padding-block:36px; align-self:center }
.label { font-size:11px; font-weight:620; letter-spacing:.13em; text-transform:uppercase; color:var(--steel); display:flex; align-items:center; gap:10px }
.label::before { content:""; width:21px; height:2px; background:currentColor; flex:none }
.hero .label,.contact-head .label { color:var(--mist) }
.hero h1,.contact-head h1 { font-size:clamp(30px,calc(20px + 2.65vw),62px); margin:18px 0 20px }
.lead { max-width:50ch; color:#d4e1ee; line-height:1.65 }
.actions { display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:29px }
.button,.quiet,.text-link { display:inline-flex; gap:13px; align-items:center; justify-content:space-between; font-weight:580; text-decoration:none; width:fit-content; font-size:14px }
.button { padding:12px 16px; min-height:46px; background:var(--navy); color:white; border:1px solid transparent; border-radius:8px }
.hero .button { background:var(--ice); color:var(--navy) }
.button:hover { background:var(--steel) }
.hero .button:hover { background:#fff }
.quiet,.text-link { border-bottom:1px solid currentColor; padding-block:4px }
.quiet:hover { color:var(--mist) }
.text-link:hover { color:var(--steel) }
.photo { position:relative; overflow:hidden; background:var(--steel); min-height:270px }
.photo img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; filter:saturate(.78) contrast(1.035) }
.photo::after { content:""; position:absolute; inset:0; background:#4b6b8b; mix-blend-mode:soft-light; opacity:.16; pointer-events:none }
.photo-figure { display:grid; grid-template-rows:minmax(0,1fr) auto; min-width:0 }
.photo-figure figcaption { margin-top:5px; text-align:right; color:var(--steel); font-size:8px; line-height:1.5 }
.hero .photo-figure figcaption { margin-top:15px; color:var(--mist) }
.subhero .hero-inner { min-height:475px }
.group,.detail { padding-block:var(--section-space) }
.section-intro h2 { margin-top:12px }
.roles { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:30px }
.role { display:flex; flex-direction:column; align-items:flex-start; min-height:310px; padding:30px; background:#f8fbfd; border:1px solid var(--line); border-top:4px solid var(--steel) }
.role-logo { display:flex; width:100%; align-items:center; height:70px; margin-bottom:clamp(15px,2vw,24px) }
.role-logo > img { width:154px }
.sales-logo { display:block; position:relative; width:min(154px,100%); aspect-ratio:412 / 181; overflow:hidden; mix-blend-mode:multiply }
.sales-logo img { position:absolute; top:-2.21%; left:-20.15%; width:145.63%; max-width:none }
.sales-role { background:var(--ice); border-top-color:var(--mist) }

.role h3 { margin:13px 0 8px }
.role p:not(.label),.feature p:not(.label),.detail p:not(.label),.contact-body p:not(.label) { color:var(--ink); max-width:52ch }
.role .text-link { margin-top:auto }
.role p:not(.label) { margin-bottom:17px }
.feature { background:var(--ice); border-block:1px solid var(--line) }
.feature-inner { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); align-items:center; gap:clamp(30px,7vw,107px); padding-block:42px }
.feature h2 { margin:14px 0 16px }
.feature .text-link { margin-top:18px }

.feature-links { display:flex; flex-wrap:wrap; gap:0 20px }
.sales-support { scroll-margin-top:16px; padding-block:var(--section-space); background:var(--ice); border-top:1px solid var(--line) }
.sales-support .section-intro > p:last-child { max-width:58ch; margin-top:12px; color:var(--ink) }
.support-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--card-gap); margin-top:clamp(22px,3vw,34px) }
.support-option { padding:var(--card-space); background:#f8fbfd; border:1px solid var(--line); border-radius:var(--card-radius) }
.support-option h3 { margin:10px 0 8px }
.support-option p:not(.label),.support-flow li p { color:var(--ink) }
.support-flow { margin-top:clamp(26px,4vw,44px); padding-top:clamp(20px,3vw,28px); border-top:1px solid var(--line) }
.support-flow ol { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--card-gap); margin:18px 0 0; padding:0; list-style:none }
.support-flow li { display:grid; grid-template-columns:32px minmax(0,1fr); gap:10px; align-items:start }
.step-number { display:grid; place-items:center; width:32px; height:32px; border:1px solid var(--line); border-radius:50%; color:var(--steel); font-size:12px; font-weight:650; font-variant-numeric:tabular-nums }
.support-flow li strong { display:block; font-weight:620; margin-top:3px }
.support-flow li p { margin-top:4px }
.projects { scroll-margin-top:16px; padding-block:var(--section-space); background:#f8fbfd; border-top:1px solid var(--line) }
.projects .section-intro > p:last-child { max-width:58ch; color:var(--ink); margin-top:12px }
.project-card { display:grid; grid-template-columns:minmax(0,.76fr) minmax(0,1.24fr); margin-top:var(--card-gap); overflow:hidden; border:1px solid var(--line); border-radius:var(--card-radius); background:var(--paper) }
.project-card:first-of-type { margin-top:clamp(22px,3vw,34px) }
.project-visual { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:var(--card-space); background:var(--navy); color:var(--mist) }
.project-visual svg { width:min(100%,224px); height:auto }
.project-visual p { color:white; line-height:1.12 }
.project-visual strong { font-size:clamp(38px,5.35vw,70px); font-weight:500; font-variant-numeric:tabular-nums; letter-spacing:-.055em }
.project-visual p span { font-size:clamp(15px,2vw,25px); font-weight:520 }
.project-visual-label { margin-top:7px; font-size:11px; letter-spacing:.12em; text-transform:uppercase }
.project-content { align-self:center; padding:var(--card-space) }
.project-content h3 { margin:10px 0 9px }
.project-content p:not(.label) { max-width:57ch; color:var(--ink) }
.project-content .project-credit { margin:14px 0 7px; font-size:13px }

.quote { padding-block:63px; border-bottom:1px solid var(--line) }
.quote blockquote { max-width:29ch; font-size:clamp(24px,2.8vw,39px); font-weight:480; line-height:1.23; letter-spacing:-.035em; margin-top:14px }
.next { position:relative; background:var(--ice) }
.next-inner { position:relative; display:flex; align-items:center; justify-content:space-between; gap:28px; padding-block:56px 60px }
.next h2 { font-size:clamp(27px,3vw,43px); margin:13px 0 9px }
.next p:not(.label) { color:var(--ink); max-width:54ch }
.next .button { flex:none }
.detail { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:clamp(35px,8vw,112px) }
.detail-list { border-top:1px solid var(--line) }
.detail-list article { display:grid; grid-template-columns:clamp(24px,4vw,37px) minmax(0,1fr); gap:10px; padding-block:22px; border-bottom:1px solid var(--line) }
.detail-list article>span { color:var(--steel); font-size:12px; font-weight:700 }
.detail-list p { margin:8px 0 0 }
.detail-list .text-link { margin-top:8px }
.sales-detail-mark { width:min(210px,100%); margin-top:23px }
.contact-head { background:var(--navy); color:white; padding-block:55px 65px }
.contact-head h1 { margin:15px 0 }
.contact-body { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(26px,6vw,87px); padding-block:var(--section-space) }
.contact-info { display:grid; gap:24px }
.contact-info article { padding-bottom:20px; border-bottom:1px solid var(--line) }
.contact-info h2,.contact-card h2 { font-size:clamp(24px,3.3vw,38px); margin:9px 0 11px }
.contact-method { display:flex; align-items:center; gap:9px; min-height:44px; width:fit-content; max-width:100%; overflow-wrap:anywhere; text-underline-offset:.22em }
.contact-info address { font-style:normal; margin:0 0 8px }
.contact-card { background:var(--ice); padding:var(--card-space); align-self:start; border:1px solid var(--line); border-radius:var(--card-radius) }
/* Shared contact icons and controls. */
.icon { display:block; width:20px; height:20px; flex:none }
.button .icon:last-child,.quiet .icon,.text-link .icon { width:15px; height:15px }
.masthead .nav-whatsapp { display:grid; place-items:center; min-width:44px; min-height:44px; padding:0; border:1px solid var(--line); border-radius:50%; color:var(--navy) }
.masthead .nav-whatsapp:hover { background:var(--ice); border-color:var(--steel) }
.contact-options { display:grid; gap:var(--card-gap); align-content:start; min-width:0 }
.contact-card-title { display:flex; align-items:center; gap:13px; margin-bottom:13px }
.contact-card-title h2 { margin:5px 0 0 }
.channel-icon { display:grid; place-items:center; width:44px; height:44px; flex:none; border-radius:50%; background:var(--navy); color:var(--ice) }
.contact-card .button { margin-top:18px }
.contact-form { margin-top:20px }
.contact-form:not([hidden]) { display:grid; gap:14px }
.contact-form label { display:block; font-weight:600; font-size:14px }
.contact-form label span { font-weight:400 }
.contact-form :is(input,select,textarea) { width:100%; min-width:0; min-height:44px; margin-top:5px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; color:var(--navy); background:white; font:inherit; font-size:16px; font-weight:400 }
.contact-form textarea { resize:vertical }
.contact-form .button { justify-self:start; margin-top:3px; font-family:inherit; cursor:pointer }
.whatsapp-card { background:#f8fbfd }
.whatsapp-button { gap:8px }
.contact-note { margin-top:15px; font-size:13px }
footer { background:var(--navy); color:var(--ice) }
.footer-inner { min-height:103px }
.hero .photo { box-shadow:clamp(6px,1vw,12px) clamp(6px,1vw,12px) 0 #abc5d931 }
.hero .photo-figure { align-self:center }
.hero .photo--montage,.feature .photo--montage { aspect-ratio:3 / 2; min-height:0; max-height:none }
.photo--montage img { object-fit:contain }
.hero .photo--fundament { aspect-ratio:3 / 2; min-height:0; align-self:center }
.photo--fundament img { object-fit:contain; background:#16263a }
.footer-inner p,.footer-inner nav a,.footer-linkedin { font-size:13px }
.footer-contact { display:flex; align-items:center; gap:6px 16px; flex-wrap:wrap }
.footer-linkedin { display:inline-flex; align-items:center; gap:5px; min-height:44px; text-underline-offset:.22em }
.linkedin-icon { width:19px; height:19px }
.linkedin-contact span { min-width:0 }


.legal-body { padding-block:var(--section-space) }
.legal-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,3vw,32px); align-items:start }
.legal-card { background:#f8fbfd; border:1px solid var(--line); border-radius:var(--card-radius); padding:var(--card-space) }
.legal-card h2,.legal-disclosure h2 { font-size:clamp(25px,3vw,37px); margin:11px 0 }
.legal-card address { font-style:normal; color:var(--ink) }
.legal-card dl { margin:20px 0 0 }
.legal-card dl div { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:7px 14px; padding:10px 0; border-top:1px solid var(--line) }
.legal-card dt { font-size:13px; font-weight:620; color:var(--steel) }
.legal-card dd { margin:0; overflow-wrap:anywhere; color:var(--ink); font-size:15px }
.legal-card dd a { text-underline-offset:.2em }
.legal-disclosure { margin-top:30px; padding:23px 0 0; border-top:1px solid var(--line) }
.legal-disclosure p:not(.label) { max-width:65ch; color:var(--ink) }

.privacy-body { max-width:900px }
.privacy-nav { display:flex; flex-wrap:wrap; gap:8px 12px; margin-bottom:24px }
.privacy-nav a { display:inline-flex; align-items:center; min-height:44px; padding:7px 12px; border:1px solid var(--line); border-radius:8px; background:#f8fbfd }
.privacy-nav a:hover { border-color:var(--steel) }
.privacy-card { margin-bottom:16px; scroll-margin-top:16px; overflow-wrap:anywhere }
.privacy-card:last-child { margin-bottom:0 }
.privacy-card p:not(.label),.privacy-card ul { max-width:72ch; color:var(--ink) }
.privacy-card p + p,.privacy-card ul { margin-top:12px }
.privacy-card ul { padding-left:20px }
.privacy-card a { text-underline-offset:.2em }
.contact-head h1 { overflow-wrap:anywhere }

@media (max-width:960px) {
  .hero-inner { min-height:450px }
  .hero-copy { padding-block:24px }
}
@media (max-width:800px) {
  .support-flow ol { grid-template-columns:minmax(0,1fr) }
  .hero-inner,.subhero .hero-inner { grid-template-columns:minmax(0,1fr); min-height:0; padding-block:32px 24px }
  .hero-copy { padding:0 }
  .hero h1 { margin:14px 0 16px }
  .hero .photo { min-height:0; aspect-ratio:3 / 2; max-height:385px }
  .actions { margin-top:20px }
}
@media (max-width:690px) {
  .hero .photo--fundament,.hero .photo-figure {
    width:calc(100% + 2 * var(--gutter));
    margin-inline:calc(-1 * var(--gutter));
  }
  .hero .photo { box-shadow:none }
  .hero .photo-figure figcaption { margin-top:5px; padding-inline:var(--gutter) }
  .masthead-inner { align-items:flex-start; flex-direction:column; gap:6px; padding:13px 0 8px }
  .masthead .brand img { width:130px }
  .masthead nav { width:100%; justify-content:space-between; gap:5px }
  .masthead nav a { display:inline-flex; align-items:center; min-height:44px; padding:5px 0; font-size:13px }
  .masthead nav a[href="kontakt.html"] { padding-inline:8px }
  .feature-inner,.detail,.contact-body,.roles,.legal-grid,.project-card,.support-options { grid-template-columns:minmax(0,1fr) }
  .feature-inner { padding-block:20px 33px; gap:23px }
  .roles { margin-top:22px }
  .role { min-height:0; padding:22px }
  .quote { padding-block:41px }
  .next-inner { flex-wrap:wrap; gap:17px; padding-block:39px }
  .contact-head { padding-block:34px 43px }
  .project-visual svg { width:min(100%,180px) }
  .footer-inner { flex-wrap:wrap; padding-block:20px; gap:12px }
  .footer-inner .brand { width:100% }
}
@media (max-width:390px) {
  .legal-card dl div { grid-template-columns:minmax(0,1fr); gap:1px }
  .contact-card .button { width:100%; justify-content:flex-start }
  .contact-card .button .icon:last-child { margin-left:auto }
  .footer-inner nav { gap:20px }
}