/* ==========================================================================
   EOS Consulting & Trading GmbH — Design System
   Connecting Markets. Creating Opportunities.
   --------------------------------------------------------------------------
   1. Tokens          5. Layout primitives   9. Sections
   2. Reset           6. Header / Nav       10. Footer
   3. Typography      7. Buttons / Links    11. Motion
   4. Motion tokens   8. Forms              12. Responsive
   ========================================================================== */

/* 1. ─────────────────────────────────────────── TOKENS ── */
:root{
  /* Ground & ink — never pure white / pure black */
  --c-ground:        #F7F5F1;
  --c-ground-2:      #EFEBE3;
  --c-ground-3:      #E5E0D6;
  --c-ink:           #1D2022;
  --c-ink-2:         #4A5154;
  --c-ink-3:         #7B8285;

  /* Dark petrol-anthracite */
  --c-dark:          #0C1F21;
  --c-dark-2:        #12292C;
  --c-dark-3:        #1A3639;

  /* Accents — <3% surface area */
  --c-petrol:        #1D6F78;
  --c-petrol-2:      #2A929E;
  --c-gold:          #C3A063;

  /* Lines */
  --c-line:          rgba(29,32,34,.13);
  --c-line-2:        rgba(29,32,34,.28);
  --c-line-d:        rgba(255,255,255,.14);
  --c-line-d2:       rgba(255,255,255,.30);

  /* On-dark text */
  --c-on-dark:       rgba(255,255,255,.92);
  --c-on-dark-2:     rgba(255,255,255,.62);
  --c-on-dark-3:     rgba(255,255,255,.40);

  /* Type families */
  --f-sans:  'Inter','Helvetica Neue',Helvetica,Arial,system-ui,sans-serif;
  --f-serif: 'Instrument Serif','Times New Roman',Georgia,serif;
  --f-mono:  'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  /* Fluid type scale */
  --t-display: clamp(1.85rem, 5vw + .55rem, 5.75rem);
  --t-h1:      clamp(1.8rem, 3.6vw + .75rem, 4.5rem);
  --t-h2:      clamp(1.5rem, 2.4vw + .85rem, 3.25rem);
  --t-h3:      clamp(1.2rem, 1vw + .9rem, 1.95rem);
  --t-h4:      clamp(1.1rem, .45vw + .95rem, 1.35rem);
  --t-lead:    clamp(1.09rem, .48vw + .95rem, 1.375rem);
  --t-body:    clamp(1rem, .22vw + .94rem, 1.0625rem);
  --t-sm:      .9375rem;
  --t-xs:      .8125rem;
  --t-label:   .6875rem;

  /* Fluid negative tracking — the premium marker */
  --ls-display: clamp(-.115rem, -.085vw - .012rem, -.055rem);
  --ls-h2:      clamp(-.055rem, -.033vw - .012rem, -.028rem);
  --ls-h3:      -.022em;
  --ls-body:    -.011em;
  --ls-label:   .13em;

  /* Spacing */
  --s-sec:      clamp(4.5rem, 9vw, 10.5rem);
  --s-sec-sm:   clamp(3rem, 6vw, 6.5rem);
  --gutter:     clamp(1.25rem, 4vw, 3.5rem);

  /* Containers — staggered per section type (editorial trick) */
  --w-wide:     1520px;
  --w-base:     1400px;
  --w-narrow:   1040px;
  --w-text:     64ch;

  /* Innenabstand in Spaltengruppen mit Trennlinien (.step/.stat/.pillar).
     Ohne ihn klebt der Text der Folgespalte an der Linie. */
  --colpad:     clamp(1.15rem, 2vw, 2rem);

  --radius:     2px;
  --header-h:   84px;
}

/* 4. ────────────────────────────────────── MOTION TOKENS ── */
:root{
  --e-out:  cubic-bezier(.25,1,.5,1);      /* micro-interactions   */
  --e-expo: cubic-bezier(.16,1,.3,1);      /* reveals              */
  --e-cubic:cubic-bezier(.215,.61,.355,1); /* line-draw / counters */
  --d-fast: .22s;
  --d-base: .34s;
  --d-slow: .72s;
  --d-xslow:1.05s;
}

/* 2. ──────────────────────────────────────────── RESET ── */
*,*::before,*::after{box-sizing:border-box}
/* Klassen wie .btn setzen display und würden das hidden-Attribut sonst aushebeln. */
[hidden]{display:none!important}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 24px);
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{
  margin:0;
  background:var(--c-ground);
  color:var(--c-ink);
  font-family:var(--f-sans);
  font-size:var(--t-body);
  line-height:1.6;
  letter-spacing:var(--ls-body);
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;height:auto}
/* <picture> must not introduce an inline box: it created a baseline gap under
   images and broke height:100% (percentage against an auto-height inline). */
picture{display:contents}
h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
:focus-visible{outline:2px solid var(--c-petrol-2);outline-offset:3px;border-radius:1px}
::selection{background:var(--c-petrol);color:#fff}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* children of a visually-hidden wrapper must not escape its box */
.sr-only > *{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none}
.skip-link{position:absolute;top:-100px;left:var(--gutter);z-index:200;background:var(--c-dark);
  color:#fff;padding:.85rem 1.4rem;font-size:var(--t-sm);transition:top var(--d-base) var(--e-out)}
.skip-link:focus{top:14px}

/* 3. ───────────────────────────────────────── TYPOGRAPHY ── */
.display,.h1,.h2,.h3,h1,h2,h3{
  font-weight:600;
  line-height:1.04;
  text-wrap:balance;
  overflow-wrap:break-word;
}
.display{font-size:var(--t-display);letter-spacing:var(--ls-display);line-height:.97}
.h1{font-size:var(--t-h1);letter-spacing:var(--ls-display);line-height:1.0}
.h2{font-size:var(--t-h2);letter-spacing:var(--ls-h2);line-height:1.07}
.h3{font-size:var(--t-h3);letter-spacing:var(--ls-h3);line-height:1.18;font-weight:600}
.h4{font-size:var(--t-h4);letter-spacing:var(--ls-h3);line-height:1.3;font-weight:600}

/* Serif italic accent inside headlines */
.em{
  font-family:var(--f-serif);
  font-style:italic;
  font-weight:400;
  letter-spacing:0;
  padding-right:.06em;
}
.lead{
  font-size:var(--t-lead);
  line-height:1.5;
  color:var(--c-ink-2);
  max-width:var(--w-text);
  text-wrap:pretty;
}
.body{max-width:var(--w-text);color:var(--c-ink-2);text-wrap:pretty}
.body + .body{margin-top:1.1em}
.strong-ink{color:var(--c-ink)}

/* Mono label — the "index / manifest" marker */
.label{
  font-family:var(--f-mono);
  font-size:var(--t-label);
  font-weight:500;
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--c-ink-3);
  display:flex;
  align-items:center;
  gap:.7rem;
}
.label::before{
  content:'';
  width:26px;height:1px;
  background:var(--c-gold);
  flex:none;
}
.label--plain::before{display:none}
.on-dark .label,.sec--dark .label{color:var(--c-on-dark-3)}

/* 5. ────────────────────────────────── LAYOUT PRIMITIVES ── */
.wrap{width:100%;max-width:var(--w-base);margin-inline:auto;padding-inline:var(--gutter)}
/* Bewusst NICHT mehr verwendet: Header, Hero, Pfeilerleiste und Footer liefen
   frueher im breiteren Container und starteten dadurch 116px weiter links als
   jeder Abschnitt darunter. Alles teilt sich jetzt eine linke Kante. */
.wrap--wide{max-width:var(--w-base)}
.wrap--narrow{max-width:var(--w-narrow)}
.sec{padding-block:var(--s-sec);position:relative}
.sec--sm{padding-block:var(--s-sec-sm)}
.sec--dark{background:var(--c-dark);color:var(--c-on-dark)}
.sec--dark .lead,.sec--dark .body{color:var(--c-on-dark-2)}
.sec--tint{background:var(--c-ground-2)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter)}
/* Responsive Spalten-Utilities: kollabieren auf Tablet/Mobil auf volle Breite.
   Inline grid-column würde die Media Queries überschreiben — deshalb Klassen. */
.col-l{grid-column:1/6}
.col-r{grid-column:7/13}
/* Gleich breite Haelften fuer die alternierenden Leistungsbloecke. Vorher liefen
   sie ueber .intro__t (6 Spalten) und .intro__b (5 Spalten) — dadurch brachen
   die Themenlisten je nach Seite ein- oder zweispaltig um. */
.half-a{grid-column:1/7}
.half-b{grid-column:7/13}
@media (max-width:899px){ .col-l,.col-r,.half-a,.half-b{grid-column:1/-1} }
.rule{height:1px;background:var(--c-line);border:0;margin:0}
.sec--dark .rule{background:var(--c-line-d)}

/* Section head: asymmetric — title 1–7, text 8–12 */
.sec-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter);align-items:end}
.sec-head__t{grid-column:1/8}
.sec-head__x{grid-column:8/13;padding-bottom:.4rem}
.sec-head .label{margin-bottom:1.5rem}

