.elementor-3472 .elementor-element.elementor-element-6a770a23 > .elementor-widget-wrap > .elementor-widget:not(.elementor-widget__width-auto):not(.elementor-widget__width-initial):not(:last-child):not(.elementor-absolute){margin-block-end:0px;}:root{--page-title-display:none;}/* Start custom CSS for shortcode, class: .elementor-element-7cd5132 *//* ==========================================
   AMS KONTAKTMODUL V2.0
   Kontaktbereich & Contact Form 7
   Eigenständiges Elementor-Template
   ========================================== */


/* ==========================================
   01 – DESIGN SYSTEM & GRUNDLAGEN
   ========================================== */

#ams-contact {
  --ams-red: #e6002e;
  --ams-red-hover: #bf0027;
  --ams-navy: #071c37;
  --ams-text: #14243b;
  --ams-muted: #657589;

  position: relative;
  width: 100%;
  padding: 110px 0 115px;

  background: #ffffff;
  color: var(--ams-text);

  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Arial,
    sans-serif;

  overflow-wrap: break-word;
}

#ams-contact,
#ams-contact * {
  box-sizing: border-box;
}

#ams-contact .ams-container {
  width: min(1320px, calc(100% - 96px));
  margin-inline: auto;
}

#ams-contact .ams-text-red {
  color: var(--ams-red);
}


/* ==========================================
   02 – ABSCHNITTSÜBERSCHRIFT
   ========================================== */

#ams-contact .ams-contact-header {
  max-width: 870px;
  margin: 0 auto 52px;
  text-align: center;
}

#ams-contact .ams-section-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;

  color: #718093;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .14em;
  line-height: 1.5;
  text-transform: uppercase;
}

#ams-contact .ams-section-eyebrow::before {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 28px;
  height: 2px;
  background: var(--ams-red);
}

#ams-contact .ams-section-title {
  margin: 22px 0 24px;

  color: var(--ams-text);
  font-size: clamp(39px, 4.5vw, 67px);
  font-weight: 570;
  line-height: 1.13;
  letter-spacing: -.055em;
}

#ams-contact .ams-contact-intro {
  max-width: 690px;
  margin: 0 auto;

  color: var(--ams-muted);
  font-size: 15px;
  line-height: 1.8;
}


/* ==========================================
   03 – ZWEISPALTIGES LAYOUT
   ========================================== */

#ams-contact .ams-contact-grid {
  display: grid;
  grid-template-columns:
    minmax(0, .85fr)
    minmax(0, 1.15fr);

  align-items: stretch;
  gap: 22px;
}


/* ==========================================
   04 – LINKE KONTAKTKARTE
   ========================================== */

#ams-contact .ams-contact-info {
  position: relative;
  isolation: isolate;

  display: flex;
  flex-direction: column;
  min-width: 0;

  padding: 45px;
  overflow: hidden;

  border-radius: 5px;

  background: linear-gradient(
    135deg,
    #071c37,
    #143b62
  );

  color: #ffffff;
}

/* Dekoratives Hintergrundelement */

#ams-contact .ams-contact-info::before {
  content: "";
  position: absolute;
  z-index: -1;

  top: -180px;
  right: -210px;

  width: 430px;
  height: 430px;

  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;

  pointer-events: none;
}


/* Kleine Kennzeichnung */

#ams-contact .ams-contact-info-top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 36px;
}

#ams-contact .ams-contact-accent {
  flex-shrink: 0;
  width: 28px;
  height: 2px;
  background: #ff5875;
}

#ams-contact .ams-contact-kicker {
  color: #c3d5e6;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .16em;
  text-transform: uppercase;
}


/* Kontaktüberschrift */

#ams-contact .ams-contact-info h3 {
  max-width: 440px;
  margin: 0 0 25px;

  color: #ffffff;
  font-size: clamp(36px, 3.8vw, 56px);
  font-weight: 560;
  line-height: 1.14;
  letter-spacing: -.055em;
}

#ams-contact .ams-contact-info h3 span {
  color: #ff6b86;
}


/* Beschreibung */

#ams-contact .ams-contact-info-text {
  max-width: 390px;
  margin: 0 0 42px;

  color: #c9d8e7;
  font-size: 15px;
  line-height: 1.85;
}


/* ==========================================
   05 – KONTAKTDATEN
   ========================================== */

#ams-contact .ams-contact-methods {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

#ams-contact .ams-contact-method {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

#ams-contact .ams-contact-method-label {
  color: #ff718a;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .16em;
  text-transform: uppercase;
}

#ams-contact .ams-contact-method a,
#ams-contact .ams-contact-method-value {
  color: #ffffff;
  font-size: clamp(15px, 1.5vw, 19px);
  font-weight: 550;
  line-height: 1.5;
  text-decoration: none;
  overflow-wrap: anywhere;
}

#ams-contact .ams-contact-method a:hover {
  color: #ff9daf;
}


/* ==========================================
   06 – UNTERER KARTENBEREICH
   ========================================== */

#ams-contact .ams-contact-info-bottom {
  margin-top: auto;
  padding-top: 60px;
}

#ams-contact .ams-contact-bottom-line {
  display: block;
  width: 48px;
  height: 2px;
  margin-bottom: 20px;
  background: #ff5875;
}

#ams-contact .ams-contact-info-bottom p {
  max-width: 330px;
  margin: 0;

  color: #c3d2e2;
  font-size: 12px;
  line-height: 1.85;
}


/* ==========================================
   07 – RECHTES FORMULARPANEL
   ========================================== */

#ams-contact .ams-contact-form-panel {
  min-width: 0;
  padding: 45px;

  border: 1px solid #e1e8ef;
  border-radius: 5px;

  background: #f7f9fb;
}

#ams-contact .ams-contact-form-header {
  margin-bottom: 32px;
}

#ams-contact .ams-contact-form-kicker {
  display: block;
  margin-bottom: 15px;

  color: #d00a32;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .15em;
  text-transform: uppercase;
}

#ams-contact .ams-contact-form-header h3 {
  margin: 0 0 15px;

  color: #142b49;
  font-size: clamp(30px, 3vw, 43px);
  font-weight: 580;
  line-height: 1.17;
  letter-spacing: -.05em;
}

#ams-contact .ams-contact-form-header h3 span {
  color: var(--ams-red);
}

#ams-contact .ams-contact-form-header p {
  margin: 0;
  color: var(--ams-muted);
  font-size: 14px;
  line-height: 1.8;
}


/* ==========================================
   08 – FORMULARLAYOUT
   ========================================== */

#ams-contact .ams-form {
  display: flex;
  flex-direction: column;
  gap: 19px;
}

#ams-contact .ams-form-row {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 16px;
}

#ams-contact .ams-field {
  min-width: 0;
}

#ams-contact .ams-field > label {
  display: block;
  margin-bottom: 9px;

  color: #26405d;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}


/* Contact Form 7 Wrapper */

#ams-contact .wpcf7,
#ams-contact .wpcf7-form-control-wrap {
  width: 100%;
  max-width: 100%;
}

#ams-contact .wpcf7-form-control-wrap {
  display: block;
}


/* ==========================================
   09 – EINGABEFELDER
   ========================================== */

#ams-contact .ams-field input,
#ams-contact .ams-field select,
#ams-contact .ams-field textarea {
  display: block;

  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 52px;

  margin: 0;
  padding: 13px 15px;

  border: 1px solid #d9e2ec;
  border-radius: 4px;

  outline: none;
  background: #ffffff;
  color: #173556;

  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;

  box-shadow: none;

  transition:
    border-color .2s ease,
    box-shadow .2s ease;
}

/* Textarea */

#ams-contact .ams-field textarea {
  min-height: 135px;
  resize: vertical;
}

/* Placeholder */

#ams-contact .ams-field input::placeholder,
#ams-contact .ams-field textarea::placeholder {
  color: #98a4b2;
  opacity: 1;
}

/* Fokus */

#ams-contact .ams-field input:focus,
#ams-contact .ams-field select:focus,
#ams-contact .ams-field textarea:focus {
  border-color: var(--ams-red);
  box-shadow:
    0 0 0 3px rgba(230,0,46,.09);
}

/* Dropdown */

#ams-contact .ams-field select {
  cursor: pointer;
}


/* ==========================================
   10 – BEDARFSGERECHTE FORMULARVARIANTEN
   ========================================== */

#ams-contact .ams-form-variant {
  display: flex;
  flex-direction: column;
  gap: 16px;

  margin: 3px 0;
  padding: 22px;

  border: 1px solid #dce5ef;
  border-left: 3px solid var(--ams-red);
  border-radius: 4px;

  background: #ffffff;
}

/* Ausgeblendete Varianten bleiben unsichtbar */

#ams-contact .ams-form-variant[hidden] {
  display: none !important;
}

#ams-contact .ams-form-variant h4 {
  margin: 0 0 3px;

  color: #183957;
  font-size: 16px;
  font-weight: 650;
  line-height: 1.4;
}


/* ==========================================
   11 – DATENSCHUTZ
   ========================================== */

#ams-contact .ams-form-privacy {
  color: #52677c;
  font-size: 12px;
  line-height: 1.7;
}

#ams-contact .ams-form-privacy
.wpcf7-list-item {
  margin: 0;
}

#ams-contact .ams-form-privacy
.wpcf7-list-item label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

/* Checkbox */

#ams-contact .ams-form-privacy
input[type="checkbox"] {
  flex-shrink: 0;

  width: 17px;
  height: 17px;

  margin: 3px 0 0;
  accent-color: var(--ams-red);
}

/* Datenschutzlink */

#ams-contact .ams-form-privacy a {
  color: #cf092f;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

#ams-contact .ams-form-privacy a:hover {
  color: #98102b;
}

/* Hinweis zu sensiblen Daten */

#ams-contact .ams-form-sensitive-note {
  margin: -6px 0 0;

  color: #738397;
  font-size: 11px;
  line-height: 1.6;
}


/* ==========================================
   12 – ABSENDEBUTTON
   ========================================== */

#ams-contact .ams-form-submit-wrap {
  margin-top: 5px;
}

#ams-contact .ams-form-submit {
  display: block;

  width: 100%;
  min-height: 58px;

  margin: 0;
  padding: 16px 22px;

  border: 1px solid var(--ams-red);
  border-radius: 4px;

  background: var(--ams-red);
  color: #ffffff;

  font-family: inherit;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.4;

  cursor: pointer;

  transition:
    background .2s ease,
    border-color .2s ease,
    transform .2s ease;
}

#ams-contact .ams-form-submit:hover {
  background: var(--ams-red-hover);
  border-color: var(--ams-red-hover);
  color: #ffffff;
  transform: translateY(-2px);
}

#ams-contact .ams-form-submit:disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}

/* Pflichtfeldhinweis */

#ams-contact .ams-form-required {
  margin: -6px 0 0;
  color: #8794a3;
  font-size: 11px;
}


/* ==========================================
   13 – VALIDIERUNG & RÜCKMELDUNGEN
   ========================================== */

/* Ungültige Felder */

#ams-contact .wpcf7-not-valid {
  border-color: #bf1535 !important;
}

#ams-contact .wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;

  color: #bf1535;
  font-size: 11px;
  line-height: 1.5;
}

/* Contact Form 7 Rückmeldung */

#ams-contact .wpcf7 form
.wpcf7-response-output {
  margin: 20px 0 0;
  padding: 15px 18px;

  border-radius: 4px;

  font-size: 13px;
  line-height: 1.6;
}


/* ==========================================
   14 – BARRIEREFREIHEIT
   ========================================== */

#ams-contact a:focus-visible,
#ams-contact button:focus-visible,
#ams-contact input:focus-visible,
#ams-contact select:focus-visible,
#ams-contact textarea:focus-visible {
  outline: 3px solid var(--ams-red);
  outline-offset: 3px;
}


/* ==========================================
   15 – TABLET BIS 1024 PX
   ========================================== */

@media (max-width: 1024px) {

  #ams-contact {
    padding: 88px 0;
  }

  #ams-contact .ams-container {
    width: calc(100% - 48px);
  }

  #ams-contact .ams-contact-grid {
    grid-template-columns:
      minmax(0, .8fr)
      minmax(0, 1.2fr);
  }

  #ams-contact .ams-contact-info,
  #ams-contact .ams-contact-form-panel {
    padding: 32px;
  }

  #ams-contact .ams-form-row {
    grid-template-columns: 1fr;
  }

}


/* ==========================================
   16 – SCHMALES TABLET BIS 850 PX
   ========================================== */

@media (max-width: 850px) {

  #ams-contact .ams-contact-grid {
    grid-template-columns: 1fr;
  }

  #ams-contact .ams-contact-info {
    min-height: 0;
  }

  #ams-contact .ams-contact-info-bottom {
    padding-top: 36px;
  }

  #ams-contact .ams-form-row {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


/* ==========================================
   17 – SMARTPHONE BIS 700 PX
   ========================================== */

@media (max-width: 700px) {

  #ams-contact {
    padding: 76px 0;
  }

  #ams-contact .ams-container {
    width: calc(100% - 38px);
  }

  /* Überschrift */

  #ams-contact .ams-contact-header {
    margin-bottom: 36px;
  }

  #ams-contact .ams-section-title {
    font-size: clamp(34px, 8.5vw, 47px);
  }

  #ams-contact .ams-contact-intro {
    font-size: 14px;
  }

  /* Layout */

  #ams-contact .ams-contact-grid {
    gap: 16px;
  }

  /* Kontaktkarte und Formular */

  #ams-contact .ams-contact-info,
  #ams-contact .ams-contact-form-panel {
    padding: 27px 23px;
  }

  #ams-contact .ams-contact-info h3 {
    font-size: clamp(32px, 8vw, 43px);
  }

  #ams-contact .ams-contact-info-text {
    margin-bottom: 30px;
    font-size: 14px;
  }

  /* Formularfelder untereinander */

  #ams-contact .ams-form-row {
    grid-template-columns: 1fr;
    gap: 17px;
  }

  /* Formularüberschrift */

  #ams-contact .ams-contact-form-header h3 {
    font-size: 32px;
  }

  /* Bedingte Formularfelder */

  #ams-contact .ams-form-variant {
    padding: 19px 16px;
  }

  /* 16px verhindert iOS-Autozoom */

  #ams-contact .ams-field input,
  #ams-contact .ams-field select,
  #ams-contact .ams-field textarea {
    font-size: 16px;
  }

}


/* ==========================================
   18 – SEHR KLEINE SMARTPHONES
   ========================================== */

@media (max-width: 380px) {

  #ams-contact .ams-contact-info,
  #ams-contact .ams-contact-form-panel {
    padding: 24px 18px;
  }

  #ams-contact .ams-contact-info h3 {
    font-size: 30px;
  }

  #ams-contact .ams-contact-form-header h3 {
    font-size: 28px;
  }

  #ams-contact .ams-form-variant {
    padding: 17px 13px;
  }

}


/* ==========================================
   19 – REDUZIERTE BEWEGUNG
   ========================================== */

@media (prefers-reduced-motion: reduce) {

  #ams-contact .ams-form-submit,
  #ams-contact .ams-field input,
  #ams-contact .ams-field select,
  #ams-contact .ams-field textarea {
    transition: none;
  }

}

/* ==========================================
   ENDE AMS KONTAKTMODUL V2.0
   ========================================== *//* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-58a141b5 *//* ==========================================
   AMS SANDIENST & BONIMED
   HEADER & FOOTER – MASTER CSS V1.2
   Elementor Canvas
   ========================================== */


/* ==========================================
   01 – GEMEINSAME GRUNDLAGEN
   ========================================== */

#ams-site-header,
#ams-site-footer {
  --ams-hf-red: #e6002e;
  --ams-hf-navy: #071c37;
  --ams-hf-text: #173556;
  font-family:
    system-ui, -apple-system,
    "Segoe UI", Arial, sans-serif;
}

#ams-site-header,
#ams-site-footer,
#ams-site-header *,
#ams-site-footer * {
  box-sizing: border-box;
}

#ams-site-header a,
#ams-site-footer a {
  text-decoration: none;
}

#ams-site-header a:focus-visible,
#ams-site-header summary:focus-visible,
#ams-site-footer a:focus-visible {
  outline: 3px solid #e6002e;
  outline-offset: 4px;
}

#ams-site-header .ams-h-container,
#ams-site-footer .ams-f-container {
  width: min(1320px, calc(100% - 80px));
  margin-inline: auto;
}


/* ==========================================
   02 – HEADER
   ========================================== */

#ams-site-header {
  position: relative;
  z-index: 1000;
  width: 100%;
  background: #fff;
  color: #173556;
}

/* TOPBAR */

#ams-site-header .ams-h-topbar {
  width: 100%;
  background: #0c294a;
  color: #d8e4f0;
}

#ams-site-header .ams-h-top-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  min-height: 39px;
}

#ams-site-header .ams-h-region {
  color: #c6d6e7;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
}

#ams-site-header .ams-h-top-contact {
  display: flex;
  align-items: center;
  gap: 28px;
}

#ams-site-header .ams-h-top-contact a {
  color: #e4edf6;
  font-size: 11px;
  font-weight: 550;
}

#ams-site-header .ams-h-top-contact a:hover {
  color: #fff;
}


/* ==========================================
   03 – HAUPTNAVIGATION
   ========================================== */

#ams-site-header .ams-h-main {
  position: relative;
  width: 100%;
  background: #fff;
  border-bottom: 1px solid #e6ecf1;
  box-shadow: 0 4px 20px rgba(8,32,57,.05);
}

#ams-site-header .ams-h-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  min-height: 91px;
}


/* LOGO / WORTMARKE */

#ams-site-header .ams-h-logo {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  flex-shrink: 0;
  color: #133454;
  white-space: nowrap;
}

#ams-site-header .ams-h-logo-mark {
  display: block;
  color: #e6002e;
  font-size: 38px;
  font-weight: 850;
  letter-spacing: -.085em;
  line-height: 1;
}

#ams-site-header .ams-h-logo-name {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-left: 12px;
  border-left: 1px solid #dce4ec;
}

#ams-site-header .ams-h-logo-name strong {
  display: block;
  color: #123557;
  font-size: 20px;
  font-weight: 750;
  line-height: 1.05;
  letter-spacing: -.04em;
}

#ams-site-header .ams-h-logo-name small {
  display: block;
  color: #718196;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
}


/* DESKTOP LINKS */

#ams-site-header .ams-h-desktop-nav {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.35vw, 27px);
  min-width: 0;
  margin-left: auto;
}

#ams-site-header .ams-h-navlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 0;
  color: #233b55;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
  transition: color .2s ease;
}

#ams-site-header .ams-h-navlink:hover {
  color: #e6002e;
}


/* ==========================================
   04 – DESKTOP DROPDOWN
   ========================================== */

#ams-site-header .ams-h-dropdown {
  position: relative;
  display: block;
}

#ams-site-header .ams-h-dropdown summary {
  list-style: none;
}

#ams-site-header .ams-h-dropdown summary::marker {
  content: "";
}

#ams-site-header
.ams-h-dropdown summary::-webkit-details-marker {
  display: none;
}

#ams-site-header .ams-h-chevron {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s ease;
}

#ams-site-header .ams-h-dropdown[open]
.ams-h-chevron {
  transform: rotate(225deg) translate(-2px,-2px);
}

#ams-site-header .ams-h-dropdown-panel {
  position: absolute;
  z-index: 1100;
  top: calc(100% + 6px);
  left: -22px;
  width: 350px;
  max-width: 90vw;
  padding: 10px;
  border: 1px solid #e1e7ee;
  border-top: 3px solid #e6002e;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(9,30,55,.16);
}

#ams-site-header .ams-h-dropdown-panel a {
  display: block;
  padding: 14px 16px;
  border-radius: 4px;
  transition: background .2s ease;
}

#ams-site-header .ams-h-dropdown-panel a:hover {
  background: #f3f6fa;
}

#ams-site-header .ams-h-dropdown-panel strong {
  display: block;
  margin-bottom: 4px;
  color: #173556;
  font-size: 14px;
  font-weight: 700;
}

#ams-site-header .ams-h-dropdown-panel small {
  display: block;
  color: #748396;
  font-size: 11px;
  line-height: 1.5;
}


/* ==========================================
   05 – HEADER CTA
   ========================================== */

#ams-site-header .ams-h-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  flex-shrink: 0;
  min-height: 50px;
  padding: 14px 20px;
  border-radius: 4px;
  background: #e6002e;
  color: #fff;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.3;
  white-space: nowrap;
  transition:
    background .2s ease,
    transform .2s ease;
}

#ams-site-header .ams-h-cta:hover {
  background: #bd0026;
  color: #fff;
  transform: translateY(-2px);
}


/* MOBILE MENU STANDARDMÄSSIG VERSTECKEN */

#ams-site-header .ams-h-mobile-menu {
  display: none;
}


/* ==========================================
   06 – FOOTER
   ========================================== */

#ams-site-footer {
  position: relative;
  width: 100%;
  background: #071c37;
  color: #c6d4e3;
  overflow-wrap: break-word;
}

#ams-site-footer .ams-f-main {
  padding: 89px 0 82px;
}

#ams-site-footer .ams-f-grid {
  display: grid;
  grid-template-columns:
    minmax(0, 1.5fr)
    minmax(0, 1fr)
    minmax(0, .9fr)
    minmax(0, 1.1fr);
  gap: clamp(25px, 3vw, 60px);
}

#ams-site-footer .ams-f-grid > * {
  min-width: 0;
}


/* ==========================================
   07 – FOOTER BRAND
   ========================================== */

