/* ProTech+ Startseite, Entwurf.
   Tokens und Regeln stehen in ../design-system/MASTER.md.
   Layout-Muster aus der Vorlage Sedona (referenzen/sedona-...). */

@font-face{font-family:'Khand';src:url('schriften/khand-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Khand';src:url('schriften/khand-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Khand';src:url('schriften/khand-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer';src:url('schriften/switzer-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer';src:url('schriften/switzer-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer';src:url('schriften/switzer-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer';src:url('schriften/switzer-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root {
  --farbe-grund:       #f7f6f3;
  --farbe-grund-tief:  #efede8;
  --farbe-karte:       #fdfcfa;
  --farbe-tinte:       #151c26;
  --farbe-tinte-leise: #5c6773;
  --farbe-dunkel:      #16233a;
  --farbe-akzent:      #0f6d92;
  --farbe-akzent-hell: #7fc4dd;
  --farbe-linie:       #ddd8d0;
  --farbe-linie-dunkel: rgba(247,246,243,.16);

  --raum-1: 4px;   --raum-2: 8px;   --raum-3: 12px;  --raum-4: 16px;
  --raum-6: 24px;  --raum-8: 32px;  --raum-10: 40px; --raum-12: 48px;
  --raum-16: 64px; --raum-20: 80px; --raum-28: 112px; --raum-36: 144px;

  --breite-feld: 1480px;
  --rand-feld: var(--raum-10);
  --schwung: cubic-bezier(.16,1,.3,1);

  --display: 'Khand', 'Segoe UI', sans-serif;
  --body: 'Switzer', 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--farbe-grund);
  color: var(--farbe-tinte);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
ul, ol, dl { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }
figure { margin: 0; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.005em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(3.1rem, 5.4vw, 5.6rem); text-wrap: normal; }
h2 { font-size: clamp(2.4rem, 4.2vw, 4rem); }
h3 { font-size: 1.45rem; font-weight: 500; letter-spacing: 0; }

.feld {
  width: min(100% - (2 * var(--rand-feld)), var(--breite-feld));
  margin-inline: auto;
}

.fuehrung { font-size: 1.22rem; }

.knopf {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-2);
  padding: var(--raum-4) var(--raum-8);
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.14rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background .3s var(--schwung), color .3s var(--schwung),
              border-color .3s var(--schwung);
}
.knopf--voll { background: var(--farbe-akzent); color: var(--farbe-karte); }
.knopf--voll:hover { background: var(--farbe-dunkel); }
.knopf--linie { border-color: var(--farbe-tinte); }
.knopf--linie:hover { background: var(--farbe-tinte); color: var(--farbe-karte); }
.knopf--hell { background: var(--farbe-karte); color: var(--farbe-dunkel); }
.knopf--hell:hover { background: var(--farbe-akzent-hell); }
.knopf--linie-hell { border-color: var(--farbe-linie-dunkel); color: var(--farbe-karte); }
.knopf--linie-hell:hover { background: var(--farbe-karte); color: var(--farbe-dunkel); }

/* Kopf ------------------------------------------------------------------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--farbe-grund);
  border-bottom: 1px solid var(--farbe-linie);
}
.kopf__innen {
  display: flex;
  align-items: center;
  gap: var(--raum-12);
  height: 88px;
}
.kopf__logo img { width: 178px; }

.menue {
  display: flex;
  gap: var(--raum-8);
  margin-left: auto;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.14rem;
}
.menue a { text-decoration: none; transition: color .25s var(--schwung); }
.menue a:hover { color: var(--farbe-akzent); }

.kopf__tat { display: flex; align-items: center; gap: var(--raum-6); }
.kopf__ruf {
  font-family: var(--display);
  font-weight: 500;
  text-decoration: none;
  font-size: 1.14rem;
}
.kopf__ruf:hover { color: var(--farbe-akzent); }

/* Bühne ------------------------------------------------------------------
   Bild laeuft rechts randlos aus und ragt unter das Werkstoffband.
   Muster aus Interno, Karte ueberlappt die Bildkante.                     */

.buehne {
  position: relative;
  padding: var(--raum-20) 0 var(--raum-16);
  overflow: hidden;
}
.buehne__bild {
  position: absolute;
  top: 0;
  right: 0;
  width: min(52vw, 900px);
  height: calc(100% + var(--raum-16));
}
.buehne__bild img { width: 100%; height: 100%; object-fit: cover; }

.buehne__innen {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--raum-16);
  align-items: end;
  min-height: min(66vh, 620px);
}
.buehne__text { max-width: 44rem; padding-top: var(--raum-12); }
.buehne .fuehrung {
  margin-top: var(--raum-8);
  max-width: 40ch;
  color: var(--farbe-tinte-leise);
}
.buehne__tat { margin-top: var(--raum-10); display: flex; gap: var(--raum-3); flex-wrap: wrap; }
.buehne__fuss {
  margin-top: var(--raum-10);
  padding-top: var(--raum-4);
  border-top: 1px solid var(--farbe-linie);
  max-width: 38ch;
  font-size: .95rem;
  color: var(--farbe-tinte-leise);
}

.buehne__seite { display: grid; gap: var(--raum-4); width: 21rem; }
.buehne__jahr {
  background: var(--farbe-dunkel);
  color: var(--farbe-grund);
  padding: var(--raum-6) var(--raum-8) var(--raum-8);
}
.buehne__jahr b {
  display: block;
  font-family: var(--display);
  font-weight: 500;
  font-size: 3.6rem;
  line-height: .9;
  letter-spacing: -.02em;
}
.buehne__jahr p { margin-top: var(--raum-2); font-size: .93rem; color: rgba(247,246,243,.72); }

.buehne__karte {
  background: var(--farbe-karte);
  padding: var(--raum-6) var(--raum-8);
  box-shadow: 0 24px 50px rgba(21,28,38,.14);
}
.buehne__karte span {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.02rem;
  color: var(--farbe-tinte-leise);
}
.buehne__karte a {
  display: block;
  margin-top: var(--raum-1);
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--farbe-akzent);
  text-decoration: none;
}
.buehne__karte p { margin-top: var(--raum-1); font-size: .88rem; color: var(--farbe-tinte-leise); }

/* Werkstoffband ----------------------------------------------------------- */

.band {
  position: relative;
  z-index: 3;
  background: var(--farbe-dunkel);
  color: var(--farbe-grund);
  overflow: hidden;
  padding: var(--raum-6) 0;
}
.band__spur { display: flex; width: max-content; animation: laufen 46s linear infinite; }
.band__reihe { display: flex; }
.band__reihe li {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.4rem, 2.2vw, 2.1rem);
  letter-spacing: -.01em;
  padding: 0 var(--raum-8);
  display: flex;
  align-items: center;
  gap: var(--raum-8);
  white-space: nowrap;
}
.band__reihe li::after {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--farbe-akzent-hell);
  border-radius: 50%;
}
@keyframes laufen { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Wo die Profile stecken -------------------------------------------------- */

.steckt {
  background: var(--farbe-dunkel);
  color: var(--farbe-grund);
  padding: var(--raum-28) 0;
}
.steckt__kopf {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: var(--raum-16);
  align-items: end;
  margin-bottom: var(--raum-16);
}
.steckt__kopf p { color: rgba(247,246,243,.7); max-width: 46ch; }

.steckt__innen { position: relative; }

.orte { position: relative; z-index: 2; }
.ort {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr) auto;
  gap: var(--raum-8);
  align-items: baseline;
  padding: var(--raum-6) 0;
  border-top: 1px solid var(--farbe-linie-dunkel);
  transition: padding-left .5s var(--schwung), color .4s var(--schwung);
}
.ort:last-child { border-bottom: 1px solid var(--farbe-linie-dunkel); }
.ort__nummer { font-size: .88rem; color: rgba(247,246,243,.5); }
.ort__name {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2rem, 3.6vw, 3.4rem);
  line-height: 1;
  letter-spacing: -.02em;
}
.ort__was { font-size: .98rem; color: rgba(247,246,243,.6); text-align: right; }
.ort:hover { padding-left: var(--raum-6); }
.ort:hover .ort__name { color: var(--farbe-akzent-hell); }

.ort__vorschau {
  position: absolute;
  top: 50%;
  right: 8%;
  z-index: 1;
  width: 22rem;
  aspect-ratio: 4 / 3;
  transform: translate(0, -50%) scale(.96);
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s var(--schwung), transform .45s var(--schwung);
  overflow: hidden;
}
.ort__vorschau img { width: 100%; height: 100%; object-fit: cover; }
.steckt__innen.ist-aktiv .ort__vorschau { opacity: 1; transform: translate(0, -50%) scale(1); }

/* Versatz-Blöcke (Muster aus Sedona) -------------------------------------- */

.versatz { padding: var(--raum-36) 0; }
.versatz__innen {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
}
.versatz__bild { grid-column: 1 / span 8; grid-row: 1; }
.versatz__bild img {
  width: 100%;
  height: clamp(420px, 40vw, 620px);
  object-fit: cover;
}
.versatz__kasten {
  grid-column: 7 / span 6;
  grid-row: 1;
  background: var(--farbe-dunkel);
  color: var(--farbe-grund);
  padding: var(--raum-16) var(--raum-16) var(--raum-12);
}
.versatz__kasten h2 { font-size: clamp(1.9rem, 2.6vw, 2.6rem); }
.versatz__kasten p {
  margin-top: var(--raum-6);
  color: rgba(247,246,243,.74);
  max-width: 44ch;
}
.versatz__kasten--hell {
  background: var(--farbe-karte);
  color: var(--farbe-tinte);
  box-shadow: 0 30px 60px rgba(21,28,38,.09);
}
.versatz__kasten--hell p { color: var(--farbe-tinte-leise); }

.versatz--gedreht .versatz__bild { grid-column: 5 / span 8; }
.versatz--gedreht .versatz__kasten { grid-column: 1 / span 6; }

/* Stationen als Zeilenliste mit feinen Linien, Muster aus der Vorlage Interno. */
.stationen { margin-top: var(--raum-10); }
.stationen > div {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: var(--raum-6);
  padding: var(--raum-3) 0;
  border-top: 1px solid var(--farbe-linie-dunkel);
}
.stationen > div:last-child { border-bottom: 1px solid var(--farbe-linie-dunkel); }
.stationen dt { font-family: var(--display); font-weight: 500; font-size: 1.14rem; }
.stationen dd { margin: 0; font-size: .96rem; color: rgba(247,246,243,.7); }

/* Werkstoffe -------------------------------------------------------------- */

.werkstoffe { padding: var(--raum-28) 0; background: var(--farbe-grund-tief); }
.werkstoffe__kopf {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: var(--raum-16);
  align-items: end;
  margin-bottom: var(--raum-16);
}
.werkstoffe__kopf p { color: var(--farbe-tinte-leise); max-width: 46ch; }

.stoffe {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--raum-16);
}
.stoffe li {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: var(--raum-6);
  align-items: baseline;
  padding: var(--raum-4) 0;
  border-bottom: 1px solid var(--farbe-linie);
  transition: color .25s var(--schwung);
}
.stoffe li:hover { color: var(--farbe-akzent); }
.stoffe b { font-family: var(--display); font-weight: 500; font-size: 1.62rem; }
.stoffe span { color: var(--farbe-tinte-leise); font-size: .98rem; }
.stoffe li:hover span { color: inherit; }

