/* ============================================================
   TERBA GmbH — statische Seite
   Industrial: Anthrazit, Signalgelb, Barlow / Barlow Condensed
   ============================================================ */

@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/Barlow-400.woff2') format('woff2');}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/Barlow-500.woff2') format('woff2');}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/Barlow-600.woff2') format('woff2');}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/BarlowCondensed-600.woff2') format('woff2');}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/BarlowCondensed-700.woff2') format('woff2');}

:root{
  --ink:#1d2126;
  --ink-soft:#3c434b;
  --paper:#f5f3ee;
  --paper-deep:#eceae2;
  --line:#d8d4c8;
  --amber:#f7b500;
  --amber-deep:#c98f00;
  --white:#ffffff;
  --display:'Barlow Condensed',Impact,'Arial Narrow',sans-serif;
  --body:'Barlow','Helvetica Neue',Arial,sans-serif;
  --wrap:1140px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--body);
  font-size:17px;line-height:1.65;
  color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

/* ---------- Typo ---------- */
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.05;text-transform:uppercase;letter-spacing:.01em}
h1{font-size:clamp(2.6rem,7vw,5rem)}
h2{font-size:clamp(2rem,4.5vw,3.2rem)}
h3{font-size:1.45rem;letter-spacing:.03em}
.kicker{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--display);font-weight:600;font-size:1rem;
  text-transform:uppercase;letter-spacing:.22em;color:var(--amber-deep);
}
.kicker::before{content:"";width:34px;height:3px;background:var(--amber)}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(29,33,38,.97);color:var(--white);
  border-bottom:3px solid var(--amber);
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;min-height:72px;gap:1rem}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none}
.brand img{height:40px;width:auto;background:var(--white);padding:4px 8px;border-radius:2px}
.brand span{font-family:var(--display);font-weight:700;font-size:1.5rem;letter-spacing:.08em;text-transform:uppercase}
.nav{display:flex;align-items:center;gap:1.6rem}
.nav a{
  text-decoration:none;font-family:var(--display);font-weight:600;
  font-size:1.05rem;letter-spacing:.12em;text-transform:uppercase;
  color:#cfd4da;padding:.35rem 0;border-bottom:2px solid transparent;
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--white);border-bottom-color:var(--amber)}
.nav .call{
  background:var(--amber);color:var(--ink);padding:.5rem 1.1rem;
  border-bottom:none;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);
}
.nav .call:hover{background:#ffc82e;color:var(--ink)}
.nav-toggle{display:none;background:none;border:0;color:var(--white);font-size:1.8rem;cursor:pointer;line-height:1}

/* ---------- Hero ---------- */
.hero{
  position:relative;color:var(--white);
  background:linear-gradient(100deg,rgba(20,23,27,.92) 0%,rgba(20,23,27,.72) 45%,rgba(20,23,27,.35) 100%),
             url('hero.jpg') center/cover no-repeat;
  border-bottom:6px solid var(--amber);
}
.hero .wrap{padding-top:clamp(5rem,14vh,9rem);padding-bottom:clamp(5rem,14vh,9rem)}
.hero .kicker{color:var(--amber)}
.hero h1{max-width:14ch;margin:.6rem 0 1.2rem}
.hero h1 em{font-style:normal;color:var(--amber)}
.hero p{max-width:44ch;font-size:1.2rem;color:#e4e6e9;margin-bottom:2.2rem}
.hero-hatch{
  position:absolute;inset:auto 0 -6px 0;height:18px;pointer-events:none;
  background:repeating-linear-gradient(-45deg,var(--ink) 0 12px,var(--amber) 12px 24px);
  opacity:0;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;text-decoration:none;cursor:pointer;
  font-family:var(--display);font-weight:700;font-size:1.1rem;
  letter-spacing:.14em;text-transform:uppercase;
  padding:.85rem 1.9rem;border:2px solid var(--amber);
  transition:transform .15s ease,background .15s ease;
}
.btn-solid{background:var(--amber);color:var(--ink)}
.btn-solid:hover{background:#ffc82e;transform:translateY(-2px)}
.btn-ghost{color:var(--white)}
.btn-ghost:hover{background:rgba(247,181,0,.15);transform:translateY(-2px)}
.btn-dark{border-color:var(--ink);color:var(--ink)}
.btn-dark:hover{background:var(--ink);color:var(--white);transform:translateY(-2px)}
.btn-row{display:flex;flex-wrap:wrap;gap:1rem}

/* ---------- Sections ---------- */
section{padding:clamp(3.5rem,9vw,6.5rem) 0}
.section-head{max-width:640px;margin-bottom:2.8rem}
.section-head h2{margin:.5rem 0 .9rem}
.section-head p{color:var(--ink-soft)}

/* Unternehmen */
.about{background:var(--paper)}
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:3.5rem;align-items:center}
.about-copy p{margin-bottom:1rem;color:var(--ink-soft)}
.about-copy p strong{color:var(--ink)}
.about-media{position:relative}
.about-media img{border:1px solid var(--line);box-shadow:12px 12px 0 var(--amber)}
.about-badge{
  position:absolute;top:-26px;right:-10px;background:var(--ink);color:var(--white);
  font-family:var(--display);font-weight:700;text-transform:uppercase;text-align:center;
  padding:.8rem 1.2rem;line-height:1.1;letter-spacing:.05em;
  clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);
}
.about-badge b{display:block;font-size:2rem;color:var(--amber)}

/* Kernbereiche */
.core{background:var(--ink);color:var(--white)}
.core .section-head p{color:#b9bec5}
.core-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.core-card{
  background:#262b31;border-top:4px solid var(--amber);
  padding:1.8rem 1.5rem;transition:transform .18s ease,background .18s ease;
}
.core-card:hover{transform:translateY(-6px);background:#2d333a}
.core-card .num{font-family:var(--display);font-weight:700;font-size:1rem;color:var(--amber);letter-spacing:.2em}
.core-card h3{margin:.5rem 0 .7rem;color:var(--white)}
.core-card p{font-size:.98rem;color:#b9bec5}

/* Leistungen */
.services{background:var(--paper-deep)}
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.svc{
  background:var(--white);border:1px solid var(--line);
  padding:2rem 2rem 1.8rem;position:relative;overflow:hidden;
}
.svc::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:5px;
  background:repeating-linear-gradient(-45deg,var(--ink) 0 8px,var(--amber) 8px 16px);
}
.svc h3{margin-bottom:.7rem}
.svc h3 a{text-decoration:none}
.svc h3 a:hover{color:var(--amber-deep)}
.svc p{color:var(--ink-soft);font-size:1rem;margin-bottom:.6rem}
.svc ul{margin:.4rem 0 .6rem 1.2rem;color:var(--ink-soft)}
.svc ul li{margin-bottom:.25rem}
.svc .more{
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  letter-spacing:.14em;font-size:.95rem;text-decoration:none;color:var(--amber-deep);
}
.svc .more:hover{color:var(--ink)}

/* Detailseiten Leistungen */
.svc-detail{padding:0}
.svc-detail article{
  padding:clamp(3rem,7vw,4.5rem) 0;border-bottom:1px solid var(--line);
}
.svc-detail article:nth-child(even){background:var(--paper-deep)}
.svc-detail .inner{max-width:800px}
.svc-detail h2{font-size:clamp(1.7rem,3.5vw,2.4rem);margin:.4rem 0 1.1rem}
.svc-detail p{color:var(--ink-soft);margin-bottom:.9rem}
.svc-detail ul{margin:.3rem 0 1rem 1.3rem;color:var(--ink-soft)}
.svc-detail ul li{margin-bottom:.3rem}

/* Produkte */
.prod-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.8rem}
.prod{
  background:var(--white);border:1px solid var(--line);display:flex;flex-direction:column;
}
.prod img{aspect-ratio:4/3;object-fit:cover;width:100%;filter:saturate(.92)}
.prod-body{padding:1.6rem 1.7rem 1.8rem;border-top:4px solid var(--amber)}
.prod-body h3{margin-bottom:.8rem}
.prod-body ul{columns:2;column-gap:2rem;margin-left:1.2rem;color:var(--ink-soft)}
.prod-body ul li{margin-bottom:.3rem;break-inside:avoid}
.prod-body .note{font-size:.92rem;color:var(--ink-soft);margin-top:.7rem}

/* Standort */
.location{background:var(--ink);color:var(--white)}
.location .section-head p{color:#b9bec5}
.loc-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.loc-copy p{color:#cfd4da;margin-bottom:1rem}
.loc-copy .notice{
  border-left:4px solid var(--amber);background:#262b31;
  padding:.9rem 1.2rem;font-size:1rem;margin:1.4rem 0 1.8rem;
}
.loc-media img{border:1px solid #3a4047}
.loc-media a{display:block;text-decoration:none}
.loc-media .map-hint{
  background:var(--amber);color:var(--ink);text-align:center;
  font-family:var(--display);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:.65rem;font-size:1rem;
}

/* Kontakt */
.contact{background:var(--paper)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem}
.contact-card{
  background:var(--white);border:1px solid var(--line);padding:2.2rem;
  border-top:5px solid var(--amber);
}
.contact-card h3{margin-bottom:1.2rem}
.contact-card dl{display:grid;grid-template-columns:auto 1fr;gap:.45rem 1.4rem}
.contact-card dt{font-weight:600;white-space:nowrap}
.contact-card dd a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--amber)}
.contact-card dd a:hover{color:var(--amber-deep)}
.contact-cta h2{margin:.5rem 0 1rem}
.contact-cta p{color:var(--ink-soft);margin-bottom:1.8rem;max-width:40ch}
.contact-cta .mail{
  font-family:var(--display);font-weight:700;font-size:clamp(1.3rem,3vw,1.9rem);
  text-transform:uppercase;letter-spacing:.04em;text-decoration:none;
  border-bottom:3px solid var(--amber);
}
.contact-cta .mail:hover{color:var(--amber-deep)}

/* ---------- Seiten-Hero (Unterseiten) ---------- */
.page-hero{
  background:linear-gradient(100deg,rgba(20,23,27,.93),rgba(20,23,27,.65)),
             url('lkw.jpg') center/cover no-repeat;
  color:var(--white);border-bottom:6px solid var(--amber);
}
.page-hero .wrap{padding-top:4.5rem;padding-bottom:4.5rem}
.page-hero h1{font-size:clamp(2.2rem,5.5vw,3.6rem);margin-top:.5rem}
.page-hero .kicker{color:var(--amber)}

/* ---------- Rechtstexte ---------- */
.legal{max-width:800px}
.legal h1{font-size:2.4rem;margin-bottom:1.5rem}
.legal h2{font-size:1.5rem;margin:2.2rem 0 .8rem}
.legal h3{font-size:1.15rem;margin:1.6rem 0 .6rem}
.legal p{margin-bottom:.9rem;color:var(--ink-soft)}
.legal ul{margin:0 0 1rem 1.3rem;color:var(--ink-soft)}
.legal a{color:var(--amber-deep)}
.legal table{border-collapse:collapse;width:100%;margin-bottom:1rem}
.legal td,.legal th{border:1px solid var(--line);padding:.5rem .7rem;text-align:left;font-size:.95rem}

/* ---------- Footer ---------- */
.site-footer{background:#14171b;color:#aeb4bb;border-top:6px solid var(--amber)}
.site-footer .wrap{padding:3.2rem 24px 2rem}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:2.5rem;margin-bottom:2.2rem}
.foot-grid h4{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;color:var(--white);margin-bottom:.9rem;font-size:1.1rem;
}
.foot-grid p{font-size:.98rem;margin-bottom:.4rem}
.foot-grid a{color:#d6dade;text-decoration:none}
.foot-grid a:hover{color:var(--amber)}
.foot-grid ul{list-style:none}
.foot-grid li{margin-bottom:.4rem}
.foot-bottom{
  border-top:1px solid #2a2f35;padding-top:1.4rem;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;font-size:.92rem;
}
.foot-bottom a{color:#d6dade;text-decoration:none;margin-left:1.2rem}
.foot-bottom a:hover{color:var(--amber)}

/* ---------- Responsive ---------- */
@media(max-width:960px){
  .core-grid{grid-template-columns:repeat(2,1fr)}
  .about-grid,.loc-grid,.contact-grid{grid-template-columns:1fr;gap:2.5rem}
  .about-media{order:-1}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  .nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--ink);border-bottom:3px solid var(--amber);padding:.5rem 0 1rem;
  }
  .nav.open{display:flex}
  .nav a{padding:.7rem 24px;border-bottom:none}
  .nav .call{margin:.6rem 24px 0;text-align:center;clip-path:none}
  .nav-toggle{display:block}
  .svc-grid,.prod-grid,.core-grid{grid-template-columns:1fr}
  .prod-body ul{columns:1}
  .foot-grid{grid-template-columns:1fr}
}