@charset "UTF-8";
/* ===========================================================================
   anhaengervermietung-ldk.de – Kühlanhänger der Fromke Systemverkehre GmbH
   Theme: statisches HTML/CSS/JS. Keine externen Aufrufe.
   Reihenfolge: Tokens · Basis · Typo · Layout · Bausteine · Abschnitte · Umbruch
   =========================================================================== */

/* --- 1 Tokens ------------------------------------------------------------ */

:root {
  /* Akzentfarbe der Marke */
  --rot:        #e30613;
  --rot-tief:   #b1040f;
  --rot-hell:   #ff3b47;   /* nur auf dunklem Grund, wegen Kontrast */
  --grau:       #707070;

  /* Kühlraum: Anthrazit mit kaltem Stich */
  --nacht:      #14181b;
  --nacht-2:    #1d2429;
  --nacht-3:    #2b343a;

  /* Kaltes Weiß, Eis, Stahl */
  --frost:      #eef2f4;
  --eis:        #cfdde2;
  --stahl:      #8e9ba1;
  --weiss:      #ffffff;

  --text:       #171b1e;
  --text-leise: #586266;

  --linie:      rgba(23, 27, 30, .14);
  --linie-hell: rgba(255, 255, 255, .16);

  --schrift-titel: "Saira Condensed", "Arial Narrow", Arial, sans-serif;
  --schrift-text:  "Fira Sans", "Segoe UI", Arial, sans-serif;
  --schrift-daten: "Fira Mono", Consolas, "Courier New", monospace;

  /* Logobreite im Kopf. Das Logo ragt darunter heraus; die Buehne rechnet
     ihren oberen Abstand daraus -- beides muss zusammen bleiben. */
  --logo-breite: 200px;

  --breite: 1440px;
  --rand: clamp(20px, 5vw, 60px);
  /* Spaltbreite im 12er Raster */
  --spalt: clamp(26px, 4vw, 60px);
  --abstand: clamp(60px, 8.5vw, 128px);
}

/* --- 2 Basis ------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

body {
  margin: 0;
  background: var(--weiss);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: 1.0625rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }
img { height: auto; display: block; }

a { color: var(--rot); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--rot-tief); }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--rot); outline-offset: 3px; }
.auf-dunkel :focus-visible { outline-color: var(--rot-hell); }

.springmarke {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--rot);
  color: #fff;
  padding: 14px 22px;
  font-family: var(--schrift-titel);
  text-transform: uppercase;
  letter-spacing: .06em;
  text-decoration: none;
}
.springmarke:focus { left: 0; color: #fff; }

.nur-vorlesen {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* --- 3 Typografie -------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--schrift-titel);
  font-weight: 800;
  text-transform: uppercase;
  margin: 0;
  letter-spacing: -.005em;
  line-height: .92;
  text-wrap: balance;
}

.titel-gross {
  font-size: clamp(3rem, 9vw, 7.4rem);
  line-height: .84;
  letter-spacing: -.015em;
}

.titel-abschnitt {
  font-size: clamp(2.1rem, 4.8vw, 3.9rem);
  line-height: .9;
}

.titel-gruppe {
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: 1.02rem;
  text-transform: uppercase;
  letter-spacing: .11em;
  margin: 0;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.vorlauf {
  font-size: clamp(1.09rem, 1.5vw, 1.3rem);
  line-height: 1.55;
  color: var(--text-leise);
}
.auf-dunkel .vorlauf { color: var(--eis); }

.daten {
  font-family: var(--schrift-daten);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

.klein { font-size: .875rem; line-height: 1.5; color: var(--text-leise); }
.auf-dunkel .klein { color: var(--stahl); }

/* Ausrichtung – auch aus dem Editor und aus Widgets heraus verwendbar */
.rechts { text-align: right; }
.mitte  { text-align: center; }

/* --- 4 Layout ------------------------------------------------------------ */

.hof {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.band { padding-block: var(--abstand); }
.band-schmal { padding-block: clamp(44px, 5vw, 76px); }

/* Grundlage aller Aufteilungen ist ein 12er Raster. Ein Bereich bekommt
   .raster12, seine Kinder eine .spalte-N – zusammen immer 12.
   Auch im Editor verwendbar:
     <div class="raster12"><div class="spalte-5">…</div><div class="spalte-7">…</div></div> */
.raster12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--spalt);
}

.spalte-1  { grid-column: span 1; }
.spalte-2  { grid-column: span 2; }
.spalte-3  { grid-column: span 3; }
.spalte-4  { grid-column: span 4; }
.spalte-5  { grid-column: span 5; }
.spalte-6  { grid-column: span 6; }
.spalte-7  { grid-column: span 7; }
.spalte-8  { grid-column: span 8; }
.spalte-9  { grid-column: span 9; }
.spalte-10 { grid-column: span 10; }
.spalte-11 { grid-column: span 11; }
.spalte-12 { grid-column: span 12; }

