/* Landing page: hero, services teaser, process, selected projects, banner, about and contact section.
   Breakpoints: > 1100px desktop | <= 1100px tablet landscape | <= 900px tablet portrait (hero stacked, services as rows,
   process steps as a swipe strip) | <= 600px phone. The responsive rules of each section follow at the end of the file.
   The circuit background shines through Process and About, which therefore have no opaque background. */

/* ---------- HERO ---------- */
.hero{position:relative;min-height:640px;overflow:hidden;background:var(--bg);padding-top:92px}
.hero-img{position:absolute;top:0;right:0;bottom:0;width:54%;clip-path:polygon(22% 0,100% 0,100% 100%,0 100%)}
.hero-img .ph{width:100%;height:100%}
.hero-img .ring{position:absolute;left:28%;top:8%;width:230px;height:230px;border:1px solid rgba(255,255,255,.55);border-radius:50%;pointer-events:none}
.hero-img .note{position:absolute;color:#fff}
.hero-img .n1{left:34%;top:18%}
.hero-img .n1::after{content:"";display:block;width:34px;height:1px;background:#fff;margin-top:14px}
.hero-img .n2{right:48px;bottom:32px;font-size:12px}
.hero-pager{position:absolute;right:48px;top:120px;display:flex;flex-direction:column;gap:12px;font-size:12px;color:#fff}
.hero-pager span{display:flex;align-items:center;gap:10px}
.hero-pager .bar{position:absolute;left:-14px;top:24px;width:1px;height:70px;background:rgba(255,255,255,.7)}
.hero-content{position:relative;z-index:4;max-width:var(--maxw);margin:0 auto;padding:40px 48px 80px}
.hero-content .eyebrow{font-style:italic;letter-spacing:.2em;font-size:13px;margin-bottom:18px}
/* Headline: max-width 10em fixes the line breaks at every size (DE "WIR VERBINDEN," / "WAS ZUSAMMEN-" / "GEHÖRT" via the
   soft hyphen of the content text, EN "WE CONNECT" / "WHAT BELONGS" / "TOGETHER"). The widest line is about 9.1em, so the
   font sizes below keep it inside the text column: beside the slanted photo edge from 901px, inside the padding below. */
.hero h1{font-size:clamp(44px,5vw,64px);max-width:10em}
.hero p.lead{max-width:470px;color:var(--ink-2);font-size:15px;margin-top:26px}
/* The claim is set in the display font, whose italic face is loaded, so its <em> word is real italics, not a slanted Inter */
.hero .claim{font-family:var(--display);font-size:24px;font-weight:400;line-height:1.3;margin-top:18px}
.hero-ctas{display:flex;align-items:center;gap:22px;margin-top:34px}
.play{display:inline-flex;align-items:center;gap:12px;font-size:13px;text-decoration:underline;text-underline-offset:3px}
.play .circle-btn svg{width:12px;height:12px}

/* ---------- SERVICES ----------
   Three equally wide columns (minmax(0,1fr)). The gap between the columns is a pure column-gap (--svc-gap), no padding or
   margin on the cards, so column 1 ends flush with the left and column 3 with the right edge of .wrap.
   From 901px: the divider is a pseudo element (.svc + .svc::before) in the middle of the gap, full card height. Subgrid:
   .grid has four explicit rows (number / title / list / image), every .svc spans all four and takes them over with
   grid-template-rows:subgrid, so number, title, list and image of all columns share rows and the title row is as high as
   the tallest title (the two-line "AUTOMATION & KI") without a fixed min-height. Up to 900px the row/stack layout below applies. */
.services{padding:40px 0 70px}
.services .grid{--svc-gap:64px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:28px}
@media (min-width:901px){
  .services .grid{grid-template-rows:repeat(4,auto);column-gap:var(--svc-gap)}
  .svc{position:relative;display:grid;grid-row:span 4;grid-template-columns:minmax(0,1fr);grid-template-rows:subgrid}
  .svc + .svc::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--svc-gap) / -2 - .5px);width:1px;background:var(--line)}
}
.svc .num{font-size:12px;display:flex;align-items:center;gap:10px}
.svc .num::after{content:"";width:18px;height:1px;background:var(--ink)}
.svc h3{font-family:var(--display);font-weight:900;font-size:40px;letter-spacing:-.03em;line-height:.95;margin:14px 0 14px}
.svc .row{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.svc ul{list-style:none;font-size:14px;color:var(--muted);line-height:1.45}
.svc .ph{height:210px;margin-top:22px}

/* ---------- PROCESS ---------- */
.process{background:linear-gradient(180deg,color-mix(in srgb,var(--bg-2) 75%,transparent) 0%,transparent 60%);padding:40px 0 60px;position:relative;overflow:hidden}
.process-head{position:relative;min-height:330px}
.process-copy{position:relative;z-index:2}
.process h2{font-size:clamp(52px,6.2vw,88px);margin-top:18px}
.process .intro{max-width:560px;color:var(--ink-2);font-size:17px;margin-top:22px}
.process .mountain{position:absolute;right:-48px;top:40px;width:56%;height:300px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 25%);mask-image:linear-gradient(90deg,transparent 0,#000 25%)}
.process .mountain .ph{width:100%;height:100%}
.process .note.hand{position:absolute;right:40px;top:10px;transform:rotate(-8deg);text-align:right;z-index:2}
.process .note.hand svg{position:absolute;right:-10px;top:52px;width:40px;height:40px}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:28px;margin-top:40px}
.step .n{font-family:var(--display);font-weight:800;font-size:44px;line-height:1;color:transparent;-webkit-text-stroke:1.4px var(--accent)}
.step h4{font-size:17px;font-weight:600;margin:6px 0 8px}
.step p{font-size:12.5px;color:var(--muted);min-height:58px}
/* Illustrations (user/pages/landing/step_art.html): transparent, rounded, colours from the theme variables */
.step-art{height:130px;margin:14px 0 16px;border:1px solid var(--line);border-radius:22px;background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--accent) 16%,transparent) 0,transparent 62%)}
.step-art svg{display:block;width:100%;height:100%;fill:none;stroke-linecap:round;stroke-linejoin:round}
.step-art .trace{stroke:var(--accent);stroke-width:2;opacity:.45}
.step-art .ring{stroke:var(--accent);stroke-width:2;stroke-dasharray:2 10;opacity:.4}
.step-art .node{fill:var(--accent);opacity:.7}
.step-art .badge{fill:color-mix(in srgb,var(--accent) 10%,transparent);stroke:var(--accent);stroke-width:2;opacity:.9}
.step-art .icon{stroke:var(--ink);stroke-width:1.1}

