/* ---------- FIMG: Components & Sections ---------- */
.date-link {
    font-weight: 600;
    text-decoration: underline;
}
/* neutralizes WP core's sitewide default 24px margin-block-start (from theme.json's blockGap), which every component here already handles with its own spacing. */
.is-layout-flow > *{ margin-block-start:0; }

/* ---------- NAV ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:200;
  transition:background .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .5s;
  border-bottom:1px solid transparent;
}
/* the page is light throughout, so the bar carries an off-white surface at rest too */
.nav::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:#F6F3EE;
  box-shadow:0 1px 0 rgba(11,102,121,.07);
  transition:opacity .45s var(--ease-out);
}
.nav.scrolled{
  background:rgba(244,241,236,.72); backdrop-filter:saturate(160%) blur(22px);
  border-bottom:1px solid transparent; box-shadow:0 1px 0 rgba(11,102,121,.06), 0 18px 44px -30px rgba(11,102,121,.3);
}
/* utility strip — only shown in variant B */
.nav-utility{ display:none; }
.nav .wrap{ max-width:var(--maxw); padding-inline:var(--gutter); }
.nav-utility-inner{ display:flex; align-items:center; justify-content:space-between; height:40px;
  font-size:12.5px; letter-spacing:.03em; color:rgba(232,238,245,.66); white-space:nowrap; }
.util-right{ display:flex; align-items:center; gap:14px; }
.util-right a{ color:inherit; }
.util-right a:hover{ color:#fff; }
.util-sep{ width:1px; height:12px; background:currentColor; opacity:.4; }
.util-lang{ font-weight:600; color:rgba(232,238,245,.85); }

/* height reads --navh so the bar's own height and .page-banner's offset always agree at every breakpoint. */
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:26px; height:var(--navh); }
.nav.scrolled .nav-inner{ height:74px; transition:height .5s var(--ease-out); }
.brand{ flex:none; display:flex; align-items:center; }
.brand img{ height:30px; width:auto; max-width:none; flex:none; display:block; transition:height .5s var(--ease-out); }
.nav.scrolled .brand img{ height:27px; }
/* light bar in every state → the petrol/turquoise logo is always the right variant */
.brand .logo-light{ display:none; }
.brand .logo-dark{ display:block; }
.mainnav{ display:flex; }

/* ---- Variant A — centered links (default) ---- */
html[data-nav="a"] .nav-inner{ display:grid; grid-template-columns:1fr auto 1fr; gap:24px; }
html[data-nav="a"] .brand{ justify-self:start; }
html[data-nav="a"] .mainnav{ justify-self:center; }
html[data-nav="a"] .nav-cta{ justify-self:end; }

/* ---- Variant B — two-tier with utility bar ---- */
html[data-nav="b"] .nav-utility{ display:block; border-bottom:1px solid rgba(255,255,255,.14); transition:opacity .4s; }
html[data-nav="b"] .nav.scrolled .nav-utility{ display:none; }
html[data-nav="b"] .nav-inner{ justify-content:flex-start; }
html[data-nav="b"] .mainnav{ margin-left:auto; }

/* ---- Variant C — editorial: uppercase links, text CTA, persistent hairline ---- */
html[data-nav="c"] .nav-inner{ justify-content:flex-start; }
html[data-nav="c"] .mainnav{ margin-left:auto; }
html[data-nav="c"] .nav-link{ text-transform:uppercase; letter-spacing:.13em; font-size:12.5px; font-weight:600; padding:12px 14px; }
html[data-nav="c"] .nav:not(.scrolled){ border-bottom:1px solid rgba(255,255,255,.16); }
html[data-nav="c"] .nav-cta .btn{ background:none; box-shadow:none; color:#fff; padding:12px 4px; border-radius:0;
  text-transform:uppercase; letter-spacing:.13em; font-size:12.5px; }
html[data-nav="c"] .nav.scrolled .nav-cta .btn{ color:var(--petrol); }
html[data-nav="c"] .nav-cta .btn:hover{ background:none; transform:none; box-shadow:none; color:var(--slate-blue-up); }
html[data-nav="c"] .nav.scrolled .nav-cta .btn:hover{ color:var(--petrol-deep); }

/* ---- Variant D — right-clustered compact ---- */
html[data-nav="d"] .nav-inner{ justify-content:flex-start; gap:18px; }
html[data-nav="d"] .mainnav{ margin-left:auto; }
html[data-nav="d"] .nav-link{ padding:10px 12px; font-size:15px; }

.nav-links{ display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0; }
.nav-links > li{ position:relative; }
.nav-link{
  display:flex; align-items:center; gap:5px; padding:12px 11px; font-size:14.5px; font-weight:500;
  color:var(--ink); border-radius:10px; transition:color .3s, background .3s; white-space:nowrap;
}
.nav.scrolled .nav-link{ color:var(--ink); }
.nav-link .chev{ width:11px; height:11px; opacity:.55; transition:transform .35s var(--ease-out); }
.nav-link:hover{ color:var(--petrol); }
.nav.scrolled .nav-link:hover{ color:var(--petrol); }
.has-sub:hover .chev{ transform:rotate(180deg); }
.nav-link.active{ color:var(--petrol); }
.nav.scrolled .nav-link.active{ color:var(--petrol); }
.nav-link.active{ background:var(--accent-tint); }
.nav.scrolled .nav-link.active{ background:var(--accent-tint); }
.nav-link.active::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:5px; width:4px; height:4px; border-radius:50%; background:currentColor; opacity:.85;
}
.nav-link:hover{ background:rgba(11,102,121,.06); }
.nav.scrolled .nav-link:hover{ background:rgba(11,102,121,.06); }
.burger span{ width:24px; height:2px; background:var(--ink); border-radius:2px; transition:transform .4s var(--ease-out), opacity .3s, background .3s; }
.nav.scrolled .burger span{ background:var(--ink); }
/* dropdown — contained rounded panel, anchored under its trigger */
.has-sub{ position:relative; }
.has-sub::after{ content:""; position:absolute; left:-20px; right:-20px; top:100%; height:22px; }
.subnav{
  position:absolute; top:calc(100% + 16px); left:-24px; z-index:6;
  width:640px; max-width:calc(100vw - 48px);
  /* 228px fits «Tochtergesellschaften» (173px at 11px/.2em) without touching the divider. */
  display:grid; grid-template-columns:228px 1fr; gap:0;
  padding:26px; background:var(--card);
  border:1px solid rgba(11,102,121,.1); border-radius:var(--r-card);
  box-shadow:0 8px 20px -14px rgba(11,102,121,.16), 0 40px 84px -44px rgba(11,102,121,.34);
  opacity:0; visibility:hidden; transform:translateY(-6px); pointer-events:none;
  transition:opacity .26s var(--ease-out), transform .28s var(--ease-out), visibility .26s;
}
/* keep the rightmost panel inside the viewport */
@media (max-width:1340px){
  .nav-links > li.has-sub:last-child .subnav{ left:auto; right:-24px; }
}
.has-sub.touch-open .subnav,
.has-sub:hover .subnav, .has-sub:focus-within .subnav, .subnav:hover{
  opacity:1; visibility:visible; transform:none; pointer-events:auto; }

/* left: section label and one explanatory line */
.sub-lead{ display:block; padding-right:26px; border-right:1px solid rgba(11,102,121,.1);
  transition:opacity .3s; }
