/* ==========================================================================
   FASBO GRUPPE — Designsystem "BAUWERK"
   Fundament: Tokens, Typografie, Raster, Bewegung, Basiskomponenten
   ========================================================================== */

/* --- Schriften (selbst gehostet, DSGVO-konform, keine externen Requests) --- */
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('../fonts/plexmono-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('../fonts/plexmono-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}

/* --- Tokens ------------------------------------------------------------- */
:root {
  /* Farbwelt Hauptmarke — architektonisch achromatisch */
  --ink:        #0B0C0E;
  --ink-soft:   #16181B;
  --ink-lift:   #22252A;
  --kalk:       #F2F1ED;
  --kalk-deep:  #E7E5DE;
  --kalk-warm:  #DEDBD2;
  --beton:      #8C8880;
  --beton-dark: #625F59;
  /* Signalrot — die einzige Farbe der Hauptmarke.
     Sie stammt aus der Wortmarke (rotes F) und wird bewusst sparsam
     eingesetzt: aktive Navigation, Aufzählungsmarken, Registermarken.
     --signal-lt ist die aufgehellte Fassung für dunkle Flächen. */
  --signal:     #C4231C;
  --signal-lt:  #E4574B;
  /* Markenrot der Wortmarke. Eigene Token, weil das rote F der Marke
     gehört und nicht dem Seitenthema: die Mikrosite darf ihren Akzent
     wechseln, das Logo bleibt rot. */
  --marke-rot:     #C4231C;
  --marke-rot-lt:  #E4574B;

  --bg:      var(--kalk);
  --fg:      var(--ink);
  --muted:   var(--beton-dark);
  --accent:  var(--signal);

  --line:      color-mix(in srgb, var(--ink) 14%, transparent);
  --line-soft: color-mix(in srgb, var(--ink) 8%, transparent);
  --line-inv:  color-mix(in srgb, var(--kalk) 20%, transparent);

  /* Raster */
  --page-pad: clamp(1.25rem, 4vw, 4.5rem);
  --max:      1680px;
  --gutter:   clamp(1rem, 1.8vw, 2rem);
  --col:      calc((100% - 11 * var(--gutter)) / 12);

  /* Typo-Skala (fluid) */
  --t-display: clamp(2.2rem, 7.2vw, 8.2rem);
  --t-xl:      clamp(1.85rem, 5.2vw, 5.5rem);
  --t-h1:      clamp(1.7rem, 4.1vw, 4.25rem);
  --t-h2:      clamp(1.6rem, 2.9vw, 3rem);
  --t-h3:      clamp(1.2rem, 1.55vw, 1.6rem);
  --t-h4:      clamp(1.02rem, 1.15vw, 1.2rem);
  --t-lead:    clamp(1.06rem, 1.35vw, 1.42rem);
  --t-body:    clamp(0.97rem, 1.02vw, 1.075rem);
  --t-small:   clamp(0.85rem, 0.9vw, 0.925rem);
  --t-label:   0.6875rem;

  /* Rhythmus */
  --sec:     clamp(4.5rem, 9vw, 10rem);
  --sec-lg:  clamp(6rem, 13vw, 15rem);

  /* Bewegung */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io:   cubic-bezier(0.66, 0, 0.16, 1);
  --dur:       0.75s;
  --dur-fast:  0.32s;

  --head-h: 84px;
}