.coex {
  margin-top: var(--raum-20);
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: var(--raum-16);
  align-items: center;
}
.coex__text p { margin-top: var(--raum-4); color: var(--farbe-tinte-leise); max-width: 52ch; }
.coex__text .knopf { margin-top: var(--raum-8); }
.coex__bild img { width: 100%; height: clamp(280px, 26vw, 400px); object-fit: cover; }

/* Branchenstreifen (das Merkmal) ------------------------------------------ */

.streifen { padding: var(--raum-28) 0 0; }
.streifen__kopf { margin-bottom: var(--raum-12); }

.spalten {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  width: 100%;
}
.spalte {
  position: relative;
  height: clamp(520px, 46vw, 680px);
  overflow: hidden;
  isolation: isolate;
}
.spalte img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(.2) contrast(1.03);
  transition: transform .8s var(--schwung), filter .6s var(--schwung);
}
.spalte::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(22,35,58,0) 0%, rgba(22,35,58,.06) 40%, rgba(22,35,58,.86) 100%);
  transition: background .5s var(--schwung);
}
.spalte__name {
  position: absolute;
  left: var(--raum-8);
  bottom: var(--raum-8);
  z-index: 2;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.32rem;
  color: var(--farbe-grund);
  transition: transform .5s var(--schwung);
}
.spalte__text {
  position: absolute;
  z-index: 2;
  left: calc(var(--raum-8) + 2.6rem);
  right: var(--raum-6);
  bottom: var(--raum-8);
  color: rgba(247,246,243,.9);
  font-size: .96rem;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .45s var(--schwung), transform .45s var(--schwung);
}
.spalte:hover img { transform: scale(1.05); filter: grayscale(0) contrast(1.04); }
.spalte:hover::after { background: linear-gradient(180deg, rgba(15,109,146,0) 0%, rgba(15,109,146,.28) 40%, rgba(15,109,146,.92) 100%); }
.spalte:hover .spalte__text { opacity: 1; transform: none; }