/* Einspaltig ab hier – jeder Bereich nimmt die ganze Breite */
@media (max-width: 900px) {
  .raster12 > [class*="spalte-"] { grid-column: 1 / -1; }
}

.auf-dunkel { background: var(--nacht); color: var(--frost); }
.auf-frost  { background: var(--frost); }

.blech {
  background-image:
    repeating-linear-gradient(58deg,  rgba(255,255,255,.024) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(-58deg, rgba(255,255,255,.015) 0 1px, transparent 1px 11px);
}

.abschnitt-kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(18px, 4vw, 64px);
  align-items: end;
  margin-bottom: clamp(30px, 4vw, 56px);
}

/* --- 5 Knöpfe ------------------------------------------------------------ */

.knopf {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 15px 26px;
  border: 2px solid transparent;
  border-radius: 0;
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: 1.06rem;
  text-transform: uppercase;
  letter-spacing: .045em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
}
.knopf:active { transform: translateY(1px); }
.knopf i { font-size: .92em; }

.knopf-rot { background: var(--rot); border-color: var(--rot); color: #fff; }
.knopf-rot:hover { background: var(--rot-tief); border-color: var(--rot-tief); color: #fff; }

.knopf-linie { background: transparent; border-color: var(--linie-hell); color: var(--frost); }
.knopf-linie:hover { border-color: var(--frost); color: var(--frost); background: rgba(255,255,255,.07); }

.knopf-dunkel { background: transparent; border-color: var(--linie); color: var(--text); }
.knopf-dunkel:hover { border-color: var(--text); color: var(--text); }

/* --- 6 Kopf / Navigation ------------------------------------------------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--weiss);
  /* Die Unterkante ist die Schiene, auf der die Marke läuft */
  border-bottom: 1px solid var(--linie);
  transition: box-shadow .2s ease;
}
.kopf.gescrollt { box-shadow: 0 6px 22px rgba(23,27,30,.07); }

.kopf__reihe {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 84px;
}

/* Die Marke haengt ueber die Kopfkante hinaus: das weisse Feld des Logos deckt
   sich mit dem Kopf, der schwarze Block liegt auf der Buehne. Die Hoehe ist
   genau 3/8 der Breite -- das ist im Logo die Kante zwischen beiden Feldern. */
.marke {
  position: relative;
  align-self: flex-end;
  flex: 0 0 auto;
  width: var(--logo-breite);
  height: calc(var(--logo-breite) * .375);   /* weisses Feld = 3/8 der Breite */
  text-decoration: none;
  transition: width .22s ease, height .22s ease, margin-bottom .22s ease;
}
.marke img { position: absolute; top: 1px; left: 0; width: 100%; }

/* Beim Scrollen wird abgeschnitten -- sonst haengt der Block ueber dem Inhalt. */
.kopf.gescrollt .marke {
  width:  calc(var(--logo-breite) * .76);
  height: calc(var(--logo-breite) * .285);   /* .76 x .375 */
  margin-bottom: calc(var(--logo-breite) * .065);
  overflow: hidden;
}

.navi { display: flex; align-items: center; gap: clamp(16px, 2.1vw, 32px); }

.navi__liste {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.1vw, 32px);
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Trennstrich zwischen den Sprungmarken und der Rufnummer */
.navi__liste::after {
  content: "";
  width: 1px;
  height: 22px;
  background: var(--linie);
}

.navi__liste > li { position: relative; white-space: nowrap; }

/* Punkte mit Untermenü bekommen einen kleinen Winkel */
.navi__liste .menu-item-has-children > .navi__link::after {
  content: "";
  display: inline-block;
  width: .42em;
  height: .42em;
  margin-left: .5em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-.15em) rotate(45deg);
  transition: transform .18s ease;
}
.navi__liste .menu-item-has-children:hover > .navi__link::after,
.navi__liste .menu-item-has-children:focus-within > .navi__link::after {
  transform: translateY(.05em) rotate(-135deg);
}

