@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800&display=swap');
:root{--green:#6BBA8B;--beige:#F0F0DC;--light:#E1E1E1;--dark:#4B4B4B;--white:#fff;--max:1240px}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:58px}body{margin:0;color:var(--dark);background:#fff;font-family:"Orbitron",sans-serif;font-size:15px;line-height:1.65}a{text-decoration:none;color:inherit}
.header{position:sticky;top:0;z-index:20;height:58px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 5vw;background:var(--dark);border-bottom:1px solid rgba(107,186,139,.45)}.logo{display:block;width:220px;height:58px;overflow:hidden;position:relative;flex:0 0 auto}.logo img{position:absolute;width:220px;height:220px;max-width:none;left:0;top:50%;transform:translateY(-50%);object-fit:cover}.header nav{height:100%;display:flex;align-items:center;gap:25px;color:var(--beige);font-size:13px;font-weight:600}.header nav a:hover{color:var(--green)}.nav-button{display:flex;align-items:center;height:32px;padding:0 15px;background:var(--beige);color:var(--dark)!important;border-radius:2px;font-weight:700}.nav-button:hover{background:var(--green)}
.hero{display:grid;grid-template-columns:1.05fr .95fr;min-height:650px;background:var(--beige);overflow:hidden}.hero-copy{display:flex;flex-direction:column;justify-content:center;padding:80px 7vw}.eyebrow{margin:0 0 16px;color:var(--green);font-size:14px;font-weight:700;letter-spacing:.12em}h1,h2,h3{font-family:"Orbitron",sans-serif;line-height:1.18;color:var(--dark)}h1{font-size:clamp(38px,5vw,70px);letter-spacing:-.035em;margin:0 0 24px}.lead{max-width:650px;font-size:17px;margin:0 0 32px}.actions{display:flex;gap:12px;flex-wrap:wrap}.button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 22px;border:1px solid var(--dark);border-radius:3px;font-family:"Orbitron",sans-serif;font-size:13px;font-weight:700;cursor:pointer}.primary{background:var(--dark);color:var(--beige)}.primary:hover{background:var(--green);border-color:var(--green);color:var(--dark)}.secondary:hover{color:var(--green);border-color:var(--green)}
.hero-visual{position:relative;background:#fff;overflow:hidden}.grid{position:absolute;inset:-10%;background-image:linear-gradient(rgba(75,75,75,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(75,75,75,.08) 1px,transparent 1px);background-size:42px 42px;transform:perspective(500px) rotateY(-12deg) scale(1.15)}.ring{position:absolute;width:390px;height:390px;left:50%;top:50%;transform:translate(-50%,-50%);border:2px solid var(--green);border-radius:50%}.ring:after{content:"";position:absolute;inset:42px;border:1px dashed var(--dark);border-radius:50%}.ring.small{width:170px;height:170px;border-width:1px}.ring.small:after{inset:22px}
.section{max-width:var(--max);margin:auto;padding:105px 5vw}.heading{max-width:780px;margin-bottom:50px}.heading h2,.about h2,.contact h2{font-size:clamp(30px,4vw,52px);margin:0 0 18px}.cards{display:grid;grid-template-columns:repeat(6,1fr);gap:1px}.cards article{min-height:275px;padding:30px;background:#fff;border:1px solid var(--light);transition:.2s}.cards article:hover{background:var(--beige);transform:translateY(-3px)}.cards span{display:block;color:var(--green);font-size:14px;font-weight:700;margin-bottom:52px}.cards h3{font-size:19px;margin:0 0 12px}.cards p{margin:0;font-size:15px}.s1{grid-column:1/3}.s2{grid-column:3/5}.s3{grid-column:5/7}.s4{grid-column:2/4}.s5{grid-column:4/6}
.projects{max-width:none;background:var(--dark);color:var(--beige)}.projects .heading h2{color:var(--beige)}.project-grid{max-width:var(--max);margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.project-grid article{min-height:330px;padding:28px;display:flex;flex-direction:column;justify-content:flex-end;background:#3f3f3f;border:1px solid rgba(240,240,220,.15)}.project-grid small{color:var(--green);font-size:13px;font-weight:700}.project-grid h3{color:var(--beige);font-size:22px;margin:10px 0 4px}.project-grid p{color:var(--light);margin:0;font-size:15px}.about{max-width:none;background:var(--beige);display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}.about>div,.about>p{max-width:560px;margin-left:auto;margin-right:auto}.about>p{font-size:17px}.contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:90px}.contact form{display:grid;gap:17px}.contact label{display:grid;gap:7px;font-family:"Orbitron",sans-serif;font-size:13px;font-weight:700}input,select,textarea{width:100%;padding:13px 14px;border:1px solid #ccc;border-radius:2px;background:#fff;color:var(--dark);font-family:Arial,Helvetica,sans-serif;font-size:14px}textarea{resize:vertical}input:focus,select:focus,textarea:focus{outline:2px solid rgba(107,186,139,.3);border-color:var(--green)}footer{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:28px 5vw;background:#303030;color:var(--beige)}footer strong{font-size:15px}footer span{color:var(--green);font-size:12px;margin-left:-20px}footer div{display:flex;gap:20px;font-size:12px}footer a:hover{color:var(--green)}
@media(max-width:900px){.header nav{gap:12px;font-size:11px}.hero{grid-template-columns:1fr}.hero-visual{min-height:330px}.cards{grid-template-columns:1fr 1fr}.s1,.s2,.s3,.s4,.s5{grid-column:auto}.project-grid{grid-template-columns:1fr 1fr}.about,.contact{grid-template-columns:1fr;gap:35px}}@media(max-width:680px){.header{height:52px}.logo{width:170px;height:52px}.logo img{width:170px;height:170px}.header nav a:not(.nav-button){display:none}.nav-button{height:34px;font-size:11px}.hero-copy{padding:65px 7vw}.section{padding:80px 7vw}.cards,.project-grid{grid-template-columns:1fr}.hero-visual{min-height:300px}.ring{width:260px;height:260px}footer{flex-direction:column;align-items:flex-start}footer span{margin-left:0}}

/* Typografie wie im ersten Entwurf */
.header nav,
.eyebrow,
h1,h2,h3,
.button,
.service span,
.project-grid small,
.contact label,
.footer-brand strong {
  font-family:"Orbitron",sans-serif;
}


/* =========================================================
   dreinamics – gezielte Typografie
   Standard: Arial/Helvetica
   Orbitron nur für die ausdrücklich definierten Elemente.
   ========================================================= */

body,
p,
.lead,
.heading h2,
.about h2,
.about > p,
.contact h2,
.contact > div > p:not(.eyebrow),
.service p,
.project-grid p,
input,
select,
textarea,
.contact label {
  font-family: Arial, Helvetica, sans-serif !important;
}

/* Header-Navigation */
.header nav,
.header nav a {
  font-family: "Orbitron", sans-serif !important;
}

/* Hero: nur ENGINEERING & DESIGN in Orbitron; Haupttitel und Text Arial */
.hero .eyebrow {
  font-family: "Orbitron", sans-serif !important;
}
.hero h1,
.hero .lead {
  font-family: Arial, Helvetica, sans-serif !important;
}

/* Alle Buttons */
.button,
button,
.nav-button {
  font-family: "Orbitron", sans-serif !important;
}

/* Leistungen: grünes Label, Nummern und Kachel-Titel Orbitron */
#leistungen > .heading > .eyebrow,
#leistungen .service span,
#leistungen .service h3 {
  font-family: "Orbitron", sans-serif !important;
}
#leistungen > .heading > h2,
#leistungen .service p {
  font-family: Arial, Helvetica, sans-serif !important;
}

/* Projekte: grünes PROJEKTE + Projekt-Nr. + Projekttitel Orbitron; Rest Arial */
#projekte > .heading > .eyebrow,
#projekte .project-grid small,
#projekte .project-grid h3 {
  font-family: "Orbitron", sans-serif !important;
}
#projekte > .heading > h2,
#projekte > .heading > p:not(.eyebrow),
#projekte .project-grid p {
  font-family: Arial, Helvetica, sans-serif !important;
}

