*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --gold:#C68A5D;
  --gold-light:#E3B08A;
  --gold-bright:#F0C7A8;
  --gold-dim:#7A5B52;
  --teal:#17352A;
  --teal-light:#2F5B45;
  --teal-bright:#4CA47D;
  --emerald-accent:#38CC8D;
  /* Background family darkened ~15% (lightness) from the original
     #1B2D25/#22392F/#0B1B16 — hue/saturation character (forest-green,
     black-green) intentionally preserved, no blue/petrol shift. --dark3/
     --dark4 are left at their original values since they are used only as
     borders/contours (form fields, card outlines), not as fill colours,
     and this pass only targets background surfaces. */
  --dark:#17261F;
  --dark2:#1D3028;
  --dark3:#2A453A;
  --dark4:#335246;
  --dark-deep:#091713;
  --text:#EDE7DA;
  --text-dim:#9C9789;
  --cream:#F7F2E9;
  --cream-card:#EFE6D8;
  --ink:#22261F;
  /* Total reserved header footprint = floating nav-card top margin (14px)
     + card height (80px); kept in sync with .nav-inner's margin-top/height
     and their responsive overrides so page content never overlaps or gaps. */
  --nav-h:94px;
  /* Shared corner radius for every real content card site-wide (.core-card,
     .info-box, .partner-tile) so they read as one design family. Reduced
     at the ≤640px tier — see RESPONSIVE. Left accent stripes on these
     cards are native `border-left` (not a pseudo-element overlay), so they
     already taper into this radius automatically at the top/bottom
     corners — no separate handling needed. */
  --card-radius:18px;
}

html{scroll-behavior:smooth;background:var(--dark)}
/* Kept as the native fallback for scroll animations whenever Lenis isn't
   running (see assets/js/script.js), but must never animate for users
   who have asked the OS for reduced motion — the JS-side fallbacks now
   also force behavior:'auto' explicitly in that case, so this is a
   belt-and-suspenders CSS-level guarantee for any native smooth-scroll
   trigger this rule affects. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}
body{
  position:relative;z-index:0;
  color:var(--text);
  font-family:'Inter',sans-serif;
  font-weight:300;
  line-height:1.75;
  overflow-x:hidden;
  min-height:100vh;
}
body::before{
  content:'';
  position:fixed;
  top:0;left:0;width:100%;height:100%;
  background-image:linear-gradient(rgba(9,23,19,0.54),rgba(9,23,19,0.54)),url('../images/brand-background.png');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  z-index:-1;
}

/* ── NAV ──
   The outer <nav> is a full-width, transparent positioning shell only — all
   visible chrome (fill, blur, border, radius, shadow) lives on .nav-inner,
   which floats as a centered, rounded card inside it. pointer-events is
   disabled on the shell and re-enabled on the card so the transparent
   margins left/right/above the card never intercept clicks on whatever
   page content sits underneath. No overflow:hidden anywhere in this chain,
   so the Edge-Strategien dropdown and language menu are never clipped by
   the card's rounded corners. */
nav{
  position:fixed;top:0;left:0;width:100%;
  height:var(--nav-h);
  z-index:1000;
  background:transparent;
  pointer-events:none;
}
.nav-inner{
  pointer-events:auto;
  width:calc(100% - 40px);
  max-width:1500px;
  margin:14px auto 0;
  padding:0 40px;
  height:80px;
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;
  background-color:rgba(9,23,19,0.6);
  backdrop-filter:blur(14px);
  border:1px solid rgba(198,138,93,0.16);
  border-radius:22px;
  box-shadow:0 10px 30px rgba(0,0,0,0.22);
}
.nav-logo{
  display:flex;align-items:center;
  cursor:pointer;flex-shrink:0;text-decoration:none;
}
/* logo-transparent.png carries transparent padding baked into the canvas
   above/below the mark (opaque content spans the middle ~27% of the image
   height). The frame crops that transparent margin via aspect-ratio +
   overflow:hidden, matching the technique used for the hero logo. */
.nav-logo-frame{
  width:230px;
  max-width:100%;
  aspect-ratio:1672/448;
  overflow:hidden;
}
.nav-logo-img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  margin-top:-15.13%;
}
.nav-links{
  display:flex;align-items:center;gap:10px;
  list-style:none;flex:1;justify-content:center;
}
.nav-links>li{position:relative}
/* Single, consolidated nav-link design — replaces the previous mix of a
   rectangular overflow:hidden shine-sweep + text-shadow + underline, which
   read as several competing hover effects layered on a hard-edged box.
   Now there is exactly one hover/focus treatment: a fully rounded, very
   translucent copper pill fades in behind the text (background-color
   respects border-radius natively, no overflow:hidden needed — so nothing
   here can ever clip the Edge-Strategien dropdown, which is a sibling of
   this button anyway, not a child). Rest state stays a plain free-standing
   text link with no visible box. */
.nav-btn{
  background:none;border:none;
  border-radius:999px;
  color:var(--gold-light);
  font-size:12px;font-family:'Inter',sans-serif;
  font-weight:500;letter-spacing:0.09em;text-transform:uppercase;
  padding:8px 12px;cursor:pointer;
  transition:background-color 0.25s ease,color 0.25s ease;
  display:flex;align-items:center;gap:4px;
  white-space:nowrap;position:relative;
}
.nav-btn:hover,.nav-btn:focus-visible{
  color:var(--gold-bright);
  background-color:rgba(198,138,93,0.1);
}
.nav-btn:focus{outline:none}
.nav-btn:focus-visible{outline:2px solid var(--gold-light);outline-offset:-3px}
/* Persistent selected-tab state: brighter copper tone plus the rounded
   underline below — no background pill (that's reserved for hover/focus). */
.nav-btn.active{color:var(--gold-bright)}
/* Underline: narrower than the link itself, centred, fully rounded caps.
   Grows from the centre outward on hover/focus; fixed in place for the
   active tab. */
.nav-btn::after{
  content:'';position:absolute;left:22%;right:22%;bottom:2px;
  height:2px;border-radius:999px;
  background:var(--gold-light);
  transform:scaleX(0);transform-origin:center;
  opacity:0;
  transition:transform 0.35s ease,opacity 0.35s ease;
  pointer-events:none;
}
.nav-btn:hover::after,.nav-btn:focus-visible::after{transform:scaleX(1);opacity:0.9}
.nav-btn.active::after{transform:scaleX(1);opacity:0.7;background:var(--gold)}
.arrow{font-size:7px;opacity:0.45;transition:transform 0.3s;position:relative}
.nav-links>li:hover .arrow{transform:rotate(180deg)}

/* Kundenportal CTA — the one nav-area item that keeps a visible border,
   slightly stronger than the language button (brighter border color, more
   weight) so it reads as the primary header action. Same height/corner
   language as .lang-button. */
.portal-btn,.community-portal-btn{
  display:flex;align-items:center;justify-content:center;
  background:transparent;
  border:1px solid var(--gold);
  border-radius:999px;
  color:var(--gold-light);
  height:34px;padding:0 20px;line-height:1;
  font-size:10.5px;letter-spacing:1.5px;font-weight:600;text-transform:uppercase;
  text-decoration:none;cursor:pointer;font-family:'Inter',sans-serif;
  white-space:nowrap;position:relative;overflow:hidden;
  transition:background-color 0.3s,border-color 0.3s,color 0.3s;
}
.portal-btn:hover,.portal-btn:focus-visible,
.community-portal-btn:hover,.community-portal-btn:focus-visible{
  border-color:var(--gold-bright);color:var(--gold-bright);
  background:rgba(198,138,93,0.14);
}
.portal-btn:focus,.community-portal-btn:focus{outline:none}
.portal-btn:focus-visible,.community-portal-btn:focus-visible{outline:2px solid var(--gold-light);outline-offset:-3px}
.portal-btn::before,.community-portal-btn::before{
  content:'';position:absolute;top:0;left:0;
  width:38%;height:100%;
  background:linear-gradient(115deg,transparent,rgba(240,199,168,0.4),transparent);
  transform:translateX(-140%) skewX(-18deg);
  pointer-events:none;
}
.portal-btn:hover::before,.portal-btn:focus-visible::before,
.community-portal-btn:hover::before,.community-portal-btn:focus-visible::before{
  animation:navShine 0.85s ease;
}
@keyframes navShine{
  from{transform:translateX(-140%) skewX(-18deg)}
  to{transform:translateX(240%) skewX(-18deg)}
}
@media(prefers-reduced-motion:reduce){
  .portal-btn:hover::before,.portal-btn:focus-visible::before,
  .community-portal-btn:hover::before,.community-portal-btn:focus-visible::before{animation:none}
}

/* Dropdown — split into an outer positioning/shadow layer and an inner
   clipping layer. box-shadow lives on the outer .dropdown (unclipped, so it
   isn't cut off); background/border/overflow:hidden live on .dropdown-inner
   (border-radius:inherit), which clips the dd-btn hover fills to the same
   rounded shape — the first item's hover naturally rounds at the top, the
   last at the bottom, and the middle item stays square, with no separate
   :first-child/:last-child radius rules needed. */
.dropdown{
  position:absolute;top:100%;left:0;
  min-width:220px;
  border-radius:15px;
  box-shadow:0 10px 26px rgba(0,0,0,0.24);
  opacity:0;visibility:hidden;
  transform:translateY(-6px);
  transition:all 0.22s ease;
  z-index:200;
}
.dropdown-inner{
  border-radius:inherit;
  overflow:hidden;
  background:rgba(29,48,40,0.98);
  border:1px solid rgba(198,138,93,0.16);
  border-top:2px solid var(--gold-dim);
}
.nav-links>li:hover .dropdown,
.nav-links>li:focus-within .dropdown{
  opacity:1;visibility:visible;transform:translateY(0);
}
.dd-btn{
  display:block;width:100%;
  background:none;border:none;border-bottom:1px solid rgba(198,138,93,0.08);
  color:var(--text-dim);
  font-size:10.5px;font-family:'Inter',sans-serif;
  font-weight:300;letter-spacing:2.3px;text-transform:uppercase;
  padding:14px 20px;cursor:pointer;text-align:left;
  transition:all 0.2s;
}
.dd-btn:last-child{border-bottom:none}
.dd-btn:hover,.dd-btn.active{
  color:var(--gold-light);background:rgba(198,138,93,0.06);
  padding-left:26px;
}

/* Lang + Hamburger */
.nav-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.lang-switch{position:relative}
/* Matched directly to .portal-btn — same border colour/width, background,
   text colour, hover fill, focus ring and shine mechanics, so the two
   header action buttons read as one family. .lang-menu is a sibling of
   .lang-button (not a child), so overflow:hidden here — needed only to
   clip the shine sweep — can never affect the dropdown. */
.lang-button{
  display:flex;align-items:center;justify-content:center;gap:6px;
  background:transparent;
  border:1px solid var(--gold);
  border-radius:999px;
  color:var(--gold-light);
  height:34px;padding:0 16px;line-height:1;
  font-size:10.5px;letter-spacing:1px;font-weight:500;
  cursor:pointer;font-family:'Inter',sans-serif;
  white-space:nowrap;position:relative;overflow:hidden;
  transition:background-color 0.3s,border-color 0.3s,color 0.3s;
}
.lang-button:hover,.lang-button:focus-visible{
  border-color:var(--gold-bright);color:var(--gold-bright);
  background:rgba(198,138,93,0.14);
}
.lang-button:focus{outline:none}
.lang-button:focus-visible{
  outline:2px solid var(--gold-light);outline-offset:-3px;
}
.lang-button::before{
  content:'';position:absolute;top:0;left:0;
  width:38%;height:100%;
  background:linear-gradient(115deg,transparent,rgba(240,199,168,0.4),transparent);
  transform:translateX(-140%) skewX(-18deg);
  pointer-events:none;
}
.lang-button:hover::before,.lang-button:focus-visible::before{
  animation:navShine 0.85s ease;
}
@media(prefers-reduced-motion:reduce){
  .lang-button:hover::before,.lang-button:focus-visible::before{animation:none}
}
.lang-globe{width:14px;height:14px;flex-shrink:0}
/* Inherits currentColor from .lang-button so the caret brightens together
   with the text and globe on hover/focus, instead of staying a fixed dim
   shade. */