/* Das Aufklappfeld hängt an der Unterkante des Kopfes */
.navi__unter {
  position: absolute;
  top: 100%;
  left: -18px;
  z-index: 120;
  margin: 0;
  padding: 8px 0;
  min-width: 240px;
  list-style: none;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-top: 2px solid var(--rot);
  box-shadow: 0 14px 30px rgba(23,27,30,.13);

  /* Nicht display:none – so bleibt die Bewegung weich und der Inhalt
     für die Tastatur erreichbar, sobald er aufgeht. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}
.navi__liste > li:hover > .navi__unter,
.navi__liste > li:focus-within > .navi__unter {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.navi__unter li { white-space: nowrap; }

.navi__unterlink {
  display: block;
  padding: 9px 18px;
  font-family: var(--schrift-titel);
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .045em;
  color: var(--text);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}
.navi__unterlink:hover,
.navi__unterlink:focus-visible {
  color: var(--rot);
  border-left-color: var(--rot);
  background: var(--frost);
}
.navi__unter .current-menu-item > .navi__unterlink {
  color: var(--rot);
  border-left-color: var(--rot);
}

.navi__link {
  display: inline-block;
  padding: 6px 0;
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: 1.08rem;
  text-transform: uppercase;
  letter-spacing: .045em;
  color: var(--text);
  text-decoration: none;
  transition: color .18s ease;
}
.navi__link:hover,
.navi__link:focus-visible { color: var(--rot); }

/* Die Marke sitzt auf der Schiene und wandert zwischen den Punkten.
   Die beiden Endstriche sind der Bemaßung am Anhänger abgeschaut. */
.navi__marke {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: var(--marke-breite, 0px);
  transform: translateX(var(--marke-x, 0px));
  background: var(--rot);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.navi__marke.sichtbar {
  opacity: 1;
  transition: transform .3s cubic-bezier(.22,.61,.36,1),
              width .3s cubic-bezier(.22,.61,.36,1),
              opacity .18s ease;
}
.navi__marke::before,
.navi__marke::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 2px;
  height: 9px;
  background: var(--rot);
}
.navi__marke::before { left: 0; }
.navi__marke::after  { right: 0; }

.kopf__tel {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--rot);
  color: #fff;
  padding: 13px 22px;
  font-family: var(--schrift-daten);
  font-weight: 500;
  font-size: .95rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .18s ease;
}
.kopf__tel:hover { background: var(--rot-tief); color: #fff; }

.burger {
  display: none;
  width: 50px; height: 50px;
  border: 1px solid var(--linie);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.burger:hover { border-color: var(--text); }
.burger[aria-expanded="true"] {
  background: var(--rot);
  border-color: var(--rot);
  color: #fff;
}

.klappnavi {
  display: none;
  border-top: 1px solid var(--linie);
  background: var(--weiss);
  padding: 8px var(--rand) 28px;
}
.klappnavi__liste { list-style: none; margin: 0; padding: 0; }
.klappnavi__liste > li { border-bottom: 1px solid var(--linie); }
.klappnavi__liste a {
  display: block;
  padding: 15px 0;
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: 1.45rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text);
  text-decoration: none;
}
.klappnavi__liste a:hover { color: var(--rot); }

/* Untermenü: eingerückt und dauerhaft offen – im Klappmenü ist Platz genug.
   Das Aufklappfeld des Kopfes wird dafür vollständig zurückgesetzt. */
.klappnavi__liste .navi__unter {
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: none;
  min-width: 0;
  background: none;
  border: 0;
  box-shadow: none;

  list-style: none;
  margin: 0 0 12px;
  padding: 0 0 0 18px;
  border-left: 2px solid var(--linie);
}
.klappnavi__liste .navi__unter a {
  padding: 10px 0;
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--text-leise);
}
.klappnavi__liste .navi__unter a:hover { color: var(--rot); }
.klappnavi .knopf { margin-top: 22px; width: 100%; justify-content: center; }

/* --- 7 Bühne ------------------------------------------------------------- */

/* Der Ueberstand der Marke misst 0.41177 x Logobreite. Dazu 56px Luft,
   damit das Logo Raum hat. Beides haengt an --logo-breite. */
.buehne {
  position: relative;
  padding-top: calc(var(--logo-breite) * .41177 + 56px);
  overflow: hidden;
}