#ams-site-footer .ams-f-logo {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 37px;
  color: #fff;
}

#ams-site-footer .ams-f-logo-mark {
  color: #fff;
  font-size: 41px;
  font-weight: 850;
  letter-spacing: -.085em;
  line-height: 1;
}

#ams-site-footer .ams-f-logo-name {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-left: 12px;
  border-left: 1px solid #60758c;
}

#ams-site-footer .ams-f-logo-name strong {
  color: #fff;
  font-size: 20px;
  font-weight: 750;
  letter-spacing: -.035em;
}

#ams-site-footer .ams-f-logo-name small {
  color: #b9ccdf;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
}

#ams-site-footer .ams-f-brand h2 {
  max-width: 350px;
  margin: 0 0 22px;
  color: #fff;
  font-size: clamp(28px, 2.6vw, 40px);
  font-weight: 570;
  line-height: 1.18;
  letter-spacing: -.045em;
}

#ams-site-footer .ams-f-brand h2 span {
  color: #ff718a;
}

#ams-site-footer .ams-f-brand p {
  max-width: 365px;
  margin: 0 0 25px;
  color: #bbcbdc;
  font-size: 13px;
  line-height: 1.85;
}

#ams-site-footer .ams-f-location {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  color: #9fb5ca;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.7;
}

#ams-site-footer .ams-f-location-dot {
  display: block;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 50%;
  background: #e6002e;
}


/* ==========================================
   08 – FOOTER LINK-SPALTEN
   ========================================== */

#ams-site-footer .ams-f-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
}

#ams-site-footer .ams-f-column h3 {
  margin: 0 0 13px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}

#ams-site-footer .ams-f-column a {
  color: #bdcddd;
  font-size: 13px;
  line-height: 1.6;
  transition: color .2s ease;
}

#ams-site-footer .ams-f-column a:hover {
  color: #ff718a;
}


/* ==========================================
   09 – FOOTER KONTAKT
   ========================================== */

#ams-site-footer .ams-f-contact-label {
  margin-top: 5px;
  color: #ff718a;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .14em;
}

#ams-site-footer .ams-f-contact-value {
  color: #e2ebf3;
  font-size: 13px;
  line-height: 1.6;
}

#ams-site-footer .ams-f-contact
a:not(.ams-f-contact-button) {
  color: #fff;
  font-weight: 600;
  overflow-wrap: anywhere;
}

#ams-site-footer .ams-f-contact-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  min-height: 50px;
  margin-top: 18px;
  padding: 14px 20px;
  background: #e6002e;
  border-radius: 4px;
  color: #fff !important;
  font-size: 13px;
  font-weight: 750;
  transition:
    background .2s ease,
    transform .2s ease;
}

#ams-site-footer .ams-f-contact-button:hover {
  background: #bd0026;
  transform: translateY(-2px);
}


/* ==========================================
   10 – FOOTER UNTEN
   ========================================== */

#ams-site-footer .ams-f-bottom {
  background: #05172c;
  border-top: 1px solid #29435e;
}

#ams-site-footer .ams-f-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  min-height: 76px;
  padding: 18px 0;
}

#ams-site-footer .ams-f-copyright {
  color: #aabbcc;
  font-size: 11px;
}

#ams-site-footer .ams-f-legal {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 25px;
}

#ams-site-footer .ams-f-legal a {
  color: #bccddd;
  font-size: 11px;
}

#ams-site-footer .ams-f-legal a:hover {
  color: #fff;
}


/* ==========================================
   11 – TABLET / MOBILE HEADER
   ========================================== */

@media (max-width: 1100px) {

  #ams-site-header .ams-h-desktop-nav,
  #ams-site-header .ams-h-cta {
    display: none;
  }

  #ams-site-header .ams-h-inner {
    min-height: 79px;
  }

  #ams-site-header .ams-h-mobile-menu {
    display: block;
    position: static;
    margin-left: auto;
  }

  /* HAMBURGER BUTTON */

  #ams-site-header .ams-h-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    min-width: 100px;
    min-height: 47px;
    padding: 10px 14px;
    border: 1px solid #dfe6ee;
    border-radius: 4px;
    background: #fff;
    color: #173556;
    cursor: pointer;
    list-style: none;
  }

  #ams-site-header .ams-h-menu-toggle::marker {
    content: "";
  }

  #ams-site-header
  .ams-h-menu-toggle::-webkit-details-marker {
    display: none;
  }

  #ams-site-header .ams-h-menu-label {
    font-size: 13px;
    font-weight: 700;
  }

  #ams-site-header .ams-h-hamburger {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 23px;
    height: 23px;
  }

  #ams-site-header .ams-h-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: #173556;
    transition:
      transform .2s ease,
      opacity .2s ease;
  }

  /* HAMBURGER ZU X */

  #ams-site-header
  .ams-h-mobile-menu[open]
  .ams-h-hamburger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  #ams-site-header
  .ams-h-mobile-menu[open]
  .ams-h-hamburger span:nth-child(2) {
    opacity: 0;
  }

  #ams-site-header
  .ams-h-mobile-menu[open]
  .ams-h-hamburger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* MOBILES NAVIGATIONSPANEL */

  #ams-site-header .ams-h-mobile-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: calc(100dvh - 78px);
    padding: 18px max(30px, calc((100vw - 1320px)/2));
    overflow-y: auto;
    overscroll-behavior: contain;
    border-top: 1px solid #e8edf3;
    background: #fff;
    box-shadow: 0 20px 40px rgba(8,30,55,.17);
  }

  #ams-site-header .ams-h-mobile-panel > a,
  #ams-site-header
  .ams-h-mobile-submenu > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    min-height: 53px;
    padding: 13px 7px;
    border-bottom: 1px solid #e9eef3;
    color: #173556;
    font-size: 15px;
    font-weight: 650;
    line-height: 1.5;
    cursor: pointer;
  }

  #ams-site-header .ams-h-mobile-submenu > summary {
    list-style: none;
  }

  #ams-site-header
  .ams-h-mobile-submenu > summary::marker {
    content: "";
  }

  #ams-site-header
  .ams-h-mobile-submenu >
  summary::-webkit-details-marker {
    display: none;
  }

  #ams-site-header .ams-h-mobile-submenu-links {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    background: #f4f7fa;
  }

  #ams-site-header .ams-h-mobile-submenu-links a {
    display: block;
    padding: 12px 15px;
    color: #24415f;
    font-size: 14px;
    line-height: 1.5;
  }

  #ams-site-header .ams-h-mobile-submenu-links a:hover {
    color: #e6002e;
  }

  /* MOBILE CTA */

  #ams-site-header
  .ams-h-mobile-panel > .ams-h-mobile-cta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    min-height: 55px;
    margin-top: 20px;
    padding: 15px 20px;
    border: 0;
    border-radius: 4px;
    background: #e6002e;
    color: #fff;
    font-size: 14px;
    font-weight: 750;
  }

  #ams-site-header
  .ams-h-mobile-panel > .ams-h-mobile-cta:hover {
    color: #fff;
    background: #bd0026;
  }

  #ams-site-header .ams-h-mobile-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 25px;
    padding: 24px 7px 8px;
  }

  #ams-site-header .ams-h-mobile-contact a {
    color: #52677d;
    font-size: 12px;
    overflow-wrap: anywhere;
  }

  /* FOOTER TABLET */

  #ams-site-footer .ams-f-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 50px 45px;
  }

}


/* ==========================================
   12 – SMARTPHONE
   ========================================== */

@media (max-width: 700px) {

  #ams-site-header .ams-h-container,
  #ams-site-footer .ams-f-container {
    width: calc(100% - 38px);
  }

  /* HEADER */

  #ams-site-header .ams-h-topbar {
    display: none;
  }

  #ams-site-header .ams-h-inner {
    min-height: 73px;
    gap: 12px;
  }

  #ams-site-header .ams-h-logo {
    gap: 9px;
  }

  #ams-site-header .ams-h-logo-mark {
    font-size: 32px;
  }

  #ams-site-header .ams-h-logo-name {
    gap: 1px;
    padding-left: 9px;
  }

  #ams-site-header .ams-h-logo-name strong {
    font-size: 17px;
  }

  #ams-site-header .ams-h-logo-name small {
    font-size: 9px;
  }

  #ams-site-header .ams-h-menu-toggle {
    min-width: 47px;
    width: 47px;
    min-height: 45px;
    padding: 9px;
  }

  #ams-site-header .ams-h-menu-label {
    display: none;
  }

  #ams-site-header .ams-h-mobile-panel {
    max-height: calc(100dvh - 73px);
    padding: 12px 19px 24px;
  }

  /* FOOTER */

  #ams-site-footer .ams-f-main {
    padding: 67px 0 61px;
  }

  #ams-site-footer .ams-f-grid {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  #ams-site-footer .ams-f-logo {
    margin-bottom: 29px;
  }

  #ams-site-footer .ams-f-brand h2 {
    font-size: 36px;
  }

  #ams-site-footer .ams-f-brand p {
    font-size: 13px;
  }

  #ams-site-footer .ams-f-column {
    gap: 13px;
  }

  #ams-site-footer .ams-f-column h3 {
    margin-bottom: 8px;
  }

  #ams-site-footer .ams-f-bottom-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 25px 0;
  }

  #ams-site-footer .ams-f-legal {
    gap: 19px;
  }

}


/* ==========================================
   13 – SEHR KLEINE SMARTPHONES
   ========================================== */

@media (max-width: 370px) {

  #ams-site-header .ams-h-logo-mark {
    font-size: 28px;
  }

  #ams-site-header .ams-h-logo-name strong {
    font-size: 15px;
  }

  #ams-site-header .ams-h-logo-name small {
    font-size: 8px;
  }

  #ams-site-header .ams-h-hamburger span {
    width: 20px;
  }

}


/* ==========================================
   14 – BARRIEREFREIHEIT
   ========================================== */

@media (prefers-reduced-motion: reduce) {

  #ams-site-header *,
  #ams-site-footer * {
    transition: none !important;
  }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-49dc82b *//* ==========================================
   AMS BACK TO TOP V1.0
   ========================================== */

#ams-back-to-top {
  position: fixed;
  right: 40px;
  bottom: 40px;
  z-index: 9000;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 40px;
  height: 40px;
  padding: 0;

  border: 1px solid rgba(255,255,255,.2);
  border-radius: 6px;
  background: #e6002e;
  color: #ffffff;

  box-shadow:
    0 8px 24px rgba(7,28,55,.22);

  cursor: pointer;

  /* Standardmäßig unsichtbar */

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(12px);

  transition:
    opacity .3s ease,
    visibility .3s ease,
    transform .3s ease,
    background .2s ease;
}

/* Sichtbarer Zustand */

#ams-back-to-top.ams-back-visible {
  opacity: 0.8;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* Pfeilsymbol */

#ams-back-to-top svg {
  display: block;
  width: 25px;
  height: 25px;
  flex-shrink: 0;
  stroke: currentColor;
}

/* Hover */

@media (hover: hover) {

  #ams-back-to-top:hover {
    background: #bf0027;
    transform: translateY(-4px);
  }

}

/* Tastatur */

#ams-back-to-top:focus-visible {
  outline: 3px solid #071c37;
  outline-offset: 4px;
}

/* Smartphone */

@media (max-width: 700px) {

  #ams-back-to-top {
    right: max(
      20px,
      env(safe-area-inset-right)
    );

    bottom: max(
      20px,
      env(safe-area-inset-bottom)
    );

    width: 48px;
    height: 48px;
  }

  #ams-back-to-top svg {
    width: 22px;
    height: 22px;
  }

}

/* Reduzierte Bewegung */

@media (prefers-reduced-motion: reduce) {

  #ams-back-to-top {
    transition: none;
  }

}/* End custom CSS */
/* Start custom CSS for section, class: .elementor-element-4f38d5c5 *//* ============================================================
   AMS SANDIENST – FOOTER CSS V2.0
   Diese Styles stehen direkt im Footer-HTML-Widget.
   Back-to-Top gehört zum wiederverwendbaren Footer.
   ============================================================ */
#ams-site-footer {
  --ams-nav-blue: #0c294a;
  --ams-nav-dark: #071c37;
  --ams-nav-red: #e6002e;
  font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  box-sizing: border-box;
}
#ams-site-footer * { box-sizing: border-box; }
#ams-site-footer a { text-decoration: none; }
#ams-site-footer a:focus-visible { outline: 3px solid #e6002e; outline-offset: 3px; }
#ams-site-footer .ams-f-container { width: min(1320px, calc(100% - 64px)); margin-inline: auto; }
@media (max-width: 700px) {
  #ams-site-footer .ams-f-container { width: calc(100% - 38px); }
}

/* FOOTER: Komplettregeln inklusive Original-Logo und Social Media */
#ams-site-footer { width:100%;color:#c1d0e1;background:#071c37;overflow-wrap:break-word; }
#ams-site-footer .ams-f-main { padding:85px 0 80px; }
#ams-site-footer .ams-f-grid { display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,3vw,55px); }
#ams-site-footer .ams-f-grid > * { min-width:0; }
#ams-site-footer .ams-f-logo { display:inline-flex;align-items:center;width:245px;max-width:100%;margin-bottom:34px; }
#ams-site-footer .ams-f-logo-image { display:block;width:100%;max-width:100%;height:auto;max-height:110px;object-fit:contain;object-position:left center;filter:none; }
#ams-site-footer .ams-f-brand p { max-width:365px;margin:0 0 23px;color:#bccddd;font-size:13px;line-height:1.85; }
#ams-site-footer .ams-f-location { display:flex;align-items:flex-start;gap:11px;color:#9fb5ca;font-size:11px;font-weight:600;line-height:1.7; }
#ams-site-footer .ams-f-location-dot { flex:0 0 8px;width:8px;height:8px;margin-top:5px;border-radius:50%;background:#e6002e; }
#ams-site-footer .ams-f-column { display:flex;flex-direction:column;align-items:flex-start;gap:15px; }
#ams-site-footer .ams-f-column h3 { margin:0 0 13px;color:#fff;font-size:16px;font-weight:700;line-height:1.4; }
#ams-site-footer .ams-f-column a { color:#bdcddd;font-size:13px;line-height:1.6;overflow-wrap:anywhere; }
#ams-site-footer .ams-f-column a:hover { color:#ff718a; }
#ams-site-footer .ams-f-contact-label { margin-top:5px;color:#ff718a;font-size:10px;font-weight:750;letter-spacing:.14em; }
#ams-site-footer .ams-f-contact-value { color:#e2ebf3;font-size:13px;line-height:1.6; }
#ams-site-footer .ams-f-contact a:not(.ams-f-contact-button) { color:#fff;font-weight:600; }
#ams-site-footer .ams-f-contact-button { display:inline-flex;align-items:center;justify-content:space-between;gap:22px;min-height:50px;margin-top:16px;padding:13px 18px;border-radius:4px;background:#e6002e;color:#fff;font-size:13px;font-weight:750; }
#ams-site-footer .ams-f-contact-button:hover { background:#bf0027;color:#fff; }
#ams-site-footer .ams-f-social { display:flex;flex-direction:column;align-items:flex-start;gap:16px;margin-top:30px;padding-top:25px;border-top:1px solid rgba(255,255,255,.14); }
#ams-site-footer .ams-f-social-title { color:#aebfd1;font-size:10px;font-weight:750;letter-spacing:.15em;text-transform:uppercase; }
#ams-site-footer .ams-f-social-links { display:flex;align-items:center;flex-wrap:wrap;gap:11px; }
#ams-site-footer .ams-f-social-link { display:inline-flex;justify-content:center;align-items:center;flex:0 0 44px;width:44px;height:44px;padding:0;border:1px solid rgba(255,255,255,.23);border-radius:50%;background:rgba(255,255,255,.055);color:#fff;transition:background .2s ease,border-color .2s ease,transform .2s ease; }
#ams-site-footer .ams-f-social-link svg { display:block;width:20px;height:20px;max-width:none;fill:none;stroke:currentColor; }
#ams-site-footer .ams-f-social-link:hover { color:#fff;background:#e6002e;border-color:#e6002e;transform:translateY(-2px); }
#ams-site-footer .ams-f-bottom { border-top:1px solid #29435e;background:#05172c; }
#ams-site-footer .ams-f-bottom-inner { display:flex;align-items:center;justify-content:space-between;gap:25px;min-height:76px;padding:18px 0; }
#ams-site-footer .ams-f-copyright { color:#aabbcc;font-size:11px; }
#ams-site-footer .ams-f-legal { display:flex;align-items:center;flex-wrap:wrap;gap:25px; }
#ams-site-footer .ams-f-legal a { color:#bccddd;font-size:11px; }
#ams-site-footer .ams-f-legal a:hover { color:#fff; }
@media (max-width:1024px) {
  #ams-site-footer .ams-f-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:45px 35px; }
}
@media (max-width:700px) {
  #ams-site-footer .ams-f-main { padding:64px 0 60px; }
  #ams-site-footer .ams-f-grid { grid-template-columns:1fr;gap:40px; }
  #ams-site-footer .ams-f-logo { width:225px;margin-bottom:28px; }
  #ams-site-footer .ams-f-column { gap:13px; }
  #ams-site-footer .ams-f-bottom-inner { flex-direction:column;align-items:flex-start;gap:16px; }
  #ams-site-footer .ams-f-legal { gap:17px; }
}
@media (prefers-reduced-motion:reduce) {
  #ams-site-footer * { transition:none !important; }
}

/* AMS – Footer-Claim ohne zusätzliche H2 */

#ams-site-footer .ams-f-brand-claim {
  max-width: 350px;
  margin: 0 0 22px;
  color: #ffffff;
  font-size: clamp(28px, 2.6vw, 40px);
  font-weight: 570;
  line-height: 1.18;
  letter-spacing: -.045em;
}

#ams-site-footer .ams-f-brand-claim span {
  color: #ff718a;
}

@media (max-width: 700px) {
  #ams-site-footer .ams-f-brand-claim {
    font-size: 36px;
  }
}



/* ==========================================
   AMS FOOTER – AGENTUR CREDIT V1.4
   Donnay Business Automation
   ========================================== */

/* Copyright und Agenturhinweis */

#ams-site-footer .ams-f-credit-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  min-width: 0;
}

/* Copyright */

#ams-site-footer .ams-f-credit-group
.ams-f-copyright {
  color: #aabbcc;
  font-size: 11px;
  line-height: 1.6;
}

/* Dezentes Trennzeichen */

#ams-site-footer .ams-f-credit-separator {
  color: #657f99;
  font-size: 12px;
}

/* Agenturhinweis */

#ams-site-footer .ams-f-agency-credit {
  color: #aabbcc;
  font-size: 11px;
  line-height: 1.6;
}


/* ==========================================
   AMS FOOTER – AGENTUR CREDIT V1.4
   Donnay Business Automation
   ========================================== */

/* Copyright und Agenturhinweis */

#ams-site-footer .ams-f-credit-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  min-width: 0;
}

/* Copyright */

#ams-site-footer .ams-f-credit-group
.ams-f-copyright {
  color: #aabbcc;
  font-size: 11px;
  line-height: 1.6;
}

/* Dezentes Trennzeichen */

#ams-site-footer .ams-f-credit-separator {
  color: #657f99;
  font-size: 12px;
}

/* Agenturhinweis */

#ams-site-footer .ams-f-agency-credit {
  color: #aabbcc;
  font-size: 11px;
  line-height: 1.6;
}

/* Agentur-Link */

#ams-site-footer .ams-f-agency-credit a {
  display: inline-flex;
  align-items: center;
  gap: 4px;

  color: #dbe6f2;
  font-size: inherit;
  font-weight: 650;
  text-decoration: none;

  transition: color .2s ease;
}

/* Externer Link-Pfeil */

#ams-site-footer .ams-f-agency-credit svg {
  display: inline-block;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  stroke: currentColor;

  transition: transform .2s ease;
}

/* Hover */

#ams-site-footer .ams-f-agency-credit a:hover {
  color: #ff718a;
}

#ams-site-footer .ams-f-agency-credit
a:hover svg {
  transform: translate(2px, -2px);
}

/* ==========================================
   RESPONSIVE – TABLET
   ========================================== */

@media (max-width: 1100px) {

  #ams-site-footer .ams-f-credit-group {
    gap: 8px;
  }

}

/* ==========================================
   RESPONSIVE – MOBILE
   ========================================== */

@media (max-width: 700px) {

  #ams-site-footer .ams-f-credit-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  /* Trennpunkt auf Mobile entfernen */

  #ams-site-footer .ams-f-credit-separator {
    display: none;
  }

  #ams-site-footer .ams-f-agency-credit {
    font-size: 11px;
  }

}

/* ==========================================
   ACCESSIBILITY
   ========================================== */

@media (prefers-reduced-motion: reduce) {

  #ams-site-footer .ams-f-agency-credit a,
  #ams-site-footer .ams-f-agency-credit svg {
    transition: none;
  }

}/* End custom CSS */
/* Start custom CSS *//* ==========================================
   AMS SANDIENST
   EINSATZORTE – MODUL 01
   HERO V2.0 MIT NRW-BILDMOTIV

   Desktop / Tablet / Smartphone
   Elementor Canvas
   ========================================== */


/* ==========================================
   01 – GRUNDLAGEN
   ========================================== */

#ams-locations-hero {
  --ams-red: #e6002e;
  --ams-red-dark: #bf0027;
  --ams-navy: #071c37;
  --ams-blue: #0c294a;
  --ams-white: #ffffff;

  position: relative;
  isolation: isolate;

  width: 100%;
  margin: 0;
  padding: 106px 0 0;

  overflow: hidden;

  background: var(--ams-navy);
  color: #ffffff;

  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Arial,
    sans-serif;

  overflow-wrap: break-word;
}