/* 7. ────────────────────────────────────── BUTTONS / LINKS ── */
.btn{
  --btn-bg:var(--c-dark);--btn-fg:#fff;--btn-bd:var(--c-dark);
  display:inline-flex;align-items:center;justify-content:center;gap:.65rem;
  padding:1.02rem 1.85rem;
  background:var(--btn-bg);color:var(--btn-fg);
  border:1px solid var(--btn-bd);border-radius:var(--radius);
  font-size:var(--t-sm);font-weight:500;letter-spacing:-.005em;
  cursor:pointer;position:relative;overflow:hidden;isolation:isolate;
  transition:color var(--d-base) var(--e-out),border-color var(--d-base) var(--e-out),
             background-color var(--d-base) var(--e-out);
}
.btn::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:var(--c-petrol);
  transform:translateY(101%);
  transition:transform var(--d-base) var(--e-expo);
}
.btn:hover::after,.btn:focus-visible::after{transform:translateY(0)}
.btn:hover,.btn:focus-visible{border-color:var(--c-petrol);color:#fff}
.btn__ar{transition:transform var(--d-base) var(--e-out);flex:none}
.btn:hover .btn__ar{transform:translateX(4px)}

.btn--ghost{--btn-bg:transparent;--btn-fg:var(--c-ink);--btn-bd:var(--c-line-2)}
.btn--ghost:hover,.btn--ghost:focus-visible{color:#fff;border-color:var(--c-petrol)}
.btn--light{--btn-bg:#fff;--btn-fg:var(--c-dark);--btn-bd:#fff}
.btn--onDark-ghost{--btn-bg:transparent;--btn-fg:var(--c-on-dark);--btn-bd:var(--c-line-d2)}
.btn--sm{padding:.72rem 1.2rem;font-size:var(--t-xs)}

/* Text link with animated underline */
.tlink{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:var(--t-sm);font-weight:500;
  padding-bottom:.32rem;position:relative;
}
.tlink::before,.tlink::after{
  content:'';position:absolute;bottom:0;left:0;height:1px;width:100%;
}
.tlink::before{background:var(--c-line-2)}
.tlink::after{
  background:var(--c-petrol);
  transform:scaleX(0);transform-origin:100% 50%;
  transition:transform var(--d-base) var(--e-expo);
}
.tlink:hover::after,.tlink:focus-visible::after{transform:scaleX(1);transform-origin:0 50%}
.tlink .btn__ar{transition:transform var(--d-base) var(--e-out)}
.tlink:hover .btn__ar{transform:translateX(4px)}
.sec--dark .tlink::before{background:var(--c-line-d2)}
.sec--dark .tlink::after{background:var(--c-gold)}

/* 6. ─────────────────────────────────────── HEADER / NAV ── */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:100;
  height:var(--header-h);
  display:flex;align-items:center;
  transition:height var(--d-base) var(--e-out),
             background-color var(--d-base) var(--e-out),
             border-color var(--d-base) var(--e-out),
             backdrop-filter var(--d-base) var(--e-out);
  border-bottom:1px solid transparent;
  color:var(--c-on-dark);
}
.hdr__in{
  width:100%;max-width:var(--w-base);margin-inline:auto;padding-inline:var(--gutter);
  display:flex;align-items:center;gap:clamp(.9rem,2.2vw,2rem);
}
.hdr.is-stuck{
  height:68px;
  background:rgba(12,31,33,.88);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border-bottom-color:var(--c-line-d);
}
.hdr.is-light{color:var(--c-ink)}
.hdr.is-light.is-stuck{
  background:rgba(247,245,241,.9);
  border-bottom-color:var(--c-line);
}

/* Logo — SVG-Sprite, erbt currentColor und folgt damit dem Header-Zustand */
.logo{display:flex;align-items:center;flex:none;line-height:0}
/* fill erbt NICHT automatisch von color — ohne diese Zeile zeichnet das
   Sprite schwarz auf dunklem Grund. */
.logo__lockup,.logo__mark{fill:currentColor}
.logo__lockup{height:40px;aspect-ratio:3.6406;width:auto;display:block}
.logo__mark{height:30px;aspect-ratio:1.7138;width:auto;display:none}
.logo-sprite{position:absolute;width:0;height:0;overflow:hidden}
.hdr.is-stuck .logo__lockup{height:32px}
.hdr.is-stuck .logo__mark{height:26px}
.logo--ft .logo__lockup{height:46px}
@media (max-width:719px){
  .logo__lockup{display:none}
  .logo__mark{display:block}
  .logo--ft .logo__lockup{display:block;height:38px}
  .logo--ft .logo__mark{display:none}
}

/* Desktop nav */
.nav{display:none;margin-left:auto;align-items:center;gap:clamp(.45rem,1.1vw,1.05rem)}
@media (min-width:1100px){ .nav{display:flex} }
.nav__i{position:relative}
.nav__l{
  display:flex;align-items:center;gap:.4rem;
  padding:.55rem .18rem;
  font-size:var(--t-sm);font-weight:450;
  position:relative;white-space:nowrap;
  transition:opacity var(--d-fast) var(--e-out);
}
.nav__l::after{
  content:'';position:absolute;left:0;right:0;bottom:.16rem;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:100% 50%;
  transition:transform var(--d-base) var(--e-expo);
}
.nav__i:hover .nav__l::after,.nav__l:focus-visible::after,.nav__l[aria-current]::after{
  transform:scaleX(1);transform-origin:0 50%;
}
.nav__l[aria-current]{font-weight:550}
.nav__chev{transition:transform var(--d-base) var(--e-out);opacity:.6}
.nav__i:hover .nav__chev{transform:rotate(180deg)}

/* Panel dropdown (2 columns + CTA rail) */
.panel{
  position:absolute;top:calc(100% + 14px);left:50%;translate:-50% 0;
  width:min(760px,88vw);
  background:var(--c-ground);color:var(--c-ink);
  border:1px solid var(--c-line);
  box-shadow:0 34px 70px -28px rgba(12,31,33,.34);
  padding:1.6rem;
  display:grid;grid-template-columns:1fr 1fr 200px;gap:.35rem 1.6rem;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity var(--d-base) var(--e-out),transform var(--d-base) var(--e-out),
             visibility 0s linear var(--d-base);
}
.nav__i:hover .panel,.nav__i:focus-within .panel{
  opacity:1;visibility:visible;transform:translateY(0);
  transition-delay:0s,0s,0s;
}
.panel::before{content:'';position:absolute;top:-14px;left:0;right:0;height:14px}
.panel__l{
  display:block;padding:.72rem .8rem;border-radius:var(--radius);
  transition:background-color var(--d-fast) var(--e-out);
}
.panel__l:hover,.panel__l:focus-visible{background:var(--c-ground-2)}
.panel__n{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;color:var(--c-gold);display:block;margin-bottom:.28rem}
.panel__t{font-size:var(--t-sm);font-weight:550;display:block;letter-spacing:-.012em}
.panel__d{font-size:var(--t-xs);color:var(--c-ink-3);display:block;margin-top:.12rem;line-height:1.4}
.panel__rail{
  grid-column:3;grid-row:1/-1;
  background:var(--c-dark);color:var(--c-on-dark);
  padding:1.4rem 1.25rem;display:flex;flex-direction:column;justify-content:space-between;gap:1.5rem;
}
.panel__rail p{font-size:var(--t-xs);color:var(--c-on-dark-2);line-height:1.5}

/* Header right cluster */
.hdr__end{display:flex;align-items:center;gap:.8rem;margin-left:auto}
@media (min-width:1100px){ .hdr__end{margin-left:0} }
.lang{display:none;align-items:center;gap:.42rem;font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.1em}
@media (min-width:820px){ .lang{display:flex} }
.lang a{opacity:.48;transition:opacity var(--d-fast) var(--e-out);padding:.2rem 0}
.lang a:hover{opacity:.9}
.lang a[aria-current]{opacity:1;font-weight:600}
.lang span{opacity:.24}
/* Nur der Header-CTA darf nicht umbrechen — im CTA-Band muss der laengere
   Text auf schmalen Displays sehr wohl umbrechen duerfen. */
.hdr .btn{padding:.75rem 1.3rem;font-size:var(--t-xs);display:none;white-space:nowrap}
@media (min-width:1100px){ .hdr .btn{display:inline-flex} }
.hdr.is-light .btn--onDark-ghost{--btn-fg:var(--c-ink);--btn-bd:var(--c-line-2)}
.hdr.is-light .btn--onDark-ghost:hover{--btn-fg:#fff}

/* Burger */
.burger{
  display:grid;place-content:center;gap:5px;
  width:44px;height:44px;margin-right:-10px;
  background:none;border:0;cursor:pointer;
}
@media (min-width:1100px){ .burger{display:none} }
.burger span{display:block;width:22px;height:1.5px;background:currentColor;
  transition:transform var(--d-base) var(--e-out),opacity var(--d-fast) var(--e-out)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* Mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:99;
  background:var(--c-dark);color:var(--c-on-dark);
  padding:calc(var(--header-h) + 2rem) var(--gutter) 2.5rem;
  overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;
  transition:opacity var(--d-base) var(--e-out),visibility 0s linear var(--d-base);
}
.drawer.is-open{opacity:1;visibility:visible;transition-delay:0s,0s}
.drawer__l{
  display:flex;align-items:baseline;gap:.9rem;
  padding:1.05rem 0;border-bottom:1px solid var(--c-line-d);
  font-size:clamp(1.35rem,5vw,1.9rem);font-weight:550;letter-spacing:-.025em;
  opacity:0;transform:translateY(14px);
}
.drawer.is-open .drawer__l{
  opacity:1;transform:none;
  transition:opacity .5s var(--e-expo) calc(var(--i,0)*45ms + 60ms),
             transform .5s var(--e-expo) calc(var(--i,0)*45ms + 60ms);
}
.drawer__n{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;color:var(--c-gold);flex:none}
.drawer__foot{margin-top:2.5rem;display:flex;flex-direction:column;gap:1.25rem}
.drawer__foot .btn{width:100%}
html.is-locked,html.is-locked body{overflow:hidden}

/* 9. ─────────────────────────────────────────── SECTIONS ── */

/* — HERO — */
.hero{
  position:relative;background:var(--c-dark);color:var(--c-on-dark);
  padding-top:calc(var(--header-h) + clamp(3rem,7vw,6rem));
  padding-bottom:0;overflow:hidden;
}
.hero__bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hero__glow{
  position:absolute;top:-28%;right:-14%;width:min(1100px,92vw);aspect-ratio:1;
  background:radial-gradient(circle at 50% 50%,rgba(42,146,158,.30),rgba(42,146,158,.06) 46%,transparent 70%);
  filter:blur(12px);
}
.hero__in{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter);align-items:end}
.hero__copy{grid-column:1/8;padding-bottom:clamp(3rem,6vw,5.5rem)}
.hero__media{grid-column:8/13;position:relative}
.hero .label{margin-bottom:clamp(1.4rem,3vw,2.2rem)}
.hero h1{margin-bottom:clamp(1.5rem,3vw,2.1rem)}
.hero__sub{
  font-size:var(--t-lead);color:var(--c-on-dark-2);max-width:44ch;line-height:1.5;
  margin-bottom:clamp(2rem,4vw,2.9rem);
}
.hero__cta{display:flex;flex-wrap:wrap;gap:.85rem}
.hero__fig{
  position:relative;aspect-ratio:4/5;overflow:hidden;
  border:1px solid var(--c-line-d);
}
.hero__fig img{width:100%;height:100%;object-fit:cover}
/* Bildstapel: langsame Überblendung zwischen drei Motiven. Die Enthüllung
   nutzt transform, die Drift die Einzel-Eigenschaft scale — so ueberschreiben
   sie sich nicht. */
.hero__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.5s var(--e-out);
}
.hero__img.is-on{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .hero__img.is-on{animation:heroDrift 22s ease-in-out infinite alternate}
}
@keyframes heroDrift{ from{scale:1} to{scale:1.07} }
.hero__cycle{
  position:absolute;left:0;right:0;bottom:0;height:2px;z-index:3;
  background:rgba(255,255,255,.12);
}
.hero__cycle i{display:block;height:100%;background:var(--c-gold);
  transform:scaleX(0);transform-origin:0 50%}
.hero__fig::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(190deg,rgba(12,31,33,.12) 0%,rgba(12,31,33,.55) 100%);
}
.hero__stamp{
  position:absolute;left:-1px;bottom:-1px;z-index:2;
  background:var(--c-dark);border:1px solid var(--c-line-d);
  padding:.9rem 1.1rem;
}
.hero__stamp b{display:block;font-family:var(--f-mono);font-size:1.35rem;font-weight:500;letter-spacing:-.02em;line-height:1}
.hero__stamp span{display:block;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--c-on-dark-3);margin-top:.4rem}

