/* ==========================================================================
   Component CSS — Matches BEM classes used in header.php, footer.php, index.php
   ========================================================================== */

/* ── Skip link ─────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 9999;
}
.skip-link:focus {
  left: 8px;
  top: 8px;
  width: auto;
  height: auto;
  padding: 8px 16px;
  background: #fff;
  color: #16163f;
  font-weight: 600;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* ── Top Bar ───────────────────────────────────────────────── */
.topbar {
  background: #0070CC;
  color: #fff;
  font-size: 0.85rem;
  padding: 8px 0;
}
.topbar__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.topbar__contact {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.topbar__item, .topbar__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}
.topbar__link:hover { opacity: 0.85; }
.topbar__item--address { display: none; }
@media (min-width: 768px) {
  .topbar__item--address { display: inline-flex; }
}
.topbar__social {
  display: flex;
  gap: 8px;
}
.topbar__social-link {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: transform 0.2s;
}
.topbar__social-link:hover { transform: scale(1.1); }
.topbar__social-link--whatsapp { background: #26D367; }
.topbar__social-link--instagram { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.icon { width: 16px; height: 16px; flex-shrink: 0; }

/* ── Navbar ────────────────────────────────────────────────── */
.site-header { position: sticky; top: 0; z-index: 999; }
.navbar {
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.navbar__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
}
.navbar__logo { flex-shrink: 0; }
.navbar__logo img {
  height: 44px;
  width: auto;
  display: block;
}
.navbar__menu {
  display: none;
  list-style: none;
  gap: 4px;
  align-items: center;
}
@media (min-width: 1024px) {
  .navbar__menu { display: flex; }
  .navbar__toggle { display: none !important; }
}
.navbar__item { position: relative; }
.navbar__link {
  display: block;
  padding: 8px 14px;
  color: #16163f;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  border-radius: 6px;
  transition: background 0.2s, color 0.2s;
}
.navbar__link:hover { background: #f0f4f8; color: #0094FF; }
.navbar__item--active > .navbar__link { color: #0094FF; font-weight: 600; }
.navbar__link--dropdown {
  display: flex;
  align-items: center;
  gap: 4px;
}
.icon--chevron { width: 12px; height: 12px; transition: transform 0.2s; }
.navbar__item--dropdown:hover .icon--chevron { transform: rotate(180deg); }

/* Dropdown */
.navbar__dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 260px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 8px;
  list-style: none;
  z-index: 100;
}
.navbar__item--dropdown:hover .navbar__dropdown,
.navbar__item--dropdown:focus-within .navbar__dropdown { display: block; }
.navbar__dropdown-link {
  display: block;
  padding: 10px 14px;
  color: #16163f;
  text-decoration: none;
  font-size: 0.9rem;
  border-radius: 6px;
  transition: background 0.15s;
}
.navbar__dropdown-link:hover { background: #f0f4f8; color: #0094FF; }

/* CTA button */
.navbar__cta, .btn--cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #0094FF;
  color: #fff !important;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  white-space: nowrap;
}
.navbar__cta:hover, .btn--cta:hover {
  background: #0080D8;
  transform: translateY(-1px);
}

/* Hamburger */
.navbar__toggle {
  display: flex;
  flex-direction: column;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  z-index: 1001;
}
.navbar__toggle-icon { display: block; }
.navbar__toggle-icon--close { display: none; }
.navbar__toggle.is-open .navbar__toggle-icon--open { display: none; }
.navbar__toggle.is-open .navbar__toggle-icon--close { display: block; }

/* Mobile menu */
.mobile-menu {
  display: none;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  padding: 16px 20px;
}
.mobile-menu.is-open { display: block; }
.mobile-menu__list { list-style: none; }
.mobile-menu__link {
  display: block;
  color: #16163f;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  border-bottom: 1px solid #f0f4f8;
}
.mobile-menu__link:hover { color: #0094FF; }
.mobile-menu__item--active .mobile-menu__link { color: #0094FF; font-weight: 600; }
.mobile-menu__dropdown { list-style: none; padding-left: 16px; display: none; }
.mobile-menu__item--dropdown.is-open .mobile-menu__dropdown { display: block; }
.mobile-menu__dropdown-link {
  display: block;
  padding: 8px 0;
  color: #464646;
  text-decoration: none;
  font-size: 0.9rem;
}
.mobile-menu__cta {
  display: block;
  text-align: center;
  margin-top: 16px;
  padding: 12px;
  background: #0094FF;
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn__icon { width: 18px; height: 18px; flex-shrink: 0; }
.btn__text { white-space: nowrap; }
.btn--primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: #0094FF; color: #fff; padding: 12px 24px;
  border-radius: 8px; font-weight: 600; text-decoration: none;
  border: none; cursor: pointer; transition: background 0.2s;
}
.btn--primary:hover { background: #0080D8; }
.btn--whatsapp {
  display: inline-flex; align-items: center; gap: 8px;
  background: #26D367; color: #fff; padding: 12px 24px;
  border-radius: 8px; font-weight: 600; text-decoration: none;
  transition: background 0.2s;
}
.btn--whatsapp:hover { background: #1fb855; }
.btn--white {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: #0094FF; padding: 12px 24px;
  border-radius: 8px; font-weight: 600; text-decoration: none;
  border: 2px solid #fff; transition: background 0.2s;
}
.btn--white:hover {
  background: #fff;
  color: #0094FF !important;
}
.btn--emergency {
  display: inline-flex; align-items: center; gap: 8px;
  background: #DF0000; color: #fff; padding: 14px 28px;
  border-radius: 8px; font-weight: 700; text-decoration: none;
  font-size: 1.1rem; transition: background 0.2s;
}
.btn--emergency:hover { background: #b00; }
.btn--hero {
  font-size: 1.05rem;
  padding: 14px 28px;
}

/* ── District Buttons ──────────────────────────────────────── */
.district-btn__number {
  font-weight: 700;
  margin-right: 2px;
}
.district-btn__name { font-weight: 500; }

/* ── Emergency Box ─────────────────────────────────────────── */
.emergency-box {
  background: linear-gradient(135deg, #0094FF 0%, #0070CC 100%);
  border-radius: 16px;
  padding: 40px;
  text-align: center;
  color: #fff;
  max-width: 480px;
  margin: 0 auto;
}
.emergency-box__icon svg {
  width: 48px; height: 48px; opacity: 0.9; margin-bottom: 16px;
}
.emergency-box__badge {
  display: inline-block;
  background: #DF0000;
  color: #fff;
  padding: 6px 20px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.emergency-box__phone {
  font-size: 2rem;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  margin-bottom: 12px;
}
.emergency-box__phone a { color: #fff; text-decoration: none; }
.emergency-box__text {
  font-size: 0.95rem;
  opacity: 0.9;
  margin-bottom: 20px;
  line-height: 1.5;
}

/* ── Floating Buttons (BEM) ────────────────────────────────── */
.floating-btn {
  position: fixed;
  z-index: 900;
  text-decoration: none;
  transition: transform 0.2s;
}
.floating-btn:hover { transform: scale(1.08); }
.floating-btn--whatsapp {
  bottom: 24px;
  left: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #26D367;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(38,211,103,0.4);
  animation: pulse-whatsapp 2s infinite;
}
.floating-btn--whatsapp svg { width: 28px; height: 28px; }
.floating-btn--phone {
  bottom: 24px;
  right: 20px;
  display: flex;
  align-items: center;
}
.floating-phone__number {
  bottom: 2.3em;
  background: #fff;
  color: #16163f;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 10px 20px 10px 16px;
  border-radius: 50px 0 0 50px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  letter-spacing: 0.02em;
}
.floating-btn--phone .floating-phone__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #0094FF;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,148,255,0.4);
  margin-left: -8px;
  animation: pulse-phone 2s infinite;
}
.floating-btn--phone svg { width: 24px; height: 24px; }
@media (max-width: 640px) {
  .floating-btn--phone { bottom: 0; right: 0; }
}

/* ── Footer ────────────────────────────────────────────────── */
.site-footer { background: #fff; }

/* Footer district grid */
.footer-districts {
  padding: 64px 0;
  background: linear-gradient(180deg, #f8f9fc 0%, #f0f2f8 100%);
}
.footer-districts__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
@media (min-width: 768px) { .footer-districts__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .footer-districts__grid { grid-template-columns: repeat(4, 1fr); } }
.footer-districts__btn {
  display: flex;
  align-items: center;
  padding: 15px 18px;
  background: #fff;
  color: #16163f;
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-left: 3px solid #0094FF;
  border-radius: 0 10px 10px 0;
  transition: box-shadow 0.3s ease, border-left-color 0.3s ease, color 0.2s;
}
.footer-districts__btn:hover {
  box-shadow: 0 4px 20px rgba(0, 148, 255, 0.12);
  border-left-color: #006fd6;
  color: #006fd6;
}

/* Footer contact section */
.footer-contact {
  padding: 48px 0;
  background: #f5f7fa;
}
.footer-contact__heading {
  font-size: 1.75rem;
  font-weight: 700;
  text-align: center;
  color: #16163f;
  margin-bottom: 32px;
}
.footer-contact__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
@media (min-width: 768px) { .footer-contact__grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.footer-contact__emergency { display: flex; align-items: stretch; }
.emergency-box { width: 100%; display: flex; flex-direction: column; justify-content: center; }

/* Footer badges */
.footer-badges { padding: 40px 0; background: #fff; }
.footer-badges__grid {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.footer-badges__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.footer-badges__item img { height: 64px; width: auto; object-fit: contain; }
.footer-badges__label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #464646;
}

/* Footer callback bar */
.footer-callback {
  background: #0094FF;
  padding: 20px 0;
}
.footer-callback__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}
.footer-callback__heading {
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.footer-callback__btn,
a.footer-callback__btn,
a.footer-callback__btn:visited {
  display: inline-block;
  background: #fff;
  color: #0094FF !important;
  padding: 12px 28px;
  border-radius: 8px;
  border: 2px solid #fff;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
a.footer-callback__btn:hover,
a.footer-callback__btn:focus,
a.footer-callback__btn:active {
  background: #fff;
  color: #0094FF !important;
  opacity: 0.92;
}

/* Footer bottom */
.footer-bottom {
  background: #16163f;
  padding: 40px 0;
  color: #fff;
}
.footer-bottom__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
@media (min-width: 768px) { .footer-bottom__grid { grid-template-columns: 1fr 1fr; } }
.footer-bottom__logo img { height: 48px; width: auto; margin-bottom: 16px; }
.footer-bottom__storno { margin-top: 16px; }
.footer-bottom__storno-title { font-weight: 700; margin-bottom: 8px; font-size: 0.9rem; }
.footer-bottom__storno-text { font-size: 0.8rem; opacity: 0.7; line-height: 1.5; }
.footer-bottom__map iframe {
  width: 100%;
  height: 250px;
  border: 0;
  border-radius: 8px;
}

/* Footer copyright */
.footer-copyright {
  background: rgba(0,0,0,0.3);
  text-align: center;
  padding: 14px 0;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.65);
}
.footer-copyright__text { }
.footer-copyright__link {
  color: rgba(255,255,255,0.75);
  text-decoration: none;
}
.footer-copyright__link:hover { color: #fff; }

/* ── Section heading (generic) ─────────────────────────────── */
.section-heading {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  text-align: center;
  color: #16163f;
  margin-bottom: 2rem;
}
.section-heading::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: #0094FF;
  margin: 12px auto 0;
  border-radius: 2px;
}

/* ── USP section ───────────────────────────────────────────── */
.usp-section__text h2,
.usp-section__text h3 {
  color: #16163f;
  margin-bottom: 0.75rem;
}
.usp-section__text p {
  margin-bottom: 1rem;
  line-height: 1.7;
}

/* ── Contact Form ──────────────────────────────────────────── */
/* ── Contact Form (unified component) ────────────────────────────────── */
.contact-form-wrapper { width: 100%; }
.contact-form {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-left: 3px solid #0094FF;
  border-radius: 0 12px 12px 0;
  padding: 36px 32px;
  box-shadow: 0 4px 24px rgba(0, 148, 255, 0.06);
  transition: box-shadow 0.3s ease;
}
.contact-form:focus-within {
  box-shadow: 0 6px 32px rgba(0, 148, 255, 0.10);
}
.contact-form__group {
  margin-bottom: 22px;
}
.contact-form__label {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 0.88rem;
  color: #16163f;
  margin-bottom: 7px;
  letter-spacing: 0.01em;
}
.contact-form__required {
  color: #DF0000;
  margin-left: 2px;
}
.contact-form__optional {
  color: #999;
  font-weight: 400;
  font-size: 0.8rem;
}
.contact-form__input,
.contact-form__textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid #e0e5ed;
  border-radius: 8px;
  font-family: 'Roboto', sans-serif;
  font-size: 0.95rem;
  color: #16163f;
  background: #fafbfd;
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
  outline: none;
}
.contact-form__input:focus,
.contact-form__textarea:focus {
  border-color: #0094FF;
  box-shadow: 0 0 0 3px rgba(0, 148, 255, 0.10);
  background: #fff;
}
.contact-form__input::placeholder,
.contact-form__textarea::placeholder {
  color: #a8b2c0;
}
.contact-form__textarea {
  min-height: 120px;
  resize: vertical;
}
.contact-form__honey {
  position: absolute;
  left: -9999px;
  opacity: 0;
  height: 0;
  width: 0;
  overflow: hidden;
}
.contact-form__actions {
  margin-top: 10px;
}
.contact-form__submit,
.contact-form__actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #0094FF;
  color: #fff;
  padding: 15px 28px;
  border: none;
  border-radius: 8px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.25s, box-shadow 0.25s;
  width: 100%;
  justify-content: center;
}
.contact-form__submit:hover,
.contact-form__actions .btn:hover {
  background: #0080D8;
  box-shadow: 0 4px 20px rgba(0, 148, 255, 0.20);
}
.contact-form__privacy {
  margin-top: 16px;
  font-size: 0.8rem;
  color: #666;
  line-height: 1.5;
}
.contact-form__privacy a {
  color: #0094FF;
  text-decoration: none;
  font-weight: 500;
}
.contact-form__privacy a:hover {
  text-decoration: underline;
}
.contact-form__alternatives {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e2e8f0;
}
.contact-form__alternatives-title {
  font-weight: 600;
  font-size: 0.9rem;
  color: #16163f;
}
.contact-form__alternatives-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.contact-form__alternatives-email a {
  color: #0094FF;
  text-decoration: none;
  font-weight: 500;
}
.contact-form__alternatives-email a:hover {
  text-decoration: underline;
}

/* Form validation states */
.contact-form__group--error .contact-form__input,
.contact-form__group--error .contact-form__textarea,
.contact-form__input.is-error,
.contact-form__textarea.is-error {
  border-color: #DF0000;
  box-shadow: 0 0 0 3px rgba(223, 0, 0, 0.08);
}
.contact-form__error {
  display: block;
  color: #DF0000;
  font-size: 0.8rem;
  margin-top: 5px;
}
.contact-form__alert {
  padding: 16px 20px;
  border-radius: 0 8px 8px 0;
  margin-bottom: 20px;
  font-weight: 500;
  line-height: 1.5;
}
.contact-form__alert--success {
  background: #f0fdf4;
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-left: 3px solid #22c55e;
  color: #166534;
}
.contact-form__alert--error {
  background: #fef2f2;
  border: 1px solid rgba(223, 0, 0, 0.15);
  border-left: 3px solid #DF0000;
  color: #991b1b;
}
.contact-form__alert p { margin: 0 0 4px; }
.contact-form__alert p:last-child { margin-bottom: 0; }
.contact-form__alt-contact a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media (max-width: 767px) {
  .contact-form { padding: 28px 22px; }
  .contact-form__input,
  .contact-form__textarea { padding: 12px 14px; }
}

/* ── Pulse Keyframes (for floating buttons) ───────────── */
@keyframes pulse-whatsapp {
  0%   { box-shadow: 0 0 0 0 rgba(38, 211, 103, 0.5); }
  70%  { box-shadow: 0 0 0 14px rgba(38, 211, 103, 0); }
  100% { box-shadow: 0 0 0 0 rgba(38, 211, 103, 0); }
}

@keyframes pulse-phone {
  0%   { box-shadow: 0 0 0 0 rgba(0, 148, 255, 0.45); }
  70%  { box-shadow: 0 0 0 12px rgba(0, 148, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 148, 255, 0); }
}

/* ── Section heading (used in footer) ──────────────────── */
.section-heading {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  text-align: center;
  color: #16163f;
  margin-bottom: 2rem;
  line-height: 1.3;
}
.section-heading::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: #0094FF;
  margin: 12px auto 0;
  border-radius: 2px;
}

/* Override for district section heading */
.footer-districts .section-heading {
  color: #16163f;
}
.footer-districts .section-heading::after {
  background: #0094FF;
}

/* ── Contact alternatives inside the form card ─────────── */
.contact-form__alternatives {
  margin-top: 28px;
  padding: 24px 0 0;
  border-top: 1px solid #e2e8f0;
}
.contact-form__alternatives-title {
  font-weight: 600;
  font-size: 0.9rem;
  color: #0a1e3d;
  margin-top: 16px;
  margin-bottom: 10px;
}
.contact-form__alternatives-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.contact-form__alternatives-buttons .btn {
  font-size: 0.85rem;
  padding: 10px 16px;
  min-height: 44px;
}
.contact-form__alternatives-email {
  margin-top: 0;
}
.contact-form__alternatives-email a {
  color: #0094FF;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
}
.contact-form__alternatives-email a:hover {
  text-decoration: underline;
}

/* ── Mobile menu button fix ────────────────────────────── */
.mobile-menu__link--dropdown {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  color: #16163f;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}

/* ── Responsive footer component adjustments ───────────── */
@media (max-width: 767px) {
  .footer-contact__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .footer-bottom__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .contact-form__alternatives-buttons {
    flex-direction: column;
  }
  .contact-form__alternatives-buttons .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* ── Breadcrumbs ───────────────────────────────────────────── */
.breadcrumbs {
  margin-bottom: 16px;
  font-size: 0.85rem;
}
.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  list-style: none;
}
.breadcrumbs__item {
  display: inline-flex;
  align-items: center;
}
.breadcrumbs__link {
  color: #0094FF;
  text-decoration: none;
  transition: color 0.2s;
}
.breadcrumbs__link:hover {
  color: #0080D8;
  text-decoration: underline;
}
.breadcrumbs__separator {
  margin: 0 8px;
  color: #999;
  font-size: 0.75rem;
}
.breadcrumbs__current {
  color: #666;
}

/* ==========================================================================
   INNER PAGE STYLES — Content, Page Headers, Articles, Contact, FAQ
   ========================================================================== */

/* ── Hero Overlay & Inner (BEM, used on service/district pages) ────────── */
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(10,30,61,0.7) 0%, rgba(22,22,63,0.6) 100%);
  z-index: 1;
}
.hero__inner {
  position: relative;
  z-index: 2;
  padding: 60px 20px 48px;
}
.hero__title {
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.25;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
@media (min-width: 768px) {
  .hero__title { font-size: 2.25rem; }
}
@media (min-width: 1024px) {
  .hero__title { font-size: 2.5rem; }
}

/* ── Page Header (non-hero inner pages) ───────────────────────────────── */
.page-header {
  background: linear-gradient(135deg, #0a1e3d 0%, #16163f 100%);
  color: #fff;
  padding: 48px 0 32px;
}
.page-header h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}
.page-header__subtitle {
  color: rgba(255,255,255,0.8);
  font-size: 1.05rem;
  line-height: 1.5;
  margin-bottom: 0;
}
.page-header .breadcrumbs__link { color: rgba(255,255,255,0.7); }
.page-header .breadcrumbs__link:hover { color: #fff; }
.page-header .breadcrumbs__separator { color: rgba(255,255,255,0.4); }
.page-header .breadcrumbs__current { color: rgba(255,255,255,0.9); }

/* ── Section spacing & variants ───────────────────────────────────────── */
.section {
  padding: 48px 0;
}
.section--alt {
  background: #f5f7fa;
}
.section--light {
  background: #f5f7fa;
}
.section--no-padding-top {
  padding-top: 0;
}

/* ── Content Text — comprehensive prose styling ───────────────────────── */
.content-text {
  margin: 0 auto;
  font-size: 1rem;
  line-height: 1.8;
  color: #333;
}
.content-text h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: #16163f;
  margin-bottom: 1rem;
}
.content-text h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: #16163f;
  margin: 2.5rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #e2e8f0;
}
.content-text h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: #16163f;
  margin: 2rem 0 0.75rem;
}
.content-text h4 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #0094FF;
  margin: 1.5rem 0 0.5rem;
}
.content-text p {
  margin-bottom: 1.25rem;
  color: #333;
}
.content-text ul,
.content-text ol {
  margin: 1rem 0 1.5rem 1.5rem;
  list-style: disc;
}
.content-text ol {
  list-style: decimal;
}
.content-text li {
  margin-bottom: 0.5rem;
  line-height: 1.7;
  color: #333;
}
.content-text ul li::marker {
  color: #0094FF;
}
.content-text ol li::marker {
  color: #0094FF;
  font-weight: 600;
}
.content-text a {
  color: #0094FF;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.content-text a:hover {
  border-bottom-color: #0094FF;
}
.content-text strong {
  color: #16163f;
}
.content-text blockquote {
  border-left: 4px solid #0094FF;
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
  background: #f5f7fa;
  border-radius: 0 8px 8px 0;
  font-style: italic;
}
.content-text img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 1.5rem 0;
}
.content-text table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
}
.content-text th,
.content-text td {
  padding: 10px 14px;
  border: 1px solid #e2e8f0;
  text-align: left;
}
.content-text th {
  background: #f5f7fa;
  font-weight: 600;
  color: #16163f;
}
.content-text tr:nth-child(even) {
  background: #fafbfc;
}

/* Legal page modifier */
.content-text--legal h2 {
  font-size: 1.4rem;
  margin-top: 2rem;
}
.content-text--legal h3 {
  font-size: 1.15rem;
  color: #16163f;
}

/* CTA buttons within content text */
.content-text__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 2rem 0;
}

/* Inline CTA box */
.cta-inline {
  background: linear-gradient(135deg, #0094FF, #0070CC);
  color: #fff;
  padding: 24px;
  border-radius: 12px;
  text-align: center;
  margin: 2rem 0;
}
.cta-inline a {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
}

/* ── Check List (used on ueber-uns page) ──────────────────────────────── */
.check-list {
  list-style: none !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}
.check-list li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.75rem;
  line-height: 1.7;
}
.check-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: #0094FF;
  font-weight: 700;
  font-size: 1.1rem;
}

/* ── Article / Blog Styling ───────────────────────────────────────────── */
.article-content {
  padding: 48px 0;
}
.article-content .content-text h1 {
  margin-bottom: 0.5rem;
}
.post-meta {
  color: #666;
  font-size: 0.85rem;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e2e8f0;
}

/* Blog listing cards */
.blog-listing {
  margin-top: 2rem;
}
.blog-card {
  margin-bottom: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid #e2e8f0;
}
.blog-card:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.blog-card h2 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  padding-bottom: 0;
  border-bottom: none;
  font-size: 1.4rem;
}
.blog-card h2 a {
  color: #16163f;
  border-bottom: none;
}
.blog-card h2 a:hover {
  color: #0094FF;
}
.blog-card .post-meta {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0.75rem;
}
.read-more {
  color: #0094FF;
  font-weight: 600;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap 0.2s;
}
.read-more:hover {
  gap: 8px;
}

/* ── Contact Page Layout ──────────────────────────────────────────────── */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
@media (min-width: 768px) {
  .contact-layout {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
  }
}

/* Contact info blocks */
.contact-info h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #16163f;
  margin-bottom: 1.5rem;
}
.contact-info__block {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #e2e8f0;
}
.contact-info__block:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.contact-info__block h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #16163f;
  margin-bottom: 0.5rem;
}
.contact-info__block p {
  color: #333;
  line-height: 1.7;
  margin-bottom: 0.25rem;
}
.contact-info__block a {
  color: #0094FF;
  text-decoration: none;
  font-weight: 500;
}
.contact-info__block a:hover {
  text-decoration: underline;
}
.contact-info__note {
  font-size: 0.85rem;
  color: #666;
  margin-top: 4px;
}
/* Storno Policy Card */
.storno-card {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  margin-top: 1.5rem;
  border: 1px solid #e5e7eb;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  position: relative;
  overflow: hidden;
  max-width: 100%;
  box-sizing: border-box;
}
.storno-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
  border-radius: 4px 0 0 4px;
}
.storno-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.storno-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: #fef3c7;
  border-radius: 8px;
  flex-shrink: 0;
}
.storno-card__icon svg {
  color: #d97706;
}
.storno-card__title {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: #16163f;
  margin: 0;
}
.storno-card__items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.storno-card__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.85rem;
  line-height: 1.55;
  color: #4b5563;
}
.storno-card__item svg {
  flex-shrink: 0;
  margin-top: 2px;
}
.storno-card__item--highlight {
  background: #fef9ee;
  border-radius: 8px;
  padding: 10px 12px;
  border: 1px solid #fde68a;
}
.storno-card__item--highlight strong {
  color: #92400e;
}

