/* Bloom Studio — component & motion styles. Tokens come from theme.json. */
:root{
  --bs-ink:var(--wp--preset--color--contrast);
  --bs-bg:var(--wp--preset--color--base);
  --bs-dim:var(--wp--preset--color--dim);
  --bs-line:var(--wp--preset--color--line);
}
html{ -webkit-font-smoothing:antialiased; }
img{ max-width:100%; height:auto; }
a{ color:inherit; }
::selection{ background:var(--bs-ink); color:var(--bs-bg); }

h1,h2,h3,h4{ overflow-wrap:anywhere; }

/* Some eyebrows are <h2> (section labels on /studio/, owner decision 04-H) while
   others stay <p>. theme.json styles every heading with the display face,
   weight 300 and line-height 1.02, so those three are pinned to the paragraph
   values here — the label must read identically whichever tag carries it.
   .hero__kick overrides the weight later in this file and still wins. */
.bs-eyebrow{ font-size:var(--wp--preset--font-size--sm); letter-spacing:.22em;
  text-transform:uppercase; color:var(--bs-dim);
  font-family:var(--wp--preset--font-family--body); font-weight:400; line-height:1.55; }

/* signet micro-bloom («Atmen», owner pick 2026-07-11): each square swells
   slightly outward from the figure's centroid and rotates a touch, staggered.
   The rects are wrapped in <g> because a CSS transform directly on a rect
   would override its attribute rotation (transform is a presentation attr). */
.bs-mark-breathe{ overflow:visible; } /* viewBox is tight — swelling squares must not clip */
.bs-mark-breathe g{ transform-box:fill-box; transform-origin:center;
  animation:bs-breathe 5.5s ease-in-out infinite; }
.bs-mark-breathe g:nth-of-type(1){ --bx:1.4px;  --by:2.9px;  --br:1.5deg; }
.bs-mark-breathe g:nth-of-type(2){ --bx:-2.6px; --by:1.1px;  --br:2.5deg; animation-delay:.45s; }
.bs-mark-breathe g:nth-of-type(3){ --bx:-1.2px; --by:-2.4px; --br:-3deg;  animation-delay:.9s; }
.bs-mark-breathe g:nth-of-type(4){ --bx:2.5px;  --by:-1.5px; --br:-2deg;  animation-delay:1.35s; }
@keyframes bs-breathe{
  0%, 100%{ transform:none; }
  50%{ transform:translate(var(--bx), var(--by)) rotate(var(--br)) scale(1.045); }
}

/* reveal-on-scroll (JS adds .is-in) */
.bs-reveal{ opacity:0; transform:translateY(40px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
.bs-reveal.is-in{ opacity:1; transform:none; }

/* custom cursor (desktop pointer only) */
.bs-cursor{ position:fixed; top:0; left:0; width:10px; height:10px; border-radius:50%;
  background:var(--bs-ink); pointer-events:none; z-index:9000; mix-blend-mode:difference;
  transform:translate(-50%,-50%); transition:width .25s, height .25s; display:none;
  opacity:0; } /* hidden until the first real mousemove (no stray dot at 0,0) */
.bs-cursor.is-live{ opacity:1; }
.bs-cursor .bs-cursor__lbl{ position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--bs-bg); opacity:0; transition:opacity .2s; }
.bs-cursor.is-big{ width:76px; height:76px; }
.bs-cursor.is-big .bs-cursor__lbl{ opacity:1; }
@media (hover:hover) and (pointer:fine){ body.bs-has-cursor{ cursor:none; } .bs-cursor{ display:block; } }

/* marquee — two identical copies come from the pattern (PHP), so the -50%
   loop is valid from the first frame. Copy wrappers are display:contents:
   all location spans sit flat in one flex row and every separator is the
   same ::after dot + margin, making the loop seam pixel-identical to the
   rhythm inside a copy. */
.bs-marquee{ overflow:hidden; white-space:nowrap; border-block:1px solid var(--bs-line);
  padding-block:var(--wp--preset--spacing--40); }
.bs-marquee__track{ display:flex; width:max-content; will-change:transform;
  animation:bs-slide 26s linear infinite;
  font-family:var(--wp--preset--font-family--display); font-weight:300;
  font-size:var(--wp--preset--font-size--xl); }
.bs-marquee__grp{ display:contents; }
.bs-marquee__grp > span::after{ content:'·'; margin-inline:.45em; }
@keyframes bs-slide{ to{ transform:translateX(-50%); } }

@media (prefers-reduced-motion:reduce){
  .bs-reveal{ opacity:1; transform:none; transition:none; }
  .bs-marquee__track{ animation:none; }
  *{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
}

/* header — fixed overlay; ALWAYS ink-on-dark (no blend tricks): transparent
   over the darkened hero top, solid + hairline once scrolled (JS .is-scrolled) */
.bs-header{ position:fixed; top:0; left:0; right:0; z-index:100;
  padding:20px clamp(22px,4vw,40px); color:var(--bs-ink);
  border-bottom:1px solid transparent;
  transition:background-color .25s ease, border-color .25s ease, padding .25s ease;
  align-items:center; }
.bs-header.is-scrolled{ background:rgba(11,11,12,.95);
  border-bottom-color:var(--bs-line); padding-top:12px; padding-bottom:12px; }
.bs-logo{ display:inline-flex; }
.bs-logo img, .bs-logo svg{ height:56px; width:auto; display:block; transition:height .25s ease; }
.bs-header.is-scrolled .bs-logo img{ height:44px; }
/* nav items mirror the mobile overlay (and the lowercase wordmark):
   Jost lowercase, quiet tracking. Weight 400 (not the 300 used at large
   sizes) — small sizes render optically lighter, 400 matches the footer's
   perceived weight. */
.bs-nav a{ font-family:var(--wp--preset--font-family--display); font-weight:400;
  font-size:1.0625rem; letter-spacing:.02em;
  text-transform:lowercase; text-decoration:none; opacity:.85; transition:opacity .25s ease; }
.bs-nav a:hover, .bs-nav a:focus-visible{ opacity:1; }
.bs-nav a[aria-current="page"], .bs-nav a.is-current{ opacity:1; text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:9px; text-decoration-color:var(--bs-dim); }
.bs-nav .bs-nav__cta > a[aria-current="page"], .bs-nav .bs-nav__cta > a.is-current{ text-decoration:none; }
.bs-nav .wp-block-navigation__container{ gap:clamp(18px, 2.4vw, 34px); align-items:center; }
.bs-nav .bs-nav__cta{ border:0; padding:0; }
/* no display here — WP hides the open button on desktop itself */
.bs-nav .wp-block-navigation__responsive-container-open,
.bs-nav .wp-block-navigation__responsive-container-close{
  align-items:center; justify-content:center; min-width:44px; min-height:44px; color:var(--bs-ink); }
.bs-nav .wp-block-navigation__responsive-container-open svg,
.bs-nav .wp-block-navigation__responsive-container-close svg{ width:26px; height:26px; }
@media(max-width:600px){
  .bs-header{ padding:14px 22px; }
  .bs-header.is-scrolled{ padding-top:10px; padding-bottom:10px; }
  .bs-logo img, .bs-logo svg{ height:44px; }
  .bs-header.is-scrolled .bs-logo img{ height:38px; }
}

/* footer — closing act: big brand, numbered nav, contact, bottom bar */
.bs-footer{ border-top:1px solid var(--bs-line);
  padding-block:var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
  color:var(--bs-dim); font-size:var(--wp--preset--font-size--sm); line-height:1.7; }
.bs-footer a{ color:var(--bs-ink); text-decoration:none; }
.bs-footer a:hover{ color:var(--bs-dim); }
.bs-footer__mark{ width:56px; height:56px; display:block; opacity:.9; color:var(--bs-ink); }
.bs-footer__grid{ display:grid; grid-template-columns:repeat(3, 1fr);
  gap:var(--wp--preset--spacing--40); margin-top:var(--wp--preset--spacing--50); }
.bs-footer__col .bs-eyebrow{ margin-bottom:14px; }
.bs-footer__col p{ max-width:36ch; margin-bottom:.9em; }
.bs-footer__col b{ color:var(--bs-ink); font-weight:500; }
.bs-footer__nav{ list-style:none; margin:0; padding:0; counter-reset:bs-fnav; }
.bs-footer__nav li{ counter-increment:bs-fnav; }
.bs-footer__nav a{ display:inline-flex; align-items:baseline; gap:12px; min-height:38px;
  font-family:var(--wp--preset--font-family--display); font-weight:300;
  font-size:var(--wp--preset--font-size--lg); }
.bs-footer__nav a::before{ content:counter(bs-fnav, decimal-leading-zero);
  font-family:var(--wp--preset--font-family--body); font-size:11px;
  letter-spacing:.16em; color:var(--bs-dim); }
.bs-footer__address{ font-style:normal; }
.bs-footer__reach{ margin-top:10px; line-height:2; }
.bs-footer__bottom{ display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:10px 24px; border-top:1px solid var(--bs-line);
  margin-top:var(--wp--preset--spacing--50); padding-top:20px; }
.bs-footer__bottom p{ margin:0; }
.bs-footer__legal a{ display:inline-flex; align-items:center; min-height:36px; }
@media(max-width:820px){ .bs-footer__grid{ grid-template-columns:1fr; } }

/* smooth in-page scrolling (anchors: #anfrage, Seitenanfang); header-safe offset */
html{ scroll-behavior:smooth; scroll-padding-top:96px; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

/* hero */
.hero{ position:relative; height:100svh; min-height:560px; overflow:hidden; }
/* WP flow layout injects margin-block-start on siblings — on the absolutely
   positioned veil/hairline (inset:0) that shifts their top edge down and
   leaves an unveiled strip above the header. Zero it (CLAUDE.md gotcha). */
.hero > *{ margin-block-start:0; }
.hero__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.72; transform:scale(1.15); }
.hero.is-revealed .hero__img{ transform:scale(1); transition:transform 2.2s cubic-bezier(.2,.6,.2,1); }
.hero__veil{ position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,11,12,.72) 0%, rgba(11,11,12,.34) 30%, rgba(11,11,12,.66) 100%); }
.hero__ghost{ position:absolute; right:-60px; bottom:-60px; width:460px; height:460px; opacity:.06; color:var(--bs-ink); }
.hero__ghost svg{ width:100%; height:100%; }
.hero__content{ position:absolute; left:clamp(22px,4vw,40px); right:clamp(22px,4vw,40px); bottom:clamp(40px,7vw,64px); }
/* kicker sits on photography — needs full ink, not the dim eyebrow gray */
.hero__kick{ overflow:hidden; color:var(--bs-ink); font-weight:500;
  text-shadow:0 1px 14px rgba(11,11,12,.55); }