/* Pillar strip (Punkt 18) */
.pillars{border-top:1px solid var(--c-line-d);position:relative;z-index:2}
/* Der negative Aussenabstand des Rasters plus gleicher Innenabstand auf jedem
   Feld haelt Text und Trennlinien bei JEDER Spaltenzahl bündig — auch bei
   auto-fit. Feste nth-child-Kantenregeln koennen das nicht leisten und haben
   sich zwischen den Umbruechen gegenseitig ueberschrieben. */
.pillars__in{display:grid;grid-template-columns:repeat(5,1fr);
  margin-inline:calc(var(--colpad) * -1)}
.pillar{
  padding-block:clamp(1.5rem,2.6vw,2.1rem);
  padding-inline:var(--colpad);
  border-right:1px solid var(--c-line-d);
  position:relative;overflow:hidden;
  transition:background-color var(--d-base) var(--e-out);
}
.pillar:last-child{border-right:0}
.pillar::before{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--c-gold);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform var(--d-slow) var(--e-expo);
}
.pillar:hover{background:rgba(255,255,255,.035)}
.pillar:hover::before{transform:scaleX(1)}
.pillar b{
  display:block;font-size:var(--t-xs);font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;margin-bottom:.5rem;
}
.pillar > span{display:block;font-size:var(--t-xs);color:var(--c-on-dark-3);line-height:1.45;text-wrap:pretty}


/* Spaltengruppen mit Trennlinien: äußere Kanten bündig zum Raster halten,
   damit die erste Spalte mit Überschrift und Logo fluchtet. */
.stats > .stat:first-child,
.steps > .step:first-of-type{padding-left:0}
.stats > .stat:last-child,
.steps > .step:last-of-type{padding-right:0}

/* — Marquee — */
.marq{
  border-block:1px solid var(--c-line);
  overflow:hidden;padding-block:1.05rem;
  background:var(--c-ground);
  --marq-dur:46s;
}
.marq__t{display:flex;width:max-content;animation:marq var(--marq-dur) linear infinite}
.marq:hover .marq__t{animation-play-state:paused}
.marq__g{display:flex;align-items:center;flex:none}
.marq__i{
  display:flex;align-items:center;gap:1.5rem;
  padding-inline:1.5rem;
  font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.15em;text-transform:uppercase;
  color:var(--c-ink-3);white-space:nowrap;
}
.marq__i::after{content:'';width:4px;height:4px;background:var(--c-gold);flex:none}
@keyframes marq{ to{ transform:translateX(-50%) } }

/* — Intro / stats — */
.intro__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter)}
.intro__t{grid-column:1/7}
.intro__b{grid-column:8/13}
.intro__quote{
  margin-top:clamp(2.2rem,4vw,3.2rem);
  padding-top:clamp(1.6rem,3vw,2.2rem);
  border-top:1px solid var(--c-line);
  font-size:var(--t-h3);font-weight:500;letter-spacing:var(--ls-h3);line-height:1.3;
  max-width:24ch;
}
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--c-line);
  margin-top:var(--s-sec-sm);
}
.stat{padding-block:clamp(1.6rem,3vw,2.4rem);padding-inline:var(--colpad);border-right:1px solid var(--c-line)}
.stat:last-child{border-right:0}
.stat b{
  display:block;font-size:clamp(2rem,3.2vw,3.1rem);font-weight:600;
  letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums;
}
.stat b i{font-style:normal;color:var(--c-gold)}
.stat > span{display:block;margin-top:.75rem;font-size:var(--t-xs);color:var(--c-ink-3);line-height:1.45;max-width:22ch}

/* — Services: hairline rows with hover image — */
.svc{position:relative;margin-top:clamp(2.5rem,5vw,4rem)}
.svc__list{border-top:1px solid var(--c-line)}
.sec--dark .svc__list{border-top-color:var(--c-line-d)}
.svc__row{
  position:relative;display:grid;
  grid-template-columns:74px minmax(0,1fr) minmax(0,1.15fr) 40px;
  align-items:center;gap:clamp(1rem,2.5vw,2.4rem);
  padding-block:clamp(1.7rem,2.9vw,2.4rem);
  border-bottom:1px solid var(--c-line);
  transition:background-color var(--d-base) var(--e-out),
             padding-inline var(--d-base) var(--e-out),
             color var(--d-base) var(--e-out);
}
.sec--dark .svc__row{border-bottom-color:var(--c-line-d)}
.svc__row:hover{background:var(--c-ground-2);padding-inline:clamp(.6rem,1.6vw,1.4rem)}
.sec--dark .svc__row:hover{background:rgba(255,255,255,.04)}
.svc__n{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--c-gold);letter-spacing:.06em;align-self:start;padding-top:.4rem}
.svc__h{font-size:clamp(1.3rem,1.9vw,2rem);font-weight:550;letter-spacing:-.028em;line-height:1.14}
.svc__h em{display:block;font-family:var(--f-sans);font-style:normal;font-size:var(--t-xs);
  font-weight:450;letter-spacing:.02em;color:var(--c-ink-3);margin-top:.5rem}