#ams-locations-hero,
#ams-locations-hero *,
#ams-locations-hero *::before,
#ams-locations-hero *::after {
  box-sizing: border-box;
}


/* ==========================================
   02 – HERO-BILD
   ========================================== */

#ams-locations-hero .ams-loc-hero-media {
  position: absolute;
  z-index: 0;

  inset: 0;

  width: 100%;
  height: 100%;

  overflow: hidden;

  background: #071c37;

  pointer-events: none;
}

#ams-locations-hero .ams-loc-hero-media img {
  position: absolute;
  z-index: 0;

  inset: 0;

  display: block;

  width: 100%;
  height: 100%;
  max-width: none;

  object-fit: cover;
  object-position: center center;

  filter: saturate(.92) contrast(1.04);
}


/* ==========================================
   03 – DUNKELBLAUER BILDVERLAUF
   ========================================== */

#ams-locations-hero .ams-loc-hero-media::after {
  content: "";

  position: absolute;
  z-index: 1;

  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(5, 19, 38, .94) 0%,
      rgba(5, 21, 42, .88) 24%,
      rgba(5, 23, 45, .69) 47%,
      rgba(5, 23, 45, .34) 76%,
      rgba(5, 23, 45, .28) 100%
    ),
    linear-gradient(
      0deg,
      rgba(7, 28, 55, .98) 0%,
      rgba(7, 28, 55, .48) 22%,
      transparent 52%
    );

  pointer-events: none;
}


/* ==========================================
   04 – INHALTSCONTAINER
   ========================================== */

#ams-locations-hero .ams-loc-hero-container {
  position: relative;
  z-index: 2;

  width: min(1320px, calc(100% - 96px));

  margin-inline: auto;
}


/* ==========================================
   05 – ZWEISPALTIGES LAYOUT
   ========================================== */

#ams-locations-hero .ams-loc-hero-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(0, .85fr);

  align-items: center;

  gap: clamp(35px, 4.7vw, 85px);

  padding-bottom: 83px;
}

#ams-locations-hero .ams-loc-hero-content {
  min-width: 0;
}


/* ==========================================
   06 – KLEINE KENNZEICHNUNG
   ========================================== */

#ams-locations-hero .ams-loc-hero-eyebrow {
  display: inline-flex;
  align-items: center;

  gap: 14px;

  color: #d2e1ee;

  font-size: 11px;
  font-weight: 750;
  line-height: 1.5;
  letter-spacing: .16em;

  text-transform: uppercase;
}

#ams-locations-hero .ams-loc-hero-eyebrow-line {
  display: block;
  flex-shrink: 0;

  width: 31px;
  height: 2px;

  background: #ff5577;
}


/* ==========================================
   07 – H1
   ========================================== */

#ams-locations-hero h1 {
  max-width: 800px;

  margin: 28px 0 27px;

  color: #ffffff;

  font-size: clamp(46px, 5.25vw, 78px);
  font-weight: 570;
  line-height: 1.09;
  letter-spacing: -.06em;

  overflow-wrap: break-word;
}

#ams-locations-hero h1 span {
  display: block;

  margin-top: 12px;

  color: #ff6683;

  font-weight: 620;
}


/* ==========================================
   08 – EINLEITUNGSTEXT
   ========================================== */

#ams-locations-hero .ams-loc-hero-description {
  max-width: 640px;

  margin: 0 0 35px;

  color: #e0e9f2;

  font-size: clamp(15px, 1.25vw, 18px);
  font-weight: 400;
  line-height: 1.85;
}


/* ==========================================
   09 – CTA-CONTAINER
   ========================================== */

#ams-locations-hero .ams-loc-hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 13px;
}


/* ==========================================
   10 – GEMEINSAME CTA-STYLES
   ========================================== */

#ams-locations-hero .ams-loc-hero-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;

  gap: 21px;

  min-height: 57px;
  max-width: 100%;

  padding: 16px 21px;

  border: 1px solid transparent;
  border-radius: 4px;

  font-size: 13px;
  font-weight: 750;
  line-height: 1.4;

  text-decoration: none;

  transition:
    background .25s ease,
    border-color .25s ease,
    transform .25s ease;
}

#ams-locations-hero .ams-loc-hero-button svg {
  display: block;
  flex-shrink: 0;

  width: 19px;
  height: 19px;

  stroke: currentColor;
}


/* ==========================================
   11 – ROTER HAUPTBUTTON
   ========================================== */

#ams-locations-hero .ams-loc-hero-primary {
  background: var(--ams-red);
  border-color: var(--ams-red);

  color: #ffffff;
}

#ams-locations-hero .ams-loc-hero-primary:hover {
  background: var(--ams-red-dark);
  border-color: var(--ams-red-dark);

  color: #ffffff;
  transform: translateY(-2px);
}


/* ==========================================
   12 – SEKUNDÄRER BUTTON
   ========================================== */

#ams-locations-hero .ams-loc-hero-secondary {
  border-color: rgba(255, 255, 255, .65);

  background: rgba(6, 25, 48, .40);
  color: #ffffff;
}

#ams-locations-hero .ams-loc-hero-secondary:hover {
  border-color: #ffffff;

  background: rgba(255, 255, 255, .15);
  color: #ffffff;

  transform: translateY(-2px);
}


/* ==========================================
   13 – REGIONALER HINWEIS
   ========================================== */

#ams-locations-hero .ams-loc-hero-region-note {
  display: inline-flex;
  align-items: center;

  gap: 11px;

  margin-top: 31px;

  color: #c3d5e4;

  font-size: 11px;
  font-weight: 650;
  line-height: 1.6;
  letter-spacing: .025em;
}

#ams-locations-hero .ams-loc-hero-note-dot {
  display: block;
  flex-shrink: 0;

  width: 7px;
  height: 7px;

  border-radius: 50%;
  background: #ff5577;
}


/* ==========================================
   14 – STÄDTE-NAVIGATIONSKARTE
   ========================================== */

#ams-locations-hero .ams-loc-hero-chooser {
  position: relative;

  min-width: 0;

  padding: 29px 30px 0;

  border: 1px solid rgba(218, 233, 247, .29);
  border-radius: 6px;

  background: rgba(6, 24, 46, .88);
  color: #ffffff;

  box-shadow:
    0 24px 65px rgba(0, 10, 23, .24);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  scroll-margin-top:
    calc(var(--ams-header-height, 147px) + 20px);
}


/* ==========================================
   15 – NAVIGATIONSKARTEN-KOPF
   ========================================== */

#ams-locations-hero .ams-loc-hero-chooser-top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  flex-wrap: wrap;
  gap: 12px;

  margin-bottom: 25px;
}

#ams-locations-hero .ams-loc-hero-chooser-label {
  color: #c4d6e6;

  font-size: 10px;
  font-weight: 750;
  line-height: 1.5;
  letter-spacing: .14em;
}

#ams-locations-hero .ams-loc-hero-count {
  display: inline-flex;
  align-items: center;

  padding: 7px 10px;

  border: 1px solid rgba(255,255,255,.23);
  border-radius: 3px;

  color: #e2edf6;

  font-size: 10px;
  font-weight: 750;
  letter-spacing: .08em;
}


/* ==========================================
   16 – NAVIGATIONSKARTEN-TITEL
   ========================================== */

#ams-locations-hero
.ams-loc-hero-chooser-heading h2 {
  margin: 0 0 13px;

  color: #ffffff;

  font-size: clamp(29px, 3vw, 43px);
  font-weight: 570;
  line-height: 1.15;
  letter-spacing: -.05em;
}

#ams-locations-hero
.ams-loc-hero-chooser-heading h2 span {
  display: block;

  color: #ff718d;
}

#ams-locations-hero
.ams-loc-hero-chooser-heading p {
  max-width: 400px;

  margin: 0 0 24px;

  color: #c0d1e2;

  font-size: 13px;
  line-height: 1.75;
}


/* ==========================================
   17 – STÄDTELISTE
   ========================================== */

#ams-locations-hero .ams-loc-hero-city-list {
  display: flex;
  flex-direction: column;

  margin: 0;
  padding: 0;

  list-style: none;
}

#ams-locations-hero .ams-loc-hero-city-list li {
  margin: 0;
  padding: 0;

  border-top: 1px solid rgba(255,255,255,.14);

  list-style: none;
}

#ams-locations-hero .ams-loc-hero-city-list a {
  display: flex;
  align-items: center;

  gap: 15px;

  min-height: 72px;
  padding: 13px 2px;

  color: #ffffff;
  text-decoration: none;

  transition:
    padding .25s ease,
    background .25s ease;
}

#ams-locations-hero
.ams-loc-hero-city-list a:hover {
  padding-left: 9px;
}


/* ==========================================
   18 – STANDORTMARKER
   ========================================== */

#ams-locations-hero .ams-loc-hero-city-icon {
  display: grid;
  place-items: center;

  flex: 0 0 34px;

  width: 34px;
  height: 34px;

  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;

  background: rgba(255,255,255,.075);
}

#ams-locations-hero .ams-loc-hero-city-icon span {
  display: block;

  width: 9px;
  height: 9px;

  border: 2px solid #ff6c87;
  border-radius: 50%;

  transition:
    background .25s ease,
    transform .25s ease;
}

#ams-locations-hero
.ams-loc-hero-city-list a:hover
.ams-loc-hero-city-icon span {
  background: #ff6c87;
  transform: scale(1.1);
}


/* ==========================================
   19 – STADTNAME & UNTERTITEL
   ========================================== */

#ams-locations-hero .ams-loc-hero-city-name {
  display: flex;
  flex-direction: column;

  flex: 1;
  min-width: 0;

  gap: 4px;
}

#ams-locations-hero .ams-loc-hero-city-name strong {
  color: #ffffff;

  font-size: 16px;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: -.02em;
}

#ams-locations-hero .ams-loc-hero-city-name small {
  color: #b7ccdf;

  font-size: 11px;
  font-weight: 450;
  line-height: 1.4;
}

#ams-locations-hero .ams-loc-hero-city-arrow {
  flex-shrink: 0;

  color: #ff7892;

  font-size: 21px;
  line-height: 1;

  transition:
    color .25s ease,
    transform .25s ease;
}

#ams-locations-hero
.ams-loc-hero-city-list a:hover
.ams-loc-hero-city-arrow {
  color: #ffffff;
  transform: translate(3px, -3px);
}


/* ==========================================
   20 – KARTEN-FOOTER
   ========================================== */

#ams-locations-hero .ams-loc-hero-chooser-footer {
  display: flex;
  align-items: center;

  gap: 10px;

  margin: 10px -30px 0;
  padding: 18px 30px;

  border-radius: 0 0 5px 5px;

  background: rgba(0, 10, 25, .32);
}

#ams-locations-hero .ams-loc-hero-footer-indicator {
  flex-shrink: 0;

  width: 7px;
  height: 7px;

  border-radius: 50%;
  background: #ff5577;
}

#ams-locations-hero
.ams-loc-hero-chooser-footer > span:nth-child(2) {
  flex: 1;

  color: #d5e2ed;

  font-size: 11px;
  font-weight: 650;
  line-height: 1.5;
}

#ams-locations-hero
.ams-loc-hero-chooser-footer a {
  display: grid;
  place-items: center;

  width: 30px;
  height: 30px;

  border: 1px solid rgba(255,255,255,.25);
  border-radius: 50%;

  color: #ffffff;

  font-size: 17px;
  text-decoration: none;

  transition:
    background .25s ease,
    border-color .25s ease;
}

#ams-locations-hero
.ams-loc-hero-chooser-footer a:hover {
  background: var(--ams-red);
  border-color: var(--ams-red);
}


/* ==========================================
   21 – UNTERE INFORMATIONSLEISTE
   ========================================== */

#ams-locations-hero .ams-loc-hero-bottom {
  display: grid;

  grid-template-columns:
    1fr 1fr 1.35fr;

  gap: 30px;

  padding: 27px 0 32px;

  border-top: 1px solid rgba(255,255,255,.3);

  background: transparent;
}

#ams-locations-hero .ams-loc-hero-fact {
  display: flex;
  flex-direction: column;

  min-width: 0;
  gap: 8px;
}

#ams-locations-hero .ams-loc-hero-fact span {
  color: #c1d4e5;

  font-size: 10px;
  font-weight: 750;
  line-height: 1.5;
  letter-spacing: .12em;
}

#ams-locations-hero .ams-loc-hero-fact strong {
  color: #ffffff;

  font-size: 13px;
  font-weight: 650;
  line-height: 1.6;
}


/* ==========================================
   22 – TASTATURFOKUS
   ========================================== */

#ams-locations-hero a:focus-visible {
  outline: 3px solid #ff839c;
  outline-offset: 4px;
}


/* ==========================================
   23 – DESKTOP / SMALL LAPTOP
   ========================================== */

@media (max-width: 1180px) {

  #ams-locations-hero {
    padding-top: 88px;
  }

  #ams-locations-hero .ams-loc-hero-container {
    width: calc(100% - 64px);
  }

  #ams-locations-hero .ams-loc-hero-layout {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, .95fr);

    gap: 30px;
  }

  #ams-locations-hero h1 {
    font-size: clamp(44px, 5.4vw, 66px);
  }

  #ams-locations-hero .ams-loc-hero-chooser {
    padding: 26px 23px 0;
  }

  #ams-locations-hero
  .ams-loc-hero-chooser-footer {
    margin-left: -23px;
    margin-right: -23px;

    padding-left: 23px;
    padding-right: 23px;
  }

}


/* ==========================================
   24 – TABLET: PANORAMA OBEN
   ========================================== */

@media (max-width: 900px) {

  #ams-locations-hero {
    padding-top: 0;
  }

  /* Bild nicht mehr als Hintergrund,
     sondern als eigenständiges Panorama */

  #ams-locations-hero .ams-loc-hero-media {
    position: relative;
    z-index: 1;

    inset: auto;

    width: 100%;
    height: clamp(240px, 35vw, 340px);
  }

  #ams-locations-hero .ams-loc-hero-media img {
    object-position: center center;

    filter: saturate(.98);
  }

  /* Weniger dunkle Überlagerung,
     damit das Motiv sichtbar bleibt */

  #ams-locations-hero .ams-loc-hero-media::after {
    background: linear-gradient(
      180deg,
      rgba(7,28,55,.02) 15%,
      rgba(7,28,55,.08) 58%,
      rgba(7,28,55,.92) 100%
    );
  }

  #ams-locations-hero .ams-loc-hero-container {
    padding-top: 53px;
  }

  #ams-locations-hero .ams-loc-hero-layout {
    grid-template-columns: 1fr;

    align-items: start;
    gap: 47px;

    padding-bottom: 58px;
  }

  #ams-locations-hero .ams-loc-hero-content {
    max-width: 740px;
  }

  #ams-locations-hero h1 {
    font-size: clamp(48px, 7vw, 72px);
  }

  #ams-locations-hero .ams-loc-hero-chooser {
    width: 100%;
    max-width: 730px;

    margin-inline: auto;

    background: rgba(16, 45, 75, .85);
  }

}


/* ==========================================
   25 – SMARTPHONE BIS 700 PX
   ========================================== */

@media (max-width: 700px) {

  /* Hero-Grundlayout */

  #ams-locations-hero .ams-loc-hero-container {
    width: calc(100% - 38px);
    padding-top: 36px;
  }

  /* Sichtbares Fotopanorama */

  #ams-locations-hero .ams-loc-hero-media {
    height: clamp(185px, 56vw, 260px);
  }

  #ams-locations-hero .ams-loc-hero-media img {
    object-position: 45% center;
  }

  #ams-locations-hero .ams-loc-hero-layout {
    gap: 37px;
    padding-bottom: 43px;
  }

  /* Kicker */

  #ams-locations-hero .ams-loc-hero-eyebrow {
    gap: 10px;

    font-size: 9px;
    letter-spacing: .08em;
  }

  #ams-locations-hero .ams-loc-hero-eyebrow-line {
    width: 21px;
  }

  /* H1 */

  #ams-locations-hero h1 {
    margin: 23px 0 24px;

    font-size: clamp(41px, 9.6vw, 58px);
    line-height: 1.11;
  }

  #ams-locations-hero h1 span {
    margin-top: 8px;
  }

  /* Beschreibung */

  #ams-locations-hero .ams-loc-hero-description {
    margin-bottom: 29px;

    color: #d5e2ed;

    font-size: 14px;
    line-height: 1.8;
  }

  /* Buttons untereinander */

  #ams-locations-hero .ams-loc-hero-actions {
    flex-direction: column;
    align-items: stretch;

    gap: 12px;
  }

  #ams-locations-hero .ams-loc-hero-button {
    width: 100%;
    min-height: 55px;

    padding: 15px 18px;

    font-size: 13px;
  }

  #ams-locations-hero .ams-loc-hero-region-note {
    margin-top: 25px;

    font-size: 10px;
  }

  /* Standort-Navigation */

  #ams-locations-hero .ams-loc-hero-chooser {
    padding: 25px 20px 0;
  }

  #ams-locations-hero
  .ams-loc-hero-chooser-heading h2 {
    font-size: 33px;
  }

  #ams-locations-hero
  .ams-loc-hero-chooser-heading p {
    font-size: 12px;
  }

  #ams-locations-hero
  .ams-loc-hero-city-list a {
    min-height: 70px;
    gap: 12px;
  }

  #ams-locations-hero
  .ams-loc-hero-city-name strong {
    font-size: 15px;
  }

  #ams-locations-hero
  .ams-loc-hero-city-name small {
    font-size: 10px;
  }

  #ams-locations-hero
  .ams-loc-hero-chooser-footer {
    margin-left: -20px;
    margin-right: -20px;

    padding: 16px 20px;
  }

  /* Untere Informationsleiste */

  #ams-locations-hero .ams-loc-hero-bottom {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 23px;

    padding: 26px 0;
  }

  #ams-locations-hero
  .ams-loc-hero-fact:nth-child(3) {
    grid-column: 1 / -1;
  }

}


/* ==========================================
   26 – KLEINE SMARTPHONES
   ========================================== */

@media (max-width: 380px) {

  #ams-locations-hero h1 {
    font-size: 39px;
  }

  #ams-locations-hero .ams-loc-hero-media {
    height: 190px;
  }

  #ams-locations-hero .ams-loc-hero-chooser {
    padding: 22px 16px 0;
  }

  #ams-locations-hero
  .ams-loc-hero-chooser-heading h2 {
    font-size: 29px;
  }

  #ams-locations-hero .ams-loc-hero-city-icon {
    flex-basis: 30px;

    width: 30px;
    height: 30px;
  }

  #ams-locations-hero
  .ams-loc-hero-city-name strong {
    font-size: 14px;
  }

  #ams-locations-hero
  .ams-loc-hero-chooser-footer {
    margin-left: -16px;
    margin-right: -16px;

    padding: 15px 16px;
  }

}


/* ==========================================
   27 – REDUZIERTE BEWEGUNG
   ========================================== */

@media (prefers-reduced-motion: reduce) {

  #ams-locations-hero .ams-loc-hero-button,
  #ams-locations-hero .ams-loc-hero-city-list a,
  #ams-locations-hero .ams-loc-hero-city-icon span,
  #ams-locations-hero .ams-loc-hero-city-arrow {
    transition: none !important;
    transform: none !important;
  }

}

/* ==========================================
   AMS SANDIENST
   EINSATZORTE – HERO V2.1

   TABLET & MOBILE HERO FIX

   Bild hinter Text wie auf der Startseite
   Städte-Navigation separat darunter
   Desktop bleibt unverändert
   ========================================== */


/* ==========================================
   01 – TABLET BIS 900 PX
   ========================================== */