.lang-caret{font-size:8px;color:inherit;line-height:1;margin-left:1px}
.lang-menu{
  position:absolute;top:calc(100% + 8px);right:0;
  min-width:150px;list-style:none;
  background:var(--dark2);
  border:1px solid rgba(198,138,93,0.3);
  box-shadow:0 12px 26px rgba(0,0,0,0.32);
  z-index:50;padding:4px;
}
.lang-menu[hidden]{display:none}
.lang-option{
  display:block;width:100%;text-align:left;
  background:none;border:none;
  color:var(--text-dim);
  font-size:11px;font-family:'Inter',sans-serif;letter-spacing:0.5px;
  padding:14px 16px;cursor:pointer;
  transition:color 0.2s,background-color 0.2s;
}
.lang-option:hover{color:var(--gold-light);background:rgba(198,138,93,0.08)}
.lang-option[aria-checked="true"]{color:var(--gold-light);font-weight:500}
.lang-option:focus{outline:none}
.lang-option:focus-visible{
  outline:2px solid var(--gold-light);outline-offset:-2px;
}
.hamburger{
  display:none;flex-direction:column;gap:5px;
  cursor:pointer;padding:16px 12px;margin:-10px -6px;background:none;border:none;
}
.hamburger span{
  width:20px;height:1px;background:var(--gold-dim);transition:all 0.3s;
}
.hamburger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Mobile menu */
.mob-menu{
  display:none;position:fixed;
  top:var(--nav-h);left:0;width:100%;
  background-color:rgba(9,23,19,0.68);
  border-bottom:1px solid rgba(198,138,93,0.14);
  z-index:999;padding:12px 0 20px;
  max-height:calc(100vh - var(--nav-h));
  overflow-y:auto;
}
.mob-menu.open{display:block}
.mob-btn{
  display:block;width:100%;background:none;border:none;
  border-bottom:1px solid rgba(198,138,93,0.08);
  color:var(--text-dim);
  font-size:11.5px;font-family:'Inter',sans-serif;
  letter-spacing:2.3px;text-transform:uppercase;
  padding:15px 30px;cursor:pointer;text-align:left;
  transition:color 0.2s;
}
.mob-btn:hover,.mob-btn.active{color:var(--gold-light)}
/* Highlighted Kundenportal entry in the mobile drawer — a bordered pill
   instead of a plain underlined text row, so it reads as the primary action. */
.mob-btn-portal{
  display:block;width:calc(100% - 40px);
  margin:6px 20px 16px;
  border:1px solid var(--gold);
  color:var(--gold-bright);
  font-weight:600;letter-spacing:2.2px;
  text-align:center;text-decoration:none;
  padding:14px 20px;
  transition:background-color 0.2s,border-color 0.2s;
}
.mob-btn-portal:hover{background:rgba(198,138,93,0.1);border-color:var(--gold-bright)}
.mob-section{
  padding:12px 30px 4px;
  font-size:9px;letter-spacing:3px;text-transform:uppercase;
  color:var(--gold-dim);opacity:0.7;
}
.mob-sub{padding-left:46px;font-size:10.5px}

/* ── PAGE SHELL ── */
/* Each page = flex column, min full viewport */
.page{display:none}
.page.active{
  display:flex;flex-direction:column;
  min-height:100vh;
}

/* Scrollable content area grows, footer sticks to bottom */
.page-body{flex:1;padding-top:var(--nav-h)}

/* ── FOOTER ── */
.site-footer{
  background:rgba(9,23,19,0.55);
  border-top:1px solid rgba(198,138,93,0.18);
  padding:28px 48px 22px;
  text-align:center;
}
.footer-copy{
  font-size:11px;color:var(--gold-light);
  letter-spacing:2px;margin-bottom:10px;
}
.footer-disclaimer{
  font-size:10px;color:var(--text-dim);
  max-width:780px;margin:0 auto;
  line-height:1.65;letter-spacing:0.3px;
}
.footer-links{
  display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:10px;margin-top:14px;
}
.footer-link{
  display:inline-flex;align-items:center;justify-content:center;
  padding:14px 6px;margin:-14px -6px;
  font-size:10px;letter-spacing:2px;text-transform:uppercase;
  color:var(--gold-light);text-decoration:none;
  background:none;border:none;cursor:pointer;
  font-family:'Inter',sans-serif;
  transition:color 0.3s;
}
.footer-link:hover{color:var(--gold-bright)}
.footer-sep{color:var(--text-dim);opacity:0.4}
.footer-link-placeholder{opacity:0.65;cursor:default}
.footer-link-placeholder:hover{color:var(--gold-light)}
.footer-tag{
  font-size:9px;letter-spacing:0.5px;text-transform:none;
  color:var(--gold-dim);
}

/* ── HOME ── */
/* Renamed from the former .home-wrap: this is no longer the page's first
   screen (the logo/brand line are now part of the final hero image above
   it), so it no longer needs to fill the viewport (flex:1/justify-content:center
   for full-height centering removed) — just a calm, editorial, centered
   introduction block with a limited text width. Still uses the same
   flex-column + text-align:center technique so .brand-title/.brand-sub/
   .gold-line/.home-text/.home-founder/.home-actions (all unchanged below)
   continue to center correctly without needing their own edits. */
.home-founder-intro{
  display:flex;flex-direction:column;
  align-items:center;
  text-align:center;
  max-width:760px;
  margin:0 auto;
  padding:110px 40px 100px;
}
/* Sits between the hero and .home-founder-intro below — horizontal gutter
   matches .home-founder-intro's own side padding at each breakpoint so the
   notice box's edges line up with the brand title beneath it. The box
   itself (.notice-box--prelaunch) supplies its own max-width/centering via
   the shared .notice-box base rule; only the top spacing (distance from
   the hero) is set here, scoped to this one placement. */
#home .home-status-notice{padding:0 40px}
#home .notice-box-heading{margin-top:56px}
.eyebrow{
  font-size:clamp(13px,0.47vw+11px,18px);letter-spacing:2px;text-transform:uppercase;
  color:var(--emerald-accent);
  text-shadow:0 1px 3px rgba(9,23,19,0.35);
  margin-bottom:20px;
}
.brand-title{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(42px, 3.2vw + 32px, 96px);font-weight:300;letter-spacing:7px;
  color:var(--gold-light);
  line-height:1;
}
.brand-sub{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(17px, 1.05vw + 14px, 36px);letter-spacing:4px;
  color:var(--gold);text-transform:uppercase;margin-top:10px;
}
.gold-line{
  width:calc(72px + 2cm);max-width:100%;height:2px;
  background:linear-gradient(to right,transparent,var(--gold-light),var(--gold-bright),var(--gold-light),transparent);
  margin:36px auto;
}
.home-text{
  font-size:17px;color:var(--text-dim);
  max-width:760px;line-height:1.8;margin-bottom:8px;
}
.home-founder{
  font-size:14px;color:var(--gold);margin-top:24px;letter-spacing:0.5px;
}
.home-founder strong{color:var(--gold-light);font-weight:400}
.home-founder em{color:var(--emerald-accent);font-style:normal;text-shadow:0 1px 3px rgba(9,23,19,0.35)}
.coming-badge{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 30px;
  border:1px solid var(--teal);
  background:rgba(20,45,36,0.15);
  font-size:11px;letter-spacing:3px;text-transform:uppercase;
  color:var(--teal-bright);
}
.coming-badge::before{
  content:'';width:7px;height:7px;border-radius:50%;
  background:var(--teal-bright);
  flex-shrink:0;
}

/* ── INNER PAGE LAYOUT ── */
.pg-hero{
  padding:72px 48px 48px;
  max-width:1100px;margin:0 auto;
  border-bottom:1px solid rgba(201,168,76,0.07);
}
.pg-label{
  font-size:10px;letter-spacing:5px;text-transform:uppercase;
  color:var(--teal-bright);margin-bottom:12px;
}
.pg-title{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(32px,4.5vw,54px);font-weight:300;
  color:var(--gold-light);letter-spacing:2px;line-height:1.18;
  margin-bottom:18px;
}
.pg-intro{
  font-size:15px;color:var(--text-dim);
  max-width:660px;line-height:1.8;
}
.pg-content{
  max-width:1100px;margin:0 auto;
  padding:56px 48px 80px;
}
.section-label{
  font-size:10px;letter-spacing:4px;text-transform:uppercase;
  color:var(--gold-dim);margin-bottom:32px;
  display:flex;align-items:center;gap:14px;
}
.section-label::after{
  content:'';flex:1;height:1px;
  background:linear-gradient(to right,var(--dark4),transparent);
}
.divider{
  width:100%;height:1px;
  background:linear-gradient(to right,transparent,var(--dark4),rgba(201,168,76,0.15),var(--dark4),transparent);
  margin:52px 0;
}

/* ── EDITORIAL VERTICAL LIST (new layout) ── */
.entry-list{
  display:flex;flex-direction:column;
  margin-top:8px;
}
.entry{
  display:grid;
  grid-template-columns:48px 1fr;
  gap:22px;
  padding:30px 0;
  border-bottom:1px solid rgba(201,168,76,0.08);
}
.entry:first-child{padding-top:8px}
.entry:last-child{border-bottom:none}
.entry-icon{
  font-size:22px;line-height:1;
  opacity:0.85;padding-top:2px;
}
.entry-num{
  font-family:'Cormorant Garamond',serif;
  font-size:20px;font-weight:300;
  color:var(--gold-dim);line-height:1;padding-top:2px;
}
.entry-tag{
  font-size:9.5px;letter-spacing:3px;text-transform:uppercase;
  color:var(--teal-light);margin-bottom:8px;
}
.entry-title{
  font-family:'Cormorant Garamond',serif;
  font-size:24px;font-weight:600;
  color:var(--gold-light);margin-bottom:10px;line-height:1.3;
}
.entry-text{
  font-size:14px;color:var(--text-dim);line-height:1.9;
  max-width:620px;
}
.entry-note{
  display:inline-block;margin-top:14px;
  font-size:10px;letter-spacing:2px;text-transform:uppercase;
  color:var(--teal-bright);opacity:0.85;
}
.entry-divider{
  width:32px;height:1px;
  background:var(--gold-dim);opacity:0.4;
  margin:30px 0;
}

/* Two-column variant for entries with short label + text side by side on wide screens */
.entry-row{
  display:grid;grid-template-columns:200px 1fr;gap:40px;
  padding:28px 0;border-bottom:1px solid rgba(201,168,76,0.08);
}
.entry-row:first-child{padding-top:8px}
.entry-row:last-child{border-bottom:none}
.entry-row .entry-title{margin-bottom:0;font-size:21px}
.entry-row .entry-text{margin-top:0}

/* ── CARDS (legacy, kept for compatibility where still used) ── */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-bottom:2px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-bottom:2px}
.grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2px}
.card{
  background:rgba(29,48,40,0.55);border:1px solid var(--dark3);
  padding:36px 32px;position:relative;overflow:hidden;
  transition:border-color 0.35s,transform 0.25s;
}
.card::before{
  content:'';position:absolute;top:0;left:0;width:100%;height:2px;
  background:linear-gradient(to right,transparent,var(--gold),transparent);
  opacity:0;transition:opacity 0.35s;
}
.card:hover{border-color:rgba(201,168,76,0.3);transform:translateY(-2px)}
.card:hover::before{opacity:1}
.card-icon{font-size:28px;margin-bottom:16px;display:block}
.card-tag{
  font-size:9.5px;letter-spacing:3px;text-transform:uppercase;
  color:var(--teal-light);margin-bottom:10px;
}
.card-title{
  font-family:'Cormorant Garamond',serif;
  font-size:22px;font-weight:600;
  color:var(--gold-light);margin-bottom:12px;line-height:1.25;
}
.card-text{font-size:13.5px;color:var(--text-dim);line-height:1.85}
.card-badge{
  display:inline-block;margin-top:18px;
  padding:4px 13px;
  border:1px solid var(--teal);
  font-size:9.5px;letter-spacing:2px;text-transform:uppercase;
  color:var(--teal-bright);
}

/* ── ABOUT PAGE ── */
.about-heading{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(24px,3vw,34px);font-weight:300;
  color:var(--gold);letter-spacing:1px;line-height:1.2;
  margin-bottom:20px;
}
.approach-block{max-width:850px;margin:0 auto;}
/* Scoped to #about only — .pg-title is shared by every subpage's H1 and must
   not be redefined globally; this override only changes the heading color
   on the About page to match "CAPITAL-GROUP" (var(--gold)) on Home, and
   scales the hero heading down ~11-13% (font-size only) for better balance
   against the enlarged label below. */
