/* ======================================================================
   Taxi Chemnitz 24h - Vermittlung · Zusatzdienste 2026-08-14
   Kurierdienst, Besorgungsfahrten, Buszubringer und Apothekennotdienst.
   Vollständig unter .extra-service-page gekapselt.
   ====================================================================== */

.extra-service-page {
  --es-brand: #f6c400;
  --es-brand-light: #ffe36f;
  --es-blue: #2563eb;
  --es-green: #16a34a;
  --es-ink: #0f172a;
  --es-muted: #526176;
  --es-bg: #f6f8fb;
  --es-surface: #ffffff;
  --es-surface-soft: #edf2f7;
  --es-border: rgba(15, 23, 42, .12);
  --es-border-strong: rgba(15, 23, 42, .20);
  --es-shadow: 0 18px 48px rgba(2, 8, 23, .12);
  --es-shadow-soft: 0 10px 30px rgba(2, 8, 23, .08);
  color: var(--es-ink);
  background: var(--es-bg);
  overflow: clip;
}

@media (prefers-color-scheme: dark) {
  .extra-service-page {
    --es-ink: #f8fafc;
    --es-muted: #cbd5e1;
    --es-bg: #0b0d10;
    --es-surface: #15191d;
    --es-surface-soft: #11161b;
    --es-border: rgba(148, 163, 184, .26);
    --es-border-strong: rgba(148, 163, 184, .40);
    --es-shadow: 0 22px 54px rgba(0, 0, 0, .38);
    --es-shadow-soft: 0 12px 34px rgba(0, 0, 0, .28);
    color-scheme: dark;
  }
}

.extra-service-page *,
.extra-service-page *::before,
.extra-service-page *::after { box-sizing: border-box; }