@media (max-width: 900px) {

  /* Hero beginnt direkt unter dem Header */

  #ams-locations-hero {
    padding-top: 0 !important;
    background: #071c37;
  }


  /* Vorheriges separates Panorama entfernen.

     Das gleiche Motiv wird jetzt als
     Hintergrund des Textbereichs dargestellt.
  */

  #ams-locations-hero
  .ams-loc-hero-media {
    display: none !important;
  }


  /* Container ohne zusätzlichen Abstand */

  #ams-locations-hero
  .ams-loc-hero-container {
    padding-top: 0 !important;
  }


  /* Hero-Inhalt und Städtenavigation
     untereinander anordnen */

  #ams-locations-hero
  .ams-loc-hero-layout {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr) !important;

    align-items: stretch !important;

    gap: 0 !important;
    padding-bottom: 0 !important;
  }


  /* ======================================
     02 – EIGENTLICHER BILD-HERO
     ====================================== */

  #ams-locations-hero
  .ams-loc-hero-content {
    position: relative;
    z-index: 0;
    isolation: isolate;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    width: 100%;
    min-height: 660px;

    padding: 110px 0 95px;

    overflow: visible;
  }


  /* ======================================
     03 – VOLLFLÄCHIGES NRW-BILD

     Deckt die gesamte Bildschirmbreite ab,
     nicht nur den Elementor-Container.
     ====================================== */

  #ams-locations-hero
  .ams-loc-hero-content::before {
    content: "";

    position: absolute;
    z-index: -2;

    top: 0;
    bottom: 0;

    left: -32px;
    right: -32px;

    background-image:
      url("https://www.ams-sandienst.de/wp-content/uploads/2026/10/Rettungskraefte-im-Sonnenuntergang-ueber-NRW.png");

    background-size: cover;
    background-position: 36% center;
    background-repeat: no-repeat;

    pointer-events: none;
  }


  /* ======================================
     04 – DUNKELBLAUER VERLAUF

     Wie beim Homepage-Hero:
     links mehr Deckung für die Texte,
     rechts bleibt das Motiv sichtbar.
     ====================================== */

  #ams-locations-hero
  .ams-loc-hero-content::after {
    content: "";

    position: absolute;
    z-index: -1;

    top: 0;
    bottom: 0;

    left: -32px;
    right: -32px;

    background:
      linear-gradient(
        90deg,
        rgba(5, 21, 43, .92) 0%,
        rgba(5, 23, 45, .81) 43%,
        rgba(5, 23, 45, .32) 100%
      ),
      linear-gradient(
        0deg,
        rgba(7, 28, 55, .94) 0%,
        rgba(7, 28, 55, .25) 55%,
        rgba(7, 28, 55, .16) 100%
      );

    pointer-events: none;
  }


  /* ======================================
     05 – TYPOGRAFIE
     ====================================== */

  #ams-locations-hero
  .ams-loc-hero-content h1 {
    max-width: 760px;

    margin: 26px 0 25px;

    color: #ffffff;

    font-size: clamp(45px, 6.5vw, 65px);
    line-height: 1.12;
    letter-spacing: -.055em;
  }

  #ams-locations-hero
  .ams-loc-hero-content h1 span {
    color: #ff6683;
  }

  #ams-locations-hero
  .ams-loc-hero-description {
    max-width: 660px;

    color: #e0e9f2;

    font-size: 15px;
    line-height: 1.85;
  }


  /* ======================================
     06 – STÄDTENAVIGATION UNTER DEM HERO
     ====================================== */

  #ams-locations-hero
  .ams-loc-hero-chooser {
    position: relative;
    z-index: 1;

    width: 100%;
    max-width: 730px;

    margin: 42px auto 46px;

    background: #102d4b;
  }


  /* ======================================
     07 – HELLE INFORMATIONLEISTE

     Wie unter dem Startseiten-Hero.
     ====================================== */

  #ams-locations-hero
  .ams-loc-hero-bottom {
    position: relative;
    z-index: 0;
    isolation: isolate;

    margin: 0;
    padding: 27px 0 31px;

    border-top: 0;

    background: #ffffff;
  }

  #ams-locations-hero
  .ams-loc-hero-bottom::before {
    content: "";

    position: absolute;
    z-index: -1;

    top: 0;
    bottom: 0;

    left: -32px;
    right: -32px;

    background: #ffffff;
  }

  #ams-locations-hero
  .ams-loc-hero-fact span {
    color: #7c8a9b;
  }

  #ams-locations-hero
  .ams-loc-hero-fact strong {
    color: #173556;
  }

}


/* ==========================================
   08 – SMARTPHONE BIS 700 PX
   ========================================== */

@media (max-width: 700px) {

  /* ======================================
     BILD-HERO
     ====================================== */

  #ams-locations-hero
  .ams-loc-hero-content {
    min-height: 690px;

    padding: 88px 0 78px;

    justify-content: center;
  }


  /* Bild auf Mobilgeräten so ausrichten,
     dass Rettungskräfte sichtbar bleiben */

  #ams-locations-hero
  .ams-loc-hero-content::before {
    left: -19px;
    right: -19px;

    background-size: cover;
    background-position: 30% center;
  }


  /* Mobiler Verlauf für gut lesbare Texte */

  #ams-locations-hero
  .ams-loc-hero-content::after {
    left: -19px;
    right: -19px;

    background:
      linear-gradient(
        90deg,
        rgba(5, 21, 43, .83) 0%,
        rgba(5, 23, 45, .66) 60%,
        rgba(5, 23, 45, .36) 100%
      ),
      linear-gradient(
        0deg,
        rgba(7, 28, 55, .96) 0%,
        rgba(7, 28, 55, .55) 45%,
        rgba(7, 28, 55, .28) 100%
      );
  }


  /* ======================================
     KICKER
     ====================================== */

  #ams-locations-hero
  .ams-loc-hero-eyebrow {
    gap: 12px;

    color: #d2e0ed;

    font-size: 10px;
    letter-spacing: .11em;
  }


  /* ======================================
     H1
     ====================================== */

  #ams-locations-hero
  .ams-loc-hero-content h1 {
    max-width: 100%;

    margin: 25px 0 25px;

    font-size: clamp(42px, 9.5vw, 56px);
    font-weight: 570;
    line-height: 1.12;
    letter-spacing: -.052em;
  }

  #ams-locations-hero
  .ams-loc-hero-content h1 span {
    margin-top: 9px;

    color: #ff6683;
  }


  /* ======================================
     BESCHREIBUNG
     ====================================== */

  #ams-locations-hero
  .ams-loc-hero-description {
    max-width: 100%;

    margin-bottom: 29px;

    color: #e3ebf3;

    font-size: 14px;
    line-height: 1.8;
  }


  /* ======================================
     CTA-BUTTONS

     Primär rot, sekundär dezenter Textlink
     wie auf der neuen Startseite.
     ====================================== */

  #ams-locations-hero
  .ams-loc-hero-actions {
    display: flex;

    flex-direction: column;
    align-items: flex-start;

    gap: 10px;

    width: 100%;
  }

  #ams-locations-hero
  .ams-loc-hero-primary {
    width: auto;
    max-width: 100%;

    min-height: 56px;
    padding: 16px 19px;

    font-size: 13px;
  }

  #ams-locations-hero
  .ams-loc-hero-secondary {
    justify-content: flex-start;

    width: auto;
    min-height: 44px;

    padding: 10px 0;

    border: 0;

    background: transparent;

    color: #ffffff;
    font-size: 13px;
  }

  #ams-locations-hero
  .ams-loc-hero-secondary:hover {
    background: transparent;
    color: #ffffff;
  }


  /* ======================================
     REGIONALER HINWEIS
     ====================================== */

  #ams-locations-hero
  .ams-loc-hero-region-note {
    margin-top: 32px;

    color: #cfdeeb;

    font-size: 10px;
  }


  /* ======================================
     STÄDTEKARTE
     ====================================== */

  #ams-locations-hero
  .ams-loc-hero-chooser {
    margin-top: 27px;
    margin-bottom: 29px;

    background: #102d4b;
  }


  /* ======================================
     HELLE UNTERE INFORMATIONEN
     ====================================== */

  #ams-locations-hero
  .ams-loc-hero-bottom {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 23px;

    padding: 28px 0;
  }

  #ams-locations-hero
  .ams-loc-hero-bottom::before {
    left: -19px;
    right: -19px;
  }

  #ams-locations-hero
  .ams-loc-hero-fact span {
    font-size: 9px;
    color: #8190a0;
  }

  #ams-locations-hero
  .ams-loc-hero-fact strong {
    font-size: 13px;

    color: #173556;
  }

}


/* ==========================================
   09 – KLEINE SMARTPHONES BIS 380 PX
   ========================================== */

@media (max-width: 380px) {

  #ams-locations-hero
  .ams-loc-hero-content {
    min-height: 670px;

    padding-top: 75px;
    padding-bottom: 70px;
  }

  #ams-locations-hero
  .ams-loc-hero-content h1 {
    font-size: 39px;
  }

  #ams-locations-hero
  .ams-loc-hero-content::before {
    background-position: 27% center;
  }

  #ams-locations-hero
  .ams-loc-hero-description {
    font-size: 13px;
  }

}

/* ==========================================
   ENDE HERO V2.1 MOBILE / TABLET FIX
   ========================================== */

/* ==========================================
   ENDE HERO V2.0
   ========================================== */

   
   
   
/* ==========================================
   AMS SANDIENST
   EINSATZORTE – MODUL 02
   REGIONAL VERWURZELT V1.0

   Premium Editorial Layout
   Desktop / Tablet / Smartphone
   ========================================== */


/* ==========================================
   01 – GRUNDLAGEN
   ========================================== */

#ams-locations-about {
  --ams-red: #e6002e;
  --ams-red-dark: #bf0027;
  --ams-navy: #071c37;
  --ams-text: #14243b;
  --ams-muted: #627589;

  position: relative;

  width: 100%;
  margin: 0;
  padding: 115px 0 120px;

  background: #ffffff;
  color: var(--ams-text);

  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Arial,
    sans-serif;

  overflow-wrap: break-word;
}

#ams-locations-about,
#ams-locations-about *,
#ams-locations-about *::before,
#ams-locations-about *::after {
  box-sizing: border-box;
}

#ams-locations-about .ams-loc-about-container {
  width: min(1320px, calc(100% - 96px));
  margin-inline: auto;
}


/* ==========================================
   02 – HAUPTLAYOUT
   ========================================== */

#ams-locations-about .ams-loc-about-layout {
  display: grid;

  grid-template-columns:
    minmax(0, .9fr)
    minmax(0, 1.1fr);

  align-items: center;
  gap: clamp(55px, 7vw, 115px);
}

#ams-locations-about .ams-loc-about-visual,
#ams-locations-about .ams-loc-about-content {
  min-width: 0;
}


/* ==========================================
   03 – BILDBEREICH
   ========================================== */

#ams-locations-about .ams-loc-about-visual {
  position: relative;

  padding-bottom: 30px;
}

#ams-locations-about .ams-loc-about-image-wrap {
  position: relative;
  isolation: isolate;

  width: 100%;
  min-height: 640px;

  overflow: hidden;

  border-radius: 5px;
  background: #102e4d;
}

#ams-locations-about .ams-loc-about-image-wrap img {
  position: absolute;
  inset: 0;

  display: block;

  width: 100%;
  height: 100%;
  max-width: none;

  object-fit: cover;
  object-position: center center;

  transition:
    transform .8s cubic-bezier(.22,1,.36,1);
}


/* ==========================================
   04 – BILDÜBERLAGERUNG
   ========================================== */

#ams-locations-about .ams-loc-about-image-shade {
  position: absolute;
  z-index: 1;

  inset: 0;

  background: linear-gradient(
    180deg,
    rgba(7,28,55,.35) 0%,
    rgba(7,28,55,.04) 35%,
    rgba(7,28,55,.2) 60%,
    rgba(7,28,55,.82) 100%
  );

  pointer-events: none;
}


/* ==========================================
   05 – BILD-KENNZEICHNUNG
   ========================================== */

#ams-locations-about .ams-loc-about-image-kicker {
  position: absolute;
  z-index: 2;

  top: 31px;
  left: 31px;

  color: #ffffff;

  font-size: 10px;
  font-weight: 750;
  line-height: 1.5;
  letter-spacing: .15em;
}


/* ==========================================
   06 – BILDBESCHRIFTUNG
   ========================================== */

#ams-locations-about .ams-loc-about-image-caption {
  position: absolute;
  z-index: 2;

  left: 32px;
  right: 32px;
  bottom: 125px;

  display: flex;
  align-items: flex-start;

  gap: 17px;
}

#ams-locations-about .ams-loc-about-caption-line {
  flex: 0 0 3px;

  width: 3px;
  height: 52px;

  background: var(--ams-red);
}

#ams-locations-about .ams-loc-about-image-caption p {
  margin: 0;

  color: #e2ebf3;

  font-size: clamp(21px, 2.25vw, 31px);
  font-weight: 450;
  line-height: 1.25;
  letter-spacing: -.025em;
}

#ams-locations-about
.ams-loc-about-image-caption strong {
  display: block;

  color: #ffffff;

  font-weight: 650;
}


/* ==========================================
   07 – WEISSE STANDORTKARTE
   ========================================== */

#ams-locations-about .ams-loc-about-location-card {
  position: absolute;
  z-index: 3;

  left: 31px;
  right: 31px;
  bottom: 0;

  display: flex;
  align-items: center;

  gap: 18px;

  min-height: 104px;
  padding: 20px 24px;

  border: 1px solid #e0e7ee;
  border-radius: 4px;

  background: #ffffff;

  box-shadow:
    0 14px 35px rgba(7,28,55,.14);
}


/* ==========================================
   08 – STANDORT-ICON
   ========================================== */

#ams-locations-about .ams-loc-about-location-icon {
  display: grid;
  place-items: center;

  flex: 0 0 52px;

  width: 52px;
  height: 52px;

  border: 1px solid #f3dce2;
  border-radius: 4px;

  background: #fff0f4;
  color: var(--ams-red);
}

#ams-locations-about
.ams-loc-about-location-icon svg {
  display: block;

  width: 25px;
  height: 25px;

  stroke: currentColor;
}


/* ==========================================
   09 – STANDORTTEXT
   ========================================== */

#ams-locations-about .ams-loc-about-location-label {
  display: block;

  margin-bottom: 6px;

  color: #8190a0;

  font-size: 10px;
  font-weight: 750;
  line-height: 1.45;
  letter-spacing: .1em;
  text-transform: uppercase;
}

#ams-locations-about .ams-loc-about-location-card strong {
  display: block;

  color: #173556;

  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.02em;
}

#ams-locations-about .ams-loc-about-location-sub {
  display: block;

  margin-top: 5px;

  color: #75879a;

  font-size: 11px;
  line-height: 1.5;
}


/* ==========================================
   10 – HOVER BILD
   ========================================== */

@media (hover: hover) and
       (prefers-reduced-motion: no-preference) {

  #ams-locations-about
  .ams-loc-about-visual:hover img {
    transform: scale(1.035);
  }

}


/* ==========================================
   11 – TEXTBEREICH
   ========================================== */

#ams-locations-about .ams-loc-about-content {
  padding: 8px 0 0;
}


/* ==========================================
   12 – KENNZEICHNUNG
   ========================================== */

#ams-locations-about .ams-loc-about-eyebrow {
  display: inline-flex;
  align-items: center;

  gap: 13px;

  color: #758598;

  font-size: 11px;
  font-weight: 750;
  line-height: 1.5;
  letter-spacing: .14em;
  text-transform: uppercase;
}

#ams-locations-about .ams-loc-about-eyebrow::before {
  content: "";

  display: block;
  flex-shrink: 0;

  width: 29px;
  height: 2px;

  background: var(--ams-red);
}


/* ==========================================
   13 – H2
   ========================================== */

#ams-locations-about .ams-loc-about-content h2 {
  margin: 24px 0 24px;

  color: #14243b;

  font-size: clamp(40px, 4.1vw, 67px);
  font-weight: 570;
  line-height: 1.12;
  letter-spacing: -.055em;

  overflow-wrap: break-word;
  hyphens: auto;
}

#ams-locations-about
.ams-loc-about-content h2 span {
  display: block;

  color: var(--ams-red);
}


/* ==========================================
   14 – EINLEITUNGSTEXT
   ========================================== */

#ams-locations-about .ams-loc-about-lead {
  max-width: 680px;

  margin: 0 0 20px;

  color: #173556;

  font-size: clamp(18px, 1.55vw, 22px);
  font-weight: 550;
  line-height: 1.65;
}

#ams-locations-about .ams-loc-about-description {
  max-width: 690px;

  margin: 0 0 17px;

  color: #617387;

  font-size: 14px;
  line-height: 1.9;
}


/* ==========================================
   15 – KOMPETENZPUNKTE
   ========================================== */

#ams-locations-about .ams-loc-about-features {
  display: flex;
  flex-direction: column;

  gap: 0;

  margin-top: 30px;

  border-top: 1px solid #e4eaf0;
}

#ams-locations-about .ams-loc-about-feature {
  display: grid;

  grid-template-columns:
    34px minmax(0, 1fr);

  align-items: start;
  gap: 18px;

  padding: 22px 0;

  border-bottom: 1px solid #e4eaf0;
}


/* ==========================================
   16 – NUMMERIERUNG
   ========================================== */

#ams-locations-about .ams-loc-about-feature-number {
  display: block;

  padding-top: 3px;

  color: var(--ams-red);

  font-size: 12px;
  font-weight: 750;
  line-height: 1.5;
  letter-spacing: .08em;
}


/* ==========================================
   17 – KOMPETENZTEXT
   ========================================== */

#ams-locations-about
.ams-loc-about-feature-text h3 {
  margin: 0 0 7px;

  color: #173556;

  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.025em;
}

#ams-locations-about
.ams-loc-about-feature-text p {
  max-width: 600px;

  margin: 0;

  color: #65788a;

  font-size: 13px;
  line-height: 1.75;
}


/* ==========================================
   18 – CTA-CONTAINER
   ========================================== */

#ams-locations-about .ams-loc-about-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 21px;

  margin-top: 31px;
}


/* ==========================================
   19 – ROTER HAUPTBUTTON
   ========================================== */

#ams-locations-about .ams-loc-about-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;

  gap: 23px;

  min-height: 55px;
  max-width: 100%;

  padding: 15px 21px;

  border: 1px solid var(--ams-red);
  border-radius: 4px;

  background: var(--ams-red);
  color: #ffffff;

  font-size: 13px;
  font-weight: 750;
  line-height: 1.45;
  text-decoration: none;

  transition:
    background .25s ease,
    border-color .25s ease,
    transform .25s ease;
}

#ams-locations-about
.ams-loc-about-button:hover {
  background: var(--ams-red-dark);
  border-color: var(--ams-red-dark);
  color: #ffffff;

  transform: translateY(-2px);
}

#ams-locations-about .ams-loc-about-button svg {
  display: block;
  flex-shrink: 0;

  width: 18px;
  height: 18px;

  stroke: currentColor;
}


/* ==========================================
   20 – SEKUNDÄRER TEXTLINK
   ========================================== */

#ams-locations-about .ams-loc-about-text-link {
  display: inline-flex;
  align-items: center;

  gap: 11px;

  color: #173556;

  font-size: 13px;
  font-weight: 750;
  line-height: 1.6;
  text-decoration: none;
}

#ams-locations-about
.ams-loc-about-text-link span {
  color: var(--ams-red);

  font-size: 20px;
  line-height: 1;

  transition: transform .25s ease;
}

#ams-locations-about
.ams-loc-about-text-link:hover {
  color: var(--ams-red);
}

#ams-locations-about
.ams-loc-about-text-link:hover span {
  transform: translate(3px, -3px);
}


/* ==========================================
   21 – SCROLL-ANIMATION
   ========================================== */

@media (prefers-reduced-motion: no-preference) {

  #ams-locations-about .ams-loc-about-visual,
  #ams-locations-about .ams-loc-about-content {
    transition:
      opacity .8s cubic-bezier(.22,1,.36,1),
      transform .9s cubic-bezier(.22,1,.36,1);
  }

  #ams-locations-about
  .ams-loc-about-motion:not(.ams-loc-about-visible) {
    opacity: 0;
    transform: translate3d(0, 26px, 0);
  }

  #ams-locations-about
  .ams-loc-about-motion.ams-loc-about-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  #ams-locations-about
  .ams-loc-about-content.ams-loc-about-motion {
    transition-delay: 100ms;
  }

}


/* ==========================================
   22 – FOKUS
   ========================================== */

#ams-locations-about a:focus-visible {
  outline: 3px solid var(--ams-red);
  outline-offset: 4px;
}


/* ==========================================
   23 – TABLET BIS 1100 PX
   ========================================== */

@media (max-width: 1100px) {

  #ams-locations-about {
    padding: 95px 0;
  }

  #ams-locations-about .ams-loc-about-container {
    width: calc(100% - 48px);
  }

  #ams-locations-about .ams-loc-about-layout {
    gap: 50px;
  }

  #ams-locations-about .ams-loc-about-image-wrap {
    min-height: 595px;
  }

  #ams-locations-about .ams-loc-about-content h2 {
    font-size: clamp(40px, 4.5vw, 57px);
  }

  #ams-locations-about .ams-loc-about-location-card {
    left: 20px;
    right: 20px;

    gap: 13px;
    padding: 18px;
  }

  #ams-locations-about
  .ams-loc-about-location-card strong {
    font-size: 15px;
  }

  #ams-locations-about .ams-loc-about-location-icon {
    flex-basis: 43px;
    width: 43px;
    height: 43px;
  }

}


/* ==========================================
   24 – TABLET BIS 900 PX
   ========================================== */

@media (max-width: 900px) {

  #ams-locations-about .ams-loc-about-layout {
    grid-template-columns: 1fr;
    gap: 55px;
  }

  #ams-locations-about .ams-loc-about-visual {
    max-width: 720px;
    width: 100%;
  }

  #ams-locations-about .ams-loc-about-image-wrap {
    min-height: 470px;
  }

  #ams-locations-about .ams-loc-about-content {
    max-width: 800px;
  }

  #ams-locations-about .ams-loc-about-content h2 {
    font-size: clamp(43px, 6vw, 65px);
  }

}


/* ==========================================
   25 – SMARTPHONE BIS 700 PX
   ========================================== */