/* Über dreinamics: nur grünes dreinamics in Orbitron */
#ueber .eyebrow {
  font-family: "Orbitron", sans-serif !important;
  text-transform: uppercase;
}
#ueber h2,
#ueber > p {
  font-family: Arial, Helvetica, sans-serif !important;
}

/* Kontakt: nur grünes PROJEKT ANFRAGEN + Button Orbitron */
#kontakt .eyebrow,
#kontakt button {
  font-family: "Orbitron", sans-serif !important;
}
#kontakt h2,
#kontakt > div > p:not(.eyebrow),
#kontakt label,
#kontakt input,
#kontakt select,
#kontakt textarea {
  font-family: Arial, Helvetica, sans-serif !important;
}

/* Footer komplett Orbitron */
footer,
footer *,
.footer-brand,
.footer-brand strong,
.footer-links,
.footer-links a {
  font-family: "Orbitron", sans-serif !important;
}
.footer-brand {
  display:block;
}


/* =========================================================
   V5 – Typografie, Branddarstellung und dynamischer Header
   ========================================================= */

/* Alle großen Bereichsüberschriften Orbitron */
h1,
.heading h2,
.about h2,
.contact h2 {
  font-family:"Orbitron", sans-serif !important;
  font-weight:700;
}

/* Kontakt-Feldbezeichnungen Orbitron, Eingabefelder selbst Arial */
#kontakt label {
  font-family:"Orbitron", sans-serif !important;
  font-size:14px;
  font-weight:700;
}
#kontakt input,
#kontakt select,
#kontakt textarea {
  font-family:Arial, Helvetica, sans-serif !important;
  font-size:15px;
}