.sec--dark .svc__h em{color:var(--c-on-dark-3)}
.svc__d{font-size:var(--t-sm);color:var(--c-ink-2);line-height:1.55;max-width:46ch}
.sec--dark .svc__d{color:var(--c-on-dark-2)}
.svc__ar{
  justify-self:end;width:40px;height:40px;border:1px solid var(--c-line-2);border-radius:50%;
  display:grid;place-content:center;flex:none;
  transition:background-color var(--d-base) var(--e-out),border-color var(--d-base) var(--e-out),
             color var(--d-base) var(--e-out),transform var(--d-base) var(--e-out);
}
.sec--dark .svc__ar{border-color:var(--c-line-d2)}
.svc__row:hover .svc__ar{background:var(--c-petrol);border-color:var(--c-petrol);color:#fff;transform:rotate(-45deg)}
.svc__row a::after{content:'';position:absolute;inset:0}

/* Floating hover preview (desktop only) */
.svc__peek{
  position:fixed;top:0;left:0;z-index:60;
  width:300px;aspect-ratio:4/3;overflow:hidden;pointer-events:none;
  opacity:0;transform:translate3d(0,0,0) translate(-50%,-50%) scale(.94);
  transition:opacity .3s var(--e-out),transform .45s var(--e-expo);
  will-change:transform;
  display:none;border:1px solid rgba(255,255,255,.14);
  box-shadow:0 30px 60px -24px rgba(12,31,33,.5);
}
@media (min-width:1100px) and (hover:hover){ .svc__peek{display:block} }
.svc__peek.is-on{opacity:1}
.svc__peek img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .3s var(--e-out);
}
.svc__peek img.is-on{opacity:1}

/* — Approach steps — */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:clamp(2.5rem,5vw,4rem);
  border-top:1px solid var(--c-line-d)}
.steps--3{grid-template-columns:repeat(3,1fr)}
/* Fuenf Schritte: ab 1100px nebeneinander, darunter greifen die
   Zweispalten- bzw. Einspalten-Regeln weiter unten. */
.steps--5{grid-template-columns:repeat(5,1fr)}
@media (max-width:1299px){ .steps--5 .step p{font-size:var(--t-xs)} }
.step{
  padding-block:clamp(1.7rem,3vw,2.5rem) clamp(2rem,4vw,3rem);
  padding-inline:var(--colpad);
  border-right:1px solid var(--c-line-d);position:relative;
}
.step:last-of-type{border-right:0}
.step::before{
  content:'';position:absolute;top:-1px;left:0;height:1px;width:100%;background:var(--c-gold);
  transform:scaleX(0);transform-origin:0 50%;
}
.is-in .step::before{
  animation:draw-x .9s var(--e-cubic) forwards;
  animation-delay:calc(var(--i,0)*.14s);
}
@keyframes draw-x{ to{ transform:scaleX(1) } }
.step__n{font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.14em;color:var(--c-gold);display:block;margin-bottom:1.1rem}
.step h3{font-size:var(--t-h4);font-weight:600;letter-spacing:.02em;text-transform:uppercase;margin-bottom:.85rem}
.step p{font-size:var(--t-sm);color:var(--c-on-dark-2);line-height:1.55}

/* — Positioning mapping (Punkt 18) — */
.posit{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter);align-items:start}
.posit__t{grid-column:1/6;position:sticky;top:calc(var(--header-h) + 3rem)}
.posit__l{grid-column:7/13}
.posit__r{
  display:grid;grid-template-columns:minmax(0,.85fr) 34px minmax(0,1fr);
  align-items:center;gap:1rem;
  padding-block:clamp(1.25rem,2.2vw,1.7rem);
  border-bottom:1px solid var(--c-line);
}
.posit__r:first-child{border-top:1px solid var(--c-line)}
.sec--dark .posit__r{border-bottom-color:var(--c-line-d)}
.sec--dark .posit__r:first-child{border-top-color:var(--c-line-d)}
.posit__k{font-size:var(--t-h4);font-weight:600;letter-spacing:.055em;text-transform:uppercase}
.posit__v{font-size:var(--t-sm);color:var(--c-ink-2)}
.sec--dark .posit__v{color:var(--c-on-dark-2)}
.posit__ar{color:var(--c-gold);justify-self:center}

/* — Cards — */
.cards{display:grid;gap:var(--gutter);margin-top:clamp(2.5rem,5vw,4rem)}
.cards--3{grid-template-columns:repeat(3,1fr)}
.cards--2{grid-template-columns:repeat(2,1fr)}
.card{
  display:flex;flex-direction:column;
  background:var(--c-ground);border:1px solid var(--c-line);
  padding:clamp(1.5rem,2.4vw,2.1rem);
  position:relative;overflow:hidden;
  transition:border-color var(--d-base) var(--e-out),transform var(--d-base) var(--e-out);
}
.sec--tint .card{background:var(--c-ground)}
.card:hover{border-color:var(--c-line-2);transform:translateY(-3px)}
.card__n{font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.14em;color:var(--c-gold);margin-bottom:1.15rem;display:block}
.card h3{font-size:var(--t-h4);margin-bottom:.75rem;letter-spacing:-.02em}
/* Nebeneinander stehende Karten: Platz fuer zwei Zeilen reservieren, damit der
   Fliesstext in allen Karten auf derselben Hoehe beginnt. */
@media (min-width:720px){
  .cards--3 .card h3,.cards--2 .card h3{min-height:2.1em}
}
.card p{font-size:var(--t-sm);color:var(--c-ink-2);line-height:1.55}
.card__ft{margin-top:auto;padding-top:1.5rem}

.card--img{padding:0}
.card--img .card__fig{aspect-ratio:3/2;overflow:hidden;position:relative}
.card--img .card__fig img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--e-expo),filter .6s var(--e-out);
}
.card--img:hover .card__fig img{transform:scale(1.05)}
/* .card__bd muss selbst Flex-Container sein und den Rest der Karte fuellen,
   sonst greift margin-top:auto der Fusszeile nicht und die Fusszeilen
   nebeneinander stehender Karten stehen unterschiedlich hoch. */
.card--img .card__bd{padding:clamp(1.4rem,2.2vw,1.9rem);display:flex;flex-direction:column;flex:1}

/* — CTA band — */
.cta{position:relative;overflow:hidden;background:var(--c-dark);color:var(--c-on-dark)}
.cta__bg{position:absolute;inset:0;opacity:.5}
.cta__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.cta::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,var(--c-dark) 12%,rgba(12,31,33,.86) 52%,rgba(12,31,33,.6) 100%);
}
.cta__in{position:relative;z-index:2;text-align:center;display:grid;justify-items:center;gap:1.6rem}
.cta__in h2{max-width:16ch}
.cta__in .lead{max-width:52ch;color:var(--c-on-dark-2)}
.cta__acts{display:flex;flex-wrap:wrap;gap:.85rem;justify-content:center;margin-top:.6rem}
.cta__risk{font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.13em;
  text-transform:uppercase;color:var(--c-on-dark-3);margin-top:.5rem}

/* 8. ─────────────────────────────────────────────── FORMS ── */
.form{display:grid;gap:1.15rem}
.field{display:grid;gap:.6rem}
.field label{font-size:var(--t-xs);font-weight:550;letter-spacing:.01em;color:var(--c-ink)}
.field label span{color:var(--c-ink-3);font-weight:400}
.field .req{color:var(--c-petrol)}
.field input,.field select,.field textarea{
  width:100%;padding:.92rem 1rem;
  background:var(--c-ground);
  border:1px solid var(--c-line-2);border-radius:var(--radius);
  font-size:var(--t-sm);
  transition:border-color var(--d-fast) var(--e-out),background-color var(--d-fast) var(--e-out),
             box-shadow var(--d-fast) var(--e-out);
}
.field textarea{resize:vertical;min-height:132px;line-height:1.55}
.field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%237B8285' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.6rem}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--c-petrol);background:#fff;
  box-shadow:0 0 0 3px rgba(29,111,120,.11);
}
.field input:user-invalid,.field textarea:user-invalid{border-color:#B4453C}
.field__err{font-size:var(--t-xs);color:#B4453C;display:none}
.field input:user-invalid ~ .field__err,.field textarea:user-invalid ~ .field__err{display:block}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem}
.form__note{font-size:var(--t-xs);color:var(--c-ink-3);line-height:1.5}
.form__note a{color:var(--c-ink);text-decoration:underline;text-underline-offset:2px}
.form .btn{justify-self:start;margin-top:.3rem}

/* Contact aside */
.ct{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter);align-items:start}
.ct__form{grid-column:1/7}
.ct__side{grid-column:8/13}
.ct__block{padding-block:1.5rem;border-top:1px solid var(--c-line)}
.ct__block:first-child{padding-top:0;border-top:0}
.ct__block dt{font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.14em;
  text-transform:uppercase;color:var(--c-ink-3);margin-bottom:.7rem}
.ct__block dd{margin:0;font-size:var(--t-sm);line-height:1.65}
.ct__block a{border-bottom:1px solid var(--c-line-2);transition:border-color var(--d-fast) var(--e-out)}
/* Zeilen mit unterstrichenen Links brauchen echten Abstand statt <br>:
   sonst steht die Unterstreichung fast auf der naechsten Zeile. */