.buehne__raster {
  display: grid;
  grid-template-columns: minmax(0, 4.8fr) minmax(0, 6.4fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding-bottom: clamp(36px, 5vw, 68px);
}

.buehne__titel { margin-bottom: 20px; }
.buehne__titel .zeile-1 { display: block; color: var(--weiss); }
.buehne__titel .zeile-2 {
  display: block;
  margin-top: 14px;
  font-size: clamp(1rem, 1.85vw, 1.5rem);
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1.2;
  color: var(--stahl);
}
.buehne__titel .ort { color: var(--rot-hell); }

.buehne__aktionen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.buehne__abholung { margin-top: 22px; display: flex; align-items: baseline; gap: 10px; }
.buehne__abholung i { color: var(--rot-hell); }

/* Freigestelltes Foto des Anhängers.
   75 % der Spalte: bleibt unter der Originalbreite von 650 px, wird also
   verkleinert statt hochskaliert. Rechtsbündig, damit die Deichsel Abstand
   zur Überschrift behält. */
.riss { position: relative; }
.riss__bild { width: 75%; margin-inline-start: auto; }

/* Hinweis unter dem Foto */
/* Hinweisleiste unter dem Foto, über die volle Spaltenbreite */
.riss__leiste {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-top: 10px;
  padding-top: 22px;
  border-top: 1px solid var(--linie-hell);
}
/* Das Symbol bekommt ein eigenes Feld, wie die Kästen der Eckdaten */
.riss__leiste i {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--linie-hell);
  font-size: 1.05rem;
  color: var(--rot-hell);
  transition: border-color .2s ease;
}
.riss__leiste span { flex: 1; min-width: 0; padding-top: 3px; }

/* Eckdaten-Leiste */
.eckdaten {
  border-top: 1px solid var(--linie-hell);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.eckdaten__feld { padding: 24px 22px 26px; border-left: 1px solid var(--linie-hell); }
.eckdaten__feld:first-child { border-left: 0; padding-left: 0; }
.eckdaten__wert {
  display: block;
  font-family: var(--schrift-daten);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.2rem, 1.9vw, 1.62rem);
  line-height: 1.15;
  color: var(--weiss);
}
.eckdaten__name {
  display: block;
  margin-top: 7px;
  font-family: var(--schrift-daten);
  font-size: .71rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--stahl);
}

/* --- 7b Titelband der Unterseiten ---------------------------------------- */

/* Gleiche Rechnung wie bei der Bühne: Der Überstand der Marke misst
   0.41177 x Logobreite, dazu etwas Luft. Der dunkle Grund fängt das untere,
   transparente Feld des Logos auf. */
.seitenkopf {
  position: relative;
  padding-top: calc(var(--logo-breite) * .41177 + 40px);
  padding-bottom: clamp(26px, 3.4vw, 46px);
  overflow: hidden;
}

.seitenkopf__titel { margin: 0; }

/* Der Abschnitt darunter braucht oben weniger Luft – das Band hat schon
   welche mitgebracht. */
.seitenkopf + .band { padding-top: clamp(34px, 4vw, 62px); }

/* --- 8 Kühlgut: Skala + Liste -------------------------------------------- */

.kuehlgut__raster {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: stretch;
}

.skala { position: relative; min-height: 380px; }
.skala__rohr {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 26px;
  background: var(--eis);
  border: 1px solid var(--linie);
}
/* Der dunkle Teil zeigt die Kälte: je tiefer die Einstellung, desto voller */
.skala__kalt {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 100%;
  background: var(--nacht-2);
  transition: height .45s cubic-bezier(.22,.61,.36,1);
}
.skala__striche {
  position: absolute;
  left: 26px; top: 0; bottom: 0;
  width: 100%;
}
.skala__strich {
  position: absolute;
  left: 0;
  width: 14px;
  height: 1px;
  background: var(--linie);
  transform: translateY(-.5px);
}
.skala__strich span {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--schrift-daten);
  font-size: .74rem;
  color: var(--text-leise);
  white-space: nowrap;
}
.skala__marke {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--rot);
  transition: bottom .45s cubic-bezier(.22,.61,.36,1);
}
.skala__marke::before {
  content: "";
  position: absolute;
  left: -5px; top: -6px;
  width: 14px; height: 14px;
  background: var(--rot);
}
.skala__wert {
  position: absolute;
  right: 0;
  bottom: 7px;
  font-family: var(--schrift-daten);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-size: 1.45rem;
  color: var(--rot);
  white-space: nowrap;
}

.kuehlgut__liste { border-top: 1px solid var(--linie); }

.kuehlgut__zeile {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 18px 14px 18px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--linie);
  text-align: left;
  cursor: pointer;
  transition: background-color .18s ease, padding-left .18s ease;
}
.kuehlgut__zeile:hover { background: rgba(23,27,30,.035); padding-left: 12px; }
.kuehlgut__zeile[aria-pressed="true"] {
  background: var(--nacht);
  color: var(--frost);
  padding-left: 12px;
}
.kuehlgut__symbol { font-size: 1.2rem; color: var(--rot); text-align: center; }
.kuehlgut__zeile[aria-pressed="true"] .kuehlgut__symbol { color: var(--rot-hell); }
.kuehlgut__name {
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: 1.28rem;
  text-transform: uppercase;
  letter-spacing: .035em;
  line-height: 1.15;
}
.kuehlgut__grad {
  font-family: var(--schrift-daten);
  font-variant-numeric: tabular-nums;
  font-size: 1.02rem;
  color: var(--text-leise);
  white-space: nowrap;
}
.kuehlgut__zeile[aria-pressed="true"] .kuehlgut__grad { color: var(--eis); }

