/* ============================================================
   NIEDERREITER — Stylesheet
   Eine Datei, nach Abschnitten sortiert. Keine Utility-Klassen-Wolke,
   kein Framework: jede Klasse gehört zu genau einem Bauteil.

    1 Reset und Tokens
    2 Typografie und Grundelemente
    3 Kopf und Navigation
    4 Startseite
    5 Bereichsseite
    6 Projektseite
    7 Stellenseite
    8 Formulare
    9 Fußzeile, CTA, Blätterleisten
   10 Lightbox
   11 Inhaltsseiten aus dem Block-Editor
   12 Bewegung und Barrierefreiheit
   ============================================================ */


/* ============================================================
   1 · Reset und Tokens
   ============================================================ */

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
img, svg, video, iframe{ display:block; max-width:100%; }
img{ height:auto; }
button, input, select, textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
a{ color:inherit; }
ul, ol{ list-style:none; }

:root{
  /* Flächen */
  --bg:#0C0C0B; --bg2:#131311; --surf:#1A1917; --surf2:#222120;

  /* Text */
  --tx:#EEEAE3; --tx2:#A8A196; --muted:#7C766C;

  /* Akzent — Messing */
  --acc:#C08F4E; --acc-l:#E2C08C; --acc-glow:224,192,140;

  /* Linien */
  --line:rgba(238,234,227,.13); --line2:rgba(238,234,227,.06);

  /* Schrift */
  --fd:'Inter Tight',-apple-system,'Helvetica Neue',Helvetica,Arial,sans-serif;
  --fb:'Inter',-apple-system,'Helvetica Neue',Helvetica,Arial,sans-serif;

  /* Maß */
  --pad:clamp(20px,4.6vw,68px);
  --max:1520px;
  --sec:clamp(72px,10vw,150px);
  --sec-s:clamp(60px,8vw,120px);
  --kopf:clamp(70px,6.4vw,94px);
  --ease:cubic-bezier(.16,1,.3,1);
}

body{
  background:var(--bg); color:var(--tx);
  font-family:var(--fb); font-size:clamp(15px,1.05vw,16.5px);
  line-height:1.68; font-weight:300;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

.wrap{ max-width:var(--max); margin:0 auto; padding-inline:var(--pad); }


/* ============================================================
   2 · Typografie und Grundelemente
   ============================================================ */

h1,h2,h3,h4{ font-family:var(--fd); font-weight:300; letter-spacing:-.035em; line-height:1; text-wrap:balance; }

.d1{ font-size:clamp(40px,7.6vw,120px); font-weight:200; letter-spacing:-.04em; }
.d2{ font-size:clamp(30px,4.8vw,74px); font-weight:200; }
.d3{ font-size:clamp(21px,2.3vw,34px); }
.d4{ font-size:clamp(19px,1.9vw,25px); }

.lead{ font-size:clamp(16px,1.4vw,20px); line-height:1.6; color:var(--tx2); max-width:56ch; }
.eyebrow{ font-family:var(--fd); font-size:10.5px; font-weight:500; letter-spacing:.3em;
  text-transform:uppercase; color:var(--acc); }
.muted{ color:var(--muted); }
.num{ font-variant-numeric:tabular-nums; font-family:var(--fd); }

.btn{
  display:inline-flex; align-items:center; gap:13px; padding:16px 30px; border-radius:999px;
  font-family:var(--fd); font-size:13.5px; font-weight:500; letter-spacing:.04em;
  text-decoration:none; background:var(--tx); color:var(--bg);
  transition:transform .45s var(--ease), background .35s;
}
.btn:hover{ background:var(--acc-l); transform:translateY(-2px); }
.btn--o{ background:transparent; color:var(--tx); box-shadow:inset 0 0 0 1px var(--line); }
.btn--o:hover{ background:var(--tx); color:var(--bg); box-shadow:none; }

.link{
  font-family:var(--fd); font-size:12.5px; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; text-decoration:none; color:var(--acc-l);
  display:inline-flex; gap:10px; transition:gap .3s;
}
.link:hover{ gap:16px; }

.logo{ width:clamp(126px,11vw,158px); height:auto; color:var(--tx); }
.logo__inv{ fill:var(--bg); }

/* Nur für Screenreader */
.vh{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

.skip{
  position:absolute; left:12px; top:-60px; z-index:999;
  background:var(--tx); color:var(--bg); padding:10px 16px; font-size:14px;
  text-decoration:none; transition:top .2s;
}
.skip:focus{ top:12px; }


/* ============================================================
   3 · Kopf und Navigation
   ============================================================ */

.hdr{
  position:fixed; top:0; left:0; right:0; z-index:60; isolation:isolate;
  transition:background .4s, transform .4s var(--ease);
}
/* Verlauf, damit die Navigation auch über hellen Bildern lesbar bleibt */
.hdr::before{
  content:''; position:absolute; left:0; right:0; top:0; height:190px; z-index:-1;
  pointer-events:none; transition:opacity .4s;
  background:linear-gradient(rgba(12,12,11,.8) 20%, rgba(12,12,11,.45) 60%, transparent);
}
.hdr.is-stuck::before{ opacity:0; }
.hdr.is-stuck{ background:rgba(12,12,11,.82); backdrop-filter:blur(20px); border-bottom:1px solid var(--line2); }

/* Auf Unterseiten klebt der Kopf statt zu schweben */
.hdr--fest{ position:sticky; background:rgba(12,12,11,.88); backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line2); }
.hdr--fest::before{ display:none; }

.hdr .wrap{ display:flex; align-items:center; justify-content:space-between; gap:26px; height:var(--kopf); }

.nav{ display:flex; gap:clamp(15px,2.1vw,34px); }
.nav a{
  font-family:var(--fd); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tx2); text-decoration:none; transition:color .3s;
}
.nav a:hover, .nav .current-menu-item > a{ color:var(--tx); }

/* Umschalter fürs Menü — unter 1080 px */
.burger{
  display:none; width:44px; height:44px; margin-right:-10px;
  place-items:center; color:var(--tx);
}
.burger span{
  display:block; width:22px; height:1.5px; background:currentColor; border-radius:2px;
  transition:transform .4s var(--ease), opacity .25s;
}
.burger span + span{ margin-top:6px; }
[data-menu-offen] .burger span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
[data-menu-offen] .burger span:nth-child(2){ opacity:0; }
[data-menu-offen] .burger span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

.drawer{
  position:fixed; inset:0; z-index:55; background:var(--bg);
  padding:calc(var(--kopf) + 24px) var(--pad) 40px;
  display:flex; flex-direction:column; gap:6px;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .35s, transform .45s var(--ease), visibility .35s;
}
[data-menu-offen] .drawer{ opacity:1; visibility:visible; transform:none; }
.drawer a{
  font-family:var(--fd); font-size:clamp(24px,7vw,38px); font-weight:200; letter-spacing:-.03em;
  text-decoration:none; padding:12px 0; border-bottom:1px solid var(--line2);
}
.drawer a:hover{ color:var(--acc-l); }
.drawer .btn{ margin-top:auto; align-self:flex-start; font-size:14px; }
[data-menu-offen]{ overflow:hidden; }

@media(max-width:1080px){
  .nav{ display:none; }
  .burger{ display:grid; }
}
@media(min-width:1081px){
  .drawer{ display:none; }
}

/* Bereichsleiste unter dem Kopf */
.sub{
  position:sticky; top:var(--kopf); z-index:55;
  background:rgba(12,12,11,.94); backdrop-filter:blur(20px); border-bottom:1px solid var(--line2);
}
.sub__in{
  display:flex; align-items:center; gap:clamp(14px,2.4vw,30px); height:52px;
  overflow-x:auto; scrollbar-width:none;
}
.sub__in::-webkit-scrollbar{ display:none; }
.sub__back, .sub__lnk{
  display:inline-flex; align-items:center; gap:9px; flex:none; text-decoration:none;
  color:var(--tx2); white-space:nowrap;
  font-family:var(--fd); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  transition:color .3s, gap .3s;
}
.sub__back:has(+ .sub__tabs){ padding-right:clamp(14px,2vw,26px); border-right:1px solid var(--line); }
.sub__back:hover, .sub__lnk:hover{ color:var(--tx); gap:13px; }
.sub__back svg, .sub__lnk svg{ transition:transform .35s var(--ease); }
.sub__back:hover svg{ transform:translateX(-3px); }
.sub__lnk:hover svg{ transform:translateX(3px); }
.sub__lnk--ab:hover svg{ transform:translateY(3px); }
.sub__lnk--rechts{ margin-left:auto; }
.sub__lnk--akz{ color:var(--acc-l); }
.sub__tabs{ display:flex; gap:clamp(12px,1.8vw,26px); }
.sub__tabs a{
  flex:none; text-decoration:none; color:var(--muted); white-space:nowrap; position:relative; padding:6px 0;
  font-family:var(--fd); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase;
  transition:color .3s;
}
.sub__tabs a:hover{ color:var(--tx); }
.sub__tabs a[aria-current]{ color:var(--acc-l); }
.sub__tabs a[aria-current]::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1.5px; background:var(--acc);
}
@media(max-width:700px){ .sub__back span{ display:none; } }

/* Brotkrumen */
.crumb{ padding-top:clamp(20px,2.6vw,34px); font-size:12px; color:var(--muted); letter-spacing:.06em; }
.crumb a{ text-decoration:none; }
.crumb a:hover{ color:var(--tx); }


/* ============================================================
   4 · Startseite
   ============================================================ */

/* ---- Hero: Vollbild mit Schleier ---- */
.hero{ position:relative; overflow:hidden; min-height:100svh; display:flex; align-items:flex-end; }
.hero__img{ position:absolute; inset:0; overflow:hidden; background:var(--surf); }
.hero__img img{ width:100%; height:100%; object-fit:cover; transform:scale(1.07); animation:nr-ken 24s ease-out forwards; }
@keyframes nr-ken{ to{ transform:scale(1); } }

.hero__veil{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(12,12,11,.72) 0%, rgba(12,12,11,.3) 32%, rgba(12,12,11,.95) 92%),
    linear-gradient(90deg, rgba(12,12,11,.64) 0%, rgba(12,12,11,.16) 56%, transparent 82%);
}
/* Lichtkegel am Cursor */
.hero__spot{
  position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0;
  transition:opacity .8s; mix-blend-mode:screen;
  background:radial-gradient(440px circle at var(--mx,50%) var(--my,50%), rgba(var(--acc-glow),.17), transparent 62%);
}
.hero:hover .hero__spot{ opacity:1; }
@media(hover:none){ .hero__spot{ display:none; } }

.hero__c{
  position:relative; z-index:3; width:100%; max-width:var(--max); margin:0 auto;
  padding:0 var(--pad) clamp(46px,6vw,100px);
}
.hero h1{ max-width:14ch; margin:22px 0 24px; }
/* Zeilen fahren von unten ein */
.hero h1 .l{ display:block; overflow:hidden; }
.hero h1 .l i{ display:block; font-style:normal; transform:translateY(104%); transition:transform 1.05s var(--ease); }
.hero.is-lit h1 .l i{ transform:none; }
.hero h1 .l:nth-child(2) i{ transition-delay:.09s; }
.hero h1 .l:nth-child(3) i{ transition-delay:.18s; }

.hero__act{ display:flex; gap:12px; flex-wrap:wrap; margin-top:clamp(22px,2.6vw,34px); }
.hero__meta{ display:flex; gap:clamp(24px,3.4vw,52px); margin-top:clamp(26px,3vw,44px); }
.hero__meta b{ display:block; font-family:var(--fd); font-size:clamp(26px,2.8vw,42px);
  font-weight:200; letter-spacing:-.03em; line-height:1; }
.hero__meta span{ font-size:12px; color:var(--muted); letter-spacing:.06em; }

/* ---- Statement ---- */
.stmt{ padding-block:var(--sec); }
.stmt .wrap{ max-width:1160px; }
.stmt h2{ font-size:clamp(25px,3.9vw,56px); font-weight:200; line-height:1.18; letter-spacing:-.03em; }
.reveal-words span{ opacity:.17; transition:opacity .5s; }
.reveal-words span.lit{ opacity:1; }
.stmt__f{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,3vw,48px); margin-top:clamp(44px,6vw,88px); }
.stmt__f div{ border-top:1px solid var(--line); padding-top:20px; }
.stmt__f h3{ font-size:15px; font-weight:500; letter-spacing:0; margin-bottom:8px; }
.stmt__f p{ font-size:14px; color:var(--muted); line-height:1.6; }
@media(max-width:760px){ .stmt__f{ grid-template-columns:minmax(0,1fr); } }

/* ---- Bereiche als Raster ---- */
.svc{ padding-bottom:var(--sec); }
.svc__head{ display:flex; justify-content:space-between; align-items:end; gap:24px; flex-wrap:wrap;
  margin-bottom:clamp(26px,3.6vw,50px); }
.svc__list{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:clamp(10px,1.3vw,20px); }
.svc__i{
  position:relative; overflow:hidden; text-decoration:none; color:inherit; background:var(--surf);
  aspect-ratio:1/1; grid-column:span 2;
}
.svc__i:nth-child(1){ grid-column:span 4; aspect-ratio:16/10; }
.svc__i:nth-child(2){ grid-column:span 2; aspect-ratio:4/5; }
.svc__i img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:brightness(.8); transition:transform 1.1s var(--ease), filter .55s; }
.svc__i:hover img{ transform:scale(1.05); filter:brightness(1); }
.svc__i::after{ content:''; position:absolute; inset:0; background:linear-gradient(transparent 42%, rgba(12,12,11,.93)); }
.svc__b{ position:relative; z-index:2; height:100%; display:flex; flex-direction:column;
  justify-content:flex-end; padding:clamp(18px,2vw,28px); }
.svc__n{ font-family:var(--fd); font-size:11px; font-weight:500; letter-spacing:.22em; color:var(--acc-l); margin-bottom:7px; }
.svc__i h3{ font-size:clamp(19px,1.7vw,26px); font-weight:400; }
.svc__i p{ font-size:13.5px; color:var(--tx2); margin-top:8px; max-width:34ch; }
.svc__c{ display:block; margin-top:10px; font-family:var(--fd); font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--acc-l); }
@media(max-width:860px){
  .svc__list{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .svc__i, .svc__i:nth-child(1), .svc__i:nth-child(2){ grid-column:span 2; aspect-ratio:16/11; }
}

/* ---- Zahlen ---- */
.figs{ border-block:1px solid var(--line); }
.figs .wrap{ display:grid; grid-template-columns:repeat(var(--fig-n,4), minmax(0,1fr)); }
.fig{ padding:clamp(32px,4.4vw,66px) clamp(12px,2vw,32px); border-left:1px solid var(--line); }
.fig:first-child{ border-left:0; padding-left:0; }
.fig b{ display:block; font-family:var(--fd); font-size:clamp(30px,4.2vw,64px); font-weight:200;
  letter-spacing:-.04em; line-height:1; white-space:nowrap; font-variant-numeric:tabular-nums; }
.fig span{ display:block; margin-top:11px; font-size:12px; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); }
@media(max-width:860px){
  .figs .wrap{ grid-template-columns:repeat(min(var(--fig-n,4), 2), minmax(0,1fr)); }
  .fig:nth-child(odd){ border-left:0; padding-left:0; }
}

/* ---- Marken ---- */
.brands{ padding-block:var(--sec); }
.bgrp{ display:grid; grid-template-columns:150px minmax(0,1fr); gap:clamp(16px,3vw,44px);
  padding:22px 0; border-top:1px solid var(--line); }
.bgrp dt{ font-family:var(--fd); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); padding-top:6px; }
.bgrp dd ul{ display:flex; flex-wrap:wrap; gap:6px 0; }
.bgrp li{ font-family:var(--fd); font-size:clamp(15px,1.5vw,22px); font-weight:300;
  letter-spacing:-.02em; color:var(--tx2); }
.bgrp li::after{ content:'·'; margin:0 .55em; color:var(--line); }
.bgrp li:last-child::after{ content:''; }
.bgrp li.own{ color:var(--acc-l); }
@media(max-width:700px){ .bgrp{ grid-template-columns:minmax(0,1fr); gap:8px; } }

/* ---- Stellen (Liste, auf Start- und Archivseite) ---- */
.jobs{ padding-bottom:var(--sec); }
.job{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) auto; gap:clamp(14px,2.6vw,40px);
  align-items:center; padding:clamp(20px,2.6vw,34px) 0; border-top:1px solid var(--line);
  text-decoration:none; color:inherit; transition:padding-inline .5s var(--ease), background .4s;
}
.job:last-child{ border-bottom:1px solid var(--line); }
.job:hover{ padding-inline:clamp(8px,1.4vw,20px); background:var(--bg2); }
.job h3{ font-size:clamp(19px,2vw,28px); font-weight:400; }
.job p{ font-size:14px; color:var(--muted); }
.job__t{ display:flex; gap:7px; flex-wrap:wrap; margin-top:9px; }
.job__t span{ font-family:var(--fd); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  padding:4px 9px; border-radius:999px; background:var(--surf); color:var(--tx2); }
@media(max-width:860px){ .job{ grid-template-columns:minmax(0,1fr); gap:12px; } }

/* ---- Ablauf ---- */
.proc{ padding-block:var(--sec); }
.proc__head{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(24px,4vw,64px);
  align-items:end; margin-bottom:clamp(40px,5.5vw,84px); }
.pstep{
  display:grid; grid-template-columns:clamp(70px,9vw,132px) minmax(0,1fr) minmax(0,1fr);
  gap:clamp(18px,3vw,52px); padding-block:clamp(26px,3.2vw,44px);
  border-top:1px solid var(--line); align-items:start;
}
.pstep:last-child{ border-bottom:1px solid var(--line); }
.pstep__n{ font-family:var(--fd); font-size:clamp(30px,3.6vw,58px); font-weight:200;
  color:var(--acc); letter-spacing:-.04em; line-height:.9; }
.pstep h3{ font-size:clamp(20px,2vw,29px); font-weight:300; }
.pstep p{ color:var(--muted); font-size:14.5px; }
@media(max-width:800px){
  .proc__head{ grid-template-columns:minmax(0,1fr); }
  .pstep{ grid-template-columns:56px minmax(0,1fr); }
  .pstep p{ grid-column:2; }
}

/* ---- Stimmen ---- */
.say{ padding-block:var(--sec); background:var(--bg2); }
.say__g{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px;
  background:var(--line); border-block:1px solid var(--line); }
.say__g figure{ background:var(--bg2); padding:clamp(26px,3vw,46px); display:flex; flex-direction:column; gap:18px; }
.say__g blockquote{ font-family:var(--fd); font-size:clamp(17px,1.5vw,22px); font-weight:300;
  line-height:1.42; letter-spacing:-.02em; }
.say__g figcaption{ margin-top:auto; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.stars{ color:var(--acc); letter-spacing:.2em; font-size:13px; }
@media(max-width:860px){ .say__g{ grid-template-columns:minmax(0,1fr); } }

/* ---- Kontaktblock ---- */
.ct{ padding-block:var(--sec); }
.ct .wrap{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(32px,5.5vw,92px); align-items:start; }
.ct dl div{ padding:15px 0; border-top:1px solid var(--line); }
.ct dt{ font-family:var(--fd); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); margin-bottom:6px; }
.ct dd a{ text-decoration:none; border-bottom:1px solid var(--line); }
@media(max-width:900px){ .ct .wrap{ grid-template-columns:minmax(0,1fr); } }


/* ============================================================
   5 · Bereichsseite
   ============================================================ */

.top{ padding-block:clamp(26px,3.4vw,52px) clamp(30px,4vw,60px); }

.expl{ padding-bottom:var(--sec); }
.expl__g{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,3vw,48px); }
.expl__g div{ border-top:1px solid var(--line); padding-top:20px; }
.expl__g h3{ font-size:15.5px; font-weight:500; letter-spacing:0; margin-bottom:9px; }
.expl__g p{ font-size:14px; color:var(--muted); line-height:1.6; }
@media(max-width:760px){ .expl__g{ grid-template-columns:minmax(0,1fr); } }

.proj{ padding-bottom:var(--sec); }
.proj__head{ display:flex; justify-content:space-between; align-items:end; gap:24px; flex-wrap:wrap;
  margin-bottom:clamp(24px,3.4vw,44px); }

.pg{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%,320px),1fr)); gap:clamp(12px,1.6vw,24px); }
.pc{ display:flex; flex-direction:column; text-align:left; text-decoration:none; color:inherit; }
.pc__i{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--surf); }
.pc__i img{ width:100%; height:100%; object-fit:cover; filter:brightness(.86);
  transition:transform 1.05s var(--ease), filter .5s; }
.pc:hover .pc__i img{ transform:scale(1.05); filter:brightness(1); }
.pc__n{
  position:absolute; right:12px; bottom:12px; z-index:2;
  font-family:var(--fd); font-size:10.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  padding:6px 11px; border-radius:999px; color:var(--acc-l);
  background:rgba(12,12,11,.72); backdrop-filter:blur(8px); border:1px solid rgba(var(--acc-glow),.24);
}
.pc__b{ padding-top:14px; }
.pc__b h3{ font-size:clamp(17px,1.5vw,22px); font-weight:400; }
.pc__m{ display:block; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin-bottom:7px; }
.pc__s{ font-size:13px; color:var(--muted); margin-top:6px; }

.loadmore{ text-align:center; margin-top:clamp(28px,3.6vw,48px); }

/* Weitere Bereiche */
.areas{ background:var(--bg2); padding-block:var(--sec); }
.areas__g{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,220px),1fr));
  gap:clamp(10px,1.4vw,18px); margin-top:clamp(22px,3vw,36px); }
.areas__i{ position:relative; aspect-ratio:3/2; overflow:hidden; text-decoration:none; background:var(--surf); }
.areas__i img{ width:100%; height:100%; object-fit:cover; filter:brightness(.7);
  transition:transform 1s var(--ease), filter .5s; }
.areas__i:hover img{ transform:scale(1.06); filter:brightness(1); }
.areas__i::after{ content:''; position:absolute; inset:0; background:linear-gradient(transparent 42%, rgba(12,12,11,.9)); }
.areas__i b{ position:absolute; left:16px; bottom:36px; z-index:2; font-family:var(--fd);
  font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--acc-l); }
.areas__i span{ position:absolute; left:16px; bottom:14px; z-index:2; font-family:var(--fd);
  font-weight:400; font-size:16px; }


/* ============================================================
   6 · Projektseite
   ============================================================ */

.meta{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.meta span{
  font-family:var(--fd); font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  padding:6px 12px; border-radius:999px; background:var(--surf); color:var(--tx2);
}
.meta span:first-child{ background:rgba(var(--acc-glow),.15); color:var(--acc-l); }

.pjhero{ position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--surf); cursor:zoom-in; }
.pjhero img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.pjhero:hover img{ transform:scale(1.03); }
.pjhero__z{
  position:absolute; right:18px; bottom:18px; z-index:2;
  font-family:var(--fd); font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  padding:9px 15px; border-radius:999px; color:var(--acc-l);
  background:rgba(12,12,11,.72); backdrop-filter:blur(8px); border:1px solid rgba(var(--acc-glow),.26);
}
@media(max-width:700px){ .pjhero{ aspect-ratio:4/3; } }

.pbody{ padding-block:var(--sec-s); }
.pbody__g{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(30px,5vw,90px); align-items:start; }
.pbody__t p + p{ margin-top:1.2em; }
@media(max-width:860px){ .pbody__g{ grid-template-columns:minmax(0,1fr); } }

.specs{ border-top:1px solid var(--tx); }
.specs div{ display:flex; justify-content:space-between; gap:22px; padding:14px 0;
  border-bottom:1px solid var(--line); font-size:14.5px; }
.specs dt{ color:var(--muted); flex:none; }
.specs dd{ text-align:right; }

/* Galerie */
.gal{ padding-bottom:var(--sec-s); }
.gal__head{ display:flex; justify-content:space-between; align-items:end; gap:20px; flex-wrap:wrap;
  margin-bottom:clamp(20px,2.6vw,34px); }
.gal__g{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(10px,1.3vw,18px); }
.gal__g figure{ position:relative; overflow:hidden; background:var(--surf); cursor:zoom-in; }
.gal__g img{ width:100%; height:100%; object-fit:cover; filter:brightness(.88);
  transition:transform 1.05s var(--ease), filter .5s; }
.gal__g figure:hover img{ transform:scale(1.04); filter:brightness(1); }
.g-w{ grid-column:span 8; aspect-ratio:16/10; }
.g-n{ grid-column:span 4; aspect-ratio:3/4; }
.g-h{ grid-column:span 4; aspect-ratio:1/1; }
.g-b{ grid-column:span 12; aspect-ratio:21/9; }
@media(max-width:760px){ .gal__g > *{ grid-column:span 12 !important; aspect-ratio:4/3 !important; } }

/* Kundenstimme */
.quote{ padding-block:var(--sec-s); background:var(--bg2); border-block:1px solid var(--line); }
.quote blockquote{ font-family:var(--fd); font-size:clamp(21px,3vw,42px); font-weight:200;
  line-height:1.24; letter-spacing:-.03em; max-width:24ch; }
.quote figcaption{ margin-top:clamp(20px,2.6vw,34px); font-size:12.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); }


/* ============================================================
   7 · Stellenseite
   ============================================================ */

.jbody{ padding-bottom:var(--sec-s); }
.jbody__g{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(30px,5vw,80px); align-items:start; }
@media(max-width:920px){ .jbody__g{ grid-template-columns:minmax(0,1fr); } }

.jblk{ margin-top:clamp(34px,4.4vw,62px); }
.jblk:first-child{ margin-top:0; }
.jblk h2{ font-size:clamp(19px,1.9vw,25px); margin-bottom:20px; }

.jlist li{
  position:relative; padding:13px 0 13px 21px; border-bottom:1px solid var(--line2);
  color:var(--tx2); font-size:15.5px;
}
.jlist li::before{
  content:''; position:absolute; left:0; top:calc(13px + .72em);
  width:5px; height:5px; border-radius:50%; background:var(--acc);
}
.jlist li b{ color:var(--tx); font-weight:400; }

.jcard{
  position:sticky; top:calc(var(--kopf) + 72px); background:var(--surf);
  padding:clamp(24px,2.6vw,34px); border-top:2px solid var(--acc);
}
.jcard dl{ margin:22px 0 26px; }
.jcard dl div{ display:flex; justify-content:space-between; gap:18px; padding:11px 0;
  border-bottom:1px solid var(--line); font-size:14.5px; }
.jcard dt{ color:var(--muted); flex:none; }
.jcard dd{ text-align:right; }
.jcard .btn{ width:100%; justify-content:center; }
@media(max-width:920px){ .jcard{ position:static; } }

.pers{ display:flex; gap:14px; align-items:center; margin-top:26px; padding-top:22px; border-top:1px solid var(--line); }
.pers__a{ flex:none; width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  background:rgba(var(--acc-glow),.14); color:var(--acc-l); font-family:var(--fd); font-size:15px; }
.pers b{ display:block; font-family:var(--fd); font-weight:400; font-size:15px; }
.pers a{ color:var(--tx2); font-size:13.5px; text-decoration:none; }
.pers a:hover{ color:var(--acc-l); }

/* Bildband */
.band{ border-block:1px solid var(--line); padding-block:clamp(28px,3.4vw,52px); background:var(--bg2); }
.band__g{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(10px,1.3vw,18px); }
.band__g figure{ aspect-ratio:4/3; overflow:hidden; background:var(--surf); }
.band__g img{ width:100%; height:100%; object-fit:cover; filter:brightness(.82);
  transition:transform 1.1s var(--ease), filter .5s; }
.band__g figure:hover img{ transform:scale(1.05); filter:brightness(1); }
@media(max-width:700px){
  .band__g{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .band__g figure:last-child{ display:none; }
}

/* Bewerbungsbereich */
.ap{ padding-block:var(--sec-s); }
.ap__g{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(30px,5vw,80px); align-items:start; }
@media(max-width:920px){ .ap__g{ grid-template-columns:minmax(0,1fr); } }

.quick{ margin-top:26px; padding:22px 24px; border:1px dashed var(--line); border-radius:2px; }
.quick h3{ font-size:16px; margin-bottom:8px; }
.quick p{ font-size:14px; color:var(--muted); }
.quick__r{ display:flex; gap:12px; flex-wrap:wrap; margin-top:16px; }
.quick__r a{
  display:inline-flex; align-items:center; gap:9px; padding:11px 18px; border-radius:999px;
  text-decoration:none; background:var(--surf); color:var(--tx);
  font-family:var(--fd); font-size:13px; letter-spacing:.03em; transition:background .3s, color .3s;
}
.quick__r a:hover{ background:rgba(var(--acc-glow),.16); color:var(--acc-l); }

.jobs-more{ border-top:1px solid var(--line); padding-block:var(--sec-s); }


/* ============================================================
   8 · Formulare
   ============================================================ */

.nrform{ background:var(--surf); padding:clamp(24px,3vw,46px); position:relative; }
.f{ margin-bottom:15px; }
.f-row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }
.f label{ display:block; font-family:var(--fd); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.f input, .f select, .f textarea{
  width:100%; padding:14px 16px; background:var(--bg); border:1px solid var(--line);
  color:var(--tx); border-radius:2px; font-size:15px;
  transition:border-color .25s, box-shadow .25s;
}
.f input:focus, .f select:focus, .f textarea:focus{
  outline:none; border-color:var(--acc); box-shadow:0 0 0 3px rgba(var(--acc-glow),.2);
}
.f input[aria-invalid="true"], .f textarea[aria-invalid="true"]{ border-color:#C4685C; }
.f textarea{ min-height:120px; resize:vertical; }
.f--check{ display:flex; gap:11px; align-items:flex-start; font-size:13px; color:var(--muted); line-height:1.5; }
.f--check input{ width:auto; flex:none; margin-top:3px; }
.f--check label{ text-transform:none; letter-spacing:0; font-size:13px; font-family:var(--fb);
  color:var(--muted); margin:0; }
.f--check a{ color:var(--tx); }
.f--file input{ padding:12px 14px; font-size:13.5px; color:var(--tx2); cursor:pointer; }
.f--file input::file-selector-button{
  margin-right:14px; padding:8px 15px; border:0; border-radius:999px; cursor:pointer;
  background:rgba(var(--acc-glow),.16); color:var(--acc-l);
  font-family:var(--fd); font-size:12px; letter-spacing:.08em;
}
/* Honigtopf gegen Bots — für Menschen unsichtbar, aber nicht display:none */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.f-hinweis{ margin-bottom:18px; padding:12px 15px; border-radius:2px; font-size:13.5px;
  background:rgba(196,104,92,.14); color:#F0BDB5; }
.f-success{ text-align:center; padding:clamp(28px,4vw,56px) 0; }
.f-success svg{ margin:0 auto 16px; color:var(--acc); }

.nrform button[type="submit"]{ width:100%; justify-content:center; margin-top:10px; }
.nrform.is-busy button[type="submit"]{ opacity:.55; pointer-events:none; }

@media(max-width:520px){ .f-row{ grid-template-columns:minmax(0,1fr); } }


/* ============================================================
   9 · Fußzeile, CTA, Blätterleisten
   ============================================================ */

.cta .wrap{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:28px; align-items:center;
  padding-block:clamp(40px,5vw,76px); border-top:1px solid var(--line);
}
.cta p{ color:var(--muted); max-width:52ch; margin-top:10px; }
@media(max-width:760px){ .cta .wrap{ grid-template-columns:minmax(0,1fr); } }

/* Voriges / nächstes — für Projekte wie für Bereiche */
.pn{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px;
  background:var(--line); border-top:1px solid var(--line); }
.pn a{
  background:var(--bg); padding:clamp(26px,3.4vw,48px) clamp(20px,3vw,44px);
  text-decoration:none; display:flex; flex-direction:column; gap:8px; transition:background .35s;
}
.pn a:hover{ background:var(--bg2); }
.pn span{ font-family:var(--fd); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.pn b{ font-family:var(--fd); font-size:clamp(19px,2.2vw,30px); font-weight:200; letter-spacing:-.03em; }
.pn a:last-child{ text-align:right; align-items:flex-end; }
.pn a:only-child{ grid-column:1 / -1; }
@media(max-width:640px){
  .pn{ grid-template-columns:minmax(0,1fr); }
  .pn a:last-child{ text-align:left; align-items:flex-start; }
}

.ft{ border-top:1px solid var(--line); padding-block:26px; }
.ft .wrap{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:12.5px; color:var(--muted); }
.ft a{ text-decoration:none; }
.ft a:hover{ color:var(--tx); }
.ft ul{ display:flex; gap:20px; flex-wrap:wrap; }


/* ============================================================
   10 · Lightbox
   ============================================================ */

.lb{
  position:fixed; inset:0; z-index:500; background:rgba(12,11,10,.94);
  display:grid; place-items:center; padding:clamp(16px,4vw,56px);
}
.lb[hidden]{ display:none; }
.lb img{ max-width:100%; max-height:82vh; object-fit:contain; }
.lb__cap{ color:#D8D2C9; font-size:13px; letter-spacing:.04em; margin-top:14px; text-align:center; }
.lb__btn{
  position:absolute; width:52px; height:52px; display:grid; place-items:center; color:#fff;
  border:1px solid rgba(255,255,255,.25); border-radius:50%; font-size:20px;
}
.lb__btn:hover{ background:rgba(255,255,255,.12); }
.lb__btn--close{ top:20px; right:20px; }
.lb__btn--prev{ left:20px; top:50%; margin-top:-26px; }
.lb__btn--next{ right:20px; top:50%; margin-top:-26px; }
.lb__meta{ position:absolute; top:24px; left:50%; transform:translateX(-50%); text-align:center; color:#fff; }
.lb__meta b{ display:block; font-family:var(--fd); font-size:14px; font-weight:400; }
.lb__meta span{ font-family:var(--fd); font-size:11.5px; letter-spacing:.16em; opacity:.6; }
@media(max-width:640px){ .lb__btn--prev{ left:8px; } .lb__btn--next{ right:8px; } }


/* ============================================================
   11 · Inhaltsseiten aus dem Block-Editor
   Alles, was Martin oder du im Editor anlegt, landet hier drin.
   Die Regeln sind bewusst schlicht — der Editor soll nicht gegen
   das Theme kämpfen müssen.
   ============================================================ */

.seite{ padding-block:clamp(40px,6vw,90px) var(--sec-s); }
.seite__kopf{ margin-bottom:clamp(30px,4vw,60px); }

.entry{ max-width:76ch; margin-inline:auto; }
.entry > * + *{ margin-top:1.3em; }
.entry h2{ font-size:clamp(24px,3vw,40px); font-weight:200; margin-top:1.8em; }
.entry h3{ font-size:clamp(19px,2vw,26px); margin-top:1.6em; }
.entry h4{ font-size:17px; font-weight:500; letter-spacing:0; margin-top:1.5em; }
.entry p, .entry li{ color:var(--tx2); }
.entry a{ color:var(--acc-l); text-decoration:underline; text-underline-offset:3px; }
.entry ul, .entry ol{ padding-left:1.3em; }
.entry ul li{ list-style:disc; }
.entry ol li{ list-style:decimal; }
.entry li + li{ margin-top:.5em; }
.entry blockquote{ border-left:2px solid var(--acc); padding-left:1.2em; color:var(--tx); font-style:normal; }
.entry hr{ border:0; border-top:1px solid var(--line); margin-block:2.4em; }
.entry table{ width:100%; border-collapse:collapse; font-size:14.5px; }
.entry th, .entry td{ text-align:left; padding:11px 14px; border-bottom:1px solid var(--line); }
.entry th{ font-family:var(--fd); font-weight:500; color:var(--muted); }
.entry code{ background:var(--surf); padding:2px 6px; border-radius:2px; font-size:.92em; }
.entry figcaption{ font-size:12.5px; color:var(--muted); margin-top:8px; }

.entry .alignwide{ max-width:min(1180px, 92vw); margin-inline:auto; }
.entry .alignfull{ max-width:none; width:100vw; margin-inline:calc(50% - 50vw); }
.entry .aligncenter{ margin-inline:auto; }

.e404{ min-height:64svh; display:grid; place-items:center; text-align:center; padding-block:var(--sec-s); }
.e404 p{ color:var(--muted); margin:16px 0 26px; }


/* ============================================================
   12 · Bewegung und Barrierefreiheit
   ============================================================ */

[data-reveal]{
  opacity:0; transform:translate3d(0, var(--rv-y, 28px), 0);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  will-change:opacity, transform;
}
[data-reveal].is-in{ opacity:1; transform:none; will-change:auto; }
[data-reveal="mask"]{ opacity:1; transform:none; clip-path:inset(0 0 100% 0);
  transition:clip-path 1.1s var(--ease); }
[data-reveal="mask"].is-in{ clip-path:inset(0 0 0 0); }
[data-reveal="scale"]{ opacity:0; transform:scale(1.06); }
[data-reveal="scale"].is-in{ opacity:1; transform:none; }

[data-parallax]{ transform:translate3d(0, var(--py, 0px), 0); }

/* Sichtbarer Fokus — Pflicht für Tastaturbedienung (WCAG 2.4.7) */
:where(a, button, input, select, textarea, [tabindex]):focus-visible{
  outline:2px solid var(--acc-l); outline-offset:3px; border-radius:2px;
}

/* Wer im System „Bewegung reduzieren" gesetzt hat, bekommt Ruhe. */
@media(prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  [data-reveal]{ opacity:1 !important; transform:none !important; clip-path:none !important; }
  [data-parallax]{ transform:none !important; }
  .hero h1 .l i{ transform:none !important; }
  .reveal-words span{ opacity:1 !important; }
  .hero__img img{ animation:none !important; transform:none !important; }
}

/* Admin-Leiste nicht über den Kopf legen */
.admin-bar .hdr{ top:32px; }
.admin-bar .sub{ top:calc(var(--kopf) + 32px); }
@media(max-width:782px){
  .admin-bar .hdr{ top:46px; }
  .admin-bar .sub{ top:calc(var(--kopf) + 46px); }
}

@media print{
  .hdr, .sub, .lb, .drawer, .burger, .cta, .nrform{ display:none !important; }
  body{ background:#fff; color:#000; }
}