.hero__kick > span{ display:inline-block; transform:translateY(110%); transition:transform 1s cubic-bezier(.16,1,.3,1) .1s; }
.hero.is-revealed .hero__kick > span{ transform:translateY(0); }
.hero__h1{ font-family:var(--wp--preset--font-family--display); font-weight:200; font-size:var(--wp--preset--font-size--display); line-height:.94; letter-spacing:-.03em; margin:.4em 0 0; }
/* overflow:hidden is the mask the headline slides out of. With line-height .94
   the line box is shorter than the font's descent, so any glyph reaching below
   the baseline gets its tail cut — «gebracht.» was the first headline with a
   descender and lost the g. The padding lowers the mask edge below the descent,
   the negative margin gives the space straight back so the rhythm is unchanged. */
.hero__line{ display:block; overflow:hidden; padding-bottom:.24em; margin-bottom:-.24em; }
.hero__line > i{ display:inline-block; font-style:normal; transform:translateY(115%); transition:transform 1s cubic-bezier(.16,1,.3,1); }
.hero.is-revealed .hero__line:nth-child(1) > i{ transform:translateY(0); transition-delay:.22s; }
.hero.is-revealed .hero__line:nth-child(2) > i{ transform:translateY(0); transition-delay:.34s; }
/* This is an <h2> (owner decision 01-H) but must read as the paragraph it was.
   theme.json styles EVERY heading with the display face, line-height 1.02 and
   negative tracking, and the UA gives h2 a 0.83em bottom margin — so family,
   line-height, tracking and both margins are pinned here. Measured before the
   swap: Inter, 25.6px, lh 39.68px (=1.55), tracking normal, margin 16px / 1em. */
.hero__sub{ margin:1rem 0 1em; max-width:44ch; color:var(--bs-ink); opacity:.82;
  font-family:var(--wp--preset--font-family--body);
  font-size:var(--wp--preset--font-size--lg); font-weight:300;
  line-height:1.55; letter-spacing:normal; }
.hero__acts{ margin-top:1.6rem; display:flex; gap:14px; flex-wrap:wrap; }
/* transparent border keeps both pills the same height — the ghost's real
   border otherwise adds 2px of intrinsic height next to the filled pill */
