/* ============ Self-hosted fonts (14 Aug 2026 — replaced Google Fonts hotlink) ============ */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("assets/fonts/fraunces-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/fraunces-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("assets/fonts/inter.woff2") format("woff2");
}

/* ============ DE.INDI.GO — Design System ============ */
:root {
  --indigo-900: #141b3c;
  --indigo-800: #1b2452;
  --indigo-700: #26327a;
  --indigo-600: #33429e;
  --indigo-500: #4054c7;
  --saffron: #f2a33c;
  --saffron-deep: #e08b1a;
  --ink: #1c2333;
  --grey-600: #5a6172;
  --grey-300: #d8dce6;
  --grey-100: #f4f6fa;
  --white: #ffffff;
  --radius: 14px;
  --shadow-sm: 0 2px 8px rgba(20, 27, 60, .08);
  --shadow-lg: 0 18px 50px rgba(20, 27, 60, .18);
  --font-head: "Fraunces", Georgia, serif;
  --font-body: "Inter", -apple-system, "Segoe UI", sans-serif;
}

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .35s ease both; }
::view-transition-new(root) { animation: vt-in .5s .1s ease both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-14px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(18px); } }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--indigo-600); text-decoration: none; }

.container { width: min(1160px, 92%); margin-inline: auto; }

h1, h2, h3 { font-family: var(--font-head); font-weight: 600; line-height: 1.15; color: var(--indigo-900); }
h1 { font-size: clamp(2.3rem, 5vw, 4rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.25rem; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .8rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--saffron-deep); margin-bottom: 1rem;
}
.eyebrow::before { content: ""; width: 34px; height: 2px; background: var(--saffron); }

/* ============ Header ============ */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background .35s, box-shadow .35s, padding .35s;
  padding: 1.1rem 0;
}
.site-header.scrolled {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-sm); padding: .55rem 0;
}
.nav-wrap { display: flex; align-items: center; justify-content: space-between; }
.brand {
  display: inline-flex; align-items: center;
  background: rgba(255,255,255,.95); border-radius: 10px; padding: .4rem .85rem;
  box-shadow: 0 2px 10px rgba(20,27,60,.16);
  transition: background .35s, box-shadow .35s, opacity .35s;
}
.brand img { height: 30px; width: auto; display: block; }
.scrolled .brand { background: rgba(255,255,255,.6); box-shadow: none; }
/* Homepage-only: the header's own logo stays hidden until the visitor scrolls past the hero,
   where the large logo above the headline already carries the branding. Reuses the existing
   .scrolled toggle from main.js (scrollY > 40) rather than adding a second scroll listener. */
body.home .site-header:not(.scrolled) .brand { opacity: 0; pointer-events: none; }
.main-nav { display: flex; gap: .15rem; align-items: center; }
.main-nav a {
  position: relative; padding: .5rem .65rem; font-size: .93rem; font-weight: 600;
  color: rgba(255,255,255,.85); border-radius: 8px; transition: color .3s;
}
.scrolled .main-nav a { color: var(--grey-600); }
.main-nav a::after {
  content: ""; position: absolute; left: .65rem; right: .65rem; bottom: .2rem; height: 2px;
  background: var(--saffron); transform: scaleX(0); transform-origin: left; transition: transform .3s;
}
.main-nav a:hover::after, .main-nav a.active::after { transform: scaleX(1); }
.main-nav a:hover, .main-nav a.active { color: var(--white); }
.scrolled .main-nav a:hover, .scrolled .main-nav a.active { color: var(--indigo-800); }
.nav-cta {
  background: var(--saffron); color: var(--indigo-900) !important; border-radius: 999px !important;
  padding: .55rem 1.3rem !important; margin-left: .5rem; transition: transform .25s, box-shadow .25s;
}
.nav-cta::after { display: none; }
.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(242,163,60,.45); }
.nav-toggle { display: none; }

/* ============ Hero ============ */
.hero {
  position: relative; min-height: 92vh; display: flex; align-items: center;
  color: var(--white); overflow: hidden; isolation: isolate;
}
.hero.hero-sub { min-height: 58vh; padding: 7.5rem 0 4rem; }
.hero-sub h1 { font-size: clamp(2.1rem, 4vw, 3.2rem); max-width: 16ch; }
.hero-sub p.lede { max-width: 50ch; }
.page-intro { padding: 4.2rem 0 .5rem; }
.page-intro p { max-width: 64ch; color: var(--grey-600); font-size: 1.05rem; line-height: 1.75; }
.page-intro p.intro-statement {
  font-family: var(--font-head); font-weight: 600; font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  color: var(--indigo-900); line-height: 1.15; max-width: 30ch; margin-bottom: .7rem;
}
.page-intro p.intro-kicker {
  font-family: var(--font-head); font-style: italic; font-weight: 500;
  font-size: clamp(1.3rem, 2.2vw, 1.65rem); color: var(--indigo-700); max-width: 40ch; margin-bottom: 1.8rem;
}
.hero-bg {
  position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: center;
  animation: kenburns 22s ease-in-out infinite alternate;
}
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.12) translate(1.5%, -1%); } }

.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(115deg, rgba(20,27,60,.92) 0%, rgba(27,36,82,.78) 45%, rgba(20,27,60,.35) 100%);
}
/* Homepage-only hero overlay (lighter, reshaped for full-width nav legibility over hero-india-v2.jpg).
   Scoped to .hero-home so every other page's .hero::after above is untouched.
   Reshaped 19 Aug 2026: text block moved from left (over the monument) to centre-right (over the
   skyline/sunset), so the diagonal is mirrored — 115deg → 295deg, same stop pattern, darkest now on
   the right where the text sits, peak opacity bumped .55→.62 since that side of the photo is brighter. */
.hero.hero-home::after {
  background:
    linear-gradient(180deg, rgba(15,20,45,.55) 0%, rgba(15,20,45,0) 150px),
    linear-gradient(295deg, rgba(15,20,45,.62) 0%, rgba(20,27,60,.32) 45%, rgba(15,20,45,.05) 100%);
}
/* Sektoren hero overlay (added 7 Aug 2026 with sektoren-hero.jpg): default .hero::after diagonal
   ran too dark down the right-hand side (below the nav, right of the h1/lede). Same fix as
   .hero-home::after above — decouple the nav-legibility band (short, top-only) from the
   text-legibility diagonal, then let the diagonal fall off to near-transparent well before the
   right edge. Scoped to .hero-sektoren so every other .hero-sub page keeps the default gradient. */