a.sub-lead:hover{ opacity:.72; }
a.sub-lead:hover .sub-lead-title{ color:var(--petrol); }
.sub-lead-title{ display:block; margin:0 0 10px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; font-weight:600; color:var(--slate-text); }
.sub-lead p{ margin:0; font-size:13px; line-height:1.6; color:var(--ink-soft); }

/* right: item rows — hover field only, no dividers competing with it */
.sub-items{ list-style:none; margin:0; padding:0 0 0 18px; display:grid; gap:2px; align-content:start; }
.sub-items li{ opacity:0; transform:translateY(6px); transition:opacity .3s var(--ease-out), transform .3s var(--ease-out); }
.sub-items a{
  display:grid; grid-template-columns:1fr 16px; align-items:center; column-gap:12px;
  padding:11px 12px; border-radius:8px; transition:background .26s, color .26s;
}
.sub-items b{ display:block; font-size:15px; font-weight:600; letter-spacing:-.005em; line-height:1.3; color:var(--navy); }
.sub-items span{ grid-column:1; display:block; margin-top:2px; font-size:12.5px; line-height:1.5; color:var(--ink-soft); }
.sub-items a > svg{ grid-row:1 / span 2; grid-column:2; width:16px; height:16px; color:var(--petrol);
  opacity:0; transform:translateX(-4px); transition:opacity .26s, transform .3s var(--ease-out); }
.sub-items a:hover{ background:rgba(19,107,106,.07); }
.sub-items a:hover b{ color:var(--petrol-deep); }
.sub-items a:hover > svg{ opacity:1; transform:none; }
/* subsidiary marks, sized to the row not the panel */
.sub-items.with-marks a{ grid-template-columns:26px 1fr 16px; }
.sub-items.with-marks img{ grid-row:1 / span 2; grid-column:1; width:26px; height:26px; object-fit:contain; }
.sub-items.with-marks b, .sub-items.with-marks span{ grid-column:2; }
.sub-items.with-marks a > svg{ grid-column:3; }
/* per-item, not per-list: a mega-menu panel may mix icon and plain rows. */
.sub-items a.has-mark{ grid-template-columns:26px 1fr 16px; }
.sub-items a.has-mark .sub-mark{ grid-row:1 / span 2; grid-column:1; width:26px; height:26px; object-fit:contain; }
.sub-items a.has-mark b, .sub-items a.has-mark span{ grid-column:2; }
.sub-items a.has-mark > svg{ grid-column:3; }

.has-sub.touch-open .sub-items li:nth-child(1),
.has-sub:hover .sub-items li:nth-child(1), .subnav:hover .sub-items li:nth-child(1){ opacity:1; transform:none; transition-delay:.03s; }
.has-sub.touch-open .sub-items li:nth-child(2),
.has-sub:hover .sub-items li:nth-child(2), .subnav:hover .sub-items li:nth-child(2){ opacity:1; transform:none; transition-delay:.08s; }
.has-sub.touch-open .sub-items li:nth-child(3),
.has-sub:hover .sub-items li:nth-child(3), .subnav:hover .sub-items li:nth-child(3){ opacity:1; transform:none; transition-delay:.13s; }
/* catch-all for any 4th+ item — the explicit nth-child rules above only cover the first 3. */
.has-sub.touch-open .sub-items li:nth-child(n+4),
.has-sub:hover .sub-items li:nth-child(n+4), .subnav:hover .sub-items li:nth-child(n+4){ opacity:1; transform:none; transition-delay:.18s; }
@media (prefers-reduced-motion:reduce){ .sub-items li{ opacity:1; transform:none; } }

.nav-cta{ display:flex; align-items:center; gap:14px; }
.nav-cta .btn{ padding:11px 18px; font-size:14.5px; }
.burger{ display:none; background:none; border:none; width:46px; height:46px; flex-direction:column; gap:5px; align-items:center; justify-content:center; }

