/* ==========================================================================
   albaki.de – Bausteine der Überarbeitung vom August 2026
   Wird nach albaki.css geladen.

   Schwerpunkte: Soforthilfe-Führung im Hero, Vertrauensbereich,
   Kostenabschnitt, Kontaktband, Seite "Im Todesfall" und Ortsseiten.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Kontrastkorrektur der Flächen

   Gemessen mit überlagerten Hintergründen; Schwellwerte nach WCAG 2.1 AA
   (4,5:1 im Fließtext, 3,0:1 ab 24 px bzw. 18,66 px fett).
   -------------------------------------------------------------------------- */

/* Informationsleiste: Der Verlauf des Templates (mittleres Grün → Ocker)
   trug weißen Text mit nur 4,14:1. Der dunklere Verlauf bringt Weiß auf
   über 6,9:1; die Verweise stehen darin weiß statt gold. */
.header-top {
  background: #17493a;
  background: linear-gradient(90deg, #17493a 0%, #5a4700 100%);
}

.header-top a:hover,
.header-top a:focus {
  text-decoration: underline;
}

/* Die Leiste ist ein Dreispalter: links Kontakt, in der Mitte das
   Bismillah-Ornament, rechts die Erreichbarkeit. Das Template hatte das
   Ornament absolut über die Zeile gelegt, wodurch es Text überdeckte. */
.topbar_grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}

.topbar_left,
.topbar_right {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
}

.topbar_right {
  justify-content: flex-end;
}

.topbar_grid li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.topbar_center {
  display: flex;
  justify-content: center;
}

.topbar_center img {
  width: 190px;
  height: auto;
}

/* Hauptnavigation: sieben Punkte müssen in eine Zeile passen. */
#navigation #main-menu > ul {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

#navigation #main-menu li {
  padding: 10px 11px;
  white-space: nowrap;
}

#navigation #main-menu .menu-item-has-children {
  margin-right: 14px;
}

/* Der Pfeil des Untermenüs war auf eine Icon-Schrift ausgelegt; als
   CSS-Dreieck braucht er eine andere Grundlinie. */
#navigation #main-menu .menu-item-has-children::after {
  right: 0;
  top: 50%;
  margin-top: -1px;
}

/* Das mittlere Grün des Templates erreicht als Textfarbe auf Weiß nur
   4,14:1. Überall, wo es als Auszeichnung im Text dient, tritt das
   dunklere Grün an seine Stelle (10,3:1). */
.section-heading span,
.brand_claim,
.region_state,
.cgreen,
.prayer-title,
.contact-info li p a {
  color: #17493a;
}

/* Auf dunklen Abschnitten bleibt die Vorzeile gold. */
.white-title span,
.services .section-heading span,
.verse_area .section-heading span {
  color: var(--yellow);
}

/* Kreise mit weißer Beschriftung: mittleres Grün ergab 4,14:1. */
.us_num,
.ct_icon,
.contact-info li .cicon {
  background-color: #17493a;
}

/* Hero- und Soforthilfe-Verlauf: Der helle Endpunkt des Verlaufs führte
   dazu, dass weißer Text am rechten Rand nur 3,7:1 erreichte. */
.home-slider .single-slide {
  background-image: linear-gradient(115deg, #04231a 0%, #0d4a34 52%, #17624a 100%);
}

.emergency_box {
  background: linear-gradient(90deg, #042023 0%, #0f5a3c 62%, #17624a 100%);
}

.emergency_box p {
  color: rgba(255, 255, 255, 0.92);
}

.hero_trust li {
  color: rgba(255, 255, 255, 0.94);
}

.hero_lead {
  color: rgba(255, 255, 255, 0.95);
}

/* Die Vorzeile im Hero lag als Weiß auf hellem Gold bei 2,4:1. */
.slider_subtitle {
  background: linear-gradient(90deg, #17493a 0%, #5a4700 100%);
  color: #ffffff;
}

/* Umschrift und Hinweis unter den Qur'an-Versen. */
.verse_translit {
  color: rgba(255, 255, 255, 0.72);
}

/* Formularhinweise: das Grau des Templates erreichte 1,94:1. */
.field_hint,
.field_hint .req,
.form-group .field_hint {
  color: #4c5a54;
}

/* Seitenkopf der Unterseiten: Die Überschrift stand in Anthrazit auf
   dunkelgrünem Grund (1,05:1) – das Template hatte hier ein h2 erwartet. */
.main_banner h1 {
  color: var(--yellow);
  font-size: 40px;
}

.main_banner h1,
.main_banner h2 {
  line-height: 1.25;
}

/* Leistungsabschnitt: Die grüne Einfärbung war zu hell für weißen Text. */
.services::before {
  background-color: rgba(15, 58, 44, 0.94);
}

/* Fragenliste: geöffneter Kopf trug Weiß auf mittlerem Grün (4,14:1). */
#faq_accordion .accordion-button {
  background-color: #17493a;
  color: #ffffff;
}

#faq_accordion .accordion-button .acc_sign {
  background-color: #ffffff;
  color: #17493a;
}

#faq_accordion .accordion-button.collapsed .acc_sign {
  background-color: var(--yellow);
  color: #1b211f;
}

