@charset "UTF-8";
/* =====================================================================
   UNDERDOGS — Über Underdogs
   Mobile canvas 430px (literal px) · Desktop canvas 1536px (calc(N*--s))
   ===================================================================== */

/* ------------------------------------------------------------------ */
/* Shared page atoms                                                   */
/* ------------------------------------------------------------------ */
.ub-eyebrow { font-size: 12px; letter-spacing: 1.4px; }

.ub-h1 {
  margin: 12px 0 0;
  font-size: 40px;
  line-height: 1.14;
  letter-spacing: .5px;
  color: var(--ink-2);
}

.ub-h2 {
  margin: 12px 0 0;
  font-size: 31px;
  line-height: 1.22;
  letter-spacing: .5px;
  color: var(--ink-2);
}

.ub-rule {
  display: block;
  width: 50px;
  height: 4px;
  background: var(--o);
  margin-top: 16px;
}
.ub-rule--wide { width: 56px; margin-top: 18px; }

.ub-p {
  font-size: 14.5px;
  line-height: 1.7;
  font-weight: 500;
  color: var(--tx);
}
.ub-p--next { margin-top: 14px; }

/* CTA buttons — full-width stacked on mobile */
.ub-cta {
  width: 100%;
  gap: 14px;
  padding: 17px 0;
  font-size: 13px;
  letter-spacing: .8px;
  border-radius: 6px;
}
.ub-cta--outline {
  background: #ffffff;
  border: 1.5px solid var(--o);
  color: var(--o);
  font-size: 12.5px;
  padding: 15px 0;
}
.ub-cta--outline:hover { background: var(--o); color: #ffffff; }
.ub-cta--line {
  background: transparent;
  border: 1.5px solid #ffffff;
  color: #ffffff;
  padding: 16px 0;
}
.ub-cta--line:hover { background: #ffffff; color: var(--ink-2); }

/* ------------------------------------------------------------------ */
/* Breadcrumb (this page's variant — sentence case, not the base one)  */
/* ------------------------------------------------------------------ */
.ub-crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #5a5751;
}
.ub-crumb a { color: #5a5751; }
.ub-crumb a:hover { color: var(--o); }
.ub-crumb span { color: var(--ink-2); font-weight: 700; }

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

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

.ub-hero__body { position: relative; z-index: 1; padding: 4px 22px 44px; }
.ub-hero__eyebrow { margin-top: 18px; }
.ub-hero__p {
  margin-top: 18px;
  font-size: 14.5px;
  line-height: 1.7;
  font-weight: 500;
  color: var(--tx);
}
.ub-hero__btn { margin-top: 24px; }

/* ------------------------------------------------------------------ */
/* Two-column split (head → media → body on mobile)                    */
/* ------------------------------------------------------------------ */
.ub-split { display: grid; grid-template-columns: 1fr; }
.ub-head { padding: 0 22px; }
.ub-split__media {
  margin: 24px 18px 0;
  border-radius: 10px;
  overflow: hidden;
}
.ub-split__body { padding: 22px 22px 0; }

/* ------------------------------------------------------------------ */
/* Unser Unternehmen                                                   */
/* ------------------------------------------------------------------ */
.ub-firma {
  background: #f6f4f1;
  border-top: 1px solid #e6e3df;
  padding: 56px 0 52px;
}
.ub-firma__media img {
  width: 100%;
  height: 230px;
  object-fit: cover;
  display: block;
}

.ub-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  margin-top: 26px;
}
.ub-stat__n { font-size: 23px; line-height: 1.1; color: var(--ink-2); }
.ub-stat__n--o { color: var(--o); }
.ub-stat__l {
  margin-top: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--mut-2);
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ */
/* Geschäftsführung                                                    */
/* ------------------------------------------------------------------ */
.ub-gf { background: #f2f0ed; padding: 56px 0 52px; }
.ub-gf__media { height: 340px; position: relative; }
.ub-portrait {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #e9e6e1 0%, #dbd7d1 100%);
  color: var(--mut);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
  line-height: 2;
  text-align: center;
  text-transform: uppercase;
}

.ub-gf__quote {
  font-size: 16.5px;
  line-height: 1.6;
  font-weight: 600;
  color: var(--ink-2);
}
.ub-gf__p {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.65;
  font-weight: 500;
  color: var(--tx);
}
.ub-gf__name {
  margin-top: 18px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .5px;
  color: var(--ink-2);
  text-transform: uppercase;
}
.ub-gf__sub {
  margin-top: 3px;
  font-size: 13px;
  font-weight: 500;
  color: var(--mut-2);
}

/* ------------------------------------------------------------------ */
/* Wofür wir stehen (dark)                                             */
/* ------------------------------------------------------------------ */
.ub-werte { position: relative; background: #0c0c0c; overflow: hidden; }

.ub-werte__media { position: relative; height: 210px; }
.ub-werte__media img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  display: block;
}
.ub-werte__fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 12, 12, .1) 40%, #0c0c0c 100%);
}