.hero.hero-sektoren::after {
  background:
    linear-gradient(180deg, rgba(15,20,45,.55) 0%, rgba(15,20,45,0) 140px),
    linear-gradient(115deg, rgba(20,27,60,.82) 0%, rgba(27,36,82,.5) 40%, rgba(20,27,60,.12) 75%, rgba(20,27,60,.05) 100%);
}
.hero h1 { color: var(--white); max-width: 15ch; }
.hero .eyebrow { color: var(--saffron); }
.hero p.lede { max-width: 56ch; font-size: 1.13rem; color: rgba(255,255,255,.88); margin-top: 1.4rem; }
.hero-inner > * { opacity: 0; animation: rise .8s cubic-bezier(.2,.7,.2,1) forwards; }
.hero-inner > *:nth-child(2) { animation-delay: .15s; }
.hero-inner > *:nth-child(3) { animation-delay: .3s; }
.hero-inner > *:nth-child(4) { animation-delay: .45s; }
@keyframes rise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
.hero-cta-row { display: flex; gap: 1rem; margin-top: 2.2rem; flex-wrap: wrap; }

/* Homepage hero redesign (19 Aug 2026): logo + headline + buttons moved from left-aligned over
   the monument to a centred block toward the right of the frame, over the skyline/sunset.
   .hero-text-block is now the sole direct child of .hero-inner, so it inherits the .hero-inner > *
   rise-animation above; that's cancelled here and reapplied per-child so the logo/h1/buttons still
   stagger in individually, matching the original entrance animation instead of fading as one block. */
.hero-home .hero-inner { display: flex; justify-content: flex-end; }
.hero-text-block {
  max-width: 32rem; margin-left: auto; margin-top: -3.2rem; text-align: center;
  opacity: 1; animation: none;
}
.hero-text-block > * { opacity: 0; animation: rise .8s cubic-bezier(.2,.7,.2,1) forwards; }
.hero-text-block > *:nth-child(2) { animation-delay: .15s; }
.hero-text-block > *:nth-child(3) { animation-delay: .3s; }
.hero-text-block .hero-cta-row { justify-content: center; }
.hero-logo-wrap { position: relative; display: inline-block; margin: -0.6rem 0 3.2rem; }
.hero-logo-wrap::before {
  content: ""; position: absolute; inset: -60% -35%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.42) 0%, rgba(255,255,255,.22) 45%, rgba(255,255,255,0) 75%);
  filter: blur(9px);
}
.hero-logo-mark { height: 30px; width: auto; display: block; filter: drop-shadow(0 2px 6px rgba(15,20,45,.2)); }
@media (max-width: 760px) {
  .hero-home .hero-inner { justify-content: center; }
  .hero-text-block { margin-left: 0; max-width: 26rem; }
  .hero-text-block h1 { max-width: none; }
}
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .85rem 1.8rem; border-radius: 999px; font-weight: 700; font-size: .95rem;
  transition: transform .25s, box-shadow .25s, background .25s;
}
.btn-primary { background: var(--saffron); color: var(--indigo-900); }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(242,163,60,.4); }
.btn-ghost { border: 1.5px solid rgba(255,255,255,.55); color: var(--white); }
.btn-ghost:hover { background: rgba(255,255,255,.12); transform: translateY(-3px); }
.btn-light { background: var(--white); color: var(--indigo-900); box-shadow: 0 4px 14px rgba(15,20,45,.22); }
.btn-light:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(15,20,45,.28); }
.btn-dark { background: var(--indigo-800); color: var(--white); }
.btn-dark:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(27,36,82,.35); }
.scroll-hint {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  width: 26px; height: 44px; border: 2px solid rgba(255,255,255,.5); border-radius: 20px;
}
.scroll-hint::before {
  content: ""; position: absolute; top: 8px; left: 50%; width: 4px; height: 8px; margin-left: -2px;
  background: var(--saffron); border-radius: 4px; animation: wheel 1.8s infinite;
}
@keyframes wheel { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(16px); } }

/* ============ Sections & reveal ============ */
section.block { padding: 5.5rem 0; }
section.block.tint { background: var(--grey-100); }
section.block.dark { background: var(--indigo-900); color: rgba(255,255,255,.85); }
section.block.dark h2, section.block.dark h3 { color: var(--white); }
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .12s; }
.reveal[data-delay="2"] { transition-delay: .24s; }
.reveal[data-delay="3"] { transition-delay: .36s; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.two-col .img-card { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); }
.two-col .img-card img { transition: transform .8s ease; }
.two-col .img-card:hover img { transform: scale(1.05); }

/* "Wer wir sind" — enlarged right image, bleeds to viewport edge */
.two-col.about-wide { grid-template-columns: 5fr 7fr; gap: 3rem; }
.img-card.img-bleed {
  width: calc(100% + max((100vw - 1160px) / 2, 4vw));
  border-radius: var(--radius) 0 0 var(--radius);
}
.img-card.img-bleed { align-self: center; }
.img-card.img-bleed img { width: 100%; height: auto; }
@media (max-width: 860px) {
  .two-col.about-wide { grid-template-columns: 1fr; }
  .img-card.img-bleed { width: 100%; border-radius: var(--radius); }
}

/* stats */
.stats-band { display: grid; grid-template-columns: minmax(200px, 1fr) 2.2fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
.stats-claim {
  font-family: var(--font-head); font-weight: 500; line-height: 1.18;
  font-size: clamp(1.7rem, 2.8vw, 2.4rem); color: var(--white);
}
.stats-claim em { font-style: italic; color: var(--saffron); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.6rem, 3vw, 2.6rem); text-align: left; }
.stat { border-top: 2px solid var(--saffron); padding-top: 1.1rem; }
.stat b { display: block; font-family: var(--font-head); font-size: clamp(2rem, 3.6vw, 3rem); color: var(--saffron); line-height: 1.1; margin-bottom: .35rem; }
.stat span { font-size: .88rem; opacity: .78; line-height: 1.5; display: block; max-width: 24ch; }
.stats-proof {
  margin-top: 3.2rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.14);
  font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .6;
}

/* cards */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.6rem; margin-top: 2.5rem; }
.card {
  background: var(--white); border: 1px solid var(--grey-300); border-radius: var(--radius);
  padding: 2rem 1.8rem; position: relative; overflow: hidden;
  transition: transform .35s, box-shadow .35s, border-color .35s;
}
.card::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: linear-gradient(var(--saffron), var(--indigo-600));
  transform: scaleY(0); transform-origin: top; transition: transform .4s;
}
.card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: transparent; }
.card:hover::before { transform: scaleY(1); }
.card .icon { font-size: 2.6rem; line-height: 1.2; margin-bottom: 1.1rem; }

/* SVG flag marks (replace emoji flags — consistent across all OS) */
.flag { display: inline-block; border-radius: 2px; box-shadow: 0 0 0 1px rgba(26,26,78,.14); flex: none; }
.dir-flags { display: inline-flex; align-items: center; gap: .55rem; }
.card .icon.dir-flags { color: var(--saffron-deep); font-size: 1.6rem; min-height: 3.1rem; }
.card .icon .flag { width: 42px; height: 28px; }
.entry-dir .flag { width: 23px; height: 15.3px; }
.entry-dir.dir-flags { gap: .5rem; }
.card .icon .icon-line { width: 34px; height: 34px; color: var(--saffron-deep); }
.card h3 { margin-bottom: .6rem; }
.card p, .card li { font-size: .93rem; color: var(--grey-600); }
.card ul { padding-left: 1.1rem; margin-top: .5rem; display: grid; gap: .35rem; }