/* DREINAMICS als Textmarke immer groß + kursiv */
#ueber .eyebrow,
.footer-brand strong {
  text-transform:uppercase;
  font-family:"Orbitron", sans-serif !important;
  font-style:italic;
  font-weight:700;
}

/* Header: oben größer, beim Scrollen kompakt */
.header {
  height:70px;
  transition:height .28s ease, box-shadow .28s ease;
}
.logo {
  width:245px;
  height:70px;
  transition:width .28s ease, height .28s ease;
}
.logo img {
  width:245px;
  height:245px;
  top:calc(50% + 3px); /* minimal nach unten versetzt */
  transition:width .28s ease, height .28s ease, top .28s ease;
}
.header nav {
  transition:font-size .28s ease;
}

.header.is-scrolled {
  height:58px;
  box-shadow:0 5px 18px rgba(0,0,0,.12);
}
.header.is-scrolled .logo {
  width:220px;
  height:58px;
}
.header.is-scrolled .logo img {
  width:220px;
  height:220px;
  top:calc(50% + 3px);
}

/* Die Ankerposition berücksichtigt den größeren Header am Seitenanfang */
html { scroll-padding-top:72px; }

@media(max-width:680px){
  .header { height:64px; }
  .logo { width:200px; height:64px; }
  .logo img { width:200px; height:200px; top:calc(50% + 3px); }
  .header.is-scrolled { height:58px; }
  .header.is-scrolled .logo { width:185px; height:58px; }
  .header.is-scrolled .logo img { width:185px; height:185px; top:calc(50% + 3px); }
}


/* =========================================================
   V6 – Titel + deutlich sichtbarer Header-Zoom
   ========================================================= */

/* ALLE Haupttitel direkt unter den Bereichslabels */
.hero h1,
#leistungen .heading h2,
#projekte .heading h2,
#ueber h2,
#kontakt h2 {
  font-family:"Orbitron", sans-serif !important;
  font-weight:700 !important;
}