#about .pg-title{color:var(--gold);font-size:clamp(28px,4vw,48px)}
/* Scoped to #about only — .pg-label is shared by every subpage's small
   eyebrow-style label; this override only matches the "ÜBER UNS"/"ABOUT US"
   label color to the Home eyebrow line (var(--emerald-accent)), and enlarges
   it ~20% for better visibility while staying well below the heading size. */
#about .pg-label{color:var(--emerald-accent);font-size:12px}
/* Scoped to #about only — .pg-intro is shared by every subpage's hero intro
   paragraph; this override only widens the About page's hero intro text
   block (left-aligned, not centered — no margin change) for longer, more
   balanced lines. */
#about .pg-hero .pg-intro{max-width:870px}

/* ── EDGE PAGES (Trading & Investment) — aligned to the Home/About refresh ── */
/* Trading/Investment reuse the About page's generic building blocks
   (.about-heading, .about-lead, .core-grid/.core-card, .btn-secondary,
   .about-cta*) so the visual language matches without touching #about itself.
   .pg-title/.pg-label are shared with every other subpage, so overrides are
   scoped per page. Trading's hero typography is matched to #about's exactly
   (font-size, on top of the color already shared with #investment). */
#trading .pg-title{color:var(--gold);font-size:clamp(28px,4vw,48px)}
#investment .pg-title{color:var(--gold);font-size:clamp(28px,4vw,48px)}
#trading .pg-label{color:var(--emerald-accent);font-size:12px}
#investment .pg-label{color:var(--emerald-accent);font-size:12px}
/* Risk Disclosures page reuses the same About/Edge hero typography so it
   reads as part of the same page family rather than a standalone legal doc. */
#risikohinweise .pg-title{color:var(--gold);font-size:clamp(28px,4vw,48px)}
#risikohinweise .pg-label{color:var(--emerald-accent);font-size:12px}
/* International Real Estate — now the third Edge-Strategien sub-page —
   joins the same refreshed page family. */
#vermittlung .pg-title{color:var(--gold);font-size:clamp(28px,4vw,48px)}
#vermittlung .pg-label{color:var(--emerald-accent);font-size:12px}
/* Freiheit joins the same refreshed page family. */
#freiheit .pg-title{color:var(--gold);font-size:clamp(28px,4vw,48px)}
#freiheit .pg-label{color:var(--emerald-accent);font-size:12px}
/* Partner joins the same refreshed page family. */
#partner .pg-title{color:var(--gold);font-size:clamp(28px,4vw,48px)}
#partner .pg-label{color:var(--emerald-accent);font-size:12px}
/* Kontakt joins the same refreshed page family. */
#kontakt .pg-title{color:var(--gold);font-size:clamp(28px,4vw,48px)}
#kontakt .pg-label{color:var(--emerald-accent);font-size:12px}
/* Scoped to #investment only — widens the partner-access paragraphs
   (.about-lead) so they use more of the available desktop width; left edge
   and font metrics are untouched, max-width just grows from 680px. Shrinks
   back down naturally on narrower viewports since it's a max-width. */
#investment .about-lead{max-width:860px}

.info-box{
  background:rgba(198,138,93,0.07);
  border:1px solid rgba(198,138,93,0.2);
  border-left:3px solid var(--gold-dim);
  border-radius:var(--card-radius);
  padding:20px 24px;
  font-size:14px;color:var(--text-dim);line-height:1.8;
  max-width:660px;
}

/* ── NOTICE BOX (shared base) ──
   .dev-warning-banner (Datenschutzseite — always rendered directly in the
   markup, never toggled via a class, so it can't be switched off by
   accident; remove the element itself once every placeholder has been
   replaced with real data) and .notice-box (any other in-page notice, e.g.
   the Home "Hinweis zum aktuellen Stand") share one structural rule below
   — same flex/icon-plus-text layout, same max-width, same --card-radius —
   so there is only ever one box implementation, never a second, separately
   duplicated one. Only the colour (warning red vs. .notice-box--prelaunch's
   muted copper) differs per variant, kept in its own rule further down.
   Neither the Datenschutz page's markup nor .dev-warning-banner's own
   colour values change here — same class name, same look as before. */
.dev-warning-banner,
.notice-box{
  display:flex;align-items:flex-start;gap:12px;
  max-width:680px;margin:0 auto 40px;
  padding:16px 22px;
  border-radius:var(--card-radius);
  font-size:12.5px;line-height:1.75;
}
.dev-warning-banner p,
.notice-box p{margin:0}
/* Only matters where a box actually has more than one visible paragraph
   (e.g. .notice-box--prelaunch's title + two body paragraphs) — harmless
   on .dev-warning-banner, which only ever shows one .de/.en pair at a time
   via the site-wide language toggle, so two paragraphs are never visible
   simultaneously there and this rule never has anything to space out. */
.dev-warning-banner p + p,
.notice-box p + p{margin-top:10px}
.dev-warning-banner strong{color:#f0c2bb;font-weight:600}

.dev-warning-banner{
  background:rgba(212,117,106,0.1);
  border:1px solid rgba(212,117,106,0.45);
  color:#e7a49c;
}

/* Home "Hinweis zum aktuellen Stand" — glowing-red notice variant. The
   heading now lives OUTSIDE the box (.notice-box-heading, directly above
   it) rather than as the box's first paragraph, so .notice-box--prelaunch
   itself only ever contains the body paragraphs; overriding flex-direction
   to column (the shared base above is row, for the icon+text layout still
   used by .dev-warning-banner) plus align-items:stretch so each paragraph
   spans the full box width for correct wrapping. Colour value used
   throughout (heading, icon, border, glow): #e8564a, a saturated jewel-tone
   red — never the site's neutral copper/green palette here, since this is
   deliberately the one "needs attention" accent on the page, but still a
   soft glow rather than a flat neon fill. */
.notice-box-heading{
  display:flex;align-items:flex-start;gap:10px;
  max-width:680px;margin:0 auto 14px;
}
.notice-box-heading-icon{
  font-size:16px;line-height:1.4;
  color:#e8564a;
  filter:drop-shadow(0 0 5px rgba(232,86,74,0.55));
}
.notice-box-heading-text{
  font-family:'Inter',sans-serif;
  font-size:15px;font-weight:600;line-height:1.4;
  color:#e8564a;
  text-shadow:0 0 14px rgba(232,86,74,0.45);
}
.notice-box--prelaunch{
  flex-direction:column;align-items:stretch;gap:14px;
  padding:20px 26px;
  background:rgba(232,86,74,0.1);
  border:1.5px solid rgba(232,86,74,0.6);
  box-shadow:0 0 26px rgba(232,86,74,0.16);
  color:var(--text);
  font-size:14px;line-height:1.85;
}
/* The shared base's p+p margin (for .dev-warning-banner, untouched) would
   double up with this variant's own flex `gap` above — cancelled here so
   paragraph spacing in this box comes from exactly one place. */
.notice-box--prelaunch p + p{margin-top:0}
.notice-box-link{
  color:var(--gold-bright);
  text-decoration:none;
  transition:color 0.3s,text-shadow 0.3s;
}
.notice-box-link:hover{text-shadow:0 0 8px rgba(240,199,168,0.5)}
.notice-box-link:focus-visible{outline:2px solid var(--gold-light);outline-offset:2px}
.pg-hero .info-box{margin-top:24px}
/* Centers this one Trading-page block as a whole (heading + info-box)
   within .pg-content, matching the box's own max-width so the heading's
   centered text lines up exactly with the box's centre below it. The
   info-box's own text stays left-aligned (untouched). Scoped to this
   single class so it doesn't affect the hero's own .info-box or any other
   .about-heading. */
.trading-interest-block{max-width:660px;margin:0 auto}
.trading-interest-block .about-heading{text-align:center}
/* Centers the hero's Edge-explainer box as a whole on both Edge pages;
   text inside stays left-aligned, width and padding are untouched. */
#trading .pg-hero .info-box,
#investment .pg-hero .info-box{margin-left:auto;margin-right:auto}

.exclusion-list{
  list-style:none;
  display:flex;flex-direction:column;gap:12px;
  max-width:660px;margin:20px 0;
}
.exclusion-list li{
  position:relative;padding-left:22px;
  font-size:14.5px;color:var(--text-dim);line-height:1.7;
}
.exclusion-list li::before{
  content:'–';position:absolute;left:0;color:var(--gold-dim);
}

/* Scoped to the Trading page's "Persönliche Einblicke" section only — a
   gentle editorial stagger across three wrapper blocks instead of one
   strict left column. Reuses .about-heading/.about-lead/.exclusion-list
   completely unchanged; only each wrapper's own margin-left/max-width/
   spacing is set here, so no other section or page is affected. */
.trading-intro-block{max-width:700px}
.trading-intro-block .about-heading{margin-bottom:28px}
.trading-exclusion-block{margin-top:36px;margin-left:80px;max-width:650px}
.trading-closing-block{margin-top:32px;margin-left:48px;max-width:680px}
@media(max-width:960px){
  .trading-exclusion-block{margin-left:32px;max-width:100%}
  .trading-closing-block{margin-left:16px;max-width:100%}
}
@media(max-width:640px){
  .trading-intro-block{max-width:100%}
  .trading-exclusion-block{margin-left:0;max-width:100%}
  .trading-closing-block{margin-left:0;max-width:100%}
}

.core-card--wide{grid-column:1 / -1}
.about-lead{
  font-size:15.5px;color:var(--text-dim);
  max-width:680px;line-height:2;margin-bottom:16px;
}

.core-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:20px;margin-top:8px;
}
/* Three-column variant for shorter, lighter topic blocks (e.g. Freiheit's
   "International leben" section) that should read as more compact than the
   main .core-grid cards. Reuses .core-card/.core-title/.core-text as-is. */
.compact-grid{grid-template-columns:repeat(3,1fr);gap:16px}
/* Five-card layout (Partner page): 3 equal cards on top, 2 wider cards
   below — a 6-unit column system means every row fills completely (no
   empty grid cell) and the second row reads as deliberately wider/centred,
   not just leftover space. Falls back to a plain 2-col grid at tablet
   (with the 5th card spanning full width so nothing sits alone) and the
   standard 1-col .core-grid behaviour at mobile. */
.partner-areas-grid{grid-template-columns:repeat(6,1fr)}
.partner-areas-grid .core-card:nth-child(-n+3){grid-column:span 2}
.partner-areas-grid .core-card:nth-child(n+4){grid-column:span 3}
/* Freiheit page's "International leben" section (5 topics: Standort &
   Lebensmodell, Vermögen & Banking, Immobilien & Netzwerk, Auswandern &
   persönlicher Plan B, Legale Steueroptimierung) needs the exact same
   "3 cards + 2 balanced cards" layout as .partner-areas-grid above —
   reuses that identical 6-column span technique under its own,
   page-scoped, correctly-named class instead of borrowing the
   Partner-page class name or inventing a new grid mechanism. Falls back
   to the standard 1-column .core-grid behaviour at mobile with no
   override needed, same as .partner-areas-grid. */
#freiheit .intl-living-grid{grid-template-columns:repeat(6,1fr)}
#freiheit .intl-living-grid .core-card:nth-child(-n+3){grid-column:span 2}
#freiheit .intl-living-grid .core-card:nth-child(n+4){grid-column:span 3}
/* ── SHARED CARD HOVER GLOW ──
   Centralised, single source of truth for the green card hover effect —
   extracted verbatim from the Home "Vier Bereiche" area-cards (still the
   visual reference; see #home .area-card further below) so it never has to
   be re-implemented per page. Any element can opt in by carrying the
   .card-hover-glow class directly; .core-card and #home .area-card are
   wired into the same rule via the selector list below instead of each
   keeping its own copy, so there is exactly one definition of this effect
   in the stylesheet.

   Layers: (1) the diagonal green background gradient + hairline green
   border at rest, brightening on hover; (2) a skewed ::before sweep in the
   copper/gold-bright family that plays once via the shared @keyframes
   navShine (same technique as .btn/.portal-btn); (3) a 3px lift. Gated
   behind (hover:hover) and (pointer:fine) so touch taps never leave a
   card stuck in its hover state; keyboard focus (:focus-visible) still
   gets the shine sweep unconditionally, on every device, via its own
   always-on rule below. prefers-reduced-motion removes only the movement
   (lift + sweep), never the colour change. */
