/* Schrift liegt lokal auf dem Server, keine Verbindung zu Google */
@font-face{
  font-family:"Archivo";
  src:url("schriften/archivo-var.woff2") format("woff2-variations");
  font-weight:400 800;
  font-stretch:75% 125%;
  font-display:swap;
}
:root{
  --gruen:#0E4F45;
  --gruen-tief:#08332D;
  --rot:#C4161C;
  --creme:#F4EEE1;
  --papier:#FFFFFF;
  --tinte:#15201E;
  --grau:#5F6B68;
  --linie:#DDD7C9;
  --spalte:min(1180px,92vw);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--papier);color:var(--tinte);
  font-family:"Archivo",system-ui,"Segoe UI",Arial,sans-serif;
  font-size:1.0625rem;line-height:1.6;font-variation-settings:"wdth" 100;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0 0 .5em;line-height:1.05;font-weight:800;font-variation-settings:"wdth" 112;letter-spacing:-.015em}
h1{font-size:clamp(2.4rem,6.2vw,4.6rem)}
h2{font-size:clamp(1.9rem,3.8vw,2.9rem)}
h3{font-size:1.2rem;font-variation-settings:"wdth" 106}
p{margin:0 0 1em;max-width:64ch}
a{color:inherit}
img{display:block;width:100%;height:auto}
.spalte{width:var(--spalte);margin-inline:auto}

/* Streifenmotiv aus der Lkw-Beschriftung */
.streifen{display:flex;gap:4px;height:11px;width:74px;transform:skewX(-20deg)}
.streifen i{flex:1;display:block}
.streifen i:nth-child(1){background:var(--rot)}
.streifen i:nth-child(2){background:var(--gruen)}
.streifen i:nth-child(3){background:var(--linie)}