/* service accordions */
.svc { border: 1px solid var(--grey-300); border-radius: var(--radius); margin-bottom: 1rem; background: var(--white); overflow: hidden; transition: box-shadow .3s; }
.svc[open] { box-shadow: var(--shadow-lg); border-color: transparent; }
.svc summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 1rem;
  padding: 1.3rem 1.6rem; font-family: var(--font-head); font-size: 1.15rem; font-weight: 600; color: var(--indigo-900);
}
.svc summary::-webkit-details-marker { display: none; }
.svc summary .n {
  font-family: var(--font-body); font-size: .78rem; font-weight: 800; color: var(--saffron-deep);
  border: 1.5px solid var(--saffron); border-radius: 999px; width: 2rem; height: 2rem;
  display: grid; place-items: center; flex-shrink: 0;
}
.svc summary::after { content: "+"; margin-left: auto; font-size: 1.5rem; color: var(--indigo-500); transition: transform .3s; }
.svc[open] summary::after { transform: rotate(45deg); }
.svc .svc-body { padding: 0 1.6rem 1.5rem 4.6rem; }
.svc li { font-size: .94rem; color: var(--grey-600); margin-bottom: .35rem; }
.svc ul { padding-left: 1.1rem; }

/* team */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 1.8rem; margin-top: 2.5rem; }
.member { background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .35s, box-shadow .35s; }
.member:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.member .ph { aspect-ratio: 4/4.4; overflow: hidden; }
.member .ph img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(18%); transition: transform .7s, filter .5s; }
.member:hover .ph img { transform: scale(1.06); filter: grayscale(0); }
.member .info { padding: 1.3rem 1.4rem 1.6rem; }
.member .role { font-size: .85rem; color: var(--saffron-deep); font-weight: 600; margin-top: .2rem; white-space: pre-line; }
.member p.bio { font-size: .9rem; color: var(--grey-600); margin-top: .7rem; }

/* ============ Team — editorial duotone ============ */
/* Team hero overlay (added 8 Aug 2026 with team-hero.jpg): same recipe as .hero-sektoren::after —
   decoupled nav-legibility band (short, top-only) from the text-legibility diagonal, fading out
   before the right edge. Min-height now follows the default .hero-sub (58vh) like the other
   photo heroes; the old 46vh was tuned for the flat gradient placeholder. */
.hero.hero-team::after {
  background:
    linear-gradient(180deg, rgba(15,20,45,.55) 0%, rgba(15,20,45,0) 140px),
    linear-gradient(115deg, rgba(20,27,60,.82) 0%, rgba(27,36,82,.5) 40%, rgba(20,27,60,.12) 75%, rgba(20,27,60,.05) 100%);
}

/* Downloads hero overlay (added 7 Aug 2026 with downloads-hero.jpg): same recipe as
   .hero-sektoren::after / .hero-team::after — decoupled nav-legibility band from the
   text-legibility diagonal. This image is brightest exactly where the diagonal is darkest
   (sunlit windows + foreground reader, left side), so the standard recipe carries over
   directly; revisit strength if the h1/lede still fight the window glare on review. */
.hero.hero-downloads::after {
  background:
    linear-gradient(180deg, rgba(15,20,45,.55) 0%, rgba(15,20,45,0) 140px),
    linear-gradient(115deg, rgba(20,27,60,.82) 0%, rgba(27,36,82,.5) 40%, rgba(20,27,60,.12) 75%, rgba(20,27,60,.05) 100%);
}

/* Service hero overlay (added 7 Aug 2026 with service-hero.jpg): same recipe as
   .hero-sektoren::after / .hero-team::after / .hero-downloads::after — decoupled nav-legibility
   band from the text-legibility diagonal. Marine Drive sunset shot is brightest top-right (sky),
   exactly where the nav sits, so the standalone top band matters here too. Shared by service.html
   and service-dach.html, which use the same image. */
.hero.hero-service::after {
  background:
    linear-gradient(180deg, rgba(15,20,45,.55) 0%, rgba(15,20,45,0) 140px),
    linear-gradient(115deg, rgba(20,27,60,.82) 0%, rgba(27,36,82,.5) 40%, rgba(20,27,60,.12) 75%, rgba(20,27,60,.05) 100%);
}

/* Blog hero overlay (added 7 Aug 2026 with hero blog page.jpg): same recipe as
   .hero-sektoren::after / .hero-team::after / .hero-downloads::after / .hero-service::after —
   decoupled nav-legibility band from the text-legibility diagonal. Image is dark on the left
   (where the h1/lede sit) already, but bright newsprint sits top-right, right under the nav,
   so the standalone top band still matters; the diagonal carries over directly, same as
   downloads.html. */
.hero.hero-blog::after {
  background:
    linear-gradient(180deg, rgba(15,20,45,.55) 0%, rgba(15,20,45,0) 140px),
    linear-gradient(115deg, rgba(20,27,60,.82) 0%, rgba(27,36,82,.5) 40%, rgba(20,27,60,.12) 75%, rgba(20,27,60,.05) 100%);
}

/* Wasserstoff sector hero overlay (added 7 Aug 2026 with hero-wasserstoff.jpg): decoupled
   nav-legibility band from the text-legibility diagonal, same structure as .hero-sektoren::after /
   .hero-team::after / .hero-downloads::after / .hero-service::after / .hero-blog::after. Image's
   left side is a bright sunset sky, so the shared recipe's .82 left-edge opacity left the h1/lede
   with too little contrast (flagged on review 7 Aug 2026) — bumped to .94 here only, this page's
   diagonal stops diverge from the shared recipe for that reason. Still fades to near-transparent
   by 100% so the white/green "H2 GREEN HYDROGEN" tanks on the right stay untouched. */
.hero.hero-wasserstoff::after {
  background:
    linear-gradient(180deg, rgba(15,20,45,.62) 0%, rgba(15,20,45,0) 150px),
    linear-gradient(115deg, rgba(12,17,42,.94) 0%, rgba(20,27,60,.74) 35%, rgba(20,27,60,.18) 68%, rgba(20,27,60,.05) 100%);
}

/* Kontakt hero overlay (added 21 Aug 2026 with kontakt-hero.jpg, replacing hero-girt.jpg): same
   recipe as .hero-sektoren::after / .hero-team::after / .hero-downloads::after / .hero-service::after
   / .hero-blog::after — decoupled nav-legibility band from the text-legibility diagonal. Image's
   left third (empty Berlin plaza/sky, sampled ~80-95 luminance) is in the same range as the other
   standard-recipe photos, not the bright-sky case .hero-wasserstoff::after had to bump up for, so
   the shared .82 opacity stops carry over directly. */