.card-hover-glow,
.core-card,
#home .area-card{
  position:relative;overflow:hidden;
  background:linear-gradient(155deg,rgba(22,78,66,0.10),rgba(9,23,19,0.145));
  border:1px solid rgba(22,78,66,0.22);
  transition:background-color 0.3s,border-color 0.3s,transform 0.3s;
}
.card-hover-glow::before,
.core-card::before,
#home .area-card::before{
  content:'';position:absolute;top:0;left:0;
  width:38%;height:100%;
  background:linear-gradient(115deg,transparent,rgba(240,199,168,0.16),transparent);
  transform:translateX(-140%) skewX(-18deg);
  pointer-events:none;
}
@media(hover:hover) and (pointer:fine){
  .card-hover-glow:hover,
  .core-card:hover,
  #home .area-card:hover{
    background:linear-gradient(155deg,rgba(22,78,66,0.17),rgba(9,23,19,0.215));
    border-color:rgba(198,138,93,0.45);
    transform:translateY(-3px);
  }
  .card-hover-glow:hover::before,
  .core-card:hover::before,
  #home .area-card:hover::before{
    animation:navShine 0.9s ease;
  }
}
.card-hover-glow:focus-visible::before,
.core-card:focus-visible::before,
#home .area-card:focus-visible::before{
  animation:navShine 0.9s ease;
}
@media(prefers-reduced-motion:reduce){
  .card-hover-glow:hover,
  .core-card:hover,
  #home .area-card:hover{transform:none}
  .card-hover-glow:hover::before,.card-hover-glow:focus-visible::before,
  .core-card:hover::before,.core-card:focus-visible::before,
  #home .area-card:hover::before,#home .area-card:focus-visible::before{animation:none}
}

.core-card{
  display:block;width:100%;text-align:left;
  border-left:3px solid rgba(47,91,69,0.75);
  border-radius:var(--card-radius);
  padding-top:32px;padding-right:30px;padding-bottom:32px;padding-left:30px;
  font-family:'Inter',sans-serif;
}
/* Only the clickable instances (always rendered as <button class="core-card"
   onclick="...">, e.g. "Internationale Immobilien" on the About page) get a
   pointer cursor and a focus ring — the many plain <div class="core-card">
   info cards (Trading's "Unser Ansatz", Investment's "Anlagebereiche",
   Freiheit, Partner, etc.) are not clickable and must not look like they
   are. */
button.core-card{cursor:pointer}
.core-card:focus-visible{outline:2px solid var(--gold-light);outline-offset:-2px}
.core-index{
  font-family:'Cormorant Garamond',serif;
  font-size:20px;font-weight:600;color:var(--gold-dim);
  margin-bottom:14px;line-height:1;
}
/* Abstract line-mark family used only on the Trading page's "Unser Ansatz"
   cards, in place of .core-index — matches the same slot/spacing so card
   layout is unaffected. */
.core-icon{
  display:block;
  width:44px;height:44px;
  color:var(--gold);
  margin-bottom:14px;
  transition:color 0.3s;
}
.core-card:hover .core-icon{color:var(--gold-light)}
/* Individually designed line-icon family for the "Unsere Kernbereiche" cards
   on the About page — same stroke language as Trading's .core-icon, but
   sized and scoped independently so this never affects Trading's own
   icons. Fixed width/height (not intrinsic to each icon's linework) plus
   the identical margin-bottom below guarantees every card's title and text
   start on the same horizontal axis, regardless of how much of the
   viewBox any individual icon's paths actually occupy. */
.kernbereich-icon{
  display:block;
  width:36px;height:36px;
  color:var(--gold);
  margin-bottom:14px;
  transition:color 0.3s,filter 0.3s;
}
#kernbereiche .core-card:hover .kernbereich-icon{
  color:var(--gold-light);
  filter:drop-shadow(0 0 3px rgba(198,138,93,0.4));
}
/* Individually designed line-icon family for the Investment page's "Unsere
   Anlagebereiche" cards — same stroke language and sizing approach as
   .kernbereich-icon, kept as its own class and scoped to #investment so it
   never affects the About page's icons (or Trading's .core-icon). */
.anlage-icon{
  display:block;
  width:36px;height:36px;
  color:var(--gold);
  margin-bottom:14px;
  transition:color 0.3s,filter 0.3s;
}
#investment .core-card:hover .anlage-icon{
  color:var(--gold-light);
  filter:drop-shadow(0 0 3px rgba(198,138,93,0.4));
}
.core-title{
  font-family:'Cormorant Garamond',serif;
  font-size:22px;font-weight:600;color:var(--gold);
  margin-bottom:10px;line-height:1.3;
}
.core-text{font-size:14px;color:var(--text-dim);line-height:1.85}

.values-grid{
  display:flex;flex-direction:column;
  gap:40px;
  max-width:850px;margin:8px auto 0;
}
.value-block{
  width:100%;
  padding-top:18px;
  border-top:1px solid rgba(198,138,93,0.25);
}
.value-title{
  font-family:'Cormorant Garamond',serif;
  font-size:19px;font-weight:600;color:var(--gold);
  margin-bottom:8px;
}
.value-text{font-size:14px;color:var(--text-dim);line-height:1.85}
/* Small, restrained numeral used above open (non-card) editorial entries —
   deliberately plainer than .core-index/.entry-num so these read as quiet
   list markers rather than decorative card ornaments. */
.value-num{
  display:block;
  font-family:'Inter',sans-serif;
  font-size:11px;font-weight:500;letter-spacing:2px;
  color:var(--gold-dim);
  margin-bottom:8px;
}

.about-cta{
  text-align:center;margin-top:56px;padding-top:48px;
  border-top:1px solid rgba(201,168,76,0.12);
}
.about-cta .about-heading{text-align:center}
.about-cta-text{
  font-size:15px;color:var(--text-dim);
  max-width:680px;margin:0 auto 28px;line-height:1.9;
}
.about-cta-actions{
  display:flex;flex-wrap:wrap;gap:18px;justify-content:center;
}

/* ── FREEDOM STEPS ── */
.freedom-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:40px;
}
.f-step{
  background:rgba(29,48,40,0.55);border:1px solid var(--dark3);
  padding:36px 32px;position:relative;
  transition:border-color 0.35s;
}
.f-step:hover{border-color:rgba(201,168,76,0.25)}
.f-num{
  font-family:'Cormorant Garamond',serif;
  font-size:52px;font-weight:300;
  color:rgba(201,168,76,0.09);
  position:absolute;top:14px;right:18px;line-height:1;
}
.f-title{
  font-family:'Cormorant Garamond',serif;
  font-size:21px;color:var(--gold-light);margin-bottom:11px;line-height:1.3;
}
.f-text{font-size:13.5px;color:var(--text-dim);line-height:1.85}

/* ── CONTACT ── */
.contact-grid{
  display:grid;grid-template-columns:1fr 1.4fr;gap:72px;margin-top:48px;
}
.contact-info{display:flex;flex-direction:column}
.contact-info .about-heading{margin-bottom:14px}
.contact-info-intro{font-size:14px;color:var(--text-dim);line-height:1.85;margin-bottom:28px}
/* Compact rounded contact blocks — a lighter, smaller-scale reuse of the
   .info-box treatment (tint background, left accent stripe, --card-radius)
   so the two contact ways read as part of the same design family without
   becoming full .core-card/.info-box sized blocks. */
.contact-block{
  background:rgba(22,78,66,0.08);
  border:1px solid rgba(22,78,66,0.2);
  border-left:3px solid var(--teal-bright);
  border-radius:var(--card-radius);
  padding:18px 22px;
  margin-bottom:18px;
}
.contact-block-title{
  font-family:'Cormorant Garamond',serif;
  font-size:17px;font-weight:600;color:var(--gold);
  margin-bottom:6px;line-height:1.3;
}
.contact-block-email{
  display:inline-block;font-size:13.5px;color:var(--gold-light);
  text-decoration:none;margin-bottom:8px;transition:color 0.3s;
}
.contact-block-email:hover{color:var(--gold-bright)}
.contact-block-text{font-size:13px;color:var(--text-dim);line-height:1.75}
.contact-overview{
  display:flex;flex-direction:column;gap:20px;
  margin-top:14px;padding-top:22px;
  border-top:1px solid rgba(198,138,93,0.16);
}
.ci-item label{
  display:block;font-size:9.5px;letter-spacing:4px;
  text-transform:uppercase;color:var(--gold-dim);margin-bottom:6px;
}
.ci-item a,.ci-item p{
  font-size:14.5px;color:var(--text);text-decoration:none;transition:color 0.3s;
}
.ci-item a:hover{color:var(--gold-light)}
/* Kontakt form — one single rounded panel (dark, faintly tinted, thin
   green/copper border) instead of a bare set of fields; reuses
   --card-radius so it matches every other rounded surface on the site. */
.form{
  display:flex;flex-direction:column;gap:16px;
  background:rgba(22,78,66,0.07);
  border:1px solid rgba(22,78,66,0.18);
  border-radius:var(--card-radius);
  padding:38px 36px;
}
.form .about-heading{margin-bottom:4px}
.fg label{
  display:block;font-size:9.5px;letter-spacing:3px;
  text-transform:uppercase;color:var(--gold-dim);margin-bottom:6px;
}
.fg input,.fg textarea,.fg select{
  width:100%;background:var(--dark2);border:1px solid var(--dark4);
  border-radius:13px;
  color:var(--text);padding:12px 16px;
  font-family:'Inter',sans-serif;font-size:13.5px;font-weight:300;
  outline:none;transition:border-color 0.3s,box-shadow 0.3s;appearance:none;
}
.fg input:focus,.fg textarea:focus,.fg select:focus{
  border-color:var(--gold-dim);
  box-shadow:0 0 0 3px rgba(198,138,93,0.18);
}
/* Chromium/WebKit autofill (browser-saved name/email/company) paints its
   own light background and dark text that no ordinary background/color
   rule can override — the accepted workaround is an inset box-shadow the
   size of the field (visually replacing the native fill colour with our
   own --dark2) plus a very long background-color transition delay (so the
   native colour never has a chance to render before our shadow paints
   over it). Scoped to .fg input/textarea only — every other form/input on
   the site (portal, admin, etc.) is untouched. */
.fg input:-webkit-autofill,
.fg input:-webkit-autofill:hover,
.fg input:-webkit-autofill:active,
.fg textarea:-webkit-autofill,
.fg textarea:-webkit-autofill:hover,
.fg textarea:-webkit-autofill:active{
  -webkit-text-fill-color:var(--text);
  caret-color:var(--text);
  box-shadow:0 0 0 1000px var(--dark2) inset;
  -webkit-box-shadow:0 0 0 1000px var(--dark2) inset;
  transition:background-color 9999s ease-in-out 0s;
}
/* Separate :focus variant so the existing copper focus ring (.fg
   input:focus above) still shows on an autofilled field, layered on top
   of the same dark-green fill rather than being replaced by it. */
.fg input:-webkit-autofill:focus,
.fg textarea:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--text);
  caret-color:var(--text);
  box-shadow:0 0 0 3px rgba(198,138,93,0.18),0 0 0 1000px var(--dark2) inset;
  -webkit-box-shadow:0 0 0 3px rgba(198,138,93,0.18),0 0 0 1000px var(--dark2) inset;
  transition:background-color 9999s ease-in-out 0s;
}
/* Native :invalid only matches after a submit attempt in most browsers
   (no :user-invalid support needed) — a soft copper outline, not a harsh
   red, so an unfilled required field reads as "please complete this" and
   not as an alarming error. */
.fg input:invalid:not(:placeholder-shown),
.fg textarea:invalid:not(:placeholder-shown){
  border-color:rgba(198,138,93,0.55);
}
.fg select{
  padding-right:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23C68A5D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:12px;
}
.fg select:invalid{color:var(--gold-dim)}
.fg textarea{min-height:130px;resize:vertical}
.fg-consent{gap:8px}
.consent-row{display:flex;align-items:flex-start;gap:10px}
/* Fully custom box (appearance:none) instead of the native checkbox +
   accent-color — a native control still draws its own tick/dot inside the
   accent colour, which is exactly what should disappear here. Same shape
   as before (rounded square, same 16px size) and the same dark
   background/border tokens already used for every other field in this
   form (.fg input/textarea), so the unchecked state reads identically to
   today; only :checked gets the emerald treatment. */
