@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(fonts/inter-400-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(fonts/inter-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url(fonts/inter-600-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url(fonts/inter-600-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Oswald';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(fonts/oswald-400-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Oswald';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(fonts/oswald-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Oswald';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url(fonts/oswald-500-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Oswald';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url(fonts/oswald-500-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Oswald';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url(fonts/oswald-600-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Oswald';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url(fonts/oswald-600-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Mozart Bau — Stylesheet v2
   Dunkel, kräftig, bildgeführt. Signalfarbe: Zollstock-Gelb. */

:root{
  --nacht:#0E1109;
  --nacht-2:#171B10;
  --gruen:#6FA544;
  --gruen-tief:#3C5F23;
  --beton:#EDECE6;
  --beton-2:#DCDAD0;
  --gelb:#F0BC1B;
  --grau:#6A6D62;
  --hell-grau:#A8AC9C;
  --weiss:#FFFFFF;

  --display:"Oswald","Barlow Condensed","Arial Narrow",sans-serif;
  --body:"Inter",-apple-system,"Segoe UI",Roboto,sans-serif;
  --breit:1240px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:90px;}
body{
  margin:0; font-family:var(--body); font-size:17px; line-height:1.65;
  color:var(--nacht); background:var(--beton); -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block;}
a{color:var(--gruen-tief);}
:focus-visible{outline:3px solid var(--gelb); outline-offset:3px;}
.wrap{max-width:var(--breit); margin:0 auto; padding:0 24px;}

/* ---------- Typografie ---------- */
h1,h2,h3{font-family:var(--display); font-weight:600; line-height:1.02; margin:0 0 .5em;}
h1{font-size:clamp(3rem,9vw,6.4rem); text-transform:uppercase; letter-spacing:-.01em;}
h2{font-size:clamp(2.1rem,5vw,3.6rem); text-transform:uppercase; letter-spacing:-.005em;}
h3{font-size:1.4rem; text-transform:uppercase; letter-spacing:.02em;}
p{margin:0 0 1.1em;}

.eyebrow{
  font-family:var(--display); text-transform:uppercase; letter-spacing:.3em;
  font-size:.82rem; color:var(--gruen); margin:0 0 1em; font-weight:500;
}
.eyebrow--gelb{color:var(--gelb);}

/* ---------- Signatur: Maßband ---------- */
.massband{
  height:16px; border-top:2px solid currentColor; color:var(--nacht);
  background-image:repeating-linear-gradient(to right, currentColor 0 1px, transparent 1px 22px);
  background-size:22px 8px; background-repeat:repeat-x; margin:0 0 2.4rem; opacity:.75;
}
.massband--gelb{color:var(--gelb); opacity:1;}
.massband--hell{color:var(--hell-grau);}

/* ---------- Kopf ---------- */
.kopf{position:sticky; top:0; z-index:60; background:rgba(14,17,9,.94); backdrop-filter:blur(8px);}
.kopf .wrap{display:flex; align-items:center; gap:22px; min-height:74px; flex-wrap:wrap;}
.logo{display:block; text-decoration:none;}
.logo img{height:48px; width:auto; display:block;}
@media (max-width:520px){.logo img{height:38px;} .kopf .wrap{min-height:62px;}}
.navi{margin-left:auto; display:flex; gap:26px; flex-wrap:wrap;}
.navi a{
  color:var(--beton); text-decoration:none; font-family:var(--display);
  text-transform:uppercase; letter-spacing:.14em; font-size:.9rem; padding-bottom:3px;
  border-bottom:2px solid transparent;
}
.navi a:hover{color:var(--gelb); border-bottom-color:var(--gelb);}
.telefon-kopf{
  background:var(--gelb); color:var(--nacht); padding:11px 20px; text-decoration:none;
  font-family:var(--display); font-size:1rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.08em; white-space:nowrap;
}
.telefon-kopf:hover{background:var(--weiss);}
@media (max-width:700px){.navi{display:none;}}

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:clamp(560px,88vh,880px); display:flex; align-items:flex-end;
  background:var(--nacht); color:var(--weiss); overflow:hidden;
}
.hero-foto{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.5; transform:scale(1.06); animation:langsamZoom 18s ease-out forwards;
}
@keyframes langsamZoom{to{transform:scale(1);}}
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(14,17,9,.82) 0%, rgba(14,17,9,.45) 40%, rgba(14,17,9,.96) 100%);
}
.hero .wrap{position:relative; z-index:2; padding-top:110px; padding-bottom:64px;}
.hero h1{margin-bottom:.3em; text-shadow:0 2px 30px rgba(0,0,0,.5);}
.hero h1 .zeile{display:block;}
.hero h1 .gelb{color:var(--gelb);}
.hero .lead{font-size:clamp(1.05rem,2vw,1.3rem); max-width:52ch; color:#DDE0D4;}
.hero-aktionen{display:flex; gap:14px; flex-wrap:wrap; margin-top:26px;}
.orte{
  font-family:var(--display); text-transform:uppercase; letter-spacing:.16em;
  font-size:.8rem; color:var(--hell-grau); margin-top:40px; padding-top:22px;
  border-top:1px solid rgba(255,255,255,.15);
}

/* ---------- Kennzahlen ---------- */
.kennzahlen{background:var(--nacht-2); color:var(--weiss); padding:0;}
.kennzahlen .wrap{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:0; padding-left:0; padding-right:0;}
.kz{padding:34px 26px; border-right:1px solid rgba(255,255,255,.09);}
.kz:last-child{border-right:none;}
.kz b{display:block; font-family:var(--display); font-size:2.6rem; line-height:1; color:var(--gelb); font-weight:600;}
.kz span{font-size:.92rem; color:var(--hell-grau);}

/* ---------- Abschnitte ---------- */
section{padding:86px 0;}
section.hell{background:var(--weiss);}
section.sand{background:var(--beton-2);}
section.dunkel{background:var(--nacht); color:var(--beton);}
section.dunkel h2,section.dunkel h3{color:var(--weiss);}

/* ---------- Leistungskarten ---------- */
.karten{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:20px;}
.karte{
  position:relative; background:var(--nacht-2); color:var(--beton);
  padding:34px 30px 30px; overflow:hidden; text-decoration:none; display:block;
  transition:transform .35s ease, background .35s ease;
  border-top:3px solid var(--gruen);
}
.karte:hover{transform:translateY(-6px); background:var(--gruen-tief);}
.karte h3{color:var(--weiss); margin-bottom:.4em;}
.karte p{color:var(--hell-grau); font-size:.97rem; margin-bottom:1em;}
.karte .ab{
  font-family:var(--display); font-size:1.7rem; color:var(--gelb);
  font-weight:600; display:block; line-height:1;
}
.karte .pfeil{
  font-family:var(--display); text-transform:uppercase; letter-spacing:.14em;
  font-size:.82rem; color:var(--weiss); margin-top:14px; display:inline-block;
}
.karte:hover .pfeil{color:var(--gelb);}

/* ---------- Ablauf (echte Reihenfolge) ---------- */
.ablauf{counter-reset:schritt; display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:34px; margin-top:44px;}
.schritt{counter-increment:schritt; position:relative; padding-top:54px;}
.schritt::before{
  content:counter(schritt,decimal-leading-zero);
  position:absolute; top:0; left:0;
  font-family:var(--display); font-size:2.6rem; font-weight:600;
  color:var(--gelb); line-height:1;
}
.schritt h3{font-size:1.15rem; margin-bottom:.35em;}
.schritt p{font-size:.95rem; color:var(--grau); margin:0;}
section.dunkel .schritt p{color:var(--hell-grau);}

/* ---------- Gründe ---------- */
.gruende{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:38px;}
.grund{border-top:3px solid var(--gelb); padding-top:20px;}
.grund h3{font-size:1.15rem;}
.grund p{color:var(--grau); font-size:.96rem; margin:0;}
section.dunkel .grund p{color:var(--hell-grau);}

/* ---------- Aufmaßblatt ---------- */
.aufmass{background:var(--weiss); border:2px solid var(--nacht); box-shadow:12px 12px 0 var(--gelb);}
.aufmass-kopf{
  background:var(--nacht); color:var(--weiss); font-family:var(--display);
  text-transform:uppercase; letter-spacing:.16em; padding:14px 24px; font-size:.9rem;
}
table{width:100%; border-collapse:collapse; font-size:1rem;}
th,td{text-align:left; padding:15px 24px; border-bottom:1px solid var(--beton-2); font-weight:400; color:var(--nacht);}
td:last-child,th:last-child{text-align:right; white-space:nowrap;}
td:last-child{font-family:var(--display); font-size:1.35rem; font-weight:600; color:var(--gruen-tief);}
tr:last-child td,tr:last-child th{border-bottom:none;}
tr:hover td,tr:hover th{background:#FAFAF6;}
.hinweis{font-size:.88rem; color:var(--grau); margin-top:18px; max-width:62ch;}
section.dunkel .hinweis{color:var(--hell-grau);}

/* ---------- Galerie ---------- */
.galerie{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px;}
figure{margin:0; background:var(--nacht-2); overflow:hidden;}
figure img{width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .6s ease;}
figure:hover img{transform:scale(1.05);}
figcaption{padding:16px 20px; font-size:.9rem; color:var(--hell-grau);}

/* ---------- Projekte ---------- */
.projekt{border-top:2px solid var(--nacht); padding-top:30px; margin-bottom:66px;}
.projekt .meta{
  font-family:var(--display); text-transform:uppercase; letter-spacing:.2em;
  font-size:.8rem; color:var(--gruen); margin-bottom:.6em;
}
.projekt h2{font-size:clamp(1.6rem,3vw,2.4rem);}
.projekt dl{display:grid; grid-template-columns:auto 1fr; gap:8px 22px; font-size:.96rem; margin:0 0 1.3em;}
.projekt dt{font-weight:600;}
.projekt dd{margin:0; color:var(--grau);}

/* ---------- B2B ---------- */
.b2b{background:var(--gruen-tief); color:var(--weiss); padding:80px 0;}
.b2b h2{color:var(--weiss);}
.b2b ul{list-style:none; padding:0; margin:0 0 1.8em; display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:12px 34px;}
.b2b li{padding-left:30px; position:relative; color:#E2E8D8;}
.b2b li::before{content:"✓"; position:absolute; left:0; color:var(--gelb); font-weight:700;}

/* ---------- Knöpfe ---------- */
.knopf{
  display:inline-block; background:var(--gelb); color:var(--nacht);
  font-family:var(--display); font-size:1rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.1em;
  padding:16px 34px; text-decoration:none; border:2px solid var(--gelb); cursor:pointer;
  transition:background .25s ease, color .25s ease;
}
.knopf:hover{background:transparent; color:var(--gelb);}
.knopf--linie{background:transparent; border-color:currentColor; color:inherit;}
.knopf--linie:hover{background:var(--gelb); border-color:var(--gelb); color:var(--nacht);}

/* ---------- Kontakt ---------- */
.kontakt-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px;}
@media (max-width:800px){.kontakt-grid{grid-template-columns:1fr; gap:36px;}}
label{display:block; font-weight:600; margin-bottom:6px; font-size:.9rem; text-transform:uppercase; letter-spacing:.06em;}
input,textarea,select{
  width:100%; padding:13px 15px; margin-bottom:18px;
  border:2px solid rgba(255,255,255,.18); background:rgba(255,255,255,.05); color:var(--weiss);
  font-family:var(--body); font-size:1rem;
}
input:focus,textarea:focus,select:focus{border-color:var(--gelb); outline:none;}
select option{color:var(--nacht);}
.kontaktdaten a{font-size:1.4rem; font-family:var(--display); text-decoration:none; color:var(--gelb); font-weight:600;}

/* ---------- Anruf-Leiste Handy ---------- */
.anrufleiste{
  position:fixed; left:0; right:0; bottom:0; z-index:70; display:none;
  background:var(--gelb); color:var(--nacht); text-align:center;
  padding:15px; font-family:var(--display); font-size:1.1rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.08em; text-decoration:none;
}
@media (max-width:700px){.anrufleiste{display:block;} body{padding-bottom:56px;}}

/* ---------- Fuß ---------- */
.fuss{background:var(--nacht); color:var(--hell-grau); padding:64px 0 34px; font-size:.93rem;}
.fuss a{color:var(--beton); text-decoration:none;}
.fuss a:hover{color:var(--gelb);}
.fuss-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:34px; margin-bottom:34px;}
.fuss h3{color:var(--weiss); font-size:1rem; letter-spacing:.14em;}

/* ---------- Rechtstexte ---------- */
.recht{max-width:780px; padding:70px 24px 90px;}
.recht h1{font-size:clamp(2.2rem,5vw,3.2rem);}
.recht h2{font-size:1.45rem; margin-top:2.2em;}
.recht h3{font-size:1.05rem; margin-top:1.7em;}
.recht ul{padding-left:22px;}

/* ---------- Scroll-Einblendung ---------- */
.auf{opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease;}
.auf.da{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .auf{opacity:1; transform:none; transition:none;}
  .hero-foto{animation:none; transform:none;}
  figure img,.karte{transition:none;}
}

/* ---------- Kleiner Kopfbereich für Unterseiten ---------- */
.hero--klein{min-height:auto;}
.hero--klein .wrap{padding-top:92px; padding-bottom:60px;}
.hero--klein h1{font-size:clamp(2.6rem,7vw,4.8rem);}

/* ---------- Mobiles Menü ---------- */
.menue-knopf{
  display:none; margin-left:auto; background:transparent; border:2px solid rgba(255,255,255,.3);
  color:var(--beton); font-size:1.5rem; line-height:1; padding:8px 13px; cursor:pointer;
}
.menue-knopf:hover{border-color:var(--gelb); color:var(--gelb);}
@media (max-width:700px){
  .menue-knopf{display:block;}
  .navi{
    display:none; order:3; width:100%; flex-direction:column; gap:0;
    margin:0 -24px; padding:0 24px 14px; border-top:1px solid rgba(255,255,255,.12);
  }
  .navi.offen{display:flex;}
  .navi a{padding:15px 0; border-bottom:1px solid rgba(255,255,255,.08); font-size:1.05rem;}
  .navi a:hover{border-bottom-color:rgba(255,255,255,.08);}
  .telefon-kopf{order:2; padding:9px 14px; font-size:.9rem;}
}