.hero__cta{ display:inline-block; padding:13px 22px; border:1px solid transparent; border-radius:999px; font-size:var(--wp--preset--font-size--sm); letter-spacing:.06em; text-decoration:none; min-height:44px; }
.hero__cta--primary{ background:var(--bs-ink); color:var(--bs-bg); }
.hero__cta--ghost{ border:1px solid rgba(244,244,242,.4); color:var(--bs-ink); }
/* mobile: keep the pills side by side on the left text axis (they wrap
   gracefully below ~360px via the base flex-wrap) — slightly tighter
   padding/gap so both fit next to each other on common phone widths */
@media(max-width:600px){ .hero__acts{ gap:10px; } .hero__cta{ padding:12px 14px; letter-spacing:.03em; } }

/* pillars */
.bs-pillars{ padding-block:var(--wp--preset--spacing--60); }
.bs-pillars__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--wp--preset--spacing--40); margin-top:var(--wp--preset--spacing--40); }
.bs-pillar{ position:relative; overflow:hidden;
  border:1px solid var(--bs-line); border-radius:8px; padding:var(--wp--preset--spacing--40);
  min-height:170px; display:flex; flex-direction:column; }
/* per-tile watermark (owner pick 2026-08-18): one composition per tile from the
   brand's square vocabulary, filled and layered so overlaps read brighter, sunk
   into the upper right corner where the small signet used to sit. Out of flow,
   so it takes no grid row and the tile's own edge crops it. Kept large enough
   to stay legible — below ~150px the nested figures turn into grey smudges. */
.bs-pillar__mark{ position:absolute; z-index:0; pointer-events:none;
  top:-24px; right:-20px; width:190px; height:190px;
  color:var(--bs-ink); fill:currentColor; fill-opacity:.42; stroke:none; opacity:.18; }
.bs-pillar__title{ position:relative; z-index:1;
  font-family:var(--wp--preset--font-family--display); font-weight:300;
  font-size:var(--wp--preset--font-size--lg); margin:auto 0 0; }
/* margin shorthand on purpose: the UA's 1em margin-bottom on <p> was adding
   16px of dead air below the last tile line (the tile is 16px shorter without it) */
.bs-pillar__copy{ position:relative; z-index:1;
  color:var(--bs-dim); margin:.6rem 0 0; font-size:var(--wp--preset--font-size--base); }
/* desktop: cards share the title/copy rows via subgrid so the titles align
   across cards regardless of copy length — margin:auto on the title made its
   position depend on how many lines follow.
   TWO rows only, one per text element (measured against three alternatives, see
   below). A subgrid item's padding insets just its FIRST and LAST track, so the
   old three-row layout (signet row + title + copy) only worked while a real
   element sat in row 1: with the mark out of flow, row 1 either ignored the
   tile's padding (text glued to the top edge) or refused to shrink below ~29px.
   With two rows both tracks are outer tracks, the padding holds, and the tile is
   exactly as tall as its content: 200px instead of 230px.
   The 8px of air the mark needs above the title rides on the top padding — there
   is no 1fr row left to carry it, which is what made the tiles shorter.
   Trade-off, deliberate: when copy lengths differ (some intermediate widths) the
   slack sits below the shorter copy. Bottom-anchoring the text instead (or
   align-self:end) moves that gap between title and copy, which reads worse, and
   dropping subgrid for plain flex loses the title alignment altogether. */
@media(min-width:821px){
  @supports(grid-template-rows:subgrid){
    .bs-pillars__grid{ grid-template-rows:auto auto; }
    .bs-pillar{ display:grid; grid-template-rows:subgrid; grid-row:span 2; row-gap:0;
      padding-block-start:calc(var(--wp--preset--spacing--40) + 8px); }
    .bs-pillar__title{ margin:0; }
  }
}
@media(max-width:600px){
  .bs-pillar__mark{ width:150px; height:150px; top:-18px; right:-16px; }
}
@media(max-width:820px){ .bs-pillars__grid{ grid-template-columns:1fr; } }

/* projects */
.bs-projects{ padding-block:var(--wp--preset--spacing--60); }
.bs-projects__head{ display:flex; justify-content:space-between; align-items:baseline;
  border-top:1px solid var(--bs-line); padding-top:var(--wp--preset--spacing--40); }
/* h3 on the front page, h2 elsewhere (see project-grid.php) — the UA margin
   differs per level (0.83em vs 1em), so pin it or the two renderings drift. */
.bs-projects__title{ font-family:var(--wp--preset--font-family--display); font-weight:200;
  font-size:var(--wp--preset--font-size--xl); margin:.83em 0; }
.bs-projects__all{ color:var(--bs-dim); font-size:var(--wp--preset--font-size--sm); letter-spacing:.1em; text-transform:uppercase; }
.bs-projects__grid{ display:grid; grid-template-columns:repeat(12,1fr);
  gap:var(--wp--preset--spacing--40); margin-top:var(--wp--preset--spacing--40); }
.bs-card{ position:relative; overflow:hidden; border-radius:6px; text-decoration:none; }
.bs-card__img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.16,1,.3,1); }
.bs-card:hover .bs-card__img{ transform:scale(1.05); }
/* caption sits on photography — dim gray is unreadable there, so the eyebrow
   uses ink at reduced opacity and the scrim starts high enough to back it */
.bs-card__cap{ position:absolute; inset:auto 0 0 0; padding:44px 16px 16px; display:block;
  background:linear-gradient(180deg, rgba(11,11,12,0) 0%, rgba(11,11,12,.5) 45%, rgba(11,11,12,.78) 100%); }
.bs-card__cap small{ display:block; font-size:var(--wp--preset--font-size--sm); letter-spacing:.16em;
  text-transform:uppercase; color:var(--bs-ink); opacity:.75; margin-bottom:3px; }
.bs-card__cap b{ font-weight:400; color:var(--bs-ink); }
/* aspect-ratio gives each card its natural height; the portrait (is-tall) is
   the tallest in its row, so the landscape beside it fills that row height
   (object-fit crops) instead of leaving empty space below. */
.bs-card{ align-self:stretch; }
.bs-card.is-wide{ grid-column:span 7; aspect-ratio:16/11; }
.bs-card.is-tall{ grid-column:span 5; aspect-ratio:4/5; }
.bs-card.is-half{ grid-column:span 6; aspect-ratio:3/2; }
/* width must be pinned too: height:100% + aspect-ratio otherwise derives the
   width from the row height (927px > grid area) and slides under the neighbour */
.bs-card.is-wide{ height:100%; width:100%; }
/* orientation-driven index rows (see docs/superpowers/specs/2026-07-10-*):
   duo = two portraits side by side, full = lone landscape leftover,
   solo = lone portrait leftover, centered */
.bs-card.is-duo{ grid-column:span 6; aspect-ratio:4/5; }
.bs-card.is-full{ grid-column:1/-1; aspect-ratio:2/1; }
.bs-card.is-solo{ grid-column:4/10; aspect-ratio:4/5; }
@media(max-width:820px){ .bs-card{ grid-column:1/-1!important; aspect-ratio:16/10!important; height:auto; } }

