/* ══ BRACE — Basis ═══════════════════════════════════════════════════════════
   Tokens, Grundlayout und die Klassen, die sich mehrere Sections teilen.
   Alles Section-eigene liegt in blocks/<name>/style.css.
   Die kurzen Variablennamen spiegeln die theme.json-Presets: theme.json ist
   die Quelle, hier stehen nur die Aliase, mit denen die Sections rechnen.
   ══════════════════════════════════════════════════════════════════════════ */

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

:root {
  --ink:     var(--wp--preset--color--ink,     #282A2D);
  --paper:   var(--wp--preset--color--paper,   #FBFBFA);
  --sand:    var(--wp--preset--color--sand,    #EAE7E1);
  --copper:  var(--wp--preset--color--copper,  #AD5F45);
  --grey-60: var(--wp--preset--color--grey-60, #7E7F81);
  --grey-40: var(--wp--preset--color--grey-40, #A9AAAB);
  --grey-20: var(--wp--preset--color--grey-20, #D4D4D5);

  --line-dark: rgba(212, 212, 213, .5);
  --pad: clamp(24px, 5.6vw, 80px);
  --grad: var(--wp--preset--gradient--copper, linear-gradient(112deg, #493733 11%, #AD5F45 73%));
  --grad-light: linear-gradient(112deg, #EAE7E1 10%, #C98A72 80%);

  --font: "articulat-cf", Helvetica, Arial, sans-serif;

  /* Dachzeilen in Versalien. Die Protos führten die Größe von 25/17 px aus der
     Zeit der Gemischtschreibung weiter; in Versalien wirkte das zu groß.
     Bewusst kein theme.json-Preset: Redakteure sollen diese Größe nicht
     frei vergeben, sie gehört nur zur Klasse .eyebrow. */
  --eyebrow-size: clamp(15px, 1.5vw, 21px);
}

/* overflow-x liegt auf html, nicht auf body: auf body macht es body selbst zum
   Scroll-Container und position:sticky (Header, Assembly-Bühne) greift dann
   nicht mehr. */
html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3, h4, p { margin: 0; }
::selection { background: var(--copper); color: #fff; }

.screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link:focus {
  position: fixed; left: 16px; top: 16px; z-index: 100;
  width: auto; height: auto; clip-path: none;
  padding: 12px 20px; background: var(--ink); color: #fff;
}

/* ══ Geteilte Bausteine ══ */

.grad {
  background-image: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Dachzeilen stehen ab V13 in Versalien mit etwas Sperrung. Die Größe kommt
   überall aus --eyebrow-size; Blocks ändern Farbe oder Abstand, nie Größe
   oder Versalien. Die Sperrung hält die absolute Laufweite der alten
   25-px-Zeile (.06em), bleibt aber klar unter den 11–12-px-Labels (.14em). */
.eyebrow {
  font-size: var(--eyebrow-size);
  font-weight: 500;
  color: var(--copper);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--d, 0s);
}
.reveal.shown { opacity: 1; transform: none; }
/* Im Editor läuft site.js nicht; ohne diese Regel blieben Reveals unsichtbar. */
.editor-styles-wrapper .reveal { opacity: 1; transform: none; }

/* Collagenbilder laufen ungetont — die Bildwelt der Guidelines 2.0 zeigt
   Fotografie in Eigenfarbe. .tint ist nur noch der beschneidende Rahmen.
   Jede Kachel beschneidet ihr Bild, sonst rendert das <img> in Originalbreite
   über die Kachel hinaus.
   Bewusst ohne position: die Kacheln werden von ihrer Collage absolut gesetzt,
   und .tint hat dieselbe Spezifität — ein position hier würde je nach
   Ladereihenfolge der Stylesheets gewinnen und die Collage zerlegen. */
.tint { overflow: hidden; }
.tint img { width: 100%; height: 100%; object-fit: cover; }

/* Parallax: JS setzt --par je Element, translate bleibt in CSS. */
[data-par] { transform: translate3d(0, var(--par, 0px), 0); will-change: transform; }

/* Ab V2 läuft der Button standardmäßig in Carbon auf hellem Grund; auf
   dunklem Grund trägt er .light. */
.btn-out {
  display: inline-flex; align-items: center; gap: 13px;
  border: 1px solid var(--ink); color: var(--ink);
  padding: 12px 18px 12px 32px;
  font-size: 15px; font-weight: 700; letter-spacing: .3px;
  background: transparent; font-family: inherit; cursor: pointer;
  transition: background .22s, color .22s;
}
.btn-out img { width: 10.93px; height: 16.4px; filter: invert(1); transition: transform .22s, filter .22s; }
.btn-out:hover { background: var(--ink); color: #fff; }
.btn-out:hover img { transform: translateX(3px); filter: none; }

.btn-out.light { border-color: #fff; color: #fff; }
.btn-out.light img { filter: none; }
.btn-out.light:hover { background: #fff; color: var(--ink); }
.btn-out.light:hover img { filter: invert(1); }

.u-link {
  display: inline-block;
  font-size: 15px; font-weight: 700; letter-spacing: .3px;
  padding-bottom: 6px; border-bottom: 2px solid var(--copper);
  transition: border-bottom-width .2s;
}
.u-link:hover { border-bottom-width: 4px; }

/* Section-Kopf der Unterseiten: Eyebrow und H2 links, Lead rechts unten. */
.h2 {
  font-size: clamp(2rem, 5.2vw, 75px);
  line-height: 1.05; letter-spacing: -.02em; font-weight: 400;
  text-wrap: balance;
}
.lead {
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.6; font-weight: 500;
  color: var(--grey-60); text-wrap: pretty;
}
.sec-head {
  max-width: 1280px; margin: 0 auto; padding: 0 var(--pad);
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 88px); align-items: end;
}
.sec-head .h2 { margin-top: 14px; }

.dark { background: var(--ink); color: #fff; }
.dark .eyebrow, .dark .lead { color: var(--grey-40); }
.dark .h2 { color: var(--sand); }

/* Fehlt ein Bild, hält .slot nur seinen Platz als ruhige Fläche, damit das
   Layout nicht zusammenfällt. Kein Etikett, keine Schraffur, kein
   "… folgt": Solche Hinweise gab es nur in den Protos zur Abstimmung. */
.slot { position: relative; background: var(--sand); }
.slot.on-dark { background: #313437; }

/* Sprungziele landen unter dem Sticky-Header, nicht dahinter. */
[id] { scroll-margin-top: 106px; }

/* ══ Header ══ */
.head {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 32px clamp(24px, 4.4vw, 62px) 32px clamp(24px, 5vw, 72px);
  background: rgba(251, 251, 250, .92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.head .wordmark { width: 273px; height: 28px; }

/* Sprachumschalter links neben Marke bzw. X. Header und Menüleiste bauen
   die rechte Seite gleich (.head-end), damit das X genau über dem Burger
   bleibt. */
.head-end { display: flex; align-items: center; gap: clamp(20px, 2.6vw, 36px); }
.lang { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; letter-spacing: .08em; line-height: 1; }
.lang a { color: var(--grey-60); padding: 8px 2px; transition: color .2s; }
.lang a:hover, .lang a:focus-visible { color: var(--copper); }
.lang a:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }
.lang [aria-current] { color: var(--ink); padding: 8px 2px; }
.lang-sep { color: var(--grey-40); }
.menu .lang [aria-current] { color: #fff; }
.menu .lang a { color: var(--grey-40); }
/* Die Bildmarke steht auf quadratischen Modulen (3 x 4), Breite immer 3/4 der Höhe. */
.head .mark { width: 31.5px; height: 42px; }

/* Marke und Burger liegen übereinander; beim Hover tauscht die Marke gegen
   den Burger, dessen Striche von rechts aufziehen. Die Marke ist der Button,
   der das Menü öffnet; Tastaturfokus zeigt denselben Wechsel. */
.mark-hint {
  display: grid; place-items: center;
  appearance: none; border: 0; padding: 0; margin: 0;
  background: none; color: inherit; font: inherit; cursor: pointer;
}
.mark-hint:focus-visible { outline: 2px solid var(--copper); outline-offset: 6px; }
.mark-hint > * { grid-area: 1 / 1; }
.mark-hint .mark { transition: opacity .25s ease, transform .35s cubic-bezier(.16, 1, .3, 1); }
.burger {
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  width: 28px; height: 42px;
  opacity: 0; transition: opacity .25s ease; pointer-events: none;
}
.burger i { display: block; height: 2px; background: var(--ink); transform: scaleX(.35); transform-origin: right; transition: transform .4s cubic-bezier(.16, 1, .3, 1); }
.burger i:nth-child(2) { transition-delay: .04s; }
.burger i:nth-child(3) { transition-delay: .08s; }
/* Solange das Menü offen ist und noch ausblendet, bleibt der Burger stehen
   (.is-active, gesetzt von site.js): Das X blendet über dem Burger ein und
   beim Schließen wieder zu ihm aus. Hängt der Wechsel nur an :hover, fällt
   er in Chrome weg, sobald das Overlay unter der Maus liegt, und die Marke
   blitzt zwischen Burger und X auf (Safari behält den Hover bis zur nächsten
   Mausbewegung). */
.mark-hint:is(:hover, :focus-visible, .is-active) .mark { opacity: 0; transform: scale(.88); }
.mark-hint:is(:hover, :focus-visible, .is-active) .burger { opacity: 1; }
.mark-hint:is(:hover, :focus-visible, .is-active) .burger i { transform: none; }

/* ══ Hauptmenü ══
   Vollbild-Overlay auf Carbon Grey. Geschlossen ist es unsichtbar und damit
   nicht fokussierbar; site.js schaltet .is-open und sperrt das Scrollen der
   Seite über html.menu-open. Die Einträge zählen sich selbst (01, 02 …) und
   gleiten beim Öffnen gestaffelt von unten herein. */
.menu {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column;
  background: var(--ink); color: #fff;
  opacity: 0; visibility: hidden;
  transition: opacity .35s ease, visibility 0s linear .35s;
  overflow-y: auto; overscroll-behavior: contain;
}
.menu.is-open { opacity: 1; visibility: visible; transition: opacity .35s ease, visibility 0s; }
/* Das X muss genau dort sitzen, wo der Burger war. Sperrt das Öffnen das
   Scrollen, fällt eine klassische Scrollleiste weg (Windows, Maus am Mac):
   Ohne Ausgleich rutschten Seite und X um ihre Breite nach rechts. site.js
   misst sie als --sbw; das Overlay hält dieselbe Rinne frei. Die Leiste
   unten hat deshalb immer dasselbe Padding wie .head, auch mobil. */
html.menu-open { overflow: hidden; padding-right: var(--sbw, 0px); }
.menu.has-gutter { scrollbar-gutter: stable; }

.menu-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 32px clamp(24px, 4.4vw, 62px) 32px clamp(24px, 5vw, 72px);
}
.menu-bar .wordmark { width: 273px; height: 28px; filter: brightness(0) invert(1); }
/* Der Button ist so groß wie die Marke (gleiche Klickfläche, gleicher
   Fokusrahmen), das X selbst so breit wie der Burger (--x = .burger-Breite).
   Ein 2px-Strich der Länge L steht gedreht (L + 2) / √2 breit, also
   L = --x · √2 − 2px. Ungedreht wären die Striche breiter als der Button. */
.menu-close { --x: 28px; position: relative; width: 31.5px; height: 42px; appearance: none; border: 0; padding: 0; background: none; cursor: pointer; }
.menu-close i {
  position: absolute; left: 50%; top: 50%; height: 2px;
  width: calc(var(--x) * 1.41421 - 2px); margin: -1px 0 0 calc(var(--x) * -.707105 + 1px);
  background: #fff; transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}
.menu-close i:first-child { transform: rotate(45deg); }
.menu-close i:last-child { transform: rotate(-45deg); }
.menu-close:hover i, .menu-close:focus-visible i { background: var(--copper); }
.menu-close:focus-visible { outline: 2px solid var(--copper); outline-offset: 6px; }

.menu-body {
  flex: 1;
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 120px); align-items: end;
  padding: clamp(24px, 4vw, 64px) var(--pad) clamp(40px, 5vw, 80px);
}

.menu-main { list-style: none; margin: 0; padding: 0; counter-reset: m; }
.menu-main li { counter-increment: m; overflow: hidden; }
.menu-main a {
  display: inline-flex; align-items: baseline; gap: clamp(14px, 1.4vw, 22px);
  padding: .12em 0; color: #fff;
  font-size: clamp(34px, 4.6vw, 72px); font-weight: 500; line-height: 1.08; letter-spacing: -.01em;
  transform: translateY(105%);
  transition: color .2s, transform .7s cubic-bezier(.16, 1, .3, 1);
}
.menu-main a::before {
  content: counter(m, decimal-leading-zero);
  font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--grey-40);
  transform: translateY(-1.6em); transition: color .2s;
}
.menu.is-open .menu-main a { transform: none; }
.menu-main li:nth-child(2) a { transition-delay: 0s, .04s; }
.menu-main li:nth-child(3) a { transition-delay: 0s, .08s; }
.menu-main li:nth-child(4) a { transition-delay: 0s, .12s; }
.menu-main li:nth-child(5) a { transition-delay: 0s, .16s; }
.menu-main li:nth-child(6) a { transition-delay: 0s, .20s; }
.menu-main li:nth-child(n+7) a { transition-delay: 0s, .24s; }
.menu-main a:hover, .menu-main a:focus-visible, .menu-main a[aria-current] { color: var(--copper); }
.menu-main a:hover::before, .menu-main a[aria-current]::before { color: var(--copper); }
.menu-main a:focus-visible { outline: none; }

.menu-side { display: grid; gap: clamp(28px, 3vw, 44px); padding-bottom: .6em; }
.menu-side h4 { margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--copper); }
.menu-side a { color: #fff; transition: color .2s; }
.menu-side a:hover, .menu-side a:focus-visible { color: var(--copper); }
.menu-cos { display: grid; gap: 6px; font-size: 17px; }
.menu-reach { display: grid; gap: 4px; font-size: 17px; }
.menu-reach .menu-tel { font-size: clamp(22px, 1.8vw, 28px); font-weight: 500; }

/* ══ Footer ══ */
.foot { border-top: 1px solid var(--grey-20); padding: clamp(48px, 6vw, 80px) var(--pad) 40px; }
.foot-in { max-width: 1280px; margin: 0 auto; }
.foot-row { display: grid; grid-template-columns: 1fr auto; gap: clamp(32px, 5vw, 80px); align-items: start; }
.foot .wordmark { width: 271px; height: 28px; }
.social { display: flex; gap: 18px; margin-top: 26px; }
.social a {
  display: grid; place-items: center;
  font-size: 11px; letter-spacing: .06em; color: var(--grey-60);
  transition: color .2s;
}
.social svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.social a:hover { color: var(--copper); }
.fcols { display: flex; gap: clamp(32px, 5vw, 80px); }
.fcol h4 { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 16px; }
.fcol a { display: block; font-size: 14px; font-weight: 500; color: var(--grey-60); padding: 8px 0; transition: color .2s; }
.fcol a:hover, .fcol a[aria-current] { color: var(--copper); }
.foot-line { height: 1px; background: var(--grey-20); margin-top: clamp(32px, 4vw, 48px); }

@media (max-width: 1100px) {
  .sec-head { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .head .wordmark { width: 196px; height: 20px; }
  .head .mark { width: 22.5px; height: 30px; }
  .burger { width: 20px; height: 30px; gap: 5px; }
  .menu-bar .wordmark { width: 196px; height: 20px; }
  .menu-close { --x: 20px; width: 22.5px; height: 30px; }
  .head-end { gap: 18px; }
  .menu-body { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .menu-main a::before { font-size: 11px; }
  .foot-row { grid-template-columns: 1fr; }
  .fcols { flex-wrap: wrap; gap: 32px 48px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  [data-par] { transform: none !important; }
  .btn-out, .btn-out img, .mark-hint .mark, .burger, .burger i { transition: none; }
  .menu, .menu-main a, .menu-close i { transition: none !important; }
  .menu-main a { transform: none; }
}

/* Unter 400 px reicht der Header nicht für Wortmarke, Umschalter und Marke;
   der Umschalter steht dann nur im Menü. */
@media (max-width: 400px) {
  .head .lang { display: none; }
}