/* ============================================================
   Toepfer Transport — Style B "Weiß"
   White ground, one grotesk family (self-hosted), hairlines instead of boxes,
   CI green #246350 used sparingly. Fonts: ../assets/fonts/fonts.css
   ============================================================ */
:root{
  --green:#246350;
  --green-ink:#1B4A3C;
  --ink:#0F1412;
  --grey:#6B7370;
  --mute:#B4BAB7;
  --rule:#E6E1D6;        /* neutral outline (buttons) */
  --line:var(--green);   /* section dividers and list hairlines — Toepfer green */
  --tint:#F3EFE7;        /* sand band — Papier */
  --bg:#FCFBF7;          /* warm off-white — Papier */
  --font:"Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* type scale — every text on the site uses one of these five sizes (chart axes excepted) */
  --fs-xl:clamp(42px,5.4vw,80px);   /* page headline */
  --fs-l:clamp(28px,3vw,40px);      /* section headings, statement, index codes, desk list */
  --fs-m:20px;                      /* lead sentences, desk text, names on photos */
  --fs-body:16px;                   /* running text */
  --fs-s:14px;                      /* navigation, buttons, labels, meta, footer, contact details */
  --fs-chart:12px;                  /* chart axes and end values only */
  --wrap:1300px;
  --gutter:56px;
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font); font-size:var(--fs-body); line-height:1.6; -webkit-font-smoothing:antialiased; }
img{ max-width:100%; display:block; }
a{ color:inherit; }
p{ hyphens:auto; -webkit-hyphens:auto; }
h1,h2,h3,h4{ margin:0; font-weight:500; letter-spacing:-.02em; line-height:1.1; text-wrap:balance; }
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter); }
.just{ text-align:justify; }
:focus-visible{ outline:2px solid var(--green); outline-offset:3px; }

/* ---------- header ---------- */
.site-header{ position:sticky; top:0; z-index:30; background:rgba(252,251,247,.96); backdrop-filter:saturate(1.2) blur(6px); border-bottom:1px solid var(--line); }
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:32px; height:84px; }
.mark{ height:42px; width:auto; }
.nav{ display:flex; gap:28px; font-size:var(--fs-s); }
.nav a{ text-decoration:none; white-space:nowrap; }
.nav a:hover{ color:var(--green); }
.nav a[aria-current="page"]{ text-decoration:underline; text-underline-offset:6px; }
.nav .nav-contact{ display:none; }
.menu-btn{ all:unset; display:none; cursor:pointer; padding:10px 4px; font-size:var(--fs-s); font-weight:500; }
.menu-btn:focus-visible{ outline:2px solid var(--green); outline-offset:3px; }

/* pill button with arrow dot */
.pill{ display:inline-flex; align-items:center; gap:14px; padding:6px 6px 6px 22px; border:1px solid var(--rule); border-radius:100px; text-decoration:none; font-size:var(--fs-s); font-weight:500; white-space:nowrap; transition:border-color .2s; }
.pill:hover{ border-color:var(--ink); }
.pill .dot{ width:34px; height:34px; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; font-size:var(--fs-s); transition:background .2s; }
.pill:hover .dot{ background:var(--green); }

/* ---------- large headings in Toepfer green ---------- */
.hero h1, .intro h1, .statement{ color:var(--green); }