/* statement — authored <br> stanza. The section carries the hero inset
   itself (theme.json sets no root padding, so alignfull children would
   touch the viewport edge). The paragraph follows its longest line up to
   wide-size — double-class outranks the emitted .wp-container contentSize
   cap (CLAUDE.md gotcha) — and the type scales with the container (cqi)
   so the longest line always fits above 820px. Below that the scaled type
   would drop under ~24px and lose its weight — the <br>s switch off and
   the text wraps naturally at full XL size in the padded column. */
.bs-statement-wrap{ padding-block:var(--wp--preset--spacing--80);
  padding-inline:clamp(22px,4vw,40px); container-type:inline-size; }
.wp-block-group.bs-statement-wrap > .bs-statement{ max-width:var(--wp--style--global--wide-size); }
.bs-statement{ font-family:var(--wp--preset--font-family--display); font-weight:200;
  font-size:var(--wp--preset--font-size--xl); line-height:1.1; letter-spacing:-.02em;
  width:fit-content; will-change:opacity, transform; }
/* Unlit floor is a CONTRAST floor, not a taste value: ink #f4f4f2 over bg
   #0b0b0c composites to #646463 at .38 = 3.32:1. WCAG wants 3:1 here because
   the words are always large text (xl clamps at 1.9rem = 30.4px, the 4.2cqi
   cap above 821px still lands ~32px — never below the 24px threshold). The
   old .14 gave 1.41:1 and failed 19 nodes. Minimum passing is .3531, so .36
   would already do — .38 keeps reserve. Mirror any change in motion.js
   (the scrub floor overwrites this on first scroll). */
.bs-statement span{ opacity:.38; }
@media(min-width:821px){ .bs-statement{ font-size:min(var(--wp--preset--font-size--xl), 4.2cqi); } }
@media(max-width:820px){ .bs-statement br{ display:none; } }

/* cta band */
.bs-cta{ text-align:center; padding-block:var(--wp--preset--spacing--80); border-top:1px solid var(--bs-line); }
.bs-cta__title{ font-family:var(--wp--preset--font-family--display); font-weight:200;
  font-size:var(--wp--preset--font-size--display); letter-spacing:-.03em; line-height:1; margin:.2em 0 0; }
.bs-cta__btn{ display:inline-block; margin-top:1.4rem; border:1px solid var(--bs-ink); border-radius:999px;
  padding:15px 30px; font-size:var(--wp--preset--font-size--sm); letter-spacing:.12em; text-transform:uppercase;
  text-decoration:none; min-height:44px; }

/* mobile overlay: fullscreen statement menu — brand stays visible, numbered
   editorial stack, signet watermark, contact meta pinned to the bottom */
/* hard scroll-lock while the modal is open: WP only hides overflow on <html>,
   the body keeps scrolling underneath and iOS rubber-band shifts the fixed
   overlay visually */
html.has-modal-open, html.has-modal-open body{ overflow:hidden; overscroll-behavior:none; }
.bs-nav .wp-block-navigation__responsive-container.is-menu-open{
  background:var(--bs-bg); color:var(--bs-ink); animation:bs-menu-fade .3s ease both;
  overscroll-behavior:contain; }
@keyframes bs-menu-fade{ from{ opacity:0; } }
/* watermark is an inline svg injected by motion.js (8b) — a CSS background
   image cannot run the per-square breathe animation */
.bs-menu-mark{ display:none; }
.bs-nav .is-menu-open .bs-menu-mark{ display:block; position:absolute;
  right:-70px; bottom:-70px; width:min(72vw, 420px); aspect-ratio:1;
  pointer-events:none; opacity:.05; color:var(--bs-ink); }
.bs-nav .is-menu-open .bs-menu-mark svg{ width:100%; height:100%; }
/* keep the logo above the open overlay (same stacking context as the dialog) */
.bs-header:has(.wp-block-navigation__responsive-container.is-menu-open) .bs-logo{
  position:relative; z-index:100001; }
.bs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{
  display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start;
  min-height:100svh;
  padding:calc(76px + env(safe-area-inset-top)) clamp(24px, 7vw, 44px) calc(30px + env(safe-area-inset-bottom)); }
.bs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container{
  flex-direction:column; align-items:flex-start; justify-content:center;
  gap:clamp(16px, 3.4svh, 30px); text-align:left; counter-reset:bs-menu; margin-block:auto; }
.bs-nav .is-menu-open .wp-block-navigation__container > li{ counter-increment:bs-menu; }
.bs-nav .is-menu-open .wp-block-navigation__container a{ color:var(--bs-ink);
  font-family:var(--wp--preset--font-family--display); font-weight:300;
  font-size:clamp(2.2rem, 9.5vw, 3rem); letter-spacing:.02em; text-transform:lowercase;
  opacity:1; display:inline-flex; align-items:baseline; gap:16px; text-decoration:none; }
.bs-nav .is-menu-open .wp-block-navigation__container a::before{
  content:counter(bs-menu, decimal-leading-zero);
  font-family:var(--wp--preset--font-family--body); font-size:12px;
  letter-spacing:.16em; color:var(--bs-dim); }
.bs-nav .is-menu-open .wp-block-navigation__container a.is-current,
.bs-nav .is-menu-open .wp-block-navigation__container a[aria-current="page"]{ color:var(--bs-dim); }
.bs-nav .is-menu-open .bs-nav__cta > a{ border:0; padding:0; border-radius:0; min-height:0; }
/* contact meta (injected by motion.js; display gated to the open overlay) */
.bs-menu-meta{ display:none; }
.bs-nav .is-menu-open .bs-menu-meta{ display:flex; flex-wrap:wrap; gap:12px 40px;
  justify-content:space-between; border-top:1px solid var(--bs-line); padding-top:20px;
  font-size:var(--wp--preset--font-size--sm); color:var(--bs-dim); line-height:1.7;
  opacity:0; animation:bs-menu-in .5s cubic-bezier(.16,1,.3,1) .26s forwards; }
.bs-nav .is-menu-open .bs-menu-meta a{ color:var(--bs-ink); text-decoration:none;
  text-transform:none; letter-spacing:normal; font-size:inherit;
  font-family:var(--wp--preset--font-family--body); font-weight:400; }
.bs-nav .is-menu-open .wp-block-navigation__container > li{ opacity:0; transform:translateY(16px);
  animation:bs-menu-in .5s cubic-bezier(.16,1,.3,1) forwards; }