/* Großer Ausgangszustand ganz oben */
.header {
  height:88px !important;
  padding-left:5vw !important;
  padding-right:5vw !important;
  transition:
    height .32s ease,
    padding .32s ease,
    box-shadow .32s ease !important;
}

.header .logo {
  width:285px !important;
  height:88px !important;
  transition:width .32s ease, height .32s ease !important;
}

.header .logo img {
  width:285px !important;
  height:285px !important;
  top:calc(50% + 7px) !important;
  transition:
    width .32s ease,
    height .32s ease,
    top .32s ease !important;
}

.header nav {
  gap:32px !important;
  font-size:14px !important;
  transition:
    gap .32s ease,
    font-size .32s ease !important;
}

.header .nav-button {
  height:40px !important;
  padding:0 20px !important;
  font-size:13px !important;
  transition:
    height .32s ease,
    padding .32s ease,
    font-size .32s ease !important;
}

/* Kompakter Zustand nach dem Scrollen – ungefähr ursprüngliche Größe */
.header.is-scrolled {
  height:58px !important;
  box-shadow:0 5px 18px rgba(0,0,0,.14) !important;
}

.header.is-scrolled .logo {
  width:220px !important;
  height:58px !important;
}

.header.is-scrolled .logo img {
  width:220px !important;
  height:220px !important;
  top:calc(50% + 5px) !important;
}

.header.is-scrolled nav {
  gap:25px !important;
  font-size:13px !important;
}

.header.is-scrolled .nav-button {
  height:32px !important;
  padding:0 15px !important;
  font-size:12px !important;
}

@media(max-width:680px){
  .header { height:72px !important; }
  .header .logo { width:215px !important; height:72px !important; }
  .header .logo img { width:215px !important; height:215px !important; top:calc(50% + 6px) !important; }
  .header.is-scrolled { height:56px !important; }
  .header.is-scrolled .logo { width:180px !important; height:56px !important; }
  .header.is-scrolled .logo img { width:180px !important; height:180px !important; top:calc(50% + 4px) !important; }
}


/* =========================================================
   V7 – Header-Verhalten
   88 px ist die dauerhafte Header-Höhe.
   Oben: Inhalte 1,8x größer.
   Ab 30 px Scroll: Inhalte zoomen sichtbar auf Normalgröße zurück.
   ========================================================= */

.header {
  height:88px !important;
  min-height:88px !important;
  overflow:visible !important;
  transition:box-shadow .35s ease !important;
}

/* Ausgangslage oben: 1,8x */
.header .logo {
  width:396px !important; /* 220 * 1.8 */
  height:88px !important;
  overflow:hidden !important;
  transition:width .38s cubic-bezier(.22,.61,.36,1) !important;
}

.header .logo img {
  width:396px !important;
  height:396px !important;
  top:calc(50% + 7px) !important;
  transition:
    width .38s cubic-bezier(.22,.61,.36,1),
    height .38s cubic-bezier(.22,.61,.36,1),
    top .38s ease !important;
}

.header nav {
  gap:36px !important;
  font-size:23.4px !important; /* 13 * 1.8 */
  transition:
    font-size .38s cubic-bezier(.22,.61,.36,1),
    gap .38s cubic-bezier(.22,.61,.36,1) !important;
}

.header .nav-button {
  height:46px !important;
  padding:0 24px !important;
  font-size:21.6px !important; /* 12 * 1.8 */
  transition:
    height .38s cubic-bezier(.22,.61,.36,1),
    padding .38s cubic-bezier(.22,.61,.36,1),
    font-size .38s cubic-bezier(.22,.61,.36,1) !important;
}

/* Nach Scroll: exakt die vom Nutzer gewünschte bisherige Header-Größe */
.header.header--compact {
  height:88px !important;
  min-height:88px !important;
  box-shadow:0 5px 18px rgba(0,0,0,.14) !important;
}

.header.header--compact .logo {
  width:220px !important;
  height:88px !important;
}