.consent-row input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;
  box-sizing:border-box;
  margin-top:3px;width:16px;height:16px;flex-shrink:0;
  border-radius:4px;
  border:1px solid var(--dark4);
  background:var(--dark2);
  cursor:pointer;
  transition:background-color 0.3s,border-color 0.3s,box-shadow 0.3s;
}
.consent-row input[type="checkbox"]:checked{
  background:var(--emerald-accent);
  border-color:var(--emerald-accent);
  box-shadow:
    0 0 0 3px rgba(56,204,141,0.16),
    0 0 8px rgba(56,204,141,0.5),
    inset 0 1px 1px rgba(255,255,255,0.25);
}
.consent-row input[type="checkbox"]:focus-visible{
  outline:2px solid var(--gold-light);outline-offset:2px;
}
.consent-row label{
  font-size:12.5px;text-transform:none;letter-spacing:0;
  color:var(--text-dim);line-height:1.6;cursor:pointer;
}
.consent-link{
  align-self:flex-start;background:none;border:none;padding:0;
  font-family:'Inter',sans-serif;font-size:11px;letter-spacing:0.2px;text-transform:none;
  color:var(--gold-light);text-decoration:underline;cursor:pointer;
}
.consent-link:hover{color:var(--gold-bright)}
/* The submit button is a flex child of .form (column layout, default
   stretch), so without this it would stretch to the panel's full width;
   centering it reads better inside a single self-contained panel. */
.form button[type="submit"]{align-self:center;margin-top:8px}
/* CTA buttons — every page-content call-to-action (.btn: the Kontakt form
   submit; .btn-secondary: all "…anfragen/registrieren" CTAs) now shares one
   design family, modelled directly on the header Kundenportal button
   (.portal-btn): outline pill, transparent fill, copper border, same hover
   fill/shine mechanics. Typography (font-size, weight, letter-spacing,
   uppercase, font-family) is unchanged from before — only shape, colour and
   interaction states were brought in line with the template. */
.btn,.btn-secondary{
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;
  border:1px solid var(--gold);
  border-radius:999px;
  color:var(--gold-light);
  height:44px;padding:0 32px;line-height:1;
  font-family:'Inter',sans-serif;font-size:10.5px;font-weight:500;
  letter-spacing:3px;text-transform:uppercase;text-decoration:none;
  cursor:pointer;white-space:nowrap;position:relative;overflow:hidden;
  transition:background-color 0.3s,border-color 0.3s,color 0.3s;
  margin-top:4px;
}
.btn:hover,.btn:focus-visible,
.btn-secondary:hover,.btn-secondary:focus-visible{
  border-color:var(--gold-bright);color:var(--gold-bright);
  background:rgba(198,138,93,0.14);
}
.btn:focus,.btn-secondary:focus{outline:none}
.btn:focus-visible,.btn-secondary:focus-visible{
  outline:2px solid var(--gold-light);outline-offset:-3px;
}
.btn::before,.btn-secondary::before{
  content:'';position:absolute;top:0;left:0;
  width:38%;height:100%;
  background:linear-gradient(115deg,transparent,rgba(240,199,168,0.4),transparent);
  transform:translateX(-140%) skewX(-18deg);
  pointer-events:none;
}
.btn:hover::before,.btn:focus-visible::before,
.btn-secondary:hover::before,.btn-secondary:focus-visible::before{
  animation:navShine 0.85s ease;
}
@media(prefers-reduced-motion:reduce){
  .btn:hover::before,.btn:focus-visible::before,
  .btn-secondary:hover::before,.btn-secondary:focus-visible::before{animation:none}
}
.btn-center{text-align:center;margin-top:40px}
.home-actions{
  display:flex;flex-wrap:wrap;
  gap:18px;justify-content:center;
  margin-top:48px;
}

/* ── HOME: FINAL IMAGE HERO (first screen) ──
   Replaces the previous CSS/SVG-built Web3 scene with the final, approved
   R&L artwork (assets/images/Herobild fertig.png, 1672×941, unmodified).
   The image itself must never be filtered/cropped/stretched, so it is
   split into two layers: a blurred, darkened background copy
   (background-size:cover, fills the full hero regardless of aspect ratio)
   and the crisp original on top (object-fit:contain, always shown whole,
   never cropped or distorted). Only thin gradient layers sit above that
   for header readability and the bottom transition — no colour/other
   change is ever applied to the sharp image layer itself. */
/* Height is now derived directly from the image's own 1672:941 ratio via
   aspect-ratio instead of a vh-based min-height. That previous approach
   capped the box height (e.g. 820px) while width kept growing on desktop/
   ultrawide, making the box's own ratio far wider than the image's — so
   object-fit:contain had to pillarbox, showing the blurred backdrop (not
   the crisp motif) in two large side bars. Matching the box ratio to the
   image ratio exactly means contain fills 100% of the width AND 100% of
   the height with zero letterboxing on any screen, at the cost of the
   section growing taller on very wide viewports (explicitly acceptable —
   there is no requirement that the hero fit inside one screen height).
   Mobile overrides this with its own min-height further down, where a
   short aspect-ratio-derived box would feel cramped and controlled
   cropping is explicitly permitted instead. */
#home .home-final-hero{
  position:relative;
  overflow:hidden;
  width:100%;
  aspect-ratio:1672/941;
}
#home .home-final-hero-backdrop{
  position:absolute;inset:0;
  z-index:0;
  background-image:url('../images/Herobild%20fertig.png');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  filter:blur(70px) brightness(0.55) saturate(1.05);
  transform:scale(1.15);
}
#home .home-final-hero-image{
  position:absolute;inset:0;
  z-index:1;
  width:100%;height:100%;
  object-fit:contain;
  object-position:center;
}
/* Dark colour-grading only where needed for legibility: a touch darker at
   the very top (so the floating header stays readable over the image) and
   at the very bottom (where .home-final-hero-fade then takes over), plus a
   very soft outer-edge vignette so the sharp image reads as part of the
   background even on ultra-wide monitors — the centre, where the logo/
   coins/globe sit, is left essentially untouched. */
#home .home-final-hero-overlay{
  position:absolute;inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(9,23,19,0.5) 0%,rgba(9,23,19,0.05) 16%,rgba(9,23,19,0) 55%,rgba(9,23,19,0.08) 78%),
    radial-gradient(ellipse 72% 100% at 50% 50%,transparent 55%,rgba(9,23,19,0.3) 100%);
}
/* Soft transition into the normal page background, starting in the lower
   quarter of the hero (well below the coin labels) and reaching the exact
   plain background colour (--dark, no new colour) by the bottom edge. */
#home .home-final-hero-fade{
  position:absolute;left:0;right:0;bottom:0;
  z-index:3;
  height:24%;
  pointer-events:none;
  background:linear-gradient(to top,var(--dark) 0%,transparent 100%);
}

#home .home-scroll-cue{
  position:absolute;left:50%;bottom:28px;
  transform:translateX(-50%);
  z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  background:none;border:none;padding:6px;cursor:pointer;
  font-family:'Inter',sans-serif;
  font-size:9.5px;letter-spacing:3px;text-transform:uppercase;
  color:var(--text-dim);
  transition:color 0.3s;
}
#home .home-scroll-cue:hover,#home .home-scroll-cue:focus-visible{color:var(--gold-light)}
#home .home-scroll-cue:focus{outline:none}
#home .home-scroll-cue:focus-visible{outline:2px solid var(--gold-light);outline-offset:3px;border-radius:6px}
#home .home-scroll-cue-arrow{width:14px;height:20px}
@keyframes web3ScrollCue{0%,100%{transform:translateY(0);opacity:0.6}50%{transform:translateY(4px);opacity:1}}
#home .home-scroll-cue-arrow{animation:web3ScrollCue 2.6s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){
  #home .home-scroll-cue-arrow{animation:none}
}

/* Screen-reader-only brand text — the image itself is decorative
   (alt="", aria-hidden="true") since the brand name/tagline are already
   visible pixels inside it; this restores that information for assistive
   tech without adding any new visible heading over the artwork. */
#home .home-sr-only{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Header floats directly on the hero image on Home only: body.is-home
   zeroes the shared .page-body top padding that every other page still
   uses to reserve space below the fixed nav, so .home-final-hero starts
   at the true top of the page instead of below a plain-background gap.
   All other pages are unaffected since they never get body.is-home. */
body.is-home .page-body{padding-top:0}

/* Home-only exception to the generic .page.active/.page-body pairing
   above (min-height:100vh + flex:1) — that combination exists so short
   pages like Impressum/Datenschutz still end with the footer pinned to
   the bottom of the viewport instead of floating right after a couple of
   paragraphs, and stays fully intact for them. Home's own content is
   already far taller than any realistic viewport, so that stretch serves
   no purpose here — but whenever the real viewport IS taller than
   expected (browser zoom, window height, OS chrome), flex:1 stretches
   .page-body to fill the difference, opening a large empty band between
   .home-status-notice and .home-founder-intro. Scoped to #home only: no
   other page's layout is touched. */
#home.page.active{min-height:auto}
#home .page-body{flex:initial}

/* ── HOME: SECHS SÄULEN ──
   Sits between .home-founder-intro and .home-areas below — the six R&L
   pillars are the philosophy/foundation, not a fifth/sixth business area,
   so this section deliberately reuses the exact same section-container
   recipe as .home-areas immediately below (centred head: label -> heading
   -> text, then a grid) instead of inventing a new layout language. Cards
   reuse .core-card as-is (site-wide card family, shared hover glow, same
   --card-radius), so no new card component is introduced — only the
   section wrapper, its head block and the 3-column grid are new, all
   #home-scoped. */
#home .home-pillars{
  margin-top:88px;
  width:min(100% - 48px,1500px);
  margin-inline:auto;
}
#home .home-pillars-head{
  text-align:center;max-width:680px;margin:0 auto 44px;
}
/* Order is label -> heading -> text (see index.html), matching every other
   Home section (see .home-areas-label below). */
#home .home-pillars-label{
  font-size:12px;letter-spacing:5px;text-transform:uppercase;
  color:var(--emerald-accent);margin-bottom:12px;
}
/* Same resolved heading treatment as the other three Home section
   headings (.home-areas-head/.home-network-content/.home-partner-teaser
   .about-heading below) — added to that existing bundled rule instead of
   duplicated here, see the selector list a few screens down. */
#home .home-pillars-text{
  font-size:15px;color:var(--text-dim);line-height:1.9;
  max-width:680px;margin:0 auto;
}
/* Three equal columns on desktop (3x2 for six cards) — same minmax(0,1fr)
   technique as #home .area-grid below, one column fewer. Responsive
   overrides live in the shared breakpoint blocks further down in
   RESPONSIVE (2x3 at the 960px tier, 1x6 at the 640px tier), grouped
   alongside every other Home grid override instead of a separate query. */
#home .pillars-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}

/* ── HOME: BEREICHSÜBERSICHT (Woche 4, Schritt 1) ──
   New section directly below the existing hero, presenting the four core
   business areas as fully clickable cards. Every rule below is scoped with
   the #home prefix (on top of already-unique class names) so nothing here
   can ever affect .core-card or any other page's cards. Reuses the
   page-agnostic .about-heading/.about-cta-text typography for the section
   heading/intro instead of inventing new type styles. */
/* Centred content container per the "seitlicher Freiraum" requirement —
   the section (heading + intro + grid) never spans the full viewport
   width; it's capped and centred, leaving generous space on both sides on
   desktop and scaling down gracefully (min() means it never needs its own
   breakpoint overrides — the same formula already yields a sensible inset
   at every width down to mobile). */
#home .home-areas{
  margin-top:88px;
  width:min(100% - 48px,1500px);
  margin-inline:auto;
}
#home .home-areas-head{
  text-align:center;max-width:640px;margin:0 auto 44px;
}
/* Order is label -> heading -> text (see index.html), matching the same
   pattern used by the other two Home sections below: the label's own
   margin-bottom is the label-to-heading gap, the heading's shared
   margin-bottom (.about-heading, see below) is the heading-to-text gap.
   Typography (font-size/letter-spacing/margin-bottom) is intentionally
   matched value-for-value to the resolved .pg-label typography used by
   the site's normal subpage headers (base .pg-label plus a subpage
   color/size override, e.g. #freiheit .pg-label — font-size:12px,
   letter-spacing:5px inherited from base .pg-label, margin-bottom:12px
   inherited from base .pg-label) so this eyebrow line carries the exact
   same hierarchy/ratio against its heading as every other page title. */