.bs-nav .is-menu-open .wp-block-navigation__container > li:nth-child(2){ animation-delay:.06s; }
.bs-nav .is-menu-open .wp-block-navigation__container > li:nth-child(3){ animation-delay:.12s; }
.bs-nav .is-menu-open .wp-block-navigation__container > li:nth-child(4){ animation-delay:.18s; }
@keyframes bs-menu-in{ to{ opacity:1; transform:none; } }

/* WP flow layout injects margin-block-start on wp-site-blocks siblings — zero it
   (gotcha) so main starts at the top edge under the fixed header */
.wp-site-blocks > *{ margin-block-start:0; }
/* pages without a full-bleed hero must clear the (taller) fixed header */
main:not(:has(.hero)){ padding-top:clamp(84px, 10vw, 112px); }

/* no-JS fallback: reveal states must not hide content if motion.js never runs */
html:not(.js) .bs-reveal{ opacity:1; transform:none; }
html:not(.js) .hero__kick > span,
html:not(.js) .hero__line > i{ transform:none; }
html:not(.js) .hero__img{ transform:scale(1); }

/* buttons: centered labels, no flex-stretch, real hover/focus states.
   border-box, or min-height:44 stacks ON TOP of the padding (no global reset) */
.hero__acts{ align-items:center; }
.hero__cta, .bs-cta__btn, .bs-nav .bs-nav__cta > a{ box-sizing:border-box; }
.hero__cta, .bs-cta__btn{ display:inline-flex; align-items:center; justify-content:center; }
.hero__cta, .bs-cta__btn, .bs-nav .bs-nav__cta > a{
  transition:background-color .25s ease, color .25s ease, border-color .25s ease, opacity .25s ease; }
.hero__cta--primary:hover{ opacity:.85; }
.hero__cta--ghost:hover{ border-color:var(--bs-ink); background:rgba(244,244,242,.08); }
.bs-cta__btn:hover{ background:var(--bs-ink); color:var(--bs-bg); }
/* nav pill lives on the anchor so the hit area is the full pill (≥44px) */
.bs-nav .bs-nav__cta{ border:0; padding:0; border-radius:0; }
.bs-nav .bs-nav__cta > a{ border:1px solid currentColor; border-radius:999px; padding:11px 18px; min-height:44px; display:inline-flex; align-items:center; }
.bs-nav .bs-nav__cta > a:hover{ background:rgba(244,244,242,.12); }
a:focus-visible{ outline:2px solid var(--bs-ink); outline-offset:3px; }

/* hero scroll cue — fades in after the headline */
.hero__cue{ position:absolute; left:50%; bottom:14px; transform:translateX(-50%); margin:0;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--bs-dim); opacity:0; }
.hero.is-revealed .hero__cue{ opacity:1; transition:opacity 1s ease 1.6s; }
html:not(.js) .hero__cue{ opacity:1; }

/* editorial index numbers on project cards (prototype signature) */
.bs-projects__grid{ counter-reset:bs-proj; }
.bs-card::after{ counter-increment:bs-proj; content:counter(bs-proj, decimal-leading-zero);
  position:absolute; top:14px; left:16px; font-size:11px; letter-spacing:.12em;
  color:var(--bs-ink); opacity:.55; }

/* project index (/projekte/): page head + filter chips */
.bs-page-head{ padding-top:var(--wp--preset--spacing--50); }
.bs-page-head h1{ font-family:var(--wp--preset--font-family--display); font-weight:200;
  font-size:var(--wp--preset--font-size--display); letter-spacing:-.03em; line-height:.98; margin:.15em 0 0; }
.bs-filter{ display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; padding-block:4px; margin-top:var(--wp--preset--spacing--40); }
.bs-filter::-webkit-scrollbar{ display:none; }
.bs-filter button{ flex:0 0 auto; box-sizing:border-box; font-family:inherit;
  font-size:var(--wp--preset--font-size--sm); letter-spacing:.08em; color:var(--bs-ink);
  background:transparent; border:1px solid var(--bs-line); border-radius:999px;
  padding:11px 18px; min-height:44px; cursor:pointer;
  transition:background-color .25s ease, color .25s ease, border-color .25s ease; }
.bs-filter button:hover{ border-color:var(--bs-ink); }
.bs-filter button.is-on{ background:var(--bs-ink); color:var(--bs-bg); border-color:var(--bs-ink); }
html:not(.js) .bs-filter{ display:none; }

/* single project — editorial head, full-bleed facts band + featured image,
   mosaic gallery (spec: docs/superpowers/specs/2026-07-10-projektdetail-design.md) */
.bs-single__head{ padding-top:var(--wp--preset--spacing--50); }
.bs-single__terms{ font-size:var(--wp--preset--font-size--sm); letter-spacing:.18em;
  text-transform:uppercase; color:var(--bs-dim); }
.bs-single__terms a{ color:var(--bs-dim); text-decoration:none; }
.bs-single__terms a:hover{ color:var(--bs-ink); }
.bs-single__title{ font-family:var(--wp--preset--font-family--display); font-weight:200;
  font-size:clamp(2.2rem, 1rem + 4.5vw, 4.5rem); letter-spacing:-.02em; line-height:1;
  margin:.25em 0 0; overflow-wrap:anywhere; }
/* facts: hairline band on the content column (same width as the prose) */
.bs-facts-band{ border-block:1px solid var(--bs-line);
  margin-block-start:var(--wp--preset--spacing--50); }
.bs-facts{ display:flex; flex-wrap:wrap; gap:var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
  padding:20px 0; }
.bs-facts div b{ display:block; font-size:var(--wp--preset--font-size--sm); letter-spacing:.18em;
  text-transform:uppercase; color:var(--bs-dim); font-weight:400; margin-bottom:4px; }
/* featured image on the content column, 16/9 crop */
.bs-single .bs-single__media{ margin-block-start:var(--wp--preset--spacing--40); }
.bs-single__media img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.bs-single .wp-block-post-content{ margin-block-start:var(--wp--preset--spacing--60); }
.bs-single .wp-block-post-content p{ line-height:1.7; }
/* services list: hairline dashes instead of bullets, lead-ins in full ink */
.bs-single .wp-block-post-content ul{ list-style:none; padding-left:0;
  margin-block:1.8rem; display:grid; gap:1.1rem; }
.bs-single .wp-block-post-content ul li{ position:relative; padding-left:36px;
  color:var(--bs-dim); line-height:1.65; }
.bs-single .wp-block-post-content ul li::before{ content:''; position:absolute; left:0; top:.72em;
  width:22px; height:1px; background:var(--bs-ink); opacity:.55; }