.extra-service-page a:not(.btn) {
  color: #1d4ed8;
  text-underline-offset: .16em;
}
.extra-service-page a:not(.btn):hover { color: #1e40af; }
@media (prefers-color-scheme: dark) {
  .extra-service-page a:not(.btn) { color: #7db7ff; }
  .extra-service-page a:not(.btn):hover { color: #b7d7ff; }
}

.extra-service-section {
  padding: clamp(3.2rem, 6vw, 5.4rem) 0;
  scroll-margin-top: 6rem;
}
.extra-service-section--soft { background: var(--es-surface-soft); }

.extra-service-heading {
  max-width: 74rem;
  margin-bottom: 1.6rem;
}
.extra-service-heading h2,
.extra-service-answer h2,
.extra-service-card h2,
.extra-service-limit-card h2,
.extra-service-emergency h2,
.extra-service-final h2 {
  margin: 0 0 .72rem;
  color: var(--es-ink);
  font-size: clamp(1.65rem, 2.9vw, 2.35rem);
  font-weight: 880;
  line-height: 1.14;
  letter-spacing: -.028em;
}
.extra-service-heading p,
.extra-service-answer p,
.extra-service-card p,
.extra-service-limit-card p,
.extra-service-emergency p {
  color: var(--es-muted);
  line-height: 1.7;
}

.extra-service-kicker {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  margin-bottom: .78rem;
  padding: .43rem .72rem;
  border: 1px solid rgba(37, 99, 235, .32);
  border-radius: 999px;
  color: #173b83;
  background: rgba(37, 99, 235, .085);
  font-size: .8rem;
  font-weight: 830;
  line-height: 1.2;
  letter-spacing: .02em;
}
@media (prefers-color-scheme: dark) {
  .extra-service-kicker {
    color: #f5f9ff;
    border-color: rgba(96, 165, 250, .60);
    background: rgba(37, 99, 235, .25);
  }
}

/* Hero */
.extra-service-hero {
  position: relative;
  min-height: clamp(36rem, 76vh, 50rem);
  display: grid;
  align-items: center;
  overflow: hidden;
  color: #fff;
  background: #061424;
}
.extra-service-hero__picture,
.extra-service-hero__picture img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.extra-service-hero__picture img {
  object-fit: cover;
  object-position: 62% center;
}
.extra-service-hero__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(3, 12, 25, .97) 0%, rgba(4, 17, 34, .87) 46%, rgba(4, 17, 34, .40) 75%, rgba(4, 17, 34, .20) 100%),
    linear-gradient(0deg, rgba(3, 12, 25, .70) 0%, transparent 42%);
}
.extra-service-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: clamp(3.2rem, 8vw, 6.4rem);
  padding-bottom: clamp(4.2rem, 9vw, 7rem);
}
.extra-service-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  align-items: center;
  margin-bottom: 1.45rem;
  color: #cddaea;
  font-size: .82rem;
}
.extra-service-breadcrumb a { color: #e7f0fb !important; text-decoration: none; }
.extra-service-breadcrumb a:hover { text-decoration: underline; }
.extra-service-hero__copy { max-width: 51rem; }
.extra-service-hero .extra-service-kicker {
  color: #fff9cf;
  border-color: rgba(246, 196, 0, .58);
  background: rgba(246, 196, 0, .13);
}
.extra-service-hero h1 {
  max-width: 18ch;
  margin: 0 0 1.15rem;
  color: #fff;
  font-size: clamp(2.35rem, 5.15vw, 4.55rem);
  font-weight: 920;
  line-height: 1.02;
  letter-spacing: -.045em;
  text-shadow: 0 3px 24px rgba(0, 0, 0, .36);
}
.extra-service-hero__lead {
  max-width: 68ch;
  margin: 0;
  color: #dbe7f5;
  font-size: clamp(1.04rem, 1.7vw, 1.24rem);
  line-height: 1.68;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .34);
}
.extra-service-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .72rem;
  margin-top: 1.6rem;
}
.extra-service-btn {
  min-height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: .76rem;
  padding: .76rem 1.08rem;
  font-weight: 830;
  line-height: 1.1;
  text-decoration: none !important;
  transition: transform .18s ease, filter .18s ease, border-color .18s ease, background-color .18s ease;
}
.extra-service-btn:hover { transform: translateY(-1px); }
.extra-service-btn--primary {
  color: #111827 !important;
  border: 1px solid #ffe36f !important;
  background: linear-gradient(180deg, #ffe15d, var(--es-brand)) !important;
  box-shadow: 0 10px 26px rgba(246, 196, 0, .24);
}
.extra-service-btn--light {
  color: #101827 !important;
  border: 1px solid rgba(255, 255, 255, .72) !important;
  background: rgba(255, 255, 255, .95) !important;
}
.extra-service-btn--whatsapp {
  color: #d9ffea !important;
  border: 1px solid rgba(74, 222, 128, .55) !important;
  background: rgba(22, 163, 74, .20) !important;
}
.extra-service-confirmation {
  max-width: 75ch;
  margin: 1.35rem 0 0;
  padding: .88rem 1rem;
  border: 1px solid rgba(203, 213, 225, .22);
  border-radius: .8rem;
  color: #e7eef8;
  background: rgba(9, 24, 43, .58);
  font-size: .9rem;
  line-height: 1.55;
  backdrop-filter: blur(8px);
}

/* Quick answer */
.extra-service-answer { padding-top: clamp(2.65rem, 4vw, 3.7rem); }
.extra-service-answer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(18rem, .8fr);
  gap: 2rem;
  align-items: center;
  padding: clamp(1.45rem, 3vw, 2.4rem);
  border: 1px solid var(--es-border);
  border-radius: 1.3rem;
  background: var(--es-surface);
  box-shadow: var(--es-shadow-soft);
}
.extra-service-answer__grid > div > p { margin-bottom: 0; font-size: 1.03rem; }
.extra-service-answer__note {
  padding: 1.2rem;
  border: 1px solid var(--es-border);
  border-radius: 1rem;
  background: var(--es-surface-soft);
}
.extra-service-answer__note strong { display: block; margin-bottom: .42rem; color: var(--es-ink); }
.extra-service-answer__note p { margin: 0 0 .75rem; font-size: .92rem; }
.extra-service-answer__note a { font-weight: 850; }

/* Benefits */
.extra-service-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .9rem;
}
.extra-service-benefits article {
  min-width: 0;
  padding: 1.25rem;
  border: 1px solid var(--es-border);
  border-radius: 1rem;
  background: var(--es-surface);
  box-shadow: var(--es-shadow-soft);
}
.extra-service-benefits article > span {
  width: 2.55rem;
  height: 2.55rem;
  display: grid;
  place-items: center;
  margin-bottom: .95rem;
  border-radius: 50%;
  color: #102115;
  background: #ffe15d;
  font-weight: 900;
}
.extra-service-benefits h3 { margin: 0 0 .45rem; color: var(--es-ink); font-size: 1.08rem; font-weight: 850; }
.extra-service-benefits p { margin: 0; color: var(--es-muted); line-height: 1.6; }