/* mobile overlay */
.mobile-nav{
  position:fixed; inset:0; z-index:300; background:var(--petrol); color:#fff;
  display:flex; flex-direction:column; padding:28px var(--gutter) 40px;
  transform:translateY(-100%); transition:transform .55s var(--ease-out); visibility:hidden;
  overflow-y:auto; -webkit-overflow-scrolling:touch; /* the original had none — content taller than the viewport (all four expanded submenus, or the Kontakt item added here) was simply unreachable once the open panel locks body scroll */
}
.mobile-nav.open{ transform:none; visibility:visible; }
.mobile-top{ display:flex; align-items:center; justify-content:space-between; }
.mobile-top img{ height:40px; }
.mclose{ background:none; border:none; color:#fff; font-size:30px; line-height:1; padding:6px 12px; }
.mobile-list{ list-style:none; margin:44px 0 0; padding:0; display:flex; flex-direction:column; gap:4px; }
.mobile-list > li > a, .msub-row, .mobile-cta{
  width:100%; text-align:left; background:none; border:none; color:#fff;
  font-size:26px; font-weight:300; letter-spacing:-.01em; padding:16px 0;
  border-bottom:1px solid rgba(255,255,255,.12); display:flex; justify-content:space-between; align-items:center;
}
/* the label navigates, the +/– only expands — both need a 44px target */
.msub-row > a{ color:#fff; flex:1 1 auto; min-height:44px; display:flex; align-items:center; }
.msub-toggle{ flex:none; background:none; border:none; color:#fff; font:inherit;
  min-width:44px; min-height:44px; display:flex; align-items:center; justify-content:flex-end; padding:0; }
.msub{ list-style:none; margin:0; padding:0 0 10px; max-height:0; overflow:hidden; transition:max-height .5s var(--ease-out); }
.msub.open{ max-height:240px; }
.msub a{ display:block; padding:9px 0 9px 14px; font-size:17px; color:rgba(255,255,255,.7); }

@media (max-width:1200px){
  html[data-nav] .nav-inner{ display:flex; justify-content:space-between; }
  .nav-utility{ display:none !important; }
  .nav-links{ display:none; }
  .nav-cta{ display:none; }
  .nav-cta .btn{ display:none; }
  .burger{ display:flex; }
}

/* ---------- HERO — light type panel, photo panel flush right ---------- */
.hero{
  position:relative; min-height:560px; display:grid; grid-template-columns:minmax(0,55fr) minmax(0,45fr);
  background:var(--bg); color:var(--ink); overflow:hidden;
}
.hero::before{ content:none; }
/* left column: copy optically centred, clear of the nav */
.hero-copy{ position:relative; z-index:2; display:flex; flex-direction:column; justify-content:center;
  padding-block:clamp(126px,10vw,156px) clamp(48px,4vw,64px); }
.hero-copy-inner{ width:100%; max-width:none; margin:0;
  padding-inline:var(--edge) clamp(24px,3vw,52px); box-sizing:border-box; }
.hero-eyebrow{ margin-bottom:24px; max-width:100%; }
.hero-eyebrow, .hero-eyebrow *{ text-wrap:balance; }
.hero h1{ max-width:min(15ch,100%); margin-bottom:26px;
  font-size:clamp(34px,4.1vw,66px); line-height:1.04; overflow-wrap:break-word; hyphens:manual; text-wrap:balance; }
.hero h1 .ultra{ font-weight:800; letter-spacing:-.03em; color:var(--petrol-bright); }
.hero-lead{ max-width:min(46ch,100%); color:var(--ink-soft); margin:0; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin:0; max-width:100%; }
/* right column: sharp photograph, hard vertical seam, no overlay on type */
.hero-photo{ position:relative; z-index:1; overflow:hidden; height:100%; box-shadow:-1px 0 0 rgba(11,102,121,.14); }
/* figure needs height:100% first so the img's own height:100% has a definite height to resolve against. */
.hero-photo .wp-block-image{ height:100%; }
.hero-photo img{ width:100%; height:100%; display:block; object-fit:cover; object-position:center;
  filter:grayscale(.3) saturate(.62) brightness(.94) contrast(1.03); }
.photo-tag{
  position:absolute; z-index:3; right:16px; bottom:14px; max-width:calc(100% - 32px);
  font-family:ui-monospace,'SF Mono',Menlo,monospace; font-size:10px; letter-spacing:.03em; white-space:nowrap;
  color:rgba(255,255,255,.86); background:rgba(7,74,88,.6); border:1px solid rgba(255,255,255,.2);
  padding:5px 10px; border-radius:5px; pointer-events:none; overflow:hidden; text-overflow:ellipsis;
}
@media (max-width:520px){ .photo-tag{ white-space:normal; font-size:9.5px; } }
@media (min-width:1200px){ .hero{ grid-template-columns:minmax(0,60fr) minmax(0,40fr); } }
@media (max-width:900px){
  .hero{ grid-template-columns:1fr; min-height:0; }
  .hero-copy{ padding-block:clamp(112px,20vw,150px) 40px; }
  .hero-photo{ height:clamp(220px,42vw,330px); box-shadow:0 -1px 0 rgba(11,102,121,.14); }
}

/* ---------- ANNUAL-REPORT SECTION HEADERS ---------- */
.sec-head{ margin-bottom:clamp(26px,2.8vw,40px); }
.sec-rule{
  display:flex; align-items:center; gap:14px; padding-top:22px;
  border-top:1px solid var(--line); margin-bottom:clamp(18px,2vw,28px);
}
/* teardrop registration mark — recurring brand signature, ties to the Kontakt widget */
.sec-rule::before{
  content:""; flex:none; width:19px; height:15px; background:var(--petrol);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 73'%3E%3Cpath d='M89.4963 36.5C89.4963 44.2143 56.1038 72.5 36.1427 72.5C16.1817 72.5 0 56.3823 0 36.5C0 16.6177 16.1817 0.5 36.1427 0.5C56.1038 0.5 89.4963 28.7857 89.4963 36.5Z' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 73'%3E%3Cpath d='M89.4963 36.5C89.4963 44.2143 56.1038 72.5 36.1427 72.5C16.1817 72.5 0 56.3823 0 36.5C0 16.6177 16.1817 0.5 36.1427 0.5C56.1038 0.5 89.4963 28.7857 89.4963 36.5Z' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat;
}
.tochter .sec-rule{ border-top-color:rgba(255,255,255,.16); }
.tochter .sec-rule::before{ background:var(--slate-blue-up); }
.sec-idx{ font-size:11px; font-weight:600; letter-spacing:.2em; color:var(--petrol); font-variant-numeric:tabular-nums; }
.tochter .sec-idx{ color:#D7F0E9; }
.sec-rule .eyebrow{ margin:0; }
.sec-rule .eyebrow::before{ display:none; }
/* default: eyebrow row, headline beneath, intro in a readable column below */
.sec-body{ max-width:62ch; }
.sec-body .lead{ margin-top:18px; min-width:min(380px,100%); }

/* ---------- PILLARS — divided columns, mark beside number ---------- */
/* .wp-block-columns qualifier raises specificity above WP core's body .is-layout-flex, which otherwise wins and breaks .dok-split's 40/60 layout. */
.wp-block-columns.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line); margin-top:clamp(20px,2.2vw,32px); margin-bottom:0; }
.pillar{ position:relative; padding:clamp(26px,2.8vw,40px) clamp(20px,2.2vw,34px) clamp(30px,3vw,44px);
  background:none; border:none; transition:background .45s var(--ease-out); }
.pillar + .pillar{ box-shadow:-1px 0 0 var(--line); }
.pillar:hover{ background:rgba(255,255,255,.55); }
.pillar-top{ display:flex; align-items:center; gap:18px; margin-bottom:clamp(20px,2.2vw,28px); }
.pillar .num{ position:static; margin-left:auto; font-size:12.5px; font-weight:600; color:var(--slate-text);
  letter-spacing:.1em; font-variant-numeric:tabular-nums; }
.chip{
  width:64px; height:64px; border-radius:50%; display:grid; place-items:center; margin:0; flex:none;
  position:relative; background:var(--slate-tint-2) !important; border:1px solid var(--line); color:var(--slate-blue-d);
  transition:color .5s var(--ease-out);
}
/* pins the figure to the icon's own 28x28 footprint so it centers exactly, not off by a few px. */
.chip figure.wp-block-image{ margin:0; width:28px; height:28px; display:flex; align-items:center; justify-content:center; }
.chip figure.wp-block-image img{ display:block; width:100%; height:100%; }
.chip::after{
  content:""; position:absolute; inset:-1px; border-radius:50%; border:1.5px solid transparent;
  border-top-color:var(--petrol); border-right-color:var(--petrol); transform:rotate(-20deg);
  transition:transform .75s var(--ease-out), border-color .75s var(--ease-out);
}
.pillar:hover .chip::after{ transform:rotate(160deg); border-bottom-color:var(--petrol); }
.pillar:hover .chip{ color:var(--petrol); }
.chip svg{ width:28px; height:28px; }
.pillar h3{ margin:0 0 12px; }
.pillar p{ margin:0; font-size:16px; color:var(--ink-soft); }
@media (max-width:760px){
  .wp-block-columns.pillars{ grid-template-columns:1fr; }
  .pillar + .pillar{ box-shadow:none; border-top:1px solid var(--line); }
}

/* ---------- PROJEKTE — alternating 16:9 rows, image bleeds off the page ---------- */
.proj-sec{ overflow:hidden; }
/* lightweight entries: pointers to the sister sites, deliberately lighter than the card below */
.proj-list{ list-style:none; margin:0 0 clamp(34px,3.8vw,56px); padding:0; border-top:1px solid var(--line); }
.proj-row:last-child{ border-bottom:none; }
.proj-list{ border-bottom:1px solid var(--line); }
/* the tint is inset from the page edges and padded, so it reads as a field, not a full-bleed band */
.proj-row{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:clamp(20px,2.6vw,44px);
  padding:clamp(22px,2.4vw,30px) clamp(16px,1.8vw,24px); margin-inline:calc(-1 * clamp(16px,1.8vw,24px));
  border-bottom:1px solid var(--line); border-radius:var(--r-card);
  transition:background .4s var(--ease-out); }
.proj-row:hover{ background:rgba(11,102,121,.04); }
.proj-row-body h3{ font-family:var(--font-display),var(--font-fallback),system-ui,sans-serif;
  font-size:clamp(19px,1.8vw,24px); font-weight:500; letter-spacing:-.02em; line-height:1.24; margin:13px 0 9px; color:var(--ink);
  max-width:none; text-wrap:pretty; }
/* :not() exclusions: .proj-tag/.proj-credit are Paragraph blocks now, so a bare "p" selector would override their own sizing. */
.proj-row-body p:not(.proj-tag):not(.proj-credit){ margin:0 0 12px; font-size:15px; line-height:1.62; color:var(--ink-soft); max-width:78ch; }
/* who runs the project — points forward to section 03 in words, not logos */
.proj-credit{ display:inline-flex; align-items:center; gap:.6em; font-size:12.5px; color:var(--slate-text); }
.proj-credit b, .proj-credit strong{ font-weight:600; color:var(--ink); }
.proj-credit::before{ content:""; width:16px; height:1px; background:var(--slate-text); opacity:.55; flex:none; }
.proj-row-link{ white-space:nowrap; }
@media (max-width:700px){ .proj-row{ grid-template-columns:1fr; gap:14px; } }

.proj{ display:grid; gap:clamp(30px,3.6vw,56px); }
.proj-item{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,2.8vw,44px); align-items:stretch; }
.proj-item:nth-child(2n) .proj-visual{ order:2; }
/* fixed band height so every row matches, regardless of copy length */
.proj-visual{
  position:relative; overflow:hidden; border-radius:var(--r-photo);
  height:clamp(200px,20vw,270px); box-shadow:0 30px 60px -50px rgba(11,102,121,.4);
}
.proj-visual img{ width:100%; height:100%; object-fit:cover; display:block; }
.proj-body{ max-width:46ch; min-height:clamp(200px,20vw,270px);
  display:flex; flex-direction:column; padding:18px 0 clamp(4px,.8vw,10px); border-top:1px solid var(--line); }
