/* ============================================================
   LOCAL FONTS
   ============================================================ */
@font-face { font-family:'Inter'; font-style:normal; font-weight:300; font-display:swap; src:url('/assets/fonts/inter-v20-latin-300.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/inter-v20-latin-regular.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('/assets/fonts/inter-v20-latin-500.woff2') format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:300; font-display:swap; src:url('/assets/fonts/cormorant-garamond-v21-latin-300.woff2') format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:italic; font-weight:300; font-display:swap; src:url('/assets/fonts/cormorant-garamond-v21-latin-300italic.woff2') format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/cormorant-garamond-v21-latin-regular.woff2') format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:italic; font-weight:400; font-display:swap; src:url('/assets/fonts/cormorant-garamond-v21-latin-italic.woff2') format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:500; font-display:swap; src:url('/assets/fonts/cormorant-garamond-v21-latin-500.woff2') format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:italic; font-weight:500; font-display:swap; src:url('/assets/fonts/cormorant-garamond-v21-latin-500italic.woff2') format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:600; font-display:swap; src:url('/assets/fonts/cormorant-garamond-v21-latin-600.woff2') format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:italic; font-weight:600; font-display:swap; src:url('/assets/fonts/cormorant-garamond-v21-latin-600italic.woff2') format('woff2'); }

/* ============================================================
   CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
  --color-bg:         #faf9f7;
  --color-bg-alt:     #f4f0eb;
  --color-text:       #1a1814;
  --color-text-muted: #7a6e65;
  --color-border:     #e2dbd3;

  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans:  'Inter', system-ui, -apple-system, sans-serif;

  --fw-light:  300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;

  --size-xs:   0.75rem;
  --size-sm:   0.875rem;
  --size-base: 1rem;
  --size-lg:   1.125rem;
  --size-xl:   1.25rem;
  --size-2xl:  1.5rem;
  --size-3xl:  2rem;
  --size-4xl:  2.75rem;
  --size-5xl:  3.5rem;

  --space-1:  0.25rem;  --space-2:  0.5rem;   --space-3:  0.75rem;
  --space-4:  1rem;     --space-5:  1.25rem;  --space-6:  1.5rem;
  --space-8:  2rem;     --space-10: 2.5rem;   --space-12: 3rem;
  --space-16: 4rem;     --space-20: 5rem;     --space-24: 6rem;

  --radius-sm: 2px; --radius: 3px; --radius-lg: 6px;
  --transition: 220ms ease;
  --container-max: 1180px;
  --header-h: 72px;
}

/* ============================================================
   RESET
   ============================================================ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { font-family:var(--font-sans); font-weight:var(--fw-light); font-size:var(--size-base); line-height:1.7; color:var(--color-text); background:var(--color-bg); -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4 { font-family:var(--font-serif); font-weight:var(--fw-light); line-height:1.15; color:var(--color-text); }
h1 { font-size:clamp(var(--size-3xl),5vw,var(--size-5xl)); }
h2 { font-size:clamp(var(--size-2xl),3vw,var(--size-3xl)); }
h3 { font-size:var(--size-xl); }
a { color:inherit; text-decoration:none; }
img,video { display:block; max-width:100%; }
ul,ol { list-style:none; }

/* ============================================================
   LAYOUT
   ============================================================ */
.container { max-width:var(--container-max); margin-inline:auto; padding-inline:var(--space-8); }
.section { padding-block:var(--space-24); }
.section--alt { background:var(--color-bg-alt); padding-block:var(--space-20); }

/* ============================================================
   TYPOGRAPHY UTILITIES
   ============================================================ */
.page__label {
  font-family:var(--font-sans); font-size:var(--size-xs); font-weight:var(--fw-normal);
  letter-spacing:0.20em; text-transform:uppercase; color:var(--color-text-muted);
  margin-bottom:var(--space-4); display:block;
}
.page__label--light { color:rgba(255,255,255,0.82); letter-spacing:0.22em; }

.page__body {
  font-family:var(--font-sans); font-size:var(--size-lg); font-weight:var(--fw-light);
  line-height:1.8; color:var(--color-text-muted); max-width:68ch;
}

.hero__subline {
  font-family:var(--font-sans); font-size:var(--size-xl); font-weight:var(--fw-light);
  line-height:1.7; color:var(--color-text-muted); max-width:60ch; margin-top:var(--space-6);
}
.hero__subline--light { color:rgba(255,255,255,0.92); text-shadow:0 1px 8px rgba(0,0,0,0.18); }

/* ============================================================
   HEADER
   ============================================================ */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 300;
  height: var(--header-h);
  display: flex;
  align-items: center;

  /* Base state: solid */
  background: var(--color-bg-solid, var(--color-bg));
  border-bottom: 1px solid var(--color-border);
  box-shadow: none;

  /* All transitions share one curve */
  transition:
    background   0.55s cubic-bezier(.19,1,.22,1),
    border-color 0.45s cubic-bezier(.19,1,.22,1),
    box-shadow   0.45s ease,
    backdrop-filter 0.55s ease,
    transform    0.42s cubic-bezier(.19,1,.22,1);
  will-change: transform, background;
}

/* ── Spacer so content isn't hidden under fixed header ────── */
.header-spacer {
  height: var(--header-h);
  display: block;
  /* Prevents FOUC on non-hero pages */
}

/* ── Transparent state — over dark hero ───────────────────── */
.header--transparent {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
}

/* ── Scrolled state — frosted glass ──────────────────────────
   Backdrop-filter creates the premium frosted look.
   Falls back gracefully where unsupported.            ────── */
.header--scrolled {
  background: var(--color-bg-alpha, rgba(248,245,240,0.88));
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom-color: var(--color-border);
  box-shadow: 0 1px 0 var(--color-border);
}

/* ── Hidden — scrolling down ──────────────────────────────── */
.header--hidden {
  transform: translateY(-100%);
}

/* ── Inner layout ─────────────────────────────────────────── */
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* ── Logo ─────────────────────────────────────────────────── */
.header__logo-img {
  height: 18px;
  width: auto;
  display: block;
  transition: filter 0.45s cubic-bezier(.19,1,.22,1), opacity 0.45s ease;
}

