/* =====================================================================
   Rehfeldt & Massing GbR — „Industrial Substance"
   Build-less Vanilla. Geradlinig, technisch, aufgeräumt.
   Modern: scroll-driven animations · @property · :has() · clamp()
   ===================================================================== */

@property --barh { syntax: "<length-percentage>"; inherits: false; initial-value: 0%; }

:root {
  --bg:#E8E4DD;        /* warmer Beton-Sand */
  --surface:#F3F0EA;   /* heller Stein */
  --surface-2:#FBF9F5; /* fast weiß */
  --concrete:#D6CFC4;  /* mittlerer Beton */
  --text:#1C1A17;      /* tiefes Anthrazit */
  --muted:#6E665B;     /* warmes Stein-Grau */
  --line:#C3BAAC;      /* Rasterlinie */
  --line-soft:#D8D0C4;
  --accent:#E8541E;    /* Signalorange — Display, Flächen, Marken-Akzente */
  --accent-deep:#CF4612;
  --accent-press:#B83F10;
  --accent-ink:#B23F0C; /* tiefes Rost — kleine Orange-Texte auf Hell (AA-fest) */
  --ink:#22303D;       /* Stahlblau-Ink (invertierte Flächen) */
  --ink-2:#2B3A4A;
  --maxw:1280px;
  --gut:clamp(22px, 4vw, 40px);
  --mono:"Space Grotesk", ui-monospace, "Cascadia Code", Consolas, monospace;
  --sans:"Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body {
  font-family:var(--sans);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px;
  background-position:center -1px;
  background-attachment:fixed;
  background-blend-mode:multiply;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(125% 80% at 50% -12%, transparent 38%, color-mix(in oklab, var(--concrete) 60%, transparent) 100%);
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; }
::selection{ background:var(--accent); color:#fff; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.wrap{ position:relative; z-index:1; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }

/* mono label utility */
.kicker{ font-family:var(--mono); text-transform:uppercase; letter-spacing:.20em; font-size:12px; font-weight:600; color:var(--ink-2); display:inline-flex; align-items:center; gap:12px; }
.kicker::before{ content:""; width:34px; height:2px; background:var(--accent); }

/* ---------- Skip link ---------- */
.skip{ position:fixed; top:-100px; left:14px; z-index:80; background:var(--text); color:var(--bg); padding:10px 16px; font-family:var(--mono); font-size:13px; text-transform:uppercase; letter-spacing:.08em; text-decoration:none; transition:top .2s; }
.skip:focus{ top:10px; }

/* ---------- Scroll progress ---------- */
.progress{ position:fixed; top:0; left:0; right:0; height:3px; background:var(--accent); transform:scaleX(0); transform-origin:0 50%; z-index:60; }
@supports (animation-timeline: scroll()){
  .progress{ animation:prog linear both; animation-timeline:scroll(root); }
  @keyframes prog{ to{ transform:scaleX(1); } }
}

/* ---------- Header ---------- */
.site-header{ position:sticky; top:0; z-index:50; border-bottom:2px solid var(--text); background:color-mix(in oklab, var(--surface) 80%, transparent); backdrop-filter:blur(8px) saturate(140%); }
.hd{ display:flex; align-items:center; justify-content:space-between; height:74px; }
.brand{ display:flex; align-items:center; gap:13px; text-decoration:none; color:var(--text); }
.mark{ width:38px; height:38px; flex:none; background:var(--ink); display:grid; place-items:center; }
.mark span{ width:18px; height:18px; border:3px solid var(--bg); border-right-color:var(--accent); border-bottom-color:var(--accent); }
.wordmark{ font-family:var(--mono); font-weight:700; letter-spacing:.05em; font-size:17px; text-transform:uppercase; line-height:1; }
.wordmark b{ color:var(--accent-ink); font-weight:700; }
.nav{ display:flex; align-items:center; gap:28px; }
.nav a.nlink{ font-family:var(--mono); text-transform:uppercase; letter-spacing:.10em; font-size:12px; font-weight:500; color:var(--muted); text-decoration:none; transition:color .15s; position:relative; }
.nav a.nlink::after{ content:""; position:absolute; left:0; right:100%; bottom:-6px; height:2px; background:var(--accent); transition:right .25s var(--ease,ease); }
.nav a.nlink:hover{ color:var(--text); }
.nav a.nlink:hover::after{ right:0; }
.hd-cta{ font-family:var(--mono); text-transform:uppercase; letter-spacing:.08em; font-size:12px; font-weight:600; color:var(--text); border:2px solid var(--text); padding:9px 16px; text-decoration:none; transition:background .15s,color .15s; }
.hd-cta:hover{ background:var(--text); color:var(--bg); }
.burger{ display:none; width:42px; height:38px; border:2px solid var(--text); background:transparent; cursor:pointer; padding:0; position:relative; }
.burger span{ position:absolute; left:9px; right:9px; height:2px; background:var(--text); transition:.2s; }
.burger span:nth-child(1){ top:12px; } .burger span:nth-child(2){ top:18px; } .burger span:nth-child(3){ top:24px; }
.burger[aria-expanded="true"] span:nth-child(1){ top:18px; transform:rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ top:18px; transform:rotate(-45deg); }

/* ---------- Hero ---------- */
.hero{ padding:clamp(54px,8vw,92px) 0 clamp(46px,6vw,72px); }
.hero-grid{ display:grid; grid-template-columns:1.5fr .9fr; gap:clamp(36px,5vw,60px); align-items:end; }
.hero h1{
  font-family:var(--mono); font-weight:700; text-transform:uppercase;
  letter-spacing:-.01em; line-height:.96;
  font-size:clamp(42px, 6.6vw, 86px);
  margin:22px 0 0;
}
.hero h1 .or{ color:var(--accent); }
.lead{ margin-top:26px; max-width:48ch; font-size:clamp(17px,1.6vw,19px); color:var(--muted); }
.lead strong{ color:var(--text); font-weight:600; }
.btns{ display:flex; flex-wrap:wrap; gap:14px; margin-top:36px; }
.btn{ font-family:var(--mono); text-transform:uppercase; letter-spacing:.08em; font-size:14px; font-weight:600; padding:15px 26px; text-decoration:none; display:inline-flex; align-items:center; gap:10px; border:2px solid var(--text); transition:background .16s,color .16s,transform .16s,border-color .16s; }
.btn .arr{ transition:transform .2s; }
.btn:hover .arr{ transform:translateX(4px); }
.btn-primary{ background:var(--accent-deep); border-color:var(--accent-deep); color:#fff; }
.btn-primary:hover{ background:var(--accent-press); border-color:var(--accent-press); }
.btn-secondary{ background:transparent; color:var(--text); }
.btn-secondary:hover{ background:var(--text); color:var(--bg); }

/* spec plate */
.plate{ border:2px solid var(--text); background:var(--surface); }
.plate-top{ background:var(--ink); color:var(--bg); padding:13px 18px; display:flex; justify-content:space-between; align-items:center; font-family:var(--mono); text-transform:uppercase; letter-spacing:.12em; font-size:11px; font-weight:600; }
.plate-top .pdot{ width:9px; height:9px; background:var(--accent); }
.plate-body{ padding:4px 18px 12px; }
.spec-row{ display:flex; justify-content:space-between; gap:14px; padding:13px 0; border-bottom:1px dashed var(--line); }
.spec-row:last-child{ border-bottom:none; }
.spec-k{ font-family:var(--mono); text-transform:uppercase; letter-spacing:.08em; font-size:11px; color:var(--muted); font-weight:500; align-self:center; }
.spec-v{ font-family:var(--mono); font-size:13px; font-weight:600; text-align:right; }
.spec-v small{ display:block; font-family:var(--sans); font-weight:400; color:var(--muted); font-size:11px; letter-spacing:0; text-transform:none; }
.loc{ margin-top:14px; font-family:var(--mono); text-transform:uppercase; letter-spacing:.14em; font-size:11px; color:var(--muted); display:flex; align-items:center; gap:10px; }
.loc::before{ content:""; width:8px; height:8px; border:2px solid var(--accent); border-radius:50%; }

/* ---------- Figures band ---------- */
.figures{ border-top:2px solid var(--text); border-bottom:1px solid var(--line); }
.fig-grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.fig{ padding:26px 24px; border-right:1px solid var(--line); }
.fig:last-child{ border-right:none; }
.fig .n{ font-family:var(--mono); font-weight:700; font-size:clamp(30px,3.4vw,44px); line-height:1; letter-spacing:-.01em; }
.fig .n .u{ color:var(--accent); }
.fig .l{ font-family:var(--mono); text-transform:uppercase; letter-spacing:.10em; font-size:11px; color:var(--muted); margin-top:10px; }

/* ---------- Section scaffold ---------- */
.section{ padding:clamp(56px,8vw,96px) 0; }
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding-bottom:22px; border-bottom:2px solid var(--text); margin-bottom:0; }
.sec-head .h-l{ max-width:30ch; }
.sec-head h2{ font-family:var(--mono); text-transform:uppercase; letter-spacing:-.005em; font-weight:700; font-size:clamp(24px,3vw,34px); line-height:1.02; margin-top:14px; }
.sec-head .sub{ font-family:var(--mono); text-transform:uppercase; letter-spacing:.10em; font-size:12px; color:var(--muted); text-align:right; max-width:34ch; }

/* ---------- Geschäftsbereiche ---------- */
.grid{ display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); border-top:none; }
.cell{ padding:30px 28px 34px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--surface); position:relative; transition:background .16s; overflow:hidden; }
.cell:nth-child(3n){ border-right:none; }
.grid .cell:nth-last-child(-n+3){ border-bottom:none; }
.cell:hover{ background:var(--surface-2); }
.cell .num{ font-family:var(--mono); font-weight:700; font-size:13px; letter-spacing:.06em; color:var(--muted); transition:color .16s; }
.cell:hover .num{ color:var(--accent); }
.cell h3{ font-family:var(--mono); text-transform:uppercase; letter-spacing:.005em; font-size:20px; font-weight:600; margin:14px 0 8px; line-height:1.06; }
.cell p{ font-size:14.5px; color:var(--muted); }
.cell .bar{ position:absolute; left:0; top:0; width:4px; height:var(--barh,0%); background:var(--accent); transition:--barh .22s; }
@supports not (animation-timeline: scroll()){ .cell .bar{ transition:height .22s; height:0; } }
.cell:hover .bar{ --barh:100%; height:100%; }
.cell .arr2{ position:absolute; right:24px; top:30px; font-family:var(--mono); color:var(--accent); opacity:0; transform:translateX(-6px); transition:.2s; }
.cell:hover .arr2{ opacity:1; transform:translateX(0); }

/* ---------- Ansatz ---------- */
.approach{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--line); border-top:none; }
.principle{ padding:30px 28px; border-right:1px solid var(--line); background:var(--surface); }
.principle:last-child{ border-right:none; }
.principle .pn{ font-family:var(--mono); font-weight:700; color:var(--accent-ink); font-size:13px; letter-spacing:.06em; }
.principle h3{ font-family:var(--mono); text-transform:uppercase; font-size:17px; letter-spacing:.02em; margin:12px 0 8px; }
.principle p{ font-size:14.5px; color:var(--muted); }

/* ---------- Team ---------- */
.team{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,28px); }
.person{ border:2px solid var(--text); background:var(--surface); display:flex; flex-direction:column; }
.person-top{ display:flex; align-items:center; justify-content:space-between; padding:14px 20px; border-bottom:1px solid var(--line); font-family:var(--mono); text-transform:uppercase; letter-spacing:.12em; font-size:11px; color:var(--muted); }
.person-top .idx{ color:var(--accent); font-weight:700; }
.person-body{ padding:24px 22px 26px; }
.person h3{ font-family:var(--mono); text-transform:uppercase; letter-spacing:.01em; font-size:23px; font-weight:700; }
.person .role{ font-family:var(--mono); text-transform:uppercase; letter-spacing:.08em; font-size:12px; color:var(--accent-ink); margin-top:6px; }
.person p{ color:var(--muted); font-size:15px; margin-top:14px; max-width:46ch; }
.tags{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.tags li{ font-family:var(--mono); text-transform:uppercase; letter-spacing:.06em; font-size:11px; color:var(--muted); border:1px solid var(--line); padding:5px 10px; }
.person .plink{ margin-top:20px; display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); text-transform:uppercase; letter-spacing:.08em; font-size:12px; font-weight:600; color:var(--text); text-decoration:none; }
.person .plink .a{ color:var(--accent-ink); transition:transform .2s; }
.person .plink:hover .a{ transform:translateX(4px); }

/* ---------- Referenzen / Plattformen ---------- */
.refs{ display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); border-top:none; }
.ref{ display:flex; flex-direction:column; gap:10px; padding:28px 26px 30px; border-right:1px solid var(--line); background:var(--surface); text-decoration:none; color:var(--text); transition:background .16s; position:relative; }
.ref:last-child{ border-right:none; }
.ref:hover{ background:var(--surface-2); }
.ref .rdom{ font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--accent-ink); }
.ref h3{ font-family:var(--mono); text-transform:uppercase; font-size:18px; letter-spacing:.01em; }
.ref p{ font-size:14px; color:var(--muted); }
.ref .go{ margin-top:auto; font-family:var(--mono); text-transform:uppercase; letter-spacing:.08em; font-size:12px; font-weight:600; color:var(--muted); display:inline-flex; gap:8px; transition:color .16s; }
.ref:hover .go{ color:var(--text); }
.ref:hover .go .a{ color:var(--accent); }

/* ---------- Kontakt ---------- */
.contact{ border:2px solid var(--text); background:var(--ink); color:var(--bg); position:relative; overflow:hidden; }
.contact::after{ content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:48px 48px; pointer-events:none; }
.contact-in{ position:relative; padding:clamp(36px,5vw,60px); display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:center; }
.contact .kicker{ color:#cdd6df; }
.contact .kicker::before{ background:var(--accent); }
.contact h2{ font-family:var(--mono); text-transform:uppercase; font-weight:700; letter-spacing:-.01em; font-size:clamp(28px,3.6vw,46px); line-height:1; margin:16px 0 0; }
.contact h2 .or{ color:var(--accent); }
.contact .ctext{ color:#c7d0d9; margin-top:18px; max-width:42ch; }
.contact-actions{ display:flex; flex-direction:column; gap:14px; }
.cline{ display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px dashed rgba(255,255,255,.18); text-decoration:none; color:var(--bg); }
.cline:last-child{ border-bottom:none; }
.cline .ck{ font-family:var(--mono); text-transform:uppercase; letter-spacing:.10em; font-size:11px; color:#9fb0bd; width:74px; flex:none; }
.cline .cv{ font-family:var(--mono); font-size:15px; font-weight:600; }
.cline:hover .cv{ color:var(--accent); }

/* ---------- Footer ---------- */
.site-footer{ border-top:2px solid var(--text); padding:30px 0; }
.foot{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; }
.foot .fl{ font-family:var(--mono); text-transform:uppercase; letter-spacing:.06em; font-size:12px; color:var(--muted); }
.foot .fl b{ color:var(--text); }
.foot nav{ display:flex; gap:22px; }
.foot nav a{ font-family:var(--mono); text-transform:uppercase; letter-spacing:.08em; font-size:12px; color:var(--muted); text-decoration:none; transition:color .15s; }
.foot nav a:hover{ color:var(--accent); }

/* ---------- Legal / Prose ---------- */
.legal{ padding:clamp(38px,5.5vw,64px) 0 clamp(56px,8vw,96px); }
.legal .wrap{ max-width:880px; }
.legal-back{ font-family:var(--mono); text-transform:uppercase; letter-spacing:.10em; font-size:12px; font-weight:600; color:var(--muted); text-decoration:none; display:inline-flex; align-items:center; gap:9px; transition:color .15s; }
.legal-back .a{ color:var(--accent); transition:transform .2s; display:inline-block; }
.legal-back:hover{ color:var(--text); }
.legal-back:hover .a{ transform:translateX(-4px); }
.legal h1{ font-family:var(--mono); text-transform:uppercase; font-weight:700; letter-spacing:-.01em; line-height:1; font-size:clamp(34px,5.2vw,58px); margin:22px 0 0; }
.legal .lead-p{ color:var(--muted); max-width:64ch; margin-top:18px; }
.legal h2{ font-family:var(--mono); text-transform:uppercase; letter-spacing:.03em; font-weight:700; font-size:clamp(15px,1.7vw,19px); line-height:1.2; margin:40px 0 14px; padding-top:20px; border-top:2px solid var(--text); }
.legal p{ color:var(--text); margin:0 0 14px; max-width:70ch; }
.legal address{ font-style:normal; font-family:var(--mono); font-size:14px; line-height:1.95; color:var(--text); border-left:3px solid var(--accent); padding:6px 0 6px 18px; margin:8px 0; background:var(--surface); }
.legal a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; transition:color .15s; }
.legal a:hover{ color:var(--accent-deep); }
.legal ul{ margin:10px 0 16px; padding-left:0; list-style:none; max-width:70ch; }
.legal li{ position:relative; padding-left:22px; margin-bottom:8px; color:var(--text); }
.legal li::before{ content:""; position:absolute; left:2px; top:12px; width:8px; height:2px; background:var(--accent); }
.legal code{ font-family:var(--mono); font-size:.88em; background:var(--surface); border:1px solid var(--line); padding:1px 6px; }
.legal strong{ font-weight:600; }
.legal .updated{ margin-top:40px; padding-top:18px; border-top:1px solid var(--line); font-family:var(--mono); text-transform:uppercase; letter-spacing:.08em; font-size:12px; color:var(--muted); max-width:none; }

/* ---------- Reveal (scroll-driven) ---------- */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .reveal{ opacity:0; transform:translateY(20px); animation:reveal both linear; animation-timeline:view(); animation-range:entry 2% entry 42%; }
    @keyframes reveal{ to{ opacity:1; transform:none; } }
    .hero h1{ opacity:0; animation:heroIn .9s cubic-bezier(.2,.7,.2,1) .05s forwards; }
    .hero .lead{ opacity:0; animation:heroIn .9s cubic-bezier(.2,.7,.2,1) .18s forwards; }
    .hero .btns{ opacity:0; animation:heroIn .9s cubic-bezier(.2,.7,.2,1) .30s forwards; }
    .hero .plate{ opacity:0; animation:heroIn .9s cubic-bezier(.2,.7,.2,1) .24s forwards; }
    @keyframes heroIn{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }
  }
}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .hero-grid{ grid-template-columns:1fr; gap:38px; align-items:start; }
  .plate{ max-width:520px; }
  .fig-grid{ grid-template-columns:repeat(2,1fr); }
  .fig:nth-child(2){ border-right:none; }
  .fig:nth-child(1),.fig:nth-child(2){ border-bottom:1px solid var(--line); }
  .team{ grid-template-columns:1fr; }
  .contact-in{ grid-template-columns:1fr; gap:28px; }
}
@media (max-width:820px){
  .nav .nlink, .hd-cta{ display:none; }
  .burger{ display:block; }
  .nav.open{ position:absolute; top:74px; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; background:var(--surface); border-bottom:2px solid var(--text); padding:6px var(--gut) 16px; }
  .nav.open .nlink{ display:block; padding:14px 0; border-bottom:1px solid var(--line); font-size:13px; }
  .nav.open .hd-cta{ display:inline-block; margin-top:14px; text-align:center; }
}
@media (max-width:680px){
  .grid,.approach,.refs{ grid-template-columns:1fr; }
  .cell,.principle,.ref{ border-right:none !important; }
  .grid .cell:nth-last-child(-n+3){ border-bottom:1px solid var(--line); }
  .grid .cell:last-child{ border-bottom:none; }
  .fig-grid{ grid-template-columns:1fr 1fr; }
  .sec-head{ flex-direction:column; align-items:flex-start; }
  .sec-head .sub{ text-align:left; }
}