/* Contact form section heading */
.contact-form-section h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #16163f;
  margin-bottom: 1.5rem;
}

/* Reusable Contact Section (2-side layout used across pages) */
.contact-section {
  padding: 56px 0;
  background: #f8f9fc;
}
.contact-info__intro {
  color: #555;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

/* ── Opening Hours Table ──────────────────────────────────────────────── */
.opening-hours {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.5rem;
}
.opening-hours td {
  padding: 8px 14px;
  border-bottom: 1px solid #e2e8f0;
  font-size: 0.95rem;
  color: #333;
}
.opening-hours tr:last-child td {
  border-bottom: none;
}
.opening-hours tr:nth-child(even) {
  background: #f5f7fa;
}
.opening-hours td:first-child {
  font-weight: 600;
  color: #16163f;
  white-space: nowrap;
}
.opening-hours td:last-child {
  text-align: right;
  white-space: nowrap;
}

/* ── Callback/Ruckruf Page ────────────────────────────────────────────── */
.callback-promise {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
.callback-promise__icon {
  color: #0094FF;
  margin-bottom: 16px;
}
.callback-promise__icon svg {
  width: 64px;
  height: 64px;
}
.callback-promise__title {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #16163f;
  margin-bottom: 1rem;
}
.callback-promise__text {
  font-size: 1rem;
  line-height: 1.7;
  color: #333;
  margin-bottom: 1.5rem;
}
.callback-promise__hours {
  background: #f5f7fa;
  border-radius: 8px;
  padding: 16px 24px;
  display: inline-block;
  text-align: left;
}
.callback-promise__hours p {
  margin-bottom: 0.25rem;
  font-size: 0.95rem;
  color: #333;
}
.callback-promise__hours p:last-child {
  margin-bottom: 0;
}

.callback-form-wrapper {
  max-width: 600px;
  margin: 0 auto;
}
.callback-form-wrapper h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #16163f;
  margin-bottom: 0.5rem;
}
.callback-form-wrapper > p {
  color: #666;
  margin-bottom: 1.5rem;
}

/* ── Responsive adjustments for inner pages ───────────────────────────── */
@media (max-width: 767px) {
  .page-header {
    padding: 32px 0 24px;
  }
  .page-header h1 {
    font-size: 1.5rem;
  }
  .content-text h2 {
    font-size: 1.35rem;
  }
  .content-text h3 {
    font-size: 1.1rem;
  }
  .contact-layout {
    gap: 32px;
  }
  .content-text__cta {
    flex-direction: column;
  }
  .content-text__cta .btn--primary,
  .content-text__cta .btn--whatsapp {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  /* Storno card – reduce padding to prevent overflow on narrow screens */
  .storno-card {
    padding: 16px;
  }
  .storno-card__item--highlight {
    padding: 8px 10px;
  }
  /* Opening hours – allow wrapping on narrow screens */
  .opening-hours td:first-child,
  .opening-hours td:last-child {
    white-space: normal;
  }
  .opening-hours td {
    padding: 8px 10px;
    font-size: 0.9rem;
  }
}

/* ==========================================================================
   SERVICE PAGE SECTIONS — Reusable sectioned layout for service landing pages
   ========================================================================== */

/* ── Benefits Bar ─────────────────────────────────────────────────────── */
.benefits-bar {
  background: #f0f6ff;
  border-bottom: 1px solid #dce8f5;
  padding: 28px 0;
}
.benefits-bar__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
@media (min-width: 600px) {
  .benefits-bar__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .benefits-bar__grid { grid-template-columns: repeat(4, 1fr); }
}
.benefits-bar__item {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-start;
  text-align: left;
}
.benefits-bar__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: #0094FF;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.benefits-bar__icon svg {
  width: 22px;
  height: 22px;
}
.benefits-bar__text {
  font-weight: 600;
  font-size: 0.9rem;
  color: #16163f;
  line-height: 1.3;
}
.benefits-bar__text span {
  display: block;
  font-weight: 400;
  font-size: 0.8rem;
  color: #555;
  margin-top: 2px;
}

/* ── Service Overview (two-column: text + image) ──────────────────────── */
.service-overview {
  padding: 56px 0;
}
.service-overview__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  align-items: center;
}
@media (min-width: 768px) {
  .service-overview__grid { grid-template-columns: 1.2fr 0.8fr; gap: 48px; }
}
.service-overview__content h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: #16163f;
  margin-bottom: 1rem;
  line-height: 1.3;
}
.service-overview__content p {
  font-size: 1rem;
  line-height: 1.8;
  color: #333;
  margin-bottom: 1.25rem;
}
.service-overview__content a {
  color: #0094FF;
  text-decoration: none;
}
.service-overview__content a:hover {
  text-decoration: underline;
}
.service-overview__content strong {
  color: #16163f;
}
.service-overview__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 1.5rem;
}
.service-overview__image {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.10);
}
.service-overview__image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* ── Service Details Section ──────────────────────────────────────────── */
.service-details {
  padding: 56px 0;
  background: #f5f7fa;
}
.service-details .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.service-details__heading {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: #16163f;
  text-align: center;
  margin-bottom: 2.5rem;
}
.service-details__heading::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: #0094FF;
  margin: 12px auto 0;
  border-radius: 2px;
}
.service-details__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 600px) {
  .service-details__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .service-details__grid { grid-template-columns: repeat(3, 1fr); }
}
.service-details__card {
  background: #fff;
  border-radius: 12px;
  padding: 28px 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  border: 1px solid #e8edf2;
  transition: transform 0.2s, box-shadow 0.2s;
}
.service-details__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.service-details__card-icon {
  width: 48px;
  height: 48px;
  background: #f0f6ff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: #0094FF;
}
.service-details__card-icon svg {
  width: 24px;
  height: 24px;
}
.service-details__card h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #16163f;
  margin-bottom: 0.5rem;
}
.service-details__card p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #444;
  margin: 0;
}
.service-details__card a {
  color: #0094FF;
  text-decoration: none;
}
.service-details__card a:hover {
  text-decoration: underline;
}
.service-details__card ul {
  list-style: disc;
  margin: 0.5rem 0 0 1.25rem;
  padding: 0;
}
.service-details__card ul li {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #444;
  margin-bottom: 0.25rem;
}
.service-details__card ul li::marker {
  color: #0094FF;
}