@media (max-width: 700px) {

  #ams-locations-about {
    padding: 76px 0;
  }

  #ams-locations-about .ams-loc-about-container {
    width: calc(100% - 38px);
  }

  #ams-locations-about .ams-loc-about-layout {
    gap: 43px;
  }

  /* Bild */

  #ams-locations-about .ams-loc-about-visual {
    padding-bottom: 26px;
  }

  #ams-locations-about .ams-loc-about-image-wrap {
    min-height: 365px;
  }

  #ams-locations-about .ams-loc-about-image-kicker {
    top: 20px;
    left: 20px;

    font-size: 9px;
  }

  #ams-locations-about
  .ams-loc-about-image-caption {
    left: 21px;
    right: 21px;
    bottom: 107px;

    gap: 12px;
  }

  #ams-locations-about
  .ams-loc-about-image-caption p {
    font-size: clamp(19px, 5.5vw, 26px);
  }

  #ams-locations-about
  .ams-loc-about-caption-line {
    height: 44px;
  }

  /* Standortkarte */

  #ams-locations-about
  .ams-loc-about-location-card {
    left: 12px;
    right: 12px;

    min-height: 90px;
    gap: 12px;

    padding: 15px 14px;
  }

  #ams-locations-about
  .ams-loc-about-location-icon {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
  }

  #ams-locations-about
  .ams-loc-about-location-icon svg {
    width: 22px;
    height: 22px;
  }

  #ams-locations-about
  .ams-loc-about-location-label {
    font-size: 9px;
    letter-spacing: .06em;
  }

  #ams-locations-about
  .ams-loc-about-location-card strong {
    font-size: 13px;
  }

  #ams-locations-about
  .ams-loc-about-location-sub {
    font-size: 10px;
  }

  /* Überschrift */

  #ams-locations-about
  .ams-loc-about-eyebrow {
    font-size: 9px;
    letter-spacing: .08em;
  }

  #ams-locations-about
  .ams-loc-about-content h2 {
    margin: 21px 0;

    font-size: clamp(36px, 8.6vw, 50px);
    line-height: 1.14;
  }

  #ams-locations-about .ams-loc-about-lead {
    font-size: 18px;
  }

  #ams-locations-about
  .ams-loc-about-description {
    font-size: 13px;
    line-height: 1.8;
  }

  /* Kompetenzpunkte */

  #ams-locations-about .ams-loc-about-features {
    margin-top: 25px;
  }

  #ams-locations-about .ams-loc-about-feature {
    grid-template-columns:
      27px minmax(0, 1fr);

    gap: 12px;
    padding: 19px 0;
  }

  #ams-locations-about
  .ams-loc-about-feature-text h3 {
    font-size: 16px;
  }

  #ams-locations-about
  .ams-loc-about-feature-text p {
    font-size: 12px;
  }

  /* CTA */

  #ams-locations-about .ams-loc-about-actions {
    flex-direction: column;
    align-items: stretch;

    gap: 20px;
    margin-top: 27px;
  }

  #ams-locations-about .ams-loc-about-button {
    width: 100%;
    min-height: 55px;

    font-size: 12px;
  }

  #ams-locations-about .ams-loc-about-text-link {
    justify-content: center;
    font-size: 12px;
  }

}


/* ==========================================
   26 – KLEINE SMARTPHONES BIS 380 PX
   ========================================== */

@media (max-width: 380px) {

  #ams-locations-about
  .ams-loc-about-image-wrap {
    min-height: 330px;
  }

  #ams-locations-about
  .ams-loc-about-image-caption {
    bottom: 105px;
  }

  #ams-locations-about
  .ams-loc-about-location-card {
    padding: 13px 11px;
    gap: 10px;
  }

  #ams-locations-about
  .ams-loc-about-location-icon {
    flex-basis: 35px;
    width: 35px;
    height: 35px;
  }

  #ams-locations-about
  .ams-loc-about-location-card strong {
    font-size: 12px;
  }

  #ams-locations-about
  .ams-loc-about-location-sub {
    font-size: 9px;
  }

  #ams-locations-about
  .ams-loc-about-content h2 {
    font-size: 34px;
  }

}


/* ==========================================
   27 – REDUZIERTE BEWEGUNG
   ========================================== */

@media (prefers-reduced-motion: reduce) {

  #ams-locations-about .ams-loc-about-visual,
  #ams-locations-about .ams-loc-about-content,
  #ams-locations-about .ams-loc-about-image-wrap img,
  #ams-locations-about .ams-loc-about-button,
  #ams-locations-about .ams-loc-about-text-link span {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

}

/* ==========================================
   ENDE MODUL 02
   ========================================== */



/* ==========================================
   AMS SANDIENST
   EINSATZORTE – MODUL 03
   REGIONALE STADTKARTEN V1.0

   Premium Local SEO Cards
   Desktop / Tablet / Smartphone
   ========================================== */


/* ==========================================
   01 – GRUNDLAGEN
   ========================================== */

#ams-locations-cities {
  --ams-red: #e6002e;
  --ams-red-dark: #bf0027;
  --ams-navy: #071c37;
  --ams-text: #14243b;
  --ams-muted: #657589;
  --ams-border: #e0e7ef;

  position: relative;

  width: 100%;
  margin: 0;
  padding: 115px 0 105px;

  background: #f5f7fa;
  color: var(--ams-text);

  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Arial,
    sans-serif;

  overflow-wrap: break-word;

  scroll-margin-top: 145px;
}

#ams-locations-cities,
#ams-locations-cities *,
#ams-locations-cities *::before,
#ams-locations-cities *::after {
  box-sizing: border-box;
}

#ams-locations-cities .ams-loc-cities-container {
  width: min(1320px, calc(100% - 96px));
  margin-inline: auto;
}


/* ==========================================
   02 – ÜBERSCHRIFTSBEREICH
   ========================================== */

#ams-locations-cities .ams-loc-cities-header {
  display: grid;

  grid-template-columns:
    minmax(0, 1.1fr)
    minmax(0, .9fr);

  align-items: end;
  gap: 65px;

  margin-bottom: 47px;
}

#ams-locations-cities .ams-loc-cities-heading,
#ams-locations-cities .ams-loc-cities-intro {
  min-width: 0;
}


/* ==========================================
   03 – KICKER
   ========================================== */

#ams-locations-cities .ams-loc-cities-eyebrow {
  display: inline-flex;
  align-items: center;

  gap: 13px;

  color: #718093;

  font-size: 11px;
  font-weight: 750;
  line-height: 1.5;
  letter-spacing: .14em;

  text-transform: uppercase;
}

#ams-locations-cities
.ams-loc-cities-eyebrow::before {
  content: "";

  display: block;
  flex-shrink: 0;

  width: 29px;
  height: 2px;

  background: var(--ams-red);
}


/* ==========================================
   04 – H2
   ========================================== */

#ams-locations-cities .ams-loc-cities-header h2 {
  max-width: 830px;
  margin: 24px 0 0;

  color: var(--ams-text);

  font-size: clamp(40px, 4.3vw, 68px);
  font-weight: 570;
  line-height: 1.12;
  letter-spacing: -.055em;

  overflow-wrap: break-word;
}

#ams-locations-cities
.ams-loc-cities-header h2 span {
  display: block;
  color: var(--ams-red);
}


/* ==========================================
   05 – EINLEITUNG
   ========================================== */

#ams-locations-cities .ams-loc-cities-intro p {
  max-width: 560px;
  margin: 0 0 14px;

  color: #607286;

  font-size: 15px;
  line-height: 1.85;
}

#ams-locations-cities
.ams-loc-cities-intro p:last-child {
  margin-bottom: 0;
}


/* ==========================================
   06 – GRID MIT FÜNF KARTEN
   ========================================== */

#ams-locations-cities .ams-loc-cities-grid {
  display: grid;

  grid-template-columns:
    repeat(6, minmax(0, 1fr));

  align-items: stretch;
  gap: 20px;
}

/* Erste Reihe: drei Karten */

#ams-locations-cities
.ams-loc-city-card:nth-child(-n+3) {
  grid-column: span 2;
}

/* Zweite Reihe: zwei breitere Karten */

#ams-locations-cities
.ams-loc-city-card:nth-child(n+4) {
  grid-column: span 3;
}


/* ==========================================
   07 – KARTEN-GRUNDLAYOUT
   ========================================== */

#ams-locations-cities .ams-loc-city-card {
  position: relative;

  min-width: 0;
  height: 100%;
  margin: 0;

  overflow: hidden;

  border: 1px solid var(--ams-border);
  border-radius: 5px;

  background: #ffffff;

  box-shadow:
    0 5px 20px rgba(7,28,55,.045);

  transition:
    opacity .75s cubic-bezier(.22,1,.36,1),
    transform .85s cubic-bezier(.22,1,.36,1),
    box-shadow .3s ease,
    border-color .3s ease;
}


/* Gesamte Karte anklickbar */

#ams-locations-cities .ams-loc-city-card-link {
  display: flex;
  flex-direction: column;

  width: 100%;
  height: 100%;

  color: inherit;
  text-decoration: none;
}


/* ==========================================
   08 – BILDBEREICH
   ========================================== */

#ams-locations-cities .ams-loc-city-image {
  position: relative;
  isolation: isolate;

  width: 100%;
  height: 245px;

  overflow: hidden;

  background: #173b5a;
}

#ams-locations-cities .ams-loc-city-image img {
  display: block;

  width: 100%;
  height: 100%;
  max-width: none;

  object-fit: cover;
  object-position: center center;

  transition:
    transform .65s cubic-bezier(.22,1,.36,1);
}


/* Individuelle Bildausschnitte */

#ams-locations-cities
.ams-loc-city-card:nth-child(1) img {
  object-position: center center;
}

#ams-locations-cities
.ams-loc-city-card:nth-child(2) img {
  object-position: center 45%;
}

#ams-locations-cities
.ams-loc-city-card:nth-child(3) img {
  object-position: center 45%;
}

#ams-locations-cities
.ams-loc-city-card:nth-child(4) img {
  object-position: center 47%;
}

#ams-locations-cities
.ams-loc-city-card:nth-child(5) img {
  object-position: center center;
}


/* ==========================================
   09 – BILDOVERLAY
   ========================================== */

#ams-locations-cities .ams-loc-city-image::after {
  content: "";

  position: absolute;
  z-index: 1;

  inset: 0;

  background: linear-gradient(
    180deg,
    rgba(7,28,55,.47) 0%,
    rgba(7,28,55,.06) 45%,
    rgba(7,28,55,.5) 100%
  );

  pointer-events: none;
}


/* ==========================================
   10 – NUMMER AUF DEM BILD
   ========================================== */

#ams-locations-cities .ams-loc-city-number {
  position: absolute;
  z-index: 2;

  top: 23px;
  left: 25px;

  color: #ffffff;

  font-size: 11px;
  font-weight: 750;
  line-height: 1.5;
  letter-spacing: .12em;
}


/* ==========================================
   11 – UNTERE BILDKENNZEICHNUNG
   ========================================== */

#ams-locations-cities .ams-loc-city-image-label {
  position: absolute;
  z-index: 2;

  right: 25px;
  bottom: 21px;
  left: 25px;

  color: #ffffff;

  font-size: 10px;
  font-weight: 750;
  line-height: 1.5;
  letter-spacing: .11em;
}


/* ==========================================
   12 – KARTENINHALT
   ========================================== */

#ams-locations-cities .ams-loc-city-body {
  display: flex;
  flex-direction: column;

  flex: 1;
  min-width: 0;

  padding: 30px 29px 27px;
}


/* ==========================================
   13 – REGION
   ========================================== */

#ams-locations-cities .ams-loc-city-region {
  display: block;

  margin-bottom: 15px;

  color: #c60d35;

  font-size: 10px;
  font-weight: 750;
  line-height: 1.5;
  letter-spacing: .14em;
}


/* ==========================================
   14 – STADTNAME
   ========================================== */

#ams-locations-cities .ams-loc-city-body h3 {
  margin: 0 0 11px;

  color: #173556;

  font-size: clamp(29px, 2.8vw, 41px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.05em;

  overflow-wrap: break-word;
  hyphens: auto;
}


/* ==========================================
   15 – LEISTUNGSBEZEICHNUNG
   ========================================== */

#ams-locations-cities .ams-loc-city-subheading {
  margin: 0 0 19px;

  color: #314e6b;

  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}


/* ==========================================
   16 – BESCHREIBUNG
   ========================================== */

#ams-locations-cities .ams-loc-city-description {
  margin: 0 0 27px;

  color: #657589;

  font-size: 13px;
  font-weight: 400;
  line-height: 1.85;
}


/* ==========================================
   17 – LINKBEREICH
   ========================================== */

#ams-locations-cities .ams-loc-city-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 15px;

  width: 100%;

  margin-top: auto;
  padding-top: 21px;

  border-top: 1px solid #e6ecf2;

  color: #173556;

  font-size: 12px;
  font-weight: 750;
  line-height: 1.5;
}


/* ==========================================
   18 – ROTER PFEIL
   ========================================== */

#ams-locations-cities .ams-loc-city-arrow {
  display: grid;
  place-items: center;

  flex-shrink: 0;

  width: 37px;
  height: 37px;

  border-radius: 50%;

  background: var(--ams-red);
  color: #ffffff;

  font-size: 21px;
  font-weight: 450;
  line-height: 1;

  transition:
    background .25s ease,
    transform .25s ease;
}


/* ==========================================
   19 – HOVER-EFFEKTE
   ========================================== */

@media (hover: hover) and
       (prefers-reduced-motion: no-preference) {

  #ams-locations-cities
  .ams-loc-city-card:hover {
    transform: translateY(-5px);

    border-color: #ddbac4;

    box-shadow:
      0 20px 45px rgba(7,28,55,.12);
  }

  #ams-locations-cities
  .ams-loc-city-card:hover img {
    transform: scale(1.055);
  }

  #ams-locations-cities
  .ams-loc-city-card:hover
  .ams-loc-city-arrow {
    background: var(--ams-red-dark);
    transform: translate(3px, -3px);
  }

}


/* ==========================================
   20 – ABSCHLUSSBEREICH
   ========================================== */

#ams-locations-cities .ams-loc-cities-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 35px;

  margin-top: 35px;
  padding-top: 30px;

  border-top: 1px solid #dce4ec;
}

#ams-locations-cities .ams-loc-cities-bottom-copy {
  display: flex;
  align-items: flex-start;

  gap: 16px;
  min-width: 0;
}

#ams-locations-cities .ams-loc-cities-bottom-line {
  display: block;
  flex: 0 0 3px;

  width: 3px;
  height: 48px;

  background: var(--ams-red);
}


/* ==========================================
   21 – ABSCHLUSSTEXT
   ========================================== */

#ams-locations-cities
.ams-loc-cities-bottom-copy strong {
  display: block;

  margin-bottom: 8px;

  color: #173556;

  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
}

#ams-locations-cities
.ams-loc-cities-bottom-copy p {
  max-width: 760px;
  margin: 0;

  color: #64778b;

  font-size: 13px;
  line-height: 1.8;
}


/* ==========================================
   22 – ABSCHLUSSBUTTON
   ========================================== */

#ams-locations-cities .ams-loc-cities-bottom-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;

  gap: 22px;

  flex-shrink: 0;

  min-height: 52px;

  padding: 14px 20px;

  border: 1px solid var(--ams-red);
  border-radius: 4px;

  background: var(--ams-red);
  color: #ffffff;

  font-size: 13px;
  font-weight: 750;
  line-height: 1.45;
  text-decoration: none;

  transition:
    background .25s ease,
    border-color .25s ease,
    transform .25s ease;
}

#ams-locations-cities
.ams-loc-cities-bottom-button:hover {
  background: var(--ams-red-dark);
  border-color: var(--ams-red-dark);
  color: #ffffff;

  transform: translateY(-2px);
}


/* ==========================================
   23 – SCROLL-ANIMATION
   ========================================== */

@media (prefers-reduced-motion: no-preference) {

  #ams-locations-cities
  .ams-loc-city-card.ams-loc-city-motion:not(.ams-loc-city-visible) {
    opacity: 0;
    transform: translate3d(0, 26px, 0);
  }

  #ams-locations-cities
  .ams-loc-city-card.ams-loc-city-motion.ams-loc-city-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  #ams-locations-cities
  .ams-loc-city-card:nth-child(2) {
    transition-delay: 70ms;
  }

  #ams-locations-cities
  .ams-loc-city-card:nth-child(3) {
    transition-delay: 140ms;
  }

  #ams-locations-cities
  .ams-loc-city-card:nth-child(5) {
    transition-delay: 90ms;
  }

}


/* ==========================================
   24 – FOKUS / BARRIEREFREIHEIT
   ========================================== */

#ams-locations-cities a:focus-visible {
  outline: 3px solid var(--ams-red);
  outline-offset: 4px;
}


/* ==========================================
   25 – TABLET BIS 1100 PX
   ========================================== */

@media (max-width: 1100px) {

  #ams-locations-cities {
    padding: 95px 0;
  }

  #ams-locations-cities .ams-loc-cities-container {
    width: calc(100% - 48px);
  }

  #ams-locations-cities .ams-loc-cities-header {
    gap: 35px;
  }

  #ams-locations-cities .ams-loc-cities-grid {
    gap: 16px;
  }

  #ams-locations-cities .ams-loc-city-image {
    height: 210px;
  }

  #ams-locations-cities .ams-loc-city-body {
    padding: 26px 23px 24px;
  }

  #ams-locations-cities .ams-loc-city-body h3 {
    font-size: 32px;
  }

  #ams-locations-cities .ams-loc-city-description {
    font-size: 12px;
  }

}


/* ==========================================
   26 – TABLET BIS 980 PX
   ========================================== */

@media (max-width: 980px) {

  #ams-locations-cities .ams-loc-cities-header {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  #ams-locations-cities .ams-loc-cities-intro {
    max-width: 750px;
  }

  #ams-locations-cities .ams-loc-cities-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  /* Normale Zweier-Anordnung */

  #ams-locations-cities
  .ams-loc-city-card:nth-child(n) {
    grid-column: auto;
  }

  /* Letzte Karte volle Breite */

  #ams-locations-cities
  .ams-loc-city-card:last-child {
    grid-column: 1 / -1;
  }

  #ams-locations-cities .ams-loc-city-image {
    height: 235px;
  }

  #ams-locations-cities .ams-loc-city-body h3 {
    font-size: 35px;
  }

}


/* ==========================================
   27 – SMARTPHONE BIS 700 PX
   ========================================== */

@media (max-width: 700px) {

  #ams-locations-cities {
    padding: 76px 0;
    scroll-margin-top: 105px;
  }

  #ams-locations-cities .ams-loc-cities-container {
    width: calc(100% - 38px);
  }

  /* Überschrift */

  #ams-locations-cities .ams-loc-cities-header {
    margin-bottom: 34px;
  }

  #ams-locations-cities .ams-loc-cities-eyebrow {
    font-size: 10px;
    letter-spacing: .08em;
  }

  #ams-locations-cities
  .ams-loc-cities-header h2 {
    margin-top: 20px;

    font-size: clamp(36px, 8.4vw, 49px);
    line-height: 1.14;
  }

  #ams-locations-cities .ams-loc-cities-intro p {
    font-size: 14px;
    line-height: 1.78;
  }

  /* Eine Karte pro Zeile */

  #ams-locations-cities .ams-loc-cities-grid {
    grid-template-columns: 1fr;
    gap: 17px;
  }

  #ams-locations-cities
  .ams-loc-city-card:nth-child(n) {
    grid-column: 1;
  }

  /* Bilder */

  #ams-locations-cities .ams-loc-city-image {
    height: 235px;
  }

  #ams-locations-cities .ams-loc-city-number {
    top: 19px;
    left: 21px;

    font-size: 10px;
  }

  #ams-locations-cities .ams-loc-city-image-label {
    left: 21px;
    right: 21px;
    bottom: 19px;

    font-size: 9px;
  }

  /* Text */

  #ams-locations-cities .ams-loc-city-body {
    padding: 26px 22px 23px;
  }

  #ams-locations-cities .ams-loc-city-region {
    font-size: 10px;
  }

  #ams-locations-cities .ams-loc-city-body h3 {
    font-size: 34px;
  }

  #ams-locations-cities .ams-loc-city-subheading {
    font-size: 13px;
  }

  #ams-locations-cities .ams-loc-city-description {
    margin-bottom: 24px;

    font-size: 13px;
    line-height: 1.75;
  }

  #ams-locations-cities .ams-loc-city-card-footer {
    font-size: 12px;
  }

  /* Abschluss */

  #ams-locations-cities .ams-loc-cities-bottom {
    flex-direction: column;
    align-items: stretch;

    gap: 23px;
    margin-top: 29px;
    padding-top: 25px;
  }

  #ams-locations-cities
  .ams-loc-cities-bottom-copy {
    gap: 12px;
  }

  #ams-locations-cities
  .ams-loc-cities-bottom-copy strong {
    font-size: 16px;
  }

  #ams-locations-cities
  .ams-loc-cities-bottom-copy p {
    font-size: 12px;
  }

  #ams-locations-cities
  .ams-loc-cities-bottom-button {
    width: 100%;
  }

}


/* ==========================================
   28 – KLEINE SMARTPHONES
   ========================================== */

@media (max-width: 380px) {

  #ams-locations-cities
  .ams-loc-cities-header h2 {
    font-size: 33px;
  }

  #ams-locations-cities .ams-loc-city-image {
    height: 205px;
  }

  #ams-locations-cities .ams-loc-city-body {
    padding: 24px 19px 21px;
  }

  #ams-locations-cities .ams-loc-city-body h3 {
    font-size: 31px;
  }

  #ams-locations-cities .ams-loc-city-card-footer {
    font-size: 11px;
  }

  #ams-locations-cities .ams-loc-city-arrow {
    width: 34px;
    height: 34px;
  }

}


/* ==========================================
   29 – REDUZIERTE BEWEGUNG
   ========================================== */

@media (prefers-reduced-motion: reduce) {

  #ams-locations-cities .ams-loc-city-card,
  #ams-locations-cities .ams-loc-city-image img,
  #ams-locations-cities .ams-loc-city-arrow,
  #ams-locations-cities .ams-loc-cities-bottom-button {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

}

/* ==========================================
   ENDE MODUL 03
   ========================================== */