/* Split and media */
.extra-service-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(20rem, .95fr);
  gap: clamp(1.5rem, 4vw, 3.2rem);
  align-items: center;
}
.extra-service-split h2 { margin: 0 0 .75rem; color: var(--es-ink); font-size: clamp(1.65rem, 2.9vw, 2.35rem); font-weight: 880; line-height: 1.14; letter-spacing: -.028em; }
.extra-service-split > div > p { color: var(--es-muted); line-height: 1.7; }
.extra-service-inline-image {
  display: block;
  overflow: hidden;
  border: 1px solid var(--es-border);
  border-radius: 1.2rem;
  background: var(--es-surface);
  box-shadow: var(--es-shadow);
}
.extra-service-inline-image img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.extra-service-checklist { margin: 1.15rem 0 0; padding: 0; list-style: none; }
.extra-service-checklist li {
  position: relative;
  padding: .6rem 0 .6rem 1.75rem;
  color: var(--es-muted);
  line-height: 1.55;
}
.extra-service-checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: .66rem;
  width: 1.1rem;
  height: 1.1rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #102115;
  background: #64e58a;
  font-size: .68rem;
  font-weight: 900;
}

/* Process */
.extra-service-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.extra-service-steps li {
  min-width: 0;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: .85rem;
  padding: 1.2rem;
  border: 1px solid var(--es-border);
  border-radius: 1rem;
  background: var(--es-surface);
}
.extra-service-steps li > span {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(246, 196, 0, .45);
  border-radius: 50%;
  color: #172033;
  background: #ffe15d;
  font-weight: 900;
}
.extra-service-steps h3 { margin: .2rem 0 .4rem; color: var(--es-ink); font-size: 1.02rem; font-weight: 850; }
.extra-service-steps p { margin: 0; color: var(--es-muted); line-height: 1.55; }

/* Info cards */
.extra-service-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.extra-service-card,
.extra-service-limit-card,
.extra-service-emergency__card {
  padding: clamp(1.35rem, 3vw, 2.1rem);
  border: 1px solid var(--es-border);
  border-radius: 1.2rem;
  background: var(--es-surface);
  box-shadow: var(--es-shadow-soft);
}
.extra-service-card--price {
  background:
    radial-gradient(620px 260px at 100% 0%, rgba(246, 196, 0, .11), transparent 66%),
    var(--es-surface);
}
.extra-service-note {
  padding: .8rem .9rem;
  border-left: .26rem solid var(--es-brand);
  border-radius: .2rem .7rem .7rem .2rem;
  background: var(--es-surface-soft);
  font-size: .9rem;
}
.extra-service-text-link { display: inline-flex; margin-top: .35rem; font-weight: 850; text-decoration: none; }

.extra-service-limit-card {
  border-color: rgba(217, 119, 6, .36);
  background:
    linear-gradient(135deg, rgba(245, 158, 11, .09), transparent 58%),
    var(--es-surface);
}
.extra-service-limit-card ul { margin: 1rem 0 0; padding-left: 1.25rem; }
.extra-service-limit-card li { color: var(--es-muted); line-height: 1.55; }
.extra-service-limit-card li + li { margin-top: .45rem; }

/* Emergency pharmacy safety box */
.extra-service-emergency { padding-top: 0; }
.extra-service-emergency__card {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(15rem, .75fr);
  gap: 1.3rem;
  align-items: center;
  border-color: rgba(239, 68, 68, .38);
  background:
    radial-gradient(700px 300px at 100% 0%, rgba(239, 68, 68, .11), transparent 65%),
    var(--es-surface);
}
.extra-service-emergency__links { display: grid; gap: .65rem; }
.extra-service-emergency__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .85rem 1rem;
  border: 1px solid var(--es-border);
  border-radius: .8rem;
  color: var(--es-ink) !important;
  background: var(--es-surface-soft);
  font-weight: 800;
  text-decoration: none;
}
.extra-service-emergency__links a:hover { border-color: rgba(37, 99, 235, .5); }