.kuehlgut__hinweis {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 26px;
  padding-left: 14px;
  border-left: 3px solid var(--rot);
  min-height: 3em;
}
.kuehlgut__hinweis i { color: var(--rot); }

/* Abgrenzung: was der Anhänger nicht kann */
.kuehlgut__grenze {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 18px;
  padding: 14px 16px;
  background: rgba(23, 27, 30, .04);
  border-left: 3px solid var(--stahl);
  color: var(--text-leise);
}
.kuehlgut__grenze i { color: var(--grau); }

/* --- 9 Datenblatt -------------------------------------------------------- */

.datenblatt {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 64px);
}

.datenblatt__liste { margin: 18px 0 0; }
.datenblatt__zeile {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid var(--linie);
}
.datenblatt__zeile:first-child { border-top: 1px solid var(--linie); }
.datenblatt__was { color: var(--text-leise); font-size: .96rem; }
.datenblatt__wert {
  font-family: var(--schrift-daten);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-size: .96rem;
}

.datenblatt__fuss {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 26px;
  margin-top: 14px;
  padding-top: 22px;
  border-top: 2px solid var(--text);
}

/* --- 9b Fuhrpark: die Anhänger auf einem gemeinsamen Maßstab ------------- */

/* Das Haus-Motiv dieser Seite ist die Bemaßung – die Marke unter der
   Navigation, die Temperaturskala, die Wochentakte bei den Preisen. Der
   Fuhrpark führt es weiter: fünf Balken auf einem Meter-Lineal, sortiert
   nach Ladeflächenlänge. Der Anteil steht als --anteil am Balken. */

.flotte { border-top: 2px solid var(--text); }

/* Lineal über der Liste, Teilung in Metern */
.flotte__lineal {
  display: none;                      /* erst in der dreispaltigen Ansicht */
  grid-template-columns: var(--flotte-name) minmax(0, 1fr) var(--flotte-daten);
  gap: var(--spalt);
  padding-top: 10px;
}
.flotte__teilung {
  position: relative;
  grid-column: 2;
  height: 20px;
  border-bottom: 1px solid var(--linie);
}
.flotte__strich {
  position: absolute;
  bottom: 0;
  left: var(--bei);
  width: 1px;
  height: 7px;
  background: var(--linie);
}
.flotte__strich span {
  position: absolute;
  bottom: 9px;
  left: 0;
  transform: translateX(-50%);
  /* Die Null steht am Anfang des Lineals und würde zur Hälfte
     außerhalb liegen – sie bleibt deshalb linksbündig. */
  font-family: var(--schrift-daten);
  font-size: .72rem;
  color: var(--text-leise);
  white-space: nowrap;
}
.flotte__strich:first-child span { transform: none; }

.flotte__zeile {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px var(--spalt);
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--linie);
}

.flotte__name {
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: clamp(1.2rem, 1.9vw, 1.5rem);
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.05;
  color: var(--text);
  text-decoration: none;
}
.flotte__name:hover { color: var(--rot); }
.flotte__bauart {
  display: block;
  margin-top: 5px;
  font-family: var(--schrift-text);
  font-weight: 400;
  font-size: .84rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-leise);
}

/* Der Balken zeigt die Ladeflächenlänge im Verhältnis zum längsten
   Anhänger. Die Endstriche sind der Bemaßung an der Zeichnung abgeschaut. */
.flotte__mass { position: relative; height: 26px; }
.flotte__balken {
  position: absolute;
  top: 50%;
  left: 0;
  width: var(--anteil, 100%);
  height: 12px;
  transform: translateY(-50%);
  background: var(--nacht-3);
  transition: background-color .18s ease;
}
.flotte__balken::before,
.flotte__balken::after {
  content: "";
  position: absolute;
  top: -6px;
  width: 2px;
  height: 24px;
  background: var(--nacht);
}
.flotte__balken::before { left: 0; }
.flotte__balken::after  { right: 0; }

.flotte__zeile:hover .flotte__balken { background: var(--rot); }

/* Anhänger, dessen Maß noch nicht feststeht */
.flotte__offen {
  position: absolute;
  top: 50%;
  left: 0;
  width: 40%;
  height: 12px;
  transform: translateY(-50%);
  border: 1px dashed var(--stahl);
}

