@charset "UTF-8";
/* =====================================================================
   Standort — Anfahrt, Öffnungszeiten, Karte
   Mobile canvas 430px  ·  Desktop canvas 1536px (single 1024px break)
   All new classes are .st- prefixed.
   ===================================================================== */

/* helper: line breaks that only exist in the desktop design */
.br-d { display: none; }

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

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

.st-hero__body { padding: 4px var(--gx) 44px; }

.st-hero__eyebrow { font-size: 12px; letter-spacing: 1.4px; }

.st-hero__h1 {
  margin: 12px 0 0;
  font-family: Anton, "Arial Narrow", sans-serif;
  font-weight: 400;
  font-size: 40px;
  line-height: 1.14;
  letter-spacing: .5px;
  color: var(--ink-2);
}
/* mobil fliesst "HIER KOMMT IHR MATERIAL" als eine umbrechende Zeile,
   "IN BEWEGUNG." steht darunter — auf Desktop wird jede Zeile ein Block */
.st-hero__line2 { display: block; }

.st-hero__addr {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 22px;
  font-size: 14.5px;
  line-height: 1.55;
  font-weight: 600;
  color: var(--ink-2);
}
.st-hero__addr svg { width: 18px; height: 18px; margin-top: 2px; }

.st-hero__lead {
  margin-top: 18px;
  font-size: 14.5px;
  line-height: 1.7;
  font-weight: 500;
  color: var(--tx);
}

.st-hero__cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}
.st-hero__cta .btn {
  font-size: 13px;
  padding: 17px 0;
  border-radius: 6px;
}
.st-hero__cta .btn--ghost { padding: 16px 0; border-color: #d8d5d0; }

/* ------------------------------------------------------------------ */
/* ANFAHRT / ÖFFNUNGSZEITEN / VOR DER ANLIEFERUNG                      */
/* ------------------------------------------------------------------ */
.st-info {
  background: #f6f4f1;
  border-top: 1px solid #e6e3df;
  padding: 52px var(--gx) 50px;
}

.st-info__grid {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.st-info__col { display: flex; gap: 18px; }
.st-info__col + .st-info__col {
  border-top: 1px solid #ddd9d3;
  padding-top: 28px;
}

.st-info__icon { width: 44px; height: 44px; }
.st-info__body { min-width: 0; }

.st-info__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  font-weight: 400;
}
.st-info__num { font-size: 19px; color: var(--o); line-height: 1; }
.st-info__t {
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: .4px;
  color: var(--ink-2);
  text-transform: uppercase;
}

.st-info__txt {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--tx-2);
}

.st-info__link {
  margin-top: 12px;
  gap: 10px;
  font-size: 12px;
  letter-spacing: .8px;
}
.st-info__link--d { display: none; }

/* Öffnungszeiten */
.st-hours {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.65;
  font-weight: 500;
  color: var(--tx-2);
}
.st-hours__v { white-space: nowrap; }

/* Vor der Anlieferung — Checkliste */
.st-checks {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.st-checks li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.55;
  font-weight: 500;
  color: var(--tx-2);
}
.st-checks li svg { width: 16px; height: 16px; margin-top: 2px; }
.st-checks strong { color: var(--ink-2); font-weight: 700; }

/* ------------------------------------------------------------------ */
/* SO FINDEN SIE SICH VOR ORT ZURECHT                                  */
/* ------------------------------------------------------------------ */
.st-orient {
  position: relative;
  overflow: hidden;
  background: #0c0c0c;
  padding: 52px 0 50px;
}
.st-orient__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .18;
  display: block;
}
.st-orient__veil { display: none; }

.st-orient__inner { position: relative; z-index: 1; }
.st-orient__body { padding: 0 var(--gx); }

.st-orient__h2 {
  font-size: 29px;
  line-height: 1.25;
  letter-spacing: .5px;
}
.st-orient__lead {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.7;
  color: #d8d6d1;
}

.st-orient__row {
  gap: 14px;
  padding: 26px var(--gx) 0;
}

