/* TIEFGRÜN. Design-Tokens nach Brandbook 2026
   Quelle: Gamma „Tiefgrün. Garten. Landschaft. Haag.“ (gzavhoizmij26wm),
   Karten „Farben aus dem Boden und vom Blatt“, „Eine Schrift mit Haltung“,
   „Layout und Raster“, „Buttons und Formulare“, „Website-Prinzipien“.
   Werte ohne Brandbook-Beleg sind mit „Annahme“ markiert. */
:root {
  /* Farbe: Brandbook 2026 (Website-Prinzipien, CSS-Namen wie im Brandbook) */
  --tg-green: #0A3D2E;   /* Tiefgrün – Hauptfarbe, große Flächen */
  --tg-fern: #2F7A55;    /* Farn – Akzent auf Hell, Grafiken, Fokus */
  --tg-sage: #A9C7B3;    /* Salbei – Akzent nur auf Dunkel, nie Textfläche */
  --tg-mist: #DDE6DB;    /* Nebel – ruhige Flächen und Tabellen */
  --tg-chalk: #F4F1E8;   /* Kreide – Papier und Grund */
  --tg-earth: #2A1E16;   /* Humus – Text und Tiefe */
  --tg-stone: #5E6B63;   /* Stein – Feldlinien, Sekundärtext auf Hell */
  --tg-rust: #8F2F22;    /* Backsteinrot – nur Fehler, nie dekorativ */
  --tg-logo-cut: #7FA78F; /* Boden-Schnitt der Wortmarke, aus den Brandbook-Logodateien gemessen; nur im Logo */

  /* Kompatible Aliase für bestehende Selektoren (Guide 1.3 -> 2026) */
  --tg-cream: var(--tg-chalk);
  --tg-charcoal: var(--tg-earth);
  --tg-green-500: var(--tg-fern);
  --tg-muted: var(--tg-stone);
  --tg-slate: var(--tg-stone);
  --tg-sand: var(--tg-mist);

  /* Farbe: Rollen (WCAG-Kontraste in docs/brandbook-2026-umsetzung.md) */
  --tg-surface-dark: var(--tg-green);
  --tg-surface-light: var(--tg-chalk);
  --tg-surface-quiet: var(--tg-mist);
  --tg-text: var(--tg-earth);                    /* 14,4:1 auf Kreide */
  --tg-text-2: var(--tg-stone);                  /* 4,95:1 auf Kreide */
  --tg-text-on-dark: var(--tg-chalk);            /* 10,8:1 auf Tiefgrün */
  --tg-text-on-dark-2: rgb(244 241 232 / .82);   /* ≥ 7:1 auf Tiefgrün */
  --tg-accent: var(--tg-fern);                   /* nur auf Hell, 4,6:1 */
  --tg-accent-dark: var(--tg-sage);              /* nur auf Dunkel, 6,7:1 */
  --tg-rule-light: rgb(94 107 99 / .32);         /* dekorative Linie auf Hell */
  --tg-rule-dark: rgb(169 199 179 / .32);        /* dekorative Linie auf Dunkel */
  --tg-field-line: var(--tg-stone);              /* Feld: 1 px Stein */
  --tg-focus: var(--tg-fern);                    /* Fokus 2 px Farn auf Hell */
  --tg-focus-on-dark: var(--tg-sage);            /* Annahme: Farn hat auf Tiefgrün nur 2,4:1 */
  --tg-overlay: rgb(10 61 46 / .62);             /* Bildabdunkelung in Tiefgrün */
  --tg-error: var(--tg-rust);

  /* Typografie: Big Shoulders 800 / Instrument Sans Italic (Subheads) / Instrument Sans 400+600 */
  --logo: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --serif: "Instrument Sans", "Helvetica Neue", Arial, sans-serif; /* italic subheads only; no serif */
  --sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  /* Skala (Annahme: fluide Werte; Brandbook nennt nur Button 12,5 px) */
  --tg-display: clamp(3rem, 6.4vw + 1rem, 7.5rem);
  --tg-h1: clamp(2.75rem, 5vw + 1rem, 6rem);
  --tg-h2: clamp(2.25rem, 3.6vw + 1rem, 4.5rem);
  --tg-h3: clamp(1.25rem, .8vw + 1rem, 1.5rem);
  --tg-serif-size: clamp(1.25rem, 1.2vw + .75rem, 1.875rem);
  --tg-numeral: clamp(2rem, 2.5vw + 1rem, 2.75rem);
  --tg-body: clamp(1rem, .25vw + .95rem, 1.125rem);
  --tg-body-sm: .9375rem;
  --tg-label: clamp(.75rem, .2vw + .7rem, .8125rem);
  --tg-button: .78125rem;  /* 12,5 px – Brandbook */
  --tg-track-display: .005em;
  --tg-leading-display: .92;
  --tg-track-label: .14em;
  --tg-track-button: .12em;

  /* Abstände: Brandbook-Skala 4 · 8 · 12 · 16 · 24 · 32 · 40 · 56 · 80 · 120 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 40px;
  --sp-8: 56px;
  --sp-9: 80px;
  --sp-10: 120px;
  --sp-section: clamp(56px, 9vw, 120px);
  --sp-gutter: clamp(16px, 6vw, 80px);
  /* Breakpoints (Dokumentation, in Media Queries ausgeschrieben): 420 · 680 · 980 */

  /* Form: 0 px Ecken, nur Pill-Buttons rund, keine Schatten/Verläufe */
  --radius: 0;
  --radius-button: 999px;
  --button-height: 48px;
  --stroke: 1px;
  --hair: 1px;

  /* Bewegung */
  --ease-out: cubic-bezier(.2, .75, .15, 1);
  --ease-inout: cubic-bezier(.77, 0, .18, 1);
  --dur-1: .2s;
  --dur-2: .35s;
  --dur-3: .65s;
  --dur-4: 1.2s;

  /* Ebenen */
  --z-base: 1;
  --z-header: 80;
  --z-menu: 900;
  --z-loader: 1000;
  --z-skip: 2000;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0s;
    --dur-2: 0s;
    --dur-3: 0s;
    --dur-4: 0s;
  }
}