.streifen__fuss { padding: var(--raum-12) 0 0; }
.streifen__fuss p { color: var(--farbe-tinte-leise); max-width: 68ch; }

/* Spritzguss --------------------------------------------------------------- */

.spritzguss { padding: var(--raum-28) 0; }
.spritzguss__innen {
  background: var(--farbe-dunkel);
  color: var(--farbe-grund);
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: var(--raum-16);
  padding: var(--raum-16);
}
.spritzguss__text p { margin-top: var(--raum-6); color: rgba(247,246,243,.74); max-width: 40ch; }
.spritzguss__text .knopf { margin-top: var(--raum-8); }

.daten { align-self: center; }
.daten > div {
  display: grid;
  grid-template-columns: 15rem 1fr;
  gap: var(--raum-6);
  padding: var(--raum-4) 0;
  border-top: 1px solid var(--farbe-linie-dunkel);
}
.daten > div:last-child { border-bottom: 1px solid var(--farbe-linie-dunkel); }
.daten dt { color: rgba(247,246,243,.6); }
.daten dd {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.3rem;
}

/* Anfrage ------------------------------------------------------------------ */

.anfrage { padding: var(--raum-28) 0; background: var(--farbe-grund-tief); }
.anfrage__innen {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: var(--raum-16);
  align-items: start;
}
.anfrage__text > p { margin-top: var(--raum-6); color: var(--farbe-tinte-leise); max-width: 48ch; }