.proj-body .proj-mid{ margin:auto 0; }
.proj-tag{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--slate-text); font-weight:600; display:inline-flex; align-items:center; gap:.7em; }
.proj-tag::before{ content:""; width:20px; height:1px; background:var(--turquoise); }
.proj-body h3{ font-family:var(--font-display),var(--font-fallback),system-ui,sans-serif;
  font-size:clamp(20px,2vw,26px); font-weight:500; letter-spacing:-.022em; margin:12px 0 8px; line-height:1.12; color:var(--navy); }
.proj-body p:not(.proj-tag):not(.link-wrap){ margin:0; color:var(--ink-soft); font-size:15px; line-height:1.66; }
.proj-body .arrow-link{ margin-top:14px; align-self:flex-start; }
@media (max-width:860px){
  .proj-item{ grid-template-columns:1fr; gap:16px; }
  .proj-item:nth-child(2n) .proj-visual{ order:0; }
  .proj-visual{ height:auto; aspect-ratio:16/10; }
  .proj-body{ min-height:0; padding-top:16px; }
  .proj-body .proj-mid{ margin:0; }
}
/* ---------- TOCHTERGESELLSCHAFTEN ---------- */
.tochter{ position:relative; background:var(--petrol); color:#fff; border-top:none;
  padding-block:clamp(72px,7.4vw,120px); }
/* soft shoulders: the light field dissolves into the petrol chapter */
.tochter::before, .tochter::after{ content:""; position:absolute; left:0; right:0; height:56px; pointer-events:none; z-index:0; }
.tochter::before{ top:0; background:linear-gradient(180deg, rgba(244,241,236,.22), rgba(244,241,236,0)); }
.tochter::after{ bottom:0; background:linear-gradient(0deg, rgba(244,241,236,.16), rgba(244,241,236,0)); }
.tochter > .wrap{ position:relative; z-index:1; }
.tochter .sec-head .hd{ color:rgba(238,243,248,.7); }
.tochter .lead{ color:#DDEBEA; }
.wp-block-columns.split{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.12); border-radius:var(--r-card); overflow:hidden; margin-bottom:0; }
/* group is rounded and clipped by .split; individual panels stay square so the 1px divider reads as one seam */
.sub-panel{
  position:relative; padding:clamp(36px,3.4vw,52px); overflow:hidden;
  background:rgba(255,255,255,.05); transition:background .55s;
  display:flex; flex-direction:column; align-items:flex-start; gap:0;
}
.sub-panel::before{ content:""; position:absolute; inset:0; opacity:.4; transition:opacity .55s; }
.sub-panel.prakt::before{ background:radial-gradient(80% 90% at 100% 0%, rgba(16,208,168,.26), transparent 62%); }
.sub-panel.pcp::before{ background:radial-gradient(80% 90% at 100% 0%, rgba(80,192,152,.3), transparent 62%); }
.sub-panel:hover{ background:rgba(255,255,255,.11); }
.sub-panel:hover::before{ opacity:.78; }
.sub-panel > *{ position:relative; z-index:2; }
.sub-panel .badge{ display:inline-block; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; padding:6px 12px; border-radius:100px; border:1px solid rgba(255,255,255,.22); color:var(--slate-blue-up); margin:0 0 30px; }
/* real subsidiary logos (extracted from brand sheet), navy-ready two-tone */
.sub-logo-img{ height:clamp(54px,5vw,68px); width:auto; display:block; }
.sub-panel.pcp .sub-logo-img{ height:clamp(50px,4.6vw,62px); }
/* targets by ancestor context + !important: a class on the img alone breaks the moment the block editor re-saves and adds its own inline width/height style. */
.sub-panel figure.wp-block-image img{ height:clamp(54px,5vw,68px) !important; width:auto !important; max-width:none !important; display:block; }
.sub-panel.pcp figure.wp-block-image img{ height:clamp(50px,4.6vw,62px) !important; }
.sub-gmbh{ display:block; margin-top:10px; font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--slate-blue-up); }
.sub-panel p:not(.badge):not(.sub-gmbh):not(.link-wrap){ color:rgba(236,247,244,.88); font-size:17px; margin:18px 0 0; max-width:38ch; }
.sub-panel .arrow-link{ color:#fff; margin-top:28px; }
.sub-panel .arrow-link svg{ width:18px; height:18px; }
.sub-panel.prakt .arrow-link svg{ color:#5C9BDB; }
.sub-panel.pcp .arrow-link svg{ color:var(--petrol-bright); }
@media (max-width:760px){ .wp-block-columns.split{ grid-template-columns:1fr; } }

/* ---------- STIFTUNGSRAT — separate cards, portrait beside the name ---------- */
.wp-block-columns.board-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:stretch; background:none; border:none; border-radius:0; overflow:visible; margin-bottom:0; }
/* flex wrapper lets .board-cell stretch to equal height — grid's own stretch only reaches the .wp-block-column wrapper, not its child. */
.board-grid > .wp-block-column{ display:flex; }
.board-cell{
  display:flex; align-items:center; gap:20px;
  /* flex:1 fills the column on the main axis (width) — cross-axis stretch (height) is flex's default already. */
  flex:1;
  background:var(--card); border:1px solid rgba(11,102,121,.08); border-radius:var(--r-card);
  padding:clamp(22px,2.2vw,28px) clamp(22px,2.2vw,23px); box-shadow:0 2px 6px -4px rgba(11,102,121,.12);
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .45s;
}
.board-cell:hover{ transform:translateY(-3px); border-color:rgba(11,102,121,.32); box-shadow:0 18px 34px -26px rgba(11,102,121,.3); }
.board-txt{ min-width:0; }
/* .board-cell{ cursor:pointer; } */
.board-cell:focus-visible{ outline:2px solid var(--petrol); outline-offset:3px; }
/* hierarchy: name > role > descriptor */
.board-cell .dsc{ margin-top:5px; font-size:12.5px; line-height:1.45; color:var(--slate-text); }
.board-more{ display:inline-flex; align-items:center; gap:.5em; margin-top:11px;
  font-size:12px; letter-spacing:.02em; font-weight:600; color:var(--petrol); opacity:.7;
  transition:opacity .35s, gap .35s var(--ease-out); }
.board-more svg{ width:14px; height:14px; flex:none; }
.board-cell:hover .board-more{ opacity:1; gap:.85em; }
.avatar{ width:clamp(76px,7vw,92px); height:clamp(76px,7vw,92px); flex:none; border-radius:50%;
  background:var(--slate-fill); overflow:hidden; display:grid; place-items:center;
  font-size:20px; font-weight:600; color:var(--slate-blue-d); border:1px solid var(--line); }
/* see the matching comment on .hero-photo above — same figure-wrapper fix */
.avatar .wp-block-image{ height:100%; }
.avatar img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
.avatar img[src*="gerber"], .avatar img[src*="bangerter"]{ object-fit:contain; transform:scale(.92); background:#fff; }
.board-cell .nm{ font-size:17px; font-weight:500; letter-spacing:-.012em; color:var(--navy); line-height:1.25; }
.board-cell .rl{ font-size:13.5px; color:var(--ink-soft); margin-top:4px; }
.board-note{ margin-top:26px; font-size:14px; color:var(--ink-soft); display:flex; align-items:center; gap:10px; }
.board-note::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--slate-blue); }
@media (max-width:900px){ .wp-block-columns.board-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .wp-block-columns.board-grid{ grid-template-columns:1fr; } }