:root{color-scheme:dark;--ink: #0A3D2E;--graphite: #2A1E16;--forest: #0A3D2E;--stone: #5E6B63;--sand: #A9C7B3;--brass: #A9C7B3;--paper: #F4F1E8;--line: rgba(58,79,69,1);--display: "Big Shoulders Display", "Arial Narrow", sans-serif, "Arial Narrow", sans-serif;--sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif, "Aptos", sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--ink)}body{margin:0;min-width:320px;min-height:100vh;background:var(--ink);color:var(--paper);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}body.menu-open{overflow:hidden}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}img{display:block;width:100%}video{display:block;width:100%}.ambient-video{width:100%;height:100%;object-fit:cover;background:#0A3D2E}::selection{background:var(--brass);color:var(--ink)}.preloader{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;background:#0A3D2E;display:grid;grid-template-rows:auto 1fr auto;padding:30px 36px;color:var(--paper);animation:loaderOut .9s 1.7s cubic-bezier(.77,0,.18,1) forwards}.preloader__top,.preloader__bottom{display:flex;justify-content:space-between;text-transform:uppercase;font:400 10px/1 var(--sans);letter-spacing:.26em}.preloader__center{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:22px}.preloader__center p{margin:0;font:300 clamp(2rem,5vw,5rem)/1 var(--display);text-transform:uppercase;letter-spacing:-.02em}.preloader__line{width:min(260px,38vw);height:1px;background:#F4F1E833;position:relative;overflow:hidden}.preloader__line:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--brass);transform:translate(-100%);animation:loadLine 1.7s ease-out forwards}.preloader__bottom span:first-child{font:300 32px/1 var(--display);letter-spacing:-.03em}@keyframes loadLine{to{transform:translate(0)}}@keyframes loaderOut{to{opacity:0;visibility:hidden;transform:translateY(-100%)}}.site-header{position:absolute;z-index:80;top:0;left:0;width:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:24px 34px;border-bottom:1px solid rgba(58,79,69,1);mix-blend-mode:normal}.wordmark{display:inline-flex;flex-direction:column;width:max-content;gap:2px}.wordmark__name{font:500 24px/.85 var(--display);letter-spacing:.14em}.wordmark__sub{font:400 6px/1 var(--sans);text-transform:uppercase;letter-spacing:.18em;opacity:.72}.wordmark--light{color:var(--paper)}.header-location{font-size:9px;text-transform:uppercase;letter-spacing:.28em;opacity:.72}.menu-button{justify-self:end;background:transparent;color:inherit;border:0;padding:10px 0 10px 20px;text-transform:uppercase;font-size:9px;letter-spacing:.28em;cursor:pointer;position:relative}.menu-button:after{content:"";position:absolute;left:20px;right:0;bottom:5px;height:1px;background:currentColor;transform:scaleX(.35);transform-origin:right;transition:transform .45s ease}.menu-button:hover:after{transform:scaleX(1)}.menu-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:900;background:#0A3D2E;opacity:0;visibility:hidden;transition:opacity .65s ease,visibility .65s;display:grid;grid-template-rows:auto 1fr auto;padding:24px 34px 28px;overflow:hidden}.menu-overlay.is-open{opacity:1;visibility:visible}.menu-grain{position:absolute;top:0;right:0;bottom:0;left:0;opacity:.18;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.15'/%3E%3C/svg%3E");pointer-events:none}.menu-top{display:flex;justify-content:space-between;position:relative;z-index:1}.menu-nav{align-self:center;display:flex;flex-direction:column;width:min(900px,80vw);margin-left:8vw;position:relative;z-index:1}.menu-nav a{display:flex;align-items:baseline;gap:30px;border-bottom:1px solid var(--line);font:300 clamp(2.7rem,6vw,6.4rem)/1.08 var(--display);text-transform:uppercase;letter-spacing:-.025em;padding:.06em 0 .12em;opacity:0;transform:translateY(32px);transition:color .3s ease,padding .35s ease}.is-open .menu-nav a{animation:menuIn .7s calc(.1s + var(--i) * 55ms) cubic-bezier(.2,.75,.15,1) forwards}.menu-nav a span{font:400 9px/1 var(--sans);letter-spacing:.18em;color:var(--brass)}.menu-nav a:hover{color:var(--sand);padding-left:16px}.menu-foot{position:relative;z-index:1;font-size:10px;line-height:1.7;letter-spacing:.12em;text-transform:uppercase;opacity:.5;margin:0}@keyframes menuIn{to{opacity:1;transform:translateY(0)}}.hero{min-height:100svh;position:relative;overflow:hidden;background:var(--ink)}.hero__image{position:absolute;top:-3%;right:-3%;bottom:-3%;left:-3%;width:106%;height:106%;object-fit:cover;object-position:center;filter:saturate(.7) contrast(1.08)}.hero__film{position:absolute;top:-2%;right:-2%;bottom:-2%;left:-2%;width:104%;height:104%;object-fit:cover;object-position:center;filter:saturate(.8) contrast(1.08);background:#0A3D2E}.hero__shade{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,#0A3D2Ec7,#0A3D2E47 46%,#0A3D2E14),linear-gradient(0deg,#0A3D2Ed4,#0A3D2E52 48%,#0A3D2E1f);pointer-events:none}.hero__contours{position:absolute;top:0;right:0;bottom:0;left:0;opacity:.24;background-image:repeating-radial-gradient(ellipse at 15% 68%,transparent 0 28px,rgba(213,205,194,.12) 29px 30px,transparent 31px 56px);-webkit-mask-image:linear-gradient(90deg,black,transparent 56%);mask-image:linear-gradient(90deg,black,transparent 56%)}.hero__content{position:relative;z-index:2;min-height:100svh;padding:18vh 6vw 6vh;display:flex;flex-direction:column;justify-content:flex-end}.hero__kicker{font-size:9px;letter-spacing:.32em;text-transform:uppercase;color:var(--sand);margin:0 0 3vh}.hero h1{font:400 clamp(5rem,11.4vw,12.4rem)/.8 var(--display);letter-spacing:-.055em;text-transform:uppercase;max-width:1300px;margin:0}.hero h1 em,h2 em{color:var(--brass);font-style:normal;font-weight:300}.hero__lower{display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:end;margin-top:4vh}.hero__copy{font-size:clamp(1rem,1.35vw,1.35rem);line-height:1.55;max-width:460px;margin:0;color:#F4F1E8d1}.hero__actions{display:flex;gap:42px;align-items:center}.cta{display:inline-flex;justify-content:space-between;align-items:center;min-width:210px;padding:16px 18px;border:1px solid currentColor;text-transform:uppercase;font-size:9px;letter-spacing:.23em;transition:background .35s ease,color .35s ease}.cta span{font-size:7px;letter-spacing:.16em}.cta--light:hover{background:var(--paper);color:var(--ink)}.text-link,.text-button{background:none;border:0;border-bottom:1px solid currentColor;color:inherit;padding:9px 0;text-transform:uppercase;font-size:9px;letter-spacing:.22em;cursor:pointer}.hero__film-ui{position:absolute;z-index:4;top:17vh;right:34px;display:grid;justify-items:end;gap:8px;text-transform:uppercase}.hero__phase-no{color:var(--brass);font-size:8px;letter-spacing:.24em}.hero__film-ui strong{font:400 clamp(1.8rem,3vw,3.4rem)/1 var(--display);letter-spacing:-.02em;animation:filmPhaseIn .5s cubic-bezier(.2,.75,.15,1)}.hero__film-length{font-size:7px;letter-spacing:.2em;opacity:.55}.hero__film-progress{position:absolute;z-index:5;left:0;right:0;bottom:0;height:2px;background:#F4F1E82e}.hero__film-progress i{display:block;width:100%;height:100%;background:var(--brass);transform-origin:left;transition:transform .22s linear}.hero__film-control{position:absolute;z-index:5;right:34px;bottom:24px;border:0;border-bottom:1px solid rgba(244,241,232,.5);padding:7px 0;background:transparent;color:var(--paper);text-transform:uppercase;font-size:7px;letter-spacing:.2em;cursor:pointer}.hero__meta{position:absolute;right:34px;bottom:100px;z-index:3;display:flex;align-items:center;gap:22px;font-size:8px;letter-spacing:.2em;text-transform:uppercase;writing-mode:vertical-rl}.hero__meta i{height:65px;width:1px;background:var(--paper);opacity:.5}@keyframes filmPhaseIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.section-pad{padding:130px 6vw}.section-index{display:grid;grid-template-columns:60px 1fr;gap:28px;align-items:center;text-transform:uppercase;font-size:8px;letter-spacing:.26em;color:#F4F1E88c;margin-bottom:90px}.section-index:after{content:"";height:1px;background:var(--line)}.section-index--dark{color:#2A1E168c}.section-index--dark:after{background:rgba(94,107,99,0.45)}.statement{background:#0A3D2E}.statement__grid{display:grid;grid-template-columns:1.45fr .55fr;gap:8vw;align-items:end}.statement h2,.services h2,.projects h2,.process h2,.contact h2{margin:0;font:400 clamp(3.5rem,7.4vw,8.2rem)/.94 var(--display);text-transform:uppercase;letter-spacing:-.045em}.statement__copy{max-width:470px;padding-bottom:12px}.statement__copy p{font-size:1rem;line-height:1.75;color:#F4F1E8b8;margin:0 0 24px}.statement__copy p:first-child{font-size:1.35rem;color:var(--paper);line-height:1.5}.statement__copy span{display:block;margin-top:48px;padding-top:16px;border-top:1px solid var(--line);text-transform:uppercase;font-size:8px;letter-spacing:.22em;color:var(--sand)}.statement__image{margin:140px 0 0;height:min(74vw,880px);overflow:hidden;position:relative}.statement__image img{height:112%;object-fit:cover}.statement__image figcaption{position:absolute;bottom:0;inset-inline:0;padding:18px 20px;display:flex;justify-content:space-between;background:#0A3D2Eb8;text-transform:uppercase;font-size:8px;letter-spacing:.2em}.transformation{height:600vh;background:var(--ink)}.transformation__sticky{position:sticky;top:0;height:100svh;overflow:hidden}.transformation__images,.phase-image,.image-vignette{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.phase-image{object-fit:cover;opacity:0;filter:saturate(.72) contrast(1.06)}.phase-image--0{opacity:1}.image-vignette{background:linear-gradient(90deg,rgba(8,26,20,.8) 0%,transparent 52%),linear-gradient(0deg,rgba(8,26,20,.62),transparent 56%)}.plan-lines{position:absolute;top:0;right:0;bottom:0;left:0;opacity:.5}.plan-lines i{position:absolute;display:block;background:#DDE6DB85;height:1px;transform-origin:left}.plan-lines i:nth-child(1){width:82vw;left:12vw;top:61%;transform:rotate(-3deg)}.plan-lines i:nth-child(2){width:76vw;left:18vw;top:68%;transform:rotate(4deg)}.plan-lines i:nth-child(3){width:1px;height:72vh;left:50%;top:16%;transform:rotate(26deg)}.transformation__eyebrow{position:absolute;top:30px;left:34px;right:34px;display:flex;justify-content:space-between;text-transform:uppercase;font-size:8px;letter-spacing:.23em}.phase-copy-wrap{position:absolute;left:6vw;bottom:11vh;width:min(650px,58vw)}.phase-copy{position:absolute;left:0;bottom:0;opacity:0;transform:translateY(26px)}.phase-copy:first-child{opacity:0}.phase-copy>span{text-transform:uppercase;color:var(--brass);font-size:9px;letter-spacing:.24em}.phase-copy h3{font:400 clamp(5rem,11vw,12rem)/.88 var(--display);text-transform:uppercase;letter-spacing:-.05em;margin:10px 0 20px}.phase-copy p{max-width:440px;font-size:1rem;line-height:1.6;color:#F4F1E8cc;margin:0}.transformation__progress{position:absolute;left:6vw;right:6vw;bottom:34px;display:flex;align-items:center;gap:18px}.transformation__progress:before{content:"";flex:1;height:1px;background:#F4F1E847}.transformation__progress i{position:absolute;left:0;width:calc(100% - 250px);height:1px;background:var(--brass);transform:scaleX(0);transform-origin:left}.transformation__progress span{font-size:8px;text-transform:uppercase;letter-spacing:.18em}.build-story{background:#0A3D2E}.build-story__grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:8vw;align-items:center}.build-story__copy>span{color:var(--sand);text-transform:uppercase;font-size:8px;letter-spacing:.24em}.build-story__copy h2{margin:34px 0 42px;font:400 clamp(3.4rem,6.2vw,7.2rem)/.93 var(--display);text-transform:uppercase;letter-spacing:-.045em}.build-story__copy p{max-width:470px;margin:0;color:#F4F1E8ad;font-size:1rem;line-height:1.72}.build-story__facts{margin-top:70px;display:grid;border-top:1px solid var(--line)}.build-story__facts span{padding:14px 0;border-bottom:1px solid var(--line);color:#F4F1E89e;text-transform:uppercase;font-size:8px;letter-spacing:.19em}.build-story__media{position:relative;overflow:hidden;margin:0;aspect-ratio:4 / 3;background:#0A3D2E}.build-story__media .ambient-video{filter:saturate(.62) contrast(1.05)}.build-story__media:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:linear-gradient(0deg,rgba(8,26,20,.45),transparent 38%)}.build-story__media figcaption{position:absolute;z-index:1;left:20px;right:20px;bottom:18px;display:flex;justify-content:space-between;gap:20px;color:#F4F1E8d1;text-transform:uppercase;font-size:8px;letter-spacing:.18em}.services,.process,.contact{background:var(--paper);color:#2B2E2B}.services__head,.projects__head,.process__head{display:grid;grid-template-columns:1.45fr .55fr;gap:8vw;align-items:end;margin-bottom:110px}.services__head p,.process__head p,.projects__head p{max-width:390px;font-size:1rem;line-height:1.7;opacity:.65;margin:0}.service-list{border-top:1px solid rgba(16,37,30,.25)}.service-row{display:grid;grid-template-columns:70px minmax(340px,1.35fr) 1fr auto;gap:35px;align-items:center;min-height:112px;border-bottom:1px solid rgba(16,37,30,.22);position:relative;overflow:hidden;transition:padding .35s ease,color .35s ease}.service-row:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--forest);transform:translateY(101%);transition:transform .45s cubic-bezier(.77,0,.18,1)}.service-row:hover{color:var(--paper);padding-inline:20px}.service-row:hover:before{transform:translateY(0)}.service-row>*{position:relative;z-index:1}.service-row>span{font-size:8px;letter-spacing:.2em;color:#2D4F3E}.service-row h3{font:400 clamp(1.5rem,2.45vw,2.8rem)/1.05 var(--display);text-transform:uppercase;margin:0}.service-row p{margin:0;max-width:440px;opacity:.62;line-height:1.5;font-size:.9rem}.service-row b{font-size:8px;text-transform:uppercase;letter-spacing:.2em;font-weight:400}.service-feature{margin-top:120px;display:grid;grid-template-columns:1.35fr .65fr;gap:6vw;align-items:center}.service-feature__media{position:relative;overflow:hidden;margin:0;aspect-ratio:16 / 9;background:#0A3D2E}.service-feature__media .ambient-video{filter:saturate(.68) contrast(1.04)}.service-feature__media:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:linear-gradient(0deg,rgba(8,26,20,.52),transparent 42%)}.service-feature__media figcaption{position:absolute;z-index:1;left:17px;bottom:15px;color:#F4F1E8cc;text-transform:uppercase;font-size:8px;letter-spacing:.18em}.service-feature__copy>span{color:#2D4F3E;text-transform:uppercase;font-size:8px;letter-spacing:.22em}.service-feature__copy h3{margin:25px 0;font:400 clamp(2.2rem,3.7vw,4.5rem)/.98 var(--display);letter-spacing:-.025em;text-transform:uppercase}.service-feature__copy p{margin:0;max-width:390px;font-size:.95rem;line-height:1.68;opacity:.62}.projects{background:#2A1E16}.projects__head{margin-bottom:120px}.project-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:120px 6vw;align-items:start}.project--wide{grid-column:1 / -1}.project--portrait{width:80%}.project--detail{margin-top:28vh}.project__media{overflow:hidden;background:#0A3D2E}.project--wide .project__media{aspect-ratio:16/8.2}.project--portrait .project__media{aspect-ratio:4/5}.project--detail .project__media{aspect-ratio:4/3}.project__media img{height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.75,.2,1),filter .5s ease;filter:saturate(.75)}.project a:hover .project__media img{transform:scale(1.035);filter:saturate(.95)}.project__caption{display:grid;grid-template-columns:170px 1fr auto;align-items:end;gap:20px;border-bottom:1px solid var(--line);padding:22px 0 19px}.project__caption span,.project__caption p{font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:#F4F1E88c;margin:0}.project__caption h3{font:400 clamp(1.4rem,2.4vw,2.7rem)/1 var(--display);text-transform:uppercase;margin:0}.craft{background:#2A1E16;display:grid;grid-template-columns:.78fr 1.22fr;min-height:100vh}.craft__copy{padding:12vh 6vw;display:flex;flex-direction:column;justify-content:center}.craft__copy>span{text-transform:uppercase;font-size:8px;letter-spacing:.25em;color:var(--sand)}.craft__copy h2{font:400 clamp(3.2rem,5.4vw,6.4rem)/.95 var(--display);text-transform:uppercase;letter-spacing:-.04em;margin:38px 0}.craft__copy p{max-width:440px;line-height:1.7;color:#F4F1E8ad}.craft__filmstrip{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#F4F1E81f}.craft__filmstrip figure{margin:0;position:relative;overflow:hidden;min-height:50vh}.craft__filmstrip img,.craft__filmstrip video{width:100%;height:100%;object-fit:cover;filter:saturate(.3) contrast(1.05);transition:filter .5s ease,transform .8s ease}.craft__filmstrip figure:hover img,.craft__filmstrip figure:hover video{filter:saturate(.72);transform:scale(1.025)}.craft__shot--video:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:linear-gradient(0deg,rgba(8,26,20,.28),transparent 45%)}.craft__filmstrip figcaption{position:absolute;bottom:14px;right:14px;background:#0A3D2Eb3;padding:8px 10px;font-size:8px;letter-spacing:.18em}.process__steps{display:grid;grid-template-columns:repeat(5,1fr);gap:32px}.process__steps article{min-height:320px;display:flex;flex-direction:column}.process__steps span{font-size:9px;letter-spacing:.2em;color:#2D4F3E}.process__steps i{width:100%;height:1px;background:rgba(94,107,99,0.45);margin:26px 0 70px;position:relative}.process__steps i:before{content:"";position:absolute;width:7px;height:7px;background:var(--paper);border:1px solid #2D4F3E;border-radius:50%;top:-3px;left:0}.process__steps h3{font:400 1.65rem/1 var(--display);text-transform:uppercase;margin:0 0 22px}.process__steps p{font-size:.88rem;line-height:1.6;opacity:.62;margin:0}.why{min-height:110vh;position:relative;display:flex;align-items:center;overflow:hidden}.why>img{position:absolute;top:0;right:0;bottom:0;left:0;height:100%;object-fit:cover}.why__shade{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,#0A3D2Eeb,#0A3D2E40)}.why__content{position:relative;z-index:1;padding:12vh 6vw;width:100%}.why__content>span{color:var(--sand);font-size:8px;letter-spacing:.25em;text-transform:uppercase}.why h2{font:400 clamp(4rem,8vw,9rem)/.92 var(--display);letter-spacing:-.045em;text-transform:uppercase;margin:48px 0 80px}.why ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(160px,240px));gap:0 45px}.why li{padding:16px 0;border-top:1px solid rgba(244,241,232,.25);text-transform:uppercase;font-size:8px;letter-spacing:.18em}.contact{display:grid;grid-template-columns:.68fr 1.32fr;gap:9vw;padding-top:160px}.contact__intro{position:sticky;top:60px;height:max-content}.contact__intro>span{text-transform:uppercase;font-size:8px;letter-spacing:.23em;color:#2D4F3E}.contact__intro h2{margin:40px 0 45px}.contact__intro>p{max-width:450px;line-height:1.75;opacity:.66}.contact__meta{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:80px;border-top:1px solid rgba(201,199,192,1);padding-top:20px}.contact__meta p{font-size:.8rem;margin:0}.contact__meta span{display:block;text-transform:uppercase;font-size:7px;letter-spacing:.2em;opacity:.5;margin-bottom:10px}.project-form{display:grid;grid-template-columns:1fr 1fr;gap:30px 28px;padding-top:10px}.project-form label:not(.upload){display:flex;flex-direction:column;gap:12px}.project-form label>span{text-transform:uppercase;font-size:8px;letter-spacing:.19em;opacity:.65}.project-form input,.project-form select,.project-form textarea{width:100%;background:transparent;color:#2B2E2B;border:0;border-bottom:1px solid rgba(201,199,192,1);padding:5px 0 14px;border-radius:0;outline:none;transition:border-color .25s}.project-form textarea{resize:vertical;line-height:1.55}.project-form input:focus,.project-form select:focus,.project-form textarea:focus{border-color:#2D4F3E}.form-wide{grid-column:1 / -1}.upload{min-height:82px;border:1px dashed rgba(201,199,192,1);display:flex;align-items:center;justify-content:space-between;padding:0 22px;cursor:pointer}.upload input{position:absolute;opacity:0;width:1px;height:1px}.upload b{font-size:8px;text-transform:uppercase;letter-spacing:.18em;font-weight:500;border-bottom:1px solid;padding-bottom:4px}.form-submit{display:flex;align-items:center;justify-content:space-between;gap:35px;margin-top:25px}.form-submit p{max-width:380px;font-size:.7rem;line-height:1.5;opacity:.5}.form-submit .cta{background:#2B2E2B;color:var(--paper);cursor:pointer}.form-submit .cta:hover{background:#2D4F3E;color:#fff}.form-success{border-top:1px solid rgba(201,199,192,1);padding-top:60px}.form-success>span{font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:#2D4F3E}.form-success h3{font:400 clamp(2.5rem,4.5vw,5rem)/1 var(--display);text-transform:uppercase;margin:28px 0}.form-success p{line-height:1.7;max-width:560px;opacity:.65}.form-success .text-button{margin-top:35px}.footer{background:#0A3D2E;padding:80px 6vw 28px}.footer__top{display:flex;align-items:flex-end;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:65px}.footer__top .wordmark__name{font-size:clamp(4rem,9vw,10rem);letter-spacing:.08em}.footer__top .wordmark__sub{font-size:clamp(7px,.75vw,12px)}.footer__top p{margin:0;font:300 clamp(1.4rem,2.5vw,2.8rem)/1 var(--display);text-transform:uppercase;color:var(--sand)}.footer__links{display:grid;grid-template-columns:1fr 1fr;gap:60px;padding:55px 0 90px}.footer__links nav,.footer__links>div{display:grid;grid-template-columns:repeat(2,max-content);gap:16px 55px}.footer__links a{text-transform:uppercase;font-size:8px;letter-spacing:.2em;opacity:.62}.footer__links a:hover{opacity:1}.footer__bottom{border-top:1px solid var(--line);padding-top:22px;display:flex;justify-content:space-between;text-transform:uppercase;font-size:7px;letter-spacing:.16em;opacity:.52}@media(max-width:980px){.site-header{grid-template-columns:1fr 1fr}.header-location{display:none}.hero__lower,.statement__grid,.build-story__grid,.services__head,.service-feature,.projects__head,.process__head,.contact{grid-template-columns:1fr}.hero__content{justify-content:flex-end;padding-bottom:12vh}.hero__lower{gap:28px}.statement__copy{margin-top:55px}.build-story__copy{max-width:720px}.build-story__media{margin-top:55px}.service-row{grid-template-columns:50px 1fr auto}.service-row p{display:none}.service-feature__copy{max-width:620px}.craft{grid-template-columns:1fr}.craft__filmstrip figure{min-height:40vw}.process__steps{grid-template-columns:repeat(3,1fr)}.contact__intro{position:static;margin-bottom:80px}.project__caption{grid-template-columns:1fr;gap:9px}}@media(max-width:680px){.site-header,.menu-overlay{padding-inline:20px}.menu-nav{width:100%;margin-left:0}.menu-nav a{font-size:12.5vw;gap:18px}.menu-foot{display:none}.hero__content{padding:18vh 20px 12vh}.hero h1{font-size:15.2vw;line-height:.86;letter-spacing:-.055em}.hero__kicker{margin-bottom:24px;max-width:92%;font-size:7px;letter-spacing:.22em;line-height:1.5}.hero__actions{align-items:flex-start;flex-direction:column;gap:18px}.hero__meta{display:none}.hero__image{object-position:62% center}.hero__film{object-position:center}.hero__film-ui{top:105px;left:20px;right:auto;justify-items:start}.hero__film-ui strong{font-size:1.8rem}.hero__film-length{display:none}.hero__film-control{right:20px;bottom:20px}.section-pad{padding:90px 20px}.section-index{margin-bottom:55px}.statement h2,.services h2,.projects h2,.process h2,.contact h2{font-size:15vw}.statement__image{margin-top:80px;height:110vw}.transformation{height:470vh}.transformation__eyebrow{top:20px;left:20px;right:20px}.transformation__eyebrow span:last-child{display:none}.phase-copy-wrap{left:20px;bottom:90px;width:calc(100vw - 40px)}.phase-copy h3{font-size:26vw}.phase-copy p{font-size:.88rem;max-width:88vw}.transformation__progress{left:20px;right:20px;bottom:24px}.transformation__progress span{display:none}.transformation__progress i{width:100%}.phase-image{object-position:61% center}.build-story__copy h2{font-size:15vw}.build-story__facts{margin-top:45px}.build-story__media{aspect-ratio:4 / 5}.build-story__media .ambient-video{object-position:53% center}.build-story__media figcaption span:last-child{display:none}.services__head,.projects__head,.process__head{margin-bottom:70px}.services__head p,.projects__head p,.process__head p{margin-top:35px}.service-row{grid-template-columns:34px 1fr;gap:12px;min-height:90px}.service-row b{display:none}.service-row h3{font-size:1.45rem}.service-feature{margin-top:80px;gap:42px}.service-feature__media{aspect-ratio:4 / 3}.service-feature__copy h3{font-size:12vw}.project-grid{grid-template-columns:1fr;gap:80px}.project--wide{grid-column:auto}.project--portrait{width:88%}.project--detail{margin:0 0 0 auto;width:92%}.project--wide .project__media{aspect-ratio:4/3}.craft__copy{padding:90px 20px}.craft__copy h2{font-size:14vw}.craft__filmstrip figure{min-height:58vw}.process__steps{grid-template-columns:1fr;gap:15px}.process__steps article{min-height:auto;display:grid;grid-template-columns:44px 1fr;align-items:start;border-top:1px solid rgba(201,199,192,1);padding:25px 0 28px}.process__steps i{display:none}.process__steps h3{grid-column:2;margin-top:-6px}.process__steps p{grid-column:2}.why{min-height:100svh}.why__content{padding-inline:20px}.why h2{font-size:16vw}.why ul{grid-template-columns:1fr 1fr;gap:0 20px}.contact__meta,.project-form{grid-template-columns:1fr}.form-wide{grid-column:auto}.form-submit{align-items:stretch;flex-direction:column}.form-submit .cta{width:100%}.footer{padding-inline:20px}.footer__top{align-items:flex-start;flex-direction:column;gap:45px}.footer__top .wordmark__name{font-size:25vw}.footer__links{grid-template-columns:1fr}.footer__bottom{gap:30px;line-height:1.5}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.phase-image--3{opacity:1}.phase-copy--5{opacity:1;transform:none}.transformation{height:100svh}}


      .haag-personal{position:relative;overflow:hidden;background:#0A3D2E;color:var(--paper);padding:clamp(90px,10vw,170px) clamp(20px,5vw,76px)}
      .haag-personal:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.13;background-image:linear-gradient(rgba(244,241,232,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(244,241,232,.07) 1px,transparent 1px);background-size:clamp(70px,8vw,120px) clamp(70px,8vw,120px)}
      .haag-personal__index{position:relative;display:flex;justify-content:space-between;gap:20px;padding-bottom:18px;border-bottom:1px solid var(--line);font:400 9px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--brass)}
      .haag-personal__grid{position:relative;display:grid;grid-template-columns:minmax(280px,.82fr) minmax(420px,1.18fr);gap:clamp(48px,8vw,140px);align-items:start;padding-top:clamp(52px,7vw,110px)}
      .haag-personal__portrait{margin:0;position:relative;min-height:620px;background:#0A3D2E;overflow:hidden}
      .haag-personal__portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.62) contrast(1.06)}
      .haag-personal__portrait:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,26,20,.68),transparent 48%)}
      .haag-personal__portrait figcaption{position:absolute;z-index:1;left:24px;right:24px;bottom:20px;display:flex;justify-content:space-between;gap:16px;font:400 8px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:rgba(244,241,232,.72)}
      .haag-personal__copy h2{margin:0;font:300 clamp(4.2rem,8vw,9.5rem)/.86 var(--display);text-transform:uppercase;letter-spacing:-.045em}
      .haag-personal__copy h2 em{display:block;color:var(--sand);font-style:normal}
      .haag-personal__lead{max-width:680px;margin:clamp(40px,5vw,72px) 0 0;font:300 clamp(1.15rem,1.7vw,1.65rem)/1.52 var(--sans);color:rgba(244,241,232,.82)}
      .haag-personal__facts{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(48px,6vw,90px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
      .haag-personal__fact{min-height:150px;padding:24px 18px 24px 0;border-right:1px solid var(--line)}
      .haag-personal__fact:not(:first-child){padding-left:22px}.haag-personal__fact:last-child{border-right:0}
      .haag-personal__fact strong{display:block;font:400 clamp(1.55rem,2.6vw,3rem)/.95 var(--display);letter-spacing:-.02em;text-transform:uppercase}
      .haag-personal__fact span{display:block;margin-top:18px;font:400 8px/1.5 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--brass)}
      .haag-personal__offer{display:grid;grid-template-columns:minmax(220px,.72fr) 1fr;gap:clamp(28px,5vw,72px);align-items:start;margin-top:clamp(50px,6vw,88px)}
      .haag-personal__offer h3{margin:0;font:300 clamp(2rem,3.7vw,4.8rem)/.98 var(--display);text-transform:uppercase;letter-spacing:-.025em}
      .haag-personal__offer div{max-width:570px}.haag-personal__offer p{margin:0;font:300 1rem/1.7 var(--sans);color:rgba(244,241,232,.7)}
      .haag-personal__offer small{display:block;margin-top:24px;font:500 8px/1.5 var(--sans);letter-spacing:.17em;text-transform:uppercase;color:var(--brass)}
      @media(max-width:900px){.haag-personal__grid{grid-template-columns:1fr}.haag-personal__portrait{min-height:auto;aspect-ratio:4/5;order:2}.haag-personal__copy{order:1}.haag-personal__facts{grid-template-columns:1fr}.haag-personal__fact{min-height:auto;padding:22px 0!important;border-right:0;border-bottom:1px solid var(--line)}.haag-personal__fact:last-child{border-bottom:0}.haag-personal__offer{grid-template-columns:1fr}.haag-personal__portrait figcaption{flex-direction:column}}
    

/* ---------- Skip-Link ---------- */
.skip-link{position:absolute;left:12px;top:-100px;z-index:2000;background:var(--paper);color:var(--ink);
  padding:12px 20px;font:500 10px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;transition:top .18s}
.skip-link:focus{top:12px}

/* ---------- Sichtbarer Tastaturfokus (fehlte komplett) ---------- */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--brass);outline-offset:3px}
.project-form input:focus-visible,.project-form select:focus-visible,.project-form textarea:focus-visible{
  outline:2px solid #2D4F3E;outline-offset:2px;border-color:#2D4F3E}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- Kontaktdaten ---------- */
.contact__meta a{border-bottom:1px solid rgba(201,199,192,1);transition:border-color .25s,color .25s}
.contact__meta a:hover{color:#2D4F3E;border-color:#2D4F3E}
.contact__meta address{font-style:normal;display:block}
.contact__meta p+p{margin-top:0}
.contact__lines{display:grid;gap:7px}

/* ---------- Formular: Einwilligung, Fehler, Zustaende ---------- */
.form-consent{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;margin-top:6px}
.form-consent input{appearance:none;-webkit-appearance:none;width:19px;height:19px;margin:2px 0 0;flex:none;
  border:1px solid rgba(110,115,112,1);background:transparent;cursor:pointer;transition:background .2s,border-color .2s}
.form-consent input:checked{background:#2B2E2B;border-color:#2B2E2B}
.form-consent input:checked::after{content:"";display:block;width:5px;height:10px;margin:2px auto 0;
  border:solid var(--paper);border-width:0 2px 2px 0;transform:rotate(45deg)}
/* Muss .project-form label>span ueberbieten - sonst erbt der Einwilligungstext
   8px Versalien mit Sperrung, und das ist fuer eine Einwilligung nach
   Art. 7 Abs. 2 DSGVO ("klare und einfache Sprache") das falsche Format. */
.project-form .form-consent>span{font-size:.82rem;line-height:1.65;letter-spacing:normal;
  text-transform:none;opacity:.78}
.form-consent a{border-bottom:1px solid rgba(110,115,112,1)}
.form-consent a:hover{color:#2D4F3E;border-color:#2D4F3E}
.form-error{grid-column:1/-1;margin:0;font-size:.74rem;line-height:1.6;color:#8f2f22;
  border-left:2px solid #8f2f22;padding-left:14px}
.project-form [aria-invalid="true"]{border-bottom-color:#8f2f22}
.form-hint{grid-column:1/-1;margin:0;font-size:.7rem;line-height:1.6;opacity:.5}
.form-submit .cta[aria-disabled="true"]{opacity:.55;pointer-events:none}
.form-success__fallback{margin-top:28px;font-size:.78rem;line-height:1.8;opacity:.8}
.form-success__fallback a{border-bottom:1px solid rgba(201,199,192,1)}
.form-success__fallback a:hover{color:#2D4F3E;border-color:#2D4F3E}
.form-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Rechtsseiten (Impressum / Datenschutz / 404) ---------- */
.legal{max-width:820px;margin:0 auto;padding:clamp(120px,15vh,190px) clamp(20px,5vw,40px) clamp(80px,10vh,140px)}
.legal__index{display:flex;justify-content:space-between;gap:20px;padding-bottom:16px;border-bottom:1px solid var(--line);
  font:400 9px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--brass)}
.legal h1{font:300 clamp(2.8rem,7vw,5.6rem)/.92 var(--display);text-transform:uppercase;letter-spacing:-.04em;margin:clamp(40px,6vw,70px) 0 0}
.legal h2{font:400 clamp(1.05rem,1.7vw,1.35rem)/1.3 var(--display);text-transform:uppercase;letter-spacing:.02em;
  color:var(--sand);margin:56px 0 16px}
.legal h3{font:500 10px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--brass);margin:32px 0 10px}
.legal p,.legal li{font:300 .95rem/1.75 var(--sans);color:rgba(244,241,232,.78);margin:0 0 14px}
.legal h1+p{margin-top:40px}
.legal ul{padding-left:20px;margin:0 0 18px}
.legal li{margin-bottom:8px}
.legal a{color:var(--sand);border-bottom:1px solid rgba(143,174,158,.45)}
.legal a:hover{color:var(--brass);border-color:var(--brass)}
.legal address{font-style:normal}
.legal__todo{display:block;border-left:2px solid var(--brass);background:rgba(143,174,158,.10);
  padding:14px 18px;margin:0 0 18px;font:400 .82rem/1.65 var(--sans);color:var(--sand)}
.legal__back{display:inline-block;margin-top:64px;padding-bottom:5px;border-bottom:1px solid var(--line);
  font:500 9px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--paper)}
.legal__back:hover{border-color:var(--brass);color:var(--brass)}
.legal__meta{margin-top:60px;padding-top:22px;border-top:1px solid var(--line);
  font:400 9px/1.8 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:rgba(244,241,232,.42)}

/* ---------- Hero: Kollision Filmanzeige / Headline ----------
   Unterhalb von 680px steht die Phasenanzeige fix bei top:105px, waehrend der
   Hero-Text am unteren Rand ausgerichtet ist. Bei breiten, niedrigen Viewports
   (Smartphone quer, ~660px) wuchs die Headline in die Anzeige hinein. */
@media(max-width:680px){
  .hero h1{font-size:min(15.2vw,4.4rem)}
  .hero__content{padding-top:190px}
}
@media(max-height:520px) and (orientation:landscape){
  .hero__film-ui{display:none}
  .hero__content{padding-top:96px;padding-bottom:48px}
}

/* ---------- Bewegungsreduktion / Datensparmodus ----------
   Bei aktivem Datensparmodus oder reduzierter Bewegung wird das Hero-Video
   gar nicht erst geladen (siehe Inline-Skript im <head>); sichtbar bleibt das
   Poster. Die Film-Bedienelemente haetten dann keine Funktion mehr. */
.hero-still .hero__film-ui,
.hero-still .hero__film-progress,
.hero-still .hero__film-control{display:none}
.hero-still .hero__film{background:#0A3D2E url(../img/hero-poster.webp) center/cover no-repeat}

/* ---------- Druck ---------- */
@media print{
  .site-header,.menu-overlay,.preloader,.hero__film,.hero__film-ui,.hero__film-control,
  .hero__meta,.footer__links,video{display:none!important}
  html,body{background:#fff!important;color:#000!important}
  .legal p,.legal li,.legal a{color:#000!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em}
}


/* ============================================================
   TIEFGRÜN. — Markenebene, Corporate Brand Guide v1.0
   ============================================================ */
:root{
  --tg-green:#0A3D2E;      --tg-cream:#F4F1E8;
  --tg-charcoal:#2A1E16; --tg-sage:#A9C7B3;
  --tg-mid:#2D4F3E;       --tg-stone:#DDE6DB;
  --tg-rule-light:rgba(94,107,99,0.45); --tg-rule-dark:#3F6B58;
  --tg-body:#2B2E2B;        --tg-muted:#5E6B63;
  --display: "Big Shoulders Display", "Arial Narrow", sans-serif,"Archivo Black",Impact,sans-serif;
  --sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif,"Figtree","Helvetica Neue",Arial,sans-serif;
}

/* --- 5.2 Typografische Skala ------------------------------------------------
   Der Bestand lief auf 164 px H1 und 6-9 px Labels. Der Guide setzt H1 auf
   76/44 px und Labels auf 12/11 px mit +12 % Laufweite. Beides wird hier
   verbindlich umgesetzt; Anton bekommt +2 % Laufweite (Guide 5.1), weil es
   schmaler laeuft als die vorgesehene Druk Text Wide. */
:root{
  --tg-h1:clamp(2.75rem,6vw,4.75rem);      /* 44 -> 76 px */
  --tg-h2:clamp(1.875rem,3.4vw,2.75rem);   /* 30 -> 44 px */
  --tg-h3:clamp(1.25rem,1.6vw,1.375rem);   /* 20 -> 22 px */
  --tg-body:clamp(1rem,1.1vw,1.0625rem);   /* 16 -> 17 px */
  --tg-label:clamp(.6875rem,.85vw,.75rem); /* 11 -> 12 px */
  --tg-numeral:clamp(2rem,2.8vw,2.5rem);   /* 32 -> 40 px */
}
h1,h2,h3,.wordmark__name{letter-spacing:.02em}
.hero h1{font-size:var(--tg-h1);line-height:.92;max-width:none}
h2{font-size:var(--tg-h2);line-height:.95}
.hero h1 em,h2 em{font-weight:inherit}

/* Karten- und Zeilenueberschriften */
.service-row h3,.project__caption h3,.process__steps h3,.craft__copy h3,
.service-feature__copy h3,.haag-personal__offer h3,.form-success h3{
  font-size:var(--tg-h3);line-height:1.35;letter-spacing:0;text-transform:none;
}

/* 5.2: Labels und Bildunterschriften — im Bestand 6-9 px, jetzt 11-12 px */
.section-index,.hero__kicker,.hero__meta,.hero__film-length,.hero__film-ui .hero__phase-no,
.project__caption span,.project__caption p,.build-story__facts span,.craft__filmstrip figcaption,
.build-story__media figcaption,.service-feature__media figcaption,.statement__image figcaption,
.haag-personal__index,.haag-personal__fact span,.haag-personal__offer small,
.haag-personal__portrait figcaption,.footer__links a,.footer__bottom,.menu-foot,
.preloader__top,.preloader__bottom,.header-location,.menu-button,.transformation__progress,
.service-row>span,.process__steps span,.contact__meta span,.project-form label>span,
.upload b,.form-success>span,.text-button,.legal__index,.legal__back,.legal__meta{
  font-size:var(--tg-label);letter-spacing:.12em;
}
/* Eyebrow-Labels: im Bestand als blosse <span> in den Textcontainern gesetzt,
   deshalb ueber den Elternselektor gefasst statt ueber eigene Klassen. */
.statement__copy>span,.build-story__copy>span,.craft__copy>span,
.service-feature__copy>span,.contact__intro>span,.transformation__eyebrow span,
.transformation__progress span,.phase-copy span,.service-row b,
.text-link,.projects__head>span,.services__head>span,.process__head>span{
  font-size:var(--tg-label);letter-spacing:.12em;
}
/* Der Button stand auf min-width:210px mit space-between. Mit 13 px Text
   reicht die Breite nicht mehr, dadurch stiessen Label und Zusatz aneinander. */
.hero__film-control,.cta{font-size:.8125rem;letter-spacing:.1em}
.cta{gap:28px;min-width:min(268px,100%);padding:16px 20px}
.cta span{font-size:var(--tg-label);letter-spacing:.12em}
/* Bildunterschriften auf dunklem Grund tragen Kalkstein (10,22:1), nicht
   Muted (3,33:1). Auf Cream bleibt der abgedunkelte Muted-Ton. */
.craft__filmstrip figcaption,.build-story__media figcaption,
.service-feature__media figcaption,.statement__image figcaption{letter-spacing:.1em;color:var(--tg-stone)}
.project__caption span,.project__caption p{letter-spacing:.1em;color:var(--tg-stone)}
.build-story__media figcaption,.service-feature__media figcaption,
.craft__filmstrip figcaption{color:#F4F1E8bb}

/* Fliesstext 17/16 px, Zeilenlaenge hoechstens 68 Zeichen (Guide 5.4) */
.hero__copy,.statement__copy p,.build-story__copy p,.craft__copy p,.phase-copy p,
.services__head p,.projects__head p,.process__head p,.contact__intro p,
.haag-personal__lead,.service-row p,.process__steps p,.service-feature__copy p,
.haag-personal__offer p,.form-success p{
  font-size:var(--tg-body);line-height:1.6;max-width:min(68ch,100%);
}
.haag-personal__lead{font-size:clamp(1.0625rem,1.4vw,1.25rem)}

/* Grosse Nummern */
.hero__film-ui strong,.haag-personal__fact strong{font-size:var(--tg-numeral);line-height:1}

/* 5.3 Zweifarbige Headline — Kernmerkmal der Marke.
   Zeile 2 traegt die Wendung, endet mit Punkt und steht auf derselben
   linken Kante. Salbei auf dunklem Grund, Mittelgruen auf Cream. */
h1 em,h2 em,h3 em{font-style:normal;font-weight:inherit;color:var(--tg-sage)}
.services h2 em,.process h2 em,.contact h2 em,
.services h3 em,.process h3 em,.contact h3 em{color:var(--tg-mid)}

/* 4.3 Regel 5: Buttons tragen keine Akzentfarbe. */
.form-submit .cta{background:var(--tg-green);color:var(--tg-cream)}
.form-submit .cta:hover{background:var(--tg-charcoal);color:var(--tg-cream)}

/* 6.5: Radius 0 ueberall ausser dem App-Signet, keine Schatten. */
.process__steps i:before{border-radius:0}

/* 5.4 / 8: keine Kursivschrift irgendwo */
em,i,cite{font-style:normal}

/* Akzente auf hellem Grund */
.project-form input:focus,.project-form select:focus,.project-form textarea:focus{border-color:var(--tg-mid)}
.project-form input:focus-visible,.project-form select:focus-visible,.project-form textarea:focus-visible{outline-color:var(--tg-mid)}
.contact__meta a:hover,.form-consent a:hover,.form-success__fallback a:hover{color:var(--tg-mid);border-color:var(--tg-mid)}
.form-success>span{color:var(--tg-mid)}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline-color:var(--tg-sage)}

/* --- Wortmarke, Guide 3.1: zweizeilig, Versalien, Zeilenabstand 0.82-0.86,
   Subline auf der Kante von "G", Groesse 17-19 % der Versalhoehe ------------ */
.wordmark{gap:0}
.wordmark__name{
  display:block;font-family:var(--display);line-height:.84;
  letter-spacing:.01em;font-weight:400;white-space:pre-line;
}
.wordmark__sub{
  margin-top:.42em;font-family:var(--sans);font-weight:500;
  letter-spacing:.06em;text-transform:none;opacity:.86;
}
/* Guide 3.4: Unterzeile erst ab 120 px Wortmarkenbreite. Bei 20 px Schriftgrad
   lag die Marke bei 122 px und die Unterzeile bei 7,5 px - grenzwertig lesbar.
   Mit 26 px traegt die Marke rund 158 px, die Unterzeile 9,5 px.
   Das liegt ueber den in 3.1 genannten 17-19 % der Versalhoehe; die Lesbarkeit
   auf dem Bildschirm hat hier Vorrang. */
.site-header .wordmark__name{font-size:26px}
.site-header .wordmark__sub{font-size:9.5px}
.footer__top .wordmark__name{font-size:clamp(3.4rem,7.4vw,8rem);letter-spacing:.005em}
.footer__top .wordmark__sub{font-size:clamp(9px,1vw,14px)}
.menu-top .wordmark__name{font-size:20px}

/* 3.4 Mindestgroessen: Subline unter 120 px Wortmarkenbreite weglassen. */
@media(max-width:420px){.site-header .wordmark__sub{display:none}}

/* ---------- Projekt-Check: dramatischer Interaktionsmoment nach Haltung ---------- */
.project-check-strip{position:relative;isolation:isolate;min-height:clamp(680px,70vw,860px);display:flex;align-items:stretch;
  color:#F4F1E8;background:#0A3D2E;overflow:hidden;
  box-shadow:inset 0 1px rgba(244,241,232,.18),inset 0 -1px rgba(244,241,232,.12)}
.project-check-strip__shade{position:absolute;z-index:-1;inset:0;background:rgba(6,23,18,.58)}
.project-check-strip__inner{position:relative;z-index:1;width:100%;min-height:100%;display:grid;align-content:space-between;gap:70px;
  padding:clamp(76px,8vw,116px) clamp(24px,6vw,96px) clamp(68px,7vw,102px)}
.project-check-strip__copy{max-width:1120px}
.project-check-strip__copy>span{display:block;margin-bottom:24px;color:#A9C7B3;font:500 .62rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase}
.project-check-strip h2{margin:0;color:#F4F1E8;font:300 clamp(4.2rem,8.1vw,9.3rem)/.84 var(--display);letter-spacing:-.045em;text-transform:uppercase}
.project-check-strip h2 em{color:#A9C7B3;font-style:normal}
.project-check-strip__copy>p{max-width:38rem;margin:32px 0 0;color:rgba(244,241,232,.82);font:300 clamp(.94rem,1.2vw,1.12rem)/1.68 var(--sans)}
.project-check-strip__pill{width:min(100%,1120px);min-height:144px;justify-self:end;display:grid;grid-template-columns:88px minmax(0,1fr) auto;align-items:center;gap:28px;
  padding:20px;border:1px solid rgba(244,241,232,.78);border-radius:999px;color:#0A3D2E;background:rgba(244,241,232,.96);
  box-shadow:0 32px 80px rgba(4,17,13,.34);transition:transform .3s ease,background .3s ease,color .3s ease,border-color .3s ease}
.project-check-strip__pill-index{width:88px;height:88px;display:grid;place-items:center;border-radius:50%;color:#F4F1E8;background:#0A3D2E;
  font:400 1.2rem/1 var(--display);letter-spacing:.08em;transition:background .3s ease,color .3s ease}
.project-check-strip__pill-copy{min-width:0;display:grid;gap:8px}
.project-check-strip__pill-copy strong{font:400 clamp(1.35rem,2.1vw,2.1rem)/1.05 var(--display);letter-spacing:.01em;text-transform:uppercase}
.project-check-strip__pill-copy small{color:#6E7370;font:500 .66rem/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase}
.project-check-strip__pill-action{height:102px;display:flex;align-items:center;padding:0 34px;border-radius:999px;color:#F4F1E8;background:#0A3D2E;
  font:500 .64rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;transition:background .3s ease,color .3s ease}
.project-check-strip__pill:hover,.project-check-strip__pill:focus-visible{transform:translateY(-6px);color:#F4F1E8;background:#0A3D2E;border-color:#A9C7B3}
.project-check-strip__pill:focus-visible{outline:3px solid #A9C7B3;outline-offset:5px}
.project-check-strip__pill:hover .project-check-strip__pill-index,.project-check-strip__pill:focus-visible .project-check-strip__pill-index{color:#0A3D2E;background:#A9C7B3}
.project-check-strip__pill:hover .project-check-strip__pill-copy small,.project-check-strip__pill:focus-visible .project-check-strip__pill-copy small{color:rgba(244,241,232,.7)}
.project-check-strip__pill:hover .project-check-strip__pill-action,.project-check-strip__pill:focus-visible .project-check-strip__pill-action{color:#0A3D2E;background:#A9C7B3}
@media(max-width:1000px){.project-check-strip{min-height:760px}.project-check-strip__pill{width:100%}}
@media(max-width:680px){.project-check-strip{min-height:760px;background-position:59% center}.project-check-strip__shade{background:rgba(6,23,18,.7)}
  .project-check-strip__inner{padding:62px 16px 42px;gap:48px}.project-check-strip__copy>span{margin-bottom:18px}
  .project-check-strip h2{font-size:clamp(3rem,14.5vw,4rem);line-height:.86}.project-check-strip__copy>p{margin-top:24px;font-size:.9rem}
  .project-check-strip__pill{min-height:0;grid-template-columns:58px minmax(0,1fr);gap:14px;padding:12px;border-radius:32px}
  .project-check-strip__pill-index{width:58px;height:58px}.project-check-strip__pill-copy{gap:5px}
  .project-check-strip__pill-copy strong{font-size:1rem}.project-check-strip__pill-copy small{font-size:.5rem;line-height:1.45}
  .project-check-strip__pill-action{height:54px;grid-column:1/-1;justify-content:center;padding:0 20px;border-radius:24px}}
@media(prefers-reduced-motion:reduce){.project-check-strip__pill,.project-check-strip__pill-index,.project-check-strip__pill-action{transition:none}}

/* ---------- Nativer Onepager-Projekt-Check vor Kontakt ---------- */
.project-check-embed{position:relative;padding:128px 6vw 112px;color:#F4F1E8;background:#0A3D2E;overflow:hidden;scroll-margin-top:0}
.project-check-embed:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.42;background:radial-gradient(circle at 84% 4%,rgba(143,174,158,.18),transparent 34%),linear-gradient(135deg,transparent 0 48%,rgba(143,174,158,.045) 48.1% 48.25%,transparent 48.35%)}
.project-check-embed>*{position:relative;z-index:1}
.project-check-embed__index{display:grid;grid-template-columns:60px 1fr;gap:28px;align-items:center;margin-bottom:82px;color:rgba(244,241,232,.55);font-size:8px;letter-spacing:.26em;text-transform:uppercase}
.project-check-embed__index:after{content:"";height:1px;background:#3F6B58}
.project-check-embed__head{display:grid;grid-template-columns:1.25fr .75fr;gap:8vw;align-items:end;margin-bottom:68px}
.project-check-embed__head>div>span{display:block;margin-bottom:24px;color:#A9C7B3;font-size:9px;letter-spacing:.24em;text-transform:uppercase}
.project-check-embed__head h2{margin:0;font:400 clamp(4rem,7.6vw,8.5rem)/.88 var(--display);letter-spacing:-.045em;text-transform:uppercase}
.project-check-embed__head h2 em{color:#A9C7B3;font-style:normal;font-weight:300}
.project-check-embed__head>p{max-width:430px;margin:0 0 10px;color:rgba(244,241,232,.72);font-size:1rem;line-height:1.72}
.project-check-embed__privacy{margin:18px 0 0;color:rgba(244,241,232,.46);font-size:12px;line-height:1.55}

.tg-check{display:grid;grid-template-columns:minmax(320px,.72fr) minmax(0,1.28fr);min-height:780px;overflow:hidden;border:1px solid rgba(143,174,158,.46);background:#F4F1E8;box-shadow:0 36px 90px rgba(0,0,0,.28)}
.tg-check button,.tg-check input{font:inherit}
.tg-check button{color:inherit}
.tg-check :where(button,input):focus-visible{outline:3px solid #2D4F3E;outline-offset:4px}
.tg-check__brand{min-width:0;display:flex;flex-direction:column;padding:42px clamp(30px,4vw,62px) 34px;color:#F4F1E8;background:#0A3D2E}
.tg-check__wordmark{display:grid;width:max-content}.tg-check__wordmark strong{font:400 28px/.88 var(--display);letter-spacing:.02em}.tg-check__wordmark span{margin-top:7px;font-size:8px;letter-spacing:.15em}
.tg-check__brand>div:nth-child(2){margin:auto 0;max-width:430px}.tg-check__brand>div:nth-child(2)>p{margin:0;font:400 clamp(4.8rem,7.6vw,8.4rem)/.84 var(--display);letter-spacing:-.02em}.tg-check__brand>div:nth-child(2)>p em{color:#A9C7B3;font-style:normal}.tg-check__brand>div:nth-child(2)>h3{margin:24px 0 0;color:#A9C7B3;font:400 clamp(1.05rem,1.6vw,1.45rem)/1.45 var(--sans);letter-spacing:.2em}.tg-check__brand>div:nth-child(2)>i{display:block;height:1px;margin:32px 0 24px;background:#3F6B58}.tg-check__brand>div:nth-child(2)>small{display:block;max-width:30ch;color:rgba(244,241,232,.78);font-size:16px;line-height:1.65}.tg-check__brand>footer{display:flex;justify-content:space-between;gap:18px;color:rgba(244,241,232,.56);font-size:9px;letter-spacing:.16em;text-transform:uppercase}
.tg-check__panel{min-width:0;display:flex;flex-direction:column;padding:54px clamp(36px,5vw,82px) 42px;color:#2B2E2B;background:#F4F1E8}
.tg-check__progress{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;color:#2A1E16;font-size:12px;font-weight:500;letter-spacing:.13em;text-transform:uppercase}.tg-check__progress>div{height:1px;background:rgba(94,107,99,0.45)}.tg-check__progress i{display:block;height:5px;transform:translateY(-2px);background:#0A3D2E;transition:width .3s ease}.tg-check__progress>span:last-child{color:#5E6B63;font-size:10px}
.tg-check__content{width:min(100%,760px);padding:70px 0 44px}.tg-check__content h3{margin:0 0 34px;color:#0A3D2E;font:400 clamp(3.7rem,5.5vw,6.2rem)/.88 var(--display);letter-spacing:-.025em;text-transform:uppercase}.tg-check__content h3:focus{outline:none}.tg-check__eyebrow{margin:0 0 15px;color:#2D4F3E;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.tg-choice-list,.tg-choice-grid{border-top:1px solid #2A1E16}.tg-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:30px}.tg-choice{width:100%;min-height:76px;display:flex;align-items:center;gap:20px;padding:13px 0;border:0;border-bottom:1px solid #2A1E16;background:transparent;text-align:left;cursor:pointer}.tg-choice__mark{flex:0 0 42px;width:42px;height:42px;display:grid;place-items:center;border:1px solid rgba(94,107,99,0.45);color:#F4F1E8;transition:background .18s ease,border-color .18s ease}.tg-choice__copy{display:grid;gap:5px}.tg-choice__copy strong{font-size:14px;font-weight:500;letter-spacing:.07em;text-transform:uppercase}.tg-choice__copy small{color:#5E6B63;font-size:13px;line-height:1.45}.tg-choice:hover .tg-choice__mark{border-color:#2D4F3E}.tg-choice.is-selected .tg-choice__mark{border-color:#0A3D2E;background:#0A3D2E}.tg-choice.is-selected .tg-choice__copy strong{color:#0A3D2E}.tg-choice-grid .tg-choice{min-height:62px;gap:13px}.tg-choice-grid .tg-choice__mark{flex-basis:34px;width:34px;height:34px}.tg-choice-grid .tg-choice__copy strong{font-size:13px;letter-spacing:.04em}.tg-choice-grid--small .tg-choice{min-height:54px}
.tg-fieldset{min-width:0;margin:0;padding:0;border:0}.tg-fieldset legend{margin-bottom:12px;color:#2D4F3E;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}.tg-fieldset--spaced{margin-top:30px}.tg-line-field{display:grid;gap:10px;margin-top:28px}.tg-line-field span{color:#2D4F3E;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}.tg-line-field input{width:100%;padding:10px 0 13px;border:0;border-bottom:1px solid #2A1E16;border-radius:0;color:#2B2E2B;background:transparent;font-size:17px}.tg-line-field input::placeholder{color:#7B7E7A}.tg-field-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}.tg-location-note{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;padding:17px 0;border-top:1px solid rgba(94,107,99,0.45);border-bottom:1px solid rgba(94,107,99,0.45)}.tg-location-note>span{color:#2D4F3E;font-size:24px}.tg-location-note p{margin:0;color:#5E6B63;font-size:14px;line-height:1.6}
.tg-photo-guide{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:22px;color:#5E6B63;font-size:10px;letter-spacing:.09em;text-transform:uppercase}.tg-photo-guide span{padding-top:9px;border-top:1px solid rgba(94,107,99,0.45)}.tg-upload-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.tg-upload-card{padding:19px;border:1px solid rgba(94,107,99,0.45)}.tg-upload-card>div{display:grid;gap:5px}.tg-upload-card strong{font-size:13px;letter-spacing:.07em;text-transform:uppercase}.tg-upload-card small{color:#5E6B63;font-size:11px;line-height:1.5}.tg-upload-card>label{min-height:78px;display:grid;place-items:center;margin-top:17px;border:1px dashed #2D4F3E;color:#2D4F3E;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}.tg-upload-card>label:hover{background:rgba(45,79,62,.06)}.tg-upload-card>label input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.tg-file-list{display:grid;gap:8px;margin:14px 0 0;padding:0;list-style:none}.tg-file-list li{display:grid;grid-template-columns:38px minmax(0,1fr) auto 28px;align-items:center;gap:9px;min-width:0;color:#5E6B63}.tg-file-list li>span{font-size:8px;letter-spacing:.08em}.tg-file-list li>strong{overflow:hidden;color:#2B2E2B;font-size:11px;font-weight:500;text-overflow:ellipsis;white-space:nowrap}.tg-file-list li>button{width:28px;height:28px;padding:0;border:0;background:transparent;font-size:20px;cursor:pointer}.tg-check__privacy{margin:16px 0 0;color:#5E6B63;font-size:11px;line-height:1.55}
.tg-check__actions{min-height:86px;display:flex;align-items:flex-end;justify-content:space-between;gap:22px;margin-top:auto;padding-top:22px;border-top:1px solid rgba(94,107,99,0.45)}.tg-check__actions>div{display:grid;justify-items:end;gap:8px;margin-left:auto}.tg-primary-action{min-width:240px;min-height:60px;display:inline-flex;align-items:center;justify-content:space-between;gap:35px;padding:15px 22px;border:1px solid #0A3D2E;color:#F4F1E8!important;background:#0A3D2E;font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;cursor:pointer;transition:background .18s ease,color .18s ease}.tg-primary-action:hover{color:#0A3D2E!important;background:transparent}.tg-back-action,.tg-text-action{display:inline-flex;align-items:center;padding:9px 0;border:0;border-bottom:1px solid transparent;background:transparent;font-size:11px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;cursor:pointer}.tg-back-action:hover,.tg-text-action:hover{border-color:currentColor}.tg-back-action.is-hidden{visibility:hidden}.tg-check__error{max-width:420px;margin:0;color:#8F2F22;font-size:12px;line-height:1.45}
.tg-generation ul{margin:50px 0 0;padding:0;border-top:1px solid rgba(94,107,99,0.45);list-style:none}.tg-generation li{min-height:64px;display:flex;align-items:center;gap:15px;border-bottom:1px solid rgba(94,107,99,0.45);color:#858985;font-size:13px;letter-spacing:.07em;text-transform:uppercase}.tg-generation li.is-active{color:#0A3D2E}.tg-generation li>span{width:24px;font-size:19px}.tg-generation>p:last-child{margin-top:20px;color:#5E6B63;font-size:11px}
.tg-result__head{display:flex;align-items:flex-start;justify-content:space-between;gap:28px}.tg-result__head>span{padding:9px 11px;border:1px solid #2D4F3E;color:#2D4F3E;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}.tg-result figure{margin:0;background:#DDE6DB}.tg-result figure img{width:100%;height:clamp(280px,35vw,440px);object-fit:cover}.tg-result figcaption{display:flex;justify-content:space-between;gap:18px;padding:13px 15px;color:#F4F1E8;background:#0A3D2E;font-size:10px;letter-spacing:.09em;text-transform:uppercase}.tg-result figcaption span{color:rgba(244,241,232,.64);text-align:right}.tg-result__notice{margin-top:15px;color:#5E6B63;font-size:12px;line-height:1.55}.tg-result__notice strong{color:#2B2E2B}.tg-result__actions{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:22px}
@media(max-width:1060px){.project-check-embed{padding:96px 5vw 90px}.project-check-embed__head{grid-template-columns:1fr;gap:28px}.project-check-embed__head>p{max-width:620px}.tg-check{grid-template-columns:minmax(280px,.58fr) minmax(0,1.42fr)}.tg-check__brand{padding-inline:30px}.tg-check__panel{padding-inline:34px}.tg-choice-grid,.tg-upload-grid{grid-template-columns:1fr}}
@media(max-width:760px){.project-check-embed{padding:72px 16px 64px}.project-check-embed__index{grid-template-columns:42px 1fr;gap:15px;margin-bottom:54px}.project-check-embed__head{margin-bottom:44px}.project-check-embed__head>div>span{margin-bottom:16px;font-size:8px}.project-check-embed__head h2{font-size:clamp(3.35rem,16vw,4.7rem)}.project-check-embed__head>p{font-size:.92rem}.tg-check{display:block;min-height:0}.tg-check__brand{padding:24px 22px 20px}.tg-check__brand>div:nth-child(2){margin:38px 0 25px}.tg-check__brand>div:nth-child(2)>p{font-size:clamp(3.8rem,18vw,5.2rem)}.tg-check__brand>div:nth-child(2)>h3{margin-top:15px;font-size:14px}.tg-check__brand>div:nth-child(2)>i,.tg-check__brand>div:nth-child(2)>small{display:none}.tg-check__brand>footer{margin-top:12px}.tg-check__panel{padding:28px 22px 30px}.tg-check__progress{grid-template-columns:auto 1fr;gap:15px}.tg-check__progress>span:last-child{display:none}.tg-check__content{padding:46px 0 34px}.tg-check__content h3{font-size:clamp(3.25rem,15vw,4.4rem)}.tg-choice-grid{grid-template-columns:1fr}.tg-field-grid{grid-template-columns:1fr;gap:0}.tg-photo-guide{grid-template-columns:1fr;gap:7px}.tg-upload-grid{grid-template-columns:1fr}.tg-check__actions{align-items:stretch;flex-direction:column-reverse}.tg-check__actions>div{width:100%}.tg-primary-action{width:100%;min-width:0}.tg-result__head{display:block}.tg-result__head>span{display:inline-block;margin-bottom:18px}.tg-result figcaption{display:grid}.tg-result figcaption span{text-align:left}.tg-result__actions{align-items:stretch;flex-direction:column-reverse}.tg-result__actions .tg-text-action{align-self:center}.project-check-embed__privacy{font-size:10px}}
@media(prefers-reduced-motion:reduce){.tg-check *{transition:none!important;animation:none!important}}

/* ============================================================
   Hero-Verfeinerung · Logo, Film-UI und kollisionsfreie Headlines
   ============================================================ */

/* Die Wortmarke bleibt im originalen zweizeiligen Lock-up und bekommt im
   Hero die im Brand Guide vorgesehene optische Praesenz. */
.site-header{min-height:124px;padding:28px clamp(24px,2.4vw,46px)}
.site-header .wordmark{min-width:190px}
.site-header .wordmark__name{font-size:36px;line-height:.84;letter-spacing:.01em}
.site-header .wordmark__sub{margin-top:.46em;font-size:10.5px;line-height:1.15;letter-spacing:.045em}

/* Hauptaussage deutlich groesser, aber mit belastbarer Zeilenhoehe. */
.hero__content{padding-right:8vw;padding-left:clamp(24px,6vw,116px)}
.hero h1{
  max-width:1450px;
  font-size:clamp(6rem,9.2vw,11rem);
  line-height:.93;
  letter-spacing:.005em;
  white-space:nowrap;
}

/* Die Phasenanzeige wird als ruhiger, praegnater Film-Marker inszeniert. */
.hero__film-ui{
  top:19vh;
  right:clamp(24px,4.6vw,88px);
  width:clamp(320px,23vw,460px);
  gap:10px;
  padding:20px 0;
  border-top:1px solid rgba(244,241,232,.42);
  border-bottom:1px solid rgba(244,241,232,.42);
}
.hero__phase-no{font-size:.75rem;line-height:1;letter-spacing:.16em}
.hero__film-ui strong{max-width:100%;font-size:clamp(3rem,4vw,4.75rem);line-height:.94;letter-spacing:.005em;text-align:right}
.hero__film-length{font-size:.72rem;line-height:1.2;letter-spacing:.14em;opacity:.78}
.hero__actions .cta{justify-content:center}
.hero__actions .cta span{display:none}

/* Einheitliche Zeilenhoehen verhindern Kollisionen in allen grossen
   zweizeiligen Headlines der Landingpage. */
.statement h2,.services h2,.projects h2,.process h2,.contact h2,
.build-story__copy h2,.craft__copy h2,.why h2,.phase-copy h3,
.project-check-strip h2,.project-check-embed__head h2,
.tg-check__brand>div:nth-child(2)>p,.tg-check__content h3{
  line-height:.96;
}

@media(max-width:900px){
  .site-header{min-height:108px;padding:22px 24px}
  .site-header .wordmark{min-width:158px}
  .site-header .wordmark__name{font-size:30px}
  .site-header .wordmark__sub{font-size:9px}
  .hero__film-ui{top:132px;right:24px;width:clamp(260px,39vw,360px);padding:14px 0}
  .hero__phase-no{font-size:.65rem}
  .hero__film-ui strong{font-size:clamp(2.45rem,6vw,3.75rem)}
  .hero__film-length{font-size:.62rem}
}

@media(max-width:680px){
  .site-header{min-height:96px;padding:18px 16px}
  .site-header .wordmark{min-width:142px}
  .site-header .wordmark__name{font-size:27px}
  .site-header .wordmark__sub{display:block;font-size:8px}
  .hero__content{padding:220px 16px 52px}
  .hero h1{max-width:100%;font-size:clamp(3.1rem,14.2vw,5.4rem);line-height:.94;white-space:nowrap}
  .hero__film-ui{top:112px;right:16px;width:clamp(200px,58vw,250px);gap:6px;padding:10px 0}
  .hero__phase-no{font-size:.58rem}
  .hero__film-ui strong{font-size:clamp(2rem,9vw,2.85rem);line-height:.96}
  .hero__film-length{font-size:.55rem}
}

@media(max-height:640px) and (orientation:landscape){
  .site-header{min-height:88px;padding-top:15px;padding-bottom:15px}
  .site-header .wordmark__name{font-size:26px}
  .site-header .wordmark__sub{font-size:8px}
  .hero h1{font-size:clamp(4.2rem,10vw,7.5rem)}
}

/* Brandbook 2026 overlay on offline-onepager draft (c1d7af3)
   Stand: identisch mit dem "v3 brand lock" aus TIEFGRUEN-Website-2026-Vorschau-Standalone-3.html (05.10.2026).
   Tokens/fonts/logo only — structure & animations stay with the draft. */

@font-face{font-family:"Big Shoulders Display";src:url('../fonts/big-shoulders-display-latin-800-normal.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url('../fonts/instrument-sans-latin-wght-normal.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
/* Instrument Sans Italic 400 – ausschliesslich fuer Subheadlines/Leads (Brandguide 1.4 Kursiv-Ausnahme, 05.10.2026) */
@font-face{font-family:"Instrument Sans";src:url('../fonts/instrument-sans-italic-latin-ext.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Sans";src:url('../fonts/instrument-sans-italic-latin.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --ink:#0A3D2E;
  --graphite:#2A1E16;
  --forest:#0A3D2E;
  --stone:#5E6B63;
  --sand:#A9C7B3;
  --brass:#A9C7B3;
  --paper:#F4F1E8;
  --line:rgba(63,107,88,1);
  --display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --sans:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --serif: "Instrument Sans", "Helvetica Neue", Arial, sans-serif; /* italic subheads only; no serif */
  --tg-green:#0A3D2E;
  --tg-fern:#2F7A55;
  --tg-sage:#A9C7B3;
  --tg-mist:#DDE6DB;
  --tg-chalk:#F4F1E8;
  --tg-earth:#2A1E16;
  --tg-stone:#5E6B63;
  --tg-rust:#8F2F22;
  --tg-overlay:rgb(10 61 46 / .62);
  --tg-rule-dark:rgb(244 241 232 / .18);
  --tg-rule-light:rgb(42 30 22 / .14);
}

html,body{background:var(--ink);color:var(--paper);font-family:var(--sans)}
::selection{background:var(--tg-sage);color:var(--tg-green)}

/* Headlines: Big Shoulders 800 */
h1,h2,.phase-copy h3,.tg-check__content h3,.wordmark__name,.footer__top .wordmark__name,
.hero__film-ui strong,.menu-nav a{
  font-family:var(--display)!important;font-weight:800!important;font-style:normal;
}
h1 em,h2 em{color:var(--tg-sage)!important;font-style:normal!important;font-family:var(--display)!important;font-weight:800!important}

/* v3 brand lock: headlines Big Shoulders 800 upright uppercase; body Instrument Sans upright; italic only for allowed subheads */
h1,h2,.wordmark__name,.hero h1,.statement h2,.build-story__copy h2,.craft__copy h2,.services h2,.projects h2,.process h2,.contact h2,.haag-personal__copy h2,.phase-copy h3,.service-feature__copy h3,.service-row h3{
  font-family:var(--display)!important;
  font-weight:800!important;
  font-style:normal!important;
  text-transform:uppercase;
}
body,p,li,label,input,textarea,button,.cta,.text-link,.text-button,.hero__copy,.hero__kicker,.section-index,.menu-nav a,.footer,.contact__meta{
  font-family:var(--sans)!important;
  font-style:normal;
}
.contact__intro>p,.haag-personal__lead,.project-check-embed__head>p,.statement__copy>p:first-child,
.tg-check__brand>div:nth-child(2)>p,.contact__lead{
  font-family:"Instrument Sans","Helvetica Neue",Arial,sans-serif!important;
  font-style:italic!important;
  font-weight:400!important;
}

/* Subheader / Leads: Instrument Sans Italic only (Brandguide Kursiv-Ausnahme); no serifs */
.contact__intro>p,.haag-personal__lead,.project-check-embed__head>p,.statement__copy>p:first-child,
.tg-check__brand>div:nth-child(2)>p,.contact__lead{
  font-family:var(--serif)!important;font-style:italic;font-weight:400!important;
}

/* Labels / eyebrows */
.hero__kicker,.section-index span,.transformation__eyebrow span,.transformation__progress span,
.phase-copy>span,.statement__copy>span,.build-story__copy>span,.craft__copy>span,
.service-feature__copy>span,.projects__head span,.process__head span,.process__steps span,
.contact__intro>span,.contact__meta span,.menu-button,.header-location,.wordmark__sub,
.project-check-strip__copy>span,.project-check-embed__index,.haag-personal__index span{
  font-family:var(--sans)!important;font-weight:600!important;
}

.preloader{background:var(--tg-green)!important}
.menu-overlay{background:var(--tg-green)!important}
.footer{background:var(--tg-green)!important}
.site-header{border-bottom-color:rgba(63,107,88,1)}

/* Hardcoded draft greens → Tiefgrün / Salbei / Kreide */
.ambient-video,.hero__film{background:#0A3D2E}
.hero__film-progress i,.cta--light:hover{background:var(--tg-sage)}
.transformation__progress i{background:var(--tg-sage)}

/* Soft surfaces */
.services,.craft,.contact,.haag-personal,.page-legal,.legal{background:var(--tg-chalk);color:var(--tg-earth)}
.statement,.build-story,.projects,.process,.project-check-embed{background:var(--tg-green);color:var(--tg-chalk)}

/* Wortmarke 2026 (injected SVG) */
.wordmark{display:inline-flex;align-items:center;gap:0;text-decoration:none}
.wordmark__logo{display:block;width:clamp(140px,18vw,220px);height:auto}
.wordmark__name,.wordmark__sub{display:none}
.footer__top .wordmark__logo{width:clamp(200px,28vw,360px)}
.menu-top .wordmark__logo{width:clamp(140px,22vw,200px)}

/* Legal pages keep Kreide paper */
body.page-legal{background:var(--tg-chalk);color:var(--tg-earth)}
.page-legal .site-header{position:relative;background:var(--tg-green);border-bottom:0;padding:24px 34px}
.legal p,.legal li,.legal address,.legal__meta{color:var(--tg-earth)} /* Draft-Text war Kreide auf Kreide (unlesbar) */
.legal a{color:var(--tg-green)}
.legal h1,.legal h2{color:var(--tg-green);font-family:var(--display)}
.legal__todo{border-left:3px solid var(--tg-fern);background:var(--tg-mist);padding:12px 16px;display:block;margin:12px 0}
.legal__back{color:var(--tg-green);border-bottom:1px solid var(--tg-green)}

/* Project-check brand accents */
.project-check-strip__pill{background:var(--tg-chalk);color:var(--tg-green)}
.project-check-strip__pill-action{background:var(--tg-green);color:var(--tg-chalk)}
.tg-primary-action{background:var(--tg-green);color:var(--tg-chalk)!important;border-color:var(--tg-green)}
.tg-check{background:var(--tg-chalk)}
.tg-check__brand{background:var(--tg-green)}

/* Focus */
:focus-visible{outline:2px solid var(--tg-fern);outline-offset:3px}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

/* Contrast fix: accents on dark = Salbei; accents on light = Farn */
.surface-dark, .statement, .build-story, .projects, .process, .project-check-embed, .footer, .hero, .transformation, .preloader, .menu-overlay {
  --brass: #A9C7B3;
  --sand: #A9C7B3;
}
.services, .craft, .contact, .haag-personal, .page-legal {
  --brass: #2F7A55;
  --sand: #2F7A55;
}
.process__steps span, .contact__intro>span, .service-row>span, .section-index--dark span { color: #2F7A55 !important; }
.statement__copy span, .build-story__copy>span, .craft__copy>span, .phase-copy>span,
.transformation__eyebrow span, .hero__kicker, .projects__head .section-index span { color: #A9C7B3 !important; }

/* Section indexes & muted labels: WCAG AA on Tiefgrün / Kreide */
.section-index{color:rgb(244 241 232 / .82)!important}
.section-index--dark{color:rgb(42 30 22 / .72)!important}
.section-index:after{background:rgb(244 241 232 / .28)!important}
.section-index--dark:after{background:rgb(42 30 22 / .2)!important}
.project-check-strip__pill-copy small{color:#5E6B63!important;opacity:1!important}
.hero__film-length,.hero__meta{color:rgb(244 241 232 / .82)!important}
.footer__links a,.footer__bottom{color:rgb(244 241 232 / .82)!important;opacity:1!important}


/* KI-Gartenvorschau (SITE.features.kiVorschau): neutrale Anfrage-Zusammenfassung statt Beispielbild. */
.tg-result--anfrage figure.tg-result__own{margin-top:18px;display:grid;gap:2px}
.tg-result--anfrage figure.tg-result__own img{height:clamp(140px,18vw,220px)}
.tg-result--anfrage figure.tg-result__own figcaption{grid-column:1/-1}
.tg-result__summary{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 24px;border-top:1px solid rgba(10,61,46,.18)}
.tg-result__summary li{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid rgba(10,61,46,.12);font-size:13px;line-height:1.4}
.tg-result__summary span{color:#5E6B63;font-size:10px;letter-spacing:.09em;text-transform:uppercase;padding-top:2px}
.tg-result__summary strong{color:#0A3D2E;font-weight:600;text-align:right}
.tg-result__notice{padding:14px 16px;border-left:3px solid #2F7A55;background:rgba(169,199,179,.22)}
#ki-vorschau .tg-check__brand>div:nth-child(2)>p{font-size:clamp(2.8rem,3.9vw,4.6rem);overflow-wrap:anywhere}

/* Kennzeichnung KI-generiertes Bild (Zwei Brüder), dezent aber lesbar. */
.haag-personal__portrait .ki-tag{position:absolute;z-index:2;top:14px;right:14px;padding:5px 8px 4px;background:rgba(10,61,46,.82);color:#F4F1E8;border:1px solid rgba(169,199,179,.45);font:500 10px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;pointer-events:none}