/* ==========================================
   AMS SANDIENST
   EINSATZORTE – MODUL 04
   UNSERE LEISTUNGEN IN NRW V1.0

   Premium Service Cards
   Desktop / Tablet / Smartphone
   ========================================== */


/* ==========================================
   01 – GRUNDLAGEN
   ========================================== */

#ams-locations-services {
  --ams-red: #e6002e;
  --ams-red-dark: #bf0027;
  --ams-navy: #071c37;
  --ams-blue: #0c294a;
  --ams-text: #14243b;
  --ams-muted: #627589;
  --ams-border: #e0e7ef;

  position: relative;
  isolation: isolate;

  width: 100%;
  margin: 0;
  padding: 115px 0 105px;

  background: #ffffff;
  color: var(--ams-text);

  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Arial,
    sans-serif;

  overflow-wrap: break-word;
}

#ams-locations-services,
#ams-locations-services *,
#ams-locations-services *::before,
#ams-locations-services *::after {
  box-sizing: border-box;
}

#ams-locations-services
.ams-loc-services-container {
  width: min(1320px, calc(100% - 96px));
  margin-inline: auto;
}


/* ==========================================
   02 – ÜBERSCHRIFTSBEREICH
   ========================================== */

#ams-locations-services
.ams-loc-services-header {
  display: grid;

  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(0, .85fr);

  align-items: end;
  gap: 65px;

  margin-bottom: 49px;
}

#ams-locations-services
.ams-loc-services-heading,
#ams-locations-services
.ams-loc-services-intro {
  min-width: 0;
}


/* ==========================================
   03 – KICKER
   ========================================== */

#ams-locations-services
.ams-loc-services-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 13px;

  color: #718093;

  font-size: 11px;
  font-weight: 750;
  line-height: 1.5;
  letter-spacing: .14em;

  text-transform: uppercase;
}

#ams-locations-services
.ams-loc-services-eyebrow::before {
  content: "";

  display: block;
  flex: 0 0 29px;

  width: 29px;
  height: 2px;

  background: var(--ams-red);
}


/* ==========================================
   04 – H2
   ========================================== */

#ams-locations-services
.ams-loc-services-header h2 {
  max-width: 830px;
  margin: 24px 0 0;

  color: var(--ams-text);

  font-size: clamp(40px, 4.3vw, 68px);
  font-weight: 570;
  line-height: 1.12;
  letter-spacing: -.055em;

  overflow-wrap: break-word;
}

#ams-locations-services
.ams-loc-services-header h2 span {
  display: block;
  color: var(--ams-red);
}


/* ==========================================
   05 – EINLEITUNG
   ========================================== */

#ams-locations-services
.ams-loc-services-intro p {
  max-width: 570px;
  margin: 0 0 15px;

  color: #607286;

  font-size: 15px;
  line-height: 1.85;
}

#ams-locations-services
.ams-loc-services-intro p:last-child {
  margin-bottom: 0;
}


/* ==========================================
   06 – DREISPALTIGES KARTENGRID
   ========================================== */

#ams-locations-services
.ams-loc-services-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  align-items: stretch;
  gap: 20px;
}


/* ==========================================
   07 – LEISTUNGSKARTEN
   ========================================== */

#ams-locations-services
.ams-loc-service-card {
  display: flex;
  flex-direction: column;

  min-width: 0;
  height: 100%;
  margin: 0;

  overflow: hidden;

  border: 1px solid var(--ams-border);
  border-radius: 5px;

  background: #ffffff;

  box-shadow:
    0 5px 22px rgba(7,28,55,.045);

  transition:
    opacity .75s cubic-bezier(.22,1,.36,1),
    transform .85s cubic-bezier(.22,1,.36,1),
    border-color .25s ease,
    box-shadow .3s ease;
}


/* ==========================================
   08 – DUNKELBLAUER KARTENKOPF
   ========================================== */

#ams-locations-services
.ams-loc-service-visual {
  position: relative;
  isolation: isolate;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  flex: 0 0 175px;

  height: 175px;
  min-height: 175px;

  padding: 27px 29px 25px;

  overflow: hidden;

  background: linear-gradient(
    125deg,
    #071c37 0%,
    #123a62 100%
  );

  color: #ffffff;
}

/* Individuelle, subtile Farbverläufe */

#ams-locations-services
.ams-loc-service-card:nth-child(2)
.ams-loc-service-visual {
  background: linear-gradient(
    125deg,
    #0c294a 0%,
    #20537b 100%
  );
}

#ams-locations-services
.ams-loc-service-card:nth-child(3)
.ams-loc-service-visual {
  background: linear-gradient(
    125deg,
    #071c37 0%,
    #173855 100%
  );
}


/* ==========================================
   09 – DEKORATIVER KREIS
   ========================================== */

#ams-locations-services
.ams-loc-service-visual-circle {
  position: absolute;
  z-index: 0;

  top: -145px;
  right: -80px;

  width: 330px;
  height: 330px;

  border: 1px solid rgba(255,255,255,.11);
  border-radius: 50%;

  pointer-events: none;
}

#ams-locations-services
.ams-loc-service-visual-circle::after {
  content: "";

  position: absolute;
  inset: 38px;

  border: 1px solid rgba(255,255,255,.07);
  border-radius: 50%;
}


/* ==========================================
   10 – KARTENKOPF OBERE REIHE
   ========================================== */

#ams-locations-services
.ams-loc-service-visual-top {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 20px;
}

#ams-locations-services
.ams-loc-service-icon {
  display: grid;
  place-items: center;

  width: 68px;
  height: 68px;

  border: 1px solid rgba(255,255,255,.2);
  border-radius: 5px;

  background: rgba(255,255,255,.085);
  color: #ffffff;
}

#ams-locations-services
.ams-loc-service-icon svg {
  display: block;

  width: 34px;
  height: 34px;

  stroke: currentColor;
}

#ams-locations-services
.ams-loc-service-index {
  color: #ff839b;

  font-size: 11px;
  font-weight: 750;
  letter-spacing: .12em;
  line-height: 1.5;
}


/* ==========================================
   11 – LABEL UNTEN IM BILDBEREICH
   ========================================== */

#ams-locations-services
.ams-loc-service-visual-label {
  position: relative;
  z-index: 2;

  display: inline-flex;
  align-items: center;

  gap: 12px;

  color: #d6e4f0;

  font-size: 10px;
  font-weight: 750;
  line-height: 1.5;
  letter-spacing: .13em;
}

#ams-locations-services
.ams-loc-service-visual-label::before {
  content: "";

  display: block;
  flex: 0 0 29px;

  width: 29px;
  height: 2px;

  background: #ff5876;
}


/* ==========================================
   12 – KARTENINHALT
   ========================================== */

#ams-locations-services
.ams-loc-service-content {
  display: flex;
  flex-direction: column;

  flex: 1;
  min-width: 0;

  padding: 33px 30px 29px;
}

#ams-locations-services
.ams-loc-service-category {
  display: block;

  margin-bottom: 14px;

  color: #bf0c32;

  font-size: 10px;
  font-weight: 750;
  line-height: 1.5;
  letter-spacing: .12em;

  text-transform: uppercase;
}


/* ==========================================
   13 – KARTENTITEL
   ========================================== */

#ams-locations-services
.ams-loc-service-content h3 {
  margin: 0 0 19px;

  color: #173556;

  font-size: clamp(27px, 2.55vw, 38px);
  font-weight: 620;
  line-height: 1.18;
  letter-spacing: -.045em;

  overflow-wrap: break-word;
  hyphens: auto;
}

#ams-locations-services
.ams-loc-service-content h3 span {
  display: block;
  color: #173556;
}


/* ==========================================
   14 – LEAD & BESCHREIBUNG
   ========================================== */

#ams-locations-services
.ams-loc-service-lead {
  margin: 0 0 16px;

  color: #294764;

  font-size: 15px;
  font-weight: 650;
  line-height: 1.65;
}

#ams-locations-services
.ams-loc-service-description {
  margin: 0 0 27px;

  color: #617387;

  font-size: 13px;
  line-height: 1.85;
}


/* ==========================================
   15 – LEISTUNGSLISTE
   ========================================== */

#ams-locations-services
.ams-loc-service-points {
  display: flex;
  flex-direction: column;

  gap: 11px;

  margin: 0 0 28px;
  padding: 22px 0 0;

  border-top: 1px solid #e6ecf2;
  list-style: none;
}

#ams-locations-services
.ams-loc-service-points li {
  position: relative;

  margin: 0;
  padding-left: 21px;

  color: #435b73;

  font-size: 12px;
  font-weight: 650;
  line-height: 1.65;

  list-style: none;
}

#ams-locations-services
.ams-loc-service-points li::before {
  content: "";

  position: absolute;

  top: 8px;
  left: 0;

  width: 7px;
  height: 7px;

  border-radius: 50%;
  background: var(--ams-red);
}


/* ==========================================
   16 – KARTENLINKS
   ========================================== */

#ams-locations-services
.ams-loc-service-actions {
  display: flex;
  flex-direction: column;

  align-items: stretch;

  gap: 13px;
  margin-top: auto;
}


/* Hauptlink */

#ams-locations-services
.ams-loc-service-mainlink {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 14px;

  min-height: 54px;
  padding: 14px 18px;

  border: 1px solid var(--ams-red);
  border-radius: 4px;

  background: var(--ams-red);
  color: #ffffff;

  font-size: 12px;
  font-weight: 750;
  line-height: 1.5;
  text-decoration: none;

  transition:
    background .25s ease,
    border-color .25s ease,
    transform .25s ease;
}

#ams-locations-services
.ams-loc-service-mainlink:hover {
  background: var(--ams-red-dark);
  border-color: var(--ams-red-dark);
  color: #ffffff;

  transform: translateY(-2px);
}

#ams-locations-services
.ams-loc-service-mainlink > span {
  flex-shrink: 0;

  font-size: 20px;
  line-height: 1;
}


/* Zweiter Informations- / Anfragelink */

#ams-locations-services
.ams-loc-service-inquiry {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 40px;
  padding: 9px 6px;

  color: #173556;

  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;

  text-decoration: underline;
  text-decoration-color: #c6d2de;
  text-underline-offset: 4px;

  transition:
    color .25s ease,
    text-decoration-color .25s ease;
}

#ams-locations-services
.ams-loc-service-inquiry:hover {
  color: var(--ams-red);
  text-decoration-color: var(--ams-red);
}


/* ==========================================
   17 – HOVER-EFFEKTE
   ========================================== */

@media (hover: hover) and
       (prefers-reduced-motion: no-preference) {

  #ams-locations-services
  .ams-loc-service-card:hover,
  #ams-locations-services
  .ams-loc-service-card.ams-loc-service-visible:hover {
    transform: translateY(-5px);

    border-color: #dec1c8;

    box-shadow:
      0 22px 45px rgba(7,28,55,.11);
  }

  #ams-locations-services
  .ams-loc-service-card:hover
  .ams-loc-service-icon {
    background: rgba(255,255,255,.14);
  }

}


/* ==========================================
   18 – UNTERER KONTAKTBEREICH
   ========================================== */

#ams-locations-services
.ams-loc-services-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 45px;

  margin-top: 37px;
  padding: 39px 40px;

  border: 1px solid #dce5ee;
  border-radius: 5px;

  background: #f5f7fa;
}

#ams-locations-services
.ams-loc-services-bottom-copy {
  display: flex;
  align-items: flex-start;

  gap: 19px;
  min-width: 0;
}

#ams-locations-services
.ams-loc-services-bottom-line {
  display: block;
  flex: 0 0 3px;

  width: 3px;
  height: 74px;

  background: var(--ams-red);
}


/* ==========================================
   19 – ABSCHLUSSTEXT
   ========================================== */

#ams-locations-services
.ams-loc-services-bottom-label {
  display: block;

  margin-bottom: 9px;

  color: #b30c30;

  font-size: 10px;
  font-weight: 750;
  line-height: 1.5;
  letter-spacing: .13em;
}

#ams-locations-services
.ams-loc-services-bottom h3 {
  margin: 0 0 10px;

  color: #173556;

  font-size: clamp(21px, 2.1vw, 28px);
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -.035em;
}

#ams-locations-services
.ams-loc-services-bottom-copy p {
  max-width: 720px;
  margin: 0;

  color: #657589;

  font-size: 13px;
  line-height: 1.8;
}


/* ==========================================
   20 – ABSCHLUSS-AKTIONEN
   ========================================== */

#ams-locations-services
.ams-loc-services-bottom-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;

  flex: 0 0 auto;

  gap: 12px;
}

#ams-locations-services
.ams-loc-services-contact {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;

  gap: 19px;

  min-height: 54px;
  padding: 15px 20px;

  border: 1px solid var(--ams-red);
  border-radius: 4px;

  background: var(--ams-red);
  color: #ffffff;

  font-size: 13px;
  font-weight: 750;
  line-height: 1.45;

  text-decoration: none;

  transition:
    background .25s ease,
    transform .25s ease;
}

#ams-locations-services
.ams-loc-services-contact:hover {
  background: var(--ams-red-dark);
  color: #ffffff;

  transform: translateY(-2px);
}

#ams-locations-services
.ams-loc-services-contact > span {
  flex-shrink: 0;
  font-size: 20px;
}

#ams-locations-services
.ams-loc-services-phone {
  align-self: center;

  padding: 5px 10px;

  color: #173556;

  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;

  text-decoration: none;
}

#ams-locations-services
.ams-loc-services-phone:hover {
  color: var(--ams-red);
}


/* ==========================================
   21 – ABSCHLIESSENDER HINWEIS
   ========================================== */

#ams-locations-services
.ams-loc-services-note {
  max-width: 980px;

  margin: 24px 0 0;

  color: #7a8999;

  font-size: 11px;
  line-height: 1.8;
}


/* ==========================================
   22 – SCROLL-ANIMATION
   ========================================== */

@media (prefers-reduced-motion: no-preference) {

  #ams-locations-services
  .ams-loc-service-card.ams-loc-service-motion:not(.ams-loc-service-visible) {
    opacity: 0;
    transform: translate3d(0, 26px, 0);
  }

  #ams-locations-services
  .ams-loc-service-card.ams-loc-service-motion.ams-loc-service-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  #ams-locations-services
  .ams-loc-service-card:nth-child(2) {
    transition-delay: 90ms;
  }

  #ams-locations-services
  .ams-loc-service-card:nth-child(3) {
    transition-delay: 170ms;
  }

}


/* ==========================================
   23 – FOKUS
   ========================================== */

#ams-locations-services a:focus-visible {
  outline: 3px solid var(--ams-red);
  outline-offset: 4px;
}

#ams-locations-services
.ams-loc-service-mainlink:focus-visible,
#ams-locations-services
.ams-loc-services-contact:focus-visible {
  outline-offset: 3px;
}


/* ==========================================
   24 – TABLET BIS 1100 PX
   ========================================== */

@media (max-width: 1100px) {

  #ams-locations-services {
    padding: 95px 0;
  }

  #ams-locations-services
  .ams-loc-services-container {
    width: calc(100% - 48px);
  }

  #ams-locations-services
  .ams-loc-services-header {
    gap: 35px;
  }

  #ams-locations-services
  .ams-loc-services-grid {
    gap: 16px;
  }

  #ams-locations-services
  .ams-loc-service-visual {
    padding: 24px;
  }

  #ams-locations-services
  .ams-loc-service-content {
    padding: 29px 23px 25px;
  }

  #ams-locations-services
  .ams-loc-service-content h3 {
    font-size: 29px;
  }

  #ams-locations-services
  .ams-loc-services-bottom {
    padding: 33px;
    gap: 30px;
  }

}


/* ==========================================
   25 – TABLET BIS 980 PX
   ========================================== */

@media (max-width: 980px) {

  #ams-locations-services
  .ams-loc-services-header {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  #ams-locations-services
  .ams-loc-services-intro {
    max-width: 760px;
  }

  #ams-locations-services
  .ams-loc-services-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  #ams-locations-services
  .ams-loc-service-card:last-child {
    grid-column: 1 / -1;
  }

  #ams-locations-services
  .ams-loc-service-content h3 {
    font-size: 34px;
  }

  #ams-locations-services
  .ams-loc-services-bottom {
    flex-direction: column;
    align-items: stretch;
  }

  #ams-locations-services
  .ams-loc-services-bottom-actions {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }

}


/* ==========================================
   26 – SMARTPHONE BIS 700 PX
   ========================================== */

@media (max-width: 700px) {

  #ams-locations-services {
    padding: 76px 0;
  }

  #ams-locations-services
  .ams-loc-services-container {
    width: calc(100% - 38px);
  }

  /* Überschrift */

  #ams-locations-services
  .ams-loc-services-header {
    margin-bottom: 33px;
  }

  #ams-locations-services
  .ams-loc-services-eyebrow {
    font-size: 10px;
    letter-spacing: .08em;
  }

  #ams-locations-services
  .ams-loc-services-header h2 {
    margin-top: 21px;

    font-size: clamp(36px, 8.5vw, 49px);
    line-height: 1.14;
  }

  #ams-locations-services
  .ams-loc-services-intro p {
    font-size: 14px;
    line-height: 1.78;
  }

  /* Eine Karte pro Zeile */

  #ams-locations-services
  .ams-loc-services-grid {
    grid-template-columns: 1fr;
    gap: 17px;
  }

  #ams-locations-services
  .ams-loc-service-card:last-child {
    grid-column: auto;
  }

  /* Kartenkopf */

  #ams-locations-services
  .ams-loc-service-visual {
    height: 155px;
    min-height: 155px;
    flex-basis: 155px;

    padding: 23px;
  }

  #ams-locations-services
  .ams-loc-service-icon {
    width: 57px;
    height: 57px;
  }

  #ams-locations-services
  .ams-loc-service-icon svg {
    width: 29px;
    height: 29px;
  }

  /* Karteninhalt */

  #ams-locations-services
  .ams-loc-service-content {
    padding: 27px 23px 23px;
  }

  #ams-locations-services
  .ams-loc-service-content h3 {
    font-size: clamp(29px, 7.5vw, 36px);
  }

  #ams-locations-services
  .ams-loc-service-lead {
    font-size: 14px;
  }

  #ams-locations-services
  .ams-loc-service-description {
    font-size: 13px;
    line-height: 1.8;
  }

  #ams-locations-services
  .ams-loc-service-points li {
    font-size: 12px;
  }

  #ams-locations-services
  .ams-loc-service-mainlink {
    min-height: 53px;
    padding: 14px 16px;

    font-size: 12px;
  }

  /* Abschlussbereich */

  #ams-locations-services
  .ams-loc-services-bottom {
    margin-top: 28px;
    padding: 27px 22px;
    gap: 25px;
  }

  #ams-locations-services
  .ams-loc-services-bottom-copy {
    gap: 13px;
  }

  #ams-locations-services
  .ams-loc-services-bottom h3 {
    font-size: 23px;
  }

  #ams-locations-services
  .ams-loc-services-bottom-copy p {
    font-size: 12px;
  }

  #ams-locations-services
  .ams-loc-services-bottom-actions {
    flex-direction: column;
    align-items: stretch;
  }

  #ams-locations-services
  .ams-loc-services-contact {
    width: 100%;
    font-size: 12px;
  }

  #ams-locations-services
  .ams-loc-services-note {
    font-size: 10px;
  }

}


/* ==========================================
   27 – KLEINE SMARTPHONES
   ========================================== */

@media (max-width: 380px) {

  #ams-locations-services
  .ams-loc-services-header h2 {
    font-size: 33px;
  }

  #ams-locations-services
  .ams-loc-service-visual {
    padding: 21px 19px;
  }

  #ams-locations-services
  .ams-loc-service-content {
    padding: 24px 19px 21px;
  }

  #ams-locations-services
  .ams-loc-service-content h3 {
    font-size: 28px;
  }

  #ams-locations-services
  .ams-loc-service-mainlink {
    font-size: 11px;
    padding: 13px;
  }

  #ams-locations-services
  .ams-loc-services-bottom {
    padding: 23px 18px;
  }

}


/* ==========================================
   28 – REDUZIERTE BEWEGUNG
   ========================================== */

@media (prefers-reduced-motion: reduce) {

  #ams-locations-services
  .ams-loc-service-card,

  #ams-locations-services
  .ams-loc-service-mainlink,

  #ams-locations-services
  .ams-loc-service-inquiry,

  #ams-locations-services
  .ams-loc-services-contact {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

}

/* ==========================================
   ENDE MODUL 04
   ========================================== */



/* ==========================================
   AMS SANDIENST
   EINSATZORTE – MODUL 05
   WEITERE EINSATZGEBIETE NRW V1.0

   Premium Dark Section
   Desktop / Tablet / Smartphone
   ========================================== */


/* ==========================================
   01 – GRUNDLAGEN
   ========================================== */

#ams-locations-coverage {
  --ams-red: #e6002e;
  --ams-red-dark: #bf0027;
  --ams-navy: #071c37;
  --ams-blue: #0c294a;
  --ams-white: #ffffff;
  --ams-text: #14243b;

  position: relative;
  isolation: isolate;

  width: 100%;
  margin: 0;
  padding: 115px 0 105px;

  overflow: hidden;

  background: linear-gradient(
    120deg,
    #071c37 0%,
    #0b2949 60%,
    #123657 100%
  );

  color: #ffffff;

  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Arial,
    sans-serif;

  overflow-wrap: break-word;
}

#ams-locations-coverage,
#ams-locations-coverage *,
#ams-locations-coverage *::before,
#ams-locations-coverage *::after {
  box-sizing: border-box;
}