.bs-single .wp-block-post-content ul li strong{ color:var(--bs-ink); font-weight:500; }
/* large imagery: let galleries/images in project content span wide */
.wp-block-group.bs-single .wp-block-gallery,
.wp-block-group.bs-single .wp-block-image{ max-width:var(--wp--style--global--wide-size); }
.bs-single .wp-block-gallery img{ border-radius:6px; }
/* gallery mosaic — same pairing rhythm as the index grid (is-* classes
   come from the render_block filter in functions.php) */
.bs-single .wp-block-gallery.bs-gal{ display:grid; grid-template-columns:repeat(12,1fr);
  gap:14px; margin-block-start:var(--wp--preset--spacing--60); }
/* match core's :not(#individual-image) specificity hack for width/margin */
.bs-gal.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image){
  width:100%; margin:0; }
.bs-gal > figure.wp-block-image{ overflow:hidden; border-radius:6px; }
.bs-gal > figure.wp-block-image img{ width:100%; height:100%; object-fit:cover; }
.bs-gal > .is-wide{ grid-column:span 7; aspect-ratio:16/11; height:100%; width:100%; }
.bs-gal > .is-tall{ grid-column:span 5; aspect-ratio:4/5; }
.bs-gal > .is-half{ grid-column:span 6; aspect-ratio:3/2; }
.bs-gal > .is-duo{ grid-column:span 6; aspect-ratio:4/5; }
.bs-gal > .is-full{ grid-column:1/-1; aspect-ratio:2/1; }
.bs-gal > .is-solo{ grid-column:4/10; aspect-ratio:4/5; }
@media(max-width:820px){
  .bs-gal > figure.wp-block-image{ grid-column:1/-1!important; }
  .bs-gal > .is-tall, .bs-gal > .is-duo, .bs-gal > .is-solo{ aspect-ratio:4/5; }
  .bs-gal > .is-wide, .bs-gal > .is-half, .bs-gal > .is-full{ aspect-ratio:16/10; }
}
/* mobile inset for the constrained column (theme has no root padding) */
@media(max-width:820px){
  .bs-single__head,
  .bs-single .bs-facts,
  .bs-single .bs-single__media,
  .bs-single .bs-pn,
  .bs-single .wp-block-post-content > *{ padding-inline:clamp(22px,4vw,40px); }
}
/* prev/next — band with eyebrow + project title */
.bs-pn{ display:flex; justify-content:space-between; gap:24px; border-top:1px solid var(--bs-line);
  padding-top:var(--wp--preset--spacing--40); margin-top:var(--wp--preset--spacing--50); }
.bs-pn > div{ display:grid; gap:6px; }
.bs-pn > div::before{ font-size:var(--wp--preset--font-size--sm); letter-spacing:.18em;
  text-transform:uppercase; color:var(--bs-dim); }
/* WP semantics: "next" = newer post. The index lists newest first, so the
   newer post reads as the PREVIOUS project (left) and the older post as the
   NEXT project (right). A missing neighbour still renders an empty div —
   hide it so no orphaned eyebrow appears. */
.bs-pn .post-navigation-link-next::before{ content:'← Vorheriges Projekt'; }
.bs-pn .post-navigation-link-previous::before{ content:'Nächstes Projekt →'; }
.bs-pn > div:not(:has(a)){ display:none; }
.bs-pn a{ color:var(--bs-ink); text-decoration:none; min-height:44px; display:inline-flex; align-items:center;
  font-family:var(--wp--preset--font-family--display); font-weight:300;
  font-size:var(--wp--preset--font-size--lg); }
.bs-pn a:hover{ color:var(--bs-dim); }
.bs-pn .post-navigation-link-previous{ margin-left:auto; text-align:right; justify-items:end; }
@media(max-width:600px){ .bs-pn{ flex-direction:column; }
  .bs-pn .post-navigation-link-previous{ margin-left:0; text-align:left; justify-items:start; } }

/* services detail (/leistungen/) */
.bs-services{ padding-bottom:var(--wp--preset--spacing--60); }
.bs-svc{ display:grid; grid-template-columns:5fr 7fr; gap:var(--wp--preset--spacing--40);
  border-top:1px solid var(--bs-line); padding-block:var(--wp--preset--spacing--50);
  margin-top:var(--wp--preset--spacing--40); }
.bs-svc__no{ font-size:var(--wp--preset--font-size--sm); letter-spacing:.18em; color:var(--bs-dim); }
.bs-svc__title{ font-family:var(--wp--preset--font-family--display); font-weight:200;
  font-size:var(--wp--preset--font-size--xl); letter-spacing:-.01em; margin-top:.3em; }
.bs-svc__claim{ color:var(--bs-dim); margin-top:.8em; max-width:30ch; font-weight:300;
  font-size:var(--wp--preset--font-size--lg); line-height:1.3; }
.bs-svc__body p{ margin-bottom:1em; }
.bs-svc__body ul{ margin:0 0 1em 1.1em; color:var(--bs-dim); }
.bs-svc__body li{ margin-bottom:.35em; }
.bs-svc__link{ display:inline-flex; align-items:center; min-height:44px; color:var(--bs-ink);
  font-size:var(--wp--preset--font-size--sm); letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; border-bottom:1px solid var(--bs-line); }
.bs-svc__link:hover{ border-color:var(--bs-ink); }
@media(max-width:820px){ .bs-svc{ grid-template-columns:1fr; } }

/* studio */
.bs-studio{ padding-bottom:var(--wp--preset--spacing--60); }
.bs-studio__intro{ max-width:62ch; margin-top:var(--wp--preset--spacing--40); }
.bs-studio__lead{ font-family:var(--wp--preset--font-family--display); font-weight:300;
  font-size:var(--wp--preset--font-size--lg); line-height:1.35; margin-bottom:1em; }
/* margin-bottom pinned to the paragraph's 1em: these labels are <h2> now and the
   UA would give them 0.83em instead */
.bs-studio__sub{ margin:var(--wp--preset--spacing--60) 0 1em; }
/* keyword-bearing subtitle under the h1 (04-H2). Display face like the lead it
   introduces, but dimmed and a step smaller so the h1 keeps the stage. */
.bs-studio__tagline{ font-family:var(--wp--preset--font-family--display); font-weight:300;
  font-size:clamp(1.15rem, 1rem + .6vw, 1.5rem); line-height:1.3; letter-spacing:-.01em;
  color:var(--bs-dim); max-width:34ch;
  margin:var(--wp--preset--spacing--40) 0 0; }