.hero.hero-kontakt::after {
  background:
    linear-gradient(180deg, rgba(15,20,45,.55) 0%, rgba(15,20,45,0) 140px),
    linear-gradient(115deg, rgba(20,27,60,.82) 0%, rgba(27,36,82,.5) 40%, rgba(20,27,60,.12) 75%, rgba(20,27,60,.05) 100%);
}
/* The Brandenburg Gate in this photo sits at roughly 38-53% of the image width, with the German
   figure just right of it — the default 56ch lede (see ".hero p.lede") can wrap wide enough on
   common desktop widths to visually run into the Gate's columns. Capped narrower here only, so
   the text block stays anchored at its existing left position but wraps sooner. */
.hero-kontakt p.lede { max-width: 34ch; }
/* Below ~760px the section's aspect ratio flips (taller relative to width than the photo itself),
   so `cover` starts cropping the image's LEFT and RIGHT edges symmetrically instead of just
   top/bottom — that drags the Gate significantly further left into frame, right under the text.
   Shifting the crop anchor left-of-centre keeps more of the open plaza (and less of the right-hand
   India Gate/figure) in view instead, so the Gate stays clear of the eyebrow/h1/lede column. */
@media (max-width: 760px) {
  .hero-kontakt .hero-bg { background-position: 25% center; }
}
/* This image's India Gate sits close to the frame's right edge (~85-97% of the image width, only
   ~3% clear margin) — the shared `kenburns` animation (scale to 112%, pan right+up) crops straight
   into it for most of the 22s loop (confirmed 21 Aug 2026 by screenshotting mid-animation). Thomas
   wanted to keep the zoom/pan effect rather than disable it here, so this gives the page its own
   keyframes instead: a slightly smaller zoom (108%) panning LEFT+up (into the open plaza) rather
   than right — same duration/easing/loop as every other page, only the animation-name differs.
   Verified the Gate stays fully in frame at the animation's peak zoom across 1100-1920px wide. */
@keyframes kenburns-kontakt { from { transform: scale(1); } to { transform: scale(1.08) translate(-1%, -1%); } }
.hero-kontakt .hero-bg { animation-name: kenburns-kontakt; }

/* Service-Indien hero overlay (added 21 Aug 2026 with service-Indien-deutschland-hero.jpg,
   replacing the old flat compass/map graphic): same recipe as .hero-sektoren::after /
   .hero-team::after / .hero-downloads::after / .hero-service::after / .hero-blog::after /
   .hero-kontakt::after — decoupled nav-legibility band from the text-legibility diagonal. This
   Unter den Linden/Brandenburger Tor photo is already darkest on the left (shadowed trees, where
   the eyebrow/h1/lede sit) and brightest on the right (the lit-up gate), so the standard .82
   left-edge strength carries over directly and the diagonal fades out well before it reaches the
   gate. */
.hero.hero-service-indien::after {
  background:
    linear-gradient(180deg, rgba(15,20,45,.55) 0%, rgba(15,20,45,0) 140px),
    linear-gradient(115deg, rgba(20,27,60,.82) 0%, rgba(27,36,82,.5) 40%, rgba(20,27,60,.12) 75%, rgba(20,27,60,.05) 100%);
}

/* Founder spotlight */
.spotlight {
  display: grid; grid-template-columns: minmax(260px, 4fr) 8fr;
  gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center;
  padding: 5.5rem 0 4.5rem; border-bottom: 1px solid var(--grey-300);
}
.spotlight .ph { position: relative; overflow: hidden; }
.spotlight blockquote {
  font-family: var(--font-head); font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 500; font-style: italic; color: var(--indigo-800);
  line-height: 1.35; margin: 0 0 1.6rem; max-width: 30ch;
}
.spotlight blockquote::before { content: "\201E"; color: var(--saffron); }
.spotlight blockquote::after  { content: "\201C"; color: var(--saffron); }

/* Duotone portrait treatment (shared) */
.duo { position: relative; overflow: hidden; }
.duo img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover;
  filter: grayscale(100%) contrast(1.05);
  transition: filter .6s ease, transform .8s cubic-bezier(.2,.7,.2,1);
}
.duo::after {
  content: ""; position: absolute; inset: 0;
  background: var(--indigo-700); mix-blend-mode: soft-light; opacity: .55;
  transition: opacity .6s ease; pointer-events: none;
}
.duo:hover img, .people-item:hover .duo img { filter: none; transform: scale(1.04); }
.duo:hover::after, .people-item:hover .duo::after { opacity: 0; }

/* People grid — boxless */
.people {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem) clamp(1.6rem, 3vw, 2.8rem);
  padding: 4.5rem 0 5.5rem;
}
.people-item {
  position: relative;
  display: grid;
  grid-row: span 7;          /* duo, h3, title, role, divider, bio, profile-more — one track each */
  grid-template-rows: subgrid;
  row-gap: 0;                 /* spacing between rows comes from each element's own margin below */
}
.people-item .duo { margin-bottom: 1.1rem; }
.people-item h3, .spotlight h3 {
  font-family: var(--font-head); font-weight: 600;
  font-size: 1.3rem; color: var(--indigo-900); margin: 0 0 .3rem;
}
/* Job-title line (added 21 Aug 2026): sits between the name and the .role qualifications
   tag. Deliberately normal-case and un-spaced so it reads as a title rather than the
   uppercase/letter-spaced credential style below — same family as h3, not .role. */
.people-item .title, .spotlight .title {
  font-family: var(--font-body); font-size: .95rem; font-weight: 600;
  color: var(--indigo-700); margin: 0 0 .35rem; white-space: normal;
}
.people-item .role, .spotlight .role {
  font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--saffron-deep); margin-bottom: .7rem; white-space: normal;
}
.people-item .divider, .spotlight .divider {
  width: 34px; height: 2px; background: var(--saffron); border: 0; margin: 0 0 .9rem;
}
.people-item .divider { margin-bottom: .5rem; }
.people-item p.bio, .spotlight p.bio { font-size: .92rem; color: var(--grey-600); line-height: 1.65; }

@media (max-width: 980px) { .people { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) { .spotlight { grid-template-columns: 1fr; gap: 2rem; } }
@media (max-width: 620px) { .people { grid-template-columns: 1fr; } }

/* ============ Problem-led quote band (homepage) ============ */
.probe-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto auto;
  column-gap: clamp(1.6rem, 3vw, 2.4rem); row-gap: 0; margin-top: 2.5rem;
}
.probe {
  display: grid; grid-row: span 3; grid-template-rows: subgrid;
  border-top: 2px solid var(--saffron);
  padding-top: 1.4rem;
}
.probe blockquote {
  margin: 0 0 .5rem;
  font-family: var(--font-head); font-style: italic; font-weight: 500;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.35; color: var(--indigo-800);
}
.probe blockquote::before { content: "\201E"; color: var(--saffron); }
.probe blockquote::after  { content: "\201C"; color: var(--saffron); }
.probe p { font-size: .93rem; color: var(--grey-600); margin-bottom: .6rem; }
.probe .cta-link { align-self: start; font-size: .9rem; }
@media (max-width: 860px) { .probe-grid { grid-template-columns: 1fr; } }