/* Quellenangabe der Qur'an-Zitate und Übersetzungshinweis. */
.verse_inline .verse_source {
  color: #17493a;
}

.verse_note {
  color: rgba(255, 255, 255, 0.66);
}

/* --------------------------------------------------------------------------
   Kontrastkorrektur der Template-Schaltflächen

   Das Template kombiniert Weiß auf hellem Gold (1,63:1) und Anthrazit auf
   mittlerem Grün (3,84:1). Beides ist deutlich unter den 4,5:1, die WCAG 2.1
   für Fließtextgrößen verlangt – auf einer Seite, die Menschen in Ausnahme-
   situationen zum Handeln führen soll, ist das nicht vertretbar.

   Die Klassennamen bleiben unverändert (das Markup des Templates
   funktioniert weiter), nur die Farbwerte werden ersetzt:
     .green_btn        Dunkelgrün #17493A + Weiß            ~10,3:1
     .yellow_btn       Gold #F5C50B + Anthrazit #1B211F     ~10,4:1
     .white_btn        Weiß + Dunkelgrün #17493A            ~10,3:1
     .green_border_btn Umriss, Anthrazit auf Weiß           ~15,0:1
   -------------------------------------------------------------------------- */
.green_btn,
button.green_btn,
.footer-widget .green_btn,
.offcanvas__contact .green_btn {
  background: #17493a;
  border-color: #17493a;
  color: #ffffff;
}

.green_btn:hover,
.green_btn:focus,
.footer-widget .green_btn:hover,
.footer-widget .green_btn:focus,
.offcanvas__contact .green_btn:hover,
.offcanvas__contact .green_btn:focus {
  background: #0f3428;
  border-color: #0f3428;
  color: #ffffff;
}

.yellow_btn,
button.yellow_btn {
  background-color: var(--yellow);
  border-color: var(--yellow);
  color: #1b211f;
}

.yellow_btn:hover,
.yellow_btn:focus {
  background-color: #d9ae06;
  border-color: #d9ae06;
  color: #1b211f;
}

/* Die eingeblendete Schrägfläche des Templates würde den Kontrast beim
   Überfahren wieder zerstören – sie wird deshalb abgeschaltet. Die
   Zustandsänderung übernimmt der Farbwechsel oben. */
.green_btn::before,
.yellow_btn::before {
  display: none;
}

.emergency_box .white_btn {
  background-color: #ffffff;
  border-color: #ffffff;
  color: #17493a;
}

.emergency_box .white_btn:hover,
.emergency_box .white_btn:focus {
  background-color: var(--yellow);
  border-color: var(--yellow);
  color: #1b211f;
}

.green_border_btn {
  border-color: #17493a;
  color: #1b211f;
}

.green_border_btn:hover,
.green_border_btn:focus {
  background-color: #17493a;
  border-color: #17493a;
  color: #ffffff;
}

.gray_btn {
  color: #17493a;
}

.gray_btn:hover,
.gray_btn:focus {
  background-color: #17493a;
  border-color: #17493a;
  color: #ffffff;
}

/* Verweise im Fließtext: das mittlere Grün des Templates erreicht auf Weiß
   nur 4,14:1. Das dunklere Grün liegt bei 10,3:1. */
a {
  color: #17493a;
}

a:hover,
a:focus {
  color: #0f3428;
}