.header.header--compact .logo img {
  width:220px !important;
  height:220px !important;
  top:calc(50% + 5px) !important;
}

.header.header--compact nav {
  gap:25px !important;
  font-size:13px !important;
}

.header.header--compact .nav-button {
  height:32px !important;
  padding:0 15px !important;
  font-size:12px !important;
}

/* Alte V5/V6 Scroll-Klasse neutralisieren, damit sie nicht dazwischenfunkt */
.header.is-scrolled,
.header.is-scrolled.header--compact {
  height:88px !important;
  min-height:88px !important;
}

@media(max-width:1000px){
  .header .logo{width:300px !important}
  .header .logo img{width:300px !important;height:300px !important}
  .header nav{font-size:17px !important;gap:18px !important}
  .header .nav-button{font-size:15px !important;padding:0 16px !important}
  .header.header--compact .logo{width:200px !important}
  .header.header--compact .logo img{width:200px !important;height:200px !important}
  .header.header--compact nav{font-size:12px !important;gap:14px !important}
  .header.header--compact .nav-button{font-size:11px !important}
}


/* =========================================================
   V8 – Header skaliert als gesamter Block
   Oben größer, beim Scrollen kompakter.
   Buttons oben etwas kleiner als in V7.
   ========================================================= */

/* Oberer Zustand */
.header {
  height:104px !important;
  min-height:104px !important;
  transition:
    height .38s cubic-bezier(.22,.61,.36,1),
    min-height .38s cubic-bezier(.22,.61,.36,1),
    box-shadow .38s ease !important;
}

.header .logo {
  width:330px !important;
  height:104px !important;
}

.header .logo img {
  width:330px !important;
  height:330px !important;
  top:calc(50% + 7px) !important;
}

/* Navigation oben bewusst kleiner als V7 */
.header nav {
  gap:30px !important;
  font-size:17px !important;
}

.header .nav-button {
  height:39px !important;
  padding:0 18px !important;
  font-size:14px !important;
}

/* Scroll-Zustand: Header UND Inhalt zoomen zusammen zurück */
.header.header--compact {
  height:88px !important;
  min-height:88px !important;
  box-shadow:0 5px 18px rgba(0,0,0,.14) !important;
}

.header.header--compact .logo {
  width:220px !important;
  height:88px !important;
}

.header.header--compact .logo img {
  width:220px !important;
  height:220px !important;
  top:calc(50% + 5px) !important;
}

.header.header--compact nav {
  gap:25px !important;
  font-size:13px !important;
}

.header.header--compact .nav-button {
  height:32px !important;
  padding:0 15px !important;
  font-size:12px !important;
}

/* Alte Scroll-Klasse darf die neue Höhe nicht überschreiben */
.header.is-scrolled {
  height:104px !important;
  min-height:104px !important;
}
.header.is-scrolled.header--compact {
  height:88px !important;
  min-height:88px !important;
}

@media(max-width:1000px){
  .header{height:94px !important;min-height:94px !important}
  .header .logo{width:270px !important;height:94px !important}
  .header .logo img{width:270px !important;height:270px !important}
  .header nav{font-size:14px !important;gap:17px !important}
  .header .nav-button{font-size:12px !important;height:36px !important;padding:0 14px !important}

  .header.header--compact{height:78px !important;min-height:78px !important}
  .header.header--compact .logo{width:195px !important;height:78px !important}
  .header.header--compact .logo img{width:195px !important;height:195px !important}
  .header.header--compact nav{font-size:11px !important;gap:12px !important}
}


/* =========================================================
   V11 – finaler Hero auf Basis V8
   Typografie gemäß vorheriger Definition.
   ========================================================= */
.hero-v11{
  display:grid !important;
  grid-template-columns:minmax(390px,.78fr) minmax(610px,1.22fr);
  align-items:center;
  gap:clamp(28px,3.6vw,68px);
  min-height:calc(100vh - 104px);
  padding:clamp(70px,7vw,110px) 5vw !important;
  background:#F0F0DC !important;
  overflow:hidden;
}