.mitschicken { margin-top: var(--raum-10); }
.mitschicken li {
  padding: var(--raum-4) 0;
  border-bottom: 1px solid var(--farbe-linie);
  color: var(--farbe-tinte-leise);
}
.mitschicken b {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--farbe-tinte);
}

.anfrage__karte {
  background: var(--farbe-karte);
  padding: var(--raum-12);
  box-shadow: 0 30px 60px rgba(21,28,38,.08);
}
.anfrage__adresse { font-family: var(--display); font-weight: 500; font-size: 1.2rem; line-height: 1.45; }
.personen { margin: var(--raum-8) 0 var(--raum-10); }
.personen li {
  display: grid;
  gap: 2px;
  padding: var(--raum-4) 0;
  border-top: 1px solid var(--farbe-linie);
}
.personen b { font-family: var(--display); font-weight: 500; font-size: 1.24rem; }
.personen span { font-size: .92rem; color: var(--farbe-tinte-leise); }
.personen a { color: var(--farbe-akzent); text-decoration: none; font-weight: 500; }
.personen a:hover { text-decoration: underline; }
.anfrage__karte .knopf { width: 100%; justify-content: center; }

/* Karriere ----------------------------------------------------------------- */

.karriere { background: var(--farbe-akzent); color: var(--farbe-grund); padding: var(--raum-16) 0; }
.karriere__innen {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--raum-12);
  align-items: center;
}
.karriere h2 { font-size: clamp(1.5rem, 2vw, 2rem); max-width: 20ch; }
.karriere p { color: rgba(247,246,243,.85); max-width: 46ch; }

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

.fuss { background: var(--farbe-dunkel); color: rgba(247,246,243,.7); padding-top: var(--raum-20); font-size: .96rem; }
.fuss__innen {
  display: grid;
  grid-template-columns: 1.7fr .8fr .8fr .9fr;
  gap: var(--raum-12);
  padding-bottom: var(--raum-16);
}
.fuss__marke img { width: 186px; margin-bottom: var(--raum-6); }
.fuss__marke p { max-width: 40ch; }
.fuss__spalte { display: grid; align-content: start; gap: var(--raum-2); }
.fuss__spalte h3 { color: var(--farbe-grund); font-size: 1.05rem; margin-bottom: var(--raum-2); }
.fuss__spalte a { text-decoration: none; transition: color .25s var(--schwung); }
.fuss__spalte a:hover { color: var(--farbe-akzent-hell); }

.fuss__unten {
  border-top: 1px solid var(--farbe-linie-dunkel);
  padding: var(--raum-6) 0 var(--raum-8);
  display: flex;
  justify-content: space-between;
  font-size: .9rem;
}
.fuss__recht a { text-decoration: none; margin-left: var(--raum-6); }
.fuss__recht a:hover { color: var(--farbe-akzent-hell); }

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