/* ---------- DOKUMENTE ---------- */
/* one step down from the cream ground — enough to read as its own chapter
   without becoming a colour block. Same warm family, no temperature shift. */
.dok{ background:var(--bg-deep); }
.dok::before{ content:none; }
.dok > .wrap{ position:relative; z-index:1; }
.docs{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2vw,28px); margin-top:clamp(24px,2.4vw,36px); }
.docs-single{ grid-template-columns:1fr; }
.docs-single .doc-card{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(26px,3.4vw,60px); align-items:start; }
.docs-single .doc-intro h3{ margin-top:14px; }
.docs-single .doc-intro p{ margin-bottom:0; }
.docs-single .doc-archive{ margin-top:0; }
@media (max-width:760px){ .docs-single .doc-card{ grid-template-columns:1fr; gap:22px; } }
.doc-card{
  position:relative; overflow:hidden; display:flex; flex-direction:column;
  padding:clamp(28px,3vw,44px); border-radius:var(--r-card);
  background:var(--card); color:var(--ink); border:1px solid rgba(11,102,121,.08);
  box-shadow:0 6px 18px -14px rgba(11,102,121,.2), 0 34px 72px -50px rgba(11,102,121,.35);
  transition:transform .55s var(--ease-out), box-shadow .55s var(--ease-out);
}
.doc-card::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(90% 70% at 85% 0%, rgba(16,208,168,.09), transparent 62%); }
.doc-card > *{ position:relative; z-index:1; }
.doc-card:hover{ transform:translateY(-4px); box-shadow:0 12px 26px -18px rgba(11,102,121,.26), 0 44px 86px -48px rgba(11,102,121,.4); }
.doc-card .meta{ display:inline-flex; align-items:center; gap:.8em; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; font-weight:600; color:var(--slate-text); }
.doc-card .meta::before{ content:""; width:20px; height:1px; background:var(--turquoise); }
.doc-card h3{ font-family:var(--font-display),var(--font-fallback),system-ui,sans-serif;
  font-size:clamp(23px,2.3vw,31px); font-weight:500; letter-spacing:-.02em; line-height:1.15; margin:14px 0 10px; color:var(--navy); }
.doc-card p{ margin:0 0 24px; font-size:15px; line-height:1.65; color:var(--ink-soft); max-width:42ch; }
.doc-link{ display:inline-flex; align-items:center; gap:.6em; background:none; border:none; padding:5px 0;
  font-size:15px; font-weight:600; color:var(--navy); white-space:nowrap;
  transition:color .3s; }
.doc-link svg{ width:16px; height:16px; color:var(--petrol-bright); transition:transform .4s var(--ease-out); }
.doc-link:hover{ color:var(--petrol); }
button.doc-link{ margin-top:auto; align-self:flex-start; }
button.doc-link:hover svg{ transform:translateX(3px); }
.doc-archive{ list-style:none; margin:auto 0 0; padding:0; }
.doc-archive li{ display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:14px 0; border-top:1px solid var(--line); }
.doc-archive b{ font-family:var(--font-display),var(--font-fallback),system-ui,sans-serif; font-size:22px; font-weight:300;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--navy); }
.doc-archive a:hover svg{ transform:translateY(3px); }
@media (max-width:760px){ .docs{ grid-template-columns:1fr; } }

/* ---------- SPENDEN — Swiss QR-bill ---------- */
.qr-bill{
  display:grid; grid-template-columns:minmax(230px,.42fr) 1fr; margin-top:clamp(24px,2.6vw,38px);
  background:var(--card); border:1px solid rgba(11,102,121,.1); border-radius:var(--r-card); overflow:hidden;
  box-shadow:0 8px 20px -14px rgba(11,102,121,.15), 0 44px 90px -50px rgba(11,102,121,.32);
}
/* the perforation between Empfangsschein and Zahlteil */
.qb-pay{ position:relative; padding:clamp(26px,2.8vw,38px); }
.qb-pay::before{
  content:""; position:absolute; left:0; top:14px; bottom:14px; width:1px;
  background:repeating-linear-gradient(to bottom, rgba(11,102,121,.34) 0 5px, transparent 5px 11px);
}
.qb-receipt{ padding:clamp(26px,2.8vw,38px); background:var(--slate-tint-2); display:flex; flex-direction:column; }
.qb-cap{ display:block; font-size:11px; letter-spacing:.2em; text-transform:uppercase; font-weight:600; color:var(--navy); margin-bottom:22px; }

.qb-fields div{ display:flex; flex-direction:column; gap:3px; }
.qb-fields .qb-dt, .qb-purpose .qb-dt{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; font-weight:600; color:var(--slate-text); margin-bottom:6px; }
.qb-fields .qb-dd{ margin:0; font-size:14px; line-height:1.55; color:var(--navy); }
.qb-fields .qb-dd.mono{ font-variant-numeric:tabular-nums; letter-spacing:.02em; font-weight:500; }
.qb-amount{ display:flex; gap:clamp(22px,3vw,44px); margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }
.qb-amount .qb-dt{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; font-weight:600; color:var(--slate-text); margin-bottom:5px; }
.qb-amount .qb-dd{ margin:0; font-size:15px; font-weight:500; color:var(--navy); font-variant-numeric:tabular-nums; }
.qb-amount .qb-dd.soft{ font-weight:400; color:var(--ink-soft); }
.qb-ph{ margin-top:auto; padding-top:22px; font-size:10px; letter-spacing:.2em; text-transform:uppercase; font-weight:600; color:var(--slate-blue); }

.qb-cols{ display:grid; grid-template-columns:auto 1fr; gap:clamp(24px,3vw,44px); align-items:start; }
.qr-code{ width:clamp(150px,15vw,186px); border-radius:8px; overflow:hidden; }
.qr-code img{ width:100%; height:auto; display:block; }
.pay-note{ margin:16px 0 0; max-width:23ch; font-size:13px; line-height:1.55; color:var(--ink-soft); }
.qb-left .qb-amount{ margin-top:18px; }

.qb-purpose{ margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }
.zweck-list{ list-style:none; margin:0; padding:0; }
.zweck-list .zweck-item{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.2em 12px; padding:11px 10px 11px 20px; margin-left:-10px;
  border-radius:8px; position:relative; transition:background .35s var(--ease-out); }