#home .home-areas-label{
  font-size:12px;letter-spacing:5px;text-transform:uppercase;
  color:var(--emerald-accent);margin-bottom:12px;
}
/* Shared "landingpage section headline" treatment for the three section
   headings below ("Four Areas. One Clear Direction." / "Achieve More
   Together." / "Selected Connections."). Typography now matches the
   resolved .pg-title typography of the site's normal subpage headers
   value-for-value (base .pg-title plus a subpage size override, e.g.
   #freiheit .pg-title — font-size:clamp(28px,4vw,48px); letter-spacing
   and line-height already matched the base .pg-title's 2px/1.18 before
   this change). font-family/font-weight/color still come from the base
   .about-heading rule above, itself already equal to the reference's
   resolved values (Cormorant Garamond, 300, var(--gold)).
   .about-heading itself is intentionally left untouched — it's shared
   with every subpage's body content, CTA, contact and form headings. */
#home .home-pillars-head .about-heading,
#home .home-areas-head .about-heading,
#home .home-community-content .about-heading,
#home .home-network-content .about-heading,
#home .home-partner-teaser .about-heading{
  text-align:center;
  font-size:clamp(28px,4vw,48px);
  letter-spacing:2px;
  line-height:1.18;
  margin-bottom:26px;
}
#home .home-areas-head .about-cta-text{margin:0 auto}

/* Four equal columns on desktop — no spans, no asymmetry, so all four
   cards are always exactly the same width. */
#home .area-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px;
}

#home .area-card{
  display:flex;flex-direction:column;
  width:100%;text-align:left;
  min-height:320px;
  border-radius:var(--card-radius);
  padding:34px 32px;
  cursor:pointer;
  font-family:'Inter',sans-serif;
}
#home .area-card:focus{outline:none}
#home .area-card:focus-visible{outline:2px solid var(--gold-light);outline-offset:-3px}
/* Background/border/::before sweep/lift/reduced-motion for this reference
   card now live centrally in the "SHARED CARD HOVER GLOW" block above
   (.card-hover-glow / .core-card / #home .area-card) — see there. */

#home .area-icon{
  display:block;width:36px;height:36px;
  color:var(--gold);margin-bottom:16px;
  transition:color 0.3s,filter 0.3s;
}
#home .area-card:hover .area-icon{
  color:var(--gold-light);
  filter:drop-shadow(0 0 3px rgba(198,138,93,0.4));
}
#home .area-title{
  font-family:'Cormorant Garamond',serif;
  font-size:22px;font-weight:600;color:var(--gold);
  margin-bottom:10px;line-height:1.3;
  transition:color 0.3s;
}
#home .area-card:hover .area-title{color:var(--gold-light)}
#home .area-text{font-size:14px;color:var(--text-dim);line-height:1.85}
/* margin-top:auto (the card is display:flex;flex-direction:column) pushes
   this to a consistent baseline at the bottom of every card regardless of
   how many lines the title/text above happen to wrap to. */
#home .area-more{
  display:flex;align-items:center;gap:7px;
  margin-top:auto;
  padding-top:22px;
  font-size:10px;letter-spacing:2px;text-transform:uppercase;
  color:var(--gold-dim);
  transition:color 0.3s;
}
#home .area-card:hover .area-more{color:var(--gold-light)}
#home .area-arrow{
  width:14px;height:14px;flex-shrink:0;
  transition:transform 0.3s;
}
#home .area-card:hover .area-arrow{transform:translateX(3px)}
@media(prefers-reduced-motion:reduce){
  #home .area-card:hover .area-arrow{transform:none}
}

/* ── HOME: KUNDENPORTAL & CAPITAL CIRCLE (Web3-Szene) ──
   The section now shows a single wide banner image (heading/label/body
   text already baked into the artwork) with the real, clickable
   Kundenportal button centred underneath — no background, gradient or
   overlay of its own, so the ordinary page texture (body::before) stays
   visible all around the banner. The original HTML heading/label/text
   elements are kept in the DOM (untouched, still driven by the same
   body.lang-de/lang-en toggle as everywhere else) but visually hidden
   within this section only, via the same off-screen-clip technique
   already used for the Hero's decorative image (#home .home-sr-only) —
   so screen readers still get an equivalent text description and nothing
   about the language switching or translations changes, only the sighted
   presentation in this one section. */
/* ── HOME: COMMUNITY-EINLEITUNG ──
   Sits between .home-areas and .home-circle below — a short, text-only
   transition ("mit wem wir diesen Weg gehen wollen") before the Capital
   Circle image/CTA. Deliberately modelled 1:1 on #home .home-network/
   .home-network-content further down (same plain centred text section,
   no grid, no button/link here) rather than inventing a new section
   shape — only the class names are new, every property value is either
   reused verbatim or matches an existing sibling head block. */
/* Bottom padding deliberately 0 — the entire visual gap down to the
   Capital Circle image is owned solely by #home .home-circle's own
   padding-top below (100px desktop/90px tablet/56px mobile, all three
   already established, untouched here). Previously this section's own
   84px bottom padding stacked on top of .home-circle's margin-top AND
   padding-top (84+96+100=280px combined) — root-caused down to a single
   contributor instead of layering a corrective offset on top. */
#home .home-community{
  position:relative;
  overflow:hidden;
  margin-top:96px;
  padding:72px 40px 0;
  text-align:center;
}
#home .home-community-content{
  position:relative;z-index:1;
  max-width:680px;margin:0 auto;
}
/* Order is label -> heading -> text (see index.html), matching every other
   Home section (see .home-areas-label below). */
#home .home-community-label{
  font-size:12px;letter-spacing:5px;text-transform:uppercase;
  color:var(--emerald-accent);margin-bottom:12px;
}
#home .home-community-text{
  font-size:15px;color:var(--text-dim);line-height:1.9;
  margin-bottom:16px;
}
#home .home-community-text:last-child{margin-bottom:0}

/* margin-top removed (was 96px) — now immediately follows #home
   .home-community above with zero extra offset of its own; this
   section's own padding-top (100px here, 90px/56px at the breakpoints
   below) is the single remaining, already-tuned source of the gap to
   the Capital Circle image, so the two sections read as one connected
   block instead of two separately-spaced ones. */
#home .home-circle{
  position:relative;
  overflow:hidden;
  background:transparent;
  padding:100px 48px 110px;
  min-height:620px;
  display:flex;align-items:center;
  text-align:center;
}
#home .home-circle-content{
  position:relative;z-index:2;
  max-width:1360px;margin:0 auto;
  width:100%;
  padding:0 48px;
}
/* Plain in-flow block image (not the previous absolute/full-bleed
   layer) — fills the width of .home-circle-content, height follows the
   file's own 1916:821 ratio via height:auto, so it can never be cropped
   or distorted at any viewport width.
   Frame treatment matches the site's existing card language (same
   --card-radius as .area-card, same copper rgba(198,138,93,...) used for
   card hover borders) rather than inventing a new visual style — a thin
   resting border plus a very soft two-layer shadow (a faint copper glow
   + a dark lift shadow, both low-alpha) so the image reads as gently
   framed/elevated without ever becoming a hard, boxy panel. border-radius
   + overflow:hidden clip the image's own square corners to match. */
#home .home-circle-banner{
  display:block;
  width:100%;height:auto;
  margin:0 auto 40px;
  border:1px solid rgba(198,138,93,0.32);
  border-radius:var(--card-radius);
  overflow:hidden;
  box-shadow:
    0 0 28px rgba(198,138,93,0.08),
    0 12px 30px rgba(9,23,19,0.35);
  transition:border-color 0.35s,box-shadow 0.35s;
}
#home .home-circle-banner:hover{
  border-color:rgba(198,138,93,0.5);
  box-shadow:
    0 0 34px rgba(198,138,93,0.13),
    0 12px 30px rgba(9,23,19,0.35);
}
@media(prefers-reduced-motion:reduce){
  #home .home-circle-banner{transition:none}
}
#home .home-circle-inner{max-width:500px;margin:0 auto}
/* Heading/label/text are visually redundant now that the same copy is
   part of the banner artwork above — clipped off-screen (not
   display:none, so they stay in the accessibility tree and the .de/.en
   toggle keeps working exactly as on every other section) rather than
   removed, per "nur die sichtbare Darstellung ausblenden". */
#home .home-circle-content .about-heading,
#home .home-circle-label,
#home .home-circle-text{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
#home .home-circle-actions{display:flex;justify-content:center}

/* ── HOME: NETWORK & PARTNERSHIP SECTION ──
   Sits directly below .home-circle, clearly separated from it (margin-top)
   but visually continuous — same plain page background (no boxed panel).
   Centred content, limited text width, exactly one primary pill button
   (.community-portal-btn, reused unchanged) plus one quiet secondary text
   link — never two equally-weighted buttons. (The decorative network-line
   SVG that previously sat here has been removed.) */
#home .home-network{
  position:relative;
  overflow:hidden;
  margin-top:96px;
  padding:72px 40px 84px;
  text-align:center;
}
#home .home-network-content{
  position:relative;z-index:1;
  max-width:680px;margin:0 auto;
}
/* Order is label -> heading -> text (see index.html): the label's own
   margin-bottom is the label-to-heading gap, the heading's shared
   margin-bottom (.about-heading, see above) is the heading-to-text gap.
   Typography matched value-for-value to the resolved .pg-label typography
   of the site's normal subpage headers (see .home-areas-label above). */
#home .home-network-label{
  font-size:12px;letter-spacing:5px;text-transform:uppercase;
  color:var(--emerald-accent);margin-bottom:12px;
}
#home .home-network-text{
  font-size:15px;color:var(--text-dim);line-height:1.9;
  margin-bottom:16px;
}
#home .home-network-actions{display:flex;justify-content:center;margin-top:18px}
/* Quiet secondary link — same visual language as .area-more (copper
   accent, small arrow that nudges on hover), deliberately not styled as a
   second pill button so it never competes with the primary CTA above it. */
#home .home-network-link{
  display:inline-flex;align-items:center;gap:7px;
  margin-top:24px;
  background:none;border:none;padding:6px;cursor:pointer;
  font-family:'Inter',sans-serif;
  font-size:10.5px;letter-spacing:2px;text-transform:uppercase;
  color:var(--gold-dim);
  transition:color 0.3s;
}
#home .home-network-link:hover,#home .home-network-link:focus-visible{color:var(--gold-light)}
#home .home-network-link:focus{outline:none}
#home .home-network-link:focus-visible{outline:2px solid var(--gold-light);outline-offset:3px;border-radius:6px}
#home .home-network-link-arrow{width:14px;height:14px;flex-shrink:0;transition:transform 0.3s}
#home .home-network-link:hover .home-network-link-arrow,
#home .home-network-link:focus-visible .home-network-link-arrow{transform:translateX(3px)}
@media(prefers-reduced-motion:reduce){
  #home .home-network-link:hover .home-network-link-arrow,
  #home .home-network-link:focus-visible .home-network-link-arrow{transform:none}
}

/* ── HOME: PARTNER/AFFILIATE STRIP TEASER ──
   Heading/intro live in a normal centred content container
   (.home-partner-teaser-head); the marquee itself (.partner-strip, see
   PARTNER / AFFILIATE STRIP below) deliberately breaks out of it to run
   almost full-viewport-width, directly on the plain page background —
   no card, no window, no border around the section as a whole. This
   section is ALWAYS visible, even while PARTNER_ENTRIES is still empty —
   only the strip vs. the neutral empty-state below it toggle, via
   renderPartnerStrip() in script.js, so the label/heading/intro never
   disappear and no empty gap is ever left on the page. */
#home .home-partner-teaser{
  margin-top:64px;
  padding-bottom:100px;
}
#home .home-partner-teaser-head{
  padding:0 40px;
  max-width:1100px;
  margin:0 auto;
  text-align:center;
}
/* Order is label -> heading -> text (see index.html): the label's own
   margin-bottom is the label-to-heading gap, the heading's shared
   margin-bottom (.about-heading, see above) is the heading-to-text gap.
   Typography matched value-for-value to the resolved .pg-label typography
   of the site's normal subpage headers (see .home-areas-label above). */