.ct__rows{display:grid;gap:.7rem}
.ct__rows > span{display:flex;flex-wrap:wrap;gap:.15rem .75rem;align-items:baseline}
.ct__rows i{font-style:normal;color:var(--c-ink-3);flex:none;min-width:66px}
.ct__muted{color:var(--c-ink-3)}
.ct__note{display:block;margin-top:.85rem;color:var(--c-ink-2)}
.ct__block a:hover{border-bottom-color:var(--c-petrol)}
.ct__big{font-size:var(--t-h3);font-weight:550;letter-spacing:-.028em;line-height:1.22;display:block;margin-bottom:.2rem;text-wrap:balance}

/* — FAQ / accordion — */
.acc{border-top:1px solid var(--c-line);margin-top:clamp(2rem,4vw,3rem)}
.acc__i{border-bottom:1px solid var(--c-line)}
.acc__b{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.35rem 0;background:none;border:0;cursor:pointer;text-align:left;
  font-size:var(--t-h4);font-weight:550;letter-spacing:-.022em;
  transition:color var(--d-fast) var(--e-out);
}
.acc__b:hover{color:var(--c-petrol)}
.acc__ic{position:relative;width:14px;height:14px;flex:none}
.acc__ic::before,.acc__ic::after{
  content:'';position:absolute;background:currentColor;
  transition:transform var(--d-base) var(--e-out),opacity var(--d-fast) var(--e-out);
}
.acc__ic::before{top:6.25px;left:0;width:14px;height:1.5px}
.acc__ic::after{top:0;left:6.25px;width:1.5px;height:14px}
.acc__b[aria-expanded="true"] .acc__ic::after{transform:rotate(90deg);opacity:0}
.acc__p{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows var(--d-base) var(--e-out);
}
.acc__p[data-open="true"]{grid-template-rows:1fr}
.acc__p > div{overflow:hidden}
.acc__p p{padding-bottom:1.45rem;font-size:var(--t-sm);color:var(--c-ink-2);max-width:62ch;line-height:1.6}

/* 10. ─────────────────────────────────────────────── FOOTER ── */
.ft{background:var(--c-dark);color:var(--c-on-dark);padding-top:clamp(3.5rem,7vw,6rem)}
.ft__top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter);
  padding-bottom:clamp(2.5rem,5vw,4rem);border-bottom:1px solid var(--c-line-d)}
.ft__brand{grid-column:1/5}
.ft__claim{font-size:var(--t-h4);font-weight:500;letter-spacing:-.022em;margin:1.35rem 0 1.1rem;max-width:20ch}
.ft__col{grid-column:span 2}
.ft__col:nth-of-type(2){grid-column:6/8}
.ft__col:nth-of-type(3){grid-column:8/10}
.ft__col:nth-of-type(4){grid-column:10/13}
.ft__h{font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;
  color:var(--c-on-dark-3);margin-bottom:1.15rem}
.ft__col li{margin-bottom:.68rem}
.ft__col a,.ft__legal a{font-size:var(--t-sm);color:var(--c-on-dark-2);
  transition:color var(--d-fast) var(--e-out)}
.ft__col a:hover,.ft__legal a:hover{color:#fff}
.ft__legal{font-size:var(--t-xs);color:var(--c-on-dark-2);line-height:1.75}
.ft__legal b{color:var(--c-on-dark);font-weight:550}
.ft__bot{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between;
  padding-block:1.6rem}
.ft__bot p,.ft__bot a{font-size:var(--t-xs);color:var(--c-on-dark-3)}
.ft__bot nav{display:flex;flex-wrap:wrap;gap:1.5rem}
.ft__bot a:hover{color:#fff}

/* Mobile sticky CTA bar */
.mbar{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  display:grid;grid-template-columns:1fr 1fr;
  background:var(--c-dark);border-top:1px solid var(--c-line-d);
  transform:translateY(101%);
  transition:transform var(--d-base) var(--e-out);
}
.mbar.is-on{transform:translateY(0)}
@media (min-width:1100px){ .mbar{display:none} }
.mbar a{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  padding:1.02rem .5rem;font-size:var(--t-xs);font-weight:550;color:var(--c-on-dark);
}
.mbar a:first-child{border-right:1px solid var(--c-line-d)}
.mbar a:last-child{background:var(--c-petrol);color:#fff}

/* 11. ─────────────────────────────────────────────── MOTION ── */
/* Base states only when JS is present → no FOUC, no hidden content without JS */
.js .rv{opacity:0;transform:translate3d(0,22px,0)}
.js .rv.is-in{
  opacity:1;transform:none;
  transition:opacity .74s var(--e-expo) calc(var(--i,0)*80ms),
             transform .74s var(--e-expo) calc(var(--i,0)*80ms);
}
/* Line-masked text reveal */
.js .rv-t .line{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.js .rv-t .line > i{display:inline-block;font-style:inherit;transform:translateY(112%)}
.js .rv-t.is-in .line > i{
  transform:none;
  transition:transform .82s var(--e-expo) calc(var(--i,0)*88ms);
}
/* Clip-path image reveal + counter-scale */
.js .rv-img{clip-path:inset(0 0 100% 0)}
.js .rv-img > img,.js .rv-img > picture > img{transform:scale(1.07)}
.js .rv-img.is-in{
  clip-path:inset(0 0 0 0);
  transition:clip-path 1.15s var(--e-expo);
}
.js .rv-img.is-in > img,.js .rv-img.is-in > picture > img{
  transform:scale(1);
  transition:transform 1.5s var(--e-expo);
}
/* Scale-x line */
.js .rv-line{transform:scaleX(0);transform-origin:0 50%}
.js .rv-line.is-in{transform:scaleX(1);transition:transform 1s var(--e-cubic)}

/* Parallax — CSS scroll-driven where supported, else static */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference) and (min-width:900px){
    .px{animation:px linear both;animation-timeline:view();animation-range:cover}
    @keyframes px{ from{translate:0 -4.5%} to{translate:0 4.5%} }
    .px-slow{animation:pxs linear both;animation-timeline:view();animation-range:cover}
    @keyframes pxs{ from{translate:0 -2.5%} to{translate:0 2.5%} }
  }
}
/* Scroll progress bar */
.prog{position:fixed;top:0;left:0;right:0;height:2px;z-index:120;pointer-events:none}
.prog i{display:block;height:100%;background:var(--c-gold);transform:scaleX(0);transform-origin:0 50%}
@supports (animation-timeline:scroll()){
  .prog i{animation:progx linear;animation-timeline:scroll(root block)}
  @keyframes progx{ to{ transform:scaleX(1) } }
}

@media (prefers-reduced-motion:reduce){
  .js .rv,.js .rv-t .line > i,.js .rv-img,.js .rv-img > img,.js .rv-line{
    opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important;
  }
  .marq__t{animation:none}
  .step::before{transform:scaleX(1)}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}

/* 12. ────────────────────────────────────────── RESPONSIVE ── */
@media (max-width:1099px){
  :root{--header-h:72px}
  .hero__in{grid-template-columns:1fr}
  .hero__copy{grid-column:1/-1;padding-bottom:clamp(2.5rem,5vw,3.5rem)}
  .hero__media{grid-column:1/-1;max-width:520px}
  .hero__fig{aspect-ratio:5/4}
  .pillars__in{grid-template-columns:repeat(3,1fr)}
  .pillar:nth-child(3){border-right:0}
  /* Innenabstand zuerst vollstaendig zuruecksetzen, dann nur die Aussenkanten
     nullen. Ohne das Zuruecksetzen wirken Regeln eines breiteren Umbruchs in
     den schmaleren hinein und einzelne Spalten stehen zu weit links. */
  .pillar:nth-child(-n+3){border-bottom:1px solid var(--c-line-d)}
  .sec-head__t,.sec-head__x{grid-column:1/-1}
  .sec-head__x{padding-bottom:0}
  .intro__t,.intro__b{grid-column:1/-1}
  .posit__t,.posit__l{grid-column:1/-1;position:static}
  .ct__form,.ct__side{grid-column:1/-1}
  .ft__brand{grid-column:1/-1}
  .ft__col:nth-of-type(2){grid-column:1/5}
  .ft__col:nth-of-type(3){grid-column:5/9}
  .ft__col:nth-of-type(4){grid-column:9/13}
  body{padding-bottom:0}
}
@media (max-width:899px){
  .steps,.steps--5{grid-template-columns:repeat(2,1fr);border-top:0}
  .step{border-top:1px solid var(--c-line-d)}
  .step:nth-child(2){border-right:0}
  .steps > .step:nth-child(n){padding-inline:var(--colpad)}
  .steps > .step:nth-child(odd){padding-left:0}
  .steps > .step:nth-child(even){padding-right:0}
  .steps > .step:last-of-type{padding-right:0}
  .cards--3{grid-template-columns:repeat(2,1fr)}
  .cards--3 .card:last-child{grid-column:1/-1}
  .svc__row{grid-template-columns:56px minmax(0,1fr) 40px;row-gap:.85rem}
  .svc__n{grid-row:1;padding-top:.15rem}
  .svc__h{grid-column:2}
  .svc__ar{grid-column:3;grid-row:1;align-self:start}
  .svc__d{grid-column:2/4}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-right:0}
  .stats > .stat:nth-child(n){padding-inline:var(--colpad)}
  .stats > .stat:nth-child(odd){padding-left:0}
  .stats > .stat:nth-child(even){padding-right:0}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--c-line)}
}
@media (max-width:719px){
  :root{--header-h:64px}
  .hero__fig{aspect-ratio:4/5;max-width:340px}
  .pillars__in{grid-template-columns:repeat(2,1fr)}
  /* Trennlinien ebenfalls erst zuruecksetzen: sonst wirkt die 3-Spalten-Regel
     (Element 3 ohne Linie) in den 2-Spalten-Umbruch hinein. */
  .pillar:nth-child(n){border-right:1px solid var(--c-line-d)}
  .pillar:nth-child(2n){border-right:0}
  .pillar:last-child{border-right:0}
  .pillar:not(:nth-last-child(-n+1)){border-bottom:1px solid var(--c-line-d)}
  .pillar:nth-child(5){grid-column:1/-1}
  .steps,.steps--5{grid-template-columns:1fr}
  .step{border-right:0;padding-inline:0}
  .cards--3,.cards--2{grid-template-columns:1fr}
  .cards--3 .card:last-child{grid-column:auto}
  .form__row{grid-template-columns:1fr}
  .posit__r{grid-template-columns:1fr;gap:.35rem}
  .posit__ar{display:none}
  .ft__top{gap:2.25rem var(--gutter)}
  .ft__col:nth-of-type(2),.ft__col:nth-of-type(3){grid-column:span 6}
  .ft__col a{overflow-wrap:break-word}
  .ft__col:nth-of-type(4){grid-column:1/-1}
  .ft__bot{flex-direction:column;align-items:flex-start;gap:1rem}
  .cta__in{text-align:left;justify-items:start}
  .cta__acts{justify-content:flex-start}
  .cta__acts .btn{width:100%}
  body{padding-bottom:56px}
  .hero__stamp{padding:.72rem .85rem}
}