.st-step {
  flex: none;
  width: 180px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid #3a3a38;
  border-radius: 8px;
  padding: 24px 16px;
  text-align: center;
}
.st-step__ring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border: 2px solid #ffffff;
  border-radius: 50%;
}
.st-orient__row > div:nth-of-type(1) .st-step__ring svg { width: 28px; height: 20px; }
.st-orient__row > div:nth-of-type(2) .st-step__ring svg { width: 26px; height: 26px; }
.st-orient__row > div:nth-of-type(3) .st-step__ring svg { width: 24px; height: 26px; }
.st-orient__row > div:nth-of-type(4) .st-step__ring svg { width: 26px; height: 26px; }

.st-step__t {
  margin-top: 14px;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: .6px;
  color: #ffffff;
  text-transform: uppercase;
}
.st-step__d {
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.55;
  font-weight: 500;
  color: #c9c7c2;
}

.st-arrow { display: none; }

/* ------------------------------------------------------------------ */
/* SO LÄUFT IHRE ANLIEFERUNG (Desktop only)                            */
/* ------------------------------------------------------------------ */
.st-flow { display: none; }

/* ------------------------------------------------------------------ */
/* KARTE-SEKTION: Hinweis + Kontakt + Karte + CTA                      */
/* ------------------------------------------------------------------ */
.st-map-sec {
  background: #f2f0ed;
  padding: 52px 0 60px;
}

/* Nicht aus Templin? */
.st-note {
  margin: 0 18px;
  background: #eae7e2;
  border-radius: 10px;
  padding: 24px 20px;
}
.st-note__t {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .4px;
  color: var(--ink-2);
  text-transform: uppercase;
}
.st-note__d {
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--tx-2);
}
.st-note__btn {
  display: flex;
  width: 100%;
  margin-top: 16px;
  background: transparent;
  border: 1.5px solid var(--o);
  color: var(--o);
  font-size: 12px;
  padding: 14px 0;
  border-radius: 6px;
}
.st-note__btn:hover { background: var(--o); color: #ffffff; }
.st-note__btn svg path { stroke: currentColor; }

/* Direkt zu uns */
.st-karte {
  display: flex;
  flex-direction: column;
  margin-top: 44px;
  padding: 0 var(--gx);
}
.st-karte__col { display: contents; }

.st-karte__head {
  border-left: 3px solid var(--o);
  padding-left: 20px;
}
.st-karte__h2 {
  margin: 0;
  font-size: 29px;
  letter-spacing: .5px;
  color: var(--ink-2);
}

.st-karte__row { display: flex; gap: 12px; }
.st-karte__row--addr { margin-top: 24px; align-items: flex-start; }
.st-karte__row--addr svg { width: 18px; height: 18px; margin-top: 2px; }
.st-karte__row--tel { margin-top: 14px; align-items: center; }
.st-karte__row--mail { margin-top: 12px; align-items: center; }
.st-karte__row--tel svg,
.st-karte__row--mail svg { width: 17px; height: 17px; }

.st-karte__addr {
  font-style: normal;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--tx-2);
}
.st-karte__addr strong { color: var(--ink-2); }

.st-karte__link {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  word-break: break-word;
}
.st-karte__link:hover { color: var(--o); }

.st-karte__map {
  order: 5;
  position: relative;
  height: 260px;
  margin-top: 22px;
  border: 1px solid #e2dfd9;
  border-radius: 10px;
  overflow: hidden;
}
.st-karte__map img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.st-karte__route {
  order: 6;
  display: flex;
  width: 100%;
  margin-top: 16px;
  font-size: 12.5px;
  padding: 16px 0;
  border-radius: 6px;
}

/* Karten-Pin */
.st-pin {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .14);
  padding: 14px 18px;
}
.st-pin__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 38px;
  height: 38px;
  background: var(--ink-2);
  border-radius: 50%;
}
.st-pin__ico svg { width: 17px; height: 17px; }
.st-pin__t {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .4px;
  color: var(--ink-2);
  text-transform: uppercase;
}
.st-pin__d {
  margin-top: 3px;
  font-size: 11.5px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--tx-2);
}

/* Abschluss-CTA */
.st-cta {
  margin: 28px var(--gx) 0;
  background: #ffffff;
  border: 1px solid #e6e3df;
  border-radius: 10px;
  padding: 22px 20px;
  text-align: center;
}
.st-cta__t {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-2);
}
.st-cta__btn {
  display: flex;
  width: 100%;
  margin-top: 14px;
  font-size: 12.5px;
  padding: 15px 0;
  border-radius: 6px;
}

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

  .br-d { display: inline; }

  /* ---------------- HERO ---------------- */
  .st-hero__media {
    position: absolute;
    right: 0;
    top: 0;
    width: calc(1090 * var(--s));
    height: 100%;
  }
  .st-hero__media img { width: 100%; height: 100%; }
  .st-hero__veil {
    background:
      linear-gradient(90deg, #f2f0ed 0%, rgba(242, 240, 237, 0) 36%),
      linear-gradient(0deg, #f2f0ed 0%, rgba(242, 240, 237, 0) 10%);
  }

  .st-hero__body {
    position: relative;
    z-index: 1;
    width: calc(460 * var(--s));
    padding: calc(60 * var(--s)) 0 calc(66 * var(--s)) calc(60 * var(--s));
  }

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

  .st-hero__h1 {
    margin-top: calc(22 * var(--s));
    font-size: calc(62 * var(--s));
  }
  .st-hero__line { display: block; }

  .st-hero__addr {
    gap: calc(14 * var(--s));
    margin-top: calc(36 * var(--s));
    font-size: max(13px, calc(15.5 * var(--s)));
  }
  .st-hero__addr svg {
    width: calc(20 * var(--s));
    height: calc(20 * var(--s));
    margin-top: calc(2 * var(--s));
  }

  .st-hero__lead {
    margin-top: calc(26 * var(--s));
    font-size: max(12.5px, calc(15 * var(--s)));
    line-height: 1.75;
    max-width: calc(330 * var(--s));
  }

  .st-hero__cta {
    flex-direction: row;
    align-items: center;
    gap: calc(18 * var(--s));
    margin-top: calc(36 * var(--s));
  }
  .st-hero__cta .btn {
    font-size: max(11px, calc(12.5 * var(--s)));
    gap: calc(12 * var(--s));
    padding: calc(15 * var(--s)) calc(24 * var(--s));
    border-radius: calc(5 * var(--s));
  }
  .st-hero__cta .btn--ghost { padding: calc(14 * var(--s)) calc(24 * var(--s)); }

  /* ---------------- ANFAHRT / INFOS ---------------- */
  .st-info { padding: calc(64 * var(--s)) 0 calc(58 * var(--s)); }

  .st-info__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1.15fr;
    gap: 0;
    padding: 0 calc(60 * var(--s));
  }

  .st-info__col { gap: calc(24 * var(--s)); }
  .st-info__col + .st-info__col { border-top: none; padding-top: 0; }
  .st-info__col:nth-child(1) {
    padding-right: calc(44 * var(--s));
    border-right: 1px solid #ddd9d3;
  }
  .st-info__col:nth-child(2) {
    padding-left: calc(48 * var(--s));
    border-right: 1px solid #ddd9d3;
  }
  .st-info__col:nth-child(3) { padding-left: calc(52 * var(--s)); }

  .st-info__icon { width: calc(56 * var(--s)); height: calc(56 * var(--s)); }

  .st-info__head { gap: calc(12 * var(--s)); }
  .st-info__num { font-size: calc(22 * var(--s)); }
  .st-info__t { font-size: max(13px, calc(16 * var(--s))); }

  .st-info__txt {
    margin-top: calc(14 * var(--s));
    font-size: max(12.5px, calc(14.5 * var(--s)));
    line-height: 1.65;
  }

  .st-info__link {
    margin-top: calc(18 * var(--s));
    gap: calc(10 * var(--s));
    font-size: max(11px, calc(12.5 * var(--s)));
  }
  .st-info__link--d { display: inline-flex; }

  .st-hours { margin-top: 0; }
  .st-hours__row {
    margin-top: calc(14 * var(--s));
    font-size: max(12.5px, calc(14.5 * var(--s)));
    line-height: 1.65;
  }
  .st-hours__d { display: block; }

  .st-checks {
    margin-top: calc(14 * var(--s));
    gap: calc(11 * var(--s));
  }
  .st-checks li {
    gap: calc(11 * var(--s));
    font-size: max(12px, calc(13.5 * var(--s)));
  }
  .st-checks li svg {
    width: calc(17 * var(--s));
    height: calc(17 * var(--s));
    margin-top: calc(2 * var(--s));
  }

  /* ---------------- VOR ORT ZURECHT ---------------- */
  .st-orient { padding: 0; }
  .st-orient__bg { opacity: .22; }
  .st-orient__veil {
    display: block;
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #0c0c0c 8%, rgba(12, 12, 12, .55) 55%, rgba(12, 12, 12, .75) 100%);
  }

  .st-orient__inner {
    display: flex;
    align-items: center;
    gap: calc(80 * var(--s));
    padding: calc(86 * var(--s)) calc(90 * var(--s)) calc(86 * var(--s)) calc(60 * var(--s));
  }
  .st-orient__body {
    width: calc(330 * var(--s));
    flex: none;
    padding: 0;
  }
  .st-orient__h2 { font-size: calc(41 * var(--s)); }
  .st-orient__lead {
    margin-top: calc(26 * var(--s));
    font-size: max(12.5px, calc(15 * var(--s)));
    line-height: 1.75;
    max-width: calc(290 * var(--s));
  }

  .st-orient__row {
    display: flex;
    flex: 1;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0;
    padding: 0;
    overflow: visible;
  }

  .st-step {
    width: calc(150 * var(--s));
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
  }
  .st-step--wide { width: calc(170 * var(--s)); }

  .st-step__ring {
    width: calc(86 * var(--s));
    height: calc(86 * var(--s));
    border-width: calc(2 * var(--s));
  }
  .st-orient__row > div:nth-of-type(1) .st-step__ring svg { width: calc(34 * var(--s)); height: calc(24 * var(--s)); }
  .st-orient__row > div:nth-of-type(2) .st-step__ring svg { width: calc(32 * var(--s)); height: calc(32 * var(--s)); }
  .st-orient__row > div:nth-of-type(3) .st-step__ring svg { width: calc(30 * var(--s)); height: calc(32 * var(--s)); }
  .st-orient__row > div:nth-of-type(4) .st-step__ring svg { width: calc(32 * var(--s)); height: calc(32 * var(--s)); }

  .st-step__t {
    margin-top: calc(20 * var(--s));
    font-size: max(12.5px, calc(15 * var(--s)));
  }
  .st-step__d {
    margin-top: calc(10 * var(--s));
    font-size: max(12px, calc(13.5 * var(--s)));
    line-height: 1.6;
  }

  .st-arrow {
    display: block;
    width: calc(70 * var(--s));
    height: calc(8 * var(--s));
    margin-top: calc(40 * var(--s));
  }

  /* ---------------- SO LÄUFT IHRE ANLIEFERUNG ---------------- */
  .st-flow {
    display: flex;
    align-items: flex-start;
    gap: calc(70 * var(--s));
    background: #f2f0ed;
    padding: calc(88 * var(--s)) calc(60 * var(--s)) 0;
  }
  .st-flow__head { width: calc(330 * var(--s)); flex: none; }
  .st-flow__h2 {
    margin: 0;
    font-size: calc(33 * var(--s));
    line-height: 1.25;
    letter-spacing: .5px;
    color: var(--ink-2);
  }
  .st-flow__rule {
    display: block;
    width: calc(44 * var(--s));
    height: calc(4 * var(--s));
    margin-top: calc(20 * var(--s));
    background: var(--o);
  }

  .st-flow__main { flex: 1; }
  .st-flow__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }
  .st-flow__step { width: calc(150 * var(--s)); text-align: center; }
  .st-flow__step--wide { width: calc(180 * var(--s)); }
  .st-flow__icon {
    display: inline-block;
    width: auto;
    height: calc(52 * var(--s));
  }
  .st-flow__t {
    margin-top: calc(16 * var(--s));
    font-size: max(12px, calc(14 * var(--s)));
    font-weight: 800;
    letter-spacing: .6px;
    color: var(--ink-2);
    text-transform: uppercase;
  }
  .st-flow__arrow {
    width: calc(56 * var(--s));
    height: calc(12 * var(--s));
    margin-top: calc(22 * var(--s));
  }
  .st-flow__note {
    margin-top: calc(26 * var(--s));
    text-align: center;
    font-size: max(12px, calc(13.5 * var(--s)));
    font-weight: 500;
    color: #5a5751;
  }

  /* ---------------- KARTE-SEKTION ---------------- */
  .st-map-sec { padding: 0 calc(60 * var(--s)) calc(84 * var(--s)); }

  .st-note {
    display: flex;
    align-items: center;
    gap: calc(40 * var(--s));
    margin: calc(64 * var(--s)) 0 0;
    border-radius: calc(10 * var(--s));
    padding: calc(34 * var(--s)) calc(44 * var(--s));
  }
  .st-note__icon {
    width: calc(58 * var(--s));
    height: calc(44 * var(--s));
  }
  .st-note__body { flex: 1; }
  .st-note__t { font-size: max(14px, calc(17 * var(--s))); }
  .st-note__d {
    margin-top: calc(8 * var(--s));
    font-size: max(12.5px, calc(14.5 * var(--s)));
    max-width: calc(460 * var(--s));
  }
  .st-note__btn {
    display: inline-flex;
    width: auto;
    margin-top: 0;
    font-size: max(11px, calc(12.5 * var(--s)));
    padding: calc(14 * var(--s)) calc(26 * var(--s));
    border-radius: calc(5 * var(--s));
  }

  .st-karte {
    flex-direction: row;
    align-items: stretch;
    gap: calc(56 * var(--s));
    margin-top: calc(76 * var(--s));
    padding: 0;
  }
  .st-karte__col {
    display: block;
    width: calc(330 * var(--s));
    flex: none;
    border-left: 3px solid var(--o);
    padding-left: calc(34 * var(--s));
  }
  .st-karte__head { border-left: none; padding-left: 0; }
  .st-karte__h2 { font-size: calc(33 * var(--s)); }

  .st-karte__row { gap: calc(14 * var(--s)); }
  .st-karte__row--addr { margin-top: calc(34 * var(--s)); }
  .st-karte__row--addr svg {
    width: calc(19 * var(--s));
    height: calc(19 * var(--s));
    margin-top: calc(2 * var(--s));
  }
  .st-karte__row--tel { margin-top: calc(22 * var(--s)); }
  .st-karte__row--mail { margin-top: calc(16 * var(--s)); }
  .st-karte__row--tel svg,
  .st-karte__row--mail svg {
    width: calc(18 * var(--s));
    height: calc(18 * var(--s));
  }

  .st-karte__addr {
    font-size: max(12.5px, calc(14.5 * var(--s)));
    line-height: 1.65;
  }
  .st-karte__link { font-size: max(12.5px, calc(14.5 * var(--s))); }

  .st-karte__route {
    display: inline-flex;
    width: auto;
    margin-top: calc(34 * var(--s));
    font-size: max(11px, calc(12.5 * var(--s)));
    padding: calc(15 * var(--s)) calc(26 * var(--s));
    border-radius: calc(5 * var(--s));
  }

  .st-karte__map {
    flex: 1;
    height: auto;
    min-height: calc(300 * var(--s));
    margin-top: 0;
    border-radius: calc(10 * var(--s));
  }

  .st-pin {
    gap: calc(16 * var(--s));
    border-radius: calc(10 * var(--s));
    box-shadow: 0 calc(12 * var(--s)) calc(30 * var(--s)) rgba(0, 0, 0, .14);
    padding: calc(18 * var(--s)) calc(24 * var(--s));
  }
  .st-pin__ico { width: calc(46 * var(--s)); height: calc(46 * var(--s)); }
  .st-pin__ico svg { width: calc(20 * var(--s)); height: calc(20 * var(--s)); }
  .st-pin__t { font-size: max(12px, calc(14 * var(--s))); }
  .st-pin__d {
    margin-top: calc(4 * var(--s));
    font-size: max(11.5px, calc(13 * var(--s)));
  }

  .st-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(36 * var(--s));
    margin: calc(34 * var(--s)) 0 0 calc(386 * var(--s));
    border-radius: calc(10 * var(--s));
    padding: calc(26 * var(--s)) calc(40 * var(--s));
    text-align: left;
  }
  .st-cta__t { font-size: max(12.5px, calc(15 * var(--s))); }
  .st-cta__btn {
    display: inline-flex;
    width: auto;
    margin-top: 0;
    font-size: max(11px, calc(12.5 * var(--s)));
    padding: calc(15 * var(--s)) calc(26 * var(--s));
    border-radius: calc(5 * var(--s));
  }
}