#home .home-partner-teaser-label{
  font-size:12px;letter-spacing:5px;text-transform:uppercase;
  color:var(--emerald-accent);margin-bottom:12px;
}
#home .home-partner-teaser-text{
  font-size:14px;color:var(--text-dim);line-height:1.8;
  max-width:560px;margin:0 auto;
}
/* Full-bleed breakout: width:100vw + a negative margin equal to half the
   viewport minus half of 100% is the standard safe technique for escaping
   a centred, padded ancestor without disturbing that ancestor's own
   layout. body already carries overflow-x:hidden as a site-wide safety
   net, so the classic scrollbar-width rounding edge case of this
   technique can never produce a visible horizontal scrollbar here. */
#home .partner-strip{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-top:40px;
}

/* Open, borderless empty-state — no card, no background, no window —
   shown instead of the strip while PARTNER_ENTRIES is empty. Only a fine
   gradient line (echoing the network-dot language used elsewhere on Home)
   and the short status line; nothing else. */
#home .partner-empty-state{
  margin-top:40px;
  padding:0 40px;
  text-align:center;
}
#home .partner-empty-state[hidden]{display:none}
#home .partner-empty-state-line{
  display:block;
  width:min(70%,560px);
  height:1px;
  margin:0 auto 22px;
  background:linear-gradient(to right,transparent,rgba(76,164,125,0.35),rgba(198,138,93,0.3),rgba(76,164,125,0.35),transparent);
}
#home .partner-empty-state-text{
  font-size:13px;color:var(--text-dim);
  letter-spacing:0.3px;
}

#home .partner-affiliate-notice{
  margin-top:28px;
  padding:0 40px;
  text-align:center;
  font-size:11.5px;color:var(--gold-dim);
  letter-spacing:0.2px;
}
#home .partner-affiliate-notice[hidden]{display:none}

/* ── PARTNER CARDS ── */
.partner-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:2px;margin-top:40px;
}
.p-card{
  background:rgba(29,48,40,0.55);border:1px solid var(--dark3);
  padding:34px 30px;transition:border-color 0.35s;
}
.p-card:hover{border-color:rgba(201,168,76,0.25)}
.p-icon{font-size:28px;margin-bottom:14px;display:block}
.p-title{
  font-family:'Cormorant Garamond',serif;
  font-size:21px;color:var(--gold-light);margin-bottom:10px;
}
.p-text{font-size:13.5px;color:var(--text-dim);line-height:1.85}
.p-badge{
  display:inline-block;margin-top:14px;
  padding:4px 12px;border:1px solid var(--teal);
  font-size:9.5px;letter-spacing:2px;text-transform:uppercase;
  color:var(--teal-bright);
}

/* ── PARTNER / AFFILIATE STRIP ──
   Structural scaffolding for a horizontally-scrolling provider marquee.
   Populated from the PARTNER_ENTRIES array in script.js — see the comment
   there for the entry shape (name, logo, url, relationship, disclosureDe/
   En, ariaLabelDe/En). The container ships with the `hidden` attribute in
   the markup and stays hidden whenever that array is empty, so nothing is
   shown publicly until real, approved entries exist (the open empty-state
   text takes its place instead — see .partner-empty-state above). No
   external carousel library — GSAP tweens the track's transform directly
   (see buildPartnerMarquee/startPartnerMarquee in script.js) by exactly
   one measured .partner-group width with repeat:-1, so the loop is exact
   regardless of viewport width; vanilla JS builds/repeats the tiles from
   data. Hover/focus pause is handled by pausing that GSAP tween (see
   attachPartnerMarqueeControls in script.js), not a CSS animation-state. */
.partner-strip{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 8%,#000 92%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0%,#000 8%,#000 92%,transparent 100%);
}
.partner-strip[hidden]{display:none}
.partner-track{display:flex;width:max-content}
/* One repeatable unit-group of tiles; script.js repeats the six-tile unit
   inside this element until it clears ~1.35x the viewport, then
   duplicates the whole element once more (aria-hidden) for the seamless
   GSAP loop — see buildPartnerMarquee(). */
.partner-group{display:flex;align-items:flex-end;gap:22px;flex-shrink:0;padding:6px 22px 6px 0}
/* Wraps the "AFFILIATE"/"PARTNER"/etc. label (.partner-tile-label) and the
   card itself (.partner-tile) as one unit — the label sits above the card
   as its own line, never inside it. align-items:flex-end on .partner-group
   above keeps every real tile and every decorative placeholder
   (.partner-tile-placeholder, no label, no wrapper) bottom-aligned on one
   shared baseline regardless of whether a label sits above it. */
.partner-tile-item{
  display:flex;flex-direction:column;align-items:flex-start;
  flex-shrink:0;
}
.partner-tile-label{
  width:100%;text-align:center;
  font-size:8.5px;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--emerald-accent);
  margin:0 0 8px;
}
/* Same rounded-card treatment as the Home "Vier Bereiche" area-cards and
   .core-card — background/border/shine-sweep/lift/reduced-motion all come
   from the shared .card-hover-glow rule (see the "SHARED CARD HOVER GLOW"
   block); only this tile's own compact fixed size/padding/shape live
   here. Was a fully-rounded pill before; border-radius now matches the
   reference cards while width/height stay exactly the same as before. */
.partner-tile{
  display:flex;align-items:center;justify-content:center;
  width:200px;height:110px;
  flex-shrink:0;
  padding:24px;
  border-radius:var(--card-radius);
  text-decoration:none;
}
.partner-tile:focus{outline:none}
.partner-tile:focus-visible{outline:2px solid var(--gold-light);outline-offset:3px}
@media(prefers-reduced-motion:reduce){
  .partner-tile:hover .partner-tile-logo{transform:none}
}
/* width:78% / height:52px defines a fixed bounding box (not just a size
   cap) so object-fit:contain always centres and letterboxes the logo
   within it without distortion, regardless of how wide or square any
   individual provider's logo file happens to be. */
.partner-tile-logo{
  display:block;
  width:78%;height:52px;
  object-fit:contain;
  opacity:0.88;
  transition:opacity 0.3s,filter 0.3s,transform 0.3s;
}
.partner-tile:hover .partner-tile-logo,
.partner-tile:focus-visible .partner-tile-logo{
  opacity:1;
  filter:drop-shadow(0 0 4px rgba(198,138,93,0.35));
  transform:scale(1.03);
}
/* Opt-in per-provider size bump (see logoSizeClass in script.js) for a logo
   whose wordmark reads visually smaller than the others at the shared
   default box — same centering/object-fit/hover mechanics, just a larger
   box. contain's scaling stays proportional and the hover rule above still
   applies unchanged for every variant below. Each override was sized
   against that provider's real logo aspect ratio (see
   website/assets/images/partners/) to land at a specific target rendered
   height without exceeding the tile's own padding box (200px tile - 24px
   padding each side = 152px available at desktop; 130px tablet, 190px
   mobile — see PARTNER LOGO SIZE POLISH task notes for the full math). */
/* TradingView (alternative-logo-black.svg, stacked icon-over-wordmark
   composition, 591x256 ~= 2.31:1) — height-bound at every breakpoint
   here (unlike a plain wide wordmark): the 100% box width is what
   guarantees enough room to stay height-bound even at the tightest
   (130px) tablet content width, so height alone drives the rendered
   size. height:56px renders at a consistent ~129.3x56px across
   desktop/tablet/mobile (verified against each tier's real content box),
   comfortably inside every one of them. */
.partner-tile-logo--lg{
  width:100%;
  height:56px;
}
/* ATAS (2226x427, ~5.21:1) — width-bound at the shared default box
   (~118.6x22.7px rendered). 92% widens the rendered logo to ~139.8x26.8px,
   i.e. +4px rendered height, while staying well inside the 152px content
   box (~12px combined side margin, not edge-to-edge). */
.partner-tile-logo--atas{
  width:92%;
}
/* Geldhelden (988x545, ~1.81:1) — the one logo here that is
   height-bound at desktop/mobile, not width-bound (box width is already
   far more than this logo needs at those two tiers). Raising height
   directly grows the rendered logo 1:1 there: 58px -> 60px is exactly
   +2px rendered height, still under the 62px/60px available content
   height. At the tablet tier only, the narrower 130px tile already makes
   this logo width-bound before this change (renders ~55.9px regardless
   of this height value) — pre-existing, unrelated to this +2px step, and
   still safely under the 56px tablet content height either way. */
.partner-tile-logo--geldhelden{
  height:60px;
}
/* Decorative filler tile — same box geometry as .partner-tile above (width/
   height/radius match; background/border stay the plain flat resting-state
   tint rather than the interactive .card-hover-glow treatment), kept as its
   own standalone rule since the two elements otherwise diverge: no hover/
   focus state, no cursor, no label above it — it must never read as
   interactive. Deliberately empty (no icon/mark/symbol inside) — a bare,
   quiet placeholder surface. pointer-events:none is a second safety layer
   on top of the markup already omitting href/tabindex/onclick. */
.partner-tile-placeholder{
  width:200px;height:110px;
  flex-shrink:0;
  background:rgba(22,78,66,0.1);
  border:1px solid rgba(76,164,125,0.22);
  border-radius:var(--card-radius);
  pointer-events:none;
}
@media(max-width:960px){
  .partner-tile,
  .partner-tile-placeholder{width:170px;height:96px;padding:20px}
}
@media(max-width:640px){
  /* Smartphone: autoplay off (script.js never builds a second .partner-group
     at this width to begin with), native horizontal touch-scroll on
     instead — the mask is dropped so a tile being scrolled into view is
     never partially hidden. The :nth-child(2) rule is a harmless defensive
     backstop in case a duplicate group ever exists in the DOM regardless. */
  .partner-strip{
    mask-image:none;-webkit-mask-image:none;
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    scroll-snap-type:x proximity;
    padding:0 16px;
  }
  .partner-group:nth-child(2){display:none}
  .partner-tile,
  .partner-tile-placeholder{
    width:78vw;max-width:230px;height:100px;
  }
  .partner-tile{scroll-snap-align:center}
}
@media(prefers-reduced-motion:reduce){
  .partner-strip{overflow-x:auto;-webkit-overflow-scrolling:touch;mask-image:none;-webkit-mask-image:none}
  .partner-group:nth-child(2){display:none}
}

/* ── GSAP SCROLL REVEALS (progressive enhancement) ──
   Default state: fully visible, no transform — safe if GSAP/ScrollTrigger
   never load (CDN failure) or JavaScript is disabled entirely, since
   nothing here depends on a class being added; the elements just render
   normally. Only once assets/js/script.js confirms GSAP + ScrollTrigger
   loaded successfully AND the user does not have prefers-reduced-motion
   does it add body.gsap-ready — the ONLY thing that switches these into
   their pre-animation (hidden/offset) state. initScrollReveals() then
   animates each element via gsap.to(...) targeting opacity:1/y:0/scale:1,
   permanently overriding this starting point once revealed. */
.gsap-reveal,.gsap-reveal-card{opacity:1}
.gsap-reveal-line{opacity:1;transform:none}

body.gsap-ready .gsap-reveal,
body.gsap-ready .gsap-reveal-card{
  opacity:0;
  transform:translateY(24px);
}
body.gsap-ready .gsap-reveal-line{
  opacity:0;
  transform:scaleX(0);
  transform-origin:left;
}
@media(max-width:640px){
  /* Shorter distance on small screens per "kürzere Distanzen" — the JS
     stagger/duration values are also reduced there (see isMobile in
     initScrollReveals()), independently of this CSS starting offset. */
  body.gsap-ready .gsap-reveal,
  body.gsap-ready .gsap-reveal-card{
    transform:translateY(14px);
  }
}
/* Belt-and-suspenders: initScrollReveals() already refuses to run at all
   when prefers-reduced-motion is set (so gsap-ready is never added in
   that case), but this also covers the live-toggle-mid-session case —
   the moment the OS preference changes, any element already switched to
   its hidden/offset state via body.gsap-ready snaps back to fully visible
   immediately, with no dependency on a further JS callback. */
@media(prefers-reduced-motion:reduce){
  body.gsap-ready .gsap-reveal,
  body.gsap-ready .gsap-reveal-card,
  body.gsap-ready .gsap-reveal-line{
    opacity:1 !important;
    transform:none !important;
  }
}