/* Akzentfarbe im Fließtext: das dunklere Grün erreicht auf Weiß 10,3:1,
   das mittlere Grün des Templates nur 4,14:1. */
a.cgreen,
a.service_more,
.region_card .region_more,
.team_role,
.contact_tile .ct_main,
.single-course h3 a,
.more_courses a {
  color: #17493a;
}

a.service_more:hover,
a.service_more:focus,
.region_card:hover .region_more,
.contact_tile .ct_main:hover,
.contact_tile .ct_main:focus {
  color: #0f3428;
}

/* Auf dunklen Flächen bleibt Gold die richtige Verweisfarbe. */
.contact_band a:not(.ca_btn),
.verse_area a,
.main_banner a,
.header-top a {
  color: var(--yellow);
}

.footer-widget a:not(.green_btn):not(.ca_btn),
.footer-contact a,
.footer_social a,
.fsocial-option a,
.copyright a {
  color: rgba(255, 255, 255, 0.82);
}

.footer-widget a:not(.green_btn):not(.ca_btn):hover,
.footer-widget a:not(.green_btn):not(.ca_btn):focus,
.footer-contact a:hover,
.footer-contact a:focus,
.footer_social a:hover,
.footer_social a:focus,
.fsocial-option a:hover,
.fsocial-option a:focus,
.copyright a:hover,
.copyright a:focus {
  color: var(--yellow);
}

/* Die Knöpfe erben ihre Schriftfarbe nie vom Abschnitt – sonst stünde im
   Hero (heller Text auf dunklem Grund) Weiß auf Gold. */
.ca_btn--call,
.ca_btn--call:hover,
.ca_btn--call:focus,
.slider-content .ca_btn--call,
.contact_band .ca_btn--call,
.emergency_box .ca_btn--call,
.local_call .ca_btn--call {
  color: #1b211f;
}

.ca_btn--second,
.slider-content .ca_btn--second,
.local_call .ca_btn--second {
  color: #ffffff;
}

.call_actions--on-dark .ca_btn--second:hover,
.call_actions--on-dark .ca_btn--second:focus,
.contact_band .ca_btn--second:hover,
.contact_band .ca_btn--second:focus {
  color: #17493a;
}

/* --------------------------------------------------------------------------
   Hero: Untertitel und Handlungsaufrufe
   -------------------------------------------------------------------------- */
.slider-content {
  padding: 150px 0 190px;
}

.hero_lead {
  font-size: 19px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.92);
  max-width: 62ch;
  margin-bottom: 34px;
}

.call_actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* Eigene Knöpfe statt der Template-Klassen: Deren Farbpaare (helles Gold
   mit Weiß, mittleres Grün mit Anthrazit) verfehlen die Kontrastwerte nach
   WCAG. Die folgenden Kombinationen sind geprüft:
     Gold #F5C50B auf Anthrazit #1B211F   – etwa 10,4:1
     Dunkelgrün #17493A auf Weiß          – etwa 10,3:1
     Weiß auf Dunkelgrün-Verlauf          – über 9:1                       */
.ca_btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 13px 26px;
  border-radius: 8px;
  border: 2px solid transparent;
  font-size: 15px;
  line-height: 1.3;
  text-align: left;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

.ca_btn:hover,
.ca_btn:focus {
  text-decoration: none;
}

.ca_btn i {
  font-size: 21px;
  flex: 0 0 auto;
}

.ca_text {
  display: flex;
  flex-direction: column;
}

.ca_label {
  display: block;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.ca_label--single {
  font-size: 16px;
  font-weight: 600;
}

.ca_number {
  display: block;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
}

/* Anrufen – Gold mit Anthrazit, auf jedem Hintergrund gleich */
.ca_btn--call {
  background-color: var(--yellow);
  border-color: var(--yellow);
  color: #1b211f;
}

.ca_btn--call:hover,
.ca_btn--call:focus {
  background-color: #d9ae06;
  border-color: #d9ae06;
  color: #1b211f;
}

/* Zweitverweis auf hellem Hintergrund – Dunkelgrün mit Weiß */
.ca_btn--second {
  background-color: #17493a;
  border-color: #17493a;
  color: #ffffff;
}

.ca_btn--second:hover,
.ca_btn--second:focus {
  background-color: #0f3428;
  border-color: #0f3428;
  color: #ffffff;
}

/* Zweitverweis auf dunklem Hintergrund – Umriss in Weiß */
.call_actions--on-dark .ca_btn--second,
.contact_band .ca_btn--second,
.emergency_box .ca_btn--second {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.65);
  color: #ffffff;
}