.flotte__daten {
  font-family: var(--schrift-daten);
  font-size: .82rem;
  line-height: 1.75;
  color: var(--text-leise);
}
.flotte__daten b { color: var(--text); font-weight: 500; }

/* Der einzige Anhänger ohne BE – die Information, nach der am meisten
   gefragt wird, bekommt deshalb die Marke. */
.flotte__klasse {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 9px;
  background: var(--rot);
  color: #fff;
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

@media (min-width: 901px) {
  :root { --flotte-name: 260px; --flotte-daten: 240px; }
  .flotte__lineal { display: grid; }
  .flotte__zeile {
    grid-template-columns: var(--flotte-name) minmax(0, 1fr) var(--flotte-daten);
  }
}

/* --- 9c Fotoband --------------------------------------------------------- */

.fotoband img {
  width: 100%;
  height: clamp(240px, 42vw, 560px);
  object-fit: cover;
  object-position: center 58%;
}
.fotoband__zeile { padding-top: 14px; font-size: .84rem; }

/* --- 10 Ablauf ----------------------------------------------------------- */

.ablauf {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--linie-hell);
}
.ablauf__schritt {
  padding: 30px 26px 8px;
  border-left: 1px solid var(--linie-hell);
}
.ablauf__schritt:first-child { border-left: 0; padding-left: 0; }
.ablauf__zahl {
  display: block;
  font-family: var(--schrift-titel);
  font-weight: 800;
  font-size: 3.4rem;
  line-height: 1;
  color: var(--rot-hell);
  margin-bottom: 12px;
}
.ablauf__titel {
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: 1.32rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 0 0 10px;
  color: var(--weiss);
}
.ablauf__text { color: var(--eis); font-size: .98rem; }

/* --- 11 Preise ----------------------------------------------------------- */

/* Heller Streifen zwischen zwei dunklen Bändern. Das Rot liegt nicht mehr
   flächig darunter, sondern nur in der Skala und im Knopf. */
.preise { background: var(--frost); color: var(--text); }

.preise__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px 32px;
  padding-bottom: clamp(28px, 3.6vw, 48px);
}
.preise__mwst {
  margin: 0;
  font-family: var(--schrift-daten);
  font-size: .72rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--text-leise);
}

.preise__leiter {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--linie);
}
.preise__stufe {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: clamp(26px, 3.2vw, 42px);
  padding-left: clamp(20px, 3vw, 44px);
  border-left: 1px solid var(--linie);
}
.preise__stufe:first-child { border-left: 0; padding-left: 0; }

/* Wochenskala: sieben Takte, gefüllt so weit der Satz reicht.
   Gleiche Bauart wie die Temperaturskala – heller Kanal, farbige Füllung. */
.preise__skala {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  width: 176px;
  gap: 6px;
  margin-bottom: clamp(18px, 2.2vw, 26px);
}
.preise__takt {
  height: 38px;
  background: var(--eis);
  border: 1px solid var(--linie);
}
/* Der gefüllte Zustand steht fest im Stylesheet. Die Bewegung legt sich nur
   davor, damit die Skala auch ohne Javascript richtig abliest. */
.preise__takt--voll { background: var(--rot); border-color: var(--rot); }
.preise__stufe.sichtbar .preise__takt--voll {
  animation: preise-takt .42s cubic-bezier(.22,.61,.36,1) both;
  animation-delay: calc(240ms + var(--stufe, 0ms) + var(--takt, 0) * 50ms);
}
@keyframes preise-takt {
  from { background-color: var(--eis); border-color: var(--linie); }
}
/* Die Skalen laufen nacheinander voll, von links nach rechts */
.preise__leiter > .preise__stufe:nth-child(2) { --stufe: 170ms; }
.preise__leiter > .preise__stufe:nth-child(3) { --stufe: 340ms; }
.preise__takt:nth-child(2) { --takt: 1; }
.preise__takt:nth-child(3) { --takt: 2; }
.preise__takt:nth-child(4) { --takt: 3; }
.preise__takt:nth-child(5) { --takt: 4; }
.preise__takt:nth-child(6) { --takt: 5; }
.preise__takt:nth-child(7) { --takt: 6; }

.preise__was {
  display: block;
  font-family: var(--schrift-daten);
  font-weight: 500;
  font-size: .78rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--text-leise);
}

/* Die Zahl ist hier die Überschrift, deshalb die Titelschrift und nicht
   die Datenschrift wie sonst bei Werten. */