/* Sehr schmale Geräte (≤400px): Footer-Spalten voll ausklappen, damit lange
   Leistungsnamen wie „Unternehmensberatung" nicht seitlich herauslaufen. */
@media (max-width:400px){
  .ft__col:nth-of-type(2),.ft__col:nth-of-type(3){grid-column:1/-1}
  .marq__i{padding-inline:1rem;gap:1rem}
}

/* Schwerpunkt-/Themenlisten: zweispaltig mit Haarlinien.
   Ersetzt die früheren Inline-Styles und gibt dem Text mehr Luft zur Linie. */
.speclist{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  column-gap:clamp(1.5rem,3vw,3rem);
  margin-top:1.35rem;border-top:1px solid var(--c-line);
}
.speclist li{
  border-bottom:1px solid var(--c-line);
  padding:1.15rem 0;
  font-size:var(--t-sm);color:var(--c-ink-2);line-height:1.5;
}
.sec--dark .speclist,.sec--dark .speclist li{border-color:var(--c-line-d)}
.sec--dark .speclist li{color:var(--c-on-dark-2)}



/* Grossformatiges Lagerbild in der Sortiment-Sektion. Bewusst ueber die volle
   Rasterbreite statt als halbe Spalte — die Groesse ist hier die Aussage. */
.shop__fig{
  margin-top:clamp(2.5rem,5vw,4rem);
  aspect-ratio:2/1;overflow:hidden;
  border:1px solid var(--c-line);
}
.sec--dark .shop__fig{border-color:var(--c-line-d)}
.shop__fig img{width:100%;height:100%;object-fit:cover}
@media (max-width:899px){ .shop__fig{aspect-ratio:16/9} }
@media (max-width:599px){ .shop__fig{aspect-ratio:4/3} }

/* ── Rechtstexte (Impressum, Datenschutz) ────────────────────────────────
   Bewusst schlicht: hier zaehlt Lesbarkeit, nicht Gestaltung. Eine Spalte,
   begrenzte Zeilenlaenge, klare Abstufung der Ueberschriften. */
.legal{max-width:78ch}
.legal__h2{
  font-size:var(--t-h3);font-weight:600;letter-spacing:-.015em;line-height:1.2;
  margin-top:clamp(2.4rem,4.5vw,3.4rem);padding-top:clamp(1.4rem,2.5vw,2rem);
  border-top:1px solid var(--c-line);
}
.legal > .legal__h2:first-child{margin-top:0;padding-top:0;border-top:0}
.legal__h3{
  font-size:var(--t-h4);font-weight:600;letter-spacing:.01em;
  margin-top:clamp(1.6rem,3vw,2.2rem);
}
.legal__p{
  font-size:var(--t-sm);line-height:1.65;color:var(--c-ink-2);
  margin-top:.9rem;
}
.legal__h2 + .legal__p,.legal__h3 + .legal__p{margin-top:1.05rem}
/* Adressen und Kontaktbloecke behalten ihre Zeilenumbrueche und stehen
   optisch etwas ab, damit sie als Datenblock lesbar bleiben. */
.legal__p--lines{
  color:var(--c-ink);border-left:2px solid var(--c-gold);
  padding-left:1.1rem;line-height:1.7;
}
.legal a{color:var(--c-petrol);text-underline-offset:.2em}
/* 14. ─────────────────────────────── COOKIE-HINWEIS ── */
/* Bewusst kein Overlay ueber der Seite: Es gibt nichts zu blockieren, und ein
   Balken, der den Inhalt verdeckt, ist genau die Sorte Banner, die niemand
   lesen will. Karte unten links, ueber allem ausser dem Menue (z-index 100)
   und der mobilen Aktionsleiste. */
.cnot{
  position:fixed;right:var(--gutter);bottom:var(--gutter);z-index:95;
  width:min(31rem,calc(100vw - 2 * var(--gutter)));
  opacity:0;transform:translateY(12px);
  transition:opacity var(--d-base) var(--e-out), transform var(--d-base) var(--e-expo);
}
.cnot.is-in{opacity:1;transform:none}
.cnot__box{
  background:var(--c-dark);color:var(--c-on-dark);
  border:1px solid var(--c-line-d);
  padding:clamp(1.25rem,2.5vw,1.6rem);
  box-shadow:0 18px 50px rgba(12,31,33,.28);
}
.cnot__h{
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--c-gold);margin:0;
}
.cnot__t{
  font-size:var(--t-sm);line-height:1.6;color:var(--c-on-dark-2);
  margin:.7rem 0 0;
}
.cnot__act{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.1rem}
/* Beide Schaltflaechen sind gleich gross und gleich auffaellig. Ein
   weggeblasstes "Ablehnen" neben einem leuchtenden "Akzeptieren" waere genau
   das Muster, das Aufsichtsbehoerden beanstanden. */
.cnot__act .btn{flex:1 1 auto;justify-content:center;min-width:9.5rem}
.cnot__l{margin:.9rem 0 0;font-size:var(--t-xs)}
.cnot__l a{color:var(--c-on-dark-2);text-underline-offset:.2em}
.cnot__l a:hover,.cnot__l a:focus-visible{color:var(--c-on-dark)}

@media (max-width:719px){
  /* Ueber der mobilen Aktionsleiste stehen, nicht dahinter. */
  .cnot{left:.75rem;right:.75rem;bottom:calc(.75rem + 56px);width:auto}
  .cnot__act .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  .cnot{transition:none;transform:none}
}

/* Hinweis auf der englischen Fassung: der Rechtstext bleibt deutsch. */
.legal__note{
  max-width:78ch;margin-bottom:clamp(1.8rem,3vw,2.6rem);
  padding:.85rem 1.1rem;border-left:2px solid var(--c-petrol);
  background:var(--c-ground-2);
  font-size:var(--t-xs,.82rem);line-height:1.55;color:var(--c-ink-2);
}
@media (max-width:719px){ .legal,.legal__note{max-width:none} }

/* Kopfbereich der Rechtstexte: etwas kompakter als die Marketingseiten */
.sec--head{padding-bottom:clamp(1.5rem,3vw,2.5rem)}

/* ── Markenleiste im Sortiment ───────────────────────────────────────────
   Zwei Zustaende in einer Komponente: solange keine freigegebene Logodatei
   unter assets/img/brands/ liegt, zeigt jede Zelle den Markennamen
   typografisch (eos_brand_mark() in functions.php). Beide Zustaende sind
   gleich hoch, damit die Leiste nicht springt, wenn Logos nachgereicht
   werden. */
.brands{border-top:1px solid var(--c-line);padding-top:1.6rem}
.brands__h{
  font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.16em;
  text-transform:uppercase;color:var(--c-ink-3);
}
/* Flex statt Grid: die letzte Zeile soll die Breite ausfuellen, statt eine
   Luecke zu lassen — die Zahl der Marken ist selten durch die Spaltenzahl
   teilbar. */