/* Related links */
.extra-service-related {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .8rem;
}
.extra-service-related a {
  min-height: 4.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding: 1rem;
  border: 1px solid var(--es-border);
  border-radius: .9rem;
  color: var(--es-ink) !important;
  background: var(--es-surface);
  box-shadow: var(--es-shadow-soft);
  font-weight: 820;
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.extra-service-related a:hover { transform: translateY(-2px); border-color: rgba(246, 196, 0, .58); box-shadow: var(--es-shadow); }

/* FAQ */
.extra-service-faq {
  --bs-accordion-color: var(--es-ink);
  --bs-accordion-bg: var(--es-surface);
  --bs-accordion-border-color: var(--es-border);
  --bs-accordion-btn-color: var(--es-ink);
  --bs-accordion-btn-bg: var(--es-surface);
  --bs-accordion-active-color: var(--es-ink);
  --bs-accordion-active-bg: rgba(37, 99, 235, .10);
  --bs-accordion-btn-focus-border-color: rgba(96, 165, 250, .75);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(59, 130, 246, .23);
}
.extra-service-faq .accordion-item {
  overflow: hidden;
  color: var(--es-ink) !important;
  border: 1px solid var(--es-border);
  border-radius: .9rem;
  background: var(--es-surface);
}
.extra-service-faq .accordion-item + .accordion-item { margin-top: .72rem; }
.extra-service-faq .accordion-button,
.extra-service-faq .accordion-button.collapsed {
  min-height: 4.25rem;
  color: var(--es-ink) !important;
  background: var(--es-surface) !important;
  font-weight: 820;
  line-height: 1.4;
  opacity: 1;
}
.extra-service-faq .accordion-button:not(.collapsed) {
  color: var(--es-ink) !important;
  background: rgba(37, 99, 235, .10) !important;
  box-shadow: inset 0 -1px 0 var(--es-border);
}
.extra-service-faq .accordion-body {
  color: var(--es-muted) !important;
  background: var(--es-surface-soft);
  line-height: 1.68;
}
@media (prefers-color-scheme: dark) {
  .extra-service-faq .accordion-button::after { filter: brightness(0) invert(1); opacity: .94; }
  .extra-service-faq .accordion-button:not(.collapsed) { background: rgba(37, 99, 235, .24) !important; }
}

/* Final CTA */
.extra-service-final {
  position: relative;
  min-height: 27rem;
  display: grid;
  align-items: center;
  overflow: hidden;
  color: #fff;
  background: #071526;
}
.extra-service-final picture,
.extra-service-final picture img { position: absolute; inset: 0; width: 100%; height: 100%; }
.extra-service-final picture img { object-fit: cover; object-position: center 58%; }
.extra-service-final__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3, 12, 25, .97), rgba(3, 12, 25, .82) 58%, rgba(3, 12, 25, .46)); }
.extra-service-final__inner { position: relative; z-index: 2; max-width: 78rem; padding-top: 4.2rem; padding-bottom: 4.2rem; }
.extra-service-final__inner > span { color: #ffd84d; font-size: .83rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.extra-service-final h2 { max-width: 20ch; margin-top: .55rem; color: #fff; font-size: clamp(2rem, 4vw, 3.35rem); }
.extra-service-final p { max-width: 66ch; color: #dbe7f5; font-size: 1.08rem; line-height: 1.65; }

/* Per-service visual accent, without changing the brand system. */
.extra-service-page--kurierdienst .extra-service-benefits article > span { background: #ffe15d; }
.extra-service-page--besorgungsfahrten .extra-service-benefits article > span { background: #9ae6b4; }
.extra-service-page--buszubringer .extra-service-benefits article > span { background: #93c5fd; }
.extra-service-page--apothekennotdienst .extra-service-benefits article > span { background: #86efac; }

@media (hover: hover) {
  .extra-service-benefits article:hover,
  .extra-service-card:hover { border-color: rgba(37, 99, 235, .35); }
}

@media (max-width: 991.98px) {
  .extra-service-answer__grid,
  .extra-service-split,
  .extra-service-info-grid,
  .extra-service-emergency__card { grid-template-columns: 1fr; }
  .extra-service-benefits,
  .extra-service-steps,
  .extra-service-related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .extra-service-hero__picture img { object-position: 68% center; }
}

@media (max-width: 767.98px) {
  .extra-service-section { padding: 2.65rem 0; }
  .extra-service-hero { min-height: 39rem; }
  .extra-service-hero__shade {
    background:
      linear-gradient(180deg, rgba(3, 12, 25, .40) 0%, rgba(3, 12, 25, .80) 42%, rgba(3, 12, 25, .98) 100%),
      linear-gradient(90deg, rgba(3, 12, 25, .78), rgba(3, 12, 25, .32));
  }
  .extra-service-hero__inner { align-self: end; padding-top: 7rem; padding-bottom: 3.4rem; }
  .extra-service-hero h1 { max-width: none; font-size: clamp(2.1rem, 10vw, 3.25rem); }
  .extra-service-actions { display: grid; grid-template-columns: 1fr; }
  .extra-service-btn { width: 100%; }
  .extra-service-benefits,
  .extra-service-steps,
  .extra-service-related { grid-template-columns: 1fr; }
  .extra-service-steps li { grid-template-columns: 2.6rem minmax(0, 1fr); }
  .extra-service-steps li > span { width: 2.6rem; height: 2.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .extra-service-page *,
  .extra-service-page *::before,
  .extra-service-page *::after { scroll-behavior: auto !important; transition: none !important; }
}

@media (prefers-contrast: more) {
  .extra-service-page :is(.extra-service-card,.extra-service-benefits article,.extra-service-limit-card,.extra-service-faq .accordion-item,.extra-service-related a) { border-width: 2px; }
}