/* =========================================================================
   facing — design tokens + bespoke component styles
   Ported from the reference prototype (variant D). Loaded site-wide.
   ========================================================================= */

:root{
  /* --- palette --- */
  --ink:#16150F;          /* all text + lines, never coloured */
  --paper:#FFFFFF;        /* base surface */
  --teal:#B3DCD8;         /* Home / Kontakt / accents */
  --teal-soft:#CDE8E4;    /* lightened teal — surfaces in Leistungen, buttons */
  --yellow:#F3ECC9;       /* Leistungen accent */
  --pink:#EBD4D9;         /* Über uns accent */
  --sand:#ECE6DC;         /* image placeholder bg */
  --sand-2:#E2DBCE;
  --hair:#D8D2C6;         /* faint dividers */

  /* white arrow (shaft + chevron head) drawn as SVG — matches the .rr-shaft/.rr-head
     markup so every circle-arrow (buttons, cards, form submit) looks identical */
  --arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='14' viewBox='0 0 18 14' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 7h11'/%3E%3Cpath d='M11 2.2 16 7l-5 4.8'/%3E%3C/svg%3E");

  /* --- type families --- */
  --font-sans:'Umlaut Fix','GT Standard','Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-num:'Bodoni Moda',Georgia,serif;   /* only the stats numerals */

  /* --- type scale T1–T6 (from the prototype clamp() values) --- */
  --t1:clamp(52px,11.5vw,150px);   /* hero */
  --t2:clamp(32px,5vw,64px);       /* stats numerals scale reference */
  --t3:clamp(26px,3.2vw,38px);     /* section leads / team names */
  --t4:clamp(20px,2.2vw,26px);     /* process words */
  --t5:20px;                       /* nav / body-large */
  --t6:16px;                       /* body */
  --label:16px;                    /* eyebrow labels */

  /* --- layout --- */
  --wrap:1500px;
  --gutter:40px;
  --section-y:clamp(64px,11vh,128px);
}

/* ------------------------------------------------------------------ base */
body.facing,
body{
  letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
}
body.facing{
  font-family:var(--font-sans);
  color:var(--ink);
  background:var(--paper);
  overflow-x:clip;
}
body.facing ::selection{background:var(--ink);color:#fff;}
html{scroll-behavior:smooth;}

.facing-wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter);}

/* keep Elementor from injecting its own max-widths inside our full-bleed sections */
body.facing .elementor-section.elementor-section-boxed>.elementor-container{max-width:var(--wrap);}

/* The default Elementor Kit sets global heading/text font to "Roboto"
   (--e-global-typography-*). That leaks into every heading/text-editor widget and
   made e.g. the big stat numerals render in Roboto instead of GT Standard.
   Pin the whole site back to the facing sans stack. */
body.facing .elementor-heading-title,
body.facing .elementor-widget-heading .elementor-heading-title,
body.facing .elementor-widget-text-editor,
body.facing .elementor-widget-text-editor .elementor-widget-container,
body.facing .elementor-button,
body.facing .elementor-field-group,
body.facing .elementor-field{font-family:var(--font-sans)!important;}

/* eyebrow label (uppercase tracked) */
.fc-label{font-size:var(--label);letter-spacing:.2em;text-transform:uppercase;color:var(--ink);font-weight:400;margin:0;}