.brands__grid{
  list-style:none;margin:1.35rem 0 0;padding:0;
  display:flex;flex-wrap:wrap;
  border-top:1px solid var(--c-line);border-left:1px solid var(--c-line);
}
.brand{
  flex:1 1 178px;
  border-right:1px solid var(--c-line);border-bottom:1px solid var(--c-line);
  min-height:112px;display:grid;place-items:center;padding:1.35rem 1.15rem;
  overflow:hidden; /* schneidet den leeren Rand stark gerandeter Logodateien ab */
  transition:background var(--d-base) var(--e-out);
}
.brand:hover{background:rgba(29,111,120,.045)}
.brand__word{
  font-family:var(--f-mono);font-size:var(--t-sm);font-weight:500;
  letter-spacing:.06em;color:var(--c-ink-2);text-align:center;
  transition:color var(--d-base) var(--e-out);
}
.brand:hover .brand__word{color:var(--c-petrol)}
/* Logos werden entsaettigt ausgeliefert und erst beim Hover farbig — das
   haelt die Leiste ruhig, obwohl die Herstellerlogos untereinander sehr
   unterschiedlich bunt sind. */
/* Die konkrete Hoehe setzt eos_brand_mark() je Logo als Inline-Style — sie
   wird aus dem Seitenverhaeltnis und dem gemessenen Fuellgrad auf gleiche
   optische Flaeche gerechnet. Hier stehen nur die Sicherheitsgrenzen.

   Logos werden in Originalfarbe gezeigt (Kundenwunsch). Damit die Leiste
   trotz sehr unterschiedlich bunter Herstellerlogos ruhig bleibt, sind sie
   im Grundzustand minimal zurueckgenommen und werden beim Hover voll
   praesent. Fuer komplett unveraenderte Darstellung "opacity:1" setzen. */
.brand__logo{
  max-width:100%;display:block;object-fit:contain;
  opacity:.92;
  transition:opacity var(--d-base) var(--e-out),transform var(--d-base) var(--e-out);
}
.brand:hover .brand__logo{opacity:1;transform:scale(1.04)}
.brands__note{
  margin-top:1.1rem;font-size:var(--t-xs);color:var(--c-ink-3);
  line-height:1.5;max-width:78ch;
}
@media (max-width:599px){
  .brand{flex-basis:40%;min-height:88px}
}

/* ==========================================================================
   INTERAKTIVE MODULE
   A) .nexus — Verbindungsmatrix der fünf Geschäftsbereiche
   B) .tc    — Handelskorridor Deutschland–EU mit Destatis-Zahlen
   Beide: Canvas nur als Dekorschicht, alle Inhalte stehen im DOM.
   ========================================================================== */

/* ── A) Verbindungsmatrix ────────────────────────────────────────────── */
.nexus{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,5rem);
  align-items:center;
  margin-top:clamp(2.5rem,5vw,4rem);
}
.nexus__stage{
  position:relative;width:100%;max-width:560px;justify-self:center;
  aspect-ratio:1;
}
.nexus__cv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.nexus__core{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  text-align:center;pointer-events:none;
  padding:1.1rem 1.4rem;border-radius:50%;
  background:radial-gradient(closest-side,var(--c-dark) 58%,rgba(12,31,33,0) 100%);
  font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.16em;
  text-transform:uppercase;color:var(--c-on-dark-3);
}
.nexus__core b{
  display:block;font-family:var(--f-sans);font-size:clamp(1.1rem,1.6vw,1.5rem);
  font-weight:600;letter-spacing:-.02em;text-transform:none;color:var(--c-on-dark);
  margin-bottom:.3rem;
}
.nexus__node{
  position:absolute;translate:-50% -50%;
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.62rem 1rem;
  background:var(--c-dark-2);
  border:1px solid var(--c-line-d2);border-radius:100px;
  font-family:var(--f-mono);font-size:var(--t-label);font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;color:var(--c-on-dark);
  cursor:pointer;white-space:nowrap;
  transition:background-color var(--d-base) var(--e-out),border-color var(--d-base) var(--e-out),
             color var(--d-base) var(--e-out),scale var(--d-base) var(--e-expo);
}
.nexus__node::before{
  content:'';width:6px;height:6px;border-radius:50%;
  background:var(--c-on-dark-3);flex:none;
  transition:background-color var(--d-base) var(--e-out),box-shadow var(--d-base) var(--e-out);
}
.nexus__node:hover,.nexus__node:focus-visible{border-color:var(--c-gold);scale:1.04}
.nexus__node[aria-pressed="true"]{
  background:var(--c-gold);border-color:var(--c-gold);color:#14201B;scale:1.05;
}
.nexus__node[aria-pressed="true"]::before{background:#14201B}
.nexus__node.is-linked{border-color:var(--c-petrol-2)}
.nexus__node.is-linked::before{background:var(--c-petrol-2);box-shadow:0 0 10px var(--c-petrol-2)}

.nexus__panel{min-height:clamp(300px,34vw,360px);display:flex;flex-direction:column}
.nexus__hint{font-size:var(--t-sm);color:var(--c-on-dark-2);line-height:1.6;max-width:38ch}
.nexus__title{
  font-size:var(--t-h3);font-weight:600;letter-spacing:var(--ls-h3);
  margin-bottom:.4rem;
}
.nexus__sub{font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.14em;
  text-transform:uppercase;color:var(--c-gold);margin-bottom:1.4rem;display:block}
.nexus__pairs{border-top:1px solid var(--c-line-d)}
.nexus__pair{
  display:grid;grid-template-columns:auto 1fr;gap:.2rem 1rem;align-items:baseline;
  width:100%;text-align:left;background:none;border:0;
  border-bottom:1px solid var(--c-line-d);
  padding:1rem var(--colpad) 1rem 0;
  cursor:pointer;color:inherit;
  transition:background-color var(--d-fast) var(--e-out),padding-left var(--d-base) var(--e-out);
}
.nexus__pair:hover,.nexus__pair:focus-visible{background:rgba(255,255,255,.045);padding-left:.85rem}
.nexus__pair b{
  font-family:var(--f-mono);font-size:var(--t-label);font-weight:500;letter-spacing:.11em;
  text-transform:uppercase;color:var(--c-petrol-2);grid-column:1/-1;
}
.nexus__pair span{grid-column:1/-1;font-size:var(--t-sm);color:var(--c-on-dark-2);line-height:1.5}
.nexus__reset{margin-top:1.5rem;align-self:flex-start}

/* Ohne JS: Kanten-Canvas und Knöpfe verbergen, Klartextliste zeigen */
.nexus__fallback{display:grid;gap:.1rem}
.js .nexus__fallback{display:none}
html:not(.js) .nexus__stage,html:not(.js) .nexus__reset{display:none}

/* ── B) Handelskorridor ──────────────────────────────────────────────── */
.tc{margin-top:clamp(2.5rem,5vw,4rem)}
.tc__viz{position:relative;width:100%;aspect-ratio:24/7}
.tc__cv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.tc__node{
  position:absolute;translate:-50% -50%;
  display:grid;justify-items:center;gap:.45rem;
  background:none;border:0;color:inherit;padding:.4rem;
}
.tc__node i{
  width:11px;height:11px;border-radius:50%;
  background:var(--c-gold);display:block;
  box-shadow:0 0 0 5px rgba(195,160,99,.10);
}
.tc__node b{
  font-family:var(--f-mono);font-size:var(--t-label);font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--c-on-dark);white-space:nowrap;
}
.tc__node span{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;
  color:var(--c-on-dark-3);white-space:nowrap;
}