.hero-v11 .hero-copy{
  position:relative;
  z-index:2;
  max-width:690px;
}

.hero-v11 .eyebrow{
  margin:0 0 20px;
  font-family:"Orbitron",sans-serif !important;
  letter-spacing:.28em;
}

.hero-v11 h1{
  margin:0;
  font-family:"Orbitron",sans-serif !important;
  font-weight:700;
  font-size:clamp(48px,4.7vw,78px);
  line-height:1.04;
  letter-spacing:-.035em;
  color:#4B4B4B;
}

.hero-v11 .hero-tagline{
  margin:28px 0 0;
  font-family:Arial,Helvetica,sans-serif !important;
  font-size:clamp(21px,1.55vw,27px);
  line-height:1.4;
  font-weight:600;
  color:#4B4B4B;
}

.hero-v11 .lead{
  margin:6px 0 0;
  max-width:620px;
  font-family:Arial,Helvetica,sans-serif !important;
  font-size:clamp(18px,1.3vw,22px);
  line-height:1.5;
  color:#4B4B4B;
}

.hero-v11 .hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:34px;
}

.hero-v11 .hero-actions .button{
  font-family:"Orbitron",sans-serif !important;
}

.hero-v11 .hero-process-chain{
  position:relative;
  width:calc(100% + 2vw);
  margin-right:-2vw;
  overflow:hidden;
  background:#F0F0DC;
}

.hero-v11 .hero-process-chain img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  mix-blend-mode:multiply;
}

/* Sehr dezenter Randverlauf – Bildhintergrund ist bereits beige. */
.hero-v11 .hero-process-chain::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,#F0F0DC 0%,rgba(240,240,220,0) 5%,rgba(240,240,220,0) 96%,#F0F0DC 100%),
    linear-gradient(180deg,#F0F0DC 0%,rgba(240,240,220,0) 6%,rgba(240,240,220,0) 94%,#F0F0DC 100%);
}

@media(max-width:1180px){
  .hero-v11{
    grid-template-columns:1fr;
    min-height:auto;
  }
  .hero-v11 .hero-copy{max-width:820px}
  .hero-v11 .hero-process-chain{
    width:100%;
    margin-right:0;
  }
}

@media(max-width:680px){
  .hero-v11{
    padding:54px 5vw 70px !important;
    gap:40px;
  }
  .hero-v11 h1{
    font-size:clamp(40px,11vw,56px);
  }
  .hero-v11 .hero-tagline{
    font-size:20px;
  }
  .hero-v11 .lead{
    font-size:17px;
  }
}