/* ============ Downloads / E-Books ============ */
.dl-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.6rem, 3vw, 2.4rem); margin-top: 2.5rem;
}
.dl-card {
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--grey-300); border-radius: var(--radius);
  overflow: hidden; transition: transform .35s, box-shadow .35s, border-color .35s;
}
.dl-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: transparent; }

/* Stylised cover — indigo ground, Fraunces title, saffron rule */
.dl-cover {
  aspect-ratio: 16/10; padding: 1.6rem 1.6rem 1.4rem;
  background: linear-gradient(135deg, var(--indigo-900), var(--indigo-700));
  display: flex; flex-direction: column; justify-content: flex-end;
  position: relative; overflow: hidden;
}
.dl-cover::before {
  content: ""; position: absolute; top: -60px; right: -60px; width: 200px; height: 200px;
  border-radius: 50%; background: radial-gradient(circle, rgba(242,163,60,.28), transparent 70%);
  transition: transform .6s ease;
}
.dl-card:hover .dl-cover::before { transform: scale(1.35); }
.dl-cover .dl-kicker {
  font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--saffron); margin-bottom: .6rem;
}
.dl-cover .dl-title {
  font-family: var(--font-head); font-weight: 600; font-size: 1.35rem;
  color: var(--white); line-height: 1.2; max-width: 18ch;
}
.dl-cover .dl-rule { width: 34px; height: 2px; background: var(--saffron); border: 0; margin: .9rem 0 0; }

.dl-info { padding: 1.4rem 1.6rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.dl-info p { font-size: .92rem; color: var(--grey-600); margin-bottom: 1.2rem; }
.dl-meta { font-size: .78rem; color: var(--grey-600); letter-spacing: .04em; margin-bottom: .9rem; }
.dl-info .cta-link { margin-top: auto; align-self: flex-start; font-size: .9rem; }

@media (max-width: 980px) { .dl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .dl-grid { grid-template-columns: 1fr; } }

/* Downloads — market filter toggle */
.dl-filter {
  display: flex; justify-content: center; align-items: center;
  gap: .3rem; margin: 0 auto 2.8rem; padding: .3rem;
  width: max-content; max-width: 100%;
  background: var(--grey-100); border: 1px solid var(--grey-300); border-radius: 999px;
}
.dl-filter button {
  font-family: var(--font-body); font-weight: 700; font-size: .88rem;
  padding: .75rem 1.7rem; border-radius: 999px; color: var(--grey-600);
  background: transparent; border: 0; cursor: pointer; white-space: nowrap;
  transition: background .3s, color .3s, box-shadow .3s;
}
.dl-filter button:hover { color: var(--indigo-900); }
.dl-filter button.is-active { background: var(--saffron); color: var(--indigo-900); box-shadow: var(--shadow-sm); }
.dl-card[hidden] { display: none; }
@media (max-width: 480px) {
  .dl-filter { flex-direction: column; width: 100%; border-radius: var(--radius); }
  .dl-filter button { width: 100%; }
}

/* ============ Blog ============ */
.post-meta { font-size: .82rem; color: var(--grey-600); display: flex; align-items: center; gap: .6rem; }
.post-meta img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }

/* Featured post */
.blog-featured {
  display: grid; grid-template-columns: 7fr 5fr; gap: clamp(2rem, 5vw, 4rem);
  align-items: center; margin-bottom: clamp(3rem, 6vw, 4.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid var(--grey-300);
}
.blog-featured .duo img { aspect-ratio: 16/10; }
.blog-featured h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); margin: 0 0 1rem; }
.blog-featured h2 a { color: var(--indigo-900); }
.blog-featured h2 a:hover { color: var(--indigo-600); }
.blog-featured p.excerpt { color: var(--grey-600); margin-bottom: 1.4rem; }
@media (max-width: 860px) { .blog-featured { grid-template-columns: 1fr; } }

/* Post grid */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 3rem) clamp(1.6rem, 3vw, 2.4rem); }
.post-card { display: flex; flex-direction: column; }
.post-card .duo { margin-bottom: 1rem; }
.post-card .duo img { aspect-ratio: 16/10; }
.post-card h3 { font-size: 1.2rem; line-height: 1.3; margin: 0 0 .7rem; }
.post-card h3 a { color: var(--indigo-900); }
.post-card h3 a:hover { color: var(--indigo-600); }
.post-card p.excerpt { font-size: .92rem; color: var(--grey-600); margin: .7rem 0 0; }
@media (max-width: 980px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .post-grid { grid-template-columns: 1fr; } }

/* Article page */
.article-hero { margin-top: 72px; }
.article-hero img { width: 100%; max-height: 480px; object-fit: cover; }
.article-head { max-width: 760px; margin: clamp(2.5rem, 5vw, 4rem) auto 0; padding-inline: clamp(20px, 4vw, 48px); }
.article-head h1 { font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.12; margin: .4rem 0 1.4rem; }
.article-byline { display: flex; align-items: center; gap: .9rem; padding-bottom: 1.6rem; border-bottom: 1px solid var(--grey-300); }
.article-byline img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.article-byline .who b { display: block; font-size: .95rem; color: var(--indigo-900); }
.article-byline .who span { font-size: .82rem; color: var(--grey-600); }
.article-body { max-width: 760px; margin: 2.2rem auto 0; padding-inline: clamp(20px, 4vw, 48px); }
.article-body p { margin-bottom: 1.3rem; font-size: 1.02rem; line-height: 1.75; color: var(--ink); }
.article-body a { border-bottom: 1px solid var(--saffron); }
.article-body a:hover { color: var(--indigo-900); }
.article-body blockquote {
  margin: 2rem 0; padding-left: 1.4rem; border-left: 3px solid var(--saffron);
  font-family: var(--font-head); font-style: italic; font-size: 1.25rem; color: var(--indigo-800);
}
.article-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 2rem 0; }
.article-gallery img { border-radius: var(--radius); width: 100%; aspect-ratio: 4/3; object-fit: cover; }
@media (max-width: 620px) { .article-gallery { grid-template-columns: 1fr; } }
.article-foot { max-width: 760px; margin: 3rem auto 4.5rem; padding-inline: clamp(20px, 4vw, 48px); }
.article-foot .backlink { font-weight: 700; color: var(--indigo-700); }
.article-foot .backlink:hover { color: var(--indigo-900); }

/* CTA band */
.cta-band {
  background: linear-gradient(115deg, var(--indigo-900), var(--indigo-700));
  color: var(--white); text-align: center; padding: 5rem 0;
  position: relative; overflow: hidden;
}
.cta-band::before, .cta-band::after {
  content: ""; position: absolute; border-radius: 50%;
  background: radial-gradient(circle, rgba(242,163,60,.25), transparent 70%);
}
.cta-band::before { width: 480px; height: 480px; top: -240px; left: -140px; }
.cta-band::after { width: 380px; height: 380px; bottom: -190px; right: -100px; }
.cta-band h2 { color: var(--white); margin-bottom: 1rem; }
.cta-band p { max-width: 54ch; margin: 0 auto 2rem; opacity: .85; }