.tc__body{
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(2rem,5vw,5rem);
  padding-top:clamp(2rem,4vw,3.25rem);
  border-top:1px solid var(--c-line-d);
}
.tc__side,.tc__out{display:flex;flex-direction:column;gap:clamp(1.35rem,2.2vw,1.9rem)}
.tc__switch{display:inline-flex;border:1px solid var(--c-line-d2);border-radius:100px;padding:3px;align-self:flex-start}
.tc__switch button{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.55rem 1.05rem;background:none;border:0;border-radius:100px;cursor:pointer;
  font-family:var(--f-mono);font-size:var(--t-label);font-weight:500;letter-spacing:.11em;
  text-transform:uppercase;color:var(--c-on-dark-3);
  transition:background-color var(--d-base) var(--e-out),color var(--d-base) var(--e-out);
}
.tc__switch button[aria-selected="true"]{background:var(--c-petrol);color:#fff}
.tc__switch button:hover{color:var(--c-on-dark)}

.tc__figure{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.tc__big{
  font-size:clamp(2.4rem,4.4vw,3.9rem);font-weight:600;letter-spacing:-.038em;
  line-height:1;font-variant-numeric:tabular-nums;
}
.tc__unit{font-size:var(--t-h4);font-weight:500;color:var(--c-on-dark-2)}
.tc__delta{
  font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.1em;
  color:var(--c-gold);border:1px solid rgba(195,160,99,.42);
  padding:.42rem .7rem;border-radius:2px;white-space:nowrap;
  flex-basis:100%;margin-top:.85rem;
}
@media (max-width:899px){ .tc__delta{white-space:normal} }
.tc__cap{font-size:var(--t-sm);color:var(--c-on-dark-2);line-height:1.55;max-width:40ch}

.tc__bars{display:grid;gap:.85rem}
.tc__bar b{
  display:flex;justify-content:space-between;gap:1rem;
  font-size:var(--t-xs);font-weight:450;color:var(--c-on-dark-2);margin-bottom:.42rem;
}
.tc__bar b i{font-style:normal;font-family:var(--f-mono);color:var(--c-on-dark);font-variant-numeric:tabular-nums;flex:none}
.tc__track{height:3px;background:var(--c-line-d);position:relative;overflow:hidden}
.tc__fill{
  position:absolute;inset:0 auto 0 0;width:var(--w,0%);
  background:var(--c-petrol-2);
  transform-origin:0 50%;
  transition:width .9s var(--e-expo);
}
.tc__bar:nth-child(1) .tc__fill{background:var(--c-gold)}

.tc__meta{display:grid;grid-template-columns:minmax(0,1fr);gap:1.35rem;padding-top:1.5rem;border-top:1px solid var(--c-line-d)}
.tc__meta div b{display:block;font-size:var(--t-h4);font-weight:600;letter-spacing:-.02em;margin-bottom:.3rem}
.tc__meta div span{font-size:var(--t-xs);color:var(--c-on-dark-3);line-height:1.45;display:block}
/* Quellen-/Standangaben. Standardfarbe fuer helle Sektionen; in dunklen
   Sektionen (.sec--dark) wird auf die hellen Token umgeschaltet. */
.tc__src{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;
  color:var(--c-ink-3);line-height:1.6;padding-top:1.2rem;
  border-top:1px solid var(--c-line);
}
.sec--dark .tc__src{color:var(--c-on-dark-3);border-top-color:var(--c-line-d)}

/* ── Scroll-Fortschritt in Prozess-Sektionen ─────────────────────────── */
.steps{position:relative}
.steps__rail{position:absolute;top:-1px;left:0;right:0;height:1px;background:var(--c-gold);
  transform:scaleX(0);transform-origin:0 50%}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .steps__rail{animation:railfill linear both;animation-timeline:view();animation-range:entry 20% cover 60%}
    @keyframes railfill{ from{transform:scaleX(0)} to{transform:scaleX(1)} }
    .steps.has-rail > .step::before{display:none}
  }
}

/* ── Responsiv ───────────────────────────────────────────────────────── */
@media (max-width:1099px){
  .nexus{grid-template-columns:1fr;gap:clamp(2rem,5vw,3rem)}
  .tc__body{grid-template-columns:minmax(0,1fr);gap:clamp(1.75rem,4vw,2.5rem)}
  .nexus__panel{min-height:0}
  .tc__viz{aspect-ratio:16/7}
}
@media (max-width:719px){
  .tc__node b{font-size:10px;white-space:normal;text-align:center;justify-content:center}
  .tc__flag{width:15px}
  .nexus__stage{max-width:none}
  .nexus__node{padding:.5rem .72rem;font-size:10px;gap:.38rem}
  .nexus__node::before{width:5px;height:5px}
  .tc__viz{aspect-ratio:5/4}
  .tc__meta{grid-template-columns:1fr}
  .tc__node b{font-size:10px}
  .tc__node span{display:none}
}

/* Sehr schmale Geraete: Pfeilerleiste einspaltig — dort darf es gar keine
   senkrechten Trennlinien geben, sonst steht eine Linie neben einer Zeile,
   die die volle Breite einnimmt. */
@media (max-width:479px){
  /* Ohne Innenabstand muss auch der negative Aussenabstand weg, sonst rutscht
     die ganze Leiste um --colpad nach links aus der Flucht. */
  .pillars__in{grid-template-columns:1fr;margin-inline:0}
  .pillars__in > .pillar:nth-child(n){border-right:0;padding-inline:0}
  .pillar:nth-child(5){grid-column:auto}
}

/* ==========================================================================
   BILDMODULE
   ========================================================================== */

/* Bildstreifen — versetzte Höhen, gestaffelte Enthüllung */
.strip{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1rem,2.2vw,1.75rem);
  margin-top:clamp(2.5rem,5vw,4rem);
}
.strip figure{position:relative;overflow:hidden;border:1px solid var(--c-line)}
.sec--dark .strip figure{border-color:var(--c-line-d)}
.strip figure:nth-child(1){aspect-ratio:3/4}
.strip figure:nth-child(2){aspect-ratio:3/4;margin-top:clamp(1.5rem,3.5vw,3rem)}
.strip figure:nth-child(3){aspect-ratio:3/4}
.strip img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s var(--e-expo)}
.strip figure:hover img{transform:scale(1.045)}
.strip figcaption{
  position:absolute;left:0;bottom:0;right:0;
  padding:.85rem 1rem;
  background:linear-gradient(to top,rgba(12,31,33,.86),rgba(12,31,33,0));
  font-family:var(--f-mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(255,255,255,.86);
}

/* Vollflächiges Bildband als Trenner */
.band{
  position:relative;overflow:hidden;
  min-height:clamp(260px,38vw,520px);
  display:grid;align-items:center;
  background:var(--c-dark);
}
.band__bg{position:absolute;inset:-8% 0;z-index:0}
.band__bg img{width:100%;height:100%;object-fit:cover;opacity:.72}
.band::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(12,31,33,.92) 0%,rgba(12,31,33,.62) 45%,rgba(12,31,33,.35) 100%);
}
.band__in{position:relative;z-index:2;padding-block:clamp(3rem,6vw,5rem)}
.band__q{
  font-size:clamp(1.5rem,2.6vw + .5rem,2.9rem);font-weight:600;
  letter-spacing:var(--ls-h2);line-height:1.12;color:var(--c-on-dark);
  max-width:20ch;text-wrap:balance;
}
.band__m{
  margin-top:1.15rem;font-size:var(--t-sm);color:var(--c-on-dark-2);
  max-width:46ch;line-height:1.55;
}

/* Bildkarten für Insights */
.card--img .card__fig{position:relative}
.card--img .card__tag{
  position:absolute;left:0;top:0;
  padding:.5rem .8rem;background:var(--c-dark);color:var(--c-on-dark);
  font-family:var(--f-mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
}

/* Hochformat-Bild in der Kernaussage */
.posit__fig{
  margin-top:clamp(2rem,4vw,3rem);
  aspect-ratio:4/5;overflow:hidden;border:1px solid var(--c-line);
  max-width:340px;
}
.sec--dark .posit__fig{border-color:var(--c-line-d)}
.posit__fig img{width:100%;height:100%;object-fit:cover}

@media (max-width:899px){
  .strip{grid-template-columns:repeat(3,1fr);gap:clamp(.7rem,1.8vw,1.25rem)}
  .strip figcaption{font-size:9px;padding:.6rem .7rem}
}
@media (max-width:599px){
  .strip{grid-template-columns:1fr 1fr}
  .strip figure:nth-child(2){margin-top:0}
  .strip figure:nth-child(3){grid-column:1/-1;aspect-ratio:16/9}
  .posit__fig{max-width:none}
  .band__bg{inset:0}
}

/* Flaggen — nur dort, wo tatsaechlich ein Land gemeint ist (Korridor,
   Handelsrichtung, Maerkte). Bewusst NICHT im Sprachumschalter: Flaggen
   stehen fuer Laender, nicht fuer Sprachen. */
.flag{
  display:inline-block;width:1.35em;height:auto;aspect-ratio:3/2;
  border:1px solid rgba(255,255,255,.22);
  vertical-align:-.22em;flex:none;border-radius:1px;
  box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.sec:not(.sec--dark) .flag,.band .flag{border-color:rgba(29,32,34,.16)}
.flag--sm{width:1.05em}
.flag-pair{display:inline-flex;align-items:center;gap:.32rem}
.flag-pair svg:nth-child(2){margin-left:-.1rem}

/* Korridor-Knoten mit Landesflagge */
.tc__node b{display:inline-flex;align-items:center;gap:.45rem}
.tc__flag{width:19px;aspect-ratio:3/2;border:1px solid rgba(255,255,255,.24);flex:none;border-radius:1px}

/* Hero-Stempel */
.hero__stamp b{display:flex;align-items:center;gap:.4rem}
.hero__stamp .flag{width:1.1em}

/* Footer-Maerkte */
.ft__markets{display:flex;flex-wrap:wrap;gap:.55rem 1.1rem;margin-top:1.1rem}
.ft__markets span{display:inline-flex;align-items:center;gap:.42rem;
  font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.12em;
  text-transform:uppercase;color:var(--c-on-dark-2)}

/* Eingeloggte Redakteure sehen die WordPress-Adminleiste. Der fixierte Header
   muss darunter beginnen, sonst ueberlappen sich beide. */
body.admin-bar .hdr{top:32px}
body.admin-bar .drawer{top:32px}
@media screen and (max-width:782px){
  body.admin-bar .hdr{top:46px}
  body.admin-bar .drawer{top:46px}
}