.zeigen {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s var(--schwung), transform .6s var(--schwung);
  transition-delay: var(--verzug, 0ms);
}
.zeigen.ist-da { opacity: 1; transform: none; }

/* Die Maske darf nur oben schneiden. Unten braucht sie Luft, sonst kappt sie
   die Unterlaengen von g, p und ss. */
.teilen .zeile {
  display: block;
  overflow: hidden;
  text-wrap: normal;
  padding-bottom: .18em;
  margin-bottom: -.18em;
}
.teilen .zeile > span {
  display: block;
  transform: translateY(112%);
  transition: transform .75s var(--schwung);
  transition-delay: calc(var(--i) * 90ms);
}
.teilen.ist-da .zeile > span { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .zeigen, .teilen .zeile > span, .spalte__text {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .band__spur { animation: none; }
  .ort__vorschau { display: none; }
}

/* 1024 --------------------------------------------------------------------- */

@media (max-width: 1180px) {
  :root { --rand-feld: var(--raum-8); }
  .buehne { grid-template-columns: 1fr; padding-bottom: 0; gap: var(--raum-16); }
  .buehne__bild img { height: clamp(340px, 48vw, 520px); }
  .steckt__innen,
  .werkstoffe__kopf,
  .coex,
  .spritzguss__innen,
  .anfrage__innen { grid-template-columns: 1fr; gap: var(--raum-12); }
  .versatz__innen { display: block; }
  .versatz__kasten {
    margin: calc(-1 * var(--raum-8)) var(--raum-8) 0;
    padding: var(--raum-16) var(--raum-12) var(--raum-12);
  }
  .versatz__bild img { height: clamp(320px, 44vw, 460px); }
  .spalten { grid-template-columns: repeat(3, 1fr); }
  .buehne__bild { position: relative; width: auto; height: clamp(320px, 42vw, 460px); }
  .buehne__innen { grid-template-columns: 1fr; min-height: 0; gap: var(--raum-10); align-items: start; }
  .buehne__seite { width: auto; grid-template-columns: 1fr 1fr; }
  .ort__vorschau { display: none; }
  .spalte { height: 380px; }
  .karriere__innen { grid-template-columns: 1fr; gap: var(--raum-6); }
  .fuss__innen { grid-template-columns: 1fr 1fr; }
}

/* 768 ---------------------------------------------------------------------- */

@media (max-width: 860px) {
  .kopf__innen { height: auto; flex-wrap: wrap; padding-top: var(--raum-4); gap: var(--raum-4) var(--raum-6); }
  .kopf__tat { margin-left: auto; }
  .menue {
    order: 3;
    width: 100%;
    margin-left: 0;
    gap: var(--raum-6);
    overflow-x: auto;
    padding: var(--raum-3) 0;
    border-top: 1px solid var(--farbe-linie);
  }
  .menue a { white-space: nowrap; }
  .stoffe { grid-template-columns: 1fr; }
  .stationen { grid-template-columns: 1fr; }
  .daten > div,
  .stationen > div { grid-template-columns: 1fr; gap: var(--raum-1); }
  .steckt__kopf { grid-template-columns: 1fr; gap: var(--raum-6); align-items: start; }
  .ort { grid-template-columns: 1fr; gap: var(--raum-1); }
  .ort__was { text-align: left; }
}

/* 375 ---------------------------------------------------------------------- */

@media (max-width: 620px) {
  :root { --rand-feld: var(--raum-6); }
  body { font-size: 17px; }
  .buehne { padding-top: var(--raum-16); }
  .steckt, .werkstoffe, .anfrage, .spritzguss, .streifen { padding: var(--raum-20) 0; }
  .versatz { padding: var(--raum-20) 0; }
  .spalten { grid-template-columns: 1fr 1fr; }
  .spalte { height: 300px; }
  .buehne__seite { grid-template-columns: 1fr; }
  .buehne { padding-top: var(--raum-12); }
  .spalte__name { font-size: 1.2rem; }
  .spalte__text { display: none; }
  .stoffe li { grid-template-columns: 8rem 1fr; }
  .spritzguss__innen { padding: var(--raum-10) var(--raum-8); }
  .anfrage__karte { padding: var(--raum-8); }
  .fuss__innen { grid-template-columns: 1fr; gap: var(--raum-10); }
  .fuss__unten { flex-direction: column; gap: var(--raum-2); }
  .fuss__recht a { margin: 0 var(--raum-6) 0 0; }
}