#ams-locations-coverage::before {
  content: "";

  position: absolute;
  z-index: -1;

  top: -260px;
  right: -230px;

  width: 850px;
  height: 850px;

  border-radius: 50%;

  background: radial-gradient(
    circle,
    rgba(46, 98, 150, .28),
    transparent 66%
  );

  pointer-events: none;
}

#ams-locations-coverage
.ams-loc-coverage-container {
  width: min(1320px, calc(100% - 96px));
  margin-inline: auto;
}


/* ==========================================
   02 – ÜBERSCHRIFTSBEREICH
   ========================================== */

#ams-locations-coverage
.ams-loc-coverage-header {
  display: grid;

  grid-template-columns:
    minmax(0, 1.1fr)
    minmax(0, .9fr);

  align-items: end;
  gap: 75px;

  margin-bottom: 49px;
}

#ams-locations-coverage
.ams-loc-coverage-heading,
#ams-locations-coverage
.ams-loc-coverage-intro {
  min-width: 0;
}


/* ==========================================
   03 – KLEINE KENNZEICHNUNG
   ========================================== */

#ams-locations-coverage
.ams-loc-coverage-eyebrow {
  display: inline-flex;
  align-items: center;

  gap: 13px;

  color: #b7ccdf;

  font-size: 11px;
  font-weight: 750;
  line-height: 1.5;
  letter-spacing: .13em;

  text-transform: uppercase;
}

#ams-locations-coverage
.ams-loc-coverage-eyebrow::before {
  content: "";

  display: block;
  flex: 0 0 29px;

  width: 29px;
  height: 2px;

  background: #ff5775;
}


/* ==========================================
   04 – H2
   ========================================== */

#ams-locations-coverage
.ams-loc-coverage-header h2 {
  max-width: 800px;

  margin: 23px 0 0;

  color: #ffffff;

  font-size: clamp(41px, 4.45vw, 70px);
  font-weight: 570;
  line-height: 1.12;
  letter-spacing: -.055em;

  overflow-wrap: break-word;
}

#ams-locations-coverage
.ams-loc-coverage-header h2 span {
  display: block;

  color: #ff6986;
}


/* ==========================================
   05 – EINLEITUNG
   ========================================== */

#ams-locations-coverage
.ams-loc-coverage-intro p {
  max-width: 550px;

  margin: 0 0 16px;

  color: #c2d3e3;

  font-size: 15px;
  line-height: 1.85;
}

#ams-locations-coverage
.ams-loc-coverage-intro p:last-child {
  margin-bottom: 0;
}


/* ==========================================
   06 – ZWEISPALTIGES HAUPTLAYOUT
   ========================================== */

#ams-locations-coverage
.ams-loc-coverage-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(0, .95fr);

  align-items: stretch;
  gap: 24px;
}

#ams-locations-coverage
.ams-loc-coverage-regions,
#ams-locations-coverage
.ams-loc-coverage-inquiry {
  min-width: 0;
}


/* ==========================================
   07 – REGIONSÜBERSICHT LINKS
   ========================================== */

#ams-locations-coverage
.ams-loc-coverage-regions {
  display: flex;
  flex-direction: column;

  padding: 34px;

  border: 1px solid rgba(218,233,247,.18);
  border-radius: 5px;

  background: rgba(255,255,255,.055);
}

#ams-locations-coverage
.ams-loc-coverage-region-top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  flex-wrap: wrap;
  gap: 14px;

  padding-bottom: 27px;

  border-bottom: 1px solid rgba(255,255,255,.14);
}

#ams-locations-coverage
.ams-loc-coverage-region-top span {
  color: #a9c1d8;

  font-size: 10px;
  font-weight: 750;
  line-height: 1.5;
  letter-spacing: .12em;
}

#ams-locations-coverage
.ams-loc-coverage-region-top
span:last-child {
  color: #ff8099;
}


/* ==========================================
   08 – EINZELNE REGION
   ========================================== */

#ams-locations-coverage
.ams-loc-coverage-region {
  display: grid;

  grid-template-columns:
    39px minmax(0, 1fr) 13px;

  align-items: center;
  gap: 20px;

  min-width: 0;
  padding: 27px 5px;

  border-bottom: 1px solid rgba(255,255,255,.13);

  transition:
    opacity .8s cubic-bezier(.22,1,.36,1),
    transform .9s cubic-bezier(.22,1,.36,1),
    background .25s ease;
}

#ams-locations-coverage
.ams-loc-coverage-region-index {
  align-self: start;

  padding-top: 5px;

  color: #ff7892;

  font-size: 12px;
  font-weight: 750;
  line-height: 1.5;
  letter-spacing: .08em;
}


/* ==========================================
   09 – REGIONSTITEL
   ========================================== */

#ams-locations-coverage
.ams-loc-coverage-region-content {
  min-width: 0;
}

#ams-locations-coverage
.ams-loc-coverage-region h3 {
  margin: 0 0 9px;

  color: #ffffff;

  font-size: clamp(23px, 2.25vw, 32px);
  font-weight: 590;
  line-height: 1.2;
  letter-spacing: -.04em;
}

#ams-locations-coverage
.ams-loc-coverage-region p {
  margin: 0;

  color: #b5c9db;

  font-size: 13px;
  line-height: 1.65;
}


/* ==========================================
   10 – KLEINER REGIONSPUNKT
   ========================================== */

#ams-locations-coverage
.ams-loc-coverage-region-dot {
  display: block;

  width: 9px;
  height: 9px;

  border: 2px solid #ff6683;
  border-radius: 50%;

  background: rgba(230,0,46,.12);
}


/* ==========================================
   11 – WEITERE ORTE
   ========================================== */

#ams-locations-coverage
.ams-loc-coverage-more {
  display: flex;
  align-items: flex-start;

  gap: 17px;

  margin-top: 28px;
  padding: 23px;

  border: 1px solid rgba(255,112,139,.25);
  border-left: 3px solid #ff6482;
  border-radius: 4px;

  background: rgba(230,0,46,.095);
}

#ams-locations-coverage
.ams-loc-coverage-more-icon {
  display: grid;
  place-items: center;

  flex: 0 0 43px;

  width: 43px;
  height: 43px;

  border: 1px solid rgba(255,126,153,.26);
  border-radius: 4px;

  background: rgba(230,0,46,.14);

  color: #ff91a6;
}

#ams-locations-coverage
.ams-loc-coverage-more-icon svg {
  display: block;

  width: 23px;
  height: 23px;

  stroke: currentColor;
}

#ams-locations-coverage
.ams-loc-coverage-more h3 {
  margin: 0 0 9px;

  color: #ffffff;

  font-size: 18px;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: -.025em;
}

#ams-locations-coverage
.ams-loc-coverage-more p {
  margin: 0;

  color: #c5d6e5;

  font-size: 12px;
  line-height: 1.75;
}


/* ==========================================
   12 – ZUR STÄDTEÜBERSICHT
   ========================================== */

#ams-locations-coverage
.ams-loc-coverage-cities-link {
  display: inline-flex;
  align-items: center;

  gap: 11px;
  align-self: flex-start;

  margin-top: 27px;

  color: #ffffff;

  font-size: 13px;
  font-weight: 750;
  line-height: 1.6;
  text-decoration: none;
}

#ams-locations-coverage
.ams-loc-coverage-cities-link > span {
  color: #ff8099;

  font-size: 20px;
  line-height: 1;

  transition: transform .25s ease;
}

#ams-locations-coverage
.ams-loc-coverage-cities-link:hover {
  color: #ffb0bf;
}

#ams-locations-coverage
.ams-loc-coverage-cities-link:hover > span {
  transform: translate(3px,-3px);
}


/* ==========================================
   13 – HELLE ANFRAGEKARTE RECHTS
   ========================================== */

#ams-locations-coverage
.ams-loc-coverage-inquiry {
  display: flex;
  flex-direction: column;

  padding: 39px;

  border: 1px solid #e3e9ef;
  border-radius: 5px;

  background: #ffffff;
  color: #14243b;

  box-shadow:
    0 18px 50px rgba(0,12,29,.14);

  transition:
    opacity .8s cubic-bezier(.22,1,.36,1),
    transform .9s cubic-bezier(.22,1,.36,1);
}


/* ==========================================
   14 – ANFRAGEKOPF
   ========================================== */

#ams-locations-coverage
.ams-loc-coverage-inquiry-head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 15px;

  margin-bottom: 28px;
}

#ams-locations-coverage
.ams-loc-coverage-inquiry-label {
  color: #af0d30;

  font-size: 10px;
  font-weight: 750;
  line-height: 1.5;
  letter-spacing: .12em;
}

#ams-locations-coverage
.ams-loc-coverage-inquiry-mark {
  display: grid;
  place-items: center;

  flex: 0 0 38px;

  width: 38px;
  height: 38px;

  border: 1px solid #f3dae0;
  border-radius: 50%;

  background: #fff0f4;
  color: var(--ams-red);

  font-size: 23px;
  line-height: 1;
}


/* ==========================================
   15 – ANFRAGEÜBERSCHRIFT
   ========================================== */

#ams-locations-coverage
.ams-loc-coverage-inquiry > h3 {
  margin: 0 0 19px;

  color: #14243b;

  font-size: clamp(33px, 3vw, 47px);
  font-weight: 590;
  line-height: 1.14;
  letter-spacing: -.05em;
}

#ams-locations-coverage
.ams-loc-coverage-inquiry > h3 span {
  display: block;
  color: var(--ams-red);
}

#ams-locations-coverage
.ams-loc-coverage-inquiry-lead {
  margin: 0 0 26px;

  color: #63768a;

  font-size: 14px;
  line-height: 1.8;
}


/* ==========================================
   16 – ANGABEN FÜR DIE ANFRAGE
   ========================================== */

#ams-locations-coverage
.ams-loc-coverage-inquiry-step {
  display: grid;

  grid-template-columns:
    29px minmax(0, 1fr);

  align-items: start;
  gap: 15px;

  padding: 20px 0;

  border-top: 1px solid #e5ebf1;
}

#ams-locations-coverage
.ams-loc-coverage-step-number {
  padding-top: 3px;

  color: #c30d33;

  font-size: 12px;
  font-weight: 750;
  line-height: 1.5;
}

#ams-locations-coverage
.ams-loc-coverage-inquiry-step h4 {
  margin: 0 0 7px;

  color: #173556;

  font-size: 17px;
  font-weight: 680;
  line-height: 1.4;
  letter-spacing: -.02em;
}

#ams-locations-coverage
.ams-loc-coverage-inquiry-step p {
  margin: 0;

  color: #66798b;

  font-size: 12px;
  line-height: 1.8;
}


/* ==========================================
   17 – ROTER ANFRAGEBUTTON
   ========================================== */

#ams-locations-coverage
.ams-loc-coverage-inquiry-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  width: 100%;
  min-height: 55px;

  margin-top: auto;
  padding: 15px 19px;

  border: 1px solid var(--ams-red);
  border-radius: 4px;

  background: var(--ams-red);
  color: #ffffff;

  font-size: 13px;
  font-weight: 750;
  line-height: 1.5;
  text-decoration: none;

  transition:
    background .25s ease,
    border-color .25s ease,
    transform .25s ease;
}

#ams-locations-coverage
.ams-loc-coverage-inquiry-button:hover {
  background: var(--ams-red-dark);
  border-color: var(--ams-red-dark);

  color: #ffffff;
  transform: translateY(-2px);
}

#ams-locations-coverage
.ams-loc-coverage-inquiry-button svg {
  display: block;
  flex-shrink: 0;

  width: 18px;
  height: 18px;

  stroke: currentColor;
}


/* ==========================================
   18 – TELEFONLINK
   ========================================== */

#ams-locations-coverage
.ams-loc-coverage-phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 10px;
  align-self: center;

  margin-top: 19px;
  padding: 6px 10px;

  color: #173556;

  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
}

#ams-locations-coverage
.ams-loc-coverage-phone:hover {
  color: var(--ams-red);
}

#ams-locations-coverage
.ams-loc-coverage-phone svg {
  display: block;

  width: 16px;
  height: 16px;

  stroke: currentColor;
}


/* ==========================================
   19 – UNTERER HINWEIS
   ========================================== */

#ams-locations-coverage
.ams-loc-coverage-bottom {
  display: flex;
  align-items: flex-start;

  gap: 18px;

  margin-top: 33px;
  padding-top: 29px;

  border-top: 1px solid rgba(255,255,255,.16);
}

#ams-locations-coverage
.ams-loc-coverage-bottom-line {
  display: block;
  flex: 0 0 3px;

  width: 3px;
  height: 52px;

  background: #ff718b;
}

#ams-locations-coverage
.ams-loc-coverage-bottom strong {
  display: block;

  margin-bottom: 7px;

  color: #ffffff;

  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
}

#ams-locations-coverage
.ams-loc-coverage-bottom p {
  max-width: 1030px;

  margin: 0;

  color: #b9cddd;

  font-size: 12px;
  line-height: 1.85;
}


/* ==========================================
   20 – HOVER & FOKUS
   ========================================== */

@media (hover: hover) {

  #ams-locations-coverage
  .ams-loc-coverage-region:hover {
    background: rgba(255,255,255,.035);
  }

}

#ams-locations-coverage a:focus-visible {
  outline: 3px solid #ff849b;
  outline-offset: 4px;
}

#ams-locations-coverage
.ams-loc-coverage-inquiry a:focus-visible {
  outline-color: var(--ams-red);
}


/* ==========================================
   21 – SCROLL-ANIMATION
   ========================================== */

@media (prefers-reduced-motion: no-preference) {

  #ams-locations-coverage
  .ams-loc-coverage-motion:not(
    .ams-loc-coverage-visible
  ) {
    opacity: 0;
    transform: translate3d(0, 23px, 0);
  }

  #ams-locations-coverage
  .ams-loc-coverage-motion.ams-loc-coverage-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  #ams-locations-coverage
  .ams-loc-coverage-region:nth-of-type(3) {
    transition-delay: 70ms;
  }

  #ams-locations-coverage
  .ams-loc-coverage-region:nth-of-type(4) {
    transition-delay: 130ms;
  }

}


/* ==========================================
   22 – TABLET BIS 1100 PX
   ========================================== */

@media (max-width: 1100px) {

  #ams-locations-coverage {
    padding: 95px 0;
  }

  #ams-locations-coverage
  .ams-loc-coverage-container {
    width: calc(100% - 48px);
  }

  #ams-locations-coverage
  .ams-loc-coverage-header {
    gap: 40px;
  }

  #ams-locations-coverage
  .ams-loc-coverage-layout {
    gap: 18px;
  }

  #ams-locations-coverage
  .ams-loc-coverage-regions {
    padding: 29px;
  }

  #ams-locations-coverage
  .ams-loc-coverage-inquiry {
    padding: 30px;
  }

}


/* ==========================================
   23 – TABLET BIS 900 PX
   ========================================== */

@media (max-width: 900px) {

  #ams-locations-coverage
  .ams-loc-coverage-header {
    grid-template-columns: 1fr;
    gap: 23px;
  }

  #ams-locations-coverage
  .ams-loc-coverage-intro {
    max-width: 760px;
  }

  #ams-locations-coverage
  .ams-loc-coverage-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  #ams-locations-coverage
  .ams-loc-coverage-region h3 {
    font-size: 29px;
  }

  #ams-locations-coverage
  .ams-loc-coverage-inquiry {
    max-width: none;
  }

  #ams-locations-coverage
  .ams-loc-coverage-inquiry-button {
    margin-top: 20px;
  }

}


/* ==========================================
   24 – SMARTPHONE BIS 700 PX
   ========================================== */

@media (max-width: 700px) {

  #ams-locations-coverage {
    padding: 76px 0;
  }

  #ams-locations-coverage
  .ams-loc-coverage-container {
    width: calc(100% - 38px);
  }

  /* Überschrift */

  #ams-locations-coverage
  .ams-loc-coverage-header {
    margin-bottom: 34px;
  }

  #ams-locations-coverage
  .ams-loc-coverage-eyebrow {
    font-size: 9px;
    letter-spacing: .08em;
  }

  #ams-locations-coverage
  .ams-loc-coverage-header h2 {
    margin-top: 21px;

    font-size: clamp(35px, 8.6vw, 50px);
    line-height: 1.14;
  }

  #ams-locations-coverage
  .ams-loc-coverage-intro p {
    font-size: 14px;
    line-height: 1.78;
  }

  /* Regionalkarte */

  #ams-locations-coverage
  .ams-loc-coverage-regions {
    padding: 24px 20px;
  }

  #ams-locations-coverage
  .ams-loc-coverage-region-top span {
    font-size: 9px;
  }

  #ams-locations-coverage
  .ams-loc-coverage-region {
    grid-template-columns:
      26px minmax(0, 1fr) 10px;

    gap: 12px;
    padding: 23px 0;
  }

  #ams-locations-coverage
  .ams-loc-coverage-region-index {
    font-size: 11px;
  }

  #ams-locations-coverage
  .ams-loc-coverage-region h3 {
    font-size: 24px;
  }

  #ams-locations-coverage
  .ams-loc-coverage-region p {
    font-size: 12px;
  }

  /* Zusätzliche Orte */

  #ams-locations-coverage
  .ams-loc-coverage-more {
    gap: 13px;

    margin-top: 23px;
    padding: 18px 15px;
  }

  #ams-locations-coverage
  .ams-loc-coverage-more-icon {
    flex-basis: 37px;

    width: 37px;
    height: 37px;
  }

  #ams-locations-coverage
  .ams-loc-coverage-more-icon svg {
    width: 20px;
    height: 20px;
  }

  #ams-locations-coverage
  .ams-loc-coverage-more h3 {
    font-size: 16px;
  }

  #ams-locations-coverage
  .ams-loc-coverage-more p {
    font-size: 12px;
  }

  /* Anfragekarte */

  #ams-locations-coverage
  .ams-loc-coverage-inquiry {
    padding: 28px 23px;
  }

  #ams-locations-coverage
  .ams-loc-coverage-inquiry > h3 {
    font-size: clamp(32px, 7.5vw, 42px);
  }

  #ams-locations-coverage
  .ams-loc-coverage-inquiry-lead {
    font-size: 13px;
  }

  #ams-locations-coverage
  .ams-loc-coverage-inquiry-step {
    grid-template-columns:
      26px minmax(0, 1fr);

    gap: 12px;
    padding: 18px 0;
  }

  #ams-locations-coverage
  .ams-loc-coverage-inquiry-step h4 {
    font-size: 15px;
  }

  #ams-locations-coverage
  .ams-loc-coverage-inquiry-step p {
    font-size: 12px;
  }

  #ams-locations-coverage
  .ams-loc-coverage-inquiry-button {
    font-size: 12px;
  }

  /* Abschluss */

  #ams-locations-coverage
  .ams-loc-coverage-bottom {
    gap: 12px;
    margin-top: 28px;
    padding-top: 24px;
  }

  #ams-locations-coverage
  .ams-loc-coverage-bottom strong {
    font-size: 14px;
  }

  #ams-locations-coverage
  .ams-loc-coverage-bottom p {
    font-size: 11px;
  }

}


/* ==========================================
   25 – KLEINE SMARTPHONES
   ========================================== */

@media (max-width: 380px) {

  #ams-locations-coverage
  .ams-loc-coverage-header h2 {
    font-size: 33px;
  }

  #ams-locations-coverage
  .ams-loc-coverage-regions {
    padding: 22px 16px;
  }

  #ams-locations-coverage
  .ams-loc-coverage-region h3 {
    font-size: 22px;
  }

  #ams-locations-coverage
  .ams-loc-coverage-more {
    padding: 16px 12px;
  }

  #ams-locations-coverage
  .ams-loc-coverage-inquiry {
    padding: 25px 18px;
  }

  #ams-locations-coverage
  .ams-loc-coverage-inquiry > h3 {
    font-size: 31px;
  }

  #ams-locations-coverage
  .ams-loc-coverage-inquiry-button {
    padding: 14px;

    gap: 12px;
    font-size: 11px;
  }

}


/* ==========================================
   26 – REDUZIERTE BEWEGUNG
   ========================================== */

@media (prefers-reduced-motion: reduce) {

  #ams-locations-coverage
  .ams-loc-coverage-region,

  #ams-locations-coverage
  .ams-loc-coverage-inquiry,

  #ams-locations-coverage
  .ams-loc-coverage-inquiry-button,

  #ams-locations-coverage
  .ams-loc-coverage-cities-link > span {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

}

/* ==========================================
   ENDE MODUL 05
   ========================================== */



/* ==========================================
   AMS SANDIENST
   EINSATZORTE – MODUL 06
   FAQ & REGIONALE ANGEBOTE V1.0

   Premium FAQ Accordion
   Desktop / Tablet / Smartphone
   ========================================== */


/* ==========================================
   01 – GRUNDLAGEN
   ========================================== */

#ams-locations-faq {
  --ams-red: #e6002e;
  --ams-red-dark: #bf0027;
  --ams-navy: #071c37;
  --ams-blue: #0c294a;
  --ams-text: #14243b;
  --ams-muted: #657589;
  --ams-border: #e0e7ee;

  position: relative;
  width: 100%;
  margin: 0;
  padding: 115px 0 105px;

  background: #f5f7fa;
  color: var(--ams-text);

  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Arial,
    sans-serif;

  overflow-wrap: break-word;
}

#ams-locations-faq,
#ams-locations-faq *,
#ams-locations-faq *::before,
#ams-locations-faq *::after {
  box-sizing: border-box;
}