/* ---------- PROJECTS ---------- */
.projects{padding:40px 0 70px}
.projects .head{display:flex;justify-content:space-between;align-items:center}
.projects .head a{font-size:12px;font-weight:600;text-decoration:underline;text-underline-offset:3px;display:inline-flex;gap:10px;align-items:center}
.projects .head a svg{width:14px;height:14px}
.projects .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:22px}
.projects .pcard .ph{height:360px}

/* ---------- BANNER ---------- */
.banner{position:relative;background:var(--navy);color:#fff;overflow:hidden}
.banner .bg{position:absolute;inset:0;opacity:.55}
.banner .bg .ph{width:100%;height:100%;background:linear-gradient(180deg,#0f1d33 30%,#3b5170 100%)}
.banner .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--navy) 0%,rgba(15,29,51,.7) 40%,rgba(15,29,51,.25) 100%)}
:root[data-placeholder-labels="true"] .banner .ph.empty::after,:root[data-placeholder-labels="true"] .banner .ph.empty::before{display:none}
.banner .inner{position:relative;display:grid;grid-template-columns:1.3fr repeat(4,1fr);align-items:center;padding:48px;max-width:var(--maxw);margin:0 auto;gap:0}
.banner .eyebrow{color:#c8d3e3;font-size:10px}
.banner h2{font-size:48px;margin-top:10px;color:#fff}
.benefit{padding:0 26px;border-left:1px solid rgba(255,255,255,.25)}
.benefit svg{width:30px;height:30px;stroke:#fff;fill:none;stroke-width:1.4;margin-bottom:14px}
.benefit h6{font-size:15px;font-weight:600}
.benefit p{font-size:12.5px;color:#b8c4d6;margin-top:6px}

/* ---------- ABOUT ---------- */
.about{display:grid;grid-template-columns:1fr 1fr}
.about .text{padding:70px 48px 80px max(48px,calc((100vw - var(--maxw))/2 + 48px))}
.about h2{font-family:var(--display);font-weight:800;font-size:clamp(40px,4.2vw,58px);letter-spacing:-.03em;line-height:1.02;margin:22px 0 24px}
.about p{color:var(--ink-2);max-width:420px}
.about .checks{margin:24px 0 32px;font-size:14px}
.about .img{position:relative;min-height:560px}
.about .img .ph{position:absolute;inset:0}
.about .img .note{position:absolute;left:36px;top:56px;z-index:2;font-size:15px}
.about .img .note::after{content:"";display:block;width:34px;height:1px;background:var(--ink-2);margin-top:14px}

/* ---------- CONTACT ---------- */
.contact{position:relative;padding:70px 0 90px;overflow:hidden}
.contact .deco{position:absolute;left:0;bottom:0;width:340px;height:300px;-webkit-mask-image:linear-gradient(45deg,#000 20%,transparent 75%);mask-image:linear-gradient(45deg,#000 20%,transparent 75%)}
.contact .deco .ph{width:100%;height:100%}
:root[data-placeholder-labels="true"] .contact .deco .ph.empty::after{place-items:end start;padding:0 0 24px 24px}
.contact .wrap{display:grid;grid-template-columns:1fr 1.05fr;gap:60px;position:relative}
.contact h2{font-family:var(--display);font-weight:500;font-size:clamp(40px,4.2vw,58px);letter-spacing:-.025em;line-height:1.05;margin:22px 0 24px}
.contact .lead{font-size:18px;color:var(--ink-2);max-width:440px}
.contact .checks{margin:34px 0 0 90px;font-size:16px}
.contact .checks li{margin-bottom:10px}
.book-cta{margin:30px 0 0 90px}

@media (prefers-reduced-motion:reduce){
  .projects .pcard .ph img{transition:none}
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1100px){
  .hero-content{padding-left:32px;padding-right:32px}
  .hero-img{width:50%}
  .hero-img .n1{left:30%}
  .services .grid{--svc-gap:56px}
  .svc h3{font-size:34px}
  .steps{gap:20px}
  .banner .inner{grid-template-columns:1fr 1fr;gap:28px 0;padding:48px 32px}
  .banner .inner>div:first-child{grid-column:1/-1}
  .benefit{padding:4px 24px 4px 20px}
  .benefit:nth-child(2n){border-left:0;padding-left:0}
  .about .text{padding:64px 40px 64px 32px}
  .contact .checks,.book-cta{margin-left:0}
}

@media (max-width:900px){
  /* Hero stacked: text on top, image below with a slanted edge */
  .hero{display:flex;flex-direction:column;min-height:0}
  .hero-content{order:1;width:100%;padding-top:24px;padding-bottom:48px}
  .hero-img{order:2;position:relative;width:100%;height:440px;clip-path:polygon(0 14%,100% 0,100% 100%,0 100%)}
  .hero-img .ring{left:auto;right:8%;top:20%;width:200px;height:200px}
  .hero-img .n1{left:auto;right:calc(8% + 50px);top:30%}
  .hero-pager{top:auto;bottom:40px;right:auto;left:32px;flex-direction:row;gap:18px}
  .hero-pager .bar{display:none}
  .hero-img .n2{right:32px}
  .hero h1{font-size:clamp(44px,8vw,72px)}
  .hero .claim{font-size:21px}

  /* Services: one row per service, text on the left, image on the right */
  .services .grid{grid-template-columns:1fr;gap:0}
  .svc{display:grid;grid-template-columns:1fr 1.15fr;grid-template-rows:auto auto 1fr;column-gap:32px;padding:28px 0;border-top:1px solid var(--line)}
  .svc:last-child{border-bottom:1px solid var(--line)}
  .svc .num,.svc h3,.svc .row{grid-column:1}
  .svc .ph{grid-column:2;grid-row:1/4;margin-top:0;height:auto;min-height:200px}
  .svc .row{align-self:start}

  /* Process: mountain below the text, steps as a swipe strip */
  .process-head{min-height:0;display:flex;flex-direction:column}
  .process .mountain{order:2;position:relative;right:auto;top:auto;width:calc(100% + 64px);margin:28px -32px 0;height:240px;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%);mask-image:linear-gradient(180deg,transparent 0,#000 30%)}
  .process .note.hand{display:none}
  .steps{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:20px;margin:36px -32px 0;padding:0 32px 16px;scrollbar-width:thin;scroll-padding-inline:32px}
  .step{flex:0 0 44%;scroll-snap-align:start}
  .step p{min-height:0}

  /* Projects */
  .projects .grid{gap:14px}
  .projects .pcard .ph{height:220px}
  .projects .pcard .row{flex-direction:column;align-items:flex-start;gap:10px}
  .projects .pcard .row .circle-btn{display:none}

  /* About and contact stacked */
  .about{grid-template-columns:1fr}
  .about .text{padding:64px 32px}
  .about .img{min-height:460px}
  .contact .wrap{grid-template-columns:1fr;gap:40px}
  .contact .deco{display:none}
}

@media (max-width:600px){
  .hero{padding-top:72px}
  .hero-content{padding-left:16px;padding-right:16px}
  .hero-content .eyebrow{font-size:11px;letter-spacing:.14em}
  .hero h1{font-size:clamp(28px,9.2vw,52px)}
  .hero p.lead{margin-top:20px}
  .hero .claim{font-size:18px;margin-top:14px}
  .hero-ctas{flex-wrap:wrap;gap:12px 16px}
  .hero-ctas .btn{flex:1 1 100%;justify-content:center}
  .hero-img{height:340px}
  .hero-img .ring{width:150px;height:150px}
  .hero-img .n1{right:calc(8% + 30px);font-size:11px}
  .hero-img .n2{right:16px;bottom:24px;font-size:10.5px}
  .hero-pager{left:16px;bottom:24px}

  .services{padding:24px 0 48px}
  .svc{grid-template-columns:1fr;padding:24px 0}
  .svc .ph{grid-column:1;grid-row:auto;height:200px;margin-top:20px}
  .svc h3{font-size:32px}

  .process h2{font-size:44px}
  .process .intro{font-size:15px}
  .process .mountain{width:calc(100% + 32px);margin:24px -16px 0;height:180px}
  .steps{margin:28px -16px 0;padding:0 16px 16px;scroll-padding-inline:16px}
  .step{flex:0 0 78%}

  .projects{padding:24px 0 48px}
  .projects .head{flex-direction:column;align-items:flex-start;gap:10px}
  .projects .grid{grid-template-columns:1fr;gap:28px}
  .projects .pcard .ph{height:240px}
  .projects .pcard .row{flex-direction:row;align-items:center}
  .projects .pcard .row .circle-btn{display:grid}

  .banner h2{font-size:40px}
  .banner .inner{grid-template-columns:1fr;padding:40px 16px;gap:0}
  .benefit,.benefit:nth-child(2n){border-left:0;border-top:1px solid rgba(255,255,255,.2);padding:20px 0}

  .about .text{padding:48px 16px}
  .about .img{min-height:340px}
  .about .img .note{left:16px;top:24px;font-size:12px}

  .contact{padding:48px 0 56px}
  .contact .lead{font-size:16px}
}