.zweck-list .zweck-item + .zweck-item{ box-shadow:0 -1px 0 var(--line); }
.zweck-list .zweck-item::before{ content:""; position:absolute; left:4px; top:19px; width:6px; height:6px; border-radius:50%; background:var(--petrol); }
.zweck-list .zweck-item:hover{ background:rgba(11,102,121,.05); }
/* min-width:0 overrides the flex-item default that was forcing the longest entry onto its own line instead of wrapping. */
.zweck-list .zn{ font-size:17px; font-weight:500; letter-spacing:-.01em; color:var(--navy); flex-shrink:0; }
.zweck-list .zm{ font-size:13px; color:var(--ink-soft); line-height:1.5; flex:1 1 180px; min-width:0; }
.zweck-hint{ margin:16px 0 0; font-size:13px; color:var(--ink-soft); }

.spende-help{ margin:22px 0 0; font-size:15px; color:var(--ink-soft); }
.spende-help a{ color:var(--petrol); font-weight:600; text-decoration:none; border-bottom:1px solid rgba(19,107,106,.35); transition:border-color .3s; }
.spende-help a:hover{ border-color:var(--petrol); }
@media (max-width:900px){
  .qr-bill{ grid-template-columns:1fr; }
  .qb-pay::before{ left:14px; right:14px; top:0; bottom:auto; width:auto; height:1px;
    background:repeating-linear-gradient(to right, rgba(11,102,121,.34) 0 5px, transparent 5px 11px); }
  .qb-cols{ grid-template-columns:1fr; }
  /* QR grown to ~60% of the panel — the primary action on mobile, and 15vw floored it too small to scan. */
  .qr-code{ width:min(60%,240px); }
  .pay-note{ max-width:34ch; }
}

/* ---------- UNTERSTÜTZER:INNEN — quiet cycling trust strip, awaiting real logos ---------- */
.supporters{ padding-block:clamp(38px,4.2vw,62px); background:var(--bg); border-top:1px solid var(--line); }
.sup-head{ display:flex; align-items:baseline; justify-content:space-between; gap:18px; flex-wrap:wrap;
  margin-bottom:clamp(20px,2.4vw,30px); }
.sup-head h2{ font-size:clamp(15px,1.4vw,18px); font-weight:600; letter-spacing:.01em; color:var(--ink-soft); margin:0; }
.sup-tag{ font-family:ui-monospace,'SF Mono',Menlo,monospace; font-size:10px; letter-spacing:.03em;
  color:var(--slate-teal-deep); background:var(--card); border:1px solid var(--line);
  padding:5px 10px; border-radius:5px; }
/* full-bleed window; slots fade to real transparency at the edges */
.sup-marquee{ position:relative; margin-inline:calc(-1 * var(--gutter)); padding-inline:var(--gutter); overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent 100%); }
.sup-track{ display:flex; width:max-content; /*animation:supSlide 38s linear infinite; */}
.sup-marquee:hover .sup-track{ animation-play-state:paused; }
@keyframes supSlide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.sup-slot{ flex:none; width:clamp(160px,14vw,196px); height:84px; margin-right:12px;
  border-radius:var(--r-card); border:1px dashed rgba(11,102,121,.18); background:rgba(255,255,255,.5); }
@media (prefers-reduced-motion:reduce){ .sup-track{ animation:none; } }
@media (max-width:520px){ .sup-slot{ height:72px; width:clamp(140px,40vw,170px); } }

/* ---------- ENVIRONMENTAL BAND — asymmetric diptych ---------- */
.full-band{ position:relative; margin:clamp(34px,3.6vw,54px) 0 0;
  display:grid; grid-template-columns:1.55fr 1fr; grid-template-rows:clamp(250px,29vw,420px); align-items:stretch; }
/* full-bleed band: intentionally square, it runs edge to edge of the viewport */
.band-img{ position:relative; overflow:hidden; }
.band-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.band-img .photo-tag{ top:13px; bottom:auto; left:14px; right:auto; width:max-content; max-width:calc(100% - 28px); }
/* softer grade for the Leitgedanke eye photo specifically */
.band-img.is-soft img{ filter:grayscale(.62) saturate(.5) contrast(.8) brightness(1.09) blur(.35px); }
.band-img.is-soft::after{ background:rgba(11,102,121,.24); mix-blend-mode:normal; opacity:1; }
.band-side{ background:var(--slate-tint-2); color:var(--ink); border:1px solid var(--line); border-left:none;
  padding:clamp(28px,3vw,46px); display:flex; flex-direction:column; justify-content:space-between; }
.band-lead{ display:flex; align-items:center; gap:.85em; font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  font-weight:600; color:var(--slate-text); }
.band-lead::before{ content:""; width:20px; height:1px; background:var(--turquoise); flex:none; }
/* :not(.band-key): that line is a Paragraph block too, so this rule's higher specificity would otherwise override its own styling. */
.band-side p:not(.band-key):not(.band-lead){ margin:20px 0 0; font-family:var(--font-display),var(--font-fallback),system-ui,sans-serif;
  font-size:clamp(18px,1.8vw,25px); font-weight:300; line-height:1.32; letter-spacing:-.015em; text-wrap:pretty; }
.band-key{ margin-top:auto; padding-top:24px; border-top:1px solid var(--line);
  font-size:12px; letter-spacing:.02em; font-weight:400; color:var(--ink-soft); }
@media (max-width:820px){
  .full-band{ grid-template-columns:1fr; grid-template-rows:clamp(200px,36vw,300px) auto; }
}

/* ---------- FOOTER ---------- */
.footer{ background:var(--petrol-deep); color:rgba(233,245,243,.82); border-top:none !important; padding-block:clamp(52px,6vw,84px) 36px; border-top:1px solid var(--turquoise); }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:48px; }
.foot-brand img{ height:46px; margin-bottom:24px; }
.foot-brand p{ font-size:14.5px; line-height:1.7; max-width:34ch; margin:0; }
.foot-col h3, .foot-col h4{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:rgba(169,220,208,.9); margin:0 0 18px; font-weight:600; }
.foot-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; font-size:15px; }
.foot-col a:hover{ color:var(--turquoise); }
.foot-contact a{ display:inline-block; color:#fff; font-weight:500; }
.foot-contact span{ font-size:14.5px; }
.foot-note{ font-size:11.5px; color:rgba(224,242,238,.8); letter-spacing:.02em; }
.foot-bottom{ color:rgba(238,243,248,.7); margin-top:clamp(36px,4vw,58px); padding-top:24px; border-top:1px solid rgba(255,255,255,.12);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px; font-size:13px; }
.foot-bottom .tags{ display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; }
.foot-bottom .tags a{ color:rgba(238,243,248,.7); }
.foot-bottom .tags a:hover{ color:var(--turquoise); }
@media (max-width:780px){ .foot-grid{ grid-template-columns:1fr 1fr; } .foot-brand{ grid-column:1/-1; } }
@media (max-width:520px){ .foot-grid{ grid-template-columns:1fr; } }


/* ---------- NAV — quiet institutional bar (shared by index + v2) ---------- */
.nav{ top:0; left:0; right:0; border-radius:0; background:none; backdrop-filter:none; -webkit-backdrop-filter:none;
  border:none; border-bottom:1px solid transparent; box-shadow:none;
  transition:background .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .5s;
}
/* nav shares the page content column so the logo and CTA line up with every section */
.nav .wrap{ max-width:var(--maxw); padding-inline:var(--gutter); }
.nav-utility{ display:none !important; }
html[data-nav] .nav-inner{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:26px; height:var(--navh); }
html[data-nav] .brand{ justify-self:start; }
html[data-nav] .mainnav{ justify-self:center; margin-left:0; }
html[data-nav] .nav-cta{ justify-self:end; }
.nav.scrolled{ background:rgba(248,246,242,.82); backdrop-filter:saturate(160%) blur(22px); -webkit-backdrop-filter:saturate(160%) blur(22px);
  border-bottom:1px solid rgba(11,102,121,.1); box-shadow:0 14px 36px -30px rgba(11,102,121,.28); }
html[data-nav] .nav.scrolled .nav-inner{ height:74px; }

/* links: small letter-spaced caps, teal hairline draws in on hover */
.nav-links{ gap:30px; }
.nav-link{ padding:7px 0; border-radius:0; background:none !important;
  font-size:11px; letter-spacing:.19em; text-transform:uppercase; font-weight:500; color:rgba(11,44,54,.78); }
/* parents are real links: they navigate on click and open their panel on hover */
.has-sub > .nav-link{ cursor:pointer; }
.has-sub:focus-within .subnav{ opacity:1; visibility:visible; transform:none; }
.nav-link .chev{ width:10px; height:10px; opacity:.5; transition:opacity .3s, transform .35s var(--ease-out); }
.nav-link:hover .chev{ opacity:1; }
.has-sub:hover .nav-link .chev{ transform:rotate(180deg); opacity:1; }
.nav.scrolled .nav-link{ color:rgba(11,44,54,.78); }
.nav-link:hover, .nav.scrolled .nav-link:hover{ color:var(--petrol); }
.nav-link.active{ color:var(--petrol); }
.nav.scrolled .nav-link.active{ color:var(--petrol); }
.nav-link::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--turquoise);
  transition:right .45s cubic-bezier(.16,.72,.24,1);
}
.nav.scrolled .nav-link::after{ background:var(--petrol); }
.nav-link:hover::after, .nav-link.active::after{ right:0; display:block; }

