@charset "UTF-8";
/* =====================================================================
   Kunststoffe — page styles
   Mobile canvas 430px (plain px) · Desktop canvas 1536px (calc(N*--s))
   ===================================================================== */

/* current-page marks in shared chrome ------------------------------- */
.ftr__links a[aria-current="page"] { color: var(--o); }
@media (min-width: 1024px) {
  .hdr__nav .navitem--drop .navitem__trigger { color: var(--o); }
  .navdrop a[aria-current="page"] { color: var(--o); }
}

/* desktop-only line breaks ------------------------------------------ */
.ks-br { display: none; }
@media (min-width: 1024px) { .ks-br { display: inline; } }

/* ------------------------------------------------------------------ */
/* HERO                                                                */
/* ------------------------------------------------------------------ */
.ks-hero { position: relative; background: #f2f0ed; overflow: hidden; }

.ks-hero__media { position: relative; height: 250px; }
.ks-hero__media img { width: 100%; height: 250px; object-fit: cover; display: block; }
.ks-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(242, 240, 237, 0) 55%, #f2f0ed 98%);
}

.ks-hero__body { padding: 4px 22px 44px; }

.ks-crumb { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 600; color: #5a5751; gap: 8px; }
.ks-crumb a { color: #5a5751; }
.ks-crumb strong { color: var(--ink-2); font-weight: 700; }

.ks-hero__h1 {
  margin-top: 18px;
  font-size: 40px; line-height: 1.12; letter-spacing: .5px;
  color: var(--ink-2);
}
.ks-hero__lead {
  margin-top: 18px;
  font-size: 14.5px; line-height: 1.7; font-weight: 500; color: var(--tx);
}
.ks-hero__actions { margin-top: 24px; }
.ks-hero__cta { width: 100%; gap: 14px; font-size: 13px; letter-spacing: .8px; padding: 17px 0; border-radius: 6px; }

@media (min-width: 1024px) {
  .ks-hero__media {
    position: absolute; right: 0; top: 0;
    width: calc(888 * var(--s)); height: 100%;
  }
  .ks-hero__media img { height: 100%; }
  .ks-hero__scrim { background: linear-gradient(90deg, #f2f0ed 0%, rgba(242, 240, 237, 0) 42%); }

  .ks-hero__body {
    position: relative; z-index: 1;
    width: calc(560 * var(--s));
    padding: calc(40 * var(--s)) 0 calc(110 * var(--s)) calc(75 * var(--s));
  }
  .ks-crumb { font-size: max(12px, calc(13 * var(--s))); gap: calc(10 * var(--s)); }
  .ks-hero__h1 { margin-top: calc(60 * var(--s)); font-size: calc(66 * var(--s)); line-height: 1.1; }
  .ks-hero__lead { margin-top: calc(36 * var(--s)); font-size: max(13px, calc(15.5 * var(--s))); line-height: 1.75; }
  .ks-hero__actions { display: flex; align-items: center; gap: calc(26 * var(--s)); margin-top: calc(52 * var(--s)); }
  .ks-hero__cta {
    width: auto;
    gap: calc(14 * var(--s));
    padding: calc(17 * var(--s)) calc(28 * var(--s));
    border-radius: calc(5 * var(--s));
  }
}

/* ------------------------------------------------------------------ */
/* FRAKTIONEN                                                          */
/* ------------------------------------------------------------------ */
.ks-frakt { background: #f2f0ed; border-top: 1px solid #e6e3df; padding: 56px 0 0; }
.ks-frakt__head { padding: 0 22px; }
.ks-frakt__eyebrow { font-size: 12px; letter-spacing: 1.4px; }
.ks-frakt__h2 {
  margin-top: 14px;
  font-size: 29px; line-height: 1.2; letter-spacing: .5px; color: var(--ink-2);
}
.ks-rule { width: 56px; height: 4px; background: var(--o); margin-top: 14px; }

.ks-cards { gap: 14px; padding: 28px 22px 8px; }
.ks-card { flex: none; width: 250px; background: var(--d-2); border-radius: 8px; overflow: hidden; }
.ks-card__img { width: 100%; height: 130px; object-fit: cover; display: block; opacity: .9; }
.ks-card__body { padding: 14px 22px 28px; }
.ks-card__title { font-size: 20px; letter-spacing: .5px; color: #ffffff; line-height: 1.15; }
.ks-card__txt { margin-top: 8px; font-size: 13px; line-height: 1.55; font-weight: 500; color: #c9c9c9; }

.ks-hint {
  margin: 32px 22px 0;
  padding: 22px 0 48px;
  border-top: 1px solid #e6e3df;
  display: flex; flex-direction: column; gap: 14px;
}
.ks-hint__row { display: flex; gap: 14px; align-items: flex-start; }
.ks-hint__icon { width: 28px; height: 23px; margin-top: 2px; }
.ks-hint__txt { font-size: 14px; line-height: 1.6; font-weight: 500; color: var(--tx); }
.ks-hint__link { font-size: 12.5px; letter-spacing: 1px; gap: 12px; }
.ks-hint__link:hover { color: var(--o-dark); }

@media (min-width: 1024px) {
  .ks-frakt { padding: calc(110 * var(--s)) 0 0; }
  .ks-frakt__head { padding: 0 calc(75 * var(--s)); }
  .ks-frakt__eyebrow { font-size: max(12px, calc(13 * var(--s))); }
  .ks-frakt__h2 { margin-top: calc(20 * var(--s)); font-size: calc(41 * var(--s)); }
  .ks-rule { width: calc(66 * var(--s)); height: calc(4 * var(--s)); margin-top: calc(16 * var(--s)); }

  .ks-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(24 * var(--s));
    padding: 0 calc(75 * var(--s));
    margin-top: calc(60 * var(--s));
    overflow: visible;
  }
  .ks-card { width: auto; border-radius: calc(8 * var(--s)); }
  .ks-card__img { height: calc(150 * var(--s)); }
  .ks-card__body { padding: calc(14 * var(--s)) calc(30 * var(--s)) calc(38 * var(--s)); }
  .ks-card__icon { width: calc(52 * var(--s)); height: calc(42 * var(--s)); }
  .ks-card__title { margin-top: calc(18 * var(--s)); font-size: calc(24 * var(--s)); }
  .ks-card__txt { margin-top: calc(12 * var(--s)); font-size: max(12.5px, calc(14 * var(--s))); line-height: 1.6; }

  .ks-hint {
    flex-direction: row; align-items: center; gap: 0;
    margin: calc(64 * var(--s)) calc(75 * var(--s)) 0;
    padding: calc(30 * var(--s)) 0 calc(90 * var(--s));
  }
  .ks-hint__row { align-items: center; gap: calc(22 * var(--s)); }
  .ks-hint__icon { width: calc(34 * var(--s)); height: calc(28 * var(--s)); margin-top: 0; }
  .ks-hint__txt { font-size: max(13px, calc(15 * var(--s))); }
  .ks-hint__link { margin-left: auto; font-size: max(11px, calc(13 * var(--s))); gap: calc(14 * var(--s)); }
}

/* ------------------------------------------------------------------ */
/* NICHT JEDER KUNSTSTOFF IST GLEICH                                   */
/* ------------------------------------------------------------------ */
.ks-pruef {
  background: #faf9f7;
  border-top: 1px solid #e6e3df;
  padding: 56px 0 54px;
  position: relative;
  overflow: hidden;
}
.ks-pruef__body { padding: 0 22px; }
.ks-pruef__h2 { font-size: 29px; line-height: 1.25; letter-spacing: .5px; color: var(--ink-2); }
.ks-pruef__txt { margin-top: 16px; font-size: 14px; line-height: 1.65; font-weight: 500; color: var(--tx); }

.ks-pruef__art {
  display: block;
  width: 94%;
  margin: 20px auto 0;
  height: auto;
  pointer-events: none;
  object-fit: contain;
}

.ks-chips {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; margin-top: 20px;
}
.ks-chip {
  font-size: 12.5px; font-weight: 800; letter-spacing: 1px;
  color: var(--ink-2); text-transform: uppercase;
}
.ks-chip__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--o); }

@media (min-width: 1024px) {
  .ks-pruef { padding: calc(120 * var(--s)) 0 calc(110 * var(--s)); }
  .ks-pruef__art {
    position: absolute;
    top: calc(145 * var(--s));
    left: calc(473 * var(--s));
    width: calc(1031 * var(--s));
    height: calc(403 * var(--s));
    margin: 0;
  }
  .ks-pruef__body {
    position: relative; z-index: 1;
    width: calc(520 * var(--s));
    padding: 0 calc(75 * var(--s));
  }
  .ks-pruef__h2 { font-size: calc(52 * var(--s)); width: calc(684 * var(--s)); }
  .ks-pruef__txt {
    margin-top: calc(36 * var(--s));
    max-width: calc(330 * var(--s));
    font-size: max(13px, calc(15 * var(--s)));
    line-height: 1.7;
  }
  .ks-chips {
    position: relative; z-index: 1;
    gap: calc(28 * var(--s));
    margin-top: calc(70 * var(--s));
    padding-left: calc(420 * var(--s));
    top: calc(-39 * var(--s));
  }
  .ks-chip { font-size: max(12px, calc(14 * var(--s))); letter-spacing: 1.2px; }
  .ks-chip__dot { width: calc(7 * var(--s)); height: calc(7 * var(--s)); }
}

/* ------------------------------------------------------------------ */
/* GEWERBE (dunkel)                                                    */
/* ------------------------------------------------------------------ */
.ks-gew { position: relative; background: #0c0c0c; overflow: hidden; }
.ks-gew__media { position: relative; height: 210px; }
.ks-gew__media img { width: 100%; height: 210px; object-fit: cover; display: block; }
.ks-gew__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12, 12, 12, .1) 40%, #0c0c0c 100%);
}
.ks-gew__body { padding: 8px 22px 52px; }
.ks-gew__eyebrow { font-size: 12px; letter-spacing: 1.4px; }
.ks-gew__h2 { margin-top: 12px; font-size: 29px; line-height: 1.25; letter-spacing: .5px; color: #ffffff; }

.ks-gew__list {
  list-style: none; margin: 24px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 13px;
}
.ks-gew__list li { display: flex; align-items: center; gap: 14px; }
.ks-gew__list svg { width: 20px; height: 20px; }
.ks-gew__list span { font-size: 14.5px; font-weight: 600; color: #eceae7; }

.ks-gew__btn {
  display: flex; width: 100%;
  margin-top: 28px;
  background: transparent;
  border: 1px solid #4a4a48;
  color: #ffffff;
  font-size: 12.5px; letter-spacing: .8px;
  padding: 15px 0; border-radius: 6px;
  gap: 14px;
}
.ks-gew__btn:hover { border-color: var(--o); color: var(--o); }

@media (min-width: 1024px) {
  .ks-gew__media {
    position: absolute; right: 0; top: 0;
    width: calc(890 * var(--s)); height: 100%;
  }
  .ks-gew__media img { height: 100%; }
  .ks-gew__scrim { background: linear-gradient(90deg, #0c0c0c 0%, rgba(12, 12, 12, 0) 40%); }

  .ks-gew__body {
    position: relative; z-index: 1;
    width: calc(520 * var(--s));
    padding: calc(120 * var(--s)) 0 calc(116 * var(--s)) calc(75 * var(--s));
  }
  .ks-gew__eyebrow { font-size: max(12px, calc(13 * var(--s))); }
  .ks-gew__h2 { margin-top: calc(18 * var(--s)); font-size: calc(40 * var(--s)); }
  .ks-gew__list { margin-top: calc(36 * var(--s)); gap: calc(16 * var(--s)); }
  .ks-gew__list li { gap: calc(16 * var(--s)); }
  .ks-gew__list svg { width: calc(22 * var(--s)); height: calc(22 * var(--s)); }
  .ks-gew__list span { font-size: max(13px, calc(15 * var(--s))); }
  .ks-gew__btn {
    display: inline-flex; width: auto;
    margin-top: calc(40 * var(--s));
    font-size: max(11px, calc(13 * var(--s)));
    padding: calc(15 * var(--s)) calc(26 * var(--s));
    border-radius: calc(5 * var(--s));
    gap: calc(14 * var(--s));
  }
}

/* ------------------------------------------------------------------ */
/* ANFRAGE                                                             */
/* ------------------------------------------------------------------ */
.ks-anfrage { background: #f2f0ed; padding: 56px 0 64px; }
.ks-anfrage__inner { display: flex; flex-direction: column; }
.ks-anfrage__aside { display: contents; }
.ks-anfrage__head { padding: 0 22px; }
.ks-anfrage__eyebrow { font-size: 12px; letter-spacing: 1.4px; }
.ks-anfrage__h2 { margin-top: 12px; font-size: 31px; line-height: 1.2; letter-spacing: .5px; color: var(--ink-2); }
.ks-anfrage__lead { margin-top: 14px; font-size: 14.5px; line-height: 1.65; font-weight: 500; color: var(--tx); }

.ks-form {
  margin: 24px 18px 0;
  background: var(--sand-3);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  padding: 24px 20px;
}
.ks-form .fld select { color: var(--tx-3); }
.ks-form .dropzone { border: 1px dashed #d3d0ca; padding: 24px 14px; gap: 5px; }
.ks-form .dropzone.is-hover { border-color: var(--o); }
.ks-form .dropzone__hint { font-size: 13px; }
.ks-form .dropzone__sub { font-size: 11.5px; }

.ks-contact { display: flex; flex-direction: column; gap: 12px; }
.ks-contact input { margin-top: 0; }

.ks-submit { font-size: 13.5px; letter-spacing: 1px; padding: 17px 0; border-radius: 6px; gap: 14px; }

.ks-note { display: flex; align-items: flex-start; gap: 16px; }
.ks-note div { font-size: 13.5px; line-height: 1.65; font-weight: 500; color: var(--tx-3); }

@media (min-width: 1024px) {
  .ks-anfrage { padding: calc(120 * var(--s)) 0 calc(130 * var(--s)); }
  .ks-anfrage__inner {
    flex-direction: row; align-items: flex-start;
    padding: 0 calc(75 * var(--s));
    gap: calc(70 * var(--s));
  }
  .ks-anfrage__aside { display: block; width: calc(420 * var(--s)); flex: none; }
  .ks-anfrage__head { padding: 0; }
  .ks-anfrage__eyebrow { font-size: max(12px, calc(13 * var(--s))); }
  .ks-anfrage__h2 { margin-top: calc(18 * var(--s)); font-size: calc(41 * var(--s)); }
  .ks-anfrage__lead { margin-top: calc(24 * var(--s)); font-size: max(13px, calc(15.5 * var(--s))); line-height: 1.7; }

  .ks-note {
    margin-top: calc(64 * var(--s));
    max-width: calc(320 * var(--s));
    gap: calc(16 * var(--s));
  }
  .ks-note svg { width: calc(30 * var(--s)); height: calc(34 * var(--s)); }
  .ks-note div { font-size: max(12px, calc(13.5 * var(--s))); }

  .ks-form {
    flex: 1;
    margin: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: calc(30 * var(--s)) calc(36 * var(--s));
  }
  .ks-form .fld { margin-top: 0; }
  .ks-form .fld > span { font-size: max(11px, calc(12.5 * var(--s))); letter-spacing: .8px; }
  .ks-form .fld input,
  .ks-form .fld select {
    margin-top: calc(9 * var(--s));
    height: calc(46 * var(--s));
    font-size: max(12.5px, calc(14 * var(--s)));
  }
  .ks-form .dropzone {
    margin-top: calc(9 * var(--s));
    padding: calc(34 * var(--s)) calc(16 * var(--s));
    gap: calc(6 * var(--s));
    border-radius: calc(8 * var(--s));
  }
  .ks-form .dropzone svg { width: calc(36 * var(--s)); height: calc(32 * var(--s)); }
  .ks-form .dropzone__hint { font-size: max(12.5px, calc(14 * var(--s))); margin-top: calc(6 * var(--s)); }
  .ks-form .dropzone__sub { font-size: max(11px, calc(12 * var(--s))); }

  .ks-contact { gap: calc(14 * var(--s)); }
  .ks-submit {
    margin-top: calc(4 * var(--s));
    font-size: max(12px, calc(14 * var(--s)));
    padding: calc(16 * var(--s)) 0;
    border-radius: calc(6 * var(--s));
    gap: calc(16 * var(--s));
  }
}