/* ------------------------------------------------------------------ keyframes */
@keyframes fadeUp{from{opacity:0;transform:translateY(.45em)}to{opacity:1;transform:translateY(0)}}
@keyframes blink{0%,45%{opacity:1}55%,100%{opacity:0}}
@keyframes navblink{0%,45%{opacity:1}55%,100%{opacity:0}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes scrollbob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@keyframes fblink{0%{transform:scaleY(1)}48%{transform:scaleY(.06)}100%{transform:scaleY(1)}}

/* ------------------------------------------------------------------ hero (typewriter) */
.fc-hero{position:relative;overflow:hidden;background:var(--teal);min-height:calc(100svh - 48px);display:flex;flex-direction:column;transition:background-color .7s ease;}
.fc-hero__inner{position:relative;max-width:var(--wrap);width:100%;margin:0 auto;padding:calc(clamp(100px,23vh,200px) + 56px) var(--gutter) clamp(48px,9vh,120px);flex:1;display:flex;flex-direction:column;justify-content:flex-start;gap:clamp(60px,10vh,120px);}
.fc-hero h1{font-size:var(--t1);line-height:.96;letter-spacing:-.03em;font-weight:600;margin:0;color:var(--ink);display:flex;align-items:baseline;flex-wrap:nowrap;gap:.22em;}
.fc-hero h1 img{height:.82em;width:auto;display:inline-block;transform:translateY(.04em);}
.you-btn{appearance:none;background:none;border:none;font-family:var(--font-sans);font-weight:400;font-size:.747em;color:var(--ink);letter-spacing:-.005em;padding:0;position:relative;display:inline-flex;align-items:baseline;transform:translateY(-0.254em);}
.hero-caret{display:inline-block;width:.085em;height:1.12em;background:var(--ink);margin-left:.06em;align-self:baseline;transform:translateY(.2em);animation:blink 1.05s step-end infinite;}
.fc-hero__sub p{white-space:nowrap;font-weight:400;color:var(--ink);line-height:1.18;margin:0;font-size:clamp(20px,3vw,42px);}

/* ------------------------------------------------------------------ arrow button (rr-cta) */
.rr-cta{display:inline-flex;align-items:center;gap:16px;text-decoration:none;color:var(--ink);}
.rr-dot{display:flex;align-items:center;justify-content:center;height:36px;width:36px;border-radius:999px;background:var(--ink);flex:none;transition:width .4s cubic-bezier(.2,.7,.2,1),background .3s ease;}
.rr-cta:hover .rr-dot,.cb-form:focus-within .rr-dot{width:52px;}
.rr-arrow{display:flex;align-items:center;}
.rr-shaft{height:2.6px;width:9px;background:#fff;border-radius:2px;transition:width .4s cubic-bezier(.2,.7,.2,1);}
/* open arrowhead (chevron) — matches the reference; bold + slightly larger */
.rr-head{width:8px;height:8px;border-top:2.6px solid #fff;border-right:2.6px solid #fff;border-left:0;border-bottom:0;transform:rotate(45deg);margin-left:-5px;}
.rr-label{font-size:15px;letter-spacing:.18em;text-transform:uppercase;font-weight:400;}
.rr-cta.rr-sm .rr-label{font-size:20px;letter-spacing:-.01em;text-transform:none;font-weight:500;}
.rr-cta.rr-sm .rr-dot{height:26px;width:26px;}
.rr-cta.rr-sm:hover .rr-dot{width:40px;}
.rr-cta.rr-sm{gap:12px;}
/* on white the dot picks up teal on hover */
.on-white .rr-cta:hover .rr-dot{background:var(--teal);}

.cta{display:inline-flex;align-items:center;gap:10px;text-decoration:none;transition:gap .35s cubic-bezier(.2,.7,.2,1);}
.cta:hover{gap:18px;}

/* ------------------------------------------------------------------ nav links (header) */
.navlink,.mlink{text-decoration:none;position:relative;transition:font-weight .2s ease;color:var(--ink);}
.navlink:hover{font-weight:700;}
.mlink .mcaret{display:inline-block;width:.13em;height:1.15em;background:var(--ink);margin-left:.12em;vertical-align:-.22em;opacity:0;}
.mlink:hover .mcaret{opacity:1;animation:navblink 1.05s step-end infinite;}
.mlink.active{font-weight:600;}

/* language switch */
.langbtn{background:none;border:none;cursor:pointer;font:inherit;font-size:13px;letter-spacing:.06em;padding:2px;transition:color .25s ease;color:var(--ink);}
[data-lang="de"] .l-de,[data-lang="en"] .l-en{color:var(--ink);font-weight:600;}
[data-lang="de"] .l-en,[data-lang="en"] .l-de{color:var(--ink);font-weight:400;}

/* ------------------------------------------------------------------ f-mark (blinking eye) */
#homeF{cursor:pointer;display:inline-flex;align-items:center;line-height:0;opacity:0;max-width:0;overflow:hidden;margin-right:0;transition:opacity .4s ease,max-width .4s ease,margin-right .4s ease;}
html.show-homef #homeF{opacity:1;max-width:74px;margin-right:clamp(32px,4vw,68px);}
#homeF .f-wrap{position:relative;display:block;height:54px;width:70px;}
#homeF .f-main{display:block;height:54px;width:43.5px;background-color:var(--ink);-webkit-mask:url('../img/facing-f-only.png') center/contain no-repeat;mask:url('../img/facing-f-only.png') center/contain no-repeat;transition:background-color .25s ease;}
#homeF .f-eye{position:absolute;left:25.2px;top:2.9px;width:14.4px;height:14.4px;border-radius:50%;transition:transform .32s cubic-bezier(.4,0,.2,1);}
#homeF .f-dot{position:absolute;left:49.8px;top:3px;width:14.7px;height:14.7px;border-radius:50%;background-color:var(--ink);transition:transform .32s cubic-bezier(.4,0,.2,1);}
#homeF:hover .f-dot,#homeF:hover .f-eye{transform:scaleY(.12);}
#homeF:hover .f-main{background-color:var(--teal);}

/* ------------------------------------------------------------------ work / case cards */
.case{text-decoration:none;display:block;color:var(--ink);}
.case .case-shot{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--sand);}
.case .case-img{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 1s cubic-bezier(.2,.7,.2,1);}
.case:hover .case-img{transform:scale(1.05);}
.case .case-title{transition:opacity .3s ease;}
.case:hover .case-title{opacity:.55;}

/* ==================================================================
   Elementor normalization — brand defaults win over the global Kit.
   README rule: text is ALWAYS #16150F, never coloured.
   ================================================================== */
body.facing .elementor-heading-title{color:var(--ink);}
body.facing .elementor-widget-text-editor,
body.facing .elementor-widget-text-editor p{color:var(--ink);}
body.facing .elementor-widget-container{color:var(--ink);}
body.facing a{color:inherit;}
body.facing .elementor-button{font-family:var(--font-sans);}
/* widgets carrying our design-system classes inherit brand font */
body.facing [class*="elementor-widget"]{font-family:var(--font-sans);}

/* ---- bridge: map design-system classes onto Elementor inner elements ----
   The Kit sets color/size directly on .elementor-heading-title, so wrapper
   classes must reach inside to win. */
.fc-label .elementor-heading-title{font-size:var(--label)!important;letter-spacing:.2em;text-transform:uppercase;font-weight:400!important;color:var(--ink);}
.fc-lead .elementor-heading-title{font-size:clamp(30px,5vw,56px)!important;line-height:1.05;letter-spacing:-.02em;font-weight:600;color:var(--ink);}
.case-title .elementor-heading-title{font-size:19px!important;line-height:1.15;letter-spacing:-.01em;font-weight:600;color:var(--ink);}
.case-client .elementor-widget-container{font-size:15px;color:var(--ink);}
.case-tag .elementor-widget-container{font-size:15px;font-weight:300;color:var(--ink);}
.tg-name .elementor-heading-title{font-size:var(--t3)!important;font-weight:600;color:var(--ink);}
.tg-role .elementor-widget-container{font-size:20px;font-weight:300;color:var(--ink);}
.tg-mail .elementor-widget-container{font-size:16px;color:var(--ink);}
.tg-mail a{color:var(--ink);}

/* ------------------------------------------------------------------ loop-grid case cards (native Elementor image) */
.case-loop{display:block;text-decoration:none;color:var(--ink);}
.case-loop .case-shot{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--sand);}
.case-loop .case-shot .elementor-widget-image,
.case-loop .case-shot .elementor-widget-image>.elementor-widget-container,
.case-loop .case-shot .elementor-widget-image a{position:absolute;inset:0;width:100%;height:100%;margin:0;}
.case-loop .case-shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s cubic-bezier(.2,.7,.2,1);}
.case-loop:hover .case-shot img{transform:scale(1.05);}
.case-loop .case-client{font-size:15px;margin-top:12px;}
.case-loop{position:relative;}
.case-loop .case-title{font-size:19px;line-height:1.15;letter-spacing:-.01em;font-weight:600;margin-top:3px;transition:opacity .3s ease;}
.case-loop:hover .case-title{opacity:.55;}
/* stretched link: the title anchor covers the whole card → entire card clickable.
   Elementor sets .elementor-widget{position:relative}, which would trap the ::after
   inside the title widget; neutralise the intermediate wrappers so the overlay
   anchors to .case-loop and the WHOLE block becomes clickable. */