#ams-locations-faq .ams-loc-faq-container {
  width: min(1320px, calc(100% - 96px));
  margin-inline: auto;
}


/* ==========================================
   02 – ABSCHNITTSÜBERSCHRIFT
   ========================================== */

#ams-locations-faq .ams-loc-faq-header {
  max-width: 930px;
  margin: 0 auto 59px;
  text-align: center;
}

#ams-locations-faq .ams-loc-faq-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;

  color: #718093;

  font-size: 11px;
  font-weight: 750;
  line-height: 1.5;
  letter-spacing: .14em;
  text-transform: uppercase;
}

#ams-locations-faq
.ams-loc-faq-eyebrow::before {
  content: "";
  display: block;

  width: 28px;
  height: 2px;

  background: var(--ams-red);
}


/* ==========================================
   03 – H2
   ========================================== */

#ams-locations-faq .ams-loc-faq-header h2 {
  margin: 24px 0 25px;

  color: #14243b;

  font-size: clamp(39px, 4.3vw, 68px);
  font-weight: 570;
  line-height: 1.12;
  letter-spacing: -.055em;

  overflow-wrap: break-word;
  hyphens: auto;
}

#ams-locations-faq
.ams-loc-faq-header h2 span {
  display: block;
  color: var(--ams-red);
}

#ams-locations-faq
.ams-loc-faq-header > p {
  max-width: 740px;
  margin: 0 auto;

  color: #64778a;

  font-size: 15px;
  line-height: 1.85;
}


/* ==========================================
   04 – ZWEISPALTIGES LAYOUT
   ========================================== */

#ams-locations-faq .ams-loc-faq-layout {
  display: grid;

  grid-template-columns:
    minmax(0, .78fr)
    minmax(0, 1.42fr);

  align-items: start;
  gap: 28px;
}

#ams-locations-faq .ams-loc-faq-aside,
#ams-locations-faq .ams-loc-faq-list {
  min-width: 0;
}


/* ==========================================
   05 – DUNKELBLAUE KONTAKTKARTE
   ========================================== */

#ams-locations-faq
.ams-loc-faq-contact-card {
  position: relative;
  isolation: isolate;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  min-height: 565px;
  padding: 39px;

  overflow: hidden;

  border-radius: 5px;

  background: linear-gradient(
    135deg,
    #071c37 0%,
    #123c63 100%
  );

  color: #ffffff;
}

#ams-locations-faq
.ams-loc-faq-contact-card::before {
  content: "";

  position: absolute;
  z-index: -1;

  top: -155px;
  right: -250px;

  width: 470px;
  height: 470px;

  border: 1px solid rgba(255,255,255,.13);
  border-radius: 50%;

  pointer-events: none;
}

#ams-locations-faq
.ams-loc-faq-contact-accent {
  display: block;

  width: 34px;
  height: 3px;
  margin-bottom: 27px;

  background: #ff6481;
}

#ams-locations-faq
.ams-loc-faq-contact-label {
  color: #b4cbe0;

  font-size: 10px;
  font-weight: 750;
  line-height: 1.5;
  letter-spacing: .14em;

  text-transform: uppercase;
}


/* ==========================================
   06 – KONTAKTÜBERSCHRIFT
   ========================================== */

#ams-locations-faq
.ams-loc-faq-contact-card h3 {
  margin: 24px 0 22px;

  color: #ffffff;

  font-size: clamp(30px, 2.9vw, 44px);
  font-weight: 580;
  line-height: 1.15;
  letter-spacing: -.05em;

  overflow-wrap: break-word;
}

#ams-locations-faq
.ams-loc-faq-contact-card h3 span {
  display: block;
  color: #ff7893;
}

#ams-locations-faq
.ams-loc-faq-contact-card > p {
  max-width: 370px;
  margin: 0 0 17px;

  color: #c7d8e7;

  font-size: 13px;
  line-height: 1.85;
}


/* ==========================================
   07 – KONTAKTBUTTON
   ========================================== */

#ams-locations-faq
.ams-loc-faq-contact-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  width: 100%;
  min-height: 55px;

  margin-top: 13px;
  padding: 15px 19px;

  border: 1px solid var(--ams-red);
  border-radius: 4px;

  background: var(--ams-red);
  color: #ffffff;

  font-size: 13px;
  font-weight: 750;
  line-height: 1.5;

  text-decoration: none;

  transition:
    background .25s ease,
    border-color .25s ease,
    transform .25s ease;
}

#ams-locations-faq
.ams-loc-faq-contact-button:hover {
  background: var(--ams-red-dark);
  border-color: var(--ams-red-dark);
  color: #ffffff;

  transform: translateY(-2px);
}

#ams-locations-faq
.ams-loc-faq-contact-button svg {
  display: block;
  flex-shrink: 0;

  width: 18px;
  height: 18px;

  stroke: currentColor;
}


/* ==========================================
   08 – TELEFON
   ========================================== */

#ams-locations-faq .ams-loc-faq-phone {
  display: inline-flex;
  align-items: center;

  gap: 11px;

  margin-top: 22px;

  color: #e2ebf4;

  font-size: 13px;
  font-weight: 650;
  line-height: 1.5;

  text-decoration: none;
}

#ams-locations-faq .ams-loc-faq-phone:hover {
  color: #ff9bb0;
}

#ams-locations-faq .ams-loc-faq-phone svg {
  display: block;

  width: 17px;
  height: 17px;

  stroke: currentColor;
}


/* ==========================================
   09 – KONTAKTKARTE UNTEN
   ========================================== */

#ams-locations-faq
.ams-loc-faq-contact-bottom {
  display: flex;
  flex-direction: column;

  gap: 6px;

  width: 100%;

  margin-top: auto;
  padding-top: 44px;
}

#ams-locations-faq
.ams-loc-faq-contact-bottom-line {
  display: block;

  width: 42px;
  height: 2px;

  margin-bottom: 12px;

  background: #ff7893;
}

#ams-locations-faq
.ams-loc-faq-contact-bottom strong {
  color: #ffffff;

  font-size: 13px;
  font-weight: 750;
  line-height: 1.5;
}

#ams-locations-faq
.ams-loc-faq-contact-bottom > span:last-child {
  color: #aec4d8;

  font-size: 11px;
  line-height: 1.5;
}


/* ==========================================
   10 – REGIONALE INFO-KARTE
   ========================================== */

#ams-locations-faq .ams-loc-faq-info-card {
  display: flex;
  align-items: flex-start;

  gap: 17px;

  margin-top: 16px;
  padding: 25px;

  border: 1px solid #dfe6ed;
  border-left: 3px solid var(--ams-red);
  border-radius: 5px;

  background: #ffffff;
}

#ams-locations-faq .ams-loc-faq-info-icon {
  display: grid;
  place-items: center;

  flex: 0 0 43px;

  width: 43px;
  height: 43px;

  border: 1px solid #f1dbe1;
  border-radius: 4px;

  background: #fff0f4;
  color: var(--ams-red);
}

#ams-locations-faq .ams-loc-faq-info-icon svg {
  display: block;

  width: 23px;
  height: 23px;

  stroke: currentColor;
}

#ams-locations-faq .ams-loc-faq-info-card strong {
  display: block;

  margin-bottom: 10px;

  color: #173556;

  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}

#ams-locations-faq .ams-loc-faq-info-card p {
  margin: 0 0 14px;

  color: #66788a;

  font-size: 12px;
  line-height: 1.75;
}

#ams-locations-faq .ams-loc-faq-info-card a {
  display: inline-flex;
  align-items: center;

  gap: 9px;

  color: #bc0a2f;

  font-size: 12px;
  font-weight: 750;
  line-height: 1.5;

  text-decoration: none;
}

#ams-locations-faq .ams-loc-faq-info-card a:hover {
  color: #900923;
}


/* ==========================================
   11 – FAQ-LISTE
   ========================================== */

#ams-locations-faq .ams-loc-faq-list {
  display: flex;
  flex-direction: column;

  gap: 12px;
}


/* ==========================================
   12 – FAQ-ELEMENT
   ========================================== */

#ams-locations-faq .ams-loc-faq-item {
  margin: 0;
  min-width: 0;

  overflow: hidden;

  border: 1px solid var(--ams-border);
  border-radius: 5px;

  background: #ffffff;

  transition:
    border-color .25s ease,
    box-shadow .25s ease;
}

#ams-locations-faq .ams-loc-faq-item[open] {
  border-color: #d5dfea;

  box-shadow:
    0 10px 30px rgba(7,28,55,.055);
}


/* ==========================================
   13 – FRAGE / SUMMARY
   ========================================== */

#ams-locations-faq
.ams-loc-faq-item summary {
  display: flex;
  align-items: center;

  gap: 17px;

  min-height: 88px;
  padding: 23px 24px;

  list-style: none;
  cursor: pointer;

  color: #173556;
}

#ams-locations-faq
.ams-loc-faq-item summary::-webkit-details-marker {
  display: none;
}

#ams-locations-faq
.ams-loc-faq-item summary::marker {
  content: "";
}

#ams-locations-faq .ams-loc-faq-number {
  display: block;
  flex-shrink: 0;

  color: #c70c33;

  font-size: 11px;
  font-weight: 750;
  line-height: 1.5;
  letter-spacing: .09em;
}


/* ==========================================
   14 – FAQ-FRAGEN ALS H3
   ========================================== */

#ams-locations-faq .ams-loc-faq-item h3 {
  flex: 1;
  min-width: 0;

  margin: 0;

  color: #173556;

  font-size: 17px;
  font-weight: 650;
  line-height: 1.5;
  letter-spacing: -.02em;

  overflow-wrap: break-word;
}

#ams-locations-faq
.ams-loc-faq-item[open] h3 {
  color: #102d4d;
}


/* ==========================================
   15 – PLUS / MINUS ICON
   ========================================== */

#ams-locations-faq .ams-loc-faq-toggle {
  position: relative;
  display: block;

  flex: 0 0 34px;

  width: 34px;
  height: 34px;

  border-radius: 50%;

  background: #edf2f6;

  transition: background .25s ease;
}

#ams-locations-faq
.ams-loc-faq-toggle::before,
#ams-locations-faq
.ams-loc-faq-toggle::after {
  content: "";

  position: absolute;
  display: block;

  background: #173556;
  border-radius: 2px;
}

#ams-locations-faq
.ams-loc-faq-toggle::before {
  top: 16px;
  left: 11px;

  width: 12px;
  height: 2px;
}

#ams-locations-faq
.ams-loc-faq-toggle::after {
  top: 11px;
  left: 16px;

  width: 2px;
  height: 12px;

  transition: transform .25s ease;
}

/* Geöffneter Zustand */

#ams-locations-faq
.ams-loc-faq-item[open]
.ams-loc-faq-toggle {
  background: var(--ams-red);
}

#ams-locations-faq
.ams-loc-faq-item[open]
.ams-loc-faq-toggle::before,
#ams-locations-faq
.ams-loc-faq-item[open]
.ams-loc-faq-toggle::after {
  background: #ffffff;
}

#ams-locations-faq
.ams-loc-faq-item[open]
.ams-loc-faq-toggle::after {
  transform: rotate(90deg);
}


/* ==========================================
   16 – FAQ-ANTWORTEN
   ========================================== */

#ams-locations-faq .ams-loc-faq-answer {
  margin: 0 24px 0 55px;
  padding: 0 0 28px;

  border-top: 1px solid #e7edf3;
}

#ams-locations-faq .ams-loc-faq-answer p {
  margin: 19px 0 0;

  color: #5f7185;

  font-size: 14px;
  line-height: 1.85;
}

#ams-locations-faq
.ams-loc-faq-answer p + p {
  margin-top: 15px;
}


/* ==========================================
   17 – LINKS IN DEN ANTWORTEN
   ========================================== */

#ams-locations-faq .ams-loc-faq-answer a {
  display: inline-flex;
  align-items: center;

  gap: 11px;
  max-width: 100%;

  margin-top: 22px;

  color: #bd0c32;

  font-size: 13px;
  font-weight: 750;
  line-height: 1.6;

  text-decoration: none;
  overflow-wrap: anywhere;
}

#ams-locations-faq
.ams-loc-faq-answer a:hover {
  color: #8d0927;

  text-decoration: underline;
  text-underline-offset: 4px;
}


/* ==========================================
   18 – SANFTE ACCORDION-ANIMATION
   ========================================== */

@keyframes ams-loc-faq-reveal {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: no-preference) {

  #ams-locations-faq
  .ams-loc-faq-item[open]
  .ams-loc-faq-answer {
    animation:
      ams-loc-faq-reveal
      320ms cubic-bezier(.22,1,.36,1);
  }

}


/* ==========================================
   19 – ABSCHLUSSBEREICH
   ========================================== */

#ams-locations-faq .ams-loc-faq-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 35px;

  margin-top: 36px;
  padding-top: 31px;

  border-top: 1px solid #dce4ec;
}

#ams-locations-faq .ams-loc-faq-bottom-copy {
  display: flex;
  align-items: flex-start;

  gap: 17px;
  min-width: 0;
}

#ams-locations-faq
.ams-loc-faq-bottom-accent {
  display: block;

  flex: 0 0 3px;

  width: 3px;
  height: 48px;

  background: var(--ams-red);
}

#ams-locations-faq
.ams-loc-faq-bottom-copy strong {
  display: block;

  margin-bottom: 8px;

  color: #173556;

  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
}

#ams-locations-faq
.ams-loc-faq-bottom-copy p {
  max-width: 740px;
  margin: 0;

  color: #65778a;

  font-size: 13px;
  line-height: 1.8;
}


/* ==========================================
   20 – ABSCHLUSSBUTTON
   ========================================== */

#ams-locations-faq .ams-loc-faq-bottom-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;

  flex-shrink: 0;

  gap: 22px;

  min-height: 52px;
  padding: 14px 20px;

  border: 1px solid #d5dfe8;
  border-radius: 4px;

  background: #ffffff;
  color: #173556;

  font-size: 13px;
  font-weight: 750;
  line-height: 1.5;

  text-decoration: none;

  transition:
    color .25s ease,
    border-color .25s ease,
    transform .25s ease;
}

#ams-locations-faq
.ams-loc-faq-bottom-link:hover {
  color: var(--ams-red);
  border-color: var(--ams-red);

  transform: translateY(-2px);
}


/* ==========================================
   21 – HOVER & TASTATURBEDIENUNG
   ========================================== */

@media (hover: hover) {

  #ams-locations-faq
  .ams-loc-faq-item:not([open]):hover {
    border-color: #cfdbe6;
  }

  #ams-locations-faq
  .ams-loc-faq-item:not([open]):hover
  .ams-loc-faq-toggle {
    background: #e2eaf2;
  }

}

#ams-locations-faq a:focus-visible,
#ams-locations-faq summary:focus-visible {
  outline: 3px solid var(--ams-red);
  outline-offset: 4px;
}

#ams-locations-faq
.ams-loc-faq-contact-card a:focus-visible {
  outline-color: #ffffff;
}


/* ==========================================
   22 – TABLET BIS 1100 PX
   ========================================== */

@media (max-width: 1100px) {

  #ams-locations-faq {
    padding: 95px 0;
  }

  #ams-locations-faq .ams-loc-faq-container {
    width: calc(100% - 48px);
  }

  #ams-locations-faq .ams-loc-faq-layout {
    gap: 20px;

    grid-template-columns:
      minmax(0, .82fr)
      minmax(0, 1.4fr);
  }

  #ams-locations-faq
  .ams-loc-faq-contact-card {
    padding: 30px;
  }

  #ams-locations-faq
  .ams-loc-faq-contact-card h3 {
    font-size: 34px;
  }

  #ams-locations-faq
  .ams-loc-faq-item summary {
    gap: 13px;
    padding: 20px 19px;
  }

  #ams-locations-faq
  .ams-loc-faq-item h3 {
    font-size: 16px;
  }

  #ams-locations-faq .ams-loc-faq-answer {
    margin-left: 47px;
    margin-right: 19px;
  }

}


/* ==========================================
   23 – TABLET BIS 900 PX
   ========================================== */

@media (max-width: 900px) {

  #ams-locations-faq .ams-loc-faq-layout {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  #ams-locations-faq .ams-loc-faq-aside {
    display: grid;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(230px, .8fr);

    align-items: stretch;
    gap: 16px;
  }

  #ams-locations-faq
  .ams-loc-faq-contact-card {
    min-height: 0;
  }

  #ams-locations-faq .ams-loc-faq-info-card {
    margin-top: 0;
  }

  #ams-locations-faq .ams-loc-faq-bottom {
    flex-direction: column;
    align-items: stretch;

    gap: 23px;
  }

  #ams-locations-faq
  .ams-loc-faq-bottom-link {
    align-self: flex-start;
  }

}


/* ==========================================
   24 – SMARTPHONE BIS 700 PX
   ========================================== */

@media (max-width: 700px) {

  #ams-locations-faq {
    padding: 76px 0;
  }

  #ams-locations-faq .ams-loc-faq-container {
    width: calc(100% - 38px);
  }

  /* Überschrift */

  #ams-locations-faq .ams-loc-faq-header {
    margin-bottom: 37px;
  }

  #ams-locations-faq .ams-loc-faq-eyebrow {
    font-size: 10px;
    letter-spacing: .09em;
  }

  #ams-locations-faq
  .ams-loc-faq-header h2 {
    margin: 21px 0 22px;

    font-size: clamp(35px, 8.4vw, 49px);
    line-height: 1.14;
  }

  #ams-locations-faq
  .ams-loc-faq-header > p {
    font-size: 14px;
    line-height: 1.8;
  }

  /* Kontaktbereich */

  #ams-locations-faq .ams-loc-faq-aside {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  #ams-locations-faq
  .ams-loc-faq-contact-card {
    padding: 29px 24px;
  }

  #ams-locations-faq
  .ams-loc-faq-contact-card h3 {
    font-size: 35px;
  }

  #ams-locations-faq
  .ams-loc-faq-contact-card > p {
    font-size: 13px;
  }

  #ams-locations-faq
  .ams-loc-faq-contact-bottom {
    padding-top: 35px;
  }

  #ams-locations-faq .ams-loc-faq-info-card {
    padding: 22px;
  }

  /* FAQ-Fragen */

  #ams-locations-faq .ams-loc-faq-list {
    gap: 10px;
  }

  #ams-locations-faq
  .ams-loc-faq-item summary {
    min-height: 75px;

    gap: 12px;
    padding: 18px 16px;
  }

  #ams-locations-faq .ams-loc-faq-number {
    font-size: 10px;
  }

  #ams-locations-faq .ams-loc-faq-item h3 {
    font-size: 14px;
    line-height: 1.5;
  }

  #ams-locations-faq .ams-loc-faq-toggle {
    flex-basis: 28px;

    width: 28px;
    height: 28px;
  }

  #ams-locations-faq
  .ams-loc-faq-toggle::before {
    top: 13px;
    left: 8px;
  }

  #ams-locations-faq
  .ams-loc-faq-toggle::after {
    top: 8px;
    left: 13px;
  }

  /* Antworten */

  #ams-locations-faq .ams-loc-faq-answer {
    margin: 0 16px;
    padding-bottom: 24px;
  }

  #ams-locations-faq .ams-loc-faq-answer p {
    font-size: 13px;
    line-height: 1.8;
  }

  #ams-locations-faq .ams-loc-faq-answer a {
    font-size: 12px;
  }

  /* Abschluss */

  #ams-locations-faq .ams-loc-faq-bottom {
    margin-top: 29px;
    padding-top: 25px;
  }

  #ams-locations-faq
  .ams-loc-faq-bottom-copy {
    gap: 13px;
  }

  #ams-locations-faq
  .ams-loc-faq-bottom-copy strong {
    font-size: 15px;
  }

  #ams-locations-faq
  .ams-loc-faq-bottom-copy p {
    font-size: 12px;
  }

  #ams-locations-faq
  .ams-loc-faq-bottom-link {
    width: 100%;
    align-self: stretch;
  }

}


/* ==========================================
   25 – KLEINE SMARTPHONES
   ========================================== */

@media (max-width: 380px) {

  #ams-locations-faq .ams-loc-faq-header h2 {
    font-size: 32px;
  }

  #ams-locations-faq
  .ams-loc-faq-contact-card {
    padding: 26px 20px;
  }

  #ams-locations-faq
  .ams-loc-faq-contact-card h3 {
    font-size: 31px;
  }

  #ams-locations-faq
  .ams-loc-faq-contact-button {
    padding: 14px 15px;
    font-size: 12px;
  }

  #ams-locations-faq .ams-loc-faq-info-card {
    padding: 19px 16px;
    gap: 12px;
  }

  #ams-locations-faq
  .ams-loc-faq-item summary {
    gap: 9px;
    padding: 17px 13px;
  }

  #ams-locations-faq .ams-loc-faq-item h3 {
    font-size: 13px;
  }

  #ams-locations-faq .ams-loc-faq-answer {
    margin: 0 13px;
  }

}


/* ==========================================
   26 – REDUZIERTE BEWEGUNG
   ========================================== */

@media (prefers-reduced-motion: reduce) {

  #ams-locations-faq .ams-loc-faq-item,
  #ams-locations-faq .ams-loc-faq-toggle,
  #ams-locations-faq .ams-loc-faq-toggle::after,
  #ams-locations-faq .ams-loc-faq-answer,
  #ams-locations-faq .ams-loc-faq-contact-button,
  #ams-locations-faq .ams-loc-faq-bottom-link {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

}

/* ==========================================
   ENDE MODUL 06
   ========================================== *//* End custom CSS */