@media (max-width: 860px) { :root { --head-h: 68px; } }

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-h) + 1.5rem);
}
body {
  background: var(--bg);
  color: var(--fg);
  font-family: 'Archivo', 'Helvetica Neue', Arial, system-ui, sans-serif;
  font-size: var(--t-body);
  line-height: 1.62;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
img { background: var(--kalk-warm); }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3, h4, h5 { font-weight: 500; line-height: 1.05; letter-spacing: -0.022em; }
::selection { background: var(--ink); color: var(--kalk); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}
.on-dark :focus-visible, .site-foot :focus-visible { outline-color: var(--kalk); }

/* --- Layout-Primitive ---------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--page-pad);
}
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); }

/* Spaltenhilfen — kollabieren gemeinsam auf einspaltig */
.col-main  { grid-column: 1 / span 7; }
.col-side  { grid-column: 9 / span 4; }
.col-half  { grid-column: 1 / span 6; }
.col-half2 { grid-column: 8 / span 5; }
@media (max-width: 1024px) {
  .col-main, .col-side, .col-half, .col-half2 { grid-column: 1 / -1; }
  .col-side { margin-top: clamp(2rem, 4vw, 3rem); }
}
.section { padding-block: var(--sec); position: relative; }
.section--lg { padding-block: var(--sec-lg); }
.section--tight { padding-block: clamp(3rem, 5vw, 5.5rem); }

.on-dark, .hero, .pagehead, .site-foot, .f-hero {
  background: var(--ink); color: var(--kalk);
  --bg: var(--ink); --fg: var(--kalk);
  --line: var(--line-inv); --muted: #9C9891; --accent: var(--signal-lt);
}
.on-dark img, .hero img, .pagehead img { background: var(--ink-lift); }

/* --- Typografische Bausteine -------------------------------------------- */
.label {
  font-family: 'Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1;
}
.label--accent { color: var(--accent); }
.mono {
  font-family: 'Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--t-label);
  letter-spacing: 0.1em;
}

/* Leitzeilen: schmale Versalschrift.
   Archivo hat eine Breitenachse (62–125 %) — die schmale Schnittbreite kommt
   also aus derselben Datei, ohne eine zweite Schrift zu laden. Versalien und
   enger Satz geben der Zeile Masse; im Deutschen mit seinen langen
   Komposita ist die schmale Breite zusätzlich ein Platzgewinn. */
.display {
  font-size: var(--t-display);
  font-stretch: 76%;
  font-weight: 600;
  line-height: 0.88;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  text-wrap: balance;
}
.t-xl {
  font-size: var(--t-xl); font-stretch: 76%; font-weight: 600;
  line-height: 0.9; letter-spacing: -0.004em; text-transform: uppercase;
}
.t-h1 {
  font-size: var(--t-h1); font-stretch: 78%; font-weight: 600;
  line-height: 0.92; letter-spacing: -0.003em; text-transform: uppercase;
}
/* Nur auf schmalen Geräten darf ein überlanges Kompositum brechen —
   auf dem Desktop wird stattdessen die Spalte breit genug gehalten. */
@media (max-width: 700px) {
  .display, .t-xl, .t-h1 { overflow-wrap: break-word; }
}

/* Gemischte Schreibweise, wo Lesbarkeit vor Wucht geht */
.t-xl--mixed, .t-h1--mixed {
  text-transform: none; font-stretch: 103%; font-weight: 500; letter-spacing: -0.028em; line-height: 0.98;
}
.t-h2  { font-size: var(--t-h2); line-height: 1.04; letter-spacing: -0.024em; }
.t-h3  { font-size: var(--t-h3); line-height: 1.18; letter-spacing: -0.016em; }
.t-h4  { font-size: var(--t-h4); line-height: 1.3;  letter-spacing: -0.01em; }
.lead  { font-size: var(--t-lead); line-height: 1.48; color: var(--muted); letter-spacing: -0.008em; max-width: 58ch; }
.lead--fg { color: inherit; }
.small { font-size: var(--t-small); }
.muted { color: var(--muted); }
.measure { max-width: 66ch; }
.measure-sm { max-width: 46ch; }

/* Index-Nummern im Bauplan-Stil */
.idx {
  font-family: 'Plex Mono', monospace;
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--accent);
}

/* --- Linien & architektonische Marken ------------------------------------ */
.rule { height: 1px; width: 100%; background: var(--line); transform-origin: left; }
.rule--ink { background: currentColor; opacity: 0.16; }

.sec-head {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
  align-items: end;
  padding-bottom: clamp(1.75rem, 3vw, 3rem);
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(2.25rem, 4.5vw, 4.5rem);
}
.sec-head__meta { grid-column: 1 / span 3; display: flex; flex-direction: column; gap: 0.6rem; }
.sec-head__title { grid-column: 4 / span 8; }
.sec-head__aside { grid-column: 4 / span 8; padding-top: 1.1rem; }