/* Full-width variant for content-heavy sections */
.service-details--wide .service-details__grid {
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .service-details--wide .service-details__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Process Steps ────────────────────────────────────────────────────── */
.process-steps {
  padding: 56px 0;
}
.process-steps .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.process-steps__heading {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: #16163f;
  text-align: center;
  margin-bottom: 2.5rem;
}
.process-steps__heading::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: #0094FF;
  margin: 12px auto 0;
  border-radius: 2px;
}
.process-steps__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  counter-reset: step-counter;
}
@media (min-width: 600px) {
  .process-steps__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .process-steps__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1100px) {
  .process-steps__grid--5 { grid-template-columns: repeat(5, 1fr); }
  .process-steps__grid--4 { grid-template-columns: repeat(4, 1fr); }
  .process-steps__grid--6 { grid-template-columns: repeat(3, 1fr); }
  .process-steps__grid--7 { grid-template-columns: repeat(4, 1fr); }
  .process-steps__grid--8 { grid-template-columns: repeat(4, 1fr); }
}
.process-steps__item {
  text-align: center;
  padding: 24px 16px;
  position: relative;
  counter-increment: step-counter;
}
.process-steps__number {
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, #0094FF 0%, #0070CC 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 auto 16px;
  box-shadow: 0 4px 12px rgba(0,148,255,0.25);
}
.process-steps__item h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #16163f;
  margin-bottom: 0.5rem;
}
.process-steps__item p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #555;
  margin: 0;
}