.case-loop .case-title,
.case-loop .case-title .elementor-widget-container,
.case-loop .case-title .elementor-heading-title{position:static!important;}
.case-loop .case-title a{color:inherit;text-decoration:none;position:static;}
.case-loop .case-title a::after{content:"";position:absolute;inset:0;z-index:5;}
.case-loop .case-tag{font-size:15px;margin-top:3px;font-weight:300;}
/* loop-grid: kill Elementor default article spacing so our margins rule */
.elementor-loop-container.elementor-grid{gap:clamp(18px,2.2vw,32px);}
.e-loop-item .case-loop{height:100%;}

/* Über uns team grid (4 columns inside dashed box) */
.team-grid{width:100%!important;align-self:stretch!important;}
.team-grid .elementor-grid{grid-template-columns:repeat(4,1fr)!important;gap:16px!important;width:100%!important;}
@media(max-width:900px){.team-grid .elementor-grid{grid-template-columns:repeat(2,1fr)!important;}}
@media(max-width:520px){.team-grid .elementor-grid{grid-template-columns:1fr!important;}}
/* hover overlay: teal with e-mail, sitting on the portrait (matches original .tg-overlay) */
.tmember .tg-shot .tg-mail{position:absolute!important;inset:0;margin:0!important;background:var(--teal);opacity:0;pointer-events:none;transition:opacity .35s ease;display:flex;align-items:flex-start;justify-content:flex-start;padding:16px;z-index:3;}
.tmember:hover .tg-shot .tg-mail{opacity:1;pointer-events:auto;}
.tmember .tg-shot .tg-mail,.tmember .tg-shot .tg-mail .elementor-widget-container,.tmember .tg-shot .tg-mail a{font-size:20px!important;font-weight:300!important;color:var(--ink)!important;text-decoration:none;line-height:1.3;}

/* ------------------------------------------------------------------ loop-grid team cards */
.tmember{display:block;text-align:left!important;}
.tmember .tg-shot{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--sand-2);}
.tmember .tg-shot .elementor-widget-image,
.tmember .tg-shot .elementor-widget-image>.elementor-widget-container,
.tmember .tg-shot .elementor-widget-image a{position:absolute;inset:0;width:100%;height:100%;margin:0;}
.tmember .tg-shot img{width:100%;height:100%;object-fit:cover;display:block;transition:filter .4s ease;}
.tmember:hover .tg-shot img{filter:brightness(1.12);}
.tmember .tg-name{margin-top:12px;font-size:var(--t3);font-weight:600;}
.tmember .tg-role{font-size:20px;font-weight:300;margin-top:4px;line-height:1.2;}
.tmember .tg-mail{font-size:16px;margin-top:6px;}
.tmember .tg-mail a{color:var(--ink);}