/* Weiterführender Verweis am Ende eines Abschnitts. Steht rechtsbündig
   unter der Aufzählung — dort, wo der Blick nach dem letzten Eintrag
   ankommt. Auf schmalen Geräten linksbündig, weil rechtsbündige
   Einzelzeilen dort verloren wirken. */
.sec-more {
  display: flex; justify-content: flex-end;
  margin-top: clamp(1.6rem, 2.8vw, 2.6rem);
}
@media (max-width: 700px) { .sec-more { justify-content: flex-start; } }
@media (max-width: 1024px) {
  .sec-head { grid-template-columns: 1fr; gap: 1.25rem; }
  .sec-head__meta, .sec-head__title, .sec-head__aside { grid-column: 1 / -1; }
}

/* Eckmarken (Passermarken) — architektonisches Detail */
.marks { position: absolute; inset: 0; pointer-events: none; }
.marks span {
  position: absolute; width: 14px; height: 14px;
  border-color: currentColor; opacity: 0.28;
}
.marks span:nth-child(1) { top: 0; left: 0; border-top: 1px solid; border-left: 1px solid; }
.marks span:nth-child(2) { top: 0; right: 0; border-top: 1px solid; border-right: 1px solid; }
.marks span:nth-child(3) { bottom: 0; left: 0; border-bottom: 1px solid; border-left: 1px solid; }
.marks span:nth-child(4) { bottom: 0; right: 0; border-bottom: 1px solid; border-right: 1px solid; }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  --btn-fg: var(--bg);
  --btn-bg: var(--fg);
  position: relative;
  display: inline-flex; align-items: center; gap: 0.85rem;
  padding: 1.05rem 1.65rem;
  background: var(--btn-bg); color: var(--btn-fg);
  font-size: 0.9rem; font-weight: 500; letter-spacing: -0.005em;
  border: 1px solid var(--btn-bg);
  overflow: hidden; isolation: isolate;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  cursor: pointer;
}
.btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--btn-fg);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform 0.42s var(--ease);
}
.btn:hover::before, .btn:focus-visible::before { transform: scaleY(1); }
.btn:hover, .btn:focus-visible { color: var(--btn-bg); }
.btn__arrow { width: 18px; height: 8px; flex: none; overflow: hidden; }
.btn__arrow svg { transition: transform 0.42s var(--ease); }
.btn:hover .btn__arrow svg { transform: translateX(3px); }

.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--fg);
  border-color: color-mix(in srgb, var(--fg) 45%, transparent); color: var(--fg);
}
.btn--ghost::before { background: var(--fg); }
.btn--ghost:hover, .btn--ghost:focus-visible { color: var(--bg); border-color: var(--fg); }
.btn--sm { padding: 0.72rem 1.15rem; font-size: 0.8125rem; }

/* Textlink mit gezeichneter Unterlinie */
.link {
  position: relative; display: inline-flex; align-items: baseline; gap: 0.6rem;
  padding-bottom: 3px; font-weight: 500;
}
.link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(1); transform-origin: right;
  transition: transform 0.4s var(--ease);
}
.link:hover::after { transform: scaleX(0); }
.link__arrow { transition: transform 0.4s var(--ease); }
.link:hover .link__arrow { transform: translateX(4px); }

/* --- Bewegung ------------------------------------------------------------ */
/* Ohne JavaScript bleibt alles sichtbar: Die Startzustände greifen erst,
   wenn das Inline-Skript im <head> die Klasse .js gesetzt hat. */
.js [data-reveal] { will-change: transform, opacity; }

.js [data-reveal="up"] {
  opacity: 0; transform: translate3d(0, 26px, 0);
  transition: opacity 0.8s var(--ease), transform 0.9s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal="up"].is-in { opacity: 1; transform: none; }

.js [data-reveal="mask"] {
  clip-path: inset(0 0 102% 0);
  transition: clip-path 1.05s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal="mask"].is-in { clip-path: inset(0 0 -2% 0); }