/* The Home hero (.gsap-hero in script.js) is deliberately never given the
   .gsap-reveal/.gsap-reveal-card classes above and so is already
   unaffected by body.gsap-ready's hidden starting state — this is a
   plain, unconditional rule (no !important needed, since nothing else
   ever targets these two selectors with a hidden/offset starting value)
   as an explicit guarantee that it always renders fully visible, with or
   without GSAP/ScrollTrigger. */
.home-final-hero,
.home-final-hero-image{
  opacity:1;
  visibility:visible;
}

/* ── LANG ── */
body.lang-en .de{display:none !important}
body.lang-de .en{display:none !important}

/* ── PRE-LAUNCH / STANDALONE PAGES ──
   Used by pre-launch.html and 404.html — standalone pages outside the SPA,
   sharing this stylesheet and the same brand fonts/colours, but with their
   own minimal header (logo + language switch only, no full nav) since
   there is nowhere further for these dead-end pages to navigate to except
   back to the homepage. */
.prelaunch-page{
  min-height:100vh;
  display:flex;flex-direction:column;
}
.prelaunch-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:28px 48px;
}
.prelaunch-logo{display:block}
.prelaunch-main{
  flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  max-width:720px;margin:0 auto;
  padding:60px 40px 100px;
}
.prelaunch-eyebrow{
  font-size:11px;letter-spacing:4px;text-transform:uppercase;
  color:var(--teal-bright);margin-bottom:20px;
}
.prelaunch-title{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(30px,4vw,48px);font-weight:300;
  color:var(--gold-light);letter-spacing:1px;line-height:1.24;
  margin-bottom:28px;
}
.prelaunch-text p{
  font-size:15px;color:var(--text-dim);line-height:1.85;
  margin-bottom:18px;
}
.prelaunch-text p:last-child{margin-bottom:0}
.prelaunch-actions{
  display:flex;flex-wrap:wrap;gap:18px;justify-content:center;
  margin-top:44px;
}

/* ── RESPONSIVE ── */
/* Tablet tier: nav tabs stay in a horizontal row (the mobile hamburger
   cutover below is untouched); spacing tightens moderately and the nav-btn
   font-size (already fluid via clamp()) settles at its 12px floor here —
   letter-spacing and the gap between links tighten a little further as
   extra headroom for "Edge-Strategies", the longest label. */
@media(max-width:1100px){
  .nav-inner{width:calc(100% - 24px);padding:0 24px;gap:14px;border-radius:20px}
  .nav-links{gap:6px}
  .nav-btn{font-size:11px;letter-spacing:0.08em;padding:7px 9px}
  .portal-btn{padding:0 14px}
}
@media(max-width:960px){
  /* Card shrinks with the logo (see .nav-logo-frame below) — height and the
     total reserved --nav-h footprint stay in sync so page content never
     gaps or overlaps under the floating card. */
  :root{--nav-h:80px}
  .nav-links{display:none}
  .hamburger{display:flex}
  .nav-inner{width:calc(100% - 20px);padding:0 20px;height:68px;margin-top:12px;border-radius:18px}
  /* Header stays to hamburger + language switch only below this point; the
     Kundenportal CTA moves into the mobile drawer (.mob-btn-portal) instead,
     avoiding a cramped header row. */
  .portal-btn{display:none}
  .pg-hero{padding:56px 20px 36px}
  .pg-content{padding:40px 20px 64px}
  .grid-2,.grid-3,.freedom-grid{grid-template-columns:1fr}
  .compact-grid{grid-template-columns:repeat(2,1fr)}
  .partner-areas-grid{grid-template-columns:repeat(2,1fr)}
  .partner-areas-grid .core-card:nth-child(-n+3),
  .partner-areas-grid .core-card:nth-child(n+4){grid-column:auto}
  .partner-areas-grid .core-card:nth-child(5){grid-column:1/-1}
  #freiheit .intl-living-grid{grid-template-columns:repeat(2,1fr)}
  #freiheit .intl-living-grid .core-card:nth-child(-n+3),
  #freiheit .intl-living-grid .core-card:nth-child(n+4){grid-column:auto}
  #freiheit .intl-living-grid .core-card:nth-child(5){grid-column:1/-1}
  .contact-grid{grid-template-columns:1fr;gap:40px}
  .site-footer{padding:24px 20px 18px}
  .entry,.entry-row{grid-template-columns:1fr;gap:10px}
  .entry-icon,.entry-num{display:none}
  .entry-row{padding:24px 0}
  .home-founder-intro{padding:88px 24px 80px}
  #home .home-status-notice{padding:0 24px}
  #home .notice-box-heading{margin-top:40px}
  .home-text{font-size:16px}
  .home-actions{margin-top:40px}
  .nav-logo-frame{width:190px}
  .prelaunch-top{padding:20px 24px}
  .prelaunch-main{padding:48px 24px 80px}
  /* Tablet: clean 2×2 grid, every card the same width (desktop is already
     4 equal columns via minmax(0,1fr), so this is purely a column-count
     change, no span reset needed anymore). */
  #home .home-pillars{margin-top:64px}
  #home .pillars-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #home .home-areas{margin-top:64px}
  #home .area-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #home .home-community{padding:64px 20px 0}
  #home .home-circle{padding:90px 20px 100px;min-height:560px}
  #home .home-circle-content{padding:0 20px}
  #home .home-circle-inner{max-width:460px}
  #home .home-network{padding:64px 20px 72px}
  #home .home-partner-teaser{padding-bottom:80px}
  #home .home-partner-teaser-head,
  #home .partner-empty-state,
  #home .partner-affiliate-notice{padding-left:20px;padding-right:20px}
}
@media(max-width:640px){
  :root{--nav-h:70px;--card-radius:16px}
  .nav-inner{width:calc(100% - 16px);padding:0 16px;height:60px;margin-top:10px;border-radius:16px}
  .kernbereich-icon{width:32px;height:32px}
  .anlage-icon{width:32px;height:32px}
  .home-founder-intro{padding:56px 20px 56px}
  #home .home-status-notice{padding:0 20px}
  #home .notice-box-heading{margin-top:32px}
  .pg-hero{padding:48px 16px 28px}
  .pg-content{padding:32px 16px 56px}
  .home-text{font-size:15px}
  .nav-logo-frame{width:150px}
  .prelaunch-top{padding:16px 16px}
  .prelaunch-main{padding:40px 16px 64px}
  .prelaunch-actions{flex-direction:column;align-items:center;gap:14px}
  .prelaunch-actions .btn,.prelaunch-actions .btn-secondary{width:100%;max-width:320px;text-align:center}
  .home-actions{flex-direction:column;align-items:center;gap:14px;margin-top:32px}
  .home-actions .btn,.home-actions .btn-secondary{width:100%;max-width:320px;text-align:center}
  .core-grid{grid-template-columns:1fr}
  /* Smartphone: single column, natural source order (Trading, Investment,
     Real Estate, Freedom); fixed min-height is dropped so cards size to
     their own content instead of an unnecessarily tall fixed box, and the
     card gap narrows slightly to the recommended 18-22px range. */
  #home .home-pillars{margin-top:48px}
  #home .pillars-grid{grid-template-columns:1fr;gap:20px}
  #home .home-areas{margin-top:48px}
  #home .area-grid{grid-template-columns:1fr;gap:20px}
  #home .area-card{min-height:0}
  #home .home-community{margin-top:56px;padding:48px 16px 0}
  #home .home-circle{padding:56px 16px 48px;min-height:520px}
  #home .home-circle-content{padding:0 16px}
  #home .home-circle-inner{max-width:100%}
  #home .home-network{margin-top:56px;padding:48px 16px 56px}
  #home .home-partner-teaser{margin-top:48px;padding-bottom:64px}
  #home .home-partner-teaser-head,
  #home .partner-empty-state,
  #home .partner-affiliate-notice{padding-left:16px;padding-right:16px}
  /* Smartphone: contain would letterbox the (much narrower) crisp image
     with tall blurred bars above/below on most phone aspect ratios,
     leaving the actual motif small — cover fills the full width instead
     and crops only the sides (skyline/data-panels, not the central
     R&L mark), which on every mobile viewport width in the 360-430px
     range still works out to no vertical cropping at all (the box ends
     up narrower/taller than the image, so cover scales by matching
     height, not width). object-position stays centred since there is no
     vertical crop to bias here. A shorter clamp than desktop's keeps the
     hero from pushing the founder section too far down. */
  #home .home-final-hero{
    aspect-ratio:auto;
    min-height:clamp(420px,62vh,620px);
    min-height:clamp(420px,62svh,620px);
  }
  #home .home-final-hero-image{
    object-fit:cover;
    object-position:center;
  }
  /* Darken the overlay a touch more since the hero is narrower and the
     header sits closer to the image content here. */
  #home .home-final-hero-overlay{
    background:
      linear-gradient(180deg,rgba(9,23,19,0.62) 0%,rgba(9,23,19,0.08) 18%,rgba(9,23,19,0) 55%,rgba(9,23,19,0.1) 78%),
      radial-gradient(ellipse 80% 100% at 50% 50%,transparent 50%,rgba(9,23,19,0.32) 100%);
  }
  .values-grid{gap:32px}
  .about-cta-actions{flex-direction:column;align-items:center;gap:14px}
  .about-cta-actions .btn-secondary{width:100%;max-width:320px;text-align:center}
  /* Long CTA labels are allowed to wrap on narrow screens instead of
     overflowing the pill; min-height keeps a comfortable touch target
     while letting the box grow to a second line where needed. */
  .btn,.btn-secondary{
    height:auto;min-height:44px;
    padding:12px 24px;
    white-space:normal;line-height:1.4;
    text-align:center;
  }
}

/* Ultra-wide hero cap — targeted by aspect ratio, not just width, since
   2560px alone is ambiguous (2560x1440 is a normal, priority desktop size
   at aspect ~1.78; 2560x1080 is genuinely ultra-wide at aspect ~2.37).
   min-aspect-ratio:2/1 catches 2560x1080/3440x1440/3840x1600 while
   correctly leaving 2560x1440 (and every normal 16:9/16:10 desktop) on
   the base rule's aspect-ratio(1672/941) behaviour untouched.
   The base rule's aspect-ratio scaling keeps growing the box taller with
   every extra pixel of width, which is exactly the "vergrößert sich
   immer weiter" complaint on genuinely wide monitors — so here the box
   reverts to a capped height instead, and object-fit:cover fills that
   shorter box completely (no empty side bars). Geometrically, because
   an ultra-wide viewport (~2.3-2.4:1) is proportionally wider than this
   ~1.78:1 image even at a capped height, cover still crops top/bottom
   rather than the sides — center/center keeps the vertically-central
   R&L logo/CAPITAL-GROUP wordmark comfortably inside frame at every
   width tested (2560-3840px), losing only the outermost data-panels/
   skyline/water margins first. */
@media (min-width:2560px) and (min-aspect-ratio:2/1){
  #home .home-final-hero{
    aspect-ratio:auto;
    min-height:clamp(760px,64vh,1080px);
  }
  /* object-position deliberately isn't dead-centre (50% 50%): even
     though this ~1.78:1 image is close enough to standard widescreen
     that ultra-wide crop is comparatively mild (roughly a tenth to a
     quarter of the image's height, worst case at the widest viewports
     tested), a plain centre crop still trims slightly into the R&L
     logo/globe — the top-priority content, which sits in the upper
     half of the artwork together with CAPITAL-GROUP. 34% keeps that
     whole region in frame across every tested ultra-wide size; the
     coin row and outer skyline (lower priority per spec) are what
     gets cropped first as the viewport gets wider still. */
  #home .home-final-hero-image{
    object-fit:cover;
    object-position:center 34%;
  }
}

@media (min-width:2000px){
  /* Partner strip: the side-fade mask is defined in percentages of the
     strip's own width, so on very wide viewports its absolute pixel size
     grows past a full tile's width (200px + gap), fading the first tile
     out almost entirely instead of just softly. Capping the fade at a
     fixed pixel width keeps it proportional to the (fixed-size) tiles
     instead of the ever-growing viewport. */
  .partner-strip{
    -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 120px,#000 calc(100% - 120px),transparent 100%);
    mask-image:linear-gradient(to right,transparent 0%,#000 120px,#000 calc(100% - 120px),transparent 100%);
  }
}