/* ---- bridge: home/leistungen native widgets ---- */
.fc-lead2 .elementor-heading-title{font-size:clamp(22px,2.6vw,34px)!important;line-height:1.25;font-weight:500;color:var(--ink);}
.st-num .elementor-widget-container{font-size:16px;opacity:.5;color:var(--ink);}
.st-word .elementor-heading-title{font-size:var(--t4)!important;font-weight:600;color:var(--ink);}
.st-desc .elementor-widget-container{font-size:16px;line-height:1.4;color:var(--ink);}
.svc-num .elementor-widget-container{font-size:16px;opacity:.5;color:var(--ink);}
.svc-h .elementor-heading-title{font-size:var(--t3)!important;font-weight:600;color:var(--ink);}
.svc-lead .elementor-widget-container{font-size:20px;font-weight:300;max-width:720px;color:var(--ink);}
.svc-keywords .elementor-icon-list-items{display:flex;flex-wrap:wrap;gap:10px 22px;}
.svc-keywords .elementor-icon-list-item{margin:0!important;}
.svc-keywords .elementor-icon-list-icon{display:none!important;}
.svc-keywords .elementor-icon-list-text{font-size:16px;color:var(--ink);padding:0!important;}
.svc-block{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,5vw,80px);padding:clamp(32px,5vh,56px) 0;border-top:2px solid var(--ink);}
.svc-block--last{border-bottom:2px solid var(--ink);}
.kontakt-sub .elementor-widget-container{font-size:20px;font-weight:300;max-width:640px;color:var(--ink);}
.kontakt-links a{font-size:20px;color:var(--ink);}
.cta-big .elementor-heading-title{font-size:clamp(26px,3.2vw,38px)!important;line-height:1.18;font-weight:600;max-width:900px;color:var(--ink);}

/* ==================================================================
   NATIVE HOME — styling for native Elementor widgets (no HTML widgets).
   Widgets stay native/editable; theme CSS provides the bespoke look.
   ================================================================== */
/* section paddings (clamp not expressible in Elementor controls) */
.home-pad{max-width:1500px!important;margin-inline:auto!important;width:100%;padding:clamp(64px,11vh,128px) 40px!important;}
.home-pad--tighttop{padding-top:0!important;}
.home-pad--head{padding:calc(clamp(90px,18vh,180px) + 56px) 40px clamp(56px,9vh,120px)!important;}

/* hero */
.fc-hero__inner{max-width:1500px!important;width:100%;margin:0 auto!important;padding:calc(clamp(100px,23vh,200px) + 56px) 40px clamp(48px,9vh,120px)!important;display:flex;flex-direction:column;justify-content:flex-start;gap:clamp(60px,10vh,120px)!important;flex:1;}
/* flex row, baseline-aligned; inner image wrappers made inline so the flex item
   gets a real text baseline (mimics the original's direct <img> in the h1). */
.hero-h1{display:flex!important;flex-direction:row!important;align-items:baseline!important;flex-wrap:nowrap;font-size:clamp(52px,11.5vw,150px)!important;gap:.22em!important;width:auto;line-height:.96;}
.hero-logo{line-height:0;}
.hero-logo .elementor-widget-container,.hero-logo a{display:inline!important;line-height:0;}
.hero-logo img{height:clamp(42px,9.43vw,123px)!important;width:auto!important;display:inline!important;vertical-align:baseline;}
.you-btn{display:inline-flex!important;flex-direction:row!important;align-items:baseline!important;position:relative;width:auto!important;gap:0!important;font-size:clamp(39px,8.59vw,112px);line-height:.96;letter-spacing:-.005em;font-weight:400;transform:translateY(-0.254em);}
.hero-word,.yb-dot{margin:0!important;padding:0!important;}
.hero-word .elementor-heading-title,.yb-dot .elementor-heading-title{font-size:1em!important;line-height:.96!important;letter-spacing:-.005em;font-weight:400!important;color:var(--ink);}
.you-btn::after{content:'';display:inline-block;width:.085em;height:1.12em;background:var(--ink);margin-left:.06em;align-self:baseline;transform:translateY(.2em);animation:blink 1.05s step-end infinite;}
.fc-hero__sub .elementor-widget-container p,.fc-hero__sub p{white-space:nowrap;font-weight:400;color:var(--ink);line-height:1.18;margin:0;}

/* section padding variants */
.home-pad--nobottom{padding-bottom:0!important;}
.home-pad--facts{max-width:1500px!important;margin-inline:auto!important;width:100%;padding:26px 40px clamp(64px,11vh,128px)!important;}

/* dashed placeholder box (native container border handles the dash; this just centers) */
.dash-box{display:flex!important;flex-direction:column!important;align-items:center!important;text-align:center;}
.dash-box--svc{gap:12px!important;padding:clamp(110px,20vh,240px) 40px!important;}
.dash-box--facts{gap:clamp(32px,5vh,56px)!important;padding:clamp(48px,8vh,90px) clamp(18px,2vw,32px)!important;}
.fc-stats{display:grid!important;}
.ph-label .elementor-heading-title{font-size:16px!important;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);font-weight:400!important;}
.ph-note,.ph-note .elementor-widget-container{font-size:15px;font-weight:300;color:var(--ink);opacity:.6;}

/* stats (native heading number + line container + native heading label) */
.fc-stats .stat-num .elementor-heading-title{font-size:clamp(64px,7vw,92px)!important;font-weight:600;letter-spacing:-.04em;line-height:.92;color:var(--ink);}
.fc-stats .stat-label .elementor-heading-title{font-size:16px!important;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);white-space:pre-line;font-weight:400;}