/* Kopf */
.kopf{position:sticky;top:0;z-index:50;background:var(--gruen);color:#fff;border-bottom:3px solid var(--rot)}
.kopf .spalte{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:66px}
.marke{text-decoration:none;display:block;padding:.35rem 0}
.marke .logo{display:block;height:23px;width:auto;--logo-front:#fff;--logo-schatten:var(--rot)}
.marke span{color:#fff;opacity:.7;font-weight:400;display:block;font-size:.7rem;letter-spacing:.055em;margin-top:.3rem}
.nav{display:flex;gap:1.35rem;flex-wrap:wrap;align-items:center}
.nav a{text-decoration:none;font-size:.92rem;opacity:.9;padding:.25rem 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a:focus-visible{opacity:1;border-color:var(--rot)}
.tel-kopf{font-weight:700;white-space:nowrap;text-decoration:none}
.nur-menue{display:none}
.menue-schalter{display:none;background:none;border:0;padding:.55rem;margin-right:-.55rem;cursor:pointer}
.menue-schalter span{display:block;width:24px;height:2px;background:#fff;margin:5px 0;transition:transform .18s,opacity .18s}
.menue-schalter[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menue-schalter[aria-expanded="true"] span:nth-child(2){opacity:0}
.menue-schalter[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:860px){
  .kopf .spalte{min-height:54px;gap:.75rem}
  .marke .logo{height:19px}
  .marke span{font-size:.6rem;margin-top:.2rem}
  .tel-kopf{display:none}
  .nur-menue{display:block;font-weight:700}
  .menue-schalter{display:block}
  .js .nav{
    position:absolute;left:0;right:0;top:100%;display:none;flex-direction:column;align-items:stretch;
    gap:0;background:var(--gruen);border-bottom:3px solid var(--rot);padding:.4rem 4vw 1rem;
  }
  .js .nav.offen{display:flex}
  .nav a{font-size:1.05rem;padding:.85rem 0;border-bottom:1px solid rgba(255,255,255,.14)}
  .nav a:last-child{border-bottom:0}
}

/* Bühne */
.buehne{position:relative;background:var(--gruen-tief);color:#fff;isolation:isolate}
.buehne .bild{position:relative}
.buehne img{height:clamp(420px,66vh,640px);object-fit:cover;object-position:74% 62%}
.buehne .schleier{position:absolute;inset:0;background:linear-gradient(97deg,rgba(8,51,45,.97) 0%,rgba(8,51,45,.93) 24%,rgba(8,51,45,.58) 40%,rgba(8,51,45,.12) 53%,rgba(8,51,45,0) 62%)}
.buehne .text{position:absolute;inset:0;display:flex;align-items:center}
.buehne .inhalt{max-width:min(30rem,44%)}
.buehne h1{font-size:clamp(2.2rem,4.6vw,3.5rem);margin-bottom:.4em;text-wrap:balance}
.buehne p{font-size:clamp(1rem,1.7vw,1.14rem);max-width:34ch;color:#E9F0EC}
@media(max-width:860px){
  .buehne img{height:clamp(240px,42vw,330px);object-position:62% 60%}
  .buehne .schleier{background:linear-gradient(to top,rgba(8,51,45,.6),rgba(8,51,45,0) 55%)}
  .buehne .text{position:static;padding:2rem 0 2.4rem}
  .buehne .inhalt{max-width:none}
}
.knoepfe{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.4rem}
.knopf{display:inline-block;text-decoration:none;font-weight:700;padding:.78rem 1.5rem;background:var(--rot);color:#fff;border:2px solid var(--rot)}
.knopf.hell{background:transparent;border-color:rgba(255,255,255,.55)}
.knopf:hover{background:#A81217;border-color:#A81217}
.knopf.hell:hover{background:rgba(255,255,255,.14);border-color:#fff}

/* Fakten */
.fakten{background:var(--creme);border-bottom:1px solid var(--linie)}
.fakten ul{list-style:none;margin:0;padding:1.6rem 0;display:grid;gap:1.2rem;grid-template-columns:repeat(4,1fr)}
.fakten b{display:block;font-size:1.75rem;font-weight:800;font-variation-settings:"wdth" 116;line-height:1}
.fakten span{font-size:.9rem;color:var(--grau)}
@media(max-width:700px){.fakten ul{grid-template-columns:repeat(2,1fr)}}

section{padding:clamp(3.2rem,7vw,5.4rem) 0}
.kopfzeile{margin-bottom:2.4rem}
.kopfzeile .streifen{margin-bottom:1rem}
.kopfzeile p{color:var(--grau);font-size:1.08rem}

/* Ladungen */
.ladungen{display:grid;gap:2.2rem}
.ladung{display:grid;grid-template-columns:1.15fr 1fr;gap:0;align-items:stretch;border-top:1px solid var(--linie);padding-top:2.2rem}
.ladung .bild{position:relative}
.ladung img{aspect-ratio:3/2;object-fit:cover}
.ladung .inhalt{padding:.2rem 0 0 2.6rem}
.ladung:nth-child(even) .bild{order:2}
.ladung:nth-child(even) .inhalt{padding:.2rem 2.6rem 0 0}
.ladung h3{font-size:clamp(1.5rem,2.6vw,2rem);font-weight:800;font-variation-settings:"wdth" 112}
.ladung ul{margin:.6rem 0 0;padding-left:1.1rem;color:var(--grau)}
.ladung li{margin-bottom:.2rem}
@media(max-width:820px){
  .ladung{grid-template-columns:1fr}
  .ladung .inhalt,.ladung:nth-child(even) .inhalt{padding:1.2rem 0 0}
  .ladung:nth-child(even) .bild{order:0}
}

/* Fuhrpark */
.fuhrpark{background:var(--gruen);color:#fff}
.fuhrpark .kopfzeile p{color:#CFE0DA}
.fuhrpark .streifen i:nth-child(3){background:#fff}
.liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1px;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.22)}
.liste div{background:var(--gruen);padding:1.4rem}
.liste b{display:block;font-size:2.1rem;font-weight:800;font-variation-settings:"wdth" 116;line-height:1;margin-bottom:.25rem}
.liste span{font-size:.94rem;color:#CFE0DA}
.ausstattung{margin-top:2rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.6rem}
.ausstattung p{color:#DCE8E4;margin:0}
.ausstattung h3{color:#fff;margin-bottom:.35em}

/* Historie */
.zeit{border-left:2px solid var(--linie);margin-left:.4rem}
.zeit li{list-style:none;position:relative;padding:0 0 2.1rem 2.2rem}
.zeit li::before{content:"";position:absolute;left:-7px;top:.55rem;width:12px;height:12px;background:var(--rot)}
.zeit .jahr{display:block;font-weight:800;font-variation-settings:"wdth" 120;font-size:1.45rem;line-height:1;margin-bottom:.3rem}
.zeit p{margin:0;color:var(--grau)}
.zeit ul{margin:.4rem 0 0;padding-left:1.1rem;color:var(--grau)}

/* Führung */
.fuehrung{background:var(--creme)}
.fuehrung .raster{display:grid;grid-template-columns:1fr 1.05fr;gap:3rem;align-items:center}
.fuehrung figcaption{font-size:.9rem;color:var(--grau);padding-top:.6rem}
.fuehrung figure{margin:0}
@media(max-width:820px){.fuehrung .raster{grid-template-columns:1fr;gap:1.8rem}}

/* Kontakt */
.kontakt{background:var(--gruen-tief);color:#fff}
.kontakt .streifen i:nth-child(3){background:#fff}
.kontakt .raster{display:grid;grid-template-columns:1fr 1fr;gap:3rem}
.kontakt a{color:#fff}
.kontakt .zeile{display:flex;gap:1rem;padding:1rem 0;border-bottom:1px solid rgba(255,255,255,.18)}
.kontakt .zeile span:first-child{width:7.5rem;flex:none;color:#9FBDB5;font-size:.92rem;padding-top:.15rem}
.kontakt .zeile b{font-size:1.2rem;font-weight:700}
.kontakt address{font-style:normal;font-size:1.2rem;line-height:1.5}
@media(max-width:820px){.kontakt .raster{grid-template-columns:1fr;gap:2rem}}

/* Recht */
.recht{background:var(--creme);font-size:.95rem}
.recht .raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2rem}
.recht h2{font-size:1.5rem}
.recht h3{font-size:1rem}
.recht p{color:var(--grau);max-width:52ch}
.fuss{background:var(--gruen-tief);color:#B9CFC9;font-size:.88rem;padding:1.3rem 0}
.fuss .spalte{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.fuss a{color:#fff}
:focus-visible{outline:3px solid var(--rot);outline-offset:3px}

/* Unterseiten (Datenschutz) */
.text-seite{padding:clamp(2.6rem,6vw,4.4rem) 0 4rem}
.text-seite .spalte{max-width:min(760px,92vw)}
.text-seite h1{font-size:clamp(2rem,4vw,2.8rem);margin-bottom:.6em}
.text-seite h2{font-size:1.35rem;margin-top:2.2rem}
.text-seite p,.text-seite li{color:var(--grau);max-width:68ch}
.text-seite ul{padding-left:1.15rem}
.text-seite .stand{font-size:.9rem;color:var(--grau)}
.zurueck{display:inline-block;margin-bottom:2rem;font-weight:700;text-decoration:none;border-bottom:2px solid var(--rot);padding-bottom:2px}

/* Betriebshof-Panorama */
.hof{padding-bottom:0}
.pano{margin:0}
.pano-rahmen{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;background:var(--gruen-tief)}
.pano img{display:block;width:100%;height:auto}
.pano figcaption{display:none;width:var(--spalte);margin:.7rem auto 0;font-size:.85rem;color:var(--grau)}
@media(max-width:860px){
  .pano img{width:auto;max-width:none;height:min(46vh,300px)}
  .pano figcaption{display:block}
}

/* Impressionen */
.impressionen{background:var(--creme)}
.impressionen figure{margin:0}
.impressionen figcaption{font-size:.85rem;color:var(--grau);padding-top:.5rem}
.impressionen .breit img{aspect-ratio:2/1;object-fit:cover}
.impressionen .paar{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-top:1.4rem}
.impressionen .paar img{aspect-ratio:3/2;object-fit:cover}
@media(max-width:700px){
  .impressionen .paar{grid-template-columns:1fr}
  .impressionen .breit img{aspect-ratio:3/2}
}