/* Connector arrows on desktop */
@media (min-width: 900px) {
  .process-steps__item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 44px;
    right: -14px;
    width: 24px;
    height: 2px;
    background: #c0d8f0;
  }
}

/* ── FAQ Section (unified component) ─────────────────────────────────── */
.faq-section {
  padding: 64px 0;
  background: linear-gradient(180deg, #f8f9fc 0%, #f0f2f8 100%);
  position: relative;
}
.faq-section .container {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 20px;
}
.faq-section__heading {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: #16163f;
  text-align: center;
  margin-bottom: 2.75rem;
  letter-spacing: -0.01em;
}
.faq-section__heading::after {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  background: #0094FF;
  margin: 14px auto 0;
  border-radius: 2px;
}
.faq-section__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faq-item {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-left: 3px solid #0094FF;
  border-radius: 0 10px 10px 0;
  overflow: hidden;
  transition: box-shadow 0.3s ease, border-left-color 0.3s ease;
}
.faq-item:hover {
  box-shadow: 0 4px 24px rgba(0, 148, 255, 0.08);
}
.faq-item[open] {
  border-left-color: #006fd6;
  box-shadow: 0 4px 24px rgba(0, 148, 255, 0.10);
}
.faq-item__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  cursor: pointer;
  list-style: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #16163f;
  line-height: 1.45;
  transition: color 0.2s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.faq-item__question::-webkit-details-marker { display: none; }
.faq-item__question::marker { display: none; content: ""; }
.faq-item__question::after {
  content: "";
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #f0f6ff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230094FF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s;
}
.faq-item[open] .faq-item__question::after {
  transform: rotate(180deg);
  background-color: #dfeeff;
}
.faq-item[open] .faq-item__question {
  color: #006fd6;
}
.faq-item__answer {
  padding: 0 24px 22px 24px;
  font-size: 0.95rem;
  line-height: 1.8;
  color: #4a4a5a;
}
.faq-item__answer a {
  color: #0094FF;
  text-decoration: none;
  font-weight: 500;
}
.faq-item__answer a:hover {
  text-decoration: underline;
}
@media (max-width: 767px) {
  .faq-section { padding: 48px 0; }
  .faq-section__heading { font-size: 1.45rem; margin-bottom: 2rem; }
  .faq-item__question { padding: 18px 20px; font-size: 0.95rem; gap: 12px; }
  .faq-item__question::after { width: 26px; height: 26px; background-size: 12px; }
  .faq-item__answer { padding: 0 20px 18px; font-size: 0.9rem; }
}

/* ── CTA Section (full-width blue gradient) ───────────────────────────── */
.cta-section {
  background: linear-gradient(135deg, #0094FF 0%, #0060B8 100%);
  padding: 56px 0;
  text-align: center;
  color: #fff;
}
.cta-section .container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}
.cta-section__heading {
  font-family: 'Montserrat', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1rem;
}
.cta-section__text {
  font-size: 1.1rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.9);
  margin-bottom: 1.5rem;
}
.cta-section__phone {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  margin-bottom: 1.5rem;
  transition: opacity 0.2s;
}
.cta-section__phone:hover {
  opacity: 0.85;
}
.cta-section__buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 2rem;
}
.cta-section__badges {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 1rem;
}
.cta-section__badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
}
.cta-section__badge svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ── Related Services ─────────────────────────────────────────────────── */
.related-services {
  padding: 56px 0;
}
.related-services .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.related-services__heading {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: #16163f;
  text-align: center;
  margin-bottom: 2.5rem;
}
.related-services__heading::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: #0094FF;
  margin: 12px auto 0;
  border-radius: 2px;
}
.related-services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 600px) {
  .related-services__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .related-services__grid { grid-template-columns: repeat(3, 1fr); }
}
.related-services__card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e8edf2;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: transform 0.2s, box-shadow 0.2s;
}
.related-services__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
}
.related-services__card a {
  display: block;
  text-decoration: none;
  color: inherit;
}
.related-services__card-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}
.related-services__card-body {
  padding: 20px;
}
.related-services__card-body h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #16163f;
  margin-bottom: 0.5rem;
}
.related-services__card-body p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #555;
  margin: 0;
}
.related-services__card-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #0094FF;
  font-weight: 600;
  font-size: 0.9rem;
  margin-top: 12px;
  transition: gap 0.2s;
}
.related-services__card:hover .related-services__card-link {
  gap: 8px;
}