.bs-studio__tagline + .bs-studio__intro{ margin-top:var(--wp--preset--spacing--20); }
.bs-studio .bs-pillars__grid{ margin-top:var(--wp--preset--spacing--40); }
/* team — «typografische Wand» (owner pick 2026-08-18): the names ARE the
   layout, set large and hairline-separated like the footer nav; a sticky stage
   on the right follows whatever row is hovered/tapped (motion.js block 10).
   The stage is aria-hidden — it only repeats the row's own text, and the
   portraits that land in it later are decorative. Rows stay plain <li>: there
   are no person pages to link to, so nothing here is interactive by contract. */
.bs-team{ display:grid; grid-template-columns:1.35fr .65fr;
  gap:var(--wp--preset--spacing--50); align-items:start;
  margin-top:var(--wp--preset--spacing--40); }
.bs-team__list{ list-style:none; margin:0; padding:0; }
/* wrap + a nowrap name: in this block the names carry the layout, so the ROLE is
   the part that gives way. Without this the nowrap role wins the shrink fight and
   breaks a name across two lines (measured: «Vuk Vukovic» + «Leitung Bau-
   management» needs 298px, a 320px screen offers 279). Content-driven — no
   breakpoint to re-tune when a role gets longer. Keep names under ~20 chars:
   nowrap means a longer one would overflow instead of wrapping. */
.bs-team__row{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:2px 16px;
  border-bottom:1px solid var(--bs-line); padding-block:16px;
  transition:padding-left .3s cubic-bezier(.16,1,.3,1); }
.bs-team__row:first-child{ border-top:1px solid var(--bs-line); }
.bs-team__nm{ font-family:var(--wp--preset--font-family--display); font-weight:300;
  font-size:clamp(1.4rem, 1rem + 1.6vw, 2.1rem); line-height:1.1;
  color:var(--bs-dim); transition:color .3s ease; white-space:nowrap; }
.bs-team__rl{ color:#55555a; font-size:var(--wp--preset--font-size--sm); letter-spacing:.14em;
  text-transform:uppercase; white-space:nowrap; transition:color .3s ease; }
.bs-team__row.is-on{ padding-left:14px; }
.bs-team__row.is-on .bs-team__nm{ color:var(--bs-ink); }
.bs-team__row.is-on .bs-team__rl{ color:var(--bs-dim); }

.bs-team__stage{ position:sticky; top:96px; } /* clears the fixed header */
/* square, not portrait: at six rows a 3:4 stage hangs ~140px below the list and
   the block looks unfinished — and the square is the brand's own form. Headshots
   crop to it without loss. */
.bs-team__box{ position:relative; aspect-ratio:1; overflow:hidden;
  border:1px solid var(--bs-line); border-radius:6px; }
.bs-team__panel{ position:absolute; inset:0; display:grid; place-items:center;
  opacity:0; transition:opacity .45s ease; }
.bs-team__panel.is-on{ opacity:1; }
/* portraits later: drop an <img class="bs-team__photo"> into the panel — it sits
   under the monogram, which then gets hidden per panel */
.bs-team__photo{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; filter:grayscale(1) contrast(.95); }
.bs-team__sig{ position:absolute; width:62%; height:62%; color:var(--bs-ink);
  fill:none; stroke:currentColor; stroke-width:1.6; opacity:.14; overflow:visible; }
.bs-team__mono{ position:relative; font-family:var(--wp--preset--font-family--display);
  font-weight:300; font-size:clamp(2.6rem, 5vw, 4.4rem); color:var(--bs-ink);
  opacity:.5; letter-spacing:.02em; }
.bs-team__cap{ display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  margin:14px 0 0; }
.bs-team__cap .bs-team__nm{ font-size:var(--wp--preset--font-size--lg); color:var(--bs-ink); }
.bs-team__cap .bs-team__rl{ color:var(--bs-dim); font-size:11px; }

/* below the two-column threshold the stage goes: on a phone it would be a big
   square of initials above a list that already says the same. When the real
   portraits arrive, revisit — a per-row thumbnail is the mobile answer, not this. */
@media(max-width:900px){
  .bs-team{ grid-template-columns:1fr; }
  .bs-team__stage{ display:none; }
  .bs-team__row.is-on{ padding-left:0; }
  .bs-team__row .bs-team__nm{ color:var(--bs-ink); }
  .bs-team__row .bs-team__rl{ color:var(--bs-dim); }
}
@media(max-width:600px){
  .bs-team__rl{ font-size:11px; }
}
/* on the narrowest screens the wrap above would fire on SOME rows only (long role
   vs short one) and the wall loses its rhythm — so below the point where the
   longest pair still fits, every row stacks and all six read alike. */
@media(max-width:380px){
  .bs-team__row{ flex-direction:column; align-items:flex-start; }
}


/* generic page (legal etc.) — same rhythm as the project detail column */
.bs-page{ padding-bottom:var(--wp--preset--spacing--60); }
.bs-page .wp-block-post-content{ margin-block-start:var(--wp--preset--spacing--50); }
.bs-page .wp-block-post-content p{ line-height:1.7; opacity:.86; }
.bs-page .wp-block-post-content h2{ font-family:var(--wp--preset--font-family--display);
  font-weight:300; font-size:var(--wp--preset--font-size--lg); margin:2.6rem 0 0; }
.bs-page .wp-block-post-content a{ color:var(--bs-ink); text-decoration:underline;
  text-underline-offset:3px; text-decoration-color:var(--bs-dim); }
.bs-page .wp-block-post-content a:hover{ text-decoration-color:var(--bs-ink); }
/* mobile inset (theme has no root padding — same fix as .bs-single) */
@media(max-width:820px){
  .bs-page .wp-block-post-content > *{ padding-inline:clamp(22px,4vw,40px); }
}

/* archive/search fallback */
.bs-archive{ padding-bottom:var(--wp--preset--spacing--60); }
.bs-archive .bs-archive__item{ font-family:var(--wp--preset--font-family--display); font-weight:300;
  font-size:var(--wp--preset--font-size--lg); border-bottom:1px solid var(--bs-line); padding-block:16px; margin:0; }
.bs-archive .bs-archive__item a{ text-decoration:none; }
.bs-archive .bs-archive__item a:hover{ color:var(--bs-dim); }
.bs-archive__pager{ margin-top:var(--wp--preset--spacing--40); font-size:var(--wp--preset--font-size--sm);
  letter-spacing:.1em; text-transform:uppercase; }
.bs-archive__pager a{ text-decoration:none; }

/* 404 */
.bs-404{ padding-block:var(--wp--preset--spacing--60) var(--wp--preset--spacing--80); min-height:52vh; }
.bs-404__title{ font-family:var(--wp--preset--font-family--display); font-weight:200;
  font-size:var(--wp--preset--font-size--display); letter-spacing:-.03em; line-height:1; margin:.2em 0 0; }