.call_actions--on-dark .ca_btn--second:hover,
.call_actions--on-dark .ca_btn--second:focus,
.contact_band .ca_btn--second:hover,
.contact_band .ca_btn--second:focus,
.emergency_box .ca_btn--second:hover,
.emergency_box .ca_btn--second:focus {
  background-color: #ffffff;
  border-color: #ffffff;
  color: #17493a;
}

/* Das Kontaktband färbt Verweise gold – die Knöpfe bleiben davon
   unberührt, sonst stünde Gold auf Gold. */
.contact_band a.ca_btn--call {
  color: #1b211f;
}

.contact_band a.ca_btn--second {
  color: #ffffff;
}

.contact_band a.ca_btn--second:hover,
.contact_band a.ca_btn--second:focus {
  color: #17493a;
}

.hero_trust {
  list-style: none;
  margin: 40px 0 0;
  padding: 26px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 30px;
}

.hero_trust li {
  color: rgba(255, 255, 255, 0.9);
  font-size: 15.5px;
  line-height: 1.5;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.hero_trust i {
  color: var(--yellow);
  margin-top: 5px;
  flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   Vertrauensbereich
   -------------------------------------------------------------------------- */
.promise_card {
  border: 1px solid var(--dc);
  border-radius: 15px;
  padding: 30px 28px;
  background-color: var(--white);
  transition: 0.4s;
}

.promise_card:hover {
  border-color: var(--yellow);
  box-shadow: var(--box-shadow);
}

.promise_icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: rgba(29, 142, 90, 0.09);
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  margin-bottom: 20px;
}

.promise_card h3 {
  font-size: 20px;
  margin-bottom: 10px;
}

.promise_card p {
  margin-bottom: 0;
}

.promise_note {
  margin: 34px 0 0;
  padding: 18px 22px;
  border-radius: 12px;
  background-color: rgba(245, 197, 11, 0.09);
  border: 1px dashed rgba(245, 197, 11, 0.5);
}

.promise_note i {
  color: var(--green);
}

/* Ansprechpartner – erscheinen nur, wenn echte Einträge vorliegen. */
.team_headline {
  font-size: 24px;
  margin-bottom: 4px;
}

.team_card {
  border: 1px solid var(--dc);
  border-radius: 15px;
  padding: 30px 28px;
  text-align: center;
}

.team_photo,
.team_initials {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  margin: 0 auto 20px;
  object-fit: cover;
}

.team_initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(29, 142, 90, 0.1);
  color: var(--green);
  font-size: 34px;
  font-weight: 600;
}

.team_card h4 {
  font-size: 20px;
  margin-bottom: 4px;
}

.team_role {
  color: var(--green);
  font-weight: 500;
  margin-bottom: 8px;
}

.team_meta {
  font-size: 15px;
  margin-bottom: 12px;
}

/* --------------------------------------------------------------------------
   Leistungskarten
   -------------------------------------------------------------------------- */
.single-service {
  display: flex;
  flex-direction: column;
}

.single-service .ser-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.service_more {
  display: inline-flex;
  align-items: center;
  margin-top: auto;
  padding-top: 14px;
  color: var(--green);
  font-weight: 600;
}

.service_more:hover,
.service_more:focus {
  color: var(--title);
}

/* --------------------------------------------------------------------------
   Kosten
   -------------------------------------------------------------------------- */
.cost_box {
  background-color: var(--f7);
  border: 1px solid var(--dc);
  border-radius: 20px;
  padding: 46px 50px;
}

.cost_box h2 {
  font-size: 32px;
  margin-bottom: 16px;
}

.cost_list {
  background-color: var(--white);
  border: 1px solid var(--dc);
  border-radius: 14px;
  padding: 24px 26px;
}

/* --------------------------------------------------------------------------
   Kontaktband
   -------------------------------------------------------------------------- */
.contact_band {
  background-color: var(--fbg);
  background-image: linear-gradient(115deg, #04231a 0%, #0f5a3c 100%);
  color: rgba(255, 255, 255, 0.88);
}

.contact_band h2 {
  color: #fff;
  font-size: 32px;
}

.contact_band a {
  color: var(--yellow);
}

.contact_band__mail a {
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Seite "Im Todesfall" – die drei Schritte
   -------------------------------------------------------------------------- */
.urgent_box {
  border: 2px solid var(--green);
  border-radius: 20px;
  padding: 42px 46px;
  background-color: var(--white);
  box-shadow: var(--shadow-3);
}

.urgent_box h2 {
  font-size: 32px;
  margin-bottom: 26px;
}

.urgent_steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

.urgent_steps > li {
  display: flex;
  gap: 22px;
  padding-bottom: 26px;
}

.urgent_steps > li:last-child {
  padding-bottom: 0;
}

.us_num {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: #17493a;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 600;
}

.urgent_steps h3 {
  font-size: 21px;
  margin-bottom: 6px;
}

.urgent_steps p {
  margin-bottom: 0;
}

.urgent_phone {
  font-size: 28px;
  font-weight: 700;
  color: var(--green);
}

.urgent_phone:hover,
.urgent_phone:focus {
  color: var(--title);
}

.doc_list {
  background-color: var(--f7);
  border: 1px solid var(--dc);
  border-radius: 14px;
  padding: 26px 28px;
}

/* --------------------------------------------------------------------------
   Ortsseiten
   -------------------------------------------------------------------------- */
.region_card {
  display: block;
  border: 1px solid var(--dc);
  border-radius: 15px;
  padding: 28px 26px;
  color: var(--body);
  transition: 0.4s;
}

.region_card:hover,
.region_card:focus {
  border-color: var(--green);
  box-shadow: var(--box-shadow);
  color: var(--body);
  text-decoration: none;
}

.region_state {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #17493a;
  font-weight: 600;
  margin-bottom: 10px;
}

.region_card h3 {
  font-size: 20px;
  margin-bottom: 10px;
}

.region_cemetery {
  margin-bottom: 16px;
}

.region_more {
  display: inline-flex;
  align-items: center;
  color: var(--green);
  font-weight: 600;
  font-size: 15px;
}

.region_links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.region_links a {
  display: inline-block;
  padding: 10px 18px;
  border: 1px solid var(--dc);
  border-radius: 30px;
  color: var(--title);
  font-size: 15px;
  transition: 0.4s;
}

.region_links a:hover,
.region_links a:focus {
  border-color: var(--green);
  color: var(--green);
  text-decoration: none;
}

.local_call {
  background-color: var(--f7);
  border: 1px solid var(--dc);
  border-radius: 18px;
  padding: 32px 30px;
}

.local_call h2 {
  font-size: 25px;
  margin-bottom: 8px;
}

.local_call .call_actions {
  flex-direction: column;
}

.local_call .call_actions .ca_btn {
  width: 100%;
  justify-content: center;
}

.source_note {
  font-size: 14px;
  background-color: var(--f7);
  border-radius: 10px;
  padding: 14px 16px;
  margin-top: 8px;
}

.brand_note {
  font-size: 15px;
  border-left: 3px solid var(--dc);
  padding-left: 16px;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 1199px) {
  .slider-content {
    padding: 70px 0 150px;
    text-align: left;
  }

  .hero_trust {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media only screen and (max-width: 991px) {
  .cost_box,
  .urgent_box {
    padding: 30px 26px;
  }

  .cost_box h2,
  .urgent_box h2,
  .contact_band h2 {
    font-size: 25px;
  }

  .local_call {
    padding: 26px 22px;
  }
}

@media only screen and (max-width: 767px) {
  /* Ziel: Auf einem 375x667-Display muss der Anruf-Knopf im ersten
     Bildschirm sichtbar sein. Dafür wird oberhalb davon Platz gespart. */

  /* Die Informationsleiste zeigt auf dem Telefon nur die Rufnummer.
     Erreichbarkeit, Einsatzgebiet und Sprachen stehen ohnehin direkt
     darunter in den Vertrauenspunkten des Hero. */
  .header-top {
    padding: 10px 0;
  }

  /* Auf dem Telefon bleibt nur die Rufnummer stehen; Erreichbarkeit,
     Einsatzgebiet und Sprachen stehen direkt darunter im Hero. */
  .topbar_grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .topbar_center,
  .topbar_right,
  .topbar_left li:not(:first-child) {
    display: none;
  }

  .topbar_left {
    justify-content: center;
  }

  .header-top ul li {
    margin-bottom: 0;
  }

  .slider-content {
    padding: 26px 0 110px;
  }

  .slider-content h1 {
    font-size: 30px;
    line-height: 1.24;
    margin-top: 16px;
    margin-bottom: 14px;
  }

  .hero_lead {
    font-size: 16.5px;
    line-height: 1.62;
    margin-bottom: 22px;
  }

  .hero_trust {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 30px;
    padding-top: 22px;
  }

  .hero_trust li {
    font-size: 15px;
  }

  /* Beide Handlungsaufrufe volle Breite – mit einem Finger erreichbar. */
  .call_actions {
    flex-direction: column;
    gap: 12px;
  }

  .call_actions .ca_btn {
    width: 100%;
    justify-content: center;
    padding: 13px 18px;
  }

  .ca_number {
    font-size: 22px;
  }

  .urgent_steps > li {
    gap: 16px;
  }

  .us_num {
    width: 38px;
    height: 38px;
    font-size: 17px;
  }

  .urgent_phone {
    font-size: 25px;
  }

  .promise_card,
  .team_card {
    padding: 24px 22px;
  }

  .region_links a {
    font-size: 14px;
    padding: 9px 15px;
  }
}


/* ==========================================================================
   Symbol-Medaillons

   Das Template legte hinter jeden Symbolkreis einen zweiten, um drei Pixel
   versetzten Kreis in der Gegenfarbe. Das liest sich nicht als Gestaltung,
   sondern als Passungsfehler – und das anthrazitfarbene Symbol auf mittlerem
   Grün blieb trüb (3,84:1).

   An seine Stelle tritt ein symmetrisches Medaillon aus konzentrischen
   Ringen: blassgrüne Scheibe, Haarlinie, weißer Zwischenraum, feiner
   Goldring. Das Symbol steht darin in Dunkelgrün (9,6:1). Ruhig, bewusst
   gesetzt, und dem islamisch-geometrischen Charakter näher als der Versatz.
   ========================================================================== */

.service_icon,
.counter_icon,
.promise_icon,
.contact_tile .ct_icon,
.value_list .val_icon,
.urgent_steps .us_num,
.contact-info li .cicon,
.steps_list > li::before {
  background-color: #f1f6f3;
  background-image: none;
  color: #17493a;
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 1px rgba(23, 73, 58, 0.1),
    0 0 0 4px #ffffff,
    0 0 0 5px rgba(184, 148, 79, 0.55);
  transition: box-shadow 0.35s, background-color 0.35s, color 0.35s;
}

/* Der versetzte Zweitkreis des Templates entfällt. */
.service_icon::after,
.counter_icon::after,
.contact-info li .cicon::after,
.steps_list > li::after {
  display: none;
}

/* Einheitliche Maße */
.service_icon,
.counter_icon,
.promise_icon,
.contact_tile .ct_icon {
  width: 64px;
  height: 64px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 26px;
  text-align: center;
}

.service_icon svg,
.counter_icon svg {
  width: 27px;
  height: 27px;
  color: #17493a;
}

.service_icon i,
.counter_icon i,
.promise_icon i,
.contact_tile .ct_icon i {
  font-size: 24px;
  color: #17493a;
  line-height: 1;
}

.value_list .val_icon {
  width: 54px;
  height: 54px;
  font-size: 21px;
}

.value_list .val_icon i {
  color: #17493a;
}

/* Beim Überfahren der Karte wird der Goldring geschlossen und die Scheibe
   nimmt einen Hauch mehr Farbe an – ohne Bewegung, ohne Sprung. */
.single-service:hover .service_icon,
.promise_card:hover .promise_icon,
.contact_tile:hover .ct_icon {
  background-color: #e5efe9;
  box-shadow:
    inset 0 0 0 1px rgba(23, 73, 58, 0.14),
    0 0 0 4px #ffffff,
    0 0 0 5px rgba(184, 148, 79, 0.95);
}

/* Nummerierte Schritte: dieselbe Scheibe, Ziffer in Dunkelgrün. */
.urgent_steps .us_num,
.steps_list > li::before {
  width: 52px;
  height: 52px;
  color: #17493a;
  font-weight: 600;
  font-size: 17px;
}

.urgent_steps .us_num {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
}

.steps_list > li::before {
  line-height: 52px;
  text-align: center;
}

.steps_list > li .step_line {
  left: 26px;
  top: 64px;
  background-color: rgba(23, 73, 58, 0.16);
}

/* Kontaktkacheln des Templates */
.contact-info li .cicon {
  width: 54px;
  height: 54px;
  line-height: 54px;
}

.contact-info li .cicon i {
  color: #17493a;
}

/* Telefon-Symbol in der Kopfzeile – kleiner, ohne Goldring, damit es die
   Rufnummer nicht überstrahlt. */
.header_call .hc_icon {
  width: 46px;
  height: 46px;
  background-color: #f1f6f3;
  color: #17493a;
  box-shadow: inset 0 0 0 1px rgba(23, 73, 58, 0.12);
}

.header_call:hover .hc_icon,
.header_call:focus .hc_icon {
  background-color: var(--yellow);
  color: #1b211f;
}

/* Mobile Anpassung der Medaillons */
@media only screen and (max-width: 767px) {
  .service_icon,
  .counter_icon,
  .promise_icon,
  .contact_tile .ct_icon {
    width: 56px;
    height: 56px;
    margin-bottom: 20px;
  }

  .service_icon svg,
  .counter_icon svg {
    width: 24px;
    height: 24px;
  }

  .service_icon i,
  .counter_icon i,
  .promise_icon i,
  .contact_tile .ct_icon i {
    font-size: 21px;
  }

  .urgent_steps .us_num,
  .steps_list > li::before {
    width: 44px;
    height: 44px;
    font-size: 16px;
  }

  .steps_list > li::before {
    line-height: 44px;
  }

  .steps_list > li {
    padding-left: 62px;
  }

  .steps_list > li .step_line {
    left: 22px;
    top: 56px;
  }

  /* Auf schmalen Geräten wird der Goldring schmaler, damit die Ringe nicht
     zusammenlaufen. */
  .service_icon,
  .promise_icon,
  .contact_tile .ct_icon,
  .urgent_steps .us_num,
  .steps_list > li::before {
    box-shadow:
      inset 0 0 0 1px rgba(23, 73, 58, 0.1),
      0 0 0 3px #ffffff,
      0 0 0 4px rgba(184, 148, 79, 0.55);
  }
}


/* Auf kleinen Telefonen muss trotz des Verses der Anruf-Knopf im ersten
   Bildschirm bleiben. Deshalb rücken Vers, Vorzeile, Überschrift und
   Einleitung enger zusammen – der Vers bleibt dabei die erste Aussage. */
@media only screen and (max-width: 767px) {
  .slider-content {
    padding: 16px 0 104px;
  }

  .slider_subtitle {
    font-size: 13px;
    padding: 4px 15px;
  }

  .slider-content h1 {
    font-size: 27px;
    line-height: 1.22;
    margin-top: 13px;
    margin-bottom: 12px;
  }

  .hero_lead {
    font-size: 16px;
    line-height: 1.58;
    margin-bottom: 18px;
  }
}

/* Sehr kleine Telefone (360 x 640 und schmaler): Hier verdeckt sonst die
   feste Anrufleiste am unteren Rand den Anruf-Knopf im Hero. Alle Abstände
   rücken noch einmal zusammen – ohne Inhalte zu streichen und ohne die
   Schrift unter eine gut lesbare Größe zu drücken. */
@media only screen and (max-width: 389px) {
  .slider-content {
    padding: 10px 0 96px;
  }

  .slider-content h1 {
    font-size: 25px;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .hero_lead {
    font-size: 15.5px;
    line-height: 1.55;
    margin-bottom: 16px;
  }

  .hero_trust {
    margin-top: 24px;
    padding-top: 18px;
  }
}

/* Auf Telefonen rückt der Anruf direkt unter die Überschrift: erst der
   Vers, dann die Einordnung, dann die Handlung, danach die Erklärung.
   So liegt der Knopf sicher oberhalb der festen Anrufleiste, ohne dass
   Schriftgrößen unter eine gut lesbare Größe gedrückt werden müssen.

   Die Lesereihenfolge bleibt sinnvoll: zwischen Überschrift und Knopf
   steht im Quelltext kein bedienbares Element, die Fokusreihenfolge
   ändert sich also nicht. */
@media only screen and (max-width: 767px) {
  .slider-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .slider-content .slider_subtitle {
    order: 1;
    align-self: flex-start;
  }

  .slider-content h1 {
    order: 2;
  }

  .slider-content .call_actions {
    order: 3;
    width: 100%;
    margin-bottom: 26px;
  }

  .slider-content .hero_lead {
    order: 4;
    margin-bottom: 0;
  }

  .slider-content .hero_trust {
    order: 5;
    width: 100%;
  }
}


/* ==========================================================================
   Taʿziya-Band

   „Innā lillāhi wa innā ilayhi rājiʿūn“ – der Satz, den Muslime beim Empfang
   einer Todesnachricht sprechen. Er steht als eigenes, mittig gesetztes Band
   zwischen Kopfbereich und Hero.

   Vorher stand er im Hero. Das war falsch: In einem 46 Zeichen breiten
   Kasten lag der arabische Text rechtsbündig, während Überschrift und
   Einleitung linksbündig auf 856 Pixel liefen – zwei Achsen ohne Bezug.
   Dazu drückte er die Überschrift um 150 Pixel nach unten. Als eigenes Band
   hat er eine klare Mitte und zieht den Hero nicht auseinander.
   ========================================================================== */
.taziya {
  /* Eine Spur dunkler als der Beginn des Hero-Verlaufs, damit sich das Band
     als eigener Bereich liest – zusammen mit der Goldlinie darunter. */
  background-color: #031c15;
  border-bottom: 1px solid rgba(245, 197, 11, 0.22);
  padding: 26px 0 22px;
}

.taziya__inner {
  margin: 0;
  text-align: center;
}

.taziya__ar {
  font-family: var(--arabic);
  font-size: 32px;
  /* Einzeilig gesetzt – 1,6 lässt den Vokalzeichen Raum, ohne dass das Band
     auseinanderfällt. */
  line-height: 1.6;
  color: var(--yellow);
  direction: rtl;
  text-align: center;
  margin: 0 0 10px;
}

.taziya__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 4px 16px;
}

.taziya__de {
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.94);
  font-style: italic;
}

.taziya__src {
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-style: normal;
  color: rgba(245, 197, 11, 0.85);
  white-space: nowrap;
}

/* Hero: Der Abstand nach oben war auf 150 Pixel eingestellt und ließ eine
   leere Fläche entstehen. Mit dem Band darüber genügt deutlich weniger. */
.slider-content {
  padding: 74px 0 170px;
}

/* Die Vorzeile trug den Blob-Radius des Templates (127px 25px 150px 11px).
   Als schlichter Umriss wirkt sie ruhiger und absichtsvoll. */
.slider_subtitle {
  background: transparent;
  border: 1px solid rgba(245, 197, 11, 0.5);
  border-radius: 999px;
  color: var(--yellow);
  padding: 7px 20px;
  font-size: 14px;
  letter-spacing: 0.06em;
  display: inline-block;
}

@media only screen and (max-width: 1199px) {
  .slider-content {
    padding: 56px 0 150px;
  }
}

@media only screen and (max-width: 991px) {
  .taziya {
    padding: 24px 0 20px;
  }

  .taziya__ar {
    font-size: 28px;
    line-height: 1.6;
  }
}

@media only screen and (max-width: 767px) {
  .taziya {
    padding: 20px 0 18px;
  }

  .taziya__ar {
    font-size: 24px;
    line-height: 1.62;
    margin-bottom: 8px;
  }

  .taziya__de {
    font-size: 14.5px;
  }

  .taziya__src {
    font-size: 11.5px;
  }

  .slider-content {
    padding: 30px 0 104px;
  }

  .slider_subtitle {
    font-size: 12.5px;
    padding: 6px 16px;
  }
}

@media only screen and (max-width: 389px) {
  .taziya__ar {
    font-size: 22px;
  }

  .taziya__de {
    font-size: 14px;
  }

  .slider-content {
    padding: 24px 0 96px;
  }
}