/* footer */
footer { background: var(--indigo-900); color: rgba(255,255,255,.6); padding: 3.5rem 0 2rem; font-size: .88rem; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 3rem; margin-bottom: 2.5rem; }
footer h4 { color: var(--white); font-size: .95rem; margin-bottom: 1rem; }
.footer-logo {
  height: 38px; width: auto; display: block;
  padding: .28rem .5rem; margin-bottom: 1rem;
  background: rgba(255,255,255,.95); border-radius: 7px;
  box-shadow: 0 2px 10px rgba(20,27,60,.16);
}
footer a { color: rgba(255,255,255,.6); display: block; padding: .2rem 0; transition: color .25s; }
footer a:hover { color: var(--saffron); }
.foot-bottom { border-top: 1px solid rgba(255,255,255,.12); padding-top: 1.5rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }

/* contact */
.contact-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3.5rem; }
.field { margin-bottom: 1.2rem; }
.field label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .4rem; }
.field input, .field select, .field textarea {
  width: 100%; padding: .8rem 1rem; border: 1.5px solid var(--grey-600); border-radius: 10px;
  background: var(--grey-100); font: inherit; transition: border-color .25s, box-shadow .25s, background .25s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--indigo-500); box-shadow: 0 0 0 4px rgba(64,84,199,.12); background: var(--white);
}
.info-tile { background: var(--grey-100); border-radius: var(--radius); padding: 1.6rem; margin-bottom: 1.2rem; }
.info-tile b { color: var(--indigo-900); }

/* Standorte-Karten (kontakt-new.html, 07 Aug 2026) — Leipzig + Indien-Büros neben dem Kontaktformular */
.office-lead {
  font-family: var(--font-head); font-weight: 600; color: var(--indigo-900);
  font-size: clamp(1.3rem, 2.5vw, 1.9rem); line-height: 1.2; margin-bottom: 1rem;
}
.office-card {
  background: var(--grey-100); border: 1px solid var(--grey-300); border-radius: var(--radius);
  padding: 1.1rem 1.3rem; margin-bottom: .9rem;
}
/* Hauptsitz (Leipzig) — etwas dunkler als das Grey-100 der Formularfelder/anderen Büros, zur Differenzierung */
.office-card.hq { background: #e7eaf4; }
.office-card .oc-head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; margin-bottom: .5rem; flex-wrap: wrap; }
.office-card .oc-city { font-family: var(--font-head); font-weight: 600; color: var(--indigo-900); font-size: 1.22rem; }
.office-card .oc-tag { font-size: .71rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--saffron-deep); }
.office-card .oc-row { font-size: 1.04rem; color: var(--grey-600); line-height: 1.65; margin-bottom: .15rem; }
.office-card .oc-row b { color: var(--indigo-800); font-weight: 600; }

/* ============ Services — phase system ============ */

/* Bridge band — introduces the phase structure */
.bridge {
  background: var(--grey-100);
  border-top: 1px solid var(--grey-300); border-bottom: 1px solid var(--grey-300);
  padding: 2.6rem 0;
}
.bridge-row { display: grid; grid-template-columns: auto 1fr; gap: 2.5rem; align-items: center; }
.bridge-label {
  font-size: .78rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--saffron-deep); white-space: nowrap;
}
.bridge-statement {
  font-family: var(--font-head); font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  font-weight: 500; color: var(--indigo-900); line-height: 1.35;
}
.bridge-statement em { font-style: italic; color: var(--indigo-600); }

/* Sector band (index) — static row of sector chips */
.marquee-band { padding: 3.4rem 0 4rem; border-top: 1px solid var(--grey-300); border-bottom: 1px solid var(--grey-300); }
.marquee-head { text-align: center; margin-bottom: 2.6rem; }
.marquee-head .eyebrow { display: inline-block; margin-bottom: .6rem; }
.marquee-head h2 em { font-style: italic; color: var(--indigo-600); }
.marquee-head p { color: var(--grey-600); font-size: 1rem; max-width: 52ch; margin: .8rem auto 0; }
.marquee-track {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(1.2rem, 2.5vw, 2rem); padding: 0 6vw;
}
.sector-chip {
  flex: none; width: clamp(140px, 14vw, 170px); height: clamp(140px, 14vw, 170px); border-radius: 50%;
  background: var(--white); border: 1px solid var(--grey-300);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
  color: var(--indigo-700); text-decoration: none; text-align: center;
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.sector-chip:hover { border-color: var(--saffron); transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.sector-chip svg { width: clamp(44px, 4.5vw, 54px); height: clamp(44px, 4.5vw, 54px); fill: none; stroke: var(--saffron-deep); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sector-chip span { font-size: .82rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--indigo-800); max-width: 120px; line-height: 1.3; }

/* Expandable team profiles */
.profile-more { margin-top: 1.1rem; border-top: 1px solid var(--grey-300); }
.profile-more summary {
  list-style: none; cursor: pointer; display: flex; align-items: center;
  padding: .85rem 0; font-weight: 700; font-size: .8rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--indigo-600);
}
.profile-more summary::-webkit-details-marker { display: none; }
.profile-more summary::after { content: "+"; font-size: 1.15rem; margin-left: auto; color: var(--saffron-deep); transition: transform .3s; line-height: 1; }
.profile-more[open] summary::after { transform: rotate(45deg); }
.profile-more summary:hover { color: var(--indigo-900); }
.profile-more h4 { font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--saffron-deep); margin: 1.4rem 0 .6rem; }
.profile-more p, .profile-more li { font-size: 1rem; color: var(--grey-600); line-height: 1.7; }
.profile-more ul { padding-left: 1.1rem; display: grid; gap: .45rem; margin: 0; }
.profile-more > div { padding-bottom: 1.2rem; }

/* Team teaser (index) */
.team-teaser-lede { color: var(--grey-600); max-width: 58ch; margin-top: 1rem; }
.team-faces { display: flex; flex-wrap: wrap; gap: 1rem; margin: 2.2rem 0 2.4rem; }
.team-faces img {
  width: clamp(84px, 9.5vw, 140px); height: clamp(84px, 9.5vw, 140px);
  border-radius: 50%; object-fit: cover; border: 3px solid var(--white);
  filter: grayscale(1); transition: filter .4s, transform .35s;
}
.team-faces img:hover { filter: none; transform: translateY(-4px); }

/* Downloads band (index) */
.dl-band { padding: 4.2rem 0; }
.dl-band-row { display: grid; grid-template-columns: 1fr auto; gap: 2.5rem; align-items: center; }
.dl-band p { color: var(--grey-600); max-width: 56ch; margin-top: .9rem; }
@media (max-width: 780px) { .dl-band-row { grid-template-columns: 1fr; gap: 1.6rem; justify-items: start; } }

/* Scroll progress bar (injected by main.js) */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: var(--saffron); z-index: 120; pointer-events: none;
}