/* native button styled as brand arrow CTA */
.rr-btn .elementor-button{background:transparent!important;color:var(--ink)!important;padding:0!important;border:0;display:inline-flex;align-items:center;gap:12px;font-family:var(--font-sans);font-size:20px;font-weight:500;box-shadow:none;border-radius:0;}
.rr-btn .elementor-button .elementor-button-text{letter-spacing:-.01em;}
.rr-btn .elementor-button::after{content:'';width:26px;height:26px;border-radius:999px;background:var(--ink) var(--arrow) center/16px 12px no-repeat;flex:none;transition:width .4s cubic-bezier(.2,.7,.2,1),background-color .3s ease;}
.rr-btn .elementor-button:hover::after{width:40px;}
.on-white .rr-btn .elementor-button:hover::after{background-color:var(--teal);}

/* cta band big heading */
.cta-big .elementor-heading-title{font-size:clamp(26px,3.2vw,38px)!important;line-height:1.18;font-weight:600;max-width:900px;color:var(--ink);}
.cta-big::after{content:'';display:inline-block;width:.055em;height:1.05em;background:var(--ink);margin-left:.08em;vertical-align:-.18em;animation:blink 1.05s step-end infinite;}

/* ------------------------------------------------------------------ static hero word (pages without typewriter) */
.you-btn--static::after{content:none!important;display:none!important;}
.fc-hero.hero-yellow{background:#F1EC8C;}
.fc-hero.hero-pink{background:#EBD4D9;}

/* ------------------------------------------------------------------ Leistungen: service blocks */
.lst-block{display:grid!important;grid-template-columns:1.7fr 1fr!important;gap:clamp(28px,4vw,64px)!important;padding:clamp(44px,7vh,88px) 0!important;border-bottom:2px solid var(--ink);width:100%;text-align:left;}
@media(max-width:860px){.lst-block{grid-template-columns:1fr!important;gap:20px!important;}}
.lst-h .elementor-heading-title{font-size:clamp(26px,3.2vw,38px)!important;line-height:1.35;letter-spacing:-.02em;font-weight:600;color:var(--ink);margin-bottom:22px;}
.lst-desc,.lst-desc .elementor-widget-container,.lst-desc p{font-size:clamp(26px,3.2vw,38px)!important;line-height:1.35;font-weight:300;color:var(--ink);max-width:640px!important;}
.svc-list .elementor-icon-list-items{display:block;}
.svc-list .elementor-icon-list-item{margin:0!important;border-bottom:2px solid var(--ink);transition:border-bottom-width .3s ease;}
.svc-list .elementor-icon-list-item>a,.svc-list .elementor-icon-list-item>span{display:block;padding:clamp(16px,2.2vh,22px) 0!important;transition:padding-left .4s cubic-bezier(.2,.7,.2,1);}
.svc-list .elementor-icon-list-item:hover{border-bottom-width:8px;}
.svc-list .elementor-icon-list-item:hover>a,.svc-list .elementor-icon-list-item:hover>span{padding-left:16px;}
.svc-list .elementor-icon-list-icon{display:none!important;}
.svc-list .elementor-icon-list-text{font-size:20px;font-weight:400;line-height:1.3;color:var(--ink);padding:0!important;}

/* ------------------------------------------------------------------ Arbeiten: 2-col editorial index */
.arb-grid .elementor-grid{grid-template-columns:repeat(2,1fr)!important;gap:clamp(40px,5vw,80px) clamp(24px,3vw,56px)!important;}
@media(max-width:720px){.arb-grid .elementor-grid{grid-template-columns:1fr!important;}}
.case-big{position:relative;display:block;}
.case-big .case-shot{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--sand);}
.case-big .case-shot .elementor-widget-image,
.case-big .case-shot .elementor-widget-image>.elementor-widget-container,
.case-big .case-shot .elementor-widget-image a{position:absolute;inset:0;width:100%;height:100%;margin:0;}
.case-big .case-shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s cubic-bezier(.2,.7,.2,1);}
.case-big:hover .case-shot img{transform:scale(1.05);}
.case-big .cb-row{display:flex!important;flex-direction:row!important;align-items:flex-end!important;justify-content:space-between!important;gap:16px;margin-top:18px;}
.case-big .cb-title .elementor-heading-title{font-size:clamp(20px,2.2vw,26px)!important;line-height:1.1;letter-spacing:-.02em;font-weight:600;color:var(--ink);}
.case-big .cb-title a{color:inherit;text-decoration:none;}
/* whole-card link: neutralise positioned wrappers (Elementor widgets/containers are
   position:relative) so the stretched overlay anchors to .case-big, not just the title */
.case-big{position:relative;}
.case-big .cb-row,.case-big .cb-row *{position:static!important;}
.case-big .cb-title a::after{content:"";position:absolute;inset:0;z-index:5;}
.case-big .cb-client .elementor-widget-container{font-size:clamp(20px,2.2vw,26px);font-weight:300;color:var(--ink);margin-top:6px;}
/* arrow dot bottom-right (bespoke, CSS-drawn) */
.case-big .cb-arrow{flex:none;height:36px;width:36px;border-radius:999px;background:var(--ink) var(--arrow) center/20px 16px no-repeat;margin-bottom:4px;transition:width .4s cubic-bezier(.2,.7,.2,1),background-color .3s ease;}
.case-big:hover .cb-arrow{width:52px;background-color:var(--teal);}
.arb-herosub,.arb-herosub .elementor-widget-container,.arb-herosub .elementor-widget-container p,.arb-herosub p{font-size:clamp(26px,3.2vw,38px)!important;line-height:1.18;color:var(--ink);font-weight:400;margin:0;}

/* ------------------------------------------------------------------ Kontakt */
.kontakt-grid{display:grid!important;grid-template-columns:1.3fr 1fr!important;gap:clamp(40px,6vw,100px)!important;align-items:start;width:100%;text-align:left;}
@media(max-width:860px){.kontakt-grid{grid-template-columns:1fr!important;gap:40px!important;}}
.kontakt-form-h .elementor-heading-title{font-size:clamp(20px,2.2vw,26px)!important;font-weight:500!important;letter-spacing:-.01em;color:var(--ink);margin-bottom:24px;}
.kontakt-form .elementor-field-group{margin-bottom:6px;}
.kontakt-form .elementor-field-textual{border:0!important;border-bottom:2px solid var(--ink)!important;border-radius:0!important;background:transparent!important;padding:16px 0!important;font-size:18px;color:var(--ink);box-shadow:none!important;}
.kontakt-form .elementor-field-textual::placeholder{color:var(--ink);opacity:.45;}
.kontakt-form textarea.elementor-field-textual{min-height:64px;resize:vertical;}
.kontakt-form .elementor-field-type-radio .elementor-field-subgroup{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;gap:10px!important;}
.kontakt-form .elementor-field-type-radio .elementor-field-option{display:inline-flex!important;width:auto!important;flex:0 0 auto!important;margin:0!important;}
.kontakt-form .elementor-field-type-radio input[type=radio]{position:absolute;opacity:0;pointer-events:none;}
.kontakt-form .elementor-field-type-radio .elementor-field-option label{display:inline-block;background:var(--teal);border-radius:999px;padding:11px 20px!important;cursor:pointer;font-size:16px!important;line-height:1;color:var(--ink);white-space:nowrap;transition:background .2s ease,color .2s ease;}
.kontakt-form .elementor-field-type-radio input:checked + label{background:var(--ink);color:#fff;}
.kontakt-form .elementor-button{background:transparent!important;color:var(--ink)!important;padding:0!important;display:inline-flex;align-items:center;gap:12px;font-size:20px;font-weight:500;box-shadow:none;border:0;}
.kontakt-form .elementor-button::after{content:"";width:36px;height:36px;border-radius:999px;background:var(--ink) var(--arrow) center/20px 16px no-repeat;flex:none;transition:width .4s cubic-bezier(.2,.7,.2,1),background-color .3s;}
.kontakt-form .elementor-button:hover::after{width:52px;background-color:var(--teal);}
.kontakt-form .elementor-field-type-acceptance{margin-top:14px;font-size:14px;}
.ki-label,.ki-label .elementor-widget-container{font-size:16px!important;letter-spacing:.2em;text-transform:uppercase!important;color:var(--ink);margin-bottom:10px;}
.ki-val,.ki-val .elementor-widget-container{font-size:clamp(20px,2.2vw,26px)!important;font-weight:500;letter-spacing:-.01em;color:var(--ink);}
.ki-val a{color:var(--ink);}
.ki-val-sm,.ki-val-sm .elementor-widget-container{font-size:16px!important;font-weight:400!important;line-height:1.6;color:var(--ink);}
.ki-block{border-bottom:2px solid var(--ink);padding-bottom:clamp(14px,2vh,18px);margin-bottom:clamp(18px,2.5vh,24px);}
.ki-person{display:grid!important;grid-template-columns:auto 1fr!important;gap:20px!important;align-items:start;}
.ki-person .ki-photo img{width:120px;height:120px;object-fit:cover;display:block;}
.ki-role,.ki-role .elementor-widget-container{font-size:16px!important;font-weight:300;line-height:1.5;color:var(--ink);margin-top:4px;}
.ki-mail,.ki-mail .elementor-widget-container{font-size:16px!important;margin-top:8px;}
.ki-mail a{color:var(--ink);}
.ki-row2{display:grid!important;grid-template-columns:1fr 1fr!important;gap:20px!important;}

/* ------------------------------------------------------------------ single projekt (editorial, matches original) */
.pj-hero{position:relative;overflow:hidden;margin-top:clamp(78px,11vh,120px)!important;height:clamp(340px,68vh,760px);background:radial-gradient(120% 90% at 50% 42%,#2f6bd6 0%,#1a3f9e 42%,#0d2670 74%,#071a52 100%);}
/* image fallback */
.pj-hero .elementor-widget-image,.pj-hero .elementor-widget-image>.elementor-widget-container,.pj-hero .elementor-widget-image a{position:absolute;inset:0;width:100%;height:100%;margin:0;}
.pj-hero img{width:100%;height:100%;object-fit:cover;display:block;}
/* hosted video: square, centered, cover (matches original) */
.pj-hero .elementor-widget-video,.pj-hero .elementor-widget-video>.elementor-widget-container,.pj-hero .elementor-wrapper,.pj-hero .elementor-video{position:absolute;inset:0;height:100%;width:100%;margin:0;background:transparent;}
.pj-hero video{position:absolute;top:0;left:50%;transform:translateX(-50%);height:100%;width:auto;aspect-ratio:1/1;object-fit:cover;display:block;}
.pj-hero .elementor-custom-embed-image-overlay,.pj-hero .e-hosted-video .elementor-custom-embed-play{display:none!important;}
/* single-projekt wrapper: 1500px centred, NO big vertical padding (unlike .home-pad),
   so the title→intro spacing follows the container's own padding like the original */
.pj-wrap{max-width:1500px!important;margin-inline:auto!important;width:100%;}
/* exact original vertical rhythm around the title + intro + chapter gaps */
.pj-titlewrap{padding-top:clamp(40px,8vh,100px)!important;padding-bottom:clamp(24px,4vh,48px)!important;}
.pj-intro{padding-top:clamp(20px,3vh,40px)!important;padding-bottom:clamp(40px,7vh,88px)!important;}
.pj-chapters{display:flex!important;flex-direction:column!important;gap:clamp(28px,4vh,48px)!important;}
.pj-title .elementor-heading-title{font-size:clamp(30px,4vw,52px)!important;line-height:1.08;letter-spacing:-.02em;font-weight:500!important;color:var(--ink);max-width:1000px;}
.pj-intro{display:grid!important;grid-template-columns:1.6fr 1fr!important;gap:clamp(48px,8vw,140px)!important;align-items:start!important;}
@media(max-width:860px){.pj-intro{grid-template-columns:1fr!important;gap:20px!important;}}
.pj-h3 .elementor-heading-title{font-size:clamp(20px,2vw,26px)!important;line-height:1.2;font-weight:500!important;color:var(--ink);margin-bottom:14px;}
/* dynamic custom-field text-editors render the value WITHOUT .elementor-widget-container,
   so the size rule must hit the .pj-body wrapper itself (with !important) */
.pj-body,.pj-body .elementor-widget-container,.pj-body p{font-size:clamp(18px,1.7vw,22px)!important;line-height:1.5!important;font-weight:400;color:var(--ink);max-width:760px;}
.ph-tag{display:inline-block!important;align-self:flex-start;width:auto!important;font-size:11px!important;letter-spacing:.16em;text-transform:uppercase!important;color:#B0623E;border:1px solid #E0B79E;padding:3px 9px;margin-bottom:14px;line-height:1.4;}
.pj-fact{padding:clamp(12px,1.6vh,16px) 0!important;border-bottom:2px solid var(--ink);}
.pj-fact .fact-k,.pj-fact .fact-k .elementor-widget-container{font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin-bottom:6px;}
.pj-fact .fact-v,.pj-fact .fact-v .elementor-widget-container{font-size:clamp(17px,1.6vw,20px);font-weight:400;color:var(--ink);}
.pj-full img{width:100%;height:auto;display:block;}
.pj-full .elementor-widget-container{line-height:0;}
/* WP [gallery] rendered via Post Content widget → editorial rhythm (full / pair / full / pair) */
.pj-2up .gallery{display:grid!important;grid-template-columns:repeat(2,1fr)!important;gap:clamp(14px,2vw,20px)!important;align-items:start;}
.pj-2up .gallery-item:nth-child(1),.pj-2up .gallery-item:nth-child(4){grid-column:1 / -1;}
@media(max-width:720px){.pj-2up .gallery{grid-template-columns:1fr!important;}.pj-2up .gallery-item{grid-column:1 / -1!important;}}
.pj-2up .gallery br{display:none;}
.pj-2up .gallery-item{margin:0!important;width:auto!important;float:none!important;padding:0!important;}
.pj-2up .gallery-icon{line-height:0;}
.pj-2up .gallery-item img{width:100%;height:auto;display:block;border:0!important;}

/* project back/next nav — uppercase tracked with dot-arrow */
.pj-nav .rr-btn .elementor-button{font-size:15px!important;letter-spacing:.18em!important;text-transform:uppercase!important;font-weight:400!important;gap:16px;}
.pj-nav .rr-btn .elementor-button::after{width:36px;height:36px;}
.pj-nav .rr-btn:hover .elementor-button::after{width:52px;}
.pj-nav .rr-back .elementor-button::before{width:36px;height:36px;}
.pj-nav .rr-back .elementor-button:hover::before{width:52px;}

/* placeholder tag */
.ph-tag{display:inline-block!important;align-self:flex-start;width:auto!important;font-size:11px!important;letter-spacing:.16em;text-transform:uppercase!important;color:#B0623E;border:1px solid #E0B79E;padding:3px 9px;margin-bottom:14px;line-height:1.4;}
.pj-nav{display:flex!important;flex-direction:row!important;justify-content:space-between!important;gap:24px;flex-wrap:wrap;}
.rr-back .elementor-button::after{content:none;}
.rr-back .elementor-button::before{content:"←";width:26px;height:26px;border-radius:999px;background:var(--ink);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:14px;flex:none;order:-1;margin-right:12px;transition:width .4s cubic-bezier(.2,.7,.2,1),background .3s ease;}
.rr-back .elementor-button:hover::before{width:40px;background:var(--teal);}

/* ------------------------------------------------------------------ stats (line draw + count-up) */
.fc-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(28px,4vw,64px);}
.fc-stats .stat{display:flex;flex-direction:column;min-width:0;gap:0!important;}
.fc-stats .stat-num{font-size:clamp(64px,7vw,92px);font-weight:600;letter-spacing:-.04em;line-height:.92;color:var(--ink);}
.fc-stats .stat-line{width:100%!important;height:2px!important;min-height:0!important;padding:0!important;background:var(--ink);margin-top:clamp(16px,2vh,22px);transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.4,0,.2,1);}
.fc-stats.stats-in .stat-line{transform:scaleX(1);}
.fc-stats .stat-label{font-size:16px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-top:clamp(16px,2vh,20px);white-space:pre-line;}
@media(max-width:820px){.fc-stats{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:420px){.fc-stats{grid-template-columns:1fr;}}

/* ------------------------------------------------------------------ client marquee */
.marquee{overflow:hidden;width:100%;}
.marquee .mq-track{display:flex;gap:clamp(40px,5vw,80px);white-space:nowrap;width:max-content;animation:marquee 28s linear infinite;}
.marquee:hover .mq-track{animation-play-state:paused;}
.marquee .mq-item{font-size:clamp(26px,3.2vw,38px);font-weight:600;color:var(--ink);}

/* ------------------------------------------------------------------ process steps */
.proc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.2vw,32px);}
@media(max-width:720px){.proc-grid{grid-template-columns:repeat(2,1fr);}}
.step{transition:transform .45s cubic-bezier(.2,.7,.2,1);}
.step:hover{transform:translateY(-6px);}
.step .st-num{font-size:16px;color:var(--ink);opacity:.5;}
.step .st-word{font-size:var(--t4);font-weight:600;margin-top:8px;transition:color .3s ease;}
.step .st-desc{font-size:16px;line-height:1.4;margin-top:10px;opacity:0;transform:translateY(6px);transition:opacity .45s ease,transform .45s cubic-bezier(.2,.7,.2,1);}
.step:hover .st-desc,.step:focus-within .st-desc{opacity:1;transform:none;}

/* ------------------------------------------------------------------ team grid */
.tg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;width:100%;text-align:left;}
@media(max-width:900px){.tg-grid{grid-template-columns:repeat(2,1fr);}}
.tg-member .tg-shot{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--sand-2);}
.tg-member .tg-img{position:absolute;inset:0;background-size:cover;background-position:center;transition:filter .4s ease;}
.tg-member:hover .tg-img{filter:brightness(1.12);}
.tg-overlay{position:absolute;inset:0;background:var(--teal);opacity:0;pointer-events:none;transition:opacity .35s ease;display:flex;align-items:flex-start;justify-content:flex-start;padding:16px;}
.tg-member:hover .tg-overlay{opacity:1;pointer-events:auto;}
.tg-overlay a{font-size:20px;font-weight:300;color:var(--ink);text-decoration:none;line-height:1.3;}
.tg-member .tg-name{margin-top:12px;font-size:var(--t3);font-weight:600;color:var(--ink);}
.tg-member .tg-role{font-size:20px;font-weight:300;color:var(--ink);margin-top:4px;line-height:1.2;}