/* ── Extra Content Section (alternating bg, used for Altbau, brands etc.) */
.content-section {
  padding: 56px 0;
}
.content-section--alt {
  background: #f5f7fa;
}
.content-section .container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
}
.content-section__heading {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: #16163f;
  margin-bottom: 1.5rem;
  line-height: 1.3;
}
.content-section__heading::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: #0094FF;
  margin: 12px 0 0;
  border-radius: 2px;
}
.content-section p {
  font-size: 1rem;
  line-height: 1.8;
  color: #333;
  margin-bottom: 1.25rem;
}
.content-section ul {
  list-style: disc;
  margin: 0.75rem 0 1.5rem 1.5rem;
}
.content-section ul li {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #333;
  margin-bottom: 0.5rem;
}
.content-section ul li::marker {
  color: #0094FF;
}
.content-section a {
  color: #0094FF;
  text-decoration: none;
}
.content-section a:hover {
  text-decoration: underline;
}
.content-section strong {
  color: #16163f;
}
.content-section ol {
  list-style: decimal;
  margin: 0.75rem 0 1.5rem 1.5rem;
}
.content-section ol li {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #333;
  margin-bottom: 0.5rem;
}
.content-section ol li::marker {
  color: #0094FF;
  font-weight: 600;
}

/* Hero subtitle and CTA buttons inside hero */
.hero__subtitle {
  color: rgba(255,255,255,0.9);
  font-size: 1.1rem;
  line-height: 1.5;
  margin-top: 1rem;
  max-width: 700px;
}
.hero__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 1.5rem;
}