.js [data-reveal="line"] {
  transform: scaleX(0);
  transition: transform 1.1s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal="line"].is-in { transform: scaleX(1); }

[data-reveal="img"] { overflow: hidden; }
.js [data-reveal="img"] {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.15s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal="img"] > img, .js [data-reveal="img"] > picture > img {
  transform: scale(1.12); transition: transform 1.5s var(--ease); transition-delay: var(--d, 0ms);
}
.js [data-reveal="img"].is-in { clip-path: inset(0 0 0 0); }
.js [data-reveal="img"].is-in > img, .js [data-reveal="img"].is-in > picture > img { transform: scale(1); }

/* Zeilenweise Enthüllung von Fließtext-Headlines */
.reveal-lines .rl { display: block; overflow: hidden; }
.js .reveal-lines .rl > span {
  display: block; transform: translate3d(0, 105%, 0);
  transition: transform 1s var(--ease); transition-delay: calc(var(--i, 0) * 80ms);
}
.js .reveal-lines.is-in .rl > span { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  [data-reveal="img"] > img { transform: none !important; }
  .reveal-lines .rl > span { transform: none !important; }
}

/* --- Auftakt beim ersten Aufruf ------------------------------------------
   Kurzer Vorhang mit der Wortmarke: rund 1,2 Sekunden, einmal je Sitzung,
   danach nie wieder. Bewusst nicht als Ladebalken gebaut — die Seite lädt
   dahinter ganz normal weiter, der Vorhang hält nichts auf. Er liegt über
   allem, ist aber nicht anklickbar und nicht im Fokuslauf, und bei
   „Bewegung reduzieren" wird er gar nicht erst eingeschaltet. */
.intro { display: none; }
.is-intro .intro {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.95rem;
  position: fixed; inset: 0; z-index: 300;
  background: var(--ink);
  pointer-events: none;
  animation: intro-weg 0.62s var(--ease-io) 0.98s forwards;
}
.is-intro .intro__mark {
  font-size: clamp(1.5rem, 4.6vw, 2.9rem);
  font-weight: 700; font-stretch: 108%;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--kalk);
  opacity: 0; transform: translateY(7px);
  animation: intro-marke 0.5s var(--ease) 0.05s forwards;
}
.is-intro .intro__mark b { color: var(--marke-rot-lt); font-weight: 700; }
/* Feine Linie, die unter der Marke aufzieht — dieselbe Geste wie die
   Registerlinien im Rest der Seite. */
.is-intro .intro__rule {
  width: clamp(90px, 16vw, 190px); height: 1px;
  background: var(--line-inv);
  transform: scaleX(0); transform-origin: left;
  animation: intro-linie 0.55s var(--ease) 0.22s forwards;
}
/* Der Claim kommt zuletzt — erst der Name, dann die Linie, dann der Satz.
   Diese Reihenfolge liest sich wie ein Satzzeichen und nicht wie ein
   gleichzeitiges Aufblitzen. */
.is-intro .intro__claim {
  font-family: 'Plex Mono', ui-monospace, monospace;
  font-size: clamp(0.6rem, 1.15vw, 0.72rem);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--beton);
  opacity: 0; transform: translateY(4px);
  animation: intro-claim 0.5s var(--ease) 0.42s forwards;
  text-align: center; padding-inline: 1.5rem;
}
@keyframes intro-claim { to { opacity: 1; transform: none; } }
@keyframes intro-marke { to { opacity: 1; transform: none; } }
@keyframes intro-linie { to { transform: scaleX(1); } }
@keyframes intro-weg   { to { clip-path: inset(0 0 100% 0); visibility: hidden; } }

/* --- Hilfsklassen -------------------------------------------------------- */
.vis-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -120%);
  background: var(--ink); color: var(--kalk); padding: 0.85rem 1.4rem; z-index: 200;
  transition: transform 0.2s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }
.stack > * + * { margin-top: var(--gap, 1.1rem); }
.flow > * + * { margin-top: 1.05em; }