.preise__betrag {
  margin: 0;
  margin-top: auto;
  padding-top: clamp(16px, 2.4vw, 30px);
  font-family: var(--schrift-titel);
  font-weight: 800;
  font-size: clamp(3.1rem, 7.4vw, 6rem);
  line-height: .82;
  letter-spacing: -.02em;
  color: var(--nacht);
}
.preise__ab {
  font-family: var(--schrift-daten);
  font-weight: 500;
  font-size: .2em;
  letter-spacing: .18em;
  text-transform: uppercase;
  vertical-align: .78em;
  margin-right: .26em;
  color: var(--text-leise);
}
.preise__waehrung {
  font-weight: 700;
  font-size: .42em;
  margin-left: .1em;
  color: var(--text-leise);
}

.preise__fuss {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: clamp(20px, 3vw, 48px);
  margin-top: clamp(30px, 4vw, 56px);
  padding-top: 24px;
  border-top: 1px solid var(--linie);
}
.preise__kleingedrucktes {
  margin: 0;
  color: var(--text-leise);
  font-size: .9rem;
}

/* --- 12 Anfrage / Formular ----------------------------------------------- */

.anfrage__raster {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4.4fr);
  gap: clamp(30px, 5vw, 78px);
  align-items: start;
}

.feldpaar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.feld { margin-bottom: 18px; }
.feld label {
  display: block;
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: .92rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 7px;
}
.feld .pflicht { color: var(--rot); }

.feld input[type="text"],
.feld input[type="tel"],
.feld input[type="email"],
.feld input[type="date"],
.feld select,
.feld textarea {
  width: 100%;
  padding: 13px 14px;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: 0;
  font-size: 1rem;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.feld textarea { min-height: 132px; resize: vertical; }
.feld ::placeholder { color: #6b7477; opacity: 1; }
.feld input:hover, .feld select:hover, .feld textarea:hover { border-color: var(--grau); }
.feld input:focus, .feld select:focus, .feld textarea:focus {
  border-color: var(--rot);
  outline: none;
  box-shadow: inset 0 0 0 1px var(--rot);
}
.feld.fehlerhaft input,
.feld.fehlerhaft select,
.feld.fehlerhaft textarea { border-color: var(--rot); background: #fff5f5; }

.feld__fehler {
  display: none;
  margin-top: 6px;
  font-size: .86rem;
  color: var(--rot-tief);
}
.feld.fehlerhaft .feld__fehler { display: block; }

.zustimmung {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin: 8px 0 22px;
}
.zustimmung input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--rot); }
.zustimmung.fehlerhaft input { outline: 2px solid var(--rot); outline-offset: 2px; }
.zustimmung label {
  font-family: var(--schrift-text);
  font-weight: 400;
  font-size: .9rem;
  line-height: 1.5;
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
}

.formular__note { margin-top: 14px; }

.formular__meldung {
  display: none;
  margin-top: 20px;
  padding: 18px 20px;
  border-left: 4px solid var(--rot);
  background: var(--frost);
}
.formular__meldung.sichtbar { display: block; }

.kontaktblock { border-top: 2px solid var(--text); padding-top: 22px; }
.kontaktzeile {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--linie);
  align-items: start;
}
.kontaktzeile i { color: var(--rot); margin-top: 5px; }
.kontaktzeile a { text-decoration: none; }
.kontaktzeile a:hover { text-decoration: underline; }
.kontaktzeile__name {
  display: block;
  font-family: var(--schrift-daten);
  font-size: .7rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-leise);
  margin-bottom: 3px;
}

/* --- 13 Fuß -------------------------------------------------------------- */

.fuss { background: var(--nacht); color: var(--stahl); }
.fuss img { width: 150px; margin-bottom: 18px; }
/* Raster und Spaltbreite kommen aus .raster12; hier nur, was den Fuß angeht.
   Aufteilung: 5 Spalten links, 7 rechts – siehe footer.php. */
.fuss__reihe {
  padding-block: clamp(44px, 6vw, 72px);
  align-items: start;
}
.fuss a { color: var(--frost); text-decoration: none; }
.fuss a:hover { color: var(--weiss); text-decoration: underline; }

.fuss__navi {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}
/* Zusammengesetzte Punkte wie „Cookie-Hinweise“ dürfen nicht am Bindestrich
   aufbrechen. Wird der Platz eng, rutscht der ganze Punkt in die nächste Zeile. */
.fuss__navi li { white-space: nowrap; }
.fuss__navi a {
  font-family: var(--schrift-titel);
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  /* Die Sperrung setzt auch hinter den letzten Buchstaben noch Luft.
     Die wird hier zurückgenommen, sonst steht die Navigation rechts
     um diesen Rest neben der Zeile darunter. */
  margin-right: -.06em;
}