/* CTA — outlined pill, quiet on navy, teal once scrolled */
.nav-cta .btn{ background:none !important; box-shadow:none !important; padding:10px 18px; border-radius:100px;
  border:1px solid rgba(11,102,121,.34); color:var(--petrol);
  font-size:11px; letter-spacing:.19em; text-transform:uppercase; font-weight:600;
  transition:background .35s, border-color .35s, color .35s; }
.nav-cta .btn svg{ width:14px; height:14px; color:var(--petrol-bright); }
.nav-cta .btn svg{ transition:transform .4s var(--ease-out); }
/* hover fills with petrol on both nav states — the old white border/tint was a dark-navbar leftover. */
.nav-cta .btn:hover, .nav.scrolled .nav-cta .btn:hover{
  transform:none; background:var(--petrol) !important; border-color:var(--petrol); color:#fff;
}
.nav-cta .btn:hover svg{ transform:translateX(4px); color:var(--turquoise); }
.nav-cta .btn:focus-visible{ outline:2px solid var(--petrol); outline-offset:3px; }
.nav.scrolled .nav-cta .btn{ color:var(--petrol-deep); border-color:rgba(11,102,121,.4); }
.nav.scrolled .nav-cta .btn svg{ color:var(--petrol); }

@media (max-width:1320px){ .nav-links{ gap:20px; } }
/* --navh override applies regardless of nav variant — do not gate this behind html[data-nav]. */
@media (max-width:1200px){
  :root{ --navh:76px; }
  html[data-nav] .nav-inner{ display:flex; justify-content:space-between; }
}

/* Tochtergesellschaften panel labels — lifted for AA against the panel's
   composited backdrop (rgb(20,104,127)), not the section colour beneath it */