.bs-404__text{ color:var(--bs-dim); margin-top:1em; max-width:52ch; }
.bs-404__acts{ margin-top:1.6rem; display:flex; gap:14px; flex-wrap:wrap; }

/* contact page */
.bs-contact{ padding-bottom:var(--wp--preset--spacing--60); }
.bs-contact__grid{ display:grid; grid-template-columns:7fr 4fr; gap:var(--wp--preset--spacing--50);
  margin-top:var(--wp--preset--spacing--40); }
.bs-contact__form label{ display:block; font-size:var(--wp--preset--font-size--sm);
  letter-spacing:.14em; text-transform:uppercase; color:var(--bs-dim); margin-bottom:6px; }
.bs-contact__form input[type="text"],
.bs-contact__form input[type="email"],
.bs-contact__form select,
.bs-contact__form textarea{ box-sizing:border-box; width:100%; min-height:48px;
  background:transparent; color:var(--bs-ink); border:1px solid var(--bs-line);
  border-radius:6px; padding:12px 14px; font:inherit; }
.bs-contact__form textarea{ resize:vertical; }
.bs-contact__form input:focus, .bs-contact__form select:focus, .bs-contact__form textarea:focus{
  outline:none; border-color:var(--bs-ink); }
.bs-contact__form select{ appearance:none; -webkit-appearance:none;
  background-image:linear-gradient(45deg, transparent 49%, var(--bs-dim) 50%),
    linear-gradient(-45deg, transparent 49%, var(--bs-dim) 50%);
  background-position:calc(100% - 20px) 55%, calc(100% - 14px) 55%;
  background-size:6px 6px; background-repeat:no-repeat; }
.bs-contact__form p{ margin-bottom:1.1em; }
/* required marker: labels are dim, so the asterisk needs full ink to read as a
   marker. letter-spacing:0 — the label's .14em tracking would push it away from
   the word. margin shorthand on the note: no global reset, a raw <p> keeps the
   UA's 1em margin-top and would double the gap above the first field. */
.bs-req{ color:var(--bs-ink); letter-spacing:0; }
.bs-contact__form .bs-formnote{ margin:0 0 1.6em; color:var(--bs-dim);
  font-size:var(--wp--preset--font-size--sm); }
.bs-consent label{ display:flex; gap:10px; align-items:flex-start;
  text-transform:none; letter-spacing:0; font-size:var(--wp--preset--font-size--sm);
  color:var(--bs-dim); line-height:1.5; }
.bs-consent input{ margin-top:3px; accent-color:var(--wp--preset--color--contrast); }
.bs-consent a{ color:var(--bs-ink); }
.bs-submit{ box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:13px 26px; border-radius:999px; border:0; cursor:pointer;
  background:var(--bs-ink); color:var(--bs-bg); font:inherit;
  font-size:var(--wp--preset--font-size--sm); letter-spacing:.1em; text-transform:uppercase;
  transition:opacity .25s ease; }
.bs-submit:hover{ opacity:.85; }
.bs-hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
.bs-notice{ border:1px solid var(--bs-line); border-radius:6px; padding:14px 16px;
  margin-bottom:1.2em; font-size:var(--wp--preset--font-size--base); }
.bs-notice.is-ok{ border-color:var(--bs-ink); }
.bs-notice.is-err{ border-color:#8a4a42; }
.bs-contact__info p{ margin-bottom:1em; }
.bs-contact__info a{ color:var(--bs-ink); text-decoration:none; }
.bs-contact__info a:hover{ color:var(--bs-dim); }
.bs-contact__note{ color:var(--bs-dim); font-size:var(--wp--preset--font-size--sm); }
@media(max-width:820px){ .bs-contact__grid{ grid-template-columns:1fr; } }

/* widen pillars + projects to wideSize (WP constrained layout caps children at
   contentSize; double-class specificity beats the emitted .wp-container rule) */
.wp-block-group.bs-pillars,
.wp-block-group.bs-projects,
.wp-block-group.bs-services,
.wp-block-group.bs-studio,
.wp-block-group.bs-contact,
.wp-block-group.bs-footer{ padding-inline:clamp(22px, 4vw, 40px); }
.wp-block-group.bs-pillars > *,
.wp-block-group.bs-projects > *,
.wp-block-group.bs-services > *,
.wp-block-group.bs-studio > *,
.wp-block-group.bs-contact > *,
.wp-block-group.bs-footer > *{ max-width:var(--wp--style--global--wide-size); }

/* category landing pages (/projekte/kategorie/<slug>/) — the five leistungs-
   bereiche. Two of them carry almost no projects, so the text has to hold the
   page on its own; it is set on the reading column, the grid stays wide. */
.bs-cat__intro{ max-width:62ch; margin-top:var(--wp--preset--spacing--40); }
.bs-cat__lead{ font-family:var(--wp--preset--font-family--display); font-weight:300;
  font-size:var(--wp--preset--font-size--lg); line-height:1.35; margin:0 0 1em; }
.bs-cat__intro p + p{ margin:0 0 1em; color:var(--bs-dim); }
/* two columns of short blocks: reads faster than one long column and keeps the
   page from looking like a wall of prose */
.bs-cat__sections{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
  margin-top:var(--wp--preset--spacing--60); }
.bs-cat__block{ max-width:52ch; }
.bs-cat__h2{ font-family:var(--wp--preset--font-family--display); font-weight:300;
  font-size:var(--wp--preset--font-size--lg); line-height:1.2; margin:0; }
.bs-cat__copy{ margin:.6rem 0 0; color:var(--bs-dim); }
.bs-cat__sub{ margin:var(--wp--preset--spacing--60) 0 0; }
.bs-cat__outro{ max-width:62ch; margin:.8rem 0 0; color:var(--bs-dim); }
/* the chips are links here, not buttons — same look, real navigation */
.bs-cat__nav{ margin-top:var(--wp--preset--spacing--40); }
.bs-cat__nav a, .bs-cat__nav span{ display:inline-flex; align-items:center; box-sizing:border-box;
  min-height:38px; padding:8px 16px; border:1px solid var(--bs-line); border-radius:999px;
  font-size:var(--wp--preset--font-size--sm); letter-spacing:.06em; color:var(--bs-dim);
  text-decoration:none; transition:border-color .25s ease, color .25s ease; }
.bs-cat__nav a:hover{ border-color:var(--bs-ink); color:var(--bs-ink); }
.bs-cat__nav .is-on{ border-color:var(--bs-ink); color:var(--bs-ink); }
.bs-cat .bs-projects__grid{ margin-top:var(--wp--preset--spacing--40); }
@media(max-width:820px){
  .bs-cat__sections{ grid-template-columns:minmax(0,1fr); gap:var(--wp--preset--spacing--40); }
}