/* ── Responsive adjustments for service page sections ─────────────────── */
@media (max-width: 767px) {
  .service-overview__grid {
    grid-template-columns: 1fr;
  }
  .service-overview__content h2 {
    font-size: 1.5rem;
  }
  .cta-section__heading {
    font-size: 1.5rem;
  }
  .cta-section__phone {
    font-size: 1.5rem;
  }
  .cta-section__buttons {
    flex-direction: column;
    align-items: center;
  }
  .cta-section__buttons .btn--white,
  .cta-section__buttons .btn--whatsapp {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  .process-steps__heading,
  .service-details__heading,
  .faq-section__heading,
  .related-services__heading,
  .content-section__heading {
    font-size: 1.4rem;
  }
  .hero__buttons {
    flex-direction: column;
  }
  .hero__buttons .btn--primary,
  .hero__buttons .btn--whatsapp {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  .service-overview__cta {
    flex-direction: column;
  }
  .service-overview__cta .btn--primary,
  .service-overview__cta .btn--whatsapp {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* ── CTA Button color fixes ────────────────────────────────── */
.btn--primary, .btn--cta, .navbar__cta,
a.btn--primary, a.btn--cta {
  color: #fff !important;
}
.btn--whatsapp, a.btn--whatsapp {
  color: #fff !important;
}
.btn--white, a.btn--white {
  color: #0094FF !important;
}
.btn--emergency, a.btn--emergency {
  color: #fff !important;
}

/* ── Service Bereiche page improvements ────────────────────── */
.page-header__subtitle {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.8);
  margin-top: 8px;
  font-weight: 400;
}

/* District grid on service-bereiche overview */
.section--light .district-grid {
  max-width: 1000px;
  margin: 0 auto;
}

/* Content text CTA buttons */
.content-text__cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 2rem 0;
}

/* Section headings inside content */
.content-text > h2:first-child {
  margin-top: 0;
}

/* Better section--light */
.section--light {
  background: #f5f7fa;
  padding: 48px 0;
}

/* Service list on overview page */
.services-list-overview {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 800px;
  margin: 2rem auto;
}
@media (min-width: 768px) {
  .services-list-overview {
    grid-template-columns: 1fr 1fr;
  }
}
.services-list-overview a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #16163f;
  text-decoration: none;
  font-weight: 500;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.services-list-overview a:hover {
  border-color: #0094FF;
  box-shadow: 0 4px 12px rgba(0,148,255,0.1);
  transform: translateY(-2px);
  color: #0094FF;
}

/* ==========================================================================
   DISTRICT LANDING PAGE COMPONENTS
   ========================================================================== */

/* ── Hero CTA (phone + whatsapp buttons inside hero) ─────────────────── */
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 1.5rem;
}
@media (max-width: 767px) {
  .hero__cta {
    flex-direction: column;
  }
  .hero__cta .btn--cta,
  .hero__cta .btn--whatsapp {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* ── District Intro (two-column: text + info card) ───────────────────── */
.district-intro {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}
@media (min-width: 768px) {
  .district-intro {
    grid-template-columns: 1fr 320px;
    gap: 48px;
  }
}
.district-intro__text {
  font-size: 1rem;
  line-height: 1.8;
  color: #333;
}
.district-intro__text p {
  margin-bottom: 1.25rem;
}
.district-intro__text a {
  color: #0094FF;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.district-intro__text a:hover {
  border-bottom-color: #0094FF;
}

/* ── Info Card (quick facts sidebar) ─────────────────────────────────── */
.info-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.info-card__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f0f4f8;
  font-size: 0.95rem;
}
.info-card__row:last-child {
  border-bottom: none;
}
.info-card__label {
  font-weight: 600;
  color: #16163f;
  flex-shrink: 0;
  margin-right: 12px;
}
.info-card__value {
  color: #333;
  text-align: right;
}
.info-card__value a {
  color: #0094FF;
  text-decoration: none;
  font-weight: 600;
}
.info-card__value a:hover {
  text-decoration: underline;
}

/* ── District Services Grid (3-column) ───────────────────────────────── */
.district-services {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 600px) {
  .district-services {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .district-services {
    grid-template-columns: repeat(3, 1fr);
  }
}
.district-services__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 28px 20px;
  text-decoration: none;
  color: #16163f;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.district-services__item:hover {
  border-color: #0094FF;
  box-shadow: 0 4px 16px rgba(0,148,255,0.12);
  transform: translateY(-3px);
}
.district-services__icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: #EBF5FF;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: #0094FF;
}
.district-services__icon svg {
  width: 28px;
  height: 28px;
}
.district-services__title {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: #16163f;
}
.district-services__desc {
  font-size: 0.9rem;
  color: #666;
  line-height: 1.5;
  margin: 0;
}


/* ── Emergency CTA Section (blue gradient bar) ───────────────────────── */
.emergency-cta {
  background: linear-gradient(135deg, #0094FF, #0070CC);
  padding: 48px 0;
  text-align: center;
  color: #fff;
}
.emergency-cta__heading {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: #fff;
}
.emergency-cta__text {
  font-size: 1.05rem;
  opacity: 0.9;
  margin-bottom: 24px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}
.emergency-cta__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
@media (max-width: 767px) {
  .emergency-cta__heading {
    font-size: 1.4rem;
  }
  .emergency-cta__buttons {
    flex-direction: column;
    align-items: center;
  }
  .emergency-cta__buttons .btn--emergency,
  .emergency-cta__buttons .btn--whatsapp {
    width: 100%;
    max-width: 320px;
    justify-content: center;
    text-align: center;
  }
}

/* ── CTA Section fixes ─────────────────────────────────────── */
.cta-section {
  text-align: center;
  padding: 48px 0;
  color: #fff;
}
.cta-section p {
  max-width: 600px;
  margin: 0 auto 24px;
  line-height: 1.6;
  color: rgba(255,255,255,0.9);
}
.cta-section h2 {
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  margin-bottom: 16px;
}
.cta-section a {
  color: #fff;
}
.cta-section a.btn--white {
  color: #0094FF;
}
.cta-section .cta-section__buttons .btn--white:hover {
  color: #fff !important;
}
.cta-section .btn {
  color: #fff !important;
}

/* District content sections */
.district-content {
  margin: 0 auto;
}
.district-content h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #16163f;
  margin: 2rem 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #e2e8f0;
}
.district-content p {
  line-height: 1.8;
  margin-bottom: 1.25rem;
  color: #333;
}
.district-content a {
  color: #0094FF;
}

/* Emergency inline phone fix */
.cta-section a[href^="tel"] {
  text-decoration: none;
  font-weight: 700;
}


/* Contact block at bottom of district pages */
.district-contact {
  max-width: 600px;
  padding: 32px;
  background: #f5f7fa;
  border-radius: 12px;
  margin: 0 auto;
}
.district-contact h3 {
  border: none;
  margin-top: 0;
}


/* ── Emergency CTA section reimagined ──────────────────────── */
.emergency-cta .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}
@media (min-width: 768px) {
  .emergency-cta .container {
    grid-template-columns: 1fr auto;
    text-align: left;
  }
}
.emergency-cta {
  text-align: left !important;
}
.emergency-cta h2 {
  font-size: 1.75rem !important;
}
.emergency-cta p {
  max-width: 100% !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  color: rgba(255,255,255,0.85) !important;
  margin-bottom: 0 !important;
}
.emergency-cta__left {
  /* text side */
}
.emergency-cta__right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  background: rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 32px 40px;
  text-align: center;
  min-width: 280px;
}
.emergency-cta__phone {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  letter-spacing: 0.02em;
}
.emergency-cta__phone:hover {
  text-decoration: underline;
}
.emergency-cta__badge {
  display: inline-block;
  background: #DF0000;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 16px;
  border-radius: 50px;
}
.emergency-cta__buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
@media (max-width: 767px) {
  .emergency-cta {
    text-align: center !important;
  }
  .emergency-cta__right {
    width: 100%;
  }
}


/* Emergency CTA grid responsive */
@media (min-width: 768px) {
  .emergency-cta__grid {
    grid-template-columns: 1fr auto !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   Emergency CTA — Compact horizontal band
   ══════════════════════════════════════════════════════════════ */
.emergency-cta {
  background: #0094FF !important;
  padding: 0 !important;
  position: relative;
  overflow: hidden;
}
.emergency-cta::before,
.emergency-cta::after { display: none !important; }

.emergency-cta .container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  padding-top: 28px !important;
  padding-bottom: 28px !important;
  flex-wrap: wrap;
}

.emergency-cta__heading {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  flex-shrink: 0;
}

.emergency-cta__text {
  display: none !important;
}

.emergency-cta__buttons {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  background: none !important;
  backdrop-filter: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  flex-shrink: 0;
}
.emergency-cta__buttons > a {
  border-radius: 8px !important;
  padding: 12px 24px !important;
  font-size: 0.95rem !important;
  white-space: nowrap;
}
.emergency-cta__buttons > a:first-child {
  background: #fff !important;
  color: #0094FF !important;
  margin-top: 0;
}
.emergency-cta__buttons > a:first-child:hover {
  background: #f0f4f8 !important;
}
.emergency-cta__buttons > a:last-child {
  background: rgba(255,255,255,0.15) !important;
  border: 1.5px solid rgba(255,255,255,0.4) !important;
  color: #fff !important;
}
.emergency-cta__buttons > a:last-child:hover {
  background: rgba(255,255,255,0.25) !important;
}

@media (max-width: 767px) {
  .emergency-cta .container {
    flex-direction: column !important;
    text-align: center;
    gap: 16px !important;
  }
  .emergency-cta__heading {
    font-size: 1.15rem !important;
  }
  .emergency-cta__buttons {
    flex-direction: column !important;
    width: 100%;
  }
  .emergency-cta__buttons > a {
    width: 100%;
    justify-content: center !important;
  }
}

/* ── District Contact Section ──────────────────────────────────────────── */
.dc {
  padding: 64px 0;
  background: #0a1e3d;
  position: relative;
  overflow: hidden;
}
.dc::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0,148,255,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.dc__heading {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 40px;
  position: relative;
  padding-bottom: 16px;
}
.dc__heading::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 3px;
  background: #0094FF;
  border-radius: 2px;
}
.dc__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 768px) {
  .dc__grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}