/* ------------------------------------------------------------------ underline links (footer) */
.ulink,.f-ul{text-decoration:none;background-image:linear-gradient(transparent,transparent);background-size:0% 1.5px;background-repeat:no-repeat;background-position:left bottom;transition:background-size .4s cubic-bezier(.2,.7,.2,1);color:var(--ink);}
.ulink:hover,.f-ul:hover{background-size:100% 1.5px;}

/* ------------------------------------------------------------------ reveal on scroll */
.reveal{will-change:opacity,transform;}

/* ------------------------------------------------------------------ scroll cue */
.scroll-arrow{animation:scrollbob 1.9s ease-in-out infinite;}

/* ------------------------------------------------------------------ accent surfaces (one big colour block per page) */
.accent-band{background:var(--teal);}
.accent-teal{background:var(--teal);}
.accent-teal-soft{background:var(--teal-soft);}
.accent-yellow{background:var(--yellow);}
.accent-pink{background:var(--pink);}

/* ------------------------------------------------------------------ responsive helpers */
/* mobile nav (hamburger) */
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:30px;height:30px;background:none;border:0;cursor:pointer;padding:0;position:relative;z-index:60;}
.nav-toggle span{display:block;height:2px;width:26px;background:var(--ink);transition:transform .3s ease,opacity .3s ease;}
html.nav-open .nav-toggle span:nth-child(1){transform:translateY(3.5px) rotate(45deg);}
html.nav-open .nav-toggle span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg);}
@media(max-width:760px){
  .nav-toggle{display:flex;}
  #siteHeader .nav-links{position:fixed!important;inset:0;width:100%;height:100vh;background:var(--paper);flex-direction:column!important;justify-content:center;align-items:center;gap:clamp(24px,5vh,44px)!important;transform:translateX(100%);transition:transform .45s cubic-bezier(.2,.7,.2,1);z-index:50;margin:0;}
  html.nav-open #siteHeader .nav-links{transform:none;}
  #siteHeader .nav-links .mlink{font-size:30px!important;}
  html.nav-open{overflow:hidden;}
}
@media(max-width:720px){.work-row{grid-template-columns:repeat(2,1fr)!important;}}
@media(max-width:420px){.work-row{grid-template-columns:1fr!important;}}