/* Rechte Fußspalte: Navigation und Zeile darunter enden auf einer Kante. */
.fuss__reihe > :last-child { text-align: right; }
.fuss__navi { justify-content: flex-end; }
.fuss__unten {
  border-top: 1px solid var(--linie-hell);
  padding-block: 20px 26px;
  font-size: .84rem;
}

/* --- 14 Innenseiten ------------------------------------------------------ */

.textseite h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin-bottom: 28px; }
.textseite > :first-child { margin-top: 0; }
.textseite > h2:first-child { border-top: 0; padding-top: 0; }
.textseite h2 {
  font-size: 1.25rem;
  letter-spacing: .08em;
  margin: 40px 0 12px;
  padding-top: 18px;
  border-top: 1px solid var(--linie);
}
.textseite ul { padding-left: 1.2em; }
.textseite li { margin-bottom: .4em; }

.merkzettel {
  border-left: 4px solid var(--rot);
  background: var(--frost);
  padding: 18px 22px;
  margin: 26px 0;
}

/* --- 15 Bewegung --------------------------------------------------------- */

.enthuellen {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .65s ease, transform .65s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--verzug, 0ms);
}
.enthuellen.sichtbar { opacity: 1; transform: none; }

/* --- 16 Umbruch ---------------------------------------------------------- */

@media (max-width: 1080px) {
  /* Logo, fünf Menüpunkte und Rufnummer brauchen mehr Zeile, als hier übrig
     ist – ab hier übernimmt die Klappnavigation. Wird das Menü länger, muss
     diese Schwelle steigen – dann auch in main.js anpassen. */
  .navi__liste, .kopf__tel, .navi__marke { display: none; }
  .burger { display: inline-flex; }
  .buehne__raster { grid-template-columns: 1fr; gap: 36px; }
  /* Einspaltig steht das Foto allein, da darf es die volle Breite haben */
  .riss__bild { width: 100%; }
  .eckdaten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .eckdaten__feld:nth-child(4) { border-left: 0; padding-left: 0; }
  .eckdaten__feld:nth-child(n+4) { border-top: 1px solid var(--linie-hell); }
  .ablauf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ablauf__schritt:nth-child(3) { border-left: 0; padding-left: 0; }
  .ablauf__schritt:nth-child(n+3) { border-top: 1px solid var(--linie-hell); padding-top: 30px; }
}

@media (max-width: 900px) {
  /* Einspaltig steht wieder alles links */
  .fuss__reihe > :last-child { text-align: left; }
  .fuss__navi { justify-content: flex-start; }
  .anfrage__raster { grid-template-columns: 1fr; }
  .datenblatt { grid-template-columns: 1fr; }
  .abschnitt-kopf { grid-template-columns: 1fr; align-items: start; }
}

@media (max-width: 680px) {
  /* Kleineres Logo -- Ueberstand und Buehnenabstand rechnen sich daraus. */
  :root { --logo-breite: 150px; }
  .kopf__reihe { min-height: 68px; }
  .eckdaten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eckdaten__feld { padding: 18px 14px 20px; }
  .eckdaten__feld:nth-child(odd) { border-left: 0; padding-left: 0; }
  .eckdaten__feld:nth-child(n+3) { border-top: 1px solid var(--linie-hell); }
  .kuehlgut__raster { grid-template-columns: 1fr; }
  .skala { display: none; }
  .kuehlgut__zeile { grid-template-columns: 32px minmax(0, 1fr); row-gap: 4px; }
  .kuehlgut__grad { grid-column: 2; }
  .ablauf { grid-template-columns: 1fr; }
  .ablauf__schritt { border-left: 0; padding-left: 0; padding-right: 0; }
  .ablauf__schritt + .ablauf__schritt { border-top: 1px solid var(--linie-hell); padding-top: 26px; }
  .preise__leiter { grid-template-columns: 1fr; }
  .preise__stufe { border-left: 0; padding-left: 0; padding-top: 26px; }
  .preise__stufe + .preise__stufe { border-top: 1px solid var(--linie); }
  .preise__fuss { grid-template-columns: 1fr; }
  .preise__fuss .knopf { width: 100%; justify-content: center; }
  .feldpaar { grid-template-columns: 1fr; gap: 0; }
  .buehne__aktionen .knopf { width: 100%; justify-content: center; }
}

/* --- 17 Rücksicht -------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .enthuellen { opacity: 1; transform: none; }
  .preise__takt--voll { animation: none !important; }
}

@media print {
  .kopf, .klappnavi, .buehne__aktionen, .formular, .burger { display: none !important; }
  body { background: #fff; color: #000; }
  .auf-dunkel { background: #fff !important; color: #000 !important; }
  .preise { background: #fff !important; }
  .enthuellen { opacity: 1 !important; transform: none !important; }
}