/* ── Card (left) ── */
.dc__card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.dc__card-inner {
  padding: 32px;
}
.dc__company {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.dc__company-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
}
.dc__company-sub {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Contact rows */
.dc__row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.dc__row:last-of-type {
  border-bottom: none;
}
.dc__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(0,148,255,0.1);
  color: #0094FF;
}
.dc__icon--phone {
  background: rgba(0,148,255,0.15);
  color: #4db8ff;
}
.dc__icon--wa {
  background: rgba(37,211,102,0.12);
  color: #25D366;
}
.dc__icon--mail {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.6);
}
.dc__detail {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 2px;
}
.dc__label {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.dc__value {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.85);
  line-height: 1.5;
}
.dc__value--link {
  color: #4db8ff;
  text-decoration: none;
  transition: color 0.2s;
}
.dc__value--link:hover {
  color: #fff;
}

/* Opening hours */
.dc__hours {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.dc__hours-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}
.dc__hours-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.7);
}
.dc__hours-notdienst {
  color: #0094FF;
  font-weight: 600;
}

/* ── Actions (right) ── */
.dc__actions {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.dc__cta-block {
  background: linear-gradient(135deg, rgba(0,148,255,0.12) 0%, rgba(0,148,255,0.04) 100%);
  border: 1px solid rgba(0,148,255,0.15);
  border-radius: 16px;
  padding: 32px;
}
.dc__cta-eyebrow {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #0094FF;
  margin-bottom: 12px;
}
.dc__cta-text {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.6;
  margin-bottom: 24px;
}

/* CTA Buttons */
.dc__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px 24px;
  border-radius: 12px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.2s, background 0.2s;
  cursor: pointer;
  margin-bottom: 12px;
}
.dc__btn:last-child {
  margin-bottom: 0;
}
.dc__btn:hover {
  transform: translateY(-1px);
}
.dc__btn--call {
  background: #0094FF;
  color: #fff;
  box-shadow: 0 4px 20px rgba(0,148,255,0.3);
}
.dc__btn--call:hover {
  background: #007ad9;
  box-shadow: 0 6px 28px rgba(0,148,255,0.4);
}
.dc__btn--wa {
  background: #25D366;
  color: #fff;
  box-shadow: 0 4px 20px rgba(37,211,102,0.25);
}
.dc__btn--wa:hover {
  background: #1fb855;
  box-shadow: 0 6px 28px rgba(37,211,102,0.35);
}
.dc__btn--mail {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.85);
}
.dc__btn--mail:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2);
  color: #fff;
}

/* Service area badge */
.dc__area {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 20px 24px;
}
.dc__area-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.4);
  margin-bottom: 8px;
}
.dc__area-badge svg {
  color: #0094FF;
}
.dc__area-text {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.5;
  margin: 0;
}
.dc__area-text strong {
  color: #fff;
}

/* ── Mobile tweaks ── */
@media (max-width: 767px) {
  .dc {
    padding: 48px 0;
  }
  .dc__heading {
    font-size: 1.4rem;
  }
  .dc__card-inner {
    padding: 24px;
  }
  .dc__cta-block {
    padding: 24px;
  }
  .dc__btn {
    padding: 14px 20px;
    font-size: 0.9rem;
  }
}


/* ==========================================================================
   Blog Components — Reimagined
   ========================================================================== */


/* ── Blog Hero ────────────────────────────────────────────────────────── */
.blog-hero {
  padding: 56px 24px 48px;
  text-align: center;
  background: #fff;
  border-bottom: 1px solid #e8ecf1;
}
.blog-hero h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: 2.6rem;
  font-weight: 800;
  color: #0a1e3d;
  margin: 0 0 10px;
  letter-spacing: -0.03em;
}
.blog-hero p {
  font-size: 1.05rem;
  color: #777;
  margin: 0 auto 32px;
  max-width: 480px;
  line-height: 1.6;
}

/* ── Blog Search ──────────────────────────────────────────────────────── */
.blog-search {
  max-width: 460px;
  margin: 0 auto;
  display: flex;
  position: relative;
}
.blog-search__input {
  flex: 1;
  padding: 13px 20px;
  border: 1.5px solid #dde2e8;
  border-right: none;
  border-radius: 10px 0 0 10px;
  background: #f8f9fc;
  color: #333;
  font-size: 0.92rem;
  font-family: 'Roboto', system-ui, sans-serif;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}