.sub-panel .badge{ color:#D7F0E9; border-color:rgba(215,240,233,.36); }
.sub-panel .sub-gmbh{ color:#D7F0E9; }

/* ---------- DOKUMENTE 05 — asymmetric editorial split, no card ---------- */
.wp-block-columns.dok-split{ display:grid; grid-template-columns:minmax(0,40fr) minmax(0,60fr); gap:clamp(30px,4vw,72px); align-items:start; margin-bottom:0; }
.dok-intro .sec-rule{ margin-bottom:clamp(14px,1.6vw,22px); }
.dok-intro .h-section{ margin-bottom:16px; }
.dok-intro .lead{ max-width:34ch; font-size:clamp(16px,1.3vw,18px); }
/* archive list: sits on the section background, grows with each new year */
.jb-list{ list-style:none; margin:0; padding:0; border-top:1px solid rgba(11,102,121,.16); }
.jb-list .jb-item{ border-bottom:1px solid rgba(11,102,121,.16); }
.jb-list .jb-item > *{ pointer-events:auto; }
.jb-list .jb-item{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:20px;
  padding:clamp(18px,1.9vw,26px) 0; transition:padding-left .4s var(--ease-out); }
.jb-list .jb-item:hover{ padding-left:8px; }
.jb-name{ font-family:var(--font-display),var(--font-fallback),system-ui,sans-serif;
  font-size:clamp(20px,2vw,27px); font-weight:500; letter-spacing:-.02em; line-height:1.15; color:var(--navy); }
.jb-name b, .jb-name strong{ font-weight:600; font-variant-numeric:tabular-nums; color:var(--petrol); }
.jb-dl{ display:inline-flex; align-items:center; gap:.6em; font-size:15px; font-weight:600;
  color:var(--navy); white-space:nowrap; transition:color .3s; }
.jb-dl svg{ width:17px; height:17px; color:var(--petrol); transition:transform .4s var(--ease-out); }
.jb-dl:hover{ color:var(--petrol); }
.jb-list .jb-item:hover .jb-dl svg{ transform:translateY(3px); }
@media (max-width:860px){
  .wp-block-columns.dok-split{ grid-template-columns:1fr; gap:26px; }
  .dok-intro .lead{ max-width:52ch; }
}

/* one continuous light field across sections — no tints/rules between them. */
#stiftung, #projekte, #stiftungsrat, #dokumente, #spenden{ border-top:none; }
.supporters{ border-top:none; }

/* hero sits on white so the cream page below reads as a deliberate change of
   field, and section 01 opens tighter against it */
#stiftung{ padding-top:clamp(48px,4.4vw,70px); }

/* client spec: Beausite Classic Semibold for the GmbH line beneath each logo lockup. */
.sub-gmbh{ font-family:var(--font-display),var(--font-fallback),system-ui,sans-serif; font-weight:600; }


/* PAGE BANNER: petrol panel on every inner page (not homepage). One of only two permitted dark grounds (with the footer) — no other section may be dark. Nav offset lives on margin-top, not padding, or the panel/photo would run under the bar. */
.page-banner{
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); align-items:stretch;
}
/* fixed height, never scales to viewport — may only grow taller on narrow screens. */
/* + 1px for the bar's own bottom hairline, which sits outside --navh */
.page-banner{ margin-top:calc(var(--navh) + 1px); min-height:clamp(340px,34vw,420px); }
/* flat --petrol-surface, not a gradient: the gradient darkened toward the foot,
   which is what read as too heavy. One field, measured 5.27:1 for white. */
.pb-copy{
  position:relative; display:flex; flex-direction:column; justify-content:center;
  background:var(--petrol-surface);
  padding-block:clamp(30px,3.4vw,52px) clamp(30px,3.4vw,52px);
}
.pb-copy::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(85% 75% at 8% 6%, rgba(18,209,175,.16), transparent 62%); }
.pb-in{ position:relative; z-index:1; padding-inline:var(--edge) clamp(24px,3vw,52px); }
.pb-in .sec-rule{ border-top-color:rgba(255,255,255,.22); }
/* turquoise clears 3:1 contrast on petrol (petrol-on-petrol measured 1.0:1); matches .eyebrow::before on dark grounds. */
.pb-in .sec-rule::before{ background:var(--turquoise); }
.pb-in .eyebrow.on-dark{ color:rgba(255,255,255,.94); }
.pb-title{
  font-family:var(--font-display),var(--font-fallback),system-ui,sans-serif;
  font-size:clamp(30px,3.4vw,44px); font-weight:400; letter-spacing:-.028em; line-height:1.04;
  color:#fff; margin:0; max-width:16ch; text-wrap:balance;
}
.pb-intro{ font-size:17px; line-height:1.6; color:#fff; margin:16px 0 0; max-width:44ch; }
/* absolutely filled so the photograph's intrinsic ratio can never drive the
   banner height — the container's min-height governs, nothing else. */
.pb-photo{ position:relative; overflow:hidden; }
.pb-photo img{ position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover;
  filter:grayscale(.3) saturate(.62) brightness(.94) contrast(1.03); }

/* Variant 2 (no photo) — for text-only pages: Impressum, Datenschutz, etc. */
.page-banner.no-image{ grid-template-columns:1fr; height:auto; min-height:clamp(280px,27vw,340px); }
.page-banner.no-image .pb-copy{ padding-block:clamp(34px,3.6vw,56px) clamp(34px,3.6vw,56px); }
/* .wrap already supplies the gutter — adding --edge on top over-indented the banner. */
.page-banner.no-image .pb-in{ padding-inline:var(--gutter); width:100%; }
.page-banner.no-image .pb-title{ max-width:20ch; }
.page-banner.no-image .pb-intro{ max-width:54ch; }

@media (max-width:900px){
  .page-banner{ grid-template-columns:1fr; min-height:0; }
  .pb-copy{ padding-block:30px 30px; }
  .pb-photo{ order:2; height:clamp(190px,40vw,270px); position:relative; }
  .pb-in{ padding-inline:var(--edge); }
}

/* inline text trigger that opens the Kontakt panel — a control, not a link,
   so it carries no href and cannot leave a dead anchor in the markup. */
.link-inline{ background:none; border:none; padding:0; font:inherit; color:var(--petrol);
  text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; cursor:pointer;
  transition:color .3s; }
.link-inline:hover{ color:var(--petrol-deep); }
.link-inline:focus-visible{ outline:2px solid var(--petrol); outline-offset:3px; border-radius:3px; }

/* CORE-BLOCK MARGIN RESETS: these were bare <div>/<span> in the handoff (no default margin); rebuilt as <p> blocks, they need every side zeroed explicitly against the browser's default p margin. */
.eyebrow, .sec-idx, .proj-tag, .proj-credit,
.board-cell .nm, .board-cell .rl, .board-cell .dsc, .jb-name,
.zweck-list .zn, .zweck-list .zm,
.qb-cap, .qb-fields .qb-dt, .qb-purpose .qb-dt, .qb-amount .qb-dt,
.band-lead, .band-key,
.proj-row-link, .link-wrap{
  margin:0;
}
/* .pillar .num keeps its own rule — margin:0 here would silently override its margin-left:auto. */
.pillar .num{ margin-top:0; margin-bottom:0; }
.board-cell .rl{ margin-top:4px; }
.board-cell .dsc{ margin-top:5px; }
.sub-gmbh{ margin-top:10px; margin-bottom:0; }
.qb-cap{ margin-bottom:22px; }
.qb-fields .qb-dt, .qb-purpose .qb-dt{ margin-bottom:6px; }
.qb-amount .qb-dt{ margin-bottom:5px; }
.band-key{ margin-top:auto; }

/* supporters strip — real placeholder marks instead of empty dashed boxes */
.sup-slot{ border-style:solid; border-color:rgba(11,102,121,.12); background:var(--card);
  display:flex; align-items:center; justify-content:center; padding:14px; }
/* definite height + auto width gives these viewBox-only SVGs something to size from — without it they collapse to 0×0. */
.sup-slot img{ height:clamp(32px,4vw,44px); width:auto; max-width:calc(100% - 4px); object-fit:contain; opacity:.7; }
/* GSI Kanton Bern logo (wp-image-282) sized up — its dense multi-line lockup is illegible at the uniform slot size; accepted tradeoff, no better asset available. */
/* .sup-slot:has(img.wp-image-282){ height:168px; } */
.sup-slot:has(img.wp-image-290) img{ height:clamp(70px,9vw,70px); }
/* @media (max-width:520px){ .sup-slot:has(img.wp-image-282){ height:140px; } } */
.link-inline:hover{ color:var(--petrol-deep); }
.link-inline:focus-visible{ outline:2px solid var(--petrol); outline-offset:3px; border-radius:3px; }

/* resets WP core's :where(figure){margin:0 0 1em} — otherwise leaks an extra 16px below any figure in normal flow. */
.hero-photo .wp-block-image,
.cool-frame .wp-block-image,
.avatar .wp-block-image,
.sub-panel .wp-block-image,
.qr-code .wp-block-image,
.sup-slot .wp-block-image,
.chip .wp-block-image{
  margin:0;
}

/* ---------- Inner-page shared components (Über die Stiftung, Förderprojekte, etc.) ---------- */

/* shared panel shell — white card, hairline border, standard radius */
.panel{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-card); }

/* section closing note: 2px turquoise left rule, quiet ink, <b> at Medium for emphasis. */
.sec-note{ margin:clamp(22px,2.4vw,30px) 0 0; padding-left:clamp(16px,1.6vw,22px);
  border-left:2px solid var(--turquoise); font-size:15px; line-height:1.7;
  color:var(--ink-soft); max-width:74ch; }
.sec-note b{ font-weight:500; color:var(--ink); }

/* WEITER coda: not navigation (header/footer handle that) — outline button reuses the nav Kontakt treatment. Always last before the footer. */
/* Fakten: quieter than the section eyebrow — base component shared by .next-band and .pk-sup. */
.facts-lab{ font-size:11px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--petrol); padding-top:3px; }

.next-band{ margin-top:clamp(22px,2.6vw,32px); border-top:1px solid rgba(11,102,121,.26);
  padding-top:18px; padding-bottom:20px; }
.next-band .facts-lab{ display:block; padding-top:0; margin:0; }
.next-band .nb-row{ display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(20px,3vw,44px); align-items:center; margin-top:10px; }
/* :not(.facts-lab): that label is a Paragraph block too, so this rule's higher specificity would otherwise override its own type treatment. */
.next-band p:not(.facts-lab){ margin:0; font-size:16px; line-height:1.5; color:var(--ink); max-width:56ch; }
.nb-btn{ display:inline-flex; align-items:center; gap:.55em; white-space:nowrap;
  font-size:14px; font-weight:500; letter-spacing:.01em;
  color:var(--petrol); background:transparent; border:1px solid rgba(11,102,121,.4);
  border-radius:100px; padding:11px 20px;
  transition:background .4s var(--ease-out), color .4s var(--ease-out), border-color .4s var(--ease-out); }
.nb-btn svg{ width:15px; height:15px; transition:transform .4s var(--ease-out); }
.nb-btn:hover{ background:var(--petrol); border-color:var(--petrol); color:#fff; }
.nb-btn:hover svg{ transform:translateX(4px); }
@media (max-width:760px){
  .next-band .nb-row{ grid-template-columns:1fr; gap:14px; }
  .nb-btn{ justify-self:start; }
}