.ub-werte__body { position: relative; z-index: 1; padding: 8px 22px 52px; }
.ub-werte .ub-h2 { font-size: 29px; line-height: 1.25; color: #ffffff; }
.ub-werte .ub-rule { margin-top: 18px; }

.ub-werte__list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ub-werte__list li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 500;
  color: #eceae7;
}
.ub-werte__list li svg { width: 20px; height: 20px; margin-top: 2px; }
.ub-werte__list strong { color: #ffffff; font-weight: 700; }

/* ------------------------------------------------------------------ */
/* Eigene Logistik                                                     */
/* ------------------------------------------------------------------ */
.ub-log { background: #f6f4f1; padding: 56px 0 52px; }
.ub-log__media img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}
.ub-log__btn { margin-top: 22px; }

/* ------------------------------------------------------------------ */
/* Standort Line-Art                                                   */
/* ------------------------------------------------------------------ */
.ub-plan { background: #f2f0ed; padding: 56px 0 0; overflow: hidden; }
.ub-plan__head { text-align: center; padding: 0 22px; }
.ub-plan__h { margin-top: 14px; line-height: 1.2; }
.ub-plan__p {
  margin: 14px auto 0;
  font-size: 13.5px;
  line-height: 1.65;
  font-weight: 500;
  color: var(--tx);
}
.ub-plan__img {
  display: block;
  width: 112%;
  height: auto;
  max-width: none;
  margin: 16px 0 0 -6%;
  pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* Abschluss CTA                                                       */
/* ------------------------------------------------------------------ */
.ub-out { position: relative; background: #0c0c0c; overflow: hidden; }
.ub-out__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ub-out__fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(6, 6, 6, .78) 0%, rgba(6, 6, 6, .35) 60%, rgba(6, 6, 6, .5) 100%);
}
.ub-out__body {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 76px 22px 72px;
}
.ub-out__h {
  font-size: 33px;
  line-height: 1.2;
  letter-spacing: .5px;
  color: #ffffff;
}
.ub-out__p {
  margin: 16px auto 0;
  font-size: 14px;
  line-height: 1.65;
  font-weight: 500;
  color: #e8e6e2;
}
.ub-out__btns {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 28px;
}

/* =====================================================================
   DESKTOP — 1536px canvas
   ===================================================================== */
@media (min-width: 1024px) {

  /* --- atoms --- */
  .ub-inline { display: inline; }
  .ub-br { display: block; height: 0; }

  .ub-eyebrow { font-size: max(11px, calc(13 * var(--s))); letter-spacing: 1.4px; }

  .ub-h1 {
    margin-top: calc(20 * var(--s));
    font-size: calc(64 * var(--s));
    line-height: 1.12;
  }
  .ub-h2 {
    margin-top: calc(18 * var(--s));
    font-size: calc(44 * var(--s));
    line-height: 1.22;
  }
  .ub-rule {
    width: calc(56 * var(--s));
    height: calc(4 * var(--s));
    margin-top: calc(24 * var(--s));
  }
  .ub-rule--wide { width: calc(66 * var(--s)); margin-top: calc(28 * var(--s)); }

  .ub-p {
    font-size: max(13px, calc(15.5 * var(--s)));
    line-height: 1.75;
    max-width: calc(520 * var(--s));
  }
  .ub-p--next { margin-top: calc(18 * var(--s)); }

  .ub-cta {
    width: auto;
    gap: calc(14 * var(--s));
    padding: calc(17 * var(--s)) calc(28 * var(--s));
    font-size: max(11px, calc(13 * var(--s)));
    border-radius: calc(5 * var(--s));
  }
  .ub-cta--outline {
    font-size: max(11px, calc(12.5 * var(--s)));
    padding: calc(15 * var(--s)) calc(26 * var(--s));
  }
  .ub-cta--line { padding: calc(16 * var(--s)) calc(30 * var(--s)); }

  .ub-crumb { gap: calc(10 * var(--s)); font-size: max(11px, calc(13 * var(--s))); }

  /* --- hero --- */
  .ub-hero__media {
    position: absolute;
    right: 0;
    top: 0;
    width: calc(1060 * var(--s));
    height: 100%;
  }
  .ub-hero__media img { width: 100%; height: 100%; }
  .ub-hero__fade { background: linear-gradient(90deg, #f2f0ed 0%, rgba(242, 240, 237, 0) 38%); }
  .ub-hero__body {
    width: calc(470 * var(--s));
    padding: calc(56 * var(--s)) 0 calc(78 * var(--s)) calc(60 * var(--s));
  }
  .ub-hero__eyebrow { margin-top: calc(56 * var(--s)); }
  .ub-hero__p {
    margin-top: calc(28 * var(--s));
    max-width: calc(350 * var(--s));
    font-size: max(13px, calc(15.5 * var(--s)));
    line-height: 1.75;
  }
  .ub-hero__btn { margin-top: calc(40 * var(--s)); }

  /* --- split layout --- */
  .ub-split {
    display: grid;
    align-content: center;
    column-gap: calc(76 * var(--s));
  }
  .ub-head { padding: 0; }
  .ub-split__media { margin: 0; border-radius: calc(10 * var(--s)); align-self: center; }
  .ub-split__body { padding: 0; margin-top: calc(26 * var(--s)); }

  .ub-split--media-left { grid-template-columns: calc(600 * var(--s)) 1fr; }
  .ub-split--media-left .ub-split__media { grid-column: 1; grid-row: 1 / span 2; }
  .ub-split--media-left .ub-head { grid-column: 2; grid-row: 1; }
  .ub-split--media-left .ub-split__body { grid-column: 2; grid-row: 2; }

  .ub-split--media-right { grid-template-columns: 1fr calc(600 * var(--s)); }
  .ub-split--media-right .ub-split__media { grid-column: 2; grid-row: 1 / span 2; }
  .ub-split--media-right .ub-head { grid-column: 1; grid-row: 1; }
  .ub-split--media-right .ub-split__body { grid-column: 1; grid-row: 2; }

  /* --- Unser Unternehmen --- */
  .ub-firma { padding: calc(100 * var(--s)) calc(60 * var(--s)) calc(96 * var(--s)); }
  .ub-firma__media img { height: calc(430 * var(--s)); }

  .ub-stats {
    display: flex;
    gap: calc(56 * var(--s));
    margin-top: calc(36 * var(--s));
  }
  .ub-stat__n { font-size: calc(34 * var(--s)); }
  .ub-stat__l {
    margin-top: calc(6 * var(--s));
    font-size: max(10.5px, calc(12 * var(--s)));
    letter-spacing: 1.2px;
  }

  /* --- Geschäftsführung --- */
  .ub-gf { padding: calc(96 * var(--s)) calc(60 * var(--s)); }
  .ub-gf .ub-split--media-right { grid-template-columns: 1fr calc(460 * var(--s)); }
  .ub-gf .ub-split__body { margin-top: calc(30 * var(--s)); }
  .ub-gf__media { height: calc(520 * var(--s)); }
  .ub-portrait { font-size: max(10.5px, calc(12 * var(--s))); }

  .ub-gf__quote {
    font-size: max(15px, calc(19 * var(--s)));
    line-height: 1.65;
    max-width: calc(500 * var(--s));
  }
  .ub-gf__p {
    margin-top: calc(22 * var(--s));
    font-size: max(13px, calc(15 * var(--s)));
    line-height: 1.7;
    max-width: calc(500 * var(--s));
  }
  .ub-gf__name {
    margin-top: calc(26 * var(--s));
    font-size: max(12px, calc(14 * var(--s)));
    letter-spacing: .6px;
  }
  .ub-gf__sub { margin-top: calc(4 * var(--s)); font-size: max(12px, calc(13.5 * var(--s))); }

  /* --- Wofür wir stehen --- */
  .ub-werte__media {
    position: absolute;
    right: 0;
    top: 0;
    width: calc(980 * var(--s));
    height: 100%;
  }
  .ub-werte__media img { width: 100%; height: 100%; }
  .ub-werte__fade { background: linear-gradient(90deg, #0c0c0c 0%, rgba(12, 12, 12, 0) 45%); }
  .ub-werte__body {
    width: calc(470 * var(--s));
    padding: calc(92 * var(--s)) 0 calc(92 * var(--s)) calc(60 * var(--s));
  }
  .ub-werte .ub-h2 { font-size: calc(44 * var(--s)); line-height: 1.22; }
  .ub-werte .ub-rule { margin-top: calc(26 * var(--s)); }
  .ub-werte__list { gap: calc(22 * var(--s)); margin-top: calc(34 * var(--s)); }
  .ub-werte__list li {
    gap: calc(18 * var(--s));
    font-size: max(13px, calc(15 * var(--s)));
  }
  .ub-werte__list li svg {
    width: calc(22 * var(--s));
    height: calc(22 * var(--s));
    margin-top: calc(2 * var(--s));
  }

  /* --- Eigene Logistik --- */
  .ub-log { padding: calc(100 * var(--s)) calc(60 * var(--s)) calc(96 * var(--s)); }
  .ub-log__media img { height: calc(400 * var(--s)); }
  .ub-log .ub-p { max-width: calc(480 * var(--s)); }
  .ub-log__btn { margin-top: calc(36 * var(--s)); }

  /* --- Standort Line-Art --- */
  .ub-plan { padding: calc(88 * var(--s)) 0 0; }
  .ub-plan__head { padding: 0 calc(60 * var(--s)); }
  .ub-plan__h { margin-top: calc(20 * var(--s)); line-height: 1.2; }
  .ub-plan__p {
    margin-top: calc(22 * var(--s));
    max-width: calc(560 * var(--s));
    font-size: max(13px, calc(15 * var(--s)));
    line-height: 1.7;
  }
  .ub-plan__img {
    width: calc(1280 * var(--s));
    margin: calc(26 * var(--s)) auto 0;
  }

  /* --- Abschluss CTA --- */
  .ub-out__fade {
    background: linear-gradient(0deg, rgba(6, 6, 6, .72) 0%, rgba(6, 6, 6, .28) 60%, rgba(6, 6, 6, .42) 100%);
  }
  .ub-out__body { padding: calc(150 * var(--s)) calc(60 * var(--s)) calc(140 * var(--s)); }
  .ub-out__h { font-size: calc(56 * var(--s)); line-height: 1.18; }
  .ub-out__p {
    margin-top: calc(24 * var(--s));
    max-width: calc(520 * var(--s));
    font-size: max(13px, calc(16 * var(--s)));
    line-height: 1.7;
  }
  .ub-out__btns {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: calc(20 * var(--s));
    margin-top: calc(44 * var(--s));
  }
  .ub-out .btn--primary.ub-cta { padding: calc(17 * var(--s)) calc(30 * var(--s)); }
}