.blog-search__input::placeholder { color: #aaa; }
.blog-search__input:focus {
  border-color: #0094FF;
  background: #fff;
}
.blog-search__btn {
  padding: 13px 22px;
  border: none;
  border-radius: 0 10px 10px 0;
  background: #0094FF;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  align-items: center;
}
.blog-search__btn:hover { background: #007ad6; }

/* ── Blog Category Pills ─────────────────────────────────────────────── */
.blog-cats {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 28px 24px 0;
  max-width: 1200px;
  margin: 0 auto;
}
.blog-cats__pill {
  display: inline-flex;
  align-items: center;
  padding: 7px 18px;
  border-radius: 100px;
  font-size: 0.82rem;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  white-space: nowrap;
  text-decoration: none;
  border: 1.5px solid #dde2e8;
  color: #555;
  background: #fff;
  transition: all 0.2s;
}
.blog-cats__pill:hover {
  border-color: #0094FF;
  color: #0094FF;
}
.blog-cats__pill--active {
  background: #0094FF;
  border-color: #0094FF;
  color: #fff;
}

/* ── Blog Grid — 3 columns ───────────────────────────────────────────── */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 36px 24px 64px;
}

/* ── Blog Card ────────────────────────────────────────────────────────── */
.bcard {
  background: #fff;
  border: 1px solid #e8ecf1;
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(.25,.46,.45,.94), box-shadow 0.25s;
  display: flex;
  flex-direction: column;
}
.bcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(10,30,61,0.08);
}
.bcard__img-link {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.bcard__img-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s;
}
.bcard:hover .bcard__img-link img {
  transform: scale(1.04);
}
.bcard__body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.bcard__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 0.78rem;
  color: #999;
}
.bcard__cat {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 0.68rem;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  background: #0094FF;
  color: #fff;
  transition: background 0.2s;
}
.bcard__cat:hover { background: #007ad6; }
.bcard__dot { color: #ccc; }
.bcard__title {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 8px;
  color: #0a1e3d;
}
.bcard__title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}
.bcard__title a:hover { color: #0094FF; }
.bcard__excerpt {
  font-size: 0.88rem;
  line-height: 1.55;
  color: #666;
  margin: 0 0 auto;
  padding-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bcard__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid #f0f2f5;
  margin-top: auto;
}
.bcard__author {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #333;
  font-size: 0.8rem;
  font-weight: 600;
  transition: color 0.2s;
}
.bcard__author:hover { color: #0094FF; }
.bcard__author img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}
.bcard__footer time {
  font-size: 0.78rem;
  color: #999;
  white-space: nowrap;
}

/* ── Blog Post Hero ───────────────────────────────────────────────────── */
.bpost-hero {
  text-align: center;
  padding: 56px 24px 32px;
  max-width: 1200px;
  margin: 0 auto;
}
.bpost-hero__cat {
  display: inline-flex;
  padding: 4px 14px;
  border-radius: 100px;
  font-size: 0.7rem;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  background: #0094FF;
  color: #fff;
  margin-bottom: 16px;
  transition: background 0.2s;
}
.bpost-hero__cat:hover { background: #007ad6; }
.bpost-hero__title {
  font-family: 'Montserrat', sans-serif;
  font-size: 2.2rem;
  font-weight: 800;
  color: #0a1e3d;
  line-height: 1.2;
  margin: 0 auto 20px;
  max-width: 1200px;
  letter-spacing: -0.025em;
}
.bpost-hero__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 0.85rem;
  color: #777;
  margin-bottom: 32px;
}
.bpost-hero__sep { color: #ccc; }
.bpost-hero__author {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #333;
  font-weight: 600;
}
.bpost-hero__author:hover { color: #0094FF; }
.bpost-hero__author img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #e8ecf1;
}
.bpost-hero__img {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.bpost-hero__img img {
  width: 100%;
  max-height: 520px;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}

/* ── Share Buttons ────────────────────────────────────────────────────── */
.bshare {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bshare__label {
  font-size: 0.72rem;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #999;
  margin-right: 4px;
}
.bshare__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: #f0f2f5;
  color: #555;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.15s;
  text-decoration: none;
}
.bshare__btn:hover { transform: scale(1.08); }
.bshare__btn svg { width: 16px; height: 16px; fill: currentColor; }
.bshare__btn--fb:hover { background: #1877F2; color: #fff; }
.bshare__btn--x:hover { background: #000; color: #fff; }

/* ── Author Box ───────────────────────────────────────────────────────── */
.bauthor-box {
  display: flex;
  gap: 20px;
  padding: 28px;
  background: #f8f9fc;
  border-radius: 14px;
  align-items: flex-start;
}
.bauthor-box__avatar img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.bauthor-box__info { flex: 1; min-width: 0; }
.bauthor-box__label {
  font-size: 0.65rem;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #999;
  display: block;
  margin-bottom: 4px;
}
.bauthor-box__name {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #0a1e3d;
  text-decoration: none;
  transition: color 0.2s;
}
.bauthor-box__name:hover { color: #0094FF; }
.bauthor-box__role {
  font-size: 0.8rem;
  color: #888;
  display: block;
  margin-bottom: 8px;
}
.bauthor-box__bio {
  font-size: 0.88rem;
  line-height: 1.6;
  color: #555;
  margin: 0;
}

/* ── Author Page Hero ─────────────────────────────────────────────────── */
.bauthor-hero {
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 56px 24px 36px;
  max-width: 640px;
  margin: 0 auto;
}
.bauthor-hero__avatar img {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 auto 18px;
  border: 3px solid #e8ecf1;
  box-shadow: 0 4px 16px rgba(10,30,61,0.06);
}
.bauthor-hero__name {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.7rem;
  font-weight: 800;
  color: #0a1e3d;
  margin: 0 0 4px;
  letter-spacing: -0.02em;
}
.bauthor-hero__role {
  font-size: 0.88rem;
  color: #888;
  margin: 0 0 14px;
}
.bauthor-hero__bio {
  font-size: 0.95rem;
  line-height: 1.65;
  color: #555;
  margin: 0;
}

/* ── Category Page Hero ───────────────────────────────────────────────── */
.bcat-hero {
  text-align: center;
  padding: 56px 24px 36px;
  max-width: 640px;
  margin: 0 auto;
}
.bcat-hero__name {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.7rem;
  font-weight: 800;
  color: #0a1e3d;
  margin: 0 0 10px;
}
.bcat-hero__desc {
  font-size: 0.95rem;
  line-height: 1.65;
  color: #666;
  margin: 0;
}

/* ── Pagination ───────────────────────────────────────────────────────── */
.blog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 24px 64px;
}
.blog-pagination__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1.5px solid #dde2e8;
  background: #fff;
  color: #555;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s;
}
.blog-pagination__btn:hover {
  border-color: #0094FF;
  color: #0094FF;
}
.blog-pagination__btn--active {
  background: #0094FF;
  border-color: #0094FF;
  color: #fff;
  pointer-events: none;
}
.blog-pagination__btn--disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* ── Post Content Wrap ────────────────────────────────────────────────── */
.bpost-content-wrap {
  padding: 0 0 64px;
}
.bpost-content-wrap > .container {
  max-width: 1200px;
}
.bpost-content {
  max-width: 1200px;
  margin: 28px auto 0;
  font-family: 'Roboto', system-ui, sans-serif;
  font-size: 1.05rem;
  line-height: 1.75;
  color: #333;
}
.bpost-content h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.45rem;
  font-weight: 700;
  color: #0a1e3d;
  margin: 44px 0 14px;
  letter-spacing: -0.015em;
  line-height: 1.3;
}
.bpost-content h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #0a1e3d;
  margin: 32px 0 10px;
  line-height: 1.35;
}
.bpost-content p { margin: 0 0 18px; }
.bpost-content a {
  color: #0094FF;
  text-decoration: underline;
  text-decoration-color: rgba(0,148,255,0.25);
  text-underline-offset: 2px;
  transition: text-decoration-color 0.2s;
}
.bpost-content a:hover { text-decoration-color: #0094FF; }
.bpost-content img { max-width: 100%; height: auto; border-radius: 10px; margin: 20px 0; display: block; }
.bpost-content blockquote {
  margin: 28px 0;
  padding: 18px 22px;
  border-left: 3px solid #0094FF;
  background: #f8f9fc;
  border-radius: 0 10px 10px 0;
  font-style: italic;
  color: #555;
}
.bpost-content blockquote p:last-child { margin-bottom: 0; }
.bpost-content ul, .bpost-content ol { margin: 0 0 18px; padding-left: 22px; }
.bpost-content li { margin-bottom: 6px; }
.bpost-content table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 0.92rem; }
.bpost-content th, .bpost-content td { padding: 10px 14px; border: 1px solid #e8ecf1; text-align: left; }
.bpost-content th { background: #f5f7fa; font-weight: 700; font-family: 'Montserrat', sans-serif; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.03em; color: #555; }
.bpost-content hr { border: none; height: 1px; background: #e8ecf1; margin: 36px 0; }

/* Share + author inside post wrap */
.bpost-content-wrap .bshare {
  max-width: 1200px;
  margin: 28px auto 0;
  padding-top: 20px;
  border-top: 1px solid #e8ecf1;
}
.bpost-content-wrap .bauthor-box {
  max-width: 1200px;
  margin: 36px auto 0;
}

/* ── Prev / Next Navigation ───────────────────────────────────────────── */
.bpost-nav {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  max-width: 1200px;
  margin: 36px auto 0;
  padding-top: 28px;
  border-top: 1px solid #e8ecf1;
}
.bpost-nav__link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  padding: 14px 18px;
  border-radius: 10px;
  background: #f8f9fc;
  transition: background 0.2s, transform 0.15s;
  max-width: 48%;
  min-width: 0;
}
.bpost-nav__link:hover { background: #edf0f5; transform: translateY(-1px); }
.bpost-nav__link--prev { text-align: left; }
.bpost-nav__link--next { text-align: right; margin-left: auto; }
.bpost-nav__label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #999;
}
.bpost-nav__title {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  color: #0a1e3d;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bpost-nav__link:hover .bpost-nav__title { color: #0094FF; }

/* ── Related Posts ────────────────────────────────────────────────────── */
.bpost-related {
  max-width: 1200px;
  margin: 48px auto 0;
  padding-top: 40px;
  border-top: 1px solid #e8ecf1;
}
.bpost-related h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: #0a1e3d;
  margin: 0 0 24px;
}
.bpost-related .blog-grid {
  max-width: 100%;
  padding: 0;
  grid-template-columns: repeat(3, 1fr);
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .bpost-related .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .blog-hero { padding: 40px 20px 36px; }
  .blog-hero h1 { font-size: 1.8rem; }
  .blog-hero p { font-size: 0.92rem; margin-bottom: 24px; }
  .blog-search__input { padding: 11px 16px; font-size: 0.88rem; }
  .blog-search__btn { padding: 11px 18px; }
  .blog-cats { padding: 20px 20px 0; gap: 6px; }
  .blog-cats__pill { padding: 6px 14px; font-size: 0.78rem; }
  .blog-grid { grid-template-columns: 1fr; gap: 20px; padding: 28px 20px 48px; }
  .bpost-related .blog-grid { grid-template-columns: 1fr; }
  .bpost-hero { padding: 40px 20px 24px; }
  .bpost-hero__title { font-size: 1.5rem; }
  .bpost-hero__img { padding: 0 16px; }
  .bpost-hero__img img { border-radius: 10px; max-height: 320px; }
  .bpost-content { margin-top: 20px; font-size: 1rem; }
  .bpost-nav { flex-direction: column; gap: 10px; }
  .bpost-nav__link { max-width: 100%; }
  .bpost-nav__link--next { text-align: left; }
  .bauthor-box { flex-direction: column; align-items: center; text-align: center; }
  .blog-pagination { padding-bottom: 48px; }
  .blog-pagination__btn { min-width: 36px; height: 36px; padding: 0 10px; font-size: 0.8rem; }
  .bpost-meta { flex-wrap: wrap; justify-content: center; }
}

/* ── Blog Post Meta Byline ───────────────────────────────────────────────── */
.bpost-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0 0;
  font-size: 0.9rem;
  color: #555;
  line-height: 1.5;
}
.bpost-meta__author a {
  color: #16163f;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}
.bpost-meta__author a:hover {
  color: #f5a623;
}
.bpost-meta__sep {
  color: #bbb;
  user-select: none;
}
.bpost-meta__date {
  color: #555;
}
.bpost-meta__reading {
  color: #777;
}