/* =====================================================================
   ARFA DIGITAL CONSULTING — reset, typography, layout, primitives
   ===================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul[class],ol[class]{margin:0;padding:0;list-style:none}
img,svg{display:block;max-width:100%}
input,button,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

body{
  background:var(--paper);
  color:var(--ink-soft);
  font-family:var(--font-body);
  font-size:var(--t-body);
  line-height:1.7;
  font-feature-settings:"kern" 1,"liga" 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  transition:background-color .3s var(--ease),color .3s var(--ease);
}

a{color:inherit;text-decoration:none}
::selection{background:var(--ink);color:var(--paper)}

:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.section--invert :focus-visible{outline-color:var(--i-ink)}

.skip-link{
  position:absolute;left:var(--gutter);top:-200px;z-index:300;
  background:var(--ink);color:var(--paper);padding:12px 20px;
  font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;
  font-weight:500;transition:top .2s var(--ease);
}
.skip-link:focus{top:14px}

/* =====================================================================
   LAYOUT
   ===================================================================== */
.wrap{
  width:100%;max-width:var(--wrap);margin-inline:auto;
  padding-inline:var(--gutter);
}

/* Content grid: sections place themselves asymmetrically on these
   tracks. Invisible — the hairline overlay it used to mirror is gone. */
.grid{
  display:grid;
  grid-template-columns:repeat(var(--cols),minmax(0,1fr));
  column-gap:var(--gutter);
}

.section{position:relative;z-index:2;padding-block:var(--section-y)}
.section--tight{padding-block:var(--section-y-tight)}
.section--band{background:var(--paper-deep)}

.section--invert{
  background:var(--i-bg);
  color:var(--i-soft);
  --rule:var(--i-rule);
  --rule-strong:var(--i-rule);
  --ink:var(--i-ink);
  --ink-soft:var(--i-soft);
  --ink-faint:var(--i-faint);
  --paper:var(--i-bg);
  --paper-raise:var(--i-raise);
  --accent:var(--i-accent);
}
.section--invert > .wrap{position:relative;z-index:1}

.rule{border:0;border-top:1px solid var(--rule);margin:0;position:relative;z-index:2}

/* Column placement helpers, 6-track. Collapse to full width on narrow. */
.col-1-4{grid-column:1 / span 3}
.col-2-5{grid-column:2 / span 3}
.col-3-7{grid-column:3 / span 4}
.col-4-7{grid-column:4 / span 3}
.col-1-3{grid-column:1 / span 2}
.col-1-7{grid-column:1 / -1}
.col-2-7{grid-column:2 / -1}

@media (max-width:980px){
  .col-1-4,.col-2-5,.col-3-7,.col-4-7,.col-1-3,.col-2-7{grid-column:1 / -1}
}

/* =====================================================================
   TYPOGRAPHY
   ===================================================================== */
h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink);font-weight:300;text-wrap:balance}

/* Display + section headings are UPPERCASE serif — the reference's
   defining typographic move. */
.display{
  font-size:var(--t-display);font-weight:200;line-height:1.04;
  letter-spacing:.055em;text-transform:uppercase;color:var(--ink);
}
.title{
  font-size:var(--t-title);font-weight:200;line-height:1.06;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink);
}
h2,.h2{
  font-size:var(--t-section);font-weight:300;line-height:1.12;
  letter-spacing:.05em;text-transform:uppercase;
}
h3,.h3{font-size:var(--t-card);font-weight:400;line-height:1.3;letter-spacing:0}
h4,.h4{font-size:var(--t-small);font-weight:400;line-height:1.4}

/* Serif italic — eyebrows, pull quotes, group labels. Never mono. */
.eyebrow{
  font-family:var(--font-display);font-style:italic;font-weight:300;
  font-size:var(--t-lead);color:var(--ink-faint);letter-spacing:.01em;
  display:block;margin-bottom:var(--s-5);text-transform:none;
}
.eyebrow--sm{font-size:var(--t-small)}