/* ---------- home hero ---------- */
.hero .wrap{ display:grid; grid-template-columns:1.05fr 1fr; align-items:center; min-height:clamp(560px, calc(88vh - 84px), 860px); gap:40px; }
.hero h1{ font-size:var(--fs-xl); line-height:.98; letter-spacing:-.035em; margin:0 0 30px; }
.meta{ color:var(--grey); font-size:var(--fs-s); margin:0 0 22px; }
.lede{ max-width:42ch; margin:0 0 42px; }
/* "Our desks" + "Our indices", stacked */
.hero-actions{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.mark-hero{ margin:0; display:flex; flex-direction:column; align-items:center; gap:clamp(28px,3vw,44px); justify-self:center; width:min(100%,460px); }
.mark-hero .flag{ width:78%; height:auto; }
.mark-hero .word{ width:100%; height:auto; }
/* black-and-white photo filling the right side, fading out towards the text */
.hero{ position:relative; overflow:hidden; }
.hero > .wrap{ position:relative; z-index:1; }
.hero-photo{ position:absolute; top:0; right:0; bottom:0; width:58%; margin:0; isolation:isolate;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, rgba(0,0,0,.12) 14%, rgba(0,0,0,.4) 32%, rgba(0,0,0,.75) 52%, #000 74%);
  mask-image:linear-gradient(90deg, transparent 0, rgba(0,0,0,.12) 14%, rgba(0,0,0,.4) 32%, rgba(0,0,0,.75) 52%, #000 74%); }
.hero-photo img{ width:100%; height:100%; object-fit:cover; object-position:58% 40%; filter:sepia(.18) contrast(.96); }

/* ---------- page intro (sub pages) ---------- */
.intro{ padding:92px 0 80px; }
/* one band height on every sub page (sized to the tallest, Market Intelligence) so the GA drawing
   sits identically everywhere; content stays anchored to the bottom of the band */
body:not([data-page="home"]) .intro{ display:flex; align-items:flex-end; min-height:clamp(400px, 12vw + 280px, 480px); }
body:not([data-page="home"]) .intro .wrap{ width:100%; }
.intro .wrap{ display:grid; grid-template-columns:1.3fr 1fr; gap:64px; align-items:end; }
.intro h1{ font-size:var(--fs-xl); line-height:.98; letter-spacing:-.035em; }
.intro .meta a{ text-decoration:none; }
.intro .meta a:hover{ color:var(--ink); }
.intro .sub{ color:var(--grey); margin:0; max-width:46ch; text-align:justify; }
/* side profile from the KISS MPP general arrangement, faint and bleeding off the right edge (not on home) */
body:not([data-page="home"]) .intro{ position:relative; overflow:hidden; }
body:not([data-page="home"]) .intro::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  /* fills the full intro height, so the cranes always touch the header line; taller intros crop the faded stern */
  top:0; right:-2%; bottom:-3%; width:min(1380px,100%);
  background:url("../assets/bg/ga-profile.png") no-repeat right bottom / cover;
  opacity:.17;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 40%), linear-gradient(0deg, transparent 0, #000 14%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg, transparent 0, #000 40%), linear-gradient(0deg, transparent 0, #000 14%);
  mask-composite:intersect;
}
body:not([data-page="home"]) .intro .wrap{ position:relative; z-index:1; }

/* ---------- sections ---------- */
.section{ padding:0 0 110px; }
.label{ border-top:1px solid var(--line); padding-top:14px; font-size:var(--fs-s); color:var(--grey); margin-bottom:48px; display:flex; justify-content:space-between; gap:16px; }
.label a{ text-decoration:none; }
/* a label already draws the section's top hairline — the list below must not draw a second one */
.label + .rows, .label + .related, .label + .timeline{ border-top:0; margin-top:-28px; }
.label a:hover{ color:var(--ink); }
.cols{ display:grid; grid-template-columns:1fr 1.25fr; gap:80px; }
.lead{ font-size:var(--fs-m); line-height:1.45; letter-spacing:-.02em; margin:0; max-width:24ch; hyphens:manual; -webkit-hyphens:manual; }
.prose p{ margin:0 0 18px; max-width:62ch; }
.prose p:last-child{ margin-bottom:0; }

/* hairline rows: services, steps, reports, desk contacts */
.rows{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.rows li{ display:grid; grid-template-columns:minmax(180px,.8fr) 1.4fr; gap:32px; padding:20px 0; border-bottom:1px solid var(--line); }
.rows li b{ font-weight:500; }
.rows li span{ color:var(--grey); }
.rows li a{ text-decoration:none; }
.rows li a:hover{ color:var(--green); text-decoration:underline; text-underline-offset:3px; }

/* big statement line */
.statement{ font-size:var(--fs-l); font-weight:500; letter-spacing:-.03em; line-height:1.12; margin:0; max-width:24ch; text-wrap:balance; }

/* ---------- home: desk list (hover swaps panel) ---------- */
.desks .grid{ display:grid; grid-template-columns:1fr 1.25fr; gap:80px; }
.panel h3{ font-size:var(--fs-s); font-weight:500; margin:0 0 14px; color:var(--green); letter-spacing:0; }
.panel p{ font-size:var(--fs-m); line-height:1.5; margin:0 0 30px; max-width:36ch; }
.desk-list{ list-style:none; margin:0; padding:0; }
.desk-list li{ border-bottom:1px solid var(--line); }
.desk-list a{ display:block; padding:20px 0; font-size:var(--fs-l); font-weight:500; letter-spacing:-.02em; color:var(--mute); text-decoration:none; transition:color .2s; }
.desk-list a[aria-current="true"], .desk-list a:hover, .desk-list a:focus-visible{ color:var(--ink); }

/* ---------- indices ---------- */
.tinted{ background:var(--tint); padding:110px 0; margin-bottom:110px; }
#desks, #indices{ scroll-margin-top:84px; }   /* hero buttons jump here; clear of the sticky header */
.tinted .label{ border-top-color:var(--line); }
.ix-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:48px; }
.ix{ border-top:1px solid var(--line); padding-top:18px; }
.ix p{ margin:0; color:var(--grey); }
.ix .code{ font-size:var(--fs-l); font-weight:500; letter-spacing:-.03em; line-height:1; margin:0 0 14px; color:var(--ink); }
.ix .nm{ font-weight:500; margin:0 0 6px; color:var(--ink); }
/* justified text tears holes in narrow columns — keep it for wide prose only */
.ix .just{ text-align:left; }
.ix.todo .code{ color:var(--mute); }
/* index charts (js/indices.js) — pushed to the card bottom so the three charts line up */
.ix{ display:flex; flex-direction:column; }
.ix-chart{ position:relative; margin-top:auto; padding-top:32px; font-size:var(--fs-s); }
.ix-chart svg{ display:block; overflow:visible; touch-action:pan-y; font-family:var(--font); }
.ix-chart svg:focus-visible{ outline:2px solid var(--green); outline-offset:4px; }
.ix-chart .grid{ stroke:rgba(15,20,18,.09); stroke-width:1; }
.ix-chart .tick{ fill:var(--grey); font-size:var(--fs-chart); }
.ix-chart .end{ fill:var(--ink); font-size:var(--fs-chart); font-weight:500; }
.ix-chart .line{ fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.ix-chart .dot{ stroke:var(--tint); stroke-width:2; }
.ix-chart .hair{ stroke:var(--grey); stroke-width:1; }
.ix-legend{ display:flex; gap:18px; margin:0 0 10px !important; font-size:var(--fs-s); color:var(--ink) !important; }
.ix-legend span, .ix-tip span{ display:inline-flex; align-items:center; gap:7px; }
.ix-legend i, .ix-tip i{ width:14px; height:2px; border-radius:2px; display:inline-block; }
.ix-tip{ position:absolute; top:24px; transform:translateX(-50%); background:var(--bg); border:1px solid var(--rule); border-radius:6px; padding:8px 11px; font-size:var(--fs-s); line-height:1.5; pointer-events:none; white-space:nowrap; box-shadow:0 4px 14px rgba(15,20,18,.07); }
.ix-tip em{ display:block; font-style:normal; color:var(--grey); }
.ix-tip span{ display:flex; }
.ix-tip b{ font-weight:500; margin-left:auto; padding-left:14px; }
.ix-table{ margin-top:6px; color:var(--grey); }
.ix-table summary{ cursor:pointer; font-size:var(--fs-s); width:max-content; }
.ix-table summary:hover{ color:var(--ink); }
.ix-table table{ border-collapse:collapse; margin-top:8px; width:100%; font-size:var(--fs-s); font-variant-numeric:tabular-nums; }
.ix-table th, .ix-table td{ text-align:right; padding:3px 0 3px 12px; border-bottom:1px solid rgba(15,20,18,.07); font-weight:400; }
.ix-table th:first-child, .ix-table td:first-child{ text-align:left; padding-left:0; }
.ix-table th{ color:var(--ink); font-weight:500; }
.ix-note{ margin:40px 0 0; color:var(--grey); font-size:var(--fs-s); }

/* ---------- history timeline ---------- */
.timeline{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.timeline li{ display:grid; grid-template-columns:160px 1fr 1.4fr; gap:32px; padding:26px 0; border-bottom:1px solid var(--line); align-items:baseline; }
.timeline .yr{ font-size:var(--fs-l); font-weight:500; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.timeline h3{ font-size:var(--fs-m); }
.timeline p{ margin:0; color:var(--grey); }

/* ---------- team ---------- */
.group{ padding:0 0 88px; scroll-margin-top:124px; }   /* desk pages link to team.html#<desk>: keep the group head clear of the sticky header */
.group-head{ display:flex; justify-content:space-between; align-items:baseline; border-top:1px solid var(--line); padding-top:14px; margin-bottom:26px; }
.group-head h2{ font-size:var(--fs-l); }
.group-head a{ font-size:var(--fs-s); color:var(--grey); text-decoration:none; }
.group-head a:hover{ color:var(--ink); }
.people{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:2px; }
.person{ margin:0; }
.photo{ position:relative; aspect-ratio:4/5; overflow:hidden; background:#1E2321; }
.photo img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.08) brightness(.93); transition:filter .5s ease, transform .6s ease; }
.person:hover .photo img{ filter:none; transform:scale(1.02); }
.photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0) 45%); pointer-events:none; }
.photo .who{ position:absolute; left:18px; right:18px; bottom:16px; z-index:1; color:#fff; }
.photo .nm{ display:block; font-size:var(--fs-m); letter-spacing:-.02em; line-height:1.05; }
.photo .rl{ display:block; font-size:var(--fs-s); color:rgba(255,255,255,.82); margin-top:5px; }
.photo .initials{ position:absolute; inset:0; display:grid; place-items:center; font-size:var(--fs-l); letter-spacing:-.02em; color:rgba(255,255,255,.18); }
.contact{ padding:14px 18px 0 0; font-size:var(--fs-s); line-height:1.65; color:var(--grey); }
.contact a{ text-decoration:none; color:var(--ink); }
.contact a:hover{ color:var(--green); text-decoration:underline; text-underline-offset:3px; }
.contact .tbd{ color:var(--mute); }

/* ---------- offices / contact ---------- */
.offices{ display:grid; grid-template-columns:repeat(3,1fr); gap:48px; }
.offices h2{ font-size:var(--fs-l); letter-spacing:-.03em; }
.office{ border-top:1px solid var(--line); padding-top:16px; color:var(--grey); }
.office h3{ color:var(--ink); font-size:var(--fs-body); letter-spacing:0; margin:0 0 8px; }
.office p{ margin:0 0 8px; }
.office a{ text-decoration:none; color:var(--ink); }
.office a:hover{ color:var(--green); }

/* ---------- related + call to action ---------- */
.related{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.related a{ display:grid; grid-template-columns:minmax(200px,.8fr) 1.4fr auto; gap:32px; align-items:baseline; padding:22px 0; border-bottom:1px solid var(--line); text-decoration:none; }
.related b{ font-size:var(--fs-m); font-weight:500; letter-spacing:-.02em; }
.related span{ color:var(--grey); }
.related i{ font-style:normal; color:var(--mute); transition:color .2s, transform .2s; }
.related a:hover i{ color:var(--green); transform:translateX(4px); }
.cta{ display:flex; justify-content:space-between; align-items:center; gap:32px; border-top:1px solid var(--line); padding-top:28px; }
.cta h2{ font-size:var(--fs-l); letter-spacing:-.03em; }
.cta p{ color:var(--grey); margin:8px 0 0; }

/* ---------- legal ---------- */
.legal{ max-width:72ch; }
.legal h2{ font-size:var(--fs-l); margin:72px 0 24px; padding-top:14px; border-top:1px solid var(--line); }
.legal h2:first-child{ margin-top:0; }
.legal h3{ font-size:var(--fs-body); letter-spacing:0; margin:34px 0 10px; }
.legal h3 .en, .legal h2 .en{ font-weight:400; color:var(--grey); margin-left:.4em; }
.legal p, .legal li{ color:#333A37; }
.legal p{ margin:0 0 12px; }
.legal ul{ margin:0 0 12px; padding-left:20px; }
.legal a{ color:var(--green); word-break:break-word; }
/* privacy policy from easyRechtssicher (imprint.html): its title (first h2) gets the legal section style,
   further h2/h3 step down the type scale */
.er-text h1, .er-text h2:first-of-type{ font-size:var(--fs-l); font-weight:500; letter-spacing:-.02em; line-height:1.1; margin:72px 0 24px; padding-top:14px; border-top:1px solid var(--line); }
.er-text h2{ font-size:var(--fs-m); font-weight:500; margin:40px 0 12px; padding-top:0; border-top:0; }
.er-text h3{ font-size:var(--fs-body); font-weight:500; margin:28px 0 10px; letter-spacing:0; }
.er-text h4{ font-size:var(--fs-body); font-weight:500; margin:20px 0 8px; letter-spacing:0; }
.er-text p, .er-text ul{ margin:0 0 12px; }
.er-text .easyrecht-powered{ margin-top:24px; font-size:var(--fs-s); color:var(--grey); }
.er-text .easyrecht-loading, .er-text .easyrecht-error{ margin-top:72px; font-size:var(--fs-s); color:var(--grey); }
/* review notes mark what was changed or still needs checking — remove before go-live */
.legal .review-note{ background:#FFF6D6; border-left:3px solid #D9A400; padding:10px 14px; font-size:var(--fs-s); color:#5A4A12; }

/* ---------- footer ---------- */
.site-footer{ border-top:1px solid var(--line); padding:64px 0 30px; margin-top:20px; }
.foot{ display:grid; grid-template-columns:1.2fr repeat(3,1fr); gap:48px; margin-bottom:56px; }
.foot .brand{ display:flex; flex-direction:column; gap:18px; }
.foot .brand .f{ width:64px; height:auto; }
.foot .brand .w{ width:200px; height:auto; }
.foot h4{ font-size:var(--fs-s); font-weight:500; color:var(--grey); letter-spacing:0; margin:0 0 12px; }
.foot ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; font-size:var(--fs-s); }
.foot a{ text-decoration:none; }
.foot a:hover{ color:var(--green); }
.foot .addr{ color:var(--grey); font-size:var(--fs-s); margin:0; }
.base{ display:flex; justify-content:space-between; gap:16px; color:var(--grey); font-size:var(--fs-s); border-top:1px solid var(--line); padding-top:22px; }
.base a{ text-decoration:none; }
.base a:hover{ color:var(--ink); }

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .nav{ display:none; }
  .menu-btn{ display:block; }
  .site-header .pill{ display:none; }
  .nav.open{ display:flex; position:absolute; top:84px; left:0; right:0; flex-direction:column; gap:0; background:var(--bg); border-bottom:1px solid var(--line); padding:8px var(--gutter) 20px; }
  .nav.open a{ padding:12px 0; border-bottom:1px solid var(--line); font-size:var(--fs-body); }
  .nav.open .nav-contact{ display:block; }
  .people{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .foot{ grid-template-columns:1fr 1fr; }
}
@media (max-width:900px){
  :root{ --gutter:20px; }
  .hero .wrap, .intro .wrap, .cols, .desks .grid, .ix-grid, .offices{ grid-template-columns:1fr; gap:32px; }
  .hero .wrap{ min-height:0; padding:56px var(--gutter) 72px; }
  .mark-hero{ width:min(80%,340px); }
  .hero-photo{ position:relative; width:100%; height:min(62vw,420px);
    -webkit-mask-image:linear-gradient(0deg, transparent 0, rgba(0,0,0,.45) 25%, #000 60%); mask-image:linear-gradient(0deg, transparent 0, rgba(0,0,0,.45) 25%, #000 60%); }
  .hero-photo + .wrap{ padding-top:8px; }
  .intro{ padding:60px 0 56px; }
  body:not([data-page="home"]) .intro{ min-height:clamp(350px, 600px - 30vw, 500px); }
  body:not([data-page="home"]) .intro::before{ top:auto; width:190%; right:-12%; bottom:0; aspect-ratio:2400/719; background-size:contain; opacity:.14; }
  .rows li, .timeline li, .related a{ grid-template-columns:1fr; gap:6px; }
  .related i{ display:none; }
  .cta{ flex-direction:column; align-items:flex-start; }
  .people{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  /* very narrow phones: long e-mail addresses may break instead of pushing the page sideways */
  .contact{ padding-right:0; }
  .contact a, .pill{ overflow-wrap:break-word; }
  .pill{ max-width:100%; white-space:normal; }
  .just, .intro .sub{ text-align:left; }
  .foot{ grid-template-columns:1fr; gap:32px; }
  .base{ flex-direction:column; }
}
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } html{ scroll-behavior:auto; } }