/* White logo on transparent (dark hero) background */
.header--transparent .header__logo-img {
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

/* ── Nav links: white on transparent ─────────────────────── */
.header--transparent .nav__link,
.header--transparent .nav__dropdown-trigger,
.header--transparent .nav__lang-link {
  color: rgba(255,255,255,0.78);
}

.header--transparent .nav__link:hover,
.header--transparent .nav__link--active,
.header--transparent .nav__dropdown-trigger:hover,
.header--transparent .nav__item--open .nav__dropdown-trigger,
.header--transparent .nav__lang-link:hover,
.header--transparent .nav__lang-link--active {
  color: rgba(255,255,255,1);
}

.header--transparent .nav__lang {
  border-left-color: rgba(255,255,255,0.2);
}

/* Burger on transparent */
.header--transparent .header__burger span {
  background: rgba(255,255,255,0.85);
}

/* ============================================================
   NAV
   ============================================================ */
.nav { display:flex; align-items:center; gap:var(--space-8); }
.nav__list { display:flex; align-items:center; gap:var(--space-8); }
.nav__item { position:relative; }

.nav__link {
  font-family:var(--font-sans); font-size:var(--size-xs); font-weight:var(--fw-normal);
  letter-spacing:0.12em; text-transform:uppercase; color:var(--color-text-muted);
  padding-block:var(--space-1); position:relative; display:inline-block;
  transition:color 300ms ease; background:none; border:none; cursor:pointer;
}
.nav__link::after {
  content:''; position:absolute; bottom:0; left:0; width:100%; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:center;
  transition:transform 600ms cubic-bezier(.19,1,.22,1);
}
.nav__link:hover,.nav__link--active { color:var(--color-text); }
.nav__link:hover::after,.nav__link--active::after { transform:scaleX(1); }

/* Dropdown */
.nav__item--dropdown { position:relative; }
.nav__dropdown-trigger {
  display:flex; align-items:center; gap:5px; font-family:var(--font-sans);
  font-size:var(--size-xs); font-weight:var(--fw-normal); letter-spacing:0.12em;
  text-transform:uppercase; color:var(--color-text-muted); background:none; border:none;
  cursor:pointer; padding-block:var(--space-1); position:relative; transition:color 300ms ease;
}
.nav__dropdown-trigger::after {
  content:''; position:absolute; bottom:0; left:0; width:100%; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:center;
  transition:transform 600ms cubic-bezier(.19,1,.22,1);
}
.nav__dropdown-trigger:hover,.nav__item--open .nav__dropdown-trigger { color:var(--color-text); }
.nav__dropdown-trigger:hover::after,.nav__item--open .nav__dropdown-trigger::after { transform:scaleX(1); }

.nav__chevron { width:8px; height:5px; position:relative; top:1px; flex-shrink:0; display:inline-block; }
.nav__chevron::before {
  content:''; display:block; width:6px; height:6px;
  border-right:1px solid currentColor; border-bottom:1px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px); transition:transform var(--transition);
}
.nav__item--open .nav__chevron::before { transform:rotate(-135deg) translate(-2px,-2px); }

.nav__dropdown {
  display:none; position:absolute; top:calc(100% + 12px); left:50%;
  transform:translateX(-50%); min-width:240px; background:var(--color-bg);
  border:1px solid var(--color-border); padding:var(--space-4) 0; z-index:200; list-style:none;
}
.nav__item--open .nav__dropdown { display:block; }

.nav__dropdown-link {
  display:block; padding:var(--space-4) var(--space-8); font-family:var(--font-sans);
  font-size:var(--size-xs); font-weight:var(--fw-normal); letter-spacing:0.12em;
  text-transform:uppercase; color:var(--color-text-muted); text-decoration:none;
  transition:color 300ms ease; white-space:nowrap;
}
.nav__dropdown-link:hover,.nav__dropdown-link--active { color:var(--color-text); }

/* Lang switcher */
.nav__lang { display:flex; align-items:center; gap:var(--space-4); padding-left:var(--space-8); border-left:1px solid var(--color-border); }
.nav__lang-link { font-size:var(--size-xs); letter-spacing:0.08em; color:var(--color-text-muted); transition:color 300ms ease; }
.nav__lang-link--active,.nav__lang-link:hover { color:var(--color-text); }

/* ============================================================
   PAGE HERO
   ============================================================ */
.content-page__header--media { padding:0; border-bottom:none; }
.page-hero {
  position: relative;
  height: clamp(420px, 48vw, 620px);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  /* Hero fills from top — fixed header overlays transparently */
}
.page-hero__media {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:center; filter:grayscale(28%) contrast(1.05) brightness(0.97);
}
.page-hero__overlay {
  position:absolute; inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.62) 100%);
}
.page-hero__content {
  position: relative;
  z-index: 2;
  /* Top padding = header height + breathing room
     Prevents headline from hiding behind fixed header */
  padding-top: calc(var(--header-h) + var(--space-10));
  padding-bottom: var(--space-12);
}
.page-hero__content h1 { color:#fff; text-shadow:0 1px 10px rgba(0,0,0,0.2); }

.content-page__header:not(.content-page__header--media) {
  padding-block:var(--space-20) var(--space-12); border-bottom:1px solid var(--color-border);
}

/* ============================================================
   BUTTONS & CTA
   ============================================================ */
.btn {
  display:inline-block; font-family:var(--font-sans); font-size:var(--size-xs);
  font-weight:var(--fw-normal); letter-spacing:0.18em; text-transform:uppercase;
  color:var(--color-text); border:1px solid var(--color-text); padding:var(--space-4) var(--space-10);
  transition:background var(--transition),color var(--transition); cursor:pointer; background:transparent;
}
.btn:hover { background:var(--color-text); color:var(--color-bg); }

.cta-block { display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-6); }
.cta-block h2 { max-width:44ch; }

.outbound-note { font-size:var(--size-xs); color:var(--color-text-muted); letter-spacing:0.04em; line-height:1.8; }
.outbound-note a { color:var(--color-text-muted); border-bottom:1px solid var(--color-border); transition:color var(--transition),border-color var(--transition); }
.outbound-note a:hover { color:var(--color-text); border-bottom-color:var(--color-text); }

/* ============================================================
   SERVICE GRID (Leistungsübersicht)
   ============================================================ */
.services__grid {
  display:grid; grid-template-columns:repeat(2,1fr); gap:0;
  border-top:1px solid var(--color-border); border-left:1px solid var(--color-border);
  margin-top:var(--space-12);
}
.service-card {
  padding:var(--space-12) var(--space-10); border-bottom:1px solid var(--color-border);
  border-right:1px solid var(--color-border); background:var(--color-bg);
  transition:background var(--transition);
}
.service-card:hover { background:var(--color-bg-alt); }
.service-card--link { display:block; text-decoration:none; color:inherit; cursor:pointer; }

.service-card__title {
  font-family:var(--font-serif); font-weight:var(--fw-light); font-size:var(--size-2xl);
  color:var(--color-text); margin-bottom:var(--space-4); line-height:1.2;
}
.service-card__text {
  font-family:var(--font-sans); font-size:var(--size-sm); font-weight:var(--fw-light);
  line-height:1.75; color:var(--color-text-muted);
}
.service-card__arrow {
  display:inline-block; margin-top:var(--space-6); font-size:var(--size-sm);
  color:var(--color-text-muted); transition:transform 500ms cubic-bezier(.19,1,.22,1),color var(--transition);
}
.service-card--link:hover .service-card__arrow { transform:translateX(6px); color:var(--color-text); }

/* ============================================================
   SERVICE DETAIL PAGES
   ============================================================ */
.content-cols { max-width:760px; }
.content-cols h2 {
  font-family:var(--font-serif); font-weight:var(--fw-light);
  font-size:clamp(var(--size-2xl),2.5vw,var(--size-3xl)); line-height:1.2;
  margin-bottom:var(--space-8); max-width:48ch;
}

/* Architecture cards (markenarchitektur page) */
.cases {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:0;
  border-top:1px solid var(--color-border); border-left:1px solid var(--color-border);
  margin-top:var(--space-8);
}
.case-card {
  padding:var(--space-10) var(--space-8); border-bottom:1px solid var(--color-border);
  border-right:1px solid var(--color-border); background:var(--color-bg);
}

/* ============================================================
   CASE STUDIES — 2-column premium layout
   ============================================================ */
.cases--full { display:grid; grid-template-columns:1fr 1fr; position:relative; }
.cases--full::after {
  content:''; position:absolute; top:var(--space-16); bottom:var(--space-16);
  left:50%; width:1px; background:var(--color-border); pointer-events:none;
}
.case-card--full {
  padding:var(--space-16) var(--space-12); border-top:1px solid var(--color-border);
  display:flex; flex-direction:column;
}
.cases--full .case-card--full:nth-child(even) { padding-left:var(--space-16); }

.case-card__meta { display:flex; align-items:baseline; gap:var(--space-4); margin-bottom:var(--space-5); }
.case-card__cat {
  display:block; font-family:var(--font-sans); font-size:var(--size-xs);
  letter-spacing:0.16em; text-transform:uppercase; color:var(--color-text-muted);
}
.case-card__client {
  font-family:var(--font-sans); font-size:var(--size-xs); letter-spacing:0.08em;
  text-transform:uppercase; color:var(--color-text); font-weight:var(--fw-medium);
}
.case-card__title {
  font-family:var(--font-serif); font-weight:var(--fw-light); font-size:var(--size-2xl);
  color:var(--color-text); line-height:1.2; margin-bottom:var(--space-8); max-width:36ch;
}

/* Image inside full card */
.case-card--full .content-img {
  width:100%; height:220px; object-fit:cover; border-radius:0;
  margin-bottom:var(--space-8); margin-top:0; flex-shrink:0;
  filter:grayscale(28%) contrast(1.05) brightness(0.97); transition:filter 0.35s ease;
}
.case-card--full .content-img:hover { filter:none; }

.case-card__body { display:flex; flex-direction:column; gap:var(--space-6); flex:1; }
.case-card__section {
  display:grid; grid-template-columns:76px 1fr; gap:var(--space-2) var(--space-6); align-items:baseline;
}
.case-card__dt {
  font-family:var(--font-sans); font-size:var(--size-xs); letter-spacing:0.12em;
  text-transform:uppercase; color:var(--color-text-muted); padding-top:4px; line-height:1.5;
}
.case-card__dd {
  font-family:var(--font-sans); font-size:var(--size-sm); font-weight:var(--fw-light);
  line-height:1.75; color:var(--color-text-muted); margin:0;
}
.case-card__dd--result { color:var(--color-text); font-weight:var(--fw-normal); }
.case-card__lesson { color:var(--color-text); font-weight:var(--fw-normal); }

.case-card__tags {
  display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-8);
  padding-top:var(--space-6); border-top:1px solid var(--color-border);
}
.case-tag {
  font-family:var(--font-sans); font-size:var(--size-xs); letter-spacing:0.10em;
  text-transform:uppercase; padding:var(--space-1) var(--space-3);
  color:var(--color-text-muted); border:1px solid var(--color-border);
}

/* ============================================================
   LOGO COMPARE
   ============================================================ */
.logo-compare {
  display:flex; align-items:center; gap:var(--space-8); padding:var(--space-8) 0;
  border-top:1px solid var(--color-border); margin-top:var(--space-6); flex-wrap:wrap;
}
.logo-compare__item { display:flex; flex-direction:column; gap:var(--space-2); }
.logo-compare__label {
  font-family:var(--font-sans); font-size:var(--size-xs); letter-spacing:0.10em;
  text-transform:uppercase; color:var(--color-text-muted);
}
.logo-compare__arrow { font-size:var(--size-xl); color:var(--color-border); line-height:1; }
.logo-compare__img { max-height:44px; width:auto; max-width:120px; }

/* ============================================================
   INLINE CONTENT IMAGE
   ============================================================ */
.content-img {
  width:100%; height:clamp(220px,28vw,420px); object-fit:cover; display:block;
  margin-block:var(--space-10); filter:grayscale(28%) contrast(1.05) brightness(0.97);
  transition:filter 0.35s ease;
}
.content-img:hover { filter:none; }

/* ============================================================
   VIDEO WRAP
   ============================================================ */
.video-wrap { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; background:var(--color-bg-alt); }
.video-wrap video { width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(28%) contrast(1.05) brightness(0.97); }
.video-wrap--sound { cursor:pointer; }
.video-wrap__sound-btn {
  position:absolute; bottom:var(--space-4); right:var(--space-4); background:rgba(0,0,0,0.5);
  border:none; color:#fff; font-family:var(--font-sans); font-size:var(--size-xs);
  letter-spacing:0.12em; text-transform:uppercase; padding:var(--space-2) var(--space-4);
  cursor:pointer; transition:background var(--transition); z-index:2;
}
.video-wrap__sound-btn:hover { background:rgba(0,0,0,0.8); }

/* ============================================================
   INSIGHTS PAGES (brand-mistakes, trademark-law)
   ============================================================ */
.law-systems {
  display:grid; grid-template-columns:repeat(2,1fr); gap:0;
  border-top:1px solid var(--color-border); border-left:1px solid var(--color-border);
  margin-bottom:var(--space-12);
}
.law-card {
  padding:var(--space-10) var(--space-8); border-bottom:1px solid var(--color-border);
  border-right:1px solid var(--color-border); background:var(--color-bg);
}
.law-card__title {
  font-family:var(--font-serif); font-weight:var(--fw-light); font-size:var(--size-xl);
  color:var(--color-text); line-height:1.25; margin-bottom:var(--space-3);
}
.law-card__jurisdictions {
  font-family:var(--font-sans); font-size:var(--size-xs); letter-spacing:0.08em;
  text-transform:uppercase; color:var(--color-text-muted); margin-bottom:var(--space-6);
}
.law-card__body {
  display:grid; grid-template-columns:80px 1fr; gap:var(--space-2) var(--space-6);
  font-size:var(--size-sm); line-height:1.7;
}
.law-card__body dt {
  font-family:var(--font-sans); font-size:var(--size-xs); letter-spacing:0.10em;
  text-transform:uppercase; color:var(--color-text-muted); padding-top:3px;
}
.law-card__body dd { font-weight:var(--fw-light); color:var(--color-text-muted); margin:0; }
.law-card__risk { color:var(--color-text) !important; font-weight:var(--fw-normal) !important; }

.implications-list { list-style:none; padding:0; display:flex; flex-direction:column; gap:var(--space-4); max-width:72ch; margin-top:var(--space-8); }
.implications-list li {
  font-family:var(--font-sans); font-size:var(--size-base); font-weight:var(--fw-light);
  line-height:1.7; color:var(--color-text-muted); padding-left:var(--space-8); position:relative;
}
.implications-list li::before { content:''; position:absolute; left:0; top:0.75em; width:20px; height:1px; background:var(--color-border); }

/* ============================================================
   ABOUT / CREDENTIALS / CLIENT LOGOS
   ============================================================ */
.credentials { display:flex; flex-direction:column; border-top:1px solid var(--color-border); margin-top:var(--space-8); }
.credential-item {
  display:grid; grid-template-columns:140px 1fr; gap:var(--space-6);
  padding-block:var(--space-5); border-bottom:1px solid var(--color-border); align-items:baseline;
}
.credential-item__label {
  font-family:var(--font-sans); font-size:var(--size-xs); letter-spacing:0.14em;
  text-transform:uppercase; color:var(--color-text-muted);
}
.credential-item__text {
  font-family:var(--font-sans); font-size:var(--size-sm); font-weight:var(--fw-light);
  color:var(--color-text); line-height:1.6;
}

.client-logos {
  display:flex; flex-wrap:wrap; gap:var(--space-8) var(--space-10); align-items:center;
  margin-top:var(--space-8); padding-top:var(--space-8); border-top:1px solid var(--color-border);
}
.client-logos img {
  height:26px; width:auto; opacity:0.45; filter:grayscale(100%);
  transition:opacity var(--transition),filter var(--transition);
}
.client-logos img:hover { opacity:0.85; filter:grayscale(0%); }

/* ============================================================
   CONTACT
   ============================================================ */
.contact { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-20); align-items:start; }
.contact__form { display:flex; flex-direction:column; gap:var(--space-8); }
.form-field { display:flex; flex-direction:column; gap:var(--space-2); }
.form-field label {
  font-family:var(--font-sans); font-size:var(--size-xs); letter-spacing:0.16em;
  text-transform:uppercase; color:var(--color-text-muted);
}
.form-field input,.form-field textarea {
  font-family:var(--font-sans); font-size:var(--size-base); font-weight:var(--fw-light);
  color:var(--color-text); background:transparent; border:none;
  border-bottom:1px solid var(--color-border); padding:var(--space-3) 0;
  outline:none; transition:border-color var(--transition); width:100%; resize:none; line-height:1.6;
}
.form-field input:focus,.form-field textarea:focus { border-bottom-color:var(--color-text); }
.contact__address {
  font-style:normal; font-family:var(--font-sans); font-size:var(--size-sm); font-weight:var(--fw-light);
  line-height:2.2; color:var(--color-text-muted); white-space:pre-line;
  padding-top:var(--space-16); border-top:1px solid var(--color-border);
}

/* ============================================================
   LEGAL
   ============================================================ */
.legal-content { max-width:700px; }
.legal-content h2 {
  font-family:var(--font-serif); font-weight:var(--fw-light); font-size:var(--size-xl);
  margin-top:var(--space-12); margin-bottom:var(--space-4); padding-bottom:var(--space-3);
  border-bottom:1px solid var(--color-border);
}
.legal-content h2:first-child { margin-top:0; }
.legal-content p {
  font-family:var(--font-sans); font-size:var(--size-sm); font-weight:var(--fw-light);
  line-height:1.85; color:var(--color-text-muted); margin-bottom:var(--space-4);
}
.legal-content a { border-bottom:1px solid var(--color-border); transition:border-color var(--transition); }
.legal-content a:hover { border-bottom-color:var(--color-text); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { border-top:1px solid var(--color-border); background:var(--color-bg); }
.footer__inner { display:grid; grid-template-columns:1fr auto auto; gap:var(--space-12); align-items:start; padding-block:var(--space-12); }
.footer__tagline { font-family:var(--font-sans); font-size:var(--size-xs); color:var(--color-text-muted); margin-top:var(--space-3); }
.footer__links,.footer__authority { display:flex; flex-direction:column; gap:var(--space-3); }
.footer__links a,.footer__authority a {
  font-family:var(--font-sans); font-size:var(--size-xs); letter-spacing:0.10em;
  text-transform:uppercase; color:var(--color-text-muted); transition:color var(--transition);
}
.footer__links a:hover,.footer__authority a:hover { color:var(--color-text); }
.footer__authority-label {
  font-family:var(--font-sans); font-size:var(--size-xs); letter-spacing:0.14em;
  text-transform:uppercase; color:var(--color-text-muted); margin-bottom:var(--space-1);
}
.footer__sep { margin-block:var(--space-2); }
.footer__bottom { padding-block:var(--space-4); border-top:1px solid var(--color-border); }
.footer__copy { font-family:var(--font-sans); font-size:var(--size-xs); color:var(--color-text-muted); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:959px) {
  .cases--full { grid-template-columns:1fr; }
  .cases--full::after { display:none; }
  .cases--full .case-card--full:nth-child(even) { padding-left:var(--space-8); }
  .case-card--full { padding:var(--space-12) var(--space-8); }
  .law-systems { grid-template-columns:1fr; }
}
@media (max-width:767px) {
  .services__grid { grid-template-columns:1fr; }
  .cases { grid-template-columns:1fr; }
  .contact { grid-template-columns:1fr; gap:var(--space-12); }
  .credential-item { grid-template-columns:1fr; gap:var(--space-1); }
  .footer__inner { grid-template-columns:1fr; gap:var(--space-8); }
  .case-card__section { grid-template-columns:1fr; gap:var(--space-1); }
  .law-card__body { grid-template-columns:1fr; }
}
@media (max-width:600px) {
  .page-hero { height:clamp(400px,75vw,520px); }
  .section { padding-block:var(--space-16); }
}


/* ============================================================
   HOMEPAGE HERO — full-bleed with background image
   ============================================================ */

.hero-home {
  position: relative;
  min-height: clamp(560px, 58vw, 800px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  /* Hero fills from top — fixed header overlays transparently */
}

.hero-home__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  filter: grayscale(28%) contrast(1.05) brightness(0.97);
  z-index: 0;
}

.hero-home__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.08) 0%,
    rgba(0,0,0,0.68) 100%
  );
  z-index: 1;
}

.hero-home__content {
  position: relative;
  z-index: 2;
  padding-bottom: clamp(var(--space-16), 6vw, var(--space-24));
  padding-top: var(--space-24);
}

.hero-home__label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--size-xs);
  font-weight: var(--fw-normal);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  margin-bottom: var(--space-8);
}

.hero-home__headline {
  font-family: var(--font-serif);
  font-weight: var(--fw-light);
  font-size: clamp(var(--size-3xl), 5vw, 4.25rem);
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 2px 16px rgba(0,0,0,0.18);
  max-width: 22ch;
  margin-bottom: var(--space-8);
}

.hero-home__subline {
  font-family: var(--font-sans);
  font-size: clamp(var(--size-base), 1.5vw, var(--size-xl));
  font-weight: var(--fw-light);
  line-height: 1.7;
  color: rgba(255,255,255,0.88);
  max-width: 54ch;
  margin-bottom: var(--space-10);
  text-shadow: 0 1px 6px rgba(0,0,0,0.12);
}