/* V12 – Hero-Nutzen & vollständig synchronisierte Header-Animation */
.hero-v11 .lead{max-width:700px;margin-top:24px;}
.hero-v11 .hero-benefit{margin:13px 0 0;font-family:Arial,Helvetica,sans-serif !important;font-size:clamp(17px,1.15vw,20px);line-height:1.45;font-weight:700;color:#4B4B4B;}

.header,
.header .logo,
.header .logo img,
.header nav,
.header nav a,
.header .nav-button{
  transition-duration:.42s !important;
  transition-timing-function:cubic-bezier(.22,.61,.36,1) !important;
}
.header{transition-property:height,min-height,box-shadow !important;}
.header .logo{transition-property:width,height !important;}
.header .logo img{transition-property:width,height,top !important;}
.header nav{transition-property:font-size,gap !important;}
.header .nav-button{transition-property:height,padding,font-size !important;}


/* =========================================================
   V13 – Hero-Label, Qualifikation, Kontakt-Vertrauen
   ========================================================= */

/* ENGINEERING & DESIGN liegt oberhalb beider Hero-Spalten */
.hero-v11{
  grid-template-rows:auto 1fr;
}
.hero-v11 .hero-section-label{
  grid-column:1 / -1;
  grid-row:1;
  align-self:end;
  margin:0 0 clamp(20px,2vw,30px);
  font-family:"Orbitron",sans-serif !important;
  letter-spacing:.28em;
}
.hero-v11 .hero-copy{
  grid-column:1;
  grid-row:2;
}
.hero-v11 .hero-process-chain{
  grid-column:2;
  grid-row:2;
}

/* Qualifikation klar sichtbar, aber nicht wie ein Lebenslauf */
.engineering-credential{
  margin:18px 0 24px;
  padding-left:18px;
  border-left:3px solid #6BBA8B;
  font-family:Arial,Helvetica,sans-serif !important;
  line-height:1.55;
}
.engineering-credential strong{
  font-family:"Orbitron",sans-serif !important;
  font-size:.92em;
}

/* Unverbindlichkeit direkt im Anfragebereich */
.contact-reassurance{
  max-width:720px;
  margin:14px 0 28px;
  font-family:Arial,Helvetica,sans-serif !important;
  line-height:1.55;
}

@media(max-width:1180px){
  .hero-v11 .hero-section-label{grid-column:1}
  .hero-v11 .hero-copy{grid-column:1}
  .hero-v11 .hero-process-chain{grid-column:1;grid-row:3}
}


/* V14 – Datei-Upload im Anfrageformular */
.file-upload-label small{
  display:block;
  margin-top:8px;
  font-family:Arial,Helvetica,sans-serif !important;
  font-size:13px;
  line-height:1.45;
  font-weight:400;
  opacity:.75;
}
.file-upload-label input[type="file"]{
  display:block;
  width:100%;
  margin-top:8px;
  padding:12px;
  border:1px solid rgba(75,75,75,.25);
  background:rgba(255,255,255,.28);
  font-family:Arial,Helvetica,sans-serif !important;
  cursor:pointer;
}


/* =========================================================
   V15 – Abschnitts-Ausrichtung Hero + Beispiele
   ========================================================= */

/*
 Hero:
 ENGINEERING & DESIGN sitzt wie die grünen Abschnittslabels
 direkt oberhalb des eigentlichen Inhalts.
 Der Haupttitel beginnt exakt an derselben linken Kante.
*/
.hero-v11{
  grid-template-columns:minmax(390px,.78fr) minmax(610px,1.22fr) !important;
  grid-template-rows:auto auto !important;
  column-gap:clamp(28px,3.6vw,68px) !important;
  row-gap:24px !important;
  align-items:start !important;
}

.hero-v11 .hero-section-label{
  grid-column:1 / -1 !important;
  grid-row:1 !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  align-self:end !important;
}

.hero-v11 .hero-copy{
  grid-column:1 !important;
  grid-row:2 !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  align-self:start !important;
}

.hero-v11 .hero-copy h1{
  width:100% !important;
  max-width:680px !important;
  margin:0 !important;
}

.hero-v11 .hero-process-chain{
  grid-column:2 !important;
  grid-row:2 !important;
  align-self:start !important;
  margin-top:0 !important;
}

/*
 Beispiele:
 Label, Titel und Beschreibung beginnen exakt an der linken
 Kante der ersten Projekt-Kachel.
*/
#projekte{
  --project-content-left:0px;
}

#projekte > .heading,
#projekte .heading{
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
  padding-left:0 !important;
  text-align:left !important;
}

#projekte .heading .eyebrow,
#projekte .heading h2,
#projekte .heading p{
  margin-left:0 !important;
  text-align:left !important;
}

#projekte .project-grid{
  margin-left:0 !important;
}

/* Responsive: Prozessbild unter dem Hero-Text */
@media(max-width:1180px){
  .hero-v11{
    grid-template-columns:1fr !important;
  }
  .hero-v11 .hero-section-label{
    grid-column:1 !important;
  }
  .hero-v11 .hero-copy{
    grid-column:1 !important;
    grid-row:2 !important;
  }
  .hero-v11 .hero-process-chain{
    grid-column:1 !important;
    grid-row:3 !important;
  }
}