/* Small sans caps — section labels, nav, buttons, meta. */
.label{
  font-family:var(--font-body);font-size:var(--t-label);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
  line-height:1.5;
}
.label--faint{color:var(--ink-faint)}

/* Mono survives only for genuinely technical data. */
.mono{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em}

p{max-width:var(--measure)}
.lead{font-size:var(--t-lead);line-height:1.6;color:var(--ink-soft);max-width:54ch}
.prose p + p{margin-top:var(--s-5)}
.prose strong{color:var(--ink);font-weight:500}
.small{font-size:var(--t-small)}

.pullquote{
  font-family:var(--font-display);font-style:italic;font-weight:300;
  font-size:var(--t-quote);line-height:1.45;color:var(--ink);
  max-width:34ch;letter-spacing:.005em;
}
.pullquote-attr{margin-top:var(--s-5);color:var(--ink-faint)}

/* Long uppercase words must not outrun a narrow column. German is the
   real test here — DATENINFRASTRUKTUR and GESUNDHEITSWESEN are longer
   than anything in the English copy. hyphens:auto uses the <html lang>
   dictionary, so German breaks at proper syllables rather than anywhere;
   overflow-wrap is the last resort for a language with no dictionary. */
.display,.title,h2,.h2{
  -webkit-hyphens:auto;hyphens:auto;
}
@media (max-width:560px){
  .display,.title{letter-spacing:.03em}
  .pullquote{max-width:none}
}

/* =====================================================================
   SECTION HEAD
   ===================================================================== */
.section-head{margin-bottom:var(--s-8)}
.section-head .label{display:block;margin-bottom:var(--s-4)}
.section-head h2{max-width:16ch}
.section-head .lead{margin-top:var(--s-5)}

/* =====================================================================
   LINKS & BUTTONS
   ===================================================================== */
.link{color:var(--ink);border-bottom:1px solid var(--rule);padding-bottom:1px;
  transition:border-color .25s var(--ease)}
.link:hover{border-bottom-color:var(--accent)}

.link-arrow{
  display:inline-flex;align-items:baseline;gap:var(--s-3);
  color:var(--ink);font-size:var(--t-label);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  border-bottom:1px solid var(--rule);padding-bottom:8px;
  transition:border-color .25s var(--ease);
}
.link-arrow::after{content:"\2192";transition:transform .35s var(--ease)}
.link-arrow:hover{border-bottom-color:var(--accent)}
.link-arrow:hover::after{transform:translateX(6px)}

.btn{
  display:inline-flex;align-items:center;gap:var(--s-3);
  padding:16px 30px;font-size:var(--t-label);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;line-height:1;
  border:1px solid var(--ink);color:var(--ink);background:transparent;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
  white-space:nowrap;
}
.btn::after{content:"\2192";transition:transform .35s var(--ease)}
.btn:hover::after{transform:translateX(6px)}
.btn--solid{background:var(--ink);color:var(--paper)}
.btn--solid:hover{background:transparent;color:var(--ink)}
.btn--ghost{border-color:var(--rule-strong)}
.btn--ghost:hover{border-color:var(--ink)}
.btn--plain::after{content:none}

.actions{display:flex;flex-wrap:wrap;gap:var(--s-4);align-items:center;margin-top:var(--s-7)}

/* =====================================================================
   REVEAL
   Visible by default; JS hides on init so no-JS visitors see everything.
   ===================================================================== */
.js [data-reveal]{
  opacity:0;transform:translateY(18px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
  transition-delay:calc(var(--i, 0) * 70ms);
}
.js [data-reveal].is-visible{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  .js [data-reveal]{opacity:1;transform:none;transition:none;transition-delay:0s}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* =====================================================================
   UTILITIES
   ===================================================================== */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.text-ink{color:var(--ink)}
.stack-3 > * + *{margin-top:var(--s-3)}
.stack-4 > * + *{margin-top:var(--s-4)}
.stack-5 > * + *{margin-top:var(--s-5)}
.stack-6 > * + *{margin-top:var(--s-6)}
.stack-7 > * + *{margin-top:var(--s-7)}