.hero-home__cta {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--size-xs);
  font-weight: var(--fw-normal);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.6);
  padding: var(--space-4) var(--space-10);
  transition: background var(--transition), border-color var(--transition);
}

.hero-home__cta:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.9);
}

/* Intro strip below hero */
.hero-intro {
  padding-block: var(--space-20);
  border-bottom: 1px solid var(--color-border);
}

.hero-intro__text {
  font-family: var(--font-serif);
  font-weight: var(--fw-light);
  font-size: clamp(var(--size-xl), 2.2vw, var(--size-3xl));
  line-height: 1.5;
  color: var(--color-text);
  max-width: 42ch;
}

.hero-intro__text em {
  font-style: italic;
  color: var(--color-text-muted);
}

@media (max-width: 767px) {
  .hero-home { min-height: clamp(400px, 80vw, 560px); }
  .hero-home__headline { font-size: var(--size-3xl); max-width: none; }
}


/* ============================================================
   MOBILE NAV — Hamburger + Overlay
   ============================================================ */

/* Prevent horizontal overflow globally */
html, body {
  overflow-x: hidden;
}

/* Hide burger on desktop */
.header__burger {
  display: none;
}

@media (max-width: 767px) {

  /* ── Burger button ────────────────────────────────────── */
  .header__burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    margin-right: -8px;
    flex-shrink: 0;
    z-index: 110;
  }

  .header__burger span {
    display: block;
    width: 22px;
    height: 1px;
    background: var(--color-text);
    transition: transform 300ms cubic-bezier(.19,1,.22,1),
                opacity   200ms ease;
    transform-origin: center;
  }

  /* Animated X when open */
  .header__burger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  .header__burger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }
  .header__burger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  /* ── Nav: hidden by default, slides in from right ─────── */
  #nav-main {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(280px, 80vw);
    height: 100dvh;
    background: var(--color-bg);
    border-left: 1px solid var(--color-border);
    padding: calc(var(--header-h) + var(--space-8)) var(--space-8) var(--space-8);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 380ms cubic-bezier(.19,1,.22,1);
    z-index: 400;
  }

  #nav-main.nav--open {
    transform: translateX(0);
  }

  /* Nav list: vertical stack */
  .nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: 100%;
  }

  .nav__item {
    width: 100%;
    border-bottom: 1px solid var(--color-border);
  }

  .nav__link,
  .nav__dropdown-trigger {
    font-size: var(--size-sm);
    letter-spacing: 0.10em;
    padding: var(--space-4) 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .nav__link::after,
  .nav__dropdown-trigger::after {
    display: none; /* No underline animation on mobile */
  }

  /* Dropdown: inline below trigger */
  .nav__item--dropdown .nav__dropdown {
    position: static;
    transform: none;
    box-shadow: none;
    border: none;
    border-left: 1px solid var(--color-border);
    margin-left: var(--space-4);
    padding: var(--space-1) 0;
    min-width: auto;
    background: transparent;
    width: 100%;
  }

  .nav__dropdown-link {
    padding: var(--space-3) var(--space-4);
    font-size: var(--size-xs);
  }

  /* Language switcher: horizontal row at bottom */
  .nav__lang {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    padding-left: 0;
    border-left: none;
    border-top: 1px solid var(--color-border);
    width: 100%;
    justify-content: flex-start;
    gap: var(--space-6);
  }

  .nav__lang-link {
    font-size: var(--size-sm);
  }
}

/* ── Overlay behind open nav ──────────────────────────────── */
.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.25);
  z-index: 200;
  opacity: 0;
  transition: opacity 300ms ease;
}

.nav-overlay.is-visible {
  display: block;
  opacity: 1;
}


/* ============================================================
   BRAND MISTAKES — Premium editorial layout
   2-column grid · case images · elegant rule separators
   ============================================================ */

.bm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  position: relative;
}

/* Vertical center rule */
.bm-grid::after {
  content: '';
  position: absolute;
  top: var(--space-16);
  bottom: var(--space-16);
  left: 50%;
  width: 1px;
  background: var(--color-border);
  pointer-events: none;
}

/* ── Single case card ─────────────────────────────────────── */
.bm-card {
  padding: var(--space-14) var(--space-12);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.bm-grid .bm-card:nth-child(even) {
  padding-left: var(--space-16);
}

/* ── Case image ───────────────────────────────────────────── */
.bm-card__img-wrap {
  margin-bottom: var(--space-8);
  overflow: hidden;
}

.bm-card__img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  filter: grayscale(28%) contrast(1.05) brightness(0.97);
  transition: filter 0.4s ease;
}

.bm-card__img:hover {
  filter: none;
}

/* ── Card header ──────────────────────────────────────────── */
.bm-card__header {
  margin-bottom: var(--space-8);
}

.bm-card__cat {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--size-xs);
  font-weight: var(--fw-normal);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.bm-card__title {
  font-family: var(--font-serif);
  font-weight: var(--fw-light);
  font-size: var(--size-2xl);
  line-height: 1.2;
  color: var(--color-text);
  max-width: 34ch;
}

/* ── Body: DL with horizontal rules between rows ──────────── */
.bm-card__body {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
}

.bm-card__row {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: var(--space-4) var(--space-6);
  padding-block: var(--space-6);
  border-top: 1px solid var(--color-border);
  align-items: baseline;
}

/* No top border on very first row */
.bm-card__body .bm-card__row:first-child {
  border-top: none;
  padding-top: 0;
}

.bm-card__row--result {
  background: transparent;
}

.bm-card__row--lesson {
  background: transparent;
}

.bm-card__dt {
  font-family: var(--font-sans);
  font-size: var(--size-xs);
  font-weight: var(--fw-normal);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding-top: 3px;
  line-height: 1.4;
}

.bm-card__dd {
  font-family: var(--font-sans);
  font-size: var(--size-sm);
  font-weight: var(--fw-light);
  line-height: 1.75;
  color: var(--color-text-muted);
  margin: 0;
}

/* Konsequenz: etwas prominenter */
.bm-card__row--result .bm-card__dd {
  color: var(--color-text);
  font-weight: var(--fw-normal);
}

/* Lektion: kursiv, volle Textfarbe */
.bm-card__dd--lesson {
  color: var(--color-text) !important;
  font-family: var(--font-serif) !important;
  font-style: italic;
  font-size: var(--size-base) !important;
  font-weight: var(--fw-light) !important;
  line-height: 1.6 !important;
}

/* ── Wikipedia footer link ────────────────────────────────── */
.bm-card__footer {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.bm-card__wiki {
  font-family: var(--font-sans);
  font-size: var(--size-xs);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  transition: color var(--transition);
}

.bm-card__wiki:hover {
  color: var(--color-text);
}

/* ── Pattern grid (2×2) ───────────────────────────────────── */
.bm-pattern-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border);
  margin-top: var(--space-10);
}

.bm-pattern-item {
  padding: var(--space-10) var(--space-8);
  border-bottom: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
}

.bm-pattern-num {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--size-4xl);
  font-weight: var(--fw-light);
  color: var(--color-border);
  line-height: 1;
  margin-bottom: var(--space-4);
}

.bm-pattern-title {
  font-family: var(--font-serif);
  font-weight: var(--fw-light);
  font-size: var(--size-xl);
  color: var(--color-text);
  line-height: 1.25;
  margin-bottom: var(--space-4);
}

.bm-pattern-text {
  font-family: var(--font-sans);
  font-size: var(--size-sm);
  font-weight: var(--fw-light);
  line-height: 1.75;
  color: var(--color-text-muted);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 959px) {
  .bm-grid {
    grid-template-columns: 1fr;
  }

  .bm-grid::after {
    display: none;
  }

  .bm-grid .bm-card:nth-child(even) {
    padding-left: var(--space-8);
  }

  .bm-card {
    padding: var(--space-10) var(--space-6);
  }

  .bm-pattern-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .bm-card__row {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .bm-card__title {
    font-size: var(--size-xl);
  }
}


/* ============================================================
   COBIAX — Chart + Video
   ============================================================ */

.cobiax-media {
  margin-top: var(--space-10);
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

/* ── Chart ─────────────────────────────────────────────────── */
.cobiax-chart {
  padding: var(--space-8) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.cobiax-chart__label {
  font-family: var(--font-sans);
  font-size: var(--size-xs);
  font-weight: var(--fw-normal);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-8);
}

.cobiax-chart__rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

.cobiax-chart__row {
  display: grid;
  grid-template-columns: 40px 1fr 106px;
  align-items: center;
  gap: var(--space-4);
}

.cobiax-chart__rowlabel {
  font-family: var(--font-sans);
  font-size: var(--size-xs);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-align: right;
}

/* Track: a clean white container with a visible border */
.cobiax-chart__track {
  height: 40px;
  position: relative;
  display: flex;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 2px;
  overflow: hidden;
}

/* Segments: absolute-like via flex, start at 0 width */
.cobiax-seg {
  height: 100%;
  width: 0;
  flex-shrink: 0;
  transition: width 1.1s cubic-bezier(.19,1,.22,1);
}

.cobiax-seg--eng { background: #7a8c96; }   /* slate blue-grey — engineers */
.cobiax-seg--con { background: #b4a882; }   /* warm sand — contractors    */
.cobiax-seg--arc { background: #8a9e8a; }   /* sage green — architects    */

.cobiax-chart__num {
  font-family: var(--font-sans);
  font-size: var(--size-sm);
  font-weight: var(--fw-normal);
  color: var(--color-text);
  white-space: nowrap;
}

.cobiax-chart__num em {
  font-style: normal;
  font-size: var(--size-xs);
  color: #1D9E75;
  background: #E1F5EE;
  padding: 2px 6px;
  border-radius: 2px;
  margin-left: 4px;
}

.cobiax-chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.cobiax-chart__legend span {
  font-family: var(--font-sans);
  font-size: var(--size-xs);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 7px;
}

.cleg {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 2px;
  flex-shrink: 0;
}

.cleg--eng { background: #7a8c96; }
.cleg--con { background: #b4a882; }
.cleg--arc { background: #8a9e8a; }

/* ── Video ─────────────────────────────────────────────────── */
.cobiax-video {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.cobiax-video__el {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: grayscale(28%) contrast(1.05) brightness(0.97);
  transition: filter 0.35s ease;
}

.cobiax-video__el:hover { filter: none; }

.cobiax-video__controls {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
}

.cobiax-video__playbtn {
  background: none;
  border: 1px solid var(--color-border);
  width: 28px;
  height: 28px;
  border-radius: 2px;
  cursor: pointer;
  font-size: 10px;
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}

.cobiax-video__playbtn:hover {
  border-color: var(--color-text);
  background: var(--color-text);
  color: var(--color-bg);
}

.cobiax-video__vollabel {
  color: var(--color-text-muted);
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.cobiax-video__vol {
  flex: 1;
  max-width: 120px;
  accent-color: var(--color-text);
  cursor: pointer;
}

.cobiax-video__caption {
  font-family: var(--font-sans);
  font-size: var(--size-xs);
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-left: auto;
  font-style: italic;
}

@media (max-width: 600px) {
  .cobiax-chart__row { grid-template-columns: 36px 1fr; }
  .cobiax-chart__num { display: none; }
  .cobiax-video__caption { display: none; }
}


/* ── Arminia logo full-column ─────────────────────────────── */
.arminia-logo-full {
  width: 100%;
  height: auto;
  max-height: 160px;
  object-fit: contain;
  display: block;
  margin-bottom: var(--space-8);
  opacity: 0.88;
}


/* ============================================================
   MARKENARCHITEKTUR — SVG diagrams + editorial layout
   ============================================================ */

/* ── SVG diagram styles ───────────────────────────────────── */
.arch-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

/* Master brand box */
.a-master { fill: var(--color-text); }
.a-master--ghost { fill: transparent; stroke: var(--color-border); stroke-width: 1; }
.a-label-main { font-family: var(--font-sans); font-size: 9px; font-weight: 500; fill: var(--color-bg); text-anchor: middle; dominant-baseline: middle; letter-spacing: .05em; }
.a-label-ghost { font-family: var(--font-sans); font-size: 9px; fill: var(--color-border); text-anchor: middle; }
.a-label-ghost-sub { font-family: var(--font-sans); font-size: 7.5px; fill: var(--color-border); text-anchor: middle; }

/* Sub-brand boxes */
.a-sub { fill: var(--color-bg-alt); stroke: var(--color-border); stroke-width: 1; }
.a-sub--strong { fill: var(--color-bg); stroke: var(--color-text); stroke-width: 1; }
.a-sub-stripe { fill: var(--color-text); }
.a-label-sub { font-family: var(--font-sans); font-size: 8.5px; fill: var(--color-text-muted); text-anchor: middle; }
.a-label-xs { font-family: var(--font-sans); font-size: 7px; fill: var(--color-border); text-anchor: middle; }
.a-label-brand { font-family: var(--font-sans); font-size: 9px; font-weight: 500; fill: var(--color-bg); text-anchor: middle; dominant-baseline: middle; }

/* Colored brand boxes for House of Brands */
.a-brand-a { fill: #5a6e78; }
.a-brand-b { fill: #7a6858; }
.a-brand-c { fill: #5a6858; }

/* Endorser badge */
.a-endorser { fill: var(--color-text); }
.a-endorser-text { font-family: var(--font-sans); font-size: 6px; fill: var(--color-bg); text-anchor: middle; dominant-baseline: middle; }

/* Connector lines */
.a-line { stroke: var(--color-border); stroke-width: 1; }

/* Parent shadow for House of Brands */
.a-parent-shadow { fill: none; stroke: var(--color-border); stroke-width: 1; stroke-dasharray: 4 3; }

/* Example label */
.a-example { font-family: var(--font-sans); font-size: 7.5px; fill: var(--color-border); text-anchor: middle; letter-spacing: .04em; }

/* Ghost labels */
.a-label-ghost { font-size: 8px; fill: var(--color-border); text-anchor: middle; font-family: var(--font-sans); }

/* ── Architecture grid ────────────────────────────────────── */
.arch-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border);
  margin-top: var(--space-10);
}

.arch-card {
  border-bottom: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(.19,1,.22,1);
}

.arch-card--visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays */
.arch-card:nth-child(2) { transition-delay: 0.12s; }
.arch-card:nth-child(3) { transition-delay: 0.22s; }
.arch-card:nth-child(4) { transition-delay: 0.32s; }
.arch-card:nth-child(5) { transition-delay: 0.42s; }

.arch-card--full-width {
  grid-column: 1 / -1;
  flex-direction: row;
}

.arch-svg-wrap {
  padding: var(--space-6);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}

.arch-card--full-width .arch-svg-wrap {
  border-bottom: none;
  border-right: 1px solid var(--color-border);
  width: 44%;
  flex-shrink: 0;
}

.arch-svg-wrap--wide .arch-svg {
  max-width: 100%;
}

.arch-card__body {
  padding: var(--space-8) var(--space-8) var(--space-10);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex: 1;
}

.arch-card__num {
  font-family: var(--font-serif);
  font-size: var(--size-4xl);
  font-weight: var(--fw-light);
  color: var(--color-border);
  line-height: 1;
  display: block;
  margin-bottom: var(--space-2);
}

.arch-card__title {
  font-family: var(--font-serif);
  font-weight: var(--fw-light);
  font-size: var(--size-2xl);
  line-height: 1.2;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.arch-card__desc {
  font-family: var(--font-sans);
  font-size: var(--size-sm);
  font-weight: var(--fw-light);
  line-height: 1.75;
  color: var(--color-text-muted);
}

/* ── Pros/cons ────────────────────────────────────────────── */
.arch-card__pros-cons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-top: var(--space-2);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.arch-pro-con { display: flex; flex-direction: column; gap: var(--space-3); }

.arch-pro-con__head {
  font-family: var(--font-sans);
  font-size: var(--size-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: var(--fw-normal);
}

.arch-pro-con--pro .arch-pro-con__head { color: #1D9E75; }
.arch-pro-con--con .arch-pro-con__head { color: var(--color-text-muted); }

.arch-pro-con ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.arch-pro-con ul li {
  font-family: var(--font-sans);
  font-size: var(--size-xs);
  font-weight: var(--fw-light);
  line-height: 1.65;
  color: var(--color-text-muted);
  padding-left: var(--space-4);
  position: relative;
}

.arch-pro-con--pro ul li::before { content:''; position:absolute; left:0; top:.55em; width:8px; height:1px; background:#1D9E75; }
.arch-pro-con--con ul li::before { content:''; position:absolute; left:0; top:.55em; width:8px; height:1px; background:var(--color-border); }

/* M&A note */
.arch-card__ma {
  font-family: var(--font-sans);
  font-size: var(--size-xs);
  font-weight: var(--fw-light);
  line-height: 1.7;
  color: var(--color-text-muted);
  padding: var(--space-4) var(--space-5);
  border-left: 2px solid var(--color-text);
  margin-top: var(--space-4);
  background: var(--color-bg-alt);
}

.arch-card__ma strong { font-weight: var(--fw-medium); color: var(--color-text); }

/* ── M&A grid ─────────────────────────────────────────────── */
.ma-section { margin-top: var(--space-12); }
.ma-section__title {
  font-family: var(--font-serif);
  font-weight: var(--fw-light);
  font-size: clamp(var(--size-2xl),3vw,var(--size-3xl));
  margin-bottom: var(--space-10);
}

.ma-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border);
}

.ma-point {
  padding: var(--space-8);
  border-bottom: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
}

.ma-point__num {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--size-3xl);
  font-weight: var(--fw-light);
  color: var(--color-border);
  line-height: 1;
  margin-bottom: var(--space-4);
}

.ma-point__head {
  font-family: var(--font-serif);
  font-weight: var(--fw-light);
  font-size: var(--size-xl);
  color: var(--color-text);
  margin-bottom: var(--space-4);
  display: block;
}

.ma-point__body {
  font-family: var(--font-sans);
  font-size: var(--size-sm);
  font-weight: var(--fw-light);
  line-height: 1.75;
  color: var(--color-text-muted);
}

/* ── Decision grid ────────────────────────────────────────── */
.decision-grid {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-border);
}

.decision-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--color-border);
  align-items: baseline;
}

.decision-q {
  font-family: var(--font-serif);
  font-size: var(--size-lg);
  font-weight: var(--fw-light);
  color: var(--color-text);
  line-height: 1.4;
}

.decision-a {
  font-family: var(--font-sans);
  font-size: var(--size-sm);
  font-weight: var(--fw-light);
  line-height: 1.7;
  color: var(--color-text-muted);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 959px) {
  .arch-grid { grid-template-columns: 1fr; }
  .arch-card--full-width { flex-direction: column; }
  .arch-card--full-width .arch-svg-wrap { width: 100%; border-right: none; border-bottom: 1px solid var(--color-border); }
  .arch-card__pros-cons { grid-template-columns: 1fr; }
  .ma-grid { grid-template-columns: 1fr; }
  .decision-item { grid-template-columns: 1fr; gap: var(--space-3); }
}

@media (max-width: 767px) {
  .arch-card__pros-cons { grid-template-columns: 1fr; }
}



/* ============================================================
   MARKENSTRATEGIE — Five pillars + Q&A
   ============================================================ */

.ms-section-head {
  font-family: var(--font-serif);
  font-weight: var(--fw-light);
  font-size: clamp(var(--size-2xl), 3vw, var(--size-3xl));
  line-height: 1.2;
  margin-bottom: var(--space-12);
  max-width: 46ch;
}

/* ── Pillar ───────────────────────────────────────────────── */
.ms-pillar {
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-14);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(.19,1,.22,1);
}
.ms-pillar--visible { opacity: 1; transform: none; }
.ms-pillar:nth-child(2) { transition-delay: 0.08s; }
.ms-pillar:nth-child(3) { transition-delay: 0.16s; }
.ms-pillar:nth-child(4) { transition-delay: 0.24s; }
.ms-pillar:nth-child(5) { transition-delay: 0.32s; }

.ms-pillar__header {
  display: flex;
  align-items: baseline;
  gap: var(--space-6);
  margin-bottom: var(--space-10);
}

.ms-pillar__num {
  font-family: var(--font-serif);
  font-size: var(--size-4xl);
  font-weight: var(--fw-light);
  color: #8a7e74;
  line-height: 1;
  flex-shrink: 0;
  width: 56px;
}

.ms-pillar__title {
  font-family: var(--font-serif);
  font-weight: var(--fw-light);
  font-size: clamp(var(--size-2xl), 2.4vw, var(--size-3xl));
  color: var(--color-text);
  line-height: 1.15;
  margin-bottom: var(--space-2);
}

.ms-pillar__sub {
  font-family: var(--font-sans);
  font-size: var(--size-sm);
  font-weight: var(--fw-light);
  color: var(--color-text-muted);
  line-height: 1.6;
}

.ms-pillar__body {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: var(--space-12);
  align-items: start;
}

.ms-pillar__text p {
  font-family: var(--font-sans);
  font-size: var(--size-base);
  font-weight: var(--fw-light);
  line-height: 1.8;
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
  max-width: 66ch;
}

.ms-pillar__fig {
  position: sticky;
  top: calc(var(--header-h) + var(--space-6));
  margin: 0;
  border: 1px solid var(--color-border);
  padding: var(--space-5);
  background: var(--color-bg);
}

.ms-pillar__fig svg {
  width: 100%;
  height: auto;
  display: block;
}

.ms-pillar__fig figcaption {
  font-family: var(--font-sans);
  font-size: var(--size-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
  margin-top: var(--space-3);
  text-align: center;
}

/* ── Option label ─────────────────────────────────────────── */
.ms-option-head {
  font-family: var(--font-sans);
  font-size: var(--size-xs);
  font-weight: var(--fw-normal);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: var(--space-8);
  margin-bottom: var(--space-5);
  display: block;
}

/* ── Options list ─────────────────────────────────────────── */
.ms-options {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-border);
}

.ms-option {
  display: grid;
  grid-template-columns: 176px 1fr;
  gap: var(--space-3) var(--space-6);
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--color-border);
  align-items: baseline;
}

.ms-option__label {
  font-family: var(--font-sans);
  font-size: var(--size-sm);
  font-weight: var(--fw-normal);
  color: var(--color-text);
  padding-top: 2px;
}

.ms-option__desc {
  font-family: var(--font-sans);
  font-size: var(--size-sm);
  font-weight: var(--fw-light);
  line-height: 1.7;
  color: var(--color-text-muted);
}

/* ── Sliders (personality) ────────────────────────────────── */
.ms-options--sliders { border: none; gap: 0; }

.ms-slider {
  display: grid;
  grid-template-columns: 80px 1fr 80px;
  gap: var(--space-3);
  align-items: center;
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.ms-slider:first-child { border-top: 1px solid var(--color-border); }

.ms-slider__a {
  font-family: var(--font-sans);
  font-size: var(--size-xs);
  color: var(--color-text-muted);
}

.ms-slider__b {
  font-family: var(--font-sans);
  font-size: var(--size-xs);
  color: var(--color-text-muted);
  text-align: right;
}

.ms-slider__track {
  height: 2px;
  background: var(--color-border);
  border-radius: 1px;
  position: relative;
}

.ms-slider__fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: var(--color-text);
  border-radius: 1px;
}

/* ── Link box to architecture ─────────────────────────────── */
.ms-link-box {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: var(--space-16);
  align-items: center;
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}

.ms-link-box__text h2 {
  font-family: var(--font-serif);
  font-weight: var(--fw-light);
  font-size: clamp(var(--size-2xl), 3vw, var(--size-3xl));
  line-height: 1.2;
  margin-bottom: var(--space-4);
}

.ms-link-box__svg svg {
  width: 100%;
  height: auto;
  display: block;
}

.ms-link-cta {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--size-xs);
  font-weight: var(--fw-normal);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-text);
  padding-bottom: 2px;
  margin-top: var(--space-8);
  text-decoration: none;
  transition: opacity var(--transition);
}

.ms-link-cta:hover { opacity: 0.55; }

/* ── Q&A ──────────────────────────────────────────────────── */
.ms-qa-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-4);
}

.ms-qa {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  padding-block: var(--space-8);
  border-bottom: 1px solid var(--color-border);
  align-items: baseline;
}

.ms-qa__q {
  font-family: var(--font-serif);
  font-weight: var(--fw-light);
  font-size: var(--size-xl);
  color: var(--color-text);
  line-height: 1.3;
}

.ms-qa__a p {
  font-family: var(--font-sans);
  font-size: var(--size-sm);
  font-weight: var(--fw-light);
  line-height: 1.8;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.ms-qa__a a {
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  transition: border-color var(--transition);
}
.ms-qa__a a:hover { border-bottom-color: var(--color-text); }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .ms-pillar__body { grid-template-columns: 1fr 220px; }
}

@media (max-width: 767px) {
  .ms-pillar__body { grid-template-columns: 1fr; }
  .ms-pillar__fig { position: static; display: none; }
  .ms-option { grid-template-columns: 1fr; gap: var(--space-2); }
  .ms-link-box { grid-template-columns: 1fr; }
  .ms-link-box__svg { display: none; }
  .ms-qa { grid-template-columns: 1fr; gap: var(--space-4); }
  .ms-slider { grid-template-columns: 60px 1fr 60px; }
}


/* ── Book card (Über uns / About) ─────────────────────────── */
.book-card {
  display: flex;
  align-items: stretch;
  margin-top: var(--space-8);
  border: 1px solid var(--color-border);
  max-width: 340px;
  transition: border-color var(--transition);
}
.book-card:hover { border-color: var(--color-text-muted); }
.book-card__spine { width: 6px; background: var(--color-text); flex-shrink: 0; }
.book-card__content {
  padding: var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.book-card__label {
  font-family: var(--font-sans);
  font-size: var(--size-xs);
  font-weight: var(--fw-light);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.book-card__title {
  font-family: var(--font-serif);
  font-weight: var(--fw-light);
  font-size: var(--size-xl);
  line-height: 1.2;
  color: var(--color-text);
}
.book-card__link {
  display: inline-block;
  margin-top: var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--size-xs);
  font-weight: var(--fw-normal);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--color-text);
  padding-bottom: 1px;
  transition: opacity var(--transition);
  align-self: flex-start;
}
.book-card__link:hover { opacity: 0.55; }
.inline-link {
  color: inherit;
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  transition: border-color var(--transition);
}
.inline-link:hover { border-bottom-color: var(--color-text); }


/* ── About page grid ──────────────────────────────────────── */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: start;
}

.about-portrait {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  filter: grayscale(28%) contrast(1.05) brightness(0.97);
  display: block;
}

/* ── Book cover ───────────────────────────────────────────── */
.about-book {
  display: block;
  margin-top: var(--space-6);
  text-decoration: none;
  position: relative;
}

.about-book__cover {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
  transition: opacity 0.3s ease;
}

.about-book:hover .about-book__cover {
  opacity: 0.88;
}

.about-book__caption {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--size-xs);
  font-weight: var(--fw-normal);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  transition: color var(--transition);
}

.about-book:hover .about-book__caption {
  color: var(--color-text);
}

@media (max-width: 767px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-grid__visual { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
  .about-book { margin-top: 0; }
}