/* Word-by-word scroll reveal (probe quotes + bridge statements) */
.wr-active .wr { color: var(--grey-300); transition: color .35s ease; }
.probe blockquote.wr-active .wr.on { color: var(--indigo-800); }
.bridge-statement.wr-active .wr.on { color: var(--indigo-900); }
.wr-active .wr-em { font-style: italic; }
.bridge-statement.wr-active .wr-em.on { color: var(--indigo-600); }
.probe blockquote.wr-active .wr-em.on { color: var(--indigo-600); }
@media (max-width: 780px) { .bridge-row { grid-template-columns: 1fr; gap: .8rem; } }

/* Phase list wrapper with progress rail */
.phases { position: relative; padding: 5.5rem 0 4rem; }
.phases .rail {
  position: absolute; top: 0; bottom: 0; left: max(calc((100% - 1160px)/2 - 2.2rem), 1%);
  width: 2px; background: var(--grey-300); border-radius: 2px;
}
.phases .rail::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%;
  height: calc(var(--rail-progress, 0) * 100%);
  background: linear-gradient(var(--saffron), var(--indigo-600));
  border-radius: 2px; transition: height .15s linear;
}
@media (max-width: 1320px) { .phases .rail { display: none; } }

/* One phase = sticky numeral column + body */
.phase {
  display: grid; grid-template-columns: minmax(210px, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 6vw, 5.5rem);
  padding: 4.5rem 0; border-top: 1px solid var(--grey-300);
}
.phase:first-of-type { border-top: 0; padding-top: 0; }
.phase-mark { align-self: start; position: sticky; top: 108px; }
.phase-num {
  display: block; font-family: var(--font-head); font-weight: 500;
  font-size: clamp(4rem, 7.5vw, 6.5rem); line-height: .9; letter-spacing: -.03em;
  color: transparent; -webkit-text-stroke: 1.5px var(--saffron);
  transition: color .9s cubic-bezier(.2,.7,.2,1);
}
.phase.in-view .phase-num { color: var(--saffron); -webkit-text-stroke: 1.5px transparent; }
.phase-mark h2 { margin-top: 1.2rem; max-width: 13ch; font-size: clamp(1.5rem, 2.8vw, 2.2rem); }
.phase-tagline {
  font-family: var(--font-head); font-style: italic; font-weight: 500;
  font-size: clamp(1.15rem, 1.9vw, 1.4rem); color: var(--indigo-700);
  max-width: 34ch; margin-bottom: 2.2rem; line-height: 1.4;
}

/* Capability list — hairline items, staggered reveal */
.cap-list { list-style: none; padding: 0; margin: 0; }
.cap-list > li {
  border-top: 1px solid var(--grey-300); padding: 1.15rem 0;
  font-size: .96rem; color: var(--grey-600); line-height: 1.6;
  opacity: 0; transform: translateY(16px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.cap-list > li:last-child { border-bottom: 1px solid var(--grey-300); }
.phase.in-view .cap-list > li, .in .cap-list > li, .cap-list.in > li { opacity: 1; transform: none; }
.cap-list .term { color: var(--indigo-900); font-weight: 600; }
.cap-list .em-dash { color: var(--saffron-deep); padding: 0 .35em; }

/* Legal attribution note under a phase's capability list */
.legal-attribution { margin-top: 1.2rem; font-size: .96rem; color: var(--grey-600); line-height: 1.6; }
.legal-attribution a { color: var(--indigo-600); text-decoration: underline; text-underline-offset: 2px; }
.legal-attribution a:hover { color: var(--indigo-800); }
.legal-attribution a.firm-name { color: var(--indigo-900); font-weight: 600; }
.legal-attribution a.firm-name:hover { color: var(--indigo-800); }

/* Phase sub-groupings */
.phase-subs { display: grid; gap: 2.8rem; }
.phase-sub-eyebrow {
  display: block; font-size: .74rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--saffron-deep); margin-bottom: .4rem;
}
.phase-sub h3 { font-size: 1.25rem; margin-bottom: .9rem; }

/* section-alt band — ivory contrast section, shared by service pages + sektoren.html */
.section-alt { background: var(--grey-100); border-top: 1px solid var(--grey-300); border-bottom: 1px solid var(--grey-300); padding: 5rem 0; }
.alt-grid { display: grid; grid-template-columns: minmax(210px, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 5.5rem); align-items: start; }
.alt-eyebrow {
  display: block; font-size: .78rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--saffron-deep); margin-bottom: .8rem;
}
.alt-grid h2 { max-width: 22ch; }
.alt-lede { color: var(--grey-600); max-width: 60ch; margin-bottom: 2rem; }

/* Services index — entry blocks */
.entry {
  display: grid; grid-template-columns: minmax(210px, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 6vw, 5.5rem); padding: 4.5rem 0; border-top: 1px solid var(--grey-300);
}
.entry:first-of-type { border-top: 0; padding-top: 0; }
.entry h2 { max-width: 24ch; font-size: clamp(1.3rem, 2.2vw, 2rem); }
.entry-dir {
  display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--saffron-deep); margin-bottom: .8rem;
}
.entry-tagline {
  font-family: var(--font-head); font-style: italic; font-weight: 500;
  font-size: clamp(1.15rem, 1.9vw, 1.4rem); color: var(--indigo-700);
  max-width: 34ch; margin-bottom: 1.4rem; line-height: 1.4;
}
.entry-body p { color: var(--grey-600); max-width: 56ch; margin-bottom: 1.8rem; }
.cta-link {
  display: inline-flex; align-items: center; gap: .6rem;
  font-weight: 700; font-size: .95rem; color: var(--indigo-700);
  border-bottom: 2px solid var(--saffron); padding-bottom: .3rem;
  transition: gap .25s, color .25s;
}
.cta-link:hover { gap: 1rem; color: var(--indigo-900); }

@media (max-width: 820px) {
  .phase, .entry, .alt-grid { grid-template-columns: 1fr; gap: 1.6rem; padding: 3rem 0; }
  .phase-mark { position: static; display: flex; align-items: baseline; gap: 1rem; }
  .phase-mark h2 { margin-top: 0; }
  .phase-num { font-size: 3rem; }
}

/* responsive */
/* Burger nav from 1080px down (raised from 860px on 12 Jul 2026 — longer "Grüner Wasserstoff" nav item) */
@media (max-width: 1080px) {
  .nav-toggle {
    display: block; background: none; border: 0; font-size: 1.7rem; cursor: pointer;
    color: var(--white); z-index: 110;
  }
  .scrolled .nav-toggle { color: var(--indigo-900); }
  .main-nav {
    position: fixed; inset: 0; background: var(--indigo-900);
    flex-direction: column; justify-content: center; gap: 1.2rem;
    transform: translateX(100%); transition: transform .4s cubic-bezier(.2,.7,.2,1);
  }
  .main-nav.open { transform: none; }
  .main-nav a { font-size: 1.3rem; color: var(--white) !important; }
}
@media (max-width: 860px) {
  .two-col, .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .stats-band { grid-template-columns: 1fr; gap: 2rem; }
  .stats { grid-template-columns: 1fr; gap: 1.6rem; }
  .foot-grid { grid-template-columns: 1fr; gap: 2rem; }
  .svc .svc-body { padding-left: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, .hero-bg { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* Sector deep-dive readability (sektor-wasserstoff.html, added 12 Jul 2026) */
.phase-copy { font-size: 1.08rem; color: #454c60; line-height: 1.75; max-width: 60ch; margin-bottom: 1.4rem; }
.page-h2 .cap-list > li { font-size: 1.02rem; line-height: 1.65; }
.takeaway {
  border-left: 3px solid var(--saffron); padding: .4rem 0 .4rem 1.25rem; margin-top: 1.8rem;
  font-family: var(--font-head); font-style: italic; font-size: 1.18rem; line-height: 1.55;
  color: var(--indigo-800); max-width: 52ch;
}
.cap-more { margin-top: .55rem; }
.cap-more summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .45em;
  font-weight: 700; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--indigo-600);
}
.cap-more summary::-webkit-details-marker { display: none; }
.cap-more summary::after { content: "+"; font-size: 1.05rem; color: var(--saffron-deep); transition: transform .3s; line-height: 1; }
.cap-more[open] summary::after { transform: rotate(45deg); }
.cap-more summary:hover { color: var(--indigo-900); }
.cap-more p { margin-top: .6rem; font-size: .98rem; color: var(--grey-600); line-height: 1.65; max-width: 58ch; }
.phase-photo { margin: 0 0 1.8rem; }
.phase-photo img { width: 100%; max-width: 560px; border-radius: var(--radius); display: block; }
.phase-photo figcaption { font-size: .78rem; color: var(--grey-600); margin-top: .5rem; letter-spacing: .03em; }

/* Wasserstoff hero headline — three controlled lines (12 Jul 2026) */
.page-h2 .hero-sub h1 { max-width: 26ch; font-size: clamp(1.9rem, 3.4vw, 2.9rem); }
.page-h2 .hero-sub h1 em { font-style: italic; color: var(--saffron); }
.page-h2 .hb { display: none; }
@media (min-width: 700px) { .page-h2 .hb { display: inline; } }

/* E-Book gate page (download-ebook.html, PROTOTYPE, 12 Jul 2026) */
.gate { padding: 9rem 0 5rem; background: var(--grey-100); min-height: 70vh; }
.gate-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2.5rem, 6vw, 5.5rem); align-items: start; }
.gate-intro .backlink { display: inline-block; margin-bottom: 2rem; font-weight: 700; color: var(--indigo-700); }
.gate-intro .backlink:hover { color: var(--indigo-900); }
.gate-intro .dl-kicker {
  position: static; display: inline-block; margin-bottom: .8rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--saffron-deep);
}
.gate-intro h1 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); max-width: 18ch; }
.gate-rule { margin: 1.4rem 0; max-width: 320px; }
.gate-lede { font-size: 1.08rem; color: var(--indigo-800); font-weight: 600; max-width: 42ch; margin-bottom: 1rem; }
.gate-desc { color: var(--grey-600); max-width: 48ch; line-height: 1.7; margin-bottom: 1.2rem; }
.gate-form-wrap { background: var(--white); border: 1px solid var(--grey-300); border-radius: var(--radius); padding: clamp(1.6rem, 3vw, 2.4rem); box-shadow: 0 14px 40px rgba(27,36,82,.08); }
.gate-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.gate-consent { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; margin: 1.4rem 0; }
.gate-consent input { margin-top: .25rem; width: 1.05rem; height: 1.05rem; accent-color: var(--saffron-deep); }
.gate-consent label { font-size: .82rem; font-weight: 400; color: var(--grey-600); line-height: 1.55; margin: 0; }
.gate-consent label a { color: var(--indigo-600); text-decoration: underline; }
.gate-error { color: #b3362b; font-size: .85rem; margin-bottom: 1rem; }
.gate-success h2 { margin-bottom: 1rem; }
.gate-success p { color: var(--grey-600); line-height: 1.7; margin-bottom: .8rem; }
.gate-success .cta-link { margin-top: 1rem; display: inline-block; }
@media (max-width: 820px) {
  .gate { padding-top: 7rem; }
  .gate-grid { grid-template-columns: 1fr; }
  .gate-form-row { grid-template-columns: 1fr; gap: 0; }
}

/* Energie chip: sub-link to hydrogen deep-dive (12 Jul 2026) */
.chip-col { display: flex; flex-direction: column; align-items: center; gap: .7rem; }
.chip-label {
  font-size: .82rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--saffron-deep); border-bottom: 1px solid var(--saffron); padding-bottom: .2rem;
  margin-top: -.2rem;
}
.chip-sub {
  font-size: .82rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: #1e6f5c; /* bewusste Ausnahme von der Indigo/Safran-Palette — semantisches Grün nur hier */
  transition: color .25s;
}
/* One-time gentle pulse when scrolled into view (uses the .reveal observer in main.js), then static */
.chip-sub.in { animation: chip-pulse 3s ease-in-out .4s 2; }
.chip-sub:hover { color: var(--indigo-900); }
@keyframes chip-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .65; }
}
@media (prefers-reduced-motion: reduce) { .chip-sub.in { animation: none; } }

/* Anchor jumps (e.g. sektoren.html#s6-title): keep target below fixed header */
.phase-mark h2 { scroll-margin-top: 110px; }

/* ============ Legal pages (Impressum / Datenschutz) — 13 Jul 2026 ============ */
.legal-content { max-width: 760px; margin: 1rem auto 0; padding: 4.4rem clamp(20px, 4vw, 48px) 6rem; }
.legal-content h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.6rem); margin: 3rem 0 1.1rem; padding-top: 1rem;
  border-top: 1px solid var(--grey-300);
}
.legal-content h2:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.legal-content h3 { font-size: 1.05rem; margin: 1.7rem 0 .7rem; color: var(--indigo-800); }
.legal-content p { margin-bottom: 1.15rem; font-size: 1rem; line-height: 1.75; color: var(--ink); }
.legal-content ul { padding-left: 1.3rem; margin: 0 0 1.15rem; display: grid; gap: .5rem; }
.legal-content li { font-size: 1rem; line-height: 1.65; color: var(--ink); }
.legal-content a { color: var(--indigo-600); border-bottom: 1px solid var(--saffron); }
.legal-content a:hover { color: var(--indigo-900); }
.legal-block {
  background: var(--grey-100); border-radius: var(--radius);
  padding: 1.7rem 1.9rem; margin-bottom: 2.2rem; font-size: 1rem; line-height: 1.85;
}
.legal-block b { color: var(--indigo-900); }
.legal-meta { color: var(--grey-600); font-size: .88rem; margin: -.6rem 0 2.6rem; }

/* GIRT registration + kontakt real-backend forms (31 Jul 2026) */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }