/* Layout: Werkhalle als Bühne – volle Bildbreite oben, darunter ein ruhiges Raster wie ein Bauplan, Rot nur für Marke und Handlung */
@font-face{font-family:"Barlow";src:url(fonts/barlow-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url(fonts/barlow-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(fonts/barlow-condensed-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(fonts/barlow-condensed-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
:root{
  --beton:#E6E7E6;      /* Hintergrund: heller Sichtbeton */
  --beton-2:#D5D7D7;    /* Flächen, Linien */
  --tinte:#17191B;      /* Text, dunkle Bänder */
  --grau:#5B6064;       /* Nebentext */
  --rot:#8C002B;        /* Weinrot der Logo-Wand */
  --rot-hell:#B3123A;   /* Logo-Rot auf dunklem Grund */
  --weiss:#FAFAF9;
  --display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --text:"Barlow","Helvetica Neue",Arial,sans-serif;
  --max:1180px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--beton);color:var(--tinte);font:400 1.0625rem/1.6 var(--text)}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:3px solid var(--rot);outline-offset:3px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.02;text-transform:uppercase;letter-spacing:.01em;text-wrap:balance;margin:0}
h2{font-size:clamp(2.2rem,5vw,3.6rem)}
h3{font-size:1.6rem;font-weight:600}
p{margin:0;max-width:62ch}
.label{font:600 .8rem/1 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--grau);display:flex;align-items:center;gap:.6rem}
.label::before{content:"";width:22px;height:3px;background:var(--rot)}
.ph{background:#FFE58A;color:#3a3000;padding:0 .3em;border-radius:2px;font-style:normal;white-space:nowrap}

/* Kopf */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:var(--weiss);color:var(--tinte);border-bottom:1px solid var(--beton-2)}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.7rem}
.marke img{height:46px;width:auto}
.marke{display:flex;align-items:baseline;gap:.45rem;text-decoration:none;font-family:var(--display);text-transform:uppercase;line-height:1}
.marke b{background:var(--rot);color:var(--weiss);font-weight:700;font-size:1.55rem;padding:.12em .28em .06em}
.marke span{font-weight:600;font-size:1.4rem;letter-spacing:.06em}
nav{display:flex;gap:clamp(.9rem,2.4vw,2rem);flex-wrap:wrap}
nav a{text-decoration:none;font:600 .9rem/1 var(--text);letter-spacing:.08em;text-transform:uppercase;opacity:.85}
nav a:hover{opacity:1;text-decoration:underline;text-decoration-color:var(--rot);text-underline-offset:6px;text-decoration-thickness:2px}

/* Hero */
.hero{position:relative;background:var(--tinte);color:var(--weiss);overflow:hidden}
.hero img{width:100%;height:clamp(420px,72vh,720px);object-fit:cover;object-position:center 40%;opacity:.8}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(23,25,27,.86) 0%,rgba(23,25,27,.45) 55%,rgba(23,25,27,.05) 100%)}
.hero .inhalt{position:absolute;inset:0;z-index:1;display:flex;align-items:flex-end}
.hero .wrap{width:100%;padding-block:clamp(2rem,6vw,4.5rem);display:grid;gap:1.4rem}
.hero h1{font-size:clamp(2.6rem,7.6vw,5.8rem);max-width:14ch}
.hero h1 em{font-style:normal;color:var(--rot-hell)}
.hero p{font-size:clamp(1.05rem,1.8vw,1.3rem);max-width:44ch;opacity:.92}
.knoepfe{display:flex;gap:.8rem;flex-wrap:wrap}
.btn{display:inline-block;text-decoration:none;font:600 .95rem/1 var(--text);letter-spacing:.08em;text-transform:uppercase;padding:1rem 1.4rem;border:2px solid var(--rot);background:var(--rot);color:var(--weiss)}
.btn:hover{background:#6E0022;border-color:#6E0022}
.kontakt a{color:var(--tinte)}
.btn.hell{background:transparent;border-color:rgba(250,250,249,.7)}
.btn.hell:hover{background:var(--weiss);color:var(--tinte)}

section{padding-block:clamp(4rem,9vw,7rem)}
.kopf{display:grid;gap:1rem;margin-bottom:clamp(2rem,5vw,3.5rem)}

/* Leistungen */
.leistungen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2.4vw,2rem)}
.leistung{display:grid;gap:1rem;align-content:start}
.leistung img{aspect-ratio:4/3;object-fit:cover;width:100%;filter:grayscale(.15)}
.leistung p{color:var(--grau)}

/* Ablauf */
.ablauf-band{background:var(--tinte);color:var(--weiss)}
.ablauf-band .label{color:#A9AEB2}
.ablauf{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.schritte{list-style:none;margin:0;padding:0;counter-reset:s;border-top:1px solid #33373A}
.schritte li{counter-increment:s;display:grid;grid-template-columns:3.2rem minmax(0,1fr);gap:.2rem 1rem;padding-block:1.15rem;border-bottom:1px solid #33373A}
.schritte li::before{content:counter(s,decimal-leading-zero);grid-row:span 2;font:700 1.9rem/1 var(--display);color:var(--rot-hell)}
.schritte b{font:600 1.35rem/1.1 var(--display);text-transform:uppercase;letter-spacing:.03em}
.schritte span{color:#B9BEC1;font-size:.98rem}
.bilder{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bilder img{width:100%;aspect-ratio:4/5;object-fit:cover}
.bilder img:last-child{margin-top:3rem}

/* Breitbild */
.breit{padding:0}
.breit figure{margin:0;position:relative}
.breit img{width:100%;height:clamp(240px,42vw,520px);object-fit:cover}
.breit figcaption{position:absolute;left:clamp(16px,4vw,40px);bottom:1rem;background:var(--tinte);color:var(--weiss);font:600 .8rem/1 var(--text);letter-spacing:.12em;text-transform:uppercase;padding:.6rem .8rem}

/* Karriere */
.karriere{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.karriere img{width:100%;aspect-ratio:4/5;object-fit:cover}
.karriere .text{display:grid;gap:1.4rem}
.liste{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:2px solid var(--tinte)}
.liste li{padding:.85rem 0;border-bottom:1px solid var(--beton-2);font:600 1.3rem/1.2 var(--display);text-transform:uppercase;letter-spacing:.03em;display:flex;justify-content:space-between;gap:1rem}
.liste li small{font:400 .9rem/1.4 var(--text);text-transform:none;letter-spacing:0;color:var(--grau);align-self:center;text-align:right}

/* Kontakt */
.kontakt-band{background:var(--weiss);border-top:1px solid var(--beton-2)}
.kontakt{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,3vw,2.5rem)}
.kontakt div{display:grid;gap:.5rem;align-content:start;border-top:3px solid var(--tinte);padding-top:1rem}
.kontakt dt{font:600 .8rem/1 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--grau)}
.kontakt dd{margin:0;font-size:1.15rem}

footer{background:var(--tinte);color:#A9AEB2;font-size:.9rem}
footer .wrap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-block:1.6rem}
footer nav a{font-size:.8rem}

@media (max-width:860px){
  .leistungen,.kontakt{grid-template-columns:minmax(0,1fr)}
  .ablauf,.karriere{grid-template-columns:minmax(0,1fr)}
  .bilder img:last-child{margin-top:0}
  header nav{display:none}
}

.intro{color:var(--grau);font-size:1.1rem}
.grundsaetze-band{background:var(--weiss);padding-block:clamp(2.5rem,5vw,3.5rem);border-bottom:1px solid var(--beton-2)}
.grundsaetze{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,3vw,2.5rem)}
.grundsaetze div{display:grid;gap:.4rem;align-content:start;border-left:3px solid var(--rot);padding-left:1rem}
.grundsaetze p{color:var(--grau);font-size:.98rem}
@media (max-width:860px){.grundsaetze{grid-template-columns:minmax(0,1fr)}}

/* Leistungen: Bilder stehen im Hintergrund, Schrift läuft darüber */
.story{position:relative;background:var(--tinte);color:var(--weiss);padding:0}
.story-bg{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.story-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .9s ease,transform 6s ease}
.story-bg img.aktiv{opacity:1;transform:scale(1)}
.schleier{position:absolute;inset:0;background:linear-gradient(90deg,rgba(23,25,27,.82) 0%,rgba(23,25,27,.5) 50%,rgba(23,25,27,.25) 100%)}
.story-inhalt{position:relative;z-index:1;margin-top:-100vh;margin-top:-100svh}
.kapitel{padding-block:24vh 30vh}
.kapitel .wrap{display:grid;gap:32vh;justify-items:start}
.kapitel:first-child{padding-top:22vh}
.kap-kopf{display:grid;gap:.8rem}
.kap-kopf .label{color:#C9CDD0}
.kap-kopf h2{font-size:clamp(2.6rem,6.5vw,5rem);max-width:14ch;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.kapitel .karte{width:min(34rem,100%)}
.karte{max-width:34rem;display:grid;gap:.9rem;padding:clamp(1.5rem,4vw,2.5rem);background:rgba(23,25,27,.66);border-left:4px solid var(--rot-hell);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.karte .nr{font:700 1.1rem/1 var(--display);color:var(--rot-hell);letter-spacing:.1em}
.karte h3{font-size:clamp(2rem,4.6vw,3.2rem);font-weight:700}
.karte p{color:#E2E4E5;font-size:1.1rem}
@media (prefers-reduced-motion:reduce){.story-bg img{transition:none;transform:none}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Rechtstexte */
.recht{padding-block:clamp(3rem,7vw,5rem)}
.recht .wrap{max-width:820px;display:grid;gap:.9rem}
.recht h1{font-size:clamp(2.4rem,6vw,3.6rem);margin-bottom:1rem}
.recht h2{font-size:1.5rem;margin-top:1.6rem}
.recht h3{font-size:1.2rem;margin-top:.6rem}
.recht a{color:var(--rot)}
.recht .stand{color:var(--grau);margin-top:1